@meltemi/diagrams-layout 1.10.0 → 1.10.18

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 { 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,8 +50,11 @@ export const DEFAULT_SIZES = {
     text: null,
     icon: { width: 48, height: 48 },
     image: null,
-    // A free line is the bounding box of its points.
+    // 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,
@@ -166,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;
 /**
@@ -300,17 +401,88 @@ function linePointsOf(line) {
 }
 /** The box of a free line: the bounding box of its points, at least 1 wide and 1 tall. */
 function lineBox(points) {
-    const xs = points.map((p) => p.x);
-    const ys = points.map((p) => p.y);
-    const x = Math.min(...xs);
-    const y = Math.min(...ys);
+    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,
-        y,
-        width: Math.max(1, Math.max(...xs) - x),
-        height: Math.max(1, Math.max(...ys) - y),
+        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;
@@ -597,8 +769,8 @@ function iconDiagnostics(diagram, styles, sizing, lines, words, themeRange) {
 /**
  * `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 no box. Once per statement that writes the property, or
- * once for a theme rule or class, on the diagram's `theme` (`themeRange`).
+ * `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();
@@ -609,7 +781,8 @@ function verticalAlignDiagnostics(diagram, styles, sizing, lines, words, themeRa
         const box = element.kind === "box";
         const fixed = box && FIXED_TEXT_SHAPES.has(sizing.shapeOf(element));
         const centred = box && !fixed && sizing.centred(element);
-        const used = box && !fixed && !centred;
+        // A sticky's text block always moves within its card.
+        const used = (box && !fixed && !centred) || element.kind === "sticky";
         const why = used
             ? undefined
             : fixed
@@ -666,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({
@@ -720,18 +895,68 @@ function layoutDrawing(compilation, diagram, options = {}) {
         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({
@@ -748,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",
@@ -769,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.
@@ -781,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) {
@@ -795,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)
@@ -822,8 +1052,10 @@ function layoutDrawing(compilation, diagram, options = {}) {
         const explicit = sizes.get(element.id);
         const size = explicit ?? sizing.defaultSize(element);
         const entry = sizeEntries.get(element.id);
-        if (explicit && entry)
+        // 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.
@@ -879,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) {
@@ -918,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);
@@ -940,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
@@ -971,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 {
@@ -1016,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) {
@@ -1106,6 +1407,17 @@ function layoutDrawing(compilation, diagram, options = {}) {
             });
         }
     }
+    // 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();
@@ -1113,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" || element.kind === "line" || !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)) {
@@ -1148,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" && e.kind !== "line");
+    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 ?? [])]));
@@ -1171,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.
@@ -1395,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,
             };
@@ -1475,11 +1793,12 @@ function layoutDrawing(compilation, diagram, options = {}) {
             const offset = entry ? entry.offset : { x: 0, y: 0 };
             const center = pointAlong(curve ? line : points, at);
             const text = element.label;
-            const textWidth = text === "" ? 0 : metrics.width(text, "body", 500, scale.relationLabel);
+            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 + scale.relationLabelPadding;
+            const width = textWidth + iconWidth + pill.scale.relationLabelPadding;
             label = {
-                box: boxFromCenter({ x: center.x + offset.x, y: center.y + offset.y }, Math.max(width, scale.relationLabelHeight), scale.relationLabelHeight),
+                box: boxFromCenter({ x: center.x + offset.x, y: center.y + offset.y }, Math.max(width, pill.scale.relationLabelHeight), pill.scale.relationLabelHeight),
                 text,
             };
         }
@@ -1493,10 +1812,27 @@ function layoutDrawing(compilation, diagram, options = {}) {
             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)]));
-    // A line's box is no obstacle: labels may sit beside it as beside any connector.
-    const shapeExtents = new Map([...extents].filter(([id]) => !lineGeometry.has(id)));
+    // 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) {
@@ -1510,15 +1846,17 @@ function layoutDrawing(compilation, diagram, options = {}) {
     for (const [id, box] of boxes)
         if (!rotations.has(id))
             checked.set(id, box);
-    // Lines cross boxes by design: they take no part in the composition checks.
+    // 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 [
@@ -1536,6 +1874,11 @@ function layoutDrawing(compilation, diagram, options = {}) {
         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);
@@ -1562,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),
@@ -1638,6 +1981,11 @@ function layoutDrawing(compilation, diagram, options = {}) {
                 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)
                 : elementGroup(paintable.element, box), paintable.element.layer));
@@ -1718,6 +2066,22 @@ function layoutDrawing(compilation, diagram, options = {}) {
             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,
@@ -1725,6 +2089,9 @@ function layoutDrawing(compilation, diagram, options = {}) {
         offset: { x: dx, y: dy },
         labels: labelBoxes,
         connectors,
+        pens: penGeometry,
+        stickies,
+        lists,
         origins,
         theme,
         shapes,
@@ -1815,7 +2182,7 @@ function roundedPoints(list) {
 }
 /** A circle of radius `r` about (`cx`, `cy`), as path data. */
 function circlePath(cx, cy, r) {
-    return `M${cx - r} ${cy}a${r} ${r} 0 1 0 ${2 * r} 0a${r} ${r} 0 1 0 ${-2 * r} 0Z`;
+    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;
@@ -1878,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),
@@ -1911,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);
@@ -1947,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",
@@ -1975,16 +2358,24 @@ function arrangeRequest(diagram, sizes, fixedPlaces, routes, theme, headerOf, la
         const target = note.attachedTo;
         if (note.kind !== "note" || target === null || target === note.id)
             return [];
-        if (fixedPlaces.has(note.id) || leftOut.has(note.id) || leftOut.has(target))
+        // 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" || !sizes.has(target) || !sizes.has(note.id)) {
+        if (!element ||
+            element.kind === "line" ||
+            element.kind === "pen" ||
+            !sizes.has(source) ||
+            !sizes.has(note.id)) {
             return [];
         }
         return [
             {
                 id: `attach${note.id}`,
-                source: target,
+                source,
                 target: note.id,
                 sourcePort: null,
                 targetPort: null,
@@ -1994,9 +2385,13 @@ function arrangeRequest(diagram, sizes, fixedPlaces, routes, theme, headerOf, la
         ];
     });
     edges.push(...attached);
-    // Free lines are drawn where their points are written: the engine never moves them.
+    // 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" && e.kind !== "line")
+        .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,
@@ -2029,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 {
@@ -2097,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;
@@ -2105,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));
@@ -2113,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 };
@@ -2281,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;
@@ -2291,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));
@@ -2367,6 +2771,8 @@ class Sizing {
     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()) {
@@ -2384,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
@@ -2409,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";
         }
