@vyaz/renderer 0.0.14 → 0.1.0

package/dist/SVGRenderer.d.ts

@@ -17,7 +17,7 @@
  *   const svg = renderToSVG(lines, { preset: 'browser' })
  *   const svg = renderToSVG(lines, { preset: 'preserve', style: 'css', fit: 'frag' })
  */
-import type { Line, ParagraphLayoutResult, MultiColumnConfig } from '@vyaz/core';
+import type { Line, ParagraphLayoutResult, TextFrameLayoutResult, MultiColumnConfig } from '@vyaz/core';
 import type { DebugFlags } from './types.js';
 export type SvgPreset = 'flat' | 'browser' | 'preserve' | 'glyph';
 export type SvgStyle = 'css' | 'xml';
@@ -63,15 +63,28 @@ export interface SVGRenderOptions {
     columns?: MultiColumnConfig;
     /** Left padding from frame (needed for column debug rendering). */
     paddingLeft?: number;
+    /**
+     * glyph preset only: draw `underline` / `strikethrough` as explicit `<line>`
+     * geometry. The glyph path positions each character with its own `x`, so it
+     * cannot rely on SVG `text-decoration` (which the flat/expanded paths use).
+     * Ignored by every other preset. Default `true`.
+     */
+    glyphDecorations?: boolean;
 }
 /**
- * Render Line[] into SVG string.
+ * Render a layout to an SVG string.
+ *
+ * Pass a full {@link TextFrameLayoutResult} (recommended) and the canvas size /
+ * `sizing` are derived from its `frame*` / `content*` / `fit*` fields — you only
+ * add render options (preset, style, debug). Passing a bare `Line[]` is the
+ * low-level form: you supply `width` / `height` / `sizing` yourself.
  *
- * @param lines — layout lines with spans
- * @param options — rendering options (preset + style/fit/sizing modifiers)
+ * @param input — a layout result, or bare layout lines
+ * @param options — rendering options (preset + style/fit/sizing modifiers); any
+ *                   field here overrides the value derived from a result
  * @returns SVG string
  */
-export declare function renderToSVG(lines: Line[], options?: SVGRenderOptions): string;
+export declare function renderToSVG(input: Line[] | TextFrameLayoutResult, options?: SVGRenderOptions): string;
 /**
  * Render one ParagraphLayoutResult to SVG (convenience wrapper).
  */

