@cardenelabs/dragon 0.15.0 → 0.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/dragon",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "description": "Dragon — Mermaid 感覚で animated SVG を生成する Text DSL。 cdl engine を内部利用。",
   "license": "MIT",
   "author": "cardene777",
@@ -46,8 +46,18 @@
     "node": ">=18"
   },
   "sideEffects": false,
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "typecheck:test": "tsc --noEmit -p tsconfig.test.json",
+    "test": "cd ../.. && vitest run packages/dragon",
+    "test:watch": "cd ../.. && vitest packages/dragon",
+    "lint": "tsc --noEmit",
+    "prepublishOnly": "pnpm run typecheck && pnpm run test && pnpm run build"
+  },
   "dependencies": {
-    "@cardenelabs/cdl": "^0.14.0"
+    "@cardenelabs/cdl": "^0.15.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",
@@ -66,14 +76,5 @@
     "react": "^19.1.0",
     "tsup": "^8.5.1",
     "typescript": "^5.8.0"
-  },
-  "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
-    "typecheck": "tsc --noEmit",
-    "typecheck:test": "tsc --noEmit -p tsconfig.test.json",
-    "test": "cd ../.. && vitest run packages/dragon",
-    "test:watch": "cd ../.. && vitest packages/dragon",
-    "lint": "tsc --noEmit"
   }
-}
+}

package/src/compile.ts

@@ -255,6 +255,21 @@ export function compileToCdl(doc: DslDocument, opts?: CompileToCdlOpts): CdlDiag
     case "line":
       diagram = compileValueChart(doc, "line", "chart-line", opts?.onNotice);
       break;
+    case "gauge":
+      diagram = compileValueChart(doc, "gauge", "chart-gauge", opts?.onNotice);
+      break;
+    case "radial":
+      diagram = compileValueChart(doc, "radial", "chart-radial", opts?.onNotice);
+      break;
+    case "stat":
+      diagram = compileValueChart(doc, "stat", "chart-stat", opts?.onNotice);
+      break;
+    case "waffle":
+      diagram = compileValueChart(doc, "waffle", "chart-waffle", opts?.onNotice);
+      break;
+    case "stacked":
+      diagram = compileValueChart(doc, "stacked", "chart-stacked-bar", opts?.onNotice);
+      break;
     case "funnel":
       diagram = compileFunnel(doc, opts?.onNotice);
       break;
@@ -700,6 +715,11 @@ const 図種の作り: Record<PresetType, "登場人物ごとに箱" | "図全
   pie: "図全体を 1 箱",
   bar: "図全体を 1 箱",
   line: "図全体を 1 箱",
+  gauge: "図全体を 1 箱",
+  radial: "図全体を 1 箱",
+  stat: "図全体を 1 箱",
+  waffle: "図全体を 1 箱",
+  stacked: "図全体を 1 箱",
   funnel: "図全体を 1 箱",
   tree: "図全体を 1 箱",
   journey: "図全体を 1 箱",
