@vyaz/renderer 0.0.14 → 0.3.0

package/dist/index.browser.js

@@ -22,6 +22,19 @@ var PRESETS = {
   preserve: { structure: "expanded", spacing: "preserve", defaultFit: "frag" },
   glyph: { structure: "glyph", spacing: "preserve", defaultFit: "none" }
 };
+function normalizeDeg(d) {
+  const r = d % 360;
+  return r < 0 ? r + 360 : r;
+}
+function rotationTransform(rotate, w, h) {
+  if (rotate === 90)
+    return { transform: `translate(${fmt(h)} 0) rotate(90)`, width: h, height: w };
+  if (rotate === 270)
+    return { transform: `translate(0 ${fmt(w)}) rotate(270)`, width: h, height: w };
+  if (rotate === 180)
+    return { transform: `translate(${fmt(w)} ${fmt(h)}) rotate(180)`, width: w, height: h };
+  return { transform: `rotate(${fmt(rotate)} ${fmt(w / 2)} ${fmt(h / 2)})`, width: w, height: h };
+}
 function escapeXml(text) {
   return text.replace(/&/g, "&#38;").replace(/</g, "&#60;").replace(/>/g, "&#62;").replace(/"/g, "&#34;");
 }
@@ -93,7 +106,7 @@ function resolveOptions(opts) {
     console.warn(`SVGRenderer: fit="frag" downgraded to "text" when structure="flat"`);
     fit = "text";
   }
-  return { structure, spacing, style, fit, sizingHorizontal, sizingVertical, width: opts.width, height: opts.height, className: opts.className, contentPadding: opts.contentPadding ?? 0, debug: opts.debug };
+  return { structure, spacing, style, fit, sizingHorizontal, sizingVertical, width: opts.width, height: opts.height, className: opts.className, contentPadding: opts.contentPadding ?? 0, debug: opts.debug, glyphDecorations: opts.glyphDecorations ?? true, inlineBoxes: opts.inlineBoxes };
 }
 function resolveSize(lines, opts) {
   const needsBBox = opts.sizingHorizontal === "content" || opts.sizingVertical === "content";
@@ -223,13 +236,12 @@ function buildTspanAttrs(span, x, currentStyle) {
   }
   return { attrs, newStyle: s };
 }
