@meltemi/diagrams-layout 1.9.0 → 1.10.17

package/dist/layout.js

@@ -1,6 +1,6 @@
 import { DEFAULT_LOCALE } from "@meltemi/diagrams-i18n";
 import { defaultImageSize, } from "@meltemi/diagrams-assets";
-import { ENTITY_TYPE_NAMES, ICON_SIZE_RANGE, MAIN_LAYER, takesRotation, } from "@meltemi/diagrams-model";
+import { ENTITY_TYPE_NAMES, ICON_SIZE_RANGE, MAIN_LAYER, PEN_WIDTH_RANGE, takesRotation, } from "@meltemi/diagrams-model";
 import { auditLabels } from "./audit.js";
 import { drawingWords, messages } from "./messages/index.js";
 import { checkComposition } from "./checks.js";
@@ -9,17 +9,29 @@ import { ENGINE_SPACING, } from "./engine.js";
 import { LANE_SPACING, anchorPoints, avoidingRoute, crossedBoxes, bezierThrough, detourRoute, portPoint, shapeRoute, sideNormal, sideOfPoint, snapEnd, } from "./routing.js";
 import { boxCenter, boxFromCenter, cylinderPaths, ellipsePath, expandBox, pointAlong, unionBoxes, } from "./geometry.js";
 import { CORNER_RADIUS, endMarker, markerItems, markerPoints, markerReach, relationEnds, roundCorners, shiftMarker, } from "./markers.js";
-import { freeFrames, groupHeaderOf, isUntitledGroup, paintOrder, parentOf } from "./free.js";
+import { freeFrames, groupHeaderOf, isList, isUntitledGroup, listHolders, listPlaces, paintOrder, parentOf, } from "./free.js";
 import { layoutSequence } from "./sequence.js";
 import { IconPainter } from "./icons.js";
-import { brandFrame } from "./frame.js";
+import { brandFrame, textItem } from "./frame.js";
 import { markGradient } from "./mark.js";
 import { strokeDash, } from "./scene.js";
-import { MIN_TEXT_MARGIN, TextMetrics, estimateMeasurer } from "./measure.js";
-import { CORNERED_SHAPES, SHAPE_SIZES, agentHeight, framedLines, isOutlined, onOutline, onPolygon, shapeOutline, shapeTextCenter, shapeTextSpan, shapeTextSpanner, turnPoint, turnedOutline, } from "./shapes.js";
+import { MIN_TEXT_MARGIN, TextMetrics, estimateMeasurer, fontRole, textFont, writtenStack, } from "./measure.js";
+import { CORNERED_SHAPES, FIXED_TEXT_SHAPES, boundaryToward, SHAPE_SIZES, agentHeight, framedLines, isOutlined, onOutline, onPolygon, shapeOutline, shapeTextCenter, shapeTextBand, shapeTextSpan, shapeTextSpanner, turnPoint, turnedOutline, } from "./shapes.js";
 import { StyleResolver } from "./styles.js";
-import { splitLines } from "./text.js";
+import { splitLines, wrapLines } from "./text.js";
 import { DEFAULT_THEME_NAME, THEMES, resolveTheme, } from "./theme.js";
+/** The width of a pen stroke whose style writes none. */
+export const DEFAULT_PEN_WIDTH = 3;
+/** The smallest size a sticky's text shrinks to before it is clipped to its card. */
+export const STICKY_MIN_FONT_SIZE = 8;
+/** A sticky's default font size, as a factor of the theme's label size. */
+const STICKY_FONT_SCALE = 1.2;
+/** The weight of a sticky's text when its style writes no `fontWeight`. */
+const STICKY_FONT_WEIGHT = 400;
+/** The corner radius of a sticky's card when its style writes no `radius`. */
+const STICKY_RADIUS = 2;
+/** The shadow under a sticky's card: how far down it lies, its colour and its opacity. */
+const STICKY_SHADOW = { offset: 3, color: "#000000", opacity: 0.15 };
 /** Widest content canvas of `preset document` before `layout.too-large`. */
 export const DOCUMENT_MAX_WIDTH = 1200;
 /** The 16:9 canvas of `preset slide`. */
@@ -38,6 +50,11 @@ export const DEFAULT_SIZES = {
     text: null,
     icon: { width: 48, height: 48 },
     image: null,
+    // A sticky is a square card that never grows for its text.
+    sticky: { width: 160, height: 160 },
+    // A free line is the bounding box of its points; a pen, of its points and its width.
+    line: null,
+    pen: null,
     // Sequence heads are measured by the sequence layout.
     participant: null,
     actor: null,
@@ -164,6 +181,92 @@ export function typeScale(theme) {
         frameMark: Math.round(theme.frameSize * 2),
     };
 }
+/**
+ * The type scale of a target whose style writes `fontSize`: the theme's scale with the size of
+ * its kind and every measure derived from it, as the theme's token would give them: a label's
+ * description at the theme's ratio of description to label, a pill's height and padding, a tag's
+ * pill, a note's line (decision 0067). Without a written size, `scale` itself.
+ */
+export function writtenScale(theme, scale, kind, size) {
+    if (size === undefined)
+        return scale;
+    switch (kind) {
+        case "label":
+            return {
+                ...scale,
+                ...pick(typeScale({
+                    ...theme,
+                    labelSize: size,
+                    descriptionSize: Math.round((size * theme.descriptionSize) / theme.labelSize),
+                }), ["label", "description", "descriptionLine"]),
+            };
+        case "groupTitle":
+            return { ...scale, groupTitle: size };
+        case "note":
+            return { ...scale, ...pick(typeScale({ ...theme, noteSize: size }), ["note", "noteLine"]) };
+        case "tag":
+            return {
+                ...scale,
+                ...pick(typeScale({ ...theme, tagSize: size }), ["tag", "tagHeight", "tagPadding"]),
+            };
+        case "relationLabel":
+            return {
+                ...scale,
+                ...pick(typeScale({ ...theme, relationLabelSize: size }), [
+                    "relationLabel",
+                    "relationLabelHeight",
+                    "relationLabelPadding",
+                ]),
+            };
+    }
+}
+function pick(value, keys) {
+    return Object.fromEntries(keys.map((key) => [key, value[key]]));
+}
+/**
+ * The text of a relation's or a free line's label pill from its resolved style: the theme's
+ * relation label size at weight 500 in the body font, or what the style writes.
+ */
+export function pillText(theme, scale, style) {
+    return {
+        scale: writtenScale(theme, scale, "relationLabel", style.fontSize),
+        weight: style.fontWeight ?? 500,
+        font: textFont(style.font),
+    };
+}
+/**
+ * The width of a tag's pill: its text in the mono font at `tagSize`, weight 500, with `beside`
+ * more for an icon, plus `tagPadding`. A pill is `tagHeight` high. Flow tags and the tags of
+ * sequence messages and participants are measured alike.
+ */
+export function tagPillWidth(metrics, scale, text, beside = 0, face = DEFAULT_TAG_FACE) {
+    return Math.ceil(metrics.width(text, face.font, face.weight, scale.tag) + beside + scale.tagPadding);
+}
+const DEFAULT_TAG_FACE = { font: "mono", weight: 500 };
+/**
+ * A tag's pill in `box`, in scene coordinates: its outline, as round as its shorter side allows
+ * (upright when the tag is taller than wide), and its text centred on it in the mono font at
+ * `tagSize`, weight 500. Flow tags and the tags of sequence messages and participants are drawn
+ * alike.
+ */
+export function tagPill(metrics, scale, box, text, paint, face = DEFAULT_TAG_FACE) {
+    const center = boxCenter(box);
+    return {
+        outline: {
+            kind: "rect",
+            x: round(box.x),
+            y: round(box.y),
+            width: round(box.width),
+            height: round(box.height),
+            radius: cornerRadius(Infinity, box),
+            fill: paint.fill,
+            stroke: paint.stroke,
+            strokeWidth: paint.strokeWidth,
+            dashed: paint.dashed,
+        },
+        label: textItem(metrics, center.x, center.y, text, scale.tag, face.weight, paint.color, "middle", face.font),
+    };
+}
 /** Room kept between a group's title and the connectors that pass under it. */
 const TITLE_GAP = 3;
 /**
@@ -292,6 +395,118 @@ function boundsOf(points) {
     // A straight horizontal or vertical line still has an area to meet.
     return { x: x0 - 1, y: y0 - 1, width: x1 - x0 + 2, height: y1 - y0 + 2 };
 }
+/** A free line's points in order: `from`, its bends, `to`. */
+function linePointsOf(line) {
+    return [line.from, ...line.via, line.to];
+}
+/** The box of a free line: the bounding box of its points, at least 1 wide and 1 tall. */
+function lineBox(points) {
+    const { x, y, width, height } = penBox(points, 0);
+    return { x, y, width: Math.max(1, width), height: Math.max(1, height) };
+}
+/**
+ * The box of a pen stroke: the bounding box of its points grown by half its width on every side.
+ * The extremes are found in one loop: a stroke may hold more points than a call takes arguments.
+ */
+function penBox(points, width) {
+    let x0 = Infinity;
+    let y0 = Infinity;
+    let x1 = -Infinity;
+    let y1 = -Infinity;
+    for (const p of points) {
+        if (p.x < x0)
+            x0 = p.x;
+        if (p.y < y0)
+            y0 = p.y;
+        if (p.x > x1)
+            x1 = p.x;
+        if (p.y > y1)
+            y1 = p.y;
+    }
+    return {
+        x: x0 - width / 2,
+        y: y0 - width / 2,
+        width: x1 - x0 + width,
+        height: y1 - y0 + width,
+    };
+}
+/** Whether every point of a stroke is its first: a dot. */
+function isDot(points) {
+    const first = points[0];
+    return first !== undefined && points.every((p) => p.x === first.x && p.y === first.y);
+}
+/**
+ * A name as part of an XML id: letters, digits, `_`, `-` and `.` kept, anything else `_`. Ids of
+ * the language are already such names; the rule keeps a scene's ids valid whatever it is given.
+ */
+function xmlName(name) {
+    return name.replace(/[^A-Za-z0-9_.-]/g, "_");
+}
+/** A stroke's points without a point equal to the one before it, which make no segment. */
+function withoutRepeats(points) {
+    const out = [];
+    for (const p of points) {
+        const last = out[out.length - 1];
+        if (last === undefined || last.x !== p.x || last.y !== p.y)
+            out.push(p);
+    }
+    return out;
+}
+/**
+ * The path of a pen stroke through its points, as the layout draws it: `M p0`, then for every
+ * inner point a quadratic curve to the midpoint between it and the next one, with the point as its
+ * control (`Q p_i mid(p_i, p_i+1)`), then `L p_last`; two points are one segment, and one point
+ * is `M p0 L p0`, which round caps draw as a dot. Numbers are rounded to hundredths, as the scene
+ * writes them. Hosts draw a stroke in progress with it, so it looks as it will be written.
+ */
+export function penPath(points) {
+    const at = (p) => `${round(p.x)} ${round(p.y)}`;
+    const first = points[0];
+    if (first === undefined)
+        return "";
+    let d = `M ${at(first)}`;
+    for (let i = 1; i < points.length - 1; i++) {
+        const p = points[i];
+        const next = points[i + 1];
+        d += ` Q ${at(p)} ${at({ x: (p.x + next.x) / 2, y: (p.y + next.y) / 2 })}`;
+    }
+    return `${d} L ${at(points[points.length - 1])}`;
+}
+/** A pen's stroke width: its style's, else `DEFAULT_PEN_WIDTH`, and never below one pixel. */
+function penWidth(style) {
+    return Math.max(PEN_WIDTH_RANGE.min, style.width ?? DEFAULT_PEN_WIDTH);
+}
+/**
+ * The length of a pen's heads: the theme's arrow size, or three times the stroke's width for a
+ * thicker stroke, so the head stays wider than the stroke it ends.
+ */
+function penHeadLength(arrowSize, width) {
+    return Math.max(arrowSize, 3 * width);
+}
+/** The side whose normal points most nearly from `from` towards `to`. */
+function sideToward(from, to) {
+    const dx = to.x - from.x;
+    const dy = to.y - from.y;
+    if (Math.abs(dx) >= Math.abs(dy))
+        return dx >= 0 ? "east" : "west";
+    return dy >= 0 ? "south" : "north";
+}
+/**
+ * A free line's points with an elbow between consecutive points that differ on both axes, each
+ * leg leaving along the axis of the longer displacement: every segment horizontal or vertical.
+ */
+function orthogonalThrough(points) {
+    const out = [points[0]];
+    for (let i = 1; i < points.length; i++) {
+        const a = points[i - 1];
+        const b = points[i];
+        if (a.x !== b.x && a.y !== b.y) {
+            out.push(Math.abs(b.x - a.x) >= Math.abs(b.y - a.y) ? { x: b.x, y: a.y } : { x: a.x, y: b.y });
+        }
+        out.push(b);
+    }
+    return out;
+}
 const SIDES = ["north", "east", "south", "west"];
 const overlaps = (a, b) => Math.min(a.x + a.width, b.x + b.width) - Math.max(a.x, b.x) > 0.5 &&
     Math.min(a.y + a.height, b.y + b.height) - Math.max(a.y, b.y) > 0.5;
