@joewinke/jatui 0.18.1 → 0.19.0

package/dist/components/VideoPlayer.svelte

@@ -101,9 +101,20 @@
 		sortSegments,
 		sortTurns,
 		speakerKeyOf,
-		SPEAKER_PALETTE,
+		DEFAULT_SPEAKER_SOURCE,
 		UNKNOWN_KEY
 	} from '../video/model';
+	import { adjustSpeakerColors, buildSpeakerPaletteSource } from '../video/speakerTheme';
+	import {
+		buildOffsets,
+		EST_ROW_H,
+		findAnchor,
+		OVERSCAN,
+		TRANS_GAP,
+		transcriptResetKind,
+		VIRTUAL_THRESHOLD,
+		windowFor
+	} from '../video/transcriptWindow';
 	import {
 		bandClusters,
 		clampCardX,
@@ -724,6 +735,224 @@
 	// mount and only read from inside an effect, never used as a reactive source.
 	let rowRefs: Record<string, HTMLButtonElement> = {};
 
+	// ── Transcript windowing (mos-5lzns.95) ─────────────────────────────────
+	// Long transcripts (a 2h talk ≈ 2–3k rows) render only the rows near the
+	// viewport; the math lives in video/transcriptWindow.ts. Heights vary
+	// (text wraps), so rendered rows are measured and the estimates corrected.
+	const transVirtual = $derived(sortedSegments.length > VIRTUAL_THRESHOLD);
+	const segIndexById = $derived.by(() => {
+		const m = new Map<string, number>();
+		sortedSegments.forEach((s, i) => m.set(s.id, i));
+		return m;
+	});
+
+	let transcriptEl: HTMLDivElement | null = null;
+	let vpScrollTop = $state(0);
+	let vpHeight = $state(0);
+	let heightsVersion = $state(0);
+	// Non-reactive window caches — reset wholesale when the transcript changes.
+	let measuredHeights: number[] = [];
+	let offsetsCache: number[] = [];
+	let offsetsValid = false;
+	let transPadTop = 0; // pane padding-top (rows start below it)
+	let pendingAutoScrollId: string | null = $state(null);
+	let measureScheduled = false;
+	const pendingMeasures = new Map<number, HTMLButtonElement>();
+
+	function ensureOffsets(): number[] {
+		if (offsetsValid) return offsetsCache;
+		offsetsCache = buildOffsets(measuredHeights, sortedSegments.length, EST_ROW_H, TRANS_GAP);
+		offsetsValid = true;
+		return offsetsCache;
+	}
+
+	function resetTranscriptWindow() {
+		measuredHeights = [];
+		offsetsValid = false;
+		offsetsCache = [];
+		transPadTop = 0;
+		pendingAutoScrollId = null;
+		vpScrollTop = 0;
+		if (transcriptEl) transcriptEl.scrollTop = 0;
+	}
+
+	/** Append-only growth: heights measured for the prefix stay valid, so only
+	 * the offsets rebuild (lazily, for the new length); scroll position holds. */
+	function extendTranscriptWindow() {
+		offsetsValid = false;
+	}
+
+	/** Re-index + re-queue measurement for every mounted row. A transcript
+	 * swap can keep keyed rows mounted (same seg.id) while their indices and
+	 * the height cache change — without this, dataset.segIndex goes stale and
+	 * the spacers drift. */
+	function requeueMountedRows() {
+		for (const [id, node] of Object.entries(rowRefs)) {
+			const idx = segIndexById.get(id);
+			if (idx == null) continue; // row unmounts; its action destroy cleans up
+			node.dataset.segIndex = String(idx);
+			if (transVirtual) pendingMeasures.set(idx, node);
+		}
+		scheduleRowMeasure();
+	}
+
+	let prevSegmentIds: string[] | null = null;
+
+	$effect(() => {
+		// New transcript data ⇒ classify against the ids already rendered:
+		// unchanged ⇒ nothing (rows are keyed and stay mounted); append-only ⇒
+		// keep scrollTop and the measured prefix; anything else ⇒ full reset.
+		void transVirtual;
+		const ids = sortedSegments.map((s) => s.id);
+		untrack(() => {
+			const prev = prevSegmentIds;
+			prevSegmentIds = ids;
+			const kind = prev === null ? 'reset' : transcriptResetKind(prev, ids);
+			if (kind === 'reset') {
+				resetTranscriptWindow();
+				requeueMountedRows();
+			} else if (kind === 'extend') {
+				extendTranscriptWindow();
+			}
+		});
+	});
+
+	const transWindow = $derived.by(() => {
+		if (!transVirtual) return null;
+		void vpScrollTop;
+		void vpHeight;
+		void heightsVersion;
+		const offsets = ensureOffsets();
+		const w = windowFor(offsets, vpScrollTop - transPadTop, Math.max(0, vpHeight), OVERSCAN);
+		// Spacer heights account for the flex gap that separates them from the
+		// rows: the top spacer is followed by a gap, and the pane's last row has
+		// no trailing gap, so the total matches the unwindowed layout exactly.
+		const total = offsets[sortedSegments.length] ?? 0;
+		return {
+			...w,
+			padTop: Math.max(0, (offsets[w.first] ?? 0) - TRANS_GAP),
+			padBottom: Math.max(0, total - TRANS_GAP - (offsets[w.last] ?? total))
+		};
+	});
+
+	const renderedSegments = $derived(
+		transWindow ? sortedSegments.slice(transWindow.first, transWindow.last) : sortedSegments
+	);
+
+	function onTranscriptScroll() {
+		if (transcriptEl) vpScrollTop = transcriptEl.scrollTop;
+	}
+
+	function bindTranscriptRow(seg: VideoTranscriptSegment, node: HTMLButtonElement) {
+		rowRefs[seg.id] = node;
+		if (!transVirtual) return;
+		const idx = segIndexById.get(seg.id);
+		if (idx == null) return;
+		node.dataset.segIndex = String(idx);
+		pendingMeasures.set(idx, node);
+		scheduleRowMeasure();
+	}
+
+	/** Action (node, param): bind the row, measure it, keep it correct across
+	 * transcript updates, and clean the ref up on unmount. */
+	function transcriptRowAction(node: HTMLButtonElement, seg: VideoTranscriptSegment) {
+		bindTranscriptRow(seg, node);
+		return {
+			update(next: VideoTranscriptSegment) {
+				if (next.id !== seg.id) delete rowRefs[seg.id];
+				seg = next;
+				// Keyed rows survive transcript rebuilds: re-index the dataset and
+				// re-queue measurement so the height cache tracks the new array.
+				bindTranscriptRow(seg, node);
+			},
+			destroy() {
+				delete rowRefs[seg.id];
+				// Windowing unmount of the FOCUSED row: move focus to the pane
+				// container instead of dropping it to <body> (keyboard users keep
+				// their place; scrolling brings the rows back into range).
+				const idx = segIndexById.get(seg.id);
+				const outOfWindow =
+					idx == null ||
+					transWindow === null ||
+					idx < transWindow.first ||
+					idx >= transWindow.last;
+				if (
+					transVirtual &&
+					transWindow !== null &&
+					outOfWindow &&
+					transcriptEl &&
+					document.activeElement === node
+				) {
+					transcriptEl.focus();
+				}
+			}
+		};
+	}
+
+	function scheduleRowMeasure() {
+		if (measureScheduled) return;
+		measureScheduled = true;
+		requestAnimationFrame(applyRowMeasures);
+	}
+
+	function applyRowMeasures() {
+		measureScheduled = false;
+		if (pendingMeasures.size === 0) return;
+		const el = transcriptEl;
+		const before = ensureOffsets();
+		const st = el ? el.scrollTop : vpScrollTop;
+		const anchor = findAnchor(before, st);
+		const beforeTop = before[anchor] ?? 0;
+		let changed = false;
+		for (const [idx, node] of pendingMeasures) {
+			const h = node.offsetHeight;
+			if (h > 0 && measuredHeights[idx] !== h) {
+				measuredHeights[idx] = h;
+				changed = true;
+			}
+		}
+		pendingMeasures.clear();
+		if (!changed) return;
+		offsetsValid = false;
+		heightsVersion++;
+		// Keep the viewport content stable: if rows ABOVE the scroll position
+		// changed height, shift scrollTop by the same delta so nothing jumps.
+		const after = ensureOffsets();
+		const delta = (after[anchor] ?? beforeTop) - beforeTop;
+		if (el && delta !== 0 && st >= beforeTop) {
+			el.scrollTop = st + delta; // fires onscroll → vpScrollTop follows
+		}
+	}
+
+	function measureTranscriptPane(el: HTMLDivElement) {
+		transcriptEl = el;
+		el.tabIndex = -1; // focus sink when the focused row unmounts from windowing
+		const cs = getComputedStyle(el);
+		transPadTop = parseFloat(cs.paddingTop) || 0;
+		vpHeight = el.clientHeight;
+		const ro = new ResizeObserver(() => {
+			vpHeight = el.clientHeight;
+			// Width changes re-wrap text: re-measure what's rendered.
+			for (const node of Object.values(rowRefs)) {
+				const idx = Number(node.dataset.segIndex);
+				if (Number.isInteger(idx) && idx >= 0) pendingMeasures.set(idx, node);
+			}
+			scheduleRowMeasure();
+		});
+		ro.observe(el);
+		return {
+			destroy() {
+				ro.disconnect();
+				transcriptEl = null;
+			}
+		};
+	}
+
+	/** Action wrapper so the template can attach the pane. */
+	function transcriptPaneAction(el: HTMLDivElement) {
+		return measureTranscriptPane(el);
+	}
+
 	// ── Derived data ────────────────────────────────────────────────────────
 	const effectiveDuration = $derived(
 		Number.isFinite(duration) && duration > 0 ? duration : (waveform?.durationSec ?? 0)
@@ -760,8 +989,34 @@
 
 	const hasSpeakers = $derived(speakerIndex.size > 0);
 
-	/** key → identity colour, resolved ONCE per data change (see video/model.ts). */
-	const speakerColors = $derived(buildSpeakerColors(speakerIndex));
+	/**
+	 * Theme-derived speaker identity: colours + the fallback cycle in one read
+	 * (mos-5lzns.95). Colours derive from the live theme's tokens: the cycle
+	 * rotates the semantic role colours and hue-bearing speakers take the
+	 * theme's own lightness/chroma, then every colour is lifted to AA against
+	 * the transcript surface by mixing toward base-content. SSR keeps the
+	 * legacy literal palette (deterministic snapshot output); themeTick
+	 * recomputes everything on a theme swap.
+	 */
+	const speakerTheme = $derived.by(() => {
+		void themeTick;
+		if (typeof document === 'undefined') {
+			return {
+				colors: buildSpeakerColors(speakerIndex, DEFAULT_SPEAKER_SOURCE),
+				cycle: DEFAULT_SPEAKER_SOURCE.cycle
+			};
+		}
+		const ctx = buildSpeakerPaletteSource();
+		return {
+			colors: adjustSpeakerColors(
+				buildSpeakerColors(speakerIndex, ctx.source),
+				ctx.surface,
+				ctx.ink
+			),
+			cycle: ctx.source.cycle
+		};
+	});
+	const speakerColors = $derived(speakerTheme.colors);
 
 	/** With an envelope the bars carry the hues; the lane is the no-waveform fallback only. */
 	const laneCarriesSpeakers = $derived(!hasWave && sortedTurns.length > 0);
@@ -863,7 +1118,7 @@
 
 	/** Explicit hue wins (host-supplied identity colour); otherwise the cycled palette. */
 	function speakerColor(key: string): string {
-		return speakerColors.get(key) ?? SPEAKER_PALETTE[0];
+		return speakerColors.get(key) ?? speakerTheme.cycle[0] ?? DEFAULT_SPEAKER_SOURCE.cycle[0];
 	}
 
 	// ── Zoom window: one mapping every position computation goes through ────
@@ -2471,10 +2726,39 @@
 	});
 
 	// Auto-scroll the active transcript row into view as playback advances.
