@cardenelabs/cdl 0.30.3 → 0.31.0

package/dist/react.cjs

@@ -9887,8 +9887,300 @@ function StateDiffCard({
     }
   );
 }
+var \u6570\u3092\u66F8\u304F = (value) => value.toLocaleString("en-US", { maximumFractionDigits: 12 });
+function \u6298\u308C\u7DDA\u306E\u76EE\u76DB(values) {
+  let rawMin = values.length > 0 ? Math.min(...values) : 0;
+  let rawMax = values.length > 0 ? Math.max(...values) : 1;
+  if (rawMin === rawMax) {
+    const room = 10 ** Math.floor(Math.log10(Math.abs(rawMin) || 1) - 1);
+    rawMin -= room;
+    rawMax += room;
+  }
+  const roughStep = (rawMax - rawMin) / 4;
+  const power = 10 ** Math.floor(Math.log10(roughStep));
+  const fraction = roughStep / power;
+  const niceFraction = fraction <= 1 ? 1 : fraction <= 2 ? 2 : fraction <= 2.5 ? 2.5 : fraction <= 5 ? 5 : 10;
+  const step = niceFraction * power;
+  const min = Math.floor(rawMin / step) * step;
+  const max = Math.ceil(rawMax / step) * step;
+  const tickCount = Math.round((max - min) / step);
+  const ticks = Array.from({ length: tickCount + 1 }, (_, i) => {
+    const value = min + step * i;
+    return Math.abs(value) < step * 1e-12 ? 0 : value;
+  });
+  return { min, max, ticks };
+}
+function ChartLineNode({
+  node,
+  active,
+  stateValues = {},
+  scale: fixedScale,
+  drawing = false,
+  progress = 1
+}) {
+  const x0 = node.cx - node.w / 2;
+  const y0 = node.cy - node.h / 2;
+  const data = resolveChartData(node.chartData ?? [], stateValues);
+  const PAD_TOP2 = 36;
+  const PAD_RIGHT2 = 40;
+  const PAD_BOTTOM2 = 56;
+  const PAD_LEFT2 = 72;
+  const canvasW = node.w - PAD_LEFT2 - PAD_RIGHT2;
+  const canvasH = node.h - PAD_TOP2 - PAD_BOTTOM2;
+  const scale = fixedScale ?? \u6298\u308C\u7DDA\u306E\u76EE\u76DB(data.map((d) => d.value));
+  const vRange = scale.max - scale.min;
+  const LABEL_ROOM = 20;
+  const plotTop = PAD_TOP2 + LABEL_ROOM;
+  const plotH = Math.max(canvasH - LABEL_ROOM * 2, 1);
+  const POINT_EDGE_ROOM = 24;
+  const plotW = Math.max(canvasW - POINT_EDGE_ROOM * 2, 1);
+  const xAt = (idx) => PAD_LEFT2 + POINT_EDGE_ROOM + (data.length <= 1 ? plotW / 2 : plotW * idx / (data.length - 1));
+  const yAt = (v) => plotTop + plotH - (v - scale.min) / vRange * plotH;
+  const plotBottom = PAD_TOP2 + canvasH;
+  let \u7DDA\u306E\u5168\u9577 = 0;
+  let \u524D\u306E\u70B9;
+  const \u63CF\u753B\u70B9 = data.map((datum, idx) => {
+    const \u4ECA\u306E\u70B9 = { datum, x: xAt(idx), y: yAt(datum.value), \u3053\u3053\u307E\u3067\u306E\u9577\u3055: 0 };
+    if (\u524D\u306E\u70B9) {
+      \u7DDA\u306E\u5168\u9577 += Math.hypot(\u4ECA\u306E\u70B9.x - \u524D\u306E\u70B9.x, \u4ECA\u306E\u70B9.y - \u524D\u306E\u70B9.y);
+    }
+    \u4ECA\u306E\u70B9.\u3053\u3053\u307E\u3067\u306E\u9577\u3055 = \u7DDA\u306E\u5168\u9577;
+    \u524D\u306E\u70B9 = \u4ECA\u306E\u70B9;
+    return \u4ECA\u306E\u70B9;
+  });
+  const points = \u63CF\u753B\u70B9.map((\u70B9) => `${\u70B9.x},${\u70B9.y}`).join(" ");
+  const \u6BB5\u306E\u9032\u307F = \u9032\u307F\u3092\u7573\u3080(drawing, progress);
+  const \u7C92\u3092\u8D70\u3089\u305B\u308B = drawing && node.chartTrace === true;
+  const \u4F38\u3073 = \u7C92\u3092\u8D70\u3089\u305B\u308B ? Math.min(1, \u6BB5\u306E\u9032\u307F / 0.5) : \u6BB5\u306E\u9032\u307F;
+  const \u7C92\u306E\u9032\u307F = \u7C92\u3092\u8D70\u3089\u305B\u308B ? Math.min(1, Math.max(0, (\u6BB5\u306E\u9032\u307F - 0.55) / 0.45)) : \u4F38\u3073;
+  const \u7C92\u304C\u51FA\u308B = \u7C92\u3092\u8D70\u3089\u305B\u308B && \u6BB5\u306E\u9032\u307F >= 0.55 && \u6BB5\u306E\u9032\u307F < 1;
+  const \u5230\u7740\u7A93 = 0.12;
+  let \u7C92\u306E\u4F4D\u7F6E;
+  const \u6700\u521D\u306E\u70B9 = \u63CF\u753B\u70B9[0];
+  if (\u7C92\u304C\u51FA\u308B && \u6700\u521D\u306E\u70B9) {
+    const \u7C92\u307E\u3067\u306E\u9577\u3055 = \u7C92\u306E\u9032\u307F * \u7DDA\u306E\u5168\u9577;
+    let \u533A\u9593\u306E\u524D = \u6700\u521D\u306E\u70B9;
+    let \u533A\u9593\u306E\u5F8C = \u6700\u521D\u306E\u70B9;
+    for (const \u70B9 of \u63CF\u753B\u70B9.slice(1)) {
+      \u533A\u9593\u306E\u5F8C = \u70B9;
+      if (\u70B9.\u3053\u3053\u307E\u3067\u306E\u9577\u3055 >= \u7C92\u307E\u3067\u306E\u9577\u3055) break;
+      \u533A\u9593\u306E\u524D = \u70B9;
+    }
+    const \u533A\u9593\u306E\u59CB\u3081 = \u533A\u9593\u306E\u524D.\u3053\u3053\u307E\u3067\u306E\u9577\u3055;
+    const \u533A\u9593\u306E\u9577\u3055 = \u533A\u9593\u306E\u5F8C.\u3053\u3053\u307E\u3067\u306E\u9577\u3055 - \u533A\u9593\u306E\u59CB\u3081;
+    const \u533A\u9593\u306E\u9032\u307F = \u533A\u9593\u306E\u9577\u3055 === 0 ? 0 : (\u7C92\u307E\u3067\u306E\u9577\u3055 - \u533A\u9593\u306E\u59CB\u3081) / \u533A\u9593\u306E\u9577\u3055;
+    \u7C92\u306E\u4F4D\u7F6E = {
+      x: \u533A\u9593\u306E\u524D.x + (\u533A\u9593\u306E\u5F8C.x - \u533A\u9593\u306E\u524D.x) * \u533A\u9593\u306E\u9032\u307F,
+      y: \u533A\u9593\u306E\u524D.y + (\u533A\u9593\u306E\u5F8C.y - \u533A\u9593\u306E\u524D.y) * \u533A\u9593\u306E\u9032\u307F
+    };
+  }
+  const gridTicks = scale.ticks.map((value) => ({ y: yAt(value), value }));
+  return /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(${x0} ${y0})`, children: [
+    gridTicks.map((t, i) => /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "line",
+        {
+          x1: PAD_LEFT2,
+          y1: t.y,
+          x2: PAD_LEFT2 + canvasW,
+          y2: t.y,
+          stroke: "var(--cdl-divider, #d4d4d8)",
+          strokeWidth: 0.75,
+          strokeDasharray: "3 3",
+          opacity: 0.65
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "text",
+        {
+          x: PAD_LEFT2 - 8,
+          y: t.y + 4,
+          fontSize: 11,
+          textAnchor: "end",
+          fill: "var(--cdl-text-dim, #5a6270)",
+          children: \u6570\u3092\u66F8\u304F(t.value)
+        }
+      )
+    ] }, `grid-${i}`)),
+    node.chartFillUnder && data.length > 1 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "linearGradient",
+        {
+          id: `chart-line-fill-${node.id}`,
+          gradientUnits: "userSpaceOnUse",
+          x1: 0,
+          y1: plotTop,
+          x2: 0,
+          y2: plotBottom,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: "var(--cdl-tone-accent, #2d6a8f)", stopOpacity: 0.22 }),
+            /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "100%", stopColor: "var(--cdl-tone-accent, #2d6a8f)", stopOpacity: 0 })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          "data-cdl-role": "chart-line-fill-under",
+          d: `M ${xAt(0)} ${plotBottom} L ${points.replaceAll(",", " ")} L ${xAt(data.length - 1)} ${plotBottom} Z`,
+          fill: `url(#chart-line-fill-${node.id})`,
+          stroke: "none"
+        }
+      )
+    ] }),
+    data.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(
+      "polyline",
+      {
+        "data-cdl-role": "chart-line",
+        points,
+        fill: "none",
+        stroke: "var(--cdl-tone-accent, #2d6a8f)",
+        strokeWidth: active ? 3 : 2,
+        strokeLinejoin: "round",
+        strokeLinecap: "round",
+        ...\u4F38\u3070\u3059dash(drawing, \u4F38\u3073)
+      }
+    ),
+    \u7C92\u306E\u4F4D\u7F6E && /* @__PURE__ */ jsxRuntime.jsx(
+      "circle",
+      {
+        "data-cdl-role": "chart-line-trace",
+        cx: \u7C92\u306E\u4F4D\u7F6E.x,
+        cy: \u7C92\u306E\u4F4D\u7F6E.y,
+        r: 4.5,
+        fill: "var(--cdl-now)"
+      }
+    ),
+    \u63CF\u753B\u70B9.map(({ datum: d, x: cx, y: cy, \u3053\u3053\u307E\u3067\u306E\u9577\u3055 }, idx) => {
+      const prev = data[idx - 1]?.value;
+      const next = data[idx + 1]?.value;
+      const isValley = (prev === void 0 || d.value <= prev) && (next === void 0 || d.value <= next);
+      const labelAbove = !isValley;
+      const labelY = labelAbove ? cy - 12 : cy + 18;
+      const \u5230\u7740\u5F8C = \u7DDA\u306E\u5168\u9577 === 0 ? \u7C92\u306E\u9032\u307F : \u7C92\u306E\u9032\u307F - \u3053\u3053\u307E\u3067\u306E\u9577\u3055 / \u7DDA\u306E\u5168\u9577;
+      const \u51FA\u3059 = !drawing || (!\u7C92\u3092\u8D70\u3089\u305B\u308B || \u6BB5\u306E\u9032\u307F >= 0.55) && \u5230\u7740\u5F8C >= 0;
+      const \u5149\u308B = drawing && \u51FA\u3059 && \u5230\u7740\u5F8C < \u5230\u7740\u7A93;
+      const \u5149\u306E\u9032\u307F = \u5149\u308B ? \u5230\u7740\u5F8C / \u5230\u7740\u7A93 : 1;
+      let \u70B9\u3068\u5024;
+      if (\u51FA\u3059) {
+        const \u5149\u306E\u534A\u5F84 = 6 + 16 * \u5149\u306E\u9032\u307F;
+        const \u5024 = /* @__PURE__ */ jsxRuntime.jsx(
+          "text",
+          {
+            "data-cdl-role": "chart-line-value",
+            x: cx,
+            y: labelY,
+            fontSize: 11,
+            fontWeight: 600,
+            textAnchor: "middle",
+            fill: "var(--cdl-text, #1a1f2a)",
+            children: \u6570\u3092\u66F8\u304F(d.value)
+          }
+        );
+        \u70B9\u3068\u5024 = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          \u5149\u308B && // marker の `circle` を数える利用側へ混ぜず、専用 role の等径 ellipse として輪を出す。
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "ellipse",
+            {
+              "data-cdl-role": "chart-line-arrival-ring",
+              cx,
+              cy,
+              rx: \u5149\u306E\u534A\u5F84,
+              ry: \u5149\u306E\u534A\u5F84,
+              fill: "none",
+              stroke: "var(--cdl-now)",
+              strokeWidth: 2,
+              opacity: 0.85 * (1 - \u5149\u306E\u9032\u307F)
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "circle",
+            {
+              cx,
+              cy,
+              r: 5,
+              fill: "var(--cdl-node-fill, #ffffff)",
+              stroke: \u5149\u308B ? "var(--cdl-now)" : "var(--cdl-tone-accent, #2d6a8f)",
+              strokeWidth: 2.5
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "circle",
+            {
+              cx,
+              cy,
+              r: 2.5,
+              fill: \u5149\u308B ? "var(--cdl-now)" : "var(--cdl-tone-accent, #2d6a8f)"
+            }
+          ),
+          node.chartValueRise && \u5149\u308B ? /* @__PURE__ */ jsxRuntime.jsx(
+            "g",
+            {
+              "data-cdl-role": "chart-line-value-rise",
+              transform: `translate(0 ${8 * (1 - \u5149\u306E\u9032\u307F)})`,
+              children: \u5024
+            }
+          ) : \u5024
+        ] });
+      }
+      return /* @__PURE__ */ jsxRuntime.jsxs("g", { "data-cdl-unresolved": d.unresolved ? "true" : void 0, children: [
+        \u70B9\u3068\u5024,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "text",
+          {
+            x: cx,
+            y: PAD_TOP2 + canvasH + 20,
+            fontSize: 12,
+            textAnchor: "middle",
+            fill: "var(--cdl-text-dim, #5a6270)",
+            children: d.label
+          }
+        )
+      ] }, `pt-${idx}`);
+    })
+  ] });
+}
+
+// src/kinds/draw-ratio.ts
+var DRAW_RATIO_DEFAULT = 1;
+function \u63CF\u304F\u5272\u5408\u3092\u6B63\u3059(ratio) {
+  if (ratio === void 0) return DRAW_RATIO_DEFAULT;
+  if (!Number.isFinite(ratio)) return DRAW_RATIO_DEFAULT;
+  if (ratio <= 0 || ratio > 1) return DRAW_RATIO_DEFAULT;
+  return ratio;
+}
+function \u63CF\u304F\u9032\u307F\u306B\u76F4\u3059(progress, ratio) {
+  const \u5272\u5408 = \u63CF\u304F\u5272\u5408\u3092\u6B63\u3059(ratio);
+  if (\u5272\u5408 === DRAW_RATIO_DEFAULT) return progress;
+  if (!Number.isFinite(progress)) return progress;
+  return Math.min(1, progress / \u5272\u5408);
+}
+
+// src/layout/lifeline.ts
+function lifelineStartYs(nodes) {
+  const topmost = /* @__PURE__ */ new Map();
+  for (const n of nodes) {
+    const cur = topmost.get(n.lane);
+    if (cur === void 0 || n.cy < cur.cy) topmost.set(n.lane, n);
+  }
+  const starts = /* @__PURE__ */ new Map();
+  for (const [laneId, n] of topmost) starts.set(laneId, n.cy + n.h / 2);
+  return starts;
+}
+function uniformLifelineEndY(lanes, nodes, starts = lifelineStartYs(nodes)) {
+  const lifelineLanes = lanes.filter((l) => l.lifeline);
+  let deepestStart = Number.NEGATIVE_INFINITY;
+  for (const lane of lifelineLanes) {
+    const start = starts.get(lane.id);
+    if (start !== void 0) deepestStart = Math.max(deepestStart, start);
+  }
+  const footerTops = lifelineFooterNodes(lanes, nodes).map((f) => footerShapeDrawTop(f)).filter((top) => top > deepestStart);
+  if (footerTops.length > 0) return Math.min(...footerTops);
+  return lifelineLanes[0] ? lifelineLanes[0].y + lifelineLanes[0].height : 0;
+}
 
 // src/render/edge-head.ts
