@vyaz/renderer 0.0.2 → 0.0.4

package/dist/index.js

@@ -1,18 +1,48 @@
 // @bun
+// ../core/src/utils/groupLinesByParagraph.ts
+function groupLinesByParagraph(lines) {
+  const map = new Map;
+  for (const line of lines) {
+    const idx = line.spans[0]?.pIdx ?? -1;
+    let entry = map.get(idx);
+    if (!entry) {
+      entry = { lines: [] };
+      map.set(idx, entry);
+    }
+    entry.lines.push(line);
+    if (!entry.tag) {
+      entry.tag = line.spans[0]?.tag;
+    }
+  }
+  const groups = [];
+  const sortedKeys = Array.from(map.keys()).sort((a, b) => a - b);
+  for (const key of sortedKeys) {
+    if (key === -1)
+      continue;
+    const entry = map.get(key);
+    groups.push({ lines: entry.lines, pIdx: key, tag: entry.tag });
+  }
+  return groups;
+}
 // 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 { width: 0, height: 0 };
-  const width = Math.max(...lines.map((l) => l.x + l.width));
-  const height = lines[lines.length - 1].y + lines[lines.length - 1].height;
-  return { width, height };
+    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: "none" },
+  preserve: { structure: "expanded", spacing: "preserve", defaultFit: "frag" },
   glyph: { structure: "glyph", spacing: "preserve", defaultFit: "none" }
 };
 function escapeXml(text) {
@@ -30,14 +60,20 @@ function fontWeightNumeric(weight) {
 function colorToRGB(color) {
   if (!color)
     return "rgb(0, 0, 0)";
+  if (color[0] !== "#")
+    return color;
   let hex = color;
-  if (hex.length === 4 && hex[0] === "#") {
+  if (hex.length === 4) {
     hex = `#${hex[1]}${hex[1]}${hex[2]}${hex[2]}${hex[3]}${hex[3]}`;
   }
-  if (hex.length === 7 && hex[0] === "#") {
+  if (hex.length === 7) {
     return `rgb(${parseInt(hex.slice(1, 3), 16)}, ${parseInt(hex.slice(3, 5), 16)}, ${parseInt(hex.slice(5, 7), 16)})`;
   }
-  return "rgb(0, 0, 0)";
+  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;
@@ -62,7 +98,16 @@ function resolveOptions(opts) {
   }
   const style = opts.style ?? "xml";
   let fit = opts.fit ?? defaultFit;
-  const sizing = opts.sizing ?? "frame";
+  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";
@@ -71,85 +116,133 @@ function resolveOptions(opts) {
     console.warn(`SVGRenderer: fit="frag" downgraded to "text" when structure="flat"`);
     fit = "text";
   }
-  return { structure, spacing, style, fit, sizing, width: opts.width, height: opts.height, className: opts.className, 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 };
+}
+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: span.style.underline ? "underline" : span.style.strikethrough ? "line-through" : ""
+    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;
+  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 cssStyleString(s) {
-  const parts = [];
-  parts.push(`font-family: '${s.fontFamily}', sans-serif`);
-  parts.push(`font-size: ${s.fontSize}px`);
-  parts.push(`fill: ${colorToRGB(s.color)}`);
-  if (s.fontWeight !== 400)
-    parts.push(`font-weight: ${s.fontWeight}`);
-  if (s.fontStyle === "italic")
-    parts.push(`font-style: italic`);
-  if (s.decoration)
-    parts.push(`text-decoration: ${s.decoration}`);
-  return parts.join("; ");
-}
-function xmlStyleAttrs(s) {
-  let attrs = `font-family="${s.fontFamily}" font-size="${s.fontSize}" fill="${s.color}" font-weight="${s.fontWeight}"`;
-  if (s.fontStyle === "italic")
-    attrs += ' font-style="italic"';
-  if (s.decoration)
-    attrs += ` text-decoration="${s.decoration}"`;
-  return attrs;
+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);
-  let attrs = ` x="${x}" y="${y}"`;
+  const attrs = {
+    x: fmt(x),
+    y: fmt(y)
+  };
   if (runId)
-    attrs += ` id="${runId}"`;
+    attrs.id = runId;
   if (opts.style === "css") {
-    let css = cssStyleString(s);
+    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}"`;
+    attrs.style = css;
   } else {
-    attrs += ` ${xmlStyleAttrs(s)}`;
+    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"';
-  }
-  if (opts.structure === "flat") {
-    const anchor = line.alignment === "center" ? "middle" : line.alignment === "right" ? "end" : "start";
-    if (anchor !== "start")
-      attrs += ` text-anchor="${anchor}"`;
+      attrs["xml:space"] = "preserve";
   }
   return attrs;
 }
 function buildTspanAttrs(span, x, currentStyle) {
   const s = defaultStyleState(span);
-  let attrs = ` x="${x}"`;
+  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}"`;
+    attrs["font-weight"] = s.fontWeight;
   if (!currentStyle || s.fontStyle !== currentStyle.fontStyle)
-    attrs += ` font-style="${s.fontStyle}"`;
+    attrs["font-style"] = s.fontStyle;
   if (!currentStyle || s.fontFamily !== currentStyle.fontFamily)
-    attrs += ` font-family="${s.fontFamily}"`;
+    attrs["font-family"] = s.fontFamily;
   if (!currentStyle || s.fontSize !== currentStyle.fontSize)
-    attrs += ` font-size="${s.fontSize}"`;
+    attrs["font-size"] = fmt(s.fontSize);
   if (!currentStyle || s.color !== currentStyle.color)
-    attrs += ` fill="${s.color}"`;
+    attrs.fill = s.color;
   if (!currentStyle || s.decoration !== currentStyle.decoration) {
     if (s.decoration)
-      attrs += ` text-decoration="${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 };
 }
@@ -157,135 +250,286 @@ 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 = [xPos.toFixed(1)];
+  const positions = [fmt(xPos, 1)];
   for (let i = 0;i < span.glyphAdvances.length - 1; i++) {
-    xPos += span.glyphAdvances[i];
-    positions.push(xPos.toFixed(1));
+    xPos += span.glyphAdvances[i] + ls;
+    positions.push(fmt(xPos, 1));
   }
   return positions.join(" ");
 }
 function buildFitAttr(line, opts) {
   if (opts.fit === "text") {
-    return ` textLength="${line.width}" lengthAdjust="spacing"`;
+    return { textLength: fmt(line.width), lengthAdjust: "spacing" };
   }
-  return "";
+  return;
 }
 function buildSpanFitAttr(span, opts) {
   if (opts.fit === "frag") {
-    return ` textLength="${span.width}"`;
+    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;
+    }
   }
-  return "";
 }
 
-class SvgBuilder {
-  parts = [];
+class SvgAstBuilder {
+  root;
+  currentText = null;
   opts;
-  constructor(width, height, opts) {
+  constructor(width, height, opts, viewBox) {
     this.opts = opts;
-    const className = opts.className ? ` class="${escapeXml(opts.className)}"` : "";
-    this.parts.push(`<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}"${className}>
-`);
+    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) {
-      this.parts[0] = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" class="${escapeXml(opts.className)}">
-`;
+      svgAttrs.class = opts.className;
     }
+    this.root = el("svg", svgAttrs);
   }
