@cardenelabs/cdl 0.122.0 → 0.123.0

package/CHANGELOG.md

@@ -5,6 +5,20 @@ CDL (Chainome Diagram Language) の主要変更履歴。
 
 ## [Unreleased]
 
+## [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 +4864,8 @@ 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.123.0...HEAD
+[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 行で典型図生成)。
@@ -457,6 +494,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 の全部ではない**。 型に載っているのは共通の描画で使う