@cardenelabs/dragon 0.12.0 → 0.14.0

package/src/v05/parser.ts

@@ -42,7 +42,7 @@
  */
 
 import type { NodeKind, Tone, EdgeStyle } from "@cardenelabs/cdl";
-import { TONES, NODE_KINDS } from "@cardenelabs/cdl";
+import { TONES, NODE_KINDS, parseFormula } from "@cardenelabs/cdl";
 import { TONE_ALIAS, NODE_KIND_ALIAS } from "../keywords";
 import { parseRelativePos, orderByDependency } from "../relative-pos";
 import {
@@ -56,6 +56,12 @@ import type {
   DslAxes,
   DslDocument,
   DslActor,
+  DslDynShape,
+  DslReadout,
+  DslInput,
+  DslFormula,
+  DslEventBinding,
+  DslScrollTrigger,
   DslActorNodeOverride,
   DslStep,
   DslAnimate,
@@ -73,6 +79,9 @@ import type {
 
 export type V05ParseResult = { ok: true; doc: DslDocument } | { ok: false; errors: DslError[] };
 
+/** 矢印を出す辺。 Text DSL / JSON validator / 公開 schema の 3 経路で同じ 4 値を使う。 */
+export const EDGE_SIDE_VALUES = ["top", "right", "bottom", "left"] as const;
+
 /**
  * 記法が受ける top-level の項目 (#1190)。
  *
@@ -95,6 +104,16 @@ export const TOP_LEVEL_KEYS = [
   "eyebrow",
   // 2 軸で仕分ける図の軸の名前 (#1251)
   "axes",
+  // 値を見せる部品 (#1374)
+  "readouts",
+  // 読む人が動かすつまみ (#1389)
+  "inputs",
+  // つまみの値から決まる値 (#1391)
+  "formulas",
+  // 押下などの出来事で動く仕掛け (#1393)
+  "events",
+  // 巻き上げに応じて進む値 (#1393)
+  "scrolls",
 ] as const;
 
 /**
@@ -116,6 +135,101 @@ export const TOP_LEVEL_KEYS = [
  */
 const LANE_ID_ENTRY = /^([\p{L}\p{N}_-]+)\s*:\s*\{([^}]*)\}\s*$/u;
 
+/**
+ * `id: { ... }` の 1 行を、名前と中括弧の中身に割る (#1381)。
+ *
+ * `LANE_ID_ENTRY` は中括弧を `[^}]*` で読むため、中身に中括弧を含む形
+ * (`map: [{ value: "a" }]`) を受けられない。 部品の欄には組の並びを取るものがあるので、
+ * 引用符の内側を飛ばしつつ中括弧の深さを数えて割る。
+ *
+ * 割れない形は `undefined` を返す。 呼び手が行番号付きで知らせる。
+ */
+function 名前と中括弧に割る(行: string): [string, string] | undefined {
+  const t = 行.trim();
+  const c = t.indexOf(":");
+  if (c < 0) return undefined;
+  const 名前 = t.slice(0, c).trim();
+  if (!/^[\p{L}\p{N}_-]+$/u.test(名前)) return undefined;
+  const 残り = t.slice(c + 1).trim();
+  if (!残り.startsWith("{")) return undefined;
+
+  let 深さ = 0;
+  let 引用: string | null = null;
+  let 直前: string | null = null;
+  for (let i = 0; i < 残り.length; i += 1) {
+    const ch = 残り[i]!;
+    if (引用 !== null) {
+      if (引用 === '"' && ch === "\\" && i + 1 < 残り.length) {
+        i += 1;
+        continue;
+      }
+      if (ch === 引用) 引用 = null;
+      continue;
+    }
+    if ((ch === '"' || ch === "'") && (直前 === null || ":,{[".includes(直前))) {
+      引用 = ch;
+      直前 = ch;
+      continue;
+    }
+    if (ch === "{") 深さ += 1;
+    else if (ch === "}") {
+      深さ -= 1;
+      // 中括弧が閉じた後に文字が残る形は割らない (`{...} x`)
+      if (深さ === 0) return i === 残り.length - 1 ? [名前, 残り.slice(1, i)] : undefined;
+    }
+    if (!/\s/u.test(ch)) 直前 = ch;
+  }
+  return undefined;
+}
+
+/**
+ * 行の末尾にある中括弧の塊を切り出す (#1396)。
+ *
+ * **`{[^}]*}` では切れない**。 欄の値に中括弧が入る形 (`{ widthBind: "{flow}" }`) では
+ * 内側の `}` で止まってしまい、塊ごと読み落として **本文の一部として扱われる**
+ * (実測 = 矢印の説明文が `"x" { widthBind: "{flow}" }` のまま図に載った)。
+ *
+ * 箱の側は #1381 で同じ理由から深さを数える形に直してある。 矢印だけが古い形で
+ * 残っていた。
+ *
+ * 引用符の内側は数えない = `sub: "a } b"` の `}` で閉じたことにしない。
+ * 切り出せない形は `undefined` を返し、呼び手が従来どおり本文として扱う。
+ */
+function 末尾の中括弧を切り出す(rest: string): { 前: string; 中身: string } | undefined {
+  const t = rest.trimEnd();
+  if (!t.endsWith("}")) return undefined;
+  let 深さ = 0;
+  let 引用: string | null = null;
+  let 直前: string | null = null;
+  let 始 = -1;
+  for (let i = 0; i < t.length; i += 1) {
+    const c = t[i]!;
+    if (引用 !== null) {
+      if (引用 === '"' && c === "\\" && i + 1 < t.length) {
+        i += 1;
+        continue;
+      }
+      if (c === 引用) 引用 = null;
+      continue;
+    }
+    if ((c === '"' || c === "'") && (直前 === null || ":,{[".includes(直前))) {
+      引用 = c;
+      直前 = c;
+      continue;
+    }
+    if (c === "{") {
+      if (深さ === 0) 始 = i;
+      深さ += 1;
+    } else if (c === "}") {
+      深さ -= 1;
+      // 閉じた位置が末尾なら、そこが探していた塊
+      if (深さ === 0 && i === t.length - 1) return { 前: t.slice(0, 始), 中身: t.slice(始 + 1, i) };
+    }
+    if (!/\s/u.test(c)) 直前 = c;
+  }
+  return undefined;
+}
+
 function isTopLevelKey(key: string): key is (typeof TOP_LEVEL_KEYS)[number] {
   return (TOP_LEVEL_KEYS as readonly string[]).includes(key);
 }
@@ -278,6 +392,12 @@ export function parseTextDslV05(src: string): V05ParseResult {
   const values: DslValue[] = [];
   let viewport: DslViewport | undefined = undefined;
   let lanesMap: Record<string, DslLane> | undefined = undefined;
+  let readoutsList: DslReadout[] | undefined = undefined;
+  let inputsList: DslInput[] | undefined = undefined;
+  let formulasList: DslFormula[] | undefined = undefined;
+  let eventsList: DslEventBinding[] | undefined = undefined;
+  let scrollsList: DslScrollTrigger[] | undefined = undefined;
+  let scrollLines = new Map<string, number>();
   let groupsMap: Record<string, DslGroup> | undefined = undefined;
 
   let i = 0;
@@ -539,6 +659,155 @@ export function parseTextDslV05(src: string): V05ParseResult {
       i = next;
       continue;
     }
+    if (head.key === "readouts") {
+      // readouts:\n  ring: { kind: percent-ring, source: total, max: 500, label: "..." }
+      // 1 行にまとめた形は受けない。 黙って空の並びにすると、書いた部品が全て消えた図になる。
+      if (head.value !== null && head.value.trim() !== "") {
+        errors.push({
+          line: line.no,
+          message: "readouts は 1 行にまとめて書けない",
+          hint: "次の行から字下げして `id: { kind: percent-ring, source: total, max: 100 }` の形で並べる",
+        });
+        i += 1;
+        continue;
+      }
+      // `collectIndentedList` は `:` の無い行を落とす。 部品を綴り違えた行も知らせるため、
+      // 字下げした行を全て読み手へ渡す。
+      const { items, next } = collectIndentedRaw(lines, i + 1, line.indent);
+      readoutsList = [];
+      for (const it of items) {
+        const m = 名前と中括弧に割る(it.trimmed);
+        if (m) {
+          const 読めた = 部品として読む(m[0], m[1], it.no, errors);
+          if (読めた) readoutsList.push(読めた);
+        } else {
+          errors.push({
+            line: it.no,
+            message: `invalid readout entry: "${it.trimmed}"`,
+            hint: "use `id: { kind: percent-ring, source: total, max: 500 }`",
+          });
+        }
+      }
+      i = next;
+      continue;
+    }
+    if (head.key === "inputs") {
+      // inputs:\n  value: { kind: slider, min: 0, max: 100, defaultValue: 50, label: "Value" }
+      // 1 行にまとめた形は受けない。 黙って空の並びにすると、書いたつまみが全て消えた図になる。
+      if (head.value !== null && head.value.trim() !== "") {
+        errors.push({
+          line: line.no,
+          message: "inputs は 1 行にまとめて書けない",
+          hint: "次の行から字下げして `value: { kind: slider, min: 0, max: 100, defaultValue: 50 }` の形で並べる",
+        });
+        i += 1;
+        continue;
+      }
+      // `collectIndentedList` は `:` の無い行を落とす。 つまみを綴り違えた行も知らせるため、
+      // 字下げした行を全て読み手へ渡す。
+      const { items, next } = collectIndentedRaw(lines, i + 1, line.indent);
+      inputsList = [];
+      for (const it of items) {
+        const m = 名前と中括弧に割る(it.trimmed);
+        if (m) {
+          const 読めた = つまみとして読む(m[0], m[1], it.no, errors);
+          if (読めた) inputsList.push(読めた);
+        } else {
+          errors.push({
+            line: it.no,
+            message: `invalid input entry: "${it.trimmed}"`,
+            hint: "use `id: { kind: slider, min: 0, max: 100, defaultValue: 50 }`",
+          });
+        }
+      }
+      i = next;
+      continue;
+    }
+    if (head.key === "formulas") {
+      // formulas:\n  doubled: "input * 2"
+      //
+      // 1 行にまとめた形は受けない (`values:` と同じ理由)。 式に `,` が入るため、
+      // 素朴な `,` 分割では式が壊れる。
+      if (head.value !== null && head.value.trim() !== "") {
+        errors.push({
+          line: line.no,
+          message: "formulas は 1 行にまとめて書けない",
+          hint: '式に `,` が入るため。 次の行から字下げして `doubled: "input * 2"` の形で並べる',
+        });
+        i += 1;
+        continue;
+      }
+      // 字下げした行を全て読み手へ渡す = 綴りを誤った行も知らせるため
+      const { items, next } = collectIndentedRaw(lines, i + 1, line.indent);
+      formulasList = [];
+      for (const it of items) {
+        const f = 式として読む(it.trimmed.replace(/^-\s*/, ""), it.no, errors);
+        if (f) formulasList.push(f);
+      }
+      i = next;
+      continue;
+    }
+    if (head.key === "events") {
+      // events:\n  - { on: click, box: Button, handler: toggle-active }
+      if (head.value !== null && head.value.trim() !== "") {
+        errors.push({
+          line: line.no,
+          message: "events は 1 行にまとめて書けない",
+          hint: "次の行から字下げして `- { on: click, box: Button, handler: toggle }` の形で並べる",
+        });
+        i += 1;
+        continue;
+      }
+      const { items, next } = collectIndentedRaw(lines, i + 1, line.indent);
+      eventsList = [];
+      for (const it of items) {
+        const e = 出来事として読む(it.trimmed.replace(/^-\s*/, ""), it.no, errors);
+        if (e) eventsList.push(e);
+      }
+      i = next;
+      continue;
+    }
+    if (head.key === "scrolls") {
+      // scrolls:\n  intro: { start: 0.9, end: 0.1, scrub: 1, label: "..." }
+      if (head.value !== null && head.value.trim() !== "") {
+        errors.push({
+          line: line.no,
+          message: "scrolls は 1 行にまとめて書けない",
+          hint: "次の行から字下げして `intro: { start: 0.9, end: 0.1 }` の形で並べる",
+        });
+        i += 1;
+        continue;
+      }
+      const { items, next } = collectIndentedRaw(lines, i + 1, line.indent);
+      scrollsList = [];
+      scrollLines = new Map();
+      for (const it of items) {
+        const m = 名前と中括弧に割る(it.trimmed);
+        if (m) {
+          const 読めた = 巻き上げとして読む(m[0], m[1], it.no, errors);
+          if (読めた) {
+            if (scrollLines.has(読めた.id)) {
+              errors.push({
+                line: it.no,
+                message: `巻き上げの名前 "${読めた.id}" が重複しています`,
+                hint: "scrolls の名前は 1 度だけ書く",
+              });
+            } else {
+              scrollsList.push(読めた);
+              scrollLines.set(読めた.id, it.no);
+            }
+          }
+        } else {
+          errors.push({
+            line: it.no,
+            message: `invalid scroll entry: "${it.trimmed}"`,
+            hint: "use `id: { start: 0.9, end: 0.1, scrub: 1 }`",
+          });
+        }
+      }
+      i = next;
+      continue;
+    }
     if (head.key === "groups") {
       // groups:\n  aws: { label: "AWS", lanes: [ecs, rds] }
       const { items, next } = collectIndentedList(lines, i + 1, line.indent);
@@ -582,6 +851,20 @@ export function parseTextDslV05(src: string): V05ParseResult {
       hint: "add `type: sequence|flow|swimlane|er|state|topology|solidity|gantt|class|pie|c4|mind`",
     });
 
+  // つまみ・式・巻き上げは同じ名前空間で値を作る。 重なると後から作る値が効かない。
+  const 既に値を作る名前 = new Set([
+    ...(inputsList ?? []).map((input) => input.id),
+    ...(formulasList ?? []).map((formula) => formula.id),
+  ]);
+  for (const scroll of scrollsList ?? []) {
+    if (!既に値を作る名前.has(scroll.id)) continue;
+    errors.push({
+      line: scrollLines.get(scroll.id) ?? 1,
+      message: `巻き上げの名前 "${scroll.id}" が inputs または formulas と重なっています`,
+      hint: "inputs / formulas / scrolls では重ならない名前を使う",
+    });
+  }
+
   if (errors.length > 0) return { ok: false, errors };
 
   return {
@@ -597,6 +880,11 @@ export function parseTextDslV05(src: string): V05ParseResult {
       ...(values.length > 0 ? { values } : {}),
       viewport,
       lanes: lanesMap,
+      readouts: readoutsList,
+      inputs: inputsList,
+      formulas: formulasList,
+      events: eventsList,
+      scrolls: scrollsList,
       groups: groupsMap,
       pos: { line: 1 },
     },
@@ -937,6 +1225,732 @@ export const LANE_VALUE_KINDS = {
   lifeline: "真偽",
 } as const satisfies Record<string, 値の形>;
 
+/**
+ * 箱の中に描く図形 (`shape:`) と、値を見せる部品 (`readouts:`) の欄 (#1374)。
+ *
+ * どちらも描画側 (`CdlDynShape` / `CdlReadout`) の形をそのまま渡す。 記法の値は全て文字列で
+ * 届くため、欄ごとに「数」 「文字列」 「数か文字列」 のどれとして読むかを表で持つ。
+ *
+ * **「数か文字列」 は状態を追いかける欄**。 `level: 80` のように数を直接書くこともできるし、
+ * `level: "{s1}"` のように状態の名前を書いて段の中で動かすこともできる。 数として読めた時
+ * だけ数にし、読めなければ文字列のまま渡す。
+ *
+ * ## 表を持つ理由
+ *
+ * 表が無いと「知らない欄を黙って捨てる」 か「何でも通す」 のどちらかになる。 前者は書いた
+ * 指定が消え、後者は綴り違いがそのまま描画側へ流れて別の形で失敗する。 表があれば
+ * 書いた場所と使える欄を添えて知らせられる。
+ */
+// 欄の形と定義の型は `parser-types.ts` が持つ (#1385)。 生成した部品の表がこの型を使うため、
+// `parser.ts` に置いたままだと 生成した表 → parser → 生成した表 の輪ができる
+export type { 欄の形, 図形の定義 } from "./parser-types";
+
+/** 描ける図形と、その欄 (`CdlDynShape` の全 5 種を覆う) */
+export const 図形の表: Record<string, 図形の定義> = {
+  rect: {
+    必須: ["source", "fillMax"],
+    欄: {
+      source: "数か文字列",
+      fillMax: "数",
+      orient: "向き",
+      fill: "文字列",
+      stroke: "文字列",
+      radius: "数",
+    },
+  },
+  circle: {
+    必須: [],
+    欄: { radius: "数か文字列", fillProgress: "数か文字列", fill: "文字列", stroke: "文字列" },
+  },
+  arc: {
+    必須: ["angle"],
+    欄: {
+      innerRadius: "数",
+      outerRadius: "数",
+      startAngle: "数",
+      angle: "数か文字列",
+      sweepMax: "数",
+      fill: "文字列",
+      stroke: "文字列",
+    },
+  },
+  wave: {
+    必須: ["level", "amplitude"],
+    欄: {
+      level: "数か文字列",
+      amplitude: "数",
+      frequency: "数",
+      waveHeight: "数",
+      fill: "文字列",
+      stroke: "文字列",
+    },
+  },
+  polygon: {
+    必須: ["sides"],
+    欄: {
+      sides: "数",
+      radius: "数か文字列",
+      rotation: "数か文字列",
+      fill: "文字列",
+      stroke: "文字列",
+    },
+  },
+};
+
+/**
+ * 記法が受ける部品と、その欄。
+ *
+ * **手で書かず、描画側の型定義から生成する** (#1385)。 描画側は 107 種を持ち欄は 510 個あり、
+ * 手で写すと写し間違いと描画側の変更への drift が残る (`rules/quality.md § 導出可能記述は
+ * 人手で書かない`)。
+ *
+ * 作り直す = `node packages/dragon/scripts/gen-readout-table.mjs`
+ * ずれの検知 = `packages/dragon/test/readout-table-generated.test.ts`
+ */
+export { 部品の表, 部品の組の表 } from "./readout-table.generated";
+import { 部品の表, 部品の組の表 } from "./readout-table.generated";
+
+/**
+ * 記法が受けるつまみと、その欄 (#1389)。
+ *
+ * **部品の表と同じく、描画側の型定義から生成する**。 14 種それぞれ欄が違い、手で写すと
+ * 描画側が種類を足した時に drift が残る (`rules/quality.md § 導出可能記述は人手で書かない`)。
+ *
+ * 作り直す = `node packages/dragon/scripts/gen-input-table.mjs`
+ * ずれの検知 = `packages/dragon/test/input-table-generated.test.ts`
+ */
+export { つまみの表 } from "./input-table.generated";
+import { つまみの表 } from "./input-table.generated";
+import type { 図形の定義 } from "./parser-types";
+
+/** `[a, b]` の形を文字列の並びに読む */
+function 並びとして読む(raw: string): string[] {
+  return raw
+    .replace(/^\[|\]$/g, "")
+    .split(/,(?![^[]*\])/)
+    .map((x) => stripQuotes(x.trim()))
+    .filter((x) => x !== "");
+}
+
+/**
+ * `[{ a: 1 }, { b: 2 }]` の形を、中括弧ごとの組の並びに読む (#1381)。
+ *
+ * `並びとして読む` は葉の値しか想定していないため、中括弧を含む形を渡すと項目の途中で
+ * 割れる。 中括弧の深さを数えて、深さ 0 の位置だけで割る。
+ *
+ * 読めない形は捨てずに `undefined` を返す。 呼び手が行番号付きで知らせる = 黙って捨てると
+ * 「書いたのに出ない」 が手掛かりなしで起きる。
+ */
+function 組の並びとして読む(raw: string): Record<string, string>[] | undefined {
+  const 中身 = raw.trim();
+  if (!中身.startsWith("[") || !中身.endsWith("]")) return undefined;
+  const 本体 = 中身.slice(1, -1);
+
+  const 塊: string[] = [];
+  let i = 0;
+  let 次は組 = true;
+  while (i < 本体.length) {
+    while (i < 本体.length && /\s/u.test(本体[i]!)) i += 1;
+    if (i >= 本体.length) break;
+
+    if (!次は組) {
+      if (本体[i] !== ",") return undefined;
+      次は組 = true;
+      i += 1;
+      continue;
+    }
+    if (本体[i] !== "{") return undefined;
+
+    const 始まり = i + 1;
+    let 引用: '"' | "'" | null = null;
+    let 直前: string | null = "{";
+    i += 1;
+    for (; i < 本体.length; i += 1) {
+      const c = 本体[i]!;
+      if (引用 !== null) {
+        if (引用 === '"' && c === "\\" && i + 1 < 本体.length) {
+          i += 1;
+          continue;
+        }
+        if (c === 引用) 引用 = null;
+        continue;
+      }
+      if ((c === '"' || c === "'") && (直前 === null || ":,{[".includes(直前))) {
+        引用 = c;
+        直前 = c;
+        continue;
+      }
+      // 組の中身は葉だけ。 引用符の外の入れ子は値の形を保てない。
+      if (c === "{") return undefined;
+      if (c === "}") {
+        塊.push(本体.slice(始まり, i));
+        i += 1;
+        次は組 = false;
+        break;
+      }
+      if (!/\s/u.test(c)) 直前 = c;
+    }
+    if (次は組) return undefined;
+  }
+  if (次は組 && 塊.length > 0) return undefined;
+  if (塊.length === 0) return undefined;
+
+  const 出: Record<string, string>[] = [];
+  for (const t of 塊) {
+    const 組 = parseInlineMapping(t);
+    if (Object.keys(組).length === 0) return undefined;
+    出.push(組);
+  }
+  return 出;
+}
+
+function 部品の組を検査する(
+  kind: string,
+  読めた: Record<string, unknown>,
+  line: number,
+  errors: DslError[],
+): void {
+  for (const [欄, 定義] of Object.entries(部品の組の表[kind] ?? {})) {
+    const 並び = 読めた[欄];
+    if (!Array.isArray(並び)) continue;
+    並び.forEach((組, i) => {
+      const o = 組 as Record<string, unknown>;
+      for (const k of Object.keys(o)) {
+        if (k in 定義.欄) continue;
+        errors.push({
+          line,
+          message: `部品の ${欄}[${i}] の項目名が読めません: "${k}"`,
+          hint: `使える項目 = ${Object.keys(定義.欄).join(", ")}`,
+        });
+      }
+      for (const k of 定義.必須) {
+        if (o[k] !== undefined) continue;
+        errors.push({
+          line,
+          message: `部品の ${欄}[${i}].${k} は必ず書きます`,
+          hint: `必須の項目 = ${定義.必須.join(", ")}`,
+        });
+      }
+    });
+  }
+}
+
+/**
+ * 中括弧の中身を、表に従って読む (#1374)。
+ *
+ * 知らない欄と足りない必須欄は行番号付きで知らせる。 読めた欄だけを返すため、
+ * 知らせが出た欄は描画側へ渡らない。
+ */
+function 表に従って読む(
+  定義: 図形の定義,
+  opts: Record<string, string>,
+  接頭: string,
+  line: number,
+  errors: DslError[],
+): Record<string, unknown> {
+  const out: Record<string, unknown> = {};
+  for (const [欄, 値] of Object.entries(opts)) {
+    if (欄 === "kind") continue;
+    const 形 = 定義.欄[欄];
+    if (形 === undefined) {
+      errors.push({
+        line,
+        message: `${接頭}の項目名が読めません: "${欄}"`,
+        hint: `使える項目 = ${Object.keys(定義.欄).join(", ")}`,
+      });
+      continue;
+    }
+    /*
+     * 空の値を落とすのは文字列以外だけ (#1385)。
+     *
+     * `unit: ""` は「単位を出さない」 という指定で、書いた人の意図がある。 落とすと
+     * 書かなかった場合と同じになり、描画側の既定が出る = 書いたのに効かない。
+     *
+     * 値を書かなかった形 (`unit:`) はここに届かない = `parseInlineMapping` が値 1 文字以上を
+     * 求めるため、名前ごと拾われない。 したがって空が来るのは引用符で明示した時だけ。
+     */
+    if (値 === "" && 形 !== "文字列") continue;
+    if (形 === "数") {
+      const n = 数として読む(値, `${接頭}${欄}`, line, errors);
+      if (n !== undefined) out[欄] = n;
+    } else if (形 === "数か文字列") {
+      const n = numberOrUndef(値);
+      out[欄] = n !== undefined ? n : 値;
+    } else if (形 === "文字列の並び") {
+      out[欄] = 並びとして読む(値);
+    } else if (形 === "数の並び") {
+      /*
+       * 数の並びは、1 つでも数として読めなければ欄ごと落とす (#1389)。
+       *
+       * 読めた分だけ渡すと並びの長さが変わり、番号で指す欄 (`defaultSpeedIdx`) が
+       * 別の要素を指す。 書き間違いが「別の値が選ばれている図」 になって出るため、
+       * 数え落としを黙って通さない。
+       */
+      const 生 = 並びとして読む(値);
+      const 数 = 生.map((x) => numberOrUndef(x));
+      if (数.some((n) => n === undefined)) {
+        errors.push({
+          line,
+          message: `${接頭}${欄} に数でない値があります: "${値}"`,
+          hint: "`[0.5, 1, 2, 4]` の形で数だけを並べる",
+        });
+      } else {
+        out[欄] = 数;
+      }
+    } else if (形 === "組の並び") {
+      const 組 = 組の並びとして読む(値);
+      if (組 !== undefined) out[欄] = 組;
+      else {
+        errors.push({
+          line,
+          message: `${接頭}${欄} の並びが読めません: "${値}"`,
+          hint: '`[{ value: "online", color: "#22c55e" }]` の形で書く',
+        });
+      }
+    } else if (形 === "真偽") {
+      // 描画側は `boolean` を取る。 `"true"` / `"false"` の 2 語だけを受け、それ以外は
+      // 黙って真に倒さず知らせる = `visibleIf` と違い、ここは真偽そのものを渡す欄
+      if (値 === "true" || 値 === "false") out[欄] = 値 === "true";
+      else {
+        errors.push({
+          line,
+          message: `${接頭}${欄} の真偽が読めません: "${値}"`,
+          hint: "使える値 = true, false",
+        });
+      }
+    } else if (形 === "向き") {
+      if (["up", "down", "left", "right"].includes(値)) out[欄] = 値;
+      else {
+        errors.push({
+          line,
+          message: `${接頭}${欄} の向きが読めません: "${値}"`,
+          hint: "使える値 = up, down, left, right",
+        });
+      }
+    } else {
+      out[欄] = 値;
+    }
+  }
+  for (const 欄 of 定義.必須) {
+    if (out[欄] === undefined) {
+      errors.push({
+        line,
+        message: `${接頭}${欄} は必ず書きます`,
+        hint: `必須の項目 = ${定義.必須.join(", ")}`,
+      });
+    }
+  }
+  return out;
+}
+
+/**
+ * その箱を出すかどうかの条件を読む (#1381)。
+ *
+ * 描画側は空文字を偽として扱うため、`visibleIf: ` と書くと「常に出ない箱」 になる。
+ * 書いた本人はたいてい条件を書き忘れただけなので、空は捨てずに行番号付きで知らせる。
+ */
+function 出す条件として読む(
+  raw: string | undefined,
+  line: number,
+  errors: DslError[],
+): string | undefined {
+  if (raw === undefined) return undefined;
+  const 値 = raw.trim();
+  if (値 === "") {
+    errors.push({
+      line,
+      message: "箱の visibleIf が空です",
+      hint: '`visibleIf: "{flag}"` のように条件を書く。 常に隠すなら `visibleIf: "0"`',
+    });
+    return undefined;
+  }
+  return 値;
+}
+
+/**
+ * 値に追随する欄を読む (#1392)。 数として読めれば数、読めなければ文字列のまま渡す。
+ *
+ * `箱の中に描く図形` の `source` と同じ読み方に揃える (`表に従って読む` の「数か文字列」)。
+ * 状態の名前 (`"{barW}"`) を書く形と、数を直に書く形の両方を受ける。
+ *
+ * **空は捨てずに知らせる**。 描画側は空文字を「書かなかった」 と同じには扱わず、
+ * `opacity: ""` は 0 として読まれて箱が消える。 書いた人はたいてい値を書き忘れただけ。
+ */
+function 値に追随する欄として読む(
+  raw: string | undefined,
+  接頭: string,
+  line: number,
+  errors: DslError[],
+): number | string | undefined {
+  if (raw === undefined) return undefined;
+  const 値 = raw.trim();
+  if (値 === "") {
+    errors.push({
+      line,
+      message: `${接頭}が空です`,
+      hint: '`{状態の名前}` か数を書く (例 `opacity: "{fade}"` / `opacity: 0.5`)',
+    });
+    return undefined;
+  }
+  const n = numberOrUndef(値);
+  return n !== undefined ? n : 値;
+}
+
+/**
+ * 箱の幅と高さを値に追随させる欄を読む (#1392)。
+ *
+ * 描画側は文字列だけを受ける (`wBind?: string`)。 数を直に書いても追随のしようが無いので、
+ * 数か文字列として読む欄とは分ける。
+ */
+function 追随する大きさとして読む(
+  raw: string | undefined,
+  接頭: string,
+  line: number,
+  errors: DslError[],
+): string | undefined {
+  if (raw === undefined) return undefined;
+  const 値 = raw.trim();
+  if (値 === "") {
+    errors.push({
+      line,
+      message: `${接頭}が空です`,
+      hint: '`{状態の名前}` を書く (例 `wBind: "{barW}"`)',
+    });
+    return undefined;
+  }
+  return 値;
+}
+
+/**
+ * 値に追随する箱の欄 (#1392)。
+ *
+ * `satisfies` で `DslActor` から欄を導く = 綴りを誤ると型検査が落ちる。
+ */
+const 値に追随する箱の欄 = [
+  "wBind",
+  "hBind",
+  "opacity",
+  "renderOffsetX",
+  "renderOffsetY",
+] as const satisfies readonly (keyof DslActor)[];
+
+/**
+ * 縦に並べた時、値が空でも読み取りへ渡す欄 (#1392)。
+ *
+ * 他の欄は空を「書かなかった」 として落とすが、この 5 欄は描画側が空文字を数として
+ * 読むため、落とすと書き忘れが「箱が消えた」 形で出る。
+ */
+const 空を知らせる箱の欄: ReadonlySet<string> = new Set(値に追随する箱の欄);
+
+/** Object.prototype の持ち物を、表にある種類として扱わない。 */
+function 表から定義を引く(表: Record<string, 図形の定義>, kind: string): 図形の定義 | undefined {
+  return Object.hasOwn(表, kind) ? 表[kind] : undefined;
+}
+
+/**
+ * 箱の中に描く図形を読む (#1374)。 読めなければ `undefined` を返す。
+ *
+ * 種類が分からない形は捨てずに知らせる = 黙って捨てると、書いた図形が出ないのに
+ * 手掛かりが 1 つも残らない。
+ */
+function 図形として読む(raw: string, line: number, errors: DslError[]): DslDynShape | undefined {
+  const 中身 = raw.trim().replace(/^\{|\}$/g, "");
+  const opts = parseInlineMapping(中身);
+  const kind = (opts.kind ?? "").toLowerCase();
+  const 定義 = 表から定義を引く(図形の表, kind);
+  if (定義 === undefined) {
+    errors.push({
+      line,
+      message: `図形の種類が読めません: "${opts.kind ?? ""}"`,
+      hint: `使える種類 = ${Object.keys(図形の表).join(", ")}`,
+    });
+    return undefined;
+  }
+  const 読めた = 表に従って読む(定義, opts, `図形の `, line, errors);
+  for (const 欄 of 定義.必須) if (読めた[欄] === undefined) return undefined;
+  return { kind, ...読めた } as DslDynShape;
+}
+
+/**
+ * 値を見せる部品を読む (#1374)。 読めなければ `undefined` を返す。
+ */
+function 部品として読む(
+  id: string,
+  raw: string,
+  line: number,
+  errors: DslError[],
+): DslReadout | undefined {
+  const opts = parseInlineMapping(raw);
+  const kind = (opts.kind ?? "").toLowerCase();
+  const 定義 = 表から定義を引く(部品の表, kind);
+  if (定義 === undefined) {
+    errors.push({
+      line,
+      message: `部品の種類が読めません: "${opts.kind ?? ""}"`,
+      hint: `使える種類 = ${Object.keys(部品の表).join(", ")}`,
+    });
+    return undefined;
+  }
+  const 読めた = 表に従って読む(定義, opts, `部品 ${id} の `, line, errors);
+  部品の組を検査する(kind, 読めた, line, errors);
+  for (const 欄 of 定義.必須) if (読めた[欄] === undefined) return undefined;
+  return { id, kind, ...読めた } as DslReadout;
+}
+
+/**
+ * 出来事の種類 (#1393)。 描画側の `CdlEventKind` と同じ語を並べる。
+ *
+ * **描画側から導けない**。 型は書き出されるが値の一覧は実行時に無いため、ここに書く。
+ * 知らない語を書いた時の知らせがこの一覧をそのまま出すので、増えたら 1 行足す。
+ */
+export const EVENT_KINDS = [
+  "click",
+  "hover",
+  "double-click",
+  "long-press",
+  "drag",
+  "drop",
+  "keydown",
+  "focus",
+  "blur",
+] as const;
+
+/** 出来事の相手を指す書き方。 ちょうど 1 つだけ書く */
+const EVENT_TARGET_KEYS = ["box", "lane", "arrow", "diagram"] as const;
+
+/**
+ * 押下などの出来事で動く仕掛けを 1 件読む (#1393)。
+ *
+ * 形は `{ on: click, box: Button, handler: toggle }`。 相手の指し方は 4 つあり、
+ * **ちょうど 1 つだけ書く** = 2 つ書くとどちらを指したのか決まらず、0 なら相手がいない。
+ *
+ * 相手は名前で書く。 識別子は記法で書けないため、名前から識別子への読み替えは
+ * 組み立てが行う (`focus:` と同じ扱い)。
+ */
+function 出来事として読む(
+  raw: string,
+  line: number,
+  errors: DslError[],
+): DslEventBinding | undefined {
+  const t = raw.trim();
+  if (!t.startsWith("{") || !t.endsWith("}")) {
+    errors.push({
+      line,
+      message: `出来事の行が読めません: "${t}"`,
+      hint: "`- { on: click, box: Button, handler: toggle }` の形で書く",
+    });
+    return undefined;
+  }
+  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;
+    errors.push({
+      line,
+      message: `出来事の項目名が読めません: "${k}"`,
+      hint: `使える項目 = on, handler, ${EVENT_TARGET_KEYS.join(", ")}`,
+    });
+    return undefined;
+  }
+  const on = opts.on ?? "";
+  if (!(EVENT_KINDS as readonly string[]).includes(on)) {
+    errors.push({
+      line,
+      message: `出来事の種類が読めません: "${on}"`,
+      hint: `使える種類 = ${EVENT_KINDS.join(", ")}`,
+    });
+    return undefined;
+  }
+  const handlerId = (opts.handler ?? "").trim();
+  if (handlerId === "") {
+    errors.push({
+      line,
+      message: "出来事の handler が空です",
+      hint: "`handler: toggle-active` のように、呼び出す仕掛けの名前を書く",
+    });
+    return undefined;
+  }
+  const 書いた相手 = EVENT_TARGET_KEYS.filter((k) => opts[k] !== undefined);
+  if (書いた相手.length !== 1) {
+    errors.push({
+      line,
+      message:
+        書いた相手.length === 0
+          ? "出来事の相手が書かれていません"
+          : `出来事の相手を 2 つ以上書いています: ${書いた相手.join(", ")}`,
+      hint: `${EVENT_TARGET_KEYS.join(" / ")} のどれか 1 つだけを書く`,
+    });
+    return undefined;
+  }
+  const 鍵 = 書いた相手[0]!;
+  const 値 = (opts[鍵] ?? "").trim();
+  let target: DslEventBinding["target"];
+  if (鍵 === "diagram") {
+    if (値 !== "true") {
+      errors.push({
+        line,
+        message: `出来事の diagram が読めません: "${値}"`,
+        hint: "図全体を指す時は `diagram: true` と書く",
+      });
+      return undefined;
+    }
+    target = { kind: "diagram" };
+  } else if (鍵 === "arrow") {
+    const m = 値.split("->");
+    if (m.length !== 2 || m[0]!.trim() === "" || m[1]!.trim() === "") {
+      errors.push({
+        line,
+        message: `出来事の矢印が読めません: "${値}"`,
+        hint: "`arrow: A -> B` の形で、矢印の両端の名前を書く",
+      });
+      return undefined;
+    }
+    target = { kind: "edge", from: stripQuotes(m[0]!.trim()), to: stripQuotes(m[1]!.trim()) };
+  } else {
+    if (値 === "") {
+      errors.push({
+        line,
+        message: `出来事の ${鍵} が空です`,
+        hint: "指す相手の名前を書く",
+      });
+      return undefined;
+    }
+    target = { kind: 鍵 === "box" ? "node" : "lane", name: stripQuotes(値) };
+  }
+  return { event: on as DslEventBinding["event"], target, handlerId, pos: { line } };
+}
+
+/** 巻き上げに応じて進む値の欄 (#1393)。 描画側の `CdlScrollTrigger` を覆う */
+const SCROLL_VALUE_KINDS = {
+  start: "数",
+  end: "数",
+  scrub: "数",
+} as const satisfies Record<string, 値の形>;
+
+/**
+ * 巻き上げに応じて進む値を 1 件読む (#1393)。
+ *
+ * 形は `intro: { start: 0.9, end: 0.1, scrub: 1, label: "..." }`。
+ * 数の欄は表が読み、説明文はそのまま渡す。
+ */
+function 巻き上げとして読む(
+  id: string,
+  raw: string,
+  line: number,
+  errors: DslError[],
+): DslScrollTrigger | undefined {
+  if (!isValueName(id)) {
+    errors.push({ line, ...valueNameIssue(id) });
+    return undefined;
+  }
+  const opts = parseInlineMapping(raw);
+  const 使える = [...Object.keys(SCROLL_VALUE_KINDS), "label"];
+  for (const k of Object.keys(opts)) {
+    if (使える.includes(k)) continue;
+    errors.push({
+      line,
+      message: `巻き上げ ${id} の項目名が読めません: "${k}"`,
+      hint: `使える項目 = ${使える.join(", ")}`,
+    });
+    return undefined;
+  }
+  const 数 = 表で読む(SCROLL_VALUE_KINDS, opts, `巻き上げ ${id} の `, line, errors);
+  for (const 欄 of ["start", "end", "scrub"] as const) {
+    const 値 = 数[欄];
+    if (値 === undefined || (値 >= 0 && 値 <= 1)) continue;
+    errors.push({
+      line,
+      message: `巻き上げ ${id} の ${欄} は 0 から 1 の間で書きます: "${値}"`,
+      hint: "0 は画面の上端または段階的な追随、1 は下端または連続追随",
+    });
+  }
+  return {
+    id,
+    ...(数.start !== undefined ? { start: 数.start } : {}),
+    ...(数.end !== undefined ? { end: 数.end } : {}),
+    ...(数.scrub !== undefined ? { scrub: 数.scrub } : {}),
+    ...(opts.label !== undefined ? { label: opts.label } : {}),
+  };
+}
+
+/**
+ * つまみの値から決まる値を読む (#1391)。 読めなければ `undefined` を返す。
+ *
+ * 形は `名前: "式"` の 1 行。 `values:` と同じ形で、**違うのは解かれる仕組み**。
+ * あちらは段が動かす状態を読み、こちらはつまみが握る値を読む。
+ *
+ * 名前を中括弧で囲うかは自由 (実測 = 描画側の parser は `"{a} + 1"` と `"a + 1"` を
+ * 同じ名前として読む)。 `values:` から式を書き写しても、そのまま通る。
+ *
+ * **式は描画側の parser に通す**。 自前で書き方を決めると、通ったのに描画側が
+ * 解けない式を受けてしまう。 描画側が投げた誤りの本文をそのまま知らせに載せる。
+ */
+function 式として読む(行: string, line: number, errors: DslError[]): DslFormula | undefined {
+  const c = 行.indexOf(":");
+  if (c < 0) {
+    errors.push({
+      line,
+      message: `式の行が読めません: "${行}"`,
+      hint: '`名前: "式"` の形で書く (例 `doubled: "input * 2"`)',
+    });
+    return undefined;
+  }
+  const 名前 = 行.slice(0, c).trim();
+  const 式 = stripQuotes(行.slice(c + 1).trim());
+  if (!isValueName(名前)) {
+    // 名前の規則は状態と揃える = 式の名前も `{名前}` で箱の文字に差し込める
+    errors.push({ line, ...valueNameIssue(名前) });
+    return undefined;
+  }
+  if (式 === "") {
+    errors.push({
+      line,
+      message: `式 "${名前}" が空です`,
+      hint: '`doubled: "input * 2"` のように式を書く',
+    });
+    return undefined;
+  }
+  try {
+    parseFormula(式);
+  } catch (e) {
+    errors.push({
+      line,
+      message: `式 "${名前}" を読めません: ${(e as Error).message}`,
+      hint: "使えるのは四則と括弧、比較、三項 (`a > 1 ? 2 : 3`)、`Math.min` などの関数",
+    });
+    return undefined;
+  }
+  return { id: 名前, expression: 式, pos: { line } };
+}
+
+/**
+ * 読む人が動かすつまみを読む (#1389)。 読めなければ `undefined` を返す。
+ *
+ * 部品 (`readouts:`) と同じ経路で読む。 違いは組の並びを取る欄が無いことだけで、
+ * 知らない欄と足りない必須欄の知らせ方は同じ。
+ */
+function つまみとして読む(
+  id: string,
+  raw: string,
+  line: number,
+  errors: DslError[],
+): DslInput | undefined {
+  const opts = parseInlineMapping(raw);
+  const kind = (opts.kind ?? "").toLowerCase();
+  const 定義 = 表から定義を引く(つまみの表, kind);
+  if (定義 === undefined) {
+    errors.push({
+      line,
+      message: `つまみの種類が読めません: "${opts.kind ?? ""}"`,
+      hint: `使える種類 = ${Object.keys(つまみの表).join(", ")}`,
+    });
+    return undefined;
+  }
+  const 読めた = 表に従って読む(定義, opts, `つまみ ${id} の `, line, errors);
+  for (const 欄 of 定義.必須) if (読めた[欄] === undefined) return undefined;
+  return { id, kind, ...読めた } as DslInput;
+}
+
 /** 箱の中の要素の欄 (#1306)。 `DslActorNodeOverride` の全欄を覆う */
 export const ACTOR_NODE_VALUE_KINDS = {
   posX: "数",
@@ -1002,20 +2016,40 @@ function matchActorInlineMapping(raw: string): { name: string; inner: string } |
   const name = raw.slice(0, colonIdx);
   const rest = raw.slice(colonIdx + 1).trim();
   if (!rest.startsWith("{")) return null;
-  // depth count で対応 brace 探す
-  let depth = 0;
-  let endIdx = -1;
-  for (let i = 0; i < rest.length; i += 1) {
-    const c = rest[i]!;
-    if (c === "{") depth += 1;
-    else if (c === "}") {
-      depth -= 1;
-      if (depth === 0) {
-        endIdx = i;
-        break;
+  // depth count で対応 brace 探す。 正しい引用符の中の `}` は飛ばす。
+  const 終わりを探す = (引用符を見る: boolean): number => {
+    let depth = 0;
+    let 引用符: '"' | "'" | null = null;
+    let 直前: string | null = null;
+    for (let i = 0; i < rest.length; i += 1) {
+      const c = rest[i]!;
+      if (引用符を見る) {
+        if (引用符 !== null) {
+          if (引用符 === '"' && c === "\\" && i + 1 < rest.length) {
+            i += 1;
+            continue;
+          }
+          if (c === 引用符) 引用符 = null;
+          continue;
+        }
+        if ((c === '"' || c === "'") && (直前 === null || ":,{[".includes(直前))) {
+          引用符 = c;
+          直前 = c;
+          continue;
+        }
+      }
+      if (c === "{") depth += 1;
+      else if (c === "}") {
+        depth -= 1;
+        if (depth === 0) return i;
       }
+      if (!/\s/u.test(c)) 直前 = c;
     }
-  }
+    return -1;
+  };
+  let endIdx = 終わりを探す(true);
+  // 閉じない引用符は従来どおり単純分割へ戻す (#1367)。
+  if (endIdx < 0) endIdx = 終わりを探す(false);
   if (endIdx < 0) return null;
   const inner = rest.slice(1, endIdx);
   return { name, inner };
@@ -1278,6 +2312,12 @@ function applyContinuationLines(actor: DslActor, rest: Line[], errors: DslError[
   const 図種ごとの欄 = new Map<string, string>();
   // パーツでなければどこにも入らない項目。 パーツかどうかは block を読み終わるまで決まらない
   const unknownKeys: Array<{ key: string; line: number }> = [];
+  /**
+   * 値に追随する 5 欄に書かれた字 (#1392)。
+   *
+   * 見本かどうかで読み方が変わるため、行を読む時点では振り分けない。
+   */
+  const 追随する欄の生値 = new Map<string, { 値: string; line: number }>();
 
   for (const ln of rest) {
     const idx = ln.trimmed.indexOf(":");
@@ -1293,7 +2333,9 @@ function applyContinuationLines(actor: DslActor, rest: Line[], errors: DslError[
       unknownKeys.push({ key, line: ln.no });
       continue;
     }
-    if (!raw) continue;
+    // 従来欄の空値は書かなかった扱いのままにする。 値に追随する 5 欄は、
+    // 空文字を描画側が数として解釈するため、個別の読み取りへ渡して知らせる。
+    if (!raw && !空を知らせる箱の欄.has(key)) continue;
 
     if (COLOR_KEYS.has(key)) {
       const { tone, hex } = splitColorValue(raw);
@@ -1326,6 +2368,35 @@ function applyContinuationLines(actor: DslActor, rest: Line[], errors: DslError[
       case "値":
         out.value = stripQuotes(raw);
         break;
+      case "shape":
+      case "図形":
+        out.shape = 図形として読む(raw, ln.no, errors);
+        break;
+      case "visibleIf":
+      case "出す条件":
+        out.visibleIf = 出す条件として読む(stripQuotes(raw), ln.no, errors);
+        break;
+      case "title":
+      case "題":
+        out.title = stripQuotes(raw);
+        break;
+      /*
+       * 値に追随する 5 欄 (#1392)。 日本語の別名は置かない = 描画側の欄名がそのまま
+       * 状態の名前と並ぶ場所なので、英字 1 種に絞って書き方の揺れを作らない。
+       *
+       * **ここでは読まずに書かれた字だけを控える**。 見本 (parts) では同じ名前が状態の
+       * 上書きになり、中括弧の形は生の字を `coerceStateValue` に通す。 ここで先に読むと
+       * `wBind: 120` が中括弧では数、縦に並べると文字列になって書き方で割れる。
+       * 見本かどうかは `kind` で決まり、それが後ろの行に書かれることがあるため、
+       * 全行を読み終えてから振り分ける。
+       */
+      case "wBind":
+      case "hBind":
+      case "opacity":
+      case "renderOffsetX":
+      case "renderOffsetY":
+        追随する欄の生値.set(key, { 値: stripQuotes(raw), line: ln.no });
+        break;
       case "rows":
       case "行":
         out.rows = raw
@@ -1425,11 +2496,7 @@ function applyContinuationLines(actor: DslActor, rest: Line[], errors: DslError[
   // 名前の行と縦に並べた行の両方に倍率がある形では、後に書いた縦の行を採る。
   // 知らせ (`scale-reserved`) は書かれた名前をすべて見るので、名前だけは足し合わせる
   if (scaleWritten.size > 0) {
-    const s = resolveScale(
-      scaleWritten,
-      (key) => scaleLines.get(key) ?? actor.pos.line,
-      errors,
-    );
+    const s = resolveScale(scaleWritten, (key) => scaleLines.get(key) ?? actor.pos.line, errors);
     out.scale = s.scale;
     out.scaleKeys = [...new Set([...(actor.scaleKeys ?? []), ...s.keys])];
   }
@@ -1447,9 +2514,31 @@ function applyContinuationLines(actor: DslActor, rest: Line[], errors: DslError[
   }
   // 状態も倍率も parts でだけ意味を持つ。 パーツなら知らせずに返す
   if (out.partId !== undefined) {
+    /*
+     * 見本では 5 欄も他の名前と同じく状態の上書きになる。
+     *
+     * **中括弧の形と同じ `coerceStateValue` を通す**。 専用の読み取りを通した値を移すと、
+     * `wBind: 120` が中括弧では数、縦に並べると文字列になって書き方で割れる (Round 2 の指摘)。
+     */
+    for (const [欄, { 値 }] of 追随する欄の生値) {
+      state[欄] = coerceStateValue(値);
+      touchedState = true;
+    }
     if (touchedState) out.stateOverride = state;
     return out;
   }
+  /*
+   * 普通の箱では専用の欄として読む (#1392)。
+   *
+   * 見本かどうかが決まってから読むため、空の知らせも見本でない箱にだけ出る。
+   */
+  for (const [欄, { 値, line }] of 追随する欄の生値) {
+    if (欄 === "wBind" || 欄 === "hBind") {
+      out[欄] = 追随する大きさとして読む(値, `箱の ${欄} `, line, errors);
+    } else if (欄 === "opacity" || 欄 === "renderOffsetX" || 欄 === "renderOffsetY") {
+      out[欄] = 値に追随する欄として読む(値, `箱の ${欄} `, line, errors);
+    }
+  }
   // パーツでない箱に書かれた見知らぬ項目は、 どこにも入らずに消える。 黙って捨てると
   // 「書いたのに図が変わらない」 が手掛かりなしで起きるので、 綴りの誤りとして知らせる
   for (const u of unknownKeys) {
@@ -1477,6 +2566,21 @@ export const ACTOR_ITEM_KEYS: ReadonlySet<string> = new Set([
   "値",
   "rows",
   "行",
+  // 箱の中に描く図形 (#1374)
+  "shape",
+  "図形",
+  // その箱を出すかどうかの条件 (#1381)
+  "visibleIf",
+  "出す条件",
+  // 箱に出す題 (#1381)
+  "title",
+  "題",
+  // 値に追随する 5 欄 (#1392)
+  "wBind",
+  "hBind",
+  "opacity",
+  "renderOffsetX",
+  "renderOffsetY",
   "位置",
   "pos",
   "posX",
@@ -1815,6 +2919,18 @@ export const INLINE_ACTOR_KEYS: ReadonlySet<string> = new Set([
   "posY",
   "posW",
   "posH",
+  // 箱の中に描く図形 (#1374)
+  "shape",
+  // その箱を出すかどうかの条件 (#1381)
+  "visibleIf",
+  // 箱に出す題 (#1381)。 名前と切り離して書ける
+  "title",
+  // 値に追随する 5 欄 (#1392)
+  "wBind",
+  "hBind",
+  "opacity",
+  "renderOffsetX",
+  "renderOffsetY",
   // 倍率は別経路 (`reportScaleOnNonPart`) が知らせる。 ここでも読める扱いにしないと
   // 同じ名前で 2 度知らせることになる
   "scale",
@@ -1834,10 +2950,28 @@ export const INLINE_ACTOR_KEYS: ReadonlySet<string> = new Set([
  * 持つ一覧が実装と drift する = 欄を足しても誰も気付けない。 表を唯一の出どころにして、
  * `FLOW_INLINE_KEYS` から一覧を導けるようにする。
  */
+const EDGE_BIND_INLINE_READERS = {
+  widthBind: (v: string | undefined) => v,
+  strokeBind: (v: string | undefined) => v,
+  dashOffsetBind: (v: string | undefined) => v,
+} as const;
+
 const FLOW_INLINE_READERS = {
   sub: (v: string | undefined) => v,
   guard: (v: string | undefined) => v,
   cardinality: (v: string | undefined) => v,
+  // 矢印がどの辺から出るか (#1385)。 描画側は 4 方向を取り、書かなければ自動で選ぶ
+  side: (v: string | undefined) =>
+    v !== undefined && (EDGE_SIDE_VALUES as readonly string[]).includes(v)
+      ? (v as "top" | "right" | "bottom" | "left")
+      : undefined,
+  /*
+   * 矢印を値に追随させる 3 欄 (#1396)。 箱の `wBind` (#1392) と同じく文字列だけを取る。
+   *
+   * ここでは字をそのまま通し、空かどうかは呼出側が知らせる (表の読み手は行番号を
+   * 持たないため、知らせを出せる場所で見る)。
+   */
+  ...EDGE_BIND_INLINE_READERS,
   // 数と真偽の欄は `FLOW_INLINE_VALUE_KINDS` の表が読む (#1306)。 ここでは名前だけを持つ =
   // 読める欄の一覧 (`FLOW_INLINE_KEYS`) は本表から導くため、載せないと欄ごと消える
   labelOffsetX: null,
@@ -1946,6 +3080,32 @@ function parseActor(line: Line, errors: DslError[]): DslActor | null {
             .filter(Boolean)
         : undefined,
       lane: opts.lane,
+      // 箱の中に描く図形 (#1374)。 パーツでは状態の上書きとして意味を持つため横取りしない
+      shape:
+        isPart || opts.shape === undefined
+          ? undefined
+          : 図形として読む(opts.shape, line.no, errors),
+      // 出す条件 (#1381)。 パーツでは状態の上書きとして意味を持つため横取りしない
+      visibleIf: isPart ? undefined : 出す条件として読む(opts.visibleIf, line.no, errors),
+      // 箱に出す題 (#1381)。 空文字も意味を持つ (題を出さない箱) ため undefined と分ける
+      title: isPart ? undefined : opts.title,
+      // 値に追随する 5 欄 (#1392)。 図形や出す条件と同じく、パーツでは状態の上書きとして
+      // 意味を持つため横取りしない
+      wBind: isPart
+        ? undefined
+        : 追随する大きさとして読む(opts.wBind, "箱の wBind ", line.no, errors),
+      hBind: isPart
+        ? undefined
+        : 追随する大きさとして読む(opts.hBind, "箱の hBind ", line.no, errors),
+      opacity: isPart
+        ? undefined
+        : 値に追随する欄として読む(opts.opacity, "箱の opacity ", line.no, errors),
+      renderOffsetX: isPart
+        ? undefined
+        : 値に追随する欄として読む(opts.renderOffsetX, "箱の renderOffsetX ", line.no, errors),
+      renderOffsetY: isPart
+        ? undefined
+        : 値に追随する欄として読む(opts.renderOffsetY, "箱の renderOffsetY ", line.no, errors),
       ...表で読む(ACTOR_INLINE_VALUE_KINDS, opts, "箱の ", line.no, errors),
       // parts では `tone` を状態の上書きとして従来から使えるため、 色として横取りしない
       tone: isPart ? undefined : resolveTone(opts.tone),
@@ -2024,21 +3184,60 @@ function parseFlowStep(line: Line, no: number, errors: DslError[]): DslStep | nu
   // 欄は `FLOW_INLINE_READERS` の表から読む。 個別に並べると一覧が実装と drift する
   const 中括弧: Partial<Record<keyof typeof FLOW_INLINE_READERS, unknown>> = {};
   // inline option (`{ ... }`) を末尾から抽出
-  const mapMatch = rest.match(/\s*\{([^}]*)\}\s*$/);
+  const 塊 = 末尾の中括弧を切り出す(rest);
   let 数と真偽: 読んだ結果<typeof FLOW_INLINE_VALUE_KINDS> | undefined;
-  if (mapMatch) {
-    const opts = parseInlineMapping(mapMatch[1]!);
+  if (塊) {
+    const opts = parseInlineMapping(塊.中身);
+    // `parseInlineMapping` は値が 1 文字もない `widthBind:` を拾わない。 3 欄は空を
+    // 「書かなかった」扱いにせず知らせる契約なので、書かれた値を空も含めて上書きする。
+    // 同じ欄を複数回書いた時は通常の mapping と同じく後勝ちにする。
+    for (const field of splitInlineFields(塊.中身)) {
+      const idx = field.indexOf(":");
+      if (idx < 0) continue;
+      const key = field.slice(0, idx).trim();
+      if (!Object.hasOwn(EDGE_BIND_INLINE_READERS, key)) continue;
+      opts[key] = stripQuotes(field.slice(idx + 1).trim());
+    }
     // 文字列の欄はそのまま入れ、数と真偽の欄は表が読んで読めない値を知らせる (#1306)
     for (const k of FLOW_INLINE_KEYS) {
-      if (FLOW_INLINE_READERS[k] === null) continue;
-      中括弧[k] = opts[k];
+      const 読み手 = FLOW_INLINE_READERS[k];
+      if (読み手 === null) continue;
+      中括弧[k] = 読み手(opts[k]);
+    }
+    if (opts.side !== undefined && 中括弧.side === undefined) {
+      errors.push({
+        line: line.no,
+        message: `矢印の side が読めません: "${opts.side}"`,
+        hint: `使える値 = ${EDGE_SIDE_VALUES.join(", ")}`,
+      });
     }
     数と真偽 = 表で読む(FLOW_INLINE_VALUE_KINDS, opts, "矢印の ", line.no, errors);
-    rest = rest.slice(0, mapMatch.index ?? 0).trim();
+    rest = 塊.前.trim();
   }
   const sub = 中括弧.sub as string | undefined;
   const guard = 中括弧.guard as string | undefined;
   const cardinality = 中括弧.cardinality as string | undefined;
+  const side = 中括弧.side as "top" | "right" | "bottom" | "left" | undefined;
+  // 値に追随する 3 欄 (#1396)。 空は捨てずに知らせる = 描画側は空文字を既定値へ落とさず
+  // そのまま置換に使うため、書き忘れが「線が消えた」 形で出る
+  const widthBind = 追随する大きさとして読む(
+    中括弧.widthBind as string | undefined,
+    "矢印の widthBind ",
+    line.no,
+    errors,
+  );
+  const strokeBind = 追随する大きさとして読む(
+    中括弧.strokeBind as string | undefined,
+    "矢印の strokeBind ",
+    line.no,
+    errors,
+  );
+  const dashOffsetBind = 追随する大きさとして読む(
+    中括弧.dashOffsetBind as string | undefined,
+    "矢印の dashOffsetBind ",
+    line.no,
+    errors,
+  );
   const labelOffsetX = 数と真偽?.labelOffsetX;
   const labelOffsetY = 数と真偽?.labelOffsetY;
   const overlay = 数と真偽?.overlay;
@@ -2098,6 +3297,10 @@ function parseFlowStep(line: Line, no: number, errors: DslError[]): DslStep | nu
     sub,
     guard,
     cardinality,
+    side,
+    widthBind,
+    strokeBind,
+    dashOffsetBind,
     labelOffsetX,
     labelOffsetY,
     overlay,
@@ -2220,7 +3423,15 @@ function ensureAnimate(a: DslAnimate | undefined, lineNo: number): DslAnimate {
  * (#1330)。 段の項目と値は階層が違うので衝突しないが、同じ語が 2 つの意味で並ぶと
  * 見本を読む人が階層から意味を判断することになる。
  */
-export const PHASE_ITEM_WORDS = ["focus", "badge", "body", "description", "tween", "set", "draw"] as const;
+export const PHASE_ITEM_WORDS = [
+  "focus",
+  "badge",
+  "body",
+  "description",
+  "tween",
+  "set",
+  "draw",
+] as const;
 
 const 段の項目の英語 = PHASE_ITEM_WORDS;
 const 段の項目の集合: ReadonlySet<string> = new Set(PHASE_ITEM_WORDS);