@cardenelabs/cdl 0.13.1 → 0.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.13.1",
+  "version": "0.14.0",
   "description": "CDL (Chainome Diagram Language). Mermaid-like declarative DSL that compiles to animated SVG diagrams. Built for blockchain / Solidity flows, generic enough for sequence / flow / state / ER / topology diagrams.",
   "license": "MIT",
   "author": "cardene777",

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/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/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 type { CdlDiagram, LaidDiagram, LaidNode, 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,
@@ -331,6 +337,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"
@@ -476,6 +484,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,
@@ -494,8 +503,30 @@ function emptyCounts(): Record<VisualAxis, number> {
   };
 }
 
+/** 箱に行を積む種別の、 中の 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 +2293,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 内に収まる)
   //
@@ -4296,6 +4380,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 +4450,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 +4486,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",