reladraw 0.1.0 → 0.2.0

package/dist/render.js

@@ -19,7 +19,7 @@ export const DARK_THEME = {
     mutedText: '#8b8b8b',
     link: '#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.
@@ -64,11 +64,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.links.map((link) => lineOf(link.appearance, theme.link)));
     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,
@@ -85,7 +85,7 @@ function drawNode(node, theme, measurer, fontSize) {
     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),
+            color: textOf(node.appearance, theme.text),
             align: 'start',
         }), size, fontSize);
     }
@@ -94,12 +94,12 @@ function drawNode(node, theme, measurer, fontSize) {
     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.
+        // there is one, sits under it and centered.
         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),
+                color: textOf(node.appearance, theme.text),
+                subColor: subtextOf(node.appearance, theme),
                 align: 'middle',
             }), size, fontSize));
         }
@@ -108,25 +108,28 @@ function drawNode(node, theme, measurer, fontSize) {
     const parts = [];
     const face = faceOf(node);
     const container = node.children.length > 0;
-    const stroke = colourOf(node.appearance, container ? theme.containerStroke : theme.boxStroke);
+    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 = textOf(node.appearance, theme.text);
+    const subColor = subtextOf(node.appearance, theme);
     // Deck copies sit behind the front face, furthest back drawn first.
     for (let depth = node.deckLabels.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}"/>`);
+        parts.push(`  <path d="${outlinePath(shape.outline, x, y, face.width, face.height)}" fill="${theme.containerFill}" stroke="${border}"/>`);
         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,
+                color: text,
                 align: 'start',
             }), size, fontSize));
         }
     }
-    parts.push(`  <path d="${outlinePath(shape.outline, face.x, face.y, face.width, face.height)}" fill="${fill}" stroke="${stroke}"/>`);
+    parts.push(`  <path d="${outlinePath(shape.outline, face.x, face.y, face.width, face.height)}" fill="${fill}" stroke="${border}"/>`);
     for (const extra of outlineDetail(shape.outline, face.x, face.y, face.width, face.height)) {
-        parts.push(`  <path d="${extra}" fill="none" stroke="${stroke}"/>`);
+        parts.push(`  <path d="${extra}" fill="none" stroke="${border}"/>`);
     }
     // 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.
@@ -135,24 +138,27 @@ function drawNode(node, theme, measurer, fontSize) {
     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.
+        // A leaf centers 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. Centered
+        // across is only the default: a label of several lines may say `align`, and
+        // there is genuine slack between lines of unequal length to range them in.
+        const leafAlign = labelStyleFor(node.label, node.line, 'middle').align;
         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',
+            color: text,
+            subColor,
+            align: leafAlign,
         }), 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.