package/dist/SVGRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SVGRenderer.d.ts","sourceRoot":"","sources":["../src/SVGRenderer.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,KAAK,EAAE,IAAI,EAAQ,qBAAqB,EAAkB,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAEvG,OAAO,KAAK,EAAE,UAAU,EAAuB,MAAM,YAAY,CAAC;AAKlE,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,OAAO,CAAC;AAElE,MAAM,MAAM,QAAQ,GAAG,KAAK,GAAG,KAAK,CAAC;AAErC,MAAM,MAAM,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;AAE9C,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;AAE5C,MAAM,MAAM,aAAa,GAAG;IAAE,UAAU,EAAE,SAAS,CAAC;IAAC,QAAQ,EAAE,SAAS,CAAA;CAAE,CAAC;AAE3E,MAAM,WAAW,gBAAgB;IAC/B,uDAAuD;IACvD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,sGAAsG;IACtG,KAAK,CAAC,EAAE,QAAQ,CAAC;IACjB,mCAAmC;IACnC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;;OAKG;IACH,MAAM,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC;IACnC,iFAAiF;IACjF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gFAAgF;IAChF,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;OAKG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,sBAAsB;IACtB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,mEAAmE;IACnE,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAuyBD;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE,OAAO,GAAE,gBAAqB,GAAG,MAAM,CAkLjF;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,IAAI,EAAE,EACb,cAAc,EAAE,MAAM,EACtB,eAAe,EAAE,MAAM,EACvB,OAAO,CAAC,EAAE,gBAAgB,GACzB,MAAM,CAMR;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,iBAAiB,CAC/B,MAAM,EAAE,qBAAqB,EAC7B,OAAO,CAAC,EAAE,gBAAgB,GACzB,MAAM,CAMR"}
+{"version":3,"file":"SVGRenderer.d.ts","sourceRoot":"","sources":["../src/SVGRenderer.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,KAAK,EAAE,IAAI,EAAQ,qBAAqB,EAAE,qBAAqB,EAAkB,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAE9H,OAAO,KAAK,EAAE,UAAU,EAAuB,MAAM,YAAY,CAAC;AAKlE,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,OAAO,CAAC;AAElE,MAAM,MAAM,QAAQ,GAAG,KAAK,GAAG,KAAK,CAAC;AAErC,MAAM,MAAM,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;AAE9C,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;AAE5C,MAAM,MAAM,aAAa,GAAG;IAAE,UAAU,EAAE,SAAS,CAAC;IAAC,QAAQ,EAAE,SAAS,CAAA;CAAE,CAAC;AAE3E,MAAM,WAAW,gBAAgB;IAC/B,uDAAuD;IACvD,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,sGAAsG;IACtG,KAAK,CAAC,EAAE,QAAQ,CAAC;IACjB,mCAAmC;IACnC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;;;OAKG;IACH,MAAM,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC;IACnC,iFAAiF;IACjF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gFAAgF;IAChF,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;OAKG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,sBAAsB;IACtB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,mEAAmE;IACnE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AA8zBD;;;;;;;;;;;;GAYG;AACH,wBAAgB,WAAW,CACzB,KAAK,EAAE,IAAI,EAAE,GAAG,qBAAqB,EACrC,OAAO,GAAE,gBAAqB,GAC7B,MAAM,CA6QR;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,IAAI,EAAE,EACb,cAAc,EAAE,MAAM,EACtB,eAAe,EAAE,MAAM,EACvB,OAAO,CAAC,EAAE,gBAAgB,GACzB,MAAM,CAMR;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,iBAAiB,CAC/B,MAAM,EAAE,qBAAqB,EAC7B,OAAO,CAAC,EAAE,gBAAgB,GACzB,MAAM,CAMR"}

package/dist/index.browser.js

@@ -93,7 +93,7 @@ function resolveOptions(opts) {
     console.warn(`SVGRenderer: fit="frag" downgraded to "text" when structure="flat"`);
     fit = "text";
   }
-  return { structure, spacing, style, fit, sizingHorizontal, sizingVertical, width: opts.width, height: opts.height, className: opts.className, contentPadding: opts.contentPadding ?? 0, debug: opts.debug };
+  return { structure, spacing, style, fit, sizingHorizontal, sizingVertical, width: opts.width, height: opts.height, className: opts.className, contentPadding: opts.contentPadding ?? 0, debug: opts.debug, glyphDecorations: opts.glyphDecorations ?? true };
 }
 function resolveSize(lines, opts) {
   const needsBBox = opts.sizingHorizontal === "content" || opts.sizingVertical === "content";
@@ -223,13 +223,12 @@ function buildTspanAttrs(span, x, currentStyle) {
   }
   return { attrs, newStyle: s };
 }
