reladraw 0.3.0 → 0.4.0

package/README.md

@@ -68,7 +68,7 @@ It is [plain Markdown](.claude/skills/reladraw/SKILL.md) with the syntax referen
 
 ## Status
 
-Version 0.3.0. Early, but it runs: a parser, resolver and SVG renderer in TypeScript with no runtime dependencies, and a command-line tool that takes a text file and writes a standalone SVG. The comparison at the top of this page is that pipeline run on [`examples/arch.reladraw`](examples/arch.reladraw). What is still visibly off there is typography, not placement.
+Version 0.4.0. Early, but it runs: a parser, resolver and SVG renderer in TypeScript with no runtime dependencies, and a command-line tool that takes a text file and writes a standalone SVG. The comparison at the top of this page is that pipeline run on [`examples/arch.reladraw`](examples/arch.reladraw). What is still visibly off there is typography, not placement.
 
 ```
 npm install -g reladraw

package/SYNTAX.md

@@ -1,4 +1,4 @@
-# Syntax reference — 0.3.0
+# Syntax reference — 0.4.0
 
 What the language accepts. The parser, resolver and SVG renderer implement all of it; the sections at the end record what is defective, unchecked or undecided.
 
@@ -129,7 +129,7 @@ Bundling a text's properties into a style is how they come to mean something: `s
 
 `color` takes a color written as the viewer will receive it — `#8b8b8b`, or any CSS color — or the one reserved word `muted`, which means the theme's secondary text color and so survives a change of theme.
 
-`size: small | normal | large` sets how big the text is set. The sizes are named for the reason gaps are named: a number would be typography by coordinate, stale the moment the document is set at another size, and silent about *why* one piece of text is smaller than another. Every kind of text has a default and `size` overrides it, exactly as `fill:` overrides the theme's color; only `shape: none` defaults to anything but `normal`, and it defaults to `small`.
+`size: small | normal | large` sets how big the text is set, and so does a plain number of pixels, `size: 22`. The names are the default and the preferred form: they follow the document's size if it is ever set differently, where `22` stays 22. A number says nothing about *why* one text is bigger than another, so bundle it into a style that does. `14px` is refused, since the number is already in pixels, and so is zero or less. Every kind of text has a default and `size` overrides it, exactly as `fill:` overrides the theme's color; only `shape: none` defaults to anything but `normal`, and it defaults to `small`.
 
 `wrap: <n>` folds the text at word boundaries every `n` characters, on top of whatever ` / ` already breaks. It is how you make a block of text narrow and tall so it can sit snugly beside something, rather than wide and short so it cannot. The number is a count of characters and not a distance: it says how much fits on a line and nothing about where anything sits.
 
@@ -602,10 +602,12 @@ Nothing bounds bare text the way a border bounds a node, so a sentence-length on
 ## Decks
 
 ```
-deck <name> "<text>" ["<text>" ...]
+node drive "Drive 1"  deck: "Drive 2" "Drive 3"
 ```
 
-Draws the named container with offset copies behind it, one per text, to say "there are several of these and they are the same." Only the front copy shows its contents.
+`deck:` draws offset copies behind a box, one per text, back to front, to say "there are several of these and they are the same." Only the front copy shows its contents. It goes on a box only; a picture or a `shape: none` node has no outline to repeat, and refuses it. A style may carry it.
+
+**Changed after 0.3.0.** This was a statement of its own, `deck drive "Drive 2" "Drive 3"`, which created nothing and only said more about a node declared elsewhere. The statement is now an error that quotes the attribute to write instead.
 
 ## Attributes
 
@@ -613,11 +615,12 @@ Every attribute, and what takes one. The kinds here are what a node's **body** i
 
 | attribute | `shape:` | `icon:` | `shape: none` | edge | says |
 |---|---|---|---|---|---|