+        // ranged left at the top; a caption is centered 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,
+            color: text,
+            subColor,
             align: labelStyle.align,
         }), size, fontSize));
         for (const child of node.children) {
@@ -161,7 +167,7 @@ function drawNode(node, theme, measurer, fontSize) {
     }
     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
+        // leaf's label is centered, so the icon centers 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;
@@ -226,12 +232,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 [
@@ -243,12 +249,12 @@ function drawIcon(icon, x, y, side, theme) {
 // --- links -------------------------------------------------------------------
 function drawLink(link, ends, corridor, theme, measurer, fontSize) {
     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(link.appearance, theme.link);
+    const markerEnd = ` marker-end="url(#${markerId(color)})"`;
+    const markerStart = link.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,7 +266,7 @@ 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}/>`);
+        parts.push(`  <path d="${path.d}" fill="none" stroke="${color}" stroke-width="${LINE_WIDTH}"${markerEnd}${markerStart}/>`);
         // The label 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;
@@ -277,7 +283,7 @@ 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.
         midX = (start.x + 3 * c1.x + 3 * c2.x + end.x) / 8;
@@ -298,19 +304,19 @@ 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
+        // caption on an arrow needs no vocabulary of its own. The block is centered
         // on the midpoint, which keeps a one-line label where it has always been.
         const size = fontSizeFor('link', link.appearance, fontSize, link.line);
         const textHeight = measurer.lineHeight(size);
@@ -328,9 +334,9 @@ function drawLink(link, ends, corridor, theme, measurer, fontSize) {
             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
+            // A colored link carries its meaning into its label; an uncolored
             // one leaves the words to read as ordinary text.
-            colour: colourOf(link.appearance, theme.text),
+            color: textOf(link.appearance, lineOf(link.appearance, theme.text)),
             align: 'middle',
         }), size, fontSize));
     }
@@ -399,17 +405,17 @@ 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. */
+/** Walk out from the center 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;
+    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'];
@@ -417,7 +423,7 @@ const SIDES = ['top', 'bottom', 'left', 'right'];
  * Work out where every link 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 a link 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
  * arriving at one top edge, the one coming from further left arrives further
@@ -442,7 +448,7 @@ function planEndpoints(links, measurer, fontSize) {
                 link,
                 which: 'start',
                 side: fromSide,
-                toward: centreOf(faceOf(link.to)),
+                toward: centerOf(faceOf(link.to)),
                 rank: rankIn(bundles.get(link), link, link.from, fromSide),
             });
         }
@@ -451,7 +457,7 @@ function planEndpoints(links, measurer, fontSize) {
                 link,
                 which: 'end',
                 side: toSide,
-                toward: centreOf(faceOf(link.from)),
+                toward: centerOf(faceOf(link.from)),
                 rank: rankIn(bundles.get(link), link, link.to, toSide),
             });
         }
@@ -500,9 +506,9 @@ function planEndpoints(links, measurer, fontSize) {
             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));
+        // 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(link, { start, end, bow: bows.get(link) });
     }
     return ends;
@@ -553,8 +559,8 @@ function planBundles(links, measurer, fontSize) {
         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;
@@ -587,7 +593,7 @@ function planBundles(links, measurer, fontSize) {
  * The sideways offset each link 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
+ * 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 link 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
@@ -643,10 +649,10 @@ function planSpreads(links, measurer, fontSize) {
     for (const group of groups.values()) {
         if (group.links.length < 2)
             continue;
-        const from = centreOf(faceOf(group.first));
+        const from = centerOf(faceOf(group.first));
         const sample = group.links[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;
@@ -750,10 +756,10 @@ function bowBundles(bundles, achieved) {
  * `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 labeled = lanes.filter((link) => link.label !== undefined);
+    if (labeled.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(...labeled.map((link) => labelExtent(link.label, link.appearance, axis, measurer, fontSize, link.line)));
     const along = (axis, reach) => reach === 0 ? Infinity : need(axis) / Math.abs(reach);
     return Math.min(along('x', drift.x), along('y', drift.y));
 }
@@ -774,7 +780,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;
@@ -811,19 +817,19 @@ 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 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
+ * `edgePoint` 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
@@ -849,8 +855,8 @@ function exitAlong(box, from, dir) {
  * 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;
@@ -987,7 +993,7 @@ 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.
  */
@@ -1008,7 +1014,7 @@ function aimFreeEnds(links, ends, corridors) {
 }
 /**
  * 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,
+ * horizontal channel, its width in a vertical one. Zero for an unlabeled link,
  * which needs no more than the arrow spacing.
  *
  * `labelExtent` measures the knockout along whichever axis it is handed, and the
@@ -1073,19 +1079,19 @@ function sideAttr(link, key) {
     }
     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 +1102,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 };
 }
 /**
@@ -1118,25 +1124,35 @@ function textBlock(lines, x, top, width, lineHeight, fontSize, style) {
         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>`;
+        const color = index === 0 ? style.color : style.subColor ?? style.color;
+        return `  <text x="${round(anchorX)}" y="${round(baseline)}" fill="${color}" text-anchor="${style.align}">${escapeXml(line)}</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
+ * 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 colourOf(appearance, fallback) {
-    return appearance['stroke'] ?? fallback;
+function borderOf(appearance, fallback) {
+    return appearance['border'] ?? fallback;
+}
+function lineOf(appearance, fallback) {
+    return appearance['line'] ?? fallback;
+}
+function textOf(appearance, fallback) {
+    return appearance['text'] ?? fallback;
 }
 /**
- * The colour for every label line after the first, or undefined when the box
+ * The color 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.
+ * theme changes. Anything else is a color, same as `text` and `fill` take.
  */
 function subtextOf(appearance, theme) {
     const named = appearance['subtext'];