includio-cms 0.25.0 → 0.27.0

package/dist/admin/client/users/users-page.svelte.d.ts

@@ -1,3 +1,14 @@
-declare const UsersPage: import("svelte").Component<Record<string, never>, {}, "">;
+type User = {
+    id: string;
+    name: string;
+    email: string;
+    role: string;
+    createdAt: Date;
+};
+type Props = {
+    data?: User[];
+    state?: 'loading' | 'error' | 'ok';
+};
+declare const UsersPage: import("svelte").Component<Props, {}, "">;
 type UsersPage = ReturnType<typeof UsersPage>;
 export default UsersPage;

package/dist/admin/components/dashboard/form-submissions-widget.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
-	import { formatRelativeDate as formatRelativeDateUtil } from '../../utils/formatDate.js';
+	import { formatRelativeDate as formatRelativeDateUtil } from '../../utils/formatters.js';
 	import Skeleton from '../../../components/ui/skeleton/skeleton.svelte';
 	import { getRemotes } from '../../../sveltekit/index.js';
 	import { getLocalizedLabel } from '../../utils/collectionLabel.js';
@@ -9,21 +9,9 @@
 	const interfaceLanguage = useInterfaceLanguage();
 	const remotes = getRemotes();
 
-	const lang: Record<InterfaceLanguage, {
-		title: string;
-		viewAll: string;
-		noSubmissions: string;
-	}> = {
-		pl: {
-			title: 'Zgłoszenia',
-			viewAll: 'Wszystkie →',
-			noSubmissions: 'Brak zgłoszeń'
-		},
-		en: {
-			title: 'Submissions',
-			viewAll: 'View all →',
-			noSubmissions: 'No submissions'
-		}
+	const lang: Record<InterfaceLanguage, { title: string; noSubmissions: string; unread: string }> = {
+		pl: { title: 'Zgłoszenia', noSubmissions: 'Brak zgłoszeń', unread: 'nieprzeczytane' },
+		en: { title: 'Submissions', noSubmissions: 'No submissions', unread: 'unread' }
 	};
 
 	function formatRelativeDate(date: Date): string {
@@ -31,75 +19,72 @@
 	}
 
 	const query = $derived(remotes.getSubmissionsOverview());
+
+	// Flat list of the most recent submissions across all forms, newest first.
+	const recentSubmissions = $derived.by(() => {
+		const overview = query.current;
+		if (!overview) return [];
+		return overview
+			.flatMap((form) =>
+				form.recent.map((s) => ({
+					...s,
+					formLabel: getLocalizedLabel(form.label as Localized, interfaceLanguage.current) ?? form.slug
+				}))
+			)
+			.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
+			.slice(0, 6);
+	});
 </script>
 
 <section class="dash-card dash-card--forms" aria-labelledby="forms-heading">
 	<div class="dash-card-header">
 		<h2 class="dash-card-title" id="forms-heading">{lang[interfaceLanguage.current].title}</h2>
-		<a href="/admin/forms" class="dash-card-link">{lang[interfaceLanguage.current].viewAll}</a>
 	</div>
 
 	{#if !query.ready}
-		<div class="forms-card-body">
-			{#each Array(2) as _}
-				<div class="form-group">
-					<Skeleton class="h-4 w-24 mb-2" />
-					<Skeleton class="h-8 w-full" />
-					<Skeleton class="h-8 w-full mt-1" />
-				</div>
+		<ul class="entries-list">
+			{#each Array(4) as _}
+				<li class="entry-item">
+					<div class="entry-item-link" style="pointer-events:none">
+						<div class="entry-item-main">
+							<Skeleton class="h-4 w-40" />
+							<Skeleton class="h-3 w-24 mt-1" />
+						</div>
+					</div>
+				</li>
 			{/each}
-		</div>
+		</ul>
 	{:else if query.current}
-		{@const overview = query.current}
 		<div class:opacity-60={query.loading} class="transition-opacity duration-200">
-		{#if overview.length === 0}
-			<p class="text-center text-sm py-6" style="color:var(--text-light)">
-				{lang[interfaceLanguage.current].noSubmissions}
-			</p>
-		{:else}
-			<div class="forms-card-body">
-				{#each overview as form}
-					<div class="form-group">
-						<div class="form-group-header">
-							<span class="form-group-name">
-								{getLocalizedLabel(form.label as Localized, interfaceLanguage.current)}
-							</span>
-							<span
-								class="form-group-badge {form.unread > 0 ? 'form-group-badge--unread' : ''}"
-								aria-label="{form.unread} {interfaceLanguage.current === 'pl' ? 'nieprzeczytanych' : 'unread'}"
-							>
-								{form.unread}
-							</span>
-						</div>
-
-						{#if form.recent.length > 0}
-							<ul class="form-submissions-list" aria-label="{getLocalizedLabel(form.label as Localized, interfaceLanguage.current)}">
-								{#each form.recent.slice(0, 3) as submission}
-									<li>
-										<a href="/admin/form-submissions/{submission.id}" class="form-submission-item">
-											<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" style="flex-shrink:0; color: {submission.read ? 'var(--text-light)' : 'var(--primary)'}">
-												<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
-												<polyline points="22,6 12,13 2,6"/>
-											</svg>
-											<span style="flex:1; min-width:0; font-size:13px; font-weight:{submission.read ? '500' : '700'}; color:{submission.read ? 'var(--muted-foreground)' : 'var(--foreground)'}; overflow:hidden; text-overflow:ellipsis; white-space:nowrap">
-												{submission.preview || '—'}
-											</span>
-											<time style="font-size:11px; color:var(--text-light); white-space:nowrap; flex-shrink:0">
-												{formatRelativeDate(new Date(submission.createdAt))}
-											</time>
-										</a>
-									</li>
-								{/each}
-							</ul>
-						{:else}
-							<p style="font-size:13px; color:var(--text-light); padding:4px 10px">
-								{lang[interfaceLanguage.current].noSubmissions}
-							</p>
-						{/if}
-					</div>
-				{/each}
-			</div>
-		{/if}
+			{#if recentSubmissions.length === 0}
+				<p class="text-center text-sm py-6" style="color:var(--text-light)">
+					{lang[interfaceLanguage.current].noSubmissions}
+				</p>
+			{:else}
+				<ul class="entries-list" aria-label={lang[interfaceLanguage.current].title}>
+					{#each recentSubmissions as submission (submission.id)}
+						<li class="entry-item">
+							<a href="/admin/form-submissions/{submission.id}" class="entry-item-link">
+								<span
+									aria-hidden="true"
+									style="width:7px;height:7px;border-radius:9999px;flex:none;align-self:center;margin-right:8px;background:{submission.read
+										? 'var(--border)'
+										: 'var(--primary)'}"
+								></span>
+								<div class="entry-item-main">
+									<span class="entry-item-title" style={submission.read ? '' : 'font-weight:700'}>
+										{submission.preview || '—'}
+										{#if !submission.read}<span class="sr-only">({lang[interfaceLanguage.current].unread})</span>{/if}
+									</span>
+									<span class="entry-item-meta">
+										{submission.formLabel} · {formatRelativeDate(new Date(submission.createdAt))}
+									</span>
+								</div>
+							</a>
+						</li>
+					{/each}
+				</ul>
+			{/if}
 		</div>
 	{/if}
 </section>

package/dist/admin/components/dashboard/recent-activity.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
 	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
-	import { formatRelativeDate as formatRelativeDateUtil } from '../../utils/formatDate.js';
+	import { formatRelativeDate as formatRelativeDateUtil } from '../../utils/formatters.js';
+	import { getLocalizedLabel } from '../../utils/collectionLabel.js';
 	import Skeleton from '../../../components/ui/skeleton/skeleton.svelte';
 	import { getRemotes } from '../../../sveltekit/index.js';
-	import type { InterfaceLanguage } from '../../../types/languages.js';
+	import type { InterfaceLanguage, Localized } from '../../../types/languages.js';
 
 	const interfaceLanguage = useInterfaceLanguage();
 	const remotes = getRemotes();
@@ -29,7 +30,9 @@
 		return formatRelativeDateUtil(date, interfaceLanguage.current);
 	}
 
-	const query = $derived(remotes.getRecentActivity(10));
+	const query = $derived(
+		remotes.getRecentActivity({ limit: 10, language: interfaceLanguage.current })
+	);
 </script>
 
 <section class="dash-card dash-card--activity" aria-labelledby="activity-heading">
@@ -61,6 +64,10 @@
 		{:else}
 			<ul class="activity-list" aria-label={lang[interfaceLanguage.current].title}>
 				{#each activity as item, i}
+					{@const containerName = (
+						getLocalizedLabel(item.containerLabel as Localized, interfaceLanguage.current) ??
+						item.slug
+					).toLocaleLowerCase(interfaceLanguage.current)}
 					<li class="activity-item">
 						<div class="activity-dot-col">
 							<div class="activity-dot activity-dot--edit" aria-hidden="true"></div>
@@ -70,10 +77,15 @@
 						</div>
 						<a href="/admin/entries/{item.entryId}" class="activity-body" style="text-decoration:none">
 							<p class="activity-text">
-								{lang[interfaceLanguage.current].edited} „{item.label || item.slug}"
+								{#if item.kind === 'single'}
+									{lang[interfaceLanguage.current].edited} {containerName}
+								{:else}
+									{lang[interfaceLanguage.current].edited} {containerName} „{item.label || item.slug}"{#if item.label && item.labelLanguage && item.labelLanguage !== interfaceLanguage.current}<span style="color:var(--text-light);font-weight:400;font-size:0.85em">{' '}({item.labelLanguage})</span>{/if}
+								{/if}
 							</p>
 							<p class="activity-meta">
-								{formatRelativeDate(new Date(item.updatedAt))}
+								{(item.editorName ? item.editorName + ' · ' : '') +
+									formatRelativeDate(new Date(item.updatedAt))}
 							</p>
 						</a>
 					</li>

package/dist/admin/components/dashboard/recent-entries.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
-	import { formatRelativeDate as formatRelativeDateUtil } from '../../utils/formatDate.js';
+	import { formatRelativeDate as formatRelativeDateUtil } from '../../utils/formatters.js';
 	import { getLocalizedLabel } from '../../utils/collectionLabel.js';
 	import Skeleton from '../../../components/ui/skeleton/skeleton.svelte';
 	import { getRemotes } from '../../../sveltekit/index.js';
@@ -45,13 +45,12 @@
 		scheduled: '◐'
 	};
 
-	const query = $derived(remotes.getRecentEntries(6));
+	const query = $derived(remotes.getRecentEntries({ limit: 6, language: interfaceLanguage.current }));
 </script>
 
 <section class="dash-card dash-card--entries" aria-labelledby="entries-heading">
 	<div class="dash-card-header">
 		<h2 class="dash-card-title" id="entries-heading">{lang[interfaceLanguage.current].title}</h2>
-		<a href="/admin/entries" class="dash-card-link">{lang[interfaceLanguage.current].viewAll}</a>
 	</div>
 
 	{#if !query.ready}
@@ -77,13 +76,26 @@
 		{:else}
 			<ul class="entries-list" aria-label={lang[interfaceLanguage.current].title}>
 				{#each entries as entry}
+					{@const containerName = getLocalizedLabel(
+						entry.containerLabel as Localized,
+						interfaceLanguage.current
+					)}
 					<li class="entry-item">
 						<a href="/admin/entries/{entry.entryId}" class="entry-item-link">
 							<div class="entry-item-main">
-								<span class="entry-item-title">{entry.label || entry.slug}</span>
-								<span class="entry-item-meta">
-									{getLocalizedLabel(entry.collectionLabel as Localized, interfaceLanguage.current)} · {formatRelativeDate(new Date(entry.updatedAt))}
-								</span>
+								{#if entry.kind === 'single'}
+									<span class="entry-item-title">{containerName}</span>
+									<span class="entry-item-meta">
+										{formatRelativeDate(new Date(entry.updatedAt))}
+									</span>
+								{:else}
+									<span class="entry-item-title"
+										>{entry.label || entry.slug}{#if entry.label && entry.labelLanguage && entry.labelLanguage !== interfaceLanguage.current}<span style="color:var(--text-light);font-weight:400;font-size:0.85em">{' '}({entry.labelLanguage})</span>{/if}</span
+									>
+									<span class="entry-item-meta">
+										{containerName} · {formatRelativeDate(new Date(entry.updatedAt))}
+									</span>
+								{/if}
 							</div>
 							<span class="dash-status-badge dash-status-{entry.status}">
 								<span aria-hidden="true">{statusIcon[entry.status] ?? ''}</span>

package/dist/admin/components/dialogs/confirmation-dialog.svelte

@@ -0,0 +1,105 @@
+<script lang="ts" module>
+	/**
+	 * @internal
+	 * Reusable confirmation dialog — wraps bits-ui AlertDialog with destructive
+	 * default + safe focus (Cancel autofocus) + loading state.
+	 *
+	 * Used by entry-page (copy-from-lang, archive), shop-order-detail (cancel
+	 * shipping), coupons-list (delete), dashboard-page (delete orphaned),
+	 * form-submissions (bulk delete). S8.
+	 */
+</script>
+
+<script lang="ts">
+	import * as AlertDialog from '../../../components/ui/alert-dialog/index.js';
+	import { buttonVariants } from '../../../components/ui/button/button.svelte';
+	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
+	import type { InterfaceLanguage } from '../../../types/languages.js';
+	import Loader2 from '@tabler/icons-svelte/icons/loader-2';
+	import { cn } from '../../../utils.js';
+
+	type Props = {
+		open: boolean;
+		title: string;
+		description: string;
+		confirmLabel?: string;
+		cancelLabel?: string;
+		variant?: 'destructive' | 'default';
+		loading?: boolean;
+		onConfirm: () => void | Promise<void>;
+	};
+
+	let {
+		open = $bindable(false),
+		title,
+		description,
+		confirmLabel,
+		cancelLabel,
+		variant = 'destructive',
+		loading = false,
+		onConfirm
+	}: Props = $props();
+
+	const interfaceLanguage = useInterfaceLanguage();
+
+	const lang: Record<
+		InterfaceLanguage,
+		{ defaultConfirmDestructive: string; defaultConfirmDefault: string; defaultCancel: string }
+	> = {
+		pl: {
+			defaultConfirmDestructive: 'Usuń',
+			defaultConfirmDefault: 'Potwierdź',
+			defaultCancel: 'Anuluj'
+		},
+		en: {
+			defaultConfirmDestructive: 'Delete',
+			defaultConfirmDefault: 'Confirm',
+			defaultCancel: 'Cancel'
+		}
+	};
+
+	const resolvedConfirm = $derived(
+		confirmLabel ??
+			(variant === 'destructive'
+				? lang[interfaceLanguage.current].defaultConfirmDestructive
+				: lang[interfaceLanguage.current].defaultConfirmDefault)
+	);
+	const resolvedCancel = $derived(cancelLabel ?? lang[interfaceLanguage.current].defaultCancel);
+
+	let cancelRef = $state<HTMLElement | null>(null);
+
+	$effect(() => {
+		if (!open) return;
+		// Defer to ensure portal mounted, then focus Cancel for safety.
+		queueMicrotask(() => cancelRef?.focus());
+	});
+
+	async function handleAction(event: Event) {
+		event.preventDefault();
+		if (loading) return;
+		await onConfirm();
+		open = false;
+	}
+</script>
+
+<AlertDialog.Root bind:open>
+	<AlertDialog.Content>
+		<AlertDialog.Title>{title}</AlertDialog.Title>
+		<AlertDialog.Description>{description}</AlertDialog.Description>
+		<AlertDialog.Footer>
+			<AlertDialog.Cancel bind:ref={cancelRef} disabled={loading}>
+				{resolvedCancel}
+			</AlertDialog.Cancel>
+			<AlertDialog.Action
+				class={cn(buttonVariants({ variant }), 'inline-flex items-center gap-2')}
+				disabled={loading}
+				onclick={handleAction}
+			>
+				{#if loading}
+					<Loader2 class="size-4 animate-spin" aria-hidden="true" />
+				{/if}
+				{resolvedConfirm}
+			</AlertDialog.Action>
+		</AlertDialog.Footer>
+	</AlertDialog.Content>
+</AlertDialog.Root>

package/dist/admin/components/dialogs/confirmation-dialog.svelte.d.ts

@@ -0,0 +1,13 @@
+type Props = {
+    open: boolean;
+    title: string;
+    description: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    variant?: 'destructive' | 'default';
+    loading?: boolean;
+    onConfirm: () => void | Promise<void>;
+};
+declare const ConfirmationDialog: import("svelte").Component<Props, {}, "open">;
+type ConfirmationDialog = ReturnType<typeof ConfirmationDialog>;
+export default ConfirmationDialog;

package/dist/admin/components/fields/block-picker-modal.svelte

@@ -62,6 +62,12 @@
 			/>
 		</div>
 
+		<div class="sr-only" role="status" aria-live="polite">
+			{#if searchQuery.trim()}
+				{filteredOptions.length} {pt.noBlocksFound === 'Nie znaleziono bloków' ? 'wyników' : 'results'}
+			{/if}
+		</div>
+
 		<div class="grid max-h-[60vh] grid-cols-2 gap-4 overflow-y-auto">
 			{#each filteredOptions as option (option.slug)}
 				<button

package/dist/admin/components/fields/blocks-field.svelte

@@ -28,6 +28,7 @@
 	import { droppable, draggable, dndState } from '@thisux/sveltednd';
 	import { flip } from 'svelte/animate';
 	import { arrayMove } from '../../utils/arrayMove.js';
+	import { LiveRegion } from '../../../components/ui/live-region/index.js';
 
 	const contentLanguage = getContentLanguage();
 	const interfaceLanguage = useInterfaceLanguage();
@@ -42,6 +43,18 @@
 	};
 	const bt = $derived(blocksLang[interfaceLanguage.current]);
 
+	const announceLang: Record<InterfaceLanguage, { movedTo: string; added: string; removed: string; duplicated: string }> = {
+		pl: { movedTo: 'Przeniesiono na pozycję', added: 'Dodano blok', removed: 'Usunięto blok', duplicated: 'Zduplikowano blok' },
+		en: { movedTo: 'Moved to position', added: 'Added block', removed: 'Removed block', duplicated: 'Duplicated block' }
+	};
+	const at = $derived(announceLang[interfaceLanguage.current]);
+	let announcement = $state('');
+
+	function announce(text: string) {
+		announcement = '';
+		queueMicrotask(() => { announcement = text; });
+	}
+
 	function generateId(): string {
 		if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
 			return crypto.randomUUID();
@@ -111,6 +124,9 @@
 			}
 		];
 
+		const label = getLocalizedLabel(field.label, interfaceLanguage.current) || field.slug;
+		announce(`${at.added}: ${label}`);
+
 		openAndCloseOthers($value.length - 1);
 	}
 
@@ -122,6 +138,9 @@
 		const copy = JSON.parse(JSON.stringify(itemToDuplicate));
 		copy._id = generateId();
 
+		const label = getAccordionLabel(itemToDuplicate) || `${index + 1}`;
+		announce(`${at.duplicated}: ${label}`);
+
 		$value = [...$value.slice(0, index + 1), copy, ...$value.slice(index + 1)];
 
 		tick().then(() => {
@@ -131,10 +150,13 @@
 
 	function moveItemUp(index: number) {
 		if (!$value || index <= 0) return;
+		const label = getAccordionLabel($value[index]) || `${index + 1}`;
 		const newValue = [...$value];
 		[newValue[index - 1], newValue[index]] = [newValue[index], newValue[index - 1]];
 		$value = newValue;
 
+		announce(`${label}: ${at.movedTo} ${index}`);
+
 		tick().then(() => {
 			openAndCloseOthers(index - 1);
 		});
@@ -142,10 +164,13 @@
 
 	function moveItemDown(index: number) {
 		if (!$value || index >= $value.length - 1) return;
+		const label = getAccordionLabel($value[index]) || `${index + 1}`;
 		const newValue = [...$value];
 		[newValue[index], newValue[index + 1]] = [newValue[index + 1], newValue[index]];
 		$value = newValue;
 
+		announce(`${label}: ${at.movedTo} ${index + 2}`);
+
 		tick().then(() => {
 			openAndCloseOthers(index + 1);
 		});
@@ -155,8 +180,11 @@
 
 	function moveItem(from: number, to: number) {
 		if (!$value || from === to) return;
+		const label = getAccordionLabel($value[from]) || `${from + 1}`;
 		$value = arrayMove($value, from, to);
 
+		announce(`${label}: ${at.movedTo} ${to + 1}`);
+
 		tick().then(() => {
 			openAndCloseOthers(to);
 		});
@@ -165,8 +193,11 @@
 	function removeItem(index: number) {
 		if (!$value) return;
 
+		const label = getAccordionLabel($value[index]) || `${index + 1}`;
 		accordionOpenState = accordionOpenState.filter((i) => i !== index.toString());
 		$value = $value.filter((_, i) => i !== index);
+
+		announce(`${at.removed}: ${label}`);
 	}
 
 	function getAccordionLabel(item: ObjectFieldData) {
@@ -394,7 +425,19 @@
 										{/if}
 									</div>
 								</Accordion.Trigger>
-								<Accordion.Content class="space-y-4 rounded-b-md border border-t-0 bg-card/80 p-4">
+								<!--
+									forceMount keeps nested block fields in the DOM when
+									closed (so scroll-to-issue can find them and
+									activateContainingAccordions can auto-expand them).
+									accordion-content.svelte collapses forceMount content
+									with a grid-template-rows transition — animated both
+									ways, and it holds the collapsed state (the one-shot
+									keyframe cannot once the panel stays mounted).
+								-->
+								<Accordion.Content
+									forceMount
+									class="space-y-4 rounded-b-md border border-t-0 bg-card/80 p-4"
+								>
 									{@const itemPath = joinPath(path, index)}
 									<div data-field-path={itemPath}>
 										<FieldRenderer
@@ -460,3 +503,5 @@
 		</div>
 	{/if}
 {/if}
+
+<LiveRegion message={announcement} />

package/dist/admin/components/fields/boolean-field.svelte

@@ -43,6 +43,6 @@
 				</span>
 			{/if}
 		</div>
-		<Switch bind:checked={value} aria-label={label} />
+		<Switch bind:checked={value} aria-label={label} {...props} />
 	</div>
 {/if}

package/dist/admin/components/fields/field-renderer.svelte

@@ -39,7 +39,9 @@
 	const { value } = formFieldProxy(form, path) as { value: import('svelte/store').Writable<any> };
 
 	const fieldsWithNoDescription: FieldType[] = ['boolean', 'object', 'blocks', 'seo', 'shop'];
-	const fieldsWithNoLabel: FieldType[] = ['boolean', 'object', 'blocks', 'seo', 'shop'];
+	// 'slug' renders its own label paired with the Auto toggle (flex header),
+	// so the field-renderer must not duplicate it.
+	const fieldsWithNoLabel: FieldType[] = ['boolean', 'object', 'blocks', 'seo', 'shop', 'slug'];
 
 	const fieldsWithAlternativeDescription: FieldType[] = ['media', 'object', 'blocks'];
 
@@ -102,10 +104,10 @@
 		<Form.FieldErrors />
 	</Form.Fieldset>
 {:else if isTextField(field)}
-	<Form.Field {form} name={path} class="space-y-0">
-		<TextFieldWrapper {field} {form} {path} {...props} />
-		<Form.FieldErrors />
-	</Form.Field>
+	<!-- TextFieldWrapper is self-contained (own Form.Field + Form.FieldErrors).
+	     Wrapping it again here produced a nested form-item and a duplicated
+	     error message (QA 5a #1c). -->
+	<TextFieldWrapper {field} {form} {path} {...props} />
 {:else}
 	<Form.Field {form} name={path}>
 		<Form.Control>
@@ -123,51 +125,56 @@
 
 					{#if field.type === 'media'}
 						{#await import('./media-field.svelte') then { default: MediaField }}
-							<MediaField {field} bind:value={$value} />
+							<MediaField {field} bind:value={$value} {...props} />
 						{/await}
 					{:else if field.type === 'file'}
 						{#await import('./file-field.svelte') then { default: FileField }}
-							<FileField {field} bind:value={$value} />
+							<FileField {field} bind:value={$value} {...props} />
 						{/await}
 					{:else if field.type === 'blocks'}
-						<LazyField loader={() => import('./blocks-field.svelte')} props={{ field, form, path, focusedPath, flashingPath, depth }} skeletonClass="h-20" />
+						<LazyField loader={() => import('./blocks-field.svelte')} props={{ field, form, path, focusedPath, flashingPath, depth, ...props }} skeletonClass="h-20" />
 					{:else if field.type === 'array'}
 						{#await import('./simple-array-field.svelte') then { default: ArrayField }}
-							<ArrayField {field} bind:value={$value} />
+							<ArrayField {field} bind:value={$value} {form} {path} {...props} />
 						{/await}
 					{:else if field.type === 'object'}
-						<LazyField loader={() => import('./object-field.svelte')} props={{ field, form, path, objectFieldType: distributed ? 'distributed' : objectFieldType, focusedPath, flashingPath, depth }} skeletonClass="h-20" />
+						<LazyField loader={() => import('./object-field.svelte')} props={{ field, form, path, objectFieldType: distributed ? 'distributed' : objectFieldType, focusedPath, flashingPath, depth, ...props }} skeletonClass="h-20" />
 					{:else if field.type === 'slug'}
-						<LazyField loader={() => import('./slug-field.svelte')} props={{ field, form, path }} skeletonClass="h-10" />
+						<LazyField loader={() => import('./slug-field.svelte')} props={{ field, form, path, ...props }} skeletonClass="h-10" />
 					{:else if field.type === 'boolean'}
-						<BooleanField {field} bind:value={$value} />
+						<BooleanField {field} bind:value={$value} {...props} />
 					{:else if field.type === 'number'}
-						<NumberField {field} bind:value={$value} />
+						<NumberField {field} bind:value={$value} {...props} />
 					{:else if field.type === 'seo'}
-						<LazyField loader={() => import('./seo-field.svelte')} props={{ field, form, path }} skeletonClass="h-16" />
+						<LazyField loader={() => import('./seo-field.svelte')} props={{ field, form, path, ...props }} skeletonClass="h-16" />
 					{:else if field.type === 'shop'}
-						<LazyField loader={() => import('./shop-field.svelte')} props={{ field }} skeletonClass="h-40" />
+						<LazyField loader={() => import('./shop-field.svelte')} props={{ field, ...props }} skeletonClass="h-40" />
 					{:else if field.type === 'url'}
-						<UrlFieldWrapper {field} {form} {path} />
+						<UrlFieldWrapper {field} {form} {path} {...props} />
 					{:else if field.type === 'relation'}
 						{#await import('./relation-field.svelte') then { default: RelationField }}
-							<RelationField {field} bind:value={$value} />
+							<RelationField {field} bind:value={$value} {...props} />
 						{/await}
 					{:else if field.type === 'date'}
-						<DateField {field} bind:value={$value} />
+						<DateField {field} bind:value={$value} {...props} />
 					{:else if field.type === 'datetime'}
-						<DateTimeField {field} bind:value={$value} />
+						<DateTimeField {field} bind:value={$value} {...props} />
 					{:else if field.type === 'select'}
-						<SelectField {field} bind:value={$value} />
+						<SelectField {field} bind:value={$value} {...props} />
+					{:else if field.type === 'icon'}
+						{#await import('./icon-field.svelte') then { default: IconField }}
+							<IconField {field} bind:value={$value} {...props} />
+						{/await}
 					{:else if field.type === 'custom'}
 						{@const customDef = customFieldDefs.get(field.fieldType)}
 						{#if customDef}
-							<LazyField loader={customDef.component} props={{ field, form, path }} skeletonClass="h-20" />
+							<LazyField loader={customDef.component} props={{ field, form, path, ...props }} skeletonClass="h-20" />
 						{:else}
 							<p>Nieznany custom field: {field.fieldType}</p>
 						{/if}
 					{:else}
-						<p>Nieobsługiwany typ pola: {field.type}</p>
+						<!-- All Field types are handled above; fallback kept as defensive guard for future additions. -->
+						<p>Nieobsługiwany typ pola: {(field as Field).type}</p>
 					{/if}
 				</div>
 			{/snippet}