@cardenelabs/cdl 0.14.0 → 0.16.0

package/dist/react.cjs

@@ -571,12 +571,20 @@ var KINDS_WITHOUT_TITLE_TEXT = /* @__PURE__ */ new Set([
   "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"
+  "journey-map",
+  // 印そのものが意味を持つ (#560)
+  "mark-start",
+  "mark-end"
 ]);
 function rendersTitleText(kind) {
   return !KINDS_WITHOUT_TITLE_TEXT.has(kind ?? "");
@@ -616,19 +624,36 @@ function rendersRows(kind) {
 }
 function rowBaselineY(kind, index) {
   if (!rendersRows(kind)) return null;
-  return kind === "storage" ? ROW_TOP_STORAGE + index * ROW_PITCH_STORAGE : ROW_TOP_GENERIC + index * ROW_PITCH_GENERIC;
+  return kind === "storage" ? ROW_TOP_STORAGE + index * ROW_PITCH_STORAGE : ROW_TOP_GENERIC + genericTextShift(kind) + index * ROW_PITCH_GENERIC;
+}
+function genericTextShift(kind) {
+  return KINDS_SHAPE_CYLINDER.has(kind ?? "") ? GENERIC_TEXT_SHIFT_CYLINDER : 0;
+}
+var KINDS_SHAPE_CYLINDER = /* @__PURE__ */ new Set(["database"]);
+var KINDS_TEXT_CENTERED = /* @__PURE__ */ new Set(["cloud", "decision"]);
+function genericTextCentered(kind, hasRows) {
+  return !hasRows && KINDS_TEXT_CENTERED.has(kind ?? "");
+}
+function genericTitleBaselineY(kind, h, hasRows) {
+  return genericTextCentered(kind, hasRows) ? h / 2 + GENERIC_TITLE_CENTER_OFFSET : GENERIC_TITLE_TOP + genericTextShift(kind);
 }
 var ROW_TOP_STORAGE = 130;
 var ROW_PITCH_STORAGE = 56;
 var ROW_TOP_GENERIC = 100;
 var ROW_PITCH_GENERIC = 28;
+var GENERIC_TEXT_SHIFT_CYLINDER = 28;
+var GENERIC_TITLE_TOP = 68;
+var GENERIC_TITLE_CENTER_OFFSET = 4;
+var GENERIC_TITLE_FONT = 20;
+var GLYPH_CAP_RATIO = 0.72;
 var ROW_FONT_STORAGE = 26;
 var ROW_FONT_GENERIC = 21;
 var STORAGE_TITLE_BASELINE = 78;
 var STORAGE_ROW_DIVIDER_Y = Math.round(
-  (STORAGE_TITLE_BASELINE + (ROW_TOP_STORAGE - ROW_FONT_STORAGE * 0.72)) / 2
+  (STORAGE_TITLE_BASELINE + (ROW_TOP_STORAGE - ROW_FONT_STORAGE * GLYPH_CAP_RATIO)) / 2
 );
 var ROW_GLYPH_DEPTH_RATIO = 0.4;
+var TITLE_ROW_MIN_GAP = GENERIC_TITLE_FONT * ROW_GLYPH_DEPTH_RATIO + ROW_FONT_GENERIC * GLYPH_CAP_RATIO;
 function rowGlyphDepth(kind) {
   if (!rendersRows(kind)) return null;
   const font = kind === "storage" ? ROW_FONT_STORAGE : ROW_FONT_GENERIC;
@@ -1822,6 +1847,108 @@ function applyEdgeLabelAndPathShifts(edges, labelShiftMap, edgePathShiftMap) {
   });
 }
 
