@nowline/renderer 0.8.6 → 0.10.0

package/src/svg/header.ts

@@ -0,0 +1,285 @@
+// The header layers: the title card, the "Powered by nowline" attribution mark,
+// and the embedded logo that sits in the card, plus the base64 helper the logo
+// path uses.
+
+import type { PositionedHeader, PositionedLogo, PositionedRoadmap, Theme } from '@nowline/layout';
+import {
+    ATTRIBUTION_BAR_LOGICAL_WIDTH,
+    ATTRIBUTION_BAR_LOGICAL_X,
+    ATTRIBUTION_INE_LOGICAL_X,
+    ATTRIBUTION_LINK,
+    ATTRIBUTION_NOW_LOGICAL_X,
+    ATTRIBUTION_PREFIX_FONT_SIZE,
+    ATTRIBUTION_SCALE,
+    ATTRIBUTION_TEXT,
+    ATTRIBUTION_WORDMARK_FONT_SIZE,
+    HEADER_AUTHOR_FONT_SIZE_PX,
+    HEADER_AUTHOR_LINE_HEIGHT_PX,
+    HEADER_CARD_PADDING_TOP,
+    HEADER_CARD_PADDING_X,
+    HEADER_TITLE_FONT_SIZE_PX,
+    HEADER_TITLE_LINE_HEIGHT_PX,
+    HEADER_TITLE_TO_AUTHOR_GAP_PX,
+} from '@nowline/layout';
+import type { AssetBytes, AssetResolver, FontFamilies, RenderOptions } from './render.js';
+import { sanitizeSvg, svgIntrinsicSize } from './sanitize.js';
+import { num, tag, textTag } from './xml.js';
+
+export function renderHeader(
+    h: PositionedHeader,
+    idPrefix: string,
+    palette: Theme,
+    fonts: FontFamilies,
+): string {
+    // 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
+    // in @nowline/layout.
+    const cardX = h.box.x + h.cardBox.x;
+    const cardY = h.box.y + h.cardBox.y;
+    const cardWidth = h.cardBox.width;
+    const cardHeight = h.cardBox.height;
+    const cardFill = h.style.bg === 'none' ? palette.surface.headerBox : h.style.bg;
+    const borderColor = palette.header.cardBorder;
+    const card = tag('rect', {
+        x: num(cardX),
+        y: num(cardY),
+        width: num(cardWidth),
+        height: num(cardHeight),
+        rx: 6,
+        ry: 6,
+        fill: cardFill,
+        stroke: borderColor,
+        'stroke-width': 1,
+        filter: `url(#${idPrefix}-shadow-subtle)`,
+    });
+    // Title and author baselines come from `@nowline/layout`'s
+    // `header-card-geometry` module so the renderer paints with the
+    // exact metrics `sizeBesideHeader` sized the card to.
+    // A logo in the card shifts the text right of it (and down, to center
+    // it, when the logo made the card taller); see `h.textInset`.
+    const textX = cardX + HEADER_CARD_PADDING_X + (h.textInset?.x ?? 0);
+    const textTopY = cardY + (h.textInset?.y ?? 0);
+    const titleParts: string[] = [];
+    h.titleLines.forEach((line, i) => {
+        titleParts.push(
+            textTag(
+                {
+                    x: num(textX),
+                    y: num(textTopY + HEADER_CARD_PADDING_TOP + i * HEADER_TITLE_LINE_HEIGHT_PX),
+                    'font-family': fonts[h.style.font],
+                    'font-size': HEADER_TITLE_FONT_SIZE_PX,
+                    'font-weight': 600,
+                    fill: h.style.text,
+                },
+                line,
+            ),
+        );
+    });
+    const titleText = titleParts.join('');
+    const lastTitleY =
+        textTopY +
+        HEADER_CARD_PADDING_TOP +
+        Math.max(0, h.titleLines.length - 1) * HEADER_TITLE_LINE_HEIGHT_PX;
+    const authorColor = palette.header.author;
+    const authorParts: string[] = [];
+    h.authorLines.forEach((line, j) => {
+        authorParts.push(
+            textTag(
+                {
+                    x: num(textX),
+                    y: num(
+                        lastTitleY +
+                            HEADER_TITLE_TO_AUTHOR_GAP_PX +
+                            j * HEADER_AUTHOR_LINE_HEIGHT_PX,
+                    ),
+                    'font-family': fonts[h.style.font],
+                    'font-size': HEADER_AUTHOR_FONT_SIZE_PX,
+                    fill: authorColor,
+                },
+                line,
+            ),
+        );
+    });
+    const authorText = authorParts.join('');
+    return tag(
+        'g',
+        { 'data-layer': 'header', 'data-id': `${idPrefix}-header` },
+        card + titleText + authorText,
+    );
+}
+
+// Paint the "Powered by nowline" attribution mark inside the
+// layout-supplied `attributionBox`. The whole mark — prefix text,
+// "now", red "l" bar, and "ine" — sits inside one <a href> so the
+// 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.
+export function renderAttributionMark(model: PositionedRoadmap, fonts: FontFamilies): string {
+    const muted = model.palette.attribution.mark;
+    const accent = model.palette.attribution.link;
+    if (model.swimlanes.length === 0) return '';
+    const tx = model.header.attributionBox.x;
+    const ty = model.header.attributionBox.y;
+    // Both texts share the wordmark's baseline (y = wordmark font size)
+    // so the smaller "Powered by" sits visually above the wordmark's
+    // baseline without bumping the bar's bottom up.
+    const baselineY = ATTRIBUTION_WORDMARK_FONT_SIZE;
+    const inner =
+        textTag(
+            {
+                x: '0',
+                y: baselineY,
+                'font-family': fonts.sans,
+                'font-size': ATTRIBUTION_PREFIX_FONT_SIZE,
+                'font-weight': 400,
+                fill: muted,
+            },
+            ATTRIBUTION_TEXT,
+        ) +
+        textTag(
+            {
+                x: ATTRIBUTION_NOW_LOGICAL_X,
+                y: baselineY,
+                'font-family': fonts.sans,
+                'font-size': ATTRIBUTION_WORDMARK_FONT_SIZE,
+                'font-weight': 700,
+                fill: muted,
+            },
+            'now',
+        ) +
+        tag('rect', {
+            x: ATTRIBUTION_BAR_LOGICAL_X,
+            y: 12,
+            width: ATTRIBUTION_BAR_LOGICAL_WIDTH,
+            height: ATTRIBUTION_WORDMARK_FONT_SIZE,
+            fill: accent,
+        }) +
+        textTag(
+            {
+                x: ATTRIBUTION_INE_LOGICAL_X,
+                y: baselineY,
+                'font-family': fonts.sans,
+                'font-size': ATTRIBUTION_WORDMARK_FONT_SIZE,
+                'font-weight': 400,
+                fill: muted,
+            },
+            'ine',
+        );
+    const group = tag(
+        'g',
+        { transform: `translate(${num(tx)} ${num(ty)}) scale(${num(ATTRIBUTION_SCALE)})` },
+        inner,
+    );
+    return tag(
+        'a',
+        {
+            href: ATTRIBUTION_LINK,
+            target: '_blank',
+            rel: 'noopener',
+            'aria-label': 'Powered by nowline',
+        },
+        tag('g', { 'data-layer': 'attribution' }, group),
+    );
+}
+
+// Draws the logo into its layout box. Layout sized the box to the asset's
+// aspect ratio, so scaling the asset to the box fills it exactly whether
+// the source is larger or smaller; `meet` (fit) only matters if the two
+// disagree, and then it letterboxes rather than cropping or distorting.
+export async function embedLogo(
+    logo: PositionedLogo,
+    resolver: AssetResolver | undefined,
+    idPrefix: string,
+    options: RenderOptions,
+): Promise<string> {
+    const logoRef = logo.assetRef ?? '';
+    const { x, y, width, height } = logo.box;
+    let asset: AssetBytes;
+    try {
+        if (options.logo && options.logo.ref === logoRef) {
+            asset = options.logo.asset;
+        } else if (resolver) {
+            asset = await resolver(logoRef);
+        } else {
+            return '';
+        }
+    } catch (err) {
+        const msg = `logo file not found: ${logoRef} (${err instanceof Error ? err.message : String(err)})`;
+        if (options.strict) throw err;
+        options.warn?.(msg);
+        return '';
+    }
+    const mime = (asset.mime ?? '').toLowerCase();
+    if (mime === 'image/svg+xml') {
+        const raw = new TextDecoder().decode(asset.bytes);
+        const intrinsic = logo.intrinsic ?? svgIntrinsicSize(raw) ?? { width, height };
+        // The root loses its own size so it fills this viewport; the
+        // viewport's viewBox then scales the asset's units to the box.
+        // One warning per logo listing what the sanitizer removed, not one
+        // per attribute; editor metadata it removes silently.
+        const removed = new Set<string>();
+        const cleaned = sanitizeSvg(raw, {
+            idPrefix: `${idPrefix}-logo`,
+            onWarn: (msg) => removed.add(msg.replace(/^sanitizer: dropping /, '')),
+            stripRootSize: true,
+        });
+        // A warning even under strict: callers promote warnings themselves
+        // (the export kernel throws, the browser pipeline returns rows).
+        if (removed.size > 0) {
+            options.warn?.(
+                `logo ${logoRef}: removed unsupported SVG content: ${[...removed].join(', ')}`,
+            );
+        }
+        return tag(
+            'svg',
+            {
+                'data-layer': 'logo',
+                x: num(x),
+                y: num(y),
+                width: num(width),
+                height: num(height),
+                viewBox: `0 0 ${num(intrinsic.width)} ${num(intrinsic.height)}`,
+                preserveAspectRatio: 'xMidYMid meet',
+                overflow: 'hidden',
+            },
+            cleaned,
+        );
+    }
+    if (
+        mime === 'image/png' ||
+        mime === 'image/jpeg' ||
+        mime === 'image/jpg' ||
+        mime === 'image/webp'
+    ) {
+        const b64 = bytesToBase64(asset.bytes);
+        return tag('image', {
+            'data-layer': 'logo',
+            href: `data:${mime};base64,${b64}`,
+            x: num(x),
+            y: num(y),
+            width: num(width),
+            height: num(height),
+            preserveAspectRatio: 'xMidYMid meet',
+        });
+    }
+    const msg = `unsupported logo format: ${mime} (${logoRef})`;
+    if (options.strict) throw new Error(msg);
+    options.warn?.(msg);
+    return '';
+}
+
+// Base64 without depending on Node's Buffer (renderer stays browser-safe).
+function bytesToBase64(bytes: Uint8Array): string {
+    if (typeof btoa !== 'undefined') {
+        let bin = '';
+        for (let i = 0; i < bytes.length; i++) bin += String.fromCharCode(bytes[i]);
+        return btoa(bin);
+    }
+    // Node fallback without importing Buffer directly; use lazy dynamic require.
+    const g = globalThis as {
+        Buffer?: { from: (b: Uint8Array) => { toString: (enc: string) => string } };
+    };
+    if (g.Buffer) return g.Buffer.from(bytes).toString('base64');
+    throw new Error('renderer: no base64 encoder available');
+}

