@opentui/core 0.1.13 → 0.1.15

package/{index-4gez9k7q.js → index-sw194bbj.js}

@@ -3867,7 +3867,7 @@ function renderFontToFrameBuffer(buffer, {
             if (renderX >= 0 && renderX < width) {
               const fontChar = segment.text[charIdx];
               if (fontChar !== " ") {
-                buffer.setCell(renderX, renderY, fontChar, segmentColor, bg);
+                buffer.setCellWithAlphaBlending(renderX, renderY, fontChar, segmentColor, bg);
               }
             }
           }
@@ -3942,44 +3942,23 @@ var textEncoder = new TextEncoder;
 
 class StyledText {
   chunks;
-  _plainText = "";
   constructor(chunks) {
     this.chunks = chunks;
-    for (let i = 0;i < chunks.length; i++) {
-      this._plainText += chunks[i].plainText;
-    }
-  }
-  toString() {
-    return this._plainText;
   }
-  static _createInstance(chunks, plainText) {
+  static _createInstance(chunks) {
     const newInstance = Object.create(StyledText.prototype);
     newInstance.chunks = chunks;
-    newInstance._plainText = plainText;
     return newInstance;
   }
-  static _chunksToPlainText(chunks) {
-    let plainText = "";
-    for (const chunk of chunks) {
-      plainText += chunk.plainText;
-    }
-    return plainText;
-  }
   insert(chunk, index) {
     const originalLength = this.chunks.length;
     let newChunks;
-    let newPlainText;
-    if (index === undefined) {
-      newChunks = [...this.chunks, chunk];
-      newPlainText = this._plainText + chunk.plainText;
-    } else if (index === originalLength) {
+    if (index === undefined || index === originalLength) {
       newChunks = [...this.chunks, chunk];
-      newPlainText = this._plainText + chunk.plainText;
     } else {
       newChunks = [...this.chunks.slice(0, index), chunk, ...this.chunks.slice(index)];
-      newPlainText = StyledText._chunksToPlainText(newChunks);
     }
-    return StyledText._createInstance(newChunks, newPlainText);
+    return StyledText._createInstance(newChunks);
   }
   remove(chunk) {
     const originalLength = this.chunks.length;
@@ -3987,30 +3966,24 @@ class StyledText {
     if (index === -1)
       return this;
     let newChunks;
-    let newPlainText;
     if (index === originalLength - 1) {
       newChunks = this.chunks.slice(0, -1);
-      newPlainText = this._plainText.slice(0, this._plainText.length - chunk.plainText.length);
     } else {
       newChunks = [...this.chunks.slice(0, index), ...this.chunks.slice(index + 1)];
-      newPlainText = StyledText._chunksToPlainText(newChunks);
     }
-    return StyledText._createInstance(newChunks, newPlainText);
+    return StyledText._createInstance(newChunks);
   }
   replace(chunk, oldChunk) {
     const index = this.chunks.indexOf(oldChunk);
     if (index === -1)
       return this;
     let newChunks;
-    let newPlainText;
     if (index === this.chunks.length - 1) {
       newChunks = [...this.chunks.slice(0, -1), chunk];
-      newPlainText = this._plainText.slice(0, this._plainText.length - oldChunk.plainText.length) + chunk.plainText;
     } else {
       newChunks = [...this.chunks.slice(0, index), chunk, ...this.chunks.slice(index + 1)];
-      newPlainText = StyledText._chunksToPlainText(newChunks);
     }
-    return StyledText._createInstance(newChunks, newPlainText);
+    return StyledText._createInstance(newChunks);
   }
 }
 function stringToStyledText(content) {
@@ -4089,8 +4062,6 @@ var fg = (color) => (input) => applyStyle(input, { fg: color });
 var bg = (color) => (input) => applyStyle(input, { bg: color });
 function tn(strings, ...values) {
   const chunks = [];
-  let length = 0;
-  let plainText = "";
   for (let i = 0;i < strings.length; i++) {
     const raw = strings[i];
     if (raw) {
@@ -4100,14 +4071,10 @@ function tn(strings, ...values) {
         plainText: raw,
         attributes: 0
       });
-      length += raw.length;
-      plainText += raw;
     }
     const val = values[i];
     if (typeof val === "object" && "__isChunk" in val) {
       chunks.push(val);
-      length += val.plainText.length;
-      plainText += val.plainText;
     } else if (val !== undefined) {
       const plainTextStr = String(val);
       chunks.push({
@@ -4116,16 +4083,12 @@ function tn(strings, ...values) {
         plainText: plainTextStr,
         attributes: 0
       });
-      length += plainTextStr.length;
-      plainText += plainTextStr;
     }
   }
   return new StyledText(chunks);
 }
 function t(strings, ...values) {
   let cachedStringChunks = templateCache.get(strings);
-  let length = 0;
-  let plainText = "";
   if (!cachedStringChunks) {
     cachedStringChunks = [];
     for (let i = 0;i < strings.length; i++) {
@@ -4148,14 +4111,10 @@ function t(strings, ...values) {
     const stringChunk = cachedStringChunks[i];
     if (stringChunk) {
       chunks.push(stringChunk);
-      length += stringChunk.plainText.length;
-      plainText += stringChunk.plainText;
     }
     const val = values[i];
     if (typeof val === "object" && "__isChunk" in val) {
       chunks.push(val);
-      length += val.plainText.length;
-      plainText += val.plainText;
     } else if (val !== undefined) {
       const plainTextStr = String(val);
       chunks.push({
@@ -4164,8 +4123,6 @@ function t(strings, ...values) {
         plainText: plainTextStr,
         attributes: 0
       });
-      length += plainTextStr.length;
-      plainText += plainTextStr;
     }
   }
   return new StyledText(chunks);
@@ -4478,10 +4435,10 @@ function parseWrap(value) {
 class MouseParser {
   mouseButtonsPressed = new Set;
   static SCROLL_DIRECTIONS = {
-    64: "up",
-    65: "down",
-    66: "left",
-    67: "right"
+    0: "up",
+    1: "down",
+    2: "left",
+    3: "right"
   };
   reset() {
     this.mouseButtonsPressed.clear();
@@ -4492,9 +4449,9 @@ class MouseParser {
     if (sgrMatch) {
       const [, buttonCode, x, y, pressRelease] = sgrMatch;
       const rawButtonCode = parseInt(buttonCode);
-      const scrollDirection = MouseParser.SCROLL_DIRECTIONS[rawButtonCode];
-      const isScroll = scrollDirection !== undefined;
       const button = rawButtonCode & 3;
+      const isScroll = (rawButtonCode & 64) !== 0;
+      const scrollDirection = !isScroll ? undefined : MouseParser.SCROLL_DIRECTIONS[button];
       const isMotion = (rawButtonCode & 32) !== 0;
       const modifiers = {
         shift: (rawButtonCode & 4) !== 0,
@@ -4539,9 +4496,9 @@ class MouseParser {
       const buttonByte = str.charCodeAt(3) - 32;
       const x = str.charCodeAt(4) - 33;
       const y = str.charCodeAt(5) - 33;
-      const scrollDirection = MouseParser.SCROLL_DIRECTIONS[buttonByte];
-      const isScroll = scrollDirection !== undefined;
       const button = buttonByte & 3;
+      const isScroll = (buttonByte & 64) !== 0;
+      const scrollDirection = !isScroll ? undefined : MouseParser.SCROLL_DIRECTIONS[button];
       const modifiers = {
         shift: (buttonByte & 4) !== 0,
         alt: (buttonByte & 8) !== 0,
@@ -4575,31 +4532,89 @@ class MouseParser {
 }
 
 // src/lib/selection.ts
+class SelectionAnchor {
+  renderable;
+  relativeX;
+  relativeY;
+  constructor(renderable, absoluteX, absoluteY) {
+    this.renderable = renderable;
+    this.relativeX = absoluteX - this.renderable.x;
+    this.relativeY = absoluteY - this.renderable.y;
+  }
+  get x() {
+    return this.renderable.x + this.relativeX;
+  }
+  get y() {
+    return this.renderable.y + this.relativeY;
+  }
+}
+
 class Selection {
   _anchor;
-  _focus;
+  _originalFocus;
+  _normalizedAnchor;
+  _normalizedFocus;
   _selectedRenderables = [];
-  constructor(anchor, focus) {
-    this._anchor = { ...anchor };
-    this._focus = { ...focus };
+  _touchedRenderables = [];
+  _isActive = true;
+  _isSelecting = true;
+  constructor(anchorRenderable, anchor, focus) {
+    this._anchor = new SelectionAnchor(anchorRenderable, anchor.x, anchor.y);
+    this._originalFocus = { ...focus };
+    this._updateNormalizedSelection();
   }
   get anchor() {
-    return { ...this._anchor };
+    return { ...this._normalizedAnchor };
   }
   get focus() {
-    return { ...this._focus };
+    return { ...this._normalizedFocus };
+  }
+  set focus(value) {
+    this._originalFocus = { ...value };
+    this._updateNormalizedSelection();
+  }
+  _updateNormalizedSelection() {
+    const anchorBeforeFocus = this._anchor.y < this._originalFocus.y || this._anchor.y === this._originalFocus.y && this._anchor.x <= this._originalFocus.x;
+    if (anchorBeforeFocus) {
+      this._normalizedAnchor = { x: this._anchor.x, y: this._anchor.y };
+      this._normalizedFocus = { ...this._originalFocus };
+    } else {
+      this._normalizedAnchor = { ...this._originalFocus };
+      this._normalizedFocus = { x: this._anchor.x + 1, y: this._anchor.y };
+    }
+  }
+  get isActive() {
+    return this._isActive;
+  }
+  set isActive(value) {
+    this._isActive = value;
+  }
+  get isSelecting() {
+    return this._isSelecting;
+  }
+  set isSelecting(value) {
+    this._isSelecting = value;
   }
   get bounds() {
     return {
-      startX: Math.min(this._anchor.x, this._focus.x),
-      startY: Math.min(this._anchor.y, this._focus.y),
-      endX: Math.max(this._anchor.x, this._focus.x),
-      endY: Math.max(this._anchor.y, this._focus.y)
+      x: Math.min(this._normalizedAnchor.x, this._normalizedFocus.x),
+      y: Math.min(this._normalizedAnchor.y, this._normalizedFocus.y),
+      width: Math.max(this._normalizedAnchor.x, this._normalizedFocus.x) - Math.min(this._normalizedAnchor.x, this._normalizedFocus.x),
+      height: Math.max(this._normalizedAnchor.y, this._normalizedFocus.y) - Math.min(this._normalizedAnchor.y, this._normalizedFocus.y)
     };
   }
   updateSelectedRenderables(selectedRenderables) {
     this._selectedRenderables = selectedRenderables;
   }
+  get selectedRenderables() {
+    return this._selectedRenderables;
+  }
+  updateTouchedRenderables(touchedRenderables) {
+    this._touchedRenderables = touchedRenderables;
+  }
+  get touchedRenderables() {
+    return this._touchedRenderables;
+  }
   getSelectedText() {
     const selectedTexts = this._selectedRenderables.sort((a, b) => {
       const aY = a.y;
@@ -4613,133 +4628,24 @@ class Selection {
 `);
   }
 }
-
-class TextSelectionHelper {
-  getX;
-  getY;
-  getTextLength;
-  getLineInfo;
-  localSelection = null;
-  cachedGlobalSelection = null;
-  constructor(getX, getY, getTextLength, getLineInfo) {
-    this.getX = getX;
-    this.getY = getY;
-    this.getTextLength = getTextLength;
-    this.getLineInfo = getLineInfo;
-  }
-  hasSelection() {
-    return this.localSelection !== null;
-  }
-  getSelection() {
-    return this.localSelection;
-  }
-  reevaluateSelection(width, height = 1) {
-    if (!this.cachedGlobalSelection) {
-      return false;
-    }
-    return this.onSelectionChanged(this.cachedGlobalSelection, width, height);
-  }
-  shouldStartSelection(x, y, width, height) {
-    const localX = x - this.getX();
-    const localY = y - this.getY();
-    return localX >= 0 && localX < width && localY >= 0 && localY < height;
-  }
-  onSelectionChanged(selection, width, height = 1) {
-    this.cachedGlobalSelection = selection;
-    const previousSelection = this.localSelection;
-    if (!selection?.isActive) {
-      this.localSelection = null;
-      return previousSelection !== null;
-    }
-    const myY = this.getY();
-    const myEndY = myY + height - 1;
-    if (myEndY < selection.anchor.y || myY > selection.focus.y) {
-      this.localSelection = null;
-      return previousSelection !== null;
-    }
-    if (height === 1) {
-      this.localSelection = this.calculateSingleLineSelection(myY, selection.anchor.y, selection.focus.y, selection.anchor.x, selection.focus.x, width);
-    } else {
-      this.localSelection = this.calculateMultiLineSelection(myY, selection.anchor.y, selection.focus.y, selection.anchor.x, selection.focus.x);
-    }
-    return this.localSelection !== null !== (previousSelection !== null) || this.localSelection?.start !== previousSelection?.start || this.localSelection?.end !== previousSelection?.end;
-  }
-  calculateSingleLineSelection(lineY, anchorY, focusY, anchorX, focusX, width) {
-    const textLength = this.getTextLength();
-    const myX = this.getX();
-    if (lineY > anchorY && lineY < focusY) {
-      return { start: 0, end: textLength };
-    }
-    if (lineY === anchorY && lineY === focusY) {
-      const start = Math.max(0, Math.min(anchorX - myX, textLength));
-      const end = Math.max(0, Math.min(focusX - myX, textLength));
-      return start < end ? { start, end } : null;
-    }
-    if (lineY === anchorY) {
-      const start = Math.max(0, Math.min(anchorX - myX, textLength));
-      return start < textLength ? { start, end: textLength } : null;
-    }
-    if (lineY === focusY) {
-      const end = Math.max(0, Math.min(focusX - myX, textLength));
-      return end > 0 ? { start: 0, end } : null;
-    }
+function convertGlobalToLocalSelection(globalSelection, localX, localY) {
+  if (!globalSelection?.isActive) {
     return null;
   }
-  calculateMultiLineSelection(startY, anchorY, focusY, anchorX, focusX) {
-    const lineInfo = this.getLineInfo?.();
-    if (!lineInfo) {
-      return { start: 0, end: this.getTextLength() };
-    }
-    const myX = this.getX();
-    let selectionStart = null;
-    let selectionEnd = null;
-    for (let i = 0;i < lineInfo.lineStarts.length; i++) {
-      const lineY = startY + i;
-      if (lineY < anchorY || lineY > focusY)
-        continue;
-      const lineStart = lineInfo.lineStarts[i];
-      const lineEnd = i < lineInfo.lineStarts.length - 1 ? lineInfo.lineStarts[i + 1] - 1 : this.getTextLength();
-      const lineWidth = lineInfo.lineWidths[i];
-      if (lineY > anchorY && lineY < focusY) {
-        if (selectionStart === null)
-          selectionStart = lineStart;
-        selectionEnd = lineEnd;
-      } else if (lineY === anchorY && lineY === focusY) {
-        const localStartX = Math.max(0, Math.min(anchorX - myX, lineWidth));
-        const localEndX = Math.max(0, Math.min(focusX - myX, lineWidth));
-        if (localStartX < localEndX) {
-          selectionStart = lineStart + localStartX;
-          selectionEnd = lineStart + localEndX;
-        }
-      } else if (lineY === anchorY) {
-        const localStartX = Math.max(0, Math.min(anchorX - myX, lineWidth));
-        if (localStartX < lineWidth) {
-          selectionStart = lineStart + localStartX;
-          selectionEnd = lineEnd;
-        }
-      } else if (lineY === focusY) {
-        const localEndX = Math.max(0, Math.min(focusX - myX, lineWidth));
-        if (localEndX > 0) {
-          if (selectionStart === null)
-            selectionStart = lineStart;
-          selectionEnd = lineStart + localEndX;
-        }
-      }
-    }
-    return selectionStart !== null && selectionEnd !== null && selectionStart < selectionEnd ? { start: selectionStart, end: selectionEnd } : null;
-  }
+  return {
+    anchorX: globalSelection.anchor.x - localX,
+    anchorY: globalSelection.anchor.y - localY,
+    focusX: globalSelection.focus.x - localX,
+    focusY: globalSelection.focus.y - localY,
+    isActive: true
+  };
 }
 
 class ASCIIFontSelectionHelper {
-  getX;
-  getY;
   getText;
   getFont;
   localSelection = null;
-  cachedGlobalSelection = null;
-  constructor(getX, getY, getText, getFont) {
-    this.getX = getX;
-    this.getY = getY;
+  constructor(getText, getFont) {
     this.getText = getText;
     this.getFont = getFont;
   }
@@ -4749,9 +4655,7 @@ class ASCIIFontSelectionHelper {
   getSelection() {
     return this.localSelection;
   }
-  shouldStartSelection(x, y, width, height) {
-    const localX = x - this.getX();
-    const localY = y - this.getY();
+  shouldStartSelection(localX, localY, width, height) {
     if (localX < 0 || localX >= width || localY < 0 || localY >= height) {
       return false;
     }
@@ -4760,49 +4664,36 @@ class ASCIIFontSelectionHelper {
     const charIndex = coordinateToCharacterIndex(localX, text, font);
     return charIndex >= 0 && charIndex <= text.length;
   }
-  onSelectionChanged(selection, width, height) {
-    this.cachedGlobalSelection = selection;
+  onLocalSelectionChanged(localSelection, width, height) {
     const previousSelection = this.localSelection;
-    if (!selection?.isActive) {
+    if (!localSelection?.isActive) {
       this.localSelection = null;
       return previousSelection !== null;
     }
-    const myX = this.getX();
-    const myY = this.getY();
-    const myEndY = myY + height - 1;
     const text = this.getText();
     const font = this.getFont();
-    let selStart;
-    let selEnd;
-    if (selection.anchor.y < selection.focus.y || selection.anchor.y === selection.focus.y && selection.anchor.x <= selection.focus.x) {
-      selStart = selection.anchor;
-      selEnd = selection.focus;
-    } else {
-      selStart = selection.focus;
-      selEnd = selection.anchor;
-    }
-    if (myEndY < selStart.y || myY > selEnd.y) {
+    const selStart = { x: localSelection.anchorX, y: localSelection.anchorY };
+    const selEnd = { x: localSelection.focusX, y: localSelection.focusY };
+    if (height - 1 < selStart.y || 0 > selEnd.y) {
       this.localSelection = null;
       return previousSelection !== null;
     }
     let startCharIndex = 0;
     let endCharIndex = text.length;
-    if (selStart.y > myEndY) {
+    if (selStart.y > height - 1) {
       this.localSelection = null;
       return previousSelection !== null;
-    } else if (selStart.y >= myY && selStart.y <= myEndY) {
-      const localX = selStart.x - myX;
-      if (localX > 0) {
-        startCharIndex = coordinateToCharacterIndex(localX, text, font);
+    } else if (selStart.y >= 0 && selStart.y <= height - 1) {
+      if (selStart.x > 0) {
+        startCharIndex = coordinateToCharacterIndex(selStart.x, text, font);
       }
     }
-    if (selEnd.y < myY) {
+    if (selEnd.y < 0) {
       this.localSelection = null;
       return previousSelection !== null;
-    } else if (selEnd.y >= myY && selEnd.y <= myEndY) {
-      const localX = selEnd.x - myX;
-      if (localX >= 0) {
-        endCharIndex = coordinateToCharacterIndex(localX, text, font);
+    } else if (selEnd.y >= 0 && selEnd.y <= height - 1) {
+      if (selEnd.x >= 0) {
+        endCharIndex = coordinateToCharacterIndex(selEnd.x, text, font);
       } else {
         endCharIndex = 0;
       }
@@ -4812,23 +4703,15 @@ class ASCIIFontSelectionHelper {
     } else {
       this.localSelection = null;
     }
-    return this.localSelection !== null !== (previousSelection !== null) || this.localSelection?.start !== previousSelection?.start || this.localSelection?.end !== previousSelection?.end;
-  }
-  reevaluateSelection(width, height) {
-    if (!this.cachedGlobalSelection) {
-      return false;
-    }
-    return this.onSelectionChanged(this.cachedGlobalSelection, width, height);
+    return previousSelection?.start !== this.localSelection?.start || previousSelection?.end !== this.localSelection?.end;
   }
 }
 // src/zig.ts
-import { dlopen, toArrayBuffer } from "bun:ffi";
+import { dlopen, toArrayBuffer as toArrayBuffer2, JSCallback, ptr } from "bun:ffi";
 import { existsSync } from "fs";
 
 // src/buffer.ts
-function isRGBAWithAlpha(color) {
-  return color.a < 1;
-}
+import { toArrayBuffer } from "bun:ffi";
 function packDrawOptions(border2, shouldFill, titleAlignment) {
   let packed = 0;
   if (border2 === true) {
@@ -4855,56 +4738,48 @@ function packDrawOptions(border2, shouldFill, titleAlignment) {
   packed |= alignment << 5;
   return packed;
 }
-function blendColors(overlay, text) {
-  const [overlayR, overlayG, overlayB, overlayA] = overlay.buffer;
-  const [textR, textG, textB, textA] = text.buffer;
-  if (overlayA === 1) {
-    return overlay;
-  }
-  const alpha = overlayA;
-  let perceptualAlpha;
-  if (alpha > 0.8) {
-    const normalizedHighAlpha = (alpha - 0.8) * 5;
-    const curvedHighAlpha = Math.pow(normalizedHighAlpha, 0.2);
-    perceptualAlpha = 0.8 + curvedHighAlpha * 0.2;
-  } else {
-    perceptualAlpha = Math.pow(alpha, 0.9);
-  }
-  const r = overlayR * perceptualAlpha + textR * (1 - perceptualAlpha);
-  const g = overlayG * perceptualAlpha + textG * (1 - perceptualAlpha);
-  const b = overlayB * perceptualAlpha + textB * (1 - perceptualAlpha);
-  return RGBA.fromValues(r, g, b, textA);
-}
 
 class OptimizedBuffer {
   static fbIdCounter = 0;
   id;
   lib;
   bufferPtr;
-  buffer;
   _width;
   _height;
   respectAlpha = false;
-  useFFI = true;
+  _rawBuffers = null;
   get ptr() {
     return this.bufferPtr;
   }
-  constructor(lib, ptr, buffer, width, height, options) {
-    this.id = `fb_${OptimizedBuffer.fbIdCounter++}`;
+  get buffers() {
+    if (this._rawBuffers === null) {
+      const size = this._width * this._height;
+      const charPtr = this.lib.bufferGetCharPtr(this.bufferPtr);
+      const fgPtr = this.lib.bufferGetFgPtr(this.bufferPtr);
+      const bgPtr = this.lib.bufferGetBgPtr(this.bufferPtr);
+      const attributesPtr = this.lib.bufferGetAttributesPtr(this.bufferPtr);
+      this._rawBuffers = {
+        char: new Uint32Array(toArrayBuffer(charPtr, 0, size * 4)),
+        fg: new Float32Array(toArrayBuffer(fgPtr, 0, size * 4 * 4)),
+        bg: new Float32Array(toArrayBuffer(bgPtr, 0, size * 4 * 4)),
+        attributes: new Uint8Array(toArrayBuffer(attributesPtr, 0, size))
+      };
+    }
+    return this._rawBuffers;
+  }
+  constructor(lib, ptr, width, height, options) {
+    this.id = options.id || `fb_${OptimizedBuffer.fbIdCounter++}`;
     this.lib = lib;
     this.respectAlpha = options.respectAlpha || false;
     this._width = width;
     this._height = height;
     this.bufferPtr = ptr;
-    this.buffer = buffer;
   }
   static create(width, height, widthMethod, options = {}) {
     const lib = resolveRenderLib();
     const respectAlpha = options.respectAlpha || false;
-    return lib.createOptimizedBuffer(width, height, widthMethod, respectAlpha);
-  }
-  get buffers() {
-    return this.buffer;
+    const id = options.id && options.id.trim() !== "" ? options.id : "unnamed buffer";
+    return lib.createOptimizedBuffer(width, height, widthMethod, respectAlpha, id);
   }
   coordsToIndex(x, y) {
     return y * this._width + x;
@@ -4919,91 +4794,21 @@ class OptimizedBuffer {
     this.lib.bufferSetRespectAlpha(this.bufferPtr, respectAlpha);
     this.respectAlpha = respectAlpha;
   }
-  clear(bg2 = RGBA.fromValues(0, 0, 0, 1), clearChar = " ") {
-    if (this.useFFI) {
-      this.clearFFI(bg2);
-    } else {
-      this.clearLocal(bg2, clearChar);
-    }
+  getNativeId() {
+    return this.lib.bufferGetId(this.bufferPtr);
   }
-  clearLocal(bg2 = RGBA.fromValues(0, 0, 0, 1), clearChar = " ") {
-    this.buffer.char.fill(clearChar.charCodeAt(0));
-    this.buffer.attributes.fill(0);
-    for (let i = 0;i < this._width * this._height; i++) {
-      const index = i * 4;
-      this.buffer.fg[index] = 1;
-      this.buffer.fg[index + 1] = 1;
-      this.buffer.fg[index + 2] = 1;
-      this.buffer.fg[index + 3] = 1;
-      this.buffer.bg[index] = bg2.r;
-      this.buffer.bg[index + 1] = bg2.g;
-      this.buffer.bg[index + 2] = bg2.b;
-      this.buffer.bg[index + 3] = bg2.a;
-    }
+  clear(bg2 = RGBA.fromValues(0, 0, 0, 1)) {
+    this.lib.bufferClear(this.bufferPtr, bg2);
   }
   setCell(x, y, char, fg2, bg2, attributes = 0) {
-    if (x < 0 || x >= this._width || y < 0 || y >= this._height)
-      return;
-    const index = this.coordsToIndex(x, y);
-    const colorIndex = index * 4;
-    this.buffer.char[index] = char.charCodeAt(0);
-    this.buffer.attributes[index] = attributes;
-    this.buffer.fg[colorIndex] = fg2.r;
-    this.buffer.fg[colorIndex + 1] = fg2.g;
-    this.buffer.fg[colorIndex + 2] = fg2.b;
-    this.buffer.fg[colorIndex + 3] = fg2.a;
-    this.buffer.bg[colorIndex] = bg2.r;
-    this.buffer.bg[colorIndex + 1] = bg2.g;
-    this.buffer.bg[colorIndex + 2] = bg2.b;
-    this.buffer.bg[colorIndex + 3] = bg2.a;
-  }
-  get(x, y) {
-    if (x < 0 || x >= this._width || y < 0 || y >= this._height)
-      return null;
-    const index = this.coordsToIndex(x, y);
-    const colorIndex = index * 4;
-    return {
-      char: this.buffer.char[index],
-      fg: RGBA.fromArray(this.buffer.fg.slice(colorIndex, colorIndex + 4)),
-      bg: RGBA.fromArray(this.buffer.bg.slice(colorIndex, colorIndex + 4)),
-      attributes: this.buffer.attributes[index]
-    };
+    this.lib.bufferSetCell(this.bufferPtr, x, y, char, fg2, bg2, attributes);
   }
   setCellWithAlphaBlending(x, y, char, fg2, bg2, attributes = 0) {
-    if (this.useFFI) {
-      this.setCellWithAlphaBlendingFFI(x, y, char, fg2, bg2, attributes);
-    } else {
-      this.setCellWithAlphaBlendingLocal(x, y, char, fg2, bg2, attributes);
-    }
-  }
-  setCellWithAlphaBlendingLocal(x, y, char, fg2, bg2, attributes = 0) {
-    if (x < 0 || x >= this._width || y < 0 || y >= this._height)
-      return;
-    const hasBgAlpha = isRGBAWithAlpha(bg2);
-    const hasFgAlpha = isRGBAWithAlpha(fg2);
-    if (hasBgAlpha || hasFgAlpha) {
-      const destCell = this.get(x, y);
-      if (destCell) {
-        const blendedBgRgb = hasBgAlpha ? blendColors(bg2, destCell.bg) : bg2;
-        const preserveChar = char === " " && destCell.char !== 0 && String.fromCharCode(destCell.char) !== " ";
-        const finalChar = preserveChar ? destCell.char : char.charCodeAt(0);
-        let finalFg;
-        if (preserveChar) {
-          finalFg = blendColors(bg2, destCell.fg);
-        } else {
-          finalFg = hasFgAlpha ? blendColors(fg2, destCell.bg) : fg2;
-        }
-        const finalAttributes = preserveChar ? destCell.attributes : attributes;
-        const finalBg = RGBA.fromValues(blendedBgRgb.r, blendedBgRgb.g, blendedBgRgb.b, bg2.a);
-        this.setCell(x, y, String.fromCharCode(finalChar), finalFg, finalBg, finalAttributes);
-        return;
-      }
-    }
-    this.setCell(x, y, char, fg2, bg2, attributes);
+    this.lib.bufferSetCellWithAlphaBlending(this.bufferPtr, x, y, char, fg2, bg2, attributes);
   }
   drawText(text, x, y, fg2, bg2, attributes = 0, selection2) {
     if (!selection2) {
-      this.drawTextFFI.call(this, text, x, y, fg2, bg2, attributes);
+      this.lib.bufferDrawText(this.bufferPtr, text, x, y, fg2, bg2, attributes);
       return;
     }
     const { start, end } = selection2;
@@ -5019,123 +4824,22 @@ class OptimizedBuffer {
     }
     if (start > 0) {
       const beforeText = text.slice(0, start);
-      this.drawTextFFI.call(this, beforeText, x, y, fg2, bg2, attributes);
+      this.lib.bufferDrawText(this.bufferPtr, beforeText, x, y, fg2, bg2, attributes);
     }
     if (end > start) {
       const selectedText = text.slice(start, end);
-      this.drawTextFFI.call(this, selectedText, x + start, y, selectionFg, selectionBg, attributes);
+      this.lib.bufferDrawText(this.bufferPtr, selectedText, x + start, y, selectionFg, selectionBg, attributes);
     }
     if (end < text.length) {
       const afterText = text.slice(end);
-      this.drawTextFFI.call(this, afterText, x + end, y, fg2, bg2, attributes);
+      this.lib.bufferDrawText(this.bufferPtr, afterText, x + end, y, fg2, bg2, attributes);
     }
   }
   fillRect(x, y, width, height, bg2) {
-    if (this.useFFI) {
-      this.fillRectFFI(x, y, width, height, bg2);
-    } else {
-      this.fillRectLocal(x, y, width, height, bg2);
-    }
-  }
-  fillRectLocal(x, y, width, height, bg2) {
-    const startX = Math.max(0, x);
-    const startY = Math.max(0, y);
-    const endX = Math.min(this.width - 1, x + width - 1);
-    const endY = Math.min(this.height - 1, y + height - 1);
-    if (startX > endX || startY > endY)
-      return;
-    const hasAlpha = isRGBAWithAlpha(bg2);
-    if (hasAlpha) {
-      const fg2 = RGBA.fromValues(1, 1, 1, 1);
-      for (let fillY = startY;fillY <= endY; fillY++) {
-        for (let fillX = startX;fillX <= endX; fillX++) {
-          this.setCellWithAlphaBlending(fillX, fillY, " ", fg2, bg2, 0);
-        }
-      }
-    } else {
-      for (let fillY = startY;fillY <= endY; fillY++) {
-        for (let fillX = startX;fillX <= endX; fillX++) {
-          const index = this.coordsToIndex(fillX, fillY);
-          const colorIndex = index * 4;
-          this.buffer.char[index] = 32;
-          this.buffer.attributes[index] = 0;
-          this.buffer.fg[colorIndex] = 1;
-          this.buffer.fg[colorIndex + 1] = 1;
-          this.buffer.fg[colorIndex + 2] = 1;
-          this.buffer.fg[colorIndex + 3] = 1;
-          this.buffer.bg[colorIndex] = bg2.r;
-          this.buffer.bg[colorIndex + 1] = bg2.g;
-          this.buffer.bg[colorIndex + 2] = bg2.b;
-          this.buffer.bg[colorIndex + 3] = bg2.a;
-        }
-      }
-    }
+    this.lib.bufferFillRect(this.bufferPtr, x, y, width, height, bg2);
   }
   drawFrameBuffer(destX, destY, frameBuffer, sourceX, sourceY, sourceWidth, sourceHeight) {
-    this.drawFrameBufferFFI(destX, destY, frameBuffer, sourceX, sourceY, sourceWidth, sourceHeight);
-  }
-  drawFrameBufferLocal(destX, destY, frameBuffer, sourceX, sourceY, sourceWidth, sourceHeight) {
-    const srcX = sourceX ?? 0;
-    const srcY = sourceY ?? 0;
-    const srcWidth = sourceWidth ?? frameBuffer.width;
-    const srcHeight = sourceHeight ?? frameBuffer.height;
-    if (srcX >= frameBuffer.width || srcY >= frameBuffer.height)
-      return;
-    if (srcWidth === 0 || srcHeight === 0)
-      return;
-    const clampedSrcWidth = Math.min(srcWidth, frameBuffer.width - srcX);
-    const clampedSrcHeight = Math.min(srcHeight, frameBuffer.height - srcY);
-    const startDestX = Math.max(0, destX);
-    const startDestY = Math.max(0, destY);
-    const endDestX = Math.min(this._width - 1, destX + clampedSrcWidth - 1);
-    const endDestY = Math.min(this._height - 1, destY + clampedSrcHeight - 1);
-    if (!frameBuffer.respectAlpha) {
-      for (let dY = startDestY;dY <= endDestY; dY++) {
-        for (let dX = startDestX;dX <= endDestX; dX++) {
-          const relativeDestX = dX - destX;
-          const relativeDestY = dY - destY;
-          const sX = srcX + relativeDestX;
-          const sY = srcY + relativeDestY;
-          if (sX >= frameBuffer.width || sY >= frameBuffer.height)
-            continue;
-          const destIndex = this.coordsToIndex(dX, dY);
-          const srcIndex = frameBuffer.coordsToIndex(sX, sY);
-          const destColorIndex = destIndex * 4;
-          const srcColorIndex = srcIndex * 4;
-          this.buffer.char[destIndex] = frameBuffer.buffer.char[srcIndex];
-          this.buffer.attributes[destIndex] = frameBuffer.buffer.attributes[srcIndex];
-          this.buffer.fg[destColorIndex] = frameBuffer.buffer.fg[srcColorIndex];
-          this.buffer.fg[destColorIndex + 1] = frameBuffer.buffer.fg[srcColorIndex + 1];
-          this.buffer.fg[destColorIndex + 2] = frameBuffer.buffer.fg[srcColorIndex + 2];
-          this.buffer.fg[destColorIndex + 3] = frameBuffer.buffer.fg[srcColorIndex + 3];
-          this.buffer.bg[destColorIndex] = frameBuffer.buffer.bg[srcColorIndex];
-          this.buffer.bg[destColorIndex + 1] = frameBuffer.buffer.bg[srcColorIndex + 1];
-          this.buffer.bg[destColorIndex + 2] = frameBuffer.buffer.bg[srcColorIndex + 2];
-          this.buffer.bg[destColorIndex + 3] = frameBuffer.buffer.bg[srcColorIndex + 3];
-        }
-      }
-      return;
-    }
-    for (let dY = startDestY;dY <= endDestY; dY++) {
-      for (let dX = startDestX;dX <= endDestX; dX++) {
-        const relativeDestX = dX - destX;
-        const relativeDestY = dY - destY;
-        const sX = srcX + relativeDestX;
-        const sY = srcY + relativeDestY;
-        if (sX >= frameBuffer.width || sY >= frameBuffer.height)
-          continue;
-        const srcIndex = frameBuffer.coordsToIndex(sX, sY);
-        const srcColorIndex = srcIndex * 4;
-        if (frameBuffer.buffer.bg[srcColorIndex + 3] === 0 && frameBuffer.buffer.fg[srcColorIndex + 3] === 0) {
-          continue;
-        }
-        const charCode = frameBuffer.buffer.char[srcIndex];
-        const fg2 = RGBA.fromArray(frameBuffer.buffer.fg.slice(srcColorIndex, srcColorIndex + 4));
-        const bg2 = RGBA.fromArray(frameBuffer.buffer.bg.slice(srcColorIndex, srcColorIndex + 4));
-        const attributes = frameBuffer.buffer.attributes[srcIndex];
-        this.setCellWithAlphaBlending(dX, dY, String.fromCharCode(charCode), fg2, bg2, attributes);
-      }
-    }
+    this.lib.drawFrameBuffer(this.bufferPtr, destX, destY, frameBuffer.ptr, sourceX, sourceY, sourceWidth, sourceHeight);
   }
   destroy() {
     this.lib.destroyOptimizedBuffer(this.bufferPtr);
@@ -5144,35 +4848,18 @@ class OptimizedBuffer {
     this.lib.bufferDrawTextBuffer(this.bufferPtr, textBuffer.ptr, x, y, clipRect);
   }
   drawSuperSampleBuffer(x, y, pixelDataPtr, pixelDataLength, format, alignedBytesPerRow) {
-    this.drawSuperSampleBufferFFI(x, y, pixelDataPtr, pixelDataLength, format, alignedBytesPerRow);
-  }
-  drawSuperSampleBufferFFI(x, y, pixelDataPtr, pixelDataLength, format, alignedBytesPerRow) {
     this.lib.bufferDrawSuperSampleBuffer(this.bufferPtr, x, y, pixelDataPtr, pixelDataLength, format, alignedBytesPerRow);
   }
   drawPackedBuffer(dataPtr, dataLen, posX, posY, terminalWidthCells, terminalHeightCells) {
     this.lib.bufferDrawPackedBuffer(this.bufferPtr, dataPtr, dataLen, posX, posY, terminalWidthCells, terminalHeightCells);
   }
-  setCellWithAlphaBlendingFFI(x, y, char, fg2, bg2, attributes) {
-    this.lib.bufferSetCellWithAlphaBlending(this.bufferPtr, x, y, char, fg2, bg2, attributes);
-  }
-  fillRectFFI(x, y, width, height, bg2) {
-    this.lib.bufferFillRect(this.bufferPtr, x, y, width, height, bg2);
-  }
   resize(width, height) {
     if (this._width === width && this._height === height)
       return;
     this._width = width;
     this._height = height;
-    this.buffer = this.lib.bufferResize(this.bufferPtr, width, height);
-  }
-  clearFFI(bg2 = RGBA.fromValues(0, 0, 0, 1)) {
-    this.lib.bufferClear(this.bufferPtr, bg2);
-  }
-  drawTextFFI(text, x, y, fg2 = RGBA.fromValues(1, 1, 1, 1), bg2, attributes = 0) {
-    this.lib.bufferDrawText(this.bufferPtr, text, x, y, fg2, bg2, attributes);
-  }
-  drawFrameBufferFFI(destX, destY, frameBuffer, sourceX, sourceY, sourceWidth, sourceHeight) {
-    this.lib.drawFrameBuffer(this.bufferPtr, destX, destY, frameBuffer.ptr, sourceX, sourceY, sourceWidth, sourceHeight);
+    this._rawBuffers = null;
+    this.lib.bufferResize(this.bufferPtr, width, height);
   }
   drawBox(options) {
     const style = options.borderStyle || "single";
@@ -5180,6 +4867,15 @@ class OptimizedBuffer {
     const packedOptions = packDrawOptions(options.border, options.shouldFill ?? false, options.titleAlignment || "left");
     this.lib.bufferDrawBox(this.bufferPtr, options.x, options.y, options.width, options.height, borderChars, packedOptions, options.borderColor, options.backgroundColor, options.title ?? null);
   }
+  pushScissorRect(x, y, width, height) {
+    this.lib.bufferPushScissorRect(this.bufferPtr, x, y, width, height);
+  }
+  popScissorRect() {
+    this.lib.bufferPopScissorRect(this.bufferPtr);
+  }
+  clearScissorRects() {
+    this.lib.bufferClearScissorRects(this.bufferPtr);
+  }
 }
 
 // src/zig.ts
@@ -5191,6 +4887,10 @@ if (!existsSync(targetLibPath)) {
 function getOpenTUILib(libPath) {
   const resolvedLibPath = libPath || targetLibPath;
   return dlopen(resolvedLibPath, {
+    setLogCallback: {
+      args: ["ptr"],
+      returns: "void"
+    },
     createRenderer: {
       args: ["u32", "u32"],
       returns: "ptr"
@@ -5232,7 +4932,7 @@ function getOpenTUILib(libPath) {
       returns: "ptr"
     },
     createOptimizedBuffer: {
-      args: ["u32", "u32", "bool", "u8"],
+      args: ["u32", "u32", "bool", "u8", "ptr", "usize"],
       returns: "ptr"
     },
     destroyOptimizedBuffer: {
@@ -5279,6 +4979,10 @@ function getOpenTUILib(libPath) {
       args: ["ptr", "bool"],
       returns: "void"
     },
+    bufferGetId: {
+      args: ["ptr", "ptr", "usize"],
+      returns: "usize"
+    },
     bufferDrawText: {
       args: ["ptr", "ptr", "u32", "u32", "u32", "ptr", "ptr", "u8"],
       returns: "void"
@@ -5287,6 +4991,10 @@ function getOpenTUILib(libPath) {
       args: ["ptr", "u32", "u32", "u32", "ptr", "ptr", "u8"],
       returns: "void"
     },
+    bufferSetCell: {
+      args: ["ptr", "u32", "u32", "u32", "ptr", "ptr", "u8"],
+      returns: "void"
+    },
     bufferFillRect: {
       args: ["ptr", "u32", "u32", "u32", "u32", "ptr"],
       returns: "void"
@@ -5335,6 +5043,18 @@ function getOpenTUILib(libPath) {
       args: ["ptr", "i32", "i32", "u32", "u32", "ptr", "u32", "ptr", "ptr", "ptr", "u32"],
       returns: "void"
     },
+    bufferPushScissorRect: {
+      args: ["ptr", "i32", "i32", "u32", "u32"],
+      returns: "void"
+    },
+    bufferPopScissorRect: {
+      args: ["ptr"],
+      returns: "void"
+    },
+    bufferClearScissorRects: {
+      args: ["ptr"],
+      returns: "void"
+    },
     addToHitGrid: {
       args: ["ptr", "i32", "i32", "u32", "u32", "u32"],
       returns: "void"
@@ -5387,30 +5107,10 @@ function getOpenTUILib(libPath) {
       args: ["ptr"],
       returns: "ptr"
     },
-    textBufferGetFgPtr: {
-      args: ["ptr"],
-      returns: "ptr"
-    },
-    textBufferGetBgPtr: {
-      args: ["ptr"],
-      returns: "ptr"
-    },
-    textBufferGetAttributesPtr: {
-      args: ["ptr"],
-      returns: "ptr"
-    },
     textBufferGetLength: {
       args: ["ptr"],
       returns: "u32"
     },
-    textBufferSetCell: {
-      args: ["ptr", "u32", "u32", "ptr", "ptr", "u16"],
-      returns: "void"
-    },
-    textBufferConcat: {
-      args: ["ptr", "ptr"],
-      returns: "ptr"
-    },
     textBufferResize: {
       args: ["ptr", "u32"],
       returns: "void"
@@ -5455,17 +5155,29 @@ function getOpenTUILib(libPath) {
       args: ["ptr"],
       returns: "void"
     },
-    textBufferGetLineStartsPtr: {
+    textBufferGetLineCount: {
       args: ["ptr"],
-      returns: "ptr"
+      returns: "u32"
     },
-    textBufferGetLineWidthsPtr: {
+    textBufferGetLineInfoDirect: {
+      args: ["ptr", "ptr", "ptr"],
+      returns: "void"
+    },
+    textBufferGetSelectionInfo: {
       args: ["ptr"],
-      returns: "ptr"
+      returns: "u64"
     },
-    textBufferGetLineCount: {
+    textBufferGetSelectedText: {
+      args: ["ptr", "ptr", "usize"],
+      returns: "usize"
+    },
+    textBufferSetLocalSelection: {
+      args: ["ptr", "i32", "i32", "i32", "i32", "ptr", "ptr"],
+      returns: "bool"
+    },
+    textBufferResetLocalSelection: {
       args: ["ptr"],
-      returns: "u32"
+      returns: "void"
     },
     bufferDrawTextBuffer: {
       args: ["ptr", "ptr", "i32", "i32", "i32", "i32", "u32", "u32", "bool"],
@@ -5481,12 +5193,67 @@ function getOpenTUILib(libPath) {
     }
   });
 }
+var LogLevel2;
+((LogLevel3) => {
+  LogLevel3[LogLevel3["Error"] = 0] = "Error";
+  LogLevel3[LogLevel3["Warn"] = 1] = "Warn";
+  LogLevel3[LogLevel3["Info"] = 2] = "Info";
+  LogLevel3[LogLevel3["Debug"] = 3] = "Debug";
+})(LogLevel2 ||= {});
 
 class FFIRenderLib {
   opentui;
   encoder = new TextEncoder;
+  decoder = new TextDecoder;
+  logCallbackWrapper;
   constructor(libPath) {
     this.opentui = getOpenTUILib(libPath);
+    this.setupLogging();
+  }
+  setupLogging() {
+    if (this.logCallbackWrapper) {
+      return;
+    }
+    const logCallback = new JSCallback((level, msgPtr, msgLenBigInt) => {
+      try {
+        const msgLen = typeof msgLenBigInt === "bigint" ? Number(msgLenBigInt) : msgLenBigInt;
+        if (msgLen === 0 || !msgPtr) {
+          return;
+        }
+        const msgBuffer = toArrayBuffer2(msgPtr, 0, msgLen);
+        const msgBytes = new Uint8Array(msgBuffer);
+        const message = this.decoder.decode(msgBytes);
+        switch (level) {
+          case 0 /* Error */:
+            console.error(message);
+            break;
+          case 1 /* Warn */:
+            console.warn(message);
+            break;
+          case 2 /* Info */:
+            console.info(message);
+            break;
+          case 3 /* Debug */:
+            console.debug(message);
+            break;
+          default:
+            console.log(message);
+        }
+      } catch (error) {
+        console.error("Error in Zig log callback:", error);
+      }
+    }, {
+      args: ["u8", "ptr", "usize"],
+      returns: "void"
+    });
+    this.logCallbackWrapper = logCallback;
+    if (!logCallback.ptr) {
+      throw new Error("Failed to create log callback");
+    }
+    this.setLogCallback(logCallback.ptr);
+  }
+  setLogCallback(callbackPtr) {
+    this.opentui.symbols.setLogCallback(callbackPtr);
   }
   createRenderer(width, height) {
     return this.opentui.symbols.createRenderer(width, height);
@@ -5516,9 +5283,7 @@ class FFIRenderLib {
     }
     const width = this.opentui.symbols.getBufferWidth(bufferPtr);
     const height = this.opentui.symbols.getBufferHeight(bufferPtr);
-    const size = width * height;
-    const buffers = this.getBuffer(bufferPtr, size);
-    return new OptimizedBuffer(this, bufferPtr, buffers, width, height, {});
+    return new OptimizedBuffer(this, bufferPtr, width, height, { id: "next buffer" });
   }
   getCurrentBuffer(renderer) {
     const bufferPtr = this.opentui.symbols.getCurrentBuffer(renderer);
@@ -5527,69 +5292,35 @@ class FFIRenderLib {
     }
     const width = this.opentui.symbols.getBufferWidth(bufferPtr);
     const height = this.opentui.symbols.getBufferHeight(bufferPtr);
-    const size = width * height;
-    const buffers = this.getBuffer(bufferPtr, size);
-    return new OptimizedBuffer(this, bufferPtr, buffers, width, height, {});
-  }
-  getBuffer(bufferPtr, size) {
-    const charPtr = this.opentui.symbols.bufferGetCharPtr(bufferPtr);
-    const fgPtr = this.opentui.symbols.bufferGetFgPtr(bufferPtr);
-    const bgPtr = this.opentui.symbols.bufferGetBgPtr(bufferPtr);
-    const attributesPtr = this.opentui.symbols.bufferGetAttributesPtr(bufferPtr);
-    if (!charPtr || !fgPtr || !bgPtr || !attributesPtr) {
-      throw new Error("Failed to get buffer pointers");
-    }
-    const buffers = {
-      char: new Uint32Array(toArrayBuffer(charPtr, 0, size * 4)),
-      fg: new Float32Array(toArrayBuffer(fgPtr, 0, size * 4 * 4)),
-      bg: new Float32Array(toArrayBuffer(bgPtr, 0, size * 4 * 4)),
-      attributes: new Uint8Array(toArrayBuffer(attributesPtr, 0, size))
-    };
-    return buffers;
-  }
-  getTextBuffer(bufferPtr, size) {
-    const charPtr = this.opentui.symbols.textBufferGetCharPtr(bufferPtr);
-    const fgPtr = this.opentui.symbols.textBufferGetFgPtr(bufferPtr);
-    const bgPtr = this.opentui.symbols.textBufferGetBgPtr(bufferPtr);
-    const attributesPtr = this.opentui.symbols.textBufferGetAttributesPtr(bufferPtr);
-    if (!charPtr || !fgPtr || !bgPtr || !attributesPtr) {
-      throw new Error("Failed to get text buffer pointers");
-    }
-    const buffers = {
-      char: new Uint32Array(toArrayBuffer(charPtr, 0, size * 4)),
-      fg: new Float32Array(toArrayBuffer(fgPtr, 0, size * 4 * 4)),
-      bg: new Float32Array(toArrayBuffer(bgPtr, 0, size * 4 * 4)),
-      attributes: new Uint16Array(toArrayBuffer(attributesPtr, 0, size * 2))
-    };
-    return buffers;
+    return new OptimizedBuffer(this, bufferPtr, width, height, { id: "current buffer" });
   }
   bufferGetCharPtr(buffer) {
-    const ptr = this.opentui.symbols.bufferGetCharPtr(buffer);
-    if (!ptr) {
+    const ptr2 = this.opentui.symbols.bufferGetCharPtr(buffer);
+    if (!ptr2) {
       throw new Error("Failed to get char pointer");
     }
-    return ptr;
+    return ptr2;
   }
   bufferGetFgPtr(buffer) {
-    const ptr = this.opentui.symbols.bufferGetFgPtr(buffer);
-    if (!ptr) {
+    const ptr2 = this.opentui.symbols.bufferGetFgPtr(buffer);
+    if (!ptr2) {
       throw new Error("Failed to get fg pointer");
     }
-    return ptr;
+    return ptr2;
   }
   bufferGetBgPtr(buffer) {
-    const ptr = this.opentui.symbols.bufferGetBgPtr(buffer);
-    if (!ptr) {
+    const ptr2 = this.opentui.symbols.bufferGetBgPtr(buffer);
+    if (!ptr2) {
       throw new Error("Failed to get bg pointer");
     }
-    return ptr;
+    return ptr2;
   }
   bufferGetAttributesPtr(buffer) {
-    const ptr = this.opentui.symbols.bufferGetAttributesPtr(buffer);
-    if (!ptr) {
+    const ptr2 = this.opentui.symbols.bufferGetAttributesPtr(buffer);
+    if (!ptr2) {
       throw new Error("Failed to get attributes pointer");
     }
-    return ptr;
+    return ptr2;
   }
   bufferGetRespectAlpha(buffer) {
     return this.opentui.symbols.bufferGetRespectAlpha(buffer);
@@ -5597,6 +5328,13 @@ class FFIRenderLib {
   bufferSetRespectAlpha(buffer, respectAlpha) {
     this.opentui.symbols.bufferSetRespectAlpha(buffer, respectAlpha);
   }
+  bufferGetId(buffer) {
+    const maxLen = 256;
+    const outBuffer = new Uint8Array(maxLen);
+    const actualLen = this.opentui.symbols.bufferGetId(buffer, outBuffer, maxLen);
+    const len = typeof actualLen === "bigint" ? Number(actualLen) : actualLen;
+    return this.decoder.decode(outBuffer.slice(0, len));
+  }
   getBufferWidth(buffer) {
     return this.opentui.symbols.getBufferWidth(buffer);
   }
@@ -5619,6 +5357,12 @@ class FFIRenderLib {
     const fg2 = color.buffer;
     this.opentui.symbols.bufferSetCellWithAlphaBlending(buffer, x, y, charPtr, fg2, bg2, attributes ?? 0);
   }
+  bufferSetCell(buffer, x, y, char, color, bgColor, attributes) {
+    const charPtr = char.codePointAt(0) ?? " ".codePointAt(0);
+    const bg2 = bgColor.buffer;
+    const fg2 = color.buffer;
+    this.opentui.symbols.bufferSetCell(buffer, x, y, charPtr, fg2, bg2, attributes ?? 0);
+  }
   bufferFillRect(buffer, x, y, width, height, color) {
     const bg2 = color.buffer;
     this.opentui.symbols.bufferFillRect(buffer, x, y, width, height, bg2);
@@ -5638,8 +5382,6 @@ class FFIRenderLib {
   }
   bufferResize(buffer, width, height) {
     this.opentui.symbols.bufferResize(buffer, width, height);
-    const buffers = this.getBuffer(buffer, width * height);
-    return buffers;
   }
   resizeRenderer(renderer, width, height) {
     this.opentui.symbols.resizeRenderer(renderer, width, height);
@@ -5657,18 +5399,18 @@ class FFIRenderLib {
   render(renderer, force) {
     this.opentui.symbols.render(renderer, force);
   }
-  createOptimizedBuffer(width, height, widthMethod, respectAlpha = false) {
+  createOptimizedBuffer(width, height, widthMethod, respectAlpha = false, id) {
     if (Number.isNaN(width) || Number.isNaN(height)) {
       console.error(new Error(`Invalid dimensions for OptimizedBuffer: ${width}x${height}`).stack);
     }
     const widthMethodCode = widthMethod === "wcwidth" ? 0 : 1;
-    const bufferPtr = this.opentui.symbols.createOptimizedBuffer(width, height, respectAlpha, widthMethodCode);
+    const idToUse = id || "unnamed buffer";
+    const idBytes = this.encoder.encode(idToUse);
+    const bufferPtr = this.opentui.symbols.createOptimizedBuffer(width, height, respectAlpha, widthMethodCode, idBytes, idBytes.length);
     if (!bufferPtr) {
       throw new Error(`Failed to create optimized buffer: ${width}x${height}`);
     }
-    const size = width * height;
-    const buffers = this.getBuffer(bufferPtr, size);
-    return new OptimizedBuffer(this, bufferPtr, buffers, width, height, { respectAlpha });
+    return new OptimizedBuffer(this, bufferPtr, width, height, { respectAlpha, id });
   }
   destroyOptimizedBuffer(bufferPtr) {
     this.opentui.symbols.destroyOptimizedBuffer(bufferPtr);
@@ -5728,77 +5470,23 @@ class FFIRenderLib {
     if (!bufferPtr) {
       throw new Error(`Failed to create TextBuffer with capacity ${capacity}`);
     }
-    const charPtr = this.textBufferGetCharPtr(bufferPtr);
-    const fgPtr = this.textBufferGetFgPtr(bufferPtr);
-    const bgPtr = this.textBufferGetBgPtr(bufferPtr);
-    const attributesPtr = this.textBufferGetAttributesPtr(bufferPtr);
-    const buffer = {
-      char: new Uint32Array(toArrayBuffer(charPtr, 0, capacity * 4)),
-      fg: new Float32Array(toArrayBuffer(fgPtr, 0, capacity * 4 * 4)),
-      bg: new Float32Array(toArrayBuffer(bgPtr, 0, capacity * 4 * 4)),
-      attributes: new Uint16Array(toArrayBuffer(attributesPtr, 0, capacity * 2))
-    };
-    return new TextBuffer(this, bufferPtr, buffer, capacity);
+    return new TextBuffer(this, bufferPtr, capacity);
   }
   destroyTextBuffer(buffer) {
     this.opentui.symbols.destroyTextBuffer(buffer);
   }
   textBufferGetCharPtr(buffer) {
-    const ptr = this.opentui.symbols.textBufferGetCharPtr(buffer);
-    if (!ptr) {
+    const ptr2 = this.opentui.symbols.textBufferGetCharPtr(buffer);
+    if (!ptr2) {
       throw new Error("Failed to get TextBuffer char pointer");
     }
-    return ptr;
-  }
-  textBufferGetFgPtr(buffer) {
-    const ptr = this.opentui.symbols.textBufferGetFgPtr(buffer);
-    if (!ptr) {
-      throw new Error("Failed to get TextBuffer fg pointer");
-    }
-    return ptr;
-  }
-  textBufferGetBgPtr(buffer) {
-    const ptr = this.opentui.symbols.textBufferGetBgPtr(buffer);
-    if (!ptr) {
-      throw new Error("Failed to get TextBuffer bg pointer");
-    }
-    return ptr;
-  }
-  textBufferGetAttributesPtr(buffer) {
-    const ptr = this.opentui.symbols.textBufferGetAttributesPtr(buffer);
-    if (!ptr) {
-      throw new Error("Failed to get TextBuffer attributes pointer");
-    }
-    return ptr;
+    return ptr2;
   }
   textBufferGetLength(buffer) {
     return this.opentui.symbols.textBufferGetLength(buffer);
   }
-  textBufferSetCell(buffer, index, char, fg2, bg2, attr) {
-    this.opentui.symbols.textBufferSetCell(buffer, index, char, fg2, bg2, attr);
-  }
-  textBufferConcat(buffer1, buffer2) {
-    const resultPtr = this.opentui.symbols.textBufferConcat(buffer1, buffer2);
-    if (!resultPtr) {
-      throw new Error("Failed to concatenate TextBuffers");
-    }
-    const length = this.textBufferGetLength(resultPtr);
-    const charPtr = this.textBufferGetCharPtr(resultPtr);
-    const fgPtr = this.textBufferGetFgPtr(resultPtr);
-    const bgPtr = this.textBufferGetBgPtr(resultPtr);
-    const attributesPtr = this.textBufferGetAttributesPtr(resultPtr);
-    const buffer = {
-      char: new Uint32Array(toArrayBuffer(charPtr, 0, length * 4)),
-      fg: new Float32Array(toArrayBuffer(fgPtr, 0, length * 4 * 4)),
-      bg: new Float32Array(toArrayBuffer(bgPtr, 0, length * 4 * 4)),
-      attributes: new Uint16Array(toArrayBuffer(attributesPtr, 0, length * 2))
-    };
-    return new TextBuffer(this, resultPtr, buffer, length);
-  }
   textBufferResize(buffer, newLength) {
     this.opentui.symbols.textBufferResize(buffer, newLength);
-    const buffers = this.getTextBuffer(buffer, newLength);
-    return buffers;
   }
   textBufferReset(buffer) {
     this.opentui.symbols.textBufferReset(buffer);
@@ -5836,24 +5524,56 @@ class FFIRenderLib {
   textBufferFinalizeLineInfo(buffer) {
     this.opentui.symbols.textBufferFinalizeLineInfo(buffer);
   }
+  textBufferGetLineCount(buffer) {
+    return this.opentui.symbols.textBufferGetLineCount(buffer);
+  }
+  textBufferGetLineInfoDirect(buffer, lineStartsPtr, lineWidthsPtr) {
+    this.opentui.symbols.textBufferGetLineInfoDirect(buffer, lineStartsPtr, lineWidthsPtr);
+  }
+  textBufferGetSelection(buffer) {
+    const packedInfo = this.textBufferGetSelectionInfo(buffer);
+    if (packedInfo === 0xffff_ffff_ffff_ffffn) {
+      return null;
+    }
+    const start = Number(packedInfo >> 32n);
+    const end = Number(packedInfo & 0xffff_ffffn);
+    return { start, end };
+  }
+  textBufferGetSelectionInfo(buffer) {
+    return this.opentui.symbols.textBufferGetSelectionInfo(buffer);
+  }
+  textBufferGetSelectedText(buffer, outPtr, maxLen) {
+    const result = this.opentui.symbols.textBufferGetSelectedText(buffer, outPtr, maxLen);
+    return typeof result === "bigint" ? Number(result) : result;
+  }
+  getSelectedTextBytes(buffer, maxLength) {
+    const outBuffer = new Uint8Array(maxLength);
+    const actualLen = this.textBufferGetSelectedText(buffer, ptr(outBuffer), maxLength);
+    if (actualLen === 0) {
+      return null;
+    }
+    return outBuffer.slice(0, actualLen);
+  }
+  textBufferSetLocalSelection(buffer, anchorX, anchorY, focusX, focusY, bgColor, fgColor) {
+    const bg2 = bgColor ? bgColor.buffer : null;
+    const fg2 = fgColor ? fgColor.buffer : null;
+    return this.opentui.symbols.textBufferSetLocalSelection(buffer, anchorX, anchorY, focusX, focusY, bg2, fg2);
+  }
+  textBufferResetLocalSelection(buffer) {
+    this.opentui.symbols.textBufferResetLocalSelection(buffer);
+  }
   textBufferGetLineInfo(buffer) {
-    const lineCount = this.opentui.symbols.textBufferGetLineCount(buffer);
+    const lineCount = this.textBufferGetLineCount(buffer);
     if (lineCount === 0) {
       return { lineStarts: [], lineWidths: [] };
     }
-    const lineStartsPtr = this.opentui.symbols.textBufferGetLineStartsPtr(buffer);
-    const lineWidthsPtr = this.opentui.symbols.textBufferGetLineWidthsPtr(buffer);
-    if (!lineStartsPtr || !lineWidthsPtr) {
-      return { lineStarts: [], lineWidths: [] };
-    }
-    const lineStartsArray = new Uint32Array(toArrayBuffer(lineStartsPtr, 0, lineCount * 4));
-    const lineWidthsArray = new Uint32Array(toArrayBuffer(lineWidthsPtr, 0, lineCount * 4));
-    const lineStarts = Array.from(lineStartsArray);
-    const lineWidths = Array.from(lineWidthsArray);
-    return { lineStarts, lineWidths };
-  }
-  getTextBufferArrays(buffer, size) {
-    return this.getTextBuffer(buffer, size);
+    const lineStarts = new Uint32Array(lineCount);
+    const lineWidths = new Uint32Array(lineCount);
+    this.textBufferGetLineInfoDirect(buffer, ptr(lineStarts), ptr(lineWidths));
+    return {
+      lineStarts: Array.from(lineStarts),
+      lineWidths: Array.from(lineWidths)
+    };
   }
   bufferDrawTextBuffer(buffer, textBuffer, x, y, clipRect) {
     const hasClipRect = clipRect !== undefined && clipRect !== null;
@@ -5863,6 +5583,15 @@ class FFIRenderLib {
     const clipHeight = clipRect?.height ?? 0;
     this.opentui.symbols.bufferDrawTextBuffer(buffer, textBuffer, x, y, clipX, clipY, clipWidth, clipHeight, hasClipRect);
   }
+  bufferPushScissorRect(buffer, x, y, width, height) {
+    this.opentui.symbols.bufferPushScissorRect(buffer, x, y, width, height);
+  }
+  bufferPopScissorRect(buffer) {
+    this.opentui.symbols.bufferPopScissorRect(buffer);
+  }
+  bufferClearScissorRects(buffer) {
+    this.opentui.symbols.bufferClearScissorRects(buffer);
+  }
   getTerminalCapabilities(renderer) {
     const capsBuffer = new Uint8Array(64);
     this.opentui.symbols.getTerminalCapabilities(renderer, capsBuffer);
@@ -5915,25 +5644,18 @@ try {
 class TextBuffer {
   lib;
   bufferPtr;
-  buffer;
   _length = 0;
   _capacity;
   _lineInfo;
-  constructor(lib, ptr, buffer, capacity) {
+  constructor(lib, ptr2, capacity) {
     this.lib = lib;
-    this.bufferPtr = ptr;
-    this.buffer = buffer;
+    this.bufferPtr = ptr2;
     this._capacity = capacity;
   }
   static create(capacity = 256, widthMethod) {
     const lib = resolveRenderLib();
     return lib.createTextBuffer(capacity, widthMethod);
   }
-  syncBuffersAfterResize() {
-    const capacity = this.lib.textBufferGetCapacity(this.bufferPtr);
-    this.buffer = this.lib.getTextBufferArrays(this.bufferPtr, capacity);
-    this._capacity = capacity;
-  }
   setStyledText(text) {
     this.lib.textBufferReset(this.bufferPtr);
     this._length = 0;
@@ -5941,7 +5663,7 @@ class TextBuffer {
     for (const chunk of text.chunks) {
       const result = this.lib.textBufferWriteChunk(this.bufferPtr, chunk.text, chunk.fg || null, chunk.bg || null, chunk.attributes ?? null);
       if (result & 1) {
-        this.syncBuffersAfterResize();
+        this._capacity = this.lib.textBufferGetCapacity(this.bufferPtr);
       }
     }
     this.lib.textBufferFinalizeLineInfo(this.bufferPtr);
@@ -5968,28 +5690,38 @@ class TextBuffer {
   get ptr() {
     return this.bufferPtr;
   }
+  getSelectedText() {
+    if (this._length === 0)
+      return "";
+    const selectedBytes = this.lib.getSelectedTextBytes(this.bufferPtr, this._length);
+    if (!selectedBytes)
+      return "";
+    return this.lib.decoder.decode(selectedBytes);
+  }
   get lineInfo() {
     if (!this._lineInfo) {
       this._lineInfo = this.lib.textBufferGetLineInfo(this.bufferPtr);
     }
     return this._lineInfo;
   }
-  toString() {
-    const chars = [];
-    for (let i = 0;i < this._length; i++) {
-      chars.push(String.fromCharCode(this.buffer.char[i]));
-    }
-    return chars.join("");
-  }
-  concat(other) {
-    return this.lib.textBufferConcat(this.bufferPtr, other.bufferPtr);
-  }
   setSelection(start, end, bgColor, fgColor) {
     this.lib.textBufferSetSelection(this.bufferPtr, start, end, bgColor || null, fgColor || null);
   }
   resetSelection() {
     this.lib.textBufferResetSelection(this.bufferPtr);
   }
+  setLocalSelection(anchorX, anchorY, focusX, focusY, bgColor, fgColor) {
+    return this.lib.textBufferSetLocalSelection(this.bufferPtr, anchorX, anchorY, focusX, focusY, bgColor || null, fgColor || null);
+  }
+  resetLocalSelection() {
+    this.lib.textBufferResetLocalSelection(this.bufferPtr);
+  }
+  getSelection() {
+    return this.lib.textBufferGetSelection(this.bufferPtr);
+  }
+  hasSelection() {
+    return this.getSelection() !== null;
+  }
   destroy() {
     this.lib.destroyTextBuffer(this.bufferPtr);
   }
@@ -5997,6 +5729,7 @@ class TextBuffer {
 
 // src/Renderable.ts
 import { EventEmitter as EventEmitter3 } from "events";
+var BrandedRenderable = Symbol.for("@opentui/core/Renderable");
 var LayoutEvents;
 ((LayoutEvents2) => {
   LayoutEvents2["LAYOUT_CHANGED"] = "layout-changed";
@@ -6053,9 +5786,12 @@ function isPositionType(value) {
   }
   return isValidPercentage(value);
 }
-function isPostionTypeType(value) {
+function isPositionTypeType(value) {
   return value === "relative" || value === "absolute";
 }
+function isOverflowType(value) {
+  return value === "visible" || value === "hidden" || value === "scroll";
+}
 function isDimensionType(value) {
   return isPositionType(value);
 }
@@ -6077,13 +5813,19 @@ function isSizeType(value) {
   }
   return isValidPercentage(value);
 }
+function isRenderable(obj) {
+  return !!obj?.[BrandedRenderable];
+}
 
 class Renderable extends EventEmitter3 {
+  [BrandedRenderable] = true;
   static renderableNumber = 1;
   static renderablesByNumber = new Map;
   id;
   num;
   _ctx;
+  _translateX = 0;
+  _translateY = 0;
   _x = 0;
   _y = 0;
   _width;
@@ -6102,17 +5844,20 @@ class Renderable extends EventEmitter3 {
   keypressHandler = null;
   _live = false;
   _liveCount = 0;
+  _sizeChangeListener = undefined;
   _mouseListener = null;
   _mouseListeners = {};
   _keyListeners = {};
   layoutNode;
   _positionType = "relative";
+  _overflow = "visible";
   _position = {};
-  _childHostOverride = null;
   renderableMap = new Map;
   renderableArray = [];
   needsZIndexSort = false;
   parent = null;
+  childrenPrimarySortDirty = true;
+  childrenSortedByPrimaryAxis = [];
   renderBefore;
   renderAfter;
   constructor(ctx, options) {
@@ -6167,7 +5912,7 @@ class Renderable extends EventEmitter3 {
     if (this._focused) {
       this.blur();
     }
-    this.needsUpdate();
+    this.requestRender();
   }
   hasSelection() {
     return false;
@@ -6182,14 +5927,10 @@ class Renderable extends EventEmitter3 {
     return false;
   }
   focus() {
-    if (this.childHost !== this) {
-      this.childHost.focus();
-      return;
-    }
     if (this._focused || !this.focusable)
       return;
     this._focused = true;
-    this.needsUpdate();
+    this.requestRender();
     this.keypressHandler = (key) => {
       this._keyListeners["down"]?.(key);
       if (this.handleKeyPress) {
@@ -6200,14 +5941,10 @@ class Renderable extends EventEmitter3 {
     this.emit("focused" /* FOCUSED */);
   }
   blur() {
-    if (this.childHost !== this) {
-      this.childHost.blur();
-      return;
-    }
     if (!this._focused || !this.focusable)
       return;
     this._focused = false;
-    this.needsUpdate();
+    this.requestRender();
     if (this.keypressHandler) {
       this.keyHandler.off("keypress", this.keypressHandler);
       this.keypressHandler = null;
@@ -6239,12 +5976,6 @@ class Renderable extends EventEmitter3 {
   get isDirty() {
     return this._dirty;
   }
-  get childHost() {
-    return this._childHostOverride || this;
-  }
-  set childHost(host) {
-    this._childHostOverride = host;
-  }
   findDescendantById(id) {
     for (const child of this.renderableArray) {
       if (child.id === id)
@@ -6255,26 +5986,40 @@ class Renderable extends EventEmitter3 {
     }
     return;
   }
-  setChildHostById(id) {
-    const found = this.findDescendantById(id);
-    if (found) {
-      this._childHostOverride = found;
-      return true;
-    }
-    return false;
-  }
   markClean() {
     this._dirty = false;
   }
-  needsUpdate() {
+  requestRender() {
     this._dirty = true;
-    this._ctx.needsUpdate();
+    this._ctx.requestRender();
+  }
+  get translateX() {
+    return this._translateX;
+  }
+  set translateX(value) {
+    if (this._translateX === value)
+      return;
+    this._translateX = value;
+    this.requestRender();
+    if (this.parent)
+      this.parent.childrenPrimarySortDirty = true;
+  }
+  get translateY() {
+    return this._translateY;
+  }
+  set translateY(value) {
+    if (this._translateY === value)
+      return;
+    this._translateY = value;
+    this.requestRender();
+    if (this.parent)
+      this.parent.childrenPrimarySortDirty = true;
   }
   get x() {
     if (this.parent && this._positionType === "relative") {
-      return this.parent.x + this._x;
+      return this.parent.x + this._x + this._translateX;
     }
-    return this._x;
+    return this._x + this._translateX;
   }
   set x(value) {
     this.left = value;
@@ -6313,9 +6058,9 @@ class Renderable extends EventEmitter3 {
   }
   get y() {
     if (this.parent && this._positionType === "relative") {
-      return this.parent.y + this._y;
+      return this.parent.y + this._y + this._translateY;
     }
-    return this._y;
+    return this._y + this._translateY;
   }
   set y(value) {
     this.top = value;
@@ -6327,7 +6072,7 @@ class Renderable extends EventEmitter3 {
     if (isDimensionType(value)) {
       this._width = value;
       this.layoutNode.setWidth(value);
-      this.needsUpdate();
+      this.requestRender();
     }
   }
   get height() {
@@ -6337,7 +6082,7 @@ class Renderable extends EventEmitter3 {
     if (isDimensionType(value)) {
       this._height = value;
       this.layoutNode.setHeight(value);
-      this.needsUpdate();
+      this.requestRender();
     }
   }
   get zIndex() {
@@ -6358,6 +6103,96 @@ class Renderable extends EventEmitter3 {
       this.needsZIndexSort = false;
     }
   }
+  getChildrenInViewport(viewport, padding = 10, minTriggerSize = 16) {
+    if (this.renderableArray.length < minTriggerSize)
+      return this.renderableArray;
+    const viewportTop = viewport.y - padding;
+    const viewportBottom = viewport.y + viewport.height + padding;
+    const viewportLeft = viewport.x - padding;
+    const viewportRight = viewport.x + viewport.width + padding;
+    const dir = this.layoutNode.yogaNode.getFlexDirection();
+    const isRow = dir === 2 || dir === 3;
+    const children = this.getChildrenSortedByPrimaryAxis();
+    const totalChildren = children.length;
+    if (totalChildren === 0)
+      return [];
+    const vpStart = isRow ? viewportLeft : viewportTop;
+    const vpEnd = isRow ? viewportRight : viewportBottom;
+    let lo = 0;
+    let hi = totalChildren - 1;
+    let candidate = -1;
+    while (lo <= hi) {
+      const mid = lo + hi >> 1;
+      const c = children[mid];
+      const start = isRow ? c.x : c.y;
+      const end = isRow ? c.x + c.width : c.y + c.height;
+      if (end < vpStart) {
+        lo = mid + 1;
+      } else if (start > vpEnd) {
+        hi = mid - 1;
+      } else {
+        candidate = mid;
+        break;
+      }
+    }
+    const visibleChildren = [];
+    if (candidate === -1) {
+      return visibleChildren;
+    }
+    let left = candidate;
+    while (left - 1 >= 0) {
+      const prev = children[left - 1];
+      if ((isRow ? prev.x + prev.width : prev.y + prev.height) < vpStart)
+        break;
+      left--;
+    }
+    let right = candidate + 1;
+    while (right < totalChildren) {
+      const next = children[right];
+      if ((isRow ? next.x : next.y) > vpEnd)
+        break;
+      right++;
+    }
+    for (let i = left;i < right; i++) {
+      const child = children[i];
+      if (isRow) {
+        const childBottom = child.y + child.height;
+        if (childBottom < viewportTop)
+          continue;
+        const childTop = child.y;
+        if (childTop > viewportBottom)
+          continue;
+      } else {
+        const childRight = child.x + child.width;
+        if (childRight < viewportLeft)
+          continue;
+        const childLeft = child.x;
+        if (childLeft > viewportRight)
+          continue;
+      }
+      visibleChildren.push(child);
+    }
+    if (visibleChildren.length > 1) {
+      visibleChildren.sort((a, b) => a.zIndex > b.zIndex ? 1 : a.zIndex < b.zIndex ? -1 : 0);
+    }
+    return visibleChildren;
+  }
+  getChildrenSortedByPrimaryAxis() {
+    if (!this.childrenPrimarySortDirty && this.childrenSortedByPrimaryAxis.length === this.renderableArray.length) {
+      return this.childrenSortedByPrimaryAxis;
+    }
+    const dir = this.layoutNode.yogaNode.getFlexDirection();
+    const axis = dir === 2 || dir === 3 ? "x" : "y";
+    const sorted = [...this.renderableArray];
+    sorted.sort((a, b) => {
+      const va = axis === "y" ? a.y : a.x;
+      const vb = axis === "y" ? b.y : b.x;
+      return va - vb;
+    });
+    this.childrenSortedByPrimaryAxis = sorted;
+    this.childrenPrimarySortDirty = false;
+    return this.childrenSortedByPrimaryAxis;
+  }
   setupYogaProperties(options) {
     const node = this.layoutNode.yogaNode;
     if (isFlexBasisType(options.flexBasis)) {
@@ -6383,12 +6218,18 @@ class Renderable extends EventEmitter3 {
     if (options.flexDirection !== undefined) {
       node.setFlexDirection(parseFlexDirection(options.flexDirection));
     }
+    if (options.flexWrap !== undefined) {
+      node.setFlexWrap(parseWrap(options.flexWrap));
+    }
     if (options.alignItems !== undefined) {
       node.setAlignItems(parseAlign(options.alignItems));
     }
     if (options.justifyContent !== undefined) {
       node.setJustifyContent(parseJustify(options.justifyContent));
     }
+    if (options.alignSelf !== undefined) {
+      node.setAlignSelf(parseAlign(options.alignSelf));
+    }
     if (isDimensionType(options.width)) {
       this._width = options.width;
       this.layoutNode.setWidth(options.width);
@@ -6401,6 +6242,10 @@ class Renderable extends EventEmitter3 {
     if (this._positionType !== "relative") {
       node.setPositionType(parsePositionType(this._positionType));
     }
+    this._overflow = options.overflow === "hidden" ? "hidden" : options.overflow === "scroll" ? "scroll" : "visible";
+    if (this._overflow !== "visible") {
+      node.setOverflow(parseOverflow(this._overflow));
+    }
     const hasPositionProps = options.top !== undefined || options.right !== undefined || options.bottom !== undefined || options.left !== undefined;
     if (hasPositionProps) {
       this._position = {
@@ -6459,11 +6304,21 @@ class Renderable extends EventEmitter3 {
     }
   }
   set position(positionType) {
-    if (!isPostionTypeType(positionType) || this._positionType === positionType)
+    if (!isPositionTypeType(positionType) || this._positionType === positionType)
       return;
     this._positionType = positionType;
     this.layoutNode.yogaNode.setPositionType(parsePositionType(positionType));
-    this.needsUpdate();
+    this.requestRender();
+  }
+  get overflow() {
+    return this._overflow;
+  }
+  set overflow(overflow) {
+    if (!isOverflowType(overflow) || this._overflow === overflow)
+      return;
+    this._overflow = overflow;
+    this.layoutNode.yogaNode.setOverflow(parseOverflow(overflow));
+    this.requestRender();
   }
   setPosition(position) {
     this._position = { ...this._position, ...position };
@@ -6500,56 +6355,64 @@ class Renderable extends EventEmitter3 {
         node.setPosition(Edge.Left, left);
       }
     }
-    this.needsUpdate();
+    this.requestRender();
   }
   set flexGrow(grow) {
     this.layoutNode.yogaNode.setFlexGrow(grow);
-    this.needsUpdate();
+    this.requestRender();
   }
   set flexShrink(shrink) {
     this.layoutNode.yogaNode.setFlexShrink(shrink);
-    this.needsUpdate();
+    this.requestRender();
   }
   set flexDirection(direction) {
     this.layoutNode.yogaNode.setFlexDirection(parseFlexDirection(direction));
-    this.needsUpdate();
+    this.requestRender();
+  }
+  set flexWrap(wrap) {
+    this.layoutNode.yogaNode.setFlexWrap(parseWrap(wrap));
+    this.requestRender();
   }
   set alignItems(alignItems) {
     this.layoutNode.yogaNode.setAlignItems(parseAlign(alignItems));
-    this.needsUpdate();
+    this.requestRender();
   }
   set justifyContent(justifyContent) {
     this.layoutNode.yogaNode.setJustifyContent(parseJustify(justifyContent));
-    this.needsUpdate();
+    this.requestRender();
+  }
+  set alignSelf(alignSelf) {
+    this.layoutNode.yogaNode.setAlignSelf(parseAlign(alignSelf));
+    this.requestRender();
   }
   set flexBasis(basis) {
     if (isFlexBasisType(basis)) {
       this.layoutNode.yogaNode.setFlexBasis(basis);
-      this.needsUpdate();
+      this.requestRender();
     }
   }
   set minWidth(minWidth) {
     if (isSizeType(minWidth)) {
       this.layoutNode.yogaNode.setMinWidth(minWidth);
-      this.needsUpdate();
+      this.requestRender();
     }
   }
   set maxWidth(maxWidth) {
     if (isSizeType(maxWidth)) {
       this.layoutNode.yogaNode.setMaxWidth(maxWidth);
-      this.needsUpdate();
+      this.requestRender();
     }
   }
   set minHeight(minHeight) {
     if (isSizeType(minHeight)) {
       this.layoutNode.yogaNode.setMinHeight(minHeight);
-      this.needsUpdate();
+      this.requestRender();
     }
   }
   set maxHeight(maxHeight) {
     if (isSizeType(maxHeight)) {
       this.layoutNode.yogaNode.setMaxHeight(maxHeight);
-      this.needsUpdate();
+      this.requestRender();
     }
   }
   set margin(margin) {
@@ -6559,31 +6422,31 @@ class Renderable extends EventEmitter3 {
       node.setMargin(Edge.Right, margin);
       node.setMargin(Edge.Bottom, margin);
       node.setMargin(Edge.Left, margin);
-      this.needsUpdate();
+      this.requestRender();
     }
   }
   set marginTop(margin) {
     if (isMarginType(margin)) {
       this.layoutNode.yogaNode.setMargin(Edge.Top, margin);
-      this.needsUpdate();
+      this.requestRender();
     }
   }
   set marginRight(margin) {
     if (isMarginType(margin)) {
       this.layoutNode.yogaNode.setMargin(Edge.Right, margin);
-      this.needsUpdate();
+      this.requestRender();
     }
   }
   set marginBottom(margin) {
     if (isMarginType(margin)) {
       this.layoutNode.yogaNode.setMargin(Edge.Bottom, margin);
-      this.needsUpdate();
+      this.requestRender();
     }
   }
   set marginLeft(margin) {
     if (isMarginType(margin)) {
       this.layoutNode.yogaNode.setMargin(Edge.Left, margin);
-      this.needsUpdate();
+      this.requestRender();
     }
   }
   set padding(padding) {
@@ -6593,31 +6456,31 @@ class Renderable extends EventEmitter3 {
       node.setPadding(Edge.Right, padding);
       node.setPadding(Edge.Bottom, padding);
       node.setPadding(Edge.Left, padding);
-      this.needsUpdate();
+      this.requestRender();
     }
   }
   set paddingTop(padding) {
     if (isPaddingType(padding)) {
       this.layoutNode.yogaNode.setPadding(Edge.Top, padding);
-      this.needsUpdate();
+      this.requestRender();
     }
   }
   set paddingRight(padding) {
     if (isPaddingType(padding)) {
       this.layoutNode.yogaNode.setPadding(Edge.Right, padding);
-      this.needsUpdate();
+      this.requestRender();
     }
   }
   set paddingBottom(padding) {
     if (isPaddingType(padding)) {
       this.layoutNode.yogaNode.setPadding(Edge.Bottom, padding);
-      this.needsUpdate();
+      this.requestRender();
     }
   }
   set paddingLeft(padding) {
     if (isPaddingType(padding)) {
       this.layoutNode.yogaNode.setPadding(Edge.Left, padding);
-      this.needsUpdate();
+      this.requestRender();
     }
   }
   getLayoutNode() {
@@ -6625,6 +6488,8 @@ class Renderable extends EventEmitter3 {
   }
   updateFromLayout() {
     const layout = this.layoutNode.yogaNode.getComputedLayout();
+    const oldX = this._x;
+    const oldY = this._y;
     this._x = layout.left;
     this._y = layout.top;
     const newWidth = Math.max(layout.width, 1);
@@ -6635,12 +6500,16 @@ class Renderable extends EventEmitter3 {
     if (sizeChanged) {
       this.onLayoutResize(newWidth, newHeight);
     }
+    if (oldX !== this._x || oldY !== this._y) {
+      if (this.parent)
+        this.parent.childrenPrimarySortDirty = true;
+    }
   }
   onLayoutResize(width, height) {
     if (this._visible) {
       this.handleFrameBufferResize(width, height);
       this.onResize(width, height);
-      this.needsUpdate();
+      this.requestRender();
     }
   }
   handleFrameBufferResize(width, height) {
@@ -6669,7 +6538,10 @@ class Renderable extends EventEmitter3 {
       this.frameBuffer = null;
     }
   }
-  onResize(width, height) {}
+  onResize(width, height) {
+    this.onSizeChange?.();
+    this.emit("resize");
+  }
   replaceParent(obj) {
     if (obj.parent) {
       obj.parent.remove(obj.id);
@@ -6677,9 +6549,6 @@ class Renderable extends EventEmitter3 {
     obj.parent = this;
   }
   add(obj, index) {
-    if (this.childHost !== this) {
-      return this.childHost.add(obj, index);
-    }
     obj = ensureRenderable(this._ctx, obj);
     if (this.renderableMap.has(obj.id)) {
       console.warn(`A renderable with id ${obj.id} already exists in ${this.id}, removing it`);
@@ -6696,18 +6565,15 @@ class Renderable extends EventEmitter3 {
       insertedIndex = this.layoutNode.addChild(childLayoutNode);
     }
     this.needsZIndexSort = true;
+    this.childrenPrimarySortDirty = true;
     this.renderableMap.set(obj.id, obj);
     if (obj._liveCount > 0) {
       this.propagateLiveCount(obj._liveCount);
     }
-    this.needsUpdate();
+    this.requestRender();
     return insertedIndex;
   }
   insertBefore(obj, anchor) {
-    if (this.childHost !== this) {
-      const idx = this.childHost.insertBefore(obj, anchor);
-      return idx;
-    }
     obj = ensureRenderable(this._ctx, obj);
     if (!anchor) {
       return this.add(obj);
@@ -6722,15 +6588,9 @@ class Renderable extends EventEmitter3 {
     return this.add(obj, anchorIndex);
   }
   getRenderable(id) {
-    if (this.childHost !== this)
-      return this.childHost.getRenderable(id);
     return this.renderableMap.get(id);
   }
   remove(id) {
-    if (this.childHost !== this) {
-      this.childHost.remove(id);
-      return;
-    }
     if (!id) {
       return;
     }
@@ -6742,7 +6602,7 @@ class Renderable extends EventEmitter3 {
         }
         const childLayoutNode = obj.getLayoutNode();
         this.layoutNode.removeChild(childLayoutNode);
-        this.needsUpdate();
+        this.requestRender();
         obj.onRemove();
         obj.parent = null;
       }
@@ -6751,18 +6611,20 @@ class Renderable extends EventEmitter3 {
       if (index !== -1) {
         this.renderableArray.splice(index, 1);
       }
+      this.childrenPrimarySortDirty = true;
     }
   }
   onRemove() {}
   getChildren() {
-    if (this.childHost !== this)
-      return this.childHost.getChildren();
     return [...this.renderableArray];
   }
+  getChildrenCount() {
+    return this.renderableArray.length;
+  }
   render(buffer, deltaTime) {
     if (!this.visible)
       return;
-    this.beforeRender();
+    this.onUpdate(deltaTime);
     this.updateFromLayout();
     let renderBuffer = buffer;
     if (this.buffered && this.frameBuffer) {
@@ -6778,14 +6640,33 @@ class Renderable extends EventEmitter3 {
     this.markClean();
     this._ctx.addToHitGrid(this.x, this.y, this.width, this.height, this.num);
     this.ensureZIndexSorted();
-    for (const child of this.renderableArray) {
+    const shouldPushScissor = this._overflow !== "visible" && this.width > 0 && this.height > 0;
+    if (shouldPushScissor) {
+      const scissorRect = this.getScissorRect();
+      renderBuffer.pushScissorRect(scissorRect.x, scissorRect.y, scissorRect.width, scissorRect.height);
+    }
+    for (const child of this._getChildren()) {
       child.render(renderBuffer, deltaTime);
     }
+    if (shouldPushScissor) {
+      renderBuffer.popScissorRect();
+    }
     if (this.buffered && this.frameBuffer) {
       buffer.drawFrameBuffer(this.x, this.y, this.frameBuffer);
     }
   }
-  beforeRender() {}
+  _getChildren() {
+    return this.renderableArray;
+  }
+  onUpdate(deltaTime) {}
+  getScissorRect() {
+    return {
+      x: this.buffered ? 0 : this.x,
+      y: this.buffered ? 0 : this.y,
+      width: this.width,
+      height: this.height
+    };
+  }
   renderSelf(buffer, deltaTime) {}
   destroy() {
     if (this.parent) {
@@ -6818,7 +6699,7 @@ class Renderable extends EventEmitter3 {
     this._mouseListener?.call(this, event);
     this._mouseListeners[event.type]?.call(this, event);
     this.onMouseEvent(event);
-    if (this.parent && !event.defaultPrevented) {
+    if (this.parent && !event.propagationStopped) {
       this.parent.processMouseEvent(event);
     }
   }
@@ -6892,6 +6773,12 @@ class Renderable extends EventEmitter3 {
   get onKeyDown() {
     return this._keyListeners["down"];
   }
+  set onSizeChange(handler) {
+    this._sizeChangeListener = handler;
+  }
+  get onSizeChange() {
+    return this._sizeChangeListener;
+  }
   applyEventOptions(options) {
     this.onMouse = options.onMouse;
     this.onMouseDown = options.onMouseDown;
@@ -6904,6 +6791,7 @@ class Renderable extends EventEmitter3 {
     this.onMouseOut = options.onMouseOut;
     this.onMouseScroll = options.onMouseScroll;
     this.onKeyDown = options.onKeyDown;
+    this.onSizeChange = options.onSizeChange;
   }
 }
 
@@ -6941,7 +6829,7 @@ class RootRenderable extends Renderable {
     this.height = height;
     this.emit("resized" /* RESIZED */, { width, height });
   }
-  beforeRender() {
+  onUpdate() {
     if (this.layoutNode.yogaNode.isDirty()) {
       this.calculateLayout();
     }
@@ -7022,7 +6910,7 @@ function isVNode(node) {
   return node && node.__isVNode;
 }
 function ensureRenderable(ctx, node) {
-  if (node instanceof Renderable)
+  if (isRenderable(node))
     return node;
   return instantiate(ctx, node);
 }
@@ -7070,7 +6958,7 @@ function wrapWithDelegates(instance, delegateMap) {
   return proxy;
 }
 function instantiate(ctx, node) {
-  if (node instanceof Renderable)
+  if (isRenderable(node))
     return node;
   if (!node || typeof node !== "object") {
     throw new TypeError("mount() received an invalid vnode");
@@ -7082,7 +6970,7 @@ function instantiate(ctx, node) {
   if (isRenderableConstructor(type)) {
     const instance = new type(ctx, props || {});
     for (const child of children) {
-      if (child instanceof Renderable) {
+      if (isRenderable(child)) {
         instance.add(child);
       } else {
         const mounted = instantiate(ctx, child);
@@ -7107,7 +6995,7 @@ function instantiate(ctx, node) {
   return wrapWithDelegates(inst, delegateMap);
 }
 function delegate(mapping, vnode) {
-  if (vnode instanceof Renderable) {
+  if (isRenderable(vnode)) {
     return wrapWithDelegates(vnode, mapping);
   }
   if (!vnode || typeof vnode !== "object")
@@ -7119,9 +7007,9 @@ function delegate(mapping, vnode) {
 // src/console.ts
 import { EventEmitter as EventEmitter5 } from "events";
 import { Console } from "console";
-import util from "util";
 import fs from "fs";
 import path from "path";
+import util from "util";
 
 // src/lib/output.capture.ts
 import { Writable } from "stream";
@@ -7189,27 +7077,9 @@ function getCallerInfo() {
   const columnNumber = parseInt(match[4], 10) || 0;
   return { functionName, fullPath, fileName, lineNumber, columnNumber };
 }
-var { capture } = singleton("ConsoleCapture", () => {
-  const capture2 = new Capture;
-  const mockStdout = new CapturedWritableStream("stdout", capture2);
-  const mockStderr = new CapturedWritableStream("stderr", capture2);
-  if (process.env.SKIP_CONSOLE_CACHE !== "true") {
-    global.console = new Console({
-      stdout: mockStdout,
-      stderr: mockStderr,
-      colorMode: true,
-      inspectOptions: {
-        compact: false,
-        breakLength: 80,
-        depth: 2
-      }
-    });
-  }
-  return { capture: capture2 };
-});
+var capture = singleton("ConsoleCapture", () => new Capture);
 
 class TerminalConsoleCache extends EventEmitter5 {
-  originalConsole;
   _cachedLogs = [];
   MAX_CACHE_SIZE = 1000;
   _collectCallerInfo = false;
@@ -7219,35 +7089,26 @@ class TerminalConsoleCache extends EventEmitter5 {
   }
   constructor() {
     super();
-    this.originalConsole = {
-      log: console.log,
-      info: console.info,
-      warn: console.warn,
-      error: console.error,
-      debug: console.debug
-    };
-    if (process.env.SKIP_CONSOLE_CACHE !== "true") {
-      this.activate();
-    }
   }
   activate() {
+    this.setupConsoleCapture();
     this.overrideConsoleMethods();
   }
-  setCollectCallerInfo(enabled) {
-    this._collectCallerInfo = enabled;
-  }
-  clearConsole() {
-    this._cachedLogs = [];
-  }
-  setCachingEnabled(enabled) {
-    this._cachingEnabled = enabled;
-  }
-  deactivate() {
-    console.log = this.originalConsole.log;
-    console.info = this.originalConsole.info;
-    console.warn = this.originalConsole.warn;
-    console.error = this.originalConsole.error;
-    console.debug = this.originalConsole.debug;
+  setupConsoleCapture() {
+    if (process.env.OTUI_USE_CONSOLE === "false")
+      return;
+    const mockStdout = new CapturedWritableStream("stdout", capture);
+    const mockStderr = new CapturedWritableStream("stderr", capture);
+    global.console = new Console({
+      stdout: mockStdout,
+      stderr: mockStderr,
+      colorMode: true,
+      inspectOptions: {
+        compact: false,
+        breakLength: 80,
+        depth: 2
+      }
+    });
   }
   overrideConsoleMethods() {
     console.log = (...args) => {
@@ -7266,6 +7127,23 @@ class TerminalConsoleCache extends EventEmitter5 {
       this.appendToConsole("DEBUG" /* DEBUG */, ...args);
     };
   }
+  setCollectCallerInfo(enabled) {
+    this._collectCallerInfo = enabled;
+  }
+  clearConsole() {
+    this._cachedLogs = [];
+  }
+  setCachingEnabled(enabled) {
+    this._cachingEnabled = enabled;
+  }
+  deactivate() {
+    this.restoreOriginalConsole();
+  }
+  restoreOriginalConsole() {
+    const originalNodeConsole = __require("console");
+    global.console = originalNodeConsole;
+    this.setupConsoleCapture();
+  }
   addLogEntry(level, ...args) {
     const callerInfo = this._collectCallerInfo ? getCallerInfo() : null;
     const logEntry = [new Date, level, args, callerInfo];
@@ -7340,9 +7218,9 @@ class TerminalConsole extends EventEmitter5 {
   _displayLines = [];
   _allLogEntries = [];
   _needsFrameBufferUpdate = false;
-  markNeedsUpdate() {
+  markNeedsRerender() {
     this._needsFrameBufferUpdate = true;
-    this.renderer.needsUpdate();
+    this.renderer.requestRender();
   }
   _rgbaInfo;
   _rgbaWarn;
@@ -7409,7 +7287,7 @@ class TerminalConsole extends EventEmitter5 {
     if (this.isScrolledToBottom) {
       this._scrollToBottom();
     }
-    this.markNeedsUpdate();
+    this.markNeedsRerender();
   }
   _updateConsoleDimensions() {
     const termWidth = this.renderer.terminalWidth;
@@ -7514,7 +7392,7 @@ class TerminalConsole extends EventEmitter5 {
         break;
     }
     if (needsRedraw) {
-      this.markNeedsUpdate();
+      this.markNeedsRerender();
     }
   }
   attachStdin() {
@@ -7571,7 +7449,7 @@ class TerminalConsole extends EventEmitter5 {
       const visibleLineCount = Math.min(logAreaHeight, displayLineCount - this.scrollTopIndex);
       this.currentLineIndex = Math.max(0, Math.min(this.currentLineIndex, visibleLineCount - 1));
       if (this.isVisible) {
-        this.markNeedsUpdate();
+        this.markNeedsRerender();
       }
     }
   }
@@ -7579,7 +7457,7 @@ class TerminalConsole extends EventEmitter5 {
     terminalConsoleCache.clearConsole();
     this._allLogEntries = [];
     this._displayLines = [];
-    this.markNeedsUpdate();
+    this.markNeedsRerender();
   }
   toggle() {
     if (this.isVisible) {
@@ -7592,17 +7470,17 @@ class TerminalConsole extends EventEmitter5 {
       this.show();
     }
     if (!this.renderer.isRunning) {
-      this.renderer.needsUpdate();
+      this.renderer.requestRender();
     }
   }
   focus() {
     this.attachStdin();
     this._scrollToBottom(true);
-    this.markNeedsUpdate();
+    this.markNeedsRerender();
   }
   blur() {
     this.detachStdin();
-    this.markNeedsUpdate();
+    this.markNeedsRerender();
   }
   show() {
     if (!this.isVisible) {
@@ -7611,7 +7489,8 @@ class TerminalConsole extends EventEmitter5 {
       terminalConsoleCache.setCachingEnabled(false);
       if (!this.frameBuffer) {
         this.frameBuffer = OptimizedBuffer.create(this.consoleWidth, this.consoleHeight, this.renderer.widthMethod, {
-          respectAlpha: this.backgroundColor.a < 1
+          respectAlpha: this.backgroundColor.a < 1,
+          id: "console framebuffer"
         });
       }
       const logCount = terminalConsoleCache.cachedLogs.length;
@@ -7620,7 +7499,7 @@ class TerminalConsole extends EventEmitter5 {
       this.scrollTopIndex = 0;
       this._scrollToBottom(true);
       this.focus();
-      this.markNeedsUpdate();
+      this.markNeedsRerender();
     }
   }
   hide() {
@@ -7693,7 +7572,7 @@ class TerminalConsole extends EventEmitter5 {
     this._debugModeEnabled = enabled;
     terminalConsoleCache.setCollectCallerInfo(enabled);
     if (this.isVisible) {
-      this.markNeedsUpdate();
+      this.markNeedsRerender();
     }
   }
   toggleDebugMode() {
@@ -7822,9 +7701,10 @@ class MouseEvent {
   modifiers;
   scroll;
   target;
-  _defaultPrevented = false;
-  get defaultPrevented() {
-    return this._defaultPrevented;
+  isSelecting;
+  _propagationStopped = false;
+  get propagationStopped() {
+    return this._propagationStopped;
   }
   constructor(target, attributes) {
     this.target = target;
@@ -7835,9 +7715,10 @@ class MouseEvent {
     this.modifiers = attributes.modifiers;
     this.scroll = attributes.scroll;
     this.source = attributes.source;
+    this.isSelecting = attributes.isSelecting;
   }
-  preventDefault() {
-    this._defaultPrevented = true;
+  stopPropagation() {
+    this._propagationStopped = true;
   }
 }
 var MouseButton;
@@ -7948,7 +7829,6 @@ class CliRenderer extends EventEmitter6 {
   lastOverRenderableNum = 0;
   lastOverRenderable;
   currentSelection = null;
-  selectionState = null;
   selectionContainers = [];
   _splitHeight = 0;
   renderOffset = 0;
@@ -7958,7 +7838,7 @@ class CliRenderer extends EventEmitter6 {
   realStdoutWrite;
   captureCallback = () => {
     if (this._splitHeight > 0) {
-      this.needsUpdate();
+      this.requestRender();
     }
   };
   _useConsole = true;
@@ -8042,6 +7922,9 @@ Error details:
         process.exit(1);
       });
     };
+    process.on("warning", (warning) => {
+      console.warn(JSON.stringify(warning.message, null, 2));
+    });
     process.on("uncaughtException", handleError);
     process.on("unhandledRejection", handleError);
     process.on("exit", () => {
@@ -8082,8 +7965,8 @@ Error details:
   writeOut(chunk, encoding, callback) {
     return this.realStdoutWrite.call(this.stdout, chunk, encoding, callback);
   }
-  needsUpdate() {
-    if (!this.updateScheduled && !this._isRunning) {
+  requestRender() {
+    if (!this.rendering && !this.updateScheduled && !this._isRunning) {
       this.updateScheduled = true;
       process.nextTick(() => {
         this.loop();
@@ -8185,13 +8068,13 @@ Error details:
     this._console.resize(this.width, this.height);
     this.root.resize(this.width, this.height);
     this.emit("resize", this.width, this.height);
-    this.needsUpdate();
+    this.requestRender();
   }
   interceptStdoutWrite = (chunk, encoding, callback) => {
     const text = chunk.toString();
     capture.write("stdout", text);
     if (this._splitHeight > 0) {
-      this.needsUpdate();
+      this.requestRender();
     }
     if (typeof callback === "function") {
       process.nextTick(callback);
@@ -8311,22 +8194,38 @@ Error details:
       const sameElement = maybeRenderableId === this.lastOverRenderableNum;
       this.lastOverRenderableNum = maybeRenderableId;
       const maybeRenderable = Renderable.renderablesByNumber.get(maybeRenderableId);
-      if (mouseEvent.type === "down" && mouseEvent.button === 0 /* LEFT */) {
+      if (mouseEvent.type === "down" && mouseEvent.button === 0 /* LEFT */ && !this.currentSelection?.isSelecting && !mouseEvent.modifiers.ctrl) {
         if (maybeRenderable && maybeRenderable.selectable && maybeRenderable.shouldStartSelection(mouseEvent.x, mouseEvent.y)) {
           this.startSelection(maybeRenderable, mouseEvent.x, mouseEvent.y);
+          const event = new MouseEvent(maybeRenderable, mouseEvent);
+          maybeRenderable.processMouseEvent(event);
           return true;
         }
       }
-      if (mouseEvent.type === "drag" && this.selectionState?.isSelecting) {
+      if (mouseEvent.type === "drag" && this.currentSelection?.isSelecting) {
         this.updateSelection(maybeRenderable, mouseEvent.x, mouseEvent.y);
+        if (maybeRenderable) {
+          const event = new MouseEvent(maybeRenderable, { ...mouseEvent, isSelecting: true });
+          maybeRenderable.processMouseEvent(event);
+        }
         return true;
       }
-      if (mouseEvent.type === "up" && this.selectionState?.isSelecting) {
+      if (mouseEvent.type === "up" && this.currentSelection?.isSelecting) {
+        if (maybeRenderable) {
+          const event = new MouseEvent(maybeRenderable, { ...mouseEvent, isSelecting: true });
+          maybeRenderable.processMouseEvent(event);
+        }
         this.finishSelection();
         return true;
       }
-      if (mouseEvent.type === "down" && mouseEvent.button === 0 /* LEFT */ && this.selectionState) {
-        this.clearSelection();
+      if (mouseEvent.type === "down" && mouseEvent.button === 0 /* LEFT */ && this.currentSelection) {
+        if (mouseEvent.modifiers.ctrl) {
+          this.currentSelection.isSelecting = true;
+          this.updateSelection(maybeRenderable, mouseEvent.x, mouseEvent.y);
+          return true;
+        } else {
+          this.clearSelection();
+        }
       }
       if (!sameElement && (mouseEvent.type === "drag" || mouseEvent.type === "move")) {
         if (this.lastOverRenderable && this.lastOverRenderable !== this.capturedRenderable) {
@@ -8363,7 +8262,7 @@ Error details:
         this.lastOverRenderable = this.capturedRenderable;
         this.lastOverRenderableNum = this.capturedRenderable.num;
         this.capturedRenderable = undefined;
-        this.needsUpdate();
+        this.requestRender();
       }
       if (maybeRenderable) {
         if (mouseEvent.type === "drag" && mouseEvent.button === 0 /* LEFT */) {
@@ -8446,7 +8345,7 @@ Error details:
       this.renderOffset = height - this._splitHeight;
       this.width = width;
       this.height = this._splitHeight;
-      this.currentRenderBuffer.clearLocal(RGBA.fromHex("#000000"), "\u0A00");
+      this.currentRenderBuffer.clear(RGBA.fromHex("#000000"));
       this.lib.setRenderOffset(this.rendererPtr, this.renderOffset);
     } else {
       this.width = width;
@@ -8458,26 +8357,26 @@ Error details:
     this._console.resize(this.width, this.height);
     this.root.resize(this.width, this.height);
     this.emit("resize", this.width, this.height);
-    this.needsUpdate();
+    this.requestRender();
   }
   setBackgroundColor(color) {
     const parsedColor = parseColor(color);
     this.lib.setBackgroundColor(this.rendererPtr, parsedColor);
     this.backgroundColor = parsedColor;
     this.nextRenderBuffer.clear(parsedColor);
-    this.needsUpdate();
+    this.requestRender();
   }
   toggleDebugOverlay() {
     this.debugOverlay.enabled = !this.debugOverlay.enabled;
     this.lib.setDebugOverlay(this.rendererPtr, this.debugOverlay.enabled, this.debugOverlay.corner);
     this.emit("debugOverlay:toggle" /* DEBUG_OVERLAY_TOGGLE */, this.debugOverlay.enabled);
-    this.needsUpdate();
+    this.requestRender();
   }
   configureDebugOverlay(options) {
     this.debugOverlay.enabled = options.enabled ?? this.debugOverlay.enabled;
     this.debugOverlay.corner = options.corner ?? this.debugOverlay.corner;
     this.lib.setDebugOverlay(this.rendererPtr, this.debugOverlay.enabled, this.debugOverlay.corner);
-    this.needsUpdate();
+    this.requestRender();
   }
   clearTerminal() {
     this.lib.clearTerminal(this.rendererPtr);
@@ -8557,6 +8456,9 @@ Error details:
     this.controlState = "explicit_started" /* EXPLICIT_STARTED */;
     this.internalStart();
   }
+  auto() {
+    this.controlState = this._isRunning ? "auto_started" /* AUTO_STARTED */ : "idle" /* IDLE */;
+  }
   internalStart() {
     if (!this._isRunning && !this.isDestroyed) {
       this._isRunning = true;
@@ -8724,35 +8626,32 @@ Error details:
   getSelection() {
     return this.currentSelection;
   }
+  get hasSelection() {
+    return !!this.currentSelection;
+  }
   getSelectionContainer() {
     return this.selectionContainers.length > 0 ? this.selectionContainers[this.selectionContainers.length - 1] : null;
   }
-  hasSelection() {
-    return this.currentSelection !== null;
-  }
   clearSelection() {
-    if (this.selectionState) {
-      this.selectionState = null;
-      this.notifySelectablesOfSelectionChange();
+    if (this.currentSelection) {
+      for (const renderable of this.currentSelection.touchedRenderables) {
+        if (renderable.selectable) {
+          renderable.onSelectionChanged(null);
+        }
+      }
+      this.currentSelection = null;
     }
-    this.currentSelection = null;
     this.selectionContainers = [];
   }
   startSelection(startRenderable, x, y) {
     this.clearSelection();
     this.selectionContainers.push(startRenderable.parent || this.root);
-    this.selectionState = {
-      anchor: { x, y },
-      focus: { x, y },
-      isActive: true,
-      isSelecting: true
-    };
-    this.currentSelection = new Selection({ x, y }, { x, y });
+    this.currentSelection = new Selection(startRenderable, { x, y }, { x, y });
     this.notifySelectablesOfSelectionChange();
   }
   updateSelection(currentRenderable, x, y) {
-    if (this.selectionState) {
-      this.selectionState.focus = { x, y };
+    if (this.currentSelection) {
+      this.currentSelection.focus = { x, y };
       if (this.selectionContainers.length > 0) {
         const currentContainer = this.selectionContainers[this.selectionContainers.length - 1];
         if (!currentRenderable || !this.isWithinContainer(currentRenderable, currentContainer)) {
@@ -8769,12 +8668,18 @@ Error details:
           }
         }
       }
-      if (this.currentSelection) {
-        this.currentSelection = new Selection(this.selectionState.anchor, this.selectionState.focus);
-      }
       this.notifySelectablesOfSelectionChange();
     }
   }
+  requestSelectionUpdate() {
+    if (this.currentSelection?.isSelecting) {
+      const lastMouseX = this.currentSelection.focus.x;
+      const lastMouseY = this.currentSelection.focus.y;
+      const maybeRenderableId = this.lib.checkHit(this.rendererPtr, lastMouseX, lastMouseY);
+      const maybeRenderable = Renderable.renderablesByNumber.get(maybeRenderableId);
+      this.updateSelection(maybeRenderable, lastMouseX, lastMouseY);
+    }
+  }
   isWithinContainer(renderable, container) {
     let current = renderable;
     while (current) {
@@ -8785,46 +8690,44 @@ Error details:
     return false;
   }
   finishSelection() {
-    if (this.selectionState) {
-      this.selectionState.isSelecting = false;
+    if (this.currentSelection) {
+      this.currentSelection.isSelecting = false;
       this.emit("selection", this.currentSelection);
     }
   }
   notifySelectablesOfSelectionChange() {
-    let normalizedSelection = null;
-    if (this.selectionState) {
-      normalizedSelection = { ...this.selectionState };
-      if (normalizedSelection.anchor.y > normalizedSelection.focus.y || normalizedSelection.anchor.y === normalizedSelection.focus.y && normalizedSelection.anchor.x > normalizedSelection.focus.x) {
-        const temp = normalizedSelection.anchor;
-        normalizedSelection.anchor = normalizedSelection.focus;
-        normalizedSelection.focus = {
-          x: temp.x + 1,
-          y: temp.y
-        };
-      }
-    }
     const selectedRenderables = [];
-    for (const [, renderable] of Renderable.renderablesByNumber) {
-      if (renderable.visible && renderable.selectable) {
-        const currentContainer = this.selectionContainers.length > 0 ? this.selectionContainers[this.selectionContainers.length - 1] : null;
-        let hasSelection = false;
-        if (!currentContainer || this.isWithinContainer(renderable, currentContainer)) {
-          hasSelection = renderable.onSelectionChanged(normalizedSelection);
-        } else {
-          hasSelection = renderable.onSelectionChanged(normalizedSelection ? { ...normalizedSelection, isActive: false } : null);
+    const touchedRenderables = [];
+    const currentContainer = this.selectionContainers.length > 0 ? this.selectionContainers[this.selectionContainers.length - 1] : this.root;
+    if (this.currentSelection) {
+      this.walkSelectableRenderables(currentContainer, this.currentSelection.bounds, selectedRenderables, touchedRenderables);
+      for (const renderable of this.currentSelection.touchedRenderables) {
+        if (!touchedRenderables.includes(renderable)) {
+          renderable.onSelectionChanged(null);
         }
+      }
+      this.currentSelection.updateSelectedRenderables(selectedRenderables);
+      this.currentSelection.updateTouchedRenderables(touchedRenderables);
+    }
+  }
+  walkSelectableRenderables(container, selectionBounds, selectedRenderables, touchedRenderables) {
+    const children = container.getChildrenInViewport(selectionBounds, 0);
+    for (const child of children) {
+      if (child.selectable) {
+        const hasSelection = child.onSelectionChanged(this.currentSelection);
         if (hasSelection) {
-          selectedRenderables.push(renderable);
+          selectedRenderables.push(child);
         }
+        touchedRenderables.push(child);
+      }
+      if (child.getChildrenCount() > 0) {
+        this.walkSelectableRenderables(child, selectionBounds, selectedRenderables, touchedRenderables);
       }
-    }
-    if (this.currentSelection) {
-      this.currentSelection.updateSelectedRenderables(selectedRenderables);
     }
   }
 }
 
-export { __toESM, __commonJS, __export, __require, Edge, Gutter, MeasureMode, BorderChars, getBorderFromSides, getBorderSides, borderCharsToArray, BorderCharArrays, TrackedNode, createTrackedNode, nonAlphanumericKeys, parseKeypress, KeyHandler, getKeyHandler, RGBA, hexToRgb, rgbToHex, hsvToRgb, parseColor, fonts, measureText, getCharacterPositions, coordinateToCharacterIndex, renderFontToFrameBuffer, TextAttributes, DebugOverlayCorner, createTextAttributes, StyledText, stringToStyledText, black, red, green, yellow, blue, magenta, cyan, white, brightBlack, brightRed, brightGreen, brightYellow, brightBlue, brightMagenta, brightCyan, brightWhite, bgBlack, bgRed, bgGreen, bgYellow, bgBlue, bgMagenta, bgCyan, bgWhite, bold, italic, underline, strikethrough, dim, reverse, blink, fg, bg, tn, t, SyntaxStyle, hastToStyledText, parseAlign, parseBoxSizing, parseDimension, parseDirection, parseDisplay, parseEdge, parseFlexDirection, parseGutter, parseJustify, parseLogLevel, parseMeasureMode, parseOverflow, parsePositionType, parseUnit, parseWrap, MouseParser, Selection, TextSelectionHelper, ASCIIFontSelectionHelper, TextBuffer, setRenderLibPath, resolveRenderLib, OptimizedBuffer, h, isVNode, ensureRenderable, wrapWithDelegates, instantiate, delegate, LayoutEvents, RenderableEvents, isValidPercentage, isMarginType, isPaddingType, isPositionType, isPostionTypeType, isDimensionType, isFlexBasisType, isSizeType, Renderable, RootRenderable, capture, ConsolePosition, TerminalConsole, MouseEvent, MouseButton, createCliRenderer, CliRenderEvents, CliRenderer };
+export { __toESM, __commonJS, __export, __require, Edge, Gutter, MeasureMode, BorderChars, getBorderFromSides, getBorderSides, borderCharsToArray, BorderCharArrays, TrackedNode, createTrackedNode, nonAlphanumericKeys, parseKeypress, KeyHandler, getKeyHandler, RGBA, hexToRgb, rgbToHex, hsvToRgb, parseColor, fonts, measureText, getCharacterPositions, coordinateToCharacterIndex, renderFontToFrameBuffer, TextAttributes, DebugOverlayCorner, createTextAttributes, StyledText, stringToStyledText, black, red, green, yellow, blue, magenta, cyan, white, brightBlack, brightRed, brightGreen, brightYellow, brightBlue, brightMagenta, brightCyan, brightWhite, bgBlack, bgRed, bgGreen, bgYellow, bgBlue, bgMagenta, bgCyan, bgWhite, bold, italic, underline, strikethrough, dim, reverse, blink, fg, bg, tn, t, SyntaxStyle, hastToStyledText, parseAlign, parseBoxSizing, parseDimension, parseDirection, parseDisplay, parseEdge, parseFlexDirection, parseGutter, parseJustify, parseLogLevel, parseMeasureMode, parseOverflow, parsePositionType, parseUnit, parseWrap, MouseParser, Selection, convertGlobalToLocalSelection, ASCIIFontSelectionHelper, TextBuffer, LogLevel2 as LogLevel, setRenderLibPath, resolveRenderLib, OptimizedBuffer, h, isVNode, ensureRenderable, wrapWithDelegates, instantiate, delegate, LayoutEvents, RenderableEvents, isValidPercentage, isMarginType, isPaddingType, isPositionType, isPositionTypeType, isOverflowType, isDimensionType, isFlexBasisType, isSizeType, isRenderable, Renderable, RootRenderable, capture, ConsolePosition, TerminalConsole, MouseEvent, MouseButton, createCliRenderer, CliRenderEvents, CliRenderer };
 
-//# debugId=00A84341316A9BF864756E2164756E21
-//# sourceMappingURL=index-4gez9k7q.js.map
+//# debugId=4847DC8F7CFD610964756E2164756E21
+//# sourceMappingURL=index-sw194bbj.js.map