@@ -1062,6 +1082,11 @@ const 空の形の逃げ先: Record<PresetType, string[]> = {
   pie: [],
   bar: [],
   line: [],
+  gauge: [],
+  radial: [],
+  stat: [],
+  waffle: [],
+  stacked: [],
   funnel: [],
   tree: [],
   journey: [],
@@ -4591,8 +4616,16 @@ function 参照する名前(value: number | string | null): string | null {
  */
 function compileValueChart(
   doc: DslDocument,
-  型: "pie" | "bar" | "line",
-  kind: "chart-pie" | "chart-bar" | "chart-line",
+  型: "pie" | "bar" | "line" | "gauge" | "radial" | "stat" | "waffle" | "stacked",
+  kind:
+    | "chart-pie"
+    | "chart-bar"
+    | "chart-line"
+    | "chart-gauge"
+    | "chart-radial"
+    | "chart-stat"
+    | "chart-waffle"
+    | "chart-stacked-bar",
   onNotice?: (notice: CompileNotice) => void,
 ): CdlDiagram {
   const b = diagram(slugify(doc.title), { topic: doc.title });
@@ -4600,11 +4633,19 @@ function compileValueChart(
   // **高さは型で違い、 格子に載せる**。 描画側 (`cdl` の `chart()` preset) は `pie` を 320、
   // 棒と折れ線を 360 とした上で **16 の倍数へ切り上げる** (360 は 16 で割り切れないので 368)。
   // 切り上げないと下端が格子から外れ、 全図で位置の警告が出る (review 指摘)
-  const CHART_H = 型 === "pie" ? 320 : 368;
+  // 半円と弧は縦を使わないので円と同じ 320。 描画側 (`cdl` の `chart()` preset) が
+  // `pie` / `gauge` / `radial` を 320、棒と折れ線を 360 とし、16 の倍数へ切り上げる
+  // 縦に余白が要らない型。 描画側 (`cdl` の `chart()` preset) と揃える。
+  // 半円 / 弧 / 割合の印 は縦を使わず、値 1 つを大きく示す図も縦に伸びない
+  const 低い型 =
+    型 === "pie" || 型 === "gauge" || 型 === "radial" || 型 === "waffle" || 型 === "stat";
+  const CHART_H = 低い型 ? 320 : 368;
   b.lane("chart", { width: CHART_W + 64 });
 
   const data: NonNullable<CdlDiagram["nodes"][number]["chartData"]> = [];
   const 読めない: string[] = [];
+  const 前が読めない: string[] = [];
+  let 前が読めない行 = 0;
   const 未宣言: string[] = [];
   let 未宣言行 = 0;
   const 参照できる = 数の欄から参照できる名前(doc);
@@ -4631,16 +4672,37 @@ function compileValueChart(
       continue;
     }
     // 色はそのまま渡す。 箱が 1 つになっても、 書いた色が消えないようにする
-    data.push({ label: 箱の題(a), value, ...(a.tone !== undefined ? { tone: a.tone } : {}) });
+    // 前の時点の値 (#1450)。 読めない形は黙って捨てず知らせる = 書いたのに 2 本目の帯が
+    // 出ない状態になり、手掛かりが残らない
+    const 前 = a.previous === undefined ? null : parseChartValue(a.previous);
+    if (a.previous !== undefined && 前 === null) {
+      if (前が読めない.length === 0) 前が読めない行 = a.pos?.line ?? 0;
+      前が読めない.push(a.name);
+    }
+    data.push({
+      label: 箱の題(a),
+      value,
+      ...(前 === null ? {} : { previous: 前 }),
+      ...(a.tone !== undefined ? { tone: a.tone } : {}),
+    });
   }
   // 案内の言葉は型ごとに変える。 共通化した時に `pie` の「割合 / 円 / 45%」 が「値 / 図 / 45」 に
   // 薄まり、 既存の案内が後退した (review 指摘)。 何を書けばよいかは型ごとに違う
-  const 語 =
-    型 === "pie"
-      ? { 量: "割合", 図: "円", 例: '"45%"' }
-      : 型 === "bar"
-        ? { 量: "値", 図: "棒", 例: '"420"' }
-        : { 量: "値", 図: "折れ線", 例: '"180"' };
+  // 何を書けばよいかは型ごとに違う。 まとめると「割合 / 円 / 45%」 が「値 / 図 / 45」 に薄まる
+  //
+  // **表で持つ**。 三項の連鎖にすると、型が増えるたびに深さが増え、最後の枝が
+  // 「それ以外」 になるため型検査が新しい型の漏れを教えてくれない
+  const 語の表: Record<typeof 型, { 量: string; 図: string; 例: string }> = {
+    pie: { 量: "割合", 図: "円", 例: '"45%"' },
+    bar: { 量: "値", 図: "棒", 例: '"420"' },
+    line: { 量: "値", 図: "折れ線", 例: '"180"' },
+    gauge: { 量: "値", 図: "半円", 例: '"680"' },
+    radial: { 量: "値", 図: "弧", 例: '"72"' },
+    stat: { 量: "値", 図: "大きな数字", 例: '"1200"' },
+    waffle: { 量: "割合", 図: "100 個の印", 例: '"45%"' },
+    stacked: { 量: "内訳の値", 図: "帯", 例: '"320"' },
+  };
+  const 語 = 語の表[型];
 
   /**
    * 利用者に伝える。 **`console.warn` だけにしない**。 エディタは受け取った notice を画面に
@@ -4669,6 +4731,15 @@ function compileValueChart(
       未宣言行,
     );
   }
+  if (前が読めない.length > 0) {
+    伝える(
+      "chart-value-unreadable",
+      前が読めない[0]!,
+      `type: ${型} で前の時点の値を読めない項目があります (前の値を使いません): ${前が読めない.join(", ")}。` +
+        " `- 名前: { value: " + 語.例 + ", previous: " + 語.例 + " }` の形で書いてください",
+      前が読めない行,
+    );
+  }
   if (doc.flow.length > 0) {
     伝える(
       "chart-edge-dropped",
@@ -5493,6 +5564,8 @@ type 放射で描けない欄 =
   | "stack"
   | "initial"
   | "final"
+  // 前の時点の値 (#1450)。 放射の枝は 1 時点しか描かない = 2 本目の帯に当たるものが無い
+  | "previous"
   | "colorHex"
   | "stateOverride"
   | "posX"
@@ -5556,6 +5629,7 @@ const 放射で描けない欄の名前: Record<放射で描けない欄, string
   stack: "積む順",
   initial: "始まり / 終わり の印",
   final: "始まり / 終わり の印",
+  previous: "前の時点の値",
   colorHex: "色番号",
   stateOverride: "状態の上書き",
   // 位置は「登場人物ごとの箱をどこに置くか」 の指定で、 箱が 1 つの図では置く先が無い
@@ -6174,6 +6248,9 @@ function injectPhasesFallback(diagram: CdlDiagram, doc: DslDocument): void {
       body: p.body ?? "",
       activate: activateIds,
       ...(drawIds.length > 0 ? { draw: drawIds } : {}),
+      // 描く速さ (#1441)。 **描く相手が決まった段にだけ載せる** = 語が効かない図種
+      // (`drawIds` が空) で割合だけ渡すと、描画側が「draw が空なのに割合がある」 と知らせる
+      ...(drawIds.length > 0 && p.drawRatio !== undefined ? { drawRatio: p.drawRatio } : {}),
       tweens: (p.tweens ?? []).map((t) => ({ stateId: t.state, from: t.from, to: t.to })),
       sets: (p.sets ?? []).map((s) => ({ stateId: s.state, value: s.value })),
       ...(p.badge ? { badge: p.badge } : {}),
@@ -6570,9 +6647,35 @@ function 始まりと終わりの決め方(doc: DslDocument): {
   };
 }
 
+/** 状態の図で `stateMachine` preset が全ての箱に使う種類 */
+const 状態の図の既定の種類: NodeKind = "card";
+
+/**
+ * 状態の図で、既定と違う種類を書いた登場人物がいるか (#1450)。
+ *
+ * `stateMachine` preset は全ての状態を `card` で描くため、書いた `kind:` が黙って消える。
+ * 始点終点の印 (`mark-start` / `mark-end`) を書けるようにするには、書いた形を効かせる必要がある。
+ *
+ * **「書いたか」 だけでは広すぎる**。 記法だけの種類 (`kind: state` 等) は `card` に読み替わり、
+ * preset の出す形と同じになる = 書いても何も変わらないので経路を切り替える理由が無い。
+ * 切り替えると既存の図の id と枠の作りが変わる (実測で golden 8 件が落ちた)。
+ *
+ * 読み替えた後の種類が既定と違う時だけ切り替える。 こうすると「書いたのに効かない」 は消え、
+ * 「書いたが結果が同じ」 は従来の経路に留まる。
+ */
+function 既定と違う種類を書いた(doc: DslDocument): boolean {
+  return doc.actors.some(
+    (a) => a.kindWritten === true && 描ける種別(a.kind) !== 状態の図の既定の種類,
+  );
+}
+
 function compileState(doc: DslDocument): CdlDiagram {
   // v0.4 ... animation あり時 builder 直接経路 (各 state を lane で配置、 transition を edge)
-  if (doc.animate && doc.animate.phases.length > 0) {
+  //
+  // **種類を書いた形は動きの有無に関わらず generic 経路へ** (#1450、 #1263 と同じ理由)。
+  // 動く図だけで効かせると、同じ記法でも静止図では指定が黙って消える
+  // (実測 = `kind: mark-start` を書いた箱が `card` になり知らせも出ない)
+  if ((doc.animate && doc.animate.phases.length > 0) || 既定と違う種類を書いた(doc)) {
     return compileGenericWithAnimate(doc, { kind: "state", laneWidth: 360 });
   }
   // stateMachine preset ... actors を state に、 流れ を transition に

package/src/json-parser.ts

@@ -212,6 +212,13 @@ export interface JsonActor {
   subtitle?: string;
   eyebrow?: string;
   value?: string;
+  /**
+   * 前の時点の値 (#1450)。 記法の `{ value: "320", previous: "280" }` と同じ。
+   *
+   * 内訳の変化を帯で示す図 (`type: stacked`) が 2 本目の帯として描き、
+   * 値 1 つを大きく示す図 (`type: stat`) が差として出す。 書かない図は 1 本のまま。
+   */
+  previous?: string;
   rows?: string[];
   lane?: string;
   stack?: number;
@@ -354,6 +361,13 @@ export interface JsonPhase {
    * 受ける 8 語は `DRAW_WORDS` が持つ。 語と同じ図種で、その段の間に図が起点から現れる。
    */
   draw?: string;
+  /**
+   * 描き終えるまでに段の何割を使うか (#1441)。 記法の `draw: line 0.4` の後半と同じ。
+   *
+   * 0 より大きく 1 以下。 書かなければ段の終わりに描き終わる。 `draw` が無い段に書いても
+   * 何も起きない (描く相手が決まらないため、写す時に外す)。
+   */
+  drawRatio?: number;
   /**
    * 段の中で値を動かす (#1186)。 記法の `tween: name 100 -> 90` と同じ。
    *
@@ -444,6 +458,8 @@ export const ACCEPTED_KEYS = {
     "subtitle",
     "eyebrow",
     "value",
+    // 前の時点の値 (#1450)。 内訳の変化を帯で示す図と、値 1 つを大きく示す図が読む
+    "previous",
     "rows",
     "lane",
     "stack",
@@ -496,7 +512,7 @@ export const ACCEPTED_KEYS = {
     "overlay",
     "pos",
   ],
-  phase: ["step", "duration", "focus", "body", "badge", "tween", "set", "draw"],
+  phase: ["step", "duration", "focus", "body", "badge", "tween", "set", "draw", "drawRatio"],
   viewport: ["width", "height", "scale", "laneWidth", "gap", "laneGap", "nodeGap", "labelMargin"],
   lane: ["x", "width", "label", "contain", "lifeline", "pos"],
   group: ["label", "lanes"],
@@ -583,6 +599,7 @@ export const 欄の型表 = {
     subtitle: "文字列",
     eyebrow: "文字列",
     value: "文字列",
+    previous: "文字列",
     rows: "文字列の並び",
     lane: "文字列",
     stack: "数",
@@ -644,6 +661,7 @@ export const 欄の型表 = {
     tween: "object",
     set: "object",
     draw: "描くもの",
+    drawRatio: "数",
   },
   viewport: {
     width: "数",
@@ -2161,6 +2179,7 @@ export function jsonToDoc(json: DragonJson): DslDocument {
       subtitle: a.subtitle,
       eyebrow: a.eyebrow,
       value: a.value,
+      previous: a.previous,
       rows: a.rows,
       lane: a.lane,
       stack: a.stack,
@@ -2286,6 +2305,9 @@ export function jsonToDoc(json: DragonJson): DslDocument {
     badge: p.badge,
     // 書いた段だけが欄を持つ。 空文字を置くと「書いた」 と「書いていない」 が同じ形になる
     ...(p.draw !== undefined ? { draw: p.draw, drawPos: p0 } : {}),
+    // 割合は `draw` がある段にだけ写す。 単独で書いても描く相手が決まらず何も起きないので、
+    // 記法側 (同じ行に書かせる形) と同じ状態に揃える
+    ...(p.draw !== undefined && p.drawRatio !== undefined ? { drawRatio: p.drawRatio } : {}),
     // 段の中で動かす分 (#1186)。 記法側の `tweens` / `sets` と同じ形に写す。
     // 空の配列を置かないのは、記法側が「無ければ field ごと持たない」 形だから
     ...(p.tween && Object.keys(p.tween).length > 0

package/src/schemas/diagram.json

@@ -27,6 +27,11 @@
         "pie",
         "bar",
         "line",
+        "gauge",
+        "radial",
+        "stat",
+        "waffle",
+        "stacked",
         "funnel",
         "tree",
         "journey",
@@ -34,11 +39,11 @@
         "c4",
         "mind"
       ],
-      "description": "図の種類。 型ごとに actors の書き方が違う。 [関係を描く] sequence (時系列の呼び出し) / flow (処理の流れ) / swimlane (責務ごとの流れ) / er (DB の schema) / state (状態の遷移) / topology (network) / solidity (contract) / class (UML の class) / c4 (architecture) / mind (発想の枝分かれ) は actors に名前を並べ flow に矢印を書く。 [値を描く] pie (割合) / bar (棒の高さ) / line (線の高さ、 書いた順に並ぶ) は actors に `- 名前: \"45\"` の形で数を書く。 funnel (段ごとに減る数) も同じ形。 [語を描く] journey (体験の起伏) は `- 登録: \"不満\"` の形で 最高 / 満足 / 普通 / 不満 / 怒り のどれかを書く。 quadrant (2 軸の仕分け) は `- 重複削除: \"左上\"` の形で 左上 / 右上 / 左下 / 右下 のどれかを書く。 [時期を描く] gantt (工程の並び) は `- 設計: \"1月\"` の形で始まりの時期を書き、 flow の矢印で前後関係を書く。 [親子を描く] tree (親子の入れ子) は actors に名前を並べ flow の矢印で親子を書く (矢印の先が子)"
+      "description": "図の種類。 型ごとに actors の書き方が違う。 [関係を描く] sequence (時系列の呼び出し) / flow (処理の流れ) / swimlane (責務ごとの流れ) / er (DB の schema) / state (状態の遷移) / topology (network) / solidity (contract) / class (UML の class) / c4 (architecture) / mind (発想の枝分かれ) は actors に名前を並べ flow に矢印を書く。 [値を描く] pie (割合) / bar (棒の高さ) / line (線の高さ、 書いた順に並ぶ) / gauge (合計を半円で示す) / radial (弧の長さで比べる) / stat (値 1 つを大きく示す) / waffle (割合を 100 個の印で示す) / stacked (内訳を帯で示す) は actors に `- 名前: \"45\"` の形で数を書く。 stat と stacked は `- 名前: { value: \"320\", previous: \"280\" }` の形で前の時点の値も書ける。 funnel (段ごとに減る数) も同じ形。 [語を描く] journey (体験の起伏) は `- 登録: \"不満\"` の形で 最高 / 満足 / 普通 / 不満 / 怒り のどれかを書く。 quadrant (2 軸の仕分け) は `- 重複削除: \"左上\"` の形で 左上 / 右上 / 左下 / 右下 のどれかを書く。 [時期を描く] gantt (工程の並び) は `- 設計: \"1月\"` の形で始まりの時期を書き、 flow の矢印で前後関係を書く。 [親子を描く] tree (親子の入れ子) は actors に名前を並べ flow の矢印で親子を書く (矢印の先が子)"
     },
     "eyebrow": {
       "type": "string",
-      "description": "図表の箱の上に出す小見出し (省略可)。 効くのは図全体を 1 箱にする型 (pie / bar / line / funnel / tree / journey / quadrant / mind / gantt) だけ。 箱ごとに分かれる型では相手が決まらないため、 actors[].eyebrow に書く"
+      "description": "図表の箱の上に出す小見出し (省略可)。 効くのは図全体を 1 箱にする型 (pie / bar / line / gauge / radial / stat / waffle / stacked / funnel / tree / journey / quadrant / mind / gantt) だけ。 箱ごとに分かれる型では相手が決まらないため、 actors[].eyebrow に書く"
     },
     "axes": {
       "type": "object",
@@ -107,6 +112,10 @@
                 "type": "string",
                 "description": "actor 数値表示 (kind: actor 用)"
               },
+              "previous": {
+                "type": "string",
+                "description": "前の時点の値。 type: stacked が 2 本目の帯として描き、type: stat が差として出す。 書かない図は 1 本のまま"
+              },
               "rows": {
                 "type": "array",
                 "items": {
@@ -584,6 +593,12 @@
             "enum": ["line", "bar", "pie", "journey", "mind", "tree", "gantt", "funnel"],
             "description": "この phase で起点から描くもの。 語は図種と揃える。 line / journey = 線が左端から右へ伸びる / bar = 棒が横軸から上へ伸びる / pie = 扇が 12 時から時計回りに開く / mind = 枝が中心から外へ伸びる / tree = 枝が根から下へ伸びる / gantt = 帯が各始端から右へ伸びる / funnel = 段が上端から順に積まれる"
           },
+          "drawRatio": {
+            "type": "number",
+            "exclusiveMinimum": 0,
+            "maximum": 1,
+            "description": "描き終えるまでに phase の何割を使うか。 0.4 なら進みが 0.4 に達した時点で描き終わり、残りは描き終わった姿のまま値だけが動く。 書かなければ phase の終わりに描き終わる。 draw と一緒に書く (draw が無いと何も起きない)"
+          },
           "tween": {
             "type": "object",
             "description": "この phase で補間する状態。 状態名 -> [開始値, 終了値]。 名前は英字か _ で始め、 英数字と _ だけを使う",

package/src/types.ts

@@ -71,6 +71,11 @@ export type PresetType =
   | "pie"
   | "bar"
   | "line"
+  | "gauge"
+  | "radial"
+  | "stat"
+  | "waffle"
+  | "stacked"
   | "funnel"
   | "tree"
   | "journey"
@@ -214,6 +219,16 @@ export type DslActor = {
   subtitle?: string;
   eyebrow?: string;
   value?: string;
+  /**
+   * 前の時点の値 (#1450)。
+   *
+   * 内訳の変化を帯で示す図 (`type: stacked`) が 2 本目の帯として描き、値 1 つを大きく示す図
+   * (`type: stat`) が差として出す。 書かない図は 1 本のまま (従来と同じ)。
+   *
+   * **3 時点以上は持たない**。 描画側が 2 時点で設計されており (`cdl#551`)、足すなら欄の形ごと
+   * 決め直すことになる。
+   */
+  previous?: string;
   rows?: string[];
   /**
    * 箱の中に描く図形 (`shape:`、 #1374)。 水位や角度を状態で動かせる。
@@ -546,6 +561,20 @@ export type DslPhase = {
    * 相手の名前は書かせない = 対象の 8 図種はいずれも図全体を 1 箱で描くため相手が決まる。
    */
   draw?: string;
+  /**
+   * 描き終えるまでに段の何割を使うか (#1441)。
+   *
+   * `draw: line 0.4` のように語の後ろに書く。 0 より大きく 1 以下。
+   * 書かなければ段の終わりに描き終わる (従来どおり)。
+   *
+   * **段の長さと描く速さを切り離すための欄**。 伸び具合は段の進みそのものなので、
+   * これが無いと「線はゆっくり引きたいが値の移りは短くしたい」 が書けず、描く速さのために
+   * 段の長さを動かすことになる。 段の長さを動かすと同じ段の `tween` まで遅くなる。
+   *
+   * **`draw` と同じ行に書かせる**。 別の項目にすると「割合だけ書いて `draw` が無い段」 が
+   * 書けてしまい、何も起きない指定になる。 同じ行なら書けない。
+   */
+  drawRatio?: number;
   /**
    * `draw` を書いた行 (#1312)。 知らせの行番号に使う。
    *

package/src/v05/parser.ts

@@ -249,6 +249,11 @@ export const PRESET_TYPES: ReadonlySet<PresetType> = new Set([
   "pie",
   "bar",
   "line",
+  "gauge",
+  "radial",
+  "stat",
+  "waffle",
+  "stacked",
   "funnel",
   "tree",
   "journey",
@@ -2376,6 +2381,11 @@ function applyContinuationLines(actor: DslActor, rest: Line[], errors: DslError[
       case "値":
         out.value = stripQuotes(raw);
         break;
+      // 前の時点の値 (#1450)。 内訳を帯で示す図と値 1 つを大きく示す図が読む
+      case "previous":
+      case "前の値":
+        out.previous = stripQuotes(raw);
+        break;
       case "shape":
       case "図形":
         out.shape = 図形として読む(raw, ln.no, errors);
@@ -2572,6 +2582,9 @@ export const ACTOR_ITEM_KEYS: ReadonlySet<string> = new Set([
   "補足",
   "value",
   "値",
+  // 前の時点の値 (#1450)。 内訳の変化を帯で示す図と、値 1 つを大きく示す図が読む
+  "previous",
+  "前の値",
   "rows",
   "行",
   // 箱の中に描く図形 (#1374)
@@ -2736,6 +2749,7 @@ const ACTOR_RESERVED_FIELDS: ReadonlySet<string> = new Set([
   "subtitle",
   "eyebrow",
   "value",
+  "previous",
   "rows",
   "lane",
   "stack",
@@ -2888,6 +2902,7 @@ export const INLINE_ACTOR_ALIASES: Record<string, string> = {
   種類: "kind",
   補足: "subtitle",
   値: "value",
+  前の値: "previous",
   行: "rows",
 };
 
@@ -2910,6 +2925,7 @@ export const INLINE_ACTOR_KEYS: ReadonlySet<string> = new Set([
   "subtitle",
   "eyebrow",
   "value",
+  "previous",
   "rows",
   "lane",
   "stack",
@@ -3080,6 +3096,7 @@ function parseActor(line: Line, errors: DslError[]): DslActor | null {
       owner: isPart ? undefined : opts.owner,
       end: isPart ? undefined : opts.end,
       value: opts.value,
+      previous: opts.previous,
       rows: opts.rows
         ? opts.rows
             .replace(/^\[|\]$/g, "")
@@ -3512,7 +3529,10 @@ function parsePhase(block: Line[], errors: DslError[]): DslPhase | null {
       continue;
     }
     if (key === "draw") {
-      const 語 = stripQuotes(value).trim();
+      // `draw: line 0.4` = 語の後ろに「描き終えるまでに段の何割を使うか」 を書ける (#1441)。
+      // 割合を別の項目にすると「割合だけ書いて `draw` が無い段」 が書けてしまい、
+      // 何も起きない指定になる。 同じ行なら書けない
+      const [語 = "", 割合の文字, ...余り] = stripQuotes(value).trim().split(/\s+/);
       // **読めない語を黙って捨てない** (#1304 / #1306 と同じ扱い)。 受ける語は 1 つだけで、
       // 書き間違いはその段が何も描かない形になって手掛かりが残らない
       if (!DRAW_WORDS.has(語)) {
@@ -3521,9 +3541,29 @@ function parsePhase(block: Line[], errors: DslError[]): DslPhase | null {
           message: `draw に書けない語です: "${語}"`,
           hint: `使える語 = ${[...DRAW_WORDS].join(", ")}`,
         });
+      } else if (余り.length > 0) {
+        errors.push({
+          line: ln.no,
+          message: `draw に書ける項目は語と割合の 2 つまでです: "${stripQuotes(value).trim()}"`,
+          hint: "use `draw: line 0.4`",
+        });
       } else {
         phase.draw = 語;
         phase.drawPos = { line: ln.no };
+        if (割合の文字 !== undefined) {
+          const 割合 = Number(割合の文字);
+          // 範囲外を黙って捨てない。 描画側は 1 に落として図を出すため、
+          // 知らせが無いと「書いたのに速さが変わらない」 が手掛かりなしで起きる
+          if (!Number.isFinite(割合) || 割合 <= 0 || 割合 > 1) {
+            errors.push({
+              line: ln.no,
+              message: `draw の割合が範囲外です: "${割合の文字}"`,
+              hint: "0 より大きく 1 以下で書きます (例 `draw: line 0.4`)",
+            });
+          } else {
+            phase.drawRatio = 割合;
+          }
+        }
       }
       i += 1;
       continue;