+var EDGE_HEAD_MUTED_MARKER_ID = "cdl-arrow-muted";
 var EDGE_HEAD_SHAPE = {
   // 何も描かない端。 marker 自体を出さないので `d` は読まれない
   none: { d: "", w: 10, h: 10, refX: 0, filled: false },
@@ -9919,6 +10211,11 @@ function edgeHeadMarkerId(tone, head, small, fill = EDGE_HEAD_FILL_DEFAULT) {
   const \u5857 = fill === EDGE_HEAD_FILL_DEFAULT || !EDGE_HEAD_SHAPE[head].filled ? "" : `-${fill}`;
   return head === EDGE_HEAD_DEFAULT && \u5857 === "" ? `cdl-arrow-${tone}${\u5C0F}` : `cdl-arrow-${tone}-${head}${\u5857}${\u5C0F}`;
 }
+function edgeHeadMarkerName(tone, head, small, fill) {
+  const \u5B9F\u969B\u306E\u5F62 = head ?? EDGE_HEAD_DEFAULT;
+  if (\u5B9F\u969B\u306E\u5F62 === "none") return void 0;
+  return hasTone(tone) ? edgeHeadMarkerId(tone, \u5B9F\u969B\u306E\u5F62, small, fill ?? EDGE_HEAD_FILL_DEFAULT) : EDGE_HEAD_MUTED_MARKER_ID;
+}
 function edgeHeadPaint(head, fill, color) {
   const \u5F62 = EDGE_HEAD_SHAPE[head];
   if (!\u5F62.filled) return { fill: "none", stroke: color, strokeWidth: 1.6 };
@@ -9947,13 +10244,8 @@ function CdlEdgeView({
   stateValues
 }) {
   const color = edgeColor(edge);
-  const \u7AEF\u306E\u540D\u524D = (h, f) => {
-    const \u5F62 = h ?? EDGE_HEAD_DEFAULT;
-    if (\u5F62 === "none") return void 0;
-    return hasTone(edge.tone) ? edgeHeadMarkerId(edge.tone, \u5F62, !active, f ?? EDGE_HEAD_FILL_DEFAULT) : "cdl-arrow-muted";
-  };
-  const marker = \u7AEF\u306E\u540D\u524D(edge.head, edge.headFill);
-  const tailMarker = edge.tailHead === void 0 ? void 0 : \u7AEF\u306E\u540D\u524D(edge.tailHead, edge.tailHeadFill);
+  const marker = edgeHeadMarkerName(edge.tone, edge.head, !active, edge.headFill);
+  const tailMarker = edge.tailHead === void 0 ? void 0 : edgeHeadMarkerName(edge.tone, edge.tailHead, !active, edge.tailHeadFill);
   const style = edge.style ?? "solid";
   const isDotted = style === "dotted-flow";
   const isPassThrough = isDotted && Boolean(edge.dThrough);
@@ -11526,191 +11818,6 @@ function interpolateColor(template, stateValues, fallback) {
   if (!template) return fallback;
   return interpolate(template, stateValues);
 }
-function ChartLineNode({
-  node,
-  active,
-  stateValues = {},
-  drawing = false,
-  progress = 1
-}) {
-  const x0 = node.cx - node.w / 2;
-  const y0 = node.cy - node.h / 2;
-  const data = resolveChartData(node.chartData ?? [], stateValues);
-  const PAD_TOP2 = 36;
-  const PAD_RIGHT2 = 40;
-  const PAD_BOTTOM2 = 56;
-  const PAD_LEFT2 = 72;
-  const canvasW = node.w - PAD_LEFT2 - PAD_RIGHT2;
-  const canvasH = node.h - PAD_TOP2 - PAD_BOTTOM2;
-  const values = data.map((d) => d.value);
-  const vMin = values.length > 0 ? Math.min(...values) : 0;
-  const vMax = values.length > 0 ? Math.max(...values) : 1;
-  const vRange = vMax - vMin || 1;
-  const LABEL_ROOM = 20;
-  const plotTop = PAD_TOP2 + LABEL_ROOM;
-  const plotH = Math.max(canvasH - LABEL_ROOM * 2, 1);
-  const xAt = (idx) => PAD_LEFT2 + (data.length <= 1 ? canvasW / 2 : canvasW * idx / (data.length - 1));
-  const yAt = (v) => plotTop + plotH - (v - vMin) / vRange * plotH;
-  const points = data.map((d, idx) => `${xAt(idx)},${yAt(d.value)}`).join(" ");
-  const \u70B9\u307E\u3067\u306E\u9577\u3055 = [];
-  let \u7DDA\u306E\u5168\u9577 = 0;
-  let \u524D\u306E\u70B9;
-  for (const [idx, datum] of data.entries()) {
-    const \u4ECA\u306E\u70B9 = { x: xAt(idx), y: yAt(datum.value) };
-    if (\u524D\u306E\u70B9) {
-      \u7DDA\u306E\u5168\u9577 += Math.hypot(\u4ECA\u306E\u70B9.x - \u524D\u306E\u70B9.x, \u4ECA\u306E\u70B9.y - \u524D\u306E\u70B9.y);
-    }
-    \u70B9\u307E\u3067\u306E\u9577\u3055.push(\u7DDA\u306E\u5168\u9577);
-    \u524D\u306E\u70B9 = \u4ECA\u306E\u70B9;
-  }
-  const \u4F38\u3073 = \u9032\u307F\u3092\u7573\u3080(drawing, progress);
-  const \u7DDA\u306E\u5148\u304C\u5C4A\u3044\u305F = (idx) => {
-    if (!drawing) return true;
-    if (data.length <= 1) return true;
-    if (\u7DDA\u306E\u5168\u9577 === 0) return true;
-    return \u4F38\u3073 >= (\u70B9\u307E\u3067\u306E\u9577\u3055[idx] ?? 0) / \u7DDA\u306E\u5168\u9577;
-  };
-  const gridCount = 4;
-  const gridTicks = Array.from({ length: gridCount + 1 }, (_, i) => {
-    const v = vMin + vRange * i / gridCount;
-    return { y: yAt(v), value: v };
-  });
-  return /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(${x0} ${y0})`, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "rect",
-      {
-        "data-cdl-role": "node-body",
-        x: 0,
-        y: 0,
-        width: node.w,
-        height: node.h,
-        rx: 16,
-        fill: "var(--cdl-node-fill, #ffffff)",
-        stroke: active ? "var(--cdl-tone-accent, #2d6a8f)" : "var(--cdl-divider, #d4d4d8)",
-        strokeWidth: active ? 3 : 1.25
-      }
-    ),
-    gridTicks.map((t, i) => /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "line",
-        {
-          x1: PAD_LEFT2,
-          y1: t.y,
-          x2: PAD_LEFT2 + canvasW,
-          y2: t.y,
-          stroke: "var(--cdl-divider, #d4d4d8)",
-          strokeWidth: 0.75,
-          strokeDasharray: "3 3",
-          opacity: 0.65
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "text",
-        {
-          x: PAD_LEFT2 - 8,
-          y: t.y + 4,
-          fontSize: 11,
-          textAnchor: "end",
-          fill: "var(--cdl-text-dim, #5a6270)",
-          children: Math.round(t.value)
-        }
-      )
-    ] }, `grid-${i}`)),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "line",
-      {
-        x1: PAD_LEFT2,
-        y1: plotTop + plotH,
-        x2: PAD_LEFT2 + canvasW,
-        y2: plotTop + plotH,
-        stroke: "var(--cdl-text-mute, #8a8678)",
-        strokeWidth: 1.25
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "line",
-      {
-        x1: PAD_LEFT2,
-        y1: plotTop,
-        x2: PAD_LEFT2,
-        y2: plotTop + plotH,
-        stroke: "var(--cdl-text-mute, #8a8678)",
-        strokeWidth: 1.25
-      }
-    ),
-    data.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(
-      "polyline",
-      {
-        "data-cdl-role": "chart-line",
-        points,
-        fill: "none",
-        stroke: "var(--cdl-tone-accent, #2d6a8f)",
-        strokeWidth: 2.5,
-        strokeLinejoin: "round",
-        strokeLinecap: "round",
-        ...\u4F38\u3070\u3059dash(drawing, \u4F38\u3073)
-      }
-    ),
-    data.map((d, idx) => {
-      const cx = xAt(idx);
-      const cy = yAt(d.value);
-      const prev = idx > 0 ? data[idx - 1].value : void 0;
-      const next = idx < data.length - 1 ? data[idx + 1].value : void 0;
-      const isValley = (prev === void 0 || d.value <= prev) && (next === void 0 || d.value <= next);
-      const labelAbove = !isValley;
-      const labelY = labelAbove ? cy - 12 : cy + 18;
-      const \u51FA\u3059 = \u7DDA\u306E\u5148\u304C\u5C4A\u3044\u305F(idx);
-      return /* @__PURE__ */ jsxRuntime.jsxs("g", { "data-cdl-unresolved": d.unresolved ? "true" : void 0, children: [
-        \u51FA\u3059 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "circle",
-            {
-              cx,
-              cy,
-              r: 5,
-              fill: "var(--cdl-node-fill, #ffffff)",
-              stroke: "var(--cdl-tone-accent, #2d6a8f)",
-              strokeWidth: 2.5
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "circle",
-            {
-              cx,
-              cy,
-              r: 2.5,
-              fill: "var(--cdl-tone-accent, #2d6a8f)"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "text",
-            {
-              "data-cdl-role": "chart-line-value",
-              x: cx,
-              y: labelY,
-              fontSize: 11,
-              fontWeight: 600,
-              textAnchor: "middle",
-              fill: "var(--cdl-text, #1a1f2a)",
-              children: d.value.toLocaleString()
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "text",
-          {
-            x: cx,
-            y: PAD_TOP2 + canvasH + 20,
-            fontSize: 12,
-            textAnchor: "middle",
-            fill: "var(--cdl-text-dim, #5a6270)",
-            children: d.label
-          }
-        )
-      ] }, `pt-${idx}`);
-    })
-  ] });
-}
 function ChartPieNode({
   node,
   active,
@@ -17221,7 +17328,8 @@ function CdlNodeView({
   drawing = false,
   progress,
   stateValues,
-  currentPhaseId
+  currentPhaseId,
+  chartLineScale
 }) {
   const value = node.value ? interpolate(node.value, stateValues) : void 0;
   const rows = (node.rows ?? []).map((r) => interpolate(r, stateValues));
@@ -17277,6 +17385,7 @@ function CdlNodeView({
             node: resolvedNode,
             active,
             stateValues,
+            scale: chartLineScale,
             drawing,
             progress
           }
@@ -17518,44 +17627,6 @@ function CdlNodeView({
     }
   );
 }
-
-// src/layout/lifeline.ts
-function lifelineStartYs(nodes) {
-  const topmost = /* @__PURE__ */ new Map();
-  for (const n of nodes) {
-    const cur = topmost.get(n.lane);
-    if (cur === void 0 || n.cy < cur.cy) topmost.set(n.lane, n);
-  }
-  const starts = /* @__PURE__ */ new Map();
-  for (const [laneId, n] of topmost) starts.set(laneId, n.cy + n.h / 2);
-  return starts;
-}
-function uniformLifelineEndY(lanes, nodes, starts = lifelineStartYs(nodes)) {
-  const lifelineLanes = lanes.filter((l) => l.lifeline);
-  let deepestStart = Number.NEGATIVE_INFINITY;
-  for (const lane of lifelineLanes) {
-    const start = starts.get(lane.id);
-    if (start !== void 0) deepestStart = Math.max(deepestStart, start);
-  }
-  const footerTops = lifelineFooterNodes(lanes, nodes).map((f) => footerShapeDrawTop(f)).filter((top) => top > deepestStart);
-  if (footerTops.length > 0) return Math.min(...footerTops);
-  return lifelineLanes[0] ? lifelineLanes[0].y + lifelineLanes[0].height : 0;
-}
-
-// src/kinds/draw-ratio.ts
-var DRAW_RATIO_DEFAULT = 1;
-function \u63CF\u304F\u5272\u5408\u3092\u6B63\u3059(ratio) {
-  if (ratio === void 0) return DRAW_RATIO_DEFAULT;
-  if (!Number.isFinite(ratio)) return DRAW_RATIO_DEFAULT;
-  if (ratio <= 0 || ratio > 1) return DRAW_RATIO_DEFAULT;
-  return ratio;
-}
-function \u63CF\u304F\u9032\u307F\u306B\u76F4\u3059(progress, ratio) {
-  const \u5272\u5408 = \u63CF\u304F\u5272\u5408\u3092\u6B63\u3059(ratio);
-  if (\u5272\u5408 === DRAW_RATIO_DEFAULT) return progress;
-  if (!Number.isFinite(progress)) return progress;
-  return Math.min(1, progress / \u5272\u5408);
-}
 function CdlStage({
   laid,
   currentPhase,
@@ -17597,6 +17668,26 @@ function CdlStage({
     };
   }, [laid.phases, currentPhase, laid.edgeReveal]);
   const drawSet = new Set(currentPhase?.draw ?? []);
+  const chartLineScales = react.useMemo(() => {
+    const nodes = laid.nodes.filter((node) => node.kind === "chart-line");
+    if (nodes.length === 0) return /* @__PURE__ */ new Map();
+    const frames = [
+      // phase index -1 はどの段にも入る前の初期値。
+      computeStateValues(laid, -1, 0),
+      ...laid.phases.flatMap((_, phaseIndex) => [
+        computeStateValues(laid, phaseIndex, 0),
+        computeStateValues(laid, phaseIndex, 1)
+      ])
+    ];
+    const scales = /* @__PURE__ */ new Map();
+    for (const node of nodes) {
+      const values = frames.flatMap(
+        (stateValues2) => resolveChartData(node.chartData ?? [], stateValues2).map((datum) => datum.value)
+      );
+      scales.set(node.id, \u6298\u308C\u7DDA\u306E\u76EE\u76DB(values));
+    }
+    return scales;
+  }, [laid]);
   const \u63CF\u304F\u9032\u307F = \u63CF\u304F\u9032\u307F\u306B\u76F4\u3059(progress, currentPhase?.drawRatio);
   const { lifelineStarts, uniformFooterTop } = react.useMemo(() => {
     const starts = lifelineStartYs(laid.nodes);
@@ -17605,6 +17696,63 @@ function CdlStage({
       uniformFooterTop: uniformLifelineEndY(laid.lanes, laid.nodes, starts)
     };
   }, [laid]);
+  const edgeHeadMarkers = react.useMemo(() => {
+    const referenced = /* @__PURE__ */ new Set();
+    const add = (tone, head, fill) => {
+      for (const small of [false, true]) {
+        const id = edgeHeadMarkerName(tone, head, small, fill);
+        if (id !== void 0) referenced.add(id);
+      }
+    };
+    for (const edge of laid.edges) {
+      add(edge.tone, edge.head, edge.headFill);
+      if (edge.tailHead !== void 0) add(edge.tone, edge.tailHead, edge.tailHeadFill);
+    }
+    return Object.entries(TONE).flatMap(
+      ([tone, color]) => [
+        [false, 14],
+        [true, 10]
+      ].flatMap(
+        ([small, size]) => EDGE_HEADS.flatMap(
+          (head) => EDGE_HEAD_FILLS.map((fill) => {
+            const \u5F62 = EDGE_HEAD_SHAPE[head];
+            const id = edgeHeadMarkerId(tone, head, small, fill);
+            if (!referenced.has(id) || \u5F62.d === "") return null;
+            if (fill !== EDGE_HEAD_FILL_DEFAULT && !\u5F62.filled) return null;
+            const \u5857 = edgeHeadPaint(head, fill, color);
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              "marker",
+              {
+                id,
+                viewBox: `0 0 ${\u5F62.w} ${\u5F62.h}`,
+                refX: \u5F62.refX,
+                refY: \u5F62.h / 2,
+                markerWidth: size * (\u5F62.scale ?? 1) * \u5F62.w / \u5F62.h,
+                markerHeight: size * (\u5F62.scale ?? 1),
+                markerUnits: "userSpaceOnUse",
+                orient: "auto-start-reverse",
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "path",
+                  {
+                    "data-cdl-role": "edge-arrowhead",
+                    "data-cdl-edge-head": head,
+                    "data-cdl-edge-head-fill": fill,
+                    d: \u5F62.d,
+                    fill: \u5857.fill,
+                    stroke: \u5857.stroke,
+                    strokeWidth: \u5857.strokeWidth,
+                    strokeLinecap: \u5857.strokeWidth === void 0 ? void 0 : "round",
+                    strokeLinejoin: \u5857.strokeWidth === void 0 ? void 0 : "round"
+                  }
+                )
+              },
+              id
+            );
+          })
+        )
+      )
+    );
+  }, [laid]);
   const diagramScale = laid.diagramScale ?? 1;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: compact ? "px-3 py-3" : "px-6 py-6", style: compact ? void 0 : { minHeight: 460 }, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
@@ -17623,55 +17771,11 @@ function CdlStage({
         "data-cdl-type": laid.type,
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
-            Object.entries(TONE).flatMap(
-              ([tone, color]) => [["", 14], ["-sm", 10]].flatMap(
-                ([suffix, size]) => EDGE_HEADS.flatMap(
-                  (head) => (
-                    // 塗り方は形と別の軸 (#578)。 塗らない形では 2 つが同じ名前に畳まれるので、
-                    // `edgeHeadMarkerId` が返す名前で重複を外す
-                    EDGE_HEAD_FILLS.map((fill) => {
-                      const \u5F62 = EDGE_HEAD_SHAPE[head];
-                      const id = edgeHeadMarkerId(tone, head, suffix === "-sm", fill);
-                      if (\u5F62.d === "") return null;
-                      if (fill !== EDGE_HEAD_FILL_DEFAULT && !\u5F62.filled) return null;
-                      const \u5857 = edgeHeadPaint(head, fill, color);
-                      return /* @__PURE__ */ jsxRuntime.jsx(
-                        "marker",
-                        {
-                          id,
-                          viewBox: `0 0 ${\u5F62.w} ${\u5F62.h}`,
-                          refX: \u5F62.refX,
-                          refY: \u5F62.h / 2,
-                          markerWidth: size * (\u5F62.scale ?? 1) * \u5F62.w / \u5F62.h,
-                          markerHeight: size * (\u5F62.scale ?? 1),
-                          markerUnits: "userSpaceOnUse",
-                          orient: "auto-start-reverse",
-                          children: /* @__PURE__ */ jsxRuntime.jsx(
-                            "path",
-                            {
-                              "data-cdl-role": "edge-arrowhead",
-                              "data-cdl-edge-head": head,
-                              "data-cdl-edge-head-fill": fill,
-                              d: \u5F62.d,
-                              fill: \u5857.fill,
-                              stroke: \u5857.stroke,
-                              strokeWidth: \u5857.strokeWidth,
-                              strokeLinecap: \u5857.strokeWidth === void 0 ? void 0 : "round",
-                              strokeLinejoin: \u5857.strokeWidth === void 0 ? void 0 : "round"
-                            }
-                          )
-                        },
-                        id
-                      );
-                    })
-                  )
-                )
-              )
-            ),
+            edgeHeadMarkers,
             /* @__PURE__ */ jsxRuntime.jsx(
               "marker",
               {
-                id: "cdl-arrow-muted",
+                id: EDGE_HEAD_MUTED_MARKER_ID,
                 viewBox: "0 0 10 10",
                 refX: "9",
                 refY: "5",
@@ -17778,7 +17882,8 @@ function CdlStage({
                 drawing: \u63CF\u304F,
                 progress: \u63CF\u304F ? \u63CF\u304F\u9032\u307F : progress,
                 stateValues,
-                currentPhaseId: currentPhase?.id
+                currentPhaseId: currentPhase?.id,
+                chartLineScale: chartLineScales.get(node.id)
               }
             );
             return /* @__PURE__ */ jsxRuntime.jsx("g", { children: view }, node.id);