@questpie/admin 3.5.2 → 3.5.4

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

@@ -17,7 +17,9 @@ 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 { adminCollectionKey } from "../../hooks/query-access.mjs";
 import { useCollectionFields } from "../../hooks/use-collection-fields.mjs";
+import { ReactiveFieldStatesProvider, useReactiveFields } from "../../hooks/use-reactive-fields.mjs";
 import { AutoFormFields } from "./auto-form-fields.mjs";
 import { ActionDialog } from "../../components/actions/action-dialog.mjs";
 import { EmptyState } from "../../components/ui/empty-state.mjs";
@@ -27,9 +29,9 @@ import { useCollectionValidation } from "../../hooks/use-collection-validation.m
 import { useSearchParamToggle } from "../../hooks/use-search-param-toggle.mjs";
 import { usePreferServerValidation } from "../../hooks/use-server-validation.mjs";
 import { useSidebarSearchParam } from "../../hooks/use-sidebar-search-param.mjs";
+import { useAutosave } from "../../hooks/use-autosave.mjs";
 import { useCollectionCreate, useCollectionDelete, useCollectionItem, useCollectionRestore, useCollectionRevertVersion, useCollectionUpdate, useCollectionVersions } from "../../hooks/use-collection.mjs";
 import { getLockUser, useLock } from "../../hooks/use-locks.mjs";
-import { useReactiveFields } from "../../hooks/use-reactive-fields.mjs";
 import { useServerActions } from "../../hooks/use-server-actions.mjs";
 import { useTransitionStage } from "../../hooks/use-transition-stage.mjs";
 import { applyPatchBatchImmutable, cloneSnapshot } from "../../preview/patch.mjs";
