@joewinke/jatui 0.31.2 → 0.33.0

package/dist/components/VideoPlayer.svelte

@@ -9,6 +9,8 @@
 		VideoWaveform,
 		VideoSpeakerTalkTime
 	} from '../video/types';
+	// mos-777hj — chapter rail public types.
+	export type { RailChapter, RailChapterStatus } from '../video/chapterRail';
 	// mos-5lzns.30 — one-axis state, the light track, social markers.
 	export type { BandAxis, BandState } from '../video/band/axis';
 	export type { VideoLumaTrack } from '../video/band/luma';
@@ -79,8 +81,11 @@
 	 * colour, cycled per speaker — not brand colour).
 	 */
 
-	import { onMount, untrack } from 'svelte';
+	import { onMount, untrack, type Snippet } from 'svelte';
 	import { getDaisyUIColor, watchThemeChanges, clearColorCache } from '../utils/daisyuiColors';
+	import { listNav } from '../actions/listNav';
+	// mos-777hj — the chapter rail's pure state (ends, played checks, progress).
+	import { railChapters, activeRailIndex, type RailChapter } from '../video/chapterRail';
 	import type {
 		VideoBookmark,
 		VideoChapter,
@@ -246,6 +251,8 @@
 
 	let {
 		src,
+		kind = 'video',
+		transport: transportProp = undefined,
 		poster = null,
 		aspect = '16:9',
 		autoplay = false,
@@ -255,6 +262,9 @@
 		captionsLang = 'en',
 		captionsDefault = true,
 		chapters = [],
+		chapterRail: chapterRailProp = 'off',
+		onChapterSelect = undefined,
+		belowStage = undefined,
 		speakers = [],
 		transcript = [],
 		bookmarks = [],
@@ -331,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).
@@ -369,6 +396,33 @@
 		 */
 		captionsDefault?: boolean;
 		chapters?: VideoChapter[];
+		/**
+		 * mos-777hj — the live chapter rail. `'side'` (with chapters present)
+		 * renders a sticky chapter pane beside the main column at ≥64rem — one
+		 * row per chapter with time, title, status dot and summary, the active
+		 * row tracking the playhead (aria-current, auto-scroll), a progress
+		 * fill inside the active row and a played check behind the playhead —
+		 * and a horizontal chip strip under the player below 64rem. Rows seek
+		 * to the chapter and play; the active row carries the replay affordance
+		 * (clicking it again replays from its start). Keyboard: listNav j/k to
+		 * move, Enter to play, while the rail holds focus. Default `'off'` —
+		 * the rail is opt-in and leaves the player exactly as it was.
+		 */
+		chapterRail?: 'side' | 'off';
+		/**
+		 * Fires when the viewer picks a chapter (row click / Enter / replay):
+		 * the host pins its own view (e.g. a per-chapter visual panel) — the
+		 * rail itself always keeps time-tracking the playhead.
+		 */
+		onChapterSelect?: (chapter: VideoChapter, index: number) => void;
+		/**
+		 * Optional snippet rendered between the stage and the transcript — the
+		 * host's own content in the player's main column (e.g. a "now
+		 * discussing" panel bound to the active chapter). Designed for
+		 * `transcriptPosition: 'below'`; beside a side transcript it renders
+		 * under the stage in the stage's column.
+		 */
+		belowStage?: Snippet;
 		speakers?: VideoSpeakerTurn[];
 		transcript?: VideoTranscriptSegment[];
 		bookmarks?: VideoBookmark[];
@@ -688,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);
@@ -960,6 +1061,42 @@
 	const useHours = $derived(effectiveDuration >= 3600);
 
 	const sortedChapters = $derived(sortChapters(chapters));
+
+	// ── Chapter rail (mos-777hj) ─────────────────────────────────────────
+	/** The rail pane exists only when opted in AND there is something to rail. */
+	const railOn = $derived(chapterRailProp === 'side' && sortedChapters.length > 0);
+	/** Rows recomputed per playhead tick — ends, played checks, progress fill. */
+	const railRows = $derived(railOn ? railChapters(sortedChapters, effectiveDuration, currentTime) : []);
+	const railActive = $derived(railOn ? activeRailIndex(sortedChapters, currentTime) : -1);
+	let chapterRailEl: HTMLElement | null = $state(null);
+
+	/** Row click / Enter / replay: seek to the chapter and play it. */
+	function chapterGo(index: number) {
+		const ch = sortedChapters[index];
+		if (!ch) return;
+		seekTo(ch.startSec);
+		videoEl?.play()?.catch(() => {});
+		onChapterSelect?.(ch, index);
+	}
+
+	/** listNav onSelect — the element carries its row index. */
+	function onRailSelect(el: HTMLElement) {
+		const idx = Number(el.dataset.chapterIndex);
+		if (Number.isInteger(idx)) chapterGo(idx);
+	}
+
+	/** Keep the active row visible while playback tracks chapters. Nearest
+	 * only ever scrolls the rail's own overflow (never the page); smooth is
+	 * dropped under prefers-reduced-motion. */
+	$effect(() => {
+		if (!railOn || railActive < 0) return;
+		const row = chapterRailEl?.querySelector<HTMLElement>('.vp-chapter-row.active');
+		if (!row) return;
+		row.scrollIntoView({
+			block: 'nearest',
+			behavior: reduceMotion ? 'auto' : 'smooth'
+		});
+	});
 	const sortedTurns = $derived(sortTurns(speakers));
 	const sortedSegments = $derived(sortSegments(transcript));
 	const sortedBookmarks = $derived(sortBookmarks(bookmarks));
