@cardenelabs/dragon 0.27.0 → 0.30.0

package/src/v05/parser.ts

@@ -42,12 +42,12 @@
  */
 
 import type { NodeKind, Tone, EdgeStyle, EdgeHead, EdgeHeadFill, ClassRelationType, SequenceMessageKind } from "@cardenelabs/cdl";
-import { TONES, NODE_KINDS, EDGE_HEADS, EDGE_HEAD_FILLS, EDGE_STYLES, EDGE_REVEALS, CLASS_RELATION_LOOK, SEQUENCE_MESSAGE_LOOK, parseFormula } from "@cardenelabs/cdl";
-import type { EdgeReveal } from "@cardenelabs/cdl";
+import { TONES, NODE_KINDS, EDGE_HEADS, EDGE_HEAD_FILLS, EDGE_STYLES, EDGE_REVEALS, RELATION_FOCUSES, CLASS_RELATION_LOOK, SEQUENCE_MESSAGE_LOOK, parseFormula } from "@cardenelabs/cdl";
+import type { EdgeReveal, RelationFocus } from "@cardenelabs/cdl";
 import { TONE_ALIAS, NODE_KIND_ALIAS, DIRECTIONS, resolveDirection, PALETTES, resolvePalette } from "../keywords";
 import type { DslPalette } from "../keywords";
 import type { DslDirection } from "../keywords";
