@cardenelabs/dragon 0.26.0 → 0.28.0

package/src/v05/parser.ts

@@ -42,8 +42,8 @@
  */
 
 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";
@@ -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)。
    *
@@ -468,6 +470,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 +540,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 +748,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 +763,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 +840,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 +890,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 +1076,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 +1134,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 +1480,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 +1508,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)。
  *
@@ -1595,6 +1712,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 +1817,8 @@ function 表に従って読む(
     if (形 === undefined) {
       errors.push({
         line,
-        message: `${接頭}の項目名が読めません: "${欄}"`,
+        // 接頭は呼び手が「の」 まで書く (`図形の ` / `部品 ring の `)。 ここで足すと「の の」 に重なる (#1968)
+        message: `${接頭.trimEnd()}項目名が読めません: "${欄}"`,
         hint: `使える項目 = ${Object.keys(定義.欄).join(", ")}`,
       });
       continue;
@@ -1688,6 +1860,9 @@ function 表に従って読む(
       } else {
         out[欄] = 数;
       }
+    } else if (形 === "選択肢の並び") {
+      const 選択肢 = 選択肢の並びとして読む(値, `${接頭}${欄}`, line, errors);
+      if (選択肢 !== undefined) out[欄] = 選択肢;
     } else if (形 === "組の並び") {
       const 組 = 組の並びとして読む(値);
       if (組 !== undefined) out[欄] = 組;
@@ -2075,6 +2250,9 @@ function 巻き上げとして読む(
  *
  * **式は描画側の parser に通す**。 自前で書き方を決めると、通ったのに描画側が
  * 解けない式を受けてしまう。 描画側が投げた誤りの本文をそのまま知らせに載せる。
+ *
+ * 名札を付ける時は `名前: { expression: "式", label: "名札" }` の組で書く (#1916)。
+ * 描画側は名札を操作部の名前に描く (cdl#853)。 巻き取り (`scrolls:`) と同じ組の形にそろえる。
  */
 function 式として読む(行: string, line: number, errors: DslError[]): DslFormula | undefined {
   const c = 行.indexOf(":");
@@ -2087,12 +2265,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 +2299,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 +2394,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: "数",
@@ -2409,7 +2653,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 +2667,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 +2907,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 +2992,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 +3063,9 @@ export const ACTOR_ITEM_KEYS: ReadonlySet<string> = new Set([
   "pos",
   "posX",
   "posY",
+  // 位置のずらし (#1971)
+  "offsetX",
+  "offsetY",
   "大きさ",
   "size",
   "倍率",
@@ -2941,7 +3204,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 +3225,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 +3270,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;
@@ -3132,7 +3353,9 @@ export const INLINE_ACTOR_KEYS: ReadonlySet<string> = new Set([
   "initial",
   "final",
   "tone",
-  "nodes",
+  // 色の欄 (#1969)。 縦に並べた形と JSON は `color` を受けるのに、中括弧の形だけが知らない
+  // 項目名として落としていた。 見本 (parts) では従来どおり状態の上書きとして読む
+  "color",
   // 体験の道筋の欄 (#1251)。 他の図種では組み立て側が知らせる
   "touchpoint",
   "opportunity",
@@ -3143,6 +3366,9 @@ export const INLINE_ACTOR_KEYS: ReadonlySet<string> = new Set([
   "posY",
   "posW",
   "posH",
+  // 位置のずらし (#1971)
+  "offsetX",
+  "offsetY",
   // 箱の中に描く図形 (#1374)
   "shape",
   // その箱を出すかどうかの条件 (#1381)
@@ -3164,8 +3390,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 +3428,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 +3460,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 +3488,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 +3516,10 @@ export const FLOW_INLINE_KEYS = Object.keys(
  * 5 つの箱すべてで題が捨てられて識別子 (`root` 等) が出ていた。 知らせも出ないため、 書いた
  * 人には「書いたのに図が変わらない」 としか見えない。
  *
- * パーツでは知らせない。 中括弧に書いた名前は状態の上書きとして意味を持つ (`extractStateOverride`)。
+ * パーツでは名前の大半を知らせない。 中括弧に書いた名前は状態の上書きとして意味を持つ
+ * (`extractStateOverride`)。 ただし状態の上書きからも外れる名前 (`PART_INLINE_UNREADABLE_KEYS`)
+ * だけは知らせる = どの欄も読まず状態にも入らないため、黙ると「書いたのに図が変わらない」 が
+ * 手掛かりなしで起きる (#1996)。
  */
 function reportUnknownInlineKeys(
   isPart: boolean,
@@ -3270,7 +3527,6 @@ function reportUnknownInlineKeys(
   line: number,
   errors: DslError[],
 ): void {
-  if (isPart) return;
   // 値が空の形 (`{ title: }`) も見る。 `parseInlineMapping` は値が 1 文字以上ある項目しか
   // 拾わないため、 その結果を走査すると空白の有無で知らせが消える (実測 = `{title:}` と
   // `{ title:}` は黙って通り、 `{ title: }` だけ知らせが出た)。 契約が入力の整形に依存する
@@ -3280,6 +3536,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 +3556,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 +3623,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 +3695,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 +3778,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 +3826,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 +3862,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 +3919,7 @@ function parseFlowStep(line: Line, no: number, errors: DslError[]): DslStep | nu
     tone,
     style,
     sub,
+    tailSub,
     guard,
     cardinality,
     side,
@@ -3617,6 +3937,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 +4277,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 +4303,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) */