fix: resolve vite-plugin-svelte warnings

- image-viewer: replace backdrop div with button for a11y
- file-drop-zone: wrap prop check in \$effect to avoid state_referenced_locally
- about: use \$derived for stats array
- magazine: use \$derived for featuredArticle
- play: add role/keyboard support to seek bar slider; fix \$state on SvelteMap in device-mapping-dialog
- admin/videos/[id]: add <track kind="captions"> to video element

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

packages/frontend/src/lib/components/image-viewer/image-viewer.svelte

@@ -145,7 +145,7 @@
 {#if isViewerOpen}
   <div class="fixed inset-0 z-50 flex items-center justify-center animate-fade-in">
     <!-- Backdrop -->
-    <div class="absolute inset-0 bg-black/95 backdrop-blur-xl" onclick={closeViewer}></div>
+    <button type="button" class="absolute inset-0 bg-black/95 backdrop-blur-xl cursor-default" onclick={closeViewer} aria-label="Close viewer"></button>
 
     <!-- Viewer Content -->
     <div class="relative w-[90vw] h-[90vh] flex flex-col animate-slide-up">

packages/frontend/src/lib/components/ui/file-drop-zone/file-drop-zone.svelte

@@ -23,11 +23,13 @@
     ...rest
   }: FileDropZoneProps = $props();
 
+  $effect(() => {
     if (maxFiles !== undefined && fileCount === undefined) {
       console.warn(
         "Make sure to provide FileDropZone with `fileCount` when using the `maxFiles` prompt",
       );
     }
+  });
 
   let uploading = $state(false);
 

packages/frontend/src/routes/about/+page.svelte

@@ -7,7 +7,7 @@
 
   const { data } = $props();
 
-  const stats = [
+  const stats = $derived([
     {
       icon: "icon-[ri--user-heart-line]",
       value: data.stats.viewers_count,
@@ -28,7 +28,7 @@
       value: $_("about.stats.yearsFormatted", { values: { years: 5 } }),
       label: $_("about.stats.experience"),
     },
-  ];
+  ]);
 
   const team = [
     {

packages/frontend/src/routes/admin/videos/[id]/+page.svelte

@@ -154,7 +154,9 @@
           poster={imageId ? (getAssetUrl(imageId, "preview") ?? undefined) : undefined}
           controls
           class="w-full rounded-lg bg-black max-h-72 mb-2"
-        ></video>
+        >
+          <track kind="captions" />
+        </video>
       {/if}
       <FileDropZone accept="video/*" maxFileSize={2000 * MEGABYTE} onUpload={handleVideoUpload} />
     </div>

packages/frontend/src/routes/magazine/+page.svelte

@@ -22,8 +22,9 @@
   $effect(() => { searchValue = data.search ?? ""; });
   let searchTimeout: ReturnType<typeof setTimeout>;
 
-  const featuredArticle =
+  const featuredArticle = $derived(
-    data.page === 1 && !data.search && !data.category ? data.items.find((a) => a.featured) : null;
+    data.page === 1 && !data.search && !data.category ? data.items.find((a) => a.featured) : null,
+  );
 
   function debounceSearch(value: string) {
     clearTimeout(searchTimeout);

packages/frontend/src/routes/play/+page.svelte

@@ -480,12 +480,22 @@
                   .padStart(2, "0")}
               </span>
               <div
+                role="slider"
+                tabindex="0"
+                aria-label="Seek"
+                aria-valuemin={0}
+                aria-valuemax={data.recording.duration}
+                aria-valuenow={playbackProgress}
                 class="flex-1 h-2 bg-muted rounded-full overflow-hidden cursor-pointer relative"
                 onclick={(e) => {
                   const rect = e.currentTarget.getBoundingClientRect();
                   const percentage = ((e.clientX - rect.left) / rect.width) * 100;
                   seek(percentage);
                 }}
+                onkeydown={(e) => {
+                  if (e.key === "ArrowRight") seek(((playbackProgress + 1) / data.recording.duration) * 100);
+                  else if (e.key === "ArrowLeft") seek(((playbackProgress - 1) / data.recording.duration) * 100);
+                }}
               >
                 <div
                   class="absolute inset-0 bg-gradient-to-r from-primary to-accent transition-all duration-150"

packages/frontend/src/routes/play/components/device-mapping-dialog.svelte

@@ -16,7 +16,7 @@
   let { open, recordedDevices, connectedDevices, onConfirm, onCancel }: Props = $props();
 
   // Device mappings: recorded device name -> connected device
-  let mappings = new SvelteMap<string, BluetoothDevice>();
+  let mappings = $state(new SvelteMap<string, BluetoothDevice>());
 
   // Check if a connected device is compatible with a recorded device
   function isCompatible(recordedDevice: DeviceInfo, connectedDevice: BluetoothDevice): boolean {