brand-ui — TerminalDiffHunk

import { TerminalDiffHunk } from "@elabs-ai/components-terminal";

Install

npm install @elabs-ai/components-tokens @elabs-ai/components-ui @elabs-ai/components-terminal

Skipping the @source line is the most common first failure: Tailwind does not scan node_modules, so every component renders unstyled. The one-time wiring

Prompt for your coding agent

Paste it into Claude Code, Cursor, Codex or any other coding agent. Text in [brackets] is yours to fill in.

Add the brand-ui TerminalDiffHunk component (from @elabs-ai/components-terminal) to this project.

1. Read https://elabs-ai.com/llms.txt first: it maps every package and the rules. If you can use MCP servers, connect https://elabs-ai.com/mcp and use its search, docs and tokens tools. If not, run the same lookups in the terminal: `npx -y @elabs-ai/components-cli search "<what you need>"` and `npx -y @elabs-ai/components-cli docs <Component>`.
2. Look TerminalDiffHunk up before writing code: `npx -y @elabs-ai/components-cli docs TerminalDiffHunk` prints its real props, variants, what it pairs with and what to avoid.
3. If @elabs-ai/components-terminal is not installed yet: `pnpm add @elabs-ai/components-tokens @elabs-ai/components-ui @elabs-ai/components-terminal` (or `npm install @elabs-ai/components-tokens @elabs-ai/components-ui @elabs-ai/components-terminal`). If this is the first brand-ui package in the project, wire it once: import `@elabs-ai/components-tokens/styles.css` plus the `themes/light.css` and `themes/dark.css` stylesheets in the CSS entry, add one Tailwind `@source` line per installed @elabs-ai package (Tailwind does not scan node_modules, so without it everything renders unstyled), and wrap the app root in `ThemeProvider` from `@elabs-ai/components-tokens`.
4. Use it here: [the screen or file, and what it should show]
5. Rules: use only @elabs-ai/components-* components and the semantic tokens — no raw colours, no raw font sizes, no arbitrary Tailwind values. Look up each component's real props with the docs tool before you use it; never guess a prop.
6. Done means: the typecheck passes, `npx -y @elabs-ai/components-cli audit src --strict` reports nothing, and you have opened the app and looked at every screen you touched in the light and the dark theme.

Avoid

Re-deriving the `"added: "`/`"removed: "` polarity words locally — they ride the promoted `diffLineAccessibleLabel()` shared with DiffView (`@elabs-ai/components-ai`); a second implementation drifts from it.
Rendering the line number as a `ch`-unit padded string — it is a plain layout box in the content cell, never text-column arithmetic.
Truncating a long line instead of wrapping it — `min-w-0` plus `whitespace-pre-wrap` on the text cell is what lets it wrap under the content column.
Putting the collapsed-context-run's expansion in `TerminalSurface`'s context, or hand-rolling a one-way 'show more' button — it is a real, per-row Radix `Collapsible`, same as every other disclosure in this family.

Works with

Contains

TerminalRow

Pairs with

TerminalSurface
TerminalRow

Avoid next to

DiffView (that is the chat skin of the same shared diff model, not a row sibling)

Examples

7 live examples

With Summary

An optional second header line, prefixed with the `⎿` continuation glyph.

Hunk And Meta Lines

`hunk`/`meta` diff-header lines render through the same shared model — no line number, no marker, a muted/italic full-width treatment.

Rail

`rail` suppresses every row's glyph in favour of a vertical rule — the announced polarity word is the ONLY thing left carrying add/del, and it must still be there.

Boxed

A square framed block per row — the frame-drawing CLI reading.

Collapsed Context

A long run of unchanged lines collapses behind a real disclosure — a keyboard user opens it with Tab then Enter, never a CLI chord, and it genuinely re-collapses (a `Collapsible`, not a one-way reveal).

Long Line

Long lines wrap under the content column instead of pushing the row wide.

API

`TerminalDiffHunk`

Prop	Type	Description
`file`required	`string`	File path named in the header, after "Update".
`summary`	`string`	Optional second header line, prefixed with the `⎿` continuation glyph.
`lines`required	`DiffLine[]`	The diff, as a flat ordered line list — the shared `@elabs-ai/components-ui` model.
`contextLines`	`number`	Collapse a run of consecutive `context` lines longer than this behind a "show more" disclosure. Omitted, every line renders.
`variant`	`TerminalVariant`	Gutter grammar for every row. Omitted, each row inherits the surrounding `TerminalSurface` — passed, it overrides it for the whole hunk.

Also accepts: Omit<HTMLAttributes<HTMLDivElement>, "children">

`TerminalRow`

variant: marker (default)railboxed

Prop	Type	Description
`variant`	`TerminalVariant`	Gutter grammar. Omitted, the row inherits the surrounding `TerminalSurface`; passed, it overrides it, so a row still renders correctly outside any surface.
`gutter`	`ReactNode`	What sits in the gutter cell — usually one glyph. Decorative by default.
`gutterLabel`	`string`	The meaning the gutter glyph carries, as words. Set it whenever the glyph is not purely ornamental; it is announced and it survives greyscale.
`children`	`ReactNode`

Also accepts: Omit<HTMLAttributes<HTMLDivElement>, "children">, Omit<VariantProps<typeof terminalRowVariants>, "variant">

Theming

The tokens each state resolves to. Change the token and every theme follows.

State	Token
add	`bg-terminal-ansi-green/10`
del	`bg-terminal-ansi-red/10`