@meltemi/diagrams-layout 1.9.0 → 1.10.17

package/dist/sequence.js

@@ -2,18 +2,35 @@ import { resolveScenario, } from "@meltemi/diagrams-model";
 import { brandFrame, round2, textItem } from "./frame.js";
 import { cylinderPaths, unionBoxes } from "./geometry.js";
 import { markerItems, relationEnds, shiftMarker } from "./markers.js";
-import { canvasSize, frameMinWidth, } from "./layout.js";
+import { canvasSize, frameMinWidth, tagPill, tagPillWidth, } from "./layout.js";
+import { textFont, writtenStack } from "./measure.js";
 import { markGradient } from "./mark.js";
+import { messages as words } from "./messages/index.js";
 import { strokeDash, } from "./scene.js";
 import { StyleResolver } from "./styles.js";
-import { splitLines } from "./text.js";
+import { splitLines, wrapLines } from "./text.js";
 const BOX_KINDS = new Set(["participant", "database", "collections", "queue"]);
 /** The horizontal radius of a queue's ends. */
 const QUEUE_CAP = 8;
+/** How far the second box of a collections head stands up and to the right of the first. */
+const STACK = 4;
+/** The opacity of a lifeline's stroke: half of `muted`, behind the messages. */
+const LIFELINE_OPACITY = 0.5;
 const BAR = 10;
 const BAR_STEP = 5;
+/** The least room between two heads, whatever a negative `gap` asks. */
+const HEAD_CLEARANCE = 8;
+/** How far two distances of the columns may differ by rounding alone. */
+const ROUNDING = 1e-6;
 const SELF_WIDTH = 34;
 const SELF_HEIGHT = 22;
