includio-cms 0.25.0 → 0.26.0

package/dist/admin/client/entry/entry.svelte

@@ -1,17 +1,26 @@
 <script lang="ts">
-	import { goto } from '$app/navigation';
+	import { goto, beforeNavigate } from '$app/navigation';
 	import { isCollection } from '../../utils/is-collection.js';
 	import { toast } from 'svelte-sonner';
 	import { getRemotes } from '../../context/remotes.js';
 	import { getBreadcrumbs } from '../../state/breadcrumbs.svelte.js';
 	import { getContentLanguage } from '../../state/content-language.svelte.js';
 	import EntryHeader from './entry-header.svelte';
+	import ConfirmationDialog from '../../components/dialogs/confirmation-dialog.svelte';
+	import FormErrorSummary, {
+		type FormErrorEntry
+	} from '../../components/forms/form-error-summary.svelte';
 	import { getLocalizedLabel } from '../../utils/collectionLabel.js';
+	import { scrollIntoViewWithin } from '../../utils/scrollWithin.js';
+	import { activateContainingTabs } from '../../utils/tabActivation.js';
+	import { activateContainingAccordions } from '../../utils/accordionActivation.js';
+	import { findFieldPathElement } from '../../utils/fieldPathElement.js';
+	import { flattenFormErrors } from '../../utils/flattenFormErrors.js';
 	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
+	import { sidebarLang } from '../../components/layout/lang.js';
+	import { errorMessages } from '../../i18n/errors.js';
 	import type { InterfaceLanguage } from '../../../types/languages.js';
-	import AlertCircle from '@tabler/icons-svelte/icons/alert-circle';
 	import ArchiveIcon from '@tabler/icons-svelte/icons/archive';
-	import XIcon from '@tabler/icons-svelte/icons/x';
 	import Button from '../../../components/ui/button/button.svelte';
 	import { cn } from '../../../utils.js';
 	import { ElementSize, useDebounce } from 'runed';
@@ -21,60 +30,16 @@
 	import type { DbEntryVersion, RawEntry } from '../../../types/entries.js';
 	import EntryForm from './entry-form.svelte';
 	import type { UpdateEntryVersionCommandType } from '../../../core/server/entries/operations/update.js';
-	import { getRawCollectionEntryLabel } from '../../utils/entryLabel.js';
-	import type { Field } from '../../../types/fields.js';
+	import { getCollectionEntryDisplayLabel } from '../../utils/entryLabel.js';
 	import { getFieldsFromConfig, hasLayout } from '../../../core/fields/layoutUtils.js';
-	import type { ValidationErrors } from 'sveltekit-superforms';
 	import { createHybridContext } from './hybrid/hybrid-context.svelte.js';
-	import { onMount, setContext } from 'svelte';
+	import { onMount, setContext, tick } from 'svelte';
 	import { get } from 'svelte/store';
 	const contentLanguage = getContentLanguage();
 	const remotes = getRemotes();
 	const interfaceLanguage = useInterfaceLanguage();
 	const hybridContext = createHybridContext();
 
