@cardenelabs/cdl 0.13.1 → 0.15.0

package/src/render/stage.tsx

@@ -1,10 +1,12 @@
 import { useMemo, type JSX } from "react";
-import type { CdlPhase, LaidDiagram } from "../types";
+import { EDGE_HEADS, type CdlPhase, type LaidDiagram } from "../types";
 import { CdlEdgeView, CdlEdgeGlowView, CdlEdgeLabelView } from "./edges";
 import { CdlNodeView } from "./nodes";
 import { TONE, TONE_HEX } from "./tone";
+import { EDGE_HEAD_SHAPE, edgeHeadMarkerId } from "./edge-head";
 import { buildDiagramAltText } from "../layout/spec";
 import { lifelineStartYs, uniformLifelineEndY } from "../layout/lifeline";
+import { 描く進みに直す } from "../kinds/draw-ratio";
 
 export function CdlStage({
   laid,
@@ -28,6 +30,9 @@ export function CdlStage({
   // この phase で左の起点から描き始める node (cdl#512)。 `activate` とは別集合で持つ =
   // 焦点が当たり続ける図で毎 phase 引き直すことになるため、 光っているかを引き金にしない
   const drawSet = new Set(currentPhase?.draw ?? []);
+  // 描く対象から見た進み (cdl#570)。 `drawRatio` を書かない phase では `progress` と同値で、
+  // 描く速さを phase の長さから切り離すためだけに使う
+  const 描く進み = 描く進みに直す(progress, currentPhase?.drawRatio);
   // 縦線の終点は全 lane で 1 つに揃える (等長保証)。 値の決め方と、 1 lane の異常が図全体から
   // 縦線を消していた形の対処は `uniformLifelineEndY` の説明。
   //
@@ -97,21 +102,35 @@ export function CdlStage({
               光っていない edge も tone の色で描くが、 矢頭の大きさは従来通り小さいまま保つ
               (Issue の制約 = 色だけを足す)。 */}
           {Object.entries(TONE).flatMap(([tone, color]) =>
-            ([["", 14], ["-sm", 10]] as const).map(([suffix, size]) => (
-              <marker
-                key={`${tone}${suffix}`}
-                id={`cdl-arrow-${tone}${suffix}`}
-                viewBox="0 0 10 10"
-                refX="9"
-                refY="5"
-                markerWidth={size}
-                markerHeight={size}
-                markerUnits="userSpaceOnUse"
-                orient="auto-start-reverse"
-              >
-                <path data-cdl-role="edge-arrowhead" d="M 0 0 L 10 5 L 0 10 z" fill={color} />
-              </marker>
-            )),
+            ([["", 14], ["-sm", 10]] as const).flatMap(([suffix, size]) =>
+              EDGE_HEADS.map((head) => {
+                const 形 = EDGE_HEAD_SHAPE[head];
+                return (
+                  <marker
+                    key={`${tone}${suffix}-${head}`}
+                    id={edgeHeadMarkerId(tone, head, suffix === "-sm")}
+                    viewBox="0 0 10 10"
+                    refX={形.refX}
+                    refY="5"
+                    markerWidth={size}
+                    markerHeight={size}
+                    markerUnits="userSpaceOnUse"
+                    orient="auto-start-reverse"
+                  >
+                    <path
+                      data-cdl-role="edge-arrowhead"
+                      data-cdl-edge-head={head}
+                      d={形.d}
+                      fill={形.filled ? color : "none"}
+                      stroke={形.filled ? "none" : color}
+                      strokeWidth={形.filled ? undefined : 1.6}
+                      strokeLinecap={形.filled ? undefined : "round"}
+                      strokeLinejoin={形.filled ? undefined : "round"}
+                    />
+                  </marker>
+                );
+              }),
+            ),
           )}
           {/* tone が TONE 定義に無い edge の受け皿。 visual-validate の tone-marker-ref 軸が
               dead ref を検知するが、 検知するまでの間に矢頭が消えないようにする。 */}
@@ -207,12 +226,16 @@ export function CdlStage({
 
         {/* nodes (2nd pass) */}
         {laid.nodes.map((node) => {
+          // 描く対象だけ進みを引き伸ばす (cdl#570)。 同じ phase の他の node と edge、
+          // および `tweens` は元の進みのまま = 「線はゆっくり、 値は短く」 が 1 つの phase で
+          // 両立する。 対象外にも掛けると値の移りまで速くなる
+          const 描く = drawSet.has(node.id);
           const view = (
             <CdlNodeView
               node={node}
               active={activeSet.has(node.id)}
-              drawing={drawSet.has(node.id)}
-              progress={progress}
+              drawing={描く}
+              progress={描く ? 描く進み : progress}
               stateValues={stateValues}
               currentPhaseId={currentPhase?.id}
             />

package/src/render/tone.ts

@@ -30,6 +30,58 @@ export const TONE_HEX: Record<Tone, string> = {
   info: "#5a8ec1",
 };
 
+/**
+ * 図表の系列の色 (cdl#546)。
+ *
+ * `TONE` は **意味付きの色** で、箱や矢印が「これは異常」 「これは成功」 を示すために使う。
+ * 図表の系列に要るのは意味ではなく **並べて見分けられること** で、選び方の基準が違う。
+ *
+ * 使い回していた間、2 つの困りが出ていた。 明るい画面の `warning` (`#a67a2e`) は彩度が低く
+ * 青と青緑の隣で沈み、色相の離れた暖色を置こうとすると `error` (赤) しか無いので装飾の
+ * つもりの色に「異常」 の意味が乗った。
+ *
+ * ## 選び方
+ *
+ * **色相を離す**。 6 色を色相環におおよそ等間隔で置き、隣り合う 2 色が近くならない順に
+ * 並べた。 彩度は `TONE` より高く取る = 図表は面で見せるので、線や字より彩度を上げても
+ * うるさくならない。
+ *
+ * ## 差し替え
+ *
+ * `TONE` と同じく CSS 変数にする。 dragon 側で `--cdl-chart-N` を定義すれば、明暗で別の値を
+ * 持てる。 定義しなければここの既定値が出る。
+ *
+ * datum に `tone` を明示した場合は `TONE` が優先される (意味を示したい図はそのまま書ける)。
+ */
+export const CHART_SERIES: readonly string[] = [
+  "var(--cdl-chart-1, #4338ca)",
+  "var(--cdl-chart-2, #0d9488)",
+  "var(--cdl-chart-3, #f59e0b)",
+  "var(--cdl-chart-4, #be185d)",
+  "var(--cdl-chart-5, #4d7c0f)",
+  "var(--cdl-chart-6, #0369a1)",
+];
+
+/**
+ * 系列の色の hex のみ。 CSS 変数を評価できない環境 (SSR / 検査) で色を比べる時に使う。
+ *
+ * `CHART_SERIES` と **同じ並び / 同じ長さ** であることは検査が見る。 片方だけ足すと、
+ * 実物と計算が別の色を指す。
+ */
+export const CHART_SERIES_HEX: readonly string[] = [
+  "#4338ca",
+  "#0d9488",
+  "#f59e0b",
+  "#be185d",
+  "#4d7c0f",
+  "#0369a1",
+];
+
+/** 系列の色を順に配る。 6 色を超えたら先頭へ戻る */
+export function chartSeriesColor(idx: number): string {
+  return CHART_SERIES[((idx % CHART_SERIES.length) + CHART_SERIES.length) % CHART_SERIES.length]!;
+}
+
 /** TONE に無い tone が来た時に使う色。 */
 export const TONE_FALLBACK = "#2d6a8f";
 

package/src/types.ts

@@ -58,8 +58,13 @@ export const NODE_KINDS = [
   "service", "api", "frontend", "backend", "webhook", "microservice",
   // データ / 判定 (4)
   "signer", "oracle", "merkle-tree", "decision",
-  // Chart 系 (3) ... 1 node に datum 配列を持ち、 kind 内で全 datum を SVG 描画
-  "chart-pie", "chart-line", "chart-bar",
+  // Chart 系 (5) ... 1 node に datum 配列を持ち、 kind 内で全 datum を SVG 描画。
+  // chart-gauge は合計を主役に置く形 (cdl#549)、 chart-radial は弧の長さで比べる形 (cdl#550)、
+  // chart-stat は数値そのものを主役に置く形 (cdl#553)
+  // chart-waffle は 100 個の印で割合を数えて確かめる形 (cdl#552)
+  "chart-pie", "chart-line", "chart-bar", "chart-gauge", "chart-radial", "chart-stat",
+  // chart-stacked-bar は帯を割合で区切り時点を並べる形 (cdl#551)
+  "chart-waffle", "chart-stacked-bar",
   // Timeline / Mind 系 (2、 CAR-994 Phase B) ... 1 node に payload 配列、 SVG geometry render
   "gantt-timeline", "mind-map",
   // Analytic 系 (4、 CAR-994 Phase C) ... 1 node に payload 配列、 SVG geometry render
@@ -89,6 +94,9 @@ export const NODE_KINDS = [
   // Shape-driven people 6 (CAR-1111 Phase 2-D) ... 職種別 person 型 (監査 / 規制 / 公証 / 弁護 / トレーダ / CS)
   "shape-auditor", "shape-regulator", "shape-notary",
   "shape-lawyer", "shape-trader", "shape-customer-service",
+  // 流れの始まりと終わりの印 2 種 (#560) ... 塗った丸と輪で囲んだ丸。
+  // 状態遷移図が使う。 印そのものが意味を持つので文字は描かない
+  "mark-start", "mark-end",
 ] as const;
 
 export type NodeKind = (typeof NODE_KINDS)[number];
@@ -103,6 +111,26 @@ export type Side = "top" | "right" | "bottom" | "left";
  */
 export type EdgeStyle = "solid" | "dotted-flow";
 
+/**
+ * 関係の **端の形** (#560)。 線の種類 (`EdgeStyle`) とは別の軸で、線の先端に何を置くかを決める。
+ *
+ * - `"triangle"` ... 塗った三角。 **既定**。 書かなければこれになる
+ * - `"diamond"` ... 塗った菱。 「持っている」 側を指す
+ * - `"open"` ... 閉じない 2 本の腕。 向きだけを示し、待たない
+ * - `"crow"` ... 三又。 「多」 を示す (ER の鳥の足)
+ *
+ * 線の種類と分けて持つのは、両者が独立に組み合わさるため。 実線 × 三角 (継ぐ) と
+ * 破線 × 三角 (満たす) は線種で分かれ、実線 × 三角 (継ぐ) と実線 × 菱 (持つ) は端で分かれる。
+ * 1 つの欄に畳むと 2 軸の積を名前で列挙することになり、組合せが増えるたびに語が増える。
+ */
+export type EdgeHead = "triangle" | "diamond" | "open" | "crow";
+
+/** 書かなかった時の端の形。 既存の図はすべてこれで描かれている */
+export const EDGE_HEAD_DEFAULT: EdgeHead = "triangle";
+
+/** 端の形の全種。 marker の定義と検査の走査がこの並びを引く (書き写すとずれる) */
+export const EDGE_HEADS: readonly EdgeHead[] = ["triangle", "diamond", "open", "crow"];
+
 export type CdlLane = {
   id: string;
   /** lane の x 座標 (optional、 未指定なら engine が前 lane 右端 + gap で auto 計算) */
@@ -335,6 +363,16 @@ export type ChartDatumPayload = {
   label: string;
   /** 棒 / 折れ線 / 扇の大きさ。 `{signal}` で状態に追随する */
   value: BoundNumber;
+  /**
+   * **前の時点の値** (cdl#551)。 書くと `chart-stacked-bar` が帯を 2 本描き、
+   * 内訳の変化がそのまま見える。 書かない図は 1 本のまま。
+   *
+   * 節を時点ごとに置く案は採らない = 図表は「1 節に datum 配列を持ち、種別が全 datum を
+   * 描く」 構造で揃っており、節を増やすと配置と組み立て器の両方が別経路になる。
+   *
+   * 3 時点以上は持たない (cdl#551 で対象外)。 足す時は欄の形ごと決め直す。
+   */
+  previous?: BoundNumber;
   tone?: Tone;
 };
 
@@ -452,6 +490,8 @@ export type CdlEdge = {
   side?: Side;
   /** visual style、 default "solid" */
   style?: EdgeStyle;
+  /** 端の形、 default "triangle" (#560)。 線の種類とは別の軸 */
+  head?: EdgeHead;
   /**
    * FSM transition の guard 条件 (例 "if validated")。
    * stateMachine preset では sub に併合される、 text-dsl v0.5 では guard 単独で渡せる。
@@ -2158,6 +2198,30 @@ export type CdlPhase = {
    * 書かない phase では従来どおり全長で描く (DOM に dash 属性も付かない)。
    */
   draw?: string[];
+  /**
+   * `draw` の対象を描き終えるまでに、 phase の何割を使うか (cdl#570)。
+   *
+   * 0 より大きく 1 以下の割合で書く。 `0.4` なら phase の進みが 0.4 に達した時点で
+   * 描き終わり、 残りの 0.6 は描き終わった図のまま値だけが動く。 既定 (書かない) は 1 で、
+   * 従来どおり phase の終わりに描き終わる。
+   *
+   * **描く速さと phase の長さを切り離すための欄**。 進みは phase の進みそのものなので、
+   * これが無いと「線はゆっくり引きたいが値の移りは短くしたい」 が書けず、 描く速さのために
+   * phase の長さを動かすことになる。 phase の長さを動かすと同じ phase の `tweens` まで
+   * 遅くなり、 値が移るだけの phase を長くする形の回避が利用側で要る。
+   *
+   * **割合で持ち、 秒数では持たない**。 割合なら phase に収まるので、 再生速度の切替
+   * (0.5x / 2x) がそのまま効き、 phase をはみ出した時の扱いを決めずに済む。 秒数だと
+   * 切替との掛かり方とはみ出しの扱いを新たに決めることになる。
+   *
+   * 掛かる相手は `draw` に載せた node だけ。 同じ phase の他の node と edge、 および
+   * `tweens` は元の進みのまま動く。
+   *
+   * 範囲外 (0 以下 / 1 超 / NaN / Infinity) は **1 として扱う**。 描く動きは見え方であって
+   * 図の意味ではないため、 書き間違いで図が出なくなる方が損が大きい。 書き間違いは
+   * `validate` が warning で知らせる。
+   */
+  drawRatio?: number;
   /** 数値 state の線形補間 (write phase で 100→90 等) */
   tweens: Array<{ stateId: string; from: number; to: number }>;
   /** 任意型 state の即時切替 (この phase に到達したら値を上書き、 lerp なし) */

package/src/validate.ts

@@ -168,11 +168,6 @@ export function validate(diag: CdlDiagram): void {
         `[cdl] unknown-ref: edge "${e.id}" の to "${e.to}" が node に存在しません${suggest(e.to, nodeIds, "node")}\n  → 修正例: .node("${e.to}", { lane: "...", stack: 0, kind: "...", title: "..." }) を edge 宣言前に追加`,
       );
     }
-    if (e.from === e.to) {
-      errors.push(
-        `[cdl] self-loop: edge "${e.id}" の from と to が同じ node "${e.from}" です (self-loop は現状未対応)\n  → 別 node を作って 2 段に分けるか、 後続 PR の self-loop support を待ってください`,
-      );
-    }
   }
 
   // ───────────────────────────────────────────────────────────
@@ -200,6 +195,19 @@ export function validate(diag: CdlDiagram): void {
         );
       }
     }
+    // 描く速さの割合 (cdl#570)。 範囲外は描画側が 1 に落とすので図は出るが、 書いた指定は
+    // 何もしない。 黙って捨てると「書いたのに速さが変わらない」 が手掛かりなしで起きる
+    if (p.drawRatio !== undefined) {
+      if (!Number.isFinite(p.drawRatio) || p.drawRatio <= 0 || p.drawRatio > 1) {
+        warnings.push(
+          `phase "${p.id}" の drawRatio ${p.drawRatio} は範囲外 (0 より大きく 1 以下)。 1 として扱う`,
+        );
+      } else if ((p.draw ?? []).length === 0) {
+        warnings.push(
+          `phase "${p.id}" は drawRatio を持つが draw が空。 描く対象が無いので何も変わらない`,
+        );
+      }
+    }
     for (const t of p.tweens) {
       if (!stateIds.has(t.stateId)) {
         errors.push(`[cdl] unknown-ref: phase "${p.id}" tween 対象 state "${t.stateId}" 未定義`);

package/src/visual-validate.ts

@@ -1,5 +1,8 @@
 /**
- * Visual validator ... layout 出力 (LaidDiagram) を 67 軸で検証する。
+ * Visual validator ... layout 出力 (LaidDiagram) を全ての軸で検証する。
+ *
+ * **軸の数をここに書き写さない** (#538)。 数は `EXPECTED_AXIS_COUNT` が SSOT で、 写すと軸を
+ * 足すたびに片方が古くなる (実測 = 本行が 67 のまま、 下の低 layer API の説明が 56 のままだった)。
  *
  * cdl 著者が「component が render される」 までで完成と思いがちな問題に対し、
  * 「視覚的に正しい」 を engine 層で機械判定する。
@@ -74,7 +77,7 @@
  * test が無いと、 次に種別を足した時に同じ状態へ戻る。
  * ───────────────────────────────────────────────────────────
  */
-import type { CdlDiagram, LaidDiagram, NodeKind } from "./types";
+import { EDGE_HEADS, type CdlDiagram, type LaidDiagram, type LaidNode, type NodeKind } from "./types";
 import { CLEARANCE_LANE_LABEL, DIST_LABEL_PATH_MAX } from "./layout/clearance-constants";
 import { layout } from "./layout";
 import {
@@ -88,6 +91,9 @@ import {
 } from "./layout/collisions";
 import { measureTextWidth } from "./layout/text-width";
 import { droppedLineIsHidden, labelPlan } from "./kinds/shape-region";
+import { 箱に積む, type 積む行 } from "./kinds/box-lines";
+import { 木の中身, 木の行 } from "./kinds/tree";
+import { 放射の中身, 放射の行 } from "./kinds/mind-map";
 import { templateRefIds } from "./render/utils";
 import {
   bboxOverlaps,
@@ -128,7 +134,9 @@ import {
   computeLabelBBoxWorld,
   hasRenderedLabel,
   isRenderedNode,
+  genericTitleBaselineY,
   rendersRows,
+  TITLE_ROW_MIN_GAP,
   rendersTitleText,
   fitsOwnTitleWidth,
   rowBaselineY,
@@ -232,6 +240,11 @@ export const GRID_ALIGNED_KINDS: ReadonlySet<NodeKind> = new Set([
   "chart-pie",
   "chart-line",
   "chart-bar",
+  "chart-gauge",
+  "chart-radial",
+  "chart-stat",
+  "chart-waffle",
+  "chart-stacked-bar",
   "funnel-stages",
   "quadrant-matrix",
 ]);
@@ -331,6 +344,8 @@ export type VisualAxis =
   | "node-inside-viewbox"
   // Axis 67 (`#492` 追加) = 箱が狭くて書いた補いの行が描かれない node を書き手に伝える。
   | "shape-label-dropped"
+  // Axis 68 (`#538` 追加) = 木と放射の中の箱が低くて、 書いた補足が落ちたことを書き手に伝える。
+  | "box-line-dropped"
   // Axis 54 (2026-07-03 追加) = node bbox が所属 lane 内に収まっているか。
   // Axis 15 (lane-cx-consistency) は中心 x のみ、 本 axis は node 4 辺と lane 4 辺の包含関係を検知。
   | "node-inside-lane"
@@ -366,6 +381,7 @@ export type VisualAxis =
   | "column-gap-uniform"
   // Axis 68 (#387) = 行を描かない種別に rows が書かれている (書いた内容が画面に出ない)。
   | "rows-not-rendered"
+  | "title-row-overlap"
   // #393 = 検査に渡された図の形自体が壊れている (検査できなかったことを結果として出す)。
   | "malformed-input"
   // #393 = 検査が例外で中断したが、 原因が入力の破綻か検査側の欠陥か **決められない**。
@@ -476,6 +492,7 @@ function emptyCounts(): Record<VisualAxis, number> {
     "node-inside-viewbox": 0,
     "node-inside-lane": 0,
     "shape-label-dropped": 0,
+    "box-line-dropped": 0,
     "edge-inside-viewbox": 0,
     "lane-label-inside-viewbox": 0,
     "lane-label-overlap": 0,
@@ -489,13 +506,36 @@ function emptyCounts(): Record<VisualAxis, number> {
     "row-gap-uniform": 0,
     "column-gap-uniform": 0,
     "rows-not-rendered": 0,
+    "title-row-overlap": 0,
     "malformed-input": 0,
     "validation-interrupted": 0,
   };
 }
 
+/** 箱に行を積む種別の、 中の 1 箱。 */
+type 積む箱 = { 行: 積む行[]; w: number; h: number };
+
+/**
+ * 木と放射の中の箱を、 **描く時と同じ手順で** 集める (`#538`)。
+ *
+ * 箱の並べ方と積む行を kind 側の 1 箇所 (`木の中身` / `木の行` / `放射の中身` / `放射の行`) から
+ * 取る。 ここで余白や字の大きさを書き写すと、 描画側を変えた時に検査だけが古い箱を見る。
+ *
+ * 状態の値は渡さない。 `箱に積む` が行を落とすかどうかは **字の大きさと行数だけ** で決まり、
+ * 文字の中身に依らない。 状態を読む名前 (`{x}`) も解決の前後で行数が変わらないため、
+ * 落ちる / 落ちないの判定は状態に依らず同じになる。
+ *
+ * 行を積まない種別では空を返す。
+ */
+function 積む箱を集める(n: LaidNode): 積む箱[] {
+  const 箱 = (b: { w: number; h: number }, 行: 積む行[]): 積む箱 => ({ 行, w: b.w, h: b.h });
+  if (n.kind === "tree-hierarchy") return 木の中身(n).nodes.map((b) => 箱(b, 木の行(b)));
+  if (n.kind === "mind-map") return (放射の中身(n)?.nodes ?? []).map((b) => 箱(b, 放射の行(b)));
+  return [];
+}
+
 /**
- * LaidDiagram を直接受け取って 56 axis で視覚検証する低 layer API (v0.9+ 追加)。
+ * LaidDiagram を直接受け取って全ての軸で視覚検証する低 layer API (v0.9+ 追加)。
  *
  * visualValidate() は layout 経由で LaidDiagram を得た後、 本関数を呼び出す thin wrapper。
  * fixture test で layout を bypass して LaidDiagram を直接構築、 各 axis の real defect を
@@ -2262,6 +2302,59 @@ function runAxes(
     );
   }
 
+  // ───────────────────────────────────────────────────────────
+  // Axis 68: box-line-dropped (箱が低くて、 書いた補足が落ちる、 #538)
+  //
+  // 木 (`tree-hierarchy`) と放射 (`mind-map`) は中の箱に名前と補足を積む (`箱に積む`、 #471)。
+  // 箱の高さは段の間隔から出るため、 段や枝が増えると 2 行が入らなくなる。 入らない行は
+  // **後ろから落ちる** = 書いた補足が知らせも印も無く図から消える。
+  //
+  // 落ち方は段階的でない。 箱の高さは図の中で揃っているので、 1 つ入らなくなると同じ図の補足が
+  // 全部消える (実測 = 1 本道の木は深さ 8 で 9 件すべて出て、 深さ 9 で 10 件すべて消える)。
+  //
+  // 幅の側は切った印 (`…`) が図に出る (#526) が、 高さの側は **箱に描く余地が無いから落ちている**
+  // ので印を出せない。 検査で伝えるのが唯一の出口になる。
+  //
+  // 判定は描く時と同じ関数を同じ引数で呼ぶ。 描いた結果と突き合わせる形は採らない = 描画と判定で
+  // 別の経路を通ると、 片方だけ直したずれに気付けない。
+  //
+  // Axis 67 (`shape-label-dropped`) との境界は **どの箱を見るか**。 あちらは `shape-` の箱が絵に
+  // 帯を譲って補いの行を落とす形 (`labelPlan`)、 こちらは木と放射の中の箱が高さで落とす形。
+  //
+  // 中心の箱 (放射の高さ 52 固定) も対象に含める。 今のところ落ちないが、 高さは実装が決める値
+  // なので、 対象から外すと変えた時に落ちても見えない。
+  // ───────────────────────────────────────────────────────────
+  for (const n of laid.nodes) {
+    const 箱 = 積む箱を集める(n);
+    if (箱.length === 0) continue;
+    /** 補足を書いた箱の数。 書いていない箱は元から描かれないので数えない。 */
+    let 対象 = 0;
+    const 落ちた: { title: string; h: number }[] = [];
+    for (const b of 箱) {
+      // 先頭 (名前) は `箱に積む` が必ず残すので、 落ちうるのは 2 行目以降だけ。
+      const 宣言 = b.行.slice(1).filter((r) => r.text.trim() !== "");
+      if (宣言.length === 0) continue;
+      対象 += 1;
+      const 残った = new Set(箱に積む(b.行, b.w, b.h).map((r) => r.役割));
+      if (宣言.every((r) => 残った.has(r.役割))) continue;
+      落ちた.push({ title: b.行[0]?.text ?? "", h: b.h });
+    }
+    if (落ちた.length === 0) continue;
+
+    // 名前は先頭 5 件まで出し、 **残りの件数を必ず添える**。 黙って打ち切ると、 出ている名前が
+    // 全部だと読める。
+    const 名前 = 落ちた.map((d) => `"${d.title}"`);
+    const 見せる = 名前.slice(0, 5).join(" / ");
+    const 残り = 名前.length > 5 ? ` 他 ${名前.length - 5} 件` : "";
+    const 低 = Math.min(...落ちた.map((d) => d.h)).toFixed(1);
+    const 高 = Math.max(...落ちた.map((d) => d.h)).toFixed(1);
+    push(
+      "box-line-dropped",
+      `node "${n.id}" (${n.kind}) は箱が低く、 書いた補足が ${落ちた.length}/${対象} 箱で描かれない (${見せる}${残り}、 箱の高さ ${低 === 高 ? 低 : `${低}〜${高}`})。 図を高くするか段を減らすか、 補足を消す`,
+      "warn",
+    );
+  }
+
   // ───────────────────────────────────────────────────────────
   // Axis 55: edge-inside-viewbox (edge path 全 segment 端点が viewBox 内に収まる)
   //
@@ -2652,6 +2745,36 @@ function runAxes(
     );
   }
 
+  // ───────────────────────────────────────────────────────────
+  // Axis 69: title-row-overlap (題の字と 1 行目の字が重なる)
+  //
+  // 判定 = 題の baseline から下へ伸びる字形と、 1 行目の baseline から上へ伸びる字形が
+  // 触れるか。 位置は `spec.ts` の 2 関数 (`genericTitleBaselineY` / `rowBaselineY`) から
+  // 取るので、 描画側を変えれば本軸も一緒に動く。
+  //
+  // 題と行の縦位置は形ごとに別々の式で決まっていた時期があり、 円柱と中央寄せの 3 種で
+  // 字が重なっていた (#558)。 軸 4 (`row-format`) と軸 16 (`row-vertical-spacing`) は
+  // 行どうしと枠との関係しか見ないため、 題との関係は誰も見ていなかった。
+  //
+  // `storage` は専用の表組みで題と列の間に区切り線を引いており、 位置の出所が別なので対象外。
+  // ───────────────────────────────────────────────────────────
+  for (const n of diag.nodes) {
+    if (!n.rows || n.rows.length === 0) continue;
+    if (!rendersRows(n.kind)) continue;
+    if (n.kind === "storage") continue;
+    // 高さを取れない node は測らない。 0 に潰すと中央寄せの題が上端に来て誤って重なる判定になる
+    if (typeof n.h !== "number") continue;
+    const 題 = genericTitleBaselineY(n.kind, n.h, true);
+    const 行 = rowBaselineY(n.kind, 0);
+    if (行 === null) continue;
+    const 間 = 行 - 題;
+    if (間 >= TITLE_ROW_MIN_GAP) continue;
+    push(
+      "title-row-overlap",
+      `node "${n.id}" (kind=${n.kind ?? "未指定"}) の題 baseline y=${題.toFixed(0)} と 1 行目 baseline y=${行.toFixed(0)} の間が ${間.toFixed(0)} world で、 見込む字形の高さ ${TITLE_ROW_MIN_GAP.toFixed(0)} に届かない (字が重なる)`,
+    );
+  }
+
   // ───────────────────────────────────────────────────────────
   // Axis 17: group-boundary-clearance (topology group の boundary padding + 外部 clearance)
   //
@@ -3223,6 +3346,14 @@ function runAxes(
         `edge "${e.id}" tone "${e.tone}" が TONE_COLORS 定義に存在しない、 marker "cdl-arrow-${e.tone}" dead ref`,
       );
     }
+    // 端の形も同じ理由で dead ref になる (#560)。 marker は EDGE_HEADS の分しか定義しないので、
+    // 定義外の値が来ると "cdl-arrow-<tone>-<未定義>" を引いて矢頭が消える。
+    if (e.head !== undefined && !EDGE_HEADS.includes(e.head)) {
+      push(
+        "marker-gradient-def-integrity",
+        `edge "${e.id}" head "${e.head}" が EDGE_HEADS 定義に存在しない、 marker "cdl-arrow-${e.tone}-${e.head}" dead ref`,
+      );
+    }
   }
 
   // ───────────────────────────────────────────────────────────
@@ -4296,6 +4427,7 @@ function validateMetaAxes(
     "node-inside-viewbox",
     "node-inside-lane",
     "shape-label-dropped",
+    "box-line-dropped",
     "edge-inside-viewbox",
     "lane-label-inside-viewbox",
     "lane-label-overlap",
@@ -4365,6 +4497,7 @@ function validateMetaAxes(
     "node-inside-viewbox",
     "node-inside-lane",
     "shape-label-dropped",
+    "box-line-dropped",
     "edge-inside-viewbox",
     "lane-label-inside-viewbox",
     "lane-label-overlap",
@@ -4400,7 +4533,7 @@ function validateMetaAxes(
   //
   // 削除済 = engine-meta 51 (mermaid-parity、 #366) / 軸 29 (svg-filter-integrity) /
   // 軸 30 (neumorphism-shadow-budget、 どちらも #426 で主題の廃止に伴い削除)。
-  const EXPECTED_AXIS_COUNT = 67;
+  const EXPECTED_AXIS_COUNT = 68;
   if (allAxes.length !== EXPECTED_AXIS_COUNT) {
     out.push({
       axis: "axis-documentation-completeness",