@rohal12/spindle 0.52.8 → 0.53.0

package/dist/pkg/headless.js

@@ -3,7 +3,7 @@ import { useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, u
 import { useSyncExternalStore } from "preact/compat";
 import { createStore } from "zustand/vanilla";
 import { immer } from "zustand/middleware/immer";
-import { Immer, applyPatches, current, enableMapSet, enablePatches, freeze, isDraft, produceWithPatches } from "immer";
+import { Immer, current, enableMapSet, enablePatches, freeze, isDraft } from "immer";
 import { shallow } from "zustand/vanilla/shallow";
 import { Fragment as Fragment$1, jsx, jsxs } from "preact/jsx-runtime";
 import { micromark } from "micromark";
@@ -32,338 +32,6 @@ function create() {
 	return (initializer) => bindPreact(createStore()(initializer));
 }
 //#endregion
-//#region src/utils/namespace.ts
-/** The variable name no namespace can hold. */
-var RESERVED_NAME = "__proto__";
-/**
-* Why `name` (without its sigil) cannot be a variable name, or undefined if
-* it can. `label` is the name as the author wrote it (e.g. `$__proto__`).
-*/
-function variableNameError(name, label = name) {
-	return name === "__proto__" ? `"${label}" cannot be used as a variable name (${RESERVED_NAME} is reserved)` : void 0;
-}
-/** Throw a TypeError if `name` cannot be a variable name. */
-function checkVariableName(name, label = name) {
-	const error = variableNameError(name, label);
-	if (error) throw new TypeError(`spindle: ${error}`);
-}
-/** Whether `obj` holds `key` as an own property. */
-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`.
-*/
-function ownEntries(sources, keep = () => true) {
-	const record = Object.create(null);
-	for (const source of sources) {
-		if (!source) continue;
-		for (const key of Object.keys(source)) {
-			const value = source[key];
-			if (keep(value)) record[key] = value;
-		}
-	}
-	return record;
-}
-/** A namespace with no prototype holding the own entries of `sources`. */
-var createNamespace = (...sources) => ownEntries(sources);
-/** Whether `value` is an object with no prototype. */
-var isNamespace = (value) => Object.getPrototypeOf(value) === null;
-/** `ns` itself if it has no prototype, else a namespace copy of it. */
-var asNamespace = (ns) => isNamespace(ns) ? ns : createNamespace(ns);
-/** A namespace copy of `ns` with `key` set to `value`. */
-function withEntry(ns, key, value) {
-	const next = createNamespace(ns);
-	next[key] = value;
-	return next;
-}
-/** An empty namespace that cannot change. */
-var EMPTY_NAMESPACE = Object.freeze(createNamespace());
-/** The names whose own entries differ between `a` and `b`, `a`'s first. */
-function changedNames(a, b) {
-	return [...new Set([...Object.keys(a), ...Object.keys(b)])].filter((name) => ownValue(a, name) !== ownValue(b, name));
-}
-var isCount = (value) => typeof value === "number" && Number.isInteger(value) && value >= 0;
-/** The count of `name` in `counts`: its own entry, or 0. */
-function countOf(counts, name) {
-	const value = ownValue(counts, name);
-	return isCount(value) ? value : 0;
-}
-/**
-* Counters with no prototype holding the own entries of `source` that are
-* counts, with `name` (if given) counted once more. Immer copies the
-* counters on every write anyway, so counting into a fresh copy costs no
-* more than counting in place.
-*/
-function createCounts(source, name) {
-	const counts = ownEntries([source], isCount);
-	if (name !== void 0) counts[name] = countOf(source, name) + 1;
-	return counts;
-}
-//#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);
-}
-function deserialize(value) {
-	function deserKeys(target, data) {
-		for (const key of Object.keys(data)) setOwn(target, key, deser(data[key]));
-		return target;
-	}
-	function deser(val) {
-		if (val === null || typeof val !== "object") return val;
-		if (Array.isArray(val)) return val.map((item) => deser(item));
-		const obj = val;
-		if (CLASS_TAG in obj && DATA_TAG in obj) {
-			const name = obj[CLASS_TAG];
-			const data = obj[DATA_TAG];
-			switch (name) {
-				case "__Date__": return new Date(data.iso === null ? NaN : data.iso);
-				case "__RegExp__": return new RegExp(data.source, data.flags);
-				case "__Map__": {
-					const entries = data.entries;
-					return new Map(entries.map(([k, v]) => [deser(k), deser(v)]));
-				}
-				case "__Set__": return new Set(data.entries.map((v) => deser(v)));
-				case "__Undefined__": return;
-				case "__Number__": return SPECIAL_NUMBERS[data.value];
-				case "__BigInt__": return BigInt(data.value);
-				case "__Object__": return deserKeys({}, data);
-			}
-			const ctor = registry$1.get(name);
-			if (!ctor) {
-				console.warn(`spindle: Class "${name}" not registered. Falling back to plain object.`);
-				return deserKeys({}, data);
-			}
-			return deserKeys(Object.create(ctor.prototype), data);
-		}
-		if (val instanceof Date || val instanceof RegExp || val instanceof Map || val instanceof Set) return val;
-		if (registeredClassName(obj) !== void 0) return val;
-		return deserKeys({}, obj);
-	}
-	return deser(value);
-}
-function isDataRecord(value) {
-	return typeof value === "object" && value !== null && !Array.isArray(value);
-}
-/**
-* Whether `value` is serialized data that deserialize() can restore: every
-* tagged value has the shape serialize() writes for its tag (a valid ISO
-* date or null, a compilable RegExp, Map entries as `[key, value]` pairs,
-* Set entries as an array, a special number's name, a bigint in decimal,
-* class data as an object) and no object has a "__proto__" key, at any
-* depth. Use it on data from outside the running story, such as an
-* imported save, before storing it. Tags of unregistered classes pass;
-* they load as plain objects.
-*/
-function isDeserializable(value) {
-	const path = /* @__PURE__ */ new Set();
-	function check(val) {
-		if (val === null || typeof val !== "object") return true;
-		if (path.has(val)) return false;
-		path.add(val);
-		const ok = checkObject(val);
-		path.delete(val);
-		return ok;
-	}
-	const checkKeys = (obj) => Object.keys(obj).every((key) => key !== "__proto__" && check(obj[key]));
-	function checkObject(val) {
-		if (Array.isArray(val)) return Array.from(val).every(check);
-		const obj = val;
-		if (!(CLASS_TAG in obj && DATA_TAG in obj)) return checkKeys(obj);
-		const name = obj[CLASS_TAG];
-		const data = obj[DATA_TAG];
-		if (typeof name !== "string" || !isDataRecord(data)) return false;
-		switch (name) {
-			case "__Date__": return data.iso === null || typeof data.iso === "string" && !Number.isNaN(new Date(data.iso).getTime());
-			case "__RegExp__":
-				if (typeof data.source !== "string" || typeof data.flags !== "string") return false;
-				try {
-					new RegExp(data.source, data.flags);
-					return true;
-				} catch {
-					return false;
-				}
-			case "__Map__": return Array.isArray(data.entries) && Array.from(data.entries).every((entry) => Array.isArray(entry) && entry.length === 2 && check(entry[0]) && check(entry[1]));
-			case "__Set__": return Array.isArray(data.entries) && Array.from(data.entries).every(check);
-			case "__Undefined__": return true;
-			case "__Number__": return typeof data.value === "string" && hasOwn(SPECIAL_NUMBERS, data.value);
-			case "__BigInt__": return typeof data.value === "string" && /^-?\d+$/.test(data.value);
-			default: return checkKeys(data);
-		}
-	}
-	return check(value);
-}
-//#endregion
-//#region src/saves/types.ts
-function isSaveExport(value) {
-	if (typeof value !== "object" || value === null) return false;
-	const obj = value;
-	if (obj.version !== 1 || typeof obj.ifid !== "string") return false;
-	if (typeof obj.save !== "object" || obj.save === null) return false;
-	const save = obj.save;
-	if (typeof save.meta !== "object" || save.meta === null) return false;
-	if (typeof save.payload !== "object" || save.payload === null) return false;
-	const meta = save.meta;
-	if (typeof meta.id !== "string" || typeof meta.passage !== "string") return false;
-	if (typeof meta.ifid !== "string") return false;
-	if (typeof meta.playthroughId !== "string") return false;
-	if (typeof meta.createdAt !== "string") return false;
-	if (typeof meta.updatedAt !== "string") return false;
-	if (typeof meta.title !== "string") return false;
-	return isImportablePayload(save.payload);
-}
-function isRecord(value) {
-	return typeof value === "object" && value !== null && !Array.isArray(value);
-}
-/** Absent, null, or a `{ seed, pull }` PRNG snapshot. */
-function isOptionalPRNGSnapshot(value) {
-	if (value == null) return true;
-	return isRecord(value) && typeof value.seed === "string" && typeof value.pull === "number" && Number.isInteger(value.pull) && value.pull >= 0;
-}
-/** A variable container whose values deserialize() can restore. */
-function isSerializedVariables(value) {
-	return isRecord(value) && isDeserializable(value);
-}
-function isSaveHistoryMoment(value) {
-	return isRecord(value) && typeof value.passage === "string" && isSerializedVariables(value.variables) && typeof value.timestamp === "number" && isOptionalPRNGSnapshot(value.prng);
-}
-/**
-* Full check of a payload from outside the running story (an imported save):
-* every history moment is well formed, `historyIndex` is an integer that
-* points at a moment of the payload's passage, and the encoded values (Map,
-* Set, Date, RegExp, class instances) in the live variables and every
-* moment's variables have the shape deserialize() expects. Anything that
-* passes can be stored and later loaded.
-*/
-function isImportablePayload(value) {
-	if (!isRecord(value)) return false;
-	if (typeof value.passage !== "string") return false;
-	if (!isSerializedVariables(value.variables)) return false;
-	const { history, historyIndex } = value;
-	if (!Array.isArray(history) || history.length === 0) return false;
-	if (!Array.from(history).every(isSaveHistoryMoment)) return false;
-	if (typeof historyIndex !== "number" || !Number.isInteger(historyIndex) || historyIndex < 0 || historyIndex >= history.length) return false;
-	if (history[historyIndex].passage !== value.passage) return false;
-	if (value.visitCounts !== void 0 && !isRecord(value.visitCounts)) return false;
-	if (value.renderCounts !== void 0 && !isRecord(value.renderCounts)) return false;
-	return isOptionalPRNGSnapshot(value.prng);
-}
-function isSavePayload(value) {
-	if (typeof value !== "object" || value === null) return false;
-	const obj = value;
-	if (typeof obj.passage !== "string") return false;
-	if (typeof obj.variables !== "object" || obj.variables === null) return false;
-	if (!Array.isArray(obj.history) || obj.history.length === 0) return false;
-	if (typeof obj.historyIndex !== "number") return false;
-	return true;
-}
-/** Estimated byte size of a serialized save payload. */
-function estimatePayloadBytes(payload) {
-	return JSON.stringify(payload).length;
-}
-//#endregion
 //#region src/js-lexer.ts
 /** Transient name after `%`: an identifier, so `%3` is never a reference. */
 var TRANS_NAME_RE = /[A-Za-z_]\w*/y;
@@ -2660,6 +2328,89 @@ function getPRNGPull() {
 	return currentPull;
 }
 //#endregion
+//#region src/utils/namespace.ts
+/** The variable name no namespace can hold. */
+var RESERVED_NAME = "__proto__";
+/**
+* Why `name` (without its sigil) cannot be a variable name, or undefined if
+* it can. `label` is the name as the author wrote it (e.g. `$__proto__`).
+*/
+function variableNameError(name, label = name) {
+	return name === "__proto__" ? `"${label}" cannot be used as a variable name (${RESERVED_NAME} is reserved)` : void 0;
+}
+/** Throw a TypeError if `name` cannot be a variable name. */
+function checkVariableName(name, label = name) {
+	const error = variableNameError(name, label);
+	if (error) throw new TypeError(`spindle: ${error}`);
+}
+/** Whether `obj` holds `key` as an own property. */
+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`.
+*/
+function ownEntries(sources, keep = () => true) {
+	const record = Object.create(null);
+	for (const source of sources) {
+		if (!source) continue;
+		for (const key of Object.keys(source)) {
+			const value = source[key];
+			if (keep(value)) record[key] = value;
+		}
+	}
+	return record;
+}
+/** A namespace with no prototype holding the own entries of `sources`. */
+var createNamespace = (...sources) => ownEntries(sources);
+/** Whether `value` is an object with no prototype. */
+var isNamespace = (value) => Object.getPrototypeOf(value) === null;
+/** `ns` itself if it has no prototype, else a namespace copy of it. */
+var asNamespace = (ns) => isNamespace(ns) ? ns : createNamespace(ns);
+/** A namespace copy of `ns` with `key` set to `value`. */
+function withEntry(ns, key, value) {
+	const next = createNamespace(ns);
+	next[key] = value;
+	return next;
+}
+/** An empty namespace that cannot change. */
+var EMPTY_NAMESPACE = Object.freeze(createNamespace());
+/** The names whose own entries differ between `a` and `b`, `a`'s first. */
+function changedNames(a, b) {
+	return [...new Set([...Object.keys(a), ...Object.keys(b)])].filter((name) => ownValue(a, name) !== ownValue(b, name));
+}
+var isCount = (value) => typeof value === "number" && Number.isInteger(value) && value >= 0;
+/** The count of `name` in `counts`: its own entry, or 0. */
+function countOf(counts, name) {
+	const value = ownValue(counts, name);
+	return isCount(value) ? value : 0;
+}
+/**
+* Counters with no prototype holding the own entries of `source` that are
+* counts, with `name` (if given) counted once more. Immer copies the
+* counters on every write anyway, so counting into a fresh copy costs no
+* more than counting in place.
+*/
+function createCounts(source, name) {
+	const counts = ownEntries([source], isCount);
+	if (name !== void 0) counts[name] = countOf(source, name) + 1;
+	return counts;
+}
+//#endregion
 //#region src/expression.ts
 var FN_CACHE_MAX = 500;
 var fnCache = /* @__PURE__ */ new Map();
@@ -2793,7 +2544,7 @@ function namespaceArg(ns) {
 	return ns;
 }
 /** Run compiled code in `namespaces`. */
-function run(fn, ...[variables, temporary, locals = EMPTY_NAMESPACE, transient = EMPTY_NAMESPACE]) {
+function run$1(fn, ...[variables, temporary, locals = EMPTY_NAMESPACE, transient = EMPTY_NAMESPACE]) {
 	return fn(namespaceArg(variables), namespaceArg(temporary), namespaceArg(locals), buildExpressionFns(), namespaceArg(transient));
 }
 /**
@@ -2802,7 +2553,7 @@ function run(fn, ...[variables, temporary, locals = EMPTY_NAMESPACE, transient =
 */
 function evaluate(expr, ...namespaces) {
 	const body = `return (${transform(expr)}\n);`;
-	return run(getOrCompile(body, body), ...namespaces);
+	return run$1(getOrCompile(body, body), ...namespaces);
 }
 /**
 * Execute statements (no return value).
@@ -2810,16 +2561,16 @@ function evaluate(expr, ...namespaces) {
 */
 function execute(code, ...namespaces) {
 	const transformed = transform(code, "statements");
-	run(getOrCompile("exec:" + transformed, transformed), ...namespaces);
+	run$1(getOrCompile("exec:" + transformed, transformed), ...namespaces);
 }
 //#endregion
 //#region src/registry.ts
-var registry = new NameMap();
+var registry$1 = new NameMap();
 function registerMacro(name, component) {
-	registry.set(name, component);
+	registry$1.set(name, component);
 }
 function getMacro(name) {
-	return registry.get(name);
+	return registry$1.get(name);
 }
 var textRegistry = new NameMap();
 /** Register (or, with undefined, remove) the text form of a macro. */
@@ -3712,9 +3463,14 @@ function MacroError({ macro, error }) {
 		children: `{${macro} error${currentSourceLocation()}: ${errorMessage(error)}}`
 	});
 }
