@rohal12/spindle 0.51.3 → 0.52.0

package/src/components/macros/SaveManager.tsx

@@ -5,7 +5,7 @@ import {
   useRef,
   useContext,
 } from 'preact/hooks';
-import { useStoryStore } from '../../store';
+import { useStoryStore, resolvePlaythroughId } from '../../store';
 import { isSaveExport, type SaveRecord } from '../../saves/types';
 import {
   getSavesGrouped,
@@ -22,6 +22,7 @@ import {
 } from '../../saves/save-manager';
 import { DialogCloseContext } from '../PassageDialog';
 import { defineMacro } from '../../define-macro';
+import { errorMessage } from '../../utils/error-message';
 
 function relativeTime(iso: string): string {
   const diff = Date.now() - new Date(iso).getTime();
@@ -84,15 +85,25 @@ export function SaveManagerContent() {
     }
   }, [renamingId]);
 
+  // Actions are async and may finish after the manager closed: once
+  // unmounted, no status is shown and no timer is left behind.
+  const mounted = useRef(true);
   const statusTimer = useRef<number>();
+  const closeTimer = useRef<number>();
   const showStatus = (text: string, type: 'success' | 'error' = 'success') => {
+    if (!mounted.current) return;
     clearTimeout(statusTimer.current);
     setStatus({ text, type });
     statusTimer.current = window.setTimeout(() => setStatus(null), 3000);
   };
 
   useEffect(() => {
-    return () => clearTimeout(statusTimer.current);
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+      clearTimeout(statusTimer.current);
+      clearTimeout(closeTimer.current);
+    };
   }, []);
 
   const toggleCollapse = (id: string) => {
@@ -106,11 +117,16 @@ export function SaveManagerContent() {
 
   // Dialog saves are not slot saves, so the save hooks get no slot.
   const handleNewSave = async () => {
-    if (!ifid || !playthroughId) return;
+    if (!ifid) return;
+    // The playthrough current at the click, which a restart may have
+    // switched since this render
+    const playthrough = resolvePlaythroughId();
     try {
-      await saveWithHooks(undefined, undefined, beginSave, (payload) =>
-        createSave(ifid, playthroughId, payload),
-      );
+      await saveWithHooks(undefined, undefined, beginSave, async (payload) => {
+        const ptId = await playthrough;
+        if (!ptId) throw new Error('No playthrough');
+        return createSave(ifid, ptId, payload);
+      });
       showStatus('Save created');
       await refresh();
     } catch {
@@ -119,9 +135,12 @@ export function SaveManagerContent() {
   };
 
   const handleOverwrite = async (saveId: string) => {
+    const playthrough = resolvePlaythroughId();
     try {
       await saveWithHooks(undefined, undefined, beginSave, async (payload) => {
-        if (!(await overwriteSave(saveId, payload))) {
+        // Only the current playthrough's saves offer "Save Here"
+        const ptId = (await playthrough) || undefined;
+        if (!(await overwriteSave(saveId, payload, undefined, ptId))) {
           throw new Error('Save not found');
         }
       });
@@ -134,10 +153,19 @@ export function SaveManagerContent() {
 
   const handleLoad = async (save: SaveRecord) => {
     try {
-      // Stored records hold serialized variables; the store expects live ones
-      loadFromPayload(deserializePayload(save.payload));
+      // Stored records hold serialized variables; the store expects live
+      // ones. The game moves to the save's playthrough.
+      loadFromPayload(
+        deserializePayload(save.payload),
+        undefined,
+        save.meta.playthroughId,
+      );
       showStatus('Game loaded');
-      if (closeDialog) setTimeout(closeDialog, 500);
+      if (closeDialog) {
+        closeTimer.current = window.setTimeout(closeDialog, 500);
+      }
+      // A playthrough deleted since the list was read is recorded again
+      await refresh();
     } catch {
       showStatus('Failed to load save', 'error');
     }
@@ -221,10 +249,7 @@ export function SaveManagerContent() {
       showStatus('Save imported');
       await refresh();
     } catch (err) {
-      showStatus(
-        err instanceof Error ? err.message : 'Failed to import save',
-        'error',
-      );
+      showStatus(errorMessage(err, 'Failed to import save'), 'error');
     }
   };
 

package/src/components/macros/Span.tsx

@@ -6,4 +6,5 @@ defineMacro({
   render({ children = [] }, ctx) {
     return ctx.wrap(ctx.renderNodes(children));
   },
+  text: ({ children = [] }, ctx) => ctx.renderText(children),
 });

package/src/components/macros/StoryTitle.tsx

@@ -16,4 +16,5 @@ defineMacro({
       </span>
     );
   },
+  text: () => useStoryStore.getState().storyData?.name || '',
 });

package/src/components/macros/Switch.tsx

@@ -47,4 +47,17 @@ defineMacro({
 
     return null;
   },
+  text({ rawArgs, branches = [] }, ctx) {
+    const switchValue = ctx.evaluate(rawArgs);
+    let defaultBranch: (typeof branches)[number] | null = null;
+    for (let i = 1; i < branches.length; i++) {
+      const branch = branches[i]!;
+      if (branch.rawArgs === '') {
+        defaultBranch = branch;
+      } else if (switchValue === ctx.evaluate(branch.rawArgs)) {
+        return ctx.renderText(branch.children);
+      }
+    }
+    return defaultBranch ? ctx.renderText(defaultBranch.children) : '';
+  },
 });

package/src/components/macros/Unset.tsx

@@ -1,31 +1,51 @@
 import { useStoryStore } from '../../store';
 import { defineMacro } from '../../define-macro';
+import { MacroError } from './MacroError';
 
 defineMacro({
   name: 'unset',
   render({ rawArgs }, ctx) {
     const ran = ctx.hooks.useRef(false);
+    const error = ctx.hooks.useRef<unknown>(null);
 
     if (!ran.current) {
       ran.current = true;
       const state = useStoryStore.getState();
       const name = rawArgs.trim();
 
-      if (name.startsWith('$')) {
-        state.deleteVariable(name.slice(1));
-      } else if (name.startsWith('_')) {
-        state.deleteTemporary(name.slice(1));
-      } else if (name.startsWith('%')) {
-        state.deleteTransient(name.slice(1));
-      } else if (name.startsWith('@')) {
-        ctx.update(name.slice(1), undefined);
-      } else {
+      try {
+        if (name.startsWith('$')) {
+          state.deleteVariable(name.slice(1));
+        } else if (name.startsWith('_')) {
+          state.deleteTemporary(name.slice(1));
+        } else if (name.startsWith('%')) {
+          state.deleteTransient(name.slice(1));
+        } else if (name.startsWith('@')) {
+          // Throws outside a locals scope ({for}, widget, {link}, {button})
+          ctx.update(name.slice(1), undefined);
+        } else {
+          throw new Error(
+            `{unset} expects a variable ($name, _name, %name, or @name), got "${name}"`,
+          );
+        }
+      } catch (err) {
+        error.current = err;
         console.error(
-          `spindle: {unset} expects a variable ($name, _name, %name, or @name), got "${name}"`,
+          `spindle: Error in {unset ${rawArgs}}${ctx.sourceLocation()}:`,
+          err,
         );
       }
     }
 
+    if (error.current) {
+      return (
+        <MacroError
+          macro="unset"
+          error={error.current}
+        />
+      );
+    }
+
     return null;
   },
 });

package/src/components/macros/VarDisplay.tsx

@@ -2,6 +2,14 @@ import { useStoryStore } from '../../store';
 import { useContext } from 'preact/hooks';
 import { LocalsValuesContext } from '../../markup/render';
 import { useInterpolate } from '../../hooks/use-interpolate';
+import { RESERVED_NAME, ownValue } from '../../utils/namespace';
+
+const SIGILS = {
+  variable: '$',
+  temporary: '_',
+  local: '@',
+  transient: '%',
+} as const;
 
 interface VarDisplayProps {
   name: string;
@@ -17,19 +25,28 @@ export function VarDisplay({ name, scope, className, id }: VarDisplayProps) {
   const localsValues = useContext(LocalsValuesContext);
   const parts = name.split('.');
   const root = parts[0]!;
+  // Own entries only, as the expression engine reads them
   const storeValue = useStoryStore((s) =>
     scope === 'variable'
-      ? s.variables[root]
+      ? ownValue(s.variables, root)
       : scope === 'temporary'
-        ? s.temporary[root]
+        ? ownValue(s.temporary, root)
         : scope === 'transient'
-          ? s.transient[root]
+          ? ownValue(s.transient, root)
           : undefined,
   );
 
+  if (root === RESERVED_NAME) {
+    return (
+      <span class="error">
+        {`{${SIGILS[scope]}${name} error: "${SIGILS[scope]}${root}" cannot be used as a variable name (${RESERVED_NAME} is reserved)}`}
+      </span>
+    );
+  }
+
   let value: unknown;
   if (scope === 'local') {
-    value = root in localsValues ? localsValues[root] : undefined;
+    value = ownValue(localsValues, root);
   } else {
     value = storeValue;
   }

package/src/components/macros/Watch.tsx

@@ -1,51 +1,100 @@
 import { defineMacro } from '../../define-macro';
 import { addMacroTrigger, removeTrigger } from '../../triggers';
 import type { WatchOptions } from '../../triggers';
+import { isWhitespace, readQuoted, readWholeQuoted } from './arg-utils';
 
-defineMacro({
-  name: 'watch',
-  render(props, ctx) {
-    const { hooks } = ctx;
+const WORD_RE = /\w+/y;
+const DIGITS_RE = /\d+/y;
 
-    // Parse: condition string + keyword options
-    const raw = props.rawArgs.trim();
-    // First quoted string is the condition
-    const condMatch = raw.match(/^(['"])(.*?)\1\s*/);
-    if (!condMatch) return null;
+/** Match the sticky regex `re` at `pos`, returning the matched text. */
+function matchAt(re: RegExp, src: string, pos: number): string | null {
+  re.lastIndex = pos;
+  return re.exec(src)?.[0] ?? null;
+}
 
-    const condition = condMatch[2]!;
-    const rest = raw.slice(condMatch[0].length);
+/**
+ * Parse `{watch "condition" keyword value …}`: a quoted condition followed
+ * by keyword options (`goto "X"`, `dialog "X"`, `run "X"`, `name "X"`,
+ * `priority N`, `once`). Quoted strings accept `\"`, `\'` and `\\` escapes.
+ * Returns `null` when the arguments do not start with a quoted condition.
+ */
+export function parseWatchArgs(
+  rawArgs: string,
+): { condition: string; options: WatchOptions } | null {
+  const raw = rawArgs.trim();
+  const cond = readQuoted(raw, 0);
+  if (!cond) return null;
 
-    const options: WatchOptions = {};
-    // Parse keyword args: goto "X", dialog "X", run "X", once, name "X", priority N
-    const kwRe = /(\w+)\s+(?:"([^"]*?)"|'([^']*?)'|(\d+))|(\w+)/g;
-    let m: RegExpExecArray | null;
-    while ((m = kwRe.exec(rest)) !== null) {
-      const key = m[1] ?? m[5];
-      const val = m[2] ?? m[3] ?? m[4];
-      if (!key) continue;
-      switch (key) {
-        case 'goto':
-          options.goto = val;
-          break;
-        case 'dialog':
-          options.dialog = val;
-          break;
-        case 'run':
-          options.run = val;
-          break;
-        case 'name':
-          options.name = val;
-          break;
-        case 'priority':
-          options.priority = val ? Number(val) : 0;
-          break;
-        case 'once':
-          options.once = true;
-          break;
+  const options: WatchOptions = {};
+  let i = cond.end;
+  while (i < raw.length) {
+    const key = matchAt(WORD_RE, raw, i);
+    if (!key) {
+      // Skip whitespace and stray characters, or a stray quoted string.
+      i = readQuoted(raw, i)?.end ?? i + 1;
+      continue;
+    }
+    i += key.length;
+
+    // A value is a quoted string or a digit run, after whitespace.
+    let val: string | undefined;
+    let j = i;
+    while (j < raw.length && isWhitespace(raw[j]!)) j++;
+    if (j > i) {
+      const quoted = readQuoted(raw, j);
+      const digits = quoted ? null : matchAt(DIGITS_RE, raw, j);
+      if (quoted) {
+        val = quoted.value;
+        i = quoted.end;
+      } else if (digits) {
+        val = digits;
+        i = j + digits.length;
       }
     }
 
+    switch (key) {
+      case 'goto':
+        options.goto = val;
+        break;
+      case 'dialog':
+        options.dialog = val;
+        break;
+      case 'run':
+        options.run = val;
+        break;
+      case 'name':
+        options.name = val;
+        break;
+      case 'priority':
+        options.priority = val ? Number(val) : 0;
+        break;
+      case 'once':
+        options.once = true;
+        break;
+    }
+  }
+
+  return { condition: cond.value, options };
+}
+
+/**
+ * Parse the watcher name of `{unwatch "name"}`: a quoted string, with the
+ * same escapes as `{watch}`, or a bare name.
+ */
+export function parseUnwatchName(rawArgs: string): string {
+  const raw = rawArgs.trim();
+  return readWholeQuoted(raw) ?? raw.replace(/^['"]|['"]$/g, '');
+}
+
+defineMacro({
+  name: 'watch',
+  render(props, ctx) {
+    const { hooks } = ctx;
+
+    const parsed = parseWatchArgs(props.rawArgs);
+    if (!parsed) return null;
+    const { condition, options } = parsed;
+
     // Register during render (like {set}) — triggers survive navigation
     // and are cleaned up via resetTriggers() on restart or {unwatch}.
     // Remounts (revisits, re-rendered branches) keep the registered watcher.
@@ -62,8 +111,7 @@ defineMacro({
 defineMacro({
   name: 'unwatch',
   render(props, ctx) {
-    const raw = props.rawArgs.trim();
-    const name = raw.replace(/^['"]|['"]$/g, '');
+    const name = parseUnwatchName(props.rawArgs);
 
     const ran = ctx.hooks.useRef(false);
     if (!ran.current) {

package/src/components/macros/Widget.tsx

@@ -2,11 +2,14 @@ import { registerWidget } from '../../widgets/widget-registry';
 import { astContainsChildren } from '../../widgets/ast-scanner';
 import { registerBlockMacro } from '../../markup/ast';
 import { defineMacro } from '../../define-macro';
+import { checkVariableName } from '../../utils/namespace';
+import { MacroError } from './MacroError';
 
 function parseWidgetDef(rawArgs: string): { name: string; params: string[] } {
   const tokens = rawArgs.trim().split(/\s+/);
   const name = tokens[0]!.replace(/["']/g, '');
   const params = tokens.slice(1).filter((t) => t.startsWith('@'));
+  for (const param of params) checkVariableName(param.slice(1), param);
   return { name, params };
 }
 
@@ -14,12 +17,20 @@ defineMacro({
   name: 'widget',
   block: true,
   render({ rawArgs, children = [] }, ctx) {
-    const { name, params } = parseWidgetDef(rawArgs);
+    let parsed: ReturnType<typeof parseWidgetDef> | undefined;
+    let error: unknown;
+    try {
+      parsed = parseWidgetDef(rawArgs);
+    } catch (err) {
+      error = err;
+    }
+    const { name, params } = parsed ?? { name: '', params: [] };
 
     const childrenKey = JSON.stringify(children);
     const paramsKey = params.join(',');
 
     ctx.hooks.useLayoutEffect(() => {
+      if (!parsed) return;
       // Widgets whose body renders {@children} take a closing tag; register
       // them as block macros so passages parsed later nest their content.
       const isBlock = astContainsChildren(children);
@@ -27,6 +38,14 @@ defineMacro({
       if (isBlock) registerBlockMacro(name);
     }, [name, childrenKey, paramsKey]);
 
+    if (error) {
+      return (
+        <MacroError
+          macro="widget"
+          error={error}
+        />
+      );
+    }
     return null;
   },
 });