@cardenelabs/dragon 0.13.0 → 0.15.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,8 +56,13 @@ import type {
   DslAxes,
   DslDocument,
   DslActor,
+  DslNodeKind,
   DslDynShape,
   DslReadout,
+  DslInput,
+  DslFormula,
+  DslEventBinding,
+  DslScrollTrigger,
   DslActorNodeOverride,
   DslStep,
   DslAnimate,
@@ -102,6 +107,14 @@ export const TOP_LEVEL_KEYS = [
   "axes",
   // 値を見せる部品 (#1374)
   "readouts",
+  // 読む人が動かすつまみ (#1389)
+  "inputs",
+  // つまみの値から決まる値 (#1391)
+  "formulas",
+  // 押下などの出来事で動く仕掛け (#1393)
+  "events",
+  // 巻き上げに応じて進む値 (#1393)
+  "scrolls",
 ] as const;
 
 /**
@@ -170,6 +183,54 @@ function 名前と中括弧に割る(行: string): [string, string] | undefined
   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);
 }
@@ -202,10 +263,13 @@ const NODE_KIND_DEFAULT: NodeKind = "actor";
  * 記法だけが持つ種類。 描画側には無いが、 図種ごとの組み立てで意味を持つ。
  *
  * `contract` / `eoa` / `multisig` / `proxy` / `library` / `interface` は Solidity 図の
- * 役割分けに、 `entity` / `state` は ER 図と状態遷移図に使う。 組み立ての段階で描画できる
- * 種類に置き換わるため、 そのまま描画側に渡ることはない。
+ * 役割分けに、 `entity` / `state` は ER 図と状態遷移図に使う。
+ *
+ * **描画側へ渡す前に必ず読み替える** (`compile.ts` の `描ける種別`)。 読み替えを通さずに渡すと
+ * 図の組み立てが落ちる = 描画側は知らない種類の大きさを引けない (#1420 で実測、
+ * `Cannot read properties of undefined (reading 'h')`)。
  */
-const DSL_ONLY_KINDS = [
+export const DSL_ONLY_KINDS = [
   "entity",
   "state",
   "contract",
@@ -216,6 +280,9 @@ const DSL_ONLY_KINDS = [
   "interface",
 ] as const;
 
+/** 記法だけが持つ種類。 描画側の `NodeKind` には含まれない */
+export type DslOnlyKind = (typeof DSL_ONLY_KINDS)[number];
+
 /**
  * AWS などの固有名を、 同じ役割を表す汎用の種類に読み替える表。
  *
@@ -333,6 +400,11 @@ export function parseTextDslV05(src: string): V05ParseResult {
   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;
@@ -626,6 +698,123 @@ export function parseTextDslV05(src: string): V05ParseResult {
       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);
@@ -669,6 +858,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 {
@@ -685,6 +888,10 @@ export function parseTextDslV05(src: string): V05ParseResult {
       viewport,
       lanes: lanesMap,
       readouts: readoutsList,
+      inputs: inputsList,
+      formulas: formulasList,
+      events: eventsList,
+      scrolls: scrollsList,
       groups: groupsMap,
       pos: { line: 1 },
     },
@@ -882,15 +1089,16 @@ function classifyValues(values: string[], line: number, errors: DslError[]): Act
 }
 
 /**
- * 書かれた種類名を、 描画できる種類に解決する。
+ * 書かれた種類名を、 記法が扱う種類に解決する。
  *
- * 固有名 (`lambda` / `rds` 等) は読み替え表を通す。 それ以外はそのまま返す。
+ * 固有名 (`lambda` / `rds` 等) は読み替え表を通す。 記法だけが持つ種類はそのまま返し、
+ * 描画側へ渡す時に `compile.ts` の `描ける種別` が読み替える。
  */
-export function resolveNodeKind(raw: string): NodeKind {
+export function resolveNodeKind(raw: string): DslNodeKind {
   if (raw === "") return NODE_KIND_DEFAULT;
   // `Object.hasOwn` で引く。 素の添字だと `toString` 等の既定の持ち物が引けてしまい、
   // 種類として関数が返る。 呼ぶ前に受理集合で弾いてはいるが、 表を引く側でも閉じておく。
-  return Object.hasOwn(INFRA_KIND_ALIAS, raw) ? INFRA_KIND_ALIAS[raw]! : (raw as NodeKind);
+  return Object.hasOwn(INFRA_KIND_ALIAS, raw) ? INFRA_KIND_ALIAS[raw]! : (raw as DslNodeKind);
 }
 
 function numberOrUndef(s: string | undefined): number | undefined {
@@ -1109,6 +1317,18 @@ export const 図形の表: Record<string, 図形の定義> = {
  */
 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]` の形を文字列の並びに読む */
@@ -1266,6 +1486,25 @@ function 表に従って読む(
       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[欄] = 組;
@@ -1336,6 +1575,86 @@ function 出す条件として読む(
   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` を返す。
  *
@@ -1346,7 +1665,7 @@ function 図形として読む(raw: string, line: number, errors: DslError[]): D
   const 中身 = raw.trim().replace(/^\{|\}$/g, "");
   const opts = parseInlineMapping(中身);
   const kind = (opts.kind ?? "").toLowerCase();
-  const 定義 = 図形の表[kind];
+  const 定義 = 表から定義を引く(図形の表, kind);
   if (定義 === undefined) {
     errors.push({
       line,
@@ -1371,7 +1690,7 @@ function 部品として読む(
 ): DslReadout | undefined {
   const opts = parseInlineMapping(raw);
   const kind = (opts.kind ?? "").toLowerCase();
-  const 定義 = 部品の表[kind];
+  const 定義 = 表から定義を引く(部品の表, kind);
   if (定義 === undefined) {
     errors.push({
       line,
@@ -1386,6 +1705,260 @@ function 部品として読む(
   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: "数",
@@ -1747,6 +2320,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(":");
@@ -1762,7 +2341,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);
@@ -1807,6 +2388,23 @@ function applyContinuationLines(actor: DslActor, rest: Line[], errors: DslError[
       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
@@ -1924,9 +2522,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) {
@@ -1963,6 +2583,12 @@ export const ACTOR_ITEM_KEYS: ReadonlySet<string> = new Set([
   // 箱に出す題 (#1381)
   "title",
   "題",
+  // 値に追随する 5 欄 (#1392)
+  "wBind",
+  "hBind",
+  "opacity",
+  "renderOffsetX",
+  "renderOffsetY",
   "位置",
   "pos",
   "posX",
@@ -2307,6 +2933,12 @@ export const INLINE_ACTOR_KEYS: ReadonlySet<string> = new Set([
   "visibleIf",
   // 箱に出す題 (#1381)。 名前と切り離して書ける
   "title",
+  // 値に追随する 5 欄 (#1392)
+  "wBind",
+  "hBind",
+  "opacity",
+  "renderOffsetX",
+  "renderOffsetY",
   // 倍率は別経路 (`reportScaleOnNonPart`) が知らせる。 ここでも読める扱いにしないと
   // 同じ名前で 2 度知らせることになる
   "scale",
@@ -2326,6 +2958,12 @@ 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,
@@ -2335,6 +2973,13 @@ const FLOW_INLINE_READERS = {
     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,
@@ -2452,6 +3097,23 @@ function parseActor(line: Line, errors: DslError[]): DslActor | null {
       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),
@@ -2530,10 +3192,20 @@ 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) {
       const 読み手 = FLOW_INLINE_READERS[k];
@@ -2548,12 +3220,32 @@ function parseFlowStep(line: Line, no: number, errors: DslError[]): DslStep | nu
       });
     }
     数と真偽 = 表で読む(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;
@@ -2614,6 +3306,9 @@ function parseFlowStep(line: Line, no: number, errors: DslError[]): DslStep | nu
     guard,
     cardinality,
     side,
+    widthBind,
+    strokeBind,
+    dashOffsetBind,
     labelOffsetX,
     labelOffsetY,
     overlay,