@vyaz/renderer 0.1.0 → 0.3.0

package/README.md

@@ -0,0 +1,121 @@
+# @vyaz/renderer
+
+SVG renderer for [`@vyaz/core`](https://www.npmjs.com/package/@vyaz/core) layout
+output — both a plain `TextFrame` and a `TableFrame` grid.
+
+Part of the [Vyaz](https://github.com/sedrew/vyaz) project.
+
+```bash
+bun add @vyaz/core @vyaz/renderer
+# or
+npm install @vyaz/core @vyaz/renderer
+```
+
+## Quick start — text
+
+```ts
+import { layoutTextFrame } from '@vyaz/core'
+import { renderToSVG } from '@vyaz/renderer'
+import type { TextFrame } from '@vyaz/core'
+
+const frame: TextFrame = {
+  width: 400,
+  wrap: true,
+  paragraphs: [
+    {
+      style: { alignment: 'left', lineHeight: 1.4, spaceBefore: 0, spaceAfter: 0 },
+      children: [
+        { type: 'text', text: 'Hello, ', fontFamily: 'Inter', fontSize: 16, fontWeight: 'normal', fontStyle: 'normal', color: '#111' },
+        { type: 'text', text: 'Vyaz!', fontFamily: 'Inter', fontSize: 16, fontWeight: 'bold', fontStyle: 'normal', color: '#111' },
+      ],
+    },
+  ],
+}
+
+const svg = renderToSVG(layoutTextFrame(frame), { preset: 'browser' })
+```
+
+## Quick start — tables
+
+```ts
+import { layoutTableFrame } from '@vyaz/core'
+import { renderTableToSVG } from '@vyaz/renderer'
+import type { TableFrame } from '@vyaz/core'
+
+const cell = (text: string) => ({
+  content: {
+    wrap: true,
+    paragraphs: [{
+      style: { alignment: 'left', lineHeight: 1.3, spaceBefore: 0, spaceAfter: 0 },
+      children: [{ type: 'text', text, fontFamily: 'Inter', fontSize: 14, fontWeight: 'normal', fontStyle: 'normal', color: '#111' }],
+    }],
+  },
+})
+
+const table: TableFrame = {
+  defaultCellStyle: { paddings: 8, borderWidths: 1, borderColors: '#ccc' },
+  rows: [
+    { style: { bgColor: '#eee' }, cells: [cell('Name'), cell('Qty')] },
+    { cells: [cell('Widget'), cell('3')] },
+  ],
+}
+
+const svg = renderTableToSVG(layoutTableFrame(table), { preset: 'browser' })
+```
+
+`renderTableToSVG` paints table/row/cell backgrounds and borders (solid,
+dashed, rounded corners), each cell's text content, `colSpan`/`rowSpan`,
+`before`/`after` decorative slots, and tables nested inside a cell — see the
+[Tables guide](https://sedrew.github.io/vyaz/guide/tables) for the full style
+surface.
+
+## Text presets
+
+| Preset | Structure | Use case |
+|--------|-----------|----------|
+| `flat` | Single `<text>` with concatenated text | PowerPoint / OOXML export |
+| `browser` | `<text>` + `<tspan>` per run | Web / browser display |
+| `preserve` | `<text>` + `<tspan>` + `textLength` | Pixel-perfect rendering |
+| `glyph` | `<tspan x="x0 x1 ...">` per glyph | Selection / cursor positioning |
+
+```ts
+renderToSVG(result, { preset: 'preserve', style: 'css' })
+
+// low-level — supply width/height/sizing yourself instead of deriving from the result
+renderToSVG(result.lines, { sizing: { horizontal: 'frame', vertical: 'content' }, width: 400, preset: 'flat' })
+```
+
+Pass `{ debug: { frameBox, contentBox, baseline, … } }` for overlay boxes.
+
+## `registerFont(family, source, opts?)`
+
+Registers a font with **both** `@vyaz/core`'s measurement engine and the
+browser's `document.fonts` in one call — the single most common source of
+drift between measured and painted text is registering only one of the two.
+
+```ts
+import { registerFont } from '@vyaz/renderer'
+
+await registerFont('Inter', 'https://example.com/Inter.woff2')
+// or a local buffer (Node.js)
+import { readFileSync } from 'node:fs'
+await registerFont('Inter', readFileSync('./Inter.woff2'), { weight: 'normal', style: 'normal' })
+```
+
+## `TableRenderOptions`
+
+| option | default | |
+|---|---|---|
+| `preset` | `'browser'` | forwarded to every cell's own text render |
+| `style` | `'xml'` | how cell text style properties are expressed |
+| `className` | – | CSS class on the root `<svg>`/`<g>` |
+| `fragment` | `false` | emit a bare `<g>` instead of `<svg xmlns… viewBox…>`, for splicing into a document that already has one |
+
+## Requirements
+
+- **Runtime**: Bun 1.x, Node.js 18+, or a modern browser
+- **Peer**: `@vyaz/core` (matching major/minor)
+
+## License
+
+MIT

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, TextFrameLayoutResult, MultiColumnConfig } from '@vyaz/core';
+import type { Line, ParagraphLayoutResult, TextFrameLayoutResult, MultiColumnConfig, FrameTransform } from '@vyaz/core';
 import type { DebugFlags } from './types.js';
 export type SvgPreset = 'flat' | 'browser' | 'preserve' | 'glyph';
 export type SvgStyle = 'css' | 'xml';
@@ -63,6 +63,17 @@ export interface SVGRenderOptions {
     columns?: MultiColumnConfig;
     /** Left padding from frame (needed for column debug rendering). */
     paddingLeft?: number;
+    /**
+     * Post-layout rigid transform (writing-mode `sideways-*` / frame `rotation`).
+     * When the input is a {@link TextFrameLayoutResult} its own `transform` is used
+     * automatically; pass this to supply one for the bare `Line[]` form or to
+     * override. A net rotation that is a multiple of 360° is ignored.
+     *
+     * The lines are rendered into `layoutBox` (pre-rotation space) and the whole
+     * output is wrapped in one `<g transform>`; the `<svg>` canvas becomes the
+     * rotated visual box.
+     */
+    transform?: FrameTransform;
     /**
      * glyph preset only: draw `underline` / `strikethrough` as explicit `<line>`
      * geometry. The glyph path positions each character with its own `x`, so it
@@ -70,6 +81,14 @@ export interface SVGRenderOptions {
      * Ignored by every other preset. Default `true`.
      */
     glyphDecorations?: boolean;
+    /**
+     * Content for inline-box spans, keyed by `span.inlineWidget.id`. Each value is
+     * an SVG fragment already sized to the widget's `width` × `height`; it is
+     * spliced into a `<g>` translated to the box the layout reserved. A span whose
+     * id has no entry gets a light placeholder `<rect>`. Produced by `@vyaz/html`
+     * for `<img>` / `<svg>` / `<progress>` / … ; irrelevant without inline boxes.
+     */
+    inlineBoxes?: Record<string, string>;
 }
 /**
  * Render a layout to an SVG string.

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,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"}
+{"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,cAAc,EAAE,MAAM,YAAY,CAAC;AAE9I,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;;;;;;;;;OASG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACtC;AAu2BD;;;;;;;;;;;;GAYG;AACH,wBAAgB,WAAW,CACzB,KAAK,EAAE,IAAI,EAAE,GAAG,qBAAqB,EACrC,OAAO,GAAE,gBAAqB,GAC7B,MAAM,CAwTR;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/TableRenderer.d.ts

@@ -0,0 +1,59 @@
+/**
+ * TableRenderer.ts — TableLayoutResult → SVG string.
+ *
+ * Paint order (back to front): table bg → row bg → cell bg → row borders →
+ * cell borders → table border → cell content (before slot → main content →
+ * after slot, per cell). Each of those three is a complete nested `<svg>`
+ * (from `renderToSVG`), positioned with a `<g transform="translate(…)">` —
+ * the same "paint a self-contained SVG fragment into a box" pattern
+ * `SVGRenderOptions.inlineBoxes` uses for `<img>`/`<svg>` boxes from
+ * `@vyaz/html`. `before`/`after` (`paintSlot`) paint at the absolute
+ * position `TableLayoutEngine` already resolved for them — no extra
+ * padding/border math here, unlike main content.
+ *
+ * A cell's content is rendered at `sizing: 'frame'` with the *exact* width
+ * TableLayoutEngine measured it at (not `sizing: 'content'`): trimming to the
+ * ink bounding box would discard the alignment offset for centered/
+ * right-aligned paragraphs — the nested `<svg>`'s viewBox has to start at
+ * (0, 0) so `line.x` stays the true position within the cell.
+ *
+ * `cell.cx`/`cy` are an extra px nudge added straight onto the content
+ * origin. `cell.allowOverflow` forces `overflow: visible` on the cell's own
+ * nested `<svg>` (default clips at the padding box, same as `svg-table-core`
+ * — see `withOverflowVisible`). `opts.fragment` swaps the outer `<svg
+ * xmlns… viewBox…>` for a bare `<g>`, for splicing this table into a
+ * document that already has one (composing tables, nested-table cells).
+ *
+ * `cell.nestedTable` (`TableCell.content` was itself a `TableFrame`) paints
+ * via a *recursive* `renderTableToSVG(cell.nestedTable, { fragment: true })`
+ * call at the cell's content origin instead of the normal `renderToSVG` text
+ * path — `fragment: true` is exactly what makes this splice in as a `<g>`
+ * rather than nesting `<svg>` inside `<svg>` inside `<svg>`.
+ *
+ * Border dash patterns (`stroke-dasharray`) and per-side `stroke-linecap`
+ * (T3, `dashAttrs`/`dashUniform`) paint on both border shapes: a uniform
+ * `<rect stroke>` needs its pattern+linecap to also match on all four sides
+ * to stay a single rect (SVG has one dasharray per shape); otherwise (or
+ * when width/color already differ) it falls back to four `<line>`s, each
+ * with its own dasharray/linecap. Asymmetric corner radii remain a possible
+ * future addition — only a uniform `rx`/`ry` today.
+ */
+import type { TableLayoutResult } from '@vyaz/core';
+import type { SvgPreset, SvgStyle } from './SVGRenderer.js';
+export interface TableRenderOptions {
+    /** Preset used for every cell's own text render. Default `'browser'`. */
+    preset?: SvgPreset;
+    /** How cell text style properties are expressed. Default `'xml'`. */
+    style?: SvgStyle;
+    /** CSS class for the root `<svg>`/`<g>`. */
+    className?: string;
+    /**
+     * Emit a bare `<g>` (no `<svg>`/`viewBox`/`xmlns` wrapper) for splicing
+     * into a document that already has an outer `<svg>` — e.g. composing
+     * several tables, or embedding as a nested-table cell's content. Default
+     * `false`.
+     */
+    fragment?: boolean;
+}
+export declare function renderTableToSVG(result: TableLayoutResult, opts?: TableRenderOptions): string;
+//# sourceMappingURL=TableRenderer.d.ts.map

package/dist/TableRenderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableRenderer.d.ts","sourceRoot":"","sources":["../src/TableRenderer.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,OAAO,KAAK,EAAE,iBAAiB,EAAyC,MAAM,YAAY,CAAC;AAE3F,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAG5D,MAAM,WAAW,kBAAkB;IACjC,yEAAyE;IACzE,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,qEAAqE;IACrE,KAAK,CAAC,EAAE,QAAQ,CAAC;IACjB,4CAA4C;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAiFD,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,iBAAiB,EAAE,IAAI,GAAE,kBAAuB,GAAG,MAAM,CAgEjG"}

package/dist/index.browser.d.ts

@@ -9,9 +9,13 @@
  */
 export { renderToSVG, renderParagraphToSVG, renderResultToSVG } from './SVGRenderer.js';
 export type { SVGRenderOptions, SvgPreset, SvgStyle, SvgFit, SvgSizing } from './SVGRenderer.js';
+export { renderTableToSVG } from './TableRenderer.js';
+export type { TableRenderOptions } from './TableRenderer.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 { registerFont } from './register-font.js';
+export type { RegisterFontOptions, RegisterFontResult } from './register-font.js';
 export type { DebugFlags } from './types.js';
 //# sourceMappingURL=index.browser.d.ts.map

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

@@ -1 +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"}
+{"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,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAE7D,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,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,YAAY,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAElF,YAAY,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC"}