@cardenelabs/cdl 0.59.1 → 0.61.0

package/CHANGELOG.md

@@ -5,6 +5,51 @@ CDL (Chainome Diagram Language) の主要変更履歴。
 
 ## [Unreleased]
 
+## [0.61.0] - 2026-09-13
+
+### Added
+
+- **選択肢と切り替えの値に見せる名前を書いて、操作部と箱の字をその名前で描けるようにした** (#855)
+
+  選択肢を持つ入力欄 (`dropdown` / `radio` / `tabs` / `multi-select`) は選択肢を文字列で受け、1 つの文字列が
+  値と見せる字を兼ねていた。 値を日本語にすると綴りで読む読み出し (信号の灯り等) が読めなくなるので、日本語の
+  図でも選択肢と箱の差し込み (`状態: {status}`) に `red` のような英字が残っていた。
+
+  選択肢を `{ value, label }` の組でも書けるようにした (文字列と混ぜて書ける。 型は `CdlInputOption`)。
+  操作部の選択肢は名前を描き、`value` 属性・選んだ時に入る値・`data-cdl-multi-value` は綴りのまま。
+  切り替えは `.input.toggle(id, { onLabel, offLabel })` で入と切の名前を書ける。
+
+  箱の題・副題・見出し・値・行の差し込み (`{id}`) は、値が名前を持てば名前を差し込む。 `multi-select` は
+  選んだ値ごとに名前へ置き換える。 状態の値そのものは綴りのまま残すので、表示の出し分け (`visibleIf`)・
+  数の差し込み・読み出しは名前に影響されない。 組み立ての既定値の検査は値で比べ、名前を渡すと拒む。
+
+  名前を書かない図は、操作部も箱も変更前と同じ markup を描く。
+
+## [0.60.0] - 2026-09-13
+
+### Added
+
+- **操作部の式の行を、書き手が付けた名札で描けるようにした** (#853)
+
+  操作部は図の式を 1 行ずつ並べ、名前に式の id、中身に式の文字列をそのまま描いていた (`total1` /
+  `= baseFee + priority`)。 式には名札を書く口が無く、日本語の図に置くとそこだけ英字の識別子が残っていた。
+
+  `.formula(id, expression, { label })` と `.deriveChain(baseId, count, exprFn, { label: (i) => 名札 })` で
+  名札を付けられるようにした。 名札を持つ式の行は、名前に名札を描き、中身の名前のうち名札を持つ入力欄と式の
+  id を名札に置き換えて描く (`= baseFee + priority` → `= 基準手数料 (gwei) + 優先手数料`)。
+  置き換えは式の字句の位置で行い、`Math.min` などの関数の名前と数には当てない。 表示だけの置き換えで、
+  計算は書いた式を読む。
+
+  名札を持たない式は、入力欄に名札があっても、名前も中身も変更前と同じ字で描く。 目印 (`data-cdl-formula`)
+  は名札の有無によらず id のまま。
+
+### Fixed
+
+- **巻き取りの進みの行が、`label` を渡しても id を描いていたのを直した** (#853)
+
+  `.animation.scroll(id, { label })` の名札は図に残っていたが、操作部の行は読んでいなかった。
+  名札があれば名札を描く。 目印 (`data-cdl-scroll`) は id のまま。
+
 ## [0.59.1] - 2026-09-13
 
 ### Fixed
@@ -2600,7 +2645,9 @@ Initial OSS release.
 使わない = annotated tag を push しても GitHub Release は作られず、 Release を作っていない版で
 行き止まりになる。
 
-[Unreleased]: https://github.com/cardene777/cdl/compare/v0.59.1...HEAD
+[Unreleased]: https://github.com/cardene777/cdl/compare/v0.61.0...HEAD
+[0.61.0]: https://github.com/cardene777/cdl/compare/v0.60.0...v0.61.0
+[0.60.0]: https://github.com/cardene777/cdl/compare/v0.59.1...v0.60.0
 [0.59.1]: https://github.com/cardene777/cdl/compare/v0.59.0...v0.59.1
 [0.59.0]: https://github.com/cardene777/cdl/compare/v0.58.0...v0.59.0
 [0.58.0]: https://github.com/cardene777/cdl/compare/v0.57.1...v0.58.0

package/dist/index.cjs

@@ -755,7 +755,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;
     }
@@ -804,7 +804,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 === "+") {
@@ -1029,6 +1029,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":
@@ -1573,6 +1591,34 @@ function warn(message) {
   }
 }
 
+// src/input-option.ts
+function \u9078\u629E\u80A2\u306E\u5024(option) {
+  return typeof option === "string" ? option : option.value;
+}
+function \u9078\u629E\u80A2\u306E\u540D\u524D(option) {
+  return typeof option === "string" || option.label === "" ? \u9078\u629E\u80A2\u306E\u5024(option) : option.label;
+}
+function \u5024\u306E\u540D\u524D\u306E\u8868\u3092\u4F5C\u308B(inputs) {
+  const \u8868 = /* @__PURE__ */ new Map();
+  for (const input of inputs ?? []) {
+    const \u540D\u524D = /* @__PURE__ */ new Map();
+    if (input.kind === "dropdown" || input.kind === "radio" || input.kind === "tabs" || input.kind === "multi-select") {
+      for (const option of input.options) {
+        if (typeof option !== "string" && option.label !== "") \u540D\u524D.set(option.value, option.label);
+      }
+    } else if (input.kind === "toggle") {
+      if (input.onLabel) \u540D\u524D.set("true", input.onLabel);
+      if (input.offLabel) \u540D\u524D.set("false", input.offLabel);
+    }
+    if (\u540D\u524D.size > 0) \u8868.set(input.id, { \u540D\u524D, \u8907\u6570: input.kind === "multi-select" });
+  }
+  return \u8868;
+}
+function \u5024\u3092\u540D\u524D\u3067\u8AAD\u3080(\u5165\u529B\u6B04, \u5024) {
+  if (!\u5165\u529B\u6B04.\u8907\u6570) return \u5165\u529B\u6B04.\u540D\u524D.get(\u5024) ?? \u5024;
+  return \u5024.split(",").map((v) => \u5165\u529B\u6B04.\u540D\u524D.get(v) ?? v).join(",");
+}
+
 // src/kinds/text-width.ts
 var WIDE_RATIO = 1.04;
 var NARROW_RATIO = 0.37;
@@ -1982,6 +2028,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__ */ jsxRuntime.jsx(\u64CD\u4F5C\u90E8\u306E\u8A00\u8A9E.Provider, { value: resolveLang(diagram2.lang), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cdl-ip-root", "data-cdl-interactive-panel": "true", children: [
@@ -1990,12 +2038,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__ */ jsxRuntime.jsx("div", { className: "cdl-ip-group", children: scrolls.map((s) => /* @__PURE__ */ jsxRuntime.jsx(ScrollReadout, { id: s.id, progress: stateOverrides[s.id] }, s.id)) }),
+        scrolls.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cdl-ip-group", children: scrolls.map((s) => /* @__PURE__ */ jsxRuntime.jsx(ScrollReadout, { id: s.id, name: s.label || s.id, progress: stateOverrides[s.id] }, s.id)) }),
         readouts.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cdl-ip-group", children: readouts.map((r) => /* @__PURE__ */ jsxRuntime.jsx(ReadoutWidget, { readout: r, stateOverrides: mergedStateValues }, r.id)) })
       ] }) })
     );