-  addText(line, baseSpan, runId, yOverride, fontSizeOverride) {
-    let attrs;
+  openText(line, baseSpan, runId, yOverride, fontSizeOverride) {
+    this.closeText();
+    let textAttrs;
     if (yOverride !== undefined && fontSizeOverride !== undefined) {
       const s = defaultStyleState(baseSpan);
       const x = line.x;
-      attrs = ` x="${x}" y="${yOverride}"`;
+      const attrs = {
+        x: fmt(x),
+        y: fmt(yOverride)
+      };
       if (this.opts.style === "css") {
-        let css = cssStyleString(s);
+        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}"`;
+        attrs.style = css;
       } else {
-        let xml = ` font-family="${s.fontFamily}" font-size="${fontSizeOverride}" fill="${s.color}" font-weight="${s.fontWeight}"`;
+        attrs["font-family"] = s.fontFamily;
+        attrs["font-size"] = fmt(fontSizeOverride);
+        attrs.fill = s.color;
+        attrs["font-weight"] = s.fontWeight;
         if (s.fontStyle === "italic")
-          xml += ' font-style="italic"';
-        if (s.decoration)
-          xml += ` text-decoration="${s.decoration}"`;
+          attrs["font-style"] = "italic";
         if (this.opts.spacing === "preserve")
-          xml += ' xml:space="preserve"';
-        attrs += xml;
+          attrs["xml:space"] = "preserve";
       }
+      textAttrs = attrs;
     } else {
-      attrs = buildTextAttrs(line, baseSpan, this.opts, runId);
+      textAttrs = buildTextAttrs(line, baseSpan, this.opts, runId);
     }
-    const fit = buildFitAttr(line, this.opts);
-    this.parts.push(`  <text${attrs}${fit}>
-`);
-  }
-  addFlatSpan(text) {
-    this.parts.push(`${escapeXml(text)}`);
+    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;
   }
