@cardenelabs/cdl 0.41.1 → 0.43.0

package/CHANGELOG.md

@@ -5,6 +5,96 @@ CDL (Chainome Diagram Language) の主要変更履歴。
 
 ## [Unreleased]
 
+## [0.43.0] - 2026-09-10
+
+### Fixed
+
+- **帯の間隔を箱の縁から数えるようにした** (#789)
+
+  帯 (lane) の間隔は、辺の名札を入れるのに要る隙間から決まる。 その隙間の式は
+  `名札の幅 + 箱と名札の余白 32 × 2 + 経路の突き出し 40 × 2` で、内訳はどれも
+  **箱の縁** が起点になる。 それを 帯の縁 から数えていたため、
+  `(帯の幅 − 箱の幅) / 2` を 2 枚分 余計に空けていた。
+
+  ただし 2 対以上を跨ぐ辺は別で、名札が途中の帯の内側にも入りうる。 その帯は
+  軸 64 `lane-border-clearance` の対象なので、跨ぐ辺だけは 帯の縁 のまま残す。
+  隣り合う 2 帯を結ぶ辺の名札は発着の 2 帯に閉じるので、軸 64 は元から見ていない。
+
+  下流の見本帳 444 枚での実測。
+
+  | 何を | 前 | 後 |
+  |---|---|---|
+  | 幅が変わった図 | — | 78 枚 (広がった図は 0 枚) |
+  | その 78 枚の幅の合計 | 126,204 | 118,721 |
+  | 軸 23 `responsive-viewport` | 16 件 | 12 件 |
+  | 軸 64 `lane-border-clearance` | 0 件 | 0 件 |
+  | 軸 65 `row-gap-uniform` | 0 件 | 0 件 |
+
+  最も縮んだのは `swim-demo` の 2148 → 1848 で、親の幅 1100px での箱の題が
+  11.3px から 13.1px になる。
+
+  **余りに頼っていた図が 2 枚出る**。 名札を 2 枚以上 同じ隙間に置く図は、
+  1 枚分しか確保しない式では元から足りておらず、余りがそれを隠していた
+  (実測 = `interactive-traffic-sankey` で 3 件、`animation-rich-order-status-flow` で 1 件)。
+  帯の位置を書き手が広げれば消える。
+
+## [0.42.0] - 2026-09-10
+
+### Fixed
+
+- **横長かどうかでなく図の幅で読みやすさを判定するようにした** (軸 23 `responsive-viewport`、#785)
+
+  画面上の文字の大きさは `文字の world 寸法 × (親の幅 px ÷ viewBox width)` で決まり、
+  この式に縦横比は出てこない。 それでも軸 23 は縦横比 6:1 を境にしていた。
+
+  下流の見本帳 444 枚を親の幅 1100px として実測した順位。
+
+  | 図 | 縦横比 | viewBox 幅 | 画面上の字 | 旧判定で拾えるか |
+  |---|---|---|---|---|
+  | `class-complex-demo` | 1.4 | 3353 | 7.2px | 拾えない |
+  | `interactive-year-roadmap` | 4.0 | 2534 | 9.6px | 拾えない |
+  | `lane-multi` | 8.0 | 1535 | 15.8px | 拾える (読める字) |
+
+  画面上の字が小さい上位 20 枚のうち旧判定が拾うのは 5 枚だけで、最も小さい図は 1 度も
+  拾われなかった。
+
+  判定を viewBox 幅の上限に置き換えた。 上限は 3 つの値から導く = 基準にする文字の world
+  寸法 (箱の題の 22)、判定に使う親の幅 (1100px)、画面上で読めると見なす下限 (12px)。
+  上限そのものは数で書かない。
+
+  注意の文面が変わる = 縦横比の代わりに `viewBox width` と、その幅での画面上の文字の
+  大きさを出す。 描画不能な寸法 (0 / 負値 / 非有限) の判定は変えていない。
+
+  縦長の図は warn を出さなくなる。 親の幅いっぱいに伸ばすと文字は拡大されるため。
+  読みにくさは縦の巻き取りの量で、文字の大きさではない。
+
+### Removed
+
+- **にじみを画面でなく図の座標で測っていた検査 (軸 33 `subpixel-precision`) を外した** (#783)
+
+  軸 33 は箱の中心 / 辺の名札 / 帯の world 座標が 0.5 刻みから外れると注意を出していた。
+  にじみは device pixel で起きるので、world 座標の小数は判定材料にならない。
+
+  図の `<svg>` は `w-full` + `preserveAspectRatio="xMidYMid meet"` で親の幅いっぱいに伸びるため、
+  画面上の位置は `device_x = offsetX + (p − x0) × W/w` で決まり、倍率は器の幅次第の任意の実数になる。
+
+  下流の見本帳 `pattern-rollback` (viewBox 幅 2101) で実測した pixel の境目からの端数。
+
+  | 器の幅 | 倍率 | world 356 (軸の理想値) | world 356.75 (軸が弾いた値) |
+  |---|---|---|---|
+  | 1100px | 0.523560 | 0.215 | 0.178 |
+  | 1200px | 0.571157 | 0.493 | 0.079 |
+  | 1400px | 0.666349 | 0.091 | 0.408 |
+
+  器 1200px では軸の理想値のほうが境目から遠い。 順位が主張と逆を向いていた。
+  倍率を決めるのは呼び出し側なので、engine 側に代わりに測るべき実体が無い。
+
+  `VisualAxis` から名前が消え、`report.counts` の同名の鍵も消える。
+
+  名札の枠幅を偶数へ切り上げる丸め (`computeLabelBoxW`) は残す。 外すと全ての名札が動く一方、
+  動かして良くなるものが無いため。 座標が 0.5 刻みに乗る性質は
+  `test/label-coord-half-grid.test.ts` が引き続き固定する。
+
 ## [0.41.1] - 2026-09-10
 
 ### Changed
@@ -2139,7 +2229,9 @@ Initial OSS release.
 使わない = annotated tag を push しても GitHub Release は作られず、 Release を作っていない版で
 行き止まりになる。
 
-[Unreleased]: https://github.com/cardene777/cdl/compare/v0.41.1...HEAD
+[Unreleased]: https://github.com/cardene777/cdl/compare/v0.43.0...HEAD
+[0.43.0]: https://github.com/cardene777/cdl/compare/v0.42.0...v0.43.0
+[0.42.0]: https://github.com/cardene777/cdl/compare/v0.41.1...v0.42.0
 [0.41.1]: https://github.com/cardene777/cdl/compare/v0.41.0...v0.41.1
 [0.41.0]: https://github.com/cardene777/cdl/compare/v0.40.12...v0.41.0
 [0.40.12]: https://github.com/cardene777/cdl/compare/v0.40.11...v0.40.12

package/dist/index.cjs

@@ -15535,7 +15535,6 @@ function emptyCounts() {
     "print-media-compat": 0,
     "color-blind-safety": 0,
     "marker-gradient-def-integrity": 0,
-    "subpixel-precision": 0,
     "dom-complexity-budget": 0,
     "reduced-motion-compat": 0,
     "touch-target-size": 0,
@@ -16930,7 +16929,10 @@ function runAxes(laid, diag, violations, counts, push, profile, skippedAxes) {
     } catch {
     }
   }
-  const RESPONSIVE_MAX_ASPECT = 6;
+  const RESPONSIVE_REF_CONTAINER_PX = 1100;
+  const RESPONSIVE_MIN_ON_SCREEN_FONT_PX = 12;
+  const RESPONSIVE_BASE_FONT_WORLD = 22;
+  const RESPONSIVE_MAX_VIEWBOX_W = RESPONSIVE_BASE_FONT_WORLD * RESPONSIVE_REF_CONTAINER_PX / RESPONSIVE_MIN_ON_SCREEN_FONT_PX;
   const vbResp = laid.viewBox;
   if (!(vbResp.w > 0) || !(vbResp.h > 0) || !Number.isFinite(vbResp.w) || !Number.isFinite(vbResp.h)) {
     push(
@@ -16938,15 +16940,13 @@ function runAxes(laid, diag, violations, counts, push, profile, skippedAxes) {
       `viewBox \u5BF8\u6CD5 ${vbResp.w}\xD7${vbResp.h} \u304C\u63CF\u753B\u4E0D\u80FD (\u6B63\u306E\u6709\u9650\u5024\u3067\u3042\u308B\u5FC5\u8981\u304C\u3042\u308B)`,
       "warn"
     );
-  } else {
-    const worstAspect = Math.max(vbResp.w / vbResp.h, vbResp.h / vbResp.w);
-    if (worstAspect > RESPONSIVE_MAX_ASPECT) {
-      push(
-        "responsive-viewport",
-        `viewBox aspect ${worstAspect.toFixed(1)}:1 \u304C RESPONSIVE_MAX_ASPECT ${RESPONSIVE_MAX_ASPECT}:1 \u8D85\u3048`,
-        "warn"
-      );
-    }
+  } else if (vbResp.w > RESPONSIVE_MAX_VIEWBOX_W) {
+    const \u753B\u9762\u4E0A\u306E\u5B57 = RESPONSIVE_BASE_FONT_WORLD * RESPONSIVE_REF_CONTAINER_PX / vbResp.w;
+    push(
+      "responsive-viewport",
+      `viewBox width ${vbResp.w} \u304C\u4E0A\u9650 ${RESPONSIVE_MAX_VIEWBOX_W.toFixed(0)} \u8D85\u3048 (\u89AA\u5E45 ${RESPONSIVE_REF_CONTAINER_PX}px \u3067\u7BB1\u306E\u984C\u304C ${\u753B\u9762\u4E0A\u306E\u5B57.toFixed(1)}px\u3001 \u4E0B\u9650 ${RESPONSIVE_MIN_ON_SCREEN_FONT_PX}px)`,
+      "warn"
+    );
   }
   if (!(diag.topic?.trim() ?? "")) {
     push(
@@ -17118,39 +17118,6 @@ function runAxes(laid, diag, violations, counts, push, profile, skippedAxes) {
       );
     }
   }
-  const SUBPIXEL_TOL = 0.5;
-  function isSubpixel(v) {
-    const nearestHalf = Math.round(v * 2) / 2;
-    return Math.abs(v - nearestHalf) > SUBPIXEL_TOL / 10;
-  }
-  for (const n of laid.nodes) {
-    if (n.id.endsWith("-spacer") || /^s\d+-/.test(n.id)) continue;
-    if (isSubpixel(n.cx) || isSubpixel(n.cy)) {
-      push(
-        "subpixel-precision",
-        `node "${n.id}" \u5EA7\u6A19 (${n.cx.toFixed(2)}, ${n.cy.toFixed(2)}) \u304C\u975E\u6574\u6570\u3001 subpixel blur \u30EA\u30B9\u30AF`,
-        "warn"
-      );
-    }
-  }
-  for (const e of laid.edges) {
-    if (isSubpixel(e.labelX) || isSubpixel(e.labelY)) {
-      push(
-        "subpixel-precision",
-        `edge "${e.id}" label \u5EA7\u6A19 (${e.labelX.toFixed(2)}, ${e.labelY.toFixed(2)}) \u304C\u975E\u6574\u6570\u3001 subpixel blur \u30EA\u30B9\u30AF`,
-        "warn"
-      );
-    }
-  }
-  for (const l of laid.lanes) {
-    if (isSubpixel(l.x) || isSubpixel(l.y)) {
-      push(
-        "subpixel-precision",
-        `lane "${l.id}" \u5EA7\u6A19 (${l.x.toFixed(2)}, ${l.y.toFixed(2)}) \u304C\u975E\u6574\u6570\u3001 subpixel blur \u30EA\u30B9\u30AF`,
-        "warn"
-      );
-    }
-  }
   const DOM_COMPLEXITY_BUDGET = 400;
   const totalElements = laid.nodes.length + laid.edges.length + laid.lanes.length + diag.phases.length;
   if (totalElements > DOM_COMPLEXITY_BUDGET) {
@@ -17781,7 +17748,6 @@ function validateMetaAxes(totalCounts, diagrams = [], durations = [], reports =
     "print-media-compat",
     "color-blind-safety",
     "marker-gradient-def-integrity",
-    "subpixel-precision",
     "dom-complexity-budget",
     "reduced-motion-compat",
     "touch-target-size",
@@ -17850,7 +17816,6 @@ function validateMetaAxes(totalCounts, diagrams = [], durations = [], reports =
     "print-media-compat",
     "color-blind-safety",
     "marker-gradient-def-integrity",
-    "subpixel-precision",
     "dom-complexity-budget",
     "reduced-motion-compat",
     "touch-target-size",
@@ -17898,7 +17863,7 @@ function validateMetaAxes(totalCounts, diagrams = [], durations = [], reports =
       });
     }
   }
-  const EXPECTED_AXIS_COUNT = 67;
+  const EXPECTED_AXIS_COUNT = 66;
   if (allAxes.length !== EXPECTED_AXIS_COUNT) {
     out.push({
       axis: "axis-documentation-completeness",
@@ -20252,7 +20217,8 @@ function expandLaneGapsForEdgeLabels(lanes, nodes, edges) {
   const nodeById = new Map(nodes.map((n) => [n.id, n]));
   const sortedByX = [...layoutedLanes].sort((a, b) => a.x - b.x);
   const laneIndexById = new Map(sortedByX.map((lane, i) => [lane.id, i]));
-  const requiredBoxWByPair = new Array(Math.max(0, sortedByX.length - 1)).fill(0);
+  const requiredBoxWAdjacent = new Array(Math.max(0, sortedByX.length - 1)).fill(0);
+  const requiredBoxWSpanning = new Array(Math.max(0, sortedByX.length - 1)).fill(0);
   for (const edge of edges) {
     const fromLane = nodeById.get(edge.from)?.lane;
     const toLane = nodeById.get(edge.to)?.lane;
@@ -20264,23 +20230,33 @@ function expandLaneGapsForEdgeLabels(lanes, nodes, edges) {
     if (labelBoxW === 0) continue;
     const lo = Math.min(fi, ti);
     const hi = Math.max(fi, ti);
+    const \u8981\u6C42 = hi - lo === 1 ? requiredBoxWAdjacent : requiredBoxWSpanning;
     for (let pair = lo; pair < hi; pair++) {
-      if (labelBoxW > requiredBoxWByPair[pair]) requiredBoxWByPair[pair] = labelBoxW;
+      if (labelBoxW > \u8981\u6C42[pair]) \u8981\u6C42[pair] = labelBoxW;
     }
   }
+  const \u7BB1\u306E\u534A\u5E45 = /* @__PURE__ */ new Map();
+  for (const n of nodes) {
+    const \u4ECA = \u7BB1\u306E\u534A\u5E45.get(n.lane) ?? 0;
+    if (n.w / 2 > \u4ECA) \u7BB1\u306E\u534A\u5E45.set(n.lane, n.w / 2);
+  }
   const requiredPitchByPair = [];
   for (let i = 0; i < sortedByX.length - 1; i++) {
     const lane = sortedByX[i];
     const rightLane = sortedByX[i + 1];
-    const halfSum = lane.width / 2 + rightLane.width / 2;
+    const laneHalfSum = lane.width / 2 + rightLane.width / 2;
+    const nodeHalfSum = (\u7BB1\u306E\u534A\u5E45.get(lane.id) ?? 0) + (\u7BB1\u306E\u534A\u5E45.get(rightLane.id) ?? 0);
     const currentPitch = rightLane.x + rightLane.width / 2 - (lane.x + lane.width / 2);
-    const maxLabelBoxW = requiredBoxWByPair[i];
-    if (maxLabelBoxW === 0) {
+    const \u96A3 = requiredBoxWAdjacent[i];
+    const \u8DE8 = requiredBoxWSpanning[i];
+    if (\u96A3 === 0 && \u8DE8 === 0) {
       requiredPitchByPair.push(currentPitch);
       continue;
     }
-    const requiredGap = maxLabelBoxW + CLEARANCE_NODE_LABEL * 2 + EDGE_STUB_OUT * 2;
-    requiredPitchByPair.push(Math.max(currentPitch, requiredGap + halfSum));
+    const \u4E0A\u4E57\u305B = CLEARANCE_NODE_LABEL * 2 + EDGE_STUB_OUT * 2;
+    const \u96A3\u306E\u8981\u6C42 = \u96A3 === 0 ? 0 : \u96A3 + \u4E0A\u4E57\u305B + nodeHalfSum;
+    const \u8DE8\u306E\u8981\u6C42 = \u8DE8 === 0 ? 0 : \u8DE8 + \u4E0A\u4E57\u305B + laneHalfSum;
+    requiredPitchByPair.push(Math.max(currentPitch, \u96A3\u306E\u8981\u6C42, \u8DE8\u306E\u8981\u6C42));
   }
   const targetPitch = Math.ceil(Math.max(...requiredPitchByPair));
   const shiftedXById = /* @__PURE__ */ new Map();