@cardenelabs/cdl 0.7.0 → 0.9.0

package/dist/{render-DquCvgOB.d.cts → render-hmFRAabt.d.cts}

@@ -148,6 +148,17 @@ type CdlNode = {
      */
     posW?: number;
     posH?: number;
+    /**
+     * 図の中での役割。 位置ではなく **組み立てた側が付ける目印** で、 描画側の分岐に使う。
+     *
+     * `lifeline-footer` = 順序図で lane の末尾に置く下端の名札 (`presets.ts` の `build()` が付ける)。
+     * 一部の `shape-` は絵を箱の下端から上へ積むため、 箱が低いと絵が縦線と重なる。 その回避で
+     * 絵を下げる対象がこの名札に限られる。
+     *
+     * **位置で推測してはいけない** = 手で組んだ図で一番下が名札でない `shape-` の node だと、
+     * その絵が下がってしまう (`#458`)。
+     */
+    role?: "lifeline-footer";
     /**
      * node の主色。 未指定なら kind ごとの既定色。
      *
@@ -208,6 +219,19 @@ type CdlNode = {
      * kinds/gantt.tsx が縦軸 task lane + 横軸日付 rect bar で SVG 描画する。
      */
     ganttData?: GanttTaskPayload[];
+    /**
+     * gantt-timeline の横軸を何目盛り分にするか (`#483`)。
+     *
+     * 書かない図では今までどおり全 task の最大値から自動で決まる。 書くと尺がその値で固定され、
+     * 状態で動く task があっても他の task の帯の位置と幅が変わらない。
+     *
+     * 位置は 0 から `ganttAxisMax - 1` までで、 そこから外れる task の帯は右端の目盛りに寄せて
+     * 描く (図の外へ出さない、 `kinds/gantt.tsx` SSOT)。
+     *
+     * 有限の正の数でなければ書かなかったものとして扱う = 尺が壊れて帯が図の外へ出るより、
+     * 自動に落ちる方が読める図になる。
+     */
+    ganttAxisMax?: number;
     /**
      * mind-map 専用の branch payload。 tree 構造を 1 node に格納し、
      * kinds/mind-map.tsx が中心 + 放射で SVG 描画する。
@@ -315,13 +339,20 @@ type QuadrantItemPayload = {
     quadrant: BoundEnum<QuadrantKey>;
     subtitle?: string;
 };
-/** tree-hierarchy kind の 1 node payload */
+/**
+ * tree-hierarchy kind の 1 node payload。
+ *
+ * **上の小ラベル (`eyebrow`) は受けない** (#471)。 箱の高さは段の間隔から出ており
+ * (`Math.min(38, 間隔 * 0.7)`)、 名前と補足で 2 行を使うと 3 行目は入らない。 高さを広げると
+ * 段どうしが近づいて箱が重なる。 受け取って描かない欄は、 書き手から効いていないことが
+ * 読めないため置かない。
+ */
 type TreeNodePayload = {
     id: string;
     title: string;
     parent?: string;
+    /** 箱の 2 行目に出す補足 */
     subtitle?: string;
-    eyebrow?: string;
 };
 /** journey-map の気持ち 5 段階 */
 type JourneyEmotion = "delighted" | "happy" | "neutral" | "frustrated" | "angry";

package/dist/{render-DquCvgOB.d.ts → render-hmFRAabt.d.ts}

@@ -148,6 +148,17 @@ type CdlNode = {
      */
     posW?: number;
     posH?: number;
+    /**
+     * 図の中での役割。 位置ではなく **組み立てた側が付ける目印** で、 描画側の分岐に使う。
+     *
+     * `lifeline-footer` = 順序図で lane の末尾に置く下端の名札 (`presets.ts` の `build()` が付ける)。
+     * 一部の `shape-` は絵を箱の下端から上へ積むため、 箱が低いと絵が縦線と重なる。 その回避で
+     * 絵を下げる対象がこの名札に限られる。
+     *
+     * **位置で推測してはいけない** = 手で組んだ図で一番下が名札でない `shape-` の node だと、
+     * その絵が下がってしまう (`#458`)。
+     */
+    role?: "lifeline-footer";
     /**
      * node の主色。 未指定なら kind ごとの既定色。
      *
@@ -208,6 +219,19 @@ type CdlNode = {
      * kinds/gantt.tsx が縦軸 task lane + 横軸日付 rect bar で SVG 描画する。
      */
     ganttData?: GanttTaskPayload[];
+    /**
+     * gantt-timeline の横軸を何目盛り分にするか (`#483`)。
+     *
+     * 書かない図では今までどおり全 task の最大値から自動で決まる。 書くと尺がその値で固定され、
+     * 状態で動く task があっても他の task の帯の位置と幅が変わらない。
+     *
+     * 位置は 0 から `ganttAxisMax - 1` までで、 そこから外れる task の帯は右端の目盛りに寄せて
+     * 描く (図の外へ出さない、 `kinds/gantt.tsx` SSOT)。
+     *
+     * 有限の正の数でなければ書かなかったものとして扱う = 尺が壊れて帯が図の外へ出るより、
+     * 自動に落ちる方が読める図になる。
+     */
+    ganttAxisMax?: number;
     /**
      * mind-map 専用の branch payload。 tree 構造を 1 node に格納し、
      * kinds/mind-map.tsx が中心 + 放射で SVG 描画する。
@@ -315,13 +339,20 @@ type QuadrantItemPayload = {
     quadrant: BoundEnum<QuadrantKey>;
     subtitle?: string;
 };
-/** tree-hierarchy kind の 1 node payload */
+/**
+ * tree-hierarchy kind の 1 node payload。
+ *
+ * **上の小ラベル (`eyebrow`) は受けない** (#471)。 箱の高さは段の間隔から出ており
+ * (`Math.min(38, 間隔 * 0.7)`)、 名前と補足で 2 行を使うと 3 行目は入らない。 高さを広げると
+ * 段どうしが近づいて箱が重なる。 受け取って描かない欄は、 書き手から効いていないことが
+ * 読めないため置かない。
+ */
 type TreeNodePayload = {
     id: string;
     title: string;
     parent?: string;
+    /** 箱の 2 行目に出す補足 */
     subtitle?: string;
-    eyebrow?: string;
 };
 /** journey-map の気持ち 5 段階 */
 type JourneyEmotion = "delighted" | "happy" | "neutral" | "frustrated" | "angry";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.7.0",
+  "version": "0.9.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",
@@ -47,7 +47,8 @@
     "src",
     "examples",
     "README.md",
-    "SPEC.md"
+    "SPEC.md",
+    "CHANGELOG.md"
   ],
   "publishConfig": {
     "access": "public"
@@ -62,7 +63,9 @@
     "typecheck": "tsc --noEmit",
     "test": "cd ../.. && vitest run packages/cdl",
     "lint": "tsc --noEmit",
-    "prepublishOnly": "pnpm run typecheck && pnpm run build"
+    "prepublishOnly": "pnpm run typecheck && pnpm run build",
+    "prepack": "node scripts/prepack-check.mjs",
+    "postpack": "node scripts/prepack-check.mjs"
   },
   "peerDependencies": {
     "react": "^19.0.0",

package/src/kinds/box-lines.ts

@@ -0,0 +1,120 @@
+import { textWidth } from "./text-width";
+
+/**
+ * 箱の中に文字の行を積む (#471)。
+ *
+ * **JSX を持たない module に置く**。 木 (`tree.tsx`) と放射 (`mind-map.tsx`) の両方が使う。
+ * `text-width.ts` が同じ理由で分かれているのに合わせる。
+ *
+ * 箱の大きさは呼び出し側が決めた値をそのまま受ける = **積んだ結果で高さを変えない**。
+ * 木も放射も箱の高さが段の間隔から出ており (`Math.min(38, 間隔 * 0.7)`)、 高さを変えると
+ * 段どうしの間隔まで動いて既存の図の見た目が変わる。 入らない行は落とす方を採る。
+ */
+
+/**
+ * 1 行が字の大きさの何倍の高さを占めるか。
+ *
+ * 詰め気味にするのは、 箱の高さが 30 前後しかないため (放射の枝 = 30、 木 = 最大 38)。
+ * 読みやすさの目安である 1.4-1.5 を採ると 2 行が入らず、 補足が常に落ちる。
+ */
+const 行送りの比 = 1.15;
+
+/** 大文字の高さが字の大きさの何倍か (baseline を出すのに使う) */
+const 字の高さの比 = 0.72;
+
+/** 箱の上下に空ける余白 */
+const 上下の余白 = 2;
+
+/** 箱の左右に空ける余白 (片側) */
+const 左右の余白 = 8;
+
+export type 積む行 = {
+  役割: "title" | "subtitle";
+  text: string;
+  fontSize: number;
+};
+
+export type 積んだ行 = 積む行 & {
+  /** 箱の中心から見た baseline の上下のずれ */
+  dy: number;
+};
+
+/**
+ * 幅に収まるところまでで切り、 切った時は末尾に `…` を付ける。
+ *
+ * 字の幅は実測の見積り (`textWidth`) から出す。 SVG は描く前に実寸を返さないため、
+ * 描いてから測って縮める形は取れない。
+ *
+ * `測る` を差し替えられるのは、 等幅の書体を使う絵があるため (#469)。 等幅は字ごとの幅を
+ * 持たず字数で決まるので、 比例用の見積りを当てると実物とずれる。
+ */
+export function 幅で切る(
+  text: string,
+  fontSize: number,
+  使える幅: number,
+  測る: (s: string, size: number) => number = textWidth,
+): string {
+  if (使える幅 <= 0) return "";
+  if (測る(text, fontSize) <= 使える幅) return text;
+
+  const 省略 = "…";
+  const 省略の幅 = 測る(省略, fontSize);
+  // 省略記号すら入らない幅では何も返さない。 返すと「幅に収まる文字を返す」 という約束を
+  // 破り、 箱から出る (深い放射や葉の多い木で内側の幅が極小になった時に起きる)
+  if (省略の幅 > 使える幅) return "";
+
+  let 出 = "";
+  let 幅 = 0;
+  for (const c of 書記素に分ける(text)) {
+    const 字の幅 = 測る(c, fontSize);
+    if (幅 + 字の幅 + 省略の幅 > 使える幅) break;
+    幅 += 字の幅;
+    出 += c;
+  }
+  return `${出}${省略}`;
+}
+
+/**
+ * 見た目の 1 字 (書記素クラスタ) に分ける。
+ *
+ * `for...of` は符号位置で回るため、 濁点や結合文字の付いた字と、 ZWJ で繋いだ絵文字を
+ * **途中で切る** (実測 = `é` が `e` だけになり、 `👩‍💻` が `👩‍` になった)。 幅の見積り
+ * (`textWidth`) も符号位置で足すので数は合うが、 見た目の 1 字が壊れる。
+ *
+ * `Intl.Segmenter` を持たない環境では符号位置に落ちる。 切り方が粗くなるだけで、 幅の
+ * 見積りとは食い違わない。
+ */
+function 書記素に分ける(text: string): string[] {
+  const 区切り = (Intl as { Segmenter?: new (l?: string, o?: { granularity: string }) => { segment: (s: string) => Iterable<{ segment: string }> } }).Segmenter;
+  if (typeof 区切り !== "function") return [...text];
+  return [...new 区切り(undefined, { granularity: "grapheme" }).segment(text)].map((g) => g.segment);
+}
+
+/**
+ * 箱に入る行だけを選び、 それぞれの baseline を返す。
+ *
+ * 先頭 (名前) は必ず残す。 入り切らない時は **後ろから落とす** = 補足より名前を優先する。
+ * 2 件目以降の空文字は行として数えない (補足を渡していない時に空行が空くのを避ける)。
+ *
+ * 返す `dy` は箱の中心から見たずれで、 行の塊を上下の中央に置いた時の baseline になる。
+ */
+export function 箱に積む(行: 積む行[], 箱の幅: number, 箱の高さ: number): 積んだ行[] {
+  const 候補 = 行.filter((r, i) => i === 0 || r.text.trim() !== "");
+  if (候補.length === 0) return [];
+
+  const 使える高さ = 箱の高さ - 上下の余白 * 2;
+  const 高さ = (rs: 積む行[]): number => rs.reduce((a, r) => a + r.fontSize * 行送りの比, 0);
+
+  // 入るまで後ろから落とす。 先頭は落とさない
+  const 残す = [...候補];
+  while (残す.length > 1 && 高さ(残す) > 使える高さ) 残す.pop();
+
+  const 使える幅 = 箱の幅 - 左右の余白 * 2;
+  const 総高 = 高さ(残す);
+  let 積み = -総高 / 2;
+  return 残す.map((r) => {
+    const dy = 積み + ((行送りの比 + 字の高さの比) / 2) * r.fontSize;
+    積み += r.fontSize * 行送りの比;
+    return { ...r, text: 幅で切る(r.text, r.fontSize, 使える幅), dy };
+  });
+}

package/src/kinds/gantt.tsx

@@ -33,21 +33,141 @@ export function GanttNode({
   const rowCount = tasks.length || 1;
   const rowH = Math.max(28, (canvasH - rowGap * (rowCount + 1)) / rowCount);
 
+  // 位置を先に整える (#468 Round 5)。 端も始まりも状態から来るため、 そのまま使うと
+  // 図が壊れる形が 3 つある (いずれも実測)。
+  //
+  // | 入力 | そのまま使った時 |
+  // |---|---|
+  // | 始まり `1e308` | `x="Infinity"` |
+  // | 始まり `-1e308` | `x="-Infinity" width="Infinity"` |
+  // | 始まり 10 / 端 1 | 帯が図の外 (`x=2739`) |
+  //
+  // 負は 0 に寄せ、 端が始まりより手前なら始まりに揃える。 落とさず整えるのは、 状態が動く
+  // 途中で一瞬だけ逆転する形があるため (帯が消えるより潰れて見える方がよい)。
+  const 位置の上限 = 1e6;
+  const 収めた = tasks.map((t) => {
+    const 始 = Math.min(位置の上限, Math.max(0, Number.isFinite(t.startIdx) ? t.startIdx : 0));
+    const 終 = Math.min(位置の上限, Math.max(始, Number.isFinite(t.endIdx) ? t.endIdx : 始));
+    return { ...t, startIdx: 始, endIdx: 終 };
+  });
+
+  // 書き手が宣言した横軸の範囲 (#483)。 有限の正の数だけ採る = 壊れた値で尺を作ると帯が
+  // 図の外へ出るため、 それより自動に落ちる方が読める図になる。
+  //
+  // 位置は 0 から `宣言した尺 - 1` までで、 `帯の右` は 1 目盛り分先まで伸びるため、
+  // 最後の目盛りにある帯の右端がちょうど図の右端に来る。
+  const 宣言 = node.ganttAxisMax;
+  const 宣言した尺 = typeof 宣言 === "number" && Number.isFinite(宣言) && 宣言 > 0
+    ? Math.min(位置の上限, Math.ceil(宣言))
+    : undefined;
+
   // 帯の右端が状態で動くと端数が出る。 目盛りは本数を数えるので切り上げて整数にする
   // (静止した図では endIdx が整数なので切り上げても値は変わらない)。
-  const maxIdx = Math.max(1, Math.ceil(Math.max(...tasks.map((t) => t.endIdx + 1), 1)));
+  //
+  // **始まりも見る**。 上の整えで端は始まり以上になるため、 端だけでも同じ値になる
+  // (この 2 つは今は等価)。 整えを緩めた時に帯が図の外へ出る形を作らないための二重。
+  const maxIdx = 宣言した尺 ?? Math.max(
+    1,
+    Math.ceil(Math.max(...収めた.flatMap((t) => [t.startIdx + 1, t.endIdx + 1]), 1)),
+  );
   const cellW = canvasW / maxIdx;
 
+  // 宣言した範囲から外れる帯は **右端の目盛りに寄せる** (#483)。 尺を広げて収める形は採らない
+  // = 広げた瞬間に他の task の帯が動き、 範囲を宣言した意味が消える。
+  //
+  // 落とす形も採らない (Issue の 反例 = 帯が図の外へ消えてはいけない)。 寄せた帯には印を付け、
+  // 実際の位置と違うことを読み取れるようにする。
+  const 最後の目盛り = maxIdx - 1;
+  const 整えた = 宣言した尺 === undefined
+    ? 収めた
+    : 収めた.map((t) => {
+      const 始 = Math.min(t.startIdx, 最後の目盛り);
+      const 終 = Math.min(t.endIdx, 最後の目盛り);
+      const 寄せた = 始 !== t.startIdx || 終 !== t.endIdx;
+      return 寄せた ? { ...t, startIdx: 始, endIdx: 終, clipped: true } : t;
+    });
+
+  // **描く目盛りの本数だけに上限を置く** (#468)。 端は状態から来るため、 大きな値を書かれると
+  // 目盛りをその数だけ作ることになる (実測 = `4294967295` で `Array.from` が
+  // `RangeError: Invalid array length`)。
+  //
+  // **尺 (`maxIdx`) には掛けない**。 掛けると尺が実際の最大より小さくなり、 上限を超える位置の
+  // 帯が図の外へ出る (Round 2 の実測 = 位置 250 の帯が右端 800.6、 図の右端は 672)。
+  // 本数が上限を超える時は間引いて描く = 目盛りは目安なので、 全部描けなくても図は読める。
+  const 目盛りの上限 = 200;
+  const 目盛りの間隔 = Math.max(1, Math.ceil(maxIdx / 目盛りの上限));
+  const 目盛りの本数 = Math.ceil(maxIdx / 目盛りの間隔);
+
   const xAt = (idx: number) => PAD_LEFT + idx * cellW;
   const yAt = (row: number) => PAD_TOP + rowGap + row * (rowH + rowGap);
 
-  const gridLabels = Array.from({ length: maxIdx }, (_, i) => {
-    const t = tasks.find((tt) => tt.startIdx === i);
-    return t?.startLabel ?? String(i);
-  });
+  // 目盛りの名前は task が持つ (開始と終了の両方)。 どちらも指していない位置は
+  // **空にする** = index の数字をそのまま出すと、 月や四半期の並びに数字が 1 つ混ざって
+  // 与えた値のように読める (実測 = "1月 2月 2 4月 5月" の 3 番目)。
+  //
+  // 引き継ぎ (前の名前を繰り返す) は採らない。 別の目盛りに同じ名前が並ぶと、 どちらが
+  // その task の境目か読めなくなる。
+  //
+  // 規則は 3 つ。 いずれも決めておかないと task の書き順で結果が変わる。
+  //
+  // 1. 同じ位置を複数の task が指す時は **先に書いた task** を採る
+  // 2. 開始の名前を終了の名前より優先する
+  // 3. 空文字は名前が無いものとして扱い、 次の候補へ落ちる
+  //
+  // 端数を持つ位置は四捨五入で合わせる。 端は状態に追随して端数を持つ (`{signal}` で動く)
+  // 一方、 目盛りは整数の位置にしか無いため、 厳密一致だと動いている間だけ名前が消える
+  // (実測 = endIdx 1.5 で終了の名前が出なくなった)。
+  //
+  // **整数の一致を端数より優先する**。 まとめて四捨五入すると、 動いている task が
+  // その位置を静的に指す task の名前を奪う (実測 = endIdx 1.5 の task が先にあると、
+  // endIdx 2 の task の名前が消えた)。
+  //
+  // 表を 1 度だけ作る = 目盛りごとに task を探すと目盛り数 × task 数になり、 動きの
+  // 1 コマごとに払う。
+  const 名前 = { 整数の開始: new Map<number, string>(), 整数の終了: new Map<number, string>(), 端数の開始: new Map<number, string>(), 端数の終了: new Map<number, string>() };
+  const 置く = (表: Map<number, string>, 位置: number, label: string) => {
+    // 空文字は名前が無いものとして扱う。 同じ位置は先に書いた task を採る
+    if (label !== "" && Number.isFinite(位置) && !表.has(位置)) 表.set(位置, label);
+  };
+  // 名前は宣言範囲へ寄せる前の位置から作る。 範囲外 task の名前まで右端へ
+  // 寄せると、 実際に右端を指す task の名前を上書きして軸の意味が変わる。
+  for (const t of 収めた) {
+    const 整数の開始 = Number.isInteger(t.startIdx);
+    置く(整数の開始 ? 名前.整数の開始 : 名前.端数の開始, Math.round(t.startIdx), t.startLabel);
+    const 整数の終了 = Number.isInteger(t.endIdx);
+    置く(整数の終了 ? 名前.整数の終了 : 名前.端数の終了, Math.round(t.endIdx), t.endLabel);
+  }
+  const 名前を引く = (i: number): string =>
+    名前.整数の開始.get(i) ?? 名前.整数の終了.get(i) ?? 名前.端数の開始.get(i) ?? 名前.端数の終了.get(i) ?? "";
+
+  // 間引いた位置に加えて、 **名前のある位置は必ず残す** (#468 Round 3)。 等間隔だけで選ぶと
+  // task の境目に付いた名前が落ちる (実測 = 位置 202 まで伸ばすと間隔 2 になり、 位置 1 と 3 の
+  // 名前が消えた)。 名前は task から来るので、 残す数は task 数で頭打ちになる。
+  //
+  // 位置そのものも持ち回る = 間隔が 1 でない時に添字と位置がずれるため、 線と名前を置く場所を
+  // 位置から出す。
+  const 位置の集合 = new Set<number>();
+  for (let n = 0; n < 目盛りの本数; n += 1) 位置の集合.add(n * 目盛りの間隔);
+  for (const 表 of [名前.整数の開始, 名前.整数の終了, 名前.端数の開始, 名前.端数の終了]) {
+    for (const i of 表.keys()) if (i >= 0 && i < maxIdx) 位置の集合.add(i);
+  }
+  const gridLabels = [...位置の集合]
+    .sort((a, b) => a - b)
+    .map((i) => ({ 位置: i, label: 名前を引く(i) }));
+
+  // 帯の左右に置く余白。 **目盛りの幅に比例させる** (#468 Round 7)。
+  //
+  // 固定 (6) だと、 目盛りが細かい図で帯が消える。 1 目盛りの幅が 6 ちょうどだと幅 0、
+  // それより小さいと負になる (実測 = 位置 1e6 で -5.999、 位置 85 で 0)。
+  // 目盛りが広い図 (通常の工程表) では 6 のままなので見た目は変わらない。
+  const 帯の余白 = Math.min(6, cellW / 2);
+  // 帯の左端と右端。 **依存矢印も同じ式を使う** (#468 Round 9)。 別々に持つと、 余白を
+  // 可変にした時に矢印の基準点だけが旧い端に取り残される
+  const 帯の左 = (idx: number): number => xAt(idx) + 帯の余白 / 2;
+  const 帯の右 = (idx: number): number => xAt(idx) + cellW - 帯の余白 / 2;
 
-  const taskById = new Map(tasks.map((t) => [t.id, t]));
-  const rowOf = new Map(tasks.map((t, i) => [t.id, i]));
+  const taskById = new Map(整えた.map((t) => [t.id, t]));
+  const rowOf = new Map(整えた.map((t, i) => [t.id, i]));
 
   return (
     <g transform={`translate(${x0} ${y0})`}>
@@ -63,9 +183,10 @@ export function GanttNode({
         strokeWidth={active ? 3 : 1.25}
       />
 
-      {gridLabels.map((label, i) => (
+      {gridLabels.map(({ 位置: i, label }) => (
         <g key={`grid-${i}`}>
           <line
+            data-cdl-role="gantt-grid"
             x1={xAt(i)}
             y1={PAD_TOP}
             x2={xAt(i)}
@@ -75,15 +196,18 @@ export function GanttNode({
             strokeDasharray="3 3"
             opacity={0.5}
           />
-          <text
-            x={xAt(i) + cellW / 2}
-            y={PAD_TOP + canvasH + 18}
-            fontSize={11}
-            textAnchor="middle"
-            fill="var(--cdl-text-dim, #5a6270)"
-          >
-            {label}
-          </text>
+          {label === "" ? null : (
+            <text
+              data-cdl-role="gantt-tick"
+              x={xAt(i) + cellW / 2}
+              y={PAD_TOP + canvasH + 18}
+              fontSize={11}
+              textAnchor="middle"
+              fill="var(--cdl-text-dim, #5a6270)"
+            >
+              {label}
+            </text>
+          )}
         </g>
       ))}
 
@@ -97,7 +221,7 @@ export function GanttNode({
         opacity={0.5}
       />
 
-      {tasks.map((t, row) => (
+      {整えた.map((t, row) => (
         <text
           key={`label-${t.id}`}
           x={PAD_LEFT - 12}
@@ -111,15 +235,19 @@ export function GanttNode({
         </text>
       ))}
 
-      {tasks.map((t, row) => {
-        const bx = xAt(t.startIdx) + 3;
+      {整えた.map((t, row) => {
+        const bx = 帯の左(t.startIdx);
         const by = yAt(row);
-        const bw = Math.max(cellW - 6, (t.endIdx - t.startIdx + 1) * cellW - 6);
+        // 0 で切るのは二重。 余白が目盛りの幅の半分で頭打ちのため、 引いた結果は必ず
+        // 目盛りの幅の半分以上になる = **この分岐に届く入力を今は作れない** (変異試験で確認)。
+        // 余白の決め方を変えた時に負の幅を出さないために残す
+        const bw = Math.max(0, 帯の右(t.endIdx) - bx);
         return (
           <g key={`bar-${t.id}`}>
             <rect
               data-cdl-role="gantt-bar"
               data-cdl-unresolved={t.unresolved ? "true" : undefined}
+              data-cdl-clipped={"clipped" in t && t.clipped ? "true" : undefined}
               x={bx}
               y={by}
               width={bw}
@@ -143,15 +271,15 @@ export function GanttNode({
         );
       })}
 
-      {tasks
+      {整えた
         .filter((t) => t.dependsOn && taskById.has(t.dependsOn))
         .map((t) => {
           const parent = taskById.get(t.dependsOn!)!;
           const parentRow = rowOf.get(parent.id)!;
           const childRow = rowOf.get(t.id)!;
-          const parentBarRight = xAt(parent.endIdx) + cellW - 3;
+          const parentBarRight = 帯の右(parent.endIdx);
           const parentMidY = yAt(parentRow) + rowH / 2;
-          const childBarLeft = xAt(t.startIdx) + 3;
+          const childBarLeft = 帯の左(t.startIdx);
           const childMidY = yAt(childRow) + rowH / 2;
           const arrowHeadSize = 8;
           // arrow head 三角形の頂点 (= tipX + arrowHeadSize) が bar 左辺の 10px 手前に来る

package/src/kinds/mind-map.tsx

@@ -1,4 +1,5 @@
 import type { JSX } from "react";
+import { 箱に積む } from "./box-lines";
 import type { LaidNode, Tone, MindBranchNode } from "../types";
 import { TONE } from "../render/tone";
 import { resolveMindData } from "../render/payload-binding";
@@ -76,7 +77,22 @@ export function MindMapNode({
         />
       ))}
 
-      {layout.nodes.map((n) => (
+      {layout.nodes.map((n) => {
+        // 補足は箱の中の 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,
+        );
+        // 判定は行数でなく「補足を渡したか」 で行う (理由は tree.tsx と同じ、 #471 Round 1)
+        const 補足あり = (n.subtitle ?? "").trim() !== "";
+        const 文字の色 = n.isRoot
+          ? "var(--cdl-text-on-tone, #ffffff)"
+          : "var(--cdl-chip-text, #1a1f2a)";
+        return (
         <g key={`n-${n.id}`} data-cdl-unresolved={n.unresolved ? "true" : undefined}>
           <rect
             x={n.x - n.w / 2}
@@ -88,18 +104,37 @@ export function MindMapNode({
             stroke={n.isRoot ? toneColor(n.tone ?? "accent") : toneColor(n.tone)}
             strokeWidth={n.isRoot ? 2 : 1.75}
           />
-          <text
-            x={n.x}
-            y={n.y + 5}
-            fontSize={n.isRoot ? 15 : 13}
-            fontWeight={n.isRoot ? 700 : 600}
-            textAnchor="middle"
-            fill={n.isRoot ? "var(--cdl-text-on-tone, #ffffff)" : "var(--cdl-chip-text, #1a1f2a)"}
-          >
-            {n.title}
-          </text>
+          {補足あり ? (
+            行.map((r) => (
+              <text
+                key={r.役割}
+                data-cdl-role={r.役割 === "subtitle" ? "mind-node-subtitle" : undefined}
+                x={n.x}
+                y={n.y + r.dy}
+                fontSize={r.fontSize}
+                fontWeight={r.役割 === "title" ? (n.isRoot ? 700 : 600) : 500}
+                textAnchor="middle"
+                fill={文字の色}
+                opacity={r.役割 === "subtitle" ? 0.85 : undefined}
+              >
+                {r.text}
+              </text>
+            ))
+          ) : (
+            <text
+              x={n.x}
+              y={n.y + 5}
+              fontSize={n.isRoot ? 15 : 13}
+              fontWeight={n.isRoot ? 700 : 600}
+              textAnchor="middle"
+              fill={文字の色}
+            >
+              {n.title}
+            </text>
+          )}
         </g>
-      ))}
+        );
+      })}
     </g>
   );
 }
@@ -107,6 +142,8 @@ export function MindMapNode({
 type LayoutNode = {
   id: string;
   title: string;
+  /** 箱の 2 行目に出す補足 (#471) */
+  subtitle?: string;
   x: number;
   y: number;
   w: number;
@@ -297,6 +334,7 @@ export function computeMindMapLayout(
     nodes.push({
       id: node.id,
       title: node.title,
+      ...(node.subtitle !== undefined ? { subtitle: node.subtitle } : {}),
       x,
       y,
       w,

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>