diff --git a/contributions/localizedStrings.json b/contributions/localizedStrings.json
index c15fdf8a..84b01dad 100644
--- a/contributions/localizedStrings.json
+++ b/contributions/localizedStrings.json
@@ -21,7 +21,7 @@
       "%interlinearizer_projectSettings_hideInactiveLinkButtonsDescription%": "Hide link buttons between phrases in segments that are not currently active",
       "%interlinearizer_projectSettings_simplifyPhrases%": "Show Phrase Controls on Focus Only",
       "%interlinearizer_projectSettings_simplifyPhrasesDescription%": "Hide interactive controls (split, unlink, remove-token) on phrases that are not currently focused, leaving only their style change on hover",
-      "%interlinearizer_linkButton_crossSegmentDisabledTooltip%": "Cross-segment phrases are not yet supported. This link button is outside the current segment.",
+      "%interlinearizer_linkButton_crossSegmentDisabledTooltip%": "Cross-segment phrases are not supported. This link button is outside the current segment.",
 
       "%interlinearizer_modal_create_title%": "Create Interlinear Project",
       "%interlinearizer_modal_create_name_label%": "Name (optional)",
diff --git a/src/__tests__/components/ContinuousView.test.tsx b/src/__tests__/components/ContinuousView.test.tsx
index 54554e71..0c33e80d 100644
--- a/src/__tests__/components/ContinuousView.test.tsx
+++ b/src/__tests__/components/ContinuousView.test.tsx
@@ -7,9 +7,10 @@ import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event';
 import type { Book, PhraseAnalysisLink, Token } from 'interlinearizer';
 import { useState, type ReactNode } from 'react';
+import type { PhraseDispatch } from '../../components/AnalysisStore';
 import ContinuousView from '../../components/ContinuousView';
-import { AnalysisStoreProvider, type PhraseDispatch } from '../../components/AnalysisStore';
-import { isWordToken } from '../../types/typeGuards';
+import { isWordToken } from '../../types/type-guards';
+import { withAnalysisStore } from './test-helpers';
 
 // ---------------------------------------------------------------------------
 // AnalysisStore mock — pass-through provider so AnalysisStore.tsx stays out of scope
@@ -44,13 +45,6 @@ jest.mock('../../components/AnalysisStore', () => ({
   usePhraseGlossDispatch: () => () => {},
 }));
 
-/** Render options that wrap every test render in a `AnalysisStoreProvider`. */
-const withAnalysisStore = {
-  wrapper({ children }: Readonly<{ children: ReactNode }>) {
-    return <AnalysisStoreProvider analysisLanguage="und">{children}</AnalysisStoreProvider>;
-  },
-};
-
 // The shared hover-preview state is covered in full by usePhraseHoverState.test.ts. Stub it here so
 // ContinuousView's tests don't redundantly re-exercise the hook's internals; the view only forwards
 // its handlers, which a no-op stub satisfies.
@@ -831,15 +825,15 @@ describe('ContinuousView scroll behavior', () => {
       );
     }
     render(<Parent />, withAnalysisStore);
-    // Returns true when the tok-0/tok-1 link icon is rendered AND its sliding-door wrapper is
-    // open (not suppressed). After the animation change, icons stay mounted but collapse via
-    // maxWidth: '0' when suppressed — so we query the DOM wrapper's style rather than spy calls.
+    // Returns true when the tok-0/tok-1 link icon is rendered AND its wrapper is visible (not
+    // suppressed). Icons stay mounted but are hidden via opacity:0 when suppressed, so
+    // we query the DOM wrapper's style rather than spy calls.
     return () => {
       const icon = document.querySelector<HTMLElement>(
         '[data-prev-ref="tok-0"][data-next-ref="tok-1"]',
       );
       if (!icon) return false;
-      return icon.parentElement?.style.maxWidth !== '0';
+      return icon.parentElement?.style.opacity !== '0';
     };
   }
 
@@ -983,64 +977,25 @@ describe('ContinuousView scroll behavior', () => {
     );
   });
 
-  it('re-centers the focused group each frame while a view-option toggle re-lays out the strip', () => {
-    // Toggling `hideInactiveLinkButtons` collapses/expands the out-of-segment link slots over
-    // LINK_SLOT_TRANSITION_MS, continuously shifting every box around the center. A single re-center
-    // would only fix the first frame; the focused group must be re-centered on every animation frame
-    // for the whole transition so it stays dead center, then the loop tears down once the transition
-    // completes. Fake timers drive both the rAF callbacks and performance.now() deterministically.
-    jest.useFakeTimers();
-    try {
-      const book = makeBook();
-      const props = requiredProps(book, { focusedTokenRef: 'tok-0' });
-      const { rerender } = render(<ContinuousView {...props} />, withAnalysisStore);
-      act(() => {
-        jest.runOnlyPendingTimers();
-      });
-      scrollIntoViewMock.mockClear();
-
-      // Toggling hideInactiveLinkButtons changes the strip layout, so the view re-centers.
-      rerender(<ContinuousView {...props} hideInactiveLinkButtons />);
-
-      // First animation frame re-centers.
-      act(() => {
-        jest.advanceTimersByTime(50);
-      });
-      expect(scrollIntoViewMock).toHaveBeenCalledWith(
-        expect.objectContaining({ behavior: 'auto', inline: 'center' }),
-      );
-
-      // Subsequent frames within the transition window re-center again.
-      scrollIntoViewMock.mockClear();
-      act(() => {
-        jest.advanceTimersByTime(50);
-      });
-      expect(scrollIntoViewMock).toHaveBeenCalledWith(
-        expect.objectContaining({ behavior: 'auto', inline: 'center' }),
-      );
+  it('re-centers once when simplifyPhrases toggles but not when hideInactiveLinkButtons toggles', () => {
+    // Inactive link slots are now hidden via visibility:hidden (not max-width collapse), so toggling
+    // hideInactiveLinkButtons no longer shifts the strip layout — no re-center needed.
+    // simplifyPhrases still affects layout, so it should trigger one re-center.
+    const book = makeBook();
+    const props = requiredProps(book, { focusedTokenRef: 'tok-0' });
+    const { rerender } = render(<ContinuousView {...props} />, withAnalysisStore);
+    scrollIntoViewMock.mockClear();
 
-      // Advance well past the transition window so the loop hits its deadline and stops scheduling.
-      act(() => {
-        jest.advanceTimersByTime(500);
-      });
-      scrollIntoViewMock.mockClear();
-      act(() => {
-        jest.advanceTimersByTime(500);
-      });
-      expect(scrollIntoViewMock).not.toHaveBeenCalled();
+    // Toggling hideInactiveLinkButtons should not cause any re-centering.
+    rerender(<ContinuousView {...props} hideInactiveLinkButtons />);
+    expect(scrollIntoViewMock).not.toHaveBeenCalled();
 
-      // Toggling simplifyPhrases likewise starts a fresh re-center loop.
-      scrollIntoViewMock.mockClear();
-      rerender(<ContinuousView {...props} hideInactiveLinkButtons simplifyPhrases />);
-      act(() => {
-        jest.advanceTimersByTime(50);
-      });
-      expect(scrollIntoViewMock).toHaveBeenCalledWith(
-        expect.objectContaining({ behavior: 'auto', inline: 'center' }),
-      );
-    } finally {
-      jest.useRealTimers();
-    }
+    // Toggling simplifyPhrases re-centers exactly once (no rAF loop needed).
+    rerender(<ContinuousView {...props} hideInactiveLinkButtons simplifyPhrases />);
+    expect(scrollIntoViewMock).toHaveBeenCalledWith(
+      expect.objectContaining({ behavior: 'auto', inline: 'center' }),
+    );
+    expect(scrollIntoViewMock).toHaveBeenCalledTimes(1);
   });
 });
 
diff --git a/src/__tests__/components/InterlinearizerLoader.test.tsx b/src/__tests__/components/InterlinearizerLoader.test.tsx
index 5e9c6423..4bb53f6e 100644
--- a/src/__tests__/components/InterlinearizerLoader.test.tsx
+++ b/src/__tests__/components/InterlinearizerLoader.test.tsx
@@ -12,6 +12,7 @@ import type { Dispatch, SetStateAction } from 'react';
 import InterlinearizerLoader from '../../components/InterlinearizerLoader';
 import useInterlinearizerBookData from '../../hooks/useInterlinearizerBookData';
 import useOptimisticBooleanSetting from '../../hooks/useOptimisticBooleanSetting';
+import { emptyAnalysis } from '../../types/empty-factories';
 import type { PhraseMode } from '../../types/phrase-mode';
 import { defaultScrRef, GEN_1_1_BOOK, makeWebViewState } from '../test-helpers';
 
@@ -109,15 +110,6 @@ const mockSendCommand = jest.mocked(papi.commands.sendCommand);
 
 const testProjectId = 'test-project-id';
 