-	function flattenErrors(
-		errors: ValidationErrors<Record<string, unknown>>,
-		fields: Field[],
-		prefix = ''
-	): string[] {
-		const result: string[] = [];
-
-		for (const [key, value] of Object.entries(errors)) {
-			if (key === '_errors') {
-				if (Array.isArray(value)) {
-					result.push(...value);
-				}
-				continue;
-			}
-			const path = prefix ? `${prefix}.${key}` : key;
-
-			// Find field label
-			const field = fields.find((f) => f.slug === key);
-			const label = field
-				? getLocalizedLabel(field.label, interfaceLanguage.current) || field.slug
-				: key;
-
-			if (Array.isArray(value)) {
-				// Direct error messages
-				result.push(`${label}: ${value.join(', ')}`);
-			} else if (typeof value === 'object' && value !== null) {
-				// Nested errors - recurse
-				const nestedFields = field && 'fields' in field ? (field.fields as Field[]) : [];
-				const nested = flattenErrors(
-					value as ValidationErrors<Record<string, unknown>>,
-					nestedFields,
-					path
-				);
-				if (nested.length > 0) {
-					result.push(...nested.map((e) => `${label} > ${e}`));
-				}
-			}
-		}
-
-		return result;
-	}
-
 	const lang: Record<
 		InterfaceLanguage,
 		{
@@ -86,6 +51,7 @@
 			publishToast: string;
 			scheduledToast: string;
 			unpublishToast: string;
+			cancelScheduledToast: string;
 			saveFailed: string;
 			cannotPublish: string;
 			validationHint: string;
@@ -93,6 +59,7 @@
 			switchToDraft: string;
 			editingDraft: string;
 			switchToPublished: string;
+			unsavedConfirm: string;
 		}
 	> = {
 		en: {
@@ -104,13 +71,15 @@
 			publishToast: 'Entry published successfully',
 			scheduledToast: 'Entry scheduled successfully',
 			unpublishToast: 'Publication withdrawn',
-			saveFailed: 'Save failed',
+			cancelScheduledToast: 'Scheduled update cancelled',
+			saveFailed: errorMessages.server.saveFailed.en,
 			cannotPublish: 'Cannot publish',
 			validationHint: 'Fix the highlighted fields below to publish',
 			newerDraft: 'A newer unpublished draft exists',
 			switchToDraft: 'Switch to draft',
 			editingDraft: 'You are editing an unpublished draft',
-			switchToPublished: 'View published'
+			switchToPublished: 'View published',
+			unsavedConfirm: 'You have unsaved changes. Leave without saving?'
 		},
 		pl: {
 			entryArchived: 'Wpis został zarchiwizowany pomyślnie',
@@ -121,13 +90,15 @@
 			publishToast: 'Wpis został pomyślnie opublikowany',
 			scheduledToast: 'Wpis został zaplanowany pomyślnie',
 			unpublishToast: 'Wycofano publikację',
-			saveFailed: 'Błąd zapisu',
+			cancelScheduledToast: 'Anulowano zaplanowaną aktualizację',
+			saveFailed: errorMessages.server.saveFailed.pl,
 			cannotPublish: 'Nie można opublikować',
 			validationHint: 'Popraw wyróżnione pola, żeby opublikować',
 			newerDraft: 'Istnieje nowszy nieopublikowany szkic',
 			switchToDraft: 'Przejdź do szkicu',
 			editingDraft: 'Edytujesz nieopublikowany szkic',
-			switchToPublished: 'Zobacz opublikowaną'
+			switchToPublished: 'Zobacz opublikowaną',
+			unsavedConfirm: 'Masz niezapisane zmiany. Opuścić stronę bez zapisywania?'
 		}
 	};
 
@@ -148,7 +119,7 @@
 	const collectionSchema = generateZodSchemaFromFields(
 		getFieldsFromConfig(collection),
 		contentLanguage.all,
-		{ localized: false }
+		{ localized: false, messageLanguage: interfaceLanguage.current }
 	);
 	const form = superForm(defaults(editingEntry.data, zod4(collectionSchema)), {
 		validators: zod4Client(collectionSchema),
@@ -157,35 +128,68 @@
 		resetForm: false
 	});
 
-	let validationErrors = $state<string[]>([]);
+	let validationErrors = $state<FormErrorEntry[]>([]);
 
-	// Autosave state
+	// Save state — manual save only (autosave removed in S8; re-introduce with
+	// proper draft-only guard tracked in ROADMAP backlog).
 	type SaveStatus = 'idle' | 'saving' | 'saved' | 'unsaved' | 'error';
 	let saveStatus = $state<SaveStatus>('idle');
-	let lastSavedData = $state<string>(JSON.stringify(get(form.form)));
-	let autosaveTimer: ReturnType<typeof setTimeout> | null = null;
-	// Tracks draft version created via autosave while editing a published version
+	let lastSavedAt = $state<Date | null>(null);
+	// Baseline for the "unsaved changes" check. `null` until the form has settled
+	// after mount / after a save — superForm + field components normalise values
+	// (e.g. dates, empty selects) asynchronously, and snapshotting before that
+	// would cause a spurious "unsaved" flag. While `settling`, form changes are
+	// treated as normalisation and ignored.
+	let lastSavedData = $state<string | null>(null);
+	let settling = true;
+	let settleQuietTimer: ReturnType<typeof setTimeout> | undefined;
+	let settleMaxTimer: ReturnType<typeof setTimeout> | undefined;
 	let savedDraftVersionId = $state<string | null>(null);
 