-/** Log an error in the macro `{label}` (its name, or name and arguments). */
-function logMacroError(label, error) {
-	console.error(`spindle: Error in {${label}}${currentSourceLocation()}:`, error);
+/**
+* Log an error in the macro `{label}` (its name, or name and arguments) at
+* `location`, the source location of the macro's passage. Take it before
+* running the code that failed (see currentSourceLocation): code that
+* navigates changes the current passage.
+*/
+function logMacroError(label, error, location = currentSourceLocation()) {
+	console.error(`spindle: Error in {${label}}${location}:`, error);
 }
 /**
 * Run `effect` once, during the macro's first render. If it throws, the
@@ -3725,11 +3481,12 @@ function useRunOnce(macro, rawArgs, effect) {
 	const failure = useRef();
 	if (failure.current === void 0) {
 		failure.current = null;
+		const location = currentSourceLocation();
 		try {
 			effect();
 		} catch (error) {
 			failure.current = { error };
-			logMacroError(`${macro} ${rawArgs}`, error);
+			logMacroError(`${macro} ${rawArgs}`, error, location);
 		}
 	}
 	if (!failure.current) return null;
@@ -3767,6 +3524,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);
@@ -3811,20 +3569,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
@@ -3846,16 +3626,29 @@ function placeholderIndex(node, ph) {
 	return parseInt(value.slice(prefix.length), 10);
 }
 /**
-* 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
+* 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) {
@@ -3869,25 +3662,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, {
@@ -4002,9 +3806,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;
@@ -4042,6 +3844,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
@@ -4051,9 +3870,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;
@@ -4118,16 +3935,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);
@@ -4240,88 +4049,1183 @@ var PLACEHOLDER_STRIP_RE = /<span data-tw=[0-9a-z]+:\d+><\/span>/g;
 /** Whitespace that markdown strips at the start and end of a paragraph. */
 var EDGE_WS = " 	\r\n";
 /**
-* Index of the first character from `from` on (`step` 1) or before `from`
-* (`step` -1) that is not in `chars`, or where the run of them ends. A loop,
-* not a regex: `/[ \t]*$/` and the like try each position of a whitespace
-* run, taking quadratic time on a long run in the middle of a passage.
+* Index of the first character from `from` on (`step` 1) or before `from`
+* (`step` -1) that is not in `chars`, or where the run of them ends. A loop,
+* not a regex: `/[ \t]*$/` and the like try each position of a whitespace
+* run, taking quadratic time on a long run in the middle of a passage.
+*/
+function skipChars(s, from, step, chars) {
+	let i = from;
+	if (step === 1) while (i < s.length && chars.includes(s[i])) i++;
+	else while (i > 0 && chars.includes(s[i - 1])) i--;
+	return i;
+}
+/**
+* Drop the spaces and tabs around line endings, as markdown does within a
+* paragraph.
+*/
+function trimLineEdges(text) {
+	if (!text.includes("\n")) return text;
+	return text.split("\n").map((line, k, lines) => {
+		const start = k === 0 ? 0 : skipChars(line, 0, 1, " 	");
+		const end = k === lines.length - 1 ? line.length : skipChars(line, line.length, -1, " 	");
+		return line.slice(start, Math.max(start, end));
+	}).join("\n");
+}
+/**
+* Build Preact vnodes from a combined string that contains only plain text
+* and placeholders. No micromark, no innerHTML. The text is the content of
+* one paragraph, so like micromark it drops spaces and tabs around line
+* endings; its edges are already split off by the caller.
+*/
+function buildPlainTextVnodes(core, ph, unwrapParagraphs) {
+	const children = expandPlaceholderText(trimLineEdges(core), ph).filter((part) => part !== "");
+	return unwrapParagraphs ? /* @__PURE__ */ jsx(Fragment$1, { children }) : h("p", null, ...children);
+}
+/**
+* Render AST nodes with full CommonMark markdown support.
+*
+* Combines all nodes into a single markdown document, using placeholder
+* elements (see Placeholders) for non-text nodes (variables, macros, links,
+* HTML). This allows
+* markdown syntax to span across Twine tokens — e.g., markdown tables can
+* contain {$variables} and {macros} in their cells.
+*
+* After micromark processes the combined string, the HTML is parsed back into
+* Preact VNodes with placeholders replaced by the real rendered components.
+* Placeholders that micromark escaped as code text are swapped back too (see
+* PLACEHOLDER_TEXT_RE), so variables in code stay live components.
+*/
+function renderNodes(nodes, options) {
+	if (nodes.length === 0) return null;
+	if (options?.raw) return renderInlineNodes(nodes);
+	if (!nodes.some((n) => n.type === "text" && (n.value.trim() !== "" || BLANK_LINE_RE.test(n.value)))) return nodes.map((node) => renderSingleNode(node));
+	const components = [];
+	const ph = {
+		nonce: Math.random().toString(36).slice(2, 10) || "0",
+		components,
+		nodes: []
+	};
+	let combined = "";
+	for (let i = 0; i < nodes.length; i++) {
+		const node = nodes[i];
+		if (node.type === "text") {
+			combined += node.value;
+			continue;
+		}
+		const phIdx = components.length;
+		components.push(renderSingleNode(node));
+		ph.nodes.push(node);
+		if (combined.endsWith("\\")) combined += ESCAPE_GUARD;
+		combined += placeholderHtml(ph.nonce, phIdx);
+	}
+	const unwrapParagraphs = !!(options?.nobr || options?.inline);
+	const lead = combined.slice(0, skipChars(combined, 0, 1, EDGE_WS));
+	const trail = lead.length === combined.length ? "" : combined.slice(skipChars(combined, combined.length, -1, EDGE_WS));
+	const core = combined.slice(lead.length, combined.length - trail.length);
+	const edges = (content) => unwrapParagraphs && (lead || trail) ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		lead,
+		content,
+		trail
+	] }) : content;
+	const textOnly = combined.replace(PLACEHOLDER_STRIP_RE, "");
+	if (!MARKDOWN_SYNTAX_RE.test(textOnly) && !BLANK_LINE_RE.test(textOnly)) return edges(buildPlainTextVnodes(core, ph, unwrapParagraphs));
+	return edges(htmlToPreact(markdownToHtml(combined, { inline: options?.inline }), ph, unwrapParagraphs));
+}
+//#endregion
+//#region node_modules/devalue/src/constants.js
+var MAX_ARRAY_LEN = 2 ** 32 - 1;
+var MAX_ARRAY_INDEX = MAX_ARRAY_LEN - 1;
+//#endregion
+//#region node_modules/devalue/src/utils.js
+var DevalueError = class extends Error {
+	/**
+	* @param {string} message
+	* @param {string[]} keys
+	* @param {any} [value] - The value that failed to be serialized
+	* @param {any} [root] - The root value being serialized
+	*/
+	constructor(message, keys, value, root) {
+		super(message);
+		this.name = "DevalueError";
+		this.path = keys.join("");
+		this.value = value;
+		this.root = root;
+	}
+};
+/**
+* Marks a Map key on the path being serialized. The key itself is recorded
+* right after the marker, so nothing is formatted or allocated per entry.
+*/
+var MAP_KEY = Symbol();
+/**
+* Formats the path recorded on the way to the value being serialized — a
+* property key, an array index, or `MAP_KEY` followed by a Map key — into
+* the segments a `DevalueError` joins. Only runs when an error is raised.
+* @param {any[]} keys
+* @param {(key: any) => string} format_map_key
+* @returns {string[]}
+*/
+function format_path(keys, format_map_key) {
+	/** @type {string[]} */
+	const path = [];
+	for (let i = 0; i < keys.length; i += 1) {
+		const segment = keys[i];
+		if (segment === MAP_KEY) path.push(`.get(${format_map_key(keys[++i])})`);
+		else if (typeof segment === "number") path.push(`[${segment}]`);
+		else path.push(stringify_key(segment));
+	}
+	return path;
+}
+var object_proto_names = /* @__PURE__ */ Object.getOwnPropertyNames(Object.prototype).sort().join("\0");
+/** @param {any} thing */
+function is_plain_object(thing) {
+	const proto = Object.getPrototypeOf(thing);
+	return proto === Object.prototype || proto === null || Object.getPrototypeOf(proto) === null || Object.getOwnPropertyNames(proto).sort().join("\0") === object_proto_names;
+}
+/** @param {any} thing */
+function get_type(thing) {
+	return Object.prototype.toString.call(thing).slice(8, -1);
+}
+/** @param {any} thing */
+function is_buffer(thing) {
+	return typeof Buffer !== "undefined" && Buffer.isBuffer(thing);
+}
+/** @param {string} char */
+function get_escaped_char(char) {
+	switch (char) {
+		case "\"": return "\\\"";
+		case "<": return "\\u003C";
+		case "\\": return "\\\\";
+		case "\n": return "\\n";
+		case "\r": return "\\r";
+		case "	": return "\\t";
+		case "\b": return "\\b";
+		case "\f": return "\\f";
+		case "\u2028": return "\\u2028";
+		case "\u2029": return "\\u2029";
+		default: return char < " " ? `\\u${char.charCodeAt(0).toString(16).padStart(4, "0")}` : "";
+	}
+}
+var needs_escape = /["<\\\u0000-\u001f\u2028\u2029]/;
+/** @param {string} str */
+function stringify_string(str) {
+	if (!needs_escape.test(str) && str.isWellFormed()) return `"${str}"`;
+	let result = "";
+	let last_pos = 0;
+	const len = str.length;
+	for (let i = 0; i < len; i += 1) {
+		const code = str.charCodeAt(i);
+		if (code >= 55296 && code <= 57343) {
+			if (code <= 56319 && i + 1 < len && (str.charCodeAt(i + 1) & 64512) === 56320) {
+				i += 1;
+				continue;
+			}
+			result += str.slice(last_pos, i) + `\\u${code.toString(16)}`;
+			last_pos = i + 1;
+			continue;
+		}
+		const replacement = get_escaped_char(str[i]);
+		if (replacement) {
+			result += str.slice(last_pos, i) + replacement;
+			last_pos = i + 1;
+		}
+	}
+	return `"${last_pos === 0 ? str : result + str.slice(last_pos)}"`;
+}
+var MAX_CACHED_KEY_LENGTH = 64;
+/** @type {Map<string, string>} */
+var quoted_keys = /* @__PURE__ */ new Map();
+/** @param {string} key */
+function quote_key(key) {
+	if (key.length > MAX_CACHED_KEY_LENGTH) return stringify_string(key);
+	let quoted = quoted_keys.get(key);
+	if (quoted === void 0) {
+		if (quoted_keys.size >= 1024) quoted_keys.clear();
+		quoted = stringify_string(key);
+		quoted_keys.set(key, quoted);
+	}
+	return quoted;
+}
+/** @param {Record<string | symbol, any>} object */
+function enumerable_symbols(object) {
+	const symbols = Object.getOwnPropertySymbols(object);
+	return symbols.length === 0 ? symbols : symbols.filter((symbol) => Object.getOwnPropertyDescriptor(object, symbol)?.enumerable);
+}
+var is_identifier = /^[a-zA-Z_$][a-zA-Z_$0-9]*$/;
+/** @param {string} key */
+function stringify_key(key) {
+	return is_identifier.test(key) ? "." + key : "[" + JSON.stringify(key) + "]";
+}
+/** @param {number} n */
+function is_valid_array_index(n) {
+	if (!Number.isInteger(n)) return false;
+	if (n < 0) return false;
+	if (n > MAX_ARRAY_INDEX) return false;
+	return true;
+}
+/** @param {number} n */
+function is_valid_array_len(n) {
+	if (!Number.isInteger(n)) return false;
+	if (n < 0) return false;
+	if (n > MAX_ARRAY_LEN) return false;
+	return true;
+}
+/** @param {string} s */
+function is_valid_array_index_string(s) {
+	if (s.length === 0) return false;
+	if (s.length > 1 && s.charCodeAt(0) === 48) return false;
+	for (let i = 0; i < s.length; i++) {
+		const c = s.charCodeAt(i);
+		if (c < 48 || c > 57) return false;
+	}
+	return is_valid_array_index(+s);
+}
+/**
+* Returns the length of the leading run of valid array indices in `keys`.
+* @param {readonly string[]} keys
+*/
+function array_index_cut(keys) {
+	for (var i = keys.length - 1; i >= 0; i--) if (is_valid_array_index_string(keys[i])) break;
+	return i + 1;
+}
+/**
+* Finds the populated indices of an array.
+* @param {unknown[]} array
+*/
+function valid_array_indices(array) {
+	const keys = Object.keys(array);
+	keys.length = array_index_cut(keys);
+	return keys;
+}
+//#endregion
+//#region node_modules/devalue/src/base64.js
+/**	@type {(array_buffer: ArrayBuffer) => string} */
+function encode_native(array_buffer) {
+	return new Uint8Array(array_buffer).toBase64();
+}
+/**	@type {(base64: string) => ArrayBuffer} */
+function decode_native(base64) {
+	return Uint8Array.fromBase64(base64).buffer;
+}
+/** @type {(array_buffer: ArrayBuffer) => string} */
+function encode_buffer(array_buffer) {
+	return Buffer.from(array_buffer).toString("base64");
+}
+/**	@type {(base64: string) => ArrayBuffer} */
+function decode_buffer(base64) {
+	return Uint8Array.from(Buffer.from(base64, "base64")).buffer;
+}
+/** @type {(array_buffer: ArrayBuffer) => string} */
+function encode_legacy(array_buffer) {
+	const array = new Uint8Array(array_buffer);
+	let binary = "";
+	const chunk_size = 32768;
+	for (let i = 0; i < array.length; i += chunk_size) {
+		const chunk = array.subarray(i, i + chunk_size);
+		binary += String.fromCharCode.apply(null, chunk);
+	}
+	return btoa(binary);
+}
+/**	@type {(base64: string) => ArrayBuffer} */
+function decode_legacy(base64) {
+	const binary_string = atob(base64);
+	const len = binary_string.length;
+	const array = new Uint8Array(len);
+	for (let i = 0; i < len; i++) array[i] = binary_string.charCodeAt(i);
+	return array.buffer;
+}
+var native = typeof Uint8Array.fromBase64 === "function";
+var buffer = typeof process === "object" && process.versions?.node !== void 0;
+var encode64 = native ? encode_native : buffer ? encode_buffer : encode_legacy;
+var decode64 = native ? decode_native : buffer ? decode_buffer : decode_legacy;
+//#endregion
+//#region node_modules/devalue/src/operations.js
+/**
+* Merges caller-provided operation overrides over the defaults. Iterating the
+* default keys (rather than the override's own keys) means nullish members
+* fall back to the default, and inherited members — e.g. from a class
+* instance — are picked up.
+*
+* @template {Record<string, any>} T
+* @param {T} defaults
+* @param {Partial<T> | undefined} overrides
+* @returns {T}
+*/
+function merge_operations(defaults, overrides) {
+	if (!overrides) return defaults;
+	const merged = {};
+	for (const key of Object.keys(defaults)) merged[key] = overrides[key] ?? defaults[key];
+	return merged;
+}
+/** @type {{ kind: 'not-plain' }} */
+var NOT_PLAIN = /* @__PURE__ */ Object.freeze({ kind: "not-plain" });
+/** @type {{ kind: 'symbol-keys' }} */
+var SYMBOL_KEYS = /* @__PURE__ */ Object.freeze({ kind: "symbol-keys" });
+var default_stringify_operations = /* @__PURE__ */ Object.freeze({
+	identify: (value) => value,
+	typeOf: (value) => value === null ? "null" : typeof value,
+	toPrimitive: (value) => value,
+	tagOf: (value) => get_type(value),
+	isThenable: (value) => typeof value.then === "function",
+	toPromise: (thenable) => Promise.resolve(thenable),
+	unbox: (boxed) => boxed.valueOf(),
+	toISOString: (date) => isNaN(date.getDate()) ? "" : date.toISOString(),
+	toStringValue: (value) => value.toString(),
+	regExpInfo: (regexp) => ({
+		source: regexp.source,
+		flags: regexp.flags
+	}),
+	valuesOf: (set) => set,
+	entriesOf: (map) => map,
+	viewInfo: (view) => {
+		if (is_buffer(view)) view = new Uint8Array(view);
+		return {
+			buffer: view.buffer,
+			byteOffset: view.byteOffset,
+			byteLength: view.byteLength,
+			length: view.length,
+			bufferByteLength: view.buffer.byteLength
+		};
+	},
+	toArrayBuffer: (buffer) => buffer,
+	lengthOf: (array) => array.length,
+	hasOwn: (value, key) => Object.hasOwn(value, key),
+	indicesOf: (array) => valid_array_indices(array),
+	shapeOf: (value) => {
+		if (!is_plain_object(value)) return NOT_PLAIN;
+		if (enumerable_symbols(value).length > 0) return SYMBOL_KEYS;
+		return {
+			kind: Object.getPrototypeOf(value) === null ? "null-proto" : "plain",
+			keys: Object.keys(value)
+		};
+	},
+	get: (value, key) => value[key]
+});
+var array_buffer_byte_length = Object.getOwnPropertyDescriptor(ArrayBuffer.prototype, "byteLength")?.get;
+var shared_array_buffer_byte_length = typeof SharedArrayBuffer === "undefined" ? void 0 : Object.getOwnPropertyDescriptor(SharedArrayBuffer.prototype, "byteLength")?.get;
+var default_parse_operations = /* @__PURE__ */ Object.freeze({
+	fromPrimitive: (primitive) => primitive,
+	fromISOString: (iso) => new Date(iso),
+	fromStringValue: (tag, text) => {
+		if (tag === "URL") return new URL(text);
+		if (tag === "URLSearchParams") return new URLSearchParams(text);
+		return Temporal[tag.slice(9)].from(text);
+	},
+	fromArrayBuffer: (buffer) => buffer,
+	fromRegExpInfo: (source, flags) => new RegExp(source, flags),
+	fromViewInfo: (tag, buffer, byteOffset, length) => {
+		try {
+			array_buffer_byte_length.call(buffer);
+		} catch (error) {
+			if (!shared_array_buffer_byte_length) throw error;
+			shared_array_buffer_byte_length.call(buffer);
+		}
+		const Constructor = globalThis[tag];
+		return byteOffset !== void 0 ? new Constructor(buffer, byteOffset, length) : new Constructor(buffer);
+	},
+	box: (value) => Object(value),
+	createArray: (length) => new Array(length),
+	createSparseArray: (length) => {
+		/** @type {any[]} */
+		const array = [];
+		array[MAX_ARRAY_INDEX] = void 0;
+		delete array[MAX_ARRAY_INDEX];
+		array.length = length;
+		return array;
+	},
+	createObject: () => ({}),
+	createNullPrototypeObject: () => Object.create(null),
+	createSet: () => /* @__PURE__ */ new Set(),
+	createMap: () => /* @__PURE__ */ new Map(),
+	set: (target, key, value) => {
+		target[key] = value;
+	},
+	addValue: (set, value) => {
+		set.add(value);
+	},
+	addEntry: (map, key, value) => {
+		map.set(key, value);
+	}
+});
+//#endregion
+//#region node_modules/devalue/src/parse.js
+function invalid$1() {
+	throw new Error("Invalid input");
+}
+/**
+* Revive a value serialized with `devalue.stringify`
+* @param {string} serialized
+* @param {Record<string, (value: any) => any>} [revivers]
+* @param {import('./types.js').ParseOptions} [options]
+*/
+function parse(serialized, revivers, options) {
+	return unflatten(JSON.parse(serialized), revivers, options);
+}
+/**
+* Revive a value flattened with `devalue.stringify`
+* @param {number | any[]} parsed
+* @param {Record<string, (value: any) => any>} [revivers]
+* @param {import('./types.js').ParseOptions} [options]
+*/
+function unflatten(parsed, revivers, options) {
+	/** @type {import('./types.js').ParseOperations} */
+	const ops = merge_operations(default_parse_operations, options?.operations);
+	if (typeof parsed === "number") return hydrate(parsed, true);
+	if (!Array.isArray(parsed) || parsed.length === 0) invalid$1();
+	const values = parsed;
+	const hydrated = Array(values.length);
+	/**
+	* A set of values currently being hydrated with custom revivers,
+	* used to detect invalid cyclical dependencies
+	* @type {Set<number> | null}
+	*/
+	let hydrating = null;
+	/**
+	* @param {number} index
+	* @returns {any}
+	*/
+	function get_raw(index) {
+		if (!is_valid_array_index(index) || index >= values.length) invalid$1();
+		return values[index];
+	}
+	/**
+	* @param {number} index
+	* @returns {any}
+	*/
+	function hydrate(index, standalone = false) {
+		if (index === -1) return ops.fromPrimitive(void 0);
+		if (index === -3) return ops.fromPrimitive(NaN);
+		if (index === -4) return ops.fromPrimitive(Infinity);
+		if (index === -5) return ops.fromPrimitive(-Infinity);
+		if (index === -6) return ops.fromPrimitive(-0);
+		if (standalone || typeof index !== "number") invalid$1();
+		if (index in hydrated) return hydrated[index];
+		if (index >= values.length) invalid$1();
+		const value = values[index];
+		if (!value || typeof value !== "object") hydrated[index] = ops.fromPrimitive(value);
+		else if (Array.isArray(value)) if (typeof value[0] === "string") {
+			const type = value[0];
+			const reviver = revivers && Object.hasOwn(revivers, type) ? revivers[type] : void 0;
+			if (reviver) {
+				let i = value[1];
+				if (typeof i !== "number") i = values.push(value[1]) - 1;
+				if (Object.hasOwn(hydrated, i)) return hydrated[index] = reviver(hydrated[i]);
+				hydrating ??= /* @__PURE__ */ new Set();
+				if (hydrating.has(i)) throw new Error("Invalid circular reference");
+				hydrating.add(i);
+				hydrated[index] = reviver(hydrate(i));
+				hydrating.delete(i);
+				return hydrated[index];
+			}
+			switch (type) {
+				case "Date":
+					hydrated[index] = ops.fromISOString(value[1]);
+					break;
+				case "Set":
+					const set = ops.createSet();
+					hydrated[index] = set;
+					for (let i = 1; i < value.length; i += 1) ops.addValue(set, hydrate(value[i]));
+					break;
+				case "Map":
+					const map = ops.createMap();
+					hydrated[index] = map;
+					for (let i = 1; i < value.length; i += 2) ops.addEntry(map, hydrate(value[i]), hydrate(value[i + 1]));
+					break;
+				case "RegExp":
+					hydrated[index] = ops.fromRegExpInfo(value[1], value[2]);
+					break;
+				case "Object": {
+					const wrapped_index = value[1];
+					if (!(wrapped_index === -3 || wrapped_index === -4 || wrapped_index === -5 || wrapped_index === -6)) {
+						const wrapped = get_raw(wrapped_index);
+						const is_bigint = Array.isArray(wrapped) && wrapped[0] === "BigInt";
+						if ((wrapped === void 0 || typeof wrapped === "object") && !is_bigint) invalid$1();
+					}
+					hydrated[index] = ops.box(hydrate(wrapped_index));
+					break;
+				}
+				case "BigInt":
+					hydrated[index] = ops.fromPrimitive(BigInt(value[1]));
+					break;
+				case "null":
+					const obj = ops.createNullPrototypeObject();
+					hydrated[index] = obj;
+					for (let i = 1; i < value.length; i += 2) {
+						const key = value[i];
+						if (typeof key !== "string") throw new Error("Cannot parse an object with a non-string key");
+						if (key === "__proto__") throw new Error("Cannot parse an object with a `__proto__` property");
+						ops.set(obj, key, hydrate(value[i + 1]));
+					}
+					break;
+				case "Int8Array":
+				case "Uint8Array":
+				case "Uint8ClampedArray":
+				case "Int16Array":
+				case "Uint16Array":
+				case "Float16Array":
+				case "Int32Array":
+				case "Uint32Array":
+				case "Float32Array":
+				case "Float64Array":
+				case "BigInt64Array":
+				case "BigUint64Array":
+				case "DataView": {
+					const buffer_index = value[1];
+					const raw = get_raw(buffer_index);
+					if (!Array.isArray(raw) || raw[0] !== "ArrayBuffer") invalid$1();
+					const buffer = hydrate(buffer_index);
+					hydrated[index] = ops.fromViewInfo(type, buffer, value[2], value[3]);
+					break;
+				}
+				case "ArrayBuffer": {
+					const base64 = value[1];
+					if (typeof base64 !== "string") throw new Error("Invalid ArrayBuffer encoding");
+					hydrated[index] = ops.fromArrayBuffer(decode64(base64));
+					break;
+				}
+				case "URL":
+				case "URLSearchParams":
+				case "Temporal.Duration":
+				case "Temporal.Instant":
+				case "Temporal.PlainDate":
+				case "Temporal.PlainTime":
+				case "Temporal.PlainDateTime":
+				case "Temporal.PlainMonthDay":
+				case "Temporal.PlainYearMonth":
+				case "Temporal.ZonedDateTime":
+					hydrated[index] = ops.fromStringValue(type, value[1]);
+					break;
+				default: throw new Error(`Unknown type ${type}`);
+			}
+		} else if (value[0] === -7) {
+			const len = value[1];
+			if (!is_valid_array_len(len)) invalid$1();
+			const array = ops.createSparseArray(len);
+			hydrated[index] = array;
+			for (let i = 2; i < value.length; i += 2) {
+				const idx = value[i];
+				if (!is_valid_array_index(idx) || idx >= len) invalid$1();
+				ops.set(array, idx, hydrate(value[i + 1]));
+			}
+		} else {
+			const array = ops.createArray(value.length);
+			hydrated[index] = array;
+			for (let i = 0; i < value.length; i += 1) {
+				const n = value[i];
+				if (n === -2) continue;
+				ops.set(array, i, hydrate(n));
+			}
+		}
+		else {
+			const object = ops.createObject();
+			hydrated[index] = object;
+			for (const key of Object.keys(value)) {
+				if (key === "__proto__") throw new Error("Cannot parse an object with a `__proto__` property");
+				ops.set(object, key, hydrate(value[key]));
+			}
+		}
+		return hydrated[index];
+	}
+	return hydrate(0);
+}
+//#endregion
+//#region node_modules/devalue/src/stringify.js
+/**
+* Turn a value into a JSON string that can be parsed with `devalue.parse`
+* @param {any} value
+* @param {Record<string, (value: any) => any>} [reducers]
+* @param {import('./types.js').StringifyOptions} [options]
+*/
+function stringify(value, reducers, options) {
+	const stringified = run(false, value, reducers, options);
+	return typeof stringified === "string" ? stringified : `[${stringified.join(",")}]`;
+}
+/**
+* @param {boolean} async
+* @param {any} value
+* @param {Record<string, (value: any) => any>} [reducers]
+* @param {import('./types.js').StringifyOptions} [options]
+*/
+function run(async, value, reducers, options) {
+	const ops = merge_operations(default_stringify_operations, options?.operations);
+	/** @type {any[]} */
+	const stringified = [];
+	/** @type {Map<any, number>} */
+	const indexes = /* @__PURE__ */ new Map();
+	/** @type {Array<{ key: string, fn: (value: any) => any }>} */
+	const custom = [];
+	if (reducers) for (const key of Object.getOwnPropertyNames(reducers)) custom.push({
+		key,
+		fn: reducers[key]
+	});
+	/** @type {any[]} */
+	let keys = [];
+	let p = 0;
+	/**
+	* @param {string} message
+	* @param {any} thing
+	* @returns {never}
+	*/
+	function error(message, thing) {
+		throw new DevalueError(message, format_path(keys, (key) => {
+			const key_type = ops.typeOf(key);
+			return key_type !== "object" && key_type !== "function" && key_type !== "symbol" ? stringify_primitive(ops.toPrimitive(key)) : "...";
+		}), thing, value);
+	}
+	/**
+	* @param {any} thing
+	* @param {number} [index]
+	*/
+	function flatten(thing, index) {
+		const type = ops.typeOf(thing);
+		if (type === "undefined") return -1;
+		/** @type {number | undefined} */
+		let number;
+		if (type === "number") {
+			number = ops.toPrimitive(thing);
+			if (Number.isNaN(number)) return -3;
+			if (number === Infinity) return -4;
+			if (number === -Infinity) return -5;
+			if (number === 0 && 1 / number < 0) return -6;
+		}
+		const id = ops.identify(thing);
+		if (indexes.has(id)) return indexes.get(id);
+		index ??= p++;
+		indexes.set(id, index);
+		for (const { key, fn } of custom) {
+			const value = fn(thing);
+			if (value) {
+				stringified[index] = `["${key}",${flatten(value)}]`;
+				return index;
+			}
+		}
+		if (type === "function") error(`Cannot stringify a function`, thing);
+		else if (type === "symbol") error(`Cannot stringify a Symbol primitive`, thing);
+		/** @type {string | Promise<any>} */
+		let str = "";
+		if (type !== "object") str = stringify_primitive(type === "number" ? number : ops.toPrimitive(thing));
+		else if (ops.isThenable(thing)) {
+			if (!async) error(`Cannot stringify a Promise or thenable — use stringifyAsync instead`, thing);
+			const prev_keys = keys.slice();
+			str = ops.toPromise(thing).then((value) => {
+				keys = prev_keys;
+				const i = flatten(value, index);
+				if (i < 0) stringified[index] = i;
+			});
+			str.catch(() => {});
+		} else {
+			const tag = ops.tagOf(thing);
+			switch (tag) {
+				case "Number":
+				case "String":
+				case "Boolean":
+				case "BigInt":
+					str = `["Object",${flatten(ops.unbox(thing))}]`;
+					break;
+				case "Date":
+					str = `["Date","${ops.toISOString(thing)}"]`;
+					break;
+				case "URL":
+					str = `["URL",${stringify_string(ops.toStringValue(thing))}]`;
+					break;
+				case "URLSearchParams":
+					str = `["URLSearchParams",${stringify_string(ops.toStringValue(thing))}]`;
+					break;
+				case "RegExp":
+					const { source, flags } = ops.regExpInfo(thing);
+					str = flags ? `["RegExp",${stringify_string(source)},"${flags}"]` : `["RegExp",${stringify_string(source)}]`;
+					break;
+				case "Array": {
+					let mostly_dense = false;
+					const length = ops.lengthOf(thing);
+					str = "[";
+					for (let i = 0; i < length; i += 1) {
+						if (i > 0) str += ",";
+						if (ops.hasOwn(thing, i)) {
+							keys.push(i);
+							str += flatten(ops.get(thing, i));
+							keys.pop();
+						} else if (mostly_dense) str += -2;
+						else {
+							const populated_keys = ops.indicesOf(thing);
+							const population = populated_keys.length;
+							const d = String(length).length;
+							if ((length - population) * 3 > 4 + d + population * (d + 1)) {
+								str = "[-7," + length;
+								for (let j = 0; j < populated_keys.length; j++) {
+									const key = populated_keys[j];
+									keys.push(+key);
+									str += "," + key + "," + flatten(ops.get(thing, key));
+									keys.pop();
+								}
+								break;
+							} else {
+								mostly_dense = true;
+								str += -2;
+							}
+						}
+					}
+					str += "]";
+					break;
+				}
+				case "Set":
+					str = "[\"Set\"";
+					for (const value of ops.valuesOf(thing)) str += `,${flatten(value)}`;
+					str += "]";
+					break;
+				case "Map":
+					str = "[\"Map\"";
+					for (const [key, value] of ops.entriesOf(thing)) {
+						keys.push(MAP_KEY, key);
+						str += `,${flatten(key)},${flatten(value)}`;
+						keys.pop();
+						keys.pop();
+					}
+					str += "]";
+					break;
+				case "Int8Array":
+				case "Uint8Array":
+				case "Uint8ClampedArray":
+				case "Int16Array":
+				case "Uint16Array":
+				case "Float16Array":
+				case "Int32Array":
+				case "Uint32Array":
+				case "Float32Array":
+				case "Float64Array":
+				case "BigInt64Array":
+				case "BigUint64Array": {
+					const info = ops.viewInfo(thing);
+					str = "[\"" + tag + "\"," + flatten(info.buffer);
+					if (info.byteLength !== info.bufferByteLength) str += `,${info.byteOffset},${info.length}`;
+					str += "]";
+					break;
+				}
+				case "DataView": {
+					const info = ops.viewInfo(thing);
+					str = "[\"" + tag + "\"," + flatten(info.buffer);
+					if (info.byteLength !== info.bufferByteLength) str += `,${info.byteOffset},${info.byteLength}`;
+					str += "]";
+					break;
+				}
+				case "ArrayBuffer":
+					str = `["ArrayBuffer","${encode64(ops.toArrayBuffer(thing))}"]`;
+					break;
+				case "Temporal.Duration":
+				case "Temporal.Instant":
+				case "Temporal.PlainDate":
+				case "Temporal.PlainTime":
+				case "Temporal.PlainDateTime":
+				case "Temporal.PlainMonthDay":
+				case "Temporal.PlainYearMonth":
+				case "Temporal.ZonedDateTime":
+					str = `["${tag}",${stringify_string(ops.toStringValue(thing))}]`;
+					break;
+				default: {
+					const shape = ops.shapeOf(thing);
+					if (shape.kind === "not-plain") error(`Cannot stringify arbitrary non-POJOs`, thing);
+					if (shape.kind === "symbol-keys") error(`Cannot stringify POJOs with symbolic keys`, thing);
+					if (shape.kind === "null-proto") {
+						str = "[\"null\"";
+						for (const key of shape.keys) {
+							if (key === "__proto__") error(`Cannot stringify objects with __proto__ keys`, thing);
+							keys.push(key);
+							str += `,${quote_key(key)},${flatten(ops.get(thing, key))}`;
+							keys.pop();
+						}
+						str += "]";
+					} else {
+						str = "{";
+						let started = false;
+						for (const key of shape.keys) {
+							if (key === "__proto__") error(`Cannot stringify objects with __proto__ keys`, thing);
+							if (started) str += ",";
+							started = true;
+							keys.push(key);
+							str += `${quote_key(key)}:${flatten(ops.get(thing, key))}`;
+							keys.pop();
+						}
+						str += "}";
+					}
+				}
+			}
+		}
+		stringified[index] = str;
+		return index;
+	}
+	const index = flatten(value);
+	if (index < 0) return `${index}`;
+	return stringified;
+}
+/**
+* @param {any} thing
+* @returns {string}
+*/
+function stringify_primitive(thing) {
+	const type = typeof thing;
+	if (type === "string") return stringify_string(thing);
+	if (thing === void 0) return (-1).toString();
+	if (thing === 0 && 1 / thing < 0) return (-6).toString();
+	if (type === "bigint") return `["BigInt","${thing}"]`;
+	return String(thing);
+}
+//#endregion
+//#region src/class-registry.ts
+var registry = /* @__PURE__ */ new Map();
+var ctorToName = /* @__PURE__ */ new Map();
+function registerClass(name, ctor) {
+	registry.set(name, ctor);
+	ctorToName.set(ctor, name);
+}
+/**
+* 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_PREFIX = "c:";
+var ERROR_PREFIX = "E:";
+var SYMBOL_TAG = "S";
+var KEYS_TAG = "K";
+var BUILTIN_ERRORS = new Map([
+	Error,
+	EvalError,
+	RangeError,
+	ReferenceError,
+	SyntaxError,
+	TypeError,
+	URIError,
+	globalThis.AggregateError
+].map((ctor) => [ctor.prototype, ctor.name]));
+var ERROR_CTORS = new Map([...BUILTIN_ERRORS].map(([proto, name]) => [name, proto.constructor]));
+/** Error keys that are own but not enumerable on a live error. */
+var ERROR_HIDDEN_KEYS$1 = [
+	"message",
+	"cause",
+	"errors"
+];
+var isObject = (v) => typeof v === "object" && v !== null;
+var defineData = (target, key, value) => {
+	Object.defineProperty(target, key, {
+		value,
+		enumerable: true,
+		writable: true,
+		configurable: true
+	});
+};
+/**
+* Own enumerable keys of `value`, as a plain object; for an error also its
+* message, cause and (AggregateError) errors, which are not enumerable.
+*/
+function ownData(value) {
+	const data = {};
+	if (value instanceof Error) {
+		for (const key of ERROR_HIDDEN_KEYS$1) if (hasOwn(value, key)) defineData(data, key, value[key]);
+	}
+	for (const key of Object.keys(value)) defineData(data, key, value[key]);
+	return data;
+}
+/** Make an error's message, cause and errors non-enumerable again. */
+function hideErrorKeys(value) {
+	for (const key of ERROR_HIDDEN_KEYS$1) if (hasOwn(value, key)) Object.defineProperty(value, key, { enumerable: false });
+}
+/** Whether JSON.stringify writes `key` as a one-character escape sequence. */
+var isEscapedOneCharKey = (key) => key.length === 1 && JSON.stringify(key).length > 3;
+function reducers() {
+	const out = {};
+	for (const [name, ctor] of registry) out[CLASS_PREFIX + name] = (v) => isObject(v) && Object.getPrototypeOf(v) === ctor.prototype && ownData(v);
+	for (const [proto, name] of BUILTIN_ERRORS) out[ERROR_PREFIX + name] = (v) => isObject(v) && Object.getPrototypeOf(v) === proto && ownData(v);
+	out[SYMBOL_TAG] = (v) => {
+		if (typeof v !== "symbol") return false;
+		const key = Symbol.keyFor(v);
+		return key !== void 0 && [key];
+	};
+	out[KEYS_TAG] = (v) => {
+		if (!isObject(v) || Object.getPrototypeOf(v) !== Object.prototype) return false;
+		const keys = Object.keys(v);
+		if (!keys.some(isEscapedOneCharKey)) return false;
+		if (keys.includes("__proto__")) throw new TypeError("spindle: Cannot save a property named \"__proto__\"");
+		return keys.flatMap((k) => [k, v[k]]);
+	};
+	return out;
+}
+/** Restore a registered class instance in place, so cycles through it hold. */
+function reviveClass(name) {
+	return (data) => {
+		if (!isObject(data) || Object.getPrototypeOf(data) !== Object.prototype) {
+			if (isObject(data) && registeredClassName(data) === name) return data;
+			throw new TypeError(`spindle: Malformed data for class "${name}"`);
+		}
+		const ctor = registry.get(name);
+		if (!ctor) throw new TypeError(`spindle: The save holds an instance of class "${name}", which is not registered`);
+		Object.setPrototypeOf(data, ctor.prototype);
+		if (data instanceof Error) hideErrorKeys(data);
+		return data;
+	};
+}
+/** Restore a built-in error in place, like a class instance. */
+function reviveError(name) {
+	const ctor = ERROR_CTORS.get(name);
+	if (!ctor) return void 0;
+	return (data) => {
+		if (Object.getPrototypeOf(data) === ctor.prototype) return data;
+		if (!isObject(data) || Object.getPrototypeOf(data) !== Object.prototype) throw new TypeError(`spindle: Malformed data for "${name}"`);
+		Object.setPrototypeOf(data, ctor.prototype);
+		hideErrorKeys(data);
+		return data;
+	};
+}
+/**
+* The object of a `K` entry list. A cycle through the object revives it
+* before its list is complete (devalue holds unread entries as holes), so
+* the object is kept per list and filled with what the list holds so far.
+*/
+var keyedObjects = /* @__PURE__ */ new WeakMap();
+function reviveKeyed(entries) {
+	if (!Array.isArray(entries) || entries.length % 2 !== 0) throw new TypeError("spindle: Malformed object entries");
+	let obj = keyedObjects.get(entries);
+	if (!obj) keyedObjects.set(entries, obj = {});
+	for (let i = 0; i < entries.length; i += 2) {
+		if (!hasOwn(entries, i)) break;
+		const key = entries[i];
+		if (typeof key !== "string" || key === "__proto__") throw new TypeError("spindle: Malformed object entries");
+		defineData(obj, key, hasOwn(entries, i + 1) ? entries[i + 1] : void 0);
+	}
+	return obj;
+}
+/** Revivers for every tag a save may hold. */
+var revivers = new Proxy({}, {
+	getOwnPropertyDescriptor(_, key) {
+		const fn = reviverFor(key);
+		return fn && {
+			value: fn,
+			enumerable: true,
+			configurable: true
+		};
+	},
+	get: (_, key) => reviverFor(key)
+});
+function reviverFor(key) {
+	if (typeof key !== "string") return void 0;
+	if (key === SYMBOL_TAG) return (data) => {
+		if (!Array.isArray(data) || typeof data[0] !== "string") throw new TypeError("spindle: Malformed symbol");
+		return Symbol.for(data[0]);
+	};
+	if (key === KEYS_TAG) return reviveKeyed;
+	if (key.startsWith(CLASS_PREFIX)) return reviveClass(key.slice(2));
+	if (key.startsWith(ERROR_PREFIX)) return reviveError(key.slice(2));
+}
+/** A clearer message for devalue's refusals, with the path to the value. */
+function saveError(err, value) {
+	if (!(err instanceof Error) || err.name !== "DevalueError") return err instanceof Error ? err : new Error(String(err));
+	const { path, value: what } = err;
+	const at = path ? ` (at ${path})` : "";
+	let reason = err.message;
+	if (typeof what === "function") reason = "Cannot save a function";
+	else if (isObject(what) && /non-POJO/.test(err.message)) reason = `Cannot save an instance of class "${Object.getPrototypeOf(what)?.constructor?.name ?? "?"}", which is not registered (see Story.registerClass)`;
+	else if (typeof what === "symbol") reason = "Cannot save a unique symbol (only Symbol.for() symbols)";
+	else if (/symbolic keys/.test(err.message)) reason = "Cannot save an object with symbol keys";
+	else if (/__proto__/.test(err.message)) reason = "Cannot save a property named \"__proto__\"";
+	return /* @__PURE__ */ new TypeError(`spindle: ${reason}${at}`);
+}
+/**
+* Turn a story value into JSON text that deserialize() restores (saves,
+* exports, the session). Throws, naming the path to the value, on what a
+* save cannot hold: functions, unique symbols, symbol keys, instances of
+* unregistered classes, and a property named "__proto__".
+*/
+function serialize(value) {
+	try {
+		return stringify(value, reducers());
+	} catch (err) {
+		throw saveError(err, value);
+	}
+}
+/**
+* Restore a value serialize() wrote. Throws on malformed text, and on an
+* instance of a class that is not registered.
 */
-function skipChars(s, from, step, chars) {
-	let i = from;
-	if (step === 1) while (i < s.length && chars.includes(s[i])) i++;
-	else while (i > 0 && chars.includes(s[i - 1])) i--;
-	return i;
+function deserialize(text) {
+	return parse(text, revivers);
 }
+/** A save, export or session from a version of Spindle this one cannot read. */
+var IncompatibleSaveError = class extends Error {
+	constructor() {
+		super("This save was made by an incompatible version of Spindle");
+		this.name = "IncompatibleSaveError";
+	}
+};
 /**
-* Drop the spaces and tabs around line endings, as markdown does within a
-* paragraph.
+* Migrations of the stored data: MIGRATIONS[v] turns the `data` of format
+* version v into that of version v + 1. Version 1 is the first versioned
+* format; data from before it has no version and is refused.
 */
-function trimLineEdges(text) {
-	if (!text.includes("\n")) return text;
-	return text.split("\n").map((line, k, lines) => {
-		const start = k === 0 ? 0 : skipChars(line, 0, 1, " 	");
-		const end = k === lines.length - 1 ? line.length : skipChars(line, line.length, -1, " 	");
-		return line.slice(start, Math.max(start, end));
-	}).join("\n");
+var MIGRATIONS = {};
+/** Throw an IncompatibleSaveError unless this build reads format `version`. */
+function checkFormatVersion(version) {
+	if (typeof version !== "number" || !Number.isInteger(version) || version < 1 || version > 1) throw new IncompatibleSaveError();
+}
+/** Bring `data` of format `version` up to SAVE_FORMAT_VERSION. */
+function migrate(version, data) {
+	checkFormatVersion(version);
+	let current = data;
+	for (let v = version; v < 1; v++) {
+		const step = MIGRATIONS[v];
+		if (!step) throw new IncompatibleSaveError();
+		current = step(current);
+	}
+	return current;
 }
 /**
-* Build Preact vnodes from a combined string that contains only plain text
-* and placeholders. No micromark, no innerHTML. The text is the content of
-* one paragraph, so like micromark it drops spaces and tabs around line
-* endings; its edges are already split off by the caller.
+* The passage counters as a Map: a passage may be named "__proto__", which
+* serialize() refuses as an object key (as every story-state key).
 */
-function buildPlainTextVnodes(core, ph, unwrapParagraphs) {
-	const children = expandPlaceholderText(trimLineEdges(core), ph).filter((part) => part !== "");
-	return unwrapParagraphs ? /* @__PURE__ */ jsx(Fragment$1, { children }) : h("p", null, ...children);
+var countsToMap = (counts) => counts && new Map(Object.entries(counts));
+/**
+* The error of serialize() with its path told as a story variable:
+* `(at .variables.inv[0])` becomes `(at $inv[0])`, and a value only an
+* earlier history moment holds `(at $inv[0] in history moment 3)`.
+*/
+function variablePathError(err) {
+	if (!(err instanceof TypeError)) return err;
+	const message = err.message.replace(/\(at \.variables(?=[.[]|\))/, "(at $").replace(/\(at \.history\[(\d+)\]\.variables(.*)\)$/, (_, i, path) => `(at $${path} in history moment ${i})`).replace(/\(at \$\.?/, "(at $");
+	return message === err.message ? err : new TypeError(message);
 }
 /**
-* Render AST nodes with full CommonMark markdown support.
-*
-* Combines all nodes into a single markdown document, using placeholder
-* elements (see Placeholders) for non-text nodes (variables, macros, links,
-* HTML). This allows
-* markdown syntax to span across Twine tokens — e.g., markdown tables can
-* contain {$variables} and {macros} in their cells.
-*
-* After micromark processes the combined string, the HTML is parsed back into
-* Preact VNodes with placeholders replaced by the real rendered components.
-* Placeholders that micromark escaped as code text are swapped back too (see
-* PLACEHOLDER_TEXT_RE), so variables in code stay live components.
+* The stored form of `payload`. Throws, naming the variable, when the
+* payload holds a value a save cannot (see serialize()).
 */
-function renderNodes(nodes, options) {
-	if (nodes.length === 0) return null;
-	if (options?.raw) return renderInlineNodes(nodes);
-	if (!nodes.some((n) => n.type === "text" && (n.value.trim() !== "" || BLANK_LINE_RE.test(n.value)))) return nodes.map((node) => renderSingleNode(node));
-	const components = [];
-	const ph = {
-		nonce: Math.random().toString(36).slice(2, 10) || "0",
-		components,
-		nodes: []
+function encodePayload(payload) {
+	try {
+		return {
+			formatVersion: 1,
+			data: serialize({
+				...payload,
+				visitCounts: countsToMap(payload.visitCounts),
+				renderCounts: countsToMap(payload.renderCounts)
+			})
+		};
+	} catch (err) {
+		throw variablePathError(err);
+	}
+}
+/** Thrown for stored data that is not a payload this format can hold. */
+var invalid = () => /* @__PURE__ */ new Error("Invalid save data");
+/** A plain object or one without a prototype (a variable namespace). */
+function isRecord$1(value) {
+	if (typeof value !== "object" || value === null) return false;
+	const proto = Object.getPrototypeOf(value);
+	return proto === Object.prototype || proto === null;
+}
+/** Absent, null, or a `{ seed, pull }` PRNG snapshot. */
+function isOptionalPRNGSnapshot(value) {
+	if (value == null) return true;
+	return isRecord$1(value) && typeof value.seed === "string" && typeof value.pull === "number" && Number.isInteger(value.pull) && value.pull >= 0;
+}
+var isMoment = (value) => isRecord$1(value) && typeof value.passage === "string" && isRecord$1(value.variables) && typeof value.timestamp === "number" && isOptionalPRNGSnapshot(value.prng);
+var isCountsMap = (value) => value === void 0 || value instanceof Map && [...value.keys()].every((k) => typeof k === "string");
+/**
+* Whether a deserialized payload is well formed: every history moment is,
+* and `historyIndex` is an integer that points at a moment of the payload's
+* passage.
+*/
+function isPayload(value) {
+	if (!isRecord$1(value)) return false;
+	if (typeof value.passage !== "string" || !isRecord$1(value.variables)) return false;
+	const { history, historyIndex } = value;
+	if (!Array.isArray(history) || history.length === 0) return false;
+	if (!Array.from(history).every(isMoment)) return false;
+	if (typeof historyIndex !== "number" || !Number.isInteger(historyIndex) || historyIndex < 0 || historyIndex >= history.length || history[historyIndex].passage !== value.passage) return false;
+	return isCountsMap(value.visitCounts) && isCountsMap(value.renderCounts) && isOptionalPRNGSnapshot(value.prng);
+}
+var mapToCounts = (counts) => counts instanceof Map ? createCounts(Object.fromEntries(counts)) : void 0;
+/**
+* The live payload of a stored one: class instances and built-ins
+* restored. Throws an IncompatibleSaveError when `encoded` has no format
+* version or one this build cannot read (saves from before versioning, or
+* from a newer Spindle), and an error when its data is malformed.
+*/
+function decodePayload(encoded) {
+	if (typeof encoded !== "object" || encoded === null) throw invalid();
+	const { formatVersion, data } = encoded;
+	checkFormatVersion(formatVersion);
+	if (typeof data !== "string") throw invalid();
+	const body = deserialize(migrate(formatVersion, data));
+	if (!isPayload(body)) throw invalid();
+	const payload = {
+		...body,
+		visitCounts: mapToCounts(body.visitCounts),
+		renderCounts: mapToCounts(body.renderCounts)
 	};
-	let combined = "";
-	for (let i = 0; i < nodes.length; i++) {
-		const node = nodes[i];
-		if (node.type === "text") {
-			combined += node.value;
-			continue;
-		}
-		const phIdx = components.length;
-		components.push(renderSingleNode(node));
-		ph.nodes.push(node);
-		if (combined.endsWith("\\")) combined += ESCAPE_GUARD;
-		combined += placeholderHtml(ph.nonce, phIdx);
+	if (payload.visitCounts === void 0) delete payload.visitCounts;
+	if (payload.renderCounts === void 0) delete payload.renderCounts;
+	return payload;
+}
+//#endregion
+//#region src/saves/types.ts
+var INVALID_FILE = "Invalid save file format";
+function isRecord(value) {
+	return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+var META_STRINGS = [
+	"id",
+	"passage",
+	"ifid",
+	"playthroughId",
+	"createdAt",
+	"updatedAt",
+	"title"
+];
+/** decodePayload(), without the warnings for unregistered classes. */
+function decodeQuietly(encoded) {
+	const warn = console.warn;
+	console.warn = () => {};
+	try {
+		decodePayload(encoded);
+	} finally {
+		console.warn = warn;
 	}
-	const unwrapParagraphs = !!(options?.nobr || options?.inline);
-	const lead = combined.slice(0, skipChars(combined, 0, 1, EDGE_WS));
-	const trail = lead.length === combined.length ? "" : combined.slice(skipChars(combined, combined.length, -1, EDGE_WS));
-	const core = combined.slice(lead.length, combined.length - trail.length);
-	const edges = (content) => unwrapParagraphs && (lead || trail) ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-		lead,
-		content,
-		trail
-	] }) : content;
-	const textOnly = combined.replace(PLACEHOLDER_STRIP_RE, "");
-	if (!MARKDOWN_SYNTAX_RE.test(textOnly) && !BLANK_LINE_RE.test(textOnly)) return edges(buildPlainTextVnodes(core, ph, unwrapParagraphs));
-	return edges(htmlToPreact(markdownToHtml(combined, { inline: options?.inline }), ph, unwrapParagraphs));
+}
+/**
+* Check data from outside the running story (an imported save) in full:
+* the export's and the payload's format versions, the record's metadata,
+* and that the payload decodes (see decodePayload). Throws an
+* IncompatibleSaveError for a missing or unknown format version, and an
+* "Invalid save file format" error for anything else that is wrong.
+* Anything that passes can be stored and later loaded.
+*/
+function checkSaveExport(value) {
+	if (!isRecord(value)) throw new Error(INVALID_FILE);
+	if (!hasOwn(value, "formatVersion")) throw value.version === 1 ? new IncompatibleSaveError() : new Error(INVALID_FILE);
+	checkFormatVersion(value.formatVersion);
+	if (typeof value.ifid !== "string") throw new Error(INVALID_FILE);
+	const save = value.save;
+	if (!isRecord(save) || !isRecord(save.meta)) throw new Error(INVALID_FILE);
+	const meta = save.meta;
+	if (META_STRINGS.some((key) => typeof meta[key] !== "string")) throw new Error(INVALID_FILE);
+	try {
+		decodeQuietly(save.payload);
+	} catch (err) {
+		if (err instanceof IncompatibleSaveError) throw err;
+		throw new Error(INVALID_FILE);
+	}
+}
+/** Whether checkSaveExport() accepts `value`. */
+function isSaveExport(value) {
+	try {
+		checkSaveExport(value);
+		return true;
+	} catch {
+		return false;
+	}
+}
+/** Estimated byte size of a stored payload. */
+function estimatePayloadBytes(payload) {
+	return JSON.stringify(payload).length;
 }
 //#endregion
 //#region src/saves/storage.ts
@@ -4622,6 +5526,28 @@ function getBackendType() {
 	return _backend?.type ?? "memory";
 }
 //#endregion
+//#region src/utils/value-kinds.ts
+var toStringTag = (value) => Object.prototype.toString.call(value).slice(8, -1);
+/** Temporal values are immutable: copies may share them. */
+var isTemporal = (value) => toStringTag(value).startsWith("Temporal.");
+/** new Number(), new String(), new Boolean(), Object(1n). */
+var isBoxed = (value) => value instanceof Number || value instanceof String || value instanceof Boolean || toStringTag(value) === "BigInt";
+/**
+* Values compared and copied as a whole, by their content: they have no
+* own keys to merge by, or their keys are not the data (a property written
+* into one would be dropped by clones and saves, and by Immer for Map and
+* Set).
+*/
+function isAtomic(value) {
+	return value instanceof Date || value instanceof RegExp || value instanceof Map || value instanceof Set || ArrayBuffer.isView(value) || value instanceof ArrayBuffer || value instanceof URL || value instanceof URLSearchParams || value instanceof Error || isBoxed(value) || isTemporal(value);
+}
+/** "a Map", "an Error", ... for an atomic value (see isAtomic), else undefined. */
+function atomicName(value) {
+	if (!isAtomic(value)) return void 0;
+	const tag = value instanceof Error ? "Error" : toStringTag(value);
+	return `${/^[AEIOU]/.test(tag) ? "an" : "a"} ${tag}`;
+}
+//#endregion
 //#region src/utils/object-path.ts
 /**
 * Traverse dot-path segments on an object and return the nested value.
@@ -4645,7 +5571,7 @@ 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;
+var builtinName = atomicName;
 /**
 * Shallow copy that keeps the prototype, so a registered class instance
 * stays an instance of its class (with the same own keys deepClone copies).
@@ -4697,6 +5623,13 @@ function deleteByPath(root, segments) {
 	}
 	if (holder == null || typeof holder !== "object" || !hasOwn(holder, last)) return;
 	const parent = walkToParent(root, segments, false);
+	if (Array.isArray(parent) && isDraft(parent) && segments.length > 1) {
+		const copy = current(parent).slice();
+		delete copy[Number(last)];
+		const holder = walkToParent(root, segments.slice(0, -1), false);
+		holder[segments[segments.length - 2]] = copy;
+		return;
+	}
 	delete parent[last];
 }
 /** Refuse a segment that would reach a prototype instead of story state. */
@@ -4742,66 +5675,199 @@ function isPlainObject(value) {
 	const proto = Object.getPrototypeOf(value);
 	return proto === Object.prototype || proto === null;
 }
+/** Own keys of an error that are not enumerable but are data. */
+var ERROR_HIDDEN_KEYS = [
+	"message",
+	"cause",
+	"errors"
+];
 function deepClone(value, options = {}) {
 	const seen = /* @__PURE__ */ new Map();
+	/** Record `copy` as the copy of `obj` before its contents are copied. */
+	const keep = (obj, copy) => {
+		seen.set(obj, copy);
+		return copy;
+	};
+	/** Copy the own (enumerable) keys of `obj` into `copy`. */
+	function copyKeys(obj, copy) {
+		for (const key of Object.keys(obj)) setOwn(copy, key, clone(obj[key]));
+		return copy;
+	}
+	function cloneBuiltin(val) {
+		if (val instanceof Date) return keep(val, new Date(val.getTime()));
+		if (val instanceof RegExp) return keep(val, new RegExp(val.source, val.flags));
+		if (val instanceof ArrayBuffer) return keep(val, val.slice(0));
+		if (ArrayBuffer.isView(val)) {
+			const buffer = clone(val.buffer);
+			if (val instanceof DataView) return keep(val, new DataView(buffer, val.byteOffset, val.byteLength));
+			const ctor = val.constructor;
+			const length = val.length;
+			return keep(val, new ctor(buffer, val.byteOffset, length));
+		}
+		if (val instanceof URL) return keep(val, new URL(val.href));
+		if (val instanceof URLSearchParams) return keep(val, new URLSearchParams(val));
+		if (isBoxed(val)) return keep(val, Object(val.valueOf()));
+		if (isTemporal(val)) return val;
+		if (val instanceof Error) {
+			const copy = keep(val, Object.create(Object.getPrototypeOf(val)));
+			for (const key of [...ERROR_HIDDEN_KEYS, "stack"]) if (hasOwn(val, key)) Object.defineProperty(copy, key, {
+				value: clone(val[key]),
+				writable: true,
+				configurable: true
+			});
+			return copyKeys(val, copy);
+		}
+	}
 	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]);
+			const arr = keep(obj, new Array(val.length));
+			for (let i = 0; i < val.length; i++) if (i in val) arr[i] = clone(val[i]);
 			return arr;
 		}
 		if (val instanceof Map) {
-			const copy = /* @__PURE__ */ new Map();
-			seen.set(obj, copy);
+			const copy = keep(obj, /* @__PURE__ */ new Map());
 			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);
+			const copy = keep(obj, /* @__PURE__ */ new Set());
 			for (const v of val) copy.add(clone(v));
 			return copy;
 		}
+		const builtin = cloneBuiltin(obj);
+		if (builtin !== void 0) return builtin;
 		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 copyKeys(obj, keep(obj, keepsProto ? Object.create(Object.getPrototypeOf(obj)) : {}));
 	}
 	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).
+* Structural equality over the value types deepClone() supports, nested at
+* any depth and with cycles. Objects must have the same prototype. Map and
+* Set entries are compared in insertion order, so reordering one is a
+* change. Arrays are compared by length and index; a hole differs from an
+* undefined element. Errors are compared by class, message, cause, errors
+* and own keys (not their stack).
 */
 function deepEqual(a, b) {
-	return equal(a, b, /* @__PURE__ */ new Map());
+	return equal(a, b, loosePairs());
 }
 /**
-* `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.
+* Pairs for deepEqual(). Every object may pair with several others, since
+* cycles of different lengths can still unfold to the same value, and
+* shared references may equal distinct copies.
 */
+function loosePairs() {
+	const assumed = /* @__PURE__ */ new Map();
+	return (a, b) => {
+		const pairs = assumed.get(a);
+		if (pairs?.has(b)) return true;
+		if (pairs) pairs.add(b);
+		else assumed.set(a, new Set([b]));
+	};
+}
+/**
+* Pairs that also require the same reference structure: each object of one
+* value pairs with exactly one of the other, so shared references and
+* cycles are shared at the same places.
+*/
+function strictPairs() {
+	const ab = /* @__PURE__ */ new Map();
+	const ba = /* @__PURE__ */ new Map();
+	const pairs = (a, b) => {
+		const known = ab.get(a);
+		if (known !== void 0) return known === b;
+		if (ba.has(b)) return false;
+		ab.set(a, b);
+		ba.set(b, a);
+	};
+	pairs.strict = true;
+	return pairs;
+}
+/**
+* Whether `a` and `b` are equal as deepEqual() has it and also share
+* references at the same places (a save of one loads as the other).
+*/
+function deepEqualStrict(a, b) {
+	return equal(a, b, strictPairs());
+}
+/**
+* `curr` with each part that equals (see deepEqualStrict) the part of
+* `prev` at the same place replaced by `prev`'s: the history moments of a
+* save then share what did not change between them, which a save stores
+* once. Containers on the way to a change are copied; neither value is
+* changed. Shared references and cycles within `curr` stay so.
+*/
+function shareEqual(prev, curr) {
+	const done = /* @__PURE__ */ new Map();
+	function share(p, c) {
+		if (p === c || !isObjectValue(c) || !isObjectValue(p)) return c;
+		if (done.has(c)) return done.get(c);
+		if (deepEqualStrict(p, c)) {
+			done.set(c, p);
+			return p;
+		}
+		if (c instanceof Map && p instanceof Map) {
+			const out = /* @__PURE__ */ new Map();
+			done.set(c, out);
+			for (const [k, v] of c) out.set(k, p.has(k) ? share(p.get(k), v) : v);
+			return out;
+		}
+		if (Array.isArray(c) && Array.isArray(p)) {
+			const out = new Array(c.length);
+			done.set(c, out);
+			for (let i = 0; i < c.length; i++) if (i in c) out[i] = i < p.length ? share(p[i], c[i]) : c[i];
+			return out;
+		}
+		if (mergesWith(p, c, false)) {
+			const out = Object.create(Object.getPrototypeOf(c));
+			done.set(c, out);
+			const cr = c;
+			for (const key of Object.keys(cr)) setOwn(out, key, hasOwn(p, key) ? share(p[key], cr[key]) : cr[key]);
+			return out;
+		}
+		done.set(c, c);
+		return c;
+	}
+	return share(prev, curr);
+}
+var isObjectValue = (v) => typeof v === "object" && v !== null;
+function equalBytes(a, b) {
+	const x = ArrayBuffer.isView(a) ? new Uint8Array(a.buffer, a.byteOffset, a.byteLength) : new Uint8Array(a);
+	const y = ArrayBuffer.isView(b) ? new Uint8Array(b.buffer, b.byteOffset, b.byteLength) : new Uint8Array(b);
+	if (x.length !== y.length) return false;
+	for (let i = 0; i < x.length; i++) if (x[i] !== y[i]) return false;
+	return true;
+}
+/** Equality of the content of atomic built-ins (see isAtomic) but Map/Set. */
+function equalBuiltin(a, b, assumed) {
+	if (a instanceof Date) return Object.is(a.getTime(), b.getTime());
+	if (a instanceof RegExp) return String(a) === String(b);
+	if (ArrayBuffer.isView(a) || a instanceof ArrayBuffer) return equalBytes(a, b);
+	if (a instanceof URL || a instanceof URLSearchParams) return String(a) === String(b);
+	if (isBoxed(a)) return Object.is(a.valueOf(), b.valueOf());
+	if (isTemporal(a)) return String(a) === String(b);
+	if (a instanceof Error) return ERROR_HIDDEN_KEYS.every((key) => hasOwn(a, key) === hasOwn(b, key) && equal(a[key], b[key], assumed)) && equalKeys(a, b, assumed);
+}
+function equalKeys(a, b, assumed) {
+	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;
+}
+/** `assumed` tracks the pairs of objects met (see Pairs). */
 function equal(a, b, assumed) {
-	if (Object.is(a, b)) return true;
+	if (Object.is(a, b) && !(assumed.strict && isObjectValue(a))) 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);
+	const met = assumed(a, b);
+	if (met !== void 0) return met;
 	if (a instanceof Map || a instanceof Set) {
 		const bc = b;
 		if (a.size !== bc.size) return false;
@@ -4810,27 +5876,25 @@ function equal(a, b, assumed) {
 		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;
 	}
+	const builtin = equalBuiltin(a, b, assumed);
+	if (builtin !== void 0) return builtin;
 	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;
+		for (let i = 0; i < a.length; i++) if (i in a !== i in bc || !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;
+	return equalKeys(a, b, assumed);
 }
 /**
 * 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).
+* class instances. Arrays and atomic built-ins (Map, Set, Date, typed
+* arrays, errors..., see isAtomic) are values that are replaced as a whole,
+* since their elements have no stable identity to merge by (a shift moves
+* every index) or their content is not in their keys.
 */
 function isMergeable(value) {
-	return typeof value === "object" && value !== null && !Array.isArray(value) && !(value instanceof Map) && !(value instanceof Set) && !(value instanceof Date) && !(value instanceof RegExp);
+	return typeof value === "object" && value !== null && !Array.isArray(value) && !isAtomic(value);
 }
 /**
 * Whether changes between `a` and `b` merge key by key: both are objects of
@@ -4969,13 +6033,13 @@ var VALID_EVENTS = new Set([
 	"passagerender",
 	"dialogrender"
 ]);
-var listeners = /* @__PURE__ */ new Map();
+var listeners$1 = /* @__PURE__ */ new Map();
 function on(event, cb) {
 	if (!VALID_EVENTS.has(event)) throw new Error(`spindle: Unknown event "${event}".`);
-	let set = listeners.get(event);
+	let set = listeners$1.get(event);
 	if (!set) {
 		set = /* @__PURE__ */ new Set();
-		listeners.set(event, set);
+		listeners$1.set(event, set);
 	}
 	set.add(cb);
 	return () => {
@@ -4984,7 +6048,7 @@ function on(event, cb) {
 }
 /** Call `call` with each listener of `event`. */
 function forEachListener(event, call) {
-	const set = listeners.get(event);
+	const set = listeners$1.get(event);
 	if (!set) return;
 	for (const cb of [...set]) call(cb);
 }
@@ -5173,29 +6237,15 @@ function saveWithHooks(slot, custom, beginCapture, write) {
 		return Promise.reject(err);
 	}
 }
-/**
-* `payload` with `convert` applied to its live variables and to those of
-* every history moment.
-*/
-function mapVariables(payload, convert) {
-	return {
-		...payload,
-		variables: convert(payload.variables),
-		history: payload.history.map((m) => ({
-			...m,
-			variables: convert(m.variables)
-		}))
-	};
-}
-/** The record to store for a save: `payload` serialized, and its size. */
+/** The record to store for a save: `payload` encoded, and its size. */
 function storedRecord(meta, payload) {
-	const serialized = mapVariables(deepClone(payload), serialize);
+	const encoded = encodePayload(payload);
 	return {
 		meta: {
 			...meta,
-			estimatedBytes: estimatePayloadBytes(serialized)
+			estimatedBytes: estimatePayloadBytes(encoded)
 		},
-		payload: serialized
+		payload: encoded
 	};
 }
 var createSave = queued(createSaveNow);
@@ -5249,15 +6299,13 @@ async function overwriteSaveNow(saveId, payload, custom, playthroughId) {
 	return updated;
 }
 /**
-* Turn a stored (serialized) payload into a live one, restoring class
-* instances and built-ins. Returns a new payload; the stored one is left
-* untouched. Payloads handed to the store's `loadFromPayload()` must be live.
+* The live payload of a stored save, if there is one (see decodePayload:
+* throws for a save of an incompatible format). Payloads handed to the
+* store's `loadFromPayload()` must be live.
 */
-function deserializePayload(payload) {
-	return mapVariables(payload, deserialize);
-}
-/** The live payload of a stored save, if there is one. */
-var livePayload = (record) => record && deserializePayload(record.payload);
+var livePayload = (record) => record && decodePayload(record.payload);
+/** The live payload of a stored record's payload (see decodePayload). */
+var decodeSavePayload = (payload) => decodePayload(payload);
 readingSave(livePayload);
 /**
 * Delete a save record. If the default slot or a named slot holds it, that
@@ -5426,7 +6474,7 @@ function loadSlotSave(ifid, slot) {
 	return inOrder(async () => {
 		const record = await slotRecord(ifid, slot);
 		if (!record) return void 0;
-		const payload = deserializePayload(record.payload);
+		const payload = decodePayload(record.payload);
 		const { playthroughId } = record.meta;
 		if (playthroughId) await adoptPlaythroughNow(ifid, playthroughId);
 		return {
@@ -5476,22 +6524,32 @@ var deleteSlotSave = queued(async (ifid, slot) => {
 });
 var SESSION_KEY_PREFIX = "spindle.session.";
 /**
-* Write a pre-serialized session payload to sessionStorage.
-* Callers are responsible for serializing variables (see persistSession in store.ts).
+* Write the session payload to sessionStorage, encoded like a save (see
+* encodePayload). Throws, like a save, when the state holds a value a save
+* cannot (a function, an instance of an unregistered class, a unique
+* symbol); the session then keeps its previous copy.
 */
-function saveSession(ifid, data) {
+function saveSession(ifid, payload) {
+	const text = JSON.stringify(encodePayload(payload));
 	try {
-		sessionStorage.setItem(`${SESSION_KEY_PREFIX}${ifid}`, JSON.stringify(data));
+		sessionStorage.setItem(`${SESSION_KEY_PREFIX}${ifid}`, text);
 	} catch {}
 }
+/**
+* The live payload of the stored session, if there is one that loads. A
+* session written by an incompatible version of Spindle is dropped with a
+* warning, and the story starts fresh.
+*/
 function loadSession(ifid) {
 	try {
 		const raw = sessionStorage.getItem(`${SESSION_KEY_PREFIX}${ifid}`);
 		if (!raw) return void 0;
-		const parsed = JSON.parse(raw);
-		if (!isSavePayload(parsed)) return void 0;
-		return deserializePayload(parsed);
-	} catch {
+		return decodePayload(JSON.parse(raw));
+	} catch (err) {
+		if (err instanceof IncompatibleSaveError) {
+			console.warn(`spindle: ${err.message}; the session was not restored.`);
+			clearSession(ifid);
+		}
 		return;
 	}
 }
@@ -5504,7 +6562,7 @@ function clearSession(ifid) {
 function toExport(record) {
 	if (!record) return void 0;
 	return {
-		version: 1,
+		formatVersion: 1,
 		ifid: record.meta.ifid,
 		exportedAt: (/* @__PURE__ */ new Date()).toISOString(),
 		save: record
@@ -5517,9 +6575,8 @@ var exportSave = readingSave(toExport);
 * The returned record is not stored yet.
 */
 async function prepareImport(data, ifid) {
-	if (data.version !== 1) throw new Error(`Unsupported save version: ${data.version}`);
+	checkSaveExport(data);
 	if (data.ifid !== ifid) throw new Error(`Save is from a different story (expected IFID ${ifid}, got ${data.ifid})`);
-	if (!isSaveExport(data)) throw new Error("Invalid save file format");
 	const record = deepClone(data.save);
 	record.meta.id = crypto.randomUUID();
 	record.meta.updatedAt = (/* @__PURE__ */ new Date()).toISOString();
@@ -6168,6 +7225,48 @@ function isDialogShowing() {
 	return dialogHostCallbacks?.isOpen() ?? false;
 }
 //#endregion
+//#region src/runtime-errors.ts
+var errors = [];
+var nextId = 1;
+var listeners = /* @__PURE__ */ new Set();
+function update(next) {
+	errors = next;
+	for (const listener of listeners) listener();
+}
+/**
+* Show `error` on the page, after `context` (what failed). The same error
+* again, while it is shown, counts up instead of adding an entry. Logging
+* it to the console is up to the caller.
+*/
+function showRuntimeError(context, error) {
+	const message = errorMessage(error).replace(/^spindle: /, "");
+	const same = errors.find((e) => e.context === context && e.message === message);
+	update(same ? errors.map((e) => e === same ? {
+		...e,
+		count: e.count + 1
+	} : e) : [...errors, {
+		id: nextId++,
+		context,
+		message,
+		count: 1
+	}]);
+}
+/** Remove the shown error `id`. */
+function dismissRuntimeError(id) {
+	update(errors.filter((e) => e.id !== id));
+}
+/** The errors shown now, oldest first. */
+function getRuntimeErrors() {
+	return errors;
+}
+/** Call `listener` whenever the shown errors change; returns unsubscribe. */
+function subscribeRuntimeErrors(listener) {
+	listeners.add(listener);
+	return () => {
+		listeners.delete(listener);
+	};
+}
+//#endregion
 //#region src/store.ts
 enablePatches();
 enableMapSet();
@@ -6193,24 +7292,39 @@ var variableBase = createNamespace();
 var patchEntries = [];
 /** Immer-produced reference to variables right after the last navigation. */
 var lastNavigationVars = createNamespace();
-/** Deep-clone patch values so they are independent of future mutations. */
-function clonePatches(patches) {
-	return patches.map((p) => ({
-		...p,
-		value: p.value !== void 0 ? deepClone(p.value) : void 0
-	}));
-}
-/** Compute forward + inverse patches that transform `prev` into `curr`. */
+/**
+* The variables that differ between `prev` and `curr`: added, replaced (by
+* reference: store values are immutable, so an unchanged variable keeps its
+* object) or deleted. A recorded value is a deep copy, so that changing a
+* live value in place (a class instance is not frozen) cannot change
+* history; instances of unregistered classes are kept, as the store keeps
+* them (a save then refuses them).
+*/
 function computeVarPatches(prev, curr) {
-	const [, forward, inverse] = produceWithPatches(prev, (draft) => {
-		const d = draft;
-		for (const key of Object.keys(d)) if (!hasOwn(curr, key)) delete d[key];
-		for (const [key, val] of Object.entries(curr)) d[key] = val;
+	const forward = [];
+	for (const key of Object.keys(prev)) if (!hasOwn(curr, key)) forward.push({
+		key,
+		deleted: true
 	});
-	return {
-		forward: clonePatches(forward),
-		inverse: clonePatches(inverse)
-	};
+	for (const key of Object.keys(curr)) if (!hasOwn(prev, key) || !Object.is(prev[key], curr[key])) forward.push({
+		key,
+		deleted: false,
+		value: deepClone(curr[key], { keepUnregistered: true })
+	});
+	return { forward };
+}
+/**
+* The variables of the moment after `vars`, by `changes`. The recorded
+* values are used as they are, not copied, so values the moments share
+* stay shared, and cycles and shared references in them hold (Immer's
+* applyPatches copies each value, and recurses forever on a cycle).
+*/
+function applyVarPatches(vars, changes) {
+	const next = Object.create(Object.getPrototypeOf(vars));
+	for (const key of Object.keys(vars)) setOwn(next, key, vars[key]);
+	for (const change of changes) if (change.deleted) delete next[change.key];
+	else setOwn(next, change.key, change.value);
+	return next;
 }
 /**
 * Replace the variable snapshot recorded for the newest history moment
@@ -6228,7 +7342,7 @@ function rerecordNewestMoment(vars) {
 function forEachRecorded(count, fn) {
 	let vars = variableBase;
 	for (let i = 0; i < count; i++) {
-		if (i > 0) vars = applyPatches(vars, patchEntries[i - 1].forward);
+		if (i > 0) vars = applyVarPatches(vars, patchEntries[i - 1].forward);
 		fn(vars, i);
 	}
 }
@@ -6244,30 +7358,65 @@ function savedMoment(moment, variables) {
 /** Reconstruct variables at a given history moment by replaying patches. */
 function reconstructVarsAt(index) {
 	let vars = variableBase;
-	for (let i = 0; i < index; i++) vars = applyPatches(vars, patchEntries[i].forward);
+	for (let i = 0; i < index; i++) vars = applyVarPatches(vars, patchEntries[i].forward);
 	return vars;
 }
-var serializedHistory = [];
+/**
+* The history moments the session holds, with the variables recorded for
+* each. Store state is immutable, so holding the recorded objects keeps
+* them as they were; moments share the values that did not change between
+* them, and the session stores those once (see encodePayload).
+*/
+var sessionMoments = [];
+/**
+* Write the game to the session: the whole payload, encoded in one piece
+* on every navigation.
+*/
 function persistSession(get) {
 	const { storyData, currentPassage, variables, history, historyIndex, visitCounts, renderCounts } = get();
 	if (!storyData) return;
-	if (serializedHistory.length > history.length) serializedHistory.length = history.length;
-	if (serializedHistory.length < history.length) if (history.length - serializedHistory.length === 1) {
+	if (sessionMoments.length > history.length) sessionMoments.length = history.length;
+	if (sessionMoments.length < history.length) if (history.length - sessionMoments.length === 1) {
 		const i = history.length - 1;
-		serializedHistory[i] = savedMoment(history[i], serialize(variables));
+		sessionMoments[i] = savedMoment(history[i], variables);
 	} else forEachRecorded(history.length, (vars, i) => {
-		if (i >= serializedHistory.length) serializedHistory[i] = savedMoment(history[i], serialize(vars));
+		if (i >= sessionMoments.length) sessionMoments[i] = savedMoment(history[i], vars);
 	});
 	saveSession(storyData.ifid, {
 		passage: currentPassage,
-		variables: serialize(variables),
-		history: serializedHistory,
+		variables,
+		history: sessionMoments,
 		historyIndex,
 		visitCounts,
 		renderCounts,
 		prng: snapshotPRNG()
 	});
 }
+/** What the page shows before a session write error (see RuntimeErrors). */
+var SESSION_ERROR_CONTEXT = "The game could not be saved for a page reload; a reload goes back to the last passage it could save:";
+/**
+* Write the session, then run `after` (the rest of the operation: its
+* events and queued navigations), then throw the session's error if writing
+* it failed: a value a save cannot hold (a function, an instance of an
+* unregistered class, a unique symbol) fails the operation that put it in
+* the state's history, as it fails a save, but only after the operation is
+* complete, so the story is not left half-way through it. The error is also
+* shown on the page, and the session keeps its last good copy.
+*/
+function persistSessionThen(get, after) {
+	let failure;
+	try {
+		persistSession(get);
+	} catch (error) {
+		failure = { error };
+		showRuntimeError(SESSION_ERROR_CONTEXT, error);
+	}
+	try {
+		after?.();
+	} finally {
+		if (failure) throw failure.error;
+	}
+}
 /**
 * Trim history to `state.maxHistory` moments: keep the newest moments that
 * include the current one. After a navigation (the current moment is the
@@ -6281,10 +7430,10 @@ function trimHistory(state) {
 	if (excess <= 0) return false;
 	const start = Math.min(state.historyIndex, excess);
 	const end = start + state.maxHistory;
-	for (let i = 0; i < start; i++) variableBase = applyPatches(variableBase, patchEntries[i].forward);
+	for (let i = 0; i < start; i++) variableBase = applyVarPatches(variableBase, patchEntries[i].forward);
 	state.history = state.history.slice(start, end);
 	patchEntries = patchEntries.slice(start, end - 1);
-	serializedHistory = serializedHistory.slice(start, end);
+	sessionMoments = sessionMoments.slice(start, end);
 	state.historyIndex -= start;
 	return true;
 }
@@ -6317,16 +7466,19 @@ function finishEnteredMoment(get, set) {
 	});
 }
 /**
-* A deep copy of a variable namespace as save data: a plain object, as a
-* loaded save holds it (the store turns it back into a namespace on load).
+* A variable namespace as save data: a plain object, as a loaded save holds
+* it (the store turns it back into a namespace on load). The values are the
+* store's own, immutable ones, not copies: the moments of a payload share
+* the values that did not change between them, and a save stores those
+* once (see encodePayload).
 */
-var plainCopy = (ns) => ({ ...deepClone(ns) });
+var plainCopy = (ns) => ({ ...ns });
 /** Reset all module-level state (called on init, restart, loadFromPayload). */
 function resetModuleState(base) {
 	variableBase = base;
 	patchEntries = [];
 	lastNavigationVars = base;
-	serializedHistory = [];
+	sessionMoments = [];
 }
 /**
 * Fresh variables from `defaults` for a game that starts over (init,
@@ -6377,8 +7529,7 @@ function moveInHistory(get, set, step) {
 	reinitTriggerState();
 	lastNavigationVars = get().variables;
 	restorePRNGFromMoment(get().history[get().historyIndex]);
-	persistSession(get);
-	emit("afternavigate", targetPassage, previousPassage);
+	persistSessionThen(get, () => emit("afternavigate", targetPassage, previousPassage));
 }
 /**
 * Record the state StoryInit left behind as the start moment: its variable
@@ -6551,7 +7702,8 @@ function loadedEntryMoment(payload) {
 * the `beforesave` hooks) into the payload's snapshot of the saved moment. A
 * load restores that snapshot, the state on entering the passage, and runs
 * the passage again, so data a hook adds to a save would otherwise be lost
-* on load (#227). Only the property paths the hooks changed are written: a
+* on load (#227). Only the property paths the hooks changed are written (into
+* copies of the objects on those paths, the rest staying shared): a
 * whole variable would bring along what the passage did to the rest of it,
 * which the passage then does again on load (#232). Only the payload's copy
 * changes: the live history keeps the recorded snapshot (#159).
@@ -6573,7 +7725,9 @@ function mergeHookWrites(target, before, after, ancestors) {
 	ancestors.add(after);
 	mergeKeys(target, before, after, (key, b, a) => {
 		if (!hasOwn(target, key) || !mergesWith(a, target[key], true) || ancestors.has(a)) return false;
-		mergeHookWrites(target[key], b, a, ancestors);
+		const copy = shallowCopy(target[key]);
+		target[key] = copy;
+		mergeHookWrites(copy, b, a, ancestors);
 		return true;
 	});
 	ancestors.delete(after);
@@ -6738,7 +7892,7 @@ var useStoryStore = create()(storyStore((set, get) => ({
 			state.maxHistory = Math.max(1, Math.round(limit));
 			trimmed = trimHistory(state);
 		});
-		if (trimmed) persistSession(get);
+		if (trimmed) persistSessionThen(get);
 	},
 	setQuickSaveKey: (key) => {
 		set((state) => {
@@ -6799,7 +7953,7 @@ var useStoryStore = create()(storyStore((set, get) => ({
 			state.navigationId++;
 			state.history = state.history.slice(0, state.historyIndex + 1);
 			patchEntries.length = state.historyIndex;
-			if (serializedHistory.length > state.historyIndex + 1) serializedHistory.length = state.historyIndex + 1;
+			if (sessionMoments.length > state.historyIndex + 1) sessionMoments.length = state.historyIndex + 1;
 			patchEntries.push(patchEntry);
 			state.history.push({
 				passage: passageName,
@@ -6824,9 +7978,10 @@ var useStoryStore = create()(storyStore((set, get) => ({
 		const deferred = deferredNavigations;
 		deferredNavigations = [];
 		finishEnteredMoment(get, set);
-		persistSession(get);
-		emit("afternavigate", passageName, previousPassage);
-		for (const next of deferred) get().navigate(next);
+		persistSessionThen(get, () => {
+			emit("afternavigate", passageName, previousPassage);
+			for (const next of deferred) get().navigate(next);
+		});
 	},
 	goBack: () => moveInHistory(get, set, -1),
 	goForward: () => moveInHistory(get, set, 1),
@@ -6967,7 +8122,6 @@ var useStoryStore = create()(storyStore((set, get) => ({
 	importSave: async (data, slot) => {
 		const { storyData } = get();
 		if (!storyData) throw new Error("spindle: Story is not initialized.");
-		if (!isSaveExport(data)) throw new Error("Invalid save file format");
 		const info = await importSlotSave(data, storyData.ifid, slot);
 		recordKnownSave(set, slot, true);
 		return info;
@@ -7002,11 +8156,12 @@ var useStoryStore = create()(storyStore((set, get) => ({
 		const { currentPassage, variables, history, historyIndex, visitCounts, renderCounts } = get();
 		const saveHistory = [];
 		forEachRecorded(history.length, (vars, i) => {
-			saveHistory.push(savedMoment(history[i], plainCopy(vars)));
+			const recorded = plainCopy(vars);
+			saveHistory.push(savedMoment(history[i], i === 0 ? recorded : shareEqual(saveHistory[i - 1].variables, recorded)));
 		});
 		return {
 			passage: currentPassage,
-			variables: plainCopy(variables),
+			variables: shareEqual(saveHistory[historyIndex]?.variables, plainCopy(variables)),
 			history: saveHistory,
 			historyIndex,
 			visitCounts: { ...visitCounts },
@@ -7034,17 +8189,10 @@ var useStoryStore = create()(storyStore((set, get) => ({
 		const ifid = get().storyData?.ifid;
 		if (playthroughId && ifid) switchToLoadedPlaythrough(ifid, playthroughId);
 		const entry = loadedEntryMoment(payload);
-		const base = createNamespace(deepClone(payload.history[0]?.variables ?? {}));
-		const newPatchEntries = [];
-		let prevVars = base;
-		for (let i = 1; i < payload.history.length; i++) {
-			const currVars = createNamespace(deepClone(payload.history[i].variables));
-			newPatchEntries.push(computeVarPatches(prevVars, currVars));
-			prevVars = currVars;
-		}
-		variableBase = deepClone(base);
-		patchEntries = newPatchEntries;
-		serializedHistory = payload.history.map((m) => savedMoment(m, serialize(m.variables)));
+		const snapshots = deepClone(payload.history.map((m) => m.variables)).map((vars) => createNamespace(vars));
+		variableBase = deepClone(snapshots[0]);
+		patchEntries = snapshots.slice(1).map((curr, i) => computeVarPatches(snapshots[i], curr));
+		sessionMoments = payload.history.map((m, i) => savedMoment(m, snapshots[i]));
 		set((state) => {
 			state.currentPassage = payload.passage;
 			state.navigationId++;
@@ -7064,8 +8212,7 @@ var useStoryStore = create()(storyStore((set, get) => ({
 		reinitTriggerState();
 		lastNavigationVars = reconstructVarsAt(get().historyIndex);
 		restorePRNGFrom(entry?.prng !== void 0 ? entry.prng : payload.prng);
-		persistSession(get);
-		withoutDraws(() => emit("afterload", slot));
+		persistSessionThen(get, () => withoutDraws(() => emit("afterload", slot)));
 	},
 	getHistoryVariables: (index) => {
 		return deepClone(reconstructVarsAt(index));
@@ -7306,6 +8453,50 @@ function TriggerDialogHost() {
 	}, `${dialog.passageName}-${i}`)) });
 }
 //#endregion
+//#region src/components/RuntimeErrors.tsx
+/**
+* The runtime errors shown on the page (see showRuntimeError): one banner
+* each, announced to screen readers (role="alert"), until the player
+* dismisses it. Style them with the `spindle-error-banner` classes.
+*/
+function RuntimeErrors() {
+	const [errors, setErrors] = useState(getRuntimeErrors);
+	useEffect(() => {
+		setErrors(getRuntimeErrors());
+		return subscribeRuntimeErrors(() => setErrors(getRuntimeErrors()));
+	}, []);
+	if (errors.length === 0) return null;
+	return /* @__PURE__ */ jsx("div", {
+		class: "spindle-error-banners",
+		children: errors.map((e) => /* @__PURE__ */ jsxs("div", {
+			class: "spindle-error-banner",
+			role: "alert",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					class: "spindle-error-banner-context",
+					children: e.context
+				}),
+				" ",
+				/* @__PURE__ */ jsx("span", {
+					class: "spindle-error-banner-message",
+					children: e.message
+				}),
+				e.count > 1 && /* @__PURE__ */ jsx("span", {
+					class: "spindle-error-banner-count",
+					children: ` (×${e.count})`
+				}),
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					class: "spindle-error-banner-dismiss",
+					"aria-label": "Dismiss",
+					onClick: () => dismissRuntimeError(e.id),
+					children: "✕"
+				})
+			]
+		}, e.id))
+	});
+}
+//#endregion
 //#region src/components/App.tsx
 function App() {
 	const { storyData, currentPassage, nobr } = useStoryFields("storyData", "currentPassage", "nobr");
@@ -7327,7 +8518,11 @@ function App() {
 		class: "loading",
 		children: "Loading..."
 	});
-	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(StoryInterface, {}), /* @__PURE__ */ jsx(TriggerDialogHost, {})] });
+	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsx(StoryInterface, {}),
+		/* @__PURE__ */ jsx(TriggerDialogHost, {}),
+		/* @__PURE__ */ jsx(RuntimeErrors, {})
+	] });
 	return nobr ? /* @__PURE__ */ jsx(NobrContext.Provider, {
 		value: true,
 		children: content
@@ -7335,19 +8530,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");
@@ -7365,7 +8633,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",
@@ -8675,12 +9943,13 @@ function assignmentArgs(rawArgs, args) {
 * and later recomputations read the same source.
 */
 function computeAndApply(expr, name, isTemp, isLocal, getLocals, rawArgs, prevRef, localsUpdate) {
+	const location = currentSourceLocation();
 	let newValue;
 	try {
 		const { variables, temporary, transient } = readState();
 		newValue = evaluate(expr, variables, temporary, getLocals(), transient);
 	} catch (err) {
-		logMacroError(`computed ${rawArgs}`, err);
+		logMacroError(`computed ${rawArgs}`, err, location);
 		return;
 	}
 	if (!deepEqual(prevRef.current, newValue)) {
@@ -8688,7 +9957,7 @@ function computeAndApply(expr, name, isTemp, isLocal, getLocals, rawArgs, prevRe
 		if (isLocal) try {
 			localsUpdate(name, newValue);
 		} catch (err) {
-			logMacroError(`computed ${rawArgs}`, err);
+			logMacroError(`computed ${rawArgs}`, err, location);
 		}
 		else {
 			const state = useStoryStore.getState();
@@ -9012,10 +10281,11 @@ defineMacro({
 	render({ children = [] }, ctx) {
 		const code = ctx.collectText(children);
 		ctx.hooks.useLayoutEffect(() => {
+			const location = ctx.sourceLocation();
 			try {
 				ctx.mutate(code);
 			} catch (err) {
-				logMacroError("do", err);
+				logMacroError("do", err, location);
 			}
 		}, []);
 		return null;
@@ -9623,7 +10893,7 @@ function SaveManagerContent() {
 	};
 	const handleLoad = async (save) => {
 		try {
-			loadFromPayload(deserializePayload(save.payload), void 0, save.meta.playthroughId);
+			loadFromPayload(decodeSavePayload(save.payload), void 0, save.meta.playthroughId);
 			showStatus("Game loaded");
 			if (closeDialog) closeTimer.current = window.setTimeout(closeDialog, 500);
 			await refresh();
@@ -9963,7 +11233,12 @@ defineMacro({
 	}],
 	render(_props, ctx) {
 		ctx.hooks.useLayoutEffect(() => {
-			useStoryStore.getState().navigate(evaluatePassageName(ctx.args.passage, ctx.evaluate));
+			const location = ctx.sourceLocation();
+			try {
+				useStoryStore.getState().navigate(evaluatePassageName(ctx.args.passage, ctx.evaluate));
+			} catch (err) {
+				logMacroError("goto", err, location);
+			}
 		}, []);
 		return null;
 	}
@@ -10577,7 +11852,7 @@ defineMacro({
 });
 //#endregion
 //#region src/styles.css?inline
-var styles_default = "*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\nhtml {\n  font-size: 16px;\n  -webkit-text-size-adjust: 100%;\n}\n\nbody {\n  margin: 0;\n  padding: 0;\n  font-family: Georgia, 'Times New Roman', serif;\n  line-height: 1.75;\n  color: #e0e0e0;\n  background-color: #1a1a2e;\n  min-height: 100vh;\n}\n\ntw-storydata {\n  display: none !important;\n}\n\n#story {\n  max-width: 42em;\n  margin: 0 auto;\n  padding: 2em 1.5em;\n}\n\n/* Passage transitions */\n\n.passage-container {\n  position: relative;\n}\n\n.passage-container--crossfading {\n  display: grid;\n}\n\n.passage-container--crossfading > * {\n  grid-area: 1 / 1;\n}\n\n.passage {\n  animation: passage-fade-in var(--passage-in-duration, 0.3s) ease;\n}\n\n.passage[data-transition='none'] {\n  animation: none;\n}\n\n.passage-snapshot {\n  animation: passage-fade-out var(--passage-out-duration, 0.3s) ease forwards;\n  pointer-events: none;\n  user-select: none;\n}\n\n@keyframes passage-fade-in {\n  from {\n    opacity: 0;\n    transform: translateY(8px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes passage-fade-out {\n  from {\n    opacity: 1;\n    transform: translateY(0);\n  }\n  to {\n    opacity: 0;\n    transform: translateY(-8px);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .passage,\n  .passage-snapshot {\n    animation-duration: 0.01s !important;\n  }\n}\n\n.macro-button {\n  background: rgba(100, 181, 246, 0.15);\n  color: #64b5f6;\n  border: 1px solid rgba(100, 181, 246, 0.4);\n  border-radius: 4px;\n  padding: 0.25em 0.75em;\n  font: inherit;\n  font-size: 0.95em;\n  cursor: pointer;\n  transition:\n    background 0.2s,\n    border-color 0.2s;\n}\n\n.macro-button:hover {\n  background: rgba(100, 181, 246, 0.25);\n  border-color: #90caf9;\n}\n\n.macro-button:active {\n  background: rgba(100, 181, 246, 0.35);\n}\n\n.error {\n  color: #ef5350;\n  font-family: monospace;\n  padding: 1em;\n  border: 1px solid #ef5350;\n  border-radius: 4px;\n  background: rgba(239, 83, 80, 0.1);\n}\n\n.loading {\n  text-align: center;\n  padding: 2em;\n  opacity: 0.6;\n}\n\n/* Menu bar */\n\n.story-menubar {\n  position: sticky;\n  top: 0;\n  z-index: 100;\n  display: flex;\n  align-items: center;\n  gap: 0.5em;\n  padding: 0.5em 1.5em;\n  background: #16213e;\n  border-bottom: 1px solid rgba(255, 255, 255, 0.08);\n  font-family: system-ui, sans-serif;\n  font-size: 0.9em;\n}\n\n.story-title {\n  flex: 1;\n  font-weight: 600;\n  color: #e0e0e0;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.menubar-button {\n  background: transparent;\n  color: #9e9e9e;\n  border: 1px solid transparent;\n  padding: 0.35em 0.7em;\n  border-radius: 4px;\n  cursor: pointer;\n  font: inherit;\n  transition:\n    color 0.2s,\n    background 0.2s;\n}\n\n.menubar-button:hover {\n  color: #e0e0e0;\n  background: rgba(255, 255, 255, 0.08);\n}\n\n.menubar-button:disabled {\n  opacity: 0.4;\n  cursor: default;\n}\n\n.menubar-button:disabled:hover {\n  color: #9e9e9e;\n  background: transparent;\n}\n\n/* Generic dialog */\n\n.dialog-overlay {\n  position: fixed;\n  inset: 0;\n  z-index: 200;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: rgba(0, 0, 0, 0.6);\n}\n\n.dialog-panel {\n  background: #16213e;\n  border: 1px solid rgba(255, 255, 255, 0.1);\n  border-radius: 8px;\n  width: 90%;\n  max-width: 500px;\n  max-height: 80vh;\n  display: flex;\n  flex-direction: column;\n  color: #e0e0e0;\n  font-family: system-ui, sans-serif;\n  position: relative;\n}\n\n/* Focused programmatically when the dialog has no focusable content */\n.dialog-panel:focus {\n  outline: none;\n}\n\n.dialog-saves {\n  max-width: 550px;\n}\n\n.dialog-settings {\n  max-width: 400px;\n}\n\n.dialog-close {\n  position: absolute;\n  top: 0.75em;\n  right: 0.75em;\n  z-index: 1;\n  background: transparent;\n  border: none;\n  color: #9e9e9e;\n  font-size: 1.1em;\n  cursor: pointer;\n  padding: 0.25em;\n  line-height: 1;\n}\n\n.dialog-close:hover {\n  color: #e0e0e0;\n}\n\n.dialog-body {\n  overflow-y: auto;\n  flex: 1;\n  min-height: 0;\n}\n\n/* Settings controls */\n\n.settings-controls {\n  padding: 1em 1.25em;\n  display: flex;\n  flex-direction: column;\n  gap: 1em;\n}\n\n.settings-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 1em;\n}\n\n.settings-row select,\n.settings-row input[type='range'] {\n  accent-color: #64b5f6;\n}\n\n.settings-row select {\n  background: #1a1a2e;\n  color: #e0e0e0;\n  border: 1px solid rgba(255, 255, 255, 0.15);\n  border-radius: 4px;\n  padding: 0.3em 0.5em;\n  font: inherit;\n}\n\n.settings-row input[type='checkbox'] {\n  accent-color: #64b5f6;\n  width: 1.1em;\n  height: 1.1em;\n}\n\n/* Save manager */\n\n.save-manager {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-height: 0;\n}\n\n.saves-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 1em 1.25em;\n  padding-right: 3em;\n  border-bottom: 1px solid rgba(255, 255, 255, 0.08);\n  font-weight: 600;\n  flex-shrink: 0;\n}\n\n.saves-header-left {\n  display: flex;\n  align-items: center;\n  gap: 0.75em;\n}\n\n.saves-mode-toggle {\n  display: flex;\n  gap: 0;\n  border: 1px solid rgba(255, 255, 255, 0.15);\n  border-radius: 4px;\n  overflow: hidden;\n}\n\n.saves-mode-toggle button {\n  background: transparent;\n  color: #9e9e9e;\n  border: none;\n  padding: 0.3em 0.8em;\n  font: inherit;\n  font-size: 0.85em;\n  font-weight: 600;\n  cursor: pointer;\n  transition:\n    background 0.2s,\n    color 0.2s;\n}\n\n.saves-mode-toggle button.active {\n  background: rgba(100, 181, 246, 0.2);\n  color: #64b5f6;\n}\n\n.saves-mode-toggle button:hover:not(.active) {\n  color: #e0e0e0;\n}\n\n.saves-body {\n  padding: 0.75em 1.25em;\n  overflow-y: auto;\n  flex: 1;\n  min-height: 0;\n}\n\n.saves-empty {\n  text-align: center;\n  padding: 2em 1em;\n  opacity: 0.5;\n  font-size: 0.9em;\n}\n\n.saves-toolbar {\n  display: flex;\n  gap: 0.5em;\n  padding: 0.5em 1.25em;\n  border-bottom: 1px solid rgba(255, 255, 255, 0.08);\n  flex-shrink: 0;\n}\n\n.saves-toolbar-button {\n  background: rgba(255, 255, 255, 0.05);\n  color: #9e9e9e;\n  border: 1px solid rgba(255, 255, 255, 0.1);\n  border-radius: 4px;\n  padding: 0.3em 0.7em;\n  font: inherit;\n  font-size: 0.8em;\n  cursor: pointer;\n  transition:\n    background 0.2s,\n    color 0.2s;\n}\n\n.saves-toolbar-button:hover {\n  background: rgba(255, 255, 255, 0.1);\n  color: #e0e0e0;\n}\n\n.playthrough-group {\n  margin-bottom: 0.75em;\n}\n\n.playthrough-header {\n  display: flex;\n  align-items: center;\n  gap: 0.5em;\n  padding: 0.4em 0;\n  cursor: pointer;\n  user-select: none;\n  font-size: 0.85em;\n  color: #9e9e9e;\n  transition: color 0.2s;\n}\n\n.playthrough-header:hover {\n  color: #e0e0e0;\n}\n\n.playthrough-chevron {\n  display: inline-block;\n  font-size: 0.7em;\n  transition: transform 0.2s;\n}\n\n.playthrough-chevron.open {\n  transform: rotate(90deg);\n}\n\n.playthrough-label {\n  font-weight: 600;\n}\n\n.playthrough-date {\n  opacity: 0.6;\n  font-size: 0.9em;\n}\n\n.playthrough-saves {\n  display: flex;\n  flex-direction: column;\n  gap: 0.4em;\n  padding-left: 0.25em;\n}\n\n.save-slot {\n  display: flex;\n  align-items: center;\n  gap: 0.75em;\n  padding: 0.5em 0.6em;\n  background: rgba(255, 255, 255, 0.03);\n  border: 1px solid rgba(255, 255, 255, 0.06);\n  border-radius: 6px;\n  transition: background 0.15s;\n}\n\n.save-slot:hover {\n  background: rgba(255, 255, 255, 0.06);\n}\n\n.save-slot-info {\n  flex: 1;\n  min-width: 0;\n}\n\n.save-slot-title {\n  font-weight: 500;\n  font-size: 0.9em;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.save-slot-meta {\n  font-size: 0.75em;\n  color: #9e9e9e;\n  display: flex;\n  gap: 0.75em;\n}\n\n.save-slot-actions {\n  display: flex;\n  gap: 0.3em;\n  flex-shrink: 0;\n}\n\n.save-slot-action {\n  background: transparent;\n  color: #9e9e9e;\n  border: 1px solid transparent;\n  border-radius: 3px;\n  padding: 0.2em 0.5em;\n  font: inherit;\n  font-size: 0.75em;\n  cursor: pointer;\n  transition:\n    color 0.2s,\n    background 0.2s;\n  white-space: nowrap;\n}\n\n.save-slot-action:hover {\n  color: #e0e0e0;\n  background: rgba(255, 255, 255, 0.08);\n}\n\n.save-slot-action.primary {\n  color: #64b5f6;\n  border-color: rgba(100, 181, 246, 0.3);\n}\n\n.save-slot-action.primary:hover {\n  background: rgba(100, 181, 246, 0.15);\n}\n\n.save-slot-action.danger:hover {\n  color: #ef5350;\n  background: rgba(239, 83, 80, 0.1);\n}\n\n.save-slot-new {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0.5em;\n  margin-top: 0.25em;\n  border: 1px dashed rgba(255, 255, 255, 0.12);\n  border-radius: 6px;\n  color: #9e9e9e;\n  font: inherit;\n  font-size: 0.8em;\n  background: transparent;\n  cursor: pointer;\n  width: 100%;\n  transition:\n    color 0.2s,\n    border-color 0.2s,\n    background 0.2s;\n}\n\n.save-slot-new:hover {\n  color: #64b5f6;\n  border-color: rgba(100, 181, 246, 0.3);\n  background: rgba(100, 181, 246, 0.05);\n}\n\n.saves-status {\n  padding: 0.5em 1.25em;\n  font-size: 0.8em;\n  color: #81c784;\n  border-top: 1px solid rgba(255, 255, 255, 0.08);\n  flex-shrink: 0;\n  text-align: center;\n}\n\n.saves-status.error {\n  color: #ef5350;\n  border: none;\n  border-radius: 0;\n  padding: 0.5em 1.25em;\n  font-family: inherit;\n  background: transparent;\n}\n\n.save-rename-input {\n  background: #1a1a2e;\n  color: #e0e0e0;\n  border: 1px solid rgba(100, 181, 246, 0.4);\n  border-radius: 3px;\n  padding: 0.15em 0.4em;\n  font: inherit;\n  font-size: 0.9em;\n  width: 100%;\n}\n\n.save-rename-input:focus {\n  outline: none;\n  border-color: #64b5f6;\n}\n\n/* Macro: link */\n\n.macro-link {\n  color: #64b5f6;\n  text-decoration: none;\n  border-bottom: 1px solid rgba(100, 181, 246, 0.3);\n  transition:\n    color 0.2s,\n    border-color 0.2s;\n  cursor: pointer;\n}\n\n.macro-link:hover {\n  color: #90caf9;\n  border-bottom-color: #90caf9;\n}\n\n.macro-link:active {\n  color: #42a5f5;\n}\n\n/* Macro: form inputs */\n\n.macro-textbox,\n.macro-numberbox,\n.macro-textarea {\n  background: #1a1a2e;\n  color: #e0e0e0;\n  border: 1px solid rgba(255, 255, 255, 0.15);\n  border-radius: 4px;\n  padding: 0.3em 0.5em;\n  font: inherit;\n}\n\n.macro-textbox:focus,\n.macro-numberbox:focus,\n.macro-textarea:focus {\n  outline: none;\n  border-color: #64b5f6;\n}\n\n.macro-textarea {\n  min-height: 3em;\n  resize: vertical;\n}\n\n.macro-checkbox,\n.macro-radiobutton {\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  gap: 0.3em;\n}\n\n.macro-checkbox input,\n.macro-radiobutton input {\n  accent-color: #64b5f6;\n}\n\n/* Macro: listbox */\n\n.macro-listbox {\n  background: #1a1a2e;\n  color: #e0e0e0;\n  border: 1px solid rgba(255, 255, 255, 0.15);\n  border-radius: 4px;\n  padding: 0.3em 0.5em;\n  font: inherit;\n}\n\n/* Macro: cycle */\n\n.macro-cycle {\n  background: rgba(100, 181, 246, 0.15);\n  color: #64b5f6;\n  border: 1px solid rgba(100, 181, 246, 0.4);\n  border-radius: 4px;\n  padding: 0.25em 0.75em;\n  font: inherit;\n  cursor: pointer;\n  transition:\n    background 0.2s,\n    border-color 0.2s;\n}\n\n.macro-cycle:hover {\n  background: rgba(100, 181, 246, 0.25);\n  border-color: #90caf9;\n}\n\n/* Macro: meter */\n\n.macro-meter {\n  position: relative;\n  width: 100%;\n  height: 1.4em;\n  background: #2a2a3e;\n  border-radius: 0.3em;\n  overflow: hidden;\n  border: 1px solid #444;\n}\n\n.macro-meter-fill {\n  height: 100%;\n  background: #64b5f6;\n  transition: width 0.3s ease;\n}\n\n.macro-meter-label {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 0.85em;\n  color: #e0e0e0;\n  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);\n  pointer-events: none;\n}\n\n/* Markdown wrapper — invisible to layout */\n\n.md {\n  display: contents;\n}\n\n/* Markdown block elements inside passages */\n\n.passage p {\n  margin: 0.6em 0;\n}\n\n.passage p:first-child {\n  margin-top: 0;\n}\n\n.passage p:last-child {\n  margin-bottom: 0;\n}\n\n.passage h1,\n.passage h2,\n.passage h3,\n.passage h4,\n.passage h5,\n.passage h6 {\n  margin: 1em 0 0.4em;\n  line-height: 1.3;\n  color: #f0f0f0;\n}\n\n.passage h1 {\n  font-size: 1.8em;\n}\n.passage h2 {\n  font-size: 1.5em;\n}\n.passage h3 {\n  font-size: 1.25em;\n}\n.passage h4 {\n  font-size: 1.1em;\n}\n.passage h5 {\n  font-size: 1em;\n}\n.passage h6 {\n  font-size: 0.9em;\n  opacity: 0.8;\n}\n\n.passage code {\n  font-family: 'Fira Code', 'Cascadia Code', 'Consolas', monospace;\n  font-size: 0.9em;\n  background: rgba(255, 255, 255, 0.08);\n  padding: 0.15em 0.35em;\n  border-radius: 3px;\n}\n\n.passage pre {\n  background: rgba(0, 0, 0, 0.3);\n  border: 1px solid rgba(255, 255, 255, 0.08);\n  border-radius: 6px;\n  padding: 1em;\n  overflow-x: auto;\n  margin: 0.8em 0;\n}\n\n.passage pre code {\n  background: none;\n  padding: 0;\n  border-radius: 0;\n  font-size: 0.85em;\n}\n\n.passage blockquote {\n  border-left: 3px solid rgba(100, 181, 246, 0.5);\n  margin: 0.8em 0;\n  padding: 0.4em 1em;\n  color: #b0b0b0;\n}\n\n.passage blockquote p {\n  margin: 0.3em 0;\n}\n\n.passage ul,\n.passage ol {\n  margin: 0.6em 0;\n  padding-left: 1.8em;\n}\n\n.passage li {\n  margin: 0.2em 0;\n}\n\n.passage hr {\n  border: none;\n  border-top: 1px solid rgba(255, 255, 255, 0.12);\n  margin: 1.2em 0;\n}\n\n.passage table {\n  border-collapse: collapse;\n  width: 100%;\n  margin: 0.8em 0;\n}\n\n.passage th,\n.passage td {\n  border: 1px solid rgba(255, 255, 255, 0.12);\n  padding: 0.5em 0.75em;\n  text-align: left;\n}\n\n.passage th {\n  background: rgba(255, 255, 255, 0.06);\n  font-weight: 600;\n}\n\n.passage tr:nth-child(even) {\n  background: rgba(255, 255, 255, 0.02);\n}\n\n.passage del {\n  opacity: 0.5;\n}\n\n.passage strong {\n  color: #f0f0f0;\n}\n\n/* Macro: type (typewriter) */\n\n.macro-type-cursor::after {\n  content: '\\2588';\n  animation: type-blink 0.7s step-end infinite;\n  color: #64b5f6;\n}\n\n.macro-type-done .macro-type-cursor::after {\n  display: none;\n}\n\n@keyframes type-blink {\n  50% {\n    opacity: 0;\n  }\n}\n";
+var styles_default = "*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\nhtml {\n  font-size: 16px;\n  -webkit-text-size-adjust: 100%;\n}\n\nbody {\n  margin: 0;\n  padding: 0;\n  font-family: Georgia, 'Times New Roman', serif;\n  line-height: 1.75;\n  color: #e0e0e0;\n  background-color: #1a1a2e;\n  min-height: 100vh;\n}\n\ntw-storydata {\n  display: none !important;\n}\n\n#story {\n  max-width: 42em;\n  margin: 0 auto;\n  padding: 2em 1.5em;\n}\n\n/* Passage transitions */\n\n.passage-container {\n  position: relative;\n}\n\n.passage-container--crossfading {\n  display: grid;\n}\n\n.passage-container--crossfading > * {\n  grid-area: 1 / 1;\n}\n\n.passage {\n  animation: passage-fade-in var(--passage-in-duration, 0.3s) ease;\n}\n\n.passage[data-transition='none'] {\n  animation: none;\n}\n\n.passage-snapshot {\n  animation: passage-fade-out var(--passage-out-duration, 0.3s) ease forwards;\n  pointer-events: none;\n  user-select: none;\n}\n\n@keyframes passage-fade-in {\n  from {\n    opacity: 0;\n    transform: translateY(8px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes passage-fade-out {\n  from {\n    opacity: 1;\n    transform: translateY(0);\n  }\n  to {\n    opacity: 0;\n    transform: translateY(-8px);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .passage,\n  .passage-snapshot {\n    animation-duration: 0.01s !important;\n  }\n}\n\n.macro-button {\n  background: rgba(100, 181, 246, 0.15);\n  color: #64b5f6;\n  border: 1px solid rgba(100, 181, 246, 0.4);\n  border-radius: 4px;\n  padding: 0.25em 0.75em;\n  font: inherit;\n  font-size: 0.95em;\n  cursor: pointer;\n  transition:\n    background 0.2s,\n    border-color 0.2s;\n}\n\n.macro-button:hover {\n  background: rgba(100, 181, 246, 0.25);\n  border-color: #90caf9;\n}\n\n.macro-button:active {\n  background: rgba(100, 181, 246, 0.35);\n}\n\n.error {\n  color: #ef5350;\n  font-family: monospace;\n  padding: 1em;\n  border: 1px solid #ef5350;\n  border-radius: 4px;\n  background: rgba(239, 83, 80, 0.1);\n}\n\n/* Runtime errors shown on the page (see src/components/RuntimeErrors.tsx) */\n.spindle-error-banners {\n  position: fixed;\n  top: 0.75em;\n  left: 50%;\n  z-index: 300;\n  display: flex;\n  flex-direction: column;\n  gap: 0.5em;\n  width: min(42em, calc(100% - 1.5em));\n  transform: translateX(-50%);\n}\n\n.spindle-error-banner {\n  position: relative;\n  padding: 0.75em 2.75em 0.75em 1em;\n  border: 1px solid #ef5350;\n  border-radius: 4px;\n  background: #2b1a1e;\n  color: #ffcdd2;\n  font-size: 0.9em;\n  line-height: 1.5;\n  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);\n}\n\n.spindle-error-banner-message {\n  font-family: monospace;\n  color: #ef9a9a;\n}\n\n.spindle-error-banner-dismiss {\n  position: absolute;\n  top: 0.5em;\n  right: 0.5em;\n  background: transparent;\n  border: none;\n  color: inherit;\n  font-size: 1em;\n  cursor: pointer;\n}\n\n.spindle-error-banner-dismiss:hover {\n  color: #fff;\n}\n\n.loading {\n  text-align: center;\n  padding: 2em;\n  opacity: 0.6;\n}\n\n/* Menu bar */\n\n.story-menubar {\n  position: sticky;\n  top: 0;\n  z-index: 100;\n  display: flex;\n  align-items: center;\n  gap: 0.5em;\n  padding: 0.5em 1.5em;\n  background: #16213e;\n  border-bottom: 1px solid rgba(255, 255, 255, 0.08);\n  font-family: system-ui, sans-serif;\n  font-size: 0.9em;\n}\n\n.story-title {\n  flex: 1;\n  font-weight: 600;\n  color: #e0e0e0;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.menubar-button {\n  background: transparent;\n  color: #9e9e9e;\n  border: 1px solid transparent;\n  padding: 0.35em 0.7em;\n  border-radius: 4px;\n  cursor: pointer;\n  font: inherit;\n  transition:\n    color 0.2s,\n    background 0.2s;\n}\n\n.menubar-button:hover {\n  color: #e0e0e0;\n  background: rgba(255, 255, 255, 0.08);\n}\n\n.menubar-button:disabled {\n  opacity: 0.4;\n  cursor: default;\n}\n\n.menubar-button:disabled:hover {\n  color: #9e9e9e;\n  background: transparent;\n}\n\n/* Generic dialog */\n\n.dialog-overlay {\n  position: fixed;\n  inset: 0;\n  z-index: 200;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: rgba(0, 0, 0, 0.6);\n}\n\n.dialog-panel {\n  background: #16213e;\n  border: 1px solid rgba(255, 255, 255, 0.1);\n  border-radius: 8px;\n  width: 90%;\n  max-width: 500px;\n  max-height: 80vh;\n  display: flex;\n  flex-direction: column;\n  color: #e0e0e0;\n  font-family: system-ui, sans-serif;\n  position: relative;\n}\n\n/* Focused programmatically when the dialog has no focusable content */\n.dialog-panel:focus {\n  outline: none;\n}\n\n.dialog-saves {\n  max-width: 550px;\n}\n\n.dialog-settings {\n  max-width: 400px;\n}\n\n.dialog-close {\n  position: absolute;\n  top: 0.75em;\n  right: 0.75em;\n  z-index: 1;\n  background: transparent;\n  border: none;\n  color: #9e9e9e;\n  font-size: 1.1em;\n  cursor: pointer;\n  padding: 0.25em;\n  line-height: 1;\n}\n\n.dialog-close:hover {\n  color: #e0e0e0;\n}\n\n.dialog-body {\n  overflow-y: auto;\n  flex: 1;\n  min-height: 0;\n}\n\n/* Settings controls */\n\n.settings-controls {\n  padding: 1em 1.25em;\n  display: flex;\n  flex-direction: column;\n  gap: 1em;\n}\n\n.settings-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 1em;\n}\n\n.settings-row select,\n.settings-row input[type='range'] {\n  accent-color: #64b5f6;\n}\n\n.settings-row select {\n  background: #1a1a2e;\n  color: #e0e0e0;\n  border: 1px solid rgba(255, 255, 255, 0.15);\n  border-radius: 4px;\n  padding: 0.3em 0.5em;\n  font: inherit;\n}\n\n.settings-row input[type='checkbox'] {\n  accent-color: #64b5f6;\n  width: 1.1em;\n  height: 1.1em;\n}\n\n/* Save manager */\n\n.save-manager {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-height: 0;\n}\n\n.saves-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 1em 1.25em;\n  padding-right: 3em;\n  border-bottom: 1px solid rgba(255, 255, 255, 0.08);\n  font-weight: 600;\n  flex-shrink: 0;\n}\n\n.saves-header-left {\n  display: flex;\n  align-items: center;\n  gap: 0.75em;\n}\n\n.saves-mode-toggle {\n  display: flex;\n  gap: 0;\n  border: 1px solid rgba(255, 255, 255, 0.15);\n  border-radius: 4px;\n  overflow: hidden;\n}\n\n.saves-mode-toggle button {\n  background: transparent;\n  color: #9e9e9e;\n  border: none;\n  padding: 0.3em 0.8em;\n  font: inherit;\n  font-size: 0.85em;\n  font-weight: 600;\n  cursor: pointer;\n  transition:\n    background 0.2s,\n    color 0.2s;\n}\n\n.saves-mode-toggle button.active {\n  background: rgba(100, 181, 246, 0.2);\n  color: #64b5f6;\n}\n\n.saves-mode-toggle button:hover:not(.active) {\n  color: #e0e0e0;\n}\n\n.saves-body {\n  padding: 0.75em 1.25em;\n  overflow-y: auto;\n  flex: 1;\n  min-height: 0;\n}\n\n.saves-empty {\n  text-align: center;\n  padding: 2em 1em;\n  opacity: 0.5;\n  font-size: 0.9em;\n}\n\n.saves-toolbar {\n  display: flex;\n  gap: 0.5em;\n  padding: 0.5em 1.25em;\n  border-bottom: 1px solid rgba(255, 255, 255, 0.08);\n  flex-shrink: 0;\n}\n\n.saves-toolbar-button {\n  background: rgba(255, 255, 255, 0.05);\n  color: #9e9e9e;\n  border: 1px solid rgba(255, 255, 255, 0.1);\n  border-radius: 4px;\n  padding: 0.3em 0.7em;\n  font: inherit;\n  font-size: 0.8em;\n  cursor: pointer;\n  transition:\n    background 0.2s,\n    color 0.2s;\n}\n\n.saves-toolbar-button:hover {\n  background: rgba(255, 255, 255, 0.1);\n  color: #e0e0e0;\n}\n\n.playthrough-group {\n  margin-bottom: 0.75em;\n}\n\n.playthrough-header {\n  display: flex;\n  align-items: center;\n  gap: 0.5em;\n  padding: 0.4em 0;\n  cursor: pointer;\n  user-select: none;\n  font-size: 0.85em;\n  color: #9e9e9e;\n  transition: color 0.2s;\n}\n\n.playthrough-header:hover {\n  color: #e0e0e0;\n}\n\n.playthrough-chevron {\n  display: inline-block;\n  font-size: 0.7em;\n  transition: transform 0.2s;\n}\n\n.playthrough-chevron.open {\n  transform: rotate(90deg);\n}\n\n.playthrough-label {\n  font-weight: 600;\n}\n\n.playthrough-date {\n  opacity: 0.6;\n  font-size: 0.9em;\n}\n\n.playthrough-saves {\n  display: flex;\n  flex-direction: column;\n  gap: 0.4em;\n  padding-left: 0.25em;\n}\n\n.save-slot {\n  display: flex;\n  align-items: center;\n  gap: 0.75em;\n  padding: 0.5em 0.6em;\n  background: rgba(255, 255, 255, 0.03);\n  border: 1px solid rgba(255, 255, 255, 0.06);\n  border-radius: 6px;\n  transition: background 0.15s;\n}\n\n.save-slot:hover {\n  background: rgba(255, 255, 255, 0.06);\n}\n\n.save-slot-info {\n  flex: 1;\n  min-width: 0;\n}\n\n.save-slot-title {\n  font-weight: 500;\n  font-size: 0.9em;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.save-slot-meta {\n  font-size: 0.75em;\n  color: #9e9e9e;\n  display: flex;\n  gap: 0.75em;\n}\n\n.save-slot-actions {\n  display: flex;\n  gap: 0.3em;\n  flex-shrink: 0;\n}\n\n.save-slot-action {\n  background: transparent;\n  color: #9e9e9e;\n  border: 1px solid transparent;\n  border-radius: 3px;\n  padding: 0.2em 0.5em;\n  font: inherit;\n  font-size: 0.75em;\n  cursor: pointer;\n  transition:\n    color 0.2s,\n    background 0.2s;\n  white-space: nowrap;\n}\n\n.save-slot-action:hover {\n  color: #e0e0e0;\n  background: rgba(255, 255, 255, 0.08);\n}\n\n.save-slot-action.primary {\n  color: #64b5f6;\n  border-color: rgba(100, 181, 246, 0.3);\n}\n\n.save-slot-action.primary:hover {\n  background: rgba(100, 181, 246, 0.15);\n}\n\n.save-slot-action.danger:hover {\n  color: #ef5350;\n  background: rgba(239, 83, 80, 0.1);\n}\n\n.save-slot-new {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0.5em;\n  margin-top: 0.25em;\n  border: 1px dashed rgba(255, 255, 255, 0.12);\n  border-radius: 6px;\n  color: #9e9e9e;\n  font: inherit;\n  font-size: 0.8em;\n  background: transparent;\n  cursor: pointer;\n  width: 100%;\n  transition:\n    color 0.2s,\n    border-color 0.2s,\n    background 0.2s;\n}\n\n.save-slot-new:hover {\n  color: #64b5f6;\n  border-color: rgba(100, 181, 246, 0.3);\n  background: rgba(100, 181, 246, 0.05);\n}\n\n.saves-status {\n  padding: 0.5em 1.25em;\n  font-size: 0.8em;\n  color: #81c784;\n  border-top: 1px solid rgba(255, 255, 255, 0.08);\n  flex-shrink: 0;\n  text-align: center;\n}\n\n.saves-status.error {\n  color: #ef5350;\n  border: none;\n  border-radius: 0;\n  padding: 0.5em 1.25em;\n  font-family: inherit;\n  background: transparent;\n}\n\n.save-rename-input {\n  background: #1a1a2e;\n  color: #e0e0e0;\n  border: 1px solid rgba(100, 181, 246, 0.4);\n  border-radius: 3px;\n  padding: 0.15em 0.4em;\n  font: inherit;\n  font-size: 0.9em;\n  width: 100%;\n}\n\n.save-rename-input:focus {\n  outline: none;\n  border-color: #64b5f6;\n}\n\n/* Macro: link */\n\n.macro-link {\n  color: #64b5f6;\n  text-decoration: none;\n  border-bottom: 1px solid rgba(100, 181, 246, 0.3);\n  transition:\n    color 0.2s,\n    border-color 0.2s;\n  cursor: pointer;\n}\n\n.macro-link:hover {\n  color: #90caf9;\n  border-bottom-color: #90caf9;\n}\n\n.macro-link:active {\n  color: #42a5f5;\n}\n\n/* Macro: form inputs */\n\n.macro-textbox,\n.macro-numberbox,\n.macro-textarea {\n  background: #1a1a2e;\n  color: #e0e0e0;\n  border: 1px solid rgba(255, 255, 255, 0.15);\n  border-radius: 4px;\n  padding: 0.3em 0.5em;\n  font: inherit;\n}\n\n.macro-textbox:focus,\n.macro-numberbox:focus,\n.macro-textarea:focus {\n  outline: none;\n  border-color: #64b5f6;\n}\n\n.macro-textarea {\n  min-height: 3em;\n  resize: vertical;\n}\n\n.macro-checkbox,\n.macro-radiobutton {\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  gap: 0.3em;\n}\n\n.macro-checkbox input,\n.macro-radiobutton input {\n  accent-color: #64b5f6;\n}\n\n/* Macro: listbox */\n\n.macro-listbox {\n  background: #1a1a2e;\n  color: #e0e0e0;\n  border: 1px solid rgba(255, 255, 255, 0.15);\n  border-radius: 4px;\n  padding: 0.3em 0.5em;\n  font: inherit;\n}\n\n/* Macro: cycle */\n\n.macro-cycle {\n  background: rgba(100, 181, 246, 0.15);\n  color: #64b5f6;\n  border: 1px solid rgba(100, 181, 246, 0.4);\n  border-radius: 4px;\n  padding: 0.25em 0.75em;\n  font: inherit;\n  cursor: pointer;\n  transition:\n    background 0.2s,\n    border-color 0.2s;\n}\n\n.macro-cycle:hover {\n  background: rgba(100, 181, 246, 0.25);\n  border-color: #90caf9;\n}\n\n/* Macro: meter */\n\n.macro-meter {\n  position: relative;\n  width: 100%;\n  height: 1.4em;\n  background: #2a2a3e;\n  border-radius: 0.3em;\n  overflow: hidden;\n  border: 1px solid #444;\n}\n\n.macro-meter-fill {\n  height: 100%;\n  background: #64b5f6;\n  transition: width 0.3s ease;\n}\n\n.macro-meter-label {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 0.85em;\n  color: #e0e0e0;\n  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);\n  pointer-events: none;\n}\n\n/* Markdown wrapper — invisible to layout */\n\n.md {\n  display: contents;\n}\n\n/* Markdown block elements inside passages */\n\n.passage p {\n  margin: 0.6em 0;\n}\n\n.passage p:first-child {\n  margin-top: 0;\n}\n\n.passage p:last-child {\n  margin-bottom: 0;\n}\n\n.passage h1,\n.passage h2,\n.passage h3,\n.passage h4,\n.passage h5,\n.passage h6 {\n  margin: 1em 0 0.4em;\n  line-height: 1.3;\n  color: #f0f0f0;\n}\n\n.passage h1 {\n  font-size: 1.8em;\n}\n.passage h2 {\n  font-size: 1.5em;\n}\n.passage h3 {\n  font-size: 1.25em;\n}\n.passage h4 {\n  font-size: 1.1em;\n}\n.passage h5 {\n  font-size: 1em;\n}\n.passage h6 {\n  font-size: 0.9em;\n  opacity: 0.8;\n}\n\n.passage code {\n  font-family: 'Fira Code', 'Cascadia Code', 'Consolas', monospace;\n  font-size: 0.9em;\n  background: rgba(255, 255, 255, 0.08);\n  padding: 0.15em 0.35em;\n  border-radius: 3px;\n}\n\n.passage pre {\n  background: rgba(0, 0, 0, 0.3);\n  border: 1px solid rgba(255, 255, 255, 0.08);\n  border-radius: 6px;\n  padding: 1em;\n  overflow-x: auto;\n  margin: 0.8em 0;\n}\n\n.passage pre code {\n  background: none;\n  padding: 0;\n  border-radius: 0;\n  font-size: 0.85em;\n}\n\n.passage blockquote {\n  border-left: 3px solid rgba(100, 181, 246, 0.5);\n  margin: 0.8em 0;\n  padding: 0.4em 1em;\n  color: #b0b0b0;\n}\n\n.passage blockquote p {\n  margin: 0.3em 0;\n}\n\n.passage ul,\n.passage ol {\n  margin: 0.6em 0;\n  padding-left: 1.8em;\n}\n\n.passage li {\n  margin: 0.2em 0;\n}\n\n.passage hr {\n  border: none;\n  border-top: 1px solid rgba(255, 255, 255, 0.12);\n  margin: 1.2em 0;\n}\n\n.passage table {\n  border-collapse: collapse;\n  width: 100%;\n  margin: 0.8em 0;\n}\n\n.passage th,\n.passage td {\n  border: 1px solid rgba(255, 255, 255, 0.12);\n  padding: 0.5em 0.75em;\n  text-align: left;\n}\n\n.passage th {\n  background: rgba(255, 255, 255, 0.06);\n  font-weight: 600;\n}\n\n.passage tr:nth-child(even) {\n  background: rgba(255, 255, 255, 0.02);\n}\n\n.passage del {\n  opacity: 0.5;\n}\n\n.passage strong {\n  color: #f0f0f0;\n}\n\n/* Macro: type (typewriter) */\n\n.macro-type-cursor::after {\n  content: '\\2588';\n  animation: type-blink 0.7s step-end infinite;\n  color: #64b5f6;\n}\n\n.macro-type-done .macro-type-cursor::after {\n  display: none;\n}\n\n@keyframes type-blink {\n  50% {\n    opacity: 0;\n  }\n}\n";
 //#endregion
 //#region src/index.tsx
 function renderErrors(root, errors) {