@nowline/renderer 0.8.5 → 0.9.0

package/src/svg/sanitize.ts

@@ -75,7 +75,6 @@ const ALLOWED_ATTRIBUTES = new Set([
     'transform',
     'points',
     'id',
-    'class',
     'clip-path',
     'mask',
     'filter',
@@ -89,7 +88,6 @@ const ALLOWED_ATTRIBUTES = new Set([
     'rotate',
     'letter-spacing',
     'word-spacing',
-    'style',
     'xmlns',
     'href',
     'xlink:href',
@@ -114,8 +112,129 @@ const ALLOWED_ATTRIBUTES = new Set([
     'patternContentUnits',
     'role',
     'aria-label',
+    // Presentation attributes beyond the ones above, so the same set can
+    // arrive from a `style` declaration (see PRESENTATION_PROPERTIES).
+    'display',
+    'visibility',
+    'clip-rule',
+    'color',
+    'font-variant',
+    'font-stretch',
+    'text-decoration',
+    'dominant-baseline',
+    'alignment-baseline',
+    'baseline-shift',
+    'writing-mode',
+    'paint-order',
+    'vector-effect',
+    'shape-rendering',
+    'text-rendering',
+    'image-rendering',
+    'color-interpolation',
+    'color-interpolation-filters',
 ]);
 
+// CSS properties a `style` attribute or `<style>` class rule may set. Each
+// becomes the presentation attribute of the same name, then goes through
+// the same attribute checks as one written directly. Editors (Inkscape,
+// Illustrator, Figma) put a logo's colors here, so dropping them would draw
+// the logo black.
+const PRESENTATION_PROPERTIES = new Set([
+    'fill',
+    'fill-opacity',
+    'fill-rule',
+    'stroke',
+    'stroke-width',
+    'stroke-opacity',
+    'stroke-linecap',
+    'stroke-linejoin',
+    'stroke-miterlimit',
+    'stroke-dasharray',
+    'stroke-dashoffset',
+    'opacity',
+    'clip-path',
+    'clip-rule',
+    'mask',
+    'filter',
+    'font-family',
+    'font-size',
+    'font-weight',
+    'font-style',
+    'font-variant',
+    'font-stretch',
+    'text-anchor',
+    'text-decoration',
+    'letter-spacing',
+    'word-spacing',
+    'dominant-baseline',
+    'alignment-baseline',
+    'baseline-shift',
+    'writing-mode',
+    'stop-color',
+    'stop-opacity',
+    'flood-color',
+    'flood-opacity',
+    'display',
+    'visibility',
+    'color',
+    'paint-order',
+    'vector-effect',
+    'shape-rendering',
+    'text-rendering',
+    'image-rendering',
+    'color-interpolation',
+    'color-interpolation-filters',
+]);
+
+// CSS properties dropped without a warning: they have no effect on how an
+// SVG 1.1 renderer draws the logo (editor hints, typographic settings for
+// features we do not draw, text layout that `text-anchor` already carries).
+const IGNORED_STYLE_PROPERTIES = new Set([
+    'line-height',
+    'text-align',
+    'font-variant-ligatures',
+    'font-variant-caps',
+    'font-variant-numeric',
+    'font-variant-east-asian',
+    'font-variant-position',
+    'font-variant-alternates',
+    'font-feature-settings',
+    'font-variation-settings',
+    'font-kerning',
+    'white-space',
+    'text-orientation',
+    'overflow',
+    'isolation',
+    'solid-color',
+    'solid-opacity',
+    'enable-background',
+    'color-rendering',
+]);
+
+// Values that leave an unsupported property at its default, so dropping
+// it changes nothing (`mix-blend-mode:normal`, `marker:none`).
+const NO_OP_VALUES = new Set(['none', 'normal', 'auto', 'initial', 'inherit', 'unset']);
+
+// Attributes dropped without a warning: editor and document bookkeeping
+// that never draws (`inkscape:label`, `sodipodi:docname`, `xmlns:*`,
+// `xml:space`, `data-name`, `version`).
+function isMetadataAttribute(key: string): boolean {
+    if (key === 'xlink:href') return false;
+    return (
+        key.includes(':') ||
+        key.startsWith('data-') ||
+        key === 'version' ||
+        key === 'baseProfile' ||
+        key === 'enable-background'
+    );
+}
+
+// Elements dropped without a warning: `<metadata>` and editor-namespaced
+// elements (`<sodipodi:namedview>`, `<inkscape:page>`, `<rdf:RDF>`).
+function isMetadataElement(name: string): boolean {
+    return name === 'metadata' || (name.includes(':') && !name.startsWith('svg:'));
+}
+
 export interface SanitizeOptions {
     // Rewrite internal ids under this prefix to avoid collisions with the
     // host document. The rewrite is both on `id=` and on references
@@ -123,8 +242,13 @@ export interface SanitizeOptions {
     idPrefix?: string;
     // Called when the sanitizer rejects a construct, for test/diagnostic use.
     onWarn?: (message: string) => void;
+    // Drop `x`, `y`, `width` and `height` from the root `<svg>` so it fills
+    // whatever viewport the host wraps it in (logo scaling).
+    stripRootSize?: boolean;
 }
 
+const ROOT_SIZE_ATTRIBUTES = new Set(['x', 'y', 'width', 'height']);
+
 interface Token {
     kind: 'open' | 'close' | 'self' | 'text' | 'cdata' | 'comment' | 'decl';
     name?: string;
@@ -282,6 +406,17 @@ export function sanitizeSvg(input: string, options: SanitizeOptions = {}): strin
     const warn = options.onWarn ?? ((): void => {});
     const tokens = tokenize(input);
 
+    // Class rules from every `<style>` element, applied below as attributes.
+    // The `<style>` element itself is never emitted.
+    let sheet = '';
+    let styleDepth = 0;
+    for (const t of tokens) {
+        if (t.kind === 'open' && t.name === 'style') styleDepth++;
+        else if (t.kind === 'close' && t.name === 'style') styleDepth = Math.max(0, styleDepth - 1);
+        else if (styleDepth > 0 && (t.kind === 'text' || t.kind === 'cdata')) sheet += t.text ?? '';
+    }
+    const classRules = parseClassRules(sheet, (what) => warn(`sanitizer: dropping ${what}`));
+
     // First pass: discover ids so the second pass can rewrite references.
     const idMap = new Map<string, string>();
     let idCounter = 0;
@@ -329,19 +464,31 @@ export function sanitizeSvg(input: string, options: SanitizeOptions = {}): strin
                 if (t.kind === 'open') stack.push(false);
                 continue;
             }
+            if (name === 'style' || isMetadataElement(name)) {
+                if (t.kind === 'open') stack.push(false);
+                continue;
+            }
             if (!ALLOWED_ELEMENTS.has(name)) {
                 warn(`sanitizer: dropping unknown element <${name}>`);
                 if (t.kind === 'open') stack.push(false);
                 continue;
             }
             const parts: string[] = [`<${name}`];
-            const keys = Object.keys(t.attrs ?? {}).sort();
+            const isRoot = name === 'svg' && stack.length === 0;
+            const merged = applyStyles(t.attrs ?? {}, classRules, warn);
+            const keys = Object.keys(merged).sort();
             for (const key of keys) {
-                const value = (t.attrs as Record<string, string>)[key];
+                const value = merged[key];
+                if (isRoot && options.stripRootSize && ROOT_SIZE_ATTRIBUTES.has(key)) continue;
                 if (/^on/i.test(key)) {
                     warn(`sanitizer: dropping event handler ${key}`);
                     continue;
                 }
+                if (isMetadataAttribute(key)) continue;
+                // `applyStyles` has folded the `<style>` rules into attributes,
+                // so `class` is spent bookkeeping. Keeping it would let CSS on
+                // the host page (another inline SVG's `.cls-1`) restyle the logo.
+                if (key === 'class') continue;
                 if (!ALLOWED_ATTRIBUTES.has(key)) {
                     warn(`sanitizer: dropping attribute ${key}`);
                     continue;
@@ -355,30 +502,33 @@ export function sanitizeSvg(input: string, options: SanitizeOptions = {}): strin
                     parts.push(` ${key}="${escAttrValue(rewritten)}"`);
                     continue;
                 }
-                if (key === 'style') {
-                    // CSS can smuggle `expression()` or url() — strip entirely.
-                    warn('sanitizer: dropping inline style');
-                    continue;
-                }
                 if (key === 'id') {
                     const mapped = idMap.get(value);
                     if (mapped) parts.push(` id="${escAttrValue(mapped)}"`);
                     continue;
                 }
+                // Reject raster data URIs, script URLs, any url() that is not
+                // a local fragment (an external fetch), and CSS escapes or
+                // constructs a style value could smuggle in. Local
+                // `url(#foo)` references are checked out of the value first.
+                const localRef = /url\(#([^)]+)\)/gi;
+                if (
+                    /data:|javascript:|vbscript:|url\(|expression\s*\(|[\\{}]/i.test(
+                        value.replace(localRef, ''),
+                    )
+                ) {
+                    warn(`sanitizer: dropping suspicious value at ${key}`);
+                    continue;
+                }
                 // Rewrite any `url(#foo)` embedded inside fill/stroke/etc.
-                if (/\burl\(#/i.test(value)) {
-                    const rewritten = value.replace(/url\(#([^)]+)\)/gi, (_m, id) => {
+                if (/url\(#/i.test(value)) {
+                    const rewritten = value.replace(localRef, (_m, id) => {
                         const mapped = idMap.get(id);
                         return mapped ? `url(#${mapped})` : 'none';
                     });
                     parts.push(` ${key}="${escAttrValue(rewritten)}"`);
                     continue;
                 }
-                // Reject raster data URIs at non-href attributes.
-                if (/data:|javascript:|vbscript:/i.test(value)) {
-                    warn(`sanitizer: dropping suspicious value at ${key}`);
-                    continue;
-                }
                 parts.push(` ${key}="${escAttrValue(value)}"`);
             }
             parts.push(t.kind === 'self' ? '/>' : '>');
@@ -393,3 +543,123 @@ export function sanitizeSvg(input: string, options: SanitizeOptions = {}): strin
     }
     return output.join('');
 }
+
+// A unitless or `px` length, else undefined (percentages and absolute units
+// carry no intrinsic pixel size).
+function parsePxLength(raw: string | undefined): number | undefined {
+    if (raw === undefined) return undefined;
+    const m = /^\s*([0-9]*\.?[0-9]+(?:e[+-]?[0-9]+)?)\s*(px)?\s*$/i.exec(raw);
+    if (!m) return undefined;
+    const n = Number(m[1]);
+    return n > 0 && Number.isFinite(n) ? n : undefined;
+}
+
+/**
+ * Intrinsic size of an SVG document from its root `<svg>`: `width` and
+ * `height` when both are plain lengths, else the `viewBox` size. Undefined
+ * when neither gives a positive size (no root, `%` sizes and no viewBox).
+ */
+export function svgIntrinsicSize(input: string): { width: number; height: number } | undefined {
+    const root = tokenize(input).find(
+        (t) => (t.kind === 'open' || t.kind === 'self') && t.name === 'svg',
+    );
+    if (!root) return undefined;
+    const attrs = root.attrs ?? {};
+    const width = parsePxLength(attrs.width);
+    const height = parsePxLength(attrs.height);
+    if (width !== undefined && height !== undefined) return { width, height };
+    const vb = (attrs.viewBox ?? '')
+        .trim()
+        .split(/[\s,]+/)
+        .map(Number);
+    if (vb.length === 4 && vb.every(Number.isFinite) && vb[2] > 0 && vb[3] > 0) {
+        return { width: vb[2], height: vb[3] };
+    }
+    return undefined;
+}
+
+interface StyleDeclaration {
+    property: string;
+    value: string;
+}
+
+// `a: b; c: d` into declarations, `!important` stripped. Malformed parts
+// (no colon) are skipped.
+function parseDeclarations(text: string): StyleDeclaration[] {
+    const out: StyleDeclaration[] = [];
+    for (const part of text.split(';')) {
+        const colon = part.indexOf(':');
+        if (colon < 0) continue;
+        const property = part.slice(0, colon).trim().toLowerCase();
+        const value = part
+            .slice(colon + 1)
+            .replace(/!\s*important\s*$/i, '')
+            .trim();
+        if (property && value) out.push({ property, value });
+    }
+    return out;
+}
+
+interface ClassRule {
+    classes: string[];
+    declarations: StyleDeclaration[];
+}
+
+// The subset of a `<style>` sheet we apply: rules whose selectors are all
+// plain class selectors (`.cls-1, .cls-2 { ... }`), the shape Illustrator
+// and Figma export. Anything else (element, id or compound selectors,
+// at-rules) is reported through `onUnsupported` and not applied.
+function parseClassRules(sheet: string, onUnsupported: (what: string) => void): ClassRule[] {
+    const rules: ClassRule[] = [];
+    const text = sheet.replace(/\/\*[\s\S]*?\*\//g, '');
+    const rulePattern = /([^{}]+)\{([^{}]*)\}/g;
+    for (const m of text.matchAll(rulePattern)) {
+        const selectorText = m[1].trim();
+        const selectors = selectorText.split(',').map((sel) => sel.trim());
+        if (
+            selectorText.startsWith('@') ||
+            !selectors.every((sel) => /^\.[A-Za-z_][\w-]*$/.test(sel))
+        ) {
+            onUnsupported(`<style> rule ${selectorText}`);
+            continue;
+        }
+        rules.push({
+            classes: selectors.map((sel) => sel.slice(1)),
+            declarations: parseDeclarations(m[2]),
+        });
+    }
+    if (/@[a-z-]+[^{;]*;/i.test(text)) onUnsupported('<style> at-rule');
+    return rules;
+}
+
+// An element's attributes with its styles folded in, in CSS cascade order:
+// presentation attributes, then matching class rules in sheet order, then
+// the inline `style`. Only PRESENTATION_PROPERTIES survive as attributes;
+// other properties are dropped, with a warning unless ignorable.
+function applyStyles(
+    attrs: Record<string, string>,
+    classRules: ClassRule[],
+    warn: (message: string) => void,
+): Record<string, string> {
+    const classes = new Set((attrs.class ?? '').split(/\s+/).filter(Boolean));
+    const declarations: StyleDeclaration[] = [];
+    for (const rule of classRules) {
+        if (rule.classes.some((c) => classes.has(c))) declarations.push(...rule.declarations);
+    }
+    if (attrs.style !== undefined) declarations.push(...parseDeclarations(attrs.style));
+    if (declarations.length === 0 && attrs.style === undefined) return attrs;
+    const merged: Record<string, string> = { ...attrs };
+    delete merged.style;
+    for (const { property, value } of declarations) {
+        if (PRESENTATION_PROPERTIES.has(property)) {
+            merged[property] = value;
+        } else if (
+            !property.startsWith('-') &&
+            !IGNORED_STYLE_PROPERTIES.has(property) &&
+            !NO_OP_VALUES.has(value.toLowerCase())
+        ) {
+            warn(`sanitizer: dropping style property ${property}`);
+        }
+    }
+    return merged;
+}

package/src/svg/swimlanes.ts

@@ -0,0 +1,317 @@
+// The swimlane layers: the lane background tint and tri-state utilization
+// underline, the lane frame tab and badges, and the group and parallel
+// containers that wrap a lane's items.
+
+import type {
+    PositionedGroup,
+    PositionedParallel,
+    PositionedSwimlane,
+    PositionedTrackChild,
+    Theme,
+} from '@nowline/layout';
+import {
+    CONTAINER_BODY_FILL_OPACITY,
+    CONTAINER_BRACKET_LINE_OFFSET_PX,
+    CONTAINER_HEADER_TITLE_BASELINE_PX,
+    CONTAINER_HEADER_TITLE_FONT_SIZE_PX,
+    CONTAINER_MAX_FILLED_DEPTH,
+    CONTAINER_NESTED_BODY_FILL_OPACITY,
+    containerHeaderTitleX,
+    FRAME_TAB_HEIGHT_PX,
+    FRAME_TAB_LABEL_BASELINE_OFFSET_PX,
+    FRAME_TAB_OWNER_GLYPH_PX,
+} from '@nowline/layout';
+import { CAPACITY_ICON_SVG } from './icons.js';
+import { hasAfterPin, renderCapacitySuffix, renderInlineDatePins, renderItem } from './item.js';
+import { fontAttrs } from './primitives.js';
+import type { FontFamilies, RenderOptions } from './render.js';
+import { escAttr, num, tag, textTag } from './xml.js';
+
+/**
+ * A group or parallel, drawn above and around its content
+ * (specs/true-width-layout.md §3.3): a body shaded with the container's `bg`
+ * spanning exactly its dates, a header bracket over those dates (solid for
+ * a group, dashed for a parallel by default; `bracket:` styles it), the
+ * title at the container's start with any inline-date glyphs beside it,
+ * then the children. A wave-only group draws only its children.
+ *
+ * `depth` is the container's nesting depth inside its lane, 1 for a
+ * top-level container. A nested body takes a lighter tint, and bodies deeper
+ * than `CONTAINER_MAX_FILLED_DEPTH` are outlined instead of filled, so tints
+ * never compound three deep (§8 O4).
+ */
+function renderContainer(
+    c: PositionedGroup | PositionedParallel,
+    depth: number,
+    options: RenderOptions,
+    idPrefix: string,
+    palette: Theme,
+    fonts: FontFamilies,
+): string {
+    const parts: string[] = [];
+    const isDrawn = !(c.kind === 'group' && c.waveOnly);
+    if (isDrawn) {
+        const bodyY = c.box.y + c.headerHeight;
+        const bodyHeight = c.box.height - c.headerHeight;
+        if (c.style.bg !== 'none') {
+            const isFilled = depth <= CONTAINER_MAX_FILLED_DEPTH;
+            parts.push(
+                tag('rect', {
+                    x: num(c.box.x),
+                    y: num(bodyY),
+                    width: num(c.box.width),
+                    height: num(bodyHeight),
+                    fill: isFilled ? c.style.bg : 'none',
+                    'fill-opacity': isFilled
+                        ? depth === 1
+                            ? CONTAINER_BODY_FILL_OPACITY
+                            : CONTAINER_NESTED_BODY_FILL_OPACITY
+                        : null,
+                    stroke: isFilled ? null : c.style.bg,
+                    'stroke-opacity': isFilled ? null : 0.6,
+                    'stroke-width': isFilled ? null : 1,
+                }),
+            );
+        }
+        // The title and the bracket share one ink, the header's: a group's
+        // `fg`, a parallel's bracket stroke. The title sits on the lane band,
+        // never on the body, so a `text:` colour chosen to read on `bg`
+        // (white on a filled chiclet, before the header) would vanish.
+        const ink = c.kind === 'group' ? c.style.fg : palette.parallel.bracketStroke;
+        if (c.headerHeight > 0 && c.style.bracket !== 'none') {
+            const lineY = c.box.y + CONTAINER_BRACKET_LINE_OFFSET_PX;
+            const x0 = c.box.x;
+            const x1 = c.box.x + c.box.width;
+            parts.push(
+                tag('path', {
+                    d: `M${num(x0)} ${num(bodyY)} V${num(lineY)} H${num(x1)} V${num(bodyY)}`,
+                    fill: 'none',
+                    stroke: ink,
+                    'stroke-width': 1.2,
+                    'stroke-dasharray': c.style.bracket === 'dashed' ? '3 2' : null,
+                }),
+            );
+        }
+        if (c.title && c.headerHeight > 0) {
+            parts.push(
+                textTag(
+                    {
+                        // Past the `after:` glyph when there is one; layout
+                        // clamps the `before:` glyph past this text.
+                        x: num(containerHeaderTitleX(c.box.x, hasAfterPin(c.inlineDatePins))),
+                        y: num(c.box.y + CONTAINER_HEADER_TITLE_BASELINE_PX),
+                        ...fontAttrs(c.style, fonts, CONTAINER_HEADER_TITLE_FONT_SIZE_PX),
+                        'font-weight': 600,
+                        fill: ink,
+                    },
+                    c.title,
+                ),
+            );
+        }
+        // The glyphs sit in the header's title row, never on a child, so
+        // painting them before the children is safe.
+        parts.push(renderInlineDatePins(c.inlineDatePins, c.style.fg));
+    }
+    for (const child of c.children) {
+        parts.push(renderTrackChild(child, options, idPrefix, palette, fonts, depth));
+    }
+    return tag('g', { 'data-layer': c.kind, 'data-id': c.id ?? null }, parts.join(''));
+}
+
+function renderTrackChild(
+    c: PositionedTrackChild,
+    options: RenderOptions,
+    idPrefix: string,
+    palette: Theme,
+    fonts: FontFamilies,
+    parentDepth = 0,
+): string {
+    if (c.kind === 'item') return renderItem(c, options, idPrefix, palette, fonts);
+    return renderContainer(c, parentDepth + 1, 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.
+// The frame tab (chiclet at top-left) and item content are emitted later,
+// in renderSwimlaneContent, so they appear on top of the grid.
+// Tri-state lane utilization underline. Painted along the bottom edge of
+// the band when the lane has `capacity:` AND at least one item contributing
+// load AND has not opted out of every color band via `utilization-*-at:none`.
+// Geometry per specs/rendering.md § Lane utilization underline:
+//   - height: 2px (matches the milestone-line stroke weight)
+//   - y: flush with the bottom edge of the band, fully inside it
+//   - x: aligned to the segment boundaries the layout already pre-coalesced
+// One <rect> per coalesced segment; classification → palette token mapping
+// is the only renderer-side decision.
+const LANE_UTILIZATION_HEIGHT_PX = 2;
+
+function utilizationColor(classification: 'green' | 'yellow' | 'red', palette: Theme): string {
+    switch (classification) {
+        case 'green':
+            return palette.swimlane.utilizationOk;
+        case 'yellow':
+            return palette.swimlane.utilizationWarn;
+        case 'red':
+            return palette.swimlane.utilizationOver;
+    }
+}
+
+function renderLaneUtilization(s: PositionedSwimlane, palette: Theme): string {
+    if (!s.utilization || s.utilization.segments.length === 0) return '';
+    const y = s.box.y + s.box.height - LANE_UTILIZATION_HEIGHT_PX;
+    const rects = s.utilization.segments.map((seg) => {
+        const width = seg.endX - seg.startX;
+        if (width <= 0) return '';
+        return tag('rect', {
+            x: num(seg.startX),
+            y: num(y),
+            width: num(width),
+            height: LANE_UTILIZATION_HEIGHT_PX,
+            fill: utilizationColor(seg.classification, palette),
+            'data-utilization': seg.classification,
+            'data-load': num(seg.load),
+        });
+    });
+    return tag(
+        'g',
+        {
+            'data-layer': 'lane-utilization',
+            'data-id': s.id ?? null,
+        },
+        rects.join(''),
+    );
+}
+
+export function renderSwimlaneBg(s: PositionedSwimlane, palette: Theme): string {
+    const tint = s.bandIndex % 2 === 0 ? palette.swimlane.rowTintEven : palette.swimlane.rowTintOdd;
+    const borderColor = palette.swimlane.border;
+    return tag(
+        'g',
+        { 'data-layer': 'swimlane-bg', 'data-id': s.id ?? null },
+        tag('rect', {
+            x: num(s.box.x),
+            y: num(s.box.y),
+            width: num(s.box.width),
+            height: num(s.box.height),
+            fill: tint,
+            stroke: borderColor,
+            'stroke-width': 1,
+        }),
+    );
+}
+
+export function renderSwimlane(
+    s: PositionedSwimlane,
+    options: RenderOptions,
+    idPrefix: string,
+    palette: Theme,
+    fonts: FontFamilies,
+): string {
+    const tabFill = palette.swimlane.tabFill;
+    const tabStroke = palette.swimlane.tabStroke;
+    const tabText = palette.swimlane.tabText;
+    const ownerText = palette.swimlane.ownerText;
+    const footnoteColor = palette.swimlane.footnoteIndicator;
+    const parts: string[] = [];
+    // Frame-tab chiclet at the top-left of the band, auto-sized to fit
+    // title, owner, capacity badge and footnote indicators. Layout sized it
+    // (`PositionedSwimlane.tab`, the same rectangle it reserved for the
+    // row packer) and placed each element inside it; this only draws.
+    const tab = s.tab;
+    if (tab) {
+        const LANE_BADGE_FONT_SIZE_PX = 10;
+        const footnoteIndicatorText =
+            s.footnoteIndicators.length > 0 ? s.footnoteIndicators.join(',') : '';
+        const tabH = FRAME_TAB_HEIGHT_PX;
+        const tabY = s.box.y + 10;
+        const labelY = tabY + FRAME_TAB_LABEL_BASELINE_OFFSET_PX;
+        parts.push(
+            tag('rect', {
+                x: num(tab.tabX),
+                y: num(tabY),
+                width: num(tab.tabW),
+                height: num(tabH),
+                rx: 4,
+                ry: 4,
+                fill: tabFill,
+                stroke: tabStroke,
+                'stroke-width': 1,
+            }),
+        );
+        parts.push(
+            textTag(
+                {
+                    x: num(tab.titleX),
+                    y: num(labelY),
+                    'font-family': fonts[s.style.font],
+                    'font-size': 12,
+                    'font-weight': 600,
+                    fill: tabText,
+                },
+                s.title,
+            ),
+        );
+        if (s.owner) {
+            // A person or people glyph leads the owner name, lifted onto
+            // the text's x-height like the capacity badge's glyph.
+            const glyph = CAPACITY_ICON_SVG[s.ownerKind === 'person' ? 'person' : 'people'];
+            const glyphSize = FRAME_TAB_OWNER_GLYPH_PX;
+            parts.push(
+                `<svg x="${num(tab.ownerX)}" y="${num(labelY - glyphSize * 0.85)}" width="${num(glyphSize)}" height="${num(glyphSize)}" viewBox="${glyph.viewBox}" style="color:${escAttr(ownerText)}" aria-hidden="true">${glyph.body}</svg>`,
+            );
+            parts.push(
+                textTag(
+                    {
+                        x: num(tab.ownerTextX),
+                        y: num(labelY),
+                        'font-family': fonts[s.style.font],
+                        'font-size': 10,
+                        fill: ownerText,
+                    },
+                    s.owner,
+                ),
+            );
+        }
+        if (s.capacity) {
+            // Re-uses the same `renderCapacitySuffix` helper that paints
+            // 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,
+                    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': fonts.sans,
+                        'font-size': LANE_BADGE_FONT_SIZE_PX,
+                        'font-weight': 700,
+                        fill: footnoteColor,
+                        'text-anchor': 'end',
+                    },
+                    footnoteIndicatorText,
+                ),
+            );
+        }
+    }
+    for (const c of s.children) {
+        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
+    // to the band's bottom; under cut-lines / now-line which run as
+    // separate top-level passes.
+    parts.push(renderLaneUtilization(s, palette));
+    return tag('g', { 'data-layer': 'swimlane', 'data-id': s.id ?? null }, parts.join(''));
+}