@@ -528,6 +743,7 @@ function iconDiagnostics(diagram, styles, sizing, lines, words, themeRange) {
             }
         }
     }
+    out.push(...verticalAlignDiagnostics(diagram, styles, sizing, lines, words, themeRange));
     for (const { range, element, used, placed, inherited } of labels.values()) {
         if (used)
             continue;
@@ -550,6 +766,69 @@ function iconDiagnostics(diagram, styles, sizing, lines, words, themeRange) {
     }
     return out;
 }
+/**
+ * `layout.vertical-align-ignored` for a `verticalAlign` that no element it styles uses: a box whose
+ * shape draws its text at a fixed spot, a box whose icon is the centre piece (its label band is at
+ * `labelPosition`), or an element that is neither a box nor a sticky. Once per statement that
+ * writes the property, or once for a theme rule or class, on the diagram's `theme` (`themeRange`).
+ */
+function verticalAlignDiagnostics(diagram, styles, sizing, lines, words, themeRange) {
+    const sources = new Map();
+    for (const element of diagram.elements) {
+        if (styles.element(element).verticalAlign === undefined)
+            continue;
+        const source = styleSource(diagram, element, "verticalAlign", lines, styles);
+        const box = element.kind === "box";
+        const fixed = box && FIXED_TEXT_SHAPES.has(sizing.shapeOf(element));
+        const centred = box && !fixed && sizing.centred(element);
+        // A sticky's text block always moves within its card.
+        const used = (box && !fixed && !centred) || element.kind === "sticky";
+        const why = used
+            ? undefined
+            : fixed
+                ? "fixed"
+                : centred
+                    ? "centred"
+                    : "notBox";
+        const known = sources.get(source.key);
+        if (known) {
+            known.used ||= used;
+            if (why)
+                known.why.add(why);
+        }
+        else {
+            sources.set(source.key, {
+                range: source.inherited ? themeRange : source.range,
+                element: element.id,
+                used,
+                why: new Set(why ? [why] : []),
+                inherited: source.inherited,
+            });
+        }
+    }
+    const out = [];
+    for (const { range, element, used, why, inherited } of sources.values()) {
+        if (used)
+            continue;
+        out.push({
+            code: "layout.vertical-align-ignored",
+            severity: "warning",
+            message: inherited
+                ? words.diagnostics.verticalAlignIgnoredByTheme(element)
+                : words.diagnostics.verticalAlignIgnored(element),
+            range,
+            hints: [
+                why.has("fixed")
+                    ? words.hints.verticalAlignFixedShape
+                    : why.has("centred")
+                        ? words.hints.verticalAlignCentredIcon
+                        : words.hints.verticalAlignNeverUsed,
+            ],
+            data: { ids: [element] },
+        });
+    }
+    return out;
+}
 /** Lays out one compiled diagram into a scene. */
 function layoutDrawing(compilation, diagram, options = {}) {
     const diagnostics = [];
@@ -560,7 +839,9 @@ function layoutDrawing(compilation, diagram, options = {}) {
     const definitions = options.themes ?? compilation.document.themes;
     const resolved = resolveTheme(written ?? options.defaultTheme ?? null, definitions);
     // A default theme that does not resolve is reported where it is configured.
-    const { theme } = resolved.known || written !== null ? resolved : resolveTheme(null, definitions);
+    const known = resolved.known || written !== null ? resolved : resolveTheme(null, definitions);
+    // An export without the branding keeps the theme and leaves its frame out.
+    const theme = options.frame === "none" ? { ...known.theme, frame: "none" } : known.theme;
     if (!resolved.known && written !== null) {
         const fileThemes = definitions.map((t) => t.id).filter((id) => !id.includes("#"));
         diagnostics.push({
@@ -605,18 +886,77 @@ function layoutDrawing(compilation, diagram, options = {}) {
                 break;
         }
     }
+    // Free lines: the bounding box of the points written in their statement is their place and
+    // size, in their parent's interior coordinates, so a group derives its size from them as from
+    // its boxes; the drawn points are found once the groups are placed.
+    const freeLines = diagram.elements.filter((e) => e.kind === "line" && e.line !== null);
+    for (const line of freeLines) {
+        const box = lineBox(linePointsOf(line.line));
+        places.set(line.id, boxCenter(box));
+        sizes.set(line.id, { width: box.width, height: box.height });
+    }
+    const styles = new StyleResolver(theme, diagram);
+    // Pen strokes likewise, their box grown by half their width: a group holds the whole stroke.
+    const freePens = diagram.elements.filter((e) => e.kind === "pen" && e.pen !== null);
+    for (const pen of freePens) {
+        const box = penBox(pen.pen.points, penWidth(styles.element(pen)));
+        places.set(pen.id, boxCenter(box));
+        sizes.set(pen.id, { width: box.width, height: box.height });
+    }
     const mode = options.layout ?? diagram.properties.layout;
     const free = diagram.type === "free";
-    const unplaced = diagram.elements.filter((e) => e.kind !== "group" && !places.has(e.id));
+    // Lists (`layout column|row` on a free group) place their children, elements and groups, in
+    // order: a `place` on one is ignored and said so. What a list holds, at any depth, is held by
+    // the outermost list around it, which an engine arranges as one box.
+    const holders = free ? listHolders(diagram) : new Map();
+    const listed = new Set(diagram.elements
+        .filter((e) => {
+        const parent = parentOf(e);
+        const group = parent === null ? undefined : diagram.elementsById.get(parent);
+        return group !== undefined && isList(group) && listPlaces(e);
+    })
+        .map((e) => e.id));
+    for (const entry of diagram.placement) {
+        if (entry.statement !== "place" || !listed.has(entry.target))
+            continue;
+        places.delete(entry.target);
+        const list = parentOf(diagram.elementsById.get(entry.target));
+        diagnostics.push({
+            code: "layout.place-ignored",
+            severity: "warning",
+            message: words.diagnostics.placeIgnored(entry.target, list),
+            range: entry.range,
+            hints: [words.hints.placeIgnored(entry.target, list)],
+            data: { ids: [entry.target, list] },
+        });
+    }
+    // A list is one box of the arrangement; what it holds is placed by it, or by its own `place`.
+    const unplaced = diagram.elements.filter((e) => (e.kind !== "group" || isList(e)) && !holders.has(e.id) && !places.has(e.id));
     // Places are ignored in `auto` only when an engine arranges the diagram.
     const arranging = options.engine !== undefined &&
         (mode === "auto" ? true : mode === "assisted" && unplaced.length > 0);
+    // What a group that is not a list holds inside a list keeps its written place in every mode:
+    // no engine arranges inside a list.
+    const unplacedInLists = diagram.elements.filter((e) => holders.has(e.id) && !listed.has(e.id) && listPlaces(e) && !places.has(e.id));
+    for (const element of unplacedInLists) {
+        const list = [...element.groupPath]
+            .reverse()
+            .find((id) => isList(diagram.elementsById.get(id)));
+        diagnostics.push({
+            code: "layout.missing-placement",
+            severity: "error",
+            message: words.diagnostics.unplacedInList(element.id, parentOf(element), list),
+            range: element.range,
+            hints: [words.hints.addPlace(element.id)],
+        });
+    }
     // Free diagrams place children inside their group, so a group must be placed when its
     // children are, and always when nothing is arranged.
     if (free && !(arranging && mode === "auto")) {
         const placedChild = new Set(diagram.elements.flatMap((e) => (places.has(e.id) ? [parentOf(e) ?? ""] : [])));
         const missing = diagram.elements.filter((e) => e.kind === "group" &&
             !places.has(e.id) &&
+            !holders.has(e.id) &&
             (!arranging || placedChild.has(e.id) || unplaced.length === 0));
         for (const group of missing) {
             diagnostics.push({
@@ -633,7 +973,10 @@ function layoutDrawing(compilation, diagram, options = {}) {
     }
     if (unplaced.length > 0 && !arranging) {
         if (mode === "manual") {
+            // An unplaced list is a group without a place, reported above.
             for (const element of unplaced) {
+                if (element.kind === "group")
+                    continue;
                 diagnostics.push({
                     code: "layout.missing-placement",
                     severity: "error",
@@ -654,6 +997,8 @@ function layoutDrawing(compilation, diagram, options = {}) {
         }
         return { scene: null, diagnostics };
     }
+    if (unplacedInLists.length > 0)
+        return { scene: null, diagnostics };
     // A placed and sized group that holds nothing is a band: it stays where it is written, out of
     // the engine's request. In `auto` only bands at the top level, whose places are in diagram
     // coordinates, are kept.
@@ -666,8 +1011,9 @@ function layoutDrawing(compilation, diagram, options = {}) {
         childless(e))
         .map((e) => e.id));
     if (arranging && mode === "auto") {
+        // What a list holds keeps its places: the engine arranges the list as one box.
         const ignored = diagram.placement
-            .filter((e) => (e.statement === "place" && !autoBands.has(e.target)) ||
+            .filter((e) => (e.statement === "place" && !autoBands.has(e.target) && !holders.has(e.target)) ||
             (e.statement === "route" && e.via.length > 0))
             .sort((a, b) => a.range.start.offset - b.range.start.offset)[0];
         if (ignored) {
@@ -680,7 +1026,6 @@ function layoutDrawing(compilation, diagram, options = {}) {
             });
         }
     }
-    const styles = new StyleResolver(theme, diagram);
     const images = new Map();
     for (const element of diagram.elements) {
         if (element.kind !== "image" || element.source === null)
@@ -706,8 +1051,11 @@ function layoutDrawing(compilation, diagram, options = {}) {
             continue;
         const explicit = sizes.get(element.id);
         const size = explicit ?? sizing.defaultSize(element);
-        if (explicit)
-            sizing.checkOverflow(element, explicit, sizeEntries.get(element.id), diagnostics);
+        const entry = sizeEntries.get(element.id);
+        // Stickies are checked at the size they are drawn, which a list may stretch.
+        if (element.kind !== "sticky" && explicit && entry) {
+            sizing.checkOverflow(element, explicit, entry, diagnostics);
+        }
         elementSizes.set(element.id, size);
     }
     // Turned elements: their angle, clockwise; 0 and 360 draw upright.
@@ -763,30 +1111,66 @@ function layoutDrawing(compilation, diagram, options = {}) {
             : [];
         return outlineBounds([...turnedAt(id, box), ...corners]);
     };
-    // Free diagrams: turn places relative to group interiors into diagram coordinates, and give
-    // every placed group its written or derived size.
-    if (free && !(arranging && mode === "auto")) {
-        const frames = freeFrames(diagram, places, sizes, elementSizes, theme, (group) => sizing.textNeeds(group).width, (group) => sizing.headerOf(group), (id, size) => outside.has(id) || rotations.has(id)
+    // Free diagrams: turn places relative to group interiors into diagram coordinates, give every
+    // placed group its written or derived size, and arrange the lists. In `auto` only what the lists
+    // hold keeps its places: the engine arranges each outermost list as one box.
+    const autoArranged = arranging && mode === "auto";
+    let frames;
+    if (free) {
+        frames = freeFrames(diagram, autoArranged ? new Map([...places].filter(([id]) => holders.has(id))) : places, sizes, elementSizes, theme, (group) => sizing.textNeeds(group).width, (group) => sizing.headerOf(group), (id, size) => outside.has(id) || rotations.has(id)
             ? extentAt(id, boxFromCenter({ x: 0, y: 0 }, size.width, size.height))
             : undefined);
-        places.clear();
-        for (const [id, center] of frames.centers)
-            places.set(id, center);
-        for (const [id, size] of frames.groupSizes)
-            sizes.set(id, size);
+        // A stretched element is drawn at the size its list gives it, its outside label with it.
+        for (const [id, size] of frames.stretched) {
+            elementSizes.set(id, size);
+            const label = sizing.outsideLabel(diagram.elementsById.get(id), { x: 0, y: 0, ...size });
+            if (label)
+                outside.set(id, label.box);
+        }
+        if (!autoArranged) {
+            places.clear();
+            for (const [id, center] of frames.centers)
+                places.set(id, center);
+            for (const [id, size] of frames.groupSizes)
+                sizes.set(id, size);
+        }
+    }
+    // A sticky never grows: its text shrinks to fit its card, written, default or stretched, or is
+    // reported.
+    for (const element of diagram.elements) {
+        if (element.kind !== "sticky")
+            continue;
+        const range = sizeEntries.get(element.id)?.range ?? element.range;
+        sizing.checkSticky(element, elementSizes.get(element.id), range, diagnostics);
+    }
+    // The outermost lists an engine arranges, as boxes of their arranged size.
+    const topLists = new Map();
+    for (const element of diagram.elements) {
+        const size = frames?.sizes.get(element.id);
+        if (arranging && isList(element) && !holders.has(element.id) && size) {
+            topLists.set(element.id, size);
+        }
     }
+    // The groups whose boxes follow the place an engine gave the list that holds them.
+    const framedGroups = new Set();
     // Positions: placed, or arranged by the engine; fixed ones never move afterwards.
     const centers = new Map();
     const fixed = new Set();
     let engineRoutes = new Map();
     let engineGroups = new Map();
-    // `auto`: the written size of a group with children is the least size the engine gives it.
+    // `auto`: the written size of a group with children is the least size the engine gives it. A
+    // list's written size is already in its arranged one.
     const minimums = new Map();
-    if (arranging && mode === "auto") {
+    if (autoArranged) {
         for (const element of diagram.elements) {
             const size = sizes.get(element.id);
-            if (element.kind === "group" && size && !childless(element))
+            if (element.kind === "group" &&
+                size &&
+                !childless(element) &&
+                !isList(element) &&
+                !holders.has(element.id)) {
                 minimums.set(element.id, size);
+            }
         }
     }
     if (arranging) {
@@ -802,6 +1186,13 @@ function layoutDrawing(compilation, diagram, options = {}) {
         // A turned element is arranged as its drawn box.
         const extents = new Map();
         const arranged = new Map(elementSizes);
+        // A list is a box of its arranged size; a band stays out, as any band does.
+        for (const [id, size] of topLists) {
+            if (bands.has(id))
+                topLists.delete(id);
+            else
+                arranged.set(id, size);
+        }
         const shifts = new Map();
         for (const id of new Set([...outside.keys(), ...rotations.keys()])) {
             const size = elementSizes.get(id);
@@ -824,7 +1215,7 @@ function layoutDrawing(compilation, diagram, options = {}) {
         let arrangement;
         const request = (mirrored) => arrangeRequest(diagram, arranged, mode === "assisted"
             ? new Map([...places].map(([id, place]) => [id, shifted(id, place, 1)]))
-            : new Map(), routes, theme, (group) => sizing.headerOf(group), (relation) => labelSize(relation, metrics, scale), bands, minimums, extents, mirrored);
+            : new Map(), routes, theme, (group) => sizing.headerOf(group), (relation) => labelSize(relation, metrics, sizing.relationPill(relation)), bands, minimums, extents, mirrored, holders);
         try {
             arrangement = options.engine.arrange(request(new Set()));
             // The ports of icon shapes face the flow; a relation the engine turns back would wrap
@@ -855,11 +1246,37 @@ function layoutDrawing(compilation, diagram, options = {}) {
         if (mode === "auto") {
             for (const [id, center] of arrangement.centers)
                 centers.set(id, center);
-            engineRoutes = arrangement.routes;
+            // A relation to what a list holds was arranged to the list: its own route is drawn.
+            const held = (key) => {
+                const relation = diagram.relationsByKey.get(key);
+                return relation !== undefined && (holders.has(relation.from) || holders.has(relation.to));
+            };
+            engineRoutes = new Map([...arrangement.routes].filter(([key]) => !held(key)));
             engineGroups = arrangement.groups ?? new Map();
         }
         else {
-            placeAround(diagram, arrangement, places, elementSizes, centers, fixed, (id, box) => extentAt(id, box));
+            // Boxes to position: the leaves and the lists; what an unplaced list holds follows it.
+            const positioned = new Map([...elementSizes].filter(([id]) => !holders.has(id) || places.has(id)));
+            for (const [id, size] of topLists)
+                positioned.set(id, size);
+            placeAround(diagram, arrangement, places, positioned, centers, fixed, (id, box) => extentAt(id, box));
+        }
+        // The lists the engine arranged: what they hold is where they put it, and fixed there.
+        for (const id of topLists.keys()) {
+            const center = centers.get(id);
+            if (!center || (mode === "assisted" && places.has(id)))
+                continue;
+            for (const [inner, at] of frames.within(id, center)) {
+                if (diagram.elementsById.get(inner).kind === "group") {
+                    places.set(inner, at);
+                    sizes.set(inner, frames.sizes.get(inner));
+                    framedGroups.add(inner);
+                }
+                else {
+                    centers.set(inner, at);
+                    fixed.add(inner);
+                }
+            }
         }
     }
     else {
@@ -900,7 +1317,7 @@ function layoutDrawing(compilation, diagram, options = {}) {
         .sort((a, b) => b.groupPath.length - a.groupPath.length);
     const explicitGroups = new Set();
     for (const group of groups) {
-        const arranged = mode === "auto" && arranging && !autoBands.has(group.id);
+        const arranged = mode === "auto" && arranging && !autoBands.has(group.id) && !framedGroups.has(group.id);
         const place = arranged ? undefined : places.get(group.id);
         const size = arranged ? undefined : sizes.get(group.id);
         if (place && size) {
@@ -972,6 +1389,35 @@ function layoutDrawing(compilation, diagram, options = {}) {
             }
         }
     }
+    // Free lines: their written points moved by their parent's interior origin, in diagram
+    // coordinates; their box is the bounding box of those points.
+    const lineAnchors = new Map();
+    for (const line of freeLines) {
+        const origin = origins.get(line.id) ?? { x: 0, y: 0 };
+        const points = linePointsOf(line.line).map((p) => ({ x: p.x + origin.x, y: p.y + origin.y }));
+        lineAnchors.set(line.id, points);
+        boxes.set(line.id, lineBox(points));
+        if (points.every((p) => p.x === points[0].x && p.y === points[0].y)) {
+            diagnostics.push({
+                code: "layout.degenerate-line",
+                severity: "warning",
+                message: words.diagnostics.degenerateLine(line.id),
+                range: line.range,
+                hints: [words.hints.lineEnds],
+            });
+        }
+    }
+    // Pen strokes: their written points moved by their parent's interior origin; their box is the
+    // bounding box of those points grown by half their width, which they draw within.
+    const penGeometry = new Map();
+    for (const pen of freePens) {
+        const origin = origins.get(pen.id) ?? { x: 0, y: 0 };
+        const points = pen.pen.points.map((p) => ({ x: p.x + origin.x, y: p.y + origin.y }));
+        const width = penWidth(styles.element(pen));
+        const bounds = penBox(points, width);
+        boxes.set(pen.id, bounds);
+        penGeometry.set(pen.id, { points, bounds, width });
+    }
     // The drawn shape of every element box, and the outline of those that are not their box; a
     // turned element's outline is turned, and its drawn box is the bounding box of that outline.
     const shapes = new Map();
@@ -979,8 +1425,9 @@ function layoutDrawing(compilation, diagram, options = {}) {
     const turnedBoxes = new Map();
     for (const element of diagram.elements) {
         const box = boxes.get(element.id);
-        if (element.kind === "group" || !box)
+        if (element.kind === "group" || element.kind === "line" || element.kind === "pen" || !box) {
             continue;
+        }
         const shape = element.kind === "tag" ? "pill" : sizing.shapeOf(element);
         shapes.set(element.id, shape);
         if (rotations.has(element.id)) {
@@ -1014,7 +1461,7 @@ function layoutDrawing(compilation, diagram, options = {}) {
      * The boxes a connector should not cross: the other shapes of its layer, but not its ends, the
      * groups that hold them, nor a shape that contains an end box (a box it is stacked inside).
      */
-    const shapeIds = diagram.elements.filter((e) => e.kind !== "group" && e.kind !== "tag");
+    const shapeIds = diagram.elements.filter((e) => e.kind !== "group" && e.kind !== "tag" && e.kind !== "line" && e.kind !== "pen");
     const obstaclesFor = (relation) => {
         const ends = [relation.from, relation.to];
         const holders = new Set(ends.flatMap((id) => [id, ...(diagram.elementsById.get(id)?.groupPath ?? [])]));
@@ -1037,11 +1484,14 @@ function layoutDrawing(compilation, diagram, options = {}) {
         });
     }
     // Relations with labels sit a label apart, so their pills do not overlap.
-    const laneSpacing = (relation) => relation.label !== null || relation.technology
-        ? scale.relationLabelHeight +
-            (relation.technology ? Math.round(technologySize(scale.relationLabel) * 1.25) : 0) +
-            4
-        : LANE_SPACING;
+    const laneSpacing = (relation) => {
+        if (relation.label === null && !relation.technology)
+            return LANE_SPACING;
+        const pill = sizing.relationPill(relation).scale;
+        return (pill.relationLabelHeight +
+            (relation.technology ? Math.round(technologySize(pill.relationLabel) * 1.25) : 0) +
+            4);
+    };
     /** Labels placed by the layout, which may slide along their connectors to stay clear. */
     const movable = [];
     // Named ports and compass sides with a position are points of the box.
@@ -1155,10 +1605,10 @@ function layoutDrawing(compilation, diagram, options = {}) {
         else {
             points = shapeRoute(kind, anchors.points, { first: anchors.points[0], last: anchors.points[anchors.points.length - 1], via }, anchors.fromSide, anchors.toSide);
         }
-        // The target's head is the style's or the theme's; the source's is the style's, else the
-        // target's for a two-way arrow, else none.
-        const endKind = style.arrowhead ?? theme.arrowhead;
-        const startKind = style.arrowtail ?? (relation.twoWay ? endKind : "none");
+        // The target's head is the style's, else none for a line (`--`, `---`), else the theme's; the
+        // source's is the style's, else the target's for a two-way arrow, else none.
+        const endKind = style.arrowhead ?? (relation.heads === "none" ? "none" : theme.arrowhead);
+        const startKind = style.arrowtail ?? (relation.heads === "both" ? endKind : "none");
         const headWidth = (theme.arrowSize * 7) / 8;
         // The labels icon shapes draw beside their ends: a connector passes under its own end's label
         // only straight from the icon and on beyond it, far enough for its head; elsewhere the label
@@ -1261,23 +1711,25 @@ function layoutDrawing(compilation, diagram, options = {}) {
             const offset = entry ? entry.offset : { x: 0, y: 0 };
             const center = pointAlong(curve ? line : drawn, at);
             const text = relation.label ?? "";
-            const textWidth = text === "" ? 0 : metrics.width(text, "body", 500, scale.relationLabel);
+            const pill = sizing.relationPill(relation);
+            const pillScale = pill.scale;
+            const textWidth = text === "" ? 0 : metrics.width(text, pill.font, pill.weight, pillScale.relationLabel);
             const iconWidth = icon ? icon.size + (text === "" ? 0 : icon.gap) : 0;
             // C4 relations show their technology on a second, smaller line.
-            const techSize = technologySize(scale.relationLabel);
-            const techWidth = technology ? metrics.width(technology, "body", 400, techSize) : 0;
-            const width = Math.max(textWidth + iconWidth, techWidth) + scale.relationLabelPadding;
-            const height = scale.relationLabelHeight + (technology ? Math.round(techSize * 1.25) : 0);
+            const techSize = technologySize(pillScale.relationLabel);
+            const techWidth = technology ? metrics.width(technology, pill.font, 400, techSize) : 0;
+            const width = Math.max(textWidth + iconWidth, techWidth) + pillScale.relationLabelPadding;
+            const height = pillScale.relationLabelHeight + (technology ? Math.round(techSize * 1.25) : 0);
             if (!entry) {
                 movable.push({
                     index,
                     along: curve ? line : drawn,
-                    width: Math.max(width, scale.relationLabelHeight),
+                    width: Math.max(width, pillScale.relationLabelHeight),
                     height,
                 });
             }
             label = {
-                box: boxFromCenter({ x: center.x + offset.x, y: center.y + offset.y }, Math.max(width, scale.relationLabelHeight), height),
+                box: boxFromCenter({ x: center.x + offset.x, y: center.y + offset.y }, Math.max(width, pillScale.relationLabelHeight), height),
                 text,
                 technology,
             };
@@ -1291,9 +1743,97 @@ function layoutDrawing(compilation, diagram, options = {}) {
         };
         return { relation, line, start: startHead, end: endHead, label, curve, connector };
     });
+    // Free lines: connectors without ends, routed through their own points (`polyline` unless a
+    // route kind is written; `auto` is `polyline`, there being no box to anchor to), with no lanes,
+    // detours or gaps, their heads `none` unless written, and a pill as a relation's.
+    const lineGeometry = new Map();
+    for (const element of freeLines) {
+        const anchors = lineAnchors.get(element.id);
+        const style = styles.element(element);
+        const written = style.routing ?? "polyline";
+        const kind = written === "auto" ? "polyline" : written;
+        const points = kind === "orthogonal" ? orthogonalThrough(anchors) : [...anchors];
+        const last = points.length - 1;
+        const fromSide = sideToward(points[0], points[Math.min(1, last)]);
+        const toSide = sideToward(points[last], points[Math.max(0, last - 1)]);
+        const endKind = style.arrowhead ?? "none";
+        const startKind = style.arrowtail ?? "none";
+        const headWidth = (theme.arrowSize * 7) / 8;
+        let line;
+        let start;
+        let end;
+        let curve;
+        if (kind === "bezier" && points.length > 1) {
+            const approach = (tip, side) => {
+                const normal = sideNormal(side);
+                return [{ x: tip.x + normal.x * 10, y: tip.y + normal.y * 10 }, tip];
+            };
+            const atEnd = endMarker(approach(points[last], toSide), endKind, theme.arrowSize, headWidth);
+            const atStart = endMarker(approach(points[0], fromSide), startKind, theme.arrowSize, headWidth);
+            const bezier = bezierThrough(points, fromSide, toSide, atEnd.line[atEnd.line.length - 1], atStart.line[atStart.line.length - 1]);
+            line = bezier.samples;
+            start = atStart.parts;
+            end = atEnd.parts;
+            curve = bezier.d;
+        }
+        else {
+            const ends = relationEnds(points, startKind, endKind, theme.arrowSize, headWidth);
+            line =
+                (style.corners ?? theme.corners) === "rounded"
+                    ? roundCorners(ends.line, CORNER_RADIUS)
+                    : ends.line;
+            start = ends.start;
+            end = ends.end;
+        }
+        let label;
+        const icon = sizing.lineIcon(element);
+        if (element.label !== "" || icon) {
+            const entry = labels.get(element.id);
+            const at = entry ? entry.at / 100 : 0.5;
+            const offset = entry ? entry.offset : { x: 0, y: 0 };
+            const center = pointAlong(curve ? line : points, at);
+            const text = element.label;
+            const pill = sizing.linePill(element);
+            const textWidth = text === "" ? 0 : metrics.width(text, pill.font, pill.weight, pill.scale.relationLabel);
+            const iconWidth = icon ? icon.size + (text === "" ? 0 : icon.gap) : 0;
+            const width = textWidth + iconWidth + pill.scale.relationLabelPadding;
+            label = {
+                box: boxFromCenter({ x: center.x + offset.x, y: center.y + offset.y }, Math.max(width, pill.scale.relationLabelHeight), pill.scale.relationLabelHeight),
+                text,
+            };
+        }
+        lineGeometry.set(element.id, {
+            element,
+            line,
+            start,
+            end,
+            label,
+            curve,
+            connector: { points, line, fromSide, toSide, via: anchors.slice(1, -1) },
+        });
+    }
+    // Pen strokes: their heads along their end segments, none unless written, which the stroke
+    // stops at as a line does; a dot has none. A point written twice in a row makes no segment, so
+    // the heads and the cut are taken from the stroke without repeats.
+    const penDrawing = new Map();
+    for (const pen of freePens) {
+        const { points, width } = penGeometry.get(pen.id);
+        const style = styles.element(pen);
+        const endKind = style.arrowhead ?? "none";
+        const startKind = style.arrowtail ?? "none";
+        if (isDot(points) || (endKind === "none" && startKind === "none")) {
+            penDrawing.set(pen.id, { line: points, start: [], end: [] });
+            continue;
+        }
+        const length = penHeadLength(theme.arrowSize, width);
+        const ends = relationEnds(withoutRepeats(points), startKind, endKind, length, (length * 7) / 8);
+        penDrawing.set(pen.id, { line: ends.line, start: ends.start, end: ends.end });
+    }
     // Every element's box with the label it draws outside it, in diagram coordinates.
     const extents = new Map([...boxes].map(([id, box]) => [id, extentAt(id, box)]));
-    placeLabels(relationGeometry, movable, labelObstacles(diagram, extents, sizing));
+    // A line's box is no obstacle: labels may sit beside it as beside any connector; nor is a pen's.
+    const shapeExtents = new Map([...extents].filter(([id]) => !lineGeometry.has(id) && !penGeometry.has(id)));
+    placeLabels(relationGeometry, movable, labelObstacles(diagram, shapeExtents, sizing));
     const elementLabels = new Map();
     for (const [id, box] of boxes) {
         const label = labelAt(id, box);
@@ -1306,12 +1846,17 @@ function layoutDrawing(compilation, diagram, options = {}) {
     for (const [id, box] of boxes)
         if (!rotations.has(id))
             checked.set(id, box);
+    // Lines and pen strokes cross boxes by design: they take no part in the composition checks.
+    for (const id of lineGeometry.keys())
+        checked.delete(id);
+    for (const id of penGeometry.keys())
+        checked.delete(id);
     diagnostics.push(...checkComposition(diagram, checked, relationGeometry.map((g) => ({
         relation: g.relation,
         points: g.line,
         curved: g.curve !== undefined,
         label: g.label?.box,
-    })), explicitGroups, theme, (group) => sizing.untitled(group), outlines, elementLabels));
+    })), explicitGroups, theme, (group) => sizing.untitled(group), outlines, elementLabels, (group) => sizing.headerOf(group)));
     const everything = [...extents.values()];
     for (const geometry of relationGeometry) {
         for (const p of [
@@ -1323,6 +1868,17 @@ function layoutDrawing(compilation, diagram, options = {}) {
         if (geometry.label)
             everything.push(geometry.label.box);
     }
+    for (const geometry of lineGeometry.values()) {
+        for (const p of [...markerPoints(geometry.start), ...markerPoints(geometry.end)])
+            everything.push({ x: p.x, y: p.y, width: 0, height: 0 });
+        if (geometry.label)
+            everything.push(geometry.label.box);
+    }
+    // A pen's box holds its stroke; its heads may reach beyond it.
+    for (const drawing of penDrawing.values()) {
+        for (const p of [...markerPoints(drawing.start), ...markerPoints(drawing.end)])
+            everything.push({ x: p.x, y: p.y, width: 0, height: 0 });
+    }
     const bounds = unionBoxes(everything) ?? { x: 0, y: 0, width: 0, height: 0 };
     const margin = theme.margin;
     const contentWidth = Math.ceil(bounds.width + 2 * margin);
@@ -1349,7 +1905,7 @@ function layoutDrawing(compilation, diagram, options = {}) {
     const shiftPoint = (p) => ({ x: p.x + dx, y: p.y + dy });
     const items = [];
     const gradients = [];
-    const emitter = new Emitter(theme, scale, styles, metrics, sizing);
+    const emitter = new Emitter(theme, scale, styles, metrics, sizing, free, diagram.elementsById, diagram.id);
     const drawRelation = (geometry) => emitter.relation(geometry.relation, geometry.line.map(shiftPoint), shiftMarker(geometry.start, shiftPoint), shiftMarker(geometry.end, shiftPoint), geometry.label
         ? {
             box: shift(geometry.label.box),
@@ -1367,6 +1923,49 @@ function layoutDrawing(compilation, diagram, options = {}) {
         const c = boxCenter(box);
         return { ...group, transform: `rotate(${round(degrees)} ${round(c.x)} ${round(c.y)})` };
     };
+    /**
+     * An attached note's leader: a dotted polyline from where the segment between the two boxes'
+     * centres leaves the note to where it enters its element's outline (turned with the element),
+     * the last item of the note's group. None when the target is not drawn or the boxes overlap. A
+     * turned note's group turns its items, so the leader is written in the note's own frame.
+     */
+    const withLeader = (group, element, box) => {
+        const targetId = element.attachedTo;
+        const target = targetId === null ? undefined : diagram.elementsById.get(targetId);
+        const placed = target && target.id !== element.id ? boxes.get(target.id) : undefined;
+        if (!target || !placed)
+            return group;
+        const targetBox = shift(placed);
+        const overlaps = box.x < targetBox.x + targetBox.width &&
+            targetBox.x < box.x + box.width &&
+            box.y < targetBox.y + targetBox.height &&
+            targetBox.y < box.y + box.height;
+        if (overlaps)
+            return group;
+        const own = rotations.get(element.id) ?? 0;
+        const turnedTarget = rotations.get(target.id) ?? 0;
+        const shapeOf = (e) => e.kind === "tag" ? "pill" : e.kind === "group" ? "rectangle" : sizing.shapeOf(e);
+        const centres = { note: boxCenter(box), target: boxCenter(targetBox) };
+        const from = boundaryToward("rectangle", box, own, centres.target);
+        const to = boundaryToward(shapeOf(target), targetBox, turnedTarget, centres.note, sizing.shapeOptions(target));
+        const local = (p) => (own === 0 ? p : turnPoint(p, centres.note, -own));
+        const leader = {
+            kind: "polyline",
+            points: [from, to].map(local).map((p) => ({ x: round(p.x), y: round(p.y) })),
+            stroke: theme.muted,
+            strokeWidth: theme.strokeWidth,
+            dashed: "dotted",
+            className: "leader",
+        };
+        return { ...group, items: [...group.items, leader] };
+    };
+    /** An element's drawing, turned when it is, with the leader of a note attached to something. */
+    const elementGroup = (element, box) => {
+        const drawn = turn(emitter.element(element, box), box);
+        return element.kind === "note" && element.attachedTo !== null
+            ? withLeader(drawn, element, box)
+            : drawn;
+    };
     if (free) {
         const byKey = new Map(relationGeometry.map((g) => [g.relation.key, g]));
         for (const paintable of paintOrder(diagram)) {
@@ -1377,9 +1976,19 @@ function layoutDrawing(compilation, diagram, options = {}) {
                 continue;
             }
             const box = shift(boxes.get(paintable.element.id));
+            const line = lineGeometry.get(paintable.element.id);
+            if (line) {
+                items.push(onLayer(emitter.line(line.element, box, line.line.map(shiftPoint), shiftMarker(line.start, shiftPoint), shiftMarker(line.end, shiftPoint), line.label ? { box: shift(line.label.box), text: line.label.text } : undefined, line.curve ? translatePath(line.curve, dx, dy) : undefined), paintable.element.layer));
+                continue;
+            }
+            const pen = penDrawing.get(paintable.element.id);
+            if (pen) {
+                items.push(onLayer(emitter.pen(paintable.element, box, penGeometry.get(paintable.element.id).points.map(shiftPoint), pen.line.map(shiftPoint), shiftMarker(pen.start, shiftPoint), shiftMarker(pen.end, shiftPoint)), paintable.element.layer));
+                continue;
+            }
             items.push(onLayer(paintable.kind === "group"
                 ? emitter.group(paintable.element, box)
-                : turn(emitter.element(paintable.element, box), box), paintable.element.layer));
+                : elementGroup(paintable.element, box), paintable.element.layer));
         }
     }
     else {
@@ -1402,7 +2011,7 @@ function layoutDrawing(compilation, diagram, options = {}) {
                 if (element.kind === "group" || element.kind === "tag" || indexOf(element.layer) !== layer)
                     continue;
                 const box = shift(boxes.get(element.id));
-                items.push(onLayer(turn(emitter.element(element, box), box), element.layer));
+                items.push(onLayer(elementGroup(element, box), element.layer));
             }
             for (const geometry of relationGeometry) {
                 if (indexOf(geometry.relation.layer) !== layer)
@@ -1442,6 +2051,7 @@ function layoutDrawing(compilation, diagram, options = {}) {
         gradients: [...gradients, ...emitter.painter.gradients],
         patterns: emitter.patterns,
         items,
+        ...(theme.sketch !== "none" ? { sketch: theme.sketch } : {}),
     };
     const labelBoxes = new Map();
     const connectors = new Map();
@@ -1450,6 +2060,28 @@ function layoutDrawing(compilation, diagram, options = {}) {
             labelBoxes.set(geometry.relation.key, geometry.label.box);
         connectors.set(geometry.relation.key, geometry.connector);
     }
+    // Free lines by their id, beside the relations: their pill and their route.
+    for (const [id, geometry] of lineGeometry) {
+        if (geometry.label)
+            labelBoxes.set(id, geometry.label.box);
+        connectors.set(id, geometry.connector);
+    }
+    // Stickies: the room their text is wrapped in and the size it is drawn at, for editors.
+    const stickies = new Map();
+    for (const element of diagram.elements) {
+        const box = element.kind === "sticky" ? boxes.get(element.id) : undefined;
+        if (box)
+            stickies.set(element.id, sizing.stickyPlace(element, box));
+    }
+    // Lists: how they arrange their children and where the first one starts, for editors.
+    const lists = new Map();
+    for (const [id, list] of frames?.lists ?? []) {
+        const box = boxes.get(id);
+        if (!box)
+            continue;
+        const header = sizing.headerOf(diagram.elementsById.get(id));
+        lists.set(id, { ...list, origin: { x: box.x + theme.groupPadding, y: box.y + header } });
+    }
     return {
         scene,
         diagnostics,
@@ -1457,6 +2089,9 @@ function layoutDrawing(compilation, diagram, options = {}) {
         offset: { x: dx, y: dy },
         labels: labelBoxes,
         connectors,
+        pens: penGeometry,
+        stickies,
+        lists,
         origins,
         theme,
         shapes,
@@ -1541,6 +2176,14 @@ function ownLabelCrossings(points, labels, rooms, straight) {
     const route = beyondOwnLabels(points, labels, rooms, straight);
     return labels.filter((label) => label && crossedBoxes(route, [label.box]).length > 0).length;
 }
+/** Points rounded as the scene writes them. */
+function roundedPoints(list) {
+    return list.map((p) => ({ x: round(p.x), y: round(p.y) }));
+}
+/** A circle of radius `r` about (`cx`, `cy`), as path data. */
+function circlePath(cx, cy, r) {
+    return `M${round(cx - r)} ${cy}a${r} ${r} 0 1 0 ${round(2 * r)} 0a${r} ${r} 0 1 0 ${round(-2 * r)} 0Z`;
+}
 function round(value) {
     return Math.round(value * 100) / 100;
 }
@@ -1602,13 +2245,16 @@ function translatePath(d, dx, dy) {
     });
 }
 /** The size of a relation's label pill without its icon, or null when it has no label. */
-function labelSize(relation, metrics, scale) {
+function labelSize(relation, metrics, pill) {
     const technology = relation.technology ? `[${relation.technology}]` : null;
     if (relation.label === null && !technology)
         return null;
+    const scale = pill.scale;
     const techSize = technologySize(scale.relationLabel);
-    const text = relation.label ? metrics.width(relation.label, "body", 500, scale.relationLabel) : 0;
-    const tech = technology ? metrics.width(technology, "body", 400, techSize) : 0;
+    const text = relation.label
+        ? metrics.width(relation.label, pill.font, pill.weight, scale.relationLabel)
+        : 0;
+    const tech = technology ? metrics.width(technology, pill.font, 400, techSize) : 0;
     return {
         width: Math.ceil(Math.max(text, tech) + scale.relationLabelPadding),
         height: scale.relationLabelHeight + (technology ? Math.round(techSize * 1.25) : 0),
@@ -1635,8 +2281,14 @@ const FLOW_SIDES = {
  * the routes meet the icon and not its label: on the side the flow leaves by for a source and
  * enters by for a target, or the other way round for the relations in `mirrored`, which run
  * against the flow.
+ *
+ * A list group is a node of its arranged size in `sizes`, and the engine never sees what it
+ * holds: `holders` gives everything inside a list the outermost list around it, which the
+ * relations and notes attached to what the list holds end on instead, with no port.
  */
-function arrangeRequest(diagram, sizes, fixedPlaces, routes, theme, headerOf, labelOf = () => null, leftOut = new Set(), minimums = new Map(), iconExtents = new Map(), mirrored = new Set()) {
+function arrangeRequest(diagram, sizes, fixedPlaces, routes, theme, headerOf, labelOf = () => null, leftOut = new Set(), minimums = new Map(), iconExtents = new Map(), mirrored = new Set(), holders = new Map()) {
+    /** The box the engine arranges for an element: the outermost list holding it, or its own. */
+    const boxOf = (id) => holders.get(id) ?? id;
     /** A position along a side of an element's box, as a position along its extent's side. */
     const along = (id, side, position) => {
         const known = iconExtents.get(id);
@@ -1671,19 +2323,26 @@ function arrangeRequest(diagram, sizes, fixedPlaces, routes, theme, headerOf, la
         return id;
     };
     const edges = diagram.relations.flatMap((relation) => {
-        if (leftOut.has(relation.from) || leftOut.has(relation.to))
+        const source = boxOf(relation.from);
+        const target = boxOf(relation.to);
+        if (leftOut.has(source) || leftOut.has(target))
+            return [];
+        // A relation within one list is drawn between the places the list gives.
+        if (source === target && (holders.has(relation.from) || holders.has(relation.to)))
             return [];
         const route = routes.get(relation.key);
-        const port = (end, which) => end && end.port !== "auto"
-            ? end.named
-                ? end.port
-                : enginePort(end)
-            : iconPort(relation, which);
+        const port = (end, which) => holders.has(relation[which])
+            ? null
+            : end && end.port !== "auto"
+                ? end.named
+                    ? end.port
+                    : enginePort(end)
+                : iconPort(relation, which);
         return [
             {
                 id: relation.key,
-                source: relation.from,
-                target: relation.to,
+                source,
+                target,
                 sourcePort: port(route?.from, "from"),
                 targetPort: port(route?.to, "to"),
                 primary: relation.line === "solid",
@@ -1691,8 +2350,48 @@ function arrangeRequest(diagram, sizes, fixedPlaces, routes, theme, headerOf, la
             },
         ];
     });
+    // An attached note is arranged beside its element as a dashed relation from the element would
+    // be (the element first, so the note follows it in the flow's direction): in `auto`, and for a
+    // note that has no place in `assisted`. The leader is no relation, so the route the engine
+    // answers for this edge is never read.
+    const attached = diagram.elements.flatMap((note) => {
+        const target = note.attachedTo;
+        if (note.kind !== "note" || target === null || target === note.id)
+            return [];
+        // A note in a list is placed by it; a note on what a list holds is arranged beside the list.
+        const source = boxOf(target);
+        if (holders.has(note.id) || fixedPlaces.has(note.id))
+            return [];
+        if (leftOut.has(note.id) || leftOut.has(source))
+            return [];
+        const element = diagram.elementsById.get(target);
+        if (!element ||
+            element.kind === "line" ||
+            element.kind === "pen" ||
+            !sizes.has(source) ||
+            !sizes.has(note.id)) {
+            return [];
+        }
+        return [
+            {
+                id: `attach${note.id}`,
+                source,
+                target: note.id,
+                sourcePort: null,
+                targetPort: null,
+                primary: false,
+                label: null,
+            },
+        ];
+    });
+    edges.push(...attached);
+    // Free lines and pens are drawn where their points are written: the engine never moves them.
+    // A list is a node; what it holds is not.
     const nodes = diagram.elements
-        .filter((e) => e.kind !== "group")
+        .filter((e) => (e.kind === "group" ? isList(e) && !leftOut.has(e.id) : true) &&
+        e.kind !== "line" &&
+        e.kind !== "pen" &&
+        !holders.has(e.id))
         .map((element) => {
         const ports = element.ports.map((p) => ({
             id: p.name,
@@ -1725,7 +2424,7 @@ function arrangeRequest(diagram, sizes, fixedPlaces, routes, theme, headerOf, la
         };
     });
     const groups = diagram.elements
-        .filter((e) => e.kind === "group" && !leftOut.has(e.id))
+        .filter((e) => e.kind === "group" && !leftOut.has(e.id) && !isList(e) && !holders.has(e.id))
         .map((group) => {
         const minimum = minimums.get(group.id);
         return {
@@ -1793,7 +2492,8 @@ function routesLength(arrangement) {
  * `assisted` positions: placed elements keep their place. Each other element keeps its offset in
  * the arrangement from the placed element nearest to it there, and is then pushed away from that
  * element, along the layout direction, until it no longer overlaps a box already positioned. Boxes
- * are compared with what they draw beyond them, `extentOf` (the label of an icon shape).
+ * are compared with what they draw beyond them, `extentOf` (the label of an icon shape). `sizes`
+ * holds the boxes to position: the leaves, and the lists, which are arranged as boxes.
  */
 function placeAround(diagram, arrangement, places, sizes, centers, fixed, extentOf = (_id, box) => box) {
     const direction = diagram.properties.direction;
@@ -1801,7 +2501,7 @@ function placeAround(diagram, arrangement, places, sizes, centers, fixed, extent
     const anchors = [...places.keys()].filter((id) => sizes.has(id) && arrangement.centers.has(id));
     const positioned = [];
     for (const element of diagram.elements) {
-        if (element.kind === "group" || !places.has(element.id))
+        if (!sizes.has(element.id) || !places.has(element.id))
             continue;
         const size = sizes.get(element.id);
         centers.set(element.id, places.get(element.id));
@@ -1809,7 +2509,7 @@ function placeAround(diagram, arrangement, places, sizes, centers, fixed, extent
         positioned.push(extentOf(element.id, boxFromCenter(places.get(element.id), size.width, size.height)));
     }
     for (const element of diagram.elements) {
-        if (element.kind === "group" || places.has(element.id))
+        if (!sizes.has(element.id) || places.has(element.id))
             continue;
         const size = sizes.get(element.id);
         const arranged = arrangement.centers.get(element.id) ?? { x: 0, y: 0 };
@@ -1977,7 +2677,8 @@ function parallelLanes(diagram, routes, spacingOf = () => LANE_SPACING) {
 }
 /**
  * The canvas for the diagram's `preset` or `canvas`, reporting `layout.too-large` when the content
- * canvas exceeds what the preset holds. Nothing is clipped: a fixed canvas grows to fit.
+ * canvas exceeds what the preset holds. Nothing is clipped: a fixed canvas grows to fit. A board
+ * (`preset board`) is the content canvas whatever its size: a whiteboard grows as it is drawn on.
  */
 export function canvasSize(diagram, width, height, lines, diagnostics) {
     const { preset, canvas } = diagram.properties;
@@ -1987,8 +2688,15 @@ export function canvasSize(diagram, width, height, lines, diagnostics) {
         severity: "warning",
         message,
         range: propertyRange(diagram, keyword, lines) ?? diagram.idRange,
-        hints: [words.hints.tooLarge],
+        // A whiteboard's preset is the board's, which grows with what it holds: a preset or a
+        // written canvas can give way to it.
+        hints: [
+            words.hints.tooLarge,
+            keyword === "preset" ? words.hints.boardPreset : words.hints.boardCanvas,
+        ],
     });
+    if (preset === "board")
+        return { width, height };
     if (preset === "document") {
         if (width > DOCUMENT_MAX_WIDTH) {
             tooLarge("preset", words.diagnostics.tooWideForDocument(width, DOCUMENT_MAX_WIDTH));
@@ -2061,6 +2769,10 @@ class Sizing {
     centredSizes = new Map();
     centredLayouts = new Map();
     centredLays = new Map();
+    /** The centre of each aligned text block, by element and box. */
+    textCenters = new Map();
+    /** How the text of each sticky is drawn, by element and card size. */
+    stickyTexts = new Map();
     constructor(theme, scale, metrics, styles, icons, images, 
     /** The written `size` of each element that has one. */
     written = new Map()) {
@@ -2078,12 +2790,48 @@ class Sizing {
      * times the size apart.
      */
     labelFont(element) {
-        const free = element.kind === "box" || element.kind === "text";
-        const style = free ? this.styles.element(element) : {};
+        const style = this.styles.element(element);
         const size = style.fontSize ??
             (element.kind === "text" ? Math.round(this.scale.label * 1.6) : this.scale.label);
         const weight = style.fontWeight ?? this.scale.labelWeight;
-        return { size, weight, line: Math.round(size * 1.25) };
+        return { size, weight, line: Math.round(size * 1.25), font: textFont(style.font) };
+    }
+    /**
+     * The description lines of an element: the theme's description size and line, or, when its
+     * style writes `fontSize`, the description of that label size at the theme's ratio, in the
+     * label's font at weight 400.
+     */
+    descriptionFont(element) {
+        const style = this.styles.element(element);
+        const scale = writtenScale(this.theme, this.scale, "label", style.fontSize);
+        return { size: scale.description, line: scale.descriptionLine, font: textFont(style.font) };
+    }
+    /** The title of a group: the theme's group title size at the label weight, or the style's. */
+    groupFont(group) {
+        const style = this.styles.element(group);
+        const size = style.fontSize ?? this.scale.groupTitle;
+        return {
+            size,
+            weight: style.fontWeight ?? this.scale.labelWeight,
+            line: Math.round(size * 1.25),
+            font: textFont(style.font),
+        };
+    }
+    /** A tag's scale and face: its pill at the written size, in the mono font unless styled. */
+    tagText(element) {
+        const style = this.styles.element(element);
+        return {
+            scale: writtenScale(this.theme, this.scale, "tag", style.fontSize),
+            face: { font: textFont(style.font, "mono"), weight: style.fontWeight ?? 500 },
+        };
+    }
+    /** The text of a relation's label pill. */
+    relationPill(relation) {
+        return pillText(this.theme, this.scale, this.styles.relation(relation));
+    }
+    /** The text of a free line's label pill. */
+    linePill(element) {
+        return pillText(this.theme, this.scale, this.styles.element(element));
     }
     /**
      * The drawn shape of a box-like element: its kind's (data stores are cylinders, decisions
@@ -2103,6 +2851,9 @@ class Sizing {
                 return known(this.styles.element(element).shape) ?? "rounded";
             case "box":
                 return known(this.styles.element(element).shape) ?? known(element.shape) ?? "rounded";
+            case "sticky":
+                // A card: a rectangle with the corners of its `radius` (see `shapeOptions`).
+                return "rectangle";
             default:
                 return "rounded";
         }
@@ -2115,6 +2866,8 @@ class Sizing {
         const shape = this.shapeOf(element);
         // A written radius (the element's style, a class or a rule) rounds every cornered shape.
         const written = CORNERED_SHAPES.has(shape) ? this.styles.element(element).radius : undefined;
+        if (element.kind === "sticky")
+            return { radius: written ?? STICKY_RADIUS };
         if (shape === "agent")
             return { radius: written ?? this.theme.radius * 1.5 };
         if (shape === "person") {
@@ -2122,6 +2875,62 @@ class Sizing {
         }
         return written === undefined ? {} : { radius: written };
     }
+    /**
+     * Where `verticalAlign` moves the text block of an element: `top` or `bottom` on a free box whose
+     * shape has a text band and whose icon is not centred (its band sits at `labelPosition`), else
+     * undefined, and the block stays at the shape's text centre.
+     */
+    verticalAlignOf(element) {
+        if (element.kind !== "box")
+            return undefined;
+        const written = this.styles.element(element).verticalAlign;
+        if (written !== "top" && written !== "bottom")
+            return undefined;
+        if (FIXED_TEXT_SHAPES.has(this.shapeOf(element)) || this.centred(element))
+            return undefined;
+        return written;
+    }
+    /**
+     * The centre of an element's text block drawn in `box`: the shape's text centre, or with
+     * `verticalAlign top` the first row band of the shape's text band, `padding` below its top edge,
+     * whose span about the centre holds the block with the padding on each side (or as much as the
+     * middle does), searched pixel by pixel towards the middle; `bottom` the same from the bottom
+     * edge. A block that no band holds before the middle stays at the middle.
+     */
+    textCenter(element, box) {
+        const shape = this.shapeOf(element);
+        const options = this.shapeOptions(element);
+        const center = shapeTextCenter(shape, box, options);
+        const align = this.verticalAlignOf(element);
+        if (!align)
+            return center;
+        const key = `${element.id}\u0000${box.x}\u0000${box.y}\u0000${box.width}\u0000${box.height}`;
+        const known = this.textCenters.get(key);
+        if (known)
+            return known;
+        const column = this.textColumn(element);
+        const spanOf = shapeTextSpanner(shape, box, options);
+        const band = shapeTextBand(shape, box, options);
+        const padding = this.theme.padding;
+        const widthAt = (y) => {
+            const span = spanOf(y + column.slots.top, y + column.slots.bottom, center.x);
+            return span ? 2 * Math.max(0, Math.min(center.x - span[0], span[1] - center.x)) : -1;
+        };
+        const need = Math.min(column.width + 2 * padding, Math.max(0, widthAt(center.y)));
+        const direction = align === "top" ? 1 : -1;
+        const start = align === "top"
+            ? band.top + padding - column.slots.top
+            : band.bottom - padding - column.slots.bottom;
+        let found = center;
+        for (let y = start; (center.y - y) * direction > 1e-9; y += direction) {
+            if (widthAt(y) >= need - 1e-9) {
+                found = { x: center.x, y };
+                break;
+            }
+        }
+        this.textCenters.set(key, found);
+        return found;
+    }
     /**
      * The rows the text column of a box-like element covers, from its text centre: the slots of its
      * lines and icon, and the same rows with room for the glyphs' descenders. `width` is the widest
@@ -2134,9 +2943,10 @@ class Sizing {
     columnWith(element, icon) {
         const block = this.blockWith(element, icon);
         const font = this.labelFont(element);
+        const description = this.descriptionFont(element);
         const lines = [
             ...block.labelOffsets.map((y) => ({ y, size: font.size })),
-            ...block.descriptionOffsets.map((y) => ({ y, size: this.scale.description })),
+            ...block.descriptionOffsets.map((y) => ({ y, size: description.size })),
         ];
         let top = Math.min(...lines.map((l) => l.y - l.size / 2));
         let bottom = Math.max(...lines.map((l) => l.y + l.size / 2));
@@ -2171,12 +2981,13 @@ class Sizing {
      * aligned text may lie. The glyph rows count as clipped only where the shape reaches more than
      * `ROW_TOLERANCE` into them.
      */
-    textArea(element, box, rows, column = this.textColumn(element), centred = true) {
+    textArea(element, box, rows, column = this.textColumn(element), centred = true, aligned = true) {
         const shape = this.shapeOf(element);
         if (FULL_WIDTH_TEXT.has(shape))
             return box;
         const options = this.shapeOptions(element);
-        const center = shapeTextCenter(shape, box, options);
+        // Where the block is drawn; the sizes of boxes are found about the middle.
+        const center = aligned ? this.textCenter(element, box) : shapeTextCenter(shape, box, options);
         const top = center.y + column[rows].top;
         const bottom = center.y + column[rows].bottom;
         const inset = rows === "glyphs" ? Math.min(ROW_TOLERANCE, (bottom - top) / 2) : 0;
@@ -2214,7 +3025,8 @@ class Sizing {
     widthAt(element, height, margin, rows) {
         const column = this.textColumn(element);
         const need = column.width + 2 * margin;
-        const fits = (width) => this.textArea(element, { x: 0, y: 0, width, height }, rows, column).width >= need - 1e-9;
+        const fits = (width) => this.textArea(element, { x: 0, y: 0, width, height }, rows, column, true, false).width >=
+            need - 1e-9;
         let low = Math.max(1, need);
         if (fits(low))
             return Math.ceil(low - ROUNDING);
@@ -2241,14 +3053,151 @@ class Sizing {
     headerOf(group) {
         return groupHeaderOf(group, this.styles.element(group), this.theme);
     }
+    /** The vertical centre of a group's title, from the group's top edge, inside its header. */
+    titleOffset(group) {
+        const header = this.headerOf(group);
+        // A larger title keeps the theme's band below it and its 45 % above.
+        return header === this.theme.groupHeader
+            ? this.theme.groupHeader * 0.45
+            : header - this.theme.groupHeader * 0.55;
+    }
     /** Horizontal alignment of a box or text label. */
+    /**
+     * A note's font: the theme's note size at weight 400, or a free note's `fontSize` and
+     * `fontWeight`; its lines are as far apart as the note scale's ratio of line to size.
+     */
+    noteFont(element) {
+        const style = this.styles.element(element);
+        const size = style.fontSize ?? this.scale.note;
+        return {
+            size,
+            weight: style.fontWeight ?? 400,
+            line: Math.round((size * this.scale.noteLine) / this.scale.note),
+            font: textFont(style.font),
+        };
+    }
     alignOf(element) {
-        if (element.kind === "text")
+        if (element.kind === "text" || element.kind === "note") {
             return this.styles.element(element).textAlign ?? "left";
-        if (element.kind === "box")
+        }
+        if (element.kind === "box" || element.kind === "sticky") {
             return this.styles.element(element).textAlign ?? "center";
+        }
         return "center";
     }
+    /**
+     * How a sticky's text is drawn on a card of `size`, its area relative to the card's top left
+     * corner: wrapped at the width of the card inside the `padding` (right of its icon), at
+     * `fontSize` or 1.2 times the label size, stepped down by 1 until the lines fit the area or the
+     * size reaches `STICKY_MIN_FONT_SIZE`; lines 1.25 times the size apart, aligned by `textAlign`
+     * (`center`) and `verticalAlign` (`middle`). A blank text always fits.
+     */
+    stickyText(element, size) {
+        const key = `${element.id}\u0000${size.width}\u0000${size.height}`;
+        const known = this.stickyTexts.get(key);
+        if (known)
+            return known;
+        const style = this.styles.element(element);
+        const weight = style.fontWeight ?? STICKY_FONT_WEIGHT;
+        const face = textFont(style.font);
+        const area = this.stickyArea(element, size);
+        let font = style.fontSize ?? round(this.scale.label * STICKY_FONT_SCALE);
+        let laid = this.stickyLines(element.label, area, font, weight, face);
+        while (!laid.fits && font > STICKY_MIN_FONT_SIZE) {
+            font = Math.max(STICKY_MIN_FONT_SIZE, round(font - 1));
+            laid = this.stickyLines(element.label, area, font, weight, face);
+        }
+        const text = {
+            area,
+            size: font,
+            weight,
+            font: face,
+            line: laid.line,
+            lines: laid.lines,
+            align: this.alignOf(element),
+            verticalAlign: style.verticalAlign ?? "middle",
+            fits: laid.fits,
+        };
+        this.stickyTexts.set(key, text);
+        return text;
+    }
+    /**
+     * The room of a sticky's text on a card of `size`: inside the padding, below the row of its icon,
+     * so that the text keeps the card's whole width and stays centred on it.
+     */
+    stickyArea(element, size) {
+        const padding = this.theme.padding;
+        const icon = this.iconOf(element);
+        const row = icon ? icon.size + icon.gap : 0;
+        return {
+            x: padding,
+            y: padding + row,
+            width: Math.max(0, size.width - 2 * padding),
+            height: Math.max(0, size.height - 2 * padding - row),
+        };
+    }
+    /** A text wrapped at the width of `area` at a font size, and whether its lines fit `area`. */
+    stickyLines(text, area, size, weight, font) {
+        const measure = (line) => this.metrics.width(line, font, weight, size);
+        const lines = wrapLines(text, area.width, measure);
+        const line = round(size * 1.25);
+        const fits = text.trim() === "" ||
+            (lines.length * line <= area.height + 1e-9 &&
+                lines.every((l) => measure(l) <= area.width + 1e-9));
+        return { lines, line, fits };
+    }
+    /**
+     * How a sticky's text is drawn on its card at `box`, the area in the box's coordinates: what
+     * editors that type over the card take.
+     */
+    stickyPlace(element, box) {
+        const text = this.stickyText(element, { width: box.width, height: box.height });
+        return {
+            ...text,
+            area: { ...text.area, x: box.x + text.area.x, y: box.y + text.area.y },
+        };
+    }
+    /**
+     * Reports `layout.text-overflow` on a sticky whose text does not fit a card of `size` even at
+     * its smallest font size, with the smallest card of the same proportions on which it fits at
+     * that size, in whole pixels.
+     */
+    checkSticky(element, size, range, diagnostics) {
+        const text = this.stickyText(element, size);
+        if (text.fits)
+            return;
+        const scaled = (width) => ({
+            width,
+            height: Math.max(1, Math.round((width * size.height) / Math.max(1, size.width))),
+        });
+        const fitsAt = (width) => {
+            const card = scaled(width);
+            return this.stickyLines(element.label, this.stickyArea(element, card), text.size, text.weight, text.font).fits;
+        };
+        let low = Math.max(1, Math.ceil(size.width));
+        let high = low * 2;
+        for (let i = 0; i < 32 && !fitsAt(high); i++) {
+            low = high;
+            high *= 2;
+        }
+        while (high - low > 1) {
+            const middle = Math.floor((low + high) / 2);
+            if (fitsAt(middle))
+                high = middle;
+            else
+                low = middle;
+        }
+        const fit = scaled(high);
+        const words = messages();
+        diagnostics.push({
+            code: "layout.text-overflow",
+            severity: "warning",
+            message: words.diagnostics.stickyOverflow(element.id, size.width, size.height, text.size, fit.width, fit.height),
+            range,
+            hints: [words.hints.textOverflow(element.id, fit.width, fit.height)],
+            data: { ids: [element.id], size: { element: element.id, ...fit } },
+        });
+    }
     /** The inset of a free text or icon drawn with a frame (`fill`, `stroke` or `pattern`). */
     frameInset(element) {
         const style = this.styles.element(element);
@@ -2297,7 +3246,10 @@ class Sizing {
             case "tag":
                 return this.place(style.icon, Math.round(scale.tag * 1.3), "left");
             case "note":
-                return this.place(style.icon, Math.round(scale.note * 1.3), "left");
+                return this.place(style.icon, Math.round(this.noteFont(element).size * 1.3), "left");
+            case "sticky":
+                // At the top left of the card, its `iconSize` or the theme's, the text right of it.
+                return this.place(style.icon, typeof style.iconSize === "number" ? style.iconSize : theme.iconSize, "left");
         }
         const icon = this.elementIcon(element);
         if (!icon)
@@ -2375,7 +3327,7 @@ class Sizing {
         const box = { x: 0, y: 0, ...size };
         if (!this.rowsFit(element, box, slots))
             return false;
-        const area = this.textArea(element, box, "slots", { ...column, slots });
+        const area = this.textArea(element, box, "slots", { ...column, slots }, true, false);
         return area.width >= column.width + 2 * margin - 1e-9;
     }
     /** Whether rows about an element's text centre lie inside the text area of its shape in `box`. */
@@ -2691,6 +3643,10 @@ class Sizing {
     relationIcon(relation) {
         return this.place(this.styles.relation(relation).icon, Math.round(this.scale.relationLabel * 1.3), "left");
     }
+    /** The icon of a free line's pill, as a relation's pill takes it. */
+    lineIcon(line) {
+        return this.place(this.styles.element(line).icon, Math.round(this.scale.relationLabel * 1.3), "left");
+    }
     /**
      * Label and description positions of a box, with the icon above or below them when it sits
      * there. The label is broken at `\n` into lines `line` apart; a one-line label sits where it
@@ -2704,8 +3660,9 @@ class Sizing {
         return this.blockWith(element, undefined);
     }
     blockWith(element, icon) {
-        const scale = this.scale;
         const font = this.labelFont(element);
+        const description = this.descriptionFont(element);
+        const scale = { description: description.size, descriptionLine: description.line };
         const label = font.size;
         const lines = splitLines(element.label).length;
         // How far the first line of the label lies above its last.
@@ -2738,14 +3695,15 @@ class Sizing {
     }
     /** The widest of a box's label and description lines. */
     textWidth(element) {
-        const { metrics, scale } = this;
+        const { metrics } = this;
         const font = this.labelFont(element);
+        const description = this.descriptionFont(element);
         let width = 0;
         for (const line of splitLines(element.label)) {
-            width = Math.max(width, metrics.width(line, "body", font.weight, font.size));
+            width = Math.max(width, metrics.width(line, font.font, font.weight, font.size));
         }
         for (const line of element.description ? splitLines(element.description) : []) {
-            width = Math.max(width, metrics.width(line, "body", 400, scale.description));
+            width = Math.max(width, metrics.width(line, description.font, 400, description.size));
         }
         return width;
     }
@@ -2754,11 +3712,12 @@ class Sizing {
      * default sizes and hints), and the minimum width below which the content touches the edges.
      */
     textNeeds(element) {
-        const { metrics, scale, theme } = this;
+        const { metrics, theme } = this;
         const widest = (entries) => entries.reduce((a, b) => (b.width > a.width ? b : a), { text: "", width: 0 });
+        const description = this.descriptionFont(element);
         const descriptions = (element.description ? splitLines(element.description) : []).map((line) => ({
             text: line,
-            width: metrics.width(line, "body", 400, scale.description),
+            width: metrics.width(line, description.font, 400, description.size),
         }));
         const icon = this.iconOf(element);
         const beside = icon && icon.position === "left" ? icon.size + icon.gap : 0;
@@ -2770,23 +3729,25 @@ class Sizing {
                 const font = this.labelFont(element);
                 const best = widest(splitLines(element.label).map((line) => ({
                     text: line,
-                    width: metrics.width(line, "body", font.weight, font.size),
+                    width: metrics.width(line, font.font, font.weight, font.size),
                 })));
                 const width = Math.ceil(Math.max(best.width, 1) + 2 * this.frameInset(element));
                 return { text: best.text, width, minimum: width };
             }
             case "tag": {
-                const width = metrics.width(element.label, "mono", 500, scale.tag) + beside;
+                const tag = this.tagText(element);
+                const width = metrics.width(element.label, tag.face.font, tag.face.weight, tag.scale.tag) + beside;
                 return {
                     text: element.label,
-                    width: Math.ceil(width + scale.tagPadding),
+                    width: tagPillWidth(metrics, tag.scale, element.label, beside, tag.face),
                     minimum: Math.ceil(width + 2 * MIN_TEXT_MARGIN),
                 };
             }
             case "note": {
+                const font = this.noteFont(element);
                 const best = widest(splitLines(element.label).map((line) => ({
                     text: line,
-                    width: metrics.width(line, "body", 400, scale.note),
+                    width: metrics.width(line, font.font, font.weight, font.size),
                 })));
                 const width = Math.ceil(Math.max(best.width + beside, 1));
                 return { text: best.text, width, minimum: width };
@@ -2795,9 +3756,10 @@ class Sizing {
                 // An untitled group has no text, so no minimum width.
                 if (this.untitled(element))
                     return { text: "", width: 0, minimum: 0 };
+                const font = this.groupFont(element);
                 const title = {
                     text: element.label,
-                    width: metrics.width(element.label, "body", scale.labelWeight, scale.groupTitle) + beside,
+                    width: metrics.width(element.label, font.font, font.weight, font.size) + beside,
                 };
                 const best = widest([title, ...descriptions]);
                 const inset = theme.groupPadding + 4;
@@ -2819,17 +3781,18 @@ class Sizing {
     }
     /** The widest of a box's label and description lines. */
     widestLine(element) {
-        const { metrics, scale } = this;
+        const { metrics } = this;
         const font = this.labelFont(element);
+        const description = this.descriptionFont(element);
         const [first = "", ...rest] = splitLines(element.label);
-        let best = { text: first, width: metrics.width(first, "body", font.weight, font.size) };
+        let best = { text: first, width: metrics.width(first, font.font, font.weight, font.size) };
         for (const line of rest) {
-            const width = metrics.width(line, "body", font.weight, font.size);
+            const width = metrics.width(line, font.font, font.weight, font.size);
             if (width > best.width)
                 best = { text: line, width };
         }
         for (const line of element.description ? splitLines(element.description) : []) {
-            const width = metrics.width(line, "body", 400, scale.description);
+            const width = metrics.width(line, description.font, 400, description.size);
             if (width > best.width)
                 best = { text: line, width };
         }
@@ -2849,14 +3812,20 @@ class Sizing {
     }
     defaultSize(element) {
         const { scale, theme } = this;
+        if (element.kind === "sticky") {
+            // A square that never grows for its text, scaled with the label size.
+            const base = DEFAULT_SIZES.sticky;
+            const factor = theme.labelSize / 13;
+            return { width: Math.round(base.width * factor), height: Math.round(base.height * factor) };
+        }
         const needs = this.textNeeds(element);
         switch (element.kind) {
             case "tag":
-                return { width: needs.width, height: scale.tagHeight };
+                return { width: needs.width, height: this.tagText(element).scale.tagHeight };
             case "note":
                 return {
                     width: needs.width,
-                    height: splitLines(element.label).length * scale.noteLine + 4,
+                    height: splitLines(element.label).length * this.noteFont(element).line + 4,
                 };
             case "text":
                 return {
@@ -3035,20 +4004,54 @@ class Emitter {
     styles;
     metrics;
     sizing;
+    free;
+    elementsById;
+    diagramId;
     patterns = [];
     painter = new IconPainter();
     patternIds = new Map();
     /** The title areas of drawn groups, which connectors pass under. */
     titles = [];
-    constructor(theme, scale, styles, metrics, sizing) {
+    constructor(theme, scale, styles, metrics, sizing, 
+    /** Whether the diagram is free, the only kind whose styles give `opacity`. */
+    free = false, 
+    /** The diagram's elements by id, where the groups around an element are found. */
+    elementsById = new Map(), 
+    /**
+     * The diagram's id, which the ids the scene declares (a sticky's clip) carry: a story frame
+     * that cross-fades two views draws both scenes in one document.
+     */
+    diagramId = "") {
         this.theme = theme;
         this.scale = scale;
         this.styles = styles;
         this.metrics = metrics;
         this.sizing = sizing;
+        this.free = free;
+        this.elementsById = elementsById;
+        this.diagramId = diagramId;
+    }
+    /**
+     * The group of an element, group, line or pen of a free diagram with its style's `opacity`
+     * times that of every group it is in as `styleOpacity`, which renderers multiply with a story's;
+     * unchanged when it is opaque. A free scene is flat, so a group's children are its siblings and
+     * a faded group fades them through their own groups.
+     */
+    faded(group, element) {
+        if (!this.free)
+            return group;
+        const own = (e) => Math.max(0, Math.min(1, this.styles.element(e).opacity ?? 1));
+        let opacity = own(element);
+        for (const id of element.groupPath) {
+            const holder = this.elementsById.get(id);
+            if (holder)
+                opacity *= own(holder);
+        }
+        return opacity >= 1 ? group : { ...group, styleOpacity: opacity };
     }
     text(x, y, text, size, weight, fill, anchor = "middle", font = "body") {
         const baseline = round(this.metrics.baseline(y, font, weight, size));
+        const stack = writtenStack(font);
         return {
             kind: "text",
             x: round(x),
@@ -3057,7 +4060,8 @@ class Emitter {
             text,
             size,
             weight,
-            font,
+            font: fontRole(font),
+            ...(stack !== undefined ? { stack } : {}),
             anchor,
             fill,
         };
@@ -3103,7 +4107,7 @@ class Emitter {
         };
     }
     group(element, box) {
-        return withUrl(withBounds(this.groupItems(element, box), box), element);
+        return this.faded(withUrl(withBounds(this.groupItems(element, box), box), element), element);
     }
     groupItems(element, box) {
         const { theme, scale } = this;
@@ -3116,7 +4120,11 @@ class Emitter {
             return { kind: "group", id: element.id, role: "element", items };
         }
         const inset = theme.groupPadding + 4;
-        const titleY = box.y + theme.groupHeader * 0.45;
+        const font = this.sizing.groupFont(element);
+        const title = this.sizing.titleOffset(element);
+        // The title band grows with a larger title; the description keeps its place under the title.
+        const below = title - theme.groupHeader * 0.45;
+        const titleY = box.y + title;
         const color = style.color ?? theme.ink;
         let titleX = box.x + inset;
         const icon = this.sizing.iconOf(element);
@@ -3124,38 +4132,40 @@ class Emitter {
             items.push(this.icon(icon, titleX + icon.size / 2, titleY, style.iconColor ?? color));
             titleX += icon.size + icon.gap;
         }
-        items.push(this.text(titleX, titleY, element.label, scale.groupTitle, scale.labelWeight, color, "start"));
+        items.push(this.text(titleX, titleY, element.label, font.size, font.weight, color, "start", font.font));
         // The title, and the description under it, are kept clear of connectors.
-        const titleWidth = this.metrics.width(element.label, "body", scale.labelWeight, scale.groupTitle);
+        const titleWidth = this.metrics.width(element.label, font.font, font.weight, font.size);
         const descriptionWidth = element.description
-            ? this.metrics.width(element.description, "body", 400, scale.description)
+            ? this.metrics.width(element.description, font.font, 400, scale.description)
             : 0;
         const right = Math.max(titleX + titleWidth, box.x + inset + descriptionWidth);
         this.titles.push({
             id: element.id,
             box: {
                 x: box.x + inset - TITLE_GAP,
-                y: titleY - scale.groupTitle * 0.75 - TITLE_GAP,
+                y: titleY - font.size * 0.75 - TITLE_GAP,
                 width: right - (box.x + inset) + 2 * TITLE_GAP,
                 height: (element.description
-                    ? box.y + theme.groupHeader * 0.85 + scale.description * 0.6
-                    : titleY + scale.groupTitle * 0.6) -
-                    (titleY - scale.groupTitle * 0.75) +
+                    ? box.y + below + theme.groupHeader * 0.85 + scale.description * 0.6
+                    : titleY + font.size * 0.6) -
+                    (titleY - font.size * 0.75) +
                     2 * TITLE_GAP,
             },
         });
         if (element.description) {
-            items.push(this.text(box.x + inset, box.y + theme.groupHeader * 0.85, element.description, scale.description, 400, style.color ?? theme.muted, "start"));
+            items.push(this.text(box.x + inset, box.y + below + theme.groupHeader * 0.85, element.description, scale.description, 400, style.color ?? theme.muted, "start", font.font));
         }
         return { kind: "group", id: element.id, role: "element", items };
     }
     element(element, box) {
-        return withUrl(withBounds(this.elementItems(element, box), box, this.sizing.innerArea(element, box), this.sizing.outsideLabel(element, box)?.box), element);
+        return this.faded(withUrl(withBounds(this.elementItems(element, box), box, this.sizing.innerArea(element, box), this.sizing.outsideLabel(element, box)?.box), element), element);
     }
     elementItems(element, box) {
         switch (element.kind) {
             case "note":
                 return this.note(element, box);
+            case "sticky":
+                return this.sticky(element, box);
             case "tag":
                 return this.tag(element, box);
             case "text":
@@ -3217,7 +4227,7 @@ class Emitter {
         const anchor = align === "left" ? "start" : align === "right" ? "end" : "middle";
         const top = box.y + box.height / 2 - (lines.length * font.line) / 2;
         lines.forEach((line, i) => {
-            items.push(this.text(x, top + font.line / 2 + i * font.line, line, font.size, font.weight, style.color ?? this.theme.ink, anchor));
+            items.push(this.text(x, top + font.line / 2 + i * font.line, line, font.size, font.weight, style.color ?? this.theme.ink, anchor, font.font));
         });
         return { kind: "group", id: element.id, role: "element", items };
     }
@@ -3340,7 +4350,8 @@ class Emitter {
             this.lines(items, element, x, band.y - column.slots.top, this.sizing.plainBlock(element), align);
             return { kind: "group", id: element.id, role: "element", items };
         }
-        const textCenter = shapeTextCenter(shape, box, this.sizing.shapeOptions(element));
+        // At the shape's text centre, or where `verticalAlign` moves the block.
+        const textCenter = this.sizing.textCenter(element, box);
         const block = this.sizing.textBlock(element);
         // Aligned text keeps the padding inside the shape's text area.
         const area = this.sizing.textArea(element, box, "slots");
@@ -3379,9 +4390,10 @@ class Emitter {
      * anchor's side) about a text centre `y`, with the offsets of `block`.
      */
     lines(items, element, x, y, block, align) {
-        const { theme, scale } = this;
+        const { theme } = this;
         const style = this.styles.element(element);
         const font = this.sizing.labelFont(element);
+        const description = this.sizing.descriptionFont(element);
         const anchor = align === "left"
             ? "start"
             : align === "right"
@@ -3390,11 +4402,11 @@ class Emitter {
                     ? "middle"
                     : align;
         splitLines(element.label).forEach((line, i) => {
-            items.push(this.text(x, y + block.labelOffsets[i], line, font.size, font.weight, style.color ?? theme.ink, anchor));
+            items.push(this.text(x, y + block.labelOffsets[i], line, font.size, font.weight, style.color ?? theme.ink, anchor, font.font));
         });
         const descriptionLines = element.description ? splitLines(element.description) : [];
         descriptionLines.forEach((line, i) => {
-            items.push(this.text(x, y + block.descriptionOffsets[i], line, scale.description, 400, style.color ?? theme.muted, anchor));
+            items.push(this.text(x, y + block.descriptionOffsets[i], line, description.size, 400, style.color ?? theme.muted, anchor, description.font));
         });
     }
     /**
@@ -3422,7 +4434,7 @@ class Emitter {
         return { kind: "group", id: element.id, role: "element", items };
     }
     note(element, box) {
-        const { theme, scale } = this;
+        const { theme } = this;
         const style = this.styles.element(element);
         const items = [];
         if (style.fill || style.stroke || style.pattern) {
@@ -3430,57 +4442,216 @@ class Emitter {
             items.push(outline, ...this.overlay(style, outline));
         }
         const color = style.color ?? theme.muted;
+        const font = this.sizing.noteFont(element);
         const icon = this.sizing.iconOf(element);
         const indent = icon ? icon.size + icon.gap : 0;
         if (icon) {
-            items.push(this.icon(icon, box.x + icon.size / 2, box.y + scale.noteLine / 2, style.iconColor ?? color));
+            items.push(this.icon(icon, box.x + icon.size / 2, box.y + font.line / 2, style.iconColor ?? color));
         }
+        // The lines are aligned in the room right of the icon: at its edge, its middle or the box's.
+        const align = this.sizing.alignOf(element);
+        const x = align === "left"
+            ? box.x + indent
+            : align === "right"
+                ? box.x + box.width
+                : box.x + indent + (box.width - indent) / 2;
+        const anchor = align === "left" ? "start" : align === "right" ? "end" : "middle";
         splitLines(element.label).forEach((line, i) => {
-            items.push(this.text(box.x + indent, box.y + scale.noteLine / 2 + i * scale.noteLine, line, scale.note, 400, color, "start"));
+            items.push(this.text(x, box.y + font.line / 2 + i * font.line, line, font.size, font.weight, color, anchor, font.font));
         });
         return { kind: "group", id: element.id, role: "element", items };
     }
+    /**
+     * A sticky: a soft shadow 3 px under its card, the card in the theme's `sticky` colour (or its
+     * `fill`) with `radius` 2 and an outline only when its style writes `stroke`, its icon at the
+     * top left inside the padding, and its text (`Sizing.stickyText`) in `stickyText` (or its
+     * `color`), wrapped and shrunk to the card, aligned by `textAlign` and `verticalAlign`. Text that
+     * does not fit even at the smallest size starts at the top and is clipped to the card.
+     */
+    sticky(element, box) {
+        const { theme } = this;
+        const style = this.styles.element(element);
+        const radius = cornerRadius(style.radius ?? STICKY_RADIUS, box);
+        const shadow = {
+            kind: "rect",
+            x: round(box.x),
+            y: round(box.y + STICKY_SHADOW.offset),
+            width: round(box.width),
+            height: round(box.height),
+            radius,
+            fill: STICKY_SHADOW.color,
+            stroke: "none",
+            strokeWidth: 0,
+            dashed: false,
+            opacity: STICKY_SHADOW.opacity,
+        };
+        const card = this.rect(box, radius, style.fill ?? theme.sticky, style.stroke ?? "none", style.stroke ? (style.width ?? theme.strokeWidth) : 0, strokeDash(style.line));
+        const items = [shadow, card];
+        const text = this.sizing.stickyPlace(element, box);
+        const { area, line } = text;
+        const color = style.color ?? theme.stickyText;
+        const icon = this.sizing.iconOf(element);
+        if (icon) {
+            // In the top left corner inside the padding, on a row of its own above the text.
+            const x = box.x + theme.padding + icon.size / 2;
+            const y = box.y + theme.padding + icon.size / 2;
+            items.push(this.icon(icon, x, y, style.iconColor ?? color));
+        }
+        const block = text.lines.length * line;
+        const top = !text.fits
+            ? area.y
+            : text.verticalAlign === "top"
+                ? area.y
+                : text.verticalAlign === "bottom"
+                    ? area.y + area.height - block
+                    : area.y + (area.height - block) / 2;
+        const x = text.align === "left"
+            ? area.x
+            : text.align === "right"
+                ? area.x + area.width
+                : area.x + area.width / 2;
+        const anchor = text.align === "left" ? "start" : text.align === "right" ? "end" : "middle";
+        text.lines.forEach((content, i) => {
+            items.push(this.text(x, top + line / 2 + i * line, content, text.size, text.weight, color, anchor, text.font));
+        });
+        const group = { kind: "group", id: element.id, role: "element", items };
+        if (text.fits)
+            return group;
+        const clip = {
+            id: `clip-${xmlName(this.diagramId)}-${xmlName(element.id)}`,
+            x: round(box.x),
+            y: round(box.y),
+            width: round(box.width),
+            height: round(box.height),
+            radius,
+        };
+        return { ...group, textClip: clip };
+    }
     tag(element, box) {
-        const { theme, scale } = this;
+        const { theme } = this;
         const style = this.styles.element(element);
         const fill = style.fill ?? theme.tag;
         const center = boxCenter(box);
-        // A pill, upright when the tag is taller than wide.
-        const outline = this.rect(box, cornerRadius(Infinity, box), fill, style.stroke ?? fill, style.width ?? theme.strokeWidth, strokeDash(style.line));
         const color = style.color ?? theme.tagText;
+        const { scale, face } = this.sizing.tagText(element);
+        // The pill sequence tags share, upright when the tag is taller than wide.
+        const { outline, label } = tagPill(this.metrics, scale, box, element.label, {
+            fill,
+            stroke: style.stroke ?? fill,
+            strokeWidth: style.width ?? theme.strokeWidth,
+            dashed: strokeDash(style.line),
+            color,
+        }, face);
         const items = [outline, ...this.overlay(style, outline)];
         const icon = this.sizing.iconOf(element);
         if (icon) {
-            const textWidth = this.metrics.width(element.label, "mono", 500, scale.tag);
+            const textWidth = this.metrics.width(element.label, face.font, face.weight, scale.tag);
             const left = center.x - (icon.size + icon.gap + textWidth) / 2;
             items.push(this.icon(icon, left + icon.size / 2, center.y, style.iconColor ?? color));
-            items.push(this.text(left + icon.size + icon.gap, center.y, element.label, scale.tag, 500, color, "start", "mono"));
+            items.push(this.text(left + icon.size + icon.gap, center.y, element.label, scale.tag, face.weight, color, "start", face.font));
         }
         else {
-            items.push(this.text(center.x, center.y, element.label, scale.tag, 500, color, "middle", "mono"));
+            items.push(label);
         }
         return { kind: "group", id: element.id, role: "element", items };
     }
     relation(relation, line, start, end, label, curve) {
-        const { theme, scale } = this;
         const style = this.styles.relation(relation);
         // An assumption is drawn dashed in the muted colour until a style says otherwise.
         const assumed = relation.assumption !== null;
-        const stroke = style.stroke ?? (assumed ? theme.muted : theme.connector);
-        const strokeWidth = style.width ?? theme.connectorWidth;
-        const dashed = strokeDash(style.line ?? (assumed ? "dashed" : relation.line));
-        const points = (list) => list.map((p) => ({ x: round(p.x), y: round(p.y) }));
         // A straight connector passes under the titles of groups it crosses (not its own ends'). It
         // is drawn from beyond the labels its own ends draw outside their boxes (see `underLabel`).
         const holes = this.titles
             .filter((t) => t.id !== relation.from && t.id !== relation.to)
             .map((t) => t.box);
+        const items = this.connectorItems(relation.key, style, style.stroke ?? (assumed ? this.theme.muted : this.theme.connector), strokeDash(style.line ?? (assumed ? "dashed" : relation.line)), holes, line, start, end, label, this.sizing.relationIcon(relation), curve);
+        return { kind: "group", id: relation.key, role: "relation", items, track: roundedPoints(line) };
+    }
+    /**
+     * A free line: a connector without ends, drawn as a relation is (its line, its heads, its pill),
+     * as an element group whose `track` is its drawn line and whose `bounds` is its box. A line whose
+     * points coincide is a dot of its width.
+     */
+    line(element, box, line, start, end, label, curve) {
+        const style = this.styles.element(element);
+        const stroke = style.stroke ?? this.theme.connector;
+        const strokeWidth = style.width ?? this.theme.connectorWidth;
+        const first = line[0];
+        const dot = first !== undefined && line.every((p) => p.x === first.x && p.y === first.y);
+        const items = dot
+            ? [
+                {
+                    kind: "path",
+                    d: circlePath(round(first.x), round(first.y), Math.max(1, strokeWidth)),
+                    fill: stroke,
+                    stroke: "none",
+                    strokeWidth: 0,
+                    dashed: false,
+                },
+            ]
+            : this.connectorItems(element.id, style, stroke, strokeDash(style.line ?? "solid"), [], line, start, end, label && { ...label, technology: null }, this.sizing.lineIcon(element), curve);
+        return this.faded(withBounds({ kind: "group", id: element.id, role: "element", items, track: roundedPoints(line) }, box), element);
+    }
+    /**
+     * A pen stroke: one path through its points (`penPath`) with round caps and joins and no fill,
+     * in its `stroke` (the theme's `ink`), `width`, `line` and `opacity`, then its heads; a stroke
+     * whose points coincide is a disc of its width. An element group marked `freehand`, whose
+     * `track` is its points and whose `bounds` is its box. `points` are all its points; `line` the
+     * same cut where its heads begin.
+     */
+    pen(element, box, points, line, start, end) {
+        const style = this.styles.element(element);
+        const stroke = style.stroke ?? this.theme.ink;
+        const width = penWidth(style);
+        const first = points[0];
+        const items = isDot(points)
+            ? [
+                {
+                    kind: "path",
+                    d: circlePath(round(first.x), round(first.y), width / 2),
+                    fill: stroke,
+                    stroke: "none",
+                    strokeWidth: 0,
+                    dashed: false,
+                },
+            ]
+            : [
+                {
+                    kind: "path",
+                    d: penPath(line),
+                    fill: "none",
+                    stroke,
+                    strokeWidth: width,
+                    dashed: strokeDash(style.line),
+                    rounded: true,
+                },
+                ...markerItems(start, stroke, width),
+                ...markerItems(end, stroke, width),
+            ];
+        return this.faded(withBounds({
+            kind: "group",
+            id: element.id,
+            role: "element",
+            freehand: true,
+            items,
+            track: roundedPoints(points),
+        }, box), element);
+    }
+    /**
+     * The items of a connector, in the order motion and hit tests expect: its line (pieces around
+     * `holes`, or one curve), its heads, then its label pill with its icon and text.
+     */
+    connectorItems(id, style, stroke, dashed, holes, line, start, end, label, icon, curve) {
+        const { theme } = this;
+        const face = pillText(theme, this.scale, style);
+        const scale = face.scale;
+        const strokeWidth = style.width ?? theme.connectorWidth;
         const pieces = curve ? [] : splitAround(line, holes);
         const items = curve
             ? [{ kind: "path", d: curve, fill: "none", stroke, strokeWidth, dashed }]
             : pieces.map((piece) => ({
                 kind: "polyline",
-                points: points(piece),
+                points: roundedPoints(piece),
                 stroke,
                 strokeWidth,
                 dashed,
@@ -3498,26 +4669,25 @@ class Emitter {
             const pill = [
                 this.rect(label.box, Math.min(label.box.height, scale.relationLabelHeight) / 2, fill, style.stroke ?? (style.fill ? style.fill : theme.line), theme.strokeWidth, false),
             ];
-            const icon = this.sizing.relationIcon(relation);
             if (icon && label.text === "") {
                 pill.push(this.icon(icon, center.x, center.y, style.iconColor ?? color));
             }
             else if (icon) {
-                const textWidth = this.metrics.width(label.text, "body", 500, scale.relationLabel);
+                const textWidth = this.metrics.width(label.text, face.font, face.weight, scale.relationLabel);
                 const left = center.x - (icon.size + icon.gap + textWidth) / 2;
                 pill.push(this.icon(icon, left + icon.size / 2, center.y, style.iconColor ?? color));
-                pill.push(this.text(left + icon.size + icon.gap, center.y, label.text, scale.relationLabel, 500, color, "start"));
+                pill.push(this.text(left + icon.size + icon.gap, center.y, label.text, scale.relationLabel, face.weight, color, "start", face.font));
             }
             else if (label.text !== "") {
-                pill.push(this.text(center.x, center.y, label.text, scale.relationLabel, 500, color));
+                pill.push(this.text(center.x, center.y, label.text, scale.relationLabel, face.weight, color, "middle", face.font));
             }
             if (label.technology) {
                 const y = label.text === "" && !icon ? box.y + box.height / 2 : center.y + techLine;
-                pill.push(this.text(center.x, y, label.technology, techSize, 400, style.color ?? theme.muted));
+                pill.push(this.text(center.x, y, label.technology, techSize, 400, style.color ?? theme.muted, "middle", face.font));
             }
-            items.push({ kind: "group", id: relation.key, role: "label", items: pill });
+            items.push({ kind: "group", id, role: "label", items: pill });
         }
-        return { kind: "group", id: relation.key, role: "relation", items, track: points(line) };
+        return items;
     }
     /** The brand strip: hairline, mark, wordmark and diagram title, spanning the canvas. */
     frame(width, stripTop, title) {