@cardenelabs/cdl 0.82.0 → 0.102.0

package/src/layout/text-width.ts

@@ -219,3 +219,28 @@ export function measureTextWidth(text: string, opts: MeasureOptions = {}): numbe
   const w = advanceEmSum * fontSize + letterSpacing * charCount;
   return Math.max(w, fontSize * 1.2);
 }
+
+/**
+ * 与えた幅に収めるための字の倍率を出す。 収まっているなら 1 を返す。
+ *
+ * 字間 (`letterSpacing`) を渡さないのは、字間があると倍率が 1 回の割り算で決まらないため。
+ * `measureTextWidth` の戻りは字間を除けば `fontSize` に比例する (最低幅も `fontSize × 1.2`
+ * なので同じく比例する) ので、比を 1 度取れば厳密に収まる。 字間は文字数ぶんの定数として
+ * 足されるため比例が崩れ、縮めた後にもう一度測らないと収まったか判らない。
+ *
+ * 幅か字の大きさが 0 以下なら 1 を返す。 収める先が無い形で 0 を返すと字が消えて、
+ * 「収めた」 のか「描かなかった」 のかが読めなくなる。
+ *
+ * `kinds/shape-region.tsx` の `幅の倍率` が同じ形を持つが、あちらは字種の平均で測る
+ * `kinds/text-width.ts` の `textWidth` を使う。 絵の中の字は engine の外から大きさを
+ * 与えられるため、1 文字ごとの実測表より軽い見積りで足りる。 測り方が違うので別に置く。
+ */
+export function 収める倍率(
+  text: string,
+  opts: MeasureOptions & { fontSize: number },
+  幅: number,
+): number {
+  if (!(幅 > 0) || !(opts.fontSize > 0)) return 1;
+  const 実幅 = measureTextWidth(text, { ...opts, letterSpacing: 0 });
+  return 実幅 > 幅 ? 幅 / 実幅 : 1;
+}

package/src/layout/viewbox.ts

@@ -1,6 +1,21 @@
 import type { BBox, CdlViewport, LaidEdge, LaidLane, LaidNode } from "../types";
+import { isRenderedNode } from "./spec";
 import { VIEW_PAD } from "./tokens";
 
