includio-cms 0.25.0 → 0.27.0

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

@@ -1,18 +1,110 @@
 <script lang="ts">
 	import * as Dialog from '../../../components/ui/dialog/index.js';
 	import { onMount } from 'svelte';
-	import FilePreview from '../media/file-preview.svelte';
-	import { buttonVariants } from '../../../components/ui/button/button.svelte';
-	import MediaLibrary from '../media/media-library.svelte';
+	import Button from '../../../components/ui/button/button.svelte';
 	import type { FileField } from '../../../types/fields.js';
-	import z from 'zod';
+	import type { InterfaceLanguage } from '../../../types/languages.js';
+	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
+	import Plus from '@tabler/icons-svelte/icons/plus';
+	import X from '@tabler/icons-svelte/icons/x';
+	import ChevronLeft from '@tabler/icons-svelte/icons/chevron-left';
+	import ChevronRight from '@tabler/icons-svelte/icons/chevron-right';
+	import AlertTriangle from '@tabler/icons-svelte/icons/alert-triangle';
+	import FileMiniature from '../media/file/file-miniature.svelte';
+	import { getRemotes } from '../../../sveltekit/index.js';
+	import MediaSelector from '../media/media-selector.svelte';
+	import type { MediaFile } from '../../../types/media.js';
+	import { formatFileSize, getFileExtension } from '../../utils/fileDisplay.js';
+
+	const lang: Record<
+		InterfaceLanguage,
+		{
+			selectFile: string;
+			addFile: string;
+			remove: string;
+			change: string;
+			of: string;
+			missingFile: string;
+			removeAria: string;
+		}
+	> = {
+		pl: {
+			selectFile: 'Wybierz plik',
+			addFile: 'Dodaj plik',
+			remove: 'Usuń',
+			change: 'Zmień',
+			of: 'z',
+			missingFile: 'Brakujący plik',
+			removeAria: 'Usuń plik'
+		},
+		en: {
+			selectFile: 'Select file',
+			addFile: 'Add file',
+			remove: 'Remove',
+			change: 'Change',
+			of: 'of',
+			missingFile: 'Missing file',
+			removeAria: 'Remove file'
+		}
+	};
+
+	const interfaceLanguage = useInterfaceLanguage();
+	const remotes = getRemotes();
+
+	let currentIndex = $state(0);
+	let dialogOpen = $state(false);
+
+	function openPicker() {
+		dialogOpen = true;
+	}
 
 	type Props = {
 		field: FileField;
 		value: string | string[] | undefined;
 	};
 
