fix(frontend): commit missing utility modules (P0 — imports resolved to nothing)

textMeasure.js, virtualList.js, and accessibilityTypography.js were
added in the 2026/04/04 session alongside VirtualSegmentList.svelte but
never committed. All four are imported from DictationPage, HistoryPage,
SettingsPage, and the viewer — a fresh clone had unresolvable imports.

textMeasure.js: pretext-backed text measurement with LRU cache.
  measureTextHeight, measurePreWrap, clampTextLines, invalidateCache.
virtualList.js: binary-search visible range for variable-height virtual
  lists. buildCumulativeOffsets + findVisibleRange.
accessibilityTypography.js: pretext font/line-height helpers that read
  the user's accessibility preference store (Lexend / Atkinson /
  OpenDyslexic mapping).
VirtualSegmentList.svelte: virtualised transcript segment renderer used
  by the viewer page; depends on all three utils above.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/lib/components/VirtualSegmentList.svelte

@@ -0,0 +1,217 @@
+<script>
+  import { measureTextHeight } from "$lib/utils/textMeasure.js";
+  import { buildCumulativeOffsets, findVisibleRange } from "$lib/utils/virtualList.js";
+  import { getPreferences } from "$lib/stores/preferences.svelte.js";
+  import { bodyPretextLineHeight, pretextFontShorthand } from "$lib/utils/accessibilityTypography.js";
+
+  // Props
+  let {
+    segments = [],
+    activeSegmentIdx = -1,
+    matchingSegments = new Set(),
+    showTimestamps = true,
+    editingIdx = -1,
+    editingText = $bindable(""),
+    searchQuery = "",
+    formatTime = (t) => String(t),
+    onSeekToTime = () => {},
+    onStartEditing = () => {},
+    onFinishEditing = () => {},
+    onToggleStar = () => {},
+    onCopySegment = () => {},
+    onDeleteSegment = () => {},
+    highlightText = (t) => t,
+  } = $props();
+
+  // Internal state
+  let containerEl = $state(null);
+  let containerHeight = $state(0);
+  let containerWidth = $state(0);
+  let scrollTop = $state(0);
+  let hasSelection = $state(false);
+  const prefs = getPreferences();
+
+  // Segment height measurement
+  const SEGMENT_PADDING = 20;  // py-2 (16px) + gap-1 (4px)
+  const BUFFER_COUNT = 5;
+  const SELECTION_BUFFER = 10;
+  let textFont = $derived(pretextFontShorthand(prefs.accessibility, 13));
+  let textLineHeight = $derived(bodyPretextLineHeight(prefs.accessibility, 13));
+
+  // Pre-calculate heights for all segments
+  let segmentHeights = $derived.by(() => {
+    if (!segments.length || containerWidth <= 0) return [];
+    // Available width for text: container - star (26px) - timestamp (48px if shown) - padding (24px) - actions (0, hidden)
+    const timestampWidth = showTimestamps ? 48 : 0;
+    const textWidth = containerWidth - 26 - timestampWidth - 24;
+    if (textWidth <= 0) return segments.map(() => 40);
+
+    return segments.map(seg => {
+      const text = seg.text?.trim() || "";
+      if (!text) return SEGMENT_PADDING + textLineHeight;
+      const { height } = measureTextHeight(text, textFont, textWidth, textLineHeight);
+      return height + SEGMENT_PADDING;
+    });
+  });
+
+  // Cumulative offsets for O(1) lookup
+  let cumulativeOffsets = $derived(buildCumulativeOffsets(segmentHeights));
+
+  let totalHeight = $derived(
+    cumulativeOffsets.length > 0 ? cumulativeOffsets[cumulativeOffsets.length - 1] : 0
+  );
+
+  // Determine visible range
+  let visibleRange = $derived.by(() => {
+    const buffer = hasSelection ? SELECTION_BUFFER : BUFFER_COUNT;
+    return findVisibleRange(
+      cumulativeOffsets,
+      segments.length,
+      scrollTop,
+      containerHeight,
+      buffer,
+    );
+  });
+
+  // Visible segment slice with positioning
+  let visibleItems = $derived.by(() => {
+    const items = [];
+    for (let i = visibleRange.start; i < visibleRange.end; i++) {
+      items.push({
+        seg: segments[i],
+        idx: segments[i]._idx,
+        top: cumulativeOffsets[i],
+        height: segmentHeights[i],
+      });
+    }
+    return items;
+  });
+
+  // Scroll to a specific segment index (used for active segment tracking + search)
+  export function scrollToSegment(idx) {
+    if (!containerEl || idx < 0 || idx >= segments.length) return;
+    const segTop = cumulativeOffsets[idx];
+    const segHeight = segmentHeights[idx];
+    const viewCenter = containerHeight / 2;
+    containerEl.scrollTop = segTop - viewCenter + segHeight / 2;
+  }
+
+  function onScroll(e) {
+    scrollTop = e.target.scrollTop;
+    // Track selection state for expanded buffer
+    hasSelection = !document.getSelection()?.isCollapsed;
+  }
+
+  // ResizeObserver for container dimensions
+  $effect(() => {
+    if (!containerEl) return;
+    const ro = new ResizeObserver(entries => {
+      for (const entry of entries) {
+        containerHeight = entry.contentRect.height;
+        containerWidth = entry.contentRect.width;
+      }
+    });
+    ro.observe(containerEl);
+    return () => ro.disconnect();
+  });
+
+  // Auto-scroll to active segment during playback
+  $effect(() => {
+    if (activeSegmentIdx >= 0) {
+      // Find the index in our segments array that matches
+      const arrayIdx = segments.findIndex(s => s._idx === activeSegmentIdx);
+      if (arrayIdx >= 0) {
+        const segTop = cumulativeOffsets[arrayIdx];
+        const segBottom = segTop + segmentHeights[arrayIdx];
+        // Only scroll if the active segment is out of view
+        if (segTop < scrollTop || segBottom > scrollTop + containerHeight) {
+          scrollToSegment(arrayIdx);
+        }
+      }
+    }
+  });
+</script>
+
+<div
+  bind:this={containerEl}
+  class="flex-1 overflow-y-auto px-5 py-3 min-h-0"
+  onscroll={onScroll}
+>
+  <div class="relative" style="height: {totalHeight}px">
+    {#each visibleItems as { seg, idx, top, height } (idx)}
+      <div
+        class="absolute left-0 right-0 group flex gap-3 px-3 py-2 rounded-lg cursor-pointer transition-colors
+          {activeSegmentIdx === idx
+            ? 'bg-accent/10 border-l-2 border-accent'
+            : matchingSegments.has(idx)
+              ? 'bg-warning/5 border-l-2 border-warning/40'
+              : 'border-l-2 border-transparent hover:bg-hover'}"
+        style="top: {top}px"
+        onclick={() => onSeekToTime(seg.start)}
+        ondblclick={() => onStartEditing(idx)}
+        role="button"
+        tabindex="0"
+        onkeydown={(e) => { if (e.key === "Enter" && editingIdx !== idx) onSeekToTime(seg.start); }}
+      >
+        <!-- Star -->
+        <button
+          class="mt-0.5 flex-shrink-0 {seg.starred ? 'text-accent' : 'text-text-tertiary opacity-0 group-hover:opacity-100'}"
+          onclick={(e) => { e.stopPropagation(); onToggleStar(idx); }}
+          aria-label={seg.starred ? "Unstar" : "Star"}
+        >
+          <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill={seg.starred ? "currentColor" : "none"} stroke="currentColor" stroke-width="2">
+            <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
+          </svg>
+        </button>
+        <!-- Timestamp -->
+        {#if showTimestamps}
+          <span class="text-[10px] text-text-tertiary tabular-nums flex-shrink-0 mt-0.5 min-w-[36px]">
+            {formatTime(seg.start)}
+          </span>
+        {/if}
+        <!-- Text (editable or display) -->
+        {#if editingIdx === idx}
+          <textarea
+            class="flex-1 bg-bg-input border border-accent rounded-lg px-2 py-1 text-[13px] text-text
+                   resize-none focus:outline-none min-h-[40px]"
+            style="line-height: {textLineHeight}px"
+            bind:value={editingText}
+            onkeydown={(e) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); onFinishEditing(); } if (e.key === "Escape") { onFinishEditing(); } }}
+            onblur={onFinishEditing}
+            onclick={(e) => e.stopPropagation()}
+            data-no-transition
+          ></textarea>
+        {:else}
+          <p class="text-[13px] text-text flex-1" style="line-height: {textLineHeight}px">
+            {#if searchQuery.trim()}
+              {@html highlightText(seg.text.trim())}
+            {:else}
+              {seg.text.trim()}
+            {/if}
+          </p>
+        {/if}
+        <!-- Actions (hover reveal) -->
+        <div class="flex items-center gap-1 opacity-0 group-hover:opacity-100 flex-shrink-0">
+          <button
+            class="text-text-tertiary hover:text-accent"
+            onclick={(e) => { e.stopPropagation(); onCopySegment(idx); }}
+            title="Copy segment"
+          >
+            <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <rect x="9" y="9" width="13" height="13" rx="2" /><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+            </svg>
+          </button>
+          <button
+            class="text-text-tertiary hover:text-danger"
+            onclick={(e) => { e.stopPropagation(); onDeleteSegment(idx); }}
+            title="Delete segment"
+          >
+            <svg class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M18 6L6 18M6 6l12 12" stroke-linecap="round" />
+            </svg>
+          </button>
+        </div>
+      </div>
+    {/each}
+  </div>
+</div>

src/lib/utils/accessibilityTypography.js

@@ -0,0 +1,28 @@
+const PRETEXT_FONT_FAMILIES = {
+  lexend: "'Lexend'",
+  atkinson: "'Atkinson Hyperlegible Next'",
+  opendyslexic: "'OpenDyslexic'",
+};
+
+export function pretextFontFamily(fontFamily = "lexend") {
+  return PRETEXT_FONT_FAMILIES[fontFamily] || PRETEXT_FONT_FAMILIES.lexend;
+}
+
+export function pretextFontShorthand(accessibility = {}, sizePx = 16) {
+  return `${sizePx}px ${pretextFontFamily(accessibility.fontFamily)}`;
+}
+
+export function bodyPretextLineHeight(accessibility = {}, sizePx = 16) {
+  const ratio = accessibility.lineHeight || 1.5;
+  return Math.round(sizePx * ratio);
+}
+
+export function transcriptPretextFont(accessibility = {}) {
+  const sizePx = accessibility.transcriptSize || accessibility.fontSize || 16;
+  return pretextFontShorthand(accessibility, sizePx);
+}
+
+export function transcriptPretextLineHeight(accessibility = {}, ratio = 1.85) {
+  const sizePx = accessibility.transcriptSize || accessibility.fontSize || 16;
+  return Math.round(sizePx * ratio);
+}

src/lib/utils/textMeasure.js

@@ -0,0 +1,127 @@
+import {
+  prepare,
+  layout,
+  prepareWithSegments,
+  layoutWithLines,
+} from '@chenglou/pretext';
+
+// Cache prepared text to avoid re-measuring.
+// prepare() is expensive, layout() is the cheap hot path.
+const prepareCache = new Map();
+const segmentedPrepareCache = new Map();
+const MAX_CACHE_ENTRIES = 400;
+
+function touch(cache, key, value) {
+  if (cache.has(key)) cache.delete(key);
+  cache.set(key, value);
+  if (cache.size > MAX_CACHE_ENTRIES) {
+    const oldestKey = cache.keys().next().value;
+    cache.delete(oldestKey);
+  }
+  return value;
+}
+
+function cacheKey(text, font, options = {}) {
+  return `${text}\0${font}\0${JSON.stringify(options)}`;
+}
+
+function getPrepared(cache, factory, text, font, options = {}) {
+  const key = cacheKey(text, font, options);
+  if (cache.has(key)) {
+    const cached = cache.get(key);
+    return touch(cache, key, cached);
+  }
+  return touch(cache, key, factory(text, font, options));
+}
+
+export function prepareText(text, font, options = {}) {
+  return getPrepared(prepareCache, prepare, text, font, options);
+}
+
+export function prepareTextWithSegments(text, font, options = {}) {
+  return getPrepared(
+    segmentedPrepareCache,
+    prepareWithSegments,
+    text,
+    font,
+    options,
+  );
+}
+
+/**
+ * Measure the rendered height of text without DOM reflow.
+ * Caches the prepare() result per unique text+font combination.
+ *
+ * @param {string} text - The text content to measure
+ * @param {string} font - CSS font shorthand (e.g. "16px Lexend")
+ * @param {number} maxWidth - Container width in pixels
+ * @param {number} lineHeight - Line height in pixels
+ * @param {object} [options] - Additional options (e.g. { whiteSpace: 'pre-wrap' })
+ * @returns {{ height: number, lineCount: number }}
+ */
+export function measureTextHeight(text, font, maxWidth, lineHeight, options = {}) {
+  const prepared = prepareText(text, font, options);
+  return layout(prepared, maxWidth, lineHeight);
+}
+
+/**
+ * Measure height using pre-wrap mode (textarea-like behaviour).
+ * Spaces, tabs, and hard breaks are preserved.
+ */
+export function measurePreWrap(text, font, maxWidth, lineHeight) {
+  return measureTextHeight(text, font, maxWidth, lineHeight, { whiteSpace: 'pre-wrap' });
+}
+
+/**
+ * Return full line layout information for custom rendering or clipping.
+ */
+export function layoutTextLines(text, font, maxWidth, lineHeight, options = {}) {
+  const prepared = prepareTextWithSegments(text, font, options);
+  return layoutWithLines(prepared, maxWidth, lineHeight);
+}
+
+/**
+ * Clamp text to a maximum number of laid-out lines without DOM reads.
+ */
+export function clampTextLines(
+  text,
+  font,
+  maxWidth,
+  lineHeight,
+  maxLines,
+  options = {},
+) {
+  const result = layoutTextLines(text, font, maxWidth, lineHeight, options);
+  const visibleLines = result.lines.slice(0, maxLines);
+  const didTruncate = result.lineCount > maxLines;
+  if (!didTruncate) {
+    return {
+      ...result,
+      visibleLineCount: result.lineCount,
+      text,
+      didTruncate: false,
+    };
+  }
+
+  const trimmedLines = visibleLines.map((line) => line.text);
+  const lastLine = trimmedLines[trimmedLines.length - 1] || "";
+  trimmedLines[trimmedLines.length - 1] =
+    `${lastLine.replace(/\s+$/g, "")}\u2026`;
+
+  return {
+    ...result,
+    visibleLineCount: visibleLines.length,
+    text: trimmedLines.join("\n"),
+    height: visibleLines.length * lineHeight,
+    didTruncate: true,
+  };
+}
+
+/**
+ * Invalidate all cached measurements.
+ * Call when font family, size, or line height changes.
+ */
+export function invalidateCache() {
+  prepareCache.clear();
+  segmentedPrepareCache.clear();
+}

src/lib/utils/virtualList.js

@@ -0,0 +1,49 @@
+export function buildCumulativeOffsets(heights) {
+  const offsets = new Array(heights.length + 1);
+  offsets[0] = 0;
+  for (let i = 0; i < heights.length; i++) {
+    offsets[i + 1] = offsets[i] + heights[i];
+  }
+  return offsets;
+}
+
+export function findVisibleRange(
+  cumulativeOffsets,
+  itemCount,
+  scrollTop,
+  viewportHeight,
+  buffer = 4,
+) {
+  if (!cumulativeOffsets.length || itemCount === 0 || viewportHeight <= 0) {
+    return { start: 0, end: 0 };
+  }
+
+  let lo = 0;
+  let hi = itemCount - 1;
+  while (lo < hi) {
+    const mid = (lo + hi) >>> 1;
+    if (cumulativeOffsets[mid + 1] < scrollTop) {
+      lo = mid + 1;
+    } else {
+      hi = mid;
+    }
+  }
+  const start = Math.max(0, lo - buffer);
+
+  const endScroll = scrollTop + viewportHeight;
+  lo = start;
+  hi = itemCount - 1;
+  while (lo < hi) {
+    const mid = (lo + hi) >>> 1;
+    if (cumulativeOffsets[mid] < endScroll) {
+      lo = mid + 1;
+    } else {
+      hi = mid;
+    }
+  }
+
+  return {
+    start,
+    end: Math.min(itemCount, lo + buffer),
+  };
+}