@cardenelabs/cdl 0.13.1 → 0.15.0

package/src/kinds/draw-ratio.ts

@@ -0,0 +1,44 @@
+/**
+ * 描く速さを phase の長さと別に決める (cdl#570)。
+ *
+ * `CdlPhase.drawRatio` は「`draw` の対象を描き終えるまでに phase の何割を使うか」 を表す。
+ * ここでは進みの引き伸ばしだけを持ち、 誰に掛けるかは `render/stage.tsx` が決める。
+ */
+
+/** 割合を書かない phase の既定。 従来どおり phase の終わりに描き終わる */
+export const DRAW_RATIO_DEFAULT = 1;
+
+/**
+ * 書かれた割合を、 使える値に直す。
+ *
+ * 範囲外 (0 以下 / 1 超 / NaN / Infinity / 未指定) は既定の 1 に落とす。 描く動きは
+ * 見え方であって図の意味ではないので、 書き間違いで図が出なくなる方が損が大きい。
+ * 書き間違いそのものは `validate` が warning で知らせる。
+ *
+ * **0 を通すとゼロ除算になる**。 `Number.isFinite` は 0 を通すため、 下限の判定を
+ * 別に置く必要がある。
+ */
+export function 描く割合を正す(ratio: number | undefined): number {
+  if (ratio === undefined) return DRAW_RATIO_DEFAULT;
+  if (!Number.isFinite(ratio)) return DRAW_RATIO_DEFAULT;
+  if (ratio <= 0 || ratio > 1) return DRAW_RATIO_DEFAULT;
+  return ratio;
+}
+
+/**
+ * phase の進みを、 描く対象から見た進みに直す。
+ *
+ * 割合が 1 なら元の値をそのまま返す = 割合を書かない図では計算が入らない。
+ *
+ * 引き伸ばした結果は 1 で頭打ちにする。 描き終わってから phase が終わるまでの間、
+ * 対象は描き終わった姿のまま留まる。
+ *
+ * 進みが数でない場合は元の値をそのまま返す。 ここで 1 に丸めると、 進みの異常を
+ * 受け取る側 (`進みを畳む`) が持つ落とし方と二重になり、 どちらが効いたか読めなくなる。
+ */
+export function 描く進みに直す(progress: number, ratio: number | undefined): number {
+  const 割合 = 描く割合を正す(ratio);
+  if (割合 === DRAW_RATIO_DEFAULT) return progress;
+  if (!Number.isFinite(progress)) return progress;
+  return Math.min(1, progress / 割合);
+}

package/src/kinds/dyn-shape.tsx

@@ -64,13 +64,13 @@ export function DynShapeNode({
     case "rect":
       return renderRect(shape, x, y, w, h, stateValues, fillColor, strokeColor, activeOpacity, node);
     case "circle":
-      return renderCircle(shape, cx, cy, w, h, stateValues, fillColor, strokeColor, activeOpacity, node);
+      return renderCircle(shape, cx, cy, w, h, stateValues, fillColor, strokeColor, activeOpacity);
     case "arc":
-      return renderArc(shape, cx, cy, w, h, stateValues, fillColor, strokeColor, activeOpacity, node);
+      return renderArc(shape, cx, cy, w, h, stateValues, fillColor, strokeColor, activeOpacity);
     case "wave":
       return <WaveShape shape={shape} x={x} y={y} w={w} h={h} stateValues={stateValues} fillColor={fillColor} strokeColor={strokeColor} opacity={activeOpacity} node={node} />;
     case "polygon":
-      return renderPolygon(shape, cx, cy, stateValues, fillColor, strokeColor, activeOpacity, node);
+      return renderPolygon(shape, cx, cy, stateValues, fillColor, strokeColor, activeOpacity);
   }
 }
 
