@cardenelabs/cdl 0.59.1 → 0.61.0

package/dist/{render-DpwY2hzM.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;
 }
@@ -2463,6 +2478,13 @@ type CdlFormula = {
     id: string;
     /** safe subset expression 文字列。 例 `"gasBase * (1 + delta/8)"` */
     expression: string;
+    /**
+     * 操作部の式の行に描く名札 (#853)。 無ければ id を描く。
+     *
+     * 名札があると、式の中身の名前のうち名札を持つ入力欄と式の id も名札に置き換えて描く。
+     * 置き換えは表示だけで、計算は `expression` を読む。
+     */
+    label?: string;
 };
 /**
  * event handler の bind target (CAR #246)。 node / edge / lane の id 指定 or diagram 全体 (root)。
@@ -2992,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-DpwY2hzM.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;
 }
@@ -2463,6 +2478,13 @@ type CdlFormula = {
     id: string;
     /** safe subset expression 文字列。 例 `"gasBase * (1 + delta/8)"` */
     expression: string;
+    /**
+     * 操作部の式の行に描く名札 (#853)。 無ければ id を描く。
+     *
+     * 名札があると、式の中身の名前のうち名札を持つ入力欄と式の id も名札に置き換えて描く。
+     * 置き換えは表示だけで、計算は `expression` を読む。
+     */
+    label?: string;
 };
 /**
  * event handler の bind target (CAR #246)。 node / edge / lane の id 指定 or diagram 全体 (root)。
@@ -2992,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.59.1",
+  "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,
@@ -1596,8 +1598,10 @@ export 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`) を参照可能。
@@ -1607,11 +1611,14 @@ export 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,
+    opts?: { label?: (i: number) => string },
   ) => DiagramBuilder;
   /**
    * animation primitive (CAR #245)。 `.animation.scroll(id, opts)` で scroll-driven trigger を追加。
@@ -2003,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({
@@ -2023,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;
@@ -2090,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({
@@ -2178,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,
@@ -2213,7 +2224,7 @@ export function diagram(
         return api;
       },
     },
-    formula(formulaId, expression) {
+    formula(formulaId, expression, opts) {
       assertUniqueFormulaId(formulaId);
       // 入口で parse を試み、 syntax error は formula id 付きで throw (fail-fast)
       try {
@@ -2222,10 +2233,11 @@ export function diagram(
         const msg = e instanceof Error ? e.message : String(e);
         throw new Error(`formula '${formulaId}' の expression syntax error: ${msg}`);
       }
-      formulas.push({ id: formulaId, expression });
+      // 名札の無い式は `label` を持たせない (空の文字列も持たせない = 名札の無い図の形を変えない)
+      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}) は 1..100 の整数である必要があります`);
       }
@@ -2242,7 +2254,9 @@ export function diagram(
           const msg = e instanceof Error ? e.message : String(e);
           throw new Error(`deriveChain '${id}' の expression syntax error: ${msg}`);
         }
-        formulas.push({ id, expression: expr });
+        const label = opts?.label?.(i);
+        // 名札の無い式は `label` を持たせない (空の文字列も持たせない = 名札の無い図の形を変えない)
+        formulas.push({ id, expression: expr, ...(label ? { label } : {}) });
         prev = id;
       }
       return api;

package/src/formula/parser.ts

@@ -21,7 +21,8 @@ import { isValidTemplateName } from "../template-name";
 
 type Token =
   | { kind: "num"; value: number; pos: number }
-  | { kind: "id"; name: string; pos: number }
+  /** `end` は字句の直後の位置。 `{name}` の形は閉じ括弧の直後 (表示用の置き換えが字句ごと差し替える) */
+  | { kind: "id"; name: string; pos: number; end: number }
   | { kind: "math"; fn: MathFnName; pos: number }
   | { kind: "op"; op: BinaryOp; pos: number }
   | { kind: "lparen"; pos: number }
@@ -92,7 +93,7 @@ function tokenize(src: string): Token[] {
           `invalid name "{${name}}" at position ${start} (空白 / { } / . / [ ] は名前に使えない)`,
         );
       }
-      tokens.push({ kind: "id", name, pos: start });
+      tokens.push({ kind: "id", name, pos: start, end: close + 1 });
       i = close + 1;
       continue;
     }
@@ -156,7 +157,7 @@ function tokenize(src: string): Token[] {
           `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;
     }
     // operators
@@ -401,6 +402,34 @@ export function parseFormula(expression: string): FormulaAst {
   return new Parser(tokens).parse();
 }
 
+/**
+ * 式の中身の名前を、`名札` に載る名前だけ名札に置き換えた表示用の字を返す (#853)。 **計算には使わない**。
+ *
+ * 置き換えは字句の位置で行う。 文字列の検索で探すと、`gas1` の置き換えが `gas10` の先頭に当たり、
+ * 値の `min` の置き換えが `Math.min` の中に当たる。 関数の名前 (`Math.min` / 直後が `(` の `min`) と数は
+ * 名前の字句にならないので置き換わらない。 名札が空の文字列の名前は置き換えない。
+ *
+ * 字句に切れない式 (構文の誤り) は、元の字をそのまま返す。
+ */
+export function 式を名札で読む(expression: string, 名札: ReadonlyMap<string, string>): string {
+  let tokens: Token[];
+  try {
+    tokens = tokenize(expression);
+  } catch {
+    return expression;
+  }
+  let 読み = "";
+  let 前 = 0;
+  for (const t of tokens) {
+    if (t.kind !== "id") continue;
+    const 札 = 名札.get(t.name);
+    if (札 === undefined || 札 === "") continue;
+    読み += expression.slice(前, t.pos) + 札;
+    前 = t.end;
+  }
+  return 読み + expression.slice(前);
+}
+
 /**
  * AST 内で参照される identifier (signal 名) を全て収集する。 evaluator が signal 経由で
  * runtime value を lookup する時の識別子リスト作成に使う。

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`)。 字ごとの幅で見積もる。