Stabilize TTS playback state transitions and harden Media Session handling

[Copilot]

This change tightens the playback path where voice changes, restarts, and browser media controls could drift out of sync with current state. It also removes the remaining hook dependency issues that were masking those edge cases.

• TTS state synchronization

  • Memoizes derived paragraph data in useTTS so callback dependencies stop churning on each render.
  • Moves active playback position and selected voice reads behind refs to avoid stale closures during replay, engine switches, and voice changes.
  • Routes voice-change replay through a stable function ref instead of depending on a callback recreated from stateful closures.

• Playback restart semantics

  • Extracts the short post-stop replay delay into a named constant.
  • Documents why replay waits briefly before re-speaking with the new voice.

• Browser integration hardening

  • Guards navigator.mediaSession.setActionHandler(...) registration and cleanup so unsupported or partial browser implementations fail safely.
  • Adds explicit warning logs for registration/cleanup failures instead of silently swallowing them.

• Hook correctness on input flow

  • Adds the missing translation dependency in AddArticlePage so clipboard/import side effects stay aligned with the active language function.

Example of the state-stable replay path:

const speakSentenceRef = useRef<(pIdx: number, sIdx: number) => void>(() => {});

useEffect(() => {
  speakSentenceRef.current = speakSentence;
}, [speakSentence]);

setTimeout(() => {
  if (playingRef.current) {
    speakSentenceRef.current(currentParagraphIndex, currentSentenceIndex);
  }
}, VOICE_CHANGE_DELAY_MS);