@@ -2078,7 +2127,7 @@ function InputWidget({
             },
             "data-cdl-input": input.id,
             className: "cdl-ip-dropdown-select",
-            children: input.options.map((opt) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: opt, children: opt }, opt))
+            children: input.options.map((opt) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: \u9078\u629E\u80A2\u306E\u5024(opt), children: \u9078\u629E\u80A2\u306E\u540D\u524D(opt) }, \u9078\u629E\u80A2\u306E\u5024(opt)))
           }
         )
       ] });
@@ -2095,17 +2144,17 @@ function InputWidget({
             {
               type: "radio",
               name: input.id,
-              value: opt,
-              checked: value === opt,
+              value: \u9078\u629E\u80A2\u306E\u5024(opt),
+              checked: value === \u9078\u629E\u80A2\u306E\u5024(opt),
               onChange: () => {
-                signal2.value = opt;
+                signal2.value = \u9078\u629E\u80A2\u306E\u5024(opt);
               },
               "data-cdl-input": input.id,
               className: "cdl-ip-radio-input"
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cdl-ip-radio-label", children: opt })
-        ] }, opt)) })
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cdl-ip-radio-label", children: \u9078\u629E\u80A2\u306E\u540D\u524D(opt) })
+        ] }, \u9078\u629E\u80A2\u306E\u5024(opt))) })
       ] });
     case "color":
       return /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "cdl-ip-item cdl-ip-color", "data-cdl-input-kind": "color", children: [
@@ -2155,14 +2204,14 @@ function InputWidget({
           {
             type: "button",
             role: "tab",
-            className: `cdl-ip-tabs-btn ${value === opt ? "cdl-ip-tabs-active" : ""}`,
+            className: `cdl-ip-tabs-btn ${value === \u9078\u629E\u80A2\u306E\u5024(opt) ? "cdl-ip-tabs-active" : ""}`,
             onClick: () => {
-              signal2.value = opt;
+              signal2.value = \u9078\u629E\u80A2\u306E\u5024(opt);
             },
             "data-cdl-input": input.id,
-            children: opt
+            children: \u9078\u629E\u80A2\u306E\u540D\u524D(opt)
           },
-          opt
+          \u9078\u629E\u80A2\u306E\u5024(opt)
         )) })
       ] });
     case "datetime":
