reladraw 0.5.0 → 0.6.0

package/README.md

@@ -68,7 +68,7 @@ It is [plain Markdown](.claude/skills/reladraw/SKILL.md) with the syntax referen
 
 ## Status
 
-Version 0.5.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.6.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
@@ -143,4 +143,4 @@ The license covers the code, not the name: it grants no rights to use "reladraw"
 
 ## Contributing
 
-Issues are wanted — especially a diagram you tried to write and could not. Pull requests are read but not merged yet, for a reason explained in [CONTRIBUTING.md](CONTRIBUTING.md).
+Issues are wanted — especially a diagram you tried to write and could not. While the language is changing quickly, an issue is more useful than a pull request; [CONTRIBUTING.md](CONTRIBUTING.md) says why.

package/SYNTAX.md

@@ -1,4 +1,4 @@
-# Syntax reference — 0.5.0
+# Syntax reference — 0.6.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.
 
@@ -422,6 +422,23 @@ You name a side and never a point on it. Alone on a side, an edge lands at its c
 
 The space it leaves is deliberately small, and shrinks further if the side is too short to hold the whole group. On a side short enough, it shrinks to nothing and the attachments coincide. Their texts still come apart, because the lines bow in the middle to make up what the side could not give them, but the arrowheads themselves land on one point and nothing warns you — so a small node with several edges arriving on one side is worth a look.
 
+#### Ends that face away from each other
+
+```
+node parser "Parser"
+node resolver "Resolver"  right of parser
+node renderer "Renderer"  right of resolver
+edge parser -> renderer  "test edge"  from: left  to: right
+```
+
+That line leaves Parser heading left and has to arrive at Renderer from the right, so it must turn back on itself somewhere. It turns back in the gap between its two nodes when there is one wide enough to hold the line and its text, and otherwise it goes over the top: out of its side, along the top of the row clear of the tallest node between its ends, and down into the far side. The text rides on that top stretch, so it never sits on a node. The same goes for `from: top  to: bottom` in a column, which goes round the right, and for an edge from a node back to itself.
+
+Several such lines over the same row take a lane each, the shorter inside the longer, so they nest instead of drawing on top of one another.
+
+Sides at right angles can face away too. `from: left  to: top` with the far node to the right leaves heading away from it, so the line steps out of the left, goes up past both nodes, runs along above them and comes straight down into the top. The side named at the far end says which way round: `to: bottom` takes it underneath instead.
+
+Over the top is the rule, not a guess the tool makes each time — it does not look for the shorter way round. To send the line underneath or round the left, say which side of a node it passes: `below resolver`. See "Passing on one side of a node".
+
 #### Several edges between the same two sides
 
 Edges that run between the *same* pair of sides are a case of their own, because "where the far ends sit" cannot order them: every one of them goes to the same node.
@@ -487,6 +504,78 @@ Several edges may share one channel, and they take a lane each. As with attachme
 
 A named channel does not widen. It is measured off the layout you described, so if you name a gap too narrow for the lines you put through it they crowd together rather than pushing the two nodes apart. That is the difference between this and a text making room for itself, above: there, the corridor is the gap between the edge's own two ends, and opening it moves them apart exactly as anything else put between them would. Here the pair is named by an edge merely passing through, and nothing yet lets an edge bid into a gap it is only a visitor in. It is the remaining half and it is not built.
 
