@vyaz/renderer 0.0.11 → 0.1.0

package/dist/CanvasRenderer.d.ts

@@ -0,0 +1,106 @@
+/**
+ * CanvasRenderer.ts — Layered Canvas rendering for Line[].
+ *
+ * Takes ready Line[] with absolute coordinates and provides
+ * rendering functions for each visual layer:
+ *
+ *   1. Background layer     — clearRect / fillRect
+ *   2. Text layer           — text spans (dumb drawer)
+ *   3. Selection layer      — highlighted selection range
+ *   4. Cursor layer         — blinking caret
+ *   5. Debug overlay layer  — bounding boxes, baselines, labels
+ *
+ * Each function is standalone so consumers (e.g. fabric.js adapter)
+ * can compose layers in any order or skip layers as needed.
+ *
+ * Does NOT compute anything — only draws (dumb drawer principle).
+ *
+ * @see SVGRenderer for reference SVG implementation.
+ */
+import type { Line } from '@vyaz/core';
+import type { DebugFlags } from './types.js';
+import type { CharPos } from './interactive.js';
+export interface CanvasRenderOptions {
+    /**
+     * How the canvas size is determined:
+     *   'frame'   — use current ctx.canvas.width/height (default)
+     *   'content' — compute bounding box from lines, resize canvas to fit
+     */
+    sizing?: 'frame' | 'content';
+    /**
+     * 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. */
+    backgroundColor?: string;
+    /** Debug overlay flags. */
+    debug?: DebugFlags;
+}
+/**
+ * Options for cursor rendering.
+ */
+export interface CursorOptions {
+    /** Cursor color. Default: '#000'. */
+    color?: string;
+    /** Cursor width in px. Default: 1. */
+    width?: number;
+    /** Cursor height relative to baseline. If undefined, uses the line's ascent + descent. */
+    height?: number;
+}
+/**
+ * Render Line[] array to Canvas.
+ *
+ * @param ctx — Canvas 2D rendering context
+ * @param lines — ready Line[] with absolute coordinates
+ * @param options — rendering options
+ */
+export declare function renderToCanvas(ctx: CanvasRenderingContext2D | any, lines: Line[], options?: CanvasRenderOptions): void;
+/**
+ * Draw debug overlays on Canvas.
+ *
+ * Mirrors SVGRenderer's renderDebugToSVG (lines 658-814) but draws
+ * directly on Canvas 2D instead of generating SVG markup.
+ *
+ * Supported flags:
+ *   frameBox / frame   — frame container bounding box (blue dashed)
+ *   contentBox         — content bounding box (pink dotted)
+ *   paragraphBox       — per-paragraph colored boxes (requires groupLinesByParagraph)
+ *   columnBox          — column separators for multi-column layout
+ *   box                — line box outlines (red)
+ *   baseline           — baseline line (blue)
+ *   ascentDescent      — ascent/descent lines (green dashed)
+ *   lineGap            — line height fill (blue transparent)
+ *   labels             — coordinate labels
+ *   runs               — span bounding boxes (purple)
+ */
+export declare function renderDebugToCanvas(ctx: CanvasRenderingContext2D, lines: Line[], _width: number, _height: number, flags: DebugFlags): void;
+/**
+ * Render a text selection highlight overlay.
+ *
+ * Draws a semi-transparent blue rectangle for each character
+ * in the range [start, end). Supports cross-line selections.
+ *
+ * If `start` and `end` are in different lines, the full width
+ * of intermediate lines is highlighted.
+ *
+ * @param ctx — Canvas 2D rendering context
+ * @param lines — layout lines
+ * @param start — selection start position (inclusive)
+ * @param end — selection end position (exclusive)
+ * @param color — highlight color. Default: 'rgba(100, 150, 255, 0.3)'
+ */
+export declare function renderSelection(ctx: CanvasRenderingContext2D, lines: Line[], start: CharPos, end: CharPos, color?: string): void;
+/**
+ * Render a text cursor (caret) at the given character position.
+ *
+ * Draws a vertical line at the character's left edge.
+ * The caller is responsible for cursor blink timing.
+ *
+ * @param ctx — Canvas 2D rendering context
+ * @param lines — layout lines
+ * @param pos — cursor position (character left edge)
+ * @param options — cursor visual options
+ */
+export declare function renderCursor(ctx: CanvasRenderingContext2D, lines: Line[], pos: CharPos, options?: CursorOptions): void;
+//# sourceMappingURL=CanvasRenderer.d.ts.map

package/dist/CanvasRenderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CanvasRenderer.d.ts","sourceRoot":"","sources":["../src/CanvasRenderer.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,KAAK,EAAE,IAAI,EAAQ,MAAM,YAAY,CAAC;AAC7C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAGhD,MAAM,WAAW,mBAAmB;IAClC;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC7B;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,gFAAgF;IAChF,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,2BAA2B;IAC3B,KAAK,CAAC,EAAE,UAAU,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0FAA0F;IAC1F,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAuJD;;;;;;GAMG;AACH,wBAAgB,cAAc,CAC5B,GAAG,EAAE,wBAAwB,GAAG,GAAG,EACnC,KAAK,EAAE,IAAI,EAAE,EACb,OAAO,GAAE,mBAAwB,GAChC,IAAI,CAmDN;AAID;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,mBAAmB,CACjC,GAAG,EAAE,wBAAwB,EAC7B,KAAK,EAAE,IAAI,EAAE,EACb,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,MAAM,EACf,KAAK,EAAE,UAAU,GAChB,IAAI,CA0IN;AAID;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,eAAe,CAC7B,GAAG,EAAE,wBAAwB,EAC7B,KAAK,EAAE,IAAI,EAAE,EACb,KAAK,EAAE,OAAO,EACd,GAAG,EAAE,OAAO,EACZ,KAAK,GAAE,MAAmC,GACzC,IAAI,CAuDN;AAID;;;;;;;;;;GAUG;AACH,wBAAgB,YAAY,CAC1B,GAAG,EAAE,wBAAwB,EAC7B,KAAK,EAAE,IAAI,EAAE,EACb,GAAG,EAAE,OAAO,EACZ,OAAO,GAAE,aAAkB,GAC1B,IAAI,CA0BN"}

