@cardenelabs/cdl 0.34.0 → 0.36.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-C2rcAsgk.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-C2rcAsgk.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-R7v2bfyz.cjs';
+export { q as CdlDiagramView, r as CdlEventBinding, s as CdlEventKind, t as CdlFormula, u as CdlPhase, v as ChartPieForm, w as ChartSlopeForm, x as EDGE_HEADS, y as EDGE_HEAD_DEFAULT, z as EDGE_HEAD_FILLS, A as EDGE_HEAD_FILL_DEFAULT, D as EDGE_REVEALS, F as EDGE_REVEAL_DEFAULT, G as EDGE_STYLES, H as EdgeReveal, I as InteractiveHandlerMap, K as InteractiveSignalsAccessor, M as LaidLane, O as NODE_KINDS, P as ScrollProgressHandle, U as TONES, V as computeEventBindingKey, W as computeFormulaKey, X as computeInputSignalKey, Y as computeScrollTriggerKey, Z as computed, _ as createInteractiveSignalsAccessor, $ as createScrollProgressHandle, a0 as createScrollProgressSignals, a1 as hasInteractivePrimitives, a2 as sequenceBoardMetrics, a3 as sequenceStepId, a4 as signal } from './render-R7v2bfyz.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-C2rcAsgk.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-C2rcAsgk.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-R7v2bfyz.js';
+export { q as CdlDiagramView, r as CdlEventBinding, s as CdlEventKind, t as CdlFormula, u as CdlPhase, v as ChartPieForm, w as ChartSlopeForm, x as EDGE_HEADS, y as EDGE_HEAD_DEFAULT, z as EDGE_HEAD_FILLS, A as EDGE_HEAD_FILL_DEFAULT, D as EDGE_REVEALS, F as EDGE_REVEAL_DEFAULT, G as EDGE_STYLES, H as EdgeReveal, I as InteractiveHandlerMap, K as InteractiveSignalsAccessor, M as LaidLane, O as NODE_KINDS, P as ScrollProgressHandle, U as TONES, V as computeEventBindingKey, W as computeFormulaKey, X as computeInputSignalKey, Y as computeScrollTriggerKey, Z as computed, _ as createInteractiveSignalsAccessor, $ as createScrollProgressHandle, a0 as createScrollProgressSignals, a1 as hasInteractivePrimitives, a2 as sequenceBoardMetrics, a3 as sequenceStepId, a4 as signal } from './render-R7v2bfyz.js';
 import { JSX } from 'react';
 
 declare function effect(fn: () => void | (() => void)): () => void;

package/dist/index.js

@@ -24336,6 +24336,15 @@ function interpolateColor(template, stateValues, fallback) {
   if (!template) return fallback;
   return interpolate(template, stateValues);
 }
