@cardenelabs/cdl 0.5.0 → 0.6.0

package/dist/index.js

@@ -361,6 +361,15 @@ var ALLOWED_MATH_FNS = /* @__PURE__ */ new Set([
   "round"
 ]);
 
+// src/template-name.ts
+var TEMPLATE_NAME_CHARS = "\\w+";
+var TEMPLATE_REF_SRC = `\\{(${TEMPLATE_NAME_CHARS})(\\.length|\\.sum|\\.max|\\.min|\\.avg|\\[\\d+\\])?\\}`;
+var TEMPLATE_LEFTOVER_SRC = `\\{(${TEMPLATE_NAME_CHARS})([.[][^}]*)?\\}`;
+var NAME_ONLY_RE = new RegExp(`^${TEMPLATE_NAME_CHARS}$`);
+function isValidTemplateName(name) {
+  return NAME_ONLY_RE.test(name);
+}
+
 // src/formula/parser.ts
 function tokenize(src) {
   const tokens = [];
@@ -401,6 +410,25 @@ function tokenize(src) {
       tokens.push({ kind: "num", value: num, pos: start });
       continue;
     }
+    if (c === "{") {
+      const start = i;
+      const close = src.indexOf("}", i + 1);
+      if (close === -1) {
+        throw new Error(`unclosed "{" at position ${start} (write a name like {waiting})`);
+      }
+      const name = src.slice(i + 1, close).trim();
+      if (name === "") {
+        throw new Error(`empty name "{}" at position ${start}`);
+      }
+      if (!isValidTemplateName(name)) {
+        throw new Error(
+          `invalid name "{${name}}" at position ${start} (\u7A7A\u767D / { } / . / [ ] \u306F\u540D\u524D\u306B\u4F7F\u3048\u306A\u3044)`
+        );
+      }
+      tokens.push({ kind: "id", name, pos: start });
+      i = close + 1;
+      continue;
+    }
     if (c >= "a" && c <= "z" || c >= "A" && c <= "Z" || c === "_" || c === "$") {
       const start = i;
       while (i < src.length) {
@@ -437,6 +465,10 @@ function tokenize(src) {
         tokens.push({ kind: "math", fn: `Math.${fnName}`, pos: start });
         continue;
       }
+      if (ALLOWED_MATH_FNS.has(name) && src[i] === "(") {
+        tokens.push({ kind: "math", fn: `Math.${name}`, pos: start });
+        continue;
+      }
       if (src[i] === ".") {
         throw new Error(
           `property access "${name}.${src[i + 1] ?? ""}..." at position ${start} is not allowed (only Math.* namespace is accessible)`
@@ -876,6 +908,142 @@ function createFormulaComputeds(diagram2, signals) {
   return result;
 }
 
+// src/render/derived-values.ts
+var parseCache = /* @__PURE__ */ new WeakMap();
+function contentStamp(derived) {
+  return derived.map((d) => `${d.id.length}:${d.id}|${d.expression.length}:${d.expression}`).join("|");
+}
+function applyDerivedValues(base, derived) {
+  if (!derived || derived.length === 0) return { values: base, notices: [] };
+  const phase = parseAndOrder(derived);
+  const values = Object.assign(/* @__PURE__ */ Object.create(null), base);
+  const notices = [...phase.notices];
+  for (const entry of phase.entries) {
+    const out = evaluateOne(entry, values);
+    if (out.ok) values[entry.id] = out.value;
+    else notices.push({ id: entry.id, kind: out.kind, message: out.message });
+  }
+  return { values, notices };
+}
+function derivedRefIds(expression) {
+  try {
+    return [...extractIdentifiers(parseFormula(expression))];
+  } catch {
+    return [];
+  }
+}
+function withDerivedValues(base, derived) {
+  return applyDerivedValues(base, derived).values;
+}
+function parseAndOrder(derived) {
+  const stamp = contentStamp(derived);
+  const cached = parseCache.get(derived);
+  if (cached && cached.stamp === stamp) return cached;
+  const notices = [];
+  const seen = /* @__PURE__ */ new Set();
+  const parsed = [];
+  for (const d of derived) {
+    if (seen.has(d.id)) {
+      notices.push({
+        id: d.id,
+        kind: "duplicate-id",
+        message: `"${d.id}" \u304C 2 \u5EA6\u5BA3\u8A00\u3055\u308C\u3066\u3044\u308B\u3002 \u5148\u306B\u66F8\u3044\u305F\u5F0F\u3092\u4F7F\u3046`
+      });
+      continue;
+    }
+    seen.add(d.id);
+    if (!isValidTemplateName(d.id)) {
+      notices.push({
+        id: d.id,
+        kind: "invalid-id",
+        message: `"${d.id}" \u306F\u540D\u524D\u3068\u3057\u3066\u4F7F\u3048\u306A\u3044 (\u82F1\u6570\u5B57\u3068 _ \u306E\u307F)\u3002 \u8AAD\u307F\u624B\u304C\u62FE\u3048\u306A\u3044\u305F\u3081\u6B62\u3081\u305F`
+      });
+      continue;
+    }
+    try {
+      const ast = parseFormula(d.expression);
+      parsed.push({ id: d.id, ast, refs: extractIdentifiers(ast) });
+    } catch (e) {
+      notices.push({
+        id: d.id,
+        kind: "parse-error",
+        message: `"${d.id}" \u306E\u5F0F\u3092\u8AAD\u3081\u306A\u3044: ${e instanceof Error ? e.message : String(e)}`
+      });
+    }
+  }
+  const { order, cyclic } = topoSort(parsed);
+  for (const id of cyclic) {
+    notices.push({
+      id,
+      kind: "cycle",
+      message: `"${id}" \u306F\u53C2\u7167\u3092\u8FBF\u308B\u3068\u81EA\u5206\u306B\u623B\u308B\u305F\u3081\u6B62\u3081\u305F (\u8F2A\u306B\u5165\u3063\u3066\u3044\u306A\u3044\u5024\u306F\u52D5\u304F)`
+    });
+  }
+  const phase = { entries: order, notices, cyclic, stamp };
+  parseCache.set(derived, phase);
+  return phase;
+}
+function topoSort(entries) {
+  const byId = new Map(entries.map((e) => [e.id, e]));
+  const state = /* @__PURE__ */ new Map();
+  const order = [];
+  const cyclic = /* @__PURE__ */ new Set();
+  const path = [];
+  const visit = (entry) => {
+    const s = state.get(entry.id);
+    if (s === "done") return;
+    if (s === "visiting") {
+      const at = path.indexOf(entry.id);
+      for (const id of path.slice(at < 0 ? 0 : at)) cyclic.add(id);
+      return;
+    }
+    state.set(entry.id, "visiting");
+    path.push(entry.id);
+    for (const ref of entry.refs) {
+      if (ref === entry.id) {
+        cyclic.add(entry.id);
+        continue;
+      }
+      const next = byId.get(ref);
+      if (next) visit(next);
+    }
+    path.pop();
+    state.set(entry.id, "done");
+    if (!cyclic.has(entry.id)) order.push(entry);
+  };
+  for (const e of entries) visit(e);
+  return { order, cyclic: [...cyclic] };
+}
+var MissingReferenceError = class extends Error {
+};
+function evaluateOne(entry, values) {
+  const resolver = (name) => {
+    const raw = Object.hasOwn(values, name) ? values[name] : void 0;
+    if (raw === void 0) throw new MissingReferenceError(`"${name}" \u3068\u3044\u3046\u5024\u304C\u7121\u3044`);
+    const trimmed = raw.trim();
+    const num = Number(trimmed);
+    if (trimmed === "" || !Number.isFinite(num)) {
+      throw new Error(`"${name}" \u306E\u5024 "${raw}" \u306F\u6570\u3068\u3057\u3066\u8AAD\u3081\u306A\u3044`);
+    }
+    return num;
+  };
+  try {
+    const result = evaluate(entry.ast, resolver);
+    if (typeof result === "number" && !Number.isFinite(result)) {
+      return {
+        ok: false,
+        kind: "eval-error",
+        message: `"${entry.id}" \u3092\u6B62\u3081\u305F: \u7D50\u679C\u304C\u6570\u306B\u306A\u3089\u306A\u304B\u3063\u305F`
+      };
+    }
+    return { ok: true, value: typeof result === "boolean" ? result ? "1" : "0" : String(result) };
+  } catch (e) {
+    const detail = e instanceof Error ? e.message : String(e);
+    const kind = e instanceof MissingReferenceError ? "unknown-reference" : "eval-error";
+    return { ok: false, kind, message: `"${entry.id}" \u3092\u6B62\u3081\u305F: ${detail}` };
+  }
+}
+
 // src/scroll-trigger/progress.ts
 function computeScrollProgress(elementRect, viewportHeight, spec) {
   if (viewportHeight <= 0) {
@@ -11514,7 +11682,6 @@ var KINDS_WITHOUT_TITLE_TEXT = /* @__PURE__ */ new Set([
   "chart-bar",
   "gantt-timeline",
   "mind-map",
-  "mind-radial",
   "funnel-stages",
   "quadrant-matrix",
   "tree-hierarchy",
@@ -12914,10 +13081,9 @@ var TOKENS = {
     "chart-line": { w: 640, h: 360 },
     "chart-pie": { w: 640, h: 320 },
     "chart-bar": { w: 640, h: 360 },
-    // Timeline / Radial 系 (CAR-994 Phase B)
+    // Timeline / Mind 系 (CAR-994 Phase B)
     "gantt-timeline": { w: 720, h: 360 },
     "mind-map": { w: 720, h: 480 },
-    "mind-radial": { w: 640, h: 640 },
     // Analytic 系 (CAR-994 Phase C)
     "funnel-stages": { w: 560, h: 480 },
     "quadrant-matrix": { w: 640, h: 480 },
@@ -14973,6 +15139,7 @@ function layout(diag) {
     edges,
     states: diag.states,
     phases: diag.phases,
+    ...diag.derived ? { derived: diag.derived } : {},
     bboxes,
     collisions,
     nearCollisions,
@@ -15033,10 +15200,9 @@ var NODE_KINDS = [
   "chart-pie",
   "chart-line",
   "chart-bar",
-  // Timeline / Radial 系 (3、 CAR-994 Phase B) ... 1 node に payload 配列、 SVG geometry render
+  // Timeline / Mind 系 (2、 CAR-994 Phase B) ... 1 node に payload 配列、 SVG geometry render
   "gantt-timeline",
   "mind-map",
-  "mind-radial",
   // Analytic 系 (4、 CAR-994 Phase C) ... 1 node に payload 配列、 SVG geometry render
   "funnel-stages",
   "quadrant-matrix",
@@ -15103,242 +15269,736 @@ var NODE_KINDS = [
   "shape-customer-service"
 ];
 
-// src/validate.ts
-var TONES2 = new Set(TONES);
-var KINDS = new Set(NODE_KINDS);
-var ENG_BANNED = /\b(FUNCTION|STORAGE|EVENT LOG|BALANCES MAPPING|READ|WRITE|EMIT|CALL)\b/;
-function validate(diag) {
-  const errors = [];
-  const warnings = [];
-  if (diag.lanes.length === 0) {
-    errors.push(
-      `[cdl] empty: lane \u304C 0 \u4EF6\u3067\u3059
-  \u2192 \u4FEE\u6B63\u4F8B: diagram("${diag.id}", { topic }).lane("col1", { x: 0, width: 400 }).node(...).build()`
-    );
-  }
-  if (diag.nodes.length === 0) {
-    errors.push(
-      `[cdl] empty: node \u304C 0 \u4EF6\u3067\u3059
-  \u2192 \u4FEE\u6B63\u4F8B: .node("a", { lane: "col1", stack: 0, kind: "actor", title: "Client" })`
-    );
-  }
-  if (diag.phases.length === 0) {
-    errors.push(
-      `[cdl] empty: phase \u304C 0 \u4EF6\u3067\u3059 (animation \u3092\u99C6\u52D5\u3059\u308B\u305F\u3081\u306E\u6700\u4F4E 1 phase \u304C\u5FC5\u8981)
-  \u2192 \u4FEE\u6B63\u4F8B: .phase("p1", { duration: 1800, title: "step 1", body: "..." }, p => p.activate("a"))`
-    );
-  }
-  const checkDup = (kind, items) => {
-    const seen = /* @__PURE__ */ new Map();
-    items.forEach((item, idx) => {
-      const prev = seen.get(item.id);
-      if (prev !== void 0) {
-        errors.push(`[cdl] duplicate-id: ${kind} "${item.id}" \u304C ${prev} \u4EF6\u76EE + ${idx} \u4EF6\u76EE\u3067\u91CD\u8907`);
-      } else {
-        seen.set(item.id, idx);
-      }
-    });
-  };
-  checkDup("lane", diag.lanes);
-  checkDup("node", diag.nodes);
-  checkDup("edge", diag.edges);
-  checkDup("state", diag.states);
-  checkDup("phase", diag.phases);
-  for (const e of diag.edges) {
-    if (!TONES2.has(e.tone)) {
-      errors.push(`[cdl] unknown-tone: edge "${e.id}" tone "${e.tone}" \u306F\u672A\u5BFE\u5FDC (${[...TONES2].join(" / ")} \u306E\u3044\u305A\u308C\u304B)`);
-    }
-  }
-  for (const n of diag.nodes) {
-    if (!KINDS.has(n.kind)) {
-      errors.push(`[cdl] unknown-kind: node "${n.id}" kind "${n.kind}" \u306F\u672A\u5BFE\u5FDC (${[...KINDS].join(" / ")} \u306E\u3044\u305A\u308C\u304B)`);
+// src/anim/core/easing.ts
+function cubicBezier(x1, y1, x2, y2) {
+  const A = (a, b) => 1 - 3 * b + 3 * a;
+  const B = (a, b) => 3 * b - 6 * a;
+  const C = (a) => 3 * a;
+  const sampleCurveX = (t) => ((A(x1, x2) * t + B(x1, x2)) * t + C(x1)) * t;
+  const sampleCurveY = (t) => ((A(y1, y2) * t + B(y1, y2)) * t + C(y1)) * t;
+  const sampleDerivativeX = (t) => 3 * A(x1, x2) * t * t + 2 * B(x1, x2) * t + C(x1);
+  function solveCurveX(x) {
+    if (x <= 0) return 0;
+    if (x >= 1) return 1;
+    let t = x;
+    for (let i = 0; i < 8; i += 1) {
+      const currentX = sampleCurveX(t) - x;
+      if (Math.abs(currentX) < 1e-5) return t;
+      const currentSlope = sampleDerivativeX(t);
+      if (Math.abs(currentSlope) < 1e-5) break;
+      t -= currentX / currentSlope;
     }
-    if (n.tone !== void 0 && !TONES2.has(n.tone)) {
-      errors.push(`[cdl] unknown-tone: node "${n.id}" tone "${n.tone}" \u306F\u672A\u5BFE\u5FDC (${[...TONES2].join(" / ")} \u306E\u3044\u305A\u308C\u304B)`);
+    let lo = 0;
+    let hi = 1;
+    let guess = x;
+    while (lo < hi) {
+      const currentX = sampleCurveX(guess);
+      if (Math.abs(currentX - x) < 1e-5) return guess;
+      if (x > currentX) lo = guess;
+      else hi = guess;
+      guess = (hi - lo) / 2 + lo;
     }
+    return guess;
   }
-  const laneIds = new Set(diag.lanes.map((l) => l.id));
-  const nodeIds = new Set(diag.nodes.map((n) => n.id));
-  const edgeIds = new Set(diag.edges.map((e) => e.id));
-  const stateIds = new Set(diag.states.map((s) => s.id));
-  const suggest = (target, candidates) => {
-    const list = [...candidates];
-    if (list.length === 0) return "";
-    let best = "";
-    let bestD = Infinity;
-    for (const c of list) {
-      const d = levenshtein(target, c);
-      if (d < bestD) {
-        bestD = d;
-        best = c;
-      }
-    }
-    return bestD <= 2 ? ` (\u3082\u3057\u304B\u3057\u3066 "${best}"?)` : ` (\u5B9A\u7FA9\u6E08 lane: ${list.slice(0, 5).join(", ")}${list.length > 5 ? "..." : ""})`;
+  return (t) => {
+    if (t <= 0) return 0;
+    if (t >= 1) return 1;
+    return sampleCurveY(solveCurveX(t));
   };
-  for (const n of diag.nodes) {
-    if (!laneIds.has(n.lane)) {
-      errors.push(
-        `[cdl] unknown-ref: node "${n.id}" \u306E lane "${n.lane}" \u304C\u672A\u5B9A\u7FA9\u3067\u3059${suggest(n.lane, laneIds)}
-  \u2192 \u4FEE\u6B63\u4F8B: .lane("${n.lane}", { x: 0, width: 400 }) \u3092 node \u5BA3\u8A00\u524D\u306B\u8FFD\u52A0`
-      );
-    }
-  }
-  for (const e of diag.edges) {
-    if (!nodeIds.has(e.from)) {
-      errors.push(
-        `[cdl] unknown-ref: edge "${e.id}" \u306E from "${e.from}" \u304C node \u306B\u5B58\u5728\u3057\u307E\u305B\u3093${suggest(e.from, nodeIds)}
-  \u2192 \u4FEE\u6B63\u4F8B: .node("${e.from}", { lane: "...", stack: 0, kind: "actor", title: "..." }) \u3092 edge \u5BA3\u8A00\u524D\u306B\u8FFD\u52A0`
-      );
+}
+var easeOutQuint = cubicBezier(0.22, 1, 0.36, 1);
+function clamp01(value) {
+  if (value < 0) return 0;
+  if (value > 1) return 1;
+  return value;
+}
+function lerp(start, end, t) {
+  return start + (end - start) * t;
+}
+
+// src/anim/core/timeline.ts
+var Timeline = class {
+  phases;
+  easing;
+  loop;
+  autoAdvanceMsOverride;
+  phaseHoldMs;
+  loopRestartDelayMs;
+  autoplay;
+  subscribers = /* @__PURE__ */ new Set();
+  holdTimerHandle = null;
+  rafHandle = null;
+  phaseIndex = 0;
+  phaseProgress = 0;
+  phaseStartedAt = 0;
+  status = "idle";
+  /**
+   * snapshot を「state が変わった時のみ」 新 object として返すためのキャッシュ。
+   * useSyncExternalStore は getSnapshot() の戻り値が前回と参照同値の時に
+   * re-render を skip する設計なので、 これがないと毎 frame 別 object で
+   * 無限 render → React #185 になる。
+   */
+  cachedSnapshot = null;
+  /**
+   * constructor 直後の state snapshot。 destroy() で復元して StrictMode 二重 mount 経路の
+   * autostart() が正しく初期状態から再開できるようにする (initialPhaseIndex + autoplay 組合せ保持)。
+   */
+  initialState;
+  constructor(phases, options = {}) {
+    if (phases.length === 0) {
+      throw new Error("Timeline requires at least one phase");
     }
-    if (!nodeIds.has(e.to)) {
-      errors.push(
-        `[cdl] unknown-ref: edge "${e.id}" \u306E to "${e.to}" \u304C node \u306B\u5B58\u5728\u3057\u307E\u305B\u3093${suggest(e.to, nodeIds)}
-  \u2192 \u4FEE\u6B63\u4F8B: .node("${e.to}", { lane: "...", stack: 0, kind: "...", title: "..." }) \u3092 edge \u5BA3\u8A00\u524D\u306B\u8FFD\u52A0`
-      );
+    this.phases = phases;
+    this.easing = options.easing ?? easeOutQuint;
+    this.loop = options.loop ?? false;
+    this.autoAdvanceMsOverride = options.autoAdvanceMs;
+    this.phaseHoldMs = options.phaseHoldMs ?? 0;
+    this.loopRestartDelayMs = options.loopRestartDelayMs ?? this.phaseHoldMs;
+    this.autoplay = options.autoplay ?? false;
+    const initial = options.initialPhaseIndex;
+    if (initial != null && initial > 0 && initial < phases.length) {
+      this.phaseIndex = initial;
+      this.phaseProgress = 1;
+      this.status = initial === phases.length - 1 ? "settled" : "paused";
     }
-    if (e.from === e.to) {
-      errors.push(
-        `[cdl] self-loop: edge "${e.id}" \u306E from \u3068 to \u304C\u540C\u3058 node "${e.from}" \u3067\u3059 (self-loop \u306F\u73FE\u72B6\u672A\u5BFE\u5FDC)
-  \u2192 \u5225 node \u3092\u4F5C\u3063\u3066 2 \u6BB5\u306B\u5206\u3051\u308B\u304B\u3001 \u5F8C\u7D9A PR \u306E self-loop support \u3092\u5F85\u3063\u3066\u304F\u3060\u3055\u3044`
-      );
+    this.initialState = {
+      phaseIndex: this.phaseIndex,
+      phaseProgress: this.phaseProgress,
+      status: this.status
+    };
+  }
+  /**
+   * mount 後に呼んで autoplay opt-in が真なら play を発火する。
+   * constructor で呼ぶと SSR 環境で rAF が動いて失敗するので別経路に分離。
+   */
+  autostart() {
+    if (this.autoplay && this.status === "idle") {
+      this.play();
     }
   }
-  for (const p of diag.phases) {
-    for (const id of p.activate) {
-      if (!nodeIds.has(id) && !edgeIds.has(id)) {
-        errors.push(`[cdl] unknown-ref: phase "${p.id}" \u306E activate "${id}" \u306F node \u3067\u3082 edge \u3067\u3082\u306A\u3044 (typo \u306E\u53EF\u80FD\u6027)`);
-      }
-    }
-    for (const t of p.tweens) {
-      if (!stateIds.has(t.stateId)) {
-        errors.push(`[cdl] unknown-ref: phase "${p.id}" tween \u5BFE\u8C61 state "${t.stateId}" \u672A\u5B9A\u7FA9`);
-      }
-      if (typeof t.from === "number" && typeof t.to === "number" && t.from === t.to) {
-        warnings.push(`phase "${p.id}" tween state "${t.stateId}" \u306E from === to (${t.from})\u3001 \u52D5\u304D\u306A\u3057`);
-      }
-    }
-    for (const s of p.sets) {
-      if (!stateIds.has(s.stateId)) {
-        errors.push(`[cdl] unknown-ref: phase "${p.id}" set \u5BFE\u8C61 state "${s.stateId}" \u672A\u5B9A\u7FA9`);
-      }
-    }
-    if (p.duration <= 0) {
-      errors.push(`[cdl] invalid-duration: phase "${p.id}" duration "${p.duration}" \u306F\u6B63\u5024\u5FC5\u9808`);
+  // ─── public API ──────────────────────────────────────────────
+  subscribe(subscriber) {
+    this.subscribers.add(subscriber);
+    return () => {
+      this.subscribers.delete(subscriber);
+    };
+  }
+  snapshot() {
+    const cached = this.cachedSnapshot;
+    if (cached && cached.status === this.status && cached.phaseIndex === this.phaseIndex && cached.phaseProgress === this.phaseProgress && cached.totalPhases === this.phases.length) {
+      return cached;
     }
+    const next = {
+      status: this.status,
+      phaseIndex: this.phaseIndex,
+      phaseProgress: this.phaseProgress,
+      totalPhases: this.phases.length
+    };
+    this.cachedSnapshot = next;
+    return next;
   }
-  const refRe = /\{(\w+)\}/g;
-  for (const n of diag.nodes) {
-    const checks = [];
-    if (n.value) checks.push(n.value);
-    if (n.rows) checks.push(...n.rows);
-    for (const text of checks) {
-      let m;
-      while (m = refRe.exec(text)) {
-        const id = m[1];
-        if (id && !stateIds.has(id)) {
-          warnings.push(`node "${n.id}" \u304C\u672A\u5B9A\u7FA9 state "${id}" \u3092\u53C2\u7167`);
-        }
-      }
+  getPhase() {
+    const phase = this.phases[this.phaseIndex];
+    if (!phase) {
+      throw new Error(`Invalid phase index ${this.phaseIndex}`);
     }
+    return phase;
   }
-  const allActivated = /* @__PURE__ */ new Set();
-  for (const p of diag.phases) {
-    for (const id of p.activate) allActivated.add(id);
+  /** Phase ID 指定でジャンプ (見つからない場合は no-op) */
+  gotoId(id) {
+    const index = this.phases.findIndex((phase) => phase.id === id);
+    if (index >= 0) this.goto(index);
   }
-  for (const n of diag.nodes) {
-    if (!allActivated.has(n.id)) {
-      warnings.push(`node "${n.id}" \u304C\u3069\u306E phase \u3067\u3082 activate \u3055\u308C\u3066\u3044\u306A\u3044 (unused\u3001 typo \u306E\u53EF\u80FD\u6027)`);
-    }
+  /** Phase index 指定でジャンプ */
+  goto(index) {
+    const clamped = Math.max(0, Math.min(this.phases.length - 1, index));
+    this.cancelRaf();
+    this.phaseIndex = clamped;
+    this.phaseProgress = 1;
+    this.status = clamped === this.phases.length - 1 ? "settled" : "paused";
+    this.emit();
   }
-  for (const e of diag.edges) {
-    if (!allActivated.has(e.id)) {
-      warnings.push(`edge "${e.id}" \u304C\u3069\u306E phase \u3067\u3082 activate \u3055\u308C\u3066\u3044\u306A\u3044 (unused\u3001 typo \u306E\u53EF\u80FD\u6027)`);
+  play() {
+    if (this.status === "playing") return;
+    this.status = "playing";
+    if (this.phaseProgress >= 1 && this.phaseIndex < this.phases.length - 1) {
+      this.advancePhase();
+    } else {
+      this.beginPhaseTransition();
     }
+    this.emit();
   }
-  const stateUsed = /* @__PURE__ */ new Set();
-  for (const p of diag.phases) {
-    for (const t of p.tweens) stateUsed.add(t.stateId);
-    for (const s of p.sets) stateUsed.add(s.stateId);
+  pause() {
+    if (this.status !== "playing") return;
+    this.cancelRaf();
+    this.status = "paused";
+    this.emit();
   }
-  for (const n of diag.nodes) {
-    const texts2 = [n.value, ...n.rows ?? []].filter(Boolean);
-    for (const text of texts2) {
-      let m;
-      const re = /\{(\w+)\}/g;
-      while (m = re.exec(text)) {
-        if (m[1]) stateUsed.add(m[1]);
+  next() {
+    if (this.phaseIndex >= this.phases.length - 1) {
+      if (this.loop) {
+        this.goto(0);
+        this.play();
       }
+      return;
     }
-  }
-  for (const s of diag.states) {
-    if (!stateUsed.has(s.id)) {
-      warnings.push(`state "${s.id}" \u304C\u3069\u3053\u3067\u3082\u53C2\u7167\u3055\u308C\u3066\u3044\u306A\u3044 (unused)`);
+    this.cancelRaf();
+    this.phaseIndex += 1;
+    this.beginPhaseTransition();
+    if (this.status !== "playing") {
+      this.status = "paused";
     }
+    this.emit();
   }
-  const laneUsed = /* @__PURE__ */ new Set();
-  for (const n of diag.nodes) laneUsed.add(n.lane);
-  for (const l of diag.lanes) {
-    if (!laneUsed.has(l.id)) {
-      warnings.push(`lane "${l.id}" \u306B\u3069\u306E node \u3082\u914D\u7F6E\u3055\u308C\u3066\u3044\u306A\u3044 (unused)`);
-    }
+  prev() {
+    if (this.phaseIndex <= 0) return;
+    this.cancelRaf();
+    this.phaseIndex -= 1;
+    this.phaseProgress = 1;
+    this.status = "paused";
+    this.emit();
   }
-  const texts = [];
-  for (const l of diag.lanes) if (l.label) texts.push({ where: `lane "${l.id}".label`, text: l.label });
-  for (const n of diag.nodes) {
-    texts.push({ where: `node "${n.id}".title`, text: n.title });
-    if (n.eyebrow) texts.push({ where: `node "${n.id}".eyebrow`, text: n.eyebrow });
-    if (n.subtitle) texts.push({ where: `node "${n.id}".subtitle`, text: n.subtitle });
+  reset() {
+    this.cancelRaf();
+    this.phaseIndex = 0;
+    this.phaseProgress = 0;
+    this.status = "idle";
+    this.emit();
   }
-  for (const e of diag.edges) {
-    texts.push({ where: `edge "${e.id}".label`, text: e.label });
-    if (e.sub) texts.push({ where: `edge "${e.id}".sub`, text: e.sub });
+  /**
+   * cleanup + reset for-remount。 subscribers.clear() + cancelRaf() で active resource を
+   * 全解放した後、 (phaseIndex, phaseProgress, status) を constructor 直後の initialState に
+   * 復元する。 API 名は "destroy" だが object dead / GC-ready 契約ではなく、 destroy 後も
+   * subscribe / autostart / snapshot / play が正しく動作する reusable reset object として設計。
+   *
+   * 主 caller = React `useEffect` の cleanup で、 StrictMode の dev 二重 mount 経路で
+   * setup 再実行時に autostart() が正しく再発火するよう status を initialState に戻す。
+   *
+   * 詳細 = active edge が pathSubpath(d, 0) = "M x y" のみで空 line 描画される
+   * regression (dragon Issue #381) を防ぐため、 destroy() は「破棄」 でなく「再利用可能な reset」。
+   */
+  destroy() {
+    this.cancelRaf();
+    this.subscribers.clear();
+    this.status = this.initialState.status;
+    this.phaseIndex = this.initialState.phaseIndex;
+    this.phaseProgress = this.initialState.phaseProgress;
   }
-  for (const { where, text } of texts) {
-    if (ENG_BANNED.test(text)) {
-      warnings.push(`${where} \u306B uppercase \u82F1\u5358\u8A9E\u304C\u691C\u51FA: "${text}"`);
+  // ─── internals ───────────────────────────────────────────────
+  advancePhase() {
+    if (this.phaseIndex >= this.phases.length - 1) {
+      if (this.loop) {
+        this.scheduleHold(this.loopRestartDelayMs, () => {
+          this.phaseIndex = 0;
+          this.beginPhaseTransition();
+        });
+      } else {
+        this.status = "settled";
+        this.emit();
+      }
+      return;
     }
+    this.scheduleHold(this.phaseHoldMs, () => {
+      this.phaseIndex += 1;
+      this.beginPhaseTransition();
+    });
   }
-  if (warnings.length > 0) {
-    for (const w of warnings) console.warn(`[cdl validate] warn: ${w}`);
+  scheduleHold(ms, after) {
+    if (this.holdTimerHandle != null) {
+      clearTimeout(this.holdTimerHandle);
+      this.holdTimerHandle = null;
+    }
+    if (ms <= 0) {
+      after();
+      return;
+    }
+    this.holdTimerHandle = setTimeout(() => {
+      this.holdTimerHandle = null;
+      if (this.status === "playing") after();
+    }, ms);
   }
-  if (errors.length > 0) {
-    throw new Error(`cdl validate failed:
-  - ${errors.join("\n  - ")}`);
+  beginPhaseTransition() {
+    this.phaseProgress = 0;
+    this.phaseStartedAt = performance.now();
+    this.cancelRaf();
+    const step = (now) => {
+      const duration = this.autoAdvanceMsOverride ?? this.getPhase().durationMs ?? 600;
+      const elapsed = now - this.phaseStartedAt;
+      const linearT = clamp01(elapsed / duration);
+      this.phaseProgress = this.easing(linearT);
+      this.emit();
+      if (linearT < 1) {
+        this.rafHandle = requestAnimationFrame(step);
+        return;
+      }
+      this.phaseProgress = 1;
+      this.emit();
+      if (this.status === "playing") {
+        if (this.phaseIndex < this.phases.length - 1) {
+          this.advancePhase();
+        } else if (this.loop) {
+          this.advancePhase();
+        } else {
+          this.status = "settled";
+          this.emit();
+        }
+      }
+    };
+    this.rafHandle = requestAnimationFrame(step);
   }
-}
-function levenshtein(a, b) {
-  const m = a.length;
-  const n = b.length;
-  if (m === 0) return n;
-  if (n === 0) return m;
-  const dp = Array.from({ length: m + 1 }, () => new Array(n + 1).fill(0));
-  for (let i = 0; i <= m; i++) dp[i][0] = i;
-  for (let j = 0; j <= n; j++) dp[0][j] = j;
-  for (let i = 1; i <= m; i++) {
-    for (let j = 1; j <= n; j++) {
-      const cost = a[i - 1] === b[j - 1] ? 0 : 1;
-      dp[i][j] = Math.min(dp[i - 1][j] + 1, dp[i][j - 1] + 1, dp[i - 1][j - 1] + cost);
+  cancelRaf() {
+    if (this.rafHandle != null) {
+      cancelAnimationFrame(this.rafHandle);
+      this.rafHandle = null;
+    }
+    if (this.holdTimerHandle != null) {
+      clearTimeout(this.holdTimerHandle);
+      this.holdTimerHandle = null;
     }
   }
-  return dp[m][n];
-}
+  emit() {
+    const snapshot = this.snapshot();
+    for (const subscriber of this.subscribers) {
+      subscriber(snapshot);
+    }
+  }
+};
 
-// src/compile.ts
-function compile(diag) {
-  validate(diag);
-  return layout(diag);
+// src/render/utils.ts
+var TEMPLATE_REF_RE = new RegExp(TEMPLATE_REF_SRC, "g");
+var TEMPLATE_LEFTOVER_TEST_RE = new RegExp(TEMPLATE_LEFTOVER_SRC);
+function hasUnresolvedRef(text) {
+  return TEMPLATE_LEFTOVER_TEST_RE.test(text);
 }
-
-// src/layout/geometry.ts
-function pointRectEdgeDistance(px, py, rect) {
-  const dx = Math.max(rect.x - px, 0, px - (rect.x + rect.w));
-  const dy = Math.max(rect.y - py, 0, py - (rect.y + rect.h));
-  return Math.hypot(dx, dy);
+function templateRefIds(text) {
+  const re = new RegExp(TEMPLATE_LEFTOVER_SRC, "g");
+  const out = [];
+  let m;
+  while ((m = re.exec(text)) !== null) {
+    if (m[1]) out.push(m[1]);
+  }
+  return out;
 }
-function rectRectOverlapArea(a, b) {
-  const dx = Math.min(a.x + a.w, b.x + b.w) - Math.max(a.x, b.x);
-  const dy = Math.min(a.y + a.h, b.y + b.h) - Math.max(a.y, b.y);
-  if (dx <= 0 || dy <= 0) return 0;
+function computeStateValues(laid, phaseIdx, progress) {
+  const values = {};
+  for (const s of laid.states) values[s.id] = s.initial;
+  for (let i = 0; i < laid.phases.length; i++) {
+    const phase = laid.phases[i];
+    if (!phase) continue;
+    if (i <= phaseIdx) {
+      for (const s of phase.sets) {
+        values[s.stateId] = s.value;
+      }
+    }
+    for (const t of phase.tweens) {
+      if (i < phaseIdx) {
+        values[t.stateId] = t.to;
+      } else if (i === phaseIdx) {
+        values[t.stateId] = Math.round(lerp(t.from, t.to, progress));
+      }
+    }
+  }
+  const out = {};
+  for (const [k, v] of Object.entries(values)) out[k] = String(v);
+  return withDerivedValues(out, laid.derived);
+}
+function interpolate(template, values) {
+  return template.replace(TEMPLATE_REF_RE, (_, id, accessor) => {
+    const raw = Object.hasOwn(values, id) ? values[id] : void 0;
+    if (raw === void 0) return `{${id}${accessor ?? ""}}`;
+    if (!accessor) return raw;
+    const arr = parseArraySignal(raw);
+    if (!arr) return `{${id}${accessor}}`;
+    if (accessor === ".length") return String(arr.length);
+    const nums = arr.map((v) => Number.isFinite(Number(v)) ? Number(v) : 0);
+    if (accessor === ".sum") return String(nums.reduce((s, v) => s + v, 0));
+    if (accessor === ".max") return nums.length ? String(nums.reduce((a, b) => a > b ? a : b, nums[0])) : "0";
+    if (accessor === ".min") return nums.length ? String(nums.reduce((a, b) => a < b ? a : b, nums[0])) : "0";
+    if (accessor === ".avg") {
+      if (!nums.length) return "0";
+      const sum = nums.reduce((s, v) => s + v, 0);
+      return String(Math.round(sum / nums.length * 100) / 100);
+    }
+    if (accessor.startsWith("[")) {
+      const idx = Number(accessor.slice(1, -1));
+      if (Number.isInteger(idx) && idx >= 0 && idx < arr.length) return String(arr[idx]);
+      return `{${id}${accessor}}`;
+    }
+    return raw;
+  });
+}
+function parseArraySignal(raw) {
+  const trimmed = raw.trim();
+  if (!trimmed.startsWith("[") || !trimmed.endsWith("]")) return null;
+  try {
+    const parsed = JSON.parse(trimmed);
+    if (Array.isArray(parsed)) return parsed;
+  } catch {
+    const inner = trimmed.slice(1, -1).trim();
+    if (!inner) return [];
+    if (/^[\s\d.,+\-eE]+$/.test(inner)) return inner.split(",").map((s) => Number(s.trim()));
+  }
+  return null;
+}
+function resolveNumericAttr(value, values, fallback) {
+  if (typeof value === "number") return value;
+  if (typeof value !== "string") return fallback;
+  const trimmed = value.trim();
+  if (trimmed === "") return fallback;
+  const resolved = interpolate(trimmed, values);
+  const parsed = Number(resolved);
+  return Number.isFinite(parsed) ? parsed : fallback;
+}
+function shrinkPathEnd(d, shrinkPx) {
+  const commandRegex = /([MLCQZmlcqz])([^MLCQZmlcqz]*)/g;
+  const matches = [];
+  let m;
+  while ((m = commandRegex.exec(d)) !== null) {
+    const cmd = m[1];
+    const args = (m[2] ?? "").trim().split(/[\s,]+/).filter(Boolean).map(parseFloat);
+    matches.push({ cmd, args });
+  }
+  if (matches.length < 2) return d;
+  let prevEnd = { x: 0, y: 0 };
+  for (let i = 0; i < matches.length - 1; i++) {
+    const { cmd, args } = matches[i];
+    if (cmd === "M" || cmd === "L") {
+      prevEnd = { x: args[0], y: args[1] };
+    } else if (cmd === "Q") {
+      prevEnd = { x: args[2], y: args[3] };
+    } else if (cmd === "C") {
+      prevEnd = { x: args[4], y: args[5] };
+    }
+  }
+  const last = matches[matches.length - 1];
+  let endX, endY;
+  if (last.cmd === "L" || last.cmd === "M") {
+    endX = last.args[0];
+    endY = last.args[1];
+  } else if (last.cmd === "Q") {
+    endX = last.args[2];
+    endY = last.args[3];
+  } else if (last.cmd === "C") {
+    endX = last.args[4];
+    endY = last.args[5];
+  } else {
+    return d;
+  }
+  const dx = endX - prevEnd.x;
+  const dy = endY - prevEnd.y;
+  const len = Math.hypot(dx, dy);
+  if (len < shrinkPx + 1) return d;
+  const ratio = (len - shrinkPx) / len;
+  const newEndX = prevEnd.x + dx * ratio;
+  const newEndY = prevEnd.y + dy * ratio;
+  const tokens = d.trim().split(/\s+/);
+  if (tokens.length < 2) return d;
+  tokens[tokens.length - 2] = newEndX.toFixed(1);
+  tokens[tokens.length - 1] = newEndY.toFixed(1);
+  return tokens.join(" ");
+}
+function pathSubpath(d, progress) {
+  if (progress >= 1) return d;
+  if (progress <= 0) {
+    const first = d.trim().match(/^M\s+([-\d.]+)\s+([-\d.]+)/);
+    if (!first) return d;
+    return `M ${first[1]} ${first[2]}`;
+  }
+  const tokens = d.trim().split(/\s+/);
+  const points = [];
+  let i = 0;
+  while (i < tokens.length) {
+    const t = tokens[i];
+    if (t === "M" || t === "L") {
+      const x = parseFloat(tokens[i + 1]);
+      const y = parseFloat(tokens[i + 2]);
+      if (!Number.isFinite(x) || !Number.isFinite(y)) return d;
+      points.push({ x, y });
+      i += 3;
+    } else {
+      return d;
+    }
+  }
+  if (points.length < 2) return d;
+  const segLens = [];
+  let total = 0;
+  for (let k = 1; k < points.length; k++) {
+    const dx = points[k].x - points[k - 1].x;
+    const dy = points[k].y - points[k - 1].y;
+    const len = Math.hypot(dx, dy);
+    segLens.push(len);
+    total += len;
+  }
+  if (total === 0) return d;
+  const target = total * progress;
+  let acc = 0;
+  for (let k = 0; k < segLens.length; k++) {
+    const segLen = segLens[k];
+    if (acc + segLen >= target) {
+      const remain = target - acc;
+      const ratio = segLen === 0 ? 0 : remain / segLen;
+      const sx = points[k].x;
+      const sy = points[k].y;
+      const ex = points[k + 1].x;
+      const ey = points[k + 1].y;
+      const tx = sx + (ex - sx) * ratio;
+      const ty = sy + (ey - sy) * ratio;
+      const head = points.slice(0, k + 1).map((p, idx) => `${idx === 0 ? "M" : "L"} ${p.x} ${p.y}`).join(" ");
+      return `${head} L ${tx.toFixed(1)} ${ty.toFixed(1)}`;
+    }
+    acc += segLen;
+  }
+  return d;
+}
+
+// src/validate.ts
+var TONES2 = new Set(TONES);
+var KINDS = new Set(NODE_KINDS);
+var ENG_BANNED = /\b(FUNCTION|STORAGE|EVENT LOG|BALANCES MAPPING|READ|WRITE|EMIT|CALL)\b/;
+function validate(diag) {
+  const errors = [];
+  const warnings = [];
+  if (diag.lanes.length === 0) {
+    errors.push(
+      `[cdl] empty: lane \u304C 0 \u4EF6\u3067\u3059
+  \u2192 \u4FEE\u6B63\u4F8B: diagram("${diag.id}", { topic }).lane("col1", { x: 0, width: 400 }).node(...).build()`
+    );
+  }
+  if (diag.nodes.length === 0) {
+    errors.push(
+      `[cdl] empty: node \u304C 0 \u4EF6\u3067\u3059
+  \u2192 \u4FEE\u6B63\u4F8B: .node("a", { lane: "col1", stack: 0, kind: "actor", title: "Client" })`
+    );
+  }
+  if (diag.phases.length === 0) {
+    errors.push(
+      `[cdl] empty: phase \u304C 0 \u4EF6\u3067\u3059 (animation \u3092\u99C6\u52D5\u3059\u308B\u305F\u3081\u306E\u6700\u4F4E 1 phase \u304C\u5FC5\u8981)
+  \u2192 \u4FEE\u6B63\u4F8B: .phase("p1", { duration: 1800, title: "step 1", body: "..." }, p => p.activate("a"))`
+    );
+  }
+  const checkDup = (kind, items) => {
+    const seen = /* @__PURE__ */ new Map();
+    items.forEach((item, idx) => {
+      const prev = seen.get(item.id);
+      if (prev !== void 0) {
+        errors.push(`[cdl] duplicate-id: ${kind} "${item.id}" \u304C ${prev} \u4EF6\u76EE + ${idx} \u4EF6\u76EE\u3067\u91CD\u8907`);
+      } else {
+        seen.set(item.id, idx);
+      }
+    });
+  };
+  checkDup("lane", diag.lanes);
+  checkDup("node", diag.nodes);
+  checkDup("edge", diag.edges);
+  checkDup("state", diag.states);
+  checkDup("phase", diag.phases);
+  for (const e of diag.edges) {
+    if (!TONES2.has(e.tone)) {
+      errors.push(`[cdl] unknown-tone: edge "${e.id}" tone "${e.tone}" \u306F\u672A\u5BFE\u5FDC (${[...TONES2].join(" / ")} \u306E\u3044\u305A\u308C\u304B)`);
+    }
+  }
+  for (const n of diag.nodes) {
+    if (!KINDS.has(n.kind)) {
+      errors.push(`[cdl] unknown-kind: node "${n.id}" kind "${n.kind}" \u306F\u672A\u5BFE\u5FDC (${[...KINDS].join(" / ")} \u306E\u3044\u305A\u308C\u304B)`);
+    }
+    if (n.tone !== void 0 && !TONES2.has(n.tone)) {
+      errors.push(`[cdl] unknown-tone: node "${n.id}" tone "${n.tone}" \u306F\u672A\u5BFE\u5FDC (${[...TONES2].join(" / ")} \u306E\u3044\u305A\u308C\u304B)`);
+    }
+  }
+  const laneIds = new Set(diag.lanes.map((l) => l.id));
+  const nodeIds = new Set(diag.nodes.map((n) => n.id));
+  const edgeIds = new Set(diag.edges.map((e) => e.id));
+  const stateIds = new Set(diag.states.map((s) => s.id));
+  const readableIds = /* @__PURE__ */ new Set([...stateIds, ...(diag.derived ?? []).map((d) => d.id)]);
+  const suggest = (target, candidates) => {
+    const list = [...candidates];
+    if (list.length === 0) return "";
+    let best = "";
+    let bestD = Infinity;
+    for (const c of list) {
+      const d = levenshtein(target, c);
+      if (d < bestD) {
+        bestD = d;
+        best = c;
+      }
+    }
+    return bestD <= 2 ? ` (\u3082\u3057\u304B\u3057\u3066 "${best}"?)` : ` (\u5B9A\u7FA9\u6E08 lane: ${list.slice(0, 5).join(", ")}${list.length > 5 ? "..." : ""})`;
+  };
+  for (const n of diag.nodes) {
+    if (!laneIds.has(n.lane)) {
+      errors.push(
+        `[cdl] unknown-ref: node "${n.id}" \u306E lane "${n.lane}" \u304C\u672A\u5B9A\u7FA9\u3067\u3059${suggest(n.lane, laneIds)}
+  \u2192 \u4FEE\u6B63\u4F8B: .lane("${n.lane}", { x: 0, width: 400 }) \u3092 node \u5BA3\u8A00\u524D\u306B\u8FFD\u52A0`
+      );
+    }
+  }
+  for (const e of diag.edges) {
+    if (!nodeIds.has(e.from)) {
+      errors.push(
+        `[cdl] unknown-ref: edge "${e.id}" \u306E from "${e.from}" \u304C node \u306B\u5B58\u5728\u3057\u307E\u305B\u3093${suggest(e.from, nodeIds)}
+  \u2192 \u4FEE\u6B63\u4F8B: .node("${e.from}", { lane: "...", stack: 0, kind: "actor", title: "..." }) \u3092 edge \u5BA3\u8A00\u524D\u306B\u8FFD\u52A0`
+      );
+    }
+    if (!nodeIds.has(e.to)) {
+      errors.push(
+        `[cdl] unknown-ref: edge "${e.id}" \u306E to "${e.to}" \u304C node \u306B\u5B58\u5728\u3057\u307E\u305B\u3093${suggest(e.to, nodeIds)}
+  \u2192 \u4FEE\u6B63\u4F8B: .node("${e.to}", { lane: "...", stack: 0, kind: "...", title: "..." }) \u3092 edge \u5BA3\u8A00\u524D\u306B\u8FFD\u52A0`
+      );
+    }
+    if (e.from === e.to) {
+      errors.push(
+        `[cdl] self-loop: edge "${e.id}" \u306E from \u3068 to \u304C\u540C\u3058 node "${e.from}" \u3067\u3059 (self-loop \u306F\u73FE\u72B6\u672A\u5BFE\u5FDC)
+  \u2192 \u5225 node \u3092\u4F5C\u3063\u3066 2 \u6BB5\u306B\u5206\u3051\u308B\u304B\u3001 \u5F8C\u7D9A PR \u306E self-loop support \u3092\u5F85\u3063\u3066\u304F\u3060\u3055\u3044`
+      );
+    }
+  }
+  for (const p of diag.phases) {
+    for (const id of p.activate) {
+      if (!nodeIds.has(id) && !edgeIds.has(id)) {
+        errors.push(`[cdl] unknown-ref: phase "${p.id}" \u306E activate "${id}" \u306F node \u3067\u3082 edge \u3067\u3082\u306A\u3044 (typo \u306E\u53EF\u80FD\u6027)`);
+      }
+    }
+    for (const t of p.tweens) {
+      if (!stateIds.has(t.stateId)) {
+        errors.push(`[cdl] unknown-ref: phase "${p.id}" tween \u5BFE\u8C61 state "${t.stateId}" \u672A\u5B9A\u7FA9`);
+      }
+      if (typeof t.from === "number" && typeof t.to === "number" && t.from === t.to) {
+        warnings.push(`phase "${p.id}" tween state "${t.stateId}" \u306E from === to (${t.from})\u3001 \u52D5\u304D\u306A\u3057`);
+      }
+    }
+    for (const s of p.sets) {
+      if (!stateIds.has(s.stateId)) {
+        errors.push(`[cdl] unknown-ref: phase "${p.id}" set \u5BFE\u8C61 state "${s.stateId}" \u672A\u5B9A\u7FA9`);
+      }
+    }
+    if (p.duration <= 0) {
+      errors.push(`[cdl] invalid-duration: phase "${p.id}" duration "${p.duration}" \u306F\u6B63\u5024\u5FC5\u9808`);
+    }
+  }
+  for (const n of diag.nodes) {
+    const checks = [];
+    if (n.value) checks.push(n.value);
+    if (n.rows) checks.push(...n.rows);
+    for (const text of checks) {
+      for (const id of templateRefIds(text)) {
+        if (!readableIds.has(id)) {
+          warnings.push(`node "${n.id}" \u304C\u672A\u5B9A\u7FA9 state "${id}" \u3092\u53C2\u7167`);
+        }
+      }
+    }
+  }
+  const allActivated = /* @__PURE__ */ new Set();
+  for (const p of diag.phases) {
+    for (const id of p.activate) allActivated.add(id);
+  }
+  for (const n of diag.nodes) {
+    if (!allActivated.has(n.id)) {
+      warnings.push(`node "${n.id}" \u304C\u3069\u306E phase \u3067\u3082 activate \u3055\u308C\u3066\u3044\u306A\u3044 (unused\u3001 typo \u306E\u53EF\u80FD\u6027)`);
+    }
+  }
+  for (const e of diag.edges) {
+    if (!allActivated.has(e.id)) {
+      warnings.push(`edge "${e.id}" \u304C\u3069\u306E phase \u3067\u3082 activate \u3055\u308C\u3066\u3044\u306A\u3044 (unused\u3001 typo \u306E\u53EF\u80FD\u6027)`);
+    }
+  }
+  const stateUsed = /* @__PURE__ */ new Set();
+  for (const p of diag.phases) {
+    for (const t of p.tweens) stateUsed.add(t.stateId);
+    for (const s of p.sets) stateUsed.add(s.stateId);
+  }
+  for (const n of diag.nodes) {
+    const texts2 = [n.value, ...n.rows ?? []].filter(Boolean);
+    for (const text of texts2) {
+      for (const id of templateRefIds(text)) stateUsed.add(id);
+    }
+  }
+  const derivedById = new Map((diag.derived ?? []).map((dv) => [dv.id, dv]));
+  const queue = [...stateUsed];
+  while (queue.length > 0) {
+    const id = queue.pop();
+    const dv = derivedById.get(id);
+    if (!dv) continue;
+    for (const ref of derivedRefIds(dv.expression)) {
+      if (!stateUsed.has(ref)) {
+        stateUsed.add(ref);
+        queue.push(ref);
+      }
+    }
+  }
+  for (const s of diag.states) {
+    if (!stateUsed.has(s.id)) {
+      warnings.push(`state "${s.id}" \u304C\u3069\u3053\u3067\u3082\u53C2\u7167\u3055\u308C\u3066\u3044\u306A\u3044 (unused)`);
+    }
+  }
+  for (const dv of diag.derived ?? []) {
+    if (!stateUsed.has(dv.id)) {
+      warnings.push(`\u5024 "${dv.id}" \u304C\u3069\u3053\u3067\u3082\u53C2\u7167\u3055\u308C\u3066\u3044\u306A\u3044 (unused)`);
+    }
+  }
+  const laneUsed = /* @__PURE__ */ new Set();
+  for (const n of diag.nodes) laneUsed.add(n.lane);
+  for (const l of diag.lanes) {
+    if (!laneUsed.has(l.id)) {
+      warnings.push(`lane "${l.id}" \u306B\u3069\u306E node \u3082\u914D\u7F6E\u3055\u308C\u3066\u3044\u306A\u3044 (unused)`);
+    }
+  }
+  const texts = [];
+  for (const l of diag.lanes) if (l.label) texts.push({ where: `lane "${l.id}".label`, text: l.label });
+  for (const n of diag.nodes) {
+    texts.push({ where: `node "${n.id}".title`, text: n.title });
+    if (n.eyebrow) texts.push({ where: `node "${n.id}".eyebrow`, text: n.eyebrow });
+    if (n.subtitle) texts.push({ where: `node "${n.id}".subtitle`, text: n.subtitle });
+  }
+  for (const e of diag.edges) {
+    texts.push({ where: `edge "${e.id}".label`, text: e.label });
+    if (e.sub) texts.push({ where: `edge "${e.id}".sub`, text: e.sub });
+  }
+  for (const { where, text } of texts) {
+    if (ENG_BANNED.test(text)) {
+      warnings.push(`${where} \u306B uppercase \u82F1\u5358\u8A9E\u304C\u691C\u51FA: "${text}"`);
+    }
+  }
+  if (warnings.length > 0) {
+    for (const w of warnings) console.warn(`[cdl validate] warn: ${w}`);
+  }
+  if (errors.length > 0) {
+    throw new Error(`cdl validate failed:
+  - ${errors.join("\n  - ")}`);
+  }
+}
+function levenshtein(a, b) {
+  const m = a.length;
+  const n = b.length;
+  if (m === 0) return n;
+  if (n === 0) return m;
+  const dp = Array.from({ length: m + 1 }, () => new Array(n + 1).fill(0));
+  for (let i = 0; i <= m; i++) dp[i][0] = i;
+  for (let j = 0; j <= n; j++) dp[0][j] = j;
+  for (let i = 1; i <= m; i++) {
+    for (let j = 1; j <= n; j++) {
+      const cost = a[i - 1] === b[j - 1] ? 0 : 1;
+      dp[i][j] = Math.min(dp[i - 1][j] + 1, dp[i][j - 1] + 1, dp[i - 1][j - 1] + cost);
+    }
+  }
+  return dp[m][n];
+}
+
+// src/compile.ts
+function compile(diag) {
+  validate(diag);
+  return layout(diag);
+}
+
+// src/layout/geometry.ts
+function pointRectEdgeDistance(px, py, rect) {
+  const dx = Math.max(rect.x - px, 0, px - (rect.x + rect.w));
+  const dy = Math.max(rect.y - py, 0, py - (rect.y + rect.h));
+  return Math.hypot(dx, dy);
+}
+function rectRectOverlapArea(a, b) {
+  const dx = Math.min(a.x + a.w, b.x + b.w) - Math.max(a.x, b.x);
+  const dy = Math.min(a.y + a.h, b.y + b.h) - Math.max(a.y, b.y);
+  if (dx <= 0 || dy <= 0) return 0;
   return dx * dy;
 }
 function rectRectClearance(a, b) {
@@ -15441,7 +16101,6 @@ var SKIPPED_AXES = {
 var MIN_NODE_W = 80;
 var MIN_NODE_H = 40;
 var ROW_FORMAT = /^[^:]+:\s*.+$/;
-var PLACEHOLDER_RE = /\{(\w+)\}/g;
 function emptyCounts() {
   return {
     "node-visibility": 0,
@@ -15551,7 +16210,7 @@ function blendOver(fg, bg, alpha) {
   return `#${[ch(0), ch(1), ch(2)].map((v) => v.toString(16).padStart(2, "0")).join("")}`;
 }
 function evaluateLabelContrast(opts) {
-  const { edges, phases, toneColor: toneColor6, labelBg, inactiveText, textSpec = EDGE_LABEL_TEXT } = opts;
+  const { edges, phases, toneColor: toneColor5, labelBg, inactiveText, textSpec = EDGE_LABEL_TEXT } = opts;
   const isObject = (v) => typeof v === "object" && v !== null;
   const phaseList = (Array.isArray(phases) ? phases : []).filter(
     (p) => isObject(p) && Array.isArray(p.activate)
@@ -15572,7 +16231,7 @@ function evaluateLabelContrast(opts) {
     if (e.sub?.trim()) lines.push("sub");
     const states = [];
     if (everActive.has(e.id)) {
-      states.push({ state: "\u6D3B\u6027", fg: toneColor6(e.tone) });
+      states.push({ state: "\u6D3B\u6027", fg: toneColor5(e.tone) });
     }
     if (everInactive(e.id)) states.push({ state: "\u975E\u6D3B\u6027", fg: inactiveText });
     for (const { state, fg } of states) {
@@ -16199,7 +16858,10 @@ function runAxes(laid, diag, violations, counts, push, profile, skippedAxes) {
     }
   }
   const DIVIDER_ONLY = /^[─━—-]+$/;
-  const stateIds = new Set(diag.states.map((s) => s.id));
+  const stateIds = /* @__PURE__ */ new Set([
+    ...diag.states.map((s) => s.id),
+    ...(diag.derived ?? []).map((d) => d.id)
+  ]);
   for (const n of diag.nodes) {
     if (!n.rows) continue;
     if (!rendersRows(n.kind)) continue;
@@ -16209,11 +16871,8 @@ function runAxes(laid, diag, violations, counts, push, profile, skippedAxes) {
       if (!ROW_FORMAT.test(row)) {
         push("row-format", `node "${n.id}" row "${row}" \u304C "key: value" \u5F62\u5F0F\u3067\u306A\u3044`);
       }
-      let m;
-      const re = new RegExp(PLACEHOLDER_RE);
-      while ((m = re.exec(row)) !== null) {
-        const id = m[1];
-        if (id && !stateIds.has(id)) {
+      for (const id of templateRefIds(row)) {
+        if (!stateIds.has(id)) {
           push("row-format", `node "${n.id}" row "${row}" placeholder "{${id}}" \u304C\u672A\u5B9A\u7FA9 state`);
         }
       }
@@ -18584,562 +19243,265 @@ async function verifyNodeText(page, laid, _options) {
       });
     }
     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}" \u306E eyebrow "${n.eyebrow}" \u304C SVG <text> \u306B visible \u3067\u306A\u3044`
-      });
-    }
-  }
-  return out;
-}
-async function verifyEdgeLabel(page, laid, _options) {
-  const out = [];
-  const diagramId = laid.id;
-  const res = await page.evaluate(
-    ({ diagId }) => {
-      const root = document.querySelector(`[data-cdl-diagram="${diagId}"]`);
-      if (!root) return { ok: false, reason: "root not found" };
-      const edges = Array.from(root.querySelectorAll("[data-cdl-edge]"));
-      const labelGroups = Array.from(root.querySelectorAll("[data-cdl-edge-label-for]"));
-      const labelMap = /* @__PURE__ */ new Map();
-      for (const lg of labelGroups) {
-        const eid = lg.getAttribute("data-cdl-edge-label-for") ?? "";
-        const t = Array.from(lg.querySelectorAll("text")).map((tx) => tx.textContent ?? "").join(" ");
-        labelMap.set(eid, t);
-      }
-      return {
-        ok: true,
-        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 }
-  );
-  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}" \u306E label "${e.label}" \u304C SVG <text> \u306B visible \u3067\u306A\u3044`
-      });
-    }
-    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}" \u306E sub "${e.sub}" \u304C SVG <text> \u306B visible \u3067\u306A\u3044`
-      });
-    }
-  }
-  return out;
-}
-async function verifyEdgeConnected(page, laid, options) {
-  const out = [];
-  const tol = options.edgeConnectionTolerance ?? 80;
-  const diagramId = laid.id;
-  const res = await page.evaluate(
-    ({ diagId }) => {
-      const root = document.querySelector(`[data-cdl-diagram="${diagId}"]`);
-      if (!root) return { ok: false, reason: "root not found" };
-      const edges = Array.from(root.querySelectorAll("[data-cdl-edge]"));
-      const out2 = [];
-      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}`);
-        if (!pathEl) {
-          out2.push({ id, from, to, startView: null, endView: null, fromCenter: null, toCenter: null });
-          continue;
-        }
-        const len = pathEl.getTotalLength();
-        const ctm = pathEl.getScreenCTM();
-        let startView = null;
-        let endView = 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.getBoundingClientRect() : null;
-        const toR = toEl ? toEl.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;
-        out2.push({ id, from, to, startView, endView, fromCenter, toCenter });
-      }
-      return { ok: true, edges: out2 };
-    },
-    { diagId: diagramId }
-  );
-  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);
-      const nodeRadius = 200;
-      if (d > nodeRadius + tol) {
-        out.push({
-          kind: "edge-disconnected-from-source",
-          diagramId,
-          elementId: e.id,
-          expected: `from node "${e.from}" center \u307E\u3067 ${nodeRadius + tol}px \u4EE5\u5185`,
-          actual: { dist: d.toFixed(1) },
-          detail: `edge "${e.id}" \u306E path \u8D77\u70B9\u304C from node "${e.from}" \u304B\u3089 ${d.toFixed(1)}px \u96E2\u308C\u3066\u3044\u308B`
-        });
-      }
-    }
-    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 \u307E\u3067 ${nodeRadius + tol}px \u4EE5\u5185`,
-          actual: { dist: d.toFixed(1) },
-          detail: `edge "${e.id}" \u306E path \u7D42\u70B9\u304C to node "${e.to}" \u304B\u3089 ${d.toFixed(1)}px \u96E2\u308C\u3066\u3044\u308B`
-        });
-      }
-    }
-  }
-  return out;
-}
-async function verifyActivationVisible(page, diagram2, _options) {
-  const out = [];
-  const diagramId = diagram2.id;
-  if (diagram2.phases.length === 0) return out;
-  const res = await page.evaluate(
-    ({ diagId }) => {
-      const root = document.querySelector(`[data-cdl-diagram="${diagId}"]`);
-      if (!root) return { ok: false, 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, phaseIdx, activeIds: [...activeNodes, ...activeEdges] };
-    },
-    { diagId: diagramId }
-  );
-  if (!res.ok || res.phaseIdx < 0 || res.phaseIdx >= diagram2.phases.length) return out;
-  const phase = diagram2.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}" \u3067 active \u5F37\u8ABF\u8868\u793A`,
-        actual: "inactive",
-        detail: `phase "${phase.id}" \u3067 .activate("${id}") \u5BA3\u8A00\u3055\u308C\u3066\u3044\u308B\u304C\u3001 \u753B\u9762\u4E0A\u3067 active \u5F37\u8ABF (data-cdl-active=true) \u3055\u308C\u3066\u3044\u306A\u3044`
+      out.push({
+        kind: "node-eyebrow-missing",
+        diagramId,
+        elementId: n.id,
+        expected: `eyebrow "${n.eyebrow}" visible`,
+        actual: { visibleText: n.visibleText },
+        detail: `node "${n.id}" \u306E eyebrow "${n.eyebrow}" \u304C SVG <text> \u306B visible \u3067\u306A\u3044`
       });
     }
   }
   return out;
 }
-async function verifyToneColor(page, laid, options) {
+async function verifyEdgeLabel(page, laid, _options) {
   const out = [];
-  const tol = options.toneColorTolerance ?? 30;
   const diagramId = laid.id;
   const res = await page.evaluate(
     ({ diagId }) => {
       const root = document.querySelector(`[data-cdl-diagram="${diagId}"]`);
       if (!root) return { ok: false, reason: "root not found" };
       const edges = Array.from(root.querySelectorAll("[data-cdl-edge]"));
-      const out2 = [];
-      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";
-        const paths = Array.from(e.querySelectorAll("path"));
-        let strokeColor = "";
-        for (const p of paths) {
-          const s = p.getAttribute("stroke");
-          if (s && s !== "none" && s !== "transparent") {
-            strokeColor = s;
-            break;
-          }
-          const cs = window.getComputedStyle(p).stroke;
-          if (cs && cs !== "none") {
-            strokeColor = cs;
-            break;
-          }
-        }
-        out2.push({ id, tone, active, strokeColor });
+      const labelGroups = Array.from(root.querySelectorAll("[data-cdl-edge-label-for]"));
+      const labelMap = /* @__PURE__ */ new Map();
+      for (const lg of labelGroups) {
+        const eid = lg.getAttribute("data-cdl-edge-label-for") ?? "";
+        const t = Array.from(lg.querySelectorAll("text")).map((tx) => tx.textContent ?? "").join(" ");
+        labelMap.set(eid, t);
       }
-      return { ok: true, edges: out2 };
+      return {
+        ok: true,
+        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 }
   );
   if (!res.ok) return out;
   for (const e of res.edges) {
-    if (!e.active) continue;
-    const expected = TONE_COLOR_MAP[e.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}" \u2192 ${expected}`,
-        actual: { strokeColor: e.strokeColor, rgbDist: dist.toFixed(1) },
-        detail: `edge "${e.id}" \u306E active stroke \u8272\u304C tone="${e.tone}" \u306E\u671F\u5F85\u5024 ${expected} \u3068 RGB \u8DDD\u96E2 ${dist.toFixed(1)} > tolerance ${tol}`
-      });
-    }
-  }
-  return out;
-}
-function parseColorToRgb(c) {
-  if (!c) return null;
-  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, b) {
-  return Math.hypot(a[0] - b[0], a[1] - b[1], a[2] - b[2]);
-}
-async function verifyAuthorIntentAll(page, diagrams, options) {
-  const all = [];
-  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 };
-}
-
-// src/anim/core/easing.ts
-function cubicBezier(x1, y1, x2, y2) {
-  const A = (a, b) => 1 - 3 * b + 3 * a;
-  const B = (a, b) => 3 * b - 6 * a;
-  const C = (a) => 3 * a;
-  const sampleCurveX = (t) => ((A(x1, x2) * t + B(x1, x2)) * t + C(x1)) * t;
-  const sampleCurveY = (t) => ((A(y1, y2) * t + B(y1, y2)) * t + C(y1)) * t;
-  const sampleDerivativeX = (t) => 3 * A(x1, x2) * t * t + 2 * B(x1, x2) * t + C(x1);
-  function solveCurveX(x) {
-    if (x <= 0) return 0;
-    if (x >= 1) return 1;
-    let t = x;
-    for (let i = 0; i < 8; i += 1) {
-      const currentX = sampleCurveX(t) - x;
-      if (Math.abs(currentX) < 1e-5) return t;
-      const currentSlope = sampleDerivativeX(t);
-      if (Math.abs(currentSlope) < 1e-5) break;
-      t -= currentX / currentSlope;
-    }
-    let lo = 0;
-    let hi = 1;
-    let guess = x;
-    while (lo < hi) {
-      const currentX = sampleCurveX(guess);
-      if (Math.abs(currentX - x) < 1e-5) return guess;
-      if (x > currentX) lo = guess;
-      else hi = guess;
-      guess = (hi - lo) / 2 + lo;
-    }
-    return guess;
-  }
-  return (t) => {
-    if (t <= 0) return 0;
-    if (t >= 1) return 1;
-    return sampleCurveY(solveCurveX(t));
-  };
-}
-var easeOutQuint = cubicBezier(0.22, 1, 0.36, 1);
-function clamp01(value) {
-  if (value < 0) return 0;
-  if (value > 1) return 1;
-  return value;
-}
-function lerp(start, end, t) {
-  return start + (end - start) * t;
-}
-
-// src/anim/core/timeline.ts
-var Timeline = class {
-  phases;
-  easing;
-  loop;
-  autoAdvanceMsOverride;
-  phaseHoldMs;
-  loopRestartDelayMs;
-  autoplay;
-  subscribers = /* @__PURE__ */ new Set();
-  holdTimerHandle = null;
-  rafHandle = null;
-  phaseIndex = 0;
-  phaseProgress = 0;
-  phaseStartedAt = 0;
-  status = "idle";
-  /**
-   * snapshot を「state が変わった時のみ」 新 object として返すためのキャッシュ。
-   * useSyncExternalStore は getSnapshot() の戻り値が前回と参照同値の時に
-   * re-render を skip する設計なので、 これがないと毎 frame 別 object で
-   * 無限 render → React #185 になる。
-   */
-  cachedSnapshot = null;
-  /**
-   * constructor 直後の state snapshot。 destroy() で復元して StrictMode 二重 mount 経路の
-   * autostart() が正しく初期状態から再開できるようにする (initialPhaseIndex + autoplay 組合せ保持)。
-   */
-  initialState;
-  constructor(phases, options = {}) {
-    if (phases.length === 0) {
-      throw new Error("Timeline requires at least one phase");
-    }
-    this.phases = phases;
-    this.easing = options.easing ?? easeOutQuint;
-    this.loop = options.loop ?? false;
-    this.autoAdvanceMsOverride = options.autoAdvanceMs;
-    this.phaseHoldMs = options.phaseHoldMs ?? 0;
-    this.loopRestartDelayMs = options.loopRestartDelayMs ?? this.phaseHoldMs;
-    this.autoplay = options.autoplay ?? false;
-    const initial = options.initialPhaseIndex;
-    if (initial != null && initial > 0 && initial < phases.length) {
-      this.phaseIndex = initial;
-      this.phaseProgress = 1;
-      this.status = initial === phases.length - 1 ? "settled" : "paused";
-    }
-    this.initialState = {
-      phaseIndex: this.phaseIndex,
-      phaseProgress: this.phaseProgress,
-      status: this.status
-    };
-  }
-  /**
-   * mount 後に呼んで autoplay opt-in が真なら play を発火する。
-   * constructor で呼ぶと SSR 環境で rAF が動いて失敗するので別経路に分離。
-   */
-  autostart() {
-    if (this.autoplay && this.status === "idle") {
-      this.play();
-    }
-  }
-  // ─── public API ──────────────────────────────────────────────
-  subscribe(subscriber) {
-    this.subscribers.add(subscriber);
-    return () => {
-      this.subscribers.delete(subscriber);
-    };
-  }
-  snapshot() {
-    const cached = this.cachedSnapshot;
-    if (cached && cached.status === this.status && cached.phaseIndex === this.phaseIndex && cached.phaseProgress === this.phaseProgress && cached.totalPhases === this.phases.length) {
-      return cached;
-    }
-    const next = {
-      status: this.status,
-      phaseIndex: this.phaseIndex,
-      phaseProgress: this.phaseProgress,
-      totalPhases: this.phases.length
-    };
-    this.cachedSnapshot = next;
-    return next;
-  }
-  getPhase() {
-    const phase = this.phases[this.phaseIndex];
-    if (!phase) {
-      throw new Error(`Invalid phase index ${this.phaseIndex}`);
-    }
-    return phase;
-  }
-  /** Phase ID 指定でジャンプ (見つからない場合は no-op) */
-  gotoId(id) {
-    const index = this.phases.findIndex((phase) => phase.id === id);
-    if (index >= 0) this.goto(index);
-  }
-  /** Phase index 指定でジャンプ */
-  goto(index) {
-    const clamped = Math.max(0, Math.min(this.phases.length - 1, index));
-    this.cancelRaf();
-    this.phaseIndex = clamped;
-    this.phaseProgress = 1;
-    this.status = clamped === this.phases.length - 1 ? "settled" : "paused";
-    this.emit();
-  }
-  play() {
-    if (this.status === "playing") return;
-    this.status = "playing";
-    if (this.phaseProgress >= 1 && this.phaseIndex < this.phases.length - 1) {
-      this.advancePhase();
-    } else {
-      this.beginPhaseTransition();
+    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}" \u306E label "${e.label}" \u304C SVG <text> \u306B visible \u3067\u306A\u3044`
+      });
+    }
+    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}" \u306E sub "${e.sub}" \u304C SVG <text> \u306B visible \u3067\u306A\u3044`
+      });
     }
-    this.emit();
-  }
-  pause() {
-    if (this.status !== "playing") return;
-    this.cancelRaf();
-    this.status = "paused";
-    this.emit();
   }
-  next() {
-    if (this.phaseIndex >= this.phases.length - 1) {
-      if (this.loop) {
-        this.goto(0);
-        this.play();
+  return out;
+}
+async function verifyEdgeConnected(page, laid, options) {
+  const out = [];
+  const tol = options.edgeConnectionTolerance ?? 80;
+  const diagramId = laid.id;
+  const res = await page.evaluate(
+    ({ diagId }) => {
+      const root = document.querySelector(`[data-cdl-diagram="${diagId}"]`);
+      if (!root) return { ok: false, reason: "root not found" };
+      const edges = Array.from(root.querySelectorAll("[data-cdl-edge]"));
+      const out2 = [];
+      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}`);
+        if (!pathEl) {
+          out2.push({ id, from, to, startView: null, endView: null, fromCenter: null, toCenter: null });
+          continue;
+        }
+        const len = pathEl.getTotalLength();
+        const ctm = pathEl.getScreenCTM();
+        let startView = null;
+        let endView = 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.getBoundingClientRect() : null;
+        const toR = toEl ? toEl.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;
+        out2.push({ id, from, to, startView, endView, fromCenter, toCenter });
+      }
+      return { ok: true, edges: out2 };
+    },
+    { diagId: diagramId }
+  );
+  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);
+      const nodeRadius = 200;
+      if (d > nodeRadius + tol) {
+        out.push({
+          kind: "edge-disconnected-from-source",
+          diagramId,
+          elementId: e.id,
+          expected: `from node "${e.from}" center \u307E\u3067 ${nodeRadius + tol}px \u4EE5\u5185`,
+          actual: { dist: d.toFixed(1) },
+          detail: `edge "${e.id}" \u306E path \u8D77\u70B9\u304C from node "${e.from}" \u304B\u3089 ${d.toFixed(1)}px \u96E2\u308C\u3066\u3044\u308B`
+        });
       }
-      return;
-    }
-    this.cancelRaf();
-    this.phaseIndex += 1;
-    this.beginPhaseTransition();
-    if (this.status !== "playing") {
-      this.status = "paused";
     }
-    this.emit();
-  }
-  prev() {
-    if (this.phaseIndex <= 0) return;
-    this.cancelRaf();
-    this.phaseIndex -= 1;
-    this.phaseProgress = 1;
-    this.status = "paused";
-    this.emit();
-  }
-  reset() {
-    this.cancelRaf();
-    this.phaseIndex = 0;
-    this.phaseProgress = 0;
-    this.status = "idle";
-    this.emit();
-  }
-  /**
-   * cleanup + reset for-remount。 subscribers.clear() + cancelRaf() で active resource を
-   * 全解放した後、 (phaseIndex, phaseProgress, status) を constructor 直後の initialState に
-   * 復元する。 API 名は "destroy" だが object dead / GC-ready 契約ではなく、 destroy 後も
-   * subscribe / autostart / snapshot / play が正しく動作する reusable reset object として設計。
-   *
-   * 主 caller = React `useEffect` の cleanup で、 StrictMode の dev 二重 mount 経路で
-   * setup 再実行時に autostart() が正しく再発火するよう status を initialState に戻す。
-   *
-   * 詳細 = active edge が pathSubpath(d, 0) = "M x y" のみで空 line 描画される
-   * regression (dragon Issue #381) を防ぐため、 destroy() は「破棄」 でなく「再利用可能な reset」。
-   */
-  destroy() {
-    this.cancelRaf();
-    this.subscribers.clear();
-    this.status = this.initialState.status;
-    this.phaseIndex = this.initialState.phaseIndex;
-    this.phaseProgress = this.initialState.phaseProgress;
-  }
-  // ─── internals ───────────────────────────────────────────────
-  advancePhase() {
-    if (this.phaseIndex >= this.phases.length - 1) {
-      if (this.loop) {
-        this.scheduleHold(this.loopRestartDelayMs, () => {
-          this.phaseIndex = 0;
-          this.beginPhaseTransition();
+    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 \u307E\u3067 ${nodeRadius + tol}px \u4EE5\u5185`,
+          actual: { dist: d.toFixed(1) },
+          detail: `edge "${e.id}" \u306E path \u7D42\u70B9\u304C to node "${e.to}" \u304B\u3089 ${d.toFixed(1)}px \u96E2\u308C\u3066\u3044\u308B`
         });
-      } else {
-        this.status = "settled";
-        this.emit();
       }
-      return;
     }
-    this.scheduleHold(this.phaseHoldMs, () => {
-      this.phaseIndex += 1;
-      this.beginPhaseTransition();
-    });
   }
-  scheduleHold(ms, after) {
-    if (this.holdTimerHandle != null) {
-      clearTimeout(this.holdTimerHandle);
-      this.holdTimerHandle = null;
-    }
-    if (ms <= 0) {
-      after();
-      return;
+  return out;
+}
+async function verifyActivationVisible(page, diagram2, _options) {
+  const out = [];
+  const diagramId = diagram2.id;
+  if (diagram2.phases.length === 0) return out;
+  const res = await page.evaluate(
+    ({ diagId }) => {
+      const root = document.querySelector(`[data-cdl-diagram="${diagId}"]`);
+      if (!root) return { ok: false, 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, phaseIdx, activeIds: [...activeNodes, ...activeEdges] };
+    },
+    { diagId: diagramId }
+  );
+  if (!res.ok || res.phaseIdx < 0 || res.phaseIdx >= diagram2.phases.length) return out;
+  const phase = diagram2.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}" \u3067 active \u5F37\u8ABF\u8868\u793A`,
+        actual: "inactive",
+        detail: `phase "${phase.id}" \u3067 .activate("${id}") \u5BA3\u8A00\u3055\u308C\u3066\u3044\u308B\u304C\u3001 \u753B\u9762\u4E0A\u3067 active \u5F37\u8ABF (data-cdl-active=true) \u3055\u308C\u3066\u3044\u306A\u3044`
+      });
     }
-    this.holdTimerHandle = setTimeout(() => {
-      this.holdTimerHandle = null;
-      if (this.status === "playing") after();
-    }, ms);
   }
-  beginPhaseTransition() {
-    this.phaseProgress = 0;
-    this.phaseStartedAt = performance.now();
-    this.cancelRaf();
-    const step = (now) => {
-      const duration = this.autoAdvanceMsOverride ?? this.getPhase().durationMs ?? 600;
-      const elapsed = now - this.phaseStartedAt;
-      const linearT = clamp01(elapsed / duration);
-      this.phaseProgress = this.easing(linearT);
-      this.emit();
-      if (linearT < 1) {
-        this.rafHandle = requestAnimationFrame(step);
-        return;
-      }
-      this.phaseProgress = 1;
-      this.emit();
-      if (this.status === "playing") {
-        if (this.phaseIndex < this.phases.length - 1) {
-          this.advancePhase();
-        } else if (this.loop) {
-          this.advancePhase();
-        } else {
-          this.status = "settled";
-          this.emit();
+  return out;
+}
+async function verifyToneColor(page, laid, options) {
+  const out = [];
+  const tol = options.toneColorTolerance ?? 30;
+  const diagramId = laid.id;
+  const res = await page.evaluate(
+    ({ diagId }) => {
+      const root = document.querySelector(`[data-cdl-diagram="${diagId}"]`);
+      if (!root) return { ok: false, reason: "root not found" };
+      const edges = Array.from(root.querySelectorAll("[data-cdl-edge]"));
+      const out2 = [];
+      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";
+        const paths = Array.from(e.querySelectorAll("path"));
+        let strokeColor = "";
+        for (const p of paths) {
+          const s = p.getAttribute("stroke");
+          if (s && s !== "none" && s !== "transparent") {
+            strokeColor = s;
+            break;
+          }
+          const cs = window.getComputedStyle(p).stroke;
+          if (cs && cs !== "none") {
+            strokeColor = cs;
+            break;
+          }
         }
+        out2.push({ id, tone, active, strokeColor });
       }
-    };
-    this.rafHandle = requestAnimationFrame(step);
+      return { ok: true, edges: out2 };
+    },
+    { diagId: diagramId }
+  );
+  if (!res.ok) return out;
+  for (const e of res.edges) {
+    if (!e.active) continue;
+    const expected = TONE_COLOR_MAP[e.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}" \u2192 ${expected}`,
+        actual: { strokeColor: e.strokeColor, rgbDist: dist.toFixed(1) },
+        detail: `edge "${e.id}" \u306E active stroke \u8272\u304C tone="${e.tone}" \u306E\u671F\u5F85\u5024 ${expected} \u3068 RGB \u8DDD\u96E2 ${dist.toFixed(1)} > tolerance ${tol}`
+      });
+    }
   }
-  cancelRaf() {
-    if (this.rafHandle != null) {
-      cancelAnimationFrame(this.rafHandle);
-      this.rafHandle = null;
+  return out;
+}
+function parseColorToRgb(c) {
+  if (!c) return null;
+  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 (this.holdTimerHandle != null) {
-      clearTimeout(this.holdTimerHandle);
-      this.holdTimerHandle = null;
+    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;
   }
-  emit() {
-    const snapshot = this.snapshot();
-    for (const subscriber of this.subscribers) {
-      subscriber(snapshot);
-    }
+  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, b) {
+  return Math.hypot(a[0] - b[0], a[1] - b[1], a[2] - b[2]);
+}
+async function verifyAuthorIntentAll(page, diagrams, options) {
+  const all = [];
+  let fail = 0;
+  for (const d of diagrams) {
+    const ds = await verifyAuthorIntent(page, d, options);
+    if (ds.length > 0) fail++;
+    all.push(...ds);
   }
-};
-
-// src/anim/react/useTimeline.ts
+  return { total: diagrams.length, pass: diagrams.length - fail, fail, discrepancies: all };
+}
 function useTimeline(phases, options = {}) {
   const optionsRef = useRef(options);
   optionsRef.current = options;
@@ -19308,179 +19670,6 @@ function StateDiffCard({
     }
   );
 }
-
-// src/render/utils.ts
-function computeStateValues(laid, phaseIdx, progress) {
-  const values = {};
-  for (const s of laid.states) values[s.id] = s.initial;
-  for (let i = 0; i < laid.phases.length; i++) {
-    const phase = laid.phases[i];
-    if (!phase) continue;
-    if (i <= phaseIdx) {
-      for (const s of phase.sets) {
-        values[s.stateId] = s.value;
-      }
-    }
-    for (const t of phase.tweens) {
-      if (i < phaseIdx) {
-        values[t.stateId] = t.to;
-      } else if (i === phaseIdx) {
-        values[t.stateId] = Math.round(lerp(t.from, t.to, progress));
-      }
-    }
-  }
-  const out = {};
-  for (const [k, v] of Object.entries(values)) out[k] = String(v);
-  return out;
-}
-function interpolate(template, values) {
-  return template.replace(/\{(\w+)(\.length|\.sum|\.max|\.min|\.avg|\[\d+\])?\}/g, (_, id, accessor) => {
-    const raw = values[id];
-    if (raw === void 0) return `{${id}${accessor ?? ""}}`;
-    if (!accessor) return raw;
-    const arr = parseArraySignal(raw);
-    if (!arr) return `{${id}${accessor}}`;
-    if (accessor === ".length") return String(arr.length);
-    const nums = arr.map((v) => Number.isFinite(Number(v)) ? Number(v) : 0);
-    if (accessor === ".sum") return String(nums.reduce((s, v) => s + v, 0));
-    if (accessor === ".max") return nums.length ? String(nums.reduce((a, b) => a > b ? a : b, nums[0])) : "0";
-    if (accessor === ".min") return nums.length ? String(nums.reduce((a, b) => a < b ? a : b, nums[0])) : "0";
-    if (accessor === ".avg") {
-      if (!nums.length) return "0";
-      const sum = nums.reduce((s, v) => s + v, 0);
-      return String(Math.round(sum / nums.length * 100) / 100);
-    }
-    if (accessor.startsWith("[")) {
-      const idx = Number(accessor.slice(1, -1));
-      if (Number.isInteger(idx) && idx >= 0 && idx < arr.length) return String(arr[idx]);
-      return `{${id}${accessor}}`;
-    }
-    return raw;
-  });
-}
-function parseArraySignal(raw) {
-  const trimmed = raw.trim();
-  if (!trimmed.startsWith("[") || !trimmed.endsWith("]")) return null;
-  try {
-    const parsed = JSON.parse(trimmed);
-    if (Array.isArray(parsed)) return parsed;
-  } catch {
-    const inner = trimmed.slice(1, -1).trim();
-    if (!inner) return [];
-    if (/^[\s\d.,+\-eE]+$/.test(inner)) return inner.split(",").map((s) => Number(s.trim()));
-  }
-  return null;
-}
-function resolveNumericAttr(value, values, fallback) {
-  if (typeof value === "number") return value;
-  if (typeof value !== "string") return fallback;
-  const trimmed = value.trim();
-  if (trimmed === "") return fallback;
-  const resolved = interpolate(trimmed, values);
-  const parsed = Number(resolved);
-  return Number.isFinite(parsed) ? parsed : fallback;
-}
-function shrinkPathEnd(d, shrinkPx) {
-  const commandRegex = /([MLCQZmlcqz])([^MLCQZmlcqz]*)/g;
-  const matches = [];
-  let m;
-  while ((m = commandRegex.exec(d)) !== null) {
-    const cmd = m[1];
-    const args = (m[2] ?? "").trim().split(/[\s,]+/).filter(Boolean).map(parseFloat);
-    matches.push({ cmd, args });
-  }
-  if (matches.length < 2) return d;
-  let prevEnd = { x: 0, y: 0 };
-  for (let i = 0; i < matches.length - 1; i++) {
-    const { cmd, args } = matches[i];
-    if (cmd === "M" || cmd === "L") {
-      prevEnd = { x: args[0], y: args[1] };
-    } else if (cmd === "Q") {
-      prevEnd = { x: args[2], y: args[3] };
-    } else if (cmd === "C") {
-      prevEnd = { x: args[4], y: args[5] };
-    }
-  }
-  const last = matches[matches.length - 1];
-  let endX, endY;
-  if (last.cmd === "L" || last.cmd === "M") {
-    endX = last.args[0];
-    endY = last.args[1];
-  } else if (last.cmd === "Q") {
-    endX = last.args[2];
-    endY = last.args[3];
-  } else if (last.cmd === "C") {
-    endX = last.args[4];
-    endY = last.args[5];
-  } else {
-    return d;
-  }
-  const dx = endX - prevEnd.x;
-  const dy = endY - prevEnd.y;
-  const len = Math.hypot(dx, dy);
-  if (len < shrinkPx + 1) return d;
-  const ratio = (len - shrinkPx) / len;
-  const newEndX = prevEnd.x + dx * ratio;
-  const newEndY = prevEnd.y + dy * ratio;
-  const tokens = d.trim().split(/\s+/);
-  if (tokens.length < 2) return d;
-  tokens[tokens.length - 2] = newEndX.toFixed(1);
-  tokens[tokens.length - 1] = newEndY.toFixed(1);
-  return tokens.join(" ");
-}
-function pathSubpath(d, progress) {
-  if (progress >= 1) return d;
-  if (progress <= 0) {
-    const first = d.trim().match(/^M\s+([-\d.]+)\s+([-\d.]+)/);
-    if (!first) return d;
-    return `M ${first[1]} ${first[2]}`;
-  }
-  const tokens = d.trim().split(/\s+/);
-  const points = [];
-  let i = 0;
-  while (i < tokens.length) {
-    const t = tokens[i];
-    if (t === "M" || t === "L") {
-      const x = parseFloat(tokens[i + 1]);
-      const y = parseFloat(tokens[i + 2]);
-      if (!Number.isFinite(x) || !Number.isFinite(y)) return d;
-      points.push({ x, y });
-      i += 3;
-    } else {
-      return d;
-    }
-  }
-  if (points.length < 2) return d;
-  const segLens = [];
-  let total = 0;
-  for (let k = 1; k < points.length; k++) {
-    const dx = points[k].x - points[k - 1].x;
-    const dy = points[k].y - points[k - 1].y;
-    const len = Math.hypot(dx, dy);
-    segLens.push(len);
-    total += len;
-  }
-  if (total === 0) return d;
-  const target = total * progress;
-  let acc = 0;
-  for (let k = 0; k < segLens.length; k++) {
-    const segLen = segLens[k];
-    if (acc + segLen >= target) {
-      const remain = target - acc;
-      const ratio = segLen === 0 ? 0 : remain / segLen;
-      const sx = points[k].x;
-      const sy = points[k].y;
-      const ex = points[k + 1].x;
-      const ey = points[k + 1].y;
-      const tx = sx + (ex - sx) * ratio;
-      const ty = sy + (ey - sy) * ratio;
-      const head = points.slice(0, k + 1).map((p, idx) => `${idx === 0 ? "M" : "L"} ${p.x} ${p.y}`).join(" ");
-      return `${head} L ${tx.toFixed(1)} ${ty.toFixed(1)}`;
-    }
-    acc += segLen;
-  }
-  return d;
-}
 function opacityAttr(opacity) {
   return opacity < 1 ? opacity : void 0;
 }
@@ -20313,7 +20502,7 @@ function GenericNode({
       }
     );
   })();
-  const resolvedValue = value?.replace(/\{(\w+)\}/g, (_, id) => stateValues[id] ?? "");
+  const resolvedValue = value !== void 0 ? interpolate(value, stateValues) : void 0;
   const centered = shape === "diamond" || shape === "cloud";
   const textAnchor = centered ? "middle" : "start";
   const textX = centered ? w / 2 : 20;
@@ -20347,9 +20536,7 @@ function GenericNode({
       }
     ),
     node.rows && node.rows.length > 0 && (() => {
-      const resolved = node.rows.map(
-        (row) => row.replace(/\{(\w+)\}/g, (_, id) => stateValues[id] ?? "")
-      );
+      const resolved = node.rows.map((row) => interpolate(row, stateValues));
       const splits = resolved.map(splitRow);
       const leftMaxWidth = splits.reduce(
         (m, s) => Math.max(m, rowColumnWidth(s.left, GENERIC_ROW_LEFT_SIZE_PX, false)),
@@ -20656,14 +20843,97 @@ function arcPath(cx, cy, innerR, outerR, startAngle, endAngle) {
     "Z"
   ].join(" ");
 }
-function interpolateColor(template, stateValues, fallback) {
-  if (!template) return fallback;
-  return template.replace(/\{(\w+)\}/g, (_, id) => stateValues[id] ?? `{${id}}`);
+function interpolateColor(template, stateValues, fallback) {
+  if (!template) return fallback;
+  return interpolate(template, stateValues);
+}
+
+// src/render/payload-binding.ts
+var QUADRANT_KEYS = [
+  "topLeft",
+  "topRight",
+  "bottomLeft",
+  "bottomRight"
+];
+var JOURNEY_EMOTIONS = [
+  "delighted",
+  "happy",
+  "neutral",
+  "frustrated",
+  "angry"
+];
+var QUADRANT_FALLBACK = "bottomLeft";
+var EMOTION_FALLBACK = "neutral";
+function resolveBoundNumber(raw, values, fallback) {
+  if (typeof raw === "number") {
+    return Number.isFinite(raw) ? { value: raw, ok: true } : { value: fallback, ok: false };
+  }
+  const resolved = interpolate(raw, values).trim();
+  if (resolved === "") return { value: fallback, ok: false };
+  const parsed = Number(resolved);
+  return Number.isFinite(parsed) ? { value: parsed, ok: true } : { value: fallback, ok: false };
+}
+function resolveBoundEnum(raw, values, allowed, fallback) {
+  const resolved = interpolate(raw, values).trim();
+  if (allowed.includes(resolved)) return { value: resolved, ok: true };
+  return { value: fallback, ok: false };
+}
+function needsResolve(raw) {
+  return typeof raw !== "number" || !Number.isFinite(raw);
+}
+function resolveChartData(data, values) {
+  if (!data.some((d) => needsResolve(d.value))) return data;
+  return data.map((d) => {
+    const v = resolveBoundNumber(d.value, values, 0);
+    return v.ok ? { ...d, value: v.value } : { ...d, value: v.value, unresolved: true };
+  });
+}
+function resolveFunnelData(stages, values) {
+  if (!stages.some((s) => needsResolve(s.count))) return stages;
+  return stages.map((s) => {
+    const c = resolveBoundNumber(s.count, values, 0);
+    return c.ok ? { ...s, count: c.value } : { ...s, count: c.value, unresolved: true };
+  });
+}
+function resolveGanttData(tasks, values) {
+  if (!tasks.some((t) => needsResolve(t.startIdx) || needsResolve(t.endIdx))) return tasks;
+  return tasks.map((t) => {
+    const start = resolveBoundNumber(t.startIdx, values, 0);
+    const end = resolveBoundNumber(t.endIdx, values, start.value);
+    const next = { ...t, startIdx: start.value, endIdx: end.value };
+    return start.ok && end.ok ? next : { ...next, unresolved: true };
+  });
+}
+function resolveQuadrantData(data, values) {
+  const items = data.items;
+  if (items.every((i) => QUADRANT_KEYS.includes(i.quadrant))) {
+    return data;
+  }
+  return {
+    ...data,
+    items: items.map((i) => {
+      const q = resolveBoundEnum(i.quadrant, values, QUADRANT_KEYS, QUADRANT_FALLBACK);
+      return q.ok ? { ...i, quadrant: q.value } : { ...i, quadrant: q.value, unresolved: true };
+    })
+  };
+}
+function resolveJourneyData(steps, values) {
+  if (steps.every((s) => JOURNEY_EMOTIONS.includes(s.emotion))) {
+    return steps;
+  }
+  return steps.map((s) => {
+    const e = resolveBoundEnum(s.emotion, values, JOURNEY_EMOTIONS, EMOTION_FALLBACK);
+    return e.ok ? { ...s, emotion: e.value } : { ...s, emotion: e.value, unresolved: true };
+  });
 }
-function ChartLineNode({ node, active }) {
+function ChartLineNode({
+  node,
+  active,
+  stateValues = {}
+}) {
   const x0 = node.cx - node.w / 2;
   const y0 = node.cy - node.h / 2;
-  const data = node.chartData ?? [];
+  const data = resolveChartData(node.chartData ?? [], stateValues);
   const PAD_TOP = 36;
   const PAD_RIGHT = 40;
   const PAD_BOTTOM = 56;
@@ -20768,7 +21038,7 @@ function ChartLineNode({ node, active }) {
       const isValley = (prev === void 0 || d.value <= prev) && (next === void 0 || d.value <= next);
       const labelAbove = !isValley;
       const labelY = labelAbove ? cy - 12 : cy + 18;
-      return /* @__PURE__ */ jsxs("g", { children: [
+      return /* @__PURE__ */ jsxs("g", { "data-cdl-unresolved": d.unresolved ? "true" : void 0, children: [
         /* @__PURE__ */ jsx(
           "circle",
           {
@@ -20817,10 +21087,14 @@ function ChartLineNode({ node, active }) {
     })
   ] });
 }
-function ChartPieNode({ node, active }) {
+function ChartPieNode({
+  node,
+  active,
+  stateValues = {}
+}) {
   const x0 = node.cx - node.w / 2;
   const y0 = node.cy - node.h / 2;
-  const data = node.chartData ?? [];
+  const data = resolveChartData(node.chartData ?? [], stateValues);
   const total = data.reduce((acc, d) => acc + d.value, 0) || 1;
   const PAD_TOP = 20;
   const PAD_BOTTOM = 20;
@@ -20866,6 +21140,7 @@ function ChartPieNode({ node, active }) {
       "path",
       {
         "data-cdl-role": "chart-pie-slice",
+        "data-cdl-unresolved": s.d.unresolved ? "true" : void 0,
         d: s.path,
         fill: sliceColor(s.d.tone, idx),
         fillOpacity: active ? 0.95 : 0.85,
@@ -20917,10 +21192,14 @@ function sliceColor(tone, idx) {
   if (tone) return TONE[tone];
   return TONE[FALLBACK_ORDER[idx % FALLBACK_ORDER.length]];
 }
-function ChartBarNode({ node, active }) {
+function ChartBarNode({
+  node,
+  active,
+  stateValues = {}
+}) {
   const x0 = node.cx - node.w / 2;
   const y0 = node.cy - node.h / 2;
-  const data = node.chartData ?? [];
+  const data = resolveChartData(node.chartData ?? [], stateValues);
   const PAD_TOP = 20;
   const PAD_RIGHT = 24;
   const PAD_BOTTOM = 44;
@@ -21000,6 +21279,7 @@ function ChartBarNode({ node, active }) {
           "rect",
           {
             "data-cdl-role": "chart-bar",
+            "data-cdl-unresolved": d.unresolved ? "true" : void 0,
             x: bx,
             y: by,
             width: barW,
@@ -21035,10 +21315,14 @@ function ChartBarNode({ node, active }) {
     })
   ] });
 }
-function GanttNode({ node, active }) {
+function GanttNode({
+  node,
+  active,
+  stateValues = {}
+}) {
   const x0 = node.cx - node.w / 2;
   const y0 = node.cy - node.h / 2;
-  const tasks = node.ganttData ?? [];
+  const tasks = resolveGanttData(node.ganttData ?? [], stateValues);
   const PAD_TOP = 32;
   const PAD_RIGHT = 48;
   const PAD_BOTTOM = 44;
@@ -21048,7 +21332,7 @@ function GanttNode({ node, active }) {
   const rowGap = 20;
   const rowCount = tasks.length || 1;
   const rowH = Math.max(28, (canvasH - rowGap * (rowCount + 1)) / rowCount);
-  const maxIdx = Math.max(1, ...tasks.map((t) => t.endIdx + 1));
+  const maxIdx = Math.max(1, Math.ceil(Math.max(...tasks.map((t) => t.endIdx + 1), 1)));
   const cellW = canvasW / maxIdx;
   const xAt = (idx) => PAD_LEFT + idx * cellW;
   const yAt = (row) => PAD_TOP + rowGap + row * (rowH + rowGap);
@@ -21133,6 +21417,7 @@ function GanttNode({ node, active }) {
           "rect",
           {
             "data-cdl-role": "gantt-bar",
+            "data-cdl-unresolved": t.unresolved ? "true" : void 0,
             x: bx,
             y: by,
             width: bw,
@@ -21459,181 +21744,14 @@ function toneColor4(tone, alpha = 1) {
   const b = parseInt(hex.slice(5, 7), 16);
   return `rgba(${r}, ${g}, ${b}, ${alpha})`;
 }
-var MIND_TONES2 = ["accent", "teal", "success", "warning", "info", "error"];
-function MindRadialNode({ node, active }) {
-  const x0 = node.cx - node.w / 2;
-  const y0 = node.cy - node.h / 2;
-  const mindData = node.mindData;
-  if (!mindData) return /* @__PURE__ */ jsx("g", { transform: `translate(${x0} ${y0})` });
-  const canvasCx = node.w / 2;
-  const canvasCy = node.h / 2;
-  const maxRadius = Math.min(node.w, node.h) / 2 - 100;
-  const gradientId = `mind-radial-bg-${node.id}`;
-  const shadowId = `mind-radial-shadow-${node.id}`;
-  const layout2 = computeRadialLayout(mindData, canvasCx, canvasCy, maxRadius);
-  return /* @__PURE__ */ jsxs("g", { transform: `translate(${x0} ${y0})`, children: [
-    /* @__PURE__ */ jsxs("defs", { children: [
-      /* @__PURE__ */ jsxs("radialGradient", { id: gradientId, cx: "50%", cy: "50%", r: "60%", children: [
-        /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "var(--cdl-tone-accent, #2d6a8f)", stopOpacity: "0.14" }),
-        /* @__PURE__ */ jsx("stop", { offset: "55%", stopColor: "var(--cdl-tone-accent, #2d6a8f)", stopOpacity: "0.04" }),
-        /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "var(--cdl-tone-accent, #2d6a8f)", stopOpacity: "0" })
-      ] }),
-      /* @__PURE__ */ jsxs("filter", { id: shadowId, x: "-50%", y: "-50%", width: "200%", height: "200%", children: [
-        /* @__PURE__ */ jsx("feGaussianBlur", { in: "SourceAlpha", stdDeviation: "4" }),
-        /* @__PURE__ */ jsx("feOffset", { dx: "0", dy: "2", result: "offsetblur" }),
-        /* @__PURE__ */ jsx("feComponentTransfer", { children: /* @__PURE__ */ jsx("feFuncA", { type: "linear", slope: "0.4" }) }),
-        /* @__PURE__ */ jsxs("feMerge", { children: [
-          /* @__PURE__ */ jsx("feMergeNode", {}),
-          /* @__PURE__ */ jsx("feMergeNode", { in: "SourceGraphic" })
-        ] })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx(
-      "rect",
-      {
-        "data-cdl-role": "node-body",
-        x: 0,
-        y: 0,
-        width: node.w,
-        height: node.h,
-        rx: 16,
-        fill: "var(--cdl-node-fill, #ffffff)",
-        stroke: active ? "var(--cdl-tone-accent, #2d6a8f)" : "var(--cdl-divider, #d4d4d8)",
-        strokeWidth: active ? 3 : 1.25
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "circle",
-      {
-        cx: canvasCx,
-        cy: canvasCy,
-        r: maxRadius + 40,
-        fill: `url(#${gradientId})`,
-        pointerEvents: "none"
-      }
-    ),
-    layout2.edges.map((e, i) => /* @__PURE__ */ jsx(
-      "line",
-      {
-        "data-cdl-role": "mind-radial-edge",
-        x1: e.x1,
-        y1: e.y1,
-        x2: e.x2,
-        y2: e.y2,
-        stroke: toneColor5(e.tone),
-        strokeWidth: 2.25,
-        strokeOpacity: 0.7,
-        strokeLinecap: "round"
-      },
-      `edge-${i}`
-    )),
-    /* @__PURE__ */ jsx(
-      "circle",
-      {
-        "data-cdl-role": "mind-radial-halo",
-        cx: canvasCx,
-        cy: canvasCy,
-        r: 56,
-        fill: "var(--cdl-tone-accent, #2d6a8f)",
-        fillOpacity: 0.18
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "circle",
-      {
-        cx: canvasCx,
-        cy: canvasCy,
-        r: 42,
-        fill: "var(--cdl-tone-accent, #2d6a8f)",
-        filter: `url(#${shadowId})`
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "text",
-      {
-        x: canvasCx,
-        y: canvasCy + 5,
-        fontSize: 14,
-        fontWeight: 700,
-        textAnchor: "middle",
-        fill: "var(--cdl-text-on-tone, #ffffff)",
-        children: mindData.rootTitle
-      }
-    ),
-    layout2.nodes.filter((n) => !n.isRoot).map((n) => /* @__PURE__ */ jsxs("g", { children: [
-      /* @__PURE__ */ jsx(
-        "rect",
-        {
-          x: n.x - 62,
-          y: n.y - 22,
-          width: 124,
-          height: 44,
-          rx: 12,
-          fill: "var(--cdl-chip-fill, #f4f6fb)",
-          stroke: toneColor5(n.tone),
-          strokeWidth: 2
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "circle",
-        {
-          cx: n.x - 62 + 12,
-          cy: n.y,
-          r: 5,
-          fill: toneColor5(n.tone)
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "text",
-        {
-          x: n.x + 6,
-          y: n.y + 5,
-          fontSize: 13,
-          fontWeight: 600,
-          textAnchor: "middle",
-          fill: "var(--cdl-chip-text, #1a1f2a)",
-          children: n.title
-        }
-      )
-    ] }, `n-${n.id}`))
-  ] });
-}
-function computeRadialLayout(mindData, cx, cy, maxRadius) {
-  const nodes = [];
-  const edges = [];
-  nodes.push({ id: mindData.rootId, title: mindData.rootTitle, x: cx, y: cy, isRoot: true });
-  const childrenOf = /* @__PURE__ */ new Map();
-  for (const br of mindData.branches) {
-    if (!childrenOf.has(br.parent)) childrenOf.set(br.parent, []);
-    childrenOf.get(br.parent).push(br);
-  }
-  const firstLevel = childrenOf.get(mindData.rootId) ?? [];
-  const angleStep = Math.PI * 2 / 8;
-  firstLevel.slice(0, 8).forEach((br, idx) => {
-    const angle = -Math.PI / 2 + angleStep * idx;
-    const tone = br.tone ?? MIND_TONES2[idx % MIND_TONES2.length];
-    const r = maxRadius;
-    const x = cx + r * Math.cos(angle);
-    const y = cy + r * Math.sin(angle);
-    nodes.push({ id: br.id, title: br.title, x, y, tone, isRoot: false });
-    const rootR = 42;
-    const branchR = 62;
-    const x1 = cx + rootR * Math.cos(angle);
-    const y1 = cy + rootR * Math.sin(angle);
-    const x2 = x - branchR * Math.cos(angle);
-    const y2 = y - 22 * Math.sin(angle);
-    edges.push({ x1, y1, x2, y2, tone });
-  });
-  return { nodes, edges };
-}
-function toneColor5(tone) {
-  if (!tone) return TONE.accent;
-  return TONE[tone];
-}
-function FunnelNode({ node, active }) {
+function FunnelNode({
+  node,
+  active,
+  stateValues = {}
+}) {
   const x0 = node.cx - node.w / 2;
   const y0 = node.cy - node.h / 2;
-  const stages = node.funnelData ?? [];
+  const stages = resolveFunnelData(node.funnelData ?? [], stateValues);
   const PAD_TOP = 32;
   const PAD_RIGHT = 24;
   const PAD_BOTTOM = 32;
@@ -21667,7 +21785,7 @@ function FunnelNode({ node, active }) {
     ),
     stages.map((s, idx) => {
       const prev = idx > 0 ? stages[idx - 1] : null;
-      const dropRate = prev ? (prev.count - s.count) / prev.count * 100 : 0;
+      const dropRate = prev && prev.count > 0 ? (prev.count - s.count) / prev.count * 100 : 0;
       const y = PAD_TOP + idx * (stageH + gap);
       const topW = widthAtStep(idx);
       const bottomW = widthAtStep(idx + 1);
@@ -21682,6 +21800,7 @@ function FunnelNode({ node, active }) {
           "polygon",
           {
             "data-cdl-role": "funnel-stage",
+            "data-cdl-unresolved": s.unresolved ? "true" : void 0,
             points,
             fill: tone,
             fillOpacity: 0.9,
@@ -21737,11 +21856,16 @@ var TONE_ORDER = [
 function toneByIndex(idx) {
   return TONE_ORDER[idx % TONE_ORDER.length];
 }
-function QuadrantNode({ node, active }) {
+function QuadrantNode({
+  node,
+  active,
+  stateValues = {}
+}) {
   const x0 = node.cx - node.w / 2;
   const y0 = node.cy - node.h / 2;
-  const data = node.quadrantData;
-  if (!data) return /* @__PURE__ */ jsx("g", { transform: `translate(${x0} ${y0})` });
+  const raw = node.quadrantData;
+  if (!raw) return /* @__PURE__ */ jsx("g", { transform: `translate(${x0} ${y0})` });
+  const data = resolveQuadrantData(raw, stateValues);
   const PAD_TOP = 40;
   const PAD_BOTTOM = 56;
   const AXIS_LABEL_FONT = 12;
@@ -21852,6 +21976,7 @@ function QuadrantNode({ node, active }) {
             "rect",
             {
               "data-cdl-role": "quadrant-item",
+              "data-cdl-unresolved": it.unresolved ? "true" : void 0,
               x: qxStart,
               y: py,
               width: qHalfW,
@@ -22077,10 +22202,14 @@ function computeTreeLayout(treeNodes, canvasW, canvasH) {
   }
   return { nodes, edges };
 }
-function UserJourneyNode({ node, active }) {
+function UserJourneyNode({
+  node,
+  active,
+  stateValues = {}
+}) {
   const x0 = node.cx - node.w / 2;
   const y0 = node.cy - node.h / 2;
-  const steps = node.journeyData ?? [];
+  const steps = resolveJourneyData(node.journeyData ?? [], stateValues);
   const PAD_TOP = 20;
   const PAD_RIGHT = 32;
   const PAD_BOTTOM = 108;
@@ -22210,99 +22339,107 @@ function UserJourneyNode({ node, active }) {
         }
       )
     ] }),
-    steps.map((s, idx) => /* @__PURE__ */ jsxs("g", { children: [
-      /* @__PURE__ */ jsx(
-        "circle",
-        {
-          cx: xAt(idx),
-          cy: yAt(s.emotion),
-          r: 9,
-          fill: "var(--cdl-node-fill, #ffffff)",
-          stroke: emotionColor[s.emotion],
-          strokeWidth: 2.5
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "circle",
-        {
-          cx: xAt(idx),
-          cy: yAt(s.emotion),
-          r: 4,
-          fill: emotionColor[s.emotion]
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "text",
-        {
-          x: xAt(idx),
-          y: PAD_TOP + canvasH + 24,
-          fontSize: 12,
-          fontWeight: 700,
-          textAnchor: "middle",
-          fill: "var(--cdl-text, #1a1f2a)",
-          children: `${idx + 1}. ${s.title}`
-        }
-      ),
-      s.touchpoint && /* @__PURE__ */ jsxs("g", { children: [
-        /* @__PURE__ */ jsx(
-          "rect",
-          {
-            "data-cdl-role": "journey-chip",
-            x: xAt(idx) - 40,
-            y: PAD_TOP + canvasH + 34,
-            width: 80,
-            height: 20,
-            rx: 10,
-            fill: "var(--cdl-tone-accent, #2d6a8f)",
-            fillOpacity: 0.12,
-            stroke: "var(--cdl-tone-accent, #2d6a8f)",
-            strokeOpacity: 0.6,
-            strokeWidth: 1
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "text",
-          {
-            x: xAt(idx),
-            y: PAD_TOP + canvasH + 48,
-            fontSize: 10,
-            fontWeight: 600,
-            textAnchor: "middle",
-            fill: "var(--cdl-tone-accent, #2d6a8f)",
-            children: s.touchpoint
-          }
-        )
-      ] }),
-      s.opportunity && /* @__PURE__ */ jsxs("g", { children: [
-        /* @__PURE__ */ jsx(
-          "rect",
-          {
-            x: xAt(idx) - 55,
-            y: PAD_TOP + canvasH + 62,
-            width: 110,
-            height: 26,
-            rx: 13,
-            fill: "var(--cdl-note-fill, #fef3c7)",
-            stroke: TONE.warning,
-            strokeWidth: 1
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          "text",
-          {
-            x: xAt(idx),
-            y: PAD_TOP + canvasH + 79,
-            fontSize: 10,
-            textAnchor: "middle",
-            fill: "var(--cdl-note-text, #7a5320)",
-            children: [
-              "\u{1F4A1} ",
-              s.opportunity
-            ]
-          }
-        )
-      ] })
-    ] }, `step-${s.id}`))
+    steps.map((s, idx) => /* @__PURE__ */ jsxs(
+      "g",
+      {
+        "data-cdl-role": "journey-step",
+        "data-cdl-unresolved": s.unresolved ? "true" : void 0,
+        children: [
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx: xAt(idx),
+              cy: yAt(s.emotion),
+              r: 9,
+              fill: "var(--cdl-node-fill, #ffffff)",
+              stroke: emotionColor[s.emotion],
+              strokeWidth: 2.5
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx: xAt(idx),
+              cy: yAt(s.emotion),
+              r: 4,
+              fill: emotionColor[s.emotion]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "text",
+            {
+              x: xAt(idx),
+              y: PAD_TOP + canvasH + 24,
+              fontSize: 12,
+              fontWeight: 700,
+              textAnchor: "middle",
+              fill: "var(--cdl-text, #1a1f2a)",
+              children: `${idx + 1}. ${s.title}`
+            }
+          ),
+          s.touchpoint && /* @__PURE__ */ jsxs("g", { children: [
+            /* @__PURE__ */ jsx(
+              "rect",
+              {
+                "data-cdl-role": "journey-chip",
+                x: xAt(idx) - 40,
+                y: PAD_TOP + canvasH + 34,
+                width: 80,
+                height: 20,
+                rx: 10,
+                fill: "var(--cdl-tone-accent, #2d6a8f)",
+                fillOpacity: 0.12,
+                stroke: "var(--cdl-tone-accent, #2d6a8f)",
+                strokeOpacity: 0.6,
+                strokeWidth: 1
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "text",
+              {
+                x: xAt(idx),
+                y: PAD_TOP + canvasH + 48,
+                fontSize: 10,
+                fontWeight: 600,
+                textAnchor: "middle",
+                fill: "var(--cdl-tone-accent, #2d6a8f)",
+                children: s.touchpoint
+              }
+            )
+          ] }),
+          s.opportunity && /* @__PURE__ */ jsxs("g", { children: [
+            /* @__PURE__ */ jsx(
+              "rect",
+              {
+                x: xAt(idx) - 55,
+                y: PAD_TOP + canvasH + 62,
+                width: 110,
+                height: 26,
+                rx: 13,
+                fill: "var(--cdl-note-fill, #fef3c7)",
+                stroke: TONE.warning,
+                strokeWidth: 1
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "text",
+              {
+                x: xAt(idx),
+                y: PAD_TOP + canvasH + 79,
+                fontSize: 10,
+                textAnchor: "middle",
+                fill: "var(--cdl-note-text, #7a5320)",
+                children: [
+                  "\u{1F4A1} ",
+                  s.opportunity
+                ]
+              }
+            )
+          ] })
+        ]
+      },
+      `step-${s.id}`
+    ))
   ] });
 }
 var TITLE_MAX = 18;
@@ -26146,7 +26283,7 @@ function CdlNodeView({
   const boundOpacity = node.opacity !== void 0 ? Math.min(1, Math.max(0, resolveNumericAttr(node.opacity, stateValues, 1))) : void 0;
   if (node.visibleIf) {
     const resolved = interpolate(node.visibleIf, stateValues).trim().toLowerCase();
-    const unresolved = /^\{\w+(?:[.\[][^}]*)?\}$/.test(resolved) || /\{\w+(?:[.\[][^}]*)?\}/.test(resolved);
+    const unresolved = hasUnresolvedRef(resolved);
     const falsy = resolved === "" || resolved === "0" || resolved === "false" || resolved === "null" || resolved === "undefined" || resolved === "nan";
     if (falsy || unresolved) {
       return /* @__PURE__ */ jsx("g", { "data-cdl-node": node.id, "data-cdl-hidden": "true", style: { display: "none" } });
@@ -26179,26 +26316,27 @@ function CdlNodeView({
         return /* @__PURE__ */ jsx(EventNode, { node: resolvedNode, active, progress });
       case "card":
         return /* @__PURE__ */ jsx(CardNode, { node: resolvedNode, active });
+      // 図表 7 種は payload の数と語が `{signal}` を取れるので stateValues を渡す
+      // (`render/payload-binding.ts` が描画直前に解決する)。 動かさない 2 種
+      // (mind-map / tree-hierarchy) は構造だけを持つため渡さない。
       case "chart-line":
-        return /* @__PURE__ */ jsx(ChartLineNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsx(ChartLineNode, { node: resolvedNode, active, stateValues });
       case "chart-pie":
-        return /* @__PURE__ */ jsx(ChartPieNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsx(ChartPieNode, { node: resolvedNode, active, stateValues });
       case "chart-bar":
-        return /* @__PURE__ */ jsx(ChartBarNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsx(ChartBarNode, { node: resolvedNode, active, stateValues });
       case "gantt-timeline":
-        return /* @__PURE__ */ jsx(GanttNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsx(GanttNode, { node: resolvedNode, active, stateValues });
       case "mind-map":
         return /* @__PURE__ */ jsx(MindMapNode, { node: resolvedNode, active });
-      case "mind-radial":
-        return /* @__PURE__ */ jsx(MindRadialNode, { node: resolvedNode, active });
       case "funnel-stages":
-        return /* @__PURE__ */ jsx(FunnelNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsx(FunnelNode, { node: resolvedNode, active, stateValues });
       case "quadrant-matrix":
-        return /* @__PURE__ */ jsx(QuadrantNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsx(QuadrantNode, { node: resolvedNode, active, stateValues });
       case "tree-hierarchy":
         return /* @__PURE__ */ jsx(TreeNode, { node: resolvedNode, active });
       case "journey-map":
-        return /* @__PURE__ */ jsx(UserJourneyNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsx(UserJourneyNode, { node: resolvedNode, active, stateValues });
       case "shape-file":
         return /* @__PURE__ */ jsx(ShapeFileNode, { node: resolvedNode, active });
       case "shape-folder":
@@ -27906,57 +28044,10 @@ function stateMachine2(preset) {
   };
   return api;
 }
-function mindMapRadial(preset) {
-  const centerId = preset.centerId ?? "center";
-  const canvasW = 640;
-  const canvasH = 640;
-  const b = diagram(preset.id, { topic: preset.topic });
-  const branches = [];
-  const api = {
-    branch(br) {
-      if (branches.length >= 8) {
-        throw new Error(`cdl mindMapRadial: 8 \u65B9\u5411\u914D\u7F6E\u306E\u305F\u3081 branch \u306F\u6700\u5927 8 \u4EF6 (preset id "${preset.id}")`);
-      }
-      branches.push(br);
-      return api;
-    },
-    build() {
-      b.lane("radial", { width: canvasW });
-      const nodeId = `${preset.id}-radial`;
-      b.node(nodeId, {
-        lane: "radial",
-        stack: 0,
-        kind: "mind-radial",
-        title: preset.topic,
-        eyebrow: "mindMapRadial",
-        w: canvasW,
-        h: canvasH,
-        mindData: {
-          rootId: centerId,
-          rootTitle: preset.centerTitle,
-          branches: branches.map((br) => ({
-            id: br.id,
-            title: br.title,
-            parent: centerId,
-            tone: br.tone,
-            subtitle: br.subtitle
-          }))
-        }
-      });
-      b.phase(
-        "mindmap-radial",
-        { duration: 2400, title: preset.topic, body: "mindMapRadial \u5168 branch \u3092 visible \u5316\u3001 \u4E2D\u5FC3 + 8 \u65B9\u5411 45 \u5EA6\u3067\u63CF\u753B\u3002" },
-        (p) => p.activate(nodeId).badge("mindmap-radial")
-      );
-      return b.build();
-    }
-  };
-  return api;
-}
 function slugify(s) {
   return s.toLowerCase().replace(/[^a-z0-9぀-ゟ゠-ヿ一-龯]+/g, "-").replace(/^-|-$/g, "");
 }
 
-export { ARROW_ANGLE_MAX_DEG, ARROW_ENDPOINT_CENTER_TOL, CHAIN_MIN_CLEARANCE, CHAIN_SHIFT_MAX_ACCUMULATED, CHAIN_SHIFT_MAX_ITER, CLEARANCE_LABEL_LABEL, CLEARANCE_LANE_LABEL, CLEARANCE_NODE_LABEL, CLEARANCE_PATH_LABEL, COLUMN_GAP_VARIANCE_TOL, CdlDiagramThumbnail, CdlDiagramView, DETOUR_GAP, DETOUR_SLOT_GAP, DIST_LABEL_PATH_MAX, DIST_LABEL_PATH_MIN, EDGE_LABEL_TEXT, EDGE_STUB_OUT, FAN_GAP, FONT_RENDER_TOLERANCE_WORLD, LABEL_INIT_CLEARANCE, LABEL_INIT_CLEARANCE_DOTTED_FLOW, LABEL_SIZE_TOLERANCE_WORLD, LABEL_TO_PATH_CLEARANCE, LANE_BORDER_CLEARANCE_TOL, MARKER_GLOW_RADIUS, MIN_COLUMN_ALIGNMENT_TOLERANCE, MIN_ROW_ALIGNMENT_TOLERANCE, NEAR_COLLISION_DEFAULT_MIN, NEAR_COLLISION_POLICY, NODE_FRAME_SELECTOR, NODE_KINDS, ROW_GAP_VARIANCE_TOL, SPEC_CLEARANCE_POLICY, STAGE_SVG_SELECTOR, TARGET_LABEL_PATH_DIST, TONES, WCAG_AA_LARGE, WCAG_AA_NORMAL, assertNever, attachEventHandlers, batch, bboxClearance, bboxDiffWorld, cdlAdapter, chart, classDiagram, compile, computeEventBindingKey, computeFormulaKey, computeInputSignalKey, computeScrollProgress, computeScrollTriggerKey, computeViewportScale, computed, countEdgeCrossings, createFormulaComputeds, createInputSignals, createInteractiveSignalsAccessor, createScrollProgressHandle, createScrollProgressSignals, diagram, effect, er, evaluate as evaluateFormula, extractIdentifiers, flow, flowchart, funnel, gantt, hasInteractivePrimitives, infrastructure, inputDefaultValue, isLargeText, labelInitClearance, layout, layoutWithValidation, mindMap, mindMapRadial, network, parseFormula, pointRectEdgeDistance, pointToSegmentDistance2 as pointToSegmentDistance, predictLabelBBoxWorld, predictNodeBBoxWorld, projectEdgeLabel, projectNode, projectPathSegment, pxToWorld, quadrant, rectRectClearance, rectRectOverlapArea, rendersRows, requiredContrastRatio, requiredNearClearance, requiredRowsHeight, requiredRowsWidth, requiredSpecClearance, resolveEdgeLabelOverlapsWithChain, resolveEdgeLabelOverlapsWithChainAndPropagate, resolveOverlapsWithChain, resolveTarget, resolveTargetAll, segmentsIntersect2 as segmentsIntersect, sequence, signal, stateMachine, stateMachine2, swimlane, topology, tree, untrack, userJourney, validate, verifyAllDiagramsDom, verifyAuthorIntent, verifyAuthorIntentAll, verifyDiagramDom, visualValidate, visualValidateAll, visualValidateLaid, worldToPx };
+export { ARROW_ANGLE_MAX_DEG, ARROW_ENDPOINT_CENTER_TOL, CHAIN_MIN_CLEARANCE, CHAIN_SHIFT_MAX_ACCUMULATED, CHAIN_SHIFT_MAX_ITER, CLEARANCE_LABEL_LABEL, CLEARANCE_LANE_LABEL, CLEARANCE_NODE_LABEL, CLEARANCE_PATH_LABEL, COLUMN_GAP_VARIANCE_TOL, CdlDiagramThumbnail, CdlDiagramView, DETOUR_GAP, DETOUR_SLOT_GAP, DIST_LABEL_PATH_MAX, DIST_LABEL_PATH_MIN, EDGE_LABEL_TEXT, EDGE_STUB_OUT, FAN_GAP, FONT_RENDER_TOLERANCE_WORLD, LABEL_INIT_CLEARANCE, LABEL_INIT_CLEARANCE_DOTTED_FLOW, LABEL_SIZE_TOLERANCE_WORLD, LABEL_TO_PATH_CLEARANCE, LANE_BORDER_CLEARANCE_TOL, MARKER_GLOW_RADIUS, MIN_COLUMN_ALIGNMENT_TOLERANCE, MIN_ROW_ALIGNMENT_TOLERANCE, NEAR_COLLISION_DEFAULT_MIN, NEAR_COLLISION_POLICY, NODE_FRAME_SELECTOR, NODE_KINDS, ROW_GAP_VARIANCE_TOL, SPEC_CLEARANCE_POLICY, STAGE_SVG_SELECTOR, TARGET_LABEL_PATH_DIST, TONES, WCAG_AA_LARGE, WCAG_AA_NORMAL, applyDerivedValues, assertNever, attachEventHandlers, batch, bboxClearance, bboxDiffWorld, cdlAdapter, chart, classDiagram, compile, computeEventBindingKey, computeFormulaKey, computeInputSignalKey, computeScrollProgress, computeScrollTriggerKey, computeViewportScale, computed, countEdgeCrossings, createFormulaComputeds, createInputSignals, createInteractiveSignalsAccessor, createScrollProgressHandle, createScrollProgressSignals, diagram, effect, er, evaluate as evaluateFormula, extractIdentifiers, flow, flowchart, funnel, gantt, hasInteractivePrimitives, infrastructure, inputDefaultValue, isLargeText, labelInitClearance, layout, layoutWithValidation, mindMap, network, parseFormula, pointRectEdgeDistance, pointToSegmentDistance2 as pointToSegmentDistance, predictLabelBBoxWorld, predictNodeBBoxWorld, projectEdgeLabel, projectNode, projectPathSegment, pxToWorld, quadrant, rectRectClearance, rectRectOverlapArea, rendersRows, requiredContrastRatio, requiredNearClearance, requiredRowsHeight, requiredRowsWidth, requiredSpecClearance, resolveEdgeLabelOverlapsWithChain, resolveEdgeLabelOverlapsWithChainAndPropagate, resolveOverlapsWithChain, resolveTarget, resolveTargetAll, segmentsIntersect2 as segmentsIntersect, sequence, signal, stateMachine, stateMachine2, swimlane, topology, tree, untrack, userJourney, validate, verifyAllDiagramsDom, verifyAuthorIntent, verifyAuthorIntentAll, verifyDiagramDom, visualValidate, visualValidateAll, visualValidateLaid, withDerivedValues, worldToPx };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map