includio-cms 0.1.4 → 0.5.0

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

@@ -1,63 +1,76 @@
 <script lang="ts">
 	import type { MediaFile } from '../../../../types/media.js';
 	import File from '@tabler/icons-svelte/icons/file';
+	import Music from '@tabler/icons-svelte/icons/music';
 	import Pdf from '@tabler/icons-svelte/icons/pdf';
 	import Photo from '@tabler/icons-svelte/icons/photo';
 	import Video from '@tabler/icons-svelte/icons/video';
+	import PlayerPlay from '@tabler/icons-svelte/icons/player-play';
 
 	type Props = {
 		file: MediaFile;
+		mode?: 'card' | 'thumb';
 	};
 
-	let { file }: Props = $props();
+	let { file, mode = 'card' }: Props = $props();
 </script>
 
-<div class="checkered-bg relative aspect-square w-full overflow-hidden rounded-lg">
+{#if mode === 'thumb'}
+	<!-- Thumb mode: just the media content for 120px thumb area -->
 	{#if file.type === 'image'}
-		<div class="absolute top-1 right-1 rounded-sm bg-background/80 dark:bg-muted/80 backdrop-blur-sm p-0.5">
-			<Photo class="text-muted-foreground" />
-		</div>
 		<img class="pointer-events-none size-full object-contain" src={file.url} alt={file.name} />
 	{:else if file.type === 'video'}
-		<div class="absolute top-1 right-1 rounded-sm bg-background/80 dark:bg-muted/80 backdrop-blur-sm p-0.5">
-			<Video class="text-muted-foreground" />
+		{#if file.thumbnailUrl}
+			<img class="pointer-events-none size-full object-contain" src={file.thumbnailUrl} alt={file.name} />
+		{/if}
+		<div class="ml-video-overlay">
+			<div class="ml-video-play">
+				<PlayerPlay class="h-4 w-4 text-foreground" />
+			</div>
+		</div>
+	{:else if file.type === 'audio'}
+		<div class="ml-file-thumb">
+			<Music class="h-8 w-8" />
 		</div>
-		<img
-			class="pointer-events-none size-full object-contain"
-			src={file.thumbnailUrl}
-			alt={file.name}
-		/>
 	{:else if file.type === 'pdf'}
-		<div class="absolute top-1 right-1 rounded-sm bg-background/80 dark:bg-muted/80 backdrop-blur-sm p-0.5">
-			<Pdf class="text-muted-foreground" />
+		<div class="ml-file-thumb">
+			<Pdf class="h-8 w-8" />
 		</div>
-		<Pdf class="pointer-events-none size-full object-contain" />
 	{:else}
-		<div class="absolute top-1 right-1 rounded-sm bg-background/80 dark:bg-muted/80 backdrop-blur-sm p-0.5">
-			<File class="text-muted-foreground" />
+		<div class="ml-file-thumb">
+			<File class="h-8 w-8" />
 		</div>
-		<File class="pointer-events-none size-full object-contain" />
 	{/if}
-</div>
-
-<style>
-	.checkered-bg {
-		background-color: #f5f5f5;
-		background-image:
-			linear-gradient(45deg, #e0e0e0 25%, transparent 25%),
-			linear-gradient(-45deg, #e0e0e0 25%, transparent 25%),
-			linear-gradient(45deg, transparent 75%, #e0e0e0 75%),
-			linear-gradient(-45deg, transparent 75%, #e0e0e0 75%);
-		background-size: 16px 16px;
-		background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
-	}
-
-	:global(.dark) .checkered-bg {
-		background-color: #1e293b;
-		background-image:
-			linear-gradient(45deg, #334155 25%, transparent 25%),
-			linear-gradient(-45deg, #334155 25%, transparent 25%),
-			linear-gradient(45deg, transparent 75%, #334155 75%),
-			linear-gradient(-45deg, transparent 75%, #334155 75%);
-	}
-</style>
+{:else}
+	<!-- Card mode (legacy): full aspect-square preview -->
+	<div class="ml-checkered-bg relative aspect-square w-full overflow-hidden rounded-lg">
+		{#if file.type === 'image'}
+			<div class="absolute top-1 right-1 rounded-sm bg-background/80 backdrop-blur-sm p-0.5">
+				<Photo class="text-muted-foreground" />
+			</div>
+			<img class="pointer-events-none size-full object-contain" src={file.url} alt={file.name} />
+		{:else if file.type === 'video'}
+			<div class="absolute top-1 right-1 rounded-sm bg-background/80 backdrop-blur-sm p-0.5">
+				<Video class="text-muted-foreground" />
+			</div>
+			<img class="pointer-events-none size-full object-contain" src={file.thumbnailUrl} alt={file.name} />
+		{:else if file.type === 'audio'}
+			<div class="absolute top-1 right-1 rounded-sm bg-background/80 backdrop-blur-sm p-0.5">
+				<Music class="text-muted-foreground" />
+			</div>
+			<div class="flex items-center justify-center size-full bg-muted">
+				<Music class="h-10 w-10 text-text-light" />
+			</div>
+		{:else if file.type === 'pdf'}
+			<div class="absolute top-1 right-1 rounded-sm bg-background/80 backdrop-blur-sm p-0.5">
+				<Pdf class="text-muted-foreground" />
+			</div>
+			<Pdf class="pointer-events-none size-full object-contain" />
+		{:else}
+			<div class="absolute top-1 right-1 rounded-sm bg-background/80 backdrop-blur-sm p-0.5">
+				<File class="text-muted-foreground" />
+			</div>
+			<File class="pointer-events-none size-full object-contain" />
+		{/if}
+	</div>
+{/if}

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

@@ -1,6 +1,7 @@
 import type { MediaFile } from '../../../../types/media.js';
 type Props = {
     file: MediaFile;
+    mode?: 'card' | 'thumb';
 };
 declare const FileMiniature: import("svelte").Component<Props, {}, "">;
 type FileMiniature = ReturnType<typeof FileMiniature>;

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

@@ -42,7 +42,7 @@
 
 {#await remotes.getFileById(fileId) then file}
 	{#if file}
-		<div class="group flex items-center gap-3 rounded-xl border border-white/10 bg-white/60 p-2 shadow-sm backdrop-blur transition-all hover:-translate-y-0.5 hover:shadow-md dark:bg-slate-800/60">
+		<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
 				type="button"

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

@@ -1,9 +1,7 @@
 <script lang="ts">
 	import { getRemotes } from '../../context/remotes.js';
 	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
-	import Button from '../../../components/ui/button/button.svelte';
 	import type { InterfaceLanguage } from '../../../types/languages.js';
-	import Plus from '@tabler/icons-svelte/icons/plus';
 	import Upload from '@tabler/icons-svelte/icons/upload';
 	import X from '@tabler/icons-svelte/icons/x';
 
@@ -11,17 +9,19 @@
 	const interfaceLanguage = useInterfaceLanguage();
 	const lang: Record<
 		InterfaceLanguage,
-		{ addFiles: string; dropFiles: string; uploading: string; uploadComplete: string }
+		{ addFiles: string; dropFiles: string; dropHint: string; uploading: string; uploadComplete: string }
 	> = {
 		pl: {
-			addFiles: 'Dodaj pliki',
+			addFiles: 'Prześlij pliki',
 			dropFiles: 'Upuść pliki tutaj',
+			dropHint: 'Przeciągnij pliki tutaj',
 			uploading: 'Wysyłanie...',
 			uploadComplete: 'Ukończono'
 		},
 		en: {
-			addFiles: 'Add files',
+			addFiles: 'Upload files',
 			dropFiles: 'Drop files here',
+			dropHint: 'Drag files here',
 			uploading: 'Uploading...',
 			uploadComplete: 'Complete'
 		}
@@ -78,7 +78,6 @@
 
 		remotes.getMedia().refresh();
 
-		// Wyczyść progress po 2s
 		setTimeout(() => {
 			uploadProgress = [];
 		}, 2000);
@@ -94,7 +93,6 @@
 	}
 
 	function handleDragEnter(e: DragEvent) {
-		// Tylko pliki - ignoruj internal drag (reorder)
 		if (!e.dataTransfer?.types.includes('Files')) return;
 		e.preventDefault();
 		isDragging = true;
@@ -102,7 +100,6 @@
 
 	function handleDragLeave(e: DragEvent) {
 		e.preventDefault();
-		// Sprawdź czy opuszczamy dropzone
 		const rect = dropZoneRef?.getBoundingClientRect();
 		if (rect && e.clientX >= rect.left && e.clientX <= rect.right && e.clientY >= rect.top && e.clientY <= rect.bottom) {
 			return;
@@ -111,13 +108,11 @@
 	}
 
 	function handleDragOver(e: DragEvent) {
-		// Tylko pliki - ignoruj internal drag
 		if (!e.dataTransfer?.types.includes('Files')) return;
 		e.preventDefault();
 	}
 
 	async function handleDrop(e: DragEvent) {
-		// Tylko pliki - ignoruj internal drag
 		if (!e.dataTransfer?.types.includes('Files')) {
 			isDragging = false;
 			return;
@@ -157,20 +152,23 @@
 	});
 </script>
 
-<div class="flex items-center gap-2">
-	<Button size="sm" variant="outline" onclick={() => inputElement.click()}>
-		<Plus />
-		{lang[interfaceLanguage.current].addFiles}
-	</Button>
-	<input
-		bind:this={inputElement}
-		class="h-0 w-0 overflow-hidden"
-		multiple
-		type="file"
-		{accept}
-		onchange={handleUpload}
-	/>
-</div>
+<!-- Upload button (primary) -->
+<button
+	type="button"
+	class="inline-flex items-center gap-2 rounded-lg bg-primary px-4 py-1.5 text-[13px] font-semibold text-primary-foreground transition-colors hover:bg-plum-dark whitespace-nowrap"
+	onclick={() => inputElement.click()}
+>
+	<Upload class="h-4 w-4" />
+	{lang[interfaceLanguage.current].addFiles}
+</button>
+<input
+	bind:this={inputElement}
+	class="h-0 w-0 overflow-hidden absolute"
+	multiple
+	type="file"
+	{accept}
+	onchange={handleUpload}
+/>
 
 <!-- Drag overlay -->
 {#if isDragging}
@@ -188,7 +186,7 @@
 
 <!-- Upload progress panel -->
 {#if uploadProgress.length > 0}
-	<div class="fixed right-4 bottom-4 z-50 w-72 rounded-lg border bg-background shadow-lg">
+	<div class="fixed right-4 bottom-4 z-50 w-72 rounded-lg border bg-card shadow-lg">
 		<div class="flex items-center justify-between border-b px-3 py-2">
 			<span class="text-sm font-medium">{lang[interfaceLanguage.current].uploading}</span>
 			<button
@@ -217,7 +215,7 @@
 					<div class="h-1.5 overflow-hidden rounded-full bg-muted">
 						<div
 							class="h-full transition-all duration-200 {item.complete
-								? 'bg-green-500'
+								? 'bg-success'
 								: item.progress === -1
 									? 'bg-destructive'
 									: 'bg-primary'}"

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

@@ -4,14 +4,23 @@
 	import FileMiniature from './file/file-miniature.svelte';
 	import { flip } from 'svelte/animate';
 	import Check from '@tabler/icons-svelte/icons/check';
+	import Photo from '@tabler/icons-svelte/icons/photo';
+	import Video from '@tabler/icons-svelte/icons/video';
+	import Music from '@tabler/icons-svelte/icons/music';
+	import Pdf from '@tabler/icons-svelte/icons/pdf';
+	import File from '@tabler/icons-svelte/icons/file';
 
 	type Props = {
 		files: MediaFile[];
 		selected: string[] | string;
 		onSelect: (file: MediaFile, event?: MouseEvent) => void;
+		onRangeSelect?: (fileIds: string[]) => void;
+		selectionMode?: boolean;
 	};
 
-	let { files, onSelect, selected }: Props = $props();
+	let { files, onSelect, selected, selectionMode = false, onRangeSelect }: Props = $props();
+
+	let lastClickedIndex = $state<number>(-1);
 
 	const isSelected = (id: string) =>
 		Array.isArray(selected) ? selected.includes(id) : selected === id;
@@ -36,57 +45,120 @@
 				return files;
 		}
 	});
+
+	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;
+			case 'video': return Video;
+			case 'audio': return Music;
+			case 'pdf': return Pdf;
+			default: return File;
+		}
+	}
+
+	function handleClick(file: MediaFile, event: MouseEvent, index: number) {
+		if (selectionMode && event.shiftKey && lastClickedIndex >= 0 && onRangeSelect) {
+			const start = Math.min(lastClickedIndex, index);
+			const end = Math.max(lastClickedIndex, index);
+			const rangeIds = sortedFiles.slice(start, end + 1).map((f) => f.id);
+			onRangeSelect(rangeIds);
+			lastClickedIndex = index;
+		} else {
+			lastClickedIndex = index;
+			onSelect(file, event);
+		}
+	}
+
+	function handleKeydown(e: KeyboardEvent, file: MediaFile, index: number) {
+		if (e.key === 'Enter' || e.key === ' ') {
+			e.preventDefault();
+			lastClickedIndex = index;
+			onSelect(file);
+		}
+	}
 </script>
 
 {#if sortedFiles.length === 0}
 	<div class="col-span-full flex flex-col items-center justify-center py-16 text-center">
-		<div class="text-muted-foreground mb-2">
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				class="mx-auto h-12 w-12 opacity-50"
-				fill="none"
-				viewBox="0 0 24 24"
-				stroke="currentColor"
-			>
-				<path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="1.5"
-					d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
-				/>
+		<div class="mb-3 flex h-14 w-14 items-center justify-center rounded-xl bg-muted">
+			<svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 text-muted-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
 			</svg>
 		</div>
-		<p class="text-muted-foreground text-sm">No files found</p>
+		<p class="text-sm font-medium text-foreground">Brak plików</p>
+		<p class="text-xs text-muted-foreground mt-1">Prześlij pliki lub zmień filtry</p>
 	</div>
 {:else}
-	{#each sortedFiles as file (file.id)}
-		<button
+	{#each sortedFiles as file, i (file.id)}
+		{@const sel = isSelected(file.id)}
+		{@const TypeIcon = getTypeIcon(file.type)}
+		<div
 			animate:flip={{ duration: 300 }}
-			type="button"
-			class="group relative block aspect-square overflow-hidden rounded-xl bg-white/60 p-1.5 shadow-sm backdrop-blur transition-all hover:-translate-y-0.5 hover:shadow-lg dark:bg-slate-800/60 {isSelected(file.id)
-				? 'ring-2 ring-[#2D4A77] ring-offset-2 dark:ring-[#4975AE]'
-				: 'hover:ring-1 hover:ring-slate-200/50 dark:hover:ring-white/10'}"
-			onclick={(e) => onSelect(file, e)}
+			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'}
+			"
+			role="option"
+			aria-selected={sel}
+			tabindex="0"
+			onclick={(e) => handleClick(file, e, i)}
+			onkeydown={(e) => handleKeydown(e, file, i)}
 		>
-			{#if isSelected(file.id)}
-				<div
-					class="absolute top-2 left-2 z-10 flex h-5 w-5 items-center justify-center rounded-full bg-gradient-to-br from-[#2D4A77] to-[#4975AE] text-white shadow-md"
-				>
-					<Check class="h-3 w-3" />
+			<!-- 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>
-			{/if}
-			<!-- Tag dots -->
-			{#if file.tags && file.tags.length > 0}
-				<div class="absolute bottom-2 right-2 z-10 flex gap-0.5">
-					{#each file.tags.slice(0, 3) as tag}
-						<span class="h-2 w-2 rounded-full shadow-sm" style="background-color: {tag.color}"></span>
-					{/each}
-					{#if file.tags.length > 3}
-						<span class="text-[8px] text-muted-foreground">+{file.tags.length - 3}</span>
+
+					<!-- 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>
+
+			<!-- 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="Tagi">
+							{#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>
-			{/if}
-			<FileMiniature {file} />
-		</button>
+			</div>
+		</div>
 	{/each}
 {/if}

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

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

package/dist/admin/components/media/focal-point-input.svelte

@@ -5,21 +5,56 @@
 	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
 	import type { InterfaceLanguage } from '../../../types/languages.js';
 	import type { MediaFile } from '../../../types/media.js';
-	import Focus from '@tabler/icons-svelte/icons/focus-2';
+	import Click from '@tabler/icons-svelte/icons/click';
+	import Keyboard from '@tabler/icons-svelte/icons/keyboard';
+	import HandFinger from '@tabler/icons-svelte/icons/hand-finger';
 
 	const interfaceLanguage = useInterfaceLanguage();
-	const lang: Record<InterfaceLanguage, { label: string; save: string; success: string; error: string }> = {
+
+	const lang: Record<
+		InterfaceLanguage,
+		{
+			hint: string;
+			save: string;
+			success: string;
+			error: string;
+			ariaLabel: string;
+			ariaValueText: (x: number, y: number) => string;
+			mouse: string;
+			mouseDesc: string;
+			keyboard: string;
+			keyboardDesc: string;
+			touch: string;
+			touchDesc: string;
+		}
+	> = {
 		pl: {
-			label: 'Punkt ogniskowy',
-			save: 'Zapisz punkt ogniskowy',
+			hint: 'Wskaż najważniejsze miejsce na zdjęciu — przy przycinaniu do różnych rozmiarów ten punkt będzie zawsze widoczny.',
+			save: 'Zapisz',
 			success: 'Punkt ogniskowy zapisany.',
-			error: 'Nie udało się zapisać punktu ogniskowego.'
+			error: 'Nie udało się zapisać punktu ogniskowego.',
+			ariaLabel: 'Punkt ogniskowy — wybierz najważniejsze miejsce na zdjęciu',
+			ariaValueText: (x, y) => `Pozycja: ${x}% od lewej, ${y}% od góry`,
+			mouse: 'Mysz',
+			mouseDesc: 'Kliknij na zdjęcie',
+			keyboard: 'Klawiatura',
+			keyboardDesc: 'Strzałki 1%, Shift 5%',
+			touch: 'Dotyk',
+			touchDesc: 'Dotknij zdjęcie'
 		},
 		en: {
-			label: 'Focal point',
-			save: 'Save focal point',
+			hint: 'Point to the most important part of the image — when cropped to different sizes, this point will always stay visible.',
+			save: 'Save',
 			success: 'Focal point saved.',
-			error: 'Failed to save focal point.'
+			error: 'Failed to save focal point.',
+			ariaLabel: 'Focal point — select the most important part of the image',
+			ariaValueText: (x, y) => `Position: ${x}% from left, ${y}% from top`,
+			mouse: 'Mouse',
+			mouseDesc: 'Click on the image',
+			keyboard: 'Keyboard',
+			keyboardDesc: 'Arrows 1%, Shift 5%',
+			touch: 'Touch',
+			touchDesc: 'Tap the image'
 		}
 	};
 
@@ -36,11 +71,20 @@
 	let saving = $state(false);
 	let container: HTMLDivElement;
 
+	let t = $derived(lang[interfaceLanguage.current]);
+	let xPercent = $derived(Math.round(focalX * 100));
+	let yPercent = $derived(Math.round(focalY * 100));
+	let isDirty = $derived(focalX !== (file.focalX ?? 0.5) || focalY !== (file.focalY ?? 0.5));
+
+	function clamp(v: number) {
+		return Math.max(0, Math.min(1, v));
+	}
+
 	function handlePointer(e: PointerEvent) {
 		if (!container) return;
 		const rect = container.getBoundingClientRect();
-		focalX = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
-		focalY = Math.max(0, Math.min(1, (e.clientY - rect.top) / rect.height));
+		focalX = clamp((e.clientX - rect.left) / rect.width);
+		focalY = clamp((e.clientY - rect.top) / rect.height);
 	}
 
 	function onPointerDown(e: PointerEvent) {
@@ -54,15 +98,37 @@
 		}
 	}
 
+	function onKeyDown(e: KeyboardEvent) {
+		const step = e.shiftKey ? 0.05 : 0.01;
+		let handled = true;
+		switch (e.key) {
+			case 'ArrowLeft':
+				focalX = clamp(focalX - step);
+				break;
+			case 'ArrowRight':
+				focalX = clamp(focalX + step);
+				break;
+			case 'ArrowUp':
+				focalY = clamp(focalY - step);
+				break;
+			case 'ArrowDown':
+				focalY = clamp(focalY + step);
+				break;
+			default:
+				handled = false;
+		}
+		if (handled) e.preventDefault();
+	}
+
 	async function save() {
 		saving = true;
 		try {
 			await remotes.setFocalPoint({ fileId: file.id, focalX, focalY });
 			file.focalX = focalX;
 			file.focalY = focalY;
-			toast.success(lang[interfaceLanguage.current].success);
+			toast.success(t.success);
 		} catch {
-			toast.error(lang[interfaceLanguage.current].error);
+			toast.error(t.error);
 		} finally {
 			saving = false;
 		}
@@ -75,32 +141,62 @@
 	});
 </script>
 
-<div class="space-y-2">
-	<div class="flex items-center gap-1.5 text-xs font-medium">
-		<Focus class="h-3.5 w-3.5 text-muted-foreground" />
-		{lang[interfaceLanguage.current].label}
-	</div>
+<div class="space-y-3">
+	<!-- COGA hint -->
+	<p class="text-xs leading-relaxed text-text-secondary">
+		{t.hint}
+	</p>
 
-	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<!-- Focal point area -->
 	<div
 		bind:this={container}
-		class="relative cursor-crosshair overflow-hidden rounded-lg border select-none"
+		role="application"
+		tabindex="0"
+		aria-label={t.ariaLabel}
+		aria-valuetext={t.ariaValueText(xPercent, yPercent)}
+		class="relative cursor-crosshair overflow-hidden rounded-lg border select-none focus-visible:outline-2 focus-visible:outline-primary focus-visible:outline-offset-2"
 		onpointerdown={onPointerDown}
 		onpointermove={onPointerMove}
+		onkeydown={onKeyDown}
 	>
-		<img src={file.url} alt={file.alt || file.name} class="w-full pointer-events-none" draggable="false" />
+		<img src={file.url} alt={file.alt || file.name} class="pointer-events-none w-full" draggable="false" />
 		<!-- Crosshair -->
 		<div
-			class="absolute w-6 h-6 -translate-x-1/2 -translate-y-1/2 pointer-events-none"
+			class="pointer-events-none absolute h-7 w-7 -translate-x-1/2 -translate-y-1/2 transition-[left,top] duration-100 ease-out"
 			style="left: {focalX * 100}%; top: {focalY * 100}%;"
 		>
 			<div class="absolute inset-0 rounded-full border-2 border-white shadow-[0_0_0_1px_rgba(0,0,0,0.3)]"></div>
-			<div class="absolute left-1/2 top-0 h-full w-px bg-white/80 -translate-x-px"></div>
-			<div class="absolute top-1/2 left-0 w-full h-px bg-white/80 -translate-y-px"></div>
+			<div class="absolute left-1/2 top-0 h-full w-px -translate-x-px bg-white/80"></div>
+			<div class="absolute top-1/2 left-0 h-px w-full -translate-y-px bg-white/80"></div>
 		</div>
 	</div>
 
-	<Button variant="outline" class="w-full" size="sm" onclick={save} disabled={saving}>
-		{lang[interfaceLanguage.current].save}
-	</Button>
+	<!-- Readout bar -->
+	<div class="flex items-center gap-3">
+		<span class="font-mono text-xs text-text-secondary">
+			X: {xPercent}%&ensp;Y: {yPercent}%
+		</span>
+		<Button variant="outline" size="sm" onclick={save} disabled={saving || !isDirty}>
+			{t.save}
+		</Button>
+	</div>
+
+	<!-- Instructions -->
+	<div class="grid grid-cols-3 gap-2">
+		<div class="flex flex-col items-center gap-1 rounded-md bg-surface px-2 py-2 text-center">
+			<Click class="h-4 w-4 text-text-light" />
+			<span class="text-[11px] font-semibold text-text">{t.mouse}</span>
+			<span class="text-[10px] leading-tight text-text-light">{t.mouseDesc}</span>
+		</div>
+		<div class="flex flex-col items-center gap-1 rounded-md bg-surface px-2 py-2 text-center">
+			<Keyboard class="h-4 w-4 text-text-light" />
+			<span class="text-[11px] font-semibold text-text">{t.keyboard}</span>
+			<span class="text-[10px] leading-tight text-text-light">{t.keyboardDesc}</span>
+		</div>
+		<div class="flex flex-col items-center gap-1 rounded-md bg-surface px-2 py-2 text-center">
+			<HandFinger class="h-4 w-4 text-text-light" />
+			<span class="text-[11px] font-semibold text-text">{t.touch}</span>
+			<span class="text-[10px] leading-tight text-text-light">{t.touchDesc}</span>
+		</div>
+	</div>
 </div>