@joewinke/jatui 0.32.0 → 0.34.0

package/dist/components/VideoPlayer.svelte

@@ -251,6 +251,8 @@
 
 	let {
 		src,
+		kind = 'video',
+		transport: transportProp = undefined,
 		poster = null,
 		aspect = '16:9',
 		autoplay = false,
@@ -339,6 +341,23 @@
 		class: className = ''
 	}: {
 		src: string;
+		/**
+		 * What the media IS. `'audio'` (a podcast, a call recording, a brief)
+		 * renders NO stage: there is no picture to frame, so the player is the
+		 * band (the one timeline) plus its transport row. The media element
+		 * still plays, just never shows. `aspect`/`poster` are ignored. Default
+		 * `'video'`.
+		 */
+		kind?: 'video' | 'audio';
+		/**
+		 * Who owns play/pause, time and volume. `'native'` keeps the browser's
+		 * `<video controls>` bar (which carries its own timeline next to the
+		 * band). `'band'` drops the native controls and puts a transport row
+		 * on the band instead: play/pause, `current / total`, speed, mute +
+		 * volume, and fullscreen for video. One timeline, one set of controls.
+		 * Default: `'band'` for `kind="audio"`, `'native'` for video.
+		 */
+		transport?: 'native' | 'band';
 		poster?: string | null;
 		/**
 		 * Aspect ratio for the video stage — presentation-primitive prop (PRD).
@@ -723,6 +742,53 @@
 	let currentTime = $state(0);
 	let duration = $state(0);
 
+	// ── Band transport (kind="audio" / transport="band") ────────────────────
+	// Audio has no picture, so no stage; the band is the only timeline and
+	// the transport row under it carries play/pause, time, speed and volume.
+	const isAudio = $derived(kind === 'audio');
+	const bandTransport = $derived(isAudio || transportProp === 'band');
+	let paused = $state(true);
+	let volumeLevel = $state(1);
+	let mutedNow = $state(false);
+	let isFullscreen = $state(false);
+	function syncVolume() {
+		if (!videoEl) return;
+		volumeLevel = videoEl.volume;
+		mutedNow = videoEl.muted;
+	}
+	function togglePlay() {
+		const v = videoEl;
+		if (!v) return;
+		if (v.paused) void v.play().catch(() => {});
+		else v.pause();
+	}
+	function toggleVolumeMute() {
+		const v = videoEl;
+		if (!v) return;
+		v.muted = !v.muted;
+		if (!v.muted && v.volume === 0) v.volume = 0.5;
+	}
+	function onVolumeInput(e: Event) {
+		const v = videoEl;
+		if (!v) return;
+		const next = Number((e.currentTarget as HTMLInputElement).value);
+		v.volume = Math.min(1, Math.max(0, next));
+		v.muted = next === 0;
+	}
+	function toggleFullscreen() {
+		if (typeof document === 'undefined') return;
+		if (document.fullscreenElement) void document.exitFullscreen?.();
+		else void stageWrapEl?.requestFullscreen?.();
+	}
+	/** The speed button: the listening speeds people actually pick, in
+	 * order, wrapping back to 1×. `-`/`=` still walk the fine staircase. */
+	const SPEED_CYCLE = [1, 1.25, 1.5, 1.75, 2];
+	function cycleSpeed() {
+		baseRate = SPEED_CYCLE.find((s) => s > baseRate + 0.001) ?? 1;
+		applyRate();
+		flashOsd(formatSpeedLabel(baseRate));
+	}
+
 	// Canvas box, tracked so a resize (panel toggle, window resize) repaints.
 	let canvasW = $state(0);
 	let canvasH = $state(0);
@@ -1059,6 +1125,9 @@
 	const speakerIndex = $derived(buildSpeakerIndex(sortedTurns, sortedSegments));
 
 	const hasSpeakers = $derived(speakerIndex.size > 0);
+	/** Two or more voices: only then do talk time, solo and skip mean
+	 * anything, and only then does a transcript row need its speaker name. */
+	const multiSpeaker = $derived(speakerIndex.size > 1);
 
 	/**
 	 * Theme-derived speaker identity: colours + the fallback cycle in one read
@@ -2614,6 +2683,9 @@
 		const target = e.target as HTMLElement | null;
 		const tag = target?.tagName;
 		if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT' || target?.isContentEditable) return;
+		// Space/Enter on a focused button activates THAT button (play, a
+		// speaker chip, a transcript row); toggling playback too would undo it.
+		if (tag === 'BUTTON' && (e.key === ' ' || e.key === 'Enter')) return;
 		// mos-777hj — the chapter rail owns j/k (listNav) and Enter/Space (row
 		// activation) while focus is inside it; without this guard a rail `k`
 		// would also toggle play/pause and a rail `j` also seek ±5s.
@@ -2874,12 +2946,14 @@
 	class:vp-side={transcriptPosition === 'side' && sortedSegments.length > 0 && transcriptVisible}
 	class:vp-rail-side={railOn}
 	class:vp-one-axis={nativeBarHidden}
+	class:vp-band-transport={bandTransport}
+	class:vp-audio={isAudio}
 	class:vp-night-capable={nightPresent}
 	class:vp-night-surround={surroundMix > 0.001}
 	style:--vp-night-surround={surroundMix > 0.001 ? surroundMix.toFixed(3) : undefined}
 	data-band-axis={currentBandState.axis}
 	role="region"
-	aria-label="Video player"
+	aria-label={isAudio ? 'Audio player' : 'Video player'}
 	tabindex="-1"
 	onkeydown={onRootKeyDown}
 	onpointerdowncapture={maybeAskIdle}
@@ -2888,7 +2962,12 @@
 	onkeydowncapture={maybeAskIdle}
 >
 	<div class="vp-main">
-		<div class="vp-stage-wrap" bind:this={stageWrapEl}>
+		<div
+			class="vp-stage-wrap"
+			class:vp-stage-audio={isAudio}
+			bind:this={stageWrapEl}
+			onfullscreenchange={() => (isFullscreen = document.fullscreenElement === stageWrapEl)}
+		>
 		{#if nightPresent}
 			<!-- Bias light: the frame's own colours, blurred, spilled behind the
 			     picture. Earlier in the DOM than the (positioned) stage, so the
@@ -2900,9 +2979,13 @@
 				aria-hidden="true"
 			></div>
 		{/if}
-		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<!-- svelte-ignore a11y_no_static_element_interactions, a11y_click_events_have_key_events -->
+		<!-- With the band transport the native controls are gone, so a click
+		     on the picture plays/pauses (Space/K do the same from the keyboard). -->
 		<div
 			class="vp-stage"
+			class:vp-stage-clickable={bandTransport && !isAudio}
+			onclick={bandTransport && !isAudio ? togglePlay : undefined}
 			class:vp-stage-locked={stageAspect != null}
 			class:vp-night-capable={nightPresent || guardPresent}
 			class:vp-night-on={nightFrame != null}
@@ -2919,6 +3002,8 @@
 				bind:this={videoEl}
 				bind:currentTime
 				bind:duration
+				bind:paused
+				onvolumechange={syncVolume}
 				ontimeupdate={handleTimeUpdate}
 				onloadedmetadata={onLoadedMetadata}
 				onseeked={() => {
@@ -2944,8 +3029,8 @@
 				{loop}
 				crossorigin={crossorigin ?? undefined}
 				muted={effectiveAutoplay || undefined}
-				poster={poster ?? undefined}
-				controls
+				poster={isAudio ? undefined : (poster ?? undefined)}
+				controls={!bandTransport}
 				playsinline
 				class="vp-video"
 			>
@@ -3070,6 +3155,10 @@
 			</div>
 
 			<div class="vp-zoom" class:on={zoomLabelOn} aria-hidden="true">{zoomLabel}</div>
+			{#if isAudio}
+				<!-- No stage to float the readout over: it rides the band. -->
+				<div class="vp-osd vp-osd-band" class:on={osdOn} aria-hidden="true">{osd}</div>
+			{/if}
 
 			{#if hover}
 				<div
@@ -3099,8 +3188,7 @@
 			{/if}
 		</div>
 
-		<div class="vp-times">
-			<span>{formatTime(currentTime, useHours)}</span>
+		{#snippet timesMid()}
 			<span class="vp-times-mid">
 				{#if isZoomedNow()}
 					<button type="button" class="vp-reset-zoom" onclick={() => { resetZoom(); flashZoomLabel(); }}>
@@ -3145,28 +3233,118 @@
 					</button>
 				{/if}
 			</span>
-			<span>{formatTime(effectiveDuration, useHours)}</span>
-		</div>
+		{/snippet}
+
+		{#if bandTransport}
+			<!-- The band transport: the band above is the one timeline; this row
+			     carries everything the native bar used to (play/pause, time,
+			     speed, volume, fullscreen for video). -->
+			<div class="vp-times vp-transport">
+				<span class="vp-transport-start">
+					<button
+						type="button"
+						class="vp-play"
+						aria-label={paused ? 'Play' : 'Pause'}
+						title="{paused ? 'Play' : 'Pause'} · Space"
+						onclick={togglePlay}
+					>
+						{#if paused}
+							<svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
+								<path d="M8 5.5v13l10.5-6.5z" fill="currentColor" />
+							</svg>
+						{:else}
+							<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>
+						{/if}
+					</button>
+					<span class="vp-clock">
+						<span class="vp-clock-now">{formatTime(currentTime, useHours)}</span>
+						<span class="vp-clock-sep" aria-hidden="true">/</span>
+						<span class="vp-sr">of</span>
+						<span>{formatTime(effectiveDuration, useHours)}</span>
+					</span>
+				</span>
+				{@render timesMid()}
+				<span class="vp-transport-end">
+					<button
+						type="button"
+						class="vp-tbtn vp-speed"
+						aria-label="Playback speed {formatSpeedLabel(baseRate)}"
+						title="Speed · click to change, - and = step"
+						onclick={cycleSpeed}
+					>
+						{formatSpeedLabel(baseRate)}
+					</button>
+					<button
+						type="button"
+						class="vp-tbtn"
+						aria-label={mutedNow || volumeLevel === 0 ? 'Unmute' : 'Mute'}
+						aria-pressed={mutedNow}
+						title="{mutedNow ? 'Unmute' : 'Mute'} · M"
+						onclick={toggleVolumeMute}
+					>
+						<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+							<path d="M4 9.5h3.5L12 5.5v13l-4.5-4H4z" fill="currentColor" stroke="none" />
+							{#if mutedNow || volumeLevel === 0}
+								<path d="M16 9.5l5 5M21 9.5l-5 5" />
+							{:else}
+								<path d="M15.5 9a4 4 0 0 1 0 6" />
+								{#if volumeLevel > 0.5}<path d="M18 6.5a7.5 7.5 0 0 1 0 11" />{/if}
+							{/if}
+						</svg>
+					</button>
+					<input
+						type="range"
+						class="vp-volume"
+						min="0"
+						max="1"
+						step="0.05"
+						value={mutedNow ? 0 : volumeLevel}
+						aria-label="Volume"
+						aria-valuetext="{Math.round((mutedNow ? 0 : volumeLevel) * 100)}%"
+						oninput={onVolumeInput}
+					/>
+					{#if !isAudio}
+						<button
+							type="button"
+							class="vp-tbtn"
+							aria-label={isFullscreen ? 'Exit full screen' : 'Full screen'}
+							title={isFullscreen ? 'Exit full screen' : 'Full screen'}
+							onclick={toggleFullscreen}
+						>
+							<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+								{#if isFullscreen}
+									<path d="M9 4v5H4M15 4v5h5M9 20v-5H4M15 20v-5h5" />
+								{:else}
+									<path d="M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5" />
+								{/if}
+							</svg>
+						</button>
+					{/if}
+				</span>
+			</div>
+		{:else}
+			<div class="vp-times">
+				<span>{formatTime(currentTime, useHours)}</span>
+				{@render timesMid()}
+				<span>{formatTime(effectiveDuration, useHours)}</span>
+			</div>
+		{/if}
 
-		{#if hasSpeakers}
+		{#if multiSpeaker}
 			<!-- Talk-time doubles as the speaker legend: hover a chip to raise that
-			     speaker on the timeline, click to solo, and use its mute toggle to
-			     skip them. Identification through brightness, never a glow. -->
-			<div class="vp-talktime">
-				<div class="vp-talktime-bar">
-					{#each effectiveTalkTime as tt, i (talkTimeKey(tt) + ':' + i)}
-						<div
-							class="vp-talktime-seg"
-							style="width: {(tt.seconds / talkTimeTotal) * 100}%; background: {speakerColor(
-								talkTimeKey(tt)
-							)}"
-							title="{tt.speakerName ?? 'Unknown speaker'} — {formatDuration(tt.seconds)}"
-						></div>
-					{/each}
-				</div>
+			     speaker on the timeline, click to solo, and use its skip toggle to
+			     skip them. Identification through brightness, never a glow. Only
+			     with 2+ speakers: one voice has nothing to compare, solo or skip,
+			     and its talk time reads as a second, different duration. Labelled
+			     "Talk time" so a chip's seconds never read as the media's length. -->
+			<div class="vp-talktime" role="group" aria-label="Talk time by speaker">
+				<span class="vp-talktime-label" aria-hidden="true">Talk time</span>
 				<div class="vp-legend">
 					{#each effectiveTalkTime as tt, i (talkTimeKey(tt) + ':' + i)}
 						{@const key = talkTimeKey(tt)}
+						{@const name = tt.speakerName ?? 'Unknown speaker'}
 						<span class="vp-legend-item">
 							<button
 								type="button"
@@ -3179,10 +3357,11 @@
 								onblur={() => (highlightKey = null)}
 								onclick={() => toggleSolo(key)}
 								aria-pressed={soloKey === key}
-								title="Solo {tt.speakerName ?? 'Unknown speaker'}"
+								aria-label="{name}, talked {formatDuration(tt.seconds)}. Play only {name}"
+								title="Play only {name}"
 							>
 								<span class="vp-chip-dot" style="background: {speakerColor(key)}"></span>
-								{tt.speakerName ?? 'Unknown speaker'}
+								{name}
 								<span class="vp-chip-time">{formatDuration(tt.seconds)}</span>
 							</button>
 							<button
@@ -3191,11 +3370,12 @@
 								class:on={mutedKeys.has(key)}
 								onclick={() => toggleMute(key)}
 								aria-pressed={mutedKeys.has(key)}
-								aria-label="{mutedKeys.has(key) ? 'Unskip' : 'Skip'} {tt.speakerName ??
-									'Unknown speaker'}"
-								title="{mutedKeys.has(key) ? 'Unskip' : 'Skip'} this speaker"
+								aria-label="Skip {name}"
+								title="{mutedKeys.has(key) ? 'Stop skipping' : 'Skip'} {name}"
 							>
-								{mutedKeys.has(key) ? '🔇' : '🔈'}
+								<svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+									<path d="M5 6l8 6-8 6zM18 6v12" />
+								</svg>
 							</button>
 						</span>
 					{/each}
@@ -3208,7 +3388,7 @@
 								mutedKeys = new Set();
 							}}
 						>
-							Clear filter
+							Show all speakers
 						</button>
 					{/if}
 				</div>
@@ -3320,6 +3500,7 @@
 					<button
 						type="button"
 						class="vp-row"
+						class:vp-row-one={!multiSpeaker}
 						class:active={activeSegment?.id === seg.id}
 						class:vp-dim={highlightKey != null
 							? highlightKey !== speakerKeyOf(seg)
@@ -3328,9 +3509,11 @@
 						onclick={() => seekTo(seg.startSec)}
 					>
 						<span class="vp-row-time">{formatTime(seg.startSec, useHours)}</span>
-						<span class="vp-row-speaker" style="color: {speakerColor(speakerKeyOf(seg))}">
-							{seg.speakerName ?? 'Unknown speaker'}
-						</span>
+						{#if multiSpeaker}
+							<span class="vp-row-speaker" style="color: {speakerColor(speakerKeyOf(seg))}">
+								{seg.speakerName ?? 'Unknown speaker'}
+							</span>
+						{/if}
 						<span class="vp-row-text">{seg.text}</span>
 					</button>
 				{/each}
@@ -3340,6 +3523,7 @@
 					<button
 						type="button"
 						class="vp-row"
+						class:vp-row-one={!multiSpeaker}
 						class:active={activeSegment?.id === seg.id}
 						class:vp-dim={highlightKey != null
 							? highlightKey !== speakerKeyOf(seg)
@@ -3348,9 +3532,11 @@
 						onclick={() => seekTo(seg.startSec)}
 					>
 						<span class="vp-row-time">{formatTime(seg.startSec, useHours)}</span>
-						<span class="vp-row-speaker" style="color: {speakerColor(speakerKeyOf(seg))}">
-							{seg.speakerName ?? 'Unknown speaker'}
-						</span>
+						{#if multiSpeaker}
+							<span class="vp-row-speaker" style="color: {speakerColor(speakerKeyOf(seg))}">
+								{seg.speakerName ?? 'Unknown speaker'}
+							</span>
+						{/if}
 						<span class="vp-row-text">{seg.text}</span>
 					</button>
 				{/each}
@@ -3465,6 +3651,7 @@
 		position: relative;
 		display: flex;
 		flex-direction: column;
+		flex-shrink: 0;
 		gap: 2px;
 		background: none;
 		border: none;
@@ -3479,9 +3666,13 @@
 		background: color-mix(in oklch, var(--color-base-content) 8%, transparent);
 	}
 
+	/* Active = a tinted row plus a primary title; no side stripe. */
 	.vp-chapter-row.active {
-		background: color-mix(in oklch, var(--color-primary) 14%, transparent);
-		box-shadow: inset 2px 0 0 var(--color-primary);
+		background: color-mix(in oklch, var(--color-primary) 12%, transparent);
+	}
+
+	.vp-chapter-row.active .vp-chapter-title {
+		color: var(--color-primary);
 	}
 
 	/* listNav's cursor (j/k) — same family as the hover/active surfaces. */
@@ -3494,6 +3685,12 @@
 		color: color-mix(in oklch, var(--color-base-content) 55%, transparent);
 	}
 
