@joewinke/jatui 0.2.20 → 0.2.22

package/dist/components/SearchDropdown.svelte

@@ -375,13 +375,13 @@
 		transition: background 0.15s, border-color 0.15s;
 		min-height: 2rem;
 		cursor: pointer;
-		background: oklch(0.16 0.01 250);
-		border: 1px solid oklch(0.25 0.02 250);
-		color: oklch(0.85 0.02 250);
+		background: var(--color-base-200, oklch(0.16 0.01 250));
+		border: 1px solid color-mix(in oklch, var(--color-base-content, oklch(0.85 0.02 250)) 30%, transparent);
+		color: var(--color-base-content, oklch(0.85 0.02 250));
 	}
 	.sd-trigger:hover:not(:disabled) {
-		background: oklch(0.18 0.01 250);
-		border-color: oklch(0.30 0.02 250);
+		background: color-mix(in oklch, var(--color-base-content, oklch(0.85 0.02 250)) 8%, var(--color-base-200, oklch(0.16 0.01 250)));
+		border-color: color-mix(in oklch, var(--color-base-content, oklch(0.85 0.02 250)) 45%, transparent);
 	}
 	.sd-trigger:disabled, .sd-disabled {
 		opacity: 0.5;
@@ -394,9 +394,6 @@
 		min-height: 2rem;
 		padding: 0 0.75rem;
 		border-radius: var(--rounded-btn, 0.5rem);
-		background: var(--color-base-200, oklch(0.16 0.01 250));
-		border: 1px solid color-mix(in oklch, var(--color-base-content, oklch(0.85 0.02 250)) 30%, transparent);
-		color: var(--color-base-content, oklch(0.85 0.02 250));
 	}
 	.sd-sm .sd-chevron {
 		width: 0.625rem;
@@ -440,15 +437,15 @@
 		text-transform: uppercase;
 		letter-spacing: 0.025em;
 		background: transparent;
-		border: 1px solid color-mix(in oklch, var(--sd-color, oklch(0.5 0 0)) 35%, transparent);
-		color: color-mix(in oklch, var(--sd-color, oklch(0.7 0 0)) 85%, oklch(0.80 0 0));
+		border: 1px solid color-mix(in oklch, var(--sd-color, var(--color-base-content, oklch(0.5 0 0))) 35%, transparent);
+		color: color-mix(in oklch, var(--sd-color, var(--color-base-content, oklch(0.7 0 0))) 85%, var(--color-base-content, oklch(0.80 0 0)));
 		transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, color 0.15s;
 	}
 	.sd-chip:hover:not(:disabled) {
-		background: color-mix(in oklch, var(--sd-color, oklch(0.5 0 0)) 15%, transparent);
-		border-color: color-mix(in oklch, var(--sd-color, oklch(0.5 0 0)) 50%, transparent);
-		color: var(--sd-color, oklch(0.80 0 0));
-		box-shadow: 0 0 6px color-mix(in oklch, var(--sd-color, oklch(0.5 0 0)) 15%, transparent);
+		background: color-mix(in oklch, var(--sd-color, var(--color-base-content, oklch(0.5 0 0))) 15%, transparent);
+		border-color: color-mix(in oklch, var(--sd-color, var(--color-base-content, oklch(0.5 0 0))) 50%, transparent);
+		color: var(--sd-color, var(--color-base-content, oklch(0.80 0 0)));
+		box-shadow: 0 0 6px color-mix(in oklch, var(--sd-color, var(--color-base-content, oklch(0.5 0 0))) 15%, transparent);
 	}
 
 	.sd-trigger-label {
@@ -488,12 +485,12 @@
 		background: none;
 		border: none;
 		cursor: pointer;
-		color: oklch(0.50 0.02 250);
+		color: color-mix(in oklch, var(--color-base-content, oklch(0.50 0.02 250)) 55%, transparent);
 		transition: color 0.1s, background 0.1s;
 	}
 	.sd-clear:hover {
-		color: oklch(0.75 0.15 30);
-		background: oklch(0.75 0.15 30 / 0.12);
+		color: var(--color-error, oklch(0.75 0.15 30));
+		background: color-mix(in oklch, var(--color-error, oklch(0.75 0.15 30)) 12%, transparent);
 	}
 
 	.sd-chevron {
@@ -501,7 +498,7 @@
 		height: 0.75rem;
 		flex-shrink: 0;
 		transition: transform 0.15s;
-		color: oklch(0.50 0.02 250);
+		color: color-mix(in oklch, var(--color-base-content, oklch(0.50 0.02 250)) 55%, transparent);
 	}
 	.sd-chevron-open {
 		transform: rotate(180deg);
@@ -513,7 +510,7 @@
 	}
 	.sd-embedded .sd-search {
 		background: transparent;
-		border-bottom: 1px solid oklch(0.22 0.02 250);
+		border-bottom: 1px solid color-mix(in oklch, var(--color-base-content, oklch(0.22 0.02 250)) 25%, transparent);
 	}
 	.sd-embedded .sd-list {
 		max-height: none;
@@ -530,8 +527,8 @@
 		border-radius: 0.5rem;
 		overflow: hidden;
 		box-shadow: 0 4px 24px oklch(0 0 0 / 0.4);
-		background: oklch(0.16 0.01 250);
-		border: 1px solid oklch(0.25 0.02 250);
+		background: var(--color-base-200, oklch(0.16 0.01 250));
+		border: 1px solid color-mix(in oklch, var(--color-base-content, oklch(0.85 0.02 250)) 30%, transparent);
 	}
 
 	.sd-panel-dropup {
@@ -544,21 +541,21 @@
 
 	/* Header section */
 	.sd-header {
-		border-bottom: 1px solid oklch(0.25 0.02 250);
+		border-bottom: 1px solid color-mix(in oklch, var(--color-base-content, oklch(0.25 0.02 250)) 25%, transparent);
 	}
 
 	/* Search section */
 	.sd-search {
 		padding: 0.375rem 0.5rem;
-		border-bottom: 1px solid oklch(0.25 0.02 250);
-		background: oklch(0.13 0.01 250);
+		border-bottom: 1px solid color-mix(in oklch, var(--color-base-content, oklch(0.25 0.02 250)) 25%, transparent);
+		background: var(--color-base-300, oklch(0.13 0.01 250));
 	}
 	.sd-search-inner {
 		display: flex;
 		align-items: center;
 		gap: 0.375rem;
-		background: oklch(0.19 0.01 250);
-		border: 1px solid oklch(0.28 0.02 250);
+		background: color-mix(in oklch, var(--color-base-content, oklch(0.19 0.01 250)) 10%, var(--color-base-200, oklch(0.19 0.01 250)));
+		border: 1px solid color-mix(in oklch, var(--color-base-content, oklch(0.28 0.02 250)) 28%, transparent);
 		border-radius: 0.25rem;
 		padding: 0.2rem 0.4rem;
 	}
@@ -566,22 +563,22 @@
 		width: 0.75rem;
 		height: 0.75rem;
 		flex-shrink: 0;
-		color: oklch(0.60 0.04 250);
+		color: color-mix(in oklch, var(--color-base-content, oklch(0.60 0.04 250)) 60%, transparent);
 	}
 	.sd-search-input {
 		width: 100%;
 		background: transparent;
 		font-size: 0.6875rem;
 		font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
-		color: oklch(0.85 0.02 250);
+		color: var(--color-base-content, oklch(0.85 0.02 250));
 		border: none;
 		outline: none;
 	}
 	.sd-search-input::placeholder {
-		color: oklch(0.52 0.03 250);
+		color: color-mix(in oklch, var(--color-base-content, oklch(0.52 0.03 250)) 40%, transparent);
 	}
 	.sd-search-clear {
-		color: oklch(0.50 0.02 250);
+		color: color-mix(in oklch, var(--color-base-content, oklch(0.50 0.02 250)) 55%, transparent);
 		background: none;
 		border: none;
 		cursor: pointer;
@@ -589,7 +586,7 @@
 		display: flex;
 	}
 	.sd-search-clear:hover {
-		color: oklch(0.75 0.15 30);
+		color: var(--color-error, oklch(0.75 0.15 30));
 	}
 
 	/* Options list */