package/src/svg/include-region.ts

@@ -0,0 +1,201 @@
+// The include-region layer: the dashed border, frame tab, badge and source
+// label drawn around the roadmap an `include` pulls in, with that roadmap's own
+// swimlanes, edges, markers, non-working bands and wave layers nested inside.
+
+import type {
+    BoundingBox,
+    PositionedIncludeRegion,
+    PositionedRoadmap,
+    Theme,
+} from '@nowline/layout';
+import {
+    ACCENT_DASH_PATTERN,
+    FRAME_TAB_HEIGHT_PX,
+    FRAME_TAB_LABEL_BASELINE_OFFSET_PX,
+    includeChromeGeometry,
+} from '@nowline/layout';
+import { renderEdge } from './edges.js';
+import {
+    renderAnchor,
+    renderAnchorCutLine,
+    renderMilestone,
+    renderMilestoneCutLine,
+} from './markers.js';
+import type { FontFamilies, RenderOptions } from './render.js';
+import { renderSwimlane } from './swimlanes.js';
+import { renderNonWorkingBands } from './timeline.js';
+import { renderWaveBoundaries, renderWaveCrossings, renderWaveTints } from './waves.js';
+import { num, tag, textTag } from './xml.js';
+
+export function renderIncludeRegion(
+    r: PositionedIncludeRegion,
+    options: RenderOptions,
+    idPrefix: string,
+    palette: Theme,
+    fonts: FontFamilies,
+    model?: PositionedRoadmap,
+): string {
+    const border = palette.includeRegion.border;
+    const fill = palette.includeRegion.fill;
+    const tabFill = palette.includeRegion.tabFill;
+    const tabStroke = palette.includeRegion.tabStroke;
+    const tabText = palette.includeRegion.tabText;
+    const badgeFill = palette.includeRegion.badgeFill;
+    const badgeStroke = palette.includeRegion.badgeStroke;
+    const badgeText = palette.includeRegion.badgeText;
+
+    const rx = r.box.x + 8;
+    const ry = r.box.y;
+    const rw = r.box.width - 16;
+    const rh = r.box.height;
+
+    const region = tag('rect', {
+        x: num(rx),
+        y: num(ry),
+        width: num(rw),
+        height: num(rh),
+        rx: 8,
+        ry: 8,
+        fill,
+        stroke: border,
+        'stroke-width': 1,
+        'stroke-dasharray': ACCENT_DASH_PATTERN,
+    });
+
+    // Chrome geometry — single source of truth shared with the layout
+    // (`buildIncludeRegions` calls the same helper to size the dashed
+    // bracket so the chrome always fits inside it). All placement Xs
+    // come from the helper directly so the renderer stays declarative.
+    const tabHeight = FRAME_TAB_HEIGHT_PX;
+    const chrome = includeChromeGeometry(r.box.x, r.label, r.sourcePath);
+    const tabY = ry - tabHeight / 2;
+    const tab = tag('rect', {
+        x: num(chrome.tabX),
+        y: num(tabY),
+        width: num(chrome.tabWidth),
+        height: tabHeight,
+        rx: 4,
+        ry: 4,
+        fill: tabFill,
+        stroke: tabStroke,
+        'stroke-width': 1,
+    });
+    const tabLabel = textTag(
+        {
+            x: num(chrome.tabLabelX),
+            y: num(tabY + FRAME_TAB_LABEL_BASELINE_OFFSET_PX),
+            'font-family': fonts.sans,
+            'font-size': 11,
+            'font-weight': 600,
+            fill: tabText,
+        },
+        r.label,
+    );
+
+    // Content badge to the right of the tab. The glyph here is the
+    // stacked-sheets icon, distinct from the item-level link-icon
+    // outbound-arrow: an `include` is a content pull (one document
+    // brings in another), conceptually different from a `link:` that
+    // navigates somewhere.
+    const badgeX = chrome.badgeX;
+    const badgeSize = chrome.badgeSize;
+    const badgeY = ry - badgeSize / 2;
+    const badge = tag('rect', {
+        x: num(badgeX),
+        y: num(badgeY),
+        width: badgeSize,
+        height: badgeSize,
+        rx: 4,
+        ry: 4,
+        fill: badgeFill,
+        stroke: badgeStroke,
+        'stroke-width': 1,
+    });
+    // Glyph: stacked sheets — back rectangle peeking behind front
+    // rectangle. Sized for the 18×18 badge tile.
+    const glyph = tag('path', {
+        d:
+            `M${num(badgeX + 7)} ${num(badgeY + 4)} H${num(badgeX + 14)} V${num(badgeY + 11)}` +
+            ` M${num(badgeX + 4)} ${num(badgeY + 7)} H${num(badgeX + 11)} V${num(badgeY + 14)} H${num(badgeX + 4)} Z`,
+        stroke: badgeText,
+        'stroke-width': 1.4,
+        fill: 'none',
+        'stroke-linecap': 'round',
+        'stroke-linejoin': 'round',
+    });
+    // Halo behind the source-path text. The text's baseline at `ry + 4`
+    // straddles the dashed region border (drawn at y = ry); without a
+    // backing rect the dashed stroke cuts through the text body. Matches
+    // how the tab and badge already mask the border where they cross it.
+    // Fill is `includeRegion.fill` — same cream/tint as the region, near
+    // the canvas surface above, so the halo disappears into both.
+    const sourceFontSize = 9;
+    const sourceTextY = ry + 4;
+    const sourceHalo = tag('rect', {
+        x: num(chrome.sourceHaloX),
+        y: num(sourceTextY - sourceFontSize),
+        width: num(chrome.sourceHaloWidth),
+        height: sourceFontSize + 6,
+        fill,
+    });
+    const sourceText = textTag(
+        {
+            x: num(chrome.sourceTextX),
+            y: num(sourceTextY),
+            'font-family': fonts.mono,
+            'font-size': sourceFontSize,
+            fill: badgeText,
+        },
+        r.sourcePath,
+    );
+
+    // The opaque region fill hides the global wave layers, so a roadmap
+    // with waves re-emits its styled tints and boundaries over it, clipped
+    // to the painted region rect by rect intersection (no clipPath, no new
+    // defs), and the region's own crossings over its nested lanes
+    // (specs/waves.md §9.8). The strip stays global.
+    const clip: BoundingBox = { x: rx, y: ry, width: rw, height: rh };
+    // The same opaque fill hides the global non-working bands, so they are
+    // re-emitted over it the same way, under the wave layers.
+    const bandsUnder = model
+        ? renderNonWorkingBands(model.timeline, model.chartBox.y, palette, clip)
+        : '';
+    const waveUnder = model?.waves
+        ? renderWaveTints(model.waves, clip) + renderWaveBoundaries(model.waveBoundaries, clip)
+        : '';
+    const waveOver = model?.waves ? renderWaveCrossings(r.waveCrossings) : '';
+
+    // Nested swimlanes (laid out by buildIncludeRegions against the parent's timeline).
+    const nested = r.nestedSwimlanes
+        .map((s) => renderSwimlane(s, options, idPrefix, palette, fonts))
+        .join('');
+    // The region's own dependency edges, behind its bars as on the host.
+    const edges = (r.edges ?? []).map((e) => renderEdge(e, palette)).join('');
+    // The region's own anchors and milestones: cut lines over its lanes,
+    // then the diamonds and labels of its marker row, as on the host.
+    const anchors = r.anchors ?? [];
+    const milestones = r.milestones ?? [];
+    const markers =
+        anchors.map((a) => renderAnchorCutLine(a, palette)).join('') +
+        milestones.map((m) => renderMilestoneCutLine(m, idPrefix, palette)).join('') +
+        anchors.map((a) => renderAnchor(a, palette, fonts)).join('') +
+        milestones.map((m) => renderMilestone(m, palette, fonts)).join('');
+
+    return tag(
+        'g',
+        { 'data-layer': 'include' },
+        region +
+            bandsUnder +
+            waveUnder +
+            edges +
+            nested +
+            waveOver +
+            markers +
+            tab +
+            tabLabel +
+            badge +
+            glyph +
+            sourceHalo +
+            sourceText,
+    );
+}