@cardenelabs/cdl 0.13.1 → 0.15.0

package/src/layout/self-loop.ts

@@ -0,0 +1,217 @@
+import type { CdlEdge, LaidEdge, LaidNode, Side } from "../types";
+import { CLEARANCE_LABEL_LABEL } from "./clearance-constants";
+import { computeLabelBoxW, LABEL_TO_PATH_CLEARANCE, labelPillH } from "./spec";
+
+/**
+ * 自分から自分へ戻る関係の経路 (#560)。
+ *
+ * 状態遷移図の自己遷移 (催促する)、シーケンス図の自分宛て (控えを書く)、ER の自己関係
+ * (REPORTS TO) の 3 図が使う。 それまで `validate` が弾いていた。
+ *
+ * 形は **箱の 1 辺から出て、外へ膨らんで、同じ辺へ戻る** 三次曲線 1 本。 折れ線ではなく
+ * 曲線にしたのは、線の傾きを見る検査 (軸 13) が曲線を対象外にしているのと同じ理由で、
+ * 輪の途中の傾きに意味が無いため。 折れ線で描くと「L 字が破綻している」 と読まれる。
+ */
+
+/** 輪が辺から外へ届く距離 (world)。 制御点ではなく、曲線が実際に到達する距離 */
+export const SELF_LOOP_OUT = 72;
+
+/** 出口と入口の間隔 (world)。 辺のどれだけを使うか */
+export const SELF_LOOP_SPAN = 64;
+
+/**
+ * 同じ節に輪が 2 本以上ある時、 2 本目以降を外へずらす幅 (world)。
+ *
+ * `SELF_LOOP_OUT` と揃えて **3 の倍数** にしてある。 制御点の位置は 3 分の 4 倍で求めるので、
+ * 3 の倍数でないと座標が割り切れず、小数点の混じった座標を検査 (軸 33) が拾う。
+ */
+export const SELF_LOOP_STAGGER = 45;
+
+/**
+ * 書かなかった時にどちら側へ出すかを探す順。
+ *
+ * 節は縦に積むので、上下は前後の節との線が先に使う。 右を最初に見る。
+ *
+ * **他の線が使っている辺は避ける**。 同じ辺に出すと 2 つ壊れる = 横へ抜ける線が輪の内側を
+ * 通って重なり、その線の起点と輪の起点が別の高さになって「1 つの節から出ていない」 ように
+ * 見える (検査の軸 2 と軸 61 が両方鳴る、実測した)。 輪は終点を辺の中央付近に置く必要が
+ * あるので (軸 63)、同じ辺の中で高さをずらして避けることはできない。
+ */
+export const SELF_LOOP_SIDE_ORDER: readonly Side[] = ["right", "top", "left", "bottom"];
+
+/** どの辺も塞がっている時に使う辺。 避けきれないので、少なくとも同じ場所に落とす */
+export const SELF_LOOP_SIDE_FALLBACK: Side = "right";
+
+/**
+ * 三次曲線の制御点を辺からどれだけ離すか、を決める比。
+ *
+ * 両端が辺の上にあり、制御点を 2 つとも同じだけ外へ置いた三次曲線は、真ん中 (t=0.5) で
+ * 制御点の **4 分の 3** までしか届かない。 届かせたい距離から逆算する。
+ *
+ * 係数を式で持つのは、`SELF_LOOP_OUT` を変えた時に輪の実寸と語の置き場所が一緒に動く
+ * 必要があるため。 書き写すと片方だけ動いて語が輪の中に入る。
+ */
+export const CUBIC_APEX_RATIO = 0.75;
+
+/** 終点が辺の中央から離れてよい上限を決める余白。 軸 63 の判定と同じ値 */
+const ENDPOINT_CENTER_MARGIN = 8;
+
+/** 出口と入口が重なって輪が線 1 本に潰れない最小の間隔 */
+const SPAN_MIN = 8;
+
+function controlOffset(out: number): number {
+  return out / CUBIC_APEX_RATIO;
+}
+
+/** 辺の中心と、その辺の外向き */
+function sideGeometry(n: LaidNode, side: Side): { x: number; y: number; ux: number; uy: number } {
+  switch (side) {
+    case "right":
+      return { x: n.cx + n.w / 2, y: n.cy, ux: 1, uy: 0 };
+    case "left":
+      return { x: n.cx - n.w / 2, y: n.cy, ux: -1, uy: 0 };
+    case "top":
+      return { x: n.cx, y: n.cy - n.h / 2, ux: 0, uy: -1 };
+    case "bottom":
+      return { x: n.cx, y: n.cy + n.h / 2, ux: 0, uy: 1 };
+  }
+}
+
+/**
+ * 出口と入口の間隔を、その辺に収まる範囲へ丸める。
+ *
+ * 終点が辺の中央から離れすぎると軸 63 (`arrow-endpoint-center`) が「角に刺さっている」 と
+ * 判定する。 判定の境目は辺の半分から 8 を引いた値なので、そこへ収まるまで縮める。
+ * 縮めても最小値は残す = 0 にすると出口と入口が重なって輪が潰れる。
+ */
+export function fitSpan(sideLength: number, wanted: number): number {
+  const 限度 = sideLength - 2 * ENDPOINT_CENTER_MARGIN;
+  return Math.max(SPAN_MIN, Math.min(wanted, 限度));
+}
+
+/**
+ * 1 つの節にある輪 `count` 本に、他の線が使っていない辺を **1 本ずつ配る**。
+ *
+ * 「使っている」 は `occupied` が持つ = 呼出側が、輪でない辺の起点側と終点側の両方を入れる。
+ * 入れ忘れると輪がその線の上に重なるので、呼出側は 2 経路 (自動で引く線と、座標を固定した線)
+ * のどちらも入れる。
+ *
+ * **1 辺に 2 本まとめない**。 同じ辺に重ねると輪が入れ子になり、内側の輪の語を外側の輪の
+ * 外へ出さざるをえない = 語が自分の線から遠のく (検査の軸 7 が「どの線の語か読めない」 と
+ * 判定する。 実測で 3 本を入れ子にすると一番内側が 160 離れて error になった)。
+ *
+ * 空いている辺より輪が多い時だけ、余った分を先頭の辺へ戻して重ねる。 そこは重なる形しか
+ * 残っていないので、少なくとも同じ場所に集める。
+ */
+export function pickFreeSides(occupied: ReadonlySet<Side> | undefined, count: number): Side[] {
+  const 空き = SELF_LOOP_SIDE_ORDER.filter((s) => !occupied?.has(s));
+  const 使う = 空き.length > 0 ? 空き : [SELF_LOOP_SIDE_FALLBACK];
+  return Array.from({ length: count }, (_, i) => 使う[i % 使う.length]!);
+}
+
+/**
+ * 同じ節・同じ辺の輪をまとめて経路にする。
+ *
+ * **語は輪の外 (膨らんだ先) に置く**。 輪の上に載せると曲線が語で隠れ、どちら回りかが読めない。
+ *
+ * 2 本以上ある時、輪は入れ子になる = 内側の輪の外は、外側の輪の **内側** にある。
+ * 輪ごとに「自分の外」 へ語を置くと、内側の語が外側の輪の上に載る。 語は全部
+ * **一番外の輪のさらに外** に揃えて置き、辺に沿って積んで語どうしの重なりを外す。
+ *
+ * 1 本だけの時は積む必要が無いので、辺の中央の真横に 1 つ置くだけになる。
+ */
+export function routeSelfLoopGroup(edges: CdlEdge[], node: LaidNode, side: Side): LaidEdge[] {
+  const horizontal = side === "left" || side === "right";
+  const g = sideGeometry(node, side);
+  const span = fitSpan(horizontal ? node.h : node.w, SELF_LOOP_SPAN);
+  const half = span / 2;
+  // 辺に沿った向き (出口 → 入口)。 横向きの辺なら上から下、縦向きの辺なら左から右
+  const 沿 = horizontal ? { x: 0, y: 1 } : { x: 1, y: 0 };
+
+  // 制御点は曲線より外にあるので、path から囲みを起こす検査は輪を実寸より大きく見る。
+  // 語はその外側に置く = 大きめに見た囲みとも重ならない
+  const 最外 = controlOffset(SELF_LOOP_OUT + (edges.length - 1) * SELF_LOOP_STAGGER);
+  const 語まで = 最外 + LABEL_TO_PATH_CLEARANCE;
+
+  // 積む向きの語の大きさ。 横の辺なら縦に積むので高さ、縦の辺なら横に積むので幅
+  const 語幅 = edges.map((e) =>
+    horizontal ? labelPillH(e.sub) : computeLabelBoxW(e.label, e.sub),
+  );
+  const 位置: number[] = [];
+  let 積 = 0;
+  for (const w of 語幅) {
+    位置.push(積 + w / 2);
+    積 += w + CLEARANCE_LABEL_LABEL;
+  }
+  const 全長 = Math.max(0, 積 - CLEARANCE_LABEL_LABEL);
+
+  return edges.map((edge, index) => {
+    const c = controlOffset(SELF_LOOP_OUT + index * SELF_LOOP_STAGGER);
+    const x1 = g.x - 沿.x * half;
+    const y1 = g.y - 沿.y * half;
+    const x2 = g.x + 沿.x * half;
+    const y2 = g.y + 沿.y * half;
+    const ずれ = 位置[index]! - 全長 / 2;
+    return {
+      ...edge,
+      d: `M ${x1} ${y1} C ${x1 + g.ux * c} ${y1 + g.uy * c} ${x2 + g.ux * c} ${y2 + g.uy * c} ${x2} ${y2}`,
+      fromSide: side,
+      toSide: side,
+      labelX: g.x + g.ux * 語まで + 沿.x * ずれ + (edge.labelOffsetX ?? 0),
+      labelY: g.y + g.uy * 語まで + 沿.y * ずれ + (edge.labelOffsetY ?? 0),
+      labelAnchor: side === "left" ? "end" : side === "right" ? "start" : "middle",
+    } satisfies LaidEdge;
+  });
+}
+
+/** その辺が自分から自分へ戻るか */
+export function isSelfLoop(e: { from: string; to: string }): boolean {
+  return e.from === e.to;
+}
+
+/**
+ * 図の中の輪をまとめて経路にする。
+ *
+ * 同じ節・同じ辺に 2 本以上あると重なるので、その並びの中の順番を渡して外へずらす。
+ * 節が見つからない辺は **落とさずに投げる** = 黙って消すと、書いたのに描かれない線になる。
+ *
+ * @param occupiedBySide 節ごとに、輪でない線が使っている辺。 これを渡さないと輪が既存の線に重なる
+ */
+export function layoutSelfLoops(
+  edges: CdlEdge[],
+  nodes: Map<string, LaidNode>,
+  occupiedBySide: ReadonlyMap<string, ReadonlySet<Side>>,
+): LaidEdge[] {
+  // 辺の割り当ては節ごとに 1 度で決める。 輪を 1 本ずつ処理して選び直すと、2 本目が
+  // 1 本目の辺を「空いている」 と見て同じ場所に重なる
+  const 割当 = new Map<string, Side[]>();
+  for (const edge of edges) {
+    if (edge.side) continue;
+    const list = 割当.get(edge.from) ?? [];
+    list.push("right");
+    割当.set(edge.from, list);
+  }
+  for (const [nodeId, list] of 割当) {
+    割当.set(nodeId, pickFreeSides(occupiedBySide.get(nodeId), list.length));
+  }
+  const 消費 = new Map<string, number>();
+
+  const 束 = new Map<string, { node: LaidNode; side: Side; edges: CdlEdge[] }>();
+  for (const edge of edges) {
+    const node = nodes.get(edge.from);
+    if (!node) throw new Error(`cdl layout: edge "${edge.id}" の from "${edge.from}" が node に無い`);
+    let side = edge.side;
+    if (!side) {
+      const i = 消費.get(edge.from) ?? 0;
+      消費.set(edge.from, i + 1);
+      side = 割当.get(edge.from)![i]!;
+    }
+    const key = `${edge.from}::${side}`;
+    const 既 = 束.get(key);
+    if (既) 既.edges.push(edge);
+    else 束.set(key, { node, side, edges: [edge] });
+  }
+  // 語の置き場所は束の中の並びで決まるので、束ごとにまとめて経路にする。
+  // 返す並びは呼出側が id で引き直すため、ここでは束の順で構わない
+  return [...束.values()].flatMap((b) => routeSelfLoopGroup(b.edges, b.node, b.side));
+}