-	const AUTOSAVE_DELAY = 30000; // 30 seconds
+	// Field components (TipTap, SEO auto-fill, blocks hydration, …) normalise
+	// their values into `$formData` asynchronously over several ticks after
+	// mount/save. We can't tell those apart from real edits by value, so instead
+	// we wait for the form to go *quiet* (no changes for `SETTLE_QUIET_MS`) and
+	// only then snapshot the baseline. A hard cap guards against a field that
+	// never stops emitting.
+	const SETTLE_QUIET_MS = 300;
+	const SETTLE_MAX_MS = 3000;
+
+	function finishSettling() {
+		clearTimeout(settleQuietTimer);
+		clearTimeout(settleMaxTimer);
+		lastSavedData = JSON.stringify(get(form.form));
+		settling = false;
+	}
 
-	function scheduleAutosave() {
-		if (isArchived) return;
-		if (autosaveTimer) {
-			clearTimeout(autosaveTimer);
-		}
-		autosaveTimer = setTimeout(async () => {
-			await performAutosave();
-		}, AUTOSAVE_DELAY);
+	function beginSettling() {
+		settling = true;
+		clearTimeout(settleQuietTimer);
+		clearTimeout(settleMaxTimer);
+		settleQuietTimer = setTimeout(finishSettling, SETTLE_QUIET_MS);
+		settleMaxTimer = setTimeout(finishSettling, SETTLE_MAX_MS);
+	}
+
+	function pokeSettling() {
+		// a change arrived while still settling → treat as normalisation, push
+		// the quiet window out (but keep the hard cap running).
+		clearTimeout(settleQuietTimer);
+		settleQuietTimer = setTimeout(finishSettling, SETTLE_QUIET_MS);
+	}
+
+	// After a save the form is "clean" again — re-settle so post-save
+	// normalisation (validated/transformed data echoed back) isn't flagged.
+	function markSaved() {
+		lastSavedAt = new Date();
+		saveStatus = 'saved';
+		beginSettling();
 	}
 
-	async function performAutosave() {
+	async function saveDraft() {
 		if (isArchived) return;
 		const currentFormData = get(form.form);
 		const currentData = JSON.stringify(currentFormData);
-		if (currentData === lastSavedData) {
-			return;
-		}
+		if (currentData === lastSavedData && saveStatus !== 'error') return;
 
 		saveStatus = 'saving';
 		try {
@@ -196,29 +200,37 @@
 				data: currentFormData,
 				type: 'draft'
 			});
-			lastSavedData = currentData;
-			saveStatus = 'saved';
-			// If we're editing the published version and saved a draft, track it for the banner
+			markSaved();
 			const publishedVersion = entry.publishedVersions[currentLang];
 			if (publishedVersion && editingEntry.id === publishedVersion.id && result?.id) {
 				savedDraftVersionId = result.id;
 			}
-			// Reset to idle after 3s
-			setTimeout(() => {
-				if (saveStatus === 'saved') saveStatus = 'idle';
-			}, 3000);
 		} catch {
 			saveStatus = 'error';
 		}
 	}
 
-	// Track form changes for autosave + Ctrl/Cmd+S shortcut
+	// Warn before leaving with unsaved changes (in-app navigations).
+	beforeNavigate((nav) => {
+		if (saveStatus !== 'unsaved' || isArchived) return;
+		if (nav.type === 'leave') return; // browser close/reload — handled by beforeunload
+		if (!confirm(lang[interfaceLanguage.current].unsavedConfirm)) {
+			nav.cancel();
+		}
+	});
+
+	// Mark unsaved when form content diverges from the last-saved snapshot.
 	onMount(() => {
+		beginSettling();
+
 		const unsub = form.form.subscribe((data) => {
-			const currentData = JSON.stringify(data);
-			if (currentData !== lastSavedData) {
+			if (settling) {
+				pokeSettling();
+				return;
+			}
+			if (lastSavedData === null || saveStatus === 'saving') return;
+			if (JSON.stringify(data) !== lastSavedData) {
 				saveStatus = 'unsaved';
-				scheduleAutosave();
 			}
 		});
 
@@ -226,19 +238,25 @@
 			if ((e.ctrlKey || e.metaKey) && e.key === 's') {
 				e.preventDefault();
 				if (isArchived) return;
-				if (autosaveTimer) {
-					clearTimeout(autosaveTimer);
-					autosaveTimer = null;
-				}
-				performAutosave();
+				saveDraft();
 			}
 		}
 		window.addEventListener('keydown', handleKeydown);
 
+		function handleBeforeUnload(e: BeforeUnloadEvent) {
+			if (saveStatus === 'unsaved' && !isArchived) {
+				e.preventDefault();
+				e.returnValue = '';
+			}
+		}
+		window.addEventListener('beforeunload', handleBeforeUnload);
+
 		return () => {
+			clearTimeout(settleQuietTimer);
+			clearTimeout(settleMaxTimer);
 			unsub();
 			window.removeEventListener('keydown', handleKeydown);
-			if (autosaveTimer) clearTimeout(autosaveTimer);
+			window.removeEventListener('beforeunload', handleBeforeUnload);
 		};
 	});
 
