@cardenelabs/cdl 0.7.0 → 0.10.0

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

@@ -2,6 +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";
 
 /**
  * tree-hierarchy kind ... 1 node に tree node 配列 (treeData) を保持し、
@@ -12,6 +13,42 @@ import { resolveTreeData } from "../render/payload-binding";
  *   - depth 1+ は tone 別 accent の left-border + 白 fill card
  *   - parent-child edge は elbow line + 中間 join dot で「分岐点」 を強調
  */
+/**
+ * 箱の中に名前と補足を積んで描く (#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,
@@ -88,6 +125,18 @@ export function TreeNode({
       {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}`}
@@ -105,16 +154,26 @@ export function TreeNode({
                   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>
+                )}
               </>
             ) : (
               <>
@@ -130,16 +189,26 @@ export function TreeNode({
                   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>
@@ -152,6 +221,8 @@ export function TreeNode({
 type LayoutNode = {
   id: string;
   title: string;
+  /** 箱の 2 行目に出す補足 (#471) */
+  subtitle?: string;
   x: number;
   y: number;
   w: number;
@@ -250,6 +321,7 @@ export function computeTreeLayout(
     nodes.push({
       id: n.id,
       title: n.title,
+      ...(n.subtitle !== undefined ? { subtitle: n.subtitle } : {}),
       x,
       y,
       w: nodeW,

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,
     });
   }
 

package/src/layout/footer-shape.ts