-function buildGlyphPositions(span, _lineX) {
+function buildGlyphPositions(span, spanDX) {
   if (!span.glyphAdvances || span.glyphAdvances.length === 0) {
-    return "";
+    return (span.type === "marker" || span.type === "space") && span.text ? fmt(span.x + spanDX, 1) : "";
   }
   const ls = span.style.letterSpacing || 0;
-  const spanX = span.x;
-  let xPos = spanX;
+  let xPos = span.x + spanDX;
   const positions = [fmt(xPos, 1)];
   for (let i = 0;i < span.glyphAdvances.length - 1; i++) {
     xPos += span.glyphAdvances[i] + ls;
@@ -324,6 +336,8 @@ class SvgAstBuilder {
         x: fmt(x),
         y: fmt(yOverride)
       };
+      if (runId)
+        attrs.id = runId;
       if (this.opts.style === "css") {
         let css = `font-family: '${s.fontFamily}', sans-serif; font-size: ${fmt(fontSizeOverride)}px; fill: ${colorToRGB(s.color)}; font-weight: ${s.fontWeight}`;
         if (s.fontStyle === "italic")
@@ -399,6 +413,34 @@ ${debugMarkup}
     });
     this.root.children.push(rect);
   }
+  addInlineBox(x, y, width, height, fragment) {
+    this.closeText();
+    if (fragment) {
+      this.root.children.push(rawNode(`  <g transform="translate(${fmt(x)} ${fmt(y)})">${fragment}</g>
+`));
+      return;
+    }
+    this.root.children.push(el("rect", {
+      x: fmt(x),
+      y: fmt(y),
+      width: fmt(width),
+      height: fmt(height),
+      fill: "#ccc",
+      stroke: "#999",
+      "stroke-dasharray": "2,2"
+    }));
+  }
+  addDecorationLine(x, width, y, color, thickness) {
+    this.closeText();
+    this.root.children.push(el("line", {
+      x1: fmt(x),
+      y1: fmt(y),
+      x2: fmt(x + width),
+      y2: fmt(y),
+      stroke: color,
+      "stroke-width": fmt(thickness)
+    }));
+  }
   addRawLine(lineStr) {
     this.closeText();
     this.root.children.push(rawNode(lineStr));
@@ -530,40 +572,127 @@ function getSpanBackgroundAttrs(span, baselineY) {
   const h = span.fontMetrics.ascent + span.fontMetrics.descent;
   return { x, y, w, h, fill: span.style.backgroundColor };
 }
-function renderToSVG(lines, options = {}) {
-  const opts = resolveOptions(options);
+function renderToSVG(input, options = {}) {
+  let lines;
+  let resolvedOptions;
+  const xf = options.transform ?? (Array.isArray(input) ? undefined : input.transform);
+  const rotate = xf ? normalizeDeg(xf.rotate) : 0;
+  const applyTransform = xf !== undefined && rotate !== 0;
+  if (Array.isArray(input)) {
+    lines = input;
+    resolvedOptions = options;
+  } else {
+    lines = input.lines;
+    const callerSizes = options.sizing !== undefined || options.width !== undefined || options.height !== undefined;
+    if (callerSizes) {
+      resolvedOptions = options;
+    } else if (applyTransform) {
+      resolvedOptions = {
+        sizing: { horizontal: "frame", vertical: "frame" },
+        width: xf.layoutBox.width,
+        height: xf.layoutBox.height,
+        ...options
+      };
+    } else {
+      const fw = input.fit.horizontal === "frame" && input.frame.width != null;
+      const fh = input.fit.vertical === "frame" && input.frame.height != null;
+      resolvedOptions = {
+        sizing: {
+          horizontal: fw ? "frame" : "content",
+          vertical: fh ? "frame" : "content"
+        },
+        width: fw ? input.frame.width : input.content.width,
+        height: fh ? input.frame.height : input.content.height,
+        ...options
+      };
+    }
+  }
+  const opts = resolveOptions(resolvedOptions);
   const { width: svgWidth, height: svgHeight, viewBox, frameWidth, frameHeight } = resolveSize(lines, opts);
   const builder = new SvgAstBuilder(svgWidth, svgHeight, opts, viewBox);
   for (const line of lines) {
     const baselineY = line.y + line.baseline;
+    const bgFirstTextX = line.spans.find((s) => s.type === "text" || s.type === "marker")?.x ?? 0;
     for (const span of line.spans) {
       if (!span.text || !span.style.backgroundColor)
         continue;
       const bg = getSpanBackgroundAttrs(span, baselineY);
       if (bg) {
-        const rx = line.x + bg.x;
+        const rx = line.x + bg.x - bgFirstTextX;
         builder.addBackgroundRect(rx, bg.y, bg.w, bg.h, bg.fill);
       }
     }
+    for (const span of line.spans) {
+      const iw = span.inlineWidget;
+      if (!iw)
+        continue;
+      const ibx = line.x + span.x - bgFirstTextX;
+      const iby = baselineY - iw.height + (iw.baselineOffset || 0);
+      builder.addInlineBox(ibx, iby, iw.width, iw.height, iw.id ? opts.inlineBoxes?.[iw.id] : undefined);
+    }
     if (opts.structure === "glyph") {
+      const glyphFirstTextX = line.spans.find((s) => s.type === "text" || s.type === "marker")?.x ?? 0;
+      const glyphSpanDX = line.x - glyphFirstTextX;
       let currentRunIdx = -1;
+      let currentSig = "";
       for (const span of line.spans) {
-        if (!span.text)
+        if (!span.text || span.inlineWidget)
           continue;
         const runIdx = span.itemIndex;
-        if (runIdx !== currentRunIdx) {
+        const sig = styleSignature(span);
+        if (runIdx !== currentRunIdx || sig !== currentSig) {
           builder.closeText();
           const runId = span.tag ? `${span.tag}-${runIdx}` : undefined;
-          builder.openText(line, span, runId);
+          const offset = span.fontMetrics.baselineOffset || 0;
+          if (offset !== 0) {
+            const targetY = Math.round((line.y + line.baseline + offset) * 100) / 100;
+            builder.openText(line, span, runId, targetY, span.fontMetrics.fontSize);
+          } else {
+            builder.openText(line, span, runId);
+          }
           currentRunIdx = runIdx;
+          currentSig = sig;
         }
-        builder.addGlyphTspan(span, line.x);
+        builder.addGlyphTspan(span, glyphSpanDX);
       }
       builder.closeText();
+      if (opts.glyphDecorations) {
+        let cur = null;
+        const flushDeco = () => {
+          if (!cur)
+            return;
+          const w = cur.end - cur.x;
+          if (cur.u)
+            builder.addDecorationLine(cur.x, w, cur.baseY + 2, cur.color, 1);
+          if (cur.s)
+            builder.addDecorationLine(cur.x, w, cur.baseY - cur.ascent * 0.4, cur.color, 1);
+          cur = null;
+        };
+        for (const span of line.spans) {
+          if (!span.text || span.inlineWidget)
+            continue;
+          const u = !!span.style.underline;
+          const s = !!span.style.strikethrough;
+          if (!u && !s) {
+            flushDeco();
+            continue;
+          }
+          const color = span.style.color || "#000000";
+          const x = span.x + glyphSpanDX;
+          const baseY = line.y + line.baseline;
+          if (cur && cur.u === u && cur.s === s && cur.color === color && Math.abs(cur.end - x) < 0.01) {
+            cur.end = x + span.width;
+          } else {
+            flushDeco();
+            cur = { x, end: x + span.width, baseY, ascent: span.fontMetrics.ascent, color, u, s };
+          }
+        }
+        flushDeco();
+      }
     } else if (opts.structure === "flat") {
       const groups = [];
       for (const span of line.spans) {
-        if (!span.text)
+        if (!span.text || span.inlineWidget)
           continue;
         const offset = span.fontMetrics.baselineOffset || 0;
         const targetY = Math.round((line.y + line.baseline + offset) * 100) / 100;
@@ -607,7 +736,7 @@ function renderToSVG(lines, options = {}) {
     } else {
       const groups = [];
       for (const span of line.spans) {
-        if (!span.text)
+        if (!span.text || span.inlineWidget)
           continue;
         const offset = span.fontMetrics.baselineOffset || 0;
         const targetY = Math.round((line.y + line.baseline + offset) * 100) / 100;
@@ -649,11 +778,13 @@ function renderToSVG(lines, options = {}) {
         } else {
           builder.openText(line, baseSpan);
         }
+        const lineFirstTextX = line.spans.find((s) => s.type === "text" || s.type === "marker")?.x ?? 0;
+        const spanDX = line.x - lineFirstTextX;
         let currentStyle = null;
         for (const span of group.spans) {
-          if (!span.text)
+          if (!span.text || span.inlineWidget)
             continue;
-          const x = span.x;
+          const x = span.x + spanDX;
           const shouldRender = span.type !== "space" || opts.spacing === "preserve";
           if (shouldRender) {
             const newStyle = builder.addTspan(span, x, currentStyle);
@@ -673,6 +804,14 @@ function renderToSVG(lines, options = {}) {
     const debugSvg = renderDebugToSVG(lines, opts.debug, frameSize, contentSize, options.columns, options.paddingLeft, 0);
     builder.addDebug(debugSvg);
   }
+  if (applyTransform) {
+    const { transform, width: visW, height: visH } = rotationTransform(rotate, xf.layoutBox.width, xf.layoutBox.height);
+    const kids = builder.root.children.splice(0, builder.root.children.length);
+    builder.root.children.push(el("g", { transform }, kids));
+    builder.root.attrs.width = fmt(visW);
+    builder.root.attrs.height = fmt(visH);
+    builder.root.attrs.viewBox = `0 0 ${fmt(visW)} ${fmt(visH)}`;
+  }
   return serializeSvg(builder.root);
 }
 function renderParagraphToSVG(lines, paragraphWidth, paragraphHeight, options) {
@@ -689,6 +828,147 @@ function renderResultToSVG(result, options) {
     ...options
   });
 }
+// src/TableRenderer.ts
+function withOverflowVisible(svg) {
+  return svg.replace(/^<svg /, '<svg style="overflow:visible" ');
+}
+function rect(x, y, w, h, attrs) {
+  const a = Object.entries(attrs).map(([k, v]) => `${k}="${v}"`).join(" ");
+  return `  <rect x="${fmt(x)}" y="${fmt(y)}" width="${fmt(Math.max(0, w))}" height="${fmt(Math.max(0, h))}" ${a} />
+`;
+}
+function line(x1, y1, x2, y2, color, width, extra = {}) {
+  const extraAttrs = Object.entries(extra).map(([k, v]) => ` ${k}="${v}"`).join("");
+  return `  <line x1="${fmt(x1)}" y1="${fmt(y1)}" x2="${fmt(x2)}" y2="${fmt(y2)}" stroke="${color}" stroke-width="${fmt(width)}"${extraAttrs} />
+`;
+}
+function dashAttrs(b, side) {
+  const attrs = {};
+  const pattern = b.patterns?.[side];
+  if (pattern?.length)
+    attrs["stroke-dasharray"] = pattern.join(",");
+  const shape = b.shapes?.[side];
+  if (shape && shape !== "butt")
+    attrs["stroke-linecap"] = shape;
+  return attrs;
+}
+function dashUniform(b) {
+  const eq = (a, c) => (a?.join(",") ?? "") === (c?.join(",") ?? "");
+  const p = b.patterns;
+  const patternsUniform = !p || eq(p.top, p.right) && eq(p.right, p.bottom) && eq(p.bottom, p.left);
+  const s = b.shapes;
+  const shapesUniform = !s || s.top === s.right && s.right === s.bottom && s.bottom === s.left;
+  return patternsUniform && shapesUniform;
+}
+function borderMarkup(x, y, w, h, b) {
+  const { widths: wd, colors: co } = b;
+  const uniform = wd.top === wd.right && wd.right === wd.bottom && wd.bottom === wd.left && co.top === co.right && co.right === co.bottom && co.bottom === co.left && dashUniform(b);
+  if (uniform) {
+    if (wd.top <= 0)
+      return "";
+    const inset = wd.top / 2;
+    const attrs = { fill: "none", stroke: co.top, "stroke-width": fmt(wd.top), ...dashAttrs(b, "top") };
+    if (b.rx !== undefined)
+      attrs.rx = fmt(b.rx);
+    if (b.ry !== undefined)
+      attrs.ry = fmt(b.ry);
+    return rect(x + inset, y + inset, w - wd.top, h - wd.top, attrs);
+  }
+  let out = "";
+  if (wd.top > 0)
+    out += line(x, y + wd.top / 2, x + w, y + wd.top / 2, co.top, wd.top, dashAttrs(b, "top"));
+  if (wd.right > 0)
+    out += line(x + w - wd.right / 2, y, x + w - wd.right / 2, y + h, co.right, wd.right, dashAttrs(b, "right"));
+  if (wd.bottom > 0)
+    out += line(x, y + h - wd.bottom / 2, x + w, y + h - wd.bottom / 2, co.bottom, wd.bottom, dashAttrs(b, "bottom"));
+  if (wd.left > 0)
+    out += line(x + wd.left / 2, y, x + wd.left / 2, y + h, co.left, wd.left, dashAttrs(b, "left"));
+  return out;
+}
+function contentWidthOf(cell) {
+  const b = cell.border?.widths;
+  return Math.max(0, cell.width - cell.padding.left - cell.padding.right - (b ? b.left + b.right : 0));
+}
+function paintSlot(slot, preset, style) {
+  const { content, x, y } = slot;
+  if (content.content.width <= 0 || content.content.height <= 0 || content.lines.length === 0)
+    return "";
+  const svg = renderToSVG(content, { preset, style, sizing: "frame", width: content.content.width, height: content.content.height });
+  return `  <g transform="translate(${fmt(x)} ${fmt(y)})">${svg}</g>
+`;
+}
+function renderTableToSVG(result, opts = {}) {
+  const preset = opts.preset ?? "browser";
+  const style = opts.style;
+  const parts = [];
+  if (result.bgColor)
+    parts.push(rect(0, 0, result.width, result.height, { fill: result.bgColor }));
+  for (const row of result.rows) {
+    if (row.bgColor)
+      parts.push(rect(result.contentBox.x, row.y, result.contentBox.width, row.height, { fill: row.bgColor }));
+  }
+  for (const row of result.rows) {
+    for (const cell of row.cells) {
+      if (cell.bgColor)
+        parts.push(rect(cell.x, cell.y, cell.width, cell.height, { fill: cell.bgColor }));
+    }
+  }
+  for (const row of result.rows) {
+    if (row.border)
+      parts.push(borderMarkup(result.contentBox.x, row.y, result.contentBox.width, row.height, row.border));
+  }
+  for (const row of result.rows) {
+    for (const cell of row.cells) {
+      if (cell.border)
+        parts.push(borderMarkup(cell.x, cell.y, cell.width, cell.height, cell.border));
+    }
+  }
+  if (result.border) {
+    parts.push(borderMarkup(result.contentBox.x, result.contentBox.y, result.contentBox.width, result.contentBox.height, result.border));
+  }
+  for (const row of result.rows) {
+    for (const cell of row.cells) {
+      if (cell.before)
+        parts.push(paintSlot(cell.before, preset, style));
+      const originX = cell.x + cell.padding.left + (cell.border?.widths.left ?? 0) + cell.cx;
+      const originY = cell.y + cell.padding.top + (cell.border?.widths.top ?? 0) + cell.verticalOffset + cell.cy;
+      if (cell.nestedTable) {
+        const nestedSvg = renderTableToSVG(cell.nestedTable, { preset, style, fragment: true });
+        parts.push(`  <g transform="translate(${fmt(originX)} ${fmt(originY)})">${nestedSvg}</g>
+`);
+      } else {
+        const cw = contentWidthOf(cell);
+        const ch = cell.content.content.height;
+        if (cw > 0 && ch > 0 && cell.content.lines.length > 0) {
+          let svg = renderToSVG(cell.content, { preset, style, sizing: "frame", width: cw, height: ch });
+          if (cell.allowOverflow)
+            svg = withOverflowVisible(svg);
+          parts.push(`  <g transform="translate(${fmt(originX)} ${fmt(originY)})">${svg}</g>
+`);
+        }
+      }
+      if (cell.after)
+        parts.push(paintSlot(cell.after, preset, style));
+    }
+  }
+  if (opts.fragment) {
+    const gAttrs = opts.className ? ` class="${opts.className}"` : "";
+    return `<g${gAttrs}>
+${parts.join("")}</g>
+`;
+  }
+  const attrs = [
+    'xmlns="http://www.w3.org/2000/svg"',
+    `width="${fmt(result.width)}"`,
+    `height="${fmt(result.height)}"`,
+    `viewBox="0 0 ${fmt(result.width)} ${fmt(result.height)}"`
+  ];
+  if (opts.className)
+    attrs.push(`class="${opts.className}"`);
+  return `<svg ${attrs.join(" ")}>
+${parts.join("")}</svg>
+`;
+}
 // src/CanvasRenderer.ts
 function fontWeightNumeric2(weight) {
   if (weight === "bold")
@@ -709,13 +989,13 @@ function buildFontString(span) {
   const family = span.style.fontFamily;
   return `${style} ${weight} ${size}px ${family}`;
 }
-function groupSpansByBaseline(line, spans) {
+function groupSpansByBaseline(line2, spans) {
   const groups = [];
   for (const span of spans) {
     if (!span.text)
       continue;
     const offset = span.fontMetrics.baselineOffset || 0;
-    const targetY = Math.round((line.y + line.baseline + offset) * 100) / 100;
+    const targetY = Math.round((line2.y + line2.baseline + offset) * 100) / 100;
     const last = groups[groups.length - 1];
     if (last && last.targetY === targetY) {
       last.spans.push(span);
@@ -725,9 +1005,9 @@ function groupSpansByBaseline(line, spans) {
   }
   return groups;
 }
-function drawSpanBackground(ctx, line, span) {
-  const baselineY = line.y + line.baseline;
-  const x = line.x + span.x;
+function drawSpanBackground(ctx, line2, span) {
+  const baselineY = line2.y + line2.baseline;
+  const x = line2.x + span.x;
   const y = baselineY - span.fontMetrics.ascent;
   const w = span.width;
   const h = span.fontMetrics.ascent + span.fontMetrics.descent;
@@ -736,9 +1016,9 @@ function drawSpanBackground(ctx, line, span) {
     ctx.fillRect(x, y, w, h);
   }
 }
-function renderSpan(ctx, line, span, baselineY, preserveSpaces) {
-  const x = line.x + span.x;
-  drawSpanBackground(ctx, line, span);
+function renderSpan(ctx, line2, span, baselineY, preserveSpaces) {
+  const x = line2.x + span.x;
+  drawSpanBackground(ctx, line2, span);
   ctx.font = buildFontString(span);
   ctx.fillStyle = span.style.color || "#000000";
   ctx.textBaseline = "alphabetic";
@@ -798,14 +1078,14 @@ function renderToCanvas(ctx, lines, options = {}) {
   } else {
     ctx.clearRect(0, 0, canvasWidth, canvasHeight);
   }
-  for (const line of lines) {
-    const drawableSpans = line.spans.filter((s) => preserveSpaces || s.type !== "space");
+  for (const line2 of lines) {
+    const drawableSpans = line2.spans.filter((s) => preserveSpaces || s.type !== "space");
     if (drawableSpans.length === 0)
       continue;
-    const groups = groupSpansByBaseline(line, drawableSpans);
+    const groups = groupSpansByBaseline(line2, drawableSpans);
     for (const group of groups) {
       for (const span of group.spans) {
-        renderSpan(ctx, line, span, group.targetY, preserveSpaces);
+        renderSpan(ctx, line2, span, group.targetY, preserveSpaces);
       }
     }
   }
@@ -867,12 +1147,12 @@ function renderDebugToCanvas(ctx, lines, _width, _height, flags) {
       ctx.fillText(`⚠ content overflow: ${warnParts.join(" ")}`, 4, _height + 4);
     }
   }
-  for (const line of lines) {
-    const bx = line.x;
-    const by = line.y;
-    const bw = line.width;
-    const bh = line.height;
-    const baselineY = line.y + line.baseline;
+  for (const line2 of lines) {
+    const bx = line2.x;
+    const by = line2.y;
+    const bw = line2.width;
+    const bh = line2.height;
+    const baselineY = line2.y + line2.baseline;
     if (flags.lineGap) {
       ctx.fillStyle = "rgba(0,150,255,0.10)";
       ctx.fillRect(bx, by, bw, bh);
@@ -891,8 +1171,8 @@ function renderDebugToCanvas(ctx, lines, _width, _height, flags) {
       ctx.stroke();
     }
     if (flags.ascentDescent) {
-      const ascentY = baselineY - line.ascent;
-      const descentY = baselineY + line.descent;
+      const ascentY = baselineY - line2.ascent;
+      const descentY = baselineY + line2.descent;
       ctx.strokeStyle = "rgba(100,255,100,0.4)";
       ctx.lineWidth = sw;
       ctx.setLineDash([3, 2]);
@@ -915,10 +1195,10 @@ function renderDebugToCanvas(ctx, lines, _width, _height, flags) {
       ctx.fillText(label, bx, labelY);
     }
     if (flags.runs) {
-      for (const span of line.spans) {
+      for (const span of line2.spans) {
         if (span.width <= 0)
           continue;
-        const rx = line.x + span.x;
+        const rx = line2.x + span.x;
         const ry = baselineY - span.fontMetrics.ascent;
         const rw = span.width;
         const rh = span.fontMetrics.ascent + span.fontMetrics.descent;
@@ -936,33 +1216,33 @@ function renderSelection(ctx, lines, start, end, color = "rgba(100, 150, 255, 0.
   const liMin = Math.min(start.lineIndex, end.lineIndex);
   const liMax = Math.max(start.lineIndex, end.lineIndex);
   for (let li = liMin;li <= liMax; li++) {
-    const line = lines[li];
-    if (!line)
+    const line2 = lines[li];
+    if (!line2)
       continue;
-    const baselineY = line.y + line.baseline;
+    const baselineY = line2.y + line2.baseline;
     let xStart;
     let xEnd;
     if (li === liMin && li === liMax) {
       xStart = Math.min(start.x, end.x);
       xEnd = Math.max(start.x, end.x);
       if (xEnd === xStart) {
-        const spansEnd = line.x + line.spans[line.spans.length - 1].x + line.spans[line.spans.length - 1].width;
+        const spansEnd = line2.x + line2.spans[line2.spans.length - 1].x + line2.spans[line2.spans.length - 1].width;
         xEnd = spansEnd;
       }
     } else if (li === liMin) {
       xStart = start.x;
-      const lastSpan = line.spans[line.spans.length - 1];
-      xEnd = line.x + lastSpan.x + lastSpan.width;
+      const lastSpan = line2.spans[line2.spans.length - 1];
+      xEnd = line2.x + lastSpan.x + lastSpan.width;
     } else if (li === liMax) {
-      xStart = line.x;
+      xStart = line2.x;
       xEnd = end.x;
     } else {
-      xStart = line.x;
-      const lastSpan = line.spans[line.spans.length - 1];
-      xEnd = line.x + lastSpan.x + lastSpan.width;
+      xStart = line2.x;
+      const lastSpan = line2.spans[line2.spans.length - 1];
+      xEnd = line2.x + lastSpan.x + lastSpan.width;
     }
-    const y = baselineY - line.ascent;
-    const h = line.ascent + line.descent;
+    const y = baselineY - line2.ascent;
+    const h = line2.ascent + line2.descent;
     const w = xEnd - xStart;
     if (w > 0) {
       ctx.fillRect(xStart, y, w, h);
@@ -978,8 +1258,8 @@ function renderCursor(ctx, lines, pos, options = {}) {
   if (options.height !== undefined) {
     cursorHeight = options.height;
   } else {
-    const line = lines[pos.lineIndex];
-    cursorHeight = line.ascent + line.descent;
+    const line2 = lines[pos.lineIndex];
+    cursorHeight = line2.ascent + line2.descent;
   }
   const topY = pos.y - (options.height !== undefined ? options.height : lines[pos.lineIndex].ascent);
   ctx.strokeStyle = color;
@@ -1004,13 +1284,13 @@ function getCharAdvances(span) {
 function buildCharSegments(lines) {
   const segments = [];
   for (let li = 0;li < lines.length; li++) {
-    const line = lines[li];
-    const baselineY = line.y + line.baseline;
-    for (let si = 0;si < line.spans.length; si++) {
-      const span = line.spans[si];
+    const line2 = lines[li];
+    const baselineY = line2.y + line2.baseline;
+    for (let si = 0;si < line2.spans.length; si++) {
+      const span = line2.spans[si];
       const advances = getCharAdvances(span);
       const text = span.text;
-      let charX = line.x + span.x;
+      let charX = line2.x + span.x;
       for (let ci = 0;ci < text.length; ci++) {
         const advance = ci < advances.length ? advances[ci] : 0;
         segments.push({
@@ -1022,7 +1302,7 @@ function buildCharSegments(lines) {
           y: baselineY,
           width: advance,
           char: text[ci],
-          line,
+          line: line2,
           span
         });
         charX += advance;
@@ -1037,29 +1317,29 @@ function charAtPoint(lines, px, py) {
   let nearestLineIdx = 0;
   let minYDist = Infinity;
   for (let li = 0;li < lines.length; li++) {
-    const line2 = lines[li];
-    const baselineY2 = line2.y + line2.baseline;
+    const line3 = lines[li];
+    const baselineY2 = line3.y + line3.baseline;
     const yDist = Math.abs(py - baselineY2);
-    const inLineBox = py >= line2.y && py <= line2.y + line2.height;
+    const inLineBox = py >= line3.y && py <= line3.y + line3.height;
     const distance = inLineBox ? 0 : yDist;
     if (distance < minYDist) {
       minYDist = distance;
       nearestLineIdx = li;
     }
   }
-  const line = lines[nearestLineIdx];
-  const baselineY = line.y + line.baseline;
+  const line2 = lines[nearestLineIdx];
+  const baselineY = line2.y + line2.baseline;
   let nearestSpanIdx = 0;
   let nearestCharIdx = 0;
-  let nearestX = line.x;
+  let nearestX = line2.x;
   let nearestWidth = 0;
-  let nearestSpan = line.spans[0];
+  let nearestSpan = line2.spans[0];
   let minXDist = Infinity;
-  for (let si = 0;si < line.spans.length; si++) {
-    const span = line.spans[si];
+  for (let si = 0;si < line2.spans.length; si++) {
+    const span = line2.spans[si];
     const advances = getCharAdvances(span);
     const text = span.text;
-    let charX = line.x + span.x;
+    let charX = line2.x + span.x;
     for (let ci = 0;ci < text.length; ci++) {
       const advance = ci < advances.length ? advances[ci] : 0;
       const charCenter = charX + advance / 2;
@@ -1083,7 +1363,7 @@ function charAtPoint(lines, px, py) {
     x: nearestX,
     y: baselineY,
     width: nearestWidth,
-    line,
+    line: line2,
     span: nearestSpan
   };
 }
@@ -1125,26 +1405,62 @@ function charIndexToPos(lines, charIndex) {
 function posToCharIndex(lines, pos) {
   let index = 0;
   for (let li = 0;li < pos.lineIndex; li++) {
-    const line2 = lines[li];
-    for (const span of line2.spans) {
+    const line3 = lines[li];
+    for (const span of line3.spans) {
       index += span.text.length;
     }
   }
-  const line = lines[pos.lineIndex];
+  const line2 = lines[pos.lineIndex];
   for (let si = 0;si < pos.spanIndex; si++) {
-    index += line.spans[si].text.length;
+    index += line2.spans[si].text.length;
   }
   index += pos.charIndex;
   return index;
 }
+// src/register-font.ts
+import { fontMetricsProvider } from "@vyaz/core";
+var CSS_GENERIC = /^(serif|sans-serif|monospace|cursive|fantasy|system-ui|ui-serif|ui-sans-serif|ui-monospace|ui-rounded|math|emoji|fangsong)$/i;
+function normWeight(w) {
+  if (w == null)
+    return "normal";
+  return typeof w === "number" ? String(w) : w;
+}
+async function registerFont(family, source, opts = {}) {
+  const weight = normWeight(opts.weight);
+  const style = opts.style ?? "normal";
+  if (CSS_GENERIC.test(family)) {
+    const proc = typeof globalThis !== "undefined" ? globalThis.process : undefined;
+    if (proc?.env?.NODE_ENV !== "production") {
+      console.warn(`[vyaz] registerFont("${family}"): "${family}" is a CSS generic keyword. ` + 'A browser paints `font-family="' + family + '"` with the OS default for that ' + "generic and ignores this @font-face, so the SVG will not match the metrics. " + "Register under a concrete family name instead.");
+    }
+  }
+  const bytes = typeof source === "string" ? new Uint8Array(await (await fetch(source)).arrayBuffer()) : source instanceof Uint8Array ? source : new Uint8Array(source);
+  await fontMetricsProvider.registerFont(family, { weight, style, ...opts.variation ? { variation: opts.variation } : {} }, bytes);
+  let browser = false;
+  if (!opts.engineOnly && typeof document !== "undefined" && document.fonts && typeof FontFace !== "undefined") {
+    try {
+      const face = new FontFace(family, bytes, {
+        weight: opts.variation ? "1 1000" : weight === "normal" ? "400" : weight,
+        style,
+        display: "swap"
+      });
+      await face.load();
+      document.fonts.add(face);
+      browser = true;
+    } catch {}
+  }
+  return { family, engine: true, browser };
+}
 export {
   renderToSVG,
   renderToCanvas,
+  renderTableToSVG,
   renderSelection,
   renderResultToSVG,
   renderParagraphToSVG,
   renderDebugToCanvas,
   renderCursor,
+  registerFont,
   posToCharIndex,
   charIndexToPos,
   charAtPoint