@@ -988,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
@@ -1094,6 +1234,16 @@
 		return { ...currentBandState };
 	}
 
+	/**
+	 * Callable on the instance (`bind:this`) — seek to an absolute second.
+	 * The host-side half of deep links (mos-777hj): a host that resolves its
+	 * own anchors (e.g. #chapter-<id>) seeks through this after mount, the
+	 * same place `startAt`/`?t=` seed from.
+	 */
+	export function seekToTime(sec: number) {
+		seekTo(sec);
+	}
+
 	const reportBand = createBandReporter(() => onBandChange);
 	$effect(() => {
 		const st = currentBandState;
@@ -1105,6 +1255,7 @@
 		PLAYER_KEYS.filter((row) => {
 			if (!row.when) return true;
 			if (row.when === 'chapters') return sortedChapters.length > 0;
+		if (row.when === 'rail') return railOn;
 			if (row.when === 'bookmarks') return onAddBookmark != null;
 			if (row.when === 'transcript') return sortedSegments.length > 0;
 			if (row.when === 'comments') return socialMarkers.comments.length > 0;
@@ -2532,6 +2683,13 @@
 		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.
+		if (chapterRailEl && target && chapterRailEl.contains(target)) return;
 		if (e.metaKey || e.ctrlKey || e.altKey) return;
 		const v = videoEl;
 		if (!v) return;
@@ -2786,13 +2944,16 @@
 	class="vp-root {className}"
 	bind:this={rootEl}
 	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}
@@ -2801,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
@@ -2813,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}
@@ -2832,6 +3002,8 @@
 				bind:this={videoEl}
 				bind:currentTime
 				bind:duration
+				bind:paused
+				onvolumechange={syncVolume}
 				ontimeupdate={handleTimeUpdate}
 				onloadedmetadata={onLoadedMetadata}
 				onseeked={() => {
@@ -2857,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"
 			>
@@ -2983,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
@@ -3012,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(); }}>
@@ -3058,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"
@@ -3092,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
@@ -3104,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}
@@ -3121,7 +3388,7 @@
 								mutedKeys = new Set();
 							}}
 						>
-							Clear filter
+							Show all speakers
 						</button>
 					{/if}
 				</div>
@@ -3144,6 +3411,79 @@
 		{/if}
 	</div>
 