package/src/layout/spec.ts

@@ -62,9 +62,10 @@ export function hasRenderedLabel(e: { label?: string; sub?: string }): boolean {
 /**
  * `title` を文字として描かない node の種別。
  *
- * 2 群ある。 形だけを描く `dyn-*` 5 種は `DynShapeNode` に回り、 `node.title` を一度も参照しない
+ * 3 群ある。 形だけを描く `dyn-*` 5 種は `DynShapeNode` に回り、 `node.title` を一度も参照しない
  * (描くのは形と数値の小さな label だけ)。 payload を自前 layout する chart / timeline / analytic
- * 10 種は、 描くのが payload 側の label で `title` は使わない。
+ * 10 種は、 描くのが payload 側の label で `title` は使わない。 流れの始まりと終わりの印 2 種は
+ * 印そのものが意味を持ち、 丸の中に名前を入れても読めない (#560)。
  *
  * 一覧は手で持つと描画側とずれるため、 `test/node-title-render.test.tsx` が `NODE_KINDS` を
  * **全件 render** して「title の文字が出るか」 と本述語の返り値の一致を検査する。 新しい種別を
@@ -81,12 +82,20 @@ const KINDS_WITHOUT_TITLE_TEXT: ReadonlySet<string> = new Set([
   "chart-pie",
   "chart-line",
   "chart-bar",
+  "chart-gauge",
+  "chart-radial",
+  "chart-stat",
+  "chart-waffle",
+  "chart-stacked-bar",
   "gantt-timeline",
   "mind-map",
   "funnel-stages",
   "quadrant-matrix",
   "tree-hierarchy",
   "journey-map",
+  // 印そのものが意味を持つ (#560)
+  "mark-start",
+  "mark-end",
 ]);
 
 /**
@@ -189,7 +198,45 @@ export function rowBaselineY(kind: string | undefined, index: number): number |
   if (!rendersRows(kind)) return null;
   return kind === "storage"
     ? ROW_TOP_STORAGE + index * ROW_PITCH_STORAGE
-    : ROW_TOP_GENERIC + index * ROW_PITCH_GENERIC;
+    : ROW_TOP_GENERIC + genericTextShift(kind) + index * ROW_PITCH_GENERIC;
+}
+
+/**
+ * `kinds/generic.tsx` が字の塊を下へずらす量 (SSOT)。
+ *
+ * 円柱は上の楕円 (ry=14) の内側に字を置けないため、題も行もこの分だけ下がる。
+ * **題と行が同じ値を引く** = 別々に持つと片方だけ動いて重なる (#558 で実際に重なっていた)。
+ */
+export function genericTextShift(kind: string | undefined): number {
+  return KINDS_SHAPE_CYLINDER.has(kind ?? "") ? GENERIC_TEXT_SHIFT_CYLINDER : 0;
+}
+
+/** 円柱で描く種別。 `kinds/generic.tsx` の `STYLES` が持つ形と 1 対 1 で対応する */
+const KINDS_SHAPE_CYLINDER: ReadonlySet<string> = new Set(["database"]);
+
+/** 中央に字を寄せる種別 (`cloud` / `decision`)。 同じく `STYLES` の形と対応する */
+const KINDS_TEXT_CENTERED: ReadonlySet<string> = new Set(["cloud", "decision"]);
+
+/**
+ * その node が字を中央へ寄せるか (SSOT)。
+ *
+ * **行を持つ時は寄せない**。 題を箱の中心に置くと、上端から数える行 (`ROW_TOP_GENERIC`) と
+ * 必ず重なる = 中心に題を置いたまま行を並べる場所が無い。 行がある時だけ上揃えに落とす。
+ */
+export function genericTextCentered(kind: string | undefined, hasRows: boolean): boolean {
+  return !hasRows && KINDS_TEXT_CENTERED.has(kind ?? "");
+}
+
+/**
+ * `kinds/generic.tsx` の題の baseline (SSOT)。
+ *
+ * 中央寄せの時だけ箱の高さに依るので `h` を受ける。 検査軸 (`title-row-overlap`) が
+ * 行との間隔を測るために同じ関数を引く。
+ */
+export function genericTitleBaselineY(kind: string | undefined, h: number, hasRows: boolean): number {
+  return genericTextCentered(kind, hasRows)
+    ? h / 2 + GENERIC_TITLE_CENTER_OFFSET
+    : GENERIC_TITLE_TOP + genericTextShift(kind);
 }
 
 /** `kinds/storage.tsx` の 1 行目 baseline と行送り。 */
@@ -200,6 +247,25 @@ export const ROW_PITCH_STORAGE = 56;
 export const ROW_TOP_GENERIC = 100;
 export const ROW_PITCH_GENERIC = 28;
 
+/** 円柱で字の塊を下へずらす量。 上の楕円 (ry=14) の内側を避ける */
+export const GENERIC_TEXT_SHIFT_CYLINDER = 28;
+
+/** `kinds/generic.tsx` の上揃え時の題の baseline と、中央寄せ時の中心からの差 */
+export const GENERIC_TITLE_TOP = 68;
+export const GENERIC_TITLE_CENTER_OFFSET = 4;
+
+/** `kinds/generic.tsx` の題の字の大きさ。 題の字形がどこまで下へ出るかの見積もりに使う */
+export const GENERIC_TITLE_FONT = 20;
+
+/**
+ * 字形の上端を baseline から何割上と **見込むか** (cap 高さの目安)。
+ *
+ * `STORAGE_ROW_DIVIDER_Y` が区切り線の位置を出すのに使っていた 0.72 を、
+ * 題と行の間隔を見る軸 (`title-row-overlap`) と共有する。 別々に持つと片方だけ動く。
+ */
+export const GLYPH_CAP_RATIO = 0.72;
+
+
 /**
  * 行の文字寸法。 `kinds/storage.tsx` は 26px、 `kinds/generic.tsx` は左 18px / 右 21px。
  * descender の見積もりには大きい方を使う。
@@ -220,7 +286,7 @@ export const STORAGE_TITLE_BASELINE = 78;
  * 1 行目の字形の上端は baseline から font size の 0.72 倍だけ上と見込む (cap 高さの目安)。
  */
 export const STORAGE_ROW_DIVIDER_Y = Math.round(
-  (STORAGE_TITLE_BASELINE + (ROW_TOP_STORAGE - ROW_FONT_STORAGE * 0.72)) / 2,
+  (STORAGE_TITLE_BASELINE + (ROW_TOP_STORAGE - ROW_FONT_STORAGE * GLYPH_CAP_RATIO)) / 2,
 );
 
 /**
@@ -242,6 +308,17 @@ export const STORAGE_ROW_DIVIDER_Y = Math.round(
  */
 export const ROW_GLYPH_DEPTH_RATIO = 0.4;
 
+/**
+ * 題の字形の下端と 1 行目の字形の上端が触れないために要ると **見込む** 間隔。
+ *
+ * 題は下へ `GENERIC_TITLE_FONT * ROW_GLYPH_DEPTH_RATIO`、行は上へ
+ * `ROW_FONT_GENERIC * GLYPH_CAP_RATIO` 伸びると見込む。 その和を下限にする。
+ *
+ * 仮定の範囲は `ROW_GLYPH_DEPTH_RATIO` の説明と同じ = preset が出す文字の範囲を押さえる。
+ */
+export const TITLE_ROW_MIN_GAP =
+  GENERIC_TITLE_FONT * ROW_GLYPH_DEPTH_RATIO + ROW_FONT_GENERIC * GLYPH_CAP_RATIO;
+
 /**
  * 最終行の baseline から下に、 字形が枠に触れないために要ると **見込む** 量。
  *

package/src/layout/tokens.ts

@@ -52,6 +52,16 @@ export const TOKENS = {
     "chart-line": { w: 640, h: 360 },
     "chart-pie": { w: 640, h: 320 },
     "chart-bar": { w: 640, h: 360 },
+    // 上半分の弧 + 下段の内訳。 弧が浅いぶん pie より低くて済む (cdl#549)
+    "chart-gauge": { w: 640, h: 320 },
+    // 左に一覧 + 右に同心の弧。 件数ぶん内側へ重なるので pie と同じ高さを取る (cdl#550)
+    "chart-radial": { w: 640, h: 320 },
+    // 件ごとに区画を割り、名前 / 数値 / 弧 / 割合 を縦に積む。 数値を大きく組むので縦が要る (cdl#553)
+    "chart-stat": { w: 640, h: 320 },
+    // 左に一覧 + 右に 10x10 の格子。 格子が正方形なので pie と同じ高さで足りる (cdl#552)
+    "chart-waffle": { w: 640, h: 320 },
+    // 帯を最大 2 本 + 下に一覧。 縦は帯 2 本ぶんで足りる (cdl#551)
+    "chart-stacked-bar": { w: 640, h: 320 },
     // Timeline / Mind 系 (CAR-994 Phase B)
     "gantt-timeline": { w: 720, h: 360 },
     "mind-map": { w: 720, h: 480 },
@@ -123,6 +133,11 @@ export const TOKENS = {
     "shape-lawyer": { w: 280, h: 300 },
     "shape-trader": { w: 300, h: 300 },
     "shape-customer-service": { w: 320, h: 300 },
+    // 流れの始まりと終わりの印 2 種 (#560) ... 正方形にして丸が縦横どちらにも歪まないようにする。
+    // 印は箱いっぱいに描く (線が箱の縁で止まるため) ので、この値が丸の直径になる。
+    // 箱としての最小 (80x40) より大きく、名前を持つ箱 (card 320x150) よりは明らかに小さい
+    "mark-start": { w: 96, h: 96 },
+    "mark-end": { w: 96, h: 96 },
   } as Record<NodeKind, { w: number; h: number }>,
 
   // row gap (stack 間の vertical gap、 lane 内 / 跨ぎ共通)

package/src/presets.ts

@@ -1538,13 +1538,23 @@ export function quadrant(preset: QuadrantPreset): QuadrantBuilder {
 
 // ─── chart (Pie / Bar / Line 統合) ─────────────────────────────
 
-export type ChartType = "pie" | "bar" | "line";
+export type ChartType =
+  | "pie"
+  | "bar"
+  | "line"
+  | "gauge"
+  | "radial"
+  | "stat"
+  | "waffle"
+  | "stacked-bar";
 
 export type ChartDatum = {
   id: string;
   label: string;
   /** 棒 / 折れ線 / 扇の大きさ。 `{名前}` を書くと状態から読む (#468) */
   value: number | BindingRef;
+  /** 前の時点の値 (cdl#551)。 `type: stacked-bar` で書くと帯が 2 本になる */
+  previous?: number | BindingRef;
   /** 個別 tone (default は preset の defaultTone) */
   tone?: Tone;
 };