@@ -610,7 +607,7 @@
 		font-weight: 600;
 		text-transform: uppercase;
 		letter-spacing: 0.05em;
-		color: oklch(0.50 0.10 250);
+		color: color-mix(in oklch, var(--color-base-content, oklch(0.50 0.10 250)) 55%, transparent);
 	}
 
 	.sd-option {
@@ -627,22 +624,22 @@
 		background: transparent;
 		border: none;
 		border-left: 2px solid transparent;
-		color: oklch(0.80 0.02 250);
+		color: color-mix(in oklch, var(--color-base-content, oklch(0.80 0.02 250)) 90%, transparent);
 	}
 	.sd-option:hover {
-		background: oklch(0.19 0.01 250);
+		background: color-mix(in oklch, var(--color-base-content, oklch(0.19 0.01 250)) 8%, var(--color-base-200, oklch(0.19 0.01 250)));
 	}
 	.sd-option-selected {
-		background: oklch(0.20 0.02 250);
-		border-left-color: oklch(0.65 0.15 250);
+		background: color-mix(in oklch, var(--color-base-content, oklch(0.20 0.02 250)) 12%, var(--color-base-200, oklch(0.20 0.02 250)));
+		border-left-color: var(--color-primary, oklch(0.65 0.15 250));
 	}
 	.sd-option-highlighted {
-		background: oklch(0.22 0.02 250);
-		outline: 1px solid oklch(0.45 0.10 250 / 0.5);
+		background: color-mix(in oklch, var(--color-base-content, oklch(0.22 0.02 250)) 16%, var(--color-base-200, oklch(0.22 0.02 250)));
+		outline: 1px solid color-mix(in oklch, var(--color-primary, oklch(0.45 0.10 250)) 50%, transparent);
 		outline-offset: -1px;
 	}
 	.sd-option-highlighted.sd-option-selected {
-		background: oklch(0.24 0.03 250);
+		background: color-mix(in oklch, var(--color-base-content, oklch(0.24 0.03 250)) 20%, var(--color-base-200, oklch(0.24 0.03 250)));
 	}
 
 	/* Chip variant — options render as inline chip pills */
