Feature request: word-level (intraline) diff highlighting in <diff> component

[rsbmk]

Summary

The <diff> component currently highlights changes at the line level only — entire lines are colored as added/removed. Many diff viewers (VS Code, GitHub, lazygit) also highlight the specific words/characters that changed within a line pair, making it much easier to spot small changes in long lines.

Use Case

I'm building guit, a terminal git client using OpenTUI + Solid.js. Users expect word-level diff highlighting similar to lazygit or GitHub's diff view.

I initially tried passing git diff --word-diff to the <diff> component, but --word-diff changes the output format from standard unified diff — breaking the parser with:

Error parsing diff: Hunk at line 5 contained invalid line

The <diff> component (which uses parsePatch internally) only accepts standard unified diff format, so there's no way to achieve word-level highlighting with the current API.

Proposed Behavior

When enabled (e.g. via a wordDiff?: boolean prop), the <diff> component would:

1. Parse the standard unified diff (no changes to input format)
2. For matched add/delete line pairs within a hunk, compute the character-level difference
3. Highlight only the changed characters/words with a distinct background color (e.g. slightly brighter than the line-level addedBg/removedBg)

Potential new props

interface DiffRenderableOptions {
  // ... existing props ...
  wordDiff?: boolean                    // Enable word-level highlighting (default: false)
  addedWordBg?: string | RGBA           // Background for added words (default: brighter green)
  removedWordBg?: string | RGBA         // Background for removed words (default: brighter red)
}

Visual Reference

GitHub's diff view is a good reference — full lines are lightly colored, and the specific changed words have a more saturated background:

• Added line: light green background, changed words: darker green
• Removed line: light red background, changed words: darker red

Environment

• OpenTUI version: latest (via @opentui/core + @opentui/solid)
• Runtime: Bun
• Framework binding: Solid.js

[remorses]

There's a PR already