@10x-media/form-builder 0.1.0-beta.0 → 0.1.0-beta.1

package/dist/client/FlowBuilder.js

@@ -0,0 +1,408 @@
+"use client";
+import { ConditionBuilder } from "./ConditionBuilder.js";
+import { reduceFieldsToValues } from "payload/shared";
+import { Button, CheckboxInput, Collapsible, FieldLabel, ReactSelect, TextInput, useField, useFormFields } from "@payloadcms/ui";
+import { Popup, PopupList } from "@payloadcms/ui/elements/Popup";
+import { MoreIcon } from "@payloadcms/ui/icons/More";
+import { useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/client/FlowBuilder.tsx
+const toStaticLabel = (label) => {
+	if (typeof label === "string") return label;
+	if (label && typeof label === "object") return label;
+};
+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 handleGotoChange = (selected) => {
+		const chosen = Array.isArray(selected) ? selected[0] : selected;
+		if (chosen) onChange({
+			...transition,
+			to: chosen.value
+		});
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "fb-flow-transition",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "fb-flow-transition__header",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "fb-flow-transition__label",
+						children: "go to"
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "fb-flow-transition__goto",
+						children: /* @__PURE__ */ jsx(ReactSelect, {
+							options: toOptions,
+							value: toOptions.find((o) => o.value === transition.to) ?? void 0,
+							placeholder: "Select step…",
+							isClearable: false,
+							onChange: handleGotoChange
+						})
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "fb-flow-transition__actions",
+						children: [
+							/* @__PURE__ */ jsx("button", {
+								type: "button",
+								className: "fb-flow__move-btn",
+								onClick: onMoveUp,
+								disabled: isFirst,
+								"aria-label": "Move transition up",
+								children: "↑"
+							}),
+							/* @__PURE__ */ jsx("button", {
+								type: "button",
+								className: "fb-flow__move-btn",
+								onClick: onMoveDown,
+								disabled: isLast,
+								"aria-label": "Move transition down",
+								children: "↓"
+							}),
+							/* @__PURE__ */ jsx(Button, {
+								buttonStyle: "icon-label",
+								icon: "x",
+								onClick: onRemove,
+								margin: false,
+								"aria-label": "Remove transition"
+							})
+						]
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "fb-flow-transition__when-label",
+				children: "when"
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "fb-flow-transition__condition",
+				children: /* @__PURE__ */ jsx(ConditionBuilder, {
+					value: transition.when,
+					onChange: (when) => onChange({
+						...transition,
+						when
+					}),
+					conditionTypes
+				})
+			})
+		]
+	});
+};
+const StepCard = ({ step, stepKey, stepIndex, stepCount, otherStepIds, fieldNames, conditionTypes, isExpanded, onToggle, onChange, onRemove, onMoveUp, onMoveDown, onAddAbove, onAddBelow }) => {
+	const nextOptions = [{
+		label: "— terminal —",
+		value: ""
+	}, ...otherStepIds.map((id) => ({
+		label: id,
+		value: id
+	}))];
+	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;
+		tKeysRef.current = [...tKeys, crypto.randomUUID()];
+		onChange({
+			...step,
+			transitions: [...transitions, {
+				when: {},
+				to: firstOtherStep
+			}]
+		});
+	};
+	const updateTransition = (index, next) => {
+		const updated = [...transitions];
+		updated[index] = next;
+		onChange({
+			...step,
+			transitions: updated
+		});
+	};
+	const removeTransition = (index) => {
+		tKeysRef.current = tKeys.filter((_, i) => i !== index);
+		const updated = transitions.filter((_, i) => i !== index);
+		onChange({
+			...step,
+			transitions: updated.length > 0 ? updated : void 0
+		});
+	};
+	const moveTransition = (from, to) => {
+		const updated = [...transitions];
+		const [item] = updated.splice(from, 1);
+		if (item !== void 0) updated.splice(to, 0, item);
+		const nextKeys = [...tKeys];
+		const [movedKey] = nextKeys.splice(from, 1);
+		if (movedKey !== void 0) nextKeys.splice(to, 0, movedKey);
+		tKeysRef.current = nextKeys;
+		onChange({
+			...step,
+			transitions: updated
+		});
+	};
+	const handleNextChange = (selected) => {
+		const next = (Array.isArray(selected) ? selected[0] : selected)?.value || void 0;
+		onChange({
+			...step,
+			next
+		});
+	};
+	return /* @__PURE__ */ jsx(Collapsible, {
+		header: /* @__PURE__ */ jsxs("div", {
+			className: "fb-flow-step__header-content",
+			children: [/* @__PURE__ */ jsxs("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" })
+			})]
+		}),
+		actions: /* @__PURE__ */ jsx(Popup, {
+			button: /* @__PURE__ */ jsx(MoreIcon, {}),
+			buttonType: "default",
+			horizontalAlign: "right",
+			size: "fit-content",
+			verticalAlign: "bottom",
+			children: /* @__PURE__ */ jsxs(PopupList.ButtonGroup, { children: [
+				/* @__PURE__ */ jsx(PopupList.Button, {
+					onClick: onAddAbove,
+					children: "Add above"
+				}),
+				/* @__PURE__ */ jsx(PopupList.Button, {
+					onClick: onAddBelow,
+					children: "Add below"
+				}),
+				/* @__PURE__ */ jsx(PopupList.Button, {
+					onClick: onMoveUp,
+					disabled: stepIndex === 0,
+					children: "Move up"
+				}),
+				/* @__PURE__ */ jsx(PopupList.Button, {
+					onClick: onMoveDown,
+					disabled: stepIndex === stepCount - 1,
+					children: "Move down"
+				}),
+				/* @__PURE__ */ jsx(PopupList.Button, {
+					onClick: onRemove,
+					children: "Remove"
+				})
+			] })
+		}),
+		isCollapsed: !isExpanded,
+		onToggle: () => onToggle(),
+		className: "fb-flow-step",
+		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",
+					value: step.title ?? "",
+					placeholder: "Optional display title",
+					onChange: (e) => onChange({
+						...step,
+						title: e.target.value.length > 0 ? e.target.value : void 0
+					})
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "fb-flow-step__row",
+					children: [/* @__PURE__ */ jsx(FieldLabel, { label: "Fields" }), fieldNames.length === 0 ? /* @__PURE__ */ jsx("p", {
+						className: "fb-flow-step__hint",
+						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))
+					})]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "fb-flow-step__row",
+					children: [/* @__PURE__ */ jsx(FieldLabel, { label: "Default next" }), /* @__PURE__ */ jsx(ReactSelect, {
+						options: nextOptions,
+						value: step.next ? nextOptions.find((o) => o.value === step.next) ?? void 0 : nextOptions[0] ?? void 0,
+						isClearable: false,
+						onChange: handleNextChange
+					})]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "fb-flow-step__transitions",
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: "fb-flow-step__transitions-header",
+							children: [/* @__PURE__ */ jsx(FieldLabel, { label: "Conditional transitions" }), /* @__PURE__ */ jsx("span", {
+								className: "fb-flow-step__hint",
+								children: "(first match wins)"
+							})]
+						}),
+						transitions.map((transition, tIndex) => {
+							const tKey = tKeys[tIndex];
+							if (tKey === void 0) return null;
+							return /* @__PURE__ */ jsx(TransitionRow, {
+								transition,
+								stepIds: otherStepIds,
+								conditionTypes,
+								isFirst: tIndex === 0,
+								isLast: tIndex === transitions.length - 1,
+								onChange: (next) => updateTransition(tIndex, next),
+								onRemove: () => removeTransition(tIndex),
+								onMoveUp: () => moveTransition(tIndex, tIndex - 1),
+								onMoveDown: () => moveTransition(tIndex, tIndex + 1)
+							}, tKey);
+						}),
+						/* @__PURE__ */ jsx(Button, {
+							buttonStyle: "icon-label",
+							icon: "plus",
+							iconStyle: "with-border",
+							iconPosition: "left",
+							onClick: addTransition,
+							margin: false,
+							children: "Add transition"
+						})
+					]
+				})
+			]
+		})
+	});
+};
+const FlowBuilder = (props) => {
+	const { setValue, value } = useField();
+	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 keysRef = useRef([]);
+	if (keysRef.current.length !== steps.length) keysRef.current = steps.map((_, i) => keysRef.current[i] ?? crypto.randomUUID());
+	const keys = keysRef.current;
+	const toggleExpanded = (key) => {
+		setExpandedKeys((prev) => {
+			const next = new Set(prev);
+			if (next.has(key)) next.delete(key);
+			else next.add(key);
+			return next;
+		});
+	};
+	const emit = (nextSteps, nextKeys) => {
+		keysRef.current = nextKeys;
+		setValue({ steps: nextSteps });
+	};
+	const insertStep = (at) => {
+		const key = crypto.randomUUID();
+		const nextSteps = [...steps];
+		nextSteps.splice(at, 0, {
+			id: crypto.randomUUID(),
+			fields: []
+		});
+		const nextKeys = [...keys];
+		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);
+	};
+	const removeStep = (index) => {
+		const removedKey = keys[index];
+		emit(steps.filter((_, i) => i !== index), keys.filter((_, i) => i !== index));
+		if (removedKey !== void 0) setExpandedKeys((prev) => {
+			const next = new Set(prev);
+			next.delete(removedKey);
+			return next;
+		});
+	};
+	const moveStep = (from, to) => {
+		const nextSteps = [...steps];
+		const [movedStep] = nextSteps.splice(from, 1);
+		if (movedStep === void 0) return;
+		nextSteps.splice(to, 0, movedStep);
+		const nextKeys = [...keys];
+		const [movedKey] = nextKeys.splice(from, 1);
+		if (movedKey !== void 0) nextKeys.splice(to, 0, movedKey);
+		emit(nextSteps, nextKeys);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "field-type fb-flow-builder",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "blocks-field__header",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "blocks-field__header-wrap",
+					children: /* @__PURE__ */ jsx("h3", { children: typeof label === "string" ? label : "Flow" })
+				})
+			}),
+			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];
+					if (key === void 0) return null;
+					const otherStepIds = allStepIds.filter((id) => id !== step.id);
+					return /* @__PURE__ */ jsx(StepCard, {
+						stepKey: key,
+						step,
+						stepIndex: index,
+						stepCount: steps.length,
+						otherStepIds,
+						fieldNames,
+						conditionTypes: props.conditionTypes,
+						isExpanded: expandedKeys.has(key),
+						onToggle: () => toggleExpanded(key),
+						onChange: (next) => updateStep(index, next),
+						onRemove: () => removeStep(index),
+						onMoveUp: () => moveStep(index, index - 1),
+						onMoveDown: () => moveStep(index, index + 1),
+						onAddAbove: () => insertStep(index),
+						onAddBelow: () => insertStep(index + 1)
+					}, key);
+				})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "fb-flow-builder__actions",
+				children: /* @__PURE__ */ jsx(Button, {
+					buttonStyle: "icon-label",
+					icon: "plus",
+					iconStyle: "with-border",
+					iconPosition: "left",
+					onClick: addStep,
+					margin: false,
+					children: "Add step"
+				})
+			})
+		]
+	});
+};
+//#endregion
+export { FlowBuilder };
+
+//# sourceMappingURL=FlowBuilder.js.map

