@rohal12/spindle 0.59.6 → 0.59.8

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.6",
+  "version": "0.59.8",
   "type": "module",
   "description": "A Preact-based story format for Twine 2.",
   "license": "Unlicense",

package/src/class-registry.ts

@@ -110,11 +110,22 @@ const defineData = (target: object, key: string, value: unknown): void => {
   });
 };
 
+/**
+ * A reducer extracts string keys, so devalue never sees the symbol keys of
+ * the original object: refuse them here, as it does for a plain object.
+ */
+function refuseSymbolKeys(value: object): void {
+  if (Object.getOwnPropertySymbols(value).length > 0) {
+    throw new TypeError('spindle: Cannot save an object with symbol keys');
+  }
+}
+
 /**
  * Own enumerable keys of `value`, as a plain object; for an error also its
  * message, cause and (AggregateError) errors, which are not enumerable.
  */
 function ownData(value: object): Record<string, unknown> {
+  refuseSymbolKeys(value);
   const data: Record<string, unknown> = {};
   if (value instanceof Error) {
     for (const key of ERROR_HIDDEN_KEYS) {
@@ -163,6 +174,7 @@ function reducers(): Record<string, (value: unknown) => unknown> {
       }
       const keys = Object.keys(v);
       if (!keys.some(isEscapedOneCharKey)) return false;
+      refuseSymbolKeys(v);
       if (keys.includes('__proto__')) {
         throw new TypeError(
           'spindle: Cannot save a property named "__proto__"',

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);
@@ -41,9 +41,7 @@ export function App() {
     </>
   );
 
-  return nobr ? (
-    <NobrContext.Provider value={true}>{content}</NobrContext.Provider>
-  ) : (
-    content
-  );
+  // One provider whatever `nobr` is: a changing tree shape would remount the
+  // passage and run its mount-only macros again
+  return <NobrContext.Provider value={nobr}>{content}</NobrContext.Provider>;
 }

package/src/components/macros/Computed.tsx

@@ -1,7 +1,7 @@
 import { useStoryStore } from '../../store';
 import { evaluate } from '../../expression';
 import { readState } from '../../execute-mutation';
-import { deepEqual } from '../../structural';
+import { deepEqualStrict } from '../../structural';
 import { defineMacro } from '../../define-macro';
 import { MacroError, logMacroError } from './MacroError';
 import { currentSourceLocation } from '../../utils/source-location';
@@ -67,7 +67,8 @@ function computeAndApply(
     return;
   }
 
-  if (!deepEqual(prevRef.current, newValue)) {
+  // Strict: a change of only the aliases inside the result is a change
+  if (!deepEqualStrict(prevRef.current, newValue)) {
     prevRef.current = newValue;
     if (isLocal) {
       try {

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,
@@ -131,9 +143,6 @@ defineMacro({
       const store = useStoryStore.getState();
       const { history, historyIndex, transitionConfig } = store;
 
-      // Always consume the next transition (one-shot), regardless of what we do
-      const next = store.consumeNextTransition();
-
       // Determine if this is a first load, restart, or save-load
       const prevLen = prevHistoryLenRef.current;
       prevHistoryLenRef.current = history.length;
@@ -152,6 +161,10 @@ defineMacro({
         return;
       }
 
+      // One-shot, used up by the first navigation, whatever we do with it
+      // (not by the initial render, which no navigation caused)
+      const next = store.consumeNextTransition();
+
       // Cancel any in-progress transition
       cancelTransition();
 
@@ -172,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);
@@ -127,9 +128,8 @@ export function SaveManagerContent() {
     const playthrough = resolvePlaythroughId();
     try {
       await saveWithHooks(undefined, undefined, beginSave, async (payload) => {
-        const ptId = await playthrough;
-        if (!ptId) throw new Error('No playthrough');
-        return createSave(ifid, ptId, payload);
+        // Queued now, in call order with other storage operations
+        return createSave(ifid, playthrough, payload);
       });
       showStatus('Save created');
       await refresh();
@@ -143,8 +143,7 @@ export function SaveManagerContent() {
     try {
       await saveWithHooks(undefined, undefined, beginSave, async (payload) => {
         // Only the current playthrough's saves offer "Save Here"
-        const ptId = (await playthrough) || undefined;
-        if (!(await overwriteSave(saveId, payload, undefined, ptId))) {
+        if (!(await overwriteSave(saveId, payload, undefined, playthrough))) {
           throw new Error('Save not found');
         }
       });
@@ -193,6 +192,7 @@ export function SaveManagerContent() {
   };
 
   const handleRenameStart = (save: SaveRecord) => {
+    renameCancelled.current = false;
     setRenamingId(save.meta.id);
     setRenameValue(save.meta.title);
   };
@@ -211,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) => {
@@ -352,7 +363,7 @@ export function SaveManagerContent() {
                                 )
                               }
                               onKeyDown={handleRenameKeyDown}
-                              onBlur={handleRenameConfirm}
+                              onBlur={handleRenameBlur}
                             />
                           ) : (
                             <div class="save-slot-title">{save.meta.title}</div>

package/src/components/macros/detached-body.tsx

@@ -1,5 +1,5 @@
 import { render } from 'preact';
-import { useContext } from 'preact/hooks';
+import { useContext, useEffect, useRef } from 'preact/hooks';
 import {
   renderNodes,
   LocalsUpdateContext,
@@ -19,7 +19,10 @@ import { DialogCloseContext } from '../PassageDialog';
  * 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
@@ -41,6 +44,16 @@ export function useDetachedBody(): (children: ASTNode[]) => void {
   const repeat = useContext(RepeatContext);
   const closeDialog = useContext(DialogCloseContext);
 
+  const mounted = useRef<HTMLElement[]>([]);
+  useEffect(
+    () => () => {
+      for (const container of mounted.current.splice(0)) {
+        render(null, container);
+      }
+    },
+    [],
+  );
+
   const run = (children: ASTNode[]) => {
     const locals = liveLocalsView(updater.getValues);
     const container = document.createElement('div');
@@ -62,7 +75,7 @@ export function useDetachedBody(): (children: ASTNode[]) => void {
       </LocalsUpdateContext.Provider>,
       container,
     );
-    render(null, container);
+    mounted.current.push(container);
   };
   return (children) => runWithCommittedMutations(() => run(children));
 }

package/src/execute-mutation.ts

@@ -381,9 +381,9 @@ function relink(
 function cloneNamespaces(from: VariableNamespaces): VariableNamespaces {
   const seen = new Map<object, object>();
   return {
-    variables: deepClone(from.variables, { seen }),
-    temporary: deepClone(from.temporary, { seen }),
-    transient: deepClone(from.transient, { seen }),
+    variables: deepClone(from.variables, { keepUnregistered: true, seen }),
+    temporary: deepClone(from.temporary, { keepUnregistered: true, seen }),
+    transient: deepClone(from.transient, { keepUnregistered: true, seen }),
   };
 }
 

package/src/expression.ts

@@ -123,32 +123,22 @@ export function historyQueries(
 }
 
 let cachedFns: ExpressionFns | null = null;
-let cachedVisitCounts: Counts | null = null;
-let cachedRenderCounts: Counts | null = 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.
+ */
 export function buildExpressionFns() {
-  const state = useStoryStore.getState();
-  const { visitCounts, renderCounts } = state;
-
-  if (
-    cachedFns &&
-    cachedVisitCounts === visitCounts &&
-    cachedRenderCounts === renderCounts
-  ) {
-    return cachedFns;
-  }
-
-  cachedFns = {
+  cachedFns ??= {
     ...historyQueries(
-      () => visitCounts,
-      () => renderCounts,
+      () => useStoryStore.getState().visitCounts,
+      () => useStoryStore.getState().renderCounts,
     ),
     random,
     randomInt,
   };
-  cachedVisitCounts = visitCounts;
-  cachedRenderCounts = renderCounts;
-
   return cachedFns;
 }
 
@@ -221,8 +211,6 @@ export function clearExpressionCache(): void {
   fnCache.clear();
   clearTransformCache();
   cachedFns = null;
-  cachedVisitCounts = null;
-  cachedRenderCounts = null;
 }
 
 export function evaluateWithState(expr: string, state: StoryState): unknown {

package/src/hooks/use-modal-focus.ts

@@ -13,9 +13,23 @@ const FOCUSABLE = [
   '[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: HTMLElement): boolean {
+  const { visibility } = getComputedStyle(el);
+  if (visibility === 'hidden' || visibility === 'collapse') return false;
+  for (let e: HTMLElement | null = el; e; e = e.parentElement) {
+    if (getComputedStyle(e).display === 'none') return false;
+  }
+  return true;
+}
+
 function focusables(root: HTMLElement): HTMLElement[] {
   return Array.from(root.querySelectorAll<HTMLElement>(FOCUSABLE)).filter(
-    (el) => !el.hidden && !el.closest('[hidden], [inert]'),
+    (el) => !el.hidden && !el.closest('[hidden], [inert]') && isRendered(el),
   );
 }
 

package/src/index.tsx

@@ -62,6 +62,21 @@ function stopWithErrors(errors: string[]): never {
   );
 }
 
+/**
+ * The undeclared variables the passages refer to, with the macros known now:
+ * the input macros that bind a variable (registered by author JS or
+ * StoryInit) and the roles of their parameters decide what is a reference.
+ */
+function variableErrors(
+  storyData: StoryData,
+  schema: Parameters<typeof validatePassages>[1],
+): string[] {
+  const storeVarMacros = getMacroRegistry()
+    .filter((m) => m.storeVar)
+    .map((m) => m.name);
+  return validatePassages(storyData.passages, schema, storeVarMacros);
+}
+
 /**
  * The markup errors (malformed markup, unknown macros, syntax errors in
  * code) of the passages for which `only` holds, with the macros and widgets
@@ -134,10 +149,6 @@ export function boot() {
   }
 
   const schema = parseStoryVariables(storyVarsPassage.content);
-  // Include input macros registered by author JS, which ran above.
-  const storeVarMacros = getMacroRegistry()
-    .filter((m) => m.storeVar)
-    .map((m) => m.name);
   // Pass 1: Register the block widgets as block macros BEFORE any passage
   // is parsed (validation and StoryInit included), so that passages
   // invoking block widgets and widget bodies using other block widgets
@@ -146,7 +157,7 @@ export function boot() {
     registerBlockMacro(name);
   }
 
-  const errors = validatePassages(storyData.passages, schema, storeVarMacros);
+  const errors = variableErrors(storyData, schema);
   // StoryInit's markup must be valid before it runs; the other passages are
   // validated once it has run, as it may define macros (see below).
   errors.push(...markupErrors(storyData, (p) => p.name === 'StoryInit'));
@@ -186,8 +197,12 @@ export function boot() {
   // storyinit after all state is settled (defaults + StoryInit + session)
   initializeStory(loadSession(storyData.ifid));
 
-  // Every other passage's markup, now that StoryInit may have defined macros
-  const markup = markupErrors(storyData, (p) => p.name !== 'StoryInit');
+  // Every other passage's markup, now that StoryInit may have defined macros;
+  // so are the variable references, which macros' parameters decide
+  const markup = [
+    ...variableErrors(storyData, schema),
+    ...markupErrors(storyData, (p) => p.name !== 'StoryInit'),
+  ];
   if (markup.length > 0) stopWithErrors(markup);
 
   // Pass 2: Full parse and register widgets from passages tagged "widget"

package/src/quick-actions.ts

@@ -0,0 +1,23 @@
+import { useStoryStore } from './store';
+import { showRuntimeError } from './runtime-errors';
+
+/**
+ * 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).
+ */
+export async function quickSave(): Promise<void> {
+  try {
+    await useStoryStore.getState().save();
+  } catch (error) {
+    showRuntimeError('The game could not be saved:', error);
+  }
+}
+
+export async function quickLoad(): Promise<void> {
+  try {
+    await useStoryStore.getState().load();
+  } catch (error) {
+    showRuntimeError('The saved game could not be loaded:', error);
+  }
+}

package/src/saves/save-manager.ts

@@ -291,10 +291,12 @@ export const createSave = queued(createSaveNow);
 
 async function createSaveNow(
   ifid: string,
-  playthroughId: string,
+  playthroughPromise: string | PromiseLike<string>,
   payload: SavePayload,
   custom: Record<string, unknown> = {},
 ): Promise<SaveRecord> {
+  const playthroughId = await playthroughPromise;
+  if (!playthroughId) throw new Error('No playthrough');
   const now = new Date().toISOString();
   const meta: SaveMeta = {
     id: randomUUID(),
@@ -313,6 +315,10 @@ async function createSaveNow(
 }
 
 /**
+ * A playthrough passed as a promise (see resolvePlaythroughId) is awaited
+ * inside the operation, so the call takes its place in the order of
+ * operations when it is made.
+ *
  * Replace the payload of an existing save, keeping its ID and `createdAt`.
  * Pass the current `playthroughId` when the new payload comes from the
  * running game: the save then holds that playthrough's state, so it is
@@ -333,8 +339,9 @@ async function overwriteSaveNow(
   saveId: string,
   payload: SavePayload,
   custom?: Record<string, unknown>,
-  playthroughId?: string,
+  playthroughPromise?: string | PromiseLike<string>,
 ): Promise<SaveRecord | undefined> {
+  const playthroughId = await playthroughPromise;
   const backend = await getBackend();
   const existing = await backend.getSave(saveId);
   if (!existing) return undefined;
@@ -706,14 +713,22 @@ const 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.
  */
-export function saveSession(ifid: string, payload: SavePayload): void {
+export function saveSession(
+  ifid: string,
+  payload: SavePayload,
+): { error: unknown } | undefined {
   const text = JSON.stringify(encodePayload(payload));
   try {
     sessionStorage.setItem(`${SESSION_KEY_PREFIX}${ifid}`, text);
-  } catch {
-    // sessionStorage unavailable or full — silently ignore
+  } catch (error) {
+    return { error };
   }
+  return undefined;
 }
 
 /**
@@ -882,13 +897,15 @@ async function clearAllDataNow(): Promise<void> {
   resetBackend();
 
   // Clear all Spindle session keys from sessionStorage
-  if (typeof sessionStorage !== 'undefined') {
+  try {
     const toRemove: string[] = [];
     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 {
+    // no sessionStorage (or access denied): nothing to clear
   }
 }
 

package/src/saves/storage.ts

@@ -410,8 +410,10 @@ function createIDBBackend(): StorageBackend {
 let _backend: StorageBackend | null = null;
 
 async function detectBackend(): Promise<StorageBackend> {
-  if (typeof indexedDB !== 'undefined') {
-    try {
+  // Even looking up a storage API can throw (a sandboxed frame without
+  // allow-same-origin denies the localStorage property), hence the try.
+  try {
+    if (typeof indexedDB !== 'undefined') {
       await new Promise<void>((resolve, reject) => {
         const req = indexedDB.open('__spindle_probe__', 1);
         req.onsuccess = () => {
@@ -422,21 +424,21 @@ async function detectBackend(): Promise<StorageBackend> {
         req.onerror = () => reject(req.error);
       });
       return createIDBBackend();
-    } catch {
-      // fall through
     }
+  } catch {
+    // fall through
   }
 
-  if (typeof localStorage !== 'undefined') {
-    try {
+  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 {
-      // fall through
     }
+  } catch {
+    // fall through
   }
 
   return createMemoryBackend();

package/src/settings.ts

@@ -39,7 +39,11 @@ function storageKey(): string {
 }
 
 function persist(): void {
-  localStorage.setItem(storageKey(), JSON.stringify(values));
+  try {
+    localStorage.setItem(storageKey(), JSON.stringify(values));
+  } catch {
+    // storage unavailable or full: the setting holds for this session only
+  }
 }
 
 function loadFromStorage(): void {