@cardenelabs/cdl 0.63.0 → 0.64.1

package/dist/{render-Dk8_6ua6.d.cts → render-DfXCs3Eh.d.cts}

@@ -1086,7 +1086,10 @@ type CdlReadout = {
     id: string;
     kind: "badge";
     source: string;
-    /** color source (default source と同じ)、 別 signal で色を切替可能 */
+    /**
+     * 色を引く状態 (#861)。 書くと `map` をこの状態の値で引き、札の字は `source` の値のまま。
+     * 書かなければ `source` の値で引く。 書いた状態が無い時は色を付けない (`source` に戻さない)
+     */
     colorSource?: string;
     /** 値と色 mapping (例: [{value: 'ok', color: 'green'}])、 未指定なら brand 色 */
     map?: readonly {

package/dist/{render-Dk8_6ua6.d.ts → render-DfXCs3Eh.d.ts}

@@ -1086,7 +1086,10 @@ type CdlReadout = {
     id: string;
     kind: "badge";
     source: string;
-    /** color source (default source と同じ)、 別 signal で色を切替可能 */
+    /**
+     * 色を引く状態 (#861)。 書くと `map` をこの状態の値で引き、札の字は `source` の値のまま。
+     * 書かなければ `source` の値で引く。 書いた状態が無い時は色を付けない (`source` に戻さない)
+     */
     colorSource?: string;
     /** 値と色 mapping (例: [{value: 'ok', color: 'green'}])、 未指定なら brand 色 */
     map?: readonly {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.63.0",
+  "version": "0.64.1",
   "description": "CDL (Chainome Diagram Language). Mermaid-like declarative DSL that compiles to animated SVG diagrams. Built for blockchain / Solidity flows, generic enough for sequence / flow / state / ER / topology diagrams.",
   "license": "MIT",
   "author": "cardene777",

package/src/layout/edges.ts

@@ -18,9 +18,10 @@ import {
   EDGE_STUB_OUT,
   hasRenderedLabel,
   labelInitClearance,
-  LANE_BORDER_CLEARANCE_TOL,
+  laneVerticalRange,
   labelPathClearanceHorizontal,
   labelPillH,
+  rectCrossesLaneBorder,
   spreadWithMinimalShift,
   PARALLEL_EDGE_BOW,
   SYMMETRIC_PAIR_SHIFT,
@@ -172,6 +173,8 @@ export function layoutEdges(diag: CdlDiagram, nodes: LaidNode[], lanes: LaidLane
     (diag.viewport?.labelMargin ?? diag.viewport?.gap ?? DEFAULT_LABEL_MARGIN) - DEFAULT_LABEL_MARGIN;
   const nmap = new Map(nodes.map((n) => [n.id, n]));
   const lmap = new Map(lanes.map((l) => [l.id, l]));
+  // label が lane の枠線を跨ぐかを見る 2 か所 (左への迂回と label の反転) が使う縦の範囲 (#863)。
+  const laneRangeById = new Map(lanes.map((l) => [l.id, laneVerticalRange(l, nodes)]));
 
   // canvas pivot 新 spec (dragon canvas pivot spec §layout-role-conversion)。
   // posX1 / posY1 / posX2 / posY2 全て set 済 edge は「user が固定した絶対 path」 = 直線 path
@@ -614,14 +617,12 @@ export function layoutEdges(diag: CdlDiagram, nodes: LaidNode[], lanes: LaidLane
     const pill = { x: centerX - boxW / 2, y: (exitY + returnY) / 2 - boxH / 2, w: boxW, h: boxH };
     if (others.some((n) => rectsOverlap(pill, nodeRect(n)))) return true;
 
-    // 発着 lane の枠線は跨いでよい (visual-validate の lane-border-clearance と同一規約)。
+    // 発着 lane の枠線は跨いでよい。 跨ぐかは visual-validate の lane-border-clearance と同じ関数で見る。
     const endpointLanes = new Set(
       nodes.filter((n) => n.id === c.from || n.id === c.to).map((n) => n.lane),
     );
     return lanes.some(
-      (l) =>
-        !endpointLanes.has(l.id) &&
-        (crossesVerticalLine(pill, l.x) || crossesVerticalLine(pill, l.x + l.width)),
+      (l) => !endpointLanes.has(l.id) && rectCrossesLaneBorder(pill, l, laneRangeById.get(l.id)) !== undefined,
     );
   };
 
@@ -968,13 +969,13 @@ export function layoutEdges(diag: CdlDiagram, nodes: LaidNode[], lanes: LaidLane
         nodes.reduce((acc, n) => Math.min(acc, rectGap(box, nodeRect(n))), Infinity);
       if (minNodeGap(alt) < Math.min(CLEARANCE_NODE_LABEL, minNodeGap(cur)) - 1e-6) continue;
 
-      // 発着 lane の枠線は跨いでよい (visual-validate の lane-border-clearance と同一規約)。
+      // 発着 lane の枠線は跨いでよい。 跨ぐかは visual-validate の lane-border-clearance と同じ関数で見る。
       const endpointLanes = new Set(
         [laneOfNode.get(r.e.from), laneOfNode.get(r.e.to)].filter((v): v is string => v !== undefined),
       );
       const crossesLaneBorder = lanes.some((l) => {
         if (endpointLanes.has(l.id)) return false;
-        return crossesVerticalLine(alt, l.x) || crossesVerticalLine(alt, l.x + l.width);
+        return rectCrossesLaneBorder(alt, l, laneRangeById.get(l.id)) !== undefined;
       });
       if (crossesLaneBorder) continue;
 
@@ -1465,14 +1466,6 @@ function segmentsBBox(segs: Array<{ x1: number; y1: number; x2: number; y2: numb
   return { x: minX, y: minY, w: maxX - minX, h: maxY - minY };
 }
 
-/**
- * rect が縦線 x = lineX を跨ぐか。 `visual-validate` の lane-border-clearance と同一規約で、
- * 端が線に触れるだけ (許容差 LANE_BORDER_CLEARANCE_TOL 以内) は跨いだ扱いにしない。
- */
-function crossesVerticalLine(rect: Rect, lineX: number): boolean {
-  return rect.x < lineX - LANE_BORDER_CLEARANCE_TOL && rect.x + rect.w > lineX + LANE_BORDER_CLEARANCE_TOL;
-}
-
 function distributeBySides(
   list: Array<{
     e: CdlEdge;

package/src/layout/spec.ts

@@ -18,7 +18,7 @@
 import { CLEARANCE_LABEL_LABEL, CLEARANCE_NODE_LABEL } from "./clearance-constants";
 import { measureTextWidth } from "./text-width";
 import { EDGE_LABEL_TEXT } from "../label-text";
-import type { CdlEdge, LaidEdge } from "../types";
+import type { CdlEdge, LaidEdge, LaidLane, LaidNode } from "../types";
 
 // ─── edge label pill bbox SSOT (CAR-431 で 3 定義箇所を集約) ──
 
@@ -951,6 +951,64 @@ export const COLUMN_GAP_VARIANCE_TOL = 40;
  */
 export const LANE_BORDER_CLEARANCE_TOL = 2;
 
+/** lane が占める縦の範囲 (world unit)。 `laneVerticalRange` が返す。 */
+export type LaneVerticalRange = { top: number; bottom: number };
+
+/**
+ * 縦の範囲で比べてよい lane の上端と下端。 上下いっぱいの列として比べる lane は `undefined` (#863)。
+ *
+ * 範囲を持つのは 2 種だけ。
+ *
+ * | lane | 範囲 |
+ * |---|---|
+ * | `contain` | 中の node を囲む枠 (`recomputeContainedLanes` が決める `y` / `height`)。 描画もこの枠を描く |
+ * | `posX` / `posY` / `posH` を揃えた lane | 著者が置いた `posY` から `posH` まで |
+ *
+ * それ以外の lane の `height` は名札の帯 (`LANE_LABEL_H`) の高さで、 列の縦の広がりではない。
+ * 列は中の node が段の位置に並ぶ下端まで続く。 `posH` を持たない固定の lane も、 `posX` と `posY` が
+ * 揃わず layout が座標を採らなかった lane も同じ。 lifeline の lane は縦線が図の下まで伸びる。
+ * どれも上下いっぱいの列として比べないと、 列の中にある説明文を取りこぼす。
+ *
+ * 範囲を持つ lane でも、 中の node が範囲の外にあれば、 その node の上下まで広げる。 高さを指定した
+ * lane に座標を持たない node を入れると、 node は段の位置に並んで範囲の外に出るため。
+ */
+export function laneVerticalRange(lane: LaidLane, nodes: readonly LaidNode[]): LaneVerticalRange | undefined {
+  const pinnedWithHeight = lane.posX !== undefined && lane.posY !== undefined && lane.posH !== undefined;
+  if (!lane.contain && !pinnedWithHeight) return undefined;
+  let top = lane.y;
+  let bottom = lane.y + lane.height;
+  for (const n of nodes) {
+    if (n.lane !== lane.id) continue;
+    top = Math.min(top, n.cy - n.h / 2);
+    bottom = Math.max(bottom, n.cy + n.h / 2);
+  }
+  return { top, bottom };
+}
+
+/**
+ * rect が lane の左右の枠線 (`lane.x` / `lane.x + lane.width`) を跨ぐ側。 跨がなければ `undefined` (#863)。
+ *
+ * 検証器の軸 64 (`lane-border-clearance`) と、 engine が説明文の置き場所を選ぶ 2 か所
+ * (`layout/edges.ts` の左への迂回と説明文の反転) がこの関数で判定する。 規則を 1 か所に置き、
+ * engine が避ける枠線と検証器が指摘する枠線を食い違わせない。
+ *
+ * `range` (`laneVerticalRange` の値) があれば、 rect と縦に重なる時だけ比べる。 接するだけ
+ * (重なりの高さ 0) は重ならない扱い。 横は枠線から `LANE_BORDER_CLEARANCE_TOL` 以内に端が
+ * 触れるだけなら跨がない扱い。 左右の両方を跨ぐ rect は左を返す。
+ */
+export function rectCrossesLaneBorder(
+  rect: { x: number; y: number; w: number; h: number },
+  lane: Pick<LaidLane, "x" | "width">,
+  range: LaneVerticalRange | undefined,
+): "left" | "right" | undefined {
+  if (range !== undefined && (rect.y + rect.h <= range.top || rect.y >= range.bottom)) return undefined;
+  const crosses = (lineX: number) =>
+    rect.x < lineX - LANE_BORDER_CLEARANCE_TOL && rect.x + rect.w > lineX + LANE_BORDER_CLEARANCE_TOL;
+  if (crosses(lane.x)) return "left";
+  if (crosses(lane.x + lane.width)) return "right";
+  return undefined;
+}
+
 // ─── near-collision policy SSOT (CAR-424 で collisions.ts から集約) ──
 
 /**

package/src/render/interactive-panel.tsx

@@ -1280,15 +1280,15 @@ function ReadoutWidget({
           colors={readout.colors ?? ["#e0e6ef", "#2d6a8f"]}
         />
       );
-    case "badge":
-      return (
-        <BadgeReadout
-          id={readout.id}
-          label={label}
-          value={typeof rawValue === "string" ? rawValue : String(rawValue ?? "")}
-          map={readout.map}
-        />
-      );
+    case "badge": {
+      const value = typeof rawValue === "string" ? rawValue : String(rawValue ?? "");
+      // 色を引く鍵は `colorSource` を書けばその状態の値、書かなければ札の字と同じ値 (#861)。
+      // 書いた状態が無い時は `source` の値に戻さない = 書き間違いが効いているように見えない
+      const colorRaw = readout.colorSource === undefined ? undefined : stateOverrides[readout.colorSource];
+      const colorKey =
+        readout.colorSource === undefined ? value : colorRaw === undefined ? undefined : String(colorRaw);
+      return <BadgeReadout id={readout.id} label={label} value={value} colorKey={colorKey} map={readout.map} />;
+    }
     case "status-dot":
       return (
         <StatusDotReadout
@@ -3041,14 +3041,18 @@ function BadgeReadout({
   id,
   label,
   value,
+  colorKey,
   map,
 }: {
   id: string;
   label: string;
+  /** 札に出す字 */
   value: string;
+  /** `map` を引く鍵。 無ければどの色にも当てない */
+  colorKey: string | undefined;
   map?: readonly { value: string; color: string }[];
 }): JSX.Element {
-  const entry = map?.find((m) => m.value === value);
+  const entry = colorKey === undefined ? undefined : map?.find((m) => m.value === colorKey);
   const color = entry?.color;
   return (
     <div className="cdl-ip-item cdl-ip-readout-badge" data-cdl-readout={id}>

package/src/types.ts

@@ -1150,7 +1150,10 @@ export type CdlReadout =
       id: string;
       kind: "badge";
       source: string;
-      /** color source (default source と同じ)、 別 signal で色を切替可能 */
+      /**
+       * 色を引く状態 (#861)。 書くと `map` をこの状態の値で引き、札の字は `source` の値のまま。
+       * 書かなければ `source` の値で引く。 書いた状態が無い時は色を付けない (`source` に戻さない)
+       */
       colorSource?: string;
       /** 値と色 mapping (例: [{value: 'ok', color: 'green'}])、 未指定なら brand 色 */
       map?: readonly { value: string; color: string }[];

package/src/visual-validate.ts

@@ -131,7 +131,6 @@ import {
   DETOUR_SLOT_GAP,
   EDGE_STUB_OUT,
   LABEL_PILL_PAD_X,
-  computeLabelBoxW,
   buildDiagramAltText,
   computeLabelBBoxWorld,
   hasRenderedLabel,
@@ -143,7 +142,8 @@ import {
   fitsOwnTitleWidth,
   rowBaselineY,
   rowGlyphDepth,
-  LANE_BORDER_CLEARANCE_TOL,
+  laneVerticalRange,
+  rectCrossesLaneBorder,
   MIN_COLUMN_ALIGNMENT_TOLERANCE,
   MIN_ROW_ALIGNMENT_TOLERANCE,
   ROW_GAP_VARIANCE_TOL,
@@ -4246,8 +4246,14 @@ function runAxes(
   //
   // 例外 = edge 発着 node の lane (from lane / to lane) 内は判定対象外、 その 2 lane 内なら
   // label が lane 縁近くにあっても違和感なし。
+  //
+  // 縦の範囲を持つ lane (`contain` の枠と、 `posX` / `posY` / `posH` を揃えた lane) は、 label と
+  // 縦に重なる時だけ比べる (#863)。 別の段に置いた lane の枠線の延長上に label が来ても、 枠線は
+  // そこに描かれていない。 判定の規則は `rectCrossesLaneBorder` (`layout/spec.ts`) が持ち、
+  // engine が label の置き場所を選ぶ時も同じ関数を使う。
   // ───────────────────────────────────────────────────────────
   {
+    const rangeByLane = new Map(laid.lanes.map((lane) => [lane.id, laneVerticalRange(lane, laid.nodes)]));
     for (const e of laid.edges) {
       if (!hasRenderedLabel(e)) continue;
       const fromNode = nodeById.get(e.from);
@@ -4258,29 +4264,14 @@ function runAxes(
       const allowedLanes = new Set<string>();
       if (fromNode) allowedLanes.add(fromNode.lane);
       if (toNode) allowedLanes.add(toNode.lane);
-      // label bbox 復元 (Axis 59 と同 logic、 lane border 判定は x 軸のみ使うので高さ不要)
-      const boxW = computeLabelBoxW(e.label, e.sub);
-      const anchor = e.labelAnchor;
-      const boxLeftX = anchor === "start" ? 0 : anchor === "end" ? -boxW : -boxW / 2;
-      const bx = e.labelX + boxLeftX;
-      const bxRight = bx + boxW;
+      const box = computeLabelBBoxWorld(e);
       for (const lane of laid.lanes) {
         if (allowedLanes.has(lane.id)) continue;
-        const laneLeft = lane.x;
-        const laneRight = lane.x + lane.width;
-        // border 貫通 = bbox が border 線と交差 (border 左端 と bbox 左/右端 の関係)
-        // 左 border 貫通 = bx < laneLeft && bxRight > laneLeft + TOL
-        // 右 border 貫通 = bx < laneRight - TOL && bxRight > laneRight
-        const crossesLeft =
-          bx < laneLeft - LANE_BORDER_CLEARANCE_TOL &&
-          bxRight > laneLeft + LANE_BORDER_CLEARANCE_TOL;
-        const crossesRight =
-          bx < laneRight - LANE_BORDER_CLEARANCE_TOL &&
-          bxRight > laneRight + LANE_BORDER_CLEARANCE_TOL;
-        if (crossesLeft || crossesRight) {
+        const side = rectCrossesLaneBorder(box, lane, rangeByLane.get(lane.id));
+        if (side !== undefined) {
           push(
             "lane-border-clearance",
-            `edge "${e.id}" label bbox (${bx.toFixed(0)}..${bxRight.toFixed(0)}) が非発着 lane "${lane.id}" (${laneLeft.toFixed(0)}..${laneRight.toFixed(0)}) の ${crossesLeft ? "左" : "右"} border を貫通`,
+            `edge "${e.id}" label bbox (${box.x.toFixed(0)}..${(box.x + box.w).toFixed(0)}) が非発着 lane "${lane.id}" (${lane.x.toFixed(0)}..${(lane.x + lane.width).toFixed(0)}) の ${side === "left" ? "左" : "右"} border を貫通`,
           );
           break; // 1 edge 1 発火に留める
         }