@cardenelabs/cdl 0.40.12 → 0.41.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.40.12",
+  "version": "0.41.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/visual-validate.ts

@@ -325,7 +325,6 @@ export type VisualAxis =
   | "row-content-typing"
   | "terminal-safe-text"
   | "gpu-layer-efficiency"
-  | "memory-budget"
   // CAR-Z8 (PR #87) 追加 = XSS / SEO / bidi / structured-data 4 領域。
   | "svg-injection-safety"
   | "seo-metadata-quality"
@@ -479,7 +478,6 @@ function emptyCounts(): Record<VisualAxis, number> {
     "row-content-typing": 0,
     "terminal-safe-text": 0,
     "gpu-layer-efficiency": 0,
-    "memory-budget": 0,
     "svg-injection-safety": 0,
     "seo-metadata-quality": 0,
     "bidi-hyphenation": 0,
@@ -1219,8 +1217,11 @@ export function countEdgeCrossings(
    * 分割片どうしの比較回数の上限。
    *
    * 辺の総当たりで、 各対の分割片を全比較する。 曲線 380 本の図では 1850 万回になり 264ms
-   * かかった (実測)。 1 図あたりの予算は `PERF_BUDGET_PER_DIAGRAM_MS` = 100 で、 他の軸が
-   * 150ms 前後使うため本軸に使えるのは僅か。
+   * かかった (実測)。 他の軸が 1 図あたり 150ms 前後を使うため、 本軸に回せるのは僅か。
+   *
+   * **1 図あたりの上限では判定していない** (`#776`)。 壁時計は同じ図を 3 周しても
+   * 53 / 0 / 1 ms と揺れるので、 判定は全図の合計 (`PERF_BUDGET_TOTAL_MS`) だけが持つ。
+   * ここの上限は「1 図が合計を食い潰さない」 ための設計上の目安で、 判定の境ではない。
    *
    * **上限に達したら数えるのをやめる**。 包囲箱で絞れないのは曲線どうしが広く重なる図で、
    * その形は総当たり以外に手が無い。 打ち切ると警告が出ないが、 出ない状態は弦で数えていた
@@ -3630,32 +3631,6 @@ function runAxes(
     );
   }
 
-  // ───────────────────────────────────────────────────────────
-  // Axis 40: memory-budget (diagram size 総和による React re-render 負荷)
-  //
-  // 判定 = nodes×h×w + edges×path segment 数 + phases×(tweens + sets 数) の推定 memory 単位
-  // が MEMORY_BUDGET (10^7) を超えると React re-render で GC pressure。 catalog 内 diagram は
-  // 10^5-10^6 が実測、 10^7 で明確な破綻。
-  // ───────────────────────────────────────────────────────────
-  const MEMORY_BUDGET = 1_000_000;
-  let nodeMemUnit = 0;
-  for (const n of laid.nodes) nodeMemUnit += n.w * n.h;
-  let edgeMemUnit = 0;
-  for (const e of laid.edges) {
-    const segs = extractPathSegments(e.d);
-    edgeMemUnit += segs.length * 100; // 1 segment ≈ 100 memory unit (SVG path + marker + label)
-  }
-  let phaseMemUnit = 0;
-  for (const p of diag.phases) phaseMemUnit += (p.tweens.length + p.sets.length) * 50;
-  const totalMemUnit = nodeMemUnit + edgeMemUnit + phaseMemUnit;
-  if (totalMemUnit > MEMORY_BUDGET) {
-    push(
-      "memory-budget",
-      `diagram memory unit 推定 ${totalMemUnit.toFixed(0)} > budget ${MEMORY_BUDGET} (nodes=${nodeMemUnit.toFixed(0)} edges=${edgeMemUnit.toFixed(0)} phases=${phaseMemUnit.toFixed(0)})`,
-      "warn",
-    );
-  }
-
   // ───────────────────────────────────────────────────────────
   // Axis 41: svg-injection-safety (XSS / script injection 検知、 error severity)
   //
@@ -4361,6 +4336,76 @@ export function visualValidateAll(diagrams: CdlDiagram[], opts?: ValidateOptions
  *     source を読めない (build 後は minified) ため、 実装は要素数の一致に留まる。
  *     `VisualAxis` / `emptyCounts` / `allAxes` の 3 つが揃っているかは見ない (#381)。
  */
+/** 全 diagram の検査に掛けてよい合計の時間 (ms)。 */
+export const PERF_BUDGET_TOTAL_MS = 5000;
+
+/** 合計が境を超えた時に、内訳として名前を出す図の数。 */
+export const PERF_SLOWEST_SAMPLE = 5;
+
+/**
+ * Axis 52 `validate-performance-budget` の判定 (`#776`)。
+ *
+ * ## 1 枚ごとの壁時計では判定しない
+ *
+ * 同じ図を同じ process で 3 周すると答えが変わる。 実測 (下流の見本帳 444 枚)。
+ *
+ * ```
+ * interactive-social-share-buttons   53ms /   0ms /   1ms
+ * interactive-traffic-sankey         50ms / 159ms / 115ms
+ * ```
+ *
+ * 1 つ目は最初の 1 回だけ掛かる下準備で、2 つ目は機械の混み具合。 どちらも図の性質ではない。
+ * 100ms の境で数えると **入力が同じなのに超過が 0 / 1 / 1 件** と周ごとに変わっていた =
+ * 測れなかったことを「遅い」 に倒していた
+ * (`rules/quality.md § 判定できなかったことを値に潰さない`)。
+ *
+ * 合計は同じ 3 周で 559 / 877 / 858 ms と 1.6 倍の幅に収まり、境の 5000ms から充分離れている
+ * ので判定が安定する。 **合計だけを見る**。
+ *
+ * ## 報告を 1 件に丸めない
+ *
+ * 合計だけを見ると「どの図が重いか」 が落ちるので、超過した時に重い順の内訳を文面へ載せる。
+ * 出し切れない分は件数で残す = 黙って捨てない。
+ *
+ * 旧実装は `findIndex` で最初に当たった 1 枚しか出しておらず、20 枚が超過した周でも報告は
+ * 1 枚だった。 残り 19 枚は数にも文面にも出ない。
+ *
+ * ## なぜ関数に切り出すか
+ *
+ * 合計が 5000ms を超える状況を実際に作ると、確かめる検査そのものが 5 秒以上掛かる。
+ * 時間の配列を直接渡せる形にして、両向きを実時間なしで固定する。
+ *
+ * @param durations 図ごとの実行時間 (ms)。 `diagrams` と同じ並び
+ * @param diagrams 図。 名前を内訳に出すためだけに使う
+ */
+export function perfBudgetViolations(
+  durations: readonly number[],
+  diagrams: readonly { id: string }[] = [],
+): Violation[] {
+  const total = durations.reduce((s, d) => s + d, 0);
+  if (total <= PERF_BUDGET_TOTAL_MS) return [];
+
+  const 重い順 = durations
+    .map((ms, i) => ({ id: diagrams[i]?.id ?? "?", ms }))
+    .sort((a, b) => b.ms - a.ms);
+  const 抜粋 = 重い順.slice(0, PERF_SLOWEST_SAMPLE);
+  const 残り = 重い順.length - 抜粋.length;
+  const 内訳 =
+    抜粋.map((d) => `"${d.id}" ${d.ms}ms`).join(" / ") +
+    (残り > 0 ? `、 残り ${残り} 図は出していない` : "");
+
+  return [
+    {
+      axis: "validate-performance-budget",
+      diagramId: "__meta__",
+      detail:
+        `visualValidateAll 全 ${durations.length} 図の累計 ${total}ms > ` +
+        `${PERF_BUDGET_TOTAL_MS}ms budget (重い順 ${内訳})`,
+      severity: "warn",
+    },
+  ];
+}
+
 function validateMetaAxes(
   totalCounts: Record<VisualAxis, number>,
   diagrams: CdlDiagram[] = [],
@@ -4392,27 +4437,7 @@ function validateMetaAxes(
   // 本 axis は 空 (engine 単体で判定材料なし)、 発火経路として先取り。
 
   // ─── Axis 52: validate-performance-budget (validate 実行時間) ───
-  const PERF_BUDGET_PER_DIAGRAM_MS = 100;
-  const PERF_BUDGET_TOTAL_MS = 5000;
-  const overBudgetIdx = durations.findIndex((d) => d > PERF_BUDGET_PER_DIAGRAM_MS);
-  if (overBudgetIdx >= 0) {
-    const did = diagrams[overBudgetIdx]?.id ?? "?";
-    out.push({
-      axis: "validate-performance-budget",
-      diagramId: did,
-      detail: `diagram "${did}" validate ${durations[overBudgetIdx]}ms > ${PERF_BUDGET_PER_DIAGRAM_MS}ms budget`,
-      severity: "warn",
-    });
-  }
-  const totalDur = durations.reduce((s, d) => s + d, 0);
-  if (totalDur > PERF_BUDGET_TOTAL_MS) {
-    out.push({
-      axis: "validate-performance-budget",
-      diagramId: "__meta__",
-      detail: `visualValidateAll 全 diagram 累計 ${totalDur}ms > ${PERF_BUDGET_TOTAL_MS}ms budget`,
-      severity: "warn",
-    });
-  }
+  out.push(...perfBudgetViolations(durations, diagrams));
 
   // Axis 47: dead axis 検知
   // security / migration 系は自然発火なしを許容 (実データに XSS / migration 混入は稀)
@@ -4463,7 +4488,6 @@ function validateMetaAxes(
     "row-content-typing",
     "terminal-safe-text",
     "gpu-layer-efficiency",
-    "memory-budget",
     "svg-injection-safety",
     "seo-metadata-quality",
     "bidi-hyphenation",
@@ -4533,7 +4557,6 @@ function validateMetaAxes(
     "row-content-typing",
     "terminal-safe-text",
     "gpu-layer-efficiency",
-    "memory-budget",
     "svg-injection-safety",
     "seo-metadata-quality",
     "bidi-hyphenation",
@@ -4583,8 +4606,9 @@ function validateMetaAxes(
   // 以前は comment に 69、 定数に 68 と別の数が書かれており、 どちらが正か読めなかった。
   //
   // 削除済 = engine-meta 51 (mermaid-parity、 #366) / 軸 29 (svg-filter-integrity) /
-  // 軸 30 (neumorphism-shadow-budget、 どちらも #426 で主題の廃止に伴い削除)。
-  const EXPECTED_AXIS_COUNT = 68;
+  // 軸 30 (neumorphism-shadow-budget、 どちらも #426 で主題の廃止に伴い削除) /
+  // 軸 40 (memory-budget、 #775 で軸 34 に一本化)。
+  const EXPECTED_AXIS_COUNT = 67;
   if (allAxes.length !== EXPECTED_AXIS_COUNT) {
     out.push({
       axis: "axis-documentation-completeness",