@10x-media/form-builder 0.1.0-beta.2 → 0.1.0-beta.21

package/dist/client/CalcExpressionBuilder.js

@@ -0,0 +1,890 @@
+"use client";
+import { keys } from "../translations/keys.js";
+import { CALC_FNS, CALC_OPS, isCalcFn } from "../calc/types.js";
+import { normalizeCalc } from "../calc/normalizeCalc.js";
+import { formatCalc } from "../calc/formatCalc.js";
+import { useTranslation as useTranslation$1 } from "../translations/useTranslation.js";
+import { toStaticLabel } from "./toStaticLabel.js";
+import { reduceFieldsToValues } from "payload/shared";
+import { Button, FieldError, FieldLabel, ReactSelect, RenderCustomComponent, useField, useFormFields } from "@payloadcms/ui";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import "./admin.css";
+//#region src/client/CalcExpressionBuilder.tsx
+/** The single-argument functions offered by the "Then apply" finisher; min/max are variadic and stay Function operands. */
+const UNARY_FNS = CALC_FNS.filter((fn) => fn !== "min" && fn !== "max");
+const seedOperand = (kind) => {
+	switch (kind) {
+		case "ref": return {
+			kind: "ref",
+			field: ""
+		};
+		case "lit": return {
+			kind: "lit",
+			value: 0
+		};
+		case "weight": return {
+			kind: "weight",
+			field: "",
+			weights: {}
+		};
+	}
+};
+const seedAst = (kind) => {
+	switch (kind) {
+		case "ref": return {
+			type: "ref",
+			field: ""
+		};
+		case "lit": return {
+			type: "lit",
+			value: 0
+		};
+		case "weight": return {
+			type: "weight",
+			field: "",
+			weights: {}
+		};
+		case "fn": return {
+			type: "fn",
+			fn: "min",
+			args: [{
+				type: "lit",
+				value: 0
+			}]
+		};
+	}
+};
+const astToOperand = (node) => {
+	switch (node.type) {
+		case "ref": return {
+			kind: "ref",
+			field: node.field
+		};
+		case "lit": return {
+			kind: "lit",
+			value: node.value
+		};
+		case "source": return {
+			kind: "source",
+			source: node.source
+		};
+		case "weight": return {
+			kind: "weight",
+			field: node.field,
+			...node.weights !== void 0 ? { weights: node.weights } : {},
+			...node.source !== void 0 ? { source: node.source } : {}
+		};
+		case "neg": return {
+			kind: "neg",
+			operand: astToOperand(node.operand)
+		};
+		case "fn": return {
+			kind: "fn",
+			fn: node.fn,
+			args: node.args.map((arg) => toChain(arg, false))
+		};
+		case "op": return {
+			kind: "group",
+			chain: toChain(node, false)
+		};
+	}
+};
+const toChain = (expr, allowFinish) => {
+	const arg = expr.type === "fn" ? expr.args[0] : void 0;
+	if (allowFinish && expr.type === "fn" && expr.args.length === 1 && arg !== void 0 && isCalcFn(expr.fn) && UNARY_FNS.includes(expr.fn)) return {
+		...toChain(arg, false),
+		finish: expr.fn
+	};
+	const steps = [];
+	let node = expr;
+	while (node.type === "op") {
+		steps.unshift({
+			op: node.op,
+			operand: astToOperand(node.right)
+		});
+		node = node.left;
+	}
+	return {
+		first: astToOperand(node),
+		steps
+	};
+};
+/**
+* AST -> chain: the left spine of binary ops flattens into first + steps (a nested op on the right
+* becomes a `group`); a root unary fn wrapping the whole expression loads as `finish` (min/max stay
+* fn operands so the finisher select never holds a value it cannot offer). Total: every valid
+* `CalcExpression` loads without loss, and `chainToAst(astToChain(x))` is structurally `x`.
+*/
+const astToChain = (expr) => toChain(expr, true);
+const operandToAst = (operand) => {
+	switch (operand.kind) {
+		case "ref": return {
+			type: "ref",
+			field: operand.field
+		};
+		case "lit": return {
+			type: "lit",
+			value: operand.value
+		};
+		case "weight": return {
+			type: "weight",
+			field: operand.field,
+			...operand.weights !== void 0 ? { weights: operand.weights } : {},
+			...operand.source !== void 0 ? { source: operand.source } : {}
+		};
+		case "source": return {
+			type: "source",
+			source: operand.source
+		};
+		case "neg": return {
+			type: "neg",
+			operand: operandToAst(operand.operand)
+		};
+		case "fn": return {
+			type: "fn",
+			fn: operand.fn,
+			args: operand.args.map(chainBodyToAst)
+		};
+		case "group": return chainBodyToAst(operand.chain);
+	}
+};
+/** Folds first + steps only. `finish` is root-only by design: nested chains (groups, fn args) never carry one, so it is deliberately ignored here. */
+const chainBodyToAst = (chain) => chain.steps.reduce((left, step) => ({
+	type: "op",
+	op: step.op,
+	left,
+	right: operandToAst(step.operand)
+}), operandToAst(chain.first));
+/** Chain -> AST: left-fold first + steps into the binary tree (left-assoc matches `-`/`/`/`%`), then wrap in `finish` when set. */
+const chainToAst = (chain) => {
+	const body = chainBodyToAst(chain);
+	return chain.finish ? {
+		type: "fn",
+		fn: chain.finish,
+		args: [body]
+	} : body;
+};
+const optionRows = (options) => {
+	if (!Array.isArray(options)) return [];
+	return options.flatMap((option) => {
+		if (typeof option === "string") return option.length > 0 ? [{
+			label: option,
+			value: option
+		}] : [];
+		if (!option || typeof option !== "object") return [];
+		const { label, value } = option;
+		if (typeof value !== "string" || value.length === 0) return [];
+		return [{
+			label: typeof label === "string" && label.length > 0 ? label : value,
+			value
+		}];
+	});
+};
+const siblingsFromData = (data, selfIndex) => {
+	const rows = Array.isArray(data.fields) ? data.fields : [];
+	const siblings = {
+		numeric: [],
+		choices: [],
+		labels: {}
+	};
+	rows.forEach((row, index) => {
+		if (!row || typeof row !== "object") return;
+		const { blockType, name, label, options } = row;
+		const trimmed = typeof name === "string" ? name.trim() : "";
+		if (trimmed.length === 0) return;
+		const display = typeof label === "string" && label.length > 0 ? label : trimmed;
+		siblings.labels[trimmed] = display;
+		if (blockType === "number" || blockType === "calculation" && index < selfIndex) siblings.numeric.push({
+			label: display,
+			value: trimmed
+		});
+		if (blockType === "select") siblings.choices.push({
+			name: trimmed,
+			label: display,
+			options: optionRows(options)
+		});
+	});
+	return siblings;
+};
+const singleOption = (selected) => {
+	return (Array.isArray(selected) ? selected[0] : selected) ?? void 0;
+};
+/** Keeps a stored reference selectable even when it no longer matches any option, like FieldNameSelect. */
+const withStored = (options, stored) => stored.length > 0 && !options.some((option) => option.value === stored) ? [...options, {
+	label: stored,
+	value: stored
+}] : options;
+/**
+* Number input with a local draft: keystrokes commit only when the text parses to a finite number,
+* an invalid draft reverts to the committed value on blur, and an external value change resyncs
+* the draft.
+*/
+const NumberInput = ({ value, onCommit, className, id, disabled, "aria-label": ariaLabel }) => {
+	const [draft, setDraft] = useState(value === void 0 ? "" : String(value));
+	const [lastValue, setLastValue] = useState(value);
+	if (value !== lastValue) {
+		setLastValue(value);
+		if (draft.trim() === "" || Number(draft) !== value) setDraft(value === void 0 ? "" : String(value));
+	}
+	return /* @__PURE__ */ jsx("input", {
+		type: "number",
+		className,
+		id,
+		disabled,
+		"aria-label": ariaLabel,
+		value: draft,
+		onChange: (event) => {
+			const text = event.target.value;
+			setDraft(text);
+			const parsed = Number(text);
+			if (text.trim() !== "" && Number.isFinite(parsed)) onCommit(parsed);
+		},
+		onBlur: () => {
+			const parsed = Number(draft);
+			if (draft.trim() === "" || !Number.isFinite(parsed)) setDraft(value === void 0 ? "" : String(value));
+		}
+	});
+};
+const OP_OPTIONS = CALC_OPS.map((op) => ({
+	label: op,
+	value: op
+}));
+const FN_OPTIONS = CALC_FNS.map((fn) => ({
+	label: fn,
+	value: fn
+}));
+const UNARY_OPTIONS = UNARY_FNS.map((fn) => ({
+	label: fn,
+	value: fn
+}));
+/** Source entries share kind/start selects with the fixed kinds, namespaced to avoid key collisions. */
+const SOURCE_PREFIX = "source:";
+const sourceOptionValue = (key) => `${SOURCE_PREFIX}${key}`;
+const sourceKeyOf = (value) => value.startsWith(SOURCE_PREFIX) ? value.slice(7) : void 0;
+/** A source label is a plain string or a per-locale record; resolve it for the admin UI language. */
+const resolveSourceLabel = (label, language) => typeof label === "string" ? label : label[language] ?? label.en ?? Object.values(label)[0] ?? "";
+/** Fixed kinds stay flat; sources join as a labeled group when any exist (react-select mixes both). */
+const withSourceGroup = (base, sourceOptions, groupLabel) => sourceOptions.length > 0 ? [...base, {
+	label: groupLabel,
+	options: sourceOptions
+}] : base;
+const OperandCard = ({ operand, onChange, ctx, idPrefix }) => {
+	const { t, siblings, readOnly } = ctx;
+	if (operand.kind === "group") return /* @__PURE__ */ jsxs("div", {
+		className: "fb-calc-operand fb-calc-operand--group",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "fb-calc-operand__title",
+			children: t(keys.calcBuilderGroup)
+		}), /* @__PURE__ */ jsx(ChainEditor, {
+			chain: operand.chain,
+			onChange: (chain) => onChange({
+				...operand,
+				chain
+			}),
+			ctx,
+			idPrefix: `${idPrefix}-g`
+		})]
+	});
+	if (operand.kind === "fn") {
+		const fnOptions = withStored([...FN_OPTIONS, ...ctx.customFnOptions], operand.fn);
+		return /* @__PURE__ */ jsxs("div", {
+			className: "fb-calc-operand fb-calc-operand--fn",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "fb-calc-operand__header",
+				children: [/* @__PURE__ */ jsx("label", {
+					className: "fb-visually-hidden",
+					htmlFor: `${idPrefix}-fn`,
+					children: t(keys.calcBuilderFunction)
+				}), /* @__PURE__ */ jsx(ReactSelect, {
+					className: "fb-calc-operand__fn",
+					inputId: `${idPrefix}-fn`,
+					options: fnOptions,
+					value: fnOptions.find((option) => option.value === operand.fn),
+					isClearable: false,
+					disabled: readOnly,
+					onChange: (selected) => {
+						const chosen = singleOption(selected);
+						if (chosen) onChange({
+							...operand,
+							fn: String(chosen.value)
+						});
+					}
+				})]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "fb-calc-fn__args",
+				children: [operand.args.map((arg, index) => /* @__PURE__ */ jsxs("div", {
+					className: "fb-calc-fn__arg",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "fb-calc-fn__arg-chain",
+						children: /* @__PURE__ */ jsx(ChainEditor, {
+							chain: arg,
+							onChange: (next) => onChange({
+								...operand,
+								args: operand.args.map((a, i) => i === index ? next : a)
+							}),
+							ctx,
+							idPrefix: `${idPrefix}-a${index}`
+						})
+					}), operand.args.length > 1 ? /* @__PURE__ */ jsx("div", {
+						className: "fb-calc-fn__arg-remove",
+						children: /* @__PURE__ */ jsx(Button, {
+							buttonStyle: "icon-label",
+							icon: "x",
+							"aria-label": t(keys.calcBuilderRemove),
+							margin: false,
+							disabled: readOnly,
+							onClick: () => onChange({
+								...operand,
+								args: operand.args.filter((_, i) => i !== index)
+							})
+						})
+					}) : null]
+				}, index)), /* @__PURE__ */ jsx("div", {
+					className: "fb-calc-fn__add",
+					children: /* @__PURE__ */ jsx(Button, {
+						buttonStyle: "icon-label",
+						icon: "plus",
+						iconStyle: "with-border",
+						iconPosition: "left",
+						margin: false,
+						disabled: readOnly,
+						onClick: () => onChange({
+							...operand,
+							args: [...operand.args, {
+								first: {
+									kind: "lit",
+									value: 0
+								},
+								steps: []
+							}]
+						}),
+						children: t(keys.calcBuilderAddArgument)
+					})
+				})]
+			})]
+		});
+	}
+	if (operand.kind === "neg") return /* @__PURE__ */ jsxs("div", {
+		className: "fb-calc-operand fb-calc-operand--neg",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "fb-calc-operand__title",
+			children: t(keys.calcBuilderNegate)
+		}), /* @__PURE__ */ jsx(OperandCard, {
+			operand: operand.operand,
+			onChange: (next) => onChange({
+				kind: "neg",
+				operand: next
+			}),
+			ctx,
+			idPrefix: `${idPrefix}-n`
+		})]
+	});
+	const leafKindOptions = [
+		{
+			label: t(keys.calcBuilderAnswer),
+			value: "ref"
+		},
+		{
+			label: t(keys.calcBuilderNumber),
+			value: "lit"
+		},
+		{
+			label: t(keys.calcBuilderWeights),
+			value: "weight"
+		}
+	];
+	const kindValue = operand.kind === "source" ? sourceOptionValue(operand.source) : operand.kind;
+	const kindSourceOptions = operand.kind === "source" && !ctx.scalarSourceOptions.some((option) => option.value === sourceOptionValue(operand.source)) ? [...ctx.scalarSourceOptions, {
+		label: operand.source,
+		value: kindValue
+	}] : ctx.scalarSourceOptions;
+	const kindFlat = [...leafKindOptions, ...kindSourceOptions];
+	const refOptions = operand.kind === "ref" ? withStored(siblings.numeric, operand.field) : [];
+	const choiceOptions = operand.kind === "weight" ? withStored(siblings.choices.map((c) => ({
+		label: c.label,
+		value: c.name
+	})), operand.field) : [];
+	const choice = operand.kind === "weight" ? siblings.choices.find((c) => c.name === operand.field) : void 0;
+	const weightSource = operand.kind === "weight" ? operand.source : void 0;
+	const weightValuesOptions = [{
+		label: t(keys.calcBuilderWeightManual),
+		value: "manual"
+	}, ...weightSource !== void 0 && !ctx.weightSourceOptions.some((option) => option.value === sourceOptionValue(weightSource)) ? [...ctx.weightSourceOptions, {
+		label: weightSource,
+		value: sourceOptionValue(weightSource)
+	}] : ctx.weightSourceOptions];
+	return /* @__PURE__ */ jsxs("div", {
+		className: "fb-calc-operand",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "fb-calc-operand__header",
+				children: [
+					/* @__PURE__ */ jsx("label", {
+						className: "fb-visually-hidden",
+						htmlFor: `${idPrefix}-kind`,
+						children: t(keys.calcBuilderKind)
+					}),
+					/* @__PURE__ */ jsx(ReactSelect, {
+						className: "fb-calc-operand__kind",
+						inputId: `${idPrefix}-kind`,
+						options: withSourceGroup(leafKindOptions, kindSourceOptions, t(keys.calcBuilderSourcesGroup)),
+						value: kindFlat.find((option) => option.value === kindValue),
+						isClearable: false,
+						disabled: readOnly,
+						onChange: (selected) => {
+							const chosen = singleOption(selected);
+							if (!chosen || chosen.value === kindValue) return;
+							const sourceKey = sourceKeyOf(String(chosen.value));
+							onChange(sourceKey !== void 0 ? {
+								kind: "source",
+								source: sourceKey
+							} : seedOperand(chosen.value));
+						}
+					}),
+					operand.kind === "source" ? /* @__PURE__ */ jsx("span", {
+						className: "fb-calc-operand__source",
+						children: ctx.sourceLabelOf(operand.source)
+					}) : null,
+					operand.kind === "ref" ? refOptions.length === 0 ? /* @__PURE__ */ jsx("p", {
+						className: "fb-calc-hint",
+						children: t(keys.calcBuilderNoNumericFields)
+					}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("label", {
+						className: "fb-visually-hidden",
+						htmlFor: `${idPrefix}-ref`,
+						children: t(keys.calcBuilderPickField)
+					}), /* @__PURE__ */ jsx(ReactSelect, {
+						className: "fb-calc-operand__ref",
+						inputId: `${idPrefix}-ref`,
+						options: refOptions,
+						value: refOptions.find((option) => option.value === operand.field),
+						isClearable: !readOnly,
+						disabled: readOnly,
+						placeholder: t(keys.calcBuilderPickField),
+						onChange: (selected) => {
+							const chosen = singleOption(selected);
+							onChange({
+								kind: "ref",
+								field: chosen ? String(chosen.value) : ""
+							});
+						}
+					})] }) : null,
+					operand.kind === "lit" ? /* @__PURE__ */ jsx(NumberInput, {
+						className: "fb-calc-operand__number",
+						id: `${idPrefix}-number`,
+						"aria-label": t(keys.calcBuilderNumber),
+						disabled: readOnly,
+						value: operand.value,
+						onCommit: (value) => onChange({
+							kind: "lit",
+							value
+						})
+					}) : null,
+					operand.kind === "weight" ? choiceOptions.length === 0 ? /* @__PURE__ */ jsx("p", {
+						className: "fb-calc-hint",
+						children: t(keys.calcBuilderNoChoiceFields)
+					}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("label", {
+						className: "fb-visually-hidden",
+						htmlFor: `${idPrefix}-weight-field`,
+						children: t(keys.calcBuilderPickField)
+					}), /* @__PURE__ */ jsx(ReactSelect, {
+						className: "fb-calc-operand__weight-field",
+						inputId: `${idPrefix}-weight-field`,
+						options: choiceOptions,
+						value: choiceOptions.find((option) => option.value === operand.field),
+						isClearable: !readOnly,
+						disabled: readOnly,
+						placeholder: t(keys.calcBuilderPickField),
+						onChange: (selected) => {
+							const chosen = singleOption(selected);
+							const field = chosen ? String(chosen.value) : "";
+							if (field !== operand.field) onChange(operand.source !== void 0 ? {
+								kind: "weight",
+								field,
+								source: operand.source
+							} : {
+								kind: "weight",
+								field,
+								weights: {}
+							});
+						}
+					})] }) : null
+				]
+			}),
+			operand.kind === "weight" && ctx.weightSourceOptions.length > 0 ? /* @__PURE__ */ jsxs("div", {
+				className: "fb-calc-operand__weight-values-row",
+				children: [/* @__PURE__ */ jsx("label", {
+					className: "fb-calc-operand__weight-values-label",
+					htmlFor: `${idPrefix}-wv`,
+					children: t(keys.calcBuilderWeightValues)
+				}), /* @__PURE__ */ jsx(ReactSelect, {
+					className: "fb-calc-operand__weight-values",
+					inputId: `${idPrefix}-wv`,
+					options: weightValuesOptions,
+					value: weightValuesOptions.find((option) => option.value === (operand.source !== void 0 ? sourceOptionValue(operand.source) : "manual")),
+					isClearable: false,
+					disabled: readOnly,
+					onChange: (selected) => {
+						const chosen = singleOption(selected);
+						if (!chosen) return;
+						const sourceKey = sourceKeyOf(String(chosen.value));
+						if (sourceKey === void 0) {
+							if (operand.source !== void 0) onChange({
+								kind: "weight",
+								field: operand.field,
+								weights: operand.weights ?? {}
+							});
+							return;
+						}
+						if (sourceKey !== operand.source) onChange({
+							...operand,
+							source: sourceKey
+						});
+					}
+				})]
+			}) : null,
+			operand.kind === "weight" && operand.source !== void 0 ? /* @__PURE__ */ jsx("p", {
+				className: "fb-calc-hint",
+				children: t(keys.calcBuilderWeightsFromSource)
+			}) : null,
+			operand.kind === "weight" && operand.source === void 0 && choice ? /* @__PURE__ */ jsx("div", {
+				className: "fb-calc-operand__weights",
+				children: choice.options.map((option) => /* @__PURE__ */ jsxs("div", {
+					className: "fb-calc-operand__weight-row",
+					children: [/* @__PURE__ */ jsx("label", {
+						className: "fb-calc-operand__weight-label",
+						htmlFor: `${idPrefix}-weight-${option.value}`,
+						children: option.label
+					}), /* @__PURE__ */ jsx(NumberInput, {
+						className: "fb-calc-operand__weight",
+						id: `${idPrefix}-weight-${option.value}`,
+						disabled: readOnly,
+						value: operand.weights?.[option.value],
+						onCommit: (value) => onChange({
+							...operand,
+							weights: {
+								...operand.weights ?? {},
+								[option.value]: value
+							}
+						})
+					})]
+				}, option.value))
+			}) : null
+		]
+	});
+};
+const ChainEditor = ({ chain, onChange, onEmptied, isRoot, ctx, idPrefix }) => {
+	const { t, readOnly } = ctx;
+	const removeRow = (row) => {
+		if (row === 0) {
+			const [promoted, ...rest] = chain.steps;
+			if (!promoted) {
+				onEmptied?.();
+				return;
+			}
+			onChange({
+				...chain,
+				first: promoted.operand,
+				steps: rest
+			});
+			return;
+		}
+		onChange({
+			...chain,
+			steps: chain.steps.filter((_, i) => i !== row - 1)
+		});
+	};
+	const rows = [{ operand: chain.first }, ...chain.steps.map((step) => ({
+		op: step.op,
+		operand: step.operand
+	}))];
+	return /* @__PURE__ */ jsxs("div", {
+		className: "fb-calc-chain",
+		children: [rows.map((row, index) => /* @__PURE__ */ jsxs("div", {
+			className: index > 0 ? "fb-calc-row fb-calc-row--divided" : "fb-calc-row",
+			children: [
+				index === 0 ? /* @__PURE__ */ jsx("div", {
+					className: "fb-calc-row__op-spacer",
+					"aria-hidden": "true"
+				}) : null,
+				index > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("label", {
+					className: "fb-visually-hidden",
+					htmlFor: `${idPrefix}-r${index}-op`,
+					children: t(keys.calcBuilderMath)
+				}), /* @__PURE__ */ jsx(ReactSelect, {
+					className: "fb-calc-row__op",
+					inputId: `${idPrefix}-r${index}-op`,
+					options: OP_OPTIONS,
+					value: OP_OPTIONS.find((option) => option.value === row.op),
+					isClearable: false,
+					disabled: readOnly,
+					onChange: (selected) => {
+						const chosen = singleOption(selected);
+						if (chosen) onChange({
+							...chain,
+							steps: chain.steps.map((step, i) => i === index - 1 ? {
+								...step,
+								op: chosen.value
+							} : step)
+						});
+					}
+				})] }) : null,
+				/* @__PURE__ */ jsx("div", {
+					className: "fb-calc-row__operand",
+					children: /* @__PURE__ */ jsx(OperandCard, {
+						operand: row.operand,
+						onChange: (operand) => index === 0 ? onChange({
+							...chain,
+							first: operand
+						}) : onChange({
+							...chain,
+							steps: chain.steps.map((step, i) => i === index - 1 ? {
+								...step,
+								operand
+							} : step)
+						}),
+						ctx,
+						idPrefix: `${idPrefix}-r${index}`
+					})
+				}),
+				rows.length > 1 || isRoot ? /* @__PURE__ */ jsx("div", {
+					className: "fb-calc-row__remove",
+					children: /* @__PURE__ */ jsx(Button, {
+						buttonStyle: "icon-label",
+						icon: "x",
+						"aria-label": t(keys.calcBuilderRemove),
+						margin: false,
+						disabled: readOnly,
+						onClick: () => removeRow(index)
+					})
+				}) : null
+			]
+		}, index)), /* @__PURE__ */ jsx("div", {
+			className: "fb-calc-chain__add",
+			children: /* @__PURE__ */ jsx(Button, {
+				buttonStyle: "icon-label",
+				icon: "plus",
+				iconStyle: "with-border",
+				iconPosition: "left",
+				margin: false,
+				disabled: readOnly,
+				onClick: () => onChange({
+					...chain,
+					steps: [...chain.steps, {
+						op: "*",
+						operand: seedOperand("ref")
+					}]
+				}),
+				children: t(keys.calcBuilderAddStep)
+			})
+		})]
+	});
+};
+/**
+* Visual editor for the calculation field's `expression` AST, presented as a left-to-right chain.
+* Storage shape is unchanged and `validateExpression` stays the server gate; the AST remains
+* authorable via the API.
+*/
+const CalcExpressionBuilder = (props) => {
+	const { customComponents: { Error: ErrorComponent, Label } = {}, disabled, path, setValue, showError, value } = useField({ path: props.path });
+	const { t, i18n } = useTranslation$1();
+	const label = toStaticLabel(props.field?.label);
+	const readOnly = props.readOnly === true || disabled === true;
+	const sources = useMemo(() => props.sources ?? [], [props.sources]);
+	const allowed = useMemo(() => ({
+		sources: new Set(sources.map((source) => source.key)),
+		functions: new Set(props.functions ?? [])
+	}), [sources, props.functions]);
+	const sourceLabelOf = (key) => {
+		const meta = sources.find((source) => source.key === key);
+		return meta ? resolveSourceLabel(meta.label, i18n.language) : key;
+	};
+	const scalarSourceOptions = sources.filter((source) => source.scalar).map((source) => ({
+		label: sourceLabelOf(source.key),
+		value: sourceOptionValue(source.key)
+	}));
+	const weightSourceOptions = sources.filter((source) => source.weights).map((source) => ({
+		label: sourceLabelOf(source.key),
+		value: sourceOptionValue(source.key)
+	}));
+	const customFnOptions = (props.functions ?? []).map((fn) => ({
+		label: fn,
+		value: fn
+	}));
+	const expression = useMemo(() => normalizeCalc(value, allowed), [value, allowed]);
+	const chain = useMemo(() => expression ? astToChain(expression) : void 0, [expression]);
+	const storedInvalid = expression === void 0 && value != null && value !== "";
+	const selfIndex = useMemo(() => {
+		const match = /^fields\.(\d+)\./.exec(path);
+		return match ? Number(match[1]) : Number.MAX_SAFE_INTEGER;
+	}, [path]);
+	const siblingsJson = useFormFields(([fields]) => JSON.stringify(siblingsFromData(reduceFieldsToValues(fields, true), selfIndex)));
+	const siblings = useMemo(() => JSON.parse(siblingsJson), [siblingsJson]);
+	const startOptions = [
+		{
+			label: t(keys.calcBuilderAnswer),
+			value: "ref"
+		},
+		{
+			label: t(keys.calcBuilderNumber),
+			value: "lit"
+		},
+		{
+			label: t(keys.calcBuilderWeights),
+			value: "weight"
+		},
+		{
+			label: t(keys.calcBuilderFunction),
+			value: "fn"
+		}
+	];
+	const startDescriptions = [
+		{
+			key: "ref",
+			label: t(keys.calcBuilderAnswer),
+			description: t(keys.calcBuilderFieldDescription)
+		},
+		{
+			key: "lit",
+			label: t(keys.calcBuilderNumber),
+			description: t(keys.calcBuilderNumberDescription)
+		},
+		{
+			key: "weight",
+			label: t(keys.calcBuilderWeights),
+			description: t(keys.calcBuilderWeightsDescription)
+		},
+		{
+			key: "fn",
+			label: t(keys.calcBuilderFunction),
+			description: t(keys.calcBuilderFunctionDescription)
+		}
+	];
+	const commitChain = (next) => {
+		if (!readOnly) setValue(chainToAst(next));
+	};
+	const clear = () => {
+		if (!readOnly) setValue(null);
+	};
+	const labelOf = (field) => field.trim() === "" ? "?" : siblings.labels[field] ?? field;
+	const idBase = `calc-${path.replace(/\./g, "__")}`;
+	const ctx = {
+		t,
+		siblings,
+		readOnly,
+		sourceLabelOf,
+		scalarSourceOptions,
+		weightSourceOptions,
+		customFnOptions
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: [
+			"field-type",
+			"fb-calc-builder",
+			showError && "error",
+			readOnly && "read-only"
+		].filter(Boolean).join(" "),
+		id: path ? `field-${path.replace(/\./g, "__")}` : void 0,
+		children: [/* @__PURE__ */ jsx(RenderCustomComponent, {
+			CustomComponent: Label,
+			Fallback: /* @__PURE__ */ jsx(FieldLabel, {
+				label,
+				path
+			})
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "field-type__wrap",
+			children: [
+				/* @__PURE__ */ jsx(RenderCustomComponent, {
+					CustomComponent: ErrorComponent,
+					Fallback: /* @__PURE__ */ jsx(FieldError, {
+						path,
+						showError
+					})
+				}),
+				chain ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ChainEditor, {
+					chain,
+					onChange: commitChain,
+					onEmptied: clear,
+					isRoot: true,
+					ctx,
+					idPrefix: idBase
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "fb-calc-finish",
+					children: [/* @__PURE__ */ jsx("label", {
+						className: "fb-calc-finish__label",
+						htmlFor: `${idBase}-finish`,
+						title: t(keys.calcBuilderThenApply),
+						children: t(keys.calcBuilderThenApply)
+					}), /* @__PURE__ */ jsx(ReactSelect, {
+						className: "fb-calc-finish__select",
+						inputId: `${idBase}-finish`,
+						options: UNARY_OPTIONS,
+						value: UNARY_OPTIONS.find((option) => option.value === chain.finish),
+						isClearable: !readOnly,
+						disabled: readOnly,
+						onChange: (selected) => {
+							const chosen = singleOption(selected);
+							commitChain({
+								...chain,
+								finish: chosen ? chosen.value : void 0
+							});
+						}
+					})]
+				})] }) : /* @__PURE__ */ jsxs("div", {
+					className: "fb-calc-builder__empty",
+					children: [
+						storedInvalid ? /* @__PURE__ */ jsx("p", {
+							className: "fb-calc-builder__warning",
+							children: t(keys.calcBuilderStoredInvalid)
+						}) : null,
+						/* @__PURE__ */ jsx("p", {
+							className: "fb-calc-builder__hint",
+							children: t(keys.calcBuilderAddExpression)
+						}),
+						/* @__PURE__ */ jsx("label", {
+							className: "fb-visually-hidden",
+							htmlFor: `${idBase}-seed`,
+							children: t(keys.calcBuilderStartWith)
+						}),
+						/* @__PURE__ */ jsx(ReactSelect, {
+							className: "fb-calc-builder__seed",
+							inputId: `${idBase}-seed`,
+							options: withSourceGroup(startOptions, scalarSourceOptions, t(keys.calcBuilderSourcesGroup)),
+							disabled: readOnly,
+							placeholder: t(keys.calcBuilderStartWith),
+							onChange: (selected) => {
+								const chosen = singleOption(selected);
+								if (!chosen || readOnly) return;
+								const sourceKey = sourceKeyOf(String(chosen.value));
+								setValue(sourceKey !== void 0 ? {
+									type: "source",
+									source: sourceKey
+								} : seedAst(chosen.value));
+							}
+						}),
+						/* @__PURE__ */ jsx("ul", {
+							className: "fb-calc-builder__kinds",
+							children: startDescriptions.map((entry) => /* @__PURE__ */ jsxs("li", { children: [
+								/* @__PURE__ */ jsx("span", {
+									className: "fb-calc-builder__kind-label",
+									children: entry.label
+								}),
+								" ",
+								entry.description
+							] }, entry.key))
+						})
+					]
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: "fb-calc-builder__preview",
+					"aria-live": "polite",
+					children: expression ? formatCalc(expression, labelOf, sourceLabelOf) : ""
+				})
+			]
+		})]
+	});
+};
+//#endregion
+export { CalcExpressionBuilder };
+
+//# sourceMappingURL=CalcExpressionBuilder.js.map