@fairyhunter13/opentui-core 0.1.88 → 0.1.90

package/src/renderables/Diff.ts

@@ -0,0 +1,1209 @@
+import { Renderable, type RenderableOptions } from "../Renderable.js"
+import type { RenderContext } from "../types.js"
+import { CodeRenderable, type CodeOptions } from "./Code.js"
+import { LineNumberRenderable, type LineSign, type LineColorConfig } from "./LineNumberRenderable.js"
+import { RGBA, parseColor } from "../lib/RGBA.js"
+import { SyntaxStyle } from "../syntax-style.js"
+import { parsePatch, type StructuredPatch } from "diff"
+import { TextRenderable } from "./Text.js"
+import type { TreeSitterClient } from "../lib/tree-sitter/index.js"
+import type { MouseEvent } from "../renderer.js"
+
+interface LogicalLine {
+  content: string
+  lineNum?: number
+  hideLineNumber?: boolean
+  color?: string | RGBA
+  sign?: LineSign
+  type: "context" | "add" | "remove" | "empty"
+}
+
+export interface DiffRenderableOptions extends RenderableOptions<DiffRenderable> {
+  diff?: string
+  syncScroll?: boolean
+  view?: "unified" | "split"
+
+  // CodeRenderable options
+  fg?: string | RGBA
+  filetype?: string
+  syntaxStyle?: SyntaxStyle
+  wrapMode?: "word" | "char" | "none"
+  conceal?: boolean
+  selectionBg?: string | RGBA
+  selectionFg?: string | RGBA
+  treeSitterClient?: TreeSitterClient
+
+  // LineNumberRenderable options
+  showLineNumbers?: boolean
+  lineNumberFg?: string | RGBA
+  lineNumberBg?: string | RGBA
+
+  // Diff styling
+  addedBg?: string | RGBA
+  removedBg?: string | RGBA
+  contextBg?: string | RGBA
+  addedContentBg?: string | RGBA
+  removedContentBg?: string | RGBA
+  contextContentBg?: string | RGBA
+  addedSignColor?: string | RGBA
+  removedSignColor?: string | RGBA
+  addedLineNumberBg?: string | RGBA
+  removedLineNumberBg?: string | RGBA
+}
+
+export class DiffRenderable extends Renderable {
+  private _diff: string
+  private _syncScroll: boolean = false
+  private _view: "unified" | "split"
+  private _parsedDiff: StructuredPatch | null = null
+  private _parseError: Error | null = null
+
+  // CodeRenderable options
+  private _fg?: RGBA
+  private _filetype?: string
+  private _syntaxStyle?: SyntaxStyle
+  private _wrapMode?: "word" | "char" | "none"
+  private _conceal: boolean
+  private _selectionBg?: RGBA
+  private _selectionFg?: RGBA
+  private _treeSitterClient?: TreeSitterClient
+
+  // LineNumberRenderable options
+  private _showLineNumbers: boolean
+  private _lineNumberFg: RGBA
+  private _lineNumberBg: RGBA
+
+  // Diff styling
+  private _addedBg: RGBA
+  private _removedBg: RGBA
+  private _contextBg: RGBA
+  private _addedContentBg: RGBA | null
+  private _removedContentBg: RGBA | null
+  private _contextContentBg: RGBA | null
+  private _addedSignColor: RGBA
+  private _removedSignColor: RGBA
+  private _addedLineNumberBg: RGBA
+  private _removedLineNumberBg: RGBA
+
+  private leftSide: LineNumberRenderable | null = null
+  private rightSide: LineNumberRenderable | null = null
+
+  private leftSideAdded: boolean = false
+  private rightSideAdded: boolean = false
+
+  private leftCodeRenderable: CodeRenderable | null = null
+  private rightCodeRenderable: CodeRenderable | null = null
+
+  private pendingRebuild: boolean = false
+  private _lastWidth: number = 0
+
+  private errorTextRenderable: TextRenderable | null = null
+  private errorCodeRenderable: CodeRenderable | null = null
+
+  private _waitingForHighlight: boolean = false
+  private _lineInfoChangeHandler: (() => void) | null = null
+
+  constructor(ctx: RenderContext, options: DiffRenderableOptions) {
+    super(ctx, {
+      ...options,
+      flexDirection: options.view === "split" ? "row" : "column",
+    })
+
+    this._diff = options.diff ?? ""
+    this._syncScroll = options.syncScroll ?? false
+    this._view = options.view ?? "unified"
+
+    // CodeRenderable options
+    this._fg = options.fg ? parseColor(options.fg) : undefined
+    this._filetype = options.filetype
+    this._syntaxStyle = options.syntaxStyle
+    this._wrapMode = options.wrapMode
+    this._conceal = options.conceal ?? false
+    this._selectionBg = options.selectionBg ? parseColor(options.selectionBg) : undefined
+    this._selectionFg = options.selectionFg ? parseColor(options.selectionFg) : undefined
+    this._treeSitterClient = options.treeSitterClient
+
+    // LineNumberRenderable options
+    this._showLineNumbers = options.showLineNumbers ?? true
+    this._lineNumberFg = parseColor(options.lineNumberFg ?? "#888888")
+    this._lineNumberBg = parseColor(options.lineNumberBg ?? "transparent")
+
+    // Diff styling
+    this._addedBg = parseColor(options.addedBg ?? "#1a4d1a")
+    this._removedBg = parseColor(options.removedBg ?? "#4d1a1a")
+    this._contextBg = parseColor(options.contextBg ?? "transparent")
+    this._addedContentBg = options.addedContentBg ? parseColor(options.addedContentBg) : null
+    this._removedContentBg = options.removedContentBg ? parseColor(options.removedContentBg) : null
+    this._contextContentBg = options.contextContentBg ? parseColor(options.contextContentBg) : null
+    this._addedSignColor = parseColor(options.addedSignColor ?? "#22c55e")
+    this._removedSignColor = parseColor(options.removedSignColor ?? "#ef4444")
+    this._addedLineNumberBg = parseColor(options.addedLineNumberBg ?? "transparent")
+    this._removedLineNumberBg = parseColor(options.removedLineNumberBg ?? "transparent")
+
+    if (this._diff) {
+      this.parseDiff()
+      this.buildView()
+    }
+  }
+
+  private parseDiff(): void {
+    if (!this._diff) {
+      this._parsedDiff = null
+      this._parseError = null
+      return
+    }
+
+    try {
+      const patches = parsePatch(this._diff)
+
+      if (patches.length === 0) {
+        this._parsedDiff = null
+        this._parseError = null
+        return
+      }
+
+      this._parsedDiff = patches[0]
+      this._parseError = null
+    } catch (error) {
+      this._parsedDiff = null
+      this._parseError = error instanceof Error ? error : new Error(String(error))
+    }
+  }
+
+  private buildView(): void {
+    if (this._parseError) {
+      this.buildErrorView()
+      return
+    }
+
+    if (!this._parsedDiff || this._parsedDiff.hunks.length === 0) {
+      return
+    }
+
+    if (this._view === "unified") {
+      this.buildUnifiedView()
+    } else {
+      this.buildSplitView()
+    }
+  }
+
+  protected override onMouseEvent(event: MouseEvent): void {
+    if (event.type !== "scroll" || this._view !== "split" || !this._syncScroll) return
+    if (!this.leftCodeRenderable || !this.rightCodeRenderable) return
+    if (!event.target) return
+
+    if (this.isInsideSide(event.target, "left")) {
+      this.rightCodeRenderable.scrollY = this.leftCodeRenderable.scrollY
+      this.rightCodeRenderable.scrollX = this.leftCodeRenderable.scrollX
+    } else if (this.isInsideSide(event.target, "right")) {
+      this.leftCodeRenderable.scrollY = this.rightCodeRenderable.scrollY
+      this.leftCodeRenderable.scrollX = this.rightCodeRenderable.scrollX
+    }
+  }
+
+  private isInsideSide(target: Renderable | null, side: "left" | "right"): boolean {
+    const container = side === "left" ? this.leftCodeRenderable : this.rightCodeRenderable
+    let current = target
+    while (current) {
+      if (current === container) return true
+      current = current.parent
+    }
+    return false
+  }
+
+  protected override onResize(width: number, height: number): void {
+    super.onResize(width, height)
+
+    if (this._view === "split" && this._wrapMode !== "none" && this._wrapMode !== undefined) {
+      if (this._lastWidth !== width) {
+        this._lastWidth = width
+        this.requestRebuild()
+      }
+    }
+  }
+
+  private requestRebuild(): void {
+    if (this.pendingRebuild) {
+      return
+    }
+
+    this.pendingRebuild = true
+    queueMicrotask(() => {
+      if (!this.isDestroyed && this.pendingRebuild) {
+        this.pendingRebuild = false
+        this.buildView()
+        this.requestRender()
+      }
+    })
+  }
+
+  private rebuildView(): void {
+    if (this._view === "split") {
+      this.requestRebuild()
+    } else {
+      this.buildView()
+    }
+  }
+
+  private handleLineInfoChange = (): void => {
+    if (!this._waitingForHighlight) return
+    if (!this.leftCodeRenderable || !this.rightCodeRenderable) return
+
+    const leftIsHighlighting = this.leftCodeRenderable.isHighlighting
+    const rightIsHighlighting = this.rightCodeRenderable.isHighlighting
+
+    if (!leftIsHighlighting && !rightIsHighlighting) {
+      this._waitingForHighlight = false
+      this.requestRebuild()
+    }
+  }
+
+  private attachLineInfoListeners(): void {
+    if (this._lineInfoChangeHandler) return
+    if (!this.leftCodeRenderable || !this.rightCodeRenderable) return
+
+    this._lineInfoChangeHandler = this.handleLineInfoChange
+    this.leftCodeRenderable.on("line-info-change", this._lineInfoChangeHandler)
+    this.rightCodeRenderable.on("line-info-change", this._lineInfoChangeHandler)
+  }
+
+  private detachLineInfoListeners(): void {
+    if (!this._lineInfoChangeHandler) return
+
+    if (this.leftCodeRenderable) {
+      this.leftCodeRenderable.off("line-info-change", this._lineInfoChangeHandler)
+    }
+    if (this.rightCodeRenderable) {
+      this.rightCodeRenderable.off("line-info-change", this._lineInfoChangeHandler)
+    }
+    this._lineInfoChangeHandler = null
+  }
+
+  public override destroyRecursively(): void {
+    this.detachLineInfoListeners()
+    this.pendingRebuild = false
+    this.leftSideAdded = false
+    this.rightSideAdded = false
+    super.destroyRecursively()
+  }
+
+  private buildErrorView(): void {
+    this.flexDirection = "column"
+
+    if (this.leftSide && this.leftSideAdded) {
+      super.remove(this.leftSide.id)
+      this.leftSideAdded = false
+    }
+    if (this.rightSide && this.rightSideAdded) {
+      super.remove(this.rightSide.id)
+      this.rightSideAdded = false
+    }
+
+    const errorMessage = `Error parsing diff: ${this._parseError?.message || "Unknown error"}\n`
+    if (!this.errorTextRenderable) {
+      this.errorTextRenderable = new TextRenderable(this.ctx, {
+        id: this.id ? `${this.id}-error-text` : undefined,
+        content: errorMessage,
+        fg: "#ef4444",
+        width: "100%",
+        flexShrink: 0,
+      })
+      super.add(this.errorTextRenderable)
+    } else {
+      this.errorTextRenderable.content = errorMessage
+      const errorTextIndex = this.getChildren().indexOf(this.errorTextRenderable)
+      if (errorTextIndex === -1) {
+        super.add(this.errorTextRenderable)
+      }
+    }
+
+    if (!this.errorCodeRenderable) {
+      this.errorCodeRenderable = new CodeRenderable(this.ctx, {
+        id: this.id ? `${this.id}-error-code` : undefined,
+        content: this._diff,
+        filetype: "diff",
+        syntaxStyle: this._syntaxStyle ?? SyntaxStyle.create(),
+        wrapMode: this._wrapMode,
+        conceal: this._conceal,
+        width: "100%",
+        flexGrow: 1,
+        flexShrink: 1,
+        ...(this._treeSitterClient !== undefined && { treeSitterClient: this._treeSitterClient }),
+      })
+      super.add(this.errorCodeRenderable)
+    } else {
+      this.errorCodeRenderable.content = this._diff
+      this.errorCodeRenderable.wrapMode = this._wrapMode ?? "none"
+      if (this._syntaxStyle) {
+        this.errorCodeRenderable.syntaxStyle = this._syntaxStyle
+      }
+      const errorCodeIndex = this.getChildren().indexOf(this.errorCodeRenderable)
+      if (errorCodeIndex === -1) {
+        super.add(this.errorCodeRenderable)
+      }
+    }
+  }
+
+  private createOrUpdateCodeRenderable(
+    side: "left" | "right",
+    content: string,
+    wrapMode: "word" | "char" | "none" | undefined,
+    drawUnstyledText?: boolean,
+  ): CodeRenderable {
+    const existingRenderable = side === "left" ? this.leftCodeRenderable : this.rightCodeRenderable
+
+    if (!existingRenderable) {
+      const codeOptions: CodeOptions = {
+        id: this.id ? `${this.id}-${side}-code` : undefined,
+        content,
+        filetype: this._filetype,
+        wrapMode,
+        conceal: this._conceal,
+        syntaxStyle: this._syntaxStyle ?? SyntaxStyle.create(),
+        width: "100%",
+        height: "100%",
+        ...(this._fg !== undefined && { fg: this._fg }),
+        ...(drawUnstyledText !== undefined && { drawUnstyledText }),
+        ...(this._selectionBg !== undefined && { selectionBg: this._selectionBg }),
+        ...(this._selectionFg !== undefined && { selectionFg: this._selectionFg }),
+        ...(this._treeSitterClient !== undefined && { treeSitterClient: this._treeSitterClient }),
+      }
+      const newRenderable = new CodeRenderable(this.ctx, codeOptions)
+
+      if (side === "left") {
+        this.leftCodeRenderable = newRenderable
+      } else {
+        this.rightCodeRenderable = newRenderable
+      }
+
+      return newRenderable
+    } else {
+      existingRenderable.content = content
+      existingRenderable.wrapMode = wrapMode ?? "none"
+      existingRenderable.conceal = this._conceal
+      if (drawUnstyledText !== undefined) {
+        existingRenderable.drawUnstyledText = drawUnstyledText
+      }
+      if (this._filetype !== undefined) {
+        existingRenderable.filetype = this._filetype
+      }
+      if (this._syntaxStyle !== undefined) {
+        existingRenderable.syntaxStyle = this._syntaxStyle
+      }
+      if (this._selectionBg !== undefined) {
+        existingRenderable.selectionBg = this._selectionBg
+      }
+      if (this._selectionFg !== undefined) {
+        existingRenderable.selectionFg = this._selectionFg
+      }
+      if (this._fg !== undefined) {
+        existingRenderable.fg = this._fg
+      }
+
+      return existingRenderable
+    }
+  }
+
+  private createOrUpdateSide(
+    side: "left" | "right",
+    target: CodeRenderable,
+    lineColors: Map<number, string | RGBA | LineColorConfig>,
+    lineSigns: Map<number, LineSign>,
+    lineNumbers: Map<number, number>,
+    hideLineNumbers: Set<number>,
+    width: "50%" | "100%",
+  ): void {
+    const sideRef = side === "left" ? this.leftSide : this.rightSide
+    const addedFlag = side === "left" ? this.leftSideAdded : this.rightSideAdded
+
+    if (!sideRef) {
+      const newSide = new LineNumberRenderable(this.ctx, {
+        id: this.id ? `${this.id}-${side}` : undefined,
+        target,
+        fg: this._lineNumberFg,
+        bg: this._lineNumberBg,
+        lineColors,
+        lineSigns,
+        lineNumbers,
+        lineNumberOffset: 0,
+        hideLineNumbers,
+        width,
+        height: "100%",
+      })
+      newSide.showLineNumbers = this._showLineNumbers
+      super.add(newSide)
+
+      if (side === "left") {
+        this.leftSide = newSide
+        this.leftSideAdded = true
+      } else {
+        this.rightSide = newSide
+        this.rightSideAdded = true
+      }
+    } else {
+      sideRef.width = width
+      sideRef.setLineColors(lineColors)
+      sideRef.setLineSigns(lineSigns)
+      sideRef.setLineNumbers(lineNumbers)
+      sideRef.setHideLineNumbers(hideLineNumbers)
+
+      if (!addedFlag) {
+        super.add(sideRef)
+        if (side === "left") {
+          this.leftSideAdded = true
+        } else {
+          this.rightSideAdded = true
+        }
+      }
+    }
+  }
+
+  private buildUnifiedView(): void {
+    if (!this._parsedDiff) return
+
+    this.flexDirection = "column"
+
+    if (this.errorTextRenderable) {
+      const errorTextIndex = this.getChildren().indexOf(this.errorTextRenderable)
+      if (errorTextIndex !== -1) {
+        super.remove(this.errorTextRenderable.id)
+      }
+    }
+    if (this.errorCodeRenderable) {
+      const errorCodeIndex = this.getChildren().indexOf(this.errorCodeRenderable)
+      if (errorCodeIndex !== -1) {
+        super.remove(this.errorCodeRenderable.id)
+      }
+    }
+
+    const contentLines: string[] = []
+    const lineColors = new Map<number, string | RGBA | LineColorConfig>()
+    const lineSigns = new Map<number, LineSign>()
+    const lineNumbers = new Map<number, number>()
+
+    let lineIndex = 0
+
+    for (const hunk of this._parsedDiff.hunks) {
+      let oldLineNum = hunk.oldStart
+      let newLineNum = hunk.newStart
+
+      for (const line of hunk.lines) {
+        const firstChar = line[0]
+        const content = line.slice(1)
+
+        if (firstChar === "+") {
+          contentLines.push(content)
+          const config: LineColorConfig = {
+            gutter: this._addedLineNumberBg,
+          }
+          if (this._addedContentBg) {
+            config.content = this._addedContentBg
+          } else {
+            config.content = this._addedBg
+          }
+          lineColors.set(lineIndex, config)
+          lineSigns.set(lineIndex, {
+            after: " +",
+            afterColor: this._addedSignColor,
+          })
+          lineNumbers.set(lineIndex, newLineNum)
+          newLineNum++
+          lineIndex++
+        } else if (firstChar === "-") {
+          contentLines.push(content)
+          const config: LineColorConfig = {
+            gutter: this._removedLineNumberBg,
+          }
+          if (this._removedContentBg) {
+            config.content = this._removedContentBg
+          } else {
+            config.content = this._removedBg
+          }
+          lineColors.set(lineIndex, config)
+          lineSigns.set(lineIndex, {
+            after: " -",
+            afterColor: this._removedSignColor,
+          })
+          lineNumbers.set(lineIndex, oldLineNum)
+          oldLineNum++
+          lineIndex++
+        } else if (firstChar === " ") {
+          contentLines.push(content)
+          const config: LineColorConfig = {
+            gutter: this._lineNumberBg,
+          }
+          if (this._contextContentBg) {
+            config.content = this._contextContentBg
+          } else {
+            config.content = this._contextBg
+          }
+          lineColors.set(lineIndex, config)
+          lineNumbers.set(lineIndex, newLineNum)
+          oldLineNum++
+          newLineNum++
+          lineIndex++
+        }
+      }
+    }
+
+    const content = contentLines.join("\n")
+
+    const codeRenderable = this.createOrUpdateCodeRenderable("left", content, this._wrapMode)
+
+    this.createOrUpdateSide("left", codeRenderable, lineColors, lineSigns, lineNumbers, new Set<number>(), "100%")
+
+    if (this.rightSide && this.rightSideAdded) {
+      super.remove(this.rightSide.id)
+      this.rightSideAdded = false
+    }
+  }
+
+  private buildSplitView(): void {
+    if (!this._parsedDiff) return
+
+    this.flexDirection = "row"
+
+    if (this.errorTextRenderable) {
+      const errorTextIndex = this.getChildren().indexOf(this.errorTextRenderable)
+      if (errorTextIndex !== -1) {
+        super.remove(this.errorTextRenderable.id)
+      }
+    }
+    if (this.errorCodeRenderable) {
+      const errorCodeIndex = this.getChildren().indexOf(this.errorCodeRenderable)
+      if (errorCodeIndex !== -1) {
+        super.remove(this.errorCodeRenderable.id)
+      }
+    }
+
+    const leftLogicalLines: LogicalLine[] = []
+    const rightLogicalLines: LogicalLine[] = []
+
+    for (const hunk of this._parsedDiff.hunks) {
+      let oldLineNum = hunk.oldStart
+      let newLineNum = hunk.newStart
+
+      let i = 0
+      while (i < hunk.lines.length) {
+        const line = hunk.lines[i]
+        const firstChar = line[0]
+
+        if (firstChar === " ") {
+          const content = line.slice(1)
+          leftLogicalLines.push({
+            content,
+            lineNum: oldLineNum,
+            color: this._contextBg,
+            type: "context",
+          })
+          rightLogicalLines.push({
+            content,
+            lineNum: newLineNum,
+            color: this._contextBg,
+            type: "context",
+          })
+          oldLineNum++
+          newLineNum++
+          i++
+        } else if (firstChar === "\\") {
+          i++
+        } else {
+          const removes: { content: string; lineNum: number }[] = []
+          const adds: { content: string; lineNum: number }[] = []
+
+          while (i < hunk.lines.length) {
+            const currentLine = hunk.lines[i]
+            const currentChar = currentLine[0]
+
+            if (currentChar === " " || currentChar === "\\") {
+              break
+            }
+
+            const content = currentLine.slice(1)
+
+            if (currentChar === "-") {
+              removes.push({ content, lineNum: oldLineNum })
+              oldLineNum++
+            } else if (currentChar === "+") {
+              adds.push({ content, lineNum: newLineNum })
+              newLineNum++
+            }
+            i++
+          }
+
+          const maxLength = Math.max(removes.length, adds.length)
+
+          for (let j = 0; j < maxLength; j++) {
+            if (j < removes.length) {
+              leftLogicalLines.push({
+                content: removes[j].content,
+                lineNum: removes[j].lineNum,
+                color: this._removedBg,
+                sign: {
+                  after: " -",
+                  afterColor: this._removedSignColor,
+                },
+                type: "remove",
+              })
+            } else {
+              leftLogicalLines.push({
+                content: "",
+                hideLineNumber: true,
+                type: "empty",
+              })
+            }
+
+            if (j < adds.length) {
+              rightLogicalLines.push({
+                content: adds[j].content,
+                lineNum: adds[j].lineNum,
+                color: this._addedBg,
+                sign: {
+                  after: " +",
+                  afterColor: this._addedSignColor,
+                },
+                type: "add",
+              })
+            } else {
+              rightLogicalLines.push({
+                content: "",
+                hideLineNumber: true,
+                type: "empty",
+              })
+            }
+          }
+        }
+      }
+    }
+
+    const canDoWrapAlignment = this.width > 0 && (this._wrapMode === "word" || this._wrapMode === "char")
+
+    const preLeftContent = leftLogicalLines.map((l) => l.content).join("\n")
+    const preRightContent = rightLogicalLines.map((l) => l.content).join("\n")
+
+    const needsConsistentConcealing =
+      (this._wrapMode === "word" || this._wrapMode === "char") && this._conceal && this._filetype
+    const drawUnstyledText = !needsConsistentConcealing
+    const leftCodeRenderable = this.createOrUpdateCodeRenderable(
+      "left",
+      preLeftContent,
+      this._wrapMode,
+      drawUnstyledText,
+    )
+    const rightCodeRenderable = this.createOrUpdateCodeRenderable(
+      "right",
+      preRightContent,
+      this._wrapMode,
+      drawUnstyledText,
+    )
+
+    let finalLeftLines: LogicalLine[]
+    let finalRightLines: LogicalLine[]
+
+    const leftIsHighlighting = leftCodeRenderable.isHighlighting
+    const rightIsHighlighting = rightCodeRenderable.isHighlighting
+    const highlightingInProgress = needsConsistentConcealing && (leftIsHighlighting || rightIsHighlighting)
+
+    if (highlightingInProgress) {
+      this._waitingForHighlight = true
+      this.attachLineInfoListeners()
+    }
+
+    const shouldDoAlignment = canDoWrapAlignment && !highlightingInProgress
+
+    if (shouldDoAlignment) {
+      const leftLineInfo = leftCodeRenderable.lineInfo
+      const rightLineInfo = rightCodeRenderable.lineInfo
+
+      const leftSources = leftLineInfo.lineSources || []
+      const rightSources = rightLineInfo.lineSources || []
+
+      const leftVisualCounts = new Map<number, number>()
+      const rightVisualCounts = new Map<number, number>()
+
+      for (const logicalLine of leftSources) {
+        leftVisualCounts.set(logicalLine, (leftVisualCounts.get(logicalLine) || 0) + 1)
+      }
+      for (const logicalLine of rightSources) {
+        rightVisualCounts.set(logicalLine, (rightVisualCounts.get(logicalLine) || 0) + 1)
+      }
+
+      finalLeftLines = []
+      finalRightLines = []
+
+      let leftVisualPos = 0
+      let rightVisualPos = 0
+
+      for (let i = 0; i < leftLogicalLines.length; i++) {
+        const leftLine = leftLogicalLines[i]
+        const rightLine = rightLogicalLines[i]
+
+        const leftVisualCount = leftVisualCounts.get(i) || 1
+        const rightVisualCount = rightVisualCounts.get(i) || 1
+
+        if (leftVisualPos < rightVisualPos) {
+          const pad = rightVisualPos - leftVisualPos
+          for (let p = 0; p < pad; p++) {
+            finalLeftLines.push({ content: "", hideLineNumber: true, type: "empty" })
+          }
+          leftVisualPos += pad
+        } else if (rightVisualPos < leftVisualPos) {
+          const pad = leftVisualPos - rightVisualPos
+          for (let p = 0; p < pad; p++) {
+            finalRightLines.push({ content: "", hideLineNumber: true, type: "empty" })
+          }
+          rightVisualPos += pad
+        }
+
+        finalLeftLines.push(leftLine)
+        finalRightLines.push(rightLine)
+
+        leftVisualPos += leftVisualCount
+        rightVisualPos += rightVisualCount
+      }
+
+      if (leftVisualPos < rightVisualPos) {
+        const pad = rightVisualPos - leftVisualPos
+        for (let p = 0; p < pad; p++) {
+          finalLeftLines.push({ content: "", hideLineNumber: true, type: "empty" })
+        }
+      } else if (rightVisualPos < leftVisualPos) {
+        const pad = leftVisualPos - rightVisualPos
+        for (let p = 0; p < pad; p++) {
+          finalRightLines.push({ content: "", hideLineNumber: true, type: "empty" })
+        }
+      }
+    } else {
+      finalLeftLines = leftLogicalLines
+      finalRightLines = rightLogicalLines
+    }
+
+    const leftLineColors = new Map<number, string | RGBA | LineColorConfig>()
+    const rightLineColors = new Map<number, string | RGBA | LineColorConfig>()
+    const leftLineSigns = new Map<number, LineSign>()
+    const rightLineSigns = new Map<number, LineSign>()
+    const leftHideLineNumbers = new Set<number>()
+    const rightHideLineNumbers = new Set<number>()
+    const leftLineNumbers = new Map<number, number>()
+    const rightLineNumbers = new Map<number, number>()
+
+    finalLeftLines.forEach((line, index) => {
+      if (line.lineNum !== undefined) {
+        leftLineNumbers.set(index, line.lineNum)
+      }
+      if (line.hideLineNumber) {
+        leftHideLineNumbers.add(index)
+      }
+      if (line.type === "remove") {
+        const config: LineColorConfig = {
+          gutter: this._removedLineNumberBg,
+        }
+        if (this._removedContentBg) {
+          config.content = this._removedContentBg
+        } else {
+          config.content = this._removedBg
+        }
+        leftLineColors.set(index, config)
+      } else if (line.type === "context") {
+        const config: LineColorConfig = {
+          gutter: this._lineNumberBg,
+        }
+        if (this._contextContentBg) {
+          config.content = this._contextContentBg
+        } else {
+          config.content = this._contextBg
+        }
+        leftLineColors.set(index, config)
+      }
+      if (line.sign) {
+        leftLineSigns.set(index, line.sign)
+      }
+    })
+
+    finalRightLines.forEach((line, index) => {
+      if (line.lineNum !== undefined) {
+        rightLineNumbers.set(index, line.lineNum)
+      }
+      if (line.hideLineNumber) {
+        rightHideLineNumbers.add(index)
+      }
+      if (line.type === "add") {
+        const config: LineColorConfig = {
+          gutter: this._addedLineNumberBg,
+        }
+        if (this._addedContentBg) {
+          config.content = this._addedContentBg
+        } else {
+          config.content = this._addedBg
+        }
+        rightLineColors.set(index, config)
+      } else if (line.type === "context") {
+        const config: LineColorConfig = {
+          gutter: this._lineNumberBg,
+        }
+        if (this._contextContentBg) {
+          config.content = this._contextContentBg
+        } else {
+          config.content = this._contextBg
+        }
+        rightLineColors.set(index, config)
+      }
+      if (line.sign) {
+        rightLineSigns.set(index, line.sign)
+      }
+    })
+
+    const leftContentFinal = finalLeftLines.map((l) => l.content).join("\n")
+    const rightContentFinal = finalRightLines.map((l) => l.content).join("\n")
+
+    leftCodeRenderable.content = leftContentFinal
+    rightCodeRenderable.content = rightContentFinal
+
+    this.createOrUpdateSide(
+      "left",
+      leftCodeRenderable,
+      leftLineColors,
+      leftLineSigns,
+      leftLineNumbers,
+      leftHideLineNumbers,
+      "50%",
+    )
+    this.createOrUpdateSide(
+      "right",
+      rightCodeRenderable,
+      rightLineColors,
+      rightLineSigns,
+      rightLineNumbers,
+      rightHideLineNumbers,
+      "50%",
+    )
+  }
+
+  public get diff(): string {
+    return this._diff
+  }
+
+  public set diff(value: string) {
+    if (this._diff !== value) {
+      this._diff = value
+      this._waitingForHighlight = false
+      this.parseDiff()
+      this.rebuildView()
+    }
+  }
+
+  public get syncScroll(): boolean {
+    return this._syncScroll
+  }
+
+  public set syncScroll(value: boolean) {
+    if (this._syncScroll !== value) {
+      this._syncScroll = value
+      if (!value) {
+        this.detachLineInfoListeners()
+      }
+    }
+  }
+
+  public get view(): "unified" | "split" {
+    return this._view
+  }
+
+  public set view(value: "unified" | "split") {
+    if (this._view !== value) {
+      this._view = value
+      this.flexDirection = value === "split" ? "row" : "column"
+      this.buildView()
+    }
+  }
+
+  public get filetype(): string | undefined {
+    return this._filetype
+  }
+
+  public set filetype(value: string | undefined) {
+    if (this._filetype !== value) {
+      this._filetype = value
+      this.rebuildView()
+    }
+  }
+
+  public get syntaxStyle(): SyntaxStyle | undefined {
+    return this._syntaxStyle
+  }
+
+  public set syntaxStyle(value: SyntaxStyle | undefined) {
+    if (this._syntaxStyle !== value) {
+      this._syntaxStyle = value
+      this.rebuildView()
+    }
+  }
+
+  public get wrapMode(): "word" | "char" | "none" | undefined {
+    return this._wrapMode
+  }
+
+  public set wrapMode(value: "word" | "char" | "none" | undefined) {
+    if (this._wrapMode !== value) {
+      this._wrapMode = value
+
+      if (this._view === "unified" && this.leftCodeRenderable) {
+        this.leftCodeRenderable.wrapMode = value ?? "none"
+      } else if (this._view === "split") {
+        this.requestRebuild()
+      }
+    }
+  }
+
+  public get showLineNumbers(): boolean {
+    return this._showLineNumbers
+  }
+
+  public set showLineNumbers(value: boolean) {
+    if (this._showLineNumbers !== value) {
+      this._showLineNumbers = value
+      if (this.leftSide) {
+        this.leftSide.showLineNumbers = value
+      }
+      if (this.rightSide) {
+        this.rightSide.showLineNumbers = value
+      }
+    }
+  }
+
+  public get addedBg(): RGBA {
+    return this._addedBg
+  }
+
+  public set addedBg(value: string | RGBA) {
+    const parsed = parseColor(value)
+    if (this._addedBg !== parsed) {
+      this._addedBg = parsed
+      this.rebuildView()
+    }
+  }
+
+  public get removedBg(): RGBA {
+    return this._removedBg
+  }
+
+  public set removedBg(value: string | RGBA) {
+    const parsed = parseColor(value)
+    if (this._removedBg !== parsed) {
+      this._removedBg = parsed
+      this.rebuildView()
+    }
+  }
+
+  public get contextBg(): RGBA {
+    return this._contextBg
+  }
+
+  public set contextBg(value: string | RGBA) {
+    const parsed = parseColor(value)
+    if (this._contextBg !== parsed) {
+      this._contextBg = parsed
+      this.rebuildView()
+    }
+  }
+
+  public get addedSignColor(): RGBA {
+    return this._addedSignColor
+  }
+
+  public set addedSignColor(value: string | RGBA) {
+    const parsed = parseColor(value)
+    if (this._addedSignColor !== parsed) {
+      this._addedSignColor = parsed
+      this.rebuildView()
+    }
+  }
+
+  public get removedSignColor(): RGBA {
+    return this._removedSignColor
+  }
+
+  public set removedSignColor(value: string | RGBA) {
+    const parsed = parseColor(value)
+    if (this._removedSignColor !== parsed) {
+      this._removedSignColor = parsed
+      this.rebuildView()
+    }
+  }
+
+  public get addedLineNumberBg(): RGBA {
+    return this._addedLineNumberBg
+  }
+
+  public set addedLineNumberBg(value: string | RGBA) {
+    const parsed = parseColor(value)
+    if (this._addedLineNumberBg !== parsed) {
+      this._addedLineNumberBg = parsed
+      this.rebuildView()
+    }
+  }
+
+  public get removedLineNumberBg(): RGBA {
+    return this._removedLineNumberBg
+  }
+
+  public set removedLineNumberBg(value: string | RGBA) {
+    const parsed = parseColor(value)
+    if (this._removedLineNumberBg !== parsed) {
+      this._removedLineNumberBg = parsed
+      this.rebuildView()
+    }
+  }
+
+  public get lineNumberFg(): RGBA {
+    return this._lineNumberFg
+  }
+
+  public set lineNumberFg(value: string | RGBA) {
+    const parsed = parseColor(value)
+    if (this._lineNumberFg !== parsed) {
+      this._lineNumberFg = parsed
+      this.rebuildView()
+    }
+  }
+
+  public get lineNumberBg(): RGBA {
+    return this._lineNumberBg
+  }
+
+  public set lineNumberBg(value: string | RGBA) {
+    const parsed = parseColor(value)
+    if (this._lineNumberBg !== parsed) {
+      this._lineNumberBg = parsed
+      this.rebuildView()
+    }
+  }
+
+  public get addedContentBg(): RGBA | null {
+    return this._addedContentBg
+  }
+
+  public set addedContentBg(value: string | RGBA | null) {
+    const parsed = value ? parseColor(value) : null
+    if (this._addedContentBg !== parsed) {
+      this._addedContentBg = parsed
+      this.rebuildView()
+    }
+  }
+
+  public get removedContentBg(): RGBA | null {
+    return this._removedContentBg
+  }
+
+  public set removedContentBg(value: string | RGBA | null) {
+    const parsed = value ? parseColor(value) : null
+    if (this._removedContentBg !== parsed) {
+      this._removedContentBg = parsed
+      this.rebuildView()
+    }
+  }
+
+  public get contextContentBg(): RGBA | null {
+    return this._contextContentBg
+  }
+
+  public set contextContentBg(value: string | RGBA | null) {
+    const parsed = value ? parseColor(value) : null
+    if (this._contextContentBg !== parsed) {
+      this._contextContentBg = parsed
+      this.rebuildView()
+    }
+  }
+
+  public get selectionBg(): RGBA | undefined {
+    return this._selectionBg
+  }
+
+  public set selectionBg(value: string | RGBA | undefined) {
+    const parsed = value ? parseColor(value) : undefined
+    if (this._selectionBg !== parsed) {
+      this._selectionBg = parsed
+      if (this.leftCodeRenderable) {
+        this.leftCodeRenderable.selectionBg = parsed
+      }
+      if (this.rightCodeRenderable) {
+        this.rightCodeRenderable.selectionBg = parsed
+      }
+    }
+  }
+
+  public get selectionFg(): RGBA | undefined {
+    return this._selectionFg
+  }
+
+  public set selectionFg(value: string | RGBA | undefined) {
+    const parsed = value ? parseColor(value) : undefined
+    if (this._selectionFg !== parsed) {
+      this._selectionFg = parsed
+      if (this.leftCodeRenderable) {
+        this.leftCodeRenderable.selectionFg = parsed
+      }
+      if (this.rightCodeRenderable) {
+        this.rightCodeRenderable.selectionFg = parsed
+      }
+    }
+  }
+
+  public get conceal(): boolean {
+    return this._conceal
+  }
+
+  public set conceal(value: boolean) {
+    if (this._conceal !== value) {
+      this._conceal = value
+      this.rebuildView()
+    }
+  }
+
+  public get fg(): RGBA | undefined {
+    return this._fg
+  }
+
+  public set fg(value: string | RGBA | undefined) {
+    const parsed = value ? parseColor(value) : undefined
+    if (this._fg !== parsed) {
+      this._fg = parsed
+      if (this.leftCodeRenderable) {
+        this.leftCodeRenderable.fg = parsed
+      }
+      if (this.rightCodeRenderable) {
+        this.rightCodeRenderable.fg = parsed
+      }
+    }
+  }
+
+  public setLineColor(line: number, color: string | RGBA | LineColorConfig): void {
+    this.leftSide?.setLineColor(line, color)
+    this.rightSide?.setLineColor(line, color)
+  }
+
+  public clearLineColor(line: number): void {
+    this.leftSide?.clearLineColor(line)
+    this.rightSide?.clearLineColor(line)
+  }
+
+  public setLineColors(lineColors: Map<number, string | RGBA | LineColorConfig>): void {
+    this.leftSide?.setLineColors(lineColors)
+    this.rightSide?.setLineColors(lineColors)
+  }
+
+  public clearAllLineColors(): void {
+    this.leftSide?.clearAllLineColors()
+    this.rightSide?.clearAllLineColors()
+  }
+
+  public highlightLines(startLine: number, endLine: number, color: string | RGBA | LineColorConfig): void {
+    this.leftSide?.highlightLines(startLine, endLine, color)
+    this.rightSide?.highlightLines(startLine, endLine, color)
+  }
+
+  public clearHighlightLines(startLine: number, endLine: number): void {
+    this.leftSide?.clearHighlightLines(startLine, endLine)
+    this.rightSide?.clearHighlightLines(startLine, endLine)
+  }
+}