@cardenelabs/dragon 0.10.0 → 0.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/dragon",
-  "version": "0.10.0",
+  "version": "0.12.0",
   "description": "Dragon — Mermaid 感覚で animated SVG を生成する Text DSL。 cdl engine を内部利用。",
   "license": "MIT",
   "author": "cardene777",
@@ -56,7 +56,7 @@
     "prepublishOnly": "pnpm run typecheck && pnpm run test && pnpm run build"
   },
   "dependencies": {
-    "@cardenelabs/cdl": "^0.12.0"
+    "@cardenelabs/cdl": "^0.14.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",

package/src/compile.ts

@@ -4645,7 +4645,9 @@ function compileTree(doc: DslDocument, onNotice?: (n: CompileNotice) => void): C
   const data: NonNullable<CdlDiagram["nodes"][number]["treeData"]> = doc.actors.map((a) => {
     const id = slugify(a.name);
     const p3 = 親.get(id);
-    return { id, title: a.name, ...(p3 !== undefined ? { parent: p3 } : {}) };
+    // 木も放射と同じく名前と補足を分けて渡す (#1332)。 分けないと補足が捨てられ、
+    // 書いた文字が図に出ない
+    return { id, ...放射に出す文字(a), ...(p3 !== undefined ? { parent: p3 } : {}) };
   });
   b.node(`${slugify(doc.title) || "tree"}-chart`, {
     lane: "chart", stack: 0, kind: "tree-hierarchy", title: doc.title, ...図の小見出し(doc), w: W, h: H, treeData: data,
@@ -4997,14 +4999,13 @@ type 放射で描ける欄 =
   /** 中心の名前 / 枝の名前になる */
   | "name"
   /**
-   * 名前の後ろに続けて出す 2 欄。
+   * 名前とは分けて補足に出す 2 欄。
    *
    * `- 描く量を減らす: "{draw} ms"` の形は副題として解析されるため、 値の欄だけを見ると
    * 記法で最も普通な書き方が届かない (#1230 で実測)。 明示的に書いた値の欄も同じ場所へ出す。
    *
-   * 描画側が描くのは枝と中心の `title` だけで (`mind-map.tsx` は型にある `subtitle` を
-   * 1 度も描かない)、 状態を読み替えるのも `title` と `rootTitle` に限る
-   * (`resolveMindData`)。 届ける先が他に無いため名前と同じ欄へ載せる。
+   * 描画側は枝の `subtitle` と中心の `rootSubtitle` を名前とは別の行に描く。 2 欄を
+   * `放射に出す文字` で 1 つの補足にまとめ、 名前とは分けて渡す。
    */
   | "subtitle"
   | "value"
@@ -5115,18 +5116,17 @@ function 放射で描けない欄を書いたか(a: DslActor, 欄: 放射で描
 }
 
 /**
- * 放射の枝と中心に出す文字を組む (#1230)。
+ * 放射と木の箱に出す名前と補足 (#1332)。
  *
- * 値の欄を書いた登場人物は名前の後ろに空白 1 つで続ける。 書いていない図は名前だけになり、
- * 変更前と同じ文字列になる。
+ * **連結しない**。 描画側は名前と補足を別々に受け取れば箱の中で 2 行に積む。 1 つの文字列に
+ * すると 1 行に全部入り、箱幅を超えて末尾が切られる (実測 = 箱 120px に対し文字 163px)。
  *
- * **名前と同じ欄に載せるしかない**。 描画側が描くのは枝と中心の `title` だけで
- * (`mind-map.tsx` は型にある `subtitle` を 1 度も描かない)、 状態を読み替えるのも
- * `title` と `rootTitle` に限る (`resolveMindData`)。 値を別の欄へ渡しても絵に出ない。
+ * `subtitle` と `value` の両方が書かれた場合は空白で繋いで 1 つの補足にする。 描画側の
+ * 補足は 1 行なので、2 つを別々の行にはできない。
  */
-function 放射に出す文字(a: DslActor): string {
+function 放射に出す文字(a: DslActor): { title: string; subtitle?: string } {
   const 続き = [a.subtitle, a.value].map((x) => x?.trim()).filter((x): x is string => !!x);
-  return 続き.length > 0 ? `${a.name} ${続き.join(" ")}` : a.name;
+  return { title: a.name, ...(続き.length > 0 ? { subtitle: 続き.join(" ") } : {}) };
 }
 
 function compileMind(doc: DslDocument, onNotice?: (n: CompileNotice) => void): CdlDiagram {
@@ -5246,7 +5246,7 @@ function compileMind(doc: DslDocument, onNotice?: (n: CompileNotice) => void): C
     // 枝は色を持てる (`MindBranchNode.tone`)
     branches.push({
       id,
-      title: 放射に出す文字(a),
+      ...放射に出す文字(a),
       parent: 親.get(id) ?? rootId,
       ...(a.tone ? { tone: a.tone } : {}),
     });
@@ -5269,7 +5269,15 @@ function compileMind(doc: DslDocument, onNotice?: (n: CompileNotice) => void): C
     ...図の小見出し(doc),
     w: W,
     h: H,
-    mindData: { rootId, rootTitle: 放射に出す文字(root), branches },
+    mindData: (() => {
+      const 中心 = 放射に出す文字(root);
+      return {
+        rootId,
+        rootTitle: 中心.title,
+        ...(中心.subtitle === undefined ? {} : { rootSubtitle: 中心.subtitle }),
+        branches,
+      };
+    })(),
   });
   return b.build();
 }

package/src/index.ts

@@ -13,7 +13,7 @@ export { compileToCdl } from "./compile";
 export type { CompileNotice } from "./compile";
 export { parseTextDslV05 } from "./v05";
 // 記法一覧が「実際に受け付ける値」 を実装から引くための公開。 手書きすると説明と実装がずれる。
-export { DRAW_TARGETS, DRAW_WORDS, PRESET_TYPES, TOP_LEVEL_KEYS } from "./v05/parser";
+export { DRAW_TARGETS, DRAW_WORDS, PHASE_ITEM_WORDS, PRESET_TYPES, TOP_LEVEL_KEYS } from "./v05/parser";
 export { TONE_ALIAS, NODE_KIND_ALIAS } from "./keywords";
 export { lintDiagram, autoFix } from "./notation-lint";
 export type { LintIssue, LintReport, LintSeverity } from "./notation-lint";

package/src/v05/parser.ts

@@ -1069,24 +1069,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(
@@ -2174,6 +2213,18 @@ function ensureAnimate(a: DslAnimate | undefined, lineNo: number): DslAnimate {
   return { states: [], phases: [], pos: { line: lineNo } };
 }
 
+/**
+ * 段に書ける項目の英語名。 `parsePhase` が受け付ける名前の入口でも使う。
+ *
+ * 誤りの案内で使うほか、**見本が値の名前にこの語を使っていないか** を見るのにも使う
+ * (#1330)。 段の項目と値は階層が違うので衝突しないが、同じ語が 2 つの意味で並ぶと
+ * 見本を読む人が階層から意味を判断することになる。
+ */
+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);
+
 function parsePhase(block: Line[], errors: DslError[]): DslPhase | null {
   // block[0]!: `step: "request" 1.5s`
   const head = block[0]!;
@@ -2220,6 +2271,17 @@ function parsePhase(block: Line[], errors: DslError[]): DslPhase | null {
     }
     const key = (propMatch[1] ?? "").toLowerCase();
     const value = (propMatch[2] ?? "").trim();
+    // 一覧を parse の入口にも使う。 分岐だけを増やして一覧を更新し忘れると、見本の名前との
+    // 重なり検査が新しい項目を見落とすため、一覧にない語は各分岐へ到達させない。
+    if (!段の項目の集合.has(key)) {
+      errors.push({
+        line: ln.no,
+        message: `段の項目名が読めません: "${propMatch[1] ?? ""}"`,
+        hint: 段の項目のヒント(propMatch[1] ?? ""),
+      });
+      i += 1;
+      continue;
+    }
     if (key === "focus") {
       phase.highlight = parseFocusList(value);
       i += 1;
@@ -2304,8 +2366,8 @@ function parsePhase(block: Line[], errors: DslError[]): DslPhase | null {
       i = j;
       continue;
     }
-    // ここに来るのは上のどれにも当たらなかった名前 (#1301)。 黙って捨てると
-    // 「書いたのに段が変わらない」 が手掛かりなしで起きる
+    // ここに来るのは一覧へ語を足したのに処理分岐を足していない時だけ。 黙って捨てると
+    // 「一覧にはあるのに段が変わらない」 が手掛かりなしで起きる。
     errors.push({
       line: ln.no,
       message: `段の項目名が読めません: "${propMatch[1] ?? ""}"`,
@@ -2329,9 +2391,6 @@ function 段の項目のヒント(書いた名前: string): string {
     : `使える項目 = ${段の項目の英語.join(", ")}`;
 }
 
-/** 段に書ける項目の英語名。 `parsePhase` の分岐から導く一覧 */
-const 段の項目の英語 = ["focus", "badge", "body", "description", "tween", "set", "draw"] as const;
-
 /**
  * `draw:` に書ける語と、その語が効く図種 (#1312 / #1314)。
  *