@simonklee/opentui-tex 0.3.0 → 0.3.1

package/dist/{chunk-pgj24z8a.js → chunk-gbwc618x.js}

@@ -3,6 +3,9 @@ import {
   BoxRenderable,
   ImageRenderable,
   TextRenderable,
+  StyledText,
+  createTextAttributes,
+  parseColor,
   Yoga
 } from "@opentui/core";
 import stringWidth3 from "string-width";
@@ -67,18 +70,18 @@ var subscript = {
   x: "ₓ"
 };
 function layoutMath(node, displayMode) {
-  return layout(node, displayMode);
+  return layout(node, { display: displayMode });
 }
-function boxToString(box, widthMax, heightMax) {
-  const lines = [];
+function boxToOutput(box, widthMax, heightMax) {
+  const spans = [];
   for (let y = 0;y < Math.min(box.height, heightMax); y++) {
-    let line = "";
+    const line = [];
     let width = 0;
     for (let x = 0;x < box.width && width < widthMax; x++) {
       const value = box.cells[y][x];
-      const cellWidth = value ? stringWidth(value) : 0;
+      const cellWidth = value ? stringWidth(value.char) : 0;
       if (cellWidth === 0) {
-        line += " ";
+        appendSpan(line, " ");
         width++;
         continue;
       }
@@ -86,174 +89,238 @@ function boxToString(box, widthMax, heightMax) {
         throw new Error(`Unicode glyph exceeds the ${widthMax}-column TeX width`);
       if (width + cellWidth > widthMax)
         break;
-      line += value;
+      appendSpan(line, value.char, value.style);
       width += cellWidth;
       x += cellWidth - 1;
     }
-    lines.push(line.trimEnd());
+    trimSpans(line);
+    if (y)
+      appendSpan(spans, `
+`);
+    for (const span of line)
+      appendSpan(spans, span.text, span);
   }
-  return lines.join(`
-`).trimEnd();
+  trimSpans(spans);
+  const text = spans.map((span) => span.text).join("");
+  return spans.some((span) => span.color !== undefined || span.bold !== undefined || span.italic !== undefined) ? { text, spans } : { text };
 }
-function layout(node, display) {
+function appendSpan(spans, text, style) {
+  const last = spans.at(-1);
+  if (last && last.color === style?.color && last.bold === style?.bold && last.italic === style?.italic) {
+    last.text += text;
+    return;
+  }
+  spans.push({ ...style, text });
+}
+function trimSpans(spans) {
+  while (spans.length) {
+    const last = spans.at(-1);
+    last.text = last.text.trimEnd();
+    if (last.text)
+      return;
+    spans.pop();
+  }
+}
+function layout(node, context) {
   switch (node.type) {
     case "row":
-      return layoutRow(node.body, display);
+      return layoutRow(node.body, context);
     case "symbol":
     case "text":
     case "operator":
-      return textBox(node.value);
+      return textBox(applyVariant(node.value, context.variant), context.style);
     case "space":
       return blank(node.width, 1, 0);
     case "fraction":
-      return fraction(layout(node.numerator, display), layout(node.denominator, display), node.bar);
+      return fraction(layout(node.numerator, context), layout(node.denominator, context), node.bar, node.numeratorAlign, context.style);
     case "root":
-      return root(layout(node.body, display), node.index ? layout(node.index, display) : undefined);
+      return root(layout(node.body, context), node.index ? layout(node.index, context) : undefined, context.style);
     case "scripts":
-      return scripts(node, display);
+      return scripts(node, context);
     case "delimited":
-      return delimited(node.left, layout(node.body, display), node.right);
+      return delimited(node.left, layout(node.body, context), node.right, context.style);
     case "matrix":
-      return matrix(node.rows, node.environment, display);
+      return matrix(node, context);
     case "accent":
-      return accent(node.accent, layout(node.body, display));
+      return accent(node.accent, layout(node.body, context), context.style);
+    case "brace":
+      return brace(layout(node.body, context), node.position, context.style);
+    case "variant":
+      return layout(node.body, { ...context, variant: node.variant, style: node.variant === "bold" ? { ...context.style, bold: true } : node.variant === "italic" ? { ...context.style, italic: true } : context.style });
+    case "color":
+      return layout(node.body, { ...context, style: { ...context.style, color: node.color } });
     case "overunder":
-      return overUnder(layout(node.base, display), node.over ? layout(node.over, display) : undefined, node.under ? layout(node.under, display) : undefined);
+      return overUnder(layout(node.base, context), node.over ? layout(node.over, context) : undefined, node.under ? layout(node.under, context) : undefined);
   }
 }
-function layoutRow(nodes, display) {
+function layoutRow(nodes, context) {
   const boxes = [];
   let previous;
   for (let index = 0;index < nodes.length; index++) {
     const role = normalizedRole(roleOf(nodes[index]), previous, nextRole(nodes, index + 1));
     if (needsSpace(previous, role, boxes.length))
       boxes.push(blank(1, 1, 0));
-    boxes.push(layout(nodes[index], display));
+    boxes.push(layout(nodes[index], context));
     if (nodes[index].type !== "space")
       previous = role ?? "ordinary";
   }
   return hpack(boxes);
 }
-function fraction(top, bottom, bar) {
+function fraction(top, bottom, bar, align, style) {
   const width = Math.max(top.width, bottom.width) + 2;
   const result = blank(width, top.height + bottom.height + 1, top.height);
-  overlay(result, top, Math.floor((width - top.width) / 2), 0);
+  overlay(result, top, align === "left" ? 1 : align === "right" ? width - top.width - 1 : Math.floor((width - top.width) / 2), 0);
   if (bar)
-    horizontal(result, top.height, width, "─");
+    horizontal(result, top.height, width, "─", style);
   overlay(result, bottom, Math.floor((width - bottom.width) / 2), top.height + 1);
   return result;
 }
-function root(body, index) {
+function root(body, index, style) {
   const indexWidth = index ? Math.max(0, index.width - 1) : 0;
   const bodyX = indexWidth + 2;
   const bodyY = index?.height ?? 1;
   const result = blank(bodyX + body.width, body.height + bodyY, body.baseline + bodyY);
-  set(result, bodyX - 1, bodyY - 1, "╭");
+  set(result, bodyX - 1, bodyY - 1, "╭", style);
   for (let x = bodyX;x < result.width; x++)
-    set(result, x, bodyY - 1, "─");
-  set(result, bodyX - 2, result.baseline, "√");
+    set(result, x, bodyY - 1, "─", style);
+  set(result, bodyX - 2, result.baseline, "√", style);
   overlay(result, body, bodyX, bodyY);
   if (index)
     overlay(result, index, 0, 0);
   return result;
 }
-function scripts(node, display) {
-  const base = layout(node.base, display);
+function scripts(node, context) {
+  const base = layout(node.base, context);
+  const sup = node.superscript ? layout(node.superscript, context) : undefined;
+  const sub = node.subscript ? layout(node.subscript, context) : undefined;
   const supText = node.superscript ? simpleText(node.superscript) : undefined;
   const subText = node.subscript ? simpleText(node.subscript) : undefined;
-  const limits = node.base.type === "operator" && (node.base.limits === true || node.base.limits === "display" && display);
-  if (!limits) {
+  let target = node.base;
+  while (target.type === "variant" || target.type === "color" || target.type === "scripts") {
+    target = target.type === "scripts" ? target.base : target.body;
+  }
+  const limits = target.type === "operator" && (target.limits === true || target.limits === "display" && context.display);
+  if (limits || target.type === "brace")
+    return overUnder(base, sup, sub);
+  if (base.height === 1) {
     const mappedSup = supText === undefined ? undefined : mapScript(supText, superscript);
     const mappedSub = subText === undefined ? undefined : mapScript(subText, subscript);
-    if ((!node.superscript || mappedSup !== undefined) && (!node.subscript || mappedSub !== undefined)) {
-      return hpack([base, textBox((mappedSup ?? "") + (mappedSub ?? ""))]);
+    if ((!sup?.width || mappedSup !== undefined) && (!sub?.width || mappedSub !== undefined)) {
+      return hpack([base, textBox((mappedSup ?? "") + (mappedSub ?? ""), context.style)]);
     }
   }
-  if (limits)
-    return overUnder(base, node.superscript ? layout(node.superscript, display) : undefined, node.subscript ? layout(node.subscript, display) : undefined);
-  const sup = node.superscript ? layout(node.superscript, display) : undefined;
-  const sub = node.subscript ? layout(node.subscript, display) : undefined;
   const sideWidth = Math.max(sup?.width ?? 0, sub?.width ?? 0);
-  const result = blank(base.width + sideWidth, (sup?.height ?? 0) + base.height + (sub?.height ?? 0), (sup?.height ?? 0) + base.baseline);
-  overlay(result, base, 0, sup?.height ?? 0);
+  const topHeight = sup?.width ? sup.height : 0;
+  const bottomHeight = sub?.width ? sub.height : 0;
+  const result = blank(base.width + sideWidth, topHeight + base.height + bottomHeight, topHeight + base.baseline);
+  overlay(result, base, 0, topHeight);
   if (sup)
     overlay(result, sup, base.width, 0);
   if (sub)
-    overlay(result, sub, base.width, (sup?.height ?? 0) + base.height);
+    overlay(result, sub, base.width, topHeight + base.height);
   return result;
 }
 function overUnder(base, over, under) {
   const width = Math.max(base.width, over?.width ?? 0, under?.width ?? 0);
-  const result = blank(width, (over?.height ?? 0) + base.height + (under?.height ?? 0), (over?.height ?? 0) + base.baseline);
+  const overHeight = over?.width ? over.height : 0;
+  const underHeight = under?.width ? under.height : 0;
+  const result = blank(width, overHeight + base.height + underHeight, overHeight + base.baseline);
   if (over)
     overlay(result, over, Math.floor((width - over.width) / 2), 0);
-  overlay(result, base, Math.floor((width - base.width) / 2), over?.height ?? 0);
+  overlay(result, base, Math.floor((width - base.width) / 2), overHeight);
   if (under)
-    overlay(result, under, Math.floor((width - under.width) / 2), (over?.height ?? 0) + base.height);
+    overlay(result, under, Math.floor((width - under.width) / 2), overHeight + base.height);
   return result;
 }
-function delimited(left, body, right) {
-  return hpack([delimiter(left, body.height, body.baseline, true), body, delimiter(right, body.height, body.baseline, false)]);
+function delimited(left, body, right, style) {
+  return hpack([delimiter(left, body.height, body.baseline, true, style), body, delimiter(right, body.height, body.baseline, false, style)]);
 }
-function matrix(rows, environment, display) {
-  const cells = rows.map((row) => row.map((node) => layout(node, display)));
-  const columns = Math.max(0, ...cells.map((row) => row.length));
+function matrix(node, context) {
+  const cells = node.rows.map((row) => row.map((cell) => layout(cell, context)));
+  const alignments = node.columns?.match(/[lcr]/g);
+  const rules = node.columns?.split(/[lcr]/).map((rule) => rule.length) ?? [];
+  const columns = Math.max(alignments?.length ?? 0, ...cells.map((row) => row.length));
   const widths = Array.from({ length: columns }, (_, x) => Math.max(0, ...cells.map((row) => row[x]?.width ?? 0)));
   const ascents = cells.map((row) => Math.max(0, ...row.map((cell) => cell.baseline)));
   const descents = cells.map((row) => Math.max(0, ...row.map((cell) => cell.height - cell.baseline - 1)));
   const heights = ascents.map((value, y2) => value + descents[y2] + 1);
-  const gap = environment === "cases" || environment === "aligned" || environment === "align" ? 2 : 1;
-  const width = widths.reduce((sum, value) => sum + value, 0) + Math.max(0, columns - 1) * gap;
+  const aligned = node.environment === "aligned" || node.environment === "align";
+  const gap = node.environment === "cases" || aligned ? 2 : 1;
+  const gaps = Array.from({ length: columns + 1 }, (_, boundary) => {
+    const edge = boundary === 0 || boundary === columns;
+    return rules[boundary] ? rules[boundary] + (edge ? 1 : 2) : edge ? 0 : gap;
+  });
+  const width = widths.reduce((sum, value) => sum + value, 0) + gaps.reduce((sum, value) => sum + value, 0);
   const height = Math.max(1, heights.reduce((sum, value) => sum + value, 0));
   const result = blank(width, height, Math.floor(height / 2));
   let y = 0;
   for (let rowIndex = 0;rowIndex < cells.length; rowIndex++) {
-    let x = 0;
+    let x = gaps[0];
     for (let column = 0;column < columns; column++) {
       const cell = cells[rowIndex][column];
       if (cell) {
-        const aligned = environment === "aligned" || environment === "align" || environment === "cases";
-        const offset = aligned ? column % 2 === 0 ? widths[column] - cell.width : 0 : Math.floor((widths[column] - cell.width) / 2);
+        const alignment = alignments?.[column] ?? (node.environment === "cases" ? "l" : aligned ? column % 2 === 0 ? "r" : "l" : "c");
+        const offset = alignment === "l" ? 0 : alignment === "r" ? widths[column] - cell.width : Math.floor((widths[column] - cell.width) / 2);
         overlay(result, cell, x + offset, y + ascents[rowIndex] - cell.baseline);
       }
-      x += widths[column] + gap;
+      x += widths[column] + gaps[column + 1];
     }
     y += heights[rowIndex];
   }
-  const pair = matrixDelimiters(environment);
-  return pair ? delimited(pair[0], result, pair[1]) : result;
+  let boundaryX = 0;
+  for (let boundary = 0;boundary <= columns; boundary++) {
+    for (let rule = 0;rule < (rules[boundary] ?? 0); rule++) {
+      for (let row = 0;row < height; row++)
+        set(result, boundaryX + (boundary === 0 ? 0 : 1) + rule, row, "│", context.style);
+    }
+    boundaryX += gaps[boundary] + (widths[boundary] ?? 0);
+  }
+  const pair = matrixDelimiters(node.environment);
+  return pair ? delimited(pair[0], result, pair[1], context.style) : result;
 }
-function accent(kind, body) {
+function brace(body, position, style) {
+  const over = position === "over";
+  const width = Math.max(3, body.width);
+  const result = blank(width, body.height + 1, body.baseline + (over ? 1 : 0));
+  const y = over ? 0 : body.height;
+  overlay(result, body, Math.floor((width - body.width) / 2), over ? 1 : 0);
+  horizontal(result, y, width, "─", style);
+  set(result, 0, y, over ? "╭" : "╰", style);
+  set(result, width - 1, y, over ? "╮" : "╯", style);
+  set(result, Math.floor((width - 1) / 2), y, over ? "┴" : "┬", style);
+  return result;
+}
+function accent(kind, body, style) {
   if (kind === "underline") {
     const result2 = blank(body.width, body.height + 1, body.baseline);
     overlay(result2, body, 0, 0);
-    horizontal(result2, body.height, body.width, "─");
+    horizontal(result2, body.height, body.width, "─", style);
     return result2;
   }
   const result = blank(body.width, body.height + 1, body.baseline + 1);
   overlay(result, body, 0, 1);
   const mark = kind === "hat" || kind === "widehat" ? body.width === 1 ? "^" : "⌢" : kind === "bar" || kind === "overline" ? "─" : kind === "vec" ? "→" : kind === "tilde" ? "~" : kind === "dot" ? "·" : "¨";
   if (kind === "bar" || kind === "overline")
-    horizontal(result, 0, body.width, mark);
+    horizontal(result, 0, body.width, mark, style);
   else
-    set(result, Math.max(0, Math.floor((body.width - stringWidth(mark)) / 2)), 0, mark);
+    set(result, Math.max(0, Math.floor((body.width - stringWidth(mark)) / 2)), 0, mark, style);
   return result;
 }
-function delimiter(value, height, baseline, left) {
+function delimiter(value, height, baseline, left, style) {
   const base = value.replace(/\p{Mark}+$/u, "");
   if (!base)
     return blank(0, height, baseline);
   if (height === 1)
-    return textBox(value);
+    return textBox(value, style);
   const glyphs = delimiterGlyphs(base, left);
   const suffix = value.slice(base.length);
   const result = blank(Math.max(...glyphs.map((glyph) => stringWidth(glyph + suffix))), height, baseline);
   for (let y = 0;y < height; y++)
-    set(result, 0, y, y === 0 ? glyphs[0] : y === height - 1 ? glyphs[2] : glyphs[1]);
+    set(result, 0, y, y === 0 ? glyphs[0] : y === height - 1 ? glyphs[2] : glyphs[1], style);
   if ((base === "{" || base === "}") && height >= 3)
-    set(result, 0, Math.floor(height / 2), left ? "⎨" : "⎬");
+    set(result, 0, Math.floor(height / 2), left ? "⎨" : "⎬", style);
   if (suffix)
-    set(result, 0, baseline, result.cells[baseline][0] + suffix);
+    set(result, 0, baseline, result.cells[baseline][0].char + suffix, style);
   return result;
 }
 function delimiterGlyphs(value, left) {
@@ -282,12 +349,12 @@ function delimiterGlyphs(value, left) {
 function matrixDelimiters(value) {
   return value === "pmatrix" ? ["(", ")"] : value === "bmatrix" ? ["[", "]"] : value === "Bmatrix" ? ["{", "}"] : value === "vmatrix" ? ["│", "│"] : value === "Vmatrix" ? ["║", "║"] : value === "cases" ? ["{", ""] : undefined;
 }
-function textBox(text) {
+function textBox(text, style) {
   const parts = Array.from(graphemeSegmenter.segment(text), (part) => part.segment);
   const result = blank(parts.reduce((sum, part) => sum + stringWidth(part), 0), 1, 0);
   let x = 0;
   for (const part of parts) {
-    set(result, x, 0, part);
+    set(result, x, 0, part, style);
     x += stringWidth(part);
   }
   return result;
@@ -318,13 +385,13 @@ function overlay(target, source, x, y) {
       if (source.cells[sy][sx])
         target.cells[y + sy][x + sx] = source.cells[sy][sx];
 }
-function set(box, x, y, value) {
+function set(box, x, y, char, style) {
   if (x >= 0 && y >= 0 && x < box.width && y < box.height)
-    box.cells[y][x] = value;
+    box.cells[y][x] = style ? { char, style } : { char };
 }
-function horizontal(box, y, width, value) {
+function horizontal(box, y, width, value, style) {
   for (let x = 0;x < width; x++)
-    set(box, x, y, value);
+    set(box, x, y, value, style);
 }
 function simpleText(node) {
   if (node.type === "symbol" || node.type === "text" || node.type === "operator")
@@ -352,6 +419,8 @@ function roleOf(node) {
     return "operator";
   if (node.type === "scripts")
     return roleOf(node.base);
+  if (node.type === "variant" || node.type === "color")
+    return roleOf(node.body);
   return;
 }
 function nextRole(nodes, start) {
@@ -366,6 +435,36 @@ function needsSpace(previous, current, count) {
 function normalizedRole(role, previous, next) {
   return role === "binary" && (!previous || ["binary", "relation", "operator", "punctuation", "opening"].includes(previous) || !next || ["binary", "relation", "punctuation", "closing"].includes(next)) ? "ordinary" : role;
 }
+function applyVariant(value, variant) {
+  if (!variant || variant === "normal" || variant === "bold" || variant === "italic")
+    return value;
+  const exceptions = {
+    "double-struck": { C: "ℂ", H: "ℍ", N: "ℕ", P: "ℙ", Q: "ℚ", R: "ℝ", Z: "ℤ" },
+    script: { B: "ℬ", E: "ℰ", F: "ℱ", H: "ℋ", I: "ℐ", L: "ℒ", M: "ℳ", R: "ℛ", e: "ℯ", g: "ℊ", o: "ℴ" },
+    fraktur: { C: "ℭ", H: "ℌ", I: "ℑ", R: "ℜ", Z: "ℨ" }
+  };
+  const ranges = {
+    "double-struck": [120120, 120146, 120792],
+    script: [119964, 119990],
+    fraktur: [120068, 120094],
+    sans: [120224, 120250, 120802],
+    monospace: [120432, 120458, 120822]
+  };
+  const range = ranges[variant];
+  return Array.from(value).map((char) => {
+    const exception = exceptions[variant]?.[char];
+    if (exception)
+      return exception;
+    const code = char.codePointAt(0);
+    if (code >= 65 && code <= 90)
+      return String.fromCodePoint(range[0] + code - 65);
+    if (code >= 97 && code <= 122)
+      return String.fromCodePoint(range[1] + code - 97);
+    if (range[2] !== undefined && code >= 48 && code <= 57)
+      return String.fromCodePoint(range[2] + code - 48);
+    return char;
+  }).join("");
+}
 
 // src/math-symbols.ts
 var ordinary = {
@@ -428,7 +527,23 @@ var ordinary = {
   aleph: "ℵ",
   top: "⊤",
   bot: "⊥",
-  checkmark: "✓"
+  checkmark: "✓",
+  imath: "ı",
+  jmath: "ȷ",
+  beth: "ℶ",
+  gimel: "ℷ",
+  daleth: "ℸ",
+  measuredangle: "∡",
+  triangle: "△",
+  square: "□",
+  lozenge: "◊",
+  nexists: "∄",
+  lnot: "¬",
+  backprime: "‵",
+  clubsuit: "♣",
+  diamondsuit: "♢",
+  heartsuit: "♡",
+  spadesuit: "♠"
 };
 var binary = {
   pm: "±",
@@ -451,7 +566,16 @@ var binary = {
   wedge: "∧",
   lor: "∨",
   vee: "∨",
-  setminus: "∖"
+  setminus: "∖",
+  uplus: "⊎",
+  sqcap: "⊓",
+  sqcup: "⊔",
+  wr: "≀",
+  diamond: "⋄",
+  bigtriangleup: "△",
+  bigtriangledown: "▽",
+  triangleleft: "◁",
+  triangleright: "▷"
 };
 var relation = {
   ne: "≠",
@@ -493,7 +617,42 @@ var relation = {
   longleftrightarrow: "⟷",
   uparrow: "↑",
   downarrow: "↓",
-  updownarrow: "↕"
+  updownarrow: "↕",
+  equals: "=",
+  asymp: "≍",
+  lt: "<",
+  gt: ">",
+  prec: "≺",
+  succ: "≻",
+  preceq: "⪯",
+  succeq: "⪰",
+  sqsubset: "⊏",
+  sqsupset: "⊐",
+  sqsubseteq: "⊑",
+  sqsupseteq: "⊒",
+  owns: "∋",
+  dashv: "⊣",
+  mid: "∣",
+  smile: "⌣",
+  frown: "⌢",
+  hookleftarrow: "↩",
+  hookrightarrow: "↪",
+  leftharpoonup: "↼",
+  leftharpoondown: "↽",
+  rightharpoonup: "⇀",
+  rightharpoondown: "⇁",
+  rightleftharpoons: "⇌",
+  Longleftarrow: "⟸",
+  Longrightarrow: "⟹",
+  Longleftrightarrow: "⟺",
+  longmapsto: "⟼",
+  Uparrow: "⇑",
+  Downarrow: "⇓",
+  Updownarrow: "⇕",
+  nearrow: "↗",
+  searrow: "↘",
+  swarrow: "↙",
+  nwarrow: "↖"
 };
 var punctuation = { ldots: "…", dots: "…", cdots: "⋯", vdots: "⋮", ddots: "⋱", colon: ":" };
 function definitions(values, role) {
@@ -516,9 +675,46 @@ var operators = {
   bigcap: "⋂",
   bigcup: "⋃",
   bigvee: "⋁",
-  bigwedge: "⋀"
+  bigwedge: "⋀",
+  bigoplus: "⨁",
+  bigotimes: "⨂",
+  bigodot: "⨀"
 };
-var namedOperators = new Set(["sin", "cos", "tan", "log", "ln", "exp", "lim", "min", "max", "sup", "inf", "det", "gcd", "ker"]);
+var namedOperators = new Set([
+  "arccos",
+  "arcsin",
+  "arctan",
+  "arg",
+  "cos",
+  "cosh",
+  "cot",
+  "coth",
+  "csc",
+  "deg",
+  "det",
+  "dim",
+  "exp",
+  "gcd",
+  "hom",
+  "inf",
+  "ker",
+  "lg",
+  "lim",
+  "liminf",
+  "limsup",
+  "ln",
+  "log",
+  "max",
+  "min",
+  "mod",
+  "Pr",
+  "sec",
+  "sin",
+  "sinh",
+  "sup",
+  "tan",
+  "tanh"
+]);
 var delimiters = {
   "(": "(",
   ")": ")",
@@ -538,6 +734,16 @@ var delimiters = {
   rfloor: "⌋",
   lceil: "⌈",
   rceil: "⌉",
+  lvert: "│",
+  rvert: "│",
+  lVert: "║",
+  rVert: "║",
+  "\\{": "{",
+  "\\}": "}",
+  "/": "/",
+  "<": "<",
+  ">": ">",
+  backslash: "\\",
   ".": ""
 };
 var accents = {
@@ -571,22 +777,39 @@ var environments = new Set([
   "smallmatrix",
   "array"
 ]);
-function parseMath(source) {
-  return new Parser(source).parse();
+var variants = {
+  mathrm: "normal",
+  textrm: "normal",
+  mathnormal: "normal",
+  mathbf: "bold",
+  boldsymbol: "bold",
+  bm: "bold",
+  mathit: "italic",
+  mathsf: "sans",
+  mathtt: "monospace",
+  mathbb: "double-struck",
+  mathcal: "script",
+  mathscr: "script",
+  mathfrak: "fraktur"
+};
+function parseMath(source, options = {}) {
+  return new Parser(source, false, options.strict ?? false).parse();
 }
-function parseMathIncomplete(source) {
-  return new Parser(source, true).parse();
+function parseMathIncomplete(source, options = {}) {
+  return new Parser(source, true, options.strict ?? false).parse();
 }
 
 class Parser {
   source;
   incomplete;
+  strict;
   offset = 0;
   depth = 0;
   graphemes;
-  constructor(source, incomplete = false) {
+  constructor(source, incomplete, strict) {
     this.source = source;
     this.incomplete = incomplete;
+    this.strict = strict;
     this.graphemes = graphemeSegmenter.segment(source);
   }
   parse() {
@@ -614,14 +837,14 @@ class Parser {
           scripts2.subscript = argument;
         body.push(scripts2);
       } else {
-        const atom = this.parseAtom(body.at(-1));
+        const atom = this.parseAtom(body.at(-1), stop);
         if (atom)
           body.push(atom);
       }
     }
     return body;
   }
-  parseAtom(previous) {
+  parseAtom(previous, stop) {
     this.depth++;
     if (this.depth > MAX_NESTING_DEPTH)
       this.fail(`TeX nesting exceeds the ${MAX_NESTING_DEPTH}-level limit`);
@@ -629,26 +852,23 @@ class Parser {
       if (this.peek() === "{")
         return this.parseGroup();
       if (this.peek() === "\\") {
-        const atom = this.parseCommand(previous);
-        if (atom && "value" in atom)
-          atom.value += this.readCombiningSuffix();
+        const atom = this.parseCommand(previous, stop);
+        const value2 = atom && unwrapStyle(atom);
+        if (value2 && "value" in value2)
+          value2.value += this.readCombiningSuffix();
         return atom;
       }
       if (this.peek() === "~") {
         this.offset++;
         return { type: "space", width: 1 };
       }
-      const part = this.graphemes.containing(this.offset);
-      const literal = part.segment.slice(this.offset - part.index);
-      const boundary = literal.search(/[\\{}[\]^_~&\s]/u);
-      const value = boundary > 0 ? literal.slice(0, boundary) : literal;
-      this.offset += value.length;
+      const value = this.readLiteral();
       return { type: "symbol", value, role: inferRole(value[0]) };
     } finally {
       this.depth--;
     }
   }
-  parseCommand(previous) {
+  parseCommand(previous, stop) {
     const start = this.offset;
     const command = this.readCommand();
     if (command === "\\")
@@ -658,7 +878,20 @@ class Parser {
     if (command === "end")
       this.fail("Unexpected \\end", start);
     if (["frac", "dfrac", "tfrac", "cfrac"].includes(command)) {
-      return { type: "fraction", numerator: this.parseArgument(), denominator: this.parseArgument(), bar: true };
+      this.skipWhitespace();
+      const alignment = command === "cfrac" && this.peek() === "[" ? /^\[([lr]?)(\]|$)/.exec(this.source.slice(this.offset)) : undefined;
+      if (alignment === null || alignment && !alignment[2] && (!this.incomplete || this.offset + alignment[0].length !== this.source.length)) {
+        this.fail("Unsupported \\cfrac alignment; expected [l], [r], or []");
+      }
+      if (alignment)
+        this.offset += alignment[0].length;
+      return {
+        type: "fraction",
+        numerator: this.parseArgument(),
+        denominator: this.parseArgument(),
+        bar: true,
+        ...alignment?.[1] ? { numeratorAlign: alignment[1] === "l" ? "left" : "right" } : {}
+      };
     }
     if (["binom", "dbinom", "tbinom"].includes(command)) {
       return { type: "delimited", left: "(", body: { type: "fraction", numerator: this.parseArgument(), denominator: this.parseArgument(), bar: false }, right: ")" };
@@ -673,16 +906,19 @@ class Parser {
       this.fail("Unexpected \\right", start);
     if (command === "middle")
       return { type: "symbol", value: this.readDelimiter() };
-    if (command in accents)
+    if (Object.hasOwn(accents, command))
       return { type: "accent", accent: accents[command], body: this.parseArgument() };
-    if (["mathrm", "mathbf", "mathit", "mathsf", "mathtt", "mathbb", "mathcal", "mathfrak"].includes(command)) {
-      return this.parseArgument();
+    if (Object.hasOwn(variants, command)) {
+      return { type: "variant", variant: variants[command], body: command === "textrm" ? { type: "text", value: this.readTextGroup() } : this.parseArgument() };
     }
-    if (["text", "textrm", "mbox"].includes(command)) {
-      return { type: "text", value: this.readRawGroup().replace(/\\([{}%#$&_])/g, "$1").replaceAll("~", " ") };
+    if (command === "text" || command === "mbox")
+      return { type: "text", value: this.readTextGroup() };
+    if (command === "operatorname") {
+      const limits = this.peek() === "*";
+      if (limits)
+        this.offset++;
+      return { type: "operator", value: this.readTextGroup(), limits };
     }
-    if (command === "operatorname")
-      return { type: "operator", value: this.readRawGroup(), limits: false };
     if (command === "overset" || command === "stackrel") {
       const over = this.parseArgument();
       return { type: "overunder", over, base: this.parseArgument() };
@@ -691,14 +927,39 @@ class Parser {
       const under = this.parseArgument();
       return { type: "overunder", under, base: this.parseArgument() };
     }
+    if (command === "overbrace" || command === "underbrace") {
+      return { type: "brace", body: this.parseArgument(), position: command === "overbrace" ? "over" : "under" };
+    }
+    if (command === "textcolor" || command === "color") {
+      const color = this.readRawGroup().value;
+      return { type: "color", color, body: command === "textcolor" ? this.parseArgument() : row(this.parseRow(stop)) };
+    }
     if (command === "not") {
       const target = this.parseArgument();
-      if (target.type === "symbol")
-        return { ...target, value: negate(target.value) };
+      const symbol = unwrapStyle(target);
+      if (symbol.type === "symbol") {
+        symbol.value = negate(symbol.value);
+        return target;
+      }
       return { type: "row", body: [{ type: "symbol", value: "¬" }, target] };
     }
+    if (command === "pmod") {
+      return { type: "row", body: [{ type: "space", width: 1 }, { type: "text", value: "(mod " }, this.parseArgument(), { type: "text", value: ")" }] };
+    }
+    if (command === "mod" || command === "bmod")
+      return { type: "operator", value: "mod", limits: false };
+    if (command === "displaylines") {
+      this.skipWhitespace();
+      if (this.incomplete && this.done())
+        return { type: "matrix", environment: "gathered", rows: [[placeholder()]] };
+      this.expect("{");
+      return this.parseMatrix("gathered", "}");
+    }
     if (command === "limits" || command === "nolimits") {
-      const base = previous?.type === "scripts" ? previous.base : previous;
+      let base = previous;
+      while (base?.type === "variant" || base?.type === "color" || base?.type === "scripts") {
+        base = base.type === "scripts" ? base.base : base.body;
+      }
       if (base?.type === "operator")
         base.limits = command === "limits";
       return;
@@ -707,46 +968,42 @@ class Parser {
       return;
     if (/^(?:big|Big|bigg|Bigg)[lrm]?$/.test(command))
       return { type: "symbol", value: this.readDelimiter() };
-    if (command in spacing)
+    if (Object.hasOwn(spacing, command))
       return { type: "space", width: spacing[command] };
-    if (command in symbols)
+    if (Object.hasOwn(symbols, command))
       return { type: "symbol", ...symbols[command] };
-    if (command in operators)
+    if (Object.hasOwn(operators, command))
       return { type: "operator", value: operators[command], limits: command.includes("int") ? false : "display" };
     if (namedOperators.has(command))
-      return { type: "operator", value: command, limits: ["lim", "min", "max"].includes(command) ? "display" : false };
-    if (command in delimiters)
+      return { type: "operator", value: command, limits: command.startsWith("lim") || ["min", "max"].includes(command) ? "display" : false };
+    if (Object.hasOwn(delimiters, command))
       return { type: "symbol", value: delimiters[`\\${command}`] ?? delimiters[command] };
     if (["{", "}", "%", "#", "$", "&", "_", "backslash"].includes(command))
       return { type: "symbol", value: command === "backslash" ? "\\" : command };
+    if (command === " ")
+      return { type: "space", width: 1 };
+    if (this.strict)
+      this.fail(`Unsupported command \\${command}`, start);
     return { type: "text", value: `\\${command}` };
   }
   parseEnvironment() {
-    const rawName = this.readRawGroup();
+    const rawName = this.readRawGroup().value;
     const name = rawName.replace(/\*$/, "");
     if (!environments.has(name))
       this.fail(`Unsupported TeX environment: ${rawName}`);
-    if (name === "array") {
-      this.skipWhitespace();
-      if (this.peek() === "{")
-        this.readRawGroup();
-    }
+    return this.parseMatrix(name, `\\end{${rawName}}`, name === "array" ? this.readArrayColumns() : undefined);
+  }
+  parseMatrix(environment, end, columns) {
     const rows = [];
     let cells = [];
     while (!this.done()) {
       this.skipWhitespace();
       if (this.done())
         break;
-      if (this.isEnd(rawName)) {
-        this.offset += `\\end{${rawName}}`.length;
-        if (cells.length || !rows.length)
-          rows.push(cells);
-        return { type: "matrix", rows, environment: name };
-      }
+      if (this.source.startsWith(end, this.offset) && !cells.length)
+        break;
       const start = this.offset;
-      cells.push(row(this.parseRow(() => this.peek() === "&" || this.source.startsWith("\\\\", this.offset) || this.source.startsWith("\\end{", this.offset))));
-      if (this.offset === start)
-        this.fail(`Unexpected token in ${rawName}`);
+      cells.push(row(this.parseRow(() => this.peek() === "&" || this.source.startsWith("\\\\", this.offset) || this.source.startsWith(end, this.offset) || this.isCommand("end"))));
       this.skipWhitespace();
       if (this.peek() === "&") {
         this.offset++;
@@ -762,15 +1019,29 @@ class Parser {
         cells = [];
         continue;
       }
+      if (this.source.startsWith(end, this.offset))
+        break;
+      if (this.offset === start)
+        this.fail(`Unexpected token in ${environment}`);
     }
-    if (this.incomplete) {
-      if (cells.length)
-        rows.push(cells);
-      else if (!rows.length)
-        rows.push([placeholder()]);
-      return { type: "matrix", rows, environment: name };
+    const closed = this.source.startsWith(end, this.offset);
+    if (!closed && !(this.incomplete && this.done()))
+      this.fail(`Unclosed TeX environment: ${environment}`);
+    if (closed)
+      this.offset += end.length;
+    if (!closed && !rows.length && !cells.length)
+      cells.push(placeholder());
+    if (cells.length || !rows.length)
+      rows.push(cells);
+    return { type: "matrix", rows, environment, ...columns !== undefined ? { columns } : {} };
+  }
+  readArrayColumns() {
+    const group = this.readRawGroup();
+    const columns = group.value.replace(/\s/g, "");
+    if (/[^lcr|]/.test(columns) || !/[lcr]/.test(columns) && group.closed) {
+      this.fail("Unsupported array columns; expected l, c, r, and |");
     }
-    this.fail(`Unclosed TeX environment: ${rawName}`);
+    return columns;
   }
   parseLeftRight() {
     const left = this.readDelimiter();
@@ -794,7 +1065,7 @@ class Parser {
       }
       if (this.peek() === "}")
         this.fail("Unexpected closing TeX group");
-      const argument = this.peek() === "{" ? this.parseGroup() : this.parseAtom();
+      const argument = this.parseAtom();
       if (argument)
         return argument;
     }
@@ -826,22 +1097,51 @@ class Parser {
     this.offset++;
     return result;
   }
-  readRawGroup() {
+  readTextGroup() {
+    const group = this.readRawGroup(true);
+    return (group.value || (group.closed ? "" : "□")).replace(/\\([A-Za-z@]+|.)/g, (match, command) => {
+      if ("{}%#$&_ ".includes(command))
+        return command;
+      if (command === "textbackslash")
+        return "\\";
+      if (command === "!")
+        return "";
+      if (Object.hasOwn(spacing, command))
+        return " ".repeat(Math.max(1, spacing[command]));
+      return match;
+    }).replaceAll("~", " ");
+  }
+  readRawGroup(preserveComments = false) {
     this.skipWhitespace();
+    if (this.incomplete && this.done())
+      return { value: "", closed: false };
     this.expect("{");
-    const start = this.offset;
+    let start = this.offset;
+    const parts = [];
     let depth = 1;
     while (!this.done()) {
       const char = this.source[this.offset++];
+      if (char === "%" && !preserveComments && !this.escaped(this.offset - 1)) {
+        parts.push(this.source.slice(start, this.offset - 1));
+        while (!this.done() && !/[\r\n]/.test(this.peek()))
+          this.offset++;
+        if (this.peek() === "\r")
+          this.offset++;
+        if (this.peek() === `
+`)
+          this.offset++;
+        start = this.offset;
+        continue;
+      }
       if (char === "{" && !this.escaped(this.offset - 1))
         depth++;
       else if (char === "}" && !this.escaped(this.offset - 1) && --depth === 0)
-        return this.source.slice(start, this.offset - 1);
+        return { value: parts.join("") + this.source.slice(start, this.offset - 1), closed: true };
       if (depth > MAX_NESTING_DEPTH)
         this.fail(`TeX nesting exceeds the ${MAX_NESTING_DEPTH}-level limit`);
     }
     if (this.incomplete)
-      return this.source.slice(start) || "□";
+      return { value: parts.join("") + this.source.slice(start), closed: false };
     this.fail("Unclosed TeX group", start);
   }
   readCommand() {
@@ -868,11 +1168,32 @@ class Parser {
     if (this.peek() === "}")
       this.fail("Unexpected closing TeX group");
     if (this.peek() === "\\") {
+      const start = this.offset;
       const command = this.readCommand();
-      return (delimiters[`\\${command}`] ?? delimiters[command] ?? command) + this.readCombiningSuffix();
+      if (Object.hasOwn(delimiters, command))
+        return (delimiters[`\\${command}`] ?? delimiters[command]) + this.readCombiningSuffix();
+      if (this.incomplete && this.done() && this.offset === start + 1)
+        return "";
+      if (this.strict)
+        this.fail(`Unsupported delimiter \\${command}`, start);
+      return command + this.readCombiningSuffix();
     }
-    const token = this.source[this.offset++] ?? "";
-    return (delimiters[token] ?? token) + this.readCombiningSuffix();
+    const token = this.peek();
+    if (Object.hasOwn(delimiters, token)) {
+      this.offset++;
+      return delimiters[token] + this.readCombiningSuffix();
+    }
+    if (this.strict)
+      this.fail(`Unsupported delimiter ${token}`);
+    return this.readLiteral();
+  }
+  readLiteral() {
+    const part = this.graphemes.containing(this.offset);
+    const literal = part.segment.slice(this.offset - part.index);
+    const boundary = literal.search(/[\\{}[\]^_~&%\s]/u);
+    const value = boundary > 0 ? literal.slice(0, boundary) : literal;
+    this.offset += value.length;
+    return value;
   }
   readCombiningSuffix() {
     if (this.done())
@@ -888,17 +1209,22 @@ class Parser {
       return;
     while (!this.done() && this.source[this.offset++] !== "]") {}
   }
-  isEnd(name) {
-    return this.source.startsWith(`\\end{${name}}`, this.offset);
-  }
   isCommand(name) {
     if (!this.source.startsWith(`\\${name}`, this.offset))
       return false;
     return !/[A-Za-z@]/.test(this.source[this.offset + name.length + 1] ?? "");
   }
   skipWhitespace() {
-    while (/\s/.test(this.peek()))
-      this.offset++;
+    while (!this.done()) {
+      if (/\s/.test(this.peek())) {
+        this.offset++;
+        continue;
+      }
+      if (this.peek() !== "%")
+        return;
+      while (!this.done() && !/[\r\n]/.test(this.peek()))
+        this.offset++;
+    }
   }
   done() {
     return this.offset >= this.source.length;
@@ -927,6 +1253,11 @@ function row(body) {
 function placeholder() {
   return { type: "symbol", value: "□" };
 }
+function unwrapStyle(node) {
+  while (node.type === "variant" || node.type === "color")
+    node = node.body;
+  return node;
+}
 function inferRole(value) {
   if ("+-*/×÷±∓".includes(value))
     return "binary";
@@ -941,7 +1272,24 @@ function inferRole(value) {
   return "ordinary";
 }
 function negate(value) {
-  return { "=": "≠", "<": "≮", ">": "≯", "≤": "≰", "≥": "≱", "∈": "∉", "∋": "∌", "⊂": "⊄", "⊃": "⊅" }[value] ?? `${value}̸`;
+  return {
+    "=": "≠",
+    "<": "≮",
+    ">": "≯",
+    "≤": "≰",
+    "≥": "≱",
+    "∈": "∉",
+    "∋": "∌",
+    "⊂": "⊄",
+    "⊃": "⊅",
+    "≡": "≢",
+    "≈": "≉",
+    "∼": "≁",
+    "⊆": "⊈",
+    "⊇": "⊉",
+    "∣": "∤",
+    "∥": "∦"
+  }[value] ?? `${value}̸`;
 }
 
 // src/unicode-tex-backend.ts
@@ -971,18 +1319,19 @@ function renderUnicode(request, incomplete) {
   }
   const widthMax = Math.floor(request.widthMax);
   const heightMax = Math.floor(request.heightMax);
-  const node = incomplete ? parseMathIncomplete(request.formula) : parseMath(request.formula);
-  const text = boxToString(layoutMath(node, request.display), widthMax, heightMax);
+  const options = { strict: request.strict };
+  const node = incomplete ? parseMathIncomplete(request.formula, options) : parseMath(request.formula, options);
+  const output = boxToOutput(layoutMath(node, request.display), widthMax, heightMax);
   assertNotAborted(request.signal);
-  if (!text)
+  if (!output.text)
     throw new Error("TeX formula produced no Unicode output");
-  if (text.length > OUTPUT_LENGTH_MAX)
+  if (output.text.length > OUTPUT_LENGTH_MAX)
     throw new Error(`Unicode TeX output exceeds ${OUTPUT_LENGTH_MAX} characters`);
-  const lines = text.split(`
+  const lines = output.text.split(`
 `);
   return {
     kind: "unicode",
-    text,
+    ...output,
     columns: Math.max(1, ...lines.map((line) => stringWidth2(line))),
     rows: lines.length
   };
@@ -1031,6 +1380,7 @@ class TexRenderable extends BoxRenderable {
   ready;
   backend;
   fallback;
+  strict;
   widthMax;
   heightMax;
   autoWidth;
@@ -1059,6 +1409,7 @@ class TexRenderable extends BoxRenderable {
       imageOptions,
       onError,
       streaming = false,
+      strict = false,
       ...boxOptions
     } = options;
     super(context, {
@@ -1075,6 +1426,7 @@ class TexRenderable extends BoxRenderable {
     this._display = display;
     this.backend = backend;
     this.fallback = fallback;
+    this.strict = strict;
     this.widthMax = dimensionMax(widthMax);
     this.heightMax = dimensionMax(heightMax);
     this.autoWidth = options.width == null || options.width === "auto";
@@ -1212,18 +1564,24 @@ class TexRenderable extends BoxRenderable {
       background,
       widthMax: this.widthMax,
       heightMax: this.heightMax,
-      signal: controller.signal
+      signal: controller.signal,
+      strict: this.strict
     };
     if (this._streaming) {
-      this.applyOutput(this.previewOutput(request));
+      try {
+        this.applyOutput(this.previewOutput(request));
+      } catch {
+        this.applyOutput(rawSourceOutput(formula, this.widthMax, this.heightMax));
+      }
       return;
     }
     let unicodeOutput = null;
     const synchronousBackend = this.backend instanceof UnicodeTexBackend && this.backend.render === UNICODE_RENDER && this.backend.renderSync === UNICODE_RENDER_SYNC ? this.backend : null;
     if (!synchronousBackend) {
       try {
-        unicodeOutput = DEFAULT_PREVIEW_BACKEND.renderSync(request);
-        this.applyOutput(unicodeOutput);
+        const preview = DEFAULT_PREVIEW_BACKEND.renderSync(request);
+        this.applyOutput(preview);
+        unicodeOutput = preview;
       } catch {}
     }
     try {
@@ -1285,7 +1643,12 @@ class TexRenderable extends BoxRenderable {
   applyOutput(output) {
     const dimensions = output.kind === "image" ? measureTex(output.image.width, output.image.height, this.display, this.widthMax, this.heightMax) : { columns: Math.min(this.widthMax, output.columns), rows: Math.min(this.heightMax, output.rows) };
     const child = output.kind === "image" ? this.createImageChild(output.image, dimensions) : new TextRenderable(this._ctx, {
-      content: output.text,
+      content: output.spans ? new StyledText(output.spans.map((span) => ({
+        __isChunk: true,
+        text: span.text,
+        fg: span.color === undefined ? undefined : parseColor(span.color),
+        attributes: createTextAttributes({ bold: span.bold, italic: span.italic })
+      }))) : output.text,
       fg: this._foreground,
       bg: this._background,
       wrapMode: "none",