@@ -255,14 +273,8 @@
 	}
 
 	async function onSave(type: UpdateEntryVersionCommandType, scheduledAt?: Date) {
-		// Cancel pending autosave
-		if (autosaveTimer) {
-			clearTimeout(autosaveTimer);
-			autosaveTimer = null;
-		}
-
 		// Unpublish — skip validation, call remote directly
-		if (type === 'cancel-published') {
+		if (type === 'cancel-published' || type === 'cancel-scheduled') {
 			saveStatus = 'saving';
 			try {
 				await remotes.updateEntryVersionCommand({
@@ -271,12 +283,12 @@
 					data: get(form.form),
 					type
 				});
-				saveStatus = 'saved';
-				toast.success(lang[interfaceLanguage.current].unpublishToast);
-
-				setTimeout(() => {
-					if (saveStatus === 'saved') saveStatus = 'idle';
-				}, 3000);
+				markSaved();
+				toast.success(
+					type === 'cancel-scheduled'
+						? lang[interfaceLanguage.current].cancelScheduledToast
+						: lang[interfaceLanguage.current].unpublishToast
+				);
 			} catch (e) {
 				console.error('Unpublish error:', e);
 				saveStatus = 'error';
@@ -302,8 +314,7 @@
 					scheduledAt
 				});
 
-				lastSavedData = JSON.stringify(validatedForm.data);
-				saveStatus = 'saved';
+				markSaved();
 
 				const toastMsg =
 					type === 'published-now'
@@ -311,25 +322,57 @@
 						: lang[interfaceLanguage.current].scheduledToast;
 				toast.success(toastMsg);
 
-				setTimeout(() => {
-					if (saveStatus === 'saved') saveStatus = 'idle';
-				}, 3000);
+				// Publishing/scheduling from a pinned ?version (e.g. a newer draft)
+				// leaves the editor on that version, so the "editing an unpublished
+				// draft" banner stays. Drop the param so the editor resolves back to
+				// the canonical (published) version for the language.
+				const url = new URL(window.location.href);
+				if (url.searchParams.has('version')) {
+					url.searchParams.delete('version');
+					goto(url.pathname + url.search);
+				}
 			} catch (e) {
 				console.error('Publish error:', e);
 				saveStatus = 'error';
-				toast.error(lang[interfaceLanguage.current].saveFailed, {
-					description: e instanceof Error ? e.message : undefined
-				});
-			}
-		} else {
-			const errors = flattenErrors(validatedForm.errors, getFieldsFromConfig(collection));
-			validationErrors = errors;
+				const body = (e as { body?: { message?: string; code?: string; path?: string } })
+					?.body;
+				const message =
+					body?.message ?? (e instanceof Error ? e.message : undefined);
+
+				// Server-side validation that pinpoints a field (e.g. SLUG_DUPLICATE)
+				// — surface it both inline (form.errors → Form.FieldErrors) and in
+				// the error summary banner.
+				if (body?.path && body.message) {
+					const path = body.path;
+					const msg = body.message;
+					form.errors.update(($errors) => {
+						const parts = path.split('.');
+						const root = $errors as unknown as Record<string, unknown>;
+						let cursor = root;
+						for (let i = 0; i < parts.length - 1; i++) {
+							const key = parts[i];
+							if (typeof cursor[key] !== 'object' || cursor[key] === null) {
+								cursor[key] = {};
+							}
+							cursor = cursor[key] as Record<string, unknown>;
+						}
+						cursor[parts[parts.length - 1]] = [msg];
+						return $errors;
+					});
+					validationErrors = [{ path, message: msg }];
+				}
 
-			// Scroll to first errored field
-			const firstErrorKey = Object.keys(validatedForm.errors).find((k) => k !== '_errors');
-			if (firstErrorKey) {
-				scrollToIssue(firstErrorKey);
+				toast.error(message ?? lang[interfaceLanguage.current].saveFailed);
 			}
+		} else {
+			// The error summary takes focus and scrolls itself into view; the user
+			// reviews the full list and clicks an entry to jump to a field.
+			validationErrors = flattenFormErrors(
+				validatedForm.errors as Record<string, unknown>,
+				getFieldsFromConfig(collection),
+				validatedForm.data,
+				interfaceLanguage.current
+			);
 		}
 	}
 
