SourceDiffViewer

Lightweight unified-patch viewer for source-code and operational diffs with file headers, hunk headers, line state styling, and bounded rendering.

See the editor/Cinder surface boundary. SourceDiffViewer owns dependency-light source patches; use the editor DiffViewer for Markdown review and editor-runtime workflows.

Usage

<script lang="ts">
  import SourceDiffViewer from '@lostgradient/cinder/source-diff-viewer';

  const patch = `diff --git a/src/generated.txt b/src/generated.txt
--- a/src/generated.txt
+++ b/src/generated.txt
@@ -1,6 +1,6 @@
 unchanged
-old one
+new one
-old two
+new two
 unchanged
`;
</script>

<SourceDiffViewer {patch} maxLines={4} />

Use SourceDiffViewer for source-code patches, agent workspace patches, Git output, and other operational unified diffs. Use DiffViewer from @lostgradient/editor for Markdown document review, front-matter handling, Markdown normalization, and prose-oriented word-level changes.

Guidance

Use When

• Rendering source-code unified patches from agent output, Git operations, workspace changes, or review systems.
• Showing operational patch output where file and hunk structure matters more than Markdown front matter or word-level prose review.

Avoid When

• Comparing two Markdown documents with normalization, front-matter, and revert affordances — use DiffViewer from @lostgradient/editor.
• Showing syntax-highlighted code samples rather than patch output — use code-block instead.