@@ -2421,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") {
@@ -2496,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));
@@ -2605,6 +3053,14 @@ 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
@@ -2617,16 +3073,131 @@ class Sizing {
             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" || 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);
@@ -2676,6 +3247,9 @@ class Sizing {
                 return this.place(style.icon, Math.round(scale.tag * 1.3), "left");
             case "note":
                 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)
@@ -3086,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.
@@ -3120,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;
     }
@@ -3136,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;
@@ -3152,16 +3729,17 @@ 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),
                 };
             }
@@ -3169,7 +3747,7 @@ class Sizing {
                 const font = this.noteFont(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 + beside, 1));
                 return { text: best.text, width, minimum: width };
@@ -3178,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;
@@ -3202,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 };
         }
@@ -3232,10 +3812,16 @@ 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,
@@ -3418,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),
@@ -3440,7 +4060,8 @@ class Emitter {
             text,
             size,
             weight,
-            font,
+            font: fontRole(font),
+            ...(stack !== undefined ? { stack } : {}),
             anchor,
             fill,
         };
@@ -3486,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;
@@ -3499,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);
@@ -3507,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":
@@ -3600,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 };
     }
@@ -3763,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"
@@ -3774,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));
         });
     }
     /**
@@ -3829,28 +4457,101 @@ class Emitter {
                 : 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(x, box.y + font.line / 2 + i * font.line, line, font.size, font.weight, color, anchor));
+            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 };
     }
@@ -3889,14 +4590,61 @@ class Emitter {
                 },
             ]
             : this.connectorItems(element.id, style, stroke, strokeDash(style.line ?? "solid"), [], line, start, end, label && { ...label, technology: null }, this.sizing.lineIcon(element), curve);
-        return withBounds({ kind: "group", id: element.id, role: "element", items, track: roundedPoints(line) }, box);
+        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, scale } = this;
+        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
@@ -3925,17 +4673,17 @@ class Emitter {
                 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, role: "label", items: pill });
         }