@cardenelabs/cdl 0.59.1 → 0.61.0

package/dist/index.d.cts

@@ -1,5 +1,5 @@
-import { C as CdlDiagram, S as Signal, a as CdlInput, b as CdlLane, c as CdlNode, T as Tone, d as Side, E as EdgeStyle, e as EdgeRole, f as EdgeHead, g as EdgeHeadFill, h as CdlState, i as CdlEventTarget, j as CdlLang, k as Computed, l as CdlDerivedValue, m as CdlScrollTrigger, L as LaidDiagram, n as CdlDiagramViewProps, o as LaidEdge, p as LaidNode, q as CdlEdge, B as BBox, R as RowMark, N as NodeKind, J as JourneyEmotion, Q as QuadrantKey } from './render-DpwY2hzM.cjs';
-export { r as CdlDiagramView, s as CdlEventBinding, t as CdlEventKind, u as CdlFormula, v as CdlPhase, w as ChartPieForm, x as ChartSlopeForm, y as EDGE_HEADS, z as EDGE_HEAD_DEFAULT, A as EDGE_HEAD_FILLS, D as EDGE_HEAD_FILL_DEFAULT, F as EDGE_REVEALS, G as EDGE_REVEAL_DEFAULT, H as EDGE_STYLES, I as EdgeReveal, K as InteractiveHandlerMap, M as InteractiveSignalsAccessor, O as LaidLane, P as NODE_KINDS, U as RELATION_FOCUSES, V as RELATION_FOCUS_DEFAULT, W as RelationFocus, X as ScrollProgressHandle, Y as TONES, Z as computeEventBindingKey, _ as computeFormulaKey, $ as computeInputSignalKey, a0 as computeScrollTriggerKey, a1 as computed, a2 as createInteractiveSignalsAccessor, a3 as createScrollProgressHandle, a4 as createScrollProgressSignals, a5 as hasInteractivePrimitives, a6 as resolveLang, a7 as sequenceBoardMetrics, a8 as sequenceStepId, a9 as signal } from './render-DpwY2hzM.cjs';
+import { C as CdlDiagram, S as Signal, a as CdlInput, b as CdlLane, c as CdlNode, T as Tone, d as Side, E as EdgeStyle, e as EdgeRole, f as EdgeHead, g as EdgeHeadFill, h as CdlState, i as CdlInputOption, j as CdlEventTarget, k as CdlLang, l as Computed, m as CdlDerivedValue, n as CdlScrollTrigger, L as LaidDiagram, o as CdlDiagramViewProps, p as LaidEdge, q as LaidNode, r as CdlEdge, B as BBox, R as RowMark, N as NodeKind, J as JourneyEmotion, Q as QuadrantKey } from './render-Dk8_6ua6.cjs';
+export { s as CdlDiagramView, t as CdlEventBinding, u as CdlEventKind, v as CdlFormula, w as CdlPhase, x as ChartPieForm, y as ChartSlopeForm, z as EDGE_HEADS, A as EDGE_HEAD_DEFAULT, D as EDGE_HEAD_FILLS, F as EDGE_HEAD_FILL_DEFAULT, G as EDGE_REVEALS, H as EDGE_REVEAL_DEFAULT, I as EDGE_STYLES, K as EdgeReveal, M as InteractiveHandlerMap, O as InteractiveSignalsAccessor, P as LaidLane, U as NODE_KINDS, V as RELATION_FOCUSES, W as RELATION_FOCUS_DEFAULT, X as RelationFocus, Y as ScrollProgressHandle, Z as TONES, _ as computeEventBindingKey, $ as computeFormulaKey, a0 as computeInputSignalKey, a1 as computeScrollTriggerKey, a2 as computed, a3 as createInteractiveSignalsAccessor, a4 as createScrollProgressHandle, a5 as createScrollProgressSignals, a6 as hasInteractivePrimitives, a7 as resolveLang, a8 as sequenceBoardMetrics, a9 as sequenceStepId, aa as signal } from './render-Dk8_6ua6.cjs';
 import { JSX } from 'react';
 
 declare function effect(fn: () => void | (() => void)): () => void;
@@ -917,13 +917,15 @@ type InputChain = {
         label?: string;
     }) => DiagramBuilder;
     dropdown: (id: string, opts: {
-        options: readonly string[];
+        options: readonly CdlInputOption[];
         defaultValue: string;
         label?: string;
     }) => DiagramBuilder;
     toggle: (id: string, opts: {
         defaultValue: boolean;
         label?: string;
+        onLabel?: string;
+        offLabel?: string;
     }) => DiagramBuilder;
     /** 2 軸 slider = XY pad、 単一 id で pointer position を保持 (x/y は同 signal に格納) */
     xypad: (id: string, opts: {
@@ -945,7 +947,7 @@ type InputChain = {
     }) => DiagramBuilder;
     /** 排他選択、 dropdown と同じ semantics だが視覚は横並び button */
     radio: (id: string, opts: {
-        options: readonly string[];
+        options: readonly CdlInputOption[];
         defaultValue: string;
         label?: string;
     }) => DiagramBuilder;
@@ -975,12 +977,12 @@ type InputChain = {
         label?: string;
     }) => DiagramBuilder;
     multiSelect: (id: string, opts: {
-        options: readonly string[];
+        options: readonly CdlInputOption[];
         defaultValues: readonly string[];
         label?: string;
     }) => DiagramBuilder;
     tabs: (id: string, opts: {
-        options: readonly string[];
+        options: readonly CdlInputOption[];
         defaultValue: string;
         label?: string;
     }) => DiagramBuilder;
