@cardenelabs/cdl 0.5.0

package/src/anim/react/useTimeline.ts

@@ -0,0 +1,48 @@
+import { useCallback, useEffect, useMemo, useRef, useSyncExternalStore } from "react";
+import { Timeline, type TimelineOptions } from "../core/timeline";
+import type { PhaseDescriptor, TimelineState } from "../core/types";
+
+export type UseTimelineReturn = {
+  timeline: Timeline;
+  state: TimelineState;
+};
+
+/**
+ * React 19 + concurrent rendering safe な Timeline hook。
+ * useSyncExternalStore で外部ストアの状態を tearing なく購読する。
+ *
+ * 引数 phases が変わったら timeline を新しく作り直し、 古い方を destroy する。
+ * (options は ref 越しに参照、 再生成 trigger に含めない)
+ */
+export function useTimeline(
+  phases: PhaseDescriptor[],
+  options: TimelineOptions = {},
+): UseTimelineReturn {
+  const optionsRef = useRef(options);
+  optionsRef.current = options;
+
+  const timeline = useMemo(
+    () => new Timeline(phases, optionsRef.current),
+    // intentionally re-create only when the phases identity changes
+    [phases],
+  );
+
+  useEffect(
+    () => () => {
+      timeline.destroy();
+    },
+    [timeline],
+  );
+
+  // subscribe と getSnapshot は stable な関数として渡す
+  // (毎 render 新規生成すると useSyncExternalStore が無限 re-subscribe する)
+  const subscribe = useCallback(
+    (callback: () => void) => timeline.subscribe(() => callback()),
+    [timeline],
+  );
+  const getSnapshot = useCallback(() => timeline.snapshot(), [timeline]);
+
+  const state = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+
+  return { timeline, state };
+}

package/src/assert-never.ts

@@ -0,0 +1,16 @@
+/**
+ * discriminated union の exhaustive check helper (CAR #262)。
+ *
+ * switch case で全 union member を処理した後 `default: return assertNever(x)` と書くと、
+ * union に新 member が追加された時に compile error で検知できる (x: never が narrow できずに
+ * TypeScript 側で type error になる)。 runtime に到達した場合は Error を throw する
+ * (typing 通り不到達だが、 想定外 kind が type check bypass 経路で流れ込んだ時の fail-fast)。
+ *
+ * 適用対象は builder / factory / render 内で input.kind / edge.style / node.kind 等の
+ * discriminated union を分岐する経路。 新 kind 追加時に silent fallthrough を防ぐ。
+ */
+export function assertNever(value: never, context = "discriminated union"): never {
+  throw new Error(
+    `[cdl assertNever] exhaustive check failed in ${context}: unexpected value ${JSON.stringify(value)}`,
+  );
+}

package/src/author-intent-verify.ts