-| `style` | ✓ | ✓ | ✓ | ✓ | the named bundle to take appearance from |
+| `style` | ✓ | ✓ | ✓ | ✓ | the named bundles to take appearance from, one or a list |
 | `gap` | ✓ | ✓ | ✓ | | the default distance to whatever it is placed against |
 | `overlap` | ✓ | ✓ | ✓ | | `allow`, to opt out of non-overlap |
 | `contents` | ✓ | | | | how the children are sized and where the block of them sits, in brackets |
 | `badge` | ✓ | | | | the picture beside the text |
+| `deck` | ✓ | | | | offset copies behind the box, one quoted text each |
 | `shape` | ✓ | | ✓ | | the outline the node is drawn with, `none` included |
 | `icon` | | ✓ | | | the picture the node is drawn as |
 | `from` `to` | | | | ✓ | which side the line leaves and arrives on |
@@ -637,6 +640,8 @@ The `diagram` statement has a vocabulary of its own — `background`, and so far
 
 Some of the gaps in the table are worth saying out loud, because none of them looks like a mistake while you are writing it. A picture and a bodiless node take no `fill:` or `border:` — there is no outline for either to reach. Neither takes `contents:` either, which says how a node's children sit, and neither may have any. `shape:` and `icon:` each appear only on the kind they make, and writing both is an error naming both. An edge takes no `gap:` or `overlap:` — those say where a node sits, and an edge is not placed, it joins two things that are.
 
+**A key is written once per statement.** `fill: red  fill: blue` is an error that quotes both values and asks you to keep one: two words on one line are equally explicit, so nothing says which was meant, and keeping either would drop the other in silence. It is almost always an edit that forgot to delete the old value. The same holds inside brackets — `(size: small, size: large)`, a placement's `(gap: wide, gap: tight)` — for `style:` written twice, and for a `style` statement that repeats one of its own keys. Two `text: (…)` brackets in one style are fine as long as they say different things. A node overriding its style is not a repeat; see "Styles".
+
 **Changed 2026-09-09.** Until then a node or edge attribute the tool did not recognize was parsed, stored and never read: `wibble: red` on a node drew nothing and said nothing. This was the last place in the language where a key could silently do nothing, and the rule everywhere else — an unknown `diagram` key, an unknown placement modifier, a color naming a part the kind has not got — has always been that a key which silently does nothing looks like the tool being broken rather than like a typo. A file that rendered with a stray word in it will now stop with an error naming it.
 
 ## Destinations
@@ -673,6 +678,23 @@ node server.mirror "shared folder / mirror"  style: backup
 
 The appearance attributes are `fill`, `border`, `line`, `text`, `badge`, `icon` and `shape`. The first three each take a color written as the viewer will receive it — `#142814`, or any CSS color, or `none`; `text` takes the bracket described under "The text and its brackets".
 
+**What a statement says itself beats what its style says**, wherever `style:` sits on the line. Here the server's border is red, not orange:
+
+```
+style backup  border: #d2904e
+node server "Server"  border: red  style: backup
+```
+
+Whoever wrote `border: red` on the node meant it for that node, so it is an override rather than a contradiction, and nothing is refused. The rest of the style still applies.
+
+**A thing may take several styles**, listed the way a placement lists its targets — commas and `and` both separate:
+
+```
+node pump "Pump 3"  style: equipment, critical and alarm
+```
+
+They apply in the order written, and a later style wins where two set the same key; the statement's own words still win over all of them. Each style in the list is checked on its own, so one that gives the thing nothing is refused even when its neighbors do not. A style named twice in one list is refused, and so is `style:` written twice on one statement — the list is the way to say several.
+
 ### A color names the part it colors
 
 A color attribute says which part of a thing it colors, and a part exists only on the kinds that have one:
@@ -810,6 +832,13 @@ That one was found by testing the lexer, not by rendering — and it could not h
 
 Pre-1.0, so the minor number is where a breaking change goes. Every removal below is refused by name with the replacement quoted, rather than dropped in silence — an older file stops with an error saying what to write instead.
 
