@cardenelabs/cdl 0.13.1 → 0.15.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) {
@@ -6648,20 +6909,20 @@ function ChartLineNode({
   const x0 = node.cx - node.w / 2;
   const y0 = node.cy - node.h / 2;
   const data = resolveChartData(node.chartData ?? [], stateValues);
-  const PAD_TOP = 36;
-  const PAD_RIGHT = 40;
-  const PAD_BOTTOM = 56;
-  const PAD_LEFT = 72;
-  const canvasW = node.w - PAD_LEFT - PAD_RIGHT;
-  const canvasH = node.h - PAD_TOP - PAD_BOTTOM;
+  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_TOP + LABEL_ROOM;
+  const plotTop = PAD_TOP2 + LABEL_ROOM;
   const plotH = Math.max(canvasH - LABEL_ROOM * 2, 1);
-  const xAt = (idx) => PAD_LEFT + (data.length <= 1 ? canvasW / 2 : canvasW * idx / (data.length - 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 = [];
@@ -6706,9 +6967,9 @@ function ChartLineNode({
       /* @__PURE__ */ jsxRuntime.jsx(
         "line",
         {
-          x1: PAD_LEFT,
+          x1: PAD_LEFT2,
           y1: t.y,
-          x2: PAD_LEFT + canvasW,
+          x2: PAD_LEFT2 + canvasW,
           y2: t.y,
           stroke: "var(--cdl-divider, #d4d4d8)",
           strokeWidth: 0.75,
@@ -6719,7 +6980,7 @@ function ChartLineNode({
       /* @__PURE__ */ jsxRuntime.jsx(
         "text",
         {
-          x: PAD_LEFT - 8,
+          x: PAD_LEFT2 - 8,
           y: t.y + 4,
           fontSize: 11,
           textAnchor: "end",
@@ -6731,9 +6992,9 @@ function ChartLineNode({
     /* @__PURE__ */ jsxRuntime.jsx(
       "line",
       {
-        x1: PAD_LEFT,
+        x1: PAD_LEFT2,
         y1: plotTop + plotH,
-        x2: PAD_LEFT + canvasW,
+        x2: PAD_LEFT2 + canvasW,
         y2: plotTop + plotH,
         stroke: "var(--cdl-text-mute, #8a8678)",
         strokeWidth: 1.25
@@ -6742,9 +7003,9 @@ function ChartLineNode({
     /* @__PURE__ */ jsxRuntime.jsx(
       "line",
       {
-        x1: PAD_LEFT,
+        x1: PAD_LEFT2,
         y1: plotTop,
-        x2: PAD_LEFT,
+        x2: PAD_LEFT2,
         y2: plotTop + plotH,
         stroke: "var(--cdl-text-mute, #8a8678)",
         strokeWidth: 1.25
@@ -6812,7 +7073,7 @@ function ChartLineNode({
           "text",
           {
             x: cx,
-            y: PAD_TOP + canvasH + 20,
+            y: PAD_TOP2 + canvasH + 20,
             fontSize: 12,
             textAnchor: "middle",
             fill: "var(--cdl-text-dim, #5a6270)",
@@ -6835,13 +7096,29 @@ function ChartPieNode({
   const y0 = node.cy - node.h / 2;
   const data = resolveChartData(node.chartData ?? [], stateValues);
   const total = data.reduce((acc, d) => acc + d.value, 0) || 1;
-  const PAD_TOP = 20;
-  const PAD_BOTTOM = 20;
-  const chartAreaH = node.h - PAD_TOP - PAD_BOTTOM;
-  const pieAreaW = node.w * 0.5;
-  const radius = Math.min(pieAreaW, chartAreaH) / 2 - 12;
-  const cx = pieAreaW / 2;
-  const cy = PAD_TOP + chartAreaH / 2;
+  const PAD_TOP2 = 20;
+  const PAD_BOTTOM2 = 20;
+  const PAD_SIDE = 20;
+  const chartAreaH = node.h - PAD_TOP2 - PAD_BOTTOM2;
+  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;
   const slices = data.map((d) => {
@@ -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_TOP + (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,
@@ -6957,26 +8002,26 @@ function ChartBarNode({
   const x0 = node.cx - node.w / 2;
   const y0 = node.cy - node.h / 2;
   const data = resolveChartData(node.chartData ?? [], stateValues);
-  const PAD_TOP = 20;
-  const PAD_RIGHT = 24;
-  const PAD_BOTTOM = 44;
-  const PAD_LEFT = 60;
-  const canvasW = node.w - PAD_LEFT - PAD_RIGHT;
-  const canvasH = node.h - PAD_TOP - PAD_BOTTOM;
+  const PAD_TOP2 = 20;
+  const PAD_RIGHT2 = 24;
+  const PAD_BOTTOM2 = 44;
+  const PAD_LEFT2 = 60;
+  const canvasW = node.w - PAD_LEFT2 - PAD_RIGHT2;
+  const canvasH = node.h - PAD_TOP2 - PAD_BOTTOM2;
   const vMax = data.length > 0 ? Math.max(...data.map((d) => d.value)) : 1;
   const vRange = vMax || 1;
   const barGap = 10;
   const barCount = data.length || 1;
   const barW = (canvasW - barGap * (barCount + 1)) / barCount;
-  const yAt = (v) => PAD_TOP + canvasH - v / vRange * canvasH;
-  const xAt = (idx) => PAD_LEFT + barGap + idx * (barW + barGap);
+  const yAt = (v) => PAD_TOP2 + canvasH - v / vRange * canvasH;
+  const xAt = (idx) => PAD_LEFT2 + barGap + idx * (barW + barGap);
   const gridCount = 4;
   const gridTicks = Array.from({ length: gridCount + 1 }, (_, i) => {
     const v = vMax * i / gridCount;
     return { y: yAt(v), value: v };
   });
   const \u4F38\u3073 = \u9032\u307F\u3092\u7573\u3080(drawing, progress);
-  const \u6A2A\u8EF8\u306Ey = PAD_TOP + canvasH;
+  const \u6A2A\u8EF8\u306Ey = PAD_TOP2 + canvasH;
   return /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `translate(${x0} ${y0})`, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "rect",
@@ -6996,9 +8041,9 @@ function ChartBarNode({
       /* @__PURE__ */ jsxRuntime.jsx(
         "line",
         {
-          x1: PAD_LEFT,
+          x1: PAD_LEFT2,
           y1: t.y,
-          x2: PAD_LEFT + canvasW,
+          x2: PAD_LEFT2 + canvasW,
           y2: t.y,
           stroke: "var(--cdl-divider, #d4d4d8)",
           strokeWidth: 0.75,
@@ -7009,7 +8054,7 @@ function ChartBarNode({
       /* @__PURE__ */ jsxRuntime.jsx(
         "text",
         {
-          x: PAD_LEFT - 8,
+          x: PAD_LEFT2 - 8,
           y: t.y + 4,
           fontSize: 11,
           textAnchor: "end",
@@ -7021,10 +8066,10 @@ function ChartBarNode({
     /* @__PURE__ */ jsxRuntime.jsx(
       "line",
       {
-        x1: PAD_LEFT,
-        y1: PAD_TOP + canvasH,
-        x2: PAD_LEFT + canvasW,
-        y2: PAD_TOP + canvasH,
+        x1: PAD_LEFT2,
+        y1: PAD_TOP2 + canvasH,
+        x2: PAD_LEFT2 + canvasW,
+        y2: PAD_TOP2 + canvasH,
         stroke: "var(--cdl-text-mute, #8a8678)",
         strokeWidth: 1.25
       }
@@ -7032,7 +8077,7 @@ function ChartBarNode({
     data.map((d, idx) => {
       const bx = xAt(idx);
       const by = yAt(d.value);
-      const bh = PAD_TOP + canvasH - by;
+      const bh = PAD_TOP2 + canvasH - by;
       const \u898B\u3048\u3066\u3044\u308B\u982D = \u6A2A\u8EF8\u306Ey - (\u6A2A\u8EF8\u306Ey - by) * \u4F38\u3073;
       const \u68D2 = /* @__PURE__ */ jsxRuntime.jsx(
         "rect",
@@ -7065,7 +8110,7 @@ function ChartBarNode({
           "text",
           {
             x: bx + barW / 2,
-            y: PAD_TOP + canvasH + 18,
+            y: PAD_TOP2 + canvasH + 18,
             fontSize: 12,
             textAnchor: "middle",
             fill: "var(--cdl-text-dim, #5a6270)",
@@ -7086,12 +8131,12 @@ function GanttNode({
   const x0 = node.cx - node.w / 2;
   const y0 = node.cy - node.h / 2;
   const tasks = resolveGanttData(node.ganttData ?? [], stateValues);
-  const PAD_TOP = 32;
-  const PAD_RIGHT = 48;
-  const PAD_BOTTOM = 44;
-  const PAD_LEFT = 156;
-  const canvasW = node.w - PAD_LEFT - PAD_RIGHT;
-  const canvasH = node.h - PAD_TOP - PAD_BOTTOM;
+  const PAD_TOP2 = 32;
+  const PAD_RIGHT2 = 48;
+  const PAD_BOTTOM2 = 44;
+  const PAD_LEFT2 = 156;
+  const canvasW = node.w - PAD_LEFT2 - PAD_RIGHT2;
+  const canvasH = node.h - PAD_TOP2 - PAD_BOTTOM2;
   const rowGap = 20;
   const rowCount = tasks.length || 1;
   const rowH = Math.max(28, (canvasH - rowGap * (rowCount + 1)) / rowCount);
@@ -7118,8 +8163,8 @@ function GanttNode({
   const \u76EE\u76DB\u308A\u306E\u4E0A\u9650 = 200;
   const \u76EE\u76DB\u308A\u306E\u9593\u9694 = Math.max(1, Math.ceil(maxIdx / \u76EE\u76DB\u308A\u306E\u4E0A\u9650));
   const \u76EE\u76DB\u308A\u306E\u672C\u6570 = Math.ceil(maxIdx / \u76EE\u76DB\u308A\u306E\u9593\u9694);
-  const xAt = (idx) => PAD_LEFT + idx * cellW;
-  const yAt = (row) => PAD_TOP + rowGap + row * (rowH + rowGap);
+  const xAt = (idx) => PAD_LEFT2 + idx * cellW;
+  const yAt = (row) => PAD_TOP2 + rowGap + row * (rowH + rowGap);
   const \u540D\u524D = { \u6574\u6570\u306E\u958B\u59CB: /* @__PURE__ */ new Map(), \u6574\u6570\u306E\u7D42\u4E86: /* @__PURE__ */ new Map(), \u7AEF\u6570\u306E\u958B\u59CB: /* @__PURE__ */ new Map(), \u7AEF\u6570\u306E\u7D42\u4E86: /* @__PURE__ */ new Map() };
   const \u7F6E\u304F = (\u8868, \u4F4D\u7F6E, label) => {
     if (label !== "" && Number.isFinite(\u4F4D\u7F6E) && !\u8868.has(\u4F4D\u7F6E)) \u8868.set(\u4F4D\u7F6E, label);
@@ -7164,9 +8209,9 @@ function GanttNode({
         {
           "data-cdl-role": "gantt-grid",
           x1: xAt(i),
-          y1: PAD_TOP,
+          y1: PAD_TOP2,
           x2: xAt(i),
-          y2: PAD_TOP + canvasH,
+          y2: PAD_TOP2 + canvasH,
           stroke: "var(--cdl-divider, #d4d4d8)",
           strokeWidth: 0.75,
           strokeDasharray: "3 3",
@@ -7178,7 +8223,7 @@ function GanttNode({
         {
           "data-cdl-role": "gantt-tick",
           x: xAt(i) + cellW / 2,
-          y: PAD_TOP + canvasH + 18,
+          y: PAD_TOP2 + canvasH + 18,
           fontSize: 11,
           textAnchor: "middle",
           fill: "var(--cdl-text-dim, #5a6270)",
@@ -7190,9 +8235,9 @@ function GanttNode({
       "line",
       {
         x1: xAt(maxIdx),
-        y1: PAD_TOP,
+        y1: PAD_TOP2,
         x2: xAt(maxIdx),
-        y2: PAD_TOP + canvasH,
+        y2: PAD_TOP2 + canvasH,
         stroke: "var(--cdl-divider, #d4d4d8)",
         strokeWidth: 0.75,
         opacity: 0.5
@@ -7201,7 +8246,7 @@ function GanttNode({
     \u6574\u3048\u305F.map((t, row) => /* @__PURE__ */ jsxRuntime.jsx(
       "text",
       {
-        x: PAD_LEFT - 12,
+        x: PAD_LEFT2 - 12,
         y: yAt(row) + rowH / 2 + 4,
         fontSize: 12,
         textAnchor: "end",
@@ -7358,6 +8403,24 @@ function \u7BB1\u306B\u7A4D\u3080(\u884C, \u7BB1\u306E\u5E45, \u7BB1\u306E\u9AD8
 }
 var MIND_TONES = ["accent", "teal", "success", "warning", "info", "error"];
 var MIND_BOX_GAP = 24;
+var MIND_PAD = 40;
+function \u653E\u5C04\u306E\u4E2D\u8EAB(node, stateValues = {}) {
+  const mindData = node.mindData ? resolveMindData(node.mindData, stateValues) : void 0;
+  if (!mindData) return void 0;
+  return computeMindMapLayout(
+    mindData,
+    node.w / 2,
+    node.h / 2,
+    node.w - MIND_PAD * 2,
+    node.h - MIND_PAD * 2
+  );
+}
+function \u653E\u5C04\u306E\u884C(n) {
+  return [
+    { \u5F79\u5272: "title", text: n.title, fontSize: n.isRoot ? 15 : 13 },
+    { \u5F79\u5272: "subtitle", text: n.subtitle ?? "", fontSize: 9 }
+  ];
+}
 function MindMapNode({
   node,
   active,
@@ -7367,14 +8430,8 @@ function MindMapNode({
 }) {
   const x0 = node.cx - node.w / 2;
   const y0 = node.cy - node.h / 2;
-  const mindData = node.mindData ? resolveMindData(node.mindData, stateValues) : void 0;
-  if (!mindData) return /* @__PURE__ */ jsxRuntime.jsx("g", { transform: `translate(${x0} ${y0})` });
-  const PAD = 40;
-  const canvasCx = node.w / 2;
-  const canvasCy = node.h / 2;
-  const canvasW = node.w - PAD * 2;
-  const canvasH = node.h - PAD * 2;
-  const layout2 = computeMindMapLayout(mindData, canvasCx, canvasCy, canvasW, canvasH);
+  const layout2 = \u653E\u5C04\u306E\u4E2D\u8EAB(node, stateValues);
+  if (!layout2) return /* @__PURE__ */ jsxRuntime.jsx("g", { transform: `translate(${x0} ${y0})` });
   const \u4F38\u3073 = \u9032\u307F\u3092\u7573\u3080(drawing, progress);
   const \u6700\u5927\u6DF1\u3055 = layout2.nodes.reduce((m, n) => Math.max(m, n.depth), 0);
   const \u7BB1\u304C\u51FA\u308B = (\u6DF1\u3055) => !drawing || \u6BB5\u306E\u4F38\u3073(\u4F38\u3073, \u6DF1\u3055, \u6700\u5927\u6DF1\u3055) >= 1;
@@ -7412,16 +8469,11 @@ function MindMapNode({
     }),
     layout2.nodes.map((n) => {
       if (!\u7BB1\u304C\u51FA\u308B(n.depth)) return null;
-      const \u884C = \u7BB1\u306B\u7A4D\u3080(
-        [
-          { \u5F79\u5272: "title", text: n.title, fontSize: n.isRoot ? 15 : 13 },
-          { \u5F79\u5272: "subtitle", text: n.subtitle ?? "", fontSize: 9 }
-        ],
-        n.w,
-        n.h
-      );
+      const \u6750\u6599 = \u653E\u5C04\u306E\u884C(n);
+      const \u884C = \u7BB1\u306B\u7A4D\u3080(\u6750\u6599, n.w, n.h);
       const \u88DC\u8DB3\u3042\u308A = (n.subtitle ?? "").trim() !== "";
-      const \u53CE\u3081\u305F\u540D\u524D = \u88DC\u8DB3\u3042\u308A ? void 0 : \u5E45\u306B\u53CE\u3081\u308B(n.title, n.isRoot ? 15 : 13, \u4F7F\u3048\u308B\u5E45(n.w));
+      const \u540D\u524D = \u6750\u6599[0];
+      const \u53CE\u3081\u305F\u540D\u524D = \u88DC\u8DB3\u3042\u308A ? void 0 : \u5E45\u306B\u53CE\u3081\u308B(\u540D\u524D.text, \u540D\u524D.fontSize, \u4F7F\u3048\u308B\u5E45(n.w));
       const \u6587\u5B57\u306E\u8272 = n.isRoot ? "var(--cdl-text-on-tone, #ffffff)" : "var(--cdl-chip-text, #1a1f2a)";
       return /* @__PURE__ */ jsxRuntime.jsxs("g", { "data-cdl-unresolved": n.unresolved ? "true" : void 0, children: [
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -7700,13 +8752,13 @@ function FunnelNode({
   const x0 = node.cx - node.w / 2;
   const y0 = node.cy - node.h / 2;
   const stages = resolveFunnelData(node.funnelData ?? [], stateValues);
-  const PAD_TOP = 32;
-  const PAD_RIGHT = 24;
-  const PAD_BOTTOM = 32;
-  const PAD_LEFT = 24;
+  const PAD_TOP2 = 32;
+  const PAD_RIGHT2 = 24;
+  const PAD_BOTTOM2 = 32;
+  const PAD_LEFT2 = 24;
   const legendW = 160;
-  const canvasW = node.w - PAD_LEFT - PAD_RIGHT - legendW;
-  const canvasH = node.h - PAD_TOP - PAD_BOTTOM;
+  const canvasW = node.w - PAD_LEFT2 - PAD_RIGHT2 - legendW;
+  const canvasH = node.h - PAD_TOP2 - PAD_BOTTOM2;
   const stageCount = stages.length || 1;
   const gap = 4;
   const stageH = (canvasH - gap * (stageCount - 1)) / stageCount;
@@ -7726,15 +8778,15 @@ function FunnelNode({
   const \u6BB5 = stages.map((s, idx) => {
     const prev = idx > 0 ? stages[idx - 1] : null;
     const dropRate = prev && prev.count > 0 ? (prev.count - s.count) / prev.count * 100 : 0;
-    const y = PAD_TOP + idx * (stageH + gap);
+    const y = PAD_TOP2 + idx * (stageH + gap);
     const topW = widthAtStep(idx);
     const bottomW = widthAtStep(idx + 1);
-    const cx = PAD_LEFT + canvasW / 2;
+    const cx = PAD_LEFT2 + canvasW / 2;
     const topX = cx - topW / 2;
     const bottomX = cx - bottomW / 2;
     const points = `${topX},${y} ${topX + topW},${y} ${bottomX + bottomW},${y + stageH} ${bottomX},${y + stageH}`;
     const tone = toneByIndex(idx);
-    const legendX = PAD_LEFT + canvasW + 24;
+    const legendX = PAD_LEFT2 + canvasW + 24;
     return /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "polygon",
@@ -7798,7 +8850,7 @@ function FunnelNode({
         strokeWidth: active ? 3 : 1.25
       }
     ),
-    drawing && /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: \u5207\u308A\u629C\u304Did, children: /* @__PURE__ */ jsxRuntime.jsx("rect", { x: 0, y: 0, width: node.w, height: PAD_TOP + canvasH * \u4F38\u3073 }) }) }),
+    drawing && /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: \u5207\u308A\u629C\u304Did, children: /* @__PURE__ */ jsxRuntime.jsx("rect", { x: 0, y: 0, width: node.w, height: PAD_TOP2 + canvasH * \u4F38\u3073 }) }) }),
     drawing ? /* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: `url(#${\u5207\u308A\u629C\u304Did})`, children: \u6BB5 }) : \u6BB5
   ] });
 }
@@ -7823,8 +8875,8 @@ function QuadrantNode({
   const raw = node.quadrantData;
   if (!raw) return /* @__PURE__ */ jsxRuntime.jsx("g", { transform: `translate(${x0} ${y0})` });
   const data = resolveQuadrantData(raw, stateValues);
-  const PAD_TOP = 40;
-  const PAD_BOTTOM = 56;
+  const PAD_TOP2 = 40;
+  const PAD_BOTTOM2 = 56;
   const AXIS_LABEL_FONT = 12;
   const PAD_MIN = 60;
   const ITEM_FONT = 13;
@@ -7836,12 +8888,12 @@ function QuadrantNode({
   const wantRight = axisLabelPad(data.xAxis.right) - PAD_MIN;
   const wantTotal = wantLeft + wantRight;
   const padScale = wantTotal > padBudget && wantTotal > 0 ? padBudget / wantTotal : 1;
-  const PAD_LEFT = PAD_MIN + wantLeft * padScale;
-  const PAD_RIGHT = PAD_MIN + wantRight * padScale;
-  const canvasW = node.w - PAD_LEFT - PAD_RIGHT;
-  const canvasH = node.h - PAD_TOP - PAD_BOTTOM;
-  const cx = PAD_LEFT + canvasW / 2;
-  const cy = PAD_TOP + canvasH / 2;
+  const PAD_LEFT2 = PAD_MIN + wantLeft * padScale;
+  const PAD_RIGHT2 = PAD_MIN + wantRight * padScale;
+  const canvasW = node.w - PAD_LEFT2 - PAD_RIGHT2;
+  const canvasH = node.h - PAD_TOP2 - PAD_BOTTOM2;
+  const cx = PAD_LEFT2 + canvasW / 2;
+  const cy = PAD_TOP2 + canvasH / 2;
   const halfW = canvasW / 2;
   const halfH = canvasH / 2;
   const itemsBy = {
@@ -7877,16 +8929,16 @@ function QuadrantNode({
         strokeWidth: active ? 3 : 1.25
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx("rect", { "data-cdl-role": "quadrant-bg", x: PAD_LEFT, y: PAD_TOP, width: halfW, height: halfH, ...quadrantColor.topLeft }),
-    /* @__PURE__ */ jsxRuntime.jsx("rect", { "data-cdl-role": "quadrant-bg", x: cx, y: PAD_TOP, width: halfW, height: halfH, ...quadrantColor.topRight }),
-    /* @__PURE__ */ jsxRuntime.jsx("rect", { "data-cdl-role": "quadrant-bg", x: PAD_LEFT, y: cy, width: halfW, height: halfH, ...quadrantColor.bottomLeft }),
+    /* @__PURE__ */ jsxRuntime.jsx("rect", { "data-cdl-role": "quadrant-bg", x: PAD_LEFT2, y: PAD_TOP2, width: halfW, height: halfH, ...quadrantColor.topLeft }),
+    /* @__PURE__ */ jsxRuntime.jsx("rect", { "data-cdl-role": "quadrant-bg", x: cx, y: PAD_TOP2, width: halfW, height: halfH, ...quadrantColor.topRight }),
+    /* @__PURE__ */ jsxRuntime.jsx("rect", { "data-cdl-role": "quadrant-bg", x: PAD_LEFT2, y: cy, width: halfW, height: halfH, ...quadrantColor.bottomLeft }),
     /* @__PURE__ */ jsxRuntime.jsx("rect", { "data-cdl-role": "quadrant-bg", x: cx, y: cy, width: halfW, height: halfH, ...quadrantColor.bottomRight }),
     /* @__PURE__ */ jsxRuntime.jsx(
       "rect",
       {
         "data-cdl-role": "quadrant-canvas",
-        x: PAD_LEFT,
-        y: PAD_TOP,
+        x: PAD_LEFT2,
+        y: PAD_TOP2,
         width: canvasW,
         height: canvasH,
         fill: "none",
@@ -7895,25 +8947,25 @@ function QuadrantNode({
         rx: 8
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: cx, y1: PAD_TOP, x2: cx, y2: PAD_TOP + canvasH, stroke: "var(--cdl-text-mute, #8a8678)", strokeWidth: 1.5 }),
-    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: PAD_LEFT, y1: cy, x2: PAD_LEFT + canvasW, y2: cy, stroke: "var(--cdl-text-mute, #8a8678)", strokeWidth: 1.5 }),
-    /* @__PURE__ */ jsxRuntime.jsx("text", { x: PAD_LEFT + halfW / 2, y: PAD_TOP + 22, fontSize: 13, fontWeight: 700, textAnchor: "middle", fill: quadrantAccent.topLeft, children: data.quadrantLabels.topLeft }),
-    /* @__PURE__ */ jsxRuntime.jsx("text", { x: cx + halfW / 2, y: PAD_TOP + 22, fontSize: 13, fontWeight: 700, textAnchor: "middle", fill: quadrantAccent.topRight, children: data.quadrantLabels.topRight }),
-    /* @__PURE__ */ jsxRuntime.jsx("text", { x: PAD_LEFT + halfW / 2, y: PAD_TOP + canvasH - 12, fontSize: 13, fontWeight: 700, textAnchor: "middle", fill: quadrantAccent.bottomLeft, children: data.quadrantLabels.bottomLeft }),
-    /* @__PURE__ */ jsxRuntime.jsx("text", { x: cx + halfW / 2, y: PAD_TOP + canvasH - 12, fontSize: 13, fontWeight: 700, textAnchor: "middle", fill: quadrantAccent.bottomRight, children: data.quadrantLabels.bottomRight }),
-    /* @__PURE__ */ jsxRuntime.jsxs("text", { x: cx, y: PAD_TOP - 12, fontSize: 12, fontWeight: 700, textAnchor: "middle", fill: "var(--cdl-text-dim, #5a6270)", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: cx, y1: PAD_TOP2, x2: cx, y2: PAD_TOP2 + canvasH, stroke: "var(--cdl-text-mute, #8a8678)", strokeWidth: 1.5 }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: PAD_LEFT2, y1: cy, x2: PAD_LEFT2 + canvasW, y2: cy, stroke: "var(--cdl-text-mute, #8a8678)", strokeWidth: 1.5 }),
+    /* @__PURE__ */ jsxRuntime.jsx("text", { x: PAD_LEFT2 + halfW / 2, y: PAD_TOP2 + 22, fontSize: 13, fontWeight: 700, textAnchor: "middle", fill: quadrantAccent.topLeft, children: data.quadrantLabels.topLeft }),
+    /* @__PURE__ */ jsxRuntime.jsx("text", { x: cx + halfW / 2, y: PAD_TOP2 + 22, fontSize: 13, fontWeight: 700, textAnchor: "middle", fill: quadrantAccent.topRight, children: data.quadrantLabels.topRight }),
+    /* @__PURE__ */ jsxRuntime.jsx("text", { x: PAD_LEFT2 + halfW / 2, y: PAD_TOP2 + canvasH - 12, fontSize: 13, fontWeight: 700, textAnchor: "middle", fill: quadrantAccent.bottomLeft, children: data.quadrantLabels.bottomLeft }),
+    /* @__PURE__ */ jsxRuntime.jsx("text", { x: cx + halfW / 2, y: PAD_TOP2 + canvasH - 12, fontSize: 13, fontWeight: 700, textAnchor: "middle", fill: quadrantAccent.bottomRight, children: data.quadrantLabels.bottomRight }),
+    /* @__PURE__ */ jsxRuntime.jsxs("text", { x: cx, y: PAD_TOP2 - 12, fontSize: 12, fontWeight: 700, textAnchor: "middle", fill: "var(--cdl-text-dim, #5a6270)", children: [
       "\u2191 ",
       data.yAxis.top
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("text", { x: cx, y: PAD_TOP + canvasH + 24, fontSize: 12, fontWeight: 700, textAnchor: "middle", fill: "var(--cdl-text-dim, #5a6270)", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("text", { x: cx, y: PAD_TOP2 + canvasH + 24, fontSize: 12, fontWeight: 700, textAnchor: "middle", fill: "var(--cdl-text-dim, #5a6270)", children: [
       "\u2193 ",
       data.yAxis.bottom
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("text", { x: PAD_LEFT - 12, y: cy + 4, fontSize: AXIS_LABEL_FONT, fontWeight: 700, textAnchor: "end", fill: "var(--cdl-text-dim, #5a6270)", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("text", { x: PAD_LEFT2 - 12, y: cy + 4, fontSize: AXIS_LABEL_FONT, fontWeight: 700, textAnchor: "end", fill: "var(--cdl-text-dim, #5a6270)", children: [
       "\u2190 ",
       data.xAxis.left
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("text", { x: PAD_LEFT + canvasW + 12, y: cy + 4, fontSize: AXIS_LABEL_FONT, fontWeight: 700, textAnchor: "start", fill: "var(--cdl-text-dim, #5a6270)", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("text", { x: PAD_LEFT2 + canvasW + 12, y: cy + 4, fontSize: AXIS_LABEL_FONT, fontWeight: 700, textAnchor: "start", fill: "var(--cdl-text-dim, #5a6270)", children: [
       data.xAxis.right,
       " \u2192"
     ] }),
@@ -7922,8 +8974,8 @@ function QuadrantNode({
       if (items.length === 0) return null;
       const isLeft = q === "topLeft" || q === "bottomLeft";
       const isTop = q === "topLeft" || q === "topRight";
-      const qxStart = (isLeft ? PAD_LEFT : cx) + 18;
-      const qyStart = (isTop ? PAD_TOP : cy) + 44;
+      const qxStart = (isLeft ? PAD_LEFT2 : cx) + 18;
+      const qyStart = (isTop ? PAD_TOP2 : cy) + 44;
       const qHalfW = halfW - 36;
       const \u67A0\u306E\u4F59\u5730 = qHalfW;
       if (\u67A0\u306E\u4F59\u5730 <= 0) return null;
@@ -7982,6 +9034,24 @@ function \u7BB1\u306E\u6587\u5B57({
     r.\u5F79\u5272
   ));
 }
+var PAD_TOP = 40;
+var PAD_RIGHT = 24;
+var PAD_BOTTOM = 40;
+var PAD_LEFT = 24;
+function \u6728\u306E\u4E2D\u8EAB(node, stateValues = {}) {
+  const treeNodes = resolveTreeData(node.treeData ?? [], stateValues);
+  return computeTreeLayout(
+    treeNodes,
+    node.w - PAD_LEFT - PAD_RIGHT,
+    node.h - PAD_TOP - PAD_BOTTOM
+  );
+}
+function \u6728\u306E\u884C(n) {
+  return [
+    { \u5F79\u5272: "title", text: n.title, fontSize: n.depth === 0 ? 13 : 12 },
+    { \u5F79\u5272: "subtitle", text: n.subtitle ?? "", fontSize: 9 }
+  ];
+}
 function TreeNode({
   node,
   active,
@@ -7991,15 +9061,8 @@ function TreeNode({
 }) {
   const x0 = node.cx - node.w / 2;
   const y0 = node.cy - node.h / 2;
-  const treeNodes = resolveTreeData(node.treeData ?? [], stateValues);
   const gradientId = `tree-root-grad-${node.id}`;
-  const PAD_TOP = 40;
-  const PAD_RIGHT = 24;
-  const PAD_BOTTOM = 40;
-  const PAD_LEFT = 24;
-  const canvasW = node.w - PAD_LEFT - PAD_RIGHT;
-  const canvasH = node.h - PAD_TOP - PAD_BOTTOM;
-  const layout2 = computeTreeLayout(treeNodes, canvasW, canvasH);
+  const layout2 = \u6728\u306E\u4E2D\u8EAB(node, stateValues);
   const \u4F38\u3073 = \u9032\u307F\u3092\u7573\u3080(drawing, progress);
   const \u6700\u5927\u6DF1\u3055 = layout2.nodes.reduce((m, n) => Math.max(m, n.depth), 0);
   const \u7BB1\u304C\u51FA\u308B = (\u6DF1\u3055) => !drawing || \u6BB5\u306E\u4F38\u3073(\u4F38\u3073, \u6DF1\u3055, \u6700\u5927\u6DF1\u3055) >= 1;
@@ -8052,16 +9115,11 @@ function TreeNode({
       if (!\u7BB1\u304C\u51FA\u308B(n.depth)) return null;
       const accent = depthColors[Math.min(n.depth, depthColors.length - 1)] ?? depthColors[0];
       const isRoot = n.depth === 0;
-      const \u884C = \u7BB1\u306B\u7A4D\u3080(
-        [
-          { \u5F79\u5272: "title", text: n.title, fontSize: isRoot ? 13 : 12 },
-          { \u5F79\u5272: "subtitle", text: n.subtitle ?? "", fontSize: 9 }
-        ],
-        n.w,
-        n.h
-      );
+      const \u6750\u6599 = \u6728\u306E\u884C(n);
+      const \u884C = \u7BB1\u306B\u7A4D\u3080(\u6750\u6599, n.w, n.h);
       const \u88DC\u8DB3\u3042\u308A = (n.subtitle ?? "").trim() !== "";
-      const \u53CE\u3081\u305F\u540D\u524D = \u88DC\u8DB3\u3042\u308A ? void 0 : \u5E45\u306B\u53CE\u3081\u308B(n.title, isRoot ? 13 : 12, \u4F7F\u3048\u308B\u5E45(n.w));
+      const \u540D\u524D = \u6750\u6599[0];
+      const \u53CE\u3081\u305F\u540D\u524D = \u88DC\u8DB3\u3042\u308A ? void 0 : \u5E45\u306B\u53CE\u3081\u308B(\u540D\u524D.text, \u540D\u524D.fontSize, \u4F7F\u3048\u308B\u5E45(n.w));
       return /* @__PURE__ */ jsxRuntime.jsx(
         "g",
         {
@@ -8267,12 +9325,12 @@ function UserJourneyNode({
   const x0 = node.cx - node.w / 2;
   const y0 = node.cy - node.h / 2;
   const steps = resolveJourneyData(node.journeyData ?? [], stateValues);
-  const PAD_TOP = 20;
-  const PAD_RIGHT = 32;
-  const PAD_BOTTOM = 108;
-  const PAD_LEFT = 108;
-  const canvasW = node.w - PAD_LEFT - PAD_RIGHT;
-  const canvasH = node.h - PAD_TOP - PAD_BOTTOM;
+  const PAD_TOP2 = 20;
+  const PAD_RIGHT2 = 32;
+  const PAD_BOTTOM2 = 108;
+  const PAD_LEFT2 = 108;
+  const canvasW = node.w - PAD_LEFT2 - PAD_RIGHT2;
+  const canvasH = node.h - PAD_TOP2 - PAD_BOTTOM2;
   const emotionRows = ["delighted", "happy", "neutral", "frustrated", "angry"];
   const emotionScore = {
     delighted: 4,
@@ -8297,8 +9355,8 @@ function UserJourneyNode({
   };
   const rowH = canvasH / 5;
   const colW = canvasW / Math.max(steps.length, 1);
-  const xAt = (idx) => PAD_LEFT + (steps.length <= 1 ? canvasW / 2 : colW / 2 + colW * idx);
-  const yAt = (emotion) => PAD_TOP + rowH / 2 + (4 - emotionScore[emotion]) * rowH;
+  const xAt = (idx) => PAD_LEFT2 + (steps.length <= 1 ? canvasW / 2 : colW / 2 + colW * idx);
+  const yAt = (emotion) => PAD_TOP2 + rowH / 2 + (4 - emotionScore[emotion]) * rowH;
   const pts = steps.map((s, i) => ({ x: xAt(i), y: yAt(s.emotion) }));
   const \u4F38\u3073 = \u9032\u307F\u3092\u7573\u3080(drawing, progress);
   const \u6BB5\u307E\u3067\u306E\u5272\u5408 = \u30D9\u30B8\u30A8\u306E\u7D2F\u7A4D\u5272\u5408(pts, (\u524D, \u5F8C) => {
@@ -8332,8 +9390,8 @@ function UserJourneyNode({
         "rect",
         {
           "data-cdl-role": "journey-band",
-          x: PAD_LEFT,
-          y: PAD_TOP + i * rowH,
+          x: PAD_LEFT2,
+          y: PAD_TOP2 + i * rowH,
           width: canvasW,
           height: rowH,
           fill: emotionColor[e],
@@ -8343,8 +9401,8 @@ function UserJourneyNode({
       /* @__PURE__ */ jsxRuntime.jsx(
         "text",
         {
-          x: PAD_LEFT - 84,
-          y: PAD_TOP + i * rowH + rowH / 2 + 5,
+          x: PAD_LEFT2 - 84,
+          y: PAD_TOP2 + i * rowH + rowH / 2 + 5,
           fontSize: 18,
           textAnchor: "middle",
           children: emotionEmoji[e]
@@ -8353,8 +9411,8 @@ function UserJourneyNode({
       /* @__PURE__ */ jsxRuntime.jsx(
         "text",
         {
-          x: PAD_LEFT - 14,
-          y: PAD_TOP + i * rowH + rowH / 2 + 4,
+          x: PAD_LEFT2 - 14,
+          y: PAD_TOP2 + i * rowH + rowH / 2 + 4,
           fontSize: 12,
           fontWeight: 600,
           textAnchor: "end",
@@ -8368,9 +9426,9 @@ function UserJourneyNode({
       {
         "data-cdl-role": "node-column-divider",
         x1: xAt(idx),
-        y1: PAD_TOP,
+        y1: PAD_TOP2,
         x2: xAt(idx),
-        y2: PAD_TOP + canvasH,
+        y2: PAD_TOP2 + canvasH,
         stroke: "var(--cdl-row-divider, #7e848e)",
         strokeDasharray: "4 4"
       },
@@ -8434,7 +9492,7 @@ function UserJourneyNode({
             "text",
             {
               x: xAt(idx),
-              y: PAD_TOP + canvasH + 24,
+              y: PAD_TOP2 + canvasH + 24,
               fontSize: 12,
               fontWeight: 700,
               textAnchor: "middle",
@@ -8448,7 +9506,7 @@ function UserJourneyNode({
               {
                 "data-cdl-role": "journey-chip",
                 x: xAt(idx) - 40,
-                y: PAD_TOP + canvasH + 34,
+                y: PAD_TOP2 + canvasH + 34,
                 width: 80,
                 height: 20,
                 rx: 10,
@@ -8463,7 +9521,7 @@ function UserJourneyNode({
               "text",
               {
                 x: xAt(idx),
-                y: PAD_TOP + canvasH + 48,
+                y: PAD_TOP2 + canvasH + 48,
                 fontSize: 10,
                 fontWeight: 600,
                 textAnchor: "middle",
@@ -8477,7 +9535,7 @@ function UserJourneyNode({
               "rect",
               {
                 x: xAt(idx) - 55,
-                y: PAD_TOP + canvasH + 62,
+                y: PAD_TOP2 + canvasH + 62,
                 width: 110,
                 height: 26,
                 rx: 13,
@@ -8490,7 +9548,7 @@ function UserJourneyNode({
               "text",
               {
                 x: xAt(idx),
-                y: PAD_TOP + canvasH + 79,
+                y: PAD_TOP2 + canvasH + 79,
                 fontSize: 10,
                 textAnchor: "middle",
                 fill: "var(--cdl-note-text, #7a5320)",
@@ -12483,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,
@@ -12649,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 });
     }
@@ -12718,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,
@@ -12729,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 {
@@ -12753,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",
@@ -12860,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
               }
@@ -21679,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"
 ]);
@@ -21754,6 +22865,7 @@ function emptyCounts() {
     "node-inside-viewbox": 0,
     "node-inside-lane": 0,
     "shape-label-dropped": 0,
+    "box-line-dropped": 0,
     "edge-inside-viewbox": 0,
     "lane-label-inside-viewbox": 0,
     "lane-label-overlap": 0,
@@ -21767,10 +22879,17 @@ function emptyCounts() {
     "row-gap-uniform": 0,
     "column-gap-uniform": 0,
     "rows-not-rendered": 0,
+    "title-row-overlap": 0,
     "malformed-input": 0,
     "validation-interrupted": 0
   };
 }
+function \u7A4D\u3080\u7BB1\u3092\u96C6\u3081\u308B(n) {
+  const \u7BB1 = (b, \u884C) => ({ \u884C, w: b.w, h: b.h });
+  if (n.kind === "tree-hierarchy") return \u6728\u306E\u4E2D\u8EAB(n).nodes.map((b) => \u7BB1(b, \u6728\u306E\u884C(b)));
+  if (n.kind === "mind-map") return (\u653E\u5C04\u306E\u4E2D\u8EAB(n)?.nodes ?? []).map((b) => \u7BB1(b, \u653E\u5C04\u306E\u884C(b)));
+  return [];
+}
 function measureStubOut(segs) {
   const first = segs[0];
   const dx0 = first.x2 - first.x1;
@@ -22673,6 +23792,31 @@ function runAxes(laid, diag, violations, counts, push, profile, skippedAxes) {
       "warn"
     );
   }
+  for (const n of laid.nodes) {
+    const \u7BB1 = \u7A4D\u3080\u7BB1\u3092\u96C6\u3081\u308B(n);
+    if (\u7BB1.length === 0) continue;
+    let \u5BFE\u8C61 = 0;
+    const \u843D\u3061\u305F = [];
+    for (const b of \u7BB1) {
+      const \u5BA3\u8A00 = b.\u884C.slice(1).filter((r) => r.text.trim() !== "");
+      if (\u5BA3\u8A00.length === 0) continue;
+      \u5BFE\u8C61 += 1;
+      const \u6B8B\u3063\u305F = new Set(\u7BB1\u306B\u7A4D\u3080(b.\u884C, b.w, b.h).map((r) => r.\u5F79\u5272));
+      if (\u5BA3\u8A00.every((r) => \u6B8B\u3063\u305F.has(r.\u5F79\u5272))) continue;
+      \u843D\u3061\u305F.push({ title: b.\u884C[0]?.text ?? "", h: b.h });
+    }
+    if (\u843D\u3061\u305F.length === 0) continue;
+    const \u540D\u524D = \u843D\u3061\u305F.map((d) => `"${d.title}"`);
+    const \u898B\u305B\u308B = \u540D\u524D.slice(0, 5).join(" / ");
+    const \u6B8B\u308A = \u540D\u524D.length > 5 ? ` \u4ED6 ${\u540D\u524D.length - 5} \u4EF6` : "";
+    const \u4F4E = Math.min(...\u843D\u3061\u305F.map((d) => d.h)).toFixed(1);
+    const \u9AD8 = Math.max(...\u843D\u3061\u305F.map((d) => d.h)).toFixed(1);
+    push(
+      "box-line-dropped",
+      `node "${n.id}" (${n.kind}) \u306F\u7BB1\u304C\u4F4E\u304F\u3001 \u66F8\u3044\u305F\u88DC\u8DB3\u304C ${\u843D\u3061\u305F.length}/${\u5BFE\u8C61} \u7BB1\u3067\u63CF\u304B\u308C\u306A\u3044 (${\u898B\u305B\u308B}${\u6B8B\u308A}\u3001 \u7BB1\u306E\u9AD8\u3055 ${\u4F4E === \u9AD8 ? \u4F4E : `${\u4F4E}\u301C${\u9AD8}`})\u3002 \u56F3\u3092\u9AD8\u304F\u3059\u308B\u304B\u6BB5\u3092\u6E1B\u3089\u3059\u304B\u3001 \u88DC\u8DB3\u3092\u6D88\u3059`,
+      "warn"
+    );
+  }
   for (const e of laid.edges) {
     const segs = flattenPathSegments(extractPathSegments(e.d));
     if (segs.length === 0) continue;
@@ -22866,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) {
@@ -23223,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) {