feat(ui): auto-next chapter navigation with auto-start audio

When autoNext is enabled, audio automatically advances to the next chapter
when a track ends — navigating the page and starting the new chapter's audio.

- audioStore: add autoNext (toggle flag), nextChapter (written by AudioPlayer),
  and autoStartPending (set before goto, cleared after auto-start fires)
- layout: update onended to call goto() and set autoStartPending when autoNext
  is on and nextChapter is available; add auto-next toggle button to mini-player
  bar (double-chevron icon, amber when active)
- AudioPlayer: accept nextChapter prop; write it to audioStore via $effect;
  auto-start playback when autoStartPending is set on component mount; show
  inline 'Auto' toggle button in ready controls when a next chapter exists
- Chapter page: pass data.next as nextChapter prop to AudioPlayer

ui/src/lib/components/AudioPlayer.svelte

@@ -15,6 +15,10 @@
 	 * When the same chapter is already loaded/playing: show inline playback state.
 	 * When a different chapter is playing: show "Now playing Ch.X" with a
 	 * "Load this chapter" button.
+	 *
+	 * Auto-next: when audioStore.autoNext is true, the layout navigates to the
+	 * next chapter on track end and sets autoStartPending = true. This component
+	 * detects that flag on mount and auto-starts playback.
 	 */
 
 	import { audioStore } from '$lib/audio.svelte';
@@ -24,6 +28,8 @@
 		chapter: number;
 		chapterTitle?: string;
 		bookTitle?: string;
+		/** Next chapter number, or null/undefined if this is the last chapter. */
+		nextChapter?: number | null;
 		voice?: string;
 		speed?: number;
 	}
@@ -33,10 +39,25 @@
 		chapter,
 		chapterTitle = '',
 		bookTitle = '',
+		nextChapter = null,
 		voice = 'af_bella',
 		speed = 1.0
 	}: Props = $props();
 
+	// Keep nextChapter in the store so the layout's onended can navigate.
+	// Run as an effect so it stays in sync if the prop ever changes.
+	$effect(() => {
+		audioStore.nextChapter = nextChapter ?? null;
+	});
+
+	// Auto-start: if the layout navigated here via auto-next, kick off playback.
+	$effect(() => {
+		if (audioStore.autoStartPending) {
+			audioStore.autoStartPending = false;
+			startPlayback();
+		}
+	});
+
 	// ── Pseudo progress helpers ────────────────────────────────────────────────
 	let progressRafId = 0;
 
@@ -107,6 +128,7 @@
 		audioStore.bookTitle = bookTitle;
 		audioStore.voice = voice;
 		audioStore.speed = speed;
+		audioStore.nextChapter = nextChapter ?? null;
 		audioStore.status = 'loading';
 		audioStore.errorMsg = '';
 
@@ -149,10 +171,6 @@
 
 		// Already loaded this chapter: toggle play/pause.
 		if (isCurrent && audioStore.status === 'ready') {
-			// The layout owns the audio element; we signal via a store flag.
-			// We don't have a direct reference here — the layout toggles on its own.
-			// Dispatch a custom event that the layout can listen to, or simply
-			// expose a toggle helper on the store (simplest: use a counter).
 			audioStore.toggleRequest = (audioStore.toggleRequest ?? 0) + 1;
 			return;
 		}
@@ -252,9 +270,26 @@
 						{/if}
 					</button>
 
-					<span class="text-xs text-zinc-400 tabular-nums">
+					<span class="text-xs text-zinc-400 tabular-nums flex-1">
 						{formatTime(audioStore.currentTime)} / {formatTime(audioStore.duration)}
 					</span>
+
+					<!-- Auto-next toggle (inline, only visible when there is a next chapter) -->
+					{#if nextChapter !== null && nextChapter !== undefined}
+						<button
+							onclick={() => (audioStore.autoNext = !audioStore.autoNext)}
+							class="flex items-center gap-1.5 px-2 py-1 rounded text-xs font-medium transition-colors flex-shrink-0 {audioStore.autoNext
+								? 'text-amber-400 bg-amber-400/15 hover:bg-amber-400/25'
+								: 'text-zinc-500 bg-zinc-700 hover:bg-zinc-600 hover:text-zinc-200'}"
+							title={audioStore.autoNext ? 'Auto-next on — will play Ch.{nextChapter} automatically' : 'Auto-next off'}
+							aria-pressed={audioStore.autoNext}
+						>
+							<svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 24 24">
+								<path d="M6 18l8.5-6L6 6v12zm8.5-6L23 6v12l-8.5-6z"/>
+							</svg>
+							Auto
+						</button>
+					{/if}
 				</div>
 			</div>
 		{/if}