@rohal12/spindle 0.59.8 → 0.59.9

package/dist/pkg/headless.js

@@ -11143,7 +11143,7 @@ function useRunOnce(macro, rawArgs, effect) {
 			effect();
 		} catch (error) {
 			failure.current = { error };
-			logMacroError(`${macro} ${rawArgs}`, error, location);
+			logMacroError(`${macro} ${rawArgs}`.trim(), error, location);
 		}
 	}
 	if (!failure.current) return null;
@@ -12548,6 +12548,7 @@ var CLASS_PREFIX = "c:";
 var ERROR_PREFIX = "E:";
 var SYMBOL_TAG = "S";
 var KEYS_TAG = "K";
+var REGEXP_TAG = "R";
 var BUILTIN_ERRORS = new Map([
 	Error,
 	EvalError,
@@ -12609,6 +12610,11 @@ function reducers() {
 		const key = Symbol.keyFor(v);
 		return key !== void 0 && [key];
 	};
+	out[REGEXP_TAG] = (v) => v instanceof RegExp && v.lastIndex !== 0 && [
+		v.source,
+		v.flags,
+		v.lastIndex
+	];
 	out[KEYS_TAG] = (v) => {
 		if (!isObject(v) || Object.getPrototypeOf(v) !== Object.prototype) return false;
 		const keys = Object.keys(v);
@@ -12682,6 +12688,12 @@ function reviverFor(key) {
 		return Symbol.for(data[0]);
 	};
 	if (key === KEYS_TAG) return reviveKeyed;
+	if (key === REGEXP_TAG) return (data) => {
+		if (!Array.isArray(data) || typeof data[0] !== "string" || typeof data[1] !== "string" || !Number.isSafeInteger(data[2])) throw new TypeError("spindle: Malformed regular expression");
+		const re = new RegExp(data[0], data[1]);
+		re.lastIndex = data[2];
+		return re;
+	};
 	if (key.startsWith(CLASS_PREFIX)) return reviveClass(key.slice(2));
 	if (key.startsWith(ERROR_PREFIX)) return reviveError(key.slice(2));
 }
@@ -12793,6 +12805,7 @@ function isOptionalPRNGSnapshot(value) {
 	return isRecord$1(value) && typeof value.seed === "string" && typeof value.pull === "number" && Number.isInteger(value.pull) && value.pull >= 0;
 }
 var isMoment = (value) => isRecord$1(value) && typeof value.passage === "string" && isRecord$1(value.variables) && typeof value.timestamp === "number" && isOptionalPRNGSnapshot(value.prng);
+var isWatchers = (value) => value === void 0 || Array.isArray(value) && Array.from(value).every((w) => isRecord$1(w) && typeof w.condition === "string" && isRecord$1(w.options));
 var isCountsMap = (value) => value === void 0 || value instanceof Map && [...value.keys()].every((k) => typeof k === "string");
 /**
 * Whether a deserialized payload is well formed: every history moment is,
@@ -12806,7 +12819,7 @@ function isPayload(value) {
 	if (!Array.isArray(history) || history.length === 0) return false;
 	if (!Array.from(history).every(isMoment)) return false;
 	if (typeof historyIndex !== "number" || !Number.isInteger(historyIndex) || historyIndex < 0 || historyIndex >= history.length || history[historyIndex].passage !== value.passage) return false;
-	return isCountsMap(value.visitCounts) && isCountsMap(value.renderCounts) && isOptionalPRNGSnapshot(value.prng);
+	return isCountsMap(value.visitCounts) && isCountsMap(value.renderCounts) && isOptionalPRNGSnapshot(value.prng) && isWatchers(value.watchers);
 }
 var mapToCounts = (counts) => counts instanceof Map ? createCounts(Object.fromEntries(counts)) : void 0;
 /**
@@ -13406,7 +13419,11 @@ function deepClone(value, options = {}) {
 	}
 	function cloneBuiltin(val) {
 		if (val instanceof Date) return keep(val, new Date(val.getTime()));
-		if (val instanceof RegExp) return keep(val, new RegExp(val.source, val.flags));
+		if (val instanceof RegExp) {
+			const copy = new RegExp(val.source, val.flags);
+			copy.lastIndex = val.lastIndex;
+			return keep(val, copy);
+		}
 		if (val instanceof ArrayBuffer) return keep(val, val.slice(0));
 		if (ArrayBuffer.isView(val)) {
 			const buffer = clone(val.buffer);
@@ -13589,7 +13606,7 @@ function equalBytes(a, b) {
 /** Equality of the content of atomic built-ins (see isAtomic) but Map/Set. */
 function equalBuiltin(a, b, assumed) {
 	if (a instanceof Date) return Object.is(a.getTime(), b.getTime());
-	if (a instanceof RegExp) return String(a) === String(b);
+	if (a instanceof RegExp) return String(a) === String(b) && a.lastIndex === b.lastIndex;
 	if (ArrayBuffer.isView(a)) {
 		const v = b;
 		return a.byteOffset === v.byteOffset && a.byteLength === v.byteLength && equal(a.buffer, v.buffer, assumed);
@@ -14148,15 +14165,17 @@ var readingSlot = (read) => queued(async (ifid, slot) => read(await slotRecord(i
 var startNewPlaythrough = queued(startNewPlaythroughNow);
 async function startNewPlaythroughNow(ifid, id = randomUUID()) {
 	const backend = await getBackend();
-	const num = await nextPlaythroughNumber(ifid);
-	const record = {
-		id,
-		ifid,
-		createdAt: (/* @__PURE__ */ new Date()).toISOString(),
-		label: `Playthrough ${num}`
-	};
-	await backend.putPlaythrough(record);
-	await backend.setMeta(playthroughCountKey(ifid), num);
+	await withTabLock(`spindle-playthrough-count:${ifid}`, async () => {
+		const num = await nextPlaythroughNumber(ifid);
+		const record = {
+			id,
+			ifid,
+			createdAt: (/* @__PURE__ */ new Date()).toISOString(),
+			label: `Playthrough ${num}`
+		};
+		await backend.putPlaythrough(record);
+		await backend.setMeta(playthroughCountKey(ifid), num);
+	});
 	await backend.setMeta(currentPlaythroughKey(ifid), id);
 	return id;
 }
@@ -14409,12 +14428,41 @@ function slotMetaKey(ifid, slot) {
 	return isNamedSlot(slot) ? `${SLOT_KEY_PREFIX}${slot}.${ifid}` : `${AUTOSAVE_KEY_PREFIX}${ifid}`;
 }
 var slotIndexKey = (ifid) => `${SLOT_INDEX_KEY_PREFIX}${ifid}`;
-/** Read-modify-write the per-story slot index. */
+/**
+* Run `op` holding the browser's lock `name`, so other tabs of the story
+* (the operation queue only orders this document's operations) wait for it.
+* Runs `op` without a lock where the browser offers none (or refuses it, as
+* in a sandboxed frame, which has no other tabs sharing its storage).
+*/
+async function withTabLock(name, op) {
+	let locks;
+	try {
+		locks = navigator.locks;
+	} catch {}
+	if (!locks) return op();
+	let started = false;
+	try {
+		return await locks.request(name, () => {
+			started = true;
+			return op();
+		});
+	} catch (err) {
+		if (started) throw err;
+		return op();
+	}
+}
+/**
+* Read-modify-write the per-story slot index. Under a lock shared by the
+* story's tabs: two tabs adding a slot at once would both read the old index
+* and the later write would drop the other's slot.
+*/
 async function updateSlotIndex(ifid, update) {
 	const backend = await getBackend();
-	const existing = await backend.getMeta(slotIndexKey(ifid)) ?? [];
-	const updated = update(existing);
-	if (updated !== existing) await backend.setMeta(slotIndexKey(ifid), updated);
+	await withTabLock(`spindle-slot-index:${ifid}`, async () => {
+		const existing = await backend.getMeta(slotIndexKey(ifid)) ?? [];
+		const updated = update(existing);
+		if (updated !== existing) await backend.setMeta(slotIndexKey(ifid), updated);
+	});
 }
 /** Every slot: the default one (undefined), then those in the slot index. */
 async function allSlots(ifid) {
@@ -14761,6 +14809,11 @@ function executeStoryInit() {
 */
 function initializeStory(session) {
 	executeStoryInit();
+	const missing = session ? missingPassage(useStoryStore.getState().storyData, session) : void 0;
+	if (missing !== void 0) {
+		console.warn(`spindle: discarding the saved session: the story no longer has the passage "${missing}"`);
+		session = void 0;
+	}
 	if (session) useStoryStore.getState().loadFromPayload(session);
 	emit("storyinit");
 	if (!session) recordStoryInitState();
@@ -15254,6 +15307,27 @@ function addMacroTrigger(condition, options) {
 	if (triggers.some((t) => t.macroKey === macroKey)) return;
 	registerTrigger(condition, options, macroKey);
 }
+/**
+* The {watch} macro watchers now registered, for a save or the session:
+* watchers outlive the passage that declared them, so a game restored
+* where it stopped needs the ones its earlier passages registered (and
+* not the ones {unwatch} or `once` removed).
+*/
+function savedMacroWatchers() {
+	return triggers.filter((t) => t.macroKey !== void 0 && t.options).map((t) => ({
+		condition: t.condition,
+		options: { ...t.options }
+	}));
+}
+/**
+* Make the {watch} macro watchers those of a loaded game: the ones of
+* `watchers` replace the registered ones (watchers added by Story.watch
+* code stay). The passage shown mounts its own {watch} macros again.
+*/
+function restoreMacroWatchers(watchers) {
+	triggers = triggers.filter((t) => t.macroKey === void 0);
+	for (const { condition, options } of watchers) addMacroTrigger(condition, options);
+}
 function removeTrigger(name) {
 	triggers = triggers.filter((t) => t.name !== name);
 }
@@ -15609,7 +15683,8 @@ function persistSession(get) {
 		historyIndex,
 		visitCounts,
 		renderCounts,
-		prng: snapshotPRNG()
+		prng: snapshotPRNG(),
+		watchers: savedMacroWatchers()
 	});
 }
 /** What the page shows before a session write error (see RuntimeErrors). */
@@ -15994,6 +16069,15 @@ function restorePRNGFrom(prng) {
 function restorePRNGFromMoment(moment) {
 	if (moment) restorePRNGFrom(moment.prng);
 }
+/**
+* The first passage of `payload` (its current passage, then its history)
+* that `storyData` does not have, as when the story was updated since the
+* save; undefined if the story has them all (or is not loaded).
+*/
+function missingPassage(storyData, payload) {
+	if (!storyData) return void 0;
+	return [payload.passage, ...payload.history.map((m) => m.passage)].find((name) => !storyData.passages.has(name));
+}
 var NAMESPACE_KEYS = [
 	"variables",
 	"temporary",
@@ -16421,7 +16505,8 @@ var useStoryStore = create()(storyStore((set, get) => ({
 			historyIndex,
 			visitCounts: { ...visitCounts },
 			renderCounts: { ...renderCounts },
-			prng: snapshotPRNG()
+			prng: snapshotPRNG(),
+			watchers: savedMacroWatchers()
 		};
 	},
 	beginSave: () => {
@@ -16433,12 +16518,15 @@ var useStoryStore = create()(storyStore((set, get) => ({
 		};
 	},
 	loadFromPayload: (payload, slot, playthroughId) => {
-		const replacement = slotLoadApplying ?? ++stateReplacementsIssued;
+		const applying = slotLoadApplying;
 		slotLoadApplying = null;
+		const replacement = applying ?? ++stateReplacementsIssued;
 		if (payload.history.length === 0) {
 			console.warn("loadFromPayload: rejecting payload with empty history");
 			return;
 		}
+		const missing = missingPassage(get().storyData, payload);
+		if (missing !== void 0) throw new Error(`The save refers to the passage "${missing}", which this version of the story does not have`);
 		latestStateApplied = replacement;
 		emit("beforeload", slot);
 		const ifid = get().storyData?.ifid;
@@ -16464,6 +16552,7 @@ var useStoryStore = create()(storyStore((set, get) => ({
 			state.temporary = createNamespace();
 			state.transient = createNamespace(deepClone(get().transientDefaults));
 		});
+		if (payload.watchers) restoreMacroWatchers(payload.watchers);
 		reinitTriggerState();
 		lastNavigationVars = reconstructVarsAt(get().historyIndex);
 		restorePRNGFrom(entry?.prng !== void 0 ? entry.prng : payload.prng);
@@ -16646,7 +16735,7 @@ function PassageDialog({ passageName, fallbackMarkup, panelClass, onClose, dismi
 	}, []);
 	const handleBackdrop = (e) => {
 		if (!dismissible) return;
-		if (e.target.classList.contains("dialog-overlay")) stableOnClose();
+		if (e.target === e.currentTarget) stableOnClose();
 	};
 	const cls = panelClass ? `dialog-panel ${panelClass}` : "dialog-panel";
 	return /* @__PURE__ */ jsx(DialogCloseContext.Provider, {
@@ -16661,6 +16750,7 @@ function PassageDialog({ passageName, fallbackMarkup, panelClass, onClose, dismi
 				"aria-modal": "true",
 				tabIndex: -1,
 				children: [showCloseButton && /* @__PURE__ */ jsx("button", {
+					type: "button",
 					class: "dialog-close",
 					"aria-label": "Close",
 					onClick: stableOnClose,
@@ -19086,7 +19176,7 @@ function keyOf(val, ancestors) {
 	const depth = ancestors.indexOf(obj);
 	if (depth !== -1) return `<cycle ${ancestors.length - depth}>`;
 	if (val instanceof Date) return `Date(${val.getTime()})`;
-	if (val instanceof RegExp) return `RegExp(${String(val)})`;
+	if (val instanceof RegExp) return `RegExp(${String(val)}@${val.lastIndex})`;
 	ancestors.push(obj);
 	try {
 		if (Array.isArray(val)) return `[${Array.from(val, (v) => keyOf(v, ancestors)).join(",")}]`;
@@ -19201,15 +19291,7 @@ defineMacro({
 	block: true,
 	render({ children = [] }, ctx) {
 		const code = ctx.collectText(children);
-		ctx.hooks.useLayoutEffect(() => {
-			const location = ctx.sourceLocation();
-			try {
-				ctx.mutate(code);
-			} catch (err) {
-				logMacroError("do", err, location);
-			}
-		}, []);
-		return null;
+		return useRunOnce("do", "", () => ctx.mutate(code));
 	}
 });
 //#endregion
@@ -19361,6 +19443,7 @@ defineMacro({
 			perform: handleClick
 		});
 		return /* @__PURE__ */ jsx("button", {
+			type: "button",
 			id: ctx.id,
 			class: ctx.cls,
 			onClick: handleClick,
@@ -19517,15 +19600,52 @@ defineMacro({
 });
 //#endregion
 //#region src/components/macros/Type.tsx
+/**
+* The clip-path that shows the first `count` characters of `root`'s text in
+* reading order: the boxes the browser laid out for them, each wrapped line
+* as far as its last revealed character, as one path in the coordinates of
+* `inner`'s box. Undefined where there is no layout to measure.
+*/
+function revealedPath(root, inner, count) {
+	const range = document.createRange();
+	if (!range.getClientRects) return void 0;
+	const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+	let left = count;
+	let end;
+	for (let n = walker.nextNode(); n && left > 0; n = walker.nextNode()) {
+		const length = n.nodeValue?.length ?? 0;
+		end = {
+			node: n,
+			offset: Math.min(left, length)
+		};
+		left -= length;
+	}
+	if (!end) return "inset(0 100% 0 0)";
+	range.setStart(root, 0);
+	range.setEnd(end.node, end.offset);
+	const rects = range.getClientRects();
+	if (rects.length === 0) return void 0;
+	const origin = inner.getBoundingClientRect();
+	let path = "";
+	for (const r of Array.from(rects)) {
+		if (r.width === 0 && r.height === 0) continue;
+		const x = (r.left - origin.left).toFixed(2);
+		const y = (r.top - origin.top).toFixed(2);
+		path += `M${x} ${y}h${r.width.toFixed(2)}v${r.height.toFixed(2)}h-${r.width.toFixed(2)}z`;
+	}
+	return path ? `path("${path}")` : void 0;
+}
 defineMacro({
 	name: "type",
 	block: true,
 	interpolate: true,
 	parameters: [DELAY_PARAMETER],
 	render({ children = [] }, ctx) {
-		const { useState, useEffect, useRef } = ctx.hooks;
+		const { useState, useEffect, useLayoutEffect, useRef } = ctx.hooks;
 		const speed = ctx.args.delay ?? 0;
 		const containerRef = useRef(null);
+		const innerRef = useRef(null);
+		const [clip, setClip] = useState();
 		const [totalChars, setTotalChars] = useState(0);
 		const [visibleChars, setVisibleChars] = useState(0);
 		const visibleCharsRef = useRef(0);
@@ -19548,6 +19668,22 @@ defineMacro({
 			return () => clearInterval(timer);
 		}, [totalChars, speed]);
 		const done = visibleChars >= totalChars && totalChars > 0;
+		useLayoutEffect(() => {
+			const root = containerRef.current;
+			const inner = innerRef.current;
+			if (!root || !inner || totalChars === 0 || done) {
+				setClip(void 0);
+				return;
+			}
+			const measure = () => setClip(revealedPath(root, inner, visibleChars));
+			measure();
+			window.addEventListener("resize", measure);
+			return () => window.removeEventListener("resize", measure);
+		}, [
+			visibleChars,
+			totalChars,
+			done
+		]);
 		const cls = [
 			"macro-type",
 			done ? "macro-type-done" : "",
@@ -19557,13 +19693,13 @@ defineMacro({
 			id: ctx.id,
 			class: cls,
 			ref: containerRef,
-			style: { clipPath: totalChars > 0 && !done ? void 0 : void 0 },
 			children: [/* @__PURE__ */ jsx("span", {
+				ref: innerRef,
 				class: "macro-type-inner",
 				style: {
 					display: "inline",
 					visibility: totalChars === 0 ? "hidden" : "visible",
-					clipPath: totalChars > 0 && !done ? `inset(0 ${(totalChars - visibleChars) / totalChars * 100}% 0 0)` : void 0
+					clipPath: clip
 				},
 				children: ctx.renderInlineNodes(children)
 			}), !done && totalChars > 0 && /* @__PURE__ */ jsx("span", { class: "macro-type-cursor" })]
@@ -19611,6 +19747,7 @@ function defineMenubarAction(config) {
 				perform: config.dialog ? () => setDialogOpen(true) : setup.perform
 			});
 			return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("button", {
+				type: "button",
 				id: ctx.id,
 				class: cls,
 				onClick: perform,
@@ -19720,6 +19857,7 @@ defineMacro({
 		const label = ctx.resolve(ctx.args.label ?? "");
 		const passageName = ctx.collectText(children).trim().replace(/^["']|["']$/g, "");
 		return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("button", {
+			type: "button",
 			id: ctx.id,
 			class: ctx.cls,
 			onClick: () => setOpen(true),
@@ -19766,9 +19904,12 @@ function SaveManagerContent() {
 	const closeDialog = useContext(DialogCloseContext);
 	const { storyData, playthroughId, beginSave, loadFromPayload } = useStoryFields("storyData", "playthroughId", "beginSave", "loadFromPayload");
 	const ifid = storyData?.ifid ?? "";
+	const [temporary, setTemporary] = useState(false);
 	const refresh = useCallback(async () => {
 		if (!ifid) return;
-		setGroups(await getSavesGrouped(ifid));
+		const data = await getSavesGrouped(ifid);
+		setTemporary(getBackendType() === "memory");
+		setGroups(data);
 		setLoading(false);
 	}, [ifid]);
 	useEffect(() => {
@@ -19815,7 +19956,7 @@ function SaveManagerContent() {
 			await saveWithHooks(void 0, void 0, beginSave, async (payload) => {
 				return createSave(ifid, playthrough, payload);
 			});
-			showStatus("Save created");
+			showStatus(temporary ? "Save created (temporary)" : "Save created");
 			await refresh();
 		} catch {
 			showStatus("Failed to create save", "error");
@@ -19931,10 +20072,12 @@ function SaveManagerContent() {
 					children: /* @__PURE__ */ jsxs("div", {
 						class: "saves-mode-toggle",
 						children: [/* @__PURE__ */ jsx("button", {
+							type: "button",
 							class: mode === "save" ? "active" : "",
 							onClick: () => setMode("save"),
 							children: "Save"
 						}), /* @__PURE__ */ jsx("button", {
+							type: "button",
 							class: mode === "load" ? "active" : "",
 							onClick: () => setMode("load"),
 							children: "Load"
@@ -19942,9 +20085,15 @@ function SaveManagerContent() {
 					})
 				})
 			}),
+			temporary && /* @__PURE__ */ jsx("div", {
+				class: "saves-notice",
+				role: "status",
+				children: "Saves can not be kept in this browser: they are lost when the page is reloaded or closed. Export a save to keep it."
+			}),
 			/* @__PURE__ */ jsxs("div", {
 				class: "saves-toolbar",
 				children: [/* @__PURE__ */ jsx("button", {
+					type: "button",
 					class: "saves-toolbar-button",
 					onClick: handleImport,
 					children: "Import"
@@ -20012,25 +20161,30 @@ function SaveManagerContent() {
 									class: "save-slot-actions",
 									children: [
 										mode === "save" ? /* @__PURE__ */ jsx("button", {
+											type: "button",
 											class: "save-slot-action primary",
 											onClick: () => handleOverwrite(save.meta.id),
 											children: "Save Here"
 										}) : /* @__PURE__ */ jsx("button", {
+											type: "button",
 											class: "save-slot-action primary",
 											onClick: () => handleLoad(save),
 											children: "Load"
 										}),
 										/* @__PURE__ */ jsx("button", {
+											type: "button",
 											class: "save-slot-action",
 											onClick: () => handleRenameStart(save),
 											children: "Rename"
 										}),
 										/* @__PURE__ */ jsx("button", {
+											type: "button",
 											class: "save-slot-action",
 											onClick: () => handleExport(save.meta.id),
 											children: "Export"
 										}),
 										/* @__PURE__ */ jsx("button", {
+											type: "button",
 											class: "save-slot-action danger",
 											onClick: () => handleDelete(save.meta.id),
 											children: "Delete"
@@ -20038,6 +20192,7 @@ function SaveManagerContent() {
 									]
 								})]
 							}, save.meta.id)), mode === "save" && isCurrentPt && /* @__PURE__ */ jsx("button", {
+								type: "button",
 								class: "save-slot-new",
 								onClick: handleNewSave,
 								children: "+ New Save"
@@ -20049,6 +20204,7 @@ function SaveManagerContent() {
 					children: /* @__PURE__ */ jsx("div", {
 						class: "playthrough-saves",
 						children: /* @__PURE__ */ jsx("button", {
+							type: "button",
 							class: "save-slot-new",
 							onClick: handleNewSave,
 							children: "+ New Save"
@@ -20420,6 +20576,7 @@ defineMacro({
 			}
 		});
 		return /* @__PURE__ */ jsx("button", {
+			type: "button",
 			id: ctx.id,
 			class: ctx.cls,
 			onClick: handleClick,
@@ -20594,7 +20751,7 @@ function resolveTransition(targetTags, nextTransition, storeDefault) {
 /**
 * Create a snapshot clone of a .passage element for outgoing transitions.
 * - Strips `id` attributes from the clone tree
-* - Disables interaction (pointer-events, user-select)
+* - Disables interaction (pointer-events, user-select, inert, aria-hidden)
 * - Pauses/mutes any <audio>/<video>
 * - Adds `.passage-snapshot` class and `data-transition` attribute
 */
@@ -20605,6 +20762,8 @@ function createSnapshot(passageEl, transitionType) {
 	for (let i = 0; i < idEls.length; i++) idEls[i].removeAttribute("id");
 	clone.style.pointerEvents = "none";
 	clone.style.userSelect = "none";
+	clone.setAttribute("inert", "");
+	clone.setAttribute("aria-hidden", "true");
 	const mediaEls = clone.querySelectorAll("audio, video");
 	for (let i = 0; i < mediaEls.length; i++) {
 		const media = mediaEls[i];
@@ -20843,7 +21002,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/* 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";
+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-notice {\n  padding: 0.5em 1.25em;\n  font-size: 0.8em;\n  color: #ffb74d;\n  border-bottom: 1px solid rgba(255, 183, 77, 0.3);\n  background: rgba(255, 183, 77, 0.08);\n  flex-shrink: 0;\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/package.json

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

package/src/class-registry.ts

@@ -51,7 +51,9 @@ export function clearRegistry(): void {
 //   with its message, cause, errors and own enumerable keys (not its stack);
 // - `S`: a symbol from the global registry (Symbol.for);
 // - `K`: a plain object holding a one-character key that JSON escapes (see
-//   GUARD_V8_KEYS).
+//   GUARD_V8_KEYS);
+// - `R`: a RegExp whose lastIndex is not zero (the scanning cursor of a
+//   global or sticky pattern), with its source, flags and lastIndex.
 //
 // Everything else is refused when saving, with the path to the value:
 // functions, unique symbols, symbol keys, instances of unregistered classes,
@@ -61,6 +63,7 @@ const CLASS_PREFIX = 'c:';
 const ERROR_PREFIX = 'E:';
 const SYMBOL_TAG = 'S';
 const KEYS_TAG = 'K';
+const REGEXP_TAG = 'R';
 
 /**
  * Work around Chromium issue 521080746 (V8 in Chrome/Chromium 14x-153+,
@@ -167,6 +170,9 @@ function reducers(): Record<string, (value: unknown) => unknown> {
     const key = Symbol.keyFor(v);
     return key !== undefined && [key];
   };
+  out[REGEXP_TAG] = (v) =>
+    v instanceof RegExp &&
+    v.lastIndex !== 0 && [v.source, v.flags, v.lastIndex];
   if (GUARD_V8_KEYS) {
     out[KEYS_TAG] = (v) => {
       if (!isObject(v) || Object.getPrototypeOf(v) !== Object.prototype) {
@@ -264,6 +270,21 @@ function reviverFor(key: string | symbol) {
     };
   }
   if (key === KEYS_TAG) return reviveKeyed;
+  if (key === REGEXP_TAG) {
+    return (data: unknown) => {
+      if (
+        !Array.isArray(data) ||
+        typeof data[0] !== 'string' ||
+        typeof data[1] !== 'string' ||
+        !Number.isSafeInteger(data[2])
+      ) {
+        throw new TypeError('spindle: Malformed regular expression');
+      }
+      const re = new RegExp(data[0], data[1]);
+      re.lastIndex = data[2] as number;
+      return re;
+    };
+  }
   if (key.startsWith(CLASS_PREFIX)) {
     return reviveClass(key.slice(CLASS_PREFIX.length));
   }