brookmd 0.26.0 → 0.26.1

package/CHANGELOG.md

@@ -4,6 +4,47 @@ 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.26.1 — 2026-07-30
+
+Two fixes found by benchmarking 0.26.0 against real chat traffic. Requires
+`brookmd-core` 0.25.1.
+
+### Fixed
+
+- **A GFM table could not interrupt an open paragraph — anywhere.**
+  `scan_paragraph` had no table arm, so `item\n| a | b |\n|---|---|` swallowed
+  the delimiter row as paragraph text. The visible symptom was "tables inside
+  list items don't parse" (an item's de-indented body opens with a paragraph),
+  but the bug was position-independent and hit top level and blockquotes the
+  same way. The fix is an O(2-line) gate — header row with a pipe, delimiter
+  row next, matching cell counts, both rows indented ≤ 3 columns — checked once
+  per line as it arrives, on both the full-reparse and streaming paths, so a
+  scan started at a commit boundary renders byte-identically to a cold one.
+  Verified against GitHub's rendering for every non-pathological shape; the
+  deliberate exception (both rows must be ≤ 3-indented, so two exotic
+  mixed-indent shapes stay paragraphs) is pinned in `tests/nested_tables.rs`.
+  A nested table renders inside the item's `html` and — like nested lists —
+  carries no structured `blockData` of its own.
+
+### Performance
+
+- **Close-time syntax highlighting no longer blocks the main thread.** The
+  built-in highlighter ran as one synchronous task when a block closed —
+  ~110 ms for a large fence on a mid desktop. The tokenizer loop was already
+  resumable at any offset with no carried state, so it now runs in ~5 ms
+  slices (`scheduler.yield()` where available, `MessageChannel` otherwise),
+  with the first slice synchronous so small blocks render highlighted in the
+  same tick with no flash. Output is byte-identical — pinned by a chunked ==
+  one-shot property test across all 20 languages at chunk sizes down to 1,
+  plus a 6,556-case differential fuzz against the previous implementation.
+  Also: the renderers now reuse the parser's already-decoded source
+  (`CodeBlockData.code`) when `blockData` is on instead of re-deriving it from
+  the HTML, and `escapeHtml` no longer concatenates per character. A 49 KB
+  block's longest main-thread task drops from ~38 ms to ≤ 6 ms on the same
+  hardware; `highlight()`'s public signature and bytes are unchanged, SSR
+  stays synchronous, and `components.CodeBlock`/`pre`/`code` overrides are
+  unaffected.
+
 ## 0.26.0 — 2026-07-30
 
 **Rendered HTML bytes change in this release.** Everything new below is opt-in

package/dist/dom.js

@@ -1,4 +1,4 @@
-import { highlight } from "./hi.js";
+import { highlightDeferred } from "./hi-defer.js";
 import { morph } from "./morph.js";
 import { blockProps, extractLang } from "./block-props.js";
 import { decorateSegments } from "./decorate.js";
@@ -115,6 +115,10 @@ function mountBrookMarkdown(client, container, options = {}) {
         continue;
       }
       existing.table = void 0;
+      if (existing.highlight) {
+        existing.highlight.cancel();
+        existing.highlight = void 0;
+      }
       const node = renderBlock(b, existing);
       existing.node.replaceWith(node);
       existing.node = node;
