@joewinke/jatui 0.2.19 → 0.2.21

package/CLAUDE.md

@@ -74,6 +74,43 @@ Then import:
 |-----------|---------|-----------|
 | `MediaWorkbench` | Full-featured image editor modal — upload, AI generate, AI edit, background removal, annotation canvas. **Preferred over `SmartImageEditor` for new image fields.** Two-column modal: preview left, 4 action tabs right (Generate, Edit, Remove BG, Annotate). Save uploads blob to `uploadEndpoint` or emits `onComplete`. Requires proxy endpoints from jst-23w1l.2. | `value` (bindable `string \| null`), `uploadEndpoint?` (default `/api/media`), `onComplete?`, `accept?` |
 
+### Meetings (subpath: `jatui/meet`)
+
+Real-time video-meeting UI. `livekit-client` is an **OPTIONAL peer dep**, lazily
+imported (`loadLiveKit()`) only by container components and never at module scope —
+so consumers who never render meeting UI don't install it (the d3/cobe/@xyflow
+pattern). Import via the subpath, NOT the main barrel:
+
+```svelte
+<script>
+  import { MeetingRoom, ControlBar, PreJoinLobby } from 'jatui/meet'
+  import type { MeetParticipant } from 'jatui/meet'
+</script>
+```
+
+The presentational components (`VideoTile`, `ControlBar`, `ParticipantList`,
+`RecordingBadge`) are driven by plain `MeetParticipant`/`MeetRoomState` view-models
+(no LiveKit types), so a route adapts real LiveKit tracks into them and demos mock
+them with no server.
+
+| Component | Purpose | Key Props |
+|-----------|---------|-----------|
+| `PreJoinLobby` | Device check before joining — camera/mic self-preview (browser-native, no LiveKit), display-name confirm, device pickers, optional consent gate (`consent` snippet slot). Emits `PreJoinResult` on join. | `displayName` (bindable), `roomName`, `consentRequired`, `joining`, `cameraDefault`, `micDefault`, `onJoin` |
+| `MeetingRoom` | In-room layout shell — responsive grid, auto focus/filmstrip layout on screen-share. Snippet slots: `controls`, `panel`, `chrome`. | `participants`, `layout`, `focusedId`, `showPanel`, `controls`/`panel`/`chrome` (snippets) |
+| `VideoTile` | One participant's video surface — attaches a `MediaStreamTrack`, camera-off avatar/initials, mic/share/connection badges, speaking ring. | `participant: MeetParticipant`, `mirror`, `size` |
+| `ControlBar` | In-room action bar — mic/cam/screenshare/leave + host menu (lock, record, end-for-all). Real buttons, `aria-pressed`. | `local: MeetParticipant`, `isHost`, `room: MeetRoomState`, `controls: MeetLocalControls`, `hostActions: MeetHostActions` |
+| `ParticipantList` | Roster sidebar — mic/camera state, per-participant host actions (mute, remove) on hover/focus. | `participants`, `isHost`, `hostActions`, `title` |
+| `RecordingBadge` | Always-visible pulsing recording indicator with `aria-live`; renders nothing when off (consent-safe room chrome). | `recording`, `label`, `compact` |
+
+**Types & loader:**
+```typescript
+import type {
+  MeetParticipant, MeetRole, MeetRoomState, MeetLayout,
+  MeetHostActions, MeetLocalControls, PreJoinResult
+} from 'jatui/meet'
+import { loadLiveKit, isLiveKitAvailable, LiveKitNotInstalledError } from 'jatui/meet'
+```
+
 ### Layout
 
 | Component | Purpose | Key Props |

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