includio-cms 0.5.2 → 0.5.5

package/dist/admin/client/collection/collection-entries.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { getRawCollectionEntryLabel } from '../../utils/entryLabel.js';
 	import { getEntryThumbnail } from '../../utils/entryThumbnail.js';
+	import { arrayMove } from '../../utils/arrayMove.js';
 	import { getRemotes } from '../../../sveltekit/index.js';
 	import type { CollectionConfigWithType } from '../../../types/collections.js';
 	import DataTable from './data-table.svelte';
@@ -11,6 +12,7 @@
 	import type { InterfaceLanguage } from '../../../types/languages.js';
 	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
 	import { getEntryStatus } from '../entry/utils.js';
+	import { getLocalizedLabel } from '../../utils/collectionLabel.js';
 	import * as AlertDialog from '../../../components/ui/alert-dialog/index.js';
 	import { toast } from 'svelte-sonner';
 	import StatusBadge from './status-badge.svelte';
@@ -110,6 +112,7 @@
 		thumbnail: string | null;
 		searchText: string;
 		a11yWarnings: number;
+		customData: Record<string, unknown>;
 	}
 
 	type Props = {
@@ -140,8 +143,14 @@
 	// Is the current filter for archived entries?
 	const isArchivedFilter = $derived(viewState.statusFilter === 'archived');
 
+	const isOrderable = $derived(!!collection.orderable);
+
 	// Build orderBy from sorting state for server-side mode
 	const serverOrderBy = $derived.by(() => {
+		// When orderable, always sort by sortOrder
+		if (isOrderable) {
+			return { column: 'sortOrder' as const, direction: 'asc' as const };
+		}
 		if (!viewState.sorting.length) return undefined;
 		const { id, desc } = viewState.sorting[0];
 		if (id === 'createdAt' || id === 'updatedAt') {
@@ -240,6 +249,23 @@
 				}),
 			size: 140
 		},
+		// Custom list columns from collection config
+		...(collection.listColumns ?? []).map((fieldSlug) => {
+			const fieldConfig = collection.fields.find((f) => f.slug === fieldSlug);
+			const headerLabel = fieldConfig?.label
+				? getLocalizedLabel(fieldConfig.label, interfaceLanguage.current)
+				: fieldSlug;
+			return {
+				id: `custom_${fieldSlug}`,
+				header: headerLabel,
+				cell: (info: { row: { original: CollectionDataTableRow } }) => {
+					const value = info.row.original.customData[fieldSlug];
+					return String(value ?? '');
+				},
+				enableSorting: false,
+				size: 120
+			} satisfies ColumnDef<CollectionDataTableRow>;
+		}),
 		{
 			id: 'actions',
 			header: '',
@@ -331,6 +357,19 @@
 
 	function mapEntryToRow(entry: RawEntry): CollectionDataTableRow {
 		const data = entry.draftVersion?.data || entry.publishedVersion?.data || {};
+		const customData: Record<string, unknown> = {};
+		if (collection.listColumns) {
+			for (const fieldSlug of collection.listColumns) {
+				const fieldData = (data as Record<string, unknown>)[fieldSlug];
+				// For localized fields, extract current content language value
+				if (fieldData && typeof fieldData === 'object' && !Array.isArray(fieldData)) {
+					const localized = fieldData as Record<string, unknown>;
+					customData[fieldSlug] = localized[contentLanguage.current] ?? Object.values(localized)[0] ?? '';
+				} else {
+					customData[fieldSlug] = fieldData ?? '';
+				}
+			}
+		}
 		return {
 			id: entry.id,
 			name: getRawCollectionEntryLabel(entry, collection, contentLanguage.current),
@@ -341,7 +380,8 @@
 			updatedAt: new Date(entry.updatedAt),
 			thumbnail: getEntryThumbnail(data as Record<string, unknown>, collection),
 			searchText: getSearchText(entry),
-			a11yWarnings: countA11yWarnings(entry)
+			a11yWarnings: countA11yWarnings(entry),
+			customData
 		};
 	}
 
@@ -404,6 +444,14 @@
 		refreshQueries();
 	}
 
+	async function handleReorder(items: CollectionDataTableRow[], fromIndex: number, toIndex: number) {
+		if (!isOrderable || items.length === 0) return;
+		const reordered = arrayMove(items, fromIndex, toIndex);
+		const orderedIds = reordered.map((item) => item.id);
+		await remotes.reorderEntriesCommand({ orderedIds });
+		refreshQueries();
+	}
+
 	async function handleBulkDelete(items: CollectionDataTableRow[]) {
 		const idsToDelete = selectedIndices.map((idx) => items[idx]?.id).filter(Boolean);
 		for (const id of idsToDelete) {
@@ -439,8 +487,7 @@
 				? result.total
 				: filteredRows.length}
 		{@const pageCount = Math.ceil(totalItems / viewState.pageSize)}
-		{@const displayItems =
-			useServerPagination && !viewState.statusFilter
+		{@const displayItems = useServerPagination && !viewState.statusFilter
 				? filteredRows
 				: filteredRows.slice(
 						viewState.pageIndex * viewState.pageSize,
@@ -474,7 +521,7 @@
 					<DataTable
 						data={displayItems}
 						{columns}
-						enableSorting
+						enableSorting={!isOrderable}
 						enableFiltering
 						enableSelection
 						enablePagination
@@ -490,12 +537,14 @@
 							viewState.pageIndex = p.pageIndex;
 						}}
 						tableRef={(t) => (tableInstance = t)}
+						orderable={isOrderable}
+						onReorder={(from, to) => handleReorder(displayItems, from, to)}
 					/>
 				{:else}
 					<DataTable
 						data={displayItems}
 						{columns}
-						enableSorting
+						enableSorting={!isOrderable}
 						enableFiltering
 						enableSelection
 						enablePagination
@@ -508,6 +557,8 @@
 							viewState.pageIndex = p.pageIndex;
 						}}
 						tableRef={(t) => (tableInstance = t)}
+						orderable={isOrderable}
+						onReorder={(from, to) => handleReorder(displayItems, from, to)}
 					/>
 				{/if}
 			</div>

package/dist/admin/client/collection/data-table.svelte

@@ -15,6 +15,8 @@
 	import * as Table from '../../../components/ui/table/index.js';
 	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
 	import type { InterfaceLanguage } from '../../../types/languages.js';
+	import { droppable, draggable, dndState } from '@thisux/sveltednd';
+	import { flip } from 'svelte/animate';
 
 	type DataTableProps<TData, TValue> = {
 		columns: ColumnDef<TData, TValue>[];
@@ -35,6 +37,8 @@
 		pageCount?: number;
 		rowCount?: number;
 		emptyMessage?: string;
+		orderable?: boolean;
+		onReorder?: (fromIndex: number, toIndex: number) => void;
 	};
 
 	let {
@@ -55,9 +59,18 @@
 		manualPagination: manualPaginationProp = false,
 		pageCount: pageCountProp,
 		rowCount: rowCountProp,
-		emptyMessage
+		emptyMessage,
+		orderable = false,
+		onReorder
 	}: DataTableProps<TData, TValue> = $props();
 
+	let liveRegionMessage = $state('');
+	let dropProcessing = false;
+
+	const matchesReducedMotion = typeof window !== 'undefined'
+		? window.matchMedia('(prefers-reduced-motion: reduce)').matches
+		: false;
+
 	const interfaceLanguage = useInterfaceLanguage();
 
 	const defaultEmptyMessages: Record<InterfaceLanguage, string> = {
@@ -113,10 +126,17 @@
 	});
 </script>
 