-	let { field, value = $bindable(), ...props }: Props = $props();
+	let { field, value = $bindable() }: Props = $props();
+
+	// Single-file state: fetch MediaFile via a plain fetch inside an $effect instead of
+	// `$derived(remotes.getFileById(value))`. Reason: wrapping the remote query in a
+	// $derived couples its lifecycle to the derivation's refcounting — rapid toggling
+	// of value ('' → id) around dialog unmount triggered "query instance is no longer
+	// active" errors. Wzorzec z media-field.
+	let singleFile = $state<MediaFile | null>(null);
+	let singleFileReady = $state(false);
+	$effect(() => {
+		const v = value;
+		if (typeof v !== 'string' || !v) {
+			singleFile = null;
+			singleFileReady = true;
+			return;
+		}
+		singleFileReady = false;
+		let cancelled = false;
+		(async () => {
+			try {
+				const data = await remotes.getFileById(v);
+				if (!cancelled) {
+					singleFile = data as MediaFile;
+					singleFileReady = true;
+				}
+			} catch {
+				if (!cancelled) {
+					singleFile = null;
+					singleFileReady = true;
+				}
+			}
+		})();
+		return () => {
+			cancelled = true;
+		};
+	});
+
+	const mFilesQuery = $derived(
+		Array.isArray(value) && value.length > 0
+			? remotes.getMediaFiles({ data: { ids: value as string[] } })
+			: null
+	);
 
 	onMount(() => {
 		if (value === undefined) {
@@ -21,33 +113,255 @@
 	});
 </script>
 
-{#if value !== undefined}
-	<Dialog.Root>
-		<Dialog.Trigger type="button" class={buttonVariants({ variant: 'outline' })}
-			>Select File</Dialog.Trigger
-		>
-		<Dialog.Content class="max-h-[80vh] w-[80vw] !max-w-none overflow-y-scroll">
-			<MediaLibrary bind:selected={value} multiple={field.multiple} accept={field.accept} />
-		</Dialog.Content>
-	</Dialog.Root>
+{#snippet filePreview(file: MediaFile)}
+	<div class="aspect-square w-full overflow-hidden rounded-2xl border">
+		<FileMiniature {file} />
+	</div>
+{/snippet}
 
-	<div class="flex flex-wrap gap-2">
-		{#if field.multiple && Array.isArray(value)}
-			{#each value as item}
-				{#if z.string().uuid().safeParse(item).success}
-					<FilePreview
-						id={item}
-						class="aspect-square w-full max-w-[100px] object-cover object-center"
-					/>
+{#snippet missingPlaceholder()}
+	<div
+		class="flex aspect-square w-full flex-col items-center justify-center gap-2 rounded-2xl border-2 border-dashed border-warning/50 bg-warning/5 p-6"
+	>
+		<div class="rounded-full bg-warning/10 p-3">
+			<AlertTriangle class="h-6 w-6 text-warning" />
+		</div>
+		<span class="text-sm text-warning">{lang[interfaceLanguage.current].missingFile}</span>
+	</div>
+{/snippet}
+
+{#snippet listRow(file: MediaFile, onRemove: () => void)}
+	{@const ext = getFileExtension(file.url)}
+	<div class="flex items-center gap-3 rounded-lg border bg-card p-2 shadow-sm">
+		<div class="relative aspect-square w-10 shrink-0 overflow-hidden rounded">
+			<FileMiniature {file} mode="thumb" />
+		</div>
+		<div class="min-w-0 flex-1">
+			<div class="flex items-center gap-1.5 min-w-0">
+				<p class="truncate text-sm font-medium">{file.name}</p>
+				{#if ext}
+					<span class="shrink-0 rounded bg-muted px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground">{ext}</span>
 				{/if}
-			{/each}
-		{:else if typeof value === 'string'}
-			{#if z.string().uuid().safeParse(value).success}
-				<FilePreview
-					id={value}
-					class="aspect-square w-full max-w-[100px] object-cover object-center"
-				/>
-			{/if}
+			</div>
+			<p class="text-xs text-muted-foreground">{formatFileSize(file.size)}</p>
+		</div>
+		{#if !field.required || (Array.isArray(value) && value.length > 1)}
+			<Button
+				variant="ghost"
+				size="icon"
+				class="h-7 w-7 shrink-0 text-muted-foreground hover:text-destructive"
+				aria-label={lang[interfaceLanguage.current].removeAria}
+				onclick={onRemove}
+			>
+				<X class="h-4 w-4" />
+			</Button>
 		{/if}
 	</div>
+{/snippet}
+
+{#snippet listMissingRow(onRemove: () => void)}
+	<div class="flex items-center gap-3 rounded-lg border border-warning/40 bg-warning/5 p-2">
+		<div class="flex aspect-square w-10 shrink-0 items-center justify-center rounded bg-warning/10">
+			<AlertTriangle class="h-4 w-4 text-warning" />
+		</div>
+		<p class="min-w-0 flex-1 truncate text-sm text-warning">{lang[interfaceLanguage.current].missingFile}</p>
+		{#if !field.required || (Array.isArray(value) && value.length > 1)}
+			<Button
+				variant="ghost"
+				size="icon"
+				class="h-7 w-7 shrink-0 text-muted-foreground hover:text-destructive"
+				aria-label={lang[interfaceLanguage.current].removeAria}
+				onclick={onRemove}
+			>
+				<X class="h-4 w-4" />
+			</Button>
+		{/if}
+	</div>
+{/snippet}
+
+{#snippet mediaActions(onRemove: () => void)}
+	<div class="flex items-center justify-between gap-2 mt-1.5">
+		<Button size="sm" variant="secondary" class="h-8" onclick={openPicker}>
+			<Plus class="h-4 w-4" />
+			{lang[interfaceLanguage.current].change}
+		</Button>
+		{#if !field.required}
+			<Button variant="destructive" size="sm" class="h-8" onclick={onRemove}>
+				<X class="h-4 w-4" />
+				{lang[interfaceLanguage.current].remove}
+			</Button>
+		{/if}
+	</div>
+{/snippet}
+
+{#if value !== undefined}
+	{#if field.display === 'list'}
+		<!-- Compact list variant (non-visual files: PDF, audio, raw) -->
+		<div class="space-y-2 max-w-md">
+			{#if typeof value === 'string' && value !== ''}
+				{#if !singleFileReady}
+					<div class="animate-pulse bg-muted h-14 rounded-lg"></div>
+				{:else if singleFile}
+					{@render listRow(singleFile, () => { value = ''; })}
+				{:else}
+					{@render listMissingRow(() => { value = ''; })}
+				{/if}
+			{:else if Array.isArray(value) && value.length > 0}
+				{#if !mFilesQuery?.ready}
+					<div class="animate-pulse bg-muted h-14 rounded-lg"></div>
+				{:else if mFilesQuery?.current}
+					{@const files = mFilesQuery.current}
+					{#each value as id, i (id + '__' + i)}
+						{@const file = files.find((f) => f.id === id)}
+						{#if file}
+							{@render listRow(file, () => {
+								if (Array.isArray(value)) {
+									value = value.filter((_, idx) => idx !== i);
+								}
+							})}
+						{:else}
+							{@render listMissingRow(() => {
+								if (Array.isArray(value)) {
+									value = value.filter((_, idx) => idx !== i);
+								}
+							})}
+						{/if}
+					{/each}
+				{/if}
+			{/if}
+
+			{#if field.multiple || !value || (typeof value === 'string' && value === '') || (Array.isArray(value) && value.length === 0)}
+				<Button variant="outline" size="sm" onclick={openPicker}>
+					<Plus class="h-4 w-4" />
+					{field.multiple && Array.isArray(value) && value.length > 0
+						? lang[interfaceLanguage.current].addFile
+						: lang[interfaceLanguage.current].selectFile}
+				</Button>
+			{:else}
+				<Button variant="outline" size="sm" onclick={openPicker}>
+					<Plus class="h-4 w-4" />
+					{lang[interfaceLanguage.current].change}
+				</Button>
+			{/if}
+		</div>
+	{:else if value && ((typeof value === 'string' && value !== '') || (Array.isArray(value) && value.length > 0))}
+		<div class="max-w-64">
+			{#if typeof value === 'string'}
+				{#if !singleFileReady}
+					<div class="animate-pulse bg-muted w-full aspect-square rounded-2xl"></div>
+				{:else if singleFile}
+					{@render filePreview(singleFile)}
+					{@render mediaActions(() => { value = ''; })}
+				{:else}
+					{@render missingPlaceholder()}
+					{@render mediaActions(() => { value = ''; })}
+				{/if}
+			{:else if Array.isArray(value) && value.length > 0}
+				{@const valueArr = value}
+				{#if !mFilesQuery?.ready}
+					<div class="animate-pulse bg-muted w-full aspect-square rounded-2xl"></div>
+				{:else if mFilesQuery?.current}
+					{@const file = mFilesQuery.current[currentIndex]}
+					{#if file}
+						<div class="relative">
+							{@render filePreview(file)}
+
+							{#if valueArr.length > 1}
+								<div class="absolute inset-x-0 top-1/2 flex -translate-y-1/2 justify-between px-1 pointer-events-none">
+									<button
+										type="button"
+										class="pointer-events-auto flex h-8 w-8 items-center justify-center rounded-full bg-white/80 backdrop-blur shadow-md transition hover:bg-white hover:scale-105 dark:bg-background/80 dark:hover:bg-background"
+										onclick={() => { currentIndex = currentIndex > 0 ? currentIndex - 1 : valueArr.length - 1; }}
+									>
+										<ChevronLeft class="h-5 w-5" />
+									</button>
+									<button
+										type="button"
+										class="pointer-events-auto flex h-8 w-8 items-center justify-center rounded-full bg-white/80 backdrop-blur shadow-md transition hover:bg-white hover:scale-105 dark:bg-background/80 dark:hover:bg-background"
+										onclick={() => { currentIndex = currentIndex < valueArr.length - 1 ? currentIndex + 1 : 0; }}
+									>
+										<ChevronRight class="h-5 w-5" />
+									</button>
+								</div>
+								<div class="absolute top-2 right-2 rounded-full bg-plum-darker/60 px-2 py-0.5 text-xs font-medium text-white backdrop-blur">
+									{currentIndex + 1} / {valueArr.length}
+								</div>
+							{/if}
+						</div>
+						{@render mediaActions(() => {
+							if (Array.isArray(value)) {
+								const next = value.filter((_, i) => i !== currentIndex);
+								value = field.multiple ? next : next[0] ?? '';
+								if (currentIndex >= next.length) currentIndex = Math.max(0, next.length - 1);
+							}
+						})}
+					{:else}
+						<div class="relative">
+							{@render missingPlaceholder()}
+							{#if valueArr.length > 1}
+								<div class="absolute inset-x-0 top-1/2 flex -translate-y-1/2 justify-between px-1 pointer-events-none">
+									<button
+										type="button"
+										class="pointer-events-auto flex h-8 w-8 items-center justify-center rounded-full bg-white/80 backdrop-blur shadow-md transition hover:bg-white hover:scale-105 dark:bg-background/80 dark:hover:bg-background"
+										onclick={() => { currentIndex = currentIndex > 0 ? currentIndex - 1 : valueArr.length - 1; }}
+									>
+										<ChevronLeft class="h-5 w-5" />
+									</button>
+									<button
+										type="button"
+										class="pointer-events-auto flex h-8 w-8 items-center justify-center rounded-full bg-white/80 backdrop-blur shadow-md transition hover:bg-white hover:scale-105 dark:bg-background/80 dark:hover:bg-background"
+										onclick={() => { currentIndex = currentIndex < valueArr.length - 1 ? currentIndex + 1 : 0; }}
+									>
+										<ChevronRight class="h-5 w-5" />
+									</button>
+								</div>
+								<div class="absolute top-2 right-2 rounded-full bg-plum-darker/60 px-2 py-0.5 text-xs font-medium text-white backdrop-blur">
+									{currentIndex + 1} / {valueArr.length}
+								</div>
+							{/if}
+						</div>
+						{@render mediaActions(() => {
+							if (Array.isArray(value)) {
+								const next = value.filter((_, i) => i !== currentIndex);
+								value = field.multiple ? next : next[0] ?? '';
+								if (currentIndex >= next.length) currentIndex = Math.max(0, next.length - 1);
+							}
+						})}
+					{/if}
+				{:else}
+					{@render missingPlaceholder()}
+					{@render mediaActions(() => { value = field.multiple ? [] : ''; })}
+				{/if}
+			{/if}
+		</div>
+	{:else}
+		<button
+			type="button"
+			class="flex aspect-square max-w-64 w-full flex-col items-center justify-center gap-2 rounded-2xl border-2 border-dashed border-border bg-card/80 p-6 transition-colors hover:border-primary/50 hover:bg-card"
+			onclick={openPicker}
+		>
+			<div class="rounded-full bg-muted p-3">
+				<Plus class="h-6 w-6 text-muted-foreground" />
+			</div>
+			<span class="text-sm text-muted-foreground">{lang[interfaceLanguage.current].selectFile}</span>
+		</button>
+	{/if}
+
+	<Dialog.Root bind:open={dialogOpen}>
+		<Dialog.Content
+			fullscreenMobile
+			class="flex h-[85vh] w-full max-w-6xl! flex-col overflow-hidden p-0 sm:max-w-6xl!"
+		>
+			<Dialog.Title class="sr-only">{lang[interfaceLanguage.current].selectFile}</Dialog.Title>
+			<Dialog.Description class="sr-only">{lang[interfaceLanguage.current].selectFile}</Dialog.Description>
+			<MediaSelector
+				bind:selected={value}
+				multiple={field.multiple}
+				accept={field.accept}
+				maxSizeMB={field.maxSizeMB}
+				onConfirm={() => (dialogOpen = false)}
+				onCancel={() => (dialogOpen = false)}
+			/>
+		</Dialog.Content>
+	</Dialog.Root>
 {/if}

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

@@ -0,0 +1,86 @@
+<script lang="ts">
+	import type { IconField } from '../../../types/fields.js';
+	import { resolveIconSet } from '../../state/icon-sets.svelte.js';
+	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
+	import { getLocalizedLabel } from '../../utils/collectionLabel.js';
+	import IconPickerDialog from './icon-picker-dialog.svelte';
+	import Plus from '@lucide/svelte/icons/plus';
+	import X from '@lucide/svelte/icons/x';
+	import HelpCircle from '@lucide/svelte/icons/help-circle';
+
+	type Props = {
+		field: IconField;
+		value: string | undefined;
+	};
+
+	let { field, value = $bindable(), ...props }: Props = $props();
+
+	const interfaceLanguage = useInterfaceLanguage();
+	const iconSet = $derived(resolveIconSet(field.set));
+	const iconDef = $derived(value && iconSet ? iconSet.icons[value] : undefined);
+	const isMissing = $derived(!!value && !!iconSet && !iconDef);
+	const label = $derived.by(() =>
+		iconDef ? getLocalizedLabel(iconDef.label, interfaceLanguage.current) : (value ?? '')
+	);
+
+	let dialogOpen = $state(false);
+
+	function clear() {
+		value = '';
+	}
+	function openDialog() {
+		dialogOpen = true;
+	}
+	function onConfirm(newValue: string) {
+		value = newValue;
+		dialogOpen = false;
+	}
+</script>
+
+{#if !iconSet}
+	<p class="text-sm text-destructive">
+		Brak zarejestrowanego zestawu ikon. Dodaj <code>IconSetPlugin</code> do
+		<code>plugins:</code> w cms.config i przekaż przez <code>buildIconSetMap(...)</code> do AdminLayout.
+	</p>
+{:else}
+	<div class="relative inline-block">
+		<button
+			type="button"
+			onclick={openDialog}
+			class="flex h-24 w-24 flex-col items-center justify-center gap-1.5 rounded-lg border bg-muted/30 transition-colors hover:border-primary hover:bg-muted/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+			aria-label={value ? `Zmień ikonę: ${label}` : 'Wybierz ikonę'}
+			{...props}
+		>
+			{#if !value}
+				<Plus class="h-7 w-7 text-muted-foreground" />
+				<span class="text-xs text-muted-foreground">Wybierz ikonę</span>
+			{:else if isMissing}
+				<HelpCircle class="h-7 w-7 text-warning" />
+				<span class="line-clamp-1 px-1 text-xs text-muted-foreground">{value}</span>
+			{:else if iconDef}
+				{@const Comp = iconDef.component}
+				<Comp size={32} />
+				<span class="line-clamp-1 px-1 text-xs">{label}</span>
+			{/if}
+		</button>
+
+		{#if value}
+			<button
+				type="button"
+				onclick={clear}
+				class="absolute -right-2 -top-2 rounded-full border bg-background p-1 text-muted-foreground shadow-sm transition-colors hover:text-destructive"
+				aria-label="Wyczyść ikonę"
+			>
+				<X class="h-3 w-3" />
+			</button>
+		{/if}
+	</div>
+
+	{#if isMissing}
+		<p class="mt-2 text-sm text-warning">
+			Ikona <code>{value}</code> nie jest już dostępna w bibliotece. Wybierz inną lub usuń.
+		</p>
+	{/if}
+
+	<IconPickerDialog bind:open={dialogOpen} {iconSet} initialValue={value} {onConfirm} />
+{/if}

package/dist/admin/components/fields/icon-field.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { IconField } from '../../../types/fields.js';
+type Props = {
+    field: IconField;
+    value: string | undefined;
+};
+declare const IconField: import("svelte").Component<Props, {}, "value">;
+type IconField = ReturnType<typeof IconField>;
+export default IconField;

package/dist/admin/components/fields/icon-picker-dialog.svelte

@@ -0,0 +1,174 @@
+<script lang="ts">
+	import * as Dialog from '../../../components/ui/dialog/index.js';
+	import { Input } from '../../../components/ui/input/index.js';
+	import { Button } from '../../../components/ui/button/index.js';
+	import { LiveRegion } from '../../../components/ui/live-region/index.js';
+	import type { IconSetPlugin } from '../../../types/plugins.js';
+	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
+	import { getLocalizedLabel } from '../../utils/collectionLabel.js';
+	import type { InterfaceLanguage } from '../../../types/languages.js';
+	import type { Component } from 'svelte';
+
+	type Props = {
+		open: boolean;
+		iconSet: IconSetPlugin;
+		initialValue: string | undefined;
+		onConfirm: (value: string) => void;
+	};
+
+	let { open = $bindable(), iconSet, initialValue, onConfirm }: Props = $props();
+
+	const lang: Record<
+		InterfaceLanguage,
+		{
+			title: string;
+			search: string;
+			cancel: string;
+			confirm: string;
+			noResults: string;
+			resultsCount: (n: number) => string;
+			close: string;
+		}
+	> = {
+		en: {
+			title: 'Select icon',
+			search: 'Search icons...',
+			cancel: 'Cancel',
+			confirm: 'OK',
+			noResults: 'No icons match',
+			resultsCount: (n) => `${n} icons`,
+			close: 'Close'
+		},
+		pl: {
+			title: 'Wybierz ikonę',
+			search: 'Szukaj ikon...',
+			cancel: 'Anuluj',
+			confirm: 'OK',
+			noResults: 'Brak pasujących ikon',
+			resultsCount: (n) => `Wyniki: ${n}`,
+			close: 'Zamknij'
+		}
+	};
+
+	const interfaceLanguage = useInterfaceLanguage();
+	const t = $derived(lang[interfaceLanguage.current]);
+
+	let searchValue = $state('');
+	let selected = $state<string>('');
+	let wasOpen = false;
+
+	// Re-sync gdy dialog się otwiera ze świeżą wartością początkową.
+	// Wzorzec "edge-trigger": resetujemy TYLKO na przejściu closed→open,
+	// żeby kliknięcia użytkownika w grid nie były nadpisywane przez re-run efektu.
+	$effect(() => {
+		if (open && !wasOpen) {
+			selected = initialValue ?? '';
+			searchValue = '';
+		}
+		wasOpen = open;
+	});
+
+	type IconEntry = {
+		key: string;
+		label: string;
+		keywords: string[];
+		component: Component;
+	};
+
+	const allEntries = $derived<IconEntry[]>(
+		Object.entries(iconSet.icons).map(([key, def]) => ({
+			key,
+			label: getLocalizedLabel(def.label, interfaceLanguage.current),
+			keywords: def.keywords ?? [],
+			component: def.component
+		}))
+	);
+
+	const filtered = $derived.by(() => {
+		const q = searchValue.trim().toLowerCase();
+		if (!q) return allEntries;
+		return allEntries.filter(
+			(e) =>
+				e.key.toLowerCase().includes(q) ||
+				e.label.toLowerCase().includes(q) ||
+				e.keywords.some((k) => k.toLowerCase().includes(q))
+		);
+	});
+
+	function confirm() {
+		if (selected) onConfirm(selected);
+	}
+	function cancel() {
+		open = false;
+	}
+	function select(key: string) {
+		selected = key;
+	}
+	function handleOpenChange(next: boolean) {
+		open = next;
+	}
+</script>
+
+<Dialog.Root bind:open onOpenChange={handleOpenChange}>
+	<Dialog.Content class="flex max-h-[85vh] flex-col gap-0 p-0 sm:max-w-2xl">
+		<Dialog.Header class="border-b px-4 py-3">
+			<Dialog.Title class="text-base font-semibold">{t.title}</Dialog.Title>
+			<Dialog.Description class="sr-only">{t.title}</Dialog.Description>
+		</Dialog.Header>
+
+		<div class="border-b px-4 py-2">
+			<Input
+				type="search"
+				placeholder={t.search}
+				bind:value={searchValue}
+				autofocus
+				class="h-9"
+				aria-label={t.search}
+			/>
+		</div>
+
+		<div class="flex-1 overflow-y-auto p-4">
+			{#if filtered.length === 0}
+				<p class="text-center text-sm text-muted-foreground py-8">{t.noResults}</p>
+			{:else}
+				<div
+					role="listbox"
+					aria-label={t.title}
+					class="grid grid-cols-3 gap-2 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6"
+				>
+					{#each filtered as entry (entry.key)}
+						{@const isSelected = selected === entry.key}
+						{@const Comp = entry.component}
+						<button
+							type="button"
+							role="option"
+							aria-selected={isSelected}
+							onclick={() => select(entry.key)}
+							ondblclick={() => {
+								select(entry.key);
+								confirm();
+							}}
+							class={[
+								'flex h-20 flex-col items-center justify-center gap-1 rounded-md border p-1.5 transition-colors',
+								'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+								isSelected
+									? 'border-primary bg-primary/10'
+									: 'border-muted bg-background hover:bg-muted/50'
+							].join(' ')}
+						>
+							<Comp size={24} />
+							<span class="line-clamp-1 w-full text-center text-[10px]">{entry.label}</span>
+						</button>
+					{/each}
+				</div>
+			{/if}
+		</div>
+
+		<Dialog.Footer class="border-t px-4 py-3 sm:justify-end">
+			<Button type="button" variant="outline" onclick={cancel}>{t.cancel}</Button>
+			<Button type="button" onclick={confirm} disabled={!selected}>{t.confirm}</Button>
+		</Dialog.Footer>
+
+		<LiveRegion message={t.resultsCount(filtered.length)} />
+	</Dialog.Content>
+</Dialog.Root>

package/dist/admin/components/fields/icon-picker-dialog.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { IconSetPlugin } from '../../../types/plugins.js';
+import type { Component } from 'svelte';
+type Props = {
+    open: boolean;
+    iconSet: IconSetPlugin;
+    initialValue: string | undefined;
+    onConfirm: (value: string) => void;
+};
+declare const IconPickerDialog: Component<Props, {}, "open">;
+type IconPickerDialog = ReturnType<typeof IconPickerDialog>;
+export default IconPickerDialog;