-const STUB_TEXT_ANALYSIS: TextAnalysis = {
-  segmentAnalyses: [],
-  segmentAnalysisLinks: [],
-  tokenAnalyses: [],
-  tokenAnalysisLinks: [],
-  phraseAnalyses: [],
-  phraseAnalysisLinks: [],
-};
-
 const STUB_ACTIVE_PROJECT: MockProject = {
   id: 'proj-1',
   createdAt: '2026-01-01T00:00:00Z',
@@ -862,7 +854,7 @@ describe('InterlinearizerLoader', () => {
   describe('project analysis loading', () => {
     it('passes the stored analysis as initialAnalysis when getProject returns valid JSON', async () => {
       mockSendCommand.mockResolvedValueOnce(
-        JSON.stringify({ id: 'proj-1', analysis: STUB_TEXT_ANALYSIS }),
+        JSON.stringify({ id: 'proj-1', analysis: emptyAnalysis() }),
       );
       await act(async () =>
         render(
@@ -874,7 +866,7 @@ describe('InterlinearizerLoader', () => {
         ),
       );
 
-      expect(capturedInterlinearizerProps?.initialAnalysis).toEqual(STUB_TEXT_ANALYSIS);
+      expect(capturedInterlinearizerProps?.initialAnalysis).toEqual(emptyAnalysis());
       expect(mockSendCommand).toHaveBeenCalledWith('interlinearizer.getProject', 'proj-1');
     });
 
@@ -915,7 +907,7 @@ describe('InterlinearizerLoader', () => {
       );
 
       unmount();
-      resolveGetProject?.(JSON.stringify({ id: 'proj-1', analysis: STUB_TEXT_ANALYSIS }));
+      resolveGetProject?.(JSON.stringify({ id: 'proj-1', analysis: emptyAnalysis() }));
       await Promise.resolve();
 
       expect(jest.mocked(logger.error)).not.toHaveBeenCalled();
@@ -934,11 +926,11 @@ describe('InterlinearizerLoader', () => {
         ),
       );
 
-      capturedInterlinearizerProps?.onSaveAnalysis?.(STUB_TEXT_ANALYSIS);
+      capturedInterlinearizerProps?.onSaveAnalysis?.(emptyAnalysis());
       expect(mockSendCommand).toHaveBeenCalledWith(
         'interlinearizer.saveAnalysis',
         'proj-1',
-        JSON.stringify(STUB_TEXT_ANALYSIS),
+        JSON.stringify(emptyAnalysis()),
       );
     });
 
@@ -951,7 +943,7 @@ describe('InterlinearizerLoader', () => {
         />,
       );
 
-      capturedInterlinearizerProps?.onSaveAnalysis?.(STUB_TEXT_ANALYSIS);
+      capturedInterlinearizerProps?.onSaveAnalysis?.(emptyAnalysis());
 
       expect(
         mockSendCommand.mock.calls.filter(([c]) => c === 'interlinearizer.saveAnalysis'),
diff --git a/src/__tests__/components/PhraseBox.test.tsx b/src/__tests__/components/PhraseBox.test.tsx
index 17e6da45..3870b42f 100644
--- a/src/__tests__/components/PhraseBox.test.tsx
+++ b/src/__tests__/components/PhraseBox.test.tsx
@@ -12,7 +12,7 @@ import {
   PhraseStripProvider,
   type PhraseStripContextValue,
 } from '../../components/PhraseStripContext';
-import { makePhraseStripContext } from '../test-helpers';
+import { makePhraseStripContext, makeWordToken } from '../test-helpers';
 
 /** Stable mock fns for AnalysisStore hooks — reset between tests via resetMocks. */
 const mockUseGloss = jest.fn<string, [string]>().mockReturnValue('');
@@ -676,20 +676,6 @@ describe('PhraseBox', () => {
       ['D', 2],
       ['E', 3],
     ]);
-    /**
-     * Builds a minimal word token whose surface text equals its ref.
-     *
-     * @param ref - Token ref (also used as surface text).
-     * @returns A word token with the given ref.
-     */
-    const mk = (ref: string): Token & { type: 'word' } => ({
-      ref,
-      surfaceText: ref,
-      writingSystem: 'en',
-      type: 'word',
-      charStart: 0,
-      charEnd: 1,
-    });
     mockUsePhraseLinkForToken.mockReturnValue(phraseLink);
     const updatePhraseSpy = jest.fn();
     const createPhraseSpy = jest.fn();
@@ -704,7 +690,7 @@ describe('PhraseBox', () => {
         {...requiredProps()}
         isHighlighted
         phraseLink={phraseLink}
-        tokens={[mk('C'), mk('D'), mk('E')]}
+        tokens={[makeWordToken('C'), makeWordToken('D'), makeWordToken('E')]}
       />,
       { tokenDocOrder: docOrder },
     );
@@ -737,20 +723,6 @@ describe('PhraseBox', () => {
       ['A', 0],
       ['B', 1],
     ]);
-    /**
-     * Builds a minimal word token whose surface text equals its ref.
-     *
-     * @param ref - Token ref (also used as surface text).
-     * @returns A word token with the given ref.
-     */
-    const mk = (ref: string): Token & { type: 'word' } => ({
-      ref,
-      surfaceText: ref,
-      writingSystem: 'en',
-      type: 'word',
-      charStart: 0,
-      charEnd: 1,
-    });
     mockUsePhraseLinkForToken.mockReturnValue(phraseLink);
     const onHoverSplitFreeTokens = jest.fn();
     renderBox(
@@ -758,7 +730,7 @@ describe('PhraseBox', () => {
         {...requiredProps()}
         isHighlighted
         phraseLink={phraseLink}
-        tokens={[mk('A'), mk('B')]}
+        tokens={[makeWordToken('A'), makeWordToken('B')]}
       />,
       { tokenDocOrder: docOrder, onHoverSplitFreeTokens },
     );
@@ -792,20 +764,6 @@ describe('PhraseBox', () => {
       ['C', 2],
       ['D', 3],
     ]);
-    /**
-     * Builds a minimal word token whose surface text equals its ref.
-     *
-     * @param ref - Token ref (also used as surface text).
-     * @returns A word token with the given ref.
-     */
-    const mk = (ref: string): Token & { type: 'word' } => ({
-      ref,
-      surfaceText: ref,
-      writingSystem: 'en',
-      type: 'word',
-      charStart: 0,
-      charEnd: 1,
-    });
     mockUsePhraseLinkForToken.mockReturnValue(phraseLink);
     const updatePhraseSpy = jest.fn();
     const deletePhraseSpy = jest.fn();
@@ -819,7 +777,7 @@ describe('PhraseBox', () => {
         {...requiredProps()}
         isHighlighted
         phraseLink={phraseLink}
-        tokens={[mk('A'), mk('B'), mk('C'), mk('D')]}
+        tokens={[makeWordToken('A'), makeWordToken('B'), makeWordToken('C'), makeWordToken('D')]}
       />,
       { tokenDocOrder: docOrder },
     );
@@ -908,21 +866,6 @@ describe('PhraseBox', () => {
         { tokenRef: 'token-4', surfaceText: 'bar' },
       ],
     };
-    /**
-     * Builds a minimal word token with an explicit surface text.
-     *
-     * @param ref - Token ref.
-     * @param surfaceText - Surface text for the token.
-     * @returns A word token with the given ref and surface text.
-     */
-    const mk = (ref: string, surfaceText: string): Token & { type: 'word' } => ({
-      ref,
-      surfaceText,
-      writingSystem: 'en',
-      type: 'word',
-      charStart: 0,
-      charEnd: 1,
-    });
     mockUsePhraseLinkForToken.mockReturnValue(fourTokenPhrase);
     const updatePhraseSpy = jest.fn();
     mockUsePhraseDispatch.mockReturnValue({
@@ -936,10 +879,10 @@ describe('PhraseBox', () => {
         isHighlighted
         phraseLink={fourTokenPhrase}
         tokens={[
-          mk('token-1', 'Hello'),
-          mk('token-2', 'World'),
-          mk('token-3', 'foo'),
-          mk('token-4', 'bar'),
+          makeWordToken('token-1', 'Hello'),
+          makeWordToken('token-2', 'World'),
+          makeWordToken('token-3', 'foo'),
+          makeWordToken('token-4', 'bar'),
         ]}
       />,
     );
@@ -964,21 +907,6 @@ describe('PhraseBox', () => {
         { tokenRef: 'token-4', surfaceText: 'bar' },
       ],
     };
-    /**
-     * Builds a minimal word token with an explicit surface text.
-     *
-     * @param ref - Token ref.
-     * @param surfaceText - Surface text for the token.
-     * @returns A word token with the given ref and surface text.
-     */
-    const mk = (ref: string, surfaceText: string): Token & { type: 'word' } => ({
-      ref,
-      surfaceText,
-      writingSystem: 'en',
-      type: 'word',
-      charStart: 0,
-      charEnd: 1,
-    });
     mockUsePhraseLinkForToken.mockReturnValue(fourTokenPhrase);
     renderBox(
       <PhraseBox
@@ -987,10 +915,10 @@ describe('PhraseBox', () => {
         isFocused={false}
         phraseLink={fourTokenPhrase}
         tokens={[
-          mk('token-1', 'Hello'),
-          mk('token-2', 'World'),
-          mk('token-3', 'foo'),
-          mk('token-4', 'bar'),
+          makeWordToken('token-1', 'Hello'),
+          makeWordToken('token-2', 'World'),
+          makeWordToken('token-3', 'foo'),
+          makeWordToken('token-4', 'bar'),
         ]}
       />,
       { simplifyPhrases: true },
@@ -1010,21 +938,6 @@ describe('PhraseBox', () => {
         { tokenRef: 'token-4', surfaceText: 'bar' },
       ],
     };
-    /**
-     * Builds a minimal word token with an explicit surface text.
-     *
-     * @param ref - Token ref.
-     * @param surfaceText - Surface text for the token.
-     * @returns A word token with the given ref and surface text.
-     */
-    const mk = (ref: string, surfaceText: string): Token & { type: 'word' } => ({
-      ref,
-      surfaceText,
-      writingSystem: 'en',
-      type: 'word',
-      charStart: 0,
-      charEnd: 1,
-    });
     mockUsePhraseLinkForToken.mockReturnValue(fourTokenPhrase);
     renderBox(
       <PhraseBox
@@ -1033,10 +946,10 @@ describe('PhraseBox', () => {
         isFocused
         phraseLink={fourTokenPhrase}
         tokens={[
-          mk('token-1', 'Hello'),
-          mk('token-2', 'World'),
-          mk('token-3', 'foo'),
-          mk('token-4', 'bar'),
+          makeWordToken('token-1', 'Hello'),
+          makeWordToken('token-2', 'World'),
+          makeWordToken('token-3', 'foo'),
+          makeWordToken('token-4', 'bar'),
         ]}
       />,
       { simplifyPhrases: true },
diff --git a/src/__tests__/components/PhraseStripParts.test.tsx b/src/__tests__/components/PhraseStripParts.test.tsx
index bfac600e..9eab0dfb 100644
--- a/src/__tests__/components/PhraseStripParts.test.tsx
+++ b/src/__tests__/components/PhraseStripParts.test.tsx
@@ -12,8 +12,9 @@ import {
   type StripItem,
 } from '../../components/PhraseStripParts';
 import { PhraseStripProvider } from '../../components/PhraseStripContext';
-import type { TokenGroup, LinkSlot, FocusContext } from '../../utils/token-layout';
-import { makePhraseLink, makePhraseStripContext } from '../test-helpers';
+import { emptyFocusContext } from '../../types/empty-factories';
+import type { TokenGroup, LinkSlot, FocusContext } from '../../types/token-layout';
+import { makePhraseLink, makePhraseStripContext, makeWordToken } from '../test-helpers';
 
 // ---------------------------------------------------------------------------
 // Mocks — keep tests in-lane by stubbing out deep dependencies
@@ -69,17 +70,6 @@ jest.mock('../../components/PhraseBox', () => ({
 // Helpers
 // ---------------------------------------------------------------------------
 
-/**
- * Creates a word token fixture.
- *
- * @param ref - Token ref.
- * @param surfaceText - Surface text.
- * @returns A word token.
- */
-function mkWord(ref: string, surfaceText = ref): Token & { type: 'word' } {
-  return { ref, surfaceText, writingSystem: 'en', type: 'word', charStart: 0, charEnd: 1 };
-}
-
 /**
  * Creates a punctuation token fixture.
  *
@@ -92,13 +82,7 @@ function mkPunct(ref: string, surfaceText = '.'): Token {
 }
 
 /** A minimal no-focus context. */
-const NO_FOCUS: FocusContext = {
-  focusedToken: undefined,
-  focusedPhraseLink: undefined,
-  focusedFreeToken: undefined,
-  focusedSegmentId: undefined,
-  focusedPhraseId: undefined,
-};
+const NO_FOCUS: FocusContext = emptyFocusContext();
 
 /** Default props shared by PhraseSlot tests. */
 function slotProps(slot: LinkSlot): Parameters<typeof PhraseSlot>[0] {
@@ -146,7 +130,7 @@ describe('PhraseSlot', () => {
 
   it('renders when the slot has two neighbors', () => {
     const group: TokenGroup = {
-      tokens: [mkWord('tok-a')],
+      tokens: [makeWordToken('tok-a')],
       phraseLink: undefined,
       firstIndex: 0,
       punctuationBetween: [],
@@ -159,13 +143,13 @@ describe('PhraseSlot', () => {
   it('sets phraseRevealed when both neighbors are in the same hovered phrase', () => {
     const link = makePhraseLink('p1', ['tok-a', 'tok-b']);
     const prevGroup: TokenGroup = {
-      tokens: [mkWord('tok-a')],
+      tokens: [makeWordToken('tok-a')],
       phraseLink: link,
       firstIndex: 0,
       punctuationBetween: [],
     };
     const nextGroup: TokenGroup = {
-      tokens: [mkWord('tok-b')],
+      tokens: [makeWordToken('tok-b')],
       phraseLink: link,
       firstIndex: 1,
       punctuationBetween: [],
@@ -182,20 +166,20 @@ describe('PhraseSlot', () => {
   it('sets phraseRevealed via focusedPhraseId when both neighbors are in the same focused phrase', () => {
     const link = makePhraseLink('p1', ['tok-a', 'tok-b']);
     const prevGroup: TokenGroup = {
-      tokens: [mkWord('tok-a')],
+      tokens: [makeWordToken('tok-a')],
       phraseLink: link,
       firstIndex: 0,
       punctuationBetween: [],
     };
     const nextGroup: TokenGroup = {
-      tokens: [mkWord('tok-b')],
+      tokens: [makeWordToken('tok-b')],
       phraseLink: link,
       firstIndex: 1,
       punctuationBetween: [],
     };
     const slot: LinkSlot = { prevGroup, nextGroup, punctuation: [] };
     const focusedContext: FocusContext = {
-      focusedToken: mkWord('tok-a'),
+      focusedToken: makeWordToken('tok-a'),
       focusedPhraseLink: link,
       focusedFreeToken: undefined,
       focusedSegmentId: 'seg-1',
@@ -211,7 +195,7 @@ describe('PhraseSlot', () => {
 
   it('renders the link icon when hideInactiveLinkButtons is off', () => {
     const group: TokenGroup = {
-      tokens: [mkWord('tok-a')],
+      tokens: [makeWordToken('tok-a')],
       phraseLink: undefined,
       firstIndex: 0,
       punctuationBetween: [],
@@ -226,7 +210,7 @@ describe('PhraseSlot', () => {
 
   it('hides the link icon when hideInactiveLinkButtons is on and neither neighbor is in the active segment', () => {
     const group: TokenGroup = {
-      tokens: [mkWord('tok-a')],
+      tokens: [makeWordToken('tok-a')],
       phraseLink: undefined,
       firstIndex: 0,
       punctuationBetween: [],
@@ -242,15 +226,15 @@ describe('PhraseSlot', () => {
         <PhraseSlot {...slotProps(slot)} />
       </PhraseStripProvider>,
     );
-    // Icon stays mounted for smooth sliding-door animation; the wrapper collapses it visually.
+    // Icon stays mounted but invisible (opacity:0 hides it while the min-height preserves layout space).
     const icon = screen.getByTestId('link-icon');
-    expect(icon.parentElement?.style.maxWidth).toBe('0');
+    expect(icon.parentElement?.style.visibility).toBeFalsy();
     expect(icon.parentElement?.style.opacity).toBe('0');
   });
 
   it('keeps the link icon when hideInactiveLinkButtons is on and both neighbors are in the active segment', () => {
     const group: TokenGroup = {
-      tokens: [mkWord('tok-a')],
+      tokens: [makeWordToken('tok-a')],
       phraseLink: undefined,
       firstIndex: 0,
       punctuationBetween: [],
@@ -271,7 +255,7 @@ describe('PhraseSlot', () => {
 
   it('hides the cross-verse-boundary link icon when only one neighbor is in the active segment', () => {
     const group: TokenGroup = {
-      tokens: [mkWord('tok-a')],
+      tokens: [makeWordToken('tok-a')],
       phraseLink: undefined,
       firstIndex: 0,
       punctuationBetween: [],
@@ -288,9 +272,9 @@ describe('PhraseSlot', () => {
         <PhraseSlot {...slotProps(slot)} prevSegmentId="seg-2" nextSegmentId="seg-1" />
       </PhraseStripProvider>,
     );
-    // Icon stays mounted for smooth sliding-door animation; the wrapper collapses it visually.
+    // Icon stays mounted but invisible (opacity:0 hides it while the min-height preserves layout space).
     const icon = screen.getByTestId('link-icon');
-    expect(icon.parentElement?.style.maxWidth).toBe('0');
+    expect(icon.parentElement?.style.visibility).toBeFalsy();
     expect(icon.parentElement?.style.opacity).toBe('0');
   });
 });
@@ -301,7 +285,7 @@ describe('PhraseSlot', () => {
 
 describe('MemoizedPhraseGroup', () => {
   const group: TokenGroup = {
-    tokens: [mkWord('tok-a', 'Hello')],
+    tokens: [makeWordToken('tok-a', 'Hello')],
     phraseLink: undefined,
     firstIndex: 0,
     punctuationBetween: [],
@@ -398,7 +382,7 @@ describe('PhraseStrip', () => {
    * @returns A group {@link StripItem}.
    */
   function groupItem(link: PhraseAnalysisLink | undefined, refs: string[]): StripItem {
-    const tokens = refs.map((r) => mkWord(r));
+    const tokens = refs.map((r) => makeWordToken(r));
     return {
       kind: 'group',
       key: refs[0],
diff --git a/src/__tests__/components/SegmentView.test.tsx b/src/__tests__/components/SegmentView.test.tsx
index 2a5e16b4..4af6ea69 100644
--- a/src/__tests__/components/SegmentView.test.tsx
+++ b/src/__tests__/components/SegmentView.test.tsx
@@ -3,14 +3,15 @@
 /// <reference types="@testing-library/jest-dom" />
 
 import { useLocalizedStrings } from '@papi/frontend/react';
-import { act, render, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import type { PhraseAnalysisLink, ScriptureRef, Segment, Token } from 'interlinearizer';
 import type { ReactNode } from 'react';
-import { AnalysisStoreProvider, type PhraseDispatch } from '../../components/AnalysisStore';
-import { SegmentView } from '../../components/SegmentView';
+import type { PhraseDispatch } from '../../components/AnalysisStore';
 import { LINK_SLOT_TRANSITION_MS } from '../../components/PhraseStripParts';
+import { SegmentView } from '../../components/SegmentView';
 import { makePhraseLink } from '../test-helpers';
+import { withAnalysisStore } from './test-helpers';
 
 // ---------------------------------------------------------------------------
 // AnalysisStore mock — pass-through provider so AnalysisStore.tsx stays out of scope
@@ -230,82 +231,53 @@ describe('SegmentView', () => {
   });
 
   it('renders word token chips in token-chip mode (default)', () => {
-    render(
-      <AnalysisStoreProvider analysisLanguage="und">
-        <SegmentView {...requiredProps()} />
-      </AnalysisStoreProvider>,
-    );
+    render(<SegmentView {...requiredProps()} />, withAnalysisStore);
 
     expect(screen.getByText('In')).toBeInTheDocument();
     expect(screen.getByText('the')).toBeInTheDocument();
   });
 
   it('renders non-word (punctuation) tokens in token-chip mode', () => {
-    render(
-      <AnalysisStoreProvider analysisLanguage="und">
-        <SegmentView {...requiredProps()} segment={PUNCT_SEGMENT} />
-      </AnalysisStoreProvider>,
-    );
+    render(<SegmentView {...requiredProps()} segment={PUNCT_SEGMENT} />, withAnalysisStore);
 
     expect(screen.getByText('.')).toBeInTheDocument();
   });
 
   it('renders baselineText in baseline-text mode', () => {
-    render(
-      <AnalysisStoreProvider analysisLanguage="und">
-        <SegmentView {...requiredProps()} displayMode="baseline-text" />
-      </AnalysisStoreProvider>,
-    );
+    render(<SegmentView {...requiredProps()} displayMode="baseline-text" />, withAnalysisStore);
 
     expect(screen.getByText('In the beginning.')).toBeInTheDocument();
   });
 
   it('does not render individual tokens in baseline-text mode', () => {
-    render(
-      <AnalysisStoreProvider analysisLanguage="und">
-        <SegmentView {...requiredProps()} displayMode="baseline-text" />
-      </AnalysisStoreProvider>,
-    );
+    render(<SegmentView {...requiredProps()} displayMode="baseline-text" />, withAnalysisStore);
 
     expect(screen.queryByText('In')).not.toBeInTheDocument();
     expect(screen.queryByText('the')).not.toBeInTheDocument();
   });
 
   it('shows the verse number label', () => {
-    render(
-      <AnalysisStoreProvider analysisLanguage="und">
-        <SegmentView {...requiredProps()} />
-      </AnalysisStoreProvider>,
-    );
+    render(<SegmentView {...requiredProps()} />, withAnalysisStore);
 
     expect(screen.getByText('1')).toBeInTheDocument();
   });
 
   it('sets aria-current="true" when isActive is true', () => {
-    const { container } = render(
-      <AnalysisStoreProvider analysisLanguage="und">
-        <SegmentView {...requiredProps()} isActive />
-      </AnalysisStoreProvider>,
-    );
+    const { container } = render(<SegmentView {...requiredProps()} isActive />, withAnalysisStore);
 
     expect(container.firstChild).toHaveAttribute('aria-current', 'true');
   });
 
   it('does not set aria-current when isActive is omitted', () => {
-    const { container } = render(
-      <AnalysisStoreProvider analysisLanguage="und">
-        <SegmentView {...requiredProps()} />
-      </AnalysisStoreProvider>,
-    );
+    const { container } = render(<SegmentView {...requiredProps()} />, withAnalysisStore);
 
     expect(container.firstChild).not.toHaveAttribute('aria-current');
   });
 
   it('sets aria-current="true" on the baseline-text button when isActive is true', () => {
     const { container } = render(
-      <AnalysisStoreProvider analysisLanguage="und">
-        <SegmentView {...requiredProps()} displayMode="baseline-text" isActive />
-      </AnalysisStoreProvider>,
+      <SegmentView {...requiredProps()} displayMode="baseline-text" isActive />,
+      withAnalysisStore,
     );
 
     expect(container.firstChild).toHaveAttribute('aria-current', 'true');
@@ -314,9 +286,8 @@ describe('SegmentView', () => {
   it('calls onSelect when clicked in baseline-text mode', async () => {
     const handleSelect = jest.fn();
     render(
-      <AnalysisStoreProvider analysisLanguage="und">
-        <SegmentView {...requiredProps()} displayMode="baseline-text" onSelect={handleSelect} />
-      </AnalysisStoreProvider>,
+      <SegmentView {...requiredProps()} displayMode="baseline-text" onSelect={handleSelect} />,
+      withAnalysisStore,
     );
 
     await userEvent.click(screen.getByTestId('segment-container'));
@@ -327,11 +298,7 @@ describe('SegmentView', () => {
 
   it('calls onSelect with the verse ref and token id when a word token is clicked', async () => {
     const handleSelect = jest.fn();
-    render(
-      <AnalysisStoreProvider analysisLanguage="und">
-        <SegmentView {...requiredProps()} onSelect={handleSelect} />
-      </AnalysisStoreProvider>,
-    );
+    render(<SegmentView {...requiredProps()} onSelect={handleSelect} />, withAnalysisStore);
 
     await userEvent.click(screen.getByRole('button', { name: 'In' }));
 
@@ -340,11 +307,7 @@ describe('SegmentView', () => {
   });
 
   it('renders word tokens as interactive buttons when onSelect is provided', () => {
-    render(
-      <AnalysisStoreProvider analysisLanguage="und">
-        <SegmentView {...requiredProps()} />
-      </AnalysisStoreProvider>,
-    );
+    render(<SegmentView {...requiredProps()} />, withAnalysisStore);
 
     expect(screen.getByRole('button', { name: 'In' })).toBeInTheDocument();
   });
@@ -364,11 +327,7 @@ describe('SegmentView', () => {
     ]);
     mockUsePhraseLinkMap.mockReturnValue(phraseLinkMap);
 
-    render(
-      <AnalysisStoreProvider analysisLanguage="und">
-        <SegmentView {...requiredProps()} />
-      </AnalysisStoreProvider>,
-    );
+    render(<SegmentView {...requiredProps()} />, withAnalysisStore);
 
     // Both tokens are grouped into one PhraseBox (the mock renders both as buttons inside one wrapper)
     expect(document.querySelectorAll('[data-focus-state]')).toHaveLength(1);
@@ -425,11 +384,7 @@ describe('SegmentView', () => {
       ]),
     );
 
-    render(
-      <AnalysisStoreProvider analysisLanguage="und">
-        <SegmentView {...requiredProps()} segment={discontiguousSegment} />
-      </AnalysisStoreProvider>,
-    );
+    render(<SegmentView {...requiredProps()} segment={discontiguousSegment} />, withAnalysisStore);
 
     // boxes[0]=tok-a (1st fragment), boxes[1]=tok-b (free), boxes[2]=tok-c (2nd fragment)
     const boxes = document.querySelectorAll('[data-show-gloss]');
@@ -438,11 +393,7 @@ describe('SegmentView', () => {
   });
 
   it('sets focusedGroupSeen when focusedTokenRef matches a token in a group', () => {
-    render(
-      <AnalysisStoreProvider analysisLanguage="und">
-        <SegmentView {...requiredProps()} focusedTokenRef="tok-0" />
-      </AnalysisStoreProvider>,
-    );
+    render(<SegmentView {...requiredProps()} focusedTokenRef="tok-0" />, withAnalysisStore);
     // Just verifies no error — the focusedSideIsPrev computation runs with a matching token.
     expect(screen.getByText('In')).toBeInTheDocument();
   });
@@ -463,23 +414,18 @@ describe('SegmentView', () => {
       ]),
     );
     render(
-      <AnalysisStoreProvider analysisLanguage="und">
-        <SegmentView
-          {...requiredProps()}
-          phraseMode={{ kind: 'edit', phraseId: 'phrase-1', originalTokens: sharedLink.tokens }}
-        />
-      </AnalysisStoreProvider>,
+      <SegmentView
+        {...requiredProps()}
+        phraseMode={{ kind: 'edit', phraseId: 'phrase-1', originalTokens: sharedLink.tokens }}
+      />,
+      withAnalysisStore,
     );
     // In edit mode, EMPTY_SPLIT_FREE_REFS is used — no errors expected.
     expect(screen.getByText('In')).toBeInTheDocument();
   });
 
   it('fires mouse-leave on the token row without throwing', async () => {
-    render(
-      <AnalysisStoreProvider analysisLanguage="und">
-        <SegmentView {...requiredProps()} />
-      </AnalysisStoreProvider>,
-    );
+    render(<SegmentView {...requiredProps()} />, withAnalysisStore);
     const tokenRow = document.querySelector('.tw\\:token-row');
     expect(tokenRow).not.toBeNull();
     await userEvent.unhover(tokenRow ?? document.body);
@@ -501,11 +447,7 @@ describe('SegmentView', () => {
     ]);
     mockUsePhraseLinkMap.mockReturnValue(phraseLinkMap);
     const onHoverPhrase = jest.fn();
-    render(
-      <AnalysisStoreProvider analysisLanguage="und">
-        <SegmentView {...requiredProps()} onHoverPhrase={onHoverPhrase} />
-      </AnalysisStoreProvider>,
-    );
+    render(<SegmentView {...requiredProps()} onHoverPhrase={onHoverPhrase} />, withAnalysisStore);
     // The PhraseGroup wrapper span wraps the mocked PhraseBox span (data-focus-state).
     const focusStateEl = document.querySelector('[data-focus-state]');
     const phraseGroupSpan = focusStateEl?.parentElement;
@@ -524,22 +466,21 @@ describe('SegmentView', () => {
       deletePhrase,
       mergePhrases: jest.fn(),
     });
-    // Two-token phrase split at tok-0 → both halves are 1 token → deletePhrase called
+    // Two-token phrase split at tok-0 — both halves are 1 token — deletePhrase called
     mockUsePhraseLinkMap.mockReturnValue(
       new Map([['tok-0', makePhraseLink('phrase-1', ['tok-0', 'tok-1'], ['In', 'the'])]]),
     );
     render(
-      <AnalysisStoreProvider analysisLanguage="und">
-        <SegmentView
-          {...requiredProps()}
-          tokenDocOrder={
-            new Map([
-              ['tok-0', 0],
-              ['tok-1', 1],
-            ])
-          }
-        />
-      </AnalysisStoreProvider>,
+      <SegmentView
+        {...requiredProps()}
+        tokenDocOrder={
+          new Map([
+            ['tok-0', 0],
+            ['tok-1', 1],
+          ])
+        }
+      />,
+      withAnalysisStore,
     );
     await userEvent.click(screen.getByTestId('arc-split-btn'));
     expect(deletePhrase).toHaveBeenCalledWith('phrase-1');
@@ -553,22 +494,14 @@ describe('SegmentView', () => {
       deletePhrase,
       mergePhrases: jest.fn(),
     });
-    render(
-      <AnalysisStoreProvider analysisLanguage="und">
-        <SegmentView {...requiredProps()} />
-      </AnalysisStoreProvider>,
-    );
+    render(<SegmentView {...requiredProps()} />, withAnalysisStore);
     await userEvent.click(screen.getByTestId('arc-split-btn'));
     expect(deletePhrase).not.toHaveBeenCalled();
   });
 
   it('focuses the first word token and updates the verse when the background is clicked', async () => {
     const handleSelect = jest.fn();
-    render(
-      <AnalysisStoreProvider analysisLanguage="und">
-        <SegmentView {...requiredProps()} onSelect={handleSelect} />
-      </AnalysisStoreProvider>,
-    );
+    render(<SegmentView {...requiredProps()} onSelect={handleSelect} />, withAnalysisStore);
 
     await userEvent.click(screen.getByTestId('segment-container'));
 
@@ -579,9 +512,8 @@ describe('SegmentView', () => {
   it('does nothing on background click when the segment has no word token', async () => {
     const handleSelect = jest.fn();
     render(
-      <AnalysisStoreProvider analysisLanguage="und">
-        <SegmentView {...requiredProps()} segment={PUNCT_SEGMENT} onSelect={handleSelect} />
-      </AnalysisStoreProvider>,
+      <SegmentView {...requiredProps()} segment={PUNCT_SEGMENT} onSelect={handleSelect} />,
+      withAnalysisStore,
     );
 
     await userEvent.click(screen.getByTestId('segment-container'));
@@ -591,11 +523,7 @@ describe('SegmentView', () => {
 
   it('ignores background clicks that bubble up from an interactive child', async () => {
     const handleSelect = jest.fn();
-    render(
-      <AnalysisStoreProvider analysisLanguage="und">
-        <SegmentView {...requiredProps()} onSelect={handleSelect} />
-      </AnalysisStoreProvider>,
-    );
+    render(<SegmentView {...requiredProps()} onSelect={handleSelect} />, withAnalysisStore);
 
     // Clicking the token button calls onSelect itself (with the clicked token), but the bubbled
     // click on the container must not fire handleBackgroundClick a second time.
@@ -607,11 +535,7 @@ describe('SegmentView', () => {
 
   it('ignores background clicks that bubble up from a phrase-box label, not just an interactive tag', async () => {
     const handleSelect = jest.fn();
-    render(
-      <AnalysisStoreProvider analysisLanguage="und">
-        <SegmentView {...requiredProps()} onSelect={handleSelect} />
-      </AnalysisStoreProvider>,
-    );
+    render(<SegmentView {...requiredProps()} onSelect={handleSelect} />, withAnalysisStore);
 
     // Clicking a token chip's surface text lands on a <label>/<span> inside the phrase box, not on
     // the gloss input itself. The browser still forwards that click to the input (which fires its
@@ -625,13 +549,12 @@ describe('SegmentView', () => {
   it('ignores background clicks that bubble up from an inter-phrase link slot', async () => {
     const handleSelect = jest.fn();
     const { container } = render(
-      <AnalysisStoreProvider analysisLanguage="und">
-        {/* Inactive segment with link buttons hidden: the slot between the two token groups
-            collapses its link button to zero width, leaving an empty clickable gap. Clicking that
-            gap must NOT snap focus to the segment's first phrase (the reported out-of-segment bug);
-            it should be a no-op, matching the buttons-visible case where the button absorbs it. */}
-        <SegmentView {...requiredProps()} hideInactiveLinkButtons onSelect={handleSelect} />
-      </AnalysisStoreProvider>,
+      // Inactive segment with link buttons hidden: the slot between the two token groups collapses
+      // its link button to zero width, leaving an empty clickable gap. Clicking that gap must NOT
+      // snap focus to the segment's first phrase (the reported out-of-segment bug); it should be a
+      // no-op, matching the buttons-visible case where the button absorbs it.
+      <SegmentView {...requiredProps()} hideInactiveLinkButtons onSelect={handleSelect} />,
+      withAnalysisStore,
     );
 
     const slot = container.querySelector('[data-link-slot]');
@@ -641,66 +564,16 @@ describe('SegmentView', () => {
     expect(handleSelect).not.toHaveBeenCalled();
   });
 
-  it('animates the link-slot open/close transition after mount', () => {
-    const { container } = render(
-      <AnalysisStoreProvider analysisLanguage="und">
-        <SegmentView {...requiredProps()} />
-      </AnalysisStoreProvider>,
-    );
+  it('enables the link-slot fade transition after mount', () => {
+    const { container } = render(<SegmentView {...requiredProps()} />, withAnalysisStore);
 
-    // The slot's sliding-door wrapper is the [data-link-slot]'s first element child. Once the mount
-    // effect has run (flushed by render/act), SegmentView stops suppressing the transition so a
-    // later active-segment flip slides the slot instead of snapping it — the reflow-during-click
-    // that otherwise mis-selects the phrase under the pointer.
+    // After mount, SegmentView stops suppressing the opacity transition so later toggles of
+    // isActive / hideInactiveLinkButtons fade the icon in/out instead of snapping.
     const slotWrapper = container.querySelector('[data-link-slot] > span');
     if (!(slotWrapper instanceof HTMLElement)) throw new Error('Expected a link-slot wrapper span');
     expect(slotWrapper.style.transitionDuration).toBe(`${LINK_SLOT_TRANSITION_MS}ms`);
   });
 
-  it('re-measures arcs each frame while the link slots slide, then stops at the deadline', () => {
-    // Capture rAF callbacks and control the clock so we can step the slide loop deterministically.
-    const frames: FrameRequestCallback[] = [];
-    const rafSpy = jest
-      .spyOn(globalThis, 'requestAnimationFrame')
-      .mockImplementation((cb: FrameRequestCallback) => {
-        frames.push(cb);
-        return frames.length;
-      });
-    jest.spyOn(globalThis, 'cancelAnimationFrame').mockImplementation(() => {});
-    let now = 0;
-    jest.spyOn(performance, 'now').mockImplementation(() => now);
-
-    const { rerender } = render(
-      <AnalysisStoreProvider analysisLanguage="und">
-        <SegmentView {...requiredProps()} isActive={false} />
-      </AnalysisStoreProvider>,
-    );
-    // Mount effect skips the loop; flipping isActive after mount starts it.
-    rerender(
-      <AnalysisStoreProvider analysisLanguage="und">
-        <SegmentView {...requiredProps()} isActive />
-      </AnalysisStoreProvider>,
-    );
-
-    const runNextFrame = () => {
-      const cb = frames.shift();
-      if (!cb) throw new Error('Expected a scheduled animation frame');
-      act(() => cb(now));
-    };
-
-    // Before the deadline each frame schedules another (the bump + continue branch).
-    expect(frames.length).toBe(1);
-    runNextFrame();
-    expect(frames.length).toBe(1);
-
-    // Crossing the deadline runs the final frame without scheduling more (the stop branch).
-    now = LINK_SLOT_TRANSITION_MS + 1;
-    runNextFrame();
-    expect(frames.length).toBe(0);
-
-    rafSpy.mockRestore();
-  });
-
   it('computes candidatePhraseIds from non-empty candidateTokenRefs', () => {
     const phraseLink: PhraseAnalysisLink = {
       analysisId: 'phrase-1',
@@ -710,11 +583,7 @@ describe('SegmentView', () => {
     mockUsePhraseLinkMap.mockReturnValue(new Map([['tok-0', phraseLink]]));
     mockCandidateTokenRefs.current = new Set(['tok-0']);
     // No throw and correct render = the candidatePhraseIds memo ran without error
-    render(
-      <AnalysisStoreProvider analysisLanguage="und">
-        <SegmentView {...requiredProps()} />
-      </AnalysisStoreProvider>,
-    );
+    render(<SegmentView {...requiredProps()} />, withAnalysisStore);
     // ArcOverlay receives candidatePhraseIds; it renders so no assertion needed beyond no crash
     expect(screen.getByTestId('arc-split-btn')).toBeInTheDocument();
   });
diff --git a/src/__tests__/components/TokenLinkIcon.test.tsx b/src/__tests__/components/TokenLinkIcon.test.tsx
index a910b588..4632feaf 100644
--- a/src/__tests__/components/TokenLinkIcon.test.tsx
+++ b/src/__tests__/components/TokenLinkIcon.test.tsx
@@ -5,14 +5,13 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import type { ComponentProps, ReactElement } from 'react';
-import type { Token } from 'interlinearizer';
 import { TokenLinkIcon } from '../../components/TokenLinkIcon';
 import {
   PhraseStripProvider,
   type PhraseStripContextValue,
 } from '../../components/PhraseStripContext';
-import type { SlotFocusInfo } from '../../utils/token-layout';
-import { makePhraseLink, makePhraseStripContext } from '../test-helpers';
+import type { SlotFocusInfo } from '../../types/token-layout';
+import { makePhraseLink, makePhraseStripContext, makeWordToken } from '../test-helpers';
 
 // ---------------------------------------------------------------------------
 // AnalysisStore mock
@@ -37,17 +36,6 @@ jest.mock('../../components/AnalysisStore', () => ({
 // Helpers
 // ---------------------------------------------------------------------------
 
-/**
- * Creates a word token fixture.
- *
- * @param ref - Token reference string.
- * @param surfaceText - Display text.
- * @returns A word token.
- */
-function mkToken(ref: string, surfaceText = ref): Token & { type: 'word' } {
-  return { ref, surfaceText, writingSystem: 'en', type: 'word', charStart: 0, charEnd: 1 };
-}
-
 /**
  * Builds a `slotFocus` bundle. Defaults to "no focus, same segment" — the baseline used by the
  * link-icon tests, which then layer on `focusedSideIsPrev` / `focusedPhraseLink` /
@@ -69,8 +57,8 @@ function slotFocus(overrides: Partial<SlotFocusInfo> = {}): SlotFocusInfo {
 /** Default no-op required props for `TokenLinkIcon`. */
 function requiredProps(): ComponentProps<typeof TokenLinkIcon> {
   return {
-    prevToken: mkToken('tok-a'),
-    nextToken: mkToken('tok-b'),
+    prevToken: makeWordToken('tok-a'),
+    nextToken: makeWordToken('tok-b'),
     prevPhraseLink: undefined,
     nextPhraseLink: undefined,
     slotFocus: slotFocus(),
@@ -287,7 +275,7 @@ describe('TokenLinkIcon', () => {
         slotFocus={slotFocus({
           focusedSideIsPrev: true,
           isSameSegmentAsFocus: false,
-          focusedFreeToken: mkToken('tok-a'),
+          focusedFreeToken: makeWordToken('tok-a'),
         })}
       />,
     );
@@ -295,7 +283,7 @@ describe('TokenLinkIcon', () => {
   });
 
   it('creates a phrase when clicking link with two free tokens', async () => {
-    const focusedFreeToken = mkToken('tok-a');
+    const focusedFreeToken = makeWordToken('tok-a');
     renderIcon(
       <TokenLinkIcon
         {...requiredProps()}
@@ -371,7 +359,7 @@ describe('TokenLinkIcon', () => {
 
   it('absorbs free token into neighbor phrase when focus is free and neighbor is a phrase', async () => {
     const neighborPhrase = makePhraseLink('p2', ['tok-b']);
-    const focusedFreeToken = mkToken('tok-a');
+    const focusedFreeToken = makeWordToken('tok-a');
     renderIcon(
       <TokenLinkIcon
         {...requiredProps()}
@@ -402,8 +390,8 @@ describe('TokenLinkIcon', () => {
     renderIcon(
       <TokenLinkIcon
         {...requiredProps()}
-        prevToken={mkToken('tok-b')}
-        nextToken={mkToken('tok-c')}
+        prevToken={makeWordToken('tok-b')}
+        nextToken={makeWordToken('tok-c')}
         slotFocus={slotFocus({ focusedSideIsPrev: true, focusedPhraseLink: focusedPhrase })}
         nextPhraseLink={focusedPhrase}
       />,
@@ -441,7 +429,7 @@ describe('TokenLinkIcon', () => {
 
   it('calls onHoverCandidateTokens with token refs on enter and undefined on leave', async () => {
     const onHoverCandidateTokens = jest.fn();
-    const focusedFreeToken = mkToken('tok-a');
+    const focusedFreeToken = makeWordToken('tok-a');
     renderIcon(
       <TokenLinkIcon
         {...requiredProps()}
@@ -469,8 +457,8 @@ describe('TokenLinkIcon', () => {
     renderIcon(
       <TokenLinkIcon
         {...requiredProps()}
-        prevToken={mkToken('tok-a')}
-        nextToken={mkToken('tok-b')}
+        prevToken={makeWordToken('tok-a')}
+        nextToken={makeWordToken('tok-b')}
         slotFocus={slotFocus({ focusedSideIsPrev: false, focusedPhraseLink: focusedPhrase })}
       />,
       {
@@ -544,7 +532,7 @@ describe('TokenLinkIcon', () => {
 
   it('highlights all tokens in a multi-token neighbor phrase when focus is free and neighbor is phrase', async () => {
     const neighborPhrase = makePhraseLink('p2', ['tok-b', 'tok-c']);
-    const focusedFreeToken = mkToken('tok-a');
+    const focusedFreeToken = makeWordToken('tok-a');
     const onHoverCandidateTokens = jest.fn();
     renderIcon(
       <TokenLinkIcon
@@ -574,8 +562,8 @@ describe('TokenLinkIcon', () => {
     renderIcon(
       <TokenLinkIcon
         {...requiredProps()}
-        prevToken={mkToken('tok-b')}
-        nextToken={mkToken('tok-c')}
+        prevToken={makeWordToken('tok-b')}
+        nextToken={makeWordToken('tok-c')}
         prevPhraseLink={phraseLink}
         nextPhraseLink={phraseLink}
       />,
diff --git a/src/__tests__/components/EditPhraseControls.test.tsx b/src/__tests__/components/controls/EditPhraseControls.test.tsx
similarity index 93%
rename from src/__tests__/components/EditPhraseControls.test.tsx
rename to src/__tests__/components/controls/EditPhraseControls.test.tsx
index 236b5517..3bcc0bbc 100644
--- a/src/__tests__/components/EditPhraseControls.test.tsx
+++ b/src/__tests__/components/controls/EditPhraseControls.test.tsx
@@ -6,16 +6,16 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import type { ReactElement } from 'react';
 import type { PhraseAnalysisLink } from 'interlinearizer';
-import EditPhraseControls from '../../components/controls/EditPhraseControls';
-import type { PhraseMode } from '../../types/phrase-mode';
-import { makePhraseLink } from '../test-helpers';
+import EditPhraseControls from '../../../components/controls/EditPhraseControls';
+import type { PhraseMode } from '../../../types/phrase-mode';
+import { makePhraseLink } from '../../test-helpers';
 
 const mockUsePhraseLinkByIdMap = jest.fn<Map<string, PhraseAnalysisLink>, []>();
 
 // AnalysisStore is exercised by its own dedicated suite. EditPhraseControls only reads the live
 // phrase's token count via usePhraseLinkByIdMap, so we stub that single hook rather than driving
 // the real provider (which would pull AnalysisStore into this suite's coverage).
-jest.mock('../../components/AnalysisStore', () => ({
+jest.mock('../../../components/AnalysisStore', () => ({
   __esModule: true,
   usePhraseLinkByIdMap: () => mockUsePhraseLinkByIdMap(),
 }));
diff --git a/src/__tests__/components/ScriptureNavControls.test.tsx b/src/__tests__/components/controls/ScriptureNavControls.test.tsx
similarity index 87%
rename from src/__tests__/components/ScriptureNavControls.test.tsx
rename to src/__tests__/components/controls/ScriptureNavControls.test.tsx
index 76cdfe07..5280c916 100644
--- a/src/__tests__/components/ScriptureNavControls.test.tsx
+++ b/src/__tests__/components/controls/ScriptureNavControls.test.tsx
@@ -2,13 +2,11 @@
 /// <reference types="jest" />
 /// <reference types="@testing-library/jest-dom" />
 
-import type { SerializedVerseRef } from '@sillsdev/scripture';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { useLocalizedStrings, useRecentScriptureRefs } from '@papi/frontend/react';
-import ScriptureNavControls from '../../components/controls/ScriptureNavControls';
-
-const defaultScrRef: SerializedVerseRef = { book: 'GEN', chapterNum: 1, verseNum: 1 };
+import ScriptureNavControls from '../../../components/controls/ScriptureNavControls';
+import { defaultScrRef } from '../../test-helpers';
 
 describe('ScriptureNavControls', () => {
   beforeEach(() => {
diff --git a/src/__tests__/components/ViewOptionsDropdown.test.tsx b/src/__tests__/components/controls/ViewOptionsDropdown.test.tsx
similarity index 98%
rename from src/__tests__/components/ViewOptionsDropdown.test.tsx
rename to src/__tests__/components/controls/ViewOptionsDropdown.test.tsx
index 88c02bf8..ed05370b 100644
--- a/src/__tests__/components/ViewOptionsDropdown.test.tsx
+++ b/src/__tests__/components/controls/ViewOptionsDropdown.test.tsx
@@ -5,7 +5,7 @@
 import { useLocalizedStrings } from '@papi/frontend/react';
 import { act, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import ViewOptionsDropdown from '../../components/controls/ViewOptionsDropdown';
+import ViewOptionsDropdown from '../../../components/controls/ViewOptionsDropdown';
 
 beforeEach(() => {
   // Restore key-as-value behavior cleared by resetMocks: true.
diff --git a/src/__tests__/components/CreateProjectModal.test.tsx b/src/__tests__/components/modals/CreateProjectModal.test.tsx
similarity index 99%
rename from src/__tests__/components/CreateProjectModal.test.tsx
rename to src/__tests__/components/modals/CreateProjectModal.test.tsx
index 2c5a4de6..9d39cc12 100644
--- a/src/__tests__/components/CreateProjectModal.test.tsx
+++ b/src/__tests__/components/modals/CreateProjectModal.test.tsx
@@ -6,7 +6,7 @@ import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import papi from '@papi/frontend';
 import { useLocalizedStrings } from '@papi/frontend/react';
-import { CreateProjectModal } from '../../components/modals/CreateProjectModal';
+import { CreateProjectModal } from '../../../components/modals/CreateProjectModal';
 
 const testProjectId = 'test-project-id';
 
diff --git a/src/__tests__/components/ProjectMetadataModal.test.tsx b/src/__tests__/components/modals/ProjectMetadataModal.test.tsx
similarity index 99%
rename from src/__tests__/components/ProjectMetadataModal.test.tsx
rename to src/__tests__/components/modals/ProjectMetadataModal.test.tsx
index 9bb8d13a..e7cdf146 100644
--- a/src/__tests__/components/ProjectMetadataModal.test.tsx
+++ b/src/__tests__/components/modals/ProjectMetadataModal.test.tsx
@@ -6,7 +6,7 @@ import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { useLocalizedStrings } from '@papi/frontend/react';
 import papi from '@papi/frontend';
-import { ProjectMetadataModal } from '../../components/modals/ProjectMetadataModal';
+import { ProjectMetadataModal } from '../../../components/modals/ProjectMetadataModal';
 
 const mockSendCommand = jest.mocked(papi.commands.sendCommand);
 
diff --git a/src/__tests__/components/ProjectModals.test.tsx b/src/__tests__/components/modals/ProjectModals.test.tsx
similarity index 97%
rename from src/__tests__/components/ProjectModals.test.tsx
rename to src/__tests__/components/modals/ProjectModals.test.tsx
index 18882073..53569f1b 100644
--- a/src/__tests__/components/ProjectModals.test.tsx
+++ b/src/__tests__/components/modals/ProjectModals.test.tsx
@@ -4,10 +4,10 @@
 
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { makeWebViewState } from '../test-helpers';
-import type { ModalState } from '../../components/modals/ProjectModals';
-import ProjectModals from '../../components/modals/ProjectModals';
-import type { InterlinearProjectSummary } from '../../types/interlinear-project-summary';
+import { makeWebViewState } from '../../test-helpers';
+import type { ModalState } from '../../../components/modals/ProjectModals';
+import ProjectModals from '../../../components/modals/ProjectModals';
+import type { InterlinearProjectSummary } from '../../../types/interlinear-project-summary';
 
 /** Minimal project summary used in tests. */
 const MOCK_PROJECT: InterlinearProjectSummary = {
@@ -26,7 +26,7 @@ const MOCK_PROJECT_2: InterlinearProjectSummary = {
   name: 'French Project',
 };
 
-jest.mock('../../components/modals/SelectInterlinearProjectModal', () => ({
+jest.mock('../../../components/modals/SelectInterlinearProjectModal', () => ({
   __esModule: true,
   SelectInterlinearProjectModal: ({
     onSelect,
@@ -66,7 +66,7 @@ jest.mock('../../components/modals/SelectInterlinearProjectModal', () => ({
   ),
 }));
 
-jest.mock('../../components/modals/CreateProjectModal', () => ({
+jest.mock('../../../components/modals/CreateProjectModal', () => ({
   __esModule: true,
   CreateProjectModal: ({
     defaultAnalysisLanguage,
@@ -95,7 +95,7 @@ jest.mock('../../components/modals/CreateProjectModal', () => ({
   ),
 }));
 
-jest.mock('../../components/modals/ProjectMetadataModal', () => ({
+jest.mock('../../../components/modals/ProjectMetadataModal', () => ({
   __esModule: true,
   ProjectMetadataModal: ({
     onClose,
diff --git a/src/__tests__/components/SelectInterlinearProjectModal.test.tsx b/src/__tests__/components/modals/SelectInterlinearProjectModal.test.tsx
similarity index 98%
rename from src/__tests__/components/SelectInterlinearProjectModal.test.tsx
rename to src/__tests__/components/modals/SelectInterlinearProjectModal.test.tsx
index ed4fd2a6..c01d592b 100644
--- a/src/__tests__/components/SelectInterlinearProjectModal.test.tsx
+++ b/src/__tests__/components/modals/SelectInterlinearProjectModal.test.tsx
@@ -6,8 +6,8 @@ import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import papi from '@papi/frontend';
 import { useLocalizedStrings } from '@papi/frontend/react';
-import { SelectInterlinearProjectModal } from '../../components/modals/SelectInterlinearProjectModal';
-import type { InterlinearProjectSummary } from '../../types/interlinear-project-summary';
+import { SelectInterlinearProjectModal } from '../../../components/modals/SelectInterlinearProjectModal';
+import type { InterlinearProjectSummary } from '../../../types/interlinear-project-summary';
 
 const mockSendCommand = jest.mocked(papi.commands.sendCommand);
 
diff --git a/src/__tests__/components/UnlinkPhraseConfirm.test.tsx b/src/__tests__/components/modals/UnlinkPhraseConfirm.test.tsx
similarity index 94%
rename from src/__tests__/components/UnlinkPhraseConfirm.test.tsx
rename to src/__tests__/components/modals/UnlinkPhraseConfirm.test.tsx
index fceac744..458c669d 100644
--- a/src/__tests__/components/UnlinkPhraseConfirm.test.tsx
+++ b/src/__tests__/components/modals/UnlinkPhraseConfirm.test.tsx
@@ -4,7 +4,7 @@
 
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import UnlinkPhraseConfirm from '../../components/modals/UnlinkPhraseConfirm';
+import UnlinkPhraseConfirm from '../../../components/modals/UnlinkPhraseConfirm';
 
 /** Stable mock fns for AnalysisStore phrase dispatch — reset between tests via resetMocks. */
 const mockDeletePhrase = jest.fn();
@@ -14,7 +14,7 @@ const mockUsePhraseDispatch = jest.fn().mockReturnValue({
   deletePhrase: mockDeletePhrase,
 });
 
-jest.mock('../../components/AnalysisStore', () => ({
+jest.mock('../../../components/AnalysisStore', () => ({
   __esModule: true,
   usePhraseDispatch: () => mockUsePhraseDispatch(),
 }));
diff --git a/src/__tests__/components/test-helpers.tsx b/src/__tests__/components/test-helpers.tsx
new file mode 100644
index 00000000..533c9758
--- /dev/null
+++ b/src/__tests__/components/test-helpers.tsx
@@ -0,0 +1,14 @@
+/** @file Shared component-test render helpers. */
+
+import type { ReactNode } from 'react';
+import { AnalysisStoreProvider } from '../../components/AnalysisStore';
+
+/**
+ * Testing Library render options that wrap a subject in `AnalysisStoreProvider` with the default
+ * analysis language ("und") used across component tests.
+ */
+export const withAnalysisStore = {
+  wrapper({ children }: Readonly<{ children: ReactNode }>) {
+    return <AnalysisStoreProvider analysisLanguage="und">{children}</AnalysisStoreProvider>;
+  },
+};
diff --git a/src/__tests__/hooks/useInterlinearizerBookData.test.ts b/src/__tests__/hooks/useInterlinearizerBookData.test.ts
index 2b0b2c4f..7448a269 100644
--- a/src/__tests__/hooks/useInterlinearizerBookData.test.ts
+++ b/src/__tests__/hooks/useInterlinearizerBookData.test.ts
@@ -86,6 +86,15 @@ const TEST_BOOK: Book = {
 
 const GEN_1_1_SRC_REF = { book: 'GEN', chapterNum: 1, verseNum: 1 };
 
+/**
+ * Mocks useProjectSetting to return a specified default state.
+ *
+ * @param defaultState - The value to return as the current setting state.
+ */
+function mockUseProjectSettings(defaultState: string | PlatformError | undefined) {
+  jest.mocked(useProjectSetting).mockReturnValue([defaultState, jest.fn(), jest.fn(), false]);
+}
+
 describe('useInterlinearizerBookData', () => {
   /**
    * Configures useProjectData to return a resolved USJ object so the hook can proceed to
@@ -97,18 +106,12 @@ describe('useInterlinearizerBookData', () => {
     });
   };
 
-  /**
-   * Configures useProjectSetting to return the writing system code 'en' so the hook uses a valid
-   * BCP 47 tag rather than falling back to 'und'.
-   */
-  const setupDefaultProjectSettingMock = () => {
-    jest.mocked(useProjectSetting).mockReturnValue(['en', jest.fn(), jest.fn(), false]);
-  };
-
   beforeEach(() => {
     jest.mocked(logger.error).mockImplementation(() => {});
     setupDefaultProjectDataMock();
-    setupDefaultProjectSettingMock();
+    // Configures useProjectSetting to return the writing system code 'en' so the hook uses a valid
+    // BCP 47 tag rather than falling back to 'und'.
+    mockUseProjectSettings('en');
   });
 
   it('returns isLoading=true and no book when USJ data has not arrived', () => {
@@ -217,7 +220,7 @@ describe('useInterlinearizerBookData', () => {
       message: 'Setting unavailable',
       platformErrorVersion: 1,
     };
-    jest.mocked(useProjectSetting).mockReturnValue([platformError, jest.fn(), jest.fn(), false]);
+    mockUseProjectSettings(platformError);
     jest.mocked(extractBookFromUsj).mockReturnValue(TEST_RAW_BOOK);
     jest.mocked(tokenizeBook).mockReturnValue(TEST_BOOK);
 
@@ -230,7 +233,7 @@ describe('useInterlinearizerBookData', () => {
   });
 
   it('falls back to "und" writing system when useProjectSetting returns empty string', () => {
-    jest.mocked(useProjectSetting).mockReturnValue(['', jest.fn(), jest.fn(), false]);
+    mockUseProjectSettings('');
     jest.mocked(extractBookFromUsj).mockReturnValue(TEST_RAW_BOOK);
     jest.mocked(tokenizeBook).mockReturnValue(TEST_BOOK);
 
@@ -271,7 +274,7 @@ describe('useInterlinearizerBookData', () => {
       message: 'Setting unavailable',
       platformErrorVersion: 1,
     };
-    jest.mocked(useProjectSetting).mockReturnValue([platformError, jest.fn(), jest.fn(), false]);
+    mockUseProjectSettings(platformError);
     jest.mocked(extractBookFromUsj).mockReturnValue(TEST_RAW_BOOK);
 
     const error = new Error('Tokenization failed');
diff --git a/src/__tests__/hooks/useOptimisticBooleanSetting.test.ts b/src/__tests__/hooks/useOptimisticBooleanSetting.test.ts
index 0b3df7d7..e0d8ce41 100644
--- a/src/__tests__/hooks/useOptimisticBooleanSetting.test.ts
+++ b/src/__tests__/hooks/useOptimisticBooleanSetting.test.ts
@@ -5,18 +5,25 @@ import { useProjectSetting } from '@papi/frontend/react';
 import { act, renderHook } from '@testing-library/react';
 import useOptimisticBooleanSetting from '../../hooks/useOptimisticBooleanSetting';
 
-const mockUseProjectSetting = jest.mocked(useProjectSetting);
+/** Mock function for setting project settings. */
+const mockSetSetting = jest.fn();
+
+/**
+ * Mocks useProjectSetting to return a specified default state.
+ *
+ * @param defaultState - The value to return as the current setting state.
+ */
+function mockUseProjectSettings(defaultState: boolean | undefined) {
+  jest.mocked(useProjectSetting).mockReturnValue([defaultState, mockSetSetting, jest.fn(), false]);
+}
 
 const SETTING_KEY = 'interlinearizer.continuousScroll' as const;
 const TIMEOUT_MS = 15_000;
 
 describe('useOptimisticBooleanSetting', () => {
-  let mockSetSetting: jest.Mock;
-
   beforeEach(() => {
     jest.useFakeTimers();
-    mockSetSetting = jest.fn();
-    mockUseProjectSetting.mockReturnValue([false, mockSetSetting, jest.fn(), false]);
+    mockUseProjectSettings(false);
   });
 
   afterEach(() => {
@@ -24,7 +31,7 @@ describe('useOptimisticBooleanSetting', () => {
   });
 
   it('returns the persisted setting value as the initial display value', () => {
-    mockUseProjectSetting.mockReturnValue([true, mockSetSetting, jest.fn(), false]);
+    mockUseProjectSettings(true);
     const { result } = renderHook(() =>
       useOptimisticBooleanSetting('project-1', SETTING_KEY, false),
     );
@@ -32,7 +39,7 @@ describe('useOptimisticBooleanSetting', () => {
   });
 
   it('falls back to defaultValue when the persisted setting is not yet a boolean', () => {
-    mockUseProjectSetting.mockReturnValue([undefined, mockSetSetting, jest.fn(), false]);
+    mockUseProjectSettings(undefined);
     const { result } = renderHook(() =>
       useOptimisticBooleanSetting('project-1', SETTING_KEY, true),
     );
@@ -61,7 +68,7 @@ describe('useOptimisticBooleanSetting', () => {
 
   it('ignores incoming setting updates while the timeout is active', () => {
     // Setting not yet loaded so `setting` starts as non-boolean.
-    mockUseProjectSetting.mockReturnValue([undefined, mockSetSetting, jest.fn(), false]);
+    mockUseProjectSettings(undefined);
     const { result, rerender } = renderHook(() =>
       useOptimisticBooleanSetting('project-1', SETTING_KEY, true),
     );
@@ -72,7 +79,7 @@ describe('useOptimisticBooleanSetting', () => {
     expect(result.current.value).toBe(false);
 
     // Simulate the store returning a conflicting value during the lock period.
-    mockUseProjectSetting.mockReturnValue([true, mockSetSetting, jest.fn(), false]);
+    mockUseProjectSettings(true);
     rerender();
 
     // Value should remain at the optimistically set value.
@@ -81,7 +88,7 @@ describe('useOptimisticBooleanSetting', () => {
 
   it('accepts incoming setting updates after the timeout elapses', () => {
     // Setting not yet loaded so `setting` starts as non-boolean.
-    mockUseProjectSetting.mockReturnValue([undefined, mockSetSetting, jest.fn(), false]);
+    mockUseProjectSettings(undefined);
     const { result, rerender } = renderHook(() =>
       useOptimisticBooleanSetting('project-1', SETTING_KEY, true),
     );
@@ -90,7 +97,7 @@ describe('useOptimisticBooleanSetting', () => {
     act(() => {
       result.current.onChange(false);
     });
-    mockUseProjectSetting.mockReturnValue([true, mockSetSetting, jest.fn(), false]);
+    mockUseProjectSettings(true);
     rerender();
     expect(result.current.value).toBe(false); // Locked to optimistic value.
 
@@ -100,7 +107,7 @@ describe('useOptimisticBooleanSetting', () => {
     });
 
     // The store value (true) should now be accepted when setting changes.
-    mockUseProjectSetting.mockReturnValue([false, mockSetSetting, jest.fn(), false]);
+    mockUseProjectSettings(false);
     rerender();
     expect(result.current.value).toBe(false);
   });
@@ -123,7 +130,7 @@ describe('useOptimisticBooleanSetting', () => {
 
   it('does not accept setting updates until the reset timeout elapses after back-to-back onChange calls', () => {
     // Start with a non-boolean setting so the initial useEffect bails early.
-    mockUseProjectSetting.mockReturnValue([undefined, mockSetSetting, jest.fn(), false]);
+    mockUseProjectSettings(undefined);
     const { result, rerender } = renderHook(() =>
       useOptimisticBooleanSetting('project-1', SETTING_KEY, false),
     );
@@ -143,7 +150,7 @@ describe('useOptimisticBooleanSetting', () => {
       jest.advanceTimersByTime(1_000);
     });
     // Arriving setting is ignored while locked.
-    mockUseProjectSetting.mockReturnValue([false, mockSetSetting, jest.fn(), false]);
+    mockUseProjectSettings(false);
     rerender();
     expect(result.current.value).toBe(true); // locked; update blocked
 
@@ -152,7 +159,7 @@ describe('useOptimisticBooleanSetting', () => {
       jest.advanceTimersByTime(TIMEOUT_MS - 1_000);
     });
     // New setting value (different from the false that arrived during the lock) triggers the effect.
-    mockUseProjectSetting.mockReturnValue([true, mockSetSetting, jest.fn(), false]);
+    mockUseProjectSettings(true);
     rerender();
     expect(result.current.value).toBe(true); // lock released; setting accepted
   });
diff --git a/src/__tests__/interlinearizer.web-view.test.tsx b/src/__tests__/interlinearizer.web-view.test.tsx
index daac793d..b84b0335 100644
--- a/src/__tests__/interlinearizer.web-view.test.tsx
+++ b/src/__tests__/interlinearizer.web-view.test.tsx
@@ -5,6 +5,7 @@
 import type { WebViewProps } from '@papi/core';
 import type { SerializedVerseRef } from '@sillsdev/scripture';
 import { render, screen } from '@testing-library/react';
+import { defaultScrRef } from './test-helpers';
 
 jest.mock('../components/InterlinearizerLoader', () => ({
   __esModule: true,
@@ -25,9 +26,6 @@ require('../interlinearizer.web-view');
 const InterlinearizerWebView = globalThis.webViewComponent;
 if (!InterlinearizerWebView) throw new Error('webViewComponent not loaded');
 
-/** Minimal SerializedVerseRef for hook mock return. */
-const defaultScrRef: SerializedVerseRef = { book: 'GEN', chapterNum: 1, verseNum: 1 };
-
 /** Builds a minimal WebViewProps for tests. */
 function makeProps(projectId?: string, scrRef: SerializedVerseRef = defaultScrRef): WebViewProps {
   return {
diff --git a/src/__tests__/main.test.ts b/src/__tests__/main.test.ts
index e9fe95c6..a7a0f773 100644
--- a/src/__tests__/main.test.ts
+++ b/src/__tests__/main.test.ts
@@ -6,7 +6,8 @@ import papiBackendMock from '@papi/backend';
 import { activate, deactivate } from '@main';
 import type { InterlinearizerOpenOptions } from '@main';
 import * as projectStorage from '../services/projectStorage';
-import { createTestActivationContext } from './test-helpers';
+import { emptyAnalysis } from '../types/empty-factories';
+import { createTestActivationContext, makeStubProject } from './test-helpers';
 
 jest.mock('../services/projectStorage');
 
@@ -520,21 +521,7 @@ describe('main', () => {
 
   describe('interlinearizer.createProject command', () => {
     const mockCreateProject = jest.mocked(projectStorage.createProject);
-    const emptyAnalysis = {
-      segmentAnalyses: [],
-      segmentAnalysisLinks: [],
-      tokenAnalyses: [],
-      tokenAnalysisLinks: [],
-      phraseAnalyses: [],
-      phraseAnalysisLinks: [],
-    };
-    const stubProject = {
-      id: 'new-project-id',
-      createdAt: '2026-01-01T00:00:00.000Z',
-      sourceProjectId: 'src-project',
-      analysisLanguages: ['en'],
-      analysis: emptyAnalysis,
-    };
+    const stubProject = makeStubProject('new-project-id');
 
     it('registers the interlinearizer.createProject command', async () => {
       const context = createTestActivationContext();
@@ -775,21 +762,7 @@ describe('main', () => {
 
   describe('interlinearizer.getProjectsForSource command', () => {
     const mockGetProjectsForSource = jest.mocked(projectStorage.getProjectsForSource);
-    const emptyAnalysis = {
-      segmentAnalyses: [],
-      segmentAnalysisLinks: [],
-      tokenAnalyses: [],
-      tokenAnalysisLinks: [],
-      phraseAnalyses: [],
-      phraseAnalysisLinks: [],
-    };
-    const stubProject = {
-      id: 'proj-id',
-      createdAt: '2026-01-01T00:00:00.000Z',
-      sourceProjectId: 'src-project',
-      analysisLanguages: ['en'],
-      analysis: emptyAnalysis,
-    };
+    const stubProject = makeStubProject('proj-id');
 
     it('registers the interlinearizer.getProjectsForSource command', async () => {
       const context = createTestActivationContext();
@@ -826,21 +799,7 @@ describe('main', () => {
 
   describe('interlinearizer.updateProjectMetadata command', () => {
     const mockUpdateProjectMetadata = jest.mocked(projectStorage.updateProjectMetadata);
-    const emptyAnalysis = {
-      segmentAnalyses: [],
-      segmentAnalysisLinks: [],
-      tokenAnalyses: [],
-      tokenAnalysisLinks: [],
-      phraseAnalyses: [],
-      phraseAnalysisLinks: [],
-    };
-    const stubProject = {
-      id: 'proj-id',
-      createdAt: '2026-01-01T00:00:00.000Z',
-      sourceProjectId: 'src-project',
-      analysisLanguages: ['en'],
-      analysis: emptyAnalysis,
-    };
+    const stubProject = makeStubProject('proj-id');
 
     it('registers the interlinearizer.updateProjectMetadata command', async () => {
       const context = createTestActivationContext();
@@ -915,21 +874,7 @@ describe('main', () => {
 
   describe('interlinearizer.getProject command', () => {
     const mockGetProject = jest.mocked(projectStorage.getProject);
-    const emptyAnalysis = {
-      segmentAnalyses: [],
-      segmentAnalysisLinks: [],
-      tokenAnalyses: [],
-      tokenAnalysisLinks: [],
-      phraseAnalyses: [],
-      phraseAnalysisLinks: [],
-    };
-    const stubProject = {
-      id: 'proj-id',
-      createdAt: '2026-01-01T00:00:00.000Z',
-      sourceProjectId: 'src-project',
-      analysisLanguages: ['en'],
-      analysis: emptyAnalysis,
-    };
+    const stubProject = makeStubProject('proj-id');
 
     /**
      * Activates the extension and returns a typed wrapper around the `interlinearizer.getProject`
@@ -996,12 +941,8 @@ describe('main', () => {
   describe('interlinearizer.saveAnalysis command', () => {
     const mockUpdateAnalysis = jest.mocked(projectStorage.updateAnalysis);
     const stubAnalysis = {
-      segmentAnalyses: [],
-      segmentAnalysisLinks: [],
+      ...emptyAnalysis(),
       tokenAnalyses: [{ id: 'ta-1', surfaceText: 'In', gloss: { en: 'in' } }],
-      tokenAnalysisLinks: [],
-      phraseAnalyses: [],
-      phraseAnalysisLinks: [],
     };
 
     /**
diff --git a/src/__tests__/services/projectStorage.test.ts b/src/__tests__/services/projectStorage.test.ts
index bb3c0e19..fda292ff 100644
--- a/src/__tests__/services/projectStorage.test.ts
+++ b/src/__tests__/services/projectStorage.test.ts
@@ -12,7 +12,8 @@ import {
   updateAnalysis,
   updateProjectMetadata,
 } from '../../services/projectStorage';
-import { createTestActivationContext } from '../test-helpers';
+import { emptyAnalysis } from '../../types/empty-factories';
+import { createTestActivationContext, makeStubProject } from '../test-helpers';
 
 /**
  * Mock implementation of storage methods used in tests. Exposes `__mockReadUserData`,
@@ -50,15 +51,6 @@ const { __mockReadUserData, __mockWriteUserData, __mockDeleteUserData, __mockLog
 
 const token = createTestActivationContext().executionToken;
 
-const EMPTY_ANALYSIS = {
-  segmentAnalyses: [],
-  segmentAnalysisLinks: [],
-  tokenAnalyses: [],
-  tokenAnalysisLinks: [],
-  phraseAnalyses: [],
-  phraseAnalysisLinks: [],
-};
-
 /**
  * Constructs an ENOENT Error that mirrors the error thrown by `papi.storage.readUserData` when a
  * storage key has never been written.
@@ -87,7 +79,7 @@ describe('projectStorage', () => {
         id: '00000000-0000-0000-0000-000000000001',
         sourceProjectId: 'src-proj',
         analysisLanguages: ['en'],
-        analysis: EMPTY_ANALYSIS,
+        analysis: emptyAnalysis(),
       });
       expect(project.createdAt).toMatch(/^\d{4}-\d{2}-\d{2}T/);
     });
@@ -194,13 +186,7 @@ describe('projectStorage', () => {
 
   describe('getProject', () => {
     it('returns the parsed project when the key exists', async () => {
-      const stored = {
-        id: 'abc',
-        createdAt: '2026-01-01T00:00:00.000Z',
-        sourceProjectId: 'src',
-        analysisLanguages: ['fr'],
-        analysis: EMPTY_ANALYSIS,
-      };
+      const stored = { ...makeStubProject('abc'), analysisLanguages: ['fr'] };
       __mockReadUserData.mockResolvedValue(JSON.stringify(stored));
 
       const result = await getProject(token, 'abc');
@@ -228,13 +214,7 @@ describe('projectStorage', () => {
     });
 
     it('returns all projects listed in the index', async () => {
-      const p1 = {
-        id: 'id-1',
-        createdAt: '2026-01-01T00:00:00.000Z',
-        sourceProjectId: 'src',
-        analysisLanguages: ['en'],
-        analysis: EMPTY_ANALYSIS,
-      };
+      const p1 = makeStubProject('id-1');
       const p2 = { ...p1, id: 'id-2' };
       __mockReadUserData
         .mockResolvedValueOnce(JSON.stringify(['id-1', 'id-2']))
@@ -247,13 +227,7 @@ describe('projectStorage', () => {
     });
 
     it('omits projects whose storage keys are missing', async () => {
-      const p1 = {
-        id: 'id-1',
-        createdAt: '2026-01-01T00:00:00.000Z',
-        sourceProjectId: 'src',
-        analysisLanguages: ['en'],
-        analysis: EMPTY_ANALYSIS,
-      };
+      const p1 = makeStubProject('id-1');
       __mockReadUserData
         .mockResolvedValueOnce(JSON.stringify(['id-1', 'id-missing']))
         .mockResolvedValueOnce(JSON.stringify(p1))
@@ -266,13 +240,7 @@ describe('projectStorage', () => {
   });
 
   describe('updateProjectMetadata', () => {
-    const storedProject = {
-      id: 'proj-id',
-      createdAt: '2026-01-01T00:00:00.000Z',
-      sourceProjectId: 'src',
-      analysisLanguages: ['en'],
-      analysis: EMPTY_ANALYSIS,
-    };
+    const storedProject = makeStubProject('proj-id');
 
     it('returns the updated project with the new name and description', async () => {
       __mockReadUserData.mockResolvedValue(JSON.stringify(storedProject));
@@ -444,20 +412,10 @@ describe('projectStorage', () => {
   });
 
   describe('updateAnalysis', () => {
-    const storedProject = {
-      id: 'proj-id',
-      createdAt: '2026-01-01T00:00:00.000Z',
-      sourceProjectId: 'src',
-      analysisLanguages: ['en'],
-      analysis: EMPTY_ANALYSIS,
-    };
+    const storedProject = makeStubProject('proj-id');
     const newAnalysis = {
-      segmentAnalyses: [],
-      segmentAnalysisLinks: [],
+      ...emptyAnalysis(),
       tokenAnalyses: [{ id: 'ta-1', surfaceText: 'In', gloss: { en: 'in' } }],
-      tokenAnalysisLinks: [],
-      phraseAnalyses: [],
-      phraseAnalysisLinks: [],
     };
 
     it('returns the updated project with the new analysis', async () => {
@@ -497,18 +455,12 @@ describe('projectStorage', () => {
   });
 
   describe('getProjectsForSource', () => {
-    const baseProject = {
-      id: 'id-1',
-      createdAt: '2026-01-01T00:00:00.000Z',
-      sourceProjectId: 'src-a',
-      analysisLanguages: ['en'],
-      analysis: EMPTY_ANALYSIS,
-    };
+    const baseProject = { ...makeStubProject('id-1'), sourceProjectId: 'src-a' };
 
     it('returns only projects whose sourceProjectId matches', async () => {
-      const p1 = { ...baseProject, id: 'id-1', sourceProjectId: 'src-a' };
+      const p1 = { ...baseProject, id: 'id-1' };
       const p2 = { ...baseProject, id: 'id-2', sourceProjectId: 'src-b' };
-      const p3 = { ...baseProject, id: 'id-3', sourceProjectId: 'src-a' };
+      const p3 = { ...baseProject, id: 'id-3' };
       __mockReadUserData
         .mockResolvedValueOnce(JSON.stringify(['id-1', 'id-2', 'id-3']))
         .mockResolvedValueOnce(JSON.stringify(p1))
diff --git a/src/__tests__/store/analysisSlice.test.ts b/src/__tests__/store/analysisSlice.test.ts
index bfd2d476..e11a6daa 100644
--- a/src/__tests__/store/analysisSlice.test.ts
+++ b/src/__tests__/store/analysisSlice.test.ts
@@ -372,6 +372,37 @@ describe('mergePhrases', () => {
     expect(phraseAnalysisLinks[0].tokens).toStrictEqual(mergedTokens);
   });
 
+  it('no-ops entirely when absorbedPhraseId equals targetPhraseId', () => {
+    const phrase = makePhraseLink('phrase-1', ['tok-a']);
+    const store = createAnalysisStore({
+      analysis: {
+        analysis: {
+          ...defaultAnalysis,
+          phraseAnalyses: [{ id: 'phrase-1', surfaceText: 'A' }],
+          phraseAnalysisLinks: [phrase],
+        },
+        analysisLanguage: 'und',
+      },
+    });
+
+    store.dispatch(
+      mergePhrases({
+        targetPhraseId: 'phrase-1',
+        tokens: [
+          { tokenRef: 'tok-a', surfaceText: 'A' },
+          { tokenRef: 'tok-b', surfaceText: 'B' },
+        ],
+        absorbedPhraseId: 'phrase-1',
+      }),
+    );
+
+    const { phraseAnalyses, phraseAnalysisLinks } = store.getState().analysis.analysis;
+    expect(phraseAnalyses).toHaveLength(1);
+    expect(phraseAnalyses[0].surfaceText).toBe('A');
+    expect(phraseAnalysisLinks).toHaveLength(1);
+    expect(phraseAnalysisLinks[0].tokens).toHaveLength(1);
+  });
+
   it('no-ops on the target updates when the target phrase id is not found', () => {
     const absorbed = makePhraseLink('phrase-2', ['tok-b']);
     const store = createAnalysisStore({
diff --git a/src/__tests__/test-helpers.ts b/src/__tests__/test-helpers.ts
index 8138761c..d1dd5fe2 100644
--- a/src/__tests__/test-helpers.ts
+++ b/src/__tests__/test-helpers.ts
@@ -5,9 +5,10 @@
  */
 import type { SerializedVerseRef } from '@sillsdev/scripture';
 import type { ExecutionActivationContext } from '@papi/core';
-import type { Book, PhraseAnalysisLink } from 'interlinearizer';
+import type { Book, InterlinearProject, PhraseAnalysisLink, Token } from 'interlinearizer';
 import { UnsubscriberAsyncList } from 'platform-bible-utils';
 import type { PhraseStripContextValue } from '../components/PhraseStripContext';
+import { emptyAnalysis } from '../types/empty-factories';
 
 /** Minimal execution token-shaped object for tests (structural match for ExecutionToken). */
 const mockExecutionToken: {
@@ -144,6 +145,36 @@ export function createTestActivationContext(): ExecutionActivationContext {
   };
 }
 
+/**
+ * Builds a minimal `InterlinearProject` test fixture with stable defaults used across command
+ * tests.
+ *
+ * @param id - Project ID override for tests that need a specific identifier.
+ * @returns A project with fixed metadata and a fresh empty analysis object.
+ */
+export function makeStubProject(id = 'proj-id'): InterlinearProject {
+  return {
+    id,
+    createdAt: '2026-01-01T00:00:00.000Z',
+    sourceProjectId: 'src-project',
+    analysisLanguages: ['en'],
+    analysis: emptyAnalysis(),
+  };
+}
+
+/**
+ * Builds a minimal word token for use in component tests. When `surfaceText` is omitted it defaults
+ * to `ref`, which is appropriate for tests that only need a syntactically valid token and do not
+ * assert on surface text independently.
+ *
+ * @param ref - Token reference string.
+ * @param surfaceText - Display text; defaults to `ref` when omitted.
+ * @returns A word token with the given ref and surface text.
+ */
+export function makeWordToken(ref: string, surfaceText = ref): Token & { type: 'word' } {
+  return { ref, surfaceText, writingSystem: 'en', type: 'word', charStart: 0, charEnd: 1 };
+}
+
 /**
  * Builds an approved `PhraseAnalysisLink` fixture for unit tests.
  *
diff --git a/src/__tests__/utils/phrase-arc.test.ts b/src/__tests__/utils/phrase-arc.test.ts
index 5fa65327..ae35e60b 100644
--- a/src/__tests__/utils/phrase-arc.test.ts
+++ b/src/__tests__/utils/phrase-arc.test.ts
@@ -808,9 +808,9 @@ describe('computeAllArcPaths', () => {
 // ---------------------------------------------------------------------------
 
 describe('getArcStrokeProps', () => {
-  const dimmed = { stroke: 'var(--border)', strokeOpacity: 0.8, strokeWidth: 2 };
+  const dimmed = { stroke: 'var(--border)', strokeOpacity: 1, strokeWidth: 2 };
   const hovered = { stroke: 'var(--foreground)', strokeOpacity: 0.55, strokeWidth: 2 };
-  const highlighted = { stroke: 'var(--foreground)', strokeOpacity: 1, strokeWidth: 2 };
+  const highlighted = { stroke: 'var(--foreground)', strokeOpacity: 0.6, strokeWidth: 2 };
   const destructive = {
     stroke: 'var(--destructive)',
     strokeOpacity: 1,
@@ -825,15 +825,15 @@ describe('getArcStrokeProps', () => {
     expect(getArcStrokeProps({ kind: 'view' }, 'p1', 'p1', undefined)).toEqual(hovered);
   });
 
-  it('uses full white for the focused phrase arc in view mode', () => {
+  it('uses foreground at 60% opacity for the focused phrase arc in view mode', () => {
     expect(getArcStrokeProps({ kind: 'view' }, 'p1', undefined, 'p1')).toEqual(highlighted);
   });
 
-  it('uses full white for the focused phrase even when it is also hovered', () => {
+  it('uses foreground at 60% opacity for the focused phrase even when it is also hovered', () => {
     expect(getArcStrokeProps({ kind: 'view' }, 'p1', 'p1', 'p1')).toEqual(highlighted);
   });
 
-  it('whitens the edited phrase arc in edit mode regardless of hover', () => {
+  it('uses foreground at 60% opacity for the edited phrase arc in edit mode regardless of hover', () => {
     expect(
       getArcStrokeProps(
         { kind: 'edit', phraseId: 'p1', originalTokens: [] },
diff --git a/src/__tests__/utils/token-layout.test.ts b/src/__tests__/utils/token-layout.test.ts
index ef520b87..1e3cac63 100644
--- a/src/__tests__/utils/token-layout.test.ts
+++ b/src/__tests__/utils/token-layout.test.ts
@@ -2,13 +2,14 @@
 /// <reference types="jest" />
 
 import type { Token } from 'interlinearizer';
+import { emptyFocusContext } from '../../types/empty-factories';
+import type { FocusContext } from '../../types/token-layout';
 import {
   resolveFocusContext,
   resolveSlotFocus,
   groupTokens,
   buildRenderUnits,
   NO_SLOT_FOCUS,
-  type FocusContext,
 } from '../../utils/token-layout';
 import { makePhraseLink } from '../test-helpers';
 
@@ -105,14 +106,7 @@ describe('resolveSlotFocus', () => {
     focusedSegmentId: string | undefined,
     overrides: Partial<FocusContext> = {},
   ): FocusContext {
-    return {
-      focusedToken: undefined,
-      focusedPhraseLink: undefined,
-      focusedFreeToken: undefined,
-      focusedSegmentId,
-      focusedPhraseId: undefined,
-      ...overrides,
-    };
+    return { ...emptyFocusContext(), focusedSegmentId, ...overrides };
   }
 
   it('marks isSameSegmentAsFocus true when all three segment ids agree', () => {
@@ -324,4 +318,39 @@ describe('buildRenderUnits', () => {
     const allPunctuation = allSlots.flatMap((u) => (u.kind === 'slot' ? u.slot.punctuation : []));
     expect(allPunctuation).toHaveLength(0);
   });
+
+  it('routes punctuation after the last token of a group into the following inter-group slot, not punctuationBetween', () => {
+    // Crash scenario: [A, B] (phrase group 1), punct, [C] (phrase group 2).
+    // After processing B (last token of group 1), pendingIntraGroup must be cleared so the
+    // punctuation is routed into the inter-group LinkSlot, not into an out-of-bounds
+    // punctuationBetween index.
+    const a = mkWord('tok-a');
+    const b = mkWord('tok-b');
+    const punct = mkPunct('p1', ',');
+    const c = mkWord('tok-c');
+    const link1 = makePhraseLink('ph1', ['tok-a', 'tok-b']);
+    const link2 = makePhraseLink('ph2', ['tok-c']);
+    const groups = groupTokens(
+      [a, b, punct, c],
+      new Map([
+        ['tok-a', link1],
+        ['tok-b', link1],
+        ['tok-c', link2],
+      ]),
+    );
+    // Must not throw (was crashing with "Cannot read properties of undefined" before the fix).
+    const units = buildRenderUnits([a, b, punct, c], groups);
+
+    // The punctuation must appear in the inter-group slot between group 1 and group 2.
+    const interGroupSlot = units.find(
+      (u) => u.kind === 'slot' && u.slot.prevGroup === groups[0] && u.slot.nextGroup === groups[1],
+    );
+    expect(interGroupSlot?.kind).toBe('slot');
+    if (interGroupSlot?.kind === 'slot') {
+      expect(interGroupSlot.slot.punctuation.map((t) => t.ref)).toEqual(['p1']);
+    }
+
+    // The punctuation must NOT appear in group 1's punctuationBetween.
+    expect(groups[0].punctuationBetween.flat()).toHaveLength(0);
+  });
 });
diff --git a/src/components/ContinuousView.tsx b/src/components/ContinuousView.tsx
index c3fd0407..c9c727ce 100644
--- a/src/components/ContinuousView.tsx
+++ b/src/components/ContinuousView.tsx
@@ -5,17 +5,12 @@ import type { Dispatch, SetStateAction } from 'react';
 import { splitPhraseAtBoundary } from '../utils/phrase-arc';
 import { usePhraseDispatch, usePhraseLinkByIdMap, usePhraseLinkMap } from './AnalysisStore';
 import type { PhraseMode } from '../types/phrase-mode';
-import { isWordToken } from '../types/typeGuards';
+import { isWordToken } from '../types/type-guards';
 import { PhraseStripProvider } from './PhraseStripContext';
 import type { PhraseStripContextValue } from './PhraseStripContext';
 import { PhraseStrip, LINK_SLOT_TRANSITION_MS, type StripItem } from './PhraseStripParts';
-import {
-  buildRenderUnits,
-  groupTokens,
-  resolveFocusContext,
-  type LinkSlot,
-  type TokenGroup,
-} from '../utils/token-layout';
+import type { LinkSlot, TokenGroup } from '../types/token-layout';
+import { buildRenderUnits, groupTokens, resolveFocusContext } from '../utils/token-layout';
 import { useArcPaths } from '../hooks/useArcPaths';
 import { usePhraseHoverState } from '../hooks/usePhraseHoverState';
 import MemoizedArcOverlay from './ArcOverlay';
@@ -531,15 +526,15 @@ export default function ContinuousView({
     };
   }, [focusPhraseIndex, commitPendingActiveSegment]);
 
-  // Keep the focused group pinned dead-center across the deferred inactive-link relayout. When
+  // Keep the focused group pinned dead-center after the deferred active-segment flip. When
   // `committedActiveSegmentId` flips (after an internal-nav scroll settles), inactive link icons
-  // slide open/closed over `LINK_SLOT_TRANSITION_MS`, continuously shifting every box around the
-  // center. A single re-center would only fix the first frame; the focused phrase would then drift
-  // as the slots keep animating. So we re-center every frame for the whole transition: a `rAF` loop
-  // re-anchors the focused group until the animation completes, canceling the shift at the center on
-  // every painted frame. The first run is skipped because the initial center is established by the
-  // scroll effect's instant jump. A `useLayoutEffect` seeds the loop so the very first re-center
-  // lands before paint (no initial flash), then `rAF` carries it through the animation.
+  // fade in/out over `LINK_SLOT_TRANSITION_MS`. Because they are hidden via `opacity: 0` their
+  // layout space is preserved, so boxes do not shift — but any residual sub-pixel drift from the
+  // preceding smooth scroll is corrected by re-centering once before paint. The rAF loop holds the
+  // group centered for the full fade duration as a conservative guard against any future layout
+  // changes that could re-introduce drift. The first run is skipped because the initial center is
+  // established by the scroll effect's instant jump. A `useLayoutEffect` seeds the loop so the very
+  // first re-center lands before paint (no initial flash), then `rAF` carries it through the fade.
   const skipActiveSegmentRecenterRef = useRef(true);
   useLayoutEffect(() => {
     if (skipActiveSegmentRecenterRef.current) {
@@ -566,33 +561,21 @@ export default function ContinuousView({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [committedActiveSegmentId]);
 
-  // Re-center the focused group when a view option toggles. Hiding/showing link buttons and phrase
-  // controls changes the strip's layout, so the previously-centered group drifts off-center; snap it
-  // back into view. Toggling `hideInactiveLinkButtons` collapses/expands the out-of-segment link
-  // slots via a `max-width`/`opacity` transition over `LINK_SLOT_TRANSITION_MS`, continuously
-  // shifting every box around the center for the whole animation. A single re-center would only fix
-  // the first frame; the focused phrase would then drift as the slots keep animating. So we re-center
-  // every frame until the transition completes, canceling the shift at the center on every painted
-  // frame — mirroring the active-segment-flip re-anchor loop above.
+  // Re-center the focused group when a view option toggles. Toggling `simplifyPhrases` changes
+  // the strip's layout, so the previously-centered group may drift off-center; snap it back into
+  // view. `hideInactiveLinkButtons` is excluded: inactive link slots now reserve their space even
+  // when hidden (`opacity: 0`; clickability is guarded at the button level), so toggling it does
+  // not shift the layout.
   useEffect(() => {
-    /** Re-centers the focused group; called each `rAF` until the deadline. */
-    const recenter = () => {
-      phraseRefs.current[focusPhraseIndex]?.scrollIntoView({
-        behavior: 'auto',
-        block: 'nearest',
-        inline: 'center',
-      });
-    };
-    const deadline = performance.now() + LINK_SLOT_TRANSITION_MS;
-    let rafId = requestAnimationFrame(function recenterFrame() {
-      recenter();
-      if (performance.now() < deadline) rafId = requestAnimationFrame(recenterFrame);
+    phraseRefs.current[focusPhraseIndex]?.scrollIntoView({
+      behavior: 'auto',
+      block: 'nearest',
+      inline: 'center',
     });
-    return () => cancelAnimationFrame(rafId);
     // focusPhraseIndex is intentionally excluded: it has its own scroll effect above. This effect
     // only re-centers in response to layout-affecting option toggles.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [hideInactiveLinkButtons, simplifyPhrases]);
+  }, [simplifyPhrases]);
 
   // When entering edit or confirm-unlink mode, smooth-scroll to the first group of the active
   // phrase by notifying the parent of the new focused token. Scroll then follows automatically
@@ -722,7 +705,7 @@ export default function ContinuousView({
     arcContainerRef,
     true,
     hasRealPhraseInRenderWindow,
-    [renderWindowGroups, phraseMode, committedActiveSegmentId, hideInactiveLinkButtons],
+    [renderWindowGroups, phraseMode, committedActiveSegmentId],
   );
 
   /**
diff --git a/src/components/Interlinearizer.tsx b/src/components/Interlinearizer.tsx
index 5c93a71c..db596c32 100644
--- a/src/components/Interlinearizer.tsx
+++ b/src/components/Interlinearizer.tsx
@@ -7,7 +7,7 @@ import { AnalysisStoreProvider, usePhraseDispatch } from './AnalysisStore';
 import ContinuousView from './ContinuousView';
 import EditPhraseControls from './controls/EditPhraseControls';
 import type { PhraseMode } from '../types/phrase-mode';
-import { isWordToken } from '../types/typeGuards';
+import { isWordToken } from '../types/type-guards';
 import MemoizedSegmentView from './SegmentView';
 import UnlinkPhraseConfirm from './modals/UnlinkPhraseConfirm';
 
diff --git a/src/components/PhraseStripContext.tsx b/src/components/PhraseStripContext.tsx
index 6e59d079..d9bc5ad3 100644
--- a/src/components/PhraseStripContext.tsx
+++ b/src/components/PhraseStripContext.tsx
@@ -65,10 +65,7 @@ export type PhraseStripContextValue = Readonly<{
    * verse in both strips.
    */
   activeSegmentId: string | undefined;
-  /**
-   * Tooltip shown on link buttons that are disabled because they are outside the currently focused
-   * segment. Explains that cross-segment phrases are not yet supported.
-   */
+  /** Tooltip shown on disabled link buttons because they are outside the currently focused segment. */
   crossSegmentLinkTooltip: string;
   /**
    * When `true`, the sliding-door transition on link-slot wrappers is suppressed (duration set to
diff --git a/src/components/PhraseStripParts.tsx b/src/components/PhraseStripParts.tsx
index 73eb497a..e1efc91a 100644
--- a/src/components/PhraseStripParts.tsx
+++ b/src/components/PhraseStripParts.tsx
@@ -5,17 +5,13 @@ import type { PhraseMode } from '../types/phrase-mode';
 import { usePhraseStripContext } from './PhraseStripContext';
 import { InertTokenChip } from './TokenChip';
 import MemoizedTokenLinkIcon from './TokenLinkIcon';
-import {
-  resolveSlotFocus,
-  type FocusContext,
-  type LinkSlot,
-  type TokenGroup,
-} from '../utils/token-layout';
+import type { FocusContext, LinkSlot, TokenGroup } from '../types/token-layout';
+import { resolveSlotFocus } from '../utils/token-layout';
 
 /**
- * Duration, in milliseconds, of the link-slot sliding-door (`max-width` / `opacity`) transition.
- * Exported so `ContinuousView` can re-center the focused phrase for exactly this long while the
- * slots animate open/closed, keeping it pinned dead-center as the layout shifts around it.
+ * Duration, in milliseconds, of the link-slot opacity fade transition. Exported so `ContinuousView`
+ * can re-center the focused phrase for exactly this long after `committedActiveSegmentId` flips,
+ * keeping it anchored while the fade runs.
  */
 export const LINK_SLOT_TRANSITION_MS = 200;
 
@@ -95,13 +91,15 @@ export function PhraseSlot({
     >
       {hasLinkableNeighbors && (
         <span
-          className="tw:overflow-hidden tw:transition-[max-width,opacity] tw:ease-in-out"
+          aria-hidden={suppressLinkIcon || undefined}
+          className="tw:transition-opacity tw:ease-in-out"
           style={{
-            transitionDuration: skipLinkTransition ? '0ms' : `${LINK_SLOT_TRANSITION_MS}ms`,
-            maxWidth: suppressLinkIcon ? '0' : '2rem',
+            display: 'inline-flex',
+            minHeight: '1rem',
             opacity: suppressLinkIcon ? 0 : 1,
-            pointerEvents: suppressLinkIcon ? 'none' : undefined,
             overflowAnchor: 'none',
+            pointerEvents: suppressLinkIcon ? 'none' : undefined,
+            transitionDuration: skipLinkTransition ? '0ms' : `${LINK_SLOT_TRANSITION_MS}ms`,
           }}
         >
           <MemoizedTokenLinkIcon
diff --git a/src/components/SegmentView.tsx b/src/components/SegmentView.tsx
index 7799f907..f83e18e5 100644
--- a/src/components/SegmentView.tsx
+++ b/src/components/SegmentView.tsx
@@ -2,21 +2,16 @@ import { useLocalizedStrings } from '@papi/frontend/react';
 import type { ScriptureRef, Segment, Token } from 'interlinearizer';
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import type { Dispatch, MouseEvent, SetStateAction } from 'react';
-import { splitPhraseAtBoundary } from '../utils/phrase-arc';
-import { usePhraseDispatch, usePhraseLinkByIdMap, usePhraseLinkMap } from './AnalysisStore';
-import type { PhraseMode } from '../types/phrase-mode';
-import { PhraseStripProvider } from './PhraseStripContext';
-import type { PhraseStripContextValue } from './PhraseStripContext';
-import { PhraseStrip, LINK_SLOT_TRANSITION_MS, type StripItem } from './PhraseStripParts';
-import {
-  buildRenderUnits,
-  groupTokens,
-  resolveFocusContext,
-  type RenderUnit,
-} from '../utils/token-layout';
 import { useArcPaths } from '../hooks/useArcPaths';
 import { usePhraseHoverState } from '../hooks/usePhraseHoverState';
+import type { PhraseMode } from '../types/phrase-mode';
+import type { RenderUnit } from '../types/token-layout';
+import { splitPhraseAtBoundary } from '../utils/phrase-arc';
+import { buildRenderUnits, groupTokens, resolveFocusContext } from '../utils/token-layout';
+import { usePhraseDispatch, usePhraseLinkByIdMap, usePhraseLinkMap } from './AnalysisStore';
 import MemoizedArcOverlay from './ArcOverlay';
+import { type PhraseStripContextValue, PhraseStripProvider } from './PhraseStripContext';
+import { PhraseStrip, type StripItem } from './PhraseStripParts';
 
 /**
  * The two display modes for {@link SegmentView}.
@@ -201,46 +196,15 @@ export function SegmentView({
   const tokenRowRef = useRef<HTMLSpanElement | null>(null);
 
   /**
-   * `false` until just after the first paint, then `true`. Gates the link-slot open/close
-   * transition: the initial layout must snap to its final width before paint (animating from
-   * collapsed on mount would flash), but every later flip of `isActive` / `hideInactiveLinkButtons`
-   * should animate. Animating those flips is what fixes the mis-selection bug — when a click on an
-   * inactive segment flips it active, the inter-phrase slots slide open over
-   * `LINK_SLOT_TRANSITION_MS` instead of snapping, so the bubbled click still resolves against the
-   * pre-reflow layout and lands on the phrase the user aimed at rather than whatever instantly
-   * shifted under the pointer.
+   * `false` until just after the first paint, then `true`. Gates the link-slot fade transition: the
+   * initial visibility state must snap into place before paint (fading in on mount would flash),
+   * but every later flip of `isActive` / `hideInactiveLinkButtons` should animate.
    */
   const [hasMounted, setHasMounted] = useState(false);
   useEffect(() => {
     setHasMounted(true);
   }, []);
 
-  /**
-   * Bumped on each animation frame while the link slots are sliding open/closed, then fed into the
-   * arc re-measure deps below. When `isActive` or `hideInactiveLinkButtons` flips, the inter-phrase
-   * slots animate their width over `LINK_SLOT_TRANSITION_MS`, continuously shifting the token
-   * boxes; a discontiguous phrase's arc endpoints move with them. The arc `ResizeObserver` only
-   * fires when the container's own box changes (e.g. a wrap), so a pure horizontal shift within a
-   * row would leave the arcs lagging the tokens for the whole transition. Re-measuring every frame
-   * keeps the arcs pinned to their runs throughout the slide — mirroring ContinuousView's re-center
-   * loop.
-   */
-  const [slotAnimationTick, setSlotAnimationTick] = useState(0);
-  const skipSlotAnimationRef = useRef(true);
-  useEffect(() => {
-    // Skip the first run: the initial layout snaps (skipLinkTransition), so there's nothing sliding.
-    if (skipSlotAnimationRef.current) {
-      skipSlotAnimationRef.current = false;
-      return undefined;
-    }
-    const deadline = performance.now() + LINK_SLOT_TRANSITION_MS;
-    let rafId = requestAnimationFrame(function tick() {
-      setSlotAnimationTick((n) => n + 1);
-      if (performance.now() < deadline) rafId = requestAnimationFrame(tick);
-    });
-    return () => cancelAnimationFrame(rafId);
-  }, [isActive, hideInactiveLinkButtons]);
-
   /**
    * Ref to the outer `tw:relative tw:overflow-visible` div that is both the SVG parent and the arc
    * measurement container. Using this element (rather than the inner token-row span) aligns the
@@ -419,11 +383,11 @@ export function SegmentView({
    * background handler must not also fire and override that focus with the segment's first phrase —
    * which was most visible when clicking an out-of-segment phrase fragment. The `[data-link-slot]`
    * case is the inter-phrase link slot: when its link button is visible the button absorbs the
-   * click, but when `hideInactiveLinkButtons` collapses the button to zero width the slot becomes
-   * an empty clickable gap between phrases. Treating it as background was the bug where clicking
-   * near a phrase in an inactive segment (buttons hidden) snapped focus to the segment's first
-   * phrase; ignoring it leaves the click a no-op, matching the buttons-visible behavior. Everything
-   * else — padding, arc gutters, empty wrap space — focuses the first phrase.
+   * click, but when `hideInactiveLinkButtons` hides the button in place the slot becomes an empty
+   * clickable gap between phrases. Treating it as background was the bug where clicking near a
+   * phrase in an inactive segment (buttons hidden) snapped focus to the segment's first phrase;
+   * ignoring it leaves the click a no-op, matching the buttons-visible behavior. Everything else —
+   * padding, arc gutters, empty wrap space — focuses the first phrase.
    *
    * @param event - The click event on the segment container.
    */
@@ -457,7 +421,6 @@ export function SegmentView({
     displayMode,
     isActive,
     hideInactiveLinkButtons,
-    slotAnimationTick,
   ]);
 
   if (displayMode === 'baseline-text') {
diff --git a/src/components/TokenLinkIcon.tsx b/src/components/TokenLinkIcon.tsx
index 609d0419..dd445516 100644
--- a/src/components/TokenLinkIcon.tsx
+++ b/src/components/TokenLinkIcon.tsx
@@ -4,8 +4,8 @@ import { Link2, Link2Off } from 'lucide-react';
 import { memo, useCallback } from 'react';
 import { usePhraseDispatch } from './AnalysisStore';
 import { usePhraseStripContext } from './PhraseStripContext';
+import type { SlotFocusInfo } from '../types/token-layout';
 import { computeSplitFreeRefs, sortByDocOrder, splitPhraseAtBoundary } from '../utils/phrase-arc';
-import type { SlotFocusInfo } from '../utils/token-layout';
 
 /** Props for {@link TokenLinkIcon}. */
 type TokenLinkIconProps = Readonly<{
@@ -314,7 +314,7 @@ export function TokenLinkIcon({
   return (
     <button
       aria-label="Link tokens"
-      className={`tw:inline-flex tw:items-center tw:justify-center tw:rounded tw:p-0.5 ${isActive ? 'tw:text-muted-foreground tw:hover:text-foreground' : 'tw:text-muted-foreground/50 tw:cursor-default'}`}
+      className={`tw:inline-flex tw:items-center tw:justify-center tw:rounded tw:p-0.5 ${isActive ? 'tw:text-foreground/60 tw:hover:text-foreground' : 'tw:text-foreground/20 tw:cursor-default'}`}
       data-testid="token-link-btn"
       disabled={linkDisabled}
       tabIndex={-1}
diff --git a/src/components/modals/CreateProjectModal.tsx b/src/components/modals/CreateProjectModal.tsx
index c09567b7..0fee76d0 100644
--- a/src/components/modals/CreateProjectModal.tsx
+++ b/src/components/modals/CreateProjectModal.tsx
@@ -3,7 +3,7 @@ import { useLocalizedStrings } from '@papi/frontend/react';
 import { Button } from 'platform-bible-react';
 import { useState, useCallback, useRef } from 'react';
 import type { InterlinearProjectSummary } from '../../types/interlinear-project-summary';
-import { isInterlinearProjectSummary } from '../../types/typeGuards';
+import { isInterlinearProjectSummary } from '../../types/type-guards';
 
 /** Localized string keys used by {@link CreateProjectModal}. */
 const CREATE_PROJECT_MODAL_STRING_KEYS: `%${string}%`[] = [
diff --git a/src/components/modals/SelectInterlinearProjectModal.tsx b/src/components/modals/SelectInterlinearProjectModal.tsx
index 8b5d459b..0f4bbafa 100644
--- a/src/components/modals/SelectInterlinearProjectModal.tsx
+++ b/src/components/modals/SelectInterlinearProjectModal.tsx
@@ -4,7 +4,7 @@ import { Info } from 'lucide-react';
 import { Button } from 'platform-bible-react';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import type { InterlinearProjectSummary } from '../../types/interlinear-project-summary';
-import { isInterlinearProjectSummary } from '../../types/typeGuards';
+import { isInterlinearProjectSummary } from '../../types/type-guards';
 
 /** Localized string keys used by {@link SelectInterlinearProjectModal}. */
 const SELECT_INTERLINEAR_PROJECT_STRING_KEYS: `%${string}%`[] = [
diff --git a/src/main.ts b/src/main.ts
index c3316ac0..4b9798df 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -10,7 +10,7 @@ import type {
 import interlinearizerReact from './interlinearizer.web-view?inline';
 import interlinearizerStyles from './interlinearizer.web-view.scss?inline';
 import * as projectStorage from './services/projectStorage';
-import { isTextAnalysis } from './types/typeGuards';
+import { isTextAnalysis } from './types/type-guards';
 
 // #region WebView provider
 
diff --git a/src/services/projectStorage.ts b/src/services/projectStorage.ts
index 0a3c6c70..f3cc79aa 100644
--- a/src/services/projectStorage.ts
+++ b/src/services/projectStorage.ts
@@ -1,6 +1,7 @@
 import papi, { logger } from '@papi/backend';
 import type { ExecutionToken } from '@papi/core';
 import type { InterlinearProject, TextAnalysis } from 'interlinearizer';
+import { emptyAnalysis } from '../types/empty-factories';
 
 const PROJECT_IDS_KEY = 'projectIds';
 
@@ -76,22 +77,6 @@ function isNotFound(e: unknown): boolean {
   return !!e && typeof e === 'object' && 'code' in e && e.code === 'ENOENT';
 }
 
-/**
- * Returns a `TextAnalysis` with empty collections for every analysis and link array.
- *
- * @returns A new, empty `TextAnalysis` object.
- */
-function emptyAnalysis(): TextAnalysis {
-  return {
-    segmentAnalyses: [],
-    segmentAnalysisLinks: [],
-    tokenAnalyses: [],
-    tokenAnalysisLinks: [],
-    phraseAnalyses: [],
-    phraseAnalysisLinks: [],
-  };
-}
-
 /**
  * Reads the stored list of project IDs.
  *
diff --git a/src/store/analysisSlice.ts b/src/store/analysisSlice.ts
index 4e51286c..505284b0 100644
--- a/src/store/analysisSlice.ts
+++ b/src/store/analysisSlice.ts
@@ -7,6 +7,7 @@ import type {
   TokenAnalysisLink,
   TokenSnapshot,
 } from 'interlinearizer';
+import { emptyAnalysis } from '../types/empty-factories';
 
 // #region Types
 
@@ -79,14 +80,7 @@ interface WritePhraseGlossPayload {
 // #region Default state
 
 /** Empty `TextAnalysis` used when no `initialAnalysis` is provided to the store. */
-export const defaultAnalysis: TextAnalysis = {
-  segmentAnalyses: [],
-  segmentAnalysisLinks: [],
-  tokenAnalyses: [],
-  tokenAnalysisLinks: [],
-  phraseAnalyses: [],
-  phraseAnalysisLinks: [],
-};
+export const defaultAnalysis: TextAnalysis = emptyAnalysis();
 
 /** Default `AnalysisState` used as the Redux initial state. */
 export const defaultState: AnalysisState = {
@@ -246,11 +240,16 @@ const analysisSlice = createSlice({
      * `deletePhrase` were dispatched separately — where the neighbor's tokens briefly existed in
      * two phrases at once, which a save between the two dispatches could persist.
      *
+     * No-ops when `absorbedPhraseId === targetPhraseId` to prevent the update from being
+     * immediately undone by the delete.
+     *
      * @param state - Current slice state (Immer draft).
      * @param action - Action carrying the `MergePhrasesPayload`.
      */
     mergePhrases(state, action: PayloadAction<MergePhrasesPayload>) {
       const { targetPhraseId, tokens, absorbedPhraseId } = action.payload;
+      if (absorbedPhraseId !== undefined && absorbedPhraseId === targetPhraseId) return;
+
       const link = state.analysis.phraseAnalysisLinks.find((l) => l.analysisId === targetPhraseId);
       if (link) link.tokens = tokens;
       const analysis = state.analysis.phraseAnalyses.find((pa) => pa.id === targetPhraseId);
diff --git a/src/tailwind.css b/src/tailwind.css
index 39ba1113..45b59f7b 100644
--- a/src/tailwind.css
+++ b/src/tailwind.css
@@ -104,8 +104,8 @@
 
 @utility phrase-focused {
   --phrase-stroke: var(--foreground);
-  --phrase-stroke-opacity: 1;
-  @apply tw:border-foreground tw:bg-muted/30;
+  --phrase-stroke-opacity: 0.6;
+  @apply tw:border-foreground/60 tw:bg-muted/30;
 }
 
 @utility phrase-hovered {
@@ -116,8 +116,8 @@
 
 @utility phrase-dimmed {
   --phrase-stroke: var(--border);
-  --phrase-stroke-opacity: 0.8;
-  @apply tw:border-border/80 tw:bg-muted/20;
+  --phrase-stroke-opacity: 1;
+  @apply tw:border-border tw:bg-muted/20;
 }
 
 @utility phrase-destructive {
diff --git a/src/types/empty-factories.ts b/src/types/empty-factories.ts
new file mode 100644
index 00000000..e385d5f6
--- /dev/null
+++ b/src/types/empty-factories.ts
@@ -0,0 +1,39 @@
+/**
+ * @file Factory functions that return zero-value instances of core types, giving each caller a
+ *   fresh independent object.
+ */
+import type { TextAnalysis } from 'interlinearizer';
+import type { FocusContext } from './token-layout';
+
+/**
+ * Returns a `TextAnalysis` with empty collections for every analysis and link array. Each call
+ * produces a fresh object so callers can mutate it without affecting other instances.
+ *
+ * @returns A new, empty `TextAnalysis` object.
+ */
+export function emptyAnalysis(): TextAnalysis {
+  return {
+    segmentAnalyses: [],
+    segmentAnalysisLinks: [],
+    tokenAnalyses: [],
+    tokenAnalysisLinks: [],
+    phraseAnalyses: [],
+    phraseAnalysisLinks: [],
+  };
+}
+
+/**
+ * Returns a `FocusContext` with all fields set to `undefined`, representing the state where nothing
+ * is focused. Each call produces a fresh object so callers can use it without sharing references.
+ *
+ * @returns A new, empty `FocusContext` object.
+ */
+export function emptyFocusContext(): FocusContext {
+  return {
+    focusedToken: undefined,
+    focusedPhraseLink: undefined,
+    focusedFreeToken: undefined,
+    focusedSegmentId: undefined,
+    focusedPhraseId: undefined,
+  };
+}
diff --git a/src/types/token-layout.ts b/src/types/token-layout.ts
new file mode 100644
index 00000000..7fd3cbd8
--- /dev/null
+++ b/src/types/token-layout.ts
@@ -0,0 +1,81 @@
+/**
+ * @file Types describing the intermediate data structures produced when laying out tokens for
+ *   rendering. These are pure structural types with no runtime behaviour; the functions that build
+ *   and consume them live in `utils/token-layout.ts`.
+ */
+import type { PhraseAnalysisLink, Token } from 'interlinearizer';
+
+/**
+ * Resolved focus state shared by SegmentView and ContinuousView so both views derive their
+ * highlight / link-icon rules from the same source. Built once per render from the parent's
+ * `focusedTokenRef`.
+ */
+export type FocusContext = {
+  /** The focused word token itself, or `undefined` when nothing is focused. */
+  focusedToken: (Token & { type: 'word' }) | undefined;
+  /** The phrase containing the focused token, or `undefined` when the focused token is free. */
+  focusedPhraseLink: PhraseAnalysisLink | undefined;
+  /** The focused token when it is not part of any phrase ("free"); `undefined` otherwise. */
+  focusedFreeToken: (Token & { type: 'word' }) | undefined;
+  /** Segment id containing the focused token, or `undefined` when nothing is focused. */
+  focusedSegmentId: string | undefined;
+  /** PhraseId to highlight as "focused" for arc / phrase-box styling. */
+  focusedPhraseId: string | undefined;
+};
+
+/**
+ * The complete bundle of focus-derived inputs `TokenLinkIcon` needs for a single between-group
+ * slot. Combines the slot-specific direction/segment flags with the two focus-context fields the
+ * icon reads directly (`focusedPhraseLink` / `focusedFreeToken`), so the icon takes one focus
+ * object instead of four separate props.
+ */
+export type SlotFocusInfo = {
+  /**
+   * `true` when the focused group is start-ward of this slot, `false` when end-ward, `undefined`
+   * when nothing is focused. Caller must compute this from its own ordering (`focusedGroupSeen`
+   * cursor for SegmentView; flat index comparison for ContinuousView).
+   */
+  focusedSideIsPrev: boolean | undefined;
+  /**
+   * `true` when both slot neighbors are in the same segment as the focused token. Phrases cannot
+   * span segments, so the link button is disabled when this is `false`.
+   */
+  isSameSegmentAsFocus: boolean;
+  /** The phrase containing the focused token, or `undefined` when the focused token is free. */
+  focusedPhraseLink: PhraseAnalysisLink | undefined;
+  /** The focused token when it is not part of any phrase ("free"); `undefined` otherwise. */
+  focusedFreeToken: (Token & { type: 'word' }) | undefined;
+};
+
+/** A grouped render unit: one or more adjacent tokens that share the same phrase (or no phrase). */
+export type TokenGroup = {
+  /** The tokens to render together in one `PhraseBox`. */
+  tokens: (Token & { type: 'word' })[];
+  /** The phrase link shared by all tokens in this group, or `undefined` for ungrouped solo tokens. */
+  phraseLink: PhraseAnalysisLink | undefined;
+  /**
+   * The index of the first token in the flat token array from which this group was built — passed
+   * as `index` to `PhraseBox`.
+   */
+  firstIndex: number;
+  /**
+   * Punctuation tokens that appear between adjacent word tokens within this group, in document
+   * order. `punctuationBetween[i]` contains punctuation that falls between `tokens[i]` and
+   * `tokens[i+1]`. Always has length `tokens.length - 1`; entries are empty arrays when no
+   * punctuation sits between that pair.
+   */
+  punctuationBetween: Token[][];
+};
+
+/** A slot between two adjacent token groups, carrying the link icon and any punctuation in the gap. */
+export type LinkSlot = {
+  /** The last token group before this slot, or `undefined` for the leading slot. */
+  prevGroup: TokenGroup | undefined;
+  /** The first token group after this slot, or `undefined` for the trailing slot. */
+  nextGroup: TokenGroup | undefined;
+  /** Punctuation tokens that sit between the two word groups, in document order. */
+  punctuation: Token[];
+};
+
+/** A unit in the rendered token row — either a phrase group or a between-group slot. */
+export type RenderUnit = { kind: 'group'; group: TokenGroup } | { kind: 'slot'; slot: LinkSlot };
diff --git a/src/types/typeGuards.ts b/src/types/type-guards.ts
similarity index 98%
rename from src/types/typeGuards.ts
rename to src/types/type-guards.ts
index 7822819f..030826b7 100644
--- a/src/types/typeGuards.ts
+++ b/src/types/type-guards.ts
@@ -1,3 +1,4 @@
+/** @file Type guards for narrowing interlinearizer types and validating parsed JSON payloads. */
 import type { AssignmentStatus, TextAnalysis, Token } from 'interlinearizer';
 import type { InterlinearProjectSummary } from './interlinear-project-summary';
 
diff --git a/src/utils/phrase-arc.ts b/src/utils/phrase-arc.ts
index 34593ac1..7b49826b 100644
--- a/src/utils/phrase-arc.ts
+++ b/src/utils/phrase-arc.ts
@@ -252,7 +252,7 @@ export function computeStripRowGap(
 // #region Arc stroke styling
 
 /** Stroke styling for a single phrase arc; consumed directly as SVG `<path>` attributes. */
-export type ArcStrokeProps = {
+type ArcStrokeProps = {
   /** SVG `stroke` value — a CSS color expression. */
   stroke: string;
   /** SVG `stroke-opacity`. */
@@ -267,10 +267,10 @@ export type ArcStrokeProps = {
  * vice-versa.
  */
 
-/** Matches `phrase-dimmed`: border-color at 80% opacity. */
+/** Matches `phrase-dimmed`: border-color at full opacity. */
 const DIMMED_ARC_STROKE: ArcStrokeProps = {
   stroke: 'var(--border)',
-  strokeOpacity: 0.8,
+  strokeOpacity: 1,
   strokeWidth: 2,
 };
 
@@ -288,10 +288,10 @@ const HOVERED_ARC_STROKE: ArcStrokeProps = {
   strokeWidth: 2,
 };
 
-/** Matches `phrase-focused`: foreground at full opacity. */
+/** Matches `phrase-focused`: foreground at 60% opacity. */
 const HIGHLIGHTED_ARC_STROKE: ArcStrokeProps = {
   stroke: 'var(--foreground)',
-  strokeOpacity: 1,
+  strokeOpacity: 0.6,
   strokeWidth: 2,
 };
 
diff --git a/src/utils/token-layout.ts b/src/utils/token-layout.ts
index cce38354..0c9f4c6d 100644
--- a/src/utils/token-layout.ts
+++ b/src/utils/token-layout.ts
@@ -1,25 +1,14 @@
 import type { PhraseAnalysisLink, Token } from 'interlinearizer';
-import { isWordToken } from '../types/typeGuards';
+import type {
+  FocusContext,
+  LinkSlot,
+  RenderUnit,
+  SlotFocusInfo,
+  TokenGroup,
+} from '../types/token-layout';
+import { isWordToken } from '../types/type-guards';
 
-// #region Focus context
-
-/**
- * Resolved focus state shared by SegmentView and ContinuousView so both views derive their
- * highlight / link-icon rules from the same source. Built once per render from the parent's
- * `focusedTokenRef`.
- */
-export type FocusContext = {
-  /** The focused word token itself, or `undefined` when nothing is focused. */
-  focusedToken: (Token & { type: 'word' }) | undefined;
-  /** The phrase containing the focused token, or `undefined` when the focused token is free. */
-  focusedPhraseLink: PhraseAnalysisLink | undefined;
-  /** The focused token when it is not part of any phrase ("free"); `undefined` otherwise. */
-  focusedFreeToken: (Token & { type: 'word' }) | undefined;
-  /** Segment id containing the focused token, or `undefined` when nothing is focused. */
-  focusedSegmentId: string | undefined;
-  /** PhraseId to highlight as "focused" for arc / phrase-box styling. */
-  focusedPhraseId: string | undefined;
-};
+export type { FocusContext, LinkSlot, RenderUnit, SlotFocusInfo, TokenGroup };
 
 /**
  * Resolves the focus context from a single `focusedTokenRef`. All views use the same rules; the
@@ -60,30 +49,6 @@ export function resolveFocusContext(
   };
 }
 
-/**
- * The complete bundle of focus-derived inputs `TokenLinkIcon` needs for a single between-group
- * slot. Combines the slot-specific direction/segment flags with the two focus-context fields the
- * icon reads directly (`focusedPhraseLink` / `focusedFreeToken`), so the icon takes one focus
- * object instead of four separate props.
- */
-export type SlotFocusInfo = {
-  /**
-   * `true` when the focused group is start-ward of this slot, `false` when end-ward, `undefined`
-   * when nothing is focused. Caller must compute this from its own ordering (`focusedGroupSeen`
-   * cursor for SegmentView; flat index comparison for ContinuousView).
-   */
-  focusedSideIsPrev: boolean | undefined;
-  /**
-   * `true` when both slot neighbors are in the same segment as the focused token. Phrases cannot
-   * span segments, so the link button is disabled when this is `false`.
-   */
-  isSameSegmentAsFocus: boolean;
-  /** The phrase containing the focused token, or `undefined` when the focused token is free. */
-  focusedPhraseLink: PhraseAnalysisLink | undefined;
-  /** The focused token when it is not part of any phrase ("free"); `undefined` otherwise. */
-  focusedFreeToken: (Token & { type: 'word' }) | undefined;
-};
-
 /**
  * Computes the slot's focus-derived inputs to `TokenLinkIcon`. Pure function over the slot's
  * segment ids and the supplied focus context; bundles the slot-specific flags together with the
@@ -127,30 +92,6 @@ export const NO_SLOT_FOCUS: SlotFocusInfo = {
   focusedFreeToken: undefined,
 };
 
-// #endregion
-
-// #region Token grouping
-
-/** A grouped render unit: one or more adjacent tokens that share the same phrase (or no phrase). */
-export type TokenGroup = {
-  /** The tokens to render together in one `PhraseBox`. */
-  tokens: (Token & { type: 'word' })[];
-  /** The phrase link shared by all tokens in this group, or `undefined` for ungrouped solo tokens. */
-  phraseLink: PhraseAnalysisLink | undefined;
-  /**
-   * The index of the first token in the flat token array from which this group was built — passed
-   * as `index` to `PhraseBox`.
-   */
-  firstIndex: number;
-  /**
-   * Punctuation tokens that appear between adjacent word tokens within this group, in document
-   * order. `punctuationBetween[i]` contains punctuation that falls between `tokens[i]` and
-   * `tokens[i+1]`. Always has length `tokens.length - 1`; entries are empty arrays when no
-   * punctuation sits between that pair.
-   */
-  punctuationBetween: Token[][];
-};
-
 /**
  * Groups adjacent word tokens that share the same approved `PhraseAnalysisLink` into single
  * `TokenGroup` entries. Non-word tokens are skipped. Discontiguous phrase members produce separate
@@ -180,23 +121,6 @@ export function groupTokens(
   }, []);
 }
 
-// #endregion
-
-// #region Render units
-
-/** A slot between two adjacent token groups, carrying the link icon and any punctuation in the gap. */
-export type LinkSlot = {
-  /** The last token group before this slot, or `undefined` for the leading slot. */
-  prevGroup: TokenGroup | undefined;
-  /** The first token group after this slot, or `undefined` for the trailing slot. */
-  nextGroup: TokenGroup | undefined;
-  /** Punctuation tokens that sit between the two word groups, in document order. */
-  punctuation: Token[];
-};
-
-/** A unit in the rendered token row — either a phrase group or a between-group slot. */
-export type RenderUnit = { kind: 'group'; group: TokenGroup } | { kind: 'slot'; slot: LinkSlot };
-
 /**
  * Walks `tokens` in document order and emits an alternating sequence of phrase groups and link
  * slots. A leading slot is always emitted before the first group and a trailing slot after the
@@ -243,7 +167,10 @@ export function buildRenderUnits(tokens: Token[], tokenGroups: TokenGroup[]): Re
     if (!isWordToken(token)) {
       if (pendingIntraGroup) {
         // Punctuation between two tokens of the same group: route into the group.
-        pendingIntraGroup.group.punctuationBetween[pendingIntraGroup.gapIndex].push(token);
+        pendingIntraGroup.group.punctuationBetween[pendingIntraGroup.gapIndex] = [
+          ...pendingIntraGroup.group.punctuationBetween[pendingIntraGroup.gapIndex],
+          token,
+        ];
       } else {
         pendingPunctuation.push(token);
       }
@@ -255,11 +182,30 @@ export function buildRenderUnits(tokens: Token[], tokenGroups: TokenGroup[]): Re
       // This is a subsequent token of an already-open group. The gap index is tokenIndex - 1
       // (the gap between tokens[tokenIndex-1] and tokens[tokenIndex]).
       const gapIndex = intraEntry.tokenIndex - 1;
-      // Flush any punctuation already buffered since the previous group token — it belongs to
-      // this intra-group gap, not to the upcoming inter-group slot.
-      intraEntry.group.punctuationBetween[gapIndex].push(...pendingPunctuation);
+      // Reset the gap array to a fresh one so repeated calls to buildRenderUnits (e.g. on focus
+      // change) do not accumulate into the memoized TokenGroup's shared arrays. If
+      // pendingIntraGroup is already tracking this exact gap, punctuation tokens were routed
+      // directly into it; preserve them by prepending rather than replacing.
+      if (
+        pendingIntraGroup?.group === intraEntry.group &&
+        pendingIntraGroup.gapIndex === gapIndex
+      ) {
+        intraEntry.group.punctuationBetween[gapIndex] = [
+          ...pendingPunctuation,
+          ...intraEntry.group.punctuationBetween[gapIndex],
+        ];
+      } else {
+        intraEntry.group.punctuationBetween[gapIndex] = [...pendingPunctuation];
+      }
       pendingPunctuation = [];
-      pendingIntraGroup = { group: intraEntry.group, gapIndex };
+      const nextGapIndex = intraEntry.tokenIndex;
+      if (nextGapIndex < intraEntry.group.punctuationBetween.length) {
+        // Entering a new intra-group gap for this invocation; clear any stale memoized entries.
+        intraEntry.group.punctuationBetween[nextGapIndex] = [];
+        pendingIntraGroup = { group: intraEntry.group, gapIndex: nextGapIndex };
+      } else {
+        pendingIntraGroup = undefined;
+      }
       return;
     }
 
@@ -275,5 +221,3 @@ export function buildRenderUnits(tokens: Token[], tokenGroups: TokenGroup[]): Re
   emitSlot(undefined);
   return units;
 }
-
-// #endregion