brookmd 0.22.0

package/dist/element.js

@@ -0,0 +1,288 @@
+import { BrookClient } from "./client.js";
+import { mountBrookMarkdown } from "./dom.js";
+function parseTriBool(value) {
+  if (value === null) return void 0;
+  if (value === "" || value === "true" || value === "1") return true;
+  if (value === "false" || value === "0") return false;
+  return void 0;
+}
+const CONFIG_ATTRS = [
+  "gfm-autolinks",
+  "gfm-alerts",
+  "gfm-footnotes",
+  "gfm-math",
+  "dir-auto",
+  "a11y",
+  "unsafe-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];
+    }
+    #client = null;
+    #ownsClient = false;
+    #components = void 0;
+    #sanitize = void 0;
+    #handle = null;
+    #connected = false;
+    // In-flight `src` fetch supersession. A self-owned client is REUSED across
+    // src changes (not torn down), so two concurrent #streamFromSrc runs would
+    // capture the same client and reset() even reuses the worker streamId — an
+    // identity guard alone can't separate them. Each run captures the current
+    // #srcSeq; a newer src (or teardown) bumps it and aborts the fetch, so a
+    // stale run bails before interleaving its chunks into the parser.
+    #srcSeq = 0;
+    #srcAbort = null;
+    // --- Accessor properties (objects/functions can't be attributes) ---------
+    get client() {
+      return this.#client;
+    }
+    set client(value) {
+      if (value === this.#client) return;
+      this.#teardownClient();
+      this.#client = value;
+      this.#ownsClient = false;
+      if (this.#connected) this.#remount();
+    }
+    get components() {
+      return this.#components;
+    }
+    set components(value) {
+      if (value === this.#components) return;
+      this.#components = value;
+      if (this.#connected) this.#remount();
+    }
+    get sanitize() {
+      return this.#sanitize;
+    }
+    set sanitize(value) {
+      if (value === this.#sanitize) return;
+      this.#sanitize = value;
+      if (this.#connected) this.#remount();
+    }
+    // --- Self-owned-client methods -------------------------------------------
+    append(chunk) {
+      this.#cancelSrcStream();
+      this.#ensureClient();
+      this.#client.append(chunk);
+    }
+    finalize() {
+      this.#cancelSrcStream();
+      this.#client?.finalize();
+    }
+    reset() {
+      this.#cancelSrcStream();
+      this.#client?.reset();
+    }
+    getClient() {
+      return this.#client;
+    }
+    // --- Lifecycle -----------------------------------------------------------
+    connectedCallback() {
+      if (this.#connected) return;
+      this.#connected = true;
+      this.#upgradeProperty("client");
+      this.#upgradeProperty("components");
+      this.#upgradeProperty("sanitize");
+      this.#mountIfReady();
+      if (!this.#client || this.#ownsClient) {
+        this.#resolveInitialContent();
+      }
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+      if (!this.#connected) return;
+      if (oldValue === newValue) return;
+      if (name === "markdown" || name === "src") {
+        if (!this.#client || this.#ownsClient) {
+          this.#resolveInitialContent();
+        }
+        return;
+      }
+      if (this.#client && !this.#ownsClient) {
+        console.warn(
+          "<brook-markdown>: config attributes are ignored while a caller-owned `client` is set (ParserConfig is immutable per stream)."
+        );
+        return;
+      }
+      if (this.#ownsClient) {
+        this.#teardownClient();
+        this.#mountIfReady();
+        this.#resolveInitialContent();
+      }
+    }
+    disconnectedCallback() {
+      this.#connected = false;
+      this.#cancelSrcStream();
+      this.#handle?.destroy();
+      this.#handle = null;
+      if (this.#ownsClient) {
+        this.#client?.destroy();
+        this.#client = null;
+        this.#ownsClient = false;
+      }
+    }
+    // --- Internals -----------------------------------------------------------
+    #upgradeProperty(prop) {
+      if (Object.prototype.hasOwnProperty.call(this, prop)) {
+        const value = this[prop];
+        delete this[prop];
+        this[prop] = value;
+      }
+    }
+    // Build a ParserConfig from the current config attributes. Read ONCE, at
+    // client creation — config is immutable per stream.
+    #readConfig() {
+      const cfg = {};
+      let any = false;
+      const set = (attr, key) => {
+        const v = parseTriBool(this.getAttribute(attr));
+        if (v !== void 0) {
+          cfg[key] = v;
+          any = true;
+        }
+      };
+      set("gfm-autolinks", "gfmAutolinks");
+      set("gfm-alerts", "gfmAlerts");
+      set("gfm-tagfilter", "gfmTagfilter");
+      set("gfm-footnotes", "gfmFootnotes");
+      set("gfm-math", "gfmMath");
+      set("dir-auto", "dirAuto");
+      set("a11y", "a11y");
+      set("unsafe-html", "unsafeHtml");
+      const tags = this.getAttribute("component-tags");
+      if (tags !== null) {
+        const list = tags.split(/[\s,]+/).filter(Boolean);
+        if (list.length > 0) {
+          cfg.componentTags = list;
+          any = true;
+        }
+      }
+      return any ? cfg : void 0;
+    }
+    // Lazily create the internal client from config attributes (self-owned).
+    #ensureClient() {
+      if (this.#client) return;
+      this.#client = new BrookClient({ config: this.#readConfig() });
+      this.#ownsClient = true;
+      this.#mountIfReady();
+    }
+    // Mount once a client exists and we're connected. Idempotent.
+    #mountIfReady() {
+      if (!this.#connected || !this.#client || this.#handle) return;
+      this.#handle = mountBrookMarkdown(this.#client, this, {
+        components: this.#components,
+        sanitize: this.#sanitize
+      });
+    }
+    // Destroy the current mount and remount against the current client+options.
+    // Used when a property changes while connected.
+    #remount() {
+      this.#handle?.destroy();
+      this.#handle = null;
+      this.#mountIfReady();
+    }
+    // Tear down only the client side (mount stays / is handled by the caller).
+    // Destroys the client only if self-owned, then clears it and the mount so
+    // the next mount targets a fresh client.
+    #teardownClient() {
+      this.#cancelSrcStream();
+      this.#handle?.destroy();
+      this.#handle = null;
+      if (this.#ownsClient) this.#client?.destroy();
+      this.#client = null;
+      this.#ownsClient = false;
+    }
+    // Resolve the initial content of a self-owned stream from the attributes,
+    // in priority order: `src` (fetch+stream) > `markdown` (one-shot) >
+    // textContent (one-shot). A caller-owned client never reaches here.
+    #resolveInitialContent() {
+      this.#cancelSrcStream();
+      const src = this.getAttribute("src");
+      if (src) {
+        void this.#streamFromSrc(src);
+        return;
+      }
+      const markdown = this.getAttribute("markdown");
+      if (markdown !== null) {
+        this.#oneShot(markdown);
+        return;
+      }
+      const text = this.#captureSourceText();
+      if (text.trim().length > 0) this.#oneShot(text);
+    }
+    // Read the raw markdown the host put between the tags, ignoring the
+    // renderer's `.brook-md` root (and any other element children).
+    #captureSourceText() {
+      let text = "";
+      for (const node of Array.from(this.childNodes)) {
+        if (node.nodeType === 3) {
+          text += node.textContent ?? "";
+          node.parentNode?.removeChild(node);
+        }
+      }
+      return text;
+    }
+    // One-shot: reset the stream (in case content changed), feed it, finalize.
+    #oneShot(markdown) {
+      this.#ensureClient();
+      this.#client.reset();
+      this.#client.append(markdown);
+      this.#client.finalize();
+    }
+    // Abort any in-flight `src` fetch and invalidate its read loop, so it can
+    // no longer append into a client we're about to reuse, swap, or destroy.
+    #cancelSrcStream() {
+      this.#srcSeq++;
+      this.#srcAbort?.abort();
+      this.#srcAbort = null;
+    }
+    // Fetch a URL and stream its body. TextDecoder with {stream:true} carries a
+    // multibyte sequence that straddles a chunk boundary into the next decode.
+    async #streamFromSrc(src) {
+      this.#cancelSrcStream();
+      const token = this.#srcSeq;
+      const abort = new AbortController();
+      this.#srcAbort = abort;
+      this.#ensureClient();
+      this.#client.reset();
+      const owned = this.#client;
+      const current = () => this.#srcSeq === token && this.#client === owned;
+      try {
+        const res = await fetch(src, { signal: abort.signal });
+        if (!current()) return;
+        const body = res.body;
+        if (!body) {
+          const text = await res.text();
+          if (!current()) return;
+          owned.append(text);
+          owned.finalize();
+          return;
+        }
+        const reader = body.getReader();
+        const decoder = new TextDecoder();
+        for (; ; ) {
+          const { done, value } = await reader.read();
+          if (!current()) return;
+          if (done) break;
+          if (value) owned.append(decoder.decode(value, { stream: true }));
+        }
+        owned.append(decoder.decode());
+        owned.finalize();
+      } catch (err) {
+        if (abort.signal.aborted || !current()) return;
+        console.error(
+          "<brook-markdown>: failed to stream src",
+          err instanceof Error ? err.message : String(err)
+        );
+      }
+    }
+  }
+  customElements.define(tag, BrookMarkdownElement);
+}
+export {
+  defineBrookMarkdown,
+  parseTriBool
+};

