diff --git a/src/__tests__/components/ArcOverlay.test.tsx b/src/__tests__/components/ArcOverlay.test.tsx
index d51b647d..026d37db 100644
--- a/src/__tests__/components/ArcOverlay.test.tsx
+++ b/src/__tests__/components/ArcOverlay.test.tsx
@@ -367,9 +367,24 @@ describe('ArcOverlay', () => {
       />,
     );
     const btns = screen.getAllByTestId('split-arc-btn');
-    // Hover the first split button — tok-b's arc goes through focusedPhraseId branch (returns 2).
+    // Hover the first split button — tok-b's arc goes through focusedPhraseId branch.
     await userEvent.hover(btns[0]);
-    expect(document.querySelectorAll('path')).toHaveLength(2);
+
+    // The free-split-hovered tok-a arc is promoted to the z-5 (hovered) layer.
+    const hoveredLayer = document.querySelector('svg.tw\\:z-5');
+    const hoveredPaths = hoveredLayer?.querySelectorAll('path') ?? [];
+    expect(hoveredPaths).toHaveLength(1);
+    expect(hoveredPaths[0].getAttribute('d')).toContain('tok-a');
+
+    // tok-b's arc is classified focused via the focusedPhraseId branch, so it sits in the z-3
+    // (focused) layer — not the z-1 unfocused layer it would fall to if that branch regressed.
+    const focusedLayer = document.querySelector('svg.tw\\:z-3');
+    const focusedPaths = focusedLayer?.querySelectorAll('path') ?? [];
+    expect(focusedPaths).toHaveLength(1);
+    expect(focusedPaths[0].getAttribute('d')).toContain('tok-b');
+
+    // Nothing falls through to the unfocused (z-1) layer.
+    expect(document.querySelector('svg.tw\\:z-1')?.querySelectorAll('path')).toHaveLength(0);
   });
 
   it('assigns candidate priority to an arc via candidatePhraseIds when split-hover misses its splitAfterTokenRef and focusedPhraseId does not match', async () => {
@@ -395,7 +410,21 @@ describe('ArcOverlay', () => {
     );
     const btns = screen.getAllByTestId('split-arc-btn');
     await userEvent.hover(btns[0]);
-    expect(document.querySelectorAll('path')).toHaveLength(2);
+
+    // Both arcs land in the z-5 (hovered) layer: tok-a via the free-split promotion, and tok-b via
+    // the candidatePhraseIds.has('p1') branch. If that candidate clause regressed, tok-b would drop
+    // to the z-1 (unfocused) layer and would no longer appear here.
+    const hoveredLayer = document.querySelector('svg.tw\\:z-5');
+    const hoveredDs = Array.from(hoveredLayer?.querySelectorAll('path') ?? []).map((p) =>
+      p.getAttribute('d'),
+    );
+    expect(hoveredDs).toHaveLength(2);
+    expect(hoveredDs).toEqual(
+      expect.arrayContaining([expect.stringContaining('tok-a'), expect.stringContaining('tok-b')]),
+    );
+
+    // No arc is demoted to the unfocused (z-1) layer.
+    expect(document.querySelector('svg.tw\\:z-1')?.querySelectorAll('path')).toHaveLength(0);
   });
 
   it('highlights the phrase via onHoverPhrase on enter when the split would not free any token', async () => {
diff --git a/src/__tests__/components/ContinuousView.test.tsx b/src/__tests__/components/ContinuousView.test.tsx
index 53eb5f08..dff035e8 100644
--- a/src/__tests__/components/ContinuousView.test.tsx
+++ b/src/__tests__/components/ContinuousView.test.tsx
@@ -88,12 +88,22 @@ jest.mock('../../components/TokenLinkIcon', () => ({
 
 jest.mock('../../components/ArcOverlay', () => ({
   __esModule: true,
+  // Surface the props ContinuousView derives and forwards (hoveredPhraseId, candidatePhraseIds) as
+  // data attributes so DOM queries can assert on values that otherwise only live inside ArcOverlay.
   default: ({
     onArcSplit,
-  }: Readonly<{ onArcSplit: (phraseId: string, splitAfterTokenRef: string) => void }>) => (
+    hoveredPhraseId,
+    candidatePhraseIds,
+  }: Readonly<{
+    onArcSplit: (phraseId: string, splitAfterTokenRef: string) => void;
+    hoveredPhraseId: string | undefined;
+    candidatePhraseIds: ReadonlySet<string>;
+  }>) => (
     <button
       type="button"
       data-testid="arc-split-btn"
+      data-hovered-phrase-id={hoveredPhraseId ?? ''}
+      data-candidate-phrase-ids={[...candidatePhraseIds].join(',')}
       onClick={() => onArcSplit('phrase-1', 'tok-0')}
     >
       split
@@ -1267,26 +1277,69 @@ describe('ContinuousView phrase grouping', () => {
     expect(phraseBoxes[1]).toHaveAttribute('data-show-gloss', 'false');
   });
 
-  it('fires mouse-leave on the token strip without throwing', async () => {
+  it('clears the hovered phrase highlight when the pointer leaves the token strip', async () => {
+    // Group tok-0/tok-1 into one hoverable phrase so hovering it sets hoveredPhraseId, which
+    // ContinuousView forwards to ArcOverlay. Leaving the strip runs clearAllHoverState, which must
+    // reset hoveredPhraseId to undefined.
+    const phraseLink: PhraseAnalysisLink = {
+      analysisId: 'phrase-1',
+      status: 'approved',
+      tokens: [
+        { tokenRef: 'tok-0', surfaceText: 'In' },
+        { tokenRef: 'tok-1', surfaceText: 'the' },
+      ],
+    };
+    phraseLinkMap.set('tok-0', phraseLink);
+    phraseLinkMap.set('tok-1', phraseLink);
     const book = makeBook();
     render(<ContinuousView {...requiredProps(book)} />, withAnalysisStore);
-    const strip = screen.getByTestId('token-strip');
-    await userEvent.unhover(strip);
-    // No throw = pass
+
+    // Hover the phrase group to set hoveredPhraseId='phrase-1'.
+    const phraseGroupSpan = document.querySelector('[data-phrase-box="true"]')?.parentElement;
+    if (!phraseGroupSpan) throw new Error('Expected a phrase group wrapper span');
+    await userEvent.hover(phraseGroupSpan);
+    expect(screen.getByTestId('arc-split-btn')).toHaveAttribute(
+      'data-hovered-phrase-id',
+      'phrase-1',
+    );
+
+    // Leaving the strip itself (not the group) must clear the highlight via clearAllHoverState.
+    fireEvent.mouseLeave(screen.getByTestId('token-strip'));
+    expect(screen.getByTestId('arc-split-btn')).toHaveAttribute('data-hovered-phrase-id', '');
   });
 
   it('applies the internal focus transition when the parent reflects a click-driven ref change', async () => {
     // Simulate: ContinuousView clicks Next, sets internalFocusedTokenRefRef, calls
     // onFocusedTokenRefChange. The parent then passes the new focusedTokenRef back. This exercises
-    // the isInternal=true path (lines 306-308) of the pending-jump effect.
+    // the isInternal=true branch of the focus-change effect, which applies the new ref *immediately*
+    // (setDisplayFocusedTokenRef) without fading the strip out. The external (non-internal) branch
+    // would instead defer the display update behind a fade timeout, so the focused box would still
+    // be 'In' (tok-0) right after the rerender.
     const book = makeBook();
     const props = requiredProps(book, { focusedTokenRef: 'tok-0' });
     const { rerender } = render(<ContinuousView {...props} />, withAnalysisStore);
 
+    // Sanity: tok-0's box ('In') is focused before the click.
+    expect(screen.getByText('In').closest('[data-phrase-box="true"]')).toHaveAttribute(
+      'data-focus-state',
+      'focused',
+    );
+
     await userEvent.click(screen.getByRole('button', { name: 'Next token' }));
-    // Now reflect the new ref back as a prop change (as a real parent would do).
+    // Now reflect the new ref back as a prop change (as a real parent would do). Because the click
+    // stamped tok-1 as internally-originated, the echo is recognized as internal and applied at once.
     rerender(<ContinuousView {...props} focusedTokenRef="tok-1" />);
-    // No throw = the isInternal path ran successfully.
+
+    // The displayed focus moved synchronously to tok-1's box ('the') — the internal path, not the
+    // fade-then-snap external path (which would leave 'In' focused until the fade timeout fires).
+    expect(screen.getByText('the').closest('[data-phrase-box="true"]')).toHaveAttribute(
+      'data-focus-state',
+      'focused',
+    );
+    expect(screen.getByText('In').closest('[data-phrase-box="true"]')).toHaveAttribute(
+      'data-focus-state',
+      'default',
+    );
   });
 
   it('scrolls to the first token of the active phrase when entering edit mode', async () => {
@@ -1400,6 +1453,25 @@ describe('ContinuousView phrase grouping', () => {
     mockCandidateTokenRefs.current = new Set(['tok-0']);
     const book = makeBook();
     render(<ContinuousView {...requiredProps(book)} />, withAnalysisStore);
-    expect(screen.getByTestId('arc-split-btn')).toBeInTheDocument();
+    // useCandidatePhraseIds resolves the hovered candidate ref (tok-0) to the phrase that contains
+    // it, and ContinuousView forwards the set to ArcOverlay. The mock surfaces it as a data attr.
+    expect(screen.getByTestId('arc-split-btn')).toHaveAttribute(
+      'data-candidate-phrase-ids',
+      'phrase-1',
+    );
+  });
+
+  it('computes an empty candidatePhraseIds set when no candidate tokens are hovered', () => {
+    const phraseLink: PhraseAnalysisLink = {
+      analysisId: 'phrase-1',
+      status: 'approved',
+      tokens: [{ tokenRef: 'tok-0', surfaceText: 'In' }],
+    };
+    phraseLinkMap.set('tok-0', phraseLink);
+    // No hovered candidate refs: the phrase exists, but nothing should resolve to it.
+    mockCandidateTokenRefs.current = new Set();
+    const book = makeBook();
+    render(<ContinuousView {...requiredProps(book)} />, withAnalysisStore);
+    expect(screen.getByTestId('arc-split-btn')).toHaveAttribute('data-candidate-phrase-ids', '');
   });
 });
diff --git a/src/__tests__/components/Interlinearizer.test.tsx b/src/__tests__/components/Interlinearizer.test.tsx
index c558403f..9a133829 100644
--- a/src/__tests__/components/Interlinearizer.test.tsx
+++ b/src/__tests__/components/Interlinearizer.test.tsx
@@ -1169,7 +1169,13 @@ describe('Interlinearizer', () => {
         throw new Error('Expected GEN 1:7 onSelect to be a function');
       act(() => select({ book: 'GEN', chapter: 1, verse: 7 }, 'GEN 1:7:0'));
 
-      expect(container.querySelector('.tw\\:transition-opacity')).toHaveStyle({ opacity: '1' });
+      // Target the inner list wrapper (tw:gap-2) — the one that fades on external nav via isFaded —
+      // matching the positive-fade test above. The bare .tw:transition-opacity selector would return
+      // the outer mode-toggle wrapper instead, whose opacity is never driven here, masking a regressed
+      // (non-suppressed) recenter fade of the list.
+      expect(container.querySelector('.tw\\:gap-2.tw\\:transition-opacity')).toHaveStyle({
+        opacity: '1',
+      });
     } finally {
       jest.useRealTimers();
     }
diff --git a/src/__tests__/components/InterlinearizerLoader.test.tsx b/src/__tests__/components/InterlinearizerLoader.test.tsx
index 2eb6425a..54958e97 100644
--- a/src/__tests__/components/InterlinearizerLoader.test.tsx
+++ b/src/__tests__/components/InterlinearizerLoader.test.tsx
@@ -241,6 +241,7 @@ jest.mock('../../components/modals/ProjectModals', () => ({
         data-testid="project-modals"
         data-modal={modal}
         data-default-lang={defaultAnalysisLanguage}
+        data-active-project-name={activeProject?.name}
       >
         {modal === 'select' && (
           <div data-testid="select-modal">
@@ -313,7 +314,10 @@ jest.mock('../../components/modals/ProjectModals', () => ({
             <button
               type="button"
               data-testid="metadata-modal-saved"
-              onClick={() => setModal('none')}
+              onClick={() => {
+                setActiveProject({ ...STUB_ACTIVE_PROJECT, name: 'Renamed Project' });
+                setModal('none');
+              }}
             >
               Save
             </button>
@@ -889,6 +893,9 @@ describe('InterlinearizerLoader', () => {
       await userEvent.click(screen.getByTestId('metadata-modal-deleted'));
 
       expect(screen.queryByTestId('metadata-modal')).not.toBeInTheDocument();
+      // The deleted project was the active one, so the loader should now pass `activeProject:
+      // undefined` down to ProjectModals (the stub omits the attribute when there is no name).
+      expect(screen.getByTestId('project-modals')).not.toHaveAttribute('data-active-project-name');
     });
 
     it('updates the active project name when its metadata is saved', async () => {
@@ -902,6 +909,12 @@ describe('InterlinearizerLoader', () => {
       await userEvent.click(screen.getByTestId('metadata-modal-saved'));
 
       expect(screen.queryByTestId('metadata-modal')).not.toBeInTheDocument();
+      // Saving renamed the active project; the loader must reflect the new name it reads back from
+      // WebView state by passing it down to ProjectModals.
+      expect(screen.getByTestId('project-modals')).toHaveAttribute(
+        'data-active-project-name',
+        'Renamed Project',
+      );
     });
 
     it('renders without error when useData provides a topMenu with items', async () => {
diff --git a/src/__tests__/components/MorphemeEditor.test.tsx b/src/__tests__/components/MorphemeEditor.test.tsx
index 4c3eff3e..2950d58d 100644
--- a/src/__tests__/components/MorphemeEditor.test.tsx
+++ b/src/__tests__/components/MorphemeEditor.test.tsx
@@ -53,7 +53,12 @@ describe('MorphemeBreakdownPopover', () => {
 
   it('auto-focuses and selects the input on mount', () => {
     renderPopover({ initialValue: 'word' });
-    expect(screen.getByRole('textbox')).toHaveFocus();
+    const input = screen.getByRole('textbox');
+    expect(input).toHaveFocus();
+    // The mount effect calls .select(), so the whole value is selected and a fresh keystroke
+    // replaces it. Asserting the selection range catches a regression that drops the .select() call.
+    expect(input).toHaveProperty('selectionStart', 0);
+    expect(input).toHaveProperty('selectionEnd', 'word'.length);
   });
 
   it('calls onSave and onClose when Done button is clicked', async () => {
@@ -150,7 +155,13 @@ describe('MorphemeBreakdownPopover', () => {
 
   it('does not save on outside interaction when the input is only whitespace', async () => {
     const onSave = jest.fn();
-    renderPopover({ initialValue: '   ', onSave });
+    // Start from a real word and edit it down to whitespace so the draft differs from initialValue
+    // (isUnedited is false). This forces handleInteractOutside past the unedited guard into
+    // handleSave, where the isMeaningless check is what rejects the empty breakdown — the behavior
+    // this test names. If isMeaningless were removed, handleSave would call onSave and this fails.
+    renderPopover({ initialValue: 'word', onSave, surfaceText: 'whole' });
+    await userEvent.clear(screen.getByRole('textbox'));
+    await userEvent.type(screen.getByRole('textbox'), '   ');
     await userEvent.click(screen.getByTestId('popover-outside'));
     expect(onSave).not.toHaveBeenCalled();
   });
diff --git a/src/__tests__/components/PhraseBox.test.tsx b/src/__tests__/components/PhraseBox.test.tsx
index 9414b6df..bd7fcafc 100644
--- a/src/__tests__/components/PhraseBox.test.tsx
+++ b/src/__tests__/components/PhraseBox.test.tsx
@@ -933,10 +933,13 @@ describe('PhraseBox', () => {
     renderBox(<PhraseBox {...requiredProps()} />);
     const box = document.querySelector('[data-phrase-box="true"]');
     expect(box).not.toBeNull();
-    // Focus the box container, then press Enter → should focus the first input.
+    // Focus the box container, then press Enter → the keydown handler forwards focus to the first
+    // gloss input. Asserting toHaveFocus makes the test fail if the Enter branch of
+    // focusFirstGlossOnSelfKeyDown is broken or removed.
     if (box instanceof HTMLElement) box.focus();
     await userEvent.keyboard('{Enter}');
-    // No throw = pass (jsdom doesn't fire input focus in this setup, but the handler runs).
+
+    expect(screen.getByRole('textbox', { name: 'Gloss for Hello' })).toHaveFocus();
   });
 
   it('pops out a middle token from a 3+ token phrase in view mode (updatePhrase)', async () => {
@@ -1049,19 +1052,6 @@ describe('PhraseBox', () => {
     expect(screen.getByRole('button', { name: 'Remove World' })).toBeInTheDocument();
   });
 
-  it('pops out a token from a 3-token phrase by deleting when only 1 would remain (edge case)', async () => {
-    // Actually a 3-token phrase removes a middle token to leave 2 (≥2), so updatePhrase is called.
-    // For deletePhrase to be called, we need to go from 2 tokens to ≤1.
-    // The onRemove is only wired for middle tokens when length > 2. So we simulate handleViewPopOut
-    // via the phraseLink having exactly 2 tokens (which means the mock won't show Remove button).
-    // Instead, let's test the deletePhrase path by using a 3-token phrase removing to leave 1 token
-    // by mocking phraseLink.tokens to have 2 entries while tokens prop has 3, and removing the first.
-    // Actually, the easiest way is to test through phraseLink with 2 tokens where the condition
-    // doesn't show the Remove button. Skip this path via v8 ignore instead.
-    // This test just documents the behavior.
-    expect(true).toBe(true);
-  });
-
   it('writes phrase gloss on blur when draft differs from committed', async () => {
     mockUsePhraseGloss.mockReturnValue('');
     const dispatchSpy = jest.fn();
@@ -1075,12 +1065,14 @@ describe('PhraseBox', () => {
   });
 
   it('ignores non-Enter/Space keys on the box container', async () => {
-    const setPhraseMode = jest.fn();
-    renderBox(<PhraseBox {...requiredProps()} />, { setPhraseMode });
+    renderBox(<PhraseBox {...requiredProps()} />);
     const box = document.querySelector('[data-phrase-box="true"]');
     if (box instanceof HTMLElement) box.focus();
-    await userEvent.keyboard('{Tab}');
-    expect(setPhraseMode).not.toHaveBeenCalled();
+    // ArrowRight is neither Enter nor Space and does not move focus by default, so
+    // focusFirstGlossOnSelfKeyDown must return early without focusing the first gloss input. If the
+    // Enter/Space guard were dropped, this key would forward focus to the gloss input and fail here.
+    await userEvent.keyboard('{ArrowRight}');
+    expect(screen.getByRole('textbox', { name: 'Gloss for Hello' })).not.toHaveFocus();
   });
 
   it('renders disabled style for a token in the wrong segment during edit mode', () => {
diff --git a/src/__tests__/components/PhraseStripParts.test.tsx b/src/__tests__/components/PhraseStripParts.test.tsx
index 9eab0dfb..e548ecbd 100644
--- a/src/__tests__/components/PhraseStripParts.test.tsx
+++ b/src/__tests__/components/PhraseStripParts.test.tsx
@@ -22,7 +22,9 @@ import { makePhraseLink, makePhraseStripContext, makeWordToken } from '../test-h
 
 jest.mock('../../components/TokenLinkIcon', () => ({
   __esModule: true,
-  default: () => <span data-testid="link-icon" />,
+  default: ({ isPhraseRevealed }: Readonly<{ isPhraseRevealed: boolean }>) => (
+    <span data-testid="link-icon" data-phrase-revealed={String(isPhraseRevealed)} />
+  ),
 }));
 
 jest.mock('../../components/TokenChip', () => ({
@@ -155,12 +157,29 @@ describe('PhraseSlot', () => {
       punctuationBetween: [],
     };
     const slot: LinkSlot = { prevGroup, nextGroup, punctuation: [] };
-    // PhrasedRevealed means the unlink button is shown — but TokenLinkIcon is mocked to undefined,
-    // so just check no errors are thrown when hoveredPhraseId matches.
-    const { container } = render(
-      withProvider(<PhraseSlot {...slotProps(slot)} hoveredPhraseId="p1" />),
-    );
-    expect(container.firstChild).not.toBeNull();
+    // phraseRevealed (source lines 70-73) flows into TokenLinkIcon as isPhraseRevealed; the mock
+    // surfaces it as data-phrase-revealed so we can assert the computation directly.
+    render(withProvider(<PhraseSlot {...slotProps(slot)} hoveredPhraseId="p1" />));
+    expect(screen.getByTestId('link-icon')).toHaveAttribute('data-phrase-revealed', 'true');
+  });
+
+  it('does not set phraseRevealed when the hovered phrase differs from the neighbors', () => {
+    const link = makePhraseLink('p1', ['tok-a', 'tok-b']);
+    const prevGroup: TokenGroup = {
+      tokens: [makeWordToken('tok-a')],
+      phraseLink: link,
+      firstIndex: 0,
+      punctuationBetween: [],
+    };
+    const nextGroup: TokenGroup = {
+      tokens: [makeWordToken('tok-b')],
+      phraseLink: link,
+      firstIndex: 1,
+      punctuationBetween: [],
+    };
+    const slot: LinkSlot = { prevGroup, nextGroup, punctuation: [] };
+    render(withProvider(<PhraseSlot {...slotProps(slot)} hoveredPhraseId="other-phrase" />));
+    expect(screen.getByTestId('link-icon')).toHaveAttribute('data-phrase-revealed', 'false');
   });
 
   it('sets phraseRevealed via focusedPhraseId when both neighbors are in the same focused phrase', () => {
@@ -185,12 +204,14 @@ describe('PhraseSlot', () => {
       focusedSegmentId: 'seg-1',
       focusedPhraseId: 'p1',
     };
-    const { container } = render(
+    // With no hover, the only way phraseRevealed becomes true is the focus.focusedPhraseId branch
+    // (source line 73); the mock exposes it via data-phrase-revealed.
+    render(
       withProvider(
         <PhraseSlot {...slotProps(slot)} focus={focusedContext} hoveredPhraseId={undefined} />,
       ),
     );
-    expect(container.firstChild).not.toBeNull();
+    expect(screen.getByTestId('link-icon')).toHaveAttribute('data-phrase-revealed', 'true');
   });
 
   it('renders the link icon when hideInactiveLinkButtons is off', () => {
@@ -228,7 +249,6 @@ describe('PhraseSlot', () => {
     );
     // 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.visibility).toBeFalsy();
     expect(icon.parentElement?.style.opacity).toBe('0');
   });
 
@@ -274,7 +294,6 @@ describe('PhraseSlot', () => {
     );
     // 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.visibility).toBeFalsy();
     expect(icon.parentElement?.style.opacity).toBe('0');
   });
 });
diff --git a/src/__tests__/components/SegmentView.test.tsx b/src/__tests__/components/SegmentView.test.tsx
index 29a771e0..a669ea3e 100644
--- a/src/__tests__/components/SegmentView.test.tsx
+++ b/src/__tests__/components/SegmentView.test.tsx
@@ -7,6 +7,7 @@ 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 type { SlotFocusInfo } from '../../types/token-layout';
 import type { PhraseDispatch } from '../../components/AnalysisStore';
 import { LINK_SLOT_TRANSITION_MS } from '../../components/PhraseStripParts';
 import { SegmentView } from '../../components/SegmentView';
@@ -58,6 +59,7 @@ jest.mock('../../components/AnalysisStore', () => ({
 // SegmentView's tests don't redundantly re-exercise the hook's internals; the view only forwards its
 // handlers, which a no-op stub satisfies.
 const mockCandidateTokenRefs = { current: new Set<string>() };
+const mockSplitFreeTokenRefs = { current: new Set<string>() };
 jest.mock('../../hooks/usePhraseHoverState', () => ({
   __esModule: true,
   usePhraseHoverState: () => ({
@@ -65,7 +67,7 @@ jest.mock('../../hooks/usePhraseHoverState', () => ({
     setHoveredGroupKey: () => {},
     candidateTokenRefs: mockCandidateTokenRefs.current,
     setCandidateTokenRefs: () => {},
-    splitFreeTokenRefs: new Set<string>(),
+    splitFreeTokenRefs: mockSplitFreeTokenRefs.current,
     handleSplitHoverChange: () => {},
     handleHoverSplitFreeTokens: () => {},
     clearAll: () => {},
@@ -76,17 +78,41 @@ jest.mock('../../components/TokenChip');
 
 jest.mock('../../components/TokenLinkIcon', () => ({
   __esModule: true,
-  default: () => undefined,
+  // Surface the slot's focus side and its neighboring token refs so tests can assert which side of
+  // each slot SegmentView decided the focused group falls on (the focusedSideIsPrevByUnit walk).
+  default: ({
+    slotFocus,
+    prevToken,
+    nextToken,
+  }: Readonly<{
+    slotFocus: SlotFocusInfo;
+    prevToken: { ref: string } | undefined;
+    nextToken: { ref: string } | undefined;
+  }>) => (
+    <span
+      data-token-link-icon="true"
+      data-prev-ref={prevToken?.ref ?? 'none'}
+      data-next-ref={nextToken?.ref ?? 'none'}
+      data-focused-side-is-prev={String(slotFocus.focusedSideIsPrev)}
+    />
+  ),
 }));
 
 jest.mock('../../components/ArcOverlay', () => ({
   __esModule: true,
   default: ({
     onArcSplit,
-  }: Readonly<{ onArcSplit: (phraseId: string, splitAfterTokenRef: string) => void }>) => (
+    candidatePhraseIds,
+  }: Readonly<{
+    onArcSplit: (phraseId: string, splitAfterTokenRef: string) => void;
+    candidatePhraseIds: ReadonlySet<string>;
+  }>) => (
     <button
       type="button"
       data-testid="arc-split-btn"
+      // Surface candidatePhraseIds (computed by useCandidatePhraseIds) so tests can assert the memo
+      // resolved the hovered candidate tokens to the right phrase ids; sorted for a stable string.
+      data-candidate-phrase-ids={[...candidatePhraseIds].sort().join(',')}
       onClick={() => onArcSplit('phrase-1', 'tok-0')}
     >
       split
@@ -102,6 +128,7 @@ jest.mock('../../components/PhraseBox', () => ({
     onFocusPhrase,
     tokens,
     showGlossInput = true,
+    splitFreeTokenRefs,
   }: Readonly<{
     groupKey: string;
     isFocused: boolean;
@@ -111,11 +138,15 @@ jest.mock('../../components/PhraseBox', () => ({
     setPhraseMode: unknown;
     phraseLink: unknown;
     showGlossInput?: boolean;
+    splitFreeTokenRefs: ReadonlySet<string>;
   }>) => (
     <span
       data-focus-state={isFocused ? 'focused' : 'default'}
       data-phrase-box="true"
       data-show-gloss={showGlossInput}
+      // Surface the split-free refs PhraseStrip selected for this group so tests can assert the
+      // edit-mode branch swaps in EMPTY_SPLIT_FREE_REFS rather than the live hover set.
+      data-split-free-refs={[...splitFreeTokenRefs].sort().join(',')}
     >
       {tokens.map((t) => (
         <span key={t.ref}>
@@ -233,6 +264,7 @@ describe('SegmentView', () => {
       mergePhrases: jest.fn(),
     });
     mockCandidateTokenRefs.current = new Set();
+    mockSplitFreeTokenRefs.current = new Set();
   });
 
   it('renders word token chips in token-chip mode (default)', () => {
@@ -465,9 +497,15 @@ describe('SegmentView', () => {
   });
 
   it('sets focusedGroupSeen when focusedTokenRef matches a token in a group', () => {
+    // tok-0 and tok-1 are unlinked, so they form two solo groups with a slot between them. With
+    // tok-0 focused, the focusedSideIsPrevByUnit walk marks every slot *after* the tok-0 group as
+    // focusedSideIsPrev=true (focus is start-ward) and the leading slot before it as false.
     render(<SegmentView {...requiredProps()} focusedTokenRef="tok-0" />, withAnalysisStore);
-    // Just verifies no error — the focusedSideIsPrev computation runs with a matching token.
-    expect(screen.getByText('In')).toBeInTheDocument();
+
+    const leadingSlot = document.querySelector('[data-prev-ref="none"][data-next-ref="tok-0"]');
+    const middleSlot = document.querySelector('[data-prev-ref="tok-0"][data-next-ref="tok-1"]');
+    expect(leadingSlot).toHaveAttribute('data-focused-side-is-prev', 'false');
+    expect(middleSlot).toHaveAttribute('data-focused-side-is-prev', 'true');
   });
 
   it('renders with EMPTY_SPLIT_FREE_REFS when phraseMode is edit', () => {
@@ -485,6 +523,9 @@ describe('SegmentView', () => {
         ['tok-1', sharedLink],
       ]),
     );
+    // A non-empty live hover set so the edit-mode swap to EMPTY_SPLIT_FREE_REFS is observable: if the
+    // branch were absent, the box would receive this set instead of an empty one.
+    mockSplitFreeTokenRefs.current = new Set(['tok-0']);
     render(
       <SegmentView
         {...requiredProps()}
@@ -492,8 +533,34 @@ describe('SegmentView', () => {
       />,
       withAnalysisStore,
     );
-    // In edit mode, EMPTY_SPLIT_FREE_REFS is used — no errors expected.
-    expect(screen.getByText('In')).toBeInTheDocument();
+    // Edit mode forces EMPTY_SPLIT_FREE_REFS, so the box's split-free refs are empty even though the
+    // hover state has tok-0.
+    expect(document.querySelector('[data-phrase-box]')).toHaveAttribute('data-split-free-refs', '');
+  });
+
+  it('passes the live split-free refs to a phrase box in view mode', () => {
+    const sharedLink: PhraseAnalysisLink = {
+      analysisId: 'phrase-1',
+      status: 'approved',
+      tokens: [
+        { tokenRef: 'tok-0', surfaceText: 'In' },
+        { tokenRef: 'tok-1', surfaceText: 'the' },
+      ],
+    };
+    mockUsePhraseLinkMap.mockReturnValue(
+      new Map<string, PhraseAnalysisLink>([
+        ['tok-0', sharedLink],
+        ['tok-1', sharedLink],
+      ]),
+    );
+    mockSplitFreeTokenRefs.current = new Set(['tok-0']);
+    render(<SegmentView {...requiredProps()} phraseMode={{ kind: 'view' }} />, withAnalysisStore);
+    // In view mode (controls allowed) the live hover set passes through unchanged — the contrast
+    // that makes the edit-mode EMPTY_SPLIT_FREE_REFS swap meaningful.
+    expect(document.querySelector('[data-phrase-box]')).toHaveAttribute(
+      'data-split-free-refs',
+      'tok-0',
+    );
   });
 
   it('fires mouse-leave on the token row without throwing', async () => {
@@ -658,10 +725,13 @@ 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(<SegmentView {...requiredProps()} />, withAnalysisStore);
-    // ArcOverlay receives candidatePhraseIds; it renders so no assertion needed beyond no crash
-    expect(screen.getByTestId('arc-split-btn')).toBeInTheDocument();
+    // useCandidatePhraseIds maps the hovered candidate token (tok-0) to its phrase id (phrase-1),
+    // and SegmentView passes that set to ArcOverlay's candidatePhraseIds prop.
+    expect(screen.getByTestId('arc-split-btn')).toHaveAttribute(
+      'data-candidate-phrase-ids',
+      'phrase-1',
+    );
   });
 
   it('renders a free-translation input below the segment tokens', () => {
diff --git a/src/__tests__/components/TokenLinkIcon.test.tsx b/src/__tests__/components/TokenLinkIcon.test.tsx
index 4632feaf..bbe5b6dc 100644
--- a/src/__tests__/components/TokenLinkIcon.test.tsx
+++ b/src/__tests__/components/TokenLinkIcon.test.tsx
@@ -481,55 +481,6 @@ describe('TokenLinkIcon', () => {
     );
   });
 
-  it('candidatePhraseId falls back to nextPhraseLink analysisId when prevPhraseLink is undefined', () => {
-    const nextPhrase = makePhraseLink('p2', ['tok-b']);
-    renderIcon(
-      <TokenLinkIcon {...requiredProps()} prevPhraseLink={undefined} nextPhraseLink={nextPhrase} />,
-    );
-    // Just verify it renders without errors — the candidatePhraseId uses ?? nextPhraseLink
-    expect(screen.getByTestId('token-link-btn')).toBeInTheDocument();
-  });
-
-  it('candidatePhraseId uses prevPhraseLink analysisId when prevPhraseLink is defined and not inSamePhrase', () => {
-    const prevPhrase = makePhraseLink('p1', ['tok-a']);
-    const nextPhrase = makePhraseLink('p2', ['tok-b']);
-    renderIcon(
-      <TokenLinkIcon
-        {...requiredProps()}
-        prevPhraseLink={prevPhrase}
-        nextPhraseLink={nextPhrase}
-      />,
-    );
-    // prevPhraseLink.analysisId is defined and different from nextPhraseLink.analysisId (not same phrase)
-    // candidatePhraseId = prevPhraseLink.analysisId = 'p1'
-    expect(screen.getByTestId('token-link-btn')).toBeInTheDocument();
-  });
-
-  it('does not attach hover handlers to unlink button when no candidatePhraseId and no splitFreeRefs', () => {
-    // A 2-token phrase where both halves free (splitFreeRefs has 2 items).
-    // Set candidatePhraseId to undefined and splitFreeRefs to [] (no tokens to free).
-    // This is only possible when a phrase has ≥ 4 tokens and the boundary is in the middle
-    // (both halves ≥ 2 tokens). Use a 4-token phrase split at tok-b (before=[tok-a,tok-b], after=[tok-c,tok-d]).
-    const phraseLink = makePhraseLink('p1', ['tok-a', 'tok-b', 'tok-c', 'tok-d']);
-    renderIcon(
-      <TokenLinkIcon
-        {...requiredProps()}
-        prevPhraseLink={phraseLink}
-        nextPhraseLink={phraseLink}
-      />,
-      {
-        tokenDocOrder: new Map([
-          ['tok-a', 0],
-          ['tok-b', 1],
-          ['tok-c', 2],
-          ['tok-d', 3],
-        ]),
-      },
-    );
-    // Both halves have 2 tokens — no tokens become free — so onMouseEnter is not wired
-    expect(screen.getByTestId('token-unlink-btn')).toBeInTheDocument();
-  });
-
   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 = makeWordToken('tok-a');
diff --git a/src/__tests__/components/controls/ViewOptionsDropdown.test.tsx b/src/__tests__/components/controls/ViewOptionsDropdown.test.tsx
index 9f86c077..7d2f40f4 100644
--- a/src/__tests__/components/controls/ViewOptionsDropdown.test.tsx
+++ b/src/__tests__/components/controls/ViewOptionsDropdown.test.tsx
@@ -72,16 +72,24 @@ describe('ViewOptionsDropdown', () => {
     expect(screen.queryByTestId('view-options-panel')).not.toBeInTheDocument();
   });
 
-  it('renders labels from useLocalizedStrings for all three toggles', async () => {
+  it('renders labels from useLocalizedStrings for all six toggles', async () => {
     render(<ViewOptionsDropdown {...DEFAULT_PROPS} />);
     await userEvent.click(screen.getByTestId('view-options-button'));
 
-    // The papi-frontend-react mock returns each key as its own label value.
+    // The mock returns each key as its own label value, so every toggle's
+    // localization key must surface as visible text — one assertion per toggle.
     expect(screen.getByText('%interlinearizer_viewOption_continuousScroll%')).toBeInTheDocument();
+    expect(screen.getByText('%interlinearizer_viewOption_showMorphology%')).toBeInTheDocument();
+    expect(
+      screen.getByText('%interlinearizer_viewOption_showFreeTranslation%'),
+    ).toBeInTheDocument();
     expect(
       screen.getByText('%interlinearizer_viewOption_hideInactiveLinkButtons%'),
     ).toBeInTheDocument();
     expect(screen.getByText('%interlinearizer_viewOption_simplifyPhrases%')).toBeInTheDocument();
+    expect(
+      screen.getByText('%interlinearizer_viewOption_chapterLabelInVerse%'),
+    ).toBeInTheDocument();
   });
 
   describe('panel positioning', () => {
diff --git a/src/__tests__/components/modals/ProjectMetadataModal.test.tsx b/src/__tests__/components/modals/ProjectMetadataModal.test.tsx
index e7cdf146..28864e52 100644
--- a/src/__tests__/components/modals/ProjectMetadataModal.test.tsx
+++ b/src/__tests__/components/modals/ProjectMetadataModal.test.tsx
@@ -5,7 +5,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 papi, { logger } from '@papi/frontend';
 import { ProjectMetadataModal } from '../../../components/modals/ProjectMetadataModal';
 
 const mockSendCommand = jest.mocked(papi.commands.sendCommand);
@@ -208,7 +208,7 @@ describe('ProjectMetadataModal', () => {
     expect(onClose).not.toHaveBeenCalled();
   });
 
-  it('does not call onProjectSaved, onClose, or send a notification when save sendCommand rejects', async () => {
+  it('logs the failure and does not call onProjectSaved or onClose when save sendCommand rejects', async () => {
     mockSendCommand.mockRejectedValue(new Error('save failed'));
     const onProjectSaved = jest.fn();
     const onClose = jest.fn();
@@ -218,13 +218,12 @@ describe('ProjectMetadataModal', () => {
 
     await userEvent.click(screen.getByRole('button', { name: /^save$/i }));
 
-    await waitFor(() => expect(mockSendCommand).toHaveBeenCalled());
+    await waitFor(() => expect(jest.mocked(logger.error)).toHaveBeenCalled());
     expect(onProjectSaved).not.toHaveBeenCalled();
     expect(onClose).not.toHaveBeenCalled();
-    expect(papi.notifications.send).not.toHaveBeenCalled();
   });
 
-  it('does not call onProjectDeleted, onClose, or send a notification when delete sendCommand rejects', async () => {
+  it('logs the failure and does not call onProjectDeleted or onClose when delete sendCommand rejects', async () => {
     mockSendCommand.mockRejectedValue(new Error('delete failed'));
     const onProjectDeleted = jest.fn();
     const onClose = jest.fn();
@@ -235,10 +234,9 @@ describe('ProjectMetadataModal', () => {
     await userEvent.click(screen.getByRole('button', { name: /^delete$/i }));
     await userEvent.click(screen.getByRole('button', { name: /^delete$/i }));
 
-    await waitFor(() => expect(mockSendCommand).toHaveBeenCalled());
+    await waitFor(() => expect(jest.mocked(logger.error)).toHaveBeenCalled());
     expect(onProjectDeleted).not.toHaveBeenCalled();
     expect(onClose).not.toHaveBeenCalled();
-    expect(papi.notifications.send).not.toHaveBeenCalled();
   });
 
   it('trims whitespace from the language input before saving', async () => {
diff --git a/src/__tests__/components/modals/ProjectModals.test.tsx b/src/__tests__/components/modals/ProjectModals.test.tsx
index c29896e0..c7588b9b 100644
--- a/src/__tests__/components/modals/ProjectModals.test.tsx
+++ b/src/__tests__/components/modals/ProjectModals.test.tsx
@@ -277,37 +277,24 @@ function buildProps(overrides: ModalsOverrides = {}) {
 }
 
 /**
- * Builds a `useWebViewState` stub whose reset callback for the `'activeProject'` key is the given
- * spy, so a test can assert the active project was cleared (other keys get a no-op reset). Mirrors
+ * Builds a `useWebViewState` stub with optional spies on the setter and/or reset for the
+ * `'activeProject'` key, so a test can assert how the active project was updated or cleared. Any
+ * unspecified spy — and every key other than `'activeProject'` — gets a no-op. Mirrors
  * {@link makeWebViewState}'s `[value, setter, reset]` shape without type assertions.
  *
- * @param resetActiveProject - Spy invoked when the `'activeProject'` slot is reset.
+ * @param spies - The spies to install for the `'activeProject'` slot.
+ * @param spies.set - Spy invoked when the `'activeProject'` slot's setter is called.
+ * @param spies.reset - Spy invoked when the `'activeProject'` slot is reset.
  * @returns A `useWebViewState`-shaped hook stub.
  */
-function makeWebViewStateWithResetSpy(resetActiveProject: () => void) {
+function makeWebViewStateWithActiveProjectSpies({
+  set = () => {},
+  reset = () => {},
+}: Readonly<{ set?: (v: unknown) => void; reset?: () => void }> = {}) {
   return <T,>(key: string, defaultValue: T): [T, (v: T) => void, () => void] => [
     defaultValue,
-    () => {},
-    key === 'activeProject' ? resetActiveProject : () => {},
-  ];
-}
-
-/**
- * Builds a `useWebViewState` stub with spies on both the setter and the reset for the
- * `'activeProject'` key, so tests can assert which path was taken after a create attempt.
- *
- * @param setActiveProject - Spy invoked when the `'activeProject'` slot is set.
- * @param resetActiveProject - Spy invoked when the `'activeProject'` slot is reset.
- * @returns A `useWebViewState`-shaped hook stub.
- */
-function makeWebViewStateWithActiveProjectSpies(
-  setActiveProject: jest.Mock,
-  resetActiveProject: jest.Mock,
-) {
-  return <T,>(key: string, defaultValue: T): [T, (v: T) => void, () => void] => [
-    defaultValue,
-    key === 'activeProject' ? setActiveProject : () => {},
-    key === 'activeProject' ? resetActiveProject : () => {},
+    key === 'activeProject' ? set : () => {},
+    key === 'activeProject' ? reset : () => {},
   ];
 }
 
@@ -483,10 +470,10 @@ describe('ProjectModals', () => {
             modal: 'create',
             newDraft,
             setModal,
-            useWebViewState: makeWebViewStateWithActiveProjectSpies(
-              setActiveProject,
-              resetActiveProject,
-            ),
+            useWebViewState: makeWebViewStateWithActiveProjectSpies({
+              set: setActiveProject,
+              reset: resetActiveProject,
+            }),
           })}
         />,
       );
@@ -522,7 +509,7 @@ describe('ProjectModals', () => {
             modal: 'create',
             newDraft,
             setModal,
-            useWebViewState: makeWebViewStateWithResetSpy(resetActiveProject),
+            useWebViewState: makeWebViewStateWithActiveProjectSpies({ reset: resetActiveProject }),
           })}
         />,
       );
@@ -555,7 +542,7 @@ describe('ProjectModals', () => {
           {...buildProps({
             modal: 'create',
             setModal,
-            useWebViewState: makeWebViewStateWithResetSpy(resetActiveProject),
+            useWebViewState: makeWebViewStateWithActiveProjectSpies({ reset: resetActiveProject }),
           })}
         />,
       );
@@ -667,7 +654,7 @@ describe('ProjectModals', () => {
             modal: 'create',
             dirty: true,
             setModal,
-            useWebViewState: makeWebViewStateWithActiveProjectSpies(setActiveProject, jest.fn()),
+            useWebViewState: makeWebViewStateWithActiveProjectSpies({ set: setActiveProject }),
           })}
         />,
       );
@@ -844,24 +831,32 @@ describe('ProjectModals', () => {
 
     it('updates the active project when the saved project is the active one', async () => {
       const setModal = jest.fn();
-      const useWebViewState = makeWebViewState();
+      const setActiveProject = jest.fn();
       render(
         <ProjectModals
           {...buildProps({
             modal: 'metadata',
             activeProject: MOCK_PROJECT,
             setModal,
-            useWebViewState,
+            useWebViewState: makeWebViewStateWithActiveProjectSpies({ set: setActiveProject }),
           })}
         />,
       );
       await userEvent.click(screen.getByTestId('metadata-save'));
+      // The saved edits ({ name: 'Updated', analysisLanguages: ['fr'] }) are merged onto the active
+      // project, so a regression that drops the update branch (ProjectModals.tsx:142) is caught here.
+      expect(setActiveProject).toHaveBeenCalledWith({
+        ...MOCK_PROJECT,
+        name: 'Updated',
+        analysisLanguages: ['fr'],
+      });
       expect(setModal).toHaveBeenCalledWith('none');
     });
 
     it('does not update the active project when the saved project is a different one', async () => {
       const setModal = jest.fn();
-      const useWebViewState = makeWebViewState();
+      const setActiveProject = jest.fn();
+      const useWebViewState = makeWebViewStateWithActiveProjectSpies({ set: setActiveProject });
       const { rerender } = render(
         <ProjectModals
           {...buildProps({
@@ -872,6 +867,7 @@ describe('ProjectModals', () => {
           })}
         />,
       );
+      // View info for proj-2 while proj-1 is the active project, so the saved id differs.
       await userEvent.click(screen.getByTestId('select-view-info-2'));
       rerender(
         <ProjectModals
@@ -885,13 +881,17 @@ describe('ProjectModals', () => {
       );
       setModal.mockClear();
       await userEvent.click(screen.getByTestId('metadata-save'));
+      // The id guard (ProjectModals.tsx:141) skips the update because the saved project (proj-2)
+      // is not the active one (proj-1); dropping that guard would call setActiveProject and fail.
+      expect(setActiveProject).not.toHaveBeenCalled();
       // Opened via the select modal's info icon, so closing returns to the select modal.
       expect(setModal).toHaveBeenCalledWith('select');
     });
 
     it('does not update the active project when there is none on save', async () => {
       const setModal = jest.fn();
-      const useWebViewState = makeWebViewState();
+      const setActiveProject = jest.fn();
+      const useWebViewState = makeWebViewStateWithActiveProjectSpies({ set: setActiveProject });
       const { rerender } = render(
         <ProjectModals {...buildProps({ modal: 'select', setModal, useWebViewState })} />,
       );
@@ -899,29 +899,36 @@ describe('ProjectModals', () => {
       rerender(<ProjectModals {...buildProps({ modal: 'metadata', setModal, useWebViewState })} />);
       setModal.mockClear();
       await userEvent.click(screen.getByTestId('metadata-save'));
+      // With no active project, the `activeProject &&` guard (ProjectModals.tsx:141) short-circuits;
+      // dropping that guard would dereference/update the active project and call setActiveProject.
+      expect(setActiveProject).not.toHaveBeenCalled();
       expect(setModal).toHaveBeenCalledWith('select');
     });
 
     it('resets the active project when the deleted project is the active one', async () => {
       const setModal = jest.fn();
-      const useWebViewState = makeWebViewState();
+      const resetActiveProject = jest.fn();
       render(
         <ProjectModals
           {...buildProps({
             modal: 'metadata',
             activeProject: MOCK_PROJECT,
             setModal,
-            useWebViewState,
+            useWebViewState: makeWebViewStateWithActiveProjectSpies({ reset: resetActiveProject }),
           })}
         />,
       );
+      // Delete targets MOCK_PROJECT.id, which is the active project, so reset must fire.
       await userEvent.click(screen.getByTestId('metadata-delete'));
+      // A regression that drops the reset (ProjectModals.tsx:156) is caught here.
+      expect(resetActiveProject).toHaveBeenCalledTimes(1);
       expect(setModal).toHaveBeenCalledWith('none');
     });
 
     it('does not reset the active project when a different project is deleted', async () => {
       const setModal = jest.fn();
-      const useWebViewState = makeWebViewState();
+      const resetActiveProject = jest.fn();
+      const useWebViewState = makeWebViewStateWithActiveProjectSpies({ reset: resetActiveProject });
       const { rerender } = render(
         <ProjectModals
           {...buildProps({
@@ -944,13 +951,17 @@ describe('ProjectModals', () => {
         />,
       );
       setModal.mockClear();
+      // Delete targets proj-2 while proj-1 is active, so the id guard must skip the reset.
       await userEvent.click(screen.getByTestId('metadata-delete-2'));
+      // The id guard (ProjectModals.tsx:156) prevents the reset; removing it would reset proj-1.
+      expect(resetActiveProject).not.toHaveBeenCalled();
       expect(setModal).toHaveBeenCalledWith('select');
     });
 
     it('does not reset the active project when there is none on delete', async () => {
       const setModal = jest.fn();
-      const useWebViewState = makeWebViewState();
+      const resetActiveProject = jest.fn();
+      const useWebViewState = makeWebViewStateWithActiveProjectSpies({ reset: resetActiveProject });
       const { rerender } = render(
         <ProjectModals {...buildProps({ modal: 'select', setModal, useWebViewState })} />,
       );
@@ -958,6 +969,9 @@ describe('ProjectModals', () => {
       rerender(<ProjectModals {...buildProps({ modal: 'metadata', setModal, useWebViewState })} />);
       setModal.mockClear();
       await userEvent.click(screen.getByTestId('metadata-delete'));
+      // With no active project, the `activeProject?.id === deletedId` guard (ProjectModals.tsx:156)
+      // is false, so no reset fires; a regression that always resets would call resetActiveProject.
+      expect(resetActiveProject).not.toHaveBeenCalled();
       expect(setModal).toHaveBeenCalledWith('select');
     });
 
diff --git a/src/__tests__/hooks/useOptimisticBooleanSetting.test.ts b/src/__tests__/hooks/useOptimisticBooleanSetting.test.ts
index e0d8ce41..020215ee 100644
--- a/src/__tests__/hooks/useOptimisticBooleanSetting.test.ts
+++ b/src/__tests__/hooks/useOptimisticBooleanSetting.test.ts
@@ -93,11 +93,13 @@ describe('useOptimisticBooleanSetting', () => {
       useOptimisticBooleanSetting('project-1', SETTING_KEY, true),
     );
 
-    // Make an optimistic change and let the store return a conflicting value.
+    // Make an optimistic change to `false` and let the store report a value during the lock.
     act(() => {
       result.current.onChange(false);
     });
-    mockUseProjectSettings(true);
+    // Store reports `false` during the lock; the effect runs (setting changed
+    // undefined -> false) but is ignored, so the display stays at the optimistic value.
+    mockUseProjectSettings(false);
     rerender();
     expect(result.current.value).toBe(false); // Locked to optimistic value.
 
@@ -106,10 +108,14 @@ describe('useOptimisticBooleanSetting', () => {
       jest.advanceTimersByTime(TIMEOUT_MS);
     });
 
-    // The store value (true) should now be accepted when setting changes.
-    mockUseProjectSettings(false);
+    // The store now reports `true`, which both differs from the prior `setting` (so the
+    // effect re-runs) and from the current display value `false` (so acceptance is
+    // observable). With the lock released, the display must follow the store to `true`.
+    // If the timeout failed to release the lock, the effect early-returns and the
+    // display would remain `false`, failing this assertion.
+    mockUseProjectSettings(true);
     rerender();
-    expect(result.current.value).toBe(false);
+    expect(result.current.value).toBe(true);
   });
 
   it('clears the first timeout when onChange is called a second time', () => {
@@ -149,8 +155,10 @@ describe('useOptimisticBooleanSetting', () => {
     act(() => {
       jest.advanceTimersByTime(1_000);
     });
-    // Arriving setting is ignored while locked.
-    mockUseProjectSettings(false);
+    // Arriving setting is ignored while locked. The store reports `true` here so that the
+    // later post-lock value (`false`) both changes `setting` (re-running the effect) and
+    // differs from the current display value (`true`), making acceptance observable.
+    mockUseProjectSettings(true);
     rerender();
     expect(result.current.value).toBe(true); // locked; update blocked
 
@@ -158,10 +166,13 @@ describe('useOptimisticBooleanSetting', () => {
     act(() => {
       jest.advanceTimersByTime(TIMEOUT_MS - 1_000);
     });
-    // New setting value (different from the false that arrived during the lock) triggers the effect.
-    mockUseProjectSettings(true);
+    // The store now reports `false`, differing from both the prior `setting` (`true`) and
+    // the current display value (`true`). With the lock released the display must follow
+    // the store to `false`; if timer B failed to release the lock, the effect early-returns
+    // and the display would remain `true`, failing this assertion.
+    mockUseProjectSettings(false);
     rerender();
-    expect(result.current.value).toBe(true); // lock released; setting accepted
+    expect(result.current.value).toBe(false); // lock released; setting accepted
   });
 
   it('clears the pending timeout on unmount', () => {
diff --git a/src/__tests__/store/analysisSlice.test.ts b/src/__tests__/store/analysisSlice.test.ts
index d94a5079..7703b251 100644
--- a/src/__tests__/store/analysisSlice.test.ts
+++ b/src/__tests__/store/analysisSlice.test.ts
@@ -15,17 +15,14 @@ import { makePhraseLink } from '../test-helpers';
 import { emptyAnalysis } from '../../types/empty-factories';
 import {
   createPhrase,
-  defaultState,
   deleteMorphemes,
   deletePhrase,
   mergePhrases,
   selectApprovedGloss,
   selectApprovedMorphemes,
   selectPhraseLinkByTokenRef,
-  selectPhraseAnalysisById,
   selectPhraseGloss,
   selectPhraseLinks,
-  setAnalysis,
   selectSegmentFreeTranslation,
   updatePhrase,
   writeGloss,
@@ -63,23 +60,6 @@ function makeAnalysis(ta: TokenAnalysis): TextAnalysis {
   };
 }
 
-describe('setAnalysis', () => {
-  it('replaces the full analysis in state', () => {
-    const store = createAnalysisStore();
-    const next = makeAnalysis({ id: 'ta-1', surfaceText: 'word', gloss: { und: 'hi' } });
-
-    store.dispatch(setAnalysis(next));
-
-    expect(store.getState().analysis.analysis).toStrictEqual(next);
-  });
-
-  it('does not mutate analysisLanguage', () => {
-    const store = createAnalysisStore({ analysis: { ...defaultState, analysisLanguage: 'fr' } });
-    store.dispatch(setAnalysis(emptyAnalysis()));
-    expect(store.getState().analysis.analysisLanguage).toBe('fr');
-  });
-});
-
 describe('writeGloss', () => {
   it('removes an orphaned approved link and creates a fresh one', () => {
     // Orphaned state: an approved link whose analysisId has no matching TokenAnalysis.
@@ -564,27 +544,6 @@ describe('selectPhraseLinkByTokenRef', () => {
   });
 });
 
-describe('selectPhraseAnalysisById', () => {
-  it('returns the PhraseAnalysis for a known id', () => {
-    const link = makePhraseLink('phrase-1', ['tok-a']);
-    const store = createAnalysisStore({
-      analysis: { analysis: makeAnalysisWithPhrase(link), analysisLanguage: 'und' },
-    });
-
-    const result = selectPhraseAnalysisById(store.getState().analysis, 'phrase-1');
-
-    expect(result?.id).toBe('phrase-1');
-  });
-
-  it('returns undefined for an unknown id', () => {
-    const store = createAnalysisStore();
-
-    const result = selectPhraseAnalysisById(store.getState().analysis, 'nonexistent');
-
-    expect(result).toBeUndefined();
-  });
-});
-
 describe('writePhraseGloss', () => {
   it('writes the gloss for the active language on a phrase', () => {
     const link = makePhraseLink('phrase-1', ['tok-a']);
diff --git a/src/__tests__/utils/phrase-arc.test.ts b/src/__tests__/utils/phrase-arc.test.ts
index ae35e60b..ce48a2f6 100644
--- a/src/__tests__/utils/phrase-arc.test.ts
+++ b/src/__tests__/utils/phrase-arc.test.ts
@@ -533,8 +533,13 @@ describe('computeAllArcPaths', () => {
     const { paths } = computeAllArcPaths(container);
     const p1 = paths.find((p) => p.phraseId === 'p1');
     expect(p1).toBeDefined();
-    // The left gutter is content-left (10) minus the margin; the descent rides that x.
-    expect(p1?.d).toContain(`${10 - GUTTER_MARGIN_PX} `);
+    // The vertical descent rides the left gutter x = content-left (10) minus the margin. Read the x
+    // of the corner where the upper run turns down into the gutter (the SECOND rounded corner); a
+    // bare substring like '0 ' would also match the box-top of the 'M 30 0 ...' start and so could
+    // not distinguish left- from right-gutter routing.
+    const descentX = (d: string) =>
+      Number([...d.matchAll(/A [-\d.]+ [-\d.]+ 0 0 [01] ([-\d.]+) /g)][1]?.[1]);
+    expect(descentX(p1?.d ?? '')).toBe(10 - GUTTER_MARGIN_PX);
     // The run midpoint sits between the upper box center (30) and the left gutter → left of 30.
     expect(p1?.midX).toBeLessThan(30);
   });
diff --git a/src/__tests__/utils/token-layout.test.ts b/src/__tests__/utils/token-layout.test.ts
index 1e3cac63..318f37f4 100644
--- a/src/__tests__/utils/token-layout.test.ts
+++ b/src/__tests__/utils/token-layout.test.ts
@@ -198,7 +198,7 @@ describe('groupTokens', () => {
     expect(groups[0].phraseLink?.analysisId).toBe('p1');
   });
 
-  it('produces two groups for a discontiguous phrase', () => {
+  it('produces three groups (two phrase fragments plus the intervening free token) for a discontiguous phrase', () => {
     const link = makePhraseLink('p1', ['tok-a', 'tok-c']);
     const phraseLinkByRef = new Map([
       ['tok-a', link],
diff --git a/src/components/AnalysisStore.tsx b/src/components/AnalysisStore.tsx
index d483d30f..6bbc877a 100644
--- a/src/components/AnalysisStore.tsx
+++ b/src/components/AnalysisStore.tsx
@@ -273,9 +273,9 @@ export function useAnalysis(): TextAnalysis {
 }
 
 /**
- * Returns the stable `onGlossChange` callback from the nearest {@link AnalysisStoreProvider}. The
- * callback creates or updates the approved `TokenAnalysis` for the token on each call, then
- * synchronously invokes `onSave` and the `onGlossChange` spy.
+ * Returns a stable callback that creates or updates the approved `TokenAnalysis` for a token, then
+ * synchronously invokes `onSave` and the optional `onGlossChange` spy. The `onGlossChange` spy is
+ * test-only observability and has no effect on store behavior (see {@link AnalysisStoreProvider}).
  *
  * @returns A function `(tokenRef, surfaceText, value) => void`.
  * @throws When called outside an {@link AnalysisStoreProvider}.
@@ -321,8 +321,9 @@ export function useMorphemeBreakdownDispatch(): (
 
 /**
  * Returns a stable callback that removes the morpheme breakdown from the approved `TokenAnalysis`
- * for a given token (deleting the analysis record entirely when it carries no gloss). Dispatches
- * the `deleteMorphemes` action and triggers `onSave`.
+ * for a given token (deleting the analysis record entirely when removing the breakdown leaves it
+ * with no other content — no gloss, POS, features, or lexicon sense reference). Dispatches the
+ * `deleteMorphemes` action and triggers `onSave`.
  *
  * @returns A function `(tokenRef) => void`.
  * @throws When called outside an {@link AnalysisStoreProvider}.
diff --git a/src/components/ArcOverlay.tsx b/src/components/ArcOverlay.tsx
index 9fc7d0a4..c7a20c01 100644
--- a/src/components/ArcOverlay.tsx
+++ b/src/components/ArcOverlay.tsx
@@ -6,13 +6,18 @@ import { computeSplitFreeRefs, getArcStrokeProps, type ArcPath } from '../utils/
 
 /**
  * Identifies one specific arc boundary by phrase id and the token immediately before the split,
- * plus whether splitting there would free a token. `kind` drives the hovered arc's stroke: a `free`
- * split shows the destructive preview, while a `reshape` split (both halves stay ≥ 2 tokens) merely
- * dims the hovered segment to communicate that this one connection would disappear.
+ * plus whether splitting there would free a token.
  */
 export type ArcSplitTarget = {
+  /** Id of the phrase whose arc boundary this identifies. */
   phraseId: string;
+  /** Token ref immediately before the split boundary. */
   splitAfterTokenRef: string;
+  /**
+   * Whether splitting here would free a token, which drives the hovered arc's stroke: a `free`
+   * split shows the destructive preview, while a `reshape` split (both halves stay ≥ 2 tokens)
+   * merely dims the hovered segment to communicate that this one connection would disappear.
+   */
   kind: 'free' | 'reshape';
 };
 
@@ -180,6 +185,11 @@ export function ArcOverlay({
   /**
    * Assigns a paint-order priority so highlighted arcs render on top of dimmed ones inside the
    * single SVG (last element wins). Split-hovered > focused > hovered/candidate > everything else.
+   *
+   * @param phraseId - The arc segment's phrase id.
+   * @param splitAfterTokenRef - Token ref at whose right edge this segment's split would occur.
+   * @returns The paint-order priority: 3 = split-hovered, 2 = focused, 1 = hovered/candidate, 0 =
+   *   otherwise.
    */
   const paintPriority = (phraseId: string, splitAfterTokenRef: string): number => {
     if (isSplitHovered(phraseId, splitAfterTokenRef)) return 3;
@@ -250,6 +260,13 @@ export function ArcOverlay({
   // (but above the arcs) and remain hoverable and clickable in the gap below the boxes.
   // Destructive-hovered arc segments are promoted to the hovered layer so the red stroke is never
   // occluded by arcs above it, matching the hovered-tier button at z-6.
+  /**
+   * Like {@link tierOf}, but promotes a destructive (`free`) split-hovered segment to the `hovered`
+   * tier so its red stroke renders above other arcs.
+   *
+   * @param arc - The arc path to classify.
+   * @returns The emphasis tier the arc should be painted in.
+   */
   const effectiveTierOf = (arc: ArcPath): EmphasisTier => {
     if (isSplitHovered(arc.phraseId, arc.splitAfterTokenRef) && splitHoveredArc?.kind === 'free')
       return 'hovered';
diff --git a/src/components/InterlinearNavContext.tsx b/src/components/InterlinearNavContext.tsx
index 379a1b13..9e6b3845 100644
--- a/src/components/InterlinearNavContext.tsx
+++ b/src/components/InterlinearNavContext.tsx
@@ -325,6 +325,9 @@ export function InterlinearNavProvider({
   /** Handle of the in-flight fade-in→idle timer, or `undefined` when none is pending. */
   const fadeInTimeoutRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
 
+  /** Verse key of the live ref, computed once for the cross-book / mid-reveal render guards below. */
+  const liveKey = verseKey(liveScrRef);
+
   // Detect a cross-book navigation *during render* and start the fade-out synchronously, so the
   // curtain drops in the same commit the book ref changes — never a paint later (an effect-driven
   // fade-out would let the mounted views render one frame against the new book's ref before the
@@ -339,8 +342,8 @@ export function InterlinearNavProvider({
     setFadePhase('out');
   } else if (
     fadePhase === 'in' &&
-    verseKey(liveScrRef) !== verseKey(prevLiveScrRef) &&
-    !isInternalNavMarkerFresh(pendingInternalNavRef.current.get(verseKey(liveScrRef)))
+    liveKey !== verseKey(prevLiveScrRef) &&
+    !isInternalNavMarkerFresh(pendingInternalNavRef.current.get(liveKey))
   ) {
     // A follow-up external navigation landing mid-fade-in: the host resolves one picker selection
     // as two navigations (book change, then precise target), so the second routinely arrives while
diff --git a/src/components/InterlinearizerLoader.tsx b/src/components/InterlinearizerLoader.tsx
index 8db29fd0..70a0ce45 100644
--- a/src/components/InterlinearizerLoader.tsx
+++ b/src/components/InterlinearizerLoader.tsx
@@ -373,8 +373,9 @@ function InterlinearizerLoaderInner({
   );
 
   /**
-   * Fetches the top-menu data for this WebView from the platform's menu data provider, hiding "View
-   * Project Info" when no interlinear project is currently active.
+   * Fetches the raw top-menu data for this WebView from the platform's menu data provider. This
+   * call performs no filtering; the active-project hiding of the "View Project Info" item is
+   * applied separately in {@link projectMenuData}.
    */
   const [webViewMenuPossiblyError] = useData(papi.menuData.dataProviderName).WebViewMenu(
     'interlinearizer.mainWebView',
diff --git a/src/components/PhraseBox.tsx b/src/components/PhraseBox.tsx
index fbc51da4..4907cad4 100644
--- a/src/components/PhraseBox.tsx
+++ b/src/components/PhraseBox.tsx
@@ -129,7 +129,7 @@ type PhraseBoxProps = Readonly<{
  * In `edit` mode:
  *
  * - Tokens belonging to the active target phrase render with a "selected" outline.
- * - Tokens belonging to a _different_ phrase render disabled (greyed, `aria-disabled`, no click).
+ * - Tokens belonging to a _different_ phrase render disabled (grayed, `aria-disabled`, no click).
  * - Tokens in segments other than the edited phrase's segment also render disabled, enforcing the
  *   single-segment phrase invariant.
  * - Free tokens (not in any phrase) in the same segment render as click targets for adding them to
@@ -154,6 +154,8 @@ type PhraseBoxProps = Readonly<{
  *   highlighted border style simultaneously
  * @param props.splitFreeTokenRefs - Token refs that would become free after a hovered split; each
  *   matching chip renders with a destructive border as a preview
+ * @param props.punctuationBetween - Punctuation tokens between adjacent word tokens, in document
+ *   order; `punctuationBetween[i]` sits between `tokens[i]` and `tokens[i+1]`
  * @returns A bordered inline container
  */
 export function PhraseBox({
@@ -231,6 +233,11 @@ export function PhraseBox({
     e.currentTarget.querySelector<HTMLInputElement>('input:not([data-morpheme-gloss])')?.focus();
   }, []);
 
+  /**
+   * Enters phrase `edit` mode for this box's phrase, seeding the edit set with its current tokens
+   * (kept as `originalTokens` so the edit can be diffed or canceled). No-op when this box has no
+   * real phrase link.
+   */
   const handleEditClick = useCallback(() => {
     if (phraseLink)
       setPhraseMode({
@@ -240,6 +247,10 @@ export function PhraseBox({
       });
   }, [phraseLink, setPhraseMode]);
 
+  /**
+   * Begins the unlink-confirmation flow for this box's phrase by switching to `confirm-unlink`
+   * mode. No-op when this box has no real phrase link.
+   */
   const handleUnlinkClick = useCallback(() => {
     if (phraseLink) setPhraseMode({ kind: 'confirm-unlink', phraseId: phraseLink.analysisId });
   }, [phraseLink, setPhraseMode]);
@@ -487,6 +498,13 @@ export function PhraseBox({
   })();
 
   if (isInEditTarget) {
+    /**
+     * Builds a keydown handler that removes the given token from the edited phrase on Enter/Space,
+     * so each token chip is removable via the keyboard as well as by click.
+     *
+     * @param tokenRef - Ref of the token the returned handler removes.
+     * @returns A keydown event handler for that token's chip.
+     */
     const handlePerTokenKeyDown = (tokenRef: string) => (e: KeyboardEvent) => {
       if (e.key === 'Enter' || e.key === ' ') {
         e.preventDefault();
@@ -530,12 +548,22 @@ export function PhraseBox({
     );
   }
 
+  /**
+   * Adds this box's lone free token to the phrase being edited; no-op when the box is disabled or
+   * its token already belongs to a phrase.
+   */
   const handleBoxClick = () => {
     /* v8 ignore next -- isDisabled box uses aria-disabled; keyboard focus is prevented */
     if (isDisabled) return;
     if (!isInAnyPhrase) handleEditAdd(tokens[0].ref, tokens[0].surfaceText);
   };
 
+  /**
+   * Keyboard counterpart to {@link handleBoxClick}: Enter/Space add this box's free token to the
+   * edited phrase, ignored while the box is disabled.
+   *
+   * @param e - The container's keydown event.
+   */
   const handleKeyDown = (e: KeyboardEvent) => {
     if (!isDisabled && (e.key === 'Enter' || e.key === ' ')) {
       e.preventDefault();
diff --git a/src/components/SegmentView.tsx b/src/components/SegmentView.tsx
index 305c6e29..d7918459 100644
--- a/src/components/SegmentView.tsx
+++ b/src/components/SegmentView.tsx
@@ -78,8 +78,9 @@ type SegmentViewProps = Readonly<{
   /** Word token ref → token lookup for the whole book; used to resolve focus context. */
   wordTokenByRef: ReadonlyMap<string, Token & { type: 'word' }>;
   /**
-   * Bundled display toggles; `chapterLabelInVerse` sets the verse label, the rest pass through to
-   * {@link PhraseStripContextValue}.
+   * Bundled display toggles; `chapterLabelInVerse` sets the verse label and `showFreeTranslation`
+   * gates the free-translation input, while `hideInactiveLinkButtons`, `simplifyPhrases`, and
+   * `showMorphology` pass through to {@link PhraseStripContextValue}.
    */
   viewOptions: ViewOptions;
 }>;
@@ -109,8 +110,9 @@ type SegmentViewProps = Readonly<{
  * @param props.tokenDocOrder - Book-level map from word token ref to flat document index; used to
  *   sort phrase tokens across segment boundaries.
  * @param props.wordTokenByRef - Word token ref → token lookup; used to resolve focus context.
- * @param props.viewOptions - Bundled display toggles; `chapterLabelInVerse` sets the verse label,
- *   the rest pass through to the phrase strip context.
+ * @param props.viewOptions - Bundled display toggles; `chapterLabelInVerse` sets the verse label
+ *   and `showFreeTranslation` gates the free-translation input, while `hideInactiveLinkButtons`,
+ *   `simplifyPhrases`, and `showMorphology` pass through to the phrase strip context.
  * @returns A div containing a verse label and the segment content (baseline text or token chips)
  */
 export function SegmentView({
@@ -177,11 +179,7 @@ export function SegmentView({
   // it stays a bare verse number (the chapter is carried by SegmentListView's inline header).
   const verseLabelText = chapterLabelInVerse ? `${chapter}:${verse}` : `${verse}`;
 
-  const segmentHeader = (
-    <span className="tw:mb-2 tw:block tw:text-xs tw:font-medium tw:text-muted-foreground tw:uppercase tw:tracking-wide">
-      {verseLabelText}
-    </span>
-  );
+  const segmentHeader = <span className="tw:section-label tw:mb-2 tw:block">{verseLabelText}</span>;
 
   /**
    * `false` until just after the first paint, then `true`. Gates the link-slot fade transition: the
diff --git a/src/components/TokenChip.tsx b/src/components/TokenChip.tsx
index 55d490a9..7b139c13 100644
--- a/src/components/TokenChip.tsx
+++ b/src/components/TokenChip.tsx
@@ -98,6 +98,13 @@ export function TokenChip({
     if (!showMorphology || disabled) setPopoverOpen(false);
   }, [showMorphology, disabled]);
 
+  /**
+   * Intercepts mouse-down on the gloss input to suppress the browser's built-in focus-and-scroll,
+   * then re-focuses the input with `preventScroll` so only the React-controlled smooth
+   * scrollIntoView fires.
+   *
+   * @param e - The gloss input's mouse-down event.
+   */
   const handleMouseDown: MouseEventHandler<HTMLInputElement> = (e) => {
     // Prevent the browser's built-in focus-and-scroll so only the React-controlled
     // smooth scrollIntoView fires. We re-focus manually with preventScroll instead.
diff --git a/src/components/TokenLinkIcon.tsx b/src/components/TokenLinkIcon.tsx
index dd445516..e179787b 100644
--- a/src/components/TokenLinkIcon.tsx
+++ b/src/components/TokenLinkIcon.tsx
@@ -39,7 +39,7 @@ type TokenLinkIconProps = Readonly<{
  *
  * Otherwise renders `Link2` (link): clicking joins the non-focused-side neighbor to the focused
  * side. The icon is active whenever `focusedSideIsPrev` is defined and the resulting join is valid.
- * Both icon types are suppressed (return `undefined`) when neither side has a word token.
+ * Both icon types are suppressed (return `undefined`) when either side lacks a word token.
  *
  * **Link semantics** (`focusedSideIsPrev` determines direction; only active when both neighbors are
  * in the same segment as focus):
@@ -209,13 +209,11 @@ export function TokenLinkIcon({
   // In edit mode, unlink buttons for phrases other than the one being edited are disabled.
   const isEditMode = phraseMode.kind === 'edit';
 
-  // The phrase to highlight when hovering this icon: the shared phrase (unlink) or whichever side
-  // has a phrase (link). Used to light up the associated phrase box and arcs.
-  const candidatePhraseId = inSamePhrase
-    ? prevPhraseLink?.analysisId
-    : (prevPhraseLink?.analysisId ?? nextPhraseLink?.analysisId);
-
   if (inSamePhrase) {
+    // The phrase to highlight when hovering the unlink icon: the shared phrase. Used to light up the
+    // associated phrase box and arcs. Always defined here since `inSamePhrase` requires both links.
+    const candidatePhraseId = prevPhraseLink?.analysisId;
+
     const unlinkDisabled =
       isUnlinkMode || (isEditMode && prevPhraseLink?.analysisId !== phraseMode.phraseId);
 
diff --git a/src/components/controls/ScriptureNavControls.tsx b/src/components/controls/ScriptureNavControls.tsx
index 46528539..ddd63a1d 100644
--- a/src/components/controls/ScriptureNavControls.tsx
+++ b/src/components/controls/ScriptureNavControls.tsx
@@ -1,5 +1,4 @@
 import { useLocalizedStrings, useRecentScriptureRefs } from '@papi/frontend/react';
-import { useMemo } from 'react';
 import {
   BOOK_CHAPTER_CONTROL_STRING_KEYS,
   BookChapterControl,
@@ -11,6 +10,13 @@ import {
 /** Fixed set of scroll-group IDs offered in the selector; `undefined` means "unlinked". */
 const AVAILABLE_SCROLL_GROUPS = [undefined, 0, 1, 2, 3, 4];
 
+/**
+ * Localized string keys for {@link BookChapterControl}, hoisted to module scope so the array
+ * reference passed to `useLocalizedStrings` is stable across renders (a fresh array each render
+ * would make the hook re-fetch every render). Mirrors the `STRING_KEYS` pattern in the views.
+ */
+const STRING_KEYS = [...BOOK_CHAPTER_CONTROL_STRING_KEYS];
+
 /**
  * Props for {@link ScriptureNavControls}. Combines the scripture-reference fields from
  * `BookChapterControlProps` with the scroll-group fields from `ScrollGroupSelectorProps`.
@@ -35,9 +41,7 @@ export default function ScriptureNavControls({
   scrollGroupId,
   onChangeScrollGroupId,
 }: ScriptureNavControlsProps) {
-  const [localizedStrings] = useLocalizedStrings(
-    useMemo(() => [...BOOK_CHAPTER_CONTROL_STRING_KEYS], []),
-  );
+  const [localizedStrings] = useLocalizedStrings(STRING_KEYS);
   const { recentScriptureRefs: recentRefs, addRecentScriptureRef: onAddRecentRef } =
     useRecentScriptureRefs();
 
diff --git a/src/components/controls/ViewOptionsDropdown.tsx b/src/components/controls/ViewOptionsDropdown.tsx
index 27b51f19..1bc1e79f 100644
--- a/src/components/controls/ViewOptionsDropdown.tsx
+++ b/src/components/controls/ViewOptionsDropdown.tsx
@@ -56,9 +56,12 @@ type ViewOptionsDropdownProps = Readonly<{
   hideInactiveLinkButtons: boolean;
   /** Called when the hide-inactive-link-buttons toggle changes. */
   onHideInactiveLinkButtonsChange: (checked: boolean) => void;
-  /** Current value of the dim-inactive-segments toggle. */
+  /**
+   * Current value of the simplify-phrases toggle. When on, only the focused phrase exposes
+   * interactive controls; every other phrase hides them.
+   */
   simplifyPhrases: boolean;
-  /** Called when the dim-inactive-segments toggle changes. */
+  /** Called when the simplify-phrases toggle changes. */
   onSimplifyPhrasesChange: (checked: boolean) => void;
   /** Current value of the show-chapter-in-verse-label toggle. */
   chapterLabelInVerse: boolean;
@@ -84,8 +87,8 @@ type ViewOptionsDropdownProps = Readonly<{
  * @param props.onContinuousScrollChange - Continuous-scroll change callback.
  * @param props.hideInactiveLinkButtons - Current hide-inactive-link-buttons value.
  * @param props.onHideInactiveLinkButtonsChange - Hide-inactive-link-buttons change callback.
- * @param props.simplifyPhrases - Current dim-inactive-segments value.
- * @param props.onSimplifyPhrasesChange - Dim-inactive-segments change callback.
+ * @param props.simplifyPhrases - Current simplify-phrases value.
+ * @param props.onSimplifyPhrasesChange - Simplify-phrases change callback.
  * @param props.chapterLabelInVerse - Current show-chapter-in-verse-label value.
  * @param props.onChapterLabelInVerseChange - Show-chapter-in-verse-label change callback.
  * @param props.showMorphology - Current show-morphology value.
diff --git a/src/components/modals/ConfirmDialog.tsx b/src/components/modals/ConfirmDialog.tsx
new file mode 100644
index 00000000..33dd6c53
--- /dev/null
+++ b/src/components/modals/ConfirmDialog.tsx
@@ -0,0 +1,63 @@
+/** @file Shared confirm/cancel dialog for destructive or discard confirmations. */
+import { Button } from 'platform-bible-react';
+import { ModalShell } from './ModalShell';
+
+/**
+ * A small modal asking the user to confirm or cancel a single action (a destructive wipe, a discard
+ * of unsaved work, etc.). Presentational: it renders the shared {@link ModalShell} chrome with a
+ * body paragraph and a secondary Cancel / destructive Confirm pair, and delegates the decision to
+ * the caller via {@link onConfirm} / {@link onCancel}.
+ *
+ * @param props - Component props
+ * @param props.titleId - DOM id wired to the dialog's `aria-labelledby` and title.
+ * @param props.title - Localized title text.
+ * @param props.body - Localized body text explaining the consequence.
+ * @param props.confirmLabel - Localized label for the destructive confirm button.
+ * @param props.cancelLabel - Localized label for the secondary cancel button.
+ * @param props.confirmTestId - `data-testid` placed on the confirm button so tests can target it.
+ * @param props.isSubmitting - When `true`, both buttons are disabled to prevent interaction while
+ *   the caller is processing the confirmed action.
+ * @param props.onConfirm - Called when the user confirms the action.
+ * @param props.onCancel - Called when the user backs out, leaving state untouched.
+ * @returns The confirmation overlay.
+ */
+export function ConfirmDialog({
+  titleId,
+  title,
+  body,
+  confirmLabel,
+  cancelLabel,
+  confirmTestId,
+  isSubmitting = false,
+  onConfirm,
+  onCancel,
+}: Readonly<{
+  titleId: string;
+  title: string;
+  body: string;
+  confirmLabel: string;
+  cancelLabel: string;
+  confirmTestId: string;
+  isSubmitting?: boolean;
+  onConfirm: () => void;
+  onCancel: () => void;
+}>) {
+  return (
+    <ModalShell titleId={titleId} title={title} width="tw:w-96">
+      <p className="tw:text-sm tw:mb-4">{body}</p>
+      <div className="tw:modal-actions">
+        <Button variant="secondary" onClick={onCancel} disabled={isSubmitting}>
+          {cancelLabel}
+        </Button>
+        <Button
+          variant="destructive"
+          onClick={onConfirm}
+          data-testid={confirmTestId}
+          disabled={isSubmitting}
+        >
+          {confirmLabel}
+        </Button>
+      </div>
+    </ModalShell>
+  );
+}
diff --git a/src/components/modals/CreateProjectModal.tsx b/src/components/modals/CreateProjectModal.tsx
index 35781efe..4b592336 100644
--- a/src/components/modals/CreateProjectModal.tsx
+++ b/src/components/modals/CreateProjectModal.tsx
@@ -1,6 +1,8 @@
 import { useLocalizedStrings } from '@papi/frontend/react';
 import { Button } from 'platform-bible-react';
 import { useState, useCallback } from 'react';
+import { parseLanguageTags } from '../../utils/language-tags';
+import { ModalShell } from './ModalShell';
 
 /** Localized string keys used by {@link CreateProjectModal}. */
 const CREATE_PROJECT_MODAL_STRING_KEYS: `%${string}%`[] = [
@@ -68,10 +70,7 @@ export function CreateProjectModal({
    * {@link onCreateDraft}.
    */
   const handleSubmit = useCallback(() => {
-    const parsedLanguages = analysisLanguages
-      .split(',')
-      .map((t) => t.trim())
-      .filter((t) => t.length > 0);
+    const parsedLanguages = parseLanguageTags(analysisLanguages);
     const normalizedAnalysisLanguages = parsedLanguages.length > 0 ? parsedLanguages : ['und'];
     onCreateDraft({
       analysisLanguages: normalizedAnalysisLanguages,
@@ -83,56 +82,50 @@ export function CreateProjectModal({
   /* v8 ignore next */ if (stringsLoading) return undefined;
 
   return (
-    <div className="tw:modal-overlay">
-      <dialog
-        aria-labelledby="create-project-modal-title"
-        aria-modal="true"
-        className="tw:modal-dialog tw:rounded tw:w-96"
-        open
-      >
-        <h2 id="create-project-modal-title" className="tw:modal-title">
-          {localizedStrings['%interlinearizer_modal_create_title%']}
-        </h2>
-        <label className="tw:block tw:text-sm tw:mb-1" htmlFor="project-name">
-          {localizedStrings['%interlinearizer_modal_create_name_label%']}
-        </label>
-        <input
-          id="project-name"
-          className="tw:modal-form-input tw:mb-3"
-          value={name}
-          onChange={(e) => setName(e.target.value)}
-          placeholder={localizedStrings['%interlinearizer_modal_create_name_placeholder%']}
-        />
-        <label className="tw:block tw:text-sm tw:mb-1" htmlFor="project-description">
-          {localizedStrings['%interlinearizer_modal_create_description_label%']}
-        </label>
-        <textarea
-          id="project-description"
-          className="tw:modal-form-input tw:mb-3 tw:resize-none"
-          rows={2}
-          value={description}
-          onChange={(e) => setDescription(e.target.value)}
-          placeholder={localizedStrings['%interlinearizer_modal_create_description_placeholder%']}
-        />
-        <label className="tw:block tw:text-sm tw:mb-1" htmlFor="analysis-language">
-          {localizedStrings['%interlinearizer_modal_create_language_label%']}
-        </label>
-        <input
-          id="analysis-language"
-          className="tw:modal-form-input tw:mb-4"
-          value={analysisLanguages}
-          onChange={(e) => setAnalysisLanguages(e.target.value)}
-          placeholder={localizedStrings['%interlinearizer_modal_create_language_placeholder%']}
-        />
-        <div className="tw:flex tw:gap-2 tw:justify-end">
-          <Button variant="secondary" onClick={onClose} disabled={isSubmitting}>
-            {localizedStrings['%interlinearizer_modal_create_cancel%']}
-          </Button>
-          <Button onClick={handleSubmit} disabled={isSubmitting}>
-            {localizedStrings['%interlinearizer_modal_create_submit%']}
-          </Button>
-        </div>
-      </dialog>
-    </div>
+    <ModalShell
+      titleId="create-project-modal-title"
+      title={localizedStrings['%interlinearizer_modal_create_title%']}
+      width="tw:w-96"
+    >
+      <label className="tw:modal-form-label" htmlFor="project-name">
+        {localizedStrings['%interlinearizer_modal_create_name_label%']}
+      </label>
+      <input
+        id="project-name"
+        className="tw:modal-form-input tw:mb-3"
+        value={name}
+        onChange={(e) => setName(e.target.value)}
+        placeholder={localizedStrings['%interlinearizer_modal_create_name_placeholder%']}
+      />
+      <label className="tw:modal-form-label" htmlFor="project-description">
+        {localizedStrings['%interlinearizer_modal_create_description_label%']}
+      </label>
+      <textarea
+        id="project-description"
+        className="tw:modal-form-input tw:mb-3 tw:resize-none"
+        rows={2}
+        value={description}
+        onChange={(e) => setDescription(e.target.value)}
+        placeholder={localizedStrings['%interlinearizer_modal_create_description_placeholder%']}
+      />
+      <label className="tw:modal-form-label" htmlFor="analysis-language">
+        {localizedStrings['%interlinearizer_modal_create_language_label%']}
+      </label>
+      <input
+        id="analysis-language"
+        className="tw:modal-form-input tw:mb-4"
+        value={analysisLanguages}
+        onChange={(e) => setAnalysisLanguages(e.target.value)}
+        placeholder={localizedStrings['%interlinearizer_modal_create_language_placeholder%']}
+      />
+      <div className="tw:modal-actions">
+        <Button variant="secondary" onClick={onClose} disabled={isSubmitting}>
+          {localizedStrings['%interlinearizer_modal_create_cancel%']}
+        </Button>
+        <Button onClick={handleSubmit} disabled={isSubmitting}>
+          {localizedStrings['%interlinearizer_modal_create_submit%']}
+        </Button>
+      </div>
+    </ModalShell>
   );
 }
diff --git a/src/components/modals/DiscardDraftConfirm.tsx b/src/components/modals/DiscardDraftConfirm.tsx
index 1f6a8e80..7421144d 100644
--- a/src/components/modals/DiscardDraftConfirm.tsx
+++ b/src/components/modals/DiscardDraftConfirm.tsx
@@ -1,5 +1,5 @@
 import { useLocalizedStrings } from '@papi/frontend/react';
-import { Button } from 'platform-bible-react';
+import { ConfirmDialog } from './ConfirmDialog';
 
 /** Localized string keys used by {@link DiscardDraftConfirm}. */
 const DISCARD_DRAFT_CONFIRM_STRING_KEYS: `%${string}%`[] = [
@@ -35,33 +35,16 @@ export function DiscardDraftConfirm({
   /* v8 ignore next */ if (stringsLoading) return undefined;
 
   return (
-    <div className="tw:modal-overlay">
-      <dialog
-        aria-labelledby="discard-draft-modal-title"
-        aria-modal="true"
-        className="tw:modal-dialog tw:rounded tw:w-96"
-        open
-      >
-        <h2 id="discard-draft-modal-title" className="tw:modal-title">
-          {localizedStrings['%interlinearizer_confirm_discard_title%']}
-        </h2>
-        <p className="tw:text-sm tw:mb-4">
-          {localizedStrings['%interlinearizer_confirm_discard_body%']}
-        </p>
-        <div className="tw:flex tw:gap-2 tw:justify-end">
-          <Button disabled={isSubmitting} onClick={onCancel} variant="secondary">
-            {localizedStrings['%interlinearizer_confirm_discard_cancel%']}
-          </Button>
-          <Button
-            data-testid="discard-draft-confirm"
-            disabled={isSubmitting}
-            onClick={onConfirm}
-            variant="destructive"
-          >
-            {localizedStrings['%interlinearizer_confirm_discard_ok%']}
-          </Button>
-        </div>
-      </dialog>
-    </div>
+    <ConfirmDialog
+      titleId="discard-draft-modal-title"
+      title={localizedStrings['%interlinearizer_confirm_discard_title%']}
+      body={localizedStrings['%interlinearizer_confirm_discard_body%']}
+      confirmLabel={localizedStrings['%interlinearizer_confirm_discard_ok%']}
+      cancelLabel={localizedStrings['%interlinearizer_confirm_discard_cancel%']}
+      confirmTestId="discard-draft-confirm"
+      isSubmitting={isSubmitting}
+      onConfirm={onConfirm}
+      onCancel={onCancel}
+    />
   );
 }
diff --git a/src/components/modals/ModalShell.tsx b/src/components/modals/ModalShell.tsx
new file mode 100644
index 00000000..ddc6526c
--- /dev/null
+++ b/src/components/modals/ModalShell.tsx
@@ -0,0 +1,47 @@
+/** @file Shared overlay + dialog + title chrome for the project modal dialogs. */
+import type { ReactNode } from 'react';
+
+/**
+ * Shared chrome for the project modals: the full-screen overlay, the `<dialog>` with its
+ * accessibility attributes, and the title heading. Centralizes the markup every modal repeated so a
+ * change to the overlay/dialog structure (or its a11y wiring) lives in one place. The body of each
+ * modal is supplied as `children`.
+ *
+ * @param props - Component props
+ * @param props.titleId - DOM id wired to both the dialog's `aria-labelledby` and the title `<h2>`.
+ * @param props.title - Localized title text rendered in the heading.
+ * @param props.width - Tailwind width utility for the dialog (e.g. `'tw:w-96'`, `'tw:w-lg'`).
+ * @param props.rounded - Tailwind rounding utility; defaults to `'tw:rounded'`. Pass
+ *   `'tw:rounded-lg'` for the wider modals.
+ * @param props.children - Modal body content rendered below the title.
+ * @returns The overlay + dialog wrapper around the title and children.
+ */
+export function ModalShell({
+  titleId,
+  title,
+  width,
+  rounded = 'tw:rounded',
+  children,
+}: Readonly<{
+  titleId: string;
+  title: string;
+  width: string;
+  rounded?: string;
+  children: ReactNode;
+}>) {
+  return (
+    <div className="tw:modal-overlay">
+      <dialog
+        aria-labelledby={titleId}
+        aria-modal="true"
+        className={`tw:modal-dialog ${rounded} ${width}`}
+        open
+      >
+        <h2 id={titleId} className="tw:modal-title">
+          {title}
+        </h2>
+        {children}
+      </dialog>
+    </div>
+  );
+}
diff --git a/src/components/modals/ProjectMetadataModal.tsx b/src/components/modals/ProjectMetadataModal.tsx
index dc22ce38..7b2a0276 100644
--- a/src/components/modals/ProjectMetadataModal.tsx
+++ b/src/components/modals/ProjectMetadataModal.tsx
@@ -3,6 +3,9 @@ import { useLocalizedStrings } from '@papi/frontend/react';
 import { Trash2 } from 'lucide-react';
 import { Button } from 'platform-bible-react';
 import { useCallback, useMemo, useState } from 'react';
+import { parseLanguageTags } from '../../utils/language-tags';
+import useSubmitGuard from '../../hooks/useSubmitGuard';
+import { ModalShell } from './ModalShell';
 
 /** Localized string keys used by {@link ProjectMetadataModal}. */
 const PROJECT_METADATA_MODAL_STRING_KEYS: `%${string}%`[] = [
@@ -26,7 +29,7 @@ const PROJECT_METADATA_MODAL_STRING_KEYS: `%${string}%`[] = [
 ];
 
 /** Props for {@link ProjectMetadataModal}. */
-export type ProjectMetadataModalProps = Readonly<{
+type ProjectMetadataModalProps = Readonly<{
   /** UUID of the active interlinearizer project. */
   interlinearProjectId: string;
   /** Optional user-facing name of the project. */
@@ -81,10 +84,17 @@ export function ProjectMetadataModal({
   const [editDescription, setEditDescription] = useState(description ?? '');
   const [editLanguages, setEditLanguages] = useState(analysisLanguages.join(', '));
   const [confirmingDelete, setConfirmingDelete] = useState(false);
-  const [isSubmitting, setIsSubmitting] = useState(false);
+  // Guards Save/Delete against double-submit; `isSubmitting` disables the controls while one runs.
+  const { isSubmitting, runGuarded } = useSubmitGuard();
 
   const formattedDate = useMemo(() => new Date(createdAt).toLocaleString(), [createdAt]);
 
+  /**
+   * Parsed analysis-language tags from the comma-separated field. Computed once and reused by both
+   * the Save command and the Save-button enabled check so the two cannot disagree.
+   */
+  const parsedLanguages = useMemo(() => parseLanguageTags(editLanguages), [editLanguages]);
+
   /**
    * Sends the updated name, description, and analysis languages to the backend, then notifies the
    * caller and closes the modal. Logs on failure; the backend command handler is responsible for
@@ -96,47 +106,42 @@ export function ProjectMetadataModal({
    *
    * @returns A promise that resolves when the command completes or the error is logged.
    */
-  const handleSave = useCallback(async () => {
-    /* v8 ignore next -- button is disabled while submitting; guards against programmatic double-invocation */
-    if (isSubmitting) return;
-    setIsSubmitting(true);
-    const newName = editName.trim() || undefined;
-    const newDescription = editDescription.trim() || undefined;
-    const newLanguages = editLanguages
-      .split(',')
-      .map((t) => t.trim())
-      .filter((t) => t.length > 0);
-    try {
-      const updatedProjectJson = await papi.commands.sendCommand(
-        'interlinearizer.updateProjectMetadata',
-        interlinearProjectId,
-        newName,
-        newDescription,
-        newLanguages,
-        targetProjectId,
-      );
-      if (!updatedProjectJson) return;
-      onProjectSaved?.({
-        name: newName,
-        description: newDescription,
-        analysisLanguages: newLanguages,
-      });
-      onClose();
-    } catch (e) {
-      logger.error('Interlinearizer: failed to save project metadata', e);
-    } finally {
-      setIsSubmitting(false);
-    }
-  }, [
-    isSubmitting,
-    editName,
-    editDescription,
-    editLanguages,
-    interlinearProjectId,
-    targetProjectId,
-    onProjectSaved,
-    onClose,
-  ]);
+  const handleSave = useCallback(
+    () =>
+      runGuarded(async () => {
+        const newName = editName.trim() || undefined;
+        const newDescription = editDescription.trim() || undefined;
+        try {
+          const updatedProjectJson = await papi.commands.sendCommand(
+            'interlinearizer.updateProjectMetadata',
+            interlinearProjectId,
+            newName,
+            newDescription,
+            parsedLanguages,
+            targetProjectId,
+          );
+          if (!updatedProjectJson) return;
+          onProjectSaved?.({
+            name: newName,
+            description: newDescription,
+            analysisLanguages: parsedLanguages,
+          });
+          onClose();
+        } catch (e) {
+          logger.error('Interlinearizer: failed to save project metadata', e);
+        }
+      }),
+    [
+      editName,
+      editDescription,
+      parsedLanguages,
+      interlinearProjectId,
+      targetProjectId,
+      onProjectSaved,
+      onClose,
+      runGuarded,
+    ],
+  );
 
   /**
    * Sends the delete command to the backend, then notifies the caller and closes the modal. Logs on
@@ -145,159 +150,136 @@ export function ProjectMetadataModal({
    *
    * @returns A promise that resolves when the command completes or the error is logged.
    */
-  const handleDelete = useCallback(async () => {
-    /* v8 ignore next -- button is disabled while submitting; guards against programmatic double-invocation */
-    if (isSubmitting) return;
-    setIsSubmitting(true);
-    try {
-      await papi.commands.sendCommand('interlinearizer.deleteProject', interlinearProjectId);
-      onProjectDeleted?.(interlinearProjectId);
-      onClose();
-    } catch (e) {
-      logger.error('Interlinearizer: failed to delete project', e);
-    } finally {
-      setIsSubmitting(false);
-    }
-  }, [interlinearProjectId, isSubmitting, onClose, onProjectDeleted]);
+  const handleDelete = useCallback(
+    () =>
+      runGuarded(async () => {
+        try {
+          await papi.commands.sendCommand('interlinearizer.deleteProject', interlinearProjectId);
+          onProjectDeleted?.(interlinearProjectId);
+          onClose();
+        } catch (e) {
+          logger.error('Interlinearizer: failed to delete project', e);
+        }
+      }),
+    [interlinearProjectId, onProjectDeleted, onClose, runGuarded],
+  );
 
   /* v8 ignore next */ if (stringsLoading) return undefined;
 
   return (
-    <div className="tw:modal-overlay">
-      <dialog
-        aria-labelledby="project-metadata-modal-title"
-        aria-modal="true"
-        className="tw:modal-dialog tw:rounded-lg tw:w-lg"
-        open
-      >
-        <h2 id="project-metadata-modal-title" className="tw:modal-title">
-          {localizedStrings['%interlinearizer_modal_metadata_title%']}
-        </h2>
-
-        {/* Editable fields */}
-        <div className="tw:flex tw:flex-col tw:gap-3 tw:mb-4">
-          <div className="tw:flex tw:flex-col tw:gap-1">
-            <label className="tw:section-label" htmlFor="metadata-edit-name">
-              {localizedStrings['%interlinearizer_modal_metadata_name_label%']}
-            </label>
-            <input
-              id="metadata-edit-name"
-              className="tw:modal-metadata-input"
-              value={editName}
-              placeholder={localizedStrings['%interlinearizer_modal_metadata_name_placeholder%']}
-              onChange={(e) => setEditName(e.target.value)}
-            />
-          </div>
-
-          <div className="tw:flex tw:flex-col tw:gap-1">
-            <label className="tw:section-label" htmlFor="metadata-edit-description">
-              {localizedStrings['%interlinearizer_modal_metadata_description_label%']}
-            </label>
-            <textarea
-              id="metadata-edit-description"
-              className="tw:modal-metadata-input tw:resize-none"
-              rows={2}
-              value={editDescription}
-              placeholder={
-                localizedStrings['%interlinearizer_modal_metadata_description_placeholder%']
-              }
-              onChange={(e) => setEditDescription(e.target.value)}
-            />
-          </div>
-
-          <div className="tw:flex tw:flex-col tw:gap-1">
-            <label className="tw:section-label" htmlFor="metadata-edit-language">
-              {localizedStrings['%interlinearizer_modal_metadata_analysis_language_label%']}
-            </label>
-            <input
-              id="metadata-edit-language"
-              className="tw:modal-metadata-input tw:font-mono"
-              value={editLanguages}
-              placeholder={
-                localizedStrings['%interlinearizer_modal_metadata_language_placeholder%']
-              }
-              onChange={(e) => setEditLanguages(e.target.value)}
-            />
-          </div>
+    <ModalShell
+      titleId="project-metadata-modal-title"
+      title={localizedStrings['%interlinearizer_modal_metadata_title%']}
+      width="tw:w-lg"
+      rounded="tw:rounded-lg"
+    >
+      {/* Editable fields */}
+      <div className="tw:flex tw:flex-col tw:gap-3 tw:mb-4">
+        <div className="tw:flex tw:flex-col tw:gap-1">
+          <label className="tw:section-label" htmlFor="metadata-edit-name">
+            {localizedStrings['%interlinearizer_modal_metadata_name_label%']}
+          </label>
+          <input
+            id="metadata-edit-name"
+            className="tw:modal-metadata-input"
+            value={editName}
+            placeholder={localizedStrings['%interlinearizer_modal_metadata_name_placeholder%']}
+            onChange={(e) => setEditName(e.target.value)}
+          />
         </div>
 
-        {/* Read-only metadata */}
-        <dl className="tw:flex tw:flex-col tw:gap-2 tw:mb-5">
-          <MetadataRow
-            label={localizedStrings['%interlinearizer_modal_metadata_id_label%']}
-            value={interlinearProjectId}
-            mono
+        <div className="tw:flex tw:flex-col tw:gap-1">
+          <label className="tw:section-label" htmlFor="metadata-edit-description">
+            {localizedStrings['%interlinearizer_modal_metadata_description_label%']}
+          </label>
+          <textarea
+            id="metadata-edit-description"
+            className="tw:modal-metadata-input tw:resize-none"
+            rows={2}
+            value={editDescription}
+            placeholder={
+              localizedStrings['%interlinearizer_modal_metadata_description_placeholder%']
+            }
+            onChange={(e) => setEditDescription(e.target.value)}
           />
-          <MetadataRow
-            label={localizedStrings['%interlinearizer_modal_metadata_created_label%']}
-            value={formattedDate}
-          />
-          <MetadataRow
-            label={localizedStrings['%interlinearizer_modal_metadata_source_label%']}
-            value={sourceProjectId}
-            mono
+        </div>
+
+        <div className="tw:flex tw:flex-col tw:gap-1">
+          <label className="tw:section-label" htmlFor="metadata-edit-language">
+            {localizedStrings['%interlinearizer_modal_metadata_analysis_language_label%']}
+          </label>
+          <input
+            id="metadata-edit-language"
+            className="tw:modal-metadata-input tw:font-mono"
+            value={editLanguages}
+            placeholder={localizedStrings['%interlinearizer_modal_metadata_language_placeholder%']}
+            onChange={(e) => setEditLanguages(e.target.value)}
           />
-        </dl>
+        </div>
+      </div>
 
-        {/* Footer */}
-        {confirmingDelete ? (
-          <div className="tw:rounded tw:border tw:border-destructive/40 tw:bg-destructive/5 tw:px-3 tw:py-2">
-            <p className="tw:font-medium tw:text-foreground tw:mb-0.5">
-              {localizedStrings['%interlinearizer_modal_metadata_delete_confirm_title%']}
-            </p>
-            <p className="tw:text-xs tw:text-muted-foreground tw:mb-2">
-              {localizedStrings['%interlinearizer_modal_metadata_delete_confirm_body%']}
-            </p>
-            <div className="tw:flex tw:gap-2 tw:justify-end">
-              <Button
-                variant="secondary"
-                size="sm"
-                onClick={() => setConfirmingDelete(false)}
-                disabled={isSubmitting}
-              >
-                {localizedStrings['%interlinearizer_modal_metadata_delete_confirm_cancel%']}
-              </Button>
-              <Button
-                variant="destructive"
-                size="sm"
-                onClick={handleDelete}
-                disabled={isSubmitting}
-              >
-                {localizedStrings['%interlinearizer_modal_metadata_delete_confirm_ok%']}
-              </Button>
-            </div>
-          </div>
-        ) : (
-          <div className="tw:flex tw:gap-2 tw:justify-between">
+      {/* Read-only metadata */}
+      <dl className="tw:flex tw:flex-col tw:gap-2 tw:mb-5">
+        <MetadataRow
+          label={localizedStrings['%interlinearizer_modal_metadata_id_label%']}
+          value={interlinearProjectId}
+          mono
+        />
+        <MetadataRow
+          label={localizedStrings['%interlinearizer_modal_metadata_created_label%']}
+          value={formattedDate}
+        />
+        <MetadataRow
+          label={localizedStrings['%interlinearizer_modal_metadata_source_label%']}
+          value={sourceProjectId}
+          mono
+        />
+      </dl>
+
+      {/* Footer */}
+      {confirmingDelete ? (
+        <div className="tw:modal-error-box tw:px-3 tw:py-2">
+          <p className="tw:font-medium tw:text-foreground tw:mb-0.5">
+            {localizedStrings['%interlinearizer_modal_metadata_delete_confirm_title%']}
+          </p>
+          <p className="tw:text-xs tw:text-muted-foreground tw:mb-2">
+            {localizedStrings['%interlinearizer_modal_metadata_delete_confirm_body%']}
+          </p>
+          <div className="tw:modal-actions">
             <Button
-              variant="destructive"
-              onClick={() => setConfirmingDelete(true)}
+              variant="secondary"
+              size="sm"
+              onClick={() => setConfirmingDelete(false)}
               disabled={isSubmitting}
             >
-              <Trash2 size={13} className="tw:mr-1" />
-              {localizedStrings['%interlinearizer_modal_metadata_delete%']}
+              {localizedStrings['%interlinearizer_modal_metadata_delete_confirm_cancel%']}
+            </Button>
+            <Button variant="destructive" size="sm" onClick={handleDelete} disabled={isSubmitting}>
+              {localizedStrings['%interlinearizer_modal_metadata_delete_confirm_ok%']}
             </Button>
-            <div className="tw:flex tw:gap-2">
-              <Button variant="secondary" onClick={onClose} disabled={isSubmitting}>
-                {localizedStrings['%interlinearizer_modal_metadata_close%']}
-              </Button>
-              <Button
-                onClick={handleSave}
-                disabled={
-                  isSubmitting ||
-                  editLanguages
-                    .split(',')
-                    .map((t) => t.trim())
-                    .filter((t) => t.length > 0).length === 0
-                }
-              >
-                {localizedStrings['%interlinearizer_modal_metadata_save%']}
-              </Button>
-            </div>
           </div>
-        )}
-      </dialog>
-    </div>
+        </div>
+      ) : (
+        <div className="tw:flex tw:gap-2 tw:justify-between">
+          <Button
+            variant="destructive"
+            onClick={() => setConfirmingDelete(true)}
+            disabled={isSubmitting}
+          >
+            <Trash2 size={13} className="tw:mr-1" />
+            {localizedStrings['%interlinearizer_modal_metadata_delete%']}
+          </Button>
+          <div className="tw:flex tw:gap-2">
+            <Button variant="secondary" onClick={onClose} disabled={isSubmitting}>
+              {localizedStrings['%interlinearizer_modal_metadata_close%']}
+            </Button>
+            <Button onClick={handleSave} disabled={isSubmitting || parsedLanguages.length === 0}>
+              {localizedStrings['%interlinearizer_modal_metadata_save%']}
+            </Button>
+          </div>
+        </div>
+      )}
+    </ModalShell>
   );
 }
 
diff --git a/src/components/modals/SaveAsProjectModal.tsx b/src/components/modals/SaveAsProjectModal.tsx
index deb5b9cf..4a953541 100644
--- a/src/components/modals/SaveAsProjectModal.tsx
+++ b/src/components/modals/SaveAsProjectModal.tsx
@@ -4,6 +4,8 @@ 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/type-guards';
+import useSubmitGuard from '../../hooks/useSubmitGuard';
+import { ModalShell } from './ModalShell';
 
 /** Localized string keys used by {@link SaveAsProjectModal}. */
 const SAVE_AS_MODAL_STRING_KEYS: `%${string}%`[] = [
@@ -65,11 +67,8 @@ export function SaveAsProjectModal({
   const [projects, setProjects] = useState<InterlinearProjectSummary[]>([]);
   const [isLoading, setIsLoading] = useState(true);
 
-  /**
-   * True while a save (new or overwrite) is in flight; disables the save controls to block
-   * re-submits.
-   */
-  const [isSubmitting, setIsSubmitting] = useState(false);
+  // Guards the save controls against double-submit; `isSubmitting` disables them while a save runs.
+  const { isSubmitting, runGuarded } = useSubmitGuard();
 
   /** The existing project pending an overwrite confirmation, or `undefined`. */
   const [confirmOverwrite, setConfirmOverwrite] = useState<InterlinearProjectSummary | undefined>(
@@ -124,16 +123,13 @@ export function SaveAsProjectModal({
    * blocking re-entry while the save is in flight so a double-click cannot create duplicate
    * projects.
    */
-  const handleSaveNew = useCallback(async () => {
-    /* v8 ignore next -- button is disabled while submitting; guards against programmatic double-invocation */
-    if (isSubmitting) return;
-    setIsSubmitting(true);
-    try {
-      await onSaveNew(name.trim() || undefined, description.trim() || undefined);
-    } finally {
-      setIsSubmitting(false);
-    }
-  }, [description, isSubmitting, name, onSaveNew]);
+  const handleSaveNew = useCallback(
+    () =>
+      runGuarded(async () => {
+        await onSaveNew(name.trim() || undefined, description.trim() || undefined);
+      }),
+    [name, description, onSaveNew, runGuarded],
+  );
 
   /**
    * Overwrites the chosen existing project with the draft, blocking re-entry while the save is in
@@ -142,124 +138,108 @@ export function SaveAsProjectModal({
    * @param project - The existing project to overwrite.
    */
   const handleConfirmOverwrite = useCallback(
-    async (project: InterlinearProjectSummary) => {
-      /* v8 ignore next -- button is disabled while submitting; guards against programmatic double-invocation */
-      if (isSubmitting) return;
-      setIsSubmitting(true);
-      try {
+    (project: InterlinearProjectSummary) =>
+      runGuarded(async () => {
         await onOverwrite(project);
-      } finally {
-        setIsSubmitting(false);
-      }
-    },
-    [isSubmitting, onOverwrite],
+      }),
+    [onOverwrite, runGuarded],
   );
 
   /* v8 ignore next */ if (stringsLoading) return undefined;
 
   return (
-    <div className="tw:modal-overlay">
-      <dialog
-        aria-labelledby="save-as-modal-title"
-        aria-modal="true"
-        className="tw:modal-dialog tw:rounded-lg tw:w-lg"
-        open
-      >
-        <h2 id="save-as-modal-title" className="tw:modal-title">
-          {localizedStrings['%interlinearizer_modal_saveAs_title%']}
-        </h2>
-
-        <h3 className="tw:text-sm tw:font-medium tw:mb-2">
-          {localizedStrings['%interlinearizer_modal_saveAs_new_section%']}
-        </h3>
-        <label className="tw:block tw:text-sm tw:mb-1" htmlFor="save-as-name">
-          {localizedStrings['%interlinearizer_modal_create_name_label%']}
-        </label>
-        <input
-          id="save-as-name"
-          className="tw:modal-form-input tw:mb-3"
-          value={name}
-          onChange={(e) => setName(e.target.value)}
-          placeholder={localizedStrings['%interlinearizer_modal_create_name_placeholder%']}
-        />
-        <label className="tw:block tw:text-sm tw:mb-1" htmlFor="save-as-description">
-          {localizedStrings['%interlinearizer_modal_create_description_label%']}
-        </label>
-        <textarea
-          id="save-as-description"
-          className="tw:modal-form-input tw:mb-3 tw:resize-none"
-          rows={2}
-          value={description}
-          onChange={(e) => setDescription(e.target.value)}
-          placeholder={localizedStrings['%interlinearizer_modal_create_description_placeholder%']}
-        />
-        <div className="tw:flex tw:justify-end tw:mb-4">
-          <Button onClick={handleSaveNew} data-testid="save-as-new" disabled={isSubmitting}>
-            {localizedStrings['%interlinearizer_modal_saveAs_save_new%']}
-          </Button>
-        </div>
-
-        <h3 className="tw:text-sm tw:font-medium tw:mb-2">
-          {localizedStrings['%interlinearizer_modal_saveAs_existing_section%']}
-        </h3>
-        {projects.length === 0 ? (
-          <p className="tw:text-sm tw:text-muted-foreground tw:mb-4">
-            {localizedStrings['%interlinearizer_modal_saveAs_none%']}
-          </p>
-        ) : (
-          <ul className="tw:flex tw:flex-col tw:gap-1 tw:mb-4 tw:max-h-72 tw:overflow-y-auto">
-            {projects.map((project) => (
-              <li key={project.id} className="tw:flex tw:items-center tw:gap-2">
-                <span className="tw:flex-1 tw:flex tw:items-center tw:gap-2 tw:rounded tw:border tw:border-border tw:bg-muted/40 tw:px-3 tw:py-2 tw:text-sm tw:min-w-0">
-                  <span className="tw:font-medium tw:truncate">
-                    {project.name ??
-                      localizedStrings['%interlinearizer_modal_select_name_unnamed%']}
-                  </span>
-                  <span className="tw:font-mono tw:text-xs tw:text-muted-foreground tw:shrink-0">
-                    {project.analysisLanguages.join(', ')}
-                  </span>
+    <ModalShell
+      titleId="save-as-modal-title"
+      title={localizedStrings['%interlinearizer_modal_saveAs_title%']}
+      width="tw:w-lg"
+      rounded="tw:rounded-lg"
+    >
+      <h3 className="tw:text-sm tw:font-medium tw:mb-2">
+        {localizedStrings['%interlinearizer_modal_saveAs_new_section%']}
+      </h3>
+      <label className="tw:modal-form-label" htmlFor="save-as-name">
+        {localizedStrings['%interlinearizer_modal_create_name_label%']}
+      </label>
+      <input
+        id="save-as-name"
+        className="tw:modal-form-input tw:mb-3"
+        value={name}
+        onChange={(e) => setName(e.target.value)}
+        placeholder={localizedStrings['%interlinearizer_modal_create_name_placeholder%']}
+      />
+      <label className="tw:modal-form-label" htmlFor="save-as-description">
+        {localizedStrings['%interlinearizer_modal_create_description_label%']}
+      </label>
+      <textarea
+        id="save-as-description"
+        className="tw:modal-form-input tw:mb-3 tw:resize-none"
+        rows={2}
+        value={description}
+        onChange={(e) => setDescription(e.target.value)}
+        placeholder={localizedStrings['%interlinearizer_modal_create_description_placeholder%']}
+      />
+      <div className="tw:flex tw:justify-end tw:mb-4">
+        <Button onClick={handleSaveNew} data-testid="save-as-new" disabled={isSubmitting}>
+          {localizedStrings['%interlinearizer_modal_saveAs_save_new%']}
+        </Button>
+      </div>
+
+      <h3 className="tw:text-sm tw:font-medium tw:mb-2">
+        {localizedStrings['%interlinearizer_modal_saveAs_existing_section%']}
+      </h3>
+      {projects.length === 0 ? (
+        <p className="tw:text-sm tw:text-muted-foreground tw:mb-4">
+          {localizedStrings['%interlinearizer_modal_saveAs_none%']}
+        </p>
+      ) : (
+        <ul className="tw:flex tw:flex-col tw:gap-1 tw:mb-4 tw:max-h-72 tw:overflow-y-auto">
+          {projects.map((project) => (
+            <li key={project.id} className="tw:flex tw:items-center tw:gap-2">
+              <span className="tw:flex-1 tw:flex tw:items-center tw:gap-2 tw:rounded tw:border tw:border-border tw:bg-muted/40 tw:px-3 tw:py-2 tw:text-sm tw:min-w-0">
+                <span className="tw:font-medium tw:truncate">
+                  {project.name ?? localizedStrings['%interlinearizer_modal_select_name_unnamed%']}
                 </span>
-                <Button
-                  variant="secondary"
-                  size="sm"
-                  onClick={() => setConfirmOverwrite(project)}
-                  disabled={isSubmitting}
-                >
-                  {localizedStrings['%interlinearizer_modal_saveAs_overwrite%']}
-                </Button>
-              </li>
-            ))}
-          </ul>
-        )}
-
-        {confirmOverwrite && (
-          <div className="tw:border tw:border-destructive/40 tw:bg-destructive/5 tw:rounded tw:p-3 tw:mb-4">
-            <p className="tw:text-sm tw:mb-2">
-              {localizedStrings['%interlinearizer_modal_saveAs_overwrite_confirm_body%']}
-            </p>
-            <div className="tw:flex tw:gap-2 tw:justify-end">
-              <Button variant="secondary" size="sm" onClick={() => setConfirmOverwrite(undefined)}>
-                {localizedStrings['%interlinearizer_modal_saveAs_overwrite_confirm_cancel%']}
-              </Button>
+              </span>
               <Button
-                variant="destructive"
+                variant="secondary"
                 size="sm"
-                data-testid="save-as-overwrite-confirm"
-                onClick={() => handleConfirmOverwrite(confirmOverwrite)}
+                onClick={() => setConfirmOverwrite(project)}
                 disabled={isSubmitting}
               >
-                {localizedStrings['%interlinearizer_modal_saveAs_overwrite_confirm_ok%']}
+                {localizedStrings['%interlinearizer_modal_saveAs_overwrite%']}
               </Button>
-            </div>
+            </li>
+          ))}
+        </ul>
+      )}
+
+      {confirmOverwrite && (
+        <div className="tw:modal-error-box tw:p-3 tw:mb-4">
+          <p className="tw:text-sm tw:mb-2">
+            {localizedStrings['%interlinearizer_modal_saveAs_overwrite_confirm_body%']}
+          </p>
+          <div className="tw:modal-actions">
+            <Button variant="secondary" size="sm" onClick={() => setConfirmOverwrite(undefined)}>
+              {localizedStrings['%interlinearizer_modal_saveAs_overwrite_confirm_cancel%']}
+            </Button>
+            <Button
+              variant="destructive"
+              size="sm"
+              data-testid="save-as-overwrite-confirm"
+              onClick={() => handleConfirmOverwrite(confirmOverwrite)}
+              disabled={isSubmitting}
+            >
+              {localizedStrings['%interlinearizer_modal_saveAs_overwrite_confirm_ok%']}
+            </Button>
           </div>
-        )}
-
-        <div className="tw:flex tw:gap-2 tw:justify-end">
-          <Button variant="secondary" onClick={onClose} disabled={isLoading || isSubmitting}>
-            {localizedStrings['%interlinearizer_modal_saveAs_cancel%']}
-          </Button>
         </div>
-      </dialog>
-    </div>
+      )}
+
+      <div className="tw:modal-actions">
+        <Button variant="secondary" onClick={onClose} disabled={isLoading || isSubmitting}>
+          {localizedStrings['%interlinearizer_modal_saveAs_cancel%']}
+        </Button>
+      </div>
+    </ModalShell>
   );
 }
diff --git a/src/components/modals/SelectInterlinearProjectModal.tsx b/src/components/modals/SelectInterlinearProjectModal.tsx
index 3867cc75..d3b39028 100644
--- a/src/components/modals/SelectInterlinearProjectModal.tsx
+++ b/src/components/modals/SelectInterlinearProjectModal.tsx
@@ -5,6 +5,7 @@ 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/type-guards';
+import { ModalShell } from './ModalShell';
 
 /** Localized string keys used by {@link SelectInterlinearProjectModal}. */
 const SELECT_INTERLINEAR_PROJECT_STRING_KEYS: `%${string}%`[] = [
@@ -106,76 +107,68 @@ export function SelectInterlinearProjectModal({
   /* v8 ignore next */ if (stringsLoading) return undefined;
 
   return (
-    <div className="tw:modal-overlay">
-      <dialog
-        aria-labelledby="select-project-modal-title"
-        aria-modal="true"
-        className="tw:modal-dialog tw:rounded-lg tw:w-lg"
-        open
-      >
-        <h2 id="select-project-modal-title" className="tw:modal-title">
-          {localizedStrings['%interlinearizer_modal_select_title%']}
-        </h2>
-
-        {projects.length === 0 ? (
-          <p className="tw:text-sm tw:text-muted-foreground tw:mb-4">
-            {localizedStrings['%interlinearizer_modal_select_none%']}
-          </p>
-        ) : (
-          <ul className="tw:flex tw:flex-col tw:gap-1 tw:mb-4 tw:max-h-96 tw:overflow-y-auto">
-            {projects.map((project) => {
-              const isActive = project.id === activeProjectId;
-              return (
-                <li key={project.id} className="tw:flex tw:items-center tw:gap-1">
-                  <button
-                    type="button"
-                    aria-current={isActive ? 'true' : undefined}
-                    className={`tw:flex-1 tw:flex tw:items-center tw:gap-2 tw:rounded tw:border tw:px-3 tw:py-2 tw:text-left tw:text-sm tw:transition-colors tw:min-w-0 ${
-                      isActive
-                        ? 'tw:border-primary tw:bg-primary/10 tw:hover:bg-primary/20'
-                        : 'tw:border-border tw:bg-muted/40 tw:hover:bg-muted/70'
-                    }`}
-                    onClick={() => onSelect(project)}
-                  >
-                    <span className="tw:font-medium tw:text-foreground tw:truncate">
-                      {project.name ??
-                        localizedStrings['%interlinearizer_modal_select_name_unnamed%']}
-                    </span>
-                    {isActive && (
-                      <span className="tw:shrink-0 tw:rounded tw:bg-primary tw:px-1.5 tw:py-0.5 tw:text-xs tw:font-medium tw:text-primary-foreground">
-                        {localizedStrings['%interlinearizer_modal_select_active_badge%']}
-                      </span>
-                    )}
-                    <span className="tw:font-mono tw:text-xs tw:text-muted-foreground tw:shrink-0 tw:ms-auto">
-                      {project.analysisLanguages.join(', ')}
+    <ModalShell
+      titleId="select-project-modal-title"
+      title={localizedStrings['%interlinearizer_modal_select_title%']}
+      width="tw:w-lg"
+      rounded="tw:rounded-lg"
+    >
+      {projects.length === 0 ? (
+        <p className="tw:text-sm tw:text-muted-foreground tw:mb-4">
+          {localizedStrings['%interlinearizer_modal_select_none%']}
+        </p>
+      ) : (
+        <ul className="tw:flex tw:flex-col tw:gap-1 tw:mb-4 tw:max-h-96 tw:overflow-y-auto">
+          {projects.map((project) => {
+            const isActive = project.id === activeProjectId;
+            return (
+              <li key={project.id} className="tw:flex tw:items-center tw:gap-1">
+                <button
+                  type="button"
+                  aria-current={isActive ? 'true' : undefined}
+                  className={`tw:flex-1 tw:flex tw:items-center tw:gap-2 tw:rounded tw:border tw:px-3 tw:py-2 tw:text-left tw:text-sm tw:transition-colors tw:min-w-0 ${
+                    isActive
+                      ? 'tw:border-primary tw:bg-primary/10 tw:hover:bg-primary/20'
+                      : 'tw:border-border tw:bg-muted/40 tw:hover:bg-muted/70'
+                  }`}
+                  onClick={() => onSelect(project)}
+                >
+                  <span className="tw:font-medium tw:text-foreground tw:truncate">
+                    {project.name ??
+                      localizedStrings['%interlinearizer_modal_select_name_unnamed%']}
+                  </span>
+                  {isActive && (
+                    <span className="tw:shrink-0 tw:rounded tw:bg-primary tw:px-1.5 tw:py-0.5 tw:text-xs tw:font-medium tw:text-primary-foreground">
+                      {localizedStrings['%interlinearizer_modal_select_active_badge%']}
                     </span>
-                  </button>
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    aria-label={
-                      localizedStrings['%interlinearizer_modal_select_info_button_label%']
-                    }
-                    className="tw:shrink-0"
-                    onClick={() => onViewInfo(project)}
-                  >
-                    <Info size={15} />
-                  </Button>
-                </li>
-              );
-            })}
-          </ul>
-        )}
+                  )}
+                  <span className="tw:font-mono tw:text-xs tw:text-muted-foreground tw:shrink-0 tw:ms-auto">
+                    {project.analysisLanguages.join(', ')}
+                  </span>
+                </button>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  aria-label={localizedStrings['%interlinearizer_modal_select_info_button_label%']}
+                  className="tw:shrink-0"
+                  onClick={() => onViewInfo(project)}
+                >
+                  <Info size={15} />
+                </Button>
+              </li>
+            );
+          })}
+        </ul>
+      )}
 
-        <div className="tw:flex tw:gap-2 tw:justify-end">
-          <Button variant="secondary" onClick={onClose} disabled={isLoading}>
-            {localizedStrings['%interlinearizer_modal_select_cancel%']}
-          </Button>
-          <Button onClick={onCreateNew} disabled={isLoading}>
-            {localizedStrings['%interlinearizer_modal_select_create_new%']}
-          </Button>
-        </div>
-      </dialog>
-    </div>
+      <div className="tw:modal-actions">
+        <Button variant="secondary" onClick={onClose} disabled={isLoading}>
+          {localizedStrings['%interlinearizer_modal_select_cancel%']}
+        </Button>
+        <Button onClick={onCreateNew} disabled={isLoading}>
+          {localizedStrings['%interlinearizer_modal_select_create_new%']}
+        </Button>
+      </div>
+    </ModalShell>
   );
 }
diff --git a/src/components/modals/UnlinkPhraseConfirm.tsx b/src/components/modals/UnlinkPhraseConfirm.tsx
index 1cd28cc2..c5d82022 100644
--- a/src/components/modals/UnlinkPhraseConfirm.tsx
+++ b/src/components/modals/UnlinkPhraseConfirm.tsx
@@ -25,11 +25,16 @@ type UnlinkPhraseConfirmProps = Readonly<{
 export default function UnlinkPhraseConfirm({ phraseId, setPhraseMode }: UnlinkPhraseConfirmProps) {
   const { deletePhrase } = usePhraseDispatch();
 
+  /**
+   * Dispatches `deletePhrase` to remove the phrase analysis and its link, then returns to view
+   * mode.
+   */
   const handleConfirm = () => {
     deletePhrase(phraseId);
     setPhraseMode({ kind: 'view' });
   };
 
+  /** Returns to view mode without deleting the phrase. */
   const handleCancel = () => {
     setPhraseMode({ kind: 'view' });
   };
diff --git a/src/components/modals/WipeModal.tsx b/src/components/modals/WipeModal.tsx
index 995f6810..a2a27f20 100644
--- a/src/components/modals/WipeModal.tsx
+++ b/src/components/modals/WipeModal.tsx
@@ -1,6 +1,7 @@
 import { useLocalizedStrings } from '@papi/frontend/react';
 import { Button } from 'platform-bible-react';
 import { useState } from 'react';
+import { ModalShell } from './ModalShell';
 
 /** The portion of the draft a wipe removes: the current book only, or the entire draft. */
 export type WipeScope = 'book' | 'all';
@@ -50,64 +51,58 @@ export function WipeModal({
   /* v8 ignore next */ if (stringsLoading) return undefined;
 
   return (
-    <div className="tw:modal-overlay">
-      <dialog
-        aria-labelledby="wipe-modal-title"
-        aria-modal="true"
-        className="tw:modal-dialog tw:rounded tw:w-96"
-        open
-      >
-        <h2 id="wipe-modal-title" className="tw:modal-title">
-          {localizedStrings['%interlinearizer_wipe_modal_title%']}
-        </h2>
-        <p className="tw:text-sm tw:mb-4">
-          {localizedStrings['%interlinearizer_wipe_modal_prompt%']}
-        </p>
+    <ModalShell
+      titleId="wipe-modal-title"
+      title={localizedStrings['%interlinearizer_wipe_modal_title%']}
+      width="tw:w-96"
+    >
+      <p className="tw:text-sm tw:mb-4">
+        {localizedStrings['%interlinearizer_wipe_modal_prompt%']}
+      </p>
 
-        <div className="tw:flex tw:flex-col tw:gap-3 tw:mb-4">
-          <label className="tw:flex tw:flex-col tw:gap-0.5 tw:text-sm">
-            <span className="tw:flex tw:gap-2 tw:items-center tw:font-medium">
-              <input
-                type="radio"
-                name="wipe-scope"
-                checked={scope === 'book'}
-                disabled={!hasActiveBook}
-                onChange={() => setScope('book')}
-                data-testid="wipe-scope-book"
-              />
-              {localizedStrings['%interlinearizer_wipe_modal_scope_book%']}
-            </span>
-            <span className="tw:ps-6 tw:text-muted-foreground">
-              {localizedStrings['%interlinearizer_wipe_modal_scope_book_description%']}
-            </span>
-          </label>
+      <div className="tw:flex tw:flex-col tw:gap-3 tw:mb-4">
+        <label className="tw:flex tw:flex-col tw:gap-0.5 tw:text-sm">
+          <span className="tw:flex tw:gap-2 tw:items-center tw:font-medium">
+            <input
+              type="radio"
+              name="wipe-scope"
+              checked={scope === 'book'}
+              disabled={!hasActiveBook}
+              onChange={() => setScope('book')}
+              data-testid="wipe-scope-book"
+            />
+            {localizedStrings['%interlinearizer_wipe_modal_scope_book%']}
+          </span>
+          <span className="tw:ps-6 tw:text-muted-foreground">
+            {localizedStrings['%interlinearizer_wipe_modal_scope_book_description%']}
+          </span>
+        </label>
 
-          <label className="tw:flex tw:flex-col tw:gap-0.5 tw:text-sm">
-            <span className="tw:flex tw:gap-2 tw:items-center tw:font-medium">
-              <input
-                type="radio"
-                name="wipe-scope"
-                checked={scope === 'all'}
-                onChange={() => setScope('all')}
-                data-testid="wipe-scope-all"
-              />
-              {localizedStrings['%interlinearizer_wipe_modal_scope_all%']}
-            </span>
-            <span className="tw:ps-6 tw:text-muted-foreground">
-              {localizedStrings['%interlinearizer_wipe_modal_scope_all_description%']}
-            </span>
-          </label>
-        </div>
+        <label className="tw:flex tw:flex-col tw:gap-0.5 tw:text-sm">
+          <span className="tw:flex tw:gap-2 tw:items-center tw:font-medium">
+            <input
+              type="radio"
+              name="wipe-scope"
+              checked={scope === 'all'}
+              onChange={() => setScope('all')}
+              data-testid="wipe-scope-all"
+            />
+            {localizedStrings['%interlinearizer_wipe_modal_scope_all%']}
+          </span>
+          <span className="tw:ps-6 tw:text-muted-foreground">
+            {localizedStrings['%interlinearizer_wipe_modal_scope_all_description%']}
+          </span>
+        </label>
+      </div>
 
-        <div className="tw:flex tw:gap-2 tw:justify-end">
-          <Button variant="secondary" onClick={onCancel}>
-            {localizedStrings['%interlinearizer_wipe_modal_cancel%']}
-          </Button>
-          <Button variant="destructive" onClick={() => onConfirm(scope)} data-testid="wipe-confirm">
-            {localizedStrings['%interlinearizer_wipe_modal_confirm%']}
-          </Button>
-        </div>
-      </dialog>
-    </div>
+      <div className="tw:modal-actions">
+        <Button variant="secondary" onClick={onCancel}>
+          {localizedStrings['%interlinearizer_wipe_modal_cancel%']}
+        </Button>
+        <Button variant="destructive" onClick={() => onConfirm(scope)} data-testid="wipe-confirm">
+          {localizedStrings['%interlinearizer_wipe_modal_confirm%']}
+        </Button>
+      </div>
+    </ModalShell>
   );
 }
diff --git a/src/components/recenter-fade.ts b/src/components/recenter-fade.ts
index c5bced23..faebbb7f 100644
--- a/src/components/recenter-fade.ts
+++ b/src/components/recenter-fade.ts
@@ -9,7 +9,7 @@
  * CSS easing for the recenter opacity fade-in/out. A sine-like curve gives a natural feel at both
  * ends of the transition.
  */
-export const RECENTER_FADE_EASING = 'cubic-bezier(0.65, 0, 0.35, 1)';
+const RECENTER_FADE_EASING = 'cubic-bezier(0.65, 0, 0.35, 1)';
 
 /**
  * Duration of the recenter fade, in milliseconds. Both views must use this value for their CSS
diff --git a/src/hooks/useArcPaths.ts b/src/hooks/useArcPaths.ts
index bce4c5d1..a37b2314 100644
--- a/src/hooks/useArcPaths.ts
+++ b/src/hooks/useArcPaths.ts
@@ -67,7 +67,8 @@ function signatureOf(
  * @param hasRealPhrase - Whether any committed phrase is rendered; feeds the controls headroom.
  * @param deps - Extra dependencies that should trigger a re-measure (token data, phrase mode,
  *   etc.).
- * @returns The current arc paths, max nesting level, and the strip's top/left/right padding.
+ * @returns The current arc paths, max nesting level, and the strip's top/row-gap/left/right
+ *   padding.
  */
 export function useArcPaths(
   containerRef: RefObject<HTMLElement | null>,
diff --git a/src/hooks/useInterlinearizerBookData.ts b/src/hooks/useInterlinearizerBookData.ts
index 1b09445f..d7cefc3b 100644
--- a/src/hooks/useInterlinearizerBookData.ts
+++ b/src/hooks/useInterlinearizerBookData.ts
@@ -11,7 +11,10 @@ import { useEffect, useMemo, useRef } from 'react';
 export interface UseInterlinearizerBookDataArgs {
   /** PAPI project ID whose USJ book data should be loaded. */
   projectId: string;
-  /** Current scripture reference; only `book` and `chapterNum` are used to scope the data. */
+  /**
+   * Current scripture reference; only `book` is used to scope the data (chapter and verse are fixed
+   * to 1).
+   */
   scrRef: SerializedVerseRef;
 }
 
@@ -36,7 +39,8 @@ export interface UseInterlinearizerBookDataResult {
  *
  * @param args - Hook arguments.
  * @param args.projectId - PAPI project ID whose USJ book data should be loaded.
- * @param args.scrRef - Current scripture reference; only `book` and `chapterNum` are used.
+ * @param args.scrRef - Current scripture reference; only `book` is used (chapter/verse are fixed to
+ *   1).
  * @returns The tokenized book (reference-stable across duplicate USJ results), loading state, and
  *   any errors encountered.
  */
diff --git a/src/hooks/useSubmitGuard.ts b/src/hooks/useSubmitGuard.ts
new file mode 100644
index 00000000..a3f94318
--- /dev/null
+++ b/src/hooks/useSubmitGuard.ts
@@ -0,0 +1,47 @@
+/** @file Hook that guards an async submit handler against re-entrant (double-click) invocation. */
+import { useCallback, useRef, useState } from 'react';
+
+/** Return value of {@link useSubmitGuard}. */
+export type UseSubmitGuardResult = {
+  /** True while a guarded call is in flight; wire to the submit controls' `disabled`. */
+  isSubmitting: boolean;
+  /**
+   * Runs `fn` unless a prior guarded call is still in flight, in which case the call is ignored.
+   * Flips {@link isSubmitting} for the duration of `fn` and always clears it afterward.
+   *
+   * @param fn - The async submit work to run.
+   * @returns A promise that resolves once `fn` settles (or immediately when the call is ignored).
+   */
+  runGuarded: (fn: () => Promise<void>) => Promise<void>;
+};
+
+/**
+ * Guards an async submit handler against re-entrant invocation (a double-click, or a programmatic
+ * second call before the re-render that disables the control lands). A ref mirror short-circuits
+ * the second call synchronously; the state drives the disabled UI. Factors out the `isSubmitting` +
+ * `isSubmittingRef` + try/finally pattern the Save As and metadata modals each repeated for every
+ * submit handler.
+ *
+ * @returns The in-flight flag and a `runGuarded` wrapper for submit handlers.
+ */
+export default function useSubmitGuard(): UseSubmitGuardResult {
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  // Ref mirror of `isSubmitting` so a second invocation short-circuits synchronously, before the
+  // re-render that disables the control lands (guards programmatic races).
+  const isSubmittingRef = useRef(false);
+
+  const runGuarded = useCallback(async (fn: () => Promise<void>) => {
+    /* v8 ignore next -- controls are disabled while submitting; ref guards against programmatic races */
+    if (isSubmittingRef.current) return;
+    isSubmittingRef.current = true;
+    setIsSubmitting(true);
+    try {
+      await fn();
+    } finally {
+      isSubmittingRef.current = false;
+      setIsSubmitting(false);
+    }
+  }, []);
+
+  return { isSubmitting, runGuarded };
+}
diff --git a/src/main.ts b/src/main.ts
index f82b7e65..a12391d3 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -266,8 +266,9 @@ async function getInterlinearProject(interlinearProjectId: string): Promise<stri
  * @param interlinearProjectId - UUID of the interlinearizer project to update.
  * @param analysisJson - JSON-stringified `TextAnalysis` to persist.
  * @returns A promise that resolves when the analysis has been written to storage.
- * @throws If JSON parsing or storage fails. The error is logged and an error notification is sent
- *   before rethrowing so the frontend `catch` block can suppress it without a second notification.
+ * @throws If JSON parsing, validation, or storage fails. The error is logged and an error
+ *   notification is sent before rethrowing so the frontend `catch` block can suppress it without a
+ *   second notification.
  */
 async function saveInterlinearAnalysis(
   interlinearProjectId: string,
@@ -348,7 +349,8 @@ async function saveInterlinearDraft(sourceProjectId: string, draftJson: string):
  *
  * @param sourceProjectId - Platform.Bible project ID of the source text to query.
  * @returns A JSON string of `InterlinearProject[]`, or `"[]"` if none exist.
- * @throws {SyntaxError} If the project-IDs index or any project record contains invalid JSON.
+ * @throws {SyntaxError} If the project-IDs index contains invalid JSON. Corrupted individual
+ *   project records are logged and skipped, not thrown.
  * @throws If `papi.storage.readUserData` rejects for a non-ENOENT reason (propagated from
  *   `projectStorage.getProjectsForSource`). Callers can use this to distinguish a storage outage
  *   from a legitimately empty list.
diff --git a/src/parsers/papi/bookTokenizer.ts b/src/parsers/papi/bookTokenizer.ts
index 40e3f189..8a855d9c 100644
--- a/src/parsers/papi/bookTokenizer.ts
+++ b/src/parsers/papi/bookTokenizer.ts
@@ -79,9 +79,9 @@ function parseSid(sid: string): ScriptureRef {
 /**
  * Splits a verse's plain text into an ordered array of {@link Token}s.
  *
- * Word tokens (`\p{L}\p{N}\p{M}` runs) and punctuation tokens (any single non-word, non-whitespace
- * character) are emitted in document order. Whitespace is not tokenized. Character offsets are
- * zero-based relative to `text`; `charEnd` is exclusive.
+ * Word tokens (`\p{L}\p{N}\p{M}\p{Join_Control}` runs) and punctuation tokens (any single non-word,
+ * non-whitespace character) are emitted in document order. Whitespace is not tokenized. Character
+ * offsets are zero-based relative to `text`; `charEnd` is exclusive.
  *
  * Each token inherits `writingSystem` from the book so that downstream consumers (renderers,
  * alignment tools) can identify the script without access to the parent `RawBook`.
diff --git a/src/parsers/papi/usjBookExtractor.ts b/src/parsers/papi/usjBookExtractor.ts
index bf2f7ab0..72a68c39 100644
--- a/src/parsers/papi/usjBookExtractor.ts
+++ b/src/parsers/papi/usjBookExtractor.ts
@@ -307,6 +307,10 @@ function fnv1a32(s: string): string {
  * @param writingSystem - BCP 47 tag for the baseline, from `platform.languageTag`.
  * @returns A `RawBook` with `bookCode`, `writingSystem`, `contentHash`, and `verses` populated.
  * @throws {SyntaxError} If no `book` marker with a `code` attribute is found in the document.
+ * @throws {SyntaxError} If a `verse` marker is missing its required `sid` attribute (propagated
+ *   from {@link handleVerseNode} via {@link traverse}).
+ * @throws {SyntaxError} If a duplicate `verse` SID is encountered (propagated from
+ *   {@link handleVerseNode} via {@link traverse}).
  */
 export function extractBookFromUsj(usj: UsjDocument, writingSystem: string): RawBook {
   const contentHash = fnv1a32(stableStringify(usj.content));
diff --git a/src/parsers/pt9/interlinearXmlParser.ts b/src/parsers/pt9/interlinearXmlParser.ts
index 9d704fb0..04d37574 100644
--- a/src/parsers/pt9/interlinearXmlParser.ts
+++ b/src/parsers/pt9/interlinearXmlParser.ts
@@ -211,6 +211,8 @@ function extractPunctuationsFromVerse(verseDataElement: ParsedVerseData): Punctu
  *   LexemesId (slash-joined), Id (LexemesId/Index-Length or Index-Length when no lexemes).
  * @throws {SyntaxError} If a Cluster is missing its Range element, Range is missing Index or
  *   Length, or Range Index/Length are not non-negative integers.
+ * @throws {SyntaxError} If any Lexeme element in a Cluster is missing the required Id attribute
+ *   (propagated from {@link extractLexemesFromCluster}).
  */
 function extractClustersFromVerse(verseDataElement: ParsedVerseData): ClusterData[] {
   const clusterElements = verseDataElement.Cluster ?? [];
diff --git a/src/services/projectStorage.ts b/src/services/projectStorage.ts
index 42b242a3..14298c32 100644
--- a/src/services/projectStorage.ts
+++ b/src/services/projectStorage.ts
@@ -359,12 +359,15 @@ export async function deleteProject(token: ExecutionToken, id: string): Promise<
 
 /**
  * Reads the draft working buffer for a source project, returning a fresh empty draft when none has
- * been written yet (ENOENT). Drafts are never added to the `projectIds` index, so they stay out of
- * {@link listProjects} and {@link getProjectsForSource} and never appear in the project picker.
+ * been written yet (ENOENT) or when the stored draft fails validation. Drafts are never added to
+ * the `projectIds` index, so they stay out of {@link listProjects} and {@link getProjectsForSource}
+ * and never appear in the project picker.
  *
  * @param token - The execution token for storage access.
  * @param sourceProjectId - The Platform.Bible source project ID whose draft to read.
- * @returns The stored {@link DraftProject}, or a fresh empty draft when none exists.
+ * @returns The stored {@link DraftProject}; or a fresh empty draft when none exists, or when the
+ *   stored draft fails the {@link isDraftProject} guard or its `sourceProjectId` does not match the
+ *   requested one (the invalid draft is logged and silently discarded).
  * @throws {SyntaxError} If the draft's storage value contains invalid JSON.
  * @throws If `papi.storage.readUserData` rejects for any non-ENOENT reason.
  */
diff --git a/src/store/analysisSlice.ts b/src/store/analysisSlice.ts
index a234fdff..c68fe31c 100644
--- a/src/store/analysisSlice.ts
+++ b/src/store/analysisSlice.ts
@@ -197,11 +197,14 @@ function removeSegmentAnalysis(
 
 /**
  * Finds the approved `TokenAnalysisLink` for `tokenRef` together with the `TokenAnalysis` it
- * references. When the approved link references a missing analysis (an orphaned link from
- * corruption or a migration), the link is removed from the draft — so the corruption never persists
- * or accumulates duplicate approved links — and `undefined` is returned as if no approved link
- * existed. Every token-analysis reducer resolves through this helper so they all repair orphaned
- * links the same way.
+ * references. Uses `findLast` so that, in the data-model-violating case of multiple approved links
+ * for one token, the reducer mutates the same link the read selectors surface (both
+ * {@link selectApprovedIdByTokenRef} and the phrase-link selectors are last-wins); otherwise a write
+ * would land on a different link than `useGloss`/`useMorphemes` read and appear to no-op. When the
+ * approved link references a missing analysis (an orphaned link from corruption or a migration),
+ * the link is removed from the draft — so the corruption never persists or accumulates duplicate
+ * approved links — and `undefined` is returned as if no approved link existed. Every token-analysis
+ * reducer resolves through this helper so they all repair orphaned links the same way.
  *
  * @param state - Current slice state (Immer draft).
  * @param tokenRef - `Token.ref` of the token to look up.
@@ -211,7 +214,7 @@ function resolveApprovedAnalysis(
   state: AnalysisState,
   tokenRef: string,
 ): { link: TokenAnalysisLink; analysis: TokenAnalysis } | undefined {
-  const link = state.analysis.tokenAnalysisLinks.find(
+  const link = state.analysis.tokenAnalysisLinks.findLast(
     (l) => l.status === 'approved' && l.token.tokenRef === tokenRef,
   );
   if (!link) return undefined;
@@ -297,16 +300,6 @@ const analysisSlice = createSlice({
   name: 'analysis',
   initialState: defaultState,
   reducers: {
-    /**
-     * Replaces the entire `TextAnalysis` in state. Intended for project-switch scenarios where the
-     * caller loads a new analysis from storage and needs to reset all in-memory state.
-     *
-     * @param state - Current slice state (Immer draft).
-     * @param action - Action whose payload is the replacement `TextAnalysis`.
-     */
-    setAnalysis(state, action: PayloadAction<TextAnalysis>) {
-      state.analysis = action.payload;
-    },
     writeGloss: {
       /**
        * Generates a UUID for a potential new `TokenAnalysis` record before the action reaches the
@@ -671,7 +664,6 @@ const analysisSlice = createSlice({
 });
 
 export const {
-  setAnalysis,
   writeGloss,
   writeMorphemes,
   deleteMorphemes,
@@ -819,20 +811,6 @@ export const selectPhraseLinkByAnalysisId = createSelector(
   (links) => new Map(links.map((link) => [link.analysisId, link])),
 );
 
-/**
- * Returns the `PhraseAnalysis` with the given id, or `undefined` when absent.
- *
- * @param state - The analysis slice state.
- * @param phraseId - The `PhraseAnalysis.id` to look up.
- * @returns The matching `PhraseAnalysis`, or `undefined`.
- */
-export function selectPhraseAnalysisById(
-  state: AnalysisState,
-  phraseId: string,
-): PhraseAnalysis | undefined {
-  return state.analysis.phraseAnalyses.find((pa) => pa.id === phraseId);
-}
-
 /**
  * Returns the approved gloss string for the given phrase in the active analysis language, or `''`
  * when no phrase with that id exists or it has no gloss for the active language.
diff --git a/src/tailwind.css b/src/tailwind.css
index 45b59f7b..7b387c22 100644
--- a/src/tailwind.css
+++ b/src/tailwind.css
@@ -91,6 +91,18 @@
   @apply tw:w-full tw:rounded tw:border tw:border-border tw:bg-muted tw:text-foreground tw:px-3 tw:py-1.5 tw:text-sm;
 }
 
+@utility modal-form-label {
+  @apply tw:block tw:text-sm tw:mb-1;
+}
+
+@utility modal-actions {
+  @apply tw:flex tw:gap-2 tw:justify-end;
+}
+
+@utility modal-error-box {
+  @apply tw:rounded tw:border tw:border-destructive/40 tw:bg-destructive/5;
+}
+
 @utility phrase-box-base {
   @apply tw:inline-flex tw:flex-col tw:rounded tw:border tw:px-0.5 tw:py-0.5;
 }
diff --git a/src/types/interlinearizer.d.ts b/src/types/interlinearizer.d.ts
index 52dc08cb..fd01cc7c 100644
--- a/src/types/interlinearizer.d.ts
+++ b/src/types/interlinearizer.d.ts
@@ -1230,8 +1230,7 @@ declare module 'interlinearizer' {
    *
    * `source` and `target` are rebuilt from Platform.Bible's USJ on each load and are never
    * serialized. All annotation and alignment mutations target `project.analysis` and
-   * `project.links`; saving is done by writing those fields back to storage via
-   * `saveProjectAnalysis`.
+   * `project.links`; saving is done by writing those fields back to storage via `updateAnalysis`.
    *
    * `target` is present only when `project.targetProjectId` is set (bilateral alignment projects
    * such as BT Extension imports). When present, `AlignmentLink.targetEndpoints` token IDs resolve
diff --git a/src/types/token-layout.ts b/src/types/token-layout.ts
index 7fd3cbd8..3cf32287 100644
--- a/src/types/token-layout.ts
+++ b/src/types/token-layout.ts
@@ -1,6 +1,6 @@
 /**
  * @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
+ *   rendering. These are pure structural types with no runtime behavior; the functions that build
  *   and consume them live in `utils/token-layout.ts`.
  */
 import type { PhraseAnalysisLink, Token } from 'interlinearizer';
@@ -54,8 +54,9 @@ export type TokenGroup = {
   /** 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`.
+   * The index of the first token in this group within the flat token array it was built from. Used
+   * to slice the flat token list to the group's range (e.g. for the punctuation that renders
+   * between groups); not passed to `PhraseBox`.
    */
   firstIndex: number;
   /**
diff --git a/src/types/type-guards.ts b/src/types/type-guards.ts
index 00dddc1f..73482924 100644
--- a/src/types/type-guards.ts
+++ b/src/types/type-guards.ts
@@ -197,6 +197,7 @@ function isPhraseAnalysisLink(v: unknown): boolean {
     typeof v === 'object' &&
     'tokens' in v &&
     Array.isArray(v.tokens) &&
+    v.tokens.length > 0 &&
     v.tokens.every(isTokenSnapshot)
   );
 }
diff --git a/src/utils/language-tags.ts b/src/utils/language-tags.ts
new file mode 100644
index 00000000..20bcb7c0
--- /dev/null
+++ b/src/utils/language-tags.ts
@@ -0,0 +1,17 @@
+/** @file Shared parsing for the comma-separated BCP 47 analysis-language inputs in the modals. */
+
+/**
+ * Parses a comma-separated analysis-language field into BCP 47 tags: splits on commas, trims each
+ * entry, and drops empty entries. The single source of this parse, shared by the create and
+ * metadata modals so they cannot drift. Does not apply any fallback when the result is empty — each
+ * modal decides how to treat an empty list (e.g. defaulting to `['und']` or disabling Save).
+ *
+ * @param input - The raw comma-separated language field value.
+ * @returns The trimmed, non-empty tags in input order; an empty array when the field is blank.
+ */
+export function parseLanguageTags(input: string): string[] {
+  return input
+    .split(',')
+    .map((tag) => tag.trim())
+    .filter((tag) => tag.length > 0);
+}
diff --git a/src/utils/phrase-arc.ts b/src/utils/phrase-arc.ts
index 7b49826b..d781d7f4 100644
--- a/src/utils/phrase-arc.ts
+++ b/src/utils/phrase-arc.ts
@@ -17,7 +17,7 @@ export const ARC_BASE_STEM = 10;
 export const ARC_LEVEL_STEP = 10;
 
 /** Corner radius (px) used in all arc bracket paths. */
-export const ARC_CORNER_RADIUS = 5;
+const ARC_CORNER_RADIUS = 5;
 
 /** Extra breathing room (px) above the topmost arc run so its corner doesn't graze the boundary. */
 const ARC_CLEARANCE_MARGIN_PX = 4;