-<Table.Root>
+{#if orderable}
+	<div aria-live="polite" aria-atomic="true" class="sr-only">{liveRegionMessage}</div>
+{/if}
+
+<Table.Root aria-roledescription={orderable ? 'sortable list' : undefined}>
 	<Table.Header class="bg-muted sticky top-0 z-10">
 		{#each table.getHeaderGroups() as headerGroup (headerGroup.id)}
 			<Table.Row class="border-b-0 hover:bg-transparent">
+				{#if orderable}
+					<Table.Head class="text-[11px] font-bold uppercase tracking-[0.04em] text-muted-foreground h-10 w-10"></Table.Head>
+				{/if}
 				{#each headerGroup.headers as header (header.id)}
 					<Table.Head class="text-[11px] font-bold uppercase tracking-[0.04em] text-muted-foreground h-10">
 						{#if !header.isPlaceholder}
@@ -131,23 +151,112 @@
 		{/each}
 	</Table.Header>
 	<Table.Body>
-		{#each table.getRowModel().rows as row, i (row.id)}
-			<Table.Row
-				data-state={row.getIsSelected() && 'selected'}
-				class="hover:bg-lavender-lighter/50 data-[state=selected]:bg-lavender-lighter/30 {i === table.getRowModel().rows.length - 1 ? 'border-b-0' : ''}"
-			>
-				{#each row.getVisibleCells() as cell (cell.id)}
-					<Table.Cell class="py-3">
-						<FlexRender content={cell.column.columnDef.cell} context={cell.getContext()} />
+		{#if orderable}
+			{#each table.getRowModel().rows as row, i (row.id)}
+				{@const totalRows = table.getRowModel().rows.length}
+				<tr
+					use:droppable={{
+						container: i.toString(),
+						callbacks: {
+							onDrop: (state) => {
+								if (dropProcessing) return;
+								dropProcessing = true;
+								const fromIndex = parseInt(state.sourceContainer ?? '');
+								const toIndex = parseInt(state.targetContainer ?? '');
+								if (!isNaN(fromIndex) && !isNaN(toIndex)) {
+									onReorder?.(fromIndex, toIndex);
+								}
+								dndState.isDragging = false;
+								dndState.draggedItem = null;
+								dndState.sourceContainer = '';
+								dndState.targetContainer = null;
+								dndState.targetElement = null;
+								setTimeout(() => { dropProcessing = false; }, 50);
+							}
+						}
+					}}
+					animate:flip={{ duration: matchesReducedMotion ? 0 : 200 }}
+					data-slot="table-row"
+					data-state={row.getIsSelected() ? 'selected' : undefined}
+					class="hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors hover:bg-lavender-lighter/50 data-[state=selected]:bg-lavender-lighter/30 {i === totalRows - 1 ? 'border-b-0' : ''}"
+				>
+					<Table.Cell class="py-3 w-10">
+						<div class="flex items-center gap-1">
+							<div
+								use:draggable={{
+									container: i.toString(),
+									dragData: { index: i }
+								}}
+								class="text-muted-foreground hover:text-foreground cursor-grab"
+								role="button"
+								tabindex="0"
+								aria-label={`Drag to reorder, row ${i + 1} of ${totalRows}`}
+								aria-roledescription="draggable"
+							>
+								<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="12" r="1"/><circle cx="9" cy="5" r="1"/><circle cx="9" cy="19" r="1"/><circle cx="15" cy="12" r="1"/><circle cx="15" cy="5" r="1"/><circle cx="15" cy="19" r="1"/></svg>
+							</div>
+							<div class="flex flex-col">
+								{#if i > 0}
+									<button
+										type="button"
+										class="p-0.5 rounded text-muted-foreground hover:text-foreground"
+										aria-label={`Move up, row ${i + 1} of ${totalRows}`}
+										onclick={() => {
+											onReorder?.(i, i - 1);
+											liveRegionMessage = `Moved to position ${i} of ${totalRows}`;
+										}}
+									>
+										<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m18 15-6-6-6 6"/></svg>
+									</button>
+								{/if}
+								{#if i < totalRows - 1}
+									<button
+										type="button"
+										class="p-0.5 rounded text-muted-foreground hover:text-foreground"
+										aria-label={`Move down, row ${i + 1} of ${totalRows}`}
+										onclick={() => {
+											onReorder?.(i, i + 1);
+											liveRegionMessage = `Moved to position ${i + 2} of ${totalRows}`;
+										}}
+									>
+										<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6"/></svg>
+									</button>
+								{/if}
+							</div>
+						</div>
 					</Table.Cell>
-				{/each}
-			</Table.Row>
+					{#each row.getVisibleCells() as cell (cell.id)}
+						<Table.Cell class="py-3">
+							<FlexRender content={cell.column.columnDef.cell} context={cell.getContext()} />
+						</Table.Cell>
+					{/each}
+				</tr>
+			{:else}
+				<Table.Row>
+					<Table.Cell colspan={columns.length + 1} class="h-24 text-center text-muted-foreground">
+						{emptyMessage ?? defaultEmptyMessages[interfaceLanguage.current]}
+					</Table.Cell>
+				</Table.Row>
+			{/each}
 		{:else}
-			<Table.Row>
-				<Table.Cell colspan={columns.length} class="h-24 text-center text-muted-foreground">
-					{emptyMessage ?? defaultEmptyMessages[interfaceLanguage.current]}
-				</Table.Cell>
-			</Table.Row>
-		{/each}
+			{#each table.getRowModel().rows as row, i (row.id)}
+				<Table.Row
+					data-state={row.getIsSelected() && 'selected'}
+					class="hover:bg-lavender-lighter/50 data-[state=selected]:bg-lavender-lighter/30 {i === table.getRowModel().rows.length - 1 ? 'border-b-0' : ''}"
+				>
+					{#each row.getVisibleCells() as cell (cell.id)}
+						<Table.Cell class="py-3">
+							<FlexRender content={cell.column.columnDef.cell} context={cell.getContext()} />
+						</Table.Cell>
+					{/each}
+				</Table.Row>
+			{:else}
+				<Table.Row>
+					<Table.Cell colspan={columns.length} class="h-24 text-center text-muted-foreground">
+						{emptyMessage ?? defaultEmptyMessages[interfaceLanguage.current]}
+					</Table.Cell>
+				</Table.Row>
+			{/each}
+		{/if}
 	</Table.Body>
 </Table.Root>

package/dist/admin/client/collection/data-table.svelte.d.ts

@@ -18,6 +18,8 @@ type DataTableProps<TData, TValue> = {
     pageCount?: number;
     rowCount?: number;
     emptyMessage?: string;
+    orderable?: boolean;
+    onReorder?: (fromIndex: number, toIndex: number) => void;
 };
 declare function $$render<TData, TValue>(): {
     props: DataTableProps<TData, TValue>;

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

@@ -112,6 +112,7 @@
 
 <style>
 	.layout-entry-form {
+		container-type: inline-size;
 		max-width: 1100px;
 		margin: 0 auto;
 		padding: 24px;

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

@@ -13,6 +13,7 @@
 	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';
 	import { defaults, superForm, type SuperForm } from 'sveltekit-superforms';
 	import { zod4, zod4Client } from 'sveltekit-superforms/adapters';
@@ -326,9 +327,7 @@
 			validationErrors = errors;
 
 			// Scroll to first errored field
-			const firstErrorKey = Object.keys(validatedForm.errors).find(
-				(k) => k !== '_errors'
-			);
+			const firstErrorKey = Object.keys(validatedForm.errors).find((k) => k !== '_errors');
 			if (firstErrorKey) {
 				scrollToIssue(firstErrorKey);
 			}
@@ -540,137 +539,145 @@
 	});
 
 	const t = $derived(lang[interfaceLanguage.current]);
+	const isHybrid = $derived(hybridContext.mode === 'hybrid' && !!collection.previewUrl);
 </script>
 
-<EntryHeader
-	{entry}
-	version={editingEntry}
-	{onSave}
-	onSaveDraft={performAutosave}
-	{onArchive}
-	{saveStatus}
-	{isArchived}
-	fields={getFieldsFromConfig(collection)}
-	getFormData={() => get(form.form)}
-	onScrollToIssue={scrollToIssue}
-	{translationStatus}
-/>
-
-{#if validationErrors.length > 0}
-	<div
-		role="alert"
-		aria-live="assertive"
-		class="flex 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"
+<div class={isHybrid ? 'flex h-full flex-col overflow-hidden' : ''}>
+	<EntryHeader
+		{entry}
+		version={editingEntry}
+		{onSave}
+		onSaveDraft={performAutosave}
+		{onArchive}
+		{saveStatus}
+		{isArchived}
+		fields={getFieldsFromConfig(collection)}
+		getFormData={() => get(form.form)}
+		onScrollToIssue={scrollToIssue}
+		{translationStatus}
+	/>
+
+	{#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)]"
 		>
-			<XIcon class="size-4" />
-		</button>
-	</div>
-{/if}
+			<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>
+	{/if}
 
-{#if isArchived}
-	<div
-		role="alert"
-		class="flex items-center justify-between gap-3 border-b border-[var(--warning)]/20 bg-[#FDF6EC] px-6 py-3 text-sm"
-	>
-		<div class="flex items-center gap-2 text-[var(--warning)]">
-			<ArchiveIcon class="size-4 shrink-0" />
-			<span>{t.archivedBanner}</span>
+	{#if isArchived}
+		<div
+			role="alert"
+			class="flex shrink-0 items-center justify-between gap-3 border-b border-[var(--warning)]/20 bg-[#FDF6EC] px-6 py-3 text-sm"
+		>
+			<div class="flex items-center gap-2 text-[var(--warning)]">
+				<ArchiveIcon class="size-4 shrink-0" />
+				<span>{t.archivedBanner}</span>
+			</div>
+			<Button size="sm" onclick={onRestore}>{t.restore}</Button>
 		</div>
-		<Button size="sm" onclick={onRestore}>{t.restore}</Button>
-	</div>
-{/if}
+	{/if}
 
-{#if showDraftBanner}
-	<div
-		class="flex items-center justify-between border-b bg-[var(--lavender-lighter)] px-6 py-2 text-sm"
-	>
-		<span class="text-[var(--text-secondary)]">{lang[interfaceLanguage.current].newerDraft}</span>
-		<button
-			type="button"
-			class="font-semibold text-[var(--primary)] hover:underline"
-			onclick={() => goto(`?version=${draftVersionId}`)}
+	{#if showDraftBanner}
+		<div
+			class="flex shrink-0 items-center justify-between border-b bg-[var(--lavender-lighter)] px-6 py-2 text-sm"
 		>
-			{lang[interfaceLanguage.current].switchToDraft}
-		</button>
-	</div>
-{:else if showPublishedBanner}
+			<span class="text-[var(--text-secondary)]">{lang[interfaceLanguage.current].newerDraft}</span>
+			<button
+				type="button"
+				class="font-semibold text-[var(--primary)] hover:underline"
+				onclick={() => goto(`?version=${draftVersionId}`)}
+			>
+				{lang[interfaceLanguage.current].switchToDraft}
+			</button>
+		</div>
+	{:else if showPublishedBanner}
+		<div
+			class="flex shrink-0 items-center justify-between border-b bg-[var(--lavender-lighter)] px-6 py-2 text-sm"
+		>
+			<span class="text-[var(--text-secondary)]"
+				>{lang[interfaceLanguage.current].editingDraft}</span
+			>
+			<button
+				type="button"
+				class="font-semibold text-[var(--primary)] hover:underline"
+				onclick={() => goto(`?version=${entry.publishedVersion!.id}`)}
+			>
+				{lang[interfaceLanguage.current].switchToPublished}
+			</button>
+		</div>
+	{/if}
+
 	<div
-		class="flex items-center justify-between border-b bg-[var(--lavender-lighter)] px-6 py-2 text-sm"
+		class={cn(
+			isArchived && 'pointer-events-none opacity-60',
+			isHybrid && 'flex min-h-0 flex-1 overflow-hidden'
+		)}
 	>
-		<span class="text-[var(--text-secondary)]">{lang[interfaceLanguage.current].editingDraft}</span>
-		<button
-			type="button"
-			class="font-semibold text-[var(--primary)] hover:underline"
-			onclick={() => goto(`?version=${entry.publishedVersion!.id}`)}
-		>
-			{lang[interfaceLanguage.current].switchToPublished}
-		</button>
-	</div>
-{/if}
-
-<div class={isArchived ? 'pointer-events-none opacity-60' : ''}>
-{#if hybridContext.mode === 'hybrid' && collection.previewUrl}
-	<div class="flex min-h-0 flex-1 overflow-hidden">
-		{#await import('./hybrid/hybrid-layout.svelte')}
-			<div class="bg-accent h-full animate-pulse rounded-md"></div>
-		{:then { default: HybridLayout }}
-			<HybridLayout>
-				{#snippet preview()}
-					{#await import('./hybrid/hybrid-preview.svelte')}
-						<div class="bg-accent h-full animate-pulse rounded-md"></div>
-					{:then { default: HybridPreview }}
-						<HybridPreview
-							{collection}
-							{editingEntry}
-							bind:previewIframe
-							bind:sizePreset
-							{size}
-							bind:el
+		{#if isHybrid}
+			{#await import('./hybrid/hybrid-layout.svelte')}
+				<div class="bg-accent h-full animate-pulse rounded-md"></div>
+			{:then { default: HybridLayout }}
+				<HybridLayout>
+					{#snippet preview()}
+						{#await import('./hybrid/hybrid-preview.svelte')}
+							<div class="bg-accent h-full animate-pulse rounded-md"></div>
+						{:then { default: HybridPreview }}
+							<HybridPreview
+								{collection}
+								{editingEntry}
+								bind:previewIframe
+								bind:sizePreset
+								{size}
+								bind:el
+							/>
+						{:catch}
+							<p class="text-destructive p-4 text-sm">Failed to load preview</p>
+						{/await}
+					{/snippet}
+					{#snippet formPanel()}
+						<EntryForm
+							{form}
+							{entry}
+							focusedPath={hybridContext.focusedPath}
+							onPathSelect={(path) => (hybridContext.focusedPath = path)}
 						/>
-					{:catch}
-						<p class="text-destructive p-4 text-sm">Failed to load preview</p>
-					{/await}
-				{/snippet}
-				{#snippet formPanel()}
-					<EntryForm
-						{form}
-						{entry}
-						focusedPath={hybridContext.focusedPath}
-						onPathSelect={(path) => (hybridContext.focusedPath = path)}
-					/>
-				{/snippet}
-			</HybridLayout>
-		{:catch}
-			<p class="text-destructive p-4 text-sm">Failed to load layout</p>
-		{/await}
-	</div>
-{:else if hasLayout(collection)}
-	<div class="overflow-y-auto" style="scroll-padding-top: 48px;">
-		<EntryForm {form} {entry} />
-	</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">
+					{/snippet}
+				</HybridLayout>
+			{:catch}
+				<p class="text-destructive p-4 text-sm">Failed to load layout</p>
+			{/await}
+		{:else if hasLayout(collection)}
+			<div class="overflow-y-auto" style="scroll-padding-top: 48px;">
 				<EntryForm {form} {entry} />
 			</div>
-		</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} />
+					</div>
+				</div>
+			</div>
+		{/if}
 	</div>
-{/if}
 </div>