+### Passing on one side of a node
+
+`above`, `below`, `left of` and `right of`, written on an edge, say which side of a node the line passes.
+
+```
+node parser "Parser"
+node resolver "Resolver"  right of parser
+node renderer "Renderer"  right of resolver
+edge parser -> renderer  "underneath"  from: left  to: right  below resolver
+```
+
+They are the placement words, and they mean what `between` means: only where the line passes that node. `below resolver` says the line is below Resolver where it goes by Resolver, not that the whole line is. That edge would go over the top of the row on its own; with the clause it leaves Parser, drops under the row and comes up into Renderer.
+
+Write as many as you need, one for each node you have something to say about. The line meets them in the order they sit along its way, so no clause says an order:
+
+```
+node a "A"
+node b "B"  below a
+edge a -> b  from: top  to: bottom  left of a  right of b
+```
+
+That line leaves the top of A, goes round A's left, crosses over in the gap between the two, passes B on the right, and turns up into B's bottom. The line is drawn as straight stretches joined by rounded corners, each stretch as close to the two ends as its clauses allow, and pushed further out, the way its clause already points, by any node sitting on it.
+
+One clause may name several nodes, and it is not shorthand for several clauses. `below a and b` is below the box bounding both, so it covers the stretch between them too:
+
+```
+node t1 "T1"
+node t2 "T2"  right of t1  (gap: wide)
+node peak "Peak"  right of t1  left of t2  above t1
+edge t1 -> t2  from: bottom  to: bottom  below t1  above peak  below t2
+```
+
+Those three clauses let the line rise over Peak in the gap. Write `below t1 and t2  above peak` instead and it is refused, because Peak sits over the stretch `below t1 and t2` covers, and the line cannot be below the one and above the other at the same point.
+
+One edge may pass some nodes above or below and others left or right. Passing above or below is done travelling across the page, and passing left or right travelling up or down it, so the line turns between the two, as few times as it can:
+
+```
+node a "A"
+node m "M"  right of a
+node n "N"  below m  right of m
+node b "B"  below n  right of n
+edge a -> b  below m  left of n
+```
+
+That line leaves the bottom of A, runs across just under M, turns down on N's left, and runs across into B. The clauses read as before: `left of n` binds only where the line is level with N, so the last stretch passing under N is not held to it.
+
+A side named at an end says which way the line goes first: `from: right` starts it across, `from: bottom` starts it down. With no side named at either end it goes across first, then down.
+
+Clauses of one kind may sit on different legs. Here the line goes over P on the way out, down past N, and under M on the way in, turning twice:
+
+```
+node a "A"
+node p "P"  right of a
+node n "N"  below p  right of p
+node m "M"  below n  right of n
+node b "B"  right of m
+edge a -> b  from: right  to: bottom  above p  right of n  below m
+```
+
+Each clause binds whichever legs pass its node, so a node wide enough to sit under two legs holds both of them to its side.
+
+Refused, each by name:
+
+- **Clauses that cannot all hold** at one point, as above.
+- **A crossing with no room.** Two clauses on opposite sides need a gap between their nodes to cross over in. Placed flush — `gap: 0` — there is none, and the error says to give the placement a gap or drop a clause. The gap is never opened for the line: you wrote how far apart those two are.
+- **A node the line never passes.** `below z` on a line that never goes by Z says nothing.
+- **Both kinds where no way of turning keeps them all.** The error names the clauses, or the one reason if every way fails for the same one.
+- **`between` with a side.** An edge passing between two things already has a side of each.
+- **A part of a node, or a gap.** A line passes a whole box, and passes it as close as reads clearly.
+
+An end with no side named leaves from the side facing where the line is going.
+
 ## Against a part of a node
 
 ```
@@ -831,7 +920,7 @@ Deliberate omissions. What they protect is that the renderer never *chooses* an
 - **Guessing an axis nobody constrained.** When two placements bind one axis and nothing binds the other, the tool refuses rather than picking a target to center on. Choosing there would decide which row a node shares, not how far it sits from something.
 - **Placements that run in a circle.** A loop where each placement demands more room than the last cannot be satisfied and is an error naming the placements involved. A target does *not* have to be positioned before the node naming it — the whole system is solved at once — so ordinary mutual references are fine.
 - **Edge waypoints.** A point a line must pass through is a coordinate wearing a hat. Saying a line goes between two named things is not one — it names things the diagram already contains, and it survives those things moving.
-- **Choosing a route.** The tool will not find its own way around an obstacle. A line that crosses something it should not is a line you have not yet said enough about, and `between` is how you say it.
+- **Choosing a route.** The tool will not find its own way around an obstacle. A line that crosses something it should not is a line you have not yet said enough about, and `between` and `below <node>` are how you say it.
 - **Set-level placement.** Four siblings around a hub are four statements today. Whether a durable group that reflows when a member is added is worth the same-axis conflict it introduces is undecided.
 
 Note what is *not* on this list: saying more about where something goes. A statement that lets you be more precise is not a step toward auto-layout, and the first version was short enough of them to render the benchmark wrong.
@@ -840,7 +929,7 @@ Note what is *not* on this list: saying more about where something goes. A state
 
 Designed, decided, and absent from the code. Written down so the next version has somewhere to start.
 
-**Nothing keeps an edge clear of a node on its own.** Non-overlap applies to nodes only. A line may still cut across a node it has nothing to do with, and an edge text may still land on top of one. `between` is how you say where a line goes when that matters, and nothing checks the ones where you have not said. A check belongs on the diagnostics list, but finding a route by itself does not — see "What the language refuses".
+**Nothing keeps an edge clear of a node on its own.** Non-overlap applies to nodes only. A line may still cut across a node it has nothing to do with, and an edge text may still land on top of one. `between` and `below <node>` are how you say where a line goes when that matters, and nothing checks the ones where you have not said. A check belongs on the diagnostics list, but finding a route by itself does not — see "What the language refuses".
 
 **An icon outside the built-in seven.** The set is closed, and a diagram wanting a picture that is not in it has nowhere to go. The two shapes this could take are a declaration in the file, `icon <name> "<path data>"` beside `style`, and `icon: ./thing.svg` inlined by the tool at render time. Either keeps the output standalone, which is the constraint any answer has to meet.
 
@@ -882,10 +971,17 @@ That one was found by testing the lexer, not by rendering — and it could not h
 
 ~~An edge text ignored the line break.~~ Fixed. ` / ` split a node's text and was never applied to an edge's, so the marker came out as a literal slash on an arrow and the benchmark's two-line captions had to be flattened to one. The measurer had always returned the split lines; the renderer was handing it the raw string and drawing that instead. The block now centers on the point the text already occupied, so a one-line text sits exactly where it did.
 
+~~An edge whose ends faced away from each other was drawn through its own nodes.~~ Fixed. `from: left  to: right` with the far node further right was one curve bending out at both ends, and with the two nodes in a row it flattened into a straight line through both of them and anything between, its text landing on whatever was in the middle. It was not a matter of exact alignment: a node stepped down a little drew a tilted version of the same line. Such an edge now turns back in the gap between its nodes if there is room, and goes over the top of the row if not. See "Ends that face away from each other".
+
 ## Changelog
 
 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.6.0**
+
+- An edge whose ends face away from each other, such as `from: left  to: right` with the far node to the right, goes around instead of through its own nodes: through the gap between them if there is room, over the top of the row if not. Several over one row take a lane each. Sides at right angles, such as `from: left  to: top`, go around the same way when one faces away.
+- `above`, `below`, `left of` and `right of` on an edge say which side of a node the line passes: `edge a -> b  below c`. Any number, one per node; one naming several nodes covers the stretch between them too. One edge may mix the two kinds, `below m  left of n`, and the line turns between them as often as they need. Clauses that cannot all be drawn are refused with the reason.
+
 **0.5.0**
 
 - Named themes: `diagram theme: nord`, one of thirteen, and `--theme` on the command line to render a file in another without editing it. The playground has a theme picker, which writes the `theme:` line into the source.
@@ -920,6 +1016,7 @@ Pre-1.0, so the minor number is where a breaking change goes. Every removal belo
 
 Open questions the benchmark raised, recorded so a later session does not rediscover them.
 
+- One edge passing some nodes above or below and others left or right — an L-shaped line, across under one node and then down past another — is refused today. Often the picture leaves only one order for the two legs; where two orders both fit, the tool must not pick one, and whether it asks for another clause or follows a standing rule is not decided.
 - Named gaps are the first step toward numbers, but making them minimums took most of the pressure off: they now set how much a diagram breathes, never whether something fits. Whether four names is the right number is still open.
 - Four machines each holding a `files` child with the same text means writing the same line four times. This is the strongest case for a set-level declaration, for terseness rather than for placement.
 - The 2×2 arrangement around a hub is four independent statements, so a fifth machine has no slot to reflow into. There are only eight directions.

package/dist/ast.d.ts

@@ -269,6 +269,13 @@ export interface EdgeStmt {
     textAttrs: Attrs;
     /** `between desktop1 and laptop1` — the gap the line passes through. */
     between?: Passage;
+    /**
+     * `below resolver`, `left of a and b` — which side of a node the line is on
+     * where it passes that node. The placement words, because it is the same
+     * statement about the picture; on an edge it binds only the stretch where the
+     * line is passing, as `between` does. Always `kind: 'offset'` with no gap.
+     */
+    passes?: OffsetPlacement[];
     attrs: Attrs;
     line: number;
 }

package/dist/model.d.ts

@@ -1,4 +1,4 @@
-import type { Attrs, Axis, Kind, Placement } from './ast.js';
+import type { Attrs, Axis, Direction, Kind, Placement } from './ast.js';
 import type { Line } from './text.js';
 import type { Body } from './icons.js';
 /** A `between` clause with its targets resolved. Mirrors `Passage` in `ast.ts`. */
@@ -7,6 +7,17 @@ export interface LayoutPassage {
     /** Which gap, where the pair has two. Absent when the pair leaves no doubt. */
     axis?: Axis;
 }
+/**
+ * `below resolver` on an edge with its targets resolved: the line is on that
+ * side of the box bounding `nodes`, where it passes them. Mirrors the edge's
+ * `passes` in `ast.ts`.
+ */
+export interface LayoutPass {
+    direction: Direction;
+    nodes: LayoutNode[];
+    /** As the author wrote it, for error messages. */
+    written: string;
+}
 /** A node with its geometry solved. Coordinates are absolute, origin top-left. */
 /** A distance past each side of a box. */
 export interface Reach {
@@ -116,6 +127,8 @@ export interface LayoutEdge {
      * rather than solved for, so edges stay out of the constraint system entirely.
      */
     between?: LayoutPassage;
+    /** Which side of which nodes the line passes. Measured in the renderer, like `between`. */
+    passes?: LayoutPass[];
     attrs: Attrs;
     appearance: Attrs;
     line: number;

package/dist/parser.js

@@ -461,9 +461,26 @@ function parseEdge(head, line) {
         between = { targets: read.targets, ...(axis !== undefined ? { axis } : {}) };
         return next;
     });
-    if (tail.placements.length > 0) {
-        throw new SourceError(`${subject}: "${describePlacement(tail.placements[0])}" places a node, and an edge is not ` +
-            'placed — it joins two things that are', line);
+    // An edge is not placed, so a direction on its line says which side of that
+    // node the line passes. The other placements say where a thing *is*, and
+    // have no reading for a line.
+    const passes = [];
+    for (const placement of tail.placements) {
+        const written = describePlacement(placement);
+        if (placement.kind !== 'offset' || placement.written !== undefined) {
+            throw new SourceError(`${subject}: "${written}" places a node, and an edge is not placed — it joins two things ` +
+                'that are. On an edge, above, below, left of and right of say which side of a node the ' +
+                'line passes', line);
+        }
+        if (placement.gap !== undefined) {
+            throw new SourceError(`${subject}: "${written}" gives a gap, and a gap is kept between nodes — the line passes ` +
+                'as close as it reads clearly. Drop the brackets', line);
+        }
+        passes.push(placement);
+    }
+    if (passes.length > 0 && between) {
+        throw new SourceError(`${subject}: "between" and "${describePlacement(passes[0])}" on one edge — an edge passing ` +
+            'between two things already has a side of each, so say one or the other', line);
     }
     refuseTextKey(tail.attrs, subject, 'after the arrow', line);
     return {
@@ -474,6 +491,7 @@ function parseEdge(head, line) {
         both: arrow.text === '<->',
         ...(textToken ? { text: textToken.text } : {}),
         ...(between ? { between } : {}),
+        ...(passes.length > 0 ? { passes } : {}),
         attrs: tail.attrs,
         line,
     };

package/dist/render.js

@@ -1,4 +1,4 @@
-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 { ARROW_LENGTH, ARROW_MARKER_WIDTH, ATTACH_MARGIN, ATTACH_STEP, DECK_STEP, DEFAULT_FONT_SIZE, ICON_LINES, LINE_WIDTH, PAD, SEPARATION_GAP, fontSizeFor, textExtent, textStyleFor, widestLine, } from './constants.js';
 import { describeAxis } from './ast.js';
 import { SourceError } from './errors.js';
 import { ICON_STROKE } from './icons.js';
@@ -34,9 +34,11 @@ export function render(layout, options = {}) {
     // is ordered by where its ends turned out to be.
     const ends = planEndpoints(layout.edges, measurer, fontSize);
     const corridors = planCorridors(layout.edges, ends, measurer, fontSize);
+    const routes = planRoutes(layout.edges, layout.nodes, ends, measurer, fontSize);
+    planLoops(layout.edges, layout.nodes, ends, corridors, routes, 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);
+        const drawn = drawEdge(edge, ends.get(edge), corridors.get(edge), routes.get(edge), theme, measurer, fontSize, layout.markup);
         body.push(drawn.svg);
         ink = union(ink, grow(drawn.ink, layout.margin));
     }
@@ -253,7 +255,7 @@ function drawIcon(icon, x, y, side, theme) {
     ].join('\n');
 }
 // --- edges -------------------------------------------------------------------
-function drawEdge(edge, ends, corridor, theme, measurer, fontSize, markup) {
+function drawEdge(edge, ends, corridor, route, theme, measurer, fontSize, markup) {
     const { start, end } = ends;
     const color = lineOf(edge.appearance, theme.edge);
     const markerEnd = ` marker-end="url(#${markerId(color)})"`;
@@ -269,7 +271,13 @@ function drawEdge(edge, ends, corridor, theme, measurer, fontSize, markup) {
     let ink = extentOfPoints([start, end]);
     let midX;
     let midY;
-    if (corridor) {
+    if (route) {
+        parts.push(`  <path d="${roundedPath(route.points)}" fill="none" stroke="${color}" stroke-width="${LINE_WIDTH}"${markerEnd}${markerStart}/>`);
+        ink = union(ink, extentOfPoints(route.points));
+        midX = route.mid.x;
+        midY = route.mid.y;
+    }
+    else if (corridor) {
         const path = corridorPath(start, end, corridor);
         ink = union(ink, path.ink);
         parts.push(`  <path d="${path.d}" fill="none" stroke="${color}" stroke-width="${LINE_WIDTH}"${markerEnd}${markerStart}/>`);
@@ -1003,6 +1011,775 @@ function planCorridors(edges, ends, measurer, fontSize) {
     }
     return plans;
 }
+/**
+ * Route every edge that has to go around its own two boxes.
+ *
+ * An edge leaving the left of one box for the right of another, with the second
+ * box further right, has to turn back on itself, and a single curve can only
+ * do that by crossing its own boxes. In a row it flattened into a straight line
+ * through both; stepped down, even by a `normal` gap, it still doubled back
+ * across the first box. So such an edge runs along a channel instead, turning
+ * back at each end: in the gap between its two boxes if that holds the line
+ * and its text, and otherwise over the top of everything between its ends,
+ * with its text on the top, where it cannot land on a box.
+ *
+ * Over the top, always, and round the right for a column. Nothing here weighs
+ * one way round against the other: the shorter way ties in the case that
+ * seemed to argue for it, and a default that flips on one box's height is
+ * harder to predict than one that never does. The run is placed the way a
+ * `between` channel is, measured off where the boxes landed.
+ */
+function planLoops(edges, nodes, ends, corridors, routes, measurer, fontSize) {
+    // Loops over the top, gathered so that two sharing a stretch can take a lane
+    // each rather than drawing on top of one another.
+    const tops = [];
+    for (const edge of edges) {
+        if (corridors.has(edge) || edge.passes)
+            continue;
+        const { start, end } = ends.get(edge);
+        if (start.side === undefined || end.side === undefined)
+            continue;
+        // Sides at right angles, one facing away from the other end.
+        if (start.tx * end.tx + start.ty * end.ty === 0) {
+            const inWay = nodes.filter((node) => !(contains(node, edge.from) && contains(node, edge.to)));
+            const plan = turnBack(edge, start, end, inWay, routes, measurer, fontSize);
+            if (plan)
+                tops.push(plan);
+            continue;
+        }
+        // The two ends point opposite ways along one axis, each away from the other.
+        if (start.tx !== -end.tx || start.ty !== -end.ty)
+            continue;
+        const run = start.tx !== 0 ? 'x' : 'y';
+        const across = run === 'x' ? 'y' : 'x';
+        const outward = run === 'x' ? start.tx : start.ty;
+        if (outward * (end[run] - start[run]) >= 0)
+            continue;
+        const a = faceOf(edge.from);
+        const b = faceOf(edge.to);
+        // Far enough out that the line reads as passing, and that half the text,
+        // centered on the line, still clears the box beside it.
+        const clear = Math.max(SEPARATION_GAP, laneExtent(edge, across, measurer, fontSize) / 2 + ATTACH_MARGIN);
+        const from = Math.min(lo(a, run), lo(b, run));
+        const to = Math.max(hi(a, run), hi(b, run));
+        const inWay = nodes.filter((node) => !(contains(node, edge.from) && contains(node, edge.to)));
+        const blocked = (low, high) => inWay.some((node) => {
+            const face = faceOf(node);
+            return (lo(face, run) < to && hi(face, run) > from &&
+                lo(face, across) < high && hi(face, across) > low);
+        });
+        // Boxes apart across the axis have a gap between them, and a line that
+        // fits in it turns back through that — the shortest way, and the one a
+        // single curve was reaching for.
+        const [upper, lower] = lo(a, across) <= lo(b, across) ? [a, b] : [b, a];
+        const gap = { lo: hi(upper, across), hi: lo(lower, across) };
+        const middle = (gap.lo + gap.hi) / 2;
+        if (gap.hi - gap.lo >= clear * 2 && !blocked(middle - clear, middle + clear)) {
+            corridors.set(edge, {
+                axis: across,
+                lane: middle,
+                enter: start[run],
+                leave: end[run],
+                loop: true,
+            });
+            continue;
+        }
+        // Otherwise over the top. Measured as distance outward — up for a row,
+        // right for a column — so one loop serves both.
+        const sign = across === 'y' ? -1 : 1;
+        const out = (box) => {
+            const [p, q] = [sign * lo(box, across), sign * hi(box, across)];
+            return [Math.min(p, q), Math.max(p, q)];
+        };
+        const inner = Math.min(sign * start[across], sign * end[across]);
+        // A box that shares the stretch and reaches into the band the line needs
+        // pushes the line out past it, which can bring another into the band.
+        const pushOut = (start) => {
+            let lane = start;
+            for (let moved = true; moved;) {
+                moved = false;
+                for (const node of inWay) {
+                    const face = faceOf(node);
+                    if (lo(face, run) >= to || hi(face, run) <= from)
+                        continue;
+                    const [near, far] = out(face);
+                    if (far + clear > lane && near < lane + clear && far > inner) {
+                        lane = far + clear;
+                        moved = true;
+                    }
+                }
+            }
+            return lane;
+        };
+        tops.push({
+            edge,
+            across,
+            sign,
+            lane: pushOut(Math.max(out(a)[1], out(b)[1]) + clear),
+            loop: true,
+            from,
+            to,
+            height: sign * start[across] + sign * end[across],
+            pushOut,
+            place: (lane) => corridors.set(edge, { axis: across, lane: sign * lane, enter: start[run], leave: end[run], loop: true }),
+        });
+    }
+    // Lines over one stretch nest so they do not cross. A turn-back goes inside
+    // any loop, because it comes in to a box from the side the loops pass over;
+    // otherwise the shorter goes inside, and of two the same length, the one
+    // whose ends sit further out. Each lane is as far from the one inside it as
+    // the lanes of a named gap are.
+    tops.sort((p, q) => Number(p.loop) - Number(q.loop) || p.to - p.from - (q.to - q.from) || q.height - p.height);
+    const placed = [];
+    for (const top of tops) {
+        for (let moved = true; moved;) {
+            moved = false;
+            for (const other of placed) {
+                if (other.across !== top.across || other.sign !== top.sign)
+                    continue;
+                if (other.from >= top.to || top.from >= other.to)
+                    continue;
+                const step = Math.max(ATTACH_STEP, laneExtent(top.edge, top.across, measurer, fontSize), laneExtent(other.edge, other.across, measurer, fontSize));
+                if (Math.abs(top.lane - other.lane) < step - 0.5) {
+                    top.lane = top.pushOut(other.lane + step);
+                    moved = true;
+                }
+            }
+        }
+        placed.push(top);
+        top.place(top.lane);
+    }
+}
+/**
+ * A route for an edge whose named sides are at right angles and one of which
+ * faces away from the other end: `from: left  to: top` with the far node to
+ * the right. A single curve leaving that side can only turn back across its
+ * own box. So the line steps out of the side facing away, goes out past both
+ * boxes the way the other side faces, runs along there, and comes straight in
+ * to the other side. Undefined when neither side faces away, where the curve
+ * already reads right. The route is recorded in `routes` once its lane is
+ * settled against any other line running outside the same boxes.
+ */
+function turnBack(edge, start, end, inWay, routes, measurer, fontSize) {
+    const facesAway = (from, to) => from.tx * (to.x - from.x) + from.ty * (to.y - from.y) < 0;
+    const startAway = facesAway(start, end);
+    if (!startAway && !facesAway(end, start))
+        return undefined;
+    // Planned from the end facing away, and turned round if that is the far end.
+    const [away, other] = startAway ? [start, end] : [end, start];
+    const [awayBox, otherBox] = (startAway ? [edge.from, edge.to] : [edge.to, edge.from]).map(faceOf);
+    const run = away.tx !== 0 ? 'x' : 'y';
+    const across = run === 'x' ? 'y' : 'x';
+    const make = axesAcross(across).make;
+    // The way the other side faces, which is the way the line goes out.
+    const sign = across === 'y' ? other.ty : other.tx;
+    const clear = Math.max(SEPARATION_GAP, laneExtent(edge, across, measurer, fontSize) / 2 + ATTACH_MARGIN);
+    const stub = away[run] + (run === 'x' ? away.tx : away.ty) * ROUTE_STUB;
+    const from = Math.min(stub, other[run], lo(awayBox, run), lo(otherBox, run));
+    const to = Math.max(stub, other[run], hi(awayBox, run), hi(otherBox, run));
+    // Measured as distance outward, the way the line goes.
+    const out = (box) => {
+        const [p, q] = [sign * lo(box, across), sign * hi(box, across)];
+        return [Math.min(p, q), Math.max(p, q)];
+    };
+    const inner = Math.min(sign * away[across], sign * other[across]);
+    const pushOut = (start) => {
+        let level = start;
+        for (let moved = true; moved;) {
+            moved = false;
+            for (const node of inWay) {
+                const face = faceOf(node);
+                if (lo(face, run) >= to || hi(face, run) <= from)
+                    continue;
+                const [near, far] = out(face);
+                if (far + clear > level && near < level + clear && far > inner) {
+                    level = far + clear;
+                    moved = true;
+                }
+            }
+        }
+        return level;
+    };
+    return {
+        edge,
+        across,
+        sign,
+        lane: pushOut(Math.max(out(awayBox)[1], out(otherBox)[1]) + clear),
+        loop: false,
+        from,
+        to,
+        height: sign * away[across] + sign * other[across],
+        pushOut,
+        place: (lane) => {
+            const at = sign * lane;
+            // A shallow turn steps out no further than half its depth, the half
+            // circle a loop's turn makes, so it stays inside any loop turning
+            // round the same box.
+            const outward = run === 'x' ? away.tx : away.ty;
+            const step = away[run] + outward * Math.min(ROUTE_STUB, Math.abs(at - away[across]) / 2);
+            const points = tidyRoute([away, make(step, away[across]), make(step, at), make(other[run], at), other]);
+            // The text rides on the longest piece, which is the run outside the
+            // boxes unless the two ends are nearly level.
+            let mid = make((stub + other[run]) / 2, at);
+            let best = -1;
+            for (let index = 0; index + 1 < points.length; index += 1) {
+                const [p, q] = [points[index], points[index + 1]];
+                const length = Math.hypot(q.x - p.x, q.y - p.y);
+                if (length > best) {
+                    best = length;
+                    mid = { x: (p.x + q.x) / 2, y: (p.y + q.y) / 2 };
+                }
+            }
+            routes.set(edge, { points: startAway ? points : points.reverse(), mid });
+        },
+    };
+}
+/** The most a route's corner is rounded by. */
+const ROUTE_RADIUS = 20;
+/**
+ * How far a route leaves its side before its first turn: a full corner, and the
+ * arrowhead's length on top so the head lands on a straight piece of line.
+ */
+const ROUTE_STUB = ROUTE_RADIUS + ARROW_LENGTH;
+/** The narrowest gap a route will cross over in, between two nodes it passes on opposite sides. */
+const CROSSING_ROOM = ATTACH_MARGIN * 2;
+function axesAcross(across) {
+    return across === 'y'
+        ? { across, run: 'x', make: (along, level) => ({ x: along, y: level }) }
+        : { across, run: 'y', make: (along, level) => ({ x: level, y: along }) };
+}
+/**
+ * Route every edge that says which side of something it passes.
+ *
+ * `below resolver` means that where the line passes Resolver it is below it —
+ * not that the whole line is. So the line is a run of straight stretches along
+ * the way it travels, and each clause binds only the stretch lying alongside
+ * its nodes. A clause naming several nodes binds the stretch alongside all of
+ * them, which is how `below a and b` says "with no rising in between" and two
+ * separate clauses do not. Consecutive stretches that can share one level do;
+ * where they cannot, the line crosses over in the gap between the two sets of
+ * nodes, and if there is no gap, the file is refused rather than drawn through
+ * a box. No clause says an order: the line meets the nodes in the order they
+ * sit along its way.
+ *
+ * Above and below are passed travelling across the page, left and right
+ * travelling up or down it, so an edge naming both kinds turns between such
+ * runs, as few times as keeps every clause. Which comes first is the named
+ * side's to say, and across when no end names one.
+ *
+ * Nothing here moves a node or looks for a path. Every level is read off where
+ * the named nodes landed, as a `between` channel is, and the only other nodes
+ * consulted are ones sitting on a stretch, which push it further the way its
+ * clause already points.
+ */
+function planRoutes(edges, nodes, ends, measurer, fontSize) {
+    const routes = new Map();
+    for (const edge of edges) {
+        if (edge.passes)
+            routes.set(edge, planRoute(edge, edge.passes, nodes, ends.get(edge), measurer, fontSize));
+    }
+    return routes;
+}
+function planRoute(edge, passes, nodes, { start, end }, measurer, fontSize) {
+    const subject = `edge ${edge.from.name} -> ${edge.to.name}`;
+    const a = faceOf(edge.from);
+    const b = faceOf(edge.to);
+    const named = (anchor, face) => anchor.side === undefined ? centerOf(face) : anchor;
+    // Far enough out that the line reads as passing. The one stretch carrying
+    // the text is held further out, so that half the text, centered on the line,
+    // still clears the box beside it.
+    const clear = SEPARATION_GAP;
+    const inWay = nodes.filter((node) => !(contains(node, edge.from) && contains(node, edge.to)));
+    // Above and below are passed travelling across the page, left and right
+    // travelling up or down it. An edge naming only one kind is one section.
+    const acrossPasses = passes.filter((pass) => sideAxis(pass) === 'y');
+    const downPasses = passes.filter((pass) => sideAxis(pass) === 'x');
+    if (acrossPasses.length === 0 || downPasses.length === 0) {
+        const axes = axesAcross(sideAxis(passes[0]));
+        const travel = Math.sign(named(end, b)[axes.run] - named(start, a)[axes.run]) || 1;
+        const section = cut(axes, passes, reach(start, a, axes), reach(end, b, axes), travel);
+        const carrier = longest(section.stretches);
+        settle(section, (centerOf(a)[axes.across] + centerOf(b)[axes.across]) / 2, carrier);
+        return finish([
+            ...approach(start, a, axes, section.stretches[0].level, travel),
+            ...crossings(section),
+            ...approach(end, b, axes, section.stretches[section.stretches.length - 1].level, -travel).reverse(),
+        ], carrier, axes);
+    }
+    // Both kinds: the line turns between travelling across the page and
+    // travelling down it, as often as its clauses need. A side named at an end
+    // says which it does first; with none named, it goes across first. The
+    // fewest turns that keep every clause win, and at each count the other
+    // order is tried before adding a turn. If every attempt fails the same way,
+    // that is the error; if they fail differently, no one of them is the reason
+    // and the error names every clause.
+    const sideways = (anchor) => anchor.side === undefined ? undefined : anchor.side === 'left' || anchor.side === 'right';
+    const acrossFirst = sideways(start) ?? !(sideways(end) ?? false);
+    const refusals = [];
+    for (const count of [2, 3, 4]) {
+        for (const order of [acrossFirst, !acrossFirst]) {
+            try {
+                return turned(order, count);
+            }
+            catch (error) {
+                if (!(error instanceof SourceError))
+                    throw error;
+                refusals.push(error);
+            }
+        }
+    }
+    if (refusals.every((refusal) => refusal.message === refusals[0].message))
+        throw refusals[0];
+    const written = passes.map((pass) => `"${pass.written}"`);
+    throw new SourceError(`${subject}: no line keeps ${written.slice(0, -1).join(', ')} and ${written[written.length - 1]} ` +
+        'all at once, whichever way it turns — each way misses one of those nodes or runs into one. ' +
+        'Give the nodes more room, or drop a clause', edge.line);
+    /**
+     * A route in `count` sections, alternating across and down, joined at
+     * corners. Each section is planned as an edge naming one kind is, running
+     * from the level of the section before it to the level of the one after,
+     * and each clause binds every section of its kind that passes its node.
+     * The first and last keep as near their own ends as their clauses allow,
+     * so with nothing in the way two sections make an L through the corner
+     * level with both ends; a section between hugs its own clauses. Where the
+     * corners land depends on every section, so they are planned in turn
+     * until none moves.
+     */
+    function turned(acrossFirst, count) {
+        const axes = Array.from({ length: count }, (_, index) => axesAcross((index % 2 === 0) === acrossFirst ? 'y' : 'x'));
+        const last = count - 1;
+        const targets = axes.map(({ across }, index) => index === 0
+            ? centerOf(a)[across]
+            : index === last
+                ? centerOf(b)[across]
+                : (centerOf(a)[across] + centerOf(b)[across]) / 2);
+        // Each section's first and last level, which bound its neighbours' runs.
+        const firstLevels = [...targets];
+        const lastLevels = [...targets];
+        const startAt = reach(start, a, axes[0]);
+        const endAt = reach(end, b, axes[last]);
+        // A section starts or ends at the middle of its end's own node, which
+        // must not push it: the line leaves that node from the side facing it.
+        const obstacles = inWay.filter((node) => !contains(node, edge.from) && !contains(node, edge.to));
+        const near = new Set(passes.flatMap((pass) => pass.nodes));
+        // Which stretch carries the text: its section and index, from the last round.
+        let carries;
+        let sections = [];
+        let travels = [];
+        let bound = new Set();
+        for (let round = 0; round < 8; round += 1) {
+            let moved = false;
+            sections = [];
+            travels = [];
+            bound = new Set();
+            axes.forEach((section, index) => {
+                const from = index === 0 ? startAt : lastLevels[index - 1];
+                const to = index === last ? endAt : firstLevels[index + 1];
+                const travel = Math.sign((index === last ? named(end, b)[section.run] : to) -
+                    (index === 0 ? named(start, a)[section.run] : from)) || 1;
+                const low = Math.min(from, to);
+                const high = Math.max(from, to);
+                const mine = passes.filter((pass) => {
+                    const box = boundingBox(pass.nodes.map(faceOf));
+                    return sideAxis(pass) === section.across && hi(box, section.run) > low && lo(box, section.run) < high;
+                });
+                mine.forEach((pass) => bound.add(pass));
+                const planned = cut(section, mine, from, to, travel);
+                const carrier = carries?.[0] === index ? planned.stretches[carries[1]] : undefined;
+                settle(planned, targets[index], carrier, obstacles, index > 0 && index < last, near);
+                const first = planned.stretches[0].level;
+                const final = planned.stretches[planned.stretches.length - 1].level;
+                if (Math.abs(first - firstLevels[index]) >= 0.5 || Math.abs(final - lastLevels[index]) >= 0.5) {
+                    moved = true;
+                }
+                firstLevels[index] = first;
+                lastLevels[index] = final;
+                sections.push(planned);
+                travels.push(travel);
+            });
+            let wanted;
+            if (edge.lines !== undefined) {
+                sections.forEach((section, index) => {
+                    const best = longest(section.stretches);
+                    if (!wanted || length(best) > length(sections[wanted[0]].stretches[wanted[1]])) {
+                        wanted = [index, section.stretches.indexOf(best)];
+                    }
+                });
+            }
+            const settled = round > 0 && !moved && wanted?.[0] === carries?.[0] && wanted?.[1] === carries?.[1];
+            carries = wanted;
+            if (settled)
+                break;
+        }
+        const unpassed = passes.find((pass) => !bound.has(pass));
+        if (unpassed) {
+            throw new SourceError(`${subject}: the line never passes ${quoteNames(unpassed.nodes)}, so "${unpassed.written}" says ` +
+                'nothing about it', edge.line);
+        }
+        const points = [...approach(start, a, axes[0], firstLevels[0], travels[0])];
+        sections.forEach((section, index) => {
+            points.push(...crossings(section));
+            if (index < last)
+                points.push(section.axes.make(firstLevels[index + 1], lastLevels[index]));
+        });
+        points.push(...approach(end, b, axes[last], lastLevels[last], -travels[last]).reverse());
+        const broken = breaks(points);
+        if (broken) {
+            throw new SourceError(`${subject}: a line passing things both above or below and left or right has to turn, and ` +
+                `no way it can turn keeps "${broken.written}" — drop that clause, or one of the others`, edge.line);
+        }
+        const [which, index] = carries ?? [0, 0];
+        const carrier = edge.lines === undefined ? undefined : sections[which].stretches[index];
+        return finish(points, carrier, axes[which]);
+    }
+    /** The first clause the drawn line breaks, wherever it lies alongside that clause's nodes. */
+    function breaks(points) {
+        for (const pass of passes) {
+            const box = boundingBox(pass.nodes.map(faceOf));
+            const across = sideAxis(pass);
+            const run = across === 'y' ? 'x' : 'y';
+            const further = pass.direction === 'below' || pass.direction === 'right';
+            for (let index = 0; index + 1 < points.length; index += 1) {
+                const [p, q] = [points[index], points[index + 1]];
+                const alongside = Math.abs(p[run] - q[run]) < 0.5
+                    ? p[run] > lo(box, run) + 0.5 && p[run] < hi(box, run) - 0.5
+                    : Math.min(Math.max(p[run], q[run]), hi(box, run)) -
+                        Math.max(Math.min(p[run], q[run]), lo(box, run)) > 0.5;
+                if (!alongside)
+                    continue;
+                const kept = further
+                    ? Math.min(p[across], q[across]) >= hi(box, across) - 0.5
+                    : Math.max(p[across], q[across]) <= lo(box, across) + 0.5;
+                if (!kept)
+                    return pass;
+            }
+        }
+        return undefined;
+    }
+    /**
+     * Where the line reaches along a run at one end, before it turns onto a
+     * stretch. Enough to tell which nodes it passes.
+     */
+    function reach(anchor, face, { run }) {
+        const along = run === 'x' ? anchor.tx : anchor.ty;
+        return anchor.side !== undefined && along !== 0
+            ? anchor[run] + along * ROUTE_STUB
+            : named(anchor, face)[run];
+    }
+    function length(stretch) {
+        return Math.abs(stretch.to - stretch.from);
+    }
+    function longest(stretches) {
+        return stretches.reduce((best, stretch) => (length(stretch) > length(best) ? stretch : best));
+    }
+    /**
+     * The way from `first` to `last` along a run, cut wherever a clause starts
+     * or stops binding, with each piece given the band its clauses leave the
+     * line, and consecutive pieces grouped into stretches that can share one
+     * level. Levels are left for `settle`.
+     */
+    function cut(axes, passes, first, last, travel) {
+        const { across, run } = axes;
+        const low = Math.min(first, last);
+        const high = Math.max(first, last);
+        const clauses = passes.map((pass) => {
+            const box = boundingBox(pass.nodes.map(faceOf));
+            if (hi(box, run) <= low || lo(box, run) >= high) {
+                throw new SourceError(`${subject}: the line never passes ${quoteNames(pass.nodes)}, so "${pass.written}" says nothing ` +
+                    'about it', edge.line);
+            }
+            const further = pass.direction === 'below' || pass.direction === 'right';
+            return {
+                pass,
+                from: lo(box, run),
+                to: hi(box, run),
+                bound: further ? hi(box, across) + clear : lo(box, across) - clear,
+                further,
+            };
+        });
+        // Cut the way into pieces at every place a clause starts or stops binding,
+        // and give each piece the band its clauses leave the line.
+        const cuts = [...new Set([low, high, ...clauses.flatMap((c) => [c.from, c.to])])]
+            .filter((at) => at >= low && at <= high)
+            .sort((p, q) => (p - q) * travel);
+        const pieces = cuts.slice(0, -1).map((from, index) => {
+            const to = cuts[index + 1];
+            const middle = (from + to) / 2;
+            const binding = clauses.filter((c) => c.from < middle && c.to > middle);
+            const floor = binding.filter((c) => c.further).sort((p, q) => q.bound - p.bound)[0];
+            const ceiling = binding.filter((c) => !c.further).sort((p, q) => p.bound - q.bound)[0];
+            if (floor && ceiling && floor.bound > ceiling.bound) {
+                const grouped = [floor, ceiling].some((c) => c.pass.nodes.length > 1);
+                throw new SourceError(`${subject}: "${floor.pass.written}" and "${ceiling.pass.written}" cannot both hold — there ` +
+                    'is a stretch where the line is alongside both, and it cannot be ' +
+                    `${sideWord(floor.pass)} ${quoteNames(floor.pass.nodes)} and ${sideWord(ceiling.pass)} ` +
+                    `${quoteNames(ceiling.pass.nodes)} at the same point. Drop one` +
+                    (grouped
+                        ? ', or name the nodes in separate clauses so the line may cross over between them'
+                        : ''), edge.line);
+            }
+            return {
+                from,
+                to,
+                lo: floor?.bound ?? -Infinity,
+                hi: ceiling?.bound ?? Infinity,
+                floor,
+                ceiling,
+            };
+        });
+        // A way of no length, as the first section of a turned route can be when
+        // the corner is level with its start, is one piece binding nothing.
+        if (pieces.length === 0) {
+            pieces.push({ from: low, to: high, lo: -Infinity, hi: Infinity, floor: undefined, ceiling: undefined });
+        }
+        // Consecutive pieces share one level for as long as their bands overlap.
+        const stretches = [];
+        let current = { lo: -Infinity, hi: Infinity, first: 0, last: 0, from: 0, to: 0, level: 0 };
+        pieces.forEach((piece, index) => {
+            const lower = Math.max(current.lo, piece.lo);
+            const upper = Math.min(current.hi, piece.hi);
+            if (lower <= upper) {
+                Object.assign(current, { lo: lower, hi: upper, last: index });
+            }
+            else {
+                stretches.push(current);
+                current = { lo: piece.lo, hi: piece.hi, first: index, last: index, from: 0, to: 0, level: 0 };
+            }
+        });
+        stretches.push(current);
+        for (const stretch of stretches) {
+            stretch.from = pieces[stretch.first].from;
+            stretch.to = pieces[stretch.last].to;
+        }
+        return { axes, pieces, stretches };
+    }
+    /**
+     * Each stretch sits as near `target` as its band allows, and a node lying
+     * on it pushes it on the way its clause already points. `carrier` is the
+     * stretch held clear for the text, if this section has it.
+     */
+    function settle({ axes: { across, run }, stretches }, target, carrier, obstacles = inWay, hug = false, near = new Set()) {
+        const textClear = Math.max(clear, laneExtent(edge, across, measurer, fontSize) / 2 + ATTACH_MARGIN);
+        for (const stretch of stretches) {
+            const room = stretch === carrier && edge.lines !== undefined ? textClear : clear;
+            const extra = room - clear;
+            const lower = stretch.lo + extra;
+            const upper = stretch.hi - extra;
+            // A stretch hugging its clauses sits as close as its one bound allows.
+            const wanted = !hug
+                ? target
+                : stretch.hi === Infinity && stretch.lo !== -Infinity
+                    ? lower
+                    : stretch.lo === -Infinity && stretch.hi !== Infinity
+                        ? upper
+                        : target;
+            stretch.level = lower <= upper
+                ? Math.min(Math.max(wanted, lower), upper)
+                : (stretch.lo + stretch.hi) / 2;
+            const push = stretch.hi === Infinity ? 1 : stretch.lo === -Infinity ? -1 : 0;
+            if (push === 0)
+                continue;
+            const from = Math.min(stretch.from, stretch.to);
+            const to = Math.max(stretch.from, stretch.to);
+            for (let moved = true; moved;) {
+                moved = false;
+                for (const node of obstacles) {
+                    const face = faceOf(node);
+                    if (lo(face, run) >= to || hi(face, run) <= from)
+                        continue;
+                    // A node the edge names is one it is meant to go close by, so it
+                    // keeps the line only as far off as a crossing does.
+                    const off = near.has(node) && room === clear ? ATTACH_MARGIN : room;
+                    if (lo(face, across) >= stretch.level + off || hi(face, across) <= stretch.level - off) {
+                        continue;
+                    }
+                    stretch.level = push > 0 ? hi(face, across) + off : lo(face, across) - off;
+                    moved = true;
+                }
+            }
+        }
+    }
+    /**
+     * Between two stretches the line crosses over, in whatever run of pieces at
+     * the end of the first leaves room for both levels.
+     */
+    function crossings({ axes: { make }, pieces, stretches }) {
+        const points = [];
+        for (let index = 0; index + 1 < stretches.length; index += 1) {
+            const here = stretches[index];
+            const next = stretches[index + 1];
+            let open = here.last + 1;
+            while (open > here.first &&
+                pieces[open - 1].lo <= next.level &&
+                pieces[open - 1].hi >= next.level) {
+                open -= 1;
+            }
+            const from = open <= here.last ? pieces[open].from : pieces[here.last].to;
+            const to = pieces[here.last].to;
+            if (Math.abs(to - from) < CROSSING_ROOM) {
+                const behind = [...pieces.slice(here.first, here.last + 1)]
+                    .reverse()
+                    .map((piece) => piece.floor ?? piece.ceiling)
+                    .find((clause) => clause !== undefined);
+                const entering = pieces[next.first];
+                const ahead = (next.level > here.level ? entering.floor : entering.ceiling) ??
+                    entering.floor ?? entering.ceiling;
+                throw new SourceError(`${subject}: to pass "${behind.pass.written}" and "${ahead.pass.written}" the line has to ` +
+                    `cross over between ${quoteNames(behind.pass.nodes)} and ${quoteNames(ahead.pass.nodes)}, and there ` +
+                    'is no room between them — give the placement between them a gap, or drop one of the two', edge.line);
+            }
+            const at = (from + to) / 2;
+            points.push(make(at, here.level), make(at, next.level));
+        }
+        return points;
+    }
+    /**
+     * The route drawn through `points`, with its text at the middle of the
+     * piece that lies on the stretch held clear for it.
+     */
+    function finish(points, carrier, { across, run }) {
+        const drawn = tidyRoute(points);
+        let mid = centerOf(boundingBox([a, b]));
+        let best = -1;
+        for (let index = 0; index + 1 < drawn.length; index += 1) {
+            const [p, q] = [drawn[index], drawn[index + 1]];
+            if (!carrier)
+                break;
+            if (Math.abs(p[across] - carrier.level) > 0.5 || Math.abs(q[across] - carrier.level) > 0.5) {
+                continue;
+            }
+            const length = Math.abs(q[run] - p[run]);
+            if (length > best) {
+                best = length;
+                mid = { x: (p.x + q.x) / 2, y: (p.y + q.y) / 2 };
+            }
+        }
+        return { points: drawn, mid };
+    }
+    /**
+     * The points from one end of the line to the level of its nearest stretch.
+     * `toward` is the way the line heads along its run from this end.
+     */
+    function approach(given, face, axes, level, toward) {
+        const { across, run, make } = axes;
+        const anchor = given.side !== undefined ? given : leaving(face, axes, level, toward);
+        const along = run === 'x' ? anchor.tx : anchor.ty;
+        const out = across === 'x' ? anchor.tx : anchor.ty;
+        if (along !== 0) {
+            // Out along the run, one way or the other, then across to the level.
+            const turn = make(anchor[run] + along * ROUTE_STUB, anchor[across]);
+            return [anchor, turn, make(turn[run], level)];
+        }
+        if ((level - anchor[across]) * out >= 0)
+            return [anchor, make(anchor[run], level)];
+        // The side faces away from the level, so the line steps round the back of
+        // its own node — the end the run is heading away from — to get there.
+        const stub = make(anchor[run], anchor[across] + out * ROUTE_STUB);
+        const back = toward > 0 ? lo(face, run) - ROUTE_STUB : hi(face, run) + ROUTE_STUB;
+        return [anchor, stub, make(back, stub[across]), make(back, level)];
+    }
+    /**
+     * An end naming no side leaves from the one facing the level it is going
+     * to, or, when the level is alongside the node, the one facing its way.
+     */
+    function leaving(face, { across, run }, level, toward) {
+        const center = centerOf(face);
+        const side = level > hi(face, across)
+            ? across === 'y' ? 'bottom' : 'right'
+            : level < lo(face, across)
+                ? across === 'y' ? 'top' : 'left'
+                : run === 'x'
+                    ? toward > 0 ? 'right' : 'left'
+                    : toward > 0 ? 'bottom' : 'top';
+        return anchorOn(face, side, side === 'top' || side === 'bottom' ? center.x : center.y);
+    }
+}
+/** Which axis a clause's side sits on: above and below are a matter of y. */
+function sideAxis(pass) {
+    return pass.direction === 'above' || pass.direction === 'below' ? 'y' : 'x';
+}
+/** "below", "left of" — the side as the author would say it. */
+function sideWord(pass) {
+    return pass.direction === 'above' || pass.direction === 'below'
+        ? pass.direction
+        : `${pass.direction} of`;
+}
+/** The box that just bounds several. */
+function boundingBox(boxes) {
+    const x = Math.min(...boxes.map((box) => box.x));
+    const y = Math.min(...boxes.map((box) => box.y));
+    return {
+        x,
+        y,
+        width: Math.max(...boxes.map((box) => box.x + box.width)) - x,
+        height: Math.max(...boxes.map((box) => box.y + box.height)) - y,
+    };
+}
+/** `"a"`, `"a" and "b"` — for error messages. */
+function quoteNames(nodes) {
+    const quoted = nodes.map((node) => `"${node.name}"`);
+    return quoted.length <= 1
+        ? (quoted[0] ?? '')
+        : `${quoted.slice(0, -1).join(', ')} and ${quoted[quoted.length - 1]}`;
+}
+/** Drop repeated points and ones partway along a straight piece, which are not corners. */
+function tidyRoute(points) {
+    const kept = [];
+    for (const point of points) {
+        const previous = kept[kept.length - 1];
+        if (previous && Math.hypot(point.x - previous.x, point.y - previous.y) < 0.5)
+            continue;
+        const before = kept[kept.length - 2];
+        if (before && previous &&
+            Math.abs((previous.x - before.x) * (point.y - previous.y) - (previous.y - before.y) * (point.x - previous.x)) < 1e-6 &&
+            (previous.x - before.x) * (point.x - previous.x) + (previous.y - before.y) * (point.y - previous.y) >= 0) {
+            kept[kept.length - 1] = point;
+            continue;
+        }
+        kept.push(point);
+    }
+    return kept;
+}
+/**
+ * A line through `points` with every corner rounded. A corner takes at most
+ * half of each piece it shares with a neighboring corner, and the whole of a
+ * piece at either end short of the arrowhead, so two corners never overlap and
+ * the head always lands on a straight piece.
+ */
+function roundedPath(points) {
+    const parts = [`M ${round(points[0].x)} ${round(points[0].y)}`];
+    const kappa = 0.5523; // a cubic's handle, as a share of the radius, for a quarter circle
+    for (let index = 1; index + 1 < points.length; index += 1) {
+        const [before, corner, after] = [points[index - 1], points[index], points[index + 1]];
+        const inward = Math.hypot(corner.x - before.x, corner.y - before.y);
+        const outward = Math.hypot(after.x - corner.x, after.y - corner.y);
+        const radius = Math.max(0, Math.min(ROUTE_RADIUS, index === 1 ? inward - ARROW_LENGTH : inward / 2, index + 2 === points.length ? outward - ARROW_LENGTH : outward / 2));
+        const din = { x: (corner.x - before.x) / inward, y: (corner.y - before.y) / inward };
+        const dout = { x: (after.x - corner.x) / outward, y: (after.y - corner.y) / outward };
+        const enter = { x: corner.x - din.x * radius, y: corner.y - din.y * radius };
+        const leave = { x: corner.x + dout.x * radius, y: corner.y + dout.y * radius };
+        parts.push(`L ${round(enter.x)} ${round(enter.y)}`, `C ${round(enter.x + din.x * radius * kappa)} ${round(enter.y + din.y * radius * kappa)}, ` +
+            `${round(leave.x - dout.x * radius * kappa)} ${round(leave.y - dout.y * radius * kappa)}, ` +
+            `${round(leave.x)} ${round(leave.y)}`);
+    }
+    const last = points[points.length - 1];
+    parts.push(`L ${round(last.x)} ${round(last.y)}`);
+    return parts.join(' ');
+}
+function lo(box, axis) {
+    return axis === 'x' ? box.x : box.y;
+}
+function hi(box, axis) {
+    return axis === 'x' ? box.x + box.width : box.y + box.height;
+}
+/** Whether `inner` is `outer` or sits somewhere inside it. */
+function contains(outer, inner) {
+    for (let node = inner; node; node = node.parent) {
+        if (node === outer)
+            return true;
+    }
+    return false;
+}
 /**
  * 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
@@ -1055,10 +1832,11 @@ function corridorPath(start, end, plan) {
     // Along the run the line travels one way, so that is its tangent at both ends
     // of the straight stretch — it enters the gap already going where the gap goes.
     const rt = plan.axis === 'y' ? { tx: forward, ty: 0 } : { tx: 0, ty: forward };
-    const r1 = corridorReach(start, p1, plan.axis);
+    const reach = plan.loop ? loopReach : corridorReach;
+    const r1 = reach(start, p1, plan.axis);
     const c1 = { x: start.x + start.tx * r1, y: start.y + start.ty * r1 };
     const c2 = { x: p1.x - rt.tx * r1, y: p1.y - rt.ty * r1 };
-    const r2 = corridorReach(p2, end, plan.axis);
+    const r2 = reach(p2, end, plan.axis);
     const c3 = { x: p2.x + rt.tx * r2, y: p2.y + rt.ty * r2 };
     const c4 = { x: end.x + end.tx * r2, y: end.y + end.ty * r2 };
     const d = [
@@ -1081,6 +1859,15 @@ 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)));
 }
+/**
+ * How far the handles reach on the turn at either end of a loop. The turn
+ * leaves heading one way and joins the run heading the other, over the depth
+ * between the side and the run, so it is a half circle on that depth — and a
+ * cubic comes closest to a half circle with handles two thirds of its diameter.
+ */
+function loopReach(from, to, axis) {
+    return (Math.abs(axis === 'y' ? to.y - from.y : to.x - from.x) * 2) / 3;
+}
 function sideAttr(edge, key) {
     const value = edge.attrs[key];
     if (value === undefined)

package/dist/resolve.js

@@ -457,6 +457,25 @@ function buildEdges(statements, byName, styles, defaults) {
             }),
             ...(stmt.between.axis !== undefined ? { axis: stmt.between.axis } : {}),
         };
+        const passes = stmt.passes?.map((placement) => {
+            const written = describePlacement(placement);
+            return {
+                direction: placement.direction,
+                written,
+                nodes: placement.targets.map(({ name, part }) => {
+                    if (part !== undefined) {
+                        // The line passes a box, and a side or a point has no side of its
+                        // own to be passed on. Refused by name rather than dropped.
+                        throw new SourceError(`edge passes "${written}", and a line passes a whole box — drop "${part}"`, stmt.line);
+                    }
+                    const node = byName.get(name);
+                    if (!node) {
+                        throw new SourceError(`edge passes "${written}", and "${name}" does not exist`, stmt.line);
+                    }
+                    return node;
+                }),
+            };
+        });
         const appearance = { ...defaults.get('edge'), ...appearanceOf(stmt.attrs, styles, stmt.line) };
         const what = `${stmt.from} -> ${stmt.to}`;
         checkAttrs('edge', what, stmt.attrs, stmt.line);
@@ -479,6 +498,7 @@ function buildEdges(statements, byName, styles, defaults) {
                 ? { text: stmt.text, lines: linesFor(stmt.text, textAttrs, `edge ${what}`, stmt.line) }
                 : {}),
             ...(between ? { between } : {}),
+            ...(passes ? { passes } : {}),
             attrs: stmt.attrs,
             appearance,
             line: stmt.line,
@@ -1268,6 +1288,30 @@ const AXIS_WORD = { x: 'horizontally', y: 'vertically' };
 function memberOn(target, axis) {
     return target.byAxis ? target.byAxis[axis] : target.index;
 }
+/**
+ * The ways named sides can face away from the other end. Opposite sides face
+ * away together or not at all (`left right` with `from` first); sides at right
+ * angles each may, and either is enough (`left top` with `from` first, where
+ * the edge turns back over the top, or with `to` below, where it goes round).
+ */
+function facingAway(fromSide, toSide) {
+    // The axis a side is on, and whether it faces away when its own end is first.
+    const SIDES = {
+        left: { axis: 'x', first: true },
+        right: { axis: 'x', first: false },
+        top: { axis: 'y', first: true },
+        bottom: { axis: 'y', first: false },
+    };
+    const f = SIDES[String(fromSide)];
+    const t = SIDES[String(toSide)];
+    if (!f || !t)
+        return [];
+    const byFrom = { axis: f.axis, fromFirst: f.first };
+    const byTo = { axis: t.axis, fromFirst: !t.first };
+    if (f.axis !== t.axis)
+        return [byFrom, byTo];
+    return byFrom.fromFirst === byTo.fromFirst ? [byFrom] : [];
+}
 /**
  * Where a node sits within the group being solved: which member holds it, and
  * where inside that member. An edge may name anything at any depth, so its ends
@@ -1303,7 +1347,9 @@ function corridorsIn(edges, locate, measurer, fontSize) {
         // edge told to pass between two named things carries its text in *that*
         // corridor rather than in the gap between its own ends, so widening this one
         // would make room where the text never goes.
-        if (edge.text === undefined || edge.between)
+        // An edge that says which side of something it passes is routed round it,
+        // and its text rides on that route for the same reason.
+        if (edge.text === undefined || edge.between || edge.passes)
             continue;
         const from = locate(edge.from);
         const to = locate(edge.to);
@@ -1316,7 +1362,13 @@ function corridorsIn(edges, locate, measurer, fontSize) {
         // one end only would move the midpoint rather than lengthen the run.
         const extent = (axis) => textExtent(edge.lines, edge.textAttrs, axis, measurer, fontSize, edge.line) +
             (TEXT_CLEARANCE + ARROW_LENGTH) * 2;
-        corridors.push({ edge, from, to, need: { x: extent('x'), y: extent('y') } });
+        corridors.push({
+            edge,
+            from,
+            to,
+            need: { x: extent('x'), y: extent('y') },
+            away: facingAway(edge.attrs['from'], edge.attrs['to']),
+        });
     }
     return corridors;
 }
@@ -1658,7 +1710,7 @@ function alignedAt(side, span, own) {
  */
 function room(corridors, constraints, solved, solveAll, made) {
     let added = false;
-    for (const [index, { from, to, need }] of corridors.entries()) {
+    for (const [index, { from, to, need, away }] of corridors.entries()) {
         const clear = (axis) => {
             const at = (end) => solved[axis][end.index] + end.offset[axis];
             const size = (end) => (axis === 'x' ? end.width : end.height);
@@ -1672,6 +1724,11 @@ function room(corridors, constraints, solved, solveAll, made) {
         if (open.length !== 1)
             continue;
         const axis = open[0];
+        // Ends facing away along the only open axis mean the boxes share a row, and
+        // the renderer takes the line over the top with its text — see `planLoops`.
+        // Widening the gap would make room where the text never goes.
+        if (away.some((way) => way.axis === axis && (clear(axis).before === from) === way.fromFirst))
+            continue;
         // Given already, and a minimum stays met: asking again would widen
         // nothing and only keep the caller looking.
         if (made.has(`${index}:${axis}`))

package/package.json

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