@cardenelabs/cdl 0.6.1 → 0.9.0

package/src/kinds/quadrant.tsx

@@ -35,6 +35,10 @@ export function QuadrantNode({
   // 名前の前後に矢印と間隔 (12) が付くので、 その分も見込む。
   const AXIS_LABEL_FONT = 12;
   const PAD_MIN = 60;
+  // 項目の枠。 名前の字幅に左右の余白を足した幅にする (#457)
+  const ITEM_FONT = 13;
+  const ITEM_PAD_X = 12;
+  const ITEM_MIN_W = 48;
   const axisLabelPad = (text: string): number =>
     Math.max(PAD_MIN, measureTextWidth(`← ${text}`, { fontSize: AXIS_LABEL_FONT, fontWeight: 700 }) + 12);
   // 名前が長くても図そのものは残す。 上限を置かないと、 名前が箱の幅を超えた時に
@@ -145,6 +149,26 @@ export function QuadrantNode({
         const qxStart = (isLeft ? PAD_LEFT : cx) + 18;
         const qyStart = (isTop ? PAD_TOP : cy) + 44;
         const qHalfW = halfW - 36;
+        // 枠の幅は名前に合わせる。 固定だと短い名前で枠が間延びし、 狭い図では名前が枠から
+        // 出る (実測 = 5 文字の「重複を消す」 が 70px で、 枠が狭い図では越えた)。
+        //
+        // 頭打ちは象限に収まる幅 (qHalfW)。 これを超えると隣の象限へ出るため、 名前が長い時は
+        // 枠を伸ばさず名前が枠から出る形にする。 軸の名前と同じ考え方で、 溢れても図は残す。
+        //
+        // 下限 (ITEM_MIN_W) は **頭打ちより優先しない**。 図が極端に狭いと qHalfW が下限を
+        // 下回り、 下限を通すと枠が象限から出る。
+        //
+        // 余地が無い図では項目を描かない。 qHalfW は負にもなり (実測 = 幅 180 の図で -6)、
+        // 幅を 0 に切っても **枠の開始位置 (qxStart) が既に象限の外** にある
+        // (実測 = 幅 120 の図で開始 78、 象限の右端 60)。 描く場所が無い時に 0 幅の枠を
+        // 象限の外へ置くより、 何も描かない方が図として正しい。
+        const 枠の余地 = qHalfW;
+        if (枠の余地 <= 0) return null;
+        const 枠の幅 = (title: string) =>
+          Math.min(
+            枠の余地,
+            Math.max(ITEM_MIN_W, measureTextWidth(title, { fontSize: ITEM_FONT, fontWeight: 600 }) + ITEM_PAD_X * 2),
+          );
         const qHalfH = halfH - 60;
         const gap = 10;
         const rowH = 34;
@@ -158,14 +182,16 @@ export function QuadrantNode({
                 data-cdl-unresolved={it.unresolved ? "true" : undefined}
                 x={qxStart}
                 y={py}
-                width={qHalfW}
+                width={枠の幅(it.title)}
                 height={rowH}
                 rx={6}
                 fill="var(--cdl-node-fill, #ffffff)"
                 stroke={quadrantAccent[q]}
                 strokeWidth={1.5}
               />
-              <text x={qxStart + 12} y={py + rowH / 2 + 5} fontSize={13} fontWeight={600} fill="var(--cdl-text, #1a1f2a)">
+              {/* 字間を 0 に固定する。 枠の幅は字幅の見積り (letterSpacing 0 前提) で決めるため、
+                  外から字間を継承すると見積りより名前が広がって枠から出る (#457 Round 4) */}
+              <text x={qxStart + ITEM_PAD_X} y={py + rowH / 2 + 5} fontSize={ITEM_FONT} fontWeight={600} letterSpacing={0} fill="var(--cdl-text, #1a1f2a)">
                 {it.title}
               </text>
             </g>

package/src/kinds/shape-blockchain.tsx

@@ -1,6 +1,8 @@
 import type { JSX } from "react";
 import type { LaidNode } from "../types";
 import { fitArt, labelPlan, shapeRegion, textWidth, type ArtExtent } from "./shape-region";
+import { 幅で切る } from "./box-lines";
+import { MONO_ADVANCE_RATIO, displayWidth } from "./row-align";
 
 /**
  * Shape-driven blockchain / web3 10 kinds (CAR-1111 Phase 2-D)。
@@ -235,7 +237,53 @@ export function ShapeSmartContractNode({ node, active }: ShapeProps): JSX.Elemen
   );
 }
 
-/** shape-blockchain-block = 単一 block 詳細 (header + 5 fields: hash/prev/merkle/nonce/tx + chain link icon) */
+/**
+ * この絵の中の字の塊の横幅 (#469)。
+ *
+ * **等幅と比例の見積りの大きい方を取る**。 種別は `ui-monospace` を指定するが、 それが実際に
+ * 効くかは載せる側の CSS で決まる。 dragon の `cdl-theme.css` は `font-family` を `!important`
+ * で当てており、 掛かる先は `node-label` / `edge-label` / `lane-label` の 3 つ (実測) なので
+ * 今はこの絵の文字に当たらない。 とはいえ載せる側の都合で変わる値に幅の計算を預けたくない。
+ *
+ * どちらの書体で描かれても実物以上に出る側へ倒す = 下回ると「収まっていない物を収まっていると
+ * 判定」 する向きに外れる (`row-align.ts` の `rowColumnWidth` と同じ考え方)。
+ */
+const 字の幅 = (text: string, size: number): number =>
+  Math.max(displayWidth(text) * size * MONO_ADVANCE_RATIO, textWidth(text, size));
+
+/** 絵の中の 5 行の既定値。 書き手が渡さなかった欄はこれで描く (#469) */
+const BLOCK_DEFAULT_FIELDS = [
+  { label: "hash", value: "0xaf31c9d2..." },
+  { label: "prev", value: "0x7b3f92c1..." },
+  { label: "merkle", value: "0xc1892f4a..." },
+  { label: "nonce", value: "82,914" },
+  { label: "tx", value: "142 tx" },
+] as const;
+
+/** 見出しの既定値 */
+const BLOCK_DEFAULT_TITLE = "Block #421,873";
+
+/**
+ * shape-blockchain-block = 単一 block 詳細 (header + 5 fields: hash/prev/merkle/nonce/tx + chain link icon)。
+ *
+ * **書き手が渡した題と副題を描く** (#469)。 以前は絵の中の文字がすべて種別に直接
+ * 書かれていたため、 題を付けても絵に出ず、 副題に `{名前}` を置いても見える文字は 1 つも
+ * 変わらなかった (変わるのは `data-cdl-subtitle` の控えだけ)。
+ *
+ * | 描く場所 | 読む欄 |
+ * |---|---|
+ * | 見出し | `title` |
+ * | hash の値 | `subtitle` |
+ *
+ * 渡さなかった欄は既定値で描くため、 指定の無い図の見え方は変わらない。 `{名前}` の置換は
+ * `render/nodes.tsx` が先に済ませる。
+ *
+ * **残り 4 行 (prev / merkle / nonce / tx) は `rows` に開けない**。 `rows` を描く種別は
+ * `layout/spec.ts` の `rowBaselineY` が「行の baseline が node 上端から何 world 下か」 を
+ * 返す契約を負うが、 この絵は `fitArt` が node の大きさに合わせて丸ごと縮尺するため、 行の
+ * 位置が node の大きさに依存する。 `rowBaselineY(kind, index)` は node の大きさを受け取らない
+ * ので、 この種別の位置を表せない。 開くなら述語の形から変える話になる (#469 の対象外 scope)。
+ */
 export function ShapeBlockchainBlockNode({ node, active }: ShapeProps): JSX.Element {
   const frame = commonFrame(active);
   const r = shapeRegion(node);
@@ -245,6 +293,17 @@ export function ShapeBlockchainBlockNode({ node, active }: ShapeProps): JSX.Elem
   const cy = r.cy;
   const x = cx - bw / 2;
   const y = cy - bh / 2;
+
+  // 書き手の値で置き換える。 空文字と空白だけの値は「渡していない」 と同じ扱いにする
+  const 渡された = (v: string | undefined): string => (v ?? "").trim();
+  const 見出し = 渡された(node.title) || BLOCK_DEFAULT_TITLE;
+  const fields = BLOCK_DEFAULT_FIELDS.map((f) => ({
+    label: f.label,
+    value: f.label === "hash" ? 渡された(node.subtitle) || f.value : f.value,
+  }));
+
+  // 見出しは右上の丸 (半径 5.5、 中心が bw - 16) に掛からないところまで
+  const 見出しの幅 = bw - 14 - 30;
   const art = (
     <g>
       {/* 3D shadow */}
@@ -252,24 +311,18 @@ export function ShapeBlockchainBlockNode({ node, active }: ShapeProps): JSX.Elem
       <rect data-cdl-role="node-body" x={x} y={y} width={bw} height={bh} rx={8} {...frame} />
       {/* header bar */}
       <path d={`M ${x} ${y + 32} L ${x} ${y + 8} Q ${x} ${y}, ${x + 8} ${y} L ${x + bw - 8} ${y} Q ${x + bw} ${y}, ${x + bw} ${y + 8} L ${x + bw} ${y + 32} Z`} fill="var(--cdl-tone-accent, #2d6a8f)" fillOpacity={0.9} stroke="none" />
-      <text x={x + 14} y={y + 22} fontSize={13} fontWeight={700} fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace" fill="#ffffff">
-        Block #421,873
+      <text data-cdl-role="blockchain-block-title" x={x + 14} y={y + 22} fontSize={13} fontWeight={700} fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace" fill="#ffffff">
+        {幅で切る(見出し, 13, 見出しの幅, 字の幅)}
       </text>
       <circle cx={x + bw - 16} cy={y + 16} r={5.5} fill="#7cd88f" stroke="#ffffff" strokeWidth={1.5} />
       {/* fields */}
-      {[
-        { label: "hash", value: "0xaf31c9d2..." },
-        { label: "prev", value: "0x7b3f92c1..." },
-        { label: "merkle", value: "0xc1892f4a..." },
-        { label: "nonce", value: "82,914" },
-        { label: "tx", value: "142 tx" },
-      ].map((f, i) => (
+      {fields.map((f, i) => (
         <g key={i}>
           <text x={x + 14} y={y + 54 + i * 22} fontSize={10.5} fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace" fill="var(--cdl-text-dim, #5a6270)">
             {f.label}
           </text>
-          <text x={x + bw - 14} y={y + 54 + i * 22} fontSize={11} fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace" fontWeight={600} textAnchor="end" fill="var(--cdl-text, #1a1f2a)">
-            {f.value}
+          <text data-cdl-role={`blockchain-block-${f.label}`} x={x + bw - 14} y={y + 54 + i * 22} fontSize={11} fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace" fontWeight={600} textAnchor="end" fill="var(--cdl-text, #1a1f2a)">
+            {幅で切る(f.value, 11, bw - 28 - 字の幅(f.label, 10.5) - 8, 字の幅)}
           </text>
           <line x1={x + 14} y1={y + 60 + i * 22} x2={x + bw - 14} y2={y + 60 + i * 22} stroke="var(--cdl-divider, #d4d4d8)" strokeWidth={0.5} opacity={0.5} />
         </g>

package/src/kinds/shape-region.tsx

@@ -11,22 +11,16 @@
  * | 高さに依存 | 23 | 箱を大きくすると収まる。 絵が固定の寸法で描かれ、 箱の高さを見ていない |
  * | 高さに依らない | 13 | どんな箱でも出る。 幾何そのものの誤り (`#434`) |
  *
- * ## 覆えていない範囲 (#436)
+ * ## 小さい箱の読みやすさ (#459)
  *
  * **収めた分だけ絵は小さくなる**。 高さ 72 の箱に「絵 180px + 名前 + 説明 + 肩書」 を入れると
- * 絵に残るのは 28px で、 倍率 0.156 = 3px の線が 0.47px になり細部が読めない。
+ * 変更前は絵に残るのが 28px、 倍率が 0.156 になり、 3px の線も 0.47px まで細くなっていた。
  *
- * | 書いた文字 | h=72 の倍率 | 3px の線 |
- * |---|---|---|
- * | 名前だけ | 0.290 | 0.87 |
- * | + 説明 | 0.223 | 0.67 |
- * | + 説明 + 肩書 | 0.156 | 0.47 |
- *
- * 直すには「絵を優先して字を削る」 か「字を優先して絵を描かない」 かの判断が要り、 製品の
- * 方針として決める必要がある。 `#436` で扱う。
+ * 絵の帯が 45px を割る時は、 補いの行を肩書 → 説明の順で落とす。 名前は必ず残す。 高さ 72
+ * では名前だけの時と同じ倍率 0.308 まで戻り、 3px の線を約 0.92px で描ける。
  */
 import type { JSX } from "react";
-import type { LaidNode } from "../types";
+import type { LaidNode, NodeKind } from "../types";
 
 // 既存の呼出 (検査を含む) がここから取っているため、 そのまま出し直す。
 export { textWidth } from "./text-width";
@@ -66,6 +60,88 @@ export const DESCENT = 0.25;
 /** 絵と名前の塊の間に空ける量。 */
 const ART_GAP = 4;
 
+/**
+ * 絵に残す帯の下限 (`#459`)。 これを割るなら補いの行 (肩書 → 説明) を描かない。
+ *
+ * ## 値の出どころ
+ *
+ * 人型の絵は自然な大きさで縦 180 ある。 `fitArt` は帯に収まるまで一様に縮めるので、 帯が
+ * `B` なら倍率は `B / 180` になり、 絵の中の 3 の線は `3B / 180` で描かれる。
+ *
+ * 倍率 0.25 を下限に採り、 `0.25 × 180 = 45` を帯の下限とした。 この倍率で 3 の線は 0.75、
+ * 8 の字は 2 になる。
+ *
+ * ## なぜ箱の高さの割合にしないか
+ *
+ * 割合にすると中くらいの箱まで巻き込む。 高さ 106 の箱は 3 行で帯が 39 (割合 0.37) しか無く、
+ * 割合 0.65 を下限に置くと **高さ 191 未満の箱が全て** 補いの行を失う (実測)。
+ * 絵が読めるかは箱の高さではなく帯の実寸で決まるので、 実寸で判定する。
+ *
+ * ## 覆えていない範囲
+ *
+ * 下限は人型 (縦 180) を基準にした 1 つの値で、 絵の大きさが種別ごとに違うことは見ていない。
+ * 小さい絵の種別では帯が足りていても行を落とすことがある。 種別ごとの広がりは描く直前
+ * (`fitArt` の呼出) にしか分からず、 名前の塊を組む時点では手に入らない。
+ */
+const ART_MIN_BAND = 45;
+
+/** 補いの行のうち、 箱が狭くて描けなかったもの。 落とす順は肩書が先。 */
+export type DroppedLabelLine = "肩書" | "説明";
+
+/**
+ * `labelPlan` が落としても固有 layout で描く種別 (`#492`)。
+ *
+ * 肩書と説明を一括で判定してはいけない。 `shape-terminal` は肩書だけを描き、
+ * `shape-blockchain-block` は説明だけを描く。 種別単位で除外すると片方を誤報するか見逃す。
+ *
+ * 描き方は配置結果から分からないため一覧を持つ。 `test/shared-label-plan-kinds.test.tsx` が全
+ * `shape-` 種別の両方の行を実際に描き、 一覧との一致を確かめる。
+ */
+const 落としても描く種別: Readonly<Record<DroppedLabelLine, ReadonlySet<NodeKind>>> = {
+  肩書: new Set([
+    // basement 系 = `commonLabel` が自前の帯に置く
+    "shape-file",
+    "shape-folder",
+    "shape-cloud",
+    "shape-cylinder",
+    "shape-hexagon",
+    "shape-diamond",
+    "shape-stack",
+    // software 系 = 固有 layout
+    "shape-window",
+    "shape-terminal",
+    "shape-code-block",
+    "shape-message-bubble",
+    "shape-gear",
+    // hardware 系のうち固有 layout を持つもの
+    "shape-iot-sensor",
+    "shape-robot-arm",
+  ]),
+  説明: new Set([
+    // basement 系 = `commonLabel` が自前の帯に置く
+    "shape-file",
+    "shape-folder",
+    "shape-cloud",
+    "shape-cylinder",
+    "shape-hexagon",
+    "shape-diamond",
+    "shape-stack",
+    // software 系 = 固有 layout
+    "shape-window",
+    "shape-message-bubble",
+    "shape-gear",
+    // hardware / blockchain 系のうち固有 layout を持つもの
+    "shape-iot-sensor",
+    "shape-robot-arm",
+    "shape-blockchain-block",
+  ]),
+};
+
+/** この種別で、共有 plan が落とした特定の行が実際にも描かれないか。 */
+export function droppedLineIsHidden(kind: NodeKind, line: DroppedLabelLine): boolean {
+  return kind.startsWith("shape-") && !落としても描く種別[line].has(kind);
+}
+
 /** 名前の塊の 1 行。 */
 export type LabelLine = { y: number; size: number };
 
@@ -91,6 +167,13 @@ export function labelPlan(node: LaidNode): {
    * なる (高さ 53 で実測、 review 指摘)。 一番小さい行で判定する。
    */
   読める: boolean;
+  /**
+   * 箱が狭くて描かなかった補いの行 (`#459`)。 書いていない行は載らない。
+   *
+   * 書き手に「書いた文字が出ていない」 を伝えるための出口。 描画側は行が `null` かどうかだけを
+   * 見るので、 この欄は伝えるためだけに持つ。
+   */
+  落とした: DroppedLabelLine[];
 } {
   const 高さ = Math.max(0, node.h);
   const 底 = node.cy + 高さ / 2;
@@ -125,33 +208,67 @@ export function labelPlan(node: LaidNode): {
 
   let 説明あり = Boolean(node.subtitle);
   let 肩書あり = Boolean(node.eyebrow);
-  if (!入る(説明あり, 肩書あり)) 肩書あり = false;
-  if (!入る(説明あり, 肩書あり)) 説明あり = false;
-
-  // 箱に入る一番大きい字を探す。 上限は「高さに比例」 と「読める上限」 の小さい方
-  const 上限 = Math.min(TITLE_MAX, Math.max(1, Math.round(高さ * TITLE_RATIO)));
-  let 名前大 = 0;
-  for (let size = 上限; size >= 1; size--) {
-    const 小さい字 = Math.max(1, Math.round(size * SUB_RATIO));
-    const 下の行大 = 説明あり ? 小さい字 : size;
-    if (積む(size, 説明あり, 肩書あり, 下の行大 * DESCENT).上端 >= 天) {
-      名前大 = size;
-      break;
-    }
+  const 落とした: DroppedLabelLine[] = [];
+  if (!入る(説明あり, 肩書あり) && 肩書あり) {
+    肩書あり = false;
+    落とした.push("肩書");
+  }
+  if (!入る(説明あり, 肩書あり) && 説明あり) {
+    説明あり = false;
+    落とした.push("説明");
   }
 
-  // **1 でも入らない箱がある**。 名前 1 行でも上下の張り出しで 0.97 要るため、 高さ 0.97 未満の
-  // 箱では整数の大きさに解が無い (review 指摘)。 名前は落とせないので、 ちょうど入る大きさまで
-  // 下げる。 見えない字にはなるが、 箱の外へ出て隣の領域を汚すよりは良い
-  if (名前大 === 0) 名前大 = 高さ / (ASCENT + DESCENT);
+  /** 描く行を決めた上で、 字の大きさと baseline を決める。 */
+  const 組む = (説明あり: boolean, 肩書あり: boolean) => {
+    // 箱に入る一番大きい字を探す。 上限は「高さに比例」 と「読める上限」 の小さい方
+    const 上限 = Math.min(TITLE_MAX, Math.max(1, Math.round(高さ * TITLE_RATIO)));
+    let 名前大 = 0;
+    for (let size = 上限; size >= 1; size--) {
+      const 小さい字 = Math.max(1, Math.round(size * SUB_RATIO));
+      const 下の行大 = 説明あり ? 小さい字 : size;
+      if (積む(size, 説明あり, 肩書あり, 下の行大 * DESCENT).上端 >= 天) {
+        名前大 = size;
+        break;
+      }
+    }
+
+    // **1 でも入らない箱がある**。 名前 1 行でも上下の張り出しで 0.97 要るため、 高さ 0.97 未満の
+    // 箱では整数の大きさに解が無い (review 指摘)。 名前は落とせないので、 ちょうど入る大きさまで
+    // 下げる。 見えない字にはなるが、 箱の外へ出て隣の領域を汚すよりは良い
+    if (名前大 === 0) 名前大 = 高さ / (ASCENT + DESCENT);
 
-  // 下の余白は余った分までしか取れない。 固定の 4 を無条件に取ると塊が上へ出る
-  const 小さい字 = Math.max(1, Math.round(名前大 * SUB_RATIO));
-  const 張り出し = (説明あり ? 小さい字 : 名前大) * DESCENT;
-  const 余り = Math.max(0, 積む(名前大, 説明あり, 肩書あり, 張り出し).上端 - 天);
-  const 下余白 = Math.min(Math.max(BOTTOM_PAD, 張り出し), 張り出し + 余り);
+    // 下の余白は余った分までしか取れない。 固定の 4 を無条件に取ると塊が上へ出る
+    const 小さい字 = Math.max(1, Math.round(名前大 * SUB_RATIO));
+    const 張り出し = (説明あり ? 小さい字 : 名前大) * DESCENT;
+    const 余り = Math.max(0, 積む(名前大, 説明あり, 肩書あり, 張り出し).上端 - 天);
+    const 下余白 = Math.min(Math.max(BOTTOM_PAD, 張り出し), 張り出し + 余り);
+
+    return 積む(名前大, 説明あり, 肩書あり, 下余白);
+  };
+
+  /** この組み方で絵に残る帯。 `shapeRegion` が使う式と同じものをここでも使う。 */
+  const 絵の帯 = (組: ReturnType<typeof 組む>): number => Math.max(0, 組.上端 - ART_GAP - 天);
+
+  // 絵に残る帯が下限を割るなら、 補いの行を落として絵に譲る (#459)。
+  //
+  // **落とす順は肩書 → 説明で、 名前は落とさない**。 名前が無い箱は何を指しているか分からず、
+  // 絵が読めても図の意味が失われる。
+  //
+  // 絵を描かない案 (`#459` の案 B) は採らない = `shape-` は種別ごとの絵を持つことが存在理由で、
+  // 絵を落とすと `card` と区別が付かなくなる。 種別ごとに簡略版の絵を持つ案 (案 C) は 49 種
+  // それぞれに絵を足すことになり、 本 Issue の範囲を超える。
+  let 組 = 組む(説明あり, 肩書あり);
+  if (絵の帯(組) < ART_MIN_BAND && 肩書あり) {
+    肩書あり = false;
+    落とした.push("肩書");
+    組 = 組む(説明あり, 肩書あり);
+  }
+  if (絵の帯(組) < ART_MIN_BAND && 説明あり) {
+    説明あり = false;
+    落とした.push("説明");
+    組 = 組む(説明あり, 肩書あり);
+  }
 
-  const 組 = 積む(名前大, 説明あり, 肩書あり, 下余白);
   const 一番小さい行 = Math.min(
     ...[組.名前, 組.説明, 組.肩書].filter((l) => l !== null).map((l) => l.size),
   );
@@ -161,6 +278,7 @@ export function labelPlan(node: LaidNode): {
     肩書: 組.肩書,
     top: 組.上端,
     読める: 一番小さい行 >= TITLE_MIN,
+    落とした,
   };
 }
 

package/src/kinds/tree.tsx

@@ -1,6 +1,8 @@
 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";
 
 /**
  * tree-hierarchy kind ... 1 node に tree node 配列 (treeData) を保持し、
@@ -11,10 +13,55 @@ import { TONE } from "../render/tone";
  *   - depth 1+ は tone 別 accent の left-border + 白 fill card
  *   - parent-child edge は elbow line + 中間 join dot で「分岐点」 を強調
  */
-export function TreeNode({ node, active }: { node: LaidNode; active: boolean }): JSX.Element {
+/**
+ * 箱の中に名前と補足を積んで描く (#471)。
+ *
+ * 補足が無い node は呼ばない = 従来の 1 行の `<text>` をそのまま残すため。 積む形に寄せると
+ * baseline の出し方が変わり、 補足を渡していない既存の図まで文字の位置が動く。
+ */
+function 箱の文字({
+  行,
+  x,
+  箱の高さ,
+  fill,
+  名前の太さ,
+}: {
+  行: 積んだ行[];
+  x: number;
+  箱の高さ: number;
+  fill: string;
+  名前の太さ: number;
+}): JSX.Element[] {
+  return 行.map((r) => (
+    <text
+      key={r.役割}
+      data-cdl-role={r.役割 === "subtitle" ? "tree-node-subtitle" : undefined}
+      x={x}
+      y={箱の高さ / 2 + r.dy}
+      fontSize={r.fontSize}
+      fontWeight={r.役割 === "title" ? 名前の太さ : 500}
+      textAnchor="middle"
+      fill={fill}
+      opacity={r.役割 === "subtitle" ? 0.85 : undefined}
+    >
+      {r.text}
+    </text>
+  ));
+}
+
+export function TreeNode({
+  node,
+  active,
+  stateValues = {},
+}: {
+  node: LaidNode;
+  active: boolean;
+  stateValues?: Record<string, string>;
+}): JSX.Element {
   const x0 = node.cx - node.w / 2;
   const y0 = node.cy - node.h / 2;
-  const treeNodes = node.treeData ?? [];
+  // 名前は状態を読める (#467)。 解決できない名前は書いたまま残して印を付ける
+  const treeNodes = resolveTreeData(node.treeData ?? [], stateValues);
   const gradientId = `tree-root-grad-${node.id}`;
 
   const PAD_TOP = 40;
@@ -78,8 +125,24 @@ export function TreeNode({ node, active }: { node: LaidNode; active: boolean }):
       {layout.nodes.map((n) => {
         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,
+        );
+        // **判定は行数でなく「補足を渡したか」 で行う**。 行数で見ると、 箱が低くて補足が落ちた時に
+        // 従来の 1 行の経路へ戻り、 幅で切っていない名前が箱から横にはみ出す (#471 Round 1)
+        const 補足あり = (n.subtitle ?? "").trim() !== "";
         return (
-          <g key={`n-${n.id}`} transform={`translate(${PAD_LEFT + n.x - n.w / 2} ${PAD_TOP + n.y - n.h / 2})`}>
+          <g
+            key={`n-${n.id}`}
+            data-cdl-unresolved={n.unresolved ? "true" : undefined}
+            transform={`translate(${PAD_LEFT + n.x - n.w / 2} ${PAD_TOP + n.y - n.h / 2})`}
+          >
             {isRoot ? (
               <>
                 <rect
@@ -91,16 +154,26 @@ export function TreeNode({ node, active }: { node: LaidNode; active: boolean }):
                   rx={12}
                   fill={`url(#${gradientId})`}
                 />
-                <text
-                  x={n.w / 2}
-                  y={n.h / 2 + 5}
-                  fontSize={13}
-                  fontWeight={700}
-                  textAnchor="middle"
-                  fill="var(--cdl-text-on-tone, #ffffff)"
-                >
-                  {n.title}
-                </text>
+                {補足あり ? (
+                  箱の文字({
+                    行,
+                    x: n.w / 2,
+                    箱の高さ: n.h,
+                    fill: "var(--cdl-text-on-tone, #ffffff)",
+                    名前の太さ: 700,
+                  })
+                ) : (
+                  <text
+                    x={n.w / 2}
+                    y={n.h / 2 + 5}
+                    fontSize={13}
+                    fontWeight={700}
+                    textAnchor="middle"
+                    fill="var(--cdl-text-on-tone, #ffffff)"
+                  >
+                    {n.title}
+                  </text>
+                )}
               </>
             ) : (
               <>
@@ -116,16 +189,26 @@ export function TreeNode({ node, active }: { node: LaidNode; active: boolean }):
                   strokeWidth={1.5}
                 />
                 <rect x={0} y={0} width={4} height={n.h} rx={2} fill={accent} />
-                <text
-                  x={n.w / 2 + 2}
-                  y={n.h / 2 + 4}
-                  fontSize={12}
-                  fontWeight={600}
-                  textAnchor="middle"
-                  fill="var(--cdl-chip-text, #1a1f2a)"
-                >
-                  {n.title}
-                </text>
+                {補足あり ? (
+                  箱の文字({
+                    行,
+                    x: n.w / 2 + 2,
+                    箱の高さ: n.h,
+                    fill: "var(--cdl-chip-text, #1a1f2a)",
+                    名前の太さ: 600,
+                  })
+                ) : (
+                  <text
+                    x={n.w / 2 + 2}
+                    y={n.h / 2 + 4}
+                    fontSize={12}
+                    fontWeight={600}
+                    textAnchor="middle"
+                    fill="var(--cdl-chip-text, #1a1f2a)"
+                  >
+                    {n.title}
+                  </text>
+                )}
               </>
             )}
           </g>
@@ -138,11 +221,15 @@ export function TreeNode({ node, active }: { node: LaidNode; active: boolean }):
 type LayoutNode = {
   id: string;
   title: string;
+  /** 箱の 2 行目に出す補足 (#471) */
+  subtitle?: string;
   x: number;
   y: number;
   w: number;
   h: number;
   depth: number;
+  /** 名前を状態から解決できなかった項目に付く印 (#467) */
+  unresolved?: true;
 };
 
 export function computeTreeLayout(
@@ -231,7 +318,17 @@ export function computeTreeLayout(
     }
     const y = depth * depthGap + depthGap / 2;
     posOf.set(n.id, { x, y });
-    nodes.push({ id: n.id, title: n.title, x, y, w: nodeW, h: nodeH, depth });
+    nodes.push({
+      id: n.id,
+      title: n.title,
+      ...(n.subtitle !== undefined ? { subtitle: n.subtitle } : {}),
+      x,
+      y,
+      w: nodeW,
+      h: nodeH,
+      depth,
+      ...((n as { unresolved?: true }).unresolved ? { unresolved: true as const } : {}),
+    });
     return x;
   };
   for (const r of roots) if (!placed.has(r.id)) place(r, 0);

package/src/layout/collisions.ts

@@ -1,5 +1,6 @@
 import type { BBox, LaidEdge, LaidLane, LaidNode } from "../types";
 import { CHAIN_SHIFT_MAX_ACCUMULATED, computeLabelBBoxWorld, EDGE_STUB_OUT, hasRenderedLabel, LABEL_TO_PATH_CLEARANCE, requiredNearClearance } from "./spec";
+import { footerShapeDrops } from "./footer-shape";
 import { measureTextWidth } from "./text-width";
 
 /**
@@ -26,14 +27,21 @@ export function collectBBoxes(lanes: LaidLane[], nodes: LaidNode[], edges: LaidE
     });
   }
 
+  // 下端の名札は絵が箱の上端より上へ出る (`SHAPE_DRAW_UP_EXTENT`)。 出た分を外接矩形に
+  // 含めないと、 描かれている範囲と衝突 / 近接の判定材料が食い違う (#478)。
+  //
+  // 名札を集める条件は `lifelineFooterNodes` が唯一持ち、 出る量は種別と箱の高さだけで
+  // 決まるので、 名札を下げた後に呼んでも同じ値になる。
+  const footerDraw = footerShapeDrops(lanes, nodes);
   for (const n of nodes) {
+    const up = footerDraw.get(n.id) ?? 0;
     out.push({
       kind: "node",
       id: n.id,
       x: n.cx - n.w / 2,
-      y: n.cy - n.h / 2,
+      y: n.cy - n.h / 2 - up,
       w: n.w,
-      h: n.h,
+      h: n.h + up,
     });
   }