package/dist/client/FlowBuilder.js.map

@@ -0,0 +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'\n\nexport type FlowBuilderProps = {\n\tpath?: string\n\tfield?: { label?: unknown }\n\tlabel?: unknown\n\tconditionTypes: Record<string, ConditionFieldType>\n}\n\nconst toStaticLabel = (label: unknown): string | Record<string, string> | undefined => {\n\tif (typeof label === 'string') return label\n\tif (label && typeof label === 'object') return label as Record<string, string>\n\treturn undefined\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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"}

package/dist/client/FormConditionField.d.ts

@@ -0,0 +1,21 @@
+import { ConditionFieldType } from "../conditions/fieldTypes.js";
+
+//#region src/client/FormConditionField.d.ts
+/** Props: standard JSON field client props plus the `conditionTypes` map we pass via clientProps. */
+type FormConditionFieldProps = {
+  path?: string;
+  field?: {
+    label?: unknown;
+    name?: string;
+  };
+  label?: unknown;
+  conditionTypes: Record<string, ConditionFieldType>;
+};
+/**
+ * The `Field` mounted on a form field's `visibleWhen`/`validateWhen` json column. Binds the field's own
+ * path with `useField<Where>()` (the QueryPresetsWhereField precedent) and renders the native builder.
+ */
+declare const FormConditionField: (props: FormConditionFieldProps) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { FormConditionField };
+//# sourceMappingURL=FormConditionField.d.ts.map

