brookmd 0.25.2 → 0.26.1

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/element.js

@@ -9,18 +9,25 @@ function parseTriBool(value) {
 const CONFIG_ATTRS = [
   "gfm-autolinks",
   "gfm-alerts",
+  // Must mirror the `set(...)` map below: this list feeds `observedAttributes`,
+  // so an attribute missing here is read once at mount and then never reacts to
+  // a change. `gfm-tagfilter` was in the map but not in this list.
+  "gfm-tagfilter",
   "gfm-footnotes",
   "gfm-math",
   "dir-auto",
+  "lenient-lists",
+  "soft-breaks",
   "a11y",
-  "unsafe-html"
+  "unsafe-html",
+  "block-html"
 ];
 function defineBrookMarkdown(tag = "brook-markdown") {
   if (typeof customElements === "undefined") return;
   if (customElements.get(tag)) return;
   class BrookMarkdownElement extends HTMLElement {
     static get observedAttributes() {
-      return ["markdown", "src", "component-tags", ...CONFIG_ATTRS];
+      return ["markdown", "src", "component-tags", "allow-schemes", ...CONFIG_ATTRS];
     }
     #client = null;
     #ownsClient = false;
@@ -150,8 +157,11 @@ function defineBrookMarkdown(tag = "brook-markdown") {
       set("gfm-footnotes", "gfmFootnotes");
       set("gfm-math", "gfmMath");
       set("dir-auto", "dirAuto");
+      set("lenient-lists", "lenientLists");
+      set("soft-breaks", "softBreaks");
       set("a11y", "a11y");
       set("unsafe-html", "unsafeHtml");
+      set("block-html", "blockHtml");
       const tags = this.getAttribute("component-tags");
       if (tags !== null) {
         const list = tags.split(/[\s,]+/).filter(Boolean);
@@ -160,6 +170,14 @@ function defineBrookMarkdown(tag = "brook-markdown") {
           any = true;
         }
       }
+      const schemes = this.getAttribute("allow-schemes");
+      if (schemes !== null) {
+        const list = schemes.split(/[\s,]+/).filter(Boolean);
+        if (list.length > 0) {
+          cfg.allowSchemes = list;
+          any = true;
+        }
+      }
       return any ? cfg : void 0;
     }
     // Lazily create the internal client from config attributes (self-owned).

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

@@ -218,8 +218,9 @@ function blockKindProps(block, components) {
   if (block.kind.type === "CodeBlock") {
     props.text = data?.code ?? decodeCodeText(block.html);
     props.language = data?.lang ?? "";
+    if (typeof data?.meta === "string") props.meta = data.meta;
     if (typeof data?.code === "string") {
-      props.code = { lang: data.lang ?? null, code: data.code };
+      props.code = { lang: data.lang ?? null, meta: data.meta, code: data.code };
     }
   } else if (block.kind.type === "MathBlock") {
     props.text = data?.latex ?? decodeMathText(block.html);
@@ -507,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/dist/server.d.ts

@@ -21,10 +21,21 @@ export declare function parseToBlocks(markdown: string, opts?: {
 }): Block[];
 /**
  * Render a complete markdown string to an HTML string synchronously — no worker,
- * no React. The concatenated per-block HTML (XSS-safe with `unsafeHtml` off).
- * For component dispatch / a `<BrookMarkdown>`-matching React tree, use
- * `BrookMarkdownStatic` from `brookmd/server/react` with your framework's server
- * renderer instead.
+ * no React. The per-block HTML joined into one document (XSS-safe with
+ * `unsafeHtml` off). For component dispatch / a `<BrookMarkdown>`-matching React
+ * tree, use `BrookMarkdownStatic` from `brookmd/server/react` with your
+ * framework's server renderer instead.
+ *
+ * **Document assembly** (WIRE.md §12): a block's `html` never ends with a
+ * newline — that terminator belongs to the document, not the block — so joining
+ * blocks inserts one `\n` between them, `cr()`-style: only when the previous
+ * block does not ALREADY end with one. A raw HTML block serializes its own
+ * trailing newline, so an unconditional join would double it. The document ends
+ * with a final newline. This is exactly what a reference CommonMark/GFM renderer
+ * emits, and what the spec harnesses measure byte-for-byte against.
+ *
+ * If you assemble `Block.html` yourself (rather than calling this), use the same
+ * rule.
  */
 export declare function renderToString(markdown: string, opts?: {
     config?: ParserConfig;

package/dist/server.js

@@ -40,6 +40,8 @@ function makeParser(config) {
   p.setGfmFootnotes(config?.gfmFootnotes ?? false);
   p.setGfmMath(config?.gfmMath ?? false);
   p.setDirAuto(config?.dirAuto ?? false);
+  p.setLenientLists(config?.lenientLists ?? false);
+  p.setSoftBreaks(config?.softBreaks ?? false);
   p.setA11y(config?.a11y ?? false);
   p.setUnsafeHtml(config?.unsafeHtml ?? false);
   p.setComponentTags(config?.componentTags ?? []);
@@ -49,6 +51,8 @@ function makeParser(config) {
     config?.htmlAllowlist ?? [],
     config?.dropHtmlTags ?? []
   );
+  p.setBlockHtml(config?.blockHtml ?? false);
+  p.setAllowSchemes(config?.allowSchemes ?? []);
   p.setBlockData(config?.blockData ?? false);
   return p;
 }
@@ -71,7 +75,13 @@ function parseToBlocks(markdown, opts) {
   }
 }
 function renderToString(markdown, opts) {
-  return parseToBlocks(markdown, opts).map((b) => b.html).join("");
+  let out = "";
+  for (const b of parseToBlocks(markdown, opts)) {
+    if (out.length > 0 && !out.endsWith("\n")) out += "\n";
+    out += b.html;
+  }
+  if (out.length > 0 && !out.endsWith("\n")) out += "\n";
+  return out;
 }
 export {
   initBrook,