@rohal12/spindle 0.59.6 → 0.59.8

package/dist/pkg/headless.js

@@ -10096,18 +10096,18 @@ function historyQueries(visitCounts, renderCounts) {
 	};
 }
 var cachedFns = null;
-var cachedVisitCounts = null;
-var cachedRenderCounts = null;
+/**
+* The functions compiled code calls. The history queries read the counters
+* when called, not when the functions were built: mutation code that
+* navigates (`Story.goto()`) goes on with the counters of the new state,
+* as the Story API does.
+*/
 function buildExpressionFns() {
-	const { visitCounts, renderCounts } = useStoryStore.getState();
-	if (cachedFns && cachedVisitCounts === visitCounts && cachedRenderCounts === renderCounts) return cachedFns;
-	cachedFns = {
-		...historyQueries(() => visitCounts, () => renderCounts),
+	cachedFns ??= {
+		...historyQueries(() => useStoryStore.getState().visitCounts, () => useStoryStore.getState().renderCounts),
 		random,
 		randomInt
 	};
-	cachedVisitCounts = visitCounts;
-	cachedRenderCounts = renderCounts;
 	return cachedFns;
 }
 /**
@@ -12575,10 +12575,18 @@ var defineData = (target, key, value) => {
 	});
 };
 /**
+* A reducer extracts string keys, so devalue never sees the symbol keys of
+* the original object: refuse them here, as it does for a plain object.
+*/
+function refuseSymbolKeys(value) {
+	if (Object.getOwnPropertySymbols(value).length > 0) throw new TypeError("spindle: Cannot save an object with symbol keys");
+}
+/**
 * 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) {
+	refuseSymbolKeys(value);
 	const data = {};
 	if (value instanceof Error) {
 		for (const key of ERROR_HIDDEN_KEYS$1) if (hasOwn(value, key)) defineData(data, key, value[key]);
@@ -12605,6 +12613,7 @@ function reducers() {
 		if (!isObject(v) || Object.getPrototypeOf(v) !== Object.prototype) return false;
 		const keys = Object.keys(v);
 		if (!keys.some(isEscapedOneCharKey)) return false;
+		refuseSymbolKeys(v);
 		if (keys.includes("__proto__")) throw new TypeError("spindle: Cannot save a property named \"__proto__\"");
 		return keys.flatMap((k) => [k, v[k]]);
 	};
@@ -13167,24 +13176,28 @@ function createIDBBackend() {
 }
 var _backend = null;
 async function detectBackend() {
-	if (typeof indexedDB !== "undefined") try {
-		await new Promise((resolve, reject) => {
-			const req = indexedDB.open("__spindle_probe__", 1);
-			req.onsuccess = () => {
-				req.result.close();
-				indexedDB.deleteDatabase("__spindle_probe__");
-				resolve();
-			};
-			req.onerror = () => reject(req.error);
-		});
-		return createIDBBackend();
+	try {
+		if (typeof indexedDB !== "undefined") {
+			await new Promise((resolve, reject) => {
+				const req = indexedDB.open("__spindle_probe__", 1);
+				req.onsuccess = () => {
+					req.result.close();
+					indexedDB.deleteDatabase("__spindle_probe__");
+					resolve();
+				};
+				req.onerror = () => reject(req.error);
+			});
+			return createIDBBackend();
+		}
 	} catch {}
-	if (typeof localStorage !== "undefined") try {
-		const probeKey = "__spindle_probe__";
-		localStorage.setItem(probeKey, "1");
-		const val = localStorage.getItem(probeKey);
-		localStorage.removeItem(probeKey);
-		if (val === "1") return createLocalStorageBackend();
+	try {
+		if (typeof localStorage !== "undefined") {
+			const probeKey = "__spindle_probe__";
+			localStorage.setItem(probeKey, "1");
+			const val = localStorage.getItem(probeKey);
+			localStorage.removeItem(probeKey);
+			if (val === "1") return createLocalStorageBackend();
+		}
 	} catch {}
 	return createMemoryBackend();
 }
@@ -13496,6 +13509,13 @@ function strictPairs(ab = /* @__PURE__ */ new Map(), ba = /* @__PURE__ */ new Ma
 	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
@@ -13765,13 +13785,14 @@ function underChange(path, keys) {
 }
 /**
 * The segment standing for the entry `index` of a Map or Set in a path, or
-* for the `cause` or `errors` of an Error ('c', 'e').
+* for the `cause` or `errors` of an Error ('c', 'e'), or for the buffer a
+* typed array or DataView views ('b').
 */
 var entryKey = (kind, index) => `\0${kind}${index}`;
 var isEntryKey = (segment) => segment.startsWith("\0");
 /**
-* What a Map, Set or Error holds in place of properties (keys and values,
-* members, `cause` and `errors`), each with the segment standing for it in
+* What a Map, Set, Error or view holds in place of properties (keys and
+* values, members, `cause` and `errors`, the buffer), each with the segment standing for it in
 * a path (see entryKey); undefined for any other value.
 */
 function entryChildren(value) {
@@ -13787,7 +13808,8 @@ function entryChildren(value) {
 		for (const member of value) children.push([entryKey("s", index++), member]);
 	} else if (value instanceof Error) {
 		for (const key of ["cause", "errors"]) if (hasOwn(value, key)) children.push([entryKey(key === "cause" ? "c" : "e", 0), value[key]]);
-	} else return;
+	} else if (ArrayBuffer.isView(value)) children.push([entryKey("b", 0), value.buffer]);
+	else return;
 	return children;
 }
 /**
@@ -14245,7 +14267,9 @@ function storedRecord(meta, payload) {
 	};
 }
 var createSave = queued(createSaveNow);
-async function createSaveNow(ifid, playthroughId, payload, custom = {}) {
+async function createSaveNow(ifid, playthroughPromise, payload, custom = {}) {
+	const playthroughId = await playthroughPromise;
+	if (!playthroughId) throw new Error("No playthrough");
 	const now = (/* @__PURE__ */ new Date()).toISOString();
 	const record = storedRecord({
 		id: randomUUID(),
@@ -14261,6 +14285,10 @@ async function createSaveNow(ifid, playthroughId, payload, custom = {}) {
 	return record;
 }
 /**
+* A playthrough passed as a promise (see resolvePlaythroughId) is awaited
+* inside the operation, so the call takes its place in the order of
+* operations when it is made.
+*
 * Replace the payload of an existing save, keeping its ID and `createdAt`.
 * Pass the current `playthroughId` when the new payload comes from the
 * running game: the save then holds that playthrough's state, so it is
@@ -14276,7 +14304,8 @@ async function createSaveNow(ifid, playthroughId, payload, custom = {}) {
 * before, so slot keys and metadata not passed again are kept.
 */
 var overwriteSave = queued(overwriteSaveNow);
-async function overwriteSaveNow(saveId, payload, custom, playthroughId) {
+async function overwriteSaveNow(saveId, payload, custom, playthroughPromise) {
+	const playthroughId = await playthroughPromise;
 	const backend = await getBackend();
 	const existing = await backend.getSave(saveId);
 	if (!existing) return void 0;
@@ -14438,7 +14467,7 @@ function toSaveInfo(record, slot) {
 * (settled by operations issued before this call), so the save takes its
 * place in the order of operations when it is called.
 */
-function quickSave(ifid, playthroughId, payload, slot, custom) {
+function quickSave$1(ifid, playthroughId, payload, slot, custom) {
 	return inOrder(async () => {
 		const ptId = await playthroughId;
 		const existingId = await slotSaveId(ifid, slot);
@@ -14524,12 +14553,18 @@ var SESSION_KEY_PREFIX = "spindle.session.";
 * 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.
+*
+* A storage that is unavailable or full is returned, not thrown: the session
+* keeps its previous copy then too, but the story can go on, so the caller
+* decides how to tell the player.
 */
 function saveSession(ifid, payload) {
 	const text = JSON.stringify(encodePayload(payload));
 	try {
 		sessionStorage.setItem(`${SESSION_KEY_PREFIX}${ifid}`, text);
-	} catch {}
+	} catch (error) {
+		return { error };
+	}
 }
 /**
 * The live payload of the stored session, if there is one that loads. A
@@ -14646,14 +14681,14 @@ var clearAllData = queued(clearAllDataNow);
 async function clearAllDataNow() {
 	await (await getBackend()).destroy();
 	resetBackend();
-	if (typeof sessionStorage !== "undefined") {
+	try {
 		const toRemove = [];
 		for (let i = 0; i < sessionStorage.length; i++) {
 			const key = sessionStorage.key(i);
 			if (key?.startsWith("spindle.session.")) toRemove.push(key);
 		}
 		for (const key of toRemove) sessionStorage.removeItem(key);
-	}
+	} catch {}
 }
 /**
 * Delete a playthrough with its saves, emptying the slots that held them.
@@ -14983,9 +15018,18 @@ function relink(draft, work, changes) {
 function cloneNamespaces(from) {
 	const seen = /* @__PURE__ */ new Map();
 	return {
-		variables: deepClone(from.variables, { seen }),
-		temporary: deepClone(from.temporary, { seen }),
-		transient: deepClone(from.transient, { seen })
+		variables: deepClone(from.variables, {
+			keepUnregistered: true,
+			seen
+		}),
+		temporary: deepClone(from.temporary, {
+			keepUnregistered: true,
+			seen
+		}),
+		transient: deepClone(from.transient, {
+			keepUnregistered: true,
+			seen
+		})
 	};
 }
 /** The three variable namespaces of `state`, as an object to walk. */
@@ -15550,7 +15594,7 @@ var sessionMoments = [];
 */
 function persistSession(get) {
 	const { storyData, currentPassage, variables, history, historyIndex, visitCounts, renderCounts } = get();
-	if (!storyData) return;
+	if (!storyData) return void 0;
 	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;
@@ -15558,7 +15602,7 @@ function persistSession(get) {
 	} else forEachRecorded(history.length, (vars, i) => {
 		if (i >= sessionMoments.length) sessionMoments[i] = savedMoment(history[i], vars);
 	});
-	saveSession(storyData.ifid, {
+	return saveSession(storyData.ifid, {
 		passage: currentPassage,
 		variables,
 		history: sessionMoments,
@@ -15584,7 +15628,8 @@ var NAVIGATION_ERROR_CONTEXT = "The story could not go to another passage:";
 function persistSessionThen(get, after) {
 	let failure;
 	try {
-		persistSession(get);
+		const storageFailure = persistSession(get);
+		if (storageFailure) showRuntimeError(SESSION_ERROR_CONTEXT, storageFailure.error);
 	} catch (error) {
 		failure = { error };
 		showRuntimeError(SESSION_ERROR_CONTEXT, error);
@@ -16278,7 +16323,7 @@ var useStoryStore = create()(storyStore((set, get) => ({
 			set((state) => {
 				state.saveError = null;
 			});
-			await quickSave(storyData.ifid, playthrough, payload, slot, custom);
+			await quickSave$1(storyData.ifid, playthrough, payload, slot, custom);
 			recordKnownSave(set, slot, true);
 		}), "spindle: failed to save", (err) => set((state) => {
 			state.saveError = errorMessage(err, "Failed to save");
@@ -16491,8 +16536,19 @@ var FOCUSABLE = [
 	"[contenteditable=\"true\"]",
 	"[tabindex]:not([tabindex=\"-1\"])"
 ].join(",");
+/**
+* Whether CSS leaves `el` in the tab sequence: not `visibility: hidden`
+* (inherited, so the computed value covers ancestors) and not inside a
+* `display: none` element.
+*/
+function isRendered(el) {
+	const { visibility } = getComputedStyle(el);
+	if (visibility === "hidden" || visibility === "collapse") return false;
+	for (let e = el; e; e = e.parentElement) if (getComputedStyle(e).display === "none") return false;
+	return true;
+}
 function focusables(root) {
-	return Array.from(root.querySelectorAll(FOCUSABLE)).filter((el) => !el.hidden && !el.closest("[hidden], [inert]"));
+	return Array.from(root.querySelectorAll(FOCUSABLE)).filter((el) => !el.hidden && !el.closest("[hidden], [inert]") && isRendered(el));
 }
 /** Open modal dialogs, innermost last. Only the topmost handles keys. */
 var openModals = [];
@@ -16708,18 +16764,39 @@ function RuntimeErrors() {
 	});
 }
 //#endregion
+//#region src/quick-actions.ts
+/**
+* QuickSave and QuickLoad as the built-in buttons and hotkeys perform them:
+* a failure is shown on the page (the Story API's save() and load() only
+* reject, for the code that awaits them).
+*/
+async function quickSave() {
+	try {
+		await useStoryStore.getState().save();
+	} catch (error) {
+		showRuntimeError("The game could not be saved:", error);
+	}
+}
+async function quickLoad() {
+	try {
+		await useStoryStore.getState().load();
+	} catch (error) {
+		showRuntimeError("The saved game could not be loaded:", error);
+	}
+}
+//#endregion
 //#region src/components/App.tsx
 function App() {
 	const { storyData, currentPassage, nobr } = useStoryFields("storyData", "currentPassage", "nobr");
 	useEffect(() => {
 		const onKeyDown = (e) => {
-			const { quickSaveKey, quickLoadKey, save, load } = useStoryStore.getState();
+			const { quickSaveKey, quickLoadKey } = useStoryStore.getState();
 			if (quickSaveKey !== null && e.key === quickSaveKey) {
 				e.preventDefault();
-				save();
+				quickSave();
 			} else if (quickLoadKey !== null && e.key === quickLoadKey) {
 				e.preventDefault();
-				load();
+				quickLoad();
 			}
 		};
 		document.addEventListener("keydown", onKeyDown);
@@ -16734,10 +16811,10 @@ function App() {
 		/* @__PURE__ */ jsx(TriggerDialogHost, {}),
 		/* @__PURE__ */ jsx(RuntimeErrors, {})
 	] });
-	return nobr ? /* @__PURE__ */ jsx(NobrContext.Provider, {
-		value: true,
+	return /* @__PURE__ */ jsx(NobrContext.Provider, {
+		value: nobr,
 		children: content
-	}) : content;
+	});
 }
 //#endregion
 //#region src/parser.ts
@@ -16897,7 +16974,9 @@ function storageKey() {
 	return `spindle.${useStoryStore.getState().storyData?.ifid || "unknown"}.settings`;
 }
 function persist() {
-	localStorage.setItem(storageKey(), JSON.stringify(values));
+	try {
+		localStorage.setItem(storageKey(), JSON.stringify(values));
+	} catch {}
 }
 function loadFromStorage() {
 	if (storageLoaded) return;
@@ -18181,7 +18260,13 @@ function widgetDef({ name = "", parameters = "" }) {
 function parseWidgetDef(rawArgs) {
 	return widgetDef(parseMacroArgs(rawArgs, WIDGET_PARAMETERS));
 }
-var BLOCK_WIDGET = /\{widget\s+["']?(\w+)["']?[^}]*\}([\s\S]*?)\{\/widget\}/g;
+/**
+* A definition: its arguments (read like a {widget} macro's, see
+* parseWidgetDef) and its body. Macro names are not case-sensitive.
+*/
+var WIDGET_DEFINITION = /\{widget\s+([^}]*)\}([\s\S]*?)\{\/widget\}/gi;
+/** `{@children}`, also with selectors such as `{.highlight @children}`. */
+var CHILDREN_PLACEHOLDER = /\{[^{}]*@children\s*\}/;
 /**
 * The names of the block widgets (those whose body renders `{@children}`)
 * that StoryInit and the passages tagged `widget` define. They must be
@@ -18192,7 +18277,12 @@ function blockWidgetNames(passages) {
 	const names = [];
 	for (const passage of passages) {
 		if (passage.name !== "StoryInit" && !passage.tags?.includes("widget")) continue;
-		for (const match of passage.content.matchAll(BLOCK_WIDGET)) if (/\{@children\}/.test(match[2])) names.push(match[1]);
+		for (const match of passage.content.matchAll(WIDGET_DEFINITION)) {
+			if (!CHILDREN_PLACEHOLDER.test(match[2])) continue;
+			try {
+				names.push(parseWidgetDef(match[1]).name);
+			} catch {}
+		}
 	}
 	return names;
 }
@@ -18779,7 +18869,7 @@ function computeAndApply(expr, name, isTemp, isLocal, getLocals, rawArgs, prevRe
 		logMacroError(`computed ${rawArgs}`, err, location);
 		return;
 	}
-	if (!deepEqual(prevRef.current, newValue)) {
+	if (!deepEqualStrict(prevRef.current, newValue)) {
 		prevRef.current = newValue;
 		if (isLocal) try {
 			localsUpdate(name, newValue);
@@ -19186,7 +19276,10 @@ defineMacro({
 * Return a function that runs a macro body once, outside the passage tree:
 * it renders `children` into a detached node, so the body's macros ({set},
 * {if}, {goto}, ...) fire their side effects through the normal Preact
-* pipeline, then unmounts it. Used by {button} and {link} on click.
+* pipeline. Used by {button} and {link} on click. The body stays mounted
+* until the owning macro unmounts (its passage changes, say), so work it
+* starts in an effect, such as the timer of a {timed} or {repeat}, can
+* finish; the passage leaving cancels it.
 *
 * A detached render starts with no contexts, so the hook captures the ones
 * the owning macro sees and provides them again: the locals scope (read
@@ -19207,6 +19300,10 @@ function useDetachedBody() {
 	const widgetChildren = useContext(WidgetChildrenContext);
 	const repeat = useContext(RepeatContext);
 	const closeDialog = useContext(DialogCloseContext);
+	const mounted = useRef([]);
+	useEffect(() => () => {
+		for (const container of mounted.current.splice(0)) render(null, container);
+	}, []);
 	const run = (children) => {
 		const locals = liveLocalsView(updater.getValues);
 		const container = document.createElement("div");
@@ -19236,7 +19333,7 @@ function useDetachedBody() {
 				})
 			})
 		}), container);
-		render(null, container);
+		mounted.current.push(container);
 	};
 	return (children) => runWithCommittedMutations(() => run(children));
 }
@@ -19553,9 +19650,9 @@ defineMenubarAction({
 	label: "QuickSave",
 	actionType: "save",
 	setup: () => {
-		const { save, quickSaveKey } = useStoryFields("save", "quickSaveKey");
+		const { quickSaveKey } = useStoryFields("quickSaveKey");
 		return {
-			perform: save,
+			perform: quickSave,
 			title: hotkeyTitle("Quick Save", quickSaveKey)
 		};
 	}
@@ -19566,9 +19663,9 @@ defineMenubarAction({
 	actionType: "load",
 	confirm: "Load saved game? Current progress will be lost.",
 	setup: () => {
-		const { load, hasSave, quickLoadKey } = useStoryFields("load", "hasSave", "quickLoadKey", "knownSaves");
+		const { hasSave, quickLoadKey } = useStoryFields("hasSave", "quickLoadKey", "knownSaves");
 		return {
-			perform: () => load(),
+			perform: quickLoad,
 			disabled: !hasSave(),
 			title: hotkeyTitle("Quick Load", quickLoadKey)
 		};
@@ -19662,6 +19759,7 @@ function SaveManagerContent() {
 	const [status, setStatus] = useState(null);
 	const [collapsed, setCollapsed] = useState(() => /* @__PURE__ */ new Set());
 	const [renamingId, setRenamingId] = useState(null);
+	const renameCancelled = useRef(false);
 	const [renameValue, setRenameValue] = useState("");
 	const renameInputRef = useRef(null);
 	const fileInputRef = useRef(null);
@@ -19715,9 +19813,7 @@ function SaveManagerContent() {
 		const playthrough = resolvePlaythroughId();
 		try {
 			await saveWithHooks(void 0, void 0, beginSave, async (payload) => {
-				const ptId = await playthrough;
-				if (!ptId) throw new Error("No playthrough");
-				return createSave(ifid, ptId, payload);
+				return createSave(ifid, playthrough, payload);
 			});
 			showStatus("Save created");
 			await refresh();
@@ -19729,7 +19825,7 @@ function SaveManagerContent() {
 		const playthrough = resolvePlaythroughId();
 		try {
 			await saveWithHooks(void 0, void 0, beginSave, async (payload) => {
-				if (!await overwriteSave(saveId, payload, void 0, await playthrough || void 0)) throw new Error("Save not found");
+				if (!await overwriteSave(saveId, payload, void 0, playthrough)) throw new Error("Save not found");
 			});
 			showStatus("Save overwritten");
 			await refresh();
@@ -19762,6 +19858,7 @@ function SaveManagerContent() {
 		}
 	};
 	const handleRenameStart = (save) => {
+		renameCancelled.current = false;
 		setRenamingId(save.meta.id);
 		setRenameValue(save.meta.title);
 	};
@@ -19778,7 +19875,15 @@ function SaveManagerContent() {
 	};
 	const handleRenameKeyDown = (e) => {
 		if (e.key === "Enter") handleRenameConfirm();
-		else if (e.key === "Escape") setRenamingId(null);
+		else if (e.key === "Escape") {
+			e.preventDefault();
+			e.stopPropagation();
+			renameCancelled.current = true;
+			setRenamingId(null);
+		}
+	};
+	const handleRenameBlur = () => {
+		if (!renameCancelled.current) handleRenameConfirm();
 	};
 	const handleExport = async (saveId) => {
 		try {
@@ -19895,7 +20000,7 @@ function SaveManagerContent() {
 										value: renameValue,
 										onInput: (e) => setRenameValue(e.target.value),
 										onKeyDown: handleRenameKeyDown,
-										onBlur: handleRenameConfirm
+										onBlur: handleRenameBlur
 									}) : /* @__PURE__ */ jsx("div", {
 										class: "save-slot-title",
 										children: save.meta.title
@@ -20538,6 +20643,19 @@ function cleanupSnapshots(containerEl) {
 	const snapshots = containerEl.querySelectorAll(".passage-snapshot");
 	for (let i = 0; i < snapshots.length; i++) snapshots[i].remove();
 }
+/**
+* `config` for players who prefer reduced motion: the CSS shortens the
+* animations (see styles.css), so the waits that follow them shrink too,
+* leaving no empty passage area before the next passage.
+*/
+function reduceMotion(config) {
+	if (!window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) return config;
+	return {
+		...config,
+		duration: Math.min(config.duration, 10),
+		pause: 0
+	};
+}
 defineMacro({
 	name: "passage",
 	interpolate: true,
@@ -20566,13 +20684,13 @@ defineMacro({
 		useEffect(() => {
 			const store = useStoryStore.getState();
 			const { history, historyIndex, transitionConfig } = store;
-			const next = store.consumeNextTransition();
 			const prevLen = prevHistoryLenRef.current;
 			prevHistoryLenRef.current = history.length;
 			const isFirstLoad = !displayedPassage;
 			const isRestart = history.length === 1 && historyIndex === 0 && prevLen > 1;
 			const isLoad = history.length > 1 && historyIndex === history.length - 1 && prevLen > 1 && Math.abs(history.length - prevLen) > 1;
 			if (navigationId === displayed.id) return;
+			const next = store.consumeNextTransition();
 			cancelTransition();
 			const targetPassage = storyData?.passages.get(currentPassage);
 			if (!targetPassage) {
@@ -20585,7 +20703,7 @@ defineMacro({
 				setDisplayedPassage(currentPassage);
 				return;
 			}
-			const config = resolveTransition(targetPassage.tags, next, transitionConfig);
+			const config = reduceMotion(resolveTransition(targetPassage.tags, next, transitionConfig));
 			resolvedTypeRef.current = config.type;
 			const containerEl = containerRef.current;
 			if (config.type === "none") {
@@ -20725,7 +20843,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/* 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";
+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/* Keep the first control clear of the close button above it */\n.dialog-settings .dialog-body {\n  padding-top: 2.25em;\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) {
@@ -20753,6 +20871,15 @@ function stopWithErrors(errors) {
 	throw new Error(`spindle: ${errors.length} validation error(s):\n${errors.join("\n")}`);
 }
 /**
+* The undeclared variables the passages refer to, with the macros known now:
+* the input macros that bind a variable (registered by author JS or
+* StoryInit) and the roles of their parameters decide what is a reference.
+*/
+function variableErrors(storyData, schema) {
+	const storeVarMacros = getMacroRegistry().filter((m) => m.storeVar).map((m) => m.name);
+	return validatePassages(storyData.passages, schema, storeVarMacros);
+}
+/**
 * The markup errors (malformed markup, unknown macros, syntax errors in
 * code) of the passages for which `only` holds, with the macros and widgets
 * known now.
@@ -20801,9 +20928,8 @@ function boot() {
 		throw new Error(`spindle: ${msg}`);
 	}
 	const schema = parseStoryVariables(storyVarsPassage.content);
-	const storeVarMacros = getMacroRegistry().filter((m) => m.storeVar).map((m) => m.name);
 	for (const name of blockWidgetNames(storyData.passages.values())) registerBlockMacro(name);
-	const errors = validatePassages(storyData.passages, schema, storeVarMacros);
+	const errors = variableErrors(storyData, schema);
 	errors.push(...markupErrors(storyData, (p) => p.name === "StoryInit"));
 	let transientDefaults = {};
 	const storyTransientsPassage = storyData.passages.get("StoryTransients");
@@ -20818,7 +20944,7 @@ function boot() {
 	useStoryStore.getState().init(storyData, defaults, transientDefaults);
 	enterRuntimePhase();
 	initializeStory(loadSession(storyData.ifid));
-	const markup = markupErrors(storyData, (p) => p.name !== "StoryInit");
+	const markup = [...variableErrors(storyData, schema), ...markupErrors(storyData, (p) => p.name !== "StoryInit")];
 	if (markup.length > 0) stopWithErrors(markup);
 	for (const [, passage] of storyData.passages) if (passage.tags.includes("widget")) {
 		const widgetAST = parseMarkup(passage.content);