@cardenelabs/cdl 0.31.0 → 0.32.0

package/dist/index.d.cts

@@ -1,5 +1,5 @@
-import { C as CdlDiagram, S as Signal, a as CdlInput, b as CdlLane, c as CdlNode, T as Tone, d as Side, E as EdgeStyle, e as EdgeRole, f as EdgeHead, g as EdgeHeadFill, h as CdlState, i as CdlEventTarget, j as Computed, k as CdlDerivedValue, l as CdlScrollTrigger, L as LaidDiagram, m as CdlDiagramViewProps, n as LaidEdge, o as LaidNode, p as CdlEdge, B as BBox, R as RowMark, N as NodeKind, J as JourneyEmotion, Q as QuadrantKey } from './render-D6wVFGfI.cjs';
-export { q as CdlDiagramView, r as CdlEventBinding, s as CdlEventKind, t as CdlFormula, u as CdlPhase, v as EDGE_HEADS, w as EDGE_HEAD_DEFAULT, x as EDGE_HEAD_FILLS, y as EDGE_HEAD_FILL_DEFAULT, z as EDGE_REVEALS, A as EDGE_REVEAL_DEFAULT, D as EDGE_STYLES, F as EdgeReveal, I as InteractiveHandlerMap, G as InteractiveSignalsAccessor, H as LaidLane, K as NODE_KINDS, M as ScrollProgressHandle, O as TONES, P as computeEventBindingKey, U as computeFormulaKey, V as computeInputSignalKey, W as computeScrollTriggerKey, X as computed, Y as createInteractiveSignalsAccessor, Z as createScrollProgressHandle, _ as createScrollProgressSignals, $ as hasInteractivePrimitives, a0 as sequenceBoardMetrics, a1 as sequenceStepId, a2 as signal } from './render-D6wVFGfI.cjs';
+import { C as CdlDiagram, S as Signal, a as CdlInput, b as CdlLane, c as CdlNode, T as Tone, d as Side, E as EdgeStyle, e as EdgeRole, f as EdgeHead, g as EdgeHeadFill, h as CdlState, i as CdlEventTarget, j as Computed, k as CdlDerivedValue, l as CdlScrollTrigger, L as LaidDiagram, m as CdlDiagramViewProps, n as LaidEdge, o as LaidNode, p as CdlEdge, B as BBox, R as RowMark, N as NodeKind, J as JourneyEmotion, Q as QuadrantKey } from './render-DjnLKv2Q.cjs';
+export { q as CdlDiagramView, r as CdlEventBinding, s as CdlEventKind, t as CdlFormula, u as CdlPhase, v as ChartPieForm, w as EDGE_HEADS, x as EDGE_HEAD_DEFAULT, y as EDGE_HEAD_FILLS, z as EDGE_HEAD_FILL_DEFAULT, A as EDGE_REVEALS, D as EDGE_REVEAL_DEFAULT, F as EDGE_STYLES, G as EdgeReveal, I as InteractiveHandlerMap, H as InteractiveSignalsAccessor, K as LaidLane, M as NODE_KINDS, O as ScrollProgressHandle, P as TONES, U as computeEventBindingKey, V as computeFormulaKey, W as computeInputSignalKey, X as computeScrollTriggerKey, Y as computed, Z as createInteractiveSignalsAccessor, _ as createScrollProgressHandle, $ as createScrollProgressSignals, a0 as hasInteractivePrimitives, a1 as sequenceBoardMetrics, a2 as sequenceStepId, a3 as signal } from './render-DjnLKv2Q.cjs';
 import { JSX } from 'react';
 
 declare function effect(fn: () => void | (() => void)): () => void;

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { C as CdlDiagram, S as Signal, a as CdlInput, b as CdlLane, c as CdlNode, T as Tone, d as Side, E as EdgeStyle, e as EdgeRole, f as EdgeHead, g as EdgeHeadFill, h as CdlState, i as CdlEventTarget, j as Computed, k as CdlDerivedValue, l as CdlScrollTrigger, L as LaidDiagram, m as CdlDiagramViewProps, n as LaidEdge, o as LaidNode, p as CdlEdge, B as BBox, R as RowMark, N as NodeKind, J as JourneyEmotion, Q as QuadrantKey } from './render-D6wVFGfI.js';
-export { q as CdlDiagramView, r as CdlEventBinding, s as CdlEventKind, t as CdlFormula, u as CdlPhase, v as EDGE_HEADS, w as EDGE_HEAD_DEFAULT, x as EDGE_HEAD_FILLS, y as EDGE_HEAD_FILL_DEFAULT, z as EDGE_REVEALS, A as EDGE_REVEAL_DEFAULT, D as EDGE_STYLES, F as EdgeReveal, I as InteractiveHandlerMap, G as InteractiveSignalsAccessor, H as LaidLane, K as NODE_KINDS, M as ScrollProgressHandle, O as TONES, P as computeEventBindingKey, U as computeFormulaKey, V as computeInputSignalKey, W as computeScrollTriggerKey, X as computed, Y as createInteractiveSignalsAccessor, Z as createScrollProgressHandle, _ as createScrollProgressSignals, $ as hasInteractivePrimitives, a0 as sequenceBoardMetrics, a1 as sequenceStepId, a2 as signal } from './render-D6wVFGfI.js';
+import { C as CdlDiagram, S as Signal, a as CdlInput, b as CdlLane, c as CdlNode, T as Tone, d as Side, E as EdgeStyle, e as EdgeRole, f as EdgeHead, g as EdgeHeadFill, h as CdlState, i as CdlEventTarget, j as Computed, k as CdlDerivedValue, l as CdlScrollTrigger, L as LaidDiagram, m as CdlDiagramViewProps, n as LaidEdge, o as LaidNode, p as CdlEdge, B as BBox, R as RowMark, N as NodeKind, J as JourneyEmotion, Q as QuadrantKey } from './render-DjnLKv2Q.js';
+export { q as CdlDiagramView, r as CdlEventBinding, s as CdlEventKind, t as CdlFormula, u as CdlPhase, v as ChartPieForm, w as EDGE_HEADS, x as EDGE_HEAD_DEFAULT, y as EDGE_HEAD_FILLS, z as EDGE_HEAD_FILL_DEFAULT, A as EDGE_REVEALS, D as EDGE_REVEAL_DEFAULT, F as EDGE_STYLES, G as EdgeReveal, I as InteractiveHandlerMap, H as InteractiveSignalsAccessor, K as LaidLane, M as NODE_KINDS, O as ScrollProgressHandle, P as TONES, U as computeEventBindingKey, V as computeFormulaKey, W as computeInputSignalKey, X as computeScrollTriggerKey, Y as computed, Z as createInteractiveSignalsAccessor, _ as createScrollProgressHandle, $ as createScrollProgressSignals, a0 as hasInteractivePrimitives, a1 as sequenceBoardMetrics, a2 as sequenceStepId, a3 as signal } from './render-DjnLKv2Q.js';
 import { JSX } from 'react';
 
 declare function effect(fn: () => void | (() => void)): () => void;

