Function renderInlineSpans

src/ui/diff/renderRows.tsx:122–287

Render a fixed-width inline span sequence for one diff cell.

(
  spans: RenderSpan[],
  width: number,
  fallbackColor: string,
  fallbackBg: string,
  keyPrefix: string,
  horizontalOffset = 0,
  selectionTheme?: AppTheme,
  selectionColRange?: { start: number; end: number },
)

/** Render a fixed-width inline span sequence for one diff cell. */
function renderInlineSpans(
  spans: RenderSpan[],
  width: number,
  fallbackColor: string,
  fallbackBg: string,
  keyPrefix: string,
  horizontalOffset = 0,
  selectionTheme?: AppTheme,
  selectionColRange?: { start: number; end: number },
) {
  const { spans: trimmed, usedWidth } = sliceSpansWindow(
    sanitizeTerminalSpans(spans),
    horizontalOffset,
    width,
  );
  const needsBlending = selectionTheme && selectionColRange;

  // Build the final element list by splitting spans at selection boundaries so the highlight
  // applies at character-level precision rather than whole-token granularity.
  const elements: ReactNode[] = [];
  let colPos = 0;
  let elementIndex = 0;

  for (const span of trimmed) {
    const spanWidth = measureTextWidth(span.text);
    const spanStart = colPos;
    const spanEnd = colPos + spanWidth;
    colPos = spanEnd;

    if (
      !needsBlending ||
      spanEnd <= selectionColRange.start ||
      spanStart >= selectionColRange.end
    ) {
      // Span is entirely outside the selection — render with original styling.
      elements.push(
        <span
          key={`${keyPrefix}:${elementIndex++}`}
          fg={span.fg ?? fallbackColor}
          bg={span.bg ?? fallbackBg}
        >
          {span.text}
        </span>,
      );
      continue;
    }

    // Compute the split offsets within this span's text.
    const localSelStart = Math.max(0, selectionColRange.start - spanStart);
    const localSelEnd = Math.min(spanWidth, selectionColRange.end - spanStart);

    if (localSelStart >= localSelEnd) {
      // No overlap after clamping — render original.
      elements.push(
        <span
          key={`${keyPrefix}:${elementIndex++}`}
          fg={span.fg ?? fallbackColor}
          bg={span.bg ?? fallbackBg}