@@ -338,6 +381,9 @@
 	$effect(() => {
 		breadcrumbs.state = isCollection(collection)
 			? [
+					{
+						label: sidebarLang[interfaceLanguage.current].collections.title
+					},
 					{
 						label:
 							getLocalizedLabel(collection.labels?.plural, interfaceLanguage.current) ||
@@ -345,7 +391,13 @@
 						href: `/admin/collections/${collection.slug}`
 					},
 					{
-						label: getRawCollectionEntryLabel(entry, collection, contentLanguage.current)
+						// breadcrumb title follows the UI language (with cross-language fallback);
+						// untitled entries show a placeholder instead of the raw id
+						label: getCollectionEntryDisplayLabel(
+							entry,
+							collection,
+							interfaceLanguage.current
+						)
 					}
 				]
 			: [
@@ -520,14 +572,25 @@
 
 	const draftVersionId = $derived(currentDraftVersion?.id ?? savedDraftVersionId);
 
-	const scrollToIssue = (fieldSlug: string) => {
-		const fieldEl = document.querySelector(`[data-field-path="${fieldSlug}"]`);
+	const scrollToIssue = async (fieldPath: string) => {
+		// Resolve the deepest rendered ancestor of the (possibly nested) path —
+		// a leaf like `highlights.0.title` lives inside block/layout accordions
+		// that must be expanded before it can be measured / scrolled to.
+		const fieldEl = findFieldPathElement(fieldPath);
 		if (fieldEl) {
-			fieldEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
+			// Reveal the tab / accordion the field lives on (no-op if not nested
+			// inside one) before measuring geometry / scrolling. Tabs first so
+			// nested accordion-in-tab works in one pass; both are idempotent.
+			activateContainingTabs(fieldEl);
+			const openedAccordion = activateContainingAccordions(fieldEl);
+			await tick();
+			// A just-opened accordion expands via a ~200ms grid-template-rows
+			// transition; wait it out so the field's final position is settled
+			// before scrolling (otherwise the scroll lands mid-animation).
+			if (openedAccordion) await new Promise((resolve) => setTimeout(resolve, 240));
+			scrollIntoViewWithin(fieldEl);
 			const proseMirror = fieldEl.querySelector('.ProseMirror') as HTMLElement | null;
-			if (proseMirror) {
-				proseMirror.focus();
-			}
+			proseMirror?.focus({ preventScroll: true });
 		}
 	};
 
@@ -544,30 +607,74 @@
 	const t = $derived(lang[interfaceLanguage.current]);
 	const isHybrid = $derived(hybridContext.mode === 'hybrid' && !!collection.previewUrl);
 
+	const errorPaths = $derived(new Set(validationErrors.map((e) => e.path)));
+
+	let copyFromLangOpen = $state(false);
+	let pendingCopyLang = $state<string | null>(null);
+
 	function onCopyFromLang(sourceLang: string) {
 		const sourceVersion =
 			entry.draftVersions[sourceLang] ?? entry.publishedVersions[sourceLang];
 		if (!sourceVersion?.data) return;
+		pendingCopyLang = sourceLang;
+		copyFromLangOpen = true;
+	}
 
-		const confirmMsg =
-			interfaceLanguage.current === 'pl'
-				? `Nadpisze aktualne dane danymi z wersji ${sourceLang.toUpperCase()}. Kontynuować?`
-				: `This will overwrite current data with data from ${sourceLang.toUpperCase()} version. Continue?`;
-
-		if (!confirm(confirmMsg)) return;
-
-		form.form.set(sourceVersion.data);
+	function performCopyFromLang() {
+		if (!pendingCopyLang) return;
+		const sourceVersion =
+			entry.draftVersions[pendingCopyLang] ?? entry.publishedVersions[pendingCopyLang];
+		if (sourceVersion?.data) {
+			form.form.set(sourceVersion.data);
+		}
+		pendingCopyLang = null;
 	}
+
+	const copyDialogText = $derived.by(() => {
+		const target = contentLanguage.current.toUpperCase();
+		const source = (pendingCopyLang ?? '').toUpperCase();
+		if (interfaceLanguage.current === 'pl') {
+			return {
+				title: `Skopiować treść z ${source}?`,
+				description: `Aktualne dane w wersji ${target} zostaną zastąpione kopią z wersji ${source}. Możesz cofnąć tę akcję, dopóki nie zapiszesz zmian.`,
+				confirmLabel: 'Skopiuj'
+			};
+		}
+		return {
+			title: `Copy content from ${source}?`,
+			description: `Current data in the ${target} version will be replaced with a copy from ${source}. You can revert as long as you don't save.`,
+			confirmLabel: 'Copy'
+		};
+	});
 </script>
 
+<svelte:window
+	onbeforeunload={(e) => {
+		if (saveStatus === 'unsaved') {
+			e.preventDefault();
+			return '';
+		}
+	}}
+/>
+
+<ConfirmationDialog
+	bind:open={copyFromLangOpen}
+	title={copyDialogText.title}
+	description={copyDialogText.description}
+	confirmLabel={copyDialogText.confirmLabel}
+	variant="default"
+	onConfirm={performCopyFromLang}
+/>
+
 <div class={isHybrid ? 'flex h-full flex-col overflow-hidden' : ''}>
 	<EntryHeader
 		{entry}
 		version={editingEntry}
 		{onSave}
-		onSaveDraft={performAutosave}
+		onSaveDraft={saveDraft}
 		{onArchive}
 		{saveStatus}
+		{lastSavedAt}
 		{isArchived}
 		fields={getFieldsFromConfig(collection)}
 		getFormData={() => get(form.form)}
@@ -576,29 +683,13 @@
 	/>
 
 	{#if validationErrors.length > 0}
-		<div
-			role="alert"
-			aria-live="assertive"
-			class="flex shrink-0 items-start gap-3 border-b border-[var(--error)]/20 bg-[#FDF0F0] px-6 py-3 text-sm text-[var(--error)]"
-		>
-			<AlertCircle class="mt-0.5 size-4 shrink-0" />
-			<div class="min-w-0 flex-1">
-				<p class="font-semibold">{t.cannotPublish}</p>
-				<p class="text-xs opacity-80">{t.validationHint}</p>
-				<ul class="mt-1 text-xs">
-					{#each validationErrors.slice(0, 5) as error}
-						<li>— {error}</li>
-					{/each}
-				</ul>
-			</div>
-			<button
-				type="button"
-				onclick={() => (validationErrors = [])}
-				class="shrink-0 rounded p-0.5 opacity-60 hover:opacity-100"
-				aria-label="Zamknij"
-			>
-				<XIcon class="size-4" />
-			</button>
+		<div class="border-b px-6 py-3">
+			<FormErrorSummary
+				errors={validationErrors}
+				title={t.cannotPublish}
+				onFocusField={(path) => scrollToIssue(path)}
+				onDismiss={() => (validationErrors = [])}
+			/>
 		</div>
 	{/if}
 
@@ -673,12 +764,25 @@
 						{/await}
 					{/snippet}
 					{#snippet formPanel()}
-						<EntryForm
-							{form}
-							{entry}
-							focusedPath={hybridContext.focusedPath}
-							onPathSelect={(path) => (hybridContext.focusedPath = path)}
-						/>
+						{#if hasLayout(collection)}
+							<EntryForm
+								{form}
+								{entry}
+								{errorPaths}
+								focusedPath={hybridContext.focusedPath}
+								onPathSelect={(path) => (hybridContext.focusedPath = path)}
+							/>
+						{:else}
+							<div class="p-3 lg:p-4">
+								<EntryForm
+									{form}
+									{entry}
+									{errorPaths}
+									focusedPath={hybridContext.focusedPath}
+									onPathSelect={(path) => (hybridContext.focusedPath = path)}
+								/>
+							</div>
+						{/if}
 					{/snippet}
 				</HybridLayout>
 			{:catch}
@@ -686,13 +790,13 @@
 			{/await}
 		{:else if hasLayout(collection)}
 			<div class="overflow-y-auto" style="scroll-padding-top: 48px;">
-				<EntryForm {form} {entry} />
+				<EntryForm {form} {entry} {errorPaths} />
 			</div>
 		{:else}
 			<div class="flex items-stretch justify-center" style="scroll-padding-top: 48px;">
 				<div class="max-w-2xl grow p-4 lg:p-6">
 					<div class="bg-card rounded-2xl border p-4 shadow-sm lg:p-6">
-						<EntryForm {form} {entry} />
+						<EntryForm {form} {entry} {errorPaths} />
 					</div>
 				</div>
 			</div>