@questpie/admin 3.5.3 → 3.5.5

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

@@ -1,5 +1,6 @@
 import { useTranslation } from "../../../i18n/hooks.mjs";
 import { Badge } from "../../../components/ui/badge.mjs";
+import { resolveAssetUrl } from "../../../utils/asset-url.mjs";
 import { AssetThumbnail } from "./shared/asset-thumbnail.mjs";
 import { useCollectionItem } from "../../../hooks/use-collection.mjs";
 import "react";
@@ -81,7 +82,7 @@ function UploadManyCell({ value }) {
 			children: [/* @__PURE__ */ jsx("div", {
 				className: "flex",
 				children: imageAssets.map((asset, index) => /* @__PURE__ */ jsx("img", {
-					src: asset.url,
+					src: resolveAssetUrl(asset.url) ?? "",
 					alt: asset.filename || "Asset",
 					className: `image-outline bg-background size-6 rounded object-cover${index > 0 ? " -ms-2" : ""}`
 				}, asset.id || index))

package/dist/client/views/collection/document-view.d.mts

@@ -0,0 +1,30 @@
+import { ComponentRegistry, DocumentViewConfig } from "../../builder/types/field-types.mjs";
+import { CollectionBuilderState } from "../../builder/types/collection-types.mjs";
+import * as React from "react";
+
+//#region src/client/views/collection/document-view.d.ts
+
+interface DocumentViewProps {
+  collection: string;
+  id?: string;
+  config?: Partial<CollectionBuilderState> | Record<string, any>;
+  viewConfig?: DocumentViewConfig & Record<string, any>;
+  navigate: (path: string) => void;
+  basePath?: string;
+  defaultValues?: Record<string, any>;
+  registry?: ComponentRegistry;
+  allCollectionsConfig?: Record<string, any>;
+  title?: string;
+}
+declare function DocumentView({
+  collection,
+  id,
+  config,
+  viewConfig,
+  defaultValues: defaultValuesProp,
+  registry,
+  allCollectionsConfig,
+  title: titleProp
+}: DocumentViewProps): React.ReactElement;
+//#endregion
+export { DocumentView };

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

@@ -0,0 +1,377 @@
+import { useResolveText, useTranslation } from "../../i18n/hooks.mjs";
+import { resolveIconElement } from "../../components/component-renderer.mjs";
+import { Button } from "../../components/ui/button.mjs";
+import { Separator } from "../../components/ui/separator.mjs";
+import { Badge } from "../../components/ui/badge.mjs";
+import { adminCollectionKey } from "../../hooks/query-access.mjs";
+import { useCollectionFields } from "../../hooks/use-collection-fields.mjs";
+import { FieldRenderer } from "./field-renderer.mjs";
+import { EmptyState } from "../../components/ui/empty-state.mjs";
+import { useCollectionValidation } from "../../hooks/use-collection-validation.mjs";
+import { usePreferServerValidation } from "../../hooks/use-server-validation.mjs";
+import { useAutosave } from "../../hooks/use-autosave.mjs";
+import { useCollectionItem, useCollectionUpdate } from "../../hooks/use-collection.mjs";
+import { AdminViewHeader, AdminViewLayout } from "../layout/admin-view-layout.mjs";
+import { FormViewSkeleton } from "./view-skeletons.mjs";
+import { Icon } from "@iconify/react";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { FormProvider, useForm, useFormContext, useFormState } from "react-hook-form";
+import { toast } from "sonner";
+
+//#region src/client/views/collection/document-view.tsx
+/**
+* Document View — Notion-style document page
+*
+* Renders a collection record as a centered page: an optional title, a compact
+* block of inline-editable property rows, a divider, and a dominant long-form
+* body field rendered with the rich-text editor.
+*
+* Drop-in with the form view: takes the same props (`CollectionFormViewProps`).
+* Layout and which fields are body/title/properties are declared via
+* `viewConfig.document` (the `DocumentViewConfig` contract) — no hardcoded field
+* names. Save is configurable: `"autosave"` (debounced, shared `useAutosave`
+* pipeline) or `"manual"` (a Save affordance with dirty tracking).
+*/
+/**
+* Presentation-only default icons per field type, used for property rows when a
+* field carries no explicit icon. Falls back to a generic tag icon.
+*/
+const FIELD_TYPE_ICONS = {
+	text: "ph:text-aa",
+	textarea: "ph:text-align-left",
+	richText: "ph:article",
+	number: "ph:hash",
+	boolean: "ph:toggle-left",
+	select: "ph:list-checks",
+	relation: "ph:link-simple",
+	date: "ph:calendar-blank",
+	datetime: "ph:calendar-blank",
+	upload: "ph:paperclip",
+	json: "ph:brackets-curly",
+	color: "ph:palette",
+	email: "ph:envelope-simple",
+	url: "ph:globe-simple"
+};
+const DEFAULT_PROPERTY_ICON = "ph:tag";
+/**
+* A single Notion-style property row: icon + label + the field's inline editor.
+*/
+const DocumentPropertyRow = React.memo(function DocumentPropertyRow$1({ collection, fieldName, fieldDef, icon, label, registry, allCollectionsConfig }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "qa-document-view__property hover:bg-muted/40 flex items-start gap-3 rounded-md px-2 py-1.5 transition-colors duration-150",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "text-muted-foreground flex w-32 shrink-0 items-center gap-2 pt-2",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "flex size-3.5 shrink-0 items-center justify-center",
+				children: icon
+			}), /* @__PURE__ */ jsx("span", {
+				className: "truncate text-xs",
+				children: label
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "qa-document-view__property-control min-w-0 flex-1",
+			children: /* @__PURE__ */ jsx(FieldRenderer, {
+				fieldName,
+				fieldDef,
+				collection,
+				registry,
+				allCollectionsConfig,
+				hideLabel: true
+			})
+		})]
+	});
+});
+const DocumentSaveButton = React.memo(function DocumentSaveButton$1({ isPending }) {
+	const { t } = useTranslation();
+	const { isDirty, isSubmitting } = useFormState();
+	const busy = isPending || isSubmitting;
+	return /* @__PURE__ */ jsx(Button, {
+		type: "submit",
+		size: "sm",
+		disabled: busy || !isDirty,
+		className: "gap-2",
+		children: busy ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Icon, {
+			icon: "ph:spinner-gap",
+			className: "size-4 animate-spin"
+		}), t("common.loading")] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Icon, {
+			icon: "ph:check",
+			width: 16,
+			height: 16
+		}), t("common.save")] })
+	});
+});
+const DocumentAutosaveIndicator = React.memo(function DocumentAutosaveIndicator$1({ isSaving, lastSaved }) {
+	const { t } = useTranslation();
+	const { isDirty } = useFormState();
+	const [, forceUpdate] = React.useReducer((x) => x + 1, 0);
+	React.useEffect(() => {
+		if (!lastSaved) return;
+		const interval = setInterval(forceUpdate, 1e4);
+		return () => clearInterval(interval);
+	}, [lastSaved]);
+	const formatTimeAgo = (date) => {
+		const seconds = Math.floor((Date.now() - date.getTime()) / 1e3);
+		if (seconds < 10) return t("autosave.justNow");
+		if (seconds < 60) return t("autosave.secondsAgo", { count: seconds });
+		const minutes = Math.floor(seconds / 60);
+		if (minutes < 60) return t("autosave.minutesAgo", { count: minutes });
+		return t("autosave.hoursAgo", { count: Math.floor(minutes / 60) });
+	};
+	if (isSaving) return /* @__PURE__ */ jsxs(Badge, {
+		variant: "secondary",
+		className: "gap-1.5",
+		children: [/* @__PURE__ */ jsx(Icon, {
+			icon: "ph:spinner-gap",
+			className: "size-3 animate-spin"
+		}), t("autosave.saving")]
+	});
+	if (isDirty) return /* @__PURE__ */ jsxs(Badge, {
+		variant: "outline",
+		className: "gap-1.5",
+		children: [/* @__PURE__ */ jsx(Icon, {
+			icon: "ph:clock-counter-clockwise",
+			className: "size-3"
+		}), t("autosave.unsavedChanges")]
+	});
+	if (lastSaved) return /* @__PURE__ */ jsxs(Badge, {
+		variant: "secondary",
+		className: "text-muted-foreground gap-1.5",
+		children: [
+			/* @__PURE__ */ jsx(Icon, {
+				icon: "ph:check",
+				className: "size-3"
+			}),
+			t("autosave.saved"),
+			" ",
+			formatTimeAgo(lastSaved)
+		]
+	});
+	return null;
+});
+/**
+* Resolve the ordered list of property field names.
+* - `"auto"` → every schema field except the body and title, in schema order.
+* - `string[]` → the explicit list (filtered to fields that exist).
+*/
+function resolvePropertyNames(properties, resolvedFields, body, title) {
+	const allNames = Object.keys(resolvedFields);
+	if (Array.isArray(properties)) return properties.filter((name) => allNames.includes(name));
+	return allNames.filter((name) => name !== body && name !== title);
+}
+const DocumentForm = React.memo(function DocumentForm$1({ collection, documentConfig, propertyNames, resolvedFields, schema, registry, allCollectionsConfig, title, saveMode, isSaving, lastSaved, isMutationPending }) {
+	const resolveText = useResolveText();
+	const form = useFormContext();
+	const propertyRows = React.useMemo(() => {
+		const schemaFields = schema?.fields ?? {};
+		return propertyNames.map((name) => {
+			const fieldDef = resolvedFields[name];
+			if (!fieldDef) return null;
+			const meta = schemaFields[name]?.metadata;
+			const fieldType = fieldDef.name;
+			return {
+				name,
+				fieldDef,
+				label: resolveText(meta?.label ?? name, name, form.getValues()),
+				icon: (meta?.icon ? resolveIconElement(meta.icon, { className: "size-3.5" }) : null) ?? /* @__PURE__ */ jsx(Icon, {
+					icon: FIELD_TYPE_ICONS[fieldType] ?? DEFAULT_PROPERTY_ICON,
+					className: "size-3.5"
+				})
+			};
+		}).filter(Boolean);
+	}, [
+		propertyNames,
+		resolvedFields,
+		schema?.fields,
+		resolveText,
+		form
+	]);
+	const bodyFieldDef = resolvedFields[documentConfig.body];
+	return /* @__PURE__ */ jsxs("div", {
+		className: "qa-document-view mx-auto max-w-3xl px-6 py-8",
+		children: [
+			/* @__PURE__ */ jsx(AdminViewHeader, {
+				className: "mb-6",
+				title,
+				titleAccessory: saveMode === "autosave" ? /* @__PURE__ */ jsx(DocumentAutosaveIndicator, {
+					isSaving,
+					lastSaved
+				}) : /* @__PURE__ */ jsx(DocumentSaveButton, { isPending: isMutationPending })
+			}),
+			propertyRows.length > 0 && /* @__PURE__ */ jsx("div", {
+				className: "qa-document-view__properties mb-6 space-y-px",
+				children: propertyRows.map((row) => /* @__PURE__ */ jsx(DocumentPropertyRow, {
+					collection,
+					fieldName: row.name,
+					fieldDef: row.fieldDef,
+					icon: row.icon,
+					label: row.label,
+					registry,
+					allCollectionsConfig
+				}, row.name))
+			}),
+			/* @__PURE__ */ jsx(Separator, { className: "mb-8" }),
+			/* @__PURE__ */ jsx("div", {
+				className: "qa-document-view__body min-w-0",
+				children: bodyFieldDef ? /* @__PURE__ */ jsx(FieldRenderer, {
+					fieldName: documentConfig.body,
+					fieldDef: bodyFieldDef,
+					collection,
+					registry,
+					allCollectionsConfig,
+					hideLabel: true
+				}) : /* @__PURE__ */ jsx(EmptyState, {
+					iconName: "ph:warning",
+					title: `Document body field "${documentConfig.body}" not found.`
+				})
+			})
+		]
+	});
+});
+/**
+* The form-bearing inner component. The outer `DocumentView` gates on loading
+* and mounts this with `initialValues` already populated, so `useForm` — and
+* therefore the TipTap body editor (`content: value`) — initializes WITH the
+* stored content on its very first render. This is the fix for the empty-body /
+* spurious "unsaved changes" bug: we never mount the editor empty and then try
+* to re-sync a value-prop change into ProseMirror.
+*
+* Remounted (via `key`) by the outer when the record identity changes, so each
+* record gets a fresh form seeded with its own values.
+*/
+function DocumentEditor({ collection, id, documentConfig, propertyNames, resolvedFields, schema, registry, allCollectionsConfig, resolver, updateMutation, initialValues, title, autosaveDebounce }) {
+	const { t } = useTranslation();
+	const saveMode = documentConfig.save === "manual" ? "manual" : "autosave";
+	const form = useForm({
+		defaultValues: initialValues,
+		resolver,
+		mode: "onBlur"
+	});
+	const formIsDirtyRef = React.useRef(false);
+	const formIsSubmittingRef = React.useRef(false);
+	const { isDirty: formIsDirty, isSubmitting: formIsSubmitting } = useFormState({ control: form.control });
+	React.useEffect(() => {
+		formIsDirtyRef.current = formIsDirty;
+	}, [formIsDirty]);
+	React.useEffect(() => {
+		formIsSubmittingRef.current = formIsSubmitting;
+	}, [formIsSubmitting]);
+	const [isSaving, setIsSaving] = React.useState(false);
+	const [lastSaved, setLastSaved] = React.useState(null);
+	useAutosave({
+		form,
+		id,
+		enabled: saveMode === "autosave",
+		debounce: autosaveDebounce,
+		isDirtyRef: formIsDirtyRef,
+		isSubmittingRef: formIsSubmittingRef,
+		updateMutation,
+		onSavingChange: setIsSaving,
+		onSaved: setLastSaved
+	});
+	const onManualSubmit = form.handleSubmit(async (data) => {
+		if (!id) return;
+		try {
+			const result = await updateMutation.mutateAsync({
+				id,
+				data
+			});
+			form.reset(result, { keepTouched: true });
+			setLastSaved(/* @__PURE__ */ new Date());
+			toast.success(t("toast.saveSuccess"));
+		} catch (error) {
+			toast.error(t("toast.saveFailed"), { description: error instanceof Error ? error.message : void 0 });
+		}
+	});
+	return /* @__PURE__ */ jsx(FormProvider, {
+		...form,
+		children: /* @__PURE__ */ jsx("form", {
+			onSubmit: (e) => {
+				e.stopPropagation();
+				if (saveMode === "manual") onManualSubmit(e);
+				else e.preventDefault();
+			},
+			children: /* @__PURE__ */ jsx(DocumentForm, {
+				collection,
+				documentConfig,
+				propertyNames,
+				resolvedFields,
+				schema,
+				registry,
+				allCollectionsConfig,
+				title,
+				saveMode,
+				isSaving,
+				lastSaved,
+				isMutationPending: updateMutation.isPending
+			})
+		})
+	});
+}
+function DocumentView({ collection, id, config, viewConfig, defaultValues: defaultValuesProp, registry, allCollectionsConfig, title: titleProp }) {
+	const { t } = useTranslation();
+	const isEditMode = !!id;
+	const collectionKey = adminCollectionKey(collection);
+	const { fields: resolvedFields, schema, isLoading: isFieldsLoading } = useCollectionFields(collection, { fallbackFields: config?.fields });
+	const documentConfig = React.useMemo(() => viewConfig?.document ?? (schema?.admin?.form)?.document ?? config?.form?.document, [
+		viewConfig,
+		schema?.admin?.form,
+		config
+	]);
+	const propertyNames = React.useMemo(() => documentConfig ? resolvePropertyNames(documentConfig.properties, resolvedFields, documentConfig.body, documentConfig.title) : [], [documentConfig, resolvedFields]);
+	const { data: item, isLoading, error: itemError } = useCollectionItem(collectionKey, id ?? "", { localeFallback: false }, { enabled: isEditMode });
+	const updateMutation = useCollectionUpdate(collectionKey);
+	const hasServerValidationSchema = !!schema?.validation?.update;
+	const clientResolver = useCollectionValidation(collection, { enabled: !isFieldsLoading && !hasServerValidationSchema });
+	const resolver = usePreferServerValidation(collection, {
+		mode: "update",
+		schema
+	}, clientResolver);
+	const autosaveDebounce = config?.autoSave?.debounce ?? 300;
+	if (!documentConfig) return /* @__PURE__ */ jsx(AdminViewLayout, {
+		contentClassName: "overflow-y-auto",
+		children: /* @__PURE__ */ jsx("div", {
+			className: "mx-auto max-w-3xl px-6 py-8",
+			children: /* @__PURE__ */ jsx(EmptyState, {
+				iconName: "ph:warning",
+				title: "No document configuration",
+				description: "This view has kind 'document' but no document config (body/properties). Configure it via view(..., { kind: 'document', document: { body, properties } })."
+			})
+		})
+	});
+	if (isEditMode && itemError) return /* @__PURE__ */ jsx(AdminViewLayout, {
+		contentClassName: "overflow-y-auto",
+		children: /* @__PURE__ */ jsx("div", {
+			className: "mx-auto max-w-3xl px-6 py-8",
+			children: /* @__PURE__ */ jsx(EmptyState, {
+				iconName: "ph:warning",
+				title: t("error.failedToLoad"),
+				description: itemError instanceof Error ? itemError.message : void 0
+			})
+		})
+	});
+	if (isEditMode && (isLoading || !item) || isFieldsLoading) return /* @__PURE__ */ jsx(FormViewSkeleton, {});
+	const initialValues = isEditMode ? item : defaultValuesProp ?? {};
+	const titleFieldValue = documentConfig.title ? initialValues[documentConfig.title] : void 0;
+	return /* @__PURE__ */ jsx(AdminViewLayout, {
+		contentClassName: "overflow-y-auto",
+		children: /* @__PURE__ */ jsx(DocumentEditor, {
+			collection,
+			id,
+			documentConfig,
+			propertyNames,
+			resolvedFields,
+			schema,
+			registry,
+			allCollectionsConfig,
+			resolver,
+			updateMutation,
+			initialValues,
+			title: (titleFieldValue && titleFieldValue.trim() ? titleFieldValue : void 0) ?? titleProp ?? initialValues.id ?? collection,
+			autosaveDebounce
+		}, id ?? "new")
+	});
+}
+
+//#endregion
+export { DocumentView as default };

