@cardenelabs/cdl 0.10.0 → 0.12.0

package/dist/{render-CH1Qn3Jv.d.cts → render-C7FKvMqq.d.cts}

@@ -2051,8 +2051,20 @@ type CdlPhase = {
      * この phase で「左の起点から描き始める」 node の id (cdl#512)。
      *
      * `activate` と同じ形で node id を並べる。 対象の node は phase の進み (0→1) に合わせて
-     * 描かれ、 進みが 1 に達した時点で全体が出る。 現在の対象は `chart-line` だけで、
-     * 折れ線が左端から右へ伸び、 点と値の数字は線の先が届いた時に現れる。
+     * 描かれ、 進みが 1 に達した時点で全体が出る。 起点は種別ごとに違う。
+     *
+     * | kind | 起点 | 動き | 添える値 |
+     * |---|---|---|---|
+     * | `chart-line` | 左端 | 線が右へ伸びる | 点と数字は線の先が届いた時 |
+     * | `chart-bar` | 横軸 | 棒が上へ伸びる | 数字は棒の頭に付いて動く |
+     * | `chart-pie` | 12 時 | 扇が時計回りに開く | 凡例はその扇が開き始めた時 |
+     * | `journey-map` | 左端 | 気持ちの線が右へ伸びる | 段はその点に線の先が届いた時 |
+     * | `mind-map` | 中心 | 枝が段ごとに外へ伸びる | 箱はその枝が届いた時 |
+     * | `tree-hierarchy` | 根 | 枝が段ごとに下へ伸びる | 箱はその枝が届いた時 |
+     * | `gantt-timeline` | 各帯の始端 | 帯が右へ伸びる | 依存の矢印は帯が出揃った時 |
+     * | `funnel-stages` | 上端 | 段が上から順に積まれる | 件数と離脱率はその段が出切った時 |
+     *
+     * 対象種別の一覧は `validate.ts` の `DRAW_KINDS` が持つ。
      *
      * **`activate` を兼ねさせない**。 1 箱で図全体を描く種別 (`chart-*` 等) では焦点が
      * その箱に解決されるため、 連続する phase で光り続ける図が実在する。 「光っていたら

package/dist/{render-CH1Qn3Jv.d.ts → render-C7FKvMqq.d.ts}

@@ -2051,8 +2051,20 @@ type CdlPhase = {
      * この phase で「左の起点から描き始める」 node の id (cdl#512)。
      *
      * `activate` と同じ形で node id を並べる。 対象の node は phase の進み (0→1) に合わせて
-     * 描かれ、 進みが 1 に達した時点で全体が出る。 現在の対象は `chart-line` だけで、
-     * 折れ線が左端から右へ伸び、 点と値の数字は線の先が届いた時に現れる。
+     * 描かれ、 進みが 1 に達した時点で全体が出る。 起点は種別ごとに違う。
+     *
+     * | kind | 起点 | 動き | 添える値 |
+     * |---|---|---|---|
+     * | `chart-line` | 左端 | 線が右へ伸びる | 点と数字は線の先が届いた時 |
+     * | `chart-bar` | 横軸 | 棒が上へ伸びる | 数字は棒の頭に付いて動く |
+     * | `chart-pie` | 12 時 | 扇が時計回りに開く | 凡例はその扇が開き始めた時 |
+     * | `journey-map` | 左端 | 気持ちの線が右へ伸びる | 段はその点に線の先が届いた時 |
+     * | `mind-map` | 中心 | 枝が段ごとに外へ伸びる | 箱はその枝が届いた時 |
+     * | `tree-hierarchy` | 根 | 枝が段ごとに下へ伸びる | 箱はその枝が届いた時 |
+     * | `gantt-timeline` | 各帯の始端 | 帯が右へ伸びる | 依存の矢印は帯が出揃った時 |
+     * | `funnel-stages` | 上端 | 段が上から順に積まれる | 件数と離脱率はその段が出切った時 |
+     *
+     * 対象種別の一覧は `validate.ts` の `DRAW_KINDS` が持つ。
      *
      * **`activate` を兼ねさせない**。 1 箱で図全体を描く種別 (`chart-*` 等) では焦点が
      * その箱に解決されるため、 連続する phase で光り続ける図が実在する。 「光っていたら

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.10.0",
+  "version": "0.12.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/kinds/chart-bar.tsx

@@ -1,20 +1,32 @@
 import type { JSX } from "react";
 import type { LaidNode } from "../types";
 import { resolveChartData } from "../render/payload-binding";
+import { 進みを畳む } from "./draw-progress";
 
 /**
  * chart-bar kind ... 1 node に datum 配列 (chartData) を保持し、 SVG rect で棒グラフ描画する。
  * layout は node bbox 内側の canvas に縦棒を等間隔配置、 縦軸 = value 0-max、 横軸 = datum label。
  * 各 value は数でも `{signal}` でもよく、 後者は状態が動くたび棒の高さが追随する。
+ *
+ * phase の `draw` にこの node の id が載っている間は、 棒が横軸から上へ伸びる (cdl#516)。
+ * 伸ばすのは棒を包む `<g>` の `transform` で、 `rect` の `x` / `y` / `width` / `height` は
+ * 進みに関わらず実値のまま。 値の数字は棒の頭に付いて動く。
+ * 軸 / 格子 / 横軸の名前は最初から出る。
  */
 export function ChartBarNode({
   node,
   active,
   stateValues = {},
+  drawing = false,
+  progress = 1,
 }: {
   node: LaidNode;
   active: boolean;
   stateValues?: Record<string, string>;
+  /** この phase の `draw` に載っているか (cdl#516) */
+  drawing?: boolean;
+  /** phase の進み (0→1)。 `drawing` が true の時だけ読む */
+  progress?: number;
 }): JSX.Element {
   const x0 = node.cx - node.w / 2;
   const y0 = node.cy - node.h / 2;
@@ -43,6 +55,11 @@ export function ChartBarNode({
     return { y: yAt(v), value: v };
   });
 
+  /** 棒がどこまで伸びたか (0..1、 cdl#516)。 畳み方は `draw-progress.ts` が持つ */
+  const 伸び = 進みを畳む(drawing, progress);
+  /** 棒の足元。 ここを動かさない点として上へ伸ばす */
+  const 横軸のy = PAD_TOP + canvasH;
+
   return (
     <g transform={`translate(${x0} ${y0})`}>
       <rect
@@ -93,22 +110,38 @@ export function ChartBarNode({
         const bx = xAt(idx);
         const by = yAt(d.value);
         const bh = PAD_TOP + canvasH - by;
+        // 見えている棒の頭。 数字はここに付いて動く = 空いた場所に数字だけ浮かない
+        const 見えている頭 = 横軸のy - (横軸のy - by) * 伸び;
+        /**
+         * **`rect` の属性は触らない** (cdl#516)。 高さを直接動かすと、棒の高さで値を測る
+         * 利用側の検査が進みの途中で別の値を読む。 足元を動かさない点にした倍率で包む。
+         */
+        const 棒 = (
+          <rect
+            data-cdl-role="chart-bar"
+            data-cdl-unresolved={d.unresolved ? "true" : undefined}
+            x={bx}
+            y={by}
+            width={barW}
+            height={bh}
+            rx={2}
+            fill="var(--cdl-tone-accent, #2d6a8f)"
+            fillOpacity={0.9}
+          />
+        );
         return (
           <g key={`bar-${idx}`}>
-            <rect
-              data-cdl-role="chart-bar"
-              data-cdl-unresolved={d.unresolved ? "true" : undefined}
-              x={bx}
-              y={by}
-              width={barW}
-              height={bh}
-              rx={2}
-              fill="var(--cdl-tone-accent, #2d6a8f)"
-              fillOpacity={0.9}
-            />
+            {/* 描く指定が無い図には包みを足さない = 既存の図の DOM を 1 要素も変えない */}
+            {drawing ? (
+              <g transform={`translate(0 ${横軸のy}) scale(1 ${伸び}) translate(0 ${-横軸のy})`}>
+                {棒}
+              </g>
+            ) : (
+              棒
+            )}
             <text
               x={bx + barW / 2}
-              y={by - 6}
+              y={見えている頭 - 6}
               fontSize={11}
               textAnchor="middle"
               fill="var(--cdl-text, #1a1f2a)"

package/src/kinds/chart-line.tsx

@@ -1,6 +1,7 @@
 import type { JSX } from "react";
 import type { LaidNode } from "../types";
 import { resolveChartData } from "../render/payload-binding";
+import { 進みを畳む, 伸ばすdash } from "./draw-progress";
 
 /**
  * chart-line kind ... 1 node に datum 配列 (chartData) を保持し、 SVG polyline で折れ線描画する。
@@ -73,13 +74,8 @@ export function ChartLineNode({
     前の点 = 今の点;
   }
 
-  /**
-   * 線がどこまで伸びたか (0..1、 cdl#512)。 描く指定が無ければ常に 1 = 全長。
-   *
-   * 進みは呼出側から来る値なので、 範囲の外 (負 / 1 超 / NaN) が入りうる。 そのまま
-   * `strokeDashoffset` に渡すと線が消えたり逆向きに縮んだりするため、 ここで畳む。
-   */
-  const 伸び = drawing ? Math.min(1, Math.max(0, Number.isFinite(progress) ? progress : 1)) : 1;
+  /** 線がどこまで伸びたか (0..1、 cdl#512)。 畳み方は `draw-progress.ts` が持つ */
+  const 伸び = 進みを畳む(drawing, progress);
 
   /**
    * その点まで線の先が届いたか。
@@ -173,9 +169,7 @@ export function ChartLineNode({
           // 測れないため。 長さを 1 に正規化すれば進みをそのまま offset に使える。
           //
           // 描く指定が無い図には属性を 1 つも足さない = 既存の図の DOM を変えない
-          {...(drawing
-            ? { pathLength: 1, strokeDasharray: 1, strokeDashoffset: 1 - 伸び }
-            : {})}
+          {...伸ばすdash(drawing, 伸び)}
         />
       )}
       {data.map((d, idx) => {

package/src/kinds/chart-pie.tsx

@@ -1,22 +1,36 @@
-import type { JSX } from "react";
+import { useId, type JSX } from "react";
 import type { LaidNode, Tone } from "../types";
 import { TONE } from "../render/tone";
 import { resolveChartData } from "../render/payload-binding";
+import { 進みを畳む } from "./draw-progress";
 
 /**
  * chart-pie kind ... 1 node に datum 配列 (chartData) を保持し、 SVG path arc で円グラフ描画する。
  * layout は node bbox 内側の左半分に円を配置、 右半分に凡例 (label + %) を stack 表示する。
  * 各 value は数でも `{signal}` でもよく、 後者は状態が動くたび扇の角度が追随する。
+ *
+ * phase の `draw` にこの node の id が載っている間は、 円が 12 時から時計回りに開く (cdl#516)。
+ * 開き方は扇形の切り抜き (`clipPath`) で、 各扇の `d` は進みに関わらず実値のまま。
+ * 凡例はその扇が開き始めた時に出る。
  */
 export function ChartPieNode({
   node,
   active,
   stateValues = {},
+  drawing = false,
+  progress = 1,
 }: {
   node: LaidNode;
   active: boolean;
   stateValues?: Record<string, string>;
+  /** この phase の `draw` に載っているか (cdl#516) */
+  drawing?: boolean;
+  /** phase の進み (0→1)。 `drawing` が true の時だけ読む */
+  progress?: number;
 }): JSX.Element {
+  // node id は diagram 内だけで一意。 同じ page に複数 diagram がある時も SVG の参照先が
+  // ぶつからないよう、 React が component instance ごとに割り当てる id を使う。
+  const instanceId = useId().replace(/[^A-Za-z0-9_-]/g, "");
   const x0 = node.cx - node.w / 2;
   const y0 = node.cy - node.h / 2;
   const data = resolveChartData(node.chartData ?? [], stateValues);
@@ -31,12 +45,16 @@ export function ChartPieNode({
   const cy = PAD_TOP + chartAreaH / 2;
 
   let cumAngle = -Math.PI / 2;
+  /** その扇が始まるまでの取り分の累計。 開き始めたかの判定に使う (cdl#516) */
+  let cumFrac = 0;
   const slices = data.map((d) => {
     const frac = d.value / total;
     const angle = frac * Math.PI * 2;
     const a0 = cumAngle;
     const a1 = cumAngle + angle;
     cumAngle = a1;
+    const startFrac = cumFrac;
+    cumFrac += frac;
 
     const x1 = cx + radius * Math.cos(a0);
     const y1 = cy + radius * Math.sin(a0);
@@ -44,9 +62,16 @@ export function ChartPieNode({
     const y2 = cy + radius * Math.sin(a1);
     const large = angle > Math.PI ? 1 : 0;
     const path = `M ${cx} ${cy} L ${x1} ${y1} A ${radius} ${radius} 0 ${large} 1 ${x2} ${y2} Z`;
-    return { d, frac, path };
+    return { d, frac, path, startFrac };
   });
 
+  /** 円がどこまで開いたか (0..1、 cdl#516)。 畳み方は `draw-progress.ts` が持つ */
+  const 開き = 進みを畳む(drawing, progress);
+  // SVG の id は document 全体の名前空間。 node id ではなく instance id で分ける
+  const 切り抜きid = `cdl-pie-draw-${instanceId}`;
+  /** その扇が開き始めたか。 開き始めた扇の凡例だけを出す */
+  const 開き始めた = (startFrac: number): boolean => !drawing || 開き > startFrac;
+
   const legendX = pieAreaW + 8;
   const legendGap = Math.min(28, chartAreaH / Math.max(data.length, 1));
   const legendStartY = PAD_TOP + (chartAreaH - legendGap * data.length) / 2 + legendGap / 2;
@@ -64,20 +89,40 @@ export function ChartPieNode({
         stroke={active ? "var(--cdl-tone-accent, #2d6a8f)" : "var(--cdl-divider, #d4d4d8)"}
         strokeWidth={active ? 3 : 1.25}
       />
-      {slices.map((s, idx) => (
-        <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}
-          stroke="var(--cdl-node-fill, #ffffff)"
-          strokeWidth={1.5}
-        />
-      ))}
+      {drawing && (
+        <defs>
+          <clipPath id={切り抜きid}>{扇形の切り抜き(cx, cy, radius + 2, 開き)}</clipPath>
+        </defs>
+      )}
+      {/*
+        **扇の `d` は触らない** (cdl#516)。 進みで再計算すると、扇の形から取り分を測る
+        利用側が進みの途中で別の値を読む。 見える範囲だけを切り抜きで変える。
+
+        描く指定が無い図には包みも `clip-path` も足さない = 既存の図の DOM を変えない
+      */}
+      <g {...(drawing ? { clipPath: `url(#${切り抜きid})` } : {})}>
+        {slices.map((s, idx) => (
+          <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}
+            stroke="var(--cdl-node-fill, #ffffff)"
+            strokeWidth={1.5}
+          />
+        ))}
+      </g>
 
-      {slices.map((s, idx) => (
+      {/*
+        行の位置は `idx` から決まる。 いまの開き方は必ず先頭からの連続なので、開いた扇だけを
+        `filter` で抜いても位置は同じになる (変異試験で実測 = 差が出ない)。
+
+        それでも `idx` を保つ形で書くのは、位置の計算が抜き方に依存しないため。 開く順が
+        先頭からでなくなった時に、この場所を直し忘れても位置がずれない
+      */}
+      {slices.map((s, idx) => !開き始めた(s.startFrac) ? null : (
         <g key={`legend-${idx}`} transform={`translate(${legendX} ${legendStartY + idx * legendGap})`}>
           <rect
             x={0}
@@ -110,6 +155,22 @@ export function ChartPieNode({
 }
 
 
+/**
+ * 12 時から時計回りに開く扇形 (cdl#516)。 円を切り抜く形に使う。
+ *
+ * 1 周ちょうどは扇形で表せない (始点と終点が同じ点になり、 弧の向きが決まらない)。
+ * その時だけ円をそのまま返す = 進み 1 で図が消える形を避ける。
+ */
+function 扇形の切り抜き(cx: number, cy: number, r: number, 開き: number): JSX.Element | null {
+  if (開き <= 0) return null;
+  if (開き >= 1) return <circle cx={cx} cy={cy} r={r} />;
+  const a0 = -Math.PI / 2;
+  const a1 = a0 + 開き * Math.PI * 2;
+  const large = 開き > 0.5 ? 1 : 0;
+  const d = `M ${cx} ${cy} L ${cx + r * Math.cos(a0)} ${cy + r * Math.sin(a0)} A ${r} ${r} 0 ${large} 1 ${cx + r * Math.cos(a1)} ${cy + r * Math.sin(a1)} Z`;
+  return <path d={d} />;
+}
+
 const FALLBACK_ORDER: Tone[] = ["accent", "teal", "warning", "success", "info", "error"];
 
 function sliceColor(tone: Tone | undefined, idx: number): string {

package/src/kinds/draw-progress.ts

@@ -0,0 +1,100 @@
+/**
+ * 段の `draw` で図形を起点から現す時の、共通の計算 (cdl#520)。
+ *
+ * `chart-line` (#513) と `chart-bar` / `chart-pie` (#517) が同じ形を各 file に持っていた。
+ * 対応種別が 6 つに増えるため、**進みの畳み方と dash の当て方を 1 箇所に集める**。
+ *
+ * ここに置くのは「どの図形にも同じ意味で効く計算」 だけ。 起点の取り方 (左端 / 横軸 /
+ * 12 時 / 根) は種別ごとに違うため各 file が持つ。
+ */
+
+/**
+ * 進みを 0..1 に畳む。 描く指定が無ければ常に 1 = 全体が出ている。
+ *
+ * 進みは呼出側から来る値なので範囲の外 (負 / 1 超 / NaN) が入りうる。 そのまま倍率や
+ * 角度に渡すと、図形が反転したり 1 周を超えて切り抜きが壊れたりする。
+ */
+export function 進みを畳む(drawing: boolean, progress: number): number {
+  if (!drawing) return 1;
+  return Math.min(1, Math.max(0, Number.isFinite(progress) ? progress : 1));
+}
+
+/**
+ * `path` を起点から伸ばす dash の属性。 描く指定が無い時は **何も返さない**。
+ *
+ * `pathLength` を 1 に正規化するため、進みをそのまま残り (`strokeDashoffset`) に使える。
+ * 実長を測るには DOM の ref が要り、静的な書き出しでは測れない。
+ *
+ * **`d` は触らない**。 経路を切り詰めると、形から位置や量を測る利用側が進みの途中で
+ * 別の値を読む (#513 で `points` について決めたのと同じ)。
+ */
+export function 伸ばすdash(
+  drawing: boolean,
+  伸び: number,
+): { pathLength: number; strokeDasharray: number; strokeDashoffset: number } | Record<string, never> {
+  if (!drawing) return {};
+  return { pathLength: 1, strokeDasharray: 1, strokeDashoffset: 1 - 伸び };
+}
+
+/**
+ * 段 (深さ) ごとに区切った進み (cdl#520)。
+ *
+ * 枝が複数ある図 (`mind-map` / `tree-hierarchy`) で、全部を同時に伸ばすと離れた枝が
+ * 宙に浮いたまま伸びる。 **根 / 中心に近い段から順に伸ばす**。
+ *
+ * 深さ 1..`最大深さ` を等分し、その段の区間に入ってから出るまでを 0→1 で返す。
+ * 区間より手前なら 0、通り過ぎていれば 1。
+ *
+ * 経路長で順を決める案は採らない。 枝は別々の `path` なので、累積経路長で並べると
+ * 1 本ずつ順に伸びる形になり、放射状の図では育ち方が読めなくなる (深さで区切ると
+ * 同じ世代が一緒に伸びる)。
+ */
+export function 段の伸び(伸び: number, 深さ: number, 最大深さ: number): number {
+  if (最大深さ <= 0 || 深さ <= 0) return 1;
+  const 幅 = 1 / 最大深さ;
+  const 始まり = (深さ - 1) * 幅;
+  return Math.min(1, Math.max(0, (伸び - 始まり) / 幅));
+}
+
+/**
+ * 3 次ベジエでつないだ折れ線の、各点までの累積割合 (cdl#520)。
+ *
+ * 返すのは 0..1 の並びで、先頭は必ず 0、末尾は必ず 1。 点が 1 つ以下なら `[0]` 相当。
+ *
+ * **点番号の比率では代用できない**。 dash は実際の経路長で進むため、区間の長さが違うと
+ * 先端と点がずれる (#513 で実測、急傾斜から始まる並びで 2 点目が線の先より先に出た)。
+ *
+ * 曲線の長さは折れ線で近似する。 区間を `分割数` で刻んで弦の長さを足す = 実長との差は
+ * 0.1% 未満 (区間 16 分割、実測)。 `getTotalLength()` は DOM の ref が要り、静的な
+ * 書き出しでは測れないため使わない。
+ */
+export function ベジエの累積割合(
+  点: ReadonlyArray<{ x: number; y: number }>,
+  制御点: (前: { x: number; y: number }, 後: { x: number; y: number }) => [
+    { x: number; y: number },
+    { x: number; y: number },
+  ],
+  分割数 = 16,
+): number[] {
+  if (点.length <= 1) return 点.map(() => 0);
+  const 長さ: number[] = [0];
+  let 合計 = 0;
+  for (let i = 1; i < 点.length; i++) {
+    const p0 = 点[i - 1]!;
+    const p3 = 点[i]!;
+    const [p1, p2] = 制御点(p0, p3);
+    let 前 = p0;
+    for (let s = 1; s <= 分割数; s++) {
+      const t = s / 分割数;
+      const u = 1 - t;
+      const x = u * u * u * p0.x + 3 * u * u * t * p1.x + 3 * u * t * t * p2.x + t * t * t * p3.x;
+      const y = u * u * u * p0.y + 3 * u * u * t * p1.y + 3 * u * t * t * p2.y + t * t * t * p3.y;
+      合計 += Math.hypot(x - 前.x, y - 前.y);
+      前 = { x, y };
+    }
+    長さ.push(合計);
+  }
+  // 全長 0 (同じ点が並ぶ) では割れない。 その時は全点を起点扱いにする
+  if (合計 === 0) return 点.map(() => 0);
+  return 長さ.map((l) => l / 合計);
+}

package/src/kinds/funnel.tsx

@@ -1,7 +1,8 @@
-import type { JSX } from "react";
+import { useId, type JSX } from "react";
 import type { LaidNode, Tone } from "../types";
 import { TONE } from "../render/tone";
 import { resolveFunnelData } from "../render/payload-binding";
+import { 進みを畳む } from "./draw-progress";
 
 /**
  * funnel-stages kind ... 1 node に stage 配列 (funnelData) を保持し、 逆三角形 funnel を SVG 描画する。
@@ -14,10 +15,16 @@ export function FunnelNode({
   node,
   active,
   stateValues = {},
+  drawing = false,
+  progress = 1,
 }: {
   node: LaidNode;
   active: boolean;
   stateValues?: Record<string, string>;
+  /** この phase の `draw` に載っているか (cdl#521) */
+  drawing?: boolean;
+  /** phase の進み (0→1)。 `drawing` が true の時だけ読む */
+  progress?: number;
 }): JSX.Element {
   const x0 = node.cx - node.w / 2;
   const y0 = node.cy - node.h / 2;
@@ -35,6 +42,25 @@ export function FunnelNode({
   const gap = 4;
   const stageH = (canvasH - gap * (stageCount - 1)) / stageCount;
 
+  /**
+   * 段がどこまで積まれたか (0..1、 cdl#521)。 描く指定が無ければ常に 1 = 全部出ている。
+   *
+   * 上から下へ流れる図なので、切り抜きを上から広げると段が順に現れる。
+   */
+  const 伸び = 進みを畳む(drawing, progress);
+  // SVG の id は document 全体の名前空間。 node id は図の中でだけ一意なので instance id で分ける
+  const 切り抜きid = `cdl-funnel-draw-${useId().replace(/[^A-Za-z0-9_-]/g, "")}`;
+  /**
+   * その段の下端までの割合。 **高さの累計で測る** (件数の比ではない)。
+   * 段の高さは件数に比例しないため、件数で測ると出る順が図と合わない。
+   */
+  const 段の下端の割合 = (idx: number): number => {
+    if (canvasH <= 0) return 0;
+    return ((idx + 1) * stageH + idx * gap) / canvasH;
+  };
+  /** その段が出切ったか。 出切ってから件数と離脱率を出す */
+  const 段が出切った = (idx: number): boolean => !drawing || 伸び >= 段の下端の割合(idx);
+
   const widthAtStep = (step: number): number => {
     const topRatio = 1.0;
     const bottomRatio = 0.35;
@@ -42,6 +68,67 @@ export function FunnelNode({
     return canvasW * (topRatio + (bottomRatio - topRatio) * t);
   };
 
+  const 段 = stages.map((s, idx) => {
+    const prev = idx > 0 ? stages[idx - 1]! : null;
+    // 前段が 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);
+    const cx = PAD_LEFT + canvasW / 2;
+    const topX = cx - topW / 2;
+    const bottomX = cx - bottomW / 2;
+    const points = `${topX},${y} ${topX + topW},${y} ${bottomX + bottomW},${y + stageH} ${bottomX},${y + stageH}`;
+    const tone = toneByIndex(idx);
+    const legendX = PAD_LEFT + canvasW + 24;
+    return (
+      <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}
+          stroke={tone}
+          strokeWidth={0}
+        />
+        <text
+          x={cx}
+          y={y + stageH / 2 + 5}
+          fontSize={14}
+          fontWeight={700}
+          textAnchor="middle"
+          fill="var(--cdl-node-fill, #ffffff)"
+        >
+          {s.title}
+        </text>
+        {/* 件数と離脱率は段が出切ってから。 切り抜きだけでは途中から見えるため自分で判定する */}
+        {段が出切った(idx) && (
+          <text
+            x={legendX}
+            y={y + stageH / 2 - 2}
+            fontSize={13}
+            fontWeight={700}
+            fill="var(--cdl-text, #1a1f2a)"
+          >
+            {s.count.toLocaleString()}
+          </text>
+        )}
+        {段が出切った(idx) && prev && (
+          <text
+            x={legendX}
+            y={y + stageH / 2 + 14}
+            fontSize={11}
+            fill={dropRate > 0 ? "var(--cdl-text-dim, #5a6270)" : "var(--cdl-text-mute, #8a8678)"}
+          >
+            {dropRate > 0 ? `↓ ${dropRate.toFixed(1)}%` : "±0%"}
+          </text>
+        )}
+      </g>
+    );
+  });
+
   return (
     <g transform={`translate(${x0} ${y0})`}>
       <rect
@@ -56,63 +143,19 @@ export function FunnelNode({
         strokeWidth={active ? 3 : 1.25}
       />
 
-      {stages.map((s, idx) => {
-        const prev = idx > 0 ? stages[idx - 1]! : null;
-        // 前段が 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);
-        const cx = PAD_LEFT + canvasW / 2;
-        const topX = cx - topW / 2;
-        const bottomX = cx - bottomW / 2;
-        const points = `${topX},${y} ${topX + topW},${y} ${bottomX + bottomW},${y + stageH} ${bottomX},${y + stageH}`;
-        const tone = toneByIndex(idx);
-        const legendX = PAD_LEFT + canvasW + 24;
-        return (
-          <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}
-              stroke={tone}
-              strokeWidth={0}
-            />
-            <text
-              x={cx}
-              y={y + stageH / 2 + 5}
-              fontSize={14}
-              fontWeight={700}
-              textAnchor="middle"
-              fill="var(--cdl-node-fill, #ffffff)"
-            >
-              {s.title}
-            </text>
-            <text
-              x={legendX}
-              y={y + stageH / 2 - 2}
-              fontSize={13}
-              fontWeight={700}
-              fill="var(--cdl-text, #1a1f2a)"
-            >
-              {s.count.toLocaleString()}
-            </text>
-            {prev && (
-              <text
-                x={legendX}
-                y={y + stageH / 2 + 14}
-                fontSize={11}
-                fill={dropRate > 0 ? "var(--cdl-text-dim, #5a6270)" : "var(--cdl-text-mute, #8a8678)"}
-              >
-                {dropRate > 0 ? `↓ ${dropRate.toFixed(1)}%` : "±0%"}
-              </text>
-            )}
-          </g>
-        );
-      })}
+      {drawing && (
+        <defs>
+          {/*
+            上から広がる切り抜き。 **`points` は触らない** (cdl#521) = 台形の形から
+            件数を測る利用側が、進みの途中で別の値を読まないようにする
+          */}
+          <clipPath id={切り抜きid}>
+            <rect x={0} y={0} width={node.w} height={PAD_TOP + canvasH * 伸び} />
+          </clipPath>
+        </defs>
+      )}
+      {/* 描く指定が無い図には包みを足さず、従来の DOM 構造を保つ */}
+      {drawing ? <g clipPath={`url(#${切り抜きid})`}>{段}</g> : 段}
     </g>
   );
 }