@questpie/admin 2.0.0 → 3.0.0

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

@@ -1,36 +1,46 @@
-import { getDefaultFormActions } from "../../builder/types/action-registry.mjs";
 import { useResolveText, useTranslation } from "../../i18n/hooks.mjs";
-import { selectAdmin, selectBasePath, selectClient, selectNavigate, useAdminStore } from "../../runtime/provider.mjs";
+import { selectBasePath, selectClient, selectNavigate, useAdminStore } from "../../runtime/provider.mjs";
 import { useSafeContentLocales } from "../../runtime/content-locales-provider.mjs";
 import { useScopedLocale } from "../../runtime/locale-scope.mjs";
 import { resolveIconElement } from "../../components/component-renderer.mjs";
 import { Button } from "../../components/ui/button.mjs";
+import { Badge } from "../../components/ui/badge.mjs";
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "../../components/ui/dialog.mjs";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "../../components/ui/dropdown-menu.mjs";
+import { LocaleSwitcher } from "../../components/locale-switcher.mjs";
+import { Label } from "../../components/ui/label.mjs";
+import { RenderProfiler } from "../../lib/render-profiler.mjs";
+import { Checkbox } from "../../components/ui/checkbox.mjs";
+import { DateTimeInput } from "../../components/primitives/date-input.mjs";
+import { getDefaultFormActions } from "../../builder/types/action-registry.mjs";
 import { ConfirmationDialog } from "../../components/actions/confirmation-dialog.mjs";
 import { ActionButton } from "../../components/actions/action-button.mjs";
 import { useCollectionFields } from "../../hooks/use-collection-fields.mjs";
-import { detectManyToManyRelations, hasManyToManyRelations } from "../../utils/detect-relations.mjs";
-import { useAdminConfig } from "../../hooks/use-admin-config.mjs";
 import { AutoFormFields } from "./auto-form-fields.mjs";
 import { ActionDialog } from "../../components/actions/action-dialog.mjs";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "../../components/ui/dropdown-menu.mjs";
-import { LocaleSwitcher } from "../../components/locale-switcher.mjs";
-import { LivePreviewMode, useLivePreviewContext } from "../../components/preview/live-preview-mode.mjs";
-import { Badge } from "../../components/ui/badge.mjs";
-import { useCollectionCreate, useCollectionDelete, useCollectionItem, useCollectionUpdate } from "../../hooks/use-collection.mjs";
+import { HistorySidebar } from "../../components/history-sidebar.mjs";
+import { LivePreviewMode } from "../../components/preview/live-preview-mode.mjs";
 import { useCollectionValidation } from "../../hooks/use-collection-validation.mjs";
-import { getLockUser, useLock } from "../../hooks/use-locks.mjs";
+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 { useCollectionAuditHistory } from "../../hooks/use-audit-history.mjs";
+import { useCollectionCreate, useCollectionDelete, useCollectionItem, useCollectionRestore, useCollectionRevertVersion, useCollectionUpdate, useCollectionVersions } from "../../hooks/use-collection.mjs";
+import { getLockUser, useLock } from "../../hooks/use-locks.mjs";
 import { useReactiveFields } from "../../hooks/use-reactive-fields.mjs";
+import { useServerActions } from "../../hooks/use-server-actions.mjs";
+import { useTransitionStage } from "../../hooks/use-transition-stage.mjs";
+import { detectManyToManyRelations, hasManyToManyRelations } from "../../utils/detect-relations.mjs";
 import { FormViewSkeleton } from "./view-skeletons.mjs";
+import { c } from "react/compiler-runtime";
 import { Icon } from "@iconify/react";
+import * as React from "react";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { FormProvider, useForm, useFormState } from "react-hook-form";
+import { toast } from "sonner";
 import { createQuestpieQueryOptions } from "@questpie/tanstack-query";
-import { useQueryClient } from "@tanstack/react-query";
 import { QuestpieClientError } from "questpie/client";
-import * as React$1 from "react";
-import { FormProvider, useForm, useWatch } from "react-hook-form";
-import { toast } from "sonner";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/client/views/collection/form-view.tsx
 /**
@@ -39,7 +49,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 * Renders collection item edit/create form with sections, tabs, validation.
 * This is the default edit view registered in the admin view registry.
 */
-/** Query key prefix for CMS queries (used for cache invalidation) */
+/** Query key prefix for app queries (used for cache invalidation) */
 const QUERY_KEY_PREFIX = ["questpie", "collections"];
 /**
 * Extract reactive configs from collection schema fields.
@@ -55,16 +65,366 @@ function extractReactiveConfigs(schema) {
 * Component that manages reactive field states.
 * Must be rendered inside FormProvider to access form context.
 */
