@nowline/renderer 0.5.1 → 0.7.0

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export type { AssetBytes, AssetResolver, RenderOptions, } from './svg/render.js';
+export type { AssetBytes, AssetResolver, FontFamilies, RenderOptions, } from './svg/render.js';
 export { renderSvg } from './svg/render.js';
 export { sanitizeSvg } from './svg/sanitize.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACR,UAAU,EACV,aAAa,EACb,aAAa,GAChB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACR,UAAU,EACV,aAAa,EACb,YAAY,EACZ,aAAa,GAChB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/svg/render.d.ts

@@ -4,17 +4,31 @@ export interface AssetBytes {
     mime: string;
 }
 export type AssetResolver = (ref: string) => Promise<AssetBytes>;
+/**
+ * Per-role `font-family` strings the renderer stamps onto `<text>` elements.
+ * Defaults to the shared, portable `FONT_STACK` (generic CSS stacks). Raster
+ * and preview callers override this with a *pinned* family (e.g. the bundled
+ * `DejaVu Sans` / `DejaVu Sans Mono`) so the rendered SVG names exactly the
+ * font that resvg / the webview `@font-face` actually provide — the WYSIWYG
+ * contract. The `.svg` file export keeps the default portable stack.
+ */
+export type FontFamilies = Record<'sans' | 'serif' | 'mono', string>;
 export interface RenderOptions {
     assetResolver?: AssetResolver;
     noLinks?: boolean;
     strict?: boolean;
     warn?: (message: string) => void;
     idPrefix?: string;
+    /**
+     * Override per-role `font-family` strings. Defaults to the portable
+     * `FONT_STACK`. Set to a pinned family for raster/preview WYSIWYG.
+     */
+    fontFamilies?: FontFamilies;
 }
