@cardenelabs/cdl 0.6.1 → 0.9.0

package/src/presets.ts

@@ -2,7 +2,40 @@ import { diagram } from "./builder";
 import type { DiagramBuilder } from "./builder";
 import { LANE_PAD_MIN, NODE_SIZE } from "./layout/tokens";
 import { requiredRowsWidth } from "./kinds/row-align";
-import type { NodeKind, Tone, EdgeStyle, JourneyEmotion, QuadrantKey } from "./types";
+import type { NodeKind, Tone, EdgeStyle, JourneyEmotion, QuadrantKey, BoundNumber } from "./types";
+
+/**
+ * 状態を読む書き方 (`{名前}`)。
+ *
+ * 中身の型 (`BoundNumber` / `BoundEnum`) は任意の文字列を受けるが、 **入口はこの形だけに
+ * 限る** (#468 Round 1)。 広いままだと `value: "abc"` や `quadrant: "topLfet"` のような
+ * 書き間違いが、 これまで組み立ての時点で止まっていたのに実行時まで進み、 解決側の既定値
+ * (0 / 左下 / 普通) に落ちた図が出る。
+ */
+type 名前の頭 =
+  | "a" | "b" | "c" | "d" | "e" | "f" | "g" | "h" | "i" | "j" | "k" | "l" | "m"
+  | "n" | "o" | "p" | "q" | "r" | "s" | "t" | "u" | "v" | "w" | "x" | "y" | "z"
+  | "A" | "B" | "C" | "D" | "E" | "F" | "G" | "H" | "I" | "J" | "K" | "L" | "M"
+  | "N" | "O" | "P" | "Q" | "R" | "S" | "T" | "U" | "V" | "W" | "X" | "Y" | "Z"
+  | "_";
+
+export type BindingRef = `{${名前の頭}${string}}`;
+
+/**
+ * その文字列が **全体で** 状態を読む書き方かどうか (#468 Round 5)。
+ *
+ * `hasUnresolvedRef` は「参照らしい部分を含むか」 を見るため、 `Phase {A}` のような通常の
+ * 名前まで参照とみなす。 工程表の入口は名前と参照を同じ欄で受けるので、 部分一致で判定すると
+ * **正当な名前が黙って消える** (実測 = `start: "Phase {A}"` が位置 `"Phase {A}"` になり、
+ * 名前の欄が空になった)。
+ *
+ * 型 (`BindingRef`) が「文字列全体が `{名前}`」 を要求しているので、 判定もそれに揃える。
+ *
+ * **中身に中括弧を許す**。 型は `{${名前の頭}${string}}` で、 `string` が中括弧を含む形
+ * (`{a}tail}` / `{a{b}`) も受ける。 実装だけ狭めると、 **型では通るのに名前として扱われる**
+ * 食い違いができる (Round 6 の指摘)。 型で中括弧を除く条件は書けないため、 実装を型に合わせる。
+ */
+const 参照そのもの = (v: string): boolean => /^\{[A-Za-z_][\s\S]*\}$/.test(v);
 
 /**
  * 図の格子の目 (world unit)。 `grid-alignment` (軸 21) が見る単位と同じ。
@@ -213,11 +246,32 @@ export type FlowPreset = {
   /** edge tone / style の default (各 step → next step の edge) */
   defaultTone?: Tone;
   defaultStyle?: EdgeStyle;
+  /**
+   * step 間の edge を自動生成するか (既定 true)。
+   *
+   * `false` にすると `step()` は node だけを置き、矢印は呼び手が `edge()` で宣言する。
+   * **並び順と違う流れ** (`alpha` から `gamma` へ直接繋いで `beta` を経由しない等) を
+   * 書きたい時に使う。 自動生成しか無かった間、その形は本 preset では作れなかった (#474)。
+   *
+   * 既定を `true` にしているので、既存の呼び出しは 1 行も変えずに同じ図になる。
+   */
+  autoChain?: boolean;
 };
 
 export type FlowBuilder = {
-  /** step を順番に追加、 自動で前 step から edge 接続 */
+  /** step を順番に追加、 自動で前 step から edge 接続 (`autoChain: false` なら node だけ) */
   step: (node: FlowStepInput, edgeLabel?: string) => FlowBuilder;
+  /**
+   * 矢印を宣言する (#474)。 tone / style は preset の既定を引き継ぐ。
+   *
+   * ここで作った矢印も `build()` の phase の `activate` に載る (自動生成分と同じ扱い)。
+   * 載せないと animation で光らず、自動生成と見た目が揃わない。
+   */
+  edge: (
+    from: string,
+    to: string,
+    opts?: { id?: string; label?: string; tone?: Tone; style?: EdgeStyle },
+  ) => FlowBuilder;
   build: () => ReturnType<DiagramBuilder["build"]>;
 };
 
