@cardenelabs/cdl 0.59.1 → 0.60.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 CdlLang, k as Computed, l as CdlDerivedValue, m as CdlScrollTrigger, L as LaidDiagram, n as CdlDiagramViewProps, o as LaidEdge, p as LaidNode, q as CdlEdge, B as BBox, R as RowMark, N as NodeKind, J as JourneyEmotion, Q as QuadrantKey } from './render-DpwY2hzM.cjs';
-export { r as CdlDiagramView, s as CdlEventBinding, t as CdlEventKind, u as CdlFormula, v as CdlPhase, w as ChartPieForm, x as ChartSlopeForm, y as EDGE_HEADS, z as EDGE_HEAD_DEFAULT, A as EDGE_HEAD_FILLS, D as EDGE_HEAD_FILL_DEFAULT, F as EDGE_REVEALS, G as EDGE_REVEAL_DEFAULT, H as EDGE_STYLES, I as EdgeReveal, K as InteractiveHandlerMap, M as InteractiveSignalsAccessor, O as LaidLane, P as NODE_KINDS, U as RELATION_FOCUSES, V as RELATION_FOCUS_DEFAULT, W as RelationFocus, X as ScrollProgressHandle, Y as TONES, Z as computeEventBindingKey, _ as computeFormulaKey, $ as computeInputSignalKey, a0 as computeScrollTriggerKey, a1 as computed, a2 as createInteractiveSignalsAccessor, a3 as createScrollProgressHandle, a4 as createScrollProgressSignals, a5 as hasInteractivePrimitives, a6 as resolveLang, a7 as sequenceBoardMetrics, a8 as sequenceStepId, a9 as signal } from './render-DpwY2hzM.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 CdlLang, k as Computed, l as CdlDerivedValue, m as CdlScrollTrigger, L as LaidDiagram, n as CdlDiagramViewProps, o as LaidEdge, p as LaidNode, q as CdlEdge, B as BBox, R as RowMark, N as NodeKind, J as JourneyEmotion, Q as QuadrantKey } from './render-MbIjRWdX.cjs';
+export { r as CdlDiagramView, s as CdlEventBinding, t as CdlEventKind, u as CdlFormula, v as CdlPhase, w as ChartPieForm, x as ChartSlopeForm, y as EDGE_HEADS, z as EDGE_HEAD_DEFAULT, A as EDGE_HEAD_FILLS, D as EDGE_HEAD_FILL_DEFAULT, F as EDGE_REVEALS, G as EDGE_REVEAL_DEFAULT, H as EDGE_STYLES, I as EdgeReveal, K as InteractiveHandlerMap, M as InteractiveSignalsAccessor, O as LaidLane, P as NODE_KINDS, U as RELATION_FOCUSES, V as RELATION_FOCUS_DEFAULT, W as RelationFocus, X as ScrollProgressHandle, Y as TONES, Z as computeEventBindingKey, _ as computeFormulaKey, $ as computeInputSignalKey, a0 as computeScrollTriggerKey, a1 as computed, a2 as createInteractiveSignalsAccessor, a3 as createScrollProgressHandle, a4 as createScrollProgressSignals, a5 as hasInteractivePrimitives, a6 as resolveLang, a7 as sequenceBoardMetrics, a8 as sequenceStepId, a9 as signal } from './render-MbIjRWdX.cjs';
 import { JSX } from 'react';
 
 declare function effect(fn: () => void | (() => void)): () => void;