@@ -1170,8 +1172,12 @@ 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`) を参照可能。
@@ -1181,8 +1187,12 @@ 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) => DiagramBuilder;
+    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 を追加。
      * 将来的に `.animation.time(...)` 等の time-based primitive を追加する余地を残す namespace。
@@ -3917,6 +3927,14 @@ interface 関係を持つ線 {
  */
 declare function relatedFocusSet(edges: readonly 関係を持つ線[], nodeId: string): Set<string>;
 
+/** 1 つの入力欄の値ごとの名前。 `複数` は値を `,` でつないで持つ入力欄 (`multi-select`) */
+type 入力欄の名前 = {
+    readonly 名前: ReadonlyMap<string, string>;
+    readonly 複数: boolean;
+};
+/** 入力欄の id → 値ごとの名前の表。 名前を持つ入力欄だけを載せる */
+type 値の名前の表 = ReadonlyMap<string, 入力欄の名前>;
+
 /**
  * 全 state の現時点 value を計算 (現在 phase + これまでの phase の最終 tween 値を集約)。
  * - set = 即時切替 (phase 到達で value 上書き、 lerp なし)
@@ -3936,7 +3954,11 @@ declare function computeStateValues(laid: LaidDiagram, phaseIdx: number, progres
  *
  * 名前に使える文字は `template-name.ts` が決める (engine 全体で 1 つ)。 ここだけで
  * 定義すると、 式を書ける側との間で「読めるが書けない」 「書けるが読めない」 名前ができる。
+ *
+ * `名前の表` を渡すと、 付け足しの無い `{id}` の値を入力欄の値ごとの名前で差し込む (#855)。
+ * 渡すのは画面に字を描く所 (箱の題・副題・見出し・値・行) だけ。 表示の出し分けと数の差し込みは
+ * 値を綴りのまま読む必要があるので渡さない。
  */
-declare function interpolate(template: string, values: Record<string, string>): string;
+declare function interpolate(template: string, values: Record<string, string>, 名前の表?: 値の名前の表): string;
 
-export { ARROW_ANGLE_MAX_DEG, ARROW_ENDPOINT_CENTER_TOL, type AnimationChain, type AuthorIntentOptions, type AuthorIntentReport, type BinaryOp, CHAIN_MIN_CLEARANCE, CHAIN_SHIFT_MAX_ACCUMULATED, CHAIN_SHIFT_MAX_ITER, CLASS_RELATION_LOOK, CLEARANCE_LABEL_LABEL, CLEARANCE_LANE_LABEL, CLEARANCE_NODE_LABEL, CLEARANCE_PATH_LABEL, COLUMN_GAP_VARIANCE_TOL, CdlDerivedValue, CdlDiagram, CdlDiagramThumbnail, CdlEdge, type CdlEventHandler, CdlEventTarget, CdlInput, CdlLane, CdlLang, CdlNode, CdlScrollTrigger, CdlState, type ChartBuilder, type ChartDatum, type ChartPreset, type ChartType, type ClassDiagramBuilder, type ClassDiagramPreset, type ClassRelationType, Computed, DETOUR_GAP, DETOUR_SLOT_GAP, DIST_LABEL_PATH_MAX, DIST_LABEL_PATH_MIN, type DerivedNotice, type DerivedNoticeKind, type DerivedResult, type DiagramAdapter, type DiagramBuilder, type Discrepancy, type DiscrepancyKind, type DomVerifyReport, EDGE_LABEL_TEXT, EDGE_STUB_OUT, ER_CARDINALITY_HEAD, EdgeHead, EdgeHeadFill, type EdgeLabelLine, type EdgeLabelTextSpec, EdgeStyle, type ErBuilder, type ErColumn, type ErEntity, type ErPreset, type ErRelation, type ErRelationCardinality, type EventAttachHandle, type EventChain, FAN_GAP, FONT_RENDER_TOLERANCE_WORLD, FSM_ACTION_MARK, type FlowBuilder, type FlowPreset, type FlowStepInput, type FlowchartBuilder, type FlowchartEdge, type FlowchartNode, type FlowchartNodeShape, type FlowchartPreset, type FormulaAst, type FormulaContext, type FsmMark, type FsmState, type FsmStateAction, type FsmStateNested, type FsmTransition, type FsmTransitionExt, type FunnelBuilder, type FunnelPreset, type FunnelStage, type GanttBuilder, type GanttPreset, type GanttTask, type GenericDiagramSpec, type GenericDiscrepancy, type GenericDiscrepancyKind, type GenericVerifyOptions, type Rect as GeometryRect, type Segment as GeometrySegment, type InfraConnection, type InfraNode, type InfrastructureBuilder, type InfrastructurePreset, type InputChain, type IntentDiscrepancy, type IntentDiscrepancyKind, JourneyEmotion, type JourneyStep, LABEL_INIT_CLEARANCE, LABEL_INIT_CLEARANCE_DOTTED_FLOW, LABEL_SIZE_TOLERANCE_WORLD, LABEL_TO_PATH_CLEARANCE, LANE_BORDER_CLEARANCE_TOL, LaidDiagram, LaidEdge, LaidNode, type LayoutWithValidationOptions, type LayoutWithValidationResult, MARKER_GLOW_RADIUS, MIN_COLUMN_ALIGNMENT_TOLERANCE, MIN_ROW_ALIGNMENT_TOLERANCE, type MathFnName, type MindBranch, type MindMapBuilder, type MindMapPreset, NEAR_COLLISION_DEFAULT_MIN, NEAR_COLLISION_POLICY, NODE_FRAME_SELECTOR, type NetworkBuilder, type NetworkDevice, type NetworkDeviceKind, type NetworkLink, type NetworkPreset, NodeKind, type OrderEdge, type OrderNode, type OrderResult, type PageLike, type PhaseBuilder, type QuadrantBuilder, type QuadrantItem, type QuadrantPreset, type QuadrantQuadrantLabel, ROW_GAP_VARIANCE_TOL, type ReferenceContainer, RowMark, SEQUENCE_MESSAGE_LOOK, SPEC_CLEARANCE_POLICY, STAGE_SVG_SELECTOR, type SequenceActor, type SequenceBuilder, type SequenceMessageKind, type SequencePreset, type SequenceStep, Side, Signal, type StateMachine2Builder, type StateMachine2Preset, type StateMachineBuilder, type StateMachinePreset, type SweepReport, type SwimlanePreset, TARGET_LABEL_PATH_DIST, Tone, type TopologyBuilder, type TopologyConnection, type TopologyContainer, type TopologyGroupBuilder, type TopologyPreset, type TreeBuilder, type TreeNode, type TreePreset, type UmlClass, type UmlRelation, type UserJourneyBuilder, type UserJourneyPreset, type ValidateOptions, type ValidationProfile, type VerifyOptions, type Violation, type VisualAxis, type VisualValidationReport, WCAG_AA_LARGE, WCAG_AA_NORMAL, applyDerivedValues, assertNever, attachEventHandlers, batch, bboxClearance, bboxDiffWorld, cdlAdapter, chart, classDiagram, compile, computeScrollProgress, computeStateValues, computeViewportScale, countEdgeCrossings, countOrderCrossings, createFormulaComputeds, createInputSignals, diagram, effect, er, evaluate as evaluateFormula, extractIdentifiers, flow, flowchart, funnel, gantt, infrastructure, inputDefaultValue, interpolate, isLargeText, labelInitClearance, layout, layoutWithValidation, mindMap, network, orderNodes, parseFormula, pointRectEdgeDistance, pointToSegmentDistance, predictLabelBBoxWorld, predictNodeBBoxWorld, projectEdgeLabel, projectNode, projectPathSegment, pxToWorld, quadrant, rectRectClearance, rectRectOverlapArea, relatedFocusSet, rendersRows, requiredContrastRatio, requiredNearClearance, requiredRowsHeight, requiredRowsWidth, requiredSpecClearance, resolveEdgeLabelOverlapsWithChain, resolveEdgeLabelOverlapsWithChainAndPropagate, resolveLabelClearanceAfterPathPasses, resolveOverlapsWithChain, resolveTarget, resolveTargetAll, segmentsIntersect, sequence, stateMachine, stateMachine2, swimlane, topology, tree, untrack, userJourney, validate, verifyAllDiagramsDom, verifyAuthorIntent, verifyAuthorIntentAll, verifyDiagramDom, visualValidate, visualValidateAll, visualValidateLaid, withDerivedValues, worldToPx, type 関係を持つ線 };
+export { ARROW_ANGLE_MAX_DEG, ARROW_ENDPOINT_CENTER_TOL, type AnimationChain, type AuthorIntentOptions, type AuthorIntentReport, type BinaryOp, CHAIN_MIN_CLEARANCE, CHAIN_SHIFT_MAX_ACCUMULATED, CHAIN_SHIFT_MAX_ITER, CLASS_RELATION_LOOK, CLEARANCE_LABEL_LABEL, CLEARANCE_LANE_LABEL, CLEARANCE_NODE_LABEL, CLEARANCE_PATH_LABEL, COLUMN_GAP_VARIANCE_TOL, CdlDerivedValue, CdlDiagram, CdlDiagramThumbnail, CdlEdge, type CdlEventHandler, CdlEventTarget, CdlInput, CdlInputOption, CdlLane, CdlLang, CdlNode, CdlScrollTrigger, CdlState, type ChartBuilder, type ChartDatum, type ChartPreset, type ChartType, type ClassDiagramBuilder, type ClassDiagramPreset, type ClassRelationType, Computed, DETOUR_GAP, DETOUR_SLOT_GAP, DIST_LABEL_PATH_MAX, DIST_LABEL_PATH_MIN, type DerivedNotice, type DerivedNoticeKind, type DerivedResult, type DiagramAdapter, type DiagramBuilder, type Discrepancy, type DiscrepancyKind, type DomVerifyReport, EDGE_LABEL_TEXT, EDGE_STUB_OUT, ER_CARDINALITY_HEAD, EdgeHead, EdgeHeadFill, type EdgeLabelLine, type EdgeLabelTextSpec, EdgeStyle, type ErBuilder, type ErColumn, type ErEntity, type ErPreset, type ErRelation, type ErRelationCardinality, type EventAttachHandle, type EventChain, FAN_GAP, FONT_RENDER_TOLERANCE_WORLD, FSM_ACTION_MARK, type FlowBuilder, type FlowPreset, type FlowStepInput, type FlowchartBuilder, type FlowchartEdge, type FlowchartNode, type FlowchartNodeShape, type FlowchartPreset, type FormulaAst, type FormulaContext, type FsmMark, type FsmState, type FsmStateAction, type FsmStateNested, type FsmTransition, type FsmTransitionExt, type FunnelBuilder, type FunnelPreset, type FunnelStage, type GanttBuilder, type GanttPreset, type GanttTask, type GenericDiagramSpec, type GenericDiscrepancy, type GenericDiscrepancyKind, type GenericVerifyOptions, type Rect as GeometryRect, type Segment as GeometrySegment, type InfraConnection, type InfraNode, type InfrastructureBuilder, type InfrastructurePreset, type InputChain, type IntentDiscrepancy, type IntentDiscrepancyKind, JourneyEmotion, type JourneyStep, LABEL_INIT_CLEARANCE, LABEL_INIT_CLEARANCE_DOTTED_FLOW, LABEL_SIZE_TOLERANCE_WORLD, LABEL_TO_PATH_CLEARANCE, LANE_BORDER_CLEARANCE_TOL, LaidDiagram, LaidEdge, LaidNode, type LayoutWithValidationOptions, type LayoutWithValidationResult, MARKER_GLOW_RADIUS, MIN_COLUMN_ALIGNMENT_TOLERANCE, MIN_ROW_ALIGNMENT_TOLERANCE, type MathFnName, type MindBranch, type MindMapBuilder, type MindMapPreset, NEAR_COLLISION_DEFAULT_MIN, NEAR_COLLISION_POLICY, NODE_FRAME_SELECTOR, type NetworkBuilder, type NetworkDevice, type NetworkDeviceKind, type NetworkLink, type NetworkPreset, NodeKind, type OrderEdge, type OrderNode, type OrderResult, type PageLike, type PhaseBuilder, type QuadrantBuilder, type QuadrantItem, type QuadrantPreset, type QuadrantQuadrantLabel, ROW_GAP_VARIANCE_TOL, type ReferenceContainer, RowMark, SEQUENCE_MESSAGE_LOOK, SPEC_CLEARANCE_POLICY, STAGE_SVG_SELECTOR, type SequenceActor, type SequenceBuilder, type SequenceMessageKind, type SequencePreset, type SequenceStep, Side, Signal, type StateMachine2Builder, type StateMachine2Preset, type StateMachineBuilder, type StateMachinePreset, type SweepReport, type SwimlanePreset, TARGET_LABEL_PATH_DIST, Tone, type TopologyBuilder, type TopologyConnection, type TopologyContainer, type TopologyGroupBuilder, type TopologyPreset, type TreeBuilder, type TreeNode, type TreePreset, type UmlClass, type UmlRelation, type UserJourneyBuilder, type UserJourneyPreset, type ValidateOptions, type ValidationProfile, type VerifyOptions, type Violation, type VisualAxis, type VisualValidationReport, WCAG_AA_LARGE, WCAG_AA_NORMAL, applyDerivedValues, assertNever, attachEventHandlers, batch, bboxClearance, bboxDiffWorld, cdlAdapter, chart, classDiagram, compile, computeScrollProgress, computeStateValues, computeViewportScale, countEdgeCrossings, countOrderCrossings, createFormulaComputeds, createInputSignals, diagram, effect, er, evaluate as evaluateFormula, extractIdentifiers, flow, flowchart, funnel, gantt, infrastructure, inputDefaultValue, interpolate, isLargeText, labelInitClearance, layout, layoutWithValidation, mindMap, network, orderNodes, parseFormula, pointRectEdgeDistance, pointToSegmentDistance, predictLabelBBoxWorld, predictNodeBBoxWorld, projectEdgeLabel, projectNode, projectPathSegment, pxToWorld, quadrant, rectRectClearance, rectRectOverlapArea, relatedFocusSet, rendersRows, requiredContrastRatio, requiredNearClearance, requiredRowsHeight, requiredRowsWidth, requiredSpecClearance, resolveEdgeLabelOverlapsWithChain, resolveEdgeLabelOverlapsWithChainAndPropagate, resolveLabelClearanceAfterPathPasses, resolveOverlapsWithChain, resolveTarget, resolveTargetAll, segmentsIntersect, sequence, stateMachine, stateMachine2, swimlane, topology, tree, untrack, userJourney, validate, verifyAllDiagramsDom, verifyAuthorIntent, verifyAuthorIntentAll, verifyDiagramDom, visualValidate, visualValidateAll, visualValidateLaid, withDerivedValues, worldToPx, type 関係を持つ線 };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { C as CdlDiagram, S as Signal, a as CdlInput, b as CdlLane, c as CdlNode, T as Tone, d as Side, E as EdgeStyle, e as EdgeRole, f as EdgeHead, g as EdgeHeadFill, h as CdlState, i as CdlEventTarget, j as CdlLang, k as Computed, l as CdlDerivedValue, m as CdlScrollTrigger, L as LaidDiagram, n as CdlDiagramViewProps, o as LaidEdge, p as LaidNode, q as CdlEdge, B as BBox, R as RowMark, N as NodeKind, J as JourneyEmotion, Q as QuadrantKey } from './render-DpwY2hzM.js';
-export { r as CdlDiagramView, s as CdlEventBinding, t as CdlEventKind, u as CdlFormula, v as CdlPhase, w as ChartPieForm, x as ChartSlopeForm, y as EDGE_HEADS, z as EDGE_HEAD_DEFAULT, A as EDGE_HEAD_FILLS, D as EDGE_HEAD_FILL_DEFAULT, F as EDGE_REVEALS, G as EDGE_REVEAL_DEFAULT, H as EDGE_STYLES, I as EdgeReveal, K as InteractiveHandlerMap, M as InteractiveSignalsAccessor, O as LaidLane, P as NODE_KINDS, U as RELATION_FOCUSES, V as RELATION_FOCUS_DEFAULT, W as RelationFocus, X as ScrollProgressHandle, Y as TONES, Z as computeEventBindingKey, _ as computeFormulaKey, $ as computeInputSignalKey, a0 as computeScrollTriggerKey, a1 as computed, a2 as createInteractiveSignalsAccessor, a3 as createScrollProgressHandle, a4 as createScrollProgressSignals, a5 as hasInteractivePrimitives, a6 as resolveLang, a7 as sequenceBoardMetrics, a8 as sequenceStepId, a9 as signal } from './render-DpwY2hzM.js';
+import { C as CdlDiagram, S as Signal, a as CdlInput, b as CdlLane, c as CdlNode, T as Tone, d as Side, E as EdgeStyle, e as EdgeRole, f as EdgeHead, g as EdgeHeadFill, h as CdlState, i as CdlInputOption, j as CdlEventTarget, k as CdlLang, l as Computed, m as CdlDerivedValue, n as CdlScrollTrigger, L as LaidDiagram, o as CdlDiagramViewProps, p as LaidEdge, q as LaidNode, r as CdlEdge, B as BBox, R as RowMark, N as NodeKind, J as JourneyEmotion, Q as QuadrantKey } from './render-Dk8_6ua6.js';
+export { s as CdlDiagramView, t as CdlEventBinding, u as CdlEventKind, v as CdlFormula, w as CdlPhase, x as ChartPieForm, y as ChartSlopeForm, z as EDGE_HEADS, A as EDGE_HEAD_DEFAULT, D as EDGE_HEAD_FILLS, F as EDGE_HEAD_FILL_DEFAULT, G as EDGE_REVEALS, H as EDGE_REVEAL_DEFAULT, I as EDGE_STYLES, K as EdgeReveal, M as InteractiveHandlerMap, O as InteractiveSignalsAccessor, P as LaidLane, U as NODE_KINDS, V as RELATION_FOCUSES, W as RELATION_FOCUS_DEFAULT, X as RelationFocus, Y as ScrollProgressHandle, Z as TONES, _ as computeEventBindingKey, $ as computeFormulaKey, a0 as computeInputSignalKey, a1 as computeScrollTriggerKey, a2 as computed, a3 as createInteractiveSignalsAccessor, a4 as createScrollProgressHandle, a5 as createScrollProgressSignals, a6 as hasInteractivePrimitives, a7 as resolveLang, a8 as sequenceBoardMetrics, a9 as sequenceStepId, aa as signal } from './render-Dk8_6ua6.js';
 import { JSX } from 'react';
 
 declare function effect(fn: () => void | (() => void)): () => void;
@@ -917,13 +917,15 @@ type InputChain = {
         label?: string;
     }) => DiagramBuilder;
     dropdown: (id: string, opts: {
-        options: readonly string[];
+        options: readonly CdlInputOption[];
         defaultValue: string;
         label?: string;
     }) => DiagramBuilder;
     toggle: (id: string, opts: {
         defaultValue: boolean;
         label?: string;
+        onLabel?: string;
+        offLabel?: string;
     }) => DiagramBuilder;
     /** 2 軸 slider = XY pad、 単一 id で pointer position を保持 (x/y は同 signal に格納) */
     xypad: (id: string, opts: {
@@ -945,7 +947,7 @@ type InputChain = {
     }) => DiagramBuilder;
     /** 排他選択、 dropdown と同じ semantics だが視覚は横並び button */
     radio: (id: string, opts: {
-        options: readonly string[];
+        options: readonly CdlInputOption[];
         defaultValue: string;
         label?: string;
     }) => DiagramBuilder;
@@ -975,12 +977,12 @@ type InputChain = {
         label?: string;
     }) => DiagramBuilder;
     multiSelect: (id: string, opts: {
-        options: readonly string[];
+        options: readonly CdlInputOption[];
         defaultValues: readonly string[];
         label?: string;
     }) => DiagramBuilder;
     tabs: (id: string, opts: {
-        options: readonly string[];
+        options: readonly CdlInputOption[];
         defaultValue: string;
         label?: string;
     }) => DiagramBuilder;
@@ -1170,8 +1172,12 @@ 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`) を参照可能。
@@ -1181,8 +1187,12 @@ 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) => DiagramBuilder;
+    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 を追加。
      * 将来的に `.animation.time(...)` 等の time-based primitive を追加する余地を残す namespace。