+/** The room between two pills of a row of tags. */
+const TAG_GAP = 4;
+/** How far a message's row of tags stands from the arrow's start, or from its number's disc. */
+const TAG_START = 6;
+const TAG_START_NUMBERED = 12;
+/** How far a figure's badges stand above it. */
+const BADGE_LIFT = 4;
 /** Lays out a sequence diagram (decision 0019): columns in source order, events top to bottom. */
 export function layoutSequence(input) {
     const { compilation, diagram, options, theme, scale, metrics, diagnostics } = input;
@@ -29,73 +46,188 @@ export function layoutSequence(input) {
     const groups = diagram.elements.filter((e) => e.kind === "group");
     const column = new Map(participants.map((p, i) => [p.id, i]));
     // ---------------------------------------------------------------- measures
-    const labelLine = Math.round(scale.label * 1.5);
-    const boxHeight = Math.round(40 * f);
+    // A head's label is in the theme's label size and weight unless its style writes them; the row
+    // of heads grows to the largest label written (decision 0067).
+    const headText = (p) => sequenceText(styles.element(p), scale.label, scale.labelWeight);
+    const headSizes = participants
+        .map((p) => styles.element(p).fontSize)
+        .filter((size) => size !== undefined && size > scale.label);
+    const largest = Math.max(scale.label, ...headSizes);
+    const labelLine = Math.round(largest * 1.5);
+    const boxHeight = Math.max(Math.round(40 * f), Math.round((40 * largest) / 13));
     const figureHeight = Math.round(34 * f);
     const hasFigures = participants.some((p) => !BOX_KINDS.has(p.kind));
     const headHeight = Math.max(boxHeight, hasFigures ? figureHeight + 6 + labelLine : 0);
-    const labelWidth = (p) => metrics.width(p.label, "body", scale.labelWeight, scale.label);
+    const labelWidth = (p) => {
+        const text = headText(p);
+        return metrics.width(p.label, text.font, text.weight, text.size);
+    };
     const widths = participants.map((p) => BOX_KINDS.has(p.kind)
         ? Math.max(Math.round(96 * f), Math.ceil(labelWidth(p) + 2 * theme.padding)) +
             // A queue's right cap takes room from its body.
             (p.kind === "queue" ? 2 * QUEUE_CAP : 0)
         : Math.max(Math.round(48 * f), Math.ceil(labelWidth(p) + 8)));
-    const messageLabel = (relation) => relation.label === null ? 0 : metrics.width(relation.label, "body", 400, scale.relationLabel);
+    // A message label is in the body font at weight 400 and the relation label size, broken at `\n`.
+    // Between two lifelines it holds its columns apart on one line, and wraps at the room they leave
+    // it when a pull brings them closer; a self-call's stays beside its loop. Its lines are 1.25
+    // times the size apart, as a sticky's are.
+    const messageText = (relation) => labelText(sequenceText(styles.relation(relation), scale.relationLabel, 400));
+    const measureLabel = (relation) => {
+        const text = messageText(relation);
+        return (line) => metrics.width(line, text.font, text.weight, text.size);
+    };
+    /** The widest word of a label, words split at spaces and line breaks: the least room it needs. */
+    const longestWord = (relation) => relation.label === null
+        ? 0
+        : Math.max(0, ...relation.label.split(/[ \n]+/).map(measureLabel(relation)));
+    /** The widest line of a label broken at `\n` only: the room it takes unwrapped. */
+    const lineWidth = (relation) => relation.label === null
+        ? 0
+        : Math.max(0, ...splitLines(relation.label).map(measureLabel(relation)));
     const noteLines = (note) => splitLines(note.text);
     const noteSize = (note) => {
         const lines = noteLines(note);
-        const width = Math.max(...lines.map((line) => metrics.width(line, "body", 400, scale.note)), 24);
-        return { width: Math.ceil(width + 16), height: lines.length * scale.noteLine + 12 };
+        const text = noteText(styles, scale, note);
+        const width = Math.max(...lines.map((line) => metrics.width(line, text.font, text.weight, text.size)), 24);
+        return { width: Math.ceil(width + 16), height: lines.length * text.line + 12 };
     };
     const numbered = diagram.properties.autonumber !== null;
     const discRoom = numbered ? 22 : 0;
+    // Tags are the flow tag's pills, `tagHeight` high, in rows 4 apart: a message's on its arrow
+    // next to its source end, a participant's over its head as badges.
+    const tagHeight = scale.tagHeight;
+    const pillWidths = (tags) => tags.map((tag) => tagPillWidth(metrics, scale, tag.text));
+    /** The width of a row of pills, nothing when there are no tags. */
+    const rowWidth = (tags) => {
+        const pills = pillWidths(tags);
+        return pills.length === 0
+            ? 0
+            : pills.reduce((sum, w) => sum + w, 0) + (pills.length - 1) * TAG_GAP;
+    };
+    /** Boxes of a row of pills from `x`, centred on `y`. */
+    const pillRow = (tags, x, y) => {
+        let left = x;
+        return pillWidths(tags).map((width) => {
+            const box = { x: left, y: y - tagHeight / 2, width, height: tagHeight };
+            left += width + TAG_GAP;
+            return box;
+        });
+    };
+    /** The length of the head a message draws at its source end: two-way messages draw one. */
+    const startHeadRoom = (relation) => messageHeads(relation, styles.relation(relation)).start !== "none" ? theme.arrowSize : 0;
+    // A message's row starts 6 from its arrow's start, 12 beside its number's disc, and past the
+    // head a two-way message draws there.
+    const tagStart = (relation) => (numbered ? TAG_START_NUMBERED : TAG_START) + startHeadRoom(relation);
+    /** The loop of a self-call: wide enough for its row of tags on its top segment. */
+    const loopWidth = (relation) => relation.tags.length === 0
+        ? SELF_WIDTH
+        : Math.max(SELF_WIDTH, tagStart(relation) + rowWidth(relation.tags) + TAG_START);
+    // A head counts as the wider of itself and its badges where heads may not touch.
+    const extents = participants.map((p, i) => Math.max(widths[i], rowWidth(p.tags)));
+    // The badges stand over the heads: the row of heads starts lower by the room they need above
+    // it, a box kind's with their middle on its box's top edge, a figure's 4 above the figure.
+    const boxTop = headHeight - boxHeight;
+    const figureTop = headHeight - figureHeight - 6 - labelLine;
+    /** The room a head's badges need above its cell: none without tags. */
+    const badgeNeed = (p) => p.tags.length === 0
+        ? 0
+        : Math.max(0, BOX_KINDS.has(p.kind) ? tagHeight / 2 - boxTop : tagHeight + BADGE_LIFT - figureTop);
+    const badgeRoom = Math.max(0, ...participants.map(badgeNeed));
+    // `space` above (before) or below (after) an event; `gap` left (before) or right (after) of a
+    // participant, both sides of a pair adding up.
     const spaces = new Map();
-    const gaps = new Map();
+    const spacesAfter = new Map();
+    const gapsBefore = new Map();
+    const gapsAfter = new Map();
     const labelEntries = new Map();
     for (const entry of diagram.placement) {
-        if (entry.statement === "space")
-            spaces.set(entry.target, entry.amount);
-        else if (entry.statement === "gap")
-            gaps.set(entry.target, entry.amount);
+        if (entry.statement === "space") {
+            (entry.side === "after" ? spacesAfter : spaces).set(entry.target, entry.amount);
+        }
+        else if (entry.statement === "gap") {
+            (entry.side === "after" ? gapsAfter : gapsBefore).set(entry.target, entry);
+        }
         else if (entry.statement === "label")
             labelEntries.set(entry.target, entry);
     }
+    const gapBefore = (id) => gapsBefore.get(id)?.amount ?? 0;
+    const gapAfter = (id) => gapsAfter.get(id)?.amount ?? 0;
     const baseKey = (key) => key.replace(/@\d+$/, "").replace(/@\d+$/, "");
     // ---------------------------------------------------------------- columns
-    const xs = [];
-    participants.forEach((p, i) => {
-        xs[i] =
-            i === 0
-                ? widths[0] / 2
-                : xs[i - 1] +
-                    widths[i - 1] / 2 +
-                    widths[i] / 2 +
-                    Math.round(40 * f) +
-                    (gaps.get(p.id) ?? 0);
-    });
-    const constraints = [];
+    // Two passes (decision 0065, D1-D2). The natural columns come first: half of each head, the
+    // `spacing` (40 scaled with the theme's labels when none is written, and never less there) and
+    // the two `gap`s of a pair when their sum is positive, pushed apart by every message label on
+    // one line, the rows of tags, self-calls and side notes. A pull then brings a pair closer than
+    // its natural distance by its amount: a negative sum of its two `gap`s, and a `spacing` below
+    // the default by the difference. It stops at the pair's floor: the two half heads (or their rows
+    // of badges, when wider) and HEAD_CLEARANCE, so heads never touch, and the longest word of every
+    // label between them, which wraps at the room it is left.
+    const defaultSpacing = Math.round(40 * f);
+    const spacing = diagram.properties.spacing ?? defaultSpacing;
+    const base = Math.max(spacing, defaultSpacing);
+    const spacingPull = Math.min(0, spacing - defaultSpacing);
+    const halves = (i) => widths[i - 1] / 2 + widths[i] / 2;
+    const floor = (i) => extents[i - 1] / 2 + extents[i] / 2 + HEAD_CLEARANCE;
+    const gapSum = (i) => gapAfter(participants[i - 1].id) + gapBefore(participants[i].id);
+    /** A pair's written distance before the labels push it: positive gaps only. */
+    const written = (i) => halves(i) + base + Math.max(0, gapSum(i));
+    /** How much closer than its natural distance a pair is asked to be: 0 or less. */
+    const pull = (i) => Math.min(0, gapSum(i)) + spacingPull;
+    // Room left of the first participant, and right of the last, never less than nothing.
+    const outerBefore = participants.length > 0 ? Math.max(0, gapBefore(participants[0].id)) : 0;
+    const outerAfter = participants.length > 0 ? Math.max(0, gapAfter(participants[participants.length - 1].id)) : 0;
+    // What holds the natural columns apart (each label on one line), and what holds the pulled ones
+    // (each label's longest word); self-calls, notes and rows of tags hold both.
+    const natural = [];
+    const floors = [];
+    const both = (constraint) => {
+        natural.push(constraint);
+        floors.push(constraint);
+    };
     let leftExtra = 0;
     let rightExtra = 0;
+    /**
+     * What a creating message (the message right after the `create` of its receiver) leaves out of
+     * the distance between the columns: its arrow ends on the near edge of the head it draws, half
+     * that head short of the receiver's column. Nothing for any other message.
+     */
+    const madeHead = (relation, before) => before?.kind === "create" && before.participant === relation.to && relation.from !== relation.to
+        ? widths[column.get(relation.to)] / 2
+        : 0;
     const walk = (list) => {
-        for (const event of list) {
+        for (const [index, event] of list.entries()) {
             if (event.kind === "message") {
                 const relation = diagram.relationsByKey.get(event.relation);
                 if (!relation)
                     continue;
                 const a = column.get(relation.from);
                 const b = column.get(relation.to);
-                const room = messageLabel(relation) + discRoom;
                 if (a === b) {
-                    const length = SELF_WIDTH + room + 16;
+                    const length = loopWidth(relation) + lineWidth(relation) + discRoom + 16;
                     if (a < participants.length - 1) {
-                        constraints.push({ a, b: a + 1, length: length + widths[a + 1] / 2 });
+                        both({ a, b: a + 1, length: length + widths[a + 1] / 2 });
                     }
                     else
                         rightExtra = Math.max(rightExtra, length);
                 }
                 else {
-                    constraints.push({ a: Math.min(a, b), b: Math.max(a, b), length: room + 24 });
+                    // The label on one line holds the natural pair apart, its longest word a pulled one;
+                    // the row of its tags holds both, with the disc and the arrowhead beside it. Each counts
+                    // along the arrow, which a creating message ends on the head it draws.
+                    const made = madeHead(relation, list[index - 1]);
+                    const row = rowWidth(relation.tags);
+                    const tagged = row > 0 ? row + 24 + discRoom + theme.arrowSize + startHeadRoom(relation) + made : 0;
+                    const pair = { a: Math.min(a, b), b: Math.max(a, b) };
+                    natural.push({
+                        ...pair,
+                        length: Math.max(lineWidth(relation) + discRoom + 24 + made, tagged),
+                    });
+                    floors.push({
+                        ...pair,
+                        length: Math.max(longestWord(relation) + 24 + discRoom + made, tagged),
+                    });
                 }
+                walk(event.events);
             }
             else if (event.kind === "note") {
                 const size = noteSize(event);
@@ -104,26 +236,26 @@ export function layoutSequence(input) {
                 const j = indices[indices.length - 1];
                 if (event.position === "over" && i === j) {
                     if (i > 0)
-                        constraints.push({ a: i - 1, b: i, length: size.width / 2 + widths[i - 1] / 2 + 10 });
+                        both({ a: i - 1, b: i, length: size.width / 2 + widths[i - 1] / 2 + 10 });
                     else
                         leftExtra = Math.max(leftExtra, size.width / 2 - widths[i] / 2);
                     if (i < participants.length - 1) {
-                        constraints.push({ a: i, b: i + 1, length: size.width / 2 + widths[i + 1] / 2 + 10 });
+                        both({ a: i, b: i + 1, length: size.width / 2 + widths[i + 1] / 2 + 10 });
                     }
                     else
                         rightExtra = Math.max(rightExtra, size.width / 2 - widths[i] / 2);
                 }
                 else if (event.position === "over") {
-                    constraints.push({ a: i, b: j, length: size.width - 48 });
+                    both({ a: i, b: j, length: size.width - 48 });
                 }
                 else if (event.position === "left") {
                     if (i > 0)
-                        constraints.push({ a: i - 1, b: i, length: size.width + 20 + widths[i - 1] / 2 });
+                        both({ a: i - 1, b: i, length: size.width + 20 + widths[i - 1] / 2 });
                     else
                         leftExtra = Math.max(leftExtra, size.width + 20 - widths[i] / 2);
                 }
                 else if (i < participants.length - 1) {
-                    constraints.push({ a: i, b: i + 1, length: size.width + 20 + widths[i + 1] / 2 });
+                    both({ a: i, b: i + 1, length: size.width + 20 + widths[i + 1] / 2 });
                 }
                 else
                     rightExtra = Math.max(rightExtra, size.width + 20 - widths[i] / 2);
@@ -135,30 +267,92 @@ export function layoutSequence(input) {
         }
     };
     walk(events);
-    constraints.sort((p, q) => p.b - q.b || p.a - q.a);
-    for (const { a, b, length } of constraints) {
-        const deficit = length - (xs[b] - xs[a]);
-        if (deficit > 0)
-            for (let k = b; k < xs.length; k++)
-                xs[k] = xs[k] + deficit;
+    /**
+     * Pushes the right column of every constraint, and everything after it, as far as it needs
+     * beyond `slack`.
+     */
+    const push = (xs, constraints, slack) => {
+        constraints.sort((p, q) => p.b - q.b || p.a - q.a);
+        for (const { a, b, length } of constraints) {
+            const deficit = length - (xs[b] - xs[a]);
+            if (deficit > slack)
+                for (let k = b; k < xs.length; k++)
+                    xs[k] = xs[k] + deficit;
+        }
+    };
+    const naturalXs = [];
+    participants.forEach((_p, i) => {
+        naturalXs[i] =
+            i === 0 ? widths[0] / 2 + outerBefore : naturalXs[i - 1] + Math.max(written(i), floor(i));
+    });
+    push(naturalXs, natural, 0);
+    /** The natural distance of the pair left of column `i`. */
+    const naturalDistance = (i) => naturalXs[i] - naturalXs[i - 1];
+    // The pulled columns: each pair closer by its pull, down to its heads' floor, then pushed by
+    // the longest words, the rows of tags, self-calls and notes. A pair without a pull keeps its
+    // natural distance exactly.
+    const xs = [];
+    let shift = 0;
+    participants.forEach((_p, i) => {
+        if (i > 0 && pull(i) < 0)
+            shift += Math.max(pull(i), floor(i) - naturalDistance(i));
+        xs[i] = naturalXs[i] + shift;
+    });
+    // The natural columns already hold every floor: rounding is no deficit.
+    push(xs, floors, ROUNDING);
+    /** Whether a pull brings any pair between columns `a` and `b` closer: their labels wrap. */
+    const pulled = (a, b) => {
+        for (let i = Math.min(a, b) + 1; i <= Math.max(a, b); i++)
+            if (pull(i) < 0)
+                return true;
+        return false;
+    };
+    // A negative gap that the floor kept from being drawn, measured from the natural distance, is
+    // said on the statement (the `before` one when both sides are written).
+    for (let i = 1; i < participants.length; i++) {
+        const after = gapsAfter.get(participants[i - 1].id);
+        const before = gapsBefore.get(participants[i].id);
+        const sum = (after?.amount ?? 0) + (before?.amount ?? 0);
+        const distance = xs[i] - xs[i - 1];
+        if (sum >= 0 || distance <= naturalDistance(i) + pull(i) + ROUNDING)
+            continue;
+        const entry = before ?? after;
+        const other = entry === before ? (after?.amount ?? 0) : (before?.amount ?? 0);
+        // `+ 0` writes a drawn 0 as 0, never -0.
+        const applied = Math.round(distance - naturalDistance(i) - other - spacingPull) + 0;
+        diagnostics.push({
+            code: "layout.gap-floor",
+            severity: "warning",
+            message: words().diagnostics.gapFloor(entry.target, entry.side, entry.amount, applied, participants[i - 1].id, participants[i].id),
+            range: entry.range,
+            data: {
+                gap: { participant: entry.target, side: entry.side, written: entry.amount, applied },
+            },
+        });
     }
     // ---------------------------------------------------------------- rows
-    const groupTitle = groups.length > 0 ? labelLine + 12 : 0;
+    // The groups' titles share a band as tall as the largest title written, the head's line at least.
+    const groupTitle = groups.length > 0
+        ? Math.max(labelLine, ...groups.map((g) => Math.round((styles.element(g).fontSize ?? 0) * 1.5))) + 12
+        : 0;
     const rowGap = Math.round(14 * f);
-    const labelHeight = scale.relationLabelHeight;
-    let y = groupTitle + headHeight + Math.round(24 * f);
+    // The heads' row, below the groups' titles and the room of the badges over the heads.
+    const headTop = groupTitle + badgeRoom;
+    let y = headTop + headHeight + Math.round(24 * f);
     const lifelines = new Map();
     for (const p of participants) {
         lifelines.set(p.id, {
             participant: p.id,
             x: xs[column.get(p.id)],
-            top: groupTitle + headHeight,
+            top: headTop + headHeight,
             bottom: null,
         });
     }
     const created = new Map();
     const heads = new Map();
     const messages = [];
+    const messageTexts = new Map();
+    const tags = new Map();
     const notes = [];
     const frames = [];
     const dividers = [];
@@ -187,226 +381,328 @@ export function layoutSequence(input) {
         const width = widths[i];
         return { x: xs[i] - width / 2, y: top, width, height: headHeight };
     };
+    /**
+     * The box a head is drawn in, within its row's cell: a box kind's box at the bottom of the cell
+     * (a collections head with its second box), a figure's whole cell. Editors select, halos pulse
+     * and highlights frame this box.
+     */
+    const drawnHead = (p, cell) => {
+        if (!BOX_KINDS.has(p.kind))
+            return cell;
+        const box = {
+            x: cell.x,
+            y: cell.y + cell.height - boxHeight,
+            width: cell.width,
+            height: boxHeight,
+        };
+        return p.kind === "collections"
+            ? { x: box.x, y: box.y - STACK, width: box.width + STACK, height: box.height + STACK }
+            : box;
+    };
     const process = (list) => {
         for (const [index, event] of list.entries()) {
             y += spaces.get(baseKey(event.key)) ?? 0;
             const start = y;
-            switch (event.kind) {
-                case "message": {
-                    const relation = diagram.relationsByKey.get(event.relation);
-                    if (!relation)
-                        break;
-                    const a = relation.from;
-                    const b = relation.to;
-                    number += numbered ? 1 : 0;
-                    const text = relation.label ?? "";
-                    const textWidth = messageLabel(relation);
-                    let points;
-                    let arrowY;
-                    if (a === b) {
-                        const top = y + labelHeight;
-                        const x0 = edge(a, 1);
-                        points = [
-                            { x: x0, y: top },
-                            { x: x0 + SELF_WIDTH, y: top },
-                            { x: x0 + SELF_WIDTH, y: top + SELF_HEIGHT },
-                            { x: x0, y: top + SELF_HEIGHT },
-                        ];
-                        arrowY = top;
-                        y = top + SELF_HEIGHT + rowGap;
-                    }
-                    else {
-                        const createdHead = created.get(b);
-                        const dir = xs[column.get(b)] > xs[column.get(a)] ? 1 : -1;
-                        if (createdHead !== undefined && createdHead < 0) {
-                            // The creating message ends on the new head, drawn at this row.
-                            const top = y + 4;
-                            const head = headBoxAt(diagram.elementsById.get(b), top);
-                            heads.set(b, head);
-                            created.set(b, top);
-                            lifelines.get(b).top = top + headHeight;
-                            arrowY = top + headHeight - boxHeight / 2;
-                            const x1 = edge(a, dir);
-                            const x2 = dir > 0 ? head.x : head.x + head.width;
+            // `space … after` is room below the event's row, which the row itself does not hold.
+            try {
+                switch (event.kind) {
+                    case "message": {
+                        const relation = diagram.relationsByKey.get(event.relation);
+                        if (!relation)
+                            break;
+                        const a = relation.from;
+                        const b = relation.to;
+                        number += numbered ? 1 : 0;
+                        const text = relation.label ?? "";
+                        const self = a === b;
+                        // The room of a label between two lifelines: the length of its arrow (the distance
+                        // between them, less half the head a creating message ends on), less 12 on each side
+                        // and the disc. At the natural distance it holds the label on one line; a pull may
+                        // leave it less, down to the longest word, and the label wraps there.
+                        const made = self ? 0 : madeHead(relation, list[index - 1]);
+                        const room = self
+                            ? 0
+                            : Math.max(1, Math.abs(xs[column.get(b)] - xs[column.get(a)]) - made - 24 - discRoom);
+                        const wraps = !self && pulled(column.get(a), column.get(b));
+                        const written = messageText(relation);
+                        const measure = measureLabel(relation);
+                        const labelHeight = written.height;
+                        const labelStep = written.step;
+                        const lines = text === ""
+                            ? []
+                            : self || lineWidth(relation) <= room + ROUNDING
+                                ? splitLines(text)
+                                : wrapLines(text, room, measure);
+                        // The block of lines: one label line high, and a step more for each line after it.
+                        const block = labelHeight + Math.max(0, lines.length - 1) * labelStep;
+                        // A message's tags sit on its arrow: its label stands higher by half a pill and 2, and
+                        // its row is that much taller, so that a wrapped label never meets them.
+                        const lift = relation.tags.length > 0 && !self ? tagHeight / 2 + 2 : 0;
+                        const loop = self ? loopWidth(relation) : SELF_WIDTH;
+                        let points;
+                        let arrowY;
+                        if (self) {
+                            // The lines are centred on the loop's middle: the row grows when they are taller.
+                            const over = Math.max(0, (block - SELF_HEIGHT) / 2);
+                            const top = y + Math.max(labelHeight, over + 3);
+                            const x0 = edge(a, 1);
                             points = [
-                                { x: x1, y: arrowY },
-                                { x: x2, y: arrowY },
+                                { x: x0, y: top },
+                                { x: x0 + loop, y: top },
+                                { x: x0 + loop, y: top + SELF_HEIGHT },
+                                { x: x0, y: top + SELF_HEIGHT },
                             ];
-                            y = top + headHeight + rowGap;
+                            arrowY = top;
+                            y = top + SELF_HEIGHT + over + rowGap;
                         }
                         else {
-                            arrowY = y + labelHeight + 4;
-                            points = [
-                                { x: edge(a, dir), y: arrowY },
-                                { x: edge(b, dir === 1 ? -1 : 1), y: arrowY },
-                            ];
-                            y = arrowY + rowGap;
+                            const createdHead = created.get(b);
+                            const dir = xs[column.get(b)] > xs[column.get(a)] ? 1 : -1;
+                            if (createdHead !== undefined && createdHead < 0) {
+                                // The creating message ends on the new head, drawn at this row, lower by the
+                                // label's lines after the first, the lift of its tags and the room of the head's
+                                // own badges.
+                                const element = diagram.elementsById.get(b);
+                                const top = y + 4 + (block - labelHeight) + lift + badgeNeed(element);
+                                const head = headBoxAt(element, top);
+                                heads.set(b, head);
+                                created.set(b, top);
+                                lifelines.get(b).top = top + headHeight;
+                                arrowY = top + headHeight - boxHeight / 2;
+                                const x1 = edge(a, dir);
+                                const x2 = dir > 0 ? head.x : head.x + head.width;
+                                points = [
+                                    { x: x1, y: arrowY },
+                                    { x: x2, y: arrowY },
+                                ];
+                                y = top + headHeight + rowGap;
+                            }
+                            else {
+                                // The arrow under the label's last line: the label keeps its top.
+                                arrowY = y + block + 4 + lift;
+                                points = [
+                                    { x: edge(a, dir), y: arrowY },
+                                    { x: edge(b, dir === 1 ? -1 : 1), y: arrowY },
+                                ];
+                                y = arrowY + rowGap;
+                            }
                         }
-                    }
-                    let label;
-                    if (text !== "" || numbered) {
+                        // The block sits as a one-line label does: its bottom just above the arrow, centred at
+                        // `at` along it, or beside a self-call's loop. `label … offset` moves the block, not
+                        // the room it wraps in.
                         const entry = relation.id ? labelEntries.get(relation.id) : undefined;
                         const first = points[0];
                         const lastPoint = points[points.length - 1];
                         const at = entry ? entry.at / 100 : 0.5;
                         const offset = entry?.offset ?? { x: 0, y: 0 };
-                        const width = Math.max(textWidth + 8, 8);
-                        const anchor = a === b
-                            ? { x: first.x + SELF_WIDTH + 8 + width / 2, y: first.y + SELF_HEIGHT / 2 }
-                            : { x: first.x + (lastPoint.x - first.x) * at, y: arrowY - labelHeight / 2 - 1 };
-                        label = {
-                            box: {
-                                x: anchor.x - width / 2 + offset.x,
-                                y: anchor.y - labelHeight / 2 + offset.y,
-                                width,
-                                height: labelHeight,
-                            },
-                            text,
+                        const width = Math.max(Math.max(0, ...lines.map(measure)) + 8, 8);
+                        const anchor = self
+                            ? { x: first.x + loop + 8 + width / 2, y: first.y + SELF_HEIGHT / 2 }
+                            : { x: first.x + (lastPoint.x - first.x) * at, y: arrowY - block / 2 - 1 - lift };
+                        const box = {
+                            x: anchor.x - width / 2 + offset.x,
+                            y: anchor.y - block / 2 + offset.y,
+                            width,
+                            height: block,
                         };
+                        const label = text !== "" || numbered ? { box, lines, line: labelStep, text: written } : undefined;
+                        messageTexts.set(event.key, {
+                            area: self
+                                ? box
+                                : { x: box.x + box.width / 2 - room / 2, y: box.y, width: room, height: block },
+                            lines,
+                            size: written.size,
+                            line: labelStep,
+                            wraps,
+                            weight: written.weight,
+                            ...(writtenStack(written.font) !== undefined
+                                ? { font: writtenStack(written.font) }
+                                : {}),
+                        });
+                        // The row of tags on the arrow, its end nearest the source `tagStart` from the
+                        // arrow's start: rightwards from it, or leftwards on a message from right to left.
+                        const row = rowWidth(relation.tags);
+                        const toRight = self || lastPoint.x >= first.x;
+                        const pills = pillRow(relation.tags, toRight ? first.x + tagStart(relation) : first.x - tagStart(relation) - row, first.y);
+                        if (pills.length > 0)
+                            tags.set(event.key, pills);
+                        messages.push({
+                            key: event.key,
+                            relation,
+                            points,
+                            self,
+                            label,
+                            number: numbered ? number : null,
+                            tags: pills,
+                        });
+                        const xsOf = [...points.map((p) => p.x), ...pills.flatMap((b) => [b.x, b.x + b.width])];
+                        extend(Math.min(...xsOf) - 8, Math.max(...xsOf, label ? label.box.x + label.box.width : -Infinity) + 8);
+                        last = { participants: new Set([a, b]), y: a === b ? points[3].y : arrowY };
+                        rows.set(event.key, { y: start, height: y - start });
+                        if (event.events.length > 0) {
+                            // The receiver is active for the call's block: a bar from the arrow to the block's
+                            // last event, which moves the ends of the nested messages to its edge.
+                            const stack = stacks.get(b) ?? [];
+                            const top = last.y;
+                            const bar = {
+                                key: event.key,
+                                participant: b,
+                                depth: stack.length,
+                                top,
+                                bottom: top,
+                                to: null,
+                                block: true,
+                            };
+                            stack.push(bar);
+                            stacks.set(b, stack);
+                            bars.push(bar);
+                            process(event.events);
+                            (stacks.get(b) ?? []).pop();
+                            const bottom = last && last.participants.has(b) ? last.y : y;
+                            bar.bottom = Math.max(bottom, bar.top + 12);
+                        }
+                        continue;
                     }
-                    messages.push({
-                        key: event.key,
-                        relation,
-                        points,
-                        self: a === b,
-                        label,
-                        number: numbered ? number : null,
-                    });
-                    const xsOf = points.map((p) => p.x);
-                    extend(Math.min(...xsOf) - 8, Math.max(...xsOf, label ? label.box.x + label.box.width : -Infinity) + 8);
-                    last = { participants: new Set([a, b]), y: a === b ? points[3].y : arrowY };
-                    rows.set(event.key, { y: start, height: y - start });
-                    continue;
-                }
-                case "activate": {
-                    const top = last && last.participants.has(event.participant) ? last.y : y;
-                    const stack = stacks.get(event.participant) ?? [];
-                    const bar = {
-                        participant: event.participant,
-                        depth: stack.length,
-                        top,
-                        bottom: top,
-                    };
-                    stack.push(bar);
-                    stacks.set(event.participant, stack);
-                    bars.push(bar);
-                    rows.set(event.key, { y: top, height: 0 });
-                    continue;
-                }
-                case "deactivate": {
-                    const stack = stacks.get(event.participant) ?? [];
-                    const bar = stack.pop();
-                    const bottom = last && last.participants.has(event.participant) ? last.y : y;
-                    if (bar)
-                        bar.bottom = Math.max(bottom, bar.top + 12);
-                    rows.set(event.key, { y: bottom, height: 0 });
-                    continue;
-                }
-                case "create": {
-                    const next = list[index + 1];
-                    const relation = next?.kind === "message" ? diagram.relationsByKey.get(next.relation) : undefined;
-                    if (relation && relation.to === event.participant && relation.from !== relation.to) {
-                        created.set(event.participant, -1); // drawn by the next message
+                    case "activate": {
+                        const top = last && last.participants.has(event.participant) ? last.y : y;
+                        const stack = stacks.get(event.participant) ?? [];
+                        const bar = {
+                            key: event.key,
+                            participant: event.participant,
+                            depth: stack.length,
+                            top,
+                            bottom: top,
+                            to: null,
+                            block: false,
+                        };
+                        stack.push(bar);
+                        stacks.set(event.participant, stack);
+                        bars.push(bar);
+                        rows.set(event.key, { y: top, height: 0 });
+                        continue;
                     }
-                    else {
-                        const top = y + 4;
-                        heads.set(event.participant, headBoxAt(diagram.elementsById.get(event.participant), top));
-                        created.set(event.participant, top);
-                        lifelines.get(event.participant).top = top + headHeight;
-                        y = top + headHeight + rowGap;
+                    case "deactivate": {
+                        const stack = stacks.get(event.participant) ?? [];
+                        const bar = stack.pop();
+                        const bottom = last && last.participants.has(event.participant) ? last.y : y;
+                        if (bar) {
+                            bar.bottom = Math.max(bottom, bar.top + 12);
+                            bar.to = event.key;
+                        }
+                        rows.set(event.key, { y: bottom, height: 0 });
+                        continue;
                     }
-                    rows.set(event.key, { y: start, height: y - start });
-                    continue;
-                }
-                case "destroy": {
-                    const x = xs[column.get(event.participant)];
-                    const at = y + 8;
-                    crosses.push({ key: event.key, x, y: at });
-                    lifelines.get(event.participant).bottom = at;
-                    for (const bar of stacks.get(event.participant) ?? [])
-                        bar.bottom = Math.max(at, bar.top + 12);
-                    stacks.set(event.participant, []);
-                    y = at + rowGap + 4;
-                    rows.set(event.key, { y: start, height: y - start });
-                    last = undefined;
-                    continue;
-                }
-                case "note": {
-                    const size = noteSize(event);
-                    const indices = event.participants.map((p) => column.get(p)).sort((p, q) => p - q);
-                    const i = indices[0];
-                    const j = indices[indices.length - 1];
-                    const top = y + 4;
-                    let x;
-                    let width = size.width;
-                    if (event.position === "over") {
-                        const left = xs[i] - (i === j ? 0 : 24);
-                        const right = xs[j] + (i === j ? 0 : 24);
-                        width = Math.max(size.width, right - left);
-                        x = (left + right) / 2 - width / 2;
+                    case "create": {
+                        const next = list[index + 1];
+                        const relation = next?.kind === "message" ? diagram.relationsByKey.get(next.relation) : undefined;
+                        if (relation && relation.to === event.participant && relation.from !== relation.to) {
+                            created.set(event.participant, -1); // drawn by the next message
+                        }
+                        else {
+                            // A created head takes the room of its badges above it, as the heads' row does.
+                            const element = diagram.elementsById.get(event.participant);
+                            const top = y + 4 + badgeNeed(element);
+                            heads.set(event.participant, headBoxAt(element, top));
+                            created.set(event.participant, top);
+                            lifelines.get(event.participant).top = top + headHeight;
+                            y = top + headHeight + rowGap;
+                        }
+                        rows.set(event.key, { y: start, height: y - start });
+                        continue;
                     }
-                    else if (event.position === "left") {
-                        x = xs[i] - 10 - width;
+                    case "destroy": {
+                        const x = xs[column.get(event.participant)];
+                        const at = y + 8;
+                        crosses.push({ key: event.key, x, y: at });
+                        lifelines.get(event.participant).bottom = at;
+                        for (const bar of stacks.get(event.participant) ?? [])
+                            bar.bottom = Math.max(at, bar.top + 12);
+                        stacks.set(event.participant, []);
+                        y = at + rowGap + 4;
+                        rows.set(event.key, { y: start, height: y - start });
+                        last = undefined;
+                        continue;
                     }
-                    else {
-                        x = xs[i] + 10;
+                    case "note": {
+                        const size = noteSize(event);
+                        const indices = event.participants.map((p) => column.get(p)).sort((p, q) => p - q);
+                        const i = indices[0];
+                        const j = indices[indices.length - 1];
+                        const top = y + 4;
+                        let x;
+                        let width = size.width;
+                        if (event.position === "over") {
+                            const left = xs[i] - (i === j ? 0 : 24);
+                            const right = xs[j] + (i === j ? 0 : 24);
+                            width = Math.max(size.width, right - left);
+                            x = (left + right) / 2 - width / 2;
+                        }
+                        else if (event.position === "left") {
+                            x = xs[i] - 10 - width;
+                        }
+                        else {
+                            x = xs[i] + 10;
+                        }
+                        const box = { x, y: top, width, height: size.height };
+                        notes.push({ key: event.key, event, box });
+                        extend(box.x - 8, box.x + box.width + 8);
+                        y = top + size.height + rowGap;
+                        rows.set(event.key, { y: start, height: y - start });
+                        last = undefined;
+                        continue;
                     }
-                    const box = { x, y: top, width, height: size.height };
-                    notes.push({ key: event.key, event, box });
-                    extend(box.x - 8, box.x + box.width + 8);
-                    y = top + size.height + rowGap;
-                    rows.set(event.key, { y: start, height: y - start });
-                    last = undefined;
-                    continue;
-                }
-                case "fragment": {
-                    const top = y + 4;
-                    const headerHeight = Math.round(22 * f);
-                    const frame = { minX: Infinity, maxX: -Infinity };
-                    open.push(frame);
-                    const separators = [];
-                    y = top + headerHeight + 6;
-                    for (const [b, branch] of event.branches.entries()) {
-                        if (b > 0) {
-                            const sep = y + 2;
-                            separators.push({ y: sep, condition: branch.condition });
-                            y = sep + Math.round(20 * f);
+                    case "fragment": {
+                        const top = y + 4;
+                        const headerHeight = Math.round(22 * f);
+                        const frame = { minX: Infinity, maxX: -Infinity };
+                        open.push(frame);
+                        const separators = [];
+                        y = top + headerHeight + 6;
+                        for (const [b, branch] of event.branches.entries()) {
+                            if (b > 0) {
+                                const sep = y + 2;
+                                separators.push({ y: sep, condition: branch.condition });
+                                y = sep + Math.round(20 * f);
+                            }
+                            last = undefined;
+                            process(branch.events);
                         }
+                        open.pop();
+                        const bottom = y + 4;
+                        const headerText = fragmentHeader(event, metrics, scale, styles);
+                        if (!Number.isFinite(frame.minX)) {
+                            frame.minX = xs[0] - 24;
+                            frame.maxX = xs[xs.length - 1] + 24;
+                        }
+                        const minX = frame.minX - 16;
+                        const maxX = Math.max(frame.maxX + 16, minX + headerText + 24);
+                        const box = { x: minX, y: top, width: maxX - minX, height: bottom - top };
+                        frames.push({ key: event.key, event, box, headerHeight, separators });
+                        extend(box.x - 8, box.x + box.width + 8);
+                        y = bottom + rowGap;
+                        rows.set(event.key, { y: start, height: y - start });
                         last = undefined;
-                        process(branch.events);
+                        continue;
                     }
-                    open.pop();
-                    const bottom = y + 4;
-                    const headerText = fragmentHeader(event, metrics, scale);
-                    if (!Number.isFinite(frame.minX)) {
-                        frame.minX = xs[0] - 24;
-                        frame.maxX = xs[xs.length - 1] + 24;
+                    case "divider": {
+                        dividers.push({ key: event.key, y: y + 12, label: event.label });
+                        y += 24 + rowGap;
+                        rows.set(event.key, { y: start, height: y - start });
+                        last = undefined;
+                        continue;
+                    }
+                    case "delay": {
+                        delays.push({ key: event.key, y: y + 14, label: event.label });
+                        y += 28 + rowGap;
+                        rows.set(event.key, { y: start, height: y - start });
+                        last = undefined;
+                        continue;
                     }
-                    const minX = frame.minX - 16;
-                    const maxX = Math.max(frame.maxX + 16, minX + headerText + 24);
-                    const box = { x: minX, y: top, width: maxX - minX, height: bottom - top };
-                    frames.push({ key: event.key, event, box, headerHeight, separators });
-                    extend(box.x - 8, box.x + box.width + 8);
-                    y = bottom + rowGap;
-                    rows.set(event.key, { y: start, height: y - start });
-                    last = undefined;
-                    continue;
-                }
-                case "divider": {
-                    dividers.push({ key: event.key, y: y + 12, label: event.label });
-                    y += 24 + rowGap;
-                    rows.set(event.key, { y: start, height: y - start });
-                    last = undefined;
-                    continue;
-                }
-                case "delay": {
-                    delays.push({ key: event.key, y: y + 14, label: event.label });
-                    y += 28 + rowGap;
-                    rows.set(event.key, { y: start, height: y - start });
-                    last = undefined;
-                    continue;
                 }
             }
+            finally {
+                y += spacesAfter.get(baseKey(event.key)) ?? 0;
+            }
         }
     };
     process(events);
@@ -419,15 +715,35 @@ export function layoutSequence(input) {
             bar.bottom = Math.max(bar.bottom, end);
     for (const p of participants) {
         if (!heads.has(p.id))
-            heads.set(p.id, headBoxAt(p, groupTitle));
+            heads.set(p.id, headBoxAt(p, headTop));
         const line = lifelines.get(p.id);
         if (line.bottom === null)
             line.bottom = end;
     }
+    // A participant's badges: a row centred on its head, a box kind's with their middle on the top
+    // edge of its (front) box, a figure's 4 above the figure.
+    const badges = new Map();
+    for (const p of participants) {
+        if (p.tags.length === 0)
+            continue;
+        const cell = heads.get(p.id);
+        const middle = BOX_KINDS.has(p.kind)
+            ? cell.y + boxTop
+            : cell.y + figureTop - BADGE_LIFT - tagHeight / 2;
+        badges.set(p.id, pillRow(p.tags, cell.x + cell.width / 2 - rowWidth(p.tags) / 2, middle));
+    }
+    /** A bar's rectangle on its lifeline, nested bars stepping right. */
+    const barBox = (bar) => ({
+        x: xs[column.get(bar.participant)] - BAR / 2 + bar.depth * BAR_STEP,
+        y: bar.top,
+        width: BAR,
+        height: bar.bottom - bar.top,
+    });
     const groupBoxes = new Map();
     for (const group of groups) {
         const members = participants.filter((p) => p.groupPath.includes(group.id));
-        const boxes = members.map((m) => heads.get(m.id));
+        // A group holds its members' heads and their badges.
+        const boxes = members.flatMap((m) => [heads.get(m.id), ...(badges.get(m.id) ?? [])]);
         const union = unionBoxes(boxes);
         if (!union)
             continue;
@@ -439,12 +755,19 @@ export function layoutSequence(input) {
         });
     }
     // ---------------------------------------------------------------- canvas
-    const left = Math.min(xs[0] - widths[0] / 2 - leftExtra, ...frames.map((fr) => fr.box.x));
-    const right = Math.max(xs[xs.length - 1] + widths[widths.length - 1] / 2 + rightExtra, ...frames.map((fr) => fr.box.x + fr.box.width), ...notes.map((n) => n.box.x + n.box.width), ...messages.flatMap((m) => (m.label ? [m.label.box.x + m.label.box.width] : [])));
+    // A diagram with no participant yet (a new one) has an empty width, not an unknown one.
+    const leftmost = xs.length > 0 ? xs[0] - widths[0] / 2 - outerBefore - leftExtra : 0;
+    const rightmost = xs.length > 0
+        ? xs[xs.length - 1] + widths[widths.length - 1] / 2 + rightExtra + outerAfter
+        : 0;
+    const left = Math.min(leftmost, ...frames.map((fr) => fr.box.x));
+    const right = Math.max(rightmost, ...frames.map((fr) => fr.box.x + fr.box.width), ...notes.map((n) => n.box.x + n.box.width), ...messages.flatMap((m) => (m.label ? [m.label.box.x + m.label.box.width] : [])));
     const everything = [
         { x: left, y: 0, width: right - left, height: end + 8 },
         ...groupBoxes.values(),
         ...heads.values(),
+        ...[...badges.values()].flat(),
+        ...[...tags.values()].flat(),
     ];
     const bounds = unionBoxes(everything);
     const margin = theme.margin;
@@ -474,7 +797,9 @@ export function layoutSequence(input) {
         items.push(emit.frame(frame));
     const headers = frames.map((frame) => emit.frameHeader(frame));
     for (const p of participants) {
-        items.push(emit.lifeline(p, lifelines.get(p.id), bars.filter((b) => b.participant === p.id), xs[column.get(p.id)]));
+        items.push(emit.lifeline(p, lifelines.get(p.id), bars
+            .filter((b) => b.participant === p.id)
+            .map((bar) => ({ key: bar.key, depth: bar.depth, box: barBox(bar) })), xs[column.get(p.id)]));
     }
     items.push(...headers);
     for (const message of messages)
@@ -488,7 +813,8 @@ export function layoutSequence(input) {
     for (const cross of crosses)
         items.push(emit.cross(cross));
     for (const p of participants) {
-        items.push(emit.head(p, heads.get(p.id), boxHeight, figureHeight, labelLine));
+        const cell = heads.get(p.id);
+        items.push(emit.head(p, cell, drawnHead(p, cell), boxHeight, figureHeight, labelLine, badges.get(p.id) ?? []));
     }
     const gradients = [];
     if (framed) {
@@ -498,14 +824,43 @@ export function layoutSequence(input) {
             gradients.push(markGradient(theme.accent, theme.accentEnd));
     }
     const boxes = new Map();
-    for (const [id, box] of heads)
-        boxes.set(id, box);
+    // Box kinds are drawn as rounded boxes and databases as cylinders; figures have no outline.
+    const shapes = new Map();
+    const radii = new Map();
+    for (const p of participants) {
+        boxes.set(p.id, drawnHead(p, heads.get(p.id)));
+        if (!BOX_KINDS.has(p.kind))
+            continue;
+        if (p.kind === "database") {
+            shapes.set(p.id, "cylinder");
+        }
+        else {
+            shapes.set(p.id, "rounded");
+            radii.set(p.id, theme.radius);
+        }
+    }
     for (const [id, box] of groupBoxes)
         boxes.set(id, box);
     for (const note of notes)
         boxes.set(note.key, note.box);
     for (const frame of frames)
         boxes.set(frame.key, frame.box);
+    // Every bar by the key of its `activate`, or of the call whose block draws it; a written bar is
+    // also a box, which editors select and outline.
+    const barGeometry = new Map();
+    for (const bar of bars) {
+        const box = barBox(bar);
+        barGeometry.set(bar.key, {
+            participant: bar.participant,
+            box,
+            depth: bar.depth,
+            from: bar.key,
+            to: bar.to,
+            block: bar.block,
+        });
+        if (!bar.block)
+            boxes.set(bar.key, box);
+    }
     const connectors = new Map();
     const labels = new Map();
     for (const message of messages) {
@@ -533,22 +888,63 @@ export function layoutSequence(input) {
             gradients: [...gradients, ...emit.gradients],
             patterns: [],
             items,
+            ...(theme.sketch !== "none" ? { sketch: theme.sketch } : {}),
         },
         diagnostics,
         boxes,
         offset: { x: dx, y: dy },
         labels,
+        messageTexts,
+        bars: barGeometry,
+        // The participants' badges, then the messages' pills.
+        tags: new Map([...badges, ...tags]),
         connectors,
         origins: new Map(),
         theme,
         events: rows,
+        shapes,
+        radii,
     };
 }
+/**
+ * The heads a message draws: calls a filled one, replies and async calls an open one, two-way
+ * messages one at both ends; styles replace either.
+ */
+function messageHeads(relation, style) {
+    const end = style.arrowhead ??
+        (relation.heads === "none"
+            ? "none"
+            : relation.line === "dashed" || relation.async
+                ? "open"
+                : "triangle");
+    return { start: style.arrowtail ?? (relation.heads === "both" ? end : "none"), end };
+}
+function sequenceText(style, size, weight) {
+    return {
+        size: style.fontSize ?? size,
+        weight: style.fontWeight ?? weight,
+        font: textFont(style.font),
+    };
+}
+/** A label's lines 1.25 times its size apart, its first line as tall as a relation label's. */
+function labelText(text) {
+    return { ...text, step: text.size * 1.25, height: Math.round((text.size * 18) / 11) };
+}
+/** A note's text: the theme's note size at 400 or its style's, its lines the note scale's ratio. */
+function noteText(styles, scale, note) {
+    const text = sequenceText(styles.event(note.id ?? note.key, "note"), scale.note, 400);
+    return { ...text, line: Math.round((text.size * scale.noteLine) / scale.note) };
+}
+/** A fragment's text: its operator's size (the relation label size) and font. */
+function fragmentText(styles, scale, event, key) {
+    return sequenceText(styles.event(event.id ?? key, "fragment"), scale.relationLabel, 600);
+}
 /** Width of a fragment's header: the operator tab and the first condition. */
-function fragmentHeader(event, metrics, scale) {
-    const tab = metrics.width(event.operator, "body", 600, scale.relationLabel) + 18;
+function fragmentHeader(event, metrics, scale, styles) {
+    const text = fragmentText(styles, scale, event, event.key);
+    const tab = metrics.width(event.operator, text.font, text.weight, text.size) + 18;
     const condition = event.branches[0]?.condition;
-    return (tab + (condition ? metrics.width(`[${condition}]`, "body", 400, scale.relationLabel) + 12 : 0));
+    return tab + (condition ? metrics.width(`[${condition}]`, text.font, 400, text.size) + 12 : 0);
 }
 class SequenceEmitter {
     theme;
@@ -581,8 +977,8 @@ class SequenceEmitter {
             height: round2(box.height),
         };
     }
-    text(x, y, text, size, weight, fill, anchor = "middle") {
-        return textItem(this.metrics, x + this.dx, y + this.dy, text, size, weight, fill, anchor);
+    text(x, y, text, size, weight, fill, anchor = "middle", font = "body") {
+        return textItem(this.metrics, x + this.dx, y + this.dy, text, size, weight, fill, anchor, font);
     }
     rect(box, radius, fill, stroke, width, dashed = false) {
         const b = this.box(box);
@@ -605,7 +1001,7 @@ class SequenceEmitter {
         const style = this.styles.element(group);
         const items = [
             this.rect(box, theme.groupRadius, style.fill ?? theme.band, style.stroke ?? theme.bandLine, style.width ?? theme.strokeWidth, strokeDash(style.line)),
-            this.text(box.x + 12, box.y + 14, group.label, scale.groupTitle, scale.labelWeight, style.color ?? theme.ink, "start"),
+            this.text(box.x + 12, box.y + 14 + Math.max(0, (style.fontSize ?? scale.groupTitle) - scale.groupTitle) / 2, group.label, style.fontSize ?? scale.groupTitle, style.fontWeight ?? scale.labelWeight, style.color ?? theme.ink, "start", textFont(style.font)),
         ];
         return {
             kind: "group",
@@ -616,30 +1012,48 @@ class SequenceEmitter {
             ...(group.url ? { href: group.url } : {}),
         };
     }
+    /**
+     * A participant's lifeline and its activation bars, each bar its own group of role `event` with
+     * the key of its `activate` (or of the call whose block draws it) and its box as bounds.
+     */
     lifeline(participant, line, bars, x) {
         const { theme } = this;
         const style = this.styles.element(participant);
+        // Lifelines, bars, heads and notes take `muted`: the quiet `line` of boxes is too pale for the
+        // long thin strokes a sequence diagram is made of (decision 0052). A lifeline is a guide, drawn
+        // at half strength so the messages that cross it stay in front.
         const items = [
-            this.line([
-                { x, y: line.top },
-                { x, y: line.bottom ?? line.top },
-            ], style.stroke ?? theme.line, theme.strokeWidth, true),
+            {
+                ...this.line([
+                    { x, y: line.top },
+                    { x, y: line.bottom ?? line.top },
+                ], style.stroke ?? theme.muted, theme.strokeWidth, true),
+                opacity: LIFELINE_OPACITY,
+            },
         ];
         for (const bar of [...bars].sort((a, b) => a.depth - b.depth)) {
-            items.push(this.rect({
-                x: x - BAR / 2 + bar.depth * BAR_STEP,
-                y: bar.top,
-                width: BAR,
-                height: bar.bottom - bar.top,
-            }, 0, style.fill ?? theme.surface, style.stroke ?? theme.line, theme.strokeWidth));
+            items.push({
+                kind: "group",
+                id: bar.key,
+                role: "event",
+                items: [
+                    this.rect(bar.box, 0, style.fill ?? theme.surface, style.stroke ?? theme.muted, theme.strokeWidth),
+                ],
+                bounds: this.bounds(bar.box, 0),
+            });
         }
         return { kind: "group", id: participant.id, role: "lifeline", items };
     }
-    head(participant, head, boxHeight, figureHeight, labelLine) {
+    /**
+     * A participant's head in its row's cell `head`; `drawn` is the box it is drawn in, which the
+     * group carries as its bounds. Its badges, the pills of its tags, are drawn over it.
+     */
+    head(participant, head, drawn, boxHeight, figureHeight, labelLine, badges) {
         const { theme, scale } = this;
         const style = this.styles.element(participant);
+        const text = sequenceText(style, scale.label, scale.labelWeight);
         const fill = style.fill ?? theme.surface;
-        const stroke = style.stroke ?? theme.line;
+        const stroke = style.stroke ?? theme.muted;
         const strokeWidth = style.width ?? theme.strokeWidth;
         const dashed = strokeDash(style.line);
         const color = style.color ?? theme.ink;
@@ -658,7 +1072,7 @@ class SequenceEmitter {
                 items.push(this.path(body, fill, stroke, strokeWidth, dashed), this.path(top, fill, stroke, strokeWidth, dashed));
             }
             else if (participant.kind === "collections") {
-                items.push(this.rect({ ...box, x: box.x + 4, y: box.y - 4 }, theme.radius, fill, stroke, strokeWidth, dashed));
+                items.push(this.rect({ ...box, x: box.x + STACK, y: box.y - STACK }, theme.radius, fill, stroke, strokeWidth, dashed));
                 items.push(this.rect(box, theme.radius, fill, stroke, strokeWidth, dashed));
             }
             else if (participant.kind === "queue") {
@@ -674,7 +1088,7 @@ class SequenceEmitter {
             }
             // A queue's label is centred on the body, left of its right cap.
             const capRoom = participant.kind === "queue" ? Math.min(QUEUE_CAP, box.width * 0.1) : 0;
-            items.push(this.text(cx - capRoom, box.y + box.height / 2, participant.label, scale.label, scale.labelWeight, color));
+            items.push(this.text(cx - capRoom, box.y + box.height / 2, participant.label, text.size, text.weight, color, "middle", text.font));
         }
         else {
             const top = head.y + head.height - figureHeight - 6 - labelLine;
@@ -709,14 +1123,15 @@ class SequenceEmitter {
                     items.push(this.path(d, fill, figure, Math.max(strokeWidth, 1.5)));
                 }
             }
-            items.push(this.text(cx, head.y + head.height - labelLine / 2, participant.label, scale.label, scale.labelWeight, color));
+            items.push(this.text(cx, head.y + head.height - labelLine / 2, participant.label, text.size, text.weight, color, "middle", text.font));
         }
+        items.push(...this.tags(participant.id, participant.tags, badges));
         return {
             kind: "group",
             id: participant.id,
             role: "element",
             items,
-            bounds: this.bounds(head, theme.radius),
+            bounds: this.bounds(drawn, theme.radius),
             ...(participant.url ? { href: participant.url } : {}),
         };
     }
@@ -727,11 +1142,8 @@ class SequenceEmitter {
         const stroke = style.stroke ?? theme.connector;
         const strokeWidth = style.width ?? theme.connectorWidth;
         const dashed = strokeDash(style.line ?? relation.line);
-        // Calls take a filled head, replies and async calls an open one; two-way messages take it at
-        // both ends; styles replace either.
-        const endKind = style.arrowhead ?? (relation.line === "dashed" || relation.async ? "open" : "triangle");
-        const startKind = style.arrowtail ?? (relation.twoWay ? endKind : "none");
-        const arrow = relationEnds(message.points, startKind, endKind, theme.arrowSize, (theme.arrowSize * 7) / 8);
+        const heads = messageHeads(relation, style);
+        const arrow = relationEnds(message.points, heads.start, heads.end, theme.arrowSize, (theme.arrowSize * 7) / 8);
         const items = [this.line(arrow.line, stroke, strokeWidth, dashed)];
         const local = (parts) => shiftMarker(parts, (q) => this.p(q));
         items.push(...markerItems(local(arrow.start), stroke, strokeWidth), ...markerItems(local(arrow.end), stroke, strokeWidth));
@@ -740,17 +1152,18 @@ class SequenceEmitter {
             items.push(this.rect({ x: start.x - 8, y: start.y - 8, width: 16, height: 16 }, 8, style.stroke ?? theme.ink, "none", 0));
             items.push(this.text(start.x, start.y, String(message.number), Math.round(scale.relationLabel * 0.85), 700, theme.surface));
         }
-        if (message.label && message.label.text !== "") {
-            const box = message.label.box;
+        if (message.label && message.label.lines.length > 0) {
+            // One text a line, centred, the first where a one-line label is drawn.
+            const { box, lines, line, text: written } = message.label;
             items.push({
                 kind: "group",
                 id: message.key,
                 role: "label",
-                items: [
-                    this.text(box.x + box.width / 2, box.y + box.height / 2, message.label.text, scale.relationLabel, 400, style.color ?? theme.ink),
-                ],
+                items: lines.map((text, i) => this.text(box.x + box.width / 2, box.y + written.height / 2 + i * line, text, written.size, written.weight, style.color ?? theme.ink, "middle", written.font)),
             });
         }
+        // The pills of its tags, over the arrow and after the label, so that particles run under both.
+        items.push(...this.tags(message.key, relation.tags, message.tags));
         return {
             kind: "group",
             id: message.key,
@@ -759,6 +1172,23 @@ class SequenceEmitter {
             track: arrow.line.map((q) => this.p(q)),
         };
     }
+    /**
+     * The pills of an owner's tags in their boxes, each a group of role `tag` with the owner's id or
+     * key and its index: the flow tag's pill in the theme's `tag` and `tagText`.
+     */
+    tags(owner, tags, boxes) {
+        const { theme } = this;
+        return boxes.map((box, index) => {
+            const { outline, label } = tagPill(this.metrics, this.scale, this.box(box), tags[index].text, {
+                fill: theme.tag,
+                stroke: theme.tag,
+                strokeWidth: theme.strokeWidth,
+                dashed: false,
+                color: theme.tagText,
+            });
+            return { kind: "group", id: owner, role: "tag", tag: index, items: [outline, label] };
+        });
+    }
     note(note) {
         const { theme, scale } = this;
         const style = note.event.id
@@ -770,10 +1200,11 @@ class SequenceEmitter {
         const n = (v) => String(round2(v));
         const d = `M${n(s.x)} ${n(s.y)} L${n(s.x + s.width - fold)} ${n(s.y)} L${n(s.x + s.width)} ${n(s.y + fold)} L${n(s.x + s.width)} ${n(s.y + s.height)} L${n(s.x)} ${n(s.y + s.height)} Z`;
         const items = [
-            this.path(d, style.fill ?? theme.surface, style.stroke ?? theme.line, style.width ?? theme.strokeWidth, strokeDash(style.line)),
+            this.path(d, style.fill ?? theme.surface, style.stroke ?? theme.muted, style.width ?? theme.strokeWidth, strokeDash(style.line)),
         ];
+        const text = noteText(this.styles, scale, { id: note.event.id, key: note.key });
         splitLines(note.event.text).forEach((line, i) => {
-            items.push(this.text(b.x + 8, b.y + 6 + scale.noteLine / 2 + i * scale.noteLine, line, scale.note, 400, style.color ?? theme.ink, "start"));
+            items.push(this.text(b.x + 8, b.y + 6 + text.line / 2 + i * text.line, line, text.size, text.weight, style.color ?? theme.ink, "start", text.font));
         });
         return { kind: "group", id: note.key, role: "event", items, bounds: this.bounds(b, 0) };
     }
@@ -803,28 +1234,30 @@ class SequenceEmitter {
         const style = this.styles.event(event.id ?? frame.key, "fragment");
         const b = frame.box;
         const stroke = style.stroke ?? theme.muted;
-        const size = scale.relationLabel;
+        const written = fragmentText(this.styles, scale, event, frame.key);
+        const size = written.size;
+        const operatorWeight = written.weight;
         const color = style.color ?? theme.ink;
         const muted = style.color ?? theme.muted;
         const first = event.branches[0]?.condition ?? null;
         const h = frame.headerHeight;
         const items = [];
         const label = (x, y, text, weight, fill) => {
-            const width = metrics.width(text, "body", weight, size) + 6;
+            const width = metrics.width(text, written.font, weight, size) + 6;
             items.push(this.rect({ x: x - 3, y: y - h / 2 + 4, width, height: h - 8 }, 2, theme.background, "none", 0));
-            items.push(this.text(x, y, text, size, weight, fill, "start"));
+            items.push(this.text(x, y, text, size, weight, fill, "start", written.font));
         };
         if (event.operator === "region") {
             if (first)
-                label(b.x + 8, b.y + h / 2, first, 600, color);
+                label(b.x + 8, b.y + h / 2, first, operatorWeight, color);
         }
         else {
-            const tabWidth = metrics.width(event.operator, "body", 600, size) + 18;
+            const tabWidth = metrics.width(event.operator, written.font, operatorWeight, size) + 18;
             const s = this.box(b);
             const n = (v) => String(round2(v));
             const tab = `M${n(s.x)} ${n(s.y)} L${n(s.x + tabWidth)} ${n(s.y)} L${n(s.x + tabWidth)} ${n(s.y + h - 6)} L${n(s.x + tabWidth - 6)} ${n(s.y + h)} L${n(s.x)} ${n(s.y + h)} Z`;
             items.push(this.path(tab, theme.surface, stroke, style.width ?? theme.strokeWidth));
-            items.push(this.text(b.x + 8, b.y + h / 2, event.operator, size, 600, color, "start"));
+            items.push(this.text(b.x + 8, b.y + h / 2, event.operator, size, operatorWeight, color, "start", written.font));
             if (first)
                 label(b.x + tabWidth + 8, b.y + h / 2, `[${first}]`, 400, muted);
         }