Split Layout Code Diff Hero Block for React

Edit DIFF and FILE at the top of the file. DIFF is written as a unified diff, one line per line: start a line with + to add it, - to remove it, or a space to leave it as context. The counts in the diff header are worked out from those signs, so they always match the lines shown. FILES is the list of changed files and TITLE the window's title.

It's our DiffText. Once the window is a quarter in view, each removed line tints and strikes through, then each added line slides in, a fifth of a second apart, all in CSS. It plays once. With reduced motion on, the finished diff is simply there, and the copy and the window appear in place instead of fading in.

Yes: the output of git diff for a single hunk works as is, without the @@ header line. Pass it as text and keep the hunk short, ten lines or so, so the window stays in proportion with the copy above it.

The page column has Guides bleed marks="top" rules="top": two side rails and one top rule with a plus on each crossing. The frame is Guides extend="sm" marks="corners" on the box around the window, so its lines overshoot the corners a little. The window has its own padding between the frame and its edge, and the column keeps its bottom padding, since the figure is the last thing in it.

The window is a figure named "Suggested change to auth.ts", and the code is real text. Removed lines are del elements and added lines ins elements, each read with "Removed" or "Added" before it, and the counts read "+5 lines added" and "−2 lines removed". The reviewer's comment is a paragraph. The title bar and the list of files are decoration and hidden. The headline is the block's one h1.

The file list drops out below md and the diff keeps the window's width. Code lines don't wrap: the diff scrolls sideways inside its window instead, and the page itself never does. The scrolling area is in the tab order with a focus ring, so keyboard users can scroll it with the arrow keys too. The ticks stack, and the Shine Button is on the first screen.