@rohal12/spindle 0.59.13 → 0.59.15

package/package.json

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

package/src/class-registry.ts

@@ -2,13 +2,48 @@
 
 import { parse, stringify } from 'devalue';
 import { hasOwn } from './utils/namespace';
+import { extraKeys, mapEntries, setMembers } from './utils/value-kinds';
 
 type Constructor = new (...args: any[]) => any;
 
 const registry = new Map<string, Constructor>();
 const ctorToName = new Map<Constructor, string>();
 
+/**
+ * Built-ins whose instances hold their value in internal slots that a save
+ * cannot rebuild: a registered class cannot extend them. (Array, Map, Set,
+ * Date, RegExp and Error can be extended, see classData.)
+ */
+const UNSUPPORTED_BASES: readonly Constructor[] = [
+  ArrayBuffer,
+  DataView,
+  Object.getPrototypeOf(Int8Array) as Constructor, // every typed array
+  URL,
+  URLSearchParams,
+  Number,
+  String,
+  Boolean,
+  Promise,
+  WeakMap,
+  WeakSet,
+  Function,
+] as Constructor[];
+
+/**
+ * Register `ctor` as `name`, so that its instances keep their class through
+ * copies, history and saves. Throws for a class extending a built-in whose
+ * instances cannot be saved (see UNSUPPORTED_BASES).
+ */
 export function registerClass(name: string, ctor: Constructor): void {
+  const base =
+    typeof ctor === 'function'
+      ? UNSUPPORTED_BASES.find((b) => ctor.prototype instanceof b)
+      : undefined;
+  if (base) {
+    throw new TypeError(
+      `spindle: Cannot register class "${name}": it extends ${base.name}, whose instances cannot be saved (a registered class may extend Array, Map, Set, Date, RegExp or Error)`,
+    );
+  }
   registry.set(name, ctor);
   ctorToName.set(ctor, name);
 }
