@cardenelabs/cdl 0.5.0 → 0.6.0

package/dist/{render-C78lIXeC.d.cts → render-DquCvgOB.d.cts}

@@ -33,7 +33,7 @@ declare function computed<T>(fn: () => T): Computed<T>;
 declare const TONES: readonly ["accent", "teal", "success", "error", "warning", "info"];
 type Tone = (typeof TONES)[number];
 /** 描画できる箱の種類。 検査・記法一覧・型はこの 1 つの列を出所にする。 */
-declare const NODE_KINDS: readonly ["dyn-rect", "dyn-circle", "dyn-arc", "dyn-wave", "dyn-polygon", "actor", "function", "storage", "event", "card", "person", "user-group", "admin", "developer", "external-user", "database", "cache", "queue", "message-bus", "cloud", "cdn", "service", "api", "frontend", "backend", "webhook", "microservice", "signer", "oracle", "merkle-tree", "decision", "chart-pie", "chart-line", "chart-bar", "gantt-timeline", "mind-map", "mind-radial", "funnel-stages", "quadrant-matrix", "tree-hierarchy", "journey-map", "shape-file", "shape-folder", "shape-cloud", "shape-cylinder", "shape-hexagon", "shape-diamond", "shape-stack", "shape-person", "shape-window", "shape-terminal", "shape-code-block", "shape-kanban-card", "shape-message-bubble", "shape-gear", "shape-server-rack", "shape-network-node", "shape-mobile-device", "shape-iot-sensor", "shape-robot-arm", "shape-satellite", "shape-smart-contract", "shape-blockchain-block", "shape-rpc-node", "shape-wallet", "shape-nft", "shape-token", "shape-blockchain", "shape-bitcoin-chain", "shape-ethereum-chain", "shape-blockchain-node", "shape-bank", "shape-trust-bank", "shape-payment-provider", "shape-credit-card", "shape-brokerage", "shape-exchange", "shape-atm", "shape-website", "shape-storefront", "shape-warehouse", "shape-online-shop", "shape-cdn-edge", "shape-api-gateway", "shape-auditor", "shape-regulator", "shape-notary", "shape-lawyer", "shape-trader", "shape-customer-service"];
+declare const NODE_KINDS: readonly ["dyn-rect", "dyn-circle", "dyn-arc", "dyn-wave", "dyn-polygon", "actor", "function", "storage", "event", "card", "person", "user-group", "admin", "developer", "external-user", "database", "cache", "queue", "message-bus", "cloud", "cdn", "service", "api", "frontend", "backend", "webhook", "microservice", "signer", "oracle", "merkle-tree", "decision", "chart-pie", "chart-line", "chart-bar", "gantt-timeline", "mind-map", "funnel-stages", "quadrant-matrix", "tree-hierarchy", "journey-map", "shape-file", "shape-folder", "shape-cloud", "shape-cylinder", "shape-hexagon", "shape-diamond", "shape-stack", "shape-person", "shape-window", "shape-terminal", "shape-code-block", "shape-kanban-card", "shape-message-bubble", "shape-gear", "shape-server-rack", "shape-network-node", "shape-mobile-device", "shape-iot-sensor", "shape-robot-arm", "shape-satellite", "shape-smart-contract", "shape-blockchain-block", "shape-rpc-node", "shape-wallet", "shape-nft", "shape-token", "shape-blockchain", "shape-bitcoin-chain", "shape-ethereum-chain", "shape-blockchain-node", "shape-bank", "shape-trust-bank", "shape-payment-provider", "shape-credit-card", "shape-brokerage", "shape-exchange", "shape-atm", "shape-website", "shape-storefront", "shape-warehouse", "shape-online-shop", "shape-cdn-edge", "shape-api-gateway", "shape-auditor", "shape-regulator", "shape-notary", "shape-lawyer", "shape-trader", "shape-customer-service"];
 type NodeKind = (typeof NODE_KINDS)[number];
 type Side = "top" | "right" | "bottom" | "left";
 /**
@@ -209,8 +209,8 @@ type CdlNode = {
      */
     ganttData?: GanttTaskPayload[];
     /**
-     * mind-map / mind-radial 専用の branch payload。 tree 構造を 1 node に格納し、
-     * kinds/mind-map.tsx / mind-radial.tsx が中心 + 放射で SVG 描画する。
+     * mind-map 専用の branch payload。 tree 構造を 1 node に格納し、
+     * kinds/mind-map.tsx が中心 + 放射で SVG 描画する。
      */
     mindData?: MindBranchPayload;
     /** funnel-stages 専用の stage 配列 payload、 逆三角形 stage 描画に使う */
@@ -222,20 +222,41 @@ type CdlNode = {
     /** journey-map 専用の step 配列 payload、 感情曲線 + touchpoint 描画に使う */
     journeyData?: JourneyStepPayload[];
 };
