flea-qml 0.0.0-stage → 0.1.0

package/src/listing.js

@@ -0,0 +1,130 @@
+// One directory's rows: scanned for names first, stat'd only for the windows a client reads
+// (docs/protocol.md "list", "window", "rows"). Upstream: src/backend/listing.rs.
+import { accessSync, constants, lstatSync, readdirSync, readlinkSync, statSync } from "node:fs";
+import { join, basename } from "node:path";
+import { describeKind } from "./kinds.js";
+import { NEEDS_STAT, sortRows } from "./order.js";
+import { keptSize } from "./dirsize.js";
+
+const S_IFMT = 0o170000,
+  S_IFLNK = 0o120000;
+
+export class Listing {
+  constructor(path, rows) {
+    this.path = path;
+    this.rows = rows;
+  }
+
+  /** Names and the directory bit only; dotfiles never enter the listing unless `hidden`. */
+  static scan(path, hidden) {
+    const rows = [];
+    for (const entry of readdirSync(path || ".", { withFileTypes: true })) {
+      if (!hidden && entry.name.startsWith(".")) continue;
+      // `d` is the link's own type, so a symlink to a directory is not a directory row.
+      rows.push({ name: entry.name, dir: entry.isDirectory(), link: entry.isSymbolicLink() });
+    }
+    return new Listing(path, rows);
+  }
+
+  /** Reorders the rows, returning [read, sort] in milliseconds as `listed` reports them. */
+  sort(order) {
+    const started = performance.now();
+    if (NEEDS_STAT.has(order.by)) for (const row of this.rows) this.stat(row);
+    if (order.by === "size")
+      for (const row of this.rows) row.measured = row.dir && !row.trash ? keptSize(join(this.path || ".", row.name))?.bytes : undefined;
+    // Kind ordering compares the name's class alone, so it reads no file and pays no stat.
+    if (order.by === "kind" || order.groupByKind)
+      for (const row of this.rows) row.group ??= describeKind(row.trash ? basename(row.trash.original || row.name) : row.name, row.dir, 0, undefined).group;
+    const sorting = performance.now();
+    sortRows(this.rows, order);
+    return [sorting - started, performance.now() - sorting];
+  }
+
+  stat(row) {
+    if (row.st === undefined) {
+      try {
+        row.st = lstatSync((row.trash?.file ?? join(this.path, row.name)));
+      } catch {
+        row.st = null;
+      }
+    }
+    return row.st;
+  }
+
+  /** One `rows` line's body for rows start..start+count, clamped to the listing. */
+  window(start, count) {
+    const started = performance.now();
+    start = Math.min(Math.max(0, start | 0), this.rows.length);
+    const end = Math.min(this.rows.length, start + Math.max(0, count | 0));
+    const kinds = [],
+      kindIndex = new Map(),
+      out = [];
+    for (let index = start; index < end; index++) out.push(this.describe(this.rows[index], kinds, kindIndex));
+    return { start, rows: out, kinds, ms: performance.now() - started };
+  }
+
+  describe(row, kinds, kindIndex) {
+    const st = this.stat(row);
+    // A failed stat reports s, m and p all 0; p 0 is outside st_mode's domain, so it says so.
+    const mode = st?.mode ?? 0;
+    let link, target;
+    if ((mode & S_IFMT) === S_IFLNK) {
+      try {
+        link = readlinkSync((row.trash?.file ?? join(this.path, row.name)));
+      } catch {}
+      // Only a link pays the second stat: it tells a working link from a broken one.
+      try {
+        target = statSync((row.trash?.file ?? join(this.path, row.name)));
+      } catch {
+        target = null;
+      }
+    }
+    const { icon, kind } = describeKind(row.trash ? basename(row.trash.original || row.name) : row.name, row.dir, mode, target);
+    if (!kindIndex.has(kind)) {
+      kindIndex.set(kind, kinds.length);
+      kinds.push(kind);
+    }
+    const out = {
+      n: row.name,
+      d: row.dir,
+      s: st ? st.size : 0,
+      m: st ? Math.floor(st.mtimeMs / 1000) : 0,
+      p: mode,
+      i: icon,
+      t: false,
+      k: kindIndex.get(kind),
+    };
+    if (row.trash) out.trash = {name: basename(row.trash.original || row.name), original: row.trash.original, deleted: row.trash.deleted, identity: row.trash.identity};
+    if (link !== undefined) out.l = link;
+    // A content search's matched line, drawn under the name in its results.
+    if (row.match) out.g = row.match;
+    if (row.dir) out.v = st ? st.dev : 0;
+    // A folder the user already measured keeps its size on every later row: z, and zp for a floor.
+    if (row.dir && !row.trash) {
+      const kept = keptSize(join(this.path || ".", row.name));
+      if (kept) {
+        out.z = kept.bytes;
+        if (kept.partial) out.zp = true;
+      }
+    }
+    return out;
+  }
+
+  indexOfName(name) {
+    return this.rows.findIndex((row) => row.name === name);
+  }
+}
+
+/** The listed directory's own device id and whether this user may add or remove entries. */
+export function directoryFacts(path) {
+  let v = 0,
+    w = false;
+  try {
+    v = statSync(path || ".").dev;
+  } catch {}
+  try {
+    accessSync(path || ".", constants.W_OK | constants.X_OK);
+    w = true;
+  } catch {}
+  return { v, w };
+}

