Added Removed Diff List Features Block for React

Edit HUNKS at the top of the file: each hunk has a title, a sentence and its lines, and each line is a kind (add, del or ctx) with its text. The folded runs are BEFORE_LINES and BETWEEN_LINES. The counts in the folds, the hunk badge and the footer are worked out from the data, so they cannot drift from the lines.

The block follows your theme and keeps the page's colours for rare states. An added line is drawn in full foreground on a tint, a removed line in the quiet colour, and the gutter carries a plus or minus. Screen readers hear "Added" or "Removed" before each changed line.

Each is a Collapsible: a button that names how many lines it hides, with the lines in a panel that opens in place with a short height transition. Opening one only moves what is below it, never the lines above, and the button works with Enter and Space and shows a focus ring. The panel animates with a grid-row transition.

Yes. The frame, tints and text use theme tokens only, so it is light on a light page and dark on a dark one in any preset. There is no button and no Shine Button in this block.

The header fades up once on load, and a fold's panel opens with a short height transition and a turning icon. With reduced motion the transitions are off and the panel simply appears.

Each caption drops under its hunk instead of beside it. Long lines wrap rather than scroll, so the diff never scrolls sideways, and the file name truncates at 320 pixels.