@cardenelabs/dragon 0.30.0 → 0.32.0

package/src/compile/stages.ts

@@ -0,0 +1,247 @@
+import type { DslActor, DslDocument, DslStep } from "../types";
+import { 縦列ごとの段を決める } from "./lanes";
+import { slugify } from "./slug";
+import { 分かれ道の札, 泳法図で印をどう描く } from "./swimlane-marks";
+
+/**
+ * 段の箱 (`shape: stages`, #2797 / #2831) の配置規則。
+ *
+ * 段階ごとに同じ上端と高さの列を 1 本作り、列の見出しに「段階 N」と段階の名前を出す。
+ * 箱は列の中へ書いた順に積む札にし、担当 (`lane`) は札の右の小さな字として添える。
+ * 列の面・見出し・札の右の字は描く側 (`lane.stage` と `card` の `subtitle`) が描く。
+ */
+
+/**
+ * 段階の列 1 本の幅。描く側は列の面をこの幅から列の間の 48 を引いた幅で描く。
+ * 幅 332 の列の面に対して、札の左右へ内側の余白を 32 ずつ残す。
+ */
+export const STAGE_LANE_WIDTH = 380;
+
+/**
+ * 札の幅。見本は列の面の内側を 24 ずつ空けるが、幅 284 では列の間 (48) に置く
+ * 「いいえ」の札と札の右端が近づき、描く側が衝突を避けて札を列の下端より下へ押し出す。
+ * 幅 270 でも押し出されるため 268 とし、列の間を描く側が広げずに済めば cardene777/cdl#1035 で 24 に寄せる。
+ */
+export const STAGE_CARD_WIDTH = STAGE_LANE_WIDTH - 112;
+
+/** `stageLayout.columnWidths` を書いた列では、見本どおり列面の左右を 24 ずつ空ける。 */
+export const STAGE_CARD_COLUMN_INSET = 48;
+
+/** 札の高さ。名前 1 行と右の担当を同じ行に置く札で、見本の札と同じく 1 行分に収める。 */
+export const STAGE_CARD_HEIGHT = 48;
+
+/** cdl の列面の間 48 に足し、見本の列面の間 64 にする lane の間。 */
+export const STAGE_LANE_GAP = 16;
+
+/** 列の上端 130 から見本の 1 段目の中心 324 までを world 座標に直した値。 */
+export const STAGE_FIRST_CARD_CENTER_Y = 222;
+
+/** 描画側の自動配置と同じ、高さ 48 の札と次の札の間 100。 */
+export const STAGE_CARD_PITCH = 148;
+
+/** cdl の自動 lane と同じ上端。列を固定して先頭の余白を保つため使う。 */
+export const STAGE_LANE_Y = 28;
+
+export type StageColumn = {
+  id: string;
+  /** 見出しの番号。描く側が「段階 N」の形で出す */
+  number: string;
+  name: string;
+};
+
+export type StageCard = {
+  columnId: string;
+  /** 左から数えた列の位置 (0 始まり)。線を曲線にするか戻り線にするかの判定に使う */
+  column: number;
+  stack: number;
+  /** 札の右へ出す字。担当の名前か、分かれ道の札 */
+  subtitle?: string;
+};
+
+export type StagesPlacement = {
+  columns: StageColumn[];
+  /** 箱の名前ごとの札 */
+  cards: ReadonlyMap<string, StageCard>;
+};
+
+/** 段階を書かない箱は、担当、担当も無ければ箱の名前を段階に使う (#2797)。 */
+export function 段階名(actor: Pick<DslActor, "stage" | "lane" | "name">): string {
+  return actor.stage ?? actor.lane ?? actor.name;
+}
+
+/**
+ * 札の右に出す字。分かれ道は「分かれ道」、それ以外は担当の名前を出す。
+ *
+ * 担当の名前が段階の名前と同じ時は出さない。段階を書かない箱は担当を段階に使うため、
+ * 出すと見出しと同じ字が札の右にもう 1 度並ぶ。
+ */
+function 札の右の字(
+  doc: Pick<DslDocument, "type" | "shape" | "lanes">,
+  actor: DslActor,
+  stage: string,
+): string | undefined {
+  if (泳法図で印をどう描く(doc, actor) === "札") return 分かれ道の札;
+  if (actor.lane === undefined) return undefined;
+  const 担当 = doc.lanes?.[actor.lane]?.label ?? actor.lane;
+  return 担当 === stage ? undefined : 担当;
+}
+
+/**
+ * 段を書かない列で、列の札をどの段から積むかを決める。
+ *
+ * 左の列から入る線のうち、札と同じ段から出る線が最も多くなる位置を選ぶ。
+ * 同じ段から入る線は列をまたいでも真横に走るため、見本と同じく曲げずに読める。
+ * 揃う本数が同じなら、図の一番下の段を下げない位置、その中でも上の位置を選ぶ。
+ */
+function 積み始める段(
+  札たち: readonly DslActor[],
+  flow: DslDocument["flow"],
+  左の列の段: ReadonlyMap<string, number>,
+  これまでの最下段: number,
+): number {
+  const 列の中の順 = new Map(札たち.map((actor, index) => [actor.name, index]));
+  const 揃う本数 = new Map<number, number>();
+  for (const step of flow) {
+    const index = 列の中の順.get(step.to);
+    const 出る段 = 左の列の段.get(step.from);
+    if (index === undefined || 出る段 === undefined || 出る段 < index) continue;
+    const 始め = 出る段 - index;
+    揃う本数.set(始め, (揃う本数.get(始め) ?? 0) + 1);
+  }
+  const 最下段 = (始め: number): number => Math.max(これまでの最下段, 始め + 札たち.length - 1);
+  let 選んだ = 0;
+  for (const [始め, 本数] of 揃う本数) {
+    const 今の本数 = 揃う本数.get(選んだ) ?? 0;
+    if (本数 < 今の本数) continue;
+    if (本数 === 今の本数) {
+      if (最下段(始め) > 最下段(選んだ)) continue;
+      if (最下段(始め) === 最下段(選んだ) && 始め >= 選んだ) continue;
+    }
+    選んだ = 始め;
+  }
+  return 選んだ;
+}
+
+/**
+ * 段の箱の列と札を決める。
+ *
+ * 列は段階が箱に最初に現れた順に左から並べる。札は列の中で書いた順に下へ積み、
+ * 段を書いた札がある列だけは書いた段をそのまま使う (空いた段へ書かない札を置く)。
+ * 段を書かない列は、左の列から真横に入れる段から積む (`積み始める段`)。
+ */
+export function placeStages(
+  doc: Pick<DslDocument, "type" | "shape" | "actors" | "flow" | "lanes">,
+): StagesPlacement {
+  const 段階たち: string[] = [];
+  for (const actor of doc.actors) {
+    const stage = 段階名(actor);
+    if (!段階たち.includes(stage)) 段階たち.push(stage);
+  }
+
+  const 使ったid = new Set<string>();
+  const columns = 段階たち.map((stage, index): StageColumn => {
+    const base = `stage-${slugify(stage) || index}`;
+    let id = base;
+    let suffix = 2;
+    while (使ったid.has(id)) id = `${base}-${suffix++}`;
+    使ったid.add(id);
+    return { id, number: String(index + 1), name: stage };
+  });
+
+  const cards = new Map<string, StageCard>();
+  const 置いた段 = new Map<string, number>();
+  let これまでの最下段 = -1;
+  for (const [column, stage] of 段階たち.entries()) {
+    const 札たち = doc.actors.filter((actor) => 段階名(actor) === stage);
+    const 書いた段 = 札たち.some((actor) => actor.stack !== undefined)
+      ? 縦列ごとの段を決める(札たち, () => stage)
+      : undefined;
+    const 始め = 書いた段 === undefined
+      ? 積み始める段(札たち, doc.flow, 置いた段, これまでの最下段)
+      : 0;
+    for (const [index, actor] of 札たち.entries()) {
+      const stack = 書いた段?.get(actor) ?? 始め + index;
+      const subtitle = 札の右の字(doc, actor, stage);
+      cards.set(actor.name, {
+        columnId: columns[column]!.id,
+        column,
+        stack,
+        ...(subtitle === undefined ? {} : { subtitle }),
+      });
+      これまでの最下段 = Math.max(これまでの最下段, stack);
+    }
+    for (const actor of 札たち) 置いた段.set(actor.name, cards.get(actor.name)!.stack);
+  }
+  return { columns, cards };
+}
+
+/**
+ * 段の箱の線の通し方。
+ *
+ * 右の列へ進む線は曲線 (`curve`) で列の間を渡す。左の列や同じ列の上の札へ戻る線は
+ * 列の見出しより上を回る戻り線 (`back-detour`) にする。同じ列で下の札へ進む線は
+ * 描く側の既定 (真下へ下ろす直線) のまま返さない。
+ */
+export function 段の箱の線の通し方(
+  placement: StagesPlacement,
+  from: string,
+  to: string,
+): "curve" | "back-detour" | undefined {
+  const 出る札 = placement.cards.get(from);
+  const 入る札 = placement.cards.get(to);
+  if (出る札 === undefined || 入る札 === undefined) return undefined;
+  if (出る札.column < 入る札.column) return "curve";
+  if (出る札.column > 入る札.column) return "back-detour";
+  return 入る札.stack < 出る札.stack ? "back-detour" : undefined;
+}
+
+/**
+ * 描く側が線の札を描く高さ。字 1 行の札は 36、補足 (`sub`) を持つ札は 68 で描く
+ * (`@cardenelabs/cdl` の `LABEL_PILL_H_MAIN_ONLY` / `LABEL_PILL_H_WITH_SUB`、公開されていない)。
+ * 描く側が値を変えたら、ここも合わせる。
+ */
+const 線の札の高さ = (sub: string | undefined): number => ((sub ?? "") === "" ? 40 : 68);
+
+/**
+ * 真横に渡る線と札の上端の間。見本の「いいえ」は線のすぐ下に札を置く。
+ *
+ * 描く側が線と札の間に求める最小の間 (`LABEL_TO_PATH_CLEARANCE` = 16) と同じにする。
+ * これより詰めると、描く側が札を線から押し出して列の下端より下へ逃がす。
+ */
+const 札を線の下に置く間 = 16;
+
+/**
+ * 段の箱の線に渡す指定。通し方 (`段の箱の線の通し方`) と、札の置き場所を返す。
+ *
+ * 列をまたぐ線と戻り線の札は線の上に重ねる (`overlay`)。見本は「はい」を曲線の上に、
+ * 「翌日もう一度」を戻り線の上に置く。
+ *
+ * 同じ段の札へ真横に渡る線だけは、札を線のすぐ下へずらす (見本の「いいえ」)。描く側は
+ * 札を線から離して置き、同じ分かれ道から出る曲線の札と重ならない側へ逃がすため、
+ * 何もしないと札が列の下端より下へ出る。書いた `overlay` / `labelOffsetY` は後段で上書きされる。
+ */
+export function 段の箱の線の指定(
+  placement: StagesPlacement,
+  step: Pick<DslStep, "from" | "to" | "label" | "sub">,
+): {
+  routing?: "curve" | "back-detour";
+  overlay?: true;
+  labelOffsetY?: number;
+  fromSide?: "right";
+  toSide?: "top";
+} {
+  const routing = 段の箱の線の通し方(placement, step.from, step.to);
+  const 札がある = step.label !== "" || (step.sub ?? "") !== "";
+  if (routing === undefined) return {};
+  const 戻る辺 = routing === "back-detour" ? { fromSide: "right" as const, toSide: "top" as const } : {};
+  if (!札がある) return { routing, ...戻る辺 };
+  const 真横 =
+    routing === "curve" &&
+    placement.cards.get(step.from)?.stack === placement.cards.get(step.to)?.stack;
+  return {
+    routing,
+    ...戻る辺,
+    overlay: true,
+    ...(真横 ? { labelOffsetY: 線の札の高さ(step.sub) / 2 + 札を線の下に置く間 } : {}),
+  };
+}

