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/audio.svelte.ts

@@ -46,6 +46,26 @@ class AudioStore {
 	 */
 	seekRequest = $state<number | null>(null);
 
+	// ── Auto-next ────────────────────────────────────────────────────────────
+	/**
+	 * When true, navigates to the next chapter when the current one ends
+	 * and auto-starts its audio.
+	 */
+	autoNext = $state(false);
+
+	/**
+	 * The next chapter number for the currently playing chapter, or null if
+	 * there is no next chapter.  Written by the chapter page's AudioPlayer.
+	 */
+	nextChapter = $state<number | null>(null);
+
+	/**
+	 * Set to true by the layout's onended handler (when autoNext fires a
+	 * navigation).  The AudioPlayer on the new page checks this on mount
+	 * and, if true, immediately starts the play flow then clears the flag.
+	 */
+	autoStartPending = $state(false);
+
 	/** Whether the mini-bar at the bottom is visible */
 	get active(): boolean {
 		return this.status === 'ready' || this.status === 'generating' || this.status === 'loading';

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}

ui/src/routes/+layout.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import '../app.css';
 	import { page } from '$app/state';
+	import { goto } from '$app/navigation';
 	import type { Snippet } from 'svelte';
 	import type { LayoutData } from './$types';
 	import { audioStore } from '$lib/audio.svelte';
@@ -122,7 +123,13 @@
 	bind:duration={audioStore.duration}
 	onplay={() => (audioStore.isPlaying = true)}
 	onpause={() => (audioStore.isPlaying = false)}
-	onended={() => (audioStore.isPlaying = false)}
+	onended={() => {
+		audioStore.isPlaying = false;
+		if (audioStore.autoNext && audioStore.nextChapter !== null && audioStore.slug) {
+			audioStore.autoStartPending = true;
+			goto(`/books/${audioStore.slug}/chapters/${audioStore.nextChapter}`);
+		}
+	}}
 	preload="metadata"
 	style="display:none"
 ></audio>
@@ -278,6 +285,22 @@
 				>
 					{audioStore.speed}×
 				</button>
+
+				<!-- Auto-next toggle -->
+				<button
+					onclick={() => (audioStore.autoNext = !audioStore.autoNext)}
+					class="p-1.5 rounded flex-shrink-0 transition-colors {audioStore.autoNext
+						? 'text-amber-400 bg-amber-400/15 hover:bg-amber-400/25'
+						: 'text-zinc-600 hover:text-zinc-300 hover:bg-zinc-800'}"
+					title={audioStore.autoNext ? 'Auto-next on' : 'Auto-next off'}
+					aria-label="Auto-next {audioStore.autoNext ? 'on' : 'off'}"
+					aria-pressed={audioStore.autoNext}
+				>
+					<!-- "skip to end" / auto-advance icon -->
+					<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
+						<path d="M6 18l8.5-6L6 6v12zm8.5-6L23 6v12l-8.5-6z"/>
+					</svg>
+				</button>
 			{:else if audioStore.status === 'generating'}
 				<!-- Spinner during generation -->
 				<svg class="w-6 h-6 text-amber-400 animate-spin flex-shrink-0" fill="none" viewBox="0 0 24 24">

ui/src/routes/books/[slug]/chapters/[n]/+page.svelte

@@ -72,6 +72,7 @@
 	chapter={data.chapter.number}
 	chapterTitle={data.chapter.title || `Chapter ${data.chapter.number}`}
 	bookTitle={data.book.title}
+	nextChapter={data.next}
 />
 
 <!-- Chapter content -->