package/dist/index.js

@@ -15918,10 +15918,10 @@ function countEdgeCrossings(edges, warnAt = 3) {
           if (isNearAny(p, a.ends, SAME_POINT_TOL) || isNearAny(p, b.ends, SAME_POINT_TOL))
             continue;
           if (\u5171\u6709\u5074.length > 0) {
-            const \u67A0 = Math.min(MAX_CHECKS - checks, MAX_CHECKS_PER_PAIR - pairChecks);
-            const \u4E88\u7B97 = { \u6B8B\u308A: Math.max(0, \u67A0) };
+            const \u67A02 = Math.min(MAX_CHECKS - checks, MAX_CHECKS_PER_PAIR - pairChecks);
+            const \u4E88\u7B97 = { \u6B8B\u308A: Math.max(0, \u67A02) };
             const \u5224\u5B9A = mergesTowardShared(a.flat, b.flat, p, \u5171\u6709\u5074, MERGE_TOL, \u4E88\u7B97);
-            const \u4F7F\u3063\u305F = Math.max(0, \u67A0) - \u4E88\u7B97.\u6B8B\u308A;
+            const \u4F7F\u3063\u305F = Math.max(0, \u67A02) - \u4E88\u7B97.\u6B8B\u308A;
             checks += \u4F7F\u3063\u305F;
             pairChecks += \u4F7F\u3063\u305F;
             if (\u5224\u5B9A === "merged") continue;
@@ -22470,6 +22470,20 @@ function ChartLineNode({
   }
   const gridTicks = scale.ticks.map((value) => ({ y: yAt(value), value }));
   return /* @__PURE__ */ jsxs("g", { transform: `translate(${x0} ${y0})`, children: [
+    /* @__PURE__ */ 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: "var(--cdl-divider, #d4d4d8)",
+        strokeWidth: active ? 1.5 : 1
+      }
+    ),
     gridTicks.map((t, i) => /* @__PURE__ */ jsxs("g", { children: [
       /* @__PURE__ */ jsx(
         "line",
@@ -24327,52 +24341,52 @@ 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 \u524D\u3042\u308A = data.some((d) => d.previous !== void 0);
+  const \u4ECA\u306E\u5024 = data.map((d) => Math.max(0, d.value));
+  const \u524D\u306E\u5024 = data.map((d) => Math.max(0, d.previous ?? 0));
+  const \u4ECA\u306E\u5408\u8A08 = \u4ECA\u306E\u5024.reduce((acc, value) => acc + value, 0);
+  const \u524D\u306E\u5408\u8A08 = \u524D\u306E\u5024.reduce((acc, value) => acc + value, 0);
+  const \u4ECA\u306E\u5272\u5408 = \u524D\u3042\u308A ? \u4ECA\u306E\u5024.map((value) => \u4ECA\u306E\u5408\u8A08 > 0 ? value / \u4ECA\u306E\u5408\u8A08 : 0) : data.map((d) => d.value / total);
+  const \u524D\u306E\u5272\u5408 = \u524D\u306E\u5024.map((value) => \u524D\u306E\u5408\u8A08 > 0 ? value / \u524D\u306E\u5408\u8A08 : 0);
+  const \u5F62 = node.chartPieForm === "arcs" || node.chartPieForm === "table" ? node.chartPieForm : "ring";
   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 \u5272\u5408\u306E\u7D1A = 19;
+  const \u540D\u524D\u306E\u7D1A = 12;
   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 \u5272\u5408\u306E\u6587\u5B57 = \u4ECA\u306E\u5272\u5408.map(\u5272\u5408\u8868\u8A18);
+  const \u540D\u524D\u306E\u6587\u5B57 = data.map((d, i) => {
+    const \u540D = d.label ?? "";
+    if (\u524D\u3042\u308A) return `${\u540D}  ${\u5B9F\u5024\u8868\u8A18(\u524D\u306E\u5024[i])} \u2192 ${\u5B9F\u5024\u8868\u8A18(\u4ECA\u306E\u5024[i])}`;
+    return `${\u5B9F\u5024\u8868\u8A18(d.value)}%` === \u5272\u5408\u306E\u6587\u5B57[i] ? \u540D : `${\u540D}  ${\u5B9F\u5024\u8868\u8A18(d.value)}`;
+  });
+  if (\u5F62 !== "ring") {
+    const \u5171\u901A = { node, active, data, \u5272\u5408: \u4ECA\u306E\u5272\u5408, x0, y0, drawing, progress, instanceId };
+    return \u5F62 === "arcs" ? \u5F27\u306E\u5F62(\u5171\u901A) : \u8868\u306E\u5F62(\u5171\u901A);
+  }
   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))
+      (_d, i) => Math.max(
+        textWidth(\u5272\u5408\u306E\u6587\u5B57[i] ?? "", \u5272\u5408\u306E\u7D1A),
+        textWidth(\u540D\u524D\u306E\u6587\u5B57[i] ?? "", \u540D\u524D\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 \u5916\u306E\u5185\u534A\u5F84 = radius * (\u524D\u3042\u308A ? 0.75 : 0.58);
+  const \u524D\u306E\u5916\u534A\u5F84 = radius * 0.67;
+  const \u524D\u306E\u5185\u534A\u5F84 = radius * 0.42;
   const cx = node.w / 2;
   const cy = PAD_TOP2 + chartAreaH / 2;
-  let cumAngle = -Math.PI / 2;
-  let cumFrac = 0;
-  const slices = data.map((d) => {
-    const frac = d.value / total;
-    const angle = frac * Math.PI * 2;
-    const a0 = cumAngle;
-    const a1 = cumAngle + angle;
-    cumAngle = a1;
-    const startFrac = cumFrac;
-    cumFrac += frac;
-    const x1 = cx + radius * Math.cos(a0);
-    const y1 = cy + radius * Math.sin(a0);
-    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 ${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 \u524D\u306Eslices = \u524D\u3042\u308A ? \u8F2A\u3092\u7D44\u3080(data, cx, cy, \u524D\u306E\u5916\u534A\u5F84, \u524D\u306E\u5185\u534A\u5F84, \u524D\u306E\u5272\u5408) : [];
+  const slices = \u8F2A\u3092\u7D44\u3080(data, cx, cy, radius, \u5916\u306E\u5185\u534A\u5F84, \u4ECA\u306E\u5272\u5408);
   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}`;
@@ -24396,19 +24410,34 @@ function ChartPieNode({
       drawing && /* @__PURE__ */ jsx("clipPath", { id: \u5207\u308A\u629C\u304Did, children: \u6247\u5F62\u306E\u5207\u308A\u629C\u304D(cx, cy, radius + 2, \u958B\u304D) }),
       /* @__PURE__ */ jsx("filter", { id: \u5F71id, x: "-20%", y: "-20%", width: "140%", height: "140%", children: /* @__PURE__ */ jsx("feDropShadow", { dx: "0", dy: "6", stdDeviation: "10", floodColor: "#0b1220", floodOpacity: "0.16" }) })
     ] }),
-    /* @__PURE__ */ jsx("g", { ...drawing ? { clipPath: `url(#${\u5207\u308A\u629C\u304Did})` } : {}, filter: `url(#${\u5F71id})`, children: slices.map((s, idx) => /* @__PURE__ */ 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),
-        stroke: "var(--cdl-node-fill, #ffffff)",
-        strokeWidth: 3,
-        strokeLinejoin: "round"
-      },
-      `slice-${idx}`
-    )) }),
+    /* @__PURE__ */ jsxs("g", { ...drawing ? { clipPath: `url(#${\u5207\u308A\u629C\u304Did})` } : {}, filter: `url(#${\u5F71id})`, children: [
+      \u524D\u306Eslices.map((s, idx) => /* @__PURE__ */ jsx(
+        "path",
+        {
+          "data-cdl-role": "chart-pie-slice-previous",
+          "data-cdl-unresolved": s.d.unresolved ? "true" : void 0,
+          d: s.path,
+          fill: sliceColor(s.d.tone, idx),
+          stroke: "var(--cdl-node-fill, #ffffff)",
+          strokeWidth: 3,
+          strokeLinejoin: "round"
+        },
+        `slice-previous-${idx}`
+      )),
+      slices.map((s, idx) => /* @__PURE__ */ 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),
+          stroke: "var(--cdl-node-fill, #ffffff)",
+          strokeWidth: 3,
+          strokeLinejoin: "round"
+        },
+        `slice-${idx}`
+      ))
+    ] }),
     /* @__PURE__ */ jsx(
       "text",
       {
@@ -24418,7 +24447,7 @@ function ChartPieNode({
         fontSize: Math.round(radius * 0.26),
         fontWeight: 600,
         fill: "var(--cdl-text, #1a1f2a)",
-        children: \u5B9F\u5024\u8868\u8A18(Math.round(total))
+        children: \u5B9F\u5024\u8868\u8A18(Math.round(\u524D\u3042\u308A ? \u4ECA\u306E\u5408\u8A08 : total))
       }
     ),
     /* @__PURE__ */ jsx(
@@ -24455,12 +24484,12 @@ function ChartPieNode({
           "text",
           {
             x: \u5B57x,
-            y: \u6298\u308Cy - 3,
+            y: \u6298\u308Cy - 1,
             textAnchor: \u53F3 ? "start" : "end",
-            fontSize: \u540D\u672D\u306E\u7D1A,
+            fontSize: \u5272\u5408\u306E\u7D1A,
             fontWeight: 600,
             fill: "var(--cdl-text, #1a1f2a)",
-            children: s.d.label
+            children: \u5272\u5408\u306E\u6587\u5B57[idx]
           }
         ),
         /* @__PURE__ */ jsx(
@@ -24469,15 +24498,275 @@ function ChartPieNode({
             x: \u5B57x,
             y: \u6298\u308Cy + 15,
             textAnchor: \u53F3 ? "start" : "end",
-            fontSize: \u6570\u5024\u306E\u7D1A,
+            fontSize: \u540D\u524D\u306E\u7D1A,
             fill: "var(--cdl-text-dim, #5a6270)",
-            children: \u6570\u5024\u306E\u6587\u5B57[idx]
+            children: \u540D\u524D\u306E\u6587\u5B57[idx]
           }
         )
       ] }, `callout-${idx}`);
     })
   ] });
 }