package/src/compile/subtitle.ts

@@ -11,8 +11,21 @@ import type { DslDocument } from "../types";
  * 書かなければ何も渡さない = 従来どおり小見出しは付かない。 `undefined` を明示して渡すと、
  * 組立て側が「空の小見出しを書いた」 と区別できなくなるので、 項目ごと落とす。
  */
-export function 図の小見出し(doc: DslDocument): { eyebrow?: string } {
-  return doc.eyebrow === undefined ? {} : { eyebrow: doc.eyebrow };
+export function 図の小見出し(
+  doc: DslDocument,
+): {
+  eyebrow?: string;
+  figureCard?: NonNullable<DslDocument["figureCard"]>;
+  cornerForm?: NonNullable<DslDocument["cornerForm"]>;
+  figureInset?: NonNullable<DslDocument["figureInset"]>;
+} {
+  const figureInset = doc.figureInset === undefined ? undefined : { ...doc.figureInset };
+  return {
+    ...(doc.eyebrow === undefined ? {} : { eyebrow: doc.eyebrow }),
+    ...(doc.figureCard === undefined ? {} : { figureCard: doc.figureCard }),
+    ...(doc.cornerForm === undefined ? {} : { cornerForm: doc.cornerForm }),
+    ...(figureInset === undefined ? {} : { figureInset }),
+  };
 }
 
 /** 知らせに載せる値を短く切る。 長い URL をそのまま出すと画面の帯が読めなくなる */

package/src/compile/swimlane-marks.ts

@@ -0,0 +1,87 @@
+import { SWIMLANE_SHAPES, type DslSwimlaneShape } from "../keywords";
+import type { DslActor, DslDocument, DslStep } from "../types";
+
+const 泳法図の印 = ["decision", "mark-start", "mark-end"] as const;
+type 泳法図の印 = (typeof 泳法図の印)[number];
+
+export type 泳法図の印の描き方 = "描く" | "札" | "省く";
+
+/** 段の箱で、分かれ道を普通の箱に添えて見分ける字。 */
+export const 分かれ道の札 = "分かれ道";
+
+/** 泳法図の形と印ごとに、描画側へ渡す形を決める表。 */
+export const 泳法図の印の描き方: Record<
+  DslSwimlaneShape,
+  Record<泳法図の印, 泳法図の印の描き方>
+> = {
+  stages: {
+    decision: "札",
+    "mark-start": "省く",
+    "mark-end": "省く",
+  },
+  metro: {
+    decision: "描く",
+    "mark-start": "描く",
+    "mark-end": "描く",
+  },
+  timeline: {
+    decision: "描く",
+    "mark-start": "省く",
+    "mark-end": "描く",
+  },
+};
+
+/** 泳法図の3形で印をどう描くかを返し、それ以外の図と種類では返さない。 */
+export function 泳法図で印をどう描く(
+  doc: Pick<DslDocument, "type" | "shape">,
+  actor: Pick<DslActor, "kind">,
+): 泳法図の印の描き方 | undefined {
+  if (doc.type !== "swimlane") return undefined;
+  if (!(SWIMLANE_SHAPES as readonly string[]).includes(doc.shape ?? "")) return undefined;
+  if (!(泳法図の印 as readonly string[]).includes(actor.kind)) return undefined;
+  return 泳法図の印の描き方[doc.shape as DslSwimlaneShape][actor.kind as 泳法図の印];
+}
+
+/**
+ * 省く印を本文から外し、その印へ入る線と出る線を直接結ぶ。
+ *
+ * 繋いだ線は入る線の行と指定を保つ。説明だけは入る線が空なら出る線から受け継ぎ、
+ * 後段が元の行から色や線種を写せるようにする。
+ */
+export function 省く泳法図の印を外す(doc: DslDocument): DslDocument {
+  const 省く印 = doc.actors.filter((actor) => 泳法図で印をどう描く(doc, actor) === "省く");
+  if (省く印.length === 0) return doc;
+
+  let actors = doc.actors;
+  let flow = doc.flow;
+  for (const mark of 省く印) {
+    const 出る線 = flow.filter((step) => step.from === mark.name && step.to !== mark.name);
+    const 既に在る組 = new Set(
+      flow
+        .filter((step) => step.from !== mark.name && step.to !== mark.name)
+        .map((step) => `${step.from}\u0000${step.to}`),
+    );
+    const 繋ぎ直した: DslStep[] = [];
+    for (const step of flow) {
+      if (step.from !== mark.name && step.to !== mark.name) {
+        繋ぎ直した.push(step);
+        continue;
+      }
+      if (step.to !== mark.name || step.from === mark.name) continue;
+      for (const next of 出る線) {
+        if (step.from === next.to) continue;
+        const 組 = `${step.from}\u0000${next.to}`;
+        if (既に在る組.has(組)) continue;
+        既に在る組.add(組);
+        繋ぎ直した.push({
+          ...step,
+          to: next.to,
+          label: step.label === "" ? next.label : step.label,
+        });
+      }
+    }
+    actors = actors.filter((actor) => actor !== mark);
+    flow = 繋ぎ直した;
+  }
+  return { ...doc, actors, flow };
+}

package/src/compile/swimlane.ts

@@ -1,22 +1,24 @@
 import { swimlane } from "@cardenelabs/cdl";
 import type { CdlDiagram } from "@cardenelabs/cdl";
 import type { DslDocument } from "../types";
-import { compileGenericWithAnimate } from "./generic";
+import { compileGenericWithAnimate, 共通の組み立てへ回す } from "./generic";
 import { 描ける種別 } from "./kinds";
-import { 書いた縦列に置く } from "./lanes";
 import { 箱の題 } from "./node-title";
 import { slugify } from "./slug";
+import { STAGE_LANE_WIDTH } from "./stages";
 export function compileSwimlane(doc: DslDocument): CdlDiagram {
-  // v0.4 ... animation あり時 builder 直接経路 (各 actor 別 lane で配置)
-  // **縦列を書いた形は動きの有無に関わらず generic 経路へ** (#1263)。 動く図だけで効かせると、
-  // 同じ記法でも静止図では指定が黙って消える (実測 = 縦列 3 本のはずが 1 本になり知らせも出ない)
-  // **向きを書いた形も generic 経路へ** (#1494)。 静止図の経路は並びを固定で持つので、
+  // 形を指定した泳法図は動き・縦列・向きの有無で経路を分けない (#2797 / #2799)。
+  // 段の箱の列と札の決め方は `compile/stages.ts` が持つ (#2831)。
+  if (doc.shape === "stages" || doc.shape === "metro" || doc.shape === "timeline") {
+    return compileGenericWithAnimate(doc, {
+      kind: "swimlane",
+      laneWidth: doc.shape === "stages" ? STAGE_LANE_WIDTH : 400,
+    });
+  }
+  // 動きを書いた形と縦列を書いた形は共通の組み立てへ (#1263 / #2348 で 1 箇所にまとめた)。
+  // **向きを書いた形も** (#1494)。 静止図の経路は並びを固定で持つので、
   // ここを通さないと書いた向きが黙って消える (縦列を書いた形と同じ理由)
-  if (
-    (doc.animate && doc.animate.phases.length > 0) ||
-    書いた縦列に置く("swimlane", doc) ||
-    doc.direction !== undefined
-  ) {
+  if (共通の組み立てへ回す("swimlane", doc, doc.direction !== undefined)) {
     return compileGenericWithAnimate(doc, { kind: "swimlane", laneWidth: 400 });
   }
   // swimlane preset は lane 配置 + 自由 node/edge。
@@ -55,9 +57,6 @@ export function compileSwimlane(doc: DslDocument): CdlDiagram {
       label: s.label,
       ...(s.sub ? { sub: s.sub } : {}),
       ...(s.side ? { side: s.side } : {}),
-
-      ...(s.tone ? { tone: s.tone } : {}),
-      ...(s.style ? { style: s.style } : {}),
     });
   }
 

package/src/compile/timeline.ts

@@ -0,0 +1,213 @@
+import type { DslDocument } from "../types";
+import { slugify } from "./slug";
+
+/** 見本の札と同じ横長の比率にする。 */
+export const TIMELINE_CARD_WIDTH = 420;
+export const TIMELINE_CARD_HEIGHT = 56;
+
+/** 分かれ道の脇に置く札は、見本どおり通常の札より少し短くする。 */
+export const TIMELINE_SIDE_CARD_WIDTH = 380;
+
+/** 描く側の `timeline-number` が半径 24・縁 4 の丸を描く大きさ。 */
+export const TIMELINE_NUMBER_SIZE = 52;
+
+/** 描く側が四辺を 8 内側へ縮めるため、実描画を見本の 124 x 92 にする大きさ。 */
+export const TIMELINE_DECISION_WIDTH = 140;
+export const TIMELINE_DECISION_HEIGHT = 108;
+
+/** 軸の lane は、軸上で最も広い菱形をはみ出させない幅にする。 */
+export const TIMELINE_AXIS_WIDTH = TIMELINE_DECISION_WIDTH;
+
+/**
+ * 描く側は終わりの印を短辺いっぱいに描き、輪の太さの半分だけ半径を縮める。
+ * `80 x 42` なら node-visibility の下限 80 x 40 を保ち、外輪の半径が 19 になる。
+ */
+export const TIMELINE_END_WIDTH = 80;
+export const TIMELINE_END_HEIGHT = 42;
+
+/**
+ * 軸から通常の札の内側までの距離。
+ * 見本と 7 意匠の実測に合わせ、札の内側を軸の中心から 70 離す。
+ */
+export const TIMELINE_AXIS_TO_CARD = 70;
+
+/** 正解頁の軸 x=800 と「持ち戻る」の左辺 x=1020 から測った距離。 */
+export const TIMELINE_AXIS_TO_SIDE_CARD = 220;
+
+/** 見本どおり、番号の段を 125 ずつ進める。 */
+export const TIMELINE_STEP_GAP = 125;
+
+/** 7 意匠とも前後の和が 285 なので、CSS で意匠を替える見本帳へ届く一つの値を使う。 */
+export const TIMELINE_DECISION_GAP = 142.5;
+
+/** 見本どおり、最後の番号から終わりの印まで 105 空ける。 */
+export const TIMELINE_END_GAP = 105;
+
+/** 軸の左右の札と、戻る線の折れ曲がりを図の中へ収める余白。 */
+const TIMELINE_SIDE_MARGIN = 160;
+
+const AXIS_X = TIMELINE_SIDE_MARGIN + TIMELINE_CARD_WIDTH + TIMELINE_AXIS_TO_CARD;
+
+/** 最初の札と番号の上側を図の中へ収める中心 y。 */
+const FIRST_STEP_Y = 60;
+
+const TIMELINE_WIDTH = AXIS_X * 2;
+
+export type TimelineEdgeKind = "advance" | "back" | "branch";
+
+export type TimelineStep = {
+  cardId: string;
+  numberId?: string;
+  cardX: number;
+  cardWidth: number;
+  stage: number;
+  y: number;
+};
+
+export type TimelinePlacement = {
+  axisX: number;
+  axisHeight: number;
+  width: number;
+  stepsHeight: number;
+  steps: TimelineStep[];
+};
+
+/** 見た目の段の差で、進行線・戻り線・分かれ道を分ける。 */
+export function classifyTimelineEdge(fromStage: number, toStage: number): TimelineEdgeKind {
+  if (toStage === fromStage + 1) return "advance";
+  if (toStage < fromStage) return "back";
+  return "branch";
+}
+
+/**
+ * 分かれ道だけから入る普通の段のうち、分かれ道の直後に書かれていない段を脇の札にする。
+ * 省く印は呼び出し前に除かれるため、配列の直前が「書いた順で次」の判定になる。
+ */
+function timelineSideCards(doc: Pick<DslDocument, "actors" | "flow">): Map<string, string> {
+  const actorsByName = new Map(doc.actors.map((actor) => [actor.name, actor]));
+  const sideCards = new Map<string, string>();
+  doc.actors.forEach((actor, index) => {
+    if (actor.kind === "decision" || actor.kind === "mark-end") return;
+    const incoming = doc.flow.filter((edge) => edge.to === actor.name);
+    if (incoming.length === 0) return;
+    if (!incoming.every((edge) => actorsByName.get(edge.from)?.kind === "decision")) return;
+    if (doc.actors[index - 1]?.kind === "decision") return;
+    const firstIncoming = incoming[0];
+    if (firstIncoming === undefined) return;
+    sideCards.set(actor.name, firstIncoming.from);
+  });
+  return sideCards;
+}
+
+function gapBefore(kind: string | undefined): number {
+  if (kind === "decision") return TIMELINE_DECISION_GAP;
+  if (kind === "mark-end") return TIMELINE_END_GAP;
+  return TIMELINE_STEP_GAP;
+}
+
+/** 時間軸の絶対座標と、札に重ならない番号 id を返す。 */
+export function placeTimeline(
+  doc: Pick<DslDocument, "actors" | "flow">,
+  軸に置く段: ReadonlySet<string> = new Set(),
+): TimelinePlacement {
+  const sideCardSource = timelineSideCards(doc);
+  const cardIds = doc.actors.map((actor, index) => slugify(actor.name) || `n${index}`);
+  const usedIds = new Set(cardIds);
+  const stageByName = new Map<string, number>();
+  const yByName = new Map<string, number>();
+  let stage = -1;
+  let y = FIRST_STEP_Y;
+  let previousKind: string | undefined;
+
+  for (const actor of doc.actors) {
+    const source = sideCardSource.get(actor.name);
+    if (source !== undefined) {
+      const sourceStage = stageByName.get(source);
+      const sourceY = yByName.get(source);
+      if (sourceStage === undefined || sourceY === undefined) {
+        throw new Error(`時間軸の脇の札 "${actor.name}" の分かれ道 "${source}" がありません`);
+      }
+      stageByName.set(actor.name, sourceStage);
+      yByName.set(actor.name, sourceY);
+      continue;
+    }
+    stage += 1;
+    if (stage > 0) {
+      y += previousKind === "decision" ? TIMELINE_DECISION_GAP : gapBefore(actor.kind);
+    }
+    stageByName.set(actor.name, stage);
+    yByName.set(actor.name, y);
+    previousKind = actor.kind;
+  }
+
+  const cardSideByName = new Map<string, "left" | "right">();
+  doc.actors
+    .map((actor, index) => ({ actor, index, y: yByName.get(actor.name) ?? FIRST_STEP_Y }))
+    .filter(({ actor }) => !軸に置く段.has(actor.name))
+    .sort((a, b) => a.y - b.y || a.index - b.index)
+    .forEach(({ actor }, index) => cardSideByName.set(actor.name, index % 2 === 0 ? "left" : "right"));
+
+  const cardLayoutByName = new Map<string, { centerX: number; width: number }>();
+  for (const actor of doc.actors) {
+    const sideCard = sideCardSource.has(actor.name);
+    const width = sideCard ? TIMELINE_SIDE_CARD_WIDTH : TIMELINE_CARD_WIDTH;
+    const axisToCard = sideCard ? TIMELINE_AXIS_TO_SIDE_CARD : TIMELINE_AXIS_TO_CARD;
+    const side = cardSideByName.get(actor.name) ?? "left";
+    cardLayoutByName.set(actor.name, {
+      centerX: side === "left"
+        ? AXIS_X - axisToCard - width / 2
+        : AXIS_X + axisToCard + width / 2,
+      width,
+    });
+  }
+
+  for (const actor of doc.actors) {
+    if (!sideCardSource.has(actor.name)) continue;
+    const source = cardLayoutByName.get(actor.name);
+    const sourceStage = stageByName.get(actor.name);
+    if (source === undefined || sourceStage === undefined) continue;
+    for (const edge of doc.flow.filter((item) => item.from === actor.name)) {
+      const target = cardLayoutByName.get(edge.to);
+      const targetStage = stageByName.get(edge.to);
+      if (target === undefined || targetStage === undefined || targetStage >= sourceStage) continue;
+      const targetLeft = target.centerX - target.width / 2;
+      const targetRight = target.centerX + target.width / 2;
+      if (source.centerX < targetLeft || source.centerX > targetRight) continue;
+      /*
+       * cardene777/cdl#1031: `back-detour` は札の上辺の中点どうしを結び、
+       * 両端の札を障害物に数えない。右側の脇札も線札の clearance を保つ位置へ置く。
+       */
+      source.centerX = AXIS_X + TIMELINE_AXIS_TO_SIDE_CARD + source.width / 2;
+    }
+  }
+
+  let 次の番号 = 1;
+  const steps = doc.actors.map((actor, index): TimelineStep => {
+    const sideCard = sideCardSource.has(actor.name);
+    const 番号 = 軸に置く段.has(actor.name) || sideCard ? undefined : 次の番号++;
+    const base = 番号 === undefined ? undefined : `timeline-number-${番号}`;
+    let numberId = base;
+    let suffix = 2;
+    while (numberId !== undefined && usedIds.has(numberId)) numberId = `${base}-${suffix++}`;
+    if (numberId !== undefined) usedIds.add(numberId);
+    const cardLayout = cardLayoutByName.get(actor.name);
+    if (cardLayout === undefined) throw new Error(`時間軸の札 "${actor.name}" の配置がありません`);
+    return {
+      cardId: cardIds[index]!,
+      numberId,
+      cardX: cardLayout.centerX,
+      cardWidth: cardLayout.width,
+      stage: stageByName.get(actor.name) ?? index,
+      y: yByName.get(actor.name) ?? FIRST_STEP_Y,
+    };
+  });
+  const lastY = Math.max(FIRST_STEP_Y, ...steps.map((step) => step.y));
+  const rightEdge = Math.max(...steps.map((step) => step.cardX + step.cardWidth / 2));
+  return {
+    axisX: AXIS_X,
+    axisHeight: lastY + TIMELINE_END_HEIGHT / 2,
+    width: Math.max(TIMELINE_WIDTH, rightEdge + TIMELINE_SIDE_MARGIN),
+    stepsHeight: lastY + TIMELINE_CARD_HEIGHT / 2 + TIMELINE_SIDE_MARGIN,
+    steps,
+  };
+}

package/src/compile/topology.ts

@@ -3,17 +3,14 @@ import { 箱の題 } from "./node-title";
 import type { CdlDiagram } from "@cardenelabs/cdl";
 import type { DslDocument } from "../types";
 
-import { compileGenericWithAnimate } from "./generic";
+import { compileGenericWithAnimate, 共通の組み立てへ回す } from "./generic";
 import { 描ける種別 } from "./kinds";
-import { 書いた縦列に置く } from "./lanes";
 
 import { slugify } from "./slug";
 
 export function compileTopology(doc: DslDocument): CdlDiagram {
-  // v0.4 ... animation あり時 builder 直接経路 (各 actor を別 lane に)
-  // **縦列を書いた形は動きの有無に関わらず generic 経路へ** (#1263)。 動く図だけで効かせると、
-  // 同じ記法でも静止図では指定が黙って消える (実測 = 縦列 3 本のはずが 1 本になり知らせも出ない)
-  if ((doc.animate && doc.animate.phases.length > 0) || 書いた縦列に置く("topology", doc)) {
+  // 動きを書いた形と縦列を書いた形は共通の組み立てへ (#1263 / #2348 で 1 箇所にまとめた)
+  if (共通の組み立てへ回す("topology", doc)) {
     return compileGenericWithAnimate(doc, { kind: "topology", laneWidth: 460 });
   }
   // 登場人物が 0 人なら枠も作らない。 描画側の `topology()` は枠を必ず 1 つ作るため、 そのまま
@@ -41,9 +38,6 @@ export function compileTopology(doc: DslDocument): CdlDiagram {
       label: s.label,
       ...(s.sub ? { sub: s.sub } : {}),
       ...(s.side ? { side: s.side } : {}),
-
-      ...(s.tone ? { tone: s.tone } : {}),
-      ...(s.style ? { style: s.style } : {}),
     });
   }
   return topo.build();