@vyaz/renderer 0.0.5 → 0.0.10

package/dist/index.browser.js

@@ -0,0 +1,1151 @@
+// src/SVGRenderer.ts
+import { groupLinesByParagraph } from "@vyaz/core";
+
+// src/utils.ts
+function fmt(n, precision = 2) {
+  return (Math.round(n * 10 ** precision) / 10 ** precision).toString();
+}
+function computeBBox(lines) {
+  if (lines.length === 0)
+    return { x: 0, y: 0, width: 0, height: 0 };
+  const minX = Math.min(...lines.map((l) => l.x));
+  const maxX = Math.max(...lines.map((l) => l.x + l.width));
+  const minY = Math.min(...lines.map((l) => l.y));
+  const maxY = lines[lines.length - 1].y + lines[lines.length - 1].height;
+  return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
+}
+
+// src/SVGRenderer.ts
+var PRESETS = {
+  flat: { structure: "flat", spacing: "preserve", defaultFit: "none" },
+  browser: { structure: "expanded", spacing: "preserve", defaultFit: "none" },
+  preserve: { structure: "expanded", spacing: "preserve", defaultFit: "frag" },
+  glyph: { structure: "glyph", spacing: "preserve", defaultFit: "none" }
+};
+function escapeXml(text) {
+  return text.replace(/&/g, "&#38;").replace(/</g, "&#60;").replace(/>/g, "&#62;").replace(/"/g, "&#34;");
+}
+function fontWeightNumeric(weight) {
+  if (weight === "bold")
+    return 700;
+  if (weight === "normal")
+    return 400;
+  if (typeof weight === "number")
+    return weight;
+  return 400;
+}
+function colorToRGB(color) {
+  if (!color)
+    return "rgb(0, 0, 0)";
+  if (color[0] !== "#")
+    return color;
+  let hex = color;
+  if (hex.length === 4) {
+    hex = `#${hex[1]}${hex[1]}${hex[2]}${hex[2]}${hex[3]}${hex[3]}`;
+  }
+  if (hex.length === 7) {
+    return `rgb(${parseInt(hex.slice(1, 3), 16)}, ${parseInt(hex.slice(3, 5), 16)}, ${parseInt(hex.slice(5, 7), 16)})`;
+  }
+  if (hex.length === 9) {
+    const a = parseInt(hex.slice(7, 9), 16) / 255;
+    return `rgba(${parseInt(hex.slice(1, 3), 16)}, ${parseInt(hex.slice(3, 5), 16)}, ${parseInt(hex.slice(5, 7), 16)}, ${a.toFixed(3)})`;
+  }
+  return color;
+}
+function resolveOptions(opts) {
+  let structure;
+  let spacing;
+  let defaultFit;
+  if (opts.preset) {
+    const preset = PRESETS[opts.preset];
+    if (!preset) {
+      console.warn(`SVGRenderer: unknown preset "${opts.preset}", falling back to browser`);
+      structure = "expanded";
+      spacing = "browser";
+      defaultFit = "none";
+    } else {
+      structure = preset.structure;
+      spacing = preset.spacing;
+      defaultFit = preset.defaultFit;
+    }
+  } else {
+    structure = "expanded";
+    spacing = "browser";
+    defaultFit = "none";
+  }
+  const style = opts.style ?? "xml";
+  let fit = opts.fit ?? defaultFit;
+  let sizingHorizontal;
+  let sizingVertical;
+  if (typeof opts.sizing === "object" && opts.sizing !== null) {
+    sizingHorizontal = opts.sizing.horizontal ?? "frame";
+    sizingVertical = opts.sizing.vertical ?? "frame";
+  } else {
+    const s = opts.sizing ?? "frame";
+    sizingHorizontal = s;
+    sizingVertical = s;
+  }
+  if (structure === "glyph" && fit !== "none") {
+    console.warn(`SVGRenderer: fit="${fit}" is ignored when structure="glyph"`);
+    fit = "none";
+  }
+  if (structure === "flat" && fit === "frag") {
+    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 };
+}
+function resolveSize(lines, opts) {
+  const needsBBox = opts.sizingHorizontal === "content" || opts.sizingVertical === "content";
+  const bbox = needsBBox ? computeBBox(lines) : null;
+  const frameWidth = opts.width;
+  const frameHeight = opts.height;
+  let width;
+  let height;
+  if (opts.sizingHorizontal === "content") {
+    width = bbox.width;
+  } else {
+    if (opts.width === undefined) {
+      throw new Error(`renderToSVG: horizontal sizing="frame" requires explicit width. ` + `Got width=${opts.width}.`);
+    }
+    width = opts.width;
+  }
+  if (opts.sizingVertical === "content") {
+    height = bbox.height;
+  } else {
+    if (opts.height === undefined) {
+      throw new Error(`renderToSVG: vertical sizing="frame" requires explicit height. ` + `Got height=${opts.height}.`);
+    }
+    height = opts.height;
+  }
+  let viewBox;
+  if (bbox) {
+    viewBox = {
+      x: opts.sizingHorizontal === "content" ? bbox.x : 0,
+      y: opts.sizingVertical === "content" ? bbox.y : 0,
+      w: opts.sizingHorizontal === "content" ? bbox.width : width,
+      h: opts.sizingVertical === "content" ? bbox.height : height
+    };
+  } else {
+    viewBox = { x: 0, y: 0, w: width, h: height };
+  }
+  const pad = opts.contentPadding || 0;
+  if (pad > 0) {
+    width += pad * 2;
+    height += pad * 2;
+    viewBox = {
+      x: viewBox.x - pad,
+      y: viewBox.y - pad,
+      w: viewBox.w + pad * 2,
+      h: viewBox.h + pad * 2
+    };
+  }
+  return { width, height, viewBox, frameWidth, frameHeight };
+}
+function defaultStyleState(span) {
+  const decorations = [];
+  if (span.style.underline)
+    decorations.push("underline");
+  if (span.style.strikethrough)
+    decorations.push("line-through");
+  return {
+    fontFamily: span.style.fontFamily || "Arial",
+    fontSize: span.fontMetrics.fontSize || 16,
+    fontWeight: fontWeightNumeric(span.style.fontWeight),
+    color: span.style.color || "#000000",
+    fontStyle: span.style.fontStyle || "normal",
+    decoration: decorations.join(" "),
+    letterSpacing: span.style.letterSpacing,
+    backgroundColor: span.style.backgroundColor
+  };
+}
+function equalStyle(a, b) {
+  return a.fontFamily === b.fontFamily && a.fontSize === b.fontSize && a.fontWeight === b.fontWeight && a.color === b.color && a.fontStyle === b.fontStyle && a.decoration === b.decoration && a.letterSpacing === b.letterSpacing && a.backgroundColor === b.backgroundColor;
+}
+function styleSignature(span) {
+  const s = defaultStyleState(span);
+  return `${s.fontFamily}|${s.fontSize}|${s.fontWeight}|${s.color}|${s.fontStyle}|${s.decoration}|${s.letterSpacing ?? ""}|${s.backgroundColor ?? ""}`;
+}
+function buildTextAttrs(line, span, opts, runId) {
+  const x = line.x;
+  const y = line.y + line.baseline;
+  const s = defaultStyleState(span);
+  const attrs = {
+    x: fmt(x),
+    y: fmt(y)
+  };
+  if (runId)
+    attrs.id = runId;
+  if (opts.style === "css") {
+    let css = `font-family: '${s.fontFamily}', sans-serif; font-size: ${fmt(s.fontSize)}px; fill: ${colorToRGB(s.color)}; font-weight: ${s.fontWeight}`;
+    if (s.fontStyle === "italic")
+      css += `; font-style: italic`;
+    if (opts.spacing === "preserve")
+      css += "; white-space: pre";
+    attrs.style = css;
+  } else {
+    attrs["font-family"] = s.fontFamily;
+    attrs["font-size"] = fmt(s.fontSize);
+    attrs.fill = s.color;
+    attrs["font-weight"] = s.fontWeight;
+    if (s.fontStyle === "italic")
+      attrs["font-style"] = "italic";
+    if (opts.spacing === "preserve")
+      attrs["xml:space"] = "preserve";
+  }
+  return attrs;
+}
+function buildTspanAttrs(span, x, currentStyle) {
+  const s = defaultStyleState(span);
+  const attrs = {
+    x: fmt(x)
+  };
+  if (currentStyle && equalStyle(s, currentStyle)) {
+    return { attrs, newStyle: s };
+  }
+  if (!currentStyle || s.fontWeight !== currentStyle.fontWeight)
+    attrs["font-weight"] = s.fontWeight;
+  if (!currentStyle || s.fontStyle !== currentStyle.fontStyle)
+    attrs["font-style"] = s.fontStyle;
+  if (!currentStyle || s.fontFamily !== currentStyle.fontFamily)
+    attrs["font-family"] = s.fontFamily;
+  if (!currentStyle || s.fontSize !== currentStyle.fontSize)
+    attrs["font-size"] = fmt(s.fontSize);
+  if (!currentStyle || s.color !== currentStyle.color)
+    attrs.fill = s.color;
+  if (!currentStyle || s.decoration !== currentStyle.decoration) {
+    if (s.decoration)
+      attrs["text-decoration"] = s.decoration;
+  }
+  if (!currentStyle || s.letterSpacing !== currentStyle.letterSpacing) {
+    if (s.letterSpacing !== undefined && s.letterSpacing !== 0)
+      attrs["letter-spacing"] = fmt(s.letterSpacing);
+  }
+  return { attrs, newStyle: s };
+}
+function buildGlyphPositions(span, _lineX) {
+  if (!span.glyphAdvances || span.glyphAdvances.length === 0) {
+    return "";
+  }
+  const ls = span.style.letterSpacing || 0;
+  const spanX = span.x;
+  let xPos = spanX;
+  const positions = [fmt(xPos, 1)];
+  for (let i = 0;i < span.glyphAdvances.length - 1; i++) {
+    xPos += span.glyphAdvances[i] + ls;
+    positions.push(fmt(xPos, 1));
+  }
+  return positions.join(" ");
+}
+function buildFitAttr(line, opts) {
+  if (opts.fit === "text") {
+    return { textLength: fmt(line.width), lengthAdjust: "spacing" };
+  }
+  return;
+}
+function buildSpanFitAttr(span, opts) {
+  if (opts.fit === "frag") {
+    return { textLength: fmt(span.width) };
+  }
+  return;
+}
+function el(tag, attrs = {}, children = []) {
+  const cleanAttrs = {};
+  for (const [k, v] of Object.entries(attrs)) {
+    if (v !== undefined) {
+      cleanAttrs[k] = v;
+    }
+  }
+  return { type: "element", tag, attrs: cleanAttrs, children };
+}
+function textNode(value) {
+  return { type: "text", value };
+}
+function rawNode(value) {
+  return { type: "raw", value };
+}
+function serializeSvg(node, indent = 0) {
+  const pad = "  ".repeat(indent);
+  switch (node.type) {
+    case "text":
+      return escapeXml(node.value);
+    case "raw":
+      return node.value;
+    case "comment":
+      return `${pad}<!-- ${node.value} -->
+`;
+    case "element": {
+      const tag = node.tag;
+      const attrsStr = Object.entries(node.attrs).map(([k, v]) => `${k}="${v}"`).join(" ");
+      if (node.children.length === 0) {
+        return `${pad}<${tag}${attrsStr ? " " + attrsStr : ""} />
+`;
+      }
+      const allTextChildren = node.children.every((c) => c.type === "text");
+      if (allTextChildren) {
+        const text = node.children.map((c) => c.value).join("");
+        return `${pad}<${tag}${attrsStr ? " " + attrsStr : ""}>${escapeXml(text)}</${tag}>
+`;
+      }
+      const openTag = `${pad}<${tag}${attrsStr ? " " + attrsStr : ""}>
+`;
+      const childrenStr = node.children.map((c) => serializeSvg(c, indent + 1)).join("");
+      const closeTag = `${pad}</${tag}>
+`;
+      return openTag + childrenStr + closeTag;
+    }
+  }
+}
+
+class SvgAstBuilder {
+  root;
+  currentText = null;
+  opts;
+  constructor(width, height, opts, viewBox) {
+    this.opts = opts;
+    const svgAttrs = {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: fmt(width),
+      height: fmt(height),
+      viewBox: viewBox ? `${fmt(viewBox.x)} ${fmt(viewBox.y)} ${fmt(viewBox.w)} ${fmt(viewBox.h)}` : `0 0 ${fmt(width)} ${fmt(height)}`
+    };
+    if (opts.className) {
+      svgAttrs.class = opts.className;
+    }
+    this.root = el("svg", svgAttrs);
+  }
+  openText(line, baseSpan, runId, yOverride, fontSizeOverride) {
+    this.closeText();
+    let textAttrs;
+    if (yOverride !== undefined && fontSizeOverride !== undefined) {
+      const s = defaultStyleState(baseSpan);
+      const x = line.x;
+      const attrs = {
+        x: fmt(x),
+        y: fmt(yOverride)
+      };
+      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")
+          css += `; font-style: italic`;
+        if (this.opts.spacing === "preserve")
+          css += "; white-space: pre";
+        attrs.style = css;
+      } else {
+        attrs["font-family"] = s.fontFamily;
+        attrs["font-size"] = fmt(fontSizeOverride);
+        attrs.fill = s.color;
+        attrs["font-weight"] = s.fontWeight;
+        if (s.fontStyle === "italic")
+          attrs["font-style"] = "italic";
+        if (this.opts.spacing === "preserve")
+          attrs["xml:space"] = "preserve";
+      }
+      textAttrs = attrs;
+    } else {
+      textAttrs = buildTextAttrs(line, baseSpan, this.opts, runId);
+    }
+    const fitAttrs = buildFitAttr(line, this.opts);
+    if (fitAttrs) {
+      Object.assign(textAttrs, fitAttrs);
+    }
+    const textEl = el("text", textAttrs);
+    this.root.children.push(textEl);
+    this.currentText = textEl;
+  }
+  addDebug(debugMarkup) {
+    if (debugMarkup) {
+      this.root.children.push(rawNode(`<!-- debug overlay -->
+${debugMarkup}
+`));
+    }
+  }
+  addTextContent(text) {
+    if (this.currentText) {
+      this.currentText.children.push(textNode(text));
+    }
+  }
+  addTspan(span, x, style) {
+    const { attrs, newStyle } = buildTspanAttrs(span, x, style);
+    const fitAttrs = buildSpanFitAttr(span, this.opts);
+    if (fitAttrs) {
+      Object.assign(attrs, fitAttrs);
+    }
+    const tspan = el("tspan", attrs, [textNode(span.text)]);
+    if (this.currentText) {
+      this.currentText.children.push(tspan);
+    }
+    return newStyle;
+  }
+  addGlyphTspan(span, lineX) {
+    const positions = buildGlyphPositions(span, lineX);
+    const attrs = {};
+    if (positions) {
+      attrs.x = positions;
+    }
+    const tspan = el("tspan", attrs, [textNode(span.text)]);
+    if (this.currentText) {
+      this.currentText.children.push(tspan);
+    }
+  }
+  addBackgroundRect(x, y, width, height, color) {
+    this.closeText();
+    const rect = el("rect", {
+      x: fmt(x),
+      y: fmt(y),
+      width: fmt(width),
+      height: fmt(height),
+      fill: color
+    });
+    this.root.children.push(rect);
+  }
+  addRawLine(lineStr) {
+    this.closeText();
+    this.root.children.push(rawNode(lineStr));
+  }
+  closeText() {
+    this.currentText = null;
+  }
+}
+function renderDebugToSVG(lines, flags, frameSize, contentSize, columns, leftPad, rightPad) {
+  const parts = [];
+  const sw = flags.widthBorder ?? 1;
+  if ((flags.frameBox || flags.frame) && frameSize) {
+    parts.push(`  <rect x="0" y="0" width="${fmt(frameSize.width)}" height="${fmt(frameSize.height)}"` + ` fill="none" stroke="rgba(0,140,255,0.8)" stroke-width="${fmt(sw)}" stroke-dasharray="4,3" />`);
+    if (flags.labels) {
+      parts.push(`  <text x="4" y="14" font-size="10" fill="rgba(0,140,255,0.9)" font-family="monospace">frame ${fmt(frameSize.width)}×${fmt(frameSize.height)}</text>`);
+    }
+  }
+  if (flags.contentBox) {
+    const bbox = computeBBox(lines);
+    parts.push(`  <rect x="${fmt(bbox.x)}" y="${fmt(bbox.y)}" width="${fmt(bbox.width)}" height="${fmt(bbox.height)}"` + ` fill="none" stroke="rgba(255,60,140,0.8)" stroke-width="${fmt(sw)}" stroke-dasharray="1,2" />`);
+    if (flags.labels) {
+      const labelY = bbox.y + bbox.height + 14;
+      parts.push(`  <text x="${fmt(bbox.x)}" y="${fmt(labelY)}" font-size="10" fill="rgba(255,60,140,0.9)" font-family="monospace">content ${fmt(bbox.width)}×${fmt(bbox.height)}</text>`);
+    }
+  }
+  if (flags.contentBox && frameSize && contentSize && flags.labels) {
+    const overflowX = contentSize.width > frameSize.width;
+    const overflowY = contentSize.height > frameSize.height;
+    if (overflowX || overflowY) {
+      parts.push(`  <text x="4" y="${fmt(frameSize.height + 14)}" font-size="10" fill="rgba(220,0,0,0.9)" font-family="monospace">⚠ content overflow: ${overflowX ? `Δx=${fmt(contentSize.width - frameSize.width)} ` : ""}${overflowY ? `Δy=${fmt(contentSize.height - frameSize.height)}` : ""}</text>`);
+    }
+  }
+  if (columns && columns.count > 1 && (flags.paragraphBox || flags.columnBox)) {
+    const colCount = columns.count;
+    const colGap = columns.gap;
+    const lp = leftPad ?? 0;
+    const totalHorizontalSpace = frameSize?.width ?? (lines.length > 0 ? Math.max(...lines.map((l) => l.x + l.width)) : 0);
+    const usableWidth = totalHorizontalSpace - lp - (rightPad ?? 0);
+    const colWidth = (usableWidth - (colCount - 1) * colGap) / colCount;
+    for (let c = 1;c < colCount; c++) {
+      const sepX = lp + c * (colWidth + colGap) - colGap / 2;
+      parts.push(`  <line x1="${fmt(sepX)}" y1="0" x2="${fmt(sepX)}" y2="${fmt(frameSize?.height ?? 9999)}"` + ` stroke="rgba(100,100,100,0.15)" stroke-width="1" stroke-dasharray="2,2" />`);
+    }
+  }
+  if (flags.paragraphBox) {
+    const paraGroups = groupLinesByParagraph(lines);
+    const paraColors = [
+      "rgba(0,180,80,0.25)",
+      "rgba(180,0,80,0.25)",
+      "rgba(80,0,180,0.25)",
+      "rgba(180,180,0,0.25)"
+    ];
+    for (let i = 0;i < paraGroups.length; i++) {
+      const group = paraGroups[i];
+      if (group.lines.length === 0)
+        continue;
+      const colMap = new Map;
+      for (const line of group.lines) {
+        const ci = line.columnIndex ?? 0;
+        const existing = colMap.get(ci);
+        const lineTop = line.y;
+        const lineBottom = line.y + line.height;
+        if (existing) {
+          existing.top = Math.min(existing.top, lineTop);
+          existing.bottom = Math.max(existing.bottom, lineBottom);
+        } else {
+          colMap.set(ci, { top: lineTop, bottom: lineBottom });
+        }
+      }
+      const lp = leftPad ?? 0;
+      const rp = rightPad ?? 0;
+      const totalW = frameSize?.width ?? (lines.length > 0 ? Math.max(...lines.map((l) => l.x + l.width)) : 0);
+      const usableW = totalW - lp - rp;
+      const colCount = columns?.count ?? 1;
+      const colGap = columns?.gap ?? 0;
+      const colW = (usableW - (colCount - 1) * colGap) / colCount;
+      const color = paraColors[i % paraColors.length];
+      for (const [ci, rect] of colMap) {
+        const colX = lp + ci * (colW + colGap);
+        parts.push(`  <rect x="${fmt(colX)}" y="${fmt(rect.top)}" width="${fmt(colW)}" height="${fmt(rect.bottom - rect.top)}" fill="none" stroke="${color}" stroke-width="${fmt(sw)}" />`);
+      }
+      const label = group.tag ? `#${group.pIdx} ${group.tag}` : `#${group.pIdx}`;
+      if (flags.labels) {
+        const firstColIdx = Math.min(...Array.from(colMap.keys()));
+        const firstColX = lp + firstColIdx * (colW + colGap);
+        const firstTop = colMap.get(firstColIdx).top;
+        parts.push(`  <text x="${fmt(firstColX + 4)}" y="${fmt(firstTop - 2)}" font-size="9" fill="rgba(0,0,0,0.6)" font-family="monospace">¶ ${label}</text>`);
+      }
+    }
+  }
+  for (const line of lines) {
+    const { x: bx, y: by, width: bw, height: bh } = line;
+    const baselineY = line.y + line.baseline;
+    if (flags.lineGap) {
+      parts.push(`  <rect x="${fmt(bx)}" y="${fmt(by)}" width="${fmt(bw)}" height="${fmt(bh)}" fill="rgba(0,150,255,0.10)" stroke="none" />`);
+    }
+    if (flags.box) {
+      parts.push(`  <rect x="${fmt(bx)}" y="${fmt(by)}" width="${fmt(bw)}" height="${fmt(bh)}" fill="none" stroke="rgba(255,100,100,0.5)" stroke-width="${fmt(sw)}" />`);
+    }
+    if (flags.baseline) {
+      parts.push(`  <line x1="${fmt(bx)}" y1="${fmt(baselineY)}" x2="${fmt(bx + bw)}" y2="${fmt(baselineY)}" stroke="rgba(100,100,255,0.5)" stroke-width="${fmt(sw)}" />`);
+    }
+    if (flags.ascentDescent) {
+      parts.push(`  <line x1="${fmt(bx)}" y1="${fmt(baselineY - line.ascent)}" x2="${fmt(bx + bw)}" y2="${fmt(baselineY - line.ascent)}" stroke="rgba(100,255,100,0.4)" stroke-width="${fmt(sw)}" stroke-dasharray="3,2" />`);
+      parts.push(`  <line x1="${fmt(bx)}" y1="${fmt(baselineY + line.descent)}" x2="${fmt(bx + bw)}" y2="${fmt(baselineY + line.descent)}" stroke="rgba(100,255,100,0.4)" stroke-width="${fmt(sw)}" stroke-dasharray="3,2" />`);
+    }
+    if (flags.labels) {
+      parts.push(`  <text x="${fmt(bx)}" y="${fmt(by - 2)}" font-size="9" fill="rgba(0,0,0,0.55)" font-family="monospace">y=${fmt(by)} x=${fmt(bx)} w=${fmt(bw)} h=${fmt(bh)} bl=${fmt(baselineY)}</text>`);
+    }
+    if (flags.runs) {
+      for (const span of line.spans) {
+        if (span.width <= 0)
+          continue;
+        const rx = line.x + span.x;
+        const ry = baselineY - span.fontMetrics.ascent;
+        parts.push(`  <rect x="${fmt(rx)}" y="${fmt(ry)}" width="${fmt(span.width)}" height="${fmt(span.fontMetrics.ascent + span.fontMetrics.descent)}" fill="none" stroke="rgba(200,100,255,0.4)" stroke-width="${fmt(sw)}" />`);
+      }
+    }
+  }
+  return parts.join(`
+`);
+}
+function getSpanBackgroundAttrs(span, baselineY) {
+  if (!span.style.backgroundColor)
+    return null;
+  const x = span.x;
+  const y = baselineY - span.fontMetrics.ascent;
+  const w = span.width;
+  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);
+  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;
+    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;
+        builder.addBackgroundRect(rx, bg.y, bg.w, bg.h, bg.fill);
+      }
+    }
+    if (opts.structure === "glyph") {
+      let currentRunIdx = -1;
+      for (const span of line.spans) {
+        if (!span.text)
+          continue;
+        const runIdx = span.itemIndex;
+        if (runIdx !== currentRunIdx) {
+          builder.closeText();
+          const runId = span.tag ? `${span.tag}-${runIdx}` : undefined;
+          builder.openText(line, span, runId);
+          currentRunIdx = runIdx;
+        }
+        builder.addGlyphTspan(span, line.x);
+      }
+      builder.closeText();
+    } else if (opts.structure === "flat") {
+      const groups = [];
+      for (const span of line.spans) {
+        if (!span.text)
+          continue;
+        const offset = span.fontMetrics.baselineOffset || 0;
+        const targetY = Math.round((line.y + line.baseline + offset) * 100) / 100;
+        const sig = styleSignature(span);
+        const fontSize = span.fontMetrics.fontSize;
+        const last = groups[groups.length - 1];
+        if (last && last.targetY === targetY && last.signature === sig) {
+          last.spans.push(span);
+        } else {
+          groups.push({ spans: [span], targetY, signature: sig, fontSize });
+        }
+      }
+      const firstTextX = line.spans.find((s) => s.type === "text" || s.type === "marker")?.x ?? 0;
+      const fitAttr = buildFitAttr(line, opts);
+      for (const group of groups) {
+        const s = defaultStyleState(group.spans[0]);
+        const text = group.spans.map((sp) => escapeXml(sp.text)).join("");
+        const groupX = line.x + (group.spans[0].x - firstTextX);
+        const textAttrs = {
+          x: fmt(groupX),
+          y: fmt(group.targetY),
+          "font-family": s.fontFamily,
+          "font-size": fmt(group.fontSize),
+          fill: s.color,
+          "font-weight": s.fontWeight
+        };
+        if (s.fontStyle === "italic")
+          textAttrs["font-style"] = "italic";
+        if (s.decoration)
+          textAttrs["text-decoration"] = s.decoration;
+        if (s.letterSpacing !== undefined && s.letterSpacing !== 0)
+          textAttrs["letter-spacing"] = fmt(s.letterSpacing);
+        textAttrs["xml:space"] = "preserve";
+        if (fitAttr) {
+          Object.assign(textAttrs, fitAttr);
+        }
+        const attrsStr = Object.entries(textAttrs).map(([k, v]) => `${k}="${v}"`).join(" ");
+        builder.addRawLine(`  <text ${attrsStr}>${text}</text>
+`);
+      }
+    } else {
+      const groups = [];
+      for (const span of line.spans) {
+        if (!span.text)
+          continue;
+        const offset = span.fontMetrics.baselineOffset || 0;
+        const targetY = Math.round((line.y + line.baseline + offset) * 100) / 100;
+        const sig = styleSignature(span);
+        const last = groups[groups.length - 1];
+        if (last && last.targetY === targetY && last.signature === sig) {
+          last.spans.push(span);
+        } else {
+          groups.push({ targetY, spans: [span], signature: sig });
+        }
+      }
+      for (const group of groups) {
+        const baseSpan = group.spans.find((f) => f.type === "text" && f.text.length > 0) || group.spans[0];
+        if (!baseSpan)
+          continue;
+        const lineBaseY = Math.round((line.y + line.baseline) * 100) / 100;
+        const needsOffset = group.targetY !== lineBaseY;
+        if (needsOffset) {
+          const s = defaultStyleState(baseSpan);
+          const firstTextX = line.spans.find((s2) => s2.type === "text")?.x ?? 0;
+          const groupX = line.x + (group.spans[0].x - firstTextX);
+          const fontSize = baseSpan.fontMetrics.fontSize;
+          const textAttrs = {
+            x: fmt(groupX),
+            y: fmt(group.targetY),
+            "font-family": s.fontFamily,
+            "font-size": fmt(fontSize),
+            fill: s.color,
+            "font-weight": s.fontWeight
+          };
+          if (s.fontStyle === "italic")
+            textAttrs["font-style"] = "italic";
+          textAttrs["xml:space"] = "preserve";
+          const fit = buildFitAttr(line, opts);
+          if (fit) {
+            Object.assign(textAttrs, fit);
+          }
+          builder.openText(line, baseSpan, undefined, group.targetY, fontSize);
+        } else {
+          builder.openText(line, baseSpan);
+        }
+        let currentStyle = null;
+        for (const span of group.spans) {
+          if (!span.text)
+            continue;
+          const x = span.x;
+          const shouldRender = span.type !== "space" || opts.spacing === "preserve";
+          if (shouldRender) {
+            const newStyle = builder.addTspan(span, x, currentStyle);
+            if (span.type !== "space") {
+              currentStyle = newStyle;
+            }
+          }
+        }
+        builder.closeText();
+      }
+    }
+  }
+  if (opts.debug) {
+    const frameSize = frameWidth !== undefined && frameHeight !== undefined ? { width: frameWidth, height: frameHeight } : undefined;
+    const contentBbox = computeBBox(lines);
+    const contentSize = { width: contentBbox.width, height: contentBbox.height };
+    const debugSvg = renderDebugToSVG(lines, opts.debug, frameSize, contentSize, options.columns, options.paddingLeft, 0);
+    builder.addDebug(debugSvg);
+  }
+  return serializeSvg(builder.root);
+}
+function renderParagraphToSVG(lines, paragraphWidth, paragraphHeight, options) {
+  return renderToSVG(lines, {
+    width: paragraphWidth,
+    height: paragraphHeight,
+    ...options
+  });
+}
+function renderResultToSVG(result, options) {
+  return renderToSVG(result.lines, {
+    width: result.width,
+    height: result.height,
+    ...options
+  });
+}
+// src/CanvasRenderer.ts
+function fontWeightNumeric2(weight) {
+  if (weight === "bold")
+    return 700;
+  if (weight === "normal")
+    return 400;
+  if (typeof weight === "number")
+    return weight;
+  return 400;
+}
+function fontStyleCSS(style) {
+  return style === "italic" ? "italic" : "normal";
+}
+function buildFontString(span) {
+  const style = fontStyleCSS(span.style.fontStyle);
+  const weight = fontWeightNumeric2(span.style.fontWeight);
+  const size = span.fontMetrics.fontSize;
+  const family = span.style.fontFamily;
+  return `${style} ${weight} ${size}px ${family}`;
+}
+function groupSpansByBaseline(line, 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 last = groups[groups.length - 1];
+    if (last && last.targetY === targetY) {
+      last.spans.push(span);
+    } else {
+      groups.push({ targetY, spans: [span] });
+    }
+  }
+  return groups;
+}
+function drawSpanBackground(ctx, line, span) {
+  const baselineY = line.y + line.baseline;
+  const x = line.x + span.x;
+  const y = baselineY - span.fontMetrics.ascent;
+  const w = span.width;
+  const h = span.fontMetrics.ascent + span.fontMetrics.descent;
+  ctx.fillStyle = span.style.backgroundColor || "transparent";
+  if (span.style.backgroundColor) {
+    ctx.fillRect(x, y, w, h);
+  }
+}
+function renderSpan(ctx, line, span, baselineY, preserveSpaces) {
+  const x = line.x + span.x;
+  drawSpanBackground(ctx, line, span);
+  ctx.font = buildFontString(span);
+  ctx.fillStyle = span.style.color || "#000000";
+  ctx.textBaseline = "alphabetic";
+  const ls = span.style.letterSpacing;
+  if (ls !== undefined && ls !== 0) {
+    ctx.letterSpacing = `${ls}px`;
+  } else {
+    ctx.letterSpacing = "normal";
+  }
+  if (preserveSpaces || span.type !== "space") {
+    ctx.fillText(span.text, x, baselineY);
+  }
+  ctx.letterSpacing = "normal";
+  if (span.style.underline) {
+    const ulY = baselineY + 2;
+    ctx.strokeStyle = span.style.color || "#000000";
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    ctx.moveTo(x, ulY);
+    ctx.lineTo(x + span.width, ulY);
+    ctx.stroke();
+  }
+  if (span.style.strikethrough) {
+    const stY = baselineY - span.fontMetrics.ascent * 0.4;
+    ctx.strokeStyle = span.style.color || "#000000";
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    ctx.moveTo(x, stY);
+    ctx.lineTo(x + span.width, stY);
+    ctx.stroke();
+  }
+  if (span.inlineWidget) {
+    const iw = span.inlineWidget;
+    const iwY = baselineY - (iw.height || span.fontMetrics.ascent) + (iw.baselineOffset || 0);
+    ctx.fillStyle = "#cccccc";
+    ctx.fillRect(x, iwY, iw.width, iw.height);
+  }
+}
+function renderToCanvas(ctx, lines, options = {}) {
+  const sizing = options.sizing ?? "frame";
+  const preserveSpaces = options.preserveSpaces ?? false;
+  let canvasWidth;
+  let canvasHeight;
+  if (sizing === "content") {
+    const bbox = computeBBox(lines);
+    canvasWidth = bbox.width;
+    canvasHeight = bbox.height;
+    ctx.canvas.width = canvasWidth;
+    ctx.canvas.height = canvasHeight;
+  } else {
+    canvasWidth = ctx.canvas.width;
+    canvasHeight = ctx.canvas.height;
+  }
+  if (options.backgroundColor) {
+    ctx.fillStyle = options.backgroundColor;
+    ctx.fillRect(0, 0, canvasWidth, canvasHeight);
+  } else {
+    ctx.clearRect(0, 0, canvasWidth, canvasHeight);
+  }
+  for (const line of lines) {
+    const drawableSpans = line.spans.filter((s) => preserveSpaces || s.type !== "space");
+    if (drawableSpans.length === 0)
+      continue;
+    const groups = groupSpansByBaseline(line, drawableSpans);
+    for (const group of groups) {
+      for (const span of group.spans) {
+        renderSpan(ctx, line, span, group.targetY, preserveSpaces);
+      }
+    }
+  }
+  if (options.debug) {
+    renderDebugToCanvas(ctx, lines, canvasWidth, canvasHeight, options.debug);
+  }
+}
+function renderDebugToCanvas(ctx, lines, _width, _height, flags) {
+  ctx.save();
+  const sw = flags.widthBorder ?? 1;
+  const hasBBox = lines.length > 0;
+  const bbox = hasBBox ? computeBBox(lines) : null;
+  if ((flags.frameBox || flags.frame) && hasBBox) {
+    const first = lines[0];
+    const last = lines[lines.length - 1];
+    const maxW = Math.max(...lines.map((l) => l.x + l.width));
+    const frameX = first.x;
+    const frameY = first.y;
+    const frameW = maxW - frameX;
+    const frameH = last.y + last.height - first.y;
+    ctx.strokeStyle = "rgba(0,140,255,0.8)";
+    ctx.lineWidth = sw;
+    ctx.setLineDash([4, 3]);
+    ctx.strokeRect(frameX, frameY, frameW, frameH);
+    ctx.setLineDash([]);
+    if (flags.labels && bbox) {
+      ctx.font = "10px monospace";
+      ctx.fillStyle = "rgba(0,140,255,0.9)";
+      ctx.textBaseline = "top";
+      ctx.fillText(`frame ${frameW.toFixed(0)}×${frameH.toFixed(0)}`, 4, 4);
+    }
+  }
+  if (flags.contentBox && bbox) {
+    ctx.strokeStyle = "rgba(255,60,140,0.8)";
+    ctx.lineWidth = sw;
+    ctx.setLineDash([1, 2]);
+    ctx.strokeRect(bbox.x, bbox.y, bbox.width, bbox.height);
+    ctx.setLineDash([]);
+    if (flags.labels) {
+      const labelY = bbox.y + bbox.height + 4;
+      ctx.font = "10px monospace";
+      ctx.fillStyle = "rgba(255,60,140,0.9)";
+      ctx.textBaseline = "top";
+      ctx.fillText(`content ${bbox.width.toFixed(0)}×${bbox.height.toFixed(0)}`, bbox.x, labelY);
+    }
+  }
+  if (flags.contentBox && bbox && _width > 0 && _height > 0) {
+    const overflowX = bbox.width > _width;
+    const overflowY = bbox.height > _height;
+    if (overflowX || overflowY) {
+      ctx.font = "10px monospace";
+      ctx.fillStyle = "rgba(220,0,0,0.9)";
+      ctx.textBaseline = "top";
+      const warnParts = [];
+      if (overflowX)
+        warnParts.push(`Δx=${(bbox.width - _width).toFixed(0)}`);
+      if (overflowY)
+        warnParts.push(`Δy=${(bbox.height - _height).toFixed(0)}`);
+      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;
+    if (flags.lineGap) {
+      ctx.fillStyle = "rgba(0,150,255,0.10)";
+      ctx.fillRect(bx, by, bw, bh);
+    }
+    if (flags.box) {
+      ctx.strokeStyle = "rgba(255,100,100,0.5)";
+      ctx.lineWidth = sw;
+      ctx.strokeRect(bx, by, bw, bh);
+    }
+    if (flags.baseline) {
+      ctx.strokeStyle = "rgba(100,100,255,0.5)";
+      ctx.lineWidth = sw;
+      ctx.beginPath();
+      ctx.moveTo(bx, baselineY);
+      ctx.lineTo(bx + bw, baselineY);
+      ctx.stroke();
+    }
+    if (flags.ascentDescent) {
+      const ascentY = baselineY - line.ascent;
+      const descentY = baselineY + line.descent;
+      ctx.strokeStyle = "rgba(100,255,100,0.4)";
+      ctx.lineWidth = sw;
+      ctx.setLineDash([3, 2]);
+      ctx.beginPath();
+      ctx.moveTo(bx, ascentY);
+      ctx.lineTo(bx + bw, ascentY);
+      ctx.stroke();
+      ctx.beginPath();
+      ctx.moveTo(bx, descentY);
+      ctx.lineTo(bx + bw, descentY);
+      ctx.stroke();
+      ctx.setLineDash([]);
+    }
+    if (flags.labels) {
+      const labelY = by - 2;
+      const label = `y=${by.toFixed(1)} x=${bx.toFixed(1)} w=${bw.toFixed(1)} h=${bh.toFixed(1)} bl=${baselineY.toFixed(1)}`;
+      ctx.font = "9px monospace";
+      ctx.fillStyle = "rgba(0,0,0,0.55)";
+      ctx.textBaseline = "bottom";
+      ctx.fillText(label, bx, labelY);
+    }
+    if (flags.runs) {
+      for (const span of line.spans) {
+        if (span.width <= 0)
+          continue;
+        const rx = line.x + span.x;
+        const ry = baselineY - span.fontMetrics.ascent;
+        const rw = span.width;
+        const rh = span.fontMetrics.ascent + span.fontMetrics.descent;
+        ctx.strokeStyle = "rgba(200,100,255,0.4)";
+        ctx.lineWidth = sw;
+        ctx.strokeRect(rx, ry, rw, rh);
+      }
+    }
+  }
+  ctx.restore();
+}
+function renderSelection(ctx, lines, start, end, color = "rgba(100, 150, 255, 0.3)") {
+  ctx.save();
+  ctx.fillStyle = color;
+  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)
+      continue;
+    const baselineY = line.y + line.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;
+        xEnd = spansEnd;
+      }
+    } else if (li === liMin) {
+      xStart = start.x;
+      const lastSpan = line.spans[line.spans.length - 1];
+      xEnd = line.x + lastSpan.x + lastSpan.width;
+    } else if (li === liMax) {
+      xStart = line.x;
+      xEnd = end.x;
+    } else {
+      xStart = line.x;
+      const lastSpan = line.spans[line.spans.length - 1];
+      xEnd = line.x + lastSpan.x + lastSpan.width;
+    }
+    const y = baselineY - line.ascent;
+    const h = line.ascent + line.descent;
+    const w = xEnd - xStart;
+    if (w > 0) {
+      ctx.fillRect(xStart, y, w, h);
+    }
+  }
+  ctx.restore();
+}
+function renderCursor(ctx, lines, pos, options = {}) {
+  const color = options.color ?? "#000";
+  const width = options.width ?? 1;
+  ctx.save();
+  let cursorHeight;
+  if (options.height !== undefined) {
+    cursorHeight = options.height;
+  } else {
+    const line = lines[pos.lineIndex];
+    cursorHeight = line.ascent + line.descent;
+  }
+  const topY = pos.y - (options.height !== undefined ? options.height : lines[pos.lineIndex].ascent);
+  ctx.strokeStyle = color;
+  ctx.lineWidth = width;
+  ctx.beginPath();
+  ctx.moveTo(pos.x, topY);
+  ctx.lineTo(pos.x, topY + cursorHeight);
+  ctx.stroke();
+  ctx.restore();
+}
+// src/interactive.ts
+function getCharAdvances(span) {
+  if (span.glyphAdvances && span.glyphAdvances.length > 0) {
+    return Array.from(span.glyphAdvances);
+  }
+  const len = span.text.length;
+  if (len === 0)
+    return [];
+  const avgWidth = span.width / len;
+  return new Array(len).fill(avgWidth);
+}
+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 advances = getCharAdvances(span);
+      const text = span.text;
+      let charX = line.x + span.x;
+      for (let ci = 0;ci < text.length; ci++) {
+        const advance = ci < advances.length ? advances[ci] : 0;
+        segments.push({
+          lineIndex: li,
+          spanIndex: si,
+          charIndex: ci,
+          pIdx: span.pIdx,
+          x: charX,
+          y: baselineY,
+          width: advance,
+          char: text[ci],
+          line,
+          span
+        });
+        charX += advance;
+      }
+    }
+  }
+  return segments;
+}
+function charAtPoint(lines, px, py) {
+  if (lines.length === 0)
+    return null;
+  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 yDist = Math.abs(py - baselineY2);
+    const inLineBox = py >= line2.y && py <= line2.y + line2.height;
+    const distance = inLineBox ? 0 : yDist;
+    if (distance < minYDist) {
+      minYDist = distance;
+      nearestLineIdx = li;
+    }
+  }
+  const line = lines[nearestLineIdx];
+  const baselineY = line.y + line.baseline;
+  let nearestSpanIdx = 0;
+  let nearestCharIdx = 0;
+  let nearestX = line.x;
+  let nearestWidth = 0;
+  let nearestSpan = line.spans[0];
+  let minXDist = Infinity;
+  for (let si = 0;si < line.spans.length; si++) {
+    const span = line.spans[si];
+    const advances = getCharAdvances(span);
+    const text = span.text;
+    let charX = line.x + span.x;
+    for (let ci = 0;ci < text.length; ci++) {
+      const advance = ci < advances.length ? advances[ci] : 0;
+      const charCenter = charX + advance / 2;
+      const xDist = Math.abs(px - charCenter);
+      if (xDist < minXDist) {
+        minXDist = xDist;
+        nearestSpanIdx = si;
+        nearestCharIdx = ci;
+        nearestX = charX;
+        nearestWidth = advance;
+        nearestSpan = span;
+      }
+      charX += advance;
+    }
+  }
+  return {
+    lineIndex: nearestLineIdx,
+    spanIndex: nearestSpanIdx,
+    charIndex: nearestCharIdx,
+    pIdx: nearestSpan.pIdx,
+    x: nearestX,
+    y: baselineY,
+    width: nearestWidth,
+    line,
+    span: nearestSpan
+  };
+}
+function charIndexToPos(lines, charIndex) {
+  const segments = buildCharSegments(lines);
+  let globalIdx = 0;
+  for (const seg of segments) {
+    if (globalIdx === charIndex) {
+      return {
+        lineIndex: seg.lineIndex,
+        spanIndex: seg.spanIndex,
+        charIndex: seg.charIndex,
+        pIdx: seg.pIdx,
+        x: seg.x,
+        y: seg.y,
+        width: seg.width,
+        line: seg.line,
+        span: seg.span
+      };
+    }
+    globalIdx++;
+  }
+  if (charIndex >= globalIdx && segments.length > 0) {
+    const last = segments[segments.length - 1];
+    return {
+      lineIndex: last.lineIndex,
+      spanIndex: last.spanIndex,
+      charIndex: last.charIndex + 1,
+      pIdx: last.pIdx,
+      x: last.x + last.width,
+      y: last.y,
+      width: 0,
+      line: last.line,
+      span: last.span
+    };
+  }
+  return null;
+}
+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) {
+      index += span.text.length;
+    }
+  }
+  const line = lines[pos.lineIndex];
+  for (let si = 0;si < pos.spanIndex; si++) {
+    index += line.spans[si].text.length;
+  }
+  index += pos.charIndex;
+  return index;
+}
+export {
+  renderToSVG,
+  renderToCanvas,
+  renderSelection,
+  renderResultToSVG,
+  renderParagraphToSVG,
+  renderDebugToCanvas,
+  renderCursor,
+  posToCharIndex,
+  charIndexToPos,
+  charAtPoint
+};