+/**
+ * 図表 payload の数値欄。 数を直接書くか、 `{signal}` を書いて状態から読む。
+ *
+ * 文字列を許すのは、 図表が状態を読む唯一の経路だから (`render/payload-binding.ts` が
+ * 描画直前に stateValues で解決する)。 **解決できない欄でも項目は落とさず**、 既定値で
+ * 描いて `data-cdl-unresolved="true"` を付ける (落とすと配列の長さが変わって図の形が
+ * 別物になる)。
+ *
+ * 既定値は欄ごとに違う。 数の欄は 0 だが、 `gantt-timeline` の終端は自分の始端
+ * (0 にすると帯が軸の左端まで伸びて別の図に見える)、 `quadrant-matrix` は左下、
+ * `journey-map` は「普通」。 いずれも `render/payload-binding.ts` が持つ。
+ */
+type BoundNumber = number | string;
+/**
+ * 図表 payload の語の欄。 決まった語を直接書くか、 `{signal}` を書いて状態から読む。
+ *
+ * `(string & {})` は「決まった語の候補を出しつつ任意の文字列も許す」 ための書き方。
+ * 素の `string` と union すると候補が消えるため、 補完を残す目的で挟んでいる。
+ */
+type BoundEnum<T extends string> = T | (string & {});
 /** Chart 系 kind の 1 datum payload。 label + value + optional tone (color) */
 type ChartDatumPayload = {
     label: string;
-    value: number;
+    /** 棒 / 折れ線 / 扇の大きさ。 `{signal}` で状態に追随する */
+    value: BoundNumber;
     tone?: Tone;
 };
 /** gantt-timeline kind の 1 task payload。 label + start/end + owner + dependsOn */
 type GanttTaskPayload = {
     id: string;
     title: string;
-    /** 開始 index (0-based 相対位置) */
-    startIdx: number;
-    /** 終了 index (0-based 相対位置、 startIdx と同じなら 1 cell 幅) */
-    endIdx: number;
+    /** 開始 index (0-based 相対位置)。 `{signal}` で状態に追随する */
+    startIdx: BoundNumber;
+    /** 終了 index (0-based 相対位置、 startIdx と同じなら 1 cell 幅)。 `{signal}` 可 */
+    endIdx: BoundNumber;
     /** 開始 label (例 "Q1" / "2026-01") */
     startLabel: string;
     /** 終了 label (例 "Q2" / "2026-03") */
@@ -244,7 +265,7 @@ type GanttTaskPayload = {
     dependsOn?: string;
     tone?: Tone;
 };
-/** mind-map / mind-radial kind の branch tree payload。 rootId + branch 配列 */
+/** mind-map kind の branch tree payload。 rootId + branch 配列 */
 type MindBranchPayload = {
     rootId: string;
     rootTitle: string;
@@ -262,7 +283,8 @@ type MindBranchNode = {
 type FunnelStagePayload = {
     id: string;
     title: string;
-    count: number;
+    /** 段の人数 / 件数。 `{signal}` で状態に追随する */
+    count: BoundNumber;
     subtitle?: string;
 };
 /** quadrant-matrix kind の 2 軸 + item 配列 payload */
@@ -283,11 +305,14 @@ type QuadrantPayload = {
     };
     items: QuadrantItemPayload[];
 };
+/** quadrant-matrix の象限 4 種 */
+type QuadrantKey = "topLeft" | "topRight" | "bottomLeft" | "bottomRight";
 /** quadrant-matrix の 1 item payload */
 type QuadrantItemPayload = {
     id: string;
     title: string;
-    quadrant: "topLeft" | "topRight" | "bottomLeft" | "bottomRight";
+    /** どの象限に居るか。 `{signal}` を書くと項目が象限を移る */
+    quadrant: BoundEnum<QuadrantKey>;
     subtitle?: string;
 };
 /** tree-hierarchy kind の 1 node payload */
@@ -298,12 +323,14 @@ type TreeNodePayload = {
     subtitle?: string;
     eyebrow?: string;
 };
+/** journey-map の気持ち 5 段階 */
+type JourneyEmotion = "delighted" | "happy" | "neutral" | "frustrated" | "angry";
 /** journey-map kind の 1 step payload */
 type JourneyStepPayload = {
     id: string;
     title: string;
-    /** emotion 5 段階 (delighted / happy / neutral / frustrated / angry) */
-    emotion: "delighted" | "happy" | "neutral" | "frustrated" | "angry";
+    /** emotion 5 段階 (delighted / happy / neutral / frustrated / angry)。 `{signal}` で動く */
+    emotion: BoundEnum<JourneyEmotion>;
     touchpoint?: string;
     opportunity?: string;
 };
@@ -2128,6 +2155,13 @@ type CdlDiagram = {
      * 省略時は空 array 相当で下位互換。
      */
     readouts?: CdlReadout[];
+    /**
+     * 他の値から自動で決まる値。 段の補間中も毎 frame 決まり直す (`computeStateValues`)。
+     *
+     * 入力欄の式 (`formulas`) とは経路が別。 あちらは入力欄の signal を読む reactive graph に
+     * 載り、 こちらは段が動かす状態を読む。 省略時は空 array 相当で下位互換。
+     */
+    derived?: CdlDerivedValue[];
     lanes: CdlLane[];
     nodes: CdlNode[];
     edges: CdlEdge[];
@@ -2136,6 +2170,21 @@ type CdlDiagram = {
     /** v0.5+ ... canvas 全体仕様 (viewport.width / height で全体 size を author が宣言) */
     viewport?: CdlViewport;
 };
+/**
+ * 他の値から自動で決まる値の宣言。
+ *
+ * 式は `{名前}` で他の値 (`states` / 他の `derived`) を読み、 四則 / 括弧 / 比較 /
+ * `min` / `max` が書ける。 比較の結果は真 = 1 / 偽 = 0 の数として載る。
+ *
+ * 書いた順は結果に影響しない (参照から順序を解く)。 解けない値 (輪 / 存在しない名前 /
+ * 0 除算 / 数でない値) はその値だけ止まり、 残りは動く。
+ */
+type CdlDerivedValue = {
+    /** 値の名前。 図からは `{名前}` で読む */
+    id: string;
+    /** 式。 例 `"{inflow} - {done}"` */
+    expression: string;
+};
 /** Canvas 全体仕様 (v0.5+ syntax `viewport: { width, height, scale, gap, laneGap, nodeGap, labelMargin }`)。
  * 未指定時は layout が node 配置から自動算出する従来挙動。
  *
@@ -2279,6 +2328,8 @@ type LaidDiagram = {
     edges: LaidEdge[];
     states: CdlState[];
     phases: CdlPhase[];
+    /** 他の値から自動で決まる値 (`CdlDiagram.derived` をそのまま引き継ぐ) */
+    derived?: CdlDerivedValue[];
     /**
      * キャンバス全要素の bounding box list。
      * engine が「ここに何があるか」 を全部把握、 衝突検証 / debug 表示 / validation で使う。
@@ -2446,4 +2497,4 @@ type CdlDiagramViewProps = {
 };
 declare function CdlDiagramView({ diagram, laid: laidProp, hideHeader, hideMiniPhaseIndicator, focusPhaseId, debug, emitGeometryWarn, headingLevel, interactiveHandlers }: CdlDiagramViewProps): JSX.Element;
 
-export { computed as A, type BBox as B, type CdlDiagram as C, createInteractiveSignalsAccessor as D, type EdgeStyle as E, createScrollProgressHandle as F, createScrollProgressSignals as G, hasInteractivePrimitives as H, type InteractiveHandlerMap as I, signal as J, type LaidDiagram as L, type NodeKind as N, type Signal as S, type Tone as T, type CdlInput as a, type CdlLane as b, type CdlNode as c, type Side as d, type CdlState as e, type CdlEventTarget as f, type Computed as g, type CdlScrollTrigger as h, type CdlDiagramViewProps as i, type LaidEdge as j, type LaidNode as k, type CdlEdge as l, CdlDiagramView as m, type CdlEventBinding as n, type CdlEventKind as o, type CdlFormula as p, type CdlPhase as q, type InteractiveSignalsAccessor as r, type LaidLane as s, NODE_KINDS as t, type ScrollProgressHandle as u, TONES as v, computeEventBindingKey as w, computeFormulaKey as x, computeInputSignalKey as y, computeScrollTriggerKey as z };
+export { computeScrollTriggerKey as A, type BBox as B, type CdlDiagram as C, computed as D, type EdgeStyle as E, createInteractiveSignalsAccessor as F, createScrollProgressHandle as G, createScrollProgressSignals as H, type InteractiveHandlerMap as I, type JourneyEmotion as J, hasInteractivePrimitives as K, type LaidDiagram as L, signal as M, type NodeKind as N, type QuadrantKey as Q, type Signal as S, type Tone as T, type CdlInput as a, type CdlLane as b, type CdlNode as c, type Side as d, type CdlState as e, type CdlEventTarget as f, type Computed as g, type CdlDerivedValue as h, type CdlScrollTrigger as i, type CdlDiagramViewProps as j, type LaidEdge as k, type LaidNode as l, type CdlEdge as m, CdlDiagramView as n, type CdlEventBinding as o, type CdlEventKind as p, type CdlFormula as q, type CdlPhase as r, type InteractiveSignalsAccessor as s, type LaidLane as t, NODE_KINDS as u, type ScrollProgressHandle as v, TONES as w, computeEventBindingKey as x, computeFormulaKey as y, computeInputSignalKey as z };

package/dist/{render-C78lIXeC.d.ts → render-DquCvgOB.d.ts}

@@ -33,7 +33,7 @@ declare function computed<T>(fn: () => T): Computed<T>;
 declare const TONES: readonly ["accent", "teal", "success", "error", "warning", "info"];
 type Tone = (typeof TONES)[number];
 /** 描画できる箱の種類。 検査・記法一覧・型はこの 1 つの列を出所にする。 */
-declare const NODE_KINDS: readonly ["dyn-rect", "dyn-circle", "dyn-arc", "dyn-wave", "dyn-polygon", "actor", "function", "storage", "event", "card", "person", "user-group", "admin", "developer", "external-user", "database", "cache", "queue", "message-bus", "cloud", "cdn", "service", "api", "frontend", "backend", "webhook", "microservice", "signer", "oracle", "merkle-tree", "decision", "chart-pie", "chart-line", "chart-bar", "gantt-timeline", "mind-map", "mind-radial", "funnel-stages", "quadrant-matrix", "tree-hierarchy", "journey-map", "shape-file", "shape-folder", "shape-cloud", "shape-cylinder", "shape-hexagon", "shape-diamond", "shape-stack", "shape-person", "shape-window", "shape-terminal", "shape-code-block", "shape-kanban-card", "shape-message-bubble", "shape-gear", "shape-server-rack", "shape-network-node", "shape-mobile-device", "shape-iot-sensor", "shape-robot-arm", "shape-satellite", "shape-smart-contract", "shape-blockchain-block", "shape-rpc-node", "shape-wallet", "shape-nft", "shape-token", "shape-blockchain", "shape-bitcoin-chain", "shape-ethereum-chain", "shape-blockchain-node", "shape-bank", "shape-trust-bank", "shape-payment-provider", "shape-credit-card", "shape-brokerage", "shape-exchange", "shape-atm", "shape-website", "shape-storefront", "shape-warehouse", "shape-online-shop", "shape-cdn-edge", "shape-api-gateway", "shape-auditor", "shape-regulator", "shape-notary", "shape-lawyer", "shape-trader", "shape-customer-service"];
+declare const NODE_KINDS: readonly ["dyn-rect", "dyn-circle", "dyn-arc", "dyn-wave", "dyn-polygon", "actor", "function", "storage", "event", "card", "person", "user-group", "admin", "developer", "external-user", "database", "cache", "queue", "message-bus", "cloud", "cdn", "service", "api", "frontend", "backend", "webhook", "microservice", "signer", "oracle", "merkle-tree", "decision", "chart-pie", "chart-line", "chart-bar", "gantt-timeline", "mind-map", "funnel-stages", "quadrant-matrix", "tree-hierarchy", "journey-map", "shape-file", "shape-folder", "shape-cloud", "shape-cylinder", "shape-hexagon", "shape-diamond", "shape-stack", "shape-person", "shape-window", "shape-terminal", "shape-code-block", "shape-kanban-card", "shape-message-bubble", "shape-gear", "shape-server-rack", "shape-network-node", "shape-mobile-device", "shape-iot-sensor", "shape-robot-arm", "shape-satellite", "shape-smart-contract", "shape-blockchain-block", "shape-rpc-node", "shape-wallet", "shape-nft", "shape-token", "shape-blockchain", "shape-bitcoin-chain", "shape-ethereum-chain", "shape-blockchain-node", "shape-bank", "shape-trust-bank", "shape-payment-provider", "shape-credit-card", "shape-brokerage", "shape-exchange", "shape-atm", "shape-website", "shape-storefront", "shape-warehouse", "shape-online-shop", "shape-cdn-edge", "shape-api-gateway", "shape-auditor", "shape-regulator", "shape-notary", "shape-lawyer", "shape-trader", "shape-customer-service"];
 type NodeKind = (typeof NODE_KINDS)[number];
 type Side = "top" | "right" | "bottom" | "left";
 /**
@@ -209,8 +209,8 @@ type CdlNode = {
      */
     ganttData?: GanttTaskPayload[];
     /**
-     * mind-map / mind-radial 専用の branch payload。 tree 構造を 1 node に格納し、
-     * kinds/mind-map.tsx / mind-radial.tsx が中心 + 放射で SVG 描画する。
+     * mind-map 専用の branch payload。 tree 構造を 1 node に格納し、
+     * kinds/mind-map.tsx が中心 + 放射で SVG 描画する。
      */
     mindData?: MindBranchPayload;
     /** funnel-stages 専用の stage 配列 payload、 逆三角形 stage 描画に使う */
@@ -222,20 +222,41 @@ type CdlNode = {
     /** journey-map 専用の step 配列 payload、 感情曲線 + touchpoint 描画に使う */
     journeyData?: JourneyStepPayload[];
 };
+/**
+ * 図表 payload の数値欄。 数を直接書くか、 `{signal}` を書いて状態から読む。
+ *
+ * 文字列を許すのは、 図表が状態を読む唯一の経路だから (`render/payload-binding.ts` が
+ * 描画直前に stateValues で解決する)。 **解決できない欄でも項目は落とさず**、 既定値で
+ * 描いて `data-cdl-unresolved="true"` を付ける (落とすと配列の長さが変わって図の形が
+ * 別物になる)。
+ *
+ * 既定値は欄ごとに違う。 数の欄は 0 だが、 `gantt-timeline` の終端は自分の始端
+ * (0 にすると帯が軸の左端まで伸びて別の図に見える)、 `quadrant-matrix` は左下、
+ * `journey-map` は「普通」。 いずれも `render/payload-binding.ts` が持つ。
+ */
+type BoundNumber = number | string;
+/**
+ * 図表 payload の語の欄。 決まった語を直接書くか、 `{signal}` を書いて状態から読む。
+ *
+ * `(string & {})` は「決まった語の候補を出しつつ任意の文字列も許す」 ための書き方。
+ * 素の `string` と union すると候補が消えるため、 補完を残す目的で挟んでいる。
+ */
+type BoundEnum<T extends string> = T | (string & {});
 /** Chart 系 kind の 1 datum payload。 label + value + optional tone (color) */
 type ChartDatumPayload = {
     label: string;
-    value: number;
+    /** 棒 / 折れ線 / 扇の大きさ。 `{signal}` で状態に追随する */
+    value: BoundNumber;
     tone?: Tone;
 };
 /** gantt-timeline kind の 1 task payload。 label + start/end + owner + dependsOn */
 type GanttTaskPayload = {
     id: string;
     title: string;
-    /** 開始 index (0-based 相対位置) */
-    startIdx: number;
-    /** 終了 index (0-based 相対位置、 startIdx と同じなら 1 cell 幅) */
-    endIdx: number;
+    /** 開始 index (0-based 相対位置)。 `{signal}` で状態に追随する */
+    startIdx: BoundNumber;
+    /** 終了 index (0-based 相対位置、 startIdx と同じなら 1 cell 幅)。 `{signal}` 可 */
+    endIdx: BoundNumber;
     /** 開始 label (例 "Q1" / "2026-01") */
     startLabel: string;
     /** 終了 label (例 "Q2" / "2026-03") */
@@ -244,7 +265,7 @@ type GanttTaskPayload = {
     dependsOn?: string;
     tone?: Tone;
 };
-/** mind-map / mind-radial kind の branch tree payload。 rootId + branch 配列 */
+/** mind-map kind の branch tree payload。 rootId + branch 配列 */
 type MindBranchPayload = {
     rootId: string;
     rootTitle: string;
@@ -262,7 +283,8 @@ type MindBranchNode = {
 type FunnelStagePayload = {
     id: string;
     title: string;
-    count: number;
+    /** 段の人数 / 件数。 `{signal}` で状態に追随する */
+    count: BoundNumber;
     subtitle?: string;
 };
 /** quadrant-matrix kind の 2 軸 + item 配列 payload */
@@ -283,11 +305,14 @@ type QuadrantPayload = {
     };
     items: QuadrantItemPayload[];
 };
+/** quadrant-matrix の象限 4 種 */
+type QuadrantKey = "topLeft" | "topRight" | "bottomLeft" | "bottomRight";
 /** quadrant-matrix の 1 item payload */
 type QuadrantItemPayload = {
     id: string;
     title: string;
-    quadrant: "topLeft" | "topRight" | "bottomLeft" | "bottomRight";
+    /** どの象限に居るか。 `{signal}` を書くと項目が象限を移る */
+    quadrant: BoundEnum<QuadrantKey>;
     subtitle?: string;
 };
 /** tree-hierarchy kind の 1 node payload */
@@ -298,12 +323,14 @@ type TreeNodePayload = {
     subtitle?: string;
     eyebrow?: string;
 };
+/** journey-map の気持ち 5 段階 */
+type JourneyEmotion = "delighted" | "happy" | "neutral" | "frustrated" | "angry";
 /** journey-map kind の 1 step payload */
 type JourneyStepPayload = {
     id: string;
     title: string;
-    /** emotion 5 段階 (delighted / happy / neutral / frustrated / angry) */
-    emotion: "delighted" | "happy" | "neutral" | "frustrated" | "angry";
+    /** emotion 5 段階 (delighted / happy / neutral / frustrated / angry)。 `{signal}` で動く */
+    emotion: BoundEnum<JourneyEmotion>;
     touchpoint?: string;
     opportunity?: string;
 };
@@ -2128,6 +2155,13 @@ type CdlDiagram = {
      * 省略時は空 array 相当で下位互換。
      */
     readouts?: CdlReadout[];
+    /**
+     * 他の値から自動で決まる値。 段の補間中も毎 frame 決まり直す (`computeStateValues`)。
+     *
+     * 入力欄の式 (`formulas`) とは経路が別。 あちらは入力欄の signal を読む reactive graph に
+     * 載り、 こちらは段が動かす状態を読む。 省略時は空 array 相当で下位互換。
+     */
+    derived?: CdlDerivedValue[];
     lanes: CdlLane[];
     nodes: CdlNode[];
     edges: CdlEdge[];
@@ -2136,6 +2170,21 @@ type CdlDiagram = {
     /** v0.5+ ... canvas 全体仕様 (viewport.width / height で全体 size を author が宣言) */
     viewport?: CdlViewport;
 };
+/**
+ * 他の値から自動で決まる値の宣言。
+ *
+ * 式は `{名前}` で他の値 (`states` / 他の `derived`) を読み、 四則 / 括弧 / 比較 /
+ * `min` / `max` が書ける。 比較の結果は真 = 1 / 偽 = 0 の数として載る。
+ *
+ * 書いた順は結果に影響しない (参照から順序を解く)。 解けない値 (輪 / 存在しない名前 /
+ * 0 除算 / 数でない値) はその値だけ止まり、 残りは動く。
+ */
+type CdlDerivedValue = {
+    /** 値の名前。 図からは `{名前}` で読む */
+    id: string;
+    /** 式。 例 `"{inflow} - {done}"` */
+    expression: string;
+};
 /** Canvas 全体仕様 (v0.5+ syntax `viewport: { width, height, scale, gap, laneGap, nodeGap, labelMargin }`)。
  * 未指定時は layout が node 配置から自動算出する従来挙動。
  *
@@ -2279,6 +2328,8 @@ type LaidDiagram = {
     edges: LaidEdge[];
     states: CdlState[];
     phases: CdlPhase[];
+    /** 他の値から自動で決まる値 (`CdlDiagram.derived` をそのまま引き継ぐ) */
+    derived?: CdlDerivedValue[];
     /**
      * キャンバス全要素の bounding box list。
      * engine が「ここに何があるか」 を全部把握、 衝突検証 / debug 表示 / validation で使う。
@@ -2446,4 +2497,4 @@ type CdlDiagramViewProps = {
 };
 declare function CdlDiagramView({ diagram, laid: laidProp, hideHeader, hideMiniPhaseIndicator, focusPhaseId, debug, emitGeometryWarn, headingLevel, interactiveHandlers }: CdlDiagramViewProps): JSX.Element;
 
-export { computed as A, type BBox as B, type CdlDiagram as C, createInteractiveSignalsAccessor as D, type EdgeStyle as E, createScrollProgressHandle as F, createScrollProgressSignals as G, hasInteractivePrimitives as H, type InteractiveHandlerMap as I, signal as J, type LaidDiagram as L, type NodeKind as N, type Signal as S, type Tone as T, type CdlInput as a, type CdlLane as b, type CdlNode as c, type Side as d, type CdlState as e, type CdlEventTarget as f, type Computed as g, type CdlScrollTrigger as h, type CdlDiagramViewProps as i, type LaidEdge as j, type LaidNode as k, type CdlEdge as l, CdlDiagramView as m, type CdlEventBinding as n, type CdlEventKind as o, type CdlFormula as p, type CdlPhase as q, type InteractiveSignalsAccessor as r, type LaidLane as s, NODE_KINDS as t, type ScrollProgressHandle as u, TONES as v, computeEventBindingKey as w, computeFormulaKey as x, computeInputSignalKey as y, computeScrollTriggerKey as z };
+export { computeScrollTriggerKey as A, type BBox as B, type CdlDiagram as C, computed as D, type EdgeStyle as E, createInteractiveSignalsAccessor as F, createScrollProgressHandle as G, createScrollProgressSignals as H, type InteractiveHandlerMap as I, type JourneyEmotion as J, hasInteractivePrimitives as K, type LaidDiagram as L, signal as M, type NodeKind as N, type QuadrantKey as Q, type Signal as S, type Tone as T, type CdlInput as a, type CdlLane as b, type CdlNode as c, type Side as d, type CdlState as e, type CdlEventTarget as f, type Computed as g, type CdlDerivedValue as h, type CdlScrollTrigger as i, type CdlDiagramViewProps as j, type LaidEdge as k, type LaidNode as l, type CdlEdge as m, CdlDiagramView as n, type CdlEventBinding as o, type CdlEventKind as p, type CdlFormula as q, type CdlPhase as r, type InteractiveSignalsAccessor as s, type LaidLane as t, NODE_KINDS as u, type ScrollProgressHandle as v, TONES as w, computeEventBindingKey as x, computeFormulaKey as y, computeInputSignalKey as z };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "CDL (Chainome Diagram Language). Mermaid-like declarative DSL that compiles to animated SVG diagrams. Built for blockchain / Solidity flows, generic enough for sequence / flow / state / ER / topology diagrams.",
   "license": "MIT",
   "author": "cardene777",

package/src/formula/parser.ts

@@ -1,4 +1,5 @@
 import { ALLOWED_MATH_FNS, type BinaryOp, type FormulaAst, type MathFnName } from "./ast";
+import { isValidTemplateName } from "../template-name";
 
 /**
  * formula expression parser (CAR #244)。
@@ -71,6 +72,30 @@ function tokenize(src: string): Token[] {
       tokens.push({ kind: "num", value: num, pos: start });
       continue;
     }
+    // 波括弧で囲んだ名前 (`{waiting}`)。 図の他の場所と同じ書き方で値を参照する形。
+    // 中身は前後の空白を落としてから名前として扱う。
+    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}`);
+      }
+      // 名前として使える文字は engine 全体で 1 つの定義に従う (`isValidTemplateName`)。
+      // ここだけ緩めると、 式では読めるのに図のどこからも読めない名前ができる
+      // (`{v.done}` は `.` が accessor の始まりなので読み手が拾えない)。
+      if (!isValidTemplateName(name)) {
+        throw new Error(
+          `invalid name "{${name}}" at position ${start} (空白 / { } / . / [ ] は名前に使えない)`,
+        );
+      }
+      tokens.push({ kind: "id", name, pos: start });
+      i = close + 1;
+      continue;
+    }
     // identifier / Math.<fn>
     if ((c >= "a" && c <= "z") || (c >= "A" && c <= "Z") || c === "_" || c === "$") {
       const start = i;
@@ -115,6 +140,16 @@ function tokenize(src: string): Token[] {
         tokens.push({ kind: "math", fn: `Math.${fnName}` as MathFnName, pos: start });
         continue;
       }
+      // 許可済 Math 関数は prefix 無しでも書ける (`min(a, b)`)。 直後が `(` の時だけ関数として
+      // 読むので、 同名の値を参照する形 (`min * 2`) は今までどおり identifier のまま。
+      //
+      // 6 つ全てを対象にするのは、 2 つだけ許すと「どれが prefix 無しで書けるか」 を
+      // 覚える必要が出るため。 呼び出し側が式に書ける範囲を狭めたい場合は、 呼び出し側で
+      // 自分の記法として絞る。
+      if (ALLOWED_MATH_FNS.has(name) && src[i] === "(") {
+        tokens.push({ kind: "math", fn: `Math.${name}` as MathFnName, pos: start });
+        continue;
+      }
       // property access on other identifiers is禁止
       if (src[i] === ".") {
         throw new Error(

package/src/index.ts

@@ -22,6 +22,13 @@ export {
 export type { FormulaAst, FormulaContext, BinaryOp, MathFnName } from "./formula";
 export type { CdlFormula } from "./types";
 
+// 他の値から自動で決まる値 (cdl#453)。 入力欄の式 (formulas) と違い、 段が動かす状態を読み、
+// `computeStateValues` の中で毎 frame 解かれる。 呼び出し側が止まった値を自分で伝えたい時だけ
+// `applyDerivedValues` を直接使う。
+export { applyDerivedValues, withDerivedValues } from "./render/derived-values";
+export type { DerivedResult, DerivedNotice, DerivedNoticeKind } from "./render/derived-values";
+export type { CdlDerivedValue } from "./types";
+
 // scroll-driven trigger (CAR #245) — builder chain `.animation.scroll(id, opts)` で scroll trigger を
 // 追加、 createScrollProgressSignals(diagram) で { progress signal, attach(element), detach } を得て
 // DOM element に IntersectionObserver 経由で bind、 signal.value で 0..1 progress を read。
@@ -186,7 +193,7 @@ export {
   LABEL_SIZE_TOLERANCE_WORLD,
   bboxDiffWorld,
 } from "./layout/predict-bbox";
-export { swimlane, flow, sequence, topology, er, stateMachine, infrastructure, classDiagram, tree, userJourney, mindMap, mindMapRadial, funnel, quadrant, chart, gantt, flowchart, network, stateMachine2 } from "./presets";
+export { swimlane, flow, sequence, topology, er, stateMachine, infrastructure, classDiagram, tree, userJourney, mindMap, funnel, quadrant, chart, gantt, flowchart, network, stateMachine2 } from "./presets";
 // Text DSL は @cardenelabs/dragon に切出済 (cdl は engine only)
 export type {
   SwimlanePreset,
@@ -229,9 +236,6 @@ export type {
   MindMapPreset,
   MindMapBuilder,
   MindBranch,
-  MindMapRadialPreset,
-  MindMapRadialBuilder,
-  MindMapRadialBranch,
   FunnelPreset,
   FunnelBuilder,
   FunnelStage,

package/src/kinds/chart-bar.tsx

@@ -1,14 +1,24 @@
 import type { JSX } from "react";
 import type { LaidNode } from "../types";
+import { resolveChartData } from "../render/payload-binding";
 
 /**
  * chart-bar kind ... 1 node に datum 配列 (chartData) を保持し、 SVG rect で棒グラフ描画する。
  * layout は node bbox 内側の canvas に縦棒を等間隔配置、 縦軸 = value 0-max、 横軸 = datum label。
+ * 各 value は数でも `{signal}` でもよく、 後者は状態が動くたび棒の高さが追随する。
  */
-export function ChartBarNode({ node, active }: { node: LaidNode; active: boolean }): JSX.Element {
+export function ChartBarNode({
+  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.chartData ?? [];
+  const data = resolveChartData(node.chartData ?? [], stateValues);
 
   const PAD_TOP = 20;
   const PAD_RIGHT = 24;
@@ -87,6 +97,7 @@ export function ChartBarNode({ node, active }: { node: LaidNode; active: boolean
           <g key={`bar-${idx}`}>
             <rect
               data-cdl-role="chart-bar"
+              data-cdl-unresolved={d.unresolved ? "true" : undefined}
               x={bx}
               y={by}
               width={barW}

package/src/kinds/chart-line.tsx

@@ -1,15 +1,25 @@
 import type { JSX } from "react";
 import type { LaidNode } from "../types";
+import { resolveChartData } from "../render/payload-binding";
 
 /**
  * chart-line kind ... 1 node に datum 配列 (chartData) を保持し、 SVG polyline で折れ線描画する。
  * layout は node bbox (node.w × node.h) 内側に padding (top/right/bottom/left) を確保し、
  * その内側 rect を chart canvas とみなす。 縦軸 = value min-max、 横軸 = datum index。
+ * 各 value は数でも `{signal}` でもよく、 後者は状態が動くたび折れ線が追随する。
  */
-export function ChartLineNode({ node, active }: { node: LaidNode; active: boolean }): JSX.Element {
+export function ChartLineNode({
+  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.chartData ?? [];
+  const data = resolveChartData(node.chartData ?? [], stateValues);
 
   const PAD_TOP = 36;
   const PAD_RIGHT = 40;
@@ -120,7 +130,7 @@ export function ChartLineNode({ node, active }: { node: LaidNode; active: boolea
         const labelAbove = !isValley;
         const labelY = labelAbove ? cy - 12 : cy + 18;
         return (
-          <g key={`pt-${idx}`}>
+          <g key={`pt-${idx}`} data-cdl-unresolved={d.unresolved ? "true" : undefined}>
             <circle
               cx={cx}
               cy={cy}

package/src/kinds/chart-pie.tsx

@@ -1,15 +1,25 @@
 import type { JSX } from "react";
 import type { LaidNode, Tone } from "../types";
 import { TONE } from "../render/tone";
+import { resolveChartData } from "../render/payload-binding";
 
 /**
  * chart-pie kind ... 1 node に datum 配列 (chartData) を保持し、 SVG path arc で円グラフ描画する。
  * layout は node bbox 内側の左半分に円を配置、 右半分に凡例 (label + %) を stack 表示する。
+ * 各 value は数でも `{signal}` でもよく、 後者は状態が動くたび扇の角度が追随する。
  */
-export function ChartPieNode({ node, active }: { node: LaidNode; active: boolean }): JSX.Element {
+export function ChartPieNode({
+  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.chartData ?? [];
+  const data = resolveChartData(node.chartData ?? [], stateValues);
   const total = data.reduce((acc, d) => acc + d.value, 0) || 1;
 
   const PAD_TOP = 20;
@@ -58,6 +68,7 @@ export function ChartPieNode({ node, active }: { node: LaidNode; active: boolean
         <path
           key={`slice-${idx}`}
           data-cdl-role="chart-pie-slice"
+          data-cdl-unresolved={s.d.unresolved ? "true" : undefined}
           d={s.path}
           fill={sliceColor(s.d.tone, idx)}
           fillOpacity={active ? 0.95 : 0.85}

package/src/kinds/dyn-shape.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState, type JSX } from "react";
 import type { CdlDynShape, LaidNode } from "../types";
-import { resolveNumericAttr } from "../render/utils";
+import { interpolate, resolveNumericAttr } from "../render/utils";
 
 /**
  * time-driven tick hook = ~30fps throttle で performance.now() を state に反映。
@@ -390,5 +390,6 @@ function interpolateColor(
   fallback: string,
 ): string {
   if (!template) return fallback;
-  return template.replace(/\{(\w+)\}/g, (_, id: string) => stateValues[id] ?? `{${id}}`);
+  // engine 共通の経路で解決する。 独自に書くと名前の字種がここだけずれる
+  return interpolate(template, stateValues);
 }

package/src/kinds/funnel.tsx

@@ -1,17 +1,27 @@
 import type { JSX } from "react";
 import type { LaidNode, Tone } from "../types";
 import { TONE } from "../render/tone";
+import { resolveFunnelData } from "../render/payload-binding";
 
 /**
  * funnel-stages kind ... 1 node に stage 配列 (funnelData) を保持し、 逆三角形 funnel を SVG 描画する。
  * layout = 全体で自然な逆三角形になるように上端 100% → 下端 40% で線形補間、
  * 各 stage は同じ縦幅 + 上下辺の幅を段階的に減らして「じょうご」 形状で表現。
  * count / drop rate は polygon の右横 (side legend) に配置して図形と数値を分離。
+ * count は数でも `{signal}` でもよく、 後者は状態が動くたび件数と離脱率が追随する。
  */
-export function FunnelNode({ node, active }: { node: LaidNode; active: boolean }): JSX.Element {
+export function FunnelNode({
+  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 stages = node.funnelData ?? [];
+  const stages = resolveFunnelData(node.funnelData ?? [], stateValues);
 
   const PAD_TOP = 32;
   const PAD_RIGHT = 24;
@@ -48,7 +58,9 @@ export function FunnelNode({ node, active }: { node: LaidNode; active: boolean }
 
       {stages.map((s, idx) => {
         const prev = idx > 0 ? stages[idx - 1]! : null;
-        const dropRate = prev ? ((prev.count - s.count) / prev.count) * 100 : 0;
+        // 前段が 0 件なら離脱率は決まらない (0 で割ることになる)。 静止画では起きなかったが、
+        // count が状態を読むようになると動き始めの 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);
@@ -62,6 +74,7 @@ export function FunnelNode({ node, active }: { node: LaidNode; active: boolean }
           <g key={`stage-${s.id}`}>
             <polygon
               data-cdl-role="funnel-stage"
+              data-cdl-unresolved={s.unresolved ? "true" : undefined}
               points={points}
               fill={tone}
               fillOpacity={0.9}