@cardenelabs/cdl 0.106.0 → 0.108.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.106.0",
+  "version": "0.108.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/shape-basement.tsx

@@ -11,8 +11,10 @@ import {
   labelPlan,
   shapeRegion,
   textWidth,
+  切って収まる下限,
   type ArtExtent,
 } from "./shape-region";
+import { 幅で切る } from "./box-lines";
 
 /**
  * Shape-driven basement 8 kinds (CAR-1099、 CAR-1130 people ベース統一版)。
@@ -88,7 +90,9 @@ function labelBlock(
     node.eyebrow ? textWidth(node.eyebrow, EYEBROW_SIZE, EYEBROW_TRACKING) : 0,
     node.subtitle ? textWidth(node.subtitle, SUB_SIZE) : 0,
   );
-  const { k, x, y: baseline } = fitLabel(band, { 上, 下, 幅 }, pos);
+  // 横で縮める倍率を読める下限で止める (#953)。 切って収まらない幅では下限を当てない
+  const 下限 = 切って収まる下限(node.title ?? "", size, 0, band.w, textWidth);
+  const { k, x, y: baseline } = fitLabel(band, { 上, 下, 幅 }, pos, 下限);
   return { k, x, baseline, 上端: baseline - 上 * k, 下端: baseline + 下 * k };
 }
 
@@ -96,6 +100,9 @@ function commonLabel(node: LaidNode, pos: { x: number; y: number }, size: number
   const 塊 = labelBlock(node, pos, size, band);
   const k = 塊.k;
   const x = 塊.x;
+  // 下限で止めた行は帯に入らないので、入るところまで切って `…` を付ける (#953)
+  const 切る = (t: string, 大きさ: number, 字間 = 0) =>
+    幅で切る(t, 大きさ * k, band.w, (u, f) => textWidth(u, f, 字間 * k));
   return (
     <>
       {node.eyebrow && (
@@ -108,7 +115,7 @@ function commonLabel(node: LaidNode, pos: { x: number; y: number }, size: number
           textAnchor="middle"
           fill="var(--cdl-tone-accent, #2d6a8f)"
         >
-          {node.eyebrow}
+          {切る(node.eyebrow, EYEBROW_SIZE, EYEBROW_TRACKING)}
         </text>
       )}
       <text
@@ -120,7 +127,7 @@ function commonLabel(node: LaidNode, pos: { x: number; y: number }, size: number
         textAnchor="middle"
         fill="var(--cdl-text, #1a1f2a)"
       >
-        {node.title}
+        {切る(node.title ?? "", size)}
       </text>
       {node.subtitle && (
         <text
@@ -130,7 +137,7 @@ function commonLabel(node: LaidNode, pos: { x: number; y: number }, size: number
           textAnchor="middle"
           fill="var(--cdl-text-dim, #5a6270)"
         >
-          {node.subtitle}
+          {切る(node.subtitle, SUB_SIZE)}
         </text>
       )}
     </>
@@ -557,7 +564,12 @@ function planLabel(node: LaidNode, cx: number, 幅上限: number, plan: ReturnTy
     node.eyebrow && plan.肩書 ? textWidth(node.eyebrow, plan.肩書.size, EYEBROW_TRACKING) : 0,
     node.subtitle && plan.説明 ? textWidth(node.subtitle, plan.説明.size) : 0,
   );
-  const k = 幅 > 0 && 幅上限 > 0 ? Math.min(1, 幅上限 / 幅) : 1;
+  // 縮めは読める下限で止める (#953)。 下限が無いと長い名前が点にしか見えない大きさになる
+  const 下限 = 切って収まる下限(node.title ?? "", plan.名前.size, 0, 幅上限, textWidth);
+  const k = 幅 > 0 && 幅上限 > 0 ? Math.min(1, Math.max(幅上限 / 幅, 下限)) : 1;
+  // 下限で止めた行は箱に入らないので、入るところまで切って `…` を付ける (#953)
+  const 切る = (t: string, 大きさ: number, 字間 = 0) =>
+    幅で切る(t, 大きさ * k, 幅上限, (u, f) => textWidth(u, f, 字間 * k));
   return (
     <>
       {node.eyebrow && plan.肩書 && (
@@ -570,7 +582,7 @@ function planLabel(node: LaidNode, cx: number, 幅上限: number, plan: ReturnTy
           textAnchor="middle"
           fill="var(--cdl-tone-accent, #2d6a8f)"
         >
-          {node.eyebrow}
+          {切る(node.eyebrow, plan.肩書.size, EYEBROW_TRACKING)}
         </text>
       )}
       <text
@@ -582,7 +594,7 @@ function planLabel(node: LaidNode, cx: number, 幅上限: number, plan: ReturnTy
         textAnchor="middle"
         fill="var(--cdl-text, #1a1f2a)"
       >
-        {node.title}
+        {切る(node.title ?? "", plan.名前.size)}
       </text>
       {node.subtitle && plan.説明 && (
         <text
@@ -592,7 +604,7 @@ function planLabel(node: LaidNode, cx: number, 幅上限: number, plan: ReturnTy
           textAnchor="middle"
           fill="var(--cdl-text-dim, #5a6270)"
         >
-          {node.subtitle}
+          {切る(node.subtitle, plan.説明.size)}
         </text>
       )}
     </>

package/src/kinds/shape-blockchain.tsx

@@ -5,6 +5,7 @@ import {
   labelPlan,
   shapeRegion,
   幅の倍率,
+  切って収まる下限,
   打ち消しの倍率,
   絵の中の字の幅,
   type ArtExtent,
@@ -135,26 +136,32 @@ function blockchainNodeExtent(strokeWidth: number): ArtExtent {
  * 名前の塊を描く。 位置と大きさは `labelPlan` が決める (箱の下端から積み上げる、 #433)。
  */
 function bottomLabel(node: LaidNode, cx: number, plan: ReturnType<typeof labelPlan>) {
-  const 肩書倍率 = node.eyebrow && plan.肩書
-    ? 幅の倍率(node.eyebrow, plan.肩書.size, 2, node.w)
-    : 1;
-  const 名前倍率 = 幅の倍率(node.title, plan.名前.size, 0, node.w);
-  const 説明倍率 = node.subtitle && plan.説明
-    ? 幅の倍率(node.subtitle, plan.説明.size, 0, node.w)
-    : 1;
+  // 縮めは読める下限で止める (#953)。 止めた行は箱に入らないので、入るところまで切る
+  const 収める = (t: string, 大きさ: number, 字間: number) => {
+    const 測る = (u: string, f: number, ls: number) => 字の幅(u, f) + ls * [...u].length;
+    const 倍率 = Math.max(幅の倍率(t, 大きさ, 字間, node.w), 切って収まる下限(t, 大きさ, 字間, node.w, 測る));
+    const size = 大きさ * 倍率;
+    return { 倍率, text: 幅で切る(t, size, node.w, (u, f) => 字の幅(u, f) + 字間 * 倍率 * [...u].length) };
+  };
+  const 肩 = node.eyebrow && plan.肩書 ? 収める(node.eyebrow, plan.肩書.size, 2) : { 倍率: 1, text: node.eyebrow ?? "" };
+  const 名 = 収める(node.title ?? "", plan.名前.size, 0);
+  const 説 = node.subtitle && plan.説明 ? 収める(node.subtitle, plan.説明.size, 0) : { 倍率: 1, text: node.subtitle ?? "" };
+  const 肩書倍率 = 肩.倍率;
+  const 名前倍率 = 名.倍率;
+  const 説明倍率 = 説.倍率;
   return (
     <>
       {node.eyebrow && plan.肩書 && (
         <text x={cx} y={plan.肩書.y} fontSize={plan.肩書.size * 肩書倍率} fontWeight={700} letterSpacing={2 * 肩書倍率} textAnchor="middle" fill="var(--cdl-tone-accent, #2d6a8f)">
-          {node.eyebrow}
+          {肩.text}
         </text>
       )}
       <text data-cdl-role="node-label" x={cx} y={plan.名前.y} fontSize={plan.名前.size * 名前倍率} fontWeight={700} textAnchor="middle" fill="var(--cdl-text, #1a1f2a)">
-        {node.title}
+        {名.text}
       </text>
       {node.subtitle && plan.説明 && (
         <text x={cx} y={plan.説明.y} fontSize={plan.説明.size * 説明倍率} textAnchor="middle" fill="var(--cdl-text-dim, #5a6270)">
-          {node.subtitle}
+          {説.text}
         </text>
       )}
     </>

package/src/kinds/shape-commerce.tsx

@@ -6,7 +6,9 @@ import {
   textWidth,
   打ち消しの倍率,
   type 打ち消す字,
+  切って収まる下限,
 } from "./shape-region";
+import { 幅で切る } from "./box-lines";
 import { MONO_ADVANCE_RATIO, displayWidth } from "./row-align";
 import type { LaidNode } from "../types";
 import { 字引きを作る, type CdlLang } from "../lang";
@@ -101,8 +103,15 @@ function 字幅(文字列: string, 大きさ: number, 字間: number): number {
  */
 function 幅に収める(文字列: string, 大きさ: number, 字間: number, 箱幅: number) {
   const 幅 = 字幅(文字列, 大きさ, 字間);
-  const 倍率 = 幅 > 0 && 箱幅 > 0 ? Math.min(1, 箱幅 / 幅) : 1;
-  return { size: 大きさ * 倍率, spacing: 字間 * 倍率 };
+  // 縮めは読める下限で止める (#953)。 下限が無いと長い名前が点にしか見えない大きさになる。
+  // 止めた行は箱に入らないので、入るところまで切って `…` を付ける (#433 の決まりを保つ)
+  const 倍率 =
+    幅 > 0 && 箱幅 > 0
+      ? Math.min(1, Math.max(箱幅 / 幅, 切って収まる下限(文字列, 大きさ, 字間, 箱幅, 字幅)))
+      : 1;
+  const size = 大きさ * 倍率;
+  const spacing = 字間 * 倍率;
+  return { size, spacing, text: 幅で切る(文字列, size, 箱幅, (u, f) => 字幅(u, f, spacing)) };
 }
 
 /**
@@ -117,16 +126,16 @@ function bottomLabel(node: LaidNode, cx: number, plan: ReturnType<typeof labelPl
     <>
       {node.eyebrow && plan.肩書 && (
         <text x={cx} y={plan.肩書.y} fontSize={肩.size} fontWeight={700} letterSpacing={肩.spacing} textAnchor="middle" fill="var(--cdl-tone-accent, #2d6a8f)">
-          {node.eyebrow}
+          {肩.text}
         </text>
       )}
       <text data-cdl-role="node-label" x={cx} y={plan.名前.y} fontSize={名.size} fontWeight={700} textAnchor="middle" fill="var(--cdl-text, #1a1f2a)">
-        {node.title}
+        {名.text}
       </text>
       {node.subtitle && plan.説明 && (
         <text x={cx} y={plan.説明.y} fontSize={説.size} textAnchor="middle" fill="var(--cdl-text-dim, #5a6270)">
-          {node.subtitle}
-        </text>
+          {説.text}
+  </text>
       )}
     </>
   );

package/src/kinds/shape-finance.tsx

@@ -5,7 +5,9 @@ import {
   fitArt,
   打ち消しの倍率,
   type 打ち消す字,
+  切って収まる下限,
 } from "./shape-region";
+import { 幅で切る } from "./box-lines";
 import type { LaidNode } from "../types";
 import { 字引きを作る, type CdlLang } from "../lang";
 
@@ -100,8 +102,15 @@ function 字幅(文字列: string, 大きさ: number, 字間: number): number {
  */
 function 幅に収める(文字列: string, 大きさ: number, 字間: number, 箱幅: number) {
   const 幅 = 字幅(文字列, 大きさ, 字間);
-  const 倍率 = 幅 > 0 && 箱幅 > 0 ? Math.min(1, 箱幅 / 幅) : 1;
-  return { size: 大きさ * 倍率, spacing: 字間 * 倍率 };
+  // 縮めは読める下限で止める (#953)。 下限が無いと長い名前が点にしか見えない大きさになる。
+  // 止めた行は箱に入らないので、入るところまで切って `…` を付ける (#433 の決まりを保つ)
+  const 倍率 =
+    幅 > 0 && 箱幅 > 0
+      ? Math.min(1, Math.max(箱幅 / 幅, 切って収まる下限(文字列, 大きさ, 字間, 箱幅, 字幅)))
+      : 1;
+  const size = 大きさ * 倍率;
+  const spacing = 字間 * 倍率;
+  return { size, spacing, text: 幅で切る(文字列, size, 箱幅, (u, f) => 字幅(u, f, spacing)) };
 }
 
 /**
@@ -116,16 +125,16 @@ function bottomLabel(node: LaidNode, cx: number, plan: ReturnType<typeof labelPl
     <>
       {node.eyebrow && plan.肩書 && (
         <text x={cx} y={plan.肩書.y} fontSize={肩.size} fontWeight={700} letterSpacing={肩.spacing} textAnchor="middle" fill="var(--cdl-tone-accent, #2d6a8f)">
-          {node.eyebrow}
+          {肩.text}
         </text>
       )}
       <text data-cdl-role="node-label" x={cx} y={plan.名前.y} fontSize={名.size} fontWeight={700} textAnchor="middle" fill="var(--cdl-text, #1a1f2a)">
-        {node.title}
+        {名.text}
       </text>
       {node.subtitle && plan.説明 && (
         <text x={cx} y={plan.説明.y} fontSize={説.size} textAnchor="middle" fill="var(--cdl-text-dim, #5a6270)">
-          {node.subtitle}
-        </text>
+          {説.text}
+  </text>
       )}
     </>
   );

package/src/kinds/shape-hardware.tsx

@@ -1,5 +1,6 @@
 import type { JSX } from "react";
-import { shapeRegion, labelPlan, fitArt, textWidth, type ArtExtent } from "./shape-region";
+import { shapeRegion, labelPlan, fitArt, textWidth, 切って収まる下限, type ArtExtent } from "./shape-region";
+import { 幅で切る } from "./box-lines";
 import type { LaidNode } from "../types";
 
 /**
@@ -106,8 +107,15 @@ const LABEL_EYEBROW_SPACING = 2;
  */
 function 幅に収める(文字列: string, 大きさ: number, 字間: number, 箱幅: number) {
   const 幅 = textWidth(文字列, 大きさ, 字間);
-  const 倍率 = 幅 > 0 && 箱幅 > 0 ? Math.min(1, 箱幅 / 幅) : 1;
-  return { size: 大きさ * 倍率, spacing: 字間 * 倍率 };
+  // 縮めは読める下限で止める (#953)。 下限が無いと長い名前が点にしか見えない大きさになる。
+  // 止めた行は箱に入らないので、入るところまで切って `…` を付ける (#433 の決まりを保つ)
+  const 倍率 =
+    幅 > 0 && 箱幅 > 0
+      ? Math.min(1, Math.max(箱幅 / 幅, 切って収まる下限(文字列, 大きさ, 字間, 箱幅, textWidth)))
+      : 1;
+  const size = 大きさ * 倍率;
+  const spacing = 字間 * 倍率;
+  return { size, spacing, text: 幅で切る(文字列, size, 箱幅, (u, f) => textWidth(u, f, spacing)) };
 }
 
 /**
@@ -124,16 +132,16 @@ function bottomLabel(node: LaidNode, cx: number, plan: ReturnType<typeof labelPl
     <>
       {node.eyebrow && plan.肩書 && (
         <text x={cx} y={plan.肩書.y} fontSize={肩.size} fontWeight={700} letterSpacing={肩.spacing} textAnchor="middle" fill="var(--cdl-tone-accent, #2d6a8f)">
-          {node.eyebrow}
+          {肩.text}
         </text>
       )}
       <text data-cdl-role="node-label" x={cx} y={plan.名前.y} fontSize={名.size} fontWeight={700} textAnchor="middle" fill="var(--cdl-text, #1a1f2a)">
-        {node.title}
+        {名.text}
       </text>
       {node.subtitle && plan.説明 && (
         <text x={cx} y={plan.説明.y} fontSize={説.size} textAnchor="middle" fill="var(--cdl-text-dim, #5a6270)">
-          {node.subtitle}
-        </text>
+          {説.text}
+  </text>
       )}
     </>
   );

package/src/kinds/shape-region.tsx

@@ -23,6 +23,8 @@ import type { JSX } from "react";
 import type { LaidNode, NodeKind } from "../types";
 import { MONO_ADVANCE_RATIO, displayWidth } from "./row-align";
 import { textWidth } from "./text-width";
+import { 幅で切る } from "./box-lines";
+import { MIN_TITLE_FONT_SIZE } from "../layout/spec";
 
 // 既存の呼出 (検査を含む) がここから取っているため、 そのまま出し直す。
 export { textWidth } from "./text-width";
@@ -61,6 +63,45 @@ export function 幅の倍率(
   return 実幅 > 幅 ? 幅 / 実幅 : 1;
 }
 
+/**
+ * 横で縮める時に、これ以上は縮めないという倍率 (#953)。
+ *
+ * 縮めに下限が無いと、長い名前が点にしか見えない大きさで描かれる
+ * (実測 = 幅 300 の箱に 120 字で 2.4px)。 読めない字は、書いた名前が画面から消えたのと変わらない。
+ * 箱の種別 (`actor` 等 5 種) は `kinds/compact-title.ts` の `fitTextSize` が同じ値で止める。
+ *
+ * **素の大きさが下限以下なら 0 を返す** = 下限を当てると縮めが 1 度も効かず、横へ大きく出る。
+ * その箱は高さの側で既に読めない大きさになっており、`labelPlan` が `読める: false` で報告する。
+ */
+export function 読める下限の倍率(大きさ: number): number {
+  return 大きさ > MIN_TITLE_FONT_SIZE ? MIN_TITLE_FONT_SIZE / 大きさ : 0;
+}
+
+/**
+ * 幅で縮める時に許す下限の倍率 (#953)。 下限を当てられない幅では 0 を返す。
+ *
+ * 下限で止めた行は帯より広くなるので、入るところまで切って `…` を付ける
+ * (箱の中に収める決まりは #433 が持ち、検査が全種別で見ている)。
+ *
+ * **`…` すら入らない幅では止めない**。 そこで切ると名前が 1 字も残らない =
+ * 読めない大きさより悪い。 その幅では今までどおり、小さくても全部描く。
+ *
+ * 測り方は呼ぶ側から渡す。 種別ごとに字幅の見積りが違い、ここで 1 つに決めると
+ * 縮める時と切る時で別の幅を使うことになる。
+ */
+export function 切って収まる下限(
+  題: string,
+  大きさ: number,
+  字間: number,
+  幅上限: number,
+  測る: (t: string, size: number, ls: number) => number,
+): number {
+  const 下限 = 読める下限の倍率(大きさ);
+  if (!(下限 > 0) || !(幅上限 > 0)) return 0;
+  return 幅で切る(題, 大きさ * 下限, 幅上限, (u, f) => 測る(u, f, 字間 * 下限)) === "" ? 0 : 下限;
+}
+
+
 /** 名前の字の大きさの上限。 大きい箱ではここに当たり、 今までの見え方を保つ。 */
 const TITLE_MAX = 18;
 
@@ -433,24 +474,44 @@ export function bodyBand(node: LaidNode, opt: { 影ry: number; 外?: number }):
  *
  * `上` / `下` は倍率 1 の時に baseline から上下へ張り出す量、 `幅` は一番広い行の横幅。
  * 呼ぶ側が自分の書式から出す。
+ *
+ * ## 横は読める下限で止める (#953)
+ *
+ * 横だけで倍率を決めると **下限が無い**。 幅 300 の箱に 120 字の題を渡すと 2.4 で描き、
+ * 点にしか見えない = 書いた名前が画面から消えたのと変わらない。
+ * 箱の種別 (`actor` 等 5 種) は `kinds/compact-title.ts` の `fitTextSize` が 11 で止める。
+ *
+ * `横の下限` を渡すと、横が決める倍率をそこで止める (`切って収まる下限` が算出する)。
+ * 止めた塊は帯から左右へ出るので、呼ぶ側が同じ下限で行を切って収める。
+ *
+ * **縦には入れない**。 縦にはみ出すと絵と重なり、字も絵もどちらも読めなくなる。
+ * 縦が決めた倍率のほうが小さければそちらが勝つので、下限を渡しても縦の張り出しは起きない。
  */
 export function fitLabel(
   band: { x: number; y: number; w: number; h: number },
   block: { 上: number; 下: number; 幅: number },
   pos: { x: number; y: number },
+  横の下限 = 0,
 ): { k: number; x: number; y: number } {
   const 縦 = block.上 + block.下;
   const 横 = Math.max(0, block.幅);
   if (!(縦 > 0)) return { k: 1, x: pos.x, y: pos.y };
   // 帯が潰れた箱では寄せ先が無い。 倍率 0 で描けば箱の外は汚さない
   if (!(band.h > 0) || !(band.w > 0)) return { k: 0, x: band.x + band.w / 2, y: band.y };
-  const k = Math.min(1, band.h / 縦, 横 > 0 ? band.w / 横 : 1);
+  // 横が決める倍率は読める下限で止める (#953)。 縦はそのまま = 縦にはみ出すと絵と重なる
+  const 横で = 横 > 0 ? Math.max(band.w / 横, 横の下限) : 1;
+  const k = Math.min(1, band.h / 縦, 横で);
   // 下端と右端を帯に入れてから、 上端と左端が出る分だけ押し戻す。 倍率が帯に入るまで
   // 落ちているので、 2 つの寄せは両立する
   const 半 = (横 * k) / 2;
   return {
     k,
-    x: Math.max(band.x + 半, Math.min(pos.x, band.x + band.w - 半)),
+    // 下限で止めた塊は帯より広い。 その時は帯の中央に置いて左右へ均等に出す =
+    // 寄せの式をそのまま当てると片側だけに出る (`compact-title.ts` と同じ判断)
+    x:
+      半 * 2 > band.w
+        ? band.x + band.w / 2
+        : Math.max(band.x + 半, Math.min(pos.x, band.x + band.w - 半)),
     y: Math.max(band.y + block.上 * k, Math.min(pos.y, band.y + band.h - block.下 * k)),
   };
 }

package/src/layout/spec.ts

@@ -272,6 +272,87 @@ export function titleFontSize(kind: string | undefined): number {
  */
 export const TITLE_BOX_PADDING = 52;
 
+/**
+ * 低い箱の時だけ題を箱に収まるまで小さくする種別。
+ *
+ * この 4 種は `kinds/compact-title.ts` の `titlePlacement` を通す。 低い箱 (`h` が
+ * `COMPACT_TITLE_MAX_H` 未満) では `fitTextSize` が字を 1 ずつ落として収めるが、
+ * それ以外の高さでは種別ごとの大きさをそのまま描くため、長い題は箱を超える。
+ */
+const KINDS_SCALING_TITLE_WHEN_LOW: ReadonlySet<string> = new Set(["actor", "event", "function", "storage"]);
+
+/**
+ * 高さに関わらず題を箱に収まるまで小さくする種別。
+ *
+ * `card` は `fitTextSize` を直に呼び、残る 34 種は絵の中の字として箱の幅に収まる倍率を掛ける。
+ * 一覧は `test/title-fit-kinds.test.tsx` が `NODE_KINDS` を全件描いて突き合わせる。
+ */
+const KINDS_SCALING_TITLE_ALWAYS: ReadonlySet<string> = new Set([
+  "card",
+  "shape-file",
+  "shape-folder",
+  "shape-cloud",
+  "shape-cylinder",
+  "shape-hexagon",
+  "shape-diamond",
+  "shape-stack",
+  "shape-person",
+  "shape-server-rack",
+  "shape-network-node",
+  "shape-mobile-device",
+  "shape-satellite",
+  "shape-smart-contract",
+  "shape-rpc-node",
+  "shape-wallet",
+  "shape-nft",
+  "shape-token",
+  "shape-blockchain",
+  "shape-bitcoin-chain",
+  "shape-ethereum-chain",
+  "shape-blockchain-node",
+  "shape-bank",
+  "shape-trust-bank",
+  "shape-payment-provider",
+  "shape-credit-card",
+  "shape-brokerage",
+  "shape-exchange",
+  "shape-atm",
+  "shape-website",
+  "shape-storefront",
+  "shape-warehouse",
+  "shape-online-shop",
+  "shape-cdn-edge",
+  "shape-api-gateway",
+]);
+
+/**
+ * これより低い箱を「低い箱」 とみなす。 `kinds/compact-title.ts` の `COMPACT_MAX_H` と同じ値。
+ *
+ * 写しているのは向きが逆だから = `compact-title.ts` は描く側の module で、`layout/` から
+ * 引くと組み方が描画に依存する。 2 つがずれないことは `test/title-fit-kinds.test.tsx` が見る。
+ */
+export const COMPACT_TITLE_MAX_H = 100;
+
+/**
+ * その箱が題を収まるまで小さくするか (SSOT)。
+ *
+ * 小さくする種別は題がはみ出さない代わりに、字が読めない大きさまで落ちうる。
+ * 軸 3 はこの 2 群で見るものを変える = 小さくしない種別は「箱の幅を超えるか」、
+ * 小さくする種別は「読める下限 (`MIN_TITLE_FONT_SIZE`) を割るか」 を見る。
+ */
+export function titleScalesToFit(kind: string | undefined, h: number): boolean {
+  const k = kind ?? "";
+  if (KINDS_SCALING_TITLE_ALWAYS.has(k)) return true;
+  return KINDS_SCALING_TITLE_WHEN_LOW.has(k) && h < COMPACT_TITLE_MAX_H;
+}
+
+/**
+ * 題を小さくする時の下限 (world)。 `kinds/compact-title.ts` の `MIN_TEXT_SIZE` と同じ値。
+ *
+ * 写している理由は `COMPACT_TITLE_MAX_H` と同じ。
+ */
+export const MIN_TITLE_FONT_SIZE = 11;
+
 /**
  * `rows` を文字として描く node の種別。
  *

package/src/layout/text-width.ts

@@ -21,11 +21,24 @@
 
 type FontFamily = "sans" | "mono";
 
+/**
+ * 見積りをどちらへ外すか。
+ *
+ * `layout` (既定) は **広い側** へ外す。 箱の大きさと線の置き場を決める側は、狭く見積もると
+ * 字が枠から出るため、外すなら広い側でなければならない。 表の値はこの向きに寄せてある。
+ *
+ * `drawn` は **実描画に合わせる**。 「はみ出すか」 を判定する側は、広く見積もると収まっている
+ * 字を挙げてしまう。 見本帳の題 407 か所を `getComputedTextLength()` で測り、和文は 1.08 倍 /
+ * 欧文は 1.16 倍の上振れだと判った (`DRAWN_*` の説明)。 その分を割り戻す。
+ */
+type WidthBound = "layout" | "drawn";
+
 interface MeasureOptions {
   fontSize?: number;
   fontWeight?: number;
   letterSpacing?: number;
   fontFamily?: FontFamily;
+  bound?: WidthBound;
 }
 
 /**
@@ -91,6 +104,28 @@ const EMOJI_ADVANCE_EM = 1.05;
 /** mono text から fallback する絵文字の advance (em)。 fontSize 19 の実測 22.0 px。 */
 const MONO_EMOJI_ADVANCE_EM = 1.16;
 
+/**
+ * 和文の上振れ幅。 `bound: "drawn"` で割り戻す。
+ *
+ * 実測 = 見本帳の題のうち和文だけの 247 件が **例外なく** 見積りの 1/1.08 で描かれていた
+ * (最小 1.080 / 中央 1.080)。 和文の字は全角 1.0 em で、表の 1.08 はその上振れぶんになる。
+ */
+const DRAWN_CJK_RATIO = 1.08;
+
+/**
+ * 欧文の上振れ幅。 `bound: "drawn"` で割り戻す。
+ *
+ * 実測 = 欧文だけの 119 件で見積りが実描画の 1.16 から 1.82 倍 (中央 1.27 倍) だった。
+ * **最小の 1.16 を採る** = 割り戻した値が実描画を下回ると、はみ出す題を見落とす。
+ * 407 件すべてで下回らないことを `title-drawn-width.test.ts` が突き合わせる。
+ */
+const DRAWN_ASCII_RATIO = 1.16;
+
+/** ASCII か。 `bound: "drawn"` で割り戻す係数を選ぶためだけに使う。 */
+function isAscii(code: number): boolean {
+  return code < 0x80;
+}
+
 /**
  * 絵文字ではない非 ASCII の記号 1 つ分の advance (em)。 実ブラウザで測った値 (`#481`)。
  *
@@ -189,6 +224,7 @@ export function measureTextWidth(text: string, opts: MeasureOptions = {}): numbe
   const fontSize = opts.fontSize ?? 22;
   const letterSpacing = opts.letterSpacing ?? 0;
   const fontFamily = opts.fontFamily ?? "sans";
+  const bound = opts.bound ?? "layout";
   let advanceEmSum = 0;
   let charCount = 0;
   // 1 つの絵に畳まれる並びがある時だけ書記素で数える (`CLUSTER_JOINER_RE` の説明)
@@ -196,13 +232,23 @@ export function measureTextWidth(text: string, opts: MeasureOptions = {}): numbe
   for (const ch of 文字列) {
     charCount++;
     const code = ch.codePointAt(0) ?? 0;
+    // 実描画に合わせる時は、字種ごとの上振れぶんを割り戻す。 絵文字と記号は実測が無いので
+    // 割り戻さない = 測っていない字を狭く見積もると、はみ出す題を見落とす
+    const 割り戻し =
+      bound === "drawn" && !isEmojiGrapheme(ch, code)
+        ? isAscii(code)
+          ? DRAWN_ASCII_RATIO
+          : isCJK(code)
+            ? DRAWN_CJK_RATIO
+            : 1
+        : 1;
     if (isEmojiGrapheme(ch, code)) {
       // mono を指定しても絵文字は JetBrains Mono ではなく emoji font へ fallback する。
       advanceEmSum += fontFamily === "mono" ? MONO_EMOJI_ADVANCE_EM : EMOJI_ADVANCE_EM;
       continue;
     }
     if (fontFamily === "mono") {
-      advanceEmSum += isCJK(code) ? 1.08 : JETBRAINS_MONO_ADVANCE_EM;
+      advanceEmSum += (isCJK(code) ? 1.08 : JETBRAINS_MONO_ADVANCE_EM) / 割り戻し;
       continue;
     }
     if (isCJK(code)) {
@@ -210,14 +256,16 @@ export function measureTextWidth(text: string, opts: MeasureOptions = {}): numbe
       // Inter fontSize 22 baseline に対し 1.08 em 前後で描画される (実測係数化)。
       // 1.08 が cookbook / presets / text-dsl の合計 G5 warn 最小 (10 件)、
       // 1.15 以上に上げると flow-demo が過大化して +2-6 件増える tradeoff。
-      advanceEmSum += 1.08;
+      advanceEmSum += 1.08 / 割り戻し;
       continue;
     }
     const table = ch.length === 1 ? INTER_BOLD_ADVANCE_EM[ch] : undefined;
-    advanceEmSum += table !== undefined ? table : defaultAdvanceEm(ch, code);
+    advanceEmSum += (table !== undefined ? table : defaultAdvanceEm(ch, code)) / 割り戻し;
   }
   const w = advanceEmSum * fontSize + letterSpacing * charCount;
-  return Math.max(w, fontSize * 1.2);
+  // 最低幅は組み方のための下駄 (短い札で bbox が細くなり判定が揺れるのを防ぐ)。
+  // 実描画に合わせる時は当てない = 1 字の題が 1.2 em で描かれることは無い
+  return bound === "drawn" ? w : Math.max(w, fontSize * 1.2);
 }
 
 /**

package/src/visual-validate.ts

@@ -144,6 +144,8 @@ import {
   rendersTitleText,
   fitsOwnTitleWidth,
   drawsTitleOutsideBox,
+  titleScalesToFit,
+  MIN_TITLE_FONT_SIZE,
   titleFontSize,
   TITLE_BOX_PADDING,
   rowBaselineY,
@@ -2010,16 +2012,34 @@ function runAxes(
     // 1 字の大きさは **その種別が題を描く大きさ** から渡す (#946)。 22 の定数で持っていたが、
     // 22 で描く種別は 1 つも無く、見積りが実物の 1.2 倍から 1.7 倍になっていた。
     //
+    // 見積りは **実描画に合わせた向き** で取る (#951)。 既定の値は組み方のために広い側へ
+    // 寄せてあり (和文 1.08 倍 / 欧文 1.16 倍以上)、そのまま「はみ出すか」 を判定すると
+    // 収まっている題を挙げる。 見本帳の題 407 か所の実測で、広い側の値では 9 枚が挙がり、
+    // 実測ではその 9 枚とも箱の中に 20px 以上の余白を残していた。
+    //
     // 箱の内側の余白 (52) は、題を箱の中に描く種別にだけ足す。 箱の外に描く種別 (`dyn-*` の
     // 名前と図表の題) は内側の余白に縛られないので、足すと収まっている題まで挙がる。
-    const expectedW =
-      measureTextWidth(titleTrimmed, { fontSize: titleFontSize(n.kind) }) +
-      (drawsTitleOutsideBox(n.kind) ? 0 : TITLE_BOX_PADDING);
-    if (expectedW > n.w + 8) {
+    const 余白 = drawsTitleOutsideBox(n.kind) ? 0 : TITLE_BOX_PADDING;
+    const 使える幅 = n.w - 余白;
+    const 実幅 = measureTextWidth(titleTrimmed, { fontSize: titleFontSize(n.kind), bound: "drawn" });
+    if (titleScalesToFit(n.kind, n.h)) {
+      // 収まるまで縮める種別は、題がはみ出すことが起きない。 代わりに字が読めない大きさまで
+      // 落ちるので、**読める下限を割るか** を見る (#951)。 下限まで縮めても収まらない時
+      // (`actor` 等の 4 種) と、下限を無視して縮め続ける時 (絵の中の字) の両方がここに入る
+      const 縮めた大きさ =
+        実幅 > 0 ? titleFontSize(n.kind) * Math.min(1, 使える幅 / 実幅) : titleFontSize(n.kind);
+      if (縮めた大きさ < MIN_TITLE_FONT_SIZE) {
+        push(
+          "text-readability",
+          `node "${n.id}" title "${n.title}" が node 幅 ${n.w}px に収まらず、読める下限 ${MIN_TITLE_FONT_SIZE}px を割る (縮めて ${縮めた大きさ.toFixed(1)}px)`,
+          "warn",
+        );
+      }
+    } else if (実幅 > 使える幅 + 8) {
       push(
         "text-readability",
         // 字ごとの実幅は小数になるので、読む人に出す時だけ丸める (判定は丸めない)
-        `node "${n.id}" title "${n.title}" が node 幅 ${n.w}px を超過する可能性 (期待 ${Math.round(expectedW)}px)`,
+        `node "${n.id}" title "${n.title}" が node 幅 ${n.w}px を超過する可能性 (期待 ${Math.round(実幅 + 余白)}px)`,
         "warn",
       );
     }