+	// Windowed panes may not have the row rendered: jump to its (estimated)
+	// offset first, then a follow-up effect lands exactly on the real row once
+	// the window renders it.
 	$effect(() => {
 		const seg = activeSegment;
 		if (!seg) return;
-		untrack(() => rowRefs[seg.id]?.scrollIntoView({ block: 'nearest', behavior: 'smooth' }));
+		untrack(() => {
+			const node = rowRefs[seg.id];
+			if (node) {
+				node.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+				return;
+			}
+			if (!transVirtual || !transcriptEl) return;
+			const idx = segIndexById.get(seg.id);
+			if (idx == null) return;
+			const top = ensureOffsets()[idx] ?? 0;
+			// Row top (in content coords) = pane padding + offset; land it ⅓ down.
+			transcriptEl.scrollTop = Math.max(0, top + transPadTop - Math.max(0, vpHeight) / 3);
+			pendingAutoScrollId = seg.id;
+		});
+	});
+
+	// Exact landing after a windowed jump: the row is now rendered — snap to it.
+	$effect(() => {
+		void renderedSegments;
+		const id = pendingAutoScrollId;
+		if (!id) return;
+		untrack(() => {
+			const node = rowRefs[id];
+			if (!node) return;
+			pendingAutoScrollId = null;
+			node.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+		});
 	});
 
 	// ── Legend interactions ─────────────────────────────────────────────────