+// src/layout/self-loop.ts
+var SELF_LOOP_OUT = 72;
+var SELF_LOOP_SPAN = 64;
+var SELF_LOOP_STAGGER = 45;
+var SELF_LOOP_SIDE_ORDER = ["right", "top", "left", "bottom"];
+var SELF_LOOP_SIDE_FALLBACK = "right";
+var CUBIC_APEX_RATIO = 0.75;
+var ENDPOINT_CENTER_MARGIN = 8;
+var SPAN_MIN = 8;
+function controlOffset(out) {
+  return out / CUBIC_APEX_RATIO;
+}
+function sideGeometry(n, side) {
+  switch (side) {
+    case "right":
+      return { x: n.cx + n.w / 2, y: n.cy, ux: 1, uy: 0 };
+    case "left":
+      return { x: n.cx - n.w / 2, y: n.cy, ux: -1, uy: 0 };
+    case "top":
+      return { x: n.cx, y: n.cy - n.h / 2, ux: 0, uy: -1 };
+    case "bottom":
+      return { x: n.cx, y: n.cy + n.h / 2, ux: 0, uy: 1 };
+  }
+}
+function fitSpan(sideLength, wanted) {
+  const \u9650\u5EA6 = sideLength - 2 * ENDPOINT_CENTER_MARGIN;
+  return Math.max(SPAN_MIN, Math.min(wanted, \u9650\u5EA6));
+}
+function pickFreeSides(occupied, count) {
+  const \u7A7A\u304D = SELF_LOOP_SIDE_ORDER.filter((s) => !occupied?.has(s));
+  const \u4F7F\u3046 = \u7A7A\u304D.length > 0 ? \u7A7A\u304D : [SELF_LOOP_SIDE_FALLBACK];
+  return Array.from({ length: count }, (_, i) => \u4F7F\u3046[i % \u4F7F\u3046.length]);
+}
+function routeSelfLoopGroup(edges, node, side) {
+  const horizontal = side === "left" || side === "right";
+  const g = sideGeometry(node, side);
+  const span = fitSpan(horizontal ? node.h : node.w, SELF_LOOP_SPAN);
+  const half = span / 2;
+  const \u6CBF = horizontal ? { x: 0, y: 1 } : { x: 1, y: 0 };
+  const \u6700\u5916 = controlOffset(SELF_LOOP_OUT + (edges.length - 1) * SELF_LOOP_STAGGER);
+  const \u8A9E\u307E\u3067 = \u6700\u5916 + LABEL_TO_PATH_CLEARANCE;
+  const \u8A9E\u5E45 = edges.map(
+    (e) => horizontal ? labelPillH(e.sub) : computeLabelBoxW(e.label, e.sub)
+  );
+  const \u4F4D\u7F6E = [];
+  let \u7A4D = 0;
+  for (const w of \u8A9E\u5E45) {
+    \u4F4D\u7F6E.push(\u7A4D + w / 2);
+    \u7A4D += w + CLEARANCE_LABEL_LABEL;
+  }
+  const \u5168\u9577 = Math.max(0, \u7A4D - CLEARANCE_LABEL_LABEL);
+  return edges.map((edge, index) => {
+    const c = controlOffset(SELF_LOOP_OUT + index * SELF_LOOP_STAGGER);
+    const x1 = g.x - \u6CBF.x * half;
+    const y1 = g.y - \u6CBF.y * half;
+    const x2 = g.x + \u6CBF.x * half;
+    const y2 = g.y + \u6CBF.y * half;
+    const \u305A\u308C = \u4F4D\u7F6E[index] - \u5168\u9577 / 2;
+    return {
+      ...edge,
+      d: `M ${x1} ${y1} C ${x1 + g.ux * c} ${y1 + g.uy * c} ${x2 + g.ux * c} ${y2 + g.uy * c} ${x2} ${y2}`,
+      fromSide: side,
+      toSide: side,
+      labelX: g.x + g.ux * \u8A9E\u307E\u3067 + \u6CBF.x * \u305A\u308C + (edge.labelOffsetX ?? 0),
+      labelY: g.y + g.uy * \u8A9E\u307E\u3067 + \u6CBF.y * \u305A\u308C + (edge.labelOffsetY ?? 0),
+      labelAnchor: side === "left" ? "end" : side === "right" ? "start" : "middle"
+    };
+  });
+}
+function isSelfLoop(e) {
+  return e.from === e.to;
+}
+function layoutSelfLoops(edges, nodes, occupiedBySide) {
+  const \u5272\u5F53 = /* @__PURE__ */ new Map();
+  for (const edge of edges) {
+    if (edge.side) continue;
+    const list = \u5272\u5F53.get(edge.from) ?? [];
+    list.push("right");
+    \u5272\u5F53.set(edge.from, list);
+  }
+  for (const [nodeId, list] of \u5272\u5F53) {
+    \u5272\u5F53.set(nodeId, pickFreeSides(occupiedBySide.get(nodeId), list.length));
+  }
+  const \u6D88\u8CBB = /* @__PURE__ */ new Map();
+  const \u675F = /* @__PURE__ */ new Map();
+  for (const edge of edges) {
+    const node = nodes.get(edge.from);
+    if (!node) throw new Error(`cdl layout: edge "${edge.id}" \u306E from "${edge.from}" \u304C node \u306B\u7121\u3044`);
+    let side = edge.side;
+    if (!side) {
+      const i = \u6D88\u8CBB.get(edge.from) ?? 0;
+      \u6D88\u8CBB.set(edge.from, i + 1);
+      side = \u5272\u5F53.get(edge.from)[i];
+    }
+    const key = `${edge.from}::${side}`;
+    const \u65E2 = \u675F.get(key);
+    if (\u65E2) \u65E2.edges.push(edge);
+    else \u675F.set(key, { node, side, edges: [edge] });
+  }
+  return [...\u675F.values()].flatMap((b) => routeSelfLoopGroup(b.edges, b.node, b.side));
+}
+
 // src/layout/tokens.ts
 var TOKENS = {
   // viewBox / lane margins
@@ -1867,6 +1994,16 @@ var TOKENS = {
     "chart-line": { w: 640, h: 360 },
     "chart-pie": { w: 640, h: 320 },
     "chart-bar": { w: 640, h: 360 },
+    // 上半分の弧 + 下段の内訳。 弧が浅いぶん pie より低くて済む (cdl#549)
+    "chart-gauge": { w: 640, h: 320 },
+    // 左に一覧 + 右に同心の弧。 件数ぶん内側へ重なるので pie と同じ高さを取る (cdl#550)
+    "chart-radial": { w: 640, h: 320 },
+    // 件ごとに区画を割り、名前 / 数値 / 弧 / 割合 を縦に積む。 数値を大きく組むので縦が要る (cdl#553)
+    "chart-stat": { w: 640, h: 320 },
+    // 左に一覧 + 右に 10x10 の格子。 格子が正方形なので pie と同じ高さで足りる (cdl#552)
+    "chart-waffle": { w: 640, h: 320 },
+    // 帯を最大 2 本 + 下に一覧。 縦は帯 2 本ぶんで足りる (cdl#551)
+    "chart-stacked-bar": { w: 640, h: 320 },
     // Timeline / Mind 系 (CAR-994 Phase B)
     "gantt-timeline": { w: 720, h: 360 },
     "mind-map": { w: 720, h: 480 },
@@ -1937,7 +2074,12 @@ var TOKENS = {
     "shape-notary": { w: 280, h: 320 },
     "shape-lawyer": { w: 280, h: 300 },
     "shape-trader": { w: 300, h: 300 },
-    "shape-customer-service": { w: 320, h: 300 }
+    "shape-customer-service": { w: 320, h: 300 },
+    // 流れの始まりと終わりの印 2 種 (#560) ... 正方形にして丸が縦横どちらにも歪まないようにする。
+    // 印は箱いっぱいに描く (線が箱の縁で止まるため) ので、この値が丸の直径になる。
+    // 箱としての最小 (80x40) より大きく、名前を持つ箱 (card 320x150) よりは明らかに小さい
+    "mark-start": { w: 96, h: 96 },
+    "mark-end": { w: 96, h: 96 }
   },
   // row gap (stack 間の vertical gap、 lane 内 / 跨ぎ共通)
   // edge label が node の上 36 px に配置されるため、 boxH 68 + 36 + 余裕 = 100 必要。
@@ -2010,6 +2152,7 @@ function layoutEdges(diag, nodes, lanes = []) {
   const lmap = new Map(lanes.map((l) => [l.id, l]));
   const positionedEdges = [];
   const autoEdges = [];
+  const selfLoopEdges = [];
   for (const e of diag.edges) {
     if (e.posX1 !== void 0 && e.posY1 !== void 0 && e.posX2 !== void 0 && e.posY2 !== void 0) {
       const from = nmap.get(e.from);
@@ -2028,6 +2171,8 @@ function layoutEdges(diag, nodes, lanes = []) {
         labelY: midY + (e.labelOffsetY ?? 0),
         labelAnchor: "middle"
       });
+    } else if (isSelfLoop(e)) {
+      selfLoopEdges.push(e);
     } else {
       autoEdges.push(e);
     }
@@ -2051,6 +2196,22 @@ function layoutEdges(diag, nodes, lanes = []) {
     if (list.length <= 1) continue;
     distributeBySides(list);
   }
+  const occupiedBySide = /* @__PURE__ */ new Map();
+  const \u4F7F\u3046 = (nodeId, side) => {
+    const s = occupiedBySide.get(nodeId) ?? /* @__PURE__ */ new Set();
+    s.add(side);
+    occupiedBySide.set(nodeId, s);
+  };
+  for (const p of prepared) {
+    const backDetour = p.e.routing === "back-detour";
+    \u4F7F\u3046(p.e.from, backDetour ? "top" : p.fromSide);
+    \u4F7F\u3046(p.e.to, backDetour ? "top" : p.toSide);
+  }
+  for (const le of positionedEdges) {
+    \u4F7F\u3046(le.from, le.fromSide);
+    \u4F7F\u3046(le.to, le.toSide);
+  }
+  const loopEdges = layoutSelfLoops(selfLoopEdges, nmap, occupiedBySide);
   const labelOffsetsByEdgeId = /* @__PURE__ */ new Map();
   const parallelKey = (p) => p.e.from < p.e.to ? `${p.e.from}::${p.e.to}` : `${p.e.to}::${p.e.from}`;
   const byParallel = /* @__PURE__ */ new Map();
@@ -2549,6 +2710,7 @@ function layoutEdges(diag, nodes, lanes = []) {
   });
   const laidById = /* @__PURE__ */ new Map();
   for (const le of autoResults) laidById.set(le.id, le);
+  for (const le of loopEdges) laidById.set(le.id, le);
   for (const le of positionedEdges) laidById.set(le.id, le);
   return diag.edges.map((e) => laidById.get(e.id)).filter((e) => e !== void 0);
 }
@@ -3916,10 +4078,19 @@ var NODE_KINDS = [
   "oracle",
   "merkle-tree",
   "decision",
-  // Chart 系 (3) ... 1 node に datum 配列を持ち、 kind 内で全 datum を SVG 描画
+  // Chart 系 (5) ... 1 node に datum 配列を持ち、 kind 内で全 datum を SVG 描画。
+  // chart-gauge は合計を主役に置く形 (cdl#549)、 chart-radial は弧の長さで比べる形 (cdl#550)、
+  // chart-stat は数値そのものを主役に置く形 (cdl#553)
+  // chart-waffle は 100 個の印で割合を数えて確かめる形 (cdl#552)
   "chart-pie",
   "chart-line",
   "chart-bar",
+  "chart-gauge",
+  "chart-radial",
+  "chart-stat",
+  // chart-stacked-bar は帯を割合で区切り時点を並べる形 (cdl#551)
+  "chart-waffle",
+  "chart-stacked-bar",
   // Timeline / Mind 系 (2、 CAR-994 Phase B) ... 1 node に payload 配列、 SVG geometry render
   "gantt-timeline",
   "mind-map",
@@ -3986,8 +4157,14 @@ var NODE_KINDS = [
   "shape-notary",
   "shape-lawyer",
   "shape-trader",
-  "shape-customer-service"
+  "shape-customer-service",
+  // 流れの始まりと終わりの印 2 種 (#560) ... 塗った丸と輪で囲んだ丸。
+  // 状態遷移図が使う。 印そのものが意味を持つので文字は描かない
+  "mark-start",
+  "mark-end"
 ];
+var EDGE_HEAD_DEFAULT = "triangle";
+var EDGE_HEADS = ["triangle", "diamond", "open", "crow"];
 
 // src/formula/evaluator.ts
 function evaluate(ast, ctxOrResolver) {
@@ -4995,12 +5172,6 @@ function validate(diag) {
   \u2192 \u4FEE\u6B63\u4F8B: .node("${e.to}", { lane: "...", stack: 0, kind: "...", title: "..." }) \u3092 edge \u5BA3\u8A00\u524D\u306B\u8FFD\u52A0`
       );
     }
-    if (e.from === e.to) {
-      errors.push(
-        `[cdl] self-loop: edge "${e.id}" \u306E from \u3068 to \u304C\u540C\u3058 node "${e.from}" \u3067\u3059 (self-loop \u306F\u73FE\u72B6\u672A\u5BFE\u5FDC)
-  \u2192 \u5225 node \u3092\u4F5C\u3063\u3066 2 \u6BB5\u306B\u5206\u3051\u308B\u304B\u3001 \u5F8C\u7D9A PR \u306E self-loop support \u3092\u5F85\u3063\u3066\u304F\u3060\u3055\u3044`
-      );
-    }
   }
   for (const p of diag.phases) {
     for (const id of p.activate) {
@@ -5020,6 +5191,17 @@ function validate(diag) {
         );
       }
     }
+    if (p.drawRatio !== void 0) {
+      if (!Number.isFinite(p.drawRatio) || p.drawRatio <= 0 || p.drawRatio > 1) {
+        warnings.push(
+          `phase "${p.id}" \u306E drawRatio ${p.drawRatio} \u306F\u7BC4\u56F2\u5916 (0 \u3088\u308A\u5927\u304D\u304F 1 \u4EE5\u4E0B)\u3002 1 \u3068\u3057\u3066\u6271\u3046`
+        );
+      } else if ((p.draw ?? []).length === 0) {
+        warnings.push(
+          `phase "${p.id}" \u306F drawRatio \u3092\u6301\u3064\u304C draw \u304C\u7A7A\u3002 \u63CF\u304F\u5BFE\u8C61\u304C\u7121\u3044\u306E\u3067\u4F55\u3082\u5909\u308F\u3089\u306A\u3044`
+        );
+      }
+    }
     for (const t of p.tweens) {
       if (!stateIds.has(t.stateId)) {
         errors.push(`[cdl] unknown-ref: phase "${p.id}" tween \u5BFE\u8C61 state "${t.stateId}" \u672A\u5B9A\u7FA9`);
@@ -5275,6 +5457,18 @@ function StateDiffCard({
   );
 }
 
+// src/render/edge-head.ts
+var EDGE_HEAD_SHAPE = {
+  triangle: { d: "M 0 0 L 10 5 L 0 10 z", refX: 9, filled: true },
+  diamond: { d: "M 0 5 L 5 0 L 10 5 L 5 10 z", refX: 9, filled: true },
+  open: { d: "M 1 0 L 9 5 L 1 10", refX: 9, filled: false },
+  crow: { d: "M 10 0 L 0 5 M 10 5 L 0 5 M 10 10 L 0 5", refX: 10, filled: false }
+};
+function edgeHeadMarkerId(tone, head, small) {
+  const \u5C0F = small ? "-sm" : "";
+  return head === EDGE_HEAD_DEFAULT ? `cdl-arrow-${tone}${\u5C0F}` : `cdl-arrow-${tone}-${head}${\u5C0F}`;
+}
+
 // src/render/tone.ts
 var TONE = {
   accent: "var(--cdl-tone-accent, #2d6a8f)",
@@ -5292,6 +5486,17 @@ var TONE_HEX = {
   warning: "#a67a2e",
   info: "#5a8ec1"
 };
+var CHART_SERIES = [
+  "var(--cdl-chart-1, #4338ca)",
+  "var(--cdl-chart-2, #0d9488)",
+  "var(--cdl-chart-3, #f59e0b)",
+  "var(--cdl-chart-4, #be185d)",
+  "var(--cdl-chart-5, #4d7c0f)",
+  "var(--cdl-chart-6, #0369a1)"
+];
+function chartSeriesColor(idx) {
+  return CHART_SERIES[(idx % CHART_SERIES.length + CHART_SERIES.length) % CHART_SERIES.length];
+}
 var TONE_FALLBACK = "#2d6a8f";
 function hasTone(tone) {
   return Object.hasOwn(TONE, tone);
@@ -5315,7 +5520,7 @@ function CdlEdgeView({
   stateValues
 }) {
   const color = toneColor(edge.tone);
-  const marker = hasTone(edge.tone) ? `cdl-arrow-${edge.tone}${active ? "" : "-sm"}` : "cdl-arrow-muted";
+  const marker = hasTone(edge.tone) ? edgeHeadMarkerId(edge.tone, edge.head ?? EDGE_HEAD_DEFAULT, !active) : "cdl-arrow-muted";
   const style = edge.style ?? "solid";
   const isDotted = style === "dotted-flow";
   const isPassThrough = isDotted && Boolean(edge.dThrough);
@@ -6135,12 +6340,13 @@ function GenericNode({
     );
   })();
   const resolvedValue = value !== void 0 ? interpolate(value, stateValues) : void 0;
-  const centered = shape === "diamond" || shape === "cloud";
+  const hasRows = (node.rows?.length ?? 0) > 0;
+  const centered = genericTextCentered(node.kind, hasRows);
   const textAnchor = centered ? "middle" : "start";
   const textX = centered ? w / 2 : 20;
-  const cylinderShift = shape === "cylinder" ? 28 : 0;
+  const cylinderShift = genericTextShift(node.kind);
   const eyebrowY = centered ? h / 2 - 26 : 32 + cylinderShift;
-  const titleY = centered ? h / 2 + 4 : 68 + cylinderShift;
+  const titleY = genericTitleBaselineY(node.kind, h, hasRows);
   const subtitleY = centered ? h / 2 + 28 : 96 + cylinderShift;
   const iconX = centered ? w / 2 + 40 : w - 48;
   const iconY = centered ? h / 2 - 44 : 18 + cylinderShift;
@@ -6196,6 +6402,57 @@ function GenericNode({
     })()
   ] });
 }
+var MARK_INNER_RATIO = 0.56;
+var RING_WIDTH_ACTIVE = 6;
+var RING_WIDTH_IDLE = 4;
+var MARK_DEFAULT = "var(--cdl-tone-accent, #2d6a8f)";
+function markRadius(node) {
+  return Math.min(node.w, node.h) / 2;
+}
+function MarkStartNode({ node }) {
+  const \u8272 = nodeAccent(node, MARK_DEFAULT);
+  return /* @__PURE__ */ jsxRuntime.jsx("g", { transform: `translate(${node.cx - node.w / 2} ${node.cy - node.h / 2})`, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "circle",
+    {
+      "data-cdl-role": "node-body",
+      "data-cdl-mark": "start",
+      cx: node.w / 2,
+      cy: node.h / 2,
+      r: markRadius(node),
+      fill: \u8272
+    }
+  ) });
+}
+function MarkEndNode({ node, active }) {
+  const \u8272 = nodeAccent(node, MARK_DEFAULT);
+  const r = markRadius(node);
+  const \u8F2A\u306E\u592A\u3055 = active ? RING_WIDTH_ACTIVE : RING_WIDTH_IDLE;
+  return /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(${node.cx - node.w / 2} ${node.cy - node.h / 2})`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "circle",
+      {
+        "data-cdl-role": "node-body",
+        "data-cdl-mark": "end",
+        cx: node.w / 2,
+        cy: node.h / 2,
+        r: Math.max(0, r - \u8F2A\u306E\u592A\u3055 / 2),
+        fill: "var(--cdl-node-fill, #ffffff)",
+        stroke: \u8272,
+        strokeWidth: \u8F2A\u306E\u592A\u3055
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "circle",
+      {
+        "data-cdl-role": "node-inner",
+        cx: node.w / 2,
+        cy: node.h / 2,
+        r: Math.max(0, r * MARK_INNER_RATIO),
+        fill: \u8272
+      }
+    )
+  ] });
+}
 function useTimeTick() {
   const [t, setT] = react.useState(() => typeof performance !== "undefined" ? performance.now() : 0);
   react.useEffect(() => {
@@ -6313,7 +6570,7 @@ function renderRect(shape, x, y, w, h, stateValues, fillColor, strokeColor, opac
     )
   ] });
 }
