@rohal12/spindle 0.59.16 → 0.59.18

package/dist/pkg/story-variables.js

@@ -151,7 +151,11 @@ function lexeme(lex, loc, fields) {
 /** The AST node of a lexeme that stands alone (not a macro or element). */
 function nodeOf(x) {
 	switch (x.lex) {
-		case "text": return {
+		case "text": return x.comment ? {
+			type: "text",
+			value: x.value,
+			comment: true
+		} : {
 			type: "text",
 			value: x.value
 		};
@@ -223,7 +227,7 @@ function tokenOf(x) {
 }
 /**
 * Flatten items (lexemes, nodes, arrays of them, nulls) and join adjacent
-* text, except escaped braces, which stay a text item of their own.
+* text, except escaped braces and comments, which stay a text item of their own.
 */
 function joinText(items, convert) {
 	const out = [];
@@ -231,7 +235,7 @@ function joinText(items, convert) {
 	const add = (item) => {
 		if (item === null || item === void 0) return;
 		if (Array.isArray(item)) return item.forEach(add);
-		if (item.lex === "text" && !item.escape && last && last.lex === "text" && !last.escape && last.end === item.start) {
+		if (item.lex === "text" && !item.escape && !item.comment && last && last.lex === "text" && !last.escape && !last.comment && last.end === item.start) {
 			last.value += item.value;
 			last.end = item.end;
 			return;
@@ -725,7 +729,9 @@ function peg$parse(input, options) {
 		return lexeme("text", location(), { value });
 	}
 	function peg$f41(value) {
-		return lexeme("text", location(), { value });
+		const node = lexeme("text", location(), { value });
+		node.comment = true;
+		return node;
 	}
 	function peg$f42(bs) {
 		return bs.length % 2 === 1;
@@ -10586,70 +10592,6 @@ function evaluatePassageName(expr, evaluate, { storyData, currentPassage }) {
 	if (storyData && !storyData.passages.has(name)) throw noPassageError(name, currentPassage);
 	return name;
 }
-//#endregion
-//#region src/widgets/widget-def.ts
-/**
-* Reading widget definitions without rendering anything: the `{widget}`
-* macro, startup and markup validation (also in tooling) share these.
-*/
-/** A {widget} definition's name, then its `@` parameters. */
-var WIDGET_PARAMETERS = [{
-	name: "name",
-	type: "text",
-	holds: "text",
-	required: true
-}, {
-	name: "parameters",
-	type: "text",
-	holds: "text"
-}];
-/**
-* The widget a {widget} definition's arguments declare: its name and its
-* parameters, the words after it that start with `@` (docs/widgets.md).
-* Other words, such as `$name`, are not parameters.
-*/
-function widgetDef({ name = "", parameters = "" }) {
-	return {
-		name,
-		params: parameters.split(/\s+/).filter((word) => word.startsWith("@"))
-	};
-}
-/** Read the arguments of a {widget} definition (see widgetDef). */
-function parseWidgetDef(rawArgs) {
-	return widgetDef(parseMacroArgs(rawArgs, WIDGET_PARAMETERS));
-}
-/**
-* The names of the block widgets (those whose body renders `{@children}`)
-* that StoryInit and the passages tagged `widget` define. They must be
-* known as block macros before any passage is parsed, so that passages
-* invoking them nest their content whatever the passage order.
-*
-* The passages are read as flat tokens, which need no block macros to be
-* known, so a `{@children}` in an HTML comment or in a `{do}` body is text
-* here as it is to the parser, and does not make a block widget (#387).
-*/
-function blockWidgetNames(passages) {
-	const names = [];
-	for (const passage of passages) {
-		if (passage.name !== "StoryInit" && !passage.tags?.includes("widget")) continue;
-		const open = [];
-		for (const token of tokenizeMarkupTolerant(passage.content).tokens) if (token.type === "macro" && token.name.toLowerCase() === "widget") {
-			if (!token.isClose) {
-				open.push({
-					rawArgs: token.rawArgs,
-					isBlock: false
-				});
-				continue;
-			}
-			const def = open.pop();
-			if (!def?.isBlock) continue;
-			try {
-				names.push(parseWidgetDef(def.rawArgs).name);
-			} catch {}
-		} else if (token.type === "variable" && token.scope === "local" && token.name === "children" && open.length > 0) open[open.length - 1].isBlock = true;
-	}
-	return names;
-}
 /** The parameters of the built-in sub-macros that take arguments. */
 var SUB_MACRO_PARAMETERS = new Map([["option", [{
 	name: "value",
@@ -10983,6 +10925,214 @@ function collectPassageReferences(src, tokens, parametersOf) {
 	});
 	return refs;
 }
+new NameMap();
+new NameMap();
+new NameSet();
+/**
+* How a macro argument is read (see components/macros/macro-args.ts). Every
+* declared parameter names one: there is no default.
+* Quoted strings accept `\"`, `\'` and `\\` escapes.
+* - `expression`: code, as written.
+* - `statements`: code run as statements (`{set}`), as written.
+* - `passage`: a passage name: a quoted string or an expression, as written.
+* - `variable`: a variable reference such as `$name` or `"$name"`, as written.
+* - `string`: one quoted string; anything else leaves the argument unset.
+* - `text`: one quoted string, or text with any loose quotes stripped.
+* - `names`: a comma-separated list of names (`@item, @i`).
+* - `delay`: a duration (`2s`, `500ms`, `300`) in milliseconds.
+* - `number`: a number.
+* - `flag`: a keyword, the parameter's name, at the start or end; a boolean.
+* - `separator`: a word (`of`) or `=` separating the parameters before it
+*   from those after it; a boolean.
+* - `options`: keywords, the names of its `parameters`, each followed by a
+*   quoted string or a number unless it is a flag.
+*/
+var PARAMETER_TYPES = [
+	"expression",
+	"statements",
+	"passage",
+	"variable",
+	"string",
+	"text",
+	"names",
+	"delay",
+	"number",
+	"flag",
+	"separator",
+	"options"
+];
+/**
+* What the value of a `string` or `text` argument holds, for the check at
+* story start and for tooling (see code-check.ts):
+* - `markup`: markup the macro renders (`{button}`'s label): its markup
+*   is checked.
+* - `text`: plain text the macro uses as written (`{checkbox}`'s label).
+* - `passage`: a passage name (`{watch}`'s `goto`): the passage must exist.
+* - `expression`, `statements`: code (`{watch}`'s condition and `run`): it
+*   is checked as code, and its variable references against the schema.
+*
+* Without it, the argument of a macro with `interpolate` holds `markup`,
+* any other `text`.
+*/
+var STRING_HOLDS = [
+	"markup",
+	"text",
+	"passage",
+	"expression",
+	"statements"
+];
+/**
+* Throw if a parameter `macro` declares (or an option of one) has no type,
+* or one that isn't a ParameterType: arguments are read by their type, and
+* there is no default. Throw too if it declares what it `holds` wrongly.
+*/
+function checkParameterTypes(macro, parameters) {
+	const holdsFix = `Give a \`string\` or \`text\` parameter one of ${STRING_HOLDS.join(", ")} to hold (see docs/custom-macros.md#what-a-string-holds).`;
+	for (const param of parameters) {
+		const type = param.type;
+		if (!PARAMETER_TYPES.includes(type)) throw parameterError(macro, param, type === void 0 ? "has no type" : `has the unknown type ${JSON.stringify(type)}`, `Give it one of the types ${PARAMETER_TYPES.join(", ")} (see docs/custom-macros.md#parameter-types), or declare no parameters and read props.rawArgs.`);
+		const holds = param.holds;
+		if (holds !== void 0 && type !== "string" && type !== "text") throw parameterError(macro, param, `is of the type ${type}, which holds what it is`, holdsFix);
+		if (holds !== void 0 && !STRING_HOLDS.includes(holds)) throw parameterError(macro, param, `holds the unknown ${JSON.stringify(holds)}`, holdsFix);
+		if (param.parameters) checkParameterTypes(macro, param.parameters);
+	}
+}
+/** The error for the parameter `param` of `macro`: what is wrong, and the fix. */
+function parameterError(macro, param, problem, fix) {
+	return /* @__PURE__ */ new Error(`spindle: The parameter "${param.name}" of the macro {${macro}} ${problem}. ${fix}`);
+}
+var metadataRegistry = new NameMap();
+function getMacroRegistry() {
+	return Array.from(metadataRegistry.values());
+}
+//#endregion
+//#region src/widgets/ast-scanner.ts
+/** The declared parameters of the macros registered so far. */
+var registeredParameters = (name) => parameterLookup(getMacroRegistry())(name);
+/**
+* Whether the text of an attribute value or macro label renders a
+* `{@children}`: it is markup, parsed as the renderer parses it.
+*/
+function textContainsChildren(text, parametersOf) {
+	if (!text.includes("{")) return false;
+	let nodes;
+	try {
+		nodes = parseMarkup(text, { text: true });
+	} catch {
+		return false;
+	}
+	return astContainsChildren(nodes, parametersOf);
+}
+/**
+* Whether a tag renders a `{@children}` in an attribute value or a macro
+* argument that holds markup (`<span title="{@children}">`,
+* `{button "{@children}"}`). Literal arguments and code are not markup.
+*/
+function tokenTextContainsChildren(token, parametersOf = registeredParameters) {
+	for (const piece of codeAndText("", [token], parametersOf)) if (piece.kind === "text" && textContainsChildren(piece.text, parametersOf)) return true;
+	return false;
+}
+/**
+* Recursively scan an AST node array for a VariableNode
+* with scope 'local' and name 'children' (@children), in the content and in
+* the attributes and labels that render markup.
+*/
+function astContainsChildren(nodes, parametersOf = registeredParameters) {
+	for (const node of nodes) {
+		if (node.type === "variable" && node.scope === "local" && node.name === "children") return true;
+		if (node.type === "html") {
+			const span = {
+				start: 0,
+				end: 0
+			};
+			if (tokenTextContainsChildren({
+				isClose: false,
+				isSelfClose: false,
+				...node,
+				...span
+			}, parametersOf) || astContainsChildren(node.children, parametersOf)) return true;
+		}
+		if (node.type === "macro") {
+			const span = {
+				start: 0,
+				end: 0
+			};
+			if (tokenTextContainsChildren({
+				isClose: false,
+				...node,
+				...span
+			}, parametersOf) || astContainsChildren(node.children, parametersOf)) return true;
+			if (node.branches) {
+				for (const branch of node.branches) if (astContainsChildren(branch.children, parametersOf)) return true;
+			}
+		}
+	}
+	return false;
+}
+//#endregion
+//#region src/widgets/widget-def.ts
+/**
+* Reading widget definitions without rendering anything: the `{widget}`
+* macro, startup and markup validation (also in tooling) share these.
+*/
+/** A {widget} definition's name, then its `@` parameters. */
+var WIDGET_PARAMETERS = [{
+	name: "name",
+	type: "text",
+	holds: "text",
+	required: true
+}, {
+	name: "parameters",
+	type: "text",
+	holds: "text"
+}];
+/**
+* The widget a {widget} definition's arguments declare: its name and its
+* parameters, the words after it that start with `@` (docs/widgets.md).
+* Other words, such as `$name`, are not parameters.
+*/
+function widgetDef({ name = "", parameters = "" }) {
+	return {
+		name,
+		params: parameters.split(/\s+/).filter((word) => word.startsWith("@"))
+	};
+}
+/** Read the arguments of a {widget} definition (see widgetDef). */
+function parseWidgetDef(rawArgs) {
+	return widgetDef(parseMacroArgs(rawArgs, WIDGET_PARAMETERS));
+}
+/**
+* The names of the block widgets (those whose body renders `{@children}`)
+* that StoryInit and the passages tagged `widget` define. They must be
+* known as block macros before any passage is parsed, so that passages
+* invoking them nest their content whatever the passage order.
+*
+* The passages are read as flat tokens, which need no block macros to be
+* known, so a `{@children}` in an HTML comment or in a `{do}` body is text
+* here as it is to the parser, and does not make a block widget (#387).
+*/
+function blockWidgetNames(passages, parametersOf = registeredParameters) {
+	const names = [];
+	for (const passage of passages) {
+		if (passage.name !== "StoryInit" && !passage.tags?.includes("widget")) continue;
+		const open = [];
+		for (const token of tokenizeMarkupTolerant(passage.content).tokens) if (token.type === "macro" && token.name.toLowerCase() === "widget") {
+			if (!token.isClose) {
+				open.push({
+					rawArgs: token.rawArgs,
+					isBlock: false
+				});
+				continue;
+			}
+			const def = open.pop();
+			if (!def?.isBlock) continue;
+			try {
+				names.push(parseWidgetDef(def.rawArgs).name);
+			} catch {}
+		} else if (open.length > 0 && (token.type === "variable" && token.scope === "local" && token.name === "children" || tokenTextContainsChildren(token, parametersOf))) open[open.length - 1].isBlock = true;
+	}
+	return names;
+}
 //#endregion
 //#region src/markup/validate.ts
 /**
@@ -11157,83 +11307,6 @@ function validateMarkup(passages, options) {
 	for (const [passage, tokens] of parsed) withParseCache(() => checkTokens(passage, passage.content, tokens, 0, ""));
 	return diagnostics;
 }
-new NameMap();
-new NameMap();
-new NameSet();
-/**
-* How a macro argument is read (see components/macros/macro-args.ts). Every
-* declared parameter names one: there is no default.
-* Quoted strings accept `\"`, `\'` and `\\` escapes.
-* - `expression`: code, as written.
-* - `statements`: code run as statements (`{set}`), as written.
-* - `passage`: a passage name: a quoted string or an expression, as written.
-* - `variable`: a variable reference such as `$name` or `"$name"`, as written.
-* - `string`: one quoted string; anything else leaves the argument unset.
-* - `text`: one quoted string, or text with any loose quotes stripped.
-* - `names`: a comma-separated list of names (`@item, @i`).
-* - `delay`: a duration (`2s`, `500ms`, `300`) in milliseconds.
-* - `number`: a number.
-* - `flag`: a keyword, the parameter's name, at the start or end; a boolean.
-* - `separator`: a word (`of`) or `=` separating the parameters before it
-*   from those after it; a boolean.
-* - `options`: keywords, the names of its `parameters`, each followed by a
-*   quoted string or a number unless it is a flag.
-*/
-var PARAMETER_TYPES = [
-	"expression",
-	"statements",
-	"passage",
-	"variable",
-	"string",
-	"text",
-	"names",
-	"delay",
-	"number",
-	"flag",
-	"separator",
-	"options"
-];
-/**
-* What the value of a `string` or `text` argument holds, for the check at
-* story start and for tooling (see code-check.ts):
-* - `markup`: markup the macro renders (`{button}`'s label): its markup
-*   is checked.
-* - `text`: plain text the macro uses as written (`{checkbox}`'s label).
-* - `passage`: a passage name (`{watch}`'s `goto`): the passage must exist.
-* - `expression`, `statements`: code (`{watch}`'s condition and `run`): it
-*   is checked as code, and its variable references against the schema.
-*
-* Without it, the argument of a macro with `interpolate` holds `markup`,
-* any other `text`.
-*/
-var STRING_HOLDS = [
-	"markup",
-	"text",
-	"passage",
-	"expression",
-	"statements"
-];
-/**
-* Throw if a parameter `macro` declares (or an option of one) has no type,
-* or one that isn't a ParameterType: arguments are read by their type, and
-* there is no default. Throw too if it declares what it `holds` wrongly.
-*/
-function checkParameterTypes(macro, parameters) {
-	const holdsFix = `Give a \`string\` or \`text\` parameter one of ${STRING_HOLDS.join(", ")} to hold (see docs/custom-macros.md#what-a-string-holds).`;
-	for (const param of parameters) {
-		const type = param.type;
-		if (!PARAMETER_TYPES.includes(type)) throw parameterError(macro, param, type === void 0 ? "has no type" : `has the unknown type ${JSON.stringify(type)}`, `Give it one of the types ${PARAMETER_TYPES.join(", ")} (see docs/custom-macros.md#parameter-types), or declare no parameters and read props.rawArgs.`);
-		const holds = param.holds;
-		if (holds !== void 0 && type !== "string" && type !== "text") throw parameterError(macro, param, `is of the type ${type}, which holds what it is`, holdsFix);
-		if (holds !== void 0 && !STRING_HOLDS.includes(holds)) throw parameterError(macro, param, `holds the unknown ${JSON.stringify(holds)}`, holdsFix);
-		if (param.parameters) checkParameterTypes(macro, param.parameters);
-	}
-}
-/** The error for the parameter `param` of `macro`: what is wrong, and the fix. */
-function parameterError(macro, param, problem, fix) {
-	return /* @__PURE__ */ new Error(`spindle: The parameter "${param.name}" of the macro {${macro}} ${problem}. ${fix}`);
-}
-new NameMap();
 //#endregion
 //#region src/utils/namespace.ts
 /** The variable name no namespace can hold. */
@@ -11430,7 +11503,8 @@ function validateStoryMarkup(passages, macros, options = {}) {
 	const list = [...passages];
 	const all = [...macros];
 	const known = /* @__PURE__ */ new Set();
-	const blocks = new Set(blockWidgetNames(list).map((n) => n.toLowerCase()));
+	const parametersOf = parameterLookup(all);
+	const blocks = new Set(blockWidgetNames(list, parametersOf).map((n) => n.toLowerCase()));
 	for (const macro of all) {
 		const name = macro.name.toLowerCase();
 		known.add(name);
@@ -11440,7 +11514,7 @@ function validateStoryMarkup(passages, macros, options = {}) {
 	return validateMarkup(list, {
 		isKnownMacro: (name) => known.has(name),
 		macroNames: known,
-		parametersOf: parameterLookup(all),
+		parametersOf,
 		isBlockMacro: (name) => blocks.has(name.toLowerCase()) || isBlockMacro(name),
 		checkPassageNames: options.checkPassageNames
 	});

package/package.json

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

package/src/components/StoryInterface.tsx

@@ -1,7 +1,12 @@
-import { useMemo } from 'preact/hooks';
+import { useLayoutEffect, useMemo } from 'preact/hooks';
 import { useStoryFields } from '../hooks/use-story-fields';
 import { parseMarkup } from '../markup/parse';
-import { renderInlineNodes, NobrContext } from '../markup/render';
+import {
+  renderInlineNodes,
+  InterfaceContext,
+  NobrContext,
+} from '../markup/render';
+import { declareInterfaceMounted } from '../triggers';
 import { errorMessage } from '../utils/error-message';
 
 const DEFAULT_MARKUP =
@@ -26,9 +31,15 @@ export function StoryInterface() {
     }
   }, [markup]);
 
-  return nobr ? (
-    <NobrContext.Provider value={true}>{rendered}</NobrContext.Provider>
-  ) : (
-    rendered
+  useLayoutEffect(declareInterfaceMounted, []);
+
+  return (
+    <InterfaceContext.Provider value={true}>
+      {nobr ? (
+        <NobrContext.Provider value={true}>{rendered}</NobrContext.Provider>
+      ) : (
+        rendered
+      )}
+    </InterfaceContext.Provider>
   );
 }

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,8 +1,10 @@
 import { defineMacro } from '../../define-macro';
 import { FrozenStateContext } from '../../hooks/use-story-fields';
 import { useStoryStore } from '../../store';
+import { InterfaceContext } from '../../markup/render';
 import {
   addMacroTrigger,
+  declareInterfaceWatch,
   removeTrigger,
   subscribeTriggerResets,
   triggerResets,
@@ -50,6 +52,15 @@ defineMacro({
       () => subscribeTriggerResets(() => rerender((n) => n + 1)),
       [],
     );
+    // The interface's watchers are re-registered by a load of a save made
+    // before the interface mounted (#419)
+    const inInterface = hooks.useContext(InterfaceContext);
+    const declaredKey = JSON.stringify([condition, options]);
+    hooks.useLayoutEffect(
+      () =>
+        inInterface ? declareInterfaceWatch(condition, options) : undefined,
+      [inInterface, declaredKey],
+    );
     const registered = hooks.useRef<number | null>(null);
     if (
       registered.current === null ||

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

@@ -10,12 +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;
 
@@ -35,7 +39,8 @@ const frozenAlways = () => true;
  * 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
@@ -50,6 +55,8 @@ 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(() => {
@@ -81,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

@@ -216,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]',