@@ -238,6 +292,8 @@ export function flow(preset: FlowPreset): FlowBuilder {
   b.lane("flow", { width: w, ...(preset.laneLabel ? { label: preset.laneLabel } : {}) });
   const tone: Tone = preset.defaultTone ?? "accent";
   const style: EdgeStyle = preset.defaultStyle ?? "dotted-flow";
+  // 既定は自動生成。 省略した既存の呼び出しの挙動を変えない (#474)
+  const autoChain = preset.autoChain ?? true;
   let prevId: string | null = null;
   let stackIdx = 0;
   const phaseActivate: string[] = [];
@@ -253,7 +309,7 @@ export function flow(preset: FlowPreset): FlowBuilder {
         ...(node.subtitle ? { subtitle: node.subtitle } : {}),
       });
       phaseActivate.push(node.id);
-      if (prevId !== null) {
+      if (autoChain && prevId !== null) {
         const edgeId = `e-${prevId}-${node.id}`;
         b.edge(prevId, node.id, {
           id: edgeId,
@@ -266,6 +322,17 @@ export function flow(preset: FlowPreset): FlowBuilder {
       prevId = node.id;
       return api;
     },
+    edge(from, to, opts) {
+      const edgeId = opts?.id ?? `e-${from}-${to}`;
+      b.edge(from, to, {
+        id: edgeId,
+        label: opts?.label ?? "→",
+        tone: opts?.tone ?? tone,
+        style: opts?.style ?? style,
+      });
+      phaseActivate.push(edgeId);
+      return api;
+    },
     build() {
       b.phase(
         "flow",
@@ -398,7 +465,8 @@ const actorW = Math.max(140, label.length * 22 + 52);
 // warning suppress、 ASCII long name (AuthenticationService 21 char) は 514 になり
 // 過大化との trade-off だが 「警告出るのに対応できない」 の user feedback 優先。
 const actorW = Math.max(140, label.length * 22 + 52);
-        b.node(footerId, { lane: laneId, stack: footerStack, kind: "card", title: label, w: actorW, h: 72 });
+        // `role` を付けるのは、 描画側が「どれが下端の名札か」 を位置で推測しないため (#458)
+        b.node(footerId, { lane: laneId, stack: footerStack, kind: "card", title: label, w: actorW, h: 72, role: "lifeline-footer" });
         phaseActivate.push(footerId);
       });
       b.phase(
@@ -1052,8 +1120,8 @@ export type TreeNode = {
   parent?: string;
   /** 表示 kind (default "card") */
   kind?: NodeKind;
+  /** 箱の 2 行目に出す補足。 上の小ラベルは木では受けない (#471、 `TreeNodePayload` 参照) */
   subtitle?: string;
-  eyebrow?: string;
 };
 
 export type TreePreset = {
@@ -1109,7 +1177,6 @@ export function tree(preset: TreePreset): TreeBuilder {
           title: n.title,
           parent: n.parent,
           subtitle: n.subtitle,
-          eyebrow: n.eyebrow,
         })),
       });
       b.phase(
@@ -1133,7 +1200,8 @@ export type { JourneyEmotion } from "./types";
 export type JourneyStep = {
   id: string;
   title: string;
-  emotion: JourneyEmotion;
+  /** 起伏の段階。 `{名前}` を書くと状態から読む (#468) */
+  emotion: JourneyEmotion | BindingRef;
   /** どの touchpoint (例 "Website", "Email", "Support") */
   touchpoint?: string;
   /** opportunity (改善余地のメモ) */
@@ -1296,8 +1364,8 @@ export function mindMap(preset: MindMapPreset): MindMapBuilder {
 export type FunnelStage = {
   id: string;
   title: string;
-  /** この stage の人数 / 件数 */
-  count: number;
+  /** この stage の人数 / 件数。 `{名前}` を書くと状態から読む (#468) */
+  count: number | BindingRef;
   /** stage 詳細 */
   subtitle?: string;
 };
@@ -1376,8 +1444,8 @@ export type QuadrantQuadrantLabel = QuadrantKey;
 export type QuadrantItem = {
   id: string;
   title: string;
-  /** どの象限 (4 象限) */
-  quadrant: QuadrantQuadrantLabel;
+  /** どの象限 (4 象限)。 `{名前}` を書くと状態から読む (#468) */
+  quadrant: QuadrantQuadrantLabel | BindingRef;
   subtitle?: string;
 };
 
@@ -1472,7 +1540,8 @@ export type ChartType = "pie" | "bar" | "line";
 export type ChartDatum = {
   id: string;
   label: string;
-  value: number;
+  /** 棒 / 折れ線 / 扇の大きさ。 `{名前}` を書くと状態から読む (#468) */
+  value: number | BindingRef;
   /** 個別 tone (default は preset の defaultTone) */
   tone?: Tone;
 };
@@ -1553,9 +1622,15 @@ export function chart(preset: ChartPreset): ChartBuilder {
 export type GanttTask = {
   id: string;
   title: string;
-  /** 開始 (例 "2026-Q1" / "Day 1") */
+  /**
+   * 開始の目盛りの名前 (例 "2026-Q1" / "Day 1")。
+   *
+   * `{名前}` を書くと **位置そのもの** を状態から読む (#468)。 目盛りの名前の対応付けは
+   * 飛ばす = 名前の並びに `{名前}` が混ざると、 位置が状態で動くたびに目盛りの並びが
+   * 変わってしまう。
+   */
   start: string;
-  /** 終了 (例 "2026-Q2") */
+  /** 終了の目盛りの名前。 `{名前}` の扱いは `start` と同じ (#468) */
   end: string;
   /** owner / assignee */
   owner?: string;
@@ -1568,6 +1643,17 @@ export type GanttPreset = {
   topic: string;
   defaultTone?: Tone;
   laneWidth?: number;
+  /**
+   * 横軸を何目盛り分にするか (`#483`)。
+   *
+   * 書かないと今までどおり全 task の最大値から自動で決まるため、 `{名前}` で動く task が
+   * 1 つあると **動かしていない task の帯まで伸び縮みする** (実測 = 端を 3 から 9 に動かすと
+   * 静的な task の帯が 252 から 97.2 になった)。
+   *
+   * 書くと尺がその値で固定され、 他の task の帯の位置と幅が変わらない。 範囲から外れる task の
+   * 帯は右端の目盛りに寄せて描く (`kinds/gantt.tsx` SSOT)。
+   */
+  axisMax?: number;
 };
 
 export type GanttBuilder = {
@@ -1579,8 +1665,11 @@ export type GanttBuilder = {
  * gantt preset ... Gantt chart / sprint planning / release timeline。
  * task ごとに 1 lane を作り、 start - end + owner を subtitle、 dependsOn で前 task → 次 task の edge を auto 生成。
  *
+ * 横軸の範囲は既定では全 task の最大値から自動で決まる。 `axisMax` を書くと尺がその値で
+ * 固定され、 `{名前}` で動く task があっても他の task の帯が動かない (`#483`)。
+ *
  * @example
- * gantt({ id: "release", topic: "Release timeline" })
+ * gantt({ id: "release", topic: "Release timeline", axisMax: 4 })
  *   .task({ id: "design", title: "Design", start: "Q1", end: "Q1" })
  *   .task({ id: "build", title: "Build", start: "Q2", end: "Q2", dependsOn: "design" })
  *   .task({ id: "test", title: "Test", start: "Q3", end: "Q3", dependsOn: "build" })
@@ -1599,12 +1688,19 @@ export function gantt(preset: GanttPreset): GanttBuilder {
       return api;
     },
     build() {
-      // start / end label を index に変換 (unique label を順に並べる)
+      // start / end label を index に変換 (unique label を順に並べる)。
+      //
+      // `{名前}` を書いた分は **並びに入れない** (#468)。 入れると位置が状態で動くたびに
+      // 目盛りの並びが変わり、 動かしていない task の位置まで動く。
       const labelSeq: string[] = [];
       for (const t of tasks) {
-        if (!labelSeq.includes(t.start)) labelSeq.push(t.start);
-        if (!labelSeq.includes(t.end)) labelSeq.push(t.end);
+        if (!参照そのもの(t.start) && !labelSeq.includes(t.start)) labelSeq.push(t.start);
+        if (!参照そのもの(t.end) && !labelSeq.includes(t.end)) labelSeq.push(t.end);
       }
+      // `{名前}` は位置そのものとして通す。 名前の欄は空にする = 目盛りは位置にしか無く、
+      // 状態から来る位置に付ける名前が無い (空の目盛りは描かれない)
+      const 位置 = (v: string): BoundNumber => (参照そのもの(v) ? v : labelSeq.indexOf(v));
+      const 名札 = (v: string): string => (参照そのもの(v) ? "" : v);
       b.lane("gantt", { width: canvasW });
       const nodeId = `${preset.id}-gantt`;
       b.node(nodeId, {
@@ -1615,13 +1711,15 @@ export function gantt(preset: GanttPreset): GanttBuilder {
         eyebrow: "gantt",
         w: canvasW,
         h: canvasH,
+        // 宣言していない図には欄自体を載せない = 自動で決める経路をそのまま通す
+        ...(preset.axisMax !== undefined ? { ganttAxisMax: preset.axisMax } : {}),
         ganttData: tasks.map((t) => ({
           id: t.id,
           title: t.title,
-          startIdx: labelSeq.indexOf(t.start),
-          endIdx: labelSeq.indexOf(t.end),
-          startLabel: t.start,
-          endLabel: t.end,
+          startIdx: 位置(t.start),
+          endIdx: 位置(t.end),
+          startLabel: 名札(t.start),
+          endLabel: 名札(t.end),
           owner: t.owner,
           dependsOn: t.dependsOn,
           tone,

package/src/render/header.tsx

@@ -124,7 +124,9 @@ function StateDiffCard({
         <tbody style={{ color: "var(--cdl-text, #1a1f2a)" }}>
           {states.map((s) => {
             const initial = String(s.initial);
-            const current = stateValues[s.id] ?? initial;
+            // 自分が持つ名前だけを見る (#456)。 通常の object を渡された場合、 `toString` の
+            // ような名前の状態で prototype の関数がそのまま表に出る
+            const current = Object.hasOwn(stateValues, s.id) ? stateValues[s.id]! : initial;
             const changed = initial !== current;
             return (
               <tr key={s.id}>

package/src/render/nodes.tsx

@@ -149,9 +149,10 @@ export function CdlNodeView({
         return <EventNode node={resolvedNode} active={active} progress={progress} />;
       case "card":
         return <CardNode node={resolvedNode} active={active} />;
-      // 図表 7 種は payload の数と語が `{signal}` を取れるので stateValues を渡す
-      // (`render/payload-binding.ts` が描画直前に解決する)。 動かさない 2 種
-      // (mind-map / tree-hierarchy) は構造だけを持つため渡さない。
+      // 図表 9 種は payload が `{signal}` を取れるので stateValues を渡す
+      // (`render/payload-binding.ts` が描画直前に解決する)。 取れる欄は種別で違い、
+      // 数と語を取る 7 種に対し、mind-map / tree-hierarchy は **名前だけ** を取る (#467)。
+      // 親子の繋がりと、描かれない欄 (補足) は解決しない。
       case "chart-line":
         return <ChartLineNode node={resolvedNode} active={active} stateValues={stateValues} />;
       case "chart-pie":
@@ -161,13 +162,13 @@ export function CdlNodeView({
       case "gantt-timeline":
         return <GanttNode node={resolvedNode} active={active} stateValues={stateValues} />;
       case "mind-map":
-        return <MindMapNode node={resolvedNode} active={active} />;
+        return <MindMapNode node={resolvedNode} active={active} stateValues={stateValues} />;
       case "funnel-stages":
         return <FunnelNode node={resolvedNode} active={active} stateValues={stateValues} />;
       case "quadrant-matrix":
         return <QuadrantNode node={resolvedNode} active={active} stateValues={stateValues} />;
       case "tree-hierarchy":
-        return <TreeHierarchyNode node={resolvedNode} active={active} />;
+        return <TreeHierarchyNode node={resolvedNode} active={active} stateValues={stateValues} />;
       case "journey-map":
         return <UserJourneyNode node={resolvedNode} active={active} stateValues={stateValues} />;
       case "shape-file":

package/src/render/payload-binding.ts

@@ -6,11 +6,14 @@ import type {
   GanttTaskPayload,
   JourneyEmotion,
   JourneyStepPayload,
+  MindBranchNode,
+  MindBranchPayload,
   QuadrantItemPayload,
   QuadrantKey,
   QuadrantPayload,
+  TreeNodePayload,
 } from "../types";
-import { interpolate } from "./utils";
+import { hasUnresolvedRef, interpolate } from "./utils";
 
 /**
  * 図表 payload が状態を読むための解決層 (dragon#1161 段 3)。
@@ -24,8 +27,15 @@ import { interpolate } from "./utils";
  * (spec § 4.2 が輪について同じ判断をしている = 1 箇所の壊れで図が消えると原因が分からない)。
  * 印は各 kind が `data-cdl-unresolved="true"` として DOM に出す。
  *
- * 動かさない 2 種 (`mind-map` / `tree-hierarchy`) はここに resolver を持たない。
- * 構造だけを持ち動かせる数が無く、 動かすとしたら項目の増減になるため (Issue の実装しない条件)。
+ * `mind-map` / `tree-hierarchy` の 2 種は **名前だけ** を解決する (#467)。 この 2 種が持つのは
+ * 数ではなく構造と名前で、動かせるのは名前の側だけ。
+ *
+ * 解決するのは **描かれる欄だけ** にする。 この 2 種は補足 (`subtitle`) を描かないため
+ * (実測で確認)、解決しても画面には出ず、解決できない時だけ印が付く = 見た目は何も変わらない
+ * のに印だけ出る状態になる。 描く方を足すかは別 Issue (#471)。
+ *
+ * 親子の繋がり (`parent`) も解決しない = 状態で繋ぎ替えると木の形そのものが変わり、
+ * 配置の計算と印の付け方が別問題になる。
  */
 
 /** 解決の結果。 `ok` が false なら既定値に落ちたことを表す */
@@ -194,3 +204,78 @@ export function resolveJourneyData(
     return e.ok ? { ...s, emotion: e.value } : { ...s, emotion: e.value, unresolved: true as const };
   });
 }
+
+/** 名前の欄を解決した結果。 解決できなければ書いたまま残して印を付ける */
+export type ResolvedTreeNode = TreeNodePayload & UnresolvedMark;
+export type ResolvedMindBranch = MindBranchNode & UnresolvedMark;
+export type ResolvedMindData = Omit<MindBranchPayload, "branches"> & {
+  branches: ResolvedMindBranch[];
+} & UnresolvedMark;
+
+/**
+ * 名前の欄を状態で埋める (#467)。
+ *
+ * **解決できなかった時も文字を消さない**。 数の欄は既定値 (0 等) に落とすが、名前は落とす先が
+ * 無く、空にすると図から項目の存在まで消えてしまう。 書いた `{名前}` をそのまま残せば、
+ * どの名前が解決できなかったかが図の上で読める。 印は他の欄と同じ `data-cdl-unresolved`。
+ */
+function resolveBoundText(raw: string, values: Record<string, string>): BindingResult<string> {
+  // 状態を読まない名前は組み直さない (毎 frame の割当てを避ける近道、 他の resolver と同じ)
+  if (!raw.includes("{")) return { value: raw, ok: true };
+  const resolved = interpolate(raw, values);
+  return hasUnresolvedRef(resolved) ? { value: resolved, ok: false } : { value: resolved, ok: true };
+}
+
+/**
+ * 木の名前と補足を解決する。 親子の繋がりは触らない。
+ *
+ * 補足を解決対象に入れたのは #471 で **補足を描くようにしたため**。 描かない欄を解決すると、
+ * 画面は何も変わらないのに解決できない時だけ印が付く状態になる = 印の意味が読めない。
+ * 逆に描くようになった欄を解決しないと、 図に `{名前}` が素のまま出る。
+ */
+export function resolveTreeData(
+  nodes: TreeNodePayload[],
+  values: Record<string, string>,
+): ResolvedTreeNode[] {
+  const 読む = nodes.some((n) => n.title.includes("{") || (n.subtitle?.includes("{") ?? false));
+  if (!読む) return nodes as ResolvedTreeNode[];
+  return nodes.map((n) => {
+    const title = resolveBoundText(n.title, values);
+    const subtitle = n.subtitle === undefined ? undefined : resolveBoundText(n.subtitle, values);
+    const 解決後: ResolvedTreeNode = {
+      ...n,
+      title: title.value,
+      ...(subtitle ? { subtitle: subtitle.value } : {}),
+    };
+    return title.ok && (subtitle?.ok ?? true) ? 解決後 : { ...解決後, unresolved: true as const };
+  });
+}
+
+/**
+ * 放射の名前と補足を解決する。 中心の名前と枝の名前 / 補足を見る。
+ *
+ * 補足を入れた理由は `resolveTreeData` と同じ (#471)。 中心は補足の欄を持たない。
+ */
+export function resolveMindData(
+  data: MindBranchPayload,
+  values: Record<string, string>,
+): ResolvedMindData {
+  const 読む =
+    data.rootTitle.includes("{") ||
+    data.branches.some((b) => b.title.includes("{") || (b.subtitle?.includes("{") ?? false));
+  if (!読む) return data as ResolvedMindData;
+
+  const root = resolveBoundText(data.rootTitle, values);
+  const branches = data.branches.map((b) => {
+    const title = resolveBoundText(b.title, values);
+    const subtitle = b.subtitle === undefined ? undefined : resolveBoundText(b.subtitle, values);
+    const 解決後: ResolvedMindBranch = {
+      ...b,
+      title: title.value,
+      ...(subtitle ? { subtitle: subtitle.value } : {}),
+    };
+    return title.ok && (subtitle?.ok ?? true) ? 解決後 : { ...解決後, unresolved: true as const };
+  });
+  const 解決後: ResolvedMindData = { ...data, rootTitle: root.value, branches };
+  return root.ok ? 解決後 : { ...解決後, unresolved: true as const };
+}

package/src/render/stage.tsx

@@ -4,7 +4,7 @@ import { CdlEdgeView, CdlEdgeGlowView, CdlEdgeLabelView } from "./edges";
 import { CdlNodeView } from "./nodes";
 import { TONE, TONE_HEX } from "./tone";
 import { buildDiagramAltText } from "../layout/spec";
-import { footerShapeDropsOf, lifelineFooterNodes } from "../layout/footer-shape";
+import { lifelineStartYs, uniformLifelineEndY } from "../layout/lifeline";
 
 export function CdlStage({
   laid,
@@ -25,28 +25,22 @@ export function CdlStage({
   svgRef?: React.RefObject<SVGSVGElement | null>;
 }): JSX.Element {
   const activeSet = new Set(currentPhase?.activate ?? []);
-  // 全 lifeline lane 横断で uniform y2 (footer.top の min) を事前計算して等長保証。
-  // 単一 node lane も同じ y2 を使う (mixed 構成での分岐回避、 Round 2 major fix)。
-  // footer.top を集めた配列を作り、 min を uniformFooterTop とする。 配列空 (全 lane が
-  // 1 node 以下 or 0 node) の場合、 最初の lifeline lane の (lane.y + lane.height) を fallback。
-  const lifelineLanes = laid.lanes.filter((l) => l.lifeline);
-  // 下端の名札は 2 つの用途に使う。 縦線の終点 (uniformFooterTop) と、 絵を下げる量の表。
+  // 縦線の終点は全 lane で 1 つに揃える (等長保証)。 値の決め方と、 1 lane の異常が図全体から
+  // 縦線を消していた形の対処は `uniformLifelineEndY` の説明。
   //
-  // `shape-` の一部は中身を箱の下端から固定の距離で組み立てるため、 箱が低いと絵が上へ出る
-  // (`SHAPE_DRAW_UP_EXTENT` の説明)。 縦線は箱の上端で止まるので、 出た分だけ縦線が絵の中を通る。
+  // 下端の名札で絵が箱の上へ出る種別を下げるのは **組み立て側の責務** (`applyFooterShapeDrops`)。
+  // ここで `<g transform>` を掛ける形だった頃は、 描画だけが動いて座標が動かず、 座標を読む側
+  // (縦線の終点 / 図の下端 / 外接矩形) が実際の位置を知らなかった (#478)。
   //
-  // 名札を集める処理は 1 度だけ行い、 配置が変わらない限り作り直さない。 この component は
-  // 動きの 1 コマごとに描き直されるため、 毎コマ集め直すと lane 数 × node 数を毎コマ払う
-  const { footerTops, footerDropById } = useMemo(() => {
-    const footers = lifelineFooterNodes(laid.lanes, laid.nodes);
+  // 始点と終点は 1 度だけ求め、 配置が変わらない限り作り直さない。 この component は
+  // 動きの 1 コマごとに描き直されるため、 毎コマ求め直すと lane 数 × node 数を毎コマ払う
+  const { lifelineStarts, uniformFooterTop } = useMemo(() => {
+    const starts = lifelineStartYs(laid.nodes);
     return {
-      footerTops: footers.map((f) => f.cy - f.h / 2),
-      footerDropById: footerShapeDropsOf(footers),
+      lifelineStarts: starts,
+      uniformFooterTop: uniformLifelineEndY(laid.lanes, laid.nodes, starts),
     };
   }, [laid]);
-  const uniformFooterTop = footerTops.length > 0
-    ? Math.min(...footerTops)
-    : (lifelineLanes[0] ? lifelineLanes[0].y + lifelineLanes[0].height : 0);
   const diagramScale = laid.diagramScale ?? 1;
   return (
     <div className={compact ? "px-3 py-3" : "px-6 py-6"} style={compact ? undefined : { minHeight: 460 }}>
@@ -167,14 +161,10 @@ export function CdlStage({
               />
             )}
             {lane.lifeline && (() => {
-              // lifeline は header (topmost node) の bottom edge から uniformFooterTop
-              // (全 lifeline lane 共通、 CdlStage 冒頭で事前計算) までを結ぶ。 単一 node lane も
-              // multi-node lane も同じ y2 を使うことで mixed 構成の等長保証を守る (Round 2 major fix)。
-              const laneNodes = laid.nodes.filter((n) => n.lane === lane.id);
-              if (laneNodes.length === 0) return null;
-              const sortedByCy = laneNodes.slice().sort((a, b) => a.cy - b.cy);
-              const header = sortedByCy[0]!;
-              const y1 = header.cy + header.h / 2;
+              // 縦線は lane の一番上の node の下端から、 全 lane 共通の終点までを結ぶ。
+              // node が 1 つの lane も 2 つ以上の lane も同じ終点を使うことで高さが揃う。
+              const y1 = lifelineStarts.get(lane.id);
+              if (y1 === undefined) return null;
               const y2 = uniformFooterTop;
               if (y2 <= y1) return null;
               return (
@@ -223,14 +213,7 @@ export function CdlStage({
               currentPhaseId={currentPhase?.id}
             />
           );
-          const dy = footerDropById.get(node.id);
-          // 下端の名札で絵が上へ出る種別だけ、 絵の上端が箱の上端に来るまで下げる。
-          // node の座標そのものは動かさない = 矢印の接続先や当たり判定は箱のままにする
-          return dy === undefined ? (
-            <g key={node.id}>{view}</g>
-          ) : (
-            <g key={node.id} transform={`translate(0, ${dy})`}>{view}</g>
-          );
+          return <g key={node.id}>{view}</g>;
         })}
 
         {/* 経由 node 貫通する dotted-flow edge の進行点 glow (3rd pass) */}