@vyaz/renderer 0.0.1 → 0.0.2

package/dist/index.js

@@ -0,0 +1,574 @@
+// @bun
+// src/utils.ts
+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 };
+}
+
+// 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" },
+  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)";
+  let hex = color;
+  if (hex.length === 4 && hex[0] === "#") {
+    hex = `#${hex[1]}${hex[1]}${hex[2]}${hex[2]}${hex[3]}${hex[3]}`;
+  }
+  if (hex.length === 7 && hex[0] === "#") {
+    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)";
+}
+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;
+  const sizing = opts.sizing ?? "frame";
+  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, sizing, width: opts.width, height: opts.height, className: opts.className, debug: opts.debug };
+}
+function defaultStyleState(span) {
+  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" : ""
+  };
+}
+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;
+}
+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 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}"`;
+  if (runId)
+    attrs += ` id="${runId}"`;
+  if (opts.style === "css") {
+    let css = cssStyleString(s);
+    if (opts.spacing === "preserve")
+      css += "; white-space: pre";
+    attrs += ` style="${css}"`;
+  } else {
+    attrs += ` ${xmlStyleAttrs(s)}`;
+    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}"`;
+  }
+  return attrs;
+}
+function buildTspanAttrs(span, x, currentStyle) {
+  const s = defaultStyleState(span);
+  let attrs = ` x="${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="${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}"`;
+  }
+  return { attrs, newStyle: s };
+}
+function buildGlyphPositions(span, _lineX) {
+  if (!span.glyphAdvances || span.glyphAdvances.length === 0) {
+    return "";
+  }
+  const spanX = span.x;
+  let xPos = spanX;
+  const positions = [xPos.toFixed(1)];
+  for (let i = 0;i < span.glyphAdvances.length - 1; i++) {
+    xPos += span.glyphAdvances[i];
+    positions.push(xPos.toFixed(1));
+  }
+  return positions.join(" ");
+}
+function buildFitAttr(line, opts) {
+  if (opts.fit === "text") {
+    return ` textLength="${line.width}" lengthAdjust="spacing"`;
+  }
+  return "";
+}
+function buildSpanFitAttr(span, opts) {
+  if (opts.fit === "frag") {
+    return ` textLength="${span.width}"`;
+  }
+  return "";
+}
+
+class SvgBuilder {
+  parts = [];
+  opts;
+  constructor(width, height, opts) {
+    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}>
+`);
+    if (opts.className) {
+      this.parts[0] = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" class="${escapeXml(opts.className)}">
+`;
+    }
+  }
+  addText(line, baseSpan, runId, yOverride, fontSizeOverride) {
+    let attrs;
+    if (yOverride !== undefined && fontSizeOverride !== undefined) {
+      const s = defaultStyleState(baseSpan);
+      const x = line.x;
+      attrs = ` x="${x}" y="${yOverride}"`;
+      if (this.opts.style === "css") {
+        let css = cssStyleString(s);
+        if (this.opts.spacing === "preserve")
+          css += "; white-space: pre";
+        attrs += ` style="${css}"`;
+      } else {
+        let xml = ` font-family="${s.fontFamily}" font-size="${fontSizeOverride}" fill="${s.color}" font-weight="${s.fontWeight}"`;
+        if (s.fontStyle === "italic")
+          xml += ' font-style="italic"';
+        if (s.decoration)
+          xml += ` text-decoration="${s.decoration}"`;
+        if (this.opts.spacing === "preserve")
+          xml += ' xml:space="preserve"';
+        attrs += xml;
+      }
+    } else {
+      attrs = 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)}`);
+  }
+  pushLine(line) {
+    this.parts.push(line);
+  }
+  closeText() {
+    this.parts.push(`</text>
+`);
+  }
+  addExpandedSpan(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>
+`);
+    return newStyle;
+  }
+  addGlyphSpan(span, lineX) {
+    const positions = buildGlyphPositions(span, lineX);
+    if (positions) {
+      this.parts.push(`    <tspan x="${positions}">${escapeXml(span.text)}</tspan>
+`);
+    } else {
+      this.parts.push(`    <tspan>${escapeXml(span.text)}</tspan>
+`);
+    }
+  }
+  addDebug(debugOverlay) {
+    if (debugOverlay) {
+      this.parts.push(`<!-- debug overlay -->
+${debugOverlay}
+`);
+    }
+  }
+  build() {
+    this.parts.push(`</svg>
+`);
+    return this.parts.join("");
+  }
+}
+function renderDebugToSVG(lines, width, height, flags) {
+  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" />`);
+  }
+  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" />`);
+    }
+    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" />`);
+    }
+    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" />`);
+    }
+    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" />`);
+    }
+    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>`);
+    }
+    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="${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" />`);
+      }
+    }
+  }
+  return parts.join(`
+`);
+}
+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);
+  for (const line of lines) {
+    if (opts.structure === "glyph") {
+      let currentRunIdx = -1;
+      for (const span of line.spans) {
+        if (!span.text)
+          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);
+          currentRunIdx = runIdx;
+        }
+        builder.addGlyphSpan(span, line.x);
+      }
+      if (currentRunIdx !== -1) {
+        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 fontSize = span.fontMetrics.fontSize;
+        const last = groups[groups.length - 1];
+        if (last && last.targetY === targetY && last.fontSize === fontSize) {
+          last.spans.push(span);
+        } else {
+          groups.push({ spans: [span], targetY, fontSize });
+        }
+      }
+      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}"`;
+        if (s.fontStyle === "italic")
+          attrs += ' 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>
+`);
+      }
+    } 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;
+      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;
+          }
+        }
+      }
+      builder.closeText();
+    }
+  }
+  if (opts.debug) {
+    const debugSvg = renderDebugToSVG(lines, svgWidth, svgHeight, opts.debug);
+    builder.addDebug(debugSvg);
+  }
+  return builder.build();
+}
+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 fontWeightCSS(weight) {
+  if (weight === "bold")
+    return "bold";
+  if (weight === "normal")
+    return "normal";
+  if (typeof weight === "number")
+    return String(weight);
+  return "normal";
+}
+function fontStyleCSS(style) {
+  return style === "italic" ? "italic" : "normal";
+}
+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 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);
+      }
+    }
+  }
+  if (options.debug) {
+    renderDebugToCanvas(ctx, lines, canvasWidth, canvasHeight, options.debug);
+  }
+}
+function renderDebugToCanvas(ctx, lines, _width, _height, flags) {
+  ctx.save();
+  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));
+    const frameX = first.x;
+    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.strokeRect(frameX, frameY, frameW, frameH);
+  }
+  ctx.setLineDash([]);
+  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 = 1;
+      ctx.strokeRect(bx, by, bw, bh);
+    }
+    if (flags.baseline) {
+      ctx.strokeStyle = "rgba(100,100,255,0.5)";
+      ctx.lineWidth = 1;
+      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 = 0.5;
+      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 = 0.5;
+        ctx.strokeRect(rx, ry, rw, rh);
+      }
+    }
+  }
+  ctx.restore();
+}
+export {
+  renderToSVG,
+  renderToCanvas,
+  renderResultToSVG,
+  renderParagraphToSVG,
+  renderDebugToCanvas
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vyaz/renderer",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "type": "module",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -15,6 +15,9 @@
     "@vyaz/core": "*"
   },
   "devDependencies": {
+    "@types/node": "^26.1.1",
+    "is-svg": "^6.1.0",
+    "svg-parser": "^2.0.4",
     "typescript": "^5.4.0"
   }
 }

package/src/CanvasRenderer.ts

@@ -1,7 +1,7 @@
 /**
- * CanvasRenderer.ts — render LineBox[] → Canvas.
+ * CanvasRenderer.ts — render Line[] → Canvas.
  *
- * Takes ready LineBox[] with absolute coordinates.
+ * Takes ready Line[] with absolute coordinates.
  * Does not compute anything — only draws (dumb drawer principle).
  *
  * Options:
@@ -11,7 +11,7 @@
  *   - debug: DebugFlags — debug overlays
  */
 
-import type { LineBox, FragmentBox } from '@vyaz/core';
+import type { Line, Span } from '@vyaz/core';
 import type { DebugFlags } from './types.js';
 import { computeBBox } from './utils.js';
 
@@ -23,8 +23,8 @@ export interface CanvasRenderOptions {
    */
   sizing?: 'frame' | 'content';
   /**
-   * When true: render space fragments with a space character.
-   * When false (default): skip space fragments (position is already accounted for in x).
+   * When true: render space spans with a space character.
+   * When false (default): skip space spans (position is already accounted for in x).
    */
   preserveSpaces?: boolean;
   /** Background color for clearing. If omitted, canvas is cleared transparent. */
@@ -47,15 +47,15 @@ function fontStyleCSS(style: string): string {
 }
 
 /**
- * Render LineBox[] array to Canvas.
+ * Render Line[] array to Canvas.
  *
  * @param ctx — Canvas 2D rendering context
- * @param lines — ready LineBox[] with absolute coordinates
+ * @param lines — ready Line[] with absolute coordinates
  * @param options — rendering options
  */
 export function renderToCanvas(
   ctx: CanvasRenderingContext2D | any,
-  lines: LineBox[],
+  lines: Line[],
   options: CanvasRenderOptions = {},
 ): void {
   const sizing = options.sizing ?? 'frame';
@@ -88,49 +88,49 @@ export function renderToCanvas(
   for (const line of lines) {
     const baselineY = line.y + line.baseline;
 
-    for (const frag of line.fragments) {
-      const x = line.x + frag.x;
+    for (const span of line.spans) {
+      const x = line.x + span.x;
 
       // Font setting
-      const style = fontStyleCSS(frag.style.fontStyle);
-      const weight = fontWeightCSS(frag.style.fontWeight);
-      const size = frag.fontMetrics.fontSize;
-      const family = frag.style.fontFamily;
+      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 = frag.style.color || '#000000';
+      ctx.fillStyle = span.style.color || '#000000';
       ctx.textBaseline = 'alphabetic';
 
       // Draw text
-      if (preserveSpaces || frag.type !== 'space') {
-        ctx.fillText(frag.text, x, baselineY);
+      if (preserveSpaces || span.type !== 'space') {
+        ctx.fillText(span.text, x, baselineY);
       }
 
       // Underline
-      if (frag.style.underline) {
+      if (span.style.underline) {
         const ulY = baselineY + 2;
-        ctx.strokeStyle = frag.style.color || '#000000';
+        ctx.strokeStyle = span.style.color || '#000000';
         ctx.lineWidth = 1;
         ctx.beginPath();
         ctx.moveTo(x, ulY);
-        ctx.lineTo(x + frag.width, ulY);
+        ctx.lineTo(x + span.width, ulY);
         ctx.stroke();
       }
 
       // Strikethrough
-      if (frag.style.strikethrough) {
-        const stY = baselineY - frag.fontMetrics.ascent * 0.4;
-        ctx.strokeStyle = frag.style.color || '#000000';
+      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 + frag.width, stY);
+        ctx.lineTo(x + span.width, stY);
         ctx.stroke();
       }
 
       // InlineWidget (simple rectangle)
-      if (frag.inlineWidget) {
-        const iw = frag.inlineWidget;
-        const iwY = baselineY - (iw.height || frag.fontMetrics.ascent) + (iw.baselineOffset || 0);
+      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);
       }
@@ -148,7 +148,7 @@ export function renderToCanvas(
 /** Draw debug overlays on canvas */
 export function renderDebugToCanvas(
   ctx: CanvasRenderingContext2D,
-  lines: LineBox[],
+  lines: Line[],
   _width: number,
   _height: number,
   flags: DebugFlags,
@@ -230,14 +230,14 @@ export function renderDebugToCanvas(
       ctx.fillText(label, bx, labelY);
     }
 
-    // Run boxes — purple rects around FragmentBox
+    // Run boxes — purple rects around Spans
     if (flags.runs) {
-      for (const frag of line.fragments) {
-        if (frag.width <= 0) continue;
-        const rx = line.x + frag.x;
-        const ry = baselineY - frag.fontMetrics.ascent;
-        const rw = frag.width;
-        const rh = frag.fontMetrics.ascent + frag.fontMetrics.descent;
+      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 = 0.5;
         ctx.strokeRect(rx, ry, rw, rh);

package/src/SVGRenderer.ts

@@ -1,20 +1,23 @@
 /**
  * SVGRenderer.ts — SVG text builder.
  *
- * Converts LineBox[] into SVG markup using a builder pattern.
+ * Converts Line[] into SVG markup using a builder pattern.
  *
- * Three presets:
+ * Four presets:
  *   flat     — all text in one <text> element, xml:space="preserve", no <tspan>
- *   browser  — expanded <tspan> per run, NO xml:space, spaces skipped (browser collapses them)
- *   preserve — expanded <tspan> per run, xml:space="preserve", spaces render as <tspan> </tspan>,
- *              textLength on each line by default for pixel-perfect width
+ *   browser  — expanded <tspan> per run, xml:space="preserve", diff attributes, no textLength
+ *   preserve — expanded <tspan> per run, xml:space="preserve", diff attributes, textLength
+ *   glyph    — <tspan> per glyph with per-character x positions, xml:space="preserve"
+ *
+ * All presets preserve whitespace via xml:space="preserve". Space spans (type: 'space')
+ * are rendered as separate <tspan> elements with explicit x coordinates.
  *
  * Usage:
  *   const svg = renderToSVG(lines, { preset: 'browser' })
  *   const svg = renderToSVG(lines, { preset: 'preserve', style: 'css', fit: 'frag' })
  */
 
-import type { LineBox, FragmentBox, ParagraphLayoutResult } from '@vyaz/core';
+import type { Line, Span, ParagraphLayoutResult } from '@vyaz/core';
 import type { DebugFlags } from './types.js';
 import { computeBBox } from './utils.js';
 
@@ -66,7 +69,7 @@ type ResolvedOptions = {
 
 const PRESETS: Record<SvgPreset, { structure: StructureMode; spacing: SpacingMode; defaultFit: SvgFit }> = {
   flat:     { structure: 'flat',     spacing: 'preserve', defaultFit: 'none' },
-  browser:  { structure: 'expanded', spacing: 'browser',  defaultFit: 'none' },
+  browser:  { structure: 'expanded', spacing: 'preserve', defaultFit: 'none' },
   preserve: { structure: 'expanded', spacing: 'preserve', defaultFit: 'none' },
   glyph:    { structure: 'glyph',    spacing: 'preserve', defaultFit: 'none' },
 };
@@ -108,11 +111,11 @@ function colorToRGB(color: string): string {
 }
 
 /** Compute gutter widths per line for justify alignment */
-function computeGutterWidths(line: LineBox, totalSlack: number): number[] {
-  const spaceFrags = line.fragments.filter(f => f.type === 'space' || f.text.trim() === '');
-  if (spaceFrags.length === 0) return [];
-  const perGap = totalSlack / spaceFrags.length;
-  return line.fragments.map(f => (f.type === 'space' || f.text.trim() === '') ? perGap : 0);
+function computeGutterWidths(line: Line, totalSlack: number): number[] {
+  const spaceSpans = line.spans.filter(f => f.type === 'space' || f.text.trim() === '');
+  if (spaceSpans.length === 0) return [];
+  const perGap = totalSlack / spaceSpans.length;
+  return line.spans.map(f => (f.type === 'space' || f.text.trim() === '') ? perGap : 0);
 }
 
 // ── Resolve options ──────────────────────────────────────────────────────
@@ -168,14 +171,14 @@ interface StyleState {
   decoration: string;
 }
 
-function defaultStyleState(frag: FragmentBox): StyleState {
+function defaultStyleState(span: Span): StyleState {
   return {
-    fontFamily: frag.style.fontFamily || 'Arial',
-    fontSize: frag.fontMetrics.fontSize || 16,
-    fontWeight: fontWeightNumeric(frag.style.fontWeight),
-    color: frag.style.color || '#000000',
-    fontStyle: frag.style.fontStyle || 'normal',
-    decoration: frag.style.underline ? 'underline' : frag.style.strikethrough ? 'line-through' : '',
+    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' : '',
   };
 }
 
@@ -206,10 +209,10 @@ function xmlStyleAttrs(s: StyleState): string {
 }
 
 /** Build attributes for <text> element */
-function buildTextAttrs(line: LineBox, frag: FragmentBox, opts: ResolvedOptions, runId?: string): string {
+function buildTextAttrs(line: Line, span: Span, opts: ResolvedOptions, runId?: string): string {
   const x = line.x;
   const y = line.y + line.baseline;
-  const s = defaultStyleState(frag);
+  const s = defaultStyleState(span);
 
   let attrs = ` x="${x}" y="${y}"`;
   if (runId) attrs += ` id="${runId}"`;
@@ -235,8 +238,8 @@ function buildTextAttrs(line: LineBox, frag: FragmentBox, opts: ResolvedOptions,
 }
 
 /** Build attributes for <tspan> (expanded mode — only diff from current style) */
-function buildTspanAttrs(frag: FragmentBox, x: number, currentStyle: StyleState | null): { attrs: string; newStyle: StyleState } {
-  const s = defaultStyleState(frag);
+function buildTspanAttrs(span: Span, x: number, currentStyle: StyleState | null): { attrs: string; newStyle: StyleState } {
+  const s = defaultStyleState(span);
   let attrs = ` x="${x}"`;
 
   if (currentStyle && equalStyle(s, currentStyle)) {
@@ -259,34 +262,34 @@ function buildTspanAttrs(frag: FragmentBox, x: number, currentStyle: StyleState
 }
 
 /** Build per-glyph x positions for glyph mode */
-function buildGlyphPositions(frag: FragmentBox, _lineX: number): string {
-  if (!frag.glyphAdvances || frag.glyphAdvances.length === 0) {
+function buildGlyphPositions(span: Span, _lineX: number): string {
+  if (!span.glyphAdvances || span.glyphAdvances.length === 0) {
     return '';
   }
-  // frag.x is already absolute — computed by PositioningEngine.
+  // span.x is already absolute — computed by PositioningEngine.
   // lineX is NOT added because that would double-shift.
-  const fragX = frag.x;
-  let xPos = fragX;
+  const spanX = span.x;
+  let xPos = spanX;
   const positions: string[] = [xPos.toFixed(1)];
-  for (let i = 0; i < frag.glyphAdvances.length - 1; i++) {
-    xPos += frag.glyphAdvances[i];
+  for (let i = 0; i < span.glyphAdvances.length - 1; i++) {
+    xPos += span.glyphAdvances[i];
     positions.push(xPos.toFixed(1));
   }
   return positions.join(' ');
 }
 
 /** Build textLength attribute for a line */
-function buildFitAttr(line: LineBox, opts: ResolvedOptions): string {
+function buildFitAttr(line: Line, opts: ResolvedOptions): string {
   if (opts.fit === 'text') {
     return ` textLength="${line.width}" lengthAdjust="spacing"`;
   }
   return '';
 }
 
-/** Build textLength for a fragment */
-function buildFragFitAttr(frag: FragmentBox, opts: ResolvedOptions): string {
+/** Build textLength for a span */
+function buildSpanFitAttr(span: Span, opts: ResolvedOptions): string {
   if (opts.fit === 'frag') {
-    return ` textLength="${frag.width}"`;
+    return ` textLength="${span.width}"`;
   }
   return '';
 }
@@ -306,35 +309,60 @@ class SvgBuilder {
     }
   }
 
-  addText(line: LineBox, baseFrag: FragmentBox, runId?: string): void {
-    const attrs = buildTextAttrs(line, baseFrag, this.opts, runId);
+  addText(line: Line, baseSpan: Span, runId?: string, yOverride?: number, fontSizeOverride?: number): void {
+    let attrs: string;
+    if (yOverride !== undefined && fontSizeOverride !== undefined) {
+      // For flat mode sub/superscript — override y and font-size
+      const s = defaultStyleState(baseSpan);
+      const x = line.x;
+      attrs = ` x="${x}" y="${yOverride}"`;
+      if (this.opts.style === 'css') {
+        let css = cssStyleString(s);
+        if (this.opts.spacing === 'preserve') css += '; white-space: pre';
+        attrs += ` style="${css}"`;
+      } else {
+        let xml = ` font-family="${s.fontFamily}" font-size="${fontSizeOverride}" fill="${s.color}" font-weight="${s.fontWeight}"`;
+        if (s.fontStyle === 'italic') xml += ' font-style="italic"';
+        if (s.decoration) xml += ` text-decoration="${s.decoration}"`;
+        if (this.opts.spacing === 'preserve') xml += ' xml:space="preserve"';
+        attrs += xml;
+      }
+    } else {
+      attrs = buildTextAttrs(line, baseSpan, this.opts, runId);
+    }
     const fit = buildFitAttr(line, this.opts);
     this.parts.push(`  <text${attrs}${fit}>\n`);
   }
 
-  addFlatFrag(text: string): void {
-    this.parts.push(`    ${escapeXml(text)}`);
+  addFlatSpan(text: string): void {
+    this.parts.push(`${escapeXml(text)}`);
+  }
+
+  /** Write a raw SVG line (for flat mode where each span is its own <text>). */
+  pushLine(line: string): void {
+    this.parts.push(line);
+  }
+
+  closeText(): void {
+    this.parts.push('</text>\n');
   }
 
-  addExpandedFrag(frag: FragmentBox, x: number, style: StyleState | null): StyleState {
-    const { attrs, newStyle } = buildTspanAttrs(frag, x, style);
-    const fit = buildFragFitAttr(frag, this.opts);
-    this.parts.push(`    <tspan${attrs}${fit}>${escapeXml(frag.text)}</tspan>\n`);
+  addExpandedSpan(span: Span, x: number, style: StyleState | null): StyleState {
+    const { attrs, newStyle } = buildTspanAttrs(span, x, style);
+    const fit = buildSpanFitAttr(span, this.opts);
+    this.parts.push(`    <tspan${attrs}${fit}>${escapeXml(span.text)}</tspan>\n`);
     return newStyle;
   }
 
-  addGlyphFrag(frag: FragmentBox, lineX: number): void {
-    const positions = buildGlyphPositions(frag, lineX);
+  addGlyphSpan(span: Span, lineX: number): void {
+    const positions = buildGlyphPositions(span, lineX);
     if (positions) {
-      this.parts.push(`    <tspan x="${positions}">${escapeXml(frag.text)}</tspan>\n`);
+      this.parts.push(`    <tspan x="${positions}">${escapeXml(span.text)}</tspan>\n`);
     } else {
-      this.parts.push(`    <tspan>${escapeXml(frag.text)}</tspan>\n`);
+      this.parts.push(`    <tspan>${escapeXml(span.text)}</tspan>\n`);
     }
   }
 
-  closeText(): void {
-    this.parts.push('  </text>\n');
-  }
 
   addDebug(debugOverlay: string): void {
     if (debugOverlay) {
@@ -350,7 +378,7 @@ class SvgBuilder {
 
 // ── Debug overlay ────────────────────────────────────────────────────────
 
-function renderDebugToSVG(lines: LineBox[], width: number, height: number, flags: DebugFlags): string {
+function renderDebugToSVG(lines: Line[], width: number, height: number, flags: DebugFlags): string {
   const parts: string[] = [];
 
   if (flags.frame && lines.length > 0) {
@@ -384,11 +412,11 @@ function renderDebugToSVG(lines: LineBox[], width: number, height: number, flags
       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>`);
     }
     if (flags.runs) {
-      for (const frag of line.fragments) {
-        if (frag.width <= 0) continue;
-        const rx = line.x + frag.x;
-        const ry = baselineY - frag.fontMetrics.ascent;
-        parts.push(`  <rect x="${rx}" y="${ry}" width="${frag.width}" height="${frag.fontMetrics.ascent + frag.fontMetrics.descent}" fill="none" stroke="rgba(200,100,255,0.4)" stroke-width="0.5" />`);
+      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="${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" />`);
       }
     }
   }
@@ -399,13 +427,13 @@ function renderDebugToSVG(lines: LineBox[], width: number, height: number, flags
 // ── Main render logic ────────────────────────────────────────────────────
 
 /**
- * Render LineBox[] into SVG string.
+ * Render Line[] into SVG string.
  *
- * @param lines — layout lines with fragments
+ * @param lines — layout lines with spans
  * @param options — rendering options (preset + style/fit/sizing modifiers)
  * @returns SVG string
  */
-export function renderToSVG(lines: LineBox[], options: SVGRenderOptions = {}): string {
+export function renderToSVG(lines: Line[], options: SVGRenderOptions = {}): string {
   const opts = resolveOptions(options);
 
   // Determine canvas size
@@ -435,50 +463,68 @@ export function renderToSVG(lines: LineBox[], options: SVGRenderOptions = {}): s
     if (opts.structure === 'glyph') {
       // Per-glyph positioning with run-based <text> grouping
       let currentRunIdx = -1;
-      for (const frag of line.fragments) {
-        if (!frag.text) continue;
-        const runIdx = frag.itemIndex;
+      for (const span of line.spans) {
+        if (!span.text) continue;
+        const runIdx = span.itemIndex;
         if (runIdx !== currentRunIdx) {
           if (currentRunIdx !== -1) {
             builder.closeText();
           }
-          const runId = frag.paragraphId ? `${frag.paragraphId}-${runIdx}` : undefined;
-          builder.addText(line, frag, runId);
+          const runId = span.paragraphId ? `${span.paragraphId}-${runIdx}` : undefined;
+          builder.addText(line, span, runId);
           currentRunIdx = runIdx;
         }
-        builder.addGlyphFrag(frag, line.x);
+        builder.addGlyphSpan(span, line.x);
       }
       if (currentRunIdx !== -1) {
         builder.closeText();
       }
+    } else if (opts.structure === 'flat') {
+      // flat mode: group spans by (baseline + offset). Each group → one <text>.
+      const groups: { spans: Span[]; targetY: number; fontSize: number }[] = [];
+      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 fontSize = span.fontMetrics.fontSize;
+        const last = groups[groups.length - 1];
+        if (last && last.targetY === targetY && last.fontSize === fontSize) {
+          last.spans.push(span);
+        } else {
+          groups.push({ spans: [span], targetY, fontSize });
+        }
+      }
+      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}"`;
+        if (s.fontStyle === 'italic') attrs += ' font-style="italic"';
+        if (s.decoration) attrs += ` text-decoration="${s.decoration}"`;
+        attrs += ' xml:space="preserve"';
+        // text-anchor for center/right alignment
+        if (line.alignment === 'center') attrs += ' text-anchor="middle"';
+        else if (line.alignment === 'right') attrs += ' text-anchor="end"';
+        builder.pushLine(`  <text${attrs}>${text}</text>\n`);
+      }
     } else {
-      // flat / expanded: single <text> per line
-      const baseFrag = line.fragments.find(f => f.type === 'text' && f.text.length > 0) || line.fragments[0];
-      if (!baseFrag) continue;
-
-      builder.addText(line, baseFrag);
-
-      if (opts.structure === 'flat') {
-        // Concatenate all text on the line
-        const fullText = line.fragments.map(f => f.text).join('');
-        builder.addFlatFrag(fullText);
-      } else {
-        // expanded: each fragment as <tspan> with diff styles
-        let currentStyle: StyleState | null = null;
-        for (const frag of line.fragments) {
-          if (!frag.text) continue;
-          const x = frag.x;
-
-          const shouldRender = frag.type !== 'space' || opts.spacing === 'preserve';
-          if (shouldRender) {
-            const newStyle = builder.addExpandedFrag(frag, x, currentStyle);
-            if (frag.type !== 'space') {
-              currentStyle = newStyle;
-            }
+      // expanded: single <text> per line with <tspan> children
+      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: StyleState | null = null;
+      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;
           }
         }
       }
-
       builder.closeText();
     }
   }
