@joewinke/jatui 0.18.1 → 0.20.0

package/dist/actions/collapse.d.ts

@@ -57,6 +57,20 @@
  * control. For mapped lists, give each row its own `id`/`expanded`/`collapsible`
  * state (e.g. a `SvelteSet` of ids, with the id interpolating the row's own id) —
  * one action instance attaches per row element.
+ *
+ * ─── Expand on focus (expandOnFocus / onExpand) ───────────────────────────────
+ *
+ * By default a `focusin` inside a COLLAPSED region asks the consumer to expand
+ * it (upstream of the jat-ngdm1 fix, where tabbing into a clipped inline-edit
+ * textarea left it unreadable and clicking Show more blurred it). The action
+ * never mutates the consumer's state — it fires `onExpand` and the consumer
+ * sets `expanded = true`, keeping the toggle label and `aria-expanded` in sync:
+ *
+ *   <div use:collapse={{ expanded, onCollapsible, onExpand: () => (expanded = true) }}>
+ *
+ * Pass `expandOnFocus: false` to opt out (e.g. read-only log dumps where
+ * focus-driven expansion would be surprising). The `<Collapse>` component
+ * wires this out of the box.
  */
 export interface CollapseOptions {
     /** Max collapsed height in px. Content taller than this collapses. Default 120. */
@@ -73,6 +87,19 @@ export interface CollapseOptions {
      * content is shorter than the threshold.
      */
     onCollapsible?: (collapsible: boolean) => void;
+    /**
+     * Auto-expand when focus moves into the collapsed region (focusin).
+     * Default true. Expansion goes through `onExpand` — the consumer still owns
+     * the `expanded` state (same contract as `onCollapsible`), so wire it:
+     * `use:collapse={{ expanded, onExpand: () => (expanded = true) }}`.
+     * With no `onExpand` there is nothing to call and focusin is a no-op.
+     */
+    expandOnFocus?: boolean;
+    /**
+     * Called when the action decides the region should expand (focusin
+     * auto-expand while collapsed). Set your `expanded` state to true here.
+     */
+    onExpand?: () => void;
 }
 export declare function collapse(node: HTMLElement, options?: CollapseOptions): {
     update(next?: CollapseOptions): void;

package/dist/actions/collapse.js

@@ -57,8 +57,22 @@
  * control. For mapped lists, give each row its own `id`/`expanded`/`collapsible`
  * state (e.g. a `SvelteSet` of ids, with the id interpolating the row's own id) —
  * one action instance attaches per row element.
+ *
+ * ─── Expand on focus (expandOnFocus / onExpand) ───────────────────────────────
+ *
+ * By default a `focusin` inside a COLLAPSED region asks the consumer to expand
+ * it (upstream of the jat-ngdm1 fix, where tabbing into a clipped inline-edit
+ * textarea left it unreadable and clicking Show more blurred it). The action
+ * never mutates the consumer's state — it fires `onExpand` and the consumer
+ * sets `expanded = true`, keeping the toggle label and `aria-expanded` in sync:
+ *
+ *   <div use:collapse={{ expanded, onCollapsible, onExpand: () => (expanded = true) }}>
+ *
+ * Pass `expandOnFocus: false` to opt out (e.g. read-only log dumps where
+ * focus-driven expansion would be surprising). The `<Collapse>` component
+ * wires this out of the box.
  */
-const DEFAULTS = { threshold: 120, expanded: false, fadeStart: 55, epsilon: 4 };
+const DEFAULTS = { threshold: 120, expanded: false, fadeStart: 55, epsilon: 4, expandOnFocus: true };
 export function collapse(node, options = {}) {
     let opts = { ...DEFAULTS, ...options };
     let collapsible = false;
@@ -98,6 +112,19 @@ export function collapse(node, options = {}) {
         cancelAnimationFrame(rafId);
         rafId = requestAnimationFrame(measure);
     }
+    // Focus moving into a collapsed region means the user is interacting with
+    // content they can't fully see (the jat-ngdm1 case: tabbing into a clipped
+    // inline-edit textarea, then clicking Show more blurred it — three clicks
+    // for one edit). Expand instead of leaving the focused child clipped.
+    function onFocusin() {
+        if (!opts.expandOnFocus)
+            return;
+        // Only when actually collapsed — already-expanded or too-short content is a no-op.
+        if (!collapsible || opts.expanded)
+            return;
+        opts.onExpand?.();
+    }
+    node.addEventListener('focusin', onFocusin);
     // Re-measure when the content's natural size changes (streaming, {@html}, lazy images).
     const ro = new ResizeObserver(scheduleMeasure);
     ro.observe(node);
@@ -115,6 +142,7 @@ export function collapse(node, options = {}) {
         destroy() {
             cancelAnimationFrame(rafId);
             ro.disconnect();
+            node.removeEventListener('focusin', onFocusin);
         },
     };
 }

package/dist/components/BurndownChart.svelte

@@ -1,4 +1,11 @@
 <script lang="ts">
+  import {
+    BURNDOWN_DONE,
+    burndownScope,
+    buildSeriesPoints,
+    type BurndownTask,
+  } from "./burndownSeries"
+
   interface OtherMilestone {
     ordinal: string // "01", "02", etc.
     name: string
@@ -23,7 +30,7 @@
     paymentDate?: string | null
   } = $props()
 
-  const DONE = new Set(["accepted", "deployed", "closed", "completed"])
+  const DONE = BURNDOWN_DONE
 
   // Layout constants
   const MARGIN = { top: 16, right: 20, bottom: 32, left: 40 }
@@ -62,47 +69,14 @@
     selected = milestoneFilter
   })
 
-  function buildPts(milestoneId: string, startDay: number, totalDays: number) {
-    const mt = tasks.filter(
-      (t) => t.milestone_id === milestoneId && t.status !== "dev",
-    )
-    if (!mt.length) return null
-    const creations = mt
-      .map((t) =>
-        new Date(new Date(t.created_at).setHours(0, 0, 0, 0)).getTime(),
-      )
-      .sort((a, b) => a - b)
-    const completions = mt
-      .filter((t) => DONE.has(t.status))
-      .map((t) => {
-        const d = t.closed_at
-          ? new Date(t.closed_at)
-          : t.completed_at
-            ? new Date(t.completed_at)
-            : new Date(t.updated_at)
-        return new Date(d.setHours(0, 0, 0, 0)).getTime()
-      })
-      .sort((a, b) => a - b)
-    const pts: { x: number; y: number }[] = []
-    for (let d = 0; d <= totalDays; d++) {
-      const ts = startDay + d * 86400000
-      pts.push({
-        x: d,
-        y: Math.max(
-          0,
-          creations.filter((c) => c <= ts).length -
-            completions.filter((c) => c <= ts).length,
-        ),
-      })
-    }
-    return pts
+  function buildPts(taskList: BurndownTask[], startDay: number, totalDays: number) {
+    return buildSeriesPoints(taskList, startDay, totalDays, DONE)
   }
 
+  let wholeList = $derived(selected === "" && activeMilestones.length === 0)
+
   let range = $derived.by((): { startDay: number; totalDays: number } => {
-    const relevant =
-      selected === ""
-        ? tasks.filter((t) => t.status !== "dev" && t.milestone_id)
-        : tasks.filter((t) => t.milestone_id === selected && t.status !== "dev")
+    const relevant = burndownScope(tasks, selected, activeMilestones.map((m) => m.id)).tasks
     if (!relevant.length) return { startDay: Date.now(), totalDays: 1 }
     const min = relevant.reduce(
       (m, t) => Math.min(m, new Date(t.created_at).getTime()),
@@ -116,9 +90,30 @@
   let lines = $derived.by(() => {
     const { startDay, totalDays } = range
     if (selected === "") {
+      // jatui-rt1no: no task carries a milestone_id → one series over the
+      // whole list, instead of the silent "No data" empty state.
+      if (wholeList) {
+        const pts = buildPts(tasks, startDay, totalDays)
+        return pts
+          ? [
+              {
+                id: "__all__",
+                name: "All tasks",
+                color: PALETTE[0],
+                pts,
+              },
+            ]
+          : []
+      }
       return activeMilestones
         .map((m, i) => {
-          const pts = buildPts(m.id, startDay, totalDays)
+          const pts = buildPts(
+            tasks.filter(
+              (t) => t.milestone_id === m.id && t.status !== "dev",
+            ),
+            startDay,
+            totalDays,
+          )
           return pts
             ? {
                 id: m.id,
@@ -136,7 +131,13 @@
       }[]
     } else {
       const m = (milestones as any[]).find((m) => m.id === selected)
-      const pts = buildPts(selected, startDay, totalDays)
+      const pts = buildPts(
+        tasks.filter(
+          (t) => t.milestone_id === selected && t.status !== "dev",
+        ),
+        startDay,
+        totalDays,
+      )
       return pts
         ? [{ id: selected, name: m?.name ?? "", color: PALETTE[0], pts }]
         : []
@@ -210,10 +211,7 @@
     const added = new Array(totalDays + 1).fill(0)
     const closed = new Array(totalDays + 1).fill(0)
 
-    const relevantTasks =
-      selected === ""
-        ? tasks.filter((t) => t.status !== "dev" && t.milestone_id)
-        : tasks.filter((t) => t.milestone_id === selected && t.status !== "dev")
+    const relevantTasks = burndownScope(tasks, selected, activeMilestones.map((m) => m.id)).tasks
 
     for (const t of relevantTasks) {
       const cd = Math.round(

package/dist/components/Collapse.svelte

@@ -11,6 +11,10 @@
 	 *   <Collapse>
 	 *     {@html renderedMarkdown}
 	 *   </Collapse>
+	 *
+	 * Focus-driven expansion: by default (`expandOnFocus`, default true) a
+	 * focusin inside a collapsed region expands it — tabbing into a clipped
+	 * editable child never leaves it unreadable (upstream of jat-ngdm1).
 	 */
 
 	interface Props {
@@ -24,6 +28,12 @@
 		moreLabel?: string;
 		/** Toggle label when expanded. Default 'Show less ↑'. */
 		lessLabel?: string;
+		/**
+		 * Auto-expand when focus moves into the collapsed region (focusin).
+		 * Default true — tabbing into a clipped editable child expands the region
+		 * instead of leaving it unreadable (upstream of jat-ngdm1).
+		 */
+		expandOnFocus?: boolean;
 		/** Extra classes on the content region. */
 		class?: string;
 		children?: import('svelte').Snippet;
@@ -35,6 +45,7 @@
 		expanded = $bindable(false),
 		moreLabel = 'Show more ↓',
 		lessLabel = 'Show less ↑',
+		expandOnFocus = true,
 		class: className = '',
 		children,
 	}: Props = $props();
@@ -61,12 +72,16 @@
 	);
 </script>
 
+<!-- svelte-ignore a11y_no_static_element_interactions -- focusin only observes focus moving into an editable child; the wrapper takes no focus itself -->
 <div
 	id={bodyId}
 	class={`jatui-collapse-outer ${className}`.trim()}
 	class:jatui-collapse-outer-closed={collapsible && !expanded}
 	style="--collapse-threshold: {threshold}px; --collapse-gradient: {gradient};"
 	aria-expanded={expanded || !collapsible}
+	onfocusin={() => {
+		if (expandOnFocus && collapsible && !expanded) expanded = true;
+	}}
 >
 	<div bind:this={innerEl} class="jatui-collapse-inner">
 		{#if children}

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

@@ -10,6 +10,10 @@
  *   <Collapse>
  *     {@html renderedMarkdown}
  *   </Collapse>
+ *
+ * Focus-driven expansion: by default (`expandOnFocus`, default true) a
+ * focusin inside a collapsed region expands it — tabbing into a clipped
+ * editable child never leaves it unreadable (upstream of jat-ngdm1).
  */
 interface Props {
     /** Max collapsed height in px. Default 120. */
@@ -22,6 +26,12 @@ interface Props {
     moreLabel?: string;
     /** Toggle label when expanded. Default 'Show less ↑'. */
     lessLabel?: string;
+    /**
+     * Auto-expand when focus moves into the collapsed region (focusin).
+     * Default true — tabbing into a clipped editable child expands the region
+     * instead of leaving it unreadable (upstream of jat-ngdm1).
+     */
+    expandOnFocus?: boolean;
     /** Extra classes on the content region. */
     class?: string;
     children?: import('svelte').Snippet;

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/components/burndownSeries.d.ts

@@ -0,0 +1,45 @@
+/**
+ * Pure, DOM-free core of BurndownChart (jatui-rt1no).
+ *
+ * Extracted from the component so the series-building decisions are unit
+ * testable (`npm run test:unit`) — same pattern as sectionNavSpy.ts.
+ *
+ * Key behaviour: when no task in the list carries a milestone_id, the chart
+ * treats the WHOLE list as one series instead of rendering "No data".
+ * Consumers previously had to synthesize a milestone_id (the IDE's epic Burn
+ * tab passes the epicId as one) to see anything at all.
+ */
+export declare const BURNDOWN_DONE: Set<string>;
+export interface BurndownTask {
+    status: string;
+    milestone_id?: string | null;
+    created_at: string;
+    closed_at?: string | null;
+    completed_at?: string | null;
+    updated_at: string;
+    [key: string]: unknown;
+}
+/**
+ * Which tasks does the chart render for the current selection?
+ *
+ * - A specific milestone selected → only that milestone's non-dev tasks.
+ * - "All" selected with at least one milestone-tagged non-dev task → the
+ *   milestone-tagged tasks (per-milestone series, unchanged legacy behaviour).
+ * - "All" selected and NO task has a milestone_id → the whole non-dev list
+ *   as one series (the jatui-rt1no fallback).
+ */
+export declare function burndownScope(tasks: BurndownTask[], selected: string, activeMilestoneIds: Iterable<string>): {
+    tasks: BurndownTask[];
+    wholeList: boolean;
+};
+/** Completion timestamp with the closed_at → completed_at → updated_at fallback. */
+export declare function completionTs(t: BurndownTask): Date;
+/**
+ * Open-task count per day over the chart's range — the burn-down line.
+ * Returns null when the task list is empty (the chart then shows "No data",
+ * which is correct for a genuinely empty list).
+ */
+export declare function buildSeriesPoints(tasks: BurndownTask[], startDay: number, totalDays: number, done?: Set<string>): {
+    x: number;
+    y: number;
+}[] | null;

package/dist/components/burndownSeries.js

@@ -0,0 +1,76 @@
+/**
+ * Pure, DOM-free core of BurndownChart (jatui-rt1no).
+ *
+ * Extracted from the component so the series-building decisions are unit
+ * testable (`npm run test:unit`) — same pattern as sectionNavSpy.ts.
+ *
+ * Key behaviour: when no task in the list carries a milestone_id, the chart
+ * treats the WHOLE list as one series instead of rendering "No data".
+ * Consumers previously had to synthesize a milestone_id (the IDE's epic Burn
+ * tab passes the epicId as one) to see anything at all.
+ */
+export const BURNDOWN_DONE = new Set([
+    "accepted",
+    "deployed",
+    "closed",
+    "completed",
+]);
+/**
+ * Which tasks does the chart render for the current selection?
+ *
+ * - A specific milestone selected → only that milestone's non-dev tasks.
+ * - "All" selected with at least one milestone-tagged non-dev task → the
+ *   milestone-tagged tasks (per-milestone series, unchanged legacy behaviour).
+ * - "All" selected and NO task has a milestone_id → the whole non-dev list
+ *   as one series (the jatui-rt1no fallback).
+ */
+export function burndownScope(tasks, selected, activeMilestoneIds) {
+    const nonDev = tasks.filter((t) => t.status !== "dev");
+    if (selected !== "") {
+        return {
+            tasks: nonDev.filter((t) => t.milestone_id === selected),
+            wholeList: false,
+        };
+    }
+    const wholeList = [...activeMilestoneIds].length === 0;
+    return {
+        tasks: wholeList ? nonDev : nonDev.filter((t) => t.milestone_id),
+        wholeList,
+    };
+}
+/** Completion timestamp with the closed_at → completed_at → updated_at fallback. */
+export function completionTs(t) {
+    const d = t.closed_at
+        ? new Date(t.closed_at)
+        : t.completed_at
+            ? new Date(t.completed_at)
+            : new Date(t.updated_at);
+    return new Date(d.setHours(0, 0, 0, 0));
+}
+/**
+ * Open-task count per day over the chart's range — the burn-down line.
+ * Returns null when the task list is empty (the chart then shows "No data",
+ * which is correct for a genuinely empty list).
+ */
+export function buildSeriesPoints(tasks, startDay, totalDays, done = BURNDOWN_DONE) {
+    if (!tasks.length)
+        return null;
+    const creations = tasks
+        .map((t) => new Date(new Date(t.created_at).setHours(0, 0, 0, 0)).getTime())
+        .sort((a, b) => a - b);
+    const completions = tasks
+        .filter((t) => done.has(t.status))
+        .map(completionTs)
+        .map((d) => d.getTime())
+        .sort((a, b) => a - b);
+    const pts = [];
+    for (let d = 0; d <= totalDays; d++) {
+        const ts = startDay + d * 86400000;
+        pts.push({
+            x: d,
+            y: Math.max(0, creations.filter((c) => c <= ts).length -
+                completions.filter((c) => c <= ts).length),
+        });
+    }
+    return pts;
+}

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.20.0",
   "private": false,
   "description": "Shared Svelte 5 component library for JAT projects",
   "type": "module",