@rohal12/spindle 0.59.15 → 0.59.17

package/dist/pkg/story-variables.js

@@ -10125,7 +10125,30 @@ function errorMessage(err, fallback) {
 	return fallback ?? String(err);
 }
 //#endregion
+//#region src/utils/listeners.ts
+/**
+* A set of listeners to call when something happens: `subscribe` adds one and
+* returns the function that removes it, `notify` calls each one. A listener
+* removed or added while they are called is called or not as the set was
+* when `notify` started.
+*/
+function createListeners() {
+	const listeners = /* @__PURE__ */ new Set();
+	return {
+		subscribe(listener) {
+			listeners.add(listener);
+			return () => {
+				listeners.delete(listener);
+			};
+		},
+		notify() {
+			for (const listener of [...listeners]) listener();
+		}
+	};
+}
+//#endregion
 //#region src/runtime-errors.ts
+var listeners = createListeners();
 /**
 * The error for `name`, a passage name that names no passage, used in the
 * passage `from`.
@@ -10133,6 +10156,7 @@ function errorMessage(err, fallback) {
 function noPassageError(name, from) {
 	return /* @__PURE__ */ new Error(`No passage named ${JSON.stringify(name)} (in passage ${JSON.stringify(from)})`);
 }
+listeners.subscribe;
 //#endregion
 //#region src/components/macros/arg-utils.ts
 /**
@@ -11250,16 +11274,25 @@ var VALID_VAR_TYPES = new Set([
 	"string",
 	"boolean"
 ]);
-function inferSchema(value) {
+/**
+* The schema of a default value. An object met again (a backreference, a
+* shared subtree) has the schema made for it the first time, so a cyclic
+* default gives a schema that refers to itself instead of recursing forever.
+*/
+function inferSchema(value, seen = /* @__PURE__ */ new Map()) {
 	if (Array.isArray(value)) return { type: "array" };
 	if (value === null) return { type: "null" };
 	if (typeof value === "object") {
+		const known = seen.get(value);
+		if (known) return known;
 		const fields = /* @__PURE__ */ new Map();
-		for (const [key, val] of Object.entries(value)) fields.set(key, inferSchema(val));
-		return {
+		const schema = {
 			type: "object",
 			fields
 		};
+		seen.set(value, schema);
+		for (const [key, val] of Object.entries(value)) fields.set(key, inferSchema(val, seen));
+		return schema;
 	}
 	const jsType = typeof value;
 	if (!VALID_VAR_TYPES.has(jsType)) throw new Error(`Unsupported type "${jsType}" for value ${String(value)}. Expected number, string, boolean, array, or object.`);

package/package.json

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

package/src/components/macros/For.tsx

@@ -3,7 +3,11 @@ import { LocalsValuesContext } from '../../markup/render';
 import { defineMacro } from '../../define-macro';
 import { MacroError } from './MacroError';
 import { stableKey } from '../../utils/stable-key';
-import { controlEditVersion, editedItem } from '../../utils/control-edits';
+import {
+  ItemEditContext,
+  controlEditVersion,
+  editedItems,
+} from '../../utils/control-edits';
 import type { ASTNode } from '../../markup/ast';
 import { checkVariableName } from '../../utils/namespace';
 import { readState } from '../../execute-mutation';
@@ -129,18 +133,17 @@ defineMacro({
 
     const { itemVar, indexVar } = loop;
     // An iteration is remounted when its item's contents change, so mount-only
-    // macros run again for the new item (#45) -- unless the change is a
-    // reader editing the item through a control: remounting would drop the
-    // control's focus after the first keystroke.
-    const since = keys.edits;
-    const { variables } = readState();
+    // macros run again for the new item (#45) -- unless the change is an edit
+    // of the item (see control-edits): a reader typing into a control, which
+    // a remount would take the focus from, or code the iterations ran, which
+    // a remount would run again (#400).
+    const edited = editedItems(keys.edits, readState());
     keys.edits = controlEditVersion();
     const generations = list.map((item, i) => {
       const contents = stableKey(item);
       if (
         keys.generations[i] === undefined ||
-        (contents !== keys.contents[i] &&
-          !editedItem(since, variables, list, item, i))
+        (contents !== keys.contents[i] && !edited(list, item, i))
       ) {
         keys.generations[i] = keys.next++;
       }
@@ -160,7 +163,11 @@ defineMacro({
       />
     ));
 
-    return ctx.wrap(content);
+    return ctx.wrap(
+      <ItemEditContext.Provider value={true}>
+        {content}
+      </ItemEditContext.Provider>,
+    );
   },
   text({ rawArgs, children = [] }, ctx) {
     const { itemVar, indexVar, listExpr } = loopArgs(rawArgs, ctx.args);

package/src/components/macros/PassageDisplay.tsx

@@ -9,6 +9,7 @@ import { useStoryStore, type StoryState } from '../../store';
 import {
   useStoryFields,
   FrozenStateContext,
+  OutgoingContext,
 } from '../../hooks/use-story-fields';
 import { Passage, renderPassageContent } from '../Passage';
 import { defineMacro } from '../../define-macro';
@@ -140,6 +141,11 @@ defineMacro({
       (state: StoryState) => state.navigationId !== displayedId,
       [displayedId],
     );
+    // Read live: a timer asks it before the outgoing tree has unmounted
+    const hasLeft = useCallback(
+      () => isOutgoing(useStoryStore.getState()),
+      [isOutgoing],
+    );
     const lastElement = useRef<preact.VNode | null>(null);
 
     // Container ref for snapshot insertion
@@ -350,7 +356,9 @@ defineMacro({
         >
           {passageElement && (
             <FrozenStateContext.Provider value={isOutgoing}>
-              {passageElement}
+              <OutgoingContext.Provider value={hasLeft}>
+                {passageElement}
+              </OutgoingContext.Provider>
             </FrozenStateContext.Provider>
           )}
         </div>

package/src/components/macros/Repeat.tsx

@@ -1,6 +1,7 @@
 import { createContext } from 'preact';
 import { defineMacro } from '../../define-macro';
 import { DELAY_PARAMETER } from './macro-args';
+import { OutgoingContext } from '../../hooks/use-story-fields';
 
 export const RepeatContext = createContext<{ stop: () => void }>({
   stop: () => {},
@@ -12,17 +13,21 @@ defineMacro({
   interpolate: true,
   parameters: [DELAY_PARAMETER],
   render({ children = [] }, ctx) {
-    const { useState, useEffect, useCallback } = ctx.hooks;
+    const { useState, useEffect, useCallback, useContext } = ctx.hooks;
 
     const delay = ctx.args.delay ?? 0;
     const [count, setCount] = useState(0);
     const [stopped, setStopped] = useState(false);
 
+    const hasLeft = useContext(OutgoingContext);
+
     const stop = useCallback(() => setStopped(true), []);
 
     useEffect(() => {
       if (stopped) return;
       const interval = setInterval(() => {
+        // The passage was left: its body must not run again (#410)
+        if (hasLeft?.()) return;
         setCount((c) => c + 1);
       }, delay);
       return () => clearInterval(interval);

package/src/components/macros/Timed.tsx

@@ -1,6 +1,7 @@
 import { defineMacro } from '../../define-macro';
 import { DELAY_PARAMETER, parseMacroArgs } from './macro-args';
 import { wrapContent } from './display';
+import { OutgoingContext } from '../../hooks/use-story-fields';
 
 /** The parameters of {timed} and of each {next}: the delay before it shows. */
 const TIMED_PARAMETERS = [DELAY_PARAMETER] as const;
@@ -11,7 +12,8 @@ defineMacro({
   interpolate: true,
   parameters: TIMED_PARAMETERS,
   render({ branches = [] }, ctx) {
-    const { useState, useEffect, useMemo } = ctx.hooks;
+    const { useState, useEffect, useMemo, useContext } = ctx.hooks;
+    const hasLeft = useContext(OutgoingContext);
 
     const sections = useMemo(() => {
       return branches.map((branch) => ({
@@ -31,6 +33,8 @@ defineMacro({
       const delay = sections[nextIndex]!.delay;
 
       const timer = setTimeout(() => {
+        // The passage was left: its body must not run (#410)
+        if (hasLeft?.()) return;
         setVisibleIndex(nextIndex);
       }, delay);
 

package/src/components/macros/Watch.tsx

@@ -1,5 +1,12 @@
 import { defineMacro } from '../../define-macro';
-import { addMacroTrigger, removeTrigger } from '../../triggers';
+import { FrozenStateContext } from '../../hooks/use-story-fields';
+import { useStoryStore } from '../../store';
+import {
+  addMacroTrigger,
+  removeTrigger,
+  subscribeTriggerResets,
+  triggerResets,
+} from '../../triggers';
 
 defineMacro({
   name: 'watch',
@@ -34,9 +41,22 @@ defineMacro({
     // 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.
-    const registered = hooks.useRef(false);
-    if (!registered.current) {
-      registered.current = true;
+    // A {watch} still mounted when a restart forgets the watchers (in the
+    // story interface) registers it again for the new game (#402); one in a
+    // passage on its way out or a finished click body does not.
+    const frozen = hooks.useContext(FrozenStateContext);
+    const [, rerender] = hooks.useState(0);
+    hooks.useEffect(
+      () => subscribeTriggerResets(() => rerender((n) => n + 1)),
+      [],
+    );
+    const registered = hooks.useRef<number | null>(null);
+    if (
+      registered.current === null ||
+      (registered.current !== triggerResets() &&
+        !frozen?.(useStoryStore.getState()))
+    ) {
+      registered.current = triggerResets();
       addMacroTrigger(condition, options);
     }
 

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

@@ -10,11 +10,16 @@ import {
 } from '../../markup/render';
 import type { ASTNode } from '../../markup/ast';
 import { useRenderOptions } from '../../hooks/use-render-options';
-import { FrozenStateContext } from '../../hooks/use-story-fields';
+import {
+  FrozenStateContext,
+  OutgoingContext,
+} from '../../hooks/use-story-fields';
 import { liveLocalsView } from '../../utils/live-locals';
 import { runWithCommittedMutations } from '../../execute-mutation';
+import { subscribeStateReplacement } from '../../store';
 import { RepeatContext } from './Repeat';
 import { DialogCloseContext } from '../PassageDialog';
+import { ItemEditContext } from '../../utils/control-edits';
 
 const frozenAlways = () => true;
 
@@ -26,13 +31,16 @@ const frozenAlways = () => true;
  * once it has rendered, so it runs once per click. It 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.
+ * finish; the passage leaving cancels it, and so does a restart or a load
+ * replacing the game, which a control of the story interface outlives
+ * (#401).
  *
  * 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
  * through a live view, so a local assigned earlier in the body is visible),
  * nobr/inline rendering, the enclosing block widget's {@children}, the
- * enclosing {repeat}'s {stop} and the enclosing dialog's close callback.
+ * enclosing {repeat}'s {stop} and the enclosing dialog's close callback and whether it runs in a {for} iteration
+ * (#411) and the owning passage's departure (#410).
  * The body then behaves as if it rendered in place.
  *
  * The body's macros read story state from the store. Run from mutation code
@@ -47,16 +55,26 @@ export function useDetachedBody(): (children: ASTNode[]) => void {
   const widgetChildren = useContext(WidgetChildrenContext);
   const repeat = useContext(RepeatContext);
   const closeDialog = useContext(DialogCloseContext);
+  const inIteration = useContext(ItemEditContext);
+  const hasLeft = useContext(OutgoingContext);
 
   const mounted = useRef<HTMLElement[]>([]);
-  useEffect(
-    () => () => {
+  useEffect(() => {
+    const unsubscribe = subscribeStateReplacement(() => {
+      // After the code that replaced the game, which may be running in one
+      // of the bodies (`{do}Story.restart(){/do}`), has finished rendering
+      const replaced = mounted.current.splice(0);
+      queueMicrotask(() => {
+        for (const container of replaced) render(null, container);
+      });
+    });
+    return () => {
+      unsubscribe();
       for (const container of mounted.current.splice(0)) {
         render(null, container);
       }
-    },
-    [],
-  );
+    };
+  }, []);
 
   const run = (children: ASTNode[]) => {
     const locals = liveLocalsView(updater.getValues);
@@ -70,7 +88,11 @@ export function useDetachedBody(): (children: ASTNode[]) => void {
                 <WidgetChildrenContext.Provider value={widgetChildren}>
                   <RepeatContext.Provider value={repeat}>
                     <DialogCloseContext.Provider value={closeDialog}>
-                      {renderNodes(children, { nobr, inline, locals })}
+                      <ItemEditContext.Provider value={inIteration}>
+                        <OutgoingContext.Provider value={hasLeft}>
+                          {renderNodes(children, { nobr, inline, locals })}
+                        </OutgoingContext.Provider>
+                      </ItemEditContext.Provider>
                     </DialogCloseContext.Provider>
                   </RepeatContext.Provider>
                 </WidgetChildrenContext.Provider>

package/src/define-macro.ts

@@ -10,7 +10,11 @@ import {
   useMemo,
 } from 'preact/hooks';
 import { useInterpolate } from './hooks/use-interpolate';
-import { noteControlEdit } from './utils/control-edits';
+import {
+  ItemEditContext,
+  noteControlEdit,
+  runAsItemEdit,
+} from './utils/control-edits';
 import { useMergedLocals } from './hooks/use-merged-locals';
 import { useRenderOptions } from './hooks/use-render-options';
 import {
@@ -155,6 +159,7 @@ export function defineMacro<const P extends readonly ParameterDef[] = []>(
 
     // Always-on: cssClass + mutation
     const { update, getValues } = useContext(LocalsUpdateContext);
+    const inIteration = useContext(ItemEditContext);
     const renderOptions = useRenderOptions();
     const renderNodes = (
       nodes: ASTNode[],
@@ -190,7 +195,11 @@ export function defineMacro<const P extends readonly ParameterDef[] = []>(
       id,
       resolve,
       cls: macroClass(config.name, className),
-      mutate: (code: string) => executeMutation(code, getValues(), update),
+      // Code run inside a {for} iteration edits the loop's items (#400)
+      mutate: inIteration
+        ? (code: string) =>
+            runAsItemEdit(() => executeMutation(code, getValues(), update))
+        : (code: string) => executeMutation(code, getValues(), update),
       update,
       getValues,
       wrap: (content: ComponentChildren): VNode<any> =>
@@ -207,11 +216,19 @@ export function defineMacro<const P extends readonly ParameterDef[] = []>(
     if (config.storeVar) {
       const firstToken = readBoundVariable(props.rawArgs).replace(/["']/g, '');
 
-      if (firstToken.startsWith('%')) {
+      // Only story variables ($name) can be bound: another sigil would be
+      // read as a story key spelled with it (#414)
+      const unbindable: Record<string, string> = {
+        '%': 'transient variables',
+        _: 'temporary variables',
+        '@': 'locals',
+      };
+      const kind = unbindable[firstToken.charAt(0)];
+      if (kind) {
         return h(
           'span',
           { class: 'error' },
-          `{${config.name}}: transient variables (%${firstToken.slice(1)}) cannot be bound to input macros`,
+          `{${config.name}}: ${kind} (${firstToken}) cannot be bound to input macros`,
         );
       }
 

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

@@ -9,6 +9,8 @@ const FOCUSABLE = [
   'select:not([disabled])',
   'textarea:not([disabled])',
   'iframe',
+  'audio[controls]',
+  'video[controls]',
   'summary',
   '[contenteditable]',
   '[tabindex]',

package/src/hooks/use-story-fields.ts

@@ -15,6 +15,14 @@ export const FrozenStateContext = createContext<
   ((state: StoryState) => boolean) | null
 >(null);
 
+/**
+ * Tells a timer ({repeat}, {timed}) whether the passage it belongs to has
+ * been left: it must not run a new body then, for that would write into the
+ * destination's state until the outgoing tree unmounts (#410). Null outside
+ * a passage.
+ */
+export const OutgoingContext = createContext<(() => boolean) | null>(null);
+
 /**
  * Story state fields `keys`, re-rendering when any of them changes (as one
  * useStoryStore() selector per field would). The result keeps its identity

package/src/runtime-errors.ts

@@ -2,6 +2,7 @@
 // errors that would otherwise only reach the browser console.
 
 import { errorMessage } from './utils/error-message';
+import { createListeners } from './utils/listeners';
 
 /** A runtime error shown on the page until the player dismisses it. */
 export interface RuntimeError {
@@ -17,11 +18,11 @@ export interface RuntimeError {
 
 let errors: readonly RuntimeError[] = [];
 let nextId = 1;
-const listeners = new Set<() => void>();
+const listeners = createListeners();
 
 function update(next: readonly RuntimeError[]): void {
   errors = next;
-  for (const listener of listeners) listener();
+  listeners.notify();
 }
 
 /**
@@ -67,9 +68,4 @@ export function getRuntimeErrors(): readonly RuntimeError[] {
 }
 
 /** Call `listener` whenever the shown errors change; returns unsubscribe. */
-export function subscribeRuntimeErrors(listener: () => void): () => void {
-  listeners.add(listener);
-  return () => {
-    listeners.delete(listener);
-  };
-}
+export const subscribeRuntimeErrors = listeners.subscribe;

package/src/saves/save-manager.ts

@@ -608,6 +608,7 @@ async function fillSlot(
       slots.includes(slot) ? slots : [...slots, slot],
     );
   }
+  announceSlots(ifid);
 }
 
 /** Clear a slot: its pointer, and its entry in the slot index. */
@@ -616,6 +617,7 @@ async function emptySlot(ifid: string, slot?: string): Promise<void> {
   if (isNamedSlot(slot)) {
     await updateSlotIndex(ifid, (slots) => slots.filter((s) => s !== slot));
   }
+  announceSlots(ifid);
 }
 
 /** Clear every slot holding a save whose ID passes `test`. */
@@ -629,6 +631,65 @@ async function emptySlotsHolding(
   }
 }
 
+// --- Other tabs ---
+
+// The tabs of a story share its storage, but each keeps which slots hold a
+// save (the store's knownSaves, behind hasSave() and QuickLoad). A tab that
+// fills or empties slots tells the others, which look them up again (#404).
+
+const SLOTS_CHANNEL = 'spindle.slots';
+/** Every story's slots: what clearing all data announces. */
+const ALL_STORIES = '*';
+let slotsChannel: BroadcastChannel | null | undefined;
+
+function getSlotsChannel(): BroadcastChannel | null {
+  if (slotsChannel === undefined) {
+    try {
+      slotsChannel = new BroadcastChannel(SLOTS_CHANNEL);
+      // Node (headless runs) would not exit while it is open
+      (slotsChannel as { unref?: () => void }).unref?.();
+    } catch {
+      // No BroadcastChannel: tabs catch up when shown (see watchSlotChanges)
+      slotsChannel = null;
+    }
+  }
+  return slotsChannel;
+}
+
+/** Tell the story's other tabs that its slots changed. */
+function announceSlots(ifid: string): void {
+  try {
+    getSlotsChannel()?.postMessage(ifid);
+  } catch {
+    // A tab that cannot tell the others leaves them to catch up when shown
+  }
+}
+
+/**
+ * Call `onChange` when another tab may have filled or emptied the story's
+ * slots: when it says so, and when this tab is shown again. Returns the
+ * function that stops it.
+ */
+export function watchSlotChanges(
+  ifid: string,
+  onChange: () => void,
+): () => void {
+  const channel = getSlotsChannel();
+  const onMessage = (event: MessageEvent) => {
+    if (event.data === ifid || event.data === ALL_STORIES) onChange();
+  };
+  const onShown = () => {
+    if (document.visibilityState === 'visible') onChange();
+  };
+  const doc = typeof document === 'undefined' ? undefined : document;
+  channel?.addEventListener('message', onMessage);
+  doc?.addEventListener('visibilitychange', onShown);
+  return () => {
+    channel?.removeEventListener('message', onMessage);
+    doc?.removeEventListener('visibilitychange', onShown);
+  };
+}
+
 /** The `custom` keys that say which slot a save lives in. */
 const slotCustom = (slot: string | undefined) => ({
   isAutosave: !isNamedSlot(slot),
@@ -976,6 +1037,7 @@ export function clearGameData(ifid: string): Promise<void> {
     await backend.deletePlaythroughsByIfid(ifid);
     await backend.deleteMetaByIfid(ifid);
     clearSession(ifid);
+    announceSlots(ifid);
   });
 }
 
@@ -997,6 +1059,7 @@ async function clearAllDataNow(): Promise<void> {
   } catch {
     // no sessionStorage (or access denied): nothing to clear
   }
+  announceSlots(ALL_STORIES);
 }
 
 /**

package/src/store.ts

@@ -34,6 +34,7 @@ import {
   loadSlotSave,
   adoptPlaythrough,
   populateKnownSaves,
+  watchSlotChanges,
   getSlotSaveInfo,
   listSlotSaves,
   deleteSlotSave,
@@ -65,6 +66,7 @@ import {
   type PRNGSnapshot,
 } from './prng';
 import { errorMessage } from './utils/error-message';
+import { createListeners } from './utils/listeners';
 import {
   routeStoreUpdate,
   runWithCommittedMutations,
@@ -662,9 +664,25 @@ let slotLoadApplying: number | null = null;
 
 /** A replacement of the game state applied at its call. */
 function replaceStateNow(): void {
-  latestStateApplied = ++stateReplacementsIssued;
+  applyReplacement(++stateReplacementsIssued);
 }
 
+const replacementListeners = createListeners();
+
+/** Record that replacement `n` is applied, and tell the listeners. */
+function applyReplacement(n: number): void {
+  latestStateApplied = n;
+  replacementListeners.notify();
+}
+
+/**
+ * Call `listener` whenever a boot, restart or load replaces the game state:
+ * work the replaced game started that would write into the new one later (a
+ * click body's timer in the story interface, which stays mounted) is to
+ * stop (#401).
+ */
+export const subscribeStateReplacement = replacementListeners.subscribe;
+
 // ---------------------------------------------------------------------------
 // Runtime handler cleanup (auto-unsub on restart)
 // ---------------------------------------------------------------------------
@@ -1122,6 +1140,18 @@ function recordKnownSave(
   });
 }
 
+/** Look up which slots hold a save again, as an operation queued now. */
+function refreshKnownSaves(set: StoreSet, ifid: string): Promise<void> {
+  return populateKnownSaves(ifid).then((known) => {
+    set((state) => {
+      state.knownSaves = known;
+    });
+  });
+}
+
+/** Stops following the slot changes of other tabs (see init). */
+let stopWatchingSlots: (() => void) | undefined;
+
 /**
  * Queue the clearing of saved data, then restart now: the new playthrough
  * is stored after it, and operations issued from here on belong to the new
@@ -1242,6 +1272,15 @@ export const useStoryStore = create<StoryState>()(
             return '';
           }),
       );
+      // Another tab of the story saving or deleting changes the slots too
+      // (#404). Looked up in an operation queued then, so after those issued
+      // before; operations issued later update the cache after it.
+      stopWatchingSlots?.();
+      stopWatchingSlots = watchSlotChanges(storyData.ifid, () => {
+        refreshKnownSaves(set, storyData.ifid).catch(() => {
+          // The cache keeps what it had; the next change tries again
+        });
+      });
     },
 
     navigate: (passageName: string) => {
@@ -1596,12 +1635,7 @@ export const useStoryStore = create<StoryState>()(
       }
 
       return reported(
-        deletion.then(async () => {
-          const known = await populateKnownSaves(storyData.ifid);
-          set((state) => {
-            state.knownSaves = known;
-          });
-        }),
+        deletion.then(() => refreshKnownSaves(set, storyData.ifid)),
         'spindle: failed to delete playthrough',
       );
     },
@@ -1672,7 +1706,7 @@ export const useStoryStore = create<StoryState>()(
       // Before anything is replaced: an incompatible payload leaves the
       // running game as it is
       assertPassagesExist(get().storyData, payload);
-      latestStateApplied = replacement;
+      applyReplacement(replacement);
 
       emit('beforeload', slot);
 

package/src/story-api.ts

@@ -60,9 +60,10 @@ export type { StoryAction };
 export type { MacroMetadata };
 
 // Deferred-render promise lifecycle.
-// deferRender() creates a promise; ready() resolves it.
+// deferRender() creates a promise; ready() resolves it. A deferRender() while
+// one is pending keeps that promise: boot may already wait on it (#403).
 // index.tsx reads getReadyPromise() AFTER render(), which is after both
-// author JS and storyinit have run, so it always gets the final promise.
+// author JS and storyinit have run.
 let readyResolve: (() => void) | null = null;
 let readyPromise: Promise<void> | null = null;
 
@@ -518,7 +519,7 @@ function createStoryAPI(): StoryAPI {
 
     deferRender(): void {
       useStoryStore.getState().deferRender();
-      readyPromise = new Promise<void>((resolve) => {
+      readyPromise ??= new Promise<void>((resolve) => {
         readyResolve = resolve;
       });
     },