@cardenelabs/dragon 0.13.0 → 0.14.0

package/dist/index.js

@@ -1,4 +1,4 @@
-import { NODE_KINDS, TONES, layout, applyDerivedValues, diagram, rendersRows, requiredRowsHeight, requiredRowsWidth, sequence, flow, swimlane, er, stateMachine, topology, parseFormula } from '@cardenelabs/cdl';
+import { NODE_KINDS, TONES, parseFormula, extractIdentifiers, inputDefaultValue, layout, applyDerivedValues, diagram, rendersRows, requiredRowsHeight, requiredRowsWidth, sequence, flow, swimlane, er, stateMachine, topology } from '@cardenelabs/cdl';
 
 // src/keywords.ts
 var HEADERS = {
@@ -1752,6 +1752,135 @@ var \u90E8\u54C1\u306E\u7D44\u306E\u8868 = {
   }
 };
 
+// src/v05/input-table.generated.ts
+var \u3064\u307E\u307F\u306E\u8868 = {
+  color: {
+    \u5FC5\u9808: ["defaultValue"],
+    \u6B04: {
+      defaultValue: "\u6587\u5B57\u5217",
+      label: "\u6587\u5B57\u5217"
+    }
+  },
+  datetime: {
+    \u5FC5\u9808: ["defaultValue"],
+    \u6B04: {
+      defaultValue: "\u6587\u5B57\u5217",
+      label: "\u6587\u5B57\u5217"
+    }
+  },
+  dropdown: {
+    \u5FC5\u9808: ["options", "defaultValue"],
+    \u6B04: {
+      options: "\u6587\u5B57\u5217\u306E\u4E26\u3073",
+      defaultValue: "\u6587\u5B57\u5217",
+      label: "\u6587\u5B57\u5217"
+    }
+  },
+  "multi-select": {
+    \u5FC5\u9808: ["options", "defaultValues"],
+    \u6B04: {
+      options: "\u6587\u5B57\u5217\u306E\u4E26\u3073",
+      defaultValues: "\u6587\u5B57\u5217\u306E\u4E26\u3073",
+      label: "\u6587\u5B57\u5217"
+    }
+  },
+  number: {
+    \u5FC5\u9808: ["defaultValue"],
+    \u6B04: {
+      min: "\u6570",
+      max: "\u6570",
+      defaultValue: "\u6570",
+      label: "\u6587\u5B57\u5217"
+    }
+  },
+  radio: {
+    \u5FC5\u9808: ["options", "defaultValue"],
+    \u6B04: {
+      options: "\u6587\u5B57\u5217\u306E\u4E26\u3073",
+      defaultValue: "\u6587\u5B57\u5217",
+      label: "\u6587\u5B57\u5217"
+    }
+  },
+  range: {
+    \u5FC5\u9808: ["min", "max", "defaultLo", "defaultHi"],
+    \u6B04: {
+      min: "\u6570",
+      max: "\u6570",
+      step: "\u6570",
+      defaultLo: "\u6570",
+      defaultHi: "\u6570",
+      label: "\u6587\u5B57\u5217"
+    }
+  },
+  slider: {
+    \u5FC5\u9808: ["min", "max", "defaultValue"],
+    \u6B04: {
+      min: "\u6570",
+      max: "\u6570",
+      step: "\u6570",
+      defaultValue: "\u6570",
+      label: "\u6587\u5B57\u5217"
+    }
+  },
+  stepper: {
+    \u5FC5\u9808: ["defaultValue"],
+    \u6B04: {
+      min: "\u6570",
+      max: "\u6570",
+      step: "\u6570",
+      defaultValue: "\u6570",
+      label: "\u6587\u5B57\u5217"
+    }
+  },
+  tabs: {
+    \u5FC5\u9808: ["options", "defaultValue"],
+    \u6B04: {
+      options: "\u6587\u5B57\u5217\u306E\u4E26\u3073",
+      defaultValue: "\u6587\u5B57\u5217",
+      label: "\u6587\u5B57\u5217"
+    }
+  },
+  text: {
+    \u5FC5\u9808: ["defaultValue"],
+    \u6B04: {
+      defaultValue: "\u6587\u5B57\u5217",
+      placeholder: "\u6587\u5B57\u5217",
+      maxLength: "\u6570",
+      label: "\u6587\u5B57\u5217"
+    }
+  },
+  timeline: {
+    \u5FC5\u9808: ["duration"],
+    \u6B04: {
+      duration: "\u6570",
+      autoplay: "\u771F\u507D",
+      loop: "\u771F\u507D",
+      speeds: "\u6570\u306E\u4E26\u3073",
+      defaultSpeedIdx: "\u6570",
+      label: "\u6587\u5B57\u5217"
+    }
+  },
+  toggle: {
+    \u5FC5\u9808: ["defaultValue"],
+    \u6B04: {
+      defaultValue: "\u771F\u507D",
+      label: "\u6587\u5B57\u5217"
+    }
+  },
+  xypad: {
+    \u5FC5\u9808: ["xMin", "xMax", "yMin", "yMax", "defaultX", "defaultY"],
+    \u6B04: {
+      xMin: "\u6570",
+      xMax: "\u6570",
+      yMin: "\u6570",
+      yMax: "\u6570",
+      defaultX: "\u6570",
+      defaultY: "\u6570",
+      label: "\u6587\u5B57\u5217"
+    }
+  }
+};
+
 // src/v05/parser.ts
 var EDGE_SIDE_VALUES = ["top", "right", "bottom", "left"];
 var TOP_LEVEL_KEYS = [
@@ -1770,7 +1899,15 @@ var TOP_LEVEL_KEYS = [
   // 2 軸で仕分ける図の軸の名前 (#1251)
   "axes",
   // 値を見せる部品 (#1374)
-  "readouts"
+  "readouts",
+  // 読む人が動かすつまみ (#1389)
+  "inputs",
+  // つまみの値から決まる値 (#1391)
+  "formulas",
+  // 押下などの出来事で動く仕掛け (#1393)
+  "events",
+  // 巻き上げに応じて進む値 (#1393)
+  "scrolls"
 ];
 var LANE_ID_ENTRY = /^([\p{L}\p{N}_-]+)\s*:\s*\{([^}]*)\}\s*$/u;
 function \u540D\u524D\u3068\u4E2D\u62EC\u5F27\u306B\u5272\u308B(\u884C) {
@@ -1808,6 +1945,39 @@ function \u540D\u524D\u3068\u4E2D\u62EC\u5F27\u306B\u5272\u308B(\u884C) {
   }
   return void 0;
 }
+function \u672B\u5C3E\u306E\u4E2D\u62EC\u5F27\u3092\u5207\u308A\u51FA\u3059(rest) {
+  const t = rest.trimEnd();
+  if (!t.endsWith("}")) return void 0;
+  let \u6DF1\u3055 = 0;
+  let \u5F15\u7528 = null;
+  let \u76F4\u524D = null;
+  let \u59CB = -1;
+  for (let i = 0; i < t.length; i += 1) {
+    const c = t[i];
+    if (\u5F15\u7528 !== null) {
+      if (\u5F15\u7528 === '"' && c === "\\" && i + 1 < t.length) {
+        i += 1;
+        continue;
+      }
+      if (c === \u5F15\u7528) \u5F15\u7528 = null;
+      continue;
+    }
+    if ((c === '"' || c === "'") && (\u76F4\u524D === null || ":,{[".includes(\u76F4\u524D))) {
+      \u5F15\u7528 = c;
+      \u76F4\u524D = c;
+      continue;
+    }
+    if (c === "{") {
+      if (\u6DF1\u3055 === 0) \u59CB = i;
+      \u6DF1\u3055 += 1;
+    } else if (c === "}") {
+      \u6DF1\u3055 -= 1;
+      if (\u6DF1\u3055 === 0 && i === t.length - 1) return { \u524D: t.slice(0, \u59CB), \u4E2D\u8EAB: t.slice(\u59CB + 1, i) };
+    }
+    if (!/\s/u.test(c)) \u76F4\u524D = c;
+  }
+  return void 0;
+}
 function isTopLevelKey(key) {
   return TOP_LEVEL_KEYS.includes(key);
 }