+
+// src/kinds/chart-number.ts
+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 ChartPieNode({
   node,
   active,
@@ -24783,13 +24792,6 @@ 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__ */ jsx("path", { d });
 }
-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 chartSeriesColor(idx);
@@ -24830,7 +24832,7 @@ function ChartGaugeNode({
     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 \u5408\u8A08\u306E\u6587\u5B57 = \u5B9F\u5024\u8868\u8A18(Math.round(total));
   const \u6A2A\u306E\u4E0A\u9650 = \u5185\u534A\u5F84 * 2 * 0.86;
   const \u7D1A\u306E\u5019\u88DC = Math.min(
     // 横 = 実際の字幅から逆算する
@@ -24895,7 +24897,7 @@ function ChartGaugeNode({
     ),
     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)}`;
+      const \u6570\u5024 = `${\u5B9F\u5024\u8868\u8A18(d.value)}  ${\u5272\u5408\u8868\u8A18(d.value / total)}`;
       return /* @__PURE__ */ jsxs("g", { "data-cdl-role": "chart-gauge-item", children: [
         /* @__PURE__ */ jsx("rect", { x, y: \u5185\u8A33\u306Ey, width: 30, height: 4, rx: 2, fill: arcColor(d.tone, idx) }),
         /* @__PURE__ */ jsx(
@@ -24927,13 +24929,6 @@ function \u5207\u308A\u8A70\u3081\u308B(s, \u4E0A\u9650, \u7D1A) {
   }
   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);
@@ -24953,7 +24948,7 @@ function ChartRadialNode({
   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 \u6570\u5024\u306E\u6587\u5B57 = data.map((d) => `${\u5B9F\u5024\u8868\u8A18(d.value)}  ${\u5272\u5408\u8868\u8A18(d.value / total)}`);
   const \u4E00\u89A7\u306E\u5E45 = \u5370\u306E\u5E45 + Math.max(
     0,
     ...data.map(
@@ -25056,13 +25051,6 @@ function \u5F27\u306E\u90532(cx, cy, \u4E2D\u5FC3\u534A\u5F84, \u5E45, \u5272\u5
   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);
@@ -25096,7 +25084,7 @@ function ChartStatNode({
       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 = \u5B9F\u5024\u8868\u8A18(d.value);
       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(
@@ -25171,7 +25159,7 @@ function ChartStatNode({
             fontSize: \u533A\u753B.\u5272\u5408\u306E\u7D1A,
             textAnchor: "middle",
             fill: "var(--cdl-text-dim, #5a6270)",
-            children: \u5272\u5408\u8868\u8A184(frac)
+            children: \u5272\u5408\u8868\u8A18(frac)
           }
         )
       ] }, `stat-${idx}`);
@@ -25218,13 +25206,6 @@ function \u5F27\u306E\u90533(cx, cy, r, \u5272\u5408) {
   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);
@@ -25260,7 +25241,7 @@ function ChartWaffleNode({
   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 \u6570\u5024\u306E\u6587\u5B57 = data.map((d, i) => `${\u5B9F\u5024\u8868\u8A18(d.value)}  ${\u914D\u5206[i] ?? 0}%`);
   const \u4E00\u89A7\u306E\u5E45 = \u5370\u306E\u5E452 + Math.max(
     0,
     ...data.map(
@@ -25344,9 +25325,6 @@ function ChartWaffleNode({
     })
   ] });
 }
-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);
@@ -25433,7 +25411,7 @@ function ChartStackedBarNode({
                 fontWeight: 700,
                 textAnchor: "middle",
                 fill: "#ffffff",
-                children: \u5272\u5408\u8868\u8A185(s.\u5272\u5408)
+                children: \u5272\u5408\u8868\u8A18(s.\u5272\u5408)
               }
             ),
             w >= SLICE_MIN_W_FOR_VALUE && /* @__PURE__ */ jsx(
@@ -25446,7 +25424,7 @@ function ChartStackedBarNode({
                 textAnchor: "middle",
                 fill: "#ffffff",
                 fillOpacity: 0.85,
-                children: \u5B9F\u5024\u8868\u8A186(s.\u5B9F\u5024)
+                children: \u5B9F\u5024\u8868\u8A18(s.\u5B9F\u5024)
               }
             )
           ] }, `slice-${idx}`);
@@ -25491,13 +25469,6 @@ function \u5E2F\u3092\u7D44\u3080(\u540D\u524D, data, \u53D6\u308B) {
     }))
   };
 }
-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);
@@ -25519,11 +25490,6 @@ function \u4E00\u89A7\u306E\u4E26\u3073(data, \u5DE6, \u53F3\u7AEF, \u7D1A) {
   });
   return out;
 }
-
-// src/kinds/chart-number.ts
-function \u5B9F\u5024\u8868\u8A187(v) {
-  return Number.isInteger(v) ? v.toLocaleString("en-US") : v.toLocaleString("en-US", { maximumFractionDigits: 1 });
-}
 var \u7DDA\u306E\u6700\u5C0F\u5E45 = 120;
 function ChartSlopeNode({
   node,
@@ -25559,8 +25525,15 @@ function ChartSlopeNode({
   const \u4E0A\u7AEF = PAD + (\u524D\u3042\u308A ? \u6642\u70B9\u306E\u7D1A + 12 : 0) + 6;
   const \u4E0B\u7AEF = Math.max(\u4E0A\u7AEF + 10, node.h - PAD - 6);
   const y\u3092\u53D6\u308B = (v) => \u5C3A\u306E\u5E45 > 0 ? \u4E0B\u7AEF - (v - \u6700\u5C0F) / \u5C3A\u306E\u5E45 * (\u4E0B\u7AEF - \u4E0A\u7AEF) : (\u4E0A\u7AEF + \u4E0B\u7AEF) / 2;
-  const \u5DE6\u306E\u5B57 = \u7CFB\u5217\u305F\u3061.map((s) => \u5B9F\u5024\u8868\u8A187(s.\u524D));
-  const \u53F3\u306E\u5B57 = \u7CFB\u5217\u305F\u3061.map((s) => \u5B9F\u5024\u8868\u8A187(s.\u4ECA));
+  const \u5F62 = \u524D\u3042\u308A && node.chartSlopeForm === "delta" ? "delta" : "values";
+  const \u5897\u6E1B\u8868\u8A18 = (\u524D, \u4ECA) => {
+    const \u5DEE = \u4ECA - \u524D;
+    return \u5DEE > 0 ? `+${\u5B9F\u5024\u8868\u8A18(\u5DEE)}` : \u5B9F\u5024\u8868\u8A18(\u5DEE);
+  };
+  const \u5DE6\u306E\u5B57 = \u7CFB\u5217\u305F\u3061.map((s) => \u5B9F\u5024\u8868\u8A18(s.\u524D));
+  const \u53F3\u306E\u5B57 = \u7CFB\u5217\u305F\u3061.map(
+    (s) => \u5F62 === "delta" ? \u5897\u6E1B\u8868\u8A18(s.\u524D, s.\u4ECA) : \u5B9F\u5024\u8868\u8A18(s.\u4ECA)
+  );
   const \u5DE6\u5024\u5E45 = Math.max(0, ...\u5DE6\u306E\u5B57.map((t) => textWidth(t, \u5024\u306E\u7D1A)));
   const \u53F3\u5024\u5E45 = Math.max(0, ...\u53F3\u306E\u5B57.map((t) => textWidth(t, \u5024\u306E\u7D1A)));
   const \u540D\u524D\u306B\u4F7F\u3048\u308B = Math.max(
@@ -25602,7 +25575,7 @@ function ChartSlopeNode({
         x2: x,
         y2: \u4E0B\u7AEF + 6,
         stroke: "var(--cdl-divider, #d4d4d8)",
-        strokeWidth: 1
+        strokeWidth: 2
       },
       `axis-${i}`
     )),
@@ -25696,7 +25669,7 @@ function ChartSlopeNode({
               y: \u5DE6y + 5,
               textAnchor: "end",
               fontSize: \u540D\u524D\u306E\u7D1A,
-              fill: "var(--cdl-text-dim, #5a6270)",
+              fill: s.\u8272,
               children: s.\u540D\u524D
             }
           )
@@ -25708,7 +25681,7 @@ function ChartSlopeNode({
             y: \u53F3y + 5,
             textAnchor: "end",
             fontSize: \u540D\u524D\u306E\u7D1A,
-            fill: "var(--cdl-text-dim, #5a6270)",
+            fill: s.\u8272,
             children: s.\u540D\u524D
           }
         ),
@@ -25716,7 +25689,7 @@ function ChartSlopeNode({
           /* @__PURE__ */ jsx(
             "text",
             {
-              "data-cdl-role": "chart-slope-value",
+              "data-cdl-role": \u5F62 === "delta" ? "chart-slope-delta" : "chart-slope-value",
               x: \u53F3\u8EF8x + \u8EF8\u304B\u3089\u5024\u307E\u3067,
               y: \u53F3y + 5,
               fontSize: \u5024\u306E\u7D1A,
@@ -25732,7 +25705,7 @@ function ChartSlopeNode({
               x: \u53F3\u8EF8x + \u8EF8\u304B\u3089\u5024\u307E\u3067 + \u53F3\u5024\u5E45 + \u5024\u304B\u3089\u540D\u524D\u307E\u3067,
               y: \u53F3y + 5,
               fontSize: \u540D\u524D\u306E\u7D1A,
-              fill: "var(--cdl-text-dim, #5a6270)",
+              fill: s.\u8272,
               children: s.\u540D\u524D
             }
           )