@cardenelabs/cdl 0.5.0 → 0.6.0

package/src/kinds/gantt.tsx

@@ -1,16 +1,26 @@
 import type { JSX } from "react";
 import type { LaidNode, Tone } from "../types";
 import { TONE } from "../render/tone";
+import { resolveGanttData } from "../render/payload-binding";
 
 /**
  * gantt-timeline kind ... 1 node に task 配列 (ganttData) を保持し、 帯状 timeline を SVG 描画する。
  * layout = 縦軸 task lane (task ごと 1 行)、 横軸日付 (startIdx / endIdx で bar 位置と幅)。
  * dependsOn は task 間の連結 arrow (elbow line + arrowhead) を追加。
+ * startIdx / endIdx は数でも `{signal}` でもよく、 後者は状態が動くたび帯が伸び縮みする。
  */
-export function GanttNode({ node, active }: { node: LaidNode; active: boolean }): JSX.Element {
+export function GanttNode({
+  node,
+  active,
+  stateValues = {},
+}: {
+  node: LaidNode;
+  active: boolean;
+  stateValues?: Record<string, string>;
+}): JSX.Element {
   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;
@@ -23,7 +33,9 @@ export function GanttNode({ node, active }: { node: LaidNode; active: boolean })
   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));
+  // 帯の右端が状態で動くと端数が出る。 目盛りは本数を数えるので切り上げて整数にする
+  // (静止した図では endIdx が整数なので切り上げても値は変わらない)。
+  const maxIdx = Math.max(1, Math.ceil(Math.max(...tasks.map((t) => t.endIdx + 1), 1)));
   const cellW = canvasW / maxIdx;
 
   const xAt = (idx: number) => PAD_LEFT + idx * cellW;
@@ -107,6 +119,7 @@ export function GanttNode({ node, active }: { node: LaidNode; active: boolean })
           <g key={`bar-${t.id}`}>
             <rect
               data-cdl-role="gantt-bar"
+              data-cdl-unresolved={t.unresolved ? "true" : undefined}
               x={bx}
               y={by}
               width={bw}

package/src/kinds/generic.tsx

@@ -1,6 +1,7 @@
 import type { JSX } from "react";
 import type { LaidNode, NodeKind } from "../types";
 import { toneColor } from "./node-tone";
+import { interpolate } from "../render/utils";
 import { rowBaselineY } from "../layout/spec";
 import {
   GENERIC_ROW_LEFT_SIZE_PX,
@@ -273,8 +274,12 @@ export function GenericNode({
     );
   })();
 
-  // value placeholder 解決 ({stateId} 形式)
-  const resolvedValue = value?.replace(/\{(\w+)\}/g, (_, id: string) => stateValues[id] ?? "");
+  // value placeholder 解決 ({名前} 形式)。 engine 共通の `interpolate` を使う。
+  //
+  // 独自に書いていた間、 解決できない参照を空文字に潰していた = 書き間違いが
+  // 「値が無い」 と区別できなかった。
+  // 共通経路は解決できない参照を `{名前}` のまま残すので、 読み手が気付ける。
+  const resolvedValue = value !== undefined ? interpolate(value, stateValues) : undefined;
 
   // shape 別の text 配置 (diamond / cloud は中心揃え、 rect 等は左上揃え)
   const centered = shape === "diamond" || shape === "cloud";