@@ -2252,11 +2301,12 @@ function NumberInputWidget({
 }
 function FormulaReadout({
   id,
+  name,
   expression,
   value
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "cdl-ip-item cdl-ip-formula", "data-cdl-formula": id, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cdl-ip-label", children: id }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cdl-ip-label", children: name }),
     /* @__PURE__ */ jsxRuntime.jsxs("code", { className: "cdl-ip-formula-expr", children: [
       "= ",
       expression
@@ -2264,11 +2314,11 @@ function FormulaReadout({
     /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "cdl-ip-item cdl-ip-scroll", "data-cdl-scroll": id, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cdl-ip-label", children: id }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cdl-ip-label", children: name }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cdl-ip-scroll-track", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cdl-ip-scroll-fill", style: { width: `${pct}%` } }) }),
     /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "cdl-ip-scroll-value", children: [
       pct,
@@ -4216,13 +4266,13 @@ function MultiSelectWidget({
       "button",
       {
         type: "button",
-        className: `cdl-ip-multi-select-chip ${selected.has(opt) ? "cdl-ip-multi-select-active" : ""}`,
-        onClick: () => toggle(opt),
+        className: `cdl-ip-multi-select-chip ${selected.has(\u9078\u629E\u80A2\u306E\u5024(opt)) ? "cdl-ip-multi-select-active" : ""}`,
+        onClick: () => toggle(\u9078\u629E\u80A2\u306E\u5024(opt)),
         "data-cdl-input": input.id,
-        "data-cdl-multi-value": opt,
-        children: opt
+        "data-cdl-multi-value": \u9078\u629E\u80A2\u306E\u5024(opt),
+        children: \u9078\u629E\u80A2\u306E\u540D\u524D(opt)
       },
-      opt
+      \u9078\u629E\u80A2\u306E\u5024(opt)
     )) })
   ] });
 }
