@joewinke/jatui 0.36.1 → 0.36.2

package/CLAUDE.md

@@ -122,7 +122,7 @@ Item-by-item review surfaces (MOS review-ux, design mos-z8vgx). One `VerdictOpti
 | `VideoPlayer` | **The default video surface — reach for this over a bare `<video controls>`.** One timeline band carrying a waveform-envelope scrubber, chapter flags (top edge), bookmark diamonds (bottom edge), diarized speaker colouring and scroll-to-zoom, plus an optional transcript pane (click to seek, active line auto-scroll, solo/skip per speaker, `T` toggle) and a "Talk time" legend (2+ speakers only; one voice gets no legend and no per-row name). **`kind="audio"` renders no stage**, and **`transport="band"`** (the audio default) drops the native `<video controls>` bar for a transport row on the band (play/pause, `now / total`, speed, mute + volume, fullscreen for video), so the band is the ONE timeline. **Every intelligence prop is optional** — a bare mp4 still gets the scrubber, hover-time card, wheel volume and the full keyboard map (Space/K, arrows/J/L, vol/mute, −/= speed + Backspace reset, </> frame step, [/] chapters, B bookmark, ? help overlay), and each pane lights up as its data arrives (nothing shifts layout when diarization lands late). Wheel means volume over the video (shift = seek, alt = speed) and zoom over the band. Internals live in `src/lib/video/` (band/keys/rate/deepLink/settings + contracts for audio/night/presence — see that README; gap audit vs the extension: `VIDEO-PLAYER-GAP-AUDIT.md`). | `src`, `kind?` (`'video' \| 'audio'`), `transport?` (`'native' \| 'band'`), `chapters?`, `speakers?`, `transcript?`, `bookmarks?`, `waveform?`, `talkTime?`, `startAt?`, `poster?`, `captionsSrc?`, `crossorigin?` (`'anonymous'` — what frame-reading features need), `syncUrlTime?` (`?t=` deep-link, opt-in), `transcriptPosition?` (`'below' \| 'side'`), `onTimeUpdate?`, `onAddBookmark?`, `onBookmarkContext?` |
 | `MediaCapture` | One-tap audio/selfie-video/screen(+mic) recording — a host-agnostic PRIMITIVE. Owns permission requests, MIME negotiation, the record/stop state machine, live self-preview, and mixes screen+mic audio into one track via AudioContext. Never uploads anything — hands the finished clip to `onCapture` as a Blob and the host decides what to do with it. `onCapture` may be async; the component shows "processing" until it resolves. | `onCapture: (result: MediaCaptureResult) => void \| Promise<void>`, `modes?` (default all three), `maxDurationMs?` (default 120000), `label?`, `hint?`, `compact?`, `disabled?` |
 | `MultimodalCaptureField` | "Upload a file, or record yourself going over it" as one input surface — composes `FileDropzone` (capped to one file) with `MediaCapture`. File and recording are independent (either, both, or neither); neither half uploads anything, same "validate and hand back" contract as `FileDropzone`. | `onFileSelected?`, `onFileRemoved?`, `onCapture?`, `onRecordingRemoved?`, `accept?`, `maxFileSize?`, `modes?`, `maxDurationMs?`, `file?`/`fileUrl?`/`fileName?`, `recordingSummary?` |
-| `ListenControl` | "Listen to this page" — a compact pill that expands into a playback bar over the host's PER-SENTENCE audio (TTS): play/pause, −15s/+15s and prev/next sentence, speed (0.75–2×), voice picker, a document-wide progress bar with chapter ticks (a hatched tail marks the not-yet-synthesized part), time, close. The host supplies an async `source` (sentences/paragraphs with ids → audio URLs, streamed page by page so playback starts on the first chunk while the rest synthesizes; pages merge by id so late URLs fill in) and gets `onSegmentChange(id)` at every boundary for highlight + scroll-follow. Media Session (lock-screen/headset controls, one document-wide position), keyboard scoped to the player (Space/K, ←/→ sentences, Shift+←/→ ±15s, [ / ] speed, Escape), speed+voice persisted in localStorage, `bind:api` for hosts wiring their own global keys, reduced-motion aware, token-only theming, fixed sticky mini-bar on narrow screens. Internals in `src/lib/listen/` (one timeline across per-sentence files — `buildTimeline` offsets; see `video/` for the doctrine). Demo synthesizes real WAVs locally. | `source`, `voices?`, `voiceId?` (bindable), `chapters?`, `title?`, `triggerLabel?`, `open?` (bindable), `preload?`, `estimateSec?`, `storageKey?`, `onSegmentChange?`, `onOpenChange?`, `api?` (bindable), `class?`, `children?` (custom trigger) |
+| `ListenControl` | "Listen to this page" — a compact pill that expands into a TWO-ROW playback bar over the host's PER-SENTENCE audio (TTS): row 1 = play/pause · chapter chip + current sentence (full remaining width) · ONE settings pill ("1.25× · Sarah" → speed 0.75–2× + voice menu) · close; row 2 = prev/next sentence and −15s/+15s · a document-wide progress bar with chapter ticks (a hatched tail marks the not-yet-synthesized part), time, close. The host supplies an async `source` (sentences/paragraphs with ids → audio URLs, streamed page by page so playback starts on the first chunk while the rest synthesizes; pages merge by id so late URLs fill in) and gets `onSegmentChange(id)` at every boundary for highlight + scroll-follow. Media Session (lock-screen/headset controls, one document-wide position), keyboard scoped to the player (Space/K, ←/→ sentences, Shift+←/→ ±15s, [ / ] speed, Escape), speed+voice persisted in localStorage, `bind:api` for hosts wiring their own global keys, reduced-motion aware, token-only theming, never overflows its host (border-box, `max-width: 100%`, `min-width: 0` chain), fixed sticky mini-bar (same two rows) on narrow screens. Internals in `src/lib/listen/` (one timeline across per-sentence files — `buildTimeline` offsets; see `video/` for the doctrine). Demo synthesizes real WAVs locally. | `source`, `voices?`, `voiceId?` (bindable), `chapters?`, `title?`, `triggerLabel?`, `open?` (bindable), `preload?`, `estimateSec?`, `storageKey?`, `onSegmentChange?`, `onOpenChange?`, `api?` (bindable), `class?`, `children?` (custom trigger) |
 
 **`VideoPlayer` vs `TranscriptPlayer`:** VideoPlayer is the generalization — it does everything TranscriptPlayer does plus the timeline band, and its props are structurally compatible with TranscriptPlayer's (`TranscriptSegment[]`, `TranscriptChapter[]`, `TranscriptBookmark[]`, `TranscriptSpeakerTalkTime[]` all pass straight through). `TranscriptPlayer` stays exported and unchanged for the existing meeting-recordings viewer; use `VideoPlayer` for anything new.
 

package/dist/components/ListenControl.svelte

@@ -16,9 +16,10 @@
 	/**
 	 * ListenControl — "listen to this page" as one compact control.
 	 *
-	 * A small pill that expands into a playback bar: play/pause, −15s/+15s and
-	 * previous/next sentence, speed (0.75–2×), a voice picker, a document-wide
-	 * progress bar with chapter/section ticks, time, close. Built for hosts
+	 * A small pill that expands into a two-row playback bar: play/pause, the
+	 * current sentence, one speed (0.75–2×) + voice menu, close; then
+	 * previous/next sentence, −15s/+15s, a document-wide progress bar with
+	 * chapter/section ticks, and time. Built for hosts
 	 * that synthesize audio per sentence (TTS): the host supplies an async
 	 * SEGMENT SOURCE — sentences/paragraphs with ids → audio URLs — and the
 	 * player starts on the first chunk while the rest synthesizes, hatching
@@ -36,6 +37,14 @@
 	 * reports them) lay the timeline out immediately; unknown ones are
 	 * measured on load and ESTIMATED until then, self-correcting as they land.
 	 *
+	 * ── Layout: two rows (jatui-zl9dp) ──────────────────────────────────────
+	 * Row 1 is what you're hearing: play/pause, the chapter chip + current
+	 * sentence (it gets ALL the remaining width), ONE settings pill folding
+	 * speed + voice into a small menu, close. Row 2 is where you are: prev
+	 * sentence, −15s, +15s, next sentence, then the progress bar and the
+	 * clock. The bar is `box-sizing: border-box` + `max-width: 100%` with
+	 * `min-width: 0` down the flex chain, so it never overflows its host.
+	 *
 	 * The transport row borrows VideoPlayer's `kind="audio"` / `transport=
 	 * "band"` shape (round primary play, ghost transport buttons, tabular
 	 * clock) and reuses its pure time formatting (`video/time.ts`); the
@@ -61,6 +70,7 @@
 	 */
 
 	import { onMount, tick, untrack, type Snippet } from 'svelte';
+	import { floating } from '../actions/floating';
 	import { formatTime } from '../video/time';
 	import {
 		buildTimeline,
@@ -160,6 +170,12 @@
 	let audioEl: HTMLAudioElement | null = $state(null);
 	let playBtnEl: HTMLButtonElement | null = $state(null);
 	let triggerEl: HTMLButtonElement | null = $state(null);
+	let settingsBtnEl: HTMLButtonElement | null = $state(null);
+	let settingsMenuEl: HTMLDivElement | null = $state(null);
+	let settingsOpen = $state(false);
+	// The click that dismisses the menu (outside-click, capture phase) is
+	// also the settings button's own click — swallow that one re-open.
+	let settingsJustDismissed = false;
 	let segments = $state<ListenSegment[]>([]);
 	let sourceError = $state('');
 	let currentIdx = $state(0);
@@ -429,9 +445,77 @@
 	function setSpeed(next: number): void {
 		speed = clampSpeed(next);
 	}
-	function cycleSpeed(): void {
-		const i = LISTEN_SPEEDS.indexOf(clampSpeed(speed));
-		setSpeed(i === -1 ? 1 : LISTEN_SPEEDS[(i + 1) % LISTEN_SPEEDS.length]);
+
+	// ── Settings menu: speed + voice in ONE control ─────────────────────────
+	async function toggleSettings(): Promise<void> {
+		if (settingsJustDismissed) return;
+		if (settingsOpen) {
+			closeSettings();
+			return;
+		}
+		settingsOpen = true;
+		await tick();
+		// Land on the checked speed — arrows move from where you are.
+		const items = settingsItems();
+		(items.find((el) => el.getAttribute('aria-checked') === 'true') ?? items[0])?.focus();
+	}
+	function closeSettings(refocus = true): void {
+		if (!settingsOpen) return;
+		settingsOpen = false;
+		if (refocus) untrack(() => settingsBtnEl?.focus());
+	}
+	function dismissSettings(): void {
+		if (!settingsOpen) return;
+		settingsJustDismissed = true;
+		setTimeout(() => (settingsJustDismissed = false), 0);
+		closeSettings(false);
+	}
+	function settingsItems(): HTMLButtonElement[] {
+		return Array.from(settingsMenuEl?.querySelectorAll<HTMLButtonElement>('[role="menuitemradio"]') ?? []);
+	}
+	function pickSpeed(s: number): void {
+		setSpeed(s);
+		closeSettings();
+	}
+	function pickVoice(id: string): void {
+		voiceId = id;
+		closeSettings();
+	}
+	function onSettingsKeydown(e: KeyboardEvent): void {
+		const items = settingsItems();
+		const i = items.indexOf(document.activeElement as HTMLButtonElement);
+		let to = -1;
+		switch (e.key) {
+			case 'Escape':
+				// The menu's own Escape — never the bar's close.
+				e.preventDefault();
+				e.stopPropagation();
+				closeSettings();
+				return;
+			case 'Tab':
+				closeSettings(false);
+				return;
+			case 'ArrowDown':
+				to = i < 0 ? 0 : (i + 1) % items.length;
+				break;
+			case 'ArrowUp':
+				to = i <= 0 ? items.length - 1 : i - 1;
+				break;
+			case 'Home':
+				to = 0;
+				break;
+			case 'End':
+				to = items.length - 1;
+				break;
+			default:
+				// Enter/Space activate the focused item natively; keep the
+				// bar's map (Space = play) from also seeing them.
+				e.stopPropagation();
+				return;
+		}
+		e.preventDefault();
+		e.stopPropagation();
+		items[to]?.focus();
 	}
 
 	// ── Open / close + focus ─────────────────────────────────────────────────
@@ -445,6 +529,7 @@
 	function close(): void {
 		if (!open) return;
 		doPause();
+		settingsOpen = false;
 		open = false;
 		onOpenChange?.(false);
 		clearListenSession(getMediaSession());
@@ -596,116 +681,113 @@
 			aria-label="Listen to this page"
 			onkeydown={onBarKeydown}
 		>
-			<button
-				type="button"
-				class="lc-play"
-				aria-label={wantPlay && !endedFlag ? 'Pause' : 'Play'}
-				title="{wantPlay && !endedFlag ? 'Pause' : 'Play'} · Space"
-				onclick={toggle}
-				bind:this={playBtnEl}
-			>
-				{#if wantPlay && !endedFlag}
-					<svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
-						<path d="M7 5h3.5v14H7zM13.5 5H17v14h-3.5z" fill="currentColor" />
-					</svg>
-				{:else}
-					<svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
-						<path d="M8 5.5v13l10.5-6.5z" fill="currentColor" />
-					</svg>
-				{/if}
-			</button>
-
-			<button type="button" class="lc-tbtn" aria-label="Previous sentence" title="Previous sentence · ←" onclick={prev}>
-				<svg viewBox="0 0 24 24" width="15" height="15" aria-hidden="true">
-					<path d="M19 5.5v13L9.5 12z" fill="currentColor" />
-					<path d="M6 5.5v13" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
-				</svg>
-			</button>
-			<button type="button" class="lc-tbtn lc-skip" aria-label="Back 15 seconds" title="Back 15s · Shift+←" onclick={() => skip(-15)}>
-				<svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-					<path d="M11.5 4.5V2L7 5.5l4.5 3.5V6.5a6.5 6.5 0 1 1-6.5 6.5" />
-					<text x="12.7" y="17.8" font-size="7" font-weight="700" text-anchor="middle" fill="currentColor" stroke="none">15</text>
-				</svg>
-			</button>
-			<button type="button" class="lc-tbtn lc-skip" aria-label="Forward 15 seconds" title="Forward 15s · Shift+→" onclick={() => skip(15)}>
-				<svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-					<path d="M12.5 4.5V2l4.5 3.5-4.5 3.5V6.5a6.5 6.5 0 1 0 6.5 6.5" />
-					<text x="11.3" y="17.8" font-size="7" font-weight="700" text-anchor="middle" fill="currentColor" stroke="none">15</text>
-				</svg>
-			</button>
-			<button type="button" class="lc-tbtn" aria-label="Next sentence" title="Next sentence · →" onclick={next}>
-				<svg viewBox="0 0 24 24" width="15" height="15" aria-hidden="true">
-					<path d="M5 5.5v13L14.5 12z" fill="currentColor" />
-					<path d="M18 5.5v13" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
-				</svg>
-			</button>
+			<!-- Row 1: what you're hearing — play · chapter + sentence (all the
+			     remaining width) · speed/voice settings · close. -->
+			<div class="lc-row lc-row-now">
+				<button
+					type="button"
+					class="lc-play"
+					aria-label={wantPlay && !endedFlag ? 'Pause' : 'Play'}
+					title="{wantPlay && !endedFlag ? 'Pause' : 'Play'} · Space"
+					onclick={toggle}
+					bind:this={playBtnEl}
+				>
+					{#if wantPlay && !endedFlag}
+						<svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
+							<path d="M7 5h3.5v14H7zM13.5 5H17v14h-3.5z" fill="currentColor" />
+						</svg>
+					{:else}
+						<svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
+							<path d="M8 5.5v13l10.5-6.5z" fill="currentColor" />
+						</svg>
+					{/if}
+				</button>
 
-			<div class="lc-body">
-				{#if caption || activeCh || sourceError}
-					<div class="lc-caption">
-						{#if sourceError}
-							<span class="lc-caption-text lc-error" role="status">Couldn't load audio — {sourceError}</span>
-						{:else}
-							{#if activeCh}<span class="lc-chapter">{activeCh.label}</span>{/if}
-							{#if caption}<span class="lc-caption-text">{caption}</span>{/if}
-						{/if}
-					</div>
-				{/if}
-				<div class="lc-timerow">
-					<div class="lc-progress">
-						<div class="lc-track" aria-hidden="true">
-							<div class="lc-fill" style:left="0" style:width="{fillPct}%"></div>
-							{#if pendingStartPct >= 0}
-								<div class="lc-pending" style:left="{pendingStartPct}%"></div>
-							{/if}
-							{#each ticks as t (t.id)}
-								<span class="lc-tick" style:left="{t.frac}%" title={t.label}></span>
-							{/each}
-							<span class="lc-head" style:left="{fillPct}%"></span>
-						</div>
-						<input
-							type="range"
-							class="lc-range"
-							min="0"
-							max={total > 0 ? total : 1}
-							step="0.05"
-							value={elapsed}
-							disabled={total <= 0}
-							aria-label="Playback position"
-							aria-valuetext="{formatTime(elapsed, useHours)} of {formatTime(total, useHours)}"
-							oninput={onSeekInput}
-						/>
-					</div>
-					<span class="lc-clock">
-						<span class="lc-clock-now">{formatTime(elapsed, useHours)}</span>
-						{#if total > 0}
-							<span class="lc-clock-sep" aria-hidden="true">/</span>
-							<span>{formatTime(total, useHours)}</span>
+				<div class="lc-caption">
+					{#if sourceError}
+						<span class="lc-caption-text lc-error" role="status">Couldn't load audio — {sourceError}</span>
+					{:else}
+						{#if activeCh}<span class="lc-chapter">{activeCh.label}</span>{/if}
+						{#if caption}
+							<span class="lc-caption-text" title={caption}>{caption}</span>
+						{:else if title}
+							<span class="lc-caption-text lc-caption-muted">{title}</span>
 						{/if}
-					</span>
+					{/if}
 				</div>
-			</div>
 
-			<div class="lc-side">
-				{#if voices.length > 1}
-					<label class="lc-voice">
-						<span class="lc-sr">Voice</span>
-						<select class="select select-sm select-bordered lc-voice-select" bind:value={voiceId} aria-label="Voice">
-							{#each voices as v (v.id)}
-								<option value={v.id}>{v.label}</option>
-							{/each}
-						</select>
-					</label>
-				{/if}
 				<button
 					type="button"
-					class="lc-tbtn lc-speed"
-					aria-label="Playback speed {speedLabel()}"
-					title="Speed · click to change, [ and ] step"
-					onclick={cycleSpeed}
+					class="lc-settings"
+					class:lc-settings-open={settingsOpen}
+					aria-haspopup="menu"
+					aria-expanded={settingsOpen}
+					aria-controls={settingsOpen ? `${uid}-settings` : undefined}
+					aria-label="Playback settings — speed {speedLabel()}{activeVoiceLabel && voices.length > 1 ? `, voice ${activeVoiceLabel}` : ''}"
+					title="Speed{voices.length > 1 ? ' & voice' : ''} · [ and ] step speed"
+					onclick={toggleSettings}
+					bind:this={settingsBtnEl}
 				>
-					{speedLabel()}
+					<span class="lc-speed">{speedLabel()}</span>
+					{#if voices.length > 1 && activeVoiceLabel}
+						<span class="lc-settings-dot" aria-hidden="true">·</span>
+						<span class="lc-voice-label">{activeVoiceLabel}</span>
+					{/if}
+					<svg class="lc-caret" viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+						<path d="M6 9l6 6 6-6" />
+					</svg>
 				</button>
+				{#if settingsOpen}
+					<div
+						id="{uid}-settings"
+						class="lc-menu"
+						role="menu"
+						aria-label="Playback settings"
+						tabindex="-1"
+						onkeydown={onSettingsKeydown}
+						bind:this={settingsMenuEl}
+						use:floating={{ anchor: settingsBtnEl, placement: 'bottom-end', flip: true, shift: true, offset: 6, onDismiss: dismissSettings }}
+					>
+						<div class="lc-menu-group" role="group" aria-labelledby="{uid}-speed-h">
+							<div class="lc-menu-heading" id="{uid}-speed-h">Speed</div>
+							<div class="lc-menu-speeds">
+								{#each LISTEN_SPEEDS as s (s)}
+									<button
+										type="button"
+										role="menuitemradio"
+										class="lc-menu-speed"
+										aria-checked={clampSpeed(speed) === s}
+										tabindex="-1"
+										onclick={() => pickSpeed(s)}
+									>
+										{formatListenSpeed(s)}
+									</button>
+								{/each}
+							</div>
+						</div>
+						{#if voices.length > 1}
+							<div class="lc-menu-group" role="group" aria-labelledby="{uid}-voice-h">
+								<div class="lc-menu-heading" id="{uid}-voice-h">Voice</div>
+								{#each voices as v (v.id)}
+									<button
+										type="button"
+										role="menuitemradio"
+										class="lc-menu-voice"
+										aria-checked={v.id === activeVoiceId}
+										tabindex="-1"
+										onclick={() => pickVoice(v.id)}
+									>
+										<svg class="lc-menu-check" viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+											<path d="M5 12.5l4.5 4.5L19 7.5" />
+										</svg>
+										<span>{v.label}</span>
+									</button>
+								{/each}
+							</div>
+						{/if}
+					</div>
+				{/if}
+
 				<button type="button" class="lc-tbtn lc-close" aria-label="Close player" title="Close · Esc" onclick={close}>
 					<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
 						<path d="M6 6l12 12M18 6L6 18" />
@@ -713,6 +795,67 @@
 				</button>
 			</div>
 
+			<!-- Row 2: where you are — sentence/15s transport · progress · clock. -->
+			<div class="lc-row lc-row-time">
+				<div class="lc-transport" role="group" aria-label="Transport">
+					<button type="button" class="lc-tbtn" aria-label="Previous sentence" title="Previous sentence · ←" onclick={prev}>
+						<svg viewBox="0 0 24 24" width="15" height="15" aria-hidden="true">
+							<path d="M19 5.5v13L9.5 12z" fill="currentColor" />
+							<path d="M6 5.5v13" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+						</svg>
+					</button>
+					<button type="button" class="lc-tbtn lc-skip" aria-label="Back 15 seconds" title="Back 15s · Shift+←" onclick={() => skip(-15)}>
+						<svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+							<path d="M11.5 4.5V2L7 5.5l4.5 3.5V6.5a6.5 6.5 0 1 1-6.5 6.5" />
+							<text x="12.7" y="17.8" font-size="7" font-weight="700" text-anchor="middle" fill="currentColor" stroke="none">15</text>
+						</svg>
+					</button>
+					<button type="button" class="lc-tbtn lc-skip" aria-label="Forward 15 seconds" title="Forward 15s · Shift+→" onclick={() => skip(15)}>
+						<svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+							<path d="M12.5 4.5V2l4.5 3.5-4.5 3.5V6.5a6.5 6.5 0 1 0 6.5 6.5" />
+							<text x="11.3" y="17.8" font-size="7" font-weight="700" text-anchor="middle" fill="currentColor" stroke="none">15</text>
+						</svg>
+					</button>
+					<button type="button" class="lc-tbtn" aria-label="Next sentence" title="Next sentence · →" onclick={next}>
+						<svg viewBox="0 0 24 24" width="15" height="15" aria-hidden="true">
+							<path d="M5 5.5v13L14.5 12z" fill="currentColor" />
+							<path d="M18 5.5v13" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+						</svg>
+					</button>
+				</div>
+				<div class="lc-progress">
+					<div class="lc-track" aria-hidden="true">
+						<div class="lc-fill" style:left="0" style:width="{fillPct}%"></div>
+						{#if pendingStartPct >= 0}
+							<div class="lc-pending" style:left="{pendingStartPct}%"></div>
+						{/if}
+						{#each ticks as t (t.id)}
+							<span class="lc-tick" style:left="{t.frac}%" title={t.label}></span>
+						{/each}
+						<span class="lc-head" style:left="{fillPct}%"></span>
+					</div>
+					<input
+						type="range"
+						class="lc-range"
+						min="0"
+						max={total > 0 ? total : 1}
+						step="0.05"
+						value={elapsed}
+						disabled={total <= 0}
+						aria-label="Playback position"
+						aria-valuetext="{formatTime(elapsed, useHours)} of {formatTime(total, useHours)}"
+						oninput={onSeekInput}
+					/>
+				</div>
+				<span class="lc-clock">
+					<span class="lc-clock-now">{formatTime(elapsed, useHours)}</span>
+					{#if total > 0}
+						<span class="lc-clock-sep" aria-hidden="true">/</span>
+						<span>{formatTime(total, useHours)}</span>
+					{/if}
+				</span>
+			</div>
+
 			<span class="lc-sr" role="status" aria-live="polite">
 				{status === 'buffering' ? 'Loading audio…' : status === 'ended' ? 'Finished' : ''}
 			</span>
@@ -806,21 +949,41 @@
 		}
 	}
 
-	/* ── The playback bar ──────────────────────────────────────────────────── */
+	/* ── The playback bar: two rows, never wider than its host ─────────────── */
+	.listen {
+		min-width: 0;
+		max-width: 100%;
+	}
+	.lc-bar,
+	.lc-bar *,
+	.lc-menu,
+	.lc-menu * {
+		box-sizing: border-box;
+	}
 	.lc-bar {
 		position: sticky;
 		top: 0;
 		z-index: 40;
 		display: flex;
-		align-items: center;
-		gap: 0.4rem;
-		padding: 0.4rem 0.55rem;
+		flex-direction: column;
+		gap: 0.2rem;
+		width: 100%;
+		max-width: 100%;
+		min-width: 0;
+		padding: 0.4rem 0.55rem 0.35rem;
 		background: var(--color-base-100);
 		border: 1px solid color-mix(in oklch, var(--color-base-content) 12%, transparent);
 		border-radius: var(--jatui-radius-box, 0.75rem);
 		box-shadow: 0 4px 16px color-mix(in oklch, var(--color-base-content) 10%, transparent);
 		font-size: 0.78rem;
 	}
+	.lc-row {
+		display: flex;
+		align-items: center;
+		gap: 0.4rem;
+		min-width: 0;
+		max-width: 100%;
+	}
 
 	.lc-play {
 		display: inline-grid;
@@ -845,6 +1008,7 @@
 	.lc-tbtn {
 		display: inline-grid;
 		place-items: center;
+		flex: none;
 		min-width: 1.75rem;
 		height: 1.75rem;
 		padding: 0 0.15rem;
@@ -862,25 +1026,20 @@
 	}
 	.lc-play:focus-visible,
 	.lc-tbtn:focus-visible,
-	.lc-voice-select:focus-visible {
+	.lc-settings:focus-visible,
+	.lc-menu button:focus-visible {
 		outline: 2px solid var(--color-primary);
 		outline-offset: 2px;
 	}
 
-	.lc-body {
-		display: flex;
-		flex-direction: column;
-		gap: 0.15rem;
-		flex: 1 1 auto;
-		min-width: 0;
-	}
-
+	/* Row 1 — the sentence takes every pixel the controls don't. */
 	.lc-caption {
 		display: flex;
-		align-items: baseline;
+		align-items: center;
 		gap: 0.5rem;
+		flex: 1 1 auto;
 		min-width: 0;
-		font-size: 0.72rem;
+		font-size: 0.8rem;
 		line-height: 1.35;
 	}
 	.lc-chapter {
@@ -895,21 +1054,162 @@
 		font-size: 0.62rem;
 	}
 	.lc-caption-text {
-		color: var(--lc-chrome);
+		flex: 1 1 auto;
+		color: var(--color-base-content);
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
 		min-width: 0;
 	}
+	.lc-caption-muted {
+		color: var(--lc-chrome);
+	}
 	.lc-error {
 		color: var(--color-error);
 	}
 
-	.lc-timerow {
+	/* One settings pill: "1.25× · Sarah" → speed + voice menu. */
+	.lc-settings {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.3rem;
+		flex: none;
+		min-width: 0;
+		max-width: 11rem;
+		height: 1.75rem;
+		padding: 0 0.5rem 0 0.6rem;
+		border: 1px solid color-mix(in oklch, var(--color-base-content) 14%, transparent);
+		border-radius: 999px;
+		background: none;
+		color: var(--lc-chrome);
+		font-size: 0.74rem;
+		font-variant-numeric: tabular-nums;
+		cursor: pointer;
+		transition: color var(--motion-fast, 150ms) var(--motion-glide, ease-out),
+			border-color var(--motion-fast, 150ms) var(--motion-glide, ease-out),
+			background-color var(--motion-fast, 150ms) var(--motion-glide, ease-out);
+	}
+	.lc-settings:hover,
+	.lc-settings-open {
+		color: var(--color-base-content);
+		border-color: color-mix(in oklch, var(--color-primary) 45%, transparent);
+		background: color-mix(in oklch, var(--color-base-content) 5%, transparent);
+	}
+	.lc-speed {
+		flex: none;
+		font-weight: 600;
+	}
+	.lc-settings-dot {
+		flex: none;
+		opacity: 0.5;
+	}
+	.lc-voice-label {
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	.lc-caret {
+		flex: none;
+		opacity: 0.6;
+		transition: transform var(--motion-fast, 150ms) var(--motion-glide, ease-out);
+	}
+	.lc-settings-open .lc-caret {
+		transform: rotate(180deg);
+	}
+
+	.lc-menu {
+		z-index: 60;
+		min-width: 12rem;
+		max-width: calc(100vw - 1rem);
+		padding: 0.35rem;
+		background: var(--color-base-100);
+		color: var(--color-base-content);
+		border: 1px solid color-mix(in oklch, var(--color-base-content) 12%, transparent);
+		border-radius: var(--jatui-radius-box, 0.75rem);
+		box-shadow: 0 8px 24px color-mix(in oklch, var(--color-base-content) 16%, transparent);
+		font-size: 0.78rem;
+	}
+	.lc-menu:focus {
+		outline: none;
+	}
+	.lc-menu-group + .lc-menu-group {
+		margin-top: 0.3rem;
+		padding-top: 0.3rem;
+		border-top: 1px solid color-mix(in oklch, var(--color-base-content) 10%, transparent);
+	}
+	.lc-menu-heading {
+		padding: 0.15rem 0.4rem 0.25rem;
+		color: var(--lc-chrome);
+		font-size: 0.62rem;
+		font-weight: 600;
+		text-transform: uppercase;
+		letter-spacing: 0.06em;
+	}
+	.lc-menu-speeds {
+		display: grid;
+		grid-template-columns: repeat(3, minmax(0, 1fr));
+		gap: 0.2rem;
+	}
+	.lc-menu-speed,
+	.lc-menu-voice {
+		border: none;
+		border-radius: var(--jatui-radius-field, 0.25rem);
+		background: none;
+		color: inherit;
+		font: inherit;
+		cursor: pointer;
+		transition: background-color var(--motion-fast, 150ms) var(--motion-glide, ease-out);
+	}
+	.lc-menu-speed {
+		height: 1.75rem;
+		font-variant-numeric: tabular-nums;
+	}
+	.lc-menu-voice {
 		display: flex;
 		align-items: center;
-		gap: 0.5rem;
+		gap: 0.4rem;
+		width: 100%;
+		min-height: 1.85rem;
+		padding: 0 0.45rem;
+		text-align: left;
+	}
+	.lc-menu-voice span {
 		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	.lc-menu-speed:hover,
+	.lc-menu-voice:hover {
+		background: color-mix(in oklch, var(--color-base-content) 8%, transparent);
+	}
+	.lc-menu-speed[aria-checked='true'] {
+		background: var(--color-primary);
+		color: var(--color-primary-content);
+		font-weight: 600;
+	}
+	.lc-menu-check {
+		flex: none;
+		visibility: hidden;
+		color: var(--color-primary);
+	}
+	.lc-menu-voice[aria-checked='true'] {
+		font-weight: 600;
+	}
+	.lc-menu-voice[aria-checked='true'] .lc-menu-check {
+		visibility: visible;
+	}
+
+	/* Row 2 — transport sits on the progress row, left of the bar. */
+	.lc-row-time {
+		gap: 0.5rem;
+	}
+	.lc-transport {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.1rem;
+		flex: none;
 	}
 
 	/* ── Progress: a native range for keyboard + AT, painted track behind ──── */
@@ -917,7 +1217,7 @@
 		position: relative;
 		flex: 1 1 auto;
 		height: 1rem;
-		min-width: 4rem;
+		min-width: 3rem;
 	}
 	.lc-progress:has(.lc-range:focus-visible) {
 		outline: 2px solid var(--color-primary);
@@ -989,6 +1289,7 @@
 		flex: none;
 		white-space: nowrap;
 		font-variant-numeric: tabular-nums;
+		color: var(--lc-chrome);
 	}
 	.lc-clock-now {
 		color: var(--color-base-content);
@@ -998,22 +1299,6 @@
 		opacity: 0.5;
 	}
 
-	.lc-side {
-		display: inline-flex;
-		align-items: center;
-		gap: 0.25rem;
-		flex: none;
-	}
-	.lc-voice-select {
-		max-width: 9rem;
-		height: 1.75rem;
-		min-height: 1.75rem;
-		font-size: 0.72rem;
-	}
-	.lc-speed {
-		min-width: 2.4rem;
-		justify-items: center;
-	}
 	.lc-close {
 		color: color-mix(in oklch, var(--color-base-content) 55%, transparent);
 	}
@@ -1029,15 +1314,26 @@
 		white-space: nowrap;
 		border: 0;
 	}
-	.lc-voice .lc-sr {
-		position: absolute;
-	}
 
 	.lc-audio {
 		display: none;
 	}
 
-	/* ── Mobile: the bar becomes a fixed sticky mini-bar ───────────────────── */
+	@media (prefers-reduced-motion: reduce) {
+		.lc-play,
+		.lc-settings,
+		.lc-caret,
+		.lc-menu-speed,
+		.lc-menu-voice {
+			transition: none;
+		}
+		.lc-play:hover,
+		.lc-play:active {
+			transform: none;
+		}
+	}
+
+	/* ── Mobile: the same two rows, as a fixed sticky mini-bar ─────────────── */
 	@media (max-width: 639px) {
 		.lc-bar {
 			position: fixed;
@@ -1049,16 +1345,23 @@
 			border-radius: var(--jatui-radius-box, 0.75rem) var(--jatui-radius-box, 0.75rem) 0 0;
 			border-bottom: none;
 			padding-bottom: calc(0.4rem + env(safe-area-inset-bottom, 0px));
-			gap: 0.3rem;
 		}
-		.lc-skip,
-		.lc-voice,
-		.lc-caption {
-			display: none;
+		.lc-row {
+			gap: 0.3rem;
 		}
 		.lc-play {
 			width: 2.4rem;
 			height: 2.4rem;
 		}
+		/* The pill keeps the speed; the voice name lives in the menu. */
+		.lc-settings-dot,
+		.lc-voice-label {
+			display: none;
+		}
+	}
+	@media (max-width: 359px) {
+		.lc-skip {
+			display: none;
+		}
 	}
 </style>

package/dist/components/ListenControl.svelte.d.ts

@@ -2,9 +2,10 @@ export type { ListenSegment, ListenChapter, ListenVoice, ListenSegmentPage, List
 /**
      * ListenControl — "listen to this page" as one compact control.
      *
-     * A small pill that expands into a playback bar: play/pause, −15s/+15s and
-     * previous/next sentence, speed (0.75–2×), a voice picker, a document-wide
-     * progress bar with chapter/section ticks, time, close. Built for hosts
+     * A small pill that expands into a two-row playback bar: play/pause, the
+     * current sentence, one speed (0.75–2×) + voice menu, close; then
+     * previous/next sentence, −15s/+15s, a document-wide progress bar with
+     * chapter/section ticks, and time. Built for hosts
      * that synthesize audio per sentence (TTS): the host supplies an async
      * SEGMENT SOURCE — sentences/paragraphs with ids → audio URLs — and the
      * player starts on the first chunk while the rest synthesizes, hatching
@@ -22,6 +23,14 @@ export type { ListenSegment, ListenChapter, ListenVoice, ListenSegmentPage, List
      * reports them) lay the timeline out immediately; unknown ones are
      * measured on load and ESTIMATED until then, self-correcting as they land.
      *
+     * ── Layout: two rows (jatui-zl9dp) ──────────────────────────────────────
+     * Row 1 is what you're hearing: play/pause, the chapter chip + current
+     * sentence (it gets ALL the remaining width), ONE settings pill folding
+     * speed + voice into a small menu, close. Row 2 is where you are: prev
+     * sentence, −15s, +15s, next sentence, then the progress bar and the
+     * clock. The bar is `box-sizing: border-box` + `max-width: 100%` with
+     * `min-width: 0` down the flex chain, so it never overflows its host.
+     *
      * The transport row borrows VideoPlayer's `kind="audio"` / `transport=
      * "band"` shape (round primary play, ghost transport buttons, tabular
      * clock) and reuses its pure time formatting (`video/time.ts`); the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@joewinke/jatui",
-  "version": "0.36.1",
+  "version": "0.36.2",
   "private": false,
   "description": "Shared Svelte 5 component library for JAT projects",
   "type": "module",