@cardenelabs/cdl 0.59.1 → 0.61.0

package/src/render/interactive-panel.tsx

@@ -4,7 +4,9 @@ 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 {
   createScrollProgressSignals,
   type ScrollProgressHandle,
@@ -643,6 +645,10 @@ export function useInteractiveIntegration(
       readouts.length === 0
     )
       return null;
+    // 式の中身の名前を読む名札 (#853)。 名札を持つ入力欄と式だけを載せる。
+    // 巻き取りは載せない = 式は入力欄と前の式しか参照できず (`createFormulaComputeds` が他の名前を拒む)、巻き取りの名前は中身に出ない
+    const 名札 = new Map<string, string>();
+    for (const x of [...inputs, ...formulasList]) if (x.label) 名札.set(x.id, x.label);
     return (
       // 操作部の中の読み出しと入力欄へ、図の言語を届ける (#849)。 型の外の値は英語に落ちる
       <操作部の言語.Provider value={resolveLang(diagram.lang)}>
@@ -660,7 +666,9 @@ export function useInteractiveIntegration(
               <FormulaReadout
                 key={f.id}
                 id={f.id}
-                expression={f.expression}
+                name={f.label || f.id}
+                // 名札の無い式は中身も書いたまま描く。 入力欄の名札は多くの図にあるので、置き換えると名札を付けていない式の描き方まで変わる
+                expression={f.label ? 式を名札で読む(f.expression, 名札) : f.expression}
                 value={stateOverrides[f.id]}
               />
             ))}
@@ -669,7 +677,7 @@ export function useInteractiveIntegration(
         {scrolls.length > 0 && (
           <div className="cdl-ip-group">
             {scrolls.map((s) => (
-              <ScrollReadout key={s.id} id={s.id} progress={stateOverrides[s.id]} />
+              <ScrollReadout key={s.id} id={s.id} name={s.label || s.id} progress={stateOverrides[s.id]} />
             ))}
           </div>
         )}
@@ -774,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>
@@ -792,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>
@@ -857,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>
@@ -966,30 +975,36 @@ function NumberInputWidget({
   );
 }
 
+/** 式の行。 `name` は名札か id (#853)、目印 `data-cdl-formula` は名札の有無によらず id */
 function FormulaReadout({
   id,
+  name,
   expression,
   value,
 }: {
   id: string;
+  name: string;
   expression: string;
   value: unknown;
 }): JSX.Element {
   return (
     <div className="cdl-ip-item cdl-ip-formula" data-cdl-formula={id}>
-      <span className="cdl-ip-label">{id}</span>
+      <span className="cdl-ip-label">{name}</span>
       <code className="cdl-ip-formula-expr">= {expression}</code>
       <span className="cdl-ip-formula-value">{String(value ?? "")}</span>
     </div>
   );
 }
 
-function ScrollReadout({ id, progress }: { id: string; progress: unknown }): JSX.Element {
+/**
+ * 巻き取りの進みの行。 `name` は名札か id (#853)。 型と組み立ては `label` を持っていたが、この行は id を描いていた
+ */
+function ScrollReadout({ id, name, progress }: { id: string; name: string; progress: unknown }): JSX.Element {
   const p = typeof progress === "number" ? progress : 0;
   const pct = Math.round(p * 100);
   return (
     <div className="cdl-ip-item cdl-ip-scroll" data-cdl-scroll={id}>
-      <span className="cdl-ip-label">{id}</span>
+      <span className="cdl-ip-label">{name}</span>
       <div className="cdl-ip-scroll-track">
         <div className="cdl-ip-scroll-fill" style={{ width: `${pct}%` }} />
       </div>
@@ -2970,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 && (

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;
     }
@@ -2514,6 +2527,13 @@ export type CdlFormula = {
   id: string;
   /** safe subset expression 文字列。 例 `"gasBase * (1 + delta/8)"` */
   expression: string;
+  /**
+   * 操作部の式の行に描く名札 (#853)。 無ければ id を描く。
+   *
+   * 名札があると、式の中身の名前のうち名札を持つ入力欄と式の id も名札に置き換えて描く。
+   * 置き換えは表示だけで、計算は `expression` を読む。
+   */
+  label?: string;
 };
 
 /**