Add UI that enables user to gloss tokens and add render window for ContinuousView (#77)

- Add gloss input to TokenChip (word tokens only): bordered chip now stacks surface text above an editable gloss field
- Thread `glosses` (Record<string, string>) and `onGlossChange(tokenId, value)` props down through TokenChip → PhraseBox → SegmentView → ContinuousView
- Introduce a phrase-window around the focused index in ContinuousView to cap rendered PhraseBoxes and reduce overhead on large books
- Replace SegmentView's `onClick` with `onSelect(ref, tokenId?)` so the clicked token id propagates up to Interlinearizer
- Add `activePhraseIndex` prop to ContinuousView for external phrase jumps when a segment-view token is clicked in continuous-scroll mode
- Update tests to cover gloss propagation, `activePhraseIndex` jumps, and both phrase-window boundary branches

Author: alex-rawlings-yyc

__mocks__/lucide-react.tsx

@@ -5,21 +5,32 @@
 import type { ReactElement } from 'react';
 
 /**
- * Stub for the Trash2 icon; renders a bare SVG element so tests can locate the icon by test ID.
+ * Stub for the LocateFixed icon; renders a bare SVG element so tests can locate the icon by test
+ * ID.
  *
- * @param props - SVG props forwarded from the component, including optional className and size.
- * @returns A ReactElement SVG element used as a trash icon stub in tests.
+ * @param props - SVG props forwarded from the component, including optional className.
+ * @returns A ReactElement SVG element used as a locate-fixed icon stub in tests.
  */
-export function Trash2(props: Readonly<{ className?: string; size?: number }>): ReactElement {
-  return <svg data-testid="trash-icon" {...props} />;
+export function LocateFixed(props: Readonly<{ className?: string }>): ReactElement {
+  return <svg data-testid="locate-fixed-icon" {...props} />;
 }
 
 /**
- * Stub for the Info icon; renders a bare SVG element so tests can locate the icon by test ID.
+ * Stub for the Info icon.
  *
- * @param props - SVG props forwarded from the component, including optional className and size.
+ * @param props - SVG props forwarded from the component.
  * @returns A ReactElement SVG element used as an info icon stub in tests.
  */
-export function Info(props: Readonly<{ className?: string; size?: number }>): ReactElement {
+export function Info(props: Readonly<{ size?: number; className?: string }>): ReactElement {
   return <svg data-testid="info-icon" {...props} />;
 }
+
+/**
+ * Stub for the Trash2 icon.
+ *
+ * @param props - SVG props forwarded from the component.
+ * @returns A ReactElement SVG element used as a trash icon stub in tests.
+ */
+export function Trash2(props: Readonly<{ size?: number; className?: string }>): ReactElement {
+  return <svg data-testid="trash2-icon" {...props} />;
+}

jest.config.ts

@@ -38,6 +38,7 @@ const config: Config = {
     '!src/**/*.spec.{ts,tsx}',
     '!src/types/**',
     '!src/utils/interlinear-project-summary.ts',
+    '!src/components/component-types.ts',
   ],
 
   /** Directory for coverage output. */