+**0.4.0**
+
+- A node with any children takes the theme's container colors, however the children are placed. A node with a `badge:` or a single child in a corner now draws as a container too; in 0.3.0 only a node with a title band did. Its text still sits where it did. Say `fill:` and `border:` to keep one looking like a leaf.
+- A text's `size` takes a plain number of pixels beside `small`, `normal` and `large`: `(size: 22)`.
+- **Breaking:** `deck` is an attribute of the node, not a statement. `deck drive "Drive 2" "Drive 3"` is written `deck: "Drive 2" "Drive 3"` on `node drive`, and the old statement is an error that quotes that line back. It is refused on a picture and on a `shape: none` node, where the statement used to draw nothing.
+- **Breaking:** a key written twice on one statement is an error that quotes both values — `fill: red  fill: blue`, `style:` twice, or the same property twice inside one set of brackets. In 0.3.0 one of the two was dropped in silence. A node's own word overriding its style's is unaffected.
+- `style:` takes a list, `style: equipment, critical and alarm`, applied in order with a later style winning where two set the same key.
 **0.3.0** — the vocabulary, reworked in one breaking version so there is one migration rather than five.
 
 - `box` is `node` and `link` is `edge`. The string on either is its *text*; "label" is not a word the language has.

package/dist/ast.d.ts

@@ -272,14 +272,6 @@ export interface EdgeStmt {
     attrs: Attrs;
     line: number;
 }