@@ -1170,8 +1170,12 @@ type DiagramBuilder = {
      * consumer が createFormulaComputeds() で computed 化して signal と reactive bind する。
      * expression syntax error は本 method 内で throw (fail-fast)。
      * 例 `.formula("gasFee", "gasBase * (1 + delta/8)")`
+     *
+     * `opts.label` は操作部の式の行に描く名札 (#853)。 例 `.formula("total", "baseFee + tip", { label: "合計" })`
      */
-    formula: (id: string, expression: string) => DiagramBuilder;
+    formula: (id: string, expression: string, opts?: {
+        label?: string;
+    }) => DiagramBuilder;
     /**
      * derive chain = 「連鎖形 formula」 を N 個宣言的に生成 (CAR: derive chain)。
      * 各 iteration で `{i}` 置換と、 直前 iteration の id (`prev`) を参照可能。
@@ -1181,8 +1185,12 @@ type DiagramBuilder = {
      *
      * baseId は「gas1 / gas2 / gas3」 のように `gas${i+1}` として使われる、
      * expr fn は index (0..count-1) と prev id (前 iteration の完全 id) を受け取る。
+     *
+     * `opts.label` は index を受け取り、その式の名札を返す (#853)。 例 `{ label: (i) => \`${i + 1} 回目\` }`
      */
-    deriveChain: (baseId: string, count: number, exprFn: (i: number, prev: string | null) => string) => DiagramBuilder;
+    deriveChain: (baseId: string, count: number, exprFn: (i: number, prev: string | null) => string, opts?: {
+        label?: (i: number) => string;
+    }) => DiagramBuilder;
     /**
      * animation primitive (CAR #245)。 `.animation.scroll(id, opts)` で scroll-driven trigger を追加。
      * 将来的に `.animation.time(...)` 等の time-based primitive を追加する余地を残す namespace。

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 CdlLang, k as Computed, l as CdlDerivedValue, m as CdlScrollTrigger, L as LaidDiagram, n as CdlDiagramViewProps, o as LaidEdge, p as LaidNode, q as CdlEdge, B as BBox, R as RowMark, N as NodeKind, J as JourneyEmotion, Q as QuadrantKey } from './render-DpwY2hzM.js';
-export { r as CdlDiagramView, s as CdlEventBinding, t as CdlEventKind, u as CdlFormula, v as CdlPhase, w as ChartPieForm, x as ChartSlopeForm, y as EDGE_HEADS, z as EDGE_HEAD_DEFAULT, A as EDGE_HEAD_FILLS, D as EDGE_HEAD_FILL_DEFAULT, F as EDGE_REVEALS, G as EDGE_REVEAL_DEFAULT, H as EDGE_STYLES, I as EdgeReveal, K as InteractiveHandlerMap, M as InteractiveSignalsAccessor, O as LaidLane, P as NODE_KINDS, U as RELATION_FOCUSES, V as RELATION_FOCUS_DEFAULT, W as RelationFocus, X as ScrollProgressHandle, Y as TONES, Z as computeEventBindingKey, _ as computeFormulaKey, $ as computeInputSignalKey, a0 as computeScrollTriggerKey, a1 as computed, a2 as createInteractiveSignalsAccessor, a3 as createScrollProgressHandle, a4 as createScrollProgressSignals, a5 as hasInteractivePrimitives, a6 as resolveLang, a7 as sequenceBoardMetrics, a8 as sequenceStepId, a9 as signal } from './render-DpwY2hzM.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 CdlLang, k as Computed, l as CdlDerivedValue, m as CdlScrollTrigger, L as LaidDiagram, n as CdlDiagramViewProps, o as LaidEdge, p as LaidNode, q as CdlEdge, B as BBox, R as RowMark, N as NodeKind, J as JourneyEmotion, Q as QuadrantKey } from './render-MbIjRWdX.js';
+export { r as CdlDiagramView, s as CdlEventBinding, t as CdlEventKind, u as CdlFormula, v as CdlPhase, w as ChartPieForm, x as ChartSlopeForm, y as EDGE_HEADS, z as EDGE_HEAD_DEFAULT, A as EDGE_HEAD_FILLS, D as EDGE_HEAD_FILL_DEFAULT, F as EDGE_REVEALS, G as EDGE_REVEAL_DEFAULT, H as EDGE_STYLES, I as EdgeReveal, K as InteractiveHandlerMap, M as InteractiveSignalsAccessor, O as LaidLane, P as NODE_KINDS, U as RELATION_FOCUSES, V as RELATION_FOCUS_DEFAULT, W as RelationFocus, X as ScrollProgressHandle, Y as TONES, Z as computeEventBindingKey, _ as computeFormulaKey, $ as computeInputSignalKey, a0 as computeScrollTriggerKey, a1 as computed, a2 as createInteractiveSignalsAccessor, a3 as createScrollProgressHandle, a4 as createScrollProgressSignals, a5 as hasInteractivePrimitives, a6 as resolveLang, a7 as sequenceBoardMetrics, a8 as sequenceStepId, a9 as signal } from './render-MbIjRWdX.js';
 import { JSX } from 'react';
 
 declare function effect(fn: () => void | (() => void)): () => void;
@@ -1170,8 +1170,12 @@ type DiagramBuilder = {
      * consumer が createFormulaComputeds() で computed 化して signal と reactive bind する。
      * expression syntax error は本 method 内で throw (fail-fast)。
      * 例 `.formula("gasFee", "gasBase * (1 + delta/8)")`
+     *
+     * `opts.label` は操作部の式の行に描く名札 (#853)。 例 `.formula("total", "baseFee + tip", { label: "合計" })`
      */
-    formula: (id: string, expression: string) => DiagramBuilder;
+    formula: (id: string, expression: string, opts?: {
+        label?: string;
+    }) => DiagramBuilder;
     /**
      * derive chain = 「連鎖形 formula」 を N 個宣言的に生成 (CAR: derive chain)。
      * 各 iteration で `{i}` 置換と、 直前 iteration の id (`prev`) を参照可能。
@@ -1181,8 +1185,12 @@ type DiagramBuilder = {
      *
      * baseId は「gas1 / gas2 / gas3」 のように `gas${i+1}` として使われる、
      * expr fn は index (0..count-1) と prev id (前 iteration の完全 id) を受け取る。
+     *
+     * `opts.label` は index を受け取り、その式の名札を返す (#853)。 例 `{ label: (i) => \`${i + 1} 回目\` }`
      */
-    deriveChain: (baseId: string, count: number, exprFn: (i: number, prev: string | null) => string) => DiagramBuilder;
+    deriveChain: (baseId: string, count: number, exprFn: (i: number, prev: string | null) => string, opts?: {
+        label?: (i: number) => string;
+    }) => DiagramBuilder;
     /**
      * animation primitive (CAR #245)。 `.animation.scroll(id, opts)` で scroll-driven trigger を追加。
      * 将来的に `.animation.time(...)` 等の time-based primitive を追加する余地を残す namespace。

package/dist/index.js

@@ -753,7 +753,7 @@ function tokenize(src) {
           `invalid name "{${name}}" at position ${start} (\u7A7A\u767D / { } / . / [ ] \u306F\u540D\u524D\u306B\u4F7F\u3048\u306A\u3044)`
         );
       }
-      tokens.push({ kind: "id", name, pos: start });
+      tokens.push({ kind: "id", name, pos: start, end: close + 1 });
       i = close + 1;
       continue;
     }
@@ -802,7 +802,7 @@ function tokenize(src) {
           `property access "${name}.${src[i + 1] ?? ""}..." at position ${start} is not allowed (only Math.* namespace is accessible)`
         );
       }
-      tokens.push({ kind: "id", name, pos: start });
+      tokens.push({ kind: "id", name, pos: start, end: i });
       continue;
     }
     if (c === "+") {
@@ -1027,6 +1027,24 @@ function parseFormula(expression) {
   }
   return new Parser(tokens).parse();
 }
+function \u5F0F\u3092\u540D\u672D\u3067\u8AAD\u3080(expression, \u540D\u672D) {
+  let tokens;
+  try {
+    tokens = tokenize(expression);
+  } catch {
+    return expression;
+  }
+  let \u8AAD\u307F = "";
+  let \u524D = 0;
+  for (const t of tokens) {
+    if (t.kind !== "id") continue;
+    const \u672D = \u540D\u672D.get(t.name);
+    if (\u672D === void 0 || \u672D === "") continue;
+    \u8AAD\u307F += expression.slice(\u524D, t.pos) + \u672D;
+    \u524D = t.end;
+  }
+  return \u8AAD\u307F + expression.slice(\u524D);
+}
 function extractIdentifiers(ast, out = /* @__PURE__ */ new Set()) {
   switch (ast.type) {
     case "number":
@@ -1980,6 +1998,8 @@ function useInteractiveIntegration(diagram2, options = {}) {
     const readouts = diagram2.readouts ?? [];
     if (inputs.length === 0 && scrolls.length === 0 && formulasList.length === 0 && readouts.length === 0)
       return null;
+    const \u540D\u672D = /* @__PURE__ */ new Map();
+    for (const x of [...inputs, ...formulasList]) if (x.label) \u540D\u672D.set(x.id, x.label);
     return (
       // 操作部の中の読み出しと入力欄へ、図の言語を届ける (#849)。 型の外の値は英語に落ちる
       /* @__PURE__ */ jsx(\u64CD\u4F5C\u90E8\u306E\u8A00\u8A9E.Provider, { value: resolveLang(diagram2.lang), children: /* @__PURE__ */ jsxs("div", { className: "cdl-ip-root", "data-cdl-interactive-panel": "true", children: [
@@ -1988,12 +2008,13 @@ function useInteractiveIntegration(diagram2, options = {}) {
           FormulaReadout,
           {
             id: f.id,
-            expression: f.expression,
+            name: f.label || f.id,
+            expression: f.label ? \u5F0F\u3092\u540D\u672D\u3067\u8AAD\u3080(f.expression, \u540D\u672D) : f.expression,
             value: stateOverrides[f.id]
           },
           f.id
         )) }),
-        scrolls.length > 0 && /* @__PURE__ */ jsx("div", { className: "cdl-ip-group", children: scrolls.map((s) => /* @__PURE__ */ jsx(ScrollReadout, { id: s.id, progress: stateOverrides[s.id] }, s.id)) }),
+        scrolls.length > 0 && /* @__PURE__ */ jsx("div", { className: "cdl-ip-group", children: scrolls.map((s) => /* @__PURE__ */ jsx(ScrollReadout, { id: s.id, name: s.label || s.id, progress: stateOverrides[s.id] }, s.id)) }),
         readouts.length > 0 && /* @__PURE__ */ jsx("div", { className: "cdl-ip-group", children: readouts.map((r) => /* @__PURE__ */ jsx(ReadoutWidget, { readout: r, stateOverrides: mergedStateValues }, r.id)) })
       ] }) })
     );
@@ -2250,11 +2271,12 @@ function NumberInputWidget({
 }
 function FormulaReadout({
   id,
+  name,
   expression,
   value
 }) {
   return /* @__PURE__ */ jsxs("div", { className: "cdl-ip-item cdl-ip-formula", "data-cdl-formula": id, children: [
-    /* @__PURE__ */ jsx("span", { className: "cdl-ip-label", children: id }),
+    /* @__PURE__ */ jsx("span", { className: "cdl-ip-label", children: name }),
     /* @__PURE__ */ jsxs("code", { className: "cdl-ip-formula-expr", children: [
       "= ",
       expression
@@ -2262,11 +2284,11 @@ function FormulaReadout({
     /* @__PURE__ */ jsx("span", { className: "cdl-ip-formula-value", children: String(value ?? "") })
   ] });
 }
-function ScrollReadout({ id, progress }) {
+function ScrollReadout({ id, name, progress }) {
   const p = typeof progress === "number" ? progress : 0;
   const pct = Math.round(p * 100);
   return /* @__PURE__ */ jsxs("div", { className: "cdl-ip-item cdl-ip-scroll", "data-cdl-scroll": id, children: [
-    /* @__PURE__ */ jsx("span", { className: "cdl-ip-label", children: id }),
+    /* @__PURE__ */ jsx("span", { className: "cdl-ip-label", children: name }),
     /* @__PURE__ */ jsx("div", { className: "cdl-ip-scroll-track", children: /* @__PURE__ */ jsx("div", { className: "cdl-ip-scroll-fill", style: { width: `${pct}%` } }) }),
     /* @__PURE__ */ jsxs("span", { className: "cdl-ip-scroll-value", children: [
       pct,
@@ -10315,7 +10337,7 @@ function diagram(id, options) {
         return api;
       }
     },
-    formula(formulaId, expression) {
+    formula(formulaId, expression, opts) {
       assertUniqueFormulaId(formulaId);
       try {
         parseFormula(expression);
@@ -10323,10 +10345,10 @@ function diagram(id, options) {
         const msg = e instanceof Error ? e.message : String(e);
         throw new Error(`formula '${formulaId}' \u306E expression syntax error: ${msg}`);
       }
-      formulas.push({ id: formulaId, expression });
+      formulas.push({ id: formulaId, expression, ...opts?.label ? { label: opts.label } : {} });
       return api;
     },
-    deriveChain(baseId, count, exprFn) {
+    deriveChain(baseId, count, exprFn, opts) {
       if (!Number.isInteger(count) || count < 1 || count > 100) {
         throw new Error(`deriveChain: count (${count}) \u306F 1..100 \u306E\u6574\u6570\u3067\u3042\u308B\u5FC5\u8981\u304C\u3042\u308A\u307E\u3059`);
       }
@@ -10342,7 +10364,8 @@ function diagram(id, options) {
           const msg = e instanceof Error ? e.message : String(e);
           throw new Error(`deriveChain '${id2}' \u306E expression syntax error: ${msg}`);
         }
-        formulas.push({ id: id2, expression: expr });
+        const label = opts?.label?.(i);
+        formulas.push({ id: id2, expression: expr, ...label ? { label } : {} });
         prev = id2;
       }
       return api;