@@ -2861,25 +3145,56 @@
 	</div>
 
 	{#if sortedSegments.length > 0 && transcriptVisible}
-		<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, soloKey, mutedKeys)}
-					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
+			class="vp-transcript"
+			style="max-height: {transcriptMaxHeight}"
+			use:transcriptPaneAction
+			onscroll={onTranscriptScroll}
+		>
+			{#if transWindow}
+				<!-- Windowed: only the rows near the viewport exist in the DOM.
+				     Spacers stand in for the rows above/below; heights are
+				     estimates corrected by measuring rendered rows. -->
+				<div class="vp-spacer" style="height: {transWindow.padTop}px" aria-hidden="true"></div>
+				{#each renderedSegments 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, soloKey, mutedKeys)}
+						use:transcriptRowAction={seg}
+						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 class="vp-spacer" style="height: {transWindow.padBottom}px" aria-hidden="true"></div>
+			{:else}
+				{#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, soloKey, mutedKeys)}
+						use:transcriptRowAction={seg}
+						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}
+			{/if}
 		</div>
 	{/if}
 
@@ -3391,6 +3706,14 @@
 		min-width: 0;
 	}
 
+	/* Windowing stand-ins (mos-5lzns.95): fixed-height blocks sized by the
+	   prefix-sum offsets so the scrollbar reflects the whole transcript. */
+	.vp-spacer {
+		flex: none;
+		width: 100%;
+		pointer-events: none;
+	}
+
 	.vp-row {
 		display: flex;
 		align-items: baseline;

package/dist/video/model.d.ts

@@ -10,10 +10,42 @@ import type { VideoSpeakerTalkTime, VideoSpeakerTurn, VideoTranscriptSegment } f
 export declare const ALL_KEY = "__all__";
 export declare const UNKNOWN_KEY = "__unknown__";
 /**
- * Speaker identity palette — the same small distinct oklch set TranscriptPlayer
- * cycles, so a speaker reads as the same colour in both components.
+ * Speaker identity palette — the FALLBACK cycle used only where no theme is
+ * reachable (SSR render, unit tests, un-styled hosts). Live components derive
+ * the cycle from DaisyUI theme tokens via buildSpeakerPaletteSource()
+ * (video/speakerTheme.ts) so white-label tenants reskin speaker colours with
+ * the rest of the theme (mos-5lzns.95).
  */
 export declare const SPEAKER_PALETTE: string[];
+/**
+ * Where identity colours come from. `cycle` is the rotation for speakers
+ * without an explicit diarization hue; `hueBase` (lightness + chroma from a
+ * THEME token, usually --color-primary) is rebuilt into `oklch(L C hue)` so
+ * hue-bearing speakers follow the theme's own tone instead of a literal.
+ * `hueBase: null` falls those speakers back onto the cycle.
+ */
+export interface SpeakerColorSource {
+    cycle: string[];
+    hueBase: {
+        l: number;
+        c: number;
+    } | null;
+}
+/**
+ * The legacy derivation, kept as the default so SSR and pure consumers render
+ * exactly as before (stable snapshot output, no DOM needed).
+ */
+export declare const DEFAULT_SPEAKER_SOURCE: SpeakerColorSource;
+/**
+ * Parse `oklch(L C H)` / `oklch(L% C H)` / with alpha into just the lightness
+ * and chroma channels (hue comes from the speaker, not the theme). Returns
+ * null for anything that isn't an oklch() literal — hex themes just fall back
+ * to the cycle.
+ */
+export declare function parseOklch(color: string): {
+    l: number;
+    c: number;
+} | null;
 export type SpeakerLike = {
     speakerIdentity?: string | null;
     speakerName?: string | null;
@@ -37,7 +69,7 @@ export declare function buildSpeakerColors(speakerIndex: Map<string, {
     key: string;
     name: string;
     hue: number | null;
-}>): Map<string, string>;
+}>, src?: SpeakerColorSource): Map<string, string>;
 /** Ascending sort of the optional data arrays — the only normalization every consumer agrees on. */
 export declare function sortChapters<T extends {
     startSec: number;

package/dist/video/model.js

@@ -1,8 +1,11 @@
 export const ALL_KEY = '__all__';
 export const UNKNOWN_KEY = '__unknown__';
 /**
- * Speaker identity palette — the same small distinct oklch set TranscriptPlayer
- * cycles, so a speaker reads as the same colour in both components.
+ * Speaker identity palette — the FALLBACK cycle used only where no theme is
+ * reachable (SSR render, unit tests, un-styled hosts). Live components derive
+ * the cycle from DaisyUI theme tokens via buildSpeakerPaletteSource()
+ * (video/speakerTheme.ts) so white-label tenants reskin speaker colours with
+ * the rest of the theme (mos-5lzns.95).
  */
 export const SPEAKER_PALETTE = [
     'oklch(0.70 0.16 250)', // blue
@@ -12,6 +15,30 @@ export const SPEAKER_PALETTE = [
     'oklch(0.68 0.16 300)', // violet
     'oklch(0.72 0.14 200)' // cyan
 ];
+/**
+ * The legacy derivation, kept as the default so SSR and pure consumers render
+ * exactly as before (stable snapshot output, no DOM needed).
+ */
+export const DEFAULT_SPEAKER_SOURCE = {
+    cycle: SPEAKER_PALETTE,
+    hueBase: { l: 0.72, c: 0.14 }
+};
+/**
+ * Parse `oklch(L C H)` / `oklch(L% C H)` / with alpha into just the lightness
+ * and chroma channels (hue comes from the speaker, not the theme). Returns
+ * null for anything that isn't an oklch() literal — hex themes just fall back
+ * to the cycle.
+ */
+export function parseOklch(color) {
+    const m = /^oklch\(\s*([\d.]+%?)\s+([\d.]+)\s+[\d.]+(?:\s*\/\s*[\d.]+%?\s*)?\)$/i.exec(color.trim());
+    if (!m)
+        return null;
+    const l = parseFloat(m[1]);
+    const c = parseFloat(m[2]);
+    if (!Number.isFinite(l) || !Number.isFinite(c))
+        return null;
+    return { l: /%/.test(m[1]) ? l / 100 : l, c };
+}
 export function speakerKeyOf(s) {
     return s.speakerIdentity ?? s.speakerName ?? UNKNOWN_KEY;
 }
@@ -45,17 +72,25 @@ export function buildSpeakerIndex(turns, segments) {
  * colour per rendered column and reruns on every playhead tick, so this must
  * never be an indexOf scan at call time.
  */
-export function buildSpeakerColors(speakerIndex) {
+export function buildSpeakerColors(speakerIndex, src = DEFAULT_SPEAKER_SOURCE) {
     const map = new Map();
+    const cycle = src.cycle.length > 0 ? src.cycle : DEFAULT_SPEAKER_SOURCE.cycle;
     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]);
+            ? hueColor(entry.hue, src.hueBase) ?? cycle[i % cycle.length]
+            : cycle[i % cycle.length]);
         i++;
     }
     return map;
 }
+/** Theme-toned identity colour for a diarization hue, wrapped to 0–360. */
+function hueColor(hue, base) {
+    if (!base)
+        return null;
+    const h = ((hue % 360) + 360) % 360;
+    return `oklch(${base.l} ${base.c} ${h})`;
+}
 /** Ascending sort of the optional data arrays — the only normalization every consumer agrees on. */
 export function sortChapters(chapters) {
     return [...chapters]

package/dist/video/speakerTheme.d.ts

@@ -0,0 +1,43 @@
+import { type SpeakerColorSource } from './model';
+/**
+ * hueBase from a theme token colour. Keeps the token's lightness, floors its
+ * chroma, and falls back to the legacy 0.72/0.14 tone when the token is
+ * achromatic (or not an oklch literal — parseOklch returns null for hex
+ * themes, which then ride the cycle only).
+ */
+export declare function hueBaseFromToken(color: string | null | undefined): {
+    l: number;
+    c: number;
+} | null;
+export interface SpeakerThemeContext {
+    source: SpeakerColorSource;
+    /** Resolved --color-base-100 (the transcript surface). */
+    surface: string;
+    /** Resolved --color-base-content (the ink the ladder mixes toward). */
+    ink: string;
+}
+/**
+ * Build the palette source from the live theme. De-dupes the token colours
+ * (a custom theme may alias roles) and tops the cycle up with token mixes if
+ * fewer than three distinct hues survive, so speakers stay distinguishable.
+ */
+export declare function buildSpeakerPaletteSource(): SpeakerThemeContext;
+/** `color-mix(in oklch, color (100−pct)%, ink pct%)` — pct is the INK weight. */
+export declare function mixToward(color: string, ink: string, pct: number): string;
+/** WCAG contrast ratio between two rgb triples (≥1, ≤21). */
+export declare function contrastRatio(a: readonly number[], b: readonly number[]): number;
+/**
+ * Resolve any CSS colour string to sRGB via a 1×1 canvas. Returns null when
+ * the string cannot be parsed (SSR, unsupported colour function) — callers
+ * keep the original colour rather than guessing.
+ */
+export declare function resolveColorRgb(color: string): readonly [number, number, number] | null;
+/**
+ * Lift `color` to AA contrast against `surface` by ladder-mixing toward ink.
+ * Colour-parsing environments that cannot resolve a string keep it unchanged
+ * (the raw token value is still theme-following, just unverified).
+ * `resolve` is injectable for DOM-free tests.
+ */
+export declare function adjustForContrast(color: string, surface: string, ink: string, minRatio?: number, resolve?: (c: string) => readonly [number, number, number] | null): string;
+/** Map-of-speakers convenience over adjustForContrast. */
+export declare function adjustSpeakerColors(colors: Map<string, string>, surface: string, ink: string): Map<string, string>;

package/dist/video/speakerTheme.js

@@ -0,0 +1,156 @@
+/**
+ * Theme-derived speaker identity colours for VideoPlayer (mos-5lzns.95).
+ *
+ * The old SPEAKER_PALETTE was hard-coded oklch literals, so white-label
+ * tenants could not reskin speaker colours. This module derives the cycle
+ * from the ACTIVE DaisyUI theme's semantic tokens (the same six roles most
+ * themes give distinct hues), rebuilds hue-bearing speaker colours on the
+ * theme's own lightness/chroma, and lifts every identity colour to WCAG AA
+ * against the surface by mixing toward `--color-base-content` when needed —
+ * one colour per speaker that works as band fill, chip dot AND transcript
+ * text.
+ *
+ * DOM-aware (computed styles + a 1×1 canvas), client-only by contract — the
+ * component calls it under `typeof document !== 'undefined'` and falls back
+ * to DEFAULT_SPEAKER_SOURCE for SSR.
+ */
+import { getDaisyUIColor } from '../utils/daisyuiColors';
+import { DEFAULT_SPEAKER_SOURCE, parseOklch } from './model';
+import { relativeLuminance } from './night/levels';
+/** Semantic tokens the cycle rotates, in rotation order. */
+const CYCLE_TOKENS = ['primary', 'secondary', 'accent', 'info', 'success', 'warning'];
+/** Mixing steps toward base-content tried (in order) until AA is met. */
+const MIX_LADDER = [25, 45, 65, 85];
+/** Chroma below which a token is effectively achromatic (lofi/black themes
+ * resolve primary at ≈0 chroma, which would render every hue speaker the same
+ * grey) — those fall back to the legacy speaker tone instead. */
+const ACHROMATIC_CHROMA = 0.03;
+/** Floor for the hue-bearing base chroma: near-neutral tokens are lifted so
+ * hue speakers stay distinguishable from each other. */
+const HUE_CHROMA_FLOOR = 0.1;
+/**
+ * hueBase from a theme token colour. Keeps the token's lightness, floors its
+ * chroma, and falls back to the legacy 0.72/0.14 tone when the token is
+ * achromatic (or not an oklch literal — parseOklch returns null for hex
+ * themes, which then ride the cycle only).
+ */
+export function hueBaseFromToken(color) {
+    const parsed = color ? parseOklch(color) : null;
+    if (!parsed)
+        return null;
+    if (parsed.c < ACHROMATIC_CHROMA)
+        return DEFAULT_SPEAKER_SOURCE.hueBase;
+    return { l: parsed.l, c: Math.max(parsed.c, HUE_CHROMA_FLOOR) };
+}
+/** WCAG AA for body-size text. */
+const AA_CONTRAST = 4.5;
+/**
+ * Build the palette source from the live theme. De-dupes the token colours
+ * (a custom theme may alias roles) and tops the cycle up with token mixes if
+ * fewer than three distinct hues survive, so speakers stay distinguishable.
+ */
+export function buildSpeakerPaletteSource() {
+    const surface = getDaisyUIColor('base-100');
+    const ink = getDaisyUIColor('base-content');
+    const seen = new Set();
+    const cycle = [];
+    for (const token of CYCLE_TOKENS) {
+        const c = getDaisyUIColor(token);
+        if (c && !seen.has(c)) {
+            seen.add(c);
+            cycle.push(c);
+        }
+    }
+    if (cycle.length > 0 && cycle.length < 3) {
+        const base = cycle[0];
+        for (const pct of [30, 55, 80]) {
+            const m = mixToward(base, ink, pct);
+            if (!seen.has(m)) {
+                seen.add(m);
+                cycle.push(m);
+            }
+        }
+    }
+    return {
+        source: {
+            cycle: cycle.length > 0 ? cycle : ['oklch(0.5 0 0)'],
+            hueBase: hueBaseFromToken(getDaisyUIColor('primary'))
+        },
+        surface,
+        ink
+    };
+}
+/** `color-mix(in oklch, color (100−pct)%, ink pct%)` — pct is the INK weight. */
+export function mixToward(color, ink, pct) {
+    return `color-mix(in oklch, ${color} ${100 - pct}%, ${ink} ${pct}%)`;
+}
+/** WCAG contrast ratio between two rgb triples (≥1, ≤21). */
+export function contrastRatio(a, b) {
+    const la = relativeLuminance(a[0], a[1], a[2]);
+    const lb = relativeLuminance(b[0], b[1], b[2]);
+    const [hi, lo] = la >= lb ? [la, lb] : [lb, la];
+    return (hi + 0.05) / (lo + 0.05);
+}
+const rgbCache = new Map();
+/**
+ * Resolve any CSS colour string to sRGB via a 1×1 canvas. Returns null when
+ * the string cannot be parsed (SSR, unsupported colour function) — callers
+ * keep the original colour rather than guessing.
+ */
+export function resolveColorRgb(color) {
+    if (typeof document === 'undefined')
+        return null;
+    const cached = rgbCache.get(color);
+    if (cached !== undefined)
+        return cached;
+    let out = null;
+    try {
+        const canvas = document.createElement('canvas');
+        canvas.width = canvas.height = 1;
+        const ctx = canvas.getContext('2d', { willReadFrequently: true });
+        if (ctx) {
+            ctx.fillStyle = '#123456'; // known-good sentinel
+            const sentinel = ctx.fillStyle;
+            ctx.fillStyle = color;
+            if (ctx.fillStyle !== sentinel) {
+                ctx.fillRect(0, 0, 1, 1);
+                const d = ctx.getImageData(0, 0, 1, 1).data;
+                out = [d[0], d[1], d[2]];
+            }
+        }
+    }
+    catch {
+        out = null;
+    }
+    rgbCache.set(color, out);
+    return out;
+}
+/**
+ * Lift `color` to AA contrast against `surface` by ladder-mixing toward ink.
+ * Colour-parsing environments that cannot resolve a string keep it unchanged
+ * (the raw token value is still theme-following, just unverified).
+ * `resolve` is injectable for DOM-free tests.
+ */
+export function adjustForContrast(color, surface, ink, minRatio = AA_CONTRAST, resolve = resolveColorRgb) {
+    const s = resolve(surface);
+    const c = resolve(color);
+    if (!s || !c || contrastRatio(c, s) >= minRatio)
+        return color;
+    const i = resolve(ink);
+    if (!i)
+        return color;
+    for (const pct of MIX_LADDER) {
+        const mixed = mixToward(color, ink, pct);
+        const m = resolve(mixed);
+        if (m && contrastRatio(m, s) >= minRatio)
+            return mixed;
+    }
+    return mixToward(color, ink, 95);
+}
+/** Map-of-speakers convenience over adjustForContrast. */
+export function adjustSpeakerColors(colors, surface, ink) {
+    const out = new Map();
+    for (const [key, color] of colors)
+        out.set(key, adjustForContrast(color, surface, ink));
+    return out;
+}

package/dist/video/transcriptWindow.d.ts

@@ -0,0 +1,52 @@
+/**
+ * Transcript windowing for VideoPlayer (mos-5lzns.95).
+ *
+ * Pure, DOM-free math: a transcript pane renders only the rows near the
+ * viewport instead of every segment (a 2h talk is 2–3k rows). The component
+ * keeps the measured row heights (index → px, sparse) and a scroll offset;
+ * this module owns the prefix-sum offsets, the binary-search window and the
+ * constants. Row heights vary (text wraps), so estimates are corrected by
+ * measurement — the offsets are always exact for measured rows.
+ */
+/** Below this many segments the pane renders everything (no windowing). */
+export declare const VIRTUAL_THRESHOLD = 120;
+/** Rows rendered above and below the visible window. */
+export declare const OVERSCAN = 8;
+/** Height assumed for a row until it has been measured (px). */
+export declare const EST_ROW_H = 30;
+/** Flex gap between transcript rows — MUST match .vp-transcript's CSS gap. */
+export declare const TRANS_GAP = 1;
+/**
+ * Prefix sums over row heights: offsets[0] = 0, offsets[i] = top edge of row i
+ * relative to the pane's content start (its padding box), including `gap` px
+ * of flex gap before each row. Unmeasured rows use `fallback`. `heights` may
+ * be sparse.
+ */
+export declare function buildOffsets(heights: ArrayLike<number>, count: number, fallback: number, gap?: number): number[];
+/** Largest row index whose TOP edge is at or above y (0 when y ≤ 0). */
+export declare function findAnchor(offsets: ArrayLike<number>, y: number): number;
+/** How a new segment-id list relates to the one currently rendered. */
+export type TranscriptResetKind = 'none' | 'extend' | 'reset';
+/**
+ * Classify a transcript update against the id list already rendered (both in
+ * render order):
+ *
+ * - `'none'` — identical ids in order: keyed rows stay mounted and everything
+ *   holds (scroll position, measured heights, offsets). No reset.
+ * - `'extend'` — append-only growth: the prefix keeps every measured height
+ *   and the scroll position holds; offsets rebuild lazily for the new length.
+ * - `'reset'` — anything else (replacement, reorder, removal): fresh height
+ *   cache and top-of-pane scroll.
+ */
+export declare function transcriptResetKind(prev: readonly string[], next: readonly string[]): TranscriptResetKind;
+/**
+ * The row range to render for a scroll position. `first`/`last` are inclusive
+ * row indexes padded by `overscan`; every row overlapping the viewport is in
+ * range. Returns null-shaped output when the pane can't be measured yet — the
+ * component treats a non-positive viewport as "render the overscan around the
+ * top" rather than nothing.
+ */
+export declare function windowFor(offsets: ArrayLike<number>, scrollTop: number, viewportH: number, overscan: number): {
+    first: number;
+    last: number;
+};

package/dist/video/transcriptWindow.js

@@ -0,0 +1,102 @@
+/**
+ * Transcript windowing for VideoPlayer (mos-5lzns.95).
+ *
+ * Pure, DOM-free math: a transcript pane renders only the rows near the
+ * viewport instead of every segment (a 2h talk is 2–3k rows). The component
+ * keeps the measured row heights (index → px, sparse) and a scroll offset;
+ * this module owns the prefix-sum offsets, the binary-search window and the
+ * constants. Row heights vary (text wraps), so estimates are corrected by
+ * measurement — the offsets are always exact for measured rows.
+ */
+/** Below this many segments the pane renders everything (no windowing). */
+export const VIRTUAL_THRESHOLD = 120;
+/** Rows rendered above and below the visible window. */
+export const OVERSCAN = 8;
+/** Height assumed for a row until it has been measured (px). */
+export const EST_ROW_H = 30;
+/** Flex gap between transcript rows — MUST match .vp-transcript's CSS gap. */
+export const TRANS_GAP = 1;
+/**
+ * Prefix sums over row heights: offsets[0] = 0, offsets[i] = top edge of row i
+ * relative to the pane's content start (its padding box), including `gap` px
+ * of flex gap before each row. Unmeasured rows use `fallback`. `heights` may
+ * be sparse.
+ */
+export function buildOffsets(heights, count, fallback, gap = 0) {
+    const offsets = new Array(count + 1);
+    offsets[0] = 0;
+    let prev = 0;
+    for (let i = 0; i < count; i++) {
+        const h = heights[i];
+        prev += (Number.isFinite(h) && h > 0 ? h : fallback) + gap;
+        offsets[i + 1] = prev;
+    }
+    return offsets;
+}
+/** Largest row index whose TOP edge is at or above y (0 when y ≤ 0). */
+export function findAnchor(offsets, y) {
+    let lo = 0;
+    let hi = offsets.length - 1;
+    if (y <= 0)
+        return 0;
+    while (lo < hi) {
+        const mid = (lo + hi + 1) >> 1;
+        if (offsets[mid] <= y)
+            lo = mid;
+        else
+            hi = mid - 1;
+    }
+    return lo;
+}
+/**
+ * Classify a transcript update against the id list already rendered (both in
+ * render order):
+ *
+ * - `'none'` — identical ids in order: keyed rows stay mounted and everything
+ *   holds (scroll position, measured heights, offsets). No reset.
+ * - `'extend'` — append-only growth: the prefix keeps every measured height
+ *   and the scroll position holds; offsets rebuild lazily for the new length.
+ * - `'reset'` — anything else (replacement, reorder, removal): fresh height
+ *   cache and top-of-pane scroll.
+ */
+export function transcriptResetKind(prev, next) {
+    if (next.length >= prev.length) {
+        for (let i = 0; i < prev.length; i++) {
+            if (prev[i] !== next[i])
+                return 'reset';
+        }
+        return next.length === prev.length ? 'none' : 'extend';
+    }
+    return 'reset';
+}
+/**
+ * The row range to render for a scroll position. `first`/`last` are inclusive
+ * row indexes padded by `overscan`; every row overlapping the viewport is in
+ * range. Returns null-shaped output when the pane can't be measured yet — the
+ * component treats a non-positive viewport as "render the overscan around the
+ * top" rather than nothing.
+ */
+export function windowFor(offsets, scrollTop, viewportH, overscan) {
+    const n = offsets.length - 1;
+    if (n <= 0)
+        return { first: 0, last: 0 };
+    const top = Math.max(0, scrollTop);
+    const firstOverlap = findAnchor(offsets, top);
+    // Row `firstOverlap` may START above `top` (its top edge ≤ y): the row
+    // overlapping the viewport top is that one or the next — cover both.
+    const first = Math.max(0, firstOverlap - overscan);
+    const bottom = top + Math.max(0, viewportH);
+    // First row whose TOP edge is at/below the viewport bottom, then one more
+    // so a row straddling the bottom edge is not dropped mid-scroll.
+    let lo = 0;
+    let hi = n;
+    while (lo < hi) {
+        const mid = (lo + hi) >> 1;
+        if (offsets[mid] < bottom)
+            lo = mid + 1;
+        else
+            hi = mid;
+    }
+    const last = Math.min(n, lo + overscan);
+    return { first, last };
+}

package/package.json

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