@cardenelabs/cdl 0.120.0 → 0.122.0

package/dist/index.js

@@ -12388,6 +12388,7 @@ var KINDS_DRAWING_TITLE_OUTSIDE = /* @__PURE__ */ new Set([
   "dyn-arc",
   "dyn-wave",
   "dyn-polygon",
+  "station",
   ...KINDS_DRAWING_OWN_PAYLOAD
 ]);
 function drawsTitleOutsideBox(kind) {
@@ -12395,7 +12396,7 @@ function drawsTitleOutsideBox(kind) {
 }
 var TITLE_FONT_SIZE_DEFAULT = 18;
 var TITLE_FONT_SIZE = new Map([
-  ...["dyn-rect", "dyn-circle", "dyn-arc", "dyn-wave", "dyn-polygon"].map(
+  ...["dyn-rect", "dyn-circle", "dyn-arc", "dyn-wave", "dyn-polygon", "station"].map(
     (k) => [k, 13]
   ),
   ...[
@@ -12446,6 +12447,10 @@ var TITLE_FONT_SIZE = new Map([
 function titleFontSize(kind) {
   return TITLE_FONT_SIZE.get(kind ?? "") ?? TITLE_FONT_SIZE_DEFAULT;
 }
+var KINDS_WITH_TITLE_WIDTH_OUTSIDE_NODE = /* @__PURE__ */ new Set(["station"]);
+function skipsNodeTitleWidthCheck(kind) {
+  return KINDS_WITH_TITLE_WIDTH_OUTSIDE_NODE.has(kind ?? "");
+}
 var TITLE_BOX_PADDING = 52;
 var KINDS_SCALING_TITLE_WHEN_LOW = /* @__PURE__ */ new Set(["actor", "event", "function", "storage"]);
 var KINDS_SCALING_TITLE_ALWAYS = /* @__PURE__ */ new Set([
@@ -12528,7 +12533,8 @@ var KINDS_DRAWING_ONLY_SHAPE = [
   "dyn-circle",
   "dyn-arc",
   "dyn-wave",
-  "dyn-polygon"
+  "dyn-polygon",
+  "station"
 ];
 var KINDS_WITHOUT_EYEBROW_TEXT = /* @__PURE__ */ new Set([
   ...KINDS_DRAWING_ONLY_SHAPE,
@@ -13308,13 +13314,13 @@ function detectCollisions(bboxes, edges) {
 }
 function extractPathSegments(d) {
   const segs = [];
-  const commandRegex = /([MLCQZmlcqz])([^MLCQZmlcqz]*)/g;
+  const commandRegex = /([MLCQAZmlcqaz])([^MLCQAZmlcqaz]*)/g;
   let cur = { x: 0, y: 0 };
   let m;
   while ((m = commandRegex.exec(d)) !== null) {
     const cmd = m[1];
     const args = (m[2] ?? "").trim().split(/[\s,]+/).filter(Boolean).map(parseFloat);
-    const need = cmd === "M" || cmd === "L" ? 2 : cmd === "Q" ? 4 : cmd === "C" ? 6 : 0;
+    const need = cmd === "M" || cmd === "L" ? 2 : cmd === "Q" ? 4 : cmd === "C" ? 6 : cmd === "A" ? 7 : 0;
     if (need > 0 && (args.length < need || !args.slice(0, need).every(Number.isFinite))) continue;
     if (cmd === "M") {
       cur = { x: args[0], y: args[1] };
@@ -13344,6 +13350,10 @@ function extractPathSegments(d) {
         ctrl: [{ x: args[0], y: args[1] }, { x: args[2], y: args[3] }]
       });
       cur = next;
+    } else if (cmd === "A") {
+      const next = { x: args[5], y: args[6] };
+      segs.push({ x1: cur.x, y1: cur.y, x2: next.x, y2: next.y, cmd: "A" });
+      cur = next;
     }
   }
   return segs;
@@ -14546,6 +14556,232 @@ function applyEdgeLabelAndPathShifts(edges, labelShiftMap, edgePathShiftMap) {
   });
 }
 
+// src/layout/curve-path.ts
+var SAME_HEIGHT_THRESHOLD = 1;
+function curvePath(from, to, edge, labelMarginExtra = 0) {
+  const fromLeft = from.cx - from.w / 2;
+  const fromRight = from.cx + from.w / 2;
+  const toLeft = to.cx - to.w / 2;
+  const toRight = to.cx + to.w / 2;
+  let fromSide;
+  let toSide;
+  let x1;
+  let x2;
+  if (toLeft >= fromRight) {
+    fromSide = "right";
+    toSide = "left";
+    x1 = fromRight;
+    x2 = toLeft;
+  } else if (toRight <= fromLeft) {
+    fromSide = "left";
+    toSide = "right";
+    x1 = fromLeft;
+    x2 = toRight;
+  } else {
+    fromSide = "right";
+    toSide = "right";
+    x1 = fromRight;
+    x2 = toRight;
+  }
+  const y1 = from.cy;
+  const y2 = to.cy;
+  const sameHeight = Math.abs(y2 - y1) < SAME_HEIGHT_THRESHOLD;
+  let d;
+  let midX;
+  let midY;
+  let tangentX;
+  let tangentY;
+  if (sameHeight) {
+    d = `M ${x1} ${y1} L ${x2} ${y2}`;
+    midX = (x1 + x2) / 2;
+    midY = (y1 + y2) / 2;
+    tangentX = x2 - x1;
+    tangentY = y2 - y1;
+  } else {
+    let c1x;
+    let c2x;
+    if (fromSide !== toSide) {
+      const direction = x2 > x1 ? 1 : -1;
+      const bulge = Math.max(Math.abs(x2 - x1) / 2, EDGE_STUB_OUT);
+      c1x = x1 + direction * bulge;
+      c2x = x2 - direction * bulge;
+    } else {
+      const bulgeX = Math.max(x1, x2) + EDGE_STUB_OUT;
+      c1x = bulgeX;
+      c2x = bulgeX;
+    }
+    d = `M ${x1} ${y1} C ${c1x} ${y1}, ${c2x} ${y2}, ${x2} ${y2}`;
+    midX = (x1 + 3 * c1x + 3 * c2x + x2) / 8;
+    midY = (y1 + 3 * y1 + 3 * y2 + y2) / 8;
+    tangentX = x2 + c2x - c1x - x1;
+    tangentY = y2 + y2 - y1 - y1;
+  }
+  if (edge?.overlay) {
+    return { d, fromSide, toSide, labelX: midX, labelY: midY, labelAnchor: "middle" };
+  }
+  const tangentLength = Math.hypot(tangentX, tangentY);
+  let normalX = tangentY / tangentLength;
+  let normalY = -tangentX / tangentLength;
+  if (normalY > Number.EPSILON || Math.abs(normalY) <= Number.EPSILON && normalX < 0) {
+    normalX *= -1;
+    normalY *= -1;
+  }
+  const labelW = computeLabelBoxW(edge?.label, edge?.sub);
+  const labelH = labelPillH(edge?.sub);
+  const distance = labelPathClearanceHorizontal(edge) + (Math.abs(normalX) * labelW + Math.abs(normalY) * labelH) / 2 + labelMarginExtra;
+  return {
+    d,
+    fromSide,
+    toSide,
+    labelX: midX + normalX * distance,
+    labelY: midY + normalY * distance,
+    labelAnchor: "middle"
+  };
+}
+
+// src/layout/metro-path.ts
+var METRO_CORNER_RADIUS = 24;
+var T = Math.SQRT2 - 1;
+function round2(v) {
+  return Math.round(v * 100) / 100;
+}
+function point(p) {
+  return `${round2(p.x)} ${round2(p.y)}`;
+}
+function add(p, v, scale) {
+  return { x: p.x + v.x * scale, y: p.y + v.y * scale };
+}
+function polyline(points) {
+  const distinct = points.filter((p, i) => {
+    const previous = points[i - 1];
+    return previous === void 0 || p.x !== previous.x || p.y !== previous.y;
+  });
+  return distinct.map((p, i) => `${i === 0 ? "M" : "L"} ${point(p)}`).join(" ");
+}
+function metroPath(from, to, edge, labelMarginExtra = 0) {
+  const fromLeft = from.cx - from.w / 2;
+  const fromRight = from.cx + from.w / 2;
+  const toLeft = to.cx - to.w / 2;
+  const toRight = to.cx + to.w / 2;
+  let fromSide;
+  let toSide;
+  let x1;
+  let x2;
+  let dir;
+  if (toLeft >= fromRight) {
+    fromSide = "right";
+    toSide = "left";
+    x1 = fromRight;
+    x2 = toLeft;
+    dir = 1;
+  } else if (toRight <= fromLeft) {
+    fromSide = "left";
+    toSide = "right";
+    x1 = fromLeft;
+    x2 = toRight;
+    dir = -1;
+  } else {
+    fromSide = "right";
+    toSide = "right";
+    x1 = fromRight;
+    x2 = toRight;
+    dir = 1;
+  }
+  const y1 = from.cy;
+  const y2 = to.cy;
+  const dy = y2 - y1;
+  const sgn = Math.sign(dy);
+  let d;
+  let mid;
+  let tangent;
+  if (Math.abs(dy) < SAME_HEIGHT_THRESHOLD) {
+    d = `M ${point({ x: x1, y: y1 })} L ${point({ x: x2, y: y2 })}`;
+    mid = { x: (x1 + x2) / 2, y: (y1 + y2) / 2 };
+    tangent = { x: x2 - x1, y: y2 - y1 };
+  } else if (fromSide !== toSide && Math.abs(x2 - x1) >= Math.abs(dy)) {
+    const horizontal = Math.abs(x2 - x1);
+    const s = (horizontal - Math.abs(dy)) / 2;
+    const p0 = { x: x1, y: y1 };
+    const p1 = { x: x1 + dir * s, y: y1 };
+    const p2 = { x: x2 - dir * s, y: y2 };
+    const p3 = { x: x2, y: y2 };
+    const u = { x: dir, y: 0 };
+    const w = { x: dir / Math.SQRT2, y: sgn / Math.SQRT2 };
+    const r = Math.min(
+      METRO_CORNER_RADIUS,
+      s / T,
+      Math.SQRT2 * Math.abs(dy) / (2 * T)
+    );
+    const t = r * T;
+    if (r >= 0.5) {
+      const f1 = dir * sgn > 0 ? 1 : 0;
+      d = [
+        `M ${point(p0)}`,
+        `L ${point(add(p1, u, -t))}`,
+        `A ${round2(r)} ${round2(r)} 0 0 ${f1} ${point(add(p1, w, t))}`,
+        `L ${point(add(p2, w, -t))}`,
+        `A ${round2(r)} ${round2(r)} 0 0 ${1 - f1} ${point(add(p2, u, t))}`,
+        `L ${point(p3)}`
+      ].join(" ");
+    } else {
+      d = polyline([p0, p1, p2, p3]);
+    }
+    mid = { x: (x1 + x2) / 2, y: (y1 + y2) / 2 };
+    tangent = w;
+  } else {
+    fromSide = "right";
+    toSide = "right";
+    x1 = fromRight;
+    x2 = toRight;
+    const xa = Math.max(x1, x2) + EDGE_STUB_OUT;
+    const h = Math.abs(dy) / 2;
+    const p0 = { x: x1, y: y1 };
+    const p1 = { x: xa, y: y1 };
+    const p2 = { x: xa + h, y: y1 + sgn * h };
+    const p3 = { x: xa, y: y2 };
+    const p4 = { x: x2, y: y2 };
+    const u = { x: 1, y: 0 };
+    const w1 = { x: 1 / Math.SQRT2, y: sgn / Math.SQRT2 };
+    const w2 = { x: -1 / Math.SQRT2, y: sgn / Math.SQRT2 };
+    const r = Math.min(METRO_CORNER_RADIUS, h);
+    const t = r * T;
+    const sweep = sgn > 0 ? 1 : 0;
+    d = [
+      `M ${point(p0)}`,
+      `L ${point(add(p1, u, -t))}`,
+      `A ${round2(r)} ${round2(r)} 0 0 ${sweep} ${point(add(p1, w1, t))}`,
+      `L ${point(add(p2, w1, -r))}`,
+      `A ${round2(r)} ${round2(r)} 0 0 ${sweep} ${point(add(p2, w2, r))}`,
+      `L ${point(add(p3, w2, -t))}`,
+      `A ${round2(r)} ${round2(r)} 0 0 ${sweep} ${point(add(p3, u, -t))}`,
+      `L ${point(p4)}`
+    ].join(" ");
+    mid = { x: p2.x - T * r, y: p2.y };
+    tangent = { x: 0, y: sgn };
+  }
+  if (edge?.overlay) {
+    return { d, fromSide, toSide, labelX: mid.x, labelY: mid.y, labelAnchor: "middle" };
+  }
+  const tangentLength = Math.hypot(tangent.x, tangent.y);
+  let normalX = tangent.y / tangentLength;
+  let normalY = -tangent.x / tangentLength;
+  if (normalY > Number.EPSILON || Math.abs(normalY) <= Number.EPSILON && normalX < 0) {
+    normalX *= -1;
+    normalY *= -1;
+  }
+  const labelW = computeLabelBoxW(edge?.label, edge?.sub);
+  const labelH = labelPillH(edge?.sub);
+  const distance = labelPathClearanceHorizontal(edge) + (Math.abs(normalX) * labelW + Math.abs(normalY) * labelH) / 2 + labelMarginExtra;
+  return {
+    d,
+    fromSide,
+    toSide,
+    labelX: mid.x + normalX * distance,
+    labelY: mid.y + normalY * distance,
+    labelAnchor: "middle"
+  };
+}
+
 // src/types.ts
 var TONES = ["accent", "teal", "success", "error", "warning", "info"];
 var NODE_KINDS = [
@@ -14673,6 +14909,8 @@ var NODE_KINDS = [
   // 状態遷移図が使う。 印そのものが意味を持つので文字は描かない
   "mark-start",
   "mark-end",
+  // 路線図の駅 (#996) ... 線路上の点を小さな丸で示し、名前と説明は丸の外に置く
+  "station",
   // 時系列のやり取り (#578) ... 1 つの箱が図を丸ごと描く。 縦が時間で、参加者は箱を持たない
   "sequence-board"
 ];
@@ -17384,6 +17622,7 @@ function runAxes(laid, diag, violations, counts, push, profile, skippedAxes, \u5
   const LIFELINE_W_THRESHOLD = 8;
   for (const n of laid.nodes) {
     if (n.w < LIFELINE_W_THRESHOLD) continue;
+    if (n.kind === "station") continue;
     if (n.w < MIN_NODE_W || n.h < MIN_NODE_H) {
       push(
         "node-visibility",
@@ -17405,6 +17644,7 @@ function runAxes(laid, diag, violations, counts, push, profile, skippedAxes, \u5
     if (n.id.endsWith("-spacer")) continue;
     if (!rendersTitleText(n.kind)) continue;
     if (fitsOwnTitleWidth(n.kind)) continue;
+    if (skipsNodeTitleWidthCheck(n.kind)) continue;
     if (!isRenderedNode(n)) continue;
     const titleTrimmed = n.title?.trim() ?? "";
     if (!titleTrimmed) continue;
@@ -18009,6 +18249,9 @@ function runAxes(laid, diag, violations, counts, push, profile, skippedAxes, \u5
     for (let i = 0; i + 1 < sorted.length; i++) {
       const upper = sorted[i];
       const lower = sorted[i + 1];
+      if (upper.cx + upper.w / 2 <= lower.cx - lower.w / 2 || lower.cx + lower.w / 2 <= upper.cx - upper.w / 2) {
+        continue;
+      }
       const upperBottom = upper.cy + upper.h / 2;
       const lowerTop = lower.cy - lower.h / 2;
       const gap = lowerTop - upperBottom;
@@ -18640,11 +18883,18 @@ function runAxes(laid, diag, violations, counts, push, profile, skippedAxes, \u5
   {
     const crestSpans = (segs, peakY) => {
       const out = [];
+      let \u5186\u5F27\u306E\u59CB\u70B9 = null;
       for (const s of segs) {
-        if (Math.abs(s.y1 - s.y2) > 1) continue;
-        if (Math.abs(s.y1 - peakY) > 1) continue;
+        if (s.cmd === "A") {
+          \u5186\u5F27\u306E\u59CB\u70B9 ??= { x: s.x1, y: s.y1 };
+          continue;
+        }
+        const \u59CB\u70B9 = \u5186\u5F27\u306E\u59CB\u70B9 ?? { x: s.x1, y: s.y1 };
+        \u5186\u5F27\u306E\u59CB\u70B9 = null;
+        if (Math.abs(\u59CB\u70B9.y - s.y2) > 1) continue;
+        if (Math.abs(\u59CB\u70B9.y - peakY) > 1) continue;
         if (s.cmd !== "L" && !(s.ctrl ?? []).every((c) => Math.abs(c.y - peakY) <= 1)) continue;
-        out.push({ minX: Math.min(s.x1, s.x2), maxX: Math.max(s.x1, s.x2) });
+        out.push({ minX: Math.min(\u59CB\u70B9.x, s.x2), maxX: Math.max(\u59CB\u70B9.x, s.x2) });
       }
       return out;
     };
@@ -19335,6 +19585,8 @@ var TOKENS = {
     // 箱としての最小 (80x40) より大きく、名前を持つ箱 (card 320x150) よりは明らかに小さい
     "mark-start": { w: 96, h: 96 },
     "mark-end": { w: 96, h: 96 },
+    // 路線図の駅 (#996) ... 正方形にして小さな丸が縦横どちらにも歪まないようにする。
+    station: { w: 24, h: 24 },
     // 時系列のやり取り (#578)。 実寸は中身から決まる (`sequenceBoardMetrics`) ので、
     // ここは書かなかった時の受け皿
     "sequence-board": { w: 960, h: 640 }
@@ -19359,6 +19611,7 @@ var LANE_PAD_MIN = 25;
 // src/layout/edges.ts
 var VERTICAL_DETOUR_GAP = 50;
 var VERTICAL_DETOUR_CORNER = 14;
+var OVERLAY_LABEL_ON_PATH_TOLERANCE = 1;
 function verticalCornerDir(from, to) {
   return to < from ? -1 : 1;
 }
@@ -19442,6 +19695,36 @@ function layoutEdges(diag, nodes, lanes = []) {
       });
     } else if (isSelfLoop(e)) {
       selfLoopEdges.push(e);
+    } else if (e.routing === "curve") {
+      const from = nmap.get(e.from);
+      const to = nmap.get(e.to);
+      if (!from) throw new Error(`cdl layout: edge "${e.id}" \u306E from "${e.from}" \u304C node \u306B\u7121\u3044`);
+      if (!to) throw new Error(`cdl layout: edge "${e.id}" \u306E to "${e.to}" \u304C node \u306B\u7121\u3044`);
+      const c = curvePath(from, to, e, labelMarginExtra);
+      positionedEdges.push({
+        ...e,
+        d: c.d,
+        fromSide: c.fromSide,
+        toSide: c.toSide,
+        labelX: c.labelX + (e.labelOffsetX ?? 0),
+        labelY: c.labelY + (e.labelOffsetY ?? 0),
+        labelAnchor: c.labelAnchor
+      });
+    } else if (e.routing === "metro") {
+      const from = nmap.get(e.from);
+      const to = nmap.get(e.to);
+      if (!from) throw new Error(`cdl layout: edge "${e.id}" \u306E from "${e.from}" \u304C node \u306B\u7121\u3044`);
+      if (!to) throw new Error(`cdl layout: edge "${e.id}" \u306E to "${e.to}" \u304C node \u306B\u7121\u3044`);
+      const m = metroPath(from, to, e, labelMarginExtra);
+      positionedEdges.push({
+        ...e,
+        d: m.d,
+        fromSide: m.fromSide,
+        toSide: m.toSide,
+        labelX: m.labelX + (e.labelOffsetX ?? 0),
+        labelY: m.labelY + (e.labelOffsetY ?? 0),
+        labelAnchor: m.labelAnchor
+      });
     } else {
       autoEdges.push(e);
     }
@@ -20946,9 +21229,11 @@ function hopEdgeCrossings(edges) {
     ends.set(e.id, pathEnds(segs));
   }
   for (const e of edges) {
+    if (e.routing === "metro") continue;
     if ((e.d.match(/M/g) ?? []).length !== 1) continue;
     const own = extractPathSegments(e.d);
     if (own.length === 0) continue;
+    if (own.some((s) => s.cmd === "A")) continue;
     const myEnds = ends.get(e.id) ?? [];
     const hops = /* @__PURE__ */ new Map();
     for (let i = 0; i < own.length; i++) {
@@ -21036,7 +21321,7 @@ function pathVertices(d) {
   const out = [{ x: first.x1, y: first.y1 }];
   for (let i = 0; i < segs.length; i++) {
     const s = segs[i];
-    if (s.cmd === "C") return null;
+    if (s.cmd === "C" || s.cmd === "A") return null;
     if (s.cmd === "Q") {
       const c = s.ctrl?.[0];
       if (!c) return null;
@@ -21099,7 +21384,7 @@ function separateSharedStraightRuns(edges, nodes) {
     const v = pathVertices(e.d);
     if (v && v.length >= 2) verts.set(e.id, v);
   }
-  if (verts.size < 2) return;
+  if (verts.size === 0) return;
   const moved = /* @__PURE__ */ new Set();
   const fits = (e, pts, k, ax, delta) => {
     const \u8A66\u3057 = pts.map(
@@ -21117,33 +21402,40 @@ function separateSharedStraightRuns(edges, nodes) {
     for (let j = i + 1; j < edges.length; j++) {
       const \u524D = edges[i];
       const \u5F8C = edges[j];
-      const A = verts.get(\u524D.id);
-      const B = verts.get(\u5F8C.id);
-      if (!A || !B) continue;
-      if (\u524D.from === \u5F8C.from) continue;
+      if (\u524D.routing === "metro" && \u5F8C.routing === "metro") continue;
+      const \u56FA\u5B9A = \u5F8C.routing === "metro" ? \u5F8C : \u524D;
+      const \u52D5\u304B\u3059 = \u5F8C.routing === "metro" ? \u524D : \u5F8C;
+      const B = verts.get(\u52D5\u304B\u3059.id);
+      if (!B) continue;
+      const \u56FA\u5B9A\u306E\u89D2 = verts.get(\u56FA\u5B9A.id);
+      const \u56FA\u5B9A\u306E\u7D4C\u8DEF = \u56FA\u5B9A\u306E\u89D2 ? [\u56FA\u5B9A\u306E\u89D2] : \u56FA\u5B9A.routing === "metro" ? extractPathSegments(\u56FA\u5B9A.d).filter((s) => s.cmd === "L").map((s) => [{ x: s.x1, y: s.y1 }, { x: s.x2, y: s.y2 }]) : [];
+      if (\u56FA\u5B9A\u306E\u7D4C\u8DEF.length === 0) continue;
+      if (\u56FA\u5B9A.from === \u52D5\u304B\u3059.from) continue;
       for (const ax of [0, 1]) {
-        for (let ka = 0; ka + 1 < A.length; ka++) {
-          if (!runIsAligned(A, ka, ax)) continue;
-          for (let kb = 0; kb + 1 < B.length; kb++) {
-            if (!runIsAligned(B, kb, ax)) continue;
-            if (kb === 0 || kb + 1 === B.length - 1) continue;
-            const \u5EA7\u6A19A = ax === 0 ? A[ka].x : A[ka].y;
-            const \u5EA7\u6A19B = ax === 0 ? B[kb].x : B[kb].y;
-            if (Math.abs(\u5EA7\u6A19A - \u5EA7\u6A19B) > SHARED_RUN_EPS) continue;
-            const sa = runSpan(A, ka, ax);
-            const sb = runSpan(B, kb, ax);
-            if (Math.min(sa.hi, sb.hi) - Math.max(sa.lo, sb.lo) < SHARED_RUN_MIN) continue;
-            for (const delta of [SHARED_RUN_SEPARATION, -SHARED_RUN_SEPARATION]) {
-              if (!fits(\u5F8C, B, kb, ax, delta)) continue;
-              if (ax === 0) {
-                B[kb].x += delta;
-                B[kb + 1].x += delta;
-              } else {
-                B[kb].y += delta;
-                B[kb + 1].y += delta;
+        for (const A of \u56FA\u5B9A\u306E\u7D4C\u8DEF) {
+          for (let ka = 0; ka + 1 < A.length; ka++) {
+            if (!runIsAligned(A, ka, ax)) continue;
+            for (let kb = 0; kb + 1 < B.length; kb++) {
+              if (!runIsAligned(B, kb, ax)) continue;
+              if (kb === 0 || kb + 1 === B.length - 1) continue;
+              const \u5EA7\u6A19A = ax === 0 ? A[ka].x : A[ka].y;
+              const \u5EA7\u6A19B = ax === 0 ? B[kb].x : B[kb].y;
+              if (Math.abs(\u5EA7\u6A19A - \u5EA7\u6A19B) > SHARED_RUN_EPS) continue;
+              const sa = runSpan(A, ka, ax);
+              const sb = runSpan(B, kb, ax);
+              if (Math.min(sa.hi, sb.hi) - Math.max(sa.lo, sb.lo) < SHARED_RUN_MIN) continue;
+              for (const delta of [SHARED_RUN_SEPARATION, -SHARED_RUN_SEPARATION]) {
+                if (!fits(\u52D5\u304B\u3059, B, kb, ax, delta)) continue;
+                if (ax === 0) {
+                  B[kb].x += delta;
+                  B[kb + 1].x += delta;
+                } else {
+                  B[kb].y += delta;
+                  B[kb + 1].y += delta;
+                }
+                moved.add(\u52D5\u304B\u3059.id);
+                break;
               }
-              moved.add(\u5F8C.id);
-              break;
             }
           }
         }
@@ -21170,12 +21462,19 @@ function pullOutgoingFirstCorner(edges, nodes) {
   let \u672D\u3092\u65E7\u7D4C\u8DEF\u3078\u8FFD\u5F93\u6E08\u307F = false;
   for (const list of \u675F.values()) {
     if (list.length < 2) continue;
-    const \u4E26\u3073 = list.flatMap((e) => {
+    const \u4E26\u3073 = list.map((e) => {
       const pts = pathVertices(e.d);
-      if (!pts || pts.length < 2) return [];
-      return [{ e, pts, \u6700\u521D\u306E\u9577\u3055: Math.hypot(pts[1].x - pts[0].x, pts[1].y - pts[0].y) }];
-    }).sort((a, b) => b.\u6700\u521D\u306E\u9577\u3055 - a.\u6700\u521D\u306E\u9577\u3055);
+      if (pts && pts.length >= 2) {
+        return { e, pts, \u6700\u521D\u306E\u9577\u3055: Math.hypot(pts[1].x - pts[0].x, pts[1].y - pts[0].y) };
+      }
+      if (e.routing !== "metro") return null;
+      const first = extractPathSegments(e.d)[0];
+      if (!first) return null;
+      return { e, pts: null, \u6700\u521D\u306E\u9577\u3055: Math.hypot(first.x2 - first.x1, first.y2 - first.y1) };
+    }).filter((x) => x !== null).sort((a, b) => b.\u6700\u521D\u306E\u9577\u3055 - a.\u6700\u521D\u306E\u9577\u3055);
     for (const { e, pts, \u6700\u521D\u306E\u9577\u3055 } of \u4E26\u3073.slice(1)) {
+      if (e.routing === "metro") continue;
+      if (!pts) continue;
       if ((\u540C\u3058\u7D44\u306E\u6570.get(`${e.from}->${e.to}`) ?? 0) > 1) continue;
       if (pts.length < 3 || \u6700\u521D\u306E\u9577\u3055 <= EDGE_STUB_OUT + VERTICAL_DETOUR_CORNER) continue;
       const \u6A2A = e.fromSide === "left" || e.fromSide === "right";
@@ -21229,7 +21528,8 @@ var ENDPOINT_FAN_MIN = 20;
 var ENDPOINT_FAN_RUNUP = 40;
 var MIXED_ROOT_OVERLAP_MIN = 24;
 function fanIncomingEndpoints(edges, nodes) {
-  if (edges.length < 2) return;
+  const \u7D42\u70B9\u306E\u79FB\u52D5 = /* @__PURE__ */ new Map();
+  if (edges.length < 2) return \u7D42\u70B9\u306E\u79FB\u52D5;
   const nmap = new Map(nodes.map((n) => [n.id, n]));
   const \u5E73\u5766\u306A\u533A\u9593 = new Map(edges.map((e) => [e.id, flattenPathSegments(extractPathSegments(e.d))]));
   const \u8EF8\u306B\u5E73\u884C\u306A\u91CD\u306A\u308A\u9577\u3055 = (\u4E00\u65B9, \u4ED6\u65B9) => {
@@ -21299,6 +21599,7 @@ function fanIncomingEndpoints(edges, nodes) {
       const d = \u4E2D\u592E\u304C\u585E\u304C\u3063\u3066\u3044\u308B ? \u4E26\u3073[k].\u6DF1\u3055 < \u8FBA\u306E\u4E2D\u5FC3 ? -(++\u8CA0\u5074\u306E\u5E2D * \u9593\u9694) : ++\u6B63\u5074\u306E\u5E2D * \u9593\u9694 : k * \u9593\u9694 - \u4E2D\u5FC3;
       if (Math.abs(d) < 1e-3) continue;
       const e = \u4E26\u3073[k].e;
+      if (e.routing === "metro") continue;
       const \u524D = e.d;
       const \u524D\u306E\u4EA4\u5DEE = countEdgeCrossings(edges).count;
       const \u9577\u3044\u52A9\u8D70 = \u4E26\u3073[k].\u9577\u3044\u52A9\u8D70;
@@ -21310,6 +21611,68 @@ function fanIncomingEndpoints(edges, nodes) {
         if (countEdgeCrossings(edges).count <= \u524D\u306E\u4EA4\u5DEE) break;
         e.d = \u524D;
       }
+      if (e.d !== \u524D) \u7D42\u70B9\u306E\u79FB\u52D5.set(e.id, \u6A2A ? { dx: 0, dy: d } : { dx: d, dy: 0 });
+    }
+  }
+  return \u7D42\u70B9\u306E\u79FB\u52D5;
+}
+function followLabelsToFannedTails(edges, obstacles, shifts) {
+  if (shifts.size === 0) return;
+  const \u6E2C\u308A\u65B9 = \u7DDA\u306E\u6E2C\u308A\u65B9\u3092\u4F5C\u308B();
+  const labels = edges.filter(hasRenderedLabel).map((e) => ({
+    kind: "edge-label",
+    id: e.id,
+    ...computeLabelBBoxWorld(e)
+  }));
+  const labelIndexByEdgeId = new Map(labels.map((label, index) => [label.id, index]));
+  const edgeById = new Map(edges.map((e) => [e.id, e]));
+  const \u5468\u308A = {
+    \u7BB1\u305F\u3061: obstacles.filter((o) => o.kind === "node" || o.kind === "lane-label"),
+    labels,
+    edges,
+    edgeById,
+    \u6E2C\u308A\u65B9
+  };
+  for (const e of edges) {
+    const \u79FB\u52D5 = shifts.get(e.id);
+    if (!\u79FB\u52D5 || !hasRenderedLabel(e)) continue;
+    const labelIndex = labelIndexByEdgeId.get(e.id);
+    if (labelIndex === void 0) continue;
+    const \u5143\u306E\u672D = labels[labelIndex];
+    const \u81EA\u5206\u306E\u533A\u9593 = \u6E2C\u308A\u65B9.\u533A\u9593(e.id, e.d);
+    if (e.overlay && measurePathLabelGapSegs(\u81EA\u5206\u306E\u533A\u9593, {
+      x: \u5143\u306E\u672D.x + \u5143\u306E\u672D.w / 2,
+      y: \u5143\u306E\u672D.y + \u5143\u306E\u672D.h / 2,
+      w: 0,
+      h: 0
+    }) <= OVERLAY_LABEL_ON_PATH_TOLERANCE) continue;
+    const \u6700\u5F8C = \u81EA\u5206\u306E\u533A\u9593.at(-1);
+    if (!\u6700\u5F8C) continue;
+    if (!segmentsCrossRect([\u6700\u5F8C], \u5143\u306E\u672D)) continue;
+    const \u5019\u88DCa = {
+      labelX: e.labelX + \u79FB\u52D5.dx,
+      labelY: e.labelY + \u79FB\u52D5.dy,
+      labelAnchor: e.labelAnchor
+    };
+    const \u5019\u88DCa\u306E\u7BB1 = computeLabelBBoxWorld({ ...e, ...\u5019\u88DCa });
+    const \u6700\u5F8C\u306F\u7E26 = Math.abs(\u6700\u5F8C.x2 - \u6700\u5F8C.x1) <= Math.abs(\u6700\u5F8C.y2 - \u6700\u5F8C.y1);
+    const \u5019\u88DC = [
+      \u5019\u88DCa,
+      {
+        labelX: \u6700\u5F8C\u306F\u7E26 ? \u6700\u5F8C.x1 * 2 - (\u5019\u88DCa\u306E\u7BB1.x + \u5019\u88DCa\u306E\u7BB1.w / 2) : \u5019\u88DCa\u306E\u7BB1.x + \u5019\u88DCa\u306E\u7BB1.w / 2,
+        labelY: \u6700\u5F8C\u306F\u7E26 ? \u5019\u88DCa\u306E\u7BB1.y + \u5019\u88DCa\u306E\u7BB1.h / 2 : \u6700\u5F8C.y1 * 2 - (\u5019\u88DCa\u306E\u7BB1.y + \u5019\u88DCa\u306E\u7BB1.h / 2),
+        labelAnchor: "middle"
+      }
+    ];
+    for (const c of \u5019\u88DC) {
+      const \u672D = { kind: "edge-label", id: e.id, ...computeLabelBBoxWorld({ ...e, ...c }) };
+      if (segmentsCrossRect([\u6700\u5F8C], \u672D)) continue;
+      if (\u672D\u306E\u79FB\u52D5\u3092\u585E\u3050\u76F8\u624B\u3092\u63A2\u3059(\u5468\u308A, \u5143\u306E\u672D, \u672D) !== null) continue;
+      e.labelX = c.labelX;
+      e.labelY = c.labelY;
+      e.labelAnchor = c.labelAnchor;
+      labels[labelIndex] = \u672D;
+      break;
     }
   }
 }
@@ -21326,7 +21689,7 @@ function \u672B\u5C3E\u3092\u8FBA\u306B\u6CBF\u3063\u3066\u305A\u3089\u3059(e, \
   if ((e.d.match(/M/g) ?? []).length !== 1) return null;
   const segs = extractPathSegments(e.d);
   if (segs.length === 0) return null;
-  if (segs.some((s) => s.cmd === "C")) return null;
+  if (segs.some((s) => s.cmd === "C" || s.cmd === "A")) return null;
   const last = segs[segs.length - 1];
   if (last.cmd !== "L") return null;
   const \u5782\u76F4\u306B\u5165\u308B = \u6A2A ? Math.abs(last.y2 - last.y1) < 0.5 && Math.abs(last.x2 - last.x1) > 0.5 : Math.abs(last.x2 - last.x1) < 0.5 && Math.abs(last.y2 - last.y1) > 0.5;
@@ -21592,9 +21955,9 @@ function recomputeContainedLanes(lanes, nodes) {
 }
 
 // src/layout/head-label.ts
-var \u7AEF\u306E\u5B57\u306E\u5927\u304D\u3055 = EDGE_LABEL_TEXT.sub.fontSize;
+var \u7AEF\u306E\u5B57\u306E\u5927\u304D\u3055 = 26;
 var \u7BB1\u306E\u9AD8\u3055 = Math.round(\u7AEF\u306E\u5B57\u306E\u5927\u304D\u3055 * 1.2);
-var \u7AEF\u306E\u5B57\u3068\u5370\u306E\u4F59\u767D = Math.round(\u7BB1\u306E\u9AD8\u3055 / 2);
+var \u7AEF\u306E\u5B57\u3068\u5370\u306E\u4F59\u767D = 12;
 var \u7AEF\u306E\u5370\u306E\u5F35\u308A\u51FA\u3057 = EDGE_HEAD_MARKER_SIZE.\u65E2\u5B9A / 2;
 var \u7AEF\u306E\u5B57\u3092\u623B\u3059\u8DDD\u96E2 = EDGE_HEAD_MARKER_SIZE.\u65E2\u5B9A + \u7AEF\u306E\u5B57\u3068\u5370\u306E\u4F59\u767D;
 var \u7AEF\u306E\u5B57\u3068\u7DDA\u306E\u9699\u9593 = \u7AEF\u306E\u5370\u306E\u5F35\u308A\u51FA\u3057 + \u7AEF\u306E\u5B57\u3068\u5370\u306E\u4F59\u767D;
@@ -21617,13 +21980,16 @@ function \u5411\u304D\u3092\u53D6\u308B(end, \u5019\u88DC) {
   }
   return null;
 }
-function \u7AEF\u3067\u306E\u5411\u304D(d, \u7AEF) {
+function \u7DDA\u306E\u7AEF\u306E\u5411\u304D(d, \u7AEF) {
   const segs = extractPathSegments(d);
   if (segs.length === 0) return null;
   if (\u7AEF === "head") {
     const last = segs[segs.length - 1];
     const end2 = { x: last.x2, y: last.y2 };
-    const \u5019\u88DC2 = segs.slice().reverse().flatMap((s) => [s.cmd === "Q" ? s.ctrl?.[0] : s.cmd === "C" ? s.ctrl?.[1] : void 0, { x: s.x1, y: s.y1 }]);
+    const \u5019\u88DC2 = segs.slice().reverse().flatMap((s) => {
+      const \u5236\u5FA1\u70B9 = s.cmd === "C" ? [s.ctrl?.[1], s.ctrl?.[0]] : s.cmd === "Q" ? [s.ctrl?.[0]] : [];
+      return [...\u5236\u5FA1\u70B9, { x: s.x1, y: s.y1 }];
+    });
     return \u5411\u304D\u3092\u53D6\u308B(end2, \u5019\u88DC2);
   }
   const first = segs[0];
@@ -21634,7 +22000,7 @@ function \u7AEF\u3067\u306E\u5411\u304D(d, \u7AEF) {
 function \u7AEF\u306E\u5B57\u3092\u7F6E\u304F(edge, \u7AEF = "head") {
   const text = (\u7AEF === "head" ? edge.headLabel : edge.tailLabel)?.trim();
   if (!text) return null;
-  const \u5411\u304D = \u7AEF\u3067\u306E\u5411\u304D(edge.d, \u7AEF);
+  const \u5411\u304D = \u7DDA\u306E\u7AEF\u306E\u5411\u304D(edge.d, \u7AEF);
   if (!\u5411\u304D) return null;
   const { end, ux, uy } = \u5411\u304D;
   const bx = end.x - ux * \u7AEF\u306E\u5B57\u3092\u623B\u3059\u8DDD\u96E2;
@@ -21962,22 +22328,23 @@ function layout(diag) {
     }
   }
   const positionedEdgeIds = new Set(
-    diag.edges.filter((e) => e.posX1 !== void 0 && e.posY1 !== void 0 && e.posX2 !== void 0 && e.posY2 !== void 0).map((e) => e.id)
+    diag.edges.filter(
+      (e) => e.routing === "curve" || e.routing === "metro" || e.posX1 !== void 0 && e.posY1 !== void 0 && e.posX2 !== void 0 && e.posY2 !== void 0
+    ).map((e) => e.id)
   );
   bowSharedStraightPaths(edges, nodesFinal, positionedEdgeIds);
   pullOutgoingFirstCorner(edges, nodesFinal);
-  fanIncomingEndpoints(edges, nodesFinal);
+  const fannedTailShifts = fanIncomingEndpoints(edges, nodesFinal);
   separateSharedStraightRuns(edges, nodesFinal);
   hopEdgeCrossings(edges);
+  const labelClearanceObstacles = collectBBoxes(containedLanesFinal, nodesFinal, []).filter(
+    (b) => b.kind === "node" || b.kind === "lane-label"
+  );
+  followLabelsToFannedTails(edges, labelClearanceObstacles, fannedTailShifts);
   repositionParallelLabels(edges, nodesFinal);
   slideLabelsAlongOwnPath(edges, nodesFinal);
   if (!isChainEdgeLabelDisabled()) {
-    edges = resolveLabelClearanceAfterPathPasses(
-      edges,
-      collectBBoxes(containedLanesFinal, nodesFinal, []).filter(
-        (b) => b.kind === "node" || b.kind === "lane-label"
-      )
-    );
+    edges = resolveLabelClearanceAfterPathPasses(edges, labelClearanceObstacles);
   }
   const bboxes = collectBBoxes(containedLanesFinal, nodesFinal, edges);
   const collisions = detectCollisions(bboxes, edges);
@@ -22586,11 +22953,13 @@ function applyHeuristics(diag, laid, violations, applied) {
     violations.filter((v) => v.axis === "edge-node-cross").map((v) => extractEdgeId(v.detail)).filter((id) => id !== null)
   );
   if (h3Edges.size > 0) {
-    const originalEdges = edges;
-    edges = edges.map(
-      (e) => h3Edges.has(e.id) && e.routing !== "back-detour" ? { ...e, routing: "back-detour" } : e
+    const eligibleEdges = new Set(
+      edges.filter((e) => h3Edges.has(e.id) && (e.routing === void 0 || e.routing === "default")).map((e) => e.id)
     );
-    if (edges !== originalEdges) {
+    if (eligibleEdges.size > 0) {
+      edges = edges.map(
+        (e) => eligibleEdges.has(e.id) ? { ...e, routing: "back-detour" } : e
+      );
       applied.push("h3-edge-back-detour");
       mutated = true;
     }
@@ -22910,15 +23279,15 @@ function extractPathEndpoints(d) {
   if (!start || !end) return null;
   return { start, end };
 }
-function isPointOnNodeBoundary(point, node, tol) {
+function isPointOnNodeBoundary(point2, node, tol) {
   const left = node.cx - node.w / 2;
   const right = node.cx + node.w / 2;
   const top = node.cy - node.h / 2;
   const bot = node.cy + node.h / 2;
-  if (Math.abs(point.x - left) <= tol && point.y >= top - tol && point.y <= bot + tol) return true;
-  if (Math.abs(point.x - right) <= tol && point.y >= top - tol && point.y <= bot + tol) return true;
-  if (Math.abs(point.y - top) <= tol && point.x >= left - tol && point.x <= right + tol) return true;
-  if (Math.abs(point.y - bot) <= tol && point.x >= left - tol && point.x <= right + tol) return true;
+  if (Math.abs(point2.x - left) <= tol && point2.y >= top - tol && point2.y <= bot + tol) return true;
+  if (Math.abs(point2.x - right) <= tol && point2.y >= top - tol && point2.y <= bot + tol) return true;
+  if (Math.abs(point2.y - top) <= tol && point2.x >= left - tol && point2.x <= right + tol) return true;
+  if (Math.abs(point2.y - bot) <= tol && point2.x >= left - tol && point2.x <= right + tol) return true;
   return false;
 }
 async function verifyBoundingBoxes(page, laid, options) {
@@ -24124,12 +24493,13 @@ function CdlEdgeView({
   const isPassThrough = isDotted && Boolean(edge.dThrough);
   const lineDotsD = isDotted ? shrinkPathEnd(edge.d, 12) : edge.d;
   const glowPathId = `cdl-edge-${edge.id}`;
-  const \u901A\u308A\u9053\u3092\u7E2E\u3081\u308B = EDGE_HEAD_MARKER_SIZE.\u65E2\u5B9A + \u8D70\u308B\u4E38\u306E\u534A\u5F84.\u82AF;
+  const \u901A\u308A\u9053\u3092\u7E2E\u3081\u308B = EDGE_HEAD_MARKER_SIZE.\u65E2\u5B9A + \u8D70\u308B\u4E38\u306E\u5916\u5074;
   const glowPathD = shrinkPathStart(shrinkPathEnd(edge.d, \u901A\u308A\u9053\u3092\u7E2E\u3081\u308B), \u901A\u308A\u9053\u3092\u7E2E\u3081\u308B);
   return /* @__PURE__ */ jsxs(
     "g",
     {
       "data-cdl-edge": edge.id,
+      "data-cdl-routing": edge.routing === "metro" ? "metro" : void 0,
       "data-cdl-from": edge.from,
       "data-cdl-to": edge.to,
       "data-cdl-active": active ? "true" : "false",
@@ -24232,7 +24602,9 @@ function SolidEdgePath({
     }
   );
 }
-var \u8D70\u308B\u4E38\u306E\u534A\u5F84 = { \u5916: 28, \u4E2D: 18, \u82AF: 11 };
+var \u8D70\u308B\u4E38\u306E\u534A\u5F84 = { \u5916: 28, \u4E2D: 18, \u82AF: 12 };
+var \u8D70\u308B\u4E38\u306E\u7E01\u306E\u898B\u8FBC\u307F = 2;
+var \u8D70\u308B\u4E38\u306E\u5916\u5074 = \u8D70\u308B\u4E38\u306E\u534A\u5F84.\u82AF + \u8D70\u308B\u4E38\u306E\u7E01\u306E\u898B\u8FBC\u307F;
 function EdgeGlowCircles({ color, edgeId }) {
   const ref = `#cdl-edge-${edgeId}`;
   return /* @__PURE__ */ jsxs("g", { "data-cdl-particle": edgeId, "data-cdl-particle-path-ref": ref, children: [
@@ -25559,17 +25931,22 @@ function DynShapeNode({
         return renderPolygon(shape, cx, cy, stateValues, fillColor, strokeColor, activeOpacity);
     }
   })();
+  const \u63C3\u3048 = \u7BB1\u3044\u3063\u3071\u3044\u306B\u63CF\u304F2(shape.kind) ? "start" : "middle";
+  return renderShapeWithOutsideLabels(\u5F62, node, \u63C3\u3048);
+}
+function renderShapeWithOutsideLabels(\u5F62, node, \u63C3\u3048) {
+  const cx = node.cx;
+  const y = node.cy - node.h / 2;
   const \u540D\u524D = (node.title ?? "").trim();
   const \u5024 = (node.subtitle ?? "").trim();
   if (\u540D\u524D === "" && \u5024 === "") return \u5F62;
-  const \u63C3\u3048 = \u7BB1\u3044\u3063\u3071\u3044\u306B\u63CF\u304F2(shape.kind) ? "start" : "middle";
   return /* @__PURE__ */ jsxs("g", { children: [
     \u5F62,
     \u540D\u524D !== "" && /* @__PURE__ */ jsx(
       "text",
       {
         "data-cdl-role": "shape-name",
-        x: \u63C3\u3048 === "start" ? x : cx,
+        x: \u63C3\u3048 === "start" ? node.cx - node.w / 2 : cx,
         y: y - NAME_GAP,
         textAnchor: \u63C3\u3048,
         fontSize: 13,
@@ -25583,7 +25960,7 @@ function DynShapeNode({
       {
         "data-cdl-role": "shape-value",
         x: cx,
-        y: y + h + VALUE_GAP,
+        y: y + node.h + VALUE_GAP,
         textAnchor: "middle",
         fontSize: 12,
         fill: "var(--cdl-text-dim, #5a6270)",
@@ -25833,6 +26210,27 @@ function interpolateColor(template, stateValues, fallback) {
   if (!template) return fallback;
   return interpolate(template, stateValues);
 }
+var STATION_STROKE_ACTIVE = 4;
+var STATION_STROKE_IDLE = 3;
+var STATION_DEFAULT = "var(--cdl-tone-accent, #2d6a8f)";
+function StationNode({ node, active }) {
+  const strokeWidth = active ? STATION_STROKE_ACTIVE : STATION_STROKE_IDLE;
+  const radius = Math.max(0, Math.min(node.w, node.h) / 2 - strokeWidth / 2);
+  const \u5F62 = /* @__PURE__ */ jsx(
+    "circle",
+    {
+      "data-cdl-role": "node-body",
+      "data-cdl-mark": "station",
+      cx: node.cx,
+      cy: node.cy,
+      r: radius,
+      fill: "var(--cdl-node-fill, #ffffff)",
+      stroke: nodeAccent(node, STATION_DEFAULT),
+      strokeWidth
+    }
+  );
+  return renderShapeWithOutsideLabels(\u5F62, node, "middle");
+}
 
 // src/kinds/label-stack.ts
 function \u540D\u672D\u306E\u6BB5\u3092\u307B\u3069\u304F(\u771F\u306Ey, \u9593\u9694, \u4E0A\u9650, \u4E0B\u9650) {
@@ -33061,6 +33459,8 @@ function CdlNodeView({
         return /* @__PURE__ */ jsx(MarkStartNode, { node: resolvedNode, active });
       case "mark-end":
         return /* @__PURE__ */ jsx(MarkEndNode, { node: resolvedNode, active });
+      case "station":
+        return /* @__PURE__ */ jsx(StationNode, { node: resolvedNode, active });
       default:
         return /* @__PURE__ */ jsx(GenericNode, { node: resolvedNode, active, value: node.value, stateValues, \u5024\u306E\u540D\u524D });
     }
@@ -33293,15 +33693,15 @@ function CdlStage({
   }, [laid]);
   const edgeHeadMarkers = useMemo(() => {
     const referenced = /* @__PURE__ */ new Set();
-    const add = (tone, head, fill) => {
+    const add2 = (tone, head, fill) => {
       for (const small of [false, true]) {
         const id = edgeHeadMarkerName(tone, head, small, fill);
         if (id !== void 0) referenced.add(id);
       }
     };
     for (const edge of laid.edges) {
-      add(edge.tone, edge.head, edge.headFill);
-      if (edge.tailHead !== void 0) add(edge.tone, edge.tailHead, edge.tailHeadFill);
+      add2(edge.tone, edge.head, edge.headFill);
+      if (edge.tailHead !== void 0) add2(edge.tone, edge.tailHead, edge.tailHeadFill);
     }
     return Object.entries(TONE).flatMap(
       ([tone, color]) => [