@cardenelabs/cdl 0.83.0 → 0.102.0

package/src/kinds/shape-region.tsx

@@ -27,6 +27,40 @@ import { textWidth } from "./text-width";
 // 既存の呼出 (検査を含む) がここから取っているため、 そのまま出し直す。
 export { textWidth } from "./text-width";
 
+/**
+ * 書いた値があればそれを、無ければ控えの固定語を返す (#927)。
+ *
+ * 絵の中に文字を置く種別は、見本として固定語を描いている。 書いた値をそこへ通さないと、
+ * 同じ種別がどの図でも 1 文字も変わらない絵になる (見本帳の 486 枚で 8 件が黙って消えていた)。
+ *
+ * **空白だけの値は書いていない扱いにする**。 通すと絵の中の字の口が空欄になり、
+ * 控えを描く場合より読めなくなる。
+ */
+export function 書いた値か控え(書いた: string | undefined, 控え: string): string {
+  const v = (書いた ?? "").trim();
+  return v === "" ? 控え : v;
+}
+
+/**
+ * 字の行を決めた幅に収める倍率 (#927 で `shape-blockchain.tsx` から移した)。
+ *
+ * 字間は字の大きさに追随しないため、 大きさだけを縮めても幅は `字間 x 字数` より狭く
+ * ならない。 大きさと字間を同じ倍率で縮めると、 両項が揃って縮むので幅が倍率に比例する。
+ *
+ * 収まっている間は 1 を返す = 箱が広い時の見え方を変えない。
+ */
+export function 幅の倍率(
+  text: string,
+  size: number,
+  letterSpacing: number,
+  幅: number,
+): number {
+  if (!(幅 > 0) || !(size > 0)) return 1;
+  // 階級表を二重に持つと、 片方を直した時にもう片方だけ古くなる。
+  const 実幅 = textWidth(text, size, letterSpacing);
+  return 実幅 > 幅 ? 幅 / 実幅 : 1;
+}
+
 /** 名前の字の大きさの上限。 大きい箱ではここに当たり、 今までの見え方を保つ。 */
 const TITLE_MAX = 18;
 
@@ -115,7 +149,10 @@ const 落としても描く種別: Readonly<Record<DroppedLabelLine, ReadonlySet
     "shape-code-block",
     "shape-message-bubble",
     "shape-gear",
-    // hardware 系のうち固有 layout を持つもの
+    // 絵の中の字の口に肩書を通す 2 種別 (#941)。 状態の札 / 見出しの帯の右 に描く
+    "shape-kanban-card",
+    "shape-blockchain-block",
+    // hardware / blockchain 系のうち固有 layout を持つもの
     "shape-iot-sensor",
     "shape-robot-arm",
   ]),
@@ -132,6 +169,10 @@ const 落としても描く種別: Readonly<Record<DroppedLabelLine, ReadonlySet
     "shape-window",
     "shape-message-bubble",
     "shape-gear",
+    // 絵の中の字の口に説明を通す 3 種別 (#927)。 札の file 名 / 出力の行 / 課題の 1 行 に描く
+    "shape-terminal",
+    "shape-code-block",
+    "shape-kanban-card",
     // hardware / blockchain 系のうち固有 layout を持つもの
     "shape-iot-sensor",
     "shape-robot-arm",

package/src/kinds/shape-software.tsx

@@ -1,7 +1,13 @@
 import type { JSX } from "react";
 import type { LaidNode } from "../types";
 import { 字引きを作る, type CdlLang } from "../lang";
