@cardenelabs/cdl 0.5.0 → 0.6.0

package/dist/index.cjs

@@ -363,6 +363,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 = [];
@@ -403,6 +412,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) {
@@ -439,6 +467,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)`
@@ -878,6 +910,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) {
@@ -11516,7 +11684,6 @@ var KINDS_WITHOUT_TITLE_TEXT = /* @__PURE__ */ new Set([
   "chart-bar",
   "gantt-timeline",
   "mind-map",
-  "mind-radial",
   "funnel-stages",
   "quadrant-matrix",
   "tree-hierarchy",
@@ -12916,10 +13083,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 },
@@ -14975,6 +15141,7 @@ function layout(diag) {
     edges,
     states: diag.states,
     phases: diag.phases,
+    ...diag.derived ? { derived: diag.derived } : {},
     bboxes,
     collisions,
     nearCollisions,
@@ -15035,10 +15202,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",
@@ -15105,242 +15271,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) {
@@ -15443,7 +16103,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,
@@ -15553,7 +16212,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)
@@ -15574,7 +16233,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) {
@@ -16201,7 +16860,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;
@@ -16211,11 +16873,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`);
         }
       }
@@ -18586,562 +19245,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 = react.useRef(options);
   optionsRef.current = options;
@@ -19310,179 +19672,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;
 }
