@questpie/admin 3.1.0 → 3.2.1

package/dist/client/views/collection/bulk-action-toolbar.mjs

@@ -22,6 +22,13 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 *
 * Combines both functionalities into a single non-jumping UI element.
 */
+function getSelectedIds(items) {
+	return items.flatMap((item) => {
+		if (typeof item !== "object" || item === null || !("id" in item)) return [];
+		const id = item.id;
+		return id == null ? [] : [String(id)];
+	});
+}
 /**
 * BulkActionToolbar - Shows selection count and bulk actions
 *
@@ -142,12 +149,12 @@ function BulkActionToolbar(t0) {
 			const { handler } = action_0;
 			if (action_0.id === "deleteMany" && onBulkDelete) {
 				setIsLoading(true);
-				const ids = selectedItems.map(_temp2).filter(Boolean);
+				const ids = getSelectedIds(selectedItems);
 				try {
 					await onBulkDelete(ids);
 					table.resetRowSelection();
 					setIsLoading(false);
-				} catch (t10$1) {
+				} catch {
 					helpers.toast.error(t("collection.bulkDeleteError"));
 					setIsLoading(false);
 				}
@@ -155,32 +162,32 @@ function BulkActionToolbar(t0) {
 			}
 			if (action_0.id === "restoreMany" && onBulkRestore) {
 				setIsLoading(true);
-				const ids_0 = selectedItems.map(_temp3).filter(Boolean);
+				const ids_0 = getSelectedIds(selectedItems);
 				try {
 					await onBulkRestore(ids_0);
 					table.resetRowSelection();
 					setIsLoading(false);
-				} catch (t11$1) {
+				} catch {
 					helpers.toast.error(t("collection.bulkRestoreError"));
 					setIsLoading(false);
 				}
 				return;
 			}
-			bb96: switch (handler.type) {
+			bb86: switch (handler.type) {
 				case "api": {
 					setIsLoading(true);
-					const ids_1 = selectedItems.map(_temp4).filter(Boolean);
+					const ids_1 = getSelectedIds(selectedItems);
 					const method = handler.method ? handler.method : "POST";
 					try {
 						helpers.toast.info(`Bulk API call: ${method} ${handler.endpoint} (${ids_1.length} items)`);
 						helpers.refresh();
 						table.resetRowSelection();
 						setIsLoading(false);
-					} catch (t12$1) {
+					} catch {
 						helpers.toast.error(t("collection.bulkActionFailed"));
 						setIsLoading(false);
 					}
-					break bb96;
+					break bb86;
 				}
 				case "custom":
 					setIsLoading(true);
@@ -188,18 +195,18 @@ function BulkActionToolbar(t0) {
 						await handler.fn(ctx);
 						table.resetRowSelection();
 						setIsLoading(false);
-					} catch (t13$1) {
+					} catch {
 						helpers.toast.error(t("collection.bulkActionFailed"));
 						setIsLoading(false);
 					}
-					break bb96;
+					break bb86;
 				case "dialog":
 				case "form":
 					onOpenDialog?.(action_0, selectedItems);
-					break bb96;
+					break bb86;
 				case "navigate":
 					helpers.toast.error("Navigate action not supported for bulk operations");
-					break bb96;
+					break bb86;
 				case "server": onOpenDialog?.(action_0, selectedItems);
 			}
 		};
@@ -272,8 +279,8 @@ function BulkActionToolbar(t0) {
 	let t17;
 	let t18;
 	if ($[38] !== filterCount || $[39] !== handleActionClick || $[40] !== handleSelectAllMatching || $[41] !== hasFilters || $[42] !== hasSelection || $[43] !== isDisabled || $[44] !== isLoading || $[45] !== isSelectingAll || $[46] !== isVisible || $[47] !== onClearFilters || $[48] !== onOpenFilters || $[49] !== onSelectAllMatching || $[50] !== pageCount || $[51] !== resolveText || $[52] !== selectedCount || $[53] !== t || $[54] !== table || $[55] !== totalCount || $[56] !== visibleActions) {
-		const regularActions = visibleActions.filter(_temp5);
-		const destructiveActions = visibleActions.filter(_temp6);
+		const regularActions = visibleActions.filter(_temp2);
+		const destructiveActions = visibleActions.filter(_temp3);
 		t17 = isVisible ? "open" : "closed";
 		t18 = "qa-bulk-toolbar fixed bottom-6 left-1/2 z-50 max-w-[calc(100%-2rem)] -translate-x-1/2 transition-[opacity,translate,scale] duration-[var(--motion-duration-slow)] ease-[var(--motion-ease-enter)] data-[state=closed]:pointer-events-none data-[state=closed]:translate-y-2 data-[state=closed]:scale-[0.98] data-[state=closed]:opacity-0 data-[state=open]:translate-y-0 data-[state=open]:scale-100 data-[state=open]:opacity-100 motion-reduce:transition-none sm:max-w-none";
 		t14 = "qa-bulk-toolbar__bar bg-background border-border flex items-center gap-2 overflow-x-auto rounded-full border px-3 py-2 shadow-lg transition-[gap,padding] duration-[var(--motion-duration-base)] ease-[var(--motion-ease-standard)] sm:gap-3 sm:px-4 sm:py-2.5";
@@ -492,21 +499,12 @@ function BulkActionToolbar(t0) {
 	} else t22 = $[85];
 	return t22;
 }
-function _temp6(a_0) {
+function _temp3(a_0) {
 	return a_0.variant === "destructive";
 }
-function _temp5(a) {
+function _temp2(a) {
 	return a.variant !== "destructive";
 }
-function _temp4(item_1) {
-	if (item_1 != null) return item_1.id;
-}
-function _temp3(item_0) {
-	if (item_0 != null) return item_0.id;
-}
-function _temp2(item) {
-	if (item != null) return item.id;
-}
 function _temp(row) {
 	return row.original;
 }

package/dist/client/views/collection/cells/primitive-cells.mjs

@@ -1,4 +1,5 @@
-import { useTranslation } from "../../../i18n/hooks.mjs";
+import { useResolveText, useTranslation } from "../../../i18n/hooks.mjs";
+import { resolveOptionLabelForValue } from "../../../components/primitives/option-label.mjs";
 import { Badge } from "../../../components/ui/badge.mjs";
 import { c } from "react/compiler-runtime";
 import "react";
@@ -364,10 +365,25 @@ function EmailCell(t0) {
 /**
 * Select/Status cell - badge display
 */