@@ -651,7 +648,7 @@
 		padding: 0.25rem 0.625rem;
 	}
 	.sd-chip-wrap .sd-option-selected {
-		background: oklch(0.19 0.01 250);
+		background: color-mix(in oklch, var(--color-base-content, oklch(0.19 0.01 250)) 8%, var(--color-base-200, oklch(0.19 0.01 250)));
 		border-left: none;
 	}
 	.sd-option-chip {
@@ -663,20 +660,20 @@
 		font-weight: 600;
 		text-transform: uppercase;
 		letter-spacing: 0.025em;
-		border: 1px solid color-mix(in oklch, var(--sd-color, oklch(0.5 0 0)) 35%, transparent);
-		color: color-mix(in oklch, var(--sd-color, oklch(0.7 0 0)) 85%, oklch(0.80 0 0));
+		border: 1px solid color-mix(in oklch, var(--sd-color, var(--color-base-content, oklch(0.5 0 0))) 35%, transparent);
+		color: color-mix(in oklch, var(--sd-color, var(--color-base-content, oklch(0.7 0 0))) 85%, var(--color-base-content, oklch(0.80 0 0)));
 		background: transparent;
 		transition: background 0.1s, border-color 0.1s, color 0.1s;
 	}
 	.sd-chip-wrap .sd-option:hover .sd-option-chip {
-		background: color-mix(in oklch, var(--sd-color, oklch(0.5 0 0)) 12%, transparent);
-		border-color: color-mix(in oklch, var(--sd-color, oklch(0.5 0 0)) 50%, transparent);
-		color: var(--sd-color, oklch(0.80 0 0));
+		background: color-mix(in oklch, var(--sd-color, var(--color-base-content, oklch(0.5 0 0))) 12%, transparent);
+		border-color: color-mix(in oklch, var(--sd-color, var(--color-base-content, oklch(0.5 0 0))) 50%, transparent);
+		color: var(--sd-color, var(--color-base-content, oklch(0.80 0 0)));
 	}
 	.sd-chip-wrap .sd-option-selected .sd-option-chip {
-		background: color-mix(in oklch, var(--sd-color, oklch(0.5 0 0)) 15%, transparent);
-		border-color: color-mix(in oklch, var(--sd-color, oklch(0.5 0 0)) 50%, transparent);
-		color: var(--sd-color, oklch(0.80 0 0));
+		background: color-mix(in oklch, var(--sd-color, var(--color-base-content, oklch(0.5 0 0))) 15%, transparent);
+		border-color: color-mix(in oklch, var(--sd-color, var(--color-base-content, oklch(0.5 0 0))) 50%, transparent);
+		color: var(--sd-color, var(--color-base-content, oklch(0.80 0 0)));
 	}
 
 	.sd-option-icon {
@@ -691,11 +688,11 @@
 		height: 0.75rem;
 		flex-shrink: 0;
 		margin-left: auto;
-		color: oklch(0.70 0.15 145);
+		color: var(--color-success, oklch(0.70 0.15 145));
 	}
 
 	.sd-footer {
-		border-top: 1px solid oklch(0.22 0.02 250);
+		border-top: 1px solid color-mix(in oklch, var(--color-base-content, oklch(0.22 0.02 250)) 25%, transparent);
 	}
 
 	.sd-empty {
@@ -703,6 +700,6 @@
 		text-align: center;
 		font-size: 0.625rem;
 		font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
-		color: oklch(0.45 0.02 250);
+		color: color-mix(in oklch, var(--color-base-content, oklch(0.45 0.02 250)) 45%, transparent);
 	}
 </style>