@@ -20315,7 +20504,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;
@@ -20349,9 +20538,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)),
@@ -20658,14 +20845,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;
@@ -20770,7 +21040,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__ */ jsxRuntime.jsxs("g", { children: [
+      return /* @__PURE__ */ jsxRuntime.jsxs("g", { "data-cdl-unresolved": d.unresolved ? "true" : void 0, children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "circle",
           {
@@ -20819,10 +21089,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;
@@ -20868,6 +21142,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,
@@ -20919,10 +21194,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;
@@ -21002,6 +21281,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,
@@ -21037,10 +21317,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;
@@ -21050,7 +21334,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);
@@ -21135,6 +21419,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,
@@ -21461,181 +21746,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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("g", { transform: `translate(${x0} ${y0})`, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("radialGradient", { id: gradientId, cx: "50%", cy: "50%", r: "60%", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: "var(--cdl-tone-accent, #2d6a8f)", stopOpacity: "0.14" }),
-        /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "55%", stopColor: "var(--cdl-tone-accent, #2d6a8f)", stopOpacity: "0.04" }),
-        /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: "var(--cdl-tone-accent, #2d6a8f)", stopOpacity: "0" })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("filter", { id: shadowId, x: "-50%", y: "-50%", width: "200%", height: "200%", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("feGaussianBlur", { in: "SourceAlpha", stdDeviation: "4" }),
-        /* @__PURE__ */ jsxRuntime.jsx("feOffset", { dx: "0", dy: "2", result: "offsetblur" }),
-        /* @__PURE__ */ jsxRuntime.jsx("feComponentTransfer", { children: /* @__PURE__ */ jsxRuntime.jsx("feFuncA", { type: "linear", slope: "0.4" }) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("feMerge", { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("feMergeNode", {}),
-          /* @__PURE__ */ jsxRuntime.jsx("feMergeNode", { in: "SourceGraphic" })
-        ] })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-      "circle",
-      {
-        cx: canvasCx,
-        cy: canvasCy,
-        r: maxRadius + 40,
-        fill: `url(#${gradientId})`,
-        pointerEvents: "none"
-      }
-    ),
-    layout2.edges.map((e, i) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-      "circle",
-      {
-        "data-cdl-role": "mind-radial-halo",
-        cx: canvasCx,
-        cy: canvasCy,
-        r: 56,
-        fill: "var(--cdl-tone-accent, #2d6a8f)",
-        fillOpacity: 0.18
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "circle",
-      {
-        cx: canvasCx,
-        cy: canvasCy,
-        r: 42,
-        fill: "var(--cdl-tone-accent, #2d6a8f)",
-        filter: `url(#${shadowId})`
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("g", { children: [
-      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-        "circle",
-        {
-          cx: n.x - 62 + 12,
-          cy: n.y,
-          r: 5,
-          fill: toneColor5(n.tone)
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.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;
@@ -21669,7 +21787,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);
@@ -21684,6 +21802,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,
@@ -21739,11 +21858,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__ */ jsxRuntime.jsx("g", { transform: `translate(${x0} ${y0})` });
+  const raw = node.quadrantData;
+  if (!raw) return /* @__PURE__ */ jsxRuntime.jsx("g", { transform: `translate(${x0} ${y0})` });
+  const data = resolveQuadrantData(raw, stateValues);
   const PAD_TOP = 40;
   const PAD_BOTTOM = 56;
   const AXIS_LABEL_FONT = 12;
@@ -21854,6 +21978,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,
@@ -22079,10 +22204,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;
@@ -22212,99 +22341,107 @@ function UserJourneyNode({ node, active }) {
         }
       )
     ] }),
-    steps.map((s, idx) => /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
-      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-        "circle",
-        {
-          cx: xAt(idx),
-          cy: yAt(s.emotion),
-          r: 4,
-          fill: emotionColor[s.emotion]
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("g", { children: [
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("g", { children: [
-        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+      "g",
+      {
+        "data-cdl-role": "journey-step",
+        "data-cdl-unresolved": s.unresolved ? "true" : void 0,
+        children: [
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+            "circle",
+            {
+              cx: xAt(idx),
+              cy: yAt(s.emotion),
+              r: 4,
+              fill: emotionColor[s.emotion]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("g", { children: [
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("g", { children: [
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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;
@@ -26148,7 +26285,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__ */ jsxRuntime.jsx("g", { "data-cdl-node": node.id, "data-cdl-hidden": "true", style: { display: "none" } });
@@ -26181,26 +26318,27 @@ function CdlNodeView({
         return /* @__PURE__ */ jsxRuntime.jsx(EventNode, { node: resolvedNode, active, progress });
       case "card":
         return /* @__PURE__ */ jsxRuntime.jsx(CardNode, { node: resolvedNode, active });
+      // 図表 7 種は payload の数と語が `{signal}` を取れるので stateValues を渡す
+      // (`render/payload-binding.ts` が描画直前に解決する)。 動かさない 2 種
+      // (mind-map / tree-hierarchy) は構造だけを持つため渡さない。
       case "chart-line":
-        return /* @__PURE__ */ jsxRuntime.jsx(ChartLineNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsxRuntime.jsx(ChartLineNode, { node: resolvedNode, active, stateValues });
       case "chart-pie":
-        return /* @__PURE__ */ jsxRuntime.jsx(ChartPieNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsxRuntime.jsx(ChartPieNode, { node: resolvedNode, active, stateValues });
       case "chart-bar":
-        return /* @__PURE__ */ jsxRuntime.jsx(ChartBarNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsxRuntime.jsx(ChartBarNode, { node: resolvedNode, active, stateValues });
       case "gantt-timeline":
-        return /* @__PURE__ */ jsxRuntime.jsx(GanttNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsxRuntime.jsx(GanttNode, { node: resolvedNode, active, stateValues });
       case "mind-map":
         return /* @__PURE__ */ jsxRuntime.jsx(MindMapNode, { node: resolvedNode, active });
-      case "mind-radial":
-        return /* @__PURE__ */ jsxRuntime.jsx(MindRadialNode, { node: resolvedNode, active });
       case "funnel-stages":
-        return /* @__PURE__ */ jsxRuntime.jsx(FunnelNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsxRuntime.jsx(FunnelNode, { node: resolvedNode, active, stateValues });
       case "quadrant-matrix":
-        return /* @__PURE__ */ jsxRuntime.jsx(QuadrantNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsxRuntime.jsx(QuadrantNode, { node: resolvedNode, active, stateValues });
       case "tree-hierarchy":
         return /* @__PURE__ */ jsxRuntime.jsx(TreeNode, { node: resolvedNode, active });
       case "journey-map":
-        return /* @__PURE__ */ jsxRuntime.jsx(UserJourneyNode, { node: resolvedNode, active });
+        return /* @__PURE__ */ jsxRuntime.jsx(UserJourneyNode, { node: resolvedNode, active, stateValues });
       case "shape-file":
         return /* @__PURE__ */ jsxRuntime.jsx(ShapeFileNode, { node: resolvedNode, active });
       case "shape-folder":
@@ -27908,53 +28046,6 @@ 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, "");
 }
@@ -27998,6 +28089,7 @@ exports.TARGET_LABEL_PATH_DIST = TARGET_LABEL_PATH_DIST;
 exports.TONES = TONES;
 exports.WCAG_AA_LARGE = WCAG_AA_LARGE;
 exports.WCAG_AA_NORMAL = WCAG_AA_NORMAL;
+exports.applyDerivedValues = applyDerivedValues;
 exports.assertNever = assertNever;
 exports.attachEventHandlers = attachEventHandlers;
 exports.batch = batch;
@@ -28037,7 +28129,6 @@ exports.labelInitClearance = labelInitClearance;
 exports.layout = layout;
 exports.layoutWithValidation = layoutWithValidation;
 exports.mindMap = mindMap;
-exports.mindMapRadial = mindMapRadial;
 exports.network = network;
 exports.parseFormula = parseFormula;
 exports.pointRectEdgeDistance = pointRectEdgeDistance;
@@ -28080,6 +28171,7 @@ exports.verifyDiagramDom = verifyDiagramDom;
 exports.visualValidate = visualValidate;
 exports.visualValidateAll = visualValidateAll;
 exports.visualValidateLaid = visualValidateLaid;
+exports.withDerivedValues = withDerivedValues;
 exports.worldToPx = worldToPx;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map