@@ -162,7 +162,6 @@ function renderCircle(
   fillColor: string,
   strokeColor: string,
   opacity: number,
-  node: LaidNode,
 ): JSX.Element {
   const maxR = Math.min(w, h) / 2;
   const r = shape.radius !== undefined ? resolveNumericAttr(shape.radius, stateValues, maxR) : maxR;
@@ -196,7 +195,6 @@ function renderArc(
   fillColor: string,
   strokeColor: string,
   opacity: number,
-  node: LaidNode,
 ): JSX.Element {
   const maxR = Math.min(w, h) / 2;
   const outerR = shape.outerRadius ?? maxR;
@@ -325,7 +323,6 @@ function renderPolygon(
   fillColor: string,
   strokeColor: string,
   opacity: number,
-  node: LaidNode,
 ): JSX.Element {
   const sides = Math.min(12, Math.max(3, shape.sides));
   const r = shape.radius !== undefined ? resolveNumericAttr(shape.radius, stateValues, 40) : 40;

package/src/kinds/generic.tsx

@@ -2,7 +2,12 @@ import type { JSX } from "react";
 import type { LaidNode, NodeKind } from "../types";
 import { toneColor } from "./node-tone";
 import { interpolate } from "../render/utils";
-import { rowBaselineY } from "../layout/spec";
+import {
+  genericTextCentered,
+  genericTextShift,
+  genericTitleBaselineY,
+  rowBaselineY,
+} from "../layout/spec";
 import {
   GENERIC_ROW_LEFT_SIZE_PX,
   rowColumnWidth,
@@ -281,15 +286,22 @@ export function GenericNode({
   // 共通経路は解決できない参照を `{名前}` のまま残すので、 読み手が気付ける。
   const resolvedValue = value !== undefined ? interpolate(value, stateValues) : undefined;
 
-  // shape 別の text 配置 (diamond / cloud は中心揃え、 rect 等は左上揃え)
-  const centered = shape === "diamond" || shape === "cloud";
+  /*
+   * shape 別の text 配置 (diamond / cloud は中心揃え、 rect 等は左上揃え)。
+   *
+   * **行がある時は中心へ寄せない** (#558)。 題を箱の中心に置くと、上端から数える行と必ず
+   * 重なる = 中心に題を置いたまま行を並べる場所が無い。 判定は `spec.ts` が持ち、
+   * 検査軸 (`title-row-overlap`) も同じ関数を引く。
+   */
+  const hasRows = (node.rows?.length ?? 0) > 0;
+  const centered = genericTextCentered(node.kind, hasRows);
   const textAnchor = centered ? ("middle" as const) : ("start" as const);
   const textX = centered ? w / 2 : 20;
-  // cylinder は上 ellipse (ry=14) の下に text を置く必要があるため textY を +28 shift
-  const cylinderShift = shape === "cylinder" ? 28 : 0;
+  // cylinder は上 ellipse (ry=14) の下に text を置く。 ずらし量は `spec.ts` が持つ
+  const cylinderShift = genericTextShift(node.kind);
   // 中心揃え時は h/2 を baseline 中心 (dominantBaseline=middle で計算するため text y を h/2 ベースに統一)
   const eyebrowY = centered ? h / 2 - 26 : 32 + cylinderShift;
-  const titleY = centered ? h / 2 + 4 : 68 + cylinderShift;
+  const titleY = genericTitleBaselineY(node.kind, h, hasRows);
   const subtitleY = centered ? h / 2 + 28 : 96 + cylinderShift;
   // icon 位置 (diamond / cloud は title の真右の少し上、 中心配置に合わせる)
   const iconX = centered ? w / 2 + 40 : w - 48;

package/src/kinds/mind-map.tsx

@@ -1,5 +1,5 @@
 import type { JSX } from "react";
-import { 使える幅, 幅に収める, 箱に積む } from "./box-lines";
+import { 使える幅, 幅に収める, 箱に積む, type 積む行 } from "./box-lines";
 import type { LaidNode, Tone, MindBranchNode, MindBranchPayload } from "../types";
 import { TONE } from "../render/tone";
 import { resolveMindData } from "../render/payload-binding";
@@ -28,6 +28,49 @@ export const MIND_BOX_GAP = 24;
  * 深い階層は parent 方向へ扇状展開。 depth 別 tone を rotate。
  * curved edge = bezier で親子を接続、 node は rounded rect で読みやすさ優先。
  */
+/**
+ * 箱の内側に取る余白。 図の外枠と放射の描画領域の間。
+ *
+ * **module に置く** (#538)。 描く側の中に閉じていた間、 検査側は同じ値を書き写すしかなく、
+ * 片方を変えた時にもう片方が古いまま残る。
+ */
+const MIND_PAD = 40;
+
+/**
+ * 放射の中の箱と枝を並べる (#538)。
+ *
+ * 描く側 (`MindMapNode`) と検査側 (`visual-validate.ts` の `box-line-dropped`) の**唯一の入口**。
+ * 名前を解決できない (`mindData` を持たない) 節では `undefined` を返す = 描く側はそこで
+ * 空の `<g>` を返しており、 検査側も見る箱を持たない。
+ */
+export function 放射の中身(
+  node: LaidNode,
+  stateValues: Record<string, string> = {},
+): { nodes: LayoutNode[]; edges: LayoutEdge[] } | undefined {
+  // 名前は状態を読める (#467)。 中心と枝の両方を解決層に通す
+  const mindData = node.mindData ? resolveMindData(node.mindData, stateValues) : undefined;
+  if (!mindData) return undefined;
+  return computeMindMapLayout(
+    mindData,
+    node.w / 2,
+    node.h / 2,
+    node.w - MIND_PAD * 2,
+    node.h - MIND_PAD * 2,
+  );
+}
+
+/**
+ * 放射の 1 箱に積む行 (名前 + 補足)。
+ *
+ * 字の大きさをここに集める (#538)。 理由は `木の行` と同じ。
+ */
+export function 放射の行(n: LayoutNode): 積む行[] {
+  return [
+    { 役割: "title", text: n.title, fontSize: n.isRoot ? 15 : 13 },
+    { 役割: "subtitle", text: n.subtitle ?? "", fontSize: 9 },
+  ];
+}
+
 export function MindMapNode({
   node,
   active,
@@ -45,17 +88,8 @@ export function MindMapNode({
 }): JSX.Element {
   const x0 = node.cx - node.w / 2;
   const y0 = node.cy - node.h / 2;
-  // 名前は状態を読める (#467)。 中心と枝の両方を解決層に通す
-  const mindData = node.mindData ? resolveMindData(node.mindData, stateValues) : undefined;
-  if (!mindData) return <g transform={`translate(${x0} ${y0})`} />;
-
-  const PAD = 40;
-  const canvasCx = node.w / 2;
-  const canvasCy = node.h / 2;
-  const canvasW = node.w - PAD * 2;
-  const canvasH = node.h - PAD * 2;
-
-  const layout = computeMindMapLayout(mindData, canvasCx, canvasCy, canvasW, canvasH);
+  const layout = 放射の中身(node, stateValues);
+  if (!layout) return <g transform={`translate(${x0} ${y0})`} />;
 
   /**
    * 枝がどこまで伸びたか (0..1、 cdl#520)。 描く指定が無ければ常に 1 = 全部出ている。
@@ -105,20 +139,16 @@ export function MindMapNode({
         // 枝が届いてから箱を出す。 届く前に出すと、繋がっていない箱が宙に浮く
         if (!箱が出る(n.depth)) return null;
         // 補足は箱の中の 2 行目に出す (#471)。 箱の高さは変えないため、 入らない時は落ちる
-        const 行 = 箱に積む(
-          [
-            { 役割: "title" as const, text: n.title, fontSize: n.isRoot ? 15 : 13 },
-            { 役割: "subtitle" as const, text: n.subtitle ?? "", fontSize: 9 },
-          ],
-          n.w,
-          n.h,
-        );
+        const 材料 = 放射の行(n);
+        const 行 = 箱に積む(材料, n.w, n.h);
         // 判定は行数でなく「補足を渡したか」 で行う (理由は tree.tsx と同じ、 #471 Round 1)
         const 補足あり = (n.subtitle ?? "").trim() !== "";
-        // 補足ありでは `箱に積む` が既に同じ処理を済ませているため、1 行の経路だけ計算する
+        // 補足ありでは `箱に積む` が既に同じ処理を済ませているため、1 行の経路だけ計算する。
+        // 名前の大きさは `放射の行` から取る (#538、 理由は tree.tsx と同じ)
+        const 名前 = 材料[0]!;
         const 収めた名前 = 補足あり
           ? undefined
-          : 幅に収める(n.title, n.isRoot ? 15 : 13, 使える幅(n.w));
+          : 幅に収める(名前.text, 名前.fontSize, 使える幅(n.w));
         const 文字の色 = n.isRoot
           ? "var(--cdl-text-on-tone, #ffffff)"
           : "var(--cdl-chip-text, #1a1f2a)";

package/src/kinds/terminal-mark.tsx

@@ -0,0 +1,96 @@
+import type { JSX } from "react";
+import type { LaidNode } from "../types";
+import { nodeAccent } from "./node-tone";
+
+/**
+ * 流れの **始まりと終わりの印** (#560)。
+ *
+ * 状態遷移図は始まりを塗った丸、終わりを輪で囲んだ丸で示す。 それまでこれに当たる種別が無く、
+ * 箱の小見出しに「初期」「最終」 と書いて代えていた = 印であるべきものが文字になっていた。
+ *
+ * **文字は描かない**。 印そのものが意味を持つので、丸の中に名前を入れても読めない。
+ * `rendersTitleText` はこの 2 種別を「描かない」 側に置いており、全種別を描いて突き合わせる
+ * 検査 (`test/node-title-render.test.tsx`) が実際の描画と一致していることを見る。
+ */
+
+/** 終わりの印の、内側の丸の直径を外側の輪の何割にするか */
+export const MARK_INNER_RATIO = 0.56;
+
+/** 終わりの印の輪の太さ。 光っている時は太くする (他の種別の枠線と同じ考え方) */
+const RING_WIDTH_ACTIVE = 6;
+const RING_WIDTH_IDLE = 4;
+
+/** 印の既定の色。 `tone` を書けばそちらが勝つ */
+const MARK_DEFAULT = "var(--cdl-tone-accent, #2d6a8f)";
+
+/**
+ * 印の半径。 **箱の短い方の辺いっぱい** に描く。
+ *
+ * 線は箱の縁で止まるので、印を箱より小さく描くと矢の先と印の間が空いて線が浮く
+ * (半分の大きさにすると 24 world 空いた)。 縁まで描けば接する。
+ *
+ * 短い方から取るのは、段の高さが全ての段で揃えられるため。 同じ段に背の高い箱があると
+ * 印の箱も背が高くなり、長い方に合わせると印だけ縦長の楕円になる。 その時は横幅のまま
+ * 上下の中央に置く = 上下には隙間が残るが、丸のままで読める側を採る。
+ */
+function markRadius(node: LaidNode): number {
+  return Math.min(node.w, node.h) / 2;
+}
+
+/**
+ * 流れの始まり = 塗った丸。
+ *
+ * **光っても形を変えない**。 他の種別は光った時に枠線を太くするが、塗った丸には太らせる枠が
+ * 無い。 枠を足すと線の中心が半径に乗るぶん丸が箱の外へ出て、線との接点がずれる (実測で
+ * 太さ 4 の枠を足すと外径が 96 から 100 になった)。 色は `tone` で変えられる。
+ */
+export function MarkStartNode({ node }: { node: LaidNode; active: boolean }): JSX.Element {
+  const 色 = nodeAccent(node, MARK_DEFAULT);
+  return (
+    <g transform={`translate(${node.cx - node.w / 2} ${node.cy - node.h / 2})`}>
+      <circle
+        data-cdl-role="node-body"
+        data-cdl-mark="start"
+        cx={node.w / 2}
+        cy={node.h / 2}
+        r={markRadius(node)}
+        fill={色}
+      />
+    </g>
+  );
+}
+
+/**
+ * 流れの終わり = 輪で囲んだ丸。
+ *
+ * 輪と中身は同じ色で描く。 別の色にすると 2 つの意味を持つ印に見えるが、表しているのは
+ * 「ここで終わる」 の 1 つだけ。
+ */
+export function MarkEndNode({ node, active }: { node: LaidNode; active: boolean }): JSX.Element {
+  const 色 = nodeAccent(node, MARK_DEFAULT);
+  const r = markRadius(node);
+  const 輪の太さ = active ? RING_WIDTH_ACTIVE : RING_WIDTH_IDLE;
+  return (
+    <g transform={`translate(${node.cx - node.w / 2} ${node.cy - node.h / 2})`}>
+      <circle
+        data-cdl-role="node-body"
+        data-cdl-mark="end"
+        cx={node.w / 2}
+        cy={node.h / 2}
+        // 輪は線の中心を半径に置くので、外側へ太さの半分だけ出る。 印が箱の短い方の辺に
+        // 収まるよう、その分だけ縮める
+        r={Math.max(0, r - 輪の太さ / 2)}
+        fill="var(--cdl-node-fill, #ffffff)"
+        stroke={色}
+        strokeWidth={輪の太さ}
+      />
+      <circle
+        data-cdl-role="node-inner"
+        cx={node.w / 2}
+        cy={node.h / 2}
+        r={Math.max(0, r * MARK_INNER_RATIO)}
+        fill={色}
+      />
+    </g>
+  );
+}

package/src/kinds/tree.tsx

@@ -2,7 +2,7 @@ import type { JSX } from "react";
 import type { LaidNode, TreeNodePayload } from "../types";
 import { TONE } from "../render/tone";
 import { resolveTreeData } from "../render/payload-binding";
-import { 使える幅, 幅に収める, 箱に積む, type 積んだ行 } from "../kinds/box-lines";
+import { 使える幅, 幅に収める, 箱に積む, type 積む行, type 積んだ行 } from "../kinds/box-lines";
 import { 進みを畳む, 伸ばすdash, 段の伸び } from "./draw-progress";
 
 /**
@@ -50,6 +50,49 @@ function 箱の文字({
   ));
 }
 
+/**
+ * 箱の内側に取る余白。 図の外枠と木の描画領域の間。
+ *
+ * **module に置く** (#538)。 描く側の中に閉じていた間、 検査側は同じ値を書き写すしかなく、
+ * 片方を変えた時にもう片方が古いまま残る。
+ */
+const PAD_TOP = 40;
+const PAD_RIGHT = 24;
+const PAD_BOTTOM = 40;
+const PAD_LEFT = 24;
+
+/**
+ * 木の中の箱と枝を並べる (#538)。
+ *
+ * 描く側 (`TreeNode`) と検査側 (`visual-validate.ts` の `box-line-dropped`) の**唯一の入口**。
+ * 余白と canvas の出し方を 2 箇所に書くと、 余白を変えた時に検査だけが古い箱を見る。
+ */
+export function 木の中身(
+  node: LaidNode,
+  stateValues: Record<string, string> = {},
+): { nodes: LayoutNode[]; edges: LayoutEdge[] } {
+  // 名前は状態を読める (#467)。 解決できない名前は書いたまま残して印を付ける
+  const treeNodes = resolveTreeData(node.treeData ?? [], stateValues);
+  return computeTreeLayout(
+    treeNodes,
+    node.w - PAD_LEFT - PAD_RIGHT,
+    node.h - PAD_TOP - PAD_BOTTOM,
+  );
+}
+
+/**
+ * 木の 1 箱に積む行 (名前 + 補足)。
+ *
+ * 字の大きさをここに集める (#538)。 描く側に直書きすると、 検査側が同じ数を書き写すことになり、
+ * 大きさを変えた時に「入るか」 の判定だけが古い値で動く。
+ */
+export function 木の行(n: LayoutNode): 積む行[] {
+  return [
+    { 役割: "title", text: n.title, fontSize: n.depth === 0 ? 13 : 12 },
+    { 役割: "subtitle", text: n.subtitle ?? "", fontSize: 9 },
+  ];
+}
+
 export function TreeNode({
   node,
   active,
@@ -67,18 +110,9 @@ export function TreeNode({
 }): JSX.Element {
   const x0 = node.cx - node.w / 2;
   const y0 = node.cy - node.h / 2;
-  // 名前は状態を読める (#467)。 解決できない名前は書いたまま残して印を付ける
-  const treeNodes = resolveTreeData(node.treeData ?? [], stateValues);
   const gradientId = `tree-root-grad-${node.id}`;
 
-  const PAD_TOP = 40;
-  const PAD_RIGHT = 24;
-  const PAD_BOTTOM = 40;
-  const PAD_LEFT = 24;
-  const canvasW = node.w - PAD_LEFT - PAD_RIGHT;
-  const canvasH = node.h - PAD_TOP - PAD_BOTTOM;
-
-  const layout = computeTreeLayout(treeNodes, canvasW, canvasH);
+  const layout = 木の中身(node, stateValues);
 
   /**
    * 枝がどこまで伸びたか (0..1、 cdl#520)。 描く指定が無ければ常に 1 = 全部出ている。
@@ -153,22 +187,18 @@ export function TreeNode({
         const accent = depthColors[Math.min(n.depth, depthColors.length - 1)] ?? depthColors[0]!;
         const isRoot = n.depth === 0;
         // 補足は箱の中の 2 行目に出す (#471)。 箱の高さは変えないため、 入らない時は落ちる
-        const 行 = 箱に積む(
-          [
-            { 役割: "title" as const, text: n.title, fontSize: isRoot ? 13 : 12 },
-            { 役割: "subtitle" as const, text: n.subtitle ?? "", fontSize: 9 },
-          ],
-          n.w,
-          n.h,
-        );
+        const 材料 = 木の行(n);
+        const 行 = 箱に積む(材料, n.w, n.h);
         // **判定は行数でなく「補足を渡したか」 で行う**。 行数で見ると、 箱が低くて補足が落ちた時に
         // 従来の 1 行の経路へ戻り、 幅で切っていない名前が箱から横にはみ出す (#471 Round 1)
         const 補足あり = (n.subtitle ?? "").trim() !== "";
         // 補足ありでは `箱に積む` が既に同じ処理を済ませているため、1 行の経路だけ計算する。
-        // 収める手段は縮めるのが先で、切るのは下限まで縮めても入らない時だけ (#534)
+        // 収める手段は縮めるのが先で、切るのは下限まで縮めても入らない時だけ (#534)。
+        // 名前の大きさは `木の行` から取る = ここに書き写すと 2 経路で別の大きさになる (#538)
+        const 名前 = 材料[0]!;
         const 収めた名前 = 補足あり
           ? undefined
-          : 幅に収める(n.title, isRoot ? 13 : 12, 使える幅(n.w));
+          : 幅に収める(名前.text, 名前.fontSize, 使える幅(n.w));
         return (
           <g
             key={`n-${n.id}`}

package/src/layout/edges.ts

@@ -23,6 +23,7 @@ import {
   PARALLEL_EDGE_BOW,
   SYMMETRIC_PAIR_SHIFT,
 } from "./spec";
+import { isSelfLoop, layoutSelfLoops } from "./self-loop";
 import { DEFAULT_LABEL_MARGIN } from "./tokens";
 
 /** 縦 detour が obstacle の外側を通る時の余白 (world unit)。 */
@@ -162,6 +163,10 @@ export function layoutEdges(diag: CdlDiagram, nodes: LaidNode[], lanes: LaidLane
   // 全 4 field 未指定なら従来通り orthogonal L 字 routing で保証。
   const positionedEdges: LaidEdge[] = [];
   const autoEdges: typeof diag.edges = [];
+  // 自分から自分へ戻る辺は、両端が同じ節なので 2 節の位置関係から向きを決める routing が
+  // 使えない (どちら側へ出すかを節の外から決められない)。 専用の経路にまとめて渡す (#560)。
+  // 座標を固定した辺 (`posX1` 等) は書いた人が形を決めているので、そちらを先に取る
+  const selfLoopEdges: typeof diag.edges = [];
   for (const e of diag.edges) {
     if (e.posX1 !== undefined && e.posY1 !== undefined && e.posX2 !== undefined && e.posY2 !== undefined) {
       const from = nmap.get(e.from);
@@ -180,11 +185,12 @@ export function layoutEdges(diag: CdlDiagram, nodes: LaidNode[], lanes: LaidLane
         labelY: midY + (e.labelOffsetY ?? 0),
         labelAnchor: "middle",
       });
+    } else if (isSelfLoop(e)) {
+      selfLoopEdges.push(e);
     } else {
       autoEdges.push(e);
     }
   }
-
   const prepared = autoEdges.map((e) => {
     const from = nmap.get(e.from);
     const to = nmap.get(e.to);
@@ -207,6 +213,28 @@ export function layoutEdges(diag: CdlDiagram, nodes: LaidNode[], lanes: LaidLane
     distributeBySides(list);
   }
 
+  // 輪はここで経路にする (#560)。 どちら側へ出すかは「他の線が使っていない辺」 で決めるので、
+  // 側が確定した後でないと選べない (`distributeBySides` が上で側を書き換える)。
+  //
+  // 起点側と終点側の両方を数える = 入ってくる線も辺を 1 つ塞ぐ。 `back-detour` は routing が
+  // 側を上へ強制するので、その後の値で数える (`routePath` に渡すのと同じ値)。
+  const occupiedBySide = new Map<string, Set<Side>>();
+  const 使う = (nodeId: string, side: Side) => {
+    const s = occupiedBySide.get(nodeId) ?? new Set<Side>();
+    s.add(side);
+    occupiedBySide.set(nodeId, s);
+  };
+  for (const p of prepared) {
+    const backDetour = p.e.routing === "back-detour";
+    使う(p.e.from, backDetour ? "top" : p.fromSide);
+    使う(p.e.to, backDetour ? "top" : p.toSide);
+  }
+  for (const le of positionedEdges) {
+    使う(le.from, le.fromSide);
+    使う(le.to, le.toSide);
+  }
+  const loopEdges = layoutSelfLoops(selfLoopEdges, nmap, occupiedBySide);
+
   // CAR-429 (CAR-426-B) ... 全 edge の起点 / 終点 / L 字 corner は node 辺 Y 中央固定 (offset=0 SSOT)。
   // 旧 fan-in / fan-out / parallel の sidepoint 分散 (±60/±120) は削除済で、
   // path routing (d 属性) は offset=0 固定で描画される (視覚的に起点認識明確化)。
@@ -1090,6 +1118,7 @@ export function layoutEdges(diag: CdlDiagram, nodes: LaidNode[], lanes: LaidLane
   // 元 diag.edges の順序を保持するため id 順で lookup、 positioned は auto より先に列挙。
   const laidById = new Map<string, LaidEdge>();
   for (const le of autoResults) laidById.set(le.id, le);
+  for (const le of loopEdges) laidById.set(le.id, le);
   for (const le of positionedEdges) laidById.set(le.id, le);
   return diag.edges.map((e) => laidById.get(e.id)!).filter((e) => e !== undefined);
 }