Function renderSplitCell

src/ui/diff/renderRows.tsx:853–917

Render one split-view cell as prefix + gutter + content spans.

(
  cell: SplitLineCell,
  width: number,
  lineNumberDigits: number,
  showLineNumbers: boolean,
  theme: AppTheme,
  keyPrefix: string,
  contentOffset = 0,
  prefix?: {
    text: string;
    fg: string;
    bg: string;
  },
  selected = false,
  selectionColRange?: CopySelectedRowRange,
  paneOffset = 0,
)

/** Render one split-view cell as prefix + gutter + content spans. */
function renderSplitCell(
  cell: SplitLineCell,
  width: number,
  lineNumberDigits: number,
  showLineNumbers: boolean,
  theme: AppTheme,
  keyPrefix: string,
  contentOffset = 0,
  prefix?: {
    text: string;
    fg: string;
    bg: string;
  },
  selected = false,
  selectionColRange?: CopySelectedRowRange,
  paneOffset = 0,
) {
  const basePalette = splitCellPalette(cell.kind, theme, cell.moveKind);
  const palette = selected ? applySelectionPalette(basePalette, theme) : basePalette;
  const resolvedPrefix = selected && prefix ? applySelectionPrefix(prefix, theme) : prefix;
  const prefixWidth = resolvedPrefix?.text.length ?? 0;
  const { gutterWidth, contentWidth } = resolveSplitCellGeometry(
    width,
    lineNumberDigits,
    showLineNumbers,
    prefixWidth,
  );
  const gutterText = splitGutterText(cell, lineNumberDigits, showLineNumbers).padEnd(gutterWidth);

  // Convert global selection column range to content-local range.
  const globalContentStart = paneOffset + prefixWidth + gutterWidth;
  const localColRange =
    selectionColRange && globalContentStart < selectionColRange.endCol
      ? {
          start: Math.max(0, selectionColRange.startCol - globalContentStart),
          end: Math.min(
            contentWidth,
            Math.max(0, selectionColRange.endCol - globalContentStart + 1),
          ),
        }
      : undefined;

  return (
    <>
      {resolvedPrefix ? (
        <span key={`${keyPrefix}:prefix`} fg={resolvedPrefix.fg} bg={resolvedPrefix.bg}>
          {resolvedPrefix.text}
        </span>
      ) : null}
      <span key={`${keyPrefix}:gutter`} fg={palette.numberColor} bg={palette.gutterBg}>
        {gutterText}
      </span>
      {renderInlineSpans(
        cell.spans,
        contentWidth,
        theme.syntaxColors.default,
        palette.contentBg,
        `${keyPrefix}:content`,