@rohal12/spindle 0.59.9 → 0.59.10

package/dist/pkg/headless.js

@@ -9735,13 +9735,24 @@ function tokenizeMarkup(source, options = {}) {
 //#endregion
 //#region src/hooks/use-story-fields.ts
 /**
+* Tells the components below when to keep the state they last rendered with,
+* given the store's current state: an owner (a click body, see
+* useDetachedBody; a passage on its way out, see PassageDisplay) provides it
+* so that a branch skipped earlier cannot run against later state (#351,
+* #352). It runs inside the store's own notification, before the owner could
+* re-render, which is why it is a predicate and not a flag.
+*/
+var FrozenStateContext = createContext(null);
+/**
 * Story state fields `keys`, re-rendering when any of them changes (as one
 * useStoryStore() selector per field would). The result keeps its identity
 * while the fields don't change, as the store's snapshot must.
 */
 function useStoryFields(...keys) {
 	const prev = useRef();
+	const freeze = useContext(FrozenStateContext);
 	return useStoryStore((s) => {
+		if (prev.current && freeze?.(s)) return prev.current;
 		const next = {};
 		for (const key of keys) next[key] = s[key];
 		return shallow(prev.current, next) ? prev.current : prev.current = next;
@@ -9754,7 +9765,7 @@ function useStoryFields(...keys) {
 * All four dicts use unprefixed keys suitable for evaluate/execute.
 */
 function useMergedLocals() {
-	const { variables, temporary, transient } = useStoryFields("variables", "temporary", "transient");
+	const { variables, temporary, transient, renderCounts } = useStoryFields("variables", "temporary", "transient", "renderCounts");
 	const localsValues = useContext(LocalsValuesContext);
 	return useMemo(() => {
 		return [
@@ -9767,7 +9778,8 @@ function useMergedLocals() {
 		variables,
 		temporary,
 		localsValues,
-		transient
+		transient,
+		renderCounts
 	]);
 }
 //#endregion
@@ -10887,7 +10899,17 @@ function LocalsScope({ body, parentValues, ownKeys }) {
 }
 //#endregion
 //#region src/components/macros/WidgetInvocation.tsx
-function WidgetInvocation({ body, params, rawArgs, invocationChildren }) {
+function WidgetInvocation(props) {
+	const { className, id } = props;
+	const content = /* @__PURE__ */ jsx(WidgetContent, { ...props });
+	if (!className && !id) return content;
+	return /* @__PURE__ */ jsx("span", {
+		class: className,
+		id,
+		children: content
+	});
+}
+function WidgetContent({ body, params, rawArgs, invocationChildren, className, id }) {
 	const renderOptions = useRenderOptions();
 	const parentValues = renderOptions.locals;
 	const [mergedVars, mergedTemps, mergedLocals, mergedTrans] = useMergedLocals();
@@ -11643,18 +11665,21 @@ function nodeKey(node) {
 }
 function renderMacro(node, key) {
 	if (isSubMacro(node.name)) return null;
+	const invocation = {
+		rawArgs: node.rawArgs,
+		className: node.className,
+		id: node.id
+	};
 	const widget = getWidget(node.name);
 	if (widget) return /* @__PURE__ */ jsx(WidgetInvocation, {
+		...invocation,
 		body: widget.body,
 		params: widget.params,
-		rawArgs: node.rawArgs,
 		invocationChildren: node.children
 	}, key);
 	const Component = getMacro(node.name);
 	if (Component) return /* @__PURE__ */ jsx(Component, {
-		rawArgs: node.rawArgs,
-		className: node.className,
-		id: node.id,
+		...invocation,
 		children: node.children,
 		branches: node.branches
 	}, key);
@@ -14177,6 +14202,7 @@ async function startNewPlaythroughNow(ifid, id = randomUUID()) {
 		await backend.setMeta(playthroughCountKey(ifid), num);
 	});
 	await backend.setMeta(currentPlaythroughKey(ifid), id);
+	saveSessionPlaythrough(ifid, id);
 	return id;
 }
 var PLAYTHROUGH_LABEL = /^Playthrough (\d+)$/;
@@ -14216,6 +14242,7 @@ async function adoptPlaythroughNow(ifid, id) {
 	await ensurePlaythrough(ifid, id, (/* @__PURE__ */ new Date()).toISOString());
 	const key = currentPlaythroughKey(ifid);
 	if (await backend.getMeta(key) !== id) await backend.setMeta(key, id);
+	saveSessionPlaythrough(ifid, id);
 }
 /**
 * Record the playthrough `id` of the story as "Imported", created at
@@ -14238,8 +14265,12 @@ async function ensurePlaythrough(ifid, id, createdAt) {
 */
 function establishPlaythrough(ifid) {
 	return inOrder(async () => {
+		const backend = await getBackend();
+		const own = loadSessionPlaythrough(ifid);
+		const id = own !== void 0 && (await backend.getPlaythroughsByIfid(ifid)).some((p) => p.id === own) ? own : await backend.getMeta(currentPlaythroughKey(ifid)) ?? await startNewPlaythroughNow(ifid);
+		saveSessionPlaythrough(ifid, id);
 		return {
-			id: await (await getBackend()).getMeta(currentPlaythroughKey(ifid)) ?? await startNewPlaythroughNow(ifid),
+			id,
 			knownSaves: await populateKnownSavesNow(ifid)
 		};
 	});
@@ -14542,12 +14573,16 @@ readingSlot(livePayload);
 * (see adoptPlaythrough) in the same operation: operations issued after the
 * load take effect in the loaded playthrough. Resolves to the live payload
 * and its playthrough, or undefined if the slot is empty.
+*
+* `check` is run on the payload first: when it throws, the load rejects and
+* the game stays in its playthrough (#357).
 */
-function loadSlotSave(ifid, slot) {
+function loadSlotSave(ifid, slot, check) {
 	return inOrder(async () => {
 		const record = await slotRecord(ifid, slot);
 		if (!record) return void 0;
 		const payload = decodePayload(record.payload);
+		check?.(payload);
 		const { playthroughId } = record.meta;
 		if (playthroughId) await adoptPlaythroughNow(ifid, playthroughId);
 		return {
@@ -14637,6 +14672,26 @@ function clearSession(ifid) {
 		sessionStorage.removeItem(`${SESSION_KEY_PREFIX}${ifid}`);
 	} catch {}
 }
+/**
+* The playthrough this tab's game is in, kept with its session: the shared
+* current playthrough (a stored meta value) can be changed by another tab.
+* Written where this tab's storage operations set the current playthrough,
+* so it follows them in call order. Under the session prefix, so clearing
+* all data clears it.
+*/
+var SESSION_PLAYTHROUGH_PREFIX = `${SESSION_KEY_PREFIX}playthrough.`;
+function saveSessionPlaythrough(ifid, id) {
+	try {
+		sessionStorage.setItem(`${SESSION_PLAYTHROUGH_PREFIX}${ifid}`, id);
+	} catch {}
+}
+function loadSessionPlaythrough(ifid) {
+	try {
+		return sessionStorage.getItem(`${SESSION_PLAYTHROUGH_PREFIX}${ifid}`) || void 0;
+	} catch {
+		return;
+	}
+}
 /** The export of a stored save, if there is one. */
 function toExport(record) {
 	if (!record) return void 0;
@@ -16078,6 +16133,11 @@ function missingPassage(storyData, payload) {
 	if (!storyData) return void 0;
 	return [payload.passage, ...payload.history.map((m) => m.passage)].find((name) => !storyData.passages.has(name));
 }
+/** Throw if `payload` refers to a passage `storyData` does not have. */
+function assertPassagesExist(storyData, payload) {
+	const missing = missingPassage(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`);
+}
 var NAMESPACE_KEYS = [
 	"variables",
 	"temporary",
@@ -16420,7 +16480,7 @@ var useStoryStore = create()(storyStore((set, get) => ({
 			state.loadError = null;
 		});
 		const previous = resolvePlaythroughId();
-		const read = loadSlotSave(storyData.ifid, slot);
+		const read = loadSlotSave(storyData.ifid, slot, (payload) => assertPassagesExist(storyData, payload));
 		const switched = switchToLookedUpPlaythrough(Promise.all([previous, read.catch(() => void 0)]).then(([prev, loaded]) => loaded?.playthroughId || prev));
 		const replacement = ++stateReplacementsIssued;
 		return reported(read.then(async (loaded) => {
@@ -16525,8 +16585,7 @@ var useStoryStore = create()(storyStore((set, get) => ({
 			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`);
+		assertPassagesExist(get().storyData, payload);
 		latestStateApplied = replacement;
 		emit("beforeload", slot);
 		const ifid = get().storyData?.ifid;
@@ -19354,11 +19413,13 @@ defineMacro({
 });
 //#endregion
 //#region src/components/macros/detached-body.tsx
+var frozenAlways = () => true;
 /**
 * 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. Used by {button} and {link} on click. The body stays mounted
+* pipeline. Used by {button} and {link} on click. The body's state is frozen
+* 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.
@@ -19389,24 +19450,27 @@ function useDetachedBody() {
 	const run = (children) => {
 		const locals = liveLocalsView(updater.getValues);
 		const container = document.createElement("div");
-		render(/* @__PURE__ */ jsx(LocalsUpdateContext.Provider, {
-			value: updater,
-			children: /* @__PURE__ */ jsx(LocalsValuesContext.Provider, {
-				value: locals,
-				children: /* @__PURE__ */ jsx(NobrContext.Provider, {
-					value: nobr,
-					children: /* @__PURE__ */ jsx(InlineContext.Provider, {
-						value: inline,
-						children: /* @__PURE__ */ jsx(WidgetChildrenContext.Provider, {
-							value: widgetChildren,
-							children: /* @__PURE__ */ jsx(RepeatContext.Provider, {
-								value: repeat,
-								children: /* @__PURE__ */ jsx(DialogCloseContext.Provider, {
-									value: closeDialog,
-									children: renderNodes(children, {
-										nobr,
-										inline,
-										locals
+		render(/* @__PURE__ */ jsx(FrozenStateContext.Provider, {
+			value: frozenAlways,
+			children: /* @__PURE__ */ jsx(LocalsUpdateContext.Provider, {
+				value: updater,
+				children: /* @__PURE__ */ jsx(LocalsValuesContext.Provider, {
+					value: locals,
+					children: /* @__PURE__ */ jsx(NobrContext.Provider, {
+						value: nobr,
+						children: /* @__PURE__ */ jsx(InlineContext.Provider, {
+							value: inline,
+							children: /* @__PURE__ */ jsx(WidgetChildrenContext.Provider, {
+								value: widgetChildren,
+								children: /* @__PURE__ */ jsx(RepeatContext.Provider, {
+									value: repeat,
+									children: /* @__PURE__ */ jsx(DialogCloseContext.Provider, {
+										value: closeDialog,
+										children: renderNodes(children, {
+											nobr,
+											inline,
+											locals
+										})
 									})
 								})
 							})
@@ -20433,13 +20497,19 @@ function defineInputMacro(name, type, toValue = (input) => input !== void 0 ? St
 				label: placeholder || ctx.varName,
 				perform: (v) => ctx.setValue(toValue(v))
 			});
+			const typed = ctx.hooks.useRef(null);
+			const shown = typed.current !== null && toValue(typed.current) === ctx.value && type === "number" ? typed.current : display(ctx.value);
 			return h(type ? "input" : "textarea", {
 				type,
 				id: ctx.id,
 				class: ctx.cls,
-				value: display(ctx.value),
+				value: shown,
 				placeholder,
-				onInput: (e) => ctx.setValue(toValue(e.target.value))
+				onInput: (e) => {
+					const text = e.target.value;
+					typed.current = text;
+					ctx.setValue(toValue(text));
+				}
 			});
 		}
 	});
@@ -20831,6 +20901,9 @@ defineMacro({
 		});
 		const resolvedTypeRef = useRef("fade");
 		const prevHistoryLenRef = useRef(0);
+		const displayedId = displayed.id;
+		const isOutgoing = useCallback((state) => state.navigationId !== displayedId, [displayedId]);
+		const lastElement = useRef(null);
 		const containerRef = useRef(null);
 		const timeoutsRef = useRef([]);
 		/** Cancel any in-progress transition. */
@@ -20899,6 +20972,16 @@ defineMacro({
 				cleanupSnapshots(containerEl);
 			}, config.duration)];
 		}, [navigationId]);
+		const shownId = displayedPassage && !renderDeferred ? displayed.id : null;
+		const lastShownId = useRef(shownId);
+		useLayoutEffect(() => {
+			if (shownId === null) return;
+			const previous = lastShownId.current;
+			lastShownId.current = shownId;
+			if (previous === null || previous === shownId) return;
+			const el = containerRef.current?.querySelector(".passage");
+			if (el && el.getBoundingClientRect().top < 0) el.scrollIntoView?.({ block: "start" });
+		}, [shownId]);
 		const effectivePassage = renderDeferred ? storyData?.passages.get("StoryLoading") ?? null : displayedPassage ? storyData?.passages.get(displayedPassage) : null;
 		if (!effectivePassage && displayedPassage && !renderDeferred) return /* @__PURE__ */ jsxs("div", {
 			class: "error",
@@ -20909,6 +20992,12 @@ defineMacro({
 			]
 		});
 		const readyPassage = storyData?.passages.get("PassageReady");
+		const passageElement = !renderDeferred && displayed.id !== navigationId && lastElement.current ? lastElement.current : effectivePassage && /* @__PURE__ */ jsx(Passage, {
+			passage: effectivePassage,
+			dataTransition: renderDeferred ? "none" : resolvedTypeRef.current,
+			navigationId: renderDeferred ? void 0 : displayed.id
+		}, renderDeferred ? "loading" : `nav-${displayed.id}`);
+		lastElement.current = passageElement || null;
 		return /* @__PURE__ */ jsxs("div", {
 			id: ctx.id ?? "story",
 			class: ctx.className ?? "story",
@@ -20918,11 +21007,10 @@ defineMacro({
 			}, `ready-${navigationId}`), /* @__PURE__ */ jsx("div", {
 				class: "passage-container",
 				ref: containerRef,
-				children: effectivePassage && /* @__PURE__ */ jsx(Passage, {
-					passage: effectivePassage,
-					dataTransition: renderDeferred ? "none" : resolvedTypeRef.current,
-					navigationId: renderDeferred ? void 0 : displayed.id
-				}, renderDeferred ? "loading" : `nav-${displayed.id}`)
+				children: passageElement && /* @__PURE__ */ jsx(FrozenStateContext.Provider, {
+					value: isOutgoing,
+					children: passageElement
+				})
 			})]
 		});
 	}

package/package.json

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

package/src/components/macros/PassageDisplay.tsx

@@ -1,6 +1,15 @@
-import { useRef, useEffect, useCallback, useState } from 'preact/hooks';
-import { useStoryStore } from '../../store';
-import { useStoryFields } from '../../hooks/use-story-fields';
+import {
+  useRef,
+  useEffect,
+  useLayoutEffect,
+  useCallback,
+  useState,
+} from 'preact/hooks';
+import { useStoryStore, type StoryState } from '../../store';
+import {
+  useStoryFields,
+  FrozenStateContext,
+} from '../../hooks/use-story-fields';
 import { Passage, renderPassageContent } from '../Passage';
 import { defineMacro } from '../../define-macro';
 import { resolveTransition, type ResolvedTransition } from '../../transition';
@@ -126,6 +135,13 @@ defineMacro({
     // Track previous history length to detect restart/load
     const prevHistoryLenRef = useRef(0);
 
+    const displayedId = displayed.id;
+    const isOutgoing = useCallback(
+      (state: StoryState) => state.navigationId !== displayedId,
+      [displayedId],
+    );
+    const lastElement = useRef<preact.VNode | null>(null);
+
     // Container ref for snapshot insertion
     const containerRef = useRef<HTMLDivElement>(null);
 
@@ -265,6 +281,22 @@ defineMacro({
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [navigationId]);
 
+    // A new passage opens at its beginning, not where the previous one was
+    // scrolled to (#354). The page keeps its position on first display
+    // (a refresh restores it) and when the beginning is already in view.
+    const shownId = displayedPassage && !renderDeferred ? displayed.id : null;
+    const lastShownId = useRef(shownId);
+    useLayoutEffect(() => {
+      if (shownId === null) return; // between passages of a transition
+      const previous = lastShownId.current;
+      lastShownId.current = shownId;
+      if (previous === null || previous === shownId) return;
+      const el = containerRef.current?.querySelector('.passage');
+      if (el && el.getBoundingClientRect().top < 0) {
+        el.scrollIntoView?.({ block: 'start' });
+      }
+    }, [shownId]);
+
     // When render is deferred, show StoryLoading passage or nothing
     const effectivePassage = renderDeferred
       ? (storyData?.passages.get('StoryLoading') ?? null)
@@ -282,6 +314,23 @@ defineMacro({
 
     const readyPassage = storyData?.passages.get('PassageReady');
 
+    // Between a navigation and the commit of its passage, the old passage is
+    // still mounted. It must not execute against the destination's state, so
+    // it keeps the element and the state it last rendered with (#352).
+    const outgoing = !renderDeferred && displayed.id !== navigationId;
+    const passageElement =
+      outgoing && lastElement.current
+        ? lastElement.current
+        : effectivePassage && (
+            <Passage
+              passage={effectivePassage}
+              key={renderDeferred ? 'loading' : `nav-${displayed.id}`}
+              dataTransition={renderDeferred ? 'none' : resolvedTypeRef.current}
+              navigationId={renderDeferred ? undefined : displayed.id}
+            />
+          );
+    lastElement.current = passageElement || null;
+
     return (
       <div
         id={ctx.id ?? 'story'}
@@ -299,13 +348,10 @@ defineMacro({
           class="passage-container"
           ref={containerRef}
         >
-          {effectivePassage && (
-            <Passage
-              passage={effectivePassage}
-              key={renderDeferred ? 'loading' : `nav-${displayed.id}`}
-              dataTransition={renderDeferred ? 'none' : resolvedTypeRef.current}
-              navigationId={renderDeferred ? undefined : displayed.id}
-            />
+          {passageElement && (
+            <FrozenStateContext.Provider value={isOutgoing}>
+              {passageElement}
+            </FrozenStateContext.Provider>
           )}
         </div>
       </div>

package/src/components/macros/WidgetInvocation.tsx

@@ -15,13 +15,32 @@ interface WidgetInvocationProps {
   params: string[];
   rawArgs?: string;
   invocationChildren?: ASTNode[];
+  className?: string;
+  id?: string;
 }
 
-export function WidgetInvocation({
+export function WidgetInvocation(props: WidgetInvocationProps) {
+  const { className, id } = props;
+  const content = <WidgetContent {...props} />;
+  // Invocation selectors (`{.badge#hero Stats}`) need an element to land on.
+  if (!className && !id) return content;
+  return (
+    <span
+      class={className}
+      id={id}
+    >
+      {content}
+    </span>
+  );
+}
+
+function WidgetContent({
   body,
   params,
   rawArgs,
   invocationChildren,
+  className,
+  id,
 }: WidgetInvocationProps) {
   const renderOptions = useRenderOptions();
   const parentValues = renderOptions.locals;

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

@@ -10,16 +10,20 @@ 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 { liveLocalsView } from '../../utils/live-locals';
 import { runWithCommittedMutations } from '../../execute-mutation';
 import { RepeatContext } from './Repeat';
 import { DialogCloseContext } from '../PassageDialog';
 
+const frozenAlways = () => true;
+
 /**
  * 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. Used by {button} and {link} on click. The body stays mounted
+ * pipeline. Used by {button} and {link} on click. The body's state is frozen
+ * 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.
@@ -58,21 +62,23 @@ export function useDetachedBody(): (children: ASTNode[]) => void {
     const locals = liveLocalsView(updater.getValues);
     const container = document.createElement('div');
     render(
-      <LocalsUpdateContext.Provider value={updater}>
-        <LocalsValuesContext.Provider value={locals}>
-          <NobrContext.Provider value={nobr}>
-            <InlineContext.Provider value={inline}>
-              <WidgetChildrenContext.Provider value={widgetChildren}>
-                <RepeatContext.Provider value={repeat}>
-                  <DialogCloseContext.Provider value={closeDialog}>
-                    {renderNodes(children, { nobr, inline, locals })}
-                  </DialogCloseContext.Provider>
-                </RepeatContext.Provider>
-              </WidgetChildrenContext.Provider>
-            </InlineContext.Provider>
-          </NobrContext.Provider>
-        </LocalsValuesContext.Provider>
-      </LocalsUpdateContext.Provider>,
+      <FrozenStateContext.Provider value={frozenAlways}>
+        <LocalsUpdateContext.Provider value={updater}>
+          <LocalsValuesContext.Provider value={locals}>
+            <NobrContext.Provider value={nobr}>
+              <InlineContext.Provider value={inline}>
+                <WidgetChildrenContext.Provider value={widgetChildren}>
+                  <RepeatContext.Provider value={repeat}>
+                    <DialogCloseContext.Provider value={closeDialog}>
+                      {renderNodes(children, { nobr, inline, locals })}
+                    </DialogCloseContext.Provider>
+                  </RepeatContext.Provider>
+                </WidgetChildrenContext.Provider>
+              </InlineContext.Provider>
+            </NobrContext.Provider>
+          </LocalsValuesContext.Provider>
+        </LocalsUpdateContext.Provider>
+      </FrozenStateContext.Provider>,
       container,
     );
     mounted.current.push(container);

package/src/components/macros/input-macro.ts

@@ -59,14 +59,29 @@ export function defineInputMacro(
         perform: (v) => ctx.setValue!(toValue(v)),
       });
 
+      // What the reader last typed. A number input reports an unfinished
+      // number ("-", "2e") as an empty value, so the text is kept for as
+      // long as it still converts to the variable's value, instead of being
+      // replaced by that value on every keystroke (#353).
+      const typed = ctx.hooks.useRef<string | null>(null);
+      const shown =
+        typed.current !== null &&
+        toValue(typed.current) === ctx.value &&
+        type === 'number'
+          ? typed.current
+          : display(ctx.value);
+
       return h(type ? 'input' : 'textarea', {
         type,
         id: ctx.id,
         class: ctx.cls,
-        value: display(ctx.value),
+        value: shown,
         placeholder,
-        onInput: (e: Event) =>
-          ctx.setValue!(toValue((e.target as HTMLInputElement).value)),
+        onInput: (e: Event) => {
+          const text = (e.target as HTMLInputElement).value;
+          typed.current = text;
+          ctx.setValue!(toValue(text));
+        },
       });
     },
   });

package/src/hooks/use-merged-locals.ts

@@ -12,14 +12,17 @@ export function useMergedLocals(): readonly [
   Record<string, unknown>,
   Record<string, unknown>,
 ] {
-  const { variables, temporary, transient } = useStoryFields(
+  // renderCounts is read by rendered()/hasRendered() inside expressions, so
+  // it re-renders them (and renews the tuple) when an inclusion mounts.
+  const { variables, temporary, transient, renderCounts } = useStoryFields(
     'variables',
     'temporary',
     'transient',
+    'renderCounts',
   );
   const localsValues = useContext(LocalsValuesContext);
 
   return useMemo(() => {
     return [variables, temporary, localsValues, transient] as const;
-  }, [variables, temporary, localsValues, transient]);
+  }, [variables, temporary, localsValues, transient, renderCounts]);
 }

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

@@ -1,7 +1,20 @@
-import { useRef } from 'preact/hooks';
+import { createContext } from 'preact';
+import { useContext, useRef } from 'preact/hooks';
 import { shallow } from 'zustand/vanilla/shallow';
 import { useStoryStore, type StoryState } from '../store';
 
+/**
+ * Tells the components below when to keep the state they last rendered with,
+ * given the store's current state: an owner (a click body, see
+ * useDetachedBody; a passage on its way out, see PassageDisplay) provides it
+ * so that a branch skipped earlier cannot run against later state (#351,
+ * #352). It runs inside the store's own notification, before the owner could
+ * re-render, which is why it is a predicate and not a flag.
+ */
+export const FrozenStateContext = createContext<
+  ((state: StoryState) => 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
@@ -11,7 +24,9 @@ export function useStoryFields<K extends keyof StoryState>(
   ...keys: K[]
 ): Pick<StoryState, K> {
   const prev = useRef<Pick<StoryState, K>>();
+  const freeze = useContext(FrozenStateContext);
   return useStoryStore((s) => {
+    if (prev.current && freeze?.(s)) return prev.current;
     const next = {} as Pick<StoryState, K>;
     for (const key of keys) next[key] = s[key];
     return shallow(prev.current, next) ? prev.current! : (prev.current = next);

package/src/markup/render.tsx

@@ -679,14 +679,21 @@ function nodeKey(node: ASTNode): string {
 function renderMacro(node: MacroNode, key: string) {
   if (isSubMacro(node.name)) return null;
 
+  // What an invocation passes on to a widget and to a built-in macro alike
+  const invocation = {
+    rawArgs: node.rawArgs,
+    className: node.className,
+    id: node.id,
+  };
+
   const widget = getWidget(node.name);
   if (widget) {
     return (
       <WidgetInvocation
         key={key}
+        {...invocation}
         body={widget.body}
         params={widget.params}
-        rawArgs={node.rawArgs}
         invocationChildren={node.children}
       />
     );
@@ -697,9 +704,7 @@ function renderMacro(node: MacroNode, key: string) {
     return (
       <Component
         key={key}
-        rawArgs={node.rawArgs}
-        className={node.className}
-        id={node.id}
+        {...invocation}
         children={node.children}
         branches={node.branches}
       />