reladraw 0.1.0 → 0.2.0

package/dist/ast.js

@@ -16,13 +16,13 @@ export function isDirection(word) {
     return DIRECTIONS.includes(word);
 }
 /**
- * Which edge of the target a `level with` shares. `centre` is the plain form;
+ * Which edge of the target a `level with` shares. `center` is the plain form;
  * the rest are written in front of it, as in `top level with media`.
  */
-export const EDGES = ['centre', 'top', 'bottom', 'left', 'right'];
+export const EDGES = ['center', 'top', 'bottom', 'left', 'right'];
 /** An edge belongs to one axis, so an alignment never has to say which. */
 export const EDGE_AXIS = {
-    centre: 'y',
+    center: 'y',
     top: 'y',
     bottom: 'y',
     left: 'x',
@@ -30,7 +30,7 @@ export const EDGE_AXIS = {
 };
 /**
  * The modifiers a placement understands, in brackets after its targets. Refused
- * by name when unrecognised, for the reason `DIAGRAM_KEYS` are: a modifier that
+ * by name when unrecognized, for the reason `DIAGRAM_KEYS` are: a modifier that
  * silently does nothing looks like a bug in the tool rather than a typo.
  */
 export const PLACEMENT_KEYS = ['gap'];
@@ -38,7 +38,7 @@ export const PLACEMENT_KEYS = ['gap'];
 export function describePlacement(placement) {
     const targets = listTargets(placement.targets);
     if (placement.kind === 'align') {
-        const edge = placement.edge === 'centre' ? '' : `${placement.edge} `;
+        const edge = placement.edge === 'center' ? '' : `${placement.edge} `;
         return `${edge}level with ${targets}`;
     }
     // "left of X" and "above X" are both good English; "above of X" is not.
@@ -65,7 +65,7 @@ export function describeAxis(axis) {
     return axis === 'y' ? 'vertically' : 'horizontally';
 }
 /**
- * What a label's brackets may say: `"Docker" (at: bottom, align: centre)`.
+ * What a label's brackets may say: `"Docker" (at: bottom, align: center)`.
  *
  * They are bracketed onto the label rather than written among the node's
  * attributes for the same reason a gap is bracketed onto its placement — they
@@ -76,3 +76,96 @@ export function describeAxis(axis) {
 export const LABEL_KEYS = ['at', 'align'];
 /** The attributes a `diagram` statement understands. */
 export const DIAGRAM_KEYS = ['background'];
+/**
+ * The attributes whose value is a color rather than text. A color is written
+ * as the viewer will receive it and the renderer keeps no list of color words
+ * of its own, so there is nothing to check a value *against* — but quoting is
+ * the author saying "this is text", and an unquoted value cannot hold a space,
+ * so prose has to be quoted to get in at all. Refusing a quoted color is
+ * therefore the whole of what can be checked here, and it happens to be the
+ * mistake people actually make: `subtext: "medium-fine"` reads as the text
+ * that goes underneath, and was accepted and dropped in silence.
+ */
+export const COLOR_KEYS = [
+    'fill',
+    'border',
+    'text',
+    'line',
+    'subtext',
+    'background',
+];
+/**
+ * A color attribute names the *part* it colors, and a part exists only on the
+ * kinds that have one. A box has a border and text; a note and a glyph body are
+ * text and nothing else; a link is a line and its label.
+ *
+ * This table is what makes the words checkable. `border:` on a note is refused
+ * by name rather than ignored — the same rule as an unknown `diagram` key, and
+ * for the same reason: an attribute that silently does nothing looks like the
+ * tool being broken.
+ *
+ * A style spanning kinds writes one key per kind — `border: #d2904e  line:
+ * #d2904e` — since a style contributes a part only to the kinds that have it.
+ * That is what replaced `stroke:`, which named no part and so could never be
+ * wrong, and which is why a box's text had no word of its own until now.
+ */
+export const COLOR_PARTS = {
+    box: ['fill', 'border', 'text', 'subtext'],
+    note: ['text'],
+    glyph: ['text', 'subtext'],
+    link: ['line', 'text'],
+};
+/**
+ * Every attribute each kind understands. An attribute a kind has no use for is
+ * refused by name rather than dropped, the same rule as an unknown `diagram`
+ * key, a `PLACEMENT_KEYS` modifier or a color part — and for the same reason,
+ * which the color parts only closed one level down: a key that silently does
+ * nothing looks like the tool being broken rather than like a typo.
+ *
+ * The color entries repeat `COLOR_PARTS` and must agree with it. They are
+ * written out rather than spliced in because this table is the answer to "what
+ * may I write here", and a reader of it should not have to assemble the list
+ * from two places.
+ *
+ * Three of the exclusions are the whole of what this table decides, and each is
+ * a place the old silence hid something:
+ *
+ * - A glyph takes no `icon:`. It is drawn *as* a picture and has no box for a
+ *   second one to sit in; `sizeNode` returns before it would ever be read.
+ * - A glyph and a note take no `align:`, which widens a node's children, and
+ *   neither may have any.
+ * - A link takes no `gap:` or `overlap:`. Those are about where a box sits, and
+ *   a link is not placed — it joins two things that are.
+ */
+export const ATTR_KEYS = {
+    box: [
+        'style',
+        'size',
+        'gap',
+        'overlap',
+        'align',
+        'wrap',
+        'icon',
+        'shape',
+        'fill',
+        'border',
+        'text',
+        'subtext',
+    ],
+    note: ['style', 'size', 'gap', 'overlap', 'wrap', 'text'],
+    glyph: ['style', 'size', 'gap', 'overlap', 'wrap', 'shape', 'text', 'subtext'],
+    link: ['style', 'size', 'from', 'to', 'line', 'text'],
+};
+/**
+ * Every word that is an attribute *somewhere*, which is what separates a
+ * misspelling from a key written on the wrong kind of thing. The two deserve
+ * different errors: one has no remedy but the spelling, the other has a real
+ * meaning somewhere else in the file.
+ *
+ * `DIAGRAM_KEYS` is in here so that `background:` on a box is understood to be
+ * a real word in the wrong place — that mistake wants to be pointed at `fill:`,
+ * not told the word does not exist.
+ */
+export const ALL_ATTR_KEYS = [
+    ...new Set([...Object.values(ATTR_KEYS).flat(), ...DIAGRAM_KEYS]),
+];

package/dist/constants.d.ts

@@ -74,8 +74,8 @@ export declare const LABEL_CLEARANCE = 20;
  * renderer, which spaces the lanes of a channel by it, so the two cannot
  * disagree about how much room a label needs. The two ask different questions of
  * it and both are right: the resolver measures *along* the run, so a link
- * travelling horizontally needs the label's width; the renderer measures *across*
- * the channel, so a link travelling horizontally down one needs its height.
+ * traveling horizontally needs the label's width; the renderer measures *across*
+ * the channel, so a link traveling horizontally down one needs its height.
  */
 export declare function labelExtent(label: string, appearance: Attrs, axis: 'x' | 'y', measurer: Measurer, fontSize: number, line: number): number;
 /**
@@ -123,8 +123,11 @@ export declare const DEFAULT_MARGIN = 40;
  * rather than process" and a reader decodes it, while "lower down" means only
  * lower down.
  *
- * A leaf has no band — its label is centred in the box — so neither says
- * anything about one.
+ * A leaf has no band, so `at` says nothing about one and is refused there. But
+ * `align` is not about the band: a label of more than one line has lines of
+ * unequal length whatever kind of box it is in, and how those sit across each
+ * other is a real question anywhere. A leaf's default is centered rather than
+ * ranged left, which is why the fallback is a parameter.
  */
 export declare const LABEL_ENDS: readonly ["top", "bottom"];
 export type LabelEnd = (typeof LABEL_ENDS)[number];
@@ -139,4 +142,4 @@ export interface LabelStyle {
  * contents away from the band, and the renderer, which draws into it, so the two
  * cannot disagree about which end the band is at.
  */
-export declare function labelStyleFor(label: Attrs, line: number): LabelStyle;
+export declare function labelStyleFor(label: Attrs, line: number, fallbackAlign?: 'start' | 'middle'): LabelStyle;

package/dist/constants.js

@@ -79,8 +79,8 @@ export const LABEL_CLEARANCE = 20;
  * renderer, which spaces the lanes of a channel by it, so the two cannot
  * disagree about how much room a label needs. The two ask different questions of
  * it and both are right: the resolver measures *along* the run, so a link
- * travelling horizontally needs the label's width; the renderer measures *across*
- * the channel, so a link travelling horizontally down one needs its height.
+ * traveling horizontally needs the label's width; the renderer measures *across*
+ * the channel, so a link traveling horizontally down one needs its height.
  */
 export function labelExtent(label, appearance, axis, measurer, fontSize, line) {
     const size = fontSizeFor('link', appearance, fontSize, line);
@@ -121,7 +121,7 @@ export const TEXT_SIZES = {
  * the diagram rather than being part of it, and at the size of a box label an
  * aside reads as a statement — so `note` starts small and says so by being a
  * note. This is a default and not a ceiling: `size:` overrides it, the same way
- * `fill:` overrides the theme's colour.
+ * `fill:` overrides the theme's color.
  */
 const DEFAULT_TEXT_SIZE = { note: 'small' };
 /**
@@ -151,18 +151,20 @@ export const DEFAULT_MARGIN = 40;
  * rather than process" and a reader decodes it, while "lower down" means only
  * lower down.
  *
- * A leaf has no band — its label is centred in the box — so neither says
- * anything about one.
+ * A leaf has no band, so `at` says nothing about one and is refused there. But
+ * `align` is not about the band: a label of more than one line has lines of
+ * unequal length whatever kind of box it is in, and how those sit across each
+ * other is a real question anywhere. A leaf's default is centered rather than
+ * ranged left, which is why the fallback is a parameter.
  */
 export const LABEL_ENDS = ['top', 'bottom'];
 /**
- * Author's word to the SVG's. Both spellings of the middle one are taken: this
- * is a vocabulary an author types from memory, and being right about the
- * arrangement and wrong about a dialect is not a mistake worth an error.
+ * Author's word to the SVG's. One spelling of each, per the rule that refuses
+ * synonyms for `box` and `link`: an alias is a variant a reader has to learn,
+ * and every document and example has to pick one of them anyway.
  */
 const LABEL_ALIGNMENTS = {
     left: 'start',
-    centre: 'middle',
     center: 'middle',
     right: 'end',
 };
@@ -171,17 +173,17 @@ const LABEL_ALIGNMENTS = {
  * contents away from the band, and the renderer, which draws into it, so the two
  * cannot disagree about which end the band is at.
  */
-export function labelStyleFor(label, line) {
+export function labelStyleFor(label, line, fallbackAlign = 'start') {
     const at = label['at'];
     if (at !== undefined && !LABEL_ENDS.includes(at)) {
         throw new SourceError(`a label's at takes ${LABEL_ENDS.join(' or ')}, not "${at}"`, line);
     }
     const align = label['align'];
     if (align !== undefined && LABEL_ALIGNMENTS[align] === undefined) {
-        throw new SourceError(`a label's align takes left, centre or right, not "${align}"`, line);
+        throw new SourceError(`a label's align takes left, center or right, not "${align}"`, line);
     }
     return {
         at: at ?? 'top',
-        align: align === undefined ? 'start' : LABEL_ALIGNMENTS[align],
+        align: align === undefined ? fallbackAlign : LABEL_ALIGNMENTS[align],
     };
 }

package/dist/grammar.d.ts

@@ -1,10 +1,10 @@
 /**
  * The language's *lexical* vocabulary, and a scanner that classifies one line of
- * source into coloured spans.
+ * source into colored spans.
  *
  * This is deliberately separate from `parser.ts`, and it is not a second parser.
  * The parser answers "what does this file mean" and refuses anything it cannot
- * answer for; a highlighter has to colour a half-typed line without complaint,
+ * answer for; a highlighter has to color a half-typed line without complaint,
  * so it answers only "what kind of word is this" and never fails. Every rule
  * below is a regex applied to a single line, in priority order, with one bit of
  * carried state (whether anything has been seen on the line yet, and whether the
@@ -23,7 +23,7 @@
  * closes on one, and there are no blocks. That is the property those editor
  * formats need and the reason a `.reladraw` grammar is small in all of them.
  */
-/** What a span of source is, for colouring. */
+/** What a span of source is, for coloring. */
 export type TokenKind = 
 /** `// to the end of the line` */
 'comment'
@@ -42,7 +42,7 @@ export type TokenKind =
 /** The single word an attribute takes. */
  | 'value'
 /** `#14532d`, wherever it appears. */
- | 'colour'
+ | 'color'
 /** `(` and `)` around a placement's or a label's modifiers. */
  | 'bracket'
 /** Everything else: node names being referred to, and whitespace. */
@@ -56,14 +56,14 @@ export interface Span {
 /**
  * The words a statement may open with. `parseStatement` in `parser.ts` is the
  * authority — its switch is what actually accepts them — and this list mirrors
- * it. A word missing here is a word that draws in the plain colour, which is a
+ * it. A word missing here is a word that draws in the plain color, which is a
  * dull page rather than a wrong one.
  */
 export declare const STATEMENT_KEYWORDS: readonly ["box", "note", "link", "deck", "style", "diagram"];
 /**
  * Every word that says something about where a thing goes. Assembled from the
  * lists the parser itself reads, so a direction or a passage axis added there
- * colours here without anybody remembering to come back.
+ * colors here without anybody remembering to come back.
  */
 export declare const RELATION_WORDS: string[];
 /**
@@ -80,7 +80,7 @@ export declare const PATTERNS: {
     readonly keyword: `(?:${string})\\b`;
     readonly arrow: "<->|->|<-";
     readonly attribute: "[A-Za-z][A-Za-z0-9_-]*:";
-    readonly colour: "#[0-9A-Fa-f]{3,8}\\b";
+    readonly color: "#[0-9A-Fa-f]{3,8}\\b";
     readonly relation: `(?:${string})\\b`;
     readonly bracket: "[()]";
     readonly word: "(?:[^\\s()\"\\/]|\\/(?!\\/))(?:[^\\s\"\\/]|\\/(?!\\/))*";

package/dist/grammar.js

@@ -1,10 +1,10 @@
 /**
  * The language's *lexical* vocabulary, and a scanner that classifies one line of
- * source into coloured spans.
+ * source into colored spans.
  *
  * This is deliberately separate from `parser.ts`, and it is not a second parser.
  * The parser answers "what does this file mean" and refuses anything it cannot
- * answer for; a highlighter has to colour a half-typed line without complaint,
+ * answer for; a highlighter has to color a half-typed line without complaint,
  * so it answers only "what kind of word is this" and never fails. Every rule
  * below is a regex applied to a single line, in priority order, with one bit of
  * carried state (whether anything has been seen on the line yet, and whether the
@@ -27,7 +27,7 @@ import { DIRECTIONS, EDGES, PASSAGE_AXES } from './ast.js';
 /**
  * The words a statement may open with. `parseStatement` in `parser.ts` is the
  * authority — its switch is what actually accepts them — and this list mirrors
- * it. A word missing here is a word that draws in the plain colour, which is a
+ * it. A word missing here is a word that draws in the plain color, which is a
  * dull page rather than a wrong one.
  */
 export const STATEMENT_KEYWORDS = ['box', 'note', 'link', 'deck', 'style', 'diagram'];
@@ -36,7 +36,7 @@ const DECLARES_NAME = ['box', 'note', 'deck', 'style'];
 /**
  * Every word that says something about where a thing goes. Assembled from the
  * lists the parser itself reads, so a direction or a passage axis added there
- * colours here without anybody remembering to come back.
+ * colors here without anybody remembering to come back.
  */
 export const RELATION_WORDS = [
     ...DIRECTIONS,
@@ -72,7 +72,7 @@ export const PATTERNS = {
     // `<->` first, or `<-` would match its opening half and leave a stray `>`.
     arrow: '<->|->|<-',
     attribute: '[A-Za-z][A-Za-z0-9_-]*:',
-    colour: '#[0-9A-Fa-f]{3,8}\\b',
+    color: '#[0-9A-Fa-f]{3,8}\\b',
     relation: `(?:${alternation(RELATION_WORDS)})\\b`,
     bracket: '[()]',
     // Matches what `tokenizeLine` treats as one bare token, and the awkwardness is
@@ -102,7 +102,7 @@ const RULES = [
     // Before `relation`, because the trailing colon is what tells `left: …` from
     // the `left` of a placement, and after `arrow` so `->` is never a word.
     { kind: 'attribute', re: sticky(PATTERNS.attribute) },
-    { kind: 'colour', re: sticky(PATTERNS.colour) },
+    { kind: 'color', re: sticky(PATTERNS.color) },
     { kind: 'relation', re: sticky(PATTERNS.relation) },
 ];
 const SPACE = sticky('[ \\t]+');
@@ -159,9 +159,9 @@ export function highlightLine(line) {
                     if (space !== null) {
                         push('plain', at + space.length);
                         const name = match(WORD, line, at);
-                        // `style backup  stroke: …` declares a name; `box  fill: red` is a
+                        // `style backup  border: …` declares a name; `box  fill: red` is a
                         // half-typed line whose second word is already an attribute, and
-                        // colouring that as a name would be a lie about what it is.
+                        // coloring that as a name would be a lie about what it is.
                         if (name !== null && !name.endsWith(':'))
                             push('name', at + name.length);
                     }
@@ -194,7 +194,7 @@ export function highlightLine(line) {
             // An attribute's value is whatever single token follows it, whatever it
             // would otherwise have been called: `to: right` is a value, not a
             // direction, and `style: wide` is a style name, not a gap.
-            const kind = expectingValue && rule.kind !== 'string' && rule.kind !== 'colour' && rule.kind !== 'bracket'
+            const kind = expectingValue && rule.kind !== 'string' && rule.kind !== 'color' && rule.kind !== 'bracket'
                 ? 'value'
                 : rule.kind;
             expectingValue = rule.kind === 'attribute';

package/dist/icons.d.ts

@@ -19,9 +19,9 @@
  * when a diagram asks for a distinction it cannot otherwise make.
  */
 /**
- * Icons carry three tones rather than colours. `ink` is the drawn line, `shade`
+ * Icons carry three tones rather than colors. `ink` is the drawn line, `shade`
  * the body it encloses, and `void` is the page showing through — the same
- * knockout a link label already uses. Naming tones instead of colours is what
+ * knockout a link label already uses. Naming tones instead of colors is what
  * lets one glyph sit correctly on a dark theme and a light one.
  */
 export type IconTone = 'ink' | 'shade' | 'void';
@@ -56,7 +56,7 @@ export declare const ICON_NAMES: string[];
  *
  * Named for what a node *is*, never for the geometry, which is the same rule the
  * icon names follow: `document` and not `folded-corner`. A shape carrying a
- * conventional meaning is a second channel alongside colour, and a stronger one
+ * conventional meaning is a second channel alongside color, and a stronger one
  * — a fill is whatever the author assigned and has to be learnt from the
  * diagram, while a folded corner has meant "an artifact, not a process" in
  * flowcharts for decades and reads with no legend at all.

package/dist/icons.js

@@ -26,7 +26,7 @@ export const ICON_STROKE = 1.1;
 function circle(cx, cy, r) {
     return `M${cx - r} ${cy} a${r} ${r} 0 1 0 ${r * 2} 0 a${r} ${r} 0 1 0 ${-r * 2} 0 Z`;
 }
-/** The three visible faces of an isometric cube, top face centred on `cx, cy`. */
+/** The three visible faces of an isometric cube, top face centered on `cx, cy`. */
 function cube(cx, cy, s) {
     const half = s / 2;
     return [
@@ -123,7 +123,7 @@ export const ICON_NAMES = Object.keys(ICONS);
  *
  * Named for what a node *is*, never for the geometry, which is the same rule the
  * icon names follow: `document` and not `folded-corner`. A shape carrying a
- * conventional meaning is a second channel alongside colour, and a stronger one
+ * conventional meaning is a second channel alongside color, and a stronger one
  * — a fill is whatever the author assigned and has to be learnt from the
  * diagram, while a folded corner has meant "an artifact, not a process" in
  * flowcharts for decades and reads with no legend at all.

package/dist/lexer.d.ts

@@ -9,7 +9,7 @@ export interface Token {
  * runs to the end of the line, so a comment may trail a statement.
  *
  * A lone `/` is an ordinary character, which keeps a path or a ratio writable
- * unquoted. `#` is ordinary too: it opens a hex colour, which is why comments
+ * unquoted. `#` is ordinary too: it opens a hex color, which is why comments
  * are spelled `//` rather than the `#` an earlier version used.
  *
  * Parentheses group the modifiers on a placement — `left of hub (gap: wide)` —

package/dist/lexer.js

@@ -5,7 +5,7 @@ import { SourceError } from './errors.js';
  * runs to the end of the line, so a comment may trail a statement.
  *
  * A lone `/` is an ordinary character, which keeps a path or a ratio writable
- * unquoted. `#` is ordinary too: it opens a hex colour, which is why comments
+ * unquoted. `#` is ordinary too: it opens a hex color, which is why comments
  * are spelled `//` rather than the `#` an earlier version used.
  *
  * Parentheses group the modifiers on a placement — `left of hub (gap: wide)` —

package/dist/parser.js

@@ -1,4 +1,4 @@
-import { DIAGRAM_KEYS, EDGE_AXIS, EDGES, PASSAGE_AXES, LABEL_KEYS, PLACEMENT_KEYS, isDirection, listTargets, } from './ast.js';
+import { COLOR_KEYS, DIAGRAM_KEYS, EDGE_AXIS, EDGES, PASSAGE_AXES, LABEL_KEYS, PLACEMENT_KEYS, isDirection, listTargets, } from './ast.js';
 import { SourceError } from './errors.js';
 import { isAttrKey, tokenizeLine } from './lexer.js';
 /** Parse a whole source file. One statement per line; blanks and comments drop out. */
@@ -57,6 +57,10 @@ function attributesBegin(tokens) {
     }
     return -1;
 }
+/** The value as the author would have to write it back into a label. */
+function quoteOf(text) {
+    return `"${text.replace(/"/g, '\\"')}"`;
+}
 function parseAttrs(tokens, line) {
     const attrs = {};
     let i = 0;
@@ -78,6 +82,43 @@ function parseAttrs(tokens, line) {
         if (isAttrKey(valueToken)) {
             throw new SourceError(`attribute "${key}" has no value`, line);
         }
+        if (key === 'stroke') {
+            // Removed 2026-09-09. It meant a different part on every kind — the
+            // border of a box, the text of a note or a glyph body, the line of a
+            // link — so it could never be wrong, and a box's text had no word at all.
+            // Refused by name rather than ignored: an older file must be told what
+            // to write, not silently drawn without its colors.
+            throw new SourceError('`stroke:` has been replaced by the part it colors — `border:` on a box, `text:` on a note or a glyph body, `line:` on a link. A style shared between boxes and links writes both, as in `border: #d2904e  line: #d2904e`', line);
+        }
+        if (key === 'width') {
+            // Renamed 2026-09-09. It folds a label every n *characters* and never
+            // said how wide anything is, so `width: 200` meaning units was accepted,
+            // wrapped at 200 characters, and did nothing visible — the silent drop
+            // this vocabulary is otherwise free of. Refused by name for the reason
+            // `stroke:` is: an older file must be told, not quietly drawn unwrapped.
+            throw new SourceError('`width:` is now `wrap:`, because it folds the text every n characters and says nothing about how wide anything is', line);
+        }
+        if (valueToken.quoted && COLOR_KEYS.includes(key)) {
+            // A quoted value is the author saying "this is text", and every one of
+            // these keys takes a color. Without this the string is passed through as
+            // a color, turns out not to be one, and nothing is drawn and nothing is
+            // said. Name the likely intent rather than only the rule: the qualifier
+            // under a name is a second label line, not a `subtext` value.
+            if (valueToken.text.startsWith('#')) {
+                // A hex color that was merely quoted. The author wrote a color and the
+                // remedy is punctuation, so say that rather than that it is not one.
+                throw new SourceError(`a color is written without quotes — "${key}: ${valueToken.text}"`, line);
+            }
+            // `text:` is the color of a label, not the label itself, and that is a
+            // mistake worth naming rather than only refusing — the word invites it.
+            if (key === 'text') {
+                throw new SourceError(`\`text:\` is the color of a label, not the label — write the words in quotes after the name, as in \`box name ${quoteOf(valueToken.text)}\``, line);
+            }
+            if (key === 'subtext') {
+                throw new SourceError(`\`subtext:\` is the color of a label's later lines, not the words — write them into the label, as in \`"Name / ${valueToken.text}"\`, and \`subtext: muted\` to make them quieter`, line);
+            }
+            throw new SourceError(`"${key}" takes a color and a quoted value is text — drop the quotes if ${valueToken.text} is a color`, line);
+        }
         attrs[key] = valueToken.text;
         i += 2;
     }
@@ -268,7 +309,7 @@ function parsePlacements(tokens, line, subject) {
         if (word.quoted) {
             throw new SourceError(`${subject}: unexpected text "${word.text}"`, line);
         }
-        // `top level with media` names an edge rather than the centre line. `left`
+        // `top level with media` names an edge rather than the center line. `left`
         // and `right` are edges as well as directions, so it is the word after them
         // that says which was meant — "left of bup_hd" against "left level with bup_hd".
         const edge = isEdgeWord(word.text) && follows(tokens, i + 1, 'level') ? word.text : undefined;
@@ -290,8 +331,8 @@ function parsePlacements(tokens, line, subject) {
             }
             placements.push({
                 kind: 'align',
-                axis: EDGE_AXIS[edge ?? 'centre'],
-                edge: edge ?? 'centre',
+                axis: EDGE_AXIS[edge ?? 'center'],
+                edge: edge ?? 'center',
                 targets: read.targets,
                 line,
             });
@@ -368,7 +409,7 @@ function readBracket(tokens, start, keys, about) {
             throw new SourceError(`${about.subject}: "${key}" has no value`, about.line);
         }
         // A comma between modifiers is punctuation, exactly as it is between the
-        // targets of a placement. `(at: bottom, align: centre)` and the same without
+        // targets of a placement. `(at: bottom, align: center)` and the same without
         // the comma are the same statement.
         const value = valueToken.text;
         values[key] = value.endsWith(',') && value.length > 1 ? value.slice(0, -1) : value;
@@ -389,7 +430,7 @@ function startsPlacement(token) {
         EDGES.includes(token.text));
 }
 function isEdgeWord(word) {
-    return word !== 'centre' && EDGES.includes(word);
+    return word !== 'center' && EDGES.includes(word);
 }
 /**
  * One target, or several joined by `and` — `right of borg and bare`, or