+function \u8F2A\u3092\u7D44\u3080(data, cx, cy, \u5916\u534A\u5F84, \u5185\u534A\u5F84, \u5272\u5408) {
+  let cumAngle = -Math.PI / 2;
+  let cumFrac = 0;
+  return data.map((d, idx) => {
+    const frac = \u5272\u5408[idx] ?? 0;
+    const angle = frac * Math.PI * 2;
+    const a0 = cumAngle;
+    const a1 = cumAngle + angle;
+    cumAngle = a1;
+    const startFrac = cumFrac;
+    cumFrac += frac;
+    const x1 = cx + \u5916\u534A\u5F84 * Math.cos(a0);
+    const y1 = cy + \u5916\u534A\u5F84 * Math.sin(a0);
+    const x2 = cx + \u5916\u534A\u5F84 * Math.cos(a1);
+    const y2 = cy + \u5916\u534A\u5F84 * 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 ${x1} ${y1} A ${\u5916\u534A\u5F84} ${\u5916\u534A\u5F84} 0 ${large} 1 ${x2} ${y2} L ${x3} ${y3} A ${\u5185\u534A\u5F84} ${\u5185\u534A\u5F84} 0 ${large} 0 ${x4} ${y4} Z`;
+    return { d, frac, path, startFrac, \u4E2D\u592E\u89D2: (a0 + a1) / 2 };
+  });
+}
+function \u67A0(node, active) {
+  return /* @__PURE__ */ 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
+    }
+  );
+}
+function \u5F27\u306E\u5F62({ node, active, data, \u5272\u5408, x0, y0, drawing, progress }) {
+  const PAD = 20;
+  const \u540D\u524D\u306E\u7D1A = 14;
+  const \u5272\u5408\u306E\u7D1A = 24;
+  const \u5370\u304B\u3089\u540D\u524D\u307E\u30672 = 18;
+  const \u540D\u524D\u304B\u3089\u5272\u5408\u307E\u3067 = 24;
+  const \u5272\u5408\u306E\u6587\u5B57 = \u5272\u5408.map(\u5272\u5408\u8868\u8A18);
+  const \u4E00\u89A7\u5E45 = 10 + \u5370\u304B\u3089\u540D\u524D\u307E\u30672 + Math.max(0, ...data.map((d) => textWidth(d.label ?? "", \u540D\u524D\u306E\u7D1A))) + \u540D\u524D\u304B\u3089\u5272\u5408\u307E\u3067 + Math.max(0, ...\u5272\u5408\u306E\u6587\u5B57.map((t) => textWidth(t, \u5272\u5408\u306E\u7D1A)));
+  const \u7E26\u304B\u3089 = (node.h - PAD * 2) / 2;
+  const \u6A2A\u304B\u3089 = (node.w - PAD * 2 - \u4E00\u89A7\u5E45 - 28) / 2;
+  const R = Math.max(24, Math.min(\u7E26\u304B\u3089, \u6A2A\u304B\u3089));
+  const cx = PAD + R;
+  const cy = node.h / 2;
+  const \u7A74 = R * 0.34;
+  const \u523B\u307F = (R - \u7A74) / Math.max(1, data.length);
+  const \u592A\u3055 = Math.max(3, \u523B\u307F * 0.6);
+  const \u958B\u304D = \u9032\u307F\u3092\u7573\u3080(drawing, progress);
+  const \u4E00\u89A7\u5DE6 = node.w - PAD - \u4E00\u89A7\u5E45;
+  const \u884C\u306E\u9593 = Math.min(56, (node.h - PAD * 2) / Math.max(1, data.length));
+  const \u4E00\u89A7\u4E0A = node.h / 2 - \u884C\u306E\u9593 * (data.length - 1) / 2;
+  return /* @__PURE__ */ jsxs("g", { transform: `translate(${x0} ${y0})`, children: [
+    \u67A0(node, active),
+    data.map((d, idx) => {
+      const r = R - \u592A\u3055 / 2 - idx * \u523B\u307F;
+      if (r <= \u592A\u3055 / 2) return null;
+      const \u53D6\u308A\u5206 = (\u5272\u5408[idx] ?? 0) * (drawing ? \u958B\u304D : 1);
+      return /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            "data-cdl-role": "chart-pie-arc-track",
+            cx,
+            cy,
+            r,
+            fill: "none",
+            stroke: "var(--cdl-divider, #d4d4d8)",
+            strokeWidth: \u592A\u3055
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            "data-cdl-role": "chart-pie-arc",
+            "data-cdl-unresolved": d.unresolved ? "true" : void 0,
+            d: \u5F27\u306E\u9053(cx, cy, r, \u53D6\u308A\u5206),
+            fill: "none",
+            stroke: sliceColor(d.tone, idx),
+            strokeWidth: \u592A\u3055,
+            strokeLinecap: "round"
+          }
+        )
+      ] }, `arc-${idx}`);
+    }),
+    data.map((d, idx) => {
+      const y = \u4E00\u89A7\u4E0A + \u884C\u306E\u9593 * idx;
+      return /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x: \u4E00\u89A7\u5DE6,
+            y: y - 9,
+            width: 10,
+            height: 10,
+            rx: 2,
+            fill: sliceColor(d.tone, idx)
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "text",
+          {
+            x: \u4E00\u89A7\u5DE6 + \u5370\u304B\u3089\u540D\u524D\u307E\u30672,
+            y,
+            fontSize: \u540D\u524D\u306E\u7D1A,
+            fill: "var(--cdl-text, #1a1f2a)",
+            children: d.label
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "text",
+          {
+            x: node.w - PAD,
+            y: y + 4,
+            textAnchor: "end",
+            fontSize: \u5272\u5408\u306E\u7D1A,
+            fontWeight: 600,
+            fill: "var(--cdl-text, #1a1f2a)",
+            children: \u5272\u5408\u306E\u6587\u5B57[idx]
+          }
+        )
+      ] }, `row-${idx}`);
+    })
+  ] });
+}
+function \u8868\u306E\u5F62({ node, active, data, \u5272\u5408, x0, y0, drawing, progress, instanceId }) {
+  const PAD = 20;
+  const \u898B\u51FA\u3057\u306E\u7D1A = 11;
+  const \u540D\u524D\u306E\u7D1A = 15;
+  const \u5272\u5408\u306E\u7D1A = 17;
+  const \u5B9F\u6570\u306E\u7D1A = 15;
+  const \u5370\u304B\u3089\u540D\u524D\u307E\u30672 = 18;
+  const \u5272\u5408\u306E\u6587\u5B57 = \u5272\u5408.map(\u5272\u5408\u8868\u8A18);
+  const \u5B9F\u6570\u306E\u6587\u5B57 = data.map((d) => \u5B9F\u5024\u8868\u8A18(d.value));
+  const \u540D\u524D\u5E45 = Math.max(0, ...data.map((d) => textWidth(d.label ?? "", \u540D\u524D\u306E\u7D1A)));
+  const \u5272\u5408\u5E45 = Math.max(textWidth("\u5272\u5408", \u898B\u51FA\u3057\u306E\u7D1A), ...\u5272\u5408\u306E\u6587\u5B57.map((t) => textWidth(t, \u5272\u5408\u306E\u7D1A)));
+  const \u5B9F\u6570\u5E45 = Math.max(textWidth("\u5024", \u898B\u51FA\u3057\u306E\u7D1A), ...\u5B9F\u6570\u306E\u6587\u5B57.map((t) => textWidth(t, \u5B9F\u6570\u306E\u7D1A)));
+  const \u8868\u5E45 = 10 + \u5370\u304B\u3089\u540D\u524D\u307E\u30672 + \u540D\u524D\u5E45 + 28 + \u5272\u5408\u5E45 + 24 + \u5B9F\u6570\u5E45;
+  const \u7E26\u304B\u3089 = (node.h - PAD * 2) / 2;
+  const \u6A2A\u304B\u3089 = (node.w - PAD * 2 - \u8868\u5E45 - 28) / 2;
+  const R = Math.max(24, Math.min(\u7E26\u304B\u3089, \u6A2A\u304B\u3089));
+  const \u5185\u534A\u5F84 = R * 0.58;
+  const cx = PAD + R;
+  const cy = node.h / 2;
+  const \u8868\u5DE6 = node.w - PAD - \u8868\u5E45;
+  const \u53F3\u7AEF = node.w - PAD;
+  const \u5272\u5408\u53F3 = \u53F3\u7AEF - \u5B9F\u6570\u5E45 - 24;
+  const \u884C\u306E\u9593 = Math.min(52, (node.h - PAD * 2 - 40) / Math.max(1, data.length));
+  const \u898B\u51FA\u3057\u306Ey = node.h / 2 - \u884C\u306E\u9593 * data.length / 2 - 14;
+  const \u958B\u304D = \u9032\u307F\u3092\u7573\u3080(drawing, progress);
+  const \u5207\u308A\u629C\u304Did = `cdl-pie-draw-${instanceId}`;
+  const \u958B\u304D\u59CB\u3081\u305F = (\u59CB\u307E\u308A) => !drawing || \u958B\u304D > \u59CB\u307E\u308A;
+  let \u89D2 = -Math.PI / 2;
+  let \u7D2F\u8A08 = 0;
+  const \u6247\u305F\u3061 = data.map((d, idx) => {
+    const frac = \u5272\u5408[idx] ?? 0;
+    const a0 = \u89D2;
+    const a1 = \u89D2 + frac * Math.PI * 2;
+    \u89D2 = a1;
+    const \u59CB\u307E\u308A = \u7D2F\u8A08;
+    \u7D2F\u8A08 += frac;
+    return { d, idx, \u59CB\u307E\u308A, path: \u8F2A\u306E\u9053(cx, cy, R, \u5185\u534A\u5F84, a0, a1) };
+  });
+  return /* @__PURE__ */ jsxs("g", { transform: `translate(${x0} ${y0})`, children: [
+    \u67A0(node, active),
+    drawing && /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: \u5207\u308A\u629C\u304Did, children: \u6247\u5F62\u306E\u5207\u308A\u629C\u304D(cx, cy, R + 2, \u958B\u304D) }) }),
+    /* @__PURE__ */ jsx("g", { ...drawing ? { clipPath: `url(#${\u5207\u308A\u629C\u304Did})` } : {}, children: \u6247\u305F\u3061.map((s) => /* @__PURE__ */ 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, s.idx),
+        stroke: "var(--cdl-node-fill, #ffffff)",
+        strokeWidth: 3,
+        strokeLinejoin: "round"
+      },
+      `slice-${s.idx}`
+    )) }),
+    /* @__PURE__ */ jsx(
+      "text",
+      {
+        x: cx,
+        y: cy - 2,
+        textAnchor: "middle",
+        fontSize: Math.round(R * 0.26),
+        fontWeight: 600,
+        fill: "var(--cdl-text, #1a1f2a)",
+        children: \u5B9F\u5024\u8868\u8A18(Math.round(data.reduce((acc, d) => acc + d.value, 0)))
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "text",
+      {
+        x: cx,
+        y: cy + Math.round(R * 0.2),
+        textAnchor: "middle",
+        fontSize: Math.round(R * 0.12),
+        fill: "var(--cdl-text-dim, #5a6270)",
+        children: "\u5408\u8A08"
+      }
+    ),
+    /* @__PURE__ */ jsx("text", { x: \u8868\u5DE6, y: \u898B\u51FA\u3057\u306Ey, fontSize: \u898B\u51FA\u3057\u306E\u7D1A, fill: "var(--cdl-text-dim, #5a6270)", children: "\u5185\u8A33" }),
+    /* @__PURE__ */ jsx("text", { x: \u5272\u5408\u53F3, y: \u898B\u51FA\u3057\u306Ey, textAnchor: "end", fontSize: \u898B\u51FA\u3057\u306E\u7D1A, fill: "var(--cdl-text-dim, #5a6270)", children: "\u5272\u5408" }),
+    /* @__PURE__ */ jsx("text", { x: \u53F3\u7AEF, y: \u898B\u51FA\u3057\u306Ey, textAnchor: "end", fontSize: \u898B\u51FA\u3057\u306E\u7D1A, fill: "var(--cdl-text-dim, #5a6270)", children: "\u5024" }),
+    /* @__PURE__ */ jsx(
+      "line",
+      {
+        "data-cdl-role": "chart-pie-table-rule",
+        x1: \u8868\u5DE6,
+        y1: \u898B\u51FA\u3057\u306Ey + 10,
+        x2: \u53F3\u7AEF,
+        y2: \u898B\u51FA\u3057\u306Ey + 10,
+        stroke: "var(--cdl-text, #1a1f2a)",
+        strokeWidth: 1.2
+      }
+    ),
+    \u6247\u305F\u3061.map((s) => {
+      if (!\u958B\u304D\u59CB\u3081\u305F(s.\u59CB\u307E\u308A)) return null;
+      const y = \u898B\u51FA\u3057\u306Ey + 40 + \u884C\u306E\u9593 * s.idx;
+      return /* @__PURE__ */ jsxs("g", { children: [
+        /* @__PURE__ */ jsx("rect", { x: \u8868\u5DE6, y: y - 10, width: 10, height: 10, rx: 2, fill: sliceColor(s.d.tone, s.idx) }),
+        /* @__PURE__ */ jsx("text", { x: \u8868\u5DE6 + \u5370\u304B\u3089\u540D\u524D\u307E\u30672, y, fontSize: \u540D\u524D\u306E\u7D1A, fill: "var(--cdl-text, #1a1f2a)", children: s.d.label }),
+        /* @__PURE__ */ jsx("text", { x: \u5272\u5408\u53F3, y, textAnchor: "end", fontSize: \u5272\u5408\u306E\u7D1A, fontWeight: 600, fill: "var(--cdl-text, #1a1f2a)", children: \u5272\u5408\u306E\u6587\u5B57[s.idx] }),
+        /* @__PURE__ */ jsx("text", { x: \u53F3\u7AEF, y, textAnchor: "end", fontSize: \u5B9F\u6570\u306E\u7D1A, fill: "var(--cdl-text-dim, #5a6270)", children: \u5B9F\u6570\u306E\u6587\u5B57[s.idx] }),
+        /* @__PURE__ */ jsx(
+          "line",
+          {
+            "data-cdl-role": "chart-pie-table-rule",
+            x1: \u8868\u5DE6,
+            y1: y + 16,
+            x2: \u53F3\u7AEF,
+            y2: y + 16,
+            stroke: "var(--cdl-divider, #d4d4d8)",
+            strokeWidth: 1
+          }
+        )
+      ] }, `row-${s.idx}`);
+    })
+  ] });
+}
+function \u5F27\u306E\u9053(cx, cy, r, \u53D6\u308A\u5206) {
+  const \u5B9F\u52B9 = Math.max(0, Math.min(0.9999, \u53D6\u308A\u5206));
+  const a0 = -Math.PI / 2;
+  const a1 = a0 + \u5B9F\u52B9 * Math.PI * 2;
+  const large = \u5B9F\u52B9 > 0.5 ? 1 : 0;
+  return `M ${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)}`;
+}
+function \u8F2A\u306E\u9053(cx, cy, R, r, a0, a1) {
+  const large = a1 - a0 > Math.PI ? 1 : 0;
+  return `M ${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)} L ${cx + r * Math.cos(a1)} ${cy + r * Math.sin(a1)} A ${r} ${r} 0 ${large} 0 ${cx + r * Math.cos(a0)} ${cy + r * Math.sin(a0)} Z`;
+}
 function \u6247\u5F62\u306E\u5207\u308A\u629C\u304D(cx, cy, r, \u958B\u304D) {
   if (\u958B\u304D <= 0) return null;
   if (\u958B\u304D >= 1) return /* @__PURE__ */ jsx("circle", { cx, cy, r });
@@ -24679,8 +24968,8 @@ function ChartRadialNode({
       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))
+      \u8ECC\u9053: \u5F27\u306E\u90532(\u5F27\u306Ecx, cy, \u4E2D\u5FC3\u534A\u5F84, \u5E2F\u306E\u5E45, 0.9999),
+      \u53D6\u308A\u5206: frac <= 0 ? null : \u5F27\u306E\u90532(\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;
@@ -24751,7 +25040,7 @@ function ChartRadialNode({
   ] });
 }
 var \u5370\u306E\u5E45 = 18;
