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

package/dist/client/ByteSizeField.d.ts

@@ -0,0 +1,21 @@
+//#region src/client/ByteSizeField.d.ts
+/** Props: standard number field client props; label and description arrive resolved on `field`. */
+type ByteSizeFieldProps = {
+  path?: string;
+  field?: {
+    label?: unknown;
+    admin?: {
+      description?: unknown;
+    };
+  };
+  label?: unknown;
+};
+/**
+ * The `Field` mounted on a byte-count number config field (the file field's `maxSize`): a plain
+ * number input that live-previews the value as a human-readable size ('= 2.5 MB') so authors are
+ * not left decoding raw bytes. Stores the raw byte number unchanged.
+ */
+declare const ByteSizeField: (props: ByteSizeFieldProps) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { ByteSizeField };
+//# sourceMappingURL=ByteSizeField.d.ts.map

package/dist/client/ByteSizeField.js

@@ -0,0 +1,56 @@
+"use client";
+import { formatBytes } from "../uploads/formatBytes.js";
+import { toStaticLabel } from "./toStaticLabel.js";
+import { FieldDescription, FieldLabel, useField } from "@payloadcms/ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/client/ByteSizeField.tsx
+/**
+* The `Field` mounted on a byte-count number config field (the file field's `maxSize`): a plain
+* number input that live-previews the value as a human-readable size ('= 2.5 MB') so authors are
+* not left decoding raw bytes. Stores the raw byte number unchanged.
+*/
+const ByteSizeField = (props) => {
+	const { path, setValue, value } = useField({ path: props.path });
+	const label = toStaticLabel(props.field?.label ?? props.label);
+	const description = toStaticLabel(props.field?.admin?.description);
+	const handleChange = (event) => {
+		if (event.target.value === "") {
+			setValue(null);
+			return;
+		}
+		const parsed = Number(event.target.value);
+		if (Number.isFinite(parsed)) setValue(parsed);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "field-type number",
+		style: { marginBlockEnd: "1rem" },
+		children: [/* @__PURE__ */ jsx(FieldLabel, {
+			label,
+			path
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "field-type__wrap",
+			children: [
+				/* @__PURE__ */ jsx("input", {
+					id: `field-${path.replace(/\./g, "__")}`,
+					min: 0,
+					name: path,
+					onChange: handleChange,
+					type: "number",
+					value: typeof value === "number" ? value : ""
+				}),
+				typeof value === "number" && value > 0 ? /* @__PURE__ */ jsx("div", {
+					className: "field-description",
+					children: `= ${formatBytes(value)}`
+				}) : null,
+				/* @__PURE__ */ jsx(FieldDescription, {
+					description,
+					path
+				})
+			]
+		})]
+	});
+};
+//#endregion
+export { ByteSizeField };
+
+//# sourceMappingURL=ByteSizeField.js.map

