@cardenelabs/dragon 0.11.0 → 0.13.0

package/src/v05/parser.ts

@@ -56,6 +56,8 @@ import type {
   DslAxes,
   DslDocument,
   DslActor,
+  DslDynShape,
+  DslReadout,
   DslActorNodeOverride,
   DslStep,
   DslAnimate,
@@ -73,6 +75,9 @@ import type {
 
 export type V05ParseResult = { ok: true; doc: DslDocument } | { ok: false; errors: DslError[] };
 
+/** 矢印を出す辺。 Text DSL / JSON validator / 公開 schema の 3 経路で同じ 4 値を使う。 */
+export const EDGE_SIDE_VALUES = ["top", "right", "bottom", "left"] as const;
+
 /**
  * 記法が受ける top-level の項目 (#1190)。
  *
@@ -95,6 +100,8 @@ export const TOP_LEVEL_KEYS = [
   "eyebrow",
   // 2 軸で仕分ける図の軸の名前 (#1251)
   "axes",
+  // 値を見せる部品 (#1374)
+  "readouts",
 ] as const;
 
 /**
@@ -116,6 +123,53 @@ export const TOP_LEVEL_KEYS = [
  */
 const LANE_ID_ENTRY = /^([\p{L}\p{N}_-]+)\s*:\s*\{([^}]*)\}\s*$/u;
 
+/**
+ * `id: { ... }` の 1 行を、名前と中括弧の中身に割る (#1381)。
+ *
+ * `LANE_ID_ENTRY` は中括弧を `[^}]*` で読むため、中身に中括弧を含む形
+ * (`map: [{ value: "a" }]`) を受けられない。 部品の欄には組の並びを取るものがあるので、
+ * 引用符の内側を飛ばしつつ中括弧の深さを数えて割る。
+ *
+ * 割れない形は `undefined` を返す。 呼び手が行番号付きで知らせる。
+ */
+function 名前と中括弧に割る(行: string): [string, string] | undefined {
+  const t = 行.trim();
+  const c = t.indexOf(":");
+  if (c < 0) return undefined;
+  const 名前 = t.slice(0, c).trim();
+  if (!/^[\p{L}\p{N}_-]+$/u.test(名前)) return undefined;
+  const 残り = t.slice(c + 1).trim();
+  if (!残り.startsWith("{")) return undefined;
+
+  let 深さ = 0;
+  let 引用: string | null = null;
+  let 直前: string | null = null;
+  for (let i = 0; i < 残り.length; i += 1) {
+    const ch = 残り[i]!;
+    if (引用 !== null) {
+      if (引用 === '"' && ch === "\\" && i + 1 < 残り.length) {
+        i += 1;
+        continue;
+      }
+      if (ch === 引用) 引用 = null;
+      continue;
+    }
+    if ((ch === '"' || ch === "'") && (直前 === null || ":,{[".includes(直前))) {
+      引用 = ch;
+      直前 = ch;
+      continue;
+    }
+    if (ch === "{") 深さ += 1;
+    else if (ch === "}") {
+      深さ -= 1;
+      // 中括弧が閉じた後に文字が残る形は割らない (`{...} x`)
+      if (深さ === 0) return i === 残り.length - 1 ? [名前, 残り.slice(1, i)] : undefined;
+    }
+    if (!/\s/u.test(ch)) 直前 = ch;
+  }
+  return undefined;
+}
+
 function isTopLevelKey(key: string): key is (typeof TOP_LEVEL_KEYS)[number] {
   return (TOP_LEVEL_KEYS as readonly string[]).includes(key);
 }
@@ -278,6 +332,7 @@ export function parseTextDslV05(src: string): V05ParseResult {
   const values: DslValue[] = [];
   let viewport: DslViewport | undefined = undefined;
   let lanesMap: Record<string, DslLane> | undefined = undefined;
+  let readoutsList: DslReadout[] | undefined = undefined;
   let groupsMap: Record<string, DslGroup> | undefined = undefined;
 
   let i = 0;
@@ -539,6 +594,38 @@ export function parseTextDslV05(src: string): V05ParseResult {
       i = next;
       continue;
     }
+    if (head.key === "readouts") {
+      // readouts:\n  ring: { kind: percent-ring, source: total, max: 500, label: "..." }
+      // 1 行にまとめた形は受けない。 黙って空の並びにすると、書いた部品が全て消えた図になる。
+      if (head.value !== null && head.value.trim() !== "") {
+        errors.push({
+          line: line.no,
+          message: "readouts は 1 行にまとめて書けない",
+          hint: "次の行から字下げして `id: { kind: percent-ring, source: total, max: 100 }` の形で並べる",
+        });
+        i += 1;
+        continue;
+      }
+      // `collectIndentedList` は `:` の無い行を落とす。 部品を綴り違えた行も知らせるため、
+      // 字下げした行を全て読み手へ渡す。
+      const { items, next } = collectIndentedRaw(lines, i + 1, line.indent);
+      readoutsList = [];
+      for (const it of items) {
+        const m = 名前と中括弧に割る(it.trimmed);
+        if (m) {
+          const 読めた = 部品として読む(m[0], m[1], it.no, errors);
+          if (読めた) readoutsList.push(読めた);
+        } else {
+          errors.push({
+            line: it.no,
+            message: `invalid readout entry: "${it.trimmed}"`,
+            hint: "use `id: { kind: percent-ring, source: total, max: 500 }`",
+          });
+        }
+      }
+      i = next;
+      continue;
+    }
     if (head.key === "groups") {
       // groups:\n  aws: { label: "AWS", lanes: [ecs, rds] }
       const { items, next } = collectIndentedList(lines, i + 1, line.indent);
@@ -597,6 +684,7 @@ export function parseTextDslV05(src: string): V05ParseResult {
       ...(values.length > 0 ? { values } : {}),
       viewport,
       lanes: lanesMap,
+      readouts: readoutsList,
       groups: groupsMap,
       pos: { line: 1 },
     },
@@ -937,6 +1025,367 @@ export const LANE_VALUE_KINDS = {
   lifeline: "真偽",
 } as const satisfies Record<string, 値の形>;
 
+/**
+ * 箱の中に描く図形 (`shape:`) と、値を見せる部品 (`readouts:`) の欄 (#1374)。
+ *
+ * どちらも描画側 (`CdlDynShape` / `CdlReadout`) の形をそのまま渡す。 記法の値は全て文字列で
+ * 届くため、欄ごとに「数」 「文字列」 「数か文字列」 のどれとして読むかを表で持つ。
+ *
+ * **「数か文字列」 は状態を追いかける欄**。 `level: 80` のように数を直接書くこともできるし、
+ * `level: "{s1}"` のように状態の名前を書いて段の中で動かすこともできる。 数として読めた時
+ * だけ数にし、読めなければ文字列のまま渡す。
+ *
+ * ## 表を持つ理由
+ *
+ * 表が無いと「知らない欄を黙って捨てる」 か「何でも通す」 のどちらかになる。 前者は書いた
+ * 指定が消え、後者は綴り違いがそのまま描画側へ流れて別の形で失敗する。 表があれば
+ * 書いた場所と使える欄を添えて知らせられる。
+ */
+// 欄の形と定義の型は `parser-types.ts` が持つ (#1385)。 生成した部品の表がこの型を使うため、
+// `parser.ts` に置いたままだと 生成した表 → parser → 生成した表 の輪ができる
+export type { 欄の形, 図形の定義 } from "./parser-types";
+
+/** 描ける図形と、その欄 (`CdlDynShape` の全 5 種を覆う) */
+export const 図形の表: Record<string, 図形の定義> = {
+  rect: {
+    必須: ["source", "fillMax"],
+    欄: {
+      source: "数か文字列",
+      fillMax: "数",
+      orient: "向き",
+      fill: "文字列",
+      stroke: "文字列",
+      radius: "数",
+    },
+  },
+  circle: {
+    必須: [],
+    欄: { radius: "数か文字列", fillProgress: "数か文字列", fill: "文字列", stroke: "文字列" },
+  },
+  arc: {
+    必須: ["angle"],
+    欄: {
+      innerRadius: "数",
+      outerRadius: "数",
+      startAngle: "数",
+      angle: "数か文字列",
+      sweepMax: "数",
+      fill: "文字列",
+      stroke: "文字列",
+    },
+  },
+  wave: {
+    必須: ["level", "amplitude"],
+    欄: {
+      level: "数か文字列",
+      amplitude: "数",
+      frequency: "数",
+      waveHeight: "数",
+      fill: "文字列",
+      stroke: "文字列",
+    },
+  },
+  polygon: {
+    必須: ["sides"],
+    欄: {
+      sides: "数",
+      radius: "数か文字列",
+      rotation: "数か文字列",
+      fill: "文字列",
+      stroke: "文字列",
+    },
+  },
+};
+
+/**
+ * 記法が受ける部品と、その欄。
+ *
+ * **手で書かず、描画側の型定義から生成する** (#1385)。 描画側は 107 種を持ち欄は 510 個あり、
+ * 手で写すと写し間違いと描画側の変更への drift が残る (`rules/quality.md § 導出可能記述は
+ * 人手で書かない`)。
+ *
+ * 作り直す = `node packages/dragon/scripts/gen-readout-table.mjs`
+ * ずれの検知 = `packages/dragon/test/readout-table-generated.test.ts`
+ */
+export { 部品の表, 部品の組の表 } from "./readout-table.generated";
+import { 部品の表, 部品の組の表 } from "./readout-table.generated";
+import type { 図形の定義 } from "./parser-types";
+
+/** `[a, b]` の形を文字列の並びに読む */
+function 並びとして読む(raw: string): string[] {
+  return raw
+    .replace(/^\[|\]$/g, "")
+    .split(/,(?![^[]*\])/)
+    .map((x) => stripQuotes(x.trim()))
+    .filter((x) => x !== "");
+}
+
+/**
+ * `[{ a: 1 }, { b: 2 }]` の形を、中括弧ごとの組の並びに読む (#1381)。
+ *
+ * `並びとして読む` は葉の値しか想定していないため、中括弧を含む形を渡すと項目の途中で
+ * 割れる。 中括弧の深さを数えて、深さ 0 の位置だけで割る。
+ *
+ * 読めない形は捨てずに `undefined` を返す。 呼び手が行番号付きで知らせる = 黙って捨てると
+ * 「書いたのに出ない」 が手掛かりなしで起きる。
+ */
+function 組の並びとして読む(raw: string): Record<string, string>[] | undefined {
+  const 中身 = raw.trim();
+  if (!中身.startsWith("[") || !中身.endsWith("]")) return undefined;
+  const 本体 = 中身.slice(1, -1);
+
+  const 塊: string[] = [];
+  let i = 0;
+  let 次は組 = true;
+  while (i < 本体.length) {
+    while (i < 本体.length && /\s/u.test(本体[i]!)) i += 1;
+    if (i >= 本体.length) break;
+
+    if (!次は組) {
+      if (本体[i] !== ",") return undefined;
+      次は組 = true;
+      i += 1;
+      continue;
+    }
+    if (本体[i] !== "{") return undefined;
+
+    const 始まり = i + 1;
+    let 引用: '"' | "'" | null = null;
+    let 直前: string | null = "{";
+    i += 1;
+    for (; i < 本体.length; i += 1) {
+      const c = 本体[i]!;
+      if (引用 !== null) {
+        if (引用 === '"' && c === "\\" && i + 1 < 本体.length) {
+          i += 1;
+          continue;
+        }
+        if (c === 引用) 引用 = null;
+        continue;
+      }
+      if ((c === '"' || c === "'") && (直前 === null || ":,{[".includes(直前))) {
+        引用 = c;
+        直前 = c;
+        continue;
+      }
+      // 組の中身は葉だけ。 引用符の外の入れ子は値の形を保てない。
+      if (c === "{") return undefined;
+      if (c === "}") {
+        塊.push(本体.slice(始まり, i));
+        i += 1;
+        次は組 = false;
+        break;
+      }
+      if (!/\s/u.test(c)) 直前 = c;
+    }
+    if (次は組) return undefined;
+  }
+  if (次は組 && 塊.length > 0) return undefined;
+  if (塊.length === 0) return undefined;
+
+  const 出: Record<string, string>[] = [];
+  for (const t of 塊) {
+    const 組 = parseInlineMapping(t);
+    if (Object.keys(組).length === 0) return undefined;
+    出.push(組);
+  }
+  return 出;
+}
+
+function 部品の組を検査する(
+  kind: string,
+  読めた: Record<string, unknown>,
+  line: number,
+  errors: DslError[],
+): void {
+  for (const [欄, 定義] of Object.entries(部品の組の表[kind] ?? {})) {
+    const 並び = 読めた[欄];
+    if (!Array.isArray(並び)) continue;
+    並び.forEach((組, i) => {
+      const o = 組 as Record<string, unknown>;
+      for (const k of Object.keys(o)) {
+        if (k in 定義.欄) continue;
+        errors.push({
+          line,
+          message: `部品の ${欄}[${i}] の項目名が読めません: "${k}"`,
+          hint: `使える項目 = ${Object.keys(定義.欄).join(", ")}`,
+        });
+      }
+      for (const k of 定義.必須) {
+        if (o[k] !== undefined) continue;
+        errors.push({
+          line,
+          message: `部品の ${欄}[${i}].${k} は必ず書きます`,
+          hint: `必須の項目 = ${定義.必須.join(", ")}`,
+        });
+      }
+    });
+  }
+}
+
+/**
+ * 中括弧の中身を、表に従って読む (#1374)。
+ *
+ * 知らない欄と足りない必須欄は行番号付きで知らせる。 読めた欄だけを返すため、
+ * 知らせが出た欄は描画側へ渡らない。
+ */
+function 表に従って読む(
+  定義: 図形の定義,
+  opts: Record<string, string>,
+  接頭: string,
+  line: number,
+  errors: DslError[],
+): Record<string, unknown> {
+  const out: Record<string, unknown> = {};
+  for (const [欄, 値] of Object.entries(opts)) {
+    if (欄 === "kind") continue;
+    const 形 = 定義.欄[欄];
+    if (形 === undefined) {
+      errors.push({
+        line,
+        message: `${接頭}の項目名が読めません: "${欄}"`,
+        hint: `使える項目 = ${Object.keys(定義.欄).join(", ")}`,
+      });
+      continue;
+    }
+    /*
+     * 空の値を落とすのは文字列以外だけ (#1385)。
+     *
+     * `unit: ""` は「単位を出さない」 という指定で、書いた人の意図がある。 落とすと
+     * 書かなかった場合と同じになり、描画側の既定が出る = 書いたのに効かない。
+     *
+     * 値を書かなかった形 (`unit:`) はここに届かない = `parseInlineMapping` が値 1 文字以上を
+     * 求めるため、名前ごと拾われない。 したがって空が来るのは引用符で明示した時だけ。
+     */
+    if (値 === "" && 形 !== "文字列") continue;
+    if (形 === "数") {
+      const n = 数として読む(値, `${接頭}${欄}`, line, errors);
+      if (n !== undefined) out[欄] = n;
+    } else if (形 === "数か文字列") {
+      const n = numberOrUndef(値);
+      out[欄] = n !== undefined ? n : 値;
+    } else if (形 === "文字列の並び") {
+      out[欄] = 並びとして読む(値);
+    } else if (形 === "組の並び") {
+      const 組 = 組の並びとして読む(値);
+      if (組 !== undefined) out[欄] = 組;
+      else {
+        errors.push({
+          line,
+          message: `${接頭}${欄} の並びが読めません: "${値}"`,
+          hint: '`[{ value: "online", color: "#22c55e" }]` の形で書く',
+        });
+      }
+    } else if (形 === "真偽") {
+      // 描画側は `boolean` を取る。 `"true"` / `"false"` の 2 語だけを受け、それ以外は
+      // 黙って真に倒さず知らせる = `visibleIf` と違い、ここは真偽そのものを渡す欄
+      if (値 === "true" || 値 === "false") out[欄] = 値 === "true";
+      else {
+        errors.push({
+          line,
+          message: `${接頭}${欄} の真偽が読めません: "${値}"`,
+          hint: "使える値 = true, false",
+        });
+      }
+    } else if (形 === "向き") {
+      if (["up", "down", "left", "right"].includes(値)) out[欄] = 値;
+      else {
+        errors.push({
+          line,
+          message: `${接頭}${欄} の向きが読めません: "${値}"`,
+          hint: "使える値 = up, down, left, right",
+        });
+      }
+    } else {
+      out[欄] = 値;
+    }
+  }
+  for (const 欄 of 定義.必須) {
+    if (out[欄] === undefined) {
+      errors.push({
+        line,
+        message: `${接頭}${欄} は必ず書きます`,
+        hint: `必須の項目 = ${定義.必須.join(", ")}`,
+      });
+    }
+  }
+  return out;
+}
+
+/**
+ * その箱を出すかどうかの条件を読む (#1381)。
+ *
+ * 描画側は空文字を偽として扱うため、`visibleIf: ` と書くと「常に出ない箱」 になる。
+ * 書いた本人はたいてい条件を書き忘れただけなので、空は捨てずに行番号付きで知らせる。
+ */
+function 出す条件として読む(
+  raw: string | undefined,
+  line: number,
+  errors: DslError[],
+): string | undefined {
+  if (raw === undefined) return undefined;
+  const 値 = raw.trim();
+  if (値 === "") {
+    errors.push({
+      line,
+      message: "箱の visibleIf が空です",
+      hint: '`visibleIf: "{flag}"` のように条件を書く。 常に隠すなら `visibleIf: "0"`',
+    });
+    return undefined;
+  }
+  return 値;
+}
+
+/**
+ * 箱の中に描く図形を読む (#1374)。 読めなければ `undefined` を返す。
+ *
+ * 種類が分からない形は捨てずに知らせる = 黙って捨てると、書いた図形が出ないのに
+ * 手掛かりが 1 つも残らない。
+ */
+function 図形として読む(raw: string, line: number, errors: DslError[]): DslDynShape | undefined {
+  const 中身 = raw.trim().replace(/^\{|\}$/g, "");
+  const opts = parseInlineMapping(中身);
+  const kind = (opts.kind ?? "").toLowerCase();
+  const 定義 = 図形の表[kind];
+  if (定義 === undefined) {
+    errors.push({
+      line,
+      message: `図形の種類が読めません: "${opts.kind ?? ""}"`,
+      hint: `使える種類 = ${Object.keys(図形の表).join(", ")}`,
+    });
+    return undefined;
+  }
+  const 読めた = 表に従って読む(定義, opts, `図形の `, line, errors);
+  for (const 欄 of 定義.必須) if (読めた[欄] === undefined) return undefined;
+  return { kind, ...読めた } as DslDynShape;
+}
+
+/**
+ * 値を見せる部品を読む (#1374)。 読めなければ `undefined` を返す。
+ */
+function 部品として読む(
+  id: string,
+  raw: string,
+  line: number,
+  errors: DslError[],
+): DslReadout | undefined {
+  const opts = parseInlineMapping(raw);
+  const kind = (opts.kind ?? "").toLowerCase();
+  const 定義 = 部品の表[kind];
+  if (定義 === undefined) {
+    errors.push({
+      line,
+      message: `部品の種類が読めません: "${opts.kind ?? ""}"`,
+      hint: `使える種類 = ${Object.keys(部品の表).join(", ")}`,
+    });
+    return undefined;
+  }
+  const 読めた = 表に従って読む(定義, opts, `部品 ${id} の `, line, errors);
+  部品の組を検査する(kind, 読めた, line, errors);
+  for (const 欄 of 定義.必須) if (読めた[欄] === undefined) return undefined;
+  return { id, kind, ...読めた } as DslReadout;
+}
+
 /** 箱の中の要素の欄 (#1306)。 `DslActorNodeOverride` の全欄を覆う */
 export const ACTOR_NODE_VALUE_KINDS = {
   posX: "数",
@@ -1002,20 +1451,40 @@ function matchActorInlineMapping(raw: string): { name: string; inner: string } |
   const name = raw.slice(0, colonIdx);
   const rest = raw.slice(colonIdx + 1).trim();
   if (!rest.startsWith("{")) return null;
-  // depth count で対応 brace 探す
-  let depth = 0;
-  let endIdx = -1;
-  for (let i = 0; i < rest.length; i += 1) {
-    const c = rest[i]!;
-    if (c === "{") depth += 1;
-    else if (c === "}") {
-      depth -= 1;
-      if (depth === 0) {
-        endIdx = i;
-        break;
+  // depth count で対応 brace 探す。 正しい引用符の中の `}` は飛ばす。
+  const 終わりを探す = (引用符を見る: boolean): number => {
+    let depth = 0;
+    let 引用符: '"' | "'" | null = null;
+    let 直前: string | null = null;
+    for (let i = 0; i < rest.length; i += 1) {
+      const c = rest[i]!;
+      if (引用符を見る) {
+        if (引用符 !== null) {
+          if (引用符 === '"' && c === "\\" && i + 1 < rest.length) {
+            i += 1;
+            continue;
+          }
+          if (c === 引用符) 引用符 = null;
+          continue;
+        }
+        if ((c === '"' || c === "'") && (直前 === null || ":,{[".includes(直前))) {
+          引用符 = c;
+          直前 = c;
+          continue;
+        }
       }
+      if (c === "{") depth += 1;
+      else if (c === "}") {
+        depth -= 1;
+        if (depth === 0) return i;
+      }
+      if (!/\s/u.test(c)) 直前 = c;
     }
-  }
+    return -1;
+  };
+  let endIdx = 終わりを探す(true);
+  // 閉じない引用符は従来どおり単純分割へ戻す (#1367)。
+  if (endIdx < 0) endIdx = 終わりを探す(false);
   if (endIdx < 0) return null;
   const inner = rest.slice(1, endIdx);
   return { name, inner };
@@ -1069,24 +1538,63 @@ function writtenScaleFields(inner: string): Map<string, string> {
  *
  * `parseInlineMapping` と、倍率の「書かれた名前」 を拾う経路 (#1026) で共用する。
  * 割り方を 2 つ持つと、片方だけが拾える項目という食い違いが生まれる。
+ *
+ * **引用符の中のカンマでは割らない** (#1367)。 見ていなかった間、`{ subtitle: "a, b" }` の
+ * 補足が `"a` に切れて図に出ていた (実測で見本 1 件が踏んでいた)。 配列
+ * (`{ initial: '["入力", "確認"]' }`) が壊れていなかったのは角括弧の深さで守られていたためで、
+ * 引用符だけで守られる値は守られていなかった。
  */
 function splitInlineFields(inner: string): string[] {
-  let depth = 0;
-  let buf = "";
-  const parts: string[] = [];
-  for (let i = 0; i < inner.length; i += 1) {
-    const c = inner[i]!;
-    if (c === "[" || c === "{") depth += 1;
-    else if (c === "]" || c === "}") depth -= 1;
-    if (c === "," && depth === 0) {
-      parts.push(buf);
-      buf = "";
-      continue;
+  const 引用符を見て割る = (見る: boolean): { parts: string[]; 閉じた: boolean } => {
+    let depth = 0;
+    let 引用符: '"' | "'" | null = null;
+    let 直前: string | null = null;
+    let buf = "";
+    const parts: string[] = [];
+    for (let i = 0; i < inner.length; i += 1) {
+      const c = inner[i]!;
+      if (見る) {
+        if (引用符 !== null) {
+          // 二重引用の中では、逃がした引用符を終端と取り違えない
+          if (引用符 === '"' && c === "\\" && i + 1 < inner.length) {
+            buf += c;
+            i += 1;
+            buf += inner[i]!;
+            continue;
+          }
+          // **開いた記号と同じものだけが閉じる**。 `"Guns N' Roses"` の `'` は文字として残す
+          if (c === 引用符) 引用符 = null;
+          buf += c;
+          continue;
+        }
+        // 値の途中の apostrophe まで開始記号にすると、別 field まで引用内として飲み込む
+        if ((c === '"' || c === "'") && (直前 === null || ":,{[".includes(直前))) {
+          引用符 = c;
+          直前 = c;
+          buf += c;
+          continue;
+        }
+      }
+      if (c === "[" || c === "{") depth += 1;
+      else if (c === "]" || c === "}") depth -= 1;
+      if (c === "," && depth === 0) {
+        parts.push(buf);
+        buf = "";
+        直前 = c;
+        continue;
+      }
+      buf += c;
+      if (c !== " " && c !== "\t") 直前 = c;
     }
-    buf += c;
-  }
-  if (buf.trim()) parts.push(buf);
-  return parts;
+    if (buf.trim()) parts.push(buf);
+    return { parts, 閉じた: 引用符 === null };
+  };
+
+  const 見た = 引用符を見て割る(true);
+  // **閉じない引用符が残ったらこれまでどおりに割る** (#1367)。 壊れた入力で挙動が変わると、
+  // 今まで通っていた書き方が黙って別の結果になる。 実測では見本 9832 件の中括弧のうち
+  // 閉じない形は 0 件で、この経路は保険
+  return 見た.閉じた ? 見た.parts : 引用符を見て割る(false).parts;
 }
 
 function collectIndentedList(
@@ -1287,6 +1795,18 @@ function applyContinuationLines(actor: DslActor, rest: Line[], errors: DslError[
       case "値":
         out.value = stripQuotes(raw);
         break;
+      case "shape":
+      case "図形":
+        out.shape = 図形として読む(raw, ln.no, errors);
+        break;
+      case "visibleIf":
+      case "出す条件":
+        out.visibleIf = 出す条件として読む(stripQuotes(raw), ln.no, errors);
+        break;
+      case "title":
+      case "題":
+        out.title = stripQuotes(raw);
+        break;
       case "rows":
       case "行":
         out.rows = raw
@@ -1386,11 +1906,7 @@ function applyContinuationLines(actor: DslActor, rest: Line[], errors: DslError[
   // 名前の行と縦に並べた行の両方に倍率がある形では、後に書いた縦の行を採る。
   // 知らせ (`scale-reserved`) は書かれた名前をすべて見るので、名前だけは足し合わせる
   if (scaleWritten.size > 0) {
-    const s = resolveScale(
-      scaleWritten,
-      (key) => scaleLines.get(key) ?? actor.pos.line,
-      errors,
-    );
+    const s = resolveScale(scaleWritten, (key) => scaleLines.get(key) ?? actor.pos.line, errors);
     out.scale = s.scale;
     out.scaleKeys = [...new Set([...(actor.scaleKeys ?? []), ...s.keys])];
   }
@@ -1438,6 +1954,15 @@ export const ACTOR_ITEM_KEYS: ReadonlySet<string> = new Set([
   "値",
   "rows",
   "行",
+  // 箱の中に描く図形 (#1374)
+  "shape",
+  "図形",
+  // その箱を出すかどうかの条件 (#1381)
+  "visibleIf",
+  "出す条件",
+  // 箱に出す題 (#1381)
+  "title",
+  "題",
   "位置",
   "pos",
   "posX",
@@ -1776,6 +2301,12 @@ export const INLINE_ACTOR_KEYS: ReadonlySet<string> = new Set([
   "posY",
   "posW",
   "posH",
+  // 箱の中に描く図形 (#1374)
+  "shape",
+  // その箱を出すかどうかの条件 (#1381)
+  "visibleIf",
+  // 箱に出す題 (#1381)。 名前と切り離して書ける
+  "title",
   // 倍率は別経路 (`reportScaleOnNonPart`) が知らせる。 ここでも読める扱いにしないと
   // 同じ名前で 2 度知らせることになる
   "scale",
@@ -1799,6 +2330,11 @@ const FLOW_INLINE_READERS = {
   sub: (v: string | undefined) => v,
   guard: (v: string | undefined) => v,
   cardinality: (v: string | undefined) => v,
+  // 矢印がどの辺から出るか (#1385)。 描画側は 4 方向を取り、書かなければ自動で選ぶ
+  side: (v: string | undefined) =>
+    v !== undefined && (EDGE_SIDE_VALUES as readonly string[]).includes(v)
+      ? (v as "top" | "right" | "bottom" | "left")
+      : undefined,
   // 数と真偽の欄は `FLOW_INLINE_VALUE_KINDS` の表が読む (#1306)。 ここでは名前だけを持つ =
   // 読める欄の一覧 (`FLOW_INLINE_KEYS`) は本表から導くため、載せないと欄ごと消える
   labelOffsetX: null,
@@ -1907,6 +2443,15 @@ function parseActor(line: Line, errors: DslError[]): DslActor | null {
             .filter(Boolean)
         : undefined,
       lane: opts.lane,
+      // 箱の中に描く図形 (#1374)。 パーツでは状態の上書きとして意味を持つため横取りしない
+      shape:
+        isPart || opts.shape === undefined
+          ? undefined
+          : 図形として読む(opts.shape, line.no, errors),
+      // 出す条件 (#1381)。 パーツでは状態の上書きとして意味を持つため横取りしない
+      visibleIf: isPart ? undefined : 出す条件として読む(opts.visibleIf, line.no, errors),
+      // 箱に出す題 (#1381)。 空文字も意味を持つ (題を出さない箱) ため undefined と分ける
+      title: isPart ? undefined : opts.title,
       ...表で読む(ACTOR_INLINE_VALUE_KINDS, opts, "箱の ", line.no, errors),
       // parts では `tone` を状態の上書きとして従来から使えるため、 色として横取りしない
       tone: isPart ? undefined : resolveTone(opts.tone),
@@ -1991,8 +2536,16 @@ function parseFlowStep(line: Line, no: number, errors: DslError[]): DslStep | nu
     const opts = parseInlineMapping(mapMatch[1]!);
     // 文字列の欄はそのまま入れ、数と真偽の欄は表が読んで読めない値を知らせる (#1306)
     for (const k of FLOW_INLINE_KEYS) {
-      if (FLOW_INLINE_READERS[k] === null) continue;
-      中括弧[k] = opts[k];
+      const 読み手 = FLOW_INLINE_READERS[k];
+      if (読み手 === null) continue;
+      中括弧[k] = 読み手(opts[k]);
+    }
+    if (opts.side !== undefined && 中括弧.side === undefined) {
+      errors.push({
+        line: line.no,
+        message: `矢印の side が読めません: "${opts.side}"`,
+        hint: `使える値 = ${EDGE_SIDE_VALUES.join(", ")}`,
+      });
     }
     数と真偽 = 表で読む(FLOW_INLINE_VALUE_KINDS, opts, "矢印の ", line.no, errors);
     rest = rest.slice(0, mapMatch.index ?? 0).trim();
@@ -2000,6 +2553,7 @@ function parseFlowStep(line: Line, no: number, errors: DslError[]): DslStep | nu
   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;
   const labelOffsetX = 数と真偽?.labelOffsetX;
   const labelOffsetY = 数と真偽?.labelOffsetY;
   const overlay = 数と真偽?.overlay;
@@ -2059,6 +2613,7 @@ function parseFlowStep(line: Line, no: number, errors: DslError[]): DslStep | nu
     sub,
     guard,
     cardinality,
+    side,
     labelOffsetX,
     labelOffsetY,
     overlay,
@@ -2181,7 +2736,15 @@ function ensureAnimate(a: DslAnimate | undefined, lineNo: number): DslAnimate {
  * (#1330)。 段の項目と値は階層が違うので衝突しないが、同じ語が 2 つの意味で並ぶと
  * 見本を読む人が階層から意味を判断することになる。
  */
-export const PHASE_ITEM_WORDS = ["focus", "badge", "body", "description", "tween", "set", "draw"] as const;
+export const PHASE_ITEM_WORDS = [
+  "focus",
+  "badge",
+  "body",
+  "description",
+  "tween",
+  "set",
+  "draw",
+] as const;
 
 const 段の項目の英語 = PHASE_ITEM_WORDS;
 const 段の項目の集合: ReadonlySet<string> = new Set(PHASE_ITEM_WORDS);