@joewinke/jatui 0.2.28 → 0.2.30

package/dist/components/VideoPlayer.svelte

@@ -0,0 +1,1592 @@
+<script lang="ts">
+	/**
+	 * VideoPlayer — one video surface for everything, from a bare mp4 to a
+	 * fully-analysed recording.
+	 *
+	 * Marries two prior implementations rather than inventing a third:
+	 *
+	 *  1. extension-library's framework-agnostic `mountPlayer` (player.js) —
+	 *     the timeline band: waveform envelope as the scrubber, chapters as
+	 *     structure inside it, diarized speaker colouring, bookmark diamonds,
+	 *     scroll-to-zoom, hover card with "what's being said here".
+	 *  2. jatui's TranscriptPlayer — the transcript pane: click a line to seek,
+	 *     active line auto-scroll, solo-speaker playback, talk-time bars.
+	 *
+	 * EVERY intelligence prop is optional. A bare `<VideoPlayer {src} />` still
+	 * gets the band (a real scrubber with hover-time, click-to-seek, keyboard
+	 * seek), wheel volume and the keyboard map; chapters, speakers, waveform,
+	 * transcript, bookmarks and talk-time each light up their own pane as the
+	 * data exists. Nothing shifts layout when data arrives late (diarization is
+	 * slow) — the band's slots are reserved from the first frame.
+	 *
+	 * ── Design notes carried over from player.js ────────────────────────────
+	 * · ONE time axis. Every position — waveform bars, chapter flags, bookmarks,
+	 *   the speaker lane, click/hover-to-seek — maps through secToFrac/fracToSec,
+	 *   so scroll-to-zoom is one piece of state everything else respects for free.
+	 * · ONE speaker surface. With a waveform, the envelope's own bars wear the
+	 *   turn colours; the slim lane under it paints only as the no-waveform
+	 *   fallback. Never two stacked time-parallel strips.
+	 * · Chapter flags sit on the TOP edge, bookmark diamonds on the BOTTOM edge —
+	 *   same idea (a marker on the timeline), different origin (the model's vs.
+	 *   yours), so the two families are never confused at a glance.
+	 * · The wheel means different things in different regions, and each region is
+	 *   its own hover target so nothing is ambiguous: over the video it's volume
+	 *   (shift = seek); over the band it's zoom.
+	 *
+	 * Deliberately NOT ported: player.js's trim region (in/out handles). That's
+	 * clip-editing, not playback, and belongs in an editor component.
+	 *
+	 * Theming is token-only — DaisyUI semantic vars for chrome, resolved at
+	 * runtime via `getDaisyUIColor` for the canvas, repainted on theme change.
+	 * Speaker hues follow TranscriptPlayer's oklch palette (data-driven identity
+	 * colour, cycled per speaker — not brand colour).
+	 */
+
+	import { onMount, untrack } from 'svelte';
+	import { getDaisyUIColor, watchThemeChanges, clearColorCache } from '../utils/daisyuiColors';
+
+	/** A model-authored marker: the video's structure. */
+	export interface VideoChapter {
+		startSec: number;
+		title: string;
+		/** Optional captured still, shown in the band's hover card. */
+		thumbUrl?: string | null;
+	}
+
+	/** A diarized turn (or an ad read, `ad: true`). Structurally accepts meeting data. */
+	export interface VideoSpeakerTurn {
+		startSec: number;
+		endSec: number;
+		speakerIdentity?: string | null;
+		speakerName?: string | null;
+		/** Explicit oklch hue (0–360). Omit to take the next palette colour. */
+		hue?: number | null;
+		/** Ad read — shares the lane but reads as not-a-person. */
+		ad?: boolean;
+	}
+
+	/** Transcript line. Structurally compatible with TranscriptPlayer's `TranscriptSegment`. */
+	export interface VideoTranscriptSegment {
+		id: string;
+		startSec: number;
+		endSec: number;
+		speakerIdentity?: string | null;
+		speakerName?: string | null;
+		text: string;
+	}
+
+	/** A user-authored marker. Structurally compatible with `TranscriptBookmark`. */
+	export interface VideoBookmark {
+		playbackSec: number;
+		label?: string | null;
+		note?: string | null;
+		participantName?: string | null;
+	}
+
+	/** Precomputed audio envelope. `peaks` are normalised against their own max. */
+	export interface VideoWaveform {
+		peaks: number[];
+		/** Seconds the peaks span. Defaults to the video's duration. */
+		durationSec?: number;
+	}
+
+	/** Per-speaker totals. Structurally compatible with `TranscriptSpeakerTalkTime`. */
+	export interface VideoSpeakerTalkTime {
+		speakerIdentity?: string | null;
+		speakerName?: string | null;
+		seconds: number;
+	}
+
+	/**
+	 * Speaker identity palette — the same small distinct oklch set TranscriptPlayer
+	 * cycles, so a speaker reads as the same colour in both components.
+	 */
+	const SPEAKER_PALETTE = [
+		'oklch(0.70 0.16 250)', // blue
+		'oklch(0.68 0.18 145)', // green
+		'oklch(0.78 0.16 85)', // amber
+		'oklch(0.68 0.19 25)', // red
+		'oklch(0.68 0.16 300)', // violet
+		'oklch(0.72 0.14 200)' // cyan
+	];
+
+	const ALL_KEY = '__all__';
+	const UNKNOWN_KEY = '__unknown__';
+
+	let {
+		src,
+		poster = null,
+		captionsSrc = null,
+		captionsLabel = 'Captions',
+		captionsLang = 'en',
+		chapters = [],
+		speakers = [],
+		transcript = [],
+		bookmarks = [],
+		waveform = null,
+		talkTime = [],
+		startAt = null,
+		transcriptPosition = 'below',
+		transcriptMaxHeight = '18rem',
+		onTimeUpdate = undefined,
+		onAddBookmark = undefined,
+		onBookmarkContext = undefined,
+		class: className = ''
+	}: {
+		src: string;
+		poster?: string | null;
+		captionsSrc?: string | null;
+		captionsLabel?: string;
+		captionsLang?: string;
+		chapters?: VideoChapter[];
+		speakers?: VideoSpeakerTurn[];
+		transcript?: VideoTranscriptSegment[];
+		bookmarks?: VideoBookmark[];
+		waveform?: VideoWaveform | null;
+		talkTime?: VideoSpeakerTalkTime[];
+		/** Seek here once metadata lands (a queued seek never fires on a later source). */
+		startAt?: number | null;
+		transcriptPosition?: 'below' | 'side';
+		transcriptMaxHeight?: string;
+		onTimeUpdate?: (video: HTMLVideoElement) => void;
+		/** Present ⇒ the band grows an "add bookmark at current time" control. */
+		onAddBookmark?: (playbackSec: number, label: string) => void;
+		/** Right-click on the band. The host owns the panel; this only hit-tests. */
+		onBookmarkContext?: (
+			sec: number,
+			existing: VideoBookmark | null,
+			clientX: number,
+			clientY: number
+		) => void;
+		class?: string;
+	} = $props();
+
+	// ── Element refs + media state ──────────────────────────────────────────
+	let videoEl: HTMLVideoElement | undefined = $state();
+	let canvasEl: HTMLCanvasElement | undefined = $state();
+
+	let currentTime = $state(0);
+	let duration = $state(0);
+
+	// Canvas box, tracked so a resize (panel toggle, window resize) repaints.
+	let canvasW = $state(0);
+	let canvasH = $state(0);
+	// Bumped by the theme observer so the draw effect re-runs on a theme swap.
+	let themeTick = $state(0);
+
+	// ── Band interaction state ──────────────────────────────────────────────
+	let viewStart = $state(0);
+	let viewEnd = $state(0); // 0 until a duration is known
+	let hoverChapter = $state(-1);
+	let hover: {
+		x: number;
+		title: string;
+		text: string;
+		thumb: string | null;
+		isBookmark: boolean;
+	} | null = $state(null);
+	let zoomLabel = $state('');
+	let zoomLabelOn = $state(false);
+	let osd = $state(''); // transient wheel readout (volume / seek)
+	let osdOn = $state(false);
+
+	// ── Speaker filter state ────────────────────────────────────────────────
+	let soloKey = $state(ALL_KEY);
+	let mutedKeys = $state(new Set<string>());
+	let highlightKey: string | null = $state(null);
+	let bookmarkLabel = $state('');
+
+	let zoomTimer: ReturnType<typeof setTimeout> | null = null;
+	let osdTimer: ReturnType<typeof setTimeout> | null = null;
+
+	// Row refs for transcript auto-scroll. Plain object — refs are written on
+	// mount and only read from inside an effect, never used as a reactive source.
+	let rowRefs: Record<string, HTMLButtonElement> = {};
+
+	// ── Derived data ────────────────────────────────────────────────────────
+	const effectiveDuration = $derived(
+		Number.isFinite(duration) && duration > 0 ? duration : (waveform?.durationSec ?? 0)
+	);
+	const useHours = $derived(effectiveDuration >= 3600);
+
+	const sortedChapters = $derived(
+		[...chapters]
+			.filter((c) => c && Number.isFinite(c.startSec) && c.startSec >= 0)
+			.sort((a, b) => a.startSec - b.startSec)
+	);
+	const sortedTurns = $derived(
+		[...speakers]
+			.filter(
+				(t) =>
+					t &&
+					Number.isFinite(t.startSec) &&
+					Number.isFinite(t.endSec) &&
+					t.endSec > t.startSec
+			)
+			.sort((a, b) => a.startSec - b.startSec)
+	);
+	const sortedSegments = $derived(
+		[...transcript]
+			.filter((s) => s && Number.isFinite(s.startSec))
+			.sort((a, b) => a.startSec - b.startSec)
+	);
+	const sortedBookmarks = $derived(
+		[...bookmarks]
+			.filter((b) => b && Number.isFinite(b.playbackSec) && b.playbackSec >= 0)
+			.sort((a, b) => a.playbackSec - b.playbackSec)
+	);
+
+	/** Peaks normalised to 0–1 against their own max, so 0–1, 0–99 and 0–255 inputs all work. */
+	const peaks = $derived.by(() => {
+		const raw = waveform?.peaks;
+		if (!Array.isArray(raw) || raw.length === 0) return null;
+		let max = 0;
+		for (const p of raw) if (Number.isFinite(p) && p > max) max = p;
+		if (max <= 0) return null;
+		return raw.map((p) => (Number.isFinite(p) ? Math.max(0, p) / max : 0));
+	});
+	const hasWave = $derived(!!peaks);
+
+	/**
+	 * Ordered speaker registry, built from turns first then transcript, so the
+	 * palette index is stable across both panes and the legend.
+	 */
+	const speakerIndex = $derived.by(() => {
+		const map = new Map<string, { key: string; name: string; hue: number | null }>();
+		const add = (
+			identity: string | null | undefined,
+			name: string | null | undefined,
+			hue: number | null | undefined
+		) => {
+			const key = identity ?? name ?? UNKNOWN_KEY;
+			const existing = map.get(key);
+			if (existing) {
+				if (existing.hue == null && hue != null) existing.hue = hue;
+				return;
+			}
+			map.set(key, { key, name: name ?? 'Unknown speaker', hue: hue ?? null });
+		};
+		for (const t of sortedTurns) {
+			if (t.ad) continue;
+			add(t.speakerIdentity, t.speakerName, t.hue ?? null);
+		}
+		for (const s of sortedSegments) add(s.speakerIdentity, s.speakerName, null);
+		return map;
+	});
+
+	const hasSpeakers = $derived(speakerIndex.size > 0);
+
+	/**
+	 * key → identity colour, resolved ONCE per data change. draw() asks for a
+	 * colour per rendered column and reruns on every playhead tick, so this must
+	 * never be an indexOf scan at call time.
+	 */
+	const speakerColors = $derived.by(() => {
+		const map = new Map<string, string>();
+		let i = 0;
+		for (const [key, entry] of speakerIndex) {
+			map.set(
+				key,
+				entry.hue != null
+					? `oklch(0.72 0.14 ${entry.hue})`
+					: SPEAKER_PALETTE[i % SPEAKER_PALETTE.length]
+			);
+			i++;
+		}
+		return map;
+	});
+
+	/** With an envelope the bars carry the hues; the lane is the no-waveform fallback only. */
+	const laneCarriesSpeakers = $derived(!hasWave && sortedTurns.length > 0);
+
+	const effectiveTalkTime = $derived.by(() => {
+		if (talkTime.length > 0) {
+			return [...talkTime].sort((a, b) => b.seconds - a.seconds);
+		}
+		const totals = new Map<string, VideoSpeakerTalkTime & { key: string }>();
+		const bump = (
+			identity: string | null | undefined,
+			name: string | null | undefined,
+			secs: number
+		) => {
+			const key = identity ?? name ?? UNKNOWN_KEY;
+			const existing = totals.get(key);
+			if (existing) existing.seconds += secs;
+			else totals.set(key, { key, speakerIdentity: identity ?? null, speakerName: name ?? null, seconds: secs });
+		};
+		const source = sortedTurns.length > 0 ? sortedTurns : sortedSegments;
+		for (const s of source) {
+			if ('ad' in s && s.ad) continue;
+			bump(s.speakerIdentity, s.speakerName, Math.max(0, s.endSec - s.startSec));
+		}
+		return [...totals.values()].sort((a, b) => b.seconds - a.seconds);
+	});
+	const talkTimeTotal = $derived(effectiveTalkTime.reduce((n, t) => n + t.seconds, 0) || 1);
+
+	const activeSegment = $derived(
+		sortedSegments.find((s) => currentTime >= s.startSec && currentTime < s.endSec) ?? null
+	);
+
+	// ── Helpers ─────────────────────────────────────────────────────────────
+	function speakerKeyOf(s: {
+		speakerIdentity?: string | null;
+		speakerName?: string | null;
+	}): string {
+		return s.speakerIdentity ?? s.speakerName ?? UNKNOWN_KEY;
+	}
+
+	/** Explicit hue wins (host-supplied identity colour); otherwise the cycled palette. */
+	function speakerColor(key: string): string {
+		return speakerColors.get(key) ?? SPEAKER_PALETTE[0];
+	}
+
+	function formatTime(totalSeconds: number, withHours: boolean): string {
+		const t = Number.isFinite(totalSeconds) && totalSeconds > 0 ? totalSeconds : 0;
+		const pad = (n: number) => String(n).padStart(2, '0');
+		const s = Math.floor(t % 60);
+		if (withHours) {
+			return `${Math.floor(t / 3600)}:${pad(Math.floor((t % 3600) / 60))}:${pad(s)}`;
+		}
+		return `${Math.floor(t / 60)}:${pad(s)}`;
+	}
+
+	function formatDuration(totalSeconds: number): string {
+		const s = Math.round(Math.max(0, totalSeconds));
+		const h = Math.floor(s / 3600);
+		const m = Math.floor((s % 3600) / 60);
+		if (h > 0) return `${h}h ${m}m`;
+		if (m > 0) return `${m}m ${s % 60}s`;
+		return `${s}s`;
+	}
+
+	function truncate(s: string, n: number): string {
+		return s.length > n ? s.slice(0, n - 1).trimEnd() + '…' : s;
+	}
+
+	// ── Zoom window: one mapping every position computation goes through ────
+	/**
+	 * The visible window in seconds. Falls back to the whole video until the
+	 * duration effect has seeded viewEnd, so a first paint that races metadata
+	 * still maps positions correctly instead of collapsing to zero.
+	 */
+	function spanSec(): number {
+		return viewEnd > viewStart ? viewEnd - viewStart : effectiveDuration;
+	}
+	function isZoomed(): boolean {
+		return viewEnd > 0 && spanSec() < effectiveDuration - 0.01;
+	}
+	function resetZoom() {
+		viewStart = 0;
+		viewEnd = effectiveDuration;
+	}
+	function secToFrac(sec: number): number {
+		const span = spanSec();
+		return span > 0 ? (sec - viewStart) / span : 0;
+	}
+	function fracToSec(frac: number): number {
+		return viewStart + frac * spanSec();
+	}
+
+	function flashZoomLabel() {
+		const d = effectiveDuration;
+		const span = spanSec();
+		const ratio = span > 0 ? d / span : 1;
+		zoomLabel = (ratio < 1.05 ? '1' : ratio.toFixed(1).replace(/\.0$/, '')) + '×';
+		zoomLabelOn = true;
+		if (zoomTimer) clearTimeout(zoomTimer);
+		zoomTimer = setTimeout(() => (zoomLabelOn = false), 900);
+	}
+
+	function flashOsd(text: string) {
+		osd = text;
+		osdOn = true;
+		if (osdTimer) clearTimeout(osdTimer);
+		osdTimer = setTimeout(() => (osdOn = false), 900);
+	}
+
+	// ── Seeking ─────────────────────────────────────────────────────────────
+	function seekTo(sec: number) {
+		const d = effectiveDuration;
+		const t = Math.max(0, d > 0 ? Math.min(sec, d) : sec);
+		currentTime = t; // bind:currentTime pushes this to the element
+		if (videoEl) videoEl.currentTime = t;
+	}
+
+	/**
+	 * Click-to-seek biases toward the START of the spoken line under the click —
+	 * nobody wants to land mid-sentence. Only when the transcript is dense right
+	 * there, though: on a sparse transcript the containing line could have begun
+	 * minutes earlier, and biasing to it would fling the seek somewhere the user
+	 * never clicked.
+	 */
+	const DENSITY_WINDOW_SEC = 60;
+	function biasToSegmentStart(sec: number): number {
+		if (sortedSegments.length === 0) return sec;
+		let nearby = 0;
+		for (const s of sortedSegments) {
+			if (Math.abs(s.startSec - sec) <= DENSITY_WINDOW_SEC / 2) nearby++;
+		}
+		if (nearby <= 1) return sec;
+		return segmentAt(sec)?.startSec ?? sec;
+	}
+
+	/** Last line starting at or before `sec` — segments are ascending. */
+	function segmentAt(sec: number): VideoTranscriptSegment | null {
+		let best: VideoTranscriptSegment | null = null;
+		for (const s of sortedSegments) {
+			if (s.startSec <= sec) best = s;
+			else break;
+		}
+		return best;
+	}
+
+	function chapterAt(sec: number): number {
+		let idx = -1;
+		for (let i = 0; i < sortedChapters.length; i++) {
+			if (sortedChapters[i].startSec <= sec) idx = i;
+			else break;
+		}
+		return idx;
+	}
+
+	const BOOKMARK_HIT_PX = 6;
+	function nearestBookmark(xCss: number, width: number): VideoBookmark | null {
+		if (sortedBookmarks.length === 0 || !width) return null;
+		let best: VideoBookmark | null = null;
+		let bestD = BOOKMARK_HIT_PX;
+		for (const b of sortedBookmarks) {
+			const d = Math.abs(secToFrac(b.playbackSec) * width - xCss);
+			if (d < bestD) {
+				bestD = d;
+				best = b;
+			}
+		}
+		return best;
+	}
+
+	// ── Canvas ──────────────────────────────────────────────────────────────
+	const RAIL_H = 10; // no-waveform fallback: a flat rail instead of an envelope
+
+	/** Does the active solo/mute filter recede this turn's paint? */
+	function filterDims(key: string | null, ad: boolean): boolean {
+		if (soloKey !== ALL_KEY) return !(key != null && !ad && key === soloKey);
+		return !!(key != null && !ad && mutedKeys.has(key));
+	}
+
+	function draw() {
+		const canvas = canvasEl;
+		if (!canvas) return;
+		const W = canvas.clientWidth;
+		const H = canvas.clientHeight;
+		if (!W || !H) return;
+		const dpr = window.devicePixelRatio || 1;
+		if (canvas.width !== Math.round(W * dpr) || canvas.height !== Math.round(H * dpr)) {
+			canvas.width = Math.round(W * dpr);
+			canvas.height = Math.round(H * dpr);
+		}
+		const ctx = canvas.getContext('2d');
+		if (!ctx) return;
+		ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+		ctx.clearRect(0, 0, W, H);
+
+		const dur = effectiveDuration;
+		const accent = getDaisyUIColor('primary');
+		const neutral = getDaisyUIColor('base-content');
+		const marker = getDaisyUIColor('warning');
+
+		if (dur <= 0) {
+			// No duration yet — paint the empty rail so the band owns its space
+			// from the first frame and metadata arriving is never a layout shove.
+			ctx.globalAlpha = 0.2;
+			ctx.fillStyle = neutral;
+			ctx.fillRect(0, (H - RAIL_H) / 2, W, RAIL_H);
+			ctx.globalAlpha = 1;
+			return;
+		}
+		const p = peaks;
+		const withWave = !!p;
+		const n = p?.length ?? 0;
+		// viewEnd is seeded by the duration effect; until then the window is the
+		// whole video, so a first paint that races metadata still lands correctly.
+		const span = viewEnd - viewStart || dur;
+		// Chapter boundaries in px — a column straddling one is skipped (the seam).
+		const bounds = sortedChapters.slice(1).map((c) => secToFrac(c.startSec) * W);
+		const GAP = 4;
+		const nowChapter = chapterAt(currentTime);
+
+		const visiblePeaks = withWave ? Math.max(1, Math.round((span / dur) * n)) : 0;
+		const step = withWave ? Math.max(1.5, W / visiblePeaks) : 2;
+		const cols = Math.max(1, Math.ceil(W / step));
+		const bw = Math.max(1, step - 1);
+
+		// Speaker sweep: columns advance monotonically in time and turns are
+		// sorted by start, so ONE pointer walks the turn list across the whole
+		// draw — never a per-column find(). Turns can overlap (an ad read inside
+		// a speaker's turn), so the sweep keeps a stack of open turns and the
+		// latest start wins, matching the lane's paint order.
+		let ti = 0;
+		const open: VideoSpeakerTurn[] = [];
+
+		for (let ci = 0; ci < cols; ci++) {
+			const x = ci * step;
+			if (bounds.some((b) => Math.abs(x + bw / 2 - b) < GAP)) continue;
+			const sec = fracToSec((x + step / 2) / W);
+			while (ti < sortedTurns.length && sortedTurns[ti].startSec <= sec) open.push(sortedTurns[ti++]);
+			while (open.length && open[open.length - 1].endSec <= sec) open.pop();
+			const turn = laneCarriesSpeakers ? null : (open[open.length - 1] ?? null);
+			const turnKey = turn && !turn.ad ? speakerKeyOf(turn) : null;
+
+			const ch = sortedChapters.length ? chapterAt(sec) : -1;
+			const played = sec <= currentTime;
+			const hovered = ch >= 0 && ch === hoverChapter;
+
+			// Unplayed floor is 0.38 rather than player.js's 0.3: that value was
+			// tuned against the theater's near-black backdrop, and on a light
+			// theme's base-200 the envelope washed out at it.
+			let alpha: number;
+			if (played) alpha = hovered ? 1 : 0.85;
+			else if (hovered) alpha = 0.6;
+			else if (ch >= 0 && ch === nowChapter) alpha = 0.52;
+			else alpha = 0.38;
+
+			// Legend hover extends onto the envelope: the named speaker at full
+			// strength, everything else at 40% of its normal alpha — the
+			// played/unplayed ladder survives inside both halves.
+			if (highlightKey != null) {
+				if (turnKey === highlightKey) alpha = played ? 1 : 0.8;
+				else alpha *= 0.4;
+			} else if (filterDims(turnKey, !!turn?.ad)) {
+				alpha *= 0.4;
+			}
+
+			ctx.globalAlpha = alpha;
+			if (turn?.ad) ctx.fillStyle = marker;
+			else if (turnKey) ctx.fillStyle = speakerColor(turnKey);
+			else ctx.fillStyle = played ? accent : neutral;
+
+			const h = withWave ? Math.max(2, (p as number[])[peakIdx(sec, dur, n)] * (H - 4)) : RAIL_H;
+			ctx.fillRect(x, withWave ? H - h : (H - RAIL_H) / 2, bw, h);
+		}
+		ctx.globalAlpha = 1;
+
+		// Boundary notches: a hairline in each seam plus a small accent flag on
+		// top — the flag reads as a UI marker even when the envelope is dense.
+		// Flags within a few px of each other collapse to one so a long video at
+		// full zoom-out never smears them into a solid bar.
+		ctx.globalAlpha = 0.4;
+		ctx.fillStyle = neutral;
+		for (const b of bounds) ctx.fillRect(b - 1, 2, 2, H - 4);
+		ctx.globalAlpha = 0.95;
+		ctx.fillStyle = accent;
+		const FLAG_MERGE_PX = 6;
+		let lastFlagX = -Infinity;
+		for (const b of bounds) {
+			if (b - lastFlagX < FLAG_MERGE_PX) continue;
+			lastFlagX = b;
+			ctx.beginPath();
+			ctx.moveTo(b - 3, 0);
+			ctx.lineTo(b + 3, 0);
+			ctx.lineTo(b, 4);
+			ctx.closePath();
+			ctx.fill();
+		}
+
+		// Bookmarks: diamonds pointing up from the BOTTOM edge — the mirror image
+		// of the chapter flags on top, so yours and the model's never blur together.
+		ctx.fillStyle = marker;
+		for (const b of sortedBookmarks) {
+			const x = secToFrac(b.playbackSec) * W;
+			if (x < -4 || x > W + 4) continue;
+			ctx.beginPath();
+			ctx.moveTo(x, H);
+			ctx.lineTo(x - 3, H - 4);
+			ctx.lineTo(x, H - 8);
+			ctx.lineTo(x + 3, H - 4);
+			ctx.closePath();
+			ctx.fill();
+		}
+
+		// Playhead
+		ctx.globalAlpha = 0.9;
+		ctx.fillStyle = neutral;
+		ctx.fillRect(Math.max(0, Math.min(1, secToFrac(currentTime))) * W - 0.5, 0, 1.5, H);
+		ctx.globalAlpha = 1;
+	}
+
+	function peakIdx(sec: number, dur: number, n: number): number {
+		return Math.max(0, Math.min(n - 1, Math.floor((sec / dur) * n)));
+	}
+
+	// Repaint on any input the canvas reads. Deps are listed explicitly and the
+	// body is untracked — draw() touches a lot of state, and letting it register
+	// its own reads is exactly the effect-dep leak that has bitten this library
+	// before (PreJoinLobby's acquire loop).
+	$effect(() => {
+		// canvasEl is a dep, not just a read inside draw(): bind:this lands after
+		// the first effect run, so without it the very first paint is skipped and
+		// nothing ever re-triggers one.
+		void canvasEl;
+		void currentTime;
+		void viewStart;
+		void viewEnd;
+		void hoverChapter;
+		void highlightKey;
+		void soloKey;
+		void mutedKeys;
+		void sortedChapters;
+		void sortedTurns;
+		void sortedBookmarks;
+		void speakerColors;
+		void laneCarriesSpeakers;
+		void peaks;
+		void effectiveDuration;
+		void canvasW;
+		void canvasH;
+		void themeTick;
+		untrack(() => draw());
+	});
+
+	// A new duration means the old zoom window may no longer make sense.
+	$effect(() => {
+		void effectiveDuration;
+		untrack(() => resetZoom());
+	});
+
+	// The band gets resized by things this component can't see (a panel toggling,
+	// the window, the side-transcript breakpoint), so the canvas tracks its own
+	// box. Set up from an $effect keyed on canvasEl rather than onMount: bind:this
+	// isn't guaranteed to have landed by the time onMount runs, and a missed
+	// observer means a canvas that never paints at all.
+	$effect(() => {
+		const el = canvasEl;
+		if (!el || typeof ResizeObserver === 'undefined') return;
+		const ro = new ResizeObserver((entries) => {
+			const r = entries[0]?.contentRect;
+			if (!r) return;
+			canvasW = Math.round(r.width);
+			canvasH = Math.round(r.height);
+		});
+		ro.observe(el);
+		return () => ro.disconnect();
+	});
+
+	onMount(() => {
+		const stopTheme = watchThemeChanges(() => {
+			clearColorCache();
+			themeTick++;
+		});
+		return () => {
+			stopTheme();
+			if (zoomTimer) clearTimeout(zoomTimer);
+			if (osdTimer) clearTimeout(osdTimer);
+		};
+	});
+
+	// ── Band pointer handlers ───────────────────────────────────────────────
+	function canvasSec(e: MouseEvent): { sec: number; x: number; width: number } | null {
+		const canvas = canvasEl;
+		if (!canvas) return null;
+		const r = canvas.getBoundingClientRect();
+		if (!r.width || spanSec() <= 0) return null;
+		const x = e.clientX - r.left;
+		return { sec: fracToSec(x / r.width), x, width: r.width };
+	}
+
+	function onBandClick(e: MouseEvent) {
+		const hit = canvasSec(e);
+		if (!hit) return;
+		seekTo(biasToSegmentStart(hit.sec));
+	}
+
+	function onBandDblClick() {
+		if (!isZoomed()) return;
+		resetZoom();
+		flashZoomLabel();
+	}
+
+	function onBandContextMenu(e: MouseEvent) {
+		if (!onBookmarkContext) return;
+		const hit = canvasSec(e);
+		if (!hit) return;
+		e.preventDefault();
+		const near = nearestBookmark(hit.x, hit.width);
+		onBookmarkContext(near ? near.playbackSec : hit.sec, near, e.clientX, e.clientY);
+	}
+
+	/** Keep the (centre-anchored) hover card inside the band's own width. */
+	const CARD_HALF_PX = 90;
+	function clampCardX(x: number, width: number): number {
+		return Math.max(Math.min(CARD_HALF_PX, width / 2), Math.min(x, width - CARD_HALF_PX));
+	}
+
+	function onBandMove(e: MouseEvent) {
+		const hit = canvasSec(e);
+		if (!hit) return;
+		const cardX = clampCardX(hit.x, hit.width);
+		const bm = nearestBookmark(hit.x, hit.width);
+		if (bm) {
+			// A bookmark under the pointer takes over the card entirely — it's
+			// yours, and it outranks the model's chapter guess at this exact spot.
+			hover = {
+				x: cardX,
+				title: bm.label || formatTime(bm.playbackSec, useHours),
+				text: bm.note ? truncate(bm.note, 90) : formatTime(bm.playbackSec, useHours),
+				thumb: null,
+				isBookmark: true
+			};
+			if (hoverChapter !== -1) hoverChapter = -1;
+			return;
+		}
+		const ch = chapterAt(hit.sec);
+		const title = ch >= 0 ? sortedChapters[ch]?.title : '';
+		const at = segmentAt(hit.sec);
+		hover = {
+			x: cardX,
+			title: title ? `${title} · ${formatTime(hit.sec, useHours)}` : formatTime(hit.sec, useHours),
+			text: at?.text ? truncate(at.text, 90) : '',
+			thumb: ch >= 0 ? (sortedChapters[ch]?.thumbUrl ?? null) : null,
+			isBookmark: false
+		};
+		if (ch !== hoverChapter) hoverChapter = ch;
+	}
+
+	function onBandLeave() {
+		hover = null;
+		if (hoverChapter !== -1) hoverChapter = -1;
+	}
+
+	/**
+	 * Scroll over the band to zoom, centred on the cursor — the DAW/mpv
+	 * convention: the point under the pointer stays fixed while the window
+	 * resizes around it, so scrolling repeatedly walks you inward on exactly the
+	 * spot you're pointing at. Plain scroll, no modifier: the band is its own
+	 * hover region (distinct from the video, which owns volume), so nothing else
+	 * here claims the wheel.
+	 */
+	const ZOOM_FACTOR = 1.3;
+	const MIN_WINDOW_SEC = 3;
+	function onBandWheel(e: WheelEvent) {
+		const d = effectiveDuration;
+		const canvas = canvasEl;
+		if (!d || !canvas) return;
+		const r = canvas.getBoundingClientRect();
+		const w = r.width;
+		if (!w) return;
+		e.preventDefault();
+		if (viewEnd <= 0) resetZoom();
+		const cursorSec = fracToSec(Math.max(0, Math.min(1, (e.clientX - r.left) / w)));
+		const span = spanSec();
+		let newSpan = e.deltaY < 0 ? span / ZOOM_FACTOR : span * ZOOM_FACTOR;
+		newSpan = Math.min(d, Math.max(MIN_WINDOW_SEC, newSpan));
+		const frac = span > 0 ? (cursorSec - viewStart) / span : 0.5;
+		viewStart = Math.max(0, Math.min(cursorSec - frac * newSpan, d - newSpan));
+		viewEnd = viewStart + newSpan;
+		flashZoomLabel();
+	}
+
+	/** Keyboard seek on the band — it advertises `role="slider"`, so it must honour arrows. */
+	function onBandKeyDown(e: KeyboardEvent) {
+		const d = effectiveDuration;
+		if (!d) return;
+		const step = e.shiftKey ? 10 : 5;
+		if (e.key === 'ArrowLeft') seekTo(currentTime - step);
+		else if (e.key === 'ArrowRight') seekTo(currentTime + step);
+		else if (e.key === 'Home') seekTo(0);
+		else if (e.key === 'End') seekTo(d);
+		else if (e.key === 'Escape' && isZoomed()) resetZoom();
+		else return;
+		e.preventDefault();
+	}
+
+	// ── Video region: wheel = volume (shift = seek), plus a keyboard map ─────
+	function onStageWheel(e: WheelEvent) {
+		if (!videoEl) return;
+		e.preventDefault();
+		if (e.shiftKey) {
+			const delta = e.deltaY < 0 ? 5 : -5;
+			seekTo(currentTime + delta);
+			flashOsd(`${delta > 0 ? '+' : ''}${delta}s · ${formatTime(currentTime + delta, useHours)}`);
+			return;
+		}
+		const next = Math.min(1, Math.max(0, videoEl.volume - Math.sign(e.deltaY) * 0.05));
+		videoEl.volume = next;
+		if (next > 0) videoEl.muted = false;
+		flashOsd(`${Math.round(next * 100)}%`);
+	}
+
+	function onRootKeyDown(e: KeyboardEvent) {
+		const target = e.target as HTMLElement | null;
+		const tag = target?.tagName;
+		if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT' || target?.isContentEditable) return;
+		if (e.metaKey || e.ctrlKey || e.altKey) return;
+		const v = videoEl;
+		if (!v) return;
+		switch (e.key) {
+			case ' ':
+			case 'k':
+				v.paused ? v.play() : v.pause();
+				break;
+			case 'ArrowLeft':
+			case 'j':
+				seekTo(currentTime - (e.shiftKey ? 10 : 5));
+				break;
+			case 'ArrowRight':
+			case 'l':
+				seekTo(currentTime + (e.shiftKey ? 10 : 5));
+				break;
+			case 'ArrowUp':
+				v.volume = Math.min(1, v.volume + 0.05);
+				flashOsd(`${Math.round(v.volume * 100)}%`);
+				break;
+			case 'ArrowDown':
+				v.volume = Math.max(0, v.volume - 0.05);
+				flashOsd(`${Math.round(v.volume * 100)}%`);
+				break;
+			case 'm':
+				v.muted = !v.muted;
+				flashOsd(v.muted ? 'Muted' : `${Math.round(v.volume * 100)}%`);
+				break;
+			case 'Home':
+				seekTo(0);
+				break;
+			case 'End':
+				seekTo(effectiveDuration);
+				break;
+			default:
+				return;
+		}
+		e.preventDefault();
+	}
+
+	// ── Playback: startAt + solo-speaker skipping ───────────────────────────
+	let appliedStartAt = false;
+	function onLoadedMetadata() {
+		if (!appliedStartAt && startAt != null && Number.isFinite(startAt)) {
+			appliedStartAt = true;
+			seekTo(startAt);
+		}
+	}
+
+	/**
+	 * Solo playback: if we're not inside a turn belonging to the selected
+	 * speaker, jump forward to their next one. With no later turn we pause
+	 * rather than let playback run on into someone else's talk time unchecked.
+	 */
+	function applySoloSkip() {
+		if (soloKey === ALL_KEY || !videoEl) return;
+		const t = videoEl.currentTime;
+		const source: { startSec: number; endSec: number; speakerIdentity?: string | null; speakerName?: string | null; ad?: boolean }[] =
+			sortedTurns.length > 0 ? sortedTurns : sortedSegments;
+		const mine = source.filter((s) => !('ad' in s && s.ad) && speakerKeyOf(s) === soloKey);
+		if (mine.length === 0) return;
+		if (mine.some((s) => t >= s.startSec && t < s.endSec)) return;
+		const next = mine.find((s) => s.startSec > t);
+		if (next) videoEl.currentTime = next.startSec;
+		else videoEl.pause();
+	}
+
+	function handleTimeUpdate() {
+		applySoloSkip();
+		// Zoomed in and playback walked past the edge of the window — follow it,
+		// or you'd watch a frozen slice of waveform while the video plays on.
+		if (isZoomed() && (currentTime < viewStart || currentTime > viewEnd)) {
+			const span = spanSec();
+			const d = effectiveDuration;
+			viewStart = Math.max(0, Math.min(currentTime - span / 2, Math.max(0, d - span)));
+			viewEnd = viewStart + span;
+		}
+		if (videoEl) onTimeUpdate?.(videoEl);
+	}
+
+	// Re-run the solo scan the moment the selection changes rather than waiting
+	// for the next native timeupdate tick.
+	$effect(() => {
+		void soloKey;
+		untrack(() => applySoloSkip());
+	});
+
+	// Auto-scroll the active transcript row into view as playback advances.
+	$effect(() => {
+		const seg = activeSegment;
+		if (!seg) return;
+		untrack(() => rowRefs[seg.id]?.scrollIntoView({ block: 'nearest', behavior: 'smooth' }));
+	});
+
+	// ── Legend interactions ─────────────────────────────────────────────────
+	function toggleSolo(key: string) {
+		soloKey = soloKey === key ? ALL_KEY : key;
+	}
+	function toggleMute(key: string) {
+		const next = new Set(mutedKeys);
+		if (next.has(key)) next.delete(key);
+		else next.add(key);
+		mutedKeys = next;
+	}
+	function talkTimeKey(t: VideoSpeakerTalkTime): string {
+		return t.speakerIdentity ?? t.speakerName ?? UNKNOWN_KEY;
+	}
+
+	function submitBookmark() {
+		onAddBookmark?.(currentTime, bookmarkLabel.trim());
+		bookmarkLabel = '';
+	}
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<div
+	class="vp-root {className}"
+	class:vp-side={transcriptPosition === 'side' && sortedSegments.length > 0}
+	role="region"
+	aria-label="Video player"
+	tabindex="-1"
+	onkeydown={onRootKeyDown}
+>
+	<div class="vp-main">
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<div class="vp-stage" onwheel={onStageWheel}>
+			<video
+				bind:this={videoEl}
+				bind:currentTime
+				bind:duration
+				ontimeupdate={handleTimeUpdate}
+				onloadedmetadata={onLoadedMetadata}
+				{src}
+				poster={poster ?? undefined}
+				controls
+				class="vp-video"
+			>
+				<!-- A captions track is always present for a11y; without a src it is
+				     an empty, inert track rather than a missing affordance. -->
+				<track kind="captions" src={captionsSrc ?? undefined} srclang={captionsLang} label={captionsLabel} default={!!captionsSrc} />
+			</video>
+			<div class="vp-osd" class:on={osdOn} aria-hidden="true">{osd}</div>
+		</div>
+
+		<!-- The band: one time axis for the envelope, chapters, speakers and
+		     bookmarks. Its height is reserved from the first frame, so data
+		     arriving late fades into already-owned space. -->
+		<div
+			class="vp-band"
+			onwheel={onBandWheel}
+			onmousemove={onBandMove}
+			onmouseleave={onBandLeave}
+			role="presentation"
+		>
+			<canvas
+				bind:this={canvasEl}
+				class="vp-wave"
+				class:vp-wave-tall={hasWave}
+				role="slider"
+				tabindex="0"
+				aria-label="Seek"
+				aria-valuemin={0}
+				aria-valuemax={Math.round(effectiveDuration)}
+				aria-valuenow={Math.round(currentTime)}
+				aria-valuetext={formatTime(currentTime, useHours)}
+				onclick={onBandClick}
+				ondblclick={onBandDblClick}
+				oncontextmenu={onBandContextMenu}
+				onkeydown={onBandKeyDown}
+			></canvas>
+
+			<!-- Speaker lane. Painted ONLY as the no-waveform fallback: with an
+			     envelope its own bars wear the turn colours, and two stacked
+			     time-parallel strips would just restate the same fact twice. The
+			     empty div still renders so the slot is reserved from the first
+			     frame — diarization is slow, and turns arriving minutes into a
+			     session must fade into owned space, never shove the layout.
+			     Purely informational: the band already owns seek/scrub/zoom, so
+			     the lane takes no pointer events and grows no affordances. -->
+			<div class="vp-lane" aria-hidden="true">
+				{#if laneCarriesSpeakers}
+					{#each sortedTurns as turn, i (turn.startSec + ':' + i)}
+						{@const key = speakerKeyOf(turn)}
+						{@const l = secToFrac(turn.startSec) * 100}
+						{@const r = secToFrac(turn.endSec) * 100}
+						{#if turn.endSec > viewStart && turn.startSec < (viewEnd || effectiveDuration)}
+							<span
+								class="vp-lane-span"
+								class:vp-lane-ad={turn.ad}
+								class:vp-dim={highlightKey != null
+									? highlightKey !== key
+									: filterDims(turn.ad ? null : key, !!turn.ad)}
+								style="left: {Math.max(0, Math.min(100, l))}%; width: max({Math.max(
+									0,
+									Math.min(100, r) - Math.max(0, l)
+								)}%, 0.35%); {turn.ad ? '' : `background: ${speakerColor(key)};`}"
+							></span>
+						{/if}
+					{/each}
+				{/if}
+			</div>
+
+			<div class="vp-zoom" class:on={zoomLabelOn} aria-hidden="true">{zoomLabel}</div>
+
+			{#if hover}
+				<div
+					class="vp-card"
+					class:has-thumb={!!hover.thumb}
+					style="left: {hover.x}px"
+					aria-hidden="true"
+				>
+					{#if hover.thumb}
+						<img class="vp-card-thumb" src={hover.thumb} alt="" />
+					{/if}
+					<div class="vp-card-title">
+						{#if hover.isBookmark}
+							<svg viewBox="0 0 24 24" width="11" height="11" aria-hidden="true" class="vp-bm-icon">
+								<path d="M6 2a2 2 0 0 0-2 2v18l8-5 8 5V4a2 2 0 0 0-2-2H6z" fill="currentColor" />
+							</svg>
+						{/if}
+						{hover.title}
+					</div>
+					{#if hover.text}<div class="vp-card-text">{hover.text}</div>{/if}
+				</div>
+			{/if}
+		</div>
+
+		<div class="vp-times">
+			<span>{formatTime(currentTime, useHours)}</span>
+			{#if isZoomed()}
+				<button type="button" class="vp-reset-zoom" onclick={() => { resetZoom(); flashZoomLabel(); }}>
+					Reset zoom
+				</button>
+			{/if}
+			<span>{formatTime(effectiveDuration, useHours)}</span>
+		</div>
+
+		{#if hasSpeakers}
+			<!-- 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>
+				<div class="vp-legend">
+					{#each effectiveTalkTime as tt, i (talkTimeKey(tt) + ':' + i)}
+						{@const key = talkTimeKey(tt)}
+						<span class="vp-legend-item">
+							<button
+								type="button"
+								class="vp-chip"
+								class:solo={soloKey === key}
+								class:vp-dim={mutedKeys.has(key) || (soloKey !== ALL_KEY && soloKey !== key)}
+								onmouseenter={() => (highlightKey = key)}
+								onmouseleave={() => (highlightKey = null)}
+								onfocus={() => (highlightKey = key)}
+								onblur={() => (highlightKey = null)}
+								onclick={() => toggleSolo(key)}
+								aria-pressed={soloKey === key}
+								title="Solo {tt.speakerName ?? 'Unknown speaker'}"
+							>
+								<span class="vp-chip-dot" style="background: {speakerColor(key)}"></span>
+								{tt.speakerName ?? 'Unknown speaker'}
+								<span class="vp-chip-time">{formatDuration(tt.seconds)}</span>
+							</button>
+							<button
+								type="button"
+								class="vp-mute"
+								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"
+							>
+								{mutedKeys.has(key) ? '🔇' : '🔈'}
+							</button>
+						</span>
+					{/each}
+					{#if soloKey !== ALL_KEY || mutedKeys.size > 0}
+						<button
+							type="button"
+							class="vp-chip vp-chip-clear"
+							onclick={() => {
+								soloKey = ALL_KEY;
+								mutedKeys = new Set();
+							}}
+						>
+							Clear filter
+						</button>
+					{/if}
+				</div>
+			</div>
+		{/if}
+
+		{#if onAddBookmark}
+			<div class="vp-bookmark-add">
+				<label for="vp-bookmark-label">Bookmark label</label>
+				<input
+					id="vp-bookmark-label"
+					type="text"
+					placeholder="Bookmark label (optional)"
+					bind:value={bookmarkLabel}
+				/>
+				<button type="button" class="vp-add-btn" onclick={submitBookmark}>
+					+ Bookmark at {formatTime(currentTime, useHours)}
+				</button>
+			</div>
+		{/if}
+	</div>
+
+	{#if sortedSegments.length > 0}
+		<div class="vp-transcript" style="max-height: {transcriptMaxHeight}">
+			{#each sortedSegments as seg (seg.id)}
+				<button
+					type="button"
+					class="vp-row"
+					class:active={activeSegment?.id === seg.id}
+					class:vp-dim={highlightKey != null
+						? highlightKey !== speakerKeyOf(seg)
+						: filterDims(speakerKeyOf(seg), false)}
+					bind:this={rowRefs[seg.id]}
+					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>
+					<span class="vp-row-text">{seg.text}</span>
+				</button>
+			{/each}
+		</div>
+	{/if}
+</div>
+
+<style>
+	/* Chrome is token-only: DaisyUI semantic vars for colour, --jatui-* for
+	   radius/spacing, --motion-* for easing and duration. The canvas resolves
+	   the same semantic colours at runtime via getDaisyUIColor. */
+	.vp-root {
+		display: flex;
+		flex-direction: column;
+		gap: var(--jatui-space-md, 6px);
+		background: var(--color-base-200);
+		border: var(--jatui-border-w, 1px) solid var(--color-base-content, currentColor);
+		border-color: color-mix(in oklch, var(--color-base-content) 12%, transparent);
+		border-radius: var(--jatui-radius-box, 0.5rem);
+		padding: var(--jatui-space-lg, 12px);
+	}
+
+	.vp-root:focus {
+		outline: none;
+	}
+
+	.vp-main {
+		display: flex;
+		flex-direction: column;
+		gap: var(--jatui-space-md, 6px);
+		min-width: 0;
+	}
+
+	/* Side layout: transcript beside the video once there's room for both. */
+	@media (min-width: 64rem) {
+		.vp-root.vp-side {
+			display: grid;
+			grid-template-columns: minmax(0, 3fr) minmax(16rem, 2fr);
+			gap: var(--jatui-space-lg, 12px);
+			align-items: start;
+		}
+	}
+
+	.vp-stage {
+		position: relative;
+	}
+
+	.vp-video {
+		display: block;
+		width: 100%;
+		border-radius: var(--jatui-radius-field, 0.25rem);
+		background: var(--color-neutral);
+	}
+
+	/* Transient wheel readout (volume / seek) — one calm flash, then gone. */
+	.vp-osd {
+		position: absolute;
+		top: var(--jatui-space-base, 8px);
+		left: var(--jatui-space-base, 8px);
+		padding: var(--jatui-space-xs, 2px) var(--jatui-space-base, 8px);
+		border-radius: var(--jatui-radius-selector, 0.375rem);
+		background: color-mix(in oklch, var(--color-base-100) 88%, transparent);
+		color: var(--color-base-content);
+		font-size: 0.7rem;
+		font-weight: 600;
+		font-variant-numeric: tabular-nums;
+		pointer-events: none;
+		opacity: 0;
+		transition: opacity var(--motion-enter, 200ms) var(--motion-glide, ease-out);
+	}
+
+	.vp-osd.on {
+		opacity: 1;
+	}
+
+	/* The band owns its height from the first frame so a waveform or speaker
+	   turns arriving minutes in fade into space that is already theirs. */
+	.vp-band {
+		position: relative;
+		padding-top: var(--jatui-space-base, 8px);
+		opacity: 0.55; /* ambient until the pointer arrives */
+		transition: opacity var(--motion-move, 300ms) var(--motion-glide, ease-out);
+	}
+
+	.vp-root:hover .vp-band,
+	.vp-band:focus-within {
+		opacity: 1;
+	}
+
+	.vp-wave {
+		display: block;
+		width: 100%;
+		height: 22px;
+		cursor: pointer;
+		border-radius: var(--jatui-radius-field, 0.25rem);
+	}
+
+	.vp-wave:focus-visible {
+		outline: 2px solid var(--color-primary);
+		outline-offset: 2px;
+	}
+
+	.vp-wave-tall {
+		height: 44px;
+	}
+
+	/* Speaker lane — the no-waveform fallback. Its slot is reserved whether or
+	   not turns exist, so arrival is a fade, never a layout shove. */
+	.vp-lane {
+		position: relative;
+		height: 6px;
+		margin-top: var(--jatui-space-xs, 2px);
+		border-radius: 3px;
+		overflow: hidden;
+		pointer-events: none;
+	}
+
+	.vp-lane-span {
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		opacity: 0.85;
+		transition: opacity var(--motion-fast, 150ms) var(--motion-glide, ease-out);
+	}
+
+	/* Ad reads share the lane but read as not-a-person: the warning token,
+	   quieter than any voice — never one of the speaker identity colours. */
+	.vp-lane-ad {
+		background: var(--color-warning);
+		opacity: 0.5;
+	}
+
+	.vp-dim {
+		opacity: 0.4;
+	}
+
+	.vp-lane-span.vp-dim {
+		opacity: 0.3;
+	}
+
+	.vp-zoom {
+		position: absolute;
+		top: var(--jatui-space-base, 8px);
+		left: var(--jatui-space-sm, 4px);
+		padding: var(--jatui-space-xs, 2px) var(--jatui-space-md, 6px);
+		border-radius: var(--jatui-radius-selector, 0.375rem);
+		background: color-mix(in oklch, var(--color-base-100) 85%, transparent);
+		color: var(--color-base-content);
+		font-size: 0.68rem;
+		font-weight: 600;
+		font-variant-numeric: tabular-nums;
+		pointer-events: none;
+		opacity: 0;
+		transition: opacity var(--motion-enter, 200ms) var(--motion-glide, ease-out);
+	}
+
+	.vp-zoom.on {
+		opacity: 1;
+	}
+
+	/* Two-line hover card: what's here on top, what's being said beneath — a
+	   timestamp alone doesn't tell you whether a moment is worth a click. */
+	.vp-card {
+		position: absolute;
+		bottom: calc(100% - var(--jatui-space-base, 8px));
+		transform: translateX(-50%);
+		max-width: 22rem;
+		padding: var(--jatui-space-sm, 4px) var(--jatui-space-base, 8px);
+		background: var(--color-base-100);
+		border: var(--jatui-border-w, 1px) solid
+			color-mix(in oklch, var(--color-base-content) 18%, transparent);
+		border-radius: var(--jatui-radius-box, 0.5rem);
+		color: var(--color-base-content);
+		font-size: 0.7rem;
+		line-height: 1.4;
+		pointer-events: none;
+		z-index: 5;
+	}
+
+	.vp-card.has-thumb {
+		width: 16rem;
+	}
+
+	.vp-card-thumb {
+		display: block;
+		width: 100%;
+		border-radius: var(--jatui-radius-field, 0.25rem);
+		margin-bottom: var(--jatui-space-sm, 4px);
+	}
+
+	.vp-card-title {
+		display: flex;
+		align-items: center;
+		gap: var(--jatui-space-sm, 4px);
+		font-weight: 600;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.vp-bm-icon {
+		color: var(--color-warning);
+		flex-shrink: 0;
+	}
+
+	.vp-card-text {
+		margin-top: var(--jatui-space-xs, 2px);
+		color: color-mix(in oklch, var(--color-base-content) 65%, transparent);
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.vp-times {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: var(--jatui-space-base, 8px);
+		font-size: 0.68rem;
+		font-variant-numeric: tabular-nums;
+		color: color-mix(in oklch, var(--color-base-content) 60%, transparent);
+	}
+
+	.vp-reset-zoom {
+		background: none;
+		border: none;
+		padding: 0;
+		font-size: inherit;
+		color: var(--color-primary);
+		cursor: pointer;
+	}
+
+	/* 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);
+	}
+
+	.vp-talktime-seg {
+		height: 100%;
+	}
+
+	.vp-legend {
+		display: flex;
+		flex-wrap: wrap;
+		gap: var(--jatui-space-md, 6px);
+		font-size: 0.68rem;
+	}
+
+	.vp-legend-item {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--jatui-space-xs, 2px);
+	}
+
+	.vp-chip {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--jatui-space-sm, 4px);
+		padding: var(--jatui-space-xs, 2px) var(--jatui-space-md, 6px);
+		background: color-mix(in oklch, var(--color-base-content) 8%, transparent);
+		border: var(--jatui-border-w, 1px) solid transparent;
+		border-radius: var(--jatui-radius-selector, 0.375rem);
+		color: var(--color-base-content);
+		font-size: inherit;
+		cursor: pointer;
+		transition:
+			opacity var(--motion-fast, 150ms) var(--motion-glide, ease-out),
+			border-color var(--motion-fast, 150ms) var(--motion-glide, ease-out);
+	}
+
+	.vp-chip.solo {
+		border-color: var(--color-primary);
+	}
+
+	.vp-chip-clear {
+		color: var(--color-primary);
+	}
+
+	.vp-chip-dot {
+		width: 0.5rem;
+		height: 0.5rem;
+		border-radius: 999px;
+		flex-shrink: 0;
+	}
+
+	.vp-chip-time {
+		color: color-mix(in oklch, var(--color-base-content) 55%, transparent);
+		font-variant-numeric: tabular-nums;
+	}
+
+	.vp-mute {
+		background: none;
+		border: none;
+		padding: 0 var(--jatui-space-xs, 2px);
+		font-size: 0.7rem;
+		line-height: 1;
+		cursor: pointer;
+		opacity: 0.5;
+	}
+
+	.vp-mute.on,
+	.vp-mute:hover {
+		opacity: 1;
+	}
+
+	/* Add-bookmark row — only rendered when the host wired onAddBookmark. */
+	.vp-bookmark-add {
+		display: flex;
+		align-items: center;
+		gap: var(--jatui-space-sm, 4px);
+		font-size: 0.72rem;
+	}
+
+	.vp-bookmark-add label {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		margin: -1px;
+		overflow: hidden;
+		clip-path: inset(50%);
+		white-space: nowrap;
+	}
+
+	.vp-bookmark-add input {
+		flex: 1;
+		min-width: 8rem;
+		max-width: 18rem;
+		background: var(--color-base-100);
+		border: var(--jatui-border-w, 1px) solid
+			color-mix(in oklch, var(--color-base-content) 18%, transparent);
+		border-radius: var(--jatui-radius-field, 0.25rem);
+		color: var(--color-base-content);
+		padding: var(--jatui-space-sm, 4px) var(--jatui-space-base, 8px);
+		font-size: inherit;
+	}
+
+	.vp-add-btn {
+		background: color-mix(in oklch, var(--color-warning) 16%, transparent);
+		border: var(--jatui-border-w, 1px) solid
+			color-mix(in oklch, var(--color-warning) 45%, transparent);
+		border-radius: var(--jatui-radius-field, 0.25rem);
+		color: var(--color-base-content);
+		padding: var(--jatui-space-sm, 4px) var(--jatui-space-lg, 12px);
+		font-size: inherit;
+		white-space: nowrap;
+		cursor: pointer;
+		transition: background var(--motion-fast, 150ms) var(--motion-glide, ease-out);
+	}
+
+	.vp-add-btn:hover {
+		background: color-mix(in oklch, var(--color-warning) 28%, transparent);
+	}
+
+	/* Transcript pane */
+	.vp-transcript {
+		display: flex;
+		flex-direction: column;
+		gap: 1px;
+		overflow-y: auto;
+		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);
+		min-width: 0;
+	}
+
+	.vp-row {
+		display: flex;
+		align-items: baseline;
+		flex-wrap: wrap;
+		gap: var(--jatui-space-sm, 4px);
+		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-row:hover {
+		background: color-mix(in oklch, var(--color-base-content) 8%, transparent);
+	}
+
+	.vp-row.active {
+		background: color-mix(in oklch, var(--color-primary) 14%, transparent);
+		box-shadow: inset 2px 0 0 var(--color-primary);
+	}
+
+	.vp-row-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-row-speaker {
+		font-size: 0.72rem;
+		font-weight: 600;
+		flex-shrink: 0;
+	}
+
+	.vp-row-text {
+		font-size: 0.76rem;
+		color: color-mix(in oklch, var(--color-base-content) 85%, transparent);
+		flex: 1;
+		min-width: 10rem;
+	}
+
+	/* Motion is decoration here — every state also has a static read (colour,
+	   position, label), so collapsing it changes nothing functional. */
+	@media (prefers-reduced-motion: reduce) {
+		.vp-band,
+		.vp-osd,
+		.vp-zoom,
+		.vp-lane-span,
+		.vp-chip,
+		.vp-add-btn,
+		.vp-row {
+			transition: none;
+		}
+	}
+</style>