+	/* The playhead's chapter reads as current even once its span is played
+	   (playback ran past the last tagged line). */
+	.vp-chapter-row.done.active .vp-chapter-title {
+		color: var(--color-primary);
+	}
+
 	.vp-chapter-head {
 		display: flex;
 		align-items: baseline;
@@ -3608,6 +3805,7 @@
 
 		.vp-chapter-row {
 			flex: none;
+			justify-content: center;
 			max-width: 16rem;
 			padding: var(--jatui-space-xs, 2px) var(--jatui-space-sm, 4px);
 		}
@@ -3726,10 +3924,133 @@
 	}
 
 	.vp-root:hover .vp-band,
-	.vp-band:focus-within {
+	.vp-band:focus-within,
+	.vp-band-transport .vp-band {
+		/* With the band transport the band is the ONLY timeline: never ambient. */
 		opacity: 1;
 	}
 
+	/* Audio: no picture, so no stage at all. The element still plays. */
+	.vp-stage-audio {
+		display: none;
+	}
+
+	.vp-stage-clickable {
+		cursor: pointer;
+	}
+
+	/* The OSD's band seat (audio has no stage to float it over). */
+	.vp-osd-band {
+		top: 0;
+		left: 0;
+		max-width: 100%;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		z-index: 4;
+	}
+
+	/* ── Band transport row ─────────────────────────────────────────────── */
+	.vp-transport {
+		font-size: 0.75rem;
+	}
+
+	.vp-transport-start,
+	.vp-transport-end {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--jatui-space-sm, 4px);
+		min-width: 0;
+	}
+
+	.vp-play {
+		display: inline-grid;
+		place-items: center;
+		width: 2rem;
+		height: 2rem;
+		flex: none;
+		border: none;
+		border-radius: 999px;
+		background: var(--color-primary);
+		color: var(--color-primary-content);
+		cursor: pointer;
+		transition: transform var(--motion-fast, 150ms) var(--motion-glide, ease-out);
+	}
+
+	.vp-play:hover {
+		transform: scale(1.06);
+	}
+
+	.vp-play:active {
+		transform: scale(0.96);
+	}
+
+	.vp-clock {
+		display: inline-flex;
+		gap: 0.3em;
+		margin-left: var(--jatui-space-xs, 2px);
+		white-space: nowrap;
+	}
+
+	.vp-clock-now {
+		color: var(--color-base-content);
+		font-weight: 600;
+	}
+
+	.vp-clock-sep {
+		opacity: 0.5;
+	}
+
+	.vp-tbtn {
+		display: inline-grid;
+		place-items: center;
+		min-width: 1.75rem;
+		height: 1.75rem;
+		padding: 0 var(--jatui-space-xs, 2px);
+		border: none;
+		border-radius: var(--jatui-radius-field, 0.25rem);
+		background: none;
+		color: color-mix(in oklch, var(--color-base-content) 70%, transparent);
+		font-size: inherit;
+		font-variant-numeric: tabular-nums;
+		cursor: pointer;
+	}
+
+	.vp-tbtn:hover {
+		color: var(--color-base-content);
+		background: color-mix(in oklch, var(--color-base-content) 8%, transparent);
+	}
+
+	.vp-play:focus-visible,
+	.vp-tbtn:focus-visible,
+	.vp-volume:focus-visible {
+		outline: 2px solid var(--color-primary);
+		outline-offset: 2px;
+	}
+
+	.vp-speed {
+		min-width: 2.5rem;
+	}
+
+	.vp-volume {
+		width: 4.5rem;
+		accent-color: var(--color-primary);
+		cursor: pointer;
+	}
+
+	/* A fingertip sets volume with the device buttons; the slider is noise.
+	   The play button grows to a full 44px target (and stays round). */
+	@media (pointer: coarse) {
+		.vp-volume {
+			display: none;
+		}
+
+		.vp-play {
+			width: 2.75rem;
+			height: 2.75rem;
+		}
+	}
+
 	/* One time axis: while the band owns it, the native timeline stands down.
 	   Only Chromium exposes it; elsewhere this matches nothing and the native
 	   bar simply stays (see video/band/axis.ts). */
