@cardenelabs/cdl 0.14.0 → 0.16.0

package/dist/{render-B5JHcUrb.d.cts → render-BS1E6Mlo.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", "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", "chart-gauge", "chart-radial", "chart-stat", "chart-waffle", "chart-stacked-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", "mark-start", "mark-end"];
 type NodeKind = (typeof NODE_KINDS)[number];
 type Side = "top" | "right" | "bottom" | "left";
 /**
@@ -43,6 +43,23 @@ type Side = "top" | "right" | "bottom" | "left";
  *   path が経由 node を貫通する場合は自動で粒子が node 中心を貫通する動きに切替。
  */
 type EdgeStyle = "solid" | "dotted-flow";
+/**
+ * 関係の **端の形** (#560)。 線の種類 (`EdgeStyle`) とは別の軸で、線の先端に何を置くかを決める。
+ *
+ * - `"triangle"` ... 塗った三角。 **既定**。 書かなければこれになる
+ * - `"diamond"` ... 塗った菱。 「持っている」 側を指す
+ * - `"open"` ... 閉じない 2 本の腕。 向きだけを示し、待たない
+ * - `"crow"` ... 三又。 「多」 を示す (ER の鳥の足)
+ *
+ * 線の種類と分けて持つのは、両者が独立に組み合わさるため。 実線 × 三角 (継ぐ) と
+ * 破線 × 三角 (満たす) は線種で分かれ、実線 × 三角 (継ぐ) と実線 × 菱 (持つ) は端で分かれる。
+ * 1 つの欄に畳むと 2 軸の積を名前で列挙することになり、組合せが増えるたびに語が増える。
+ */
+type EdgeHead = "triangle" | "diamond" | "open" | "crow";
+/** 書かなかった時の端の形。 既存の図はすべてこれで描かれている */
+declare const EDGE_HEAD_DEFAULT: EdgeHead;
+/** 端の形の全種。 marker の定義と検査の走査がこの並びを引く (書き写すとずれる) */
+declare const EDGE_HEADS: readonly EdgeHead[];
 type CdlLane = {
     id: string;
     /** lane の x 座標 (optional、 未指定なら engine が前 lane 右端 + gap で auto 計算) */
@@ -271,6 +288,16 @@ type ChartDatumPayload = {
     label: string;
     /** 棒 / 折れ線 / 扇の大きさ。 `{signal}` で状態に追随する */
     value: BoundNumber;
+    /**
+     * **前の時点の値** (cdl#551)。 書くと `chart-stacked-bar` が帯を 2 本描き、
+     * 内訳の変化がそのまま見える。 書かない図は 1 本のまま。
+     *
+     * 節を時点ごとに置く案は採らない = 図表は「1 節に datum 配列を持ち、種別が全 datum を
+     * 描く」 構造で揃っており、節を増やすと配置と組み立て器の両方が別経路になる。
+     *
+     * 3 時点以上は持たない (cdl#551 で対象外)。 足す時は欄の形ごと決め直す。
+     */
+    previous?: BoundNumber;
     tone?: Tone;
 };
 /** gantt-timeline kind の 1 task payload。 label + start/end + owner + dependsOn */
@@ -383,6 +410,8 @@ type CdlEdge = {
     side?: Side;
     /** visual style、 default "solid" */
     style?: EdgeStyle;
+    /** 端の形、 default "triangle" (#560)。 線の種類とは別の軸 */
+    head?: EdgeHead;
     /**
      * FSM transition の guard 条件 (例 "if validated")。
      * stateMachine preset では sub に併合される、 text-dsl v0.5 では guard 単独で渡せる。
@@ -2081,6 +2110,30 @@ type CdlPhase = {
      * 書かない phase では従来どおり全長で描く (DOM に dash 属性も付かない)。
      */
     draw?: string[];
+    /**
+     * `draw` の対象を描き終えるまでに、 phase の何割を使うか (cdl#570)。
+     *
+     * 0 より大きく 1 以下の割合で書く。 `0.4` なら phase の進みが 0.4 に達した時点で
+     * 描き終わり、 残りの 0.6 は描き終わった図のまま値だけが動く。 既定 (書かない) は 1 で、
+     * 従来どおり phase の終わりに描き終わる。
+     *
+     * **描く速さと phase の長さを切り離すための欄**。 進みは phase の進みそのものなので、
+     * これが無いと「線はゆっくり引きたいが値の移りは短くしたい」 が書けず、 描く速さのために
+     * phase の長さを動かすことになる。 phase の長さを動かすと同じ phase の `tweens` まで
+     * 遅くなり、 値が移るだけの phase を長くする形の回避が利用側で要る。
+     *
+     * **割合で持ち、 秒数では持たない**。 割合なら phase に収まるので、 再生速度の切替
+     * (0.5x / 2x) がそのまま効き、 phase をはみ出した時の扱いを決めずに済む。 秒数だと
+     * 切替との掛かり方とはみ出しの扱いを新たに決めることになる。
+     *
+     * 掛かる相手は `draw` に載せた node だけ。 同じ phase の他の node と edge、 および
+     * `tweens` は元の進みのまま動く。
+     *
+     * 範囲外 (0 以下 / 1 超 / NaN / Infinity) は **1 として扱う**。 描く動きは見え方であって
+     * 図の意味ではないため、 書き間違いで図が出なくなる方が損が大きい。 書き間違いは
+     * `validate` が warning で知らせる。
+     */
+    drawRatio?: number;
     /** 数値 state の線形補間 (write phase で 100→90 等) */
     tweens: Array<{
         stateId: string;
@@ -2562,4 +2615,4 @@ type CdlDiagramViewProps = {
 };
 declare function CdlDiagramView({ diagram, laid: laidProp, hideHeader, hideMiniPhaseIndicator, focusPhaseId, debug, emitGeometryWarn, headingLevel, interactiveHandlers }: CdlDiagramViewProps): JSX.Element;
 
-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 };
+export { computeEventBindingKey as A, type BBox as B, type CdlDiagram as C, computeFormulaKey as D, type EdgeStyle as E, computeInputSignalKey as F, computeScrollTriggerKey as G, computed as H, type InteractiveHandlerMap as I, type JourneyEmotion as J, createInteractiveSignalsAccessor as K, type LaidDiagram as L, createScrollProgressHandle as M, type NodeKind as N, createScrollProgressSignals as O, hasInteractivePrimitives as P, type QuadrantKey as Q, signal as R, 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 EdgeHead as e, type CdlState as f, type CdlEventTarget as g, type Computed as h, type CdlDerivedValue as i, type CdlScrollTrigger as j, type CdlDiagramViewProps as k, type LaidEdge as l, type LaidNode as m, type CdlEdge as n, CdlDiagramView as o, type CdlEventBinding as p, type CdlEventKind as q, type CdlFormula as r, type CdlPhase as s, EDGE_HEADS as t, EDGE_HEAD_DEFAULT as u, type InteractiveSignalsAccessor as v, type LaidLane as w, NODE_KINDS as x, type ScrollProgressHandle as y, TONES as z };

package/dist/{render-B5JHcUrb.d.ts → render-BS1E6Mlo.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", "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", "chart-gauge", "chart-radial", "chart-stat", "chart-waffle", "chart-stacked-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", "mark-start", "mark-end"];
 type NodeKind = (typeof NODE_KINDS)[number];
 type Side = "top" | "right" | "bottom" | "left";
 /**
@@ -43,6 +43,23 @@ type Side = "top" | "right" | "bottom" | "left";
  *   path が経由 node を貫通する場合は自動で粒子が node 中心を貫通する動きに切替。
  */
 type EdgeStyle = "solid" | "dotted-flow";
+/**
+ * 関係の **端の形** (#560)。 線の種類 (`EdgeStyle`) とは別の軸で、線の先端に何を置くかを決める。
+ *
+ * - `"triangle"` ... 塗った三角。 **既定**。 書かなければこれになる
+ * - `"diamond"` ... 塗った菱。 「持っている」 側を指す
+ * - `"open"` ... 閉じない 2 本の腕。 向きだけを示し、待たない
+ * - `"crow"` ... 三又。 「多」 を示す (ER の鳥の足)
+ *
+ * 線の種類と分けて持つのは、両者が独立に組み合わさるため。 実線 × 三角 (継ぐ) と
+ * 破線 × 三角 (満たす) は線種で分かれ、実線 × 三角 (継ぐ) と実線 × 菱 (持つ) は端で分かれる。
+ * 1 つの欄に畳むと 2 軸の積を名前で列挙することになり、組合せが増えるたびに語が増える。
+ */
+type EdgeHead = "triangle" | "diamond" | "open" | "crow";
+/** 書かなかった時の端の形。 既存の図はすべてこれで描かれている */
+declare const EDGE_HEAD_DEFAULT: EdgeHead;
+/** 端の形の全種。 marker の定義と検査の走査がこの並びを引く (書き写すとずれる) */
+declare const EDGE_HEADS: readonly EdgeHead[];
 type CdlLane = {
     id: string;
     /** lane の x 座標 (optional、 未指定なら engine が前 lane 右端 + gap で auto 計算) */
@@ -271,6 +288,16 @@ type ChartDatumPayload = {
     label: string;
     /** 棒 / 折れ線 / 扇の大きさ。 `{signal}` で状態に追随する */
     value: BoundNumber;
+    /**
+     * **前の時点の値** (cdl#551)。 書くと `chart-stacked-bar` が帯を 2 本描き、
+     * 内訳の変化がそのまま見える。 書かない図は 1 本のまま。
+     *
+     * 節を時点ごとに置く案は採らない = 図表は「1 節に datum 配列を持ち、種別が全 datum を
+     * 描く」 構造で揃っており、節を増やすと配置と組み立て器の両方が別経路になる。
+     *
+     * 3 時点以上は持たない (cdl#551 で対象外)。 足す時は欄の形ごと決め直す。
+     */
+    previous?: BoundNumber;
     tone?: Tone;
 };
 /** gantt-timeline kind の 1 task payload。 label + start/end + owner + dependsOn */
@@ -383,6 +410,8 @@ type CdlEdge = {
     side?: Side;
     /** visual style、 default "solid" */
     style?: EdgeStyle;
+    /** 端の形、 default "triangle" (#560)。 線の種類とは別の軸 */
+    head?: EdgeHead;
     /**
      * FSM transition の guard 条件 (例 "if validated")。
      * stateMachine preset では sub に併合される、 text-dsl v0.5 では guard 単独で渡せる。
@@ -2081,6 +2110,30 @@ type CdlPhase = {
      * 書かない phase では従来どおり全長で描く (DOM に dash 属性も付かない)。
      */
     draw?: string[];
+    /**
+     * `draw` の対象を描き終えるまでに、 phase の何割を使うか (cdl#570)。
+     *
+     * 0 より大きく 1 以下の割合で書く。 `0.4` なら phase の進みが 0.4 に達した時点で
+     * 描き終わり、 残りの 0.6 は描き終わった図のまま値だけが動く。 既定 (書かない) は 1 で、
+     * 従来どおり phase の終わりに描き終わる。
+     *
+     * **描く速さと phase の長さを切り離すための欄**。 進みは phase の進みそのものなので、
+     * これが無いと「線はゆっくり引きたいが値の移りは短くしたい」 が書けず、 描く速さのために
+     * phase の長さを動かすことになる。 phase の長さを動かすと同じ phase の `tweens` まで
+     * 遅くなり、 値が移るだけの phase を長くする形の回避が利用側で要る。
+     *
+     * **割合で持ち、 秒数では持たない**。 割合なら phase に収まるので、 再生速度の切替
+     * (0.5x / 2x) がそのまま効き、 phase をはみ出した時の扱いを決めずに済む。 秒数だと
+     * 切替との掛かり方とはみ出しの扱いを新たに決めることになる。
+     *
+     * 掛かる相手は `draw` に載せた node だけ。 同じ phase の他の node と edge、 および
+     * `tweens` は元の進みのまま動く。
+     *
+     * 範囲外 (0 以下 / 1 超 / NaN / Infinity) は **1 として扱う**。 描く動きは見え方であって
+     * 図の意味ではないため、 書き間違いで図が出なくなる方が損が大きい。 書き間違いは
+     * `validate` が warning で知らせる。
+     */
+    drawRatio?: number;
     /** 数値 state の線形補間 (write phase で 100→90 等) */
     tweens: Array<{
         stateId: string;
@@ -2562,4 +2615,4 @@ type CdlDiagramViewProps = {
 };
 declare function CdlDiagramView({ diagram, laid: laidProp, hideHeader, hideMiniPhaseIndicator, focusPhaseId, debug, emitGeometryWarn, headingLevel, interactiveHandlers }: CdlDiagramViewProps): JSX.Element;
 
-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 };
+export { computeEventBindingKey as A, type BBox as B, type CdlDiagram as C, computeFormulaKey as D, type EdgeStyle as E, computeInputSignalKey as F, computeScrollTriggerKey as G, computed as H, type InteractiveHandlerMap as I, type JourneyEmotion as J, createInteractiveSignalsAccessor as K, type LaidDiagram as L, createScrollProgressHandle as M, type NodeKind as N, createScrollProgressSignals as O, hasInteractivePrimitives as P, type QuadrantKey as Q, signal as R, 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 EdgeHead as e, type CdlState as f, type CdlEventTarget as g, type Computed as h, type CdlDerivedValue as i, type CdlScrollTrigger as j, type CdlDiagramViewProps as k, type LaidEdge as l, type LaidNode as m, type CdlEdge as n, CdlDiagramView as o, type CdlEventBinding as p, type CdlEventKind as q, type CdlFormula as r, type CdlPhase as s, EDGE_HEADS as t, EDGE_HEAD_DEFAULT as u, type InteractiveSignalsAccessor as v, type LaidLane as w, NODE_KINDS as x, type ScrollProgressHandle as y, TONES as z };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.14.0",
+  "version": "0.16.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/builder.ts

@@ -12,6 +12,7 @@ import type {
   CdlReadout,
   CdlScrollTrigger,
   CdlState,
+  EdgeHead,
   EdgeStyle,
   NodeKind,
   Side,
@@ -1360,6 +1361,16 @@ export type PhaseBuilder = {
    * 対象は phase の進み (0→1) に合わせて描かれる。 現在の対象種別は `chart-line`。
    */
   draw: (...ids: string[]) => PhaseBuilder;
+  /**
+   * `draw` の対象を描き終えるまでに、 phase の何割を使うか (cdl#570)。
+   *
+   * 0 より大きく 1 以下。 `0.4` なら進みが 0.4 に達した時点で描き終わり、 残りは描き終わった
+   * 姿のまま値だけが動く。 書かなければ従来どおり phase の終わりに描き終わる。
+   *
+   * 掛かる相手は `draw` に載せた node だけで、 同じ phase の `tweens` は元の速さのまま。
+   * 範囲外の値は 1 として扱い、 `validate` が warning で知らせる。
+   */
+  drawRatio: (ratio: number) => PhaseBuilder;
   /** 数値 state の線形補間 (write phase で 100→90 等) */
   tween: (stateId: string, from: number, to: number) => PhaseBuilder;
   /** 任意型 state を即時切替 (この phase 到達で value 上書き、 lerp なし) */
@@ -1370,6 +1381,7 @@ export type PhaseBuilder = {
 type PhaseAcc = {
   activate: string[];
   draw: string[];
+  drawRatio?: number;
   tweens: Array<{ stateId: string; from: number; to: number }>;
   sets: Array<{ stateId: string; value: string | number }>;
   badge?: string;
@@ -1385,6 +1397,10 @@ function makePhaseBuilder(acc: PhaseAcc): PhaseBuilder {
       acc.draw.push(...ids);
       return api;
     },
+    drawRatio(ratio) {
+      acc.drawRatio = ratio;
+      return api;
+    },
     tween(stateId, from, to) {
       acc.tweens.push({ stateId, from, to });
       return api;
@@ -1418,6 +1434,8 @@ export type DiagramBuilder = {
       tone?: Tone;
       side?: Side;
       style?: EdgeStyle;
+      /** 端の形 (#560)、 既定は塗った三角。 線の種類とは別の軸 */
+      head?: EdgeHead;
       /** FSM guard 条件、 text-dsl v0.5 inline option (`guard: "..."`) を CdlEdge.guard へ透過 */
       guard?: string;
       /** ER 関係 cardinality、 text-dsl v0.5 inline option (`cardinality: "1:N"`) を CdlEdge.cardinality へ透過 */
@@ -1520,6 +1538,8 @@ export type DiagramBuilder = {
       tone?: Tone;
       side?: Side;
       style?: EdgeStyle;
+      /** 端の形 (#560)、 既定は塗った三角 */
+      head?: EdgeHead;
       guard?: string;
       cardinality?: string;
       labelOffsetX?: number;
@@ -1722,6 +1742,7 @@ export function diagram(
         tone: opts.tone ?? "accent",
         side: opts.side,
         style: opts.style,
+        head: opts.head,
         guard: opts.guard,
         cardinality: opts.cardinality,
         labelOffsetX: opts.labelOffsetX,
@@ -1852,6 +1873,7 @@ export function diagram(
           tone: d.tone ?? "accent",
           side: d.side,
           style: d.style,
+          head: d.head,
           guard: d.guard,
           cardinality: d.cardinality,
           labelOffsetX: d.labelOffsetX,
@@ -3710,6 +3732,8 @@ export function diagram(
         activate: acc.activate,
         // 空なら欄ごと置かない。 置くと `draw` を使わない図の JSON の形が変わる
         ...(acc.draw.length > 0 ? { draw: acc.draw } : {}),
+        // 書かない phase では欄ごと出さない = 従来の図の JSON が 1 byte も変わらない
+        ...(acc.drawRatio === undefined ? {} : { drawRatio: acc.drawRatio }),
         tweens: acc.tweens,
         sets: acc.sets,
         badge: acc.badge,

package/src/index.ts

@@ -272,6 +272,7 @@ export type {
   CdlNode,
   CdlPhase,
   CdlState,
+  EdgeHead,
   EdgeStyle,
   LaidDiagram,
   LaidEdge,
@@ -285,7 +286,7 @@ export type {
 // 手書きせずに済ませるため公開する。
 // 値としての tone / kind 一覧。 downstream (dragon の記法一覧 / parser 等) が
 // 受理できる値の集合を手書きせずに済ませるため公開する。
-export { TONES, NODE_KINDS } from "./types";
+export { TONES, NODE_KINDS, EDGE_HEADS, EDGE_HEAD_DEFAULT } from "./types";
 
 /**
  * 段ごとの実効値を出す 2 つ。 downstream が「この段で箱に何の字が出るか」 を

package/src/kinds/chart-gauge.tsx

@@ -0,0 +1,241 @@
+import { type JSX } from "react";
+import type { LaidNode, Tone } from "../types";
+import { TONE, chartSeriesColor } from "../render/tone";
+import { resolveChartData } from "../render/payload-binding";
+import { textWidth } from "./text-width";
+
+/**
+ * chart-gauge kind ... 上半分の弧で内訳を示し、 合計を主役に置く図 (cdl#549)。
+ *
+ * ## 何のための種別か
+ *
+ * `chart-pie` は **内訳の比較** が主役で、 合計を置ける場所が中央しか無い。 「達成率」
+ * 「進捗」 「使用量」 のように **1 つの合計を大きく見せ、 内訳は補助で添える** 形が書けなかった。
+ *
+ * 円で代用すると 2 つ困る。 合計を大きく取れないことと、 円が縦に高さを使うため横長の枠では
+ * 上下が余ることである。
+ *
+ * ## 上半分だけを使う
+ *
+ * 弧が浅くなるぶん横に広がるので、 横長の枠と相性が良い。 空いた下半分に内訳を横並びで置く =
+ * 円のように名札を四方へ散らさずに済み、 件数が増えても行が揃う。
+ *
+ * 弧は 9 時から 3 時へ、 上を通って時計回りに進む。 左から右へ読む向きに合わせている。
+ *
+ * ## 割合ではなく実値も出す
+ *
+ * 内訳には実値と割合の両方を置く。 合計が主役の図で内訳が割合しか持たないと、 「合計の何割」
+ * は分かっても「いくつ」 が分からず、 合計との関係を読み手が暗算することになる。
+ */
+export function ChartGaugeNode({
+  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 = resolveChartData(node.chartData ?? [], stateValues);
+  const total = data.reduce((acc, d) => acc + d.value, 0) || 1;
+
+  const PAD_TOP = 20;
+  const PAD_BOTTOM = 20;
+  const PAD_SIDE = 20;
+  const 使える高さ = node.h - PAD_TOP - PAD_BOTTOM;
+  const 使える幅 = node.w - PAD_SIDE * 2;
+
+  const 名前の級 = 14;
+  const 数値の級 = 13;
+  /** 内訳の 1 件が縦に使う高さ (印 + 名前 + 数値) */
+  const 内訳の高さ = 56;
+  /** 弧と内訳の間 */
+  const 弧と内訳の間 = 16;
+
+  /**
+   * 弧の外半径。
+   *
+   * 上半分だけなので **高さは半径 1 つぶん**、 幅は 2 つぶん要る。 内訳の段を先に取り分け、
+   * 残りに収める。 極端に狭い枠では弧が消えるため下限を置く。
+   */
+  const 弧に使える高さ = 使える高さ - 内訳の高さ - 弧と内訳の間;
+  const radius = Math.max(24, Math.min(弧に使える高さ, 使える幅 / 2));
+  /** 中央を抜く半径。 合計を置く広さを残しつつ、 弧が細くなりすぎない比 */
+  const 内半径 = radius * 0.62;
+
+  const cx = node.w / 2;
+  /** 弧の中心。 上半分だけを描くので、 中心は弧の下端に来る */
+  const cy = PAD_TOP + radius;
+
+  let cumFrac = 0;
+  const slices = data.map((d) => {
+    const frac = d.value / total;
+    // 9 時 (π) から 3 時 (2π) へ、 上を通って進む
+    const a0 = Math.PI + cumFrac * Math.PI;
+    const a1 = a0 + frac * Math.PI;
+    cumFrac += frac;
+    const 外1 = 極(cx, cy, radius, a0);
+    const 外2 = 極(cx, cy, radius, a1);
+    const 内2 = 極(cx, cy, 内半径, a1);
+    const 内1 = 極(cx, cy, 内半径, a0);
+    // 半円の中では 1 つの扇が半周を超えないため、 大きい弧の指定は常に 0
+    const path =
+      `M ${外1.x} ${外1.y} A ${radius} ${radius} 0 0 1 ${外2.x} ${外2.y} ` +
+      `L ${内2.x} ${内2.y} A ${内半径} ${内半径} 0 0 0 ${内1.x} ${内1.y} Z`;
+    return { d, frac, path };
+  });
+
+  /**
+   * 合計の字の級。
+   *
+   * **内側の空きに収める**。 弧の内側は半径 `内半径` の半円で、中央に置ける横幅は
+   * `内半径 * 2`、縦は `内半径` しかない。 桁数で必要な幅が変わるため、
+   * 実際の文字列を `textWidth` で測って逆算する。
+   *
+   * 縦は見出し (「合計」) の行も入るので、2 行ぶんが半円の高さに収まる比で切る。
+   */
+  const 合計の文字 = 実値表記(Math.round(total));
+  const 横の上限 = 内半径 * 2 * 0.86;
+  const 級の候補 = Math.min(
+    // 横 = 実際の字幅から逆算する
+    (横の上限 / Math.max(textWidth(合計の文字, 100), 1)) * 100,
+    // 縦 = 合計 1 行 + 見出し 1 行が内側の高さに収まる比
+    内半径 * 0.52,
+  );
+  const 合計の級 = Math.max(11, Math.round(級の候補));
+  const 見出しの級 = Math.max(9, Math.round(合計の級 * 0.38));
+
+  /** 内訳 1 件あたりの幅。 等分して左から並べる */
+  const 内訳の幅 = 使える幅 / Math.max(data.length, 1);
+  const 内訳のy = cy + 弧と内訳の間;
+
+  return (
+    <g transform={`translate(${x0} ${y0})`}>
+      <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}
+      />
+
+      {slices.map((s, idx) => (
+        <path
+          key={`arc-${idx}`}
+          data-cdl-role="chart-gauge-arc"
+          data-cdl-unresolved={s.d.unresolved ? "true" : undefined}
+          d={s.path}
+          fill={arcColor(s.d.tone, idx)}
+          // 区切りは地の色の余白で取る。 線だと弧が分断されて 1 つの量に見えない
+          stroke="var(--cdl-node-fill, #ffffff)"
+          strokeWidth={3}
+          strokeLinejoin="round"
+        />
+      ))}
+
+      {/*
+        合計。 この種別の主役なので図の中でいちばん大きい字にするが、 **弧の内側に収める**。
+
+        級を半径の比だけで決めると、桁数が増えた時に横へはみ出す (実測 = 5 桁で弧の外へ出て
+        下段の内訳に重なった)。 内側の空きの幅と高さの両方から上限を出し、小さい方を採る。
+      */}
+      <text
+        x={cx}
+        y={cy - 合計の級 * 0.5}
+        textAnchor="middle"
+        fontSize={合計の級}
+        fontWeight={600}
+        fill="var(--cdl-text, #1a1f2a)"
+      >
+        {合計の文字}
+      </text>
+      <text
+        x={cx}
+        y={cy - 合計の級 * 0.5 + 見出しの級 * 1.5}
+        textAnchor="middle"
+        fontSize={見出しの級}
+        fill="var(--cdl-text-dim, #5a6270)"
+      >
+        合計
+      </text>
+
+      {/*
+        内訳の段。 1 件 = 印 + 名前 + 数値 の縦組みで、 左から等分に並べる。
+
+        字は区画の左端に揃える。 中央揃えにすると名前の長さで位置が動き、 縦の列が揃わない。
+      */}
+      {data.map((d, idx) => {
+        const x = PAD_SIDE + 内訳の幅 * idx;
+        const 数値 = `${実値表記(d.value)}  ${割合表記(d.value / total)}`;
+        return (
+          <g key={`legend-${idx}`} data-cdl-role="chart-gauge-item">
+            <rect x={x} y={内訳のy} width={30} height={4} rx={2} fill={arcColor(d.tone, idx)} />
+            <text
+              x={x}
+              y={内訳のy + 26}
+              fontSize={名前の級}
+              fontWeight={700}
+              fill="var(--cdl-text, #1a1f2a)"
+            >
+              {切り詰める(d.label ?? "", 内訳の幅 - 12, 名前の級)}
+            </text>
+            <text x={x} y={内訳のy + 46} fontSize={数値の級} fill="var(--cdl-text-dim, #5a6270)">
+              {数値}
+            </text>
+          </g>
+        );
+      })}
+    </g>
+  );
+}
+
+/** 中心から角度と距離で点を出す */
+function 極(cx: number, cy: number, r: number, a: number): { x: number; y: number } {
+  return { x: cx + r * Math.cos(a), y: cy + r * Math.sin(a) };
+}
+
+/**
+ * 区画に収まらない名前を末尾で切る。
+ *
+ * 切らないと隣の区画の字に重なる = どちらの件の名前かが読めなくなる。 切ったことが分かるよう
+ * `…` を付ける。
+ */
+function 切り詰める(s: string, 上限: number, 級: number): string {
+  if (上限 <= 0 || textWidth(s, 級) <= 上限) return s;
+  const 記号幅 = textWidth("…", 級);
+  let out = "";
+  for (const c of s) {
+    if (textWidth(out + c, 級) + 記号幅 > 上限) break;
+    out += c;
+  }
+  return `${out}…`;
+}
+
+/**
+ * 実値の表記。 桁区切りを入れる (`chart-pie` と揃える)。
+ *
+ * 小数は 1 桁までに丸める。 図に置く数なので、 桁を尽くすより並びが揃う方が読みやすい。
+ */
+function 実値表記(v: number): string {
+  return Number.isInteger(v)
+    ? v.toLocaleString("en-US")
+    : v.toLocaleString("en-US", { maximumFractionDigits: 1 });
+}
+
+/** 取り分の表記。 整数のとき小数を出さない (`chart-pie` と揃える) */
+function 割合表記(frac: number): string {
+  const v = Math.round(frac * 1000) / 10;
+  return `${Number.isInteger(v) ? v : v.toFixed(1)}%`;
+}
+
+/** 弧の色。 明示した色が優先され、 無ければ図表の系列の色を順に配る */
+function arcColor(tone: Tone | undefined, idx: number): string {
+  if (tone) return TONE[tone];
+  return chartSeriesColor(idx);
+}