package/dist/client/views/collection/field-context.mjs

@@ -105,7 +105,7 @@ function getFieldContext({ fieldName, fieldDef, collection, form, fieldPrefix, l
 * Build props for a FieldInstance component (field.component).
 * Returns raw props with I18nText - resolve before passing to component.
 */
-function buildComponentProps(context) {
+function buildComponentProps(context, overrides) {
 	return {
 		name: context.fullFieldName,
 		value: context.fieldValue,
@@ -118,7 +118,8 @@ function buildComponentProps(context) {
 		readOnly: context.isReadOnly,
 		error: context.fieldError,
 		localized: context.isLocalized,
-		locale: context.locale
+		locale: context.locale,
+		hideLabel: overrides?.hideLabel
 	};
 }
 

package/dist/client/views/collection/field-renderer.mjs

@@ -138,7 +138,7 @@ function renderEmbeddedField({ context, registry, allCollectionsConfig, componen
 * 2. FieldDefinition.field.component (registry-first approach)
 * 3. Error message if no component registered
 */
-function FieldRenderer({ fieldName, fieldDef, collection, mode = "collection", registry, fieldPrefix, allCollectionsConfig, renderEmbeddedFields, className, entityMeta: entityMetaProp, extraProps }) {
+function FieldRenderer({ fieldName, fieldDef, collection, mode = "collection", registry, fieldPrefix, allCollectionsConfig, renderEmbeddedFields, className, entityMeta: entityMetaProp, extraProps, hideLabel }) {
 	const form = useFormContext();
 	const { locale } = useScopedLocale();
 	const resolveText = useResolveText();
@@ -198,7 +198,7 @@ function FieldRenderer({ fieldName, fieldDef, collection, mode = "collection", r
 		staticOptions: context.options
 	});
 	const resolvedOptions = hookOptions ?? context.options;
-	const rawComponentProps = buildComponentProps(context);
+	const rawComponentProps = buildComponentProps(context, { hideLabel });
 	const { props: resolvedFieldProps } = useReactiveProps({
 		entity: collection,
 		entityType: mode,

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

@@ -29,6 +29,7 @@ import { useCollectionValidation } from "../../hooks/use-collection-validation.m
 import { useSearchParamToggle } from "../../hooks/use-search-param-toggle.mjs";
 import { usePreferServerValidation } from "../../hooks/use-server-validation.mjs";
 import { useSidebarSearchParam } from "../../hooks/use-sidebar-search-param.mjs";
+import { useAutosave } from "../../hooks/use-autosave.mjs";
 import { useCollectionCreate, useCollectionDelete, useCollectionItem, useCollectionRestore, useCollectionRevertVersion, useCollectionUpdate, useCollectionVersions } from "../../hooks/use-collection.mjs";
 import { getLockUser, useLock } from "../../hooks/use-locks.mjs";
 import { useServerActions } from "../../hooks/use-server-actions.mjs";
@@ -248,71 +249,6 @@ const PreviewPatchBridge = React.memo(function PreviewPatchBridge$1({ form, prev
 	]);
 	return null;
 });
-const AutosaveManager = React.memo(function AutosaveManager$1({ form, formElementRef, isEditMode, id, enabled, debounce, isDirtyRef, isSubmittingRef, updateMutation, onPreviewRefresh, onPreviewCommit, onSavingChange, onSaved }) {
-	const { t } = useTranslation();
-	const timerRef = React.useRef(null);
-	const runAutosave = React.useCallback(async () => {
-		if (!id || !isDirtyRef.current || isSubmittingRef.current) return;
-		try {
-			onSavingChange(true);
-			await form.handleSubmit(async (data) => {
-				const result = await updateMutation.mutateAsync({
-					id,
-					data
-				});
-				form.reset(result, { keepTouched: true });
-				onPreviewCommit?.(result);
-				onPreviewRefresh?.();
-				onSaved(/* @__PURE__ */ new Date());
-				onSavingChange(false);
-			}, () => {
-				onSavingChange(false);
-			})();
-		} catch (error) {
-			onSavingChange(false);
-			console.error("Autosave failed:", error);
-			toast.error(t("error.autosaveFailed"), { description: error instanceof Error ? error.message : void 0 });
-		}
-	}, [
-		form,
-		id,
-		isDirtyRef,
-		isSubmittingRef,
-		onSaved,
-		onSavingChange,
-		onPreviewCommit,
-		onPreviewRefresh,
-		t,
-		updateMutation
-	]);
-	React.useEffect(() => {
-		if (timerRef.current) clearTimeout(timerRef.current);
-		if (!enabled || !isEditMode || !id) return;
-		const target = formElementRef.current;
-		if (!target) return;
-		const scheduleAutosave = () => {
-			if (timerRef.current) clearTimeout(timerRef.current);
-			timerRef.current = setTimeout(() => {
-				runAutosave();
-			}, debounce);
-		};
-		target.addEventListener("input", scheduleAutosave, { capture: true });
-		target.addEventListener("change", scheduleAutosave, { capture: true });
-		return () => {
-			target.removeEventListener("input", scheduleAutosave, { capture: true });
-			target.removeEventListener("change", scheduleAutosave, { capture: true });
-			if (timerRef.current) clearTimeout(timerRef.current);
-		};
-	}, [
-		debounce,
-		enabled,
-		formElementRef,
-		id,
-		isEditMode,
-		runAutosave
-	]);
-	return null;
-});
 const AutosaveIndicator = React.memo(function AutosaveIndicator$1({ control, enabled, indicator, isEditMode, isSaving, lastSaved, formatTimeAgo, t }) {
 	const { isDirty } = useFormState({ control });
 	const [, forceUpdate] = React.useReducer((x) => x + 1, 0);
@@ -603,6 +539,19 @@ function FormView({ collection, id, config, viewConfig, navigate, basePath = "/a
 			preventNavigation: cfg.preventNavigation !== false
 		};
 	}, [config]);
+	useAutosave({
+		form,
+		id,
+		enabled: autoSaveConfig.enabled,
+		debounce: autoSaveConfig.debounce,
+		isDirtyRef: formIsDirtyRef,
+		isSubmittingRef: formIsSubmittingRef,
+		updateMutation,
+		onPreviewCommit: commitPreviewSnapshot,
+		onPreviewRefresh: triggerPreviewRefresh,
+		onSavingChange: setIsSaving,
+		onSaved: setLastSaved
+	});
 	const { locale: contentLocale, setLocale: setContentLocale } = useScopedLocale();
 	const localeOptions = useSafeContentLocales()?.locales ?? [];
 	const prevLocaleRef = React.useRef(contentLocale);
@@ -1218,21 +1167,6 @@ function FormView({ collection, id, config, viewConfig, navigate, basePath = "/a
 						onDirtyChange: handleFormDirtyChange,
 						onSubmittingChange: handleFormSubmittingChange
 					}),
-					/* @__PURE__ */ jsx(AutosaveManager, {
-						form,
-						formElementRef,
-						isEditMode,
-						id,
-						enabled: autoSaveConfig.enabled,
-						debounce: autoSaveConfig.debounce,
-						isDirtyRef: formIsDirtyRef,
-						isSubmittingRef: formIsSubmittingRef,
-						updateMutation,
-						onPreviewCommit: commitPreviewSnapshot,
-						onPreviewRefresh: triggerPreviewRefresh,
-						onSavingChange: setIsSaving,
-						onSaved: setLastSaved
-					}),
 					/* @__PURE__ */ jsx(PreviewPatchBridge, {
 						form,
 						previewRef,