-declare function renderHeader(h: PositionedHeader, idPrefix: string, palette: Theme): string;
-declare function renderTimeline(t: PositionedTimelineScale, palette: Theme): string;
-declare function renderItem(i: PositionedItem, options: RenderOptions, idPrefix: string, palette: Theme): string;
-declare function renderSwimlane(s: PositionedSwimlane, options: RenderOptions, idPrefix: string, palette: Theme): string;
+declare function renderHeader(h: PositionedHeader, idPrefix: string, palette: Theme, fonts: FontFamilies): string;
+declare function renderTimeline(t: PositionedTimelineScale, palette: Theme, fonts: FontFamilies): string;
+declare function renderItem(i: PositionedItem, options: RenderOptions, idPrefix: string, palette: Theme, fonts: FontFamilies): string;
+declare function renderSwimlane(s: PositionedSwimlane, options: RenderOptions, idPrefix: string, palette: Theme, fonts: FontFamilies): string;
 declare function renderEdge(e: PositionedDependencyEdge, palette: Theme): string;
 export declare function renderSvg(model: PositionedRoadmap, options?: RenderOptions): Promise<string>;
 export declare const __internal: {

package/dist/svg/render.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../../src/svg/render.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAKR,wBAAwB,EAGxB,gBAAgB,EAEhB,cAAc,EAId,iBAAiB,EACjB,kBAAkB,EAClB,uBAAuB,EAGvB,KAAK,EACR,MAAM,iBAAiB,CAAC;AAsEzB,MAAM,WAAW,UAAU;IACvB,KAAK,EAAE,UAAU,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,MAAM,aAAa,GAAG,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC,UAAU,CAAC,CAAC;AAEjE,MAAM,WAAW,aAAa;IAC1B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAEjC,QAAQ,CAAC,EAAE,MAAM,CAAC;CACrB;AA8VD,iBAAS,YAAY,CAAC,CAAC,EAAE,gBAAgB,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,GAAG,MAAM,CAyEnF;AA6ED,iBAAS,cAAc,CAAC,CAAC,EAAE,uBAAuB,EAAE,OAAO,EAAE,KAAK,GAAG,MAAM,CA2G1E;AAoID,iBAAS,UAAU,CACf,CAAC,EAAE,cAAc,EACjB,OAAO,EAAE,aAAa,EACtB,QAAQ,EAAE,MAAM,EAChB,OAAO,EAAE,KAAK,GACf,MAAM,CA8SR;AAgRD,iBAAS,cAAc,CACnB,CAAC,EAAE,kBAAkB,EACrB,OAAO,EAAE,aAAa,EACtB,QAAQ,EAAE,MAAM,EAChB,OAAO,EAAE,KAAK,GACf,MAAM,CAyHR;AAkHD,iBAAS,UAAU,CAAC,CAAC,EAAE,wBAAwB,EAAE,OAAO,EAAE,KAAK,GAAG,MAAM,CAmBvE;AAuYD,wBAAsB,SAAS,CAC3B,KAAK,EAAE,iBAAiB,EACxB,OAAO,GAAE,aAAkB,GAC5B,OAAO,CAAC,MAAM,CAAC,CAmHjB;AAGD,eAAO,MAAM,UAAU;;;;;;CAMtB,CAAC"}
+{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../../src/svg/render.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAKR,wBAAwB,EAGxB,gBAAgB,EAEhB,cAAc,EAId,iBAAiB,EACjB,kBAAkB,EAClB,uBAAuB,EAGvB,KAAK,EACR,MAAM,iBAAiB,CAAC;AAsEzB,MAAM,WAAW,UAAU;IACvB,KAAK,EAAE,UAAU,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,MAAM,aAAa,GAAG,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC,UAAU,CAAC,CAAC;AAEjE;;;;;;;GAOG;AACH,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,GAAG,OAAO,GAAG,MAAM,EAAE,MAAM,CAAC,CAAC;AAErE,MAAM,WAAW,aAAa;IAC1B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAEjC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,YAAY,CAAC,EAAE,YAAY,CAAC;CAC/B;AAkWD,iBAAS,YAAY,CACjB,CAAC,EAAE,gBAAgB,EACnB,QAAQ,EAAE,MAAM,EAChB,OAAO,EAAE,KAAK,EACd,KAAK,EAAE,YAAY,GACpB,MAAM,CAyER;AA6ED,iBAAS,cAAc,CAAC,CAAC,EAAE,uBAAuB,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,YAAY,GAAG,MAAM,CA2G/F;AAwID,iBAAS,UAAU,CACf,CAAC,EAAE,cAAc,EACjB,OAAO,EAAE,aAAa,EACtB,QAAQ,EAAE,MAAM,EAChB,OAAO,EAAE,KAAK,EACd,KAAK,EAAE,YAAY,GACpB,MAAM,CA8SR;AAmRD,iBAAS,cAAc,CACnB,CAAC,EAAE,kBAAkB,EACrB,OAAO,EAAE,aAAa,EACtB,QAAQ,EAAE,MAAM,EAChB,OAAO,EAAE,KAAK,EACd,KAAK,EAAE,YAAY,GACpB,MAAM,CAyHR;AAkHD,iBAAS,UAAU,CAAC,CAAC,EAAE,wBAAwB,EAAE,OAAO,EAAE,KAAK,GAAG,MAAM,CAmBvE;AA6YD,wBAAsB,SAAS,CAC3B,KAAK,EAAE,iBAAiB,EACxB,OAAO,GAAE,aAAkB,GAC5B,OAAO,CAAC,MAAM,CAAC,CAyHjB;AAGD,eAAO,MAAM,UAAU;;;;;;CAMtB,CAAC"}

package/dist/svg/render.js

@@ -23,9 +23,9 @@ const WEIGHT_NUM = {
 function textSizePx(bucket) {
     return TEXT_SIZE_PX[bucket] ?? 14;
 }
-function fontAttrs(style, overrideSize) {
+function fontAttrs(style, fonts, overrideSize) {
     return {
-        'font-family': FONT_STACK[style.font],
+        'font-family': fonts[style.font],
         'font-size': overrideSize ?? textSizePx(style.textSize),
         'font-weight': WEIGHT_NUM[style.weight] ?? 400,
         'font-style': style.italic ? 'italic' : 'normal',
@@ -302,7 +302,7 @@ function rectFrame(x, y, w, h, style, extra = {}) {
         ...extra,
     });
 }
-function renderHeader(h, idPrefix, palette) {
+function renderHeader(h, idPrefix, palette, fonts) {
     // The layout has already sized the card to its (wrapped) text content
     // and stashed the bounds in `h.cardBox`, with `h.titleLines` /
     // `h.authorLines` ready to render line-by-line. See sizeBesideHeader
@@ -333,7 +333,7 @@ function renderHeader(h, idPrefix, palette) {
         titleParts.push(textTag({
             x: num(cardX + HEADER_CARD_PADDING_X),
             y: num(cardY + HEADER_CARD_PADDING_TOP + i * HEADER_TITLE_LINE_HEIGHT_PX),
-            'font-family': FONT_STACK[h.style.font],
+            'font-family': fonts[h.style.font],
             'font-size': HEADER_TITLE_FONT_SIZE_PX,
             'font-weight': 600,
             fill: h.style.text,
@@ -351,7 +351,7 @@ function renderHeader(h, idPrefix, palette) {
             y: num(lastTitleY +
                 HEADER_TITLE_TO_AUTHOR_GAP_PX +
                 j * HEADER_AUTHOR_LINE_HEIGHT_PX),
-            'font-family': FONT_STACK[h.style.font],
+            'font-family': fonts[h.style.font],
             'font-size': HEADER_AUTHOR_FONT_SIZE_PX,
             fill: authorColor,
         }, line));
@@ -431,7 +431,7 @@ function renderGridLines(t, swimlaneTopY, palette) {
     }
     return tag('g', { 'data-layer': 'grid' }, parts.join(''));
 }
-function renderTimeline(t, palette) {
+function renderTimeline(t, palette, fonts) {
     const panelFill = palette.timeline.panelFill;
     const borderColor = palette.timeline.border;
     const labelColor = palette.timeline.labelText;
@@ -505,7 +505,7 @@ function renderTimeline(t, palette) {
             parts.push(textTag({
                 x: num(tick.labelX),
                 y: num(tickPanelY + TIMELINE_TICK_LABEL_BASELINE_OFFSET_PX),
-                'font-family': FONT_STACK.sans,
+                'font-family': fonts.sans,
                 'font-size': 10,
                 fill: labelColor,
                 'text-anchor': 'middle',
@@ -515,7 +515,7 @@ function renderTimeline(t, palette) {
             parts.push(textTag({
                 x: num(tick.labelX),
                 y: num(bottomTickPanelY + TIMELINE_TICK_LABEL_BASELINE_OFFSET_PX),
-                'font-family': FONT_STACK.sans,
+                'font-family': fonts.sans,
                 'font-size': 10,
                 fill: labelColor,
                 'text-anchor': 'middle',
@@ -524,7 +524,7 @@ function renderTimeline(t, palette) {
     }
     return tag('g', { 'data-layer': 'timeline' }, parts.join(''));
 }
-function renderNowline(n, palette) {
+function renderNowline(n, palette, fonts) {
     if (!n)
         return '';
     const color = palette.nowline.stroke;
@@ -549,7 +549,7 @@ function renderNowline(n, palette) {
     // The squared edge IS the line; the rounded edge points into the
     // chart, so the pill always hugs the line and never overflows.
     const pillBg = renderNowPillBg(n, color);
-    const label = renderNowPillLabel(n, labelTextColor);
+    const label = renderNowPillLabel(n, labelTextColor, fonts);
     return tag('g', { 'data-layer': 'nowline' }, line + pillBg + label);
 }
 /**
@@ -625,7 +625,7 @@ function renderNowPillBg(n, color) {
     ].join(' ');
     return tag('path', { d, fill: color });
 }
-function renderNowPillLabel(n, labelTextColor) {
+function renderNowPillLabel(n, labelTextColor, fonts) {
     const baselineY = n.pillTopY + NOW_PILL_LABEL_BASELINE_OFFSET_PX;
     const edgeX = squaredEdgeX(n);
     let labelX;
@@ -645,14 +645,14 @@ function renderNowPillLabel(n, labelTextColor) {
     return textTag({
         x: num(labelX),
         y: num(baselineY),
-        'font-family': FONT_STACK.sans,
+        'font-family': fonts.sans,
         'font-size': NOW_PILL_LABEL_FONT_SIZE_PX,
         'font-weight': 700,
         fill: labelTextColor,
         'text-anchor': textAnchor,
     }, n.label);
 }
-function renderItem(i, options, idPrefix, palette) {
+function renderItem(i, options, idPrefix, palette, fonts) {
     const parts = [];
     const shadow = shadowFilterUrl(idPrefix, i.style.shadow);
     parts.push(rectFrame(i.box.x, i.box.y, i.box.width, i.box.height, i.style, {
@@ -747,7 +747,7 @@ function renderItem(i, options, idPrefix, palette) {
         parts.push(textTag({
             x: num(captionX),
             y: num(i.box.y + ITEM_CAPTION_TITLE_BASELINE_OFFSET_PX),
-            'font-family': FONT_STACK[i.style.font],
+            'font-family': fonts[i.style.font],
             'font-size': ITEM_CAPTION_TITLE_FONT_SIZE_PX,
             'font-weight': 600,
             fill: titleColor,
@@ -767,7 +767,7 @@ function renderItem(i, options, idPrefix, palette) {
             x: captionX,
             baselineY: i.box.y + ITEM_CAPTION_META_BASELINE_OFFSET_PX,
             fontSize: ITEM_CAPTION_META_FONT_SIZE_PX,
-            fontFamily: FONT_STACK[i.style.font],
+            fontFamily: fonts[i.style.font],
             color: metaColor,
         }));
     }
@@ -795,7 +795,7 @@ function renderItem(i, options, idPrefix, palette) {
                 parts.push(textTag({
                     x: num(fx),
                     y: num(footnoteY),
-                    'font-family': FONT_STACK.sans,
+                    'font-family': fonts.sans,
                     'font-size': 10,
                     'font-weight': 700,
                     fill: captionOutsideTextColor,
@@ -810,7 +810,7 @@ function renderItem(i, options, idPrefix, palette) {
                 parts.push(textTag({
                     x: num(fx),
                     y: num(footnoteY),
-                    'font-family': FONT_STACK.sans,
+                    'font-family': fonts.sans,
                     'font-size': 10,
                     'font-weight': 700,
                     fill: i.style.text,
@@ -887,7 +887,7 @@ function renderItem(i, options, idPrefix, palette) {
             parts.push(textTag({
                 x: num(i.overflowBox.x + i.overflowBox.width / 2),
                 y: num(i.overflowBox.y + i.overflowBox.height / 2 + 3),
-                'font-family': FONT_STACK.sans,
+                'font-family': fonts.sans,
                 'font-size': 9,
                 'font-weight': 700,
                 fill: captionColor,
@@ -912,13 +912,13 @@ function renderItem(i, options, idPrefix, palette) {
         parts.push(textTag({
             x: num(chip.box.x + chip.box.width / 2),
             y: num(chip.box.y + chip.box.height / 2 + 3),
-            ...fontAttrs(chip.style, TEXT_SIZE_PX.xs),
+            ...fontAttrs(chip.style, fonts, TEXT_SIZE_PX.xs),
             'text-anchor': 'middle',
         }, chip.text));
     }
     return tag('g', { 'data-layer': 'item', 'data-id': i.id ?? null }, parts.join(''));
 }
-function renderGroup(g, options, idPrefix, palette) {
+function renderGroup(g, options, idPrefix, palette, fonts) {
     const parts = [];
     const hasFill = g.style.bg !== 'none' && g.style.bg !== '#ffffff';
     if (hasFill) {
@@ -966,7 +966,7 @@ function renderGroup(g, options, idPrefix, palette) {
             parts.push(textTag({
                 x: num(tabX + GROUP_TITLE_TAB_PAD_X_PX),
                 y: num(tabY + GROUP_TITLE_TAB_LABEL_BASELINE_OFFSET_PX),
-                'font-family': FONT_STACK[g.style.font],
+                'font-family': fonts[g.style.font],
                 'font-size': GROUP_TITLE_TAB_LABEL_FONT_SIZE_PX,
                 'font-weight': 600,
                 fill: '#ffffff',
@@ -1008,7 +1008,7 @@ function renderGroup(g, options, idPrefix, palette) {
             parts.push(textTag({
                 x: num(g.box.x + 6),
                 y: num(g.box.y - 2),
-                ...fontAttrs(g.style, TEXT_SIZE_PX.xs),
+                ...fontAttrs(g.style, fonts, TEXT_SIZE_PX.xs),
                 'fill-opacity': 0.7,
             }, g.title));
         }
@@ -1019,12 +1019,12 @@ function renderGroup(g, options, idPrefix, palette) {
     // bounding box.
     parts.push(renderInlineDatePins(g.inlineDatePins, g.style.fg));
     for (const c of g.children) {
-        parts.push(renderTrackChild(c, options, idPrefix, palette));
+        parts.push(renderTrackChild(c, options, idPrefix, palette, fonts));
     }
     void palette;
     return tag('g', { 'data-layer': 'group', 'data-id': g.id ?? null }, parts.join(''));
 }
-function renderParallel(p, options, idPrefix, palette) {
+function renderParallel(p, options, idPrefix, palette, fonts) {
     const parts = [];
     // `bracket: solid|dashed` parallels render explicit [ ] brackets framing
     // the nested tracks with 12 px vertical padding above/below.
@@ -1057,7 +1057,7 @@ function renderParallel(p, options, idPrefix, palette) {
         parts.push(textTag({
             x: num(p.box.x + 4),
             y: num(p.box.y - 2),
-            ...fontAttrs(p.style, TEXT_SIZE_PX.xs),
+            ...fontAttrs(p.style, fonts, TEXT_SIZE_PX.xs),
             'fill-opacity': 0.7,
         }, p.title));
     }
@@ -1065,16 +1065,16 @@ function renderParallel(p, options, idPrefix, palette) {
     // `before:DATE`). Painted before children so child bars sit on top.
     parts.push(renderInlineDatePins(p.inlineDatePins, p.style.fg));
     for (const c of p.children) {
-        parts.push(renderTrackChild(c, options, idPrefix, palette));
+        parts.push(renderTrackChild(c, options, idPrefix, palette, fonts));
     }
     return tag('g', { 'data-layer': 'parallel', 'data-id': p.id ?? null }, parts.join(''));
 }
-function renderTrackChild(c, options, idPrefix, palette) {
+function renderTrackChild(c, options, idPrefix, palette, fonts) {
     if (c.kind === 'item')
-        return renderItem(c, options, idPrefix, palette);
+        return renderItem(c, options, idPrefix, palette, fonts);
     if (c.kind === 'group')
-        return renderGroup(c, options, idPrefix, palette);
-    return renderParallel(c, options, idPrefix, palette);
+        return renderGroup(c, options, idPrefix, palette, fonts);
+    return renderParallel(c, options, idPrefix, palette, fonts);
 }
 // Renders only the swimlane's background tint rect. Emitted before the
 // chart-body grid lines so those lines visibly span the full chart width.
@@ -1136,7 +1136,7 @@ function renderSwimlaneBg(s, palette) {
         'stroke-width': 1,
     }));
 }
-function renderSwimlane(s, options, idPrefix, palette) {
+function renderSwimlane(s, options, idPrefix, palette, fonts) {
     const tabFill = palette.swimlane.tabFill;
     const tabStroke = palette.swimlane.tabStroke;
     const tabText = palette.swimlane.tabText;
@@ -1181,7 +1181,7 @@ function renderSwimlane(s, options, idPrefix, palette) {
         parts.push(textTag({
             x: num(tab.titleX),
             y: num(labelY),
-            'font-family': FONT_STACK[s.style.font],
+            'font-family': fonts[s.style.font],
             'font-size': 12,
             'font-weight': 600,
             fill: tabText,
@@ -1190,7 +1190,7 @@ function renderSwimlane(s, options, idPrefix, palette) {
             parts.push(textTag({
                 x: num(tab.ownerX),
                 y: num(labelY),
-                'font-family': FONT_STACK[s.style.font],
+                'font-family': fonts[s.style.font],
                 'font-size': 10,
                 fill: ownerText,
             }, `owner: ${s.owner}`));
@@ -1200,13 +1200,13 @@ function renderSwimlane(s, options, idPrefix, palette) {
             // item-level suffixes (m6) so multiplier / built-in SVG /
             // inline literal / dereferenced-custom-glyph paths stay
             // consistent across both contexts.
-            parts.push(renderCapacitySuffix(s.capacity, undefined, tab.badgeX, labelY, LANE_BADGE_FONT_SIZE_PX, FONT_STACK[s.style.font], ownerText));
+            parts.push(renderCapacitySuffix(s.capacity, undefined, tab.badgeX, labelY, LANE_BADGE_FONT_SIZE_PX, fonts[s.style.font], ownerText));
         }
         if (footnoteIndicatorText) {
             parts.push(textTag({
                 x: num(tab.footnoteRightX),
                 y: num(tabY + 14),
-                'font-family': FONT_STACK.sans,
+                'font-family': fonts.sans,
                 'font-size': LANE_BADGE_FONT_SIZE_PX,
                 'font-weight': 700,
                 fill: footnoteColor,
@@ -1215,7 +1215,7 @@ function renderSwimlane(s, options, idPrefix, palette) {
         }
     }
     for (const c of s.children) {
-        parts.push(renderTrackChild(c, options, idPrefix, palette));
+        parts.push(renderTrackChild(c, options, idPrefix, palette, fonts));
     }
     // m13: tri-state utilization underline along the band's bottom edge.
     // Painted after items so it overlays any item that happens to extend
@@ -1224,7 +1224,7 @@ function renderSwimlane(s, options, idPrefix, palette) {
     parts.push(renderLaneUtilization(s, palette));
     return tag('g', { 'data-layer': 'swimlane', 'data-id': s.id ?? null }, parts.join(''));
 }
-function renderAnchor(a, palette) {
+function renderAnchor(a, palette, fonts) {
     const size = a.radius;
     const cx = a.center.x;
     const cy = a.center.y;
@@ -1249,7 +1249,7 @@ function renderAnchor(a, palette) {
     const labelAttrs = {
         x: num(labelX),
         y: num(cy + 4),
-        'font-family': FONT_STACK.sans,
+        'font-family': fonts.sans,
         'font-size': 10,
         fill: labelColor,
     };
@@ -1270,7 +1270,7 @@ function renderAnchorCutLine(a, palette) {
         'stroke-dasharray': '1 3',
     });
 }
-function renderMilestone(m, palette) {
+function renderMilestone(m, palette, fonts) {
     const cx = m.center.x;
     const cy = m.center.y;
     const r = m.radius;
@@ -1289,7 +1289,7 @@ function renderMilestone(m, palette) {
     const labelAttrs = {
         x: num(labelX),
         y: num(cy + 4),
-        'font-family': FONT_STACK.sans,
+        'font-family': fonts.sans,
         'font-size': 10,
         'font-weight': 600,
         fill: labelColor,
@@ -1384,7 +1384,7 @@ function roundedOrthogonalPath(points, radius) {
     }
     return parts.join(' ');
 }
-function renderFootnotes(f, idPrefix, palette) {
+function renderFootnotes(f, idPrefix, palette, fonts) {
     if (f.entries.length === 0)
         return '';
     const panelFill = palette.footnotePanel.fill;
@@ -1409,7 +1409,7 @@ function renderFootnotes(f, idPrefix, palette) {
     parts.push(textTag({
         x: num(f.box.x + FOOTNOTE_PANEL_PADDING_PX),
         y: num(f.box.y + FOOTNOTE_HEADER_BASELINE_OFFSET_PX),
-        'font-family': FONT_STACK.sans,
+        'font-family': fonts.sans,
         'font-size': 12,
         'font-weight': 700,
         fill: headerColor,
@@ -1424,7 +1424,7 @@ function renderFootnotes(f, idPrefix, palette) {
         parts.push(textTag({
             x: num(numberX),
             y: num(y),
-            'font-family': FONT_STACK.sans,
+            'font-family': fonts.sans,
             'font-size': 10,
             'font-weight': 700,
             fill: numberColor,
@@ -1432,7 +1432,7 @@ function renderFootnotes(f, idPrefix, palette) {
         parts.push(textTag({
             x: num(titleX),
             y: num(y),
-            'font-family': FONT_STACK.sans,
+            'font-family': fonts.sans,
             'font-size': 11,
             'font-weight': 600,
             fill: titleColor,
@@ -1441,7 +1441,7 @@ function renderFootnotes(f, idPrefix, palette) {
             parts.push(textTag({
                 x: num(titleX + Math.max(120, e.title.length * 6)),
                 y: num(y),
-                'font-family': FONT_STACK.sans,
+                'font-family': fonts.sans,
                 'font-size': 11,
                 fill: descColor,
             }, `— ${e.description}`));
@@ -1449,7 +1449,7 @@ function renderFootnotes(f, idPrefix, palette) {
     });
     return tag('g', { 'data-layer': 'footnotes' }, parts.join(''));
 }
-function renderIncludeRegion(r, options, idPrefix, palette) {
+function renderIncludeRegion(r, options, idPrefix, palette, fonts) {
     const border = palette.includeRegion.border;
     const fill = palette.includeRegion.fill;
     const tabFill = palette.includeRegion.tabFill;
@@ -1495,7 +1495,7 @@ function renderIncludeRegion(r, options, idPrefix, palette) {
     const tabLabel = textTag({
         x: num(chrome.tabLabelX),
         y: num(tabY + FRAME_TAB_LABEL_BASELINE_OFFSET_PX),
-        'font-family': FONT_STACK.sans,
+        'font-family': fonts.sans,
         'font-size': 11,
         'font-weight': 600,
         fill: tabText,
@@ -1548,13 +1548,13 @@ function renderIncludeRegion(r, options, idPrefix, palette) {
     const sourceText = textTag({
         x: num(chrome.sourceTextX),
         y: num(sourceTextY),
-        'font-family': FONT_STACK.mono,
+        'font-family': fonts.mono,
         'font-size': sourceFontSize,
         fill: badgeText,
     }, r.sourcePath);
     // Nested swimlanes (laid out by buildIncludeRegions against the parent's timeline).
     const nested = r.nestedSwimlanes
-        .map((s) => renderSwimlane(s, options, idPrefix, palette))
+        .map((s) => renderSwimlane(s, options, idPrefix, palette, fonts))
         .join('');
     return tag('g', { 'data-layer': 'include' }, region + nested + tab + tabLabel + badge + glyph + sourceHalo + sourceText);
 }
@@ -1564,7 +1564,7 @@ function renderIncludeRegion(r, options, idPrefix, palette) {
 // entire string is clickable. Glyph anatomy (positions, widths, scale)
 // lives in `themes/shared.ts` (`ATTRIBUTION_*`); the layout reserves a
 // box of exactly that size at canvas-bottom-right.
-function renderAttributionMark(model) {
+function renderAttributionMark(model, fonts) {
     const muted = model.palette.attribution.mark;
     const accent = model.palette.attribution.link;
     if (model.swimlanes.length === 0)
@@ -1578,7 +1578,7 @@ function renderAttributionMark(model) {
     const inner = textTag({
         x: '0',
         y: baselineY,
-        'font-family': FONT_STACK.sans,
+        'font-family': fonts.sans,
         'font-size': ATTRIBUTION_PREFIX_FONT_SIZE,
         'font-weight': 400,
         fill: muted,
@@ -1586,7 +1586,7 @@ function renderAttributionMark(model) {
         textTag({
             x: ATTRIBUTION_NOW_LOGICAL_X,
             y: baselineY,
-            'font-family': FONT_STACK.sans,
+            'font-family': fonts.sans,
             'font-size': ATTRIBUTION_WORDMARK_FONT_SIZE,
             'font-weight': 700,
             fill: muted,
@@ -1601,7 +1601,7 @@ function renderAttributionMark(model) {
         textTag({
             x: ATTRIBUTION_INE_LOGICAL_X,
             y: baselineY,
-            'font-family': FONT_STACK.sans,
+            'font-family': fonts.sans,
             'font-size': ATTRIBUTION_WORDMARK_FONT_SIZE,
             'font-weight': 400,
             fill: muted,
@@ -1672,6 +1672,10 @@ export async function renderSvg(model, options = {}) {
     const ids = new IdGenerator(options.idPrefix ?? 'nl');
     const idPrefix = ids.next('root');
     const palette = model.palette;
+    // Per-role family strings stamped onto every <text>. Defaults to the
+    // portable FONT_STACK; raster/preview callers pass a pinned bundled
+    // family so the SVG names exactly the font the consumer provides.
+    const fonts = options.fontFamilies ?? FONT_STACK;
     const parts = [];
     // <defs> — shadows + arrowhead markers (palette-driven fills baked in).
     const arrowFillNeutral = palette.arrowhead.neutral;
@@ -1697,7 +1701,7 @@ export async function renderSvg(model, options = {}) {
     // swimlane background rects emitted later — so the major dotted
     // and minor grid lines never actually rendered in the chart body.
     // They now ship as their own layer below.
-    parts.push(renderTimeline(model.timeline, palette));
+    parts.push(renderTimeline(model.timeline, palette, fonts));
     // Swimlane backgrounds — emitted as their own pass so the grid
     // lines can be drawn on top of them, then the swimlane content
     // (frame tab + items) sits on top of the grid.
@@ -1722,11 +1726,11 @@ export async function renderSvg(model, options = {}) {
     }
     // Swimlane content (frame tabs + items) on top of the grid lines.
     for (const s of model.swimlanes)
-        parts.push(renderSwimlane(s, options, idPrefix, palette));
+        parts.push(renderSwimlane(s, options, idPrefix, palette, fonts));
     // Include regions (drawn after own swimlanes so the dashed border + tab
     // overlay the chart, with their own nested swimlanes inside).
     for (const r of model.includes)
-        parts.push(renderIncludeRegion(r, options, idPrefix, palette));
+        parts.push(renderIncludeRegion(r, options, idPrefix, palette, fonts));
     // Normal / overflow dependency edges on top of items but below
     // cut-lines / nowline. Under-bar edges already painted above.
     for (const e of model.edges) {
@@ -1741,15 +1745,15 @@ export async function renderSvg(model, options = {}) {
         parts.push(renderMilestoneCutLine(m, palette));
     // Marker-row diamonds + labels.
     for (const a of model.anchors)
-        parts.push(renderAnchor(a, palette));
+        parts.push(renderAnchor(a, palette, fonts));
     for (const m of model.milestones)
-        parts.push(renderMilestone(m, palette));
+        parts.push(renderMilestone(m, palette, fonts));
     // Now-line
-    parts.push(renderNowline(model.nowline, palette));
+    parts.push(renderNowline(model.nowline, palette, fonts));
     // Footnotes + header last (always on top)
-    parts.push(renderFootnotes(model.footnotes, idPrefix, palette));
-    parts.push(renderHeader(model.header, idPrefix, palette));
-    parts.push(renderAttributionMark(model));
+    parts.push(renderFootnotes(model.footnotes, idPrefix, palette, fonts));
+    parts.push(renderHeader(model.header, idPrefix, palette, fonts));
+    parts.push(renderAttributionMark(model, fonts));
     // Logo (if header carries one)
     if (model.header.logo && options.assetResolver) {
         const logoSvg = await embedLogo(model.header.logo.assetRef ?? '', options.assetResolver, idPrefix, options, model.header.logo.box.x, model.header.logo.box.y, Math.max(model.header.logo.box.width, model.header.logo.box.height));