@cardenelabs/cdl 0.60.0 → 0.62.0

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 && (

package/src/types.ts

@@ -820,6 +820,15 @@ export type CdlState = {
   initial: number | string;
 };
 
+/**
+ * 選択肢を持つ入力欄 (`dropdown` / `radio` / `tabs` / `multi-select`) の 1 つの選択肢 (#855)。
+ *
+ * 文字列は値と見せる字を兼ねる。 組は `value` を入力欄の値にし、`label` を操作部の選択肢と
+ * 箱の字の差し込み (`{id}`) に描く。 値は綴りのまま残るので、綴りで読む読み出し (信号の灯り等) と
+ * 表示の出し分け (`visibleIf`) は名前に影響されない。
+ */
+export type CdlInputOption = string | { value: string; label: string };
+
 /**
  * interactive input widget spec (v0.5+、 CAR #243)。
  *
@@ -855,8 +864,8 @@ export type CdlInput =
   | {
       id: string;
       kind: "dropdown";
-      /** 選択肢一覧 (非空必須、 defaultValue はこの中の 1 つ) */
-      options: readonly string[];
+      /** 選択肢一覧 (非空必須、 defaultValue はこの中の 1 つの値) */
+      options: readonly CdlInputOption[];
       defaultValue: string;
       label?: string;
     }
@@ -865,6 +874,10 @@ export 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) を生成する
@@ -896,7 +909,7 @@ export type CdlInput =
   | {
       id: string;
       kind: "radio";
-      options: readonly string[];
+      options: readonly CdlInputOption[];
       defaultValue: string;
       label?: string;
     }
@@ -922,7 +935,7 @@ export type CdlInput =
   | {
       id: string;
       kind: "multi-select";
-      options: readonly string[];
+      options: readonly CdlInputOption[];
       defaultValues: readonly string[];
       label?: string;
     }
@@ -930,7 +943,7 @@ export type CdlInput =
   | {
       id: string;
       kind: "tabs";
-      options: readonly string[];
+      options: readonly CdlInputOption[];
       defaultValue: string;
       label?: string;
     }