package/dist/components/TranscriptPlayer.svelte

@@ -0,0 +1,575 @@
+<script lang="ts">
+	/**
+	 * TranscriptPlayer — synced video + transcript viewer for post-meeting
+	 * recordings (LiveKit meeting recordings with diarized/speaker-aligned
+	 * transcripts).
+	 *
+	 * Video playback drives a scrollable transcript panel (click a line to
+	 * seek, active line auto-highlights + auto-scrolls), a chapter/bookmark
+	 * marker strip over the scrub range, an optional solo-speaker playback
+	 * mode, and a per-speaker talk-time bar.
+	 *
+	 * Built for the mardukos meeting-recordings admin viewer (mos-omq6g.23).
+	 * Presentational only — no fetching, no LiveKit dependency. The consuming
+	 * app supplies a (possibly presigned/expiring) video URL plus pre-computed
+	 * transcript/chapter/bookmark/talk-time data.
+	 */
+
+	export interface TranscriptSegment {
+		id: string;
+		startSec: number;
+		endSec: number;
+		speakerIdentity: string | null; // null = couldn't be resolved to a real participant
+		speakerName: string | null; // display name, null if unresolved
+		text: string;
+	}
+
+	export interface TranscriptBookmark {
+		playbackSec: number; // seconds into the recording
+		participantName: string | null;
+		label: string | null;
+	}
+
+	export interface TranscriptChapter {
+		startSec: number;
+		title: string;
+	}
+
+	export interface TranscriptSpeakerTalkTime {
+		speakerIdentity: string | null;
+		speakerName: string | null;
+		seconds: number;
+	}
+
+	/** Small distinct oklch palette, cycled per speaker (mirrors ChapterTimeline's SIGNAL_COLORS approach). */
+	const TALK_TIME_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,
+		segments,
+		chapters = [],
+		bookmarks = [],
+		talkTime = [],
+		onAddBookmark = (_playbackSec: number, _label: string) => {},
+	}: {
+		src: string;
+		segments: TranscriptSegment[];
+		chapters?: TranscriptChapter[];
+		bookmarks?: TranscriptBookmark[];
+		talkTime?: TranscriptSpeakerTalkTime[];
+		onAddBookmark?: (playbackSec: number, label: string) => void;
+	} = $props();
+
+	let videoEl: HTMLVideoElement | undefined = $state();
+	let currentTime = $state(0);
+	let duration = $state(0);
+	let paused = $state(true);
+
+	let soloSpeakerKey = $state(ALL_KEY);
+	let bookmarkLabel = $state('');
+
+	// Row refs for auto-scroll-into-view. Plain (non-reactive) map — refs are
+	// populated on mount, read from inside the $effect below on active-row change.
+	let rowRefs: Record<string, HTMLButtonElement> = {};
+
+	function speakerKey(seg: TranscriptSegment): string {
+		return seg.speakerIdentity ?? UNKNOWN_KEY;
+	}
+
+	const effectiveDuration = $derived(Number.isFinite(duration) && duration > 0 ? duration : 0);
+	const useHours = $derived(effectiveDuration >= 3600 || currentTime >= 3600);
+	const playedPct = $derived(Math.min(100, Math.max(0, (currentTime / (effectiveDuration || 1)) * 100)));
+
+	const activeSegment = $derived(
+		segments.find((s) => currentTime >= s.startSec && currentTime < s.endSec) ?? null
+	);
+
+	// Chapters are assumed sorted ascending by startSec (same convention as segments).
+	const activeChapterIndex = $derived.by(() => {
+		let idx = -1;
+		for (let i = 0; i < chapters.length; i++) {
+			if (chapters[i].startSec <= currentTime) idx = i;
+			else break;
+		}
+		return idx;
+	});
+
+	const speakerOptions = $derived.by(() => {
+		const seen = new Map<string, string>();
+		for (const seg of segments) {
+			const key = speakerKey(seg);
+			if (!seen.has(key)) seen.set(key, seg.speakerName ?? 'Unknown speaker');
+		}
+		return Array.from(seen.entries()).map(([key, label]) => ({ key, label }));
+	});
+
+	const effectiveTalkTime = $derived.by(() => {
+		if (talkTime.length > 0) return talkTime;
+		const totals = new Map<string, TranscriptSpeakerTalkTime>();
+		for (const seg of segments) {
+			const key = speakerKey(seg);
+			const dur = Math.max(0, seg.endSec - seg.startSec);
+			const existing = totals.get(key);
+			if (existing) existing.seconds += dur;
+			else totals.set(key, { speakerIdentity: seg.speakerIdentity, speakerName: seg.speakerName, seconds: dur });
+		}
+		return Array.from(totals.values()).sort((a, b) => b.seconds - a.seconds);
+	});
+
+	const talkTimeTotal = $derived(effectiveTalkTime.reduce((s, t) => s + t.seconds, 0) || 1);
+
+	function paletteColor(i: number): string {
+		return TALK_TIME_PALETTE[i % TALK_TIME_PALETTE.length];
+	}
+
+	function formatTime(totalSeconds: number, withHours: boolean): string {
+		const t = Number.isFinite(totalSeconds) && totalSeconds > 0 ? totalSeconds : 0;
+		const s = Math.floor(t % 60);
+		const pad = (n: number) => String(n).padStart(2, '0');
+		if (withHours) {
+			const h = Math.floor(t / 3600);
+			const m = Math.floor((t % 3600) / 60);
+			return `${h}:${pad(m)}:${pad(s)}`;
+		}
+		const m = Math.floor(t / 60);
+		return `${m}:${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);
+		const sec = s % 60;
+		if (h > 0) return `${h}h ${m}m`;
+		if (m > 0) return `${m}m ${sec}s`;
+		return `${sec}s`;
+	}
+
+	function seekTo(sec: number) {
+		currentTime = sec; // two-way bind:currentTime pushes this to the <video> element
+	}
+
+	/**
+	 * Solo-speaker playback: on every timeupdate, if we're not inside a segment
+	 * belonging to the selected speaker, jump forward to that speaker's next
+	 * segment (segments are sorted ascending by startSec, so this is a simple
+	 * forward scan). If there's no later segment for them, we pause playback
+	 * rather than let it run on into someone else's talk time unchecked.
+	 */
+	function handleSoloTimeUpdate() {
+		if (soloSpeakerKey === ALL_KEY || !videoEl) return;
+		const t = videoEl.currentTime;
+		const inSelected = segments.some((s) => speakerKey(s) === soloSpeakerKey && t >= s.startSec && t < s.endSec);
+		if (inSelected) return;
+		const next = segments.find((s) => speakerKey(s) === soloSpeakerKey && s.startSec > t);
+		if (next) {
+			videoEl.currentTime = next.startSec;
+		} else {
+			videoEl.pause();
+		}
+	}
+
+	// Re-run the solo scan immediately when the selection changes (don't wait
+	// for the next native timeupdate tick to react to the new speaker choice).
+	$effect(() => {
+		soloSpeakerKey;
+		if (videoEl) handleSoloTimeUpdate();
+	});
+
+	// Auto-scroll the active transcript row into view as playback advances.
+	$effect(() => {
+		const seg = activeSegment;
+		if (!seg) return;
+		rowRefs[seg.id]?.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+	});
+
+	function submitBookmark() {
+		onAddBookmark(currentTime, bookmarkLabel.trim());
+		bookmarkLabel = '';
+	}
+</script>
+
+<div class="tp-root">
+	<video
+		bind:this={videoEl}
+		bind:currentTime
+		bind:duration
+		bind:paused
+		ontimeupdate={handleSoloTimeUpdate}
+		{src}
+		controls
+		class="tp-video"
+	>
+		<!-- Captions track present for a11y_media_has_caption compliance; consumer
+		     apps that have caption files can pass a src via a wrapping component. -->
+		<track kind="captions" />
+	</video>
+
+	<div class="tp-timeline">
+		<div class="tp-rail">
+			<div class="tp-rail-fill" style="width: {playedPct}%"></div>
+		</div>
+		{#each chapters as chapter, i (chapter.startSec + ':' + i)}
+			<button
+				type="button"
+				class="tp-marker tp-chapter-marker"
+				class:active={i === activeChapterIndex}
+				style="left: {(chapter.startSec / (effectiveDuration || 1)) * 100}%"
+				title={chapter.title}
+				onclick={() => seekTo(chapter.startSec)}
+			>
+				<span class="tp-chapter-flag"></span>
+			</button>
+		{/each}
+		{#each bookmarks as bookmark, i (bookmark.playbackSec + ':' + i)}
+			<button
+				type="button"
+				class="tp-marker tp-bookmark-marker"
+				style="left: {(bookmark.playbackSec / (effectiveDuration || 1)) * 100}%"
+				title={bookmark.label || (bookmark.participantName ? `${bookmark.participantName}'s bookmark` : 'Bookmark')}
+				onclick={() => seekTo(bookmark.playbackSec)}
+			>
+				<span class="tp-bookmark-dot"></span>
+			</button>
+		{/each}
+	</div>
+
+	<div class="tp-toolbar">
+		<div class="tp-solo">
+			<label for="tp-solo-select">Solo speaker</label>
+			<select id="tp-solo-select" bind:value={soloSpeakerKey}>
+				<option value={ALL_KEY}>All speakers</option>
+				{#each speakerOptions as opt (opt.key)}
+					<option value={opt.key}>{opt.label}</option>
+				{/each}
+			</select>
+		</div>
+
+		<div class="tp-bookmark-add">
+			<label for="tp-bookmark-label-input">Bookmark label</label>
+			<input
+				id="tp-bookmark-label-input"
+				type="text"
+				placeholder="Bookmark label (optional)"
+				bind:value={bookmarkLabel}
+			/>
+			<button type="button" class="tp-add-bookmark-btn" onclick={submitBookmark}>
+				+ Bookmark at {formatTime(currentTime, useHours)}
+			</button>
+		</div>
+	</div>
+
+	{#if effectiveTalkTime.length > 0}
+		<div class="tp-talktime">
+			<div class="tp-talktime-bar">
+				{#each effectiveTalkTime as tt, i (tt.speakerIdentity ?? 'unknown-' + i)}
+					<div
+						class="tp-talktime-seg"
+						style="width: {(tt.seconds / talkTimeTotal) * 100}%; background: {paletteColor(i)}"
+						title="{tt.speakerName ?? 'Unknown speaker'} — {formatDuration(tt.seconds)}"
+					></div>
+				{/each}
+			</div>
+			<div class="tp-talktime-legend">
+				{#each effectiveTalkTime as tt, i (tt.speakerIdentity ?? 'unknown-' + i)}
+					<span class="tp-legend-item">
+						<span class="tp-legend-dot" style="background: {paletteColor(i)}"></span>
+						{tt.speakerName ?? 'Unknown speaker'} — {formatDuration(tt.seconds)}
+					</span>
+				{/each}
+			</div>
+		</div>
+	{/if}
+
+	<div class="tp-transcript">
+		{#if segments.length === 0}
+			<div class="tp-empty">No transcript available for this recording.</div>
+		{:else}
+			{#each segments as seg (seg.id)}
+				<button
+					type="button"
+					class="tp-row"
+					class:active={activeSegment?.id === seg.id}
+					bind:this={rowRefs[seg.id]}
+					onclick={() => seekTo(seg.startSec)}
+				>
+					<span class="tp-row-time">[{formatTime(seg.startSec, useHours)}]</span>
+					<span class="tp-row-speaker">{seg.speakerName ?? 'Unknown speaker'}:</span>
+					<span class="tp-row-text">{seg.text}</span>
+				</button>
+			{/each}
+		{/if}
+	</div>
+</div>
+
+<style>
+	.tp-root {
+		display: flex;
+		flex-direction: column;
+		gap: 0.6rem;
+		background: oklch(0.14 0.01 250);
+		border: 1px solid oklch(0.22 0.02 250);
+		border-radius: 0.6rem;
+		padding: 0.75rem;
+	}
+
+	.tp-video {
+		width: 100%;
+		border-radius: 0.4rem;
+		background: oklch(0.08 0 0);
+		display: block;
+	}
+
+	/* Timeline — chapter + bookmark marker strip */
+	.tp-timeline {
+		position: relative;
+		height: 1.75rem;
+		margin: 0 0.25rem;
+	}
+
+	.tp-rail {
+		position: absolute;
+		top: 50%;
+		left: 0;
+		right: 0;
+		height: 0.35rem;
+		transform: translateY(-50%);
+		background: oklch(0.20 0.02 250);
+		border: 1px solid oklch(0.26 0.02 250);
+		border-radius: 999px;
+		overflow: hidden;
+	}
+
+	.tp-rail-fill {
+		height: 100%;
+		background: oklch(0.60 0.16 250);
+	}
+
+	.tp-marker {
+		position: absolute;
+		top: 0;
+		transform: translateX(-50%);
+		background: none;
+		border: none;
+		padding: 0.1rem;
+		cursor: pointer;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.tp-chapter-flag {
+		display: block;
+		width: 0.55rem;
+		height: 0.9rem;
+		background: oklch(0.72 0.16 200);
+		border-radius: 0.15rem 0.15rem 0.15rem 0;
+		box-shadow: 0 0 0 1px oklch(0.20 0.02 250);
+	}
+
+	.tp-chapter-marker:hover .tp-chapter-flag {
+		background: oklch(0.80 0.16 200);
+	}
+
+	.tp-chapter-marker.active .tp-chapter-flag {
+		background: oklch(0.85 0.18 200);
+		box-shadow: 0 0 8px oklch(0.72 0.16 200 / 0.6);
+	}
+
+	.tp-bookmark-dot {
+		display: block;
+		width: 0.6rem;
+		height: 0.6rem;
+		margin-top: 0.55rem;
+		background: oklch(0.78 0.16 85);
+		transform: rotate(45deg);
+		box-shadow: 0 0 0 1px oklch(0.20 0.02 250);
+	}
+
+	.tp-bookmark-marker:hover .tp-bookmark-dot {
+		background: oklch(0.85 0.18 85);
+	}
+
+	/* Toolbar — solo-speaker select + add-bookmark control */
+	.tp-toolbar {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: 0.75rem;
+		font-size: 0.75rem;
+		color: oklch(0.75 0.04 250);
+	}
+
+	.tp-solo,
+	.tp-bookmark-add {
+		display: flex;
+		align-items: center;
+		gap: 0.4rem;
+	}
+
+	.tp-solo label {
+		color: oklch(0.60 0.03 250);
+	}
+
+	.tp-bookmark-add label {
+		/* visually hidden, still associated for a11y */
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		margin: -1px;
+		overflow: hidden;
+		clip: rect(0, 0, 0, 0);
+		white-space: nowrap;
+		border: 0;
+	}
+
+	.tp-solo select,
+	.tp-bookmark-add input {
+		background: oklch(0.18 0.01 250);
+		border: 1px solid oklch(0.26 0.02 250);
+		border-radius: 0.35rem;
+		color: oklch(0.85 0.02 250);
+		padding: 0.3rem 0.5rem;
+		font-size: 0.75rem;
+	}
+
+	.tp-bookmark-add input {
+		min-width: 12rem;
+	}
+
+	.tp-add-bookmark-btn {
+		background: oklch(0.22 0.03 250);
+		border: 1px solid oklch(0.30 0.03 250);
+		border-radius: 0.35rem;
+		color: oklch(0.85 0.04 250);
+		padding: 0.3rem 0.6rem;
+		font-size: 0.75rem;
+		cursor: pointer;
+		white-space: nowrap;
+		transition: background 0.12s ease, border-color 0.12s ease;
+	}
+
+	.tp-add-bookmark-btn:hover {
+		background: color-mix(in oklch, oklch(0.78 0.16 85) 18%, oklch(0.22 0.03 250));
+		border-color: oklch(0.78 0.16 85 / 0.5);
+	}
+
+	/* Talk-time bar */
+	.tp-talktime {
+		display: flex;
+		flex-direction: column;
+		gap: 0.35rem;
+	}
+
+	.tp-talktime-bar {
+		display: flex;
+		height: 0.6rem;
+		border-radius: 999px;
+		overflow: hidden;
+		background: oklch(0.20 0.02 250);
+	}
+
+	.tp-talktime-seg {
+		height: 100%;
+	}
+
+	.tp-talktime-legend {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 0.6rem;
+		font-size: 0.68rem;
+		color: oklch(0.68 0.03 250);
+	}
+
+	.tp-legend-item {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.3rem;
+	}
+
+	.tp-legend-dot {
+		width: 0.5rem;
+		height: 0.5rem;
+		border-radius: 999px;
+		flex-shrink: 0;
+	}
+
+	/* Transcript panel */
+	.tp-transcript {
+		display: flex;
+		flex-direction: column;
+		gap: 0.15rem;
+		max-height: 18rem;
+		overflow-y: auto;
+		background: oklch(0.12 0.01 250);
+		border: 1px solid oklch(0.22 0.02 250);
+		border-radius: 0.4rem;
+		padding: 0.35rem;
+	}
+
+	.tp-empty {
+		font-size: 0.75rem;
+		color: oklch(0.55 0.02 250);
+		padding: 0.75rem;
+		text-align: center;
+	}
+
+	.tp-row {
+		display: flex;
+		align-items: baseline;
+		flex-wrap: wrap;
+		gap: 0.35rem;
+		background: none;
+		border: none;
+		border-radius: 0.3rem;
+		padding: 0.3rem 0.45rem;
+		text-align: left;
+		cursor: pointer;
+		transition: background 0.12s ease;
+	}
+
+	.tp-row:hover {
+		background: oklch(0.18 0.02 250);
+	}
+
+	.tp-row.active {
+		background: color-mix(in oklch, oklch(0.70 0.16 250) 16%, oklch(0.16 0.01 250));
+		box-shadow: inset 2px 0 0 oklch(0.70 0.16 250);
+	}
+
+	.tp-row-time {
+		font-family: monospace;
+		font-size: 0.68rem;
+		color: oklch(0.50 0.02 250);
+		flex-shrink: 0;
+	}
+
+	.tp-row-speaker {
+		font-size: 0.75rem;
+		font-weight: 600;
+		color: oklch(0.78 0.06 250);
+		flex-shrink: 0;
+	}
+
+	.tp-row.active .tp-row-speaker {
+		color: oklch(0.88 0.08 250);
+	}
+
+	.tp-row-text {
+		font-size: 0.78rem;
+		color: oklch(0.80 0.02 250);
+		flex: 1;
+		min-width: 10rem;
+	}
+</style>

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

@@ -0,0 +1,48 @@
+/**
+ * TranscriptPlayer — synced video + transcript viewer for post-meeting
+ * recordings (LiveKit meeting recordings with diarized/speaker-aligned
+ * transcripts).
+ *
+ * Video playback drives a scrollable transcript panel (click a line to
+ * seek, active line auto-highlights + auto-scrolls), a chapter/bookmark
+ * marker strip over the scrub range, an optional solo-speaker playback
+ * mode, and a per-speaker talk-time bar.
+ *
+ * Built for the mardukos meeting-recordings admin viewer (mos-omq6g.23).
+ * Presentational only — no fetching, no LiveKit dependency. The consuming
+ * app supplies a (possibly presigned/expiring) video URL plus pre-computed
+ * transcript/chapter/bookmark/talk-time data.
+ */
+export interface TranscriptSegment {
+    id: string;
+    startSec: number;
+    endSec: number;
+    speakerIdentity: string | null;
+    speakerName: string | null;
+    text: string;
+}
+export interface TranscriptBookmark {
+    playbackSec: number;
+    participantName: string | null;
+    label: string | null;
+}
+export interface TranscriptChapter {
+    startSec: number;
+    title: string;
+}
+export interface TranscriptSpeakerTalkTime {
+    speakerIdentity: string | null;
+    speakerName: string | null;
+    seconds: number;
+}
+type $$ComponentProps = {
+    src: string;
+    segments: TranscriptSegment[];
+    chapters?: TranscriptChapter[];
+    bookmarks?: TranscriptBookmark[];
+    talkTime?: TranscriptSpeakerTalkTime[];
+    onAddBookmark?: (playbackSec: number, label: string) => void;
+};
+declare const TranscriptPlayer: import("svelte").Component<$$ComponentProps, {}, "">;
+type TranscriptPlayer = ReturnType<typeof TranscriptPlayer>;
+export default TranscriptPlayer;

package/dist/index.d.ts

@@ -9,6 +9,8 @@ export { default as LinkedColumns } from './components/linked-columns/LinkedColu
 export type { ColumnLink } from './components/linked-columns/LinkedColumns.svelte';
 export { default as ChapterTimeline } from './components/replay/ChapterTimeline.svelte';
 export type { ChapterBlock } from './components/replay/ChapterTimeline.svelte';
+export { default as TranscriptPlayer } from './components/TranscriptPlayer.svelte';
+export type { TranscriptSegment, TranscriptBookmark, TranscriptChapter, TranscriptSpeakerTalkTime, } from './components/TranscriptPlayer.svelte';
 export { buildLinkedSession, buildLinkedSessionFromWork, rawTypeToState, sampleLinkedSession, SAMPLE_TRANSCRIPT_LINES, } from './components/session-nav/transcriptModel';
 export type { ItemKind, TranscriptItem, FileTouchedEntry, SignalNode, LinkedSession, WorkBlockClient, WorkTranscriptItemClient, } from './components/session-nav/transcriptModel';
 export { default as UserAvatar } from './components/UserAvatar.svelte';

package/dist/index.js

@@ -6,6 +6,7 @@ export { default as Collapse } from './components/Collapse.svelte';
 // Components — Session primitives (from JAT IDE, jat-jj79f.16 G1)
 export { default as LinkedColumns } from './components/linked-columns/LinkedColumns.svelte';
 export { default as ChapterTimeline } from './components/replay/ChapterTimeline.svelte';
+export { default as TranscriptPlayer } from './components/TranscriptPlayer.svelte';
 // Data models — Session transcript (from JAT IDE, jat-jj79f.16 G1)
 export { buildLinkedSession, buildLinkedSessionFromWork, rawTypeToState, sampleLinkedSession, SAMPLE_TRANSCRIPT_LINES, } from './components/session-nav/transcriptModel';
 // Components — Universal

package/package.json

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