@questpie/admin 1.1.0 → 2.0.0

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

@@ -0,0 +1,903 @@
+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 { 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 { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "../../components/ui/dialog.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 { useCollectionValidation } from "../../hooks/use-collection-validation.mjs";
+import { getLockUser, useLock } from "../../hooks/use-locks.mjs";
+import { usePreferServerValidation } from "../../hooks/use-server-validation.mjs";
+import { useReactiveFields } from "../../hooks/use-reactive-fields.mjs";
+import { FormViewSkeleton } from "./view-skeletons.mjs";
+import { Icon } from "@iconify/react";
+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
+/**
+* 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 CMS 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({ collection, mode = "collection", reactiveConfigs, enabled }) {
+	useReactiveFields({
+		collection,
+		mode,
+		reactiveConfigs,
+		enabled: enabled && Object.keys(reactiveConfigs).length > 0,
+		debounce: 300
+	});
+	return null;
+}
+/**
+* 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 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, [
+		viewConfig,
+		config?.form,
+		schema?.admin?.form
+	]);
+	const formConfigBridge = React$1.useMemo(() => {
+		if (!resolvedFormConfig) return config;
+		return {
+			...config ?? {},
+			form: resolvedFormConfig
+		};
+	}, [config, resolvedFormConfig]);
+	const reactiveConfigs = React$1.useMemo(() => extractReactiveConfigs(schema), [schema]);
+	const previewContext = useLivePreviewContext();
+	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());
+	}, [isLivePreviewOpen]);
+	const withRelations = React$1.useMemo(() => detectManyToManyRelations({
+		fields: resolvedFields,
+		schema
+	}), [resolvedFields, schema]);
+	const { data: item, isLoading } = 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$1.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 clientResolver = useCollectionValidation(collection);
+	const resolver = usePreferServerValidation(collection, { mode: isEditMode ? "update" : "create" }, clientResolver);
+	const form = useForm({
+		defaultValues: transformedItem ?? defaultValuesProp ?? {},
+		resolver
+	});
+	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(() => {
+		const cfg = config?.autoSave;
+		if (!cfg) return {
+			enabled: false,
+			debounce: 500
+		};
+		return {
+			enabled: cfg.enabled !== false,
+			debounce: cfg.debounce ?? 500,
+			indicator: cfg.indicator !== false,
+			preventNavigation: cfg.preventNavigation !== false
+		};
+	}, [config]);
+	const { locale: contentLocale, setLocale: setContentLocale, isScoped } = useScopedLocale();
+	const localeOptions = useSafeContentLocales()?.locales ?? [];
+	const prevLocaleRef = React$1.useRef(contentLocale);
+	const [localeChangeDialog, setLocaleChangeDialog] = React$1.useState({
+		open: false,
+		pendingLocale: null
+	});
+	const localeChangeSnapshotRef = React$1.useRef(null);
+	const skipItemResetRef = React$1.useRef(false);
+	React$1.useEffect(() => {
+		if (!isEditMode) {
+			prevLocaleRef.current = contentLocale;
+			return;
+		}
+		if (prevLocaleRef.current !== contentLocale) if (form.formState.isDirty && !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.formState.isDirty,
+		form.getValues,
+		setContentLocale,
+		localeChangeDialog.open,
+		isEditMode
+	]);
+	React$1.useEffect(() => {
+		if (skipItemResetRef.current) return;
+		if (transformedItem) form.reset(transformedItem);
+		else if (defaultValuesProp) form.reset(defaultValuesProp);
+	}, [
+		form,
+		transformedItem,
+		defaultValuesProp
+	]);
+	const handleLocaleChangeConfirm = React$1.useCallback(() => {
+		skipItemResetRef.current = false;
+		localeChangeSnapshotRef.current = null;
+		if (localeChangeDialog.pendingLocale) {
+			prevLocaleRef.current = localeChangeDialog.pendingLocale;
+			setContentLocale(localeChangeDialog.pendingLocale);
+		}
+		setLocaleChangeDialog({
+			open: false,
+			pendingLocale: null
+		});
+	}, [localeChangeDialog.pendingLocale, setContentLocale]);
+	const handleLocaleChangeCancel = React$1.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$1.useEffectEvent(async (data) => {
+		const savePromise = async () => {
+			if (isEditMode) 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) => {
+				if (onSuccess) onSuccess(result);
+				else if (isEditMode) {
+					form.reset(result);
+					if (previewContext) previewContext.triggerPreviewRefresh();
+				} else if (result?.id) navigate(`${basePath}/collections/${collection}/${result.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$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(() => {
+		if (!autoSaveConfig.preventNavigation || !autoSaveConfig.enabled) return;
+		const handleBeforeUnload = (e) => {
+			if (form.formState.isDirty) {
+				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) => {
+					console.warn("[FormView] Validation errors:", errors);
+					toast.error(t("toast.validationFailed"));
+				})();
+			}
+		};
+		document.addEventListener("keydown", handleKeyDown);
+		return () => document.removeEventListener("keydown", handleKeyDown);
+	}, [form, onSubmit]);
+	const isSubmitting = createMutation.isPending || updateMutation.isPending || form.formState.isSubmitting;
+	const configFormActions = resolvedFormConfig?.actions;
+	const formActions = React$1.useMemo(() => {
+		if (configFormActions) return configFormActions;
+		if (!isEditMode) 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);
+	const storeNavigate = useAdminStore(selectNavigate);
+	const storeBasePath = useAdminStore(selectBasePath);
+	const client = useAdminStore(selectClient);
+	const queryClient = useQueryClient();
+	const queryOpts = React$1.useMemo(() => createQuestpieQueryOptions(client, {
+		keyPrefix: QUERY_KEY_PREFIX,
+		locale: contentLocale
+	}), [client, contentLocale]);
+	const actionQueryClient = React$1.useMemo(() => ({
+		invalidateQueries: (filters) => queryClient.invalidateQueries(filters),
+		refetchQueries: (filters) => queryClient.refetchQueries(filters),
+		resetQueries: (filters) => queryClient.resetQueries(filters)
+	}), [queryClient]);
+	const actionHelpers = React$1.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) => {
+			const col = targetCollection || collection;
+			await queryClient.invalidateQueries({ queryKey: queryOpts.key([
+				"collections",
+				col,
+				"findOne",
+				contentLocale,
+				{ id: itemId }
+			]) });
+			await queryClient.invalidateQueries({ queryKey: queryOpts.key([
+				"collections",
+				col,
+				"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,
+		storeBasePath,
+		basePath,
+		queryClient,
+		queryOpts,
+		collection,
+		contentLocale,
+		t
+	]);
+	const actionContext = React$1.useMemo(() => ({
+		item: transformedItem,
+		collection,
+		helpers: actionHelpers,
+		queryClient: actionQueryClient
+	}), [
+		transformedItem,
+		collection,
+		actionHelpers,
+		actionQueryClient
+	]);
+	const filterVisibleActions = React$1.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;
+		});
+	}, [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);
+		switch (handler.type) {
+			case "navigate":
+				storeNavigate(typeof handler.path === "function" ? handler.path(transformedItem) : handler.path);
+				break;
+			case "api":
+				if (handler.method === "DELETE") {
+					const itemId = transformedItem?.id || id;
+					if (!itemId) {
+						toast.error(t("toast.deleteFailed"));
+						break;
+					}
+					setActionLoading(true);
+					toast.promise(deleteMutation.mutateAsync(itemId).finally(() => {
+						setActionLoading(false);
+					}), {
+						loading: t("toast.deleting"),
+						success: () => {
+							navigate(`${basePath}/collections/${collection}`);
+							return t("toast.deleteSuccess");
+						},
+						error: (err) => err.message || t("toast.deleteFailed")
+					});
+				} else {
+					const endpoint = handler.endpoint.replace("{id}", String(transformedItem?.id || id));
+					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);
+						}
+					};
+					toast.promise(apiPromise(), {
+						loading: `${actionLabel}...`,
+						success: t("toast.actionSuccess"),
+						error: (err) => err.message || 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) => err.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 () => {
+		if (confirmAction) await executeAction(confirmAction);
+	}, [confirmAction, executeAction]);
+	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) => {
+		const seconds = Math.floor((Date.now() - date.getTime()) / 1e3);
+		if (seconds < 10) return t("autosave.justNow");
+		if (seconds < 60) return t("autosave.secondsAgo", { count: seconds });
+		const minutes = Math.floor(seconds / 60);
+		if (minutes < 60) return t("autosave.minutesAgo", { count: minutes });
+		return t("autosave.hoursAgo", { count: Math.floor(minutes / 60) });
+	};
+	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(() => {
+		if (!isEditMode || isBlocked) return;
+		if (lockRefreshTimerRef.current) clearTimeout(lockRefreshTimerRef.current);
+		lockRefreshTimerRef.current = setTimeout(() => {
+			refreshLock();
+		}, 1e3);
+		return () => {
+			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
+	]);
+	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",
+		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",
+				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",
+						children: /* @__PURE__ */ jsx(Icon, {
+							icon: "ph:user",
+							className: "size-4 text-warning"
+						})
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex-1 min-w-0",
+						children: [/* @__PURE__ */ jsx("p", {
+							className: "text-sm font-medium text-warning",
+							children: t("lock.blockedTitle", { name: blockedByUser.name ?? blockedByUser.email })
+						}), /* @__PURE__ */ jsx("p", {
+							className: "text-xs text-warning/80",
+							children: t("lock.blockedDescription")
+						})]
+					}),
+					/* @__PURE__ */ jsx(Icon, {
+						icon: "ph:lock-simple",
+						className: "size-5 text-warning"
+					})
+				]
+			}),
+			isOpenElsewhere && /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-3 p-3 mb-4 rounded-lg bg-info/10 border border-info/30",
+				children: [/* @__PURE__ */ jsx(Icon, {
+					icon: "ph:browser",
+					className: "size-5 text-info"
+				}), /* @__PURE__ */ jsx("p", {
+					className: "text-sm text-info",
+					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(Icon, {
+													icon: "ph:check",
+													className: "size-3"
+												}),
+												t("autosave.saved"),
+												" ",
+												formatTimeAgo(lastSaved)
+											]
+										})
+									] })
+								]
+							}), 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")
+									})]
+								}),
+								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"
+									}),
+									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);
+										})
+									]
+								})] })
+							]
+						})]
+					}), /* @__PURE__ */ jsx(AutoFormFields, {
+						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: "size-5 text-warning"
+						}), 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) => !open && setConfirmAction(null),
+				config: confirmAction.confirmation,
+				onConfirm: handleConfirm,
+				loading: actionLoading
+			}),
+			dialogAction && /* @__PURE__ */ jsx(ActionDialog, {
+				open: !!dialogAction,
+				onOpenChange: (open) => !open && setDialogAction(null),
+				action: dialogAction,
+				collection,
+				item: transformedItem,
+				helpers: actionHelpers
+			})
+		] })
+	}), hasPreview && previewUrl && /* @__PURE__ */ jsx(LivePreviewMode, {
+		open: isLivePreviewOpen,
+		onClose: () => setIsLivePreviewOpen(false),
+		collection,
+		itemId: id,
+		config,
+		allCollectionsConfig,
+		registry,
+		previewUrl,
+		onSuccess
+	})] });
+}
+
+//#endregion
+export { FormView as default };
+//# sourceMappingURL=form-view.mjs.map