-function buildGlyphPositions(span, _lineX) {
+function buildGlyphPositions(span, spanDX) {
   if (!span.glyphAdvances || span.glyphAdvances.length === 0) {
-    return "";
+    return (span.type === "marker" || span.type === "space") && span.text ? fmt(span.x + spanDX, 1) : "";
   }
   const ls = span.style.letterSpacing || 0;
-  const spanX = span.x;
-  let xPos = spanX;
+  let xPos = span.x + spanDX;
   const positions = [fmt(xPos, 1)];
   for (let i = 0;i < span.glyphAdvances.length - 1; i++) {
     xPos += span.glyphAdvances[i] + ls;
@@ -324,6 +323,8 @@ class SvgAstBuilder {
         x: fmt(x),
         y: fmt(yOverride)
       };
+      if (runId)
+        attrs.id = runId;
       if (this.opts.style === "css") {
         let css = `font-family: '${s.fontFamily}', sans-serif; font-size: ${fmt(fontSizeOverride)}px; fill: ${colorToRGB(s.color)}; font-weight: ${s.fontWeight}`;
         if (s.fontStyle === "italic")
@@ -399,6 +400,17 @@ ${debugMarkup}
     });
     this.root.children.push(rect);
   }
+  addDecorationLine(x, width, y, color, thickness) {
+    this.closeText();
+    this.root.children.push(el("line", {
+      x1: fmt(x),
+      y1: fmt(y),
+      x2: fmt(x + width),
+      y2: fmt(y),
+      stroke: color,
+      "stroke-width": fmt(thickness)
+    }));
+  }
   addRawLine(lineStr) {
     this.closeText();
     this.root.children.push(rawNode(lineStr));
@@ -530,36 +542,105 @@ function getSpanBackgroundAttrs(span, baselineY) {
   const h = span.fontMetrics.ascent + span.fontMetrics.descent;
   return { x, y, w, h, fill: span.style.backgroundColor };
 }
-function renderToSVG(lines, options = {}) {
-  const opts = resolveOptions(options);
+function renderToSVG(input, options = {}) {
+  let lines;
+  let resolvedOptions;
+  if (Array.isArray(input)) {
+    lines = input;
+    resolvedOptions = options;
+  } else {
+    lines = input.lines;
+    const callerSizes = options.sizing !== undefined || options.width !== undefined || options.height !== undefined;
+    if (callerSizes) {
+      resolvedOptions = options;
+    } else {
+      const fw = input.fit.horizontal === "frame" && input.frame.width != null;
+      const fh = input.fit.vertical === "frame" && input.frame.height != null;
+      resolvedOptions = {
+        sizing: {
+          horizontal: fw ? "frame" : "content",
+          vertical: fh ? "frame" : "content"
+        },
+        width: fw ? input.frame.width : input.content.width,
+        height: fh ? input.frame.height : input.content.height,
+        ...options
+      };
+    }
+  }
+  const opts = resolveOptions(resolvedOptions);
   const { width: svgWidth, height: svgHeight, viewBox, frameWidth, frameHeight } = resolveSize(lines, opts);
   const builder = new SvgAstBuilder(svgWidth, svgHeight, opts, viewBox);
   for (const line of lines) {
     const baselineY = line.y + line.baseline;
+    const bgFirstTextX = line.spans.find((s) => s.type === "text" || s.type === "marker")?.x ?? 0;
     for (const span of line.spans) {
       if (!span.text || !span.style.backgroundColor)
         continue;
       const bg = getSpanBackgroundAttrs(span, baselineY);
       if (bg) {
-        const rx = line.x + bg.x;
+        const rx = line.x + bg.x - bgFirstTextX;
         builder.addBackgroundRect(rx, bg.y, bg.w, bg.h, bg.fill);
       }
     }
     if (opts.structure === "glyph") {
+      const glyphFirstTextX = line.spans.find((s) => s.type === "text" || s.type === "marker")?.x ?? 0;
+      const glyphSpanDX = line.x - glyphFirstTextX;
       let currentRunIdx = -1;
+      let currentSig = "";
       for (const span of line.spans) {
         if (!span.text)
           continue;
         const runIdx = span.itemIndex;
-        if (runIdx !== currentRunIdx) {
+        const sig = styleSignature(span);
+        if (runIdx !== currentRunIdx || sig !== currentSig) {
           builder.closeText();
           const runId = span.tag ? `${span.tag}-${runIdx}` : undefined;
-          builder.openText(line, span, runId);
+          const offset = span.fontMetrics.baselineOffset || 0;
+          if (offset !== 0) {
+            const targetY = Math.round((line.y + line.baseline + offset) * 100) / 100;
+            builder.openText(line, span, runId, targetY, span.fontMetrics.fontSize);
+          } else {
+            builder.openText(line, span, runId);
+          }
           currentRunIdx = runIdx;
+          currentSig = sig;
         }
-        builder.addGlyphTspan(span, line.x);
+        builder.addGlyphTspan(span, glyphSpanDX);
       }
       builder.closeText();
+      if (opts.glyphDecorations) {
+        let cur = null;
+        const flushDeco = () => {
+          if (!cur)
+            return;
+          const w = cur.end - cur.x;
+          if (cur.u)
+            builder.addDecorationLine(cur.x, w, cur.baseY + 2, cur.color, 1);
+          if (cur.s)
+            builder.addDecorationLine(cur.x, w, cur.baseY - cur.ascent * 0.4, cur.color, 1);
+          cur = null;
+        };
+        for (const span of line.spans) {
+          if (!span.text)
+            continue;
+          const u = !!span.style.underline;
+          const s = !!span.style.strikethrough;
+          if (!u && !s) {
+            flushDeco();
+            continue;
+          }
+          const color = span.style.color || "#000000";
+          const x = span.x + glyphSpanDX;
+          const baseY = line.y + line.baseline;
+          if (cur && cur.u === u && cur.s === s && cur.color === color && Math.abs(cur.end - x) < 0.01) {
+            cur.end = x + span.width;
+          } else {
+            flushDeco();
+            cur = { x, end: x + span.width, baseY, ascent: span.fontMetrics.ascent, color, u, s };
+          }
+        }
+        flushDeco();
+      }
     } else if (opts.structure === "flat") {
       const groups = [];
       for (const span of line.spans) {
@@ -649,11 +730,13 @@ function renderToSVG(lines, options = {}) {
         } else {
           builder.openText(line, baseSpan);
         }
+        const lineFirstTextX = line.spans.find((s) => s.type === "text" || s.type === "marker")?.x ?? 0;
+        const spanDX = line.x - lineFirstTextX;
         let currentStyle = null;
         for (const span of group.spans) {
           if (!span.text)
             continue;
-          const x = span.x;
+          const x = span.x + spanDX;
           const shouldRender = span.type !== "space" || opts.spacing === "preserve";
           if (shouldRender) {
             const newStyle = builder.addTspan(span, x, currentStyle);

package/dist/index.js

@@ -1,19 +1,19 @@
 // @bun
 // ../core/src/types/Document.ts
-var DEFAULT_PARAGRAPH_STYLE = {
+var DEFAULT_PARAGRAPH_STYLE = Object.freeze({
   alignment: "left",
   lineHeight: 1.15,
   spaceBefore: 0,
   spaceAfter: 0,
   whiteSpace: "normal"
-};
-var DEFAULT_TEXT_STYLE = {
+});
+var DEFAULT_TEXT_STYLE = Object.freeze({
   fontFamily: "Arial",
   fontSize: 12,
   fontWeight: "normal",
   fontStyle: "normal",
   color: "#000000"
-};
+});
 
 // ../core/src/utils/list.ts
 var BULLET_CHARACTERS = {
@@ -144,7 +144,7 @@ function resolveOptions(opts) {
     console.warn(`SVGRenderer: fit="frag" downgraded to "text" when structure="flat"`);
     fit = "text";
   }
-  return { structure, spacing, style, fit, sizingHorizontal, sizingVertical, width: opts.width, height: opts.height, className: opts.className, contentPadding: opts.contentPadding ?? 0, debug: opts.debug };
+  return { structure, spacing, style, fit, sizingHorizontal, sizingVertical, width: opts.width, height: opts.height, className: opts.className, contentPadding: opts.contentPadding ?? 0, debug: opts.debug, glyphDecorations: opts.glyphDecorations ?? true };
 }
 function resolveSize(lines, opts) {
   const needsBBox = opts.sizingHorizontal === "content" || opts.sizingVertical === "content";
@@ -274,13 +274,12 @@ function buildTspanAttrs(span, x, currentStyle) {
   }
   return { attrs, newStyle: s };
 }
-function buildGlyphPositions(span, _lineX) {
+function buildGlyphPositions(span, spanDX) {
   if (!span.glyphAdvances || span.glyphAdvances.length === 0) {
-    return "";
+    return (span.type === "marker" || span.type === "space") && span.text ? fmt(span.x + spanDX, 1) : "";
   }
   const ls = span.style.letterSpacing || 0;
-  const spanX = span.x;
-  let xPos = spanX;
+  let xPos = span.x + spanDX;
   const positions = [fmt(xPos, 1)];
   for (let i = 0;i < span.glyphAdvances.length - 1; i++) {
     xPos += span.glyphAdvances[i] + ls;
@@ -375,6 +374,8 @@ class SvgAstBuilder {
         x: fmt(x),
         y: fmt(yOverride)
       };
+      if (runId)
+        attrs.id = runId;
       if (this.opts.style === "css") {
         let css = `font-family: '${s.fontFamily}', sans-serif; font-size: ${fmt(fontSizeOverride)}px; fill: ${colorToRGB(s.color)}; font-weight: ${s.fontWeight}`;
         if (s.fontStyle === "italic")
@@ -450,6 +451,17 @@ ${debugMarkup}
     });
     this.root.children.push(rect);
   }
+  addDecorationLine(x, width, y, color, thickness) {
+    this.closeText();
+    this.root.children.push(el("line", {
+      x1: fmt(x),
+      y1: fmt(y),
+      x2: fmt(x + width),
+      y2: fmt(y),
+      stroke: color,
+      "stroke-width": fmt(thickness)
+    }));
+  }
   addRawLine(lineStr) {
     this.closeText();
     this.root.children.push(rawNode(lineStr));
@@ -581,36 +593,105 @@ function getSpanBackgroundAttrs(span, baselineY) {
   const h = span.fontMetrics.ascent + span.fontMetrics.descent;
   return { x, y, w, h, fill: span.style.backgroundColor };
 }
-function renderToSVG(lines, options = {}) {
-  const opts = resolveOptions(options);
+function renderToSVG(input, options = {}) {
+  let lines;
+  let resolvedOptions;
+  if (Array.isArray(input)) {
+    lines = input;
+    resolvedOptions = options;
+  } else {
+    lines = input.lines;
+    const callerSizes = options.sizing !== undefined || options.width !== undefined || options.height !== undefined;
+    if (callerSizes) {
+      resolvedOptions = options;
+    } else {
+      const fw = input.fit.horizontal === "frame" && input.frame.width != null;
+      const fh = input.fit.vertical === "frame" && input.frame.height != null;
+      resolvedOptions = {
+        sizing: {
+          horizontal: fw ? "frame" : "content",
+          vertical: fh ? "frame" : "content"
+        },
+        width: fw ? input.frame.width : input.content.width,
+        height: fh ? input.frame.height : input.content.height,
+        ...options
+      };
+    }
+  }
+  const opts = resolveOptions(resolvedOptions);
   const { width: svgWidth, height: svgHeight, viewBox, frameWidth, frameHeight } = resolveSize(lines, opts);
   const builder = new SvgAstBuilder(svgWidth, svgHeight, opts, viewBox);
   for (const line of lines) {
     const baselineY = line.y + line.baseline;
+    const bgFirstTextX = line.spans.find((s) => s.type === "text" || s.type === "marker")?.x ?? 0;
     for (const span of line.spans) {
       if (!span.text || !span.style.backgroundColor)
         continue;
       const bg = getSpanBackgroundAttrs(span, baselineY);
       if (bg) {
-        const rx = line.x + bg.x;
+        const rx = line.x + bg.x - bgFirstTextX;
         builder.addBackgroundRect(rx, bg.y, bg.w, bg.h, bg.fill);
       }
     }
     if (opts.structure === "glyph") {
+      const glyphFirstTextX = line.spans.find((s) => s.type === "text" || s.type === "marker")?.x ?? 0;
+      const glyphSpanDX = line.x - glyphFirstTextX;
       let currentRunIdx = -1;
+      let currentSig = "";
       for (const span of line.spans) {
         if (!span.text)
           continue;
         const runIdx = span.itemIndex;
-        if (runIdx !== currentRunIdx) {
+        const sig = styleSignature(span);
+        if (runIdx !== currentRunIdx || sig !== currentSig) {
           builder.closeText();
           const runId = span.tag ? `${span.tag}-${runIdx}` : undefined;
-          builder.openText(line, span, runId);
+          const offset = span.fontMetrics.baselineOffset || 0;
+          if (offset !== 0) {
+            const targetY = Math.round((line.y + line.baseline + offset) * 100) / 100;
+            builder.openText(line, span, runId, targetY, span.fontMetrics.fontSize);
+          } else {
+            builder.openText(line, span, runId);
+          }
           currentRunIdx = runIdx;
+          currentSig = sig;
         }
-        builder.addGlyphTspan(span, line.x);
+        builder.addGlyphTspan(span, glyphSpanDX);
       }
       builder.closeText();
+      if (opts.glyphDecorations) {
+        let cur = null;
+        const flushDeco = () => {
+          if (!cur)
+            return;
+          const w = cur.end - cur.x;
+          if (cur.u)
+            builder.addDecorationLine(cur.x, w, cur.baseY + 2, cur.color, 1);
+          if (cur.s)
+            builder.addDecorationLine(cur.x, w, cur.baseY - cur.ascent * 0.4, cur.color, 1);
+          cur = null;
+        };
+        for (const span of line.spans) {
+          if (!span.text)
+            continue;
+          const u = !!span.style.underline;
+          const s = !!span.style.strikethrough;
+          if (!u && !s) {
+            flushDeco();
+            continue;
+          }
+          const color = span.style.color || "#000000";
+          const x = span.x + glyphSpanDX;
+          const baseY = line.y + line.baseline;
+          if (cur && cur.u === u && cur.s === s && cur.color === color && Math.abs(cur.end - x) < 0.01) {
+            cur.end = x + span.width;
+          } else {
+            flushDeco();
+            cur = { x, end: x + span.width, baseY, ascent: span.fontMetrics.ascent, color, u, s };
+          }
+        }
+        flushDeco();
+      }
     } else if (opts.structure === "flat") {
       const groups = [];
       for (const span of line.spans) {
@@ -700,11 +781,13 @@ function renderToSVG(lines, options = {}) {
         } else {
           builder.openText(line, baseSpan);
         }
+        const lineFirstTextX = line.spans.find((s) => s.type === "text" || s.type === "marker")?.x ?? 0;
+        const spanDX = line.x - lineFirstTextX;
         let currentStyle = null;
         for (const span of group.spans) {
           if (!span.text)
             continue;
-          const x = span.x;
+          const x = span.x + spanDX;
           const shouldRender = span.type !== "space" || opts.spacing === "preserve";
           if (shouldRender) {
             const newStyle = builder.addTspan(span, x, currentStyle);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vyaz/renderer",
-  "version": "0.0.14",
+  "version": "0.1.0",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -24,7 +24,7 @@
     "prepublishOnly": "bun run build"
   },
   "dependencies": {
-    "@vyaz/core": "^0.0.14"
+    "@vyaz/core": "^0.1.0"
   },
   "devDependencies": {
     "@types/node": "^26.1.1",