@10x-media/form-builder 0.1.0-beta.3 → 0.1.0-beta.4

package/dist/client/FlowBuilder.js

@@ -1,6 +1,11 @@
 "use client";
+import { keys } from "../translations/keys.js";
+import { resolveMessage } from "../validation/message.js";
 import { toStaticLabel } from "./toStaticLabel.js";
+import { useTranslation as useTranslation$1 } from "../translations/useTranslation.js";
 import { ConditionBuilder } from "./ConditionBuilder.js";
+import { stepLabel } from "../flow/stepLabel.js";
+import { assignFieldToStep, fieldHolders, removeFieldFromStep, unassignedFields } from "./flowAuthoring.js";
 import { reduceFieldsToValues } from "payload/shared";
 import { Button, CheckboxInput, Collapsible, FieldLabel, ReactSelect, TextInput, useField, useFormFields } from "@payloadcms/ui";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -12,11 +17,7 @@ import "./admin.css";
 const extractFieldNames = (data) => {
 	return (Array.isArray(data.fields) ? data.fields : []).map((row) => typeof row.name === "string" ? row.name.trim() : null).filter((name) => name !== null && name.length > 0);
 };
-const TransitionRow = ({ transition, stepIds, conditionTypes, isFirst, isLast, onChange, onRemove, onMoveUp, onMoveDown }) => {
-	const toOptions = stepIds.map((id) => ({
-		label: id,
-		value: id
-	}));
+const TransitionRow = ({ transition, stepOptions, conditionTypes, isFirst, isLast, onChange, onRemove, onMoveUp, onMoveDown }) => {
 	const handleGotoChange = (selected) => {
 		const chosen = Array.isArray(selected) ? selected[0] : selected;
 		if (chosen) onChange({
@@ -37,8 +38,8 @@ const TransitionRow = ({ transition, stepIds, conditionTypes, isFirst, isLast, o
 					/* @__PURE__ */ jsx("div", {
 						className: "fb-flow-transition__goto",
 						children: /* @__PURE__ */ jsx(ReactSelect, {
-							options: toOptions,
-							value: toOptions.find((o) => o.value === transition.to) ?? void 0,
+							options: stepOptions,
+							value: stepOptions.find((o) => o.value === transition.to) ?? void 0,
 							placeholder: "Select step…",
 							isClearable: false,
 							onChange: handleGotoChange
@@ -92,21 +93,19 @@ const TransitionRow = ({ transition, stepIds, conditionTypes, isFirst, isLast, o
 		]
 	});
 };
-const StepCard = ({ step, stepKey, stepIndex, stepCount, otherStepIds, fieldNames, conditionTypes, isExpanded, onToggle, onChange, onRemove, onMoveUp, onMoveDown, onAddAbove, onAddBelow }) => {
+const StepCard = ({ step, stepKey, stepIndex, stepCount, otherStepOptions, holders, stepLabels, fieldNames, conditionTypes, isExpanded, onToggle, onChange, onToggleField, onRemove, onMoveUp, onMoveDown, onAddAbove, onAddBelow }) => {
+	const { t } = useTranslation$1();
 	const nextOptions = [{
-		label: "— terminal —",
+		label: t(keys.flowNextTerminal),
 		value: ""
-	}, ...otherStepIds.map((id) => ({
-		label: id,
-		value: id
-	}))];
+	}, ...otherStepOptions];
 	const transitions = step.transitions ?? [];
 	const tKeysRef = useRef([]);
 	if (tKeysRef.current.length !== transitions.length) tKeysRef.current = transitions.map((_, i) => tKeysRef.current[i] ?? crypto.randomUUID());
 	const tKeys = tKeysRef.current;
 	const addTransition = () => {
-		const firstOtherStep = otherStepIds[0];
-		if (!firstOtherStep) return;
+		const firstOtherStep = otherStepOptions[0]?.value;
+		if (firstOtherStep === void 0) return;
 		tKeysRef.current = [...tKeys, crypto.randomUUID()];
 		onChange({
 			...step,
@@ -152,16 +151,17 @@ const StepCard = ({ step, stepKey, stepIndex, stepCount, otherStepIds, fieldName
 			next
 		});
 	};
+	const title = step.title?.trim() ?? "";
 	return /* @__PURE__ */ jsx(Collapsible, {
 		header: /* @__PURE__ */ jsxs("div", {
 			className: "fb-flow-step__header-content",
-			children: [/* @__PURE__ */ jsxs("span", {
+			children: [/* @__PURE__ */ jsx("span", {
 				className: "fb-flow-step__index",
-				children: ["Step ", stepIndex + 1]
-			}), /* @__PURE__ */ jsx("span", {
-				className: "fb-flow-step__id-preview",
-				children: step.id.length > 0 ? step.id : /* @__PURE__ */ jsx("em", { children: "no id" })
-			})]
+				children: resolveMessage(t(keys.flowStepFallbackTitle), { n: stepIndex + 1 })
+			}), title.length > 0 ? /* @__PURE__ */ jsx("span", {
+				className: "fb-flow-step__title",
+				children: title
+			}) : null]
 		}),
 		actions: /* @__PURE__ */ jsx(Popup, {
 			button: /* @__PURE__ */ jsx(MoreIcon, {}),
@@ -200,16 +200,6 @@ const StepCard = ({ step, stepKey, stepIndex, stepCount, otherStepIds, fieldName
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "fb-flow-step__body",
 			children: [
-				/* @__PURE__ */ jsx(TextInput, {
-					path: `fb-flow-step-${stepKey}-id`,
-					label: "Step ID",
-					value: step.id,
-					placeholder: "e.g. intro",
-					onChange: (e) => onChange({
-						...step,
-						id: e.target.value
-					})
-				}),
 				/* @__PURE__ */ jsx(TextInput, {
 					path: `fb-flow-step-${stepKey}-title`,
 					label: "Title",
@@ -227,17 +217,25 @@ const StepCard = ({ step, stepKey, stepIndex, stepCount, otherStepIds, fieldName
 						children: "No fields defined on the form yet."
 					}) : /* @__PURE__ */ jsx("div", {
 						className: "fb-flow-step__field-picker",
-						children: fieldNames.map((name) => /* @__PURE__ */ jsx(CheckboxInput, {
-							label: name,
-							checked: step.fields.includes(name),
-							onToggle: (e) => {
-								const fields = e.target.checked ? [...step.fields, name] : step.fields.filter((f) => f !== name);
-								onChange({
-									...step,
-									fields
-								});
-							}
-						}, name))
+						children: fieldNames.map((name) => {
+							const holder = holders.get(name);
+							const inOtherStep = holder !== void 0 && holder !== stepIndex;
+							return /* @__PURE__ */ jsxs("div", {
+								className: "fb-flow-step__field-option",
+								children: [/* @__PURE__ */ jsx(CheckboxInput, {
+									label: name,
+									checked: step.fields.includes(name) || inOtherStep,
+									readOnly: inOtherStep,
+									onToggle: (e) => {
+										if (inOtherStep) return;
+										onToggleField(name, e.target.checked);
+									}
+								}), inOtherStep ? /* @__PURE__ */ jsx("span", {
+									className: "fb-flow-step__field-hint",
+									children: resolveMessage(t(keys.flowFieldInStep), { step: stepLabels[holder] ?? "" })
+								}) : null]
+							}, name);
+						})
 					})]
 				}),
 				/* @__PURE__ */ jsxs("div", {
@@ -264,7 +262,7 @@ const StepCard = ({ step, stepKey, stepIndex, stepCount, otherStepIds, fieldName
 							if (tKey === void 0) return null;
 							return /* @__PURE__ */ jsx(TransitionRow, {
 								transition,
-								stepIds: otherStepIds,
+								stepOptions: otherStepOptions,
 								conditionTypes,
 								isFirst: tIndex === 0,
 								isLast: tIndex === transitions.length - 1,
@@ -291,15 +289,23 @@ const StepCard = ({ step, stepKey, stepIndex, stepCount, otherStepIds, fieldName
 };
 const FlowBuilder = (props) => {
 	const { setValue, value } = useField();
+	const { t } = useTranslation$1();
 	const label = toStaticLabel(props.field?.label ?? props.label);
 	const [expandedKeys, setExpandedKeys] = useState(/* @__PURE__ */ new Set());
 	const fieldNamesJson = useFormFields(([fields]) => JSON.stringify(extractFieldNames(reduceFieldsToValues(fields, true))));
 	const fieldNames = useMemo(() => JSON.parse(fieldNamesJson), [fieldNamesJson]);
 	const steps = value?.steps ?? [];
-	const allStepIds = steps.map((s) => s.id).filter((id) => id.length > 0);
+	const fallbackTitle = t(keys.flowStepFallbackTitle);
+	const stepLabels = steps.map((step, index) => stepLabel(step, index, fallbackTitle));
+	const stepOptions = steps.map((step, index) => ({
+		label: stepLabels[index] ?? "",
+		value: step.id
+	})).filter((option) => option.value.length > 0);
+	const holders = fieldHolders(steps);
+	const unassigned = unassignedFields(fieldNames, steps);
 	const keysRef = useRef([]);
 	if (keysRef.current.length !== steps.length) keysRef.current = steps.map((_, i) => keysRef.current[i] ?? crypto.randomUUID());
-	const keys = keysRef.current;
+	const stepKeys = keysRef.current;
 	const toggleExpanded = (key) => {
 		setExpandedKeys((prev) => {
 			const next = new Set(prev);
@@ -319,18 +325,26 @@ const FlowBuilder = (props) => {
 			id: crypto.randomUUID(),
 			fields: []
 		});
-		const nextKeys = [...keys];
+		const nextKeys = [...stepKeys];
 		nextKeys.splice(at, 0, key);
 		emit(nextSteps, nextKeys);
 		setExpandedKeys((prev) => new Set(prev).add(key));
 	};
 	const addStep = () => insertStep(steps.length);
 	const updateStep = (index, next) => {
-		emit(steps.map((s, i) => i === index ? next : s), keys);
+		emit(steps.map((s, i) => i === index ? next : s), stepKeys);
+	};
+	const toggleField = (stepIndex, name, checked) => {
+		emit(checked ? assignFieldToStep(steps, stepIndex, name) : removeFieldFromStep(steps, stepIndex, name), stepKeys);
+	};
+	const assignUnassignedField = (name, stepId) => {
+		const targetIndex = steps.findIndex((s) => s.id === stepId);
+		if (targetIndex === -1) return;
+		emit(assignFieldToStep(steps, targetIndex, name), stepKeys);
 	};
 	const removeStep = (index) => {
-		const removedKey = keys[index];
-		emit(steps.filter((_, i) => i !== index), keys.filter((_, i) => i !== index));
+		const removedKey = stepKeys[index];
+		emit(steps.filter((_, i) => i !== index), stepKeys.filter((_, i) => i !== index));
 		if (removedKey !== void 0) setExpandedKeys((prev) => {
 			const next = new Set(prev);
 			next.delete(removedKey);
@@ -342,7 +356,7 @@ const FlowBuilder = (props) => {
 		const [movedStep] = nextSteps.splice(from, 1);
 		if (movedStep === void 0) return;
 		nextSteps.splice(to, 0, movedStep);
-		const nextKeys = [...keys];
+		const nextKeys = [...stepKeys];
 		const [movedKey] = nextKeys.splice(from, 1);
 		if (movedKey !== void 0) nextKeys.splice(to, 0, movedKey);
 		emit(nextSteps, nextKeys);
@@ -357,26 +371,33 @@ const FlowBuilder = (props) => {
 					children: /* @__PURE__ */ jsx("h3", { children: typeof label === "string" ? label : "Flow" })
 				})
 			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "fb-flow-builder__description",
+				children: t(keys.flowDescription)
+			}),
 			steps.length === 0 ? /* @__PURE__ */ jsx("p", {
 				className: "fb-flow-builder__hint",
 				children: "No steps defined. Add at least two steps to enable multi-page flow routing."
 			}) : /* @__PURE__ */ jsx("div", {
 				className: "fb-flow-builder__steps",
 				children: steps.map((step, index) => {
-					const key = keys[index];
+					const key = stepKeys[index];
 					if (key === void 0) return null;
-					const otherStepIds = allStepIds.filter((id) => id !== step.id);
+					const otherStepOptions = stepOptions.filter((option) => option.value !== step.id);
 					return /* @__PURE__ */ jsx(StepCard, {
 						stepKey: key,
 						step,
 						stepIndex: index,
 						stepCount: steps.length,
-						otherStepIds,
+						otherStepOptions,
+						holders,
+						stepLabels,
 						fieldNames,
 						conditionTypes: props.conditionTypes,
 						isExpanded: expandedKeys.has(key),
 						onToggle: () => toggleExpanded(key),
 						onChange: (next) => updateStep(index, next),
+						onToggleField: (name, checked) => toggleField(index, name, checked),
 						onRemove: () => removeStep(index),
 						onMoveUp: () => moveStep(index, index - 1),
 						onMoveDown: () => moveStep(index, index + 1),
@@ -385,6 +406,30 @@ const FlowBuilder = (props) => {
 					}, key);
 				})
 			}),
+			steps.length > 0 && unassigned.length > 0 ? /* @__PURE__ */ jsxs("div", {
+				className: "fb-flow-unassigned",
+				children: [/* @__PURE__ */ jsx(FieldLabel, { label: t(keys.flowUnassigned) }), /* @__PURE__ */ jsx("div", {
+					className: "fb-flow-unassigned__rows",
+					children: unassigned.map((name) => /* @__PURE__ */ jsxs("div", {
+						className: "fb-flow-unassigned__row",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "fb-flow-unassigned__name",
+							children: name
+						}), /* @__PURE__ */ jsx("div", {
+							className: "fb-flow-unassigned__select",
+							children: /* @__PURE__ */ jsx(ReactSelect, {
+								options: stepOptions,
+								placeholder: t(keys.flowAssignToStep),
+								isClearable: false,
+								onChange: (selected) => {
+									const chosen = Array.isArray(selected) ? selected[0] : selected;
+									if (chosen) assignUnassignedField(name, chosen.value);
+								}
+							})
+						})]
+					}, name))
+				})]
+			}) : null,
 			/* @__PURE__ */ jsx("div", {
 				className: "fb-flow-builder__actions",
 				children: /* @__PURE__ */ jsx(Button, {

package/dist/client/FlowBuilder.js.map

@@ -1 +1 @@
-{"version":3,"file":"FlowBuilder.js","names":[],"sources":["../../src/client/FlowBuilder.tsx"],"sourcesContent":["'use client'\n\nimport {\n\tButton,\n\tCheckboxInput,\n\tCollapsible,\n\tFieldLabel,\n\tReactSelect,\n\ttype ReactSelectOption,\n\tTextInput,\n\tuseField,\n\tuseFormFields,\n} from '@payloadcms/ui'\nimport { Popup, PopupList } from '@payloadcms/ui/elements/Popup'\nimport { MoreIcon } from '@payloadcms/ui/icons/More'\nimport { reduceFieldsToValues } from 'payload/shared'\nimport type { ChangeEvent } from 'react'\nimport { useMemo, useRef, useState } from 'react'\nimport type { ConditionFieldType } from '../conditions/fieldTypes'\nimport type { FlowStep, FlowTransition, FormFlow } from '../flow/types'\nimport { ConditionBuilder } from './ConditionBuilder'\nimport type { FieldRow } from './synthesizeClientField'\nimport { toStaticLabel } from './toStaticLabel'\nimport './admin.css'\n\nexport type FlowBuilderProps = {\n\tpath?: string\n\tfield?: { label?: unknown }\n\tlabel?: unknown\n\tconditionTypes: Record<string, ConditionFieldType>\n}\n\nconst extractFieldNames = (data: Record<string, unknown>): string[] => {\n\tconst rows = Array.isArray(data.fields) ? (data.fields as FieldRow[]) : []\n\treturn rows\n\t\t.map((row) => (typeof row.name === 'string' ? row.name.trim() : null))\n\t\t.filter((name): name is string => name !== null && name.length > 0)\n}\n\ntype TransitionRowProps = {\n\ttransition: FlowTransition\n\tstepIds: string[]\n\tconditionTypes: Record<string, ConditionFieldType>\n\tisFirst: boolean\n\tisLast: boolean\n\tonChange: (next: FlowTransition) => void\n\tonRemove: () => void\n\tonMoveUp: () => void\n\tonMoveDown: () => void\n}\n\nconst TransitionRow = ({\n\ttransition,\n\tstepIds,\n\tconditionTypes,\n\tisFirst,\n\tisLast,\n\tonChange,\n\tonRemove,\n\tonMoveUp,\n\tonMoveDown,\n}: TransitionRowProps) => {\n\tconst toOptions: ReactSelectOption[] = stepIds.map((id) => ({ label: id, value: id }))\n\n\tconst handleGotoChange = (selected: ReactSelectOption | ReactSelectOption[]) => {\n\t\tconst chosen = Array.isArray(selected) ? selected[0] : selected\n\t\tif (chosen) onChange({ ...transition, to: chosen.value as string })\n\t}\n\n\treturn (\n\t\t<div className=\"fb-flow-transition\">\n\t\t\t<div className=\"fb-flow-transition__header\">\n\t\t\t\t<span className=\"fb-flow-transition__label\">go to</span>\n\t\t\t\t<div className=\"fb-flow-transition__goto\">\n\t\t\t\t\t<ReactSelect\n\t\t\t\t\t\toptions={toOptions}\n\t\t\t\t\t\tvalue={toOptions.find((o) => o.value === transition.to) ?? undefined}\n\t\t\t\t\t\tplaceholder=\"Select step…\"\n\t\t\t\t\t\tisClearable={false}\n\t\t\t\t\t\tonChange={handleGotoChange}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t\t<div className=\"fb-flow-transition__actions\">\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tclassName=\"fb-flow__move-btn\"\n\t\t\t\t\t\tonClick={onMoveUp}\n\t\t\t\t\t\tdisabled={isFirst}\n\t\t\t\t\t\taria-label=\"Move transition up\"\n\t\t\t\t\t>\n\t\t\t\t\t\t↑\n\t\t\t\t\t</button>\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tclassName=\"fb-flow__move-btn\"\n\t\t\t\t\t\tonClick={onMoveDown}\n\t\t\t\t\t\tdisabled={isLast}\n\t\t\t\t\t\taria-label=\"Move transition down\"\n\t\t\t\t\t>\n\t\t\t\t\t\t↓\n\t\t\t\t\t</button>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tbuttonStyle=\"icon-label\"\n\t\t\t\t\t\ticon=\"x\"\n\t\t\t\t\t\tonClick={onRemove}\n\t\t\t\t\t\tmargin={false}\n\t\t\t\t\t\taria-label=\"Remove transition\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<span className=\"fb-flow-transition__when-label\">when</span>\n\t\t\t<div className=\"fb-flow-transition__condition\">\n\t\t\t\t<ConditionBuilder\n\t\t\t\t\tvalue={transition.when}\n\t\t\t\t\tonChange={(when) => onChange({ ...transition, when })}\n\t\t\t\t\tconditionTypes={conditionTypes}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</div>\n\t)\n}\n\ntype StepCardProps = {\n\tstep: FlowStep\n\tstepKey: string\n\tstepIndex: number\n\tstepCount: number\n\totherStepIds: string[]\n\tfieldNames: string[]\n\tconditionTypes: Record<string, ConditionFieldType>\n\tisExpanded: boolean\n\tonToggle: () => void\n\tonChange: (next: FlowStep) => void\n\tonRemove: () => void\n\tonMoveUp: () => void\n\tonMoveDown: () => void\n\tonAddAbove: () => void\n\tonAddBelow: () => void\n}\n\nconst StepCard = ({\n\tstep,\n\tstepKey,\n\tstepIndex,\n\tstepCount,\n\totherStepIds,\n\tfieldNames,\n\tconditionTypes,\n\tisExpanded,\n\tonToggle,\n\tonChange,\n\tonRemove,\n\tonMoveUp,\n\tonMoveDown,\n\tonAddAbove,\n\tonAddBelow,\n}: StepCardProps) => {\n\tconst nextOptions: ReactSelectOption[] = [\n\t\t{ label: '— terminal —', value: '' },\n\t\t...otherStepIds.map((id) => ({ label: id, value: id })),\n\t]\n\n\tconst transitions = step.transitions ?? []\n\n\t// Stable per-transition keys, mirroring the step-level scheme so transition reorder/remove\n\t// reconciles by identity rather than array position.\n\tconst tKeysRef = useRef<string[]>([])\n\tif (tKeysRef.current.length !== transitions.length) {\n\t\ttKeysRef.current = transitions.map((_, i) => tKeysRef.current[i] ?? crypto.randomUUID())\n\t}\n\tconst tKeys = tKeysRef.current\n\n\tconst addTransition = () => {\n\t\tconst firstOtherStep = otherStepIds[0]\n\t\tif (!firstOtherStep) return\n\t\ttKeysRef.current = [...tKeys, crypto.randomUUID()]\n\t\tonChange({\n\t\t\t...step,\n\t\t\ttransitions: [...transitions, { when: {}, to: firstOtherStep }],\n\t\t})\n\t}\n\n\tconst updateTransition = (index: number, next: FlowTransition) => {\n\t\tconst updated = [...transitions]\n\t\tupdated[index] = next\n\t\tonChange({ ...step, transitions: updated })\n\t}\n\n\tconst removeTransition = (index: number) => {\n\t\ttKeysRef.current = tKeys.filter((_, i) => i !== index)\n\t\tconst updated = transitions.filter((_, i) => i !== index)\n\t\tonChange({ ...step, transitions: updated.length > 0 ? updated : undefined })\n\t}\n\n\tconst moveTransition = (from: number, to: number) => {\n\t\tconst updated = [...transitions]\n\t\tconst [item] = updated.splice(from, 1)\n\t\tif (item !== undefined) updated.splice(to, 0, item)\n\t\tconst nextKeys = [...tKeys]\n\t\tconst [movedKey] = nextKeys.splice(from, 1)\n\t\tif (movedKey !== undefined) nextKeys.splice(to, 0, movedKey)\n\t\ttKeysRef.current = nextKeys\n\t\tonChange({ ...step, transitions: updated })\n\t}\n\n\tconst handleNextChange = (selected: ReactSelectOption | ReactSelectOption[]) => {\n\t\tconst chosen = Array.isArray(selected) ? selected[0] : selected\n\t\tconst next = (chosen?.value as string | undefined) || undefined\n\t\tonChange({ ...step, next })\n\t}\n\n\tconst stepHeader = (\n\t\t<div className=\"fb-flow-step__header-content\">\n\t\t\t<span className=\"fb-flow-step__index\">Step {stepIndex + 1}</span>\n\t\t\t<span className=\"fb-flow-step__id-preview\">\n\t\t\t\t{step.id.length > 0 ? step.id : <em>no id</em>}\n\t\t\t</span>\n\t\t</div>\n\t)\n\n\treturn (\n\t\t<Collapsible\n\t\t\theader={stepHeader}\n\t\t\tactions={\n\t\t\t\t<Popup\n\t\t\t\t\tbutton={<MoreIcon />}\n\t\t\t\t\tbuttonType=\"default\"\n\t\t\t\t\thorizontalAlign=\"right\"\n\t\t\t\t\tsize=\"fit-content\"\n\t\t\t\t\tverticalAlign=\"bottom\"\n\t\t\t\t>\n\t\t\t\t\t<PopupList.ButtonGroup>\n\t\t\t\t\t\t<PopupList.Button onClick={onAddAbove}>Add above</PopupList.Button>\n\t\t\t\t\t\t<PopupList.Button onClick={onAddBelow}>Add below</PopupList.Button>\n\t\t\t\t\t\t<PopupList.Button onClick={onMoveUp} disabled={stepIndex === 0}>\n\t\t\t\t\t\t\tMove up\n\t\t\t\t\t\t</PopupList.Button>\n\t\t\t\t\t\t<PopupList.Button onClick={onMoveDown} disabled={stepIndex === stepCount - 1}>\n\t\t\t\t\t\t\tMove down\n\t\t\t\t\t\t</PopupList.Button>\n\t\t\t\t\t\t<PopupList.Button onClick={onRemove}>Remove</PopupList.Button>\n\t\t\t\t\t</PopupList.ButtonGroup>\n\t\t\t\t</Popup>\n\t\t\t}\n\t\t\tisCollapsed={!isExpanded}\n\t\t\tonToggle={() => onToggle()}\n\t\t\tclassName=\"fb-flow-step\"\n\t\t>\n\t\t\t<div className=\"fb-flow-step__body\">\n\t\t\t\t<TextInput\n\t\t\t\t\tpath={`fb-flow-step-${stepKey}-id`}\n\t\t\t\t\tlabel=\"Step ID\"\n\t\t\t\t\tvalue={step.id}\n\t\t\t\t\tplaceholder=\"e.g. intro\"\n\t\t\t\t\tonChange={(e: ChangeEvent<HTMLInputElement>) => onChange({ ...step, id: e.target.value })}\n\t\t\t\t/>\n\n\t\t\t\t<TextInput\n\t\t\t\t\tpath={`fb-flow-step-${stepKey}-title`}\n\t\t\t\t\tlabel=\"Title\"\n\t\t\t\t\tvalue={step.title ?? ''}\n\t\t\t\t\tplaceholder=\"Optional display title\"\n\t\t\t\t\tonChange={(e: ChangeEvent<HTMLInputElement>) =>\n\t\t\t\t\t\tonChange({ ...step, title: e.target.value.length > 0 ? e.target.value : undefined })\n\t\t\t\t\t}\n\t\t\t\t/>\n\n\t\t\t\t<div className=\"fb-flow-step__row\">\n\t\t\t\t\t<FieldLabel label=\"Fields\" />\n\t\t\t\t\t{fieldNames.length === 0 ? (\n\t\t\t\t\t\t<p className=\"fb-flow-step__hint\">No fields defined on the form yet.</p>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<div className=\"fb-flow-step__field-picker\">\n\t\t\t\t\t\t\t{fieldNames.map((name) => (\n\t\t\t\t\t\t\t\t<CheckboxInput\n\t\t\t\t\t\t\t\t\tkey={name}\n\t\t\t\t\t\t\t\t\tlabel={name}\n\t\t\t\t\t\t\t\t\tchecked={step.fields.includes(name)}\n\t\t\t\t\t\t\t\t\tonToggle={(e) => {\n\t\t\t\t\t\t\t\t\t\tconst fields = e.target.checked\n\t\t\t\t\t\t\t\t\t\t\t? [...step.fields, name]\n\t\t\t\t\t\t\t\t\t\t\t: step.fields.filter((f) => f !== name)\n\t\t\t\t\t\t\t\t\t\tonChange({ ...step, fields })\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\n\t\t\t\t<div className=\"fb-flow-step__row\">\n\t\t\t\t\t<FieldLabel label=\"Default next\" />\n\t\t\t\t\t<ReactSelect\n\t\t\t\t\t\toptions={nextOptions}\n\t\t\t\t\t\tvalue={\n\t\t\t\t\t\t\tstep.next\n\t\t\t\t\t\t\t\t? (nextOptions.find((o) => o.value === step.next) ?? undefined)\n\t\t\t\t\t\t\t\t: (nextOptions[0] ?? undefined)\n\t\t\t\t\t\t}\n\t\t\t\t\t\tisClearable={false}\n\t\t\t\t\t\tonChange={handleNextChange}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\n\t\t\t\t<div className=\"fb-flow-step__transitions\">\n\t\t\t\t\t<div className=\"fb-flow-step__transitions-header\">\n\t\t\t\t\t\t<FieldLabel label=\"Conditional transitions\" />\n\t\t\t\t\t\t<span className=\"fb-flow-step__hint\">(first match wins)</span>\n\t\t\t\t\t</div>\n\t\t\t\t\t{transitions.map((transition, tIndex) => {\n\t\t\t\t\t\tconst tKey = tKeys[tIndex]\n\t\t\t\t\t\tif (tKey === undefined) return null\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<TransitionRow\n\t\t\t\t\t\t\t\tkey={tKey}\n\t\t\t\t\t\t\t\ttransition={transition}\n\t\t\t\t\t\t\t\tstepIds={otherStepIds}\n\t\t\t\t\t\t\t\tconditionTypes={conditionTypes}\n\t\t\t\t\t\t\t\tisFirst={tIndex === 0}\n\t\t\t\t\t\t\t\tisLast={tIndex === transitions.length - 1}\n\t\t\t\t\t\t\t\tonChange={(next) => updateTransition(tIndex, next)}\n\t\t\t\t\t\t\t\tonRemove={() => removeTransition(tIndex)}\n\t\t\t\t\t\t\t\tonMoveUp={() => moveTransition(tIndex, tIndex - 1)}\n\t\t\t\t\t\t\t\tonMoveDown={() => moveTransition(tIndex, tIndex + 1)}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)\n\t\t\t\t\t})}\n\t\t\t\t\t<Button\n\t\t\t\t\t\tbuttonStyle=\"icon-label\"\n\t\t\t\t\t\ticon=\"plus\"\n\t\t\t\t\t\ticonStyle=\"with-border\"\n\t\t\t\t\t\ticonPosition=\"left\"\n\t\t\t\t\t\tonClick={addTransition}\n\t\t\t\t\t\tmargin={false}\n\t\t\t\t\t>\n\t\t\t\t\t\tAdd transition\n\t\t\t\t\t</Button>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</Collapsible>\n\t)\n}\n\nexport const FlowBuilder = (props: FlowBuilderProps) => {\n\tconst { setValue, value } = useField<FormFlow | undefined>()\n\tconst label = toStaticLabel(props.field?.label ?? props.label)\n\tconst [expandedKeys, setExpandedKeys] = useState<Set<string>>(new Set())\n\n\tconst fieldNamesJson = useFormFields(([fields]) =>\n\t\tJSON.stringify(extractFieldNames(reduceFieldsToValues(fields, true) as Record<string, unknown>))\n\t)\n\tconst fieldNames = useMemo(() => JSON.parse(fieldNamesJson) as string[], [fieldNamesJson])\n\n\tconst steps = value?.steps ?? []\n\tconst allStepIds = steps.map((s) => s.id).filter((id) => id.length > 0)\n\n\t// Stable per-step keys, decoupled from the user-editable step.id. Reorder/insert/remove\n\t// reconcile by identity so the focused Step ID input and each step's expand state stay with\n\t// their step instead of jumping to whichever step now sits at that array position.\n\tconst keysRef = useRef<string[]>([])\n\tif (keysRef.current.length !== steps.length) {\n\t\tkeysRef.current = steps.map((_, i) => keysRef.current[i] ?? crypto.randomUUID())\n\t}\n\tconst keys = keysRef.current\n\n\tconst toggleExpanded = (key: string) => {\n\t\tsetExpandedKeys((prev) => {\n\t\t\tconst next = new Set(prev)\n\t\t\tif (next.has(key)) next.delete(key)\n\t\t\telse next.add(key)\n\t\t\treturn next\n\t\t})\n\t}\n\n\tconst emit = (nextSteps: FlowStep[], nextKeys: string[]) => {\n\t\tkeysRef.current = nextKeys\n\t\tsetValue({ steps: nextSteps } as FormFlow)\n\t}\n\n\tconst insertStep = (at: number) => {\n\t\tconst key = crypto.randomUUID()\n\t\tconst nextSteps = [...steps]\n\t\tnextSteps.splice(at, 0, { id: crypto.randomUUID(), fields: [] })\n\t\tconst nextKeys = [...keys]\n\t\tnextKeys.splice(at, 0, key)\n\t\temit(nextSteps, nextKeys)\n\t\tsetExpandedKeys((prev) => new Set(prev).add(key))\n\t}\n\n\tconst addStep = () => insertStep(steps.length)\n\n\tconst updateStep = (index: number, next: FlowStep) => {\n\t\temit(\n\t\t\tsteps.map((s, i) => (i === index ? next : s)),\n\t\t\tkeys\n\t\t)\n\t}\n\n\tconst removeStep = (index: number) => {\n\t\tconst removedKey = keys[index]\n\t\temit(\n\t\t\tsteps.filter((_, i) => i !== index),\n\t\t\tkeys.filter((_, i) => i !== index)\n\t\t)\n\t\tif (removedKey !== undefined) {\n\t\t\tsetExpandedKeys((prev) => {\n\t\t\t\tconst next = new Set(prev)\n\t\t\t\tnext.delete(removedKey)\n\t\t\t\treturn next\n\t\t\t})\n\t\t}\n\t}\n\n\tconst moveStep = (from: number, to: number) => {\n\t\tconst nextSteps = [...steps]\n\t\tconst [movedStep] = nextSteps.splice(from, 1)\n\t\tif (movedStep === undefined) return\n\t\tnextSteps.splice(to, 0, movedStep)\n\t\tconst nextKeys = [...keys]\n\t\tconst [movedKey] = nextKeys.splice(from, 1)\n\t\tif (movedKey !== undefined) nextKeys.splice(to, 0, movedKey)\n\t\temit(nextSteps, nextKeys)\n\t}\n\n\treturn (\n\t\t<div className=\"field-type fb-flow-builder\">\n\t\t\t<div className=\"blocks-field__header\">\n\t\t\t\t<div className=\"blocks-field__header-wrap\">\n\t\t\t\t\t<h3>{typeof label === 'string' ? label : 'Flow'}</h3>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t{steps.length === 0 ? (\n\t\t\t\t<p className=\"fb-flow-builder__hint\">\n\t\t\t\t\tNo steps defined. Add at least two steps to enable multi-page flow routing.\n\t\t\t\t</p>\n\t\t\t) : (\n\t\t\t\t<div className=\"fb-flow-builder__steps\">\n\t\t\t\t\t{steps.map((step, index) => {\n\t\t\t\t\t\tconst key = keys[index]\n\t\t\t\t\t\tif (key === undefined) return null\n\t\t\t\t\t\tconst otherStepIds = allStepIds.filter((id) => id !== step.id)\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<StepCard\n\t\t\t\t\t\t\t\tkey={key}\n\t\t\t\t\t\t\t\tstepKey={key}\n\t\t\t\t\t\t\t\tstep={step}\n\t\t\t\t\t\t\t\tstepIndex={index}\n\t\t\t\t\t\t\t\tstepCount={steps.length}\n\t\t\t\t\t\t\t\totherStepIds={otherStepIds}\n\t\t\t\t\t\t\t\tfieldNames={fieldNames}\n\t\t\t\t\t\t\t\tconditionTypes={props.conditionTypes}\n\t\t\t\t\t\t\t\tisExpanded={expandedKeys.has(key)}\n\t\t\t\t\t\t\t\tonToggle={() => toggleExpanded(key)}\n\t\t\t\t\t\t\t\tonChange={(next) => updateStep(index, next)}\n\t\t\t\t\t\t\t\tonRemove={() => removeStep(index)}\n\t\t\t\t\t\t\t\tonMoveUp={() => moveStep(index, index - 1)}\n\t\t\t\t\t\t\t\tonMoveDown={() => moveStep(index, index + 1)}\n\t\t\t\t\t\t\t\tonAddAbove={() => insertStep(index)}\n\t\t\t\t\t\t\t\tonAddBelow={() => insertStep(index + 1)}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)\n\t\t\t\t\t})}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t<div className=\"fb-flow-builder__actions\">\n\t\t\t\t<Button\n\t\t\t\t\tbuttonStyle=\"icon-label\"\n\t\t\t\t\ticon=\"plus\"\n\t\t\t\t\ticonStyle=\"with-border\"\n\t\t\t\t\ticonPosition=\"left\"\n\t\t\t\t\tonClick={addStep}\n\t\t\t\t\tmargin={false}\n\t\t\t\t>\n\t\t\t\t\tAdd step\n\t\t\t\t</Button>\n\t\t\t</div>\n\t\t</div>\n\t)\n}\n"],"mappings":"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"}
+{"version":3,"file":"FlowBuilder.js","names":["useTranslation"],"sources":["../../src/client/FlowBuilder.tsx"],"sourcesContent":["'use client'\n\nimport {\n\tButton,\n\tCheckboxInput,\n\tCollapsible,\n\tFieldLabel,\n\tReactSelect,\n\ttype ReactSelectOption,\n\tTextInput,\n\tuseField,\n\tuseFormFields,\n} from '@payloadcms/ui'\nimport { Popup, PopupList } from '@payloadcms/ui/elements/Popup'\nimport { MoreIcon } from '@payloadcms/ui/icons/More'\nimport { reduceFieldsToValues } from 'payload/shared'\nimport type { ChangeEvent } from 'react'\nimport { useMemo, useRef, useState } from 'react'\nimport type { ConditionFieldType } from '../conditions/fieldTypes'\nimport type { FlowStep, FlowTransition, FormFlow } from '../flow/types'\nimport { keys } from '../translations/keys'\nimport { useTranslation } from '../translations/useTranslation'\nimport { resolveMessage } from '../validation/message'\nimport { ConditionBuilder } from './ConditionBuilder'\nimport {\n\tassignFieldToStep,\n\tfieldHolders,\n\tremoveFieldFromStep,\n\tstepLabel,\n\tunassignedFields,\n} from './flowAuthoring'\nimport type { FieldRow } from './synthesizeClientField'\nimport { toStaticLabel } from './toStaticLabel'\nimport './admin.css'\n\nexport type FlowBuilderProps = {\n\tpath?: string\n\tfield?: { label?: unknown }\n\tlabel?: unknown\n\tconditionTypes: Record<string, ConditionFieldType>\n}\n\nconst extractFieldNames = (data: Record<string, unknown>): string[] => {\n\tconst rows = Array.isArray(data.fields) ? (data.fields as FieldRow[]) : []\n\treturn rows\n\t\t.map((row) => (typeof row.name === 'string' ? row.name.trim() : null))\n\t\t.filter((name): name is string => name !== null && name.length > 0)\n}\n\ntype TransitionRowProps = {\n\ttransition: FlowTransition\n\tstepOptions: ReactSelectOption[]\n\tconditionTypes: Record<string, ConditionFieldType>\n\tisFirst: boolean\n\tisLast: boolean\n\tonChange: (next: FlowTransition) => void\n\tonRemove: () => void\n\tonMoveUp: () => void\n\tonMoveDown: () => void\n}\n\nconst TransitionRow = ({\n\ttransition,\n\tstepOptions,\n\tconditionTypes,\n\tisFirst,\n\tisLast,\n\tonChange,\n\tonRemove,\n\tonMoveUp,\n\tonMoveDown,\n}: TransitionRowProps) => {\n\tconst handleGotoChange = (selected: ReactSelectOption | ReactSelectOption[]) => {\n\t\tconst chosen = Array.isArray(selected) ? selected[0] : selected\n\t\tif (chosen) onChange({ ...transition, to: chosen.value as string })\n\t}\n\n\treturn (\n\t\t<div className=\"fb-flow-transition\">\n\t\t\t<div className=\"fb-flow-transition__header\">\n\t\t\t\t<span className=\"fb-flow-transition__label\">go to</span>\n\t\t\t\t<div className=\"fb-flow-transition__goto\">\n\t\t\t\t\t<ReactSelect\n\t\t\t\t\t\toptions={stepOptions}\n\t\t\t\t\t\tvalue={stepOptions.find((o) => o.value === transition.to) ?? undefined}\n\t\t\t\t\t\tplaceholder=\"Select step…\"\n\t\t\t\t\t\tisClearable={false}\n\t\t\t\t\t\tonChange={handleGotoChange}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t\t<div className=\"fb-flow-transition__actions\">\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tclassName=\"fb-flow__move-btn\"\n\t\t\t\t\t\tonClick={onMoveUp}\n\t\t\t\t\t\tdisabled={isFirst}\n\t\t\t\t\t\taria-label=\"Move transition up\"\n\t\t\t\t\t>\n\t\t\t\t\t\t↑\n\t\t\t\t\t</button>\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tclassName=\"fb-flow__move-btn\"\n\t\t\t\t\t\tonClick={onMoveDown}\n\t\t\t\t\t\tdisabled={isLast}\n\t\t\t\t\t\taria-label=\"Move transition down\"\n\t\t\t\t\t>\n\t\t\t\t\t\t↓\n\t\t\t\t\t</button>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tbuttonStyle=\"icon-label\"\n\t\t\t\t\t\ticon=\"x\"\n\t\t\t\t\t\tonClick={onRemove}\n\t\t\t\t\t\tmargin={false}\n\t\t\t\t\t\taria-label=\"Remove transition\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<span className=\"fb-flow-transition__when-label\">when</span>\n\t\t\t<div className=\"fb-flow-transition__condition\">\n\t\t\t\t<ConditionBuilder\n\t\t\t\t\tvalue={transition.when}\n\t\t\t\t\tonChange={(when) => onChange({ ...transition, when })}\n\t\t\t\t\tconditionTypes={conditionTypes}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</div>\n\t)\n}\n\ntype StepCardProps = {\n\tstep: FlowStep\n\tstepKey: string\n\tstepIndex: number\n\tstepCount: number\n\totherStepOptions: ReactSelectOption[]\n\tholders: Map<string, number>\n\tstepLabels: string[]\n\tfieldNames: string[]\n\tconditionTypes: Record<string, ConditionFieldType>\n\tisExpanded: boolean\n\tonToggle: () => void\n\tonChange: (next: FlowStep) => void\n\tonToggleField: (name: string, checked: boolean) => void\n\tonRemove: () => void\n\tonMoveUp: () => void\n\tonMoveDown: () => void\n\tonAddAbove: () => void\n\tonAddBelow: () => void\n}\n\nconst StepCard = ({\n\tstep,\n\tstepKey,\n\tstepIndex,\n\tstepCount,\n\totherStepOptions,\n\tholders,\n\tstepLabels,\n\tfieldNames,\n\tconditionTypes,\n\tisExpanded,\n\tonToggle,\n\tonChange,\n\tonToggleField,\n\tonRemove,\n\tonMoveUp,\n\tonMoveDown,\n\tonAddAbove,\n\tonAddBelow,\n}: StepCardProps) => {\n\tconst { t } = useTranslation()\n\n\tconst nextOptions: ReactSelectOption[] = [\n\t\t{ label: t(keys.flowNextTerminal), value: '' },\n\t\t...otherStepOptions,\n\t]\n\n\tconst transitions = step.transitions ?? []\n\n\t// Stable per-transition keys, mirroring the step-level scheme so transition reorder/remove\n\t// reconciles by identity rather than array position.\n\tconst tKeysRef = useRef<string[]>([])\n\tif (tKeysRef.current.length !== transitions.length) {\n\t\ttKeysRef.current = transitions.map((_, i) => tKeysRef.current[i] ?? crypto.randomUUID())\n\t}\n\tconst tKeys = tKeysRef.current\n\n\tconst addTransition = () => {\n\t\tconst firstOtherStep = otherStepOptions[0]?.value as string | undefined\n\t\tif (firstOtherStep === undefined) return\n\t\ttKeysRef.current = [...tKeys, crypto.randomUUID()]\n\t\tonChange({\n\t\t\t...step,\n\t\t\ttransitions: [...transitions, { when: {}, to: firstOtherStep }],\n\t\t})\n\t}\n\n\tconst updateTransition = (index: number, next: FlowTransition) => {\n\t\tconst updated = [...transitions]\n\t\tupdated[index] = next\n\t\tonChange({ ...step, transitions: updated })\n\t}\n\n\tconst removeTransition = (index: number) => {\n\t\ttKeysRef.current = tKeys.filter((_, i) => i !== index)\n\t\tconst updated = transitions.filter((_, i) => i !== index)\n\t\tonChange({ ...step, transitions: updated.length > 0 ? updated : undefined })\n\t}\n\n\tconst moveTransition = (from: number, to: number) => {\n\t\tconst updated = [...transitions]\n\t\tconst [item] = updated.splice(from, 1)\n\t\tif (item !== undefined) updated.splice(to, 0, item)\n\t\tconst nextKeys = [...tKeys]\n\t\tconst [movedKey] = nextKeys.splice(from, 1)\n\t\tif (movedKey !== undefined) nextKeys.splice(to, 0, movedKey)\n\t\ttKeysRef.current = nextKeys\n\t\tonChange({ ...step, transitions: updated })\n\t}\n\n\tconst handleNextChange = (selected: ReactSelectOption | ReactSelectOption[]) => {\n\t\tconst chosen = Array.isArray(selected) ? selected[0] : selected\n\t\tconst next = (chosen?.value as string | undefined) || undefined\n\t\tonChange({ ...step, next })\n\t}\n\n\tconst title = step.title?.trim() ?? ''\n\n\tconst stepHeader = (\n\t\t<div className=\"fb-flow-step__header-content\">\n\t\t\t<span className=\"fb-flow-step__index\">\n\t\t\t\t{resolveMessage(t(keys.flowStepFallbackTitle), { n: stepIndex + 1 })}\n\t\t\t</span>\n\t\t\t{title.length > 0 ? <span className=\"fb-flow-step__title\">{title}</span> : null}\n\t\t</div>\n\t)\n\n\treturn (\n\t\t<Collapsible\n\t\t\theader={stepHeader}\n\t\t\tactions={\n\t\t\t\t<Popup\n\t\t\t\t\tbutton={<MoreIcon />}\n\t\t\t\t\tbuttonType=\"default\"\n\t\t\t\t\thorizontalAlign=\"right\"\n\t\t\t\t\tsize=\"fit-content\"\n\t\t\t\t\tverticalAlign=\"bottom\"\n\t\t\t\t>\n\t\t\t\t\t<PopupList.ButtonGroup>\n\t\t\t\t\t\t<PopupList.Button onClick={onAddAbove}>Add above</PopupList.Button>\n\t\t\t\t\t\t<PopupList.Button onClick={onAddBelow}>Add below</PopupList.Button>\n\t\t\t\t\t\t<PopupList.Button onClick={onMoveUp} disabled={stepIndex === 0}>\n\t\t\t\t\t\t\tMove up\n\t\t\t\t\t\t</PopupList.Button>\n\t\t\t\t\t\t<PopupList.Button onClick={onMoveDown} disabled={stepIndex === stepCount - 1}>\n\t\t\t\t\t\t\tMove down\n\t\t\t\t\t\t</PopupList.Button>\n\t\t\t\t\t\t<PopupList.Button onClick={onRemove}>Remove</PopupList.Button>\n\t\t\t\t\t</PopupList.ButtonGroup>\n\t\t\t\t</Popup>\n\t\t\t}\n\t\t\tisCollapsed={!isExpanded}\n\t\t\tonToggle={() => onToggle()}\n\t\t\tclassName=\"fb-flow-step\"\n\t\t>\n\t\t\t<div className=\"fb-flow-step__body\">\n\t\t\t\t<TextInput\n\t\t\t\t\tpath={`fb-flow-step-${stepKey}-title`}\n\t\t\t\t\tlabel=\"Title\"\n\t\t\t\t\tvalue={step.title ?? ''}\n\t\t\t\t\tplaceholder=\"Optional display title\"\n\t\t\t\t\tonChange={(e: ChangeEvent<HTMLInputElement>) =>\n\t\t\t\t\t\tonChange({ ...step, title: e.target.value.length > 0 ? e.target.value : undefined })\n\t\t\t\t\t}\n\t\t\t\t/>\n\n\t\t\t\t<div className=\"fb-flow-step__row\">\n\t\t\t\t\t<FieldLabel label=\"Fields\" />\n\t\t\t\t\t{fieldNames.length === 0 ? (\n\t\t\t\t\t\t<p className=\"fb-flow-step__hint\">No fields defined on the form yet.</p>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<div className=\"fb-flow-step__field-picker\">\n\t\t\t\t\t\t\t{fieldNames.map((name) => {\n\t\t\t\t\t\t\t\tconst holder = holders.get(name)\n\t\t\t\t\t\t\t\tconst inOtherStep = holder !== undefined && holder !== stepIndex\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<div key={name} className=\"fb-flow-step__field-option\">\n\t\t\t\t\t\t\t\t\t\t<CheckboxInput\n\t\t\t\t\t\t\t\t\t\t\tlabel={name}\n\t\t\t\t\t\t\t\t\t\t\tchecked={step.fields.includes(name) || inOtherStep}\n\t\t\t\t\t\t\t\t\t\t\treadOnly={inOtherStep}\n\t\t\t\t\t\t\t\t\t\t\tonToggle={(e) => {\n\t\t\t\t\t\t\t\t\t\t\t\tif (inOtherStep) return\n\t\t\t\t\t\t\t\t\t\t\t\tonToggleField(name, e.target.checked)\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t{inOtherStep ? (\n\t\t\t\t\t\t\t\t\t\t\t<span className=\"fb-flow-step__field-hint\">\n\t\t\t\t\t\t\t\t\t\t\t\t{resolveMessage(t(keys.flowFieldInStep), {\n\t\t\t\t\t\t\t\t\t\t\t\t\tstep: stepLabels[holder] ?? '',\n\t\t\t\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\n\t\t\t\t<div className=\"fb-flow-step__row\">\n\t\t\t\t\t<FieldLabel label=\"Default next\" />\n\t\t\t\t\t<ReactSelect\n\t\t\t\t\t\toptions={nextOptions}\n\t\t\t\t\t\tvalue={\n\t\t\t\t\t\t\tstep.next\n\t\t\t\t\t\t\t\t? (nextOptions.find((o) => o.value === step.next) ?? undefined)\n\t\t\t\t\t\t\t\t: (nextOptions[0] ?? undefined)\n\t\t\t\t\t\t}\n\t\t\t\t\t\tisClearable={false}\n\t\t\t\t\t\tonChange={handleNextChange}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\n\t\t\t\t<div className=\"fb-flow-step__transitions\">\n\t\t\t\t\t<div className=\"fb-flow-step__transitions-header\">\n\t\t\t\t\t\t<FieldLabel label=\"Conditional transitions\" />\n\t\t\t\t\t\t<span className=\"fb-flow-step__hint\">(first match wins)</span>\n\t\t\t\t\t</div>\n\t\t\t\t\t{transitions.map((transition, tIndex) => {\n\t\t\t\t\t\tconst tKey = tKeys[tIndex]\n\t\t\t\t\t\tif (tKey === undefined) return null\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<TransitionRow\n\t\t\t\t\t\t\t\tkey={tKey}\n\t\t\t\t\t\t\t\ttransition={transition}\n\t\t\t\t\t\t\t\tstepOptions={otherStepOptions}\n\t\t\t\t\t\t\t\tconditionTypes={conditionTypes}\n\t\t\t\t\t\t\t\tisFirst={tIndex === 0}\n\t\t\t\t\t\t\t\tisLast={tIndex === transitions.length - 1}\n\t\t\t\t\t\t\t\tonChange={(next) => updateTransition(tIndex, next)}\n\t\t\t\t\t\t\t\tonRemove={() => removeTransition(tIndex)}\n\t\t\t\t\t\t\t\tonMoveUp={() => moveTransition(tIndex, tIndex - 1)}\n\t\t\t\t\t\t\t\tonMoveDown={() => moveTransition(tIndex, tIndex + 1)}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)\n\t\t\t\t\t})}\n\t\t\t\t\t<Button\n\t\t\t\t\t\tbuttonStyle=\"icon-label\"\n\t\t\t\t\t\ticon=\"plus\"\n\t\t\t\t\t\ticonStyle=\"with-border\"\n\t\t\t\t\t\ticonPosition=\"left\"\n\t\t\t\t\t\tonClick={addTransition}\n\t\t\t\t\t\tmargin={false}\n\t\t\t\t\t>\n\t\t\t\t\t\tAdd transition\n\t\t\t\t\t</Button>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</Collapsible>\n\t)\n}\n\nexport const FlowBuilder = (props: FlowBuilderProps) => {\n\tconst { setValue, value } = useField<FormFlow | undefined>()\n\tconst { t } = useTranslation()\n\tconst label = toStaticLabel(props.field?.label ?? props.label)\n\tconst [expandedKeys, setExpandedKeys] = useState<Set<string>>(new Set())\n\n\tconst fieldNamesJson = useFormFields(([fields]) =>\n\t\tJSON.stringify(extractFieldNames(reduceFieldsToValues(fields, true) as Record<string, unknown>))\n\t)\n\tconst fieldNames = useMemo(() => JSON.parse(fieldNamesJson) as string[], [fieldNamesJson])\n\n\tconst steps = value?.steps ?? []\n\tconst fallbackTitle = t(keys.flowStepFallbackTitle)\n\tconst stepLabels = steps.map((step, index) => stepLabel(step, index, fallbackTitle))\n\tconst stepOptions: ReactSelectOption[] = steps\n\t\t.map((step, index) => ({ label: stepLabels[index] ?? '', value: step.id }))\n\t\t.filter((option) => (option.value as string).length > 0)\n\tconst holders = fieldHolders(steps)\n\tconst unassigned = unassignedFields(fieldNames, steps)\n\n\t// Stable per-step React keys, independent of step ids. Reorder/insert/remove reconcile by\n\t// identity so focused inputs and each step's expand state stay with their step instead of\n\t// jumping to whichever step now sits at that array position.\n\tconst keysRef = useRef<string[]>([])\n\tif (keysRef.current.length !== steps.length) {\n\t\tkeysRef.current = steps.map((_, i) => keysRef.current[i] ?? crypto.randomUUID())\n\t}\n\tconst stepKeys = keysRef.current\n\n\tconst toggleExpanded = (key: string) => {\n\t\tsetExpandedKeys((prev) => {\n\t\t\tconst next = new Set(prev)\n\t\t\tif (next.has(key)) next.delete(key)\n\t\t\telse next.add(key)\n\t\t\treturn next\n\t\t})\n\t}\n\n\tconst emit = (nextSteps: FlowStep[], nextKeys: string[]) => {\n\t\tkeysRef.current = nextKeys\n\t\tsetValue({ steps: nextSteps } as FormFlow)\n\t}\n\n\tconst insertStep = (at: number) => {\n\t\tconst key = crypto.randomUUID()\n\t\tconst nextSteps = [...steps]\n\t\tnextSteps.splice(at, 0, { id: crypto.randomUUID(), fields: [] })\n\t\tconst nextKeys = [...stepKeys]\n\t\tnextKeys.splice(at, 0, key)\n\t\temit(nextSteps, nextKeys)\n\t\tsetExpandedKeys((prev) => new Set(prev).add(key))\n\t}\n\n\tconst addStep = () => insertStep(steps.length)\n\n\tconst updateStep = (index: number, next: FlowStep) => {\n\t\temit(\n\t\t\tsteps.map((s, i) => (i === index ? next : s)),\n\t\t\tstepKeys\n\t\t)\n\t}\n\n\tconst toggleField = (stepIndex: number, name: string, checked: boolean) => {\n\t\tconst nextSteps = checked\n\t\t\t? assignFieldToStep(steps, stepIndex, name)\n\t\t\t: removeFieldFromStep(steps, stepIndex, name)\n\t\temit(nextSteps, stepKeys)\n\t}\n\n\tconst assignUnassignedField = (name: string, stepId: string) => {\n\t\tconst targetIndex = steps.findIndex((s) => s.id === stepId)\n\t\tif (targetIndex === -1) return\n\t\temit(assignFieldToStep(steps, targetIndex, name), stepKeys)\n\t}\n\n\tconst removeStep = (index: number) => {\n\t\tconst removedKey = stepKeys[index]\n\t\temit(\n\t\t\tsteps.filter((_, i) => i !== index),\n\t\t\tstepKeys.filter((_, i) => i !== index)\n\t\t)\n\t\tif (removedKey !== undefined) {\n\t\t\tsetExpandedKeys((prev) => {\n\t\t\t\tconst next = new Set(prev)\n\t\t\t\tnext.delete(removedKey)\n\t\t\t\treturn next\n\t\t\t})\n\t\t}\n\t}\n\n\tconst moveStep = (from: number, to: number) => {\n\t\tconst nextSteps = [...steps]\n\t\tconst [movedStep] = nextSteps.splice(from, 1)\n\t\tif (movedStep === undefined) return\n\t\tnextSteps.splice(to, 0, movedStep)\n\t\tconst nextKeys = [...stepKeys]\n\t\tconst [movedKey] = nextKeys.splice(from, 1)\n\t\tif (movedKey !== undefined) nextKeys.splice(to, 0, movedKey)\n\t\temit(nextSteps, nextKeys)\n\t}\n\n\treturn (\n\t\t<div className=\"field-type fb-flow-builder\">\n\t\t\t<div className=\"blocks-field__header\">\n\t\t\t\t<div className=\"blocks-field__header-wrap\">\n\t\t\t\t\t<h3>{typeof label === 'string' ? label : 'Flow'}</h3>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<p className=\"fb-flow-builder__description\">{t(keys.flowDescription)}</p>\n\t\t\t{steps.length === 0 ? (\n\t\t\t\t<p className=\"fb-flow-builder__hint\">\n\t\t\t\t\tNo steps defined. Add at least two steps to enable multi-page flow routing.\n\t\t\t\t</p>\n\t\t\t) : (\n\t\t\t\t<div className=\"fb-flow-builder__steps\">\n\t\t\t\t\t{steps.map((step, index) => {\n\t\t\t\t\t\tconst key = stepKeys[index]\n\t\t\t\t\t\tif (key === undefined) return null\n\t\t\t\t\t\tconst otherStepOptions = stepOptions.filter((option) => option.value !== step.id)\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<StepCard\n\t\t\t\t\t\t\t\tkey={key}\n\t\t\t\t\t\t\t\tstepKey={key}\n\t\t\t\t\t\t\t\tstep={step}\n\t\t\t\t\t\t\t\tstepIndex={index}\n\t\t\t\t\t\t\t\tstepCount={steps.length}\n\t\t\t\t\t\t\t\totherStepOptions={otherStepOptions}\n\t\t\t\t\t\t\t\tholders={holders}\n\t\t\t\t\t\t\t\tstepLabels={stepLabels}\n\t\t\t\t\t\t\t\tfieldNames={fieldNames}\n\t\t\t\t\t\t\t\tconditionTypes={props.conditionTypes}\n\t\t\t\t\t\t\t\tisExpanded={expandedKeys.has(key)}\n\t\t\t\t\t\t\t\tonToggle={() => toggleExpanded(key)}\n\t\t\t\t\t\t\t\tonChange={(next) => updateStep(index, next)}\n\t\t\t\t\t\t\t\tonToggleField={(name, checked) => toggleField(index, name, checked)}\n\t\t\t\t\t\t\t\tonRemove={() => removeStep(index)}\n\t\t\t\t\t\t\t\tonMoveUp={() => moveStep(index, index - 1)}\n\t\t\t\t\t\t\t\tonMoveDown={() => moveStep(index, index + 1)}\n\t\t\t\t\t\t\t\tonAddAbove={() => insertStep(index)}\n\t\t\t\t\t\t\t\tonAddBelow={() => insertStep(index + 1)}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)\n\t\t\t\t\t})}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t{steps.length > 0 && unassigned.length > 0 ? (\n\t\t\t\t<div className=\"fb-flow-unassigned\">\n\t\t\t\t\t<FieldLabel label={t(keys.flowUnassigned)} />\n\t\t\t\t\t<div className=\"fb-flow-unassigned__rows\">\n\t\t\t\t\t\t{unassigned.map((name) => (\n\t\t\t\t\t\t\t<div key={name} className=\"fb-flow-unassigned__row\">\n\t\t\t\t\t\t\t\t<span className=\"fb-flow-unassigned__name\">{name}</span>\n\t\t\t\t\t\t\t\t<div className=\"fb-flow-unassigned__select\">\n\t\t\t\t\t\t\t\t\t<ReactSelect\n\t\t\t\t\t\t\t\t\t\toptions={stepOptions}\n\t\t\t\t\t\t\t\t\t\tplaceholder={t(keys.flowAssignToStep)}\n\t\t\t\t\t\t\t\t\t\tisClearable={false}\n\t\t\t\t\t\t\t\t\t\tonChange={(selected: ReactSelectOption | ReactSelectOption[]) => {\n\t\t\t\t\t\t\t\t\t\t\tconst chosen = Array.isArray(selected) ? selected[0] : selected\n\t\t\t\t\t\t\t\t\t\t\tif (chosen) assignUnassignedField(name, chosen.value as string)\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t) : null}\n\t\t\t<div className=\"fb-flow-builder__actions\">\n\t\t\t\t<Button\n\t\t\t\t\tbuttonStyle=\"icon-label\"\n\t\t\t\t\ticon=\"plus\"\n\t\t\t\t\ticonStyle=\"with-border\"\n\t\t\t\t\ticonPosition=\"left\"\n\t\t\t\t\tonClick={addStep}\n\t\t\t\t\tmargin={false}\n\t\t\t\t>\n\t\t\t\t\tAdd step\n\t\t\t\t</Button>\n\t\t\t</div>\n\t\t</div>\n\t)\n}\n"],"mappings":"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"}

package/dist/client/admin.css

@@ -8,6 +8,11 @@
 	gap: 0.5rem;
 	margin-block-end: 1rem;
 }
+.fb-flow-builder__description {
+	color: var(--theme-elevation-400);
+	font-size: 0.875rem;
+	margin: 0;
+}
 .fb-flow-builder__hint {
 	color: var(--theme-elevation-400);
 	font-size: 0.875rem;
@@ -36,16 +41,12 @@
 	color: var(--theme-elevation-400);
 	flex-shrink: 0;
 }
-.fb-flow-step__id-preview {
+.fb-flow-step__title {
 	font-size: 0.875rem;
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
-.fb-flow-step__id-preview em {
-	color: var(--theme-elevation-400);
-	font-style: italic;
-}
 .fb-flow-step__body {
 	padding: 0.75rem;
 	display: flex;
@@ -68,6 +69,16 @@
 	gap: 0.25rem 1.25rem;
 	padding-block: 0.25rem;
 }
+.fb-flow-step__field-option {
+	display: flex;
+	align-items: center;
+	gap: 0.375rem;
+}
+.fb-flow-step__field-hint {
+	font-size: 0.75rem;
+	color: var(--theme-elevation-400);
+	white-space: nowrap;
+}
 .fb-flow-step__transitions {
 	display: flex;
 	flex-direction: column;
@@ -80,6 +91,37 @@
 	gap: 0.5rem;
 }
 
+.fb-flow-unassigned {
+	display: flex;
+	flex-direction: column;
+	gap: 0.25rem;
+	padding: 0.75rem;
+	border: 1px solid var(--theme-border-color);
+	border-radius: var(--style-radius-s);
+}
+.fb-flow-unassigned__rows {
+	display: flex;
+	flex-direction: column;
+	gap: 0.375rem;
+}
+.fb-flow-unassigned__row {
+	display: flex;
+	align-items: center;
+	gap: 0.75rem;
+}
+.fb-flow-unassigned__name {
+	font-size: 0.875rem;
+	flex: 1;
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+.fb-flow-unassigned__select {
+	flex: 0 1 14rem;
+	min-width: 9rem;
+}
+
 .fb-flow-transition {
 	border: 1px solid var(--theme-border-color);
 	border-radius: var(--style-radius-s);

package/dist/client/flowAuthoring.js

@@ -0,0 +1,35 @@
+import "../flow/stepLabel.js";
+//#region src/client/flowAuthoring.ts
+/** Field name to index of the step holding it (first occurrence wins). */
+const fieldHolders = (steps) => {
+	const holders = /* @__PURE__ */ new Map();
+	steps.forEach((step, index) => {
+		for (const field of step.fields) if (!holders.has(field)) holders.set(field, index);
+	});
+	return holders;
+};
+/** Form fields not assigned to any step, in form order. */
+const unassignedFields = (fieldNames, steps) => {
+	const assigned = new Set(steps.flatMap((step) => step.fields));
+	return fieldNames.filter((name) => !assigned.has(name));
+};
+/** Assign a field to the step at `targetIndex`, stripping it from every other step. */
+const assignFieldToStep = (steps, targetIndex, field) => steps.map((step, index) => {
+	if (index === targetIndex) return step.fields.includes(field) ? step : {
+		...step,
+		fields: [...step.fields, field]
+	};
+	return step.fields.includes(field) ? {
+		...step,
+		fields: step.fields.filter((f) => f !== field)
+	} : step;
+});
+/** Remove a field from the step at `targetIndex`, leaving other steps untouched. */
+const removeFieldFromStep = (steps, targetIndex, field) => steps.map((step, index) => index === targetIndex && step.fields.includes(field) ? {
+	...step,
+	fields: step.fields.filter((f) => f !== field)
+} : step);
+//#endregion
+export { assignFieldToStep, fieldHolders, removeFieldFromStep, unassignedFields };
+
+//# sourceMappingURL=flowAuthoring.js.map

package/dist/client/flowAuthoring.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flowAuthoring.js","names":[],"sources":["../../src/client/flowAuthoring.ts"],"sourcesContent":["import type { FlowStep } from '../flow/types'\n\nexport { stepLabel } from '../flow/stepLabel'\n\n/** Field name to index of the step holding it (first occurrence wins). */\nexport const fieldHolders = (steps: Pick<FlowStep, 'fields'>[]): Map<string, number> => {\n\tconst holders = new Map<string, number>()\n\tsteps.forEach((step, index) => {\n\t\tfor (const field of step.fields) {\n\t\t\tif (!holders.has(field)) holders.set(field, index)\n\t\t}\n\t})\n\treturn holders\n}\n\n/** Form fields not assigned to any step, in form order. */\nexport const unassignedFields = (\n\tfieldNames: string[],\n\tsteps: Pick<FlowStep, 'fields'>[]\n): string[] => {\n\tconst assigned = new Set(steps.flatMap((step) => step.fields))\n\treturn fieldNames.filter((name) => !assigned.has(name))\n}\n\n/** Assign a field to the step at `targetIndex`, stripping it from every other step. */\nexport const assignFieldToStep = (\n\tsteps: FlowStep[],\n\ttargetIndex: number,\n\tfield: string\n): FlowStep[] =>\n\tsteps.map((step, index) => {\n\t\tif (index === targetIndex) {\n\t\t\treturn step.fields.includes(field) ? step : { ...step, fields: [...step.fields, field] }\n\t\t}\n\t\treturn step.fields.includes(field)\n\t\t\t? { ...step, fields: step.fields.filter((f) => f !== field) }\n\t\t\t: step\n\t})\n\n/** Remove a field from the step at `targetIndex`, leaving other steps untouched. */\nexport const removeFieldFromStep = (\n\tsteps: FlowStep[],\n\ttargetIndex: number,\n\tfield: string\n): FlowStep[] =>\n\tsteps.map((step, index) =>\n\t\tindex === targetIndex && step.fields.includes(field)\n\t\t\t? { ...step, fields: step.fields.filter((f) => f !== field) }\n\t\t\t: step\n\t)\n"],"mappings":";;;AAKA,MAAa,gBAAgB,UAA2D;CACvF,MAAM,0BAAU,IAAI,IAAoB;CACxC,MAAM,SAAS,MAAM,UAAU;EAC9B,KAAK,MAAM,SAAS,KAAK,QACxB,IAAI,CAAC,QAAQ,IAAI,KAAK,GAAG,QAAQ,IAAI,OAAO,KAAK;CAEnD,CAAC;CACD,OAAO;AACR;;AAGA,MAAa,oBACZ,YACA,UACc;CACd,MAAM,WAAW,IAAI,IAAI,MAAM,SAAS,SAAS,KAAK,MAAM,CAAC;CAC7D,OAAO,WAAW,QAAQ,SAAS,CAAC,SAAS,IAAI,IAAI,CAAC;AACvD;;AAGA,MAAa,qBACZ,OACA,aACA,UAEA,MAAM,KAAK,MAAM,UAAU;CAC1B,IAAI,UAAU,aACb,OAAO,KAAK,OAAO,SAAS,KAAK,IAAI,OAAO;EAAE,GAAG;EAAM,QAAQ,CAAC,GAAG,KAAK,QAAQ,KAAK;CAAE;CAExF,OAAO,KAAK,OAAO,SAAS,KAAK,IAC9B;EAAE,GAAG;EAAM,QAAQ,KAAK,OAAO,QAAQ,MAAM,MAAM,KAAK;CAAE,IAC1D;AACJ,CAAC;;AAGF,MAAa,uBACZ,OACA,aACA,UAEA,MAAM,KAAK,MAAM,UAChB,UAAU,eAAe,KAAK,OAAO,SAAS,KAAK,IAChD;CAAE,GAAG;CAAM,QAAQ,KAAK,OAAO,QAAQ,MAAM,MAAM,KAAK;AAAE,IAC1D,IACJ"}

package/dist/client/synthesizeClientField.js

@@ -1,9 +1,13 @@
 //#region src/client/synthesizeClientField.ts
-/** Project a stored field row into a condition operand, or `null` when the row has no usable name. */
+/**
+* Project a stored field row into a condition operand, or `null` when the row has no usable name or
+* its type is absent from the condition-type map (not conditionable, e.g. a display-only message).
+*/
 const operandFromRow = (row, conditionTypes) => {
 	const name = typeof row.name === "string" ? row.name.trim() : "";
 	if (name.length === 0) return null;
-	const conditionType = conditionTypes[row.blockType] ?? "text";
+	const conditionType = conditionTypes[row.blockType];
+	if (!conditionType) return null;
 	return {
 		name,
 		label: typeof row.label === "string" && row.label.length > 0 ? row.label : name,

package/dist/client/synthesizeClientField.js.map

@@ -1 +1 @@
-{"version":3,"file":"synthesizeClientField.js","names":[],"sources":["../../src/client/synthesizeClientField.ts"],"sourcesContent":["import type {\n\tDateFieldClient,\n\tNumberFieldClient,\n\tOption,\n\tSelectFieldClient,\n\tTextFieldClient,\n} from 'payload'\nimport type { ConditionFieldType } from '../conditions/fieldTypes'\n\n/** A field row as stored in the form's `fields` blocks array (only the keys the builder reads). */\nexport type FieldRow = {\n\tblockType: string\n\tname?: string\n\tlabel?: string\n\toptions?: Option[]\n\t[key: string]: unknown\n}\n\n/** A condition operand: a selectable form field the builder can compare against. */\nexport type ConditionOperand = {\n\tname: string\n\tlabel: string\n\tconditionType: ConditionFieldType\n\toptions?: Option[]\n}\n\n/** Project a stored field row into a condition operand, or `null` when the row has no usable name. */\nexport const operandFromRow = (\n\trow: FieldRow,\n\tconditionTypes: Record<string, ConditionFieldType>\n): ConditionOperand | null => {\n\tconst name = typeof row.name === 'string' ? row.name.trim() : ''\n\tif (name.length === 0) {\n\t\treturn null\n\t}\n\tconst conditionType = conditionTypes[row.blockType] ?? 'text'\n\treturn {\n\t\tname,\n\t\tlabel: typeof row.label === 'string' && row.label.length > 0 ? row.label : name,\n\t\tconditionType,\n\t\toptions: Array.isArray(row.options) ? row.options : undefined,\n\t}\n}\n\n/**\n * Build the minimal `*FieldClient` a Payload leaf condition input requires for a given operand. Casts\n * are localized to these four synths and nowhere else: `FieldBaseClient` requires only `name`, and each\n * leaf is `FieldBaseClient & Pick<…, 'type' | …>` where every picked member but `type` (and `select`'s\n * required `options`) is optional, so the literals are structurally complete. `dateClientField` omits\n * `admin.date`, so `DateCondition` falls back to its default date format. Each synth returns a single\n * concrete client type so leaf `field` props need no narrowing.\n */\nexport const textClientField = (operand: ConditionOperand): TextFieldClient =>\n\t({ name: operand.name, label: operand.label, type: 'text' }) as TextFieldClient\n\nexport const numberClientField = (operand: ConditionOperand): NumberFieldClient =>\n\t({ name: operand.name, label: operand.label, type: 'number' }) as NumberFieldClient\n\nexport const dateClientField = (operand: ConditionOperand): DateFieldClient =>\n\t({ name: operand.name, label: operand.label, type: 'date' }) as DateFieldClient\n\nexport const selectClientField = (operand: ConditionOperand): SelectFieldClient =>\n\t({\n\t\tname: operand.name,\n\t\tlabel: operand.label,\n\t\ttype: 'select',\n\t\toptions: operand.options ?? [],\n\t}) as SelectFieldClient\n"],"mappings":";;AA2BA,MAAa,kBACZ,KACA,mBAC6B;CAC7B,MAAM,OAAO,OAAO,IAAI,SAAS,WAAW,IAAI,KAAK,KAAK,IAAI;CAC9D,IAAI,KAAK,WAAW,GACnB,OAAO;CAER,MAAM,gBAAgB,eAAe,IAAI,cAAc;CACvD,OAAO;EACN;EACA,OAAO,OAAO,IAAI,UAAU,YAAY,IAAI,MAAM,SAAS,IAAI,IAAI,QAAQ;EAC3E;EACA,SAAS,MAAM,QAAQ,IAAI,OAAO,IAAI,IAAI,UAAU,KAAA;CACrD;AACD;;;;;;;;;AAUA,MAAa,mBAAmB,aAC9B;CAAE,MAAM,QAAQ;CAAM,OAAO,QAAQ;CAAO,MAAM;AAAO;AAE3D,MAAa,qBAAqB,aAChC;CAAE,MAAM,QAAQ;CAAM,OAAO,QAAQ;CAAO,MAAM;AAAS;AAE7D,MAAa,mBAAmB,aAC9B;CAAE,MAAM,QAAQ;CAAM,OAAO,QAAQ;CAAO,MAAM;AAAO;AAE3D,MAAa,qBAAqB,aAChC;CACA,MAAM,QAAQ;CACd,OAAO,QAAQ;CACf,MAAM;CACN,SAAS,QAAQ,WAAW,CAAC;AAC9B"}
+{"version":3,"file":"synthesizeClientField.js","names":[],"sources":["../../src/client/synthesizeClientField.ts"],"sourcesContent":["import type {\n\tDateFieldClient,\n\tNumberFieldClient,\n\tOption,\n\tSelectFieldClient,\n\tTextFieldClient,\n} from 'payload'\nimport type { ConditionFieldType } from '../conditions/fieldTypes'\n\n/** A field row as stored in the form's `fields` blocks array (only the keys the builder reads). */\nexport type FieldRow = {\n\tblockType: string\n\tname?: string\n\tlabel?: string\n\toptions?: Option[]\n\t[key: string]: unknown\n}\n\n/** A condition operand: a selectable form field the builder can compare against. */\nexport type ConditionOperand = {\n\tname: string\n\tlabel: string\n\tconditionType: ConditionFieldType\n\toptions?: Option[]\n}\n\n/**\n * Project a stored field row into a condition operand, or `null` when the row has no usable name or\n * its type is absent from the condition-type map (not conditionable, e.g. a display-only message).\n */\nexport const operandFromRow = (\n\trow: FieldRow,\n\tconditionTypes: Record<string, ConditionFieldType>\n): ConditionOperand | null => {\n\tconst name = typeof row.name === 'string' ? row.name.trim() : ''\n\tif (name.length === 0) {\n\t\treturn null\n\t}\n\tconst conditionType = conditionTypes[row.blockType]\n\tif (!conditionType) {\n\t\treturn null\n\t}\n\treturn {\n\t\tname,\n\t\tlabel: typeof row.label === 'string' && row.label.length > 0 ? row.label : name,\n\t\tconditionType,\n\t\toptions: Array.isArray(row.options) ? row.options : undefined,\n\t}\n}\n\n/**\n * Build the minimal `*FieldClient` a Payload leaf condition input requires for a given operand. Casts\n * are localized to these four synths and nowhere else: `FieldBaseClient` requires only `name`, and each\n * leaf is `FieldBaseClient & Pick<…, 'type' | …>` where every picked member but `type` (and `select`'s\n * required `options`) is optional, so the literals are structurally complete. `dateClientField` omits\n * `admin.date`, so `DateCondition` falls back to its default date format. Each synth returns a single\n * concrete client type so leaf `field` props need no narrowing.\n */\nexport const textClientField = (operand: ConditionOperand): TextFieldClient =>\n\t({ name: operand.name, label: operand.label, type: 'text' }) as TextFieldClient\n\nexport const numberClientField = (operand: ConditionOperand): NumberFieldClient =>\n\t({ name: operand.name, label: operand.label, type: 'number' }) as NumberFieldClient\n\nexport const dateClientField = (operand: ConditionOperand): DateFieldClient =>\n\t({ name: operand.name, label: operand.label, type: 'date' }) as DateFieldClient\n\nexport const selectClientField = (operand: ConditionOperand): SelectFieldClient =>\n\t({\n\t\tname: operand.name,\n\t\tlabel: operand.label,\n\t\ttype: 'select',\n\t\toptions: operand.options ?? [],\n\t}) as SelectFieldClient\n"],"mappings":";;;;;AA8BA,MAAa,kBACZ,KACA,mBAC6B;CAC7B,MAAM,OAAO,OAAO,IAAI,SAAS,WAAW,IAAI,KAAK,KAAK,IAAI;CAC9D,IAAI,KAAK,WAAW,GACnB,OAAO;CAER,MAAM,gBAAgB,eAAe,IAAI;CACzC,IAAI,CAAC,eACJ,OAAO;CAER,OAAO;EACN;EACA,OAAO,OAAO,IAAI,UAAU,YAAY,IAAI,MAAM,SAAS,IAAI,IAAI,QAAQ;EAC3E;EACA,SAAS,MAAM,QAAQ,IAAI,OAAO,IAAI,IAAI,UAAU,KAAA;CACrD;AACD;;;;;;;;;AAUA,MAAa,mBAAmB,aAC9B;CAAE,MAAM,QAAQ;CAAM,OAAO,QAAQ;CAAO,MAAM;AAAO;AAE3D,MAAa,qBAAqB,aAChC;CAAE,MAAM,QAAQ;CAAM,OAAO,QAAQ;CAAO,MAAM;AAAS;AAE7D,MAAa,mBAAmB,aAC9B;CAAE,MAAM,QAAQ;CAAM,OAAO,QAAQ;CAAO,MAAM;AAAO;AAE3D,MAAa,qBAAqB,aAChC;CACA,MAAM,QAAQ;CACd,OAAO,QAAQ;CACf,MAAM;CACN,SAAS,QAAQ,WAAW,CAAC;AAC9B"}