@@ -3917,6 +3927,14 @@ interface 関係を持つ線 {
  */
 declare function relatedFocusSet(edges: readonly 関係を持つ線[], nodeId: string): Set<string>;
 
+/** 1 つの入力欄の値ごとの名前。 `複数` は値を `,` でつないで持つ入力欄 (`multi-select`) */
+type 入力欄の名前 = {
+    readonly 名前: ReadonlyMap<string, string>;
+    readonly 複数: boolean;
+};
+/** 入力欄の id → 値ごとの名前の表。 名前を持つ入力欄だけを載せる */
+type 値の名前の表 = ReadonlyMap<string, 入力欄の名前>;
+
 /**
  * 全 state の現時点 value を計算 (現在 phase + これまでの phase の最終 tween 値を集約)。
  * - set = 即時切替 (phase 到達で value 上書き、 lerp なし)
@@ -3936,7 +3954,11 @@ declare function computeStateValues(laid: LaidDiagram, phaseIdx: number, progres
  *
  * 名前に使える文字は `template-name.ts` が決める (engine 全体で 1 つ)。 ここだけで
  * 定義すると、 式を書ける側との間で「読めるが書けない」 「書けるが読めない」 名前ができる。
+ *
+ * `名前の表` を渡すと、 付け足しの無い `{id}` の値を入力欄の値ごとの名前で差し込む (#855)。
+ * 渡すのは画面に字を描く所 (箱の題・副題・見出し・値・行) だけ。 表示の出し分けと数の差し込みは
+ * 値を綴りのまま読む必要があるので渡さない。
  */
-declare function interpolate(template: string, values: Record<string, string>): string;
+declare function interpolate(template: string, values: Record<string, string>, 名前の表?: 値の名前の表): string;
 
-export { ARROW_ANGLE_MAX_DEG, ARROW_ENDPOINT_CENTER_TOL, type AnimationChain, type AuthorIntentOptions, type AuthorIntentReport, type BinaryOp, CHAIN_MIN_CLEARANCE, CHAIN_SHIFT_MAX_ACCUMULATED, CHAIN_SHIFT_MAX_ITER, CLASS_RELATION_LOOK, CLEARANCE_LABEL_LABEL, CLEARANCE_LANE_LABEL, CLEARANCE_NODE_LABEL, CLEARANCE_PATH_LABEL, COLUMN_GAP_VARIANCE_TOL, CdlDerivedValue, CdlDiagram, CdlDiagramThumbnail, CdlEdge, type CdlEventHandler, CdlEventTarget, CdlInput, CdlLane, CdlLang, CdlNode, CdlScrollTrigger, CdlState, type ChartBuilder, type ChartDatum, type ChartPreset, type ChartType, type ClassDiagramBuilder, type ClassDiagramPreset, type ClassRelationType, Computed, DETOUR_GAP, DETOUR_SLOT_GAP, DIST_LABEL_PATH_MAX, DIST_LABEL_PATH_MIN, type DerivedNotice, type DerivedNoticeKind, type DerivedResult, type DiagramAdapter, type DiagramBuilder, type Discrepancy, type DiscrepancyKind, type DomVerifyReport, EDGE_LABEL_TEXT, EDGE_STUB_OUT, ER_CARDINALITY_HEAD, EdgeHead, EdgeHeadFill, type EdgeLabelLine, type EdgeLabelTextSpec, EdgeStyle, type ErBuilder, type ErColumn, type ErEntity, type ErPreset, type ErRelation, type ErRelationCardinality, type EventAttachHandle, type EventChain, FAN_GAP, FONT_RENDER_TOLERANCE_WORLD, FSM_ACTION_MARK, type FlowBuilder, type FlowPreset, type FlowStepInput, type FlowchartBuilder, type FlowchartEdge, type FlowchartNode, type FlowchartNodeShape, type FlowchartPreset, type FormulaAst, type FormulaContext, type FsmMark, type FsmState, type FsmStateAction, type FsmStateNested, type FsmTransition, type FsmTransitionExt, type FunnelBuilder, type FunnelPreset, type FunnelStage, type GanttBuilder, type GanttPreset, type GanttTask, type GenericDiagramSpec, type GenericDiscrepancy, type GenericDiscrepancyKind, type GenericVerifyOptions, type Rect as GeometryRect, type Segment as GeometrySegment, type InfraConnection, type InfraNode, type InfrastructureBuilder, type InfrastructurePreset, type InputChain, type IntentDiscrepancy, type IntentDiscrepancyKind, JourneyEmotion, type JourneyStep, LABEL_INIT_CLEARANCE, LABEL_INIT_CLEARANCE_DOTTED_FLOW, LABEL_SIZE_TOLERANCE_WORLD, LABEL_TO_PATH_CLEARANCE, LANE_BORDER_CLEARANCE_TOL, LaidDiagram, LaidEdge, LaidNode, type LayoutWithValidationOptions, type LayoutWithValidationResult, MARKER_GLOW_RADIUS, MIN_COLUMN_ALIGNMENT_TOLERANCE, MIN_ROW_ALIGNMENT_TOLERANCE, type MathFnName, type MindBranch, type MindMapBuilder, type MindMapPreset, NEAR_COLLISION_DEFAULT_MIN, NEAR_COLLISION_POLICY, NODE_FRAME_SELECTOR, type NetworkBuilder, type NetworkDevice, type NetworkDeviceKind, type NetworkLink, type NetworkPreset, NodeKind, type OrderEdge, type OrderNode, type OrderResult, type PageLike, type PhaseBuilder, type QuadrantBuilder, type QuadrantItem, type QuadrantPreset, type QuadrantQuadrantLabel, ROW_GAP_VARIANCE_TOL, type ReferenceContainer, RowMark, SEQUENCE_MESSAGE_LOOK, SPEC_CLEARANCE_POLICY, STAGE_SVG_SELECTOR, type SequenceActor, type SequenceBuilder, type SequenceMessageKind, type SequencePreset, type SequenceStep, Side, Signal, type StateMachine2Builder, type StateMachine2Preset, type StateMachineBuilder, type StateMachinePreset, type SweepReport, type SwimlanePreset, TARGET_LABEL_PATH_DIST, Tone, type TopologyBuilder, type TopologyConnection, type TopologyContainer, type TopologyGroupBuilder, type TopologyPreset, type TreeBuilder, type TreeNode, type TreePreset, type UmlClass, type UmlRelation, type UserJourneyBuilder, type UserJourneyPreset, type ValidateOptions, type ValidationProfile, type VerifyOptions, type Violation, type VisualAxis, type VisualValidationReport, WCAG_AA_LARGE, WCAG_AA_NORMAL, applyDerivedValues, assertNever, attachEventHandlers, batch, bboxClearance, bboxDiffWorld, cdlAdapter, chart, classDiagram, compile, computeScrollProgress, computeStateValues, computeViewportScale, countEdgeCrossings, countOrderCrossings, createFormulaComputeds, createInputSignals, diagram, effect, er, evaluate as evaluateFormula, extractIdentifiers, flow, flowchart, funnel, gantt, infrastructure, inputDefaultValue, interpolate, isLargeText, labelInitClearance, layout, layoutWithValidation, mindMap, network, orderNodes, parseFormula, pointRectEdgeDistance, pointToSegmentDistance, predictLabelBBoxWorld, predictNodeBBoxWorld, projectEdgeLabel, projectNode, projectPathSegment, pxToWorld, quadrant, rectRectClearance, rectRectOverlapArea, relatedFocusSet, rendersRows, requiredContrastRatio, requiredNearClearance, requiredRowsHeight, requiredRowsWidth, requiredSpecClearance, resolveEdgeLabelOverlapsWithChain, resolveEdgeLabelOverlapsWithChainAndPropagate, resolveLabelClearanceAfterPathPasses, resolveOverlapsWithChain, resolveTarget, resolveTargetAll, segmentsIntersect, sequence, stateMachine, stateMachine2, swimlane, topology, tree, untrack, userJourney, validate, verifyAllDiagramsDom, verifyAuthorIntent, verifyAuthorIntentAll, verifyDiagramDom, visualValidate, visualValidateAll, visualValidateLaid, withDerivedValues, worldToPx, type 関係を持つ線 };
+export { ARROW_ANGLE_MAX_DEG, ARROW_ENDPOINT_CENTER_TOL, type AnimationChain, type AuthorIntentOptions, type AuthorIntentReport, type BinaryOp, CHAIN_MIN_CLEARANCE, CHAIN_SHIFT_MAX_ACCUMULATED, CHAIN_SHIFT_MAX_ITER, CLASS_RELATION_LOOK, CLEARANCE_LABEL_LABEL, CLEARANCE_LANE_LABEL, CLEARANCE_NODE_LABEL, CLEARANCE_PATH_LABEL, COLUMN_GAP_VARIANCE_TOL, CdlDerivedValue, CdlDiagram, CdlDiagramThumbnail, CdlEdge, type CdlEventHandler, CdlEventTarget, CdlInput, CdlInputOption, CdlLane, CdlLang, CdlNode, CdlScrollTrigger, CdlState, type ChartBuilder, type ChartDatum, type ChartPreset, type ChartType, type ClassDiagramBuilder, type ClassDiagramPreset, type ClassRelationType, Computed, DETOUR_GAP, DETOUR_SLOT_GAP, DIST_LABEL_PATH_MAX, DIST_LABEL_PATH_MIN, type DerivedNotice, type DerivedNoticeKind, type DerivedResult, type DiagramAdapter, type DiagramBuilder, type Discrepancy, type DiscrepancyKind, type DomVerifyReport, EDGE_LABEL_TEXT, EDGE_STUB_OUT, ER_CARDINALITY_HEAD, EdgeHead, EdgeHeadFill, type EdgeLabelLine, type EdgeLabelTextSpec, EdgeStyle, type ErBuilder, type ErColumn, type ErEntity, type ErPreset, type ErRelation, type ErRelationCardinality, type EventAttachHandle, type EventChain, FAN_GAP, FONT_RENDER_TOLERANCE_WORLD, FSM_ACTION_MARK, type FlowBuilder, type FlowPreset, type FlowStepInput, type FlowchartBuilder, type FlowchartEdge, type FlowchartNode, type FlowchartNodeShape, type FlowchartPreset, type FormulaAst, type FormulaContext, type FsmMark, type FsmState, type FsmStateAction, type FsmStateNested, type FsmTransition, type FsmTransitionExt, type FunnelBuilder, type FunnelPreset, type FunnelStage, type GanttBuilder, type GanttPreset, type GanttTask, type GenericDiagramSpec, type GenericDiscrepancy, type GenericDiscrepancyKind, type GenericVerifyOptions, type Rect as GeometryRect, type Segment as GeometrySegment, type InfraConnection, type InfraNode, type InfrastructureBuilder, type InfrastructurePreset, type InputChain, type IntentDiscrepancy, type IntentDiscrepancyKind, JourneyEmotion, type JourneyStep, LABEL_INIT_CLEARANCE, LABEL_INIT_CLEARANCE_DOTTED_FLOW, LABEL_SIZE_TOLERANCE_WORLD, LABEL_TO_PATH_CLEARANCE, LANE_BORDER_CLEARANCE_TOL, LaidDiagram, LaidEdge, LaidNode, type LayoutWithValidationOptions, type LayoutWithValidationResult, MARKER_GLOW_RADIUS, MIN_COLUMN_ALIGNMENT_TOLERANCE, MIN_ROW_ALIGNMENT_TOLERANCE, type MathFnName, type MindBranch, type MindMapBuilder, type MindMapPreset, NEAR_COLLISION_DEFAULT_MIN, NEAR_COLLISION_POLICY, NODE_FRAME_SELECTOR, type NetworkBuilder, type NetworkDevice, type NetworkDeviceKind, type NetworkLink, type NetworkPreset, NodeKind, type OrderEdge, type OrderNode, type OrderResult, type PageLike, type PhaseBuilder, type QuadrantBuilder, type QuadrantItem, type QuadrantPreset, type QuadrantQuadrantLabel, ROW_GAP_VARIANCE_TOL, type ReferenceContainer, RowMark, SEQUENCE_MESSAGE_LOOK, SPEC_CLEARANCE_POLICY, STAGE_SVG_SELECTOR, type SequenceActor, type SequenceBuilder, type SequenceMessageKind, type SequencePreset, type SequenceStep, Side, Signal, type StateMachine2Builder, type StateMachine2Preset, type StateMachineBuilder, type StateMachinePreset, type SweepReport, type SwimlanePreset, TARGET_LABEL_PATH_DIST, Tone, type TopologyBuilder, type TopologyConnection, type TopologyContainer, type TopologyGroupBuilder, type TopologyPreset, type TreeBuilder, type TreeNode, type TreePreset, type UmlClass, type UmlRelation, type UserJourneyBuilder, type UserJourneyPreset, type ValidateOptions, type ValidationProfile, type VerifyOptions, type Violation, type VisualAxis, type VisualValidationReport, WCAG_AA_LARGE, WCAG_AA_NORMAL, applyDerivedValues, assertNever, attachEventHandlers, batch, bboxClearance, bboxDiffWorld, cdlAdapter, chart, classDiagram, compile, computeScrollProgress, computeStateValues, computeViewportScale, countEdgeCrossings, countOrderCrossings, createFormulaComputeds, createInputSignals, diagram, effect, er, evaluate as evaluateFormula, extractIdentifiers, flow, flowchart, funnel, gantt, infrastructure, inputDefaultValue, interpolate, isLargeText, labelInitClearance, layout, layoutWithValidation, mindMap, network, orderNodes, parseFormula, pointRectEdgeDistance, pointToSegmentDistance, predictLabelBBoxWorld, predictNodeBBoxWorld, projectEdgeLabel, projectNode, projectPathSegment, pxToWorld, quadrant, rectRectClearance, rectRectOverlapArea, relatedFocusSet, rendersRows, requiredContrastRatio, requiredNearClearance, requiredRowsHeight, requiredRowsWidth, requiredSpecClearance, resolveEdgeLabelOverlapsWithChain, resolveEdgeLabelOverlapsWithChainAndPropagate, resolveLabelClearanceAfterPathPasses, resolveOverlapsWithChain, resolveTarget, resolveTargetAll, segmentsIntersect, sequence, stateMachine, stateMachine2, swimlane, topology, tree, untrack, userJourney, validate, verifyAllDiagramsDom, verifyAuthorIntent, verifyAuthorIntentAll, verifyDiagramDom, visualValidate, visualValidateAll, visualValidateLaid, withDerivedValues, worldToPx, type 関係を持つ線 };

package/dist/index.js

@@ -753,7 +753,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;
     }