package/dist/client/FormConditionField.js

@@ -0,0 +1,33 @@
+"use client";
+import { ConditionBuilder } from "./ConditionBuilder.js";
+import { FieldLabel, useField } from "@payloadcms/ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/client/FormConditionField.tsx
+const toStaticLabel = (label) => {
+	if (typeof label === "string") return label;
+	if (label && typeof label === "object") return label;
+};
+/**
+* The `Field` mounted on a form field's `visibleWhen`/`validateWhen` json column. Binds the field's own
+* path with `useField<Where>()` (the QueryPresetsWhereField precedent) and renders the native builder.
+*/
+const FormConditionField = (props) => {
+	const { path, setValue, value } = useField();
+	return /* @__PURE__ */ jsxs("div", {
+		className: "field-type",
+		style: { marginBlockEnd: "1rem" },
+		children: [/* @__PURE__ */ jsx(FieldLabel, {
+			label: toStaticLabel(props.field?.label ?? props.label),
+			path
+		}), /* @__PURE__ */ jsx(ConditionBuilder, {
+			value: value ?? void 0,
+			onChange: setValue,
+			conditionTypes: props.conditionTypes,
+			selfName: props.field?.name
+		})]
+	});
+};
+//#endregion
+export { FormConditionField };
+
+//# sourceMappingURL=FormConditionField.js.map