package/dist/hi.d.ts

@@ -0,0 +1,12 @@
+/**
+ * In-house syntax highlighter. Native RegExp only — no Shiki, no Prism, no
+ * Highlight.js. Covers the languages an LLM typically emits:
+ * js/ts/tsx/jsx, rust, python, go, bash, json, html, css, sql. Unknown
+ * languages fall through to plain escaped text. ~6KB minified.
+ *
+ * Highlighting is per-block, runs once when the block closes. We never
+ * highlight an open (streaming) block, which avoids re-highlighting the same
+ * code on every chunk — the main perf win for streaming code.
+ */
+export declare function highlight(code: string, lang: string): string;
+export declare function supportedLangs(): string[];

package/dist/hi.js

@@ -0,0 +1,215 @@
+const KEYWORDS_JS = new Set(
+  "async await break case catch class const continue debugger default delete do else export extends false finally for from function if import in instanceof let new null of return static super switch this throw true try typeof undefined var void while with yield".split(
+    " "
+  )
+);
+const KEYWORDS_TS = /* @__PURE__ */ new Set([
+  ...KEYWORDS_JS,
+  ...["any", "as", "boolean", "declare", "enum", "interface", "is", "keyof", "module", "namespace", "never", "number", "private", "protected", "public", "readonly", "string", "type", "unknown", "satisfies"]
+]);
+const KEYWORDS_RUST = new Set(
+  "as async await break const continue crate dyn else enum extern false fn for if impl in let loop match mod move mut pub ref return Self self static struct super trait true type unsafe use where while".split(
+    " "
+  )
+);
+const KEYWORDS_PY = new Set(
+  "False None True and as assert async await break class continue def del elif else except finally for from global if import in is lambda nonlocal not or pass raise return try while with yield".split(
+    " "
+  )
+);
+const KEYWORDS_GO = new Set(
+  "break case chan const continue default defer else fallthrough for func go goto if import interface map package range return select struct switch type var nil true false".split(
+    " "
+  )
+);
+const KEYWORDS_BASH = new Set(
+  "if then elif else fi case esac for select while until do done function in time coproc return break continue".split(
+    " "
+  )
+);
+const KEYWORDS_SQL = new Set(
+  "SELECT FROM WHERE JOIN LEFT RIGHT INNER OUTER ON GROUP BY ORDER HAVING LIMIT OFFSET INSERT INTO VALUES UPDATE SET DELETE CREATE TABLE DROP ALTER INDEX VIEW IF EXISTS NOT NULL DEFAULT PRIMARY KEY FOREIGN REFERENCES UNIQUE AS WITH UNION ALL DISTINCT IS BETWEEN LIKE IN AND OR".split(
+    " "
+  )
+);
+const jsPats = [
+  ["com", /\/\/[^\n]*/y],
+  ["com", /\/\*[\s\S]*?\*\//y],
+  ["str", /"(?:\\.|[^"\\\n])*"/y],
+  ["str", /'(?:\\.|[^'\\\n])*'/y],
+  ["str", /`(?:\\.|[^`\\])*`/y],
+  ["rx", /\/(?![*/])(?:\\.|[^/\\\n])+\/[gimsuy]*/y],
+  ["num", /\b(?:0x[\da-fA-F_]+|0b[01_]+|0o[0-7_]+|\d[\d_]*(?:\.\d[\d_]*)?(?:[eE][+-]?\d+)?)\b/y],
+  ["ident", /[A-Za-z_$][\w$]*/y],
+  ["pun", /[+\-*/=<>!&|^~?:;,.[\](){}]/y],
+  ["ws", /\s+/y]
+];
+const rustPats = [
+  ["com", /\/\/[^\n]*/y],
+  ["com", /\/\*[\s\S]*?\*\//y],
+  ["str", /b?"(?:\\.|[^"\\])*"/y],
+  ["str", /b?'(?:\\.|[^'\\])'/y],
+  ["lt", /'[a-zA-Z_][\w]*/y],
+  ["num", /\b\d[\d_]*(?:\.\d[\d_]*)?(?:[ui](?:8|16|32|64|128|size)|f(?:32|64))?\b/y],
+  ["mac", /[A-Za-z_]\w*!/y],
+  ["attr", /#!?\[[^\]]*\]/y],
+  ["ident", /[A-Za-z_]\w*/y],
+  ["pun", /[+\-*/=<>!&|^~?:;,.\[\](){}@]/y],
+  ["ws", /\s+/y]
+];
+const pyPats = [
+  ["com", /#[^\n]*/y],
+  ["str", /[fFrRbB]{0,2}"""[\s\S]*?"""/y],
+  ["str", /[fFrRbB]{0,2}'''[\s\S]*?'''/y],
+  ["str", /[fFrRbB]{0,2}"(?:\\.|[^"\\\n])*"/y],
+  ["str", /[fFrRbB]{0,2}'(?:\\.|[^'\\\n])*'/y],
+  ["num", /\b(?:0x[\da-fA-F_]+|0b[01_]+|0o[0-7_]+|\d[\d_]*(?:\.\d[\d_]*)?(?:[eE][+-]?\d+)?[jJ]?)\b/y],
+  ["dec", /@[A-Za-z_]\w*(?:\.[A-Za-z_]\w*)*/y],
+  ["ident", /[A-Za-z_]\w*/y],
+  ["pun", /[+\-*/=<>!&|^~?:;,.[\](){}@%]/y],
+  ["ws", /\s+/y]
+];
+const goPats = [
+  ["com", /\/\/[^\n]*/y],
+  ["com", /\/\*[\s\S]*?\*\//y],
+  ["str", /"(?:\\.|[^"\\\n])*"/y],
+  ["str", /`[^`]*`/y],
+  ["str", /'(?:\\.|[^'\\\n])'/y],
+  ["num", /\b\d[\d_]*(?:\.\d[\d_]*)?\b/y],
+  ["ident", /[A-Za-z_]\w*/y],
+  ["pun", /[+\-*/=<>!&|^~?:;,.[\](){}]/y],
+  ["ws", /\s+/y]
+];
+const bashPats = [
+  ["com", /#[^\n]*/y],
+  ["str", /"(?:\\.|[^"\\])*"/y],
+  ["str", /'[^']*'/y],
+  ["var", /\$\{[^}]+\}|\$\w+|\$[*@#?!$0-9]/y],
+  ["num", /\b\d+\b/y],
+  ["ident", /[A-Za-z_][\w-]*/y],
+  ["pun", /[|&;<>(){}[\]=]/y],
+  ["ws", /\s+/y]
+];
+const jsonPats = [
+  ["str", /"(?:\\.|[^"\\\n])*"/y],
+  ["num", /-?\b\d+(?:\.\d+)?(?:[eE][+-]?\d+)?\b/y],
+  ["kw", /\b(?:true|false|null)\b/y],
+  ["pun", /[{}[\]:,]/y],
+  ["ws", /\s+/y]
+];
+const sqlPats = [
+  ["com", /--[^\n]*/y],
+  ["com", /\/\*[\s\S]*?\*\//y],
+  ["str", /'(?:''|[^'])*'/y],
+  ["str", /"(?:""|[^"])*"/y],
+  ["num", /\b\d+(?:\.\d+)?\b/y],
+  ["ident", /[A-Za-z_][\w]*/y],
+  ["pun", /[+\-*/=<>!,;.(){}]/y],
+  ["ws", /\s+/y]
+];
+const htmlPats = [
+  ["com", /<!--[\s\S]*?-->/y],
+  ["tag", /<\/?[A-Za-z][\w-]*/y],
+  ["str", /"[^"]*"/y],
+  ["str", /'[^']*'/y],
+  ["attr", /[A-Za-z][\w-]*(?==)/y],
+  ["pun", /[=/>]/y],
+  ["txt", /[^<>"'=]+/y]
+];
+const cssPats = [
+  ["com", /\/\*[\s\S]*?\*\//y],
+  ["str", /"[^"]*"/y],
+  ["str", /'[^']*'/y],
+  ["num", /-?\d+(?:\.\d+)?(?:px|em|rem|%|vh|vw|s|ms|deg)?/y],
+  ["sel", /[#.]?[A-Za-z][\w-]*/y],
+  ["pun", /[:;,{}()]/y],
+  ["ws", /\s+/y]
+];
+const LANGS = {
+  js: { pats: jsPats, kw: KEYWORDS_JS },
+  javascript: { pats: jsPats, kw: KEYWORDS_JS },
+  ts: { pats: jsPats, kw: KEYWORDS_TS },
+  tsx: { pats: jsPats, kw: KEYWORDS_TS },
+  jsx: { pats: jsPats, kw: KEYWORDS_JS },
+  typescript: { pats: jsPats, kw: KEYWORDS_TS },
+  rust: { pats: rustPats, kw: KEYWORDS_RUST },
+  rs: { pats: rustPats, kw: KEYWORDS_RUST },
+  py: { pats: pyPats, kw: KEYWORDS_PY },
+  python: { pats: pyPats, kw: KEYWORDS_PY },
+  go: { pats: goPats, kw: KEYWORDS_GO },
+  bash: { pats: bashPats, kw: KEYWORDS_BASH },
+  sh: { pats: bashPats, kw: KEYWORDS_BASH },
+  shell: { pats: bashPats, kw: KEYWORDS_BASH },
+  json: { pats: jsonPats },
+  sql: { pats: sqlPats, kw: KEYWORDS_SQL },
+  html: { pats: htmlPats },
+  xml: { pats: htmlPats },
+  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;
+  }
+  return out;
+}
+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;
+  const pats = conf.pats;
+  const kw = conf.kw;
+  while (pos < code.length) {
+    let matched = false;
+    for (let i = 0; i < pats.length; i++) {
+      const [cls, re] = pats[i];
+      re.lastIndex = pos;
+      const m = re.exec(code);
+      if (!m || m.index !== pos) continue;
+      const text = m[0];
+      const after = pos + text.length;
+      let finalCls = cls;
+      if (cls === "ident") {
+        if (kw && kw.has(text)) {
+          finalCls = "kw";
+        } else if (after < code.length && code[after] === "(") {
+          finalCls = "fn";
+        } else if (text.length > 1 && text[0] >= "A" && text[0] <= "Z") {
+          finalCls = "ty";
+        } else {
+          out += escapeHtml(text);
+          pos = after;
+          matched = true;
+          break;
+        }
+      }
+      if (cls === "ws") {
+        out += text;
+      } else {
+        out += `<span class="t-${finalCls}">${escapeHtml(text)}</span>`;
+      }
+      pos = after;
+      matched = true;
+      break;
+    }
+    if (!matched) {
+      out += escapeHtml(code[pos]);
+      pos += 1;
+    }
+  }
+  return out;
+}
+function supportedLangs() {
+  return Object.keys(LANGS);
+}
+export {
+  highlight,
+  supportedLangs
+};

package/dist/html-to-react.d.ts

@@ -0,0 +1,61 @@
+import { type ReactElement, type ReactNode } from "react";
+import type { Components } from "./types.js";
+import type { Decorator, UrlTransform } from "./types-core.js";
+import { decodeEntities, safeUrl } from "./url-safety.js";
+export { decodeEntities, safeUrl };
+type HNode = {
+    kind: "text";
+    text: string;
+} | {
+    kind: "el";
+    tag: string;
+    attrs: Record<string, string | true>;
+    children: HNode[];
+};
+/**
+ * Parse an inline CSS string (`"text-align:left;color:red"`) into the object
+ * React's `style` prop requires, camelCasing property names. Custom properties
+ * (`--x`) keep their literal name.
+ */
+export declare function parseStyle(css: string): Record<string, string>;
+export declare function getParseCount(): number;
+export declare function resetParseCount(): void;
+export declare function parseTrustedHtml(html: string): HNode[];
+/**
+ * Convert a block's trusted HTML string into a React node tree, replacing any
+ * element whose tag name appears in `components`.
+ *
+ * With no `childMemoMap`, behavior is byte-identical to a single
+ * `parseTrustedHtml` + convert pass — the closed-block call site memoizes on
+ * `(html, components)`.
+ *
+ * Passing a `childMemoMap` opts into OPEN-block child reuse: the html is split
+ * into top-level node segments and each is keyed by its exact substring. On a
+ * hit the cached React node is reused (no re-parse, no re-serialize); only new /
+ * changed trailing segments are parsed. The caller owns the map's lifetime and
+ * must scope it per block.id and invalidate it when `components` changes (a hit
+ * carries the React node built under the previous components map). Segment keys
+ * carry their original document order via `keyOffset` so React keys stay stable.
+ */
+export declare function htmlToReact(html: string, components: Components, childMemoMap?: Map<string, ReactNode>, opts?: {
+    decorators?: Decorator[];
+    urlTransform?: UrlTransform;
+}): ReactNode;
+/**
+ * Build a SAFE `<a>` for use inside a {@link Decorator}'s `replace`. Decorator
+ * output is a TRUSTED surface that does NOT pass through brookmd's attribute
+ * sanitizer, and React renders a `javascript:` href without complaint — so this
+ * runs `href` through {@link safeUrl} (the same scheme filter the core uses) and
+ * spreads the remaining attributes verbatim. Prefer this over a hand-built
+ * `<a>` whenever the href can come from model output.
+ *
+ * ```tsx
+ * const decorators = [{
+ *   match: /\$[\d.]+[BMK]/g,
+ *   replace: (t) => wrapLink(t, { href: "/figures/" + t, className: "fig" }),
+ * }];
+ * ```
+ */
+export declare function wrapLink(text: ReactNode, attrs: {
+    href: string;
+} & Record<string, unknown>): ReactElement;