@opentui/core 0.0.0-20251128-0889a764 → 0.0.0-20251201-fe4cc80e

package/index.js

@@ -74,7 +74,7 @@ import {
   dim,
   env,
   envRegistry,
-  exports_src,
+  exports_dist,
   extToFiletype,
   fg,
   fonts,
@@ -137,7 +137,7 @@ import {
   white,
   wrapWithDelegates,
   yellow
-} from "./index-rhx7c7kj.js";
+} from "./index-533e9nca.js";
 // src/text-buffer-view.ts
 class TextBufferView {
   lib;
@@ -198,6 +198,10 @@ class TextBufferView {
     this.guard();
     this.lib.textBufferViewSetViewportSize(this.viewPtr, width, height);
   }
+  setViewport(x, y, width, height) {
+    this.guard();
+    this.lib.textBufferViewSetViewport(this.viewPtr, x, y, width, height);
+  }
   get lineInfo() {
     this.guard();
     return this.lib.textBufferViewGetLineInfo(this.viewPtr);
@@ -239,6 +243,10 @@ class TextBufferView {
     this.guard();
     return this.lib.textBufferViewMeasureForDimensions(this.viewPtr, width, height);
   }
+  getVirtualLineCount() {
+    this.guard();
+    return this.lib.textBufferViewGetVirtualLineCount(this.viewPtr);
+  }
   destroy() {
     if (this._destroyed)
       return;
@@ -2420,6 +2428,8 @@ class TextBufferRenderable extends Renderable {
   lastLocalSelection = null;
   _tabIndicator;
   _tabIndicatorColor;
+  _scrollX = 0;
+  _scrollY = 0;
   textBuffer;
   textBufferView;
   _defaultOptions = {
@@ -2462,16 +2472,82 @@ class TextBufferRenderable extends Renderable {
     if (this._wrapMode !== "none" && this.width > 0) {
       this.textBufferView.setWrapWidth(this.width);
     }
+    if (this.width > 0 && this.height > 0) {
+      this.textBufferView.setViewport(this._scrollX, this._scrollY, this.width, this.height);
+    }
     this.updateTextInfo();
   }
+  onMouseEvent(event) {
+    if (event.type === "scroll") {
+      this.handleScroll(event);
+    }
+  }
+  handleScroll(event) {
+    if (!event.scroll)
+      return;
+    const { direction, delta } = event.scroll;
+    if (direction === "up") {
+      this.scrollY -= delta;
+    } else if (direction === "down") {
+      this.scrollY += delta;
+    }
+    if (this._wrapMode === "none") {
+      if (direction === "left") {
+        this.scrollX -= delta;
+      } else if (direction === "right") {
+        this.scrollX += delta;
+      }
+    }
+  }
   get lineInfo() {
     return this.textBufferView.logicalLineInfo;
   }
   get lineCount() {
     return this.textBuffer.getLineCount();
   }
+  get virtualLineCount() {
+    return this.textBufferView.getVirtualLineCount();
+  }
   get scrollY() {
-    return 0;
+    return this._scrollY;
+  }
+  set scrollY(value) {
+    const maxScrollY = Math.max(0, this.scrollHeight - this.height);
+    const clamped = Math.max(0, Math.min(value, maxScrollY));
+    if (this._scrollY !== clamped) {
+      this._scrollY = clamped;
+      this.updateViewportOffset();
+      this.requestRender();
+    }
+  }
+  get scrollX() {
+    return this._scrollX;
+  }
+  set scrollX(value) {
+    const maxScrollX = Math.max(0, this.scrollWidth - this.width);
+    const clamped = Math.max(0, Math.min(value, maxScrollX));
+    if (this._scrollX !== clamped) {
+      this._scrollX = clamped;
+      this.updateViewportOffset();
+      this.requestRender();
+    }
+  }
+  get scrollWidth() {
+    return this.lineInfo.maxLineWidth;
+  }
+  get scrollHeight() {
+    return this.lineInfo.lineStarts.length;
+  }
+  get maxScrollY() {
+    return Math.max(0, this.scrollHeight - this.height);
+  }
+  get maxScrollX() {
+    return Math.max(0, this.scrollWidth - this.width);
+  }
+  updateViewportOffset() {
+    if (this.width > 0 && this.height > 0) {
+      this.textBufferView.setViewport(this._scrollX, this._scrollY, this.width, this.height);
+    }
   }
   get plainText() {
     return this.textBuffer.getPlainText();
@@ -2580,7 +2656,8 @@ class TextBufferRenderable extends Renderable {
     }
   }
   onResize(width, height) {
-    this.textBufferView.setViewportSize(width, height);
+    this.textBufferView.setViewport(this._scrollX, this._scrollY, width, height);
+    this.updateTextInfo();
     if (this.lastLocalSelection) {
       const changed = this.updateLocalSelection(this.lastLocalSelection);
       if (changed) {
@@ -3249,12 +3326,12 @@ class GutterRenderable extends Renderable {
     this._lineNumberOffset = options.lineNumberOffset;
     this._hideLineNumbers = options.hideLineNumbers;
     this._lineNumbers = options.lineNumbers ?? new Map;
-    this._lastKnownLineCount = this.target.lineCount;
+    this._lastKnownLineCount = this.target.virtualLineCount;
     this._lastKnownScrollY = this.target.scrollY;
     this.calculateSignWidths();
     this.setupMeasureFunc();
     this.onLifecyclePass = () => {
-      const currentLineCount = this.target.lineCount;
+      const currentLineCount = this.target.virtualLineCount;
       if (currentLineCount !== this._lastKnownLineCount) {
         this._lastKnownLineCount = currentLineCount;
         this.yogaNode.markDirty();
@@ -3265,7 +3342,7 @@ class GutterRenderable extends Renderable {
   setupMeasureFunc() {
     const measureFunc = (width, widthMode, height, heightMode) => {
       const gutterWidth = this.calculateWidth();
-      const gutterHeight = this.target.lineCount;
+      const gutterHeight = this.target.virtualLineCount;
       return {
         width: gutterWidth,
         height: gutterHeight
@@ -3276,6 +3353,23 @@ class GutterRenderable extends Renderable {
   remeasure() {
     this.yogaNode.markDirty();
   }
+  setLineNumberOffset(offset) {
+    if (this._lineNumberOffset !== offset) {
+      this._lineNumberOffset = offset;
+      this.yogaNode.markDirty();
+      this.requestRender();
+    }
+  }
+  setHideLineNumbers(hideLineNumbers) {
+    this._hideLineNumbers = hideLineNumbers;
+    this.yogaNode.markDirty();
+    this.requestRender();
+  }
+  setLineNumbers(lineNumbers) {
+    this._lineNumbers = lineNumbers;
+    this.yogaNode.markDirty();
+    this.requestRender();
+  }
   calculateSignWidths() {
     this._maxBeforeWidth = 0;
     this._maxAfterWidth = 0;
@@ -3291,7 +3385,7 @@ class GutterRenderable extends Renderable {
     }
   }
   calculateWidth() {
-    const totalLines = this.target.lineCount;
+    const totalLines = this.target.virtualLineCount;
     let maxLineNumber = totalLines + this._lineNumberOffset;
     if (this._lineNumbers.size > 0) {
       for (const customLineNum of this._lineNumbers.values()) {
@@ -3495,7 +3589,7 @@ class LineNumberRenderable extends Renderable {
     super.add(this.target);
   }
   add(child) {
-    if (!this.target && "lineInfo" in child && "lineCount" in child && "scrollY" in child) {
+    if (!this.target && "lineInfo" in child && "lineCount" in child && "virtualLineCount" in child && "scrollY" in child) {
       this.setTarget(child);
       return this.getChildrenCount() - 1;
     }
@@ -3634,13 +3728,8 @@ class LineNumberRenderable extends Renderable {
   set lineNumberOffset(value) {
     if (this._lineNumberOffset !== value) {
       this._lineNumberOffset = value;
-      if (this.gutter && this.target) {
-        const target = this.target;
-        super.remove(this.gutter.id);
-        super.remove(this.target.id);
-        this.gutter = null;
-        this.target = null;
-        this.setTarget(target);
+      if (this.gutter) {
+        this.gutter.setLineNumberOffset(value);
       }
     }
   }
@@ -3649,13 +3738,8 @@ class LineNumberRenderable extends Renderable {
   }
   setHideLineNumbers(hideLineNumbers) {
     this._hideLineNumbers = hideLineNumbers;
-    if (this.gutter && this.target) {
-      const target = this.target;
-      super.remove(this.gutter.id);
-      super.remove(this.target.id);
-      this.gutter = null;
-      this.target = null;
-      this.setTarget(target);
+    if (this.gutter) {
+      this.gutter.setHideLineNumbers(hideLineNumbers);
     }
   }
   getHideLineNumbers() {
@@ -3663,13 +3747,8 @@ class LineNumberRenderable extends Renderable {
   }
   setLineNumbers(lineNumbers) {
     this._lineNumbers = lineNumbers;
-    if (this.gutter && this.target) {
-      const target = this.target;
-      super.remove(this.gutter.id);
-      super.remove(this.target.id);
-      this.gutter = null;
-      this.target = null;
-      this.setTarget(target);
+    if (this.gutter) {
+      this.gutter.setLineNumbers(lineNumbers);
     }
   }
   getLineNumbers() {
@@ -4392,22 +4471,128 @@ function parsePatch(uniDiff) {
   return list;
 }
 
+// src/renderables/Text.ts
+class TextRenderable extends TextBufferRenderable {
+  _text;
+  _hasManualStyledText = false;
+  rootTextNode;
+  _contentDefaultOptions = {
+    content: ""
+  };
+  constructor(ctx, options) {
+    super(ctx, options);
+    const content = options.content ?? this._contentDefaultOptions.content;
+    const styledText = typeof content === "string" ? stringToStyledText(content) : content;
+    this._text = styledText;
+    this._hasManualStyledText = options.content !== undefined && content !== "";
+    this.rootTextNode = new RootTextNodeRenderable(ctx, {
+      id: `${this.id}-root`,
+      fg: this._defaultFg,
+      bg: this._defaultBg,
+      attributes: this._defaultAttributes
+    }, this);
+    this.updateTextBuffer(styledText);
+  }
+  updateTextBuffer(styledText) {
+    this.textBuffer.setStyledText(styledText);
+    this.clearChunks(styledText);
+  }
+  clearChunks(styledText) {}
+  get content() {
+    return this._text;
+  }
+  get chunks() {
+    return this._text.chunks;
+  }
+  get textNode() {
+    return this.rootTextNode;
+  }
+  set content(value) {
+    this._hasManualStyledText = true;
+    const styledText = typeof value === "string" ? stringToStyledText(value) : value;
+    if (this._text !== styledText) {
+      this._text = styledText;
+      this.updateTextBuffer(styledText);
+      this.updateTextInfo();
+    }
+  }
+  updateTextFromNodes() {
+    if (this.rootTextNode.isDirty && !this._hasManualStyledText) {
+      const chunks = this.rootTextNode.gatherWithInheritedStyle({
+        fg: this._defaultFg,
+        bg: this._defaultBg,
+        attributes: this._defaultAttributes
+      });
+      this.textBuffer.setStyledText(new StyledText(chunks));
+      this.refreshLocalSelection();
+      this.yogaNode.markDirty();
+    }
+  }
+  add(obj, index) {
+    return this.rootTextNode.add(obj, index);
+  }
+  remove(id) {
+    this.rootTextNode.remove(id);
+  }
+  insertBefore(obj, anchor) {
+    this.rootTextNode.insertBefore(obj, anchor);
+    return this.rootTextNode.children.indexOf(obj);
+  }
+  getTextChildren() {
+    return this.rootTextNode.getChildren();
+  }
+  clear() {
+    this.rootTextNode.clear();
+    const emptyStyledText = stringToStyledText("");
+    this._text = emptyStyledText;
+    this.updateTextBuffer(emptyStyledText);
+    this.updateTextInfo();
+    this.requestRender();
+  }
+  onLifecyclePass = () => {
+    this.updateTextFromNodes();
+  };
+  onFgChanged(newColor) {
+    this.rootTextNode.fg = newColor;
+  }
+  onBgChanged(newColor) {
+    this.rootTextNode.bg = newColor;
+  }
+  onAttributesChanged(newAttributes) {
+    this.rootTextNode.attributes = newAttributes;
+  }
+  destroy() {
+    this.rootTextNode.children.length = 0;
+    super.destroy();
+  }
+}
+
 // src/renderables/Diff.ts
 class DiffRenderable extends Renderable {
   _diff;
   _view;
   _parsedDiff = null;
+  _parseError = null;
   _filetype;
   _syntaxStyle;
   _wrapMode;
   _conceal;
+  _selectionBg;
+  _selectionFg;
+  _treeSitterClient;
   _showLineNumbers;
   _lineNumberFg;
   _lineNumberBg;
   _addedBg;
   _removedBg;
+  _contextBg;
+  _addedContentBg;
+  _removedContentBg;
+  _contextContentBg;
   _addedSignColor;
   _removedSignColor;
+  _addedLineNumberBg;
+  _removedLineNumberBg;
   leftSide = null;
   rightSide = null;
   leftSideAdded = false;
@@ -4415,6 +4600,9 @@ class DiffRenderable extends Renderable {
   leftCodeRenderable = null;
   rightCodeRenderable = null;
   pendingRebuild = false;
+  _lastWidth = 0;
+  errorTextRenderable = null;
+  errorCodeRenderable = null;
   constructor(ctx, options) {
     super(ctx, {
       ...options,
@@ -4425,14 +4613,23 @@ class DiffRenderable extends Renderable {
     this._filetype = options.filetype;
     this._syntaxStyle = options.syntaxStyle;
     this._wrapMode = options.wrapMode;
-    this._conceal = options.conceal ?? true;
+    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;
     this._showLineNumbers = options.showLineNumbers ?? true;
     this._lineNumberFg = parseColor(options.lineNumberFg ?? "#888888");
     this._lineNumberBg = parseColor(options.lineNumberBg ?? "transparent");
     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();
@@ -4441,16 +4638,28 @@ class DiffRenderable extends Renderable {
   parseDiff() {
     if (!this._diff) {
       this._parsedDiff = null;
+      this._parseError = null;
       return;
     }
-    const patches = parsePatch(this._diff);
-    if (patches.length === 0) {
+    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;
-      return;
+      this._parseError = error instanceof Error ? error : new Error(String(error));
     }
-    this._parsedDiff = patches[0];
   }
   buildView() {
+    if (this._parseError) {
+      this.buildErrorView();
+      return;
+    }
     if (!this._parsedDiff || this._parsedDiff.hunks.length === 0) {
       return;
     }
@@ -4463,7 +4672,10 @@ class DiffRenderable extends Renderable {
   onResize(width, height) {
     super.onResize(width, height);
     if (this._view === "split" && this._wrapMode !== "none" && this._wrapMode !== undefined) {
-      this.requestRebuild();
+      if (this._lastWidth !== width) {
+        this._lastWidth = width;
+        this.requestRebuild();
+      }
     }
   }
   requestRebuild() {
@@ -4479,15 +4691,177 @@ class DiffRenderable extends Renderable {
       }
     });
   }
+  rebuildView() {
+    if (this._view === "split") {
+      this.requestRebuild();
+    } else {
+      this.buildView();
+    }
+  }
   destroyRecursively() {
     this.pendingRebuild = false;
     this.leftSideAdded = false;
     this.rightSideAdded = false;
     super.destroyRecursively();
   }
+  buildErrorView() {
+    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"}
+`;
+    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);
+      }
+    }
+  }
+  createOrUpdateCodeRenderable(side, content, wrapMode, drawUnstyledText) {
+    const existingRenderable = side === "left" ? this.leftCodeRenderable : this.rightCodeRenderable;
+    if (!existingRenderable) {
+      const 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%",
+        ...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;
+      }
+      return existingRenderable;
+    }
+  }
+  createOrUpdateSide(side, target, lineColors, lineSigns, lineNumbers, hideLineNumbers, width) {
+    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;
+        }
+      }
+    }
+  }
   buildUnifiedView() {
     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 = [];
     const lineColors = new Map;
     const lineSigns = new Map;
@@ -4501,7 +4875,15 @@ class DiffRenderable extends Renderable {
         const content2 = line.slice(1);
         if (firstChar === "+") {
           contentLines.push(content2);
-          lineColors.set(lineIndex, this._addedBg);
+          const config = {
+            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
@@ -4511,7 +4893,15 @@ class DiffRenderable extends Renderable {
           lineIndex++;
         } else if (firstChar === "-") {
           contentLines.push(content2);
-          lineColors.set(lineIndex, this._removedBg);
+          const config = {
+            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
@@ -4521,6 +4911,15 @@ class DiffRenderable extends Renderable {
           lineIndex++;
         } else if (firstChar === " ") {
           contentLines.push(content2);
+          const config = {
+            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++;
@@ -4530,58 +4929,8 @@ class DiffRenderable extends Renderable {
     }
     const content = contentLines.join(`
 `);
-    if (!this.leftCodeRenderable) {
-      const codeOptions = {
-        id: this.id ? `${this.id}-left-code` : undefined,
-        content,
-        filetype: this._filetype,
-        wrapMode: this._wrapMode,
-        conceal: this._conceal,
-        width: "100%",
-        height: "100%"
-      };
-      if (this._syntaxStyle) {
-        codeOptions.syntaxStyle = this._syntaxStyle;
-      }
-      this.leftCodeRenderable = new CodeRenderable(this.ctx, codeOptions);
-    } else {
-      this.leftCodeRenderable.content = content;
-      if (this._filetype !== undefined) {
-        this.leftCodeRenderable.filetype = this._filetype;
-      }
-      if (this._syntaxStyle !== undefined) {
-        this.leftCodeRenderable.syntaxStyle = this._syntaxStyle;
-      }
-      this.leftCodeRenderable.wrapMode = this._wrapMode ?? "none";
-    }
-    if (!this.leftSide) {
-      this.leftSide = new LineNumberRenderable(this.ctx, {
-        id: this.id ? `${this.id}-left` : undefined,
-        target: this.leftCodeRenderable,
-        fg: this._lineNumberFg,
-        bg: this._lineNumberBg,
-        lineColors,
-        lineSigns,
-        lineNumbers,
-        lineNumberOffset: 0,
-        hideLineNumbers: new Set,
-        width: "100%",
-        height: "100%"
-      });
-      this.leftSide.showLineNumbers = this._showLineNumbers;
-      super.add(this.leftSide);
-      this.leftSideAdded = true;
-    } else {
-      this.leftSide.setLineColors(lineColors);
-      this.leftSide.setLineSigns(lineSigns);
-      this.leftSide.setLineNumbers(lineNumbers);
-      this.leftSide.setHideLineNumbers(new Set);
-      this.leftSide.width = "100%";
-      if (!this.leftSideAdded) {
-        super.add(this.leftSide);
-        this.leftSideAdded = true;
-      }
-    }
+    const codeRenderable = this.createOrUpdateCodeRenderable("left", content, this._wrapMode);
+    this.createOrUpdateSide("left", codeRenderable, lineColors, lineSigns, lineNumbers, new Set, "100%");
     if (this.rightSide && this.rightSideAdded) {
       super.remove(this.rightSide.id);
       this.rightSideAdded = false;
@@ -4590,6 +4939,19 @@ class DiffRenderable extends Renderable {
   buildSplitView() {
     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 = [];
     const rightLogicalLines = [];
     for (const hunk of this._parsedDiff.hunks) {
@@ -4604,11 +4966,13 @@ class DiffRenderable extends Renderable {
           leftLogicalLines.push({
             content,
             lineNum: oldLineNum,
+            color: this._contextBg,
             type: "context"
           });
           rightLogicalLines.push({
             content,
             lineNum: newLineNum,
+            color: this._contextBg,
             type: "context"
           });
           oldLineNum++;
@@ -4682,64 +5046,15 @@ class DiffRenderable extends Renderable {
 `);
     const preRightContent = rightLogicalLines.map((l) => l.content).join(`
 `);
-    const effectiveWrapMode = canDoWrapAlignment ? this._wrapMode : "none";
-    if (!this.leftCodeRenderable) {
-      const leftCodeOptions = {
-        id: this.id ? `${this.id}-left-code` : undefined,
-        content: preLeftContent,
-        filetype: this._filetype,
-        wrapMode: effectiveWrapMode,
-        conceal: this._conceal,
-        drawUnstyledText: true,
-        width: "100%",
-        height: "100%"
-      };
-      if (this._syntaxStyle) {
-        leftCodeOptions.syntaxStyle = this._syntaxStyle;
-      }
-      this.leftCodeRenderable = new CodeRenderable(this.ctx, leftCodeOptions);
-    } else {
-      this.leftCodeRenderable.content = preLeftContent;
-      this.leftCodeRenderable.wrapMode = effectiveWrapMode;
-      this.leftCodeRenderable.drawUnstyledText = true;
-      if (this._filetype !== undefined) {
-        this.leftCodeRenderable.filetype = this._filetype;
-      }
-      if (this._syntaxStyle !== undefined) {
-        this.leftCodeRenderable.syntaxStyle = this._syntaxStyle;
-      }
-    }
-    if (!this.rightCodeRenderable) {
-      const rightCodeOptions = {
-        id: this.id ? `${this.id}-right-code` : undefined,
-        content: preRightContent,
-        filetype: this._filetype,
-        wrapMode: effectiveWrapMode,
-        conceal: this._conceal,
-        drawUnstyledText: true,
-        width: "100%",
-        height: "100%"
-      };
-      if (this._syntaxStyle) {
-        rightCodeOptions.syntaxStyle = this._syntaxStyle;
-      }
-      this.rightCodeRenderable = new CodeRenderable(this.ctx, rightCodeOptions);
-    } else {
-      this.rightCodeRenderable.content = preRightContent;
-      this.rightCodeRenderable.wrapMode = effectiveWrapMode;
-      this.rightCodeRenderable.drawUnstyledText = true;
-      if (this._filetype !== undefined) {
-        this.rightCodeRenderable.filetype = this._filetype;
-      }
-      if (this._syntaxStyle !== undefined) {
-        this.rightCodeRenderable.syntaxStyle = this._syntaxStyle;
-      }
-    }
+    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;
     let finalRightLines;
     if (canDoWrapAlignment) {
-      const leftLineInfo = this.leftCodeRenderable.lineInfo;
-      const rightLineInfo = this.rightCodeRenderable.lineInfo;
+      const leftLineInfo = leftCodeRenderable.lineInfo;
+      const rightLineInfo = rightCodeRenderable.lineInfo;
       const leftSources = leftLineInfo.lineSources || [];
       const rightSources = rightLineInfo.lineSources || [];
       const leftVisualCounts = new Map;
@@ -4807,8 +5122,26 @@ class DiffRenderable extends Renderable {
       if (line.hideLineNumber) {
         leftHideLineNumbers.add(index);
       }
-      if (line.color) {
-        leftLineColors.set(index, line.color);
+      if (line.type === "remove") {
+        const config = {
+          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 = {
+          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);
@@ -4821,8 +5154,26 @@ class DiffRenderable extends Renderable {
       if (line.hideLineNumber) {
         rightHideLineNumbers.add(index);
       }
-      if (line.color) {
-        rightLineColors.set(index, line.color);
+      if (line.type === "add") {
+        const config = {
+          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 = {
+          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);
@@ -4832,63 +5183,10 @@ class DiffRenderable extends Renderable {
 `);
     const rightContentFinal = finalRightLines.map((l) => l.content).join(`
 `);
-    this.leftCodeRenderable.content = leftContentFinal;
-    this.rightCodeRenderable.content = rightContentFinal;
-    if (!this.leftSide) {
-      this.leftSide = new LineNumberRenderable(this.ctx, {
-        id: this.id ? `${this.id}-left` : undefined,
-        target: this.leftCodeRenderable,
-        fg: this._lineNumberFg,
-        bg: this._lineNumberBg,
-        lineColors: leftLineColors,
-        lineSigns: leftLineSigns,
-        lineNumbers: leftLineNumbers,
-        lineNumberOffset: 0,
-        hideLineNumbers: leftHideLineNumbers,
-        width: "50%",
-        height: "100%"
-      });
-      this.leftSide.showLineNumbers = this._showLineNumbers;
-      super.add(this.leftSide);
-      this.leftSideAdded = true;
-    } else {
-      this.leftSide.width = "50%";
-      this.leftSide.setLineColors(leftLineColors);
-      this.leftSide.setLineSigns(leftLineSigns);
-      this.leftSide.setLineNumbers(leftLineNumbers);
-      this.leftSide.setHideLineNumbers(leftHideLineNumbers);
-      if (!this.leftSideAdded) {
-        super.add(this.leftSide);
-        this.leftSideAdded = true;
-      }
-    }
-    if (!this.rightSide) {
-      this.rightSide = new LineNumberRenderable(this.ctx, {
-        id: this.id ? `${this.id}-right` : undefined,
-        target: this.rightCodeRenderable,
-        fg: this._lineNumberFg,
-        bg: this._lineNumberBg,
-        lineColors: rightLineColors,
-        lineSigns: rightLineSigns,
-        lineNumbers: rightLineNumbers,
-        lineNumberOffset: 0,
-        hideLineNumbers: rightHideLineNumbers,
-        width: "50%",
-        height: "100%"
-      });
-      this.rightSide.showLineNumbers = this._showLineNumbers;
-      super.add(this.rightSide);
-      this.rightSideAdded = true;
-    } else {
-      this.rightSide.setLineColors(rightLineColors);
-      this.rightSide.setLineSigns(rightLineSigns);
-      this.rightSide.setLineNumbers(rightLineNumbers);
-      this.rightSide.setHideLineNumbers(rightHideLineNumbers);
-      if (!this.rightSideAdded) {
-        super.add(this.rightSide);
-        this.rightSideAdded = true;
-      }
-    }
+    leftCodeRenderable.content = leftContentFinal;
+    rightCodeRenderable.content = rightContentFinal;
+    this.createOrUpdateSide("left", leftCodeRenderable, leftLineColors, leftLineSigns, leftLineNumbers, leftHideLineNumbers, "50%");
+    this.createOrUpdateSide("right", rightCodeRenderable, rightLineColors, rightLineSigns, rightLineNumbers, rightHideLineNumbers, "50%");
   }
   get diff() {
     return this._diff;
@@ -4897,11 +5195,7 @@ class DiffRenderable extends Renderable {
     if (this._diff !== value) {
       this._diff = value;
       this.parseDiff();
-      if (this._view === "split") {
-        this.requestRebuild();
-      } else {
-        this.buildView();
-      }
+      this.rebuildView();
     }
   }
   get view() {
@@ -4920,11 +5214,7 @@ class DiffRenderable extends Renderable {
   set filetype(value) {
     if (this._filetype !== value) {
       this._filetype = value;
-      if (this._view === "split") {
-        this.requestRebuild();
-      } else {
-        this.buildView();
-      }
+      this.rebuildView();
     }
   }
   get syntaxStyle() {
@@ -4933,11 +5223,7 @@ class DiffRenderable extends Renderable {
   set syntaxStyle(value) {
     if (this._syntaxStyle !== value) {
       this._syntaxStyle = value;
-      if (this._view === "split") {
-        this.requestRebuild();
-      } else {
-        this.buildView();
-      }
+      this.rebuildView();
     }
   }
   get wrapMode() {
@@ -4967,6 +5253,165 @@ class DiffRenderable extends Renderable {
       }
     }
   }
+  get addedBg() {
+    return this._addedBg;
+  }
+  set addedBg(value) {
+    const parsed = parseColor(value);
+    if (this._addedBg !== parsed) {
+      this._addedBg = parsed;
+      this.rebuildView();
+    }
+  }
+  get removedBg() {
+    return this._removedBg;
+  }
+  set removedBg(value) {
+    const parsed = parseColor(value);
+    if (this._removedBg !== parsed) {
+      this._removedBg = parsed;
+      this.rebuildView();
+    }
+  }
+  get contextBg() {
+    return this._contextBg;
+  }
+  set contextBg(value) {
+    const parsed = parseColor(value);
+    if (this._contextBg !== parsed) {
+      this._contextBg = parsed;
+      this.rebuildView();
+    }
+  }
+  get addedSignColor() {
+    return this._addedSignColor;
+  }
+  set addedSignColor(value) {
+    const parsed = parseColor(value);
+    if (this._addedSignColor !== parsed) {
+      this._addedSignColor = parsed;
+      this.rebuildView();
+    }
+  }
+  get removedSignColor() {
+    return this._removedSignColor;
+  }
+  set removedSignColor(value) {
+    const parsed = parseColor(value);
+    if (this._removedSignColor !== parsed) {
+      this._removedSignColor = parsed;
+      this.rebuildView();
+    }
+  }
+  get addedLineNumberBg() {
+    return this._addedLineNumberBg;
+  }
+  set addedLineNumberBg(value) {
+    const parsed = parseColor(value);
+    if (this._addedLineNumberBg !== parsed) {
+      this._addedLineNumberBg = parsed;
+      this.rebuildView();
+    }
+  }
+  get removedLineNumberBg() {
+    return this._removedLineNumberBg;
+  }
+  set removedLineNumberBg(value) {
+    const parsed = parseColor(value);
+    if (this._removedLineNumberBg !== parsed) {
+      this._removedLineNumberBg = parsed;
+      this.rebuildView();
+    }
+  }
+  get lineNumberFg() {
+    return this._lineNumberFg;
+  }
+  set lineNumberFg(value) {
+    const parsed = parseColor(value);
+    if (this._lineNumberFg !== parsed) {
+      this._lineNumberFg = parsed;
+      this.rebuildView();
+    }
+  }
+  get lineNumberBg() {
+    return this._lineNumberBg;
+  }
+  set lineNumberBg(value) {
+    const parsed = parseColor(value);
+    if (this._lineNumberBg !== parsed) {
+      this._lineNumberBg = parsed;
+      this.rebuildView();
+    }
+  }
+  get addedContentBg() {
+    return this._addedContentBg;
+  }
+  set addedContentBg(value) {
+    const parsed = value ? parseColor(value) : null;
+    if (this._addedContentBg !== parsed) {
+      this._addedContentBg = parsed;
+      this.rebuildView();
+    }
+  }
+  get removedContentBg() {
+    return this._removedContentBg;
+  }
+  set removedContentBg(value) {
+    const parsed = value ? parseColor(value) : null;
+    if (this._removedContentBg !== parsed) {
+      this._removedContentBg = parsed;
+      this.rebuildView();
+    }
+  }
+  get contextContentBg() {
+    return this._contextContentBg;
+  }
+  set contextContentBg(value) {
+    const parsed = value ? parseColor(value) : null;
+    if (this._contextContentBg !== parsed) {
+      this._contextContentBg = parsed;
+      this.rebuildView();
+    }
+  }
+  get selectionBg() {
+    return this._selectionBg;
+  }
+  set selectionBg(value) {
+    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;
+      }
+    }
+  }
+  get selectionFg() {
+    return this._selectionFg;
+  }
+  set selectionFg(value) {
+    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;
+      }
+    }
+  }
+  get conceal() {
+    return this._conceal;
+  }
+  set conceal(value) {
+    if (this._conceal !== value) {
+      this._conceal = value;
+      this.rebuildView();
+    }
+  }
 }
 // src/renderables/Input.ts
 var InputRenderableEvents;
@@ -6813,10 +7258,12 @@ class TabSelectRenderable extends Renderable {
     }
   }
   refreshFrameBuffer() {
-    if (!this.frameBuffer || this._options.length === 0)
+    if (!this.frameBuffer)
       return;
     const bgColor = this._focused ? this._focusedBackgroundColor : this._backgroundColor;
     this.frameBuffer.clear(bgColor);
+    if (this._options.length === 0)
+      return;
     const contentX = 0;
     const contentY = 0;
     const contentWidth = this.width;
@@ -7051,101 +7498,6 @@ class TabSelectRenderable extends Renderable {
     this.requestRender();
   }
 }
-// src/renderables/Text.ts
-class TextRenderable extends TextBufferRenderable {
-  _text;
-  _hasManualStyledText = false;
-  rootTextNode;
-  _contentDefaultOptions = {
-    content: ""
-  };
-  constructor(ctx, options) {
-    super(ctx, options);
-    const content = options.content ?? this._contentDefaultOptions.content;
-    const styledText = typeof content === "string" ? stringToStyledText(content) : content;
-    this._text = styledText;
-    this._hasManualStyledText = options.content !== undefined && content !== "";
-    this.rootTextNode = new RootTextNodeRenderable(ctx, {
-      id: `${this.id}-root`,
-      fg: this._defaultFg,
-      bg: this._defaultBg,
-      attributes: this._defaultAttributes
-    }, this);
-    this.updateTextBuffer(styledText);
-  }
-  updateTextBuffer(styledText) {
-    this.textBuffer.setStyledText(styledText);
-    this.clearChunks(styledText);
-  }
-  clearChunks(styledText) {}
-  get content() {
-    return this._text;
-  }
-  get chunks() {
-    return this._text.chunks;
-  }
-  get textNode() {
-    return this.rootTextNode;
-  }
-  set content(value) {
-    this._hasManualStyledText = true;
-    const styledText = typeof value === "string" ? stringToStyledText(value) : value;
-    if (this._text !== styledText) {
-      this._text = styledText;
-      this.updateTextBuffer(styledText);
-      this.updateTextInfo();
-    }
-  }
-  updateTextFromNodes() {
-    if (this.rootTextNode.isDirty && !this._hasManualStyledText) {
-      const chunks = this.rootTextNode.gatherWithInheritedStyle({
-        fg: this._defaultFg,
-        bg: this._defaultBg,
-        attributes: this._defaultAttributes
-      });
-      this.textBuffer.setStyledText(new StyledText(chunks));
-      this.refreshLocalSelection();
-      this.yogaNode.markDirty();
-    }
-  }
-  add(obj, index) {
-    return this.rootTextNode.add(obj, index);
-  }
-  remove(id) {
-    this.rootTextNode.remove(id);
-  }
-  insertBefore(obj, anchor) {
-    this.rootTextNode.insertBefore(obj, anchor);
-    return this.rootTextNode.children.indexOf(obj);
-  }
-  getTextChildren() {
-    return this.rootTextNode.getChildren();
-  }
-  clear() {
-    this.rootTextNode.clear();
-    const emptyStyledText = stringToStyledText("");
-    this._text = emptyStyledText;
-    this.updateTextBuffer(emptyStyledText);
-    this.updateTextInfo();
-    this.requestRender();
-  }
-  onLifecyclePass = () => {
-    this.updateTextFromNodes();
-  };
-  onFgChanged(newColor) {
-    this.rootTextNode.fg = newColor;
-  }
-  onBgChanged(newColor) {
-    this.rootTextNode.bg = newColor;
-  }
-  onAttributesChanged(newAttributes) {
-    this.rootTextNode.attributes = newAttributes;
-  }
-  destroy() {
-    this.rootTextNode.children.length = 0;
-    super.destroy();
-  }
-}
 // src/renderables/EditBufferRenderable.ts
 class EditBufferRenderable extends Renderable {
   _focusable = true;
@@ -7247,6 +7599,9 @@ class EditBufferRenderable extends Renderable {
   get lineCount() {
     return this.editBuffer.getLineCount();
   }
+  get virtualLineCount() {
+    return this.editorView.getVirtualLineCount();
+  }
   get scrollY() {
     return this.editorView.getViewport().offsetY;
   }
@@ -7505,12 +7860,15 @@ class EditBufferRenderable extends Renderable {
     }
   }
   destroy() {
+    if (this.isDestroyed)
+      return;
     if (this._focused) {
       this._ctx.setCursorPosition(0, 0, false);
+      this.blur();
     }
-    super.destroy();
     this.editorView.destroy();
     this.editBuffer.destroy();
+    super.destroy();
   }
   set onCursorChange(handler) {
     this._cursorChangeListener = handler;
@@ -8037,7 +8395,9 @@ class TextareaRenderable extends EditBufferRenderable {
   }
   blur() {
     super.blur();
-    this.updateColors();
+    if (!this.isDestroyed) {
+      this.updateColors();
+    }
   }
   get placeholder() {
     return this._placeholder;
@@ -8218,7 +8578,7 @@ export {
   applyChromaticAberration,
   applyAsciiArt,
   addDefaultParsers,
-  exports_src as Yoga,
+  exports_dist as Yoga,
   VignetteEffect,
   VRenderable,
   TreeSitterClient,
@@ -8296,5 +8656,5 @@ export {
   ASCIIFont
 };
 
-//# debugId=84CD912F2F121D3E64756E2164756E21
+//# debugId=77A659B0F45EAC2C64756E2164756E21
 //# sourceMappingURL=index.js.map