@cardenelabs/cdl 0.122.0 → 0.124.0

package/CHANGELOG.md

@@ -5,6 +5,31 @@ CDL (Chainome Diagram Language) の主要変更履歴。
 
 ## [Unreleased]
 
+## [0.124.0] - 2026-10-06
+
+### Changed
+
+- **箱の上を回る戻り線が、途中の箱を貫かない道筋を選べるようにした** (#1014)
+
+  上へ回る今までの道筋が両端以外の箱と交わる時だけ、左右の外側の列を通る道筋に替え、交わる箱が少なく短い方を選ぶ。
+  両端は今までどおり上辺から出て、上辺へ入る。
+  1 段前へ戻る線と間に箱が無い戻り線の座標は変わらない。
+  外側を回っても避けられない箱は `edge-node-cross` として検査結果に残る。
+
+## [0.123.0] - 2026-10-05
+
+### Added
+
+- **図ごとに等幅書体の字幅で配置を計算できる `textMetrics` を足した** (#1006, #1009)
+
+  `textMetrics: "monospace"` では半角を 0.63 em、全角を 1.08 em の実測幅で測り、箱・札・衝突判定に加えて図表・マインドマップ・絵の中の字も同じ幅に揃える。
+  `textMetrics` を書かない既存の図は `proportional` のままで、出力は変わらない。
+
+- **線の札と主役の線・棒を属性で選べるようにした** (#1008)
+
+  中ほどと端の札へ `data-cdl-tone`、主役の線と札へ `data-cdl-edge-role`、最大値の棒へ `data-cdl-emphasis` を出す。
+  既存の図の色と不透明度は変わらないが、`[data-cdl-tone]` を祖先に置く selector は札にも当たり始める。
+
 ## [0.122.0] - 2026-10-04
 
 ### Added
@@ -4850,7 +4875,9 @@ Initial OSS release.
 使わない = annotated tag を push しても GitHub Release は作られず、 Release を作っていない版で
 行き止まりになる。
 
-[Unreleased]: https://github.com/cardene777/cdl/compare/v0.122.0...HEAD
+[Unreleased]: https://github.com/cardene777/cdl/compare/v0.124.0...HEAD
+[0.124.0]: https://github.com/cardene777/cdl/compare/v0.123.0...v0.124.0
+[0.123.0]: https://github.com/cardene777/cdl/compare/v0.122.0...v0.123.0
 [0.122.0]: https://github.com/cardene777/cdl/compare/v0.121.0...v0.122.0
 [0.121.0]: https://github.com/cardene777/cdl/compare/v0.120.0...v0.121.0
 [0.120.0]: https://github.com/cardene777/cdl/compare/v0.119.0...v0.120.0

package/README.md

@@ -66,6 +66,43 @@ export function AuthSequenceDemo() {
 
 これで UML sequence diagram が phase 切替 + state diff + 進行点 glow で animated に表示。
 
+### 等幅書体で描く図の字幅
+
+`textMetrics` は `proportional` (既定) または `monospace` を取る。
+消費側が図全体を等幅書体で描く場合は `monospace` を指定すると、配置計算と描画の字幅を揃えられる。
+
+`monospace` は `fontFamily: "mono"` と同じ JetBrains Mono の実測で、ASCII・半角カナ・記号を 0.63 em、
+和字と全角 (CJK) を 1.08 em、絵文字を 1.16 em として書記素ごとに加算する。
+図表の字、マインドマップの名前、絵の中の字も同じ測り方になる。
+
+preset では options に指定する。
+
+```ts
+const terminalFlow = sequence({
+  id: "terminal-flow",
+  topic: "Terminal flow",
+  actors: ["CLI", "Worker"],
+  textMetrics: "monospace",
+});
+```
+
+`CdlDiagram` を直接組み立てる場合は field に指定する。
+
+```ts
+import type { CdlDiagram } from "@cardenelabs/cdl";
+
+const terminalDiagram: CdlDiagram = {
+  id: "terminal",
+  topic: "Terminal",
+  textMetrics: "monospace",
+  lanes: [],
+  nodes: [],
+  edges: [],
+  states: [],
+  phases: [],
+};
+```
+
 ## 6 つの preset
 
 低位 API (lane / node / edge 個別宣言) + 高位 preset (1 行で典型図生成)。
@@ -231,10 +268,15 @@ export const custom = diagram("custom", { topic: "Custom" })
 | 値 | 道筋 | 向く場面 |
 |---|---|---|
 | `default` | 箱を避け、角を丸めた直角の線 | 箱を避けたい図、直角の線に揃えたい図 |
-| `back-detour` | 箱の上を回って戻る線 | 前の箱へ戻る関係 |
+| `back-detour` | 箱の上を回って戻り、途中の箱と交わる時は外側を回る線 | 前の箱へ戻る関係 |
 | `curve` | 両端で水平になる 3 次曲線 | 段や列をまたぐ関係を柔らかくつなぐ図 |
 | `metro` | 横線と傾き ±1 の斜線を円弧で結ぶ線 | 路線図の線路と乗り換え |
 
+`back-detour` は始点と終点の上辺を結び、両端より 100 上を横に渡る。
+途中の箱と交わる時だけ、縦に並ぶ箱を避けた最も近い外側の列を通り、交わる箱が少なく短い方を選ぶ。
+両端は外側へ回る時も上辺から出て、上辺へ入る。
+外側を回っても避けられない箱は `edge-node-cross` として検査結果に残る。
+
 `curve` は、行き先が右なら始点の右辺から終点の左辺へ、左なら始点の左辺から終点の右辺へ結ぶ。
 2 つの箱の横の範囲が重なる時は、両方の右辺を結ぶ。
 2 点の高さが同じなら直線になる。
@@ -457,6 +499,33 @@ cdl は形だけを描き、 色や影は持たない (geometry only、 style
 [data-cdl-routing="metro"] [data-cdl-role="edge-line"] { /* 路線図の線 */ }
 ```
 
+線の札と主役は、次の属性で選べる。
+
+| 属性 | 付く要素 | 値 |
+|---|---|---|
+| `data-cdl-tone` | 線の要素の `g`、中ほどの札の `g` (`[data-cdl-edge-label-for]`)、端の札の `text` (`[data-cdl-edge-end-label-for]`) | 線の tone 名 (`accent` / `teal` / `success` / `error` / `warning` / `info`)。主役の線でも tone 名のまま |
+| `data-cdl-edge-role` | 主役の線 (`role: "main"`) の線の要素の `g`・中ほどの札の `g`・端の札の `text` | `main`。主役でない線には付かない |
+| `data-cdl-emphasis` | 棒グラフ (`chart-bar`) の棒 `rect` | `primary`。値が最大の棒すべてに付く (同率なら全部)。全ての値が 0 以下なら付かない |
+
+```css
+[data-cdl-edge-label-for][data-cdl-tone="accent"] [data-cdl-role="edge-label-bg"],
+[data-cdl-edge-end-label-for][data-cdl-tone="accent"] {
+  fill: var(--cdl-tone-accent);
+}
+
+[data-cdl-edge-label-for][data-cdl-edge-role="main"] [data-cdl-role="edge-label-bg"],
+[data-cdl-edge-end-label-for][data-cdl-edge-role="main"] {
+  fill: var(--cdl-now);
+}
+
+[data-cdl-role="chart-bar"][data-cdl-emphasis="primary"] {
+  stroke: var(--cdl-now);
+}
+```
+
+`[data-cdl-tone="accent"] text` のように `data-cdl-tone` を祖先に置く selector は、札にも当たり始める。
+札だけを除きたい時は `[data-cdl-edge][data-cdl-tone="accent"] text` のように `[data-cdl-edge]` を前に付け、線の要素に絞る。
+
 明暗の切替は consumer 側の仕組み (`html` の class 等) で行う = cdl は明暗の概念を持たない。
 
 **`CdlRole` 型は実装にある role の全部ではない**。 型に載っているのは共通の描画で使う