reladraw 0.1.0 → 0.3.0

package/dist/render.js

@@ -1,8 +1,9 @@
-import { ARROW_MARKER_WIDTH, ATTACH_MARGIN, ATTACH_STEP, DECK_STEP, DEFAULT_FONT_SIZE, ICON_GAP, ICON_LINES, LINE_WIDTH, PAD, fontSizeFor, labelExtent, labelStyleFor, } from './constants.js';
+import { ARROW_MARKER_WIDTH, ATTACH_MARGIN, ATTACH_STEP, DECK_STEP, DEFAULT_FONT_SIZE, ICON_LINES, LINE_WIDTH, PAD, fontSizeFor, textExtent, textStyleFor, widestLine, } from './constants.js';
 import { describeAxis } from './ast.js';
 import { SourceError } from './errors.js';
-import { ICON_STROKE, iconFor, shapeFor } from './icons.js';
+import { ICON_STROKE } from './icons.js';
 import { monospaceMeasurer } from './measure.js';
+import { plain } from './text.js';
 /**
  * Sampled out of `examples/reference/arch.png` rather than invented,
  * so the benchmark render and the drawing it is measured against differ by
@@ -17,9 +18,9 @@ export const DARK_THEME = {
     containerStroke: '#25242f',
     text: '#d9d9d9',
     mutedText: '#8b8b8b',
-    link: '#5c5c7c',
+    edge: '#5c5c7c',
     // Both sampled off the reference's machine glyphs. Note that the reference
-    // gives each icon its own hue — the drive is grey, the laptop periwinkle, the
+    // gives each icon its own hue — the drive is gray, the laptop periwinkle, the
     // workstation violet — which is a drawing tool's per-shape default and not a
     // system. One pair for the whole set is the deliberate difference: an icon
     // should read as part of the diagram's palette, not as clip art dropped in.
@@ -38,24 +39,24 @@ export function render(layout, options = {}) {
     const theme = stated === undefined ? base : { ...base, background: stated };
     const body = [];
     for (const root of layout.roots) {
-        body.push(drawNode(root, theme, measurer, fontSize));
+        body.push(drawNode(root, theme, measurer, fontSize, layout.markup));
     }
-    // Everything the boxes cover. Links are added to it as they are drawn.
+    // Everything the boxes cover. Edges are added to it as they are drawn.
     let ink = { minX: 0, minY: 0, maxX: layout.width, maxY: layout.height };
-    // Endpoints are planned for every link at once, because where a link meets a
+    // Endpoints are planned for every edge at once, because where an edge meets a
     // side depends on what else meets that same side. Corridors come after, for
-    // the same reason in the other direction: which lane of a gap a link takes
+    // the same reason in the other direction: which lane of a gap an edge takes
     // is ordered by where its ends turned out to be.
-    const ends = planEndpoints(layout.links, measurer, fontSize);
-    const corridors = planCorridors(layout.links, ends, measurer, fontSize);
-    aimFreeEnds(layout.links, ends, corridors);
-    for (const link of layout.links) {
-        const drawn = drawLink(link, ends.get(link), corridors.get(link), theme, measurer, fontSize);
+    const ends = planEndpoints(layout.edges, measurer, fontSize);
+    const corridors = planCorridors(layout.edges, ends, measurer, fontSize);
+    aimFreeEnds(layout.edges, ends, corridors);
+    for (const edge of layout.edges) {
+        const drawn = drawEdge(edge, ends.get(edge), corridors.get(edge), theme, measurer, fontSize, layout.markup);
         body.push(drawn.svg);
         ink = union(ink, grow(drawn.ink, layout.margin));
     }
-    // A link's geometry is measured rather than solved for, so the resolver sized
-    // the canvas from the boxes alone. A curve out of a `top` side, or a label
+    // An edge's geometry is measured rather than solved for, so the resolver sized
+    // the canvas from the boxes alone. A curve out of a `top` side, or a text
     // riding above one, lands outside that — so the page grows to hold it and the
     // origin moves with it, rather than the drawing being quietly clipped.
     const canvas = {
@@ -64,11 +65,11 @@ export function render(layout, options = {}) {
         width: Math.ceil(ink.maxX) - Math.floor(ink.minX),
         height: Math.ceil(ink.maxY) - Math.floor(ink.minY),
     };
-    const arrowColours = new Set(layout.links.map((link) => colourOf(link.appearance, theme.link)));
+    const arrowColors = new Set(layout.edges.map((edge) => lineOf(edge.appearance, theme.edge)));
     return [
         `<svg xmlns="http://www.w3.org/2000/svg" width="${canvas.width}" height="${canvas.height}" viewBox="${canvas.x} ${canvas.y} ${canvas.width} ${canvas.height}" font-family=${quote(measurer.fontFamily)} font-size="${fontSize}px">`,
         '  <defs>',
-        ...[...arrowColours].map((colour) => arrowMarker(colour)),
+        ...[...arrowColors].map((color) => arrowMarker(color)),
         '  </defs>',
         `  <rect x="${canvas.x}" y="${canvas.y}" width="${canvas.width}" height="${canvas.height}" fill="${theme.background}"/>`,
         ...body,
@@ -77,109 +78,134 @@ export function render(layout, options = {}) {
     ].join('\n');
 }
 // --- nodes -------------------------------------------------------------------
-function drawNode(node, theme, measurer, fontSize) {
-    // A note is set smaller than a box label by default, and `size:` overrides
+/**
+ * `<a href>` around whatever a node or an edge draws, when it named a
+ * destination.
+ *
+ * SVG has this natively, so a standalone SVG stays standalone and a rasteriser
+ * drops it, leaving a PNG unharmed. Plain `href` and not `xlink:href`: the
+ * SVG 1.1 spelling would need an `xmlns:xlink` on every drawing whether or not
+ * anything in it links anywhere, and every current browser takes the SVG 2 one.
+ *
+ * `target="_blank"` always, because the playground inlines the SVG into its own
+ * page and a click inside it would otherwise navigate the playground away;
+ * `rel="noopener"` goes with it as it does anywhere else.
+ *
+ * **An `<a>` is never nested inside another.** Nesting is the obvious way to let
+ * a container carry a destination while a child carries its own, and it does not
+ * work: Chrome draws nothing at all inside the inner one, so the child simply
+ * disappears from the picture. Every node's anchor therefore wraps only what
+ * that node draws — outline and text — and its children are emitted beside
+ * it, each wrapping itself. The reading comes out the same anyway, because the
+ * container's filled outline lies under the children and catches every click
+ * that does not land on one of them.
+ *
+ * A destination therefore reaches down the tree instead of enclosing it: a child
+ * that names none of its own is drawn inside an anchor carrying its container's,
+ * and one that names its own overrules it. That is the reading nesting would
+ * have given — the container catches every click its children do not — reached
+ * by repeating the destination rather than by wrapping.
+ */
+function linked(svg, url) {
+    if (url === undefined || svg.length === 0)
+        return svg;
+    // An `&` between query parameters is ordinary in a url and illegal raw in an
+    // attribute, so the value is escaped as markup rather than merely quoted.
+    return `  <a href=${quote(escapeXml(url))} target="_blank" rel="noopener">\n${svg}\n  </a>`;
+}
+function drawNode(node, theme, measurer, fontSize, markup, inherited) {
+    const url = node.attrs['url'] ?? inherited;
+    const { own, kids } = nodeSvg(node, theme, measurer, fontSize, markup, url);
+    return [linked(own.join('\n'), url), ...kids]
+        .filter((part) => part.length > 0)
+        .join('\n');
+}
+/**
+ * What a node draws, in two pieces: its own ink and its children's. They are
+ * kept apart so the node's `<a>` can wrap what is the node's without
+ * swallowing what is a child's.
+ */
+function nodeSvg(node, theme, measurer, fontSize, markup, url) {
+    // A note is set smaller than a box text by default, and `size:` overrides
     // that on anything. Only this node's own text takes the size — children are
     // drawn by their own call and carry whatever they say themselves.
-    const size = fontSizeFor(node.kind, node.appearance, fontSize, node.line);
+    const size = fontSizeFor(node.kind, node.textAttrs, fontSize, node.line);
     const textHeight = measurer.lineHeight(size);
-    if (node.kind === 'note') {
-        return sized(textBlock(node.lines, node.x, node.y, node.width, textHeight, size, {
-            colour: colourOf(node.appearance, theme.text),
-            align: 'start',
-        }), size, fontSize);
+    const blockWidth = widestLine(node.lines, measurer, size);
+    const ink = (run, own) => runInk(run, own, markup, theme);
+    if (node.body.kind === 'none') {
+        const style = textStyleFor(node.textAttrs, node.line, 'start', 'center');
+        return { kids: [], own: [sized(textBlock(node.lines, node.x, node.y, textHeight, size, node.textBox, {
+                    color: textColorOf(node.textAttrs, theme, theme.text),
+                    align: style.align,
+                    ink,
+                }), size, fontSize)] };
     }
-    const shape = shapeFor(node.appearance, node.line);
-    const labelStyle = labelStyleFor(node.label, node.line);
     const glyphSide = ICON_LINES * textHeight;
-    if (shape.body !== undefined) {
-        // No outline, no fill, no padding — the node is the picture. The label, if
-        // there is one, sits under it and centred.
-        const drawn = [drawIcon(shape.body, node.x + (node.width - glyphSide) / 2, node.y, glyphSide, theme)];
-        if (node.lines.some((line) => line.length > 0)) {
-            drawn.push(sized(textBlock(node.lines, node.x, node.y + glyphSide + ICON_GAP, node.width, textHeight, size, {
-                colour: colourOf(node.appearance, theme.text),
-                subColour: subtextOf(node.appearance, theme),
-                align: 'middle',
+    if (node.body.kind === 'icon') {
+        // No outline, no fill, no padding — the node is the picture. The text, if
+        // there is one, sits under it. `at`'s vertical half has nothing to say
+        // here — the caption is under the picture and nowhere else — so only its
+        // horizontal half is read.
+        const style = textStyleFor(node.textAttrs, node.line, 'middle', 'center');
+        const drawn = [drawIcon(node.body.icon, node.x + (node.width - glyphSide) / 2, node.y, glyphSide, theme)];
+        if (node.lines.some((line) => plain(line).length > 0)) {
+            drawn.push(sized(textBlock(node.lines, node.x, node.y, textHeight, size, node.textBox, {
+                color: textColorOf(node.textAttrs, theme, theme.text),
+                align: style.align,
+                ink,
             }), size, fontSize));
         }
-        return drawn.join('\n');
+        return { own: drawn, kids: [] };
     }
+    const outline = node.body.outline;
     const parts = [];
+    const kids = [];
     const face = faceOf(node);
-    const container = node.children.length > 0;
-    const stroke = colourOf(node.appearance, container ? theme.containerStroke : theme.boxStroke);
+    // A container *looks* like one because things stack beside its text, not
+    // because it has children: a node whose only child sits beside its text is
+    // drawn as the leaf it reads as.
+    const container = node.banded;
+    const border = borderOf(node.appearance, container ? theme.containerStroke : theme.boxStroke);
     const fill = fillOf(node.appearance, container ? theme.containerFill : theme.boxFill);
-    const subColour = subtextOf(node.appearance, theme);
+    // A box is the one kind with two inkable parts, which is why its text needs
+    // a word of its own — `border:` cannot stand in for it.
+    const text = textColorOf(node.textAttrs, theme, theme.text);
     // Deck copies sit behind the front face, furthest back drawn first.
-    for (let depth = node.deckLabels.length; depth >= 1; depth -= 1) {
+    for (let depth = node.deckTexts.length; depth >= 1; depth -= 1) {
         const x = face.x - depth * DECK_STEP;
         const y = face.y - depth * DECK_STEP;
-        parts.push(`  <path d="${outlinePath(shape.outline, x, y, face.width, face.height)}" fill="${theme.containerFill}" stroke="${stroke}"/>`);
-        const label = node.deckLabels[depth - 1];
-        if (label !== undefined) {
-            parts.push(sized(textBlock([label], x + PAD, y + PAD, face.width - PAD * 2, textHeight, size, {
-                colour: theme.text,
-                align: 'start',
-            }), size, fontSize));
+        parts.push(`  <path d="${outlinePath(outline, x, y, face.width, face.height)}" fill="${theme.containerFill}" stroke="${border}"/>`);
+        const copy = node.deckTexts[depth - 1];
+        if (copy !== undefined) {
+            parts.push(sized(textBlock([[{ text: copy }]], x, y, textHeight, size, { x: PAD, y: PAD, width: face.width - PAD * 2, height: textHeight }, { color: text, align: 'start', ink }), size, fontSize));
         }
     }
-    parts.push(`  <path d="${outlinePath(shape.outline, face.x, face.y, face.width, face.height)}" fill="${fill}" stroke="${stroke}"/>`);
-    for (const extra of outlineDetail(shape.outline, face.x, face.y, face.width, face.height)) {
-        parts.push(`  <path d="${extra}" fill="none" stroke="${stroke}"/>`);
-    }
-    // The icon takes a column on the right and the label lays out in what is
-    // left, which is the room the resolver already reserved for exactly this.
-    const icon = iconFor(node.appearance, node.line);
-    const iconSide = icon === undefined ? 0 : glyphSide;
-    const hasLabel = node.lines.some((line) => line.length > 0);
-    const iconRoom = icon === undefined ? 0 : iconSide + (hasLabel ? ICON_GAP : 0);
-    if (!container) {
-        // A leaf centres its label in the box, both ways — in the room beside the
-        // icon rather than the whole box, so the two sit side by side.
-        const top = face.y + (face.height - node.lines.length * textHeight) / 2;
-        parts.push(sized(textBlock(node.lines, face.x, top, face.width - iconRoom, textHeight, size, {
-            colour: theme.text,
-            subColour,
-            align: 'middle',
-        }), size, fontSize));
-    }
-    else {
-        // The label and the icon share a band at one end of the box, and the
-        // resolver has already given the contents the other end. A heading is
-        // ranged left at the top; a caption is centred at the bottom.
-        const band = Math.max(node.lines.length * textHeight, iconSide);
-        const bandTop = labelStyle.at === 'top' ? face.y + PAD : face.y + face.height - PAD - band;
-        parts.push(sized(textBlock(node.lines, face.x + PAD, bandTop, face.width - PAD * 2 - iconRoom, textHeight, size, {
-            colour: theme.text,
-            subColour,
-            align: labelStyle.align,
-        }), size, fontSize));
-        for (const child of node.children) {
-            parts.push(drawNode(child, theme, measurer, fontSize));
-        }
+    parts.push(`  <path d="${outlinePath(outline, face.x, face.y, face.width, face.height)}" fill="${fill}" stroke="${border}"/>`);
+    for (const extra of outlineDetail(outline, face.x, face.y, face.width, face.height)) {
+        parts.push(`  <path d="${extra}" fill="none" stroke="${border}"/>`);
     }
-    if (icon !== undefined) {
-        // A container's icon rides in the label's band, at whichever end that is; a
-        // leaf's label is centred, so the icon centres with it. Both follow the
-        // label rather than being placed by a rule of their own, which is what
-        // keeps an icon reading as part of the title block and not as a sticker.
-        const left = face.x + face.width - PAD - iconSide;
-        const top = container
-            ? labelStyle.at === 'top'
-                ? face.y + PAD
-                : face.y + face.height - PAD - iconSide
-            : face.y + (face.height - iconSide) / 2;
-        parts.push(drawIcon(icon, left, top, iconSide, theme));
+    // A leaf's text defaults to the middle of its box, a container's to the top
+    // left of the band; both then read `at` for where it really goes. Where the
+    // text sits is the resolver's answer, in `textBox`; only the alignment of
+    // its lines against each other is read here.
+    const textStyle = textStyleFor(node.textAttrs, node.line, container ? 'start' : 'middle', container ? 'top-left' : 'center');
+    parts.push(sized(textBlock(node.lines, node.x, node.y, textHeight, size, node.textBox, {
+        color: text,
+        align: textStyle.align,
+        ink,
+    }), size, fontSize));
+    for (const child of node.children) {
+        kids.push(drawNode(child, theme, measurer, fontSize, markup, url));
     }
-    return parts.join('\n');
+    return { own: parts, kids };
 }
 /**
  * How far the dog-ear cuts into the top-right corner of a `document`.
  *
  * Twice the corner radius, so it is the same size on every box however wide.
  * The reference sizes its fold as a fraction of the box, which is why the fold
- * on those two wide `pg_dump` boxes almost disappears — the idea was right and
+ * on those two wide dump boxes almost disappears — the idea was right and
  * only the scaling was wrong.
  */
 const FOLD = CORNER * 2;
@@ -226,12 +252,12 @@ function outlineDetail(shape, x, y, w, h) {
 /** One icon, scaled from its own grid onto a square of `side` at `x, y`. */
 function drawIcon(icon, x, y, side, theme) {
     const scale = side / icon.grid;
-    const colour = (tone) => tone === 'ink' ? theme.iconInk : tone === 'shade' ? theme.iconShade : theme.background;
+    const color = (tone) => tone === 'ink' ? theme.iconInk : tone === 'shade' ? theme.iconShade : theme.background;
     const paths = icon.paths.map((path) => {
-        const fill = path.fill === undefined ? 'none' : colour(path.fill);
+        const fill = path.fill === undefined ? 'none' : color(path.fill);
         const stroke = path.stroke === undefined
             ? ''
-            : ` stroke="${colour(path.stroke)}" stroke-width="${ICON_STROKE}" stroke-linejoin="round"`;
+            : ` stroke="${color(path.stroke)}" stroke-width="${ICON_STROKE}" stroke-linejoin="round"`;
         return `    <path d="${path.d}" fill="${fill}"${stroke}/>`;
     });
     return [
@@ -240,15 +266,15 @@ function drawIcon(icon, x, y, side, theme) {
         '  </g>',
     ].join('\n');
 }
-// --- links -------------------------------------------------------------------
-function drawLink(link, ends, corridor, theme, measurer, fontSize) {
+// --- edges -------------------------------------------------------------------
+function drawEdge(edge, ends, corridor, theme, measurer, fontSize, markup) {
     const { start, end } = ends;
-    const colour = colourOf(link.appearance, theme.link);
-    const markerEnd = ` marker-end="url(#${markerId(colour)})"`;
-    const markerStart = link.both ? ` marker-start="url(#${markerId(colour)}-back)"` : '';
+    const color = lineOf(edge.appearance, theme.edge);
+    const markerEnd = ` marker-end="url(#${markerId(color)})"`;
+    const markerStart = edge.both ? ` marker-start="url(#${markerId(color)}-back)"` : '';
     // A named side is a statement about how the line should leave or arrive, so
     // it is drawn as a curve that actually does leave and arrive that way. With
-    // neither side named there is nothing to honour and the line stays straight.
+    // neither side named there is nothing to honor and the line stays straight.
     const curved = start.side !== undefined || end.side !== undefined;
     const parts = [];
     // What the line actually covers, so the canvas can be sized to hold it. A
@@ -260,8 +286,8 @@ function drawLink(link, ends, corridor, theme, measurer, fontSize) {
     if (corridor) {
         const path = corridorPath(start, end, corridor);
         ink = union(ink, path.ink);
-        parts.push(`  <path d="${path.d}" fill="none" stroke="${colour}" stroke-width="${LINE_WIDTH}"${markerEnd}${markerStart}/>`);
-        // The label goes on the straight run rather than at the midpoint of the
+        parts.push(`  <path d="${path.d}" fill="none" stroke="${color}" stroke-width="${LINE_WIDTH}"${markerEnd}${markerStart}/>`);
+        // The text goes on the straight run rather than at the midpoint of the
         // whole path, so it sits in the gap the author asked the line to travel.
         midX = path.mid.x;
         midY = path.mid.y;
@@ -277,9 +303,9 @@ function drawLink(link, ends, corridor, theme, measurer, fontSize) {
         const by = (ends.bow?.y ?? 0) * lift;
         const c1 = { x: start.x + start.tx * reach + bx, y: start.y + start.ty * reach + by };
         const c2 = { x: end.x + end.tx * reach + bx, y: end.y + end.ty * reach + by };
-        parts.push(`  <path d="M ${round(start.x)} ${round(start.y)} C ${round(c1.x)} ${round(c1.y)}, ${round(c2.x)} ${round(c2.y)}, ${round(end.x)} ${round(end.y)}" fill="none" stroke="${colour}" stroke-width="${LINE_WIDTH}"${markerEnd}${markerStart}/>`);
+        parts.push(`  <path d="M ${round(start.x)} ${round(start.y)} C ${round(c1.x)} ${round(c1.y)}, ${round(c2.x)} ${round(c2.y)}, ${round(end.x)} ${round(end.y)}" fill="none" stroke="${color}" stroke-width="${LINE_WIDTH}"${markerEnd}${markerStart}/>`);
         ink = union(ink, cubicExtent(start, c1, c2, end));
-        // The point halfway along a cubic, which is where the label belongs.
+        // The point halfway along a cubic, which is where the text belongs.
         midX = (start.x + 3 * c1.x + 3 * c2.x + end.x) / 8;
         midY = (start.y + 3 * c1.y + 3 * c2.y + end.y) / 8;
     }
@@ -298,28 +324,29 @@ function drawLink(link, ends, corridor, theme, measurer, fontSize) {
             x: end.x - run.x + ends.bow.x * lift,
             y: end.y - run.y + ends.bow.y * lift,
         };
-        parts.push(`  <path d="M ${round(start.x)} ${round(start.y)} C ${round(c1.x)} ${round(c1.y)}, ${round(c2.x)} ${round(c2.y)}, ${round(end.x)} ${round(end.y)}" fill="none" stroke="${colour}" stroke-width="${LINE_WIDTH}"${markerEnd}${markerStart}/>`);
+        parts.push(`  <path d="M ${round(start.x)} ${round(start.y)} C ${round(c1.x)} ${round(c1.y)}, ${round(c2.x)} ${round(c2.y)}, ${round(end.x)} ${round(end.y)}" fill="none" stroke="${color}" stroke-width="${LINE_WIDTH}"${markerEnd}${markerStart}/>`);
         ink = union(ink, cubicExtent(start, c1, c2, end));
         midX = (start.x + 3 * c1.x + 3 * c2.x + end.x) / 8;
         midY = (start.y + 3 * c1.y + 3 * c2.y + end.y) / 8;
     }
     else {
-        parts.push(`  <line x1="${round(start.x)}" y1="${round(start.y)}" x2="${round(end.x)}" y2="${round(end.y)}" stroke="${colour}" stroke-width="${LINE_WIDTH}"${markerEnd}${markerStart}/>`);
+        parts.push(`  <line x1="${round(start.x)}" y1="${round(start.y)}" x2="${round(end.x)}" y2="${round(end.y)}" stroke="${color}" stroke-width="${LINE_WIDTH}"${markerEnd}${markerStart}/>`);
         midX = (start.x + end.x) / 2;
         midY = (start.y + end.y) / 2;
     }
-    if (link.label !== undefined) {
-        // A link label breaks on ` / ` exactly as a box label does, so a two-line
-        // caption on an arrow needs no vocabulary of its own. The block is centred
-        // on the midpoint, which keeps a one-line label where it has always been.
-        const size = fontSizeFor('link', link.appearance, fontSize, link.line);
+    if (edge.text !== undefined) {
+        // An edge text breaks on ` / ` exactly as a box text does, so a two-line
+        // caption on an arrow needs no vocabulary of its own. The block is centered
+        // on the midpoint, which keeps a one-line text where it has always been.
+        const size = fontSizeFor('edge', edge.textAttrs, fontSize, edge.line);
         const textHeight = measurer.lineHeight(size);
-        const { width, lines } = measurer.measure(link.label, size);
+        const lines = edge.lines;
+        const width = widestLine(lines, measurer, size);
         const height = lines.length * textHeight;
         const top = midY - height / 2;
-        // The label knocks a hole in whatever it lands on rather than sitting in a
+        // The text knocks a hole in whatever it lands on rather than sitting in a
         // chip of its own: an outlined box reads as a node, which is the one thing
-        // a label on a line is not.
+        // a text on a line is not.
         parts.push(`  <rect x="${round(midX - width / 2 - 5)}" y="${round(top)}" width="${round(width + 10)}" height="${round(height)}" fill="${theme.background}"/>`);
         ink = union(ink, {
             minX: midX - width / 2 - 5,
@@ -327,15 +354,16 @@ function drawLink(link, ends, corridor, theme, measurer, fontSize) {
             maxX: midX + width / 2 + 5,
             maxY: top + height,
         });
-        parts.push(sized(textBlock(lines, midX - width / 2, top, width, textHeight, size, {
-            // A coloured link carries its meaning into its label; an uncoloured
+        parts.push(sized(textBlock(lines, midX - width / 2, top, textHeight, size, { x: 0, y: 0, width, height }, {
+            // A colored edge carries its meaning into its text; an uncolored
             // one leaves the words to read as ordinary text.
-            colour: colourOf(link.appearance, theme.text),
+            color: textColorOf(edge.textAttrs, theme, lineOf(edge.appearance, theme.text)),
             align: 'middle',
+            ink: (run, own) => runInk(run, own, markup, theme),
         }), size, fontSize));
     }
     // The stroke straddles the path, so half of it lies outside the geometry.
-    return { svg: parts.join('\n'), ink: grow(ink, LINE_WIDTH / 2) };
+    return { svg: linked(parts.join('\n'), edge.attrs['url']), ink: grow(ink, LINE_WIDTH / 2) };
 }
 function union(a, b) {
     return {
@@ -365,7 +393,7 @@ function extentOfPoints(points) {
  * What a cubic actually covers, which is not what its control points cover. A
  * handle reaching 140 pixels up carries the curve only about three quarters of
  * that, and sizing the page off the handles would leave a visible band of empty
- * canvas above every curved link. Solved rather than sampled: the extremes are
+ * canvas above every curved edge. Solved rather than sampled: the extremes are
  * the ends plus wherever the derivative — a quadratic — crosses zero.
  */
 function cubicExtent(p0, c1, c2, p3) {
@@ -399,60 +427,63 @@ function cubicExtent(p0, c1, c2, p3) {
     const [minY, maxY] = span(p0.y, c1.y, c2.y, p3.y);
     return { minX, minY, maxX, maxY };
 }
-/** Walk out from the centre of a box toward a point, stopping at the border. */
-function edgePoint(box, toward) {
-    const centre = centreOf(box);
-    const dx = toward.x - centre.x;
-    const dy = toward.y - centre.y;
+/** Walk out from the center of a box toward a point, stopping at the border. */
+function sidePoint(box, toward) {
+    const center = centerOf(box);
+    const dx = toward.x - center.x;
+    const dy = toward.y - center.y;
     if (dx === 0 && dy === 0)
-        return centre;
+        return center;
     const scaleX = dx === 0 ? Infinity : box.width / 2 / Math.abs(dx);
     const scaleY = dy === 0 ? Infinity : box.height / 2 / Math.abs(dy);
     const scale = Math.min(scaleX, scaleY);
-    return { x: centre.x + dx * scale, y: centre.y + dy * scale };
+    return { x: center.x + dx * scale, y: center.y + dy * scale };
 }
-// --- where a link meets a box -------------------------------------------------
-const SIDES = ['top', 'bottom', 'left', 'right'];
+// --- where an edge meets a box -------------------------------------------------
+// The four sides an edge may attach to. Deliberately not `ATTACH_SIDES` from
+// `ast.ts`, which carries `center` as well because an alignment can share a
+// center line and an attachment cannot sit on one.
+const ATTACH_SIDES = ['top', 'bottom', 'left', 'right'];
 /**
- * Work out where every link meets every box.
+ * Work out where every edge meets every box.
  *
  * An author names a *side* — `to: top` — and never a point on it. Alone on a
- * side a link lands at its centre; sharing the side with others, the points
+ * side an edge lands at its center; sharing the side with others, the points
  * spread so they do not sit on top of each other. Which one goes where is
- * derived from where the far ends actually are, never chosen: of two links
+ * derived from where the far ends actually are, never chosen: of two edges
  * arriving at one top edge, the one coming from further left arrives further
  * left. That is the same rule as box non-overlap — the tool separates things by
  * default, and reads the direction off the solved layout rather than asking.
  *
- * Where several links run between the *same* pair of sides that rule has
+ * Where several edges run between the *same* pair of sides that rule has
  * nothing to read, and a `Bundle` supplies the order instead — see there.
  */
-function planEndpoints(links, measurer, fontSize) {
+function planEndpoints(edges, measurer, fontSize) {
     const claims = new Map();
     const achieved = new Map();
     const named = new Map();
-    const bundles = planBundles(links, measurer, fontSize);
-    const spreads = planSpreads(links, measurer, fontSize);
-    for (const link of links) {
-        named.set(link, {});
-        const fromSide = sideAttr(link, 'from');
-        const toSide = sideAttr(link, 'to');
+    const bundles = planBundles(edges, measurer, fontSize);
+    const spreads = planSpreads(edges, measurer, fontSize);
+    for (const edge of edges) {
+        named.set(edge, {});
+        const fromSide = sideAttr(edge, 'from');
+        const toSide = sideAttr(edge, 'to');
         if (fromSide) {
-            claim(claims, link.from, fromSide, {
-                link,
+            claim(claims, edge.from, fromSide, {
+                edge,
                 which: 'start',
                 side: fromSide,
-                toward: centreOf(faceOf(link.to)),
-                rank: rankIn(bundles.get(link), link, link.from, fromSide),
+                toward: centerOf(faceOf(edge.to)),
+                rank: rankIn(bundles.get(edge), edge, edge.from, fromSide),
             });
         }
         if (toSide) {
-            claim(claims, link.to, toSide, {
-                link,
+            claim(claims, edge.to, toSide, {
+                edge,
                 which: 'end',
                 side: toSide,
-                toward: centreOf(faceOf(link.from)),
-                rank: rankIn(bundles.get(link), link, link.to, toSide),
+                toward: centerOf(faceOf(edge.from)),
+                rank: rankIn(bundles.get(edge), edge, edge.to, toSide),
             });
         }
     }
@@ -463,18 +494,18 @@ function planEndpoints(links, measurer, fontSize) {
             const along = side === 'top' || side === 'bottom' ? 'x' : 'y';
             const span = along === 'x' ? face.width : face.height;
             const origin = along === 'x' ? face.x : face.y;
-            // Far ends first, as ever; a bundle's own lane order settles the links
+            // Far ends first, as ever; a bundle's own lane order settles the edges
             // that share one, which are precisely the ones the first key cannot.
             const ordered = [...group].sort((a, b) => a.toward[along] - b.toward[along] || (a.rank ?? 0) - (b.rank ?? 0));
-            // A bundle's lanes have to hold whole labels apart rather than the points
+            // A bundle's lanes have to hold whole texts apart rather than the points
             // of two arrows, so its step is the one that governs the side it lands on.
-            const wanted = Math.max(ATTACH_STEP, ...group.map((entry) => bundles.get(entry.link)?.step ?? 0));
+            const wanted = Math.max(ATTACH_STEP, ...group.map((entry) => bundles.get(entry.edge)?.step ?? 0));
             const usable = Math.max(0, span - ATTACH_MARGIN * 2);
             const step = ordered.length > 1 ? Math.min(wanted, usable / (ordered.length - 1)) : 0;
             const first = origin + span / 2 - (step * (ordered.length - 1)) / 2;
             ordered.forEach((entry, index) => {
                 const at = first + index * step;
-                named.get(entry.link)[entry.which] = anchorOn(face, side, at);
+                named.get(entry.edge)[entry.which] = anchorOn(face, side, at);
             });
             // What the side could actually give, which is less than `wanted` when it
             // is too short for the group. `bowBundles` makes up the difference.
@@ -488,34 +519,34 @@ function planEndpoints(links, measurer, fontSize) {
     // Fill in the ends the author said nothing about, now that the named ones
     // are known: an unnamed end aims at wherever its partner ended up.
     const ends = new Map();
-    for (const link of links) {
-        const partial = named.get(link);
-        const fromFace = faceOf(link.from);
-        const toFace = faceOf(link.to);
-        // Several links between one pair of boxes with no side named anywhere: the
+    for (const edge of edges) {
+        const partial = named.get(edge);
+        const fromFace = faceOf(edge.from);
+        const toFace = faceOf(edge.to);
+        // Several edges between one pair of boxes with no side named anywhere: the
         // line each would have drawn alone, moved aside so they do not coincide.
-        const spread = spreads.get(link);
+        const spread = spreads.get(edge);
         if (spread) {
-            ends.set(link, { ...parallelEnds(fromFace, toFace, spread.offset), bow: spread.bow });
+            ends.set(edge, { ...parallelEnds(fromFace, toFace, spread.offset), bow: spread.bow });
             continue;
         }
         // With neither end named this is the straight line it always was, each end
-        // aiming at the other box's centre.
-        const start = partial.start ?? free(fromFace, partial.end ?? centreOf(toFace));
-        const end = partial.end ?? free(toFace, partial.start ?? centreOf(fromFace));
-        ends.set(link, { start, end, bow: bows.get(link) });
+        // aiming at the other box's center.
+        const start = partial.start ?? free(fromFace, partial.end ?? centerOf(toFace));
+        const end = partial.end ?? free(toFace, partial.start ?? centerOf(fromFace));
+        ends.set(edge, { start, end, bow: bows.get(edge) });
     }
     return ends;
 }
 /**
- * Group the links that run between the same pair of sides, and work out the
+ * Group the edges that run between the same pair of sides, and work out the
  * lane order and lane width each group needs.
  *
- * Only a link whose author named *both* sides can be in a bundle: a bundle is a
+ * Only an edge whose author named *both* sides can be in a bundle: a bundle is a
  * statement about two specific edges, and an end with no side named has not
  * picked one yet.
  */
-function planBundles(links, measurer, fontSize) {
+function planBundles(edges, measurer, fontSize) {
     const ids = new Map();
     const idOf = (node) => {
         let id = ids.get(node);
@@ -526,13 +557,13 @@ function planBundles(links, measurer, fontSize) {
         return id;
     };
     const groups = new Map();
-    for (const link of links) {
-        const fromSide = sideAttr(link, 'from');
-        const toSide = sideAttr(link, 'to');
-        if (!fromSide || !toSide || link.from === link.to)
+    for (const edge of edges) {
+        const fromSide = sideAttr(edge, 'from');
+        const toSide = sideAttr(edge, 'to');
+        if (!fromSide || !toSide || edge.from === edge.to)
             continue;
-        const a = { node: link.from, side: fromSide };
-        const b = { node: link.to, side: toSide };
+        const a = { node: edge.from, side: fromSide };
+        const b = { node: edge.to, side: toSide };
         const keyA = `${idOf(a.node)}:${a.side}`;
         const keyB = `${idOf(b.node)}:${b.side}`;
         // The pair is unordered — `a -> b` and `b -> a` join the same two edges —
@@ -542,35 +573,35 @@ function planBundles(links, measurer, fontSize) {
         const ends = swap ? [b, a] : [a, b];
         const group = groups.get(key);
         if (group)
-            group.links.push(link);
+            group.edges.push(edge);
         else
-            groups.set(key, { ends, links: [link] });
+            groups.set(key, { ends, edges: [edge] });
     }
     const bundles = new Map();
     for (const group of groups.values()) {
-        if (group.links.length < 2)
+        if (group.edges.length < 2)
             continue;
         const [first, second] = group.ends;
         const t0 = tangentOf(first.side);
         const t1 = tangentOf(second.side);
-        const from = sideCentre(first);
-        const to = sideCentre(second);
+        const from = sideCenter(first);
+        const to = sideCenter(second);
         const run = { x: to.x - from.x, y: to.y - from.y };
         // Nesting is a matter of which side of the line each end steps toward. Step
         // both ends to the same side of the run and the whole line translates;
         // step them to opposite sides and it pivots, which is a crossing.
         const aligned = cross(run, t0) * cross(run, t1) >= 0;
         const sense = aligned ? 1 : -1;
-        // Two links leaving in opposite directions are the ordinary case, and which
+        // Two edges leaving in opposite directions are the ordinary case, and which
         // lane each takes is then read off the diagram rather than off the order the
         // author happened to type them in: a line keeps to one side of its own run.
-        // Links pointing the same way have no such signal and fall back to the file.
-        const order = new Map(group.links.map((link, index) => [link, index]));
-        const lanes = [...group.links].sort((a, b) => Number(a.from !== first.node) - Number(b.from !== first.node) ||
+        // Edges pointing the same way have no such signal and fall back to the file.
+        const order = new Map(group.edges.map((edge, index) => [edge, index]));
+        const lanes = [...group.edges].sort((a, b) => Number(a.from !== first.node) - Number(b.from !== first.node) ||
             order.get(a) - order.get(b));
-        // One lane apart moves a link's start by `step` along one side and its end
+        // One lane apart moves an edge's start by `step` along one side and its end
         // by `step` along the other, so the midpoint of the line — which is where
-        // its label goes — moves by the average of the two.
+        // its text goes — moves by the average of the two.
         const drift = { x: (t0.x + sense * t1.x) / 2, y: (t0.y + sense * t1.y) / 2 };
         const bundle = {
             ends: group.ends,
@@ -578,41 +609,41 @@ function planBundles(links, measurer, fontSize) {
             aligned,
             step: Math.max(ATTACH_STEP, laneStep(lanes, drift, measurer, fontSize)),
         };
-        for (const link of lanes)
-            bundles.set(link, bundle);
+        for (const edge of lanes)
+            bundles.set(edge, bundle);
     }
     return bundles;
 }
 /**
- * The sideways offset each link takes when several run between the same two
+ * The sideways offset each edge takes when several run between the same two
  * boxes and none of them names a side.
  *
- * An unnamed end has no side to spread along: it aims at the far box's centre
- * and attaches wherever that ray crosses the border, so every link in such a
+ * An unnamed end has no side to spread along: it aims at the far box's center
+ * and attaches wherever that ray crosses the border, so every edge in such a
  * group produces the *same* ray and they are drawn on top of one another —
- * one visible line, every label stacked on one point. `planEndpoints` cannot
+ * one visible line, every text stacked on one point. `planEndpoints` cannot
  * see this and `planBundles` will not, since a bundle is a statement about two
  * named edges.
  *
  * The repair keeps the attachment rule exactly as it is and only stops two
- * links using it at the same place: the line a link would have drawn alone is
+ * edges using it at the same place: the line an edge would have drawn alone is
  * translated across its own run by a lane, which is the straight-line version
- * of the nesting a bundle already gives curves. A lone link is in no group and
+ * of the nesting a bundle already gives curves. A lone edge is in no group and
  * so is untouched.
  *
  * Where the boxes are too small to hold the group at full spacing, the ends
  * are squeezed evenly to fit the edge — there is nowhere further to attach —
  * and the shortfall is made up in the middle instead: each line bows across
- * its run by exactly what its endpoints could not give it, so the labels, which
+ * its run by exactly what its endpoints could not give it, so the texts, which
  * ride at the midpoints, come apart even though the arrows do not. The bow is
  * therefore derived rather than styled, and it is zero whenever the edge was
  * long enough, which is why the ordinary case is still a straight line.
  *
- * A `between` link is left out. Its route is the corridor it named, its lane
+ * A `between` edge is left out. Its route is the corridor it named, its lane
  * inside that corridor is `planCorridors`' business, and `aimFreeEnds` will
  * re-aim these ends at the corridor afterwards regardless.
  */
-function planSpreads(links, measurer, fontSize) {
+function planSpreads(edges, measurer, fontSize) {
     const ids = new Map();
     const idOf = (node) => {
         let id = ids.get(node);
@@ -623,47 +654,47 @@ function planSpreads(links, measurer, fontSize) {
         return id;
     };
     const groups = new Map();
-    for (const link of links) {
-        if (sideAttr(link, 'from') || sideAttr(link, 'to'))
+    for (const edge of edges) {
+        if (sideAttr(edge, 'from') || sideAttr(edge, 'to'))
             continue;
-        if (link.from === link.to || link.between)
+        if (edge.from === edge.to || edge.between)
             continue;
-        const a = idOf(link.from);
-        const b = idOf(link.to);
+        const a = idOf(edge.from);
+        const b = idOf(edge.to);
         const swap = b < a;
         const key = swap ? `${b}|${a}` : `${a}|${b}`;
-        const first = swap ? link.to : link.from;
+        const first = swap ? edge.to : edge.from;
         const group = groups.get(key);
         if (group)
-            group.links.push(link);
+            group.edges.push(edge);
         else
-            groups.set(key, { first, links: [link] });
+            groups.set(key, { first, edges: [edge] });
     }
     const spreads = new Map();
     for (const group of groups.values()) {
-        if (group.links.length < 2)
+        if (group.edges.length < 2)
             continue;
-        const from = centreOf(faceOf(group.first));
-        const sample = group.links[0];
+        const from = centerOf(faceOf(group.first));
+        const sample = group.edges[0];
         const other = sample.from === group.first ? sample.to : sample.from;
-        const to = centreOf(faceOf(other));
+        const to = centerOf(faceOf(other));
         const dx = to.x - from.x;
         const dy = to.y - from.y;
         const length = Math.hypot(dx, dy) || 1;
-        // Translating the line moves its midpoint — where the label goes — by
+        // Translating the line moves its midpoint — where the text goes — by
         // exactly this, so it is the drift `laneStep` needs.
         const across = { x: -dy / length, y: dx / length };
-        // The same derived order a bundle uses: links pointing opposite ways each
+        // The same derived order a bundle uses: edges pointing opposite ways each
         // keep to one side of their own run, so a reciprocal pair reads as a
-        // circulation, and only links pointing the same way fall back to the file.
-        const order = new Map(group.links.map((link, index) => [link, index]));
-        const lanes = [...group.links].sort((a, b) => Number(a.from !== group.first) - Number(b.from !== group.first) ||
+        // circulation, and only edges pointing the same way fall back to the file.
+        const order = new Map(group.edges.map((edge, index) => [edge, index]));
+        const lanes = [...group.edges].sort((a, b) => Number(a.from !== group.first) - Number(b.from !== group.first) ||
             order.get(a) - order.get(b));
         // How far a lane may be shifted before its line no longer passes through the
         // box at all. `exitAlong` clamps beyond that, which piles the outer lanes
-        // onto a corner and puts their labels back on top of each other — so the
+        // onto a corner and puts their texts back on top of each other — so the
         // group is squeezed evenly instead, exactly as `planEndpoints` squeezes a
-        // side too short for the links arriving on it, and just as silently.
+        // side too short for the edges arriving on it, and just as silently.
         const reach = (node) => {
             const face = faceOf(node);
             const byX = across.x === 0 ? Infinity : face.width / 2 / Math.abs(across.x);
@@ -672,22 +703,22 @@ function planSpreads(links, measurer, fontSize) {
         };
         // Which way lane 0 lies is arbitrary, so fix it the way the rest of the
         // renderer does — toward increasing x, or increasing y where the run is
-        // horizontal. Without this the first link written is topmost on a rightward
+        // horizontal. Without this the first edge written is topmost on a rightward
         // run and rightmost on a downward one, for no reason a reader could see.
         const orient = across.x < 0 || (across.x === 0 && across.y < 0) ? -1 : 1;
         const usable = 2 * Math.min(reach(group.first), reach(other));
         const wanted = Math.max(ATTACH_STEP, laneStep(lanes, across, measurer, fontSize));
         const step = Math.min(wanted, usable / (lanes.length - 1));
-        lanes.forEach((link, index) => {
+        lanes.forEach((edge, index) => {
             const place = index - (lanes.length - 1) / 2;
             // The lane is measured across the pair's own run, which has one direction;
-            // a link written the other way round travels the opposite way and would
+            // an edge written the other way round travels the opposite way and would
             // otherwise take the same offset to the opposite side, putting a
             // reciprocal pair back on one line. Negated, both keep to their own left,
             // which is the circulation a bundle already draws.
-            const sense = (link.from === group.first ? 1 : -1) * orient;
+            const sense = (edge.from === group.first ? 1 : -1) * orient;
             const shortfall = place * (wanted - step) * sense;
-            spreads.set(link, {
+            spreads.set(edge, {
                 offset: place * step * sense,
                 bow: { x: across.x * shortfall, y: across.y * shortfall },
             });
@@ -696,11 +727,11 @@ function planSpreads(links, measurer, fontSize) {
     return spreads;
 }
 /**
- * The bow each bundled link needs, where the sides it was given were too short
- * to hold the group at the spacing its labels asked for.
+ * The bow each bundled edge needs, where the sides it was given were too short
+ * to hold the group at the spacing its texts asked for.
  *
  * A named side is squeezed exactly as an unnamed group's edge is — the step
- * shrinks to `usable / (n - 1)` and the labels ride down on top of each other —
+ * shrinks to `usable / (n - 1)` and the texts ride down on top of each other —
  * and until this existed, naming the two sides the tool would have chosen
  * anyway made the picture strictly worse than saying nothing. That is not a
  * line worth defending, so the same repair applies: a lane's midpoint is not
@@ -733,35 +764,35 @@ function bowBundles(bundles, achieved) {
         };
         if (short.x === 0 && short.y === 0)
             continue;
-        bundle.lanes.forEach((link, index) => {
+        bundle.lanes.forEach((edge, index) => {
             const place = index - (bundle.lanes.length - 1) / 2;
-            bows.set(link, { x: short.x * place, y: short.y * place });
+            bows.set(edge, { x: short.x * place, y: short.y * place });
         });
     }
     return bows;
 }
 /**
- * How far apart adjacent lanes must sit for their labels to clear each other.
+ * How far apart adjacent lanes must sit for their texts to clear each other.
  *
- * The labels are knockout rectangles, so two of them clear when they are apart
+ * The texts are knockout rectangles, so two of them clear when they are apart
  * on *either* axis — hence the smaller of the two answers. `drift` is how far
  * the midpoint travels per unit of step, and it is never zero: the two ends
  * cancel only when both sides run the same way, and two such sides are always
  * `aligned`, which adds rather than subtracts.
  */
 function laneStep(lanes, drift, measurer, fontSize) {
-    const labelled = lanes.filter((link) => link.label !== undefined);
-    if (labelled.length < 2)
+    const withText = lanes.filter((edge) => edge.text !== undefined);
+    if (withText.length < 2)
         return 0;
-    const need = (axis) => Math.max(...labelled.map((link) => labelExtent(link.label, link.appearance, axis, measurer, fontSize, link.line)));
+    const need = (axis) => Math.max(...withText.map((edge) => textExtent(edge.lines, edge.textAttrs, axis, measurer, fontSize, edge.line)));
     const along = (axis, reach) => reach === 0 ? Infinity : need(axis) / Math.abs(reach);
     return Math.min(along('x', drift.x), along('y', drift.y));
 }
-/** Which lane of its bundle a link's end at this side takes, if it is in one. */
-function rankIn(bundle, link, node, side) {
+/** Which lane of its bundle an edge's end at this side takes, if it is in one. */
+function rankIn(bundle, edge, node, side) {
     if (!bundle)
         return undefined;
-    const lane = bundle.lanes.indexOf(link);
+    const lane = bundle.lanes.indexOf(edge);
     const [first, second] = bundle.ends;
     if (node === first.node && side === first.side)
         return lane;
@@ -774,7 +805,7 @@ function tangentOf(side) {
     return side === 'top' || side === 'bottom' ? { x: 1, y: 0 } : { x: 0, y: 1 };
 }
 /** The midpoint of one side of a box. */
-function sideCentre(end) {
+function sideCenter(end) {
     const face = faceOf(end.node);
     const along = end.side === 'top' || end.side === 'bottom' ? face.width : face.height;
     const origin = end.side === 'top' || end.side === 'bottom' ? face.x : face.y;
@@ -810,20 +841,20 @@ function anchorOn(face, side, at) {
 }
 /** An end with no side named: leave from the border, pointing at the far end. */
 function free(face, toward) {
-    const point = edgePoint(face, toward);
-    const centre = centreOf(face);
-    const dx = point.x - centre.x;
-    const dy = point.y - centre.y;
+    const point = sidePoint(face, toward);
+    const center = centerOf(face);
+    const dx = point.x - center.x;
+    const dy = point.y - center.y;
     const length = Math.hypot(dx, dy) || 1;
     return { x: point.x, y: point.y, tx: dx / length, ty: dy / length };
 }
 /**
  * Walk from a point inside a box along a direction, stopping at the border.
  *
- * `edgePoint` walks from the centre, which is the only place a single line
+ * `sidePoint` walks from the center, which is the only place a single line
  * passes through. A fanned-out group's lines are parallel to that one and
  * beside it, so each needs the border crossing of its own line rather than of
- * the centre's — which is what keeps the group parallel instead of splayed.
+ * the center's — which is what keeps the group parallel instead of splayed.
  */
 function exitAlong(box, from, dir) {
     // A shift wider than the box leaves the origin outside it; clamping back in
@@ -838,19 +869,19 @@ function exitAlong(box, from, dir) {
     return { x: x + dir.x * Math.max(0, t), y: y + dir.y * Math.max(0, t) };
 }
 /**
- * Both ends of a link that named no side, moved `offset` sideways across its
+ * Both ends of an edge that named no side, moved `offset` sideways across its
  * own run.
  *
  * The whole line is translated rather than each end being nudged along its
- * border, so the result is genuinely parallel to the line the link would have
+ * border, so the result is genuinely parallel to the line the edge would have
  * drawn alone, exactly `offset` away from it. Where each end lands then falls
  * out of that: level boxes put both points further along the same two edges,
  * and a diagonal pair whose line leaves through a corner puts one point on each
  * of the two edges meeting there. Neither is a case in the code.
  */
 function parallelEnds(from, to, offset) {
-    const a = centreOf(from);
-    const b = centreOf(to);
+    const a = centerOf(from);
+    const b = centerOf(to);
     const dx = b.x - a.x;
     const dy = b.y - a.y;
     const length = Math.hypot(dx, dy) || 1;
@@ -922,61 +953,61 @@ function gapBetween(a, b, aName, bName, wanted, line) {
     };
 }
 /**
- * Route every link that named a gap.
+ * Route every edge that named a gap.
  *
- * Links sharing one gap share its lanes, spread like attachments on a side and
+ * Edges sharing one gap share its lanes, spread like attachments on a side and
  * ordered the same derived way — by where their ends actually sit, so the two
- * arriving at Dropbox's left edge in one order run through the corridor in that
+ * arriving at the hub's left edge in one order run through the corridor in that
  * same order and never cross.
  */
-function planCorridors(links, ends, measurer, fontSize) {
+function planCorridors(edges, ends, measurer, fontSize) {
     const plans = new Map();
     const groups = new Map();
-    for (const link of links) {
-        if (!link.between)
+    for (const edge of edges) {
+        if (!edge.between)
             continue;
-        const [first, second] = link.between.nodes;
-        const gap = gapBetween(faceOf(first), faceOf(second), first.name, second.name, link.between.axis, link.line);
+        const [first, second] = edge.between.nodes;
+        const gap = gapBetween(faceOf(first), faceOf(second), first.name, second.name, edge.between.axis, edge.line);
         // The pair names one gap however the author ordered them. The axis is in
-        // the key because a diagonal pair really does have two, and two links may
+        // the key because a diagonal pair really does have two, and two edges may
         // legitimately name the same pair and take different ones.
         const key = [gap.axis, ...[first.name, second.name].sort()].join(' ');
         const group = groups.get(key);
         if (group)
-            group.members.push(link);
+            group.members.push(edge);
         else
-            groups.set(key, { ...gap, members: [link] });
+            groups.set(key, { ...gap, members: [edge] });
     }
     for (const group of groups.values()) {
-        const along = (link) => {
-            const { start, end } = ends.get(link);
+        const along = (edge) => {
+            const { start, end } = ends.get(edge);
             return (start[group.axis] + end[group.axis]) / 2;
         };
         const ordered = [...group.members].sort((a, b) => along(a) - along(b));
         // Lanes are spread as attachments on a side are, including the squeeze when
         // there is not enough room — see `planEndpoints`. The step is wider here,
-        // because a lane carries a whole label rather than the point of an arrow,
-        // and two lanes closer together than a label is deep would draw the labels
+        // because a lane carries a whole text rather than the point of an arrow,
+        // and two lanes closer together than a text is deep would draw the texts
         // over each other. Still derived, not chosen: it is the size of what is
         // actually running along the corridor.
         const span = group.hi - group.lo;
         const usable = Math.max(0, span - ATTACH_MARGIN * 2);
-        const want = Math.max(ATTACH_STEP, ...ordered.map((link) => laneExtent(link, group.axis, measurer, fontSize)));
+        const want = Math.max(ATTACH_STEP, ...ordered.map((edge) => laneExtent(edge, group.axis, measurer, fontSize)));
         const step = ordered.length > 1 ? Math.min(want, usable / (ordered.length - 1)) : 0;
         const firstLane = group.lo + span / 2 - (step * (ordered.length - 1)) / 2;
-        ordered.forEach((link, index) => {
-            const { start, end } = ends.get(link);
+        ordered.forEach((edge, index) => {
+            const { start, end } = ends.get(edge);
             const run = group.axis === 'y' ? 'x' : 'y';
-            // The corridor binds only where the link is actually passing the pair, so
-            // its reach is the overlap of the pair's extent with the link's own.
+            // The corridor binds only where the edge is actually passing the pair, so
+            // its reach is the overlap of the pair's extent with the edge's own.
             const enterAt = Math.max(group.across[0], Math.min(start[run], end[run]));
             const leaveAt = Math.min(group.across[1], Math.max(start[run], end[run]));
             if (leaveAt <= enterAt) {
-                const [a, b] = link.between.nodes;
-                throw new SourceError(`this link never passes between "${a.name}" and "${b.name}"`, link.line);
+                const [a, b] = edge.between.nodes;
+                throw new SourceError(`this edge never passes between "${a.name}" and "${b.name}"`, edge.line);
             }
             const forward = end[run] >= start[run];
-            plans.set(link, {
+            plans.set(edge, {
                 axis: group.axis,
                 lane: firstLane + index * step,
                 enter: forward ? enterAt : leaveAt,
@@ -987,45 +1018,45 @@ function planCorridors(links, ends, measurer, fontSize) {
     return plans;
 }
 /**
- * An end whose side the author did not name aims at the far box's centre, which
+ * An end whose side the author did not name aims at the far box's center, which
  * is the wrong thing to aim at once the line has been told to go somewhere else
  * on the way. Point those ends at the corridor instead.
  */
-function aimFreeEnds(links, ends, corridors) {
-    for (const link of links) {
-        const plan = corridors.get(link);
+function aimFreeEnds(edges, ends, corridors) {
+    for (const edge of edges) {
+        const plan = corridors.get(edge);
         if (!plan)
             continue;
-        const current = ends.get(link);
+        const current = ends.get(edge);
         const start = current.start.side === undefined
-            ? free(faceOf(link.from), corridorPoint(plan, plan.enter))
+            ? free(faceOf(edge.from), corridorPoint(plan, plan.enter))
             : current.start;
         const end = current.end.side === undefined
-            ? free(faceOf(link.to), corridorPoint(plan, plan.leave))
+            ? free(faceOf(edge.to), corridorPoint(plan, plan.leave))
             : current.end;
-        ends.set(link, { start, end });
+        ends.set(edge, { start, end });
     }
 }
 /**
- * How much room a link's label takes across the corridor — its depth in a
- * horizontal channel, its width in a vertical one. Zero for an unlabelled link,
+ * How much room an edge's text takes across the corridor — its depth in a
+ * horizontal channel, its width in a vertical one. Zero for an edge with no text,
  * which needs no more than the arrow spacing.
  *
- * `labelExtent` measures the knockout along whichever axis it is handed, and the
+ * `textExtent` measures the knockout along whichever axis it is handed, and the
  * axis wanted here is the one the channel is measured on rather than the one the
- * link runs along — a channel measured vertically carries links running
- * horizontally, and what has to fit between two lanes of it is a label's depth.
+ * edge runs along — a channel measured vertically carries edges running
+ * horizontally, and what has to fit between two lanes of it is a text's depth.
  */
-function laneExtent(link, axis, measurer, fontSize) {
-    if (link.label === undefined)
+function laneExtent(edge, axis, measurer, fontSize) {
+    if (edge.lines === undefined)
         return 0;
-    return labelExtent(link.label, link.appearance, axis, measurer, fontSize, link.line);
+    return textExtent(edge.lines, edge.textAttrs, axis, measurer, fontSize, edge.line);
 }
 function corridorPoint(plan, at) {
     return plan.axis === 'y' ? { x: at, y: plan.lane } : { x: plan.lane, y: at };
 }
 /**
- * The path a corridor link takes: a curve out of its start into the gap, the
+ * The path a corridor edge takes: a curve out of its start into the gap, the
  * straight run along the gap, and a curve out of the gap to its end. It is
  * three pieces rather than one cubic because a single curve has no way to stay
  * inside an interval over part of its length — which is the whole claim the
@@ -1064,28 +1095,28 @@ function corridorReach(from, to, axis) {
     const distance = Math.hypot(to.x - from.x, to.y - from.y);
     return Math.min(140, Math.max(8, Math.min(distance * 0.4, run / 2)));
 }
-function sideAttr(link, key) {
-    const value = link.attrs[key];
+function sideAttr(edge, key) {
+    const value = edge.attrs[key];
     if (value === undefined)
         return undefined;
-    if (!SIDES.includes(value)) {
-        throw new SourceError(`"${key}: ${value}" is not a side — use ${SIDES.join(', ')}`, link.line);
+    if (!ATTACH_SIDES.includes(value)) {
+        throw new SourceError(`"${key}: ${value}" is not a side — use ${ATTACH_SIDES.join(', ')}`, edge.line);
     }
     return value;
 }
-function arrowMarker(colour) {
-    const id = markerId(colour);
+function arrowMarker(color) {
+    const id = markerId(color);
     return [
         `    <marker id="${id}" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="${ARROW_MARKER_WIDTH}" markerHeight="${ARROW_MARKER_WIDTH}" orient="auto-start-reverse">`,
-        `      <path d="M 0 0 L 10 5 L 0 10 z" fill="${colour}"/>`,
+        `      <path d="M 0 0 L 10 5 L 0 10 z" fill="${color}"/>`,
         '    </marker>',
         `    <marker id="${id}-back" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="${ARROW_MARKER_WIDTH}" markerHeight="${ARROW_MARKER_WIDTH}" orient="auto-start-reverse">`,
-        `      <path d="M 0 0 L 10 5 L 0 10 z" fill="${colour}"/>`,
+        `      <path d="M 0 0 L 10 5 L 0 10 z" fill="${color}"/>`,
         '    </marker>',
     ].join('\n');
 }
-function markerId(colour) {
-    return `arrow-${colour.replace(/[^a-zA-Z0-9]/g, '')}`;
+function markerId(color) {
+    return `arrow-${color.replace(/[^a-zA-Z0-9]/g, '')}`;
 }
 /** The rectangle actually drawn. Differs from the node box only for a deck. */
 function faceOf(node) {
@@ -1096,7 +1127,7 @@ function faceOf(node) {
         height: node.height - node.inset,
     };
 }
-function centreOf(box) {
+function centerOf(box) {
     return { x: box.x + box.width / 2, y: box.y + box.height / 2 };
 }
 /**
@@ -1109,42 +1140,92 @@ function sized(block, size, fontSize) {
         return block;
     return `  <g font-size="${size}px">\n${block}\n  </g>`;
 }
-function textBlock(lines, x, top, width, lineHeight, fontSize, style) {
-    const anchorX = style.align === 'middle' ? x + width / 2 : style.align === 'end' ? x + width : x;
+/**
+ * Draw a block of text into the room it was given.
+ *
+ * Two independent questions, which is why there are two words for them. `side`
+ * is where the block sits across that room, from the horizontal half of the
+ * text's `at`. `align` is how the block's own lines range against each other,
+ * which matters whenever they are of unequal length and is a different thing
+ * from where the block is.
+ *
+ * Where the block is as wide as the room — which is every text whose box is
+ * sized from it, so nearly all of them — the two coincide and `side` changes
+ * nothing.
+ */
+function textBlock(lines, x, y, lineHeight, fontSize, box, style) {
+    // `box` is the ink the text occupies, worked out by the resolver — the one
+    // place that decides where a text sits, because `hub text` is a placement
+    // target and the answer has to be a number before anything is solved.
+    const blockLeft = x + box.x;
+    const top = y + box.y;
+    const anchorX = style.align === 'middle'
+        ? blockLeft + box.width / 2
+        : style.align === 'end'
+            ? blockLeft + box.width
+            : blockLeft;
     return lines
         .map((line, index) => {
-        if (line.length === 0)
+        if (plain(line).length === 0)
             return '';
         const baseline = top + index * lineHeight + lineHeight / 2 + fontSize * 0.35;
-        // A label's first line is its name; anything after it is a qualifier, and
-        // `subtext:` is how a box says that qualifier should read as secondary.
-        const colour = index === 0 ? style.colour : style.subColour ?? style.colour;
-        return `  <text x="${round(anchorX)}" y="${round(baseline)}" fill="${colour}" text-anchor="${style.align}">${escapeXml(line)}</text>`;
+        // One `<text>` per line, with a `<tspan>` per run inside it, so the runs
+        // flow from the line's own anchor and a mark never moves a character.
+        // A line drawn in one color says so on the `<text>` and emits no spans at
+        // all, which is what keeps a whole quiet line identical to what the
+        // `subtext:` it replaced produced.
+        const colors = line.map((run) => style.ink(run, style.color));
+        const uniform = colors.every((color) => color === colors[0]);
+        const body = uniform
+            ? escapeXml(plain(line))
+            : line
+                .map((run, run_index) => colors[run_index] === style.color
+                ? escapeXml(run.text)
+                : `<tspan fill="${colors[run_index]}">${escapeXml(run.text)}</tspan>`)
+                .join('');
+        return `  <text x="${round(anchorX)}" y="${round(baseline)}" fill="${uniform ? colors[0] ?? style.color : style.color}" text-anchor="${style.align}">${body}</text>`;
     })
         .filter((element) => element.length > 0)
         .join('\n');
 }
 /**
- * A colour is written as the viewer will receive it — `#14532d`, or any CSS
- * colour. The renderer keeps no list of colour words of its own, so a diagram
- * is never limited to the ones somebody remembered to add here.
+ * The color a marked-up run is drawn in. The mark names a *style*, never a
+ * color, so the word borrows a meaning the file already has rather than
+ * restating a value that goes stale the day the thing it means is recolored.
+ * The resolver has already refused a mark naming a style that does not exist or
+ * that says nothing about text.
  */
-function colourOf(appearance, fallback) {
-    return appearance['stroke'] ?? fallback;
+function runInk(run, own, markup, theme) {
+    if (run.style === undefined)
+        return own;
+    return namedColor(markup[run.style], theme);
 }
 /**
- * The colour for every label line after the first, or undefined when the box
- * said nothing and all its lines should read alike. `muted` is the one reserved
- * word: it defers to the theme, so a label's qualifier stays readable when the
- * theme changes. Anything else is a colour, same as `stroke` and `fill` take.
+ * A text's own color. `muted` is the one reserved word: it defers to the theme,
+ * so a quiet line stays readable when the theme changes. Anything else is a
+ * color, the same as `fill:` and `border:` take.
  */
-function subtextOf(appearance, theme) {
-    const named = appearance['subtext'];
-    if (named === undefined)
-        return undefined;
-    if (named === 'muted')
-        return theme.mutedText;
-    return named;
+function textColorOf(textAttrs, theme, fallback) {
+    const value = textAttrs['color'];
+    return value === undefined ? fallback : namedColor(value, theme);
+}
+function namedColor(value, theme) {
+    return value === 'muted' ? theme.mutedText : value;
+}
+/**
+ * A color is written as the viewer will receive it — `#14532d`, or any CSS
+ * color. The renderer keeps no list of color words of its own, so a diagram
+ * is never limited to the ones somebody remembered to add here.
+ *
+ * Each names the part it colors, so each reads exactly one key. The word these
+ * replaced, `stroke:`, named no part and meant a different one on every kind,
+ * which is why a box's text could not be colored at all until `text:`.
+ */
+function borderOf(appearance, fallback) {
+    return appearance['border'] ?? fallback;
+}
+function lineOf(appearance, fallback) {
+    return appearance['line'] ?? fallback;
 }
 function fillOf(appearance, fallback) {
     return appearance['fill'] ?? fallback;