+	{#if railOn}
+		<!-- mos-777hj — the live chapter rail: one row per chapter with time,
+		     title, status dot and summary. The active row tracks the playhead
+		     (aria-current + auto-scroll), fills its thin progress bar, and
+		     carries the replay affordance; played chapters wear a check. A row
+		     click seeks there and plays (clicking the active row again replays
+		     it from its start). listNav owns j/k + Enter while the rail holds
+		     focus (global:false scopes the listener to this pane; the root
+		     keydown handler skips events from inside it). ≥64rem the pane is a
+		     sticky column; below it collapses to a horizontal chip strip. -->
+		<nav
+			class="vp-chapters"
+			bind:this={chapterRailEl}
+			aria-label="Chapters"
+			use:listNav={{
+				itemSelector: '.vp-chapter-row',
+				onSelect: onRailSelect,
+				focusedClass: 'jk-focused',
+				global: false
+			}}
+		>
+			{#each railRows as ch, i (i)}
+				<button
+					type="button"
+					class="vp-chapter-row"
+					class:active={railActive === i}
+					class:done={ch.played}
+					data-chapter-index={i}
+					aria-current={railActive === i ? 'true' : undefined}
+					onclick={() => chapterGo(i)}
+				>
+					<span class="vp-chapter-head">
+						{#if ch.status}
+							<span class="vp-chapter-dot vp-chapter-dot-{ch.status}" aria-hidden="true"></span>
+						{/if}
+						<span class="vp-chapter-time">{formatTime(ch.startSec, useHours)}</span>
+						<span class="vp-chapter-title">{ch.title}</span>
+						{#if ch.played}
+							<svg class="vp-chapter-check" viewBox="0 0 16 16" width="11" height="11" aria-hidden="true">
+								<path d="M2.5 8.5 6 12l7.5-8" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" />
+							</svg>
+						{/if}
+						{#if railActive === i}
+							<!-- Replay affordance: the active row's click already replays
+							     from its start, so the icon is the affordance's label. -->
+							<svg class="vp-chapter-replay" viewBox="0 0 24 24" width="12" height="12" aria-hidden="true">
+								<path d="M3 12a9 9 0 1 0 2.64-6.36M3 4v4h4" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" />
+							</svg>
+						{/if}
+					</span>
+					{#if ch.summary}
+						<span class="vp-chapter-summary">{ch.summary}</span>
+					{/if}
+					{#if railActive === i}
+						<span
+							class="vp-chapter-bar"
+							aria-hidden="true"
+							style="--vp-chapter-progress: {ch.progress}"
+						>
+							<span class="vp-chapter-fill"></span>
+						</span>
+					{/if}
+				</button>
+			{/each}
+		</nav>
+	{/if}
+
+	{#if belowStage}
+		<!-- mos-777hj — the host's content in the main column: under the stage
+		     (and its band), above the transcript. -->
+		<div class="vp-below-stage">{@render belowStage()}</div>
+	{/if}
+
 	{#if sortedSegments.length > 0 && transcriptVisible}
 		<div
 			class="vp-transcript"
@@ -3160,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)
@@ -3168,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}
@@ -3180,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)
@@ -3188,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}
@@ -3276,6 +3622,244 @@
 		}
 	}
 
+	/* ── Chapter rail (mos-777hj) ────────────────────────────────────────
+	   Opt-in (`chapterRail="side"` + chapters). ≥64rem the pane is a sticky
+	   column on the right of the main content (below the stage when the
+	   transcript sits below, a third column beside a side transcript);
+	   below 64rem the same DOM flows as a horizontal chip strip between the
+	   player and the below-stage content — grid areas re-place the panes,
+	   the DOM order never changes. Token-only chrome, dot tones resolve
+	   DaisyUI semantic vars. */
+	.vp-below-stage {
+		min-width: 0;
+	}
+
+	.vp-chapters {
+		display: flex;
+		flex-direction: column;
+		gap: 1px;
+		min-width: 0;
+		background: var(--color-base-100);
+		border: var(--jatui-border-w, 1px) solid
+			color-mix(in oklch, var(--color-base-content) 12%, transparent);
+		border-radius: var(--jatui-radius-box, 0.5rem);
+		padding: var(--jatui-space-sm, 4px);
+		overflow-y: auto;
+	}
+
+	.vp-chapter-row {
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		flex-shrink: 0;
+		gap: 2px;
+		background: none;
+		border: none;
+		border-radius: var(--jatui-radius-field, 0.25rem);
+		padding: var(--jatui-space-sm, 4px) var(--jatui-space-md, 6px);
+		text-align: left;
+		cursor: pointer;
+		transition: background var(--motion-fast, 150ms) var(--motion-glide, ease-out);
+	}
+
+	.vp-chapter-row:hover {
+		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) 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. */
+	.vp-chapter-row.jk-focused {
+		outline: 2px solid color-mix(in oklch, var(--color-primary) 55%, transparent);
+		outline-offset: -2px;
+	}
+
+	.vp-chapter-row.done .vp-chapter-title {
+		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;
+		gap: var(--jatui-space-sm, 4px);
+		min-width: 0;
+	}
+
+	.vp-chapter-dot {
+		width: 0.5em;
+		height: 0.5em;
+		border-radius: var(--jatui-radius-selector, 0.375rem);
+		flex: none;
+		align-self: center;
+		background: var(--color-base-content);
+		opacity: 0.4;
+	}
+
+	.vp-chapter-dot-info {
+		background: var(--color-info);
+		opacity: 1;
+	}
+
+	.vp-chapter-dot-success {
+		background: var(--color-success);
+		opacity: 1;
+	}
+
+	.vp-chapter-dot-warning {
+		background: var(--color-warning);
+		opacity: 1;
+	}
+
+	.vp-chapter-dot-error {
+		background: var(--color-error);
+		opacity: 1;
+	}
+
+	.vp-chapter-time {
+		font-family: ui-monospace, monospace;
+		font-size: 0.66rem;
+		color: color-mix(in oklch, var(--color-base-content) 50%, transparent);
+		flex-shrink: 0;
+	}
+
+	.vp-chapter-title {
+		font-size: 0.76rem;
+		font-weight: 600;
+		color: var(--color-base-content);
+		flex: 1;
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.vp-chapter-check {
+		color: var(--color-success);
+		flex: none;
+		align-self: center;
+	}
+
+	.vp-chapter-replay {
+		color: color-mix(in oklch, var(--color-primary) 80%, transparent);
+		flex: none;
+		align-self: center;
+	}
+
+	.vp-chapter-summary {
+		font-size: 0.68rem;
+		line-height: 1.35;
+		color: color-mix(in oklch, var(--color-base-content) 60%, transparent);
+		overflow: hidden;
+		display: -webkit-box;
+		-webkit-box-orient: vertical;
+		-webkit-line-clamp: 2;
+	}
+
+	/* The active row's thin fill: transform, not width — a compositor move
+	   that never relayouts the row, stepping with the playhead tick. */
+	.vp-chapter-bar {
+		position: absolute;
+		left: var(--jatui-space-md, 6px);
+		right: var(--jatui-space-md, 6px);
+		bottom: 1px;
+		height: 2px;
+		border-radius: 999px;
+		background: color-mix(in oklch, var(--color-base-content) 10%, transparent);
+		overflow: hidden;
+		pointer-events: none;
+	}
+
+	.vp-chapter-fill {
+		display: block;
+		width: 100%;
+		height: 100%;
+		border-radius: inherit;
+		background: var(--color-primary);
+		transform: scaleX(var(--vp-chapter-progress, 0));
+		transform-origin: left center;
+		transition: transform 120ms linear;
+	}
+
+	@media (max-width: 63.999rem) {
+		/* The chip strip: same rows, laid horizontally under the player. */
+		.vp-chapters {
+			flex-direction: row;
+			gap: var(--jatui-space-xs, 2px);
+			overflow-x: auto;
+			overflow-y: hidden;
+			padding: var(--jatui-space-xs, 2px);
+		}
+
+		.vp-chapter-row {
+			flex: none;
+			justify-content: center;
+			max-width: 16rem;
+			padding: var(--jatui-space-xs, 2px) var(--jatui-space-sm, 4px);
+		}
+
+		.vp-chapter-summary,
+		.vp-chapter-bar {
+			display: none;
+		}
+
+		.vp-chapter-title {
+			max-width: 12rem;
+		}
+	}
+
+	@media (min-width: 64rem) {
+		.vp-root.vp-rail-side {
+			display: grid;
+			grid-template-columns: minmax(0, 1fr) minmax(13rem, 16rem);
+			grid-template-areas:
+				'main rail'
+				'below rail'
+				'transcript rail';
+			gap: var(--jatui-space-lg, 12px);
+			align-items: start;
+		}
+
+		.vp-root.vp-rail-side > .vp-main {
+			grid-area: main;
+		}
+
+		.vp-root.vp-rail-side > .vp-chapters {
+			grid-area: rail;
+			position: sticky;
+			top: var(--jatui-space-lg, 12px);
+			max-height: calc(100vh - 2 * var(--jatui-space-lg, 12px));
+		}
+
+		.vp-root.vp-rail-side > .vp-below-stage {
+			grid-area: below;
+		}
+
+		.vp-root.vp-rail-side > .vp-transcript {
+			grid-area: transcript;
+		}
+
+		/* Rail beside a side transcript (theater): three columns. */
+		.vp-root.vp-side.vp-rail-side {
+			grid-template-columns: minmax(0, 3fr) minmax(16rem, 2fr) minmax(11rem, 14rem);
+			grid-template-areas:
+				'main transcript rail'
+				'below transcript rail';
+		}
+	}
+
 	.vp-stage {
 		position: relative;
 	}
@@ -3340,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). */
@@ -3563,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 {
@@ -3613,7 +4314,10 @@
 	}
 
 	.vp-chip-clear {
+		background: none;
 		color: var(--color-primary);
+		text-decoration: underline;
+		text-underline-offset: 2px;
 	}
 
 	.vp-chip-dot {
@@ -3629,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. */
@@ -3704,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
@@ -3714,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);
@@ -3733,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 {
@@ -3747,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;
@@ -3838,9 +4587,17 @@
 		.vp-lane-span,
 		.vp-chip,
 		.vp-add-btn,
-		.vp-row {
+		.vp-row,
+		.vp-chapter-row,
+		.vp-chapter-fill,
+		.vp-play {
 			transition: none;
 		}
+
+		.vp-play:hover,
+		.vp-play:active {
+			transform: none;
+		}
 	}
 
 	/* ── Night (mos-5lzns.33) ─────────────────────────────────────────────