Reader and word lens

The reader and right sidebar form the core close-reading interaction. Their design keeps text visible while allowing a word-level investigation to deepen in place.

Reader responsibilities

text-reader.svelte receives a bounded verses array, a text slug, and the chosen display script. It does not own pagination or fetch the corpus. It renders native references, switches between Devanāgarī/IAST/Both, and sends a selected ActiveWord to the navigation store.

When rendering tokens, retain explicit inter-token whitespace and CSS wrapping. Sanskrit or transliteration must wrap inside the reader rather than expanding the pane horizontally.

Reference navigation

reference-navigator.svelte parses reference strings into hierarchy levels. Some texts have explicit mappings—Ṛgveda uses Maṇḍala → Sūkta → Ṛca and Atharvaveda Paippalāda uses Section → Verse—while generic references derive their numeric levels from the stored reference.

The final selection resolves a reference entry and calculates:

const targetPage = Math.floor(entry.index / pageSize) + 1;

For a different page, navigate with ?page=N&limit=M#verse=I. For the current page, scroll the actual .page-box > .content container to the target data-verse-index. Document-level scrollIntoView alone is insufficient because the application uses an internal scrolling pane.

Page-size composition

The canonical artifacts remain 20 verses each. To show 50 or 100, the text loader fetches the few consecutive source chunks that span the requested range, flattens their verses, and slices the needed portion. This retains bounded requests and avoids multiplying deployment storage.

The active word and compound flow

The reader maps each token to an ActiveWord, including lemma, form, part of speech, feature string, and any resolved compound components. context-lens.svelte handles two cases:

1. A compound shows its available components first; selecting one replaces the active word.
2. A normal word triggers an on-demand bucket fetch for its lemma detail.

The lens must clear stale content while the requested bucket changes and must ignore a late response if the active slug no longer matches it.

Lens styling

The lens uses shared .box, .row, .grid, gap, type, color, and tag-pill primitives. Preserve that approach. Add a component-specific style only if the global style vocabulary cannot express an actual interaction or visual need.