@questpie/admin 1.1.1 → 3.0.0

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

@@ -0,0 +1,1566 @@
+import { useResolveText, useTranslation } from "../../i18n/hooks.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 { AutoFormFields } from "./auto-form-fields.mjs";
+import { ActionDialog } from "../../components/actions/action-dialog.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 { 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 { QuestpieClientError } from "questpie/client";
+
+//#region src/client/views/collection/form-view.tsx
+/**
+* Form View - Default edit view component
+*
+* 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 app queries (used for cache invalidation) */
+const QUERY_KEY_PREFIX = ["questpie", "collections"];
+/**
+* Extract reactive configs from collection schema fields.
+* Used to determine which fields have server-side reactive behaviors.
+*/
+function extractReactiveConfigs(schema) {
+	if (!schema?.fields) return {};
+	const configs = {};
+	for (const [fieldName, fieldDef] of Object.entries(schema.fields)) if (fieldDef.reactive) configs[fieldName] = fieldDef.reactive;
+	return configs;
+}
+/**
+* Component that manages reactive field states.
+* Must be rendered inside FormProvider to access form context.
+*/
+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
+*
+* Features:
+* - Auto-generates form fields from collection config
+* - Supports tabs, sections, and sidebar layout
+* - Auto-detects M:N relations
+* - Keyboard shortcut (Cmd+S) to save
+* - Field-level validation errors from API
+*
+* @example
+* ```tsx
+* // Used automatically via registry when navigating to /admin/collections/:name/:id
+* // Can also be used directly:
+* <FormView
+*   collection="posts"
+*   id="123"
+*   config={postsConfig}
+*   navigate={navigate}
+*   basePath="/admin"
+* />
+* ```
+*/
+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 isEditMode = !!id;
+	const { fields: resolvedFields, schema } = useCollectionFields(collection, { fallbackFields: config?.fields });
+	const resolvedFormConfig = React.useMemo(() => viewConfig ?? (config?.form)?.["~config"] ?? config?.form ?? schema?.admin?.form, [
+		viewConfig,
+		config?.form,
+		schema?.admin?.form
+	]);
+	const formConfigBridge = React.useMemo(() => {
+		if (!resolvedFormConfig) return config;
+		return {
+			...config ?? {},
+			form: resolvedFormConfig
+		};
+	}, [config, resolvedFormConfig]);
+	const reactiveConfigs = React.useMemo(() => extractReactiveConfigs(schema), [schema]);
+	const schemaPreview = schema?.admin?.preview;
+	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]);
+	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, error: itemError } = useCollectionItem(collection, id ?? "", hasManyToManyRelations(withRelations) ? {
+		with: withRelations,
+		localeFallback: false
+	} : { localeFallback: false }, { enabled: isEditMode });
+	const { isBlocked, blockedBy, isOpenElsewhere, refresh: refreshLock } = useLock({
+		resourceType: "collection",
+		resource: collection,
+		resourceId: id ?? "",
+		autoAcquire: isEditMode
+	});
+	const blockedByUser = blockedBy ? getLockUser(blockedBy) : null;
+	const transformedItem = React.useMemo(() => {
+		if (!item || !hasManyToManyRelations(withRelations)) return item;
+		const result = { ...item };
+		for (const key of Object.keys(withRelations)) {
+			const value = result[key];
+			if (Array.isArray(value) && value.length > 0 && typeof value[0] === "object" && value[0]?.id) result[key] = value.map((v) => v.id);
+		}
+		return result;
+	}, [item, withRelations]);
+	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,
+		mode: "onBlur"
+	});
+	/**
+	* 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,
+			indicator: false,
+			preventNavigation: false
+		};
+		return {
+			enabled: cfg.enabled !== false,
+			debounce: cfg.debounce ?? 500,
+			indicator: cfg.indicator !== false,
+			preventNavigation: cfg.preventNavigation !== false
+		};
+	}, [config]);
+	const { locale: contentLocale, setLocale: setContentLocale } = useScopedLocale();
+	const localeOptions = useSafeContentLocales()?.locales ?? [];
+	const prevLocaleRef = React.useRef(contentLocale);
+	const [localeChangeDialog, setLocaleChangeDialog] = React.useState({
+		open: false,
+		pendingLocale: null
+	});
+	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 (formIsDirtyRef.current && !localeChangeDialog.open) {
+			skipItemResetRef.current = true;
+			localeChangeSnapshotRef.current = form.getValues();
+			setLocaleChangeDialog({
+				open: true,
+				pendingLocale: contentLocale
+			});
+			setContentLocale(prevLocaleRef.current);
+		} else {
+			prevLocaleRef.current = contentLocale;
+			skipItemResetRef.current = false;
+		}
+	}, [
+		contentLocale,
+		form.getValues,
+		setContentLocale,
+		localeChangeDialog.open,
+		isEditMode
+	]);
+	React.useEffect(() => {
+		if (skipItemResetRef.current || isLoading) return;
+		if (transformedItem) form.reset(transformedItem);
+		else if (!isEditMode && defaultValuesProp) form.reset(defaultValuesProp);
+	}, [
+		form,
+		transformedItem,
+		defaultValuesProp,
+		isLoading,
+		isEditMode
+	]);
+	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,
+		localeQueryClient,
+		collection
+	]);
+	const handleLocaleChangeCancel = React.useCallback(() => {
+		skipItemResetRef.current = false;
+		if (localeChangeSnapshotRef.current) form.reset(localeChangeSnapshotRef.current, {
+			keepDirty: true,
+			keepDirtyValues: true,
+			keepErrors: true,
+			keepTouched: true
+		});
+		localeChangeSnapshotRef.current = null;
+		setLocaleChangeDialog({
+			open: false,
+			pendingLocale: null
+		});
+	}, [form]);
+	const onSubmit = React.useEffectEvent(async (data) => {
+		const savePromise = async () => {
+			if (isEditMode && id) return await updateMutation.mutateAsync({
+				id,
+				data
+			});
+			else return await createMutation.mutateAsync(data);
+		};
+		toast.promise(savePromise(), {
+			loading: isEditMode ? t("toast.saving") : t("toast.creating"),
+			success: (result_1) => {
+				if (onSuccess) onSuccess(result_1);
+				else if (isEditMode) {
+					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");
+			},
+			error: (error) => {
+				if (error instanceof QuestpieClientError && error.fieldErrors && error.fieldErrors.length > 0) {
+					for (const fieldError of error.fieldErrors) form.setError(fieldError.path, {
+						type: "server",
+						message: fieldError.message
+					});
+					return t("toast.validationFailed");
+				}
+				const message = error instanceof Error ? error.message : t("error.unknown");
+				onError?.(error instanceof Error ? error : new Error(message));
+				return `${t("toast.saveFailed")}: ${message}`;
+			}
+		});
+	});
+	React.useEffect(() => {
+		if (!autoSaveConfig.preventNavigation || !autoSaveConfig.enabled) return;
+		const handleBeforeUnload = (e) => {
+			if (formIsDirtyRef.current) {
+				e.preventDefault();
+				e.returnValue = "";
+			}
+		};
+		window.addEventListener("beforeunload", handleBeforeUnload);
+		return () => window.removeEventListener("beforeunload", handleBeforeUnload);
+	}, [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"));
+				})();
+			}
+		};
+		document.addEventListener("keydown", handleKeyDown);
+		return () => document.removeEventListener("keydown", handleKeyDown);
+	}, [form, t]);
+	const isMutationPending = createMutation.isPending || updateMutation.isPending;
+	const configFormActions = resolvedFormConfig?.actions;
+	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
+		};
+	}, [
+		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.useMemo(() => createQuestpieQueryOptions(client, {
+		keyPrefix: QUERY_KEY_PREFIX,
+		locale: contentLocale
+	}), [client, contentLocale]);
+	const actionQueryClient = React.useMemo(() => ({
+		invalidateQueries: (filters) => queryClient.invalidateQueries(filters),
+		refetchQueries: (filters_0) => queryClient.refetchQueries(filters_0),
+		resetQueries: (filters_1) => queryClient.resetQueries(filters_1)
+	}), [queryClient]);
+	const actionHelpers = React.useMemo(() => ({
+		navigate: storeNavigate,
+		toast: {
+			success: toast.success,
+			error: toast.error,
+			info: toast.info,
+			warning: toast.warning
+		},
+		t,
+		invalidateCollection: async (targetCollection) => {
+			const col = targetCollection || collection;
+			await queryClient.invalidateQueries({ queryKey: queryOpts.key([
+				"collections",
+				col,
+				"find",
+				contentLocale
+			]) });
+			await queryClient.invalidateQueries({ queryKey: queryOpts.key([
+				"collections",
+				col,
+				"count",
+				contentLocale
+			]) });
+		},
+		invalidateItem: async (itemId, targetCollection_0) => {
+			const col_0 = targetCollection_0 || collection;
+			await queryClient.invalidateQueries({ queryKey: queryOpts.key([
+				"collections",
+				col_0,
+				"findOne",
+				contentLocale,
+				{ id: itemId }
+			]) });
+			await queryClient.invalidateQueries({ queryKey: queryOpts.key([
+				"collections",
+				col_0,
+				"find",
+				contentLocale
+			]) });
+		},
+		invalidateAll: async () => {
+			await queryClient.invalidateQueries({ queryKey: [...QUERY_KEY_PREFIX] });
+		},
+		refresh: () => {
+			queryClient.invalidateQueries({ queryKey: queryOpts.key([
+				"collections",
+				collection,
+				"find",
+				contentLocale
+			]) });
+			queryClient.invalidateQueries({ queryKey: queryOpts.key([
+				"collections",
+				collection,
+				"count",
+				contentLocale
+			]) });
+		},
+		closeDialog: () => {
+			setDialogAction(null);
+			setConfirmAction(null);
+		},
+		basePath: storeBasePath || basePath
+	}), [
+		storeNavigate,
+		t,
+		collection,
+		queryClient,
+		queryOpts,
+		contentLocale,
+		storeBasePath,
+		basePath
+	]);
+	const transformedItemRef = React.useRef(transformedItem);
+	transformedItemRef.current = transformedItem;
+	const actionContext = React.useMemo(() => ({
+		get item() {
+			return transformedItemRef.current;
+		},
+		collection,
+		helpers: actionHelpers,
+		queryClient: actionQueryClient
+	}), [
+		collection,
+		actionHelpers,
+		actionQueryClient
+	]);
+	const filterVisibleActions = React.useCallback((actions) => {
+		if (!actions) return [];
+		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.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_1 = transformedItem?.id || id;
+					if (!itemId_1) {
+						toast.error(t("toast.deleteFailed"));
+						break;
+					}
+					setActionLoading(true);
+					toast.promise(deleteMutation.mutateAsync(itemId_1).finally(() => {
+						setActionLoading(false);
+					}), {
+						loading: t("toast.deleting"),
+						success: () => {
+							navigate(`${basePath}/collections/${collection}`);
+							return t("toast.deleteSuccess");
+						},
+						error: (err_2) => err_2.message || t("toast.deleteFailed")
+					});
+				} else {
+					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 () => {
+						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();
+					};
+					const p = apiPromise();
+					p.then(() => setActionLoading(false), () => setActionLoading(false));
+					toast.promise(p, {
+						loading: `${actionLabel}...`,
+						success: t("toast.actionSuccess"),
+						error: (err_3) => {
+							if (err_3.message) return err_3.message;
+							return t("toast.actionFailed");
+						}
+					});
+				}
+				break;
+			case "custom": {
+				const customPromise = handler.fn(actionContext);
+				if (customPromise instanceof Promise) {
+					setActionLoading(true);
+					toast.promise(customPromise.finally(() => setActionLoading(false)), {
+						loading: `${actionLabel}...`,
+						success: t("toast.actionSuccess"),
+						error: (err_0) => err_0.message || t("toast.actionFailed")
+					});
+				}
+				break;
+			}
+		}
+		setConfirmAction(null);
+	};
+	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);
+	};
+	const formatDate = (date) => {
+		return new Date(date).toLocaleDateString(void 0, {
+			year: "numeric",
+			month: "short",
+			day: "numeric",
+			hour: "2-digit",
+			minute: "2-digit"
+		});
+	};
+	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 lockRefreshTimerRef = React.useRef(null);
+	React.useEffect(() => {
+		if (!isEditMode || isBlocked) return;
+		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);
+		};
+	}, [
+		isEditMode,
+		isBlocked,
+		refreshLock
+	]);
+	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 });
+	const formShell = /* @__PURE__ */ jsx("div", {
+		className: "qa-form-view w-full",
+		children: /* @__PURE__ */ jsxs(Fragment, { children: [
+			isBlocked && blockedByUser && /* @__PURE__ */ jsxs("div", {
+				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: "bg-warning/20 flex size-8 items-center justify-center rounded-full",
+						children: /* @__PURE__ */ jsx(Icon, {
+							icon: "ph:user",
+							className: "text-warning size-4"
+						})
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "min-w-0 flex-1",
+						children: [/* @__PURE__ */ jsx("p", {
+							className: "text-warning text-sm font-medium",
+							children: t("lock.blockedTitle", { name: blockedByUser.name ?? blockedByUser.email })
+						}), /* @__PURE__ */ jsx("p", {
+							className: "text-warning/80 text-xs",
+							children: t("lock.blockedDescription")
+						})]
+					}),
+					/* @__PURE__ */ jsx(Icon, {
+						icon: "ph:lock-simple",
+						className: "text-warning size-5"
+					})
+				]
+			}),
+			isOpenElsewhere && /* @__PURE__ */ jsxs("div", {
+				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: "text-info size-5"
+				}), /* @__PURE__ */ jsx("p", {
+					className: "text-info text-sm",
+					children: t("lock.openElsewhere")
+				})]
+			}),
+			/* @__PURE__ */ jsxs(FormProvider, {
+				...form,
+				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("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
+												}),
+												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: "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);
+													})
+												]
+											})] })
+										]
+									})]
+								}),
+								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: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(Dialog, {
+				open: localeChangeDialog.open,
+				onOpenChange: (open) => {
+					if (!open) handleLocaleChangeCancel();
+				},
+				children: /* @__PURE__ */ jsxs(DialogContent, {
+					showCloseButton: false,
+					children: [/* @__PURE__ */ jsxs(DialogHeader, { children: [/* @__PURE__ */ jsxs(DialogTitle, {
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ jsx(Icon, {
+							icon: "ph:warning-fill",
+							className: "text-warning size-5"
+						}), t("confirm.localeChange")]
+					}), /* @__PURE__ */ jsx(DialogDescription, { children: t("confirm.localeChangeDescription") })] }), /* @__PURE__ */ jsxs(DialogFooter, { children: [/* @__PURE__ */ jsx(Button, {
+						variant: "outline",
+						onClick: handleLocaleChangeCancel,
+						children: t("confirm.localeChangeStay")
+					}), /* @__PURE__ */ jsx(Button, {
+						variant: "destructive",
+						onClick: handleLocaleChangeConfirm,
+						children: t("confirm.localeChangeDiscard")
+					})] })]
+				})
+			}),
+			confirmAction?.confirmation && /* @__PURE__ */ jsx(ConfirmationDialog, {
+				open: !!confirmAction,
+				onOpenChange: (open_0) => !open_0 && setConfirmAction(null),
+				config: confirmAction.confirmation,
+				onConfirm: handleConfirm,
+				loading: actionLoading
+			}),
+			dialogAction && /* @__PURE__ */ jsx(ActionDialog, {
+				open: !!dialogAction,
+				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")]
+					})] })
+				] })
+			})
+		] })
+	});
+	if (!canUseLivePreview) return formShell;
+	return /* @__PURE__ */ jsx(LivePreviewMode, {
+		open: isLivePreviewOpen,
+		onClose: () => setIsLivePreviewOpen(false),
+		previewUrl,
+		previewRef,
+		defaultSize: schemaPreview?.defaultSize,
+		minSize: schemaPreview?.minSize,
+		children: formShell
+	});
+}
+function _temp(x) {
+	return x + 1;
+}
+
+//#endregion
+export { FormView as default };