@@ -802,7 +802,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 === "+") {
@@ -1027,6 +1027,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":
@@ -1571,6 +1589,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;
@@ -1980,6 +2026,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__ */ jsx(\u64CD\u4F5C\u90E8\u306E\u8A00\u8A9E.Provider, { value: resolveLang(diagram2.lang), children: /* @__PURE__ */ jsxs("div", { className: "cdl-ip-root", "data-cdl-interactive-panel": "true", children: [
@@ -1988,12 +2036,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__ */ jsx("div", { className: "cdl-ip-group", children: scrolls.map((s) => /* @__PURE__ */ jsx(ScrollReadout, { id: s.id, progress: stateOverrides[s.id] }, s.id)) }),
+        scrolls.length > 0 && /* @__PURE__ */ jsx("div", { className: "cdl-ip-group", children: scrolls.map((s) => /* @__PURE__ */ jsx(ScrollReadout, { id: s.id, name: s.label || s.id, progress: stateOverrides[s.id] }, s.id)) }),
         readouts.length > 0 && /* @__PURE__ */ jsx("div", { className: "cdl-ip-group", children: readouts.map((r) => /* @__PURE__ */ jsx(ReadoutWidget, { readout: r, stateOverrides: mergedStateValues }, r.id)) })
       ] }) })
     );
