@rohal12/spindle 0.59.17 → 0.59.19

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.17",
+  "version": "0.59.19",
   "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/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/hooks/use-modal-focus.ts

@@ -165,8 +165,12 @@ export function useModalFocus(
     openModals.push(entry);
 
     const body = panel.querySelector<HTMLElement>(bodySelector) ?? panel;
+    // An autofocus element that can't take focus (hidden, disabled, inert)
+    // must not shadow the eligible controls (#426).
     const initial =
-      panel.querySelector<HTMLElement>('[autofocus]') ??
+      Array.from(panel.querySelectorAll<HTMLElement>('[autofocus]')).find(
+        isAvailable,
+      ) ??
       focusables(body)[0] ??
       panel;
     initial.focus();
@@ -187,8 +191,44 @@ export function useModalFocus(
     const panel = panelRef.current;
     if (!panel) return;
 
+    const top = () => openModals[openModals.length - 1]?.panel === panel;
+
+    /**
+     * Move focus to the next (or previous) modal control from `from`. The
+     * order is computed here, never left to the browser: its positive-tabindex
+     * sequence spans the whole document and would lead out of the modal
+     * (#424). `from` may be an element of an embedded document, whose frame
+     * element then stands in for it.
+     */
+    const moveFocus = (from: Element | null, backwards: boolean) => {
+      const items = focusables(panel);
+      const first = items[0];
+      const last = items[items.length - 1];
+      if (!first || !last) {
+        panel.focus();
+        return;
+      }
+      const at = from ? items.indexOf(from as HTMLElement) : -1;
+      let next: HTMLElement | undefined;
+      if (at !== -1) {
+        next = items[at + (backwards ? -1 : 1)];
+      } else if (from && from !== panel && panel.contains(from)) {
+        // Inside the panel but not a tab stop: continue from its position
+        const after = (el: HTMLElement) =>
+          !!(
+            from.compareDocumentPosition(el) & Node.DOCUMENT_POSITION_FOLLOWING
+          );
+        next = backwards
+          ? items.filter((el) => !after(el)).pop()
+          : items.find(after);
+      } else {
+        next = backwards ? last : first;
+      }
+      (next ?? (backwards ? last : first)).focus();
+    };
+
     const onKeyDown = (e: KeyboardEvent) => {
-      if (openModals[openModals.length - 1]?.panel !== panel) return;
+      if (!top()) return;
 
       if (e.key === 'Escape') {
         if (!dismissible) return;
@@ -199,25 +239,69 @@ export function useModalFocus(
       }
 
       if (e.key !== 'Tab') return;
-      const items = focusables(panel);
-      const first = items[0];
-      const last = items[items.length - 1];
-      const active = document.activeElement;
-      // The panel itself (tabindex=-1) counts as outside the tab sequence.
-      const inside = active !== panel && panel.contains(active);
-      if (!first || !last) {
-        e.preventDefault();
-        panel.focus();
-      } else if (e.shiftKey && (active === first || !inside)) {
-        e.preventDefault();
-        last.focus();
-      } else if (!e.shiftKey && (active === last || !inside)) {
-        e.preventDefault();
-        first.focus();
+      e.preventDefault();
+      moveFocus(document.activeElement, e.shiftKey);
+    };
+
+    // Key events inside an embedded document never reach this one (#425).
+    // Escape closes the dialog from there too; Tab moves on natively within
+    // the frame and is taken over at its first and last controls.
+    const controller = new AbortController();
+    const { signal } = controller;
+    const frameDocs = new Map<HTMLIFrameElement, Document>();
+    const attachFrame = (frame: HTMLIFrameElement) => {
+      let doc: Document | null = null;
+      try {
+        doc = frame.contentDocument;
+      } catch {
+        // Not accessible
       }
+      // Already listening to this document
+      if (!doc || frameDocs.get(frame) === doc) return;
+      frameDocs.set(frame, doc);
+      const onFrameKeyDown = (e: KeyboardEvent) => {
+        if (!top()) return;
+        if (e.key !== 'Tab') return onKeyDown(e);
+        const inner = Array.from(
+          doc!.querySelectorAll<HTMLElement>(FOCUSABLE),
+        ).filter((el) => isAvailable(el) && isTabStop(el));
+        const active = doc!.activeElement;
+        const edge = e.shiftKey ? inner[0] : inner[inner.length - 1];
+        if (!edge || active === edge || active === doc!.body) {
+          e.preventDefault();
+          moveFocus(frame, e.shiftKey);
+        }
+      };
+      doc.addEventListener('keydown', onFrameKeyDown, { signal });
+    };
+    const attachFrames = () => {
+      panel.querySelectorAll('iframe').forEach(attachFrame);
     };
+    // load doesn't bubble; a frame's document is replaced when it navigates
+    const onLoad = (e: Event) => {
+      if (e.target instanceof HTMLIFrameElement) attachFrame(e.target);
+    };
+    panel.addEventListener('load', onLoad, { capture: true, signal });
+    const frames = new MutationObserver(attachFrames);
+    frames.observe(panel, { childList: true, subtree: true });
+    attachFrames();
 
-    document.addEventListener('keydown', onKeyDown);
-    return () => document.removeEventListener('keydown', onKeyDown);
+    // Focus that lands outside the dialog anyway, e.g. leaving a frame whose
+    // document can't be reached, is brought back in.
+    const onFocusIn = (e: FocusEvent) => {
+      const target = e.target;
+      if (!top() || !(target instanceof Node) || panel.contains(target)) return;
+      if (target === document.body || target === document.documentElement) {
+        return;
+      }
+      moveFocus(null, false);
+    };
+
+    document.addEventListener('keydown', onKeyDown, { signal });
+    document.addEventListener('focusin', onFocusIn, { signal });
+    return () => {
+      controller.abort();
+      frames.disconnect();
+    };
   }, [dismissible, onClose]);
 }

package/src/markup/ast.ts

@@ -8,6 +8,8 @@ import { NameSet } from '../utils/macro-names';
 export interface TextNode {
   type: 'text';
   value: string;
+  /** A closed HTML comment: markdown drops it, and so does raw rendering. */
+  comment?: true;
 }
 
 export interface VariableNode extends Selectors {