@@ -10108,9 +10158,9 @@ function diagram(id, options) {
         if (opts.options.length === 0) {
           throw new Error(`input.dropdown '${inputId}' \u306E options \u304C\u7A7A\u3067\u3059 (\u6700\u4F4E 1 \u4EF6\u5FC5\u8981)`);
         }
-        if (!opts.options.includes(opts.defaultValue)) {
+        if (!opts.options.some((o) => \u9078\u629E\u80A2\u306E\u5024(o) === opts.defaultValue)) {
           throw new Error(
-            `input.dropdown '${inputId}' \u306E defaultValue '${opts.defaultValue}' \u304C options \u306B\u542B\u307E\u308C\u307E\u305B\u3093 (options: ${opts.options.join(", ")})`
+            `input.dropdown '${inputId}' \u306E defaultValue '${opts.defaultValue}' \u304C options \u306E\u5024\u306B\u542B\u307E\u308C\u307E\u305B\u3093 (options: ${opts.options.map(\u9078\u629E\u80A2\u306E\u5024).join(", ")})`
           );
         }
         inputs.push({
@@ -10128,6 +10178,9 @@ function diagram(id, options) {
           id: inputId,
           kind: "toggle",
           defaultValue: opts.defaultValue,
+          // 名前を渡さない切り替えは変更前と同じ形に保つ (空の名前も渡さないのと同じ)
+          ...opts.onLabel ? { onLabel: opts.onLabel } : {},
+          ...opts.offLabel ? { offLabel: opts.offLabel } : {},
           label: opts.label
         });
         return api;
@@ -10195,9 +10248,9 @@ function diagram(id, options) {
         if (opts.options.length === 0) {
           throw new Error(`input.radio '${inputId}' \u306E options \u304C\u7A7A\u3067\u3059`);
         }
-        if (!opts.options.includes(opts.defaultValue)) {
+        if (!opts.options.some((o) => \u9078\u629E\u80A2\u306E\u5024(o) === opts.defaultValue)) {
           throw new Error(
-            `input.radio '${inputId}' \u306E defaultValue '${opts.defaultValue}' \u304C options \u306B\u542B\u307E\u308C\u307E\u305B\u3093`
+            `input.radio '${inputId}' \u306E defaultValue '${opts.defaultValue}' \u304C options \u306E\u5024\u306B\u542B\u307E\u308C\u307E\u305B\u3093`
           );
         }
         inputs.push({
@@ -10282,8 +10335,8 @@ function diagram(id, options) {
         if (opts.options.length === 0) {
           throw new Error(`input.tabs '${inputId}' \u306E options \u304C\u7A7A\u3067\u3059`);
         }
-        if (!opts.options.includes(opts.defaultValue)) {
-          throw new Error(`input.tabs '${inputId}' \u306E defaultValue \u304C options \u306B\u542B\u307E\u308C\u307E\u305B\u3093`);
+        if (!opts.options.some((o) => \u9078\u629E\u80A2\u306E\u5024(o) === opts.defaultValue)) {
+          throw new Error(`input.tabs '${inputId}' \u306E defaultValue \u304C options \u306E\u5024\u306B\u542B\u307E\u308C\u307E\u305B\u3093`);
         }
         inputs.push({
           id: inputId,
@@ -10317,7 +10370,7 @@ function diagram(id, options) {
         return api;
       }
     },
-    formula(formulaId, expression) {
+    formula(formulaId, expression, opts) {
       assertUniqueFormulaId(formulaId);
       try {
         parseFormula(expression);
@@ -10325,10 +10378,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`);
       }
@@ -10344,7 +10397,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;
@@ -14913,11 +14967,14 @@ function mergeStateValues(base, overrides) {
   }
   return merged;
 }
-function interpolate(template, values) {
+function interpolate(template, values, \u540D\u524D\u306E\u8868) {
   return template.replace(TEMPLATE_REF_RE, (_, id, accessor) => {
     const raw = Object.hasOwn(values, id) ? values[id] : void 0;
     if (raw === void 0) return `{${id}${accessor ?? ""}}`;
-    if (!accessor) return raw;
+    if (!accessor) {
+      const \u5165\u529B\u6B04 = \u540D\u524D\u306E\u8868?.get(id);
+      return \u5165\u529B\u6B04 ? \u5024\u3092\u540D\u524D\u3067\u8AAD\u3080(\u5165\u529B\u6B04, raw) : raw;
+    }
     const arr = parseArraySignal(raw);
     if (!arr) return `{${id}${accessor}}`;
     if (accessor === ".length") return String(arr.length);
@@ -24561,7 +24618,8 @@ function GenericNode({
   node,
   active,
   value,
-  stateValues
+  stateValues,
+  \u5024\u306E\u540D\u524D
 }) {
   const base = STYLES[node.kind] ?? FALLBACK;
   const toned = toneColor3(node.tone);
@@ -24647,7 +24705,7 @@ function GenericNode({
       style.look === "ledger" && /* @__PURE__ */ jsxRuntime.jsx("line", { x1: 1, y1: h - 7, x2: w - 1, y2: h - 7, stroke: paint.stroke, strokeWidth: 1 })
     ] });
   })();
-  const resolvedValue = value !== void 0 ? interpolate(value, stateValues) : void 0;
+  const resolvedValue = value !== void 0 ? interpolate(value, stateValues, \u5024\u306E\u540D\u524D) : void 0;
   const hasRows = (node.rows?.length ?? 0) > 0;
   const centered = genericTextCentered(node.kind, hasRows);
   const textAnchor = centered ? "middle" : "start";
@@ -24697,7 +24755,7 @@ function GenericNode({
           }
         ),
         node.rows && node.rows.length > 0 && (() => {
-          const resolved = node.rows.map((row) => interpolate(row, stateValues));
+          const resolved = node.rows.map((row) => interpolate(row, stateValues, \u5024\u306E\u540D\u524D));
           const splits = resolved.map(splitRow);
           const leftMaxWidth = splits.reduce(
             (m, s) => Math.max(m, rowColumnWidth(s.left, GENERIC_ROW_LEFT_SIZE_PX, false)),
@@ -31362,10 +31420,11 @@ function CdlNodeView({
   currentPhaseId,
   chartLineScale,
   \u95A2\u4FC2\u306E\u53D7\u3051\u53E3,
-  lang
+  lang,
+  \u5024\u306E\u540D\u524D
 }) {
-  const value = node.value ? interpolate(node.value, stateValues) : void 0;
-  const rows = (node.rows ?? []).map((r) => interpolate(r, stateValues));
+  const value = node.value ? interpolate(node.value, stateValues, \u5024\u306E\u540D\u524D) : void 0;
+  const rows = (node.rows ?? []).map((r) => interpolate(r, stateValues, \u5024\u306E\u540D\u524D));
   const boundW = node.wBind ? resolveNumericAttr(node.wBind, stateValues, node.w) : node.w;
   const boundH = node.hBind ? resolveNumericAttr(node.hBind, stateValues, node.h) : node.h;
   const boundOpacity = node.opacity !== void 0 ? Math.min(1, Math.max(0, resolveNumericAttr(node.opacity, stateValues, 1))) : void 0;
@@ -31379,9 +31438,9 @@ function CdlNodeView({
   }
   const resolvedNode = {
     ...node,
-    title: interpolate(node.title, stateValues),
-    subtitle: node.subtitle ? interpolate(node.subtitle, stateValues) : node.subtitle,
-    eyebrow: node.eyebrow ? interpolate(node.eyebrow, stateValues) : node.eyebrow,
+    title: interpolate(node.title, stateValues, \u5024\u306E\u540D\u524D),
+    subtitle: node.subtitle ? interpolate(node.subtitle, stateValues, \u5024\u306E\u540D\u524D) : node.subtitle,
+    eyebrow: node.eyebrow ? interpolate(node.eyebrow, stateValues, \u5024\u306E\u540D\u524D) : node.eyebrow,
     w: boundW,
     h: boundH
   };
@@ -31662,7 +31721,7 @@ function CdlNodeView({
       case "mark-end":
         return /* @__PURE__ */ jsxRuntime.jsx(MarkEndNode, { node: resolvedNode, active });
       default:
-        return /* @__PURE__ */ jsxRuntime.jsx(GenericNode, { node: resolvedNode, active, value: node.value, stateValues });
+        return /* @__PURE__ */ jsxRuntime.jsx(GenericNode, { node: resolvedNode, active, value: node.value, stateValues, \u5024\u306E\u540D\u524D });
     }
   })();
   const offsetX = node.renderOffsetX !== void 0 ? resolveNumericAttr(node.renderOffsetX, stateValues, 0) : 0;
@@ -31744,7 +31803,8 @@ function CdlStage({
   stateValues,
   debug,
   compact = false,
-  svgRef
+  svgRef,
+  \u5024\u306E\u540D\u524D
 }) {
   const [\u7126\u70B9, set\u7126\u70B9] = react.useState(null);
   const \u95A2\u4FC2\u3092\u5149\u3089\u305B\u308B = (laid.relationFocus ?? RELATION_FOCUS_DEFAULT) === "hover";
@@ -32024,6 +32084,7 @@ function CdlStage({
                 drawing: \u63CF\u304F,
                 progress: \u63CF\u304F ? \u63CF\u304F\u9032\u307F : progress,
                 stateValues,
+                \u5024\u306E\u540D\u524D,
                 currentPhaseId: currentPhase?.id,
                 chartLineScale: chartLineScales.get(node.id)
               }
@@ -32265,6 +32326,7 @@ function CdlDiagramView({ diagram: diagram2, laid: laidProp, hideHeader = false,
     if (!isInteractive) return baseStateValues;
     return mergeStateValues(baseStateValues, interactive.stateOverrides);
   }, [isInteractive, baseStateValues, interactive.stateOverrides]);
+  const \u5024\u306E\u540D\u524D = react.useMemo(() => \u5024\u306E\u540D\u524D\u306E\u8868\u3092\u4F5C\u308B(diagram2.inputs), [diagram2.inputs]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -32293,7 +32355,7 @@ function CdlDiagramView({ diagram: diagram2, laid: laidProp, hideHeader = false,
           }
         ),
         isInteractive && interactive.panel,
-        /* @__PURE__ */ jsxRuntime.jsx(CdlStage, { laid, currentPhase, progress, drawProgress, stateValues, debug, compact: hideHeader, svgRef: isInteractive ? interactive.svgRef : void 0 }),
+        /* @__PURE__ */ jsxRuntime.jsx(CdlStage, { laid, currentPhase, progress, drawProgress, stateValues, \u5024\u306E\u540D\u524D, debug, compact: hideHeader, svgRef: isInteractive ? interactive.svgRef : void 0 }),
         hideHeader && !hideMiniPhaseIndicator && currentPhase && laid.phases.length > 1 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-3 border-t border-[var(--cdl-divider,#d4d4d8)]/40 bg-[var(--cdl-stage-bg,#f1f5f9)]/50 px-3 py-2 text-xs", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
             laid.phases.map((p, i) => /* @__PURE__ */ jsxRuntime.jsx(