-import { 打ち消しの倍率, type 打ち消す字 } from "./shape-region";
+import {
+  textWidth,
+  打ち消しの倍率,
+  幅の倍率,
+  書いた値か控え,
+  type 打ち消す字,
+} from "./shape-region";
 
 /**
  * Shape-driven software 6 kinds (CAR-1111 Phase 2-B)。
@@ -224,12 +230,14 @@ export function ShapeTerminalNode({ node, active, lang }: ShapeProps): JSX.Eleme
   const 先頭 = 26;
   const 行間 = 22;
   const カーソル = { 左: 30, 幅: 9, 高: 14, 上: 11, 下: 3 };
+  // 出力の行に書いた説明を通す (#927)。 通さないと、どの端末も同じ 1 行を出す絵になる
+  const 出力 = 書いた値か控え(node.subtitle, 字引("terminal.output"));
   const 行 = [
     [
       { 左: 16, 字: 12.5, 色: "#7cd88f", 文: "$" },
       { 左: 30, 字: 12.5, 色: "#e6edf3", 文: "pnpm build" },
     ],
-    [{ 左: 16, 字: 12.5, 色: "#8b95a5", 文: 字引("terminal.output") }],
+    [{ 左: 16, 字: 12.5, 色: "#8b95a5", 文: 出力 }],
     [{ 左: 16, 字: 12.5, 色: "#7cd88f", 文: "$" }],
   ];
   // 中身は自分の座標で描くため、 本体に入る倍率を出せるよう最長行から自然幅を求める。
@@ -347,7 +355,16 @@ export function ShapeCodeBlockNode({ node, active, lang }: ShapeProps): JSX.Elem
   // 42 は従来どおり名前の行に空け、 低い箱では負の本体を作らないための取り分。
   const bodyH = Math.max(0, node.h - 42 - 線 * 2);
   const lineFont = "ui-monospace, SFMono-Regular, Menlo, monospace";
-  const タブ幅 = 100;
+  // 札の file 名に書いた説明を通す (#927)。 通さないと、どの code 欄も同じ札を出す絵になる
+  const 札 = 書いた値か控え(node.subtitle, 字引("codeBlock.fileName"));
+  const 札の字 = 11;
+  /*
+   * 札の幅は書いた値に合わせて広げる。
+   *
+   * 固定のままだと、控えより長い値を渡した図で字が札からはみ出す。 本体の幅を上限に置くのは、
+   * 札が本体より広くなると `path` で描く角丸が本体の右端を越えるため。
+   */
+  const タブ幅 = Math.min(Math.max(100, textWidth(札, 札の字, 0) + 24), Math.max(0, w));
   const タブ高 = 24;
   const 角 = 10;
   const 溝 = 32;
@@ -402,7 +419,7 @@ export function ShapeCodeBlockNode({ node, active, lang }: ShapeProps): JSX.Elem
    * 高さ `行間`)。 絵に 1 つの倍率なので、狭い方が全体の上限になる。
    */
   const 打ち消す字ら: 打ち消す字[] = [
-    { text: 字引("codeBlock.fileName"), size: 11, 帯: { 幅: タブ幅, 高さ: タブ高 } },
+    { text: 札, size: 札の字, 帯: { 幅: タブ幅, 高さ: タブ高 } },
     { text: "1", size: 行番号の字, 帯: { 幅: 溝 - 持ち上げ, 高さ: 行間 } },
   ];
   const 倍返し = 打ち消しの倍率(倍, 打ち消す字ら);
@@ -439,12 +456,12 @@ export function ShapeCodeBlockNode({ node, active, lang }: ShapeProps): JSX.Elem
             data-cdl-counter-scaled="1"
             x={x + tabW / 2}
             y={y + tabH / 2 + 4 * 倍}
-            fontSize={11 * 倍 * 倍返し}
+            fontSize={札の字 * 倍 * 倍返し * 幅の倍率(札, 札の字 * 倍 * 倍返し, 0, tabW)}
             fontFamily={lineFont}
             textAnchor="middle"
             fill="#e6edf3"
           >
-            {字引("codeBlock.fileName")}
+            {札}
           </text>
           <circle cx={x + tabW - 丸} cy={y + tabH / 2} r={3 * 倍} fill="#7cd88f" stroke="none" />
           <path
@@ -558,6 +575,14 @@ export function ShapeKanbanCardNode({ node, active, lang }: ShapeProps): JSX.Ele
    * 収まらない。 その 8 は上段の自然幅に乗り、120x110 の箱で全部の字を 0.4 world 下げる。
    */
   const PILL字間 = 0;
+  /*
+   * 状態の札に入れてよい字の幅 (#941)。 **札そのものは広げない** = 札の自然幅が絵全体の
+   * 縮尺を決めるので (#891)、広げると札の中の字だけでなく全部の字が小さくなる。
+   *
+   * 丸い端に触れないよう札の幅から 6 引く。 控えの `IN PROG` は指定 11 で 55.4 なので
+   * この予算に収まり、書かない箱の見え方は変わらない (#888 で札を 62 にした時の実測)。
+   */
+  const PILL字幅 = PILL幅 - 6;
   const FOOTER下 = 22;
   const AVATAR中心Y = 4;
   const AVATAR半径 = 9;
@@ -594,6 +619,19 @@ export function ShapeKanbanCardNode({ node, active, lang }: ShapeProps): JSX.Ele
       下: size * 説明基準比 + size * 説明字比 * DESCENT,
     }),
   );
