/** * Low-level diff primitives for the canvas SDK. * * The canvas diff surface is intentionally minimal — two components that * compose with the generic `Card` / `CardHeader` / `CardBody` / `Pill` / * `Text` primitives to build any diff layout an agent can imagine: * * - `DiffView` — a monospaced, syntax-highlighted unified diff renderer. * Drops into any container (a `Card`, a table cell, a bare layout, * nothing at all). No card chrome, no header, no path display. Pass * `path` to auto-detect the language for highlighting, or `language` * to override. * * - `DiffStats` — the canonical `+N` green / `-N` red glyph pair. Use * it anywhere a small "added/deleted" summary makes sense — in a * `CardHeader`'s `trailing` slot, next to a filename in a file tree, * inside a status row, etc. * * For file-level metadata the preferred composition is to use the * generic `Card` family: * * ```tsx * * }> * src/utils.ts * * * * * * ``` */ import type { CSSProperties, JSX } from "react"; export type DiffStatsProps = { additions?: number; deletions?: number; style?: CSSProperties; }; /** * Inline `+N` / `-N` glyph pair. Green additions, red deletions, with * tabular numerals so columns of stats line up. Renders nothing when * both counts are zero. * * @example * ```tsx * }> * src/utils.ts * * * * Refactor pass * * * ``` */ export declare function DiffStats({ additions, deletions, style }: DiffStatsProps): JSX.Element | null; export type DiffLineType = "added" | "removed" | "unchanged"; export type DiffLineData = { type: DiffLineType; content: string; lineNumber?: number; }; export type DiffViewProps = { lines: DiffLineData[]; /** * File path used to infer the syntax-highlighting language from the * extension (e.g. `"src/utils.ts"` → `typescript`). The most ergonomic * way to enable highlighting — pass the same path you show in the * enclosing card header. Unknown extensions silently render as plain * text. * * If both `path` and `language` are provided, `language` wins. */ path?: string; /** * Explicit language override for syntax highlighting (e.g. * `"typescript"`, `"python"`, `"tsx"`). Use this when no file path is * available, when the path's extension is misleading, or when the * content is a snippet rather than a real file. Accepts common * aliases (`ts`, `py`, `rs`, `md`, etc.). Unknown languages silently * fall back to plain text. * * Highlighting is applied per line, so multi-line constructs (block * comments, template literals) may not colorize perfectly across line * boundaries. For typical diff-sized inputs this is fine. */ language?: string; /** Show line numbers in the gutter. Default `true`. */ showLineNumbers?: boolean; /** Color line numbers green/red for added/removed lines. Default `true`. */ coloredLineNumbers?: boolean; /** Show a 3px accent strip on the left edge for changed lines. Default `true`. */ showAccentStrip?: boolean; style?: CSSProperties; }; /** * Unified diff body renderer with monospaced type, colored line * backgrounds, line-number gutter, accent strip, and optional Shiki * syntax highlighting. * * `DiffView` does not provide any surrounding chrome — place it inside * a `Card` + `CardBody` (with `padding: 0`) when you want the standard * bordered "file diff" look, or drop it anywhere else if you want the * bare renderer. * * Pass `path` to enable syntax highlighting from the file extension. * * @example * ```tsx * * }> * src/utils.ts * * * * * * ``` */ export declare function DiffView({ lines, path, language, showLineNumbers, coloredLineNumbers, showAccentStrip, style }: DiffViewProps): JSX.Element; //# sourceMappingURL=diff-view.d.ts.map