@@ -3949,20 +4270,14 @@
 	/* Talk-time + legend */
 	.vp-talktime {
 		display: flex;
-		flex-direction: column;
-		gap: var(--jatui-space-sm, 4px);
-	}
-
-	.vp-talktime-bar {
-		display: flex;
-		height: 0.6rem;
-		border-radius: 999px;
-		overflow: hidden;
-		background: color-mix(in oklch, var(--color-base-content) 10%, transparent);
+		flex-wrap: wrap;
+		align-items: center;
+		gap: var(--jatui-space-sm, 4px) var(--jatui-space-base, 8px);
 	}
 
-	.vp-talktime-seg {
-		height: 100%;
+	.vp-talktime-label {
+		font-size: 0.68rem;
+		color: color-mix(in oklch, var(--color-base-content) 60%, transparent);
 	}
 
 	.vp-legend {
@@ -3999,7 +4314,10 @@
 	}
 
 	.vp-chip-clear {
+		background: none;
 		color: var(--color-primary);
+		text-decoration: underline;
+		text-underline-offset: 2px;
 	}
 
 	.vp-chip-dot {
@@ -4015,18 +4333,31 @@
 	}
 
 	.vp-mute {
+		display: inline-grid;
+		place-items: center;
+		width: 1.5rem;
+		height: 1.5rem;
 		background: none;
 		border: none;
-		padding: 0 var(--jatui-space-xs, 2px);
-		font-size: 0.7rem;
-		line-height: 1;
+		border-radius: var(--jatui-radius-field, 0.25rem);
+		padding: 0;
+		color: color-mix(in oklch, var(--color-base-content) 50%, transparent);
 		cursor: pointer;
-		opacity: 0.5;
 	}
 
-	.vp-mute.on,
 	.vp-mute:hover {
-		opacity: 1;
+		color: var(--color-base-content);
+		background: color-mix(in oklch, var(--color-base-content) 8%, transparent);
+	}
+
+	.vp-mute.on {
+		color: var(--color-primary);
+	}
+
+	.vp-mute:focus-visible,
+	.vp-chip:focus-visible {
+		outline: 2px solid var(--color-primary);
+		outline-offset: 1px;
 	}
 
 	/* Add-bookmark row — only rendered when the host wired onAddBookmark. */
@@ -4090,6 +4421,7 @@
 		border-radius: var(--jatui-radius-box, 0.5rem);
 		padding: var(--jatui-space-sm, 4px);
 		min-width: 0;
+		container: vp-transcript / inline-size;
 	}
 
 	/* Windowing stand-ins (mos-5lzns.95): fixed-height blocks sized by the
@@ -4100,11 +4432,21 @@
 		pointer-events: none;
 	}
 
+	/* Rows are a three-column grid (time | speaker | text) so every line's
+	   text starts on one edge whatever the speaker's name length; one-voice
+	   transcripts drop the speaker column. A narrow pane (container query,
+	   not viewport: the player often sits in a narrow column) stacks the
+	   speaker above the text. */
 	.vp-row {
-		display: flex;
+		display: grid;
+		grid-template-columns: 2.75rem minmax(0, 6.5rem) minmax(0, 1fr);
 		align-items: baseline;
-		flex-wrap: wrap;
-		gap: var(--jatui-space-sm, 4px);
+		/* Never shrink inside the capped pane: a host's touch min-height
+		   replaces min-height:auto, and the flex column would then squash
+		   rows to that floor and overlap their text. */
+		flex-shrink: 0;
+		column-gap: var(--jatui-space-base, 8px);
+		row-gap: 0;
 		background: none;
 		border: none;
 		border-radius: var(--jatui-radius-field, 0.25rem);
@@ -4119,8 +4461,11 @@
 	}
 
 	.vp-row.active {
-		background: color-mix(in oklch, var(--color-primary) 14%, transparent);
-		box-shadow: inset 2px 0 0 var(--color-primary);
+		background: color-mix(in oklch, var(--color-primary) 12%, transparent);
+	}
+
+	.vp-row.active .vp-row-time {
+		color: var(--color-primary);
 	}
 
 	.vp-row-time {
@@ -4133,14 +4478,32 @@
 	.vp-row-speaker {
 		font-size: 0.72rem;
 		font-weight: 600;
-		flex-shrink: 0;
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
 	}
 
 	.vp-row-text {
-		font-size: 0.76rem;
+		font-size: 0.8125rem;
+		line-height: 1.45;
 		color: color-mix(in oklch, var(--color-base-content) 85%, transparent);
-		flex: 1;
-		min-width: 10rem;
+		min-width: 0;
+	}
+
+	.vp-row.vp-row-one {
+		grid-template-columns: 2.75rem minmax(0, 1fr);
+	}
+
+	@container vp-transcript (max-width: 26rem) {
+		.vp-row {
+			grid-template-columns: 2.75rem minmax(0, 1fr);
+		}
+
+		.vp-row-speaker,
+		.vp-row-text {
+			grid-column: 2;
+		}
 	}
 
 	/* Keyboard help overlay — the `?` surface. Keycaps first, description after;
@@ -4226,9 +4589,15 @@
 		.vp-add-btn,
 		.vp-row,
 		.vp-chapter-row,
-		.vp-chapter-fill {
+		.vp-chapter-fill,
+		.vp-play {
 			transition: none;
 		}
+
+		.vp-play:hover,
+		.vp-play:active {
+			transform: none;
+		}
 	}
 
 	/* ── Night (mos-5lzns.33) ─────────────────────────────────────────────