package/src/markdown-html.js

@@ -0,0 +1,317 @@
+// Markdown to one passive HTML page, for a preview shown in a sandboxed web view
+// (WebEngineView: buninu-browser's iframe, or Qt WebEngine). Bun.markdown.html writes the
+// HTML; nothing it writes is used as it comes. Formulas are set aside first and set by
+// src/mathml.js; the rest is parsed again and rebuilt from the same allowlist the QML
+// preview applies to raw HTML (ui/js/MdHtml.js, ui/js/MdUrl.js): those tags, those
+// attributes, http(s)/mailto/relative links, and only pictures inside the document's
+// folder, which are embedded as data: URLs so the page loads nothing. A remote picture is
+// a note naming its host. Mermaid fences are drawn by src/figure.js and embedded as SVG
+// pictures (data: URLs in <img>, where an SVG runs nothing and loads nothing), sharing the
+// pictures' budget. The page carries no script and no resource reference.
+import { readFileSync, realpathSync, statSync } from "node:fs";
+import { dirname, extname, resolve, sep } from "node:path";
+import { texToMathML, cleanMathML } from "./mathml.js";
+import { renderDiagram } from "./figure.js";
+
+/** The largest Markdown source converted, as the QML preview's maxBytes default. */
+export const MARKDOWN_LIMIT = 1 << 20;
+// Qt WebEngine's loadHtml shows nothing past 2 MB (it loads a data: URL), so embedded
+// pictures share 1 MB beside the at most 1 MB of text.
+const IMAGE_LIMIT = 1 << 20;
+const IMAGES_TOTAL = 1 << 20;
+// Diagrams drawn for one page; past this a fence stays source, so a page of broken diagrams
+// cannot hold the backend for a deadline each.
+export const DIAGRAMS_PER_PAGE = 32;
+
+// Tags re-emitted with the attributes below; any other tag is dropped and its content kept.
+const ALLOWED = new Set(("a b strong i em u s del strike sub sup kbd code br small mark span p div h1 h2 h3 h4 h5 h6 hr " +
+  "img picture source details summary table thead tbody tr th td ul ol li blockquote pre font input").split(" "));
+// Tags dropped with their content: active content, foreign namespaces (formulas come back
+// through their own path), and the elements whose content the parser keeps as raw text,
+// which would turn back into markup if only the tag were dropped.
+const DROP_CONTENT = new Set(("script style iframe object embed template noscript svg math textarea title xmp " +
+  "plaintext noembed noframes select option head").split(" "));
+const VOID = new Set(["br", "hr", "img", "source", "input"]);
+const GLOBAL_ATTRIBUTES = new Set(["align", "alt", "width", "height", "title", "colspan", "rowspan"]);
+const STRIKE_AS = { del: "s", strike: "s" };
+const IMAGE_TYPES = { ".png": "image/png", ".jpg": "image/jpeg", ".jpeg": "image/jpeg", ".gif": "image/gif", ".webp": "image/webp", ".bmp": "image/bmp", ".avif": "image/avif" };
+
+const escapeText = (text) => text.replaceAll("<", "&lt;").replaceAll(">", "&gt;");
+const escapeAttribute = (value) => String(value).replaceAll("&", "&amp;").replaceAll('"', "&quot;").replaceAll("<", "&lt;").replaceAll(">", "&gt;");
+
+// Entities, percent escapes and control characters undone until the text settles, as
+// MdUrl.targetAllowed decodes before it judges a scheme; a target still changing after
+// eight passes is refused.
+function decodedTarget(raw) {
+  let seen = String(raw);
+  for (let pass = 0; pass < 8; pass++) {
+    let next = seen.replace(/&(#x[0-9a-f]+|#\d+|colon|tab|newline|amp|lt|gt|quot|apos);?/gi, (all, name) => {
+      const lower = name.toLowerCase();
+      if (lower === "colon") return ":";
+      if (lower === "tab") return "\t";
+      if (lower === "newline") return "\n";
+      if (lower[0] === "#") {
+        const code = lower[1] === "x" ? parseInt(lower.slice(2), 16) : parseInt(lower.slice(1), 10);
+        return code > 0 && code <= 0x10ffff ? String.fromCodePoint(code) : "";
+      }
+      return { amp: "&", lt: "<", gt: ">", quot: '"', apos: "'" }[lower];
+    });
+    try { next = decodeURIComponent(next); } catch {}
+    next = next.replace(/[\u0000- \u007f-\u009f]/g, "");
+    if (next === seen) return next;
+    seen = next;
+  }
+  return null;
+}
+
+/** Whether a link target may stay: http(s), mailto, or no scheme (relative, #fragment). */
+export function linkAllowed(raw) {
+  const target = decodedTarget(raw);
+  if (target === null) return false;
+  const scheme = /^([a-z][a-z0-9+.-]*):/i.exec(target)?.[1]?.toLowerCase();
+  return !scheme || scheme === "http" || scheme === "https" || scheme === "mailto";
+}
+
+const isRemote = (url) => /^(https?:)?\/\//i.test(url);
+const hostOf = (url) => {
+  const rest = url.replace(/^[a-z][a-z0-9+.-]*:\/\//i, "").replace(/^\/\//, "");
+  const host = rest.split(/[/?#]/)[0].split("@").pop();
+  return (host.startsWith("[") ? host.slice(0, host.indexOf("]") + 1) : host.split(":")[0]) || url;
+};
+
+/**
+ * A picture's source: "remote" with its host, "local" with a data: URL for a file inside
+ * `folder` (symbolic links resolved, so none leads out), or "dropped". Every other scheme,
+ * data: included, is dropped.
+ */
+export function classifyImage(raw, folder, budget) {
+  const url = decodedTarget(raw ?? "");
+  if (!url) return { kind: "dropped" };
+  if (isRemote(url)) return { kind: "remote", host: hostOf(url) };
+  let path;
+  if (/^file:/i.test(url)) path = url.replace(/^file:(\/\/)?/i, "");
+  else if (/^[a-z][a-z0-9+.-]*:/i.test(url)) return { kind: "dropped" };
+  else path = url.split(/[?#]/)[0];
+  if (path.includes("\\")) return { kind: "dropped" };
+  const type = IMAGE_TYPES[extname(path).toLowerCase()];
+  if (!type) return { kind: "dropped" };
+  try {
+    const root = realpathSync(folder);
+    const file = realpathSync(resolve(folder, path.startsWith("/") ? path : `./${path}`));
+    if (file !== root && !file.startsWith(root + sep)) return { kind: "dropped" };
+    const size = statSync(file).size;
+    if (size > IMAGE_LIMIT || size > budget.left) return { kind: "dropped" };
+    budget.left -= size;
+    return { kind: "local", url: `data:${type};base64,${readFileSync(file).toString("base64")}` };
+  } catch {
+    return { kind: "dropped" };
+  }
+}
+
+/**
+ * Rebuilds HTML from the allowlist: allowed tags with their allowed attributes, text
+ * escaped, everything else dropped (DROP_CONTENT with its content, other tags keeping
+ * theirs). Nothing of the source survives as markup except what is emitted here.
+ */
+export function cleanHtml(source, folder, budget = { left: IMAGES_TOTAL }) {
+  const out = [];
+  let hidden = 0;
+  new HTMLRewriter().on("*", {
+    element(el) {
+      const tag = el.tagName.toLowerCase();
+      const foreign = el.namespaceURI !== "http://www.w3.org/1999/xhtml";
+      if (hidden || DROP_CONTENT.has(tag) || foreign) {
+        if (el.canHaveContent) { hidden++; el.onEndTag(() => { hidden--; }); }
+        return;
+      }
+      if (!ALLOWED.has(tag)) return;
+      const name = STRIKE_AS[tag] ?? (tag === "font" ? "span" : tag);
+      let attributes = "";
+      for (const [key, value] of el.attributes) {
+        const attribute = key.toLowerCase();
+        if (GLOBAL_ATTRIBUTES.has(attribute)) attributes += ` ${attribute}="${escapeAttribute(value)}"`;
+        else if (attribute === "href" && tag === "a" && linkAllowed(value)) attributes += ` href="${escapeAttribute(value)}"`;
+        // A task list's box: shown, never editable.
+        else if (tag === "input" && attribute === "checked") attributes += " checked";
+      }
+      if (tag === "input") {
+        if (String(el.getAttribute("type")).toLowerCase() !== "checkbox") return;
+        attributes += ' type="checkbox" disabled';
+      }
+      if (tag === "img" || tag === "source") {
+        if (tag === "source") return; // picture keeps its img; a source set is not followed
+        const picked = classifyImage(el.getAttribute("src"), folder, budget);
+        if (picked.kind === "remote") {
+          out.push(`<span class="remote">Remote image not loaded · ${escapeText(picked.host)}</span>`);
+          return;
+        }
+        if (picked.kind === "dropped") {
+          const alt = el.getAttribute("alt");
+          if (alt) out.push(`<span class="alt">${escapeText(alt)}</span>`);
+          return;
+        }
+        attributes += ` src="${picked.url}"`;
+      }
+      out.push(`<${name}${attributes}>`);
+      if (!VOID.has(tag) && el.canHaveContent) el.onEndTag(() => out.push(`</${name}>`));
+    },
+  }).onDocument({
+    text(chunk) {
+      if (!hidden) out.push(escapeText(chunk.text));
+    },
+  }).transform(String(source));
+  return out.join("");
+}
+
+// ---- formulas ----
+
+// Private-use markers, which Markdown leaves alone (it turns NUL into U+FFFD).
+const OPEN = "", CLOSE = "";
+
+/**
+ * Sets formulas aside: $$…$$ and $…$ (TeX) and raw <math>…</math> (MathML), outside code
+ * fences and code spans; and Mermaid fences (```mermaid, as the block view picks them: the
+ * info string's first word, any case), each as a paragraph of its own. Returns the text with
+ * markers, the formulas they stand for, and the diagrams' sources.
+ */
+export function holdFormulas(source) {
+  const formulas = [];
+  const diagrams = [];
+  const hold = (formula) => `${OPEN}${formulas.push(formula) - 1}${CLOSE}`;
+  const lines = String(source).replace(/[]/g, "�").split("\n");
+  const kept = [];
+  let fence = null;
+  let prose = [];
+  const flush = () => {
+    if (!prose.length) return;
+    let text = prose.join("\n");
+    prose = [];
+    // Code spans are kept whole: a run of backticks up to the same run.
+    const spans = [];
+    text = text.replace(/(`+)[\s\S]*?\1/g, (span) => `${spans.push(span) - 1}`);
+    text = text
+      .replace(/<math\b[\s\S]*?<\/math\s*>/gi, (markup) => hold({ markup }))
+      .replace(/\$\$([\s\S]+?)\$\$/g, (_, tex) => hold({ tex, display: true }))
+      // Inline TeX as pandoc reads it: no space just inside either $, and no digit right
+      // after the closing one, so "$5 and $10" stays prose.
+      .replace(/(^|[^\\$])\$(?=\S)([^$\n]*?\S)\$(?!\d)/g, (_, before, tex) => before + hold({ tex, display: false }));
+    kept.push(text.replace(/(\d+)/g, (_, index) => spans[Number(index)]));
+  };
+  // A diagram's lines, with the fence's own indent taken off each, as CommonMark reads code.
+  let diagram = null;
+  const holdDiagram = () => {
+    kept.push("", `${OPEN}d${diagrams.push(diagram.lines.join("\n")) - 1}${CLOSE}`, "");
+    diagram = null;
+  };
+  for (const line of lines) {
+    const opening = /^(\s{0,3})(`{3,}|~{3,})(.*)$/.exec(line);
+    const marker = opening?.[2];
+    if (diagram) {
+      if (marker && marker[0] === diagram.fence[0] && marker.length >= diagram.fence.length && !opening[3].trim()) holdDiagram();
+      else diagram.lines.push(line.replace(new RegExp(`^ {0,${diagram.indent}}`), ""));
+    } else if (fence) {
+      kept.push(line);
+      if (marker && marker[0] === fence[0] && marker.length >= fence.length && !line.trim().slice(marker.length).trim()) fence = null;
+    } else if (marker) {
+      flush();
+      // A backtick fence's info string holds no backtick (CommonMark), so ```mermaid` is not one.
+      const info = opening[3].trim();
+      if (/^mermaid(\s|$)/i.test(info) && !(marker[0] === "`" && info.includes("`")))
+        diagram = { fence: marker, indent: opening[1].length, lines: [] };
+      else {
+        fence = marker;
+        kept.push(line);
+      }
+    } else prose.push(line);
+  }
+  flush();
+  // An unclosed fence runs to the end, as an unclosed code block does.
+  if (diagram) holdDiagram();
+  return { text: kept.join("\n"), formulas, diagrams };
+}
+
+// A formula's MathML, or its source as escaped text when it is refused.
+function formulaHtml({ tex, display, markup }) {
+  try {
+    return markup !== undefined ? cleanMathML(markup) : texToMathML(tex, display);
+  } catch {
+    const source = markup ?? (display ? `$$${tex}$$` : `$${tex}$`);
+    return `<code class="formula-source">${Bun.escapeHTML(source)}</code>`;
+  }
+}
+
+// ---- the page ----
+
+const HEX = /^#[0-9a-f]{6}$/i;
+const colour = (value, fallback) => (HEX.test(String(value)) ? String(value) : fallback);
+
+/** The page's own stylesheet, from the preview's theme colours (each checked as #rrggbb). */
+export function pageStyle(theme = {}) {
+  const fg = colour(theme.foreground, "#d8dee9"), bg = colour(theme.background, "#171b22");
+  const muted = colour(theme.muted, "#8a93a6"), surface = colour(theme.surface, "#232833"), accent = colour(theme.accent, "#88c0d0");
+  const body = Math.max(8, Math.min(40, Number(theme.bodyPx) || 14));
+  return `html{background:${bg}}body{margin:12px 16px;color:${fg};background:${bg};font:${body}px sans-serif;line-height:1.7;overflow-wrap:anywhere}` +
+    `a{color:${accent}}h1,h2{color:${fg}}h1{font-size:1.45em}h2{font-size:1.2em}h3,h4,h5,h6{font-size:1em}` +
+    `pre,code,kbd{font-family:monospace;background:${surface}}code,kbd{padding:0 4px;border-radius:3px}` +
+    `pre{padding:8px 12px;white-space:pre-wrap}pre code{padding:0;background:none}` +
+    `blockquote{margin:0;padding-left:12px;border-left:3px solid ${muted};color:${muted}}` +
+    `table{border-collapse:collapse}td,th{border:1px solid ${muted};padding:2px 8px}hr{border:0;border-top:1px solid ${muted}}` +
+    `.remote{display:inline-block;border:1px dashed ${muted};color:${muted};padding:2px 6px}.alt{color:${muted}}` +
+    `math[display=block]{display:block;margin:6px 0}.formula-source{color:${muted}}img{max-width:100%}` +
+    `.diagram{margin:8px 0}.diagram-error{margin:-4px 0 8px;color:${muted};font-size:.9em}`;
+}
+
+// A diagram as a picture, or its source as a code block with the reason it was not drawn.
+// `drawn` is renderDiagram's answer; none (a page built without drawing) leaves the source.
+function diagramHtml(source, drawn, budget) {
+  if (drawn?.svg !== undefined) {
+    const bytes = Buffer.byteLength(drawn.svg);
+    if (bytes <= budget.left) {
+      budget.left -= bytes;
+      return `<div class="diagram"><img alt="Mermaid diagram" src="data:image/svg+xml;base64,${Buffer.from(drawn.svg).toString("base64")}"></div>`;
+    }
+    drawn = { error: "over the page's picture budget" };
+  }
+  const code = `<pre><code>${escapeText(source.replaceAll("&", "&amp;"))}</code></pre>`;
+  return drawn?.error ? `${code}<p class="diagram-error">Diagram not drawn · ${escapeText(drawn.error.replaceAll("&", "&amp;"))}</p>` : code;
+}
+
+/**
+ * One complete, passive page for a Markdown source in `folder`. `drawn` holds renderDiagram's
+ * answer for each Mermaid fence in order (see markdownHtml); a fence without one stays source.
+ */
+export function markdownPage(source, folder, theme = {}, drawn = []) {
+  if (Buffer.byteLength(String(source)) > MARKDOWN_LIMIT) throw Error("Markdown preview exceeds size limit");
+  const { text, formulas, diagrams } = holdFormulas(source);
+  const html = Bun.markdown.html(text, { tables: true, strikethrough: true, tasklists: true });
+  // Diagrams take their share of the picture budget first, in document order; pictures the rest.
+  const budget = { left: IMAGES_TOTAL };
+  const figures = diagrams.map((diagram, index) => diagramHtml(diagram, drawn[index], budget));
+  const body = cleanHtml(html, folder, budget)
+    .replace(new RegExp(`(?:<p>)?${OPEN}d(\\d+)${CLOSE}(?:</p>)?`, "g"), (_, index) => figures[Number(index)] ?? "")
+    .replace(new RegExp(`${OPEN}(\\d+)${CLOSE}`, "g"), (_, index) => formulas[Number(index)] ? formulaHtml(formulas[Number(index)]) : "");
+  return `<!doctype html><meta charset="utf-8"><style>${pageStyle(theme)}</style>${body}`;
+}
+
+/** Draws a source's Mermaid fences under `theme`, in order, the first DIAGRAMS_PER_PAGE of them. */
+export async function drawDiagrams(source, theme = {}) {
+  const { diagrams } = holdFormulas(source);
+  return Promise.all(diagrams.map((diagram, index) => index < DIAGRAMS_PER_PAGE
+    ? renderDiagram(diagram, theme)
+    : Promise.resolve({ error: `more than ${DIAGRAMS_PER_PAGE} diagrams on the page` })));
+}
+
+/** The backend's answer to one `markdownhtml` request for the file at `request.path`. */
+export async function markdownHtml(request) {
+  const answer = { t: "markdownhtml", slot: request.slot ?? "", token: request.token, state: "failed", html: "" };
+  try {
+    const path = String(request.path ?? "");
+    if (!path || statSync(path).size > MARKDOWN_LIMIT) return answer;
+    const source = await Bun.file(path).text();
+    const theme = request.theme ?? {};
+    const drawn = await drawDiagrams(source, theme);
+    return { ...answer, state: "ready", html: markdownPage(source, dirname(resolve(path)), theme, drawn) };
+  } catch {
+    return answer;
+  }
+}

package/src/mathml.js

@@ -0,0 +1,186 @@
+// TeX to MathML for the Markdown preview: Temml writes MathML, and the result is never
+// used as it comes. It is parsed again and rebuilt from an allowlist, the way
+// src/html.js rebuilds passive HTML: MathML Core elements only, each attribute checked
+// against the values layout reads, and from style only colours, box spacing and a
+// plain border. Nothing that loads, links or runs can reach the output.
+import temml from "./vendor/temml.mjs";
+
+/** The longest TeX source converted, as the figure helper's MATH_LIMIT. */
+export const MATH_LIMIT = 4096;
+const OUTPUT_LIMIT = 256 * 1024;
+const DEPTH_LIMIT = 64;
+
+// MathML Core elements (https://w3c.github.io/mathml-core/#mathml-elements-and-attributes)
+// and menclose, which Temml writes for \boxed and \overline.
+const ELEMENTS = new Set(("math mrow mi mn mo ms mtext mspace mfrac msqrt mroot msub msup msubsup munder mover " +
+  "munderover mmultiscripts mprescripts none mtable mtr mtd mstyle mpadded mphantom menclose merror semantics").split(" "));
+// Dropped with everything inside them.
+const DROP = new Set(["annotation", "annotation-xml"]);
+
+const BOOLEAN = /^(?:true|false)$/i;
+const NUMBER = "[+-]?(?:\\d{1,4}(?:\\.\\d{1,6})?|\\.\\d{1,6})";
+const LENGTH = new RegExp(`^\\s*(${NUMBER})\\s*(em|ex|px|pt|%)?\\s*$`, "i");
+// The largest length kept, per unit: a huge space or rule is a way to cover the pane.
+const LENGTH_MAX = { em: 50, ex: 100, px: 1000, pt: 750, "%": 1000, "": 0 };
+const ATTRIBUTES = {
+  display: (value) => /^(?:block|inline)$/i.test(value),
+  displaystyle: (value) => BOOLEAN.test(value),
+  scriptlevel: (value) => /^[+-]?\d{1,2}$/.test(value),
+  mathvariant: (value) => /^(?:normal|bold|italic|bold-italic)$/i.test(value),
+  form: (value) => /^(?:prefix|infix|postfix)$/i.test(value),
+  stretchy: (value) => BOOLEAN.test(value),
+  symmetric: (value) => BOOLEAN.test(value),
+  largeop: (value) => BOOLEAN.test(value),
+  movablelimits: (value) => BOOLEAN.test(value),
+  fence: (value) => BOOLEAN.test(value),
+  separator: (value) => BOOLEAN.test(value),
+  accent: (value) => BOOLEAN.test(value),
+  accentunder: (value) => BOOLEAN.test(value),
+  lspace: length, rspace: length, width: length, height: length, depth: length, voffset: length,
+  minsize: length, maxsize: length, linethickness: length,
+};
+
+/** A MathML Core length within the limits above (unitless only as zero). */
+export function length(value) {
+  const match = LENGTH.exec(String(value));
+  if (!match) return false;
+  const unit = (match[2] ?? "").toLowerCase();
+  return Math.abs(Number(match[1])) <= LENGTH_MAX[unit];
+}
+
+const COLOR = /^(?:#[0-9a-f]{3,4}|#[0-9a-f]{6}|#[0-9a-f]{8}|rgba?\(\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}\s*(?:,\s*(?:0|1|0?\.\d+)\s*)?\))$/i;
+const BOX_LENGTHS = (value, negative) => {
+  const parts = value.trim().split(/\s+/);
+  return parts.length >= 1 && parts.length <= 4 && parts.every((part) => length(part) && (negative || !part.trim().startsWith("-")));
+};
+const STYLE = {
+  color: (value) => COLOR.test(value),
+  "background-color": (value) => COLOR.test(value),
+  padding: (value) => BOX_LENGTHS(value, false),
+  "padding-top": (value) => BOX_LENGTHS(value, false), "padding-right": (value) => BOX_LENGTHS(value, false),
+  "padding-bottom": (value) => BOX_LENGTHS(value, false), "padding-left": (value) => BOX_LENGTHS(value, false),
+  "margin-left": (value) => BOX_LENGTHS(value, true), "margin-right": (value) => BOX_LENGTHS(value, true),
+  border: (value) => /^\s*(\S+)\s+(?:solid|dashed|dotted)(?:\s+(\S+))?\s*$/i.test(value)
+    && length(value.trim().split(/\s+/)[0]) && (value.trim().split(/\s+/)[2] === undefined || COLOR.test(value.trim().split(/\s+/)[2])),
+};
+
+/** The allowed declarations of a style attribute, rebuilt; empty when none survive. */
+export function cleanStyle(source) {
+  const kept = [];
+  for (const declaration of String(source).split(";")) {
+    const colon = declaration.indexOf(":");
+    if (colon < 0) continue;
+    const name = declaration.slice(0, colon).trim().toLowerCase();
+    const value = declaration.slice(colon + 1).trim();
+    // A comment, escape or function call other than rgb() never survives the value checks,
+    // but refuse them up front so the checks only ever see plain values.
+    if (!STYLE[name] || /[\\/*"'<>&{}]|url\s*\(|expression|@/i.test(value)) continue;
+    if (STYLE[name](value)) kept.push(`${name}:${value}`);
+  }
+  return kept.join(";");
+}
+
+const escapeAttribute = (value) => String(value).replaceAll("&", "&amp;").replaceAll('"', "&quot;").replaceAll("<", "&lt;").replaceAll(">", "&gt;");
+
+// Entity references a text run or attribute value may hold; anything else that starts
+// with "&" is escaped, so it stays text.
+const ENTITY = /&(?:amp|lt|gt|quot|apos|#\d{1,7}|#x[0-9a-f]{1,6});/iy;
+const NAMED = { amp: "&", lt: "<", gt: ">", quot: '"', apos: "'" };
+const decode = (value) => value.replace(/&(amp|lt|gt|quot|apos|#\d{1,7}|#x[0-9a-f]{1,6});/gi, (all, name) => {
+  if (name[0] !== "#") return NAMED[name.toLowerCase()];
+  const code = name[1].toLowerCase() === "x" ? parseInt(name.slice(2), 16) : parseInt(name.slice(1), 10);
+  return code > 0 && code <= 0x10ffff && !(code >= 0xd800 && code <= 0xdfff) ? String.fromCodePoint(code) : "\ufffd";
+});
+const escapeText = (value) => {
+  let out = "";
+  for (let index = 0; index < value.length; index++) {
+    const character = value[index];
+    if (character === "&") {
+      ENTITY.lastIndex = index;
+      out += ENTITY.test(value) ? "&" : "&amp;";
+    } else out += character === ">" ? "&gt;" : character;
+  }
+  return out;
+};
+
+// The markup Temml writes: start tags with double-quoted attributes, "/>" or end tags,
+// and text without "<". Comments, CDATA, doctypes, processing instructions, unquoted
+// or single-quoted attributes and unbalanced tags are refused, not repaired.
+const TOKEN = /<\/([a-z][a-z0-9-]*)\s*>|<([a-z][a-z0-9-]*)((?:\s+[a-z_:][-a-z0-9_:.]*\s*=\s*"[^"<]*")*)\s*(\/?)>|([^<]+)/giy;
+const ATTRIBUTE = /([a-z_:][-a-z0-9_:.]*)\s*=\s*"([^"<]*)"/gi;
+
+/**
+ * Rebuilds MathML from the allowlist. Whatever is not an allowed MathML element (HTML,
+ * SVG, annotations, anything past the depth limit) is dropped with its content; an
+ * unknown MathML-looking element keeps its children as an mrow. Throws when the input
+ * is not strict markup, or the result is not one <math> element or is too large.
+ */
+export function cleanMathML(source) {
+  const markup = String(source);
+  if (Buffer.byteLength(markup) > OUTPUT_LIMIT) throw Error("MathML exceeds size limit");
+  const out = [];
+  const stack = []; // {name, kept, output}
+  let hidden = 0, roots = 0;
+  TOKEN.lastIndex = 0;
+  while (TOKEN.lastIndex < markup.length) {
+    const at = TOKEN.lastIndex;
+    const match = TOKEN.exec(markup);
+    if (!match || match.index !== at) throw Error("MathML is not strict markup");
+    const [, endName, startName, attributeText, selfClosing, text] = match;
+    if (text !== undefined) {
+      if (!hidden && stack.length) out.push(escapeText(text));
+      continue;
+    }
+    if (endName !== undefined) {
+      const open = stack.pop();
+      if (!open || open.name !== endName.toLowerCase()) throw Error("MathML tags are unbalanced");
+      if (open.kept) out.push(`</${open.output}>`);
+      else if (open.hides) hidden--;
+      continue;
+    }
+    const tag = startName.toLowerCase();
+    const depth = stack.length;
+    // MathML only: a known element, or one of Temml's own kept as mrow; <math> only at the root.
+    const looksMathML = ELEMENTS.has(tag) || /^m[a-z]+$/.test(tag);
+    const drop = hidden > 0 || !looksMathML || DROP.has(tag) || depth >= DEPTH_LIMIT || (tag === "math") !== (depth === 0);
+    const entry = { name: tag, kept: !drop, hides: drop && !hidden, output: ELEMENTS.has(tag) ? tag : "mrow" };
+    if (drop) {
+      if (entry.hides) hidden++;
+    } else {
+      if (tag === "math") roots++;
+      let attributes = "";
+      for (const [, key, raw] of attributeText.matchAll(ATTRIBUTE)) {
+        const attribute = key.toLowerCase();
+        const value = decode(raw);
+        if (attribute === "style") {
+          const style = cleanStyle(value);
+          if (style) attributes += ` style="${escapeAttribute(style)}"`;
+        } else if (ATTRIBUTES[attribute]?.(value)) attributes += ` ${attribute}="${escapeAttribute(value.trim())}"`;
+      }
+      out.push(`<${entry.output}${attributes}>`);
+    }
+    if (selfClosing) {
+      if (entry.kept) out.push(`</${entry.output}>`);
+      else if (entry.hides) hidden--;
+    } else stack.push(entry);
+  }
+  if (stack.length) throw Error("MathML tags are unbalanced");
+  const html = out.join("");
+  if (roots !== 1 || !html.startsWith("<math") || !html.endsWith("</math>")) throw Error("not one MathML formula");
+  return html;
+}
+
+/**
+ * MathML for one TeX formula, cleaned. Temml runs with trust off (no \href, \url,
+ * \includegraphics or \html*), bounded macro expansion and sizes, and reports a TeX
+ * error as an <merror> inside the formula rather than throwing.
+ */
+export function texToMathML(tex, display = false) {
+  const source = String(tex ?? "");
+  if (source.length > MATH_LIMIT) throw Error("formula exceeds size limit");
+  const markup = temml.renderToString(source, {
+    displayMode: Boolean(display), trust: false, throwOnError: false, maxExpand: 1000, maxSize: 20, strict: false,
+    annotate: false, xml: false, wrap: "none",
+  });
+  return cleanMathML(markup);
+}