@cardenelabs/cdl 0.43.0 → 0.45.0

package/CHANGELOG.md

@@ -5,6 +5,73 @@ CDL (Chainome Diagram Language) の主要変更履歴。
 
 ## [Unreleased]
 
+## [0.45.0] - 2026-09-11
+
+### Added
+
+- **読みにくさを測る器を呼び出し側から渡せるようにした** (軸 23 `responsive-viewport`、#797)
+
+  `visualValidate` / `visualValidateLaid` / `visualValidateAll` に `container` を足した。
+
+  ```ts
+  visualValidate(diagram, { container: { width: 874 } });
+  ```
+
+  軸 23 は `#793` から器に収めた倍率で読みにくさを判定するが、その器を engine が
+  1150 × 630px に決め打っていた。 これは下流の見本帳の **拡大表示** を画面で実測した値で、
+  同じ見本帳でも一覧に並べた時の枠は幅 874px、縦は巻き取るので上限が無い。
+  器が違えば同じ図でも読めるかどうかが変わるため、決め打つと片方の見せ方が測れないまま残る。
+
+  **高さは省ける**。 省いた器では縦を見ない = 0 や無限大で表すと「上限が無い」 と
+  「潰れている」 が同じ値になる。 省いた時の文面は `器 幅 874px (高さの上限なし)` になり、
+  効いた辺は必ず横、届く寸法も幅で出す。
+
+  **壊れた寸法は既定に落とさず例外にする**。 落とすと、誤った値を渡した呼び出し側が
+  「効いている」 と読む。 0 / 負値 / `NaN` / 無限大が対象で、判定は **図ごとではなく入口で
+  1 度だけ**行う (図ごとに投げると、器の誤りが図の破綻に紛れてどちらを直すか読めない)。
+  図を 1 枚も渡さない掃き出しでも確かめる。
+
+  `container` を渡さない呼び出しは今までどおり拡大表示の器 (1150 × 630px) で判定する。
+  文面も 1 文字も変えていない。
+
+## [0.44.0] - 2026-09-10
+
+### Fixed
+
+- **読みにくさを図の幅でなく描かれる倍率で判定するようにした** (軸 23 `responsive-viewport`、#793)
+
+  図は `preserveAspectRatio="xMidYMid meet"` で器に収まるよう中で縮む。 効く倍率は
+  `min(器の幅 ÷ viewBox 幅, 器の高さ ÷ viewBox 高さ)` で、横が余っていても縦が足りなければ
+  縦が決める。 `#785` で縦横比から幅の上限へ移した時に、**高さの項が抜けていた**。
+
+  下流の見本帳を Chromium で開いて実測した (画面 1440 × 900、拡大表示)。
+  28 回の実測のうち 27 回で縦が倍率を決めていた。
+
+  | 図 | viewBox | 幅から出す見込み | 実測 |
+  |---|---|---|---|
+  | `多対多が-2-組-8-表-8-関係` | 1255x1700 | 19.3px | 8.2px |
+  | `interactive-price-candlestick` | 875x1256 | 27.7px | 11.0px |
+  | `fsm-demo` | 1413x1393 | 17.1px | 9.9px |
+  | `er-complex-demo` | 2190x2904 | 11.1px | 4.8px |
+  | `swim-demo` | 1848x285 | 13.1px | 13.7px |
+
+  順位も逆を向いていた。 `er-complex-demo` は見込みで 14 枚中 9 位だが実測は最下位で、
+  拡大すると並べて見る時 (8.8px) より小さくなる。
+
+  判定を倍率の下限に置き換えた。 器は画面での実測から導く = 幅は拡大表示の枠
+  `min(1200px, 94vw)` から縁 1px × 2 と余白 24px × 2 を引いた 1150px、高さは
+  `90vh − 180px` を画面の高さ 900px で評価した 630px。 数は直接書かない。
+
+  この式に実測の器を入れると、上の 5 枚とも画面での実測と 0.1px まで一致する。
+
+  注意の文面が変わる = viewBox の縦横の寸法、器の寸法、倍率、**どちらの辺が効いたか**、
+  その辺で下限に届く寸法を出す。 効いた辺を出さないと、幅を削っても直らない図で
+  書き手が幅を削り続けることになる。
+
+  下流では注意の件数が増える (実測 = 見本帳 444 枚で 12 件 → 20 件)。
+  増える 10 枚はいずれも縦が長い図で、画面では 8.2-11.9px しかない。
+  描画不能な寸法 (0 / 負値 / 非有限) の判定は変えていない。
+
 ## [0.43.0] - 2026-09-10
 
 ### Fixed
@@ -2229,7 +2296,9 @@ Initial OSS release.
 使わない = annotated tag を push しても GitHub Release は作られず、 Release を作っていない版で
 行き止まりになる。
 
-[Unreleased]: https://github.com/cardene777/cdl/compare/v0.43.0...HEAD
+[Unreleased]: https://github.com/cardene777/cdl/compare/v0.45.0...HEAD
+[0.45.0]: https://github.com/cardene777/cdl/compare/v0.44.0...v0.45.0
+[0.44.0]: https://github.com/cardene777/cdl/compare/v0.43.0...v0.44.0
 [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

package/dist/index.cjs

@@ -15500,6 +15500,27 @@ var SKIPPED_AXES = {
   production: /* @__PURE__ */ new Set(),
   catalog: /* @__PURE__ */ new Set(["seo-metadata-quality", "structured-data-extraction"])
 };
+var \u65E2\u5B9A\u306E\u5668 = {
+  /**
+   * 拡大表示の枠は `min(1200px, 94vw)` で、中身は 1px の縁と 24px の余白の内側に描かれる。
+   * 画面が 1280px 以上なら 1200 が効くので、そこから縁 2 枚と余白 2 枚を引く。
+   */
+  width: 1200 - 1 * 2 - 24 * 2,
+  /** 同じ拡大表示の高さの頭打ち (`90vh − 180px`) を、基準の画面の高さ 900px で評価した値。 */
+  height: 900 * 0.9 - 180
+};
+function \u5668\u3092\u78BA\u304B\u3081\u308B(c) {
+  if (c === void 0) return { \u5E45: \u65E2\u5B9A\u306E\u5668.width, \u9AD8\u3055: \u65E2\u5B9A\u306E\u5668.height };
+  if (!(c.width > 0) || !Number.isFinite(c.width)) {
+    throw new Error(`container.width \u304C\u63CF\u753B\u4E0D\u80FD (\u6B63\u306E\u6709\u9650\u5024\u3067\u3042\u308B\u5FC5\u8981\u304C\u3042\u308B): ${c.width}`);
+  }
+  if (c.height !== void 0 && (!(c.height > 0) || !Number.isFinite(c.height))) {
+    throw new Error(
+      `container.height \u304C\u63CF\u753B\u4E0D\u80FD (\u6B63\u306E\u6709\u9650\u5024\u3067\u6E21\u3059\u304B\u3001\u4E0A\u9650\u304C\u7121\u3044\u306A\u3089\u7701\u304F): ${c.height}`
+    );
+  }
+  return { \u5E45: c.width, \u9AD8\u3055: c.height };
+}
 var MIN_NODE_W = 80;
 var MIN_NODE_H = 40;
 var ROW_FORMAT = /^[^:]+:\s*.+$/;
@@ -15971,7 +15992,16 @@ function visualValidateLaid(laid, diag, opts) {
     violations.push({ axis, diagramId: safeDiagramId(diag), detail, severity });
     counts[axis]++;
   };
-  return visualValidateInner(laid, diag, violations, counts, push, profile, [...skipped]);
+  return visualValidateInner(
+    laid,
+    diag,
+    violations,
+    counts,
+    push,
+    profile,
+    [...skipped],
+    \u5668\u3092\u78BA\u304B\u3081\u308B(opts?.container)
+  );
 }
 function visualValidate(diag, opts) {
   const violations = [];
@@ -16008,7 +16038,16 @@ function visualValidate(diag, opts) {
   } finally {
     console.warn = origWarn;
   }
-  return visualValidateInner(laid, safeDiag, violations, counts, push, profile, [...skipped]);
+  return visualValidateInner(
+    laid,
+    safeDiag,
+    violations,
+    counts,
+    push,
+    profile,
+    [...skipped],
+    \u5668\u3092\u78BA\u304B\u3081\u308B(opts?.container)
+  );
 }
 var VALIDATED_ARRAY_FIELDS = [
   ["laid", "lanes"],
@@ -16208,7 +16247,7 @@ function normalizeForValidation(value, problems, owner) {
   }
   return next;
 }
-function visualValidateInner(laid, diag, violations, counts, push, profile, skippedAxes) {
+function visualValidateInner(laid, diag, violations, counts, push, profile, skippedAxes, \u5668) {
   const problems = findMalformedInput(laid, diag);
   for (const p of problems) push("malformed-input", p.detail, "error");
   if (problems.length > 0) {
@@ -16216,7 +16255,7 @@ function visualValidateInner(laid, diag, violations, counts, push, profile, skip
     diag = normalizeForValidation(diag, problems, "diag");
   }
   try {
-    return runAxes(laid, diag, violations, counts, push, profile, skippedAxes);
+    return runAxes(laid, diag, violations, counts, push, profile, skippedAxes, \u5668);
   } catch (err) {
     const known = counts["malformed-input"] > 0;
     const axis = known ? "malformed-input" : "validation-interrupted";
@@ -16229,7 +16268,7 @@ function visualValidateInner(laid, diag, violations, counts, push, profile, skip
     return { diagramId: safeDiagramId(diag), ok: false, violations, counts, profile, skippedAxes };
   }
 }
-function runAxes(laid, diag, violations, counts, push, profile, skippedAxes) {
+function runAxes(laid, diag, violations, counts, push, profile, skippedAxes, \u5668) {
   const LIFELINE_W_THRESHOLD = 8;
   for (const n of laid.nodes) {
     if (n.w < LIFELINE_W_THRESHOLD) continue;
@@ -16929,10 +16968,10 @@ function runAxes(laid, diag, violations, counts, push, profile, skippedAxes) {
     } catch {
     }
   }
-  const RESPONSIVE_REF_CONTAINER_PX = 1100;
+  const RESPONSIVE_REF_CONTAINER_W_PX = \u5668.\u5E45;
+  const RESPONSIVE_REF_CONTAINER_H_PX = \u5668.\u9AD8\u3055;
   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(
@@ -16940,13 +16979,21 @@ 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 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"
-    );
+  } else {
+    const \u6A2A\u306E\u500D\u7387 = RESPONSIVE_REF_CONTAINER_W_PX / vbResp.w;
+    const \u7E26\u306E\u500D\u7387 = RESPONSIVE_REF_CONTAINER_H_PX === void 0 ? Number.POSITIVE_INFINITY : RESPONSIVE_REF_CONTAINER_H_PX / vbResp.h;
+    const \u500D\u7387 = Math.min(\u6A2A\u306E\u500D\u7387, \u7E26\u306E\u500D\u7387);
+    const \u753B\u9762\u4E0A\u306E\u5B57 = RESPONSIVE_BASE_FONT_WORLD * \u500D\u7387;
+    if (\u753B\u9762\u4E0A\u306E\u5B57 < RESPONSIVE_MIN_ON_SCREEN_FONT_PX) {
+      const \u52B9\u304F\u8FBA = \u6A2A\u306E\u500D\u7387 <= \u7E26\u306E\u500D\u7387 ? "\u6A2A" : "\u7E26";
+      const \u53CE\u307E\u308B\u5BF8\u6CD5 = \u52B9\u304F\u8FBA === "\u6A2A" || RESPONSIVE_REF_CONTAINER_H_PX === void 0 ? `\u5E45 ${(RESPONSIVE_REF_CONTAINER_W_PX * RESPONSIVE_BASE_FONT_WORLD / RESPONSIVE_MIN_ON_SCREEN_FONT_PX).toFixed(0)} \u4EE5\u4E0B` : `\u9AD8\u3055 ${(RESPONSIVE_REF_CONTAINER_H_PX * RESPONSIVE_BASE_FONT_WORLD / RESPONSIVE_MIN_ON_SCREEN_FONT_PX).toFixed(0)} \u4EE5\u4E0B`;
+      const \u5668\u306E\u66F8\u304D\u65B9 = RESPONSIVE_REF_CONTAINER_H_PX === void 0 ? `\u5668 \u5E45 ${RESPONSIVE_REF_CONTAINER_W_PX}px (\u9AD8\u3055\u306E\u4E0A\u9650\u306A\u3057)` : `\u5668 ${RESPONSIVE_REF_CONTAINER_W_PX}\xD7${RESPONSIVE_REF_CONTAINER_H_PX}px`;
+      push(
+        "responsive-viewport",
+        `viewBox ${vbResp.w}\xD7${vbResp.h} \u306F${\u5668\u306E\u66F8\u304D\u65B9} \u3067 ${\u500D\u7387.toFixed(3)} \u500D\u306B\u7E2E\u307F\u3001 \u7BB1\u306E\u984C\u304C ${\u753B\u9762\u4E0A\u306E\u5B57.toFixed(1)}px \u306B\u306A\u308B (\u4E0B\u9650 ${RESPONSIVE_MIN_ON_SCREEN_FONT_PX}px\u3001 \u500D\u7387\u3092\u6C7A\u3081\u305F\u306E\u306F ${\u52B9\u304F\u8FBA}\u3001 ${\u53CE\u307E\u308B\u5BF8\u6CD5}\u306B\u3059\u308B\u3068\u5C4A\u304F)`,
+        "warn"
+      );
+    }
   }
   if (!(diag.topic?.trim() ?? "")) {
     push(
@@ -17648,6 +17695,7 @@ function runAxes(laid, diag, violations, counts, push, profile, skippedAxes) {
   };
 }
 function visualValidateAll(diagrams, opts) {
+  \u5668\u3092\u78BA\u304B\u3081\u308B(opts?.container);
   const durations = [];
   const reports = diagrams.map((d) => {
     const start = Date.now();