-import { parseRelativePos, orderByDependency } from "../relative-pos";
+import { parseRelativePos, findRelativeProblems, type RelativeProblem } from "../relative-pos";
 import {
   checkValueExpression,
   isTriggerBody,
@@ -66,7 +66,6 @@ import type {
   DslFormula,
   DslEventBinding,
   DslScrollTrigger,
-  DslActorNodeOverride,
   DslStep,
   DslAnimate,
   DslState,
@@ -80,6 +79,7 @@ import type {
   DslBand,
   DslGroup,
   DslViewport,
+  LayoutPos,
 } from "../types";
 
 export type V05ParseResult = { ok: true; doc: DslDocument } | { ok: false; errors: DslError[] };
@@ -159,6 +159,8 @@ export const TOP_LEVEL_KEYS = [
   "bands",
   // 矢印をいつ出すか (#1470)
   "reveal",
+  // 箱に触れると関係する線だけを光らせるか (#1757)
+  "relations",
   /*
    * 図の並ぶ向き (#1494)。
    *
@@ -381,14 +383,12 @@ const INFRA_KIND_ALIAS: Record<string, NodeKind> = {
 };
 
 /**
- * 受け付ける箱の種類。 描画できる種類 (cdl の `NODE_KINDS`) に、 記法だけが持つ種類を足す。
+ * 記法が受理する種類の全体。 これに載っていない種類は見本 (パーツ) の候補になる。
  *
- * 以前は手書きの 31 種だった。 描画できる 90 種のうち 78 種が記法から書けず、 部品名として
- * 扱われて「そんな部品は無い」 と警告が出るだけだった。 描画側を出所に加えることで
+ * 描画できる種類 (cdl の `NODE_KINDS`) に、 記法だけが持つ種類と基盤の別名を足す。
+ * 手書きの一覧だった頃は、 描画側に種類が増えても記法から書けず、 部品名として扱われて
+ * 「そんな部品は無い」 と警告が出るだけだった。 描画側を出所に加えることで
  * 「描画できるものは書ける」 が成立する。
- */
-/**
- * 記法が受理する種類の全体。 これに載っていない種類は見本 (パーツ) の候補になる。
  *
  * 画面側が「本文が見本を使っているか」 を判定するのに使う (#1022)。 手書きの一覧を
  * 別に持つと、種類が増えた時にそちらだけ取り残されて余分な読み込みが起きる。
@@ -468,6 +468,7 @@ export function parseTextDslV05(src: string): V05ParseResult {
   let eyebrow: string | null = null;
   let eyebrowLine = 0;
   let reveal: EdgeReveal | null = null;
+  let relations: RelationFocus | null = null;
   let direction: DslDirection | null = null;
   let directionLine = 0;
   let palette: DslPalette | null = null;
@@ -537,6 +538,29 @@ export function parseTextDslV05(src: string): V05ParseResult {
       i += 1;
       continue;
     }
+    if (head.key === "relations") {
+      /*
+       * 箱に触れると関係する線だけを光らせるか (#1757)。
+       *
+       * クラス図と ER 図は順番を持たない図で、段を追う見せ方は読み手の問い
+       * (この箱はどこと繋がっているか) に答えない。 `hover` と書くと、箱に触れた時に
+       * その箱 ・ 繋がる線 ・ 相手の箱だけが光る (`cdl#806`)。
+       */
+      const v = (head.value ?? "").trim();
+      if (v.length > 0) {
+        if ((RELATION_FOCUSES as readonly string[]).includes(v)) {
+          relations = v as RelationFocus;
+        } else {
+          errors.push({
+            line: line.no,
+            message: `relations が読めません (書いた値: ${v})`,
+            hint: `使える語 = ${RELATION_FOCUSES.join(" / ")}`,
+          });
+        }
+      }
+      i += 1;
+      continue;
+    }
     if (head.key === "direction") {
       /*
        * 図の並ぶ向き (#1494)。
@@ -722,6 +746,13 @@ export function parseTextDslV05(src: string): V05ParseResult {
       const inline = head.value?.trim();
       if (inline && inline.startsWith("{") && inline.endsWith("}")) {
         const opts = parseInlineMapping(inline.slice(1, -1));
+        中括弧の知らない項目名を知らせる(
+          inline.slice(1, -1),
+          Object.keys(VIEWPORT_VALUE_KINDS),
+          "viewport の ",
+          line.no,
+          errors,
+        );
         viewport = {
           ...表で読む(VIEWPORT_VALUE_KINDS, opts, "viewport の ", line.no, errors),
           pos: { line: line.no },
@@ -730,15 +761,37 @@ export function parseTextDslV05(src: string): V05ParseResult {
         continue;
       }
       // block: viewport:\n  width: 1400\n  height: 900\n  ...
-      const { items, next } = collectIndentedList(lines, i + 1, line.indent);
+      // **`collectIndentedList` を使わない** (#1968)。 あちらは `:` を含まない行を黙って捨てるため、
+      // 書き間違えた行が「書かなかった」 と同じになる (`axes:` と同じ理由)
+      const { items, next } = collectIndentedRaw(lines, i + 1, line.indent);
       const opts: Record<string, string> = {};
       // 知らせは **値を書いた行** を指す (#1306)。 `viewport:` の行を指すと、欄が縦に並ぶ形で
       // どの行を直せばよいか分からない
       const optLines: Record<string, number> = {};
+      const 使える = Object.keys(VIEWPORT_VALUE_KINDS);
       for (const it of items) {
-        const m = it.trimmed.match(/^([a-zA-Z][a-zA-Z0-9_]*)\s*:\s*(.+)$/);
-        if (!m) continue;
+        // 先頭の `- ` を付けて並べる形も受ける (`collectIndentedList` が落としていた分を揃える)
+        const 行 = it.trimmed.replace(/^-\s+/, "");
+        const m = 行.match(/^([a-zA-Z][a-zA-Z0-9_]*)\s*:\s*(.*)$/);
+        if (!m) {
+          errors.push({
+            line: it.no,
+            message: `viewport の行が読めません: "${it.trimmed}"`,
+            hint: `use \`width: 1400\` (使える項目 = ${使える.join(", ")})`,
+          });
+          continue;
+        }
         const 欄 = m[1] ?? "";
+        if (!使える.includes(欄)) {
+          errors.push({
+            line: it.no,
+            message: `viewport の項目名が読めません: "${欄}"`,
+            hint: `使える項目 = ${使える.join(", ")}`,
+          });
+          continue;
+        }
+        // 値を書かなかった形 (`width:`) は「書かなかった」 と同じに扱う (1 行の形と揃える)
+        if ((m[2] ?? "").trim() === "") continue;
         opts[欄] = stripQuotes((m[2] ?? "").trim());
         optLines[欄] = it.no;
       }
@@ -785,6 +838,13 @@ export function parseTextDslV05(src: string): V05ParseResult {
           continue;
         }
         const opts = parseInlineMapping(m[2] ?? "");
+        中括弧の知らない項目名を知らせる(
+          m[2] ?? "",
+          m[1] === "x" ? AXIS_X_KEYS : AXIS_Y_KEYS,
+          `軸 ${m[1]} の `,
+          it.no,
+          errors,
+        );
         if (m[1] === "x") 組み立て.x = { left: opts.left, right: opts.right };
         else 組み立て.y = { bottom: opts.bottom, top: opts.top };
       }
@@ -828,10 +888,21 @@ export function parseTextDslV05(src: string): V05ParseResult {
         if (m) {
           const id = m[1]!;
           const opts = parseInlineMapping(m[2]!);
+          中括弧の知らない項目名を知らせる(
+            m[2]!,
+            LANE_INLINE_KEYS,
+            `縦列 ${id} の `,
+            it.no,
+            errors,
+          );
           lanesMap[id] = {
             id,
             ...表で読む(LANE_VALUE_KINDS, opts, `縦列 ${id} の `, it.no, errors),
             label: opts.label,
+            // 位置のずらし (#1971)
+            layoutPos: ずらしにまとめる(
+              表で読む(OFFSET_VALUE_KINDS, opts, `縦列 ${id} の `, it.no, errors),
+            ),
             pos: { line: it.no },
           };
         } else {
@@ -1003,6 +1074,7 @@ export function parseTextDslV05(src: string): V05ParseResult {
         if (m) {
           const id = m[1]!;
           const opts = parseInlineMapping(m[2]!);
+          中括弧の知らない項目名を知らせる(m[2]!, GROUP_INLINE_KEYS, `組 ${id} の `, it.no, errors);
           const lanesList = (opts.lanes ?? "")
             .replace(/^\[|\]$/g, "")
             .split(",")
@@ -1060,6 +1132,7 @@ export function parseTextDslV05(src: string): V05ParseResult {
       type: type!,
       ...(eyebrow !== null ? { eyebrow, eyebrowPos: { line: eyebrowLine } } : {}),
       ...(reveal !== null ? { reveal } : {}),
+      ...(relations !== null ? { relations } : {}),
       ...(direction !== null ? { direction, directionPos: { line: directionLine } } : {}),
       ...(palette !== null ? { palette } : {}),
       ...(axes !== undefined ? { axes, axesPos: { line: axesLine } } : {}),
@@ -1405,6 +1478,23 @@ export const VIEWPORT_VALUE_KINDS = {
   labelMargin: "数",
 } as const satisfies Record<Exclude<keyof DslViewport, "pos">, 値の形>;
 
+/**
+ * 位置のずらしの 2 欄 (#1971)。 箱 (縦に並べた形と中括弧の形) と縦列 (中括弧の形) で同じ読み方をする。
+ *
+ * JSON の `pos: { x, y }` と同じ `layoutPos` に入る。 記法の `pos:` は座標 (`posX` / `posY`) の意味で
+ * 使われているため、ずらしは別の名前にする。
+ */
+export const OFFSET_VALUE_KINDS = {
+  offsetX: "数",
+  offsetY: "数",
+} as const satisfies Record<string, 値の形>;
+
+/** 読めたずらしを `layoutPos` にまとめる。 片方だけ書いた時は残りを 0 とする (JSON は 2 欄とも必須) */
+function ずらしにまとめる(v: { offsetX?: number; offsetY?: number }): LayoutPos | undefined {
+  if (v.offsetX === undefined && v.offsetY === undefined) return undefined;
+  return { x: v.offsetX ?? 0, y: v.offsetY ?? 0 };
+}
+
 /**
  * 縦列の欄 (#1306)。 `label` は文字列なので表に載せない (記法の値は全て文字列で、
  * 文字列の欄には読めない値という状態が無い)。
@@ -1416,6 +1506,31 @@ export const LANE_VALUE_KINDS = {
   lifeline: "真偽",
 } as const satisfies Record<string, 値の形>;
 
+/**
+ * 縦列の中括弧に書ける項目 (#1968)。 数と真偽の欄は `LANE_VALUE_KINDS` と `OFFSET_VALUE_KINDS` から
+ * 導き、表に載せない文字列の `label` だけを足す。
+ */
+export const LANE_INLINE_KEYS: readonly (keyof DslLane | keyof typeof OFFSET_VALUE_KINDS)[] = [
+  ...(Object.keys(LANE_VALUE_KINDS) as (keyof typeof LANE_VALUE_KINDS)[]),
+  // 位置のずらし (#1971)。 JSON の縦列の `pos` と同じ `layoutPos` に入る
+  ...(Object.keys(OFFSET_VALUE_KINDS) as (keyof typeof OFFSET_VALUE_KINDS)[]),
+  "label",
+];
+
+/** 組の中括弧に書ける項目 (#1968)。 `groups:` の読み手が拾う欄と揃える */
+export const GROUP_INLINE_KEYS = ["label", "lanes"] as const satisfies readonly Exclude<
+  keyof DslGroup,
+  "id" | "pos"
+>[];
+
+/** 軸の名前の中括弧に書ける項目 (#1968)。 横軸は左右、縦軸は下上 */
+export const AXIS_X_KEYS = ["left", "right"] as const satisfies readonly (keyof NonNullable<
+  DslAxes["x"]
+>)[];
+export const AXIS_Y_KEYS = ["bottom", "top"] as const satisfies readonly (keyof NonNullable<
+  DslAxes["y"]
+>)[];
+
 /**
  * 箱の中に描く図形 (`shape:`) と、値を見せる部品 (`readouts:`) の欄 (#1374)。
  *
@@ -1436,7 +1551,7 @@ export const LANE_VALUE_KINDS = {
 // `parser.ts` に置いたままだと 生成した表 → parser → 生成した表 の輪ができる
 export type { 欄の形, 図形の定義 } from "./parser-types";
 
-/** 描ける図形と、その欄 (`CdlDynShape` の全 5 種を覆う) */
+/** 描ける図形と、その欄 (`CdlDynShape` の全種を覆う) */
 export const 図形の表: Record<string, 図形の定義> = {
   rect: {
     必須: ["source", "fillMax"],
@@ -1491,9 +1606,9 @@ export const 図形の表: Record<string, 図形の定義> = {
 /**
  * 記法が受ける部品と、その欄。
  *
- * **手で書かず、描画側の型定義から生成する** (#1385)。 描画側は 107 種を持ち欄は 510 個あり、
- * 手で写すと写し間違いと描画側の変更への drift が残る (`rules/quality.md § 導出可能記述は
- * 人手で書かない`)。
+ * **手で書かず、描画側の型定義から生成する** (#1385)。 描画側が持つ種類も、種類ごとの欄も
+ * 多く、手で写すと写し間違いと描画側の変更への drift が残る (`rules/quality.md § 導出可能記述は
+ * 人手で書かない`)。 いくつあるかは `readout-table.generated.ts` を数えれば出る。
  *
  * 作り直す = `node packages/dragon/scripts/gen-readout-table.mjs`
  * ずれの検知 = `packages/dragon/test/readout-table-generated.test.ts`
@@ -1504,8 +1619,9 @@ import { 部品の表, 部品の組の表 } from "./readout-table.generated";
 /**
  * 記法が受けるつまみと、その欄 (#1389)。
  *
- * **部品の表と同じく、描画側の型定義から生成する**。 14 種それぞれ欄が違い、手で写すと
+ * **部品の表と同じく、描画側の型定義から生成する**。 種類ごとに欄が違い、手で写すと
  * 描画側が種類を足した時に drift が残る (`rules/quality.md § 導出可能記述は人手で書かない`)。
+ * いくつあるかは `input-table.generated.ts` を数えれば出る。
  *
  * 作り直す = `node packages/dragon/scripts/gen-input-table.mjs`
  * ずれの検知 = `packages/dragon/test/input-table-generated.test.ts`
@@ -1595,6 +1711,60 @@ function 組の並びとして読む(raw: string): Record<string, string>[] | un
   return 出;
 }
 
+/** 選択肢の組が持てる項目。 描画側の `CdlInputOption` の組と同じ 2 つ */
+const 選択肢の組の項目 = ["value", "label"] as const;
+
+/**
+ * `["green", { value: "red", label: "失敗" }]` の形を選択肢の並びに読む (#1920)。
+ *
+ * 要素は文字列 (値と名前を兼ねる) か、`value` と `label` を持つ組。 2 つを混ぜて書ける。
+ * 割るのは `splitInlineFields` = 引用符と括弧の中の `,` を区切りと取り違えない
+ * (`並びとして読む` は組の中の `,` で割るので使えない)。
+ *
+ * 組の誤り (項目の欠け / 知らない項目 / 空の値) は行番号付きで知らせ、並びごと落とす。
+ * 読めた組だけを渡すと選択肢の数が変わり、既定値が選択肢に無い図になる。
+ */
+function 選択肢の並びとして読む(
+  値: string,
+  名: string,
+  line: number,
+  errors: DslError[],
+): (string | { value: string; label: string })[] | undefined {
+  const 中身 = 値.trim();
+  if (!中身.startsWith("[") || !中身.endsWith("]")) {
+    errors.push({ line, message: `${名} の並びが読めません: "${値}"`, hint: '`["green", { value: "red", label: "失敗" }]` の形で書く' });
+    return undefined;
+  }
+  const 出: (string | { value: string; label: string })[] = [];
+  const 誤りの数 = errors.length;
+  splitInlineFields(中身.slice(1, -1)).forEach((生, i) => {
+    const 要素 = 生.trim();
+    if (!要素.startsWith("{")) {
+      const 文字列 = stripQuotes(要素);
+      if (文字列 !== "") 出.push(文字列);
+      return;
+    }
+    if (!要素.endsWith("}")) {
+      errors.push({ line, message: `${名}[${i}] の組が読めません: "${要素}"`, hint: '`{ value: "red", label: "失敗" }` の形で書く' });
+      return;
+    }
+    const 組 = parseInlineMapping(要素.slice(1, -1));
+    for (const k of Object.keys(組)) {
+      if ((選択肢の組の項目 as readonly string[]).includes(k)) continue;
+      errors.push({ line, message: `${名}[${i}] の項目名が読めません: "${k}"`, hint: `使える項目 = ${選択肢の組の項目.join(", ")}` });
+    }
+    for (const k of 選択肢の組の項目) {
+      if (組[k] === undefined) {
+        errors.push({ line, message: `${名}[${i}].${k} は必ず書きます`, hint: `必須の項目 = ${選択肢の組の項目.join(", ")}` });
+      } else if (組[k] === "") {
+        errors.push({ line, message: `${名}[${i}].${k} が空です`, hint: k === "label" ? "名前を書かないなら文字列だけを並べる" : "値を 1 文字以上書く" });
+      }
+    }
+    if (組.value && 組.label) 出.push({ value: 組.value, label: 組.label });
+  });
+  return errors.length === 誤りの数 ? 出 : undefined;
+}
+
 function 部品の組を検査する(
   kind: string,
   読めた: Record<string, unknown>,
@@ -1646,7 +1816,8 @@ function 表に従って読む(
     if (形 === undefined) {
       errors.push({
         line,
-        message: `${接頭}の項目名が読めません: "${欄}"`,
+        // 接頭は呼び手が「の」 まで書く (`図形の ` / `部品 ring の `)。 ここで足すと「の の」 に重なる (#1968)
+        message: `${接頭.trimEnd()}項目名が読めません: "${欄}"`,
         hint: `使える項目 = ${Object.keys(定義.欄).join(", ")}`,
       });
       continue;
@@ -1688,6 +1859,9 @@ function 表に従って読む(
       } else {
         out[欄] = 数;
       }
+    } else if (形 === "選択肢の並び") {
+      const 選択肢 = 選択肢の並びとして読む(値, `${接頭}${欄}`, line, errors);
+      if (選択肢 !== undefined) out[欄] = 選択肢;
     } else if (形 === "組の並び") {
       const 組 = 組の並びとして読む(値);
       if (組 !== undefined) out[欄] = 組;
@@ -1906,8 +2080,26 @@ export const EVENT_KINDS = [
   "blur",
 ] as const;
 
-/** 出来事の相手を指す書き方。 ちょうど 1 つだけ書く */
-const EVENT_TARGET_KEYS = ["box", "lane", "arrow", "diagram"] as const;
+/**
+ * 出来事の相手を指す書き方。 ちょうど 1 つだけ書く。
+ *
+ * **ここが唯一の置き場所** (#2256)。 同じ 4 語が JSON の記法にも書かれていた間、
+ * 1:1 を名乗りながら受ける項目が両側で別々に決まっており、片方に 5 つ目を足すと
+ * 記法では通るのに JSON では弾かれる状態が黙って生まれる形だった。
+ * 公開 schema の項目の鍵とは `event-target-keys-parity.test.ts` が突き合わせる。
+ */
+export const EVENT_TARGET_KEYS = ["box", "lane", "arrow", "diagram"] as const;
+
+/** 出来事に必ず書く項目。 相手の指し方と合わせて schema の項目の鍵になる */
+export const EVENT_REQUIRED_KEYS = ["on", "handler"] as const;
+
+/**
+ * 出来事が受ける項目の全体 (#2258)。
+ *
+ * **判定と知らせが同じ集合を読む**。 知らせが先頭 2 語だけを手で並べていた間、
+ * 必ず書く項目を増やしても知らせは古い一覧を教え続ける形だった。
+ */
+const EVENT_ITEM_KEYS: readonly string[] = [...EVENT_REQUIRED_KEYS, ...EVENT_TARGET_KEYS];
 
 /**
  * 押下などの出来事で動く仕掛けを 1 件読む (#1393)。
@@ -1934,12 +2126,11 @@ function 出来事として読む(
   }
   const opts = parseInlineMapping(t.slice(1, -1));
   for (const k of Object.keys(opts)) {
-    if (k === "on" || k === "handler" || (EVENT_TARGET_KEYS as readonly string[]).includes(k))
-      continue;
+    if (EVENT_ITEM_KEYS.includes(k)) continue;
     errors.push({
       line,
       message: `出来事の項目名が読めません: "${k}"`,
-      hint: `使える項目 = on, handler, ${EVENT_TARGET_KEYS.join(", ")}`,
+      hint: `使える項目 = ${EVENT_ITEM_KEYS.join(", ")}`,
     });
     return undefined;
   }
@@ -2075,6 +2266,9 @@ function 巻き上げとして読む(
  *
  * **式は描画側の parser に通す**。 自前で書き方を決めると、通ったのに描画側が
  * 解けない式を受けてしまう。 描画側が投げた誤りの本文をそのまま知らせに載せる。
+ *
+ * 名札を付ける時は `名前: { expression: "式", label: "名札" }` の組で書く (#1916)。
+ * 描画側は名札を操作部の名前に描く (cdl#853)。 巻き取り (`scrolls:`) と同じ組の形にそろえる。
  */
 function 式として読む(行: string, line: number, errors: DslError[]): DslFormula | undefined {
   const c = 行.indexOf(":");
@@ -2087,12 +2281,22 @@ function 式として読む(行: string, line: number, errors: DslError[]): DslF
     return undefined;
   }
   const 名前 = 行.slice(0, c).trim();
-  const 式 = stripQuotes(行.slice(c + 1).trim());
   if (!isValueName(名前)) {
     // 名前の規則は状態と揃える = 式の名前も `{名前}` で箱の文字に差し込める
     errors.push({ line, ...valueNameIssue(名前) });
     return undefined;
   }
+  const 組 = 式の組に割る(行);
+  let 式: string;
+  let 名札: string | undefined;
+  if (組 === undefined) {
+    式 = stripQuotes(行.slice(c + 1).trim());
+  } else {
+    const 読めた = 式の組を読む(名前, 組, line, errors);
+    if (読めた === undefined) return undefined;
+    式 = 読めた.expression;
+    名札 = 読めた.label;
+  }
   if (式 === "") {
     errors.push({
       line,
@@ -2111,7 +2315,71 @@ function 式として読む(行: string, line: number, errors: DslError[]): DslF
     });
     return undefined;
   }
-  return { id: 名前, expression: 式, pos: { line } };
+  return { id: 名前, expression: 式, ...(名札 !== undefined ? { label: 名札 } : {}), pos: { line } };
+}
+
+/** 組の中の項目名の形。 `parseInlineMapping` が項目名として受ける字と同じ */
+const 組の項目名 = /^([^\s:,{}[\]"']+)\s*:\s*(.*)$/s;
+
+/**
+ * 式の行が組の形 (`{ expression: ..., label: ... }`) なら中括弧の内側を返す (#1916)。
+ *
+ * **中括弧で名前を囲った式と取り違えない**。 式は `{input} * 2` のように名前を中括弧で
+ * 囲ってよく (#1391)、`v: {input}` は中括弧だけの行になる。 組とみなすのは、行全体が
+ * 1 つの中括弧の塊で、**最初の項目が `名前:` の形を持つ** 時だけ。
+ */
+function 式の組に割る(行: string): string | undefined {
+  const 割れた = 名前と中括弧に割る(行);
+  if (割れた === undefined) return undefined;
+  const 最初 = splitInlineFields(割れた[1])[0]?.trim() ?? "";
+  return 組の項目名.test(最初) ? 割れた[1] : undefined;
+}
+
+/**
+ * 式の組の中身を読む (#1916)。 読めなければ知らせて `undefined` を返す。
+ *
+ * 式の中身と空の式の検査は呼び手が文字列の形と同じ経路で行う。 ここで見るのは組の形だけ。
+ */
+function 式の組を読む(
+  名前: string,
+  中身: string,
+  line: number,
+  errors: DslError[],
+): { expression: string; label?: string } | undefined {
+  const 使える = ["expression", "label"];
+  const 読めた: Record<string, string> = {};
+  for (const 欄 of splitInlineFields(中身).map((s) => s.trim()).filter((s) => s !== "")) {
+    const m = 欄.match(組の項目名);
+    if (!m) {
+      errors.push({
+        line,
+        message: `式 "${名前}" の項目が読めません: "${欄}"`,
+        hint: '`{ expression: "input * 2", label: "2 倍" }` の形で書く。 `,` を含む式は引用符で囲む',
+      });
+      return undefined;
+    }
+    if (!使える.includes(m[1]!)) {
+      errors.push({
+        line,
+        message: `式 "${名前}" の項目名が読めません: "${m[1]}"`,
+        hint: `使える項目 = ${使える.join(", ")}`,
+      });
+      return undefined;
+    }
+    読めた[m[1]!] = stripQuotes(m[2]!.trim());
+  }
+  if (読めた.label !== undefined && 読めた.label.trim() === "") {
+    errors.push({
+      line,
+      message: `式 "${名前}" の名札が空です`,
+      hint: '名札を付けないなら `label` を書かない。 付けるなら `label: "2 倍"` のように書く',
+    });
+    return undefined;
+  }
+  return {
+    expression: 読めた.expression ?? "",
+    ...(読めた.label !== undefined ? { label: 読めた.label } : {}),
+  };
 }
 
 /**
@@ -2142,14 +2410,6 @@ function つまみとして読む(
   return { id, kind, ...読めた } as DslInput;
 }
 
-/** 箱の中の要素の欄 (#1306)。 `DslActorNodeOverride` の全欄を覆う */
-export const ACTOR_NODE_VALUE_KINDS = {
-  posX: "数",
-  posY: "数",
-  posW: "数",
-  posH: "数",
-} as const satisfies Record<keyof DslActorNodeOverride, 値の形>;
-
 /** 中括弧の形で箱に書ける、数と真偽の欄 (#1306) */
 export const ACTOR_INLINE_VALUE_KINDS = {
   stack: "数",
@@ -2378,20 +2638,6 @@ function collectIndentedList(
   return { items, next: i };
 }
 
-/**
- * 登場人物を 1 件ずつ集める。 続く字下げ行は同じ 1 件にまとめる。
- *
- * 項目が少なければ 1 行で書け、 多ければ縦に並べられる。 縦に並べた方が、 何を指定できるかが
- * 見える。
- *
- * ```
- * - Client
- * - API: service
- * - Web:
- *     kind: service
- *     色: 失敗
- * ```
- */
 /**
  * 色の指定を振り分ける。
  *
@@ -2409,7 +2655,7 @@ export function splitColorValue(raw: string): { tone?: Tone; hex?: string } {
  * v0.4 で使えた箱の種類の名前 (#1301)。
  *
  * v0.5 の受理集合 (`NODE_KIND_VALID`) に無いため、書くと見本 (parts) の名前として扱われ、
- * 見本帳に無ければ `actor` に潰れて **黙って消えていた**。 見本の名前と区別が付かないので、
+ * カタログに無ければ `actor` に潰れて **黙って消えていた**。 見本の名前と区別が付かないので、
  * 「v0.4 で種類として使えた語」 であることを根拠に誤りとして知らせる。
  *
  * 対応は `keywords.ts` の `NODE_KIND_ALIAS` が持つ (日本語 → 英語の種類名)。
@@ -2423,7 +2669,7 @@ function v04の種類名(値: string): string | undefined {
 /**
  * 箱の種類に v0.4 の日本語を書いた時に知らせる (#1301)。
  *
- * 黙って見本の名前として扱うと、見本帳に無い場合に `actor` へ潰れて手掛かりが残らない。
+ * 黙って見本の名前として扱うと、カタログに無い場合に `actor` へ潰れて手掛かりが残らない。
  */
 function reportV04Kind(kindRaw: string, line: number, errors: DslError[]): void {
   const 英語 = v04の種類名(kindRaw);
@@ -2663,6 +2909,17 @@ function applyContinuationLines(actor: DslActor, rest: Line[], errors: DslError[
       case "posY":
         out.posY = 数として読む(raw, "箱の posY", ln.no, errors);
         break;
+      // 位置のずらし (#1971)。 中括弧の形と同じ表で読み、片方だけ書いた時は残りを 0 とする
+      case "offsetX":
+      case "offsetY": {
+        const 読めた = 表で読む(OFFSET_VALUE_KINDS, { [key]: raw }, "箱の ", ln.no, errors);
+        const 前 = out.layoutPos;
+        out.layoutPos = ずらしにまとめる({
+          offsetX: key === "offsetX" ? 読めた.offsetX : 前?.x,
+          offsetY: key === "offsetY" ? 読めた.offsetY : 前?.y,
+        });
+        break;
+      }
       case "大きさ":
       case "size": {
         // `大きさ: 400,200` の形。 位置と揃える
@@ -2737,6 +2994,11 @@ function applyContinuationLines(actor: DslActor, rest: Line[], errors: DslError[
       touchedState = true;
     }
     if (touchedState) out.stateOverride = state;
+    // 色の名前は部品に効かない。 中括弧の形と同じく箱の色から外し、書いた名前として残す (#1973)
+    if (out.tone !== undefined) {
+      out.partColorName = out.tone;
+      delete out.tone;
+    }
     return out;
   }
   /*
@@ -2803,6 +3065,9 @@ export const ACTOR_ITEM_KEYS: ReadonlySet<string> = new Set([
   "pos",
   "posX",
   "posY",
+  // 位置のずらし (#1971)
+  "offsetX",
+  "offsetY",
   "大きさ",
   "size",
   "倍率",
@@ -2828,51 +3093,68 @@ export const ACTOR_ITEM_KEYS: ReadonlySet<string> = new Set([
  */
 function validateRelativePositions(actors: DslActor[], errors: DslError[]): void {
   const named = new Set(actors.map((a) => a.name));
-  const broken = new Set<string>();
-
-  for (const a of actors) {
-    const rel = a.posRel;
-    if (!rel) continue;
-    if (rel.anchor === a.name) {
-      errors.push({
-        line: a.pos.line,
-        message: `位置の基準が自分自身です: "${a.name}"`,
-        hint: "別の登場人物の名前を書く",
-      });
-      broken.add(a.name);
-      continue;
-    }
-    if (!named.has(rel.anchor)) {
-      errors.push({
-        line: a.pos.line,
-        message: `位置の基準が見つかりません: "${rel.anchor}"`,
-        hint:
-          named.size > 0
-            ? `actors: に書かれている名前 = ${[...named].join(", ")}`
-            : "actors: に基準にする登場人物を書く",
-      });
-      broken.add(a.name);
-    }
-  }
+  // 解けない書き方の判定は `relative-pos.ts` が持つ。 JSON の入口も同じ判定を呼ぶ (#2039)
+  const problems = findRelativeProblems(actors.map((a) => ({ name: a.name, rel: a.posRel })));
 
-  const { cyclic } = orderByDependency(
-    actors.map((a) => ({ name: a.name, rel: broken.has(a.name) ? undefined : a.posRel })),
-  );
-  for (const name of cyclic) {
-    const a = actors.find((x) => x.name === name);
+  for (const p of problems) {
+    const a = actors.find((x) => x.name === p.name);
     errors.push({
       line: a?.pos.line ?? 1,
-      message: `位置の基準が互いを指しています: "${name}"`,
-      hint: "どれか 1 つは座標 (`位置: 300,200`) か自動配置にする",
+      ...相対の誤り(p, named),
     });
-    broken.add(name);
   }
 
+  const broken = new Set(problems.map((p) => p.name));
   for (const a of actors) {
     if (broken.has(a.name)) a.posRel = undefined;
   }
 }
 
+/**
+ * 解けない相対の指定に対する、記法側の誤りの文 (#2039)。
+ *
+ * 判定は `relative-pos.ts` が持ち、文はここが持つ。 JSON 側は欄の場所を添えた別の文を作る。
+ */
+function 相対の誤り(
+  p: RelativeProblem,
+  named: ReadonlySet<string>,
+): { message: string; hint: string } {
+  switch (p.kind) {
+    case "self":
+      return {
+        message: `位置の基準が自分自身です: "${p.name}"`,
+        hint: "別の登場人物の名前を書く",
+      };
+    case "missing-anchor":
+      return {
+        message: `位置の基準が見つかりません: "${p.anchor ?? ""}"`,
+        hint:
+          named.size > 0
+            ? `actors: に書かれている名前 = ${[...named].join(", ")}`
+            : "actors: に基準にする登場人物を書く",
+      };
+    case "cyclic":
+      return {
+        message: `位置の基準が互いを指しています: "${p.name}"`,
+        hint: "どれか 1 つは座標 (`位置: 300,200`) か自動配置にする",
+      };
+  }
+}
+
+/**
+ * 登場人物を 1 件ずつ集める。 続く字下げ行は同じ 1 件にまとめる。
+ *
+ * 項目が少なければ 1 行で書け、 多ければ縦に並べられる。 縦に並べた方が、 何を指定できるかが
+ * 見える。
+ *
+ * ```
+ * - Client
+ * - API: service
+ * - Web:
+ *     kind: service
+ *     色: 失敗
+ * ```
+ */
 function collectActorEntries(
   lines: Line[],
   start: number,
@@ -2941,7 +3223,7 @@ function collectAnimationSteps(
  * `{ v: 50, count: 100 }` state override map に集約する経路。
  * 予約語衝突時は `state: { v: 50 }` 明示 fallback を使う (別 field で処理)。
  */
-const ACTOR_RESERVED_FIELDS: ReadonlySet<string> = new Set([
+export const ACTOR_RESERVED_FIELDS: ReadonlySet<string> = new Set([
   "kind",
   "subtitle",
   "eyebrow",
@@ -2962,11 +3244,15 @@ const ACTOR_RESERVED_FIELDS: ReadonlySet<string> = new Set([
   "posY",
   "posW",
   "posH",
-  // canvas pivot UX 修正 (B1) = sub-node 単位 override map (nested `nodes: { header: {...} }`)
-  "nodes",
+  // 位置のずらし (#1971)。 見本では見本 1 つ分をまとめてずらす欄で、状態の名前としては読まない
+  "offsetX",
+  "offsetY",
   // 図形の倍率 (#1026)。 状態の名前としては読まない
   "scale",
   "倍率",
+  // 色番号 (#1973)。 見本の色の状態へまとめて入れる欄で、状態の名前としては読まない。
+  // 縦に並べた形 (`COLOR_KEYS`) と JSON は元から色として読んでいた
+  "color",
   // 日本語の項目名 (#1026)。 中括弧の形が日本語の項目名を読めるようになったため、
   // ここに載せないと状態の名前として拾われる。 縦に並べた形での意味 (位置 / 大きさ 等) は
   // 中括弧の形では未対応なので、これまでどおり落とす方に揃える
@@ -3003,52 +3289,6 @@ function extractStateOverride(
   return count > 0 ? out : undefined;
 }
 
-/**
- * canvas pivot UX 修正 (B1) = actor entry の inline map から `nodes: { header: { posX: ..., ... }, ... }`
- * 形式の nested override を抽出する。 outer parseInlineMapping が opts.nodes を string としてそのまま
- * 保持 (value 内 nested `{ }` は depth-aware で保護済) しているので、 本 fn で「outer `{...}` を剥がして
- * key: sub-map ペアに再 split → 各 sub-map を parseInlineMapping で解いて posX/Y/W/H に coerce」 する。
- * 未 field or 空 object なら undefined 返し (caller は actor.nodes を set しない)。
- */
-function parseActorNodesField(
-  raw: string | undefined,
-  line: number,
-  errors: DslError[],
-): Record<string, DslActorNodeOverride> | undefined {
-  if (!raw) return undefined;
-  const trimmed = raw.trim();
-  if (!trimmed.startsWith("{") || !trimmed.endsWith("}")) return undefined;
-  const inner = trimmed.slice(1, -1).trim();
-  if (!inner) return undefined;
-  // depth-aware split (parseInlineMapping と同じ logic を local reuse、 nested `{ }` / `[ ]` 保護)
-  const parts: string[] = [];
-  let depth = 0;
-  let buf = "";
-  for (let i = 0; i < inner.length; i += 1) {
-    const c = inner[i]!;
-    if (c === "[" || c === "{") depth += 1;
-    else if (c === "]" || c === "}") depth -= 1;
-    if (c === "," && depth === 0) {
-      parts.push(buf);
-      buf = "";
-      continue;
-    }
-    buf += c;
-  }
-  if (buf.trim()) parts.push(buf);
-  const out: Record<string, DslActorNodeOverride> = {};
-  for (const p of parts) {
-    const colonIdx = p.indexOf(":");
-    if (colonIdx < 0) continue;
-    const key = p.slice(0, colonIdx).trim();
-    const val = p.slice(colonIdx + 1).trim();
-    if (!key || !val.startsWith("{") || !val.endsWith("}")) continue;
-    const nodeOpts = parseInlineMapping(val.slice(1, -1));
-    out[key] = 表で読む(ACTOR_NODE_VALUE_KINDS, nodeOpts, `nodes の ${key} の `, line, errors);
-  }
-  return Object.keys(out).length > 0 ? out : undefined;
-}
-
 function coerceStateValue(raw: string): number | string | boolean {
   const stripped = stripQuotes(raw);
   if (stripped === "true") return true;
@@ -3079,13 +3319,6 @@ function reportScaleOnNonPart(
   });
 }
 
-/**
- * 中括弧の形で読める項目名。
- *
- * ここに無い名前は、 パーツでない箱ではどこにも入らずに消える。 `ACTOR_ITEM_KEYS` (縦に
- * 並べた形) とは別に持つ = 中括弧の形は位置や大きさを未対応にしてあり、 同じ集合にすると
- * 「知らせない」 側がずれる。
- */
 /**
  * 中括弧の形で読める日本語と、その英語名 (#1301)。
  *
@@ -3119,6 +3352,13 @@ function 中括弧の別名を寄せる(opts: Record<string, string>): Record<st
   return 触った ? out : opts;
 }
 
+/**
+ * 中括弧の形で読める項目名。
+ *
+ * ここに無い名前は、 パーツでない箱ではどこにも入らずに消える。 `ACTOR_ITEM_KEYS` (縦に
+ * 並べた形) とは別に持つ = 中括弧の形は位置や大きさ (`pos` / `size` / `scale`) を未対応にしてあり、
+ * 同じ集合にすると「知らせない」 側がずれる。
+ */
 export const INLINE_ACTOR_KEYS: ReadonlySet<string> = new Set([
   "kind",
   "subtitle",
@@ -3132,7 +3372,9 @@ export const INLINE_ACTOR_KEYS: ReadonlySet<string> = new Set([
   "initial",
   "final",
   "tone",
-  "nodes",
+  // 色の欄 (#1969)。 縦に並べた形と JSON は `color` を受けるのに、中括弧の形だけが知らない
+  // 項目名として落としていた。 見本 (parts) では従来どおり状態の上書きとして読む
+  "color",
   // 体験の道筋の欄 (#1251)。 他の図種では組み立て側が知らせる
   "touchpoint",
   "opportunity",
@@ -3143,6 +3385,9 @@ export const INLINE_ACTOR_KEYS: ReadonlySet<string> = new Set([
   "posY",
   "posW",
   "posH",
+  // 位置のずらし (#1971)
+  "offsetX",
+  "offsetY",
   // 箱の中に描く図形 (#1374)
   "shape",
   // その箱を出すかどうかの条件 (#1381)
@@ -3164,8 +3409,28 @@ export const INLINE_ACTOR_KEYS: ReadonlySet<string> = new Set([
 ]);
 // `state` はパーツでだけ意味を持つ (`extractStateOverride` がパーツの時しか作らない)。
 // 通常の箱で読める扱いにすると `- A: { state: { foo: 1 } }` が黙って消え、 本 file が塞ごうと
-// している経路が予約語で残る (Round 1 review の指摘、 実測で確認)。 パーツ側は `isPart` の
-// 早期 return が先に効くのでここに載せる必要が無い
+// している経路が予約語で残る (Round 1 review の指摘、 実測で確認)。 パーツ側は
+// `PART_INLINE_UNREADABLE_KEYS` が `state` を外すのでここに載せる必要が無い
+
+/**
+ * パーツの中括弧で、予約されているのにどの欄も読まない項目名 (#1996)。
+ *
+ * パーツでは中括弧に書いた名前が状態の上書きになる (`extractStateOverride`) ため、読めない
+ * 名前をまとめて知らせることはできない。 一方 `ACTOR_RESERVED_FIELDS` に載る名前は状態の
+ * 上書きから外れるので、`INLINE_ACTOR_KEYS` にも無い名前はどこにも行かずに消える。
+ *
+ * 実測 = `- 甲: { kind: edge-chain, 大きさ: 900,400 }` は書かない時と 1 ピクセルも変わらず
+ * (どちらも `viewBox 1951x552` / パーツの幅 896)、知らせも 1 件も出なかった。 同じ語を縦に
+ * 並べた形で書けば効き、パーツでない箱に中括弧で書けば知らせが出る = 同じ語の扱いが
+ * 「パーツかどうか」 と「書く場所」 で 3 通りに割れていた。
+ *
+ * **2 つの集合の差から導く**。 手で並べると、予約の一覧に名前を足した時に知らせだけが
+ * 取り残される。 `state` だけは差から外す = `extractStateOverride` が明示欄として読むため、
+ * 予約されていても消える名前ではない。
+ */
+export const PART_INLINE_UNREADABLE_KEYS: ReadonlySet<string> = new Set(
+  [...ACTOR_RESERVED_FIELDS].filter((key) => !INLINE_ACTOR_KEYS.has(key) && key !== "state"),
+);
 
 /**
  * 矢印の中括弧に書ける欄と、その読み方 (#1275)。
@@ -3182,6 +3447,8 @@ const EDGE_BIND_INLINE_READERS = {
 
 const FLOW_INLINE_READERS = {
   sub: (v: string | undefined) => v,
+  // クラス図の出どころ側の多重度 (#1771)。 `sub` (行き先の端) と対
+  tailSub: (v: string | undefined) => v,
   guard: (v: string | undefined) => v,
   cardinality: (v: string | undefined) => v,
   /*
@@ -3212,7 +3479,7 @@ const FLOW_INLINE_READERS = {
   // 出どころ側の端の形 (#1466)。 ER は端ごとに違う個数を示すので両端に要る
   tailHead: (v: string | undefined) =>
     v !== undefined && EDGE_HEAD_VALUES.includes(v) ? (v as EdgeHead) : undefined,
-  // 端の印の塗り (#1466)。 白抜きの菱が「持つ」、塗った菱が「抱える」
+  // 端の印の塗り (#1466)。 白抜きの菱が集約、塗った菱がコンポジション
   headFill: (v: string | undefined) =>
     v !== undefined && EDGE_HEAD_FILL_VALUES.includes(v) ? (v as EdgeHeadFill) : undefined,
   tailHeadFill: (v: string | undefined) =>
@@ -3240,6 +3507,12 @@ const FLOW_INLINE_READERS = {
    * 持たないため、知らせを出せる場所で見る)。
    */
   ...EDGE_BIND_INLINE_READERS,
+  /*
+   * 部品の端で矢印を繋ぐ要素の id (#1979)。 部品かどうか、要素が在るかは組み立てで部品の図を
+   * 引いてから決まるため、ここでは字をそのまま通す
+   */
+  fromPartNode: (v: string | undefined) => v,
+  toPartNode: (v: string | undefined) => v,
   // 数と真偽の欄は `FLOW_INLINE_VALUE_KINDS` の表が読む (#1306)。 ここでは名前だけを持つ =
   // 読める欄の一覧 (`FLOW_INLINE_KEYS`) は本表から導くため、載せないと欄ごと消える
   labelOffsetX: null,
@@ -3262,7 +3535,10 @@ export const FLOW_INLINE_KEYS = Object.keys(
  * 5 つの箱すべてで題が捨てられて識別子 (`root` 等) が出ていた。 知らせも出ないため、 書いた
  * 人には「書いたのに図が変わらない」 としか見えない。
  *
- * パーツでは知らせない。 中括弧に書いた名前は状態の上書きとして意味を持つ (`extractStateOverride`)。
+ * パーツでは名前の大半を知らせない。 中括弧に書いた名前は状態の上書きとして意味を持つ
+ * (`extractStateOverride`)。 ただし状態の上書きからも外れる名前 (`PART_INLINE_UNREADABLE_KEYS`)
+ * だけは知らせる = どの欄も読まず状態にも入らないため、黙ると「書いたのに図が変わらない」 が
+ * 手掛かりなしで起きる (#1996)。
  */
 function reportUnknownInlineKeys(
   isPart: boolean,
@@ -3270,7 +3546,6 @@ function reportUnknownInlineKeys(
   line: number,
   errors: DslError[],
 ): void {
-  if (isPart) return;
   // 値が空の形 (`{ title: }`) も見る。 `parseInlineMapping` は値が 1 文字以上ある項目しか
   // 拾わないため、 その結果を走査すると空白の有無で知らせが消える (実測 = `{title:}` と
   // `{ title:}` は黙って通り、 `{ title: }` だけ知らせが出た)。 契約が入力の整形に依存する
@@ -3280,6 +3555,17 @@ function reportUnknownInlineKeys(
     if (idx < 0) continue;
     const key = field.slice(0, idx).trim();
     if (!key) continue;
+    if (isPart) {
+      if (!PART_INLINE_UNREADABLE_KEYS.has(key)) continue;
+      // 行き先を添える。 「読めません」 だけだと、どこにも書けないのか書く場所が違うのかが
+      // 分からない。 この 3 つは縦に並べた形では効く
+      errors.push({
+        line,
+        message: `項目名が読めません: "${key}"`,
+        hint: `1 行の中括弧では読めません。名前の下に段を分けた形で書くと効きます`,
+      });
+      continue;
+    }
     if (INLINE_ACTOR_KEYS.has(key)) continue;
     errors.push({
       line,
@@ -3289,6 +3575,40 @@ function reportUnknownInlineKeys(
   }
 }
 
+/**
+ * 箱以外の中括弧に書かれた読めない項目名を知らせる (#1968)。
+ *
+ * レーン / 視点 / 矢印 / 組 / 軸の名前 の中括弧は、読む欄だけを拾って残りを黙って捨てていた。
+ * 実測 = レーンに `widht: 280` と書くと幅が既定のまま描かれ、 知らせは 1 件も出なかった。
+ * 箱 (`reportUnknownInlineKeys`) と段は知らせるので、 同じ記法の中で書く場所によって扱いが割れていた。
+ *
+ * 項目名は `splitInlineFields` で拾う。 `parseInlineMapping` の結果を見ると値が空の項目
+ * (`{ widht: }`) を拾えず、 空白の有無で知らせが消える (箱の側が #1090 で踏んだ形)。
+ *
+ * `使える` は呼出側が各欄の表から導いて渡す。 ここに一覧を持つと、 表に欄を足した時に
+ * 知らせだけが取り残される。
+ */
+function 中括弧の知らない項目名を知らせる(
+  inner: string,
+  使える: readonly string[],
+  接頭: string,
+  line: number,
+  errors: DslError[],
+): void {
+  for (const field of splitInlineFields(inner)) {
+    const idx = field.indexOf(":");
+    if (idx < 0) continue;
+    const key = field.slice(0, idx).trim();
+    if (!key || 使える.includes(key)) continue;
+    // 接頭は値の欄名に続ける形 (`縦列 l1 の `) で末尾に空白を持つ。 日本語へ続ける時は空白を落とす
+    errors.push({
+      line,
+      message: `${接頭.trimEnd()}項目名が読めません: "${key}"`,
+      hint: `使える項目 = ${使える.join(", ")}`,
+    });
+  }
+}
+
 function parseActor(line: Line, errors: DslError[]): DslActor | null {
   // 5 形式 サポート:
   // 1. `Client`                              ... name のみ、 kind=actor default
@@ -3322,6 +3642,16 @@ function parseActor(line: Line, errors: DslError[]): DslActor | null {
     if (!isPart && opts.tone !== undefined && resolveTone(opts.tone) === undefined) {
       report読めない色(opts.tone, line.no, errors, { 線種も受ける: false });
     }
+    // `color` は縦に並べた形と JSON と同じ振り分けを通す (#1969)。 色の名前は箱の色、`#` で
+    // 始まる値は色番号になる。
+    //
+    // **見本でも色として読む** (#1973)。 縦に並べた形と JSON は見本の `color` を色番号として
+    // 見本の色の状態へ入れる。 中括弧の形だけが状態の名前 `color` として拾い、 その名前の状態を
+    // 持つ見本が無いため黙って捨てていた (実測 = `state-indicator` の塗りが既定の緑のまま)
+    const 色 = opts.color !== undefined ? splitColorValue(opts.color) : {};
+    if (opts.color !== undefined && !色.tone && !色.hex) {
+      report読めない色(opts.color, line.no, errors, { 線種も受ける: false });
+    }
     const kind = isPart
       ? NODE_KIND_DEFAULT
       : resolveNodeKind(NODE_KIND_VALID.has(kindRaw) ? kindRaw : "");
@@ -3384,15 +3714,18 @@ function parseActor(line: Line, errors: DslError[]): DslActor | null {
         : 値に追随する欄として読む(opts.renderOffsetY, "箱の renderOffsetY ", line.no, errors),
       ...表で読む(ACTOR_INLINE_VALUE_KINDS, opts, "箱の ", line.no, errors),
       // parts では `tone` を状態の上書きとして従来から使えるため、 色として横取りしない
-      tone: isPart ? undefined : resolveTone(opts.tone),
+      // `tone` と `color` を両方書いた時は `tone` を採る (JSON の読み方と揃える)
+      tone: isPart ? undefined : (resolveTone(opts.tone) ?? 色.tone),
+      colorHex: 色.hex,
+      partColorName: isPart ? 色.tone : undefined,
       partId: isPart ? kindRaw : undefined,
       stateOverride: isPart ? extractStateOverride(opts) : undefined,
       // canvas pivot 新 spec = 絶対座標 field は `ACTOR_INLINE_VALUE_KINDS` の表が読む (#1306)
       // 図形の倍率 (#1026)。 どれが効くかは `resolveScale` が 1 箇所で決める
       scale: inlineScale.scale,
       scaleKeys: inlineScale.keys.length ? inlineScale.keys : undefined,
-      // canvas pivot UX 修正 (B1) = sub-node 単位 override map (`nodes: { header: {posX:..., ...}, ...}`)
-      nodes: parseActorNodesField(opts.nodes, line.no, errors),
+      // 位置のずらし (#1971)。 見本 (parts) でも見本 1 つ分をまとめてずらす
+      layoutPos: ずらしにまとめる(表で読む(OFFSET_VALUE_KINDS, opts, "箱の ", line.no, errors)),
       pos: { line: line.no },
     };
   }
@@ -3464,6 +3797,7 @@ function parseFlowStep(line: Line, no: number, errors: DslError[]): DslStep | nu
   let 数と真偽: 読んだ結果<typeof FLOW_INLINE_VALUE_KINDS> | undefined;
   if (塊) {
     const opts = parseInlineMapping(塊.中身);
+    中括弧の知らない項目名を知らせる(塊.中身, FLOW_INLINE_KEYS, "矢印の ", line.no, errors);
     // `parseInlineMapping` は値が 1 文字もない `widthBind:` を拾わない。 3 欄は空を
     // 「書かなかった」扱いにせず知らせる契約なので、書かれた値を空も含めて上書きする。
     // 同じ欄を複数回書いた時は通常の mapping と同じく後勝ちにする。
@@ -3511,6 +3845,7 @@ function parseFlowStep(line: Line, no: number, errors: DslError[]): DslStep | nu
     rest = 塊.前.trim();
   }
   const sub = 中括弧.sub as string | undefined;
+  const tailSub = 中括弧.tailSub as string | undefined;
   const guard = 中括弧.guard as string | undefined;
   const cardinality = 中括弧.cardinality as string | undefined;
   const side = 中括弧.side as "top" | "right" | "bottom" | "left" | undefined;
@@ -3546,6 +3881,9 @@ function parseFlowStep(line: Line, no: number, errors: DslError[]): DslStep | nu
   const labelOffsetX = 数と真偽?.labelOffsetX;
   const labelOffsetY = 数と真偽?.labelOffsetY;
   const overlay = 数と真偽?.overlay;
+  // 空の名指し (`toPartNode: ""`) は書かなかったことにする = 要素 1 つの部品なら自動で繋ぐ
+  const fromPartNode = (中括弧.fromPartNode as string | undefined) || undefined;
+  const toPartNode = (中括弧.toPartNode as string | undefined) || undefined;
   // 色と線種を末尾から取る。 括弧 (`(成功)`) と空白区切り (`成功`) の両方を受け付ける。
   //
   // 括弧は従来の書き方で、 catalog が使っている。 空白区切りは登場人物と揃えた形。
@@ -3600,6 +3938,7 @@ function parseFlowStep(line: Line, no: number, errors: DslError[]): DslStep | nu
     tone,
     style,
     sub,
+    tailSub,
     guard,
     cardinality,
     side,
@@ -3617,6 +3956,8 @@ function parseFlowStep(line: Line, no: number, errors: DslError[]): DslStep | nu
     labelOffsetX,
     labelOffsetY,
     overlay,
+    ...(fromPartNode !== undefined ? { fromPartNode } : {}),
+    ...(toPartNode !== undefined ? { toPartNode } : {}),
     pos: { line: line.no },
   };
 }
@@ -3955,10 +4296,19 @@ function 段の項目のヒント(書いた名前: string): string {
  * | `tree` | `tree` | 根から下へ枝が伸びる |
  * | `gantt` | `gantt` | 各帯の始端から右へ帯が伸びる |
  * | `funnel` | `funnel` | 上端から順に段が積まれる |
+ * | `slope` | `slope` | 左の軸から右の軸へ線が伸びる |
+ * | `gauge` | `gauge` | 9 時から上を通って 3 時へ弧が伸びる |
+ * | `radial` | `radial` | 各輪が 12 時から時計回りに開く |
+ * | `stacked` | `stacked` | 左端から右へ帯が伸びる |
+ * | `waffle` | `waffle` | 左上から読む向きに印が 1 個ずつ埋まる |
  *
  * `quadrant` は入れない。 4 つの区画に項目を置く図で **項目に順序が無く**、起点を決められない
  * (順番を書いた順で決めると、動きが図の意味を持たない)。
  *
+ * `stat` も入れない。 値 1 つを大きく示す図で、描画側が起点から描く動きを持たない
+ * (`cdl` の `DRAW_KINDS`)。 `waffle` は 1 個 = 1% の印を読む向きに埋める動きを
+ * 持つようになったので入れた (cdl#719)。
+ *
  * いまは語と図種が同じ綴りだが、**同じものとして扱わない**。 語は書き手が書く名前で、
  * 図種は `type:` が取る値。 片方だけ別名を足したくなった時に、対応が表に残っている形にする。
  */
@@ -3972,6 +4322,10 @@ export const DRAW_TARGETS: ReadonlyMap<string, PresetType> = new Map<string, Pre
   ["gantt", "gantt"],
   ["funnel", "funnel"],
   ["slope", "slope"],
+  ["gauge", "gauge"],
+  ["radial", "radial"],
+  ["stacked", "stacked"],
+  ["waffle", "waffle"],
 ]);
 
 /** `draw:` に書ける語。 表から導く (#1314) */