+  // 課題の 1 行に書いた説明を通す (#927)。 通さないと、どの付箋も同じ 1 行を出す絵になる
+  const 説明 = 書いた値か控え(node.subtitle, 字引("kanbanCard.task"));
+  /*
+   * 状態の札に書いた肩書を通す (#941)。 説明と同じ形で、書かなければ控えを出す。
+   *
+   * 通していなかったため、書き手が「看板」 と書いた箱でも札は控えの `IN PROG` を出していた
+   * = 書いてもいない語が図の一部として読める状態だった (見本帳で 3 件)。
+   */
+  const 状態 = 書いた値か控え(node.eyebrow, 字引("kanbanCard.status"));
+  const 状態の倍率 = 幅の倍率(状態, PILL字, PILL字間, PILL字幅);
+  const 説明の字 = 名前.size * 説明字比;
+  // 札の内側の幅。 左右の余白は札と同じ倍率で縮むので、倍率を掛けてから引く
+  const 使える幅 = Math.max(0, w - 左右余白 * 倍 * 2);
   return (
     <g>
       {/* shadow */}
@@ -641,16 +679,17 @@ export function ShapeKanbanCardNode({ node, active, lang }: ShapeProps): JSX.Ele
             strokeWidth={1 * 倍}
           />
           <text
+            data-cdl-role="kanban-status"
             x={x + w - (左右余白 + PILL幅 / 2) * 倍}
             y={pillY + 12 * 倍}
-            fontSize={PILL字 * 倍}
+            fontSize={PILL字 * 倍 * 状態の倍率}
             fontWeight={700}
-            letterSpacing={PILL字間 * 倍}
+            letterSpacing={PILL字間 * 倍 * 状態の倍率}
             textAnchor="middle"
             fill="#5a4a1a"
             fontFamily="ui-monospace, SFMono-Regular, Menlo, monospace"
           >
-            {字引("kanbanCard.status")}
+            {状態}
           </text>
           {/* タスク名 = title (中央上、 大きく太字) */}
           <text
@@ -664,15 +703,15 @@ export function ShapeKanbanCardNode({ node, active, lang }: ShapeProps): JSX.Ele
           >
             {node.title}
           </text>
-          {/* タスク説明 (中央下、 小さめ dim) */}
+          {/* タスク説明 (中央下、 小さめ dim)。 書いた説明をここへ通す (#927) */}
           <text
             x={x + w / 2}
             y={名前.y + 名前.size * 説明基準比}
-            fontSize={名前.size * 説明字比}
+            fontSize={説明の字 * 幅の倍率(説明, 説明の字, 0, 使える幅)}
             textAnchor="middle"
             fill="var(--cdl-text-dim, #5a6270)"
           >
-            {字引("kanbanCard.task")}
+            {説明}
           </text>
           {/* footer = 2 avatars 左 + due date 右 */}
           <g transform={`translate(${x + 左右余白 * 倍}, ${footY})`}>

package/src/kinds/storage.tsx

@@ -151,8 +151,17 @@ export function StorageNode({
    * 従来の書き方に落ちて呼び名が消える (実測)。
    */
   const 印で分ける = node.rowMarks !== undefined;
-  // 呼び名を出す箱では行の群を下げる。 高さの計算 (`autoStorageHeight`) も同じ値を足す
-  const 行の下げ = 印で分ける && node.subtitle ? SUBTITLE_ROW_SHIFT : 0;
+  /*
+    呼び名を出す箱では行の群を下げる。 高さの計算 (`autoStorageHeight`) も同じ値を足す。
+
+    **印の有無を見ない** (#937)。 従来の箱で呼び名を落としていたのは「題の下に区切り線が
+    来るので置き場が無い」 ためだったが、置き場が無いのではなく **下げていなかった**。
+    区切り線も同じ分だけ下げれば、印を書いた箱と同じ並びになる。
+
+    見本 374 枚で 36 件が消えていた。 ER の図は表の名前を識別子 (`users` / `order_items`)
+    で書くため、日本語の呼び名が唯一の読み口になる。
+  */
+  const 行の下げ = node.subtitle ? SUBTITLE_ROW_SHIFT : 0;
   const lastRowBottom = Math.min(
     ROW_TOP_STORAGE + (rows.length - 1) * ROW_PITCH_STORAGE + (rowGlyphDepth("storage") ?? 0),
     node.h - ROW_PAD_X_PX,
@@ -211,9 +220,8 @@ export function StorageNode({
           {node.eyebrow}
         </text>
       )}
-      {印で分ける && node.subtitle && (
-        // 呼び名は **印で分ける箱でだけ** 出す (#578)。 従来の箱は題の下に区切り線が来るので
-        // 置き場が無い
+      {node.subtitle && (
+        // 呼び名は書き方によらず出す (#937)。 区切り線を同じ分だけ下げて置き場を作る
         <text
           data-cdl-role="node-subtitle"
           x={ROW_PAD_X_PX}
@@ -263,9 +271,9 @@ export function StorageNode({
         <line
           data-cdl-role="node-row-divider"
           x1={26}
-          y1={STORAGE_ROW_DIVIDER_Y}
+          y1={STORAGE_ROW_DIVIDER_Y + 行の下げ}
           x2={node.w - 26}
-          y2={STORAGE_ROW_DIVIDER_Y}
+          y2={STORAGE_ROW_DIVIDER_Y + 行の下げ}
           stroke="var(--cdl-row-divider, #7e848e)"
           strokeWidth={1.25}
         />
@@ -274,7 +282,7 @@ export function StorageNode({
         <line
           data-cdl-role="node-column-divider"
           x1={columnDividerX}
-          y1={STORAGE_ROW_DIVIDER_Y}
+          y1={STORAGE_ROW_DIVIDER_Y + 行の下げ}
           x2={columnDividerX}
           y2={lastRowBottom}
           stroke="var(--cdl-row-divider, #7e848e)"

package/src/kinds/tree.tsx

@@ -3,6 +3,7 @@ import type { LaidNode, TreeNodePayload } from "../types";
 import { TONE } from "../render/tone";
 import { resolveTreeData } from "../render/payload-binding";
 import { 使える幅, 幅に収める, 箱に積む, type 積む行, type 積んだ行 } from "../kinds/box-lines";
+import { measureTextWidth } from "../layout/text-width";
 import { 進みを畳む, 伸ばすdash, 段の伸び } from "./draw-progress";
 
 /**
@@ -61,6 +62,16 @@ const PAD_RIGHT = 24;
 const PAD_BOTTOM = 40;
 const PAD_LEFT = 24;
 
+/**
+ * 枝の太さ。 根に近いほど太く、葉へ行くほど細い (#909)。
+ *
+ * 木は根から葉へ辿る図なので、太さが一様だと流れが絵に出ない。
+ *
+ * **下限を置く**。 段数に上限が無いため、引き算だけだと深い図で 0 を割り、線が消える。
+ * 消えた線は「繋がっていない」 と読まれるので、細くても残す方を採る (放射と同じ判断)。
+ */
+export const 木の枝の太さ = (段: number): number => Math.max(1.1, 2.6 - 段 * 0.45);
+
 /**
  * 木の中の箱と枝を並べる (#538)。
  *
@@ -73,11 +84,7 @@ export function 木の中身(
 ): { 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,
-  );
+  return computeTreeLayout(treeNodes, node.w - PAD_LEFT - PAD_RIGHT, node.h - PAD_TOP - PAD_BOTTOM);
 }
 
 /**
@@ -159,7 +166,9 @@ export function TreeNode({
         const path = `M ${x1} ${y1} L ${x1} ${midY} L ${x2} ${midY} L ${x2} ${y2}`;
         // 循環を閉じる枝は根から外へ向かう枝ではないため、全 node が出てから表示する
         const 枝の伸び = e.deferUntilComplete
-          ? (伸び >= 1 ? 1 : 0)
+          ? 伸び >= 1
+            ? 1
+            : 0
           : 段の伸び(伸び, e.depth, 最大深さ);
         return (
           <g key={`edge-${i}`}>
@@ -169,7 +178,7 @@ export function TreeNode({
               fill="none"
               stroke={TONE.accent}
               strokeOpacity={0.55}
-              strokeWidth={1.5}
+              strokeWidth={木の枝の太さ(e.depth)}
               strokeLinejoin="round"
               {...伸ばすdash(drawing, 枝の伸び)}
             />
@@ -352,7 +361,8 @@ export function computeTreeLayout(
     if (kids.length === 0) return 0;
     return 1 + Math.max(...kids.map((k) => depthBelow(k.id, seen)));
   };
-  const maxDepth = roots.length === 0 ? 0 : Math.max(...roots.map((r) => depthBelow(r.id, new Set())));
+  const maxDepth =
+    roots.length === 0 ? 0 : Math.max(...roots.map((r) => depthBelow(r.id, new Set())));
 
   // 葉の数で横幅を配分する。 親は自分の子の中央に置く。
   // 深さごとに canvas 全幅へ均等配置すると、 親と無関係な位置に子が並んで系統が読めない。
@@ -363,7 +373,10 @@ export function computeTreeLayout(
     if (kids.length === 0) return 1;
     return kids.reduce((sum, k) => sum + leafCount(k.id, seen), 0);
   };
-  const totalLeaves = Math.max(roots.reduce((sum, r) => sum + leafCount(r.id, new Set()), 0), 1);
+  const totalLeaves = Math.max(
+    roots.reduce((sum, r) => sum + leafCount(r.id, new Set()), 0),
+    1,
+  );
 
   const depthGap = canvasH / Math.max(maxDepth + 1, 1);
   const slotW = canvasW / totalLeaves;
@@ -373,6 +386,29 @@ export function computeTreeLayout(
   const nodeH = Math.min(38, depthGap * 0.7);
   const nodeW = Math.min(140, slotW * 0.85);
 
+  /**
+   * 箱の幅を名前から出す (#909)。
+   *
+   * 全ての箱を同じ幅にすると、長い名前は縮められるか切られ、短い名前は間延びする。
+   * 木は「何がどこに属するか」 を読む図なので、名前が読めないと図の役目が立たない。
+   *
+   * **下限は今までの幅**。 短い名前の箱を狭めると、既存の図の見た目が名前の長さで
+   * 変わってしまう。 広がる向きだけを足す。
+   *
+   * **頭打ちは区画の 92%**。 これを超えると隣の箱とぶつかる。 超える名前は今までどおり
+   * 縮めて収める (`幅に収める` が描く側で効く)。
+   */
+  const 箱の幅 = (n: TreeNodePayload, depth: number): number => {
+    // 字の大きさは段で変わる (`木の行`)。 段を渡さないと根だけ見積りがずれる
+    const 材料 = 木の行({ ...n, x: 0, y: 0, w: 0, h: 0, depth } as LayoutNode);
+    const 名前 = 材料[0]!;
+    // `使える幅` が引く左右の余白を足し戻す = 余白の値をここに書き写さない
+    const 要る =
+      measureTextWidth(名前.text, { fontSize: 名前.fontSize, fontWeight: 600 }) +
+      (nodeW - 使える幅(nodeW));
+    return Math.min(Math.max(要る, nodeW), slotW * 0.92);
+  };
+
   const posOf = new Map<string, { x: number; y: number }>();
   const nodes: LayoutNode[] = [];
   const placed = new Set<string>();
@@ -398,7 +434,7 @@ export function computeTreeLayout(
       ...(n.subtitle !== undefined ? { subtitle: n.subtitle } : {}),
       x,
       y,
-      w: nodeW,
+      w: 箱の幅(n, depth),
       h: nodeH,
       depth,
       ...((n as { unresolved?: true }).unresolved ? { unresolved: true as const } : {}),

package/src/lang.ts

@@ -32,22 +32,22 @@ export function resolveLang(value: unknown): CdlLang {
  * 鍵は `形.役割` の形にする。 同じ字でも役割が違えば別の鍵にする (訳が分かれうるため)。
  */
 const en = {
-  /** `shape-terminal` の 2 行目 (命令の出力) */
   /*
-   * `shape-terminal` の出力の行。
+   * `shape-terminal` の出力の行を **書かない時** の控え (#927)。
    *
    * **いちばん長い行が絵の倍率を決める** (#891)。 端末の中身は自分の座標で組んでから箱へ
    * 収めるので、この行が長いほど全部の字が小さくなる。 120x110 の箱では 20 字の版で
-   * 7.71 world まで落ちていた。
+   * 7.71 world まで落ちていた。 書いた説明を通すようになったので、長い説明を渡した図でも
+   * 同じことが起きる。
    */
   "terminal.output": "→ 12 chunks",
-  /** `shape-code-block` の札の file 名 */
+  /** `shape-code-block` の札の file 名を **書かない時** の控え (#927) */
   "codeBlock.fileName": "utils.ts",
   /** `shape-kanban-card` の課題の番号 */
   "kanbanCard.id": "CAR-1111",
   /** `shape-kanban-card` の状態の札 */
   "kanbanCard.status": "IN PROG",
-  /** `shape-kanban-card` の題の下の説明 */
+  /** `shape-kanban-card` の題の下の説明を **書かない時** の控え (#927) */
   "kanbanCard.task": "shape-driven kind 実装",
   /** `shape-kanban-card` の期日 */
   "kanbanCard.due": "Jul 10",

package/src/layout/nodes.ts

@@ -42,7 +42,9 @@ function autoStorageHeight(
   // 上下の余白を揃える (#586)。 実測で 150 のとき上 21 / 下 55.9 と下だけ 35 空いていた。
   // 字の高さ 73.2 に上の余白 21 を上下ぶん足して 115 にする。
   const 印あり = n.rowMarks !== undefined;
-  const 呼び名の分 = 印あり && n.subtitle ? SUBTITLE_ROW_SHIFT : 0;
+  // 呼び名の分は **印の有無を見ない** (#937)。 描き手 (`kinds/storage.tsx`) が行と区切り線を
+  // 下げる条件と同じにする = 片方だけ条件が違うと、下げた分が箱に入らず下端をまたぐ
+  const 呼び名の分 = n.subtitle ? SUBTITLE_ROW_SHIFT : 0;
   // 小見出しを書かない形では字を上へ繰り上げるので、その分だけ箱も低くする (#589)
   const 繰り上げ = n.eyebrow ? 0 : 目印なしの繰り上げ("storage");
   if (!n.rows || n.rows.length === 0) return 115 + 呼び名の分 - 繰り上げ;

package/src/layout/spec.ts

@@ -60,28 +60,18 @@ export function hasRenderedLabel(e: { label?: string; sub?: string }): boolean {
 }
 
 /**
- * `title` を文字として描かない node の種別。
+ * 図表を自前で描く node の種別 (#929)。
  *
- * 3 群ある。 形だけを描く `dyn-*` 5 種は `DynShapeNode` に回り、 `node.title` を一度も参照しない
- * (描くのは形と数値の小さな label だけ)。 payload を自前 layout する chart / timeline / analytic
- * 10 種と時系列のやり取り 1 種は、 描くのが payload 側の label で `title` は使わない。 流れの始まりと終わりの印 2 種は
- * 印そのものが意味を持ち、 丸の中に名前を入れても読めない (#560)。
+ * 1 つの箱が図を丸ごと描く群で、箱の中は図表の中身で埋まっている。
+ * `compile.ts` は図の主題をこの箱の題として渡すため、**書いた題 = 図の名前** になる。
  *
- * 一覧は手で持つと描画側とずれるため、 `test/node-title-render.test.tsx` が `NODE_KINDS` を
- * **全件 render** して「title の文字が出るか」 と本述語の返り値の一致を検査する。 新しい種別を
- * 足すと `NODE_KINDS` に載った時点で検査対象に入るので、 追記を忘れれば必ず落ちる。
+ * 中に題の場所が無いので、題は **箱の上** に描く (`render/nodes.tsx`)。
+ * 図表の題は元から図の上に置くものなので、位置としても自然になる。
+ *
+ * 一覧を 2 つ持たないよう、`KINDS_FITTING_OWN_TITLE` はこの集合を取り込む。
+ * 図表の種別を足す人が片方だけ直すと、幅の近似が当たらない軸が誤報する。
  */
-const KINDS_WITHOUT_TITLE_TEXT: ReadonlySet<string> = new Set([
-  // 時系列のやり取り (#578)。 図を丸ごと描く種別で、描くのは面々の名前と言づての語。
-  // 箱の `title` は使わない
-  "sequence-board",
-  // 形だけを描く (DynShapeNode)
-  "dyn-rect",
-  "dyn-circle",
-  "dyn-arc",
-  "dyn-wave",
-  "dyn-polygon",
-  // payload を自前 layout して描く (label は payload 側が持つ)
+const KINDS_DRAWING_OWN_PAYLOAD: ReadonlySet<string> = new Set([
   "chart-pie",
   "chart-line",
   "chart-bar",
@@ -97,7 +87,30 @@ const KINDS_WITHOUT_TITLE_TEXT: ReadonlySet<string> = new Set([
   "quadrant-matrix",
   "tree-hierarchy",
   "journey-map",
-  // 印そのものが意味を持つ (#560)
+]);
+
+/** その node が図の名前を箱の上に描くか (SSOT) */
+export function drawsFigureTitle(kind: string | undefined): boolean {
+  return KINDS_DRAWING_OWN_PAYLOAD.has(kind ?? "");
+}
+
+/**
+ * `title` を文字として描かない node の種別。
+ *
+ * 2 群ある。 時系列のやり取りは図を丸ごと描くが、描くのは面々の名前と言づての語で、
+ * 箱の題は別の役割を持つ (#578)。 流れの始まりと終わりの印は印そのものが意味を持ち、
+ * 丸の中に名前を入れても読めない (#560)。
+ *
+ * ここから外れた 2 群がある。 形だけを描く `dyn-*` 5 種は #925 で名前を描くようになり、
+ * 図表を自前で描く 15 種は #929 で題を箱の上に描くようになった。
+ * どちらも「書いた値が黙って捨てられる」 ことが実害で、見本帳の実測は 264 件と 27 件だった。
+ *
+ * 一覧は手で持つと描画側とずれるため、 `test/node-title-render.test.tsx` が `NODE_KINDS` を
+ * **全件 render** して「title の文字が出るか」 と本述語の返り値の一致を検査する。 新しい種別を
+ * 足すと `NODE_KINDS` に載った時点で検査対象に入るので、 追記を忘れれば必ず落ちる。
+ */
+const KINDS_WITHOUT_TITLE_TEXT: ReadonlySet<string> = new Set([
+  "sequence-board",
   "mark-start",
   "mark-end",
 ]);
@@ -128,8 +141,15 @@ export function rendersTitleText(kind: string | undefined): boolean {
  *
  * **`rendersTitleText` とは別の述語にする**。 あちらは「文字として描くか」 で、 RTL / CJK / bidi の
  * 判定はこの種別にも当てたい。 ここで見るのは「幅の近似が当たるか」 だけになる。
+ *
+ * 図表を自前で描く 15 種も同じ理由で入る (#929)。 題を 13 で描き、箱の幅に収まる倍率を
+ * 自分で掛けるので、超えて切れることが起きない。 **集合を書き写さず取り込む** = 種別を
+ * 足した人が片方だけ直すと、幅の近似が当たらない軸が誤報する。
  */
-const KINDS_FITTING_OWN_TITLE: ReadonlySet<string> = new Set(["shape-blockchain-block"]);
+const KINDS_FITTING_OWN_TITLE: ReadonlySet<string> = new Set([
+  "shape-blockchain-block",
+  ...KINDS_DRAWING_OWN_PAYLOAD,
+]);
 
 /** その node が `title` を自分で幅に合わせて切るか (SSOT) */
 export function fitsOwnTitleWidth(kind: string | undefined): boolean {
@@ -150,10 +170,13 @@ export function fitsOwnTitleWidth(kind: string | undefined): boolean {
  * **全件 render** して「行の文字が出るか」 と本述語の返り値の一致を検査する。 新しい種別を足すと
  * `NODE_KINDS` に載った時点で検査対象に入るので、 追記を忘れれば必ず落ちる。
  */
-const KINDS_WITH_ROW_TEXT: ReadonlySet<string> = new Set([
-  // 専用の表組み (StorageNode)
-  "storage",
-  // 汎用描画 (GenericNode)
+/**
+ * 共通の箱の描き手 (`GenericNode`) に回る種別。
+ *
+ * 行 (`rows`) と値 (`value`) の採用側がどちらもこの 21 種を含むため、一覧を 1 つにする。
+ * 2 か所に書き写すと、種別を足した人が片方だけ直してずれる。
+ */
+const KINDS_DRAWN_BY_GENERIC: readonly string[] = [
   "person",
   "user-group",
   "admin",
@@ -175,6 +198,12 @@ const KINDS_WITH_ROW_TEXT: ReadonlySet<string> = new Set([
   "oracle",
   "merkle-tree",
   "decision",
+];
+
+const KINDS_WITH_ROW_TEXT: ReadonlySet<string> = new Set([
+  // 専用の表組み (StorageNode)
+  "storage",
+  ...KINDS_DRAWN_BY_GENERIC,
 ]);
 
 /**
@@ -188,6 +217,106 @@ export function rendersRows(kind: string | undefined): boolean {
   return KINDS_WITH_ROW_TEXT.has(kind ?? "");
 }
 
+/**
+ * 形だけを描く種別 (#925 で名前を描くようになった)。
+ *
+ * 語は **箱の外** に置く。 名前を形の上、説明を形の下に出す (`kinds/dyn-shape.tsx`)。
+ * 中に置くと、内側の塗りが値で動くたびに字と重なる。
+ *
+ * 描かないのは肩書と値の 2 欄。 箱の外に置ける行は 2 本で、名前と説明が埋めている。
+ */
+const KINDS_DRAWING_ONLY_SHAPE: readonly string[] = [
+  "dyn-rect",
+  "dyn-circle",
+  "dyn-arc",
+  "dyn-wave",
+  "dyn-polygon",
+];
+
+/**
+ * 肩書 (`eyebrow`) を描かない種別。
+ *
+ * 2 群ある。 形だけを描く種別は箱の外に置ける行を名前と説明で埋めている。 題そのものを
+ * 描かない種別は語の置き場所が無い。
+ *
+ * **図表を自前で描く 15 種は #935 で描く側へ移した**。 題を箱の上に出すようにした (#929) ので、
+ * その上にもう 1 行置ける。 呼び出し側 (`dragon` の `図の小見出し`) は元から 15 種へ肩書を
+ * 渡しており、出る先が無いまま捨てられていた。
+ *
+ * **課題の札と連なりの塊の 2 種も #941 で描く側へ移した**。 どちらも絵の中に固有の並びを
+ * 持つが、置き場はあった = 課題の札は状態の札に控えの語を出しており、連なりの塊は見出しの
+ * 帯の右が空いていた。
+ *
+ * 除外側を列挙するのは、描く種別が描かない種別より多く、新しい種別が増えた時に既定で
+ * 「描く」 側に入るのが正しいため (件数は実装が SSOT で、内訳は
+ * `test/node-field-render.test.tsx` の母数の検査が持つ)。 描かないようにしたら明示的に
+ * ここへ足す。
+ *
+ * 一覧は手で持つと描画側とずれるため、`test/node-field-render.test.tsx` が `NODE_KINDS` を
+ * **全件 render** して「肩書の文字が出るか」 と本述語の返り値の一致を検査する。
+ */
+const KINDS_WITHOUT_EYEBROW_TEXT: ReadonlySet<string> = new Set([
+  ...KINDS_DRAWING_ONLY_SHAPE,
+  ...KINDS_WITHOUT_TITLE_TEXT,
+]);
+
+/**
+ * その node が `eyebrow` を文字として描くか (SSOT)。
+ *
+ * 描かない種別に `eyebrow` が書かれていること自体は「書いた語が画面に出ない」 破綻で、
+ * `node-field-unsupported` (軸 70) が見る。 `shape-label-dropped` (軸 67) は別の形
+ * (箱が狭くて落ちた行) を見ており、種別が元から描かない欄は範囲外だと自分で書いている。
+ */
+export function rendersEyebrow(kind: string | undefined): boolean {
+  return !KINDS_WITHOUT_EYEBROW_TEXT.has(kind ?? "");
+}
+
+/**
+ * 説明 (`subtitle`) を描かない種別。
+ *
+ * 肩書の一覧との差は 2 つ。
+ *
+ * 形だけを描く 5 種は **描く側に居る** = 説明を形の下に出す (`KINDS_DRAWING_ONLY_SHAPE`)。
+ * 課題の札と連なりの塊は #927 と #929 で絵の中の字の口に説明を通すようになった。
+ *
+ * **`storage` も描く側に居る** (#937)。 印を書いた箱でだけ呼び名を出していたため、
+ * 種別だけで判定する本述語は「描かない」 を返し、印を書いた箱で軸 70 が誤検知していた。
+ * どちらの書き方でも描くようにしたので、種別だけで真と言える
+ * (条件が箱ごとに決まる形は、種別ごとの述語では表せない)。
+ */
+const KINDS_WITHOUT_SUBTITLE_TEXT: ReadonlySet<string> = new Set([
+  ...KINDS_DRAWING_OWN_PAYLOAD,
+  ...KINDS_WITHOUT_TITLE_TEXT,
+]);
+
+/** その node が `subtitle` を文字として描くか (SSOT)。 破綻の扱いは `rendersEyebrow` と同じ */
+export function rendersSubtitle(kind: string | undefined): boolean {
+  return !KINDS_WITHOUT_SUBTITLE_TEXT.has(kind ?? "");
+}
+
+/**
+ * 値 (`value`) を文字として描く種別。
+ *
+ * 共通の箱の描き手 (`GenericNode`) に回る 21 種と、面々の絵 (`ActorNode`) が描く。
+ * 自前の描き手を持つ残りの種別は 1 つも描かない。
+ *
+ * 採用側を列挙するのは、描く種別が少数 (22 対 76) で、新しい種別が増えた時に既定で
+ * 「描かない」 側に入るのが正しいため (`KINDS_WITH_ROW_TEXT` と同じ考え方)。
+ *
+ * 行 (`rows`) の採用側とは **1 種ずつ違う**。 `storage` は行を描いて値を描かず、
+ * `actor` は値を描いて行を描かない。 片方の一覧を写して使うと両方でずれる。
+ */
+const KINDS_WITH_VALUE_TEXT: ReadonlySet<string> = new Set([
+  // 面々の絵 (ActorNode)
+  "actor",
+  ...KINDS_DRAWN_BY_GENERIC,
+]);
+
+/** その node が `value` を文字として描くか (SSOT)。 破綻の扱いは `rendersEyebrow` と同じ */
+export function rendersValue(kind: string | undefined): boolean {
+  return KINDS_WITH_VALUE_TEXT.has(kind ?? "");
+}
+
 /**
  * `rows[i]` の baseline が node 上端から何 world 下に来るか (SSOT)。
  *