-export interface DeckStmt {
-    kind: 'deck';
-    /** The container to draw with offset copies behind it. */
-    name: string;
-    /** One text per copy, back to front as written. */
-    texts: string[];
-    line: number;
-}
 /**
  * `diagram background: #111111` — settings that belong to the drawing as a
  * whole rather than to anything in it. It has no name because there is only
@@ -373,7 +365,7 @@ export interface StyleStmt {
     attrs: Attrs;
     line: number;
 }
-export type Stmt = NodeStmt | EdgeStmt | DeckStmt | StyleStmt | DiagramStmt;
+export type Stmt = NodeStmt | EdgeStmt | StyleStmt | DiagramStmt;
 export interface Document {
     statements: Stmt[];
 }

package/dist/ast.js

@@ -290,7 +290,7 @@ export const COLOR_PARTS = {
  *   an edge is not placed — it joins two things that are.
  */
 export const ATTR_KEYS = {
-    shape: ['style', 'gap', 'overlap', 'contents', 'badge', 'shape', 'fill', 'border', 'text', 'url'],
+    shape: ['style', 'gap', 'overlap', 'contents', 'badge', 'deck', 'shape', 'fill', 'border', 'text', 'url'],
     icon: ['style', 'gap', 'overlap', 'icon', 'text', 'url'],
     none: ['style', 'gap', 'overlap', 'shape', 'text', 'url'],
     edge: ['style', 'from', 'to', 'line', 'text', 'url'],

package/dist/constants.d.ts

@@ -98,10 +98,10 @@ export declare const ICON_LINES = 2;
 export declare const ICON_GAP = 10;
 export declare const DEFAULT_FONT_SIZE = 14;
 /**
- * The named text sizes, each a multiple of the document's own size. Named
- * rather than numeric for the reason gaps are: a number here is typography by
- * coordinate. It goes stale the moment the document is set at another size, and
- * it says nothing about why one piece of text is smaller than another.
+ * The named text sizes, each a multiple of the document's own size. A plain
+ * number of pixels is accepted too, as it is for a gap: nothing else in the
+ * diagram moving can make it wrong. The names stay the default because they
+ * follow the document's size when that is retuned, and a number does not.
  *
  * `small` is sampled rather than chosen. In
  * `examples/reference/arch.png` the box and container texts run 25

package/dist/constants.js

@@ -110,10 +110,10 @@ export const ICON_LINES = 2;
 export const ICON_GAP = 10;
 export const DEFAULT_FONT_SIZE = 14;
 /**
- * The named text sizes, each a multiple of the document's own size. Named
- * rather than numeric for the reason gaps are: a number here is typography by
- * coordinate. It goes stale the moment the document is set at another size, and
- * it says nothing about why one piece of text is smaller than another.
+ * The named text sizes, each a multiple of the document's own size. A plain
+ * number of pixels is accepted too, as it is for a gap: nothing else in the
+ * diagram moving can make it wrong. The names stay the default because they
+ * follow the document's size when that is retuned, and a number does not.
  *
  * `small` is sampled rather than chosen. In
  * `examples/reference/arch.png` the box and container texts run 25
@@ -143,10 +143,17 @@ const DEFAULT_TEXT_SIZE = { none: 'small' };
 export function fontSizeFor(kind, textAttrs, fontSize, line) {
     const named = textAttrs['size'] ?? DEFAULT_TEXT_SIZE[kind] ?? 'normal';
     const scale = TEXT_SIZES[named];
-    if (scale === undefined) {
-        throw new SourceError(`size takes ${Object.keys(TEXT_SIZES).join(', ')}, not "${named}"`, line);
-    }
-    return Math.round(fontSize * scale);
+    if (scale !== undefined)
+        return Math.round(fontSize * scale);
+    if (/^\d+(\.\d+)?$/.test(named) && Number(named) > 0)
+        return Number(named);
+    const unit = named.match(/^(\d+(?:\.\d+)?)px$/);
+    const hint = unit
+        ? `; write "size: ${unit[1]}", a size's number is already in pixels`
+        : named.startsWith('-') || /^0+(\.0+)?$/.test(named)
+            ? '; a text size has to be more than zero'
+            : '';
+    throw new SourceError(`size takes ${Object.keys(TEXT_SIZES).join(', ')} or a number of pixels, not "${named}"${hint}`, line);
 }
 export const DEFAULT_MARGIN = 40;
 /**

package/dist/grammar.d.ts

@@ -61,7 +61,7 @@ export interface Span {
  * 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 ["node", "edge", "deck", "style", "diagram"];
+export declare const STATEMENT_KEYWORDS: readonly ["node", "edge", "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

package/dist/grammar.js

@@ -30,9 +30,9 @@ import { DIRECTIONS, POSITIONS, SIDES, PASSAGE_AXES } from './ast.js';
  * 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 = ['node', 'edge', 'deck', 'style', 'diagram'];
+export const STATEMENT_KEYWORDS = ['node', 'edge', 'style', 'diagram'];
 /** Statements whose second word declares a name. `diagram` has none. */
-const DECLARES_NAME = ['node', 'deck', 'style'];
+const DECLARES_NAME = ['node', '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

package/dist/model.d.ts

@@ -57,9 +57,10 @@ export interface LayoutNode {
     /**
      * Whether things stack beside this node's text — below it, or above it when
      * the text is at the bottom. That is what a title band *is*, so it is what
-     * decides a container's look and its text's defaults, rather than whether
-     * the node has children: a node whose only child sits beside its text or in
-     * a corner has nothing stacked below the text, and draws as a leaf.
+     * decides its text's defaults, rather than whether the node has children: a
+     * node whose only child sits beside its text or in a corner has nothing
+     * stacked below the text, and its text sits as a leaf's does. Its *colors*
+     * follow having children, not this.
      */
     banded: boolean;
     /**

package/dist/parser.js

@@ -23,8 +23,6 @@ function parseStatement(tokens, line) {
             return parseNode(tokens, line);
         case 'edge':
             return parseEdge(tokens, line);
-        case 'deck':
-            return parseDeck(tokens, line);
         case 'style':
             return parseStyle(tokens, line);
         case 'diagram':
@@ -66,6 +64,14 @@ function substitution(word, head) {
         return `reladraw has no \`note\` statement — a note is a node with no body, so try ` +
             `\`node ${rewrite(head)} shape: none\``;
     }
+    // A statement until 0.4.0. It created nothing, only said more about a node
+    // declared elsewhere, which is what an attribute on that node is for.
+    if (word === 'deck') {
+        const name = head[1] && !head[1].quoted ? head[1].text : '<name>';
+        const texts = head.slice(2).map((token) => (token.quoted ? quoteOf(token.text) : token.text));
+        return `reladraw has no \`deck\` statement — a deck is an attribute of the node, so write ` +
+            `\`deck: ${texts.length > 0 ? texts.join(' ') : '"…"'}\` on \`node ${name}\``;
+    }
     const replacement = SUBSTITUTIONS[word];
     if (replacement === undefined)
         return `unknown statement "${word}"`;
@@ -142,6 +148,19 @@ const BRACKET_ABOUT = {
  * `fill:` as though the two were the same sort of statement.
  */
 const MOVED_INTO_BRACKET = ['size', 'wrap', 'align'];
+/**
+ * Store one attribute, refusing a key the line has already set. Two words on
+ * one line are equally explicit, so nothing says which was meant — and keeping
+ * either drops the other in silence. It is almost always an edit that forgot to
+ * delete the old value, so the error shows both and asks for one.
+ */
+function setOnce(attrs, key, value, subject, line, shown = { key, value: (v) => v }) {
+    const had = attrs[key];
+    if (had !== undefined) {
+        throw new SourceError(`${subject}: "${shown.key}" is written twice (${shown.value(had)}, ${shown.value(value)}) — keep one`, line);
+    }
+    attrs[key] = value;
+}
 /** Read one `key: value` pair, and refuse the words that used to be keys. */
 function readAttr(tokens, at, attrs, line, subject) {
     const keyToken = tokens[at];
@@ -161,8 +180,11 @@ function readAttr(tokens, at, attrs, line, subject) {
         if (Object.keys(read.values).length === 0) {
             throw new SourceError(`${subject}: \`${key}:\` opens empty brackets`, line);
         }
-        for (const [inner, value] of Object.entries(read.values))
-            attrs[`${key}.${inner}`] = value;
+        // Two brackets for one part are fine as long as they say different things;
+        // the same property in both is the same defect as `fill:` written twice.
+        for (const [inner, value] of Object.entries(read.values)) {
+            setOnce(attrs, `${key}.${inner}`, value, subject, line, { key: `${key}: (${inner}: …)`, value: (v) => v });
+        }
         return read.next;
     }
     if (key === 'url') {
@@ -175,9 +197,57 @@ function readAttr(tokens, at, attrs, line, subject) {
             throw new SourceError(`${subject}: a url is written in quotes — \`url: "https://example.com"\`. Without them ` +
                 'everything from the `//` onwards is read as a comment', line);
         }
-        attrs[key] = value.text;
+        setOnce(attrs, key, value.text, subject, line, { key, value: quoteOf });
         return at + 2;
     }
+    if (key === 'style') {
+        // `style: base, critical and alarm` — several bundles, applied in the order
+        // written, a later one winning where two set the same key. The list reads
+        // the way a placement's targets do: commas and `and` both separate. Stored
+        // joined on a space, which no style name can hold.
+        const names = [];
+        let next = at + 1;
+        for (;;) {
+            const token = tokens[next];
+            if (!token || token.quoted || isAttrKey(token) || token.text === '(' || token.text === ')') {
+                throw new SourceError(names.length === 0 ? `attribute "style" has no value` : `${subject}: "style:" ends its list with a comma`, line);
+            }
+            const listed = token.text.endsWith(',') && token.text.length > 1;
+            const name = listed ? token.text.slice(0, -1) : token.text;
+            if (names.includes(name)) {
+                throw new SourceError(`${subject}: style "${name}" is named twice in one \`style:\` — keep one`, line);
+            }
+            names.push(name);
+            next += 1;
+            if (follows(tokens, next, 'and')) {
+                next += 1;
+                continue;
+            }
+            if (listed)
+                continue;
+            break;
+        }
+        setOnce(attrs, key, names.join(' '), subject, line, { key, value: (v) => v.split(' ').join(', ') });
+        return next;
+    }
+    if (key === 'deck') {
+        // One quoted text per copy behind the node, back to front, as many as are
+        // written. Stored joined on a line break, which no source line can hold.
+        const texts = [];
+        let next = at + 1;
+        while (tokens[next]?.quoted)
+            texts.push(tokens[next++].text);
+        if (texts.length === 0) {
+            const given = tokens[next];
+            throw new SourceError(`${subject}: \`deck:\` takes one quoted text per copy behind the node, as in \`deck: "Drive 2" "Drive 3"\`` +
+                (given && !isAttrKey(given) ? `, not \`deck: ${given.text}\`` : ''), line);
+        }
+        setOnce(attrs, key, texts.join('\n'), subject, line, {
+            key,
+            value: (v) => v.split('\n').map(quoteOf).join(' '),
+        });
+        return next;
+    }
     if (bracketKeys !== undefined && key !== 'text') {
         // `contents: match` names the part and then says one of its two properties
         // without saying which. The brackets are what make the level shift visible,
@@ -243,7 +313,7 @@ function readAttr(tokens, at, attrs, line, subject) {
         }
         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;
+    setOnce(attrs, key, valueToken.text, subject, line);
     return at + 2;
 }
 /** Attributes only, for the statements that take no placements. */
@@ -405,27 +475,6 @@ function parseEdge(head, line) {
         line,
     };
 }
-/** `deck <name> "<text>" ["<text>" ...]` */
-function parseDeck(head, line) {
-    const name = requireName(head[1], 'deck', line);
-    const texts = [];
-    for (const token of head.slice(2)) {
-        if (!token.quoted) {
-            // Until 0.3.0 the head/attributes split cut these off and threw them
-            // away, so `deck d "one" fill: red` drew an uncolored deck in silence.
-            if (isAttrKey(token)) {
-                throw new SourceError(`deck "${name}" has ${token.text} — a deck says how many copies a node has and what ` +
-                    `each one reads, so write attributes on \`node ${name}\` itself`, line);
-            }
-            throw new SourceError(`deck "${name}" takes quoted texts only`, line);
-        }
-        texts.push(token.text);
-    }
-    if (texts.length === 0) {
-        throw new SourceError(`deck "${name}" needs at least one text`, line);
-    }
-    return { kind: 'deck', name, texts, line };
-}
 /** `style <name> <attributes>` */
 function parseStyle(head, line) {
     const name = requireName(head[1], 'style', line);
@@ -497,7 +546,7 @@ function readPlacement(tokens, at, line, subject) {
             throw new SourceError(`${subject}: an alignment reads "${written} <node>"`, line);
         }
         const read = readTargets(tokens, from + 2, subject, written, line);
-        const modifiers = readModifiers(tokens, read.next, subject, written, line);
+        const modifiers = readModifiers(tokens, read.next, subject, `${written} ${listTargets(read.targets)}`, line);
         // An alignment shares a line outright, so there is no distance in it for
         // a gap to set. Refusing rather than dropping it, for the reason unknown
         // modifier names are refused: a word that quietly does nothing reads as a
@@ -529,10 +578,11 @@ function readPlacement(tokens, at, line, subject) {
         throw new SourceError(`${subject}: "${word.text}" is not a direction`, line);
     }
     let next = at + 1;
-    if (follows(tokens, next, 'of'))
+    const of = follows(tokens, next, 'of');
+    if (of)
         next += 1;
     const read = readTargets(tokens, next, subject, word.text, line);
-    const modifiers = readModifiers(tokens, read.next, subject, word.text, line);
+    const modifiers = readModifiers(tokens, read.next, subject, `${word.text}${of ? ' of' : ''} ${listTargets(read.targets)}`, line);
     return {
         placement: {
             kind: 'offset',
@@ -673,7 +723,12 @@ function readBracket(tokens, start, keys, about) {
         // 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;
+        const clean = value.endsWith(',') && value.length > 1 ? value.slice(0, -1) : value;
+        const had = values[key];
+        if (had !== undefined) {
+            throw new SourceError(`${about.subject}: "${key}" is written twice in the brackets after ${about.what} (${had}, ${clean}) — keep one`, about.line);
+        }
+        values[key] = clean;
         i += 2;
     }
     return { values, next: i + 1 };

package/dist/render.js

@@ -162,10 +162,10 @@ function nodeSvg(node, theme, measurer, fontSize, markup, url) {
     const parts = [];
     const kids = [];
     const face = faceOf(node);
-    // 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;
+    // A node with children is colored as a backdrop however they are placed,
+    // including a lone badge beside its text. Every rule that tried to tell a
+    // badge from contents was a guess; this one is visible in the source.
+    const container = node.children.length > 0;
     const border = borderOf(node.appearance, container ? theme.containerStroke : theme.boxStroke);
     const fill = fillOf(node.appearance, container ? theme.containerFill : theme.boxFill);
     // A box is the one kind with two inkable parts, which is why its text needs
@@ -188,8 +188,9 @@ function nodeSvg(node, theme, measurer, fontSize, markup, url) {
     // 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');
+    // its lines against each other is read here. This follows the band, not the
+    // colors: a badged leaf is a backdrop but its text still centers.
+    const textStyle = textStyleFor(node.textAttrs, node.line, node.banded ? 'start' : 'middle', node.banded ? 'top-left' : 'center');
     parts.push(sized(textBlock(node.lines, node.x, node.y, textHeight, size, node.textBox, {
         color: text,
         align: textStyle.align,

package/dist/resolve.js

@@ -24,7 +24,6 @@ export function resolve(doc, options = {}) {
     const styles = collectStyles(doc.statements);
     checkStyleKeys(doc.statements);
     const { nodes, byName, roots } = buildTree(doc.statements, styles);
-    applyDecks(doc.statements, byName);
     // Edges are resolved to nodes before anything is sized, because a labeled
     // edge claims room in the gap it crosses and so has to be in hand while the
     // gaps are being worked out. Nothing here reads geometry.
@@ -129,6 +128,11 @@ function buildTree(statements, styles) {
         };
         checkAttrs(kind, node.name, stmt.attrs, stmt.line);
         checkStyleUse(kind, node.name, stmt.attrs, styles, stmt.line);
+        // `deck:` holds one text per copy, joined on a line break the source cannot
+        // contain. Like a badge, only a box has an outline to repeat.
+        const deck = appearance['deck'];
+        if (deck !== undefined && body.kind === 'shape')
+            node.deckTexts = deck.split('\n');
         const cut = stmt.name.lastIndexOf('.');
         if (cut === -1) {
             roots.push(node);
@@ -254,7 +258,9 @@ function checkAttrs(kind, name, attrs, line) {
             continue;
         // Quoted back the way it was written. A bracketed value arrives one dotted
         // key at a time, and `contents: match` is not a line anybody could look for.
-        const wrote = written === key ? `${key}: ${value}` : `${key}: (${written.slice(key.length + 1)}: ${value})`;
+        // A deck's texts are stored joined on a line break; quote them back as written.
+        const shown = key === 'deck' ? value.split('\n').map((text) => `"${text}"`).join(' ') : value;
+        const wrote = written === key ? `${key}: ${shown}` : `${key}: (${written.slice(key.length + 1)}: ${shown})`;
         if (!ALL_ATTR_KEYS.includes(key)) {
             // Nothing anywhere in the language answers to this word, so the only
             // remedy is the vocabulary itself.
@@ -288,23 +294,25 @@ function checkAttrs(kind, name, attrs, line) {
  * construction — that hole is left open, because nobody writes one by accident.
  */
 function checkStyleUse(kind, name, attrs, styles, line) {
-    const named = attrs['style'];
-    if (named === undefined)
-        return;
-    const base = styles.get(named);
-    if (base === undefined)
-        return; // `appearanceOf` reports the missing style.
-    // A style naming another style is the one way to carry nothing at all: the
-    // parser already refuses one with no attributes, and `appearanceOf` does not
-    // recurse, so the name would sit there doing nothing.
-    const carried = [...new Set(Object.keys(base).map(topKey))].filter((key) => key !== 'style');
-    if (carried.length === 0) {
-        throw new SourceError(`style "${named}" carries nothing but a style name`, line);
+    // Each style in a list is checked on its own: one that gives this thing
+    // nothing is a name written on the wrong sort of thing, whatever its
+    // neighbours in the list carry.
+    for (const named of styleNames(attrs)) {
+        const base = styles.get(named);
+        if (base === undefined)
+            continue; // `appearanceOf` reports the missing style.
+        // A style naming another style is the one way to carry nothing at all: the
+        // parser already refuses one with no attributes, and `appearanceOf` does not
+        // recurse, so the name would sit there doing nothing.
+        const carried = [...new Set(Object.keys(base).map(topKey))].filter((key) => key !== 'style');
+        if (carried.length === 0) {
+            throw new SourceError(`style "${named}" carries nothing but a style name`, line);
+        }
+        if (carried.some((key) => ATTR_KEYS[kind].includes(key)))
+            continue;
+        throw new SourceError(`style "${named}" gives "${name}" nothing. It carries ${carried.join(' and ')}; ` +
+            `${article(KIND_WORD[kind])} is ${KIND_PARTS[kind]}`, line);
     }
-    if (carried.some((key) => ATTR_KEYS[kind].includes(key)))
-        return;
-    throw new SourceError(`style "${named}" gives "${name}" nothing. It carries ${carried.join(' and ')}; ` +
-        `${article(KIND_WORD[kind])} is ${KIND_PARTS[kind]}`, line);
 }
 /**
  * A style is a bundle spanning kinds, so its keys cannot be checked against any
@@ -345,24 +353,25 @@ function listKinds(kinds) {
         return words[0] ?? 'nothing';
     return `${words.slice(0, -1).join(', ')} or ${words[words.length - 1]}`;
 }
-function appearanceOf(attrs, styles, line) {
+/** The styles a `style:` names, in the order written. The parser joins them on a space. */
+function styleNames(attrs) {
     const named = attrs['style'];
-    if (named === undefined)
-        return { ...attrs };
-    const base = styles.get(named);
-    if (!base)
-        throw new SourceError(`no style named "${named}"`, line);
-    return { ...base, ...attrs };
+    return named === undefined ? [] : named.split(' ');
 }
-function applyDecks(statements, byName) {
-    for (const stmt of statements) {
-        if (stmt.kind !== 'deck')
-            continue;
-        const node = byName.get(stmt.name);
-        if (!node)
-            throw new SourceError(`deck names "${stmt.name}", which does not exist`, stmt.line);
-        node.deckTexts = stmt.texts;
+/**
+ * The styles in the order written, a later one winning where two set the same
+ * key, and then the statement's own words over all of them — a word written on
+ * the line was meant for this thing, wherever `style:` sits.
+ */
+function appearanceOf(attrs, styles, line) {
+    const merged = {};
+    for (const named of styleNames(attrs)) {
+        const base = styles.get(named);
+        if (!base)
+            throw new SourceError(`no style named "${named}"`, line);
+        Object.assign(merged, base);
     }
+    return { ...merged, ...attrs };
 }
 function buildEdges(statements, byName, styles) {
     const edges = [];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reladraw",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "A diagram language where you say where things go.",
   "type": "module",
   "bin": {