@opentui/core 0.0.0-20251112-a24ada2d → 0.0.0-20251128-0889a764

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-kj9k00yt.js";
+} from "./index-rhx7c7kj.js";
 // src/text-buffer-view.ts
 class TextBufferView {
   lib;
@@ -234,6 +235,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 +324,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 +560,7 @@ class EditorView {
   editBuffer;
   _destroyed = false;
   _extmarksController;
+  _textBufferViewPtr;
   constructor(lib, ptr, editBuffer) {
     this.lib = lib;
     this.viewPtr = ptr;
@@ -696,6 +706,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;
@@ -2022,17 +2039,27 @@ class FrameBufferRenderable extends Renderable {
 // src/renderables/ASCIIFont.ts
 class ASCIIFontRenderable extends FrameBufferRenderable {
   selectable = true;
+  static _defaultOptions = {
+    text: "",
+    font: "tiny",
+    color: "#FFFFFF",
+    backgroundColor: "transparent",
+    selectionBg: undefined,
+    selectionFg: undefined,
+    selectable: true
+  };
   _text;
   _font;
-  _fg;
-  _bg;
+  _color;
+  _backgroundColor;
   _selectionBg;
   _selectionFg;
   lastLocalSelection = null;
   selectionHelper;
   constructor(ctx, options) {
-    const font = options.font || "tiny";
-    const text = options.text || "";
+    const defaultOptions = ASCIIFontRenderable._defaultOptions;
+    const font = options.font || defaultOptions.font;
+    const text = options.text || defaultOptions.text;
     const measurements = measureText({ text, font });
     super(ctx, {
       flexShrink: 0,
@@ -2043,8 +2070,8 @@ class ASCIIFontRenderable extends FrameBufferRenderable {
     });
     this._text = text;
     this._font = font;
-    this._fg = Array.isArray(options.fg) ? options.fg : [options.fg || RGBA.fromInts(255, 255, 255, 255)];
-    this._bg = options.bg || RGBA.fromValues(0, 0, 0, 0);
+    this._color = options.color || defaultOptions.color;
+    this._backgroundColor = options.backgroundColor || defaultOptions.backgroundColor;
     this._selectionBg = options.selectionBg ? parseColor(options.selectionBg) : undefined;
     this._selectionFg = options.selectionFg ? parseColor(options.selectionFg) : undefined;
     this.selectable = options.selectable ?? true;
@@ -2075,23 +2102,19 @@ class ASCIIFontRenderable extends FrameBufferRenderable {
     this.renderFontToBuffer();
     this.requestRender();
   }
-  get fg() {
-    return this._fg;
+  get color() {
+    return this._color;
   }
-  set fg(value) {
-    if (Array.isArray(value)) {
-      this._fg = value.map((color) => typeof color === "string" ? parseColor(color) : color);
-    } else {
-      this._fg = [typeof value === "string" ? parseColor(value) : value];
-    }
+  set color(value) {
+    this._color = value;
     this.renderFontToBuffer();
     this.requestRender();
   }
-  get bg() {
-    return this._bg;
+  get backgroundColor() {
+    return this._backgroundColor;
   }
-  set bg(value) {
-    this._bg = typeof value === "string" ? parseColor(value) : value;
+  set backgroundColor(value) {
+    this._backgroundColor = value;
     this.renderFontToBuffer();
     this.requestRender();
   }
@@ -2131,13 +2154,13 @@ class ASCIIFontRenderable extends FrameBufferRenderable {
   renderFontToBuffer() {
     if (this.isDestroyed)
       return;
-    this.frameBuffer.clear(this._bg);
+    this.frameBuffer.clear(parseColor(this._backgroundColor));
     renderFontToFrameBuffer(this.frameBuffer, {
       text: this._text,
       x: 0,
       y: 0,
-      fg: this._fg,
-      bg: this._bg,
+      color: this.color,
+      backgroundColor: this._backgroundColor,
       font: this._font
     });
     const selection = this.selectionHelper.getSelection();
@@ -2155,15 +2178,15 @@ class ASCIIFontRenderable extends FrameBufferRenderable {
     const startX = positions[selection.start] || 0;
     const endX = selection.end < positions.length ? positions[selection.end] : measureText({ text: this._text, font: this._font }).width;
     if (this._selectionBg) {
-      this.frameBuffer.fillRect(startX, 0, endX - startX, this.height, this._selectionBg);
+      this.frameBuffer.fillRect(startX, 0, endX - startX, this.height, parseColor(this._selectionBg));
     }
     if (this._selectionFg || this._selectionBg) {
       renderFontToFrameBuffer(this.frameBuffer, {
         text: selectedText,
         x: startX,
         y: 0,
-        fg: this._selectionFg ? [this._selectionFg] : this._fg,
-        bg: this._selectionBg || this._bg,
+        color: this._selectionFg ? this._selectionFg : this._color,
+        backgroundColor: this._selectionBg ? this._selectionBg : this._backgroundColor,
         font: this._font
       });
     }
@@ -2399,7 +2422,6 @@ class TextBufferRenderable extends Renderable {
   _tabIndicatorColor;
   textBuffer;
   textBufferView;
-  _lineInfo = { lineStarts: [], lineWidths: [], maxLineWidth: 0 };
   _defaultOptions = {
     fg: RGBA.fromValues(1, 1, 1, 1),
     bg: RGBA.fromValues(0, 0, 0, 0),
@@ -2438,10 +2460,19 @@ 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);
     }
     this.updateTextInfo();
   }
+  get lineInfo() {
+    return this.textBufferView.logicalLineInfo;
+  }
+  get lineCount() {
+    return this.textBuffer.getLineCount();
+  }
+  get scrollY() {
+    return 0;
+  }
   get plainText() {
     return this.textBuffer.getPlainText();
   }
@@ -2517,7 +2548,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();
@@ -2576,30 +2607,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);
@@ -2684,6 +2714,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() {
@@ -2693,6 +2727,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() {
@@ -2981,196 +3019,1952 @@ class TextNodeRenderable extends BaseRenderable {
       this._children.splice(anchorIndex, 0, ...textNodes);
       textNodes.forEach((node) => node.parent = this);
     } else {
-      throw new Error("Child must be a string, TextNodeRenderable, or StyledText instance");
+      throw new Error("Child must be a string, TextNodeRenderable, or StyledText instance");
+    }
+    this.requestRender();
+    return this;
+  }
+  remove(id) {
+    const childIndex = this.getRenderableIndex(id);
+    if (childIndex === -1) {
+      throw new Error("Child not found in children");
+    }
+    const child = this._children[childIndex];
+    this._children.splice(childIndex, 1);
+    child.parent = null;
+    this.requestRender();
+    return this;
+  }
+  clear() {
+    this._children = [];
+    this.requestRender();
+  }
+  mergeStyles(parentStyle) {
+    return {
+      fg: this._fg ?? parentStyle.fg,
+      bg: this._bg ?? parentStyle.bg,
+      attributes: this._attributes | parentStyle.attributes
+    };
+  }
+  gatherWithInheritedStyle(parentStyle = { fg: undefined, bg: undefined, attributes: 0 }) {
+    const currentStyle = this.mergeStyles(parentStyle);
+    const chunks = [];
+    for (const child of this._children) {
+      if (typeof child === "string") {
+        chunks.push({
+          __isChunk: true,
+          text: child,
+          fg: currentStyle.fg,
+          bg: currentStyle.bg,
+          attributes: currentStyle.attributes
+        });
+      } else {
+        const childChunks = child.gatherWithInheritedStyle(currentStyle);
+        chunks.push(...childChunks);
+      }
+    }
+    this.markClean();
+    return chunks;
+  }
+  static fromString(text, options = {}) {
+    const node = new TextNodeRenderable(options);
+    node.add(text);
+    return node;
+  }
+  static fromNodes(nodes, options = {}) {
+    const node = new TextNodeRenderable(options);
+    for (const childNode of nodes) {
+      node.add(childNode);
+    }
+    return node;
+  }
+  toChunks(parentStyle = { fg: undefined, bg: undefined, attributes: 0 }) {
+    return this.gatherWithInheritedStyle(parentStyle);
+  }
+  getChildren() {
+    return this._children.filter((child) => typeof child !== "string");
+  }
+  getChildrenCount() {
+    return this._children.length;
+  }
+  getRenderable(id) {
+    return this._children.find((child) => typeof child !== "string" && child.id === id);
+  }
+  getRenderableIndex(id) {
+    return this._children.findIndex((child) => isTextNodeRenderable(child) && child.id === id);
+  }
+  get fg() {
+    return this._fg;
+  }
+  set fg(fg2) {
+    if (!fg2) {
+      this._fg = undefined;
+      this.requestRender();
+      return;
+    }
+    this._fg = parseColor(fg2);
+    this.requestRender();
+  }
+  set bg(bg2) {
+    if (!bg2) {
+      this._bg = undefined;
+      this.requestRender();
+      return;
+    }
+    this._bg = parseColor(bg2);
+    this.requestRender();
+  }
+  get bg() {
+    return this._bg;
+  }
+  set attributes(attributes) {
+    this._attributes = attributes;
+    this.requestRender();
+  }
+  get attributes() {
+    return this._attributes;
+  }
+  findDescendantById(id) {
+    return;
+  }
+}
+
+class RootTextNodeRenderable extends TextNodeRenderable {
+  ctx;
+  textParent;
+  constructor(ctx, options, textParent) {
+    super(options);
+    this.ctx = ctx;
+    this.textParent = textParent;
+  }
+  requestRender() {
+    this.markDirty();
+    this.ctx.requestRender();
+  }
+}
+
+// src/renderables/composition/constructs.ts
+function Generic(props, ...children) {
+  return h(VRenderable, props || {}, ...children);
+}
+function Box(props, ...children) {
+  return h(BoxRenderable, props || {}, ...children);
+}
+function Text(props, ...children) {
+  return h(TextRenderable, props || {}, ...children);
+}
+function ASCIIFont(props, ...children) {
+  return h(ASCIIFontRenderable, props || {}, ...children);
+}
+function Input(props, ...children) {
+  return h(InputRenderable, props || {}, ...children);
+}
+function Select(props, ...children) {
+  return h(SelectRenderable, props || {}, ...children);
+}
+function TabSelect(props, ...children) {
+  return h(TabSelectRenderable, props || {}, ...children);
+}
+function FrameBuffer(props, ...children) {
+  return h(FrameBufferRenderable, props, ...children);
+}
+function StyledText2(props, ...children) {
+  const styledProps = props;
+  const textNodeOptions = {
+    ...styledProps,
+    attributes: styledProps?.attributes ?? 0
+  };
+  const textNode = new TextNodeRenderable(textNodeOptions);
+  for (const child of children) {
+    textNode.add(child);
+  }
+  return textNode;
+}
+var vstyles = {
+  bold: (...children) => StyledText2({ attributes: TextAttributes.BOLD }, ...children),
+  italic: (...children) => StyledText2({ attributes: TextAttributes.ITALIC }, ...children),
+  underline: (...children) => StyledText2({ attributes: TextAttributes.UNDERLINE }, ...children),
+  dim: (...children) => StyledText2({ attributes: TextAttributes.DIM }, ...children),
+  blink: (...children) => StyledText2({ attributes: TextAttributes.BLINK }, ...children),
+  inverse: (...children) => StyledText2({ attributes: TextAttributes.INVERSE }, ...children),
+  hidden: (...children) => StyledText2({ attributes: TextAttributes.HIDDEN }, ...children),
+  strikethrough: (...children) => StyledText2({ attributes: TextAttributes.STRIKETHROUGH }, ...children),
+  boldItalic: (...children) => StyledText2({ attributes: TextAttributes.BOLD | TextAttributes.ITALIC }, ...children),
+  boldUnderline: (...children) => StyledText2({ attributes: TextAttributes.BOLD | TextAttributes.UNDERLINE }, ...children),
+  italicUnderline: (...children) => StyledText2({ attributes: TextAttributes.ITALIC | TextAttributes.UNDERLINE }, ...children),
+  boldItalicUnderline: (...children) => StyledText2({ attributes: TextAttributes.BOLD | TextAttributes.ITALIC | TextAttributes.UNDERLINE }, ...children),
+  color: (color, ...children) => StyledText2({ fg: color }, ...children),
+  bgColor: (bgColor, ...children) => StyledText2({ bg: bgColor }, ...children),
+  fg: (color, ...children) => StyledText2({ fg: color }, ...children),
+  bg: (bgColor, ...children) => StyledText2({ bg: bgColor }, ...children),
+  styled: (attributes = 0, ...children) => StyledText2({ attributes }, ...children)
+};
+// src/renderables/composition/VRenderable.ts
+class VRenderable extends Renderable {
+  options;
+  constructor(ctx, options) {
+    super(ctx, options);
+    this.options = options;
+  }
+  renderSelf(buffer, deltaTime) {
+    if (this.options.render) {
+      this.options.render.call(this.options, buffer, deltaTime, this);
+    }
+  }
+}
+// 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();
+      }
+    };
+  }
+  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);
+      }
+    }
+  }
+  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;
+  }
+  setLineColors(lineColorsGutter, lineColorsContent) {
+    this._lineColorsGutter = lineColorsGutter;
+    this._lineColorsContent = lineColorsContent;
+    this.requestRender();
+  }
+  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();
+  }
+  getLineSigns() {
+    return this._lineSigns;
+  }
+  renderSelf(buffer) {
+    const currentScrollY = this.target.scrollY;
+    const scrollChanged = currentScrollY !== this._lastKnownScrollY;
+    if (this.buffered && !this.isDirty && !scrollChanged) {
+      return;
+    }
+    this._lastKnownScrollY = currentScrollY;
+    this.refreshFrameBuffer(buffer);
+  }
+  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 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;
+    }
+  }
+}
+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));
+    }
+  }
+  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);
+    }
+  }
+  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);
+  }
+  add(child) {
+    if (!this.target && "lineInfo" in child && "lineCount" in child && "scrollY" in child) {
+      this.setTarget(child);
+      return this.getChildrenCount() - 1;
+    }
+    return -1;
+  }
+  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);
+  }
+  destroyRecursively() {
+    this._isDestroying = true;
+    if (this.target) {
+      this.target.off("line-info-change", this.handleLineInfoChange);
+    }
+    super.destroyRecursively();
+    this.gutter = null;
+    this.target = null;
+  }
+  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;
+    }
+  }
+  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);
+      }
+    }
+  }
+  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/Diff.ts
+class DiffRenderable extends Renderable {
+  _diff;
+  _view;
+  _parsedDiff = null;
+  _filetype;
+  _syntaxStyle;
+  _wrapMode;
+  _conceal;
+  _showLineNumbers;
+  _lineNumberFg;
+  _lineNumberBg;
+  _addedBg;
+  _removedBg;
+  _addedSignColor;
+  _removedSignColor;
+  leftSide = null;
+  rightSide = null;
+  leftSideAdded = false;
+  rightSideAdded = false;
+  leftCodeRenderable = null;
+  rightCodeRenderable = null;
+  pendingRebuild = false;
+  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._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._addedSignColor = parseColor(options.addedSignColor ?? "#22c55e");
+    this._removedSignColor = parseColor(options.removedSignColor ?? "#ef4444");
+    if (this._diff) {
+      this.parseDiff();
+      this.buildView();
+    }
+  }
+  parseDiff() {
+    if (!this._diff) {
+      this._parsedDiff = null;
+      return;
+    }
+    const patches = parsePatch(this._diff);
+    if (patches.length === 0) {
+      this._parsedDiff = null;
+      return;
+    }
+    this._parsedDiff = patches[0];
+  }
+  buildView() {
+    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();
+      }
+    });
+  }
+  destroyRecursively() {
+    this.pendingRebuild = false;
+    this.leftSideAdded = false;
+    this.rightSideAdded = false;
+    super.destroyRecursively();
+  }
+  buildUnifiedView() {
+    if (!this._parsedDiff)
+      return;
+    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);
+          lineColors.set(lineIndex, this._addedBg);
+          lineSigns.set(lineIndex, {
+            after: " +",
+            afterColor: this._addedSignColor
+          });
+          lineNumbers.set(lineIndex, newLineNum);
+          newLineNum++;
+          lineIndex++;
+        } else if (firstChar === "-") {
+          contentLines.push(content2);
+          lineColors.set(lineIndex, this._removedBg);
+          lineSigns.set(lineIndex, {
+            after: " -",
+            afterColor: this._removedSignColor
+          });
+          lineNumbers.set(lineIndex, oldLineNum);
+          oldLineNum++;
+          lineIndex++;
+        } else if (firstChar === " ") {
+          contentLines.push(content2);
+          lineNumbers.set(lineIndex, newLineNum);
+          oldLineNum++;
+          newLineNum++;
+          lineIndex++;
+        }
+      }
+    }
+    const content = contentLines.join(`
+`);
+    if (!this.leftCodeRenderable) {
+      const codeOptions = {
+        id: this.id ? `${this.id}-left-code` : undefined,
+        content,
+        filetype: this._filetype,
+        wrapMode: this._wrapMode,
+        conceal: this._conceal,
+        width: "100%",
+        height: "100%"
+      };
+      if (this._syntaxStyle) {
+        codeOptions.syntaxStyle = this._syntaxStyle;
+      }
+      this.leftCodeRenderable = new CodeRenderable(this.ctx, codeOptions);
+    } else {
+      this.leftCodeRenderable.content = content;
+      if (this._filetype !== undefined) {
+        this.leftCodeRenderable.filetype = this._filetype;
+      }
+      if (this._syntaxStyle !== undefined) {
+        this.leftCodeRenderable.syntaxStyle = this._syntaxStyle;
+      }
+      this.leftCodeRenderable.wrapMode = this._wrapMode ?? "none";
+    }
+    if (!this.leftSide) {
+      this.leftSide = new LineNumberRenderable(this.ctx, {
+        id: this.id ? `${this.id}-left` : undefined,
+        target: this.leftCodeRenderable,
+        fg: this._lineNumberFg,
+        bg: this._lineNumberBg,
+        lineColors,
+        lineSigns,
+        lineNumbers,
+        lineNumberOffset: 0,
+        hideLineNumbers: new Set,
+        width: "100%",
+        height: "100%"
+      });
+      this.leftSide.showLineNumbers = this._showLineNumbers;
+      super.add(this.leftSide);
+      this.leftSideAdded = true;
+    } else {
+      this.leftSide.setLineColors(lineColors);
+      this.leftSide.setLineSigns(lineSigns);
+      this.leftSide.setLineNumbers(lineNumbers);
+      this.leftSide.setHideLineNumbers(new Set);
+      this.leftSide.width = "100%";
+      if (!this.leftSideAdded) {
+        super.add(this.leftSide);
+        this.leftSideAdded = true;
+      }
+    }
+    if (this.rightSide && this.rightSideAdded) {
+      super.remove(this.rightSide.id);
+      this.rightSideAdded = false;
+    }
+  }
+  buildSplitView() {
+    if (!this._parsedDiff)
+      return;
+    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,
+            type: "context"
+          });
+          rightLogicalLines.push({
+            content,
+            lineNum: newLineNum,
+            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";
+    if (!this.leftCodeRenderable) {
+      const leftCodeOptions = {
+        id: this.id ? `${this.id}-left-code` : undefined,
+        content: preLeftContent,
+        filetype: this._filetype,
+        wrapMode: effectiveWrapMode,
+        conceal: this._conceal,
+        drawUnstyledText: true,
+        width: "100%",
+        height: "100%"
+      };
+      if (this._syntaxStyle) {
+        leftCodeOptions.syntaxStyle = this._syntaxStyle;
+      }
+      this.leftCodeRenderable = new CodeRenderable(this.ctx, leftCodeOptions);
+    } else {
+      this.leftCodeRenderable.content = preLeftContent;
+      this.leftCodeRenderable.wrapMode = effectiveWrapMode;
+      this.leftCodeRenderable.drawUnstyledText = true;
+      if (this._filetype !== undefined) {
+        this.leftCodeRenderable.filetype = this._filetype;
+      }
+      if (this._syntaxStyle !== undefined) {
+        this.leftCodeRenderable.syntaxStyle = this._syntaxStyle;
+      }
+    }
+    if (!this.rightCodeRenderable) {
+      const rightCodeOptions = {
+        id: this.id ? `${this.id}-right-code` : undefined,
+        content: preRightContent,
+        filetype: this._filetype,
+        wrapMode: effectiveWrapMode,
+        conceal: this._conceal,
+        drawUnstyledText: true,
+        width: "100%",
+        height: "100%"
+      };
+      if (this._syntaxStyle) {
+        rightCodeOptions.syntaxStyle = this._syntaxStyle;
+      }
+      this.rightCodeRenderable = new CodeRenderable(this.ctx, rightCodeOptions);
+    } else {
+      this.rightCodeRenderable.content = preRightContent;
+      this.rightCodeRenderable.wrapMode = effectiveWrapMode;
+      this.rightCodeRenderable.drawUnstyledText = true;
+      if (this._filetype !== undefined) {
+        this.rightCodeRenderable.filetype = this._filetype;
+      }
+      if (this._syntaxStyle !== undefined) {
+        this.rightCodeRenderable.syntaxStyle = this._syntaxStyle;
+      }
+    }
+    let finalLeftLines;
+    let finalRightLines;
+    if (canDoWrapAlignment) {
+      const leftLineInfo = this.leftCodeRenderable.lineInfo;
+      const rightLineInfo = this.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.color) {
+        leftLineColors.set(index, line.color);
+      }
+      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.color) {
+        rightLineColors.set(index, line.color);
+      }
+      if (line.sign) {
+        rightLineSigns.set(index, line.sign);
+      }
+    });
+    const leftContentFinal = finalLeftLines.map((l) => l.content).join(`
+`);
+    const rightContentFinal = finalRightLines.map((l) => l.content).join(`
+`);
+    this.leftCodeRenderable.content = leftContentFinal;
+    this.rightCodeRenderable.content = rightContentFinal;
+    if (!this.leftSide) {
+      this.leftSide = new LineNumberRenderable(this.ctx, {
+        id: this.id ? `${this.id}-left` : undefined,
+        target: this.leftCodeRenderable,
+        fg: this._lineNumberFg,
+        bg: this._lineNumberBg,
+        lineColors: leftLineColors,
+        lineSigns: leftLineSigns,
+        lineNumbers: leftLineNumbers,
+        lineNumberOffset: 0,
+        hideLineNumbers: leftHideLineNumbers,
+        width: "50%",
+        height: "100%"
+      });
+      this.leftSide.showLineNumbers = this._showLineNumbers;
+      super.add(this.leftSide);
+      this.leftSideAdded = true;
+    } else {
+      this.leftSide.width = "50%";
+      this.leftSide.setLineColors(leftLineColors);
+      this.leftSide.setLineSigns(leftLineSigns);
+      this.leftSide.setLineNumbers(leftLineNumbers);
+      this.leftSide.setHideLineNumbers(leftHideLineNumbers);
+      if (!this.leftSideAdded) {
+        super.add(this.leftSide);
+        this.leftSideAdded = true;
+      }
     }
