@vyaz/renderer 0.1.0 → 0.4.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, glyphDecorations: opts.glyphDecorations ?? true };
+  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";
@@ -164,7 +177,10 @@ function equalStyle(a, b) {
 }
 function styleSignature(span) {
   const s = defaultStyleState(span);
-  return `${s.fontFamily}|${s.fontSize}|${s.fontWeight}|${s.color}|${s.fontStyle}|${s.decoration}|${s.letterSpacing ?? ""}|${s.backgroundColor ?? ""}`;
+  return `${s.fontFamily}|${s.fontSize}|${s.fontWeight}|${s.color}|${s.fontStyle}|${s.decoration}|${s.letterSpacing ?? ""}|${s.backgroundColor ?? ""}|${span.style.data?.href ?? ""}`;
+}
+function hrefOf(span) {
+  return span.style.data?.href;
 }
 function buildTextAttrs(line, span, opts, runId) {
   const x = line.x;
@@ -400,6 +416,29 @@ ${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"
+    }));
+  }
+  openLink(href) {
+    this.root.children.push(rawNode(`<a href="${escapeXml(href)}">`));
+  }
+  closeLink() {
+    this.root.children.push(rawNode("</a>"));
+  }
   addDecorationLine(x, width, y, color, thickness) {
     this.closeText();
     this.root.children.push(el("line", {
@@ -545,6 +584,9 @@ function getSpanBackgroundAttrs(span, baselineY) {
 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;
@@ -553,6 +595,13 @@ function renderToSVG(input, options = {}) {
     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;
@@ -582,13 +631,21 @@ function renderToSVG(input, options = {}) {
         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;
         const sig = styleSignature(span);
@@ -621,7 +678,7 @@ function renderToSVG(input, options = {}) {
           cur = null;
         };
         for (const span of line.spans) {
-          if (!span.text)
+          if (!span.text || span.inlineWidget)
             continue;
           const u = !!span.style.underline;
           const s = !!span.style.strikethrough;
@@ -644,7 +701,7 @@ function renderToSVG(input, options = {}) {
     } 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;
@@ -688,7 +745,7 @@ function renderToSVG(input, 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;
@@ -704,6 +761,9 @@ function renderToSVG(input, options = {}) {
         const baseSpan = group.spans.find((f) => f.type === "text" && f.text.length > 0) || group.spans[0];
         if (!baseSpan)
           continue;
+        const href = hrefOf(baseSpan);
+        if (href)
+          builder.openLink(href);
         const lineBaseY = Math.round((line.y + line.baseline) * 100) / 100;
         const needsOffset = group.targetY !== lineBaseY;
         if (needsOffset) {
@@ -734,7 +794,7 @@ function renderToSVG(input, options = {}) {
         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 + spanDX;
           const shouldRender = span.type !== "space" || opts.spacing === "preserve";
@@ -746,6 +806,8 @@ function renderToSVG(input, options = {}) {
           }
         }
         builder.closeText();
+        if (href)
+          builder.closeLink();
       }
     }
   }
@@ -756,6 +818,14 @@ function renderToSVG(input, 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) {
@@ -772,6 +842,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")
@@ -792,13 +1003,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);
@@ -808,9 +1019,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;
@@ -819,9 +1030,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";
@@ -881,14 +1092,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);
       }
     }
   }
@@ -950,12 +1161,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);
@@ -974,8 +1185,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]);
@@ -998,10 +1209,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;
@@ -1019,33 +1230,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);
@@ -1061,8 +1272,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;
@@ -1087,13 +1298,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({
@@ -1105,7 +1316,7 @@ function buildCharSegments(lines) {
           y: baselineY,
           width: advance,
           char: text[ci],
-          line,
+          line: line2,
           span
         });
         charX += advance;
@@ -1120,29 +1331,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;
@@ -1166,7 +1377,7 @@ function charAtPoint(lines, px, py) {
     x: nearestX,
     y: baselineY,
     width: nearestWidth,
-    line,
+    line: line2,
     span: nearestSpan
   };
 }
@@ -1208,26 +1419,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

package/dist/index.d.ts

@@ -5,9 +5,13 @@
  */
 export { renderToSVG, renderParagraphToSVG, renderResultToSVG } from './SVGRenderer.js';
 export type { SVGRenderOptions, SvgPreset, SvgStyle, SvgFit, SvgSizing } from './SVGRenderer.js';
+export { renderTableToSVG } from './TableRenderer.js';
+export type { TableRenderOptions } from './TableRenderer.js';
 export { renderToCanvas, renderDebugToCanvas, renderSelection, renderCursor } from './CanvasRenderer.js';
 export type { CanvasRenderOptions, CursorOptions } from './CanvasRenderer.js';
 export { charAtPoint, charIndexToPos, posToCharIndex } from './interactive.js';
 export type { CharPos } from './interactive.js';
+export { registerFont } from './register-font.js';
+export type { RegisterFontOptions, RegisterFontResult } from './register-font.js';
 export type { DebugFlags } from './types.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,WAAW,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AACxF,YAAY,EAAE,gBAAgB,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAEjG,OAAO,EAAE,cAAc,EAAE,mBAAmB,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACzG,YAAY,EAAE,mBAAmB,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAE9E,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC/E,YAAY,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAEhD,YAAY,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,WAAW,EAAE,oBAAoB,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AACxF,YAAY,EAAE,gBAAgB,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAEjG,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAE7D,OAAO,EAAE,cAAc,EAAE,mBAAmB,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACzG,YAAY,EAAE,mBAAmB,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAE9E,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC/E,YAAY,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAEhD,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,YAAY,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAElF,YAAY,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC"}