Line-synced background vocals (#122)

[boidushya]

Summary

Background vocals are now a first-class voice with the same three-state timing model as the main vocal: untimed, line-synced, or word-synced. Previously a background on a line-synced line was automatically broken up into words. Now it stays a single line-synced block, matching how the main line behaves.

Re-lands the feature that was reverted in #136, with one added fix: the per-row group-tint overlay no longer swallows right-clicks on the background lane, so "Add word here" works on the bg lane of a line that has no background yet.

Closes #122.

What changed

• Data model: LyricLine nests its timing into voices, { main: Voice; background?: BackgroundVoice }, where Voice is a structural union (untimed {text}, line-synced {text,begin,end}, word-synced {text,words}). A single seam (domain/line/voices.ts) is the only reader of the nested fields, and a fitness test bans inline access elsewhere.
• Granularity resolver + one funnel: every background write goes through a single resolver-aware chokepoint. An untimed background resolves against the main voice (line-synced over a line-synced main, distributed over a word-synced main). The old sync-panel effect that force-split backgrounds into words is gone.
• Legacy migration: projects saved in the old flat shape migrate to the voice model at load and import boundaries.
• TTML parser: preserves authored background granularity. One timed x-bg span imports as a line-synced background, two or more import as word-synced, and untimed text resolves against the main.
• TTML export: emits from the voice model. A line-synced background is one x-bg span with its own bounds, and composer:timing is derived from whether any voice is word-synced.
• Timeline: a background lane covering all three states, "Place background here", voice-aware "Split into words", and "Remove background" (with undo and a confirmation). A line-synced background renders identically to a line-synced main.
• Fix: the decorative per-row tint overlay is now pointer-events-none, so right-clicks reach the background lane beneath it.

Testing

• Unit, component, typecheck, lint, and duplication checks all green.
• Covered end to end on a real line-synced TTML carrying a parenthetical background: it stays one line-synced block on import and survives a parse, export, and re-parse with no granularity change. The exporter output validates against the standalone TTML validator with no errors.

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Preview URL	Updated (UTC)
✅ Deployment successful! View logs	composer	63ea05f	Commit Preview URL Branch Preview URL	Jun 20 2026, 09:22 PM

[github-actions]

React Doctor found no new issues. 🎉

_{Reviewed by React Doctor for commit 98947e6.}