package/dist/client/ByteSizeField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ByteSizeField.js","names":[],"sources":["../../src/client/ByteSizeField.tsx"],"sourcesContent":["'use client'\n\nimport { FieldDescription, FieldLabel, useField } from '@payloadcms/ui'\nimport type { ChangeEvent } from 'react'\nimport { formatBytes } from '../uploads/formatBytes'\nimport { toStaticLabel } from './toStaticLabel'\n\n/** Props: standard number field client props; label and description arrive resolved on `field`. */\nexport type ByteSizeFieldProps = {\n\tpath?: string\n\tfield?: { label?: unknown; admin?: { description?: unknown } }\n\tlabel?: unknown\n}\n\n/**\n * The `Field` mounted on a byte-count number config field (the file field's `maxSize`): a plain\n * number input that live-previews the value as a human-readable size ('= 2.5 MB') so authors are\n * not left decoding raw bytes. Stores the raw byte number unchanged.\n */\nexport const ByteSizeField = (props: ByteSizeFieldProps) => {\n\tconst { path, setValue, value } = useField<number>({ path: props.path })\n\tconst label = toStaticLabel(props.field?.label ?? props.label)\n\tconst description = toStaticLabel(props.field?.admin?.description)\n\n\tconst handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n\t\tif (event.target.value === '') {\n\t\t\tsetValue(null)\n\t\t\treturn\n\t\t}\n\t\tconst parsed = Number(event.target.value)\n\t\tif (Number.isFinite(parsed)) {\n\t\t\tsetValue(parsed)\n\t\t}\n\t}\n\n\treturn (\n\t\t<div className=\"field-type number\" style={{ marginBlockEnd: '1rem' }}>\n\t\t\t<FieldLabel label={label} path={path} />\n\t\t\t<div className=\"field-type__wrap\">\n\t\t\t\t<input\n\t\t\t\t\tid={`field-${path.replace(/\\./g, '__')}`}\n\t\t\t\t\tmin={0}\n\t\t\t\t\tname={path}\n\t\t\t\t\tonChange={handleChange}\n\t\t\t\t\ttype=\"number\"\n\t\t\t\t\tvalue={typeof value === 'number' ? value : ''}\n\t\t\t\t/>\n\t\t\t\t{typeof value === 'number' && value > 0 ? (\n\t\t\t\t\t<div className=\"field-description\">{`= ${formatBytes(value)}`}</div>\n\t\t\t\t) : null}\n\t\t\t\t<FieldDescription description={description} path={path} />\n\t\t\t</div>\n\t\t</div>\n\t)\n}\n"],"mappings":";;;;;;;;;;;AAmBA,MAAa,iBAAiB,UAA8B;CAC3D,MAAM,EAAE,MAAM,UAAU,UAAU,SAAiB,EAAE,MAAM,MAAM,KAAK,CAAC;CACvE,MAAM,QAAQ,cAAc,MAAM,OAAO,SAAS,MAAM,KAAK;CAC7D,MAAM,cAAc,cAAc,MAAM,OAAO,OAAO,WAAW;CAEjE,MAAM,gBAAgB,UAAyC;EAC9D,IAAI,MAAM,OAAO,UAAU,IAAI;GAC9B,SAAS,IAAI;GACb;EACD;EACA,MAAM,SAAS,OAAO,MAAM,OAAO,KAAK;EACxC,IAAI,OAAO,SAAS,MAAM,GACzB,SAAS,MAAM;CAEjB;CAEA,OACC,qBAAC,OAAD;EAAK,WAAU;EAAoB,OAAO,EAAE,gBAAgB,OAAO;YAAnE,CACC,oBAAC,YAAD;GAAmB;GAAa;EAAO,CAAA,GACvC,qBAAC,OAAD;GAAK,WAAU;aAAf;IACC,oBAAC,SAAD;KACC,IAAI,SAAS,KAAK,QAAQ,OAAO,IAAI;KACrC,KAAK;KACL,MAAM;KACN,UAAU;KACV,MAAK;KACL,OAAO,OAAO,UAAU,WAAW,QAAQ;IAC3C,CAAA;IACA,OAAO,UAAU,YAAY,QAAQ,IACrC,oBAAC,OAAD;KAAK,WAAU;eAAqB,KAAK,YAAY,KAAK;IAAS,CAAA,IAChE;IACJ,oBAAC,kBAAD;KAA+B;KAAmB;IAAO,CAAA;GACrD;IACD;;AAEP"}

package/dist/client/ConditionBuilder.js

@@ -6,8 +6,9 @@ import { operandFromRow } from "./synthesizeClientField.js";
 import { ConditionRow } from "./ConditionRow.js";
 import { reduceFieldsToValues, transformWhereQuery } from "payload/shared";
 import { Button, useFormFields } from "@payloadcms/ui";