@@ -46,7 +81,11 @@ export function clearRegistry(): void {
 // values. Spindle adds, with reducers and revivers:
 //
 // - `c:<name>`: an instance of the class registered as <name>, with its own
-//   enumerable keys (and, for Error subclasses, its message and cause);
+//   enumerable keys (and, for Error subclasses, its message and cause); for
+//   a subclass of Array, Map, Set, Date or RegExp, `[kind, contents, keys]`:
+//   the built-in it extends, what that holds (elements, Map entries as
+//   pairs, the time, or the source, flags and lastIndex) and its other own
+//   enumerable keys;
 // - `E:<name>`: a built-in error (Error, TypeError, ..., AggregateError),
 //   with its message, cause, errors and own enumerable keys (not its stack);
 // - `S`: a symbol from the global registry (Symbol.for);
@@ -103,6 +142,13 @@ const ERROR_HIDDEN_KEYS = ['message', 'cause', 'errors'] as const;
 const isObject = (v: unknown): v is object =>
   typeof v === 'object' && v !== null;
 
+/** Whether `v` is a plain object (as devalue revives one). */
+const isPlainData = (v: unknown): v is Record<string, unknown> =>
+  isObject(v) && Object.getPrototypeOf(v) === Object.prototype;
+
+const malformedClass = (name: string): TypeError =>
+  new TypeError(`spindle: Malformed data for class "${name}"`);
+
 const defineData = (target: object, key: string, value: unknown): void => {
   // Define, so that a "__proto__" key stays a key (devalue refuses it)
   Object.defineProperty(target, key, {
@@ -127,7 +173,10 @@ function refuseSymbolKeys(value: object): void {
  * Own enumerable keys of `value`, as a plain object; for an error also its
  * message, cause and (AggregateError) errors, which are not enumerable.
  */
-function ownData(value: object): Record<string, unknown> {
+function ownData(
+  value: object,
+  keys = Object.keys(value),
+): Record<string, unknown> {
   refuseSymbolKeys(value);
   const data: Record<string, unknown> = {};
   if (value instanceof Error) {
@@ -135,12 +184,58 @@ function ownData(value: object): Record<string, unknown> {
       if (hasOwn(value, key)) defineData(data, key, value[key as keyof Error]);
     }
   }
-  for (const key of Object.keys(value)) {
+  for (const key of keys) {
     defineData(data, key, (value as Record<string, unknown>)[key]);
   }
   return data;
 }
 
+/**
+ * The built-ins a registered class may extend whose value is not in its
+ * keys, saved as their kind (see classData).
+ */
+const BUILTIN_KINDS = {
+  Array: Array as unknown as Constructor,
+  Map: Map as Constructor,
+  Set: Set as Constructor,
+  Date: Date as Constructor,
+  RegExp: RegExp as Constructor,
+};
+type BuiltinKind = keyof typeof BUILTIN_KINDS;
+
+/**
+ * The saved form of a registered class instance: its own data (see
+ * ownData), or for a subclass of a built-in kind (see BUILTIN_KINDS) its
+ * kind, contents and extra keys, read with the built-in methods, which a
+ * subclass may override (#391, #393).
+ */
+function classData(value: object): unknown {
+  const extra = () => ownData(value, extraKeys(value));
+  if (Array.isArray(value)) {
+    // Holes stay holes
+    const items = new Array(value.length) as unknown[];
+    for (let i = 0; i < value.length; i++) {
+      if (i in value) items[i] = value[i] as unknown;
+    }
+    return ['Array', items, extra()];
+  }
+  if (value instanceof Map) {
+    return ['Map', Array.from(mapEntries(value)), extra()];
+  }
+  if (value instanceof Set) {
+    return ['Set', Array.from(setMembers(value)), extra()];
+  }
+  if (value instanceof Date) {
+    return ['Date', Date.prototype.getTime.call(value), extra()];
+  }
+  if (value instanceof RegExp) {
+    const source = Reflect.get(RegExp.prototype, 'source', value) as string;
+    const flags = Reflect.get(RegExp.prototype, 'flags', value) as string;
+    return ['RegExp', [source, flags, value.lastIndex], extra()];
+  }
+  return ownData(value);
+}
+
 /** Make an error's message, cause and errors non-enumerable again. */
 function hideErrorKeys(value: object): void {
   for (const key of ERROR_HIDDEN_KEYS) {
@@ -158,7 +253,9 @@ function reducers(): Record<string, (value: unknown) => unknown> {
   const out: Record<string, (value: unknown) => unknown> = {};
   for (const [name, ctor] of registry) {
     out[CLASS_PREFIX + name] = (v) =>
-      isObject(v) && Object.getPrototypeOf(v) === ctor.prototype && ownData(v);
+      isObject(v) &&
+      Object.getPrototypeOf(v) === ctor.prototype &&
+      classData(v);
   }
   for (const [proto, name] of BUILTIN_ERRORS) {
     out[ERROR_PREFIX + name] = (v) =>
@@ -175,7 +272,7 @@ function reducers(): Record<string, (value: unknown) => unknown> {
     v.lastIndex !== 0 && [v.source, v.flags, v.lastIndex];
   if (GUARD_V8_KEYS) {
     out[KEYS_TAG] = (v) => {
-      if (!isObject(v) || Object.getPrototypeOf(v) !== Object.prototype) {
+      if (!isPlainData(v)) {
         return false;
       }
       const keys = Object.keys(v);
@@ -192,19 +289,108 @@ function reducers(): Record<string, (value: unknown) => unknown> {
   return out;
 }
 
+/**
+ * The RegExp of a `[source, flags, lastIndex]` list (an `R` entry, or the
+ * contents of a RegExp subclass), or undefined if the list is malformed.
+ */
+function newRegExp(data: unknown): RegExp | undefined {
+  if (
+    !Array.isArray(data) ||
+    typeof data[0] !== 'string' ||
+    typeof data[1] !== 'string' ||
+    !Number.isSafeInteger(data[2])
+  ) {
+    return undefined;
+  }
+  const re = new RegExp(data[0], data[1]);
+  re.lastIndex = data[2] as number;
+  return re;
+}
+
+/**
+ * A new Date or RegExp holding `contents` (see classData), or undefined if
+ * they are malformed.
+ */
+function newAtomic(kind: 'Date' | 'RegExp', contents: unknown) {
+  if (kind === 'RegExp') return newRegExp(contents);
+  return typeof contents === 'number' ? new Date(contents) : undefined;
+}
+
+/**
+ * The built-in of a registered class that a `[kind, contents, keys]` list
+ * holds (see classData). A cycle through a collection revives it before its
+ * list is complete (devalue holds unread parts as holes), so the instance
+ * is kept per list and filled with what the list holds so far. (The
+ * contents of a Date or RegExp hold no objects, so they are complete.)
+ */
+const collections = new WeakMap<unknown[], object>();
+function reviveBuiltin(name: string, ctor: Constructor, list: unknown[]) {
+  const [kind, contents, keys] = list;
+  const base =
+    typeof kind === 'string' && hasOwn(BUILTIN_KINDS, kind)
+      ? BUILTIN_KINDS[kind as BuiltinKind]
+      : undefined;
+  const atomic = kind === 'Date' || kind === 'RegExp';
+  if (
+    list.length !== 3 ||
+    !base ||
+    !(ctor.prototype instanceof base) ||
+    (!atomic && hasOwn(list, 1) && !Array.isArray(contents)) ||
+    (hasOwn(list, 2) && !isPlainData(keys))
+  ) {
+    throw malformedClass(name);
+  }
+  let made = collections.get(list);
+  if (!made) {
+    const value = atomic ? newAtomic(kind, contents) : (new base() as object);
+    if (!value) throw malformedClass(name);
+    made = Object.setPrototypeOf(value, ctor.prototype) as object;
+    collections.set(list, made);
+  }
+  if (!atomic && Array.isArray(contents)) fillCollection(made, contents);
+  if (isPlainData(keys)) {
+    for (const key of Object.keys(keys)) defineData(made, key, keys[key]);
+  }
+  return made;
+}
+
+/** Set the elements of a revived collection, with the built-in methods. */
+function fillCollection(made: object, contents: unknown[]): void {
+  if (Array.isArray(made)) {
+    made.length = contents.length;
+    for (let i = 0; i < contents.length; i++) {
+      if (hasOwn(contents, i)) made[i] = contents[i];
+      else delete made[i];
+    }
+  } else if (made instanceof Map) {
+    Map.prototype.clear.call(made);
+    for (const entry of contents) {
+      if (!Array.isArray(entry) || entry.length !== 2) {
+        throw new TypeError('spindle: Malformed map entries');
+      }
+      Map.prototype.set.call(made, entry[0], entry[1]);
+    }
+  } else {
+    Set.prototype.clear.call(made);
+    for (const member of contents) Set.prototype.add.call(made, member);
+  }
+}
+
 /** Restore a registered class instance in place, so cycles through it hold. */
 function reviveClass(name: string) {
-  return (data: Record<string, unknown>): unknown => {
-    if (!isObject(data) || Object.getPrototypeOf(data) !== Object.prototype) {
+  return (data: Record<string, unknown> | unknown[]): unknown => {
+    if (Array.isArray(data)) {
+      return reviveBuiltin(name, registeredCtor(name), data);
+    }
+    if (!isPlainData(data)) {
       // Already revived: a cycle through the instance revives it twice
       if (isObject(data) && registeredClassName(data) === name) return data;
-      throw new TypeError(`spindle: Malformed data for class "${name}"`);
+      throw malformedClass(name);
     }
-    const ctor = registry.get(name);
-    if (!ctor) {
-      throw new TypeError(
-        `spindle: The save holds an instance of class "${name}", which is not registered`,
-      );
+    const ctor = registeredCtor(name);
+    // A plain object cannot be made a built-in (see classData)
+    if (Object.values(BUILTIN_KINDS).some((c) => ctor.prototype instanceof c)) {
+      throw malformedClass(name);
     }
     Object.setPrototypeOf(data, ctor.prototype as object);
     if (data instanceof Error) hideErrorKeys(data);
@@ -212,13 +398,24 @@ function reviveClass(name: string) {
   };
 }
 
+/** The class registered as `name`; throws if there is none. */
+function registeredCtor(name: string): Constructor {
+  const ctor = registry.get(name);
+  if (!ctor) {
+    throw new TypeError(
+      `spindle: The save holds an instance of class "${name}", which is not registered`,
+    );
+  }
+  return ctor;
+}
+
 /** Restore a built-in error in place, like a class instance. */
 function reviveError(name: string) {
   const ctor = ERROR_CTORS.get(name);
   if (!ctor) return undefined;
   return (data: Record<string, unknown>): unknown => {
     if (Object.getPrototypeOf(data) === ctor.prototype) return data;
-    if (!isObject(data) || Object.getPrototypeOf(data) !== Object.prototype) {
+    if (!isPlainData(data)) {
       throw new TypeError(`spindle: Malformed data for "${name}"`);
     }
     Object.setPrototypeOf(data, ctor.prototype);
@@ -272,16 +469,8 @@ function reviverFor(key: string | symbol) {
   if (key === KEYS_TAG) return reviveKeyed;
   if (key === REGEXP_TAG) {
     return (data: unknown) => {
-      if (
-        !Array.isArray(data) ||
-        typeof data[0] !== 'string' ||
-        typeof data[1] !== 'string' ||
-        !Number.isSafeInteger(data[2])
-      ) {
-        throw new TypeError('spindle: Malformed regular expression');
-      }
-      const re = new RegExp(data[0], data[1]);
-      re.lastIndex = data[2] as number;
+      const re = newRegExp(data);
+      if (!re) throw new TypeError('spindle: Malformed regular expression');
       return re;
     };
   }

package/src/components/Passage.tsx

@@ -7,7 +7,12 @@ import {
 } from 'preact/hooks';
 import { parseMarkup } from '../markup/parse';
 import type { ASTNode } from '../markup/ast';
-import { renderNodes, NobrContext } from '../markup/render';
+import {
+  renderNodes,
+  NobrContext,
+  ViewScopeContext,
+  useViewScope,
+} from '../markup/render';
 import { useStoryFields } from '../hooks/use-story-fields';
 import type { Passage as PassageData } from '../parser';
 import { sourceLocationOf } from '../utils/source-location';
@@ -130,20 +135,23 @@ export function Passage({
   }, [passage.name, navigationId]);
 
   const nobr = passage.tags.includes('nobr');
+  const viewScope = useViewScope();
 
   const inner = (
-    <div
-      ref={elRef}
-      class="passage"
-      data-passage={passage.name}
-      data-tags={passage.tags.join(' ')}
-      data-transition={dataTransition}
-    >
-      {headerContent && <div class="passage-header">{headerContent}</div>}
-      {content}
-      {footerContent && <div class="passage-footer">{footerContent}</div>}
-      {doneContent && <div hidden>{doneContent}</div>}
-    </div>
+    <ViewScopeContext.Provider value={viewScope}>
+      <div
+        ref={elRef}
+        class="passage"
+        data-passage={passage.name}
+        data-tags={passage.tags.join(' ')}
+        data-transition={dataTransition}
+      >
+        {headerContent && <div class="passage-header">{headerContent}</div>}
+        {content}
+        {footerContent && <div class="passage-footer">{footerContent}</div>}
+        {doneContent && <div hidden>{doneContent}</div>}
+      </div>
+    </ViewScopeContext.Provider>
   );
 
   return nobr ? (

package/src/components/PassageDialog.tsx

@@ -1,7 +1,12 @@
 import { createContext } from 'preact';
 import { useCallback, useLayoutEffect, useMemo, useRef } from 'preact/hooks';
 import { parseMarkup } from '../markup/parse';
-import { renderNodes, NobrContext } from '../markup/render';
+import {
+  renderNodes,
+  NobrContext,
+  ViewScopeContext,
+  useViewScope,
+} from '../markup/render';
 import { useStoryFields } from '../hooks/use-story-fields';
 import { emitFromRender } from '../event-emitter';
 import { useModalFocus } from '../hooks/use-modal-focus';
@@ -66,6 +71,7 @@ export function PassageDialog({
   }, [markup, nobr]);
 
   const panelRef = useRef<HTMLDivElement>(null);
+  const viewScope = useViewScope();
 
   // Focus into the dialog, trap Tab, Escape to close, restore focus on close.
   // Declared before the dialogrender effect so handlers can move focus.
@@ -113,7 +119,11 @@ export function PassageDialog({
               ✕
             </button>
           )}
-          <div class="dialog-body">{content}</div>
+          <div class="dialog-body">
+            <ViewScopeContext.Provider value={viewScope}>
+              {content}
+            </ViewScopeContext.Provider>
+          </div>
         </div>
       </div>
     </DialogCloseContext.Provider>

package/src/components/macros/Radiobutton.tsx

@@ -1,4 +1,5 @@
 import { defineMacro } from '../../define-macro';
+import { ViewScopeContext } from '../../markup/render';
 import { VARIABLE_PARAMETER, useVariableAction } from './input-macro';
 
 defineMacro({
@@ -12,6 +13,8 @@ defineMacro({
   render(_props, ctx) {
     const radioValue = ctx.args.value ?? '';
     const label = ctx.args.label ?? '';
+    // One group per variable in each view (see ViewScopeContext)
+    const view = ctx.hooks.useContext(ViewScopeContext);
 
     useVariableAction(ctx, {
       type: 'radiobutton',
@@ -27,7 +30,7 @@ defineMacro({
       >
         <input
           type="radio"
-          name={`radio-${ctx.varName}`}
+          name={view ? `radio-${view}-${ctx.varName}` : `radio-${ctx.varName}`}
           checked={ctx.value === radioValue}
           onChange={() => ctx.setValue!(radioValue)}
         />

package/src/components/macros/WidgetInvocation.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from 'preact/hooks';
+import { useContext, useMemo } from 'preact/hooks';
 import { WidgetChildrenContext, renderNodes } from '../../markup/render';
 import { useMergedLocals } from '../../hooks/use-merged-locals';
 import { evaluate } from '../../expression';
@@ -9,6 +9,7 @@ import { useRenderOptions } from '../../hooks/use-render-options';
 import { LocalsScope } from './locals-scope';
 import { useInterpolate } from '../../hooks/use-interpolate';
 import { wrapContent } from './display';
+import { widgetChildrenOf } from '../../interpolation';
 
 export { splitArgs };
 
@@ -44,7 +45,11 @@ function WidgetContent({
   const [mergedVars, mergedTemps, mergedLocals, mergedTrans] =
     useMergedLocals();
 
-  const childrenValue = invocationChildren?.length ? invocationChildren : null;
+  const outerChildren = useContext(WidgetChildrenContext);
+  const childrenValue = useMemo(
+    () => widgetChildrenOf(invocationChildren, outerChildren),
+    [invocationChildren, outerChildren],
+  );
 
   // Every widget gets its own local scope, even when it declares no
   // parameters or is invoked without arguments: missing parameters shadow

package/src/execute-mutation.ts

@@ -26,6 +26,7 @@ import {
 } from './structural';
 import { getByPath, setByPath } from './utils/object-path';
 import { asNamespace, hasOwn } from './utils/namespace';
+import { mapEntries, setMembers } from './utils/value-kinds';
 
 type NamespaceName = keyof VariableNamespaces;
 
@@ -148,6 +149,16 @@ function deeplyFrozen(value: unknown, seen = new Set<object>()): boolean {
   if (ArrayBuffer.isView(value) || value instanceof ArrayBuffer) return true;
   if (!Object.isFrozen(value)) return false;
   seen.add(value);
+  // What a Map or Set holds is not in its properties (#388)
+  if (value instanceof Map) {
+    for (const [key, entry] of mapEntries(value)) {
+      if (!deeplyFrozen(key, seen) || !deeplyFrozen(entry, seen)) return false;
+    }
+  } else if (value instanceof Set) {
+    for (const member of setMembers(value)) {
+      if (!deeplyFrozen(member, seen)) return false;
+    }
+  }
   return Reflect.ownKeys(value).every((key) => {
     const desc = Object.getOwnPropertyDescriptor(value, key);
     return !desc || !('value' in desc) || deeplyFrozen(desc.value, seen);

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

@@ -14,10 +14,26 @@ const FOCUSABLE = [
   '[tabindex]',
 ].join(',');
 
+/**
+ * Whether `el` is in a closed `<details>`, other than in the summary that
+ * toggles it: the browser renders none of that content (#389).
+ */
+function inClosedDetails(el: HTMLElement): boolean {
+  for (let e = el.parentElement; e; e = e.parentElement) {
+    if (e.localName !== 'details' || e.hasAttribute('open')) continue;
+    const summary = Array.from(e.children).find(
+      (c) => c.localName === 'summary',
+    );
+    if (!summary?.contains(el)) return true;
+  }
+  return false;
+}
+
 /**
  * Whether CSS leaves `el` in the tab sequence: not `visibility: hidden`
- * (inherited, so the computed value covers ancestors) and not inside a
- * `display: none` element.
+ * (inherited, so the computed value covers ancestors), not inside a
+ * `display: none` element and not in the hidden content of a closed
+ * `<details>`.
  */
 function isRendered(el: HTMLElement): boolean {
   const { visibility } = getComputedStyle(el);
@@ -25,7 +41,21 @@ function isRendered(el: HTMLElement): boolean {
   for (let e: HTMLElement | null = el; e; e = e.parentElement) {
     if (getComputedStyle(e).display === 'none') return false;
   }
-  return true;
+  return !inClosedDetails(el);
+}
+
+/**
+ * Whether `el` can be focused at all: shown, rendered, enabled (also by its
+ * fieldset) and not inert.
+ */
+function isAvailable(el: HTMLElement): boolean {
+  return (
+    !el.hidden &&
+    !el.closest('[hidden], [inert]') &&
+    // Also covers controls disabled by a <fieldset disabled> ancestor
+    !el.matches(':disabled') &&
+    isRendered(el)
+  );
 }
 
 /** The `tabindex` of `el` as an integer, or null when absent or invalid. */
@@ -36,9 +66,10 @@ function tabIndexAttr(el: HTMLElement): number | null {
 }
 
 /**
- * Whether the tab key can reach `el`: a negative tabindex only allows
- * scripted focus, and of a radio group the browser tabs to the checked
- * member only (the first one when none is checked).
+ * Whether the tab key can reach `el`, an available element (see
+ * isAvailable): a negative tabindex only allows scripted focus, and of a
+ * radio group the browser tabs to the checked member only (the first one
+ * when none is checked), of the members it can reach.
  */
 function isTabStop(el: HTMLElement): boolean {
   const tabIndex = tabIndexAttr(el);
@@ -67,7 +98,14 @@ function isTabStop(el: HTMLElement): boolean {
       (
         el.form ?? (el.getRootNode() as ParentNode)
       ).querySelectorAll<HTMLInputElement>('input[type="radio"]'),
-    ).filter((r) => r.name === el.name && r.form === el.form && !r.disabled);
+    ).filter(
+      (r) =>
+        r.name === el.name &&
+        r.form === el.form &&
+        // Of the members Tab can reach (#390)
+        (tabIndexAttr(r) ?? 0) >= 0 &&
+        isAvailable(r),
+    );
     const stop = group.find((r) => r.checked) ?? group[0];
     return el === stop;
   }
@@ -81,15 +119,7 @@ function isTabStop(el: HTMLElement): boolean {
 function focusables(root: HTMLElement): HTMLElement[] {
   const stops = Array.from(
     root.querySelectorAll<HTMLElement>(FOCUSABLE),
-  ).filter(
-    (el) =>
-      !el.hidden &&
-      !el.closest('[hidden], [inert]') &&
-      // Also covers controls disabled by a <fieldset disabled> ancestor
-      !el.matches(':disabled') &&
-      isRendered(el) &&
-      isTabStop(el),
-  );
+  ).filter((el) => isAvailable(el) && isTabStop(el));
   const positive = (el: HTMLElement) => Math.max(tabIndexAttr(el) ?? 0, 0);
   // Array.prototype.sort is stable: equal tabindexes keep document order
   return [

package/src/interpolation.ts

@@ -40,6 +40,25 @@ export function hasInterpolation(s: string): boolean {
   return s.includes('{') || s.includes('}');
 }
 
+/**
+ * The children an invocation passes to a block widget, for `{@children}`.
+ * `outer` is the children context the invocation itself was written in: a
+ * `{@children}` among `nodes` forwards the enclosing widget's children, so it
+ * resolves there, not against `nodes` again (#386).
+ */
+export interface WidgetChildren {
+  readonly nodes: ASTNode[];
+  readonly outer: WidgetChildren | null;
+}
+
+/** The children context for an invocation's `children`, or null if none. */
+export function widgetChildrenOf(
+  children: ASTNode[] | undefined,
+  outer: WidgetChildren | null | undefined,
+): WidgetChildren | null {
+  return children?.length ? { nodes: children, outer: outer ?? null } : null;
+}
+
 /** The scope text-only markup is evaluated in. */
 export interface TextScope {
   variables: Record<string, unknown>;
@@ -47,7 +66,7 @@ export interface TextScope {
   locals: Record<string, unknown>;
   transient: Record<string, unknown>;
   /** Invocation children of the enclosing block widget, for `{@children}`. */
-  widgetChildren?: ASTNode[] | null;
+  widgetChildren?: WidgetChildren | null;
 }
 
 /** A macro, expression or markup error met while evaluating text. */
@@ -177,11 +196,12 @@ class TextEvaluator {
       case 'variable':
         if (node.scope === 'local' && node.name === 'children') {
           // As {@children} in a widget body: the invocation's children, in
-          // the scope of the body.
+          // the scope of the body, and in the children context they were
+          // written in.
           const children = scope.widgetChildren;
           if (!children) return '';
-          return this.nested('children', children, scope, depth, {
-            widgetChildren: null,
+          return this.nested('children', children.nodes, scope, depth, {
+            widgetChildren: children.outer,
           });
         }
         return this.variable(node.scope, node.name, scope);
@@ -262,7 +282,7 @@ class TextEvaluator {
       }
       return this.nested(node.name, widget.body, scope, depth, {
         locals,
-        widgetChildren: node.children.length > 0 ? node.children : null,
+        widgetChildren: widgetChildrenOf(node.children, scope.widgetChildren),
       });
     }