feat(diff): add word-level highlighting for modified lines

[remorses]

Adds word-level highlighting to show which words changed within modified lines (like GitHub's diff view).

Algorithm:

1. Parse diff and group consecutive remove/add lines into change blocks
2. Pair lines positionally within each block (1st remove with 1st add, etc.)
3. For each pair, compute similarity score using character-level diff
4. If similarity >= 40%, compute word boundaries with diffWordsWithSpace
5. Pass highlight column ranges to LineNumberRenderable for rendering

Complexity is O(L + B×P×C²) where L=lines, B=change blocks, P=pairs per block, C=chars per line. In practice C is small (~100) and only change blocks are processed.

Performance guards: skips word diff for dissimilar lines, skips entirely for large blocks (>50 lines).

New options:

• disableWordHighlights - Turn off word-level highlighting (default: false)
• addedWordBg - Background color for added words (default: brighter addedBg)
• removedWordBg - Background color for removed words (default: brighter removedBg)
• lineSimilarityThreshold - Min similarity (0-1) to pair lines for word diff (default: 0.4)

Also includes:

• Fix for word highlights scrolling with content when wrapMode: "none" and horizontal scrolling is used

[kommander]

This would be cool. I'd make it an option though so both view styles work.

I am concerned about multi width graphemes though, it cannot use String.length or utf16 char offsets from js as the highlights operate on display width currently.

That's a bit tricky. What could work to get content start and end for the highlight offsets would be to measure the string before the content starts with Bun.stringWidth, then the content that should be highlighted itself with Bun.stringWidth and add that to the former for the end offset.

[Copilot]

Pull request overview

This PR adds word-level highlighting to diff views, showing which specific words changed within modified lines (similar to GitHub's diff view). The implementation uses character-level similarity scoring to intelligently pair removed/added lines, then applies word-based diffing to compute highlight positions.

Key changes:

• New computeLineSimilarity and computeInlineHighlights functions for word-level diff analysis
• Modified unified and split view rendering to integrate inline highlights
• Added LineInlineHighlight interface and rendering support in LineNumberRenderable

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 4 comments.

File	Description
packages/core/src/renderables/Diff.ts	Implements word-level diff algorithm with similarity-based line pairing, adds new options (disableWordHighlights, addedWordBg, removedWordBg, lineSimilarityThreshold) and integrates highlights into both unified and split view rendering
packages/core/src/renderables/LineNumberRenderable.ts	Adds LineInlineHighlight interface and rendering logic to draw word-level highlight backgrounds, includes new public API methods for managing highlights
packages/core/src/renderables/Diff.test.ts	Comprehensive test coverage for similarity computation, inline highlight calculation (including CJK/emoji edge cases), and option handling
packages/react/examples/diff.tsx	Updates example diff content to include emoji and CJK characters for better visual testing of word-level highlighting

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[remorses]

Also works with text wrapping:

[remorses]

Here is how it looks in opencode

[Hona]

on pure aesthetics i think it shouldnt be green it should be a more opaque version of the + bg color
thinking about themes and how github does it:

you may have already covered that in config right as a new option?
maybe the config you've already done is the way to go

[remorses]

I now increase opacity, previously it was only increasing brightness