@@ -1901,6 +2071,11 @@ function parseTextDslV05(src) {
   let viewport = void 0;
   let lanesMap = void 0;
   let readoutsList = void 0;
+  let inputsList = void 0;
+  let formulasList = void 0;
+  let eventsList = void 0;
+  let scrollsList = void 0;
+  let scrollLines = /* @__PURE__ */ new Map();
   let groupsMap = void 0;
   let i = 0;
   while (i < lines.length) {
@@ -2160,6 +2335,112 @@ function parseTextDslV05(src) {
       i = next;
       continue;
     }
+    if (head.key === "inputs") {
+      if (head.value !== null && head.value.trim() !== "") {
+        errors.push({
+          line: line.no,
+          message: "inputs \u306F 1 \u884C\u306B\u307E\u3068\u3081\u3066\u66F8\u3051\u306A\u3044",
+          hint: "\u6B21\u306E\u884C\u304B\u3089\u5B57\u4E0B\u3052\u3057\u3066 `value: { kind: slider, min: 0, max: 100, defaultValue: 50 }` \u306E\u5F62\u3067\u4E26\u3079\u308B"
+        });
+        i += 1;
+        continue;
+      }
+      const { items, next } = collectIndentedRaw(lines, i + 1, line.indent);
+      inputsList = [];
+      for (const it of items) {
+        const m = \u540D\u524D\u3068\u4E2D\u62EC\u5F27\u306B\u5272\u308B(it.trimmed);
+        if (m) {
+          const \u8AAD\u3081\u305F = \u3064\u307E\u307F\u3068\u3057\u3066\u8AAD\u3080(m[0], m[1], it.no, errors);
+          if (\u8AAD\u3081\u305F) inputsList.push(\u8AAD\u3081\u305F);
+        } 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") {
+      if (head.value !== null && head.value.trim() !== "") {
+        errors.push({
+          line: line.no,
+          message: "formulas \u306F 1 \u884C\u306B\u307E\u3068\u3081\u3066\u66F8\u3051\u306A\u3044",
+          hint: '\u5F0F\u306B `,` \u304C\u5165\u308B\u305F\u3081\u3002 \u6B21\u306E\u884C\u304B\u3089\u5B57\u4E0B\u3052\u3057\u3066 `doubled: "input * 2"` \u306E\u5F62\u3067\u4E26\u3079\u308B'
+        });
+        i += 1;
+        continue;
+      }
+      const { items, next } = collectIndentedRaw(lines, i + 1, line.indent);
+      formulasList = [];
+      for (const it of items) {
+        const f = \u5F0F\u3068\u3057\u3066\u8AAD\u3080(it.trimmed.replace(/^-\s*/, ""), it.no, errors);
+        if (f) formulasList.push(f);
+      }
+      i = next;
+      continue;
+    }
+    if (head.key === "events") {
+      if (head.value !== null && head.value.trim() !== "") {
+        errors.push({
+          line: line.no,
+          message: "events \u306F 1 \u884C\u306B\u307E\u3068\u3081\u3066\u66F8\u3051\u306A\u3044",
+          hint: "\u6B21\u306E\u884C\u304B\u3089\u5B57\u4E0B\u3052\u3057\u3066 `- { on: click, box: Button, handler: toggle }` \u306E\u5F62\u3067\u4E26\u3079\u308B"
+        });
+        i += 1;
+        continue;
+      }
+      const { items, next } = collectIndentedRaw(lines, i + 1, line.indent);
+      eventsList = [];
+      for (const it of items) {
+        const e = \u51FA\u6765\u4E8B\u3068\u3057\u3066\u8AAD\u3080(it.trimmed.replace(/^-\s*/, ""), it.no, errors);
+        if (e) eventsList.push(e);
+      }
+      i = next;
+      continue;
+    }
+    if (head.key === "scrolls") {
+      if (head.value !== null && head.value.trim() !== "") {
+        errors.push({
+          line: line.no,
+          message: "scrolls \u306F 1 \u884C\u306B\u307E\u3068\u3081\u3066\u66F8\u3051\u306A\u3044",
+          hint: "\u6B21\u306E\u884C\u304B\u3089\u5B57\u4E0B\u3052\u3057\u3066 `intro: { start: 0.9, end: 0.1 }` \u306E\u5F62\u3067\u4E26\u3079\u308B"
+        });
+        i += 1;
+        continue;
+      }
+      const { items, next } = collectIndentedRaw(lines, i + 1, line.indent);
+      scrollsList = [];
+      scrollLines = /* @__PURE__ */ new Map();
+      for (const it of items) {
+        const m = \u540D\u524D\u3068\u4E2D\u62EC\u5F27\u306B\u5272\u308B(it.trimmed);
+        if (m) {
+          const \u8AAD\u3081\u305F = \u5DFB\u304D\u4E0A\u3052\u3068\u3057\u3066\u8AAD\u3080(m[0], m[1], it.no, errors);
+          if (\u8AAD\u3081\u305F) {
+            if (scrollLines.has(\u8AAD\u3081\u305F.id)) {
+              errors.push({
+                line: it.no,
+                message: `\u5DFB\u304D\u4E0A\u3052\u306E\u540D\u524D "${\u8AAD\u3081\u305F.id}" \u304C\u91CD\u8907\u3057\u3066\u3044\u307E\u3059`,
+                hint: "scrolls \u306E\u540D\u524D\u306F 1 \u5EA6\u3060\u3051\u66F8\u304F"
+              });
+            } else {
+              scrollsList.push(\u8AAD\u3081\u305F);
+              scrollLines.set(\u8AAD\u3081\u305F.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") {
       const { items, next } = collectIndentedList(lines, i + 1, line.indent);
       groupsMap = {};
@@ -2196,6 +2477,18 @@ function parseTextDslV05(src) {
       message: "type is required",
       hint: "add `type: sequence|flow|swimlane|er|state|topology|solidity|gantt|class|pie|c4|mind`"
     });
+  const \u65E2\u306B\u5024\u3092\u4F5C\u308B\u540D\u524D = /* @__PURE__ */ new Set([
+    ...(inputsList ?? []).map((input) => input.id),
+    ...(formulasList ?? []).map((formula) => formula.id)
+  ]);
+  for (const scroll of scrollsList ?? []) {
+    if (!\u65E2\u306B\u5024\u3092\u4F5C\u308B\u540D\u524D.has(scroll.id)) continue;
+    errors.push({
+      line: scrollLines.get(scroll.id) ?? 1,
+      message: `\u5DFB\u304D\u4E0A\u3052\u306E\u540D\u524D "${scroll.id}" \u304C inputs \u307E\u305F\u306F formulas \u3068\u91CD\u306A\u3063\u3066\u3044\u307E\u3059`,
+      hint: "inputs / formulas / scrolls \u3067\u306F\u91CD\u306A\u3089\u306A\u3044\u540D\u524D\u3092\u4F7F\u3046"
+    });
+  }
   if (errors.length > 0) return { ok: false, errors };
   return {
     ok: true,
@@ -2211,6 +2504,10 @@ function parseTextDslV05(src) {
       viewport,
       lanes: lanesMap,
       readouts: readoutsList,
+      inputs: inputsList,
+      formulas: formulasList,
+      events: eventsList,
+      scrolls: scrollsList,
       groups: groupsMap,
       pos: { line: 1 }
     }
@@ -2563,6 +2860,18 @@ function \u8868\u306B\u5F93\u3063\u3066\u8AAD\u3080(\u5B9A\u7FA9, opts, \u63A5\u
       out[\u6B04] = n !== void 0 ? n : \u5024;
     } else if (\u5F62 === "\u6587\u5B57\u5217\u306E\u4E26\u3073") {
       out[\u6B04] = \u4E26\u3073\u3068\u3057\u3066\u8AAD\u3080(\u5024);
+    } else if (\u5F62 === "\u6570\u306E\u4E26\u3073") {
+      const \u751F = \u4E26\u3073\u3068\u3057\u3066\u8AAD\u3080(\u5024);
+      const \u6570 = \u751F.map((x) => numberOrUndef(x));
+      if (\u6570.some((n) => n === void 0)) {
+        errors.push({
+          line,
+          message: `${\u63A5\u982D}${\u6B04} \u306B\u6570\u3067\u306A\u3044\u5024\u304C\u3042\u308A\u307E\u3059: "${\u5024}"`,
+          hint: "`[0.5, 1, 2, 4]` \u306E\u5F62\u3067\u6570\u3060\u3051\u3092\u4E26\u3079\u308B"
+        });
+      } else {
+        out[\u6B04] = \u6570;
+      }
     } else if (\u5F62 === "\u7D44\u306E\u4E26\u3073") {
       const \u7D44 = \u7D44\u306E\u4E26\u3073\u3068\u3057\u3066\u8AAD\u3080(\u5024);
       if (\u7D44 !== void 0) out[\u6B04] = \u7D44;
@@ -2619,11 +2928,49 @@ function \u51FA\u3059\u6761\u4EF6\u3068\u3057\u3066\u8AAD\u3080(raw, line, error
   }
   return \u5024;
 }
+function \u5024\u306B\u8FFD\u968F\u3059\u308B\u6B04\u3068\u3057\u3066\u8AAD\u3080(raw, \u63A5\u982D, line, errors) {
+  if (raw === void 0) return void 0;
+  const \u5024 = raw.trim();
+  if (\u5024 === "") {
+    errors.push({
+      line,
+      message: `${\u63A5\u982D}\u304C\u7A7A\u3067\u3059`,
+      hint: '`{\u72B6\u614B\u306E\u540D\u524D}` \u304B\u6570\u3092\u66F8\u304F (\u4F8B `opacity: "{fade}"` / `opacity: 0.5`)'
+    });
+    return void 0;
+  }
+  const n = numberOrUndef(\u5024);
+  return n !== void 0 ? n : \u5024;
+}
+function \u8FFD\u968F\u3059\u308B\u5927\u304D\u3055\u3068\u3057\u3066\u8AAD\u3080(raw, \u63A5\u982D, line, errors) {
+  if (raw === void 0) return void 0;
+  const \u5024 = raw.trim();
+  if (\u5024 === "") {
+    errors.push({
+      line,
+      message: `${\u63A5\u982D}\u304C\u7A7A\u3067\u3059`,
+      hint: '`{\u72B6\u614B\u306E\u540D\u524D}` \u3092\u66F8\u304F (\u4F8B `wBind: "{barW}"`)'
+    });
+    return void 0;
+  }
+  return \u5024;
+}
+var \u5024\u306B\u8FFD\u968F\u3059\u308B\u7BB1\u306E\u6B04 = [
+  "wBind",
+  "hBind",
+  "opacity",
+  "renderOffsetX",
+  "renderOffsetY"
+];
+var \u7A7A\u3092\u77E5\u3089\u305B\u308B\u7BB1\u306E\u6B04 = new Set(\u5024\u306B\u8FFD\u968F\u3059\u308B\u7BB1\u306E\u6B04);
+function \u8868\u304B\u3089\u5B9A\u7FA9\u3092\u5F15\u304F(\u8868, kind) {
+  return Object.hasOwn(\u8868, kind) ? \u8868[kind] : void 0;
+}
 function \u56F3\u5F62\u3068\u3057\u3066\u8AAD\u3080(raw, line, errors) {
   const \u4E2D\u8EAB = raw.trim().replace(/^\{|\}$/g, "");
   const opts = parseInlineMapping(\u4E2D\u8EAB);
   const kind = (opts.kind ?? "").toLowerCase();
-  const \u5B9A\u7FA9 = \u56F3\u5F62\u306E\u8868[kind];
+  const \u5B9A\u7FA9 = \u8868\u304B\u3089\u5B9A\u7FA9\u3092\u5F15\u304F(\u56F3\u5F62\u306E\u8868, kind);
   if (\u5B9A\u7FA9 === void 0) {
     errors.push({
       line,
@@ -2639,7 +2986,7 @@ function \u56F3\u5F62\u3068\u3057\u3066\u8AAD\u3080(raw, line, errors) {
 function \u90E8\u54C1\u3068\u3057\u3066\u8AAD\u3080(id, raw, line, errors) {
   const opts = parseInlineMapping(raw);
   const kind = (opts.kind ?? "").toLowerCase();
-  const \u5B9A\u7FA9 = \u90E8\u54C1\u306E\u8868[kind];
+  const \u5B9A\u7FA9 = \u8868\u304B\u3089\u5B9A\u7FA9\u3092\u5F15\u304F(\u90E8\u54C1\u306E\u8868, kind);
   if (\u5B9A\u7FA9 === void 0) {
     errors.push({
       line,
@@ -2653,6 +3000,194 @@ function \u90E8\u54C1\u3068\u3057\u3066\u8AAD\u3080(id, raw, line, errors) {
   for (const \u6B04 of \u5B9A\u7FA9.\u5FC5\u9808) if (\u8AAD\u3081\u305F[\u6B04] === void 0) return void 0;
   return { id, kind, ...\u8AAD\u3081\u305F };
 }
+var EVENT_KINDS = [
+  "click",
+  "hover",
+  "double-click",
+  "long-press",
+  "drag",
+  "drop",
+  "keydown",
+  "focus",
+  "blur"
+];
+var EVENT_TARGET_KEYS = ["box", "lane", "arrow", "diagram"];
+function \u51FA\u6765\u4E8B\u3068\u3057\u3066\u8AAD\u3080(raw, line, errors) {
+  const t = raw.trim();
+  if (!t.startsWith("{") || !t.endsWith("}")) {
+    errors.push({
+      line,
+      message: `\u51FA\u6765\u4E8B\u306E\u884C\u304C\u8AAD\u3081\u307E\u305B\u3093: "${t}"`,
+      hint: "`- { on: click, box: Button, handler: toggle }` \u306E\u5F62\u3067\u66F8\u304F"
+    });
+    return void 0;
+  }
+  const opts = parseInlineMapping(t.slice(1, -1));
+  for (const k of Object.keys(opts)) {
+    if (k === "on" || k === "handler" || EVENT_TARGET_KEYS.includes(k))
+      continue;
+    errors.push({
+      line,
+      message: `\u51FA\u6765\u4E8B\u306E\u9805\u76EE\u540D\u304C\u8AAD\u3081\u307E\u305B\u3093: "${k}"`,
+      hint: `\u4F7F\u3048\u308B\u9805\u76EE = on, handler, ${EVENT_TARGET_KEYS.join(", ")}`
+    });
+    return void 0;
+  }
+  const on = opts.on ?? "";
+  if (!EVENT_KINDS.includes(on)) {
+    errors.push({
+      line,
+      message: `\u51FA\u6765\u4E8B\u306E\u7A2E\u985E\u304C\u8AAD\u3081\u307E\u305B\u3093: "${on}"`,
+      hint: `\u4F7F\u3048\u308B\u7A2E\u985E = ${EVENT_KINDS.join(", ")}`
+    });
+    return void 0;
+  }
+  const handlerId = (opts.handler ?? "").trim();
+  if (handlerId === "") {
+    errors.push({
+      line,
+      message: "\u51FA\u6765\u4E8B\u306E handler \u304C\u7A7A\u3067\u3059",
+      hint: "`handler: toggle-active` \u306E\u3088\u3046\u306B\u3001\u547C\u3073\u51FA\u3059\u4ED5\u639B\u3051\u306E\u540D\u524D\u3092\u66F8\u304F"
+    });
+    return void 0;
+  }
+  const \u66F8\u3044\u305F\u76F8\u624B = EVENT_TARGET_KEYS.filter((k) => opts[k] !== void 0);
+  if (\u66F8\u3044\u305F\u76F8\u624B.length !== 1) {
+    errors.push({
+      line,
+      message: \u66F8\u3044\u305F\u76F8\u624B.length === 0 ? "\u51FA\u6765\u4E8B\u306E\u76F8\u624B\u304C\u66F8\u304B\u308C\u3066\u3044\u307E\u305B\u3093" : `\u51FA\u6765\u4E8B\u306E\u76F8\u624B\u3092 2 \u3064\u4EE5\u4E0A\u66F8\u3044\u3066\u3044\u307E\u3059: ${\u66F8\u3044\u305F\u76F8\u624B.join(", ")}`,
+      hint: `${EVENT_TARGET_KEYS.join(" / ")} \u306E\u3069\u308C\u304B 1 \u3064\u3060\u3051\u3092\u66F8\u304F`
+    });
+    return void 0;
+  }
+  const \u9375 = \u66F8\u3044\u305F\u76F8\u624B[0];
+  const \u5024 = (opts[\u9375] ?? "").trim();
+  let target;
+  if (\u9375 === "diagram") {
+    if (\u5024 !== "true") {
+      errors.push({
+        line,
+        message: `\u51FA\u6765\u4E8B\u306E diagram \u304C\u8AAD\u3081\u307E\u305B\u3093: "${\u5024}"`,
+        hint: "\u56F3\u5168\u4F53\u3092\u6307\u3059\u6642\u306F `diagram: true` \u3068\u66F8\u304F"
+      });
+      return void 0;
+    }
+    target = { kind: "diagram" };
+  } else if (\u9375 === "arrow") {
+    const m = \u5024.split("->");
+    if (m.length !== 2 || m[0].trim() === "" || m[1].trim() === "") {
+      errors.push({
+        line,
+        message: `\u51FA\u6765\u4E8B\u306E\u77E2\u5370\u304C\u8AAD\u3081\u307E\u305B\u3093: "${\u5024}"`,
+        hint: "`arrow: A -> B` \u306E\u5F62\u3067\u3001\u77E2\u5370\u306E\u4E21\u7AEF\u306E\u540D\u524D\u3092\u66F8\u304F"
+      });
+      return void 0;
+    }
+    target = { kind: "edge", from: stripQuotes(m[0].trim()), to: stripQuotes(m[1].trim()) };
+  } else {
+    if (\u5024 === "") {
+      errors.push({
+        line,
+        message: `\u51FA\u6765\u4E8B\u306E ${\u9375} \u304C\u7A7A\u3067\u3059`,
+        hint: "\u6307\u3059\u76F8\u624B\u306E\u540D\u524D\u3092\u66F8\u304F"
+      });
+      return void 0;
+    }
+    target = { kind: \u9375 === "box" ? "node" : "lane", name: stripQuotes(\u5024) };
+  }
+  return { event: on, target, handlerId, pos: { line } };
+}
+var SCROLL_VALUE_KINDS = {
+  start: "\u6570",
+  end: "\u6570",
+  scrub: "\u6570"
+};
+function \u5DFB\u304D\u4E0A\u3052\u3068\u3057\u3066\u8AAD\u3080(id, raw, line, errors) {
+  if (!isValueName(id)) {
+    errors.push({ line, ...valueNameIssue(id) });
+    return void 0;
+  }
+  const opts = parseInlineMapping(raw);
+  const \u4F7F\u3048\u308B = [...Object.keys(SCROLL_VALUE_KINDS), "label"];
+  for (const k of Object.keys(opts)) {
+    if (\u4F7F\u3048\u308B.includes(k)) continue;
+    errors.push({
+      line,
+      message: `\u5DFB\u304D\u4E0A\u3052 ${id} \u306E\u9805\u76EE\u540D\u304C\u8AAD\u3081\u307E\u305B\u3093: "${k}"`,
+      hint: `\u4F7F\u3048\u308B\u9805\u76EE = ${\u4F7F\u3048\u308B.join(", ")}`
+    });
+    return void 0;
+  }
+  const \u6570 = \u8868\u3067\u8AAD\u3080(SCROLL_VALUE_KINDS, opts, `\u5DFB\u304D\u4E0A\u3052 ${id} \u306E `, line, errors);
+  for (const \u6B04 of ["start", "end", "scrub"]) {
+    const \u5024 = \u6570[\u6B04];
+    if (\u5024 === void 0 || \u5024 >= 0 && \u5024 <= 1) continue;
+    errors.push({
+      line,
+      message: `\u5DFB\u304D\u4E0A\u3052 ${id} \u306E ${\u6B04} \u306F 0 \u304B\u3089 1 \u306E\u9593\u3067\u66F8\u304D\u307E\u3059: "${\u5024}"`,
+      hint: "0 \u306F\u753B\u9762\u306E\u4E0A\u7AEF\u307E\u305F\u306F\u6BB5\u968E\u7684\u306A\u8FFD\u968F\u30011 \u306F\u4E0B\u7AEF\u307E\u305F\u306F\u9023\u7D9A\u8FFD\u968F"
+    });
+  }
+  return {
+    id,
+    ...\u6570.start !== void 0 ? { start: \u6570.start } : {},
+    ...\u6570.end !== void 0 ? { end: \u6570.end } : {},
+    ...\u6570.scrub !== void 0 ? { scrub: \u6570.scrub } : {},
+    ...opts.label !== void 0 ? { label: opts.label } : {}
+  };
+}
+function \u5F0F\u3068\u3057\u3066\u8AAD\u3080(\u884C, line, errors) {
+  const c = \u884C.indexOf(":");
+  if (c < 0) {
+    errors.push({
+      line,
+      message: `\u5F0F\u306E\u884C\u304C\u8AAD\u3081\u307E\u305B\u3093: "${\u884C}"`,
+      hint: '`\u540D\u524D: "\u5F0F"` \u306E\u5F62\u3067\u66F8\u304F (\u4F8B `doubled: "input * 2"`)'
+    });
+    return void 0;
+  }
+  const \u540D\u524D = \u884C.slice(0, c).trim();
+  const \u5F0F = stripQuotes(\u884C.slice(c + 1).trim());
+  if (!isValueName(\u540D\u524D)) {
+    errors.push({ line, ...valueNameIssue(\u540D\u524D) });
+    return void 0;
+  }
+  if (\u5F0F === "") {
+    errors.push({
+      line,
+      message: `\u5F0F "${\u540D\u524D}" \u304C\u7A7A\u3067\u3059`,
+      hint: '`doubled: "input * 2"` \u306E\u3088\u3046\u306B\u5F0F\u3092\u66F8\u304F'
+    });
+    return void 0;
+  }
+  try {
+    parseFormula(\u5F0F);
+  } catch (e) {
+    errors.push({
+      line,
+      message: `\u5F0F "${\u540D\u524D}" \u3092\u8AAD\u3081\u307E\u305B\u3093: ${e.message}`,
+      hint: "\u4F7F\u3048\u308B\u306E\u306F\u56DB\u5247\u3068\u62EC\u5F27\u3001\u6BD4\u8F03\u3001\u4E09\u9805 (`a > 1 ? 2 : 3`)\u3001`Math.min` \u306A\u3069\u306E\u95A2\u6570"
+    });
+    return void 0;
+  }
+  return { id: \u540D\u524D, expression: \u5F0F, pos: { line } };
+}
+function \u3064\u307E\u307F\u3068\u3057\u3066\u8AAD\u3080(id, raw, line, errors) {
+  const opts = parseInlineMapping(raw);
+  const kind = (opts.kind ?? "").toLowerCase();
+  const \u5B9A\u7FA9 = \u8868\u304B\u3089\u5B9A\u7FA9\u3092\u5F15\u304F(\u3064\u307E\u307F\u306E\u8868, kind);
+  if (\u5B9A\u7FA9 === void 0) {
+    errors.push({
+      line,
+      message: `\u3064\u307E\u307F\u306E\u7A2E\u985E\u304C\u8AAD\u3081\u307E\u305B\u3093: "${opts.kind ?? ""}"`,
+      hint: `\u4F7F\u3048\u308B\u7A2E\u985E = ${Object.keys(\u3064\u307E\u307F\u306E\u8868).join(", ")}`
+    });
+    return void 0;
+  }
+  const \u8AAD\u3081\u305F = \u8868\u306B\u5F93\u3063\u3066\u8AAD\u3080(\u5B9A\u7FA9, opts, `\u3064\u307E\u307F ${id} \u306E `, line, errors);
+  for (const \u6B04 of \u5B9A\u7FA9.\u5FC5\u9808) if (\u8AAD\u3081\u305F[\u6B04] === void 0) return void 0;
+  return { id, kind, ...\u8AAD\u3081\u305F };
+}
 var ACTOR_NODE_VALUE_KINDS = {
   posX: "\u6570",
   posY: "\u6570",
@@ -2852,6 +3387,7 @@ function applyContinuationLines(actor, rest, errors) {
   const scaleLines = /* @__PURE__ */ new Map();
   const \u56F3\u7A2E\u3054\u3068\u306E\u6B04 = /* @__PURE__ */ new Map();
   const unknownKeys = [];
+  const \u8FFD\u968F\u3059\u308B\u6B04\u306E\u751F\u5024 = /* @__PURE__ */ new Map();
   for (const ln of rest) {
     const idx = ln.trimmed.indexOf(":");
     if (idx < 0) continue;
@@ -2864,7 +3400,7 @@ function applyContinuationLines(actor, rest, errors) {
       unknownKeys.push({ key, line: ln.no });
       continue;
     }
-    if (!raw) continue;
+    if (!raw && !\u7A7A\u3092\u77E5\u3089\u305B\u308B\u7BB1\u306E\u6B04.has(key)) continue;
     if (COLOR_KEYS.has(key)) {
       const { tone, hex } = splitColorValue(raw);
       if (tone) out.tone = tone;
@@ -2903,6 +3439,23 @@ function applyContinuationLines(actor, rest, errors) {
       case "\u984C":
         out.title = stripQuotes(raw);
         break;
+      /*
+       * 値に追随する 5 欄 (#1392)。 日本語の別名は置かない = 描画側の欄名がそのまま
+       * 状態の名前と並ぶ場所なので、英字 1 種に絞って書き方の揺れを作らない。
+       *
+       * **ここでは読まずに書かれた字だけを控える**。 見本 (parts) では同じ名前が状態の
+       * 上書きになり、中括弧の形は生の字を `coerceStateValue` に通す。 ここで先に読むと
+       * `wBind: 120` が中括弧では数、縦に並べると文字列になって書き方で割れる。
+       * 見本かどうかは `kind` で決まり、それが後ろの行に書かれることがあるため、
+       * 全行を読み終えてから振り分ける。
+       */
+      case "wBind":
+      case "hBind":
+      case "opacity":
+      case "renderOffsetX":
+      case "renderOffsetY":
+        \u8FFD\u968F\u3059\u308B\u6B04\u306E\u751F\u5024.set(key, { \u5024: stripQuotes(raw), line: ln.no });
+        break;
       case "rows":
       case "\u884C":
         out.rows = raw.replace(/^\[|\]$/g, "").split(/,(?![^[]*\])/).map((x) => stripQuotes(x.trim())).filter(Boolean);
@@ -2990,9 +3543,20 @@ function applyContinuationLines(actor, rest, errors) {
     else out.end = v;
   }
   if (out.partId !== void 0) {
+    for (const [\u6B04, { \u5024 }] of \u8FFD\u968F\u3059\u308B\u6B04\u306E\u751F\u5024) {
+      state[\u6B04] = coerceStateValue(\u5024);
+      touchedState = true;
+    }
     if (touchedState) out.stateOverride = state;
     return out;
   }
+  for (const [\u6B04, { \u5024, line }] of \u8FFD\u968F\u3059\u308B\u6B04\u306E\u751F\u5024) {
+    if (\u6B04 === "wBind" || \u6B04 === "hBind") {
+      out[\u6B04] = \u8FFD\u968F\u3059\u308B\u5927\u304D\u3055\u3068\u3057\u3066\u8AAD\u3080(\u5024, `\u7BB1\u306E ${\u6B04} `, line, errors);
+    } else if (\u6B04 === "opacity" || \u6B04 === "renderOffsetX" || \u6B04 === "renderOffsetY") {
+      out[\u6B04] = \u5024\u306B\u8FFD\u968F\u3059\u308B\u6B04\u3068\u3057\u3066\u8AAD\u3080(\u5024, `\u7BB1\u306E ${\u6B04} `, line, errors);
+    }
+  }
   for (const u of unknownKeys) {
     errors.push({
       line: u.line,
@@ -3021,6 +3585,12 @@ var ACTOR_ITEM_KEYS = /* @__PURE__ */ new Set([
   // 箱に出す題 (#1381)
   "title",
   "\u984C",
+  // 値に追随する 5 欄 (#1392)
+  "wBind",
+  "hBind",
+  "opacity",
+  "renderOffsetX",
+  "renderOffsetY",
   "\u4F4D\u7F6E",
   "pos",
   "posX",
@@ -3272,6 +3842,12 @@ var INLINE_ACTOR_KEYS = /* @__PURE__ */ new Set([
   "visibleIf",
   // 箱に出す題 (#1381)。 名前と切り離して書ける
   "title",
+  // 値に追随する 5 欄 (#1392)
+  "wBind",
+  "hBind",
+  "opacity",
+  "renderOffsetX",
+  "renderOffsetY",
   // 倍率は別経路 (`reportScaleOnNonPart`) が知らせる。 ここでも読める扱いにしないと
   // 同じ名前で 2 度知らせることになる
   "scale",
@@ -3279,12 +3855,24 @@ var INLINE_ACTOR_KEYS = /* @__PURE__ */ new Set([
   // 英語が読める欄の日本語別名 (#1301)。 一覧は `INLINE_ACTOR_ALIASES` が持つ
   ...Object.keys(INLINE_ACTOR_ALIASES)
 ]);
+var EDGE_BIND_INLINE_READERS = {
+  widthBind: (v) => v,
+  strokeBind: (v) => v,
+  dashOffsetBind: (v) => v
+};
 var FLOW_INLINE_READERS = {
   sub: (v) => v,
   guard: (v) => v,
   cardinality: (v) => v,
   // 矢印がどの辺から出るか (#1385)。 描画側は 4 方向を取り、書かなければ自動で選ぶ
   side: (v) => v !== void 0 && EDGE_SIDE_VALUES.includes(v) ? v : void 0,
+  /*
+   * 矢印を値に追随させる 3 欄 (#1396)。 箱の `wBind` (#1392) と同じく文字列だけを取る。
+   *
+   * ここでは字をそのまま通し、空かどうかは呼出側が知らせる (表の読み手は行番号を
+   * 持たないため、知らせを出せる場所で見る)。
+   */
+  ...EDGE_BIND_INLINE_READERS,
   // 数と真偽の欄は `FLOW_INLINE_VALUE_KINDS` の表が読む (#1306)。 ここでは名前だけを持つ =
   // 読める欄の一覧 (`FLOW_INLINE_KEYS`) は本表から導くため、載せないと欄ごと消える
   labelOffsetX: null,
@@ -3350,6 +3938,13 @@ function parseActor2(line, errors) {
       visibleIf: isPart ? void 0 : \u51FA\u3059\u6761\u4EF6\u3068\u3057\u3066\u8AAD\u3080(opts.visibleIf, line.no, errors),
       // 箱に出す題 (#1381)。 空文字も意味を持つ (題を出さない箱) ため undefined と分ける
       title: isPart ? void 0 : opts.title,
+      // 値に追随する 5 欄 (#1392)。 図形や出す条件と同じく、パーツでは状態の上書きとして
+      // 意味を持つため横取りしない
+      wBind: isPart ? void 0 : \u8FFD\u968F\u3059\u308B\u5927\u304D\u3055\u3068\u3057\u3066\u8AAD\u3080(opts.wBind, "\u7BB1\u306E wBind ", line.no, errors),
+      hBind: isPart ? void 0 : \u8FFD\u968F\u3059\u308B\u5927\u304D\u3055\u3068\u3057\u3066\u8AAD\u3080(opts.hBind, "\u7BB1\u306E hBind ", line.no, errors),
+      opacity: isPart ? void 0 : \u5024\u306B\u8FFD\u968F\u3059\u308B\u6B04\u3068\u3057\u3066\u8AAD\u3080(opts.opacity, "\u7BB1\u306E opacity ", line.no, errors),
+      renderOffsetX: isPart ? void 0 : \u5024\u306B\u8FFD\u968F\u3059\u308B\u6B04\u3068\u3057\u3066\u8AAD\u3080(opts.renderOffsetX, "\u7BB1\u306E renderOffsetX ", line.no, errors),
+      renderOffsetY: isPart ? void 0 : \u5024\u306B\u8FFD\u968F\u3059\u308B\u6B04\u3068\u3057\u3066\u8AAD\u3080(opts.renderOffsetY, "\u7BB1\u306E renderOffsetY ", line.no, errors),
       ...\u8868\u3067\u8AAD\u3080(ACTOR_INLINE_VALUE_KINDS, opts, "\u7BB1\u306E ", line.no, errors),
       // parts では `tone` を状態の上書きとして従来から使えるため、 色として横取りしない
       tone: isPart ? void 0 : resolveTone(opts.tone),
@@ -3408,10 +4003,17 @@ function parseFlowStep(line, no, errors) {
   let tone;
   let style;
   const \u4E2D\u62EC\u5F27 = {};
-  const mapMatch = rest.match(/\s*\{([^}]*)\}\s*$/);
+  const \u584A = \u672B\u5C3E\u306E\u4E2D\u62EC\u5F27\u3092\u5207\u308A\u51FA\u3059(rest);
   let \u6570\u3068\u771F\u507D;
-  if (mapMatch) {
-    const opts = parseInlineMapping(mapMatch[1]);
+  if (\u584A) {
+    const opts = parseInlineMapping(\u584A.\u4E2D\u8EAB);
+    for (const field of splitInlineFields(\u584A.\u4E2D\u8EAB)) {
+      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());
+    }
     for (const k of FLOW_INLINE_KEYS) {
       const \u8AAD\u307F\u624B = FLOW_INLINE_READERS[k];
       if (\u8AAD\u307F\u624B === null) continue;
@@ -3425,12 +4027,30 @@ function parseFlowStep(line, no, errors) {
       });
     }
     \u6570\u3068\u771F\u507D = \u8868\u3067\u8AAD\u3080(FLOW_INLINE_VALUE_KINDS, opts, "\u77E2\u5370\u306E ", line.no, errors);
-    rest = rest.slice(0, mapMatch.index ?? 0).trim();
+    rest = \u584A.\u524D.trim();
   }
   const sub = \u4E2D\u62EC\u5F27.sub;
   const guard = \u4E2D\u62EC\u5F27.guard;
   const cardinality = \u4E2D\u62EC\u5F27.cardinality;
   const side = \u4E2D\u62EC\u5F27.side;
+  const widthBind = \u8FFD\u968F\u3059\u308B\u5927\u304D\u3055\u3068\u3057\u3066\u8AAD\u3080(
+    \u4E2D\u62EC\u5F27.widthBind,
+    "\u77E2\u5370\u306E widthBind ",
+    line.no,
+    errors
+  );
+  const strokeBind = \u8FFD\u968F\u3059\u308B\u5927\u304D\u3055\u3068\u3057\u3066\u8AAD\u3080(
+    \u4E2D\u62EC\u5F27.strokeBind,
+    "\u77E2\u5370\u306E strokeBind ",
+    line.no,
+    errors
+  );
+  const dashOffsetBind = \u8FFD\u968F\u3059\u308B\u5927\u304D\u3055\u3068\u3057\u3066\u8AAD\u3080(
+    \u4E2D\u62EC\u5F27.dashOffsetBind,
+    "\u77E2\u5370\u306E dashOffsetBind ",
+    line.no,
+    errors
+  );
   const labelOffsetX = \u6570\u3068\u771F\u507D?.labelOffsetX;
   const labelOffsetY = \u6570\u3068\u771F\u507D?.labelOffsetY;
   const overlay = \u6570\u3068\u771F\u507D?.overlay;
@@ -3482,6 +4102,9 @@ function parseFlowStep(line, no, errors) {
     guard,
     cardinality,
     side,
+    widthBind,
+    strokeBind,
+    dashOffsetBind,
     labelOffsetX,
     labelOffsetY,
     overlay,
@@ -4039,14 +4662,22 @@ var PAINT_KEYS = /* @__PURE__ */ new Set([
 var SAFE_PAINT = "none";
 function stripExternalPaint(diagram2) {
   const stripped = [];
-  walk(diagram2, "", false, stripped);
+  walk(diagram2, "", false, stripped, false);
   return stripped;
 }
-function walk(node, path, inStateValue, out) {
+var INPUT_VALUE_KEYS = /* @__PURE__ */ new Set(["defaultvalue", "defaultvalues", "options"]);
+function walk(node, path, inStateValue, out, inInputs) {
   if (node === null || typeof node !== "object") return;
   if (Array.isArray(node)) {
     for (let i = 0; i < node.length; i++) {
-      walk(node[i], `${path}[${i}]`, inStateValue, out);
+      const here = `${path}[${i}]`;
+      const value = node[i];
+      if (inStateValue && typeof value === "string" && pointsOutside(value)) {
+        node[i] = SAFE_PAINT;
+        out.push({ path: here, value });
+      } else {
+        walk(value, here, inStateValue, out, inInputs);
+      }
     }
     return;
   }
@@ -4054,7 +4685,8 @@ function walk(node, path, inStateValue, out) {
   for (const [key, value] of Object.entries(obj)) {
     const here = path ? `${path}.${key}` : key;
     const lower = key.toLowerCase();
-    const nextInState = inStateValue || lower === "states" || lower === "sets" || lower === "tweens";
+    const nextInState = inStateValue || lower === "states" || lower === "sets" || lower === "tweens" || inInputs && INPUT_VALUE_KEYS.has(lower);
+    const nextInInputs = inInputs || lower === "inputs";
     if (typeof value === "string") {
       const isPaint = PAINT_KEYS.has(lower) || nextInState && (lower === "initial" || lower === "to" || lower === "from" || !isReservedStateKey(lower));
       if (isPaint && pointsOutside(value)) {
@@ -4063,7 +4695,7 @@ function walk(node, path, inStateValue, out) {
       }
       continue;
     }
-    walk(value, here, nextInState, out);
+    walk(value, here, nextInState, out, nextInInputs);
   }
 }
 function isReservedStateKey(lowerKey) {
@@ -4081,7 +4713,15 @@ function countDocElements(doc) {
   );
   return doc.actors.length + doc.flow.length + phases.length + phaseChildren + (doc.animate?.states.length ?? 0) + (doc.values?.length ?? 0) + // 値を見せる部品も描画時に 1 widget ずつ展開される (#1374)。 数えないと、 actors が
   // 少ないまま readouts だけを大量に並べた入力が組み立て前の上限をすり抜ける。
-  (doc.readouts?.length ?? 0) + (doc.groups ? Object.keys(doc.groups).length : 0) + (doc.lanes ? Object.keys(doc.lanes).length : 0);
+  (doc.readouts?.length ?? 0) + // 読む人が動かすつまみも 1 widget ずつ展開される (#1389)。 readouts と同じ上限で守る。
+  (doc.inputs?.length ?? 0) + /*
+   * 式 (#1391) と、押下 / 巻き上げ (#1393) も数える。
+   *
+   * **図の側 (`countDiagramElements`) は既に数えている**。 記法側だけ数えないと、
+   * 箱が少ないままこれらを大量に並べた入力が組み立て前の上限をすり抜け、
+   * 組み立て終わってから (= 時間をかけてから) 図の側で弾かれる。
+   */
+  (doc.formulas?.length ?? 0) + (doc.events?.length ?? 0) + (doc.scrolls?.length ?? 0) + (doc.groups ? Object.keys(doc.groups).length : 0) + (doc.lanes ? Object.keys(doc.lanes).length : 0);
 }
 function countDiagramElements(diagram2) {
   const phases = Array.isArray(diagram2.phases) ? diagram2.phases : [];
@@ -4227,6 +4867,100 @@ function compileToCdl(doc, opts) {
     );
     merged.readouts = [...merged.readouts ?? [], ...ownReadouts];
   }
+  if (doc.inputs && doc.inputs.length > 0) {
+    const ownInputs = doc.inputs.map(
+      (input) => deepRewriteStrings(input, (value) => value)
+    );
+    merged.inputs = [...merged.inputs ?? [], ...ownInputs];
+  }
+  if (doc.formulas && doc.formulas.length > 0) {
+    const ownFormulas = doc.formulas.map((formula) => ({
+      id: formula.id,
+      expression: formula.expression,
+      line: formula.pos?.line ?? 0
+    }));
+    const \u3064\u307E\u307F = new Map((merged.inputs ?? []).map((input) => [input.id, input]));
+    const \u5148\u306B\u66F8\u304B\u308C\u305F\u5F0F = new Set((merged.formulas ?? []).map((formula) => formula.id));
+    const \u8F09\u305B\u308B\u5F0F = [...merged.formulas ?? []];
+    for (const formula of ownFormulas) {
+      if (\u3064\u307E\u307F.has(formula.id) || \u5148\u306B\u66F8\u304B\u308C\u305F\u5F0F.has(formula.id)) {
+        opts?.onNotice?.({
+          kind: "formula-unresolved",
+          actor: formula.id,
+          line: formula.line,
+          message: `\u5F0F "${formula.id}" \u306E\u540D\u524D\u304C\u3001\u5148\u306B\u66F8\u304B\u308C\u305F\u3064\u307E\u307F\u307E\u305F\u306F\u5F0F\u3068\u91CD\u306A\u3063\u3066\u3044\u307E\u3059`,
+          hint: "`inputs:` \u3068 `formulas:` \u3067\u306F\u91CD\u306A\u3089\u306A\u3044\u540D\u524D\u3092\u4F7F\u3046"
+        });
+        continue;
+      }
+      let \u540D\u524D\u305F\u3061;
+      try {
+        \u540D\u524D\u305F\u3061 = extractIdentifiers(parseFormula(formula.expression));
+      } catch {
+        continue;
+      }
+      let \u89E3\u3051\u306A\u3044 = false;
+      for (const \u540D of \u540D\u524D\u305F\u3061) {
+        if (\u5148\u306B\u66F8\u304B\u308C\u305F\u5F0F.has(\u540D)) continue;
+        const input = \u3064\u307E\u307F.get(\u540D);
+        if (input) {
+          const \u521D\u671F\u5024 = inputDefaultValue(input);
+          if (typeof \u521D\u671F\u5024 === "number" || typeof \u521D\u671F\u5024 === "boolean") continue;
+          \u89E3\u3051\u306A\u3044 = true;
+          opts?.onNotice?.({
+            kind: "formula-unresolved",
+            actor: formula.id,
+            line: formula.line,
+            message: `\u5F0F "${formula.id}" \u304C\u3001\u6570\u3067\u3082\u771F\u507D\u3067\u3082\u306A\u3044\u3064\u307E\u307F "${\u540D}" \u3092\u8AAD\u3093\u3067\u3044\u307E\u3059`,
+            hint: "\u5F0F\u304C\u8AAD\u3081\u308B\u3064\u307E\u307F\u306F slider / number / stepper / timeline / toggle"
+          });
+          continue;
+        }
+        \u89E3\u3051\u306A\u3044 = true;
+        opts?.onNotice?.({
+          kind: "formula-unresolved",
+          actor: formula.id,
+          line: formula.line,
+          message: `\u5F0F "${formula.id}" \u304C\u3001\u3064\u307E\u307F\u307E\u305F\u306F\u5148\u306B\u66F8\u304B\u308C\u305F\u5F0F\u3067\u306F\u306A\u3044\u540D\u524D "${\u540D}" \u3092\u8AAD\u3093\u3067\u3044\u307E\u3059`,
+          hint: "`inputs:` \u306B\u66F8\u304F\u304B\u3001\u53C2\u7167\u3055\u308C\u308B\u5F0F\u3092\u3053\u306E\u5F0F\u3088\u308A\u524D\u306B\u66F8\u304F"
+        });
+      }
+      if (\u89E3\u3051\u306A\u3044) continue;
+      \u8F09\u305B\u308B\u5F0F.push({ id: formula.id, expression: formula.expression });
+      \u5148\u306B\u66F8\u304B\u308C\u305F\u5F0F.add(formula.id);
+    }
+    if (\u8F09\u305B\u308B\u5F0F.length > 0) merged.formulas = \u8F09\u305B\u308B\u5F0F;
+    else delete merged.formulas;
+  }
+  if (doc.events && doc.events.length > 0) {
+    const \u8F09\u305B\u308B = [...merged.eventBindings ?? []];
+    for (const e of doc.events) {
+      const \u76F8\u624B = \u51FA\u6765\u4E8B\u306E\u76F8\u624B\u3092\u89E3\u304F(merged, doc, e);
+      if (\u76F8\u624B === void 0) {
+        opts?.onNotice?.({
+          kind: "event-target-missing",
+          actor: e.handlerId,
+          line: e.pos.line,
+          message: `\u51FA\u6765\u4E8B "${e.handlerId}" \u304C\u6307\u3059\u76F8\u624B\u304C\u898B\u3064\u304B\u308A\u307E\u305B\u3093`,
+          hint: "box \u306F\u7BB1\u306E\u540D\u524D\u3001 lane \u306F\u7E26\u5217\u306E\u540D\u524D\u3001 arrow \u306F `A -> B` \u3067\u66F8\u304F"
+        });
+        continue;
+      }
+      \u8F09\u305B\u308B.push({
+        id: `evt-${\u8F09\u305B\u308B.length + 1}`,
+        event: e.event,
+        target: \u76F8\u624B,
+        handlerId: e.handlerId
+      });
+    }
+    if (\u8F09\u305B\u308B.length > 0) merged.eventBindings = \u8F09\u305B\u308B;
+  }
+  if (doc.scrolls && doc.scrolls.length > 0) {
+    merged.scrollTriggers = [
+      ...merged.scrollTriggers ?? [],
+      ...doc.scrolls.map((x) => ({ ...x }))
+    ];
+  }
   const \u5916\u3057\u305F\u90E8\u54C1\u306E\u914D\u8272 = stripExternalReadoutPalettes(merged);
   for (const dropped of [...stripExternalPaint(merged), ...\u5916\u3057\u305F\u90E8\u54C1\u306E\u914D\u8272]) {
     opts?.onNotice?.({
@@ -4561,6 +5295,23 @@ function disambiguateActorIds(doc, onNotice) {
       const from = \u76F4\u3059(s.from);
       const to = \u76F4\u3059(s.to);
       return from === s.from && to === s.to ? s : { ...s, from, to };
+    }),
+    events: doc.events?.map((event) => {
+      const target = event.target;
+      if (target.kind === "node") {
+        const name = \u76F4\u3059(target.name);
+        return name === target.name ? event : { ...event, target: { ...target, name } };
+      }
+      if (target.kind === "edge") {
+        const from = \u76F4\u3059(target.from);
+        const to = \u76F4\u3059(target.to);
+        return from === target.from && to === target.to ? event : { ...event, target: { ...target, from, to } };
+      }
+      if (target.kind === "lane" && (doc.type === "sequence" || doc.type === "solidity")) {
+        const name = \u76F4\u3059(target.name);
+        return name === target.name ? event : { ...event, target: { ...target, name } };
+      }
+      return event;
     })
   };
   if (\u6B21.animate) {
@@ -5602,6 +6353,35 @@ function applyEdgeInlineOptions(diagram2, doc, sourceLines) {
     \u77E2\u5370\u3078\u66F8\u304D\u5199\u3059(target, s, doc);
   });
 }
+function \u51FA\u6765\u4E8B\u306E\u76F8\u624B\u3092\u89E3\u304F(diagram2, doc, e) {
+  if (e.target.kind === "diagram") return { kind: "diagram" };
+  if (e.target.kind === "edge") {
+    const from = slugify(e.target.from);
+    const to = slugify(e.target.to);
+    let \u77E2\u5370;
+    if (doc.type === "sequence" || doc.type === "solidity") {
+      const stepIdx = doc.flow.findIndex(
+        (step) => slugify(step.from) === from && slugify(step.to) === to
+      );
+      if (stepIdx >= 0) {
+        \u77E2\u5370 = diagram2.edges.find(
+          (x) => (x.from === `s${stepIdx}-${from}` || x.from === from) && (x.to === `s${stepIdx}-${to}` || x.from === x.to)
+        );
+      }
+    } else {
+      \u77E2\u5370 = diagram2.edges.find((x) => x.from === from && x.to === to);
+    }
+    return \u77E2\u5370 ? { kind: "edge", id: \u77E2\u5370.id } : void 0;
+  }
+  const \u540D = e.target.name;
+  const slug = slugify(\u540D);
+  if (e.target.kind === "node") {
+    const \u7BB1 = diagram2.nodes.find((n) => n.id === slug || n.id === \u540D || n.title === \u540D);
+    return \u7BB1 ? { kind: "node", id: \u7BB1.id } : void 0;
+  }
+  const \u5217 = (diagram2.lanes ?? []).find((l) => l.id === slug || l.id === \u540D || l.label === \u540D);
+  return \u5217 ? { kind: "lane", id: \u5217.id } : void 0;
+}
 function \u77E2\u5370\u3078\u66F8\u304D\u5199\u3059(target, s, doc) {
   if (s.sub !== void 0) target.sub = s.sub;
   if (s.guard !== void 0) {
@@ -5618,6 +6398,9 @@ function \u77E2\u5370\u3078\u66F8\u304D\u5199\u3059(target, s, doc) {
   if (s.labelOffsetX !== void 0) target.labelOffsetX = s.labelOffsetX;
   if (s.labelOffsetY !== void 0) target.labelOffsetY = s.labelOffsetY;
   if (s.overlay !== void 0) target.overlay = s.overlay;
+  if (s.widthBind !== void 0) target.widthBind = s.widthBind;
+  if (s.strokeBind !== void 0) target.strokeBind = s.strokeBind;
+  if (s.dashOffsetBind !== void 0) target.dashOffsetBind = s.dashOffsetBind;
 }
 function \u9396\u3067\u3064\u306A\u3050\u5F62\u304B(doc) {
   if (doc.type !== "flow") return false;
@@ -6832,7 +7615,12 @@ var \u653E\u5C04\u3067\u63CF\u3051\u306A\u3044\u6B04\u306E\u540D\u524D = {
   nodes: "\u4E2D\u306E\u7BB1\u3054\u3068\u306E\u6307\u5B9A",
   layoutPos: "\u914D\u7F6E\u306E\u305A\u3089\u3057",
   shape: "\u7BB1\u306E\u4E2D\u306E\u56F3\u5F62",
-  visibleIf: "\u51FA\u3059\u6761\u4EF6"
+  visibleIf: "\u51FA\u3059\u6761\u4EF6",
+  wBind: "\u5024\u306B\u8FFD\u968F\u3059\u308B\u5927\u304D\u3055",
+  hBind: "\u5024\u306B\u8FFD\u968F\u3059\u308B\u5927\u304D\u3055",
+  opacity: "\u6FC3\u3055",
+  renderOffsetX: "\u63CF\u304F\u6642\u306E\u305A\u3089\u3057",
+  renderOffsetY: "\u63CF\u304F\u6642\u306E\u305A\u3089\u3057"
 };
 function \u653E\u5C04\u3067\u63CF\u3051\u306A\u3044\u6B04\u3092\u66F8\u3044\u305F\u304B(a, \u6B04) {
   if (\u6B04 === "kind") return a.kindWritten === true;
@@ -7077,6 +7865,11 @@ function applyV05Extensions(diagram2, doc, \u8FFD\u52A0\u3057\u305F\u7E26\u5217o
           if (footer) footer.visibleIf = a.visibleIf;
         }
       }
+      if (a.wBind !== void 0) node.wBind = a.wBind;
+      if (a.hBind !== void 0) node.hBind = a.hBind;
+      if (a.opacity !== void 0) node.opacity = a.opacity;
+      if (a.renderOffsetX !== void 0) node.renderOffsetX = a.renderOffsetX;
+      if (a.renderOffsetY !== void 0) node.renderOffsetY = a.renderOffsetY;
     }
   }
   alignSeqHeaderHeights(diagram2, doc);
@@ -7535,21 +8328,39 @@ function compileGenericWithAnimate(doc, opts) {
   const { kind, laneWidth } = opts;
   const actorToNodeId = /* @__PURE__ */ new Map();
   if (\u66F8\u3044\u305F\u7E26\u5217\u306B\u7F6E\u304F(kind, doc)) {
-    const \u4E26\u3073 = [];
+    const \u4F7F\u3063\u305F = [];
     for (const a of doc.actors) {
       const lid = a.lane;
-      if (lid !== void 0 && !\u4E26\u3073.includes(lid)) \u4E26\u3073.push(lid);
+      if (lid !== void 0 && !\u4F7F\u3063\u305F.includes(lid)) \u4F7F\u3063\u305F.push(lid);
     }
+    const \u66F8\u3044\u305F\u9806 = doc.lanes ? Object.keys(doc.lanes) : [];
+    const \u4E26\u3073 = [
+      ...\u66F8\u3044\u305F\u9806.filter((lid) => \u4F7F\u3063\u305F.includes(lid)),
+      ...\u4F7F\u3063\u305F.filter((lid) => !\u66F8\u3044\u305F\u9806.includes(lid))
+    ];
     for (const lid of \u4E26\u3073) {
       b.lane(lid, { width: laneWidth, ...kind === "topology" ? { contain: true } : {} });
     }
-    const \u7A4D\u3093\u3060\u6570 = /* @__PURE__ */ new Map();
+    const \u57CB\u307E\u3063\u305F\u6BB5 = /* @__PURE__ */ new Map();
+    const \u57CB\u3081\u308B = (lid, stack) => {
+      const \u96C6\u5408 = \u57CB\u307E\u3063\u305F\u6BB5.get(lid) ?? /* @__PURE__ */ new Set();
+      \u96C6\u5408.add(stack);
+      \u57CB\u307E\u3063\u305F\u6BB5.set(lid, \u96C6\u5408);
+    };
+    for (const a of doc.actors) {
+      if (a.lane !== void 0 && a.stack !== void 0) \u57CB\u3081\u308B(a.lane, a.stack);
+    }
     doc.actors.forEach((a, idx) => {
       const id = slugify(a.name);
       actorToNodeId.set(a.name, id);
       const lid = a.lane;
-      const stack = \u7A4D\u3093\u3060\u6570.get(lid) ?? 0;
-      \u7A4D\u3093\u3060\u6570.set(lid, stack + 1);
+      let stack = a.stack;
+      if (stack === void 0) {
+        stack = 0;
+        const \u96C6\u5408 = \u57CB\u307E\u3063\u305F\u6BB5.get(lid);
+        while (\u96C6\u5408?.has(stack)) stack += 1;
+        \u57CB\u3081\u308B(lid, stack);
+      }
       b.node(id, { lane: lid, stack, kind: a.kind, title: \u7BB1\u306E\u984C(a) });
     });
   } else if (kind === "flow" || kind === "topology") {
@@ -8267,8 +9078,6 @@ function \u533A\u9593\u306B\u5E83\u3052\u308B(src, tokens) {
   if (\u4F4D\u7F6E < src.length) out.push({ \u6587\u5B57: src.slice(\u4F4D\u7F6E) });
   return out;
 }
-
-// src/json-parser.ts
 var VALID_KIND_SET = NODE_KIND_VALID;
 var VALID_PRESETS = [...PRESET_TYPES];
 var ACCEPTED_KEYS = {
@@ -8286,7 +9095,14 @@ var ACCEPTED_KEYS = {
     "lanes",
     "groups",
     // 値を見せる部品 (#1374)
-    "readouts"
+    "readouts",
+    // 読む人が動かすつまみ (#1389)
+    "inputs",
+    // つまみの値から決まる値 (#1391)
+    "formulas",
+    // 押下などの出来事で動く仕掛けと、巻き上げに応じて進む値 (#1393)
+    "events",
+    "scrolls"
   ],
   actor: [
     "name",
@@ -8318,7 +9134,13 @@ var ACCEPTED_KEYS = {
     // その箱を出すかどうかの条件 (#1381)
     "visibleIf",
     // 箱に出す題 (#1381)
-    "title"
+    "title",
+    // 値に追随する 5 欄 (#1392)
+    "wBind",
+    "hBind",
+    "opacity",
+    "renderOffsetX",
+    "renderOffsetY"
   ],
   step: [
     "from",
@@ -8331,6 +9153,10 @@ var ACCEPTED_KEYS = {
     "style",
     "guard",
     "cardinality",
+    // 値に追随する 3 欄 (#1396)
+    "widthBind",
+    "strokeBind",
+    "dashOffsetBind",
     "labelOffsetX",
     "labelOffsetY",
     "overlay",
@@ -8361,7 +9187,14 @@ var \u6B04\u306E\u578B\u8868 = {
     lanes: "object",
     groups: "object",
     // 値を見せる部品 (#1374)。 中身は下の検査が種類ごとに見る
-    readouts: "\u4E26\u3073"
+    readouts: "\u4E26\u3073",
+    // 読む人が動かすつまみ (#1389)。 部品と同じく中身は下の検査が種類ごとに見る
+    inputs: "\u4E26\u3073",
+    // つまみの値から決まる値 (#1391)。 中身は下の検査が式ごとに見る
+    formulas: "object",
+    // 押下と巻き上げ (#1393)。 中身は下の検査が 1 件ずつ見る
+    events: "\u4E26\u3073",
+    scrolls: "object"
   },
   actor: {
     name: "\u5FC5\u9808\u306E\u975E\u7A7A\u6587\u5B57\u5217",
@@ -8393,7 +9226,13 @@ var \u6B04\u306E\u578B\u8868 = {
     // その箱を出すかどうかの条件 (#1381)
     visibleIf: "\u6587\u5B57\u5217",
     // 箱に出す題 (#1381)
-    title: "\u6587\u5B57\u5217"
+    title: "\u6587\u5B57\u5217",
+    // 値に追随する 5 欄 (#1392)。 大きさは文字列だけ、濃さとずらしは数も受ける
+    wBind: "\u975E\u7A7A\u306E\u6587\u5B57\u5217",
+    hBind: "\u975E\u7A7A\u306E\u6587\u5B57\u5217",
+    opacity: "\u6570\u304B\u6587\u5B57\u5217",
+    renderOffsetX: "\u6570\u304B\u6587\u5B57\u5217",
+    renderOffsetY: "\u6570\u304B\u6587\u5B57\u5217"
   },
   step: {
     from: "\u5FC5\u9808\u306E\u6587\u5B57\u5217",
@@ -8406,6 +9245,10 @@ var \u6B04\u306E\u578B\u8868 = {
     style: "\u7DDA\u7A2E",
     guard: "\u6587\u5B57\u5217",
     cardinality: "\u6587\u5B57\u5217",
+    // 値に追随する 3 欄 (#1396)。 描画側は文字列だけを取る
+    widthBind: "\u975E\u7A7A\u306E\u6587\u5B57\u5217",
+    strokeBind: "\u975E\u7A7A\u306E\u6587\u5B57\u5217",
+    dashOffsetBind: "\u975E\u7A7A\u306E\u6587\u5B57\u5217",
     labelOffsetX: "\u6570",
     labelOffsetY: "\u6570",
     overlay: "\u771F\u507D",
@@ -8466,7 +9309,13 @@ var \u898B\u672C\u306B\u52B9\u304B\u306A\u3044\u6B04 = [
   // その箱を出すかどうかの条件 (#1381)。 見本は自分の出方を持つ
   "visibleIf",
   // 箱に出す題 (#1381)。 見本は自分の題を持つ
-  "title"
+  "title",
+  // 値に追随する 5 欄 (#1392)。 見本は自分の大きさと出方を持つ
+  "wBind",
+  "hBind",
+  "opacity",
+  "renderOffsetX",
+  "renderOffsetY"
 ];
 function \u5024\u3092\u691C\u67FB(v, \u578B, path, \u540D\u524D, errors) {
   const \u578B\u9055\u3044 = (\u671F\u5F85, \u88DC\u8DB3) => {
@@ -8485,7 +9334,7 @@ function \u5024\u3092\u691C\u67FB(v, \u578B, path, \u540D\u524D, errors) {
       return;
     case "\u975E\u7A7A\u306E\u6587\u5B57\u5217":
       if (v === void 0) return;
-      if (typeof v !== "string" || v.length === 0) \u578B\u9055\u3044("a non-empty string if present");
+      if (typeof v !== "string" || v.trim().length === 0) \u578B\u9055\u3044("a non-empty string if present");
       return;
     case "\u6587\u5B57\u5217":
       if (v === void 0) return;
@@ -8521,6 +9370,19 @@ function \u5024\u3092\u691C\u67FB(v, \u578B, path, \u540D\u524D, errors) {
         \u578B\u9055\u3044("a finite number", typeof v === "number" ? `got ${String(v)}` : void 0);
       }
       return;
+    case "\u6570\u304B\u6587\u5B57\u5217":
+      if (v === void 0) return;
+      if (typeof v === "string") {
+        if (v.trim().length === 0) \u578B\u9055\u3044("a non-empty string if present");
+        return;
+      }
+      if (typeof v !== "number" || !Number.isFinite(v)) {
+        \u578B\u9055\u3044(
+          "a finite number or a non-empty string if present",
+          typeof v === "number" ? `got ${String(v)}` : void 0
+        );
+      }
+      return;
     case "\u771F\u507D":
       if (v === void 0) return;
       if (typeof v !== "boolean") \u578B\u9055\u3044("true or false if present");
@@ -8698,7 +9560,7 @@ function validateViewport(v, errors) {
 }
 function \u8868\u3067\u4E2D\u8EAB\u3092\u691C\u67FB\u3059\u308B(o, \u8868, path, \u4F55, errors) {
   const kind = typeof o.kind === "string" ? o.kind : "";
-  const \u5B9A\u7FA9 = \u8868[kind];
+  const \u5B9A\u7FA9 = Object.hasOwn(\u8868, kind) ? \u8868[kind] : void 0;
   if (\u5B9A\u7FA9 === void 0) {
     errors.push({
       path: `${path}.kind`,
@@ -8720,7 +9582,7 @@ function \u8868\u3067\u4E2D\u8EAB\u3092\u691C\u67FB\u3059\u308B(o, \u8868, path,
       });
       continue;
     }
-    const \u578B\u304C\u5408\u3046 = \u5F62 === "\u6570" ? typeof \u5024 === "number" && Number.isFinite(\u5024) : \u5F62 === "\u6570\u304B\u6587\u5B57\u5217" ? typeof \u5024 === "number" && Number.isFinite(\u5024) || typeof \u5024 === "string" : \u5F62 === "\u6587\u5B57\u5217\u306E\u4E26\u3073" ? Array.isArray(\u5024) && \u5024.every((x) => typeof x === "string") : \u5F62 === "\u771F\u507D" ? typeof \u5024 === "boolean" : \u5F62 === "\u7D44\u306E\u4E26\u3073" ? Array.isArray(\u5024) && \u5024.length > 0 && \u5024.every(
+    const \u578B\u304C\u5408\u3046 = \u5F62 === "\u6570" ? typeof \u5024 === "number" && Number.isFinite(\u5024) : \u5F62 === "\u6570\u304B\u6587\u5B57\u5217" ? typeof \u5024 === "number" && Number.isFinite(\u5024) || typeof \u5024 === "string" : \u5F62 === "\u6587\u5B57\u5217\u306E\u4E26\u3073" ? Array.isArray(\u5024) && \u5024.every((x) => typeof x === "string") : \u5F62 === "\u6570\u306E\u4E26\u3073" ? Array.isArray(\u5024) && \u5024.every((x) => typeof x === "number" && Number.isFinite(x)) : \u5F62 === "\u771F\u507D" ? typeof \u5024 === "boolean" : \u5F62 === "\u7D44\u306E\u4E26\u3073" ? Array.isArray(\u5024) && \u5024.length > 0 && \u5024.every(
       (x) => typeof x === "object" && x !== null && !Array.isArray(x) && Object.keys(x).length > 0 && Object.values(x).every(
         (y) => typeof y === "string" || typeof y === "number" && Number.isFinite(y)
       )
@@ -8801,6 +9663,238 @@ function validateReadouts(v, errors) {
     }
   });
 }
+function validateInputs(v, errors) {
+  if (v === void 0) return;
+  if (!Array.isArray(v)) {
+    errors.push({
+      path: "$.inputs",
+      message: "inputs must be an array of input objects",
+      hint: `got ${v === null ? "null" : typeof v}`
+    });
+    return;
+  }
+  v.forEach((r, i) => {
+    const path = `$.inputs[${i}]`;
+    if (!r || typeof r !== "object" || Array.isArray(r)) {
+      errors.push({ path, message: "input must be a plain object", hint: `got ${typeof r}` });
+      return;
+    }
+    const o = r;
+    if (typeof o.id !== "string" || o.id === "") {
+      errors.push({ path: `${path}.id`, message: "id is required", hint: "\u7A7A\u3067\u306A\u3044\u6587\u5B57\u5217\u3067\u66F8\u304F" });
+    }
+    \u8868\u3067\u4E2D\u8EAB\u3092\u691C\u67FB\u3059\u308B(o, \u3064\u307E\u307F\u306E\u8868, path, "input", errors);
+  });
+}
+function validateFormulas(v, inputs, errors) {
+  if (v === void 0) return;
+  if (!v || typeof v !== "object" || Array.isArray(v)) {
+    errors.push({
+      path: "$.formulas",
+      message: "formulas must be an object of name to expression",
+      hint: `got ${v === null ? "null" : Array.isArray(v) ? "array" : typeof v}`
+    });
+    return;
+  }
+  const \u3064\u307E\u307F = /* @__PURE__ */ new Map();
+  if (Array.isArray(inputs)) {
+    for (const input of inputs) {
+      if (input && typeof input === "object" && !Array.isArray(input)) {
+        const candidate = input;
+        if (typeof candidate.id === "string" && typeof candidate.kind === "string") {
+          \u3064\u307E\u307F.set(candidate.id, candidate.kind);
+        }
+      }
+    }
+  }
+  const \u5148\u306B\u66F8\u304B\u308C\u305F\u5F0F = /* @__PURE__ */ new Set();
+  for (const [\u540D\u524D, \u5F0F] of Object.entries(v)) {
+    const path = `$.formulas.${\u540D\u524D}`;
+    if (!isValueName(\u540D\u524D)) {
+      errors.push({ path, ...valueNameIssue(\u540D\u524D) });
+      continue;
+    }
+    if (typeof \u5F0F !== "string" || \u5F0F.trim() === "") {
+      errors.push({
+        path,
+        message: `${\u540D\u524D} must be a non-empty expression string`,
+        hint: `got ${Array.isArray(\u5F0F) ? "array" : \u5F0F === null ? "null" : typeof \u5F0F}`
+      });
+      continue;
+    }
+    try {
+      const names = extractIdentifiers(parseFormula(\u5F0F));
+      if (\u3064\u307E\u307F.has(\u540D\u524D) || \u5148\u306B\u66F8\u304B\u308C\u305F\u5F0F.has(\u540D\u524D)) {
+        errors.push({
+          path,
+          message: `${\u540D\u524D} collides with an input or an earlier formula`,
+          hint: "inputs \u3068 formulas \u3067\u306F\u91CD\u306A\u3089\u306A\u3044\u540D\u524D\u3092\u4F7F\u3046"
+        });
+        continue;
+      }
+      let valid = true;
+      for (const name of names) {
+        if (\u5148\u306B\u66F8\u304B\u308C\u305F\u5F0F.has(name)) continue;
+        const kind = \u3064\u307E\u307F.get(name);
+        if (["slider", "number", "stepper", "timeline", "toggle"].includes(kind ?? "")) continue;
+        valid = false;
+        errors.push({
+          path,
+          message: `${\u540D\u524D} references an unavailable formula identifier`,
+          hint: `${name} \u306F\u6570\u5024/\u771F\u507D\u306E input \u306B\u3059\u308B\u304B\u3001\u3053\u306E\u5F0F\u3088\u308A\u524D\u306E formula \u306B\u66F8\u304F`
+        });
+      }
+      if (valid) \u5148\u306B\u66F8\u304B\u308C\u305F\u5F0F.add(\u540D\u524D);
+    } catch (e) {
+      errors.push({
+        path,
+        message: `${\u540D\u524D} is not a readable expression`,
+        hint: e.message
+      });
+    }
+  }
+}
+function validateEvents(v, errors) {
+  if (v === void 0) return;
+  if (!Array.isArray(v)) {
+    errors.push({
+      path: "$.events",
+      message: "events must be an array of event objects",
+      hint: `got ${v === null ? "null" : typeof v}`
+    });
+    return;
+  }
+  const \u76F8\u624B\u306E\u9375 = ["box", "lane", "arrow", "diagram"];
+  v.forEach((e, i) => {
+    const path = `$.events[${i}]`;
+    if (!e || typeof e !== "object" || Array.isArray(e)) {
+      errors.push({ path, message: "event must be a plain object", hint: `got ${typeof e}` });
+      return;
+    }
+    const o = e;
+    for (const k of Object.keys(o)) {
+      if (k === "on" || k === "handler" || \u76F8\u624B\u306E\u9375.includes(k)) continue;
+      errors.push({
+        path: `${path}.${k}`,
+        message: `unknown key "${k}"`,
+        hint: `\u4F7F\u3048\u308B\u9805\u76EE = on, handler, ${\u76F8\u624B\u306E\u9375.join(", ")}`
+      });
+    }
+    if (typeof o.on !== "string" || !EVENT_KINDS.includes(o.on)) {
+      errors.push({
+        path: `${path}.on`,
+        message: "on must be a known event kind",
+        hint: `\u4F7F\u3048\u308B\u7A2E\u985E = ${EVENT_KINDS.join(", ")}`
+      });
+    }
+    if (typeof o.handler !== "string" || o.handler.trim() === "") {
+      errors.push({
+        path: `${path}.handler`,
+        message: "handler is required",
+        hint: "\u7A7A\u3067\u306A\u3044\u6587\u5B57\u5217\u3067\u66F8\u304F"
+      });
+    }
+    const \u66F8\u3044\u305F = \u76F8\u624B\u306E\u9375.filter((k) => o[k] !== void 0);
+    if (\u66F8\u3044\u305F.length !== 1) {
+      errors.push({
+        path,
+        message: \u66F8\u3044\u305F.length === 0 ? "event target is required" : "event target must be written once",
+        hint: `${\u76F8\u624B\u306E\u9375.join(" / ")} \u306E\u3069\u308C\u304B 1 \u3064\u3060\u3051\u3092\u66F8\u304F`
+      });
+      return;
+    }
+    const \u9375 = \u66F8\u3044\u305F[0];
+    if (\u9375 === "diagram") {
+      if (o.diagram !== true) {
+        errors.push({
+          path: `${path}.diagram`,
+          message: "diagram must be true",
+          hint: "\u56F3\u5168\u4F53\u3092\u6307\u3059\u6642\u3060\u3051\u66F8\u304F"
+        });
+      }
+      return;
+    }
+    if (typeof o[\u9375] !== "string" || o[\u9375].trim() === "") {
+      errors.push({ path: `${path}.${\u9375}`, message: `${\u9375} must be a non-empty string` });
+      return;
+    }
+    if (\u9375 === "arrow") {
+      const \u4E21\u7AEF = o.arrow.split("->");
+      if (\u4E21\u7AEF.length !== 2 || \u4E21\u7AEF.some((x) => x.trim() === "")) {
+        errors.push({
+          path: `${path}.arrow`,
+          message: "arrow must be `A -> B`",
+          hint: "\u77E2\u5370\u306E\u4E21\u7AEF\u306E\u540D\u524D\u3092\u66F8\u304F"
+        });
+      }
+    }
+  });
+}
+function validateScrolls(v, inputs, formulas, errors) {
+  if (v === void 0) return;
+  if (!v || typeof v !== "object" || Array.isArray(v)) {
+    errors.push({
+      path: "$.scrolls",
+      message: "scrolls must be an object of name to spec",
+      hint: `got ${v === null ? "null" : Array.isArray(v) ? "array" : typeof v}`
+    });
+    return;
+  }
+  const \u65E2\u306B\u5024\u3092\u4F5C\u308B\u540D\u524D = /* @__PURE__ */ new Set();
+  if (Array.isArray(inputs)) {
+    for (const input of inputs) {
+      if (!input || typeof input !== "object" || Array.isArray(input)) continue;
+      const id = input.id;
+      if (typeof id === "string") \u65E2\u306B\u5024\u3092\u4F5C\u308B\u540D\u524D.add(id);
+    }
+  }
+  if (formulas && typeof formulas === "object" && !Array.isArray(formulas)) {
+    for (const id of Object.keys(formulas)) \u65E2\u306B\u5024\u3092\u4F5C\u308B\u540D\u524D.add(id);
+  }
+  for (const [\u540D\u524D, spec] of Object.entries(v)) {
+    const path = `$.scrolls.${\u540D\u524D}`;
+    if (!isValueName(\u540D\u524D)) {
+      errors.push({ path, ...valueNameIssue(\u540D\u524D) });
+      continue;
+    }
+    if (\u65E2\u306B\u5024\u3092\u4F5C\u308B\u540D\u524D.has(\u540D\u524D)) {
+      errors.push({
+        path,
+        message: `${\u540D\u524D} collides with an input or formula`,
+        hint: "inputs / formulas / scrolls \u3067\u306F\u91CD\u306A\u3089\u306A\u3044\u540D\u524D\u3092\u4F7F\u3046"
+      });
+    }
+    if (!spec || typeof spec !== "object" || Array.isArray(spec)) {
+      errors.push({ path, message: `${\u540D\u524D} must be a plain object`, hint: `got ${typeof spec}` });
+      continue;
+    }
+    for (const [k, x] of Object.entries(spec)) {
+      if (k === "label") {
+        if (typeof x !== "string") {
+          errors.push({ path: `${path}.label`, message: "label must be a string" });
+        }
+        continue;
+      }
+      if (k !== "start" && k !== "end" && k !== "scrub") {
+        errors.push({
+          path: `${path}.${k}`,
+          message: `unknown key "${k}"`,
+          hint: "\u4F7F\u3048\u308B\u9805\u76EE = start, end, scrub, label"
+        });
+        continue;
+      }
+      if (typeof x !== "number" || !Number.isFinite(x)) {
+        errors.push({ path: `${path}.${k}`, message: `${k} must be a finite number` });
+      } else if (x < 0 || x > 1) {
+        errors.push({
+          path: `${path}.${k}`,
+          message: `${k} must be between 0 and 1`,
+          hint: "0 \u3068 1 \u3092\u542B\u3080\u7BC4\u56F2\u3067\u66F8\u304F"
+        });
+      }
+    }
+  }
+}
 function validateActorShape(v, path, errors) {
   if (v === void 0) return;
   if (!v || typeof v !== "object" || Array.isArray(v)) {
@@ -8975,6 +10069,10 @@ function validateJson(json) {
   const j = \u5199\u3057.value;
   checkUnknownKeys(j, "root", "$", errors);
   validateReadouts(j.readouts, errors);
+  validateInputs(j.inputs, errors);
+  validateFormulas(j.formulas, j.inputs, errors);
+  validateEvents(j.events, errors);
+  validateScrolls(j.scrolls, j.inputs, j.formulas, errors);
   \u8868\u3067\u691C\u67FB(j, "root", "$", "", errors);
   if (!Array.isArray(j.actors) || j.actors.length === 0) {
     errors.push({ path: "$.actors", message: "actors must be a non-empty array" });
@@ -9211,6 +10309,12 @@ function jsonToDoc(json) {
       shape: isPart ? void 0 : a.shape,
       visibleIf: isPart ? void 0 : a.visibleIf,
       title: isPart ? void 0 : a.title,
+      // 値に追随する 5 欄 (#1392)。 記法と同じく見本には渡さない
+      wBind: isPart ? void 0 : a.wBind,
+      hBind: isPart ? void 0 : a.hBind,
+      opacity: isPart ? void 0 : a.opacity,
+      renderOffsetX: isPart ? void 0 : a.renderOffsetX,
+      renderOffsetY: isPart ? void 0 : a.renderOffsetY,
       // 普通の箱にしか効かない欄は見本では落とす。 落とす欄の一覧は `見本に効かない欄` が
       // 唯一の出どころで、検査 (#1308) も同じ表を見る = 「検査は通すが組み立てが捨てる」
       // 状態が作れない
@@ -9258,6 +10362,10 @@ function jsonToDoc(json) {
     style: s.style,
     guard: s.guard,
     cardinality: s.cardinality,
+    // 値に追随する 3 欄 (#1396)
+    widthBind: s.widthBind,
+    strokeBind: s.strokeBind,
+    dashOffsetBind: s.dashOffsetBind,
     labelOffsetX: s.labelOffsetX,
     labelOffsetY: s.labelOffsetY,
     overlay: s.overlay,
@@ -9266,6 +10374,19 @@ function jsonToDoc(json) {
     pos: p0
   }));
   const readouts = json.readouts ? [...json.readouts] : void 0;
+  const inputs = json.inputs ? [...json.inputs] : void 0;
+  const events = json.events?.map((e) => ({
+    event: e.on,
+    target: e.diagram === true ? { kind: "diagram" } : e.arrow !== void 0 ? {
+      kind: "edge",
+      from: e.arrow.split("->")[0]?.trim() ?? "",
+      to: e.arrow.split("->")[1]?.trim() ?? ""
+    } : e.lane !== void 0 ? { kind: "lane", name: e.lane } : { kind: "node", name: e.box ?? "" },
+    handlerId: e.handler.trim(),
+    pos: p0
+  }));
+  const scrolls = json.scrolls ? Object.entries(json.scrolls).map(([id, spec]) => ({ id, ...spec })) : void 0;
+  const formulas = json.formulas ? Object.entries(json.formulas).map(([id, expression]) => ({ id, expression, pos: p0 })) : void 0;
   const states = Object.entries(json.states ?? {}).map(([name, initial]) => ({
     name,
     initial,
@@ -9323,6 +10444,10 @@ function jsonToDoc(json) {
       ])
     ) : void 0,
     readouts,
+    inputs,
+    formulas,
+    events,
+    scrolls,
     pos: p0
   };
 }
@@ -9711,6 +10836,36 @@ var diagram_default = {
                     required: ["sides"]
                   }
                 ]
+              },
+              wBind: {
+                type: "string",
+                minLength: 1,
+                pattern: "\\S",
+                description: "\u7BB1\u306E\u5E45\u3092\u5024\u306B\u8FFD\u968F\u3055\u305B\u308B\u3002 \u72B6\u614B\u306E\u540D\u524D\u3092 {\u540D\u524D} \u306E\u5F62\u3067\u66F8\u304F\u3002 \u914D\u7F6E\u8A08\u7B97\u306F\u8FFD\u968F\u524D\u306E\u5927\u304D\u3055\u3092\u4F7F\u3046"
+              },
+              hBind: {
+                type: "string",
+                minLength: 1,
+                pattern: "\\S",
+                description: "\u7BB1\u306E\u9AD8\u3055\u3092\u5024\u306B\u8FFD\u968F\u3055\u305B\u308B\u3002 wBind \u3068\u540C\u3058\u8AAD\u307F\u65B9"
+              },
+              opacity: {
+                type: ["number", "string"],
+                minLength: 1,
+                pattern: "\\S",
+                description: "\u7BB1\u306E\u6FC3\u3055\u3002 0 \u304B\u3089 1 \u306E\u6570\u304B\u3001\u72B6\u614B\u306E\u540D\u524D\u3002 \u66F8\u304B\u306A\u3051\u308C\u3070\u5B8C\u5168\u306B\u898B\u3048\u308B"
+              },
+              renderOffsetX: {
+                type: ["number", "string"],
+                minLength: 1,
+                pattern: "\\S",
+                description: "\u63CF\u304F\u6642\u3060\u3051\u7BB1\u3092\u6A2A\u3078\u305A\u3089\u3059\u91CF\u3002 \u914D\u7F6E\u8A08\u7B97\u3068\u77E2\u5370\u306F\u305A\u3089\u3059\u524D\u306E\u4F4D\u7F6E\u3092\u4F7F\u3046"
+              },
+              renderOffsetY: {
+                type: ["number", "string"],
+                minLength: 1,
+                pattern: "\\S",
+                description: "\u63CF\u304F\u6642\u3060\u3051\u7BB1\u3092\u7E26\u3078\u305A\u3089\u3059\u91CF\u3002 renderOffsetX \u3068\u540C\u3058\u8AAD\u307F\u65B9"
               }
             }
           }
@@ -9802,6 +10957,24 @@ var diagram_default = {
                 type: "number"
               }
             }
+          },
+          widthBind: {
+            type: "string",
+            minLength: 1,
+            pattern: "\\S",
+            description: "\u7DDA\u306E\u592A\u3055\u3092\u5024\u306B\u8FFD\u968F\u3055\u305B\u308B\u3002 \u72B6\u614B\u3084\u3064\u307E\u307F\u306E\u540D\u524D\u3092 {\u540D\u524D} \u306E\u5F62\u3067\u66F8\u304F"
+          },
+          strokeBind: {
+            type: "string",
+            minLength: 1,
+            pattern: "\\S",
+            description: "\u7DDA\u306E\u8272\u3092\u5024\u306B\u8FFD\u968F\u3055\u305B\u308B\u3002 widthBind \u3068\u540C\u3058\u8AAD\u307F\u65B9"
+          },
+          dashOffsetBind: {
+            type: "string",
+            minLength: 1,
+            pattern: "\\S",
+            description: "\u7834\u7DDA\u306E\u4F4D\u7F6E\u3092\u5024\u306B\u8FFD\u968F\u3055\u305B\u308B (\u6D41\u308C\u3066\u3044\u308B\u3088\u3046\u306B\u898B\u305B\u308B)\u3002 widthBind \u3068\u540C\u3058\u8AAD\u307F\u65B9"
           }
         }
       }
@@ -10828,6 +12001,314 @@ var diagram_default = {
           }
         ]
       }
+    },
+    inputs: {
+      type: "array",
+      description: "\u8AAD\u3080\u4EBA\u304C\u52D5\u304B\u3059\u3064\u307E\u307F\u3002 \u5024\u3092\u63E1\u308A\u3001\u7BB1\u306E\u6587\u5B57\u3084\u90E8\u54C1\u304C\u305D\u306E\u5024\u3092\u8FFD\u3044\u304B\u3051\u308B\u3002 \u7BB1\u3067\u306F\u306A\u3044\u306E\u3067\u7E26\u5217\u306B\u8F09\u3089\u305A\u3001\u56F3\u5168\u4F53\u306B 1 \u3064\u306E\u4E26\u3073\u3068\u3057\u3066\u6301\u3064\u3002",
+      items: {
+        type: "object",
+        required: ["id", "kind"],
+        additionalProperties: false,
+        properties: {
+          id: {
+            type: "string",
+            minLength: 1
+          },
+          kind: {
+            type: "string",
+            enum: [
+              "color",
+              "datetime",
+              "dropdown",
+              "multi-select",
+              "number",
+              "radio",
+              "range",
+              "slider",
+              "stepper",
+              "tabs",
+              "text",
+              "timeline",
+              "toggle",
+              "xypad"
+            ]
+          },
+          autoplay: {
+            type: "boolean"
+          },
+          defaultHi: {
+            type: "number"
+          },
+          defaultLo: {
+            type: "number"
+          },
+          defaultSpeedIdx: {
+            type: "number"
+          },
+          defaultValue: {
+            type: ["boolean", "number", "string"]
+          },
+          defaultValues: {
+            type: "array",
+            items: {
+              type: "string"
+            }
+          },
+          defaultX: {
+            type: "number"
+          },
+          defaultY: {
+            type: "number"
+          },
+          duration: {
+            type: "number"
+          },
+          label: {
+            type: "string"
+          },
+          loop: {
+            type: "boolean"
+          },
+          max: {
+            type: "number"
+          },
+          maxLength: {
+            type: "number"
+          },
+          min: {
+            type: "number"
+          },
+          options: {
+            type: "array",
+            items: {
+              type: "string"
+            }
+          },
+          placeholder: {
+            type: "string"
+          },
+          speeds: {
+            type: "array",
+            items: {
+              type: "number"
+            }
+          },
+          step: {
+            type: "number"
+          },
+          xMax: {
+            type: "number"
+          },
+          xMin: {
+            type: "number"
+          },
+          yMax: {
+            type: "number"
+          },
+          yMin: {
+            type: "number"
+          }
+        },
+        oneOf: [
+          {
+            properties: {
+              kind: {
+                enum: ["color", "datetime", "text"]
+              },
+              defaultValue: {
+                type: "string"
+              }
+            },
+            required: ["defaultValue"]
+          },
+          {
+            properties: {
+              kind: {
+                enum: ["dropdown", "radio", "tabs"]
+              },
+              defaultValue: {
+                type: "string"
+              }
+            },
+            required: ["options", "defaultValue"]
+          },
+          {
+            properties: {
+              kind: {
+                enum: ["multi-select"]
+              }
+            },
+            required: ["options", "defaultValues"]
+          },
+          {
+            properties: {
+              kind: {
+                enum: ["number", "stepper"]
+              },
+              defaultValue: {
+                type: "number"
+              }
+            },
+            required: ["defaultValue"]
+          },
+          {
+            properties: {
+              kind: {
+                enum: ["range"]
+              }
+            },
+            required: ["min", "max", "defaultLo", "defaultHi"]
+          },
+          {
+            properties: {
+              kind: {
+                enum: ["slider"]
+              },
+              defaultValue: {
+                type: "number"
+              }
+            },
+            required: ["min", "max", "defaultValue"]
+          },
+          {
+            properties: {
+              kind: {
+                enum: ["timeline"]
+              }
+            },
+            required: ["duration"]
+          },
+          {
+            properties: {
+              kind: {
+                enum: ["toggle"]
+              },
+              defaultValue: {
+                type: "boolean"
+              }
+            },
+            required: ["defaultValue"]
+          },
+          {
+            properties: {
+              kind: {
+                enum: ["xypad"]
+              }
+            },
+            required: ["xMin", "xMax", "yMin", "yMax", "defaultX", "defaultY"]
+          }
+        ]
+      }
+    },
+    formulas: {
+      type: "object",
+      description: '\u3064\u307E\u307F\u306E\u5024\u304B\u3089\u6C7A\u307E\u308B\u5024\u3002 \u540D\u524D\u3092\u9375\u3001\u5F0F\u3092\u5024\u306B\u66F8\u304F\u3002 `values` \u3068\u306F\u7D4C\u8DEF\u304C\u5225\u3067\u3001\u5F0F\u306F\u540D\u524D\u3092\u4E2D\u62EC\u5F27\u3067\u56F2\u308F\u306A\u3044 (\u4F8B "input * 2")\u3002',
+      additionalProperties: {
+        type: "string",
+        minLength: 1,
+        pattern: "\\S"
+      },
+      propertyNames: {
+        pattern: "^[A-Za-z_][A-Za-z0-9_]*$"
+      }
+    },
+    events: {
+      type: "array",
+      description: "\u62BC\u4E0B\u306A\u3069\u306E\u51FA\u6765\u4E8B\u3067\u52D5\u304F\u4ED5\u639B\u3051\u3002 \u76F8\u624B\u306F\u540D\u524D\u3067\u6307\u3059 (box / lane / arrow / diagram \u306E\u3069\u308C\u304B 1 \u3064)\u3002",
+      items: {
+        type: "object",
+        required: ["on", "handler"],
+        additionalProperties: false,
+        properties: {
+          on: {
+            type: "string",
+            enum: [
+              "click",
+              "hover",
+              "double-click",
+              "long-press",
+              "drag",
+              "drop",
+              "keydown",
+              "focus",
+              "blur"
+            ]
+          },
+          handler: {
+            type: "string",
+            minLength: 1,
+            pattern: "\\S"
+          },
+          box: {
+            type: "string",
+            minLength: 1,
+            description: "\u7BB1\u306E\u540D\u524D"
+          },
+          lane: {
+            type: "string",
+            minLength: 1,
+            description: "\u7E26\u5217\u306E\u540D\u524D"
+          },
+          arrow: {
+            type: "string",
+            minLength: 1,
+            pattern: "^(?!.*->.*->)\\s*\\S(?:.*\\S)?\\s*->\\s*\\S(?:.*\\S)?\\s*$",
+            description: "\u77E2\u5370\u3002 `A -> B` \u306E\u5F62\u3067\u4E21\u7AEF\u306E\u540D\u524D\u3092\u66F8\u304F"
+          },
+          diagram: {
+            const: true,
+            description: "\u56F3\u5168\u4F53\u3092\u6307\u3059"
+          }
+        },
+        oneOf: [
+          {
+            required: ["box"]
+          },
+          {
+            required: ["lane"]
+          },
+          {
+            required: ["arrow"]
+          },
+          {
+            required: ["diagram"]
+          }
+        ]
+      }
+    },
+    scrolls: {
+      type: "object",
+      description: "\u5DFB\u304D\u4E0A\u3052\u306B\u5FDC\u3058\u3066\u9032\u3080\u5024\u3002 \u753B\u9762\u3092\u5DFB\u304D\u4E0A\u3052\u305F\u91CF\u304B\u3089 0 \u304B\u3089 1 \u306E\u9032\u307F\u5177\u5408\u3092\u4F5C\u308B\u3002",
+      propertyNames: {
+        pattern: "^[A-Za-z_][A-Za-z0-9_]*$"
+      },
+      additionalProperties: {
+        type: "object",
+        additionalProperties: false,
+        properties: {
+          start: {
+            type: "number",
+            minimum: 0,
+            maximum: 1,
+            description: "\u9032\u307F\u5177\u5408\u304C 0 \u306B\u306A\u308B\u753B\u9762\u4E0A\u306E\u4F4D\u7F6E (0 \u304C\u4E0A\u7AEF\u30011 \u304C\u4E0B\u7AEF)"
+          },
+          end: {
+            type: "number",
+            minimum: 0,
+            maximum: 1,
+            description: "\u9032\u307F\u5177\u5408\u304C 1 \u306B\u306A\u308B\u753B\u9762\u4E0A\u306E\u4F4D\u7F6E"
+          },
+          scrub: {
+            type: "number",
+            minimum: 0,
+            maximum: 1,
+            description: "\u5DFB\u304D\u4E0A\u3052\u3078\u306E\u8FFD\u968F\u5EA6\u5408\u3044 (0 \u304C\u6BB5\u968E\u7684\u30011 \u304C\u9023\u7D9A)"
+          },
+          label: {
+            type: "string"
+          }
+        }
+      }
     }
   }
 };