@@ -128,6 +132,7 @@ function mountBrookMarkdown(client, container, options = {}) {
     if (mounted.size > seen.size) {
       for (const [id, mb] of mounted) {
         if (!seen.has(id)) {
+          if (mb.highlight) mb.highlight.cancel();
           mb.node.remove();
           mounted.delete(id);
         }
@@ -184,7 +189,7 @@ function mountBrookMarkdown(client, container, options = {}) {
     }
     switch (kind) {
       case "CodeBlock":
-        if (highlightCode) return renderCodeBlock(b);
+        if (highlightCode) return renderCodeBlock(b, mb);
         break;
       // fall through to the generic path
       case "MathBlock":
@@ -341,10 +346,11 @@ function mountBrookMarkdown(client, container, options = {}) {
     }
     return result;
   }
-  function renderCodeBlock(b) {
+  function renderCodeBlock(b, mb) {
     const lang = extractLang(b.html) || "text";
-    const text = b.open ? "" : decodeCodeText(b.html);
-    const highlighted = text ? highlight(text, lang) : null;
+    const text = b.open ? "" : codeText(b);
+    const run = text ? highlightDeferred(text, lang) : null;
+    const highlighted = run ? run.html : null;
     const block = document.createElement("div");
     block.className = "brook-code-block" + (b.open ? " brook-streaming" : "");
     const header = document.createElement("div");
@@ -364,15 +370,8 @@ function mountBrookMarkdown(client, container, options = {}) {
     block.appendChild(header);
     const body = document.createElement("div");
     body.className = "brook-code-body";
-    if (highlighted) {
-      const pre = document.createElement("pre");
-      pre.tabIndex = 0;
-      pre.setAttribute("role", "region");
-      pre.setAttribute("aria-label", `${lang} code`);
-      const code = document.createElement("code");
-      code.innerHTML = highlighted;
-      pre.appendChild(code);
-      body.appendChild(pre);
+    if (highlighted !== null) {
+      body.appendChild(highlightedPre(lang, highlighted));
     } else {
       const div = document.createElement("div");
       div.tabIndex = 0;
@@ -380,10 +379,29 @@ function mountBrookMarkdown(client, container, options = {}) {
       div.setAttribute("aria-label", `${lang} code`);
       div.innerHTML = b.html;
       body.appendChild(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;
+          body.replaceChild(highlightedPre(lang, markup), div);
+        });
+      }
     }
     block.appendChild(body);
     return block;
   }
+  function highlightedPre(lang, markup) {
+    const pre = document.createElement("pre");
+    pre.tabIndex = 0;
+    pre.setAttribute("role", "region");
+    pre.setAttribute("aria-label", `${lang} code`);
+    const code = document.createElement("code");
+    code.innerHTML = markup;
+    pre.appendChild(code);
+    return pre;
+  }
   function renderMathBlock(b) {
     const block = document.createElement("div");
     block.className = "brook-math-block" + (b.open ? " brook-streaming" : "");
@@ -476,6 +494,12 @@ function mountBrookMarkdown(client, container, options = {}) {
         frame = 0;
       }
       unsubscribe();
+      for (const mb of mounted.values()) {
+        if (mb.highlight) {
+          mb.highlight.cancel();
+          mb.highlight = void 0;
+        }
+      }
       root.remove();
     },
     refresh() {
@@ -558,6 +582,10 @@ function tailOpenBlockId(snapshot) {
   const tail = snapshot.length > 0 ? snapshot[snapshot.length - 1] : void 0;
   return tail && tail.open ? tail.id : null;
 }
+function codeText(b) {
+  const data = b.kind.data;
+  return typeof data?.code === "string" ? data.code : decodeCodeText(b.html);
+}
 function decodeCodeText(html) {
   const m = html.match(/<pre><code[^>]*>([\s\S]*?)<\/code><\/pre>/);
   if (!m) return "";

package/dist/hi-defer.d.ts

@@ -0,0 +1,35 @@
+/**
+ * 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
+ * argument to restore the default. Not part of the public API.
+ */
+export declare function __setSliceMs(ms?: number): void;
+export interface DeferredHighlight {
+    /**
+     * The finished markup when the whole block tokenized inside the first
+     * (synchronous) slice — the common case. Apply it in this same tick: no
+     * swap, no second paint, no flash.
+     */
+    html: string | null;
+    /**
+     * Resolves with the finished markup once the remaining slices have run, or
+     * with `null` if the run was {@link DeferredHighlight.cancel}led. `null` (the
+     * property, not the resolution) when `html` already holds the answer. Never
+     * rejects.
+     */
+    rest: Promise<string | null> | null;
+    /** Abandon the remaining slices — the block was superseded or unmounted. */
+    cancel(): void;
+}
+/**
+ * Tokenize `code` for at most one slice and return the finished markup, or
+ * `null` when it did not fit. Pure and synchronous — it schedules nothing, so a
+ * 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;
+/**
+ * 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;

package/dist/hi-defer.js

@@ -0,0 +1,90 @@
+import { stepHighlight } from "./hi.js";
+const SLICE_MS = 5;
+const CHUNK = 1024;
+const now = () => typeof performance !== "undefined" ? performance.now() : Date.now();
+let sliceMs = SLICE_MS;
+function __setSliceMs(ms) {
+  sliceMs = ms === void 0 ? SLICE_MS : ms;
+}
+const noop = () => {
+};
+function highlightWithin(code, lang) {
+  const state = { pos: 0, out: "" };
+  return runSlice(code, lang, state) ? state.out : null;
+}
+function highlightDeferred(code, lang) {
+  const state = { pos: 0, out: "" };
+  if (runSlice(code, lang, state)) {
+    return { html: state.out, rest: null, cancel: noop };
+  }
+  let cancelled = false;
+  let channel = null;
+  let pending = null;
+  function closeChannel() {
+    if (channel !== null) {
+      channel.port1.close();
+      channel.port2.close();
+      channel = null;
+    }
+    pending = null;
+  }
+  function post() {
+    return new Promise((resolve) => {
+      if (typeof MessageChannel !== "function") {
+        setTimeout(resolve, 0);
+        return;
+      }
+      if (channel === null) {
+        channel = new MessageChannel();
+        channel.port1.onmessage = () => {
+          const next = pending;
+          pending = null;
+          if (next) next();
+        };
+      }
+      pending = resolve;
+      channel.port2.postMessage(0);
+    });
+  }
+  function nextTask() {
+    const scheduler = globalThis.scheduler;
+    if (scheduler && typeof scheduler.yield === "function") {
+      try {
+        const p = scheduler.yield();
+        if (p && typeof p.then === "function") return p.then(void 0, post);
+      } catch {
+      }
+    }
+    return post();
+  }
+  const rest = (async () => {
+    try {
+      for (; ; ) {
+        await nextTask();
+        if (cancelled) return null;
+        if (runSlice(code, lang, state)) return state.out;
+      }
+    } finally {
+      closeChannel();
+    }
+  })();
+  return {
+    html: null,
+    rest,
+    cancel() {
+      cancelled = true;
+    }
+  };
+}
+function runSlice(code, lang, state) {
+  const started = now();
+  for (; ; ) {
+    if (stepHighlight(code, lang, state, CHUNK)) return true;
+    if (now() - started >= sliceMs) return false;
+  }
+}
+export {
+  __setSliceMs,
+  highlightDeferred,
+  highlightWithin
+};

package/dist/hi.d.ts

@@ -8,5 +8,30 @@
  * highlight an open (streaming) block, which avoids re-highlighting the same
  * code on every chunk — the main perf win for streaming code.
  */
+/**
+ * The resumable tokenizer's cursor: `pos` is the next source index to consume,
+ * `out` the markup emitted so far. Start a run at `{ pos: 0, out: "" }`.
+ */
+export interface HighlightState {
+    pos: number;
+    out: string;
+}
+/**
+ * One resumable slice of {@link highlight}. Consumes WHOLE tokens from
+ * `state.pos` until at least `chars` source characters have been taken (or the
+ * input ends), appending to `state.out`; returns true once the input is fully
+ * consumed.
+ *
+ * The pass carries NO state between tokens beyond `pos` — every pattern is
+ * sticky and matched against the immutable `code` — so stopping and resuming is
+ * invisible: for ANY sequence of chunk sizes the final `state.out` is
+ * byte-identical to `highlight(code, lang)` (test/hi-chunked.test.ts proves it
+ * over the language corpus, down to one token per slice). That is what lets a
+ * renderer spread a big block's highlight across several tasks without changing
+ * a byte of markup.
+ *
+ * @internal Not part of the semver surface — use {@link highlight}.
+ */
+export declare function stepHighlight(code: string, lang: string, state: HighlightState, chars: number): boolean;
 export declare function highlight(code: string, lang: string): string;
 export declare function supportedLangs(): string[];

package/dist/hi.js

@@ -147,26 +147,42 @@ const LANGS = {
   css: { pats: cssPats }
 };
 function escapeHtml(s) {
-  let out = "";
-  for (let i = 0; i < s.length; i++) {
-    const c = s[i];
-    if (c === "<") out += "&lt;";
-    else if (c === ">") out += "&gt;";
-    else if (c === "&") out += "&amp;";
-    else if (c === '"') out += "&quot;";
-    else out += c;
+  const n = s.length;
+  let i = 0;
+  for (; i < n; i++) {
+    const c = s.charCodeAt(i);
+    if (c === 60 || c === 62 || c === 38 || c === 34) break;
   }
-  return out;
+  if (i === n) return s;
+  let out = s.slice(0, i);
+  let last = i;
+  for (; i < n; i++) {
+    const c = s.charCodeAt(i);
+    let esc;
+    if (c === 60) esc = "&lt;";
+    else if (c === 62) esc = "&gt;";
+    else if (c === 38) esc = "&amp;";
+    else if (c === 34) esc = "&quot;";
+    else continue;
+    out += s.slice(last, i) + esc;
+    last = i + 1;
+  }
+  return out + s.slice(last);
 }
-function highlight(code, lang) {
-  if (code.length > 5e4) return escapeHtml(code);
-  const conf = LANGS[lang.toLowerCase()];
-  if (!conf) return escapeHtml(code);
-  let out = "";
-  let pos = 0;
+function stepHighlight(code, lang, state, chars) {
+  const conf = code.length > 5e4 ? void 0 : LANGS[lang.toLowerCase()];
+  const stop = state.pos + (chars > 0 ? chars : 1);
+  if (!conf) {
+    const end = stop < code.length ? stop : code.length;
+    state.out += escapeHtml(code.slice(state.pos, end));
+    state.pos = end;
+    return state.pos >= code.length;
+  }
+  let out = state.out;
+  let pos = state.pos;
   const pats = conf.pats;
   const kw = conf.kw;
-  while (pos < code.length) {
+  while (pos < code.length && pos < stop) {
     let matched = false;
     for (let i = 0; i < pats.length; i++) {
       const [cls, re] = pats[i];
@@ -204,12 +220,21 @@ function highlight(code, lang) {
       pos += 1;
     }
   }
-  return out;
+  state.out = out;
+  state.pos = pos;
+  return pos >= code.length;
+}
+function highlight(code, lang) {
+  const state = { pos: 0, out: "" };
+  while (!stepHighlight(code, lang, state, code.length)) {
+  }
+  return state.out;
 }
 function supportedLangs() {
   return Object.keys(LANGS);
 }
 export {
   highlight,
+  stepHighlight,
   supportedLangs
 };

package/dist/react.js

@@ -508,7 +508,17 @@ function renderBlockContent({
   switch (kind) {
     case "CodeBlock": {
       const wantsCodeOverride = !!components && (!!components.pre || !!components.code);
-      if (!wantsCodeOverride) return /* @__PURE__ */ jsx(CodeBlock, { html: block.html, open: block.open });
+      if (!wantsCodeOverride) {
+        const source = block.kind.data?.code;
+        return /* @__PURE__ */ jsx(
+          CodeBlock,
+          {
+            html: block.html,
+            open: block.open,
+            code: typeof source === "string" ? source : void 0
+          }
+        );
+      }
       break;
     }
     case "MathBlock":

package/dist/renderers/CodeBlock.d.ts

@@ -1,7 +1,14 @@
 interface Props {
     html: string;
     open: boolean;
+    /**
+     * The block's DECODED source, carried by `kind.data.code` when `blockData` is
+     * on. Identical to `decodeText(html)` — supplying it skips that whole-body
+     * regex + five entity passes, which on a big fence is the same order of work
+     * as the highlight itself. Absent (blockData off) the HTML is decoded here.
+     */
+    code?: string;
 }
-declare function CodeBlockImpl({ html, open }: Props): import("react/jsx-runtime").JSX.Element;
+declare function CodeBlockImpl({ html, open, code }: Props): import("react/jsx-runtime").JSX.Element;
 export declare const CodeBlock: import("react").MemoExoticComponent<typeof CodeBlockImpl>;
 export {};

package/dist/renderers/CodeBlock.js

@@ -1,19 +1,44 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { highlight } from "../hi.js";
+import { highlightDeferred, highlightWithin } from "../hi-defer.js";
 import { extractLang } from "../block-props.js";
 function decodeText(html) {
   const m = html.match(/<pre><code[^>]*>([\s\S]*?)<\/code><\/pre>/);
   if (!m) return "";
   return m[1].replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&quot;/g, '"').replace(/&#39;/g, "'").replace(/&amp;/g, "&");
 }
-function CodeBlockImpl({ html, open }) {
+function CodeBlockImpl({ html, open, code }) {
   const lang = extractLang(html) || "text";
-  const text = useMemo(() => open ? "" : decodeText(html), [html, open]);
-  const highlighted = useMemo(() => {
+  const text = useMemo(() => open ? "" : code ?? decodeText(html), [html, open, code]);
+  const sync = useMemo(() => {
     if (!text) return null;
-    return highlight(text, lang);
+    return typeof window === "undefined" ? highlight(text, lang) : highlightWithin(text, lang);
   }, [text, lang]);
+  const [slow, setSlow] = useState(null);
+  useEffect(() => {
+    if (!text || sync !== null) {
+      setSlow((prev) => prev === null ? prev : null);
+      return;
+    }
+    const run = highlightDeferred(text, lang);
+    if (run.html !== null) {
+      setSlow({ text, lang, html: run.html });
+      return;
+    }
+    let live = true;
+    const rest = run.rest;
+    if (rest) {
+      rest.then((out) => {
+        if (live && out !== null) setSlow({ text, lang, html: out });
+      });
+    }
+    return () => {
+      live = false;
+      run.cancel();
+    };
+  }, [text, lang, sync]);
+  const highlighted = sync ?? (slow !== null && slow.text === text && slow.lang === lang ? slow.html : null);
   const [copied, setCopied] = useState(false);
   const timerRef = useRef(null);
   useEffect(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "brookmd",
-  "version": "0.26.0",
+  "version": "0.26.1",
   "description": "Zero-dep streaming markdown for the browser. Rust→WASM core, Web Worker per stream, incremental parse with speculative closure.",
   "type": "module",
   "sideEffects": ["./dist/worker.js", "./dist/styles.css"],