@@ -28,35 +28,45 @@ export const SHAPE_DRAW_UP_EXTENT: Readonly<Record<string, number>> = {
 /**
  * 縦線を持つ lane の **下端の名札** を集める。
  *
- * 順序図は lane ごとに上端と下端へ名札を置く。 node が 1 つ以下の lane は下端の名札を持たない
- * (上端だけ、 もしくは空) ため対象から外す。
+ * 判定は node の `role` で行う。 順序図を組み立てる側 (`presets.ts` の `build()`) が
+ * `role: "lifeline-footer"` を付けるため、 描画側は位置を見る必要が無い。
  *
- * 縦線の終点 (`CdlStage`) と絵を下げる量 (`footerShapeDrops`) と図の下端 (`computeViewBox`) の
- * 3 箇所が同じ名札を指す必要があるため、 「どれが下端の名札か」 の判定をここに 1 つだけ置く。
+ * **位置で推測していた形は誤りだった** (`#458`)。 「node が 2 つ以上ある lane の一番下」 と
+ * 決めていたため、 手で組んだ図で一番下が名札でない `shape-` の node だと、 その絵が下がった。
+ *
+ * 目印に加えて 2 つの条件を見る。 どちらも **どれが名札かの判定ではなく、 名札として扱うと
+ * 図が壊れる形を除く** ためのもの。
+ *
+ * | 条件 | 除く理由 |
+ * |---|---|
+ * | `lane.lifeline` が真 | 縦線が無い lane では絵を下げる理由 (縦線と絵の重なり) が起きない |
+ * | その lane に node が 2 つ以上 | 1 つしか無い lane の唯一の node を名札にすると縦線が退化する |
+ *
+ * 2 つ目は実測に基づく。 縦線の終点は **全 lane で 1 つに揃える** ため、 名札の位置が異常な lane が
+ * 1 つあるだけで図の全 lane から縦線が消えていた (1 node の lane を名札にして実測、 通常の lane と
+ * 混在させても全て消えた)。 1 node の lane にあるのは上端の名札のはずで、 それを下端として扱う形
+ * 自体が誤り。 終点の選び方そのものは `uniformLifelineEndY` (`#479`) が直した。
+ *
+ * 同じ lane に名札が複数あれば全て返す = 数を絞る根拠が無く、 絞るとどれを残すかで再び位置の
+ * 推測に戻る。
+ *
+ * 縦線の終点 (`uniformLifelineEndY`) と絵を下げる量 (`applyFooterShapeDrops`) と外接矩形
+ * (`collectBBoxes`) が同じ名札を指す必要があるため、 「どれが下端の名札か」 の判定をここに
+ * 1 つだけ置く。
  */
 export function lifelineFooterNodes(lanes: LaidLane[], nodes: LaidNode[]): LaidNode[] {
-  // lane ごとに node を集める索引を 1 度だけ作る。 lane ごとに全 node を走査すると
-  // lane 数 × node 数に膨らみ、 `CdlStage` は動きの 1 コマごとに描き直すため毎コマ払う
-  const byLane = new Map<string, LaidNode[]>();
-  for (const n of nodes) {
-    const inside = byLane.get(n.lane);
-    if (inside) inside.push(n);
-    else byLane.set(n.lane, [n]);
-  }
-  const footers: LaidNode[] = [];
+  // lane ごとの node 数を 1 度だけ数える。 node ごとに全 node を走査すると node 数の 2 乗に
+  // 膨らみ、 `CdlStage` は動きの 1 コマごとに描き直すため毎コマ払う
+  const 数 = new Map<string, number>();
+  for (const n of nodes) 数.set(n.lane, (数.get(n.lane) ?? 0) + 1);
+
+  const lifelineLanes = new Set<string>();
   for (const lane of lanes) {
-    if (!lane.lifeline) continue;
-    const inside = byLane.get(lane.id);
-    if (inside === undefined || inside.length < 2) continue;
-    // 一番下 = cy が最大。 並べ替えずに 1 回の走査で選ぶ。 同じ cy が複数ある時は
-    // **後に現れた方** を採る (安定な並べ替えで末尾を取るのと同じ結果にする)
-    let footer = inside[0]!;
-    for (const n of inside) {
-      if (n.cy >= footer.cy) footer = n;
-    }
-    footers.push(footer);
+    if (lane.lifeline) lifelineLanes.add(lane.id);
   }
-  return footers;
+  return nodes.filter(
+    (n) => n.role === "lifeline-footer" && lifelineLanes.has(n.lane) && (数.get(n.lane) ?? 0) >= 2,
+  );
 }
 
 /**
@@ -95,3 +105,55 @@ export function footerShapeDropsOf(footers: LaidNode[]): Map<string, number> {
   }
   return drops;
 }
+
+/**
+ * 下端の名札を、 下げる量だけ実際に動かす (`#478`)。
+ *
+ * **`cy` は「箱の中心」 のまま**。 絵は箱の下端を基準に組み立てられるため、 箱を動かせば
+ * 絵も同じだけ動く。 絵の上端は `cy + h / 2 - SHAPE_DRAW_UP_EXTENT[kind]` で、 箱と
+ * `SHAPE_DRAW_UP_EXTENT` から一意に導ける (`footerShapeDrawTop`)。
+ *
+ * ## 描画だけを動かす形を採らない理由
+ *
+ * 元は描画側が名札を包む `<g>` に `translate(0, dy)` を掛けており、 **箱ごと下へ動いて
+ * 見えるのに座標は元のまま** だった。 `cy` も `data-cdl-cy` も外接矩形も動かないため、
+ * 座標を読む側 (縦線の終点 / 図の下端 / 外接矩形 / 矢印の接続先) が実際の描画と食い違う。
+ *
+ * ## 「絵」 ではなく「箱」 を `cy` とする理由
+ *
+ * `cy` / `w` / `h` は全ての種別で **箱** を表し、 矢印の接続先 / 当たり判定 / `data-cdl-cy` /
+ * 絵の組み立ての原点がこの意味に依存している。 一部の種別だけ `cy` を絵の中心に変えると、
+ * 同じ field が node によって別の意味を持つ。
+ *
+ * 絵の範囲は箱から導けるが、 逆は導きにくい = 絵を `cy` にすると箱の位置を出すのに同じ
+ * `SHAPE_DRAW_UP_EXTENT` が要り、 依存の向きが 1 つ増えるだけで得るものが無い。
+ *
+ * ## 下げる量は位置に依存しない
+ *
+ * `footerShapeDropY` が見るのは種別と箱の高さだけなので、 動かした後に呼び直しても同じ値を
+ * 返す。 したがって後段が名札をさらに動かしても、 絵の上端は常に
+ * `cy + h / 2 - extent` として正しく導ける。
+ */
+export function applyFooterShapeDrops(lanes: LaidLane[], nodes: LaidNode[]): LaidNode[] {
+  const drops = footerShapeDrops(lanes, nodes);
+  if (drops.size === 0) return nodes;
+  return nodes.map((n) => {
+    // posX / posY が揃った node は「指定した位置から動かさない」公開契約。 絵が箱の上へ出る
+    // 範囲は collectBBoxes / footerShapeDrawTop が扱うため、 絶対配置を崩してまで箱を下げない。
+    if (n.posX !== undefined && n.posY !== undefined) return n;
+    const dy = drops.get(n.id);
+    return dy === undefined ? n : { ...n, cy: n.cy + dy };
+  });
+}
+
+/**
+ * 下げた名札の **絵の上端**。 縦線の終点と外接矩形の上端がこの値を使う。
+ *
+ * 絵は箱の下端から上へ `SHAPE_DRAW_UP_EXTENT` 伸びるので、 上端は `cy + h / 2 - extent`。
+ * 下げた量が `extent - h` である分、 これは `cy - h / 2 - 下げた量` と等しい。
+ *
+ * 下げていない名札 (箱に収まる種別 / 収まる高さ) では箱の上端をそのまま返す。
+ */
+export function footerShapeDrawTop(node: LaidNode): number {
+  return node.cy - node.h / 2 - footerShapeDropY(node.kind, node.h);
+}

package/src/layout/lifeline.ts

@@ -0,0 +1,80 @@
+import type { LaidLane, LaidNode } from "../types";
+import { footerShapeDrawTop, lifelineFooterNodes } from "./footer-shape";
+
+/**
+ * lane ごとの縦線の始点 = その lane の一番上の node の下端。
+ *
+ * node を 1 つも持たない lane は載せない (縦線を引く相手が無い)。
+ *
+ * 一番上は `cy` の小さい順で決める。 同値なら先に現れた node を採る = 並べ替えてから先頭を
+ * 採る形と同じ結果になる。
+ */
+export function lifelineStartYs(nodes: LaidNode[]): Map<string, number> {
+  const topmost = new Map<string, LaidNode>();
+  for (const n of nodes) {
+    const cur = topmost.get(n.lane);
+    if (cur === undefined || n.cy < cur.cy) topmost.set(n.lane, n);
+  }
+  const starts = new Map<string, number>();
+  for (const [laneId, n] of topmost) starts.set(laneId, n.cy + n.h / 2);
+  return starts;
+}
+
+/**
+ * 全 lane で揃える縦線の終点。 **下端の名札の絵の上端の最小値** を返す。
+ *
+ * 1 つの値を全 lane で共有することが元からの設計意図で、 これが全 lane の縦線を同じ高さで
+ * 終わらせる。
+ *
+ * ## 終点に選べる名札を絞る (`#479`)
+ *
+ * 全ての名札から最小値を採ると、 **絵の上端が他の lane の始点より上にある名札が 1 つあるだけで
+ * 図の全 lane から縦線が消える**。 終点は全 lane 共通なのに、 描くかどうかの判定
+ * (`終点 > 始点`) は lane ごとに行うため、 1 つの lane の異常が図全体に伝わる。
+ *
+ * 実測 (`#458` の Round 3)。 目印の付いた node が lane の一番上にある lane に通常の lane を
+ * 混ぜると、 通常の lane の縦線まで 1 本も描かれなかった。
+ *
+ * そこで **絵の上端が全 lane の始点の最大値より下にある名札だけ** を候補にする。 終点がどの lane の
+ * 始点より上にも来なくなるため、 候補が 1 つでもあれば全 lane の縦線が描かれる。 名札が
+ * 正常な図では 1 つも外れないので、 終点の値は 1 mm も変わらない。
+ *
+ * 「自分の lane の始点より下か」 で絞る形は採らない。 自分の lane では正常でも他の lane の
+ * 始点より上にある名札が残り、 その lane の縦線が消える形が閉じない。 終点は全 lane 共通なので、
+ * 絞る基準も全 lane の始点で見るのが筋。
+ *
+ * ## 却下 = 最小値を始点の最大値で下限を切る
+ *
+ * 最小値をそのまま採り、 `Math.max(最小値, 始点の最大値)` で下限を切る形も実装して測った。
+ * **この図では縦線が 1 本も描かれない**。 lane の並びが揃った図では全 lane の始点が同値になり、
+ * 下限を切った終点が全 lane の始点と一致する = `終点 > 始点` をどの lane も満たさない。
+ * 下限は「始点より上に来ない」 ことしか保証せず、 描画が要求する「始点より下」 に届かない。
+ *
+ * ## 候補が 1 つも残らない図
+ *
+ * 名札が全て異常な図では選べる終点が無いため、 名札を持たない図と同じ fallback (最初の
+ * 縦線 lane の下端) に落とす。 lane は自分の node を含む高さを持つので、 通常はどの始点よりも
+ * 下に来る。
+ */
+export function uniformLifelineEndY(
+  lanes: LaidLane[],
+  nodes: LaidNode[],
+  starts: Map<string, number> = lifelineStartYs(nodes),
+): number {
+  const lifelineLanes = lanes.filter((l) => l.lifeline);
+
+  let deepestStart = Number.NEGATIVE_INFINITY;
+  for (const lane of lifelineLanes) {
+    const start = starts.get(lane.id);
+    if (start !== undefined) deepestStart = Math.max(deepestStart, start);
+  }
+
+  // 名札の絵が箱の上端より上へ出る種別では、 縦線は **絵の上端** で止める (#417 / #478)。
+  // 箱の上端で止めると出た分だけ縦線が絵の中を通る。
+  const footerTops = lifelineFooterNodes(lanes, nodes)
+    .map((f) => footerShapeDrawTop(f))
+    .filter((top) => top > deepestStart);
+
+  if (footerTops.length > 0) return Math.min(...footerTops);
+  return lifelineLanes[0] ? lifelineLanes[0].y + lifelineLanes[0].height : 0;
+}

package/src/layout/spec.ts

@@ -87,8 +87,6 @@ const KINDS_WITHOUT_TITLE_TEXT: ReadonlySet<string> = new Set([
   "quadrant-matrix",
   "tree-hierarchy",
   "journey-map",
-  // 形の中に自前の文字を置く (title は使わない)
-  "shape-blockchain-block",
 ]);
 
 /**
@@ -104,6 +102,27 @@ export function rendersTitleText(kind: string | undefined): boolean {
   return !KINDS_WITHOUT_TITLE_TEXT.has(kind ?? "");
 }
 
+/**
+ * 自分で `title` を描く幅に合わせて切る種別 (#469)。
+ *
+ * `text-readability` (軸 3) は種別によらず「字数 × 22 + 52 が node 幅を超えるか」 で切れるかを
+ * 見る。 22 は `kinds/storage.tsx` の字の大きさで、 それより小さい字で描く種別には当たらない。
+ *
+ * `shape-blockchain-block` は 13 で描き、 しかも絵ごと `fitArt` で縮尺するため、 字数から幅を
+ * 出す近似が実物と大きくずれる (実測 = 幅 280 の箱に 11 字を渡すと、 描画は 1 字も落とさないのに
+ * 軸は期待幅 294 として警告した)。 種別自身が描く幅に合わせて切るので、 超えて切れることが
+ * そもそも起きない。
+ *
+ * **`rendersTitleText` とは別の述語にする**。 あちらは「文字として描くか」 で、 RTL / CJK / bidi の
+ * 判定はこの種別にも当てたい。 ここで見るのは「幅の近似が当たるか」 だけになる。
+ */
+const KINDS_FITTING_OWN_TITLE: ReadonlySet<string> = new Set(["shape-blockchain-block"]);
+
+/** その node が `title` を自分で幅に合わせて切るか (SSOT) */
+export function fitsOwnTitleWidth(kind: string | undefined): boolean {
+  return KINDS_FITTING_OWN_TITLE.has(kind ?? "");
+}
+
 /**
  * `rows` を文字として描く node の種別。
  *