includio-cms 0.25.0 → 0.26.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/media-field.svelte

@@ -332,7 +332,12 @@
 	{/if}
 
 	<Dialog.Root bind:open={dialogOpen}>
-		<Dialog.Content class="h-[85vh] w-full max-w-6xl! sm:max-w-6xl! overflow-hidden p-0 flex flex-col">
+		<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].selectMedia}</Dialog.Title>
+			<Dialog.Description class="sr-only">{lang[interfaceLanguage.current].selectMedia}</Dialog.Description>
 			<MediaSelector
 				bind:selected={value}
 				multiple={field.multiple}
@@ -345,7 +350,16 @@
 
 	<!-- Lightbox for images -->
 	<Dialog.Root bind:open={lightboxOpen}>
-		<Dialog.Content class="max-w-[90vw] max-h-[90vh] p-2 bg-black/95 border-none">
+		<Dialog.Content
+			fullscreenMobile
+			class="max-h-[90vh] max-w-[90vw]! border-none bg-black/95 p-2"
+		>
+			<Dialog.Title class="sr-only">
+				{lightboxFile?.alt || lightboxFile?.name || ''}
+			</Dialog.Title>
+			<Dialog.Description class="sr-only">
+				{lightboxFile?.alt || lightboxFile?.name || ''}
+			</Dialog.Description>
 			{#if lightboxFile}
 				<div class="checkered-lightbox flex items-center justify-center">
 					<img

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

@@ -15,11 +15,18 @@
 
 	const interfaceLanguage = useInterfaceLanguage();
 
+	const clearLabel: Record<string, string> = {
+		pl: 'Wyczyść wybór',
+		en: 'Clear selection'
+	};
+
 	onMount(() => {
 		if (value === undefined) {
 			value = field.defaultValue ?? '';
 		}
 	});
+
+	const canClear = $derived(!field.required && typeof value === 'string' && value !== '');
 </script>
 
 {#if value !== undefined}
@@ -35,4 +42,19 @@
 			</div>
 		{/each}
 	</RadioGroup.Root>
+
+	{#if canClear}
+		<!--
+			Native radios have no native "uncheck" gesture. For optional fields,
+			expose an explicit Clear link so the editor can return to the
+			"no value" state without picking a sentinel option.
+		-->
+		<button
+			type="button"
+			class="text-muted-foreground hover:text-foreground mt-1 self-start text-xs underline-offset-2 hover:underline"
+			onclick={() => (value = '')}
+		>
+			{clearLabel[interfaceLanguage.current] ?? clearLabel.en}
+		</button>
+	{/if}
 {/if}