dsh-model-everything 0.5.1 → 0.5.2

package/lib/client.js

@@ -1617,6 +1617,114 @@ window.__ModuleLoader__.load({
       return out;
     }
     
+    // src/render/trunk.ts
+    var TRUNK_MIN_EDGES = 3;
+    function isVerticalSide(side) {
+      return side === "top" || side === "bottom";
+    }
+    function trunkAt(box, side) {
+      if (side === "top") return box.y - ROUTE_STUB;
+      if (side === "bottom") return box.y + box.height + ROUTE_STUB;
+      if (side === "left") return box.x - ROUTE_STUB;
+      return box.x + box.width + ROUTE_STUB;
+    }
+    function alongSide(point, side) {
+      return isVerticalSide(side) ? point.x : point.y;
+    }
+    function alongNormal(point, side) {
+      return isVerticalSide(side) ? point.y : point.x;
+    }
+    function facesTrunk(point, side, at) {
+      const normal = normalOf(side);
+      const outward = isVerticalSide(side) ? normal.y : normal.x;
+      return (at - alongNormal(point, side)) * outward > 0.5;
+    }
+    function keyOf(end) {
+      return end.to + "\0" + end.entry + "\0" + (end.arrow ?? "");
+    }
+    function clearSegment(boxes, skip, x1, y1, x2, y2) {
+      for (const box of boxes) {
+        if (skip.includes(box)) continue;
+        if (crossesBox(x1, y1, x2, y2, box)) return false;
+      }
+      return true;
+    }
+    function onOneLine(group, side, at, low, high) {
+      if (isVerticalSide(group.side) !== isVerticalSide(side)) return false;
+      if (group.at !== at) return false;
+      return Math.min(group.to, high) - Math.max(group.from, low) > 0.5;
+    }
+    function planTrunks(input) {
+      const groups = [];
+      const groupOf = /* @__PURE__ */ new Map();
+      const buckets = /* @__PURE__ */ new Map();
+      for (const end of input.ends) {
+        if (end.runY === void 0) continue;
+        if (isVerticalSide(end.exit) !== isVerticalSide(end.entry)) continue;
+        const source = input.boxOf(end.from);
+        const target = input.boxOf(end.to);
+        if (source === void 0 || target === void 0) continue;
+        if (source === target) continue;
+        const exit = input.exitPortOf(end.index);
+        if (exit === void 0) continue;
+        const at = trunkAt(target, end.entry);
+        if (!facesTrunk(exit, end.exit, at)) continue;
+        const candidate = { end, source, target, at, exit, branch: alongSide(exit, end.exit) };
+        const key = keyOf(end);
+        const list = buckets.get(key);
+        if (list === void 0) buckets.set(key, [candidate]);
+        else list.push(candidate);
+      }
+      for (const list of buckets.values()) {
+        const bySource = /* @__PURE__ */ new Map();
+        for (const candidate of list) {
+          const seen = bySource.get(candidate.end.from);
+          if (seen === void 0) bySource.set(candidate.end.from, [candidate]);
+          else seen.push(candidate);
+        }
+        const members = list.filter((candidate) => bySource.get(candidate.end.from).length === 1);
+        if (members.length < TRUNK_MIN_EDGES) continue;
+        const target = members[0].target;
+        const side = members[0].end.entry;
+        const at = members[0].at;
+        const entryAlong = isVerticalSide(side) ? target.x + target.width / 2 : target.y + target.height / 2;
+        let lead = members[0];
+        for (const candidate of members) {
+          if (Math.abs(candidate.branch - entryAlong) < Math.abs(lead.branch - entryAlong) - 1e-9) lead = candidate;
+        }
+        let low = entryAlong;
+        let high = entryAlong;
+        for (const candidate of members) {
+          low = Math.min(low, candidate.branch);
+          high = Math.max(high, candidate.branch);
+        }
+        const vertical = isVerticalSide(side);
+        const run = vertical ? [low, at, high, at] : [at, low, at, high];
+        if (!clearSegment(input.boxes, [target], run[0], run[1], run[2], run[3])) continue;
+        let blocked = false;
+        for (const candidate of members) {
+          const drop = vertical ? [candidate.branch, candidate.exit.y, candidate.branch, at] : [candidate.exit.x, candidate.branch, at, candidate.branch];
+          if (!clearSegment(input.boxes, [candidate.source, target], drop[0], drop[1], drop[2], drop[3])) blocked = true;
+        }
+        if (blocked) continue;
+        if (groups.some((group) => onOneLine(group, side, at, low, high))) continue;
+        const id = groups.length;
+        groups.push({
+          id,
+          target: members[0].end.to,
+          side,
+          at,
+          entryAlong,
+          from: low,
+          to: high,
+          lead: lead.end.index,
+          members: members.map((candidate) => candidate.end.index)
+        });
+        for (const candidate of members) groupOf.set(candidate.end.index, id);
+      }
+      return { groups, groupOf };
+    }
+    
     // src/render/symbol.ts
     function cubicPoint(curve, t) {
       const u = 1 - t;
@@ -1786,7 +1894,7 @@ window.__ModuleLoader__.load({
     var CAPTION_CHAR_WIDTH = 6.2;
     var PORT_SEPARATION = 14;
     var PORT_SIDES = ["top", "right", "bottom", "left"];
-    var isVerticalSide = (side) => side === "top" || side === "bottom";
+    var isVerticalSide2 = (side) => side === "top" || side === "bottom";
     var MULTI_EDGE_SPACING = 20;
     function packPorts(wanted, low, high) {
       const placed = [];
@@ -1802,6 +1910,14 @@ window.__ModuleLoader__.load({
       }
       return placed;
     }
+    function centreRun(placed, low, high) {
+      if (placed.length === 0) return placed;
+      const first = placed[0];
+      const last = placed[placed.length - 1];
+      const middle = (low + high) / 2;
+      const shift = Math.min(high - last, Math.max(low - first, middle - (first + last) / 2));
+      return shift === 0 ? placed : placed.map((value) => value + shift);
+    }
     function roleOfNode(node) {
       if (node.role === "error") return "fail";
       if (node.role === "warning") return "findings";
@@ -1835,42 +1951,65 @@ window.__ModuleLoader__.load({
     var LABEL_HEIGHT = 12;
     var LABEL_PAD = 2;
     var LABEL_STEP = 3;
-    function placeLabel(label, from, to, boxes, placed, segments) {
+    function runsOf(points) {
+      const runs = [];
+      for (let index = 0; index + 1 < points.length; index += 1) {
+        const from = points[index];
+        const to = points[index + 1];
+        const length = Math.abs(to.x - from.x) + Math.abs(to.y - from.y);
+        if (length < 1) continue;
+        runs.push({ from, to, length, index });
+      }
+      return runs.sort((left, right) => right.length - left.length || left.index - right.index);
+    }
+    function placeLabel(label, points, boxes, placed, otherRoutes) {
       const width = textWidth(label);
       const height = LABEL_HEIGHT;
       const spotAt = (x, y) => ({ x, y, width, height });
       const hitsBox = (spot, box) => spot.x - spot.width / 2 < box.x + box.width + LABEL_PAD && spot.x + spot.width / 2 > box.x - LABEL_PAD && spot.y - spot.height / 2 < box.y + box.height + LABEL_PAD && spot.y + spot.height / 2 > box.y - LABEL_PAD;
       const hitsSpot = (spot, other) => spot.x - spot.width / 2 < other.x + other.width / 2 + LABEL_PAD && spot.x + spot.width / 2 > other.x - other.width / 2 - LABEL_PAD && spot.y - spot.height / 2 < other.y + other.height / 2 + LABEL_PAD && spot.y + spot.height / 2 > other.y - other.height / 2 - LABEL_PAD;
       const hitsSegment = (spot, segment) => spot.x + spot.width / 2 > Math.min(segment.x1, segment.x2) - LABEL_PAD && spot.x - spot.width / 2 < Math.max(segment.x1, segment.x2) + LABEL_PAD && spot.y + spot.height / 2 > Math.min(segment.y1, segment.y2) - LABEL_PAD && spot.y - spot.height / 2 < Math.max(segment.y1, segment.y2) + LABEL_PAD;
-      const clearOfBoxes = (spot) => {
-        for (const box of boxes) if (hitsBox(spot, box)) return false;
-        for (const earlier of placed) if (hitsSpot(spot, earlier)) return false;
-        return true;
-      };
-      const clearOfEdges = (spot) => {
-        for (const segment of segments) if (hitsSegment(spot, segment)) return false;
-        return true;
+      const collisionsAt = (spot, run) => {
+        let boxHits = 0;
+        let labelHits = 0;
+        let edgeHits = 0;
+        for (const box of boxes) if (hitsBox(spot, box)) boxHits += 1;
+        for (const earlier of placed) if (hitsSpot(spot, earlier)) labelHits += 1;
+        for (const route of otherRoutes) {
+          for (const segment of route) {
+            if (!hitsSegment(spot, segment)) continue;
+            edgeHits += 1;
+            break;
+          }
+        }
+        return { run, collisions: boxHits + labelHits + edgeHits, boxes: boxHits, labels: labelHits, edges: edgeHits };
       };
-      const middle = { x: (from.x + to.x) / 2, y: (from.y + to.y) / 2 };
-      const dx = to.x - from.x;
-      const dy = to.y - from.y;
-      const length = Math.abs(dx) + Math.abs(dy);
-      const ux = dx / length;
-      const uy = dy / length;
-      const along = Math.abs(ux) * width / 2 + Math.abs(uy) * height / 2;
-      const bound = Math.max(0, length / 2 - along);
-      const walk = [0];
-      for (let step = LABEL_STEP; step <= bound + 1e-3; step += LABEL_STEP) walk.push(step, -step);
-      const at = (offset) => spotAt(middle.x + ux * offset, middle.y + uy * offset);
-      for (const offset of walk) {
-        const spot = at(offset);
-        if (clearOfBoxes(spot) && clearOfEdges(spot)) return spot;
-      }
-      for (const offset of walk) {
-        const spot = at(offset);
-        if (clearOfBoxes(spot)) return spot;
-      }
-      return at(0);
+      const runs = runsOf(points);
+      if (runs.length === 0) {
+        const point = points[0] ?? { x: 0, y: 0 };
+        return { ...spotAt(point.x, point.y), run: -1, collisions: 0, boxes: 0, labels: 0, edges: 0 };
+      }
+      let best;
+      for (const [runIndex, run] of runs.entries()) {
+        const dx = run.to.x - run.from.x;
+        const dy = run.to.y - run.from.y;
+        const ux = dx / run.length;
+        const uy = dy / run.length;
+        const middle = { x: (run.from.x + run.to.x) / 2, y: (run.from.y + run.to.y) / 2 };
+        const along = Math.abs(ux) * width / 2 + Math.abs(uy) * height / 2;
+        const bound = Math.max(0, run.length / 2 - along);
+        const walk = [0];
+        for (let step = LABEL_STEP; step <= bound + 1e-3; step += LABEL_STEP) walk.push(step, -step);
+        for (const offset of walk) {
+          const spot = spotAt(middle.x + ux * offset, middle.y + uy * offset);
+          const placement = collisionsAt(spot, runIndex);
+          if (placement.collisions === 0) return { ...spot, ...placement };
+          if (best === void 0 || placement.collisions < best.collisions || placement.collisions === best.collisions && placement.boxes + placement.labels < best.boxes + best.labels) {
+            best = { ...spot, ...placement };
+          }
+        }
+      }
+      return best;
     }
     function drawnExtent(shapes) {
       let width = 0;
@@ -1898,10 +2037,24 @@ window.__ModuleLoader__.load({
           case "title":
             consider(textWidth(shape.lines?.[0] ?? "") + shape.x, shape.y + 12);
             break;
+          case "junction":
+            break;
         }
       }
       return { width, height };
     }
+    function boxesCrossedBy(points, from, to, boxes) {
+      const crossed = [];
+      for (let index = 0; index + 1 < points.length; index += 1) {
+        const a = points[index];
+        const b = points[index + 1];
+        for (const box of boxes) {
+          if (box === from || box === to) continue;
+          if (crossesBox(a.x, a.y, b.x, b.y, box)) crossed.push(box);
+        }
+      }
+      return crossed;
+    }
     function paintWith(diagram, overrides = {}, options = {}) {
       const colours = palette(overrides, options);
       const shapes = [];
@@ -1965,21 +2118,100 @@ window.__ModuleLoader__.load({
         endsAt.set(edge.from, (endsAt.get(edge.from) ?? 0) + 1);
         endsAt.set(edge.to, (endsAt.get(edge.to) ?? 0) + 1);
       }
+      const spanOf2 = (boxId, side, corner) => {
+        const box = endBox(boxId);
+        const vertical = side === "top" || side === "bottom";
+        const middle = vertical ? box.x + box.width / 2 : box.y + box.height / 2;
+        const within = (low, high) => ({ low, high: Math.max(low, high) });
+        switch (shapeOf(boxId)) {
+          // The four vertices of a diamond, and the four cardinal points of an ellipse, are the middles of its sides.
+          case "diamond":
+          case "circle":
+            return within(middle, middle);
+          case "hexagon":
+            return vertical ? within(box.x + hexagonCut(box.width), box.x + box.width - hexagonCut(box.width)) : within(middle, middle);
+          case "stadium": {
+            const radius = stadiumRadius(box);
+            return vertical ? within(box.x + radius, box.x + box.width - radius) : within(middle, middle);
+          }
+          case "cylinder": {
+            if (vertical) return within(middle, middle);
+            const cap = cylinderCaps(box).cap;
+            return within(box.y + cap, box.y + box.height - cap);
+          }
+          default: {
+            const inset = corner ? 2 : vertical ? PORT_INSET : 8;
+            return vertical ? within(box.x + inset, box.x + box.width - inset) : within(box.y + inset, box.y + box.height - inset);
+          }
+        }
+      };
+      const clampTo = (boxId, side, value, corner) => {
+        const span = spanOf2(boxId, side, corner);
+        return Math.min(span.high, Math.max(span.low, value));
+      };
+      const pointOn = (boxId, side, along) => {
+        const box = endBox(boxId);
+        if (side === "left") return { x: box.x, y: along };
+        if (side === "right") return { x: box.x + box.width, y: along };
+        if (side === "top") return { x: along, y: shapeOf(boxId) === "cylinder" ? cylinderApex(box, "top").y : box.y };
+        return { x: along, y: shapeOf(boxId) === "cylinder" ? cylinderApex(box, "bottom").y : box.y + box.height };
+      };
       const claimed = /* @__PURE__ */ new Map();
       const claimedAt = /* @__PURE__ */ new Map();
       const claim = (id, index, end, side) => {
         claimed.set(endKey(index, end), side);
-        claimedAt.set(id, [...claimedAt.get(id) ?? [], side]);
+        claimedAt.set(id, [...claimedAt.get(id) ?? [], { index, side }]);
+      };
+      const takenSides = (id, except) => (claimedAt.get(id) ?? []).filter((entry) => entry.index !== except).map((entry) => entry.side);
+      const sideMiddle = (box, side) => isVerticalSide2(side) ? box.x + box.width / 2 : box.y + box.height / 2;
+      const sidePoint = (boxId, side) => pointOn(boxId, side, sideMiddle(endBox(boxId), side));
+      const facesAway2 = (box, other, side) => {
+        const out = normalOf(side);
+        const dx = other.x + other.width / 2 - (box.x + box.width / 2);
+        const dy = other.y + other.height / 2 - (box.y + box.height / 2);
+        return out.x * dx + out.y * dy < 0;
       };
-      const bestSide = (id, other) => {
+      const stubAlong = (pinnedId, pinnedSide, freeSide) => {
+        const point = sidePoint(pinnedId, pinnedSide);
+        const out = normalOf(pinnedSide);
+        return isVerticalSide2(freeSide) ? point.x + out.x * ROUTE_STUB : point.y + out.y * ROUTE_STUB;
+      };
+      const offers = (boxId, side, value) => {
+        const span = spanOf2(boxId, side, true);
+        return value >= span.low - 0.01 && value <= span.high + 0.01;
+      };
+      const bendBudget = (fromId, toId, exit, entry, index) => {
+        const from = endBox(fromId);
+        const to = endBox(toId);
+        if (facesAway2(from, to, exit) || facesAway2(to, from, entry)) return 4;
+        if (isVerticalSide2(exit) === isVerticalSide2(entry)) {
+          const out = normalOf(exit);
+          const into = normalOf(entry);
+          const sameWay = out.x === -into.x && out.y === -into.y;
+          const fromSpan = spanOf2(fromId, exit, true);
+          const toSpan = spanOf2(toId, entry, true);
+          const meet = fromSpan.low <= toSpan.high + 0.01 && toSpan.low <= fromSpan.high + 0.01;
+          return sameWay && meet ? 0 : 2;
+        }
+        const horizontalId = isVerticalSide2(exit) ? toId : fromId;
+        const horizontalSide = isVerticalSide2(exit) ? entry : exit;
+        const verticalId = isVerticalSide2(exit) ? fromId : toId;
+        const verticalSide = isVerticalSide2(exit) ? exit : entry;
+        if (!offers(verticalId, verticalSide, stubAlong(horizontalId, horizontalSide, verticalSide))) return 2;
+        const crowded = takenSides(fromId, index).includes(exit) || takenSides(toId, index).includes(entry);
+        return crowded ? 2 : 1;
+      };
+      const bestSide = (id, otherId, end, partner, index) => {
         const box = endBox(id);
+        const other = endBox(otherId);
         const centre = { x: box.x + box.width / 2, y: box.y + box.height / 2 };
         const toward = { x: other.x + other.width / 2 - centre.x, y: other.y + other.height / 2 - centre.y };
         const reach = Math.hypot(toward.x, toward.y);
-        const taken = claimedAt.get(id) ?? [];
+        const taken = takenSides(id, index);
         let best;
         for (const side of PORT_SIDES) {
           if (taken.includes(side)) continue;
+          const bends = end === "exit" ? bendBudget(id, otherId, side, partner, index) : bendBudget(otherId, id, partner, side, index);
           const normal = normalOf(side);
           const score = reach === 0 ? 0 : (normal.x * toward.x + normal.y * toward.y) / reach;
           const point = anchor(box, side);
@@ -1987,11 +2219,43 @@ window.__ModuleLoader__.load({
             Math.max(other.x - point.x, 0, point.x - (other.x + other.width)),
             Math.max(other.y - point.y, 0, point.y - (other.y + other.height))
           );
-          const better = best === void 0 || score > best.score + 1e-9 || Math.abs(score - best.score) <= 1e-9 && near < best.near - 1e-9;
-          if (better) best = { side, score, near };
+          const partnerPoint = anchor(other, partner);
+          const ground = Math.abs(point.x - partnerPoint.x) + Math.abs(point.y - partnerPoint.y);
+          const better = best === void 0 || bends < best.bends || bends === best.bends && (score > best.score + 1e-9 || Math.abs(score - best.score) <= 1e-9 && (near < best.near - 1e-9 || Math.abs(near - best.near) <= 1e-9 && ground < best.ground - 1e-9));
+          if (better) best = { side, bends, score, near, ground };
         }
         return best?.side;
       };
+      const bestPair = (fromId, toId, index) => {
+        const approach = approachSides(endBox(fromId), endBox(toId));
+        const pairs = [
+          { exit: "bottom", entry: "top" },
+          { exit: "top", entry: "bottom" },
+          { exit: "right", entry: "left" },
+          { exit: "left", entry: "right" }
+        ];
+        let best = approach;
+        let bestBends = bendBudget(fromId, toId, approach.exit, approach.entry, index);
+        for (const pair of pairs) {
+          const bends = bendBudget(fromId, toId, pair.exit, pair.entry, index);
+          if (bends >= bestBends) continue;
+          best = pair;
+          bestBends = bends;
+        }
+        return best;
+      };
+      const bestEnd = (id, otherId, end, partner, index) => {
+        const approach = end === "exit" ? approachSides(endBox(id), endBox(otherId)).exit : approachSides(endBox(otherId), endBox(id)).entry;
+        let best = approach;
+        let bestBends = end === "exit" ? bendBudget(id, otherId, approach, partner, index) : bendBudget(otherId, id, partner, approach, index);
+        for (const side of PORT_SIDES) {
+          const bends = end === "exit" ? bendBudget(id, otherId, side, partner, index) : bendBudget(otherId, id, partner, side, index);
+          if (bends >= bestBends) continue;
+          best = side;
+          bestBends = bends;
+        }
+        return best;
+      };
       diagram.edges.forEach((edge, index) => {
         if (edge.from === edge.to) return;
         const source = endBox(edge.from);
@@ -2018,7 +2282,9 @@ window.__ModuleLoader__.load({
           const id = end === "exit" ? edge.from : edge.to;
           if ((endsAt.get(id) ?? 0) < 2) continue;
           if (!hasDiscretePorts(shapeOf(id))) continue;
-          const side = bestSide(id, end === "exit" ? target : source);
+          const approached = approachSides(source, target);
+          const partner = claimed.get(endKey(index, end === "exit" ? "entry" : "exit")) ?? (end === "exit" ? approached.entry : approached.exit);
+          const side = bestSide(id, end === "exit" ? edge.to : edge.from, end, partner, index);
           if (side === void 0) continue;
           claim(id, index, end, side);
         }
@@ -2027,20 +2293,22 @@ window.__ModuleLoader__.load({
         const source = endBox(edge.from);
         const target = endBox(edge.to);
         if (source === void 0 || target === void 0 || edge.from === edge.to) return void 0;
-        const sides2 = placement.across.has(index) ? { exit: "right", entry: "left" } : approachSides(source, target);
+        if (placement.across.has(index)) return { exit: "right", entry: "left" };
         const lane = placement.lanes.get(index);
-        if (lane === void 0 || lane.points.length === 0) {
+        const down = target.y > source.y;
+        if (lane !== void 0 && lane.points.length > 0) {
           return {
-            exit: claimed.get(endKey(index, "exit")) ?? sides2.exit,
-            entry: claimed.get(endKey(index, "entry")) ?? sides2.entry
+            exit: claimed.get(endKey(index, "exit")) ?? (down ? "bottom" : "top"),
+            entry: claimed.get(endKey(index, "entry")) ?? (down ? "top" : "bottom"),
+            at: lane.points[0].x
           };
         }
-        const down = target.y > source.y;
-        return {
-          exit: claimed.get(endKey(index, "exit")) ?? (down ? "bottom" : "top"),
-          entry: claimed.get(endKey(index, "entry")) ?? (down ? "top" : "bottom"),
-          at: lane.points[0].x
-        };
+        const exit = claimed.get(endKey(index, "exit"));
+        const entry = claimed.get(endKey(index, "entry"));
+        if (exit !== void 0 && entry !== void 0) return { exit, entry };
+        if (exit !== void 0) return { exit, entry: bestEnd(edge.to, edge.from, "entry", exit, index) };
+        if (entry !== void 0) return { exit: bestEnd(edge.from, edge.to, "exit", entry, index), entry };
+        return bestPair(edge.from, edge.to, index);
       });
       const laneClear = (points, x, from, to) => {
         for (let at = 0; at + 1 < points.length; at += 1) {
@@ -2079,50 +2347,12 @@ window.__ModuleLoader__.load({
       }
       const wanted = /* @__PURE__ */ new Map();
       const slotKey = (boxId, side, index) => boxId + ":" + side + ":" + String(index);
-      const spanOf2 = (boxId, side, corner) => {
-        const box = endBox(boxId);
-        const vertical = side === "top" || side === "bottom";
-        const middle = vertical ? box.x + box.width / 2 : box.y + box.height / 2;
-        const within = (low, high) => ({ low, high: Math.max(low, high) });
-        switch (shapeOf(boxId)) {
-          // The four vertices of a diamond, and the four cardinal points of an ellipse, are the middles of its sides.
-          case "diamond":
-          case "circle":
-            return within(middle, middle);
-          case "hexagon":
-            return vertical ? within(box.x + hexagonCut(box.width), box.x + box.width - hexagonCut(box.width)) : within(middle, middle);
-          case "stadium": {
-            const radius = stadiumRadius(box);
-            return vertical ? within(box.x + radius, box.x + box.width - radius) : within(middle, middle);
-          }
-          case "cylinder": {
-            if (vertical) return within(middle, middle);
-            const cap = cylinderCaps(box).cap;
-            return within(box.y + cap, box.y + box.height - cap);
-          }
-          default: {
-            const inset = corner ? 2 : vertical ? PORT_INSET : 8;
-            return vertical ? within(box.x + inset, box.x + box.width - inset) : within(box.y + inset, box.y + box.height - inset);
-          }
-        }
-      };
-      const clampTo = (boxId, side, value, corner) => {
-        const span = spanOf2(boxId, side, corner);
-        return Math.min(span.high, Math.max(span.low, value));
-      };
-      const pointOn = (boxId, side, along) => {
-        const box = endBox(boxId);
-        if (side === "left") return { x: box.x, y: along };
-        if (side === "right") return { x: box.x + box.width, y: along };
-        if (side === "top") return { x: along, y: shapeOf(boxId) === "cylinder" ? cylinderApex(box, "top").y : box.y };
-        return { x: along, y: shapeOf(boxId) === "cylinder" ? cylinderApex(box, "bottom").y : box.y + box.height };
-      };
       for (const [index, entry] of facing.entries()) {
         if (entry === void 0) continue;
         const edge = diagram.edges[index];
         const from = endBox(edge.from);
         const to = endBox(edge.to);
-        const middle = (box, side) => isVerticalSide(side) ? box.x + box.width / 2 : box.y + box.height / 2;
+        const middle = (box, side) => isVerticalSide2(side) ? box.x + box.width / 2 : box.y + box.height / 2;
         const fromMiddle = middle(from, entry.exit);
         const toMiddle = middle(to, entry.entry);
         const corner = entry.at !== void 0;
@@ -2133,14 +2363,14 @@ window.__ModuleLoader__.load({
           const chosen = entry.at + (laneShift.get(index) ?? 0);
           exitWanted = clampTo(edge.from, entry.exit, chosen, corner);
           entryWanted = clampTo(edge.to, entry.entry, chosen, corner);
-        } else if (isVerticalSide(entry.exit) === isVerticalSide(entry.entry)) {
+        } else if (isVerticalSide2(entry.exit) === isVerticalSide2(entry.entry)) {
           const target = spanOf2(edge.to, entry.entry, false);
           const chosen = (fromMiddle >= target.low && fromMiddle <= target.high ? fromMiddle : clampTo(edge.from, entry.exit, toMiddle, false)) + offset;
           exitWanted = clampTo(edge.from, entry.exit, chosen, corner);
           entryWanted = clampTo(edge.to, entry.entry, chosen, corner);
         } else {
-          exitWanted = hasDiscretePorts(shapeOf(edge.from)) ? fromMiddle : clampTo(edge.from, entry.exit, anchor(to, entry.entry).x + normalOf(entry.entry).x * ROUTE_STUB, false) + offset;
-          entryWanted = hasDiscretePorts(shapeOf(edge.to)) ? toMiddle : clampTo(edge.to, entry.entry, anchor(from, entry.exit).x + normalOf(entry.exit).x * ROUTE_STUB, false) + offset;
+          exitWanted = hasDiscretePorts(shapeOf(edge.from)) ? fromMiddle : clampTo(edge.from, entry.exit, stubAlong(edge.to, entry.entry, entry.exit), false) + offset;
+          entryWanted = hasDiscretePorts(shapeOf(edge.to)) ? toMiddle : clampTo(edge.to, entry.entry, stubAlong(edge.from, entry.exit, entry.entry), false) + offset;
         }
         wanted.set(slotKey(edge.from, entry.exit, index), exitWanted);
         wanted.set(slotKey(edge.to, entry.entry, index), entryWanted);
@@ -2189,6 +2419,109 @@ window.__ModuleLoader__.load({
         }
         if (!moved) break;
       }
+      const trunkEnds = [];
+      diagram.edges.forEach((edge, index) => {
+        const entry = facing[index];
+        if (entry === void 0) return;
+        const runY = placement.runs.get(index);
+        trunkEnds.push({
+          index,
+          from: edge.from,
+          to: edge.to,
+          exit: entry.exit,
+          entry: entry.entry,
+          ...edge.arrow === void 0 ? {} : { arrow: edge.arrow },
+          ...runY === void 0 ? {} : { runY }
+        });
+      });
+      const planFor = (exitPortOf) => planTrunks({
+        ends: trunkEnds,
+        // Only a node's own box is a trunk target: an arrow into a boundary points past it, not at it.
+        boxOf: (id) => boxes.get(id),
+        boxes: boxList,
+        exitPortOf
+      });
+      const packedExit = (index) => {
+        const entry = facing[index];
+        if (entry === void 0) return void 0;
+        const edge = diagram.edges[index];
+        const coordinate = placedPort.get(slotKey(edge.from, entry.exit, index));
+        return coordinate === void 0 ? void 0 : pointOn(edge.from, entry.exit, coordinate);
+      };
+      const planned = planFor(packedExit);
+      const onLane = (index, coordinate) => {
+        if (planned.groupOf.has(index)) return false;
+        const lane = placement.lanes.get(index);
+        if (lane === void 0 || lane.points.length === 0) return false;
+        return Math.abs(lane.points[0].x - coordinate) <= 0.5;
+      };
+      const rows = [];
+      const rowOf = /* @__PURE__ */ new Map();
+      for (const [key, list] of sides) {
+        const [boxId, side] = key.split(":");
+        const span = spanOf2(boxId, side, true);
+        const slots = [...list].map((entry) => ({ index: entry.index, at: placedPort.get(slotKey(boxId, side, entry.index)) })).sort((left, right) => left.at - right.at || left.index - right.index);
+        const centred = centreRun(
+          slots.map((slot) => slot.at),
+          span.low,
+          span.high
+        );
+        const first = slots[0];
+        const row = {
+          boxId,
+          side,
+          indexes: slots.map((slot) => slot.index),
+          at: slots.map((slot) => slot.at),
+          position: new Map(slots.map((slot, at) => [slot.index, at])),
+          shift: centred[0] - first.at,
+          allowed: true
+        };
+        rows.push(row);
+        rowOf.set(key, row);
+      }
+      const movedAt = (row, at) => row.at[at] + (row.allowed ? row.shift : 0);
+      const partnerOf = (boxId, side, index) => {
+        const entry = facing[index];
+        if (entry === void 0) return void 0;
+        const edge = diagram.edges[index];
+        const isExit = edge.from === boxId && entry.exit === side;
+        const groupId = planned.groupOf.get(index);
+        if (groupId !== void 0) {
+          if (!isExit) return void 0;
+          const group = planned.groups[groupId];
+          if (isVerticalSide2(side) !== isVerticalSide2(group.side)) return void 0;
+          return { coordinate: group.entryAlong };
+        }
+        const partnerId = isExit ? edge.to : edge.from;
+        const partnerSide = isExit ? entry.entry : entry.exit;
+        if (isVerticalSide2(side) !== isVerticalSide2(partnerSide)) return void 0;
+        const coordinate = placedPort.get(slotKey(partnerId, partnerSide, index));
+        if (coordinate === void 0) return void 0;
+        const row = rowOf.get(partnerId + ":" + partnerSide);
+        return { coordinate, ...row === void 0 ? {} : { row, at: row.position.get(index) } };
+      };
+      for (let pass = 0; pass < rows.length; pass += 1) {
+        let refused = false;
+        for (const row of rows) {
+          if (!row.allowed || row.shift === 0) continue;
+          const pinned = row.indexes.some((index, at) => {
+            if (onLane(index, row.at[at])) return true;
+            const partner = partnerOf(row.boxId, row.side, index);
+            if (partner === void 0) return false;
+            if (Math.abs(row.at[at] - partner.coordinate) > 0.5) return false;
+            const partnerAt = partner.row === void 0 ? partner.coordinate : movedAt(partner.row, partner.at);
+            return Math.abs(movedAt(row, at) - partnerAt) > 0.5;
+          });
+          if (!pinned) continue;
+          row.allowed = false;
+          refused = true;
+        }
+        if (!refused) break;
+      }
+      for (const row of rows) {
+        if (!row.allowed || row.shift === 0) continue;
+        row.indexes.forEach((index, at) => placedPort.set(slotKey(row.boxId, row.side, index), movedAt(row, at)));
+      }
       const portOf = (boxId, side, edgeIndex) => {
         const coordinate = placedPort.get(slotKey(boxId, side, edgeIndex));
         return pointOn(boxId, side, coordinate);
@@ -2204,16 +2537,9 @@ window.__ModuleLoader__.load({
           entrySide: entry.entry
         });
       }
-      const longestRun = (points) => {
-        let best = { from: points[0], to: points[points.length - 1], length: -1 };
-        for (let index = 0; index + 1 < points.length; index += 1) {
-          const from = points[index];
-          const to = points[index + 1];
-          const length = Math.abs(to.x - from.x) + Math.abs(to.y - from.y);
-          if (length > best.length) best = { from, to, length };
-        }
-        return best;
-      };
+      const trunks = planFor((index) => anchorsFor.get(index)?.exit);
+      const sharedEntry = /* @__PURE__ */ new Map();
+      for (const group of trunks.groups) sharedEntry.set(group.id, pointOn(group.target, group.side, group.entryAlong));
       const pointsOfRoute = (shape) => shape.kind === "path" ? shape.points : [{ x: shape.x1, y: shape.y1 }, { x: shape.x2, y: shape.y2 }];
       const segmentsOfRoute = (shape) => {
         const points = pointsOfRoute(shape);
@@ -2225,7 +2551,7 @@ window.__ModuleLoader__.load({
         }
         return out;
       };
-      const paintPath = (edge, points, colour) => {
+      const paintPath = (edgeIndex, edge, points, colour) => {
         const shape = {
           kind: "path",
           points,
@@ -2237,11 +2563,11 @@ window.__ModuleLoader__.load({
           ...edge.arrow === void 0 ? {} : { arrow: edge.arrow }
         };
         shapes.push(shape);
-        routes.push(shape);
+        routes.push({ shape, edge: edgeIndex, fixed: false });
       };
-      const paintRoute = (edge, points, colour) => {
+      const paintRoute = (edgeIndex, edge, points, colour) => {
         if (points.length > 2) {
-          paintPath(edge, points, colour);
+          paintPath(edgeIndex, edge, points, colour);
           return;
         }
         const exit = points[0];
@@ -2260,38 +2586,31 @@ window.__ModuleLoader__.load({
           ...edge.arrow === void 0 ? {} : { arrow: edge.arrow }
         };
         shapes.push(shape);
-        routes.push(shape);
+        routes.push({ shape, edge: edgeIndex, fixed: false });
       };
+      const clearOfBoxes = (points, from, to) => boxesCrossedBy(points, from, to, boxList).length === 0;
       const runRoute = (ports, runY) => {
-        const out = isVerticalSide(ports.exitSide) ? 0 : normalOf(ports.exitSide).x * ROUTE_STUB;
-        const into = isVerticalSide(ports.entrySide) ? 0 : normalOf(ports.entrySide).x * ROUTE_STUB;
+        const out = isVerticalSide2(ports.exitSide) ? 0 : normalOf(ports.exitSide).x * ROUTE_STUB;
+        const into = isVerticalSide2(ports.entrySide) ? 0 : normalOf(ports.entrySide).x * ROUTE_STUB;
+        const exitRun = out !== 0 && into === 0 && Math.sign(ports.entry.x - ports.exit.x) === Math.sign(out) ? ports.entry.x : ports.exit.x + out;
+        const entryRun = into !== 0 && out === 0 && Math.sign(ports.exit.x - ports.entry.x) === Math.sign(into) ? ports.exit.x : ports.entry.x + into;
         const points = [ports.exit];
-        if (out !== 0) points.push({ x: ports.exit.x + out, y: ports.exit.y });
-        points.push({ x: ports.exit.x + out, y: runY }, { x: ports.entry.x + into, y: runY });
-        if (into !== 0) points.push({ x: ports.entry.x + into, y: ports.entry.y });
+        if (out !== 0) points.push({ x: exitRun, y: ports.exit.y });
+        points.push({ x: exitRun, y: runY }, { x: entryRun, y: runY });
+        if (into !== 0) points.push({ x: entryRun, y: ports.entry.y });
         points.push(ports.entry);
         return simplify(points);
       };
       const runFits = (ports, runY) => {
-        if (isVerticalSide(ports.exitSide) && Math.abs(runY - ports.exit.y) > 0.5) {
+        if (isVerticalSide2(ports.exitSide) && Math.abs(runY - ports.exit.y) > 0.5) {
           if (Math.sign(runY - ports.exit.y) !== Math.sign(normalOf(ports.exitSide).y)) return false;
         }
-        if (isVerticalSide(ports.entrySide) && Math.abs(ports.entry.y - runY) > 0.5) {
+        if (isVerticalSide2(ports.entrySide) && Math.abs(ports.entry.y - runY) > 0.5) {
           if (Math.sign(ports.entry.y - runY) !== -Math.sign(normalOf(ports.entrySide).y)) return false;
         }
         return true;
       };
-      const clearsBoxes = (points, from, to) => {
-        for (let at = 0; at + 1 < points.length; at += 1) {
-          const a = points[at];
-          const b = points[at + 1];
-          for (const box of boxList) {
-            if (box === from || box === to) continue;
-            if (crossesBox(a.x, a.y, b.x, b.y, box)) return false;
-          }
-        }
-        return true;
-      };
+      const junctions = [];
       for (const [edgeIndex, edge] of diagram.edges.entries()) {
         const source = endBox(edge.from);
         const target = endBox(edge.to);
@@ -2300,7 +2619,7 @@ window.__ModuleLoader__.load({
         if (edge.from === edge.to) {
           const x = source.x + source.width;
           const y = source.y + source.height / 2;
-          shapes.push({
+          const shape = {
             kind: "path",
             points: [
               { x, y: y - 9 },
@@ -2316,10 +2635,25 @@ window.__ModuleLoader__.load({
             colour,
             ...edge.dashed === void 0 ? {} : { dashed: edge.dashed },
             ...edge.arrow === void 0 ? {} : { arrow: edge.arrow }
-          });
+          };
+          shapes.push(shape);
+          routes.push({ shape, edge: edgeIndex, fixed: true });
           continue;
         }
         const anchors = anchorsFor.get(edgeIndex);
+        const groupId = trunks.groupOf.get(edgeIndex);
+        if (groupId !== void 0 && anchors !== void 0) {
+          const group = trunks.groups[groupId];
+          const entry = sharedEntry.get(groupId);
+          const branch = isVerticalSide2(group.side) ? [anchors.exit, { x: anchors.exit.x, y: group.at }, { x: entry.x, y: group.at }, entry] : [anchors.exit, { x: group.at, y: anchors.exit.y }, { x: group.at, y: entry.y }, entry];
+          const points = simplify(branch);
+          if (clearOfBoxes(points, source, target)) {
+            paintRoute(edgeIndex, edge, points, colour);
+            const meet = isVerticalSide2(group.side) ? { x: anchors.exit.x, y: group.at } : { x: group.at, y: anchors.exit.y };
+            junctions.push({ kind: "junction", x: meet.x, y: meet.y, colour, trunk: group.id });
+            continue;
+          }
+        }
         const lane = placement.lanes.get(edgeIndex);
         if (lane !== void 0 && lane.points.length > 0 && anchors !== void 0) {
           const shift = laneShift.get(edgeIndex) ?? 0;
@@ -2334,32 +2668,76 @@ window.__ModuleLoader__.load({
           }
           if (Math.abs(previous.x - anchors.entry.x) > 0.5 && Math.abs(previous.y - anchors.entry.y) > 0.5) points.push({ x: anchors.entry.x, y: previous.y });
           points.push(anchors.entry);
-          paintPath(edge, simplify(points), colour);
-          continue;
+          const simplified = simplify(points);
+          if (clearOfBoxes(simplified, source, target)) {
+            paintPath(edgeIndex, edge, simplified, colour);
+            continue;
+          }
         }
         const runY = placement.runs.get(edgeIndex);
         if (runY !== void 0 && anchors !== void 0 && runFits(anchors, runY)) {
           const points = runRoute(anchors, runY);
-          const mixed = isVerticalSide(anchors.exitSide) !== isVerticalSide(anchors.entrySide);
-          if (!mixed || clearsBoxes(points, source, target)) {
-            paintRoute(edge, points, colour);
+          if (clearOfBoxes(points, source, target)) {
+            paintRoute(edgeIndex, edge, points, colour);
             continue;
           }
         }
-        paintRoute(edge, routeEdge(source, target, boxList, anchors).points, colour);
+        paintRoute(edgeIndex, edge, routeEdge(source, target, boxList, anchors).points, colour);
       }
-      const routeSegments = routes.map((shape) => segmentsOfRoute(shape));
+      for (const dot of junctions) shapes.push(dot);
+      const boxEntries = Array.from(boxes.entries());
+      const routingFailures = [];
+      for (const { shape, edge } of routes) {
+        const diagramEdge = diagram.edges[edge];
+        const source = endBox(diagramEdge.from);
+        const target = endBox(diagramEdge.to);
+        if (source === void 0 || target === void 0) continue;
+        for (const segment of segmentsOfRoute(shape)) {
+          for (const [id, box] of boxEntries) {
+            if (box === source || box === target) continue;
+            if (!crossesBox(segment.x1, segment.y1, segment.x2, segment.y2, box)) continue;
+            routingFailures.push({
+              edge,
+              from: diagramEdge.from,
+              to: diagramEdge.to,
+              box: id,
+              x1: segment.x1,
+              y1: segment.y1,
+              x2: segment.x2,
+              y2: segment.y2
+            });
+          }
+        }
+      }
+      const routeSegments = routes.map(({ shape }) => segmentsOfRoute(shape));
       const placedLabels = [];
-      routes.forEach((shape, index) => {
-        const run = longestRun(pointsOfRoute(shape));
-        let spot = { x: (run.from.x + run.to.x) / 2, y: (run.from.y + run.to.y) / 2, width: textWidth(shape.label), height: LABEL_HEIGHT };
-        if (shape.label !== "") {
-          spot = placeLabel(shape.label, run.from, run.to, boxList, placedLabels, routeSegments.flatMap((list, at) => at === index ? [] : list));
-          placedLabels.push(spot);
-        }
-        shape.labelX = spot.x;
-        shape.labelY = spot.y;
+      routes.forEach(({ shape, fixed }, at) => {
+        if (fixed) {
+          if (shape.label !== "") {
+            placedLabels.push({ x: shape.labelX, y: shape.labelY, width: textWidth(shape.label), height: LABEL_HEIGHT });
+          }
+          return;
+        }
+        if (shape.label === "") return;
+        const placement2 = placeLabel(
+          shape.label,
+          pointsOfRoute(shape),
+          boxList,
+          placedLabels,
+          routeSegments.filter((_, other) => other !== at)
+        );
+        shape.labelX = placement2.x;
+        shape.labelY = placement2.y;
+        shape.labelPlacement = {
+          run: placement2.run,
+          collisions: placement2.collisions,
+          boxes: placement2.boxes,
+          labels: placement2.labels,
+          edges: placement2.edges
+        };
+        placedLabels.push({ x: placement2.x, y: placement2.y, width: placement2.width, height: placement2.height });
       });
+      const labelCollisions = routes.reduce((total, { shape }) => total + ((shape.labelPlacement?.collisions ?? 0) > 0 ? 1 : 0), 0);
       shapes.push({ kind: "title", x: MARGIN, y: MARGIN + 12, text: diagram.title, colour: "text" });
       const contentRight = Math.max(
         MARGIN,
@@ -2380,7 +2758,10 @@ window.__ModuleLoader__.load({
       const extent = drawnExtent(shapes);
       const canvasWidth = Math.max(width, extent.width + MARGIN);
       const canvasHeight = Math.max(height, extent.height + MARGIN);
-      return { canvas: { width: Math.round(canvasWidth), height: Math.round(canvasHeight), shapes }, colours };
+      return {
+        canvas: { width: Math.round(canvasWidth), height: Math.round(canvasHeight), shapes, routingFailures, labelCollisions },
+        colours
+      };
     }
     
     // src/render/from-mermaid.ts
@@ -3107,6 +3488,9 @@ window.__ModuleLoader__.load({
         const after = shape.points[1] ?? first;
         return '<polyline points="' + points + '" fill="none" stroke="' + stroke + '" stroke-width="1" stroke-linejoin="round"' + dash(shape) + " />" + edgeMarks(first, after, before, last, shape.arrow, stroke, colours.background) + edgeLabel(shape.label, shape.labelX, shape.labelY, colours);
       },
+      // A junction dot: the visible answer to "is this a join or a crossing?". Filled in the line's own colour, so it
+      // reads as the line thickening where a branch meets it rather than as a new mark on the page.
+      junction: (shape, colours) => '<circle cx="' + n(shape.x) + '" cy="' + n(shape.y) + '" r="2.5" fill="' + colours[shape.colour] + '" />',
       title: (shape, colours) => {
         return '<text x="' + n(shape.x) + '" y="' + n(shape.y) + '" font-size="12" fill="' + colours[shape.colour] + '">' + escape(shape.text) + "</text>";
       },