@@ -136,22 +138,25 @@ function normalizeInlineEditValue(message) {
 * Component that manages reactive field states.
 * Must be rendered inside FormProvider to access form context.
 */
-function ReactiveFieldsManager({ collection, mode = "collection", reactiveConfigs, enabled }) {
-	useReactiveFields({
+function ReactiveFieldsManager({ collection, mode = "collection", reactiveConfigs, enabled, children }) {
+	const { fieldStates } = useReactiveFields({
 		collection,
 		mode,
 		reactiveConfigs,
 		enabled: enabled && Object.keys(reactiveConfigs).length > 0,
 		debounce: 300
 	});
-	return null;
+	return /* @__PURE__ */ jsx(ReactiveFieldStatesProvider, {
+		fieldStates,
+		children
+	});
 }
 const FormFieldsContent = React.memo(function FormFieldsContent$1({ collection, config, registry, allCollectionsConfig, resolvedFields, schema }) {
 	return /* @__PURE__ */ jsx(RenderProfiler, {
 		id: `form.fields.${collection}`,
 		minDurationMs: 10,
 		children: /* @__PURE__ */ jsx(AutoFormFields, {
-			collection,
+			collection: adminCollectionKey(collection),
 			config,
 			registry,
 			allCollectionsConfig,
@@ -244,71 +249,6 @@ const PreviewPatchBridge = React.memo(function PreviewPatchBridge$1({ form, prev
 	]);
 	return null;
 });
-const AutosaveManager = React.memo(function AutosaveManager$1({ form, formElementRef, isEditMode, id, enabled, debounce, isDirtyRef, isSubmittingRef, updateMutation, onPreviewRefresh, onPreviewCommit, onSavingChange, onSaved }) {
-	const { t } = useTranslation();
-	const timerRef = React.useRef(null);
-	const runAutosave = React.useCallback(async () => {
-		if (!id || !isDirtyRef.current || isSubmittingRef.current) return;
-		try {
-			onSavingChange(true);
-			await form.handleSubmit(async (data) => {
-				const result = await updateMutation.mutateAsync({
-					id,
-					data
-				});
-				form.reset(result, { keepTouched: true });
-				onPreviewCommit?.(result);
-				onPreviewRefresh?.();
-				onSaved(/* @__PURE__ */ new Date());
-				onSavingChange(false);
-			}, () => {
-				onSavingChange(false);
-			})();
-		} catch (error) {
-			onSavingChange(false);
-			console.error("Autosave failed:", error);
-			toast.error(t("error.autosaveFailed"), { description: error instanceof Error ? error.message : void 0 });
-		}
-	}, [
-		form,
-		id,
-		isDirtyRef,
-		isSubmittingRef,
-		onSaved,
-		onSavingChange,
-		onPreviewCommit,
-		onPreviewRefresh,
-		t,
-		updateMutation
-	]);
-	React.useEffect(() => {
-		if (timerRef.current) clearTimeout(timerRef.current);
-		if (!enabled || !isEditMode || !id) return;
-		const target = formElementRef.current;
-		if (!target) return;
-		const scheduleAutosave = () => {
-			if (timerRef.current) clearTimeout(timerRef.current);
-			timerRef.current = setTimeout(() => {
-				runAutosave();
-			}, debounce);
-		};
-		target.addEventListener("input", scheduleAutosave, { capture: true });
-		target.addEventListener("change", scheduleAutosave, { capture: true });
-		return () => {
-			target.removeEventListener("input", scheduleAutosave, { capture: true });
-			target.removeEventListener("change", scheduleAutosave, { capture: true });
-			if (timerRef.current) clearTimeout(timerRef.current);
-		};
-	}, [
-		debounce,
-		enabled,
-		formElementRef,
-		id,
-		isEditMode,
-		runAutosave
-	]);
-	return null;
-});
 const AutosaveIndicator = React.memo(function AutosaveIndicator$1({ control, enabled, indicator, isEditMode, isSaving, lastSaved, formatTimeAgo, t }) {
 	const { isDirty } = useFormState({ control });
 	const [, forceUpdate] = React.useReducer((x) => x + 1, 0);
@@ -394,6 +334,7 @@ function FormView({ collection, id, config, viewConfig, navigate, basePath = "/a
 	const { t } = useTranslation();
 	const resolveText = useResolveText();
 	const isEditMode = !!id;
+	const collectionKey = adminCollectionKey(collection);
 	const { fields: resolvedFields, schema, isLoading: isFieldsLoading } = useCollectionFields(collection, { fallbackFields: config?.fields });
 	const { data: adminConfig } = useAdminConfig();
 	const resolvedFormConfig = React.useMemo(() => viewConfig ?? (config?.form)?.["~config"] ?? config?.form ?? schema?.admin?.form, [
@@ -442,7 +383,7 @@ function FormView({ collection, id, config, viewConfig, navigate, basePath = "/a
 		fields: resolvedFields,
 		schema
 	}), [resolvedFields, schema]);
-	const { data: item, isLoading, error: itemError } = useCollectionItem(collection, id ?? "", hasManyToManyRelations(withRelations) ? {
+	const { data: item, isLoading, error: itemError } = useCollectionItem(collectionKey, id ?? "", hasManyToManyRelations(withRelations) ? {
 		with: withRelations,
 		localeFallback: false
 	} : { localeFallback: false }, { enabled: isEditMode });
@@ -462,13 +403,13 @@ function FormView({ collection, id, config, viewConfig, navigate, basePath = "/a
 		}
 		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 createMutation = useCollectionCreate(collectionKey);
+	const updateMutation = useCollectionUpdate(collectionKey);
+	const deleteMutation = useCollectionDelete(collectionKey);
+	const restoreMutation = useCollectionRestore(collectionKey);
+	const revertVersionMutation = useCollectionRevertVersion(collectionKey);
 	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: versionsData, isLoading: versionsLoading } = useCollectionVersions(collectionKey, id ?? "", { limit: 50 }, { enabled: isEditMode && !!id && isHistoryOpen && !!schema?.options?.versioning });
 	const workflowConfig = schema?.options?.workflow;
 	const workflowEnabled = !!workflowConfig?.enabled;
 	/**
@@ -476,7 +417,7 @@ function FormView({ collection, id, config, viewConfig, navigate, basePath = "/a
 	* `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 { data: latestVersionData } = useCollectionVersions(collectionKey, 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 ?? "";
@@ -598,6 +539,19 @@ function FormView({ collection, id, config, viewConfig, navigate, basePath = "/a
 			preventNavigation: cfg.preventNavigation !== false
 		};
 	}, [config]);
+	useAutosave({
+		form,
+		id,
+		enabled: autoSaveConfig.enabled,
+		debounce: autoSaveConfig.debounce,
+		isDirtyRef: formIsDirtyRef,
+		isSubmittingRef: formIsSubmittingRef,
+		updateMutation,
+		onPreviewCommit: commitPreviewSnapshot,
+		onPreviewRefresh: triggerPreviewRefresh,
+		onSavingChange: setIsSaving,
+		onSaved: setLastSaved
+	});
 	const { locale: contentLocale, setLocale: setContentLocale } = useScopedLocale();
 	const localeOptions = useSafeContentLocales()?.locales ?? [];
 	const prevLocaleRef = React.useRef(contentLocale);
@@ -1213,21 +1167,6 @@ function FormView({ collection, id, config, viewConfig, navigate, basePath = "/a
 						onDirtyChange: handleFormDirtyChange,
 						onSubmittingChange: handleFormSubmittingChange
 					}),
-					/* @__PURE__ */ jsx(AutosaveManager, {
-						form,
-						formElementRef,
-						isEditMode,
-						id,
-						enabled: autoSaveConfig.enabled,
-						debounce: autoSaveConfig.debounce,
-						isDirtyRef: formIsDirtyRef,
-						isSubmittingRef: formIsSubmittingRef,
-						updateMutation,
-						onPreviewCommit: commitPreviewSnapshot,
-						onPreviewRefresh: triggerPreviewRefresh,
-						onSavingChange: setIsSaving,
-						onSaved: setLastSaved
-					}),
 					/* @__PURE__ */ jsx(PreviewPatchBridge, {
 						form,
 						previewRef,
@@ -1238,196 +1177,196 @@ function FormView({ collection, id, config, viewConfig, navigate, basePath = "/a
 					/* @__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) => {
-								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: "qa-form-view__form space-y-4",
-							children: [
-								/* @__PURE__ */ jsx(AdminViewHeader, {
-									className: "qa-form-view__header",
-									title,
-									titleAccessory: /* @__PURE__ */ jsxs(Fragment, { children: [
-										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]
-										})
-									] }),
-									meta: showMeta && item ? /* @__PURE__ */ jsxs(Fragment, { 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)] })] })
-									] }) : void 0,
-									actions: /* @__PURE__ */ jsxs(Fragment, { children: [
-										headerActions,
-										canUseLivePreview && /* @__PURE__ */ jsxs(Button, {
-											type: "button",
-											variant: "outline",
-											size: "icon-sm",
-											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-sm",
-											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: workflowTransitionTriggerRender,
-											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
-												}),
+						enabled: !isBlocked && !isMutationPending,
+						children: /* @__PURE__ */ jsx(RenderProfiler, {
+							id: `form.shell.${collection}`,
+							minDurationMs: 12,
+							children: /* @__PURE__ */ jsxs("form", {
+								ref: formElementRef,
+								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: "qa-form-view__form space-y-4",
+								children: [
+									/* @__PURE__ */ jsx(AdminViewHeader, {
+										className: "qa-form-view__header",
+										title,
+										titleAccessory: /* @__PURE__ */ jsxs(Fragment, { children: [
+											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:arrow-right",
-													className: "mr-2 size-4"
-												}), stage.label || stage.name]
-											}, stage.name))
-										})] }),
-										visiblePrimaryActions.map((action) => /* @__PURE__ */ jsx(ActionButton, {
-											action,
-											collection,
-											helpers: actionHelpers,
-											size: "sm",
-											onOpenDialog: (a) => setDialogAction(a)
-										}, action.id)),
-										/* @__PURE__ */ jsx(SaveSubmitButton, {
-											control: form.control,
-											isMutationPending,
-											t
-										}),
-										visibleSecondaryActions.length > 0 && /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsxs(DropdownMenuTrigger, {
-											render: secondaryActionsTriggerRender,
-											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);
-												})
-											]
-										})] })
-									] })
-								}),
-								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,
-									resolvedFields,
-									schema
-								})
-							]
+													icon: "ph:git-branch",
+													className: "size-3"
+												}), currentStageLabel]
+											})
+										] }),
+										meta: showMeta && item ? /* @__PURE__ */ jsxs(Fragment, { 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)] })] })
+										] }) : void 0,
+										actions: /* @__PURE__ */ jsxs(Fragment, { children: [
+											headerActions,
+											canUseLivePreview && /* @__PURE__ */ jsxs(Button, {
+												type: "button",
+												variant: "outline",
+												size: "icon-sm",
+												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-sm",
+												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: workflowTransitionTriggerRender,
+												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) => /* @__PURE__ */ jsx(ActionButton, {
+												action,
+												collection,
+												helpers: actionHelpers,
+												size: "sm",
+												onOpenDialog: (a) => setDialogAction(a)
+											}, action.id)),
+											/* @__PURE__ */ jsx(SaveSubmitButton, {
+												control: form.control,
+												isMutationPending,
+												t
+											}),
+											visibleSecondaryActions.length > 0 && /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsxs(DropdownMenuTrigger, {
+												render: secondaryActionsTriggerRender,
+												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);
+													})
+												]
+											})] })
+										] })
+									}),
+									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,
+										resolvedFields,
+										schema
+									})
+								]
+							})
 						})
 					})
 				]