feat: add visual-diff package with syntax highlighting

[pyramation]

feat: add visual-diff package with syntax highlighting

Summary

Adds a new @interweb/visual-diff package to the dev-utils monorepo that provides beautiful code diffs with syntax highlighting for both terminal and HTML output.

Key features:

• LCS-based diff algorithm with configurable context lines
• Syntax highlighting for 15+ languages (JS, TS, Python, SQL, Go, Rust, C/C++, etc.)
• Terminal renderer with ANSI colors using the existing yanse package
• HTML renderer with dark/light mode support
• 6 built-in themes (default, github, monokai, dracula, nord, minimal)
• Custom theme creation API
• Unified diff format parsing and generation

The package follows existing monorepo conventions and includes 108 passing tests.

Updates since last revision

• Renamed package from visual-diff to @interweb/visual-diff to match the @interweb scope convention
• Added dev/ folder with visual preview scripts for testing the package
• Added sample fixtures for TypeScript, SQL, and Python diffs
• New pnpm dev command supports --terminal, --html, and --serve flags

Review & Testing Checklist for Human

• Verify diff algorithm correctness - The LCS algorithm is implemented from scratch (not using an external library). Test with real-world code files to ensure diffs are computed correctly, especially for edge cases like large files or files with many changes.

• Review regex-based syntax highlighting - The tokenizer in highlight.ts uses regex patterns which may miss edge cases (nested strings, multi-line comments, template literals). Test with complex code samples.

• Check HTML output for XSS - The HTML renderer escapes content but review render/html.ts to ensure no injection vectors exist, especially with custom themes or unusual input.

• Test the visualDiff convenience function - In index.ts, this function uses dynamic require() calls which is unusual. Verify it works in both CJS and ESM contexts.

• Verify side-by-side rendering - The alignment logic for side-by-side diffs in both terminal and HTML renderers is complex. Test with various diff scenarios.

Recommended test plan:

cd packages/visual-diff
pnpm dev --terminal    # View terminal output with all themes
pnpm dev --html        # Generate out/preview.html
pnpm dev --html --serve  # Serve HTML preview at localhost:3456

Notes

• ESLint check failed due to pre-existing repo configuration issue (ESLint v9 expects eslint.config.js but repo has .eslintrc.json)
• Build and all 108 tests pass successfully

Requested by: Dan Lynch (@pyramation)
Devin session: https://app.devin.ai/sessions/05f85b338182490093cbbc647500f5d1

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment and CI monitoring