-    this.requestRender();
-    return this;
-  }
-  remove(id) {
-    const childIndex = this.getRenderableIndex(id);
-    if (childIndex === -1) {
-      throw new Error("Child not found in children");
+    if (!this.rightSide) {
+      this.rightSide = new LineNumberRenderable(this.ctx, {
+        id: this.id ? `${this.id}-right` : undefined,
+        target: this.rightCodeRenderable,
+        fg: this._lineNumberFg,
+        bg: this._lineNumberBg,
+        lineColors: rightLineColors,
+        lineSigns: rightLineSigns,
+        lineNumbers: rightLineNumbers,
+        lineNumberOffset: 0,
+        hideLineNumbers: rightHideLineNumbers,
+        width: "50%",
+        height: "100%"
+      });
+      this.rightSide.showLineNumbers = this._showLineNumbers;
+      super.add(this.rightSide);
+      this.rightSideAdded = true;
+    } else {
+      this.rightSide.setLineColors(rightLineColors);
+      this.rightSide.setLineSigns(rightLineSigns);
+      this.rightSide.setLineNumbers(rightLineNumbers);
+      this.rightSide.setHideLineNumbers(rightHideLineNumbers);
+      if (!this.rightSideAdded) {
+        super.add(this.rightSide);
+        this.rightSideAdded = true;
+      }
     }
-    const child = this._children[childIndex];
-    this._children.splice(childIndex, 1);
-    child.parent = null;
-    this.requestRender();
-    return this;
-  }
-  clear() {
-    this._children = [];
-    this.requestRender();
   }
-  mergeStyles(parentStyle) {
-    return {
-      fg: this._fg ?? parentStyle.fg,
-      bg: this._bg ?? parentStyle.bg,
-      attributes: this._attributes | parentStyle.attributes
-    };
+  get diff() {
+    return this._diff;
   }
-  gatherWithInheritedStyle(parentStyle = { fg: undefined, bg: undefined, attributes: 0 }) {
-    const currentStyle = this.mergeStyles(parentStyle);
-    const chunks = [];
-    for (const child of this._children) {
-      if (typeof child === "string") {
-        chunks.push({
-          __isChunk: true,
-          text: child,
-          fg: currentStyle.fg,
-          bg: currentStyle.bg,
-          attributes: currentStyle.attributes
-        });
+  set diff(value) {
+    if (this._diff !== value) {
+      this._diff = value;
+      this.parseDiff();
+      if (this._view === "split") {
+        this.requestRebuild();
       } else {
-        const childChunks = child.gatherWithInheritedStyle(currentStyle);
-        chunks.push(...childChunks);
+        this.buildView();
       }
     }
-    this.markClean();
-    return chunks;
   }
-  static fromString(text, options = {}) {
-    const node = new TextNodeRenderable(options);
-    node.add(text);
-    return node;
+  get view() {
+    return this._view;
   }
-  static fromNodes(nodes, options = {}) {
-    const node = new TextNodeRenderable(options);
-    for (const childNode of nodes) {
-      node.add(childNode);
+  set view(value) {
+    if (this._view !== value) {
+      this._view = value;
+      this.flexDirection = value === "split" ? "row" : "column";
+      this.buildView();
     }
-    return node;
-  }
-  toChunks(parentStyle = { fg: undefined, bg: undefined, attributes: 0 }) {
-    return this.gatherWithInheritedStyle(parentStyle);
-  }
-  getChildren() {
-    return this._children.filter((child) => typeof child !== "string");
   }
-  getChildrenCount() {
-    return this._children.length;
-  }
-  getRenderable(id) {
-    return this._children.find((child) => typeof child !== "string" && child.id === id);
-  }
-  getRenderableIndex(id) {
-    return this._children.findIndex((child) => isTextNodeRenderable(child) && child.id === id);
-  }
-  get fg() {
-    return this._fg;
-  }
-  set fg(fg2) {
-    if (!fg2) {
-      this._fg = undefined;
-      this.requestRender();
-      return;
-    }
-    this._fg = parseColor(fg2);
-    this.requestRender();
+  get filetype() {
+    return this._filetype;
   }
-  set bg(bg2) {
-    if (!bg2) {
-      this._bg = undefined;
-      this.requestRender();
-      return;
+  set filetype(value) {
+    if (this._filetype !== value) {
+      this._filetype = value;
+      if (this._view === "split") {
+        this.requestRebuild();
+      } else {
+        this.buildView();
+      }
     }
-    this._bg = parseColor(bg2);
-    this.requestRender();
-  }
-  get bg() {
-    return this._bg;
-  }
-  set attributes(attributes) {
-    this._attributes = attributes;
-    this.requestRender();
-  }
-  get attributes() {
-    return this._attributes;
   }
-  findDescendantById(id) {
-    return;
+  get syntaxStyle() {
+    return this._syntaxStyle;
   }
-}
-
-class RootTextNodeRenderable extends TextNodeRenderable {
-  ctx;
-  textParent;
-  constructor(ctx, options, textParent) {
-    super(options);
-    this.ctx = ctx;
-    this.textParent = textParent;
+  set syntaxStyle(value) {
+    if (this._syntaxStyle !== value) {
+      this._syntaxStyle = value;
+      if (this._view === "split") {
+        this.requestRebuild();
+      } else {
+        this.buildView();
+      }
+    }
   }
-  requestRender() {
-    this.markDirty();
-    this.ctx.requestRender();
+  get wrapMode() {
+    return this._wrapMode;
   }
-}
-
-// src/renderables/composition/constructs.ts
-function Generic(props, ...children) {
-  return h(VRenderable, props || {}, ...children);
-}
-function Box(props, ...children) {
-  return h(BoxRenderable, props || {}, ...children);
-}
-function Text(props, ...children) {
-  return h(TextRenderable, props || {}, ...children);
-}
-function ASCIIFont(props, ...children) {
-  return h(ASCIIFontRenderable, props || {}, ...children);
-}
-function Input(props, ...children) {
-  return h(InputRenderable, props || {}, ...children);
-}
-function Select(props, ...children) {
-  return h(SelectRenderable, props || {}, ...children);
-}
-function TabSelect(props, ...children) {
-  return h(TabSelectRenderable, props || {}, ...children);
-}
-function FrameBuffer(props, ...children) {
-  return h(FrameBufferRenderable, props, ...children);
-}
-function StyledText2(props, ...children) {
-  const styledProps = props;
-  const textNodeOptions = {
-    ...styledProps,
-    attributes: styledProps?.attributes ?? 0
-  };
-  const textNode = new TextNodeRenderable(textNodeOptions);
-  for (const child of children) {
-    textNode.add(child);
+  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();
+      }
+    }
   }
-  return textNode;
-}
-var vstyles = {
-  bold: (...children) => StyledText2({ attributes: TextAttributes.BOLD }, ...children),
-  italic: (...children) => StyledText2({ attributes: TextAttributes.ITALIC }, ...children),
-  underline: (...children) => StyledText2({ attributes: TextAttributes.UNDERLINE }, ...children),
-  dim: (...children) => StyledText2({ attributes: TextAttributes.DIM }, ...children),
-  blink: (...children) => StyledText2({ attributes: TextAttributes.BLINK }, ...children),
-  inverse: (...children) => StyledText2({ attributes: TextAttributes.INVERSE }, ...children),
-  hidden: (...children) => StyledText2({ attributes: TextAttributes.HIDDEN }, ...children),
-  strikethrough: (...children) => StyledText2({ attributes: TextAttributes.STRIKETHROUGH }, ...children),
-  boldItalic: (...children) => StyledText2({ attributes: TextAttributes.BOLD | TextAttributes.ITALIC }, ...children),
-  boldUnderline: (...children) => StyledText2({ attributes: TextAttributes.BOLD | TextAttributes.UNDERLINE }, ...children),
-  italicUnderline: (...children) => StyledText2({ attributes: TextAttributes.ITALIC | TextAttributes.UNDERLINE }, ...children),
-  boldItalicUnderline: (...children) => StyledText2({ attributes: TextAttributes.BOLD | TextAttributes.ITALIC | TextAttributes.UNDERLINE }, ...children),
-  color: (color, ...children) => StyledText2({ fg: color }, ...children),
-  bgColor: (bgColor, ...children) => StyledText2({ bg: bgColor }, ...children),
-  fg: (color, ...children) => StyledText2({ fg: color }, ...children),
-  bg: (bgColor, ...children) => StyledText2({ bg: bgColor }, ...children),
-  styled: (attributes = 0, ...children) => StyledText2({ attributes }, ...children)
-};
-// src/renderables/composition/VRenderable.ts
-class VRenderable extends Renderable {
-  options;
-  constructor(ctx, options) {
-    super(ctx, options);
-    this.options = options;
+  get showLineNumbers() {
+    return this._showLineNumbers;
   }
-  renderSelf(buffer, deltaTime) {
-    if (this.options.render) {
-      this.options.render.call(this.options, buffer, deltaTime, this);
+  set showLineNumbers(value) {
+    if (this._showLineNumbers !== value) {
+      this._showLineNumbers = value;
+      if (this.leftSide) {
+        this.leftSide.showLineNumbers = value;
+      }
+      if (this.rightSide) {
+        this.rightSide.showLineNumbers = value;
+      }
     }
   }
 }
@@ -4094,6 +5888,8 @@ class ScrollBoxRenderable extends BoxRenderable {
   cachedAutoScrollSpeed = 3;
   autoScrollAccumulatorX = 0;
   autoScrollAccumulatorY = 0;
+  scrollAccumulatorX = 0;
+  scrollAccumulatorY = 0;
   _stickyScroll;
   _stickyScrollTop = false;
   _stickyScrollBottom = false;
@@ -4369,14 +6165,35 @@ class ScrollBoxRenderable extends BoxRenderable {
       const baseDelta = event.scroll?.delta ?? 0;
       const now = Date.now();
       const multiplier = this.scrollAccel.tick(now);
+      const scrollAmount = baseDelta * multiplier;
       if (dir === "up") {
-        this.scrollTop -= baseDelta * multiplier;
+        this.scrollAccumulatorY -= scrollAmount;
+        const integerScroll = Math.trunc(this.scrollAccumulatorY);
+        if (integerScroll !== 0) {
+          this.scrollTop += integerScroll;
+          this.scrollAccumulatorY -= integerScroll;
+        }
       } else if (dir === "down") {
-        this.scrollTop += baseDelta * multiplier;
+        this.scrollAccumulatorY += scrollAmount;
+        const integerScroll = Math.trunc(this.scrollAccumulatorY);
+        if (integerScroll !== 0) {
+          this.scrollTop += integerScroll;
+          this.scrollAccumulatorY -= integerScroll;
+        }
       } else if (dir === "left") {
-        this.scrollLeft -= baseDelta * multiplier;
+        this.scrollAccumulatorX -= scrollAmount;
+        const integerScroll = Math.trunc(this.scrollAccumulatorX);
+        if (integerScroll !== 0) {
+          this.scrollLeft += integerScroll;
+          this.scrollAccumulatorX -= integerScroll;
+        }
       } else if (dir === "right") {
-        this.scrollLeft += baseDelta * multiplier;
+        this.scrollAccumulatorX += scrollAmount;
+        const integerScroll = Math.trunc(this.scrollAccumulatorX);
+        if (integerScroll !== 0) {
+          this.scrollLeft += integerScroll;
+          this.scrollAccumulatorX -= integerScroll;
+        }
       }
       const maxScrollTop = Math.max(0, this.scrollHeight - this.viewport.height);
       const maxScrollLeft = Math.max(0, this.scrollWidth - this.viewport.width);
@@ -4394,15 +6211,21 @@ class ScrollBoxRenderable extends BoxRenderable {
     if (this.verticalScrollBar.handleKeyPress(key)) {
       this._hasManualScroll = true;
       this.scrollAccel.reset();
+      this.resetScrollAccumulators();
       return true;
     }
     if (this.horizontalScrollBar.handleKeyPress(key)) {
       this._hasManualScroll = true;
       this.scrollAccel.reset();
+      this.resetScrollAccumulators();
       return true;
     }
     return false;
   }
+  resetScrollAccumulators() {
+    this.scrollAccumulatorX = 0;
+    this.scrollAccumulatorY = 0;
+  }
   startAutoScroll(mouseX, mouseY) {
     this.stopAutoScroll();
     this.autoScrollMouseX = mouseX;
@@ -4699,8 +6522,8 @@ class SelectRenderable extends Renderable {
           text: option.name,
           x: contentX + 1 + indicatorWidth,
           y: itemY,
-          fg: nameColor,
-          bg: isSelected ? this._selectedBackgroundColor : bgColor,
+          color: nameColor,
+          backgroundColor: isSelected ? this._selectedBackgroundColor : bgColor,
           font: this._font
         });
         descX = contentX + 1 + indicatorWidth;
@@ -4709,7 +6532,6 @@ class SelectRenderable extends Renderable {
       }
       if (this._showDescription && itemY + this.fontHeight < contentY + contentHeight) {
         const descColor = isSelected ? this._selectedDescriptionColor : this._descriptionColor;
-        const descBg = this._focused ? this._focusedBackgroundColor : this._backgroundColor;
         this.frameBuffer.drawText(option.description, descX, itemY + this.fontHeight, descColor);
       }
     }
@@ -5341,6 +7163,7 @@ class EditBufferRenderable extends Renderable {
   lastLocalSelection = null;
   _tabIndicator;
   _tabIndicatorColor;
+  _selectionAnchorState = null;
   _cursorChangeListener = undefined;
   _contentChangeListener = undefined;
   editBuffer;
@@ -5397,6 +7220,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;
@@ -5412,11 +7238,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();
   }
@@ -5609,19 +7442,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);
@@ -5742,6 +7581,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
@@ -5779,12 +7667,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" },
@@ -5882,6 +7770,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()],
@@ -5998,33 +7888,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;
   }
@@ -6034,29 +7924,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;
   }
@@ -6091,19 +7987,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;
   }
@@ -6135,25 +8031,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 viewport = this.editorView.getViewport();
-    const cursorX = this.x + visualCursor.visualCol;
-    const cursorY = this.y + (visualCursor.visualRow - viewport.offsetY);
-    if (isBeforeMovement) {
-      if (!this._ctx.hasSelection) {
-        this._ctx.startSelection(this, cursorX, cursorY);
-      }
-    } else {
-      this._ctx.updateSelection(this, cursorX, cursorY);
-    }
-  }
   focus() {
     super.focus();
     this.updateColors();
@@ -6383,6 +8260,7 @@ export {
   MacOSScrollAccel,
   LogLevel,
   LinearScrollAccel,
+  LineNumberRenderable,
   LayoutEvents,
   KeyHandler,
   KeyEvent,
@@ -6397,6 +8275,7 @@ export {
   EditorView,
   EditBuffer,
   DistortionEffect,
+  DiffRenderable,
   DebugOverlayCorner,
   DataPathsManager,
   ConsolePosition,
@@ -6417,5 +8296,5 @@ export {
   ASCIIFont
 };
 
-//# debugId=1245366BCDEC541D64756E2164756E21
+//# debugId=84CD912F2F121D3E64756E2164756E21
 //# sourceMappingURL=index.js.map