-import { useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import "./admin.css";
 //#region src/client/ConditionBuilder.tsx
 const toRow = (constraint) => {
 	const field = Object.keys(constraint)[0];

package/dist/client/ConditionBuilder.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConditionBuilder.js","names":["useTranslation"],"sources":["../../src/client/ConditionBuilder.tsx"],"sourcesContent":["'use client'\n\nimport { Button, useFormFields } from '@payloadcms/ui'\nimport type { Operator, Where } from 'payload'\nimport { reduceFieldsToValues, transformWhereQuery } from 'payload/shared'\nimport { useMemo } from 'react'\nimport { type ConditionFieldType, firstOperatorFor } from '../conditions/fieldTypes'\nimport { keys } from '../translations/keys'\nimport { useTranslation } from '../translations/useTranslation'\nimport { ConditionRow, type RowCondition } from './ConditionRow'\nimport { type ConditionOperand, type FieldRow, operandFromRow } from './synthesizeClientField'\n\nexport type ConditionBuilderProps = {\n\tvalue?: Where\n\tonChange: (next: Where) => void\n\tconditionTypes: Record<string, ConditionFieldType>\n\t/** This field's own machine name, excluded from the operand list (a field cannot condition on itself). */\n\tselfName?: string\n}\n\nconst toRow = (constraint: Record<string, unknown>): RowCondition | null => {\n\tconst field = Object.keys(constraint)[0]\n\tif (!field) {\n\t\treturn null\n\t}\n\tconst ops = constraint[field] as Record<string, unknown>\n\tconst operator = Object.keys(ops)[0] as Operator | undefined\n\tif (!operator) {\n\t\treturn null\n\t}\n\treturn { field, operator, value: ops[operator] }\n}\n\nconst fromRow = (row: RowCondition): Where => ({ [row.field]: { [row.operator]: row.value } })\n\nconst readGroups = (value: Where | undefined): RowCondition[][] => {\n\tif (!value || Object.keys(value).length === 0) {\n\t\treturn []\n\t}\n\tconst canonical = transformWhereQuery(value)\n\tconst or = Array.isArray(canonical.or) ? canonical.or : []\n\treturn or.map((group) => {\n\t\tconst and = Array.isArray((group as Where).and) ? ((group as Where).and as Where[]) : []\n\t\treturn and\n\t\t\t.map((constraint) => toRow(constraint as Record<string, unknown>))\n\t\t\t.filter((row): row is RowCondition => row !== null)\n\t})\n}\n\nconst writeGroups = (groups: RowCondition[][]): Where => ({\n\tor: groups.filter((group) => group.length > 0).map((group) => ({ and: group.map(fromRow) })),\n})\n\nconst operandsFromData = (\n\tdata: Record<string, unknown>,\n\tconditionTypes: Record<string, ConditionFieldType>,\n\tselfName: string | undefined\n): ConditionOperand[] => {\n\tconst rows = Array.isArray(data.fields) ? (data.fields as FieldRow[]) : []\n\treturn rows\n\t\t.map((row) => operandFromRow(row, conditionTypes))\n\t\t.filter((operand): operand is ConditionOperand => operand !== null && operand.name !== selfName)\n}\n\nexport const ConditionBuilder = ({\n\tvalue,\n\tonChange,\n\tconditionTypes,\n\tselfName,\n}: ConditionBuilderProps) => {\n\tconst { t } = useTranslation()\n\t// Serialize the operand list so the builder re-renders only when operands actually change (a field\n\t// added, renamed, retyped, or its options edited), not on every unrelated form-state update.\n\tconst operandsJson = useFormFields(([fields]) =>\n\t\tJSON.stringify(operandsFromData(reduceFieldsToValues(fields, true), conditionTypes, selfName))\n\t)\n\tconst operands = useMemo(() => JSON.parse(operandsJson) as ConditionOperand[], [operandsJson])\n\n\tconst groups = readGroups(value)\n\tconst emit = (next: RowCondition[][]) => onChange(writeGroups(next))\n\n\tconst addCondition = (groupIndex: number) => {\n\t\tconst first = operands[0]\n\t\tif (!first) {\n\t\t\treturn\n\t\t}\n\t\tconst row: RowCondition = {\n\t\t\tfield: first.name,\n\t\t\toperator: firstOperatorFor(first.conditionType),\n\t\t\tvalue: undefined,\n\t\t}\n\t\temit(\n\t\t\tgroups.length === 0\n\t\t\t\t? [[row]]\n\t\t\t\t: groups.map((group, index) => (index === groupIndex ? [...group, row] : group))\n\t\t)\n\t}\n\n\tconst addOrGroup = () => {\n\t\tconst first = operands[0]\n\t\tif (!first) {\n\t\t\treturn\n\t\t}\n\t\temit([\n\t\t\t...groups,\n\t\t\t[{ field: first.name, operator: firstOperatorFor(first.conditionType), value: undefined }],\n\t\t])\n\t}\n\n\tconst updateRow = (groupIndex: number, rowIndex: number, row: RowCondition) =>\n\t\temit(\n\t\t\tgroups.map((group, index) =>\n\t\t\t\tindex === groupIndex\n\t\t\t\t\t? group.map((existing, position) => (position === rowIndex ? row : existing))\n\t\t\t\t\t: group\n\t\t\t)\n\t\t)\n\n\tconst removeRow = (groupIndex: number, rowIndex: number) =>\n\t\temit(\n\t\t\tgroups\n\t\t\t\t.map((group, index) =>\n\t\t\t\t\tindex === groupIndex ? group.filter((_, position) => position !== rowIndex) : group\n\t\t\t\t)\n\t\t\t\t.filter((group) => group.length > 0)\n\t\t)\n\n\tif (operands.length === 0) {\n\t\treturn <p className=\"fb-condition-builder__hint\">{t(keys.conditionNoFields)}</p>\n\t}\n\n\treturn (\n\t\t<div className=\"fb-condition-builder\">\n\t\t\t{groups.length === 0 ? (\n\t\t\t\t<p className=\"fb-condition-builder__hint\">{t(keys.conditionEmpty)}</p>\n\t\t\t) : (\n\t\t\t\tgroups.map((group, groupIndex) => (\n\t\t\t\t\t// biome-ignore lint/suspicious/noArrayIndexKey: groups are positional and never reordered\n\t\t\t\t\t<div key={groupIndex} className=\"fb-condition-builder__group\">\n\t\t\t\t\t\t{groupIndex > 0 ? (\n\t\t\t\t\t\t\t<div className=\"fb-condition-builder__or-label\">{t(keys.conditionOr)}</div>\n\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t{group.map((row, rowIndex) => (\n\t\t\t\t\t\t\t// biome-ignore lint/suspicious/noArrayIndexKey: rows are positional and never reordered\n\t\t\t\t\t\t\t<div key={rowIndex} className=\"fb-condition-builder__and-row\">\n\t\t\t\t\t\t\t\t{rowIndex > 0 ? (\n\t\t\t\t\t\t\t\t\t<span className=\"fb-condition-builder__and-label\">{t(keys.conditionAnd)}</span>\n\t\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t\t\t<ConditionRow\n\t\t\t\t\t\t\t\t\tcondition={row}\n\t\t\t\t\t\t\t\t\toperands={operands}\n\t\t\t\t\t\t\t\t\tonChange={(next) => updateRow(groupIndex, rowIndex, next)}\n\t\t\t\t\t\t\t\t\tonRemove={() => removeRow(groupIndex, rowIndex)}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t))}\n\t\t\t\t\t\t<div className=\"fb-condition-builder__add-condition\">\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tbuttonStyle=\"icon-label\"\n\t\t\t\t\t\t\t\ticon=\"plus\"\n\t\t\t\t\t\t\t\ticonStyle=\"with-border\"\n\t\t\t\t\t\t\t\ticonPosition=\"left\"\n\t\t\t\t\t\t\t\tonClick={() => addCondition(groupIndex)}\n\t\t\t\t\t\t\t\tmargin={false}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{t(keys.conditionAddCondition)}\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t))\n\t\t\t)}\n\t\t\t<div className=\"fb-condition-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={() => (groups.length === 0 ? addCondition(0) : addOrGroup())}\n\t\t\t\t\tmargin={false}\n\t\t\t\t>\n\t\t\t\t\t{groups.length === 0 ? t(keys.conditionAddCondition) : t(keys.conditionAddOr)}\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":"ConditionBuilder.js","names":["useTranslation"],"sources":["../../src/client/ConditionBuilder.tsx"],"sourcesContent":["'use client'\n\nimport { Button, useFormFields } from '@payloadcms/ui'\nimport type { Operator, Where } from 'payload'\nimport { reduceFieldsToValues, transformWhereQuery } from 'payload/shared'\nimport { useMemo } from 'react'\nimport { type ConditionFieldType, firstOperatorFor } from '../conditions/fieldTypes'\nimport { keys } from '../translations/keys'\nimport { useTranslation } from '../translations/useTranslation'\nimport { ConditionRow, type RowCondition } from './ConditionRow'\nimport { type ConditionOperand, type FieldRow, operandFromRow } from './synthesizeClientField'\nimport './admin.css'\n\nexport type ConditionBuilderProps = {\n\tvalue?: Where\n\tonChange: (next: Where) => void\n\tconditionTypes: Record<string, ConditionFieldType>\n\t/** This field's own machine name, excluded from the operand list (a field cannot condition on itself). */\n\tselfName?: string\n}\n\nconst toRow = (constraint: Record<string, unknown>): RowCondition | null => {\n\tconst field = Object.keys(constraint)[0]\n\tif (!field) {\n\t\treturn null\n\t}\n\tconst ops = constraint[field] as Record<string, unknown>\n\tconst operator = Object.keys(ops)[0] as Operator | undefined\n\tif (!operator) {\n\t\treturn null\n\t}\n\treturn { field, operator, value: ops[operator] }\n}\n\nconst fromRow = (row: RowCondition): Where => ({ [row.field]: { [row.operator]: row.value } })\n\nconst readGroups = (value: Where | undefined): RowCondition[][] => {\n\tif (!value || Object.keys(value).length === 0) {\n\t\treturn []\n\t}\n\tconst canonical = transformWhereQuery(value)\n\tconst or = Array.isArray(canonical.or) ? canonical.or : []\n\treturn or.map((group) => {\n\t\tconst and = Array.isArray((group as Where).and) ? ((group as Where).and as Where[]) : []\n\t\treturn and\n\t\t\t.map((constraint) => toRow(constraint as Record<string, unknown>))\n\t\t\t.filter((row): row is RowCondition => row !== null)\n\t})\n}\n\nconst writeGroups = (groups: RowCondition[][]): Where => ({\n\tor: groups.filter((group) => group.length > 0).map((group) => ({ and: group.map(fromRow) })),\n})\n\nconst operandsFromData = (\n\tdata: Record<string, unknown>,\n\tconditionTypes: Record<string, ConditionFieldType>,\n\tselfName: string | undefined\n): ConditionOperand[] => {\n\tconst rows = Array.isArray(data.fields) ? (data.fields as FieldRow[]) : []\n\treturn rows\n\t\t.map((row) => operandFromRow(row, conditionTypes))\n\t\t.filter((operand): operand is ConditionOperand => operand !== null && operand.name !== selfName)\n}\n\nexport const ConditionBuilder = ({\n\tvalue,\n\tonChange,\n\tconditionTypes,\n\tselfName,\n}: ConditionBuilderProps) => {\n\tconst { t } = useTranslation()\n\t// Serialize the operand list so the builder re-renders only when operands actually change (a field\n\t// added, renamed, retyped, or its options edited), not on every unrelated form-state update.\n\tconst operandsJson = useFormFields(([fields]) =>\n\t\tJSON.stringify(operandsFromData(reduceFieldsToValues(fields, true), conditionTypes, selfName))\n\t)\n\tconst operands = useMemo(() => JSON.parse(operandsJson) as ConditionOperand[], [operandsJson])\n\n\tconst groups = readGroups(value)\n\tconst emit = (next: RowCondition[][]) => onChange(writeGroups(next))\n\n\tconst addCondition = (groupIndex: number) => {\n\t\tconst first = operands[0]\n\t\tif (!first) {\n\t\t\treturn\n\t\t}\n\t\tconst row: RowCondition = {\n\t\t\tfield: first.name,\n\t\t\toperator: firstOperatorFor(first.conditionType),\n\t\t\tvalue: undefined,\n\t\t}\n\t\temit(\n\t\t\tgroups.length === 0\n\t\t\t\t? [[row]]\n\t\t\t\t: groups.map((group, index) => (index === groupIndex ? [...group, row] : group))\n\t\t)\n\t}\n\n\tconst addOrGroup = () => {\n\t\tconst first = operands[0]\n\t\tif (!first) {\n\t\t\treturn\n\t\t}\n\t\temit([\n\t\t\t...groups,\n\t\t\t[{ field: first.name, operator: firstOperatorFor(first.conditionType), value: undefined }],\n\t\t])\n\t}\n\n\tconst updateRow = (groupIndex: number, rowIndex: number, row: RowCondition) =>\n\t\temit(\n\t\t\tgroups.map((group, index) =>\n\t\t\t\tindex === groupIndex\n\t\t\t\t\t? group.map((existing, position) => (position === rowIndex ? row : existing))\n\t\t\t\t\t: group\n\t\t\t)\n\t\t)\n\n\tconst removeRow = (groupIndex: number, rowIndex: number) =>\n\t\temit(\n\t\t\tgroups\n\t\t\t\t.map((group, index) =>\n\t\t\t\t\tindex === groupIndex ? group.filter((_, position) => position !== rowIndex) : group\n\t\t\t\t)\n\t\t\t\t.filter((group) => group.length > 0)\n\t\t)\n\n\tif (operands.length === 0) {\n\t\treturn <p className=\"fb-condition-builder__hint\">{t(keys.conditionNoFields)}</p>\n\t}\n\n\treturn (\n\t\t<div className=\"fb-condition-builder\">\n\t\t\t{groups.length === 0 ? (\n\t\t\t\t<p className=\"fb-condition-builder__hint\">{t(keys.conditionEmpty)}</p>\n\t\t\t) : (\n\t\t\t\tgroups.map((group, groupIndex) => (\n\t\t\t\t\t// biome-ignore lint/suspicious/noArrayIndexKey: groups are positional and never reordered\n\t\t\t\t\t<div key={groupIndex} className=\"fb-condition-builder__group\">\n\t\t\t\t\t\t{groupIndex > 0 ? (\n\t\t\t\t\t\t\t<div className=\"fb-condition-builder__or-label\">{t(keys.conditionOr)}</div>\n\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t{group.map((row, rowIndex) => (\n\t\t\t\t\t\t\t// biome-ignore lint/suspicious/noArrayIndexKey: rows are positional and never reordered\n\t\t\t\t\t\t\t<div key={rowIndex} className=\"fb-condition-builder__and-row\">\n\t\t\t\t\t\t\t\t{rowIndex > 0 ? (\n\t\t\t\t\t\t\t\t\t<span className=\"fb-condition-builder__and-label\">{t(keys.conditionAnd)}</span>\n\t\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t\t\t<ConditionRow\n\t\t\t\t\t\t\t\t\tcondition={row}\n\t\t\t\t\t\t\t\t\toperands={operands}\n\t\t\t\t\t\t\t\t\tonChange={(next) => updateRow(groupIndex, rowIndex, next)}\n\t\t\t\t\t\t\t\t\tonRemove={() => removeRow(groupIndex, rowIndex)}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t))}\n\t\t\t\t\t\t<div className=\"fb-condition-builder__add-condition\">\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tbuttonStyle=\"icon-label\"\n\t\t\t\t\t\t\t\ticon=\"plus\"\n\t\t\t\t\t\t\t\ticonStyle=\"with-border\"\n\t\t\t\t\t\t\t\ticonPosition=\"left\"\n\t\t\t\t\t\t\t\tonClick={() => addCondition(groupIndex)}\n\t\t\t\t\t\t\t\tmargin={false}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{t(keys.conditionAddCondition)}\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t))\n\t\t\t)}\n\t\t\t<div className=\"fb-condition-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={() => (groups.length === 0 ? addCondition(0) : addOrGroup())}\n\t\t\t\t\tmargin={false}\n\t\t\t\t>\n\t\t\t\t\t{groups.length === 0 ? t(keys.conditionAddCondition) : t(keys.conditionAddOr)}\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/FieldNameSelect.d.ts

@@ -0,0 +1,20 @@
+//#region src/client/FieldNameSelect.d.ts
+/** Props: standard JSON/text field client props plus the `types` allow-list we pass via clientProps. */
+type FieldNameSelectProps = {
+  path?: string;
+  field?: {
+    label?: unknown;
+  };
+  label?: unknown; /** Sibling `fields` blocks whose `blockType` is in this list populate the select's options. */
+  types: string[];
+};
+/**
+ * The `Field` mounted on a text config field (e.g. an action's `toField`) that should be authored
+ * by picking from the form's own fields rather than free-typing a name. Options come from the
+ * sibling `fields` blocks array, filtered to `types`; the stored value is kept selectable even if
+ * it no longer matches any field, so switching to this component never silently drops data.
+ */
+declare const FieldNameSelect: (props: FieldNameSelectProps) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { FieldNameSelect };
+//# sourceMappingURL=FieldNameSelect.d.ts.map

package/dist/client/FieldNameSelect.js

@@ -0,0 +1,58 @@
+"use client";
+import { fieldNamesOfType } from "../fields/fieldNamesOfType.js";
+import { toStaticLabel } from "./toStaticLabel.js";
+import { reduceFieldsToValues } from "payload/shared";
+import { FieldLabel, ReactSelect, useField, useFormFields } from "@payloadcms/ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+//#region src/client/FieldNameSelect.tsx
+const optionsFromData = (data, types) => {
+	const rows = Array.isArray(data.fields) ? data.fields : [];
+	const labels = /* @__PURE__ */ new Map();
+	for (const row of rows) {
+		if (!row || typeof row !== "object") continue;
+		const { name, label } = row;
+		if (typeof name === "string" && typeof label === "string" && label.length > 0) labels.set(name.trim(), label);
+	}
+	return fieldNamesOfType(data.fields, types).map((name) => ({
+		label: labels.get(name) ?? name,
+		value: name
+	}));
+};
+/**
+* The `Field` mounted on a text config field (e.g. an action's `toField`) that should be authored
+* by picking from the form's own fields rather than free-typing a name. Options come from the
+* sibling `fields` blocks array, filtered to `types`; the stored value is kept selectable even if
+* it no longer matches any field, so switching to this component never silently drops data.
+*/
+const FieldNameSelect = (props) => {
+	const { path, setValue, value } = useField({ path: props.path });
+	const label = toStaticLabel(props.field?.label ?? props.label);
+	const optionsJson = useFormFields(([fields]) => JSON.stringify(optionsFromData(reduceFieldsToValues(fields, true), props.types)));
+	const options = useMemo(() => JSON.parse(optionsJson), [optionsJson]);
+	const allOptions = value && !options.some((option) => option.value === value) ? [...options, {
+		label: value,
+		value
+	}] : options;
+	const handleChange = (selected) => {
+		const chosen = Array.isArray(selected) ? selected[0] : selected;
+		setValue(chosen ? chosen.value : "");
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "field-type",
+		style: { marginBlockEnd: "1rem" },
+		children: [/* @__PURE__ */ jsx(FieldLabel, {
+			label,
+			path
+		}), /* @__PURE__ */ jsx(ReactSelect, {
+			options: allOptions,
+			value: allOptions.find((option) => option.value === value) ?? void 0,
+			isClearable: true,
+			onChange: handleChange
+		})]
+	});
+};
+//#endregion
+export { FieldNameSelect };
+
+//# sourceMappingURL=FieldNameSelect.js.map

package/dist/client/FieldNameSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldNameSelect.js","names":[],"sources":["../../src/client/FieldNameSelect.tsx"],"sourcesContent":["'use client'\n\nimport {\n\tFieldLabel,\n\tReactSelect,\n\ttype ReactSelectOption,\n\tuseField,\n\tuseFormFields,\n} from '@payloadcms/ui'\nimport { reduceFieldsToValues } from 'payload/shared'\nimport { useMemo } from 'react'\nimport { fieldNamesOfType } from '../fields/fieldNamesOfType'\nimport type { FieldRow } from './synthesizeClientField'\nimport { toStaticLabel } from './toStaticLabel'\n\n/** Props: standard JSON/text field client props plus the `types` allow-list we pass via clientProps. */\nexport type FieldNameSelectProps = {\n\tpath?: string\n\tfield?: { label?: unknown }\n\tlabel?: unknown\n\t/** Sibling `fields` blocks whose `blockType` is in this list populate the select's options. */\n\ttypes: string[]\n}\n\nconst optionsFromData = (data: Record<string, unknown>, types: string[]): ReactSelectOption[] => {\n\tconst rows = Array.isArray(data.fields) ? (data.fields as unknown[]) : []\n\tconst labels = new Map<string, string>()\n\tfor (const row of rows) {\n\t\tif (!row || typeof row !== 'object') {\n\t\t\tcontinue\n\t\t}\n\t\tconst { name, label } = row as FieldRow\n\t\tif (typeof name === 'string' && typeof label === 'string' && label.length > 0) {\n\t\t\tlabels.set(name.trim(), label)\n\t\t}\n\t}\n\treturn fieldNamesOfType(data.fields, types).map((name) => ({\n\t\tlabel: labels.get(name) ?? name,\n\t\tvalue: name,\n\t}))\n}\n\n/**\n * The `Field` mounted on a text config field (e.g. an action's `toField`) that should be authored\n * by picking from the form's own fields rather than free-typing a name. Options come from the\n * sibling `fields` blocks array, filtered to `types`; the stored value is kept selectable even if\n * it no longer matches any field, so switching to this component never silently drops data.\n */\nexport const FieldNameSelect = (props: FieldNameSelectProps) => {\n\tconst { path, setValue, value } = useField<string>({ path: props.path })\n\tconst label = toStaticLabel(props.field?.label ?? props.label)\n\n\tconst optionsJson = useFormFields(([fields]) =>\n\t\tJSON.stringify(optionsFromData(reduceFieldsToValues(fields, true), props.types))\n\t)\n\tconst options = useMemo(() => JSON.parse(optionsJson) as ReactSelectOption[], [optionsJson])\n\n\tconst allOptions =\n\t\tvalue && !options.some((option) => option.value === value)\n\t\t\t? [...options, { label: value, value }]\n\t\t\t: options\n\n\tconst handleChange = (selected: ReactSelectOption | ReactSelectOption[] | null) => {\n\t\tconst chosen = Array.isArray(selected) ? selected[0] : selected\n\t\tsetValue(chosen ? (chosen.value as string) : '')\n\t}\n\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<ReactSelect\n\t\t\t\toptions={allOptions}\n\t\t\t\tvalue={allOptions.find((option) => option.value === value) ?? undefined}\n\t\t\t\tisClearable\n\t\t\t\tonChange={handleChange}\n\t\t\t/>\n\t\t</div>\n\t)\n}\n"],"mappings":";;;;;;;;AAwBA,MAAM,mBAAmB,MAA+B,UAAyC;CAChG,MAAM,OAAO,MAAM,QAAQ,KAAK,MAAM,IAAK,KAAK,SAAuB,CAAC;CACxE,MAAM,yBAAS,IAAI,IAAoB;CACvC,KAAK,MAAM,OAAO,MAAM;EACvB,IAAI,CAAC,OAAO,OAAO,QAAQ,UAC1B;EAED,MAAM,EAAE,MAAM,UAAU;EACxB,IAAI,OAAO,SAAS,YAAY,OAAO,UAAU,YAAY,MAAM,SAAS,GAC3E,OAAO,IAAI,KAAK,KAAK,GAAG,KAAK;CAE/B;CACA,OAAO,iBAAiB,KAAK,QAAQ,KAAK,EAAE,KAAK,UAAU;EAC1D,OAAO,OAAO,IAAI,IAAI,KAAK;EAC3B,OAAO;CACR,EAAE;AACH;;;;;;;AAQA,MAAa,mBAAmB,UAAgC;CAC/D,MAAM,EAAE,MAAM,UAAU,UAAU,SAAiB,EAAE,MAAM,MAAM,KAAK,CAAC;CACvE,MAAM,QAAQ,cAAc,MAAM,OAAO,SAAS,MAAM,KAAK;CAE7D,MAAM,cAAc,eAAe,CAAC,YACnC,KAAK,UAAU,gBAAgB,qBAAqB,QAAQ,IAAI,GAAG,MAAM,KAAK,CAAC,CAChF;CACA,MAAM,UAAU,cAAc,KAAK,MAAM,WAAW,GAA0B,CAAC,WAAW,CAAC;CAE3F,MAAM,aACL,SAAS,CAAC,QAAQ,MAAM,WAAW,OAAO,UAAU,KAAK,IACtD,CAAC,GAAG,SAAS;EAAE,OAAO;EAAO;CAAM,CAAC,IACpC;CAEJ,MAAM,gBAAgB,aAA6D;EAClF,MAAM,SAAS,MAAM,QAAQ,QAAQ,IAAI,SAAS,KAAK;EACvD,SAAS,SAAU,OAAO,QAAmB,EAAE;CAChD;CAEA,OACC,qBAAC,OAAD;EAAK,WAAU;EAAa,OAAO,EAAE,gBAAgB,OAAO;YAA5D,CACC,oBAAC,YAAD;GAAmB;GAAa;EAAO,CAAA,GACvC,oBAAC,aAAD;GACC,SAAS;GACT,OAAO,WAAW,MAAM,WAAW,OAAO,UAAU,KAAK,KAAK,KAAA;GAC9D,aAAA;GACA,UAAU;EACV,CAAA,CACG;;AAEP"}

package/dist/client/FlowBuilder.d.ts

@@ -1,5 +1,4 @@
 import { ConditionFieldType } from "../conditions/fieldTypes.js";
-
 //#region src/client/FlowBuilder.d.ts
 type FlowBuilderProps = {
   path?: string;

package/dist/client/FlowBuilder.js

@@ -1,24 +1,23 @@
 "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";
+import { useMemo, useRef, useState } from "react";
 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";
+import "./admin.css";
 //#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 TransitionRow = ({ transition, stepOptions, conditionTypes, isFirst, isLast, onChange, onRemove, onMoveUp, onMoveDown }) => {
 	const handleGotoChange = (selected) => {
 		const chosen = Array.isArray(selected) ? selected[0] : selected;
 		if (chosen) onChange({
@@ -39,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
@@ -94,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,
@@ -154,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, {}),
@@ -202,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",
@@ -229,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", {
@@ -266,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,
@@ -293,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);
@@ -321,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);
@@ -344,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);
@@ -359,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),
@@ -387,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, {