+function getSelectOptions(fieldDef) {
+	const options = fieldDef?.["~options"]?.options;
+	return Array.isArray(options) ? options : void 0;
+}
+function resolveSelectCellLabel({ value, fieldDef, resolveText, t, locale }) {
+	return resolveOptionLabelForValue({
+		value,
+		options: getSelectOptions(fieldDef),
+		resolveText,
+		t,
+		locale
+	});
+}
 function SelectCell(t0) {
-	const $ = c(3);
-	const { value } = t0;
-	if (value === null || value === void 0 || value === "") {
+	const $ = c(16);
+	const { value, fieldDef } = t0;
+	const { t, locale } = useTranslation();
+	const resolveText = useResolveText();
+	if (value === null || value === void 0 || value === "" || Array.isArray(value) && value.length === 0) {
 		let t1$1;
 		if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
 			t1$1 = /* @__PURE__ */ jsx("span", {
@@ -378,17 +394,51 @@ function SelectCell(t0) {
 		} else t1$1 = $[0];
 		return t1$1;
 	}
-	const t1 = String(value);
+	let t1;
+	if ($[1] !== value) {
+		t1 = Array.isArray(value) ? value : [value];
+		$[1] = value;
+		$[2] = t1;
+	} else t1 = $[2];
+	const values = t1;
 	let t2;
-	if ($[1] !== t1) {
-		t2 = /* @__PURE__ */ jsx(Badge, {
-			variant: "outline",
-			children: t1
+	if ($[3] !== fieldDef || $[4] !== locale || $[5] !== resolveText || $[6] !== t || $[7] !== values) {
+		let t3$1;
+		if ($[9] !== fieldDef || $[10] !== locale || $[11] !== resolveText || $[12] !== t) {
+			t3$1 = (item, index) => /* @__PURE__ */ jsx(Badge, {
+				variant: "outline",
+				children: resolveSelectCellLabel({
+					value: item,
+					fieldDef,
+					resolveText,
+					t,
+					locale
+				})
+			}, `${String(item)}-${index}`);
+			$[9] = fieldDef;
+			$[10] = locale;
+			$[11] = resolveText;
+			$[12] = t;
+			$[13] = t3$1;
+		} else t3$1 = $[13];
+		t2 = values.map(t3$1);
+		$[3] = fieldDef;
+		$[4] = locale;
+		$[5] = resolveText;
+		$[6] = t;
+		$[7] = values;
+		$[8] = t2;
+	} else t2 = $[8];
+	let t3;
+	if ($[14] !== t2) {
+		t3 = /* @__PURE__ */ jsx("span", {
+			className: "inline-flex max-w-[300px] flex-wrap gap-1",
+			children: t2
 		});
-		$[1] = t1;
-		$[2] = t2;
-	} else t2 = $[2];
-	return t2;
+		$[14] = t2;
+		$[15] = t3;
+	} else t3 = $[15];
+	return t3;
 }
 
 //#endregion

package/dist/client/views/collection/columns/build-columns.mjs

@@ -75,6 +75,7 @@ function ColumnHeader(t0) {
 const FIELD_TYPES_NEEDING_FIELD_DEF = new Set([
 	"object",
 	"array",
+	"select",
 	"relation",
 	"reverseRelation",
 	"upload",

package/dist/client/views/collection/form-view.mjs

@@ -10,6 +10,7 @@ import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSepara
 import { LocaleSwitcher } from "../../components/locale-switcher.mjs";
 import { Label } from "../../components/ui/label.mjs";
 import { RenderProfiler } from "../../lib/render-profiler.mjs";
+import { scrollFieldIntoView } from "../../contexts/focus-context.mjs";
 import { Checkbox } from "../../components/ui/checkbox.mjs";
 import { DateTimeInput } from "../../components/primitives/date-input.mjs";
 import { getDefaultFormActions } from "../../builder/types/action-registry.mjs";
@@ -63,6 +64,139 @@ function extractReactiveConfigs(schema) {
 	for (const [fieldName, fieldDef] of Object.entries(schema.fields)) if (fieldDef.reactive) configs[fieldName] = fieldDef.reactive;
 	return configs;
 }
+function isPlainObject(value) {
+	if (!value || typeof value !== "object") return false;
+	const prototype = Object.getPrototypeOf(value);
+	return prototype === Object.prototype || prototype === null;
+}
+function clonePreviewSnapshot(value) {
+	if (typeof structuredClone === "function") try {
+		return structuredClone(value);
+	} catch {}
+	const json = JSON.stringify(value);
+	return json === void 0 ? value : JSON.parse(json);
+}
+function arePreviewValuesEqual(a, b) {
+	if (Object.is(a, b)) return true;
+	if (Array.isArray(a) || Array.isArray(b)) {
+		if (!Array.isArray(a) || !Array.isArray(b) || a.length !== b.length) return false;
+		return a.every((value, index) => arePreviewValuesEqual(value, b[index]));
+	}
+	if (isPlainObject(a) || isPlainObject(b)) {
+		if (!isPlainObject(a) || !isPlainObject(b)) return false;
+		const aKeys = Object.keys(a);
+		const bKeys = Object.keys(b);
+		if (aKeys.length !== bKeys.length) return false;
+		return aKeys.every((key) => Object.prototype.hasOwnProperty.call(b, key) && arePreviewValuesEqual(a[key], b[key]));
+	}
+	return false;
+}
+function joinPreviewPath(basePath, key) {
+	return basePath ? `${basePath}.${key}` : key;
+}
+function diffPreviewSnapshots(previous, current, basePath = "") {
+	if (arePreviewValuesEqual(previous, current)) return [];
+	if (isPlainObject(previous) && isPlainObject(current)) {
+		const ops = [];
+		const keys = new Set([...Object.keys(previous), ...Object.keys(current)]);
+		for (const key of keys) {
+			const path = joinPreviewPath(basePath, key);
+			const previousHasKey = Object.prototype.hasOwnProperty.call(previous, key);
+			if (!Object.prototype.hasOwnProperty.call(current, key)) {
+				ops.push({
+					op: "remove",
+					path
+				});
+				continue;
+			}
+			if (!previousHasKey) {
+				ops.push({
+					op: "set",
+					path,
+					value: current[key]
+				});
+				continue;
+			}
+			ops.push(...diffPreviewSnapshots(previous[key], current[key], path));
+		}
+		return ops;
+	}
+	if (!basePath) return [{
+		op: "set",
+		path: "",
+		value: current
+	}];
+	return [{
+		op: "set",
+		path: basePath,
+		value: current
+	}];
+}
+function isSafePreviewEditPath(path) {
+	if (!path || path.length > 512) return false;
+	return path.split(".").every((segment) => segment.length > 0 && segment !== "__proto__" && segment !== "prototype" && segment !== "constructor");
+}
+function hasValueAtPath(value, path) {
+	let current = value;
+	for (const segment of path.split(".")) {
+		if (!current || typeof current !== "object") return false;
+		if (!Object.prototype.hasOwnProperty.call(current, segment)) return false;
+		current = current[segment];
+	}
+	return true;
+}
+function getTopLevelFieldSchema(schema, path) {
+	const topLevelField = path.split(".")[0];
+	if (!topLevelField) return void 0;
+	return schema?.fields?.[topLevelField];
+}
+function fieldSupportsInlineEdit(field, path, inputKind) {
+	const fieldType = field.metadata?.type;
+	const isNestedPath = path.includes(".");
+	if (fieldType === "object" || fieldType === "json") return isNestedPath;
+	switch (inputKind) {
+		case "text": return fieldType === "text" || fieldType === "email" || fieldType === "url" || fieldType === "select";
+		case "textarea": return fieldType === "textarea" || fieldType === "richText" || fieldType === "text";
+		case "number": return fieldType === "number";
+		case "boolean": return fieldType === "boolean";
+	}
+}
+function isAllowedPreviewEditPath({ message, schema, values }) {
+	if (!schema || !isSafePreviewEditPath(message.path)) return false;
+	if (message.fieldType === "relation") return false;
+	const blockMatch = message.path.match(/^([^.]+)\._values\.([^.]+)\.(.+)$/);
+	if (blockMatch) {
+		const [, blocksFieldName, blockId] = blockMatch;
+		if ((schema.fields?.[blocksFieldName])?.metadata?.type !== "blocks") return false;
+		if (message.blockId && message.blockId !== blockId) return false;
+		return hasValueAtPath(values, message.path);
+	}
+	const field = getTopLevelFieldSchema(schema, message.path);
+	if (!field) return false;
+	if (field.metadata?.readOnly || field.access?.update?.allowed === false) return false;
+	if (message.path.includes(".") && !hasValueAtPath(values, message.path)) return false;
+	return fieldSupportsInlineEdit(field, message.path, message.inputKind);
+}
+function normalizeInlineEditValue(message) {
+	switch (message.inputKind) {
+		case "text":
+		case "textarea": return typeof message.value === "string" ? {
+			ok: true,
+			value: message.value
+		} : { ok: false };
+		case "number": {
+			const value = typeof message.value === "number" ? message.value : typeof message.value === "string" ? Number(message.value) : NaN;
+			return Number.isFinite(value) ? {
+				ok: true,
+				value
+			} : { ok: false };
+		}
+		case "boolean": return typeof message.value === "boolean" ? {
+			ok: true,
+			value: message.value
+		} : { ok: false };
+	}
+}
 /**
 * Component that manages reactive field states.
 * Must be rendered inside FormProvider to access form context.
@@ -174,13 +308,64 @@ const FormStateRefBridge = React.memo(function FormStateRefBridge$1(t0) {
 	React.useEffect(t4, t5);
 	return null;
 });
+const PreviewPatchBridge = React.memo(function PreviewPatchBridge$1(t0) {
+	const $ = c(5);
+	const { form, previewRef, enabled } = t0;
+	const previousSnapshotRef = React.useRef(null);
+	const snapshotVersionRef = React.useRef(void 0);
+	let t1;
+	let t2;
+	if ($[0] !== enabled || $[1] !== form || $[2] !== previewRef) {
+		t1 = () => {
+			if (!enabled) {
+				previousSnapshotRef.current = null;
+				snapshotVersionRef.current = void 0;
+				return;
+			}
+			const initialSnapshot = clonePreviewSnapshot(form.getValues());
+			previousSnapshotRef.current = initialSnapshot;
+			snapshotVersionRef.current = previewRef.current?.sendInitSnapshot(initialSnapshot);
+			const subscription = form.watch((values) => {
+				const previousSnapshot = previousSnapshotRef.current;
+				const nextSnapshot = clonePreviewSnapshot(values);
+				if (!previousSnapshot) {
+					previousSnapshotRef.current = nextSnapshot;
+					snapshotVersionRef.current = previewRef.current?.sendInitSnapshot(nextSnapshot);
+					return;
+				}
+				const ops = diffPreviewSnapshots(previousSnapshot, nextSnapshot).filter(_temp);
+				previousSnapshotRef.current = nextSnapshot;
+				if (ops.length === 0) return;
+				previewRef.current?.sendPatchBatch(ops, snapshotVersionRef.current);
+			});
+			return () => {
+				subscription.unsubscribe();
+			};
+		};
+		t2 = [
+			enabled,
+			form,
+			previewRef
+		];
+		$[0] = enabled;
+		$[1] = form;
+		$[2] = previewRef;
+		$[3] = t1;
+		$[4] = t2;
+	} else {
+		t1 = $[3];
+		t2 = $[4];
+	}
+	React.useEffect(t1, t2);
+	return null;
+});
 const AutosaveManager = React.memo(function AutosaveManager$1(t0) {
-	const $ = c(18);
-	const { form, formElementRef, isEditMode, id, enabled, debounce, isDirtyRef, isSubmittingRef, updateMutation, onPreviewRefresh, onSavingChange, onSaved } = t0;
+	const $ = c(19);
+	const { form, formElementRef, isEditMode, id, enabled, debounce, isDirtyRef, isSubmittingRef, updateMutation, onPreviewRefresh, onPreviewCommit, onSavingChange, onSaved } = t0;
 	const { t } = useTranslation();
 	const timerRef = React.useRef(null);
 	let t1;
-	if ($[0] !== form || $[1] !== id || $[2] !== isDirtyRef || $[3] !== isSubmittingRef || $[4] !== onPreviewRefresh || $[5] !== onSaved || $[6] !== onSavingChange || $[7] !== t || $[8] !== updateMutation) {
+	if ($[0] !== form || $[1] !== id || $[2] !== isDirtyRef || $[3] !== isSubmittingRef || $[4] !== onPreviewCommit || $[5] !== onPreviewRefresh || $[6] !== onSaved || $[7] !== onSavingChange || $[8] !== t || $[9] !== updateMutation) {
 		t1 = async () => {
 			if (!id || !isDirtyRef.current || isSubmittingRef.current) return;
 			try {
@@ -191,6 +376,7 @@ const AutosaveManager = React.memo(function AutosaveManager$1(t0) {
 						data
 					});
 					form.reset(result, { keepTouched: true });
+					onPreviewCommit?.(result);
 					onPreviewRefresh?.();
 					onSaved(/* @__PURE__ */ new Date());
 					onSavingChange(false);
@@ -208,17 +394,18 @@ const AutosaveManager = React.memo(function AutosaveManager$1(t0) {
 		$[1] = id;
 		$[2] = isDirtyRef;
 		$[3] = isSubmittingRef;
-		$[4] = onPreviewRefresh;
-		$[5] = onSaved;
-		$[6] = onSavingChange;
-		$[7] = t;
-		$[8] = updateMutation;
-		$[9] = t1;
-	} else t1 = $[9];
+		$[4] = onPreviewCommit;
+		$[5] = onPreviewRefresh;
+		$[6] = onSaved;
+		$[7] = onSavingChange;
+		$[8] = t;
+		$[9] = updateMutation;
+		$[10] = t1;
+	} else t1 = $[10];
 	const runAutosave = t1;
 	let t2;
 	let t3;
-	if ($[10] !== debounce || $[11] !== enabled || $[12] !== formElementRef || $[13] !== id || $[14] !== isEditMode || $[15] !== runAutosave) {
+	if ($[11] !== debounce || $[12] !== enabled || $[13] !== formElementRef || $[14] !== id || $[15] !== isEditMode || $[16] !== runAutosave) {
 		t2 = () => {
 			if (timerRef.current) clearTimeout(timerRef.current);
 			if (!enabled || !isEditMode || !id) return;
@@ -246,17 +433,17 @@ const AutosaveManager = React.memo(function AutosaveManager$1(t0) {
 			isEditMode,
 			runAutosave
 		];
-		$[10] = debounce;
-		$[11] = enabled;
-		$[12] = formElementRef;
-		$[13] = id;
-		$[14] = isEditMode;
-		$[15] = runAutosave;
-		$[16] = t2;
-		$[17] = t3;
+		$[11] = debounce;
+		$[12] = enabled;
+		$[13] = formElementRef;
+		$[14] = id;
+		$[15] = isEditMode;
+		$[16] = runAutosave;
+		$[17] = t2;
+		$[18] = t3;
 	} else {
-		t2 = $[16];
-		t3 = $[17];
+		t2 = $[17];
+		t3 = $[18];
 	}
 	React.useEffect(t2, t3);
 	return null;
@@ -271,7 +458,7 @@ const AutosaveIndicator = React.memo(function AutosaveIndicator$1(t0) {
 		$[1] = t1;
 	} else t1 = $[1];
 	const { isDirty } = useFormState(t1);
-	const [, forceUpdate] = React.useReducer(_temp, 0);
+	const [, forceUpdate] = React.useReducer(_temp2, 0);
 	let t2;
 	if ($[2] !== forceUpdate || $[3] !== lastSaved) {
 		t2 = () => {
@@ -571,6 +758,33 @@ function FormView({ collection, id, config, viewConfig, navigate, basePath = "/a
 		resolver,
 		mode: "onBlur"
 	});
+	const commitPreviewSnapshot = React.useCallback((data) => {
+		if (!isLivePreviewOpen) return;
+		previewRef.current?.sendCommit(clonePreviewSnapshot(data));
+	}, [isLivePreviewOpen]);
+	const triggerPreviewFullResync = React.useCallback((reason) => {
+		if (!isLivePreviewOpen) return;
+		previewRef.current?.sendFullResync(reason);
+		previewRef.current?.triggerRefresh();
+	}, [isLivePreviewOpen]);
+	const handlePreviewFieldValueEdited = React.useCallback((message) => {
+		if (!isAllowedPreviewEditPath({
+			message,
+			schema,
+			values: form.getValues()
+		})) return;
+		const normalized = normalizeInlineEditValue(message);
+		if (!normalized.ok) return;
+		form.setValue(message.path, normalized.value, {
+			shouldDirty: true,
+			shouldTouch: true,
+			shouldValidate: true
+		});
+		setTimeout(() => scrollFieldIntoView(message.path), 0);
+	}, [form, schema]);
+	const handlePreviewResyncRequest = React.useCallback((reason_0) => {
+		triggerPreviewFullResync(reason_0 ?? "preview-request");
+	}, [triggerPreviewFullResync]);
 	/**
 	* Execute the confirmed workflow transition (immediate or scheduled).
 	*/
@@ -595,6 +809,7 @@ function FormView({ collection, id, config, viewConfig, navigate, basePath = "/a
 					if ("id" in result_0) form.reset(result_0);
 				}
 			}
+			triggerPreviewFullResync("workflow-transition");
 			if (transitionSchedule) if (transitionScheduledAt) toast.success(t("workflow.scheduledSuccess", {
 				stage: stageLabel,
 				date: transitionScheduledAt.toLocaleString()
@@ -664,7 +879,7 @@ function FormView({ collection, id, config, viewConfig, navigate, basePath = "/a
 		}
 	}, [
 		contentLocale,
-		form.getValues,
+		form,
 		setContentLocale,
 		localeChangeDialog.open,
 		isEditMode
@@ -688,6 +903,7 @@ function FormView({ collection, id, config, viewConfig, navigate, basePath = "/a
 			prevLocaleRef.current = localeChangeDialog.pendingLocale;
 			setContentLocale(localeChangeDialog.pendingLocale);
 			localeQueryClient.invalidateQueries({ queryKey: ["collections", collection] });
+			triggerPreviewFullResync("locale-change");
 		}
 		setLocaleChangeDialog({
 			open: false,
@@ -697,7 +913,8 @@ function FormView({ collection, id, config, viewConfig, navigate, basePath = "/a
 		localeChangeDialog.pendingLocale,
 		setContentLocale,
 		localeQueryClient,
-		collection
+		collection,
+		triggerPreviewFullResync
 	]);
 	const handleLocaleChangeCancel = React.useCallback(() => {
 		skipItemResetRef.current = false;
@@ -716,13 +933,13 @@ function FormView({ collection, id, config, viewConfig, navigate, basePath = "/a
 	const handleLocaleDialogOpenChange = React.useCallback((open) => {
 		if (!open) handleLocaleChangeCancel();
 	}, [handleLocaleChangeCancel]);
-	const onSubmit = React.useEffectEvent(async (data) => {
+	const onSubmit = React.useEffectEvent(async (data_0) => {
 		const savePromise = async () => {
 			if (isEditMode && id) return await updateMutation.mutateAsync({
 				id,
-				data
+				data: data_0
 			});
-			else return await createMutation.mutateAsync(data);
+			else return await createMutation.mutateAsync(data_0);
 		};
 		toast.promise(savePromise(), {
 			loading: isEditMode ? t("toast.saving") : t("toast.creating"),
@@ -730,6 +947,7 @@ function FormView({ collection, id, config, viewConfig, navigate, basePath = "/a
 				if (onSuccess) onSuccess(result_1);
 				else if (isEditMode) {
 					form.reset(result_1);
+					commitPreviewSnapshot(result_1);
 					triggerPreviewRefresh();
 				} else if (result_1?.id) navigate(`${basePath}/collections/${collection}/${result_1.id}`);
 				else navigate(`${basePath}/collections/${collection}`);
@@ -743,9 +961,9 @@ function FormView({ collection, id, config, viewConfig, navigate, basePath = "/a
 					});
 					return t("toast.validationFailed");
 				}
-				const message = error instanceof Error ? error.message : t("error.unknown");
-				onError?.(error instanceof Error ? error : new Error(message));
-				return `${t("toast.saveFailed")}: ${message}`;
+				const message_0 = error instanceof Error ? error.message : t("error.unknown");
+				onError?.(error instanceof Error ? error : new Error(message_0));
+				return `${t("toast.saveFailed")}: ${message_0}`;
 			}
 		});
 	});
@@ -988,7 +1206,7 @@ function FormView({ collection, id, config, viewConfig, navigate, basePath = "/a
 							let errorBody = {};
 							try {
 								errorBody = await response_0.json();
-							} catch (_parseErr) {}
+							} catch {}
 							let errorMessage;
 							if (errorBody.message) if (typeof errorBody.message === "string") errorMessage = errorBody.message;
 							else errorMessage = t("toast.actionFailed");
@@ -1062,7 +1280,7 @@ function FormView({ collection, id, config, viewConfig, navigate, basePath = "/a
 		else if (typeof pendingRevertVersion.versionNumber === "number") payload.version = pendingRevertVersion.versionNumber;
 		const result_3 = await revertVersionMutation.mutateAsync(payload);
 		form.reset(result_3);
-		triggerPreviewRefresh();
+		triggerPreviewFullResync("version-revert");
 		toast.success(t("version.revertSuccess"));
 		setPendingRevertVersion(null);
 	};
@@ -1252,10 +1470,16 @@ function FormView({ collection, id, config, viewConfig, navigate, basePath = "/a
 						isDirtyRef: formIsDirtyRef,
 						isSubmittingRef: formIsSubmittingRef,
 						updateMutation,
+						onPreviewCommit: commitPreviewSnapshot,
 						onPreviewRefresh: triggerPreviewRefresh,
 						onSavingChange: setIsSaving,
 						onSaved: setLastSaved
 					}),
+					/* @__PURE__ */ jsx(PreviewPatchBridge, {
+						form,
+						previewRef,
+						enabled: isLivePreviewOpen && !!previewUrl && !isBlocked
+					}),
 					/* @__PURE__ */ jsx(ReactiveFieldsManager, {
 						collection,
 						reactiveConfigs,
@@ -1591,12 +1815,17 @@ function FormView({ collection, id, config, viewConfig, navigate, basePath = "/a
 		onClose: () => setIsLivePreviewOpen(false),
 		previewUrl,
 		previewRef,
+		onFieldValueEdited: handlePreviewFieldValueEdited,
+		onResyncRequest: handlePreviewResyncRequest,
 		defaultSize: schemaPreview?.defaultSize,
 		minSize: schemaPreview?.minSize,
 		children: formShell
 	});
 }
-function _temp(x) {
+function _temp(op) {
+	return op.path;
+}
+function _temp2(x) {
 	return x + 1;
 }