-function renderCircle(shape, cx, cy, w, h, stateValues, fillColor, strokeColor, opacity, node) {
+function renderCircle(shape, cx, cy, w, h, stateValues, fillColor, strokeColor, opacity) {
   const maxR = Math.min(w, h) / 2;
   const r = shape.radius !== void 0 ? resolveNumericAttr(shape.radius, stateValues, maxR) : maxR;
   const progress = shape.fillProgress !== void 0 ? Math.min(1, Math.max(0, resolveNumericAttr(shape.fillProgress, stateValues, 0))) : 1;
@@ -6334,7 +6591,7 @@ function renderCircle(shape, cx, cy, w, h, stateValues, fillColor, strokeColor,
     )
   ] });
 }
-function renderArc(shape, cx, cy, w, h, stateValues, fillColor, strokeColor, opacity, node) {
+function renderArc(shape, cx, cy, w, h, stateValues, fillColor, strokeColor, opacity) {
   const maxR = Math.min(w, h) / 2;
   const outerR = shape.outerRadius ?? maxR;
   const innerR = shape.innerRadius ?? outerR * 0.7;
@@ -6434,7 +6691,7 @@ function WaveShape({
     )
   ] });
 }
-function renderPolygon(shape, cx, cy, stateValues, fillColor, strokeColor, opacity, node) {
+function renderPolygon(shape, cx, cy, stateValues, fillColor, strokeColor, opacity) {
   const sides = Math.min(12, Math.max(3, shape.sides));
   const r = shape.radius !== void 0 ? resolveNumericAttr(shape.radius, stateValues, 40) : 40;
   const rotation = shape.rotation !== void 0 ? resolveNumericAttr(shape.rotation, stateValues, 0) : 0;
@@ -6514,10 +6771,14 @@ function needsResolve(raw) {
   return typeof raw !== "number" || !Number.isFinite(raw);
 }
 function resolveChartData(data, values) {
-  if (!data.some((d) => needsResolve(d.value))) return data;
+  if (!data.some((d) => needsResolve(d.value) || d.previous !== void 0 && needsResolve(d.previous)))
+    return data;
   return data.map((d) => {
     const v = resolveBoundNumber(d.value, values, 0);
-    return v.ok ? { ...d, value: v.value } : { ...d, value: v.value, unresolved: true };
+    const \u524D = d.previous === void 0 ? void 0 : resolveBoundNumber(d.previous, values, 0);
+    const \u89E3\u3051\u305F = v.ok && (\u524D === void 0 || \u524D.ok);
+    const \u7D20 = { ...d, value: v.value, previous: \u524D?.value };
+    return \u89E3\u3051\u305F ? \u7D20 : { ...\u7D20, unresolved: true };
   });
 }
 function resolveFunnelData(stages, values) {
@@ -6837,10 +7098,26 @@ function ChartPieNode({
   const total = data.reduce((acc, d) => acc + d.value, 0) || 1;
   const PAD_TOP2 = 20;
   const PAD_BOTTOM2 = 20;
+  const PAD_SIDE = 20;
   const chartAreaH = node.h - PAD_TOP2 - PAD_BOTTOM2;
-  const pieAreaW = node.w * 0.5;
-  const radius = Math.min(pieAreaW, chartAreaH) / 2 - 12;
-  const cx = pieAreaW / 2;
+  const \u540D\u672D\u306E\u7D1A = 14;
+  const \u6570\u5024\u306E\u7D1A = 13;
+  const \u5F15\u304D\u51FA\u3057 = 18;
+  const \u5B57\u307E\u3067\u306E\u9593 = 26;
+  const \u540D\u672D\u306E\u7E26\u306E\u5F35\u308A\u51FA\u3057 = 20;
+  const \u5272\u5408\u306E\u6587\u5B57 = data.map((d) => \u5272\u5408\u8868\u8A18(d.value / total));
+  const \u6570\u5024\u306E\u6587\u5B57 = data.map((d, i) => `${\u5B9F\u5024\u8868\u8A18(d.value)}  ${\u5272\u5408\u306E\u6587\u5B57[i]}`);
+  const \u540D\u672D\u5E45 = Math.max(
+    0,
+    ...data.map(
+      (d, i) => Math.max(textWidth(d.label ?? "", \u540D\u672D\u306E\u7D1A), textWidth(\u6570\u5024\u306E\u6587\u5B57[i] ?? "", \u6570\u5024\u306E\u7D1A))
+    )
+  );
+  const \u7E26\u304B\u3089 = chartAreaH / 2 - \u5F15\u304D\u51FA\u3057 - \u540D\u672D\u306E\u7E26\u306E\u5F35\u308A\u51FA\u3057;
+  const \u6A2A\u304B\u3089 = (node.w - PAD_SIDE * 2) / 2 - \u5F15\u304D\u51FA\u3057 - \u5B57\u307E\u3067\u306E\u9593 - \u540D\u672D\u5E45;
+  const radius = Math.max(24, Math.min(\u7E26\u304B\u3089, \u6A2A\u304B\u3089));
+  const \u5185\u534A\u5F84 = radius * 0.58;
+  const cx = node.w / 2;
   const cy = PAD_TOP2 + chartAreaH / 2;
   let cumAngle = -Math.PI / 2;
   let cumFrac = 0;
@@ -6856,16 +7133,19 @@ function ChartPieNode({
     const y1 = cy + radius * Math.sin(a0);
     const x2 = cx + radius * Math.cos(a1);
     const y2 = cy + radius * Math.sin(a1);
+    const x3 = cx + \u5185\u534A\u5F84 * Math.cos(a1);
+    const y3 = cy + \u5185\u534A\u5F84 * Math.sin(a1);
+    const x4 = cx + \u5185\u534A\u5F84 * Math.cos(a0);
+    const y4 = cy + \u5185\u534A\u5F84 * Math.sin(a0);
     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, startFrac };
+    const path = `M ${x1} ${y1} A ${radius} ${radius} 0 ${large} 1 ${x2} ${y2} L ${x3} ${y3} A ${\u5185\u534A\u5F84} ${\u5185\u534A\u5F84} 0 ${large} 0 ${x4} ${y4} Z`;
+    const \u4E2D\u592E\u89D2 = (a0 + a1) / 2;
+    return { d, frac, path, startFrac, \u4E2D\u592E\u89D2 };
   });
   const \u958B\u304D = \u9032\u307F\u3092\u7573\u3080(drawing, progress);
   const \u5207\u308A\u629C\u304Did = `cdl-pie-draw-${instanceId}`;
+  const \u5F71id = `cdl-pie-shadow-${instanceId}`;
   const \u958B\u304D\u59CB\u3081\u305F = (startFrac) => !drawing || \u958B\u304D > startFrac;
-  const legendX = pieAreaW + 8;
-  const legendGap = Math.min(28, chartAreaH / Math.max(data.length, 1));
-  const legendStartY = PAD_TOP2 + (chartAreaH - legendGap * data.length) / 2 + legendGap / 2;
   return /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(${x0} ${y0})`, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "rect",
@@ -6881,56 +7161,90 @@ function ChartPieNode({
         strokeWidth: active ? 3 : 1.25
       }
     ),
-    drawing && /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: \u5207\u308A\u629C\u304Did, children: \u6247\u5F62\u306E\u5207\u308A\u629C\u304D(cx, cy, radius + 2, \u958B\u304D) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx("g", { ...drawing ? { clipPath: `url(#${\u5207\u308A\u629C\u304Did})` } : {}, children: slices.map((s, idx) => /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
+      drawing && /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: \u5207\u308A\u629C\u304Did, children: \u6247\u5F62\u306E\u5207\u308A\u629C\u304D(cx, cy, radius + 2, \u958B\u304D) }),
+      /* @__PURE__ */ jsxRuntime.jsx("filter", { id: \u5F71id, x: "-20%", y: "-20%", width: "140%", height: "140%", children: /* @__PURE__ */ jsxRuntime.jsx("feDropShadow", { dx: "0", dy: "6", stdDeviation: "10", floodColor: "#0b1220", floodOpacity: "0.16" }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("g", { ...drawing ? { clipPath: `url(#${\u5207\u308A\u629C\u304Did})` } : {}, filter: `url(#${\u5F71id})`, children: slices.map((s, idx) => /* @__PURE__ */ jsxRuntime.jsx(
       "path",
       {
         "data-cdl-role": "chart-pie-slice",
         "data-cdl-unresolved": s.d.unresolved ? "true" : void 0,
         d: s.path,
         fill: sliceColor(s.d.tone, idx),
-        fillOpacity: active ? 0.95 : 0.85,
         stroke: "var(--cdl-node-fill, #ffffff)",
-        strokeWidth: 1.5
+        strokeWidth: 3,
+        strokeLinejoin: "round"
       },
       `slice-${idx}`
     )) }),
-    slices.map((s, idx) => !\u958B\u304D\u59CB\u3081\u305F(s.startFrac) ? null : /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(${legendX} ${legendStartY + idx * legendGap})`, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "rect",
-        {
-          x: 0,
-          y: -8,
-          width: 14,
-          height: 14,
-          rx: 3,
-          fill: sliceColor(s.d.tone, idx)
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "text",
-        {
-          x: 20,
-          y: 2,
-          fontSize: 12,
-          fill: "var(--cdl-text, #1a1f2a)",
-          children: s.d.label
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        "text",
-        {
-          x: 20,
-          y: 16,
-          fontSize: 11,
-          fill: "var(--cdl-text-dim, #5a6270)",
-          children: [
-            (s.frac * 100).toFixed(1),
-            "%"
-          ]
-        }
-      )
-    ] }, `legend-${idx}`))
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "text",
+      {
+        x: cx,
+        y: cy - 2,
+        textAnchor: "middle",
+        fontSize: Math.round(radius * 0.26),
+        fontWeight: 600,
+        fill: "var(--cdl-text, #1a1f2a)",
+        children: \u5B9F\u5024\u8868\u8A18(Math.round(total))
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "text",
+      {
+        x: cx,
+        y: cy + Math.round(radius * 0.2),
+        textAnchor: "middle",
+        fontSize: Math.round(radius * 0.12),
+        fill: "var(--cdl-text-dim, #5a6270)",
+        children: "\u5408\u8A08"
+      }
+    ),
+    slices.map((s, idx) => {
+      if (!\u958B\u304D\u59CB\u3081\u305F(s.startFrac)) return null;
+      const \u53F3 = Math.cos(s.\u4E2D\u592E\u89D2) >= 0;
+      const \u7E01x = cx + radius * Math.cos(s.\u4E2D\u592E\u89D2);
+      const \u7E01y = cy + radius * Math.sin(s.\u4E2D\u592E\u89D2);
+      const \u6298\u308Cx = cx + (radius + \u5F15\u304D\u51FA\u3057) * Math.cos(s.\u4E2D\u592E\u89D2);
+      const \u6298\u308Cy = cy + (radius + \u5F15\u304D\u51FA\u3057) * Math.sin(s.\u4E2D\u592E\u89D2);
+      const \u5B57x = \u6298\u308Cx + (\u53F3 ? \u5B57\u307E\u3067\u306E\u9593 : -\u5B57\u307E\u3067\u306E\u9593);
+      return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: `M ${\u7E01x} ${\u7E01y} L ${\u6298\u308Cx} ${\u6298\u308Cy} L ${\u5B57x - (\u53F3 ? 6 : -6)} ${\u6298\u308Cy}`,
+            fill: "none",
+            stroke: "var(--cdl-divider, #d4d4d8)",
+            strokeWidth: 1
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: \u7E01x, cy: \u7E01y, r: 3, fill: sliceColor(s.d.tone, idx) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "text",
+          {
+            x: \u5B57x,
+            y: \u6298\u308Cy - 3,
+            textAnchor: \u53F3 ? "start" : "end",
+            fontSize: \u540D\u672D\u306E\u7D1A,
+            fontWeight: 600,
+            fill: "var(--cdl-text, #1a1f2a)",
+            children: s.d.label
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "text",
+          {
+            x: \u5B57x,
+            y: \u6298\u308Cy + 15,
+            textAnchor: \u53F3 ? "start" : "end",
+            fontSize: \u6570\u5024\u306E\u7D1A,
+            fill: "var(--cdl-text-dim, #5a6270)",
+            children: \u6570\u5024\u306E\u6587\u5B57[idx]
+          }
+        )
+      ] }, `callout-${idx}`);
+    })
   ] });
 }
 function \u6247\u5F62\u306E\u5207\u308A\u629C\u304D(cx, cy, r, \u958B\u304D) {
@@ -6942,10 +7256,741 @@ function \u6247\u5F62\u306E\u5207\u308A\u629C\u304D(cx, cy, r, \u958B\u304D) {
   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 /* @__PURE__ */ jsxRuntime.jsx("path", { d });
 }
-var FALLBACK_ORDER = ["accent", "teal", "warning", "success", "info", "error"];
+function \u5B9F\u5024\u8868\u8A18(v) {
+  return Number.isInteger(v) ? v.toLocaleString("en-US") : v.toLocaleString("en-US", { maximumFractionDigits: 1 });
+}
+function \u5272\u5408\u8868\u8A18(frac) {
+  const v = Math.round(frac * 1e3) / 10;
+  return `${Number.isInteger(v) ? v : v.toFixed(1)}%`;
+}
 function sliceColor(tone, idx) {
   if (tone) return TONE[tone];
-  return TONE[FALLBACK_ORDER[idx % FALLBACK_ORDER.length]];
+  return chartSeriesColor(idx);
+}
+function ChartGaugeNode({
+  node,
+  active,
+  stateValues = {}
+}) {
+  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_TOP2 = 20;
+  const PAD_BOTTOM2 = 20;
+  const PAD_SIDE = 20;
+  const \u4F7F\u3048\u308B\u9AD8\u3055 = node.h - PAD_TOP2 - PAD_BOTTOM2;
+  const \u4F7F\u3048\u308B\u5E452 = node.w - PAD_SIDE * 2;
+  const \u540D\u524D\u306E\u7D1A = 14;
+  const \u6570\u5024\u306E\u7D1A = 13;
+  const \u5185\u8A33\u306E\u9AD8\u3055 = 56;
+  const \u5F27\u3068\u5185\u8A33\u306E\u9593 = 16;
+  const \u5F27\u306B\u4F7F\u3048\u308B\u9AD8\u3055 = \u4F7F\u3048\u308B\u9AD8\u3055 - \u5185\u8A33\u306E\u9AD8\u3055 - \u5F27\u3068\u5185\u8A33\u306E\u9593;
+  const radius = Math.max(24, Math.min(\u5F27\u306B\u4F7F\u3048\u308B\u9AD8\u3055, \u4F7F\u3048\u308B\u5E452 / 2));
+  const \u5185\u534A\u5F84 = radius * 0.62;
+  const cx = node.w / 2;
+  const cy = PAD_TOP2 + radius;
+  let cumFrac = 0;
+  const slices = data.map((d) => {
+    const frac = d.value / total;
+    const a0 = Math.PI + cumFrac * Math.PI;
+    const a1 = a0 + frac * Math.PI;
+    cumFrac += frac;
+    const \u59161 = \u6975(cx, cy, radius, a0);
+    const \u59162 = \u6975(cx, cy, radius, a1);
+    const \u51852 = \u6975(cx, cy, \u5185\u534A\u5F84, a1);
+    const \u51851 = \u6975(cx, cy, \u5185\u534A\u5F84, a0);
+    const path = `M ${\u59161.x} ${\u59161.y} A ${radius} ${radius} 0 0 1 ${\u59162.x} ${\u59162.y} L ${\u51852.x} ${\u51852.y} A ${\u5185\u534A\u5F84} ${\u5185\u534A\u5F84} 0 0 0 ${\u51851.x} ${\u51851.y} Z`;
+    return { d, frac, path };
+  });
+  const \u5408\u8A08\u306E\u6587\u5B57 = \u5B9F\u5024\u8868\u8A182(Math.round(total));
+  const \u6A2A\u306E\u4E0A\u9650 = \u5185\u534A\u5F84 * 2 * 0.86;
+  const \u7D1A\u306E\u5019\u88DC = Math.min(
+    // 横 = 実際の字幅から逆算する
+    \u6A2A\u306E\u4E0A\u9650 / Math.max(textWidth(\u5408\u8A08\u306E\u6587\u5B57, 100), 1) * 100,
+    // 縦 = 合計 1 行 + 見出し 1 行が内側の高さに収まる比
+    \u5185\u534A\u5F84 * 0.52
+  );
+  const \u5408\u8A08\u306E\u7D1A = Math.max(11, Math.round(\u7D1A\u306E\u5019\u88DC));
+  const \u898B\u51FA\u3057\u306E\u7D1A = Math.max(9, Math.round(\u5408\u8A08\u306E\u7D1A * 0.38));
+  const \u5185\u8A33\u306E\u5E45 = \u4F7F\u3048\u308B\u5E452 / Math.max(data.length, 1);
+  const \u5185\u8A33\u306Ey = cy + \u5F27\u3068\u5185\u8A33\u306E\u9593;
+  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
+      }
+    ),
+    slices.map((s, idx) => /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        "data-cdl-role": "chart-gauge-arc",
+        "data-cdl-unresolved": s.d.unresolved ? "true" : void 0,
+        d: s.path,
+        fill: arcColor(s.d.tone, idx),
+        stroke: "var(--cdl-node-fill, #ffffff)",
+        strokeWidth: 3,
+        strokeLinejoin: "round"
+      },
+      `arc-${idx}`
+    )),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "text",
+      {
+        x: cx,
+        y: cy - \u5408\u8A08\u306E\u7D1A * 0.5,
+        textAnchor: "middle",
+        fontSize: \u5408\u8A08\u306E\u7D1A,
+        fontWeight: 600,
+        fill: "var(--cdl-text, #1a1f2a)",
+        children: \u5408\u8A08\u306E\u6587\u5B57
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "text",
+      {
+        x: cx,
+        y: cy - \u5408\u8A08\u306E\u7D1A * 0.5 + \u898B\u51FA\u3057\u306E\u7D1A * 1.5,
+        textAnchor: "middle",
+        fontSize: \u898B\u51FA\u3057\u306E\u7D1A,
+        fill: "var(--cdl-text-dim, #5a6270)",
+        children: "\u5408\u8A08"
+      }
+    ),
+    data.map((d, idx) => {
+      const x = PAD_SIDE + \u5185\u8A33\u306E\u5E45 * idx;
+      const \u6570\u5024 = `${\u5B9F\u5024\u8868\u8A182(d.value)}  ${\u5272\u5408\u8868\u8A182(d.value / total)}`;
+      return /* @__PURE__ */ jsxRuntime.jsxs("g", { "data-cdl-role": "chart-gauge-item", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x, y: \u5185\u8A33\u306Ey, width: 30, height: 4, rx: 2, fill: arcColor(d.tone, idx) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "text",
+          {
+            x,
+            y: \u5185\u8A33\u306Ey + 26,
+            fontSize: \u540D\u524D\u306E\u7D1A,
+            fontWeight: 700,
+            fill: "var(--cdl-text, #1a1f2a)",
+            children: \u5207\u308A\u8A70\u3081\u308B(d.label ?? "", \u5185\u8A33\u306E\u5E45 - 12, \u540D\u524D\u306E\u7D1A)
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("text", { x, y: \u5185\u8A33\u306Ey + 46, fontSize: \u6570\u5024\u306E\u7D1A, fill: "var(--cdl-text-dim, #5a6270)", children: \u6570\u5024 })
+      ] }, `legend-${idx}`);
+    })
+  ] });
+}
+function \u6975(cx, cy, r, a) {
+  return { x: cx + r * Math.cos(a), y: cy + r * Math.sin(a) };
+}
+function \u5207\u308A\u8A70\u3081\u308B(s, \u4E0A\u9650, \u7D1A) {
+  if (\u4E0A\u9650 <= 0 || textWidth(s, \u7D1A) <= \u4E0A\u9650) return s;
+  const \u8A18\u53F7\u5E45 = textWidth("\u2026", \u7D1A);
+  let out = "";
+  for (const c of s) {
+    if (textWidth(out + c, \u7D1A) + \u8A18\u53F7\u5E45 > \u4E0A\u9650) break;
+    out += c;
+  }
+  return `${out}\u2026`;
+}
+function \u5B9F\u5024\u8868\u8A182(v) {
+  return Number.isInteger(v) ? v.toLocaleString("en-US") : v.toLocaleString("en-US", { maximumFractionDigits: 1 });
+}
+function \u5272\u5408\u8868\u8A182(frac) {
+  const v = Math.round(frac * 1e3) / 10;
+  return `${Number.isInteger(v) ? v : v.toFixed(1)}%`;
+}
+function arcColor(tone, idx) {
+  if (tone) return TONE[tone];
+  return chartSeriesColor(idx);
+}
+function ChartRadialNode({
+  node,
+  active,
+  stateValues = {}
+}) {
+  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 = 20;
+  const \u4F7F\u3048\u308B\u9AD8\u3055 = node.h - PAD * 2;
+  const \u540D\u524D\u306E\u7D1A = 14;
+  const \u6570\u5024\u306E\u7D1A = 13;
+  const \u884C\u306E\u9AD8\u3055 = 42;
+  const \u4E00\u89A7\u3068\u5F27\u306E\u9593 = 28;
+  const \u6570\u5024\u306E\u6587\u5B57 = data.map((d) => `${\u5B9F\u5024\u8868\u8A183(d.value)}  ${\u5272\u5408\u8868\u8A183(d.value / total)}`);
+  const \u4E00\u89A7\u306E\u5E45 = \u5370\u306E\u5E45 + Math.max(
+    0,
+    ...data.map(
+      (d, i) => Math.max(textWidth(d.label ?? "", \u540D\u524D\u306E\u7D1A), textWidth(\u6570\u5024\u306E\u6587\u5B57[i] ?? "", \u6570\u5024\u306E\u7D1A))
+    )
+  );
+  const \u5F27\u306B\u4F7F\u3048\u308B\u5E45 = node.w - PAD * 2 - \u4E00\u89A7\u306E\u5E45 - \u4E00\u89A7\u3068\u5F27\u306E\u9593;
+  const \u5916\u534A\u5F84 = Math.max(24, Math.min(\u4F7F\u3048\u308B\u9AD8\u3055 / 2, \u5F27\u306B\u4F7F\u3048\u308B\u5E45 / 2));
+  const \u4F7F\u3048\u308B\u539A\u307F = \u5916\u534A\u5F84 * 0.7;
+  const \u5E2F1\u672C = \u4F7F\u3048\u308B\u539A\u307F / Math.max(data.length, 1);
+  const \u5E2F\u306E\u5E45 = \u5E2F1\u672C * 0.66;
+  const \u5F27\u306Ecx = PAD + \u4E00\u89A7\u306E\u5E45 + \u4E00\u89A7\u3068\u5F27\u306E\u9593 + \u5916\u534A\u5F84;
+  const cy = PAD + \u4F7F\u3048\u308B\u9AD8\u3055 / 2;
+  const rings = data.map((d, idx) => {
+    const frac = d.value / total;
+    const \u4E2D\u5FC3\u534A\u5F84 = \u5916\u534A\u5F84 - \u5E2F1\u672C * idx - \u5E2F1\u672C / 2;
+    return {
+      d,
+      frac,
+      \u4E2D\u5FC3\u534A\u5F84,
+      // 軌道は全周。 1 周ちょうどは弧で表せないので、 わずかに欠かして描く
+      \u8ECC\u9053: \u5F27\u306E\u9053(\u5F27\u306Ecx, cy, \u4E2D\u5FC3\u534A\u5F84, \u5E2F\u306E\u5E45, 0.9999),
+      \u53D6\u308A\u5206: frac <= 0 ? null : \u5F27\u306E\u9053(\u5F27\u306Ecx, cy, \u4E2D\u5FC3\u534A\u5F84, \u5E2F\u306E\u5E45, Math.min(frac, 0.9999))
+    };
+  });
+  const \u4E00\u89A7\u306E\u59CB\u307E\u308A = PAD + (\u4F7F\u3048\u308B\u9AD8\u3055 - \u884C\u306E\u9AD8\u3055 * data.length) / 2 + \u884C\u306E\u9AD8\u3055 / 2;
+  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
+      }
+    ),
+    rings.map((r, idx) => /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        "data-cdl-role": "chart-radial-track",
+        d: r.\u8ECC\u9053,
+        fill: "var(--cdl-divider, #d4d4d8)",
+        fillOpacity: 0.28
+      },
+      `track-${idx}`
+    )),
+    rings.map(
+      (r, idx) => r.\u53D6\u308A\u5206 === null ? null : /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          "data-cdl-role": "chart-radial-arc",
+          "data-cdl-unresolved": r.d.unresolved ? "true" : void 0,
+          d: r.\u53D6\u308A\u5206,
+          fill: arcColor2(r.d.tone, idx)
+        },
+        `arc-${idx}`
+      )
+    ),
+    data.map((d, idx) => {
+      const y = \u4E00\u89A7\u306E\u59CB\u307E\u308A + \u884C\u306E\u9AD8\u3055 * idx;
+      return /* @__PURE__ */ jsxRuntime.jsxs("g", { "data-cdl-role": "chart-radial-item", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: PAD, y: y - 11, width: 4, height: 22, rx: 2, fill: arcColor2(d.tone, idx) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "text",
+          {
+            x: PAD + \u5370\u306E\u5E45,
+            y: y + 1,
+            fontSize: \u540D\u524D\u306E\u7D1A,
+            fontWeight: 700,
+            fill: "var(--cdl-text, #1a1f2a)",
+            children: d.label
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "text",
+          {
+            x: PAD + \u5370\u306E\u5E45,
+            y: y + 20,
+            fontSize: \u6570\u5024\u306E\u7D1A,
+            fill: "var(--cdl-text-dim, #5a6270)",
+            children: \u6570\u5024\u306E\u6587\u5B57[idx]
+          }
+        )
+      ] }, `item-${idx}`);
+    })
+  ] });
+}
+var \u5370\u306E\u5E45 = 18;
+function \u5F27\u306E\u9053(cx, cy, \u4E2D\u5FC3\u534A\u5F84, \u5E45, \u5272\u5408) {
+  const \u5916 = \u4E2D\u5FC3\u534A\u5F84 + \u5E45 / 2;
+  const \u5185 = Math.max(0.5, \u4E2D\u5FC3\u534A\u5F84 - \u5E45 / 2);
+  const a0 = -Math.PI / 2;
+  const a1 = a0 + \u5272\u5408 * Math.PI * 2;
+  const large = \u5272\u5408 > 0.5 ? 1 : 0;
+  const p = (r, a) => `${cx + r * Math.cos(a)} ${cy + r * Math.sin(a)}`;
+  return `M ${p(\u5916, a0)} A ${\u5916} ${\u5916} 0 ${large} 1 ${p(\u5916, a1)} L ${p(\u5185, a1)} A ${\u5185} ${\u5185} 0 ${large} 0 ${p(\u5185, a0)} Z`;
+}
+function \u5B9F\u5024\u8868\u8A183(v) {
+  return Number.isInteger(v) ? v.toLocaleString("en-US") : v.toLocaleString("en-US", { maximumFractionDigits: 1 });
+}
+function \u5272\u5408\u8868\u8A183(frac) {
+  const v = Math.round(frac * 1e3) / 10;
+  return `${Number.isInteger(v) ? v : v.toFixed(1)}%`;
+}
+function arcColor2(tone, idx) {
+  if (tone) return TONE[tone];
+  return chartSeriesColor(idx);
+}
+function ChartStatNode({
+  node,
+  active,
+  stateValues = {}
+}) {
+  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 \u533A\u753B = \u533A\u753B\u306E\u5272\u4ED8(node.w, node.h, data.length);
+  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
+      }
+    ),
+    data.map((d, idx) => {
+      const \u67A0 = \u533A\u753B.\u67A0(idx);
+      const frac = total > 0 ? d.value / total : 0;
+      const \u8272 = \u5370\u306E\u8272(d.tone, idx);
+      const \u6570\u5024 = \u5B9F\u5024\u8868\u8A184(d.value);
+      const \u6570\u5024\u306E\u7D1A = \u53CE\u3081\u308B\u7D1A(\u6570\u5024, \u67A0.w - \u533A\u753B.\u4F59\u767D * 2, \u533A\u753B.\u6570\u5024\u306E\u7D1A, \u533A\u753B.\u540D\u524D\u306E\u7D1A + 1);
+      return /* @__PURE__ */ jsxRuntime.jsxs("g", { "data-cdl-role": "chart-stat-item", transform: `translate(${\u67A0.x} ${\u67A0.y})`, children: [
+        idx > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+          "line",
+          {
+            "data-cdl-role": "chart-stat-divider",
+            x1: 0,
+            y1: \u533A\u753B.\u4F59\u767D,
+            x2: 0,
+            y2: \u67A0.h - \u533A\u753B.\u4F59\u767D,
+            stroke: "var(--cdl-divider, #d4d4d8)",
+            strokeWidth: 1
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "text",
+          {
+            "data-cdl-role": "chart-stat-label",
+            x: \u67A0.w / 2,
+            y: \u533A\u753B.\u540D\u524D\u306Ey,
+            fontSize: \u533A\u753B.\u540D\u524D\u306E\u7D1A,
+            fontWeight: 700,
+            textAnchor: "middle",
+            fill: "var(--cdl-text-dim, #5a6270)",
+            children: d.label
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "text",
+          {
+            "data-cdl-role": "chart-stat-value",
+            "data-cdl-unresolved": d.unresolved ? "true" : void 0,
+            x: \u67A0.w / 2,
+            y: \u533A\u753B.\u6570\u5024\u306Ey,
+            fontSize: \u6570\u5024\u306E\u7D1A,
+            fontWeight: 700,
+            textAnchor: "middle",
+            fill: \u8272,
+            children: \u6570\u5024
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "circle",
+          {
+            "data-cdl-role": "chart-stat-track",
+            cx: \u67A0.w / 2,
+            cy: \u533A\u753B.\u5F27\u306Ey,
+            r: \u533A\u753B.\u5F27\u306E\u534A\u5F84,
+            fill: "none",
+            stroke: "var(--cdl-divider, #d4d4d8)",
+            strokeWidth: \u533A\u753B.\u5F27\u306E\u592A\u3055,
+            strokeOpacity: 0.5
+          }
+        ),
+        frac > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            "data-cdl-role": "chart-stat-arc",
+            d: \u5F27\u306E\u90532(\u67A0.w / 2, \u533A\u753B.\u5F27\u306Ey, \u533A\u753B.\u5F27\u306E\u534A\u5F84, Math.min(frac, 0.9999)),
+            fill: "none",
+            stroke: \u8272,
+            strokeWidth: \u533A\u753B.\u5F27\u306E\u592A\u3055,
+            strokeLinecap: "round"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "text",
+          {
+            "data-cdl-role": "chart-stat-share",
+            x: \u67A0.w / 2,
+            y: \u533A\u753B.\u5272\u5408\u306Ey,
+            fontSize: \u533A\u753B.\u5272\u5408\u306E\u7D1A,
+            textAnchor: "middle",
+            fill: "var(--cdl-text-dim, #5a6270)",
+            children: \u5272\u5408\u8868\u8A184(frac)
+          }
+        )
+      ] }, `stat-${idx}`);
+    })
+  ] });
+}
+function \u533A\u753B\u306E\u5272\u4ED8(w, h, \u4EF6\u6570) {
+  const \u4F59\u767D = 20;
+  const \u5E45 = \u4EF6\u6570 > 0 ? w / \u4EF6\u6570 : w;
+  const \u540D\u524D\u306E\u7D1A = 14;
+  const \u6570\u5024\u306E\u7D1A = 40;
+  const \u5272\u5408\u306E\u7D1A = 12;
+  const \u5F27\u306E\u534A\u5F84 = 20;
+  const \u5F27\u306E\u592A\u3055 = 4;
+  const \u4E2D\u8EAB\u306E\u9AD8\u3055 = \u540D\u524D\u306E\u7D1A + 12 + \u6570\u5024\u306E\u7D1A + 16 + \u5F27\u306E\u534A\u5F84 * 2 + 8 + \u5272\u5408\u306E\u7D1A;
+  const \u4E0A\u7AEF = Math.max(\u4F59\u767D, (h - \u4E2D\u8EAB\u306E\u9AD8\u3055) / 2);
+  const \u540D\u524D\u306Ey = \u4E0A\u7AEF + \u540D\u524D\u306E\u7D1A;
+  const \u6570\u5024\u306Ey = \u540D\u524D\u306Ey + 12 + \u6570\u5024\u306E\u7D1A * 0.78;
+  const \u5F27\u306Ey = \u6570\u5024\u306Ey + 16 + \u5F27\u306E\u534A\u5F84;
+  const \u5272\u5408\u306Ey = \u5F27\u306Ey + \u5F27\u306E\u534A\u5F84 + 8 + \u5272\u5408\u306E\u7D1A;
+  return {
+    \u4F59\u767D,
+    \u540D\u524D\u306E\u7D1A,
+    \u6570\u5024\u306E\u7D1A,
+    \u5272\u5408\u306E\u7D1A,
+    \u5F27\u306E\u534A\u5F84,
+    \u5F27\u306E\u592A\u3055,
+    \u540D\u524D\u306Ey,
+    \u6570\u5024\u306Ey,
+    \u5F27\u306Ey,
+    \u5272\u5408\u306Ey,
+    \u67A0: (idx) => ({ x: \u5E45 * idx, y: 0, w: \u5E45, h })
+  };
+}
+function \u53CE\u3081\u308B\u7D1A(\u5B57, \u4F7F\u3048\u308B\u5E452, \u521D\u671F, \u4E0B\u9650) {
+  let \u7D1A = \u521D\u671F;
+  while (\u7D1A > \u4E0B\u9650 && textWidth(\u5B57, \u7D1A) > \u4F7F\u3048\u308B\u5E452) \u7D1A -= 1;
+  return \u7D1A;
+}
+function \u5F27\u306E\u90532(cx, cy, r, \u5272\u5408) {
+  const a0 = -Math.PI / 2;
+  const a1 = a0 + \u5272\u5408 * Math.PI * 2;
+  const large = \u5272\u5408 > 0.5 ? 1 : 0;
+  const p = (a) => `${cx + r * Math.cos(a)} ${cy + r * Math.sin(a)}`;
+  return `M ${p(a0)} A ${r} ${r} 0 ${large} 1 ${p(a1)}`;
+}
+function \u5B9F\u5024\u8868\u8A184(v) {
+  return Number.isInteger(v) ? v.toLocaleString("en-US") : v.toLocaleString("en-US", { maximumFractionDigits: 1 });
+}
+function \u5272\u5408\u8868\u8A184(frac) {
+  const v = Math.round(frac * 1e3) / 10;
+  return `${Number.isInteger(v) ? v : v.toFixed(1)}%`;
+}
+function \u5370\u306E\u8272(tone, idx) {
+  if (tone) return TONE[tone];
+  return chartSeriesColor(idx);
+}
+var WAFFLE_TOTAL = 100;
+var WAFFLE_COLS = 10;
+function \u5370\u306E\u5272\u4ED8(\u5024) {
+  const \u5408\u8A08 = \u5024.reduce((a, v) => a + Math.max(0, v), 0);
+  if (\u5408\u8A08 <= 0) return \u5024.map(() => 0);
+  const \u751F = \u5024.map((v) => Math.max(0, v) / \u5408\u8A08 * WAFFLE_TOTAL);
+  const \u914D\u5206 = \u751F.map((v) => Math.floor(v));
+  let \u4F59\u308A = WAFFLE_TOTAL - \u914D\u5206.reduce((a, v) => a + v, 0);
+  const \u9806 = \u751F.map((v, i) => ({ i, \u5C0F\u6570\u90E8: v - Math.floor(v) })).sort((a, b) => b.\u5C0F\u6570\u90E8 - a.\u5C0F\u6570\u90E8 || a.i - b.i);
+  for (let k = 0; \u4F59\u308A > 0; k = (k + 1) % \u9806.length) {
+    const i = \u9806[k].i;
+    \u914D\u5206[i] = (\u914D\u5206[i] ?? 0) + 1;
+    \u4F59\u308A -= 1;
+  }
+  return \u914D\u5206;
+}
+function ChartWaffleNode({
+  node,
+  active,
+  stateValues = {}
+}) {
+  const x0 = node.cx - node.w / 2;
+  const y0 = node.cy - node.h / 2;
+  const data = resolveChartData(node.chartData ?? [], stateValues);
+  const \u914D\u5206 = \u5370\u306E\u5272\u4ED8(data.map((d) => d.value));
+  const PAD = 20;
+  const \u540D\u524D\u306E\u7D1A = 14;
+  const \u6570\u5024\u306E\u7D1A = 13;
+  const \u884C\u306E\u9AD8\u3055 = 40;
+  const \u4E00\u89A7\u3068\u683C\u5B50\u306E\u9593 = 28;
+  const \u5370\u306E\u5E452 = 18;
+  const \u6570\u5024\u306E\u6587\u5B57 = data.map((d, i) => `${\u5B9F\u5024\u8868\u8A185(d.value)}  ${\u914D\u5206[i] ?? 0}%`);
+  const \u4E00\u89A7\u306E\u5E45 = \u5370\u306E\u5E452 + Math.max(
+    0,
+    ...data.map(
+      (d, i) => Math.max(textWidth(d.label ?? "", \u540D\u524D\u306E\u7D1A), textWidth(\u6570\u5024\u306E\u6587\u5B57[i] ?? "", \u6570\u5024\u306E\u7D1A))
+    )
+  );
+  const \u4F7F\u3048\u308B\u9AD8\u3055 = node.h - PAD * 2;
+  const \u683C\u5B50\u306B\u4F7F\u3048\u308B\u5E45 = node.w - PAD * 2 - \u4E00\u89A7\u306E\u5E45 - \u4E00\u89A7\u3068\u683C\u5B50\u306E\u9593;
+  const \u5347 = Math.max(4, Math.min(\u4F7F\u3048\u308B\u9AD8\u3055, \u683C\u5B50\u306B\u4F7F\u3048\u308B\u5E45) / WAFFLE_COLS);
+  const \u5370 = \u5347 * 0.78;
+  const \u683C\u5B50\u306E\u5DE6 = PAD + \u4E00\u89A7\u306E\u5E45 + \u4E00\u89A7\u3068\u683C\u5B50\u306E\u9593;
+  const \u683C\u5B50\u306E\u4E0A = PAD + (\u4F7F\u3048\u308B\u9AD8\u3055 - \u5347 * WAFFLE_COLS) / 2;
+  const \u6301\u3061\u4E3B = [];
+  \u914D\u5206.forEach((n, idx) => {
+    for (let k = 0; k < n; k++) \u6301\u3061\u4E3B.push(idx);
+  });
+  const \u4E00\u89A7\u306E\u59CB\u307E\u308A = PAD + (\u4F7F\u3048\u308B\u9AD8\u3055 - \u884C\u306E\u9AD8\u3055 * data.length) / 2 + \u884C\u306E\u9AD8\u3055 / 2;
+  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
+      }
+    ),
+    Array.from({ length: WAFFLE_TOTAL }, (_, k) => {
+      const \u884C = Math.floor(k / WAFFLE_COLS);
+      const \u5217 = k % WAFFLE_COLS;
+      const owner = \u6301\u3061\u4E3B[k];
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "rect",
+        {
+          "data-cdl-role": "chart-waffle-cell",
+          "data-cdl-waffle-owner": owner === void 0 ? "" : String(owner),
+          x: \u683C\u5B50\u306E\u5DE6 + \u5347 * \u5217 + (\u5347 - \u5370) / 2,
+          y: \u683C\u5B50\u306E\u4E0A + \u5347 * \u884C + (\u5347 - \u5370) / 2,
+          width: \u5370,
+          height: \u5370,
+          rx: 2,
+          fill: owner === void 0 ? "var(--cdl-divider, #d4d4d8)" : \u5370\u306E\u82722(data[owner].tone, owner),
+          fillOpacity: owner === void 0 ? 0.35 : 1
+        },
+        `cell-${k}`
+      );
+    }),
+    data.map((d, idx) => {
+      const y = \u4E00\u89A7\u306E\u59CB\u307E\u308A + \u884C\u306E\u9AD8\u3055 * idx;
+      return /* @__PURE__ */ jsxRuntime.jsxs("g", { "data-cdl-role": "chart-waffle-item", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: PAD, y: y - 11, width: 4, height: 22, rx: 2, fill: \u5370\u306E\u82722(d.tone, idx) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "text",
+          {
+            x: PAD + \u5370\u306E\u5E452,
+            y: y + 1,
+            fontSize: \u540D\u524D\u306E\u7D1A,
+            fontWeight: 700,
+            fill: "var(--cdl-text, #1a1f2a)",
+            children: d.label
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "text",
+          {
+            "data-cdl-role": "chart-waffle-count",
+            "data-cdl-unresolved": d.unresolved ? "true" : void 0,
+            x: PAD + \u5370\u306E\u5E452,
+            y: y + 20,
+            fontSize: \u6570\u5024\u306E\u7D1A,
+            fill: "var(--cdl-text-dim, #5a6270)",
+            children: \u6570\u5024\u306E\u6587\u5B57[idx]
+          }
+        )
+      ] }, `item-${idx}`);
+    })
+  ] });
+}
+function \u5B9F\u5024\u8868\u8A185(v) {
+  return Number.isInteger(v) ? v.toLocaleString("en-US") : v.toLocaleString("en-US", { maximumFractionDigits: 1 });
+}
+function \u5370\u306E\u82722(tone, idx) {
+  if (tone) return TONE[tone];
+  return chartSeriesColor(idx);
+}
+var SLICE_MIN_W_FOR_TEXT = 44;
+var SLICE_MIN_W_FOR_VALUE = 84;
+function ChartStackedBarNode({
+  node,
+  active,
+  stateValues = {}
+}) {
+  const x0 = node.cx - node.w / 2;
+  const y0 = node.cy - node.h / 2;
+  const data = resolveChartData(node.chartData ?? [], stateValues);
+  const \u5E2F\u305F\u3061 = \u5E2F\u306E\u4E26\u3073(data);
+  const PAD = 24;
+  const \u540D\u524D\u306E\u7D1A = 13;
+  const \u533A\u753B\u306E\u7D1A = 12;
+  const \u6642\u70B9\u306E\u7D1A = 13;
+  const \u6642\u70B9\u306E\u5E45 = Math.max(0, ...\u5E2F\u305F\u3061.map((b) => textWidth(b.\u540D\u524D, \u6642\u70B9\u306E\u7D1A))) + (\u5E2F\u305F\u3061.length > 1 ? 16 : 0);
+  const \u5E2F\u306E\u5DE6 = PAD + \u6642\u70B9\u306E\u5E45;
+  const \u5E2F\u306E\u5E45 = Math.max(40, node.w - \u5E2F\u306E\u5DE6 - PAD);
+  const \u5E2F\u306E\u9AD8\u3055 = 44;
+  const \u5E2F\u306E\u9593 = 20;
+  const \u4E00\u89A7\u306E\u9AD8\u3055 = 26;
+  const \u5168\u4F53\u306E\u9AD8\u3055 = \u5E2F\u305F\u3061.length * \u5E2F\u306E\u9AD8\u3055 + (\u5E2F\u305F\u3061.length - 1) * \u5E2F\u306E\u9593 + 16 + \u4E00\u89A7\u306E\u9AD8\u3055;
+  const \u4E0A\u7AEF = Math.max(PAD, (node.h - \u5168\u4F53\u306E\u9AD8\u3055) / 2);
+  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
+      }
+    ),
+    \u5E2F\u305F\u3061.map((\u5E2F, \u6BB5) => {
+      const y = \u4E0A\u7AEF + \u6BB5 * (\u5E2F\u306E\u9AD8\u3055 + \u5E2F\u306E\u9593);
+      let \u5DE6 = \u5E2F\u306E\u5DE6;
+      return /* @__PURE__ */ jsxRuntime.jsxs("g", { "data-cdl-role": "chart-stacked-bar-row", children: [
+        \u5E2F\u305F\u3061.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(
+          "text",
+          {
+            "data-cdl-role": "chart-stacked-bar-period",
+            x: PAD,
+            y: y + \u5E2F\u306E\u9AD8\u3055 / 2 + 4,
+            fontSize: \u6642\u70B9\u306E\u7D1A,
+            fontWeight: 700,
+            fill: "var(--cdl-text-dim, #5a6270)",
+            children: \u5E2F.\u540D\u524D
+          }
+        ),
+        \u5E2F.\u533A\u753B.map((s, idx) => {
+          const w = \u5E2F\u306E\u5E45 * s.\u5272\u5408;
+          const x = \u5DE6;
+          \u5DE6 += w;
+          const \u8272 = \u5370\u306E\u82723(s.tone, idx);
+          return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "rect",
+              {
+                "data-cdl-role": "chart-stacked-bar-slice",
+                "data-cdl-unresolved": s.unresolved ? "true" : void 0,
+                x,
+                y,
+                width: Math.max(0, w),
+                height: \u5E2F\u306E\u9AD8\u3055,
+                fill: \u8272
+              }
+            ),
+            w >= SLICE_MIN_W_FOR_TEXT && /* @__PURE__ */ jsxRuntime.jsx(
+              "text",
+              {
+                "data-cdl-role": "chart-stacked-bar-slice-text",
+                x: x + w / 2,
+                y: y + \u5E2F\u306E\u9AD8\u3055 / 2 + (w >= SLICE_MIN_W_FOR_VALUE ? -2 : 4),
+                fontSize: \u533A\u753B\u306E\u7D1A,
+                fontWeight: 700,
+                textAnchor: "middle",
+                fill: "#ffffff",
+                children: \u5272\u5408\u8868\u8A185(s.\u5272\u5408)
+              }
+            ),
+            w >= SLICE_MIN_W_FOR_VALUE && /* @__PURE__ */ jsxRuntime.jsx(
+              "text",
+              {
+                "data-cdl-role": "chart-stacked-bar-slice-value",
+                x: x + w / 2,
+                y: y + \u5E2F\u306E\u9AD8\u3055 / 2 + 13,
+                fontSize: \u533A\u753B\u306E\u7D1A - 1,
+                textAnchor: "middle",
+                fill: "#ffffff",
+                fillOpacity: 0.85,
+                children: \u5B9F\u5024\u8868\u8A186(s.\u5B9F\u5024)
+              }
+            )
+          ] }, `slice-${idx}`);
+        })
+      ] }, `bar-${\u6BB5}`);
+    }),
+    \u4E00\u89A7\u306E\u4E26\u3073(data, \u5E2F\u306E\u5DE6, node.w - PAD, \u540D\u524D\u306E\u7D1A).map(({ d, idx, x, \u884C }) => {
+      const y = \u4E0A\u7AEF + \u5E2F\u305F\u3061.length * (\u5E2F\u306E\u9AD8\u3055 + \u5E2F\u306E\u9593) - \u5E2F\u306E\u9593 + 16 + \u4E00\u89A7\u306E\u9AD8\u3055 / 2 + \u884C * \u4E00\u89A7\u306E\u9AD8\u3055;
+      return /* @__PURE__ */ jsxRuntime.jsxs("g", { "data-cdl-role": "chart-stacked-bar-legend", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x, y: y - 5, width: 10, height: 10, rx: 2, fill: \u5370\u306E\u82723(d.tone, idx) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "text",
+          {
+            x: x + 16,
+            y: y + 4,
+            fontSize: \u540D\u524D\u306E\u7D1A,
+            fill: "var(--cdl-text, #1a1f2a)",
+            children: d.label
+          }
+        )
+      ] }, `legend-${idx}`);
+    })
+  ] });
+}
+function \u5E2F\u306E\u4E26\u3073(data) {
+  const \u524D\u3042\u308A = data.some((d) => d.previous !== void 0);
+  const \u4ECA = \u5E2F\u3092\u7D44\u3080("\u4ECA", data, (d) => d.value);
+  if (!\u524D\u3042\u308A) return [\u4ECA];
+  return [\u5E2F\u3092\u7D44\u3080("\u524D", data, (d) => d.previous ?? 0), \u4ECA];
+}
+function \u5E2F\u3092\u7D44\u3080(\u540D\u524D, data, \u53D6\u308B) {
+  const \u5024 = data.map((d) => Math.max(0, \u53D6\u308B(d)));
+  const \u5408\u8A08 = \u5024.reduce((a, v) => a + v, 0);
+  return {
+    \u540D\u524D,
+    \u533A\u753B: data.map((d, i) => ({
+      // 合計 0 の帯は区画を持たない (0 で割らない)。 幅 0 の区画として並べる
+      \u5272\u5408: \u5408\u8A08 > 0 ? \u5024[i] / \u5408\u8A08 : 0,
+      \u5B9F\u5024: \u5024[i],
+      tone: d.tone,
+      ...d.unresolved ? { unresolved: true } : {}
+    }))
+  };
+}
+function \u5B9F\u5024\u8868\u8A186(v) {
+  return Number.isInteger(v) ? v.toLocaleString("en-US") : v.toLocaleString("en-US", { maximumFractionDigits: 1 });
+}
+function \u5272\u5408\u8868\u8A185(frac) {
+  const v = Math.round(frac * 1e3) / 10;
+  return `${Number.isInteger(v) ? v : v.toFixed(1)}%`;
+}
+function \u5370\u306E\u82723(tone, idx) {
+  if (tone) return TONE[tone];
+  return chartSeriesColor(idx);
+}
+var \u5370\u304B\u3089\u540D\u524D\u307E\u3067 = 16;
+var \u4EF6\u306E\u9593 = 10;
+function \u4E00\u89A7\u306E\u4E26\u3073(data, \u5DE6, \u53F3\u7AEF, \u7D1A) {
+  const out = [];
+  let x = \u5DE6;
+  let \u884C = 0;
+  data.forEach((d, idx) => {
+    const \u5E45 = \u5370\u304B\u3089\u540D\u524D\u307E\u3067 + textWidth(d.label ?? "", \u7D1A);
+    if (x > \u5DE6 && x + \u5E45 > \u53F3\u7AEF) {
+      \u884C += 1;
+      x = \u5DE6;
+    }
+    out.push({ d, idx, x, \u884C });
+    x += \u5E45 + \u4EF6\u306E\u9593;
+  });
+  return out;
 }
 function ChartBarNode({
   node,
@@ -12496,6 +13541,16 @@ function CdlNodeView({
             progress
           }
         );
+      case "chart-gauge":
+        return /* @__PURE__ */ jsxRuntime.jsx(ChartGaugeNode, { node: resolvedNode, active, stateValues });
+      case "chart-stacked-bar":
+        return /* @__PURE__ */ jsxRuntime.jsx(ChartStackedBarNode, { node: resolvedNode, active, stateValues });
+      case "chart-waffle":
+        return /* @__PURE__ */ jsxRuntime.jsx(ChartWaffleNode, { node: resolvedNode, active, stateValues });
+      case "chart-stat":
+        return /* @__PURE__ */ jsxRuntime.jsx(ChartStatNode, { node: resolvedNode, active, stateValues });
+      case "chart-radial":
+        return /* @__PURE__ */ jsxRuntime.jsx(ChartRadialNode, { node: resolvedNode, active, stateValues });
       case "chart-bar":
         return /* @__PURE__ */ jsxRuntime.jsx(
           ChartBarNode,
@@ -12662,6 +13717,10 @@ function CdlNodeView({
         return /* @__PURE__ */ jsxRuntime.jsx(ShapeTraderNode, { node: resolvedNode, active });
       case "shape-customer-service":
         return /* @__PURE__ */ jsxRuntime.jsx(ShapeCustomerServiceNode, { node: resolvedNode, active });
+      case "mark-start":
+        return /* @__PURE__ */ jsxRuntime.jsx(MarkStartNode, { node: resolvedNode, active });
+      case "mark-end":
+        return /* @__PURE__ */ jsxRuntime.jsx(MarkEndNode, { node: resolvedNode, active });
       default:
         return /* @__PURE__ */ jsxRuntime.jsx(GenericNode, { node: resolvedNode, active, value: node.value, stateValues });
     }
@@ -12731,6 +13790,21 @@ function uniformLifelineEndY(lanes, nodes, starts = lifelineStartYs(nodes)) {
   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,
@@ -12742,6 +13816,7 @@ function CdlStage({
 }) {
   const activeSet = new Set(currentPhase?.activate ?? []);
   const drawSet = new Set(currentPhase?.draw ?? []);
+  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);
     return {
@@ -12766,21 +13841,38 @@ function CdlStage({
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs("defs", { children: [
             Object.entries(TONE).flatMap(
-              ([tone, color]) => [["", 14], ["-sm", 10]].map(([suffix, size]) => /* @__PURE__ */ jsxRuntime.jsx(
-                "marker",
-                {
-                  id: `cdl-arrow-${tone}${suffix}`,
-                  viewBox: "0 0 10 10",
-                  refX: "9",
-                  refY: "5",
-                  markerWidth: size,
-                  markerHeight: size,
-                  markerUnits: "userSpaceOnUse",
-                  orient: "auto-start-reverse",
-                  children: /* @__PURE__ */ jsxRuntime.jsx("path", { "data-cdl-role": "edge-arrowhead", d: "M 0 0 L 10 5 L 0 10 z", fill: color })
-                },
-                `${tone}${suffix}`
-              ))
+              ([tone, color]) => [["", 14], ["-sm", 10]].flatMap(
+                ([suffix, size]) => EDGE_HEADS.map((head) => {
+                  const \u5F62 = EDGE_HEAD_SHAPE[head];
+                  return /* @__PURE__ */ jsxRuntime.jsx(
+                    "marker",
+                    {
+                      id: edgeHeadMarkerId(tone, head, suffix === "-sm"),
+                      viewBox: "0 0 10 10",
+                      refX: \u5F62.refX,
+                      refY: "5",
+                      markerWidth: size,
+                      markerHeight: size,
+                      markerUnits: "userSpaceOnUse",
+                      orient: "auto-start-reverse",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(
+                        "path",
+                        {
+                          "data-cdl-role": "edge-arrowhead",
+                          "data-cdl-edge-head": head,
+                          d: \u5F62.d,
+                          fill: \u5F62.filled ? color : "none",
+                          stroke: \u5F62.filled ? "none" : color,
+                          strokeWidth: \u5F62.filled ? void 0 : 1.6,
+                          strokeLinecap: \u5F62.filled ? void 0 : "round",
+                          strokeLinejoin: \u5F62.filled ? void 0 : "round"
+                        }
+                      )
+                    },
+                    `${tone}${suffix}-${head}`
+                  );
+                })
+              )
             ),
             /* @__PURE__ */ jsxRuntime.jsx(
               "marker",
@@ -12873,13 +13965,14 @@ function CdlStage({
           )),
           laid.edges.map((edge) => /* @__PURE__ */ jsxRuntime.jsx(CdlEdgeView, { edge, active: activeSet.has(edge.id), progress, stateValues }, edge.id)),
           laid.nodes.map((node) => {
+            const \u63CF\u304F = drawSet.has(node.id);
             const view = /* @__PURE__ */ jsxRuntime.jsx(
               CdlNodeView,
               {
                 node,
                 active: activeSet.has(node.id),
-                drawing: drawSet.has(node.id),
-                progress,
+                drawing: \u63CF\u304F,
+                progress: \u63CF\u304F ? \u63CF\u304F\u9032\u307F : progress,
                 stateValues,
                 currentPhaseId: currentPhase?.id
               }
@@ -21692,6 +22785,11 @@ var GRID_ALIGNED_KINDS = /* @__PURE__ */ new Set([
   "chart-pie",
   "chart-line",
   "chart-bar",
+  "chart-gauge",
+  "chart-radial",
+  "chart-stat",
+  "chart-waffle",
+  "chart-stacked-bar",
   "funnel-stages",
   "quadrant-matrix"
 ]);
@@ -21781,6 +22879,7 @@ function emptyCounts() {
     "row-gap-uniform": 0,
     "column-gap-uniform": 0,
     "rows-not-rendered": 0,
+    "title-row-overlap": 0,
     "malformed-input": 0,
     "validation-interrupted": 0
   };
@@ -22911,6 +24010,21 @@ function runAxes(laid, diag, violations, counts, push, profile, skippedAxes) {
       `node "${n.id}" (kind=${n.kind ?? "\u672A\u6307\u5B9A"}) \u304C rows ${n.rows.length} \u884C\u3092\u6301\u3064\u304C\u3001 \u3053\u306E\u7A2E\u5225\u306F\u884C\u3092\u63CF\u304B\u306A\u3044 (\u66F8\u3044\u305F\u5185\u5BB9\u304C\u753B\u9762\u306B\u51FA\u306A\u3044)`
     );
   }
+  for (const n of diag.nodes) {
+    if (!n.rows || n.rows.length === 0) continue;
+    if (!rendersRows(n.kind)) continue;
+    if (n.kind === "storage") continue;
+    if (typeof n.h !== "number") continue;
+    const \u984C = genericTitleBaselineY(n.kind, n.h, true);
+    const \u884C = rowBaselineY(n.kind, 0);
+    if (\u884C === null) continue;
+    const \u9593 = \u884C - \u984C;
+    if (\u9593 >= TITLE_ROW_MIN_GAP) continue;
+    push(
+      "title-row-overlap",
+      `node "${n.id}" (kind=${n.kind ?? "\u672A\u6307\u5B9A"}) \u306E\u984C baseline y=${\u984C.toFixed(0)} \u3068 1 \u884C\u76EE baseline y=${\u884C.toFixed(0)} \u306E\u9593\u304C ${\u9593.toFixed(0)} world \u3067\u3001 \u898B\u8FBC\u3080\u5B57\u5F62\u306E\u9AD8\u3055 ${TITLE_ROW_MIN_GAP.toFixed(0)} \u306B\u5C4A\u304B\u306A\u3044 (\u5B57\u304C\u91CD\u306A\u308B)`
+    );
+  }
   const GROUP_INTERNAL_PAD = 20;
   const GROUP_EXTERNAL_CLEAR = 16;
   for (const lane of laid.lanes) {
@@ -23268,6 +24382,12 @@ function runAxes(laid, diag, violations, counts, push, profile, skippedAxes) {
         `edge "${e.id}" tone "${e.tone}" \u304C TONE_COLORS \u5B9A\u7FA9\u306B\u5B58\u5728\u3057\u306A\u3044\u3001 marker "cdl-arrow-${e.tone}" dead ref`
       );
     }
+    if (e.head !== void 0 && !EDGE_HEADS.includes(e.head)) {
+      push(
+        "marker-gradient-def-integrity",
+        `edge "${e.id}" head "${e.head}" \u304C EDGE_HEADS \u5B9A\u7FA9\u306B\u5B58\u5728\u3057\u306A\u3044\u3001 marker "cdl-arrow-${e.tone}-${e.head}" dead ref`
+      );
+    }
   }
   const SUBPIXEL_TOL = 0.5;
   function isSubpixel(v) {