@@ -2076,7 +2125,7 @@ function InputWidget({
             },
             "data-cdl-input": input.id,
             className: "cdl-ip-dropdown-select",
-            children: input.options.map((opt) => /* @__PURE__ */ jsx("option", { value: opt, children: opt }, opt))
+            children: input.options.map((opt) => /* @__PURE__ */ jsx("option", { value: \u9078\u629E\u80A2\u306E\u5024(opt), children: \u9078\u629E\u80A2\u306E\u540D\u524D(opt) }, \u9078\u629E\u80A2\u306E\u5024(opt)))
           }
         )
       ] });
@@ -2093,17 +2142,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__ */ jsx("span", { className: "cdl-ip-radio-label", children: opt })
-        ] }, opt)) })
+          /* @__PURE__ */ 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__ */ jsxs("label", { className: "cdl-ip-item cdl-ip-color", "data-cdl-input-kind": "color", children: [
@@ -2153,14 +2202,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":
@@ -2250,11 +2299,12 @@ function NumberInputWidget({
 }
 function FormulaReadout({
   id,
+  name,
   expression,
   value
 }) {
   return /* @__PURE__ */ jsxs("div", { className: "cdl-ip-item cdl-ip-formula", "data-cdl-formula": id, children: [
-    /* @__PURE__ */ jsx("span", { className: "cdl-ip-label", children: id }),
+    /* @__PURE__ */ jsx("span", { className: "cdl-ip-label", children: name }),
     /* @__PURE__ */ jsxs("code", { className: "cdl-ip-formula-expr", children: [
       "= ",
       expression
@@ -2262,11 +2312,11 @@ function FormulaReadout({
     /* @__PURE__ */ 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__ */ jsxs("div", { className: "cdl-ip-item cdl-ip-scroll", "data-cdl-scroll": id, children: [
-    /* @__PURE__ */ jsx("span", { className: "cdl-ip-label", children: id }),
+    /* @__PURE__ */ jsx("span", { className: "cdl-ip-label", children: name }),
     /* @__PURE__ */ jsx("div", { className: "cdl-ip-scroll-track", children: /* @__PURE__ */ jsx("div", { className: "cdl-ip-scroll-fill", style: { width: `${pct}%` } }) }),
     /* @__PURE__ */ jsxs("span", { className: "cdl-ip-scroll-value", children: [
       pct,
@@ -4214,13 +4264,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)
     )) })
   ] });
 }
@@ -10106,9 +10156,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({
@@ -10126,6 +10176,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;
@@ -10193,9 +10246,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({
@@ -10280,8 +10333,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,
@@ -10315,7 +10368,7 @@ function diagram(id, options) {
         return api;
       }
     },
-    formula(formulaId, expression) {
+    formula(formulaId, expression, opts) {
       assertUniqueFormulaId(formulaId);
       try {
         parseFormula(expression);
@@ -10323,10 +10376,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`);
       }
@@ -10342,7 +10395,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;
@@ -14911,11 +14965,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);
@@ -24559,7 +24616,8 @@ function GenericNode({
   node,
   active,
   value,
-  stateValues
+  stateValues,
+  \u5024\u306E\u540D\u524D
 }) {
   const base = STYLES[node.kind] ?? FALLBACK;
   const toned = toneColor3(node.tone);
@@ -24645,7 +24703,7 @@ function GenericNode({
       style.look === "ledger" && /* @__PURE__ */ 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";
@@ -24695,7 +24753,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)),
@@ -31360,10 +31418,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;
@@ -31377,9 +31436,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
   };
@@ -31660,7 +31719,7 @@ function CdlNodeView({
       case "mark-end":
         return /* @__PURE__ */ jsx(MarkEndNode, { node: resolvedNode, active });
       default:
-        return /* @__PURE__ */ jsx(GenericNode, { node: resolvedNode, active, value: node.value, stateValues });
+        return /* @__PURE__ */ 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;
@@ -31742,7 +31801,8 @@ function CdlStage({
   stateValues,
   debug,
   compact = false,
-  svgRef
+  svgRef,
+  \u5024\u306E\u540D\u524D
 }) {
   const [\u7126\u70B9, set\u7126\u70B9] = useState(null);
   const \u95A2\u4FC2\u3092\u5149\u3089\u305B\u308B = (laid.relationFocus ?? RELATION_FOCUS_DEFAULT) === "hover";
@@ -32022,6 +32082,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)
               }
@@ -32263,6 +32324,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 = useMemo(() => \u5024\u306E\u540D\u524D\u306E\u8868\u3092\u4F5C\u308B(diagram2.inputs), [diagram2.inputs]);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -32291,7 +32353,7 @@ function CdlDiagramView({ diagram: diagram2, laid: laidProp, hideHeader = false,
           }
         ),
         isInteractive && interactive.panel,
-        /* @__PURE__ */ jsx(CdlStage, { laid, currentPhase, progress, drawProgress, stateValues, debug, compact: hideHeader, svgRef: isInteractive ? interactive.svgRef : void 0 }),
+        /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
             laid.phases.map((p, i) => /* @__PURE__ */ jsx(