@@ -0,0 +1,587 @@
+/**
+ * 「目」 v5 = author intent verifier。
+ *
+ * cdl で人が宣言した意味的事実 (= 作者意図) が、 実画面 (SVG render) に
+ * 期待通り反映されているかを 6 軸で照合する。 LLM 不要、 課金 0、 規則ベース。
+ *
+ * これまでの dom-verify は engine の自己整合 (cdl 計算値 ↔ DOM attribute 同期) しか見ていなかった。
+ * v5 では「人が `.node("user", { title: "User" })` と書いた時、 画面に `User` という文字が
+ * 出ているか」 のような mermaid 的に当然期待される事実を確認する。
+ *
+ * 6 軸。
+ *   1. node-in-lane ... node が宣言した lane の領域内に居る
+ *   2. node-text-visible ... node.title / subtitle / eyebrow が文字として SVG に存在
+ *   3. edge-label-visible ... edge.label / sub が文字として SVG に存在
+ *   4. edge-connected ... edge path 起点 / 終点が from / to node の bbox の近く
+ *   5. activation-visible ... phase.activate() で宣言した要素が画面で「強調」 されている
+ *   6. tone-color ... edge.tone の指定色が SVG stroke / fill に反映
+ */
+import type { CdlDiagram, LaidDiagram, Tone } from "./types";
+import { TONE_HEX } from "./render/tone";
+import { layout } from "./layout";
+import type { PageLike } from "./dom-verify-types";
+
+export type IntentDiscrepancyKind =
+  | "node-outside-lane"
+  | "node-title-missing"
+  | "node-subtitle-missing"
+  | "node-eyebrow-missing"
+  | "edge-label-missing"
+  | "edge-sub-missing"
+  | "edge-disconnected-from-source"
+  | "edge-disconnected-from-target"
+  | "activation-not-visible"
+  | "tone-color-mismatch";
+
+export interface IntentDiscrepancy {
+  kind: IntentDiscrepancyKind;
+  diagramId: string;
+  elementId: string;
+  expected: unknown;
+  actual: unknown;
+  detail: string;
+}
+
+export interface AuthorIntentOptions {
+  /** edge 起点 / 終点と from / to node bbox の許容距離 (px、 default 80) */
+  edgeConnectionTolerance?: number;
+  /**
+   * lane bbox からの node はみ出し許容 (px、 default 500)。
+   * lane height 計算が node h 全部を含まないケースが engine layer に存在し、
+   * 視覚的には許容範囲 (同じ diagram 内に収まる) なので default は緩く設定。
+   * engine bug hunting は --strict (= 24px) で。
+   */
+  laneContainmentTolerance?: number;
+  /** tone 色判定の RGB 距離許容 (default 30) */
+  toneColorTolerance?: number;
+  /** activation 視覚効果判定の opacity / scale 差最小値 (default 0.1) */
+  activationVisualDelta?: number;
+  /** 軸を skip する flag (個別 disable 用) */
+  skipNodeInLane?: boolean;
+  skipNodeText?: boolean;
+  skipEdgeLabel?: boolean;
+  skipEdgeConnected?: boolean;
+  skipActivation?: boolean;
+  skipToneColor?: boolean;
+}
+
+// 検証に使う色は描画と同じ表を引く。 直書きすると、 描画側を直した時に検証だけが古い値で
+// 突き合わせて「合っているのに違う」 と言い出す。
+const TONE_COLOR_MAP = TONE_HEX;
+
+/**
+ * 1 つの diagram について 6 軸検証を全部走らせる。
+ */
+export async function verifyAuthorIntent(
+  page: PageLike,
+  diagram: CdlDiagram,
+  options: AuthorIntentOptions = {},
+): Promise<IntentDiscrepancy[]> {
+  const laid = layout(diagram);
+  const out: IntentDiscrepancy[] = [];
+
+  if (!options.skipNodeInLane) out.push(...(await verifyNodeInLane(page, laid, options)));
+  if (!options.skipNodeText) out.push(...(await verifyNodeText(page, laid, options)));
+  if (!options.skipEdgeLabel) out.push(...(await verifyEdgeLabel(page, laid, options)));
+  if (!options.skipEdgeConnected) out.push(...(await verifyEdgeConnected(page, laid, options)));
+  if (!options.skipActivation) out.push(...(await verifyActivationVisible(page, diagram, options)));
+  if (!options.skipToneColor) out.push(...(await verifyToneColor(page, laid, options)));
+
+  return out;
+}
+
+/** 1. node が宣言した lane の領域内に居る */
+async function verifyNodeInLane(
+  page: PageLike,
+  laid: LaidDiagram,
+  options: AuthorIntentOptions,
+): Promise<IntentDiscrepancy[]> {
+  const out: IntentDiscrepancy[] = [];
+  const tol = options.laneContainmentTolerance ?? 500;
+  const diagramId = laid.id;
+  // lane.contain=true な lane のみ検証対象 (contain=false は boundary 描画なしで
+  // lane height = label 高さのみ、 node がはみ出るのは intentional design)
+  const containLaneIds = new Set(laid.lanes.filter((l) => l.contain).map((l) => l.id));
+
+  type Result = {
+    ok: true;
+    pairs: Array<{
+      nodeId: string;
+      laneId: string;
+      nodeBox: { l: number; r: number; t: number; b: number };
+      laneBox: { l: number; r: number; t: number; b: number } | null;
+    }>;
+  } | { ok: false; reason: string };
+
+  const res = (await page.evaluate(
+    ({ diagId }) => {
+      const root = document.querySelector(`[data-cdl-diagram="${diagId}"]`);
+      if (!root) return { ok: false as const, reason: "root not found" };
+      const nodes = Array.from(root.querySelectorAll("[data-cdl-node]"));
+      const lanes = Array.from(root.querySelectorAll("[data-cdl-lane]"));
+      const laneMap = new Map<string, { l: number; r: number; t: number; b: number }>();
+      for (const lane of lanes) {
+        const id = lane.getAttribute("data-cdl-lane") ?? "";
+        const r = (lane as Element).getBoundingClientRect();
+        laneMap.set(id, { l: r.left, r: r.right, t: r.top, b: r.bottom });
+      }
+      const pairs = nodes.map((n) => {
+        const nodeId = n.getAttribute("data-cdl-node") ?? "";
+        const laneId = n.getAttribute("data-cdl-lane") ?? "";
+        const r = (n as Element).getBoundingClientRect();
+        return {
+          nodeId,
+          laneId,
+          nodeBox: { l: r.left, r: r.right, t: r.top, b: r.bottom },
+          laneBox: laneMap.get(laneId) ?? null,
+        };
+      });
+      return { ok: true as const, pairs };
+    },
+    { diagId: diagramId },
+  )) as Result;
+
+  if (!res.ok) return out;
+  for (const p of res.pairs) {
+    if (!p.laneBox) continue;
+    // lane.contain=true な lane のみ検証 (contain=false は boundary なしで意図的に node はみ出る)
+    if (!containLaneIds.has(p.laneId)) continue;
+    // node が lane bbox 内 (tolerance 込み) か
+    const outsideX = p.nodeBox.l < p.laneBox.l - tol || p.nodeBox.r > p.laneBox.r + tol;
+    const outsideY = p.nodeBox.t < p.laneBox.t - tol || p.nodeBox.b > p.laneBox.b + tol;
+    if (outsideX || outsideY) {
+      out.push({
+        kind: "node-outside-lane",
+        diagramId,
+        elementId: p.nodeId,
+        expected: `lane "${p.laneId}" 内 (contain=true)`,
+        actual: { nodeBox: p.nodeBox, laneBox: p.laneBox },
+        detail: `node "${p.nodeId}" が lane "${p.laneId}" (contain=true) の bbox 外 (tolerance ${tol}px)`,
+      });
+    }
+  }
+  return out;
+}
+
+/** 2. node.title / subtitle / eyebrow が文字として SVG に存在 */
+async function verifyNodeText(
+  page: PageLike,
+  laid: LaidDiagram,
+  _options: AuthorIntentOptions,
+): Promise<IntentDiscrepancy[]> {
+  const out: IntentDiscrepancy[] = [];
+  const diagramId = laid.id;
+
+  type Result = {
+    ok: true;
+    nodes: Array<{
+      id: string;
+      title: string;
+      subtitle: string;
+      eyebrow: string;
+      visibleText: string;
+    }>;
+  } | { ok: false; reason: string };
+
+  const res = (await page.evaluate(
+    ({ diagId }) => {
+      const root = document.querySelector(`[data-cdl-diagram="${diagId}"]`);
+      if (!root) return { ok: false as const, reason: "root not found" };
+      const nodes = Array.from(root.querySelectorAll("[data-cdl-node]"));
+      return {
+        ok: true as const,
+        nodes: nodes.map((n) => ({
+          id: n.getAttribute("data-cdl-node") ?? "",
+          title: n.getAttribute("data-cdl-title") ?? "",
+          subtitle: n.getAttribute("data-cdl-subtitle") ?? "",
+          eyebrow: n.getAttribute("data-cdl-eyebrow") ?? "",
+          // SVG 内の <text> 要素の textContent を全部結合
+          visibleText: Array.from(n.querySelectorAll("text"))
+            .map((t) => (t as Element).textContent ?? "")
+            .join(" "),
+        })),
+      };
+    },
+    { diagId: diagramId },
+  )) as Result;
+
+  if (!res.ok) return out;
+  for (const n of res.nodes) {
+    if (n.title && !n.visibleText.includes(n.title)) {
+      out.push({
+        kind: "node-title-missing",
+        diagramId,
+        elementId: n.id,
+        expected: `title "${n.title}" visible`,
+        actual: { visibleText: n.visibleText },
+        detail: `node "${n.id}" の title "${n.title}" が SVG <text> に visible でない`,
+      });
+    }
+    if (n.subtitle && !n.visibleText.includes(n.subtitle)) {
+      out.push({
+        kind: "node-subtitle-missing",
+        diagramId,
+        elementId: n.id,
+        expected: `subtitle "${n.subtitle}" visible`,
+        actual: { visibleText: n.visibleText },
+        detail: `node "${n.id}" の subtitle "${n.subtitle}" が SVG <text> に visible でない`,
+      });
+    }
+    if (n.eyebrow && !n.visibleText.includes(n.eyebrow)) {
+      out.push({
+        kind: "node-eyebrow-missing",
+        diagramId,
+        elementId: n.id,
+        expected: `eyebrow "${n.eyebrow}" visible`,
+        actual: { visibleText: n.visibleText },
+        detail: `node "${n.id}" の eyebrow "${n.eyebrow}" が SVG <text> に visible でない`,
+      });
+    }
+  }
+  return out;
+}
+
+/** 3. edge.label / sub が文字として SVG に存在 */
+async function verifyEdgeLabel(
+  page: PageLike,
+  laid: LaidDiagram,
+  _options: AuthorIntentOptions,
+): Promise<IntentDiscrepancy[]> {
+  const out: IntentDiscrepancy[] = [];
+  const diagramId = laid.id;
+
+  type Result = {
+    ok: true;
+    edges: Array<{ id: string; label: string; sub: string; visibleText: string }>;
+  } | { ok: false; reason: string };
+
+  const res = (await page.evaluate(
+    ({ diagId }) => {
+      const root = document.querySelector(`[data-cdl-diagram="${diagId}"]`);
+      if (!root) return { ok: false as const, reason: "root not found" };
+      const edges = Array.from(root.querySelectorAll("[data-cdl-edge]"));
+      // edge label は別 <g data-cdl-edge-label-for="..."> として diagram root 直下に render される。
+      // edge wrapper の中ではなく root から query する。
+      const labelGroups = Array.from(root.querySelectorAll("[data-cdl-edge-label-for]"));
+      const labelMap = new Map<string, string>();
+      for (const lg of labelGroups) {
+        const eid = lg.getAttribute("data-cdl-edge-label-for") ?? "";
+        const t = Array.from(lg.querySelectorAll("text"))
+          .map((tx) => (tx as Element).textContent ?? "")
+          .join(" ");
+        labelMap.set(eid, t);
+      }
+      return {
+        ok: true as const,
+        edges: edges.map((e) => ({
+          id: e.getAttribute("data-cdl-edge") ?? "",
+          label: e.getAttribute("data-cdl-edge-label") ?? "",
+          sub: e.getAttribute("data-cdl-edge-sub") ?? "",
+          visibleText: labelMap.get(e.getAttribute("data-cdl-edge") ?? "") ?? "",
+        })),
+      };
+    },
+    { diagId: diagramId },
+  )) as Result;
+
+  if (!res.ok) return out;
+  for (const e of res.edges) {
+    if (e.label && !e.visibleText.includes(e.label)) {
+      out.push({
+        kind: "edge-label-missing",
+        diagramId,
+        elementId: e.id,
+        expected: `label "${e.label}" visible`,
+        actual: { visibleText: e.visibleText },
+        detail: `edge "${e.id}" の label "${e.label}" が SVG <text> に visible でない`,
+      });
+    }
+    if (e.sub && !e.visibleText.includes(e.sub)) {
+      out.push({
+        kind: "edge-sub-missing",
+        diagramId,
+        elementId: e.id,
+        expected: `sub "${e.sub}" visible`,
+        actual: { visibleText: e.visibleText },
+        detail: `edge "${e.id}" の sub "${e.sub}" が SVG <text> に visible でない`,
+      });
+    }
+  }
+  return out;
+}
+
+/** 4. edge path 起点 / 終点が from / to node の bbox の近く */
+async function verifyEdgeConnected(
+  page: PageLike,
+  laid: LaidDiagram,
+  options: AuthorIntentOptions,
+): Promise<IntentDiscrepancy[]> {
+  const out: IntentDiscrepancy[] = [];
+  const tol = options.edgeConnectionTolerance ?? 80;
+  const diagramId = laid.id;
+
+  type Result = {
+    ok: true;
+    edges: Array<{
+      id: string;
+      from: string;
+      to: string;
+      startView: { x: number; y: number } | null;
+      endView: { x: number; y: number } | null;
+      fromCenter: { x: number; y: number } | null;
+      toCenter: { x: number; y: number } | null;
+    }>;
+  } | { ok: false; reason: string };
+
+  const res = (await page.evaluate(
+    ({ diagId }) => {
+      const root = document.querySelector(`[data-cdl-diagram="${diagId}"]`);
+      if (!root) return { ok: false as const, reason: "root not found" };
+      const edges = Array.from(root.querySelectorAll("[data-cdl-edge]"));
+      const out: Array<{
+        id: string;
+        from: string;
+        to: string;
+        startView: { x: number; y: number } | null;
+        endView: { x: number; y: number } | null;
+        fromCenter: { x: number; y: number } | null;
+        toCenter: { x: number; y: number } | null;
+      }> = [];
+      for (const e of edges) {
+        const id = e.getAttribute("data-cdl-edge") ?? "";
+        const from = e.getAttribute("data-cdl-from") ?? "";
+        const to = e.getAttribute("data-cdl-to") ?? "";
+        const pathEl = root.querySelector(`#cdl-edge-${id}`) as SVGPathElement | null;
+        if (!pathEl) {
+          out.push({ id, from, to, startView: null, endView: null, fromCenter: null, toCenter: null });
+          continue;
+        }
+        const len = pathEl.getTotalLength();
+        const ctm = pathEl.getScreenCTM();
+        let startView: { x: number; y: number } | null = null;
+        let endView: { x: number; y: number } | null = null;
+        if (ctm && isFinite(len)) {
+          const sp = pathEl.getPointAtLength(0);
+          const ep = pathEl.getPointAtLength(len);
+          startView = { x: sp.x * ctm.a + sp.y * ctm.c + ctm.e, y: sp.x * ctm.b + sp.y * ctm.d + ctm.f };
+          endView = { x: ep.x * ctm.a + ep.y * ctm.c + ctm.e, y: ep.x * ctm.b + ep.y * ctm.d + ctm.f };
+        }
+        const fromEl = root.querySelector(`[data-cdl-node="${from}"]`);
+        const toEl = root.querySelector(`[data-cdl-node="${to}"]`);
+        const fromR = fromEl ? (fromEl as Element).getBoundingClientRect() : null;
+        const toR = toEl ? (toEl as Element).getBoundingClientRect() : null;
+        const fromCenter = fromR ? { x: fromR.left + fromR.width / 2, y: fromR.top + fromR.height / 2 } : null;
+        const toCenter = toR ? { x: toR.left + toR.width / 2, y: toR.top + toR.height / 2 } : null;
+        out.push({ id, from, to, startView, endView, fromCenter, toCenter });
+      }
+      return { ok: true as const, edges: out };
+    },
+    { diagId: diagramId },
+  )) as Result;
+
+  if (!res.ok) return out;
+  for (const e of res.edges) {
+    if (e.startView && e.fromCenter) {
+      const d = Math.hypot(e.startView.x - e.fromCenter.x, e.startView.y - e.fromCenter.y);
+      // node の半径相当 (= bbox 対角線の半分程度 = 200px くらい) 以下なら OK。
+      // 実際は from node の bbox 端まで来てる事を期待するため、 起点と center の距離は
+      // node 半径 + tol くらい以下なら宣言通りに繋がっていると判定。
+      // bbox から bbox の中心の距離 = 概ね 80-200px なので、 tol 80 + node 半径相当 200 = 280px くらい
+      const nodeRadius = 200; // 大きめの node でも 200px 半径
+      if (d > nodeRadius + tol) {
+        out.push({
+          kind: "edge-disconnected-from-source",
+          diagramId,
+          elementId: e.id,
+          expected: `from node "${e.from}" center まで ${nodeRadius + tol}px 以内`,
+          actual: { dist: d.toFixed(1) },
+          detail: `edge "${e.id}" の path 起点が from node "${e.from}" から ${d.toFixed(1)}px 離れている`,
+        });
+      }
+    }
+    if (e.endView && e.toCenter) {
+      const d = Math.hypot(e.endView.x - e.toCenter.x, e.endView.y - e.toCenter.y);
+      const nodeRadius = 200;
+      if (d > nodeRadius + tol) {
+        out.push({
+          kind: "edge-disconnected-from-target",
+          diagramId,
+          elementId: e.id,
+          expected: `to node "${e.to}" center まで ${nodeRadius + tol}px 以内`,
+          actual: { dist: d.toFixed(1) },
+          detail: `edge "${e.id}" の path 終点が to node "${e.to}" から ${d.toFixed(1)}px 離れている`,
+        });
+      }
+    }
+  }
+  return out;
+}
+
+/** 5. phase.activate() で宣言した要素が画面で「強調」 されている (data-cdl-active=true) */
+async function verifyActivationVisible(
+  page: PageLike,
+  diagram: CdlDiagram,
+  _options: AuthorIntentOptions,
+): Promise<IntentDiscrepancy[]> {
+  const out: IntentDiscrepancy[] = [];
+  const diagramId = diagram.id;
+  if (diagram.phases.length === 0) return out;
+
+  type Result = {
+    ok: true;
+    phaseIdx: number;
+    activeIds: string[];
+  } | { ok: false; reason: string };
+
+  const res = (await page.evaluate(
+    ({ diagId }) => {
+      const root = document.querySelector(`[data-cdl-diagram="${diagId}"]`);
+      if (!root) return { ok: false as const, reason: "root not found" };
+      const idxAttr = root.getAttribute("data-cdl-phase-index");
+      const phaseIdx = idxAttr === null ? -1 : parseInt(idxAttr, 10);
+      const activeNodes = Array.from(root.querySelectorAll('[data-cdl-node][data-cdl-active="true"]'))
+        .map((el) => el.getAttribute("data-cdl-node") ?? "");
+      const activeEdges = Array.from(root.querySelectorAll('[data-cdl-edge][data-cdl-active="true"]'))
+        .map((el) => el.getAttribute("data-cdl-edge") ?? "");
+      return { ok: true as const, phaseIdx, activeIds: [...activeNodes, ...activeEdges] };
+    },
+    { diagId: diagramId },
+  )) as Result;
+
+  if (!res.ok || res.phaseIdx < 0 || res.phaseIdx >= diagram.phases.length) return out;
+  const phase = diagram.phases[res.phaseIdx]!;
+  const actualSet = new Set(res.activeIds);
+  for (const id of phase.activate) {
+    if (!actualSet.has(id)) {
+      out.push({
+        kind: "activation-not-visible",
+        diagramId,
+        elementId: id,
+        expected: `phase "${phase.id}" で active 強調表示`,
+        actual: "inactive",
+        detail: `phase "${phase.id}" で .activate("${id}") 宣言されているが、 画面上で active 強調 (data-cdl-active=true) されていない`,
+      });
+    }
+  }
+  return out;
+}
+
+/** 6. edge.tone の指定色が SVG stroke に反映 */
+async function verifyToneColor(
+  page: PageLike,
+  laid: LaidDiagram,
+  options: AuthorIntentOptions,
+): Promise<IntentDiscrepancy[]> {
+  const out: IntentDiscrepancy[] = [];
+  const tol = options.toneColorTolerance ?? 30;
+  const diagramId = laid.id;
+
+  type Result = {
+    ok: true;
+    edges: Array<{ id: string; tone: string; active: boolean; strokeColor: string }>;
+  } | { ok: false; reason: string };
+
+  const res = (await page.evaluate(
+    ({ diagId }) => {
+      const root = document.querySelector(`[data-cdl-diagram="${diagId}"]`);
+      if (!root) return { ok: false as const, reason: "root not found" };
+      const edges = Array.from(root.querySelectorAll("[data-cdl-edge]"));
+      const out: Array<{ id: string; tone: string; active: boolean; strokeColor: string }> = [];
+      for (const e of edges) {
+        const id = e.getAttribute("data-cdl-edge") ?? "";
+        const tone = e.getAttribute("data-cdl-tone") ?? "";
+        const active = e.getAttribute("data-cdl-active") === "true";
+        // edge 内の <path> で stroke 属性 / style から色を取得 (visible な太い path = lineDotsD or solid)
+        const paths = Array.from(e.querySelectorAll("path"));
+        let strokeColor = "";
+        for (const p of paths) {
+          const s = (p as SVGElement).getAttribute("stroke");
+          if (s && s !== "none" && s !== "transparent") {
+            strokeColor = s;
+            break;
+          }
+          const cs = window.getComputedStyle(p as Element).stroke;
+          if (cs && cs !== "none") {
+            strokeColor = cs;
+            break;
+          }
+        }
+        out.push({ id, tone, active, strokeColor });
+      }
+      return { ok: true as const, edges: out };
+    },
+    { diagId: diagramId },
+  )) as Result;
+
+  if (!res.ok) return out;
+  for (const e of res.edges) {
+    if (!e.active) continue; // inactive edge は muted 色なので tone 判定対象外
+    const expected = TONE_COLOR_MAP[e.tone as Tone];
+    if (!expected) continue;
+    const actualRgb = parseColorToRgb(e.strokeColor);
+    const expectedRgb = parseColorToRgb(expected);
+    if (!actualRgb || !expectedRgb) continue;
+    const dist = rgbDistance(actualRgb, expectedRgb);
+    if (dist > tol) {
+      out.push({
+        kind: "tone-color-mismatch",
+        diagramId,
+        elementId: e.id,
+        expected: `tone="${e.tone}" → ${expected}`,
+        actual: { strokeColor: e.strokeColor, rgbDist: dist.toFixed(1) },
+        detail: `edge "${e.id}" の active stroke 色が tone="${e.tone}" の期待値 ${expected} と RGB 距離 ${dist.toFixed(1)} > tolerance ${tol}`,
+      });
+    }
+  }
+  return out;
+}
+
+function parseColorToRgb(c: string): [number, number, number] | null {
+  if (!c) return null;
+  // #rgb / #rrggbb / rgb(r, g, b) / rgba(...) を parse
+  if (c.startsWith("#")) {
+    const hex = c.slice(1);
+    if (hex.length === 3) {
+      const r = parseInt(hex[0]! + hex[0]!, 16);
+      const g = parseInt(hex[1]! + hex[1]!, 16);
+      const b = parseInt(hex[2]! + hex[2]!, 16);
+      return [r, g, b];
+    }
+    if (hex.length === 6) {
+      return [parseInt(hex.slice(0, 2), 16), parseInt(hex.slice(2, 4), 16), parseInt(hex.slice(4, 6), 16)];
+    }
+    return null;
+  }
+  const m = c.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+  if (m) return [parseInt(m[1]!, 10), parseInt(m[2]!, 10), parseInt(m[3]!, 10)];
+  return null;
+}
+
+function rgbDistance(a: [number, number, number], b: [number, number, number]): number {
+  return Math.hypot(a[0] - b[0], a[1] - b[1], a[2] - b[2]);
+}
+
+/**
+ * 複数 diagram を一括 verify。
+ */
+export interface AuthorIntentReport {
+  total: number;
+  pass: number;
+  fail: number;
+  discrepancies: IntentDiscrepancy[];
+}
+
+export async function verifyAuthorIntentAll(
+  page: PageLike,
+  diagrams: CdlDiagram[],
+  options?: AuthorIntentOptions,
+): Promise<AuthorIntentReport> {
+  const all: IntentDiscrepancy[] = [];
+  let fail = 0;
+  for (const d of diagrams) {
+    const ds = await verifyAuthorIntent(page, d, options);
+    if (ds.length > 0) fail++;
+    all.push(...ds);
+  }
+  return { total: diagrams.length, pass: diagrams.length - fail, fail, discrepancies: all };
+}