@hyperfixi/testing-framework 3.1.1 → 3.3.0

package/src/multilingual/shipped-examples-execution.test.ts

@@ -17,6 +17,12 @@
  *   3. no allowlisted key has silently converged (stale entries must be
  *      removed so the list only ever ratchets down).
  *
+ * The same three run for the ENGINE LANE: `@hyperfixi/engine`, the engine meant
+ * to replace core's, against the same oracle on every handler upstream accepts
+ * (`allowedEngineDivergences` in the same baseline). It is the gate for a
+ * handler that parses on both engines and runs differently, which the
+ * parse-level list in shipped-sources-engine.test.ts cannot see.
+ *
  * To update after an intentional change: re-run and regenerate
  * `baselines/shipped-examples-execution.json` (the allowlist key embeds a
  * source hash, so FIXING a handler changes its key and assertion 3 forces the
@@ -54,6 +60,14 @@ interface AllowlistDoc {
     excerpt: string;
     reason: string;
   }>;
+  /** The engine lane: `@hyperfixi/engine` against upstream. */
+  allowedEngineDivergences: Array<{
+    key: string;
+    file: string;
+    event: string;
+    excerpt: string;
+    reason: string;
+  }>;
 }
 
 const baselinePath = path.resolve(
@@ -62,12 +76,17 @@ const baselinePath = path.resolve(
 );
 const allowlist = JSON.parse(readFileSync(baselinePath, 'utf8')) as AllowlistDoc;
 const allowed = new Set(allowlist.allowedDivergences.map(e => e.key));
+const allowedOnEngine = new Set(allowlist.allowedEngineDivergences.map(e => e.key));
+
+/** One sweep, shared by both lanes' tests. */
+let sweeping: Promise<ExecutionParityResult> | undefined;
+const sweep = (): Promise<ExecutionParityResult> => (sweeping ??= runShippedExamplesExecution());
 
 describe('shipped-examples execution gate', () => {
   let result: ExecutionParityResult;
 
   beforeAll(async () => {
-    result = await runShippedExamplesExecution();
+    result = await sweep();
 
     // Visibility, not assertions: what the sweep could not compare, and why.
     // A silently shrinking denominator is this gate's own blind spot.
@@ -84,6 +103,12 @@ describe('shipped-examples execution gate', () => {
     for (const [r, n] of [...reasons].sort((a, b) => b[1] - a[1])) {
       console.log(`[shipped-examples-execution]   skip ×${n}: ${r}`);
     }
+    const onEngine = result.engineCompared;
+    console.log(
+      `[shipped-examples-execution] engine lane: compared=${onEngine.length} ` +
+        `(vacuous=${onEngine.filter(c => c.vacuous).length}) ` +
+        `diverging=${onEngine.filter(c => !c.match).length}`
+    );
   }, 240_000);
 
   it('walks pages and compares handlers (sanity: extraction and both engines working)', () => {
@@ -142,6 +167,56 @@ describe('shipped-examples execution gate', () => {
   });
 });
 
+describe('shipped-examples execution gate: @hyperfixi/engine against upstream', () => {
+  let result: ExecutionParityResult;
+  beforeAll(async () => {
+    result = await sweep();
+  }, 240_000);
+
+  it('compares handlers on the engine (sanity: the lane ran and mostly agrees)', () => {
+    expect(result.engineCompared.length).toBeGreaterThan(90);
+    const realMatches = result.engineCompared.filter(c => c.match && !c.vacuous).length;
+    expect(realMatches).toBeGreaterThan(60);
+  });
+
+  it('has no NEW divergence from upstream outside the allowlist', () => {
+    const unexpected = result.engineCompared.filter(c => !c.match && !allowedOnEngine.has(c.key));
+    expect(
+      unexpected,
+      unexpected.length
+        ? `\nShipped handlers whose DOM effect on @hyperfixi/engine DIVERGES from the hyperscript.org ` +
+            `engine\n(the engine follows upstream's source: fix the engine, or allowlist with a reason ` +
+            `under allowedEngineDivergences):\n` +
+            unexpected
+              .map(
+                f =>
+                  `  [${f.key}]\n` +
+                  `      "${f.excerpt}"\n` +
+                  `      engine  : ${JSON.stringify(f.engineEffects).slice(0, 300)}\n` +
+                  `      upstream: ${JSON.stringify(f.upstreamEffects).slice(0, 300)}`
+              )
+              .join('\n') +
+            `\n\nOne source on both, on one page: npx tsx packages/engine/tools/probe.mts '<source>'`
+        : ''
+    ).toEqual([]);
+  });
+
+  it('has no stale allowlist entries', () => {
+    const stillDiverging = new Set(result.engineCompared.filter(c => !c.match).map(c => c.key));
+    const stale = allowlist.allowedEngineDivergences
+      .map(e => e.key)
+      .filter(k => !stillDiverging.has(k));
+    expect(
+      stale,
+      stale.length
+        ? `\nThese handlers no longer diverge on the engine (or were edited: the key embeds a\n` +
+            `source hash). Remove them from allowedEngineDivergences in\n` +
+            `baselines/shipped-examples-execution.json:\n  ${stale.join('\n  ')}`
+        : ''
+    ).toEqual([]);
+  });
+});
+
 describe('harness pieces', () => {
   it('extracts the trigger event from the leading on-clause', () => {
     expect(triggerEventOf('on click add .a to me')).toBe('click');

package/src/multilingual/shipped-examples-execution.ts

@@ -35,6 +35,15 @@
  * before/after snapshot around it. See runHandlerOnEngine for why isolation is
  * worth its cost.
  *
+ * ## The engine lane
+ * `@hyperfixi/engine` is meant to replace core's engine, so the same sweep
+ * runs it against the same oracle: every handler upstream accepts (whether or
+ * not core compiles it clean) is executed on upstream and on the engine, and
+ * the two effect signatures are compared (`engineCompared`). The parse-level
+ * list of what the engine rejects (shipped-sources-engine.test.ts) cannot see
+ * a handler that parses on both and runs differently; this can. A handler
+ * upstream accepts and the engine rejects is compared too, and diverges.
+ *
  * ## Node-only
  * Imports the real `hyperscript.org` build off disk and swaps jsdom globals
  * per handler execution (both engines resolve `document` lazily through
@@ -144,6 +153,18 @@ export interface ComparedHandler extends ShippedHandler {
   excerpt: string;
 }
 
+/** One handler run on upstream and on `@hyperfixi/engine`. */
+export interface EngineComparedHandler extends ShippedHandler {
+  key: string;
+  event: string;
+  engineEffects: string[];
+  upstreamEffects: string[];
+  match: boolean;
+  /** Both signatures empty: not evidence of parity (see ComparedHandler.vacuous). */
+  vacuous: boolean;
+  excerpt: string;
+}
+
 export interface ExecutionParityResult {
   /** Pages walked. */
   pages: number;
@@ -153,6 +174,8 @@ export interface ExecutionParityResult {
   compared: ComparedHandler[];
   /** Handlers excluded, each with its reason. */
   skipped: SkippedHandler[];
+  /** Handlers upstream accepts, executed on upstream and on `@hyperfixi/engine`. */
+  engineCompared: EngineComparedHandler[];
 }
 
 /** Stable key for one handler execution. */
@@ -219,6 +242,10 @@ export interface Engines {
   hyperfixiInstall(source: string, el: Element): Promise<void>;
   /** Install a handler on an element via the upstream engine. */
   upstreamInstall(el: Element): void;
+  /** `@hyperfixi/engine`'s parse errors for a source; [] = it parses. */
+  engineErrors(source: string): string[];
+  /** Install a handler on an element via `@hyperfixi/engine`. */
+  engineInstall(el: Element): void;
 }
 
 /**
@@ -311,7 +338,20 @@ export async function initEngines(): Promise<Engines> {
     processNode(el: Node): void;
   };
 
+  const engine = await import('@hyperfixi/engine');
+  engine.register(...engine.everything);
+
   return {
+    engineErrors(source) {
+      try {
+        return engine.api.parse(source).errors.map(e => e.message.split('\n')[0] ?? '');
+      } catch (e) {
+        return ['threw: ' + (e as Error).message.split('\n')[0]];
+      }
+    },
+    engineInstall(el) {
+      engine.api.processNode(el);
+    },
     compileClean(source) {
       try {
         const r = core.hyperscript.compileSync(source);
@@ -425,6 +465,7 @@ export async function runShippedExamplesExecution(opts?: {
 
   const compared: ComparedHandler[] = [];
   const skipped: SkippedHandler[] = [];
+  const engineCompared: EngineComparedHandler[] = [];
   let pages = 0;
   let handlers = 0;
 
@@ -438,6 +479,9 @@ export async function runShippedExamplesExecution(opts?: {
       handlers += pageHandlers.length;
 
       const eligible: Array<ShippedHandler & { event: string }> = [];
+      // The engine lane's denominator: dispatchable, deterministic, and upstream
+      // accepts it. Core's verdict is not part of it.
+      const oracle: Array<ShippedHandler & { event: string }> = [];
       for (const h of pageHandlers) {
         if (!h.event) {
           skipped.push({ ...h, reason: 'not an `on <event>` handler' });
@@ -452,6 +496,8 @@ export async function runShippedExamplesExecution(opts?: {
           skipped.push({ ...h, reason: disq.reason });
           continue;
         }
+        const upstreamErrs = engines.upstreamErrors(h.source);
+        if (upstreamErrs.length === 0) oracle.push(h as ShippedHandler & { event: string });
         if (!engines.compileClean(h.source)) {
           skipped.push({
             ...h,
@@ -459,14 +505,18 @@ export async function runShippedExamplesExecution(opts?: {
           });
           continue;
         }
-        const upstreamErrs = engines.upstreamErrors(h.source);
         if (upstreamErrs.length > 0) {
           skipped.push({ ...h, reason: `upstream rejects it (no oracle): ${upstreamErrs[0]}` });
           continue;
         }
         eligible.push(h as ShippedHandler & { event: string });
       }
-      if (eligible.length === 0) continue;
+      if (eligible.length === 0 && oracle.length === 0) continue;
+      // Upstream's signatures from the core lane serve the engine lane too when
+      // the two lanes install the same handlers on the page.
+      const sameHandlers =
+        eligible.length === oracle.length && eligible.every((h, i) => h === oracle[i]);
+      const upstreamRun = new Map<ShippedHandler, string[]>();
 
       // Both engines log runtime errors to the console during dispatch
       // (COMMAND FAILED etc.). That is expected data here — the effect
@@ -488,6 +538,7 @@ export async function runShippedExamplesExecution(opts?: {
           const theirs = await runHandlerOnEngine(html, eligible, h, (_hh, el) =>
             engines.upstreamInstall(el)
           );
+          upstreamRun.set(h, theirs);
           compared.push({
             ...h,
             key: keyFor(h),
@@ -498,6 +549,25 @@ export async function runShippedExamplesExecution(opts?: {
             excerpt: h.source.replace(/\s+/g, ' ').trim().slice(0, 100),
           });
         }
+        for (const h of oracle) {
+          const rejected = engines.engineErrors(h.source)[0];
+          const theirs =
+            (sameHandlers && upstreamRun.get(h)) ||
+            (await runHandlerOnEngine(html, oracle, h, (_hh, el) => engines.upstreamInstall(el)));
+          const ours =
+            rejected !== undefined
+              ? [`<engine rejects the source: ${rejected}>`]
+              : await runHandlerOnEngine(html, oracle, h, (_hh, el) => engines.engineInstall(el));
+          engineCompared.push({
+            ...h,
+            key: keyFor(h),
+            engineEffects: ours,
+            upstreamEffects: theirs,
+            match: JSON.stringify(ours) === JSON.stringify(theirs),
+            vacuous: ours.length === 0 && theirs.length === 0,
+            excerpt: h.source.replace(/\s+/g, ' ').trim().slice(0, 100),
+          });
+        }
       } finally {
         console.log = saved.log;
         console.warn = saved.warn;
@@ -507,5 +577,5 @@ export async function runShippedExamplesExecution(opts?: {
     }
   }
 
-  return { pages, handlers, compared, skipped };
+  return { pages, handlers, compared, skipped, engineCompared };
 }

package/src/multilingual/shipped-sources-engine.test.ts

@@ -0,0 +1,106 @@
+/**
+ * Shipped sources on `@hyperfixi/engine`: what replacing core's engine would break.
+ *
+ * `packages/engine` is meant to replace the engine in `packages/core`. Every
+ * hyperscript source this repository ships (`examples/` and the doc trees, the
+ * validity gate's collection) that core compiles clean is put to the engine's
+ * parser. The ones it rejects are listed in
+ * `baselines/shipped-sources-engine.json`, each with the reason it is still
+ * there. Three assertions, as the sibling gates:
+ *   1. sanity: sources were found and the engine reads most of them;
+ *   2. no NEW rejected source outside the list. A page or a doc example
+ *      written in syntax only core has would break when core's engine goes;
+ *      write upstream's spelling (`packages/engine/README.md` lists the forms
+ *      that were considered and not kept), or list it with a reason;
+ *   3. no stale entry: a listed source the engine now reads, or one that was
+ *      edited (the key embeds a hash of the source), must be removed, so the
+ *      list only shrinks. It is empty when core's engine can be replaced
+ *      without breaking a shipped page.
+ *
+ * This is a PARSE-level gate. A source can parse on both engines and run
+ * differently; the engine lane of `shipped-examples-execution.test.ts` is the
+ * gate for that.
+ *
+ * To see the list by form, and beside upstream's verdict:
+ * `npx tsx packages/engine/tools/shipped-sources.mts`.
+ */
+
+import { readFileSync } from 'node:fs';
+import { fileURLToPath } from 'node:url';
+import path from 'node:path';
+import { JSDOM } from 'jsdom';
+import { describe, it, expect, beforeAll } from 'vitest';
+import {
+  checkShippedSourcesOnEngine,
+  type CompileForValidity,
+  type ShippedSourcesOnEngineResult,
+} from './shipped-sources-validity';
+
+interface RejectedDoc {
+  rejected: Array<{ key: string; file: string; error: string; excerpt: string; reason: string }>;
+}
+
+const baselinePath = path.resolve(
+  path.dirname(fileURLToPath(import.meta.url)),
+  '../../baselines/shipped-sources-engine.json'
+);
+const listed = JSON.parse(readFileSync(baselinePath, 'utf8')) as RejectedDoc;
+const allowed = new Set(listed.rejected.map(e => e.key));
+
+describe('shipped sources on @hyperfixi/engine', () => {
+  let result: ShippedSourcesOnEngineResult;
+
+  beforeAll(async () => {
+    const core = (await import('@hyperfixi/core')) as unknown as {
+      hyperscript: { compileSync: CompileForValidity };
+    };
+    const { api, everything, register } = await import('@hyperfixi/engine');
+    register(...everything);
+    const dom = new JSDOM('<!doctype html><html><body></body></html>');
+    result = checkShippedSourcesOnEngine(
+      code => core.hyperscript.compileSync(code),
+      code => {
+        try {
+          return api.parse(code).errors.map(error => error.message);
+        } catch (e) {
+          return ['threw: ' + (e instanceof Error ? e.message : String(e))];
+        }
+      },
+      dom.window.document as unknown as Parameters<typeof checkShippedSourcesOnEngine>[2]
+    );
+  }, 120_000);
+
+  it('finds the shipped sources and the engine reads most of them (sanity)', () => {
+    expect(result.coreClean).toBeGreaterThan(200);
+    expect(result.engineAccepts).toBeGreaterThan(200);
+  });
+
+  it('has no NEW shipped source the engine rejects outside the list', () => {
+    const unexpected = result.rejections.filter(r => !allowed.has(r.key));
+    expect(
+      unexpected,
+      unexpected.length
+        ? `\nShipped sources core compiles and @hyperfixi/engine rejects (write upstream's spelling,\n` +
+            `or list it in baselines/shipped-sources-engine.json with a reason):\n` +
+            unexpected
+              .map(r => `  [${r.key}]\n      "${r.excerpt}"\n      -> ${r.error}`)
+              .join('\n') +
+            `\n\nOne source on the engine and on upstream, side by side:\n` +
+            `  npx tsx packages/engine/tools/probe.mts '<source>'`
+        : ''
+    ).toEqual([]);
+  });
+
+  it('has no stale entries (a source the engine now reads must be removed, so the list only shrinks)', () => {
+    const stillRejected = new Set(result.rejections.map(r => r.key));
+    const stale = listed.rejected.map(e => e.key).filter(key => !stillRejected.has(key));
+    expect(
+      stale,
+      stale.length
+        ? `\nThese listed sources are no longer rejected (read by the engine now, or edited: the key\n` +
+            `embeds a hash of the source). Remove them from baselines/shipped-sources-engine.json:\n  ` +
+            stale.join('\n  ')
+        : ''
+    ).toEqual([]);
+  });
+});

package/src/multilingual/shipped-sources-validity.ts

@@ -231,3 +231,68 @@ export function checkShippedSourcesValidity(
 
   return { checked: sources.length, clean, findings };
 }
+
+/** A shipped source `packages/core` compiles clean and `@hyperfixi/engine` rejects. */
+export interface EngineRejection extends ShippedSource {
+  /** Stable key: file plus a hash of the source, as the validity gate's. */
+  key: string;
+  /** The engine's first parse error, first line. */
+  error: string;
+  excerpt: string;
+}
+
+export interface ShippedSourcesOnEngineResult {
+  /** Distinct (file, source) pairs core compiles clean. */
+  coreClean: number;
+  /** Of those, the ones the engine parses. */
+  engineAccepts: number;
+  rejections: EngineRejection[];
+}
+
+/**
+ * What replacing core's engine with `@hyperfixi/engine` would break in the
+ * material we ship: every source core compiles clean, put to the engine's
+ * parser. `engineErrors` returns the engine's parse errors ([] = it parses).
+ *
+ * The denominator is core-clean sources on purpose. A source core itself
+ * rejects or recovers from is already broken where it is shipped, and is the
+ * validity gate's business; the question here is only what would STOP working.
+ */
+export function checkShippedSourcesOnEngine(
+  compile: CompileForValidity,
+  engineErrors: (code: string) => string[],
+  doc: Parameters<typeof extractHyperscriptFromMarkup>[0],
+  opts?: { roots?: string[]; repoRoot?: string }
+): ShippedSourcesOnEngineResult {
+  const seen = new Set<string>();
+  const rejections: EngineRejection[] = [];
+  let coreClean = 0;
+  let engineAccepts = 0;
+
+  for (const s of collectShippedSources(doc, opts)) {
+    const key = keyFor(s.file, s.source);
+    if (seen.has(key)) continue;
+    seen.add(key);
+    let clean = false;
+    try {
+      const result = compile(s.source);
+      clean = result.ok && (result.errors ?? []).length === 0;
+    } catch {
+      /* not core-clean */
+    }
+    if (!clean) continue;
+    coreClean++;
+    const errors = engineErrors(s.source);
+    if (errors.length === 0) {
+      engineAccepts++;
+      continue;
+    }
+    rejections.push({
+      ...s,
+      key,
+      error: (errors[0] ?? '').split('\n')[0] ?? '',
+      excerpt: s.source.replace(/\s+/g, ' ').trim().slice(0, 100),
+    });
+  }
+  return { coreClean, engineAccepts, rejections };
+}

package/src/multilingual/validators/execution-validator.test.ts

@@ -19,7 +19,7 @@ import { describe, it, expect, beforeAll } from 'vitest';
 import { ExecutionValidator, EXECUTION_SUBSET, loadExecutionSubset } from './execution-validator';
 
 describe('R2 execution subset (lock)', () => {
-  it('contains exactly the 48 curated patterns', () => {
+  it('contains exactly the 49 curated patterns', () => {
     // Changing this list recalibrates avgExecutionFidelity for every language.
     // If you expand the subset, regenerate the baseline (--save-baseline) in
     // the SAME PR and update this lock.
@@ -128,6 +128,10 @@ describe('R2 execution subset (lock)', () => {
         // execution-validator.ts.
         'append-content',
         'increment-by-amount',
+        // Wave 12 (hxi18n Arc 3): the book's counter — a property counter with
+        // a positional owner, which ran and changed nothing in every language
+        // until the semantic increment mapper desugared it to `set X to X + 1`.
+        'book-counter-increment',
       ].sort()
     );
   });
@@ -231,12 +235,37 @@ describe('R2 execution validator (lock)', () => {
     expect(clickOnly.effects).toEqual([]);
   });
 
+  it('the book counter increments its <output> in en and in the clitic languages', async () => {
+    // Hypermedia Systems ch. 9. The ja/ko renders are owner-first
+    // (`前 <output/> の textContent`), which neither parsed nor executed before
+    // hxi18n Arc 3; a property counter built by the semantic path also wrote
+    // nowhere until the increment mapper desugared it to `set X to X + 1`.
+    const en = await validator.execute(
+      'book-counter-increment',
+      'on click increment the textContent of the previous <output/>',
+      'en'
+    );
+    expect(en.error, en.error).toBeUndefined();
+    expect(en.effects).toHaveLength(1);
+    expect(en.effects[0]).toMatch(/^Δoutput.*text\[6\]$/);
+    for (const [lang, code] of [
+      ['ja', 'クリック を で 前 <output/> の textContent を 増加'],
+      ['ko', '클릭 할 때 이전 <output/> 의 textContent 을 증가'],
+    ] as const) {
+      const res = await validator.execute('book-counter-increment', code, lang);
+      expect(res.error, `${lang}: ${res.error}`).toBeUndefined();
+      expect(res.effects, lang).toEqual(en.effects);
+    }
+  });
+
   it('wave-6 en references execute with their locked signatures', async () => {
     // The six wave-6 additions. Each en reference must produce a non-empty,
     // deterministic signature against the existing fixture (the foundation every
     // language is scored against). next/closest positionals fall back to `me`
     // when no match exists in the fixture; set *opacity/*transform write inline
-    // style; caret-var-on-target clears #btn text (undefined `^count`).
+    // style; caret-var-on-target writes `null` into #btn (the undefined
+    // `^count`), as upstream's put writes a null value (PR 54; it used to
+    // clear the text).
     const cases: ReadonlyArray<[string, string, string[]]> = [
       [
         'next-element',
@@ -266,7 +295,7 @@ describe('R2 execution validator (lock)', () => {
       [
         'caret-var-on-target',
         'on click put ^count on #host into me',
-        ['Δ#btn cls[] attr[id=btn] style[] text[]'],
+        ['Δ#btn cls[] attr[id=btn] style[] text[null]'],
       ],
     ];
     for (const [id, code, expected] of cases) {

package/src/multilingual/validators/execution-validator.ts

@@ -72,9 +72,11 @@ export const EXECUTION_SUBSET: readonly string[] = [
   // patterns whose en reference now parses (the if/else conditional fold) and
   // executes (propertyAccess evaluator; matches/exists/is-empty condition
   // forms). Probed through this validator: each produces a non-empty,
-  // deterministic effect signature. `unless-condition` stays out — `unless` is
-  // deliberately NOT folded (see semantic-parser.tryParseConditionalBlock), so
-  // its flat parse still errors at runtime.
+  // deterministic effect signature. `unless-condition` stayed out while it was
+  // core's prefix `unless` (deliberately NOT folded: see
+  // semantic-parser.tryParseConditionalBlock; its flat parse errored at
+  // runtime). The row is `if I do not match …` since 2026-10-01 and has not
+  // been probed for this subset.
   'if-condition',
   'if-matches',
   'if-exists',
@@ -145,8 +147,8 @@ export const EXECUTION_SUBSET: readonly string[] = [
   // stale. No fixture/setup/trigger change needed; each en reference produces a clean
   // non-empty signature against the existing fixture (next/closest positionals fall
   // back to `me` consistently across every language; set *opacity/*transform write
-  // inline style; caret-var-on-target clears #btn text — the undefined `^count` resolves
-  // the same way in every language).
+  // inline style; caret-var-on-target writes `null` into #btn, as upstream's put writes
+  // a null value — the undefined `^count` resolves the same way in every language).
   'next-element',
   'toggle-aria-expanded',
   'set-opacity',
@@ -213,6 +215,14 @@ export const EXECUTION_SUBSET: readonly string[] = [
   // Fixture adds `#a`/`#b` with distinguishable content (appended last, so
   // existing snapshot indices are preserved).
   'swap-content',
+  // Expansion wave 12 (hxi18n Arc 3): `increment the textContent of the previous
+  // <output/>` — Hypermedia Systems ch. 9, verbatim. It parsed lossily in every
+  // language (the owner dropped) until the of-possessive matcher took positional
+  // owners, and even then it ran and changed nothing on the semantic path: the
+  // AST handed `increment` a property access, which the command evaluated and
+  // wrote nowhere. The semantic mapper now desugars a property counter to core's
+  // own `set X to (X + 1)`. PATTERN_SETUP puts an <output> before #btn.
+  'book-counter-increment',
 ];
 
 /**
@@ -265,6 +275,13 @@ const PATTERN_SETUP: Record<string, (doc: Document) => void> = {
     doc.querySelector('.card')!.classList.add('modal');
     doc.body.classList.add('modal-open');
   },
+  // `increment the textContent of the previous <output/>` needs an <output>
+  // before #btn, as in the book's counter (`<output>0</output><button …>`).
+  'book-counter-increment': doc => {
+    const out = doc.createElement('output');
+    out.textContent = '5';
+    doc.getElementById('btn')!.before(out);
+  },
 };
 
 /**