Code diff

import { Canvas, Controls, Meta, Title } from '@storybook/addon-docs/blocks';

import * as CodeDiffStories from './CodeDiff.stories';

<Meta of={CodeDiffStories} name='Usage' />

<Title />

## Purpose

Shows the files an agent (or a person) changed, each expandable to its diff.

## Usage

This is a recipe, not a component. Use it wherever a change needs review: the proposed fix in an approval report, the result of an edit in a chat, a list of changed files on a branch. Each file is one row. Collapsed rows keep the list short; expand a row to read its diff.

## Composition

It is the PDS Panel List with expandable Panel Rows, from the package:

- the file name (with a `fileDiff` icon) is the row's `items-left` slot, in the code font;
- the PDS File Diff (counts and bar) is the `items-right` slot, shown when the file has counts;
- the Code Block with `language='diff'` is the `items-below` slot, with an optional copy button. Pass each file's diff as unified diff text; the Code Block colors added and removed lines;
- the Panel List takes `paddingSize='2xs'` and the rows get `--pds-spacing-s` side padding and a `--pds-spacing-2xl` minimum height, to keep the list compact (the Panel Row has a 48px minimum height and 20px side padding that no prop changes).

The story's sample helper (`_story-helpers/CodeDiffSample`) writes the composition once; the engineer copies it.

<hr />

<Canvas of={CodeDiffStories.Default} />
<Controls of={CodeDiffStories.Default} />