-function ReactiveFieldsManager({ collection, mode = "collection", reactiveConfigs, enabled }) {
-	useReactiveFields({
-		collection,
-		mode,
-		reactiveConfigs,
-		enabled: enabled && Object.keys(reactiveConfigs).length > 0,
-		debounce: 300
-	});
+function ReactiveFieldsManager(t0) {
+	const $ = c(8);
+	const { collection, mode: t1, reactiveConfigs, enabled } = t0;
+	const mode = t1 === void 0 ? "collection" : t1;
+	let t2;
+	if ($[0] !== enabled || $[1] !== reactiveConfigs) {
+		t2 = enabled && Object.keys(reactiveConfigs).length > 0;
+		$[0] = enabled;
+		$[1] = reactiveConfigs;
+		$[2] = t2;
+	} else t2 = $[2];
+	let t3;
+	if ($[3] !== collection || $[4] !== mode || $[5] !== reactiveConfigs || $[6] !== t2) {
+		t3 = {
+			collection,
+			mode,
+			reactiveConfigs,
+			enabled: t2,
+			debounce: 300
+		};
+		$[3] = collection;
+		$[4] = mode;
+		$[5] = reactiveConfigs;
+		$[6] = t2;
+		$[7] = t3;
+	} else t3 = $[7];
+	useReactiveFields(t3);
 	return null;
 }
+const FormFieldsContent = React.memo(function FormFieldsContent$1(t0) {
+	const $ = c(8);
+	const { collection, config, registry, allCollectionsConfig } = t0;
+	const t1 = `form.fields.${collection}`;
+	const t2 = collection;
+	const t3 = config;
+	const t4 = allCollectionsConfig;
+	let t5;
+	if ($[0] !== registry || $[1] !== t2 || $[2] !== t3 || $[3] !== t4) {
+		t5 = /* @__PURE__ */ jsx(AutoFormFields, {
+			collection: t2,
+			config: t3,
+			registry,
+			allCollectionsConfig: t4
+		});
+		$[0] = registry;
+		$[1] = t2;
+		$[2] = t3;
+		$[3] = t4;
+		$[4] = t5;
+	} else t5 = $[4];
+	let t6;
+	if ($[5] !== t1 || $[6] !== t5) {
+		t6 = /* @__PURE__ */ jsx(RenderProfiler, {
+			id: t1,
+			minDurationMs: 10,
+			children: t5
+		});
+		$[5] = t1;
+		$[6] = t5;
+		$[7] = t6;
+	} else t6 = $[7];
+	return t6;
+});
+const FormStateRefBridge = React.memo(function FormStateRefBridge$1(t0) {
+	const $ = c(10);
+	const { control, onDirtyChange, onSubmittingChange } = t0;
+	let t1;
+	if ($[0] !== control) {
+		t1 = { control };
+		$[0] = control;
+		$[1] = t1;
+	} else t1 = $[1];
+	const { isDirty, isSubmitting } = useFormState(t1);
+	let t2;
+	let t3;
+	if ($[2] !== isDirty || $[3] !== onDirtyChange) {
+		t2 = () => {
+			onDirtyChange(isDirty);
+		};
+		t3 = [isDirty, onDirtyChange];
+		$[2] = isDirty;
+		$[3] = onDirtyChange;
+		$[4] = t2;
+		$[5] = t3;
+	} else {
+		t2 = $[4];
+		t3 = $[5];
+	}
+	React.useEffect(t2, t3);
+	let t4;
+	let t5;
+	if ($[6] !== isSubmitting || $[7] !== onSubmittingChange) {
+		t4 = () => {
+			onSubmittingChange(isSubmitting);
+		};
+		t5 = [isSubmitting, onSubmittingChange];
+		$[6] = isSubmitting;
+		$[7] = onSubmittingChange;
+		$[8] = t4;
+		$[9] = t5;
+	} else {
+		t4 = $[8];
+		t5 = $[9];
+	}
+	React.useEffect(t4, t5);
+	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 { 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) {
+		t1 = 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 });
+					onPreviewRefresh?.();
+					onSaved(/* @__PURE__ */ new Date());
+					onSavingChange(false);
+				}, () => {
+					onSavingChange(false);
+				})();
+			} catch (t2$1) {
+				const error = t2$1;
+				onSavingChange(false);
+				console.error("Autosave failed:", error);
+				toast.error(t("error.autosaveFailed"), { description: error instanceof Error ? error.message : void 0 });
+			}
+		};
+		$[0] = form;
+		$[1] = id;
+		$[2] = isDirtyRef;
+		$[3] = isSubmittingRef;
+		$[4] = onPreviewRefresh;
+		$[5] = onSaved;
+		$[6] = onSavingChange;
+		$[7] = t;
+		$[8] = updateMutation;
+		$[9] = t1;
+	} else t1 = $[9];
+	const runAutosave = t1;
+	let t2;
+	let t3;
+	if ($[10] !== debounce || $[11] !== enabled || $[12] !== formElementRef || $[13] !== id || $[14] !== isEditMode || $[15] !== runAutosave) {
+		t2 = () => {
+			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);
+			};
+		};
+		t3 = [
+			debounce,
+			enabled,
+			formElementRef,
+			id,
+			isEditMode,
+			runAutosave
+		];
+		$[10] = debounce;
+		$[11] = enabled;
+		$[12] = formElementRef;
+		$[13] = id;
+		$[14] = isEditMode;
+		$[15] = runAutosave;
+		$[16] = t2;
+		$[17] = t3;
+	} else {
+		t2 = $[16];
+		t3 = $[17];
+	}
+	React.useEffect(t2, t3);
+	return null;
+});
+const AutosaveIndicator = React.memo(function AutosaveIndicator$1(t0) {
+	const $ = c(26);
+	const { control, enabled, indicator, isEditMode, isSaving, lastSaved, formatTimeAgo, t } = t0;
+	let t1;
+	if ($[0] !== control) {
+		t1 = { control };
+		$[0] = control;
+		$[1] = t1;
+	} else t1 = $[1];
+	const { isDirty } = useFormState(t1);
+	const [, forceUpdate] = React.useReducer(_temp, 0);
+	let t2;
+	if ($[2] !== forceUpdate || $[3] !== lastSaved) {
+		t2 = () => {
+			if (!lastSaved) return;
+			const interval = setInterval(forceUpdate, 1e4);
+			return () => clearInterval(interval);
+		};
+		$[2] = forceUpdate;
+		$[3] = lastSaved;
+		$[4] = t2;
+	} else t2 = $[4];
+	let t3;
+	if ($[5] !== lastSaved) {
+		t3 = [lastSaved];
+		$[5] = lastSaved;
+		$[6] = t3;
+	} else t3 = $[6];
+	React.useEffect(t2, t3);
+	if (!enabled || !indicator || !isEditMode) return null;
+	if (isSaving) {
+		let t4;
+		if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+			t4 = /* @__PURE__ */ jsx(Icon, {
+				icon: "ph:spinner-gap",
+				className: "size-3 animate-spin"
+			});
+			$[7] = t4;
+		} else t4 = $[7];
+		let t5;
+		if ($[8] !== t) {
+			t5 = t("autosave.saving");
+			$[8] = t;
+			$[9] = t5;
+		} else t5 = $[9];
+		let t6;
+		if ($[10] !== t5) {
+			t6 = /* @__PURE__ */ jsxs(Badge, {
+				variant: "secondary",
+				className: "gap-1.5",
+				children: [t4, t5]
+			});
+			$[10] = t5;
+			$[11] = t6;
+		} else t6 = $[11];
+		return t6;
+	}
+	if (isDirty) {
+		let t4;
+		if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+			t4 = /* @__PURE__ */ jsx(Icon, {
+				icon: "ph:clock-counter-clockwise",
+				className: "size-3"
+			});
+			$[12] = t4;
+		} else t4 = $[12];
+		let t5;
+		if ($[13] !== t) {
+			t5 = t("autosave.unsavedChanges");
+			$[13] = t;
+			$[14] = t5;
+		} else t5 = $[14];
+		let t6;
+		if ($[15] !== t5) {
+			t6 = /* @__PURE__ */ jsxs(Badge, {
+				variant: "outline",
+				className: "gap-1.5",
+				children: [t4, t5]
+			});
+			$[15] = t5;
+			$[16] = t6;
+		} else t6 = $[16];
+		return t6;
+	}
+	if (lastSaved) {
+		let t4;
+		if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
+			t4 = /* @__PURE__ */ jsx(Icon, {
+				icon: "ph:check",
+				className: "size-3"
+			});
+			$[17] = t4;
+		} else t4 = $[17];
+		let t5;
+		if ($[18] !== t) {
+			t5 = t("autosave.saved");
+			$[18] = t;
+			$[19] = t5;
+		} else t5 = $[19];
+		let t6;
+		if ($[20] !== formatTimeAgo || $[21] !== lastSaved) {
+			t6 = formatTimeAgo(lastSaved);
+			$[20] = formatTimeAgo;
+			$[21] = lastSaved;
+			$[22] = t6;
+		} else t6 = $[22];
+		let t7;
+		if ($[23] !== t5 || $[24] !== t6) {
+			t7 = /* @__PURE__ */ jsxs(Badge, {
+				variant: "secondary",
+				className: "text-muted-foreground gap-1.5",
+				children: [
+					t4,
+					t5,
+					" ",
+					t6
+				]
+			});
+			$[23] = t5;
+			$[24] = t6;
+			$[25] = t7;
+		} else t7 = $[25];
+		return t7;
+	}
+	return null;
+});
+const SaveSubmitButton = React.memo(function SaveSubmitButton$1(t0) {
+	const $ = c(8);
+	const { control, isMutationPending, t } = t0;
+	let t1;
+	if ($[0] !== control) {
+		t1 = { control };
+		$[0] = control;
+		$[1] = t1;
+	} else t1 = $[1];
+	const { isDirty, isSubmitting } = useFormState(t1);
+	const isSubmittingNow = isMutationPending || isSubmitting;
+	const t2 = isSubmittingNow || !isDirty;
+	let t3;
+	if ($[2] !== isSubmittingNow || $[3] !== t) {
+		t3 = isSubmittingNow ? /* @__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")] });
+		$[2] = isSubmittingNow;
+		$[3] = t;
+		$[4] = t3;
+	} else t3 = $[4];
+	let t4;
+	if ($[5] !== t2 || $[6] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Button, {
+			type: "submit",
+			disabled: t2,
+			className: "gap-2",
+			children: t3
+		});
+		$[5] = t2;
+		$[6] = t3;
+		$[7] = t4;
+	} else t4 = $[7];
+	return t4;
+});
 /**
 * FormView - Default form-based edit/create view for collections
 *
@@ -91,42 +451,55 @@ function ReactiveFieldsManager({ collection, mode = "collection", reactiveConfig
 function FormView({ collection, id, config, viewConfig, navigate, basePath = "/admin", defaultValues: defaultValuesProp, registry, allCollectionsConfig, showMeta = true, headerActions, onSuccess, onError }) {
 	const { t } = useTranslation();
 	const resolveText = useResolveText();
-	const admin = useAdminStore(selectAdmin);
-	const { data: adminConfig } = useAdminConfig();
 	const isEditMode = !!id;
 	const { fields: resolvedFields, schema } = useCollectionFields(collection, { fallbackFields: config?.fields });
-	const resolvedFormConfig = React$1.useMemo(() => viewConfig ?? (config?.form)?.["~config"] ?? config?.form ?? schema?.admin?.form, [
+	const resolvedFormConfig = React.useMemo(() => viewConfig ?? (config?.form)?.["~config"] ?? config?.form ?? schema?.admin?.form, [
 		viewConfig,
 		config?.form,
 		schema?.admin?.form
 	]);
-	const formConfigBridge = React$1.useMemo(() => {
+	const formConfigBridge = React.useMemo(() => {
 		if (!resolvedFormConfig) return config;
 		return {
 			...config ?? {},
 			form: resolvedFormConfig
 		};
 	}, [config, resolvedFormConfig]);
-	const reactiveConfigs = React$1.useMemo(() => extractReactiveConfigs(schema), [schema]);
-	const previewContext = useLivePreviewContext();
+	const reactiveConfigs = React.useMemo(() => extractReactiveConfigs(schema), [schema]);
 	const schemaPreview = schema?.admin?.preview;
-	const hasPreview = !!schemaPreview?.hasUrlBuilder && schemaPreview?.enabled !== false;
-	const [isLivePreviewOpen, setIsLivePreviewOpen] = React$1.useState(() => {
-		if (typeof window === "undefined") return false;
-		return new URLSearchParams(window.location.search).get("preview") === "true" && hasPreview;
-	});
-	React$1.useEffect(() => {
-		if (typeof window === "undefined") return;
-		const url = new URL(window.location.href);
-		if (isLivePreviewOpen) url.searchParams.set("preview", "true");
-		else url.searchParams.delete("preview");
-		window.history.replaceState({}, "", url.toString());
+	const canUseLivePreview = !!schemaPreview?.hasUrlBuilder && schemaPreview?.enabled !== false && isEditMode && !!id;
+	const [isLivePreviewOpen, setIsLivePreviewOpen] = useSearchParamToggle("preview", React.useMemo(() => ({ legacyKeys: [{
+		key: "sidebar",
+		trueValue: "preview"
+	}] }), []));
+	const [isHistoryOpen, setIsHistoryOpen] = useSidebarSearchParam("history", { legacyKey: "history" });
+	const previewRef = React.useRef(null);
+	const triggerPreviewRefresh = React.useCallback(() => {
+		if (!isLivePreviewOpen) return;
+		previewRef.current?.triggerRefresh();
 	}, [isLivePreviewOpen]);
-	const withRelations = React$1.useMemo(() => detectManyToManyRelations({
+	React.useEffect(() => {
+		if (!schema) return;
+		if (!canUseLivePreview && isLivePreviewOpen) setIsLivePreviewOpen(false);
+	}, [
+		canUseLivePreview,
+		isLivePreviewOpen,
+		setIsLivePreviewOpen,
+		schema
+	]);
+	React.useEffect(() => {
+		if ((!isEditMode || !id) && isHistoryOpen) setIsHistoryOpen(false);
+	}, [
+		isEditMode,
+		id,
+		isHistoryOpen,
+		setIsHistoryOpen
+	]);
+	const withRelations = React.useMemo(() => detectManyToManyRelations({
 		fields: resolvedFields,
 		schema
 	}), [resolvedFields, schema]);
-	const { data: item, isLoading } = useCollectionItem(collection, id ?? "", hasManyToManyRelations(withRelations) ? {
+	const { data: item, isLoading, error: itemError } = useCollectionItem(collection, id ?? "", hasManyToManyRelations(withRelations) ? {
 		with: withRelations,
 		localeFallback: false
 	} : { localeFallback: false }, { enabled: isEditMode });
@@ -137,7 +510,7 @@ function FormView({ collection, id, config, viewConfig, navigate, basePath = "/a
 		autoAcquire: isEditMode
 	});
 	const blockedByUser = blockedBy ? getLockUser(blockedBy) : null;
-	const transformedItem = React$1.useMemo(() => {
+	const transformedItem = React.useMemo(() => {
 		if (!item || !hasManyToManyRelations(withRelations)) return item;
 		const result = { ...item };
 		for (const key of Object.keys(withRelations)) {
@@ -149,20 +522,99 @@ function FormView({ collection, id, config, viewConfig, navigate, basePath = "/a
 	const createMutation = useCollectionCreate(collection);
 	const updateMutation = useCollectionUpdate(collection);
 	const deleteMutation = useCollectionDelete(collection);
+	const restoreMutation = useCollectionRestore(collection);
+	const revertVersionMutation = useCollectionRevertVersion(collection);
+	const [pendingRevertVersion, setPendingRevertVersion] = React.useState(null);
+	const { data: versionsData, isLoading: versionsLoading } = useCollectionVersions(collection, id ?? "", { limit: 50 }, { enabled: isEditMode && !!id && isHistoryOpen && !!schema?.options?.versioning });
+	const { data: auditData, isLoading: auditLoading } = useCollectionAuditHistory(collection, id ?? "", { limit: 50 }, { enabled: isEditMode && !!id && isHistoryOpen });
+	const workflowConfig = schema?.options?.workflow;
+	const workflowEnabled = !!workflowConfig?.enabled;
+	/**
+	* Lightweight versions query (limit: 1) just to read the current
+	* `versionStage`. Runs whenever workflow is enabled and we have an item id.
+	* The full 50-version query is still lazy-loaded behind the History sidebar.
+	*/
+	const { data: latestVersionData } = useCollectionVersions(collection, id ?? "", { limit: 1 }, { enabled: workflowEnabled && isEditMode && !!id });
+	const currentStage = latestVersionData?.[0]?.versionStage ?? workflowConfig?.initialStage ?? null;
+	const currentStageConfig = React.useMemo(() => workflowConfig?.stages?.find((s) => s.name === currentStage) ?? null, [workflowConfig?.stages, currentStage]);
+	const currentStageLabel = currentStageConfig?.label ?? currentStage ?? "";
+	/**
+	* Allowed transitions from the current stage.
+	* If the stage defines explicit `transitions`, only those are reachable.
+	* Otherwise fall back to all other stages (unrestricted).
+	*/
+	const allowedTransitions = React.useMemo(() => {
+		if (!workflowConfig?.stages || !currentStage) return [];
+		const stageNames = currentStageConfig?.transitions;
+		if (stageNames && stageNames.length > 0) return stageNames.map((name) => workflowConfig.stages.find((s_0) => s_0.name === name)).filter(Boolean);
+		return workflowConfig.stages.filter((s_1) => s_1.name !== currentStage);
+	}, [
+		workflowConfig,
+		currentStage,
+		currentStageConfig
+	]);
+	const transitionMutation = useTransitionStage(collection);
+	const [transitionTarget, setTransitionTarget] = React.useState(null);
+	const [transitionSchedule, setTransitionSchedule] = React.useState(false);
+	const [transitionScheduledAt, setTransitionScheduledAt] = React.useState(null);
 	const clientResolver = useCollectionValidation(collection);
 	const resolver = usePreferServerValidation(collection, { mode: isEditMode ? "update" : "create" }, clientResolver);
 	const form = useForm({
 		defaultValues: transformedItem ?? defaultValuesProp ?? {},
-		resolver
+		resolver,
+		mode: "onBlur"
 	});
-	const [isSaving, setIsSaving] = React$1.useState(false);
-	const [lastSaved, setLastSaved] = React$1.useState(null);
-	const autoSaveTimerRef = React$1.useRef(null);
-	const autoSaveConfig = React$1.useMemo(() => {
+	/**
+	* Execute the confirmed workflow transition (immediate or scheduled).
+	*/
+	const confirmTransition = () => {
+		if (!transitionTarget || !id) return;
+		const params = {
+			id,
+			stage: transitionTarget.name
+		};
+		if (transitionSchedule) {
+			if (transitionScheduledAt) params.scheduledAt = transitionScheduledAt;
+		}
+		const stageLabel = transitionTarget.label ? transitionTarget.label : transitionTarget.name;
+		const resetTransitionState = () => {
+			setTransitionTarget(null);
+			setTransitionSchedule(false);
+			setTransitionScheduledAt(null);
+		};
+		transitionMutation.mutateAsync(params).then((result_0) => {
+			if (result_0) {
+				if (typeof result_0 === "object") {
+					if ("id" in result_0) form.reset(result_0);
+				}
+			}
+			if (transitionSchedule) if (transitionScheduledAt) toast.success(t("workflow.scheduledSuccess", {
+				stage: stageLabel,
+				date: transitionScheduledAt.toLocaleString()
+			}));
+			else toast.success(t("workflow.transitionSuccess", { stage: stageLabel }));
+			else toast.success(t("workflow.transitionSuccess", { stage: stageLabel }));
+			resetTransitionState();
+		}, (err) => {
+			let description;
+			if (err instanceof Error) description = err.message;
+			else description = t("error.unknown");
+			toast.error(t("workflow.transitionFailed"), { description });
+			resetTransitionState();
+		});
+	};
+	const [isSaving, setIsSaving] = React.useState(false);
+	const [lastSaved, setLastSaved] = React.useState(null);
+	const formElementRef = React.useRef(null);
+	const formIsDirtyRef = React.useRef(false);
+	const formIsSubmittingRef = React.useRef(false);
+	const autoSaveConfig = React.useMemo(() => {
 		const cfg = config?.autoSave;
 		if (!cfg) return {
 			enabled: false,
-			debounce: 500
+			debounce: 500,
+			indicator: false,
+			preventNavigation: false
 		};
 		return {
 			enabled: cfg.enabled !== false,
@@ -171,21 +623,27 @@ function FormView({ collection, id, config, viewConfig, navigate, basePath = "/a
 			preventNavigation: cfg.preventNavigation !== false
 		};
 	}, [config]);
-	const { locale: contentLocale, setLocale: setContentLocale, isScoped } = useScopedLocale();
+	const { locale: contentLocale, setLocale: setContentLocale } = useScopedLocale();
 	const localeOptions = useSafeContentLocales()?.locales ?? [];
-	const prevLocaleRef = React$1.useRef(contentLocale);
-	const [localeChangeDialog, setLocaleChangeDialog] = React$1.useState({
+	const prevLocaleRef = React.useRef(contentLocale);
+	const [localeChangeDialog, setLocaleChangeDialog] = React.useState({
 		open: false,
 		pendingLocale: null
 	});
-	const localeChangeSnapshotRef = React$1.useRef(null);
-	const skipItemResetRef = React$1.useRef(false);
-	React$1.useEffect(() => {
+	const localeChangeSnapshotRef = React.useRef(null);
+	const skipItemResetRef = React.useRef(false);
+	const handleFormDirtyChange = React.useCallback((isDirty) => {
+		formIsDirtyRef.current = isDirty;
+	}, []);
+	const handleFormSubmittingChange = React.useCallback((isSubmitting) => {
+		formIsSubmittingRef.current = isSubmitting;
+	}, []);
+	React.useEffect(() => {
 		if (!isEditMode) {
 			prevLocaleRef.current = contentLocale;
 			return;
 		}
-		if (prevLocaleRef.current !== contentLocale) if (form.formState.isDirty && !localeChangeDialog.open) {
+		if (prevLocaleRef.current !== contentLocale) if (formIsDirtyRef.current && !localeChangeDialog.open) {
 			skipItemResetRef.current = true;
 			localeChangeSnapshotRef.current = form.getValues();
 			setLocaleChangeDialog({
@@ -199,34 +657,42 @@ function FormView({ collection, id, config, viewConfig, navigate, basePath = "/a
 		}
 	}, [
 		contentLocale,
-		form.formState.isDirty,
 		form.getValues,
 		setContentLocale,
 		localeChangeDialog.open,
 		isEditMode
 	]);
-	React$1.useEffect(() => {
-		if (skipItemResetRef.current) return;
+	React.useEffect(() => {
+		if (skipItemResetRef.current || isLoading) return;
 		if (transformedItem) form.reset(transformedItem);
-		else if (defaultValuesProp) form.reset(defaultValuesProp);
+		else if (!isEditMode && defaultValuesProp) form.reset(defaultValuesProp);
 	}, [
 		form,
 		transformedItem,
-		defaultValuesProp
+		defaultValuesProp,
+		isLoading,
+		isEditMode
 	]);
-	const handleLocaleChangeConfirm = React$1.useCallback(() => {
+	const localeQueryClient = useQueryClient();
+	const handleLocaleChangeConfirm = React.useCallback(() => {
 		skipItemResetRef.current = false;
 		localeChangeSnapshotRef.current = null;
 		if (localeChangeDialog.pendingLocale) {
 			prevLocaleRef.current = localeChangeDialog.pendingLocale;
 			setContentLocale(localeChangeDialog.pendingLocale);
+			localeQueryClient.invalidateQueries({ queryKey: ["collections", collection] });
 		}
 		setLocaleChangeDialog({
 			open: false,
 			pendingLocale: null
 		});
-	}, [localeChangeDialog.pendingLocale, setContentLocale]);
-	const handleLocaleChangeCancel = React$1.useCallback(() => {
+	}, [
+		localeChangeDialog.pendingLocale,
+		setContentLocale,
+		localeQueryClient,
+		collection
+	]);
+	const handleLocaleChangeCancel = React.useCallback(() => {
 		skipItemResetRef.current = false;
 		if (localeChangeSnapshotRef.current) form.reset(localeChangeSnapshotRef.current, {
 			keepDirty: true,
@@ -240,9 +706,9 @@ function FormView({ collection, id, config, viewConfig, navigate, basePath = "/a
 			pendingLocale: null
 		});
 	}, [form]);
-	const onSubmit = React$1.useEffectEvent(async (data) => {
+	const onSubmit = React.useEffectEvent(async (data) => {
 		const savePromise = async () => {
-			if (isEditMode) return await updateMutation.mutateAsync({
+			if (isEditMode && id) return await updateMutation.mutateAsync({
 				id,
 				data
 			});
@@ -250,12 +716,12 @@ function FormView({ collection, id, config, viewConfig, navigate, basePath = "/a
 		};
 		toast.promise(savePromise(), {
 			loading: isEditMode ? t("toast.saving") : t("toast.creating"),
-			success: (result) => {
-				if (onSuccess) onSuccess(result);
+			success: (result_1) => {
+				if (onSuccess) onSuccess(result_1);
 				else if (isEditMode) {
-					form.reset(result);
-					if (previewContext) previewContext.triggerPreviewRefresh();
-				} else if (result?.id) navigate(`${basePath}/collections/${collection}/${result.id}`);
+					form.reset(result_1);
+					triggerPreviewRefresh();
+				} else if (result_1?.id) navigate(`${basePath}/collections/${collection}/${result_1.id}`);
 				else navigate(`${basePath}/collections/${collection}`);
 				return isEditMode ? t("toast.saveSuccess") : t("toast.createSuccess");
 			},
@@ -273,65 +739,27 @@ function FormView({ collection, id, config, viewConfig, navigate, basePath = "/a
 			}
 		});
 	});
-	React$1.useEffect(() => {
-		if (autoSaveTimerRef.current) clearTimeout(autoSaveTimerRef.current);
-		if (!autoSaveConfig.enabled || !form.formState.isDirty || form.formState.isSubmitting || !isEditMode) return;
-		autoSaveTimerRef.current = setTimeout(async () => {
-			try {
-				setIsSaving(true);
-				await form.handleSubmit(async (data) => {
-					const result = await updateMutation.mutateAsync({
-						id,
-						data
-					});
-					form.reset(result);
-					if (previewContext) previewContext.triggerPreviewRefresh();
-					setLastSaved(/* @__PURE__ */ new Date());
-					setIsSaving(false);
-				})();
-			} catch (error) {
-				setIsSaving(false);
-				console.error("Autosave failed:", error);
-			}
-		}, autoSaveConfig.debounce);
-		return () => {
-			if (autoSaveTimerRef.current) clearTimeout(autoSaveTimerRef.current);
-		};
-	}, [
-		form.formState.isDirty,
-		form.formState.isSubmitting,
-		form,
-		autoSaveConfig.enabled,
-		autoSaveConfig.debounce,
-		isEditMode,
-		updateMutation,
-		resolvedFields,
-		adminConfig?.blocks,
-		id,
-		previewContext,
-		admin
-	]);
-	React$1.useEffect(() => {
+	React.useEffect(() => {
 		if (!autoSaveConfig.preventNavigation || !autoSaveConfig.enabled) return;
 		const handleBeforeUnload = (e) => {
-			if (form.formState.isDirty) {
+			if (formIsDirtyRef.current) {
 				e.preventDefault();
 				e.returnValue = "";
 			}
 		};
 		window.addEventListener("beforeunload", handleBeforeUnload);
 		return () => window.removeEventListener("beforeunload", handleBeforeUnload);
-	}, [
-		form.formState.isDirty,
-		autoSaveConfig.preventNavigation,
-		autoSaveConfig.enabled
-	]);
-	React$1.useEffect(() => {
-		const handleKeyDown = (e) => {
-			if ((e.metaKey || e.ctrlKey) && e.key === "s") {
-				e.preventDefault();
-				e.stopPropagation();
-				form.handleSubmit(onSubmit, (errors) => {
+	}, [autoSaveConfig.preventNavigation, autoSaveConfig.enabled]);
+	const onSubmitRef = React.useRef(onSubmit);
+	React.useEffect(() => {
+		onSubmitRef.current = onSubmit;
+	});
+	React.useEffect(() => {
+		const handleKeyDown = (e_0) => {
+			if ((e_0.metaKey || e_0.ctrlKey) && e_0.key === "s") {
+				e_0.preventDefault();
+				e_0.stopPropagation();
+				form.handleSubmit(onSubmitRef.current, (errors) => {
 					console.warn("[FormView] Validation errors:", errors);
 					toast.error(t("toast.validationFailed"));
 				})();
@@ -339,34 +767,53 @@ function FormView({ collection, id, config, viewConfig, navigate, basePath = "/a
 		};
 		document.addEventListener("keydown", handleKeyDown);
 		return () => document.removeEventListener("keydown", handleKeyDown);
-	}, [form, onSubmit]);
-	const isSubmitting = createMutation.isPending || updateMutation.isPending || form.formState.isSubmitting;
+	}, [form, t]);
+	const isMutationPending = createMutation.isPending || updateMutation.isPending;
 	const configFormActions = resolvedFormConfig?.actions;
-	const formActions = React$1.useMemo(() => {
-		if (configFormActions) return configFormActions;
-		if (!isEditMode) return {
+	const { serverActions } = useServerActions({ collection });
+	const scopedServerFormActions = React.useMemo(() => isEditMode ? serverActions.filter((action) => {
+		const scope = action.scope;
+		return scope === "single" || scope === "row";
+	}) : [], [isEditMode, serverActions]);
+	const formActions = React.useMemo(() => {
+		const base = configFormActions ?? (!isEditMode ? {
 			primary: [],
 			secondary: []
+		} : getDefaultFormActions());
+		const primary = [...base.primary ?? []];
+		const secondary = [...base.secondary ?? []];
+		const existingIds = new Set([...primary, ...secondary].map((a) => a.id));
+		for (const action_0 of scopedServerFormActions) {
+			if (existingIds.has(action_0.id)) continue;
+			secondary.push(action_0);
+			existingIds.add(action_0.id);
+		}
+		return {
+			primary,
+			secondary
 		};
-		return getDefaultFormActions();
-	}, [configFormActions, isEditMode]);
-	const [dialogAction, setDialogAction] = React$1.useState(null);
-	const [confirmAction, setConfirmAction] = React$1.useState(null);
-	const [actionLoading, setActionLoading] = React$1.useState(false);
+	}, [
+		configFormActions,
+		isEditMode,
+		scopedServerFormActions
+	]);
+	const [dialogAction, setDialogAction] = React.useState(null);
+	const [confirmAction, setConfirmAction] = React.useState(null);
+	const [actionLoading, setActionLoading] = React.useState(false);
 	const storeNavigate = useAdminStore(selectNavigate);
 	const storeBasePath = useAdminStore(selectBasePath);
 	const client = useAdminStore(selectClient);
 	const queryClient = useQueryClient();
-	const queryOpts = React$1.useMemo(() => createQuestpieQueryOptions(client, {
+	const queryOpts = React.useMemo(() => createQuestpieQueryOptions(client, {
 		keyPrefix: QUERY_KEY_PREFIX,
 		locale: contentLocale
 	}), [client, contentLocale]);
-	const actionQueryClient = React$1.useMemo(() => ({
+	const actionQueryClient = React.useMemo(() => ({
 		invalidateQueries: (filters) => queryClient.invalidateQueries(filters),
-		refetchQueries: (filters) => queryClient.refetchQueries(filters),
-		resetQueries: (filters) => queryClient.resetQueries(filters)
+		refetchQueries: (filters_0) => queryClient.refetchQueries(filters_0),
+		resetQueries: (filters_1) => queryClient.resetQueries(filters_1)
 	}), [queryClient]);
-	const actionHelpers = React$1.useMemo(() => ({
+	const actionHelpers = React.useMemo(() => ({
 		navigate: storeNavigate,
 		toast: {
 			success: toast.success,
@@ -390,18 +837,18 @@ function FormView({ collection, id, config, viewConfig, navigate, basePath = "/a
 				contentLocale
 			]) });
 		},
-		invalidateItem: async (itemId, targetCollection) => {
-			const col = targetCollection || collection;
+		invalidateItem: async (itemId, targetCollection_0) => {
+			const col_0 = targetCollection_0 || collection;
 			await queryClient.invalidateQueries({ queryKey: queryOpts.key([
 				"collections",
-				col,
+				col_0,
 				"findOne",
 				contentLocale,
 				{ id: itemId }
 			]) });
 			await queryClient.invalidateQueries({ queryKey: queryOpts.key([
 				"collections",
-				col,
+				col_0,
 				"find",
 				contentLocale
 			]) });
@@ -430,53 +877,72 @@ function FormView({ collection, id, config, viewConfig, navigate, basePath = "/a
 		basePath: storeBasePath || basePath
 	}), [
 		storeNavigate,
-		storeBasePath,
-		basePath,
+		t,
+		collection,
 		queryClient,
 		queryOpts,
-		collection,
 		contentLocale,
-		t
+		storeBasePath,
+		basePath
 	]);
-	const actionContext = React$1.useMemo(() => ({
-		item: transformedItem,
+	const transformedItemRef = React.useRef(transformedItem);
+	transformedItemRef.current = transformedItem;
+	const actionContext = React.useMemo(() => ({
+		get item() {
+			return transformedItemRef.current;
+		},
 		collection,
 		helpers: actionHelpers,
 		queryClient: actionQueryClient
 	}), [
-		transformedItem,
 		collection,
 		actionHelpers,
 		actionQueryClient
 	]);
-	const filterVisibleActions = React$1.useCallback((actions) => {
+	const filterVisibleActions = React.useCallback((actions) => {
 		if (!actions) return [];
-		return actions.filter((action) => {
-			if (action.visible === void 0) return true;
-			if (typeof action.visible === "function") return action.visible(actionContext);
-			return action.visible;
+		return actions.filter((action_1) => {
+			if (action_1.visible === void 0) return true;
+			if (typeof action_1.visible === "function") return action_1.visible(actionContext);
+			return action_1.visible;
 		});
 	}, [actionContext]);
-	const visiblePrimaryActions = React$1.useMemo(() => filterVisibleActions(formActions?.primary), [formActions?.primary, filterVisibleActions]);
-	const visibleSecondaryActions = React$1.useMemo(() => filterVisibleActions(formActions?.secondary), [formActions?.secondary, filterVisibleActions]);
-	const regularSecondary = visibleSecondaryActions.filter((a) => a.variant !== "destructive");
-	const destructiveSecondary = visibleSecondaryActions.filter((a) => a.variant === "destructive");
-	const executeAction = React$1.useCallback(async (action) => {
-		const { handler } = action;
-		const actionLabel = resolveText(action.label, action.id);
+	const visiblePrimaryActions = React.useMemo(() => filterVisibleActions(formActions.primary), [formActions.primary, filterVisibleActions]);
+	const visibleSecondaryActions = React.useMemo(() => filterVisibleActions(formActions.secondary), [formActions.secondary, filterVisibleActions]);
+	const regularSecondary = visibleSecondaryActions.filter((a_0) => a_0.variant !== "destructive");
+	const destructiveSecondary = visibleSecondaryActions.filter((a_1) => a_1.variant === "destructive");
+	const executeAction = async (action_2) => {
+		const { handler } = action_2;
+		const actionLabel = resolveText(action_2.label, action_2.id);
 		switch (handler.type) {
 			case "navigate":
 				storeNavigate(typeof handler.path === "function" ? handler.path(transformedItem) : handler.path);
 				break;
 			case "api":
+				if (handler.method === "POST" && handler.endpoint === "{id}/restore") {
+					const itemId_0 = transformedItem?.id || id;
+					if (!itemId_0) {
+						toast.error(t("collection.restoreError"));
+						break;
+					}
+					setActionLoading(true);
+					toast.promise(restoreMutation.mutateAsync({ id: itemId_0 }).finally(() => {
+						setActionLoading(false);
+					}), {
+						loading: t("collection.restoring"),
+						success: t("collection.restoreSuccess"),
+						error: (err_1) => err_1.message || t("collection.restoreError")
+					});
+					break;
+				}
 				if (handler.method === "DELETE") {
-					const itemId = transformedItem?.id || id;
-					if (!itemId) {
+					const itemId_1 = transformedItem?.id || id;
+					if (!itemId_1) {
 						toast.error(t("toast.deleteFailed"));
 						break;
 					}
 					setActionLoading(true);
-					toast.promise(deleteMutation.mutateAsync(itemId).finally(() => {
+					toast.promise(deleteMutation.mutateAsync(itemId_1).finally(() => {
 						setActionLoading(false);
 					}), {
 						loading: t("toast.deleting"),
@@ -484,32 +950,46 @@ function FormView({ collection, id, config, viewConfig, navigate, basePath = "/a
 							navigate(`${basePath}/collections/${collection}`);
 							return t("toast.deleteSuccess");
 						},
-						error: (err) => err.message || t("toast.deleteFailed")
+						error: (err_2) => err_2.message || t("toast.deleteFailed")
 					});
 				} else {
-					const endpoint = handler.endpoint.replace("{id}", String(transformedItem?.id || id));
+					let itemId_;
+					if (transformedItem?.id) itemId_ = String(transformedItem.id);
+					else itemId_ = String(id);
+					const endpoint = handler.endpoint.replace("{id}", itemId_);
+					const method = handler.method ? handler.method : "POST";
+					let body;
+					if (handler.body) body = JSON.stringify(handler.body(actionContext));
 					setActionLoading(true);
 					const apiPromise = async () => {
-						try {
-							const url = `${storeBasePath}/${collection}/${endpoint}`;
-							const response = await fetch(url, {
-								method: handler.method || "POST",
-								headers: { "Content-Type": "application/json" },
-								body: handler.body ? JSON.stringify(handler.body(actionContext)) : void 0
-							});
-							if (!response.ok) {
-								const error = await response.json().catch(() => ({}));
-								throw new Error(error.message || t("toast.actionFailed"));
-							}
-							return response.json();
-						} finally {
-							setActionLoading(false);
+						const url = `${storeBasePath}/${collection}/${endpoint}`;
+						const response = await fetch(url, {
+							method,
+							headers: { "Content-Type": "application/json" },
+							body
+						});
+						if (!response.ok) {
+							let errorBody = {};
+							try {
+								errorBody = await response.json();
+							} catch (_parseErr) {}
+							let errorMessage;
+							if (errorBody.message) if (typeof errorBody.message === "string") errorMessage = errorBody.message;
+							else errorMessage = t("toast.actionFailed");
+							else errorMessage = t("toast.actionFailed");
+							throw new Error(errorMessage);
 						}
+						return response.json();
 					};
-					toast.promise(apiPromise(), {
+					const p = apiPromise();
+					p.then(() => setActionLoading(false), () => setActionLoading(false));
+					toast.promise(p, {
 						loading: `${actionLabel}...`,
 						success: t("toast.actionSuccess"),
-						error: (err) => err.message || t("toast.actionFailed")
+						error: (err_3) => {
+							if (err_3.message) return err_3.message;
+							return t("toast.actionFailed");
+						}
 					});
 				}
 				break;
@@ -520,34 +1000,36 @@ function FormView({ collection, id, config, viewConfig, navigate, basePath = "/a
 					toast.promise(customPromise.finally(() => setActionLoading(false)), {
 						loading: `${actionLabel}...`,
 						success: t("toast.actionSuccess"),
-						error: (err) => err.message || t("toast.actionFailed")
+						error: (err_0) => err_0.message || t("toast.actionFailed")
 					});
 				}
 				break;
 			}
 		}
 		setConfirmAction(null);
-	}, [
-		transformedItem,
-		id,
-		actionContext,
-		storeNavigate,
-		storeBasePath,
-		deleteMutation,
-		collection,
-		basePath,
-		navigate,
-		t,
-		resolveText
-	]);
-	const handleActionClick = React$1.useCallback((action) => {
-		if (action.confirmation) setConfirmAction(action);
-		else if (action.handler.type === "dialog" || action.handler.type === "form") setDialogAction(action);
-		else executeAction(action);
-	}, [executeAction]);
-	const handleConfirm = React$1.useCallback(async () => {
+	};
+	const handleRevertVersion = (version) => {
+		setPendingRevertVersion(version);
+	};
+	const confirmRevertVersion = async () => {
+		if (!pendingRevertVersion || !id) return;
+		const payload = { id };
+		if (typeof pendingRevertVersion.versionId === "string") payload.versionId = pendingRevertVersion.versionId;
+		else if (typeof pendingRevertVersion.versionNumber === "number") payload.version = pendingRevertVersion.versionNumber;
+		const result_2 = await revertVersionMutation.mutateAsync(payload);
+		form.reset(result_2);
+		triggerPreviewRefresh();
+		toast.success(t("version.revertSuccess"));
+		setPendingRevertVersion(null);
+	};
+	const handleActionClick = (action_3) => {
+		if (action_3.confirmation) setConfirmAction(action_3);
+		else if (action_3.handler.type === "dialog" || action_3.handler.type === "form") setDialogAction(action_3);
+		else executeAction(action_3);
+	};
+	const handleConfirm = async () => {
 		if (confirmAction) await executeAction(confirmAction);
-	}, [confirmAction, executeAction]);
+	};
 	const formatDate = (date) => {
 		return new Date(date).toLocaleDateString(void 0, {
 			year: "numeric",
@@ -557,293 +1039,368 @@ function FormView({ collection, id, config, viewConfig, navigate, basePath = "/a
 			minute: "2-digit"
 		});
 	};
-	const formatTimeAgo = (date) => {
-		const seconds = Math.floor((Date.now() - date.getTime()) / 1e3);
+	const formatTimeAgo = (date_0) => {
+		const seconds = Math.floor((Date.now() - date_0.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) });
 	};
-	const [, forceUpdate] = React$1.useReducer((x) => x + 1, 0);
-	React$1.useEffect(() => {
-		if (!lastSaved || !autoSaveConfig.indicator) return;
-		const interval = setInterval(forceUpdate, 1e4);
-		return () => clearInterval(interval);
-	}, [lastSaved, autoSaveConfig.indicator]);
-	const watchedValues = useWatch({ control: form.control });
-	const lockRefreshTimerRef = React$1.useRef(null);
-	React$1.useEffect(() => {
+	const lockRefreshTimerRef = React.useRef(null);
+	React.useEffect(() => {
 		if (!isEditMode || isBlocked) return;
-		if (lockRefreshTimerRef.current) clearTimeout(lockRefreshTimerRef.current);
-		lockRefreshTimerRef.current = setTimeout(() => {
-			refreshLock();
-		}, 1e3);
+		const scheduleLockRefresh = () => {
+			if (lockRefreshTimerRef.current) clearTimeout(lockRefreshTimerRef.current);
+			lockRefreshTimerRef.current = setTimeout(() => {
+				refreshLock();
+			}, 1e3);
+		};
+		const events = [
+			"input",
+			"change",
+			"keydown",
+			"pointerdown"
+		];
+		const target = formElementRef.current ?? document;
+		for (const event of events) target.addEventListener(event, scheduleLockRefresh, { capture: true });
+		scheduleLockRefresh();
 		return () => {
+			for (const event_0 of events) target.removeEventListener(event_0, scheduleLockRefresh, { capture: true });
 			if (lockRefreshTimerRef.current) clearTimeout(lockRefreshTimerRef.current);
 		};
 	}, [
-		watchedValues,
 		isEditMode,
 		isBlocked,
 		refreshLock
 	]);
-	const [previewUrl, setPreviewUrl] = React$1.useState(null);
-	React$1.useEffect(() => {
-		if (!hasPreview || !client) {
-			setPreviewUrl(null);
-			return;
-		}
-		const timeoutId = setTimeout(async () => {
-			try {
-				const formValues = watchedValues ?? {};
-				setPreviewUrl((await client.rpc.getPreviewUrl({
-					collection,
-					record: formValues,
-					locale: contentLocale
-				}))?.url ?? null);
-			} catch {
-				setPreviewUrl(null);
-			}
-		}, 300);
-		return () => clearTimeout(timeoutId);
-	}, [
-		hasPreview,
-		client,
-		collection,
-		watchedValues,
-		contentLocale
-	]);
+	const { data: previewUrl = null } = useQuery({
+		queryKey: [
+			"questpie",
+			"preview-url",
+			collection,
+			transformedItem?.id,
+			contentLocale
+		],
+		queryFn: async () => {
+			return (await client.routes.getPreviewUrl({
+				collection,
+				record: transformedItem,
+				locale: contentLocale
+			}))?.url ?? null;
+		},
+		enabled: isLivePreviewOpen && canUseLivePreview && !!client && !!transformedItem,
+		staleTime: 3e4
+	});
+	if (isEditMode && itemError) {
+		const is404 = itemError != null && typeof itemError === "object" && "status" in itemError && itemError.status === 404;
+		return /* @__PURE__ */ jsxs("div", {
+			className: "text-muted-foreground flex h-64 flex-col items-center justify-center gap-3",
+			children: [
+				/* @__PURE__ */ jsx(Icon, {
+					icon: is404 ? "ph:file-dashed" : "ph:warning-circle",
+					className: "text-destructive size-8"
+				}),
+				/* @__PURE__ */ jsx("p", {
+					className: "text-sm",
+					children: is404 ? t("errors.notFound") : itemError instanceof Error ? itemError.message : t("errors.failedToLoad")
+				}),
+				is404 && /* @__PURE__ */ jsx(Button, {
+					variant: "outline",
+					size: "sm",
+					onClick: () => navigate(`${basePath}/collections/${collection}`),
+					children: t("common.backToList")
+				})
+			]
+		});
+	}
 	if (isEditMode && isLoading) return /* @__PURE__ */ jsx(FormViewSkeleton, {});
 	const collectionLabel = resolveText(config?.label ?? schema?.admin?.config?.label, collection);
 	const title = isEditMode ? item?._title || item?.id || t("collection.edit", { name: collectionLabel }) : t("collection.new", { name: collectionLabel });
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
-		className: "w-full",
+	const formShell = /* @__PURE__ */ jsx("div", {
+		className: "qa-form-view w-full",
 		children: /* @__PURE__ */ jsxs(Fragment, { children: [
 			isBlocked && blockedByUser && /* @__PURE__ */ jsxs("div", {
-				className: "flex items-center gap-3 p-3 mb-4 rounded-lg bg-warning/10 border border-warning/30",
+				className: "qa-form-view__lock-banner bg-warning/10 border-warning/30 mb-4 flex items-center gap-3 border p-3",
 				children: [
 					blockedByUser.image ? /* @__PURE__ */ jsx("img", {
 						src: blockedByUser.image,
 						alt: "",
 						className: "size-8 rounded-full"
 					}) : /* @__PURE__ */ jsx("div", {
-						className: "size-8 rounded-full bg-warning/20 flex items-center justify-center",
+						className: "bg-warning/20 flex size-8 items-center justify-center rounded-full",
 						children: /* @__PURE__ */ jsx(Icon, {
 							icon: "ph:user",
-							className: "size-4 text-warning"
+							className: "text-warning size-4"
 						})
 					}),
 					/* @__PURE__ */ jsxs("div", {
-						className: "flex-1 min-w-0",
+						className: "min-w-0 flex-1",
 						children: [/* @__PURE__ */ jsx("p", {
-							className: "text-sm font-medium text-warning",
+							className: "text-warning text-sm font-medium",
 							children: t("lock.blockedTitle", { name: blockedByUser.name ?? blockedByUser.email })
 						}), /* @__PURE__ */ jsx("p", {
-							className: "text-xs text-warning/80",
+							className: "text-warning/80 text-xs",
 							children: t("lock.blockedDescription")
 						})]
 					}),
 					/* @__PURE__ */ jsx(Icon, {
 						icon: "ph:lock-simple",
-						className: "size-5 text-warning"
+						className: "text-warning size-5"
 					})
 				]
 			}),
 			isOpenElsewhere && /* @__PURE__ */ jsxs("div", {
-				className: "flex items-center gap-3 p-3 mb-4 rounded-lg bg-info/10 border border-info/30",
+				className: "bg-info/10 border-info/30 mb-4 flex items-center gap-3 border p-3",
 				children: [/* @__PURE__ */ jsx(Icon, {
 					icon: "ph:browser",
-					className: "size-5 text-info"
+					className: "text-info size-5"
 				}), /* @__PURE__ */ jsx("p", {
-					className: "text-sm text-info",
+					className: "text-info text-sm",
 					children: t("lock.openElsewhere")
 				})]
 			}),
 			/* @__PURE__ */ jsxs(FormProvider, {
 				...form,
-				children: [/* @__PURE__ */ jsx(ReactiveFieldsManager, {
-					collection,
-					reactiveConfigs,
-					enabled: !isBlocked && !isSubmitting
-				}), /* @__PURE__ */ jsxs("form", {
-					onSubmit: (e) => {
-						e.stopPropagation();
-						if (isBlocked) {
-							e.preventDefault();
-							toast.error(t("lock.cannotSave"));
-							return;
-						}
-						form.handleSubmit(onSubmit, (errors) => {
-							console.warn("[FormView] Validation errors:", errors);
-							toast.error(t("toast.validationFailed"), { description: t("toast.validationDescription") });
-						})(e);
-					},
-					className: "space-y-4",
-					children: [/* @__PURE__ */ jsxs("div", {
-						className: "flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between",
-						children: [/* @__PURE__ */ jsxs("div", {
-							className: "min-w-0 flex-1",
-							children: [/* @__PURE__ */ jsxs("div", {
-								className: "flex items-center gap-3 flex-wrap",
-								children: [
-									/* @__PURE__ */ jsx("h1", {
-										className: "text-2xl md:text-3xl font-extrabold tracking-tight truncate",
-										children: title
-									}),
-									localeOptions.length > 0 && /* @__PURE__ */ jsx(LocaleSwitcher, {
-										locales: localeOptions,
-										value: contentLocale,
-										onChange: setContentLocale
-									}),
-									autoSaveConfig.indicator && autoSaveConfig.enabled && isEditMode && /* @__PURE__ */ jsxs(Fragment, { children: [
-										isSaving && /* @__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")]
-										}),
-										!isSaving && form.formState.isDirty && /* @__PURE__ */ jsxs(Badge, {
-											variant: "outline",
-											className: "gap-1.5",
-											children: [/* @__PURE__ */ jsx(Icon, {
-												icon: "ph:clock-counter-clockwise",
-												className: "size-3"
-											}), t("autosave.unsavedChanges")]
-										}),
-										!isSaving && !form.formState.isDirty && lastSaved && /* @__PURE__ */ jsxs(Badge, {
-											variant: "secondary",
-											className: "gap-1.5 text-muted-foreground",
+				children: [
+					/* @__PURE__ */ jsx(FormStateRefBridge, {
+						control: form.control,
+						onDirtyChange: handleFormDirtyChange,
+						onSubmittingChange: handleFormSubmittingChange
+					}),
+					/* @__PURE__ */ jsx(AutosaveManager, {
+						form,
+						formElementRef,
+						isEditMode,
+						id,
+						enabled: autoSaveConfig.enabled,
+						debounce: autoSaveConfig.debounce,
+						isDirtyRef: formIsDirtyRef,
+						isSubmittingRef: formIsSubmittingRef,
+						updateMutation,
+						onPreviewRefresh: triggerPreviewRefresh,
+						onSavingChange: setIsSaving,
+						onSaved: setLastSaved
+					}),
+					/* @__PURE__ */ jsx(ReactiveFieldsManager, {
+						collection,
+						reactiveConfigs,
+						enabled: !isBlocked && !isMutationPending
+					}),
+					/* @__PURE__ */ jsx(RenderProfiler, {
+						id: `form.shell.${collection}`,
+						minDurationMs: 12,
+						children: /* @__PURE__ */ jsxs("form", {
+							ref: formElementRef,
+							onSubmit: (e_1) => {
+								e_1.stopPropagation();
+								if (isBlocked) {
+									e_1.preventDefault();
+									toast.error(t("lock.cannotSave"));
+									return;
+								}
+								form.handleSubmit(onSubmit, (errors_0) => {
+									console.warn("[FormView] Validation errors:", errors_0);
+									toast.error(t("toast.validationFailed"), { description: t("toast.validationDescription") });
+								})(e_1);
+							},
+							className: "qa-form-view__form space-y-4",
+							children: [
+								/* @__PURE__ */ jsxs("div", {
+									className: "qa-form-view__header flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between",
+									children: [/* @__PURE__ */ jsxs("div", {
+										className: "min-w-0 flex-1",
+										children: [/* @__PURE__ */ jsxs("div", {
+											className: "flex flex-wrap items-center gap-3",
 											children: [
-												/* @__PURE__ */ jsx(Icon, {
-													icon: "ph:check",
-													className: "size-3"
+												/* @__PURE__ */ jsx("h1", {
+													className: "qa-form-view__title truncate text-2xl font-extrabold tracking-tight md:text-3xl",
+													children: title
+												}),
+												localeOptions.length > 0 && /* @__PURE__ */ jsx(LocaleSwitcher, {
+													locales: localeOptions,
+													value: contentLocale,
+													onChange: setContentLocale
+												}),
+												/* @__PURE__ */ jsx(AutosaveIndicator, {
+													control: form.control,
+													enabled: autoSaveConfig.enabled,
+													indicator: autoSaveConfig.indicator,
+													isEditMode,
+													isSaving,
+													lastSaved,
+													formatTimeAgo,
+													t
 												}),
-												t("autosave.saved"),
-												" ",
-												formatTimeAgo(lastSaved)
+												workflowEnabled && currentStage && /* @__PURE__ */ jsxs(Badge, {
+													variant: "outline",
+													className: "gap-1.5",
+													children: [/* @__PURE__ */ jsx(Icon, {
+														icon: "ph:git-branch",
+														className: "size-3"
+													}), currentStageLabel]
+												})
 											]
-										})
-									] })
-								]
-							}), showMeta && item && /* @__PURE__ */ jsx("div", {
-								className: "mt-1 overflow-x-auto no-scrollbar",
-								children: /* @__PURE__ */ jsxs("p", {
-									className: "text-xs text-muted-foreground font-mono flex items-center gap-2 whitespace-nowrap",
-									children: [
-										/* @__PURE__ */ jsxs("span", {
-											className: "opacity-60",
-											children: [t("form.id"), ":"]
-										}),
-										/* @__PURE__ */ jsx("button", {
-											type: "button",
-											className: "hover:text-foreground transition-colors cursor-pointer",
-											onClick: () => {
-												navigator.clipboard.writeText(String(item.id)).then(() => toast.success(t("toast.idCopied")), () => toast.error(t("toast.copyFailed")));
-											},
-											title: t("common.copy"),
-											children: item.id
-										}),
-										item.createdAt && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
-											className: "opacity-40",
-											children: "·"
-										}), /* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsxs("span", {
-											className: "opacity-60",
-											children: [t("form.created"), " "]
-										}), formatDate(item.createdAt)] })] }),
-										item.updatedAt && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
-											className: "opacity-40",
-											children: "·"
-										}), /* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsxs("span", {
-											className: "opacity-60",
-											children: [t("form.updated"), " "]
-										}), formatDate(item.updatedAt)] })] })
-									]
-								})
-							})]
-						}), /* @__PURE__ */ jsxs("div", {
-							className: "flex items-center gap-2 shrink-0 w-auto",
-							children: [
-								headerActions,
-								hasPreview && /* @__PURE__ */ jsxs(Button, {
-									type: "button",
-									variant: "outline",
-									size: "icon",
-									className: "size-9",
-									onClick: () => setIsLivePreviewOpen(true),
-									title: t("preview.livePreview"),
-									children: [/* @__PURE__ */ jsx(Icon, {
-										icon: "ph:eye",
-										className: "size-4"
-									}), /* @__PURE__ */ jsx("span", {
-										className: "sr-only",
-										children: t("preview.livePreview")
+										}), showMeta && item && /* @__PURE__ */ jsx("div", {
+											className: "qa-form-view__meta no-scrollbar mt-1 overflow-x-auto",
+											children: /* @__PURE__ */ jsxs("p", {
+												className: "text-muted-foreground flex items-center gap-2 font-mono text-xs whitespace-nowrap",
+												children: [
+													/* @__PURE__ */ jsxs("span", {
+														className: "opacity-60",
+														children: [t("form.id"), ":"]
+													}),
+													/* @__PURE__ */ jsx("button", {
+														type: "button",
+														className: "hover:text-foreground cursor-pointer transition-colors",
+														onClick: () => {
+															navigator.clipboard.writeText(String(item.id)).then(() => toast.success(t("toast.idCopied")), () => toast.error(t("toast.copyFailed")));
+														},
+														title: t("common.copy"),
+														children: item.id
+													}),
+													item.createdAt && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+														className: "opacity-40",
+														children: "·"
+													}), /* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsxs("span", {
+														className: "opacity-60",
+														children: [t("form.created"), " "]
+													}), formatDate(item.createdAt)] })] }),
+													item.updatedAt && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+														className: "opacity-40",
+														children: "·"
+													}), /* @__PURE__ */ jsxs("span", { children: [/* @__PURE__ */ jsxs("span", {
+														className: "opacity-60",
+														children: [t("form.updated"), " "]
+													}), formatDate(item.updatedAt)] })] })
+												]
+											})
+										})]
+									}), /* @__PURE__ */ jsxs("div", {
+										className: "qa-form-view__actions flex w-auto shrink-0 items-center gap-2",
+										children: [
+											headerActions,
+											canUseLivePreview && /* @__PURE__ */ jsxs(Button, {
+												type: "button",
+												variant: "outline",
+												size: "icon",
+												className: "size-9",
+												onClick: () => setIsLivePreviewOpen(true),
+												title: t("preview.livePreview"),
+												children: [/* @__PURE__ */ jsx(Icon, {
+													icon: "ph:eye",
+													className: "size-4"
+												}), /* @__PURE__ */ jsx("span", {
+													className: "sr-only",
+													children: t("preview.livePreview")
+												})]
+											}),
+											isEditMode && id && schema?.options?.versioning && /* @__PURE__ */ jsxs(Button, {
+												type: "button",
+												variant: "outline",
+												size: "icon",
+												className: "size-9",
+												onClick: () => setIsHistoryOpen(true),
+												title: t("history.title"),
+												children: [/* @__PURE__ */ jsx(Icon, {
+													icon: "ph:clock-counter-clockwise",
+													className: "size-4"
+												}), /* @__PURE__ */ jsx("span", {
+													className: "sr-only",
+													children: t("history.title")
+												})]
+											}),
+											workflowEnabled && isEditMode && id && allowedTransitions.length > 0 && /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsxs(DropdownMenuTrigger, {
+												render: /* @__PURE__ */ jsx(Button, {
+													type: "button",
+													variant: "outline",
+													className: "gap-2"
+												}),
+												children: [/* @__PURE__ */ jsx(Icon, {
+													icon: "ph:arrows-left-right",
+													className: "size-4"
+												}), t("workflow.transition")]
+											}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+												align: "end",
+												children: allowedTransitions.map((stage) => /* @__PURE__ */ jsxs(DropdownMenuItem, {
+													onClick: () => setTransitionTarget({
+														name: stage.name,
+														label: stage.label
+													}),
+													children: [/* @__PURE__ */ jsx(Icon, {
+														icon: "ph:arrow-right",
+														className: "mr-2 size-4"
+													}), stage.label || stage.name]
+												}, stage.name))
+											})] }),
+											visiblePrimaryActions.map((action_4) => /* @__PURE__ */ jsx(ActionButton, {
+												action: action_4,
+												collection,
+												helpers: actionHelpers,
+												onOpenDialog: (a_2) => setDialogAction(a_2)
+											}, action_4.id)),
+											/* @__PURE__ */ jsx(SaveSubmitButton, {
+												control: form.control,
+												isMutationPending,
+												t
+											}),
+											visibleSecondaryActions.length > 0 && /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsxs(DropdownMenuTrigger, {
+												render: /* @__PURE__ */ jsx(Button, {
+													variant: "outline",
+													size: "icon",
+													className: "size-9"
+												}),
+												children: [/* @__PURE__ */ jsx(Icon, {
+													icon: "ph:dots-three-vertical",
+													className: "size-4"
+												}), /* @__PURE__ */ jsx("span", {
+													className: "sr-only",
+													children: t("common.moreActions")
+												})]
+											}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
+												align: "end",
+												children: [
+													regularSecondary.map((action_5) => {
+														return /* @__PURE__ */ jsxs(DropdownMenuItem, {
+															onClick: () => handleActionClick(action_5),
+															disabled: actionLoading,
+															children: [resolveIconElement(action_5.icon, { className: "mr-2 size-4" }), resolveText(action_5.label)]
+														}, action_5.id);
+													}),
+													regularSecondary.length > 0 && destructiveSecondary.length > 0 && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+													destructiveSecondary.map((action_6) => {
+														return /* @__PURE__ */ jsxs(DropdownMenuItem, {
+															variant: "destructive",
+															onClick: () => handleActionClick(action_6),
+															disabled: actionLoading,
+															children: [resolveIconElement(action_6.icon, { className: "mr-2 size-4" }), resolveText(action_6.label)]
+														}, action_6.id);
+													})
+												]
+											})] })
+										]
 									})]
 								}),
-								visiblePrimaryActions.map((action) => /* @__PURE__ */ jsx(ActionButton, {
-									action,
-									collection,
-									helpers: actionHelpers,
-									onOpenDialog: (a) => setDialogAction(a)
-								}, action.id)),
-								/* @__PURE__ */ jsx(Button, {
-									type: "submit",
-									disabled: isSubmitting || !form.formState.isDirty,
-									className: "gap-2",
-									children: isSubmitting ? /* @__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")] })
-								}),
-								visibleSecondaryActions.length > 0 && /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsxs(DropdownMenuTrigger, {
-									render: /* @__PURE__ */ jsx(Button, {
-										variant: "outline",
-										size: "icon",
-										className: "size-9"
-									}),
+								item?.deletedAt && /* @__PURE__ */ jsxs("div", {
+									className: "qa-form-view__deleted-banner border-destructive/30 bg-destructive/5 text-destructive flex items-center gap-2 border px-4 py-3 text-sm",
 									children: [/* @__PURE__ */ jsx(Icon, {
-										icon: "ph:dots-three-vertical",
-										className: "size-4"
-									}), /* @__PURE__ */ jsx("span", {
-										className: "sr-only",
-										children: t("common.moreActions")
-									})]
-								}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
-									align: "end",
-									children: [
-										regularSecondary.map((action) => {
-											return /* @__PURE__ */ jsxs(DropdownMenuItem, {
-												onClick: () => handleActionClick(action),
-												disabled: actionLoading,
-												children: [resolveIconElement(action.icon, { className: "mr-2 size-4" }), resolveText(action.label)]
-											}, action.id);
-										}),
-										regularSecondary.length > 0 && destructiveSecondary.length > 0 && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
-										destructiveSecondary.map((action) => {
-											return /* @__PURE__ */ jsxs(DropdownMenuItem, {
-												variant: "destructive",
-												onClick: () => handleActionClick(action),
-												disabled: actionLoading,
-												children: [resolveIconElement(action.icon, { className: "mr-2 size-4" }), resolveText(action.label)]
-											}, action.id);
-										})
-									]
-								})] })
+										icon: "ph:trash",
+										className: "size-4 shrink-0"
+									}), /* @__PURE__ */ jsx("span", { children: t("form.deletedBanner", {
+										date: formatDate(item.deletedAt),
+										defaultValue: `This record was deleted on ${formatDate(item.deletedAt)}. Use the Restore action to make it active again.`
+									}) })]
+								}),
+								/* @__PURE__ */ jsx(FormFieldsContent, {
+									collection,
+									config: formConfigBridge,
+									registry,
+									allCollectionsConfig
+								})
 							]
-						})]
-					}), /* @__PURE__ */ jsx(AutoFormFields, {
-						collection,
-						config: formConfigBridge,
-						registry,
-						allCollectionsConfig
-					})]
-				})]
+						})
+					})
+				]
 			}),
 			/* @__PURE__ */ jsx(Dialog, {
 				open: localeChangeDialog.open,
@@ -856,7 +1413,7 @@ function FormView({ collection, id, config, viewConfig, navigate, basePath = "/a
 						className: "flex items-center gap-2",
 						children: [/* @__PURE__ */ jsx(Icon, {
 							icon: "ph:warning-fill",
-							className: "size-5 text-warning"
+							className: "text-warning size-5"
 						}), t("confirm.localeChange")]
 					}), /* @__PURE__ */ jsx(DialogDescription, { children: t("confirm.localeChangeDescription") })] }), /* @__PURE__ */ jsxs(DialogFooter, { children: [/* @__PURE__ */ jsx(Button, {
 						variant: "outline",
@@ -871,33 +1428,139 @@ function FormView({ collection, id, config, viewConfig, navigate, basePath = "/a
 			}),
 			confirmAction?.confirmation && /* @__PURE__ */ jsx(ConfirmationDialog, {
 				open: !!confirmAction,
-				onOpenChange: (open) => !open && setConfirmAction(null),
+				onOpenChange: (open_0) => !open_0 && setConfirmAction(null),
 				config: confirmAction.confirmation,
 				onConfirm: handleConfirm,
 				loading: actionLoading
 			}),
 			dialogAction && /* @__PURE__ */ jsx(ActionDialog, {
 				open: !!dialogAction,
-				onOpenChange: (open) => !open && setDialogAction(null),
+				onOpenChange: (open_1) => !open_1 && setDialogAction(null),
 				action: dialogAction,
 				collection,
 				item: transformedItem,
 				helpers: actionHelpers
+			}),
+			/* @__PURE__ */ jsx(HistorySidebar, {
+				open: isHistoryOpen,
+				onOpenChange: setIsHistoryOpen,
+				auditEntries: auditData ?? [],
+				isLoadingAudit: auditLoading,
+				versions: versionsData ?? [],
+				isLoadingVersions: versionsLoading,
+				isReverting: revertVersionMutation.isPending,
+				onRevert: async (version_0) => {
+					handleRevertVersion(version_0);
+				},
+				showVersionsTab: !!schema?.options?.versioning
+			}),
+			/* @__PURE__ */ jsx(ConfirmationDialog, {
+				open: !!pendingRevertVersion,
+				onOpenChange: (open_2) => {
+					if (!open_2) setPendingRevertVersion(null);
+				},
+				config: {
+					title: t("version.revertConfirmTitle"),
+					description: t("version.revertConfirmDescription", { number: pendingRevertVersion?.versionNumber ?? pendingRevertVersion?.versionId ?? "-" }),
+					confirmLabel: t("version.revert"),
+					cancelLabel: t("common.cancel"),
+					destructive: false
+				},
+				onConfirm: confirmRevertVersion,
+				loading: revertVersionMutation.isPending
+			}),
+			/* @__PURE__ */ jsx(Dialog, {
+				open: !!transitionTarget,
+				onOpenChange: (open_3) => {
+					if (!open_3) {
+						setTransitionTarget(null);
+						setTransitionSchedule(false);
+						setTransitionScheduledAt(null);
+					}
+				},
+				children: /* @__PURE__ */ jsxs(DialogContent, { children: [
+					/* @__PURE__ */ jsxs(DialogHeader, { children: [/* @__PURE__ */ jsxs(DialogTitle, {
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ jsx(Icon, {
+							icon: "ph:arrows-left-right",
+							className: "size-5"
+						}), t("workflow.transitionTo", { stage: transitionTarget?.label ?? transitionTarget?.name ?? "" })]
+					}), /* @__PURE__ */ jsx(DialogDescription, { children: t("workflow.transitionDescription", {
+						from: currentStageLabel,
+						to: transitionTarget?.label ?? transitionTarget?.name ?? ""
+					}) })] }),
+					/* @__PURE__ */ jsxs("div", {
+						className: "space-y-3 py-2",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ jsx(Checkbox, {
+								checked: transitionSchedule,
+								onCheckedChange: (val) => {
+									setTransitionSchedule(!!val);
+									if (!val) setTransitionScheduledAt(null);
+								},
+								id: "transition-schedule"
+							}), /* @__PURE__ */ jsx(Label, {
+								htmlFor: "transition-schedule",
+								className: "cursor-pointer text-sm",
+								children: t("workflow.scheduleLabel")
+							})]
+						}), transitionSchedule && /* @__PURE__ */ jsxs("div", {
+							className: "space-y-1.5 pl-6",
+							children: [
+								/* @__PURE__ */ jsx(Label, {
+									className: "text-muted-foreground text-xs",
+									children: t("workflow.scheduledAt")
+								}),
+								/* @__PURE__ */ jsx(DateTimeInput, {
+									value: transitionScheduledAt,
+									onChange: setTransitionScheduledAt,
+									minDate: /* @__PURE__ */ new Date()
+								}),
+								/* @__PURE__ */ jsx("p", {
+									className: "text-muted-foreground text-xs",
+									children: t("workflow.scheduledDescription")
+								})
+							]
+						})]
+					}),
+					/* @__PURE__ */ jsxs(DialogFooter, { children: [/* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "outline",
+						onClick: () => {
+							setTransitionTarget(null);
+							setTransitionSchedule(false);
+							setTransitionScheduledAt(null);
+						},
+						children: t("common.cancel")
+					}), /* @__PURE__ */ jsxs(Button, {
+						type: "button",
+						onClick: confirmTransition,
+						disabled: transitionMutation.isPending || transitionSchedule && !transitionScheduledAt,
+						className: "gap-2",
+						children: [transitionMutation.isPending && /* @__PURE__ */ jsx(Icon, {
+							icon: "ph:spinner-gap",
+							className: "size-4 animate-spin"
+						}), transitionSchedule ? t("workflow.scheduleLabel") : t("workflow.transition")]
+					})] })
+				] })
 			})
 		] })
-	}), hasPreview && previewUrl && /* @__PURE__ */ jsx(LivePreviewMode, {
+	});
+	if (!canUseLivePreview) return formShell;
+	return /* @__PURE__ */ jsx(LivePreviewMode, {
 		open: isLivePreviewOpen,
 		onClose: () => setIsLivePreviewOpen(false),
-		collection,
-		itemId: id,
-		config,
-		allCollectionsConfig,
-		registry,
 		previewUrl,
-		onSuccess
-	})] });
+		previewRef,
+		defaultSize: schemaPreview?.defaultSize,
+		minSize: schemaPreview?.minSize,
+		children: formShell
+	});
+}
+function _temp(x) {
+	return x + 1;
 }
 
 //#endregion
-export { FormView as default };
-//# sourceMappingURL=form-view.mjs.map
+export { FormView as default };