@@ -495,7 +541,7 @@ export function renderToSVG(lines: LineBox[], options: SVGRenderOptions = {}): s
  * Render one ParagraphLayoutResult to SVG (convenience wrapper).
  */
 export function renderParagraphToSVG(
-  lines: LineBox[],
+  lines: Line[],
   paragraphWidth: number,
   paragraphHeight: number,
   options?: SVGRenderOptions,

package/src/index.ts

@@ -1,7 +1,7 @@
 /**
  * @vyaz/renderer — SVG and Canvas renderers.
  *
- * Converts LineBox[] (from @vyaz/core) into SVG strings or Canvas drawings.
+ * Converts Line[] (from @vyaz/core) into SVG strings or Canvas drawings.
  */
 
 export { renderToSVG, renderParagraphToSVG, renderResultToSVG } from './SVGRenderer.js';

package/src/utils.ts

@@ -2,12 +2,12 @@
  * render/utils.ts — shared renderer utilities.
  */
 
-import type { LineBox } from '@vyaz/core';
+import type { Line } from '@vyaz/core';
 
 /**
- * Compute the bounding box (content width + height) from an array of LineBox.
+ * Compute the bounding box (content width + height) from an array of Line.
  */
-export function computeBBox(lines: LineBox[]): { width: number; height: number } {
+export function computeBBox(lines: Line[]): { width: number; height: number } {
   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;