brookmd 0.26.1 → 0.28.0

package/CHANGELOG.md

@@ -4,6 +4,106 @@ Notable changes to brookmd (formerly `flux-md`). Format based on
 [Keep a Changelog](https://keepachangelog.com/); this project aims to follow
 [Semantic Versioning](https://semver.org/).
 
+## 0.28.0 — 2026-07-31
+
+**Browser-side linearity.** The parser and wire have been O(new bytes) per
+append for a while; this release makes the *DOM application* match. Before, an
+open (streaming) block was fully rebuilt on every animation frame — a 20 KB
+highlighted code block wrote ~44 million characters of `innerHTML` over its
+lifetime (≈2,150× the wire bytes), and a per-frame `replaceWith` destroyed any
+text selection or `<pre>` scroll position inside the block. Every open-block
+path now applies patches incrementally, measured at **2–3.4× the block's final
+markup, flat across sizes** (1× is the write-it-once floor), and enforced by a
+chars-written regression gate so browser-side linearity is CI-pinned like the
+parser's scaling shapes.
+
+### Performance
+
+- **Open blocks apply the wire's splice instead of rebuilding.** The delta
+  signal (`keep_units`) the wire already computed was being discarded at the
+  client; it now reaches both renderers, which rebuild only the element the
+  splice lands in (fast path fires ~94% of syncs; any ambiguity falls back to
+  a full rebuild, so correctness never depends on the fast path).
+- **Open code blocks reuse the streaming highlighter's frozen prefix**: the
+  frozen markup is appended once and never rewritten; only the bounded
+  speculative tail repaints. 20 KB highlighted stream: ~44 MB written → ~370 KB
+  (**~120× less**).
+- **Keyed list/container sync in the DOM renderer** (`blockData` on): settled
+  `<li>`s / nested container children are never re-rendered — new items append,
+  only the open last item repaints; a tight→loose flip resyncs once, keyed by
+  `(index, html)` so it cannot be silently missed. Streamed 20 KB list: 284× →
+  **2.9×**; blockquote: 318× → **3.4×**.
+- **React's keyed container path now engages by default.** It was accidentally
+  gated behind a `components` map (git history shows the gate was incidental);
+  a default-config streaming blockquote/alert now renders keyed — 22.6× and
+  growing → **3.4× flat**. React and DOM implementations were cross-checked to
+  byte-identical work counts.
+- Known documented fallback: a streamed table with `blockData: false` still
+  takes the full-rebuild path (the splice refuses table tag chains — foster
+  parenting). `blockData: true` tables were already incremental (1.7×). A
+  table-scoped splice was measured (15% improvement) and rejected as not worth
+  the parser-divergence risk.
+
+### Fixed
+
+- **Text selection and `<pre>` scroll survive streaming.** Selecting text in
+  the already-settled part of a streaming block no longer collapses on the
+  next token; a code block's horizontal scroll position is preserved. Both are
+  pinned by tests with negative controls.
+
+### Changed
+
+- The DOM inside an open, streaming `<code>` element is now two spans (frozen +
+  speculative tail) while streaming; it settles to the same single-markup form
+  as before when the block closes. CSS that targets `code > *` structurally
+  may observe the difference mid-stream only. Settled output is unchanged.
+- React's default open blockquote/alert omits inter-block whitespace text
+  nodes mid-stream (matching the DOM renderer's long-standing keyed behavior);
+  layout is unaffected and settle output is byte-identical.
+
+## 0.27.0 — 2026-07-31
+
+### Added
+
+- **Streaming syntax highlighting — open code blocks now highlight live, on by
+  default.** Since 0.19 the built-in highlighter deliberately waited for a
+  fence to close; a streaming block showed plain text. Open blocks now render
+  highlighted as they grow, and the mechanism preserves every guarantee the
+  deferred design existed to protect:
+
+  - **Byte-identical at settle.** All committed markup comes from seeded runs
+    of the same resumable tokenizer that `highlight()` uses — the frozen
+    prefix is only ever extended at *checkpoints* (positions provably outside
+    any future token: after a newline in whitespace, ≥ 3 bytes behind the
+    stream head, with no unterminated string/comment/template live; HTML
+    checkpoints after `>` instead). When the block closes, one seeded run
+    finishes the tail, so the final bytes equal a one-shot `highlight()` —
+    pinned by a ~44,000-case fuzz (all languages, chunk sizes down to 1 byte,
+    plus speculative-revision streams) asserting settle-identity and that
+    every intermediate frozen prefix is a byte-prefix of the final output.
+  - **Bounded work, independent of block size.** Between checkpoints, an
+    unterminated string/comment advances via an O(1)-state scanner over only
+    the new bytes; the tail re-scan is capped at 8 KB (past the cap the tail
+    renders plain until the next checkpoint — correctness unaffected). Total
+    tokenization work measures ≈ 5.7× the streamed bytes end-to-end against
+    the real parser, flat from 288 B to 23 KB blocks (naive re-highlighting
+    measures 812× more at 23 KB); a work-bound test enforces < 6×. The
+    50 000-char plain-escape guard still applies and discards streaming state.
+  - **The tail is speculative.** The few tokens nearest the stream head may
+    change color as bytes arrive (an unterminated `"` reads as plain until its
+    closer lands) — the same speculative-tail behavior brookmd's links and
+    emphasis already have. Frozen output never changes.
+
+  Opt out with `streamingHighlight={false}` on `BrookMarkdown` (React) or
+  `streamingHighlight: false` in `mountBrookMarkdown` options (DOM, and via it
+  the Web Component and Vue/Svelte/Solid adapters) — that restores 0.26.1's
+  plain-until-close exactly. Not a `ParserConfig` field: highlighting is a
+  renderer concern; the parser, wire, and WASM are untouched. SSR is
+  unchanged (closed blocks, synchronous), and `components.CodeBlock` /
+  `pre` / `code` overrides still bypass the built-in highlighter entirely.
+  Closing a block that streamed in now also highlights near-instantly: the
+  close-time pass reuses the accumulated prefix instead of starting over.
+
 ## 0.26.1 — 2026-07-30
 
 Two fixes found by benchmarking 0.26.0 against real chat traffic. Requires

package/README.md

@@ -4,7 +4,7 @@ Zero-dep streaming markdown for the browser. Rust→WASM core, one Web Worker pe
 
 Drop in a streaming-aware renderer — **React, Vue, Svelte, Solid, a framework-agnostic `<brook-markdown>` Web Component, or the vanilla DOM mount** — wire each LLM stream to a `BrookClient`, and the markdown renders incrementally off the main thread, block by block, with stable identities so unchanged blocks never re-reconcile.
 
-Parsing runs entirely **off the main thread** — each stream gets its own pooled Web Worker, so many concurrent LLM responses render without contending for the UI thread. On each token the parser re-parses only the **active tail**, not the whole document; patches cross the worker boundary as **verified splices** (not full re-sends, so emitted bytes stay O(n) even for one giant growing block); and heavy renderers (syntax highlighting, math, mermaid) are **deferred until a block closes**. The result is low retained memory and a main thread that stays responsive while streaming. See [the live demo](https://md.hsingh.app/).
+Parsing runs entirely **off the main thread** — each stream gets its own pooled Web Worker, so many concurrent LLM responses render without contending for the UI thread. On each token the parser re-parses only the **active tail**, not the whole document; patches cross the worker boundary as **verified splices** (not full re-sends, so emitted bytes stay O(n) even for one giant growing block); and heavy renderers (math, mermaid) are **deferred until a block closes** — code fences highlight as they stream, re-tokenizing only the last line rather than the whole block per chunk. The result is low retained memory and a main thread that stays responsive while streaming. See [the live demo](https://md.hsingh.app/).
 
 > **Beyond the browser:** the same Rust core also powers experimental React
 > Native, Swift (iOS/macOS), Kotlin/Android, Flutter, and C-ABI bindings —
@@ -248,7 +248,9 @@ controlled-string helpers wrap; in vanilla you call it directly.
 
 `mountBrookMarkdown(client, container, options?)` returns `{ destroy(), refresh() }`.
 Options: `components`, `sanitize`, `virtualize`, `stickToBottom`, `highlightCode`
-(default true), `batch` (default true — one DOM write per `requestAnimationFrame`),
+(default true), `streamingHighlight` (default true — highlight a code fence while
+it is still streaming; see [Streaming syntax highlighting](#streaming-syntax-highlighting)),
+`batch` (default true — one DOM write per `requestAnimationFrame`),
 `morphOpenBlocks` (default false — morph a growing generic open block's subtree in
 place instead of rebuilding it via `innerHTML`, so only the changed parts repaint
 and focus/selection in the streaming tail survive; the rendered result is
@@ -1167,6 +1169,34 @@ import { highlight } from "brookmd/highlight";
 const html = highlight("const x = 1;", "ts");
 ```
 
+### Streaming syntax highlighting
+
+A code fence is highlighted **while it streams**, not only once it closes. On by
+default; turn it off with `streamingHighlight={false}` (React) or
+`{ streamingHighlight: false }` (the DOM mount options / Vue / Svelte / Solid),
+which restores the plain-until-close behaviour.
+
+It stays O(n) over the whole block rather than re-highlighting the fence on every
+chunk. An open block keeps a **frozen prefix** — markup for everything behind a
+checkpoint, which later bytes provably cannot rewrite — and re-tokenizes only the
+**tail** after it, about one source line's worth per patch. When the fence closes,
+the tokenizer resumes from that checkpoint instead of starting over, so a block
+that streamed in highlights near-instantly.
+
+Two things worth knowing:
+
+- **The tail is speculative.** A prefix of source does not tokenize like the same
+  prefix of a longer source: `const s = "hello` is a stray quote plus an
+  identifier until its closing quote lands, and `123.456e` is `123` plus loose
+  fragments until a digit arrives. So the last line's colours can shift as bytes
+  come in. Nothing behind the checkpoint ever changes.
+- **The settled markup is byte-identical** to `highlight(text, lang)` either way.
+  Turning this on or off changes when colour appears, never what it is.
+
+Blocks past the highlighter's 50 000-character guard, unknown languages, and any
+fence taken over by a `components.CodeBlock` / `pre` / `code` override are
+unaffected — they behave exactly as before.
+
 ## Coverage
 
 **CommonMark 0.31: 100% (652/652 spec examples), byte-exact** — every section,
@@ -1218,8 +1248,6 @@ By design, not yet, or only partially:
   (`<span>`/`<div class="math …">` with `gfmMath` on) and a `Mermaid` slot, but
   stays zero-dep: bring your own KaTeX / mermaid pass (or a `components.MathBlock`
   / `components.Mermaid` override) for the actual SVG/MathML output.
-- **Syntax highlighting on open code blocks** — deferred until close. This is a
-  deliberate perf choice.
 
 ## Performance
 

package/dist/client.js

@@ -1,5 +1,6 @@
 import { warnOnce } from "./warn.js";
 import { createWorker } from "./asset-urls.js";
+import { noteSplice } from "./splice.js";
 function emptyBlockStore() {
   return { committed: /* @__PURE__ */ new Map(), committedOrder: [], active: [], snapshot: [] };
 }
@@ -18,7 +19,9 @@ function applyPatch(store, patch) {
       const { html_delta, ...rest } = entry;
       const prev = store.active.find((b) => b.id === entry.id);
       if (!prev) throw new Error(`brookmd: html_delta for block ${entry.id} without a base`);
-      active[i] = { ...rest, html: prev.html.slice(0, html_delta.keep_units) + html_delta.append };
+      const next2 = { ...rest, html: prev.html.slice(0, html_delta.keep_units) + html_delta.append };
+      active[i] = next2;
+      noteSplice(next2, prev, html_delta.keep_units);
     } else {
       active[i] = entry;
     }

package/dist/dom.d.ts

@@ -64,6 +64,17 @@ export interface MountOptions {
     /** Use the built-in code highlighter. Default true; suppressed when a
      *  `components.CodeBlock` override is supplied. */
     highlightCode?: boolean;
+    /**
+     * Highlight a code fence **while it is still streaming**, instead of showing
+     * plain escaped text until it closes. On by default (parity with the React
+     * renderer's `streamingHighlight` prop).
+     *
+     * An open block keeps a frozen prefix and re-tokenizes only its tail on each
+     * patch, so this stays linear in the block's size. The settled markup is
+     * byte-identical either way — only the tail's colours are provisional, and
+     * they may shift as bytes arrive. Set `false` for the pre-0.27 behaviour.
+     */
+    streamingHighlight?: boolean;
     /** Coalesce patches into one DOM write per animation frame. Default true. */
     batch?: boolean;
     /**
@@ -118,7 +129,24 @@ export interface MountOptions {
      * `client.getMetrics().rebuildCount`.
      */
     onRenderMetrics?: RenderMetricsHook;
+    /**
+     * @internal TEST-ONLY. Turn off the incremental apply fast paths — the open
+     * code block's frozen/tail mirror and the delta-driven child splice — so every
+     * changed open block rebuilds its whole node, exactly as it did before those
+     * existed. The DOM-parity fuzz mounts one renderer with this on and one with it
+     * off over the same patch stream and asserts their `innerHTML` matches after
+     * every sync: correctness must never depend on a fast path firing. Not part of
+     * the supported API and never useful in an app.
+     */
+    __fullRebuild?: boolean;
 }
+/** @internal Test-only. */
+export declare function __keyedStats(): {
+    attempts: number;
+    hits: number;
+};
+/** @internal Test-only. */
+export declare function __resetKeyedStats(): void;
 export declare function mountBrookMarkdown(client: BrookClient, container: HTMLElement, options?: MountOptions): MountHandle;
 /**
  * Derive the streaming tail's block id from an ordered snapshot: the id of the

package/dist/dom.js

@@ -1,8 +1,19 @@
 import { highlightDeferred } from "./hi-defer.js";
+import { createInc, incHighlight, incSeed } from "./hi-inc.js";
 import { morph } from "./morph.js";
+import { newIncCode, paintIncCode, spliceHtml, spliceKeep } from "./splice.js";
 import { blockProps, extractLang } from "./block-props.js";
 import { decorateSegments } from "./decorate.js";
 import { safeUrl } from "./url-safety.js";
+let keyedAttempts = 0;
+let keyedHits = 0;
+function __keyedStats() {
+  return { attempts: keyedAttempts, hits: keyedHits };
+}
+function __resetKeyedStats() {
+  keyedAttempts = 0;
+  keyedHits = 0;
+}
 const INTRINSIC_PX = {
   Paragraph: 80,
   Heading: 44,
@@ -28,8 +39,10 @@ function mountBrookMarkdown(client, container, options = {}) {
   const hasInlineTransforms = !!decorators || !!urlTransform;
   const hasPerf = typeof performance !== "undefined";
   const highlightCode = options.highlightCode !== false && !components?.CodeBlock;
+  const streamingHighlight = options.streamingHighlight !== false;
   const batch = options.batch !== false && typeof requestAnimationFrame === "function";
   const morphOpenBlocks = options.morphOpenBlocks === true;
+  const fullRebuild = options.__fullRebuild === true;
   const root = document.createElement("div");
   root.className = options.className ? `brook-md ${options.className}` : "brook-md";
   if (options.id) root.id = options.id;
@@ -68,6 +81,7 @@ function mountBrookMarkdown(client, container, options = {}) {
           id: b.id,
           node: void 0,
           html: b.html,
+          block: b,
           open: b.open,
           speculative: b.speculative,
           kind: b.kind.type,
@@ -85,6 +99,13 @@ function mountBrookMarkdown(client, container, options = {}) {
         continue;
       }
       const t0 = onRenderMetrics && hasPerf ? performance.now() : 0;
+      if (existing.codeInc && existing.inc && b.open && existing.open && b.kind.type === "CodeBlock" && existing.kind === "CodeBlock" && syncIncCode(existing, b)) {
+        if (onRenderMetrics) noteRender(existing, b, t0);
+        existing.html = b.html;
+        existing.block = b;
+        existing.speculative = b.speculative;
+        continue;
+      }
       if (existing.table && b.open && b.kind.type === "Table") {
         const data = tableData(b);
         if (data) {
@@ -94,15 +115,38 @@ function mountBrookMarkdown(client, container, options = {}) {
             existing.node.classList.toggle("brook-speculative", b.speculative);
           }
           existing.html = b.html;
+          existing.block = b;
+          existing.open = b.open;
+          existing.speculative = b.speculative;
+          continue;
+        }
+      }
+      if (!fullRebuild && existing.list && b.open && b.kind.type === "List" && existing.kind === "List") {
+        const ld = b.kind.data;
+        if (ld && syncKeyedList(existing.list, ld)) {
+          if (onRenderMetrics) noteRender(existing, b, t0);
+          existing.node.className = genericClassName(b);
+          existing.html = b.html;
+          existing.block = b;
           existing.open = b.open;
           existing.speculative = b.speculative;
           continue;
         }
       }
+      if (!fullRebuild && existing.container && b.open && existing.kind === b.kind.type && (b.kind.type === "Blockquote" || b.kind.type === "Alert") && syncKeyedContainer(existing.container, b)) {
+        if (onRenderMetrics) noteRender(existing, b, t0);
+        existing.node.className = genericClassName(b);
+        existing.html = b.html;
+        existing.block = b;
+        existing.open = b.open;
+        existing.speculative = b.speculative;
+        continue;
+      }
       if (morphOpenBlocks && b.open && existing.open && existing.generic && existing.kind === b.kind.type && usesGenericPath(b)) {
         morph(existing.node, sanitize ? sanitize(b.html) : b.html);
         if (onRenderMetrics) noteRender(existing, b, t0);
         existing.html = b.html;
+        existing.block = b;
         existing.speculative = b.speculative;
         existing.node.className = genericClassName(b);
         existing.generic = !sanitize;
@@ -112,9 +156,36 @@ function mountBrookMarkdown(client, container, options = {}) {
         existing.node.insertAdjacentHTML("beforeend", b.html.slice(existing.html.length));
         if (onRenderMetrics) noteRender(existing, b, t0);
         existing.html = b.html;
+        existing.block = b;
         continue;
       }
+      if (!fullRebuild && !sanitize && !hasInlineTransforms && existing.generic && b.open && existing.open && existing.kind === b.kind.type && usesGenericPath(b)) {
+        const keep = spliceKeep(existing.block, b);
+        if (keep !== void 0 && spliceHtml(existing.node, existing.html, b.html, keep)) {
+          if (onRenderMetrics) noteRender(existing, b, t0);
+          existing.html = b.html;
+          existing.block = b;
+          existing.speculative = b.speculative;
+          existing.node.className = genericClassName(b);
+          continue;
+        }
+      }
+      if (!fullRebuild && existing.plainCode && b.open && existing.open && b.kind.type === "CodeBlock" && existing.kind === "CodeBlock") {
+        const keep = spliceKeep(existing.block, b);
+        if (keep !== void 0 && spliceHtml(existing.plainCode, existing.html, b.html, keep)) {
+          if (onRenderMetrics) noteRender(existing, b, t0);
+          existing.html = b.html;
+          existing.block = b;
+          existing.speculative = b.speculative;
+          continue;
+        }
+      }
       existing.table = void 0;
+      existing.list = void 0;
+      existing.container = void 0;
+      existing.codeInc = void 0;
+      existing.plainCode = void 0;
+      if (existing.inc && b.kind.type !== "CodeBlock") existing.inc = void 0;
       if (existing.highlight) {
         existing.highlight.cancel();
         existing.highlight = void 0;
@@ -124,6 +195,7 @@ function mountBrookMarkdown(client, container, options = {}) {
       existing.node = node;
       if (onRenderMetrics) noteRender(existing, b, t0);
       existing.html = b.html;
+      existing.block = b;
       existing.open = b.open;
       existing.speculative = b.speculative;
       existing.kind = b.kind.type;
@@ -133,6 +205,9 @@ function mountBrookMarkdown(client, container, options = {}) {
       for (const [id, mb] of mounted) {
         if (!seen.has(id)) {
           if (mb.highlight) mb.highlight.cancel();
+          mb.inc = void 0;
+          mb.codeInc = void 0;
+          mb.plainCode = void 0;
           mb.node.remove();
           mounted.delete(id);
         }
@@ -202,13 +277,13 @@ function mountBrookMarkdown(client, container, options = {}) {
       if (data) return buildKeyedTable(b, data, mb);
     }
     if (b.open && kind === "List" && !hasInlineTransforms) {
-      const keyed = renderKeyedList(b);
+      const keyed = renderKeyedList(b, mb);
       if (keyed) return keyed;
     }
     const node = document.createElement("div");
     node.className = genericClassName(b);
     if (b.open && !sanitize && !hasInlineTransforms && (kind === "Blockquote" || kind === "Alert")) {
-      const wrapper = renderKeyedContainer(b);
+      const wrapper = renderKeyedContainer(b, mb);
       if (wrapper) {
         node.appendChild(wrapper);
         return node;
@@ -220,47 +295,122 @@ function mountBrookMarkdown(client, container, options = {}) {
     lastRenderGeneric = !sanitize && !hasInlineTransforms;
     return node;
   }
-  function renderKeyedList(b) {
+  function renderKeyedList(b, mb) {
     const ld = b.kind.data;
     const items = ld?.items;
     if (!Array.isArray(items) || items.length === 0) return null;
     const node = document.createElement("div");
-    node.className = "brook-block brook-block-list" + (b.open ? " brook-open" : "") + (b.speculative ? " brook-speculative" : "");
-    const list = document.createElement(ld?.ordered ? "ol" : "ul");
-    if (ld?.ordered && ld.start !== void 0 && ld.start !== 1) {
+    node.className = genericClassName(b);
+    const ordered = !!ld?.ordered;
+    const list = document.createElement(ordered ? "ol" : "ul");
+    if (ordered && ld.start !== void 0 && ld.start !== 1) {
       list.setAttribute("start", String(ld.start));
     }
-    for (const it of items) {
+    const rendered = new Array(items.length);
+    for (let i = 0; i < items.length; i++) {
       const li = document.createElement("li");
-      li.innerHTML = sanitize ? sanitize(it.html) : it.html;
+      li.innerHTML = sanitize ? sanitize(items[i].html) : items[i].html;
       list.appendChild(li);
+      rendered[i] = items[i].html;
     }
     node.appendChild(list);
+    mb.list = { list, ordered, start: ld?.start, items: rendered };
     return node;
   }
-  function renderKeyedContainer(b) {
+  function syncKeyedList(km, ld) {
+    keyedAttempts++;
+    const items = ld.items;
+    if (!Array.isArray(items) || items.length === 0) return false;
+    if (!!ld.ordered !== km.ordered) return false;
+    const cur = km.items;
+    const kids = km.list.children;
+    if (kids.length !== cur.length) return false;
+    if (ld.start !== km.start) {
+      if (km.ordered && ld.start !== void 0 && ld.start !== 1) {
+        km.list.setAttribute("start", String(ld.start));
+      } else {
+        km.list.removeAttribute("start");
+      }
+      km.start = ld.start;
+    }
+    const n = items.length;
+    while (cur.length > n) {
+      km.list.removeChild(km.list.lastElementChild);
+      cur.pop();
+    }
+    for (let i = 0; i < cur.length; i++) {
+      if (cur[i] === items[i].html) continue;
+      kids[i].innerHTML = sanitize ? sanitize(items[i].html) : items[i].html;
+      cur[i] = items[i].html;
+    }
+    for (let i = cur.length; i < n; i++) {
+      const li = document.createElement("li");
+      li.innerHTML = sanitize ? sanitize(items[i].html) : items[i].html;
+      km.list.appendChild(li);
+      cur.push(items[i].html);
+    }
+    keyedHits++;
+    return true;
+  }
+  function renderKeyedContainer(b, mb) {
     const nested = b.kind.data?.nested;
     if (!Array.isArray(nested)) return null;
     const tagName = b.kind.type === "Alert" ? "div" : "blockquote";
     const wrapper = document.createElement(tagName);
     applyOpenTagAttrs(wrapper, b.html);
+    let offset = 0;
+    let title = "";
     if (b.kind.type === "Alert") {
-      const title = alertTitleHtml(b.html);
+      title = alertTitleHtml(b.html);
       if (title) {
         const t = document.createElement("div");
         t.innerHTML = title;
         const titleNode = t.firstElementChild;
-        if (titleNode) wrapper.appendChild(titleNode);
+        if (titleNode) {
+          wrapper.appendChild(titleNode);
+          offset = 1;
+        }
       }
     }
+    const rendered = new Array(nested.length);
     for (let i = 0; i < nested.length; i++) {
-      const child = document.createElement("div");
-      child.innerHTML = nested[i].html;
-      const inner = child.firstElementChild;
-      wrapper.appendChild(inner ?? child);
+      wrapper.appendChild(nestedChild(nested[i].html));
+      rendered[i] = nested[i].html;
     }
+    mb.container = { wrapper, offset, openTag: openTagOf(b.html), title, nested: rendered };
     return wrapper;
   }
+  function nestedChild(html) {
+    const child = document.createElement("div");
+    child.innerHTML = html;
+    return child.firstElementChild ?? child;
+  }
+  function syncKeyedContainer(kc, b) {
+    keyedAttempts++;
+    const nested = b.kind.data?.nested;
+    if (!Array.isArray(nested)) return false;
+    if (openTagOf(b.html) !== kc.openTag) return false;
+    if (b.kind.type === "Alert" && alertTitleHtml(b.html) !== kc.title) return false;
+    const cur = kc.nested;
+    const kids = kc.wrapper.children;
+    if (kids.length !== kc.offset + cur.length) return false;
+    const n = nested.length;
+    while (cur.length > n) {
+      kc.wrapper.removeChild(kc.wrapper.lastElementChild);
+      cur.pop();
+    }
+    for (let i = 0; i < cur.length; i++) {
+      if (cur[i] === nested[i].html) continue;
+      kc.wrapper.replaceChild(nestedChild(nested[i].html), kids[kc.offset + i]);
+      cur[i] = nested[i].html;
+    }
+    for (let i = cur.length; i < n; i++) {
+      kc.wrapper.appendChild(nestedChild(nested[i].html));
+      cur.push(nested[i].html);
+    }
+    keyedHits++;
+    return true;
+  }
   function buildKeyedTable(b, data, mb) {
     const node = document.createElement("div");
     node.className = "brook-block brook-block-table brook-open" + (b.speculative ? " brook-speculative" : "");
@@ -348,9 +498,22 @@ function mountBrookMarkdown(client, container, options = {}) {
   }
   function renderCodeBlock(b, mb) {
     const lang = extractLang(b.html) || "text";
+    mb.codeInc = void 0;
+    mb.plainCode = void 0;
     const text = b.open ? "" : codeText(b);
-    const run = text ? highlightDeferred(text, lang) : null;
-    const highlighted = run ? run.html : null;
+    let openMarkup = null;
+    if (b.open && streamingHighlight) {
+      let inc = mb.inc;
+      if (inc === void 0 || inc.lang !== lang.toLowerCase()) {
+        inc = createInc(lang) ?? void 0;
+        mb.inc = inc;
+      }
+      if (inc !== void 0) openMarkup = incHighlight(inc, codeText(b));
+    }
+    const seed = !b.open && mb.inc !== void 0 ? incSeed(mb.inc, text, lang) : void 0;
+    const run = text ? highlightDeferred(text, lang, seed) : null;
+    if (!b.open) mb.inc = void 0;
+    const highlighted = openMarkup ?? (run ? run.html : null);
     const block = document.createElement("div");
     block.className = "brook-code-block" + (b.open ? " brook-streaming" : "");
     const header = document.createElement("div");
@@ -371,7 +534,9 @@ function mountBrookMarkdown(client, container, options = {}) {
     const body = document.createElement("div");
     body.className = "brook-code-body";
     if (highlighted !== null) {
-      body.appendChild(highlightedPre(lang, highlighted));
+      body.appendChild(
+        openMarkup !== null && mb.inc !== void 0 && !fullRebuild ? incPre(lang, mb, mb.inc, openMarkup) : highlightedPre(lang, highlighted)
+      );
     } else {
       const div = document.createElement("div");
       div.tabIndex = 0;
@@ -379,12 +544,14 @@ function mountBrookMarkdown(client, container, options = {}) {
       div.setAttribute("aria-label", `${lang} code`);
       div.innerHTML = b.html;
       body.appendChild(div);
+      if (b.open) mb.plainCode = div;
       if (run !== null && run.rest !== null) {
         mb.highlight = run;
         run.rest.then((markup) => {
           if (markup === null || dead) return;
           if (mb.highlight !== run || mb.node !== block) return;
           mb.highlight = void 0;
+          mb.plainCode = void 0;
           body.replaceChild(highlightedPre(lang, markup), div);
         });
       }
@@ -392,6 +559,25 @@ function mountBrookMarkdown(client, container, options = {}) {
     block.appendChild(body);
     return block;
   }
+  function syncIncCode(mb, b) {
+    const ic = mb.codeInc;
+    if ((extractLang(b.html) || "text") !== ic.lang) return false;
+    const markup = incHighlight(mb.inc, codeText(b));
+    if (markup === null) return false;
+    return paintIncCode(ic, mb.inc, markup);
+  }
+  function incPre(lang, mb, st, markup) {
+    const pre = document.createElement("pre");
+    pre.tabIndex = 0;
+    pre.setAttribute("role", "region");
+    pre.setAttribute("aria-label", `${lang} code`);
+    const code = document.createElement("code");
+    const ic = newIncCode(code, lang, st);
+    if (paintIncCode(ic, st, markup)) mb.codeInc = ic;
+    else code.innerHTML = markup;
+    pre.appendChild(code);
+    return pre;
+  }
   function highlightedPre(lang, markup) {
     const pre = document.createElement("pre");
     pre.tabIndex = 0;
@@ -499,6 +685,9 @@ function mountBrookMarkdown(client, container, options = {}) {
           mb.highlight.cancel();
           mb.highlight = void 0;
         }
+        mb.inc = void 0;
+        mb.codeInc = void 0;
+        mb.plainCode = void 0;
       }
       root.remove();
     },
@@ -592,9 +781,12 @@ function decodeCodeText(html) {
   return m[1].replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&quot;/g, '"').replace(/&#39;/g, "'").replace(/&amp;/g, "&");
 }
 const CONTAINER_ATTR_RE = /([a-zA-Z][a-zA-Z0-9-]*)="([^"]*)"/g;
-function applyOpenTagAttrs(el, html) {
+function openTagOf(html) {
   const gt = html.indexOf(">");
-  const open = gt < 0 ? html : html.slice(0, gt);
+  return gt < 0 ? html : html.slice(0, gt);
+}
+function applyOpenTagAttrs(el, html) {
+  const open = openTagOf(html);
   let m;
   CONTAINER_ATTR_RE.lastIndex = 0;
   while (m = CONTAINER_ATTR_RE.exec(open)) {
@@ -653,6 +845,8 @@ function applyUrlTransformDom(root, urlTransform) {
   });
 }
 export {
+  __keyedStats,
+  __resetKeyedStats,
   mountBrookMarkdown,
   tailOpenBlockId
 };

package/dist/hi-defer.d.ts

@@ -1,3 +1,4 @@
+import { type HighlightState } from "./hi.js";
 /**
  * Test-only: shrink the per-slice budget so a suite can force the deferred path
  * deterministically instead of betting on how fast the machine is. Call with no
@@ -27,9 +28,9 @@ export interface DeferredHighlight {
  * renderer can call it from a render pass and only reach for
  * {@link highlightDeferred} when this comes back empty.
  */
-export declare function highlightWithin(code: string, lang: string): string | null;
+export declare function highlightWithin(code: string, lang: string, seed?: HighlightState): string | null;
 /**
  * Highlight `code` without blocking: the first slice runs here, synchronously,
  * and the rest (if any) continues on later tasks. See {@link DeferredHighlight}.
  */
-export declare function highlightDeferred(code: string, lang: string): DeferredHighlight;
+export declare function highlightDeferred(code: string, lang: string, seed?: HighlightState): DeferredHighlight;