-  pushLine(line) {
-    this.parts.push(line);
+  addDebug(debugMarkup) {
+    if (debugMarkup) {
+      this.root.children.push(rawNode(`<!-- debug overlay -->
+${debugMarkup}
+`));
+    }
   }
-  closeText() {
-    this.parts.push(`</text>
-`);
+  addTextContent(text) {
+    if (this.currentText) {
+      this.currentText.children.push(textNode(text));
+    }
   }
-  addExpandedSpan(span, x, style) {
+  addTspan(span, x, style) {
     const { attrs, newStyle } = buildTspanAttrs(span, x, style);
-    const fit = buildSpanFitAttr(span, this.opts);
-    this.parts.push(`    <tspan${attrs}${fit}>${escapeXml(span.text)}</tspan>
-`);
+    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;
   }
-  addGlyphSpan(span, lineX) {
+  addGlyphTspan(span, lineX) {
     const positions = buildGlyphPositions(span, lineX);
+    const attrs = {};
     if (positions) {
-      this.parts.push(`    <tspan x="${positions}">${escapeXml(span.text)}</tspan>
-`);
-    } else {
-      this.parts.push(`    <tspan>${escapeXml(span.text)}</tspan>
-`);
+      attrs.x = positions;
     }
-  }
-  addDebug(debugOverlay) {
-    if (debugOverlay) {
-      this.parts.push(`<!-- debug overlay -->
-${debugOverlay}
-`);
+    const tspan = el("tspan", attrs, [textNode(span.text)]);
+    if (this.currentText) {
+      this.currentText.children.push(tspan);
     }
   }
-  build() {
-    this.parts.push(`</svg>
-`);
-    return this.parts.join("");
+  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, width, height, flags) {
+function renderDebugToSVG(lines, flags, frameSize, contentSize, columns, leftPad, rightPad) {
   const parts = [];
-  if (flags.frame && lines.length > 0) {
-    const first = lines[0];
-    const last = lines[lines.length - 1];
-    const maxW = Math.max(...lines.map((l) => l.x + l.width));
-    parts.push(`  <rect x="${first.x}" y="${first.y}" width="${maxW - first.x}" height="${last.y + last.height - first.y}"` + ` fill="none" stroke="rgba(255,200,0,0.6)" stroke-width="1" stroke-dasharray="6,2" />`);
+  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)}\xD7${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)}\xD7${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">\u26A0 content overflow: ${overflowX ? `\u0394x=${fmt(contentSize.width - frameSize.width)} ` : ""}${overflowY ? `\u0394y=${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">\xB6 ${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="${bx}" y="${by}" width="${bw}" height="${bh}" fill="rgba(0,150,255,0.10)" stroke="none" />`);
+      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="${bx}" y="${by}" width="${bw}" height="${bh}" fill="none" stroke="rgba(255,100,100,0.5)" stroke-width="1" />`);
+      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="${bx}" y1="${baselineY}" x2="${bx + bw}" y2="${baselineY}" stroke="rgba(100,100,255,0.5)" stroke-width="1" />`);
+      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="${bx}" y1="${baselineY - line.ascent}" x2="${bx + bw}" y2="${baselineY - line.ascent}" stroke="rgba(100,255,100,0.4)" stroke-width="0.5" stroke-dasharray="3,2" />`);
-      parts.push(`  <line x1="${bx}" y1="${baselineY + line.descent}" x2="${bx + bw}" y2="${baselineY + line.descent}" stroke="rgba(100,255,100,0.4)" stroke-width="0.5" stroke-dasharray="3,2" />`);
+      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="${bx}" y="${by - 2}" font-size="9" fill="rgba(0,0,0,0.55)" font-family="monospace">y=${by.toFixed(1)} x=${bx.toFixed(1)} w=${bw.toFixed(1)} h=${bh.toFixed(1)} bl=${baselineY.toFixed(1)}</text>`);
+      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) {
@@ -293,30 +537,37 @@ function renderDebugToSVG(lines, width, height, flags) {
           continue;
         const rx = line.x + span.x;
         const ry = baselineY - span.fontMetrics.ascent;
-        parts.push(`  <rect x="${rx}" y="${ry}" width="${span.width}" height="${span.fontMetrics.ascent + span.fontMetrics.descent}" fill="none" stroke="rgba(200,100,255,0.4)" stroke-width="0.5" />`);
+        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);
-  let svgWidth;
-  let svgHeight;
-  if (opts.sizing === "content") {
-    const bbox = computeBBox(lines);
-    svgWidth = bbox.width;
-    svgHeight = bbox.height;
-  } else {
-    if (opts.width === undefined || opts.height === undefined) {
-      throw new Error(`renderToSVG: sizing="frame" requires explicit width and height. ` + `Got width=${opts.width}, height=${opts.height}. ` + `Use renderResultToSVG(result, options) to auto-pass dimensions.`);
-    }
-    svgWidth = opts.width;
-    svgHeight = opts.height;
-  }
-  const builder = new SvgBuilder(svgWidth, svgHeight, opts);
+  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) {
@@ -324,18 +575,14 @@ function renderToSVG(lines, options = {}) {
           continue;
         const runIdx = span.itemIndex;
         if (runIdx !== currentRunIdx) {
-          if (currentRunIdx !== -1) {
-            builder.closeText();
-          }
-          const runId = span.paragraphId ? `${span.paragraphId}-${runIdx}` : undefined;
-          builder.addText(line, span, runId);
+          builder.closeText();
+          const runId = span.tag ? `${span.tag}-${runIdx}` : undefined;
+          builder.openText(line, span, runId);
           currentRunIdx = runIdx;
         }
-        builder.addGlyphSpan(span, line.x);
-      }
-      if (currentRunIdx !== -1) {
-        builder.closeText();
+        builder.addGlyphTspan(span, line.x);
       }
+      builder.closeText();
     } else if (opts.structure === "flat") {
       const groups = [];
       for (const span of line.spans) {
@@ -343,56 +590,113 @@ function renderToSVG(lines, options = {}) {
           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.fontSize === fontSize) {
+        if (last && last.targetY === targetY && last.signature === sig) {
           last.spans.push(span);
         } else {
-          groups.push({ spans: [span], targetY, fontSize });
+          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("");
-        let attrs = ` x="${line.x}" y="${group.targetY}" font-family="${s.fontFamily}" font-size="${group.fontSize}" fill="${s.color}" font-weight="${s.fontWeight}"`;
+        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")
-          attrs += ' font-style="italic"';
+          textAttrs["font-style"] = "italic";
         if (s.decoration)
-          attrs += ` text-decoration="${s.decoration}"`;
-        attrs += ' xml:space="preserve"';
-        if (line.alignment === "center")
-          attrs += ' text-anchor="middle"';
-        else if (line.alignment === "right")
-          attrs += ' text-anchor="end"';
-        builder.pushLine(`  <text${attrs}>${text}</text>
+          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 baseSpan = line.spans.find((f) => f.type === "text" && f.text.length > 0) || line.spans[0];
-      if (!baseSpan)
-        continue;
-      builder.addText(line, baseSpan);
-      let currentStyle = null;
+      const groups = [];
       for (const span of line.spans) {
         if (!span.text)
           continue;
-        const x = span.x;
-        const shouldRender = span.type !== "space" || opts.spacing === "preserve";
-        if (shouldRender) {
-          const newStyle = builder.addExpandedSpan(span, x, currentStyle);
-          if (span.type !== "space") {
-            currentStyle = newStyle;
+        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();
       }
-      builder.closeText();
     }
   }
   if (opts.debug) {
-    const debugSvg = renderDebugToSVG(lines, svgWidth, svgHeight, 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 builder.build();
+  return serializeSvg(builder.root);
 }
 function renderParagraphToSVG(lines, paragraphWidth, paragraphHeight, options) {
   return renderToSVG(lines, {
@@ -409,18 +713,93 @@ function renderResultToSVG(result, options) {
   });
 }
 // src/CanvasRenderer.ts
-function fontWeightCSS(weight) {
+function fontWeightNumeric2(weight) {
   if (weight === "bold")
-    return "bold";
+    return 700;
   if (weight === "normal")
-    return "normal";
+    return 400;
   if (typeof weight === "number")
-    return String(weight);
-  return "normal";
+    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;
@@ -443,42 +822,13 @@ function renderToCanvas(ctx, lines, options = {}) {
     ctx.clearRect(0, 0, canvasWidth, canvasHeight);
   }
   for (const line of lines) {
-    const baselineY = line.y + line.baseline;
-    for (const span of line.spans) {
-      const x = line.x + span.x;
-      const style = fontStyleCSS(span.style.fontStyle);
-      const weight = fontWeightCSS(span.style.fontWeight);
-      const size = span.fontMetrics.fontSize;
-      const family = span.style.fontFamily;
-      ctx.font = `${style} ${weight} ${size}px ${family}`;
-      ctx.fillStyle = span.style.color || "#000000";
-      ctx.textBaseline = "alphabetic";
-      if (preserveSpaces || span.type !== "space") {
-        ctx.fillText(span.text, x, baselineY);
-      }
-      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);
+    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);
       }
     }
   }
@@ -488,7 +838,10 @@ function renderToCanvas(ctx, lines, options = {}) {
 }
 function renderDebugToCanvas(ctx, lines, _width, _height, flags) {
   ctx.save();
-  if (flags.frame && lines.length > 0) {
+  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));
@@ -496,12 +849,47 @@ function renderDebugToCanvas(ctx, lines, _width, _height, flags) {
     const frameY = first.y;
     const frameW = maxW - frameX;
     const frameH = last.y + last.height - first.y;
-    ctx.strokeStyle = "rgba(255,200,0,0.6)";
-    ctx.lineWidth = 1;
-    ctx.setLineDash([6, 2]);
+    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)}\xD7${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)}\xD7${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(`\u0394x=${(bbox.width - _width).toFixed(0)}`);
+      if (overflowY)
+        warnParts.push(`\u0394y=${(bbox.height - _height).toFixed(0)}`);
+      ctx.fillText(`\u26A0 content overflow: ${warnParts.join(" ")}`, 4, _height + 4);
+    }
   }
-  ctx.setLineDash([]);
   for (const line of lines) {
     const bx = line.x;
     const by = line.y;
@@ -514,12 +902,12 @@ function renderDebugToCanvas(ctx, lines, _width, _height, flags) {
     }
     if (flags.box) {
       ctx.strokeStyle = "rgba(255,100,100,0.5)";
-      ctx.lineWidth = 1;
+      ctx.lineWidth = sw;
       ctx.strokeRect(bx, by, bw, bh);
     }
     if (flags.baseline) {
       ctx.strokeStyle = "rgba(100,100,255,0.5)";
-      ctx.lineWidth = 1;
+      ctx.lineWidth = sw;
       ctx.beginPath();
       ctx.moveTo(bx, baselineY);
       ctx.lineTo(bx + bw, baselineY);
@@ -529,7 +917,7 @@ function renderDebugToCanvas(ctx, lines, _width, _height, flags) {
       const ascentY = baselineY - line.ascent;
       const descentY = baselineY + line.descent;
       ctx.strokeStyle = "rgba(100,255,100,0.4)";
-      ctx.lineWidth = 0.5;
+      ctx.lineWidth = sw;
       ctx.setLineDash([3, 2]);
       ctx.beginPath();
       ctx.moveTo(bx, ascentY);
@@ -558,17 +946,229 @@ function renderDebugToCanvas(ctx, lines, _width, _height, flags) {
         const rw = span.width;
         const rh = span.fontMetrics.ascent + span.fontMetrics.descent;
         ctx.strokeStyle = "rgba(200,100,255,0.4)";
-        ctx.lineWidth = 0.5;
+        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
+  renderDebugToCanvas,
+  renderCursor,
+  posToCharIndex,
+  charIndexToPos,
+  charAtPoint
 };