@cardenelabs/cdl 0.121.0 → 0.123.0

package/CHANGELOG.md

@@ -5,6 +5,54 @@ 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
+
+- **2 つの箱を、水平に出て水平に入る曲線でつなげるようにした** (#997)
+
+  `routing: "curve"` で、段や列をまたぐ箱を 3 次曲線で結べる。
+  2 点が同じ高さなら直線になり、終点の矢印は水平を向く。
+  既存の図は `routing` を書かなければ出力が変わらない。
+  曲線は書いた形を優先するため、途中の箱は避けない。
+
+- **路線図の線と、線路上に置く駅を足した** (#996)
+
+  `routing: "metro"` で、横線と傾き ±1 の斜線を円弧でつなげられる。
+  駅は `station` で描き、`posX` / `posY` に小さな丸を置いて名前と説明を外へ出す。
+  `metro` は途中の箱を避けず、既存の道筋と座標を固定した線の出力は変わらない。
+  同じ lane に横並びで置いた箱を、縦の隙間の検査 (`node-vertical-clearance`) が縦の隣として測らなくなった。
+
+### Changed
+
+- **終点をずらした線の名札を置き直す処理が、名札を箱から離す処理と別の基準で置き場所を決めていた** (#1002)
+
+  名札を置けるかの判定を 1 つにまとめた。
+  置き直した名札が箱との余白と自分の線からの距離の上限を守り、後の処理に押し直されない。
+  線の上に重ねる名札 (`overlay`) のうち線の上に載っているものは動かさない。
+
+### Fixed
+
+- **同じ辺に 2 本入る線の名札が、ずらす前の位置に残って線を覆い、線が切れ端に見えた** (#1000)
+
+  終点だけを辺に沿って動かし、名札を動かしていなかった。
+  経路を動かし終えた後に、最後の区間を覆う名札だけを線と一緒に動かす。
+  同じ辺に 2 本入らない図の出力は変わらない。
+
 ## [0.121.0] - 2026-10-02
 
 ### Fixed
@@ -4816,7 +4864,9 @@ Initial OSS release.
 使わない = annotated tag を push しても GitHub Release は作られず、 Release を作っていない版で
 行き止まりになる。
 
-[Unreleased]: https://github.com/cardene777/cdl/compare/v0.121.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
 [0.119.0]: https://github.com/cardene777/cdl/compare/v0.118.0...v0.119.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 行で典型図生成)。
@@ -189,6 +226,11 @@ export const custom = diagram("custom", { topic: "Custom" })
 流れの始まりと終わりを示す印として `mark-start` (塗った丸) と `mark-end` (輪で囲んだ丸) がある。
 印そのものが意味を持つので文字は描かない。
 
+路線図の駅には `station` を使う。
+駅は小さな丸で、名前を丸の上、説明 (`subtitle`) を丸の下に描く。
+`posX` / `posY` で線路上の点へ置き、既定の大きさは 24×24 になる。
+`tone` を指定すると丸の枠色が変わる。
+
 書ける種類の全件は `NODE_KINDS` を値として公開しているので、記法を書く側は手書きせずに引ける
 (上の表は代表例で、全件ではない)。
 
@@ -221,6 +263,67 @@ export const custom = diagram("custom", { topic: "Custom" })
 | `warning` | `#c9a23e` | 警告 |
 | `info` | `#5a8ec1` | 情報 |
 
+## 線の道筋 (routing)
+
+| 値 | 道筋 | 向く場面 |
+|---|---|---|
+| `default` | 箱を避け、角を丸めた直角の線 | 箱を避けたい図、直角の線に揃えたい図 |
+| `back-detour` | 箱の上を回って戻る線 | 前の箱へ戻る関係 |
+| `curve` | 両端で水平になる 3 次曲線 | 段や列をまたぐ関係を柔らかくつなぐ図 |
+| `metro` | 横線と傾き ±1 の斜線を円弧で結ぶ線 | 路線図の線路と乗り換え |
+
+`curve` は、行き先が右なら始点の右辺から終点の左辺へ、左なら始点の左辺から終点の右辺へ結ぶ。
+2 つの箱の横の範囲が重なる時は、両方の右辺を結ぶ。
+2 点の高さが同じなら直線になる。
+線が終点へ水平に入るため、終点の矢印も線の向きに沿って水平を向く。
+途中の箱は避けない。
+箱を避けたい時は `routing` を書かずに `default` のままにする。
+
+```ts
+import { diagram } from "@cardenelabs/cdl";
+
+export const curvedRelation = diagram("curved-relation", { topic: "曲線で結ぶ" })
+  .lane("left", { x: 0, width: 300 })
+  .lane("right", { x: 600, width: 300 })
+  .node("source", { lane: "left", stack: 0, kind: "card", title: "始点" })
+  .node("target", { lane: "right", stack: 1, kind: "card", title: "終点" })
+  .edge("source", "target", { id: "curve", label: "柔らかくつなぐ", routing: "curve" })
+  .build();
+```
+
+`metro` は、行き先が右なら始点の右辺から終点の左辺へ、左なら始点の左辺から終点の右辺へ結ぶ。
+両端の間に高さの差以上の横幅があれば、傾き ±1 の斜線を中央に置く。
+横線と斜線は半径 24 を上限とする円弧でつなぎ、横線か斜線が短い時は収まる半径まで縮める。
+横の余裕が高さの差に足りない時と、箱の横の範囲が重なる時は、両方の右辺をくの字で結ぶ。
+同じ高さなら横の直線になり、途中の箱は避けない。
+
+`metro` を使う図だけがこの道筋を選ぶ。
+`default` / `back-detour` / `curve` の線と、座標を固定した線の出力は変わらない。
+
+```ts
+import { diagram } from "@cardenelabs/cdl";
+
+export const metroMap = diagram("metro-map", { topic: "路線図" })
+  .lane("upper", { x: 0, width: 700 })
+  .lane("lower", { x: 800, width: 700 })
+  .node("central", {
+    lane: "upper", stack: 0, kind: "station", title: "中央", posX: 100, posY: 200,
+  })
+  .node("museum", {
+    lane: "upper", stack: 1, kind: "station", title: "美術館", posX: 500, posY: 200,
+  })
+  .node("river", {
+    lane: "lower", stack: 0, kind: "station", title: "川辺", posX: 900, posY: 400,
+  })
+  .node("park", {
+    lane: "lower", stack: 1, kind: "station", title: "公園", posX: 1300, posY: 400,
+  })
+  .edge("central", "museum", { id: "upper-line", label: "", routing: "metro" })
+  .edge("river", "park", { id: "lower-line", label: "", routing: "metro" })
+  .edge("museum", "river", { id: "transfer", label: "乗り換え", routing: "metro" })
+  .build();
+```
+
 ## phase / state / tween / set / badge
 
 phase 内で state を tween / set し、 badge を出す。
@@ -384,6 +487,40 @@ cdl は形だけを描き、 色や影は持たない (geometry only、 style
 }
 ```
 
+駅と路線図の線は、次の selector で個別に選べる。
+
+```css
+[data-cdl-role="node-body"][data-cdl-mark="station"] { /* 駅 */ }
+[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 の全部ではない**。 型に載っているのは共通の描画で使う

package/SPEC.md

@@ -177,7 +177,7 @@ phase が定義されると自動的に。
 2. **node** は lane 内で stack 順に上から並ぶ、 各 stack の高さは kind の default (actor 140 / function 110 / storage 180 / event 130 / card 110)、 上下 gap 80px 固定
 3. **lane label** は lane 上部に 30px の高さで表示
 4. **contain: true** の lane は内部 node を 24px padding で破線 boundary 描く
-5. **edge** routing は orthogonal L 字 (起点 side → 中継 90° → 終点 side)、 同 lane 跨ぎは S 字 1 本の bezier 許可
+5. **edge** の自動 routing は角を丸めた orthogonal L 字 (起点 side → 中継 90° → 終点 side)。 `routing: "curve"` は両端で水平になる 3 次曲線、`routing: "metro"` は横線と傾き ±1 の斜線を円弧で結ぶ線を使う
 6. **edge label** は path 中点から「path 進行方向の垂直方向」 に 50-80px 離して配置、 lane / node bbox との overlap を計算で避ける
 7. **viewBox** は cdl が auto 計算 (全 lane の右端 + 余白 80px、 全 node の下端 + 余白 80px)