@cardenelabs/cdl 0.60.0 → 0.61.0

package/dist/{render-MbIjRWdX.d.cts → render-Dk8_6ua6.d.cts}

@@ -769,6 +769,17 @@ type CdlState = {
     id: string;
     initial: number | string;
 };
+/**
+ * 選択肢を持つ入力欄 (`dropdown` / `radio` / `tabs` / `multi-select`) の 1 つの選択肢 (#855)。
+ *
+ * 文字列は値と見せる字を兼ねる。 組は `value` を入力欄の値にし、`label` を操作部の選択肢と
+ * 箱の字の差し込み (`{id}`) に描く。 値は綴りのまま残るので、綴りで読む読み出し (信号の灯り等) と
+ * 表示の出し分け (`visibleIf`) は名前に影響されない。
+ */
+type CdlInputOption = string | {
+    value: string;
+    label: string;
+};
 /**
  * interactive input widget spec (v0.5+、 CAR #243)。
  *
@@ -801,8 +812,8 @@ type CdlInput = {
 } | {
     id: string;
     kind: "dropdown";
-    /** 選択肢一覧 (非空必須、 defaultValue はこの中の 1 つ) */
-    options: readonly string[];
+    /** 選択肢一覧 (非空必須、 defaultValue はこの中の 1 つの値) */
+    options: readonly CdlInputOption[];
     defaultValue: string;
     label?: string;
 } | {
@@ -810,6 +821,10 @@ type CdlInput = {
     kind: "toggle";
     defaultValue: boolean;
     label?: string;
+    /** 入の時に箱の字の差し込み (`{id}`) へ描く名前。 省略時は `true` (#855) */
+    onLabel?: string;
+    /** 切の時に箱の字の差し込み (`{id}`) へ描く名前。 省略時は `false` (#855) */
+    offLabel?: string;
 }
 /**
  * XY pad = 2 軸 slider、 `.input.xypad(id)` は 実は 2 個の signal (id_x / id_y) を生成する
@@ -841,7 +856,7 @@ type CdlInput = {
  | {
     id: string;
     kind: "radio";
-    options: readonly string[];
+    options: readonly CdlInputOption[];
     defaultValue: string;
     label?: string;
 }
@@ -867,7 +882,7 @@ type CdlInput = {
  | {
     id: string;
     kind: "multi-select";
-    options: readonly string[];
+    options: readonly CdlInputOption[];
     defaultValues: readonly string[];
     label?: string;
 }
@@ -875,7 +890,7 @@ type CdlInput = {
  | {
     id: string;
     kind: "tabs";
-    options: readonly string[];
+    options: readonly CdlInputOption[];
     defaultValue: string;
     label?: string;
 }
@@ -2999,4 +3014,4 @@ type CdlDiagramViewProps = {
 };
 declare function CdlDiagramView({ diagram, laid: laidProp, hideHeader, hideMiniPhaseIndicator, focusPhaseId, debug, emitGeometryWarn, headingLevel, interactiveHandlers }: CdlDiagramViewProps): JSX.Element;
 
-export { computeInputSignalKey as $, EDGE_HEAD_FILLS as A, type BBox as B, type CdlDiagram as C, EDGE_HEAD_FILL_DEFAULT as D, type EdgeStyle as E, EDGE_REVEALS as F, EDGE_REVEAL_DEFAULT as G, EDGE_STYLES as H, type EdgeReveal as I, type JourneyEmotion as J, type InteractiveHandlerMap as K, type LaidDiagram as L, type InteractiveSignalsAccessor as M, type NodeKind as N, type LaidLane as O, NODE_KINDS as P, type QuadrantKey as Q, type RowMark as R, type Signal as S, type Tone as T, RELATION_FOCUSES as U, RELATION_FOCUS_DEFAULT as V, type RelationFocus as W, type ScrollProgressHandle as X, TONES as Y, computeEventBindingKey as Z, computeFormulaKey as _, type CdlInput as a, computeScrollTriggerKey as a0, computed as a1, createInteractiveSignalsAccessor as a2, createScrollProgressHandle as a3, createScrollProgressSignals as a4, hasInteractivePrimitives as a5, resolveLang as a6, sequenceBoardMetrics as a7, sequenceStepId as a8, signal as a9, type CdlLane as b, type CdlNode as c, type Side as d, type EdgeRole as e, type EdgeHead as f, type EdgeHeadFill as g, type CdlState as h, type CdlEventTarget as i, type CdlLang as j, type Computed as k, type CdlDerivedValue as l, type CdlScrollTrigger as m, type CdlDiagramViewProps as n, type LaidEdge as o, type LaidNode as p, type CdlEdge as q, CdlDiagramView as r, type CdlEventBinding as s, type CdlEventKind as t, type CdlFormula as u, type CdlPhase as v, type ChartPieForm as w, type ChartSlopeForm as x, EDGE_HEADS as y, EDGE_HEAD_DEFAULT as z };
+export { computeFormulaKey as $, EDGE_HEAD_DEFAULT as A, type BBox as B, type CdlDiagram as C, EDGE_HEAD_FILLS as D, type EdgeStyle as E, EDGE_HEAD_FILL_DEFAULT as F, EDGE_REVEALS as G, EDGE_REVEAL_DEFAULT as H, EDGE_STYLES as I, type JourneyEmotion as J, type EdgeReveal as K, type LaidDiagram as L, type InteractiveHandlerMap as M, type NodeKind as N, type InteractiveSignalsAccessor as O, type LaidLane as P, type QuadrantKey as Q, type RowMark as R, type Signal as S, type Tone as T, NODE_KINDS as U, RELATION_FOCUSES as V, RELATION_FOCUS_DEFAULT as W, type RelationFocus as X, type ScrollProgressHandle as Y, TONES as Z, computeEventBindingKey as _, type CdlInput as a, computeInputSignalKey as a0, computeScrollTriggerKey as a1, computed as a2, createInteractiveSignalsAccessor as a3, createScrollProgressHandle as a4, createScrollProgressSignals as a5, hasInteractivePrimitives as a6, resolveLang as a7, sequenceBoardMetrics as a8, sequenceStepId as a9, signal as aa, type CdlLane as b, type CdlNode as c, type Side as d, type EdgeRole as e, type EdgeHead as f, type EdgeHeadFill as g, type CdlState as h, type CdlInputOption as i, type CdlEventTarget as j, type CdlLang as k, type Computed as l, type CdlDerivedValue as m, type CdlScrollTrigger as n, type CdlDiagramViewProps as o, type LaidEdge as p, type LaidNode as q, type CdlEdge as r, CdlDiagramView as s, type CdlEventBinding as t, type CdlEventKind as u, type CdlFormula as v, type CdlPhase as w, type ChartPieForm as x, type ChartSlopeForm as y, EDGE_HEADS as z };

package/dist/{render-MbIjRWdX.d.ts → render-Dk8_6ua6.d.ts}

@@ -769,6 +769,17 @@ type CdlState = {
     id: string;
     initial: number | string;
 };
+/**
+ * 選択肢を持つ入力欄 (`dropdown` / `radio` / `tabs` / `multi-select`) の 1 つの選択肢 (#855)。
+ *
+ * 文字列は値と見せる字を兼ねる。 組は `value` を入力欄の値にし、`label` を操作部の選択肢と
+ * 箱の字の差し込み (`{id}`) に描く。 値は綴りのまま残るので、綴りで読む読み出し (信号の灯り等) と
+ * 表示の出し分け (`visibleIf`) は名前に影響されない。
+ */
+type CdlInputOption = string | {
+    value: string;
+    label: string;
+};
 /**
  * interactive input widget spec (v0.5+、 CAR #243)。
  *
@@ -801,8 +812,8 @@ type CdlInput = {
 } | {
     id: string;
     kind: "dropdown";
-    /** 選択肢一覧 (非空必須、 defaultValue はこの中の 1 つ) */
-    options: readonly string[];
+    /** 選択肢一覧 (非空必須、 defaultValue はこの中の 1 つの値) */
+    options: readonly CdlInputOption[];
     defaultValue: string;
     label?: string;
 } | {
@@ -810,6 +821,10 @@ type CdlInput = {
     kind: "toggle";
     defaultValue: boolean;
     label?: string;
+    /** 入の時に箱の字の差し込み (`{id}`) へ描く名前。 省略時は `true` (#855) */
+    onLabel?: string;
+    /** 切の時に箱の字の差し込み (`{id}`) へ描く名前。 省略時は `false` (#855) */
+    offLabel?: string;
 }
 /**
  * XY pad = 2 軸 slider、 `.input.xypad(id)` は 実は 2 個の signal (id_x / id_y) を生成する
@@ -841,7 +856,7 @@ type CdlInput = {
  | {
     id: string;
     kind: "radio";
-    options: readonly string[];
+    options: readonly CdlInputOption[];
     defaultValue: string;
     label?: string;
 }
@@ -867,7 +882,7 @@ type CdlInput = {
  | {
     id: string;
     kind: "multi-select";
-    options: readonly string[];
+    options: readonly CdlInputOption[];
     defaultValues: readonly string[];
     label?: string;
 }
@@ -875,7 +890,7 @@ type CdlInput = {
  | {
     id: string;
     kind: "tabs";
-    options: readonly string[];
+    options: readonly CdlInputOption[];
     defaultValue: string;
     label?: string;
 }
@@ -2999,4 +3014,4 @@ type CdlDiagramViewProps = {
 };
 declare function CdlDiagramView({ diagram, laid: laidProp, hideHeader, hideMiniPhaseIndicator, focusPhaseId, debug, emitGeometryWarn, headingLevel, interactiveHandlers }: CdlDiagramViewProps): JSX.Element;
 
-export { computeInputSignalKey as $, EDGE_HEAD_FILLS as A, type BBox as B, type CdlDiagram as C, EDGE_HEAD_FILL_DEFAULT as D, type EdgeStyle as E, EDGE_REVEALS as F, EDGE_REVEAL_DEFAULT as G, EDGE_STYLES as H, type EdgeReveal as I, type JourneyEmotion as J, type InteractiveHandlerMap as K, type LaidDiagram as L, type InteractiveSignalsAccessor as M, type NodeKind as N, type LaidLane as O, NODE_KINDS as P, type QuadrantKey as Q, type RowMark as R, type Signal as S, type Tone as T, RELATION_FOCUSES as U, RELATION_FOCUS_DEFAULT as V, type RelationFocus as W, type ScrollProgressHandle as X, TONES as Y, computeEventBindingKey as Z, computeFormulaKey as _, type CdlInput as a, computeScrollTriggerKey as a0, computed as a1, createInteractiveSignalsAccessor as a2, createScrollProgressHandle as a3, createScrollProgressSignals as a4, hasInteractivePrimitives as a5, resolveLang as a6, sequenceBoardMetrics as a7, sequenceStepId as a8, signal as a9, type CdlLane as b, type CdlNode as c, type Side as d, type EdgeRole as e, type EdgeHead as f, type EdgeHeadFill as g, type CdlState as h, type CdlEventTarget as i, type CdlLang as j, type Computed as k, type CdlDerivedValue as l, type CdlScrollTrigger as m, type CdlDiagramViewProps as n, type LaidEdge as o, type LaidNode as p, type CdlEdge as q, CdlDiagramView as r, type CdlEventBinding as s, type CdlEventKind as t, type CdlFormula as u, type CdlPhase as v, type ChartPieForm as w, type ChartSlopeForm as x, EDGE_HEADS as y, EDGE_HEAD_DEFAULT as z };
+export { computeFormulaKey as $, EDGE_HEAD_DEFAULT as A, type BBox as B, type CdlDiagram as C, EDGE_HEAD_FILLS as D, type EdgeStyle as E, EDGE_HEAD_FILL_DEFAULT as F, EDGE_REVEALS as G, EDGE_REVEAL_DEFAULT as H, EDGE_STYLES as I, type JourneyEmotion as J, type EdgeReveal as K, type LaidDiagram as L, type InteractiveHandlerMap as M, type NodeKind as N, type InteractiveSignalsAccessor as O, type LaidLane as P, type QuadrantKey as Q, type RowMark as R, type Signal as S, type Tone as T, NODE_KINDS as U, RELATION_FOCUSES as V, RELATION_FOCUS_DEFAULT as W, type RelationFocus as X, type ScrollProgressHandle as Y, TONES as Z, computeEventBindingKey as _, type CdlInput as a, computeInputSignalKey as a0, computeScrollTriggerKey as a1, computed as a2, createInteractiveSignalsAccessor as a3, createScrollProgressHandle as a4, createScrollProgressSignals as a5, hasInteractivePrimitives as a6, resolveLang as a7, sequenceBoardMetrics as a8, sequenceStepId as a9, signal as aa, type CdlLane as b, type CdlNode as c, type Side as d, type EdgeRole as e, type EdgeHead as f, type EdgeHeadFill as g, type CdlState as h, type CdlInputOption as i, type CdlEventTarget as j, type CdlLang as k, type Computed as l, type CdlDerivedValue as m, type CdlScrollTrigger as n, type CdlDiagramViewProps as o, type LaidEdge as p, type LaidNode as q, type CdlEdge as r, CdlDiagramView as s, type CdlEventBinding as t, type CdlEventKind as u, type CdlFormula as v, type CdlPhase as w, type ChartPieForm as x, type ChartSlopeForm as y, EDGE_HEADS as z };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cardenelabs/cdl",
-  "version": "0.60.0",
+  "version": "0.61.0",
   "description": "CDL (Chainome Diagram Language). Mermaid-like declarative DSL that compiles to animated SVG diagrams. Built for blockchain / Solidity flows, generic enough for sequence / flow / state / ER / topology diagrams.",
   "license": "MIT",
   "author": "cardene777",

package/src/builder.ts

@@ -1,4 +1,5 @@
 import { parseFormula } from "./formula";
+import { 選択肢の値 } from "./input-option";
 import type { CdlLang } from "./lang";
 import type {
   CdlDiagram,
@@ -7,6 +8,7 @@ import type {
   CdlEventTarget,
   CdlFormula,
   CdlInput,
+  CdlInputOption,
   CdlLane,
   CdlNode,
   CdlPhase,
@@ -1284,11 +1286,11 @@ export type InputChain = {
   ) => DiagramBuilder;
   dropdown: (
     id: string,
-    opts: { options: readonly string[]; defaultValue: string; label?: string },
+    opts: { options: readonly CdlInputOption[]; defaultValue: string; label?: string },
   ) => DiagramBuilder;
   toggle: (
     id: string,
-    opts: { defaultValue: boolean; label?: string },
+    opts: { defaultValue: boolean; label?: string; onLabel?: string; offLabel?: string },
   ) => DiagramBuilder;
   /** 2 軸 slider = XY pad、 単一 id で pointer position を保持 (x/y は同 signal に格納) */
   xypad: (
@@ -1311,7 +1313,7 @@ export type InputChain = {
   /** 排他選択、 dropdown と同じ semantics だが視覚は横並び button */
   radio: (
     id: string,
-    opts: { options: readonly string[]; defaultValue: string; label?: string },
+    opts: { options: readonly CdlInputOption[]; defaultValue: string; label?: string },
   ) => DiagramBuilder;
   /** hex color (#RRGGBB) picker、 SVG stroke / fill に signal 経由で bind */
   color: (
@@ -1339,11 +1341,11 @@ export type InputChain = {
   ) => DiagramBuilder;
   multiSelect: (
     id: string,
-    opts: { options: readonly string[]; defaultValues: readonly string[]; label?: string },
+    opts: { options: readonly CdlInputOption[]; defaultValues: readonly string[]; label?: string },
   ) => DiagramBuilder;
   tabs: (
     id: string,
-    opts: { options: readonly string[]; defaultValue: string; label?: string },
+    opts: { options: readonly CdlInputOption[]; defaultValue: string; label?: string },
   ) => DiagramBuilder;
   datetime: (
     id: string,
@@ -2008,9 +2010,10 @@ export function diagram(
         if (opts.options.length === 0) {
           throw new Error(`input.dropdown '${inputId}' の options が空です (最低 1 件必要)`);
         }
-        if (!opts.options.includes(opts.defaultValue)) {
+        // 既定値は選択肢の値 (綴り) で比べる。 名前を渡すと入力欄に名前が入り、綴りで読む読み出しが読めない (#855)
+        if (!opts.options.some((o) => 選択肢の値(o) === opts.defaultValue)) {
           throw new Error(
-            `input.dropdown '${inputId}' の defaultValue '${opts.defaultValue}' が options に含まれません (options: ${opts.options.join(", ")})`,
+            `input.dropdown '${inputId}' の defaultValue '${opts.defaultValue}' が options の値に含まれません (options: ${opts.options.map(選択肢の値).join(", ")})`,
           );
         }
         inputs.push({
@@ -2028,6 +2031,9 @@ export function diagram(
           id: inputId,
           kind: "toggle",
           defaultValue: opts.defaultValue,
+          // 名前を渡さない切り替えは変更前と同じ形に保つ (空の名前も渡さないのと同じ)
+          ...(opts.onLabel ? { onLabel: opts.onLabel } : {}),
+          ...(opts.offLabel ? { offLabel: opts.offLabel } : {}),
           label: opts.label,
         });
         return api;
@@ -2095,9 +2101,9 @@ export function diagram(
         if (opts.options.length === 0) {
           throw new Error(`input.radio '${inputId}' の options が空です`);
         }
-        if (!opts.options.includes(opts.defaultValue)) {
+        if (!opts.options.some((o) => 選択肢の値(o) === opts.defaultValue)) {
           throw new Error(
-            `input.radio '${inputId}' の defaultValue '${opts.defaultValue}' が options に含まれません`,
+            `input.radio '${inputId}' の defaultValue '${opts.defaultValue}' が options の値に含まれません`,
           );
         }
         inputs.push({
@@ -2183,8 +2189,8 @@ export function diagram(
         if (opts.options.length === 0) {
           throw new Error(`input.tabs '${inputId}' の options が空です`);
         }
-        if (!opts.options.includes(opts.defaultValue)) {
-          throw new Error(`input.tabs '${inputId}' の defaultValue が options に含まれません`);
+        if (!opts.options.some((o) => 選択肢の値(o) === opts.defaultValue)) {
+          throw new Error(`input.tabs '${inputId}' の defaultValue が options の値に含まれません`);
         }
         inputs.push({
           id: inputId,

package/src/index.ts

@@ -8,7 +8,7 @@ export type { Signal, Computed } from "./reactive";
 // 追加、 consumer app 側 HTML widget と signal 経由で bind する。 cdl 自身は widget を描画せず metadata のみ。
 export { createInputSignals, inputDefaultValue } from "./input-signals";
 export type { InputChain } from "./builder";
-export type { CdlInput } from "./types";
+export type { CdlInput, CdlInputOption } from "./types";
 
 // 描画側が書く固定の字の言語 (#847)。 図の `lang` に渡す値と、記法の文字列を言語に直す関数。
 // 辞書そのものは公開しない = 字の一覧は描画の実装に属し、利用側が辞書の中身に依存すると

package/src/input-option.ts

@@ -0,0 +1,62 @@
+import type { CdlInput, CdlInputOption } from "./types";
+
+/**
+ * 入力欄の値と、画面に描く名前を分けて読む (#855)。
+ *
+ * 選択肢は文字列 (値と名前を兼ねる) か `{ value, label }` の組で書ける。 値は入力欄に入り、
+ * 綴りで読む読み出しと表示の出し分けが読む。 名前は操作部の選択肢と箱の字の差し込みにだけ描く。
+ */
+
+/** 選択肢の値 (入力欄に入る綴り) */
+export function 選択肢の値(option: CdlInputOption): string {
+  return typeof option === "string" ? option : option.value;
+}
+
+/** 選択肢の名前 (画面に描く字)。 名前が空なら値を描く */
+export function 選択肢の名前(option: CdlInputOption): string {
+  return typeof option === "string" || option.label === "" ? 選択肢の値(option) : option.label;
+}
+
+/** 1 つの入力欄の値ごとの名前。 `複数` は値を `,` でつないで持つ入力欄 (`multi-select`) */
+export type 入力欄の名前 = { readonly 名前: ReadonlyMap<string, string>; readonly 複数: boolean };
+
+/** 入力欄の id → 値ごとの名前の表。 名前を持つ入力欄だけを載せる */
+export type 値の名前の表 = ReadonlyMap<string, 入力欄の名前>;
+
+/**
+ * 図の入力欄から、値ごとの名前の表を作る。
+ *
+ * 載せるのは名前を書いた値だけ。 名前を 1 つも持たない入力欄は表に載らないので、
+ * 名前を書かない図の差し込みは変更前と同じ字になる。
+ */
+export function 値の名前の表を作る(inputs: readonly CdlInput[] | undefined): 値の名前の表 {
+  const 表 = new Map<string, 入力欄の名前>();
+  for (const input of inputs ?? []) {
+    const 名前 = new Map<string, string>();
+    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 !== "") 名前.set(option.value, option.label);
+      }
+    } else if (input.kind === "toggle") {
+      if (input.onLabel) 名前.set("true", input.onLabel);
+      if (input.offLabel) 名前.set("false", input.offLabel);
+    }
+    if (名前.size > 0) 表.set(input.id, { 名前, 複数: input.kind === "multi-select" });
+  }
+  return 表;
+}
+
+/**
+ * 差し込む値を名前で読む。 名前を持たない値は綴りのまま返す。
+ *
+ * `multi-select` の値は選んだ値を `,` でつないだ文字列 (`"a,b"`) なので、値ごとに名前へ置き換えて
+ * つなぎ直す。 つなぎの字は `,` のまま (図の言語を持たない差し込みで、特定の言語の読点を選ばない)。
+ * それ以外の入力欄は値全体を 1 つとして引く (値に `,` を含む選択肢を割らない)。
+ */
+export function 値を名前で読む(入力欄: 入力欄の名前, 値: string): string {
+  if (!入力欄.複数) return 入力欄.名前.get(値) ?? 値;
+  return 値
+    .split(",")
+    .map((v) => 入力欄.名前.get(v) ?? v)
+    .join(",");
+}

package/src/kinds/generic.tsx

@@ -3,6 +3,7 @@ import type { JSX } from "react";
 import type { LaidNode, NodeKind } from "../types";
 import { toneColor } from "./node-tone";
 import { interpolate } from "../render/utils";
+import type { 値の名前の表 } from "../input-option";
 import {
   genericTextCentered,
   genericTextShift,
@@ -235,11 +236,14 @@ export function GenericNode({
   active,
   value,
   stateValues,
+  値の名前,
 }: {
   node: LaidNode;
   active: boolean;
   value: string | undefined;
   stateValues: Record<string, string>;
+  /** 入力欄の値ごとの名前 (#855)。 値と行の差し込みに使う */
+  値の名前?: 値の名前の表;
 }): JSX.Element {
   const base = STYLES[node.kind] ?? FALLBACK;
   // `tone` 指定があれば kind の既定色を置き換える。 色を決める式は `node-tone.ts` に集約。
@@ -357,7 +361,7 @@ export function GenericNode({
   // 独自に書いていた間、 解決できない参照を空文字に潰していた = 書き間違いが
   // 「値が無い」 と区別できなかった。
   // 共通経路は解決できない参照を `{名前}` のまま残すので、 読み手が気付ける。
-  const resolvedValue = value !== undefined ? interpolate(value, stateValues) : undefined;
+  const resolvedValue = value !== undefined ? interpolate(value, stateValues, 値の名前) : undefined;
 
   /*
    * shape 別の text 配置 (diamond / cloud は中心揃え、 rect 等は左上揃え)。
@@ -449,7 +453,7 @@ export function GenericNode({
         // rightColX (= 左列 max 幅 + gap) で右列開始 x を揃える (DB table / UML class 風)。
         // 旧実装は split(":") 単一 delimiter + 右 anchor (node 右端寄せ) で行毎にズレていた。
         // value と同じく engine 共通の経路で解決する (独自に書くと字種と既定値がずれる)
-        const resolved = node.rows.map((row) => interpolate(row, stateValues));
+        const resolved = node.rows.map((row) => interpolate(row, stateValues, 値の名前));
         const splits = resolved.map(splitRow);
         // 左列は比例の書体で描く (`font-family` を指定していないので継承する)。 字数に一定を
         // 掛ける形では実物に届かず、 右列が左列の字に重なる (`#425`)。 字ごとの幅で見積もる。

package/src/render/interactive-panel.tsx

@@ -4,6 +4,7 @@ import { CDL_TEXT, resolveLang, 字を差し込む, type CdlLang, type CdlTextKe
 import { assertNever } from "../assert-never";
 import type { CdlDiagram, CdlInput, CdlReadout } from "../types";
 import { createInputSignals, inputDefaultValue } from "../input-signals";
+import { 選択肢の値, 選択肢の名前 } from "../input-option";
 import { createFormulaComputeds } from "../formula";
 import { 式を名札で読む } from "../formula/parser";
 import {
@@ -781,9 +782,10 @@ function InputWidget({
             data-cdl-input={input.id}
             className="cdl-ip-dropdown-select"
           >
+            {/* 値は綴りのまま入力欄に入れ、字だけを選択肢の名前で描く (#855) */}
             {input.options.map((opt) => (
-              <option key={opt} value={opt}>
-                {opt}
+              <option key={選択肢の値(opt)} value={選択肢の値(opt)}>
+                {選択肢の名前(opt)}
               </option>
             ))}
           </select>
@@ -799,19 +801,19 @@ function InputWidget({
           <legend className="cdl-ip-label">{label}</legend>
           <div className="cdl-ip-radio-options">
             {input.options.map((opt) => (
-              <label key={opt} className="cdl-ip-radio-option">
+              <label key={選択肢の値(opt)} className="cdl-ip-radio-option">
                 <input
                   type="radio"
                   name={input.id}
-                  value={opt}
-                  checked={value === opt}
+                  value={選択肢の値(opt)}
+                  checked={value === 選択肢の値(opt)}
                   onChange={() => {
-                    signal.value = opt;
+                    signal.value = 選択肢の値(opt);
                   }}
                   data-cdl-input={input.id}
                   className="cdl-ip-radio-input"
                 />
-                <span className="cdl-ip-radio-label">{opt}</span>
+                <span className="cdl-ip-radio-label">{選択肢の名前(opt)}</span>
               </label>
             ))}
           </div>
@@ -864,16 +866,16 @@ function InputWidget({
           <div className="cdl-ip-tabs-bar" role="tablist">
             {input.options.map((opt) => (
               <button
-                key={opt}
+                key={選択肢の値(opt)}
                 type="button"
                 role="tab"
-                className={`cdl-ip-tabs-btn ${value === opt ? "cdl-ip-tabs-active" : ""}`}
+                className={`cdl-ip-tabs-btn ${value === 選択肢の値(opt) ? "cdl-ip-tabs-active" : ""}`}
                 onClick={() => {
-                  signal.value = opt;
+                  signal.value = 選択肢の値(opt);
                 }}
                 data-cdl-input={input.id}
               >
-                {opt}
+                {選択肢の名前(opt)}
               </button>
             ))}
           </div>
@@ -2983,14 +2985,14 @@ function MultiSelectWidget({
       <div className="cdl-ip-multi-select-chips">
         {input.options.map((opt) => (
           <button
-            key={opt}
+            key={選択肢の値(opt)}
             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(選択肢の値(opt)) ? "cdl-ip-multi-select-active" : ""}`}
+            onClick={() => toggle(選択肢の値(opt))}
             data-cdl-input={input.id}
-            data-cdl-multi-value={opt}
+            data-cdl-multi-value={選択肢の値(opt)}
           >
-            {opt}
+            {選択肢の名前(opt)}
           </button>
         ))}
       </div>

package/src/render/nodes.tsx

@@ -89,6 +89,7 @@ import {
 import type { LaidNode } from "../types";
 import type { CdlLang } from "../lang";
 import { hasUnresolvedRef, interpolate, resolveNumericAttr } from "./utils";
+import type { 値の名前の表 } from "../input-option";
 
 /**
  * 触れた箱の関係を光らせる時に、箱へ付ける受け口 (#806)。
@@ -117,9 +118,15 @@ export function CdlNodeView({
   chartLineScale,
   関係の受け口,
   lang,
+  値の名前,
 }: {
   node: LaidNode;
   active: boolean;
+  /**
+   * 入力欄の値ごとの名前 (#855)。 箱の字の差し込みにだけ使い、表示の出し分けと数の差し込みには使わない。
+   * 渡さない呼び方は値を綴りのまま差し込む
+   */
+  値の名前?: 値の名前の表;
   /** 描画側の固定の字の言語 (#847)。 字を持つ形の部品へ渡す。 渡さない呼び方は英語で描く */
   lang?: CdlLang;
   /**
@@ -134,8 +141,8 @@ export function CdlNodeView({
   /** 触れた箱の関係を光らせる時の受け口 (#806)。 書かない図では `undefined` */
   関係の受け口?: 関係の受け口;
 }): JSX.Element {
-  const value = node.value ? interpolate(node.value, stateValues) : undefined;
-  const rows = (node.rows ?? []).map((r) => interpolate(r, stateValues));
+  const value = node.value ? interpolate(node.value, stateValues, 値の名前) : undefined;
+  const rows = (node.rows ?? []).map((r) => interpolate(r, stateValues, 値の名前));
   // visual binding = wBind / hBind の template を stateValues で resolve、 layout の
   // static w/h を fallback として保持。 signal 値変化で node の描画寸法がリアルタイム変化する
   // (arc-intro 相当の 「slider で bar が伸びる」 UX の foundation)。
@@ -159,9 +166,9 @@ export function CdlNodeView({
   }
   const resolvedNode: LaidNode = {
     ...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, 値の名前),
+    subtitle: node.subtitle ? interpolate(node.subtitle, stateValues, 値の名前) : node.subtitle,
+    eyebrow: node.eyebrow ? interpolate(node.eyebrow, stateValues, 値の名前) : node.eyebrow,
     w: boundW,
     h: boundH,
   };
@@ -442,7 +449,7 @@ export function CdlNodeView({
         return <MarkEndNode node={resolvedNode} active={active} />;
       default:
         // 新 NodeKind 25 種は GenericNode で汎用描画 (kind 別 icon / color / shape)
-        return <GenericNode node={resolvedNode} active={active} value={node.value} stateValues={stateValues} />;
+        return <GenericNode node={resolvedNode} active={active} value={node.value} stateValues={stateValues} 値の名前={値の名前} />;
     }
   })();
   // node bounding box を node.w/h に固定するための invisible rect。

package/src/render/stage.tsx

@@ -26,6 +26,7 @@ import { resolveChartData } from "./payload-binding";
 import { relatedFocusSet } from "./relation-focus";
 import { TONE, TONE_HEX } from "./tone";
 import { computeStateValues } from "./utils";
+import type { 値の名前の表 } from "../input-option";
 
 export function CdlStage({
   laid,
@@ -36,8 +37,11 @@ export function CdlStage({
   debug,
   compact = false,
   svgRef,
+  値の名前,
 }: {
   laid: LaidDiagram;
+  /** 入力欄の値ごとの名前 (#855)。 箱の字の差し込みへ渡す。 渡さない呼び方は値を綴りのまま差し込む */
+  値の名前?: 値の名前の表;
   currentPhase: CdlPhase | undefined;
   progress: number;
   /**
@@ -432,6 +436,7 @@ export function CdlStage({
               drawing={描く}
               progress={描く ? 描く進み : progress}
               stateValues={stateValues}
+              値の名前={値の名前}
               currentPhaseId={currentPhase?.id}
               chartLineScale={chartLineScales.get(node.id)}
             />

package/src/render/utils.ts

@@ -2,6 +2,7 @@ import { lerp } from "../anim";
 import type { LaidDiagram } from "../types";
 import { withDerivedValues } from "./derived-values";
 import { TEMPLATE_LEFTOVER_SRC, TEMPLATE_REF_SRC } from "../template-name";
+import { 値を名前で読む, type 値の名前の表 } from "../input-option";
 
 const TEMPLATE_REF_RE = new RegExp(TEMPLATE_REF_SRC, "g");
 // 残っている参照の判定用。 `g` を付けないので `lastIndex` を持たず、 使い回しても結果が
@@ -113,14 +114,25 @@ export function mergeStateValues(
  *
  * 名前に使える文字は `template-name.ts` が決める (engine 全体で 1 つ)。 ここだけで
  * 定義すると、 式を書ける側との間で「読めるが書けない」 「書けるが読めない」 名前ができる。
+ *
+ * `名前の表` を渡すと、 付け足しの無い `{id}` の値を入力欄の値ごとの名前で差し込む (#855)。
+ * 渡すのは画面に字を描く所 (箱の題・副題・見出し・値・行) だけ。 表示の出し分けと数の差し込みは
+ * 値を綴りのまま読む必要があるので渡さない。
  */
-export function interpolate(template: string, values: Record<string, string>): string {
+export function interpolate(
+  template: string,
+  values: Record<string, string>,
+  名前の表?: 値の名前の表,
+): string {
   return template.replace(TEMPLATE_REF_RE, (_, id: string, accessor?: string) => {
     // 自分が持つ名前だけを見る。 継承を辿ると `{constructor}` が「値がある」 と読まれ、
     // prototype の中身が図に出る (実測)
     const raw = Object.hasOwn(values, id) ? values[id] : undefined;
     if (raw === undefined) return `{${id}${accessor ?? ""}}`;
-    if (!accessor) return raw;
+    if (!accessor) {
+      const 入力欄 = 名前の表?.get(id);
+      return 入力欄 ? 値を名前で読む(入力欄, raw) : raw;
+    }
     const arr = parseArraySignal(raw);
     if (!arr) return `{${id}${accessor}}`;
     if (accessor === ".length") return String(arr.length);

package/src/render.tsx

@@ -10,6 +10,7 @@ import {
   type InteractiveHandlerMap,
 } from "./render/interactive-panel";
 import { computeStateValues, mergeStateValues } from "./render/utils";
+import { 値の名前の表を作る } from "./input-option";
 import { visualValidateLaid } from "./visual-validate";
 import type { CdlDiagram, LaidDiagram } from "./types";
 
@@ -165,6 +166,10 @@ export function CdlDiagramView({ diagram, laid: laidProp, hideHeader = false, hi
     return mergeStateValues(baseStateValues, interactive.stateOverrides);
   }, [isInteractive, baseStateValues, interactive.stateOverrides]);
 
+  // 入力欄の値ごとの名前 (#855)。 状態の値には混ぜず、箱の字の差し込みにだけ渡す
+  // (出し分けと綴りで読む読み出しは値を綴りのまま読む)
+  const 値の名前 = useMemo(() => 値の名前の表を作る(diagram.inputs), [diagram.inputs]);
+
   return (
     <div
       ref={isInteractive ? interactive.containerRef : undefined}
@@ -193,7 +198,7 @@ export function CdlDiagramView({ diagram, laid: laidProp, hideHeader = false, hi
       {/* interactive panel = input widget / formula readout / scroll readout (SVG の上に配置)、
           diagram に interactive primitive がなければ null (SSR / render 影響なし) */}
       {isInteractive && interactive.panel}
-      <CdlStage laid={laid} currentPhase={currentPhase} progress={progress} drawProgress={drawProgress} stateValues={stateValues} debug={debug} compact={hideHeader} svgRef={isInteractive ? interactive.svgRef : undefined} />
+      <CdlStage laid={laid} currentPhase={currentPhase} progress={progress} drawProgress={drawProgress} stateValues={stateValues} 値の名前={値の名前} debug={debug} compact={hideHeader} svgRef={isInteractive ? interactive.svgRef : undefined} />
       {/* hideHeader + multi-phase 時、 phase indicator が消えると動きが読めないため
           mini indicator (dot 列 + 現在 phase title + badge) を bottom に追加 */}
       {hideHeader && !hideMiniPhaseIndicator && currentPhase && laid.phases.length > 1 && (