package/dist/SVGRenderer.d.ts

@@ -0,0 +1,110 @@
+/**
+ * SVGRenderer.ts — SVG text builder.
+ *
+ * Converts Line[] into SVG markup using an AST-first approach.
+ * Builds a tree of SvgNode, then serializes to string in one pass.
+ *
+ * Four presets:
+ *   flat     — all text in one <text> element, xml:space="preserve", no <tspan>
+ *   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 { 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';
+export type SvgFit = 'none' | 'text' | 'frag';
+export type SvgSizing = 'frame' | 'content';
+export type PerAxisSizing = {
+    horizontal: SvgSizing;
+    vertical: SvgSizing;
+};
+export interface SVGRenderOptions {
+    /** Shorthand that sets structure + spacing at once. */
+    preset?: SvgPreset;
+    /** How style properties are expressed: as CSS `style` attribute or as XML presentation attributes. */
+    style?: SvgStyle;
+    /** How `textLength` is applied. */
+    fit?: SvgFit;
+    /**
+     * How SVG determines its canvas size.
+     * Single string: applies to both axes. Object: per-axis control.
+     * 'frame' — use explicit width/height from options.
+     * 'content' — compute from lines bounding box.
+     */
+    sizing?: SvgSizing | PerAxisSizing;
+    /** SVG canvas width (px). Used when horizontal sizing='frame' or as fallback. */
+    width?: number;
+    /** SVG canvas height (px). Used when vertical sizing='frame' or as fallback. */
+    height?: number;
+    /** CSS class for `<svg>`. */
+    className?: string;
+    /**
+     * Extra padding added around the SVG canvas. Content coordinates stay unchanged;
+     * the SVG viewBox is shifted and canvas is enlarged so debug overlays
+     * (frameBox / contentBox) are visible with a gap from the edge.
+     * Useful for snapshot tests to clearly show frame vs content boundaries.
+     */
+    contentPadding?: number;
+    /** Debug overlays. */
+    debug?: DebugFlags;
+    /**
+     * Multi-column layout configuration for debug overlays.
+     * When set, paragraph and column boxes are rendered per-column.
+     */
+    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 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 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(input: Line[] | TextFrameLayoutResult, options?: SVGRenderOptions): string;
+/**
+ * Render one ParagraphLayoutResult to SVG (convenience wrapper).
+ */
+export declare function renderParagraphToSVG(lines: Line[], paragraphWidth: number, paragraphHeight: number, options?: SVGRenderOptions): string;
+/**
+ * Render a ParagraphLayoutResult to SVG, auto-passing dimensions.
+ *
+ * Uses `result.width` and `result.height` as the SVG canvas size.
+ * This is the recommended way to render when you have a layout result
+ * and want `sizing: 'frame'` with correct dimensions.
+ *
+ * @param result — layout result from ParagraphLayoutEngine.layout()
+ * @param options — rendering options (preset, style, fit, etc.)
+ * @returns SVG string
+ *
+ * @example
+ * ```ts
+ * const result = paragraphLayoutEngine.layout(paragraph, 300);
+ * const svg = renderResultToSVG(result, { preset: 'preserve' });
+ * ```
+ */
+export declare function renderResultToSVG(result: ParagraphLayoutResult, options?: SVGRenderOptions): string;
+//# sourceMappingURL=SVGRenderer.d.ts.map

package/dist/SVGRenderer.d.ts.map

@@ -0,0 +1 @@
+{"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.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @vyaz/renderer — Browser entry point.
+ *
+ * Re-exports everything from the main index.
+ * In browser environments @vyaz/core resolves to its browser entry
+ * (dist/index.browser.js) via package.json exports.
+ *
+ * ✅ Safe for Vite / webpack / Rollup / esbuild browser builds.
+ */
+export { renderToSVG, renderParagraphToSVG, renderResultToSVG } from './SVGRenderer.js';
+export type { SVGRenderOptions, SvgPreset, SvgStyle, SvgFit, SvgSizing } from './SVGRenderer.js';
+export { renderToCanvas, renderDebugToCanvas, renderSelection, renderCursor } from './CanvasRenderer.js';
+export type { CanvasRenderOptions, CursorOptions } from './CanvasRenderer.js';
+export { charAtPoint, charIndexToPos, posToCharIndex } from './interactive.js';
+export type { CharPos } from './interactive.js';
+export type { DebugFlags } from './types.js';
+//# sourceMappingURL=index.browser.d.ts.map

package/dist/index.browser.d.ts.map

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

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.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @vyaz/renderer — SVG and Canvas renderers.
+ *
+ * Converts Line[] (from @vyaz/core) into SVG strings or Canvas drawings.
+ */
+export { renderToSVG, renderParagraphToSVG, renderResultToSVG } from './SVGRenderer.js';
+export type { SVGRenderOptions, SvgPreset, SvgStyle, SvgFit, SvgSizing } from './SVGRenderer.js';
+export { renderToCanvas, renderDebugToCanvas, renderSelection, renderCursor } from './CanvasRenderer.js';
+export type { CanvasRenderOptions, CursorOptions } from './CanvasRenderer.js';
+export { charAtPoint, charIndexToPos, posToCharIndex } from './interactive.js';
+export type { CharPos } from './interactive.js';
+export type { DebugFlags } from './types.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

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

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);