+/**
+ * その帯が箱いっぱいに絵を出すか (#919)。
+ *
+ * 出さない帯が描くのは当たりを取るための矩形だけで、`fill="none" stroke="none"` で
+ * 見えない (`render/stage.tsx` の「lane bbox を <g> の boundingBox に anchor するための
+ * invisible rect」)。 見えないものを枠に入れると、宣言した帯の幅ぶん枠が広がる。
+ *
+ * 名前 (`label`) は数えない。 名前は `bboxes` に `lane-label` として既に入っており、
+ * 帯の箱ではなく名前の大きさで枠が決まるのが正しい。
+ */
+function 箱いっぱいに描く(lane: LaidLane): boolean {
+  return lane.contain === true || lane.lifeline === true;
+}
+
 export function computeViewBox(
   lanes: LaidLane[],
   nodes: LaidNode[],
@@ -8,21 +23,38 @@ export function computeViewBox(
   bboxes: BBox[],
   viewport?: CdlViewport,
 ): { x: number; y: number; w: number; h: number } {
+  // 書いた時点で隠れると決まっている節は枠に入れない (#923)。
+  // 判定は `isRenderedNode` が唯一持つ = ここで書き直すと規則が 2 か所に分かれる。
+  // `{signal}` を含む条件は出る側に倒すので、段で出たり消えたりする節は今までどおり
+  // 枠に入る (外すと段を進めるたびに枠が動く)。
+  const 常に隠れる節 = new Set(nodes.filter((n) => !isRenderedNode(n)).map((n) => n.id));
   let maxX = 0;
   let maxY = 0;
   let minX = Number.POSITIVE_INFINITY;
   let minY = Number.POSITIVE_INFINITY;
   for (const bbox of bboxes) {
+    // 節は外接矩形としても出てくる。 節そのものだけ外しても、こちらが枠を作る
+    if (bbox.kind === "node" && 常に隠れる節.has(bbox.id)) continue;
     maxX = Math.max(maxX, bbox.x + bbox.w);
     maxY = Math.max(maxY, bbox.y + bbox.h);
     minX = Math.min(minX, bbox.x);
     minY = Math.min(minY, bbox.y);
   }
+  // **遠い側の端だけを渡さない** (#919)。 帯と節は右端と下端しか渡しておらず、
+  // 左端と上端は `bboxes` 任せだった。 帯が節より広い図では右だけ枠が伸び、
+  // 左には対応する余白が付かない = 絵が左へ寄る
+  // (見本帳の絵記号 117 枚すべてで右の余白が左より広く、差の中央は枠の幅の 12 ポイント)。
   for (const lane of lanes) {
+    if (!箱いっぱいに描く(lane)) continue;
+    minX = Math.min(minX, lane.x);
+    minY = Math.min(minY, lane.y);
     maxX = Math.max(maxX, lane.x + lane.width);
     maxY = Math.max(maxY, lane.y + lane.height);
   }
   for (const n of nodes) {
+    if (常に隠れる節.has(n.id)) continue;
+    minX = Math.min(minX, n.cx - n.w / 2);
+    minY = Math.min(minY, n.cy - n.h / 2);
     maxX = Math.max(maxX, n.cx + n.w / 2);
     maxY = Math.max(maxY, n.cy + n.h / 2);
   }

package/src/presets.ts

@@ -1621,6 +1621,8 @@ export type TreeNode = {
 export type TreePreset = {
   id: string;
   topic: string;
+  /** 図の題の上に出す小見出し (#939)。 書かなければ何も出ない */
+  eyebrow?: string;
   defaultTone?: Tone;
   /** depth ごとの lane width (default 320) */
   nodeWidth?: number;
@@ -1663,7 +1665,7 @@ export function tree(preset: TreePreset): TreeBuilder {
         stack: 0,
         kind: "tree-hierarchy",
         title: preset.topic,
-        eyebrow: "tree",
+        ...(preset.eyebrow ? { eyebrow: preset.eyebrow } : {}),
         w: canvasW,
         h: canvasH,
         treeData: treeNodes.map((n) => ({
@@ -1705,6 +1707,8 @@ export type JourneyStep = {
 export type UserJourneyPreset = {
   id: string;
   topic: string;
+  /** 図の題の上に出す小見出し (#939)。 書かなければ何も出ない */
+  eyebrow?: string;
   defaultTone?: Tone;
   stepWidth?: number;
 };
@@ -1745,7 +1749,7 @@ export function userJourney(preset: UserJourneyPreset): UserJourneyBuilder {
         stack: 0,
         kind: "journey-map",
         title: preset.topic,
-        eyebrow: "userJourney",
+        ...(preset.eyebrow ? { eyebrow: preset.eyebrow } : {}),
         w: canvasW,
         h: canvasH,
         journeyData: steps.map((s) => ({
@@ -1783,6 +1787,8 @@ export type MindBranch = {
 export type MindMapPreset = {
   id: string;
   topic: string;
+  /** 図の題の上に出す小見出し (#939)。 書かなければ何も出ない */
+  eyebrow?: string;
   /** 中心 topic ID + label */
   rootId: string;
   rootTitle: string;
@@ -1831,7 +1837,7 @@ export function mindMap(preset: MindMapPreset): MindMapBuilder {
         stack: 0,
         kind: "mind-map",
         title: preset.topic,
-        eyebrow: "mindMap",
+        ...(preset.eyebrow ? { eyebrow: preset.eyebrow } : {}),
         w: canvasW,
         h: canvasH,
         mindData: {
@@ -1873,6 +1879,8 @@ export type FunnelStage = {
 export type FunnelPreset = {
   id: string;
   topic: string;
+  /** 図の題の上に出す小見出し (#939)。 書かなければ何も出ない */
+  eyebrow?: string;
   defaultTone?: Tone;
   stageWidth?: number;
 };
@@ -1913,7 +1921,7 @@ export function funnel(preset: FunnelPreset): FunnelBuilder {
         stack: 0,
         kind: "funnel-stages",
         title: preset.topic,
-        eyebrow: "funnel",
+        ...(preset.eyebrow ? { eyebrow: preset.eyebrow } : {}),
         w: canvasW,
         h: canvasH,
         funnelData: stages.map((s) => ({
@@ -1952,6 +1960,8 @@ export type QuadrantItem = {
 export type QuadrantPreset = {
   id: string;
   topic: string;
+  /** 図の題の上に出す小見出し (#939)。 書かなければ何も出ない */
+  eyebrow?: string;
   /** x 軸 label (left / right) */
   xAxis: { left: string; right: string };
   /** y 軸 label (bottom / top) */
@@ -2006,7 +2016,7 @@ export function quadrant(preset: QuadrantPreset): QuadrantBuilder {
         stack: 0,
         kind: "quadrant-matrix",
         title: preset.topic,
-        eyebrow: "quadrant",
+        ...(preset.eyebrow ? { eyebrow: preset.eyebrow } : {}),
         w: canvasW,
         h: canvasH,
         quadrantData: {
@@ -2060,6 +2070,8 @@ export type ChartDatum = {
 export type ChartPreset = {
   id: string;
   topic: string;
+  /** 図の題の上に出す小見出し (#939)。 書かなければ何も出ない */
+  eyebrow?: string;
   type: ChartType;
   defaultTone?: Tone;
   itemWidth?: number;
@@ -2127,7 +2139,7 @@ export function chart(preset: ChartPreset): ChartBuilder {
         stack: 0,
         kind: kindMap[preset.type],
         title: preset.topic,
-        eyebrow: preset.type,
+        ...(preset.eyebrow ? { eyebrow: preset.eyebrow } : {}),
         w: canvasW,
         h: canvasH,
         chartData: data.map((d) => ({
@@ -2173,6 +2185,8 @@ export type GanttTask = {
 export type GanttPreset = {
   id: string;
   topic: string;
+  /** 図の題の上に出す小見出し (#939)。 書かなければ何も出ない */
+  eyebrow?: string;
   defaultTone?: Tone;
   laneWidth?: number;
   /**
@@ -2240,7 +2254,7 @@ export function gantt(preset: GanttPreset): GanttBuilder {
         stack: 0,
         kind: "gantt-timeline",
         title: preset.topic,
-        eyebrow: "gantt",
+        ...(preset.eyebrow ? { eyebrow: preset.eyebrow } : {}),
         w: canvasW,
         h: canvasH,
         // 宣言していない図には欄自体を載せない = 自動で決める経路をそのまま通す
@@ -2687,6 +2701,9 @@ export function stateMachine2(preset: StateMachine2Preset): StateMachine2Builder
         ...(subParts.length ? { sub: subParts.join(" ") } : {}),
         tone: t.tone ?? tone,
         style: "solid",
+        // 遷移の印は 1 種類だけ = 実線に開いた矢 (#578)。 stateMachine と同じ値を渡す
+        // (渡さないと EDGE_HEAD_DEFAULT の三角に落ち、入口を選び直しただけで印が変わる)
+        head: "open",
       });
       phaseActivate.push(edgeId);
       return api;

package/src/render/nodes.tsx

@@ -89,6 +89,8 @@ import {
 import type { LaidNode } from "../types";
 import type { CdlLang } from "../lang";
 import { hasUnresolvedRef, interpolate, resolveNumericAttr } from "./utils";
+import { drawsFigureTitle } from "../layout/spec";
+import { textWidth } from "../kinds/text-width";
 import type { 値の名前の表 } from "../input-option";
 
 /**
@@ -527,6 +529,81 @@ export function CdlNodeView({
         pointerEvents="none"
       />
       {inner}
+      {箱の上の語(resolvedNode)}
     </g>
   );
 }
+
+/** 図の名前の下端から箱の上端までの間 (world unit)。 `dyn-*` の名前と同じ高さに並ぶ (#925) */
+const FIGURE_TITLE_GAP = 10;
+/** 図の名前の字の大きさ。 節の名前 (13) より 1 段大きく、図の見出しとして読める */
+const FIGURE_TITLE_SIZE = 15;
+
+/** 図の小見出しの字の大きさ。 題 (15) より小さくして、読む順を題から先にする (#935) */
+const FIGURE_EYEBROW_SIZE = 11;
+/** 小見出しの baseline から題の baseline までの間。 題の字の大きさに対する倍率 (#935) */
+const FIGURE_EYEBROW_LIFT = 1.1;
+
+/** 箱の幅に収める倍率。 収めないと長い語が箱の外へ出る */
+function 幅に収めた大きさ(語: string, 素の大きさ: number, 幅: number): number {
+  const 実幅 = textWidth(語, 素の大きさ, 0);
+  return 実幅 > 幅 ? (素の大きさ * 幅) / 実幅 : 素の大きさ;
+}
+
+/**
+ * 図表を自前で描く種別の題と小見出しを、箱の上に描く (#929 / #935)。
+ *
+ * これらの箱は図表の中身で埋まっており、中に語の場所が無い。
+ * 枠の余白 (`layout/tokens.ts` の `view_pad` = 60) の中に収まるので、枠は伸びない。
+ *
+ * **ここ 1 か所で描く**。 各種別の描画に散らすと、新しい図表の種別が増えた時に落ちる。
+ *
+ * **書かない語には要素を 1 つも足さない**。 空の `<text>` を置くと、この種別を使う
+ * 既存の図の焼き付けが理由なく落ちる。
+ *
+ * 小見出しの位置は **題の字の大きさから出す**。 素の大きさ (15) から出すと、長い題で
+ * 題が縮んだ時に 2 行の間が開く。
+ *
+ * 題を書かず小見出しだけを書いた図では、小見出しを題の位置に置く。 題の有無に紐付けて
+ * 消すと、題を書かない図で小見出しが出なくなる。
+ */
+function 箱の上の語(node: LaidNode): JSX.Element | null {
+  if (!drawsFigureTitle(node.kind)) return null;
+  const 名前 = (node.title ?? "").trim();
+  const 小見出し = (node.eyebrow ?? "").trim();
+  if (名前 === "" && 小見出し === "") return null;
+  const 題のy = node.cy - node.h / 2 - FIGURE_TITLE_GAP;
+  const 題の大きさ = 幅に収めた大きさ(名前, FIGURE_TITLE_SIZE, node.w);
+  const 小見出しのy = 名前 === "" ? 題のy : 題のy - 題の大きさ * FIGURE_EYEBROW_LIFT;
+  return (
+    <>
+      {小見出し !== "" && (
+        <text
+          data-cdl-role="figure-eyebrow"
+          x={node.cx}
+          y={小見出しのy}
+          textAnchor="middle"
+          fontSize={幅に収めた大きさ(小見出し, FIGURE_EYEBROW_SIZE, node.w)}
+          fontWeight={600}
+          letterSpacing={0.6}
+          fill="var(--cdl-text-dim, #5a6270)"
+        >
+          {小見出し}
+        </text>
+      )}
+      {名前 !== "" && (
+        <text
+          data-cdl-role="figure-title"
+          x={node.cx}
+          y={題のy}
+          textAnchor="middle"
+          fontSize={題の大きさ}
+          fontWeight={600}
+          fill="var(--cdl-text, #23201b)"
+        >
+          {名前}
+        </text>
+      )}
+    </>
+  );
+}

package/src/render/payload-binding.ts

@@ -27,14 +27,15 @@ import { hasUnresolvedRef, interpolate } from "./utils";
  * (spec § 4.2 が輪について同じ判断をしている = 1 箇所の壊れで図が消えると原因が分からない)。
  * 印は各 kind が `data-cdl-unresolved="true"` として DOM に出す。
  *
- * `mind-map` / `tree-hierarchy` の 2 種は **名前だけ** を解決する (#467)。 この 2 種が持つのは
- * 数ではなく構造と名前で、動かせるのは名前の側だけ。
+ * `mind-map` / `tree-hierarchy` の 2 種は **数を持たない** ため名前と補足だけを解決する
+ * (#467 / #471)。 この 2 種が持つのは数ではなく構造と語で、動かせるのは語の側だけ。
  *
- * 解決するのは **描かれる欄だけ** にする。 この 2 種は補足 (`subtitle`) を描かないため
- * (実測で確認)、解決しても画面には出ず、解決できない時だけ印が付く = 見た目は何も変わらない
- * のに印だけ出る状態になる。 描く方を足すかは別 Issue (#471)。
+ * 解決するのは **描かれる欄だけ** にする。 描かない欄を解決すると、画面は何も変わらないのに
+ * 解決できない時だけ印が付く = 印の意味が読めない。 逆に描くようになった欄を解決しないと、
+ * 図に `{名前}` が素のまま出る。 したがって描く欄を足す時は、同じ変更で解決の側も足す
+ * (#931 で `funnel-stages` と `quadrant-matrix` の補足がこの形になった)。
  *
- * 親子の繋がり (`parent`) も解決しない = 状態で繋ぎ替えると木の形そのものが変わり、
+ * 親子の繋がり (`parent`) は解決しない = 状態で繋ぎ替えると木の形そのものが変わり、
  * 配置の計算と印の付け方が別問題になる。
  */
 
@@ -49,18 +50,24 @@ export type ResolvedChartDatum = Omit<ChartDatumPayload, "value" | "previous"> &
   /** 前の時点の値。 書かれていない datum では `undefined` のまま */
   previous?: number;
 } & UnresolvedMark;
-export type ResolvedFunnelStage = Omit<FunnelStagePayload, "count"> & { count: number } & UnresolvedMark;
+export type ResolvedFunnelStage = Omit<FunnelStagePayload, "count"> & {
+  count: number;
+} & UnresolvedMark;
 export type ResolvedGanttTask = Omit<GanttTaskPayload, "startIdx" | "endIdx"> & {
   startIdx: number;
   endIdx: number;
 } & UnresolvedMark;
-export type ResolvedQuadrantItem = Omit<QuadrantItemPayload, "quadrant"> & {
+export type ResolvedQuadrantItem = Omit<QuadrantItemPayload, "quadrant" | "at"> & {
   quadrant: QuadrantKey;
+  /** 描画域の中の位置。 `at` を書いた項目だけが持つ。 0 から 1 に丸めてある */
+  at?: { x: number; y: number };
 } & UnresolvedMark;
 export type ResolvedJourneyStep = Omit<JourneyStepPayload, "emotion"> & {
   emotion: JourneyEmotion;
 } & UnresolvedMark;
-export type ResolvedQuadrantData = Omit<QuadrantPayload, "items"> & { items: ResolvedQuadrantItem[] };
+export type ResolvedQuadrantData = Omit<QuadrantPayload, "items"> & {
+  items: ResolvedQuadrantItem[];
+};
 
 export const QUADRANT_KEYS: readonly QuadrantKey[] = [
   "topLeft",
@@ -146,7 +153,11 @@ export function resolveChartData(
   //
   // **前の時点の値も同じ判定に入れる** (cdl#551)。 入れないと `{名前}` を書いた `previous` が
   // 近道を素通りし、状態を読まないまま文字列のまま描画へ流れる。
-  if (!data.some((d) => needsResolve(d.value) || (d.previous !== undefined && needsResolve(d.previous))))
+  if (
+    !data.some(
+      (d) => needsResolve(d.value) || (d.previous !== undefined && needsResolve(d.previous)),
+    )
+  )
     return data as ResolvedChartDatum[];
   return data.map((d) => {
     const v = resolveBoundNumber(d.value, values, 0);
@@ -157,14 +168,29 @@ export function resolveChartData(
   });
 }
 
+/**
+ * 段の件数と補足を解決する。
+ *
+ * 補足を入れたのは #931 で **補足を描くようにしたため**。 近道の判定にも入れる = 件数だけを
+ * 見ると、件数を直に書いた図で `{名前}` を書いた補足が素通りして図に波括弧が出る。
+ */
 export function resolveFunnelData(
   stages: FunnelStagePayload[],
   values: Record<string, string>,
 ): ResolvedFunnelStage[] {
-  if (!stages.some((s) => needsResolve(s.count))) return stages as ResolvedFunnelStage[];
+  const 読む = stages.some(
+    (s) => needsResolve(s.count) || (s.subtitle?.includes("{") ?? false),
+  );
+  if (!読む) return stages as ResolvedFunnelStage[];
   return stages.map((s) => {
     const c = resolveBoundNumber(s.count, values, 0);
-    return c.ok ? { ...s, count: c.value } : { ...s, count: c.value, unresolved: true as const };
+    const sub = s.subtitle === undefined ? undefined : resolveBoundText(s.subtitle, values);
+    const 素: ResolvedFunnelStage = {
+      ...s,
+      count: c.value,
+      ...(sub ? { subtitle: sub.value } : {}),
+    };
+    return c.ok && (sub?.ok ?? true) ? 素 : { ...素, unresolved: true as const };
   });
 }
 
@@ -172,7 +198,8 @@ export function resolveGanttData(
   tasks: GanttTaskPayload[],
   values: Record<string, string>,
 ): ResolvedGanttTask[] {
-  if (!tasks.some((t) => needsResolve(t.startIdx) || needsResolve(t.endIdx))) return tasks as ResolvedGanttTask[];
+  if (!tasks.some((t) => needsResolve(t.startIdx) || needsResolve(t.endIdx)))
+    return tasks as ResolvedGanttTask[];
   return tasks.map((t) => {
     const start = resolveBoundNumber(t.startIdx, values, 0);
     // 終わりの既定値は始まりに合わせて 1 目盛りぶんの帯にする。 0 に落とすと、 横軸の長さが
@@ -184,21 +211,75 @@ export function resolveGanttData(
   });
 }
 
+/**
+ * 座標から象限を決める。 中央 (0.5) は右上側に入れる。
+ *
+ * 境目をどちらかに倒すこと自体は避けられないため、 上下左右で同じ向き (大きい側) に倒す。
+ * 軸ごとに向きを変えると、 ちょうど中央に置いた 2 項目が別の象限に入る。
+ */
+export function 座標の象限(x: number, y: number): QuadrantKey {
+  const 右 = x >= 0.5;
+  const 上 = y >= 0.5;
+  if (上) return 右 ? "topRight" : "topLeft";
+  return 右 ? "bottomRight" : "bottomLeft";
+}
+
+/** 描画域の外に出た値を中に戻す。 外に置くと図の枠を越えて描かれる */
+const 域に収める = (v: number): number => Math.min(1, Math.max(0, v));
+
+/**
+ * 項目の象限と座標と補足を解決する。
+ *
+ * 補足を入れたのは #931 で **補足を描くようにしたため**。 近道の判定にも入れる = 象限を
+ * 決まった語で書いた図では、`{名前}` を書いた補足が素通りして図に波括弧が出る。
+ */
 export function resolveQuadrantData(
   data: QuadrantPayload,
   values: Record<string, string>,
 ): ResolvedQuadrantData {
   const items = data.items;
-  if (items.every((i) => (QUADRANT_KEYS as readonly string[]).includes(i.quadrant))) {
-    return data as ResolvedQuadrantData;
-  }
+  // 座標を持つ項目が 1 つも無く、象限が全て決まった語で、補足も状態を読まないなら組み直さない
+  // (他の resolver と同じ近道)
+  const 近道 =
+    !items.some((i) => i.at !== undefined) &&
+    !items.some((i) => i.subtitle?.includes("{") ?? false) &&
+    items.every((i) => (QUADRANT_KEYS as readonly string[]).includes(i.quadrant ?? ""));
+  if (近道) return data as ResolvedQuadrantData;
   return {
     ...data,
     items: items.map((i) => {
-      const q = resolveBoundEnum(i.quadrant, values, QUADRANT_KEYS, QUADRANT_FALLBACK);
-      return q.ok
-        ? { ...i, quadrant: q.value }
-        : { ...i, quadrant: q.value, unresolved: true as const };
+      // 座標を書いた項目は座標だけを読む。 象限は座標から決まるので `quadrant` は見ない
+      if (i.at !== undefined) {
+        const x = resolveBoundNumber(i.at.x, values, 0.5);
+        const y = resolveBoundNumber(i.at.y, values, 0.5);
+        const 置く = { x: 域に収める(x.value), y: 域に収める(y.value) };
+        const sub = i.subtitle === undefined ? undefined : resolveBoundText(i.subtitle, values);
+        const 素: ResolvedQuadrantItem = {
+          id: i.id,
+          title: i.title,
+          at: 置く,
+          quadrant: 座標の象限(置く.x, 置く.y),
+          ...(sub ? { subtitle: sub.value } : {}),
+        };
+        // 丸めは「読めなかった」 ではない。 値は在るので印を付けない
+        return x.ok && y.ok && (sub?.ok ?? true) ? 素 : { ...素, unresolved: true as const };
+      }
+      // 座標も象限も無い項目は消さず既定の象限に置く。 消すと書いた項目が図から消える
+      const q = resolveBoundEnum<QuadrantKey>(
+        i.quadrant ?? "",
+        values,
+        QUADRANT_KEYS,
+        QUADRANT_FALLBACK,
+      );
+      const sub = i.subtitle === undefined ? undefined : resolveBoundText(i.subtitle, values);
+      // 座標の欄は組み直した側の型 (数の組) を持つ。 この枝では空なので渡さない
+      const 素: ResolvedQuadrantItem = {
+        id: i.id,
+        title: i.title,
+        quadrant: q.value,
+        ...(sub ? { subtitle: sub.value } : {}),
+      };
+      return q.ok && (sub?.ok ?? true) ? 素 : { ...素, unresolved: true as const };
     }),
   };
 }
@@ -212,7 +293,9 @@ export function resolveJourneyData(
   }
   return steps.map((s) => {
     const e = resolveBoundEnum(s.emotion, values, JOURNEY_EMOTIONS, EMOTION_FALLBACK);
-    return e.ok ? { ...s, emotion: e.value } : { ...s, emotion: e.value, unresolved: true as const };
+    return e.ok
+      ? { ...s, emotion: e.value }
+      : { ...s, emotion: e.value, unresolved: true as const };
   });
 }
 
@@ -234,7 +317,9 @@ function resolveBoundText(raw: string, values: Record<string, string>): BindingR
   // 状態を読まない名前は組み直さない (毎 frame の割当てを避ける近道、 他の resolver と同じ)
   if (!raw.includes("{")) return { value: raw, ok: true };
   const resolved = interpolate(raw, values);
-  return hasUnresolvedRef(resolved) ? { value: resolved, ok: false } : { value: resolved, ok: true };
+  return hasUnresolvedRef(resolved)
+    ? { value: resolved, ok: false }
+    : { value: resolved, ok: true };
 }
 
 /**
@@ -296,7 +381,5 @@ export function resolveMindData(
     ...(rootSubtitle ? { rootSubtitle: rootSubtitle.value } : {}),
     branches,
   };
-  return root.ok && (rootSubtitle?.ok ?? true)
-    ? 解決後
-    : { ...解決後, unresolved: true as const };
+  return root.ok && (rootSubtitle?.ok ?? true) ? 解決後 : { ...解決後, unresolved: true as const };
 }

package/src/render/stage.tsx

@@ -3,7 +3,7 @@ import { 折れ線の目盛, type ChartLineScale } from "../kinds/chart-line";
 import { 描く進みに直す } from "../kinds/draw-ratio";
 import { useReducedMotion } from "../anim/react/useReducedMotion";
 import { lifelineStartYs, uniformLifelineEndY } from "../layout/lifeline";
-import { buildDiagramAltText } from "../layout/spec";
+import { buildDiagramAltText, isRenderedNode } from "../layout/spec";
 import {
   EDGE_HEADS,
   EDGE_HEAD_FILLS,
@@ -28,6 +28,24 @@ import { TONE, TONE_HEX } from "./tone";
 import { computeStateValues } from "./utils";
 import type { 値の名前の表 } from "../input-option";
 
+/**
+ * その図に描くものがあるか (#923)。
+ *
+ * この `<svg>` が出すのは帯と線と節の 3 つだけで、残りは `defs` の矢頭 (見えない) になる。
+ * 3 つとも無い図は面だけを取って何も出さない = 見本帳では `874×874` の空白になっていた。
+ *
+ * 帯は `contain` (囲い) / `lifeline` (縦線) / `label` (名前) のいずれかを持つ時だけ絵を出す。
+ * 持たない帯が描くのは当たりを取るための `fill="none" stroke="none"` の矩形で、見えない。
+ *
+ * 節は `isRenderedNode` で見る。 書いた時点で隠れると決まっている節 (`visibleIf: "0"` 等) は
+ * 描かれない。 `{signal}` を含む条件は段しだいで出るので、出る側に数える。
+ */
+function 描くものがある(laid: LaidDiagram): boolean {
+  if (laid.edges.length > 0) return true;
+  if (laid.nodes.some((n) => isRenderedNode(n))) return true;
+  return laid.lanes.some((l) => l.contain === true || l.lifeline === true || Boolean(l.label));
+}
+
 export function CdlStage({
   laid,
   currentPhase,
@@ -56,7 +74,7 @@ export function CdlStage({
   compact?: boolean;
   /** interactive integration (CAR #246) 用 SVG ref、 caller が event handler attach に使う */
   svgRef?: React.RefObject<SVGSVGElement | null>;
-}): JSX.Element {
+}): JSX.Element | null {
   /**
    * 触れている / 留めている箱 (#806)。
    *
@@ -262,6 +280,10 @@ export function CdlStage({
     );
   }, [laid]);
   const diagramScale = laid.diagramScale ?? 1;
+  // 描くものが 1 つも無い図は面を取らない (#923)。
+  // 札 (`interactive-panel`) は `render.tsx` が別に出すので、題と札は残る。
+  // hook は全て上で呼び終えているので、ここで返しても呼ぶ順は変わらない。
+  if (!描くものがある(laid)) return null;
   return (
     <div className={compact ? "px-3 py-3" : "px-6 py-6"} style={compact ? undefined : { minHeight: 460 }}>
       <svg