@@ -1580,7 +1590,17 @@ export function chart(preset: ChartPreset): ChartBuilder {
   const canvasW = toGridSize(preset.itemWidth ?? 640);
   // 高さも格子の倍数にする。 line / bar は 360 だったが 360 % 16 = 8 で下端が格子から外れ、
   // 箱の 4 辺が載る条件を満たさなかった。
-  const canvasH = toGridSize(preset.type === "pie" ? 320 : 360);
+  // 円と半円は縦を使わないぶん低い。 折れ線と棒は軸のぶん高さが要る
+  const canvasH = toGridSize(
+    preset.type === "pie" ||
+    preset.type === "gauge" ||
+    preset.type === "radial" ||
+    preset.type === "stat" ||
+    preset.type === "waffle" ||
+    preset.type === "stacked-bar"
+      ? 320
+      : 360,
+  );
   const b = diagram(preset.id, { topic: preset.topic });
   const data: ChartDatum[] = [];
 
@@ -1588,6 +1608,11 @@ export function chart(preset: ChartPreset): ChartBuilder {
     line: "chart-line" as const,
     pie: "chart-pie" as const,
     bar: "chart-bar" as const,
+    gauge: "chart-gauge" as const,
+    radial: "chart-radial" as const,
+    stat: "chart-stat" as const,
+    waffle: "chart-waffle" as const,
+    "stacked-bar": "chart-stacked-bar" as const,
   };
 
   const api: ChartBuilder = {
@@ -1606,7 +1631,12 @@ export function chart(preset: ChartPreset): ChartBuilder {
         eyebrow: preset.type,
         w: canvasW,
         h: canvasH,
-        chartData: data.map((d) => ({ label: d.label, value: d.value, tone: d.tone })),
+        chartData: data.map((d) => ({
+          label: d.label,
+          value: d.value,
+          ...(d.previous === undefined ? {} : { previous: d.previous }),
+          tone: d.tone,
+        })),
       });
       b.phase(
         "chart",

package/src/render/edge-head.ts

@@ -0,0 +1,45 @@
+import { EDGE_HEAD_DEFAULT, type EdgeHead } from "../types";
+
+/**
+ * 関係の端の形の **描き方と marker の名前** (SSOT、 #560)。
+ *
+ * `render/stage.tsx` が marker を定義し、 `render/edges.tsx` がそれを引く。 2 箇所が別々に
+ * 名前を組み立てると、 片方だけ変えた時に線が指す marker が消えて矢頭が出なくなる
+ * (`tone-marker-ref` 軸が拾うが、 拾うまでの間は矢頭が無い絵になる)。
+ */
+
+export type EdgeHeadShape = {
+  /** 10x10 の viewBox に描く path */
+  d: string;
+  /** path の端のどこを線の先端に合わせるか */
+  refX: number;
+  /** 塗るか。 塗らない形は線で描く */
+  filled: boolean;
+};
+
+/**
+ * 4 形の描き方。
+ *
+ * 塗る形 (三角 / 菱) は線の端を隠すので、線をその手前で止める必要は無い = marker は
+ * 線の上に重なって描かれる。 塗らない形 (開いた矢 / 三又) は隠さない。
+ *
+ * 三又だけ `refX` が 10 = 三又は **開いた側が箱に触る** 形で、他の 3 形と前後が逆になる。
+ * 9 にすると開いた側が箱から 1 だけ浮く。
+ */
+export const EDGE_HEAD_SHAPE: Record<EdgeHead, EdgeHeadShape> = {
+  triangle: { d: "M 0 0 L 10 5 L 0 10 z", refX: 9, filled: true },
+  diamond: { d: "M 0 5 L 5 0 L 10 5 L 5 10 z", refX: 9, filled: true },
+  open: { d: "M 1 0 L 9 5 L 1 10", refX: 9, filled: false },
+  crow: { d: "M 10 0 L 0 5 M 10 5 L 0 5 M 10 10 L 0 5", refX: 10, filled: false },
+};
+
+/**
+ * marker の名前を組み立てる。
+ *
+ * **既定の形は名前を変えない** (`cdl-arrow-<tone>` / `cdl-arrow-<tone>-sm`)。
+ * 端の形を書いていない図はすべて既定なので、名前が変わると全図の矢頭が差し替わる。
+ */
+export function edgeHeadMarkerId(tone: string, head: EdgeHead, small: boolean): string {
+  const 小 = small ? "-sm" : "";
+  return head === EDGE_HEAD_DEFAULT ? `cdl-arrow-${tone}${小}` : `cdl-arrow-${tone}-${head}${小}`;
+}

package/src/render/edges.tsx

@@ -1,5 +1,6 @@
 import type { JSX } from "react";
-import type { LaidEdge } from "../types";
+import { EDGE_HEAD_DEFAULT, type LaidEdge } from "../types";
+import { edgeHeadMarkerId } from "./edge-head";
 import { computeLabelBBoxWorld, hasRenderedLabel, LABEL_PILL_PAD_X } from "../layout/spec";
 import { hasTone, toneColor } from "./tone";
 import { EDGE_LABEL_TEXT, fontFamilyAttr, type EdgeLabelLine } from "../label-text";
@@ -43,8 +44,9 @@ export function CdlEdgeView({
   // 1.0 でも 2.92-5.55)。 dragon は edge 用に濃くした色 (#0063a1 等) を CSS で当てており、
   // その色なら 0.9 で 4.51-4.92 と 4.5:1 を満たす (0.8 では 3.69-4.04 で届かない)。
   // 実線と点線で同じ組を使い、 光らせた側が薄くなる逆転を作らない。
+  // 端の形は線の種類と別の軸 (#560)。 書かなければ既定の塗った三角で、名前も従来のまま
   const marker = hasTone(edge.tone)
-    ? `cdl-arrow-${edge.tone}${active ? "" : "-sm"}`
+    ? edgeHeadMarkerId(edge.tone, edge.head ?? EDGE_HEAD_DEFAULT, !active)
     : "cdl-arrow-muted";
 
   const style = edge.style ?? "solid";

package/src/render/interactive-panel.tsx

@@ -4133,7 +4133,6 @@ function SlopeReadout({
   }
   const pad = 20;
   const range = max - min || 1;
-  const w = viewW - pad * 2;
   const h = viewH - pad * 2;
   const xL = pad;
   const xR = viewW - pad;
@@ -8433,7 +8432,8 @@ function VoiceMessageReadout({
   const barsX = 36;
   const barsW = width - barsX - 44;
   const barsH = 30;
-  const barsY = (height - barsH) / 2;
+  // 縦位置は棒ごとに自分の高さから出す (下の `y`)。 まとめて 1 つ持つと、
+  // 高さの違う棒が同じ位置から描かれて中央で揃わない
   const bw = shown.length > 0 ? barsW / shown.length : 0;
   const activeCount = Math.floor(shown.length * p);
   const durMin = Math.floor(duration / 60);

package/src/render/nodes.tsx

@@ -5,9 +5,15 @@ import { EventNode } from "../kinds/event";
 import { FunctionNode } from "../kinds/function";
 import { StorageNode } from "../kinds/storage";
 import { GenericNode } from "../kinds/generic";
+import { MarkStartNode, MarkEndNode } from "../kinds/terminal-mark";
 import { DynShapeNode } from "../kinds/dyn-shape";
 import { ChartLineNode } from "../kinds/chart-line";
 import { ChartPieNode } from "../kinds/chart-pie";
+import { ChartGaugeNode } from "../kinds/chart-gauge";
+import { ChartRadialNode } from "../kinds/chart-radial";
+import { ChartStatNode } from "../kinds/chart-stat";
+import { ChartWaffleNode } from "../kinds/chart-waffle";
+import { ChartStackedBarNode } from "../kinds/chart-stacked-bar";
 import { ChartBarNode } from "../kinds/chart-bar";
 import { GanttNode } from "../kinds/gantt";
 import { MindMapNode } from "../kinds/mind-map";
@@ -179,6 +185,21 @@ export function CdlNodeView({
             progress={progress}
           />
         );
+      case "chart-gauge":
+        // 段の進みで弧が開く動きは持たない (cdl#549 で対象外にした)
+        return <ChartGaugeNode node={resolvedNode} active={active} stateValues={stateValues} />;
+      case "chart-stacked-bar":
+        // 帯を割合で区切る。 前の時点を書けば 2 本になる (cdl#551)
+        return <ChartStackedBarNode node={resolvedNode} active={active} stateValues={stateValues} />;
+      case "chart-waffle":
+        // 1 個 = 1% の印を 100 個。 段の進みで印が埋まる動きは別 Issue (cdl#552 で対象外)
+        return <ChartWaffleNode node={resolvedNode} active={active} stateValues={stateValues} />;
+      case "chart-stat":
+        // 数値が主役で、弧は輪郭だけの補助。 段の進みで数値が動く演出は既存の tween が担う
+        return <ChartStatNode node={resolvedNode} active={active} stateValues={stateValues} />;
+      case "chart-radial":
+        // 段の進みで弧が伸びる動きは持たない (cdl#550 で対象外にした)
+        return <ChartRadialNode node={resolvedNode} active={active} stateValues={stateValues} />;
       case "chart-bar":
         return (
           <ChartBarNode
@@ -339,6 +360,10 @@ export function CdlNodeView({
         return <ShapeTraderNode node={resolvedNode} active={active} />;
       case "shape-customer-service":
         return <ShapeCustomerServiceNode node={resolvedNode} active={active} />;
+      case "mark-start":
+        return <MarkStartNode node={resolvedNode} active={active} />;
+      case "mark-end":
+        return <MarkEndNode node={resolvedNode} active={active} />;
       default:
         // 新 NodeKind 25 種は GenericNode で汎用描画 (kind 別 icon / color / shape)
         return <GenericNode node={resolvedNode} active={active} value={node.value} stateValues={stateValues} />;

package/src/render/payload-binding.ts

@@ -44,7 +44,11 @@ export type BindingResult<T> = { value: T; ok: boolean };
 /** 解決できなかった欄を持つ項目に付く印。 kind 側が DOM 属性に写す */
 export type UnresolvedMark = { unresolved?: true };
 
-export type ResolvedChartDatum = Omit<ChartDatumPayload, "value"> & { value: number } & UnresolvedMark;
+export type ResolvedChartDatum = Omit<ChartDatumPayload, "value" | "previous"> & {
+  value: number;
+  /** 前の時点の値。 書かれていない datum では `undefined` のまま */
+  previous?: number;
+} & UnresolvedMark;
 export type ResolvedFunnelStage = Omit<FunnelStagePayload, "count"> & { count: number } & UnresolvedMark;
 export type ResolvedGanttTask = Omit<GanttTaskPayload, "startIdx" | "endIdx"> & {
   startIdx: number;
@@ -139,10 +143,17 @@ export function resolveChartData(
 ): ResolvedChartDatum[] {
   // 全ての値が有限な数なら配列を組み直さない。 状態を読まない図が毎 frame で項目数ぶんの
   // 割当てを払わないようにするための近道で、 同じ配列をそのまま返すので挙動も変わらない。
-  if (!data.some((d) => needsResolve(d.value))) return data as ResolvedChartDatum[];
+  //
+  // **前の時点の値も同じ判定に入れる** (cdl#551)。 入れないと `{名前}` を書いた `previous` が
+  // 近道を素通りし、状態を読まないまま文字列のまま描画へ流れる。
+  if (!data.some((d) => needsResolve(d.value) || (d.previous !== undefined && needsResolve(d.previous))))
+    return data as ResolvedChartDatum[];
   return data.map((d) => {
     const v = resolveBoundNumber(d.value, values, 0);
-    return v.ok ? { ...d, value: v.value } : { ...d, value: v.value, unresolved: true as const };
+    const 前 = d.previous === undefined ? undefined : resolveBoundNumber(d.previous, values, 0);
+    const 解けた = v.ok && (前 === undefined || 前.ok);
+    const 素 = { ...d, value: v.value, previous: 前?.value };
+    return 解けた ? 素 : { ...素, unresolved: true as const };
   });
 }