@rohal12/spindle 0.59.7 → 0.59.9

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.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));
   }

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/PassageDialog.tsx

@@ -83,9 +83,9 @@ export function PassageDialog({
 
   const handleBackdrop = (e: MouseEvent) => {
     if (!dismissible) return;
-    if ((e.target as HTMLElement).classList.contains('dialog-overlay')) {
-      stableOnClose();
-    }
+    // Only a click on this overlay itself: a nested dialog's backdrop click
+    // bubbles through the outer overlay, whose target is not its own.
+    if (e.target === e.currentTarget) stableOnClose();
   };
 
   const cls = panelClass ? `dialog-panel ${panelClass}` : 'dialog-panel';
@@ -105,6 +105,7 @@ export function PassageDialog({
         >
           {showCloseButton && (
             <button
+              type="button"
               class="dialog-close"
               aria-label="Close"
               onClick={stableOnClose}

package/src/components/macros/Button.tsx

@@ -26,6 +26,7 @@ defineMacro({
 
     return (
       <button
+        type="button"
         id={ctx.id}
         class={ctx.cls}
         onClick={handleClick}

package/src/components/macros/Cycle.tsx

@@ -32,6 +32,7 @@ defineMacro({
 
     return (
       <button
+        type="button"
         id={ctx.id}
         class={ctx.cls}
         onClick={handleClick}

package/src/components/macros/Dialog.tsx

@@ -22,6 +22,7 @@ defineMacro({
     return (
       <>
         <button
+          type="button"
           id={ctx.id}
           class={ctx.cls}
           onClick={() => setOpen(true)}

package/src/components/macros/Do.tsx

@@ -1,5 +1,5 @@
 import { defineMacro } from '../../define-macro';
-import { logMacroError } from './MacroError';
+import { useRunOnce } from './MacroError';
 
 defineMacro({
   name: 'do',
@@ -8,16 +8,8 @@ defineMacro({
     // The parser keeps the body verbatim as a single text node
     const code = ctx.collectText(children);
 
-    ctx.hooks.useLayoutEffect(() => {
-      // Before the code runs: it may navigate away from this passage
-      const location = ctx.sourceLocation();
-      try {
-        ctx.mutate(code);
-      } catch (err) {
-        logMacroError('do', err, location);
-      }
-    }, []);
-
-    return null;
+    // During the first render, like {set}: the macros after it in the
+    // passage run later and see its writes (a layout effect ran after them).
+    return useRunOnce('do', '', () => ctx.mutate(code));
   },
 });

package/src/components/macros/MacroError.tsx

@@ -49,7 +49,7 @@ export function useRunOnce(macro: string, rawArgs: string, effect: () => void) {
       effect();
     } catch (error) {
       failure.current = { error };
-      logMacroError(`${macro} ${rawArgs}`, error, location);
+      logMacroError(`${macro} ${rawArgs}`.trim(), error, location);
     }
   }
 

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';
@@ -62,6 +63,7 @@ export function defineMenubarAction(config: MenubarActionConfig) {
       return (
         <>
           <button
+            type="button"
             id={ctx.id}
             class={cls}
             onClick={perform}
@@ -110,8 +112,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 +127,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

@@ -8,7 +8,7 @@ import { resolveTransition, type ResolvedTransition } from '../../transition';
 /**
  * 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
  */
@@ -28,6 +28,10 @@ function createSnapshot(
   // Disable interaction
   clone.style.pointerEvents = 'none';
   clone.style.userSelect = 'none';
+  // Visual only: out of the tab order and the accessibility tree, and its
+  // controls (copied with their inline handlers) can not be activated
+  clone.setAttribute('inert', '');
+  clone.setAttribute('aria-hidden', 'true');
 
   // Pause/mute media
   const mediaEls = clone.querySelectorAll('audio, video');
@@ -80,6 +84,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 +189,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

@@ -21,6 +21,7 @@ import {
   saveWithHooks,
   type PlaythroughGroup,
 } from '../../saves/save-manager';
+import { getBackendType } from '../../saves/storage';
 import { DialogCloseContext } from '../PassageDialog';
 import { defineMacro } from '../../define-macro';
 import { errorMessage } from '../../utils/error-message';
@@ -56,6 +57,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);
@@ -70,10 +72,15 @@ export function SaveManagerContent() {
       'loadFromPayload',
     );
   const ifid = storyData?.ifid ?? '';
+  // Saves held in memory only (no browser storage is available) are lost
+  // when the page is reloaded or closed: told to the player, who can export
+  const [temporary, setTemporary] = useState(false);
 
   const refresh = useCallback(async () => {
     if (!ifid) return;
     const data = await getSavesGrouped(ifid);
+    // After the read: the storage in use is known by now
+    setTemporary(getBackendType() === 'memory');
     setGroups(data);
     setLoading(false);
   }, [ifid]);
@@ -130,7 +137,7 @@ export function SaveManagerContent() {
         // Queued now, in call order with other storage operations
         return createSave(ifid, playthrough, payload);
       });
-      showStatus('Save created');
+      showStatus(temporary ? 'Save created (temporary)' : 'Save created');
       await refresh();
     } catch {
       showStatus('Failed to create save', 'error');
@@ -191,6 +198,7 @@ export function SaveManagerContent() {
   };
 
   const handleRenameStart = (save: SaveRecord) => {
+    renameCancelled.current = false;
     setRenamingId(save.meta.id);
     setRenameValue(save.meta.title);
   };
@@ -209,7 +217,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) => {
@@ -263,12 +282,14 @@ export function SaveManagerContent() {
         <div class="saves-header-left">
           <div class="saves-mode-toggle">
             <button
+              type="button"
               class={mode === 'save' ? 'active' : ''}
               onClick={() => setMode('save')}
             >
               Save
             </button>
             <button
+              type="button"
               class={mode === 'load' ? 'active' : ''}
               onClick={() => setMode('load')}
             >
@@ -278,8 +299,19 @@ export function SaveManagerContent() {
         </div>
       </div>
 
+      {temporary && (
+        <div
+          class="saves-notice"
+          role="status"
+        >
+          Saves can not be kept in this browser: they are lost when the page is
+          reloaded or closed. Export a save to keep it.
+        </div>
+      )}
+
       <div class="saves-toolbar">
         <button
+          type="button"
           class="saves-toolbar-button"
           onClick={handleImport}
         >
@@ -350,7 +382,7 @@ export function SaveManagerContent() {
                                 )
                               }
                               onKeyDown={handleRenameKeyDown}
-                              onBlur={handleRenameConfirm}
+                              onBlur={handleRenameBlur}
                             />
                           ) : (
                             <div class="save-slot-title">{save.meta.title}</div>
@@ -363,6 +395,7 @@ export function SaveManagerContent() {
                         <div class="save-slot-actions">
                           {mode === 'save' ? (
                             <button
+                              type="button"
                               class="save-slot-action primary"
                               onClick={() => handleOverwrite(save.meta.id)}
                             >
@@ -370,6 +403,7 @@ export function SaveManagerContent() {
                             </button>
                           ) : (
                             <button
+                              type="button"
                               class="save-slot-action primary"
                               onClick={() => handleLoad(save)}
                             >
@@ -377,18 +411,21 @@ export function SaveManagerContent() {
                             </button>
                           )}
                           <button
+                            type="button"
                             class="save-slot-action"
                             onClick={() => handleRenameStart(save)}
                           >
                             Rename
                           </button>
                           <button
+                            type="button"
                             class="save-slot-action"
                             onClick={() => handleExport(save.meta.id)}
                           >
                             Export
                           </button>
                           <button
+                            type="button"
                             class="save-slot-action danger"
                             onClick={() => handleDelete(save.meta.id)}
                           >
@@ -400,6 +437,7 @@ export function SaveManagerContent() {
 
                     {mode === 'save' && isCurrentPt && (
                       <button
+                        type="button"
                         class="save-slot-new"
                         onClick={handleNewSave}
                       >
@@ -419,6 +457,7 @@ export function SaveManagerContent() {
             <div class="playthrough-group">
               <div class="playthrough-saves">
                 <button
+                  type="button"
                   class="save-slot-new"
                   onClick={handleNewSave}
                 >

package/src/components/macros/Type.tsx

@@ -1,15 +1,54 @@
 import { defineMacro } from '../../define-macro';
 import { DELAY_PARAMETER } from './macro-args';
 
+/**
+ * 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: HTMLElement,
+  inner: HTMLElement,
+  count: number,
+): string | undefined {
+  const range = document.createRange();
+  if (!range.getClientRects) return undefined;
+  const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+  let left = count;
+  let end: { node: Node; offset: number } | undefined;
+  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 undefined;
+  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}")` : undefined;
+}
+
 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<HTMLSpanElement>(null);
+    const innerRef = useRef<HTMLSpanElement>(null);
+    const [clip, setClip] = useState<string | undefined>();
     const [totalChars, setTotalChars] = useState(0);
     const [visibleChars, setVisibleChars] = useState(0);
     const visibleCharsRef = useRef(0);
@@ -44,6 +83,21 @@ defineMacro({
 
     const done = visibleChars >= totalChars && totalChars > 0;
 
+    // Clip to the characters revealed so far, as laid out: remeasured when
+    // the count changes and when the width the text wraps in does.
+    useLayoutEffect(() => {
+      const root = containerRef.current;
+      const inner = innerRef.current;
+      if (!root || !inner || totalChars === 0 || done) {
+        setClip(undefined);
+        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' : '',
@@ -57,19 +111,14 @@ defineMacro({
         id={ctx.id}
         class={cls}
         ref={containerRef}
-        style={{
-          clipPath: totalChars > 0 && !done ? undefined : undefined,
-        }}
       >
         <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)`
-                : undefined,
+            clipPath: clip,
           }}
         >
           {ctx.renderInlineNodes(children)}

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/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 {