package/dist/client/FormConditionField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormConditionField.js","names":[],"sources":["../../src/client/FormConditionField.tsx"],"sourcesContent":["'use client'\n\nimport { FieldLabel, useField } from '@payloadcms/ui'\nimport type { StaticLabel, Where } from 'payload'\nimport type { ConditionFieldType } from '../conditions/fieldTypes'\nimport { ConditionBuilder } from './ConditionBuilder'\n\n/** Props: standard JSON field client props plus the `conditionTypes` map we pass via clientProps. */\nexport type FormConditionFieldProps = {\n\tpath?: string\n\tfield?: { label?: unknown; name?: string }\n\tlabel?: unknown\n\tconditionTypes: Record<string, ConditionFieldType>\n}\n\nconst toStaticLabel = (label: unknown): StaticLabel | undefined => {\n\tif (typeof label === 'string') {\n\t\treturn label\n\t}\n\tif (label && typeof label === 'object') {\n\t\treturn label as Record<string, string>\n\t}\n\treturn undefined\n}\n\n/**\n * The `Field` mounted on a form field's `visibleWhen`/`validateWhen` json column. Binds the field's own\n * path with `useField<Where>()` (the QueryPresetsWhereField precedent) and renders the native builder.\n */\nexport const FormConditionField = (props: FormConditionFieldProps) => {\n\tconst { path, setValue, value } = useField<Where>()\n\tconst label = toStaticLabel(props.field?.label ?? props.label)\n\treturn (\n\t\t<div className=\"field-type\" style={{ marginBlockEnd: '1rem' }}>\n\t\t\t<FieldLabel label={label} path={path} />\n\t\t\t<ConditionBuilder\n\t\t\t\tvalue={value ?? undefined}\n\t\t\t\tonChange={setValue}\n\t\t\t\tconditionTypes={props.conditionTypes}\n\t\t\t\tselfName={props.field?.name}\n\t\t\t/>\n\t\t</div>\n\t)\n}\n"],"mappings":";;;;;AAeA,MAAM,iBAAiB,UAA4C;CAClE,IAAI,OAAO,UAAU,UACpB,OAAO;CAER,IAAI,SAAS,OAAO,UAAU,UAC7B,OAAO;AAGT;;;;;AAMA,MAAa,sBAAsB,UAAmC;CACrE,MAAM,EAAE,MAAM,UAAU,UAAU,SAAgB;CAElD,OACC,qBAAC,OAAD;EAAK,WAAU;EAAa,OAAO,EAAE,gBAAgB,OAAO;YAA5D,CACC,oBAAC,YAAD;GAAY,OAHA,cAAc,MAAM,OAAO,SAAS,MAAM,KAG/B;GAAS;EAAO,CAAA,GACvC,oBAAC,kBAAD;GACC,OAAO,SAAS,KAAA;GAChB,UAAU;GACV,gBAAgB,MAAM;GACtB,UAAU,MAAM,OAAO;EACvB,CAAA,CACG;;AAEP"}

package/dist/client/synthesizeClientField.js

@@ -0,0 +1,46 @@
+//#region src/client/synthesizeClientField.ts
+/** Project a stored field row into a condition operand, or `null` when the row has no usable name. */
+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";
+	return {
+		name,
+		label: typeof row.label === "string" && row.label.length > 0 ? row.label : name,
+		conditionType,
+		options: Array.isArray(row.options) ? row.options : void 0
+	};
+};
+/**
+* Build the minimal `*FieldClient` a Payload leaf condition input requires for a given operand. Casts
+* are localized to these four synths and nowhere else: `FieldBaseClient` requires only `name`, and each
+* leaf is `FieldBaseClient & Pick<…, 'type' | …>` where every picked member but `type` (and `select`'s
+* required `options`) is optional, so the literals are structurally complete. `dateClientField` omits
+* `admin.date`, so `DateCondition` falls back to its default date format. Each synth returns a single
+* concrete client type so leaf `field` props need no narrowing.
+*/
+const textClientField = (operand) => ({
+	name: operand.name,
+	label: operand.label,
+	type: "text"
+});
+const numberClientField = (operand) => ({
+	name: operand.name,
+	label: operand.label,
+	type: "number"
+});
+const dateClientField = (operand) => ({
+	name: operand.name,
+	label: operand.label,
+	type: "date"
+});
+const selectClientField = (operand) => ({
+	name: operand.name,
+	label: operand.label,
+	type: "select",
+	options: operand.options ?? []
+});
+//#endregion
+export { dateClientField, numberClientField, operandFromRow, selectClientField, textClientField };
+
+//# sourceMappingURL=synthesizeClientField.js.map

package/dist/client/synthesizeClientField.js.map

@@ -0,0 +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"}