@@ -329,9 +334,8 @@ export function GenericNode({
         // storage と同じ row-align helper で left / right を分離し、 全 row 共通の
         // rightColX (= 左列 max 幅 + gap) で右列開始 x を揃える (DB table / UML class 風)。
         // 旧実装は split(":") 単一 delimiter + 右 anchor (node 右端寄せ) で行毎にズレていた。
-        const resolved = node.rows.map((row) =>
-          row.replace(/\{(\w+)\}/g, (_, id: string) => stateValues[id] ?? ""),
-        );
+        // value と同じく engine 共通の経路で解決する (独自に書くと字種と既定値がずれる)
+        const resolved = node.rows.map((row) => interpolate(row, stateValues));
         const splits = resolved.map(splitRow);
         // 左列は比例の書体で描く (`font-family` を指定していないので継承する)。 字数に一定を
         // 掛ける形では実物に届かず、 右列が左列の字に重なる (`#425`)。 字ごとの幅で見積もる。

package/src/kinds/quadrant.tsx

@@ -2,6 +2,7 @@ import type { JSX } from "react";
 import type { LaidNode } from "../types";
 import { TONE, toneFill } from "../render/tone";
 import { measureTextWidth } from "../layout/text-width";
+import { resolveQuadrantData } from "../render/payload-binding";
 
 /**
  * quadrant-matrix kind ... 1 node に quadrantData (xAxis / yAxis / quadrantLabels / items)
@@ -9,11 +10,22 @@ import { measureTextWidth } from "../layout/text-width";
  * layout = 中央十字線で 4 象限に分割、 各象限にほんのり色分け背景 + 象限 label、
  * item は象限内に大きめの card で配置、 軸両端に矢印 + label を配置。
  */
-export function QuadrantNode({ node, active }: { node: LaidNode; active: boolean }): JSX.Element {
+export function QuadrantNode({
+  node,
+  active,
+  stateValues = {},
+}: {
+  node: LaidNode;
+  active: boolean;
+  stateValues?: Record<string, string>;
+}): JSX.Element {
   const x0 = node.cx - node.w / 2;
   const y0 = node.cy - node.h / 2;
-  const data = node.quadrantData;
-  if (!data) return <g transform={`translate(${x0} ${y0})`} />;
+  const raw = node.quadrantData;
+  if (!raw) return <g transform={`translate(${x0} ${y0})`} />;
+  // item の象限は `{signal}` で動く。 4 象限のどれにも解決できない項目は消さず左下に置き、
+  // 印を付ける (消すと「書いた項目が図に無い」 理由が読み取れない)。
+  const data = resolveQuadrantData(raw, stateValues);
 
   const PAD_TOP = 40;
   const PAD_BOTTOM = 56;
@@ -143,6 +155,7 @@ export function QuadrantNode({ node, active }: { node: LaidNode; active: boolean
             <g key={`item-${it.id}`}>
               <rect
                 data-cdl-role="quadrant-item"
+                data-cdl-unresolved={it.unresolved ? "true" : undefined}
                 x={qxStart}
                 y={py}
                 width={qHalfW}

package/src/kinds/user-journey.tsx

@@ -1,6 +1,7 @@
 import type { JSX } from "react";
-import type { LaidNode, JourneyStepPayload } from "../types";
+import type { LaidNode, JourneyEmotion } from "../types";
 import { TONE } from "../render/tone";
+import { resolveJourneyData } from "../render/payload-binding";
 
 /**
  * journey-map kind ... 1 node に step 配列 (journeyData) を保持し、 UX journey map を SVG 描画する。
@@ -13,10 +14,20 @@ import { TONE } from "../render/tone";
  *   - opportunity は 電球 + 吹き出し風 rounded rect
  *   - 「ただの折れ線グラフ」 との差別化 = 5 emotion band + touchpoint 装飾 + opportunity call-out
  */
-export function UserJourneyNode({ node, active }: { node: LaidNode; active: boolean }): JSX.Element {
+export function UserJourneyNode({
+  node,
+  active,
+  stateValues = {},
+}: {
+  node: LaidNode;
+  active: boolean;
+  stateValues?: Record<string, string>;
+}): JSX.Element {
   const x0 = node.cx - node.w / 2;
   const y0 = node.cy - node.h / 2;
-  const steps = node.journeyData ?? [];
+  // 段の気持ちは `{signal}` で動く。 5 段階のどれにも解決できない段は消さず真ん中に置き、
+  // 印を付ける (消すと折れ線の形が別物になり、 どこが壊れたか読み取れない)。
+  const steps = resolveJourneyData(node.journeyData ?? [], stateValues);
 
   const PAD_TOP = 20;
   const PAD_RIGHT = 32;
@@ -25,8 +36,8 @@ export function UserJourneyNode({ node, active }: { node: LaidNode; active: bool
   const canvasW = node.w - PAD_LEFT - PAD_RIGHT;
   const canvasH = node.h - PAD_TOP - PAD_BOTTOM;
 
-  const emotionRows: JourneyStepPayload["emotion"][] = ["delighted", "happy", "neutral", "frustrated", "angry"];
-  const emotionScore: Record<JourneyStepPayload["emotion"], number> = {
+  const emotionRows: JourneyEmotion[] = ["delighted", "happy", "neutral", "frustrated", "angry"];
+  const emotionScore: Record<JourneyEmotion, number> = {
     delighted: 4,
     happy: 3,
     neutral: 2,
@@ -34,14 +45,14 @@ export function UserJourneyNode({ node, active }: { node: LaidNode; active: bool
     angry: 0,
   };
   // 感情ごとの色。 共有の表から引く (直書きすると表を直した時に取り残される)。
-  const emotionColor: Record<JourneyStepPayload["emotion"], string> = {
+  const emotionColor: Record<JourneyEmotion, string> = {
     delighted: TONE.success,
     happy: TONE.teal,
     neutral: TONE.info,
     frustrated: TONE.warning,
     angry: TONE.error,
   };
-  const emotionEmoji: Record<JourneyStepPayload["emotion"], string> = {
+  const emotionEmoji: Record<JourneyEmotion, string> = {
     delighted: "😄",
     happy: "🙂",
     neutral: "😐",
@@ -54,7 +65,7 @@ export function UserJourneyNode({ node, active }: { node: LaidNode; active: bool
   const colW = canvasW / Math.max(steps.length, 1);
   const xAt = (idx: number) =>
     PAD_LEFT + (steps.length <= 1 ? canvasW / 2 : colW / 2 + colW * idx);
-  const yAt = (emotion: JourneyStepPayload["emotion"]) =>
+  const yAt = (emotion: JourneyEmotion) =>
     PAD_TOP + rowH / 2 + (4 - emotionScore[emotion]) * rowH;
 
   // smooth curve for emotion path
@@ -155,7 +166,11 @@ export function UserJourneyNode({ node, active }: { node: LaidNode; active: bool
       )}
 
       {steps.map((s, idx) => (
-        <g key={`step-${s.id}`}>
+        <g
+          key={`step-${s.id}`}
+          data-cdl-role="journey-step"
+          data-cdl-unresolved={s.unresolved ? "true" : undefined}
+        >
           <circle
             cx={xAt(idx)}
             cy={yAt(s.emotion)}

package/src/layout/spec.ts

@@ -64,7 +64,7 @@ export function hasRenderedLabel(e: { label?: string; sub?: string }): boolean {
  *
  * 2 群ある。 形だけを描く `dyn-*` 5 種は `DynShapeNode` に回り、 `node.title` を一度も参照しない
  * (描くのは形と数値の小さな label だけ)。 payload を自前 layout する chart / timeline / analytic
- * 11 種は、 描くのが payload 側の label で `title` は使わない。
+ * 10 種は、 描くのが payload 側の label で `title` は使わない。
  *
  * 一覧は手で持つと描画側とずれるため、 `test/node-title-render.test.tsx` が `NODE_KINDS` を
  * **全件 render** して「title の文字が出るか」 と本述語の返り値の一致を検査する。 新しい種別を
@@ -83,7 +83,6 @@ const KINDS_WITHOUT_TITLE_TEXT: ReadonlySet<string> = new Set([
   "chart-bar",
   "gantt-timeline",
   "mind-map",
-  "mind-radial",
   "funnel-stages",
   "quadrant-matrix",
   "tree-hierarchy",

package/src/layout/tokens.ts

@@ -52,10 +52,9 @@ export const 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 },

package/src/layout.ts

@@ -363,6 +363,7 @@ export function layout(diag: CdlDiagram): LaidDiagram {
     edges,
     states: diag.states,
     phases: diag.phases,
+    ...(diag.derived ? { derived: diag.derived } : {}),
     bboxes,
     collisions,
     nearCollisions,

package/src/presets.ts

@@ -2,7 +2,7 @@ import { diagram } from "./builder";
 import type { DiagramBuilder } from "./builder";
 import { LANE_PAD_MIN, NODE_SIZE } from "./layout/tokens";
 import { requiredRowsWidth } from "./kinds/row-align";
-import type { NodeKind, Tone, EdgeStyle } from "./types";
+import type { NodeKind, Tone, EdgeStyle, JourneyEmotion, QuadrantKey } from "./types";
 
 /**
  * 図の格子の目 (world unit)。 `grid-alignment` (軸 21) が見る単位と同じ。
@@ -1126,7 +1126,9 @@ export function tree(preset: TreePreset): TreeBuilder {
 
 // ─── userJourney (step + emotion + touchpoint) ────────────────
 
-export type JourneyEmotion = "delighted" | "happy" | "neutral" | "frustrated" | "angry";
+// 気持ちの 5 段階は描画側 (`types.ts`) が持つものを使う。 同じ並びを 2 箇所に書くと、
+// 段階を足した時に片方だけが古いまま残る。
+export type { JourneyEmotion } from "./types";
 
 export type JourneyStep = {
   id: string;
@@ -1367,7 +1369,9 @@ export function funnel(preset: FunnelPreset): FunnelBuilder {
 
 // ─── quadrant (2 軸 マトリクス) ────────────────────────────────
 
-export type QuadrantQuadrantLabel = "topLeft" | "topRight" | "bottomLeft" | "bottomRight";
+// 象限 4 種も描画側 (`types.ts` の `QuadrantKey`) が持つものを使う。 名前は既に公開して
+// いるため残す。
+export type QuadrantQuadrantLabel = QuadrantKey;
 
 export type QuadrantItem = {
   id: string;
@@ -2001,103 +2005,6 @@ export function stateMachine2(preset: StateMachine2Preset): StateMachine2Builder
   return api;
 }
 
-// ─── mindMapRadial (中心 topic + 8 方向 45 度間隔 放射) ─────────
-
-export type MindMapRadialBranch = {
-  id: string;
-  title: string;
-  /** 色 tone (default は defaultTone)。 8 方向で auto rotate も可 */
-  tone?: Tone;
-  subtitle?: string;
-};
-
-export type MindMapRadialPreset = {
-  id: string;
-  topic: string;
-  /** 中心 node の title (id は builder が "center" で内部生成) */
-  centerTitle: string;
-  /** 中心 node の id override (default "center") */
-  centerId?: string;
-  /** 中心から branch までの距離 (world coord、 default 350) */
-  radius?: number;
-  /** branch node の width (default 260) */
-  branchWidth?: number;
-  /** 中心 node の width (default 260) */
-  centerWidth?: number;
-  defaultTone?: Tone;
-};
-
-export type MindMapRadialBuilder = {
-  branch: (b: MindMapRadialBranch) => MindMapRadialBuilder;
-  build: () => ReturnType<DiagramBuilder["build"]>;
-};
-
-/**
- * mindMapRadial preset ... 中心 node を軸に 8 方向 (0°/45°/90°/135°/180°/225°/270°/315°)
- * へ branch を放射状に配置する。 現行 mindMap (左から右へ水平 tree) と使い分ける用途。
- *
- * 実装戦略 ... engine の lane × stack grid を活用し、 3 lane (left / center / right) を
- * radius に基づき explicit x で配置、 3 stack row (top / middle / bottom) を stack index 0/1/2 で
- * 割当てる。 branch 順は position 順 (E/SE/S/SW/W/NW/N/NE) に固定し、 index → grid cell mapping。
- *
- * @example
- * mindMapRadial({ id: "mr", topic: "Product Radial", centerTitle: "Product" })
- *   .branch({ id: "users", title: "Users" })      // 0° (right)
- *   .branch({ id: "road", title: "Roadmap" })     // 45° (bottom-right)
- *   .branch({ id: "metrics", title: "Metrics" })  // 90° (bottom)
- *   ...
- *   .build();
- */
-export function mindMapRadial(preset: MindMapRadialPreset): MindMapRadialBuilder {
-  const centerId = preset.centerId ?? "center";
-  const canvasW = 640;
-  const canvasH = 640;
-  const b = diagram(preset.id, { topic: preset.topic });
-  const branches: MindMapRadialBranch[] = [];
-
-  const api: MindMapRadialBuilder = {
-    branch(br) {
-      if (branches.length >= 8) {
-        throw new Error(`cdl mindMapRadial: 8 方向配置のため branch は最大 8 件 (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 全 branch を visible 化、 中心 + 8 方向 45 度で描画。" },
-        (p) => p.activate(nodeId).badge("mindmap-radial"),
-      );
-      return b.build();
-    },
-  };
-
-  return api;
-}
-
 // ─── helper ────────────────────────────────────────────────────
 
 function slugify(s: string): string {

package/src/render/derived-values.ts

@@ -0,0 +1,261 @@
+import type { FormulaAst } from "../formula/ast";
+import { evaluate } from "../formula/evaluator";
+import { extractIdentifiers, parseFormula } from "../formula/parser";
+import { isValidTemplateName } from "../template-name";
+import type { CdlDerivedValue } from "../types";
+
+/**
+ * 他の値から自動で決まる値を解く層 (cdl#453 / dragon#1161 段 1)。
+ *
+ * 段 (`animation`) が動かす値を出した後に、 参照の関係から順序を決めて式を評価する。
+ * 段の補間中も毎 frame ここを通るため、 掛け算 / 割り算 / 比較 / `min` / `max` のような
+ * 端点 2 点では表せない関係も途中の値が正しくなる。
+ *
+ * 止まった値は結果に載せない。 載せなければ図には `{名前}` が残り、 読み手
+ * (`resolveNumericAttr` / `payload-binding` / `visibleIf`) が既に持っている
+ * 「解決できていない」 の扱いにそのまま乗る。 伝えるための経路を新設しない。
+ *
+ * ただし同じ名前が `states` にもある場合は、 段が出した初期値をそのまま残す
+ * (「まだ計算されていない間の値」 として使う)。
+ */
+
+/** 値が止まった理由。 呼び出し側が伝え方を決められるように種類を分けておく */
+export type DerivedNoticeKind =
+  | "cycle"
+  | "unknown-reference"
+  | "parse-error"
+  | "eval-error"
+  | "duplicate-id"
+  | "invalid-id";
+
+export type DerivedNotice = {
+  /** 止まった値の名前 */
+  id: string;
+  kind: DerivedNoticeKind;
+  message: string;
+};
+
+export type DerivedResult = {
+  /** 段の値に、 解けた値を足したもの */
+  values: Record<string, string>;
+  /** 止まった値。 解けた値しか無ければ空 */
+  notices: DerivedNotice[];
+};
+
+/** 構文解析の結果を式ごとに使い回す。 毎 frame 解き直すと項目数に比例して重くなる */
+type ParsedEntry = { id: string; ast: FormulaAst; refs: ReadonlySet<string> };
+type ParsePhase = { entries: ParsedEntry[]; notices: DerivedNotice[]; cyclic: string[]; stamp: string };
+const parseCache = new WeakMap<readonly CdlDerivedValue[], ParsePhase>();
+
+/**
+ * 宣言の中身を表す印。 cache が今の中身のものかを確かめるために使う。
+ *
+ * 同じ配列を書き換える形 (`derived.push(...)` / 式の差し替え) では参照が変わらないため、
+ * 参照だけを鍵にすると古い解析結果を返し続ける。 中身の比較は宣言数に比例するだけで、
+ * 構文解析をやり直すのに比べれば桁違いに軽い。
+ */
+function contentStamp(derived: readonly CdlDerivedValue[]): string {
+  // 長さを先に置くので、 区切り文字が名前や式に現れても境界は曖昧にならない
+  // (区切りだけに頼ると `a|b` という名前と `a` / `b` の 2 件が同じ印になる)
+  return derived.map((d) => `${d.id.length}:${d.id}|${d.expression.length}:${d.expression}`).join("|");
+}
+
+/**
+ * 段の値に、 他の値から決まる値を足して返す。
+ *
+ * 宣言が無ければ受け取った値をそのまま返す (同じ object をそのまま返すので、
+ * 宣言を持たない図は追加の割当てを 1 つも払わない)。
+ */
+export function applyDerivedValues(
+  base: Record<string, string>,
+  derived: readonly CdlDerivedValue[] | undefined,
+): DerivedResult {
+  if (!derived || derived.length === 0) return { values: base, notices: [] };
+
+  // 構文解析と順序解決は式の中身だけで決まり、 値には依存しない。 毎 frame やり直さず
+  // 宣言ごとに 1 度だけ行う (項目数に比例して重くなるのを避ける、 Issue の破れる条件)
+  const phase = parseAndOrder(derived);
+  // 継承を持たない入れ物に移す。 通常の object だと `constructor` / `__proto__` のような
+  // 名前が「値が無い」 と区別できず、 読み手が prototype の中身を図に出す
+  // (実測 = `{constructor}` が `function Object() { [native code] }` として描かれた)。
+  // `__proto__` は代入自体が無視されるので、 値を入れたのに読めない形にもなる。
+  const values: Record<string, string> = Object.assign(Object.create(null), base);
+  const notices: DerivedNotice[] = [...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 };
+}
+
+/**
+ * 式が読む名前を返す。 読めない式は空 (その値は評価時に止まるので何も読まない)。
+ *
+ * **式の参照はここで取る**。 `templateRefIds` は `{名前}` しか拾わないが、 式は素の
+ * 識別子 (`inflow + 1`) も読めるため、 検証側が `templateRefIds` を使うと評価側と
+ * 食い違う (実際は読まれている状態が unused と報告される)。
+ */
+export function derivedRefIds(expression: string): string[] {
+  try {
+    return [...extractIdentifiers(parseFormula(expression))];
+  } catch {
+    return [];
+  }
+}
+
+/** 段の値に、 他の値から決まる値を足した record だけを返す (伝える情報が要らない呼び出し用) */
+export function withDerivedValues(
+  base: Record<string, string>,
+  derived: readonly CdlDerivedValue[] | undefined,
+): Record<string, string> {
+  return applyDerivedValues(base, derived).values;
+}
+
+/** 構文解析と順序解決。 宣言ごとに 1 度だけ行い、 結果を使い回す */
+function parseAndOrder(derived: readonly CdlDerivedValue[]): ParsePhase {
+  const stamp = contentStamp(derived);
+  const cached = parseCache.get(derived);
+  if (cached && cached.stamp === stamp) return cached;
+
+  const notices: DerivedNotice[] = [];
+  const seen = new Set<string>();
+  const parsed: ParsedEntry[] = [];
+
+  for (const d of derived) {
+    if (seen.has(d.id)) {
+      // 同じ名前を 2 度書いた形。 先に書いた方を残す (後勝ちにすると、 打ち間違いで
+      // 上書きされた値が黙って消える)
+      notices.push({
+        id: d.id,
+        kind: "duplicate-id",
+        message: `"${d.id}" が 2 度宣言されている。 先に書いた式を使う`,
+      });
+      continue;
+    }
+    seen.add(d.id);
+    // 名前は式の中と同じ規則に従う。 id 側だけ素通りさせると、 解けてもどの箱からも
+    // 読めない値ができる (`{a.b}` は `.` が accessor の始まりなので読み手が拾えない)
+    if (!isValidTemplateName(d.id)) {
+      notices.push({
+        id: d.id,
+        kind: "invalid-id",
+        message: `"${d.id}" は名前として使えない (英数字と _ のみ)。 読み手が拾えないため止めた`,
+      });
+      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}" の式を読めない: ${e instanceof Error ? e.message : String(e)}`,
+      });
+    }
+  }
+
+  const { order, cyclic } = topoSort(parsed);
+  for (const id of cyclic) {
+    notices.push({
+      id,
+      kind: "cycle",
+      message: `"${id}" は参照を辿ると自分に戻るため止めた (輪に入っていない値は動く)`,
+    });
+  }
+
+  const phase: ParsePhase = { entries: order, notices, cyclic, stamp };
+  parseCache.set(derived, phase);
+  return phase;
+}
+
+/**
+ * 参照の関係から評価順を決める。 輪に入った値だけを外す。
+ *
+ * 宣言の外にある名前 (`states` や入力欄の値) への参照は葉として扱い、 順序には関わらない。
+ * 輪を見つけたら、 いま辿っている道のうち戻り先から先の全員を輪の一員として外す
+ * (見つけた 1 つだけを外すと、 残りが「存在しない名前を参照している」 として報告され、
+ * 本当の原因が輪であることが読み取れない)。
+ */
+function topoSort(entries: ParsedEntry[]): { order: ParsedEntry[]; cyclic: string[] } {
+  const byId = new Map(entries.map((e) => [e.id, e]));
+  const state = new Map<string, "visiting" | "done">();
+  const order: ParsedEntry[] = [];
+  const cyclic = new Set<string>();
+  const path: string[] = [];
+
+  const visit = (entry: ParsedEntry): void => {
+    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");
+    // 輪の一員だと分かるのは自分を order に積む前なので、 ここで確かめれば取りこぼさない
+    if (!cyclic.has(entry.id)) order.push(entry);
+  };
+
+  for (const e of entries) visit(e);
+
+  // 輪の中の値を参照しているだけの値は外さない。 参照先が結果に載らないので評価時に止まり、
+  // 「自分が輪に入っている」 のと「輪に入った値を読んでいる」 のを分けて報告できる
+  return { order, cyclic: [...cyclic] };
+}
+
+type EvalOutcome =
+  | { ok: true; value: string }
+  | { ok: false; kind: "unknown-reference" | "eval-error"; message: string };
+
+/** 参照先が無いことを他の失敗と区別するための印 */
+class MissingReferenceError extends Error {}
+
+function evaluateOne(entry: ParsedEntry, values: Record<string, string>): EvalOutcome {
+  const resolver = (name: string): number => {
+    // 自分が持つ名前だけを見る。 継承を辿ると `constructor` 等が「値がある」 と読める
+    const raw = Object.hasOwn(values, name) ? values[name] : undefined;
+    if (raw === undefined) throw new MissingReferenceError(`"${name}" という値が無い`);
+    const trimmed = raw.trim();
+    const num = Number(trimmed);
+    // 空文字を弾いてから数に直す。 `Number("")` は 0 を返すので、 弾かないと
+    // 「値が無い」 と「0 と書いてある」 を区別できない
+    if (trimmed === "" || !Number.isFinite(num)) {
+      throw new Error(`"${name}" の値 "${raw}" は数として読めない`);
+    }
+    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}" を止めた: 結果が数にならなかった`,
+      };
+    }
+    // 比較の結果は真 = 1 / 偽 = 0 の数として載せる。 "true" のまま載せると、
+    // 数として読む側 (`resolveNumericAttr` 等) が全て既定値に落ちる
+    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}" を止めた: ${detail}` };
+  }
+}