@opentui/core 0.1.50 → 0.1.52

package/index.js

@@ -19,6 +19,7 @@ import {
   LinearScrollAccel,
   LogLevel,
   MacOSScrollAccel,
+  MeasureMode,
   MouseButton,
   MouseEvent,
   MouseParser,
@@ -136,7 +137,7 @@ import {
   white,
   wrapWithDelegates,
   yellow
-} from "./index-ztfy2qy3.js";
+} from "./index-vhxgbbed.js";
 // src/text-buffer-view.ts
 class TextBufferView {
   lib;
@@ -197,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);
@@ -234,6 +239,10 @@ class TextBufferView {
     this.guard();
     this.lib.textBufferViewSetTabIndicatorColor(this.viewPtr, color);
   }
+  measureForDimensions(width, height) {
+    this.guard();
+    return this.lib.textBufferViewMeasureForDimensions(this.viewPtr, width, height);
+  }
   destroy() {
     if (this._destroyed)
       return;
@@ -319,6 +328,10 @@ class EditBuffer extends EventEmitter {
     const textBytes = this.lib.encoder.encode(text);
     this.lib.editBufferSetText(this.bufferPtr, textBytes, history);
   }
+  getLineCount() {
+    this.guard();
+    return this.lib.textBufferGetLineCount(this.textBufferPtr);
+  }
   getText() {
     this.guard();
     const maxSize = 1024 * 1024;
@@ -551,6 +564,7 @@ class EditorView {
   editBuffer;
   _destroyed = false;
   _extmarksController;
+  _textBufferViewPtr;
   constructor(lib, ptr, editBuffer) {
     this.lib = lib;
     this.viewPtr = ptr;
@@ -696,6 +710,13 @@ class EditorView {
     this.guard();
     this.lib.editorViewSetTabIndicatorColor(this.viewPtr, color);
   }
+  measureForDimensions(width, height) {
+    this.guard();
+    if (!this._textBufferViewPtr) {
+      this._textBufferViewPtr = this.lib.editorViewGetTextBufferView(this.viewPtr);
+    }
+    return this.lib.textBufferViewMeasureForDimensions(this._textBufferViewPtr, width, height);
+  }
   destroy() {
     if (this._destroyed)
       return;
@@ -2403,9 +2424,10 @@ class TextBufferRenderable extends Renderable {
   lastLocalSelection = null;
   _tabIndicator;
   _tabIndicatorColor;
+  _scrollX = 0;
+  _scrollY = 0;
   textBuffer;
   textBufferView;
-  _lineInfo = { lineStarts: [], lineWidths: [], maxLineWidth: 0 };
   _defaultOptions = {
     fg: RGBA.fromValues(1, 1, 1, 1),
     bg: RGBA.fromValues(0, 0, 0, 0),
@@ -2444,10 +2466,82 @@ class TextBufferRenderable extends Renderable {
       this.textBufferView.setTabIndicatorColor(this._tabIndicatorColor);
     }
     if (this._wrapMode !== "none" && this.width > 0) {
-      this.updateWrapWidth(this.width);
+      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 scrollY() {
+    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();
   }
@@ -2523,7 +2617,7 @@ class TextBufferRenderable extends Renderable {
       this._wrapMode = value;
       this.textBufferView.setWrapMode(this._wrapMode);
       if (value !== "none" && this.width > 0) {
-        this.updateWrapWidth(this.width);
+        this.textBufferView.setWrapWidth(this.width);
       }
       this.yogaNode.markDirty();
       this.requestRender();
@@ -2555,7 +2649,7 @@ class TextBufferRenderable extends Renderable {
     }
   }
   onResize(width, height) {
-    this.textBufferView.setViewportSize(width, height);
+    this.textBufferView.setViewport(this._scrollX, this._scrollY, width, height);
     if (this.lastLocalSelection) {
       const changed = this.updateLocalSelection(this.lastLocalSelection);
       if (changed) {
@@ -2582,30 +2676,29 @@ class TextBufferRenderable extends Renderable {
     }
     this.yogaNode.markDirty();
     this.requestRender();
-  }
-  updateLineInfo() {
-    const lineInfo = this.textBufferView.logicalLineInfo;
-    this._lineInfo.lineStarts = lineInfo.lineStarts;
-    this._lineInfo.lineWidths = lineInfo.lineWidths;
-    this._lineInfo.maxLineWidth = lineInfo.maxLineWidth;
-  }
-  updateWrapWidth(width) {
-    this.textBufferView.setWrapWidth(width);
-    this.updateLineInfo();
+    this.emit("line-info-change");
   }
   setupMeasureFunc() {
     const measureFunc = (width, widthMode, height, heightMode) => {
-      const effectiveWidth = isNaN(width) ? 1 : width;
-      if (this._wrapMode !== "none" && this.width !== effectiveWidth) {
-        this.updateWrapWidth(effectiveWidth);
+      let effectiveWidth;
+      if (widthMode === MeasureMode.Undefined || isNaN(width)) {
+        effectiveWidth = 0;
       } else {
-        this.updateLineInfo();
+        effectiveWidth = width;
+      }
+      const effectiveHeight = isNaN(height) ? 1 : height;
+      const measureResult = this.textBufferView.measureForDimensions(Math.floor(effectiveWidth), Math.floor(effectiveHeight));
+      const measuredWidth = measureResult ? Math.max(1, measureResult.maxWidth) : 1;
+      const measuredHeight = measureResult ? Math.max(1, measureResult.lineCount) : 1;
+      if (widthMode === MeasureMode.AtMost && this._positionType !== "absolute") {
+        return {
+          width: Math.min(effectiveWidth, measuredWidth),
+          height: Math.min(effectiveHeight, measuredHeight)
+        };
       }
-      const measuredWidth = this._lineInfo.maxLineWidth;
-      const measuredHeight = this._lineInfo.lineStarts.length;
       return {
-        width: Math.max(1, measuredWidth),
-        height: Math.max(1, measuredHeight)
+        width: measuredWidth,
+        height: measuredHeight
       };
     };
     this.yogaNode.setMeasureFunc(measureFunc);
@@ -2690,6 +2783,10 @@ class CodeRenderable extends TextBufferRenderable {
     this._conceal = options.conceal ?? this._contentDefaultOptions.conceal;
     this._drawUnstyledText = options.drawUnstyledText ?? this._contentDefaultOptions.drawUnstyledText;
     this._streaming = options.streaming ?? this._contentDefaultOptions.streaming;
+    if (this._content.length > 0 && (this._drawUnstyledText || !this._filetype)) {
+      this.textBuffer.setText(this._content);
+      this.updateTextInfo();
+    }
     this._highlightsDirty = this._content.length > 0;
   }
   get content() {
@@ -2699,6 +2796,10 @@ class CodeRenderable extends TextBufferRenderable {
     if (this._content !== value) {
       this._content = value;
       this._highlightsDirty = true;
+      if (this._drawUnstyledText || !this._filetype) {
+        this.textBuffer.setText(value);
+        this.updateTextInfo();
+      }
     }
   }
   get filetype() {
@@ -3180,170 +3281,2273 @@ class VRenderable extends Renderable {
     }
   }
 }
-// src/renderables/Input.ts
-var InputRenderableEvents;
-((InputRenderableEvents2) => {
-  InputRenderableEvents2["INPUT"] = "input";
-  InputRenderableEvents2["CHANGE"] = "change";
-  InputRenderableEvents2["ENTER"] = "enter";
-})(InputRenderableEvents ||= {});
-
-class InputRenderable extends Renderable {
-  _focusable = true;
-  _value = "";
-  _cursorPosition = 0;
-  _placeholder;
-  _backgroundColor;
-  _textColor;
-  _focusedBackgroundColor;
-  _focusedTextColor;
-  _placeholderColor;
-  _cursorColor;
-  _cursorStyle;
-  _maxLength;
-  _lastCommittedValue = "";
-  _defaultOptions = {
-    backgroundColor: "transparent",
-    textColor: "#FFFFFF",
-    focusedBackgroundColor: "#1a1a1a",
-    focusedTextColor: "#FFFFFF",
-    placeholder: "",
-    placeholderColor: "#666666",
-    cursorColor: "#FFFFFF",
-    cursorStyle: {
-      style: "block",
-      blinking: true
-    },
-    maxLength: 1000,
-    value: ""
-  };
-  constructor(ctx, options) {
-    super(ctx, { ...options, buffered: true });
-    this._backgroundColor = parseColor(options.backgroundColor || this._defaultOptions.backgroundColor);
-    this._textColor = parseColor(options.textColor || this._defaultOptions.textColor);
-    this._focusedBackgroundColor = parseColor(options.focusedBackgroundColor || options.backgroundColor || this._defaultOptions.focusedBackgroundColor);
-    this._focusedTextColor = parseColor(options.focusedTextColor || options.textColor || this._defaultOptions.focusedTextColor);
-    this._placeholder = options.placeholder || this._defaultOptions.placeholder;
-    this._value = options.value || this._defaultOptions.value;
-    this._lastCommittedValue = this._value;
-    this._cursorPosition = this._value.length;
-    this._maxLength = options.maxLength || this._defaultOptions.maxLength;
-    this._placeholderColor = parseColor(options.placeholderColor || this._defaultOptions.placeholderColor);
-    this._cursorColor = parseColor(options.cursorColor || this._defaultOptions.cursorColor);
-    this._cursorStyle = options.cursorStyle || this._defaultOptions.cursorStyle;
+// src/renderables/LineNumberRenderable.ts
+class GutterRenderable extends Renderable {
+  target;
+  _fg;
+  _bg;
+  _minWidth;
+  _paddingRight;
+  _lineColorsGutter;
+  _lineColorsContent;
+  _lineSigns;
+  _lineNumberOffset;
+  _hideLineNumbers;
+  _lineNumbers;
+  _maxBeforeWidth = 0;
+  _maxAfterWidth = 0;
+  _lastKnownLineCount = 0;
+  _lastKnownScrollY = 0;
+  constructor(ctx, target, options) {
+    super(ctx, {
+      id: options.id,
+      width: "auto",
+      height: "auto",
+      flexGrow: 0,
+      flexShrink: 0,
+      buffered: options.buffered
+    });
+    this.target = target;
+    this._fg = options.fg;
+    this._bg = options.bg;
+    this._minWidth = options.minWidth;
+    this._paddingRight = options.paddingRight;
+    this._lineColorsGutter = options.lineColorsGutter;
+    this._lineColorsContent = options.lineColorsContent;
+    this._lineSigns = options.lineSigns;
+    this._lineNumberOffset = options.lineNumberOffset;
+    this._hideLineNumbers = options.hideLineNumbers;
+    this._lineNumbers = options.lineNumbers ?? new Map;
+    this._lastKnownLineCount = this.target.lineCount;
+    this._lastKnownScrollY = this.target.scrollY;
+    this.calculateSignWidths();
+    this.setupMeasureFunc();
+    this.onLifecyclePass = () => {
+      const currentLineCount = this.target.lineCount;
+      if (currentLineCount !== this._lastKnownLineCount) {
+        this._lastKnownLineCount = currentLineCount;
+        this.yogaNode.markDirty();
+        this.requestRender();
+      }
+    };
   }
-  updateCursorPosition() {
-    if (!this._focused)
-      return;
-    const contentX = 0;
-    const contentY = 0;
-    const contentWidth = this.width;
-    const maxVisibleChars = contentWidth - 1;
-    let displayStartIndex = 0;
-    if (this._cursorPosition >= maxVisibleChars) {
-      displayStartIndex = this._cursorPosition - maxVisibleChars + 1;
+  setupMeasureFunc() {
+    const measureFunc = (width, widthMode, height, heightMode) => {
+      const gutterWidth = this.calculateWidth();
+      const gutterHeight = this.target.lineCount;
+      return {
+        width: gutterWidth,
+        height: gutterHeight
+      };
+    };
+    this.yogaNode.setMeasureFunc(measureFunc);
+  }
+  remeasure() {
+    this.yogaNode.markDirty();
+  }
+  calculateSignWidths() {
+    this._maxBeforeWidth = 0;
+    this._maxAfterWidth = 0;
+    for (const sign of this._lineSigns.values()) {
+      if (sign.before) {
+        const width = Bun.stringWidth(sign.before);
+        this._maxBeforeWidth = Math.max(this._maxBeforeWidth, width);
+      }
+      if (sign.after) {
+        const width = Bun.stringWidth(sign.after);
+        this._maxAfterWidth = Math.max(this._maxAfterWidth, width);
+      }
     }
-    const cursorDisplayX = this._cursorPosition - displayStartIndex;
-    if (cursorDisplayX >= 0 && cursorDisplayX < contentWidth) {
-      const absoluteCursorX = this.x + contentX + cursorDisplayX + 1;
-      const absoluteCursorY = this.y + contentY + 1;
-      this._ctx.setCursorPosition(absoluteCursorX, absoluteCursorY, true);
-      this._ctx.setCursorColor(this._cursorColor);
+  }
+  calculateWidth() {
+    const totalLines = this.target.lineCount;
+    let maxLineNumber = totalLines + this._lineNumberOffset;
+    if (this._lineNumbers.size > 0) {
+      for (const customLineNum of this._lineNumbers.values()) {
+        maxLineNumber = Math.max(maxLineNumber, customLineNum);
+      }
     }
+    const digits = maxLineNumber > 0 ? Math.floor(Math.log10(maxLineNumber)) + 1 : 1;
+    const baseWidth = Math.max(this._minWidth, digits + this._paddingRight + 1);
+    return baseWidth + this._maxBeforeWidth + this._maxAfterWidth;
   }
-  focus() {
-    super.focus();
-    this._ctx.setCursorStyle(this._cursorStyle.style, this._cursorStyle.blinking);
-    this._ctx.setCursorColor(this._cursorColor);
-    this.updateCursorPosition();
+  setLineColors(lineColorsGutter, lineColorsContent) {
+    this._lineColorsGutter = lineColorsGutter;
+    this._lineColorsContent = lineColorsContent;
+    this.requestRender();
   }
-  blur() {
-    super.blur();
-    this._ctx.setCursorPosition(0, 0, false);
-    if (this._value !== this._lastCommittedValue) {
-      this._lastCommittedValue = this._value;
-      this.emit("change" /* CHANGE */, this._value);
+  getLineColors() {
+    return {
+      gutter: this._lineColorsGutter,
+      content: this._lineColorsContent
+    };
+  }
+  setLineSigns(lineSigns) {
+    const oldMaxBefore = this._maxBeforeWidth;
+    const oldMaxAfter = this._maxAfterWidth;
+    this._lineSigns = lineSigns;
+    this.calculateSignWidths();
+    if (this._maxBeforeWidth !== oldMaxBefore || this._maxAfterWidth !== oldMaxAfter) {
+      this.yogaNode.markDirty();
     }
+    this.requestRender();
   }
-  renderSelf(buffer, deltaTime) {
-    if (!this.visible || !this.frameBuffer)
+  getLineSigns() {
+    return this._lineSigns;
+  }
+  renderSelf(buffer) {
+    const currentScrollY = this.target.scrollY;
+    const scrollChanged = currentScrollY !== this._lastKnownScrollY;
+    if (this.buffered && !this.isDirty && !scrollChanged) {
       return;
-    if (this.isDirty) {
-      this.refreshFrameBuffer();
     }
+    this._lastKnownScrollY = currentScrollY;
+    this.refreshFrameBuffer(buffer);
   }
-  refreshFrameBuffer() {
-    if (!this.frameBuffer)
+  refreshFrameBuffer(buffer) {
+    const startX = this.buffered ? 0 : this.x;
+    const startY = this.buffered ? 0 : this.y;
+    if (this.buffered) {
+      buffer.clear(this._bg);
+    } else if (this._bg.a > 0) {
+      buffer.fillRect(startX, startY, this.width, this.height, this._bg);
+    }
+    const lineInfo = this.target.lineInfo;
+    if (!lineInfo || !lineInfo.lineSources)
       return;
-    const bgColor = this._focused ? this._focusedBackgroundColor : this._backgroundColor;
-    this.frameBuffer.clear(bgColor);
-    const contentX = 0;
-    const contentY = 0;
-    const contentWidth = this.width;
-    const contentHeight = this.height;
-    const displayText = this._value || this._placeholder;
-    const isPlaceholder = !this._value && this._placeholder;
-    const baseTextColor = this._focused ? this._focusedTextColor : this._textColor;
-    const textColor = isPlaceholder ? this._placeholderColor : baseTextColor;
-    const maxVisibleChars = contentWidth - 1;
-    let displayStartIndex = 0;
-    if (this._cursorPosition >= maxVisibleChars) {
-      displayStartIndex = this._cursorPosition - maxVisibleChars + 1;
+    const sources = lineInfo.lineSources;
+    let lastSource = -1;
+    const startLine = this.target.scrollY;
+    if (startLine >= sources.length)
+      return;
+    lastSource = startLine > 0 ? sources[startLine - 1] : -1;
+    for (let i = 0;i < this.height; i++) {
+      const visualLineIndex = startLine + i;
+      if (visualLineIndex >= sources.length)
+        break;
+      const logicalLine = sources[visualLineIndex];
+      const lineBg = this._lineColorsGutter.get(logicalLine) ?? this._bg;
+      if (lineBg !== this._bg) {
+        buffer.fillRect(startX, startY + i, this.width, 1, lineBg);
+      }
+      if (logicalLine === lastSource) {} else {
+        let currentX = startX;
+        const sign = this._lineSigns.get(logicalLine);
+        if (sign?.before) {
+          const beforeWidth = Bun.stringWidth(sign.before);
+          const padding = this._maxBeforeWidth - beforeWidth;
+          currentX += padding;
+          const beforeColor = sign.beforeColor ? parseColor(sign.beforeColor) : this._fg;
+          buffer.drawText(sign.before, currentX, startY + i, beforeColor, lineBg);
+          currentX += beforeWidth;
+        } else if (this._maxBeforeWidth > 0) {
+          currentX += this._maxBeforeWidth;
+        }
+        if (!this._hideLineNumbers.has(logicalLine)) {
+          const customLineNum = this._lineNumbers.get(logicalLine);
+          const lineNum = customLineNum !== undefined ? customLineNum : logicalLine + 1 + this._lineNumberOffset;
+          const lineNumStr = lineNum.toString();
+          const lineNumWidth = lineNumStr.length;
+          const availableSpace = this.width - this._maxBeforeWidth - this._maxAfterWidth - this._paddingRight;
+          const lineNumX = startX + this._maxBeforeWidth + 1 + availableSpace - lineNumWidth - 1;
+          if (lineNumX >= startX + this._maxBeforeWidth + 1) {
+            buffer.drawText(lineNumStr, lineNumX, startY + i, this._fg, lineBg);
+          }
+        }
+        if (sign?.after) {
+          const afterX = startX + this.width - this._paddingRight - this._maxAfterWidth;
+          const afterColor = sign.afterColor ? parseColor(sign.afterColor) : this._fg;
+          buffer.drawText(sign.after, afterX, startY + i, afterColor, lineBg);
+        }
+      }
+      lastSource = logicalLine;
     }
-    const visibleText = displayText.substring(displayStartIndex, displayStartIndex + maxVisibleChars);
-    if (visibleText) {
-      this.frameBuffer.drawText(visibleText, contentX, contentY, textColor);
+  }
+}
+function darkenColor(color) {
+  return RGBA.fromValues(color.r * 0.8, color.g * 0.8, color.b * 0.8, color.a);
+}
+
+class LineNumberRenderable extends Renderable {
+  gutter = null;
+  target = null;
+  _lineColorsGutter;
+  _lineColorsContent;
+  _lineSigns;
+  _fg;
+  _bg;
+  _minWidth;
+  _paddingRight;
+  _lineNumberOffset;
+  _hideLineNumbers;
+  _lineNumbers;
+  _isDestroying = false;
+  handleLineInfoChange = () => {
+    this.gutter?.remeasure();
+    this.requestRender();
+  };
+  parseLineColor(line, color) {
+    if (typeof color === "object" && "gutter" in color) {
+      const config = color;
+      if (config.gutter) {
+        this._lineColorsGutter.set(line, parseColor(config.gutter));
+      }
+      if (config.content) {
+        this._lineColorsContent.set(line, parseColor(config.content));
+      } else if (config.gutter) {
+        this._lineColorsContent.set(line, darkenColor(parseColor(config.gutter)));
+      }
+    } else {
+      const parsedColor = parseColor(color);
+      this._lineColorsGutter.set(line, parsedColor);
+      this._lineColorsContent.set(line, darkenColor(parsedColor));
     }
-    if (this._focused) {
-      this.updateCursorPosition();
+  }
+  constructor(ctx, options) {
+    super(ctx, {
+      ...options,
+      flexDirection: "row",
+      height: "auto"
+    });
+    this._fg = parseColor(options.fg ?? "#888888");
+    this._bg = parseColor(options.bg ?? "transparent");
+    this._minWidth = options.minWidth ?? 3;
+    this._paddingRight = options.paddingRight ?? 1;
+    this._lineNumberOffset = options.lineNumberOffset ?? 0;
+    this._hideLineNumbers = options.hideLineNumbers ?? new Set;
+    this._lineNumbers = options.lineNumbers ?? new Map;
+    this._lineColorsGutter = new Map;
+    this._lineColorsContent = new Map;
+    if (options.lineColors) {
+      for (const [line, color] of options.lineColors) {
+        this.parseLineColor(line, color);
+      }
+    }
+    this._lineSigns = new Map;
+    if (options.lineSigns) {
+      for (const [line, sign] of options.lineSigns) {
+        this._lineSigns.set(line, sign);
+      }
+    }
+    if (options.target) {
+      this.setTarget(options.target);
     }
   }
-  get value() {
-    return this._value;
+  setTarget(target) {
+    if (this.target === target)
+      return;
+    if (this.target) {
+      this.target.off("line-info-change", this.handleLineInfoChange);
+      super.remove(this.target.id);
+    }
+    if (this.gutter) {
+      super.remove(this.gutter.id);
+      this.gutter = null;
+    }
+    this.target = target;
+    this.target.on("line-info-change", this.handleLineInfoChange);
+    this.gutter = new GutterRenderable(this.ctx, this.target, {
+      fg: this._fg,
+      bg: this._bg,
+      minWidth: this._minWidth,
+      paddingRight: this._paddingRight,
+      lineColorsGutter: this._lineColorsGutter,
+      lineColorsContent: this._lineColorsContent,
+      lineSigns: this._lineSigns,
+      lineNumberOffset: this._lineNumberOffset,
+      hideLineNumbers: this._hideLineNumbers,
+      lineNumbers: this._lineNumbers,
+      id: this.id ? `${this.id}-gutter` : undefined,
+      buffered: true
+    });
+    super.add(this.gutter);
+    super.add(this.target);
   }
-  set value(value) {
-    const newValue = value.substring(0, this._maxLength);
-    if (this._value !== newValue) {
-      this._value = newValue;
-      this._cursorPosition = Math.min(this._cursorPosition, this._value.length);
-      this.requestRender();
-      this.updateCursorPosition();
-      this.emit("input" /* INPUT */, this._value);
+  add(child) {
+    if (!this.target && "lineInfo" in child && "lineCount" in child && "scrollY" in child) {
+      this.setTarget(child);
+      return this.getChildrenCount() - 1;
     }
+    return -1;
   }
-  set placeholder(placeholder) {
-    if (this._placeholder !== placeholder) {
-      this._placeholder = placeholder;
-      this.requestRender();
+  remove(id) {
+    if (this._isDestroying) {
+      super.remove(id);
+      return;
+    }
+    if (this.gutter && id === this.gutter.id) {
+      throw new Error("LineNumberRenderable: Cannot remove gutter directly.");
+    }
+    if (this.target && id === this.target.id) {
+      throw new Error("LineNumberRenderable: Cannot remove target directly. Use clearTarget() instead.");
     }
+    super.remove(id);
   }
-  get cursorPosition() {
-    return this._cursorPosition;
+  destroyRecursively() {
+    this._isDestroying = true;
+    if (this.target) {
+      this.target.off("line-info-change", this.handleLineInfoChange);
+    }
+    super.destroyRecursively();
+    this.gutter = null;
+    this.target = null;
   }
-  set cursorPosition(position) {
-    const newPosition = Math.max(0, Math.min(position, this._value.length));
-    if (this._cursorPosition !== newPosition) {
-      this._cursorPosition = newPosition;
-      this.requestRender();
-      this.updateCursorPosition();
+  clearTarget() {
+    if (this.target) {
+      this.target.off("line-info-change", this.handleLineInfoChange);
+      super.remove(this.target.id);
+      this.target = null;
+    }
+    if (this.gutter) {
+      super.remove(this.gutter.id);
+      this.gutter = null;
     }
   }
-  insertText(text) {
-    if (this._value.length + text.length > this._maxLength) {
+  renderSelf(buffer) {
+    if (!this.target || !this.gutter)
+      return;
+    const lineInfo = this.target.lineInfo;
+    if (!lineInfo || !lineInfo.lineSources)
       return;
+    const sources = lineInfo.lineSources;
+    const startLine = this.target.scrollY;
+    if (startLine >= sources.length)
+      return;
+    const gutterWidth = this.gutter.visible ? this.gutter.width : 0;
+    const contentWidth = this.width - gutterWidth;
+    for (let i = 0;i < this.height; i++) {
+      const visualLineIndex = startLine + i;
+      if (visualLineIndex >= sources.length)
+        break;
+      const logicalLine = sources[visualLineIndex];
+      const lineBg = this._lineColorsContent.get(logicalLine);
+      if (lineBg) {
+        buffer.fillRect(this.x + gutterWidth, this.y + i, contentWidth, 1, lineBg);
+      }
     }
-    const beforeCursor = this._value.substring(0, this._cursorPosition);
-    const afterCursor = this._value.substring(this._cursorPosition);
-    this._value = beforeCursor + text + afterCursor;
-    this._cursorPosition += text.length;
-    this.requestRender();
-    this.updateCursorPosition();
-    this.emit("input" /* INPUT */, this._value);
   }
-  deleteCharacter(direction) {
-    if (direction === "backward" && this._cursorPosition > 0) {
-      const beforeCursor = this._value.substring(0, this._cursorPosition - 1);
-      const afterCursor = this._value.substring(this._cursorPosition);
+  set showLineNumbers(value) {
+    if (this.gutter) {
+      this.gutter.visible = value;
+    }
+  }
+  get showLineNumbers() {
+    return this.gutter?.visible ?? false;
+  }
+  setLineColor(line, color) {
+    this.parseLineColor(line, color);
+    if (this.gutter) {
+      this.gutter.setLineColors(this._lineColorsGutter, this._lineColorsContent);
+    }
+  }
+  clearLineColor(line) {
+    this._lineColorsGutter.delete(line);
+    this._lineColorsContent.delete(line);
+    if (this.gutter) {
+      this.gutter.setLineColors(this._lineColorsGutter, this._lineColorsContent);
+    }
+  }
+  clearAllLineColors() {
+    this._lineColorsGutter.clear();
+    this._lineColorsContent.clear();
+    if (this.gutter) {
+      this.gutter.setLineColors(this._lineColorsGutter, this._lineColorsContent);
+    }
+  }
+  setLineColors(lineColors) {
+    this._lineColorsGutter.clear();
+    this._lineColorsContent.clear();
+    for (const [line, color] of lineColors) {
+      this.parseLineColor(line, color);
+    }
+    if (this.gutter) {
+      this.gutter.setLineColors(this._lineColorsGutter, this._lineColorsContent);
+    }
+  }
+  getLineColors() {
+    return {
+      gutter: this._lineColorsGutter,
+      content: this._lineColorsContent
+    };
+  }
+  setLineSign(line, sign) {
+    this._lineSigns.set(line, sign);
+    if (this.gutter) {
+      this.gutter.setLineSigns(this._lineSigns);
+    }
+  }
+  clearLineSign(line) {
+    this._lineSigns.delete(line);
+    if (this.gutter) {
+      this.gutter.setLineSigns(this._lineSigns);
+    }
+  }
+  clearAllLineSigns() {
+    this._lineSigns.clear();
+    if (this.gutter) {
+      this.gutter.setLineSigns(this._lineSigns);
+    }
+  }
+  setLineSigns(lineSigns) {
+    this._lineSigns.clear();
+    for (const [line, sign] of lineSigns) {
+      this._lineSigns.set(line, sign);
+    }
+    if (this.gutter) {
+      this.gutter.setLineSigns(this._lineSigns);
+    }
+  }
+  getLineSigns() {
+    return this._lineSigns;
+  }
+  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);
+      }
+    }
+  }
+  get lineNumberOffset() {
+    return this._lineNumberOffset;
+  }
+  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);
+    }
+  }
+  getHideLineNumbers() {
+    return this._hideLineNumbers;
+  }
+  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);
+    }
+  }
+  getLineNumbers() {
+    return this._lineNumbers;
+  }
+}
+
+// ../../node_modules/diff/libesm/diff/base.js
+class Diff {
+  diff(oldStr, newStr, options = {}) {
+    let callback;
+    if (typeof options === "function") {
+      callback = options;
+      options = {};
+    } else if ("callback" in options) {
+      callback = options.callback;
+    }
+    const oldString = this.castInput(oldStr, options);
+    const newString = this.castInput(newStr, options);
+    const oldTokens = this.removeEmpty(this.tokenize(oldString, options));
+    const newTokens = this.removeEmpty(this.tokenize(newString, options));
+    return this.diffWithOptionsObj(oldTokens, newTokens, options, callback);
+  }
+  diffWithOptionsObj(oldTokens, newTokens, options, callback) {
+    var _a;
+    const done = (value) => {
+      value = this.postProcess(value, options);
+      if (callback) {
+        setTimeout(function() {
+          callback(value);
+        }, 0);
+        return;
+      } else {
+        return value;
+      }
+    };
+    const newLen = newTokens.length, oldLen = oldTokens.length;
+    let editLength = 1;
+    let maxEditLength = newLen + oldLen;
+    if (options.maxEditLength != null) {
+      maxEditLength = Math.min(maxEditLength, options.maxEditLength);
+    }
+    const maxExecutionTime = (_a = options.timeout) !== null && _a !== undefined ? _a : Infinity;
+    const abortAfterTimestamp = Date.now() + maxExecutionTime;
+    const bestPath = [{ oldPos: -1, lastComponent: undefined }];
+    let newPos = this.extractCommon(bestPath[0], newTokens, oldTokens, 0, options);
+    if (bestPath[0].oldPos + 1 >= oldLen && newPos + 1 >= newLen) {
+      return done(this.buildValues(bestPath[0].lastComponent, newTokens, oldTokens));
+    }
+    let minDiagonalToConsider = -Infinity, maxDiagonalToConsider = Infinity;
+    const execEditLength = () => {
+      for (let diagonalPath = Math.max(minDiagonalToConsider, -editLength);diagonalPath <= Math.min(maxDiagonalToConsider, editLength); diagonalPath += 2) {
+        let basePath;
+        const removePath = bestPath[diagonalPath - 1], addPath = bestPath[diagonalPath + 1];
+        if (removePath) {
+          bestPath[diagonalPath - 1] = undefined;
+        }
+        let canAdd = false;
+        if (addPath) {
+          const addPathNewPos = addPath.oldPos - diagonalPath;
+          canAdd = addPath && 0 <= addPathNewPos && addPathNewPos < newLen;
+        }
+        const canRemove = removePath && removePath.oldPos + 1 < oldLen;
+        if (!canAdd && !canRemove) {
+          bestPath[diagonalPath] = undefined;
+          continue;
+        }
+        if (!canRemove || canAdd && removePath.oldPos < addPath.oldPos) {
+          basePath = this.addToPath(addPath, true, false, 0, options);
+        } else {
+          basePath = this.addToPath(removePath, false, true, 1, options);
+        }
+        newPos = this.extractCommon(basePath, newTokens, oldTokens, diagonalPath, options);
+        if (basePath.oldPos + 1 >= oldLen && newPos + 1 >= newLen) {
+          return done(this.buildValues(basePath.lastComponent, newTokens, oldTokens)) || true;
+        } else {
+          bestPath[diagonalPath] = basePath;
+          if (basePath.oldPos + 1 >= oldLen) {
+            maxDiagonalToConsider = Math.min(maxDiagonalToConsider, diagonalPath - 1);
+          }
+          if (newPos + 1 >= newLen) {
+            minDiagonalToConsider = Math.max(minDiagonalToConsider, diagonalPath + 1);
+          }
+        }
+      }
+      editLength++;
+    };
+    if (callback) {
+      (function exec() {
+        setTimeout(function() {
+          if (editLength > maxEditLength || Date.now() > abortAfterTimestamp) {
+            return callback(undefined);
+          }
+          if (!execEditLength()) {
+            exec();
+          }
+        }, 0);
+      })();
+    } else {
+      while (editLength <= maxEditLength && Date.now() <= abortAfterTimestamp) {
+        const ret = execEditLength();
+        if (ret) {
+          return ret;
+        }
+      }
+    }
+  }
+  addToPath(path, added, removed, oldPosInc, options) {
+    const last = path.lastComponent;
+    if (last && !options.oneChangePerToken && last.added === added && last.removed === removed) {
+      return {
+        oldPos: path.oldPos + oldPosInc,
+        lastComponent: { count: last.count + 1, added, removed, previousComponent: last.previousComponent }
+      };
+    } else {
+      return {
+        oldPos: path.oldPos + oldPosInc,
+        lastComponent: { count: 1, added, removed, previousComponent: last }
+      };
+    }
+  }
+  extractCommon(basePath, newTokens, oldTokens, diagonalPath, options) {
+    const newLen = newTokens.length, oldLen = oldTokens.length;
+    let oldPos = basePath.oldPos, newPos = oldPos - diagonalPath, commonCount = 0;
+    while (newPos + 1 < newLen && oldPos + 1 < oldLen && this.equals(oldTokens[oldPos + 1], newTokens[newPos + 1], options)) {
+      newPos++;
+      oldPos++;
+      commonCount++;
+      if (options.oneChangePerToken) {
+        basePath.lastComponent = { count: 1, previousComponent: basePath.lastComponent, added: false, removed: false };
+      }
+    }
+    if (commonCount && !options.oneChangePerToken) {
+      basePath.lastComponent = { count: commonCount, previousComponent: basePath.lastComponent, added: false, removed: false };
+    }
+    basePath.oldPos = oldPos;
+    return newPos;
+  }
+  equals(left, right, options) {
+    if (options.comparator) {
+      return options.comparator(left, right);
+    } else {
+      return left === right || !!options.ignoreCase && left.toLowerCase() === right.toLowerCase();
+    }
+  }
+  removeEmpty(array) {
+    const ret = [];
+    for (let i = 0;i < array.length; i++) {
+      if (array[i]) {
+        ret.push(array[i]);
+      }
+    }
+    return ret;
+  }
+  castInput(value, options) {
+    return value;
+  }
+  tokenize(value, options) {
+    return Array.from(value);
+  }
+  join(chars) {
+    return chars.join("");
+  }
+  postProcess(changeObjects, options) {
+    return changeObjects;
+  }
+  get useLongestToken() {
+    return false;
+  }
+  buildValues(lastComponent, newTokens, oldTokens) {
+    const components = [];
+    let nextComponent;
+    while (lastComponent) {
+      components.push(lastComponent);
+      nextComponent = lastComponent.previousComponent;
+      delete lastComponent.previousComponent;
+      lastComponent = nextComponent;
+    }
+    components.reverse();
+    const componentLen = components.length;
+    let componentPos = 0, newPos = 0, oldPos = 0;
+    for (;componentPos < componentLen; componentPos++) {
+      const component = components[componentPos];
+      if (!component.removed) {
+        if (!component.added && this.useLongestToken) {
+          let value = newTokens.slice(newPos, newPos + component.count);
+          value = value.map(function(value2, i) {
+            const oldValue = oldTokens[oldPos + i];
+            return oldValue.length > value2.length ? oldValue : value2;
+          });
+          component.value = this.join(value);
+        } else {
+          component.value = this.join(newTokens.slice(newPos, newPos + component.count));
+        }
+        newPos += component.count;
+        if (!component.added) {
+          oldPos += component.count;
+        }
+      } else {
+        component.value = this.join(oldTokens.slice(oldPos, oldPos + component.count));
+        oldPos += component.count;
+      }
+    }
+    return components;
+  }
+}
+
+// ../../node_modules/diff/libesm/diff/character.js
+class CharacterDiff extends Diff {
+}
+var characterDiff = new CharacterDiff;
+
+// ../../node_modules/diff/libesm/util/string.js
+function longestCommonPrefix(str1, str2) {
+  let i;
+  for (i = 0;i < str1.length && i < str2.length; i++) {
+    if (str1[i] != str2[i]) {
+      return str1.slice(0, i);
+    }
+  }
+  return str1.slice(0, i);
+}
+function longestCommonSuffix(str1, str2) {
+  let i;
+  if (!str1 || !str2 || str1[str1.length - 1] != str2[str2.length - 1]) {
+    return "";
+  }
+  for (i = 0;i < str1.length && i < str2.length; i++) {
+    if (str1[str1.length - (i + 1)] != str2[str2.length - (i + 1)]) {
+      return str1.slice(-i);
+    }
+  }
+  return str1.slice(-i);
+}
+function replacePrefix(string, oldPrefix, newPrefix) {
+  if (string.slice(0, oldPrefix.length) != oldPrefix) {
+    throw Error(`string ${JSON.stringify(string)} doesn't start with prefix ${JSON.stringify(oldPrefix)}; this is a bug`);
+  }
+  return newPrefix + string.slice(oldPrefix.length);
+}
+function replaceSuffix(string, oldSuffix, newSuffix) {
+  if (!oldSuffix) {
+    return string + newSuffix;
+  }
+  if (string.slice(-oldSuffix.length) != oldSuffix) {
+    throw Error(`string ${JSON.stringify(string)} doesn't end with suffix ${JSON.stringify(oldSuffix)}; this is a bug`);
+  }
+  return string.slice(0, -oldSuffix.length) + newSuffix;
+}
+function removePrefix(string, oldPrefix) {
+  return replacePrefix(string, oldPrefix, "");
+}
+function removeSuffix(string, oldSuffix) {
+  return replaceSuffix(string, oldSuffix, "");
+}
+function maximumOverlap(string1, string2) {
+  return string2.slice(0, overlapCount(string1, string2));
+}
+function overlapCount(a, b) {
+  let startA = 0;
+  if (a.length > b.length) {
+    startA = a.length - b.length;
+  }
+  let endB = b.length;
+  if (a.length < b.length) {
+    endB = a.length;
+  }
+  const map = Array(endB);
+  let k = 0;
+  map[0] = 0;
+  for (let j = 1;j < endB; j++) {
+    if (b[j] == b[k]) {
+      map[j] = map[k];
+    } else {
+      map[j] = k;
+    }
+    while (k > 0 && b[j] != b[k]) {
+      k = map[k];
+    }
+    if (b[j] == b[k]) {
+      k++;
+    }
+  }
+  k = 0;
+  for (let i = startA;i < a.length; i++) {
+    while (k > 0 && a[i] != b[k]) {
+      k = map[k];
+    }
+    if (a[i] == b[k]) {
+      k++;
+    }
+  }
+  return k;
+}
+function trailingWs(string) {
+  let i;
+  for (i = string.length - 1;i >= 0; i--) {
+    if (!string[i].match(/\s/)) {
+      break;
+    }
+  }
+  return string.substring(i + 1);
+}
+function leadingWs(string) {
+  const match = string.match(/^\s*/);
+  return match ? match[0] : "";
+}
+
+// ../../node_modules/diff/libesm/diff/word.js
+var extendedWordChars = "a-zA-Z0-9_\\u{C0}-\\u{FF}\\u{D8}-\\u{F6}\\u{F8}-\\u{2C6}\\u{2C8}-\\u{2D7}\\u{2DE}-\\u{2FF}\\u{1E00}-\\u{1EFF}";
+var tokenizeIncludingWhitespace = new RegExp(`[${extendedWordChars}]+|\\s+|[^${extendedWordChars}]`, "ug");
+
+class WordDiff extends Diff {
+  equals(left, right, options) {
+    if (options.ignoreCase) {
+      left = left.toLowerCase();
+      right = right.toLowerCase();
+    }
+    return left.trim() === right.trim();
+  }
+  tokenize(value, options = {}) {
+    let parts;
+    if (options.intlSegmenter) {
+      const segmenter = options.intlSegmenter;
+      if (segmenter.resolvedOptions().granularity != "word") {
+        throw new Error('The segmenter passed must have a granularity of "word"');
+      }
+      parts = Array.from(segmenter.segment(value), (segment) => segment.segment);
+    } else {
+      parts = value.match(tokenizeIncludingWhitespace) || [];
+    }
+    const tokens = [];
+    let prevPart = null;
+    parts.forEach((part) => {
+      if (/\s/.test(part)) {
+        if (prevPart == null) {
+          tokens.push(part);
+        } else {
+          tokens.push(tokens.pop() + part);
+        }
+      } else if (prevPart != null && /\s/.test(prevPart)) {
+        if (tokens[tokens.length - 1] == prevPart) {
+          tokens.push(tokens.pop() + part);
+        } else {
+          tokens.push(prevPart + part);
+        }
+      } else {
+        tokens.push(part);
+      }
+      prevPart = part;
+    });
+    return tokens;
+  }
+  join(tokens) {
+    return tokens.map((token, i) => {
+      if (i == 0) {
+        return token;
+      } else {
+        return token.replace(/^\s+/, "");
+      }
+    }).join("");
+  }
+  postProcess(changes, options) {
+    if (!changes || options.oneChangePerToken) {
+      return changes;
+    }
+    let lastKeep = null;
+    let insertion = null;
+    let deletion = null;
+    changes.forEach((change) => {
+      if (change.added) {
+        insertion = change;
+      } else if (change.removed) {
+        deletion = change;
+      } else {
+        if (insertion || deletion) {
+          dedupeWhitespaceInChangeObjects(lastKeep, deletion, insertion, change);
+        }
+        lastKeep = change;
+        insertion = null;
+        deletion = null;
+      }
+    });
+    if (insertion || deletion) {
+      dedupeWhitespaceInChangeObjects(lastKeep, deletion, insertion, null);
+    }
+    return changes;
+  }
+}
+var wordDiff = new WordDiff;
+function dedupeWhitespaceInChangeObjects(startKeep, deletion, insertion, endKeep) {
+  if (deletion && insertion) {
+    const oldWsPrefix = leadingWs(deletion.value);
+    const oldWsSuffix = trailingWs(deletion.value);
+    const newWsPrefix = leadingWs(insertion.value);
+    const newWsSuffix = trailingWs(insertion.value);
+    if (startKeep) {
+      const commonWsPrefix = longestCommonPrefix(oldWsPrefix, newWsPrefix);
+      startKeep.value = replaceSuffix(startKeep.value, newWsPrefix, commonWsPrefix);
+      deletion.value = removePrefix(deletion.value, commonWsPrefix);
+      insertion.value = removePrefix(insertion.value, commonWsPrefix);
+    }
+    if (endKeep) {
+      const commonWsSuffix = longestCommonSuffix(oldWsSuffix, newWsSuffix);
+      endKeep.value = replacePrefix(endKeep.value, newWsSuffix, commonWsSuffix);
+      deletion.value = removeSuffix(deletion.value, commonWsSuffix);
+      insertion.value = removeSuffix(insertion.value, commonWsSuffix);
+    }
+  } else if (insertion) {
+    if (startKeep) {
+      const ws = leadingWs(insertion.value);
+      insertion.value = insertion.value.substring(ws.length);
+    }
+    if (endKeep) {
+      const ws = leadingWs(endKeep.value);
+      endKeep.value = endKeep.value.substring(ws.length);
+    }
+  } else if (startKeep && endKeep) {
+    const newWsFull = leadingWs(endKeep.value), delWsStart = leadingWs(deletion.value), delWsEnd = trailingWs(deletion.value);
+    const newWsStart = longestCommonPrefix(newWsFull, delWsStart);
+    deletion.value = removePrefix(deletion.value, newWsStart);
+    const newWsEnd = longestCommonSuffix(removePrefix(newWsFull, newWsStart), delWsEnd);
+    deletion.value = removeSuffix(deletion.value, newWsEnd);
+    endKeep.value = replacePrefix(endKeep.value, newWsFull, newWsEnd);
+    startKeep.value = replaceSuffix(startKeep.value, newWsFull, newWsFull.slice(0, newWsFull.length - newWsEnd.length));
+  } else if (endKeep) {
+    const endKeepWsPrefix = leadingWs(endKeep.value);
+    const deletionWsSuffix = trailingWs(deletion.value);
+    const overlap = maximumOverlap(deletionWsSuffix, endKeepWsPrefix);
+    deletion.value = removeSuffix(deletion.value, overlap);
+  } else if (startKeep) {
+    const startKeepWsSuffix = trailingWs(startKeep.value);
+    const deletionWsPrefix = leadingWs(deletion.value);
+    const overlap = maximumOverlap(startKeepWsSuffix, deletionWsPrefix);
+    deletion.value = removePrefix(deletion.value, overlap);
+  }
+}
+
+class WordsWithSpaceDiff extends Diff {
+  tokenize(value) {
+    const regex = new RegExp(`(\\r?\\n)|[${extendedWordChars}]+|[^\\S\\n\\r]+|[^${extendedWordChars}]`, "ug");
+    return value.match(regex) || [];
+  }
+}
+var wordsWithSpaceDiff = new WordsWithSpaceDiff;
+
+// ../../node_modules/diff/libesm/diff/line.js
+class LineDiff extends Diff {
+  constructor() {
+    super(...arguments);
+    this.tokenize = tokenize;
+  }
+  equals(left, right, options) {
+    if (options.ignoreWhitespace) {
+      if (!options.newlineIsToken || !left.includes(`
+`)) {
+        left = left.trim();
+      }
+      if (!options.newlineIsToken || !right.includes(`
+`)) {
+        right = right.trim();
+      }
+    } else if (options.ignoreNewlineAtEof && !options.newlineIsToken) {
+      if (left.endsWith(`
+`)) {
+        left = left.slice(0, -1);
+      }
+      if (right.endsWith(`
+`)) {
+        right = right.slice(0, -1);
+      }
+    }
+    return super.equals(left, right, options);
+  }
+}
+var lineDiff = new LineDiff;
+function tokenize(value, options) {
+  if (options.stripTrailingCr) {
+    value = value.replace(/\r\n/g, `
+`);
+  }
+  const retLines = [], linesAndNewlines = value.split(/(\n|\r\n)/);
+  if (!linesAndNewlines[linesAndNewlines.length - 1]) {
+    linesAndNewlines.pop();
+  }
+  for (let i = 0;i < linesAndNewlines.length; i++) {
+    const line = linesAndNewlines[i];
+    if (i % 2 && !options.newlineIsToken) {
+      retLines[retLines.length - 1] += line;
+    } else {
+      retLines.push(line);
+    }
+  }
+  return retLines;
+}
+
+// ../../node_modules/diff/libesm/diff/sentence.js
+function isSentenceEndPunct(char) {
+  return char == "." || char == "!" || char == "?";
+}
+
+class SentenceDiff extends Diff {
+  tokenize(value) {
+    var _a;
+    const result = [];
+    let tokenStartI = 0;
+    for (let i = 0;i < value.length; i++) {
+      if (i == value.length - 1) {
+        result.push(value.slice(tokenStartI));
+        break;
+      }
+      if (isSentenceEndPunct(value[i]) && value[i + 1].match(/\s/)) {
+        result.push(value.slice(tokenStartI, i + 1));
+        i = tokenStartI = i + 1;
+        while ((_a = value[i + 1]) === null || _a === undefined ? undefined : _a.match(/\s/)) {
+          i++;
+        }
+        result.push(value.slice(tokenStartI, i + 1));
+        tokenStartI = i + 1;
+      }
+    }
+    return result;
+  }
+}
+var sentenceDiff = new SentenceDiff;
+
+// ../../node_modules/diff/libesm/diff/css.js
+class CssDiff extends Diff {
+  tokenize(value) {
+    return value.split(/([{}:;,]|\s+)/);
+  }
+}
+var cssDiff = new CssDiff;
+
+// ../../node_modules/diff/libesm/diff/json.js
+class JsonDiff extends Diff {
+  constructor() {
+    super(...arguments);
+    this.tokenize = tokenize;
+  }
+  get useLongestToken() {
+    return true;
+  }
+  castInput(value, options) {
+    const { undefinedReplacement, stringifyReplacer = (k, v) => typeof v === "undefined" ? undefinedReplacement : v } = options;
+    return typeof value === "string" ? value : JSON.stringify(canonicalize(value, null, null, stringifyReplacer), null, "  ");
+  }
+  equals(left, right, options) {
+    return super.equals(left.replace(/,([\r\n])/g, "$1"), right.replace(/,([\r\n])/g, "$1"), options);
+  }
+}
+var jsonDiff = new JsonDiff;
+function canonicalize(obj, stack, replacementStack, replacer, key) {
+  stack = stack || [];
+  replacementStack = replacementStack || [];
+  if (replacer) {
+    obj = replacer(key === undefined ? "" : key, obj);
+  }
+  let i;
+  for (i = 0;i < stack.length; i += 1) {
+    if (stack[i] === obj) {
+      return replacementStack[i];
+    }
+  }
+  let canonicalizedObj;
+  if (Object.prototype.toString.call(obj) === "[object Array]") {
+    stack.push(obj);
+    canonicalizedObj = new Array(obj.length);
+    replacementStack.push(canonicalizedObj);
+    for (i = 0;i < obj.length; i += 1) {
+      canonicalizedObj[i] = canonicalize(obj[i], stack, replacementStack, replacer, String(i));
+    }
+    stack.pop();
+    replacementStack.pop();
+    return canonicalizedObj;
+  }
+  if (obj && obj.toJSON) {
+    obj = obj.toJSON();
+  }
+  if (typeof obj === "object" && obj !== null) {
+    stack.push(obj);
+    canonicalizedObj = {};
+    replacementStack.push(canonicalizedObj);
+    const sortedKeys = [];
+    let key2;
+    for (key2 in obj) {
+      if (Object.prototype.hasOwnProperty.call(obj, key2)) {
+        sortedKeys.push(key2);
+      }
+    }
+    sortedKeys.sort();
+    for (i = 0;i < sortedKeys.length; i += 1) {
+      key2 = sortedKeys[i];
+      canonicalizedObj[key2] = canonicalize(obj[key2], stack, replacementStack, replacer, key2);
+    }
+    stack.pop();
+    replacementStack.pop();
+  } else {
+    canonicalizedObj = obj;
+  }
+  return canonicalizedObj;
+}
+
+// ../../node_modules/diff/libesm/diff/array.js
+class ArrayDiff extends Diff {
+  tokenize(value) {
+    return value.slice();
+  }
+  join(value) {
+    return value;
+  }
+  removeEmpty(value) {
+    return value;
+  }
+}
+var arrayDiff = new ArrayDiff;
+
+// ../../node_modules/diff/libesm/patch/parse.js
+function parsePatch(uniDiff) {
+  const diffstr = uniDiff.split(/\n/), list = [];
+  let i = 0;
+  function parseIndex() {
+    const index = {};
+    list.push(index);
+    while (i < diffstr.length) {
+      const line = diffstr[i];
+      if (/^(---|\+\+\+|@@)\s/.test(line)) {
+        break;
+      }
+      const header = /^(?:Index:|diff(?: -r \w+)+)\s+(.+?)\s*$/.exec(line);
+      if (header) {
+        index.index = header[1];
+      }
+      i++;
+    }
+    parseFileHeader(index);
+    parseFileHeader(index);
+    index.hunks = [];
+    while (i < diffstr.length) {
+      const line = diffstr[i];
+      if (/^(Index:\s|diff\s|---\s|\+\+\+\s|===================================================================)/.test(line)) {
+        break;
+      } else if (/^@@/.test(line)) {
+        index.hunks.push(parseHunk());
+      } else if (line) {
+        throw new Error("Unknown line " + (i + 1) + " " + JSON.stringify(line));
+      } else {
+        i++;
+      }
+    }
+  }
+  function parseFileHeader(index) {
+    const fileHeader = /^(---|\+\+\+)\s+(.*)\r?$/.exec(diffstr[i]);
+    if (fileHeader) {
+      const data = fileHeader[2].split("\t", 2), header = (data[1] || "").trim();
+      let fileName = data[0].replace(/\\\\/g, "\\");
+      if (/^".*"$/.test(fileName)) {
+        fileName = fileName.substr(1, fileName.length - 2);
+      }
+      if (fileHeader[1] === "---") {
+        index.oldFileName = fileName;
+        index.oldHeader = header;
+      } else {
+        index.newFileName = fileName;
+        index.newHeader = header;
+      }
+      i++;
+    }
+  }
+  function parseHunk() {
+    var _a;
+    const chunkHeaderIndex = i, chunkHeaderLine = diffstr[i++], chunkHeader = chunkHeaderLine.split(/@@ -(\d+)(?:,(\d+))? \+(\d+)(?:,(\d+))? @@/);
+    const hunk = {
+      oldStart: +chunkHeader[1],
+      oldLines: typeof chunkHeader[2] === "undefined" ? 1 : +chunkHeader[2],
+      newStart: +chunkHeader[3],
+      newLines: typeof chunkHeader[4] === "undefined" ? 1 : +chunkHeader[4],
+      lines: []
+    };
+    if (hunk.oldLines === 0) {
+      hunk.oldStart += 1;
+    }
+    if (hunk.newLines === 0) {
+      hunk.newStart += 1;
+    }
+    let addCount = 0, removeCount = 0;
+    for (;i < diffstr.length && (removeCount < hunk.oldLines || addCount < hunk.newLines || ((_a = diffstr[i]) === null || _a === undefined ? undefined : _a.startsWith("\\"))); i++) {
+      const operation = diffstr[i].length == 0 && i != diffstr.length - 1 ? " " : diffstr[i][0];
+      if (operation === "+" || operation === "-" || operation === " " || operation === "\\") {
+        hunk.lines.push(diffstr[i]);
+        if (operation === "+") {
+          addCount++;
+        } else if (operation === "-") {
+          removeCount++;
+        } else if (operation === " ") {
+          addCount++;
+          removeCount++;
+        }
+      } else {
+        throw new Error(`Hunk at line ${chunkHeaderIndex + 1} contained invalid line ${diffstr[i]}`);
+      }
+    }
+    if (!addCount && hunk.newLines === 1) {
+      hunk.newLines = 0;
+    }
+    if (!removeCount && hunk.oldLines === 1) {
+      hunk.oldLines = 0;
+    }
+    if (addCount !== hunk.newLines) {
+      throw new Error("Added line count did not match for hunk at line " + (chunkHeaderIndex + 1));
+    }
+    if (removeCount !== hunk.oldLines) {
+      throw new Error("Removed line count did not match for hunk at line " + (chunkHeaderIndex + 1));
+    }
+    return hunk;
+  }
+  while (i < diffstr.length) {
+    parseIndex();
+  }
+  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;
+  _showLineNumbers;
+  _lineNumberFg;
+  _lineNumberBg;
+  _addedBg;
+  _removedBg;
+  _contextBg;
+  _addedContentBg;
+  _removedContentBg;
+  _contextContentBg;
+  _addedSignColor;
+  _removedSignColor;
+  _addedLineNumberBg;
+  _removedLineNumberBg;
+  leftSide = null;
+  rightSide = null;
+  leftSideAdded = false;
+  rightSideAdded = false;
+  leftCodeRenderable = null;
+  rightCodeRenderable = null;
+  pendingRebuild = false;
+  errorTextRenderable = null;
+  errorCodeRenderable = null;
+  constructor(ctx, options) {
+    super(ctx, {
+      ...options,
+      flexDirection: options.view === "split" ? "row" : "column"
+    });
+    this._diff = options.diff ?? "";
+    this._view = options.view ?? "unified";
+    this._filetype = options.filetype;
+    this._syntaxStyle = options.syntaxStyle;
+    this._wrapMode = options.wrapMode;
+    this._conceal = options.conceal ?? true;
+    this._selectionBg = options.selectionBg ? parseColor(options.selectionBg) : undefined;
+    this._selectionFg = options.selectionFg ? parseColor(options.selectionFg) : undefined;
+    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();
+    }
+  }
+  parseDiff() {
+    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));
+    }
+  }
+  buildView() {
+    if (this._parseError) {
+      this.buildErrorView();
+      return;
+    }
+    if (!this._parsedDiff || this._parsedDiff.hunks.length === 0) {
+      return;
+    }
+    if (this._view === "unified") {
+      this.buildUnifiedView();
+    } else {
+      this.buildSplitView();
+    }
+  }
+  onResize(width, height) {
+    super.onResize(width, height);
+    if (this._view === "split" && this._wrapMode !== "none" && this._wrapMode !== undefined) {
+      this.requestRebuild();
+    }
+  }
+  requestRebuild() {
+    if (this.pendingRebuild) {
+      return;
+    }
+    this.pendingRebuild = true;
+    queueMicrotask(() => {
+      if (!this.isDestroyed && this.pendingRebuild) {
+        this.pendingRebuild = false;
+        this.buildView();
+        this.requestRender();
+      }
+    });
+  }
+  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
+      });
+      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 }
+      };
+      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";
+      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;
+    const lineNumbers = new Map;
+    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 content2 = line.slice(1);
+        if (firstChar === "+") {
+          contentLines.push(content2);
+          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
+          });
+          lineNumbers.set(lineIndex, newLineNum);
+          newLineNum++;
+          lineIndex++;
+        } else if (firstChar === "-") {
+          contentLines.push(content2);
+          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
+          });
+          lineNumbers.set(lineIndex, oldLineNum);
+          oldLineNum++;
+          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++;
+          lineIndex++;
+        }
+      }
+    }
+    const content = contentLines.join(`
+`);
+    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;
+    }
+  }
+  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) {
+      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 = [];
+          const adds = [];
+          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(`
+`);
+    const preRightContent = rightLogicalLines.map((l) => l.content).join(`
+`);
+    const effectiveWrapMode = canDoWrapAlignment ? this._wrapMode : "none";
+    const leftCodeRenderable = this.createOrUpdateCodeRenderable("left", preLeftContent, effectiveWrapMode, true);
+    const rightCodeRenderable = this.createOrUpdateCodeRenderable("right", preRightContent, effectiveWrapMode, true);
+    let finalLeftLines;
+    let finalRightLines;
+    if (canDoWrapAlignment) {
+      const leftLineInfo = leftCodeRenderable.lineInfo;
+      const rightLineInfo = rightCodeRenderable.lineInfo;
+      const leftSources = leftLineInfo.lineSources || [];
+      const rightSources = rightLineInfo.lineSources || [];
+      const leftVisualCounts = new Map;
+      const rightVisualCounts = new Map;
+      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;
+    const rightLineColors = new Map;
+    const leftLineSigns = new Map;
+    const rightLineSigns = new Map;
+    const leftHideLineNumbers = new Set;
+    const rightHideLineNumbers = new Set;
+    const leftLineNumbers = new Map;
+    const rightLineNumbers = new Map;
+    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 = {
+          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);
+      }
+    });
+    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 = {
+          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);
+      }
+    });
+    const leftContentFinal = finalLeftLines.map((l) => l.content).join(`
+`);
+    const rightContentFinal = finalRightLines.map((l) => l.content).join(`
+`);
+    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;
+  }
+  set diff(value) {
+    if (this._diff !== value) {
+      this._diff = value;
+      this.parseDiff();
+      this.rebuildView();
+    }
+  }
+  get view() {
+    return this._view;
+  }
+  set view(value) {
+    if (this._view !== value) {
+      this._view = value;
+      this.flexDirection = value === "split" ? "row" : "column";
+      this.buildView();
+    }
+  }
+  get filetype() {
+    return this._filetype;
+  }
+  set filetype(value) {
+    if (this._filetype !== value) {
+      this._filetype = value;
+      this.rebuildView();
+    }
+  }
+  get syntaxStyle() {
+    return this._syntaxStyle;
+  }
+  set syntaxStyle(value) {
+    if (this._syntaxStyle !== value) {
+      this._syntaxStyle = value;
+      this.rebuildView();
+    }
+  }
+  get wrapMode() {
+    return this._wrapMode;
+  }
+  set wrapMode(value) {
+    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();
+      }
+    }
+  }
+  get showLineNumbers() {
+    return this._showLineNumbers;
+  }
+  set showLineNumbers(value) {
+    if (this._showLineNumbers !== value) {
+      this._showLineNumbers = value;
+      if (this.leftSide) {
+        this.leftSide.showLineNumbers = value;
+      }
+      if (this.rightSide) {
+        this.rightSide.showLineNumbers = value;
+      }
+    }
+  }
+  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;
+      }
+    }
+  }
+}
+// src/renderables/Input.ts
+var InputRenderableEvents;
+((InputRenderableEvents2) => {
+  InputRenderableEvents2["INPUT"] = "input";
+  InputRenderableEvents2["CHANGE"] = "change";
+  InputRenderableEvents2["ENTER"] = "enter";
+})(InputRenderableEvents ||= {});
+
+class InputRenderable extends Renderable {
+  _focusable = true;
+  _value = "";
+  _cursorPosition = 0;
+  _placeholder;
+  _backgroundColor;
+  _textColor;
+  _focusedBackgroundColor;
+  _focusedTextColor;
+  _placeholderColor;
+  _cursorColor;
+  _cursorStyle;
+  _maxLength;
+  _lastCommittedValue = "";
+  _defaultOptions = {
+    backgroundColor: "transparent",
+    textColor: "#FFFFFF",
+    focusedBackgroundColor: "#1a1a1a",
+    focusedTextColor: "#FFFFFF",
+    placeholder: "",
+    placeholderColor: "#666666",
+    cursorColor: "#FFFFFF",
+    cursorStyle: {
+      style: "block",
+      blinking: true
+    },
+    maxLength: 1000,
+    value: ""
+  };
+  constructor(ctx, options) {
+    super(ctx, { ...options, buffered: true });
+    this._backgroundColor = parseColor(options.backgroundColor || this._defaultOptions.backgroundColor);
+    this._textColor = parseColor(options.textColor || this._defaultOptions.textColor);
+    this._focusedBackgroundColor = parseColor(options.focusedBackgroundColor || options.backgroundColor || this._defaultOptions.focusedBackgroundColor);
+    this._focusedTextColor = parseColor(options.focusedTextColor || options.textColor || this._defaultOptions.focusedTextColor);
+    this._placeholder = options.placeholder || this._defaultOptions.placeholder;
+    this._value = options.value || this._defaultOptions.value;
+    this._lastCommittedValue = this._value;
+    this._cursorPosition = this._value.length;
+    this._maxLength = options.maxLength || this._defaultOptions.maxLength;
+    this._placeholderColor = parseColor(options.placeholderColor || this._defaultOptions.placeholderColor);
+    this._cursorColor = parseColor(options.cursorColor || this._defaultOptions.cursorColor);
+    this._cursorStyle = options.cursorStyle || this._defaultOptions.cursorStyle;
+  }
+  updateCursorPosition() {
+    if (!this._focused)
+      return;
+    const contentX = 0;
+    const contentY = 0;
+    const contentWidth = this.width;
+    const maxVisibleChars = contentWidth - 1;
+    let displayStartIndex = 0;
+    if (this._cursorPosition >= maxVisibleChars) {
+      displayStartIndex = this._cursorPosition - maxVisibleChars + 1;
+    }
+    const cursorDisplayX = this._cursorPosition - displayStartIndex;
+    if (cursorDisplayX >= 0 && cursorDisplayX < contentWidth) {
+      const absoluteCursorX = this.x + contentX + cursorDisplayX + 1;
+      const absoluteCursorY = this.y + contentY + 1;
+      this._ctx.setCursorPosition(absoluteCursorX, absoluteCursorY, true);
+      this._ctx.setCursorColor(this._cursorColor);
+    }
+  }
+  focus() {
+    super.focus();
+    this._ctx.setCursorStyle(this._cursorStyle.style, this._cursorStyle.blinking);
+    this._ctx.setCursorColor(this._cursorColor);
+    this.updateCursorPosition();
+  }
+  blur() {
+    super.blur();
+    this._ctx.setCursorPosition(0, 0, false);
+    if (this._value !== this._lastCommittedValue) {
+      this._lastCommittedValue = this._value;
+      this.emit("change" /* CHANGE */, this._value);
+    }
+  }
+  renderSelf(buffer, deltaTime) {
+    if (!this.visible || !this.frameBuffer)
+      return;
+    if (this.isDirty) {
+      this.refreshFrameBuffer();
+    }
+  }
+  refreshFrameBuffer() {
+    if (!this.frameBuffer)
+      return;
+    const bgColor = this._focused ? this._focusedBackgroundColor : this._backgroundColor;
+    this.frameBuffer.clear(bgColor);
+    const contentX = 0;
+    const contentY = 0;
+    const contentWidth = this.width;
+    const contentHeight = this.height;
+    const displayText = this._value || this._placeholder;
+    const isPlaceholder = !this._value && this._placeholder;
+    const baseTextColor = this._focused ? this._focusedTextColor : this._textColor;
+    const textColor = isPlaceholder ? this._placeholderColor : baseTextColor;
+    const maxVisibleChars = contentWidth - 1;
+    let displayStartIndex = 0;
+    if (this._cursorPosition >= maxVisibleChars) {
+      displayStartIndex = this._cursorPosition - maxVisibleChars + 1;
+    }
+    const visibleText = displayText.substring(displayStartIndex, displayStartIndex + maxVisibleChars);
+    if (visibleText) {
+      this.frameBuffer.drawText(visibleText, contentX, contentY, textColor);
+    }
+    if (this._focused) {
+      this.updateCursorPosition();
+    }
+  }
+  get value() {
+    return this._value;
+  }
+  set value(value) {
+    const newValue = value.substring(0, this._maxLength);
+    if (this._value !== newValue) {
+      this._value = newValue;
+      this._cursorPosition = Math.min(this._cursorPosition, this._value.length);
+      this.requestRender();
+      this.updateCursorPosition();
+      this.emit("input" /* INPUT */, this._value);
+    }
+  }
+  set placeholder(placeholder) {
+    if (this._placeholder !== placeholder) {
+      this._placeholder = placeholder;
+      this.requestRender();
+    }
+  }
+  get cursorPosition() {
+    return this._cursorPosition;
+  }
+  set cursorPosition(position) {
+    const newPosition = Math.max(0, Math.min(position, this._value.length));
+    if (this._cursorPosition !== newPosition) {
+      this._cursorPosition = newPosition;
+      this.requestRender();
+      this.updateCursorPosition();
+    }
+  }
+  insertText(text) {
+    if (this._value.length + text.length > this._maxLength) {
+      return;
+    }
+    const beforeCursor = this._value.substring(0, this._cursorPosition);
+    const afterCursor = this._value.substring(this._cursorPosition);
+    this._value = beforeCursor + text + afterCursor;
+    this._cursorPosition += text.length;
+    this.requestRender();
+    this.updateCursorPosition();
+    this.emit("input" /* INPUT */, this._value);
+  }
+  deleteCharacter(direction) {
+    if (direction === "backward" && this._cursorPosition > 0) {
+      const beforeCursor = this._value.substring(0, this._cursorPosition - 1);
+      const afterCursor = this._value.substring(this._cursorPosition);
       this._value = beforeCursor + afterCursor;
       this._cursorPosition--;
       this.requestRender();
@@ -5263,101 +7467,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;
@@ -5375,6 +7484,7 @@ class EditBufferRenderable extends Renderable {
   lastLocalSelection = null;
   _tabIndicator;
   _tabIndicatorColor;
+  _selectionAnchorState = null;
   _cursorChangeListener = undefined;
   _contentChangeListener = undefined;
   editBuffer;
@@ -5431,6 +7541,9 @@ class EditBufferRenderable extends Renderable {
     this.setupMeasureFunc();
     this.setupEventListeners(options);
   }
+  get lineInfo() {
+    return this.editorView.getLogicalLineInfo();
+  }
   setupEventListeners(options) {
     this._cursorChangeListener = options.onCursorChange;
     this._contentChangeListener = options.onContentChange;
@@ -5446,11 +7559,18 @@ class EditBufferRenderable extends Renderable {
     this.editBuffer.on("content-changed", () => {
       this.yogaNode.markDirty();
       this.requestRender();
+      this.emit("line-info-change");
       if (this._contentChangeListener) {
         this._contentChangeListener({});
       }
     });
   }
+  get lineCount() {
+    return this.editBuffer.getLineCount();
+  }
+  get scrollY() {
+    return this.editorView.getViewport().offsetY;
+  }
   get plainText() {
     return this.editBuffer.getText();
   }
@@ -5643,19 +7763,25 @@ class EditBufferRenderable extends Renderable {
   }
   setupMeasureFunc() {
     const measureFunc = (width, widthMode, height, heightMode) => {
-      const effectiveHeight = isNaN(height) ? 1 : height;
-      const effectiveWidth = isNaN(width) ? 1 : width;
-      if (this._wrapMode !== "none" && this.width !== effectiveWidth) {
-        this.editorView.setViewportSize(effectiveWidth, effectiveHeight);
+      let effectiveWidth;
+      if (widthMode === MeasureMode.Undefined || isNaN(width)) {
+        effectiveWidth = 0;
       } else {
-        this.editorView.setViewportSize(effectiveWidth, effectiveHeight);
+        effectiveWidth = width;
+      }
+      const effectiveHeight = isNaN(height) ? 1 : height;
+      const measureResult = this.editorView.measureForDimensions(Math.floor(effectiveWidth), Math.floor(effectiveHeight));
+      const measuredWidth = measureResult ? Math.max(1, measureResult.maxWidth) : 1;
+      const measuredHeight = measureResult ? Math.max(1, measureResult.lineCount) : 1;
+      if (widthMode === MeasureMode.AtMost && this._positionType !== "absolute") {
+        return {
+          width: Math.min(effectiveWidth, measuredWidth),
+          height: Math.min(effectiveHeight, measuredHeight)
+        };
       }
-      const lineInfo = this.editorView.getLogicalLineInfo();
-      const measuredWidth = lineInfo.maxLineWidth;
-      const measuredHeight = lineInfo.lineStarts.length;
       return {
-        width: Math.max(1, measuredWidth),
-        height: Math.max(1, measuredHeight)
+        width: measuredWidth,
+        height: measuredHeight
       };
     };
     this.yogaNode.setMeasureFunc(measureFunc);
@@ -5776,6 +7902,55 @@ class EditBufferRenderable extends Renderable {
   getTextRangeByCoords(startRow, startCol, endRow, endCol) {
     return this.editBuffer.getTextRangeByCoords(startRow, startCol, endRow, endCol);
   }
+  updateSelectionForMovement(shiftPressed, isBeforeMovement) {
+    if (!this.selectable)
+      return;
+    if (!shiftPressed) {
+      this._ctx.clearSelection();
+      this._selectionAnchorState = null;
+      return;
+    }
+    const visualCursor = this.editorView.getVisualCursor();
+    const viewport = this.editorView.getViewport();
+    const cursorX = this.x + visualCursor.visualCol;
+    const cursorY = this.y + visualCursor.visualRow;
+    if (isBeforeMovement) {
+      if (!this._ctx.hasSelection) {
+        this._ctx.startSelection(this, cursorX, cursorY);
+        this._selectionAnchorState = {
+          screenX: cursorX,
+          screenY: cursorY,
+          viewportX: viewport.offsetX,
+          viewportY: viewport.offsetY
+        };
+      } else if (!this._selectionAnchorState) {
+        const selection = this._ctx.getSelection();
+        if (selection && selection.isActive) {
+          this._selectionAnchorState = {
+            screenX: selection.anchor.x,
+            screenY: selection.anchor.y,
+            viewportX: viewport.offsetX,
+            viewportY: viewport.offsetY
+          };
+        }
+      }
+    } else {
+      if (this._selectionAnchorState) {
+        const deltaY = viewport.offsetY - this._selectionAnchorState.viewportY;
+        const deltaX = viewport.offsetX - this._selectionAnchorState.viewportX;
+        if (deltaY !== 0 || deltaX !== 0) {
+          const newAnchorX = this._selectionAnchorState.screenX - deltaX;
+          const newAnchorY = this._selectionAnchorState.screenY - deltaY;
+          this._ctx.startSelection(this, newAnchorX, newAnchorY);
+          this._ctx.updateSelection(this, cursorX, cursorY);
+        } else {
+          this._ctx.updateSelection(this, cursorX, cursorY);
+        }
+      } else {
+        this._ctx.updateSelection(this, cursorX, cursorY);
+      }
+    }
+  }
 }
 
 // src/lib/keymapping.ts
@@ -5813,12 +7988,12 @@ var defaultTextareaKeybindings = [
   { name: "right", shift: true, action: "select-right" },
   { name: "up", shift: true, action: "select-up" },
   { name: "down", shift: true, action: "select-down" },
-  { name: "home", action: "line-home" },
-  { name: "end", action: "line-end" },
-  { name: "home", shift: true, action: "select-line-home" },
-  { name: "end", shift: true, action: "select-line-end" },
-  { name: "a", ctrl: true, action: "buffer-home" },
-  { name: "e", ctrl: true, action: "buffer-end" },
+  { name: "home", action: "buffer-home" },
+  { name: "end", action: "buffer-end" },
+  { name: "home", shift: true, action: "select-buffer-home" },
+  { name: "end", shift: true, action: "select-buffer-end" },
+  { name: "a", ctrl: true, action: "line-home" },
+  { name: "e", ctrl: true, action: "line-end" },
   { name: "f", ctrl: true, action: "move-right" },
   { name: "b", ctrl: true, action: "move-left" },
   { name: "d", ctrl: true, action: "delete-word-forward" },
@@ -5916,6 +8091,8 @@ class TextareaRenderable extends EditBufferRenderable {
       ["line-end", () => this.gotoLineEnd()],
       ["select-line-home", () => this.gotoLineHome({ select: true })],
       ["select-line-end", () => this.gotoLineEnd({ select: true })],
+      ["select-buffer-home", () => this.gotoBufferHome({ select: true })],
+      ["select-buffer-end", () => this.gotoBufferEnd({ select: true })],
       ["buffer-home", () => this.gotoBufferHome()],
       ["buffer-end", () => this.gotoBufferEnd()],
       ["delete-line", () => this.deleteLine()],
@@ -6032,33 +8209,33 @@ class TextareaRenderable extends EditBufferRenderable {
   }
   moveCursorLeft(options) {
     const select = options?.select ?? false;
-    this.handleShiftSelection(select, true);
+    this.updateSelectionForMovement(select, true);
     this.editBuffer.moveCursorLeft();
-    this.handleShiftSelection(select, false);
+    this.updateSelectionForMovement(select, false);
     this.requestRender();
     return true;
   }
   moveCursorRight(options) {
     const select = options?.select ?? false;
-    this.handleShiftSelection(select, true);
+    this.updateSelectionForMovement(select, true);
     this.editBuffer.moveCursorRight();
-    this.handleShiftSelection(select, false);
+    this.updateSelectionForMovement(select, false);
     this.requestRender();
     return true;
   }
   moveCursorUp(options) {
     const select = options?.select ?? false;
-    this.handleShiftSelection(select, true);
+    this.updateSelectionForMovement(select, true);
     this.editorView.moveUpVisual();
-    this.handleShiftSelection(select, false);
+    this.updateSelectionForMovement(select, false);
     this.requestRender();
     return true;
   }
   moveCursorDown(options) {
     const select = options?.select ?? false;
-    this.handleShiftSelection(select, true);
+    this.updateSelectionForMovement(select, true);
     this.editorView.moveDownVisual();
-    this.handleShiftSelection(select, false);
+    this.updateSelectionForMovement(select, false);
     this.requestRender();
     return true;
   }
@@ -6068,29 +8245,35 @@ class TextareaRenderable extends EditBufferRenderable {
   }
   gotoLineHome(options) {
     const select = options?.select ?? false;
-    this.handleShiftSelection(select, true);
+    this.updateSelectionForMovement(select, true);
     const cursor = this.editorView.getCursor();
     this.editBuffer.setCursor(cursor.row, 0);
-    this.handleShiftSelection(select, false);
+    this.updateSelectionForMovement(select, false);
     this.requestRender();
     return true;
   }
   gotoLineEnd(options) {
     const select = options?.select ?? false;
-    this.handleShiftSelection(select, true);
+    this.updateSelectionForMovement(select, true);
     const eol = this.editBuffer.getEOL();
     this.editBuffer.setCursor(eol.row, eol.col);
-    this.handleShiftSelection(select, false);
+    this.updateSelectionForMovement(select, false);
     this.requestRender();
     return true;
   }
-  gotoBufferHome() {
+  gotoBufferHome(options) {
+    const select = options?.select ?? false;
+    this.updateSelectionForMovement(select, true);
     this.editBuffer.setCursor(0, 0);
+    this.updateSelectionForMovement(select, false);
     this.requestRender();
     return true;
   }
-  gotoBufferEnd() {
+  gotoBufferEnd(options) {
+    const select = options?.select ?? false;
+    this.updateSelectionForMovement(select, true);
     this.editBuffer.gotoLine(999999);
+    this.updateSelectionForMovement(select, false);
     this.requestRender();
     return true;
   }
@@ -6125,19 +8308,19 @@ class TextareaRenderable extends EditBufferRenderable {
   }
   moveWordForward(options) {
     const select = options?.select ?? false;
-    this.handleShiftSelection(select, true);
+    this.updateSelectionForMovement(select, true);
     const nextWord = this.editBuffer.getNextWordBoundary();
     this.editBuffer.setCursorByOffset(nextWord.offset);
-    this.handleShiftSelection(select, false);
+    this.updateSelectionForMovement(select, false);
     this.requestRender();
     return true;
   }
   moveWordBackward(options) {
     const select = options?.select ?? false;
-    this.handleShiftSelection(select, true);
+    this.updateSelectionForMovement(select, true);
     const prevWord = this.editBuffer.getPrevWordBoundary();
     this.editBuffer.setCursorByOffset(prevWord.offset);
-    this.handleShiftSelection(select, false);
+    this.updateSelectionForMovement(select, false);
     this.requestRender();
     return true;
   }
@@ -6169,24 +8352,6 @@ class TextareaRenderable extends EditBufferRenderable {
     this.requestRender();
     return true;
   }
-  handleShiftSelection(shiftPressed, isBeforeMovement) {
-    if (!this.selectable)
-      return;
-    if (!shiftPressed) {
-      this._ctx.clearSelection();
-      return;
-    }
-    const visualCursor = this.editorView.getVisualCursor();
-    const cursorX = this.x + visualCursor.visualCol;
-    const cursorY = this.y + visualCursor.visualRow;
-    if (isBeforeMovement) {
-      if (!this._ctx.hasSelection) {
-        this._ctx.startSelection(this, cursorX, cursorY);
-      }
-    } else {
-      this._ctx.updateSelection(this, cursorX, cursorY);
-    }
-  }
   focus() {
     super.focus();
     this.updateColors();
@@ -6416,6 +8581,7 @@ export {
   MacOSScrollAccel,
   LogLevel,
   LinearScrollAccel,
+  LineNumberRenderable,
   LayoutEvents,
   KeyHandler,
   KeyEvent,
@@ -6430,6 +8596,7 @@ export {
   EditorView,
   EditBuffer,
   DistortionEffect,
+  DiffRenderable,
   DebugOverlayCorner,
   DataPathsManager,
   ConsolePosition,
@@ -6450,5 +8617,5 @@ export {
   ASCIIFont
 };
 
-//# debugId=96ABDB71AC96072A64756E2164756E21
+//# debugId=61DC3DAACFF9549264756E2164756E21
 //# sourceMappingURL=index.js.map