import * as React from 'react'; type DiffLine =  | { type: 'add'; text: string }  | { type: 'remove'; text: string }  | { type: 'context'; text: string }  | { type: 'hunk'; text: string }; interface DiffProps {  /** Optional file path shown above the diff (e.g. "src/foo.ts") */  filename?: string;  /** Either provide pre-tokenized lines... */  lines?: DiffLine[];  /** ...or a raw unified-diff-style string with leading +/- / space markers */  children?: string;} const styles: Record<DiffLine['type'], React.CSSProperties> = {  add: {    background: 'hsl(var(--add-bg))',    color: 'hsl(var(--add-fg))',    borderLeft: '3px solid hsl(var(--add-rule))',  },  remove: {    background: 'hsl(var(--remove-bg))',    color: 'hsl(var(--remove-fg))',    borderLeft: '3px solid hsl(var(--remove-rule))',  },  context: {    background: 'transparent',    color: 'hsl(var(--muted-fg))',    borderLeft: '3px solid transparent',  },  hunk: {    background: 'hsl(var(--accent))',    color: 'hsl(var(--muted-fg))',    borderLeft: '3px solid transparent',    fontStyle: 'italic',  },}; const markers: Record<DiffLine['type'], string> = {  add: '+',  remove: '-',  context: ' ',  hunk: '@',}; function parseRaw(raw: string): DiffLine[] {  // Trim only leading/trailing blank lines; preserve internal whitespace.  const trimmed = raw.replace(/^\n+|\n+$/g, '');  return trimmed.split('\n').map((line): DiffLine => {    if (line.startsWith('@@')) return { type: 'hunk', text: line };    if (line.startsWith('+')) return { type: 'add', text: line.slice(1) };    if (line.startsWith('-')) return { type: 'remove', text: line.slice(1) };    if (line.startsWith(' ')) return { type: 'context', text: line.slice(1) };    return { type: 'context', text: line };  });} export function Diff({ filename, lines, children }: DiffProps) {  const resolved: DiffLine[] = lines ?? (children ? parseRaw(children) : []);  return (    <div      className="my-6 font-mono text-sm overflow-hidden"      style={{ border: '1px solid hsl(var(--border))' }}    >      {filename ? (        <div          className="px-3 py-1.5 text-xs"          style={{            background: 'hsl(var(--accent))',            color: 'hsl(var(--muted-fg))',            borderBottom: '1px solid hsl(var(--border))',          }}        >          {filename}        </div>      ) : null}      <pre className="m-0 p-0 overflow-x-auto" style={{ background: 'transparent', border: 'none', borderRadius: 0 }}>        {resolved.map((line, i) => (          <div            key={i}            className="px-3 py-0.5 whitespace-pre"            style={styles[line.type]}          >            <span style={{ opacity: 0.5, display: 'inline-block', width: '1.5em' }}>              {markers[line.type]}            </span>            {line.text || '\u00a0'}          </div>        ))}      </pre>    </div>  );}