@rohal12/spindle 0.59.7 → 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;
 }
 /**
@@ -13176,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();
 }
@@ -14463,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);
@@ -14549,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
@@ -14671,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.
@@ -15584,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;
@@ -15592,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,
@@ -15618,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);
@@ -16312,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");
@@ -16525,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 = [];
@@ -16742,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);
@@ -16931,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;
@@ -18215,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
@@ -18226,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;
 }
@@ -19220,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
@@ -19241,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");
@@ -19270,7 +19333,7 @@ function useDetachedBody() {
 				})
 			})
 		}), container);
-		render(null, container);
+		mounted.current.push(container);
 	};
 	return (children) => runWithCommittedMutations(() => run(children));
 }
@@ -19587,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)
 		};
 	}
@@ -19600,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)
 		};
@@ -19696,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);
@@ -19794,6 +19858,7 @@ function SaveManagerContent() {
 		}
 	};
 	const handleRenameStart = (save) => {
+		renameCancelled.current = false;
 		setRenamingId(save.meta.id);
 		setRenameValue(save.meta.title);
 	};
@@ -19810,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 {
@@ -19927,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
@@ -20570,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,
@@ -20617,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") {
@@ -20757,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) {

package/dist/pkg/story-variables.js

@@ -10269,7 +10269,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
@@ -10280,7 +10286,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;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rohal12/spindle",
-  "version": "0.59.7",
+  "version": "0.59.8",
   "type": "module",
   "description": "A Preact-based story format for Twine 2.",
   "license": "Unlicense",

package/src/components/App.tsx

@@ -5,6 +5,7 @@ import { NobrContext } from '../markup/render';
 import { StoryInterface } from './StoryInterface';
 import { TriggerDialogHost } from './TriggerDialogHost';
 import { RuntimeErrors } from './RuntimeErrors';
+import { quickLoad, quickSave } from '../quick-actions';
 
 export function App() {
   const { storyData, currentPassage, nobr } = useStoryFields(
@@ -15,14 +16,13 @@ export function App() {
 
   useEffect(() => {
     const onKeyDown = (e: KeyboardEvent) => {
-      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);

package/src/components/macros/MenubarButtons.tsx

@@ -2,6 +2,7 @@ import { useState } from 'preact/hooks';
 import { useStoryStore } from '../../store';
 import { useStoryFields } from '../../hooks/use-story-fields';
 import { settings } from '../../settings';
+import { quickLoad, quickSave } from '../../quick-actions';
 import { defineMacro } from '../../define-macro';
 import { PassageDialog } from '../PassageDialog';
 import type { ActionType } from '../../action-registry';
@@ -110,8 +111,11 @@ defineMenubarAction({
   label: 'QuickSave',
   actionType: 'save',
   setup: () => {
-    const { save, quickSaveKey } = useStoryFields('save', 'quickSaveKey');
-    return { perform: save, title: hotkeyTitle('Quick Save', quickSaveKey) };
+    const { quickSaveKey } = useStoryFields('quickSaveKey');
+    return {
+      perform: quickSave,
+      title: hotkeyTitle('Quick Save', quickSaveKey),
+    };
   },
 });
 
@@ -122,14 +126,13 @@ defineMenubarAction({
   confirm: 'Load saved game? Current progress will be lost.',
   setup: () => {
     // knownSaves: re-render when the saves change, as hasSave() reads them
-    const { load, hasSave, quickLoadKey } = useStoryFields(
-      'load',
+    const { hasSave, quickLoadKey } = useStoryFields(
       'hasSave',
       'quickLoadKey',
       'knownSaves',
     );
     return {
-      perform: () => load(),
+      perform: quickLoad,
       disabled: !hasSave(),
       title: hotkeyTitle('Quick Load', quickLoadKey),
     };

package/src/components/macros/PassageDisplay.tsx

@@ -80,6 +80,18 @@ function cleanupSnapshots(containerEl: Element | null): void {
   }
 }
 
+/**
+ * `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: ResolvedTransition): ResolvedTransition {
+  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,
@@ -173,10 +185,8 @@ defineMacro({
       }
 
       // Resolve transition from tags → nextTransition → store default → built-in
-      const config = resolveTransition(
-        targetPassage.tags,
-        next,
-        transitionConfig,
+      const config = reduceMotion(
+        resolveTransition(targetPassage.tags, next, transitionConfig),
       );
 
       resolvedTypeRef.current = config.type;

package/src/components/macros/SaveManager.tsx

@@ -56,6 +56,7 @@ export function SaveManagerContent() {
   } | null>(null);
   const [collapsed, setCollapsed] = useState<Set<string>>(() => new Set());
   const [renamingId, setRenamingId] = useState<string | null>(null);
+  const renameCancelled = useRef(false);
   const [renameValue, setRenameValue] = useState('');
   const renameInputRef = useRef<HTMLInputElement>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
@@ -191,6 +192,7 @@ export function SaveManagerContent() {
   };
 
   const handleRenameStart = (save: SaveRecord) => {
+    renameCancelled.current = false;
     setRenamingId(save.meta.id);
     setRenameValue(save.meta.title);
   };
@@ -209,7 +211,18 @@ export function SaveManagerContent() {
 
   const handleRenameKeyDown = (e: KeyboardEvent) => {
     if (e.key === 'Enter') handleRenameConfirm();
-    else if (e.key === 'Escape') setRenamingId(null);
+    else if (e.key === 'Escape') {
+      // Cancel the edit only: the dialog stays open, and the blur that
+      // follows removing the input must not confirm it
+      e.preventDefault();
+      e.stopPropagation();
+      renameCancelled.current = true;
+      setRenamingId(null);
+    }
+  };
+
+  const handleRenameBlur = () => {
+    if (!renameCancelled.current) handleRenameConfirm();
   };
 
   const handleExport = async (saveId: string) => {
@@ -350,7 +363,7 @@ export function SaveManagerContent() {
                                 )
                               }
                               onKeyDown={handleRenameKeyDown}
-                              onBlur={handleRenameConfirm}
+                              onBlur={handleRenameBlur}
                             />
                           ) : (
                             <div class="save-slot-title">{save.meta.title}</div>