includio-cms 0.25.0 → 0.27.0

package/dist/admin/components/media/file/file-preview.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
 	import Button from '../../../../components/ui/button/button.svelte';
-	import type { MediaFile } from '../../../../types/media.js';
+	import type { MediaFile, MediaFileType } from '../../../../types/media.js';
+	import type { InterfaceLanguage } from '../../../../types/languages.js';
+	import { useInterfaceLanguage } from '../../../state/interface-language.svelte.js';
 	import GripVertical from '@tabler/icons-svelte/icons/grip-vertical';
 	import FileMiniature from './file-miniature.svelte';
 	import X from '@tabler/icons-svelte/icons/x';
@@ -11,6 +13,112 @@
 	import Textarea from '../../../../components/ui/textarea/textarea.svelte';
 	import { toast } from 'svelte-sonner';
 	import Label from '../../../../components/ui/label/label.svelte';
+	import { errorMessages } from '../../../i18n/errors.js';
+	import { formatFileSize, getFileExtension } from '../../../utils/fileDisplay.js';
+
+	type AltCopy = {
+		title: string;
+		label: string;
+		placeholder: string;
+		help: string;
+		editAria: string;
+	};
+
+	const altCopy: Record<InterfaceLanguage, Record<MediaFileType, AltCopy>> = {
+		pl: {
+			image: {
+				title: 'Edytuj tekst alternatywny',
+				label: 'Tekst alternatywny',
+				placeholder: 'Opisz co przedstawia obraz…',
+				help: 'Tekst alternatywny opisuje obraz dla osób niewidomych i wyszukiwarek.',
+				editAria: 'Edytuj tekst alternatywny'
+			},
+			video: {
+				title: 'Opis wideo',
+				label: 'Opis wideo',
+				placeholder: 'Opisz zawartość wideo…',
+				help: 'Opis pomaga osobom z niepełnosprawnością wzroku zrozumieć zawartość wideo.',
+				editAria: 'Edytuj opis wideo'
+			},
+			audio: {
+				title: 'Opis nagrania',
+				label: 'Opis nagrania',
+				placeholder: 'Opisz zawartość nagrania…',
+				help: 'Opis pomaga osobom z niepełnosprawnością słuchu lub wzroku zrozumieć nagranie.',
+				editAria: 'Edytuj opis nagrania'
+			},
+			pdf: {
+				title: 'Opis dokumentu',
+				label: 'Opis dokumentu',
+				placeholder: 'Krótko o czym jest dokument…',
+				help: 'Opis pomaga osobom korzystającym z czytników ekranu zorientować się w zawartości pliku.',
+				editAria: 'Edytuj opis dokumentu'
+			},
+			other: {
+				title: 'Opis pliku',
+				label: 'Opis pliku',
+				placeholder: 'Krótki opis zawartości pliku…',
+				help: 'Opis pomaga osobom korzystającym z czytników ekranu zorientować się w zawartości pliku.',
+				editAria: 'Edytuj opis pliku'
+			}
+		},
+		en: {
+			image: {
+				title: 'Edit alt text',
+				label: 'Alt text',
+				placeholder: 'Describe what the image shows…',
+				help: 'Alt text describes the image for screen reader users and search engines.',
+				editAria: 'Edit alt text'
+			},
+			video: {
+				title: 'Edit video description',
+				label: 'Video description',
+				placeholder: 'Describe the video content…',
+				help: 'The description helps users with visual impairments understand the video.',
+				editAria: 'Edit video description'
+			},
+			audio: {
+				title: 'Edit audio description',
+				label: 'Audio description',
+				placeholder: 'Describe the audio content…',
+				help: 'The description helps users with hearing or visual impairments understand the audio.',
+				editAria: 'Edit audio description'
+			},
+			pdf: {
+				title: 'Edit document description',
+				label: 'Document description',
+				placeholder: 'Briefly describe the document…',
+				help: 'The description helps screen reader users understand the file content.',
+				editAria: 'Edit document description'
+			},
+			other: {
+				title: 'Edit file description',
+				label: 'File description',
+				placeholder: 'Briefly describe the file content…',
+				help: 'The description helps screen reader users understand the file content.',
+				editAria: 'Edit file description'
+			}
+		}
+	};
+
+	const ui: Record<InterfaceLanguage, { cancel: string; save: string; saving: string; saved: string; saveError: string; fileMissing: string }> = {
+		pl: {
+			cancel: 'Anuluj',
+			save: 'Zapisz',
+			saving: 'Zapisuję…',
+			saved: 'Opis zapisany',
+			saveError: errorMessages.server.saveFailed.pl,
+			fileMissing: 'Plik nie istnieje.'
+		},
+		en: {
+			cancel: 'Cancel',
+			save: 'Save',
+			saving: 'Saving…',
+			saved: 'Description saved',
+			saveError: errorMessages.server.saveFailed.en,
+			fileMissing: 'File does not exist.'
+		}
+	};
 
 	type Props = {
 		fileId: string;
@@ -20,6 +128,7 @@
 
 	let { fileId, index, onDelete }: Props = $props();
 
+	const interfaceLanguage = useInterfaceLanguage();
 	const remotes = getRemotes();
 	let lightboxOpen = $state(false);
 	let altDialogOpen = $state(false);
@@ -28,13 +137,14 @@
 
 	async function saveAlt(file: MediaFile) {
 		saving = true;
+		const t = ui[interfaceLanguage.current];
 		try {
 			await remotes.setMediaFileAlt({ fileId: file.id, alt: altValue || null });
 			file.alt = altValue;
 			altDialogOpen = false;
-			toast.success('Alt text zapisany');
+			toast.success(t.saved);
 		} catch {
-			toast.error('Błąd zapisu');
+			toast.error(t.saveError);
 		}
 		saving = false;
 	}
@@ -44,6 +154,9 @@
 
 {#if query.ready && query.current}
 	{@const file = query.current}
+	{@const copy = altCopy[interfaceLanguage.current][file.type]}
+	{@const t = ui[interfaceLanguage.current]}
+	{@const ext = getFileExtension(file.url)}
 	<div class="group flex items-center gap-3 rounded-xl border bg-card p-2 shadow-sm transition-all hover:-translate-y-0.5 hover:shadow-md">
 		<!-- Miniaturka z lightbox -->
 		<button
@@ -55,12 +168,16 @@
 		</button>
 
 		<div class="min-w-0 flex-1">
-			<div class="flex items-center gap-1">
+			<div class="flex items-center gap-1.5">
 				<p class="truncate text-sm font-medium flex-1">{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}
 				<Button
 					variant="ghost"
 					size="icon"
 					class="h-6 w-6 shrink-0"
+					aria-label={copy.editAria}
 					onclick={() => {
 						altValue = file.alt || '';
 						altDialogOpen = true;
@@ -69,9 +186,7 @@
 					<Pencil class="h-3 w-3" />
 				</Button>
 			</div>
-			{#if file.size}
-				<p class="text-xs text-muted-foreground">{(file.size / 1024).toFixed(1)} KB</p>
-			{/if}
+			<p class="text-xs text-muted-foreground">{formatFileSize(file.size)}</p>
 			{#if file.alt}
 				<p class="text-xs text-muted-foreground truncate" title={file.alt}>{file.alt}</p>
 			{/if}
@@ -104,11 +219,11 @@
 		</Dialog.Root>
 	{/if}
 
-	<!-- Alt text edit dialog -->
+	<!-- Alt / description edit dialog (copy per file type) -->
 	<Dialog.Root bind:open={altDialogOpen}>
 		<Dialog.Content class="max-w-lg">
 			<Dialog.Header>
-				<Dialog.Title>Edytuj tekst alternatywny</Dialog.Title>
+				<Dialog.Title>{copy.title}</Dialog.Title>
 			</Dialog.Header>
 			<div class="space-y-4 py-4">
 				{#if file.type === 'image'}
@@ -121,28 +236,26 @@
 					</div>
 				{/if}
 				<div class="space-y-2">
-					<Label for="alt-text">Tekst alternatywny</Label>
+					<Label for="alt-text">{copy.label}</Label>
 					<Textarea
 						id="alt-text"
 						bind:value={altValue}
-						placeholder="Opisz zawartość obrazu..."
+						placeholder={copy.placeholder}
 						class="min-h-[120px] resize-none"
 					/>
-					<p class="text-xs text-muted-foreground">
-						Tekst alternatywny opisuje obraz dla osób niewidomych i wyszukiwarek.
-					</p>
+					<p class="text-xs text-muted-foreground">{copy.help}</p>
 				</div>
 			</div>
 			<Dialog.Footer>
-				<Button variant="outline" onclick={() => altDialogOpen = false}>Anuluj</Button>
+				<Button variant="outline" onclick={() => altDialogOpen = false}>{t.cancel}</Button>
 				<Button onclick={() => saveAlt(file)} disabled={saving}>
-					{saving ? 'Zapisuję...' : 'Zapisz'}
+					{saving ? t.saving : t.save}
 				</Button>
 			</Dialog.Footer>
 		</Dialog.Content>
 	</Dialog.Root>
 {:else if query.ready}
-	<p class="text-sm text-muted-foreground">Plik nie istnieje.</p>
+	<p class="text-sm text-muted-foreground">{ui[interfaceLanguage.current].fileMissing}</p>
 {/if}
 
 <style>

package/dist/admin/components/media/file-upload.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { getRemotes } from '../../context/remotes.js';
 	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
+	import { errorMessages } from '../../i18n/errors.js';
 	import type { InterfaceLanguage } from '../../../types/languages.js';
 	import { toast } from 'svelte-sonner';
 	import Upload from '@tabler/icons-svelte/icons/upload';
@@ -27,8 +28,8 @@
 			dropHint: 'Przeciągnij pliki tutaj',
 			uploading: 'Wysyłanie...',
 			uploadComplete: 'Ukończono',
-			fileTooLarge: (maxMB) => `Plik za duży (max ${maxMB} MB)`,
-			uploadError: 'Błąd przesyłania',
+			fileTooLarge: (maxMB) => errorMessages.upload.fileTooLarge(maxMB).pl,
+			uploadError: errorMessages.server.uploadFailed.pl,
 			skippedFiles: (count) => `Pominięto ${count} plik(ów) przekraczających limit`
 		},
 		en: {
@@ -37,8 +38,8 @@
 			dropHint: 'Drag files here',
 			uploading: 'Uploading...',
 			uploadComplete: 'Complete',
-			fileTooLarge: (maxMB) => `File too large (max ${maxMB} MB)`,
-			uploadError: 'Upload error',
+			fileTooLarge: (maxMB) => errorMessages.upload.fileTooLarge(maxMB).en,
+			uploadError: errorMessages.server.uploadFailed.en,
 			skippedFiles: (count) => `Skipped ${count} file(s) exceeding the limit`
 		}
 	};
@@ -48,21 +49,27 @@
 		onUpload?: () => void;
 		dropZoneRef?: HTMLElement | null;
 		tagIds?: string[];
+		maxSizeMB?: number;
 	};
 
-	let { accept, onUpload, dropZoneRef = $bindable(null), tagIds }: Props =
+	let { accept, onUpload, dropZoneRef = $bindable(null), tagIds, maxSizeMB }: Props =
 		$props();
 
 	let inputElement: HTMLInputElement;
 	let isDragging = $state(false);
 	let uploadProgress = $state<{ name: string; progress: number; complete: boolean; error?: string }[]>([]);
-	let maxUploadSize = $state<number>(50 * 1024 * 1024);
+	let serverMaxUploadSize = $state<number>(50 * 1024 * 1024);
+	const maxUploadSize = $derived(
+		maxSizeMB !== undefined
+			? Math.min(serverMaxUploadSize, maxSizeMB * 1024 * 1024)
+			: serverMaxUploadSize
+	);
 
 	$effect(() => {
 		fetch('/admin/api/upload-limit')
 			.then((r) => r.json())
 			.then((data) => {
-				if (data.maxUploadSize) maxUploadSize = data.maxUploadSize;
+				if (data.maxUploadSize) serverMaxUploadSize = data.maxUploadSize;
 			})
 			.catch(() => {});
 	});
@@ -231,6 +238,8 @@
 	{accept}
 	onchange={handleUpload}
 	data-testid="file-input"
+	aria-label={lang[interfaceLanguage.current].addFiles}
+	tabindex="-1"
 />
 
 <!-- Drag overlay -->

package/dist/admin/components/media/file-upload.svelte.d.ts

@@ -3,6 +3,7 @@ type Props = {
     onUpload?: () => void;
     dropZoneRef?: HTMLElement | null;
     tagIds?: string[];
+    maxSizeMB?: number;
 };
 declare const FileUpload: import("svelte").Component<Props, {}, "dropZoneRef">;
 type FileUpload = ReturnType<typeof FileUpload>;

package/dist/admin/components/media/files-list.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { getMediaSort } from '../../state/media-sort.svelte.js';
-	import type { MediaFile } from '../../../types/media.js';
+	import type { MediaFile, MediaFileType } from '../../../types/media.js';
 	import FileMiniature from './file/file-miniature.svelte';
 	import { flip } from 'svelte/animate';
 	import Check from '@tabler/icons-svelte/icons/check';
@@ -11,11 +11,43 @@
 	import File from '@tabler/icons-svelte/icons/file';
 	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
 	import type { InterfaceLanguage } from '../../../types/languages.js';
+	import { formatFileSize, getFileExtension } from '../../utils/fileDisplay.js';
+	import { formatRelativeDate } from '../../utils/formatters.js';
 
 	const interfaceLanguage = useInterfaceLanguage();
-	const filesLang: Record<InterfaceLanguage, { noFiles: string; uploadOrFilter: string; tags: string }> = {
-		pl: { noFiles: 'Brak plików', uploadOrFilter: 'Prześlij pliki lub zmień filtry', tags: 'Tagi' },
-		en: { noFiles: 'No files', uploadOrFilter: 'Upload files or change filters', tags: 'Tags' }
+	const filesLang: Record<
+		InterfaceLanguage,
+		{
+			noFiles: string;
+			uploadOrFilter: string;
+			tags: string;
+			typeImage: string;
+			typeVideo: string;
+			typeAudio: string;
+			typePdf: string;
+			typeOther: string;
+		}
+	> = {
+		pl: {
+			noFiles: 'Brak plików',
+			uploadOrFilter: 'Prześlij pliki lub zmień filtry',
+			tags: 'Tagi',
+			typeImage: 'Obraz',
+			typeVideo: 'Wideo',
+			typeAudio: 'Audio',
+			typePdf: 'PDF',
+			typeOther: 'Inne'
+		},
+		en: {
+			noFiles: 'No files',
+			uploadOrFilter: 'Upload files or change filters',
+			tags: 'Tags',
+			typeImage: 'Image',
+			typeVideo: 'Video',
+			typeAudio: 'Audio',
+			typePdf: 'PDF',
+			typeOther: 'Other'
+		}
 	};
 	const ft = $derived(filesLang[interfaceLanguage.current]);
 
@@ -25,9 +57,17 @@
 		onSelect: (file: MediaFile, event?: MouseEvent) => void;
 		onRangeSelect?: (fileIds: string[]) => void;
 		selectionMode?: boolean;
+		viewMode?: 'grid' | 'list';
 	};
 
-	let { files, onSelect, selected, selectionMode = false, onRangeSelect }: Props = $props();
+	let {
+		files,
+		onSelect,
+		selected,
+		selectionMode = false,
+		onRangeSelect,
+		viewMode = 'grid'
+	}: Props = $props();
 
 	let lastClickedIndex = $state<number>(-1);
 
@@ -55,15 +95,6 @@
 		}
 	});
 
-	function formatFileSize(bytes: number): string {
-		if (!bytes) return '';
-		const units = ['B', 'KB', 'MB', 'GB'];
-		const k = 1024;
-		const i = Math.floor(Math.log(bytes) / Math.log(k));
-		const size = bytes / Math.pow(k, i);
-		return `${size.toFixed(i > 0 ? 1 : 0)} ${units[i]}`;
-	}
-
 	function getTypeIcon(type: string) {
 		switch (type) {
 			case 'image': return Photo;
@@ -74,6 +105,16 @@
 		}
 	}
 
+	function getTypeLabel(type: MediaFileType): string {
+		switch (type) {
+			case 'image': return ft.typeImage;
+			case 'video': return ft.typeVideo;
+			case 'audio': return ft.typeAudio;
+			case 'pdf': return ft.typePdf;
+			default: return ft.typeOther;
+		}
+	}
+
 	function handleClick(file: MediaFile, event: MouseEvent, index: number) {
 		if (selectionMode && event.shiftKey && lastClickedIndex >= 0 && onRangeSelect) {
 			const start = Math.min(lastClickedIndex, index);
@@ -110,64 +151,123 @@
 	{#each sortedFiles as file, i (file.id)}
 		{@const sel = isSelected(file.id)}
 		{@const TypeIcon = getTypeIcon(file.type)}
+		{@const ext = getFileExtension(file.url)}
 		<div
 			animate:flip={{ duration: 300 }}
-			class="file-card ml-fade-up cursor-pointer overflow-hidden rounded-xl border bg-card transition-all outline-none select-none
-				{sel ? 'border-primary ring-2 ring-primary' : 'border-border hover:border-lavender hover:shadow-md'}
-			"
+			class={viewMode === 'list'
+				? `ml-fade-up flex cursor-pointer items-center gap-3 rounded-lg border bg-card px-3 py-2 transition-all outline-none select-none ${sel ? 'border-primary ring-2 ring-primary' : 'border-border hover:border-lavender hover:shadow-sm'}`
+				: `file-card ml-fade-up cursor-pointer overflow-hidden rounded-xl border bg-card transition-all outline-none select-none ${sel ? 'border-primary ring-2 ring-primary' : 'border-border hover:border-lavender hover:shadow-md'}`}
 			role="option"
 			aria-selected={sel}
 			tabindex="0"
 			onclick={(e) => handleClick(file, e, i)}
 			onkeydown={(e) => handleKeydown(e, file, i)}
 		>
-			<!-- Thumb area -->
-			<div class="relative h-[120px] overflow-hidden ml-checkered-bg">
-				<FileMiniature {file} mode="thumb" />
-
-				<!-- Type badge (frosted glass, top-left) -->
-				<div class="absolute top-1.5 left-1.5 z-10 inline-flex items-center gap-1 rounded-full bg-white/90 backdrop-blur-sm px-1.5 py-0.5 text-[10px] font-semibold text-muted-foreground shadow-sm">
-					<TypeIcon class="h-3 w-3" />
-					<span class="sr-only">{file.type}</span>
+			{#if viewMode === 'list'}
+				<!-- Thumb 40×40 (relative for ml-file-thumb absolute children) -->
+				<div class="relative h-10 w-10 shrink-0 overflow-hidden rounded ml-checkered-bg">
+					<FileMiniature {file} mode="thumb" />
 				</div>
 
-					<!-- Selection indicator (top-right) -->
+				<!-- Name + type/ext -->
+				<div class="min-w-0 flex-1">
+					<div class="flex items-center gap-1.5">
+						<span class="truncate text-sm font-semibold text-foreground">{file.name}</span>
+						{#if ext}
+							<span class="shrink-0 rounded bg-muted px-1 text-[10px] font-semibold text-muted-foreground">{ext}</span>
+						{/if}
+					</div>
+					<div class="flex items-center gap-1.5 text-[11px] text-text-light">
+						<TypeIcon class="h-3 w-3" />
+						<span>{getTypeLabel(file.type)}</span>
+						{#if file.width && file.height}
+							<span aria-hidden="true">·</span>
+							<span>{file.width}×{file.height}</span>
+						{/if}
+					</div>
+				</div>
+
+				<!-- Size -->
+				{#if file.size}
+					<span class="shrink-0 text-[11px] font-medium text-text-light tabular-nums">{formatFileSize(file.size)}</span>
+				{/if}
+
+				<!-- Date -->
+				<span class="shrink-0 text-[11px] text-text-light">{formatRelativeDate(file.createdAt, interfaceLanguage.current)}</span>
+
+				<!-- Tags -->
+				{#if file.tags && file.tags.length > 0}
+					<span class="flex shrink-0 items-center gap-0.5" role="list" aria-label={ft.tags}>
+						{#each file.tags as tag (tag.id)}
+							<span
+								class="h-2 w-2 rounded-full"
+								style="background-color: {tag.color}"
+								role="listitem"
+								aria-label={tag.name}
+							></span>
+						{/each}
+					</span>
+				{/if}
+
+				<!-- Selection indicator -->
 				{#if selectionMode}
-					<div class="absolute top-1.5 right-1.5 z-10 flex h-[22px] w-[22px] items-center justify-center rounded-md border-2 transition-colors
-						{sel ? 'border-primary bg-primary' : 'border-white/80 bg-white/50 backdrop-blur-sm'}
+					<div class="flex h-[22px] w-[22px] shrink-0 items-center justify-center rounded-md border-2 transition-colors
+						{sel ? 'border-primary bg-primary' : 'border-border bg-card'}
 					">
 						{#if sel}
 							<Check class="h-3.5 w-3.5 text-primary-foreground" />
 						{/if}
 					</div>
-				{:else}
-					<div class="ml-file-check {sel ? 'visible' : ''}">
-						<Check class="h-3 w-3 text-primary-foreground" />
-					</div>
 				{/if}
-			</div>
-
-			<!-- File info -->
-			<div class="px-2.5 py-2">
-				<div class="truncate text-xs font-semibold leading-snug text-foreground">{file.name}</div>
-				<div class="flex items-center gap-1">
-					{#if file.size}
-						<span class="text-[11px] font-medium text-text-light">{formatFileSize(file.size)}</span>
-					{/if}
-					{#if file.tags && file.tags.length > 0}
-						<span class="flex items-center gap-0.5 ml-auto" role="list" aria-label={ft.tags}>
-							{#each file.tags as tag (tag.id)}
-								<span
-									class="h-2 w-2 rounded-full"
-									style="background-color: {tag.color}"
-									role="listitem"
-									aria-label={tag.name}
-								></span>
-							{/each}
-						</span>
+			{:else}
+				<!-- Thumb area -->
+				<div class="relative h-[120px] overflow-hidden ml-checkered-bg">
+					<FileMiniature {file} mode="thumb" />
+
+					<!-- Type badge (frosted glass, top-left) -->
+					<div class="absolute top-1.5 left-1.5 z-10 inline-flex items-center gap-1 rounded-full bg-white/90 backdrop-blur-sm px-1.5 py-0.5 text-[10px] font-semibold text-muted-foreground shadow-sm">
+						<TypeIcon class="h-3 w-3" />
+						<span class="sr-only">{file.type}</span>
+					</div>
+
+						<!-- Selection indicator (top-right) -->
+					{#if selectionMode}
+						<div class="absolute top-1.5 right-1.5 z-10 flex h-[22px] w-[22px] items-center justify-center rounded-md border-2 transition-colors
+							{sel ? 'border-primary bg-primary' : 'border-white/80 bg-white/50 backdrop-blur-sm'}
+						">
+							{#if sel}
+								<Check class="h-3.5 w-3.5 text-primary-foreground" />
+							{/if}
+						</div>
+					{:else}
+						<div class="ml-file-check {sel ? 'visible' : ''}">
+							<Check class="h-3 w-3 text-primary-foreground" />
+						</div>
 					{/if}
 				</div>
-			</div>
+
+				<!-- File info -->
+				<div class="px-2.5 py-2">
+					<div class="truncate text-xs font-semibold leading-snug text-foreground">{file.name}</div>
+					<div class="flex items-center gap-1">
+						{#if file.size}
+							<span class="text-[11px] font-medium text-text-light">{formatFileSize(file.size)}</span>
+						{/if}
+						{#if file.tags && file.tags.length > 0}
+							<span class="flex items-center gap-0.5 ml-auto" role="list" aria-label={ft.tags}>
+								{#each file.tags as tag (tag.id)}
+									<span
+										class="h-2 w-2 rounded-full"
+										style="background-color: {tag.color}"
+										role="listitem"
+										aria-label={tag.name}
+									></span>
+								{/each}
+							</span>
+						{/if}
+					</div>
+				</div>
+			{/if}
 		</div>
 	{/each}
 {/if}

package/dist/admin/components/media/files-list.svelte.d.ts

@@ -5,6 +5,7 @@ type Props = {
     onSelect: (file: MediaFile, event?: MouseEvent) => void;
     onRangeSelect?: (fileIds: string[]) => void;
     selectionMode?: boolean;
+    viewMode?: 'grid' | 'list';
 };
 declare const FilesList: import("svelte").Component<Props, {}, "">;
 type FilesList = ReturnType<typeof FilesList>;