-function \u5F27\u306E\u9053(cx, cy, \u4E2D\u5FC3\u534A\u5F84, \u5E45, \u5272\u5408) {
+function \u5F27\u306E\u90532(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;
@@ -24797,12 +25086,12 @@ function ChartStatNode({
       }
     ),
     data.map((d, idx) => {
-      const \u67A0 = \u533A\u753B.\u67A0(idx);
+      const \u67A02 = \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__ */ jsxs("g", { "data-cdl-role": "chart-stat-item", transform: `translate(${\u67A0.x} ${\u67A0.y})`, children: [
+      const \u6570\u5024\u306E\u7D1A = \u53CE\u3081\u308B\u7D1A(\u6570\u5024, \u67A02.w - \u533A\u753B.\u4F59\u767D * 2, \u533A\u753B.\u6570\u5024\u306E\u7D1A, \u533A\u753B.\u540D\u524D\u306E\u7D1A + 1);
+      return /* @__PURE__ */ jsxs("g", { "data-cdl-role": "chart-stat-item", transform: `translate(${\u67A02.x} ${\u67A02.y})`, children: [
         idx > 0 && /* @__PURE__ */ jsx(
           "line",
           {
@@ -24810,7 +25099,7 @@ function ChartStatNode({
             x1: 0,
             y1: \u533A\u753B.\u4F59\u767D,
             x2: 0,
-            y2: \u67A0.h - \u533A\u753B.\u4F59\u767D,
+            y2: \u67A02.h - \u533A\u753B.\u4F59\u767D,
             stroke: "var(--cdl-divider, #d4d4d8)",
             strokeWidth: 1
           }
@@ -24819,7 +25108,7 @@ function ChartStatNode({
           "text",
           {
             "data-cdl-role": "chart-stat-label",
-            x: \u67A0.w / 2,
+            x: \u67A02.w / 2,
             y: \u533A\u753B.\u540D\u524D\u306Ey,
             fontSize: \u533A\u753B.\u540D\u524D\u306E\u7D1A,
             fontWeight: 700,
@@ -24833,7 +25122,7 @@ function ChartStatNode({
           {
             "data-cdl-role": "chart-stat-value",
             "data-cdl-unresolved": d.unresolved ? "true" : void 0,
-            x: \u67A0.w / 2,
+            x: \u67A02.w / 2,
             y: \u533A\u753B.\u6570\u5024\u306Ey,
             fontSize: \u6570\u5024\u306E\u7D1A,
             fontWeight: 700,
@@ -24846,7 +25135,7 @@ function ChartStatNode({
           "circle",
           {
             "data-cdl-role": "chart-stat-track",
-            cx: \u67A0.w / 2,
+            cx: \u67A02.w / 2,
             cy: \u533A\u753B.\u5F27\u306Ey,
             r: \u533A\u753B.\u5F27\u306E\u534A\u5F84,
             fill: "none",
@@ -24859,7 +25148,7 @@ function ChartStatNode({
           "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)),
+            d: \u5F27\u306E\u90533(\u67A02.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,
@@ -24870,7 +25159,7 @@ function ChartStatNode({
           "text",
           {
             "data-cdl-role": "chart-stat-share",
-            x: \u67A0.w / 2,
+            x: \u67A02.w / 2,
             y: \u533A\u753B.\u5272\u5408\u306Ey,
             fontSize: \u533A\u753B.\u5272\u5408\u306E\u7D1A,
             textAnchor: "middle",
@@ -24915,7 +25204,7 @@ function \u53CE\u3081\u308B\u7D1A(\u5B57, \u4F7F\u3048\u308B\u5E452, \u521D\u671
   while (\u7D1A > \u4E0B\u9650 && textWidth(\u5B57, \u7D1A) > \u4F7F\u3048\u308B\u5E452) \u7D1A -= 1;
   return \u7D1A;
 }
-function \u5F27\u306E\u90532(cx, cy, r, \u5272\u5408) {
+function \u5F27\u306E\u90533(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;