@opentui/core 0.0.0-20250908-4906ddad → 0.0.0-20250912-12c969f4

package/{index-d6kwx5pm.js → index-mh94hn7d.js}

@@ -1790,21 +1790,11 @@ class TrackedNode extends EventEmitter {
   }
   setWidth(width) {
     this._width = width;
-    const parsedWidth = this.parseWidth(width);
-    if (parsedWidth === "auto") {
-      this.yogaNode.setWidthAuto();
-    } else {
-      this.yogaNode.setWidth(parsedWidth);
-    }
+    this.yogaNode.setWidth(width);
   }
   setHeight(height) {
     this._height = height;
-    const parsedHeight = this.parseHeight(height);
-    if (parsedHeight === "auto") {
-      this.yogaNode.setHeightAuto();
-    } else {
-      this.yogaNode.setHeight(parsedHeight);
-    }
+    this.yogaNode.setHeight(height);
   }
   addChild(childNode) {
     if (childNode.parent) {
@@ -3936,11 +3926,40 @@ function createTextAttributes({
     attributes |= TextAttributes.STRIKETHROUGH;
   return attributes;
 }
+function visualizeRenderableTree(renderable, maxDepth = 10) {
+  function buildTreeLines(node, prefix = "", parentPrefix = "", isLastChild = true, depth = 0) {
+    if (depth >= maxDepth) {
+      return [`${prefix}${node.id} ... (max depth reached)`];
+    }
+    const lines = [];
+    const children = node.getChildren();
+    lines.push(`${prefix}${node.id}`);
+    if (children.length > 0) {
+      const lastChildIndex = children.length - 1;
+      children.forEach((child, index) => {
+        const childIsLast = index === lastChildIndex;
+        const connector = childIsLast ? "\u2514\u2500\u2500 " : "\u251C\u2500\u2500 ";
+        const childPrefix = parentPrefix + (isLastChild ? "    " : "\u2502   ");
+        const childLines = buildTreeLines(child, childPrefix + connector, childPrefix, childIsLast, depth + 1);
+        lines.push(...childLines);
+      });
+    }
+    return lines;
+  }
+  const treeLines = buildTreeLines(renderable);
+  console.log(`Renderable Tree:
+` + treeLines.join(`
+`));
+}
 
 // src/lib/styled-text.ts
-var textEncoder = new TextEncoder;
+var BrandedStyledText = Symbol.for("@opentui/core/StyledText");
+function isStyledText(obj) {
+  return obj && obj[BrandedStyledText];
+}
 
 class StyledText {
+  [BrandedStyledText] = true;
   chunks;
   textRenderable;
   constructor(chunks) {
@@ -3998,11 +4017,9 @@ class StyledText {
   }
 }
 function stringToStyledText(content) {
-  const textEncoder2 = new TextEncoder;
   const chunk = {
     __isChunk: true,
-    text: textEncoder2.encode(content),
-    plainText: content
+    text: content
   };
   return new StyledText([chunk]);
 }
@@ -4016,21 +4033,18 @@ function applyStyle(input, style) {
     return {
       __isChunk: true,
       text: existingChunk.text,
-      plainText: existingChunk.plainText,
       fg,
       bg,
       attributes: mergedAttrs
     };
   } else {
     const plainTextStr = String(input);
-    const text = textEncoder.encode(plainTextStr);
     const fg = style.fg ? parseColor(style.fg) : undefined;
     const bg = style.bg ? parseColor(style.bg) : undefined;
     const attributes = createTextAttributes(style);
     return {
       __isChunk: true,
-      text,
-      plainText: plainTextStr,
+      text: plainTextStr,
       fg,
       bg,
       attributes
@@ -4077,8 +4091,7 @@ function t(strings, ...values) {
     if (raw) {
       chunks.push({
         __isChunk: true,
-        text: textEncoder.encode(raw),
-        plainText: raw,
+        text: raw,
         attributes: 0
       });
     }
@@ -4089,8 +4102,7 @@ function t(strings, ...values) {
       const plainTextStr = String(val);
       chunks.push({
         __isChunk: true,
-        text: textEncoder.encode(plainTextStr),
-        plainText: plainTextStr,
+        text: plainTextStr,
         attributes: 0
       });
     }
@@ -4150,7 +4162,6 @@ class SyntaxStyle {
     return this.mergedStyleCache.size;
   }
 }
-var textEncoder2 = new TextEncoder;
 function hastToTextChunks(node, syntaxStyle, parentStyles = []) {
   const chunks = [];
   if (node.type === "text") {
@@ -4158,8 +4169,7 @@ function hastToTextChunks(node, syntaxStyle, parentStyles = []) {
     const mergedStyle = syntaxStyle.mergeStyles(...stylesToMerge);
     chunks.push({
       __isChunk: true,
-      text: textEncoder2.encode(node.value),
-      plainText: node.value,
+      text: node.value,
       fg: mergedStyle.fg,
       bg: mergedStyle.bg,
       attributes: mergedStyle.attributes
@@ -4718,10 +4728,16 @@ class OptimizedBuffer {
   _height;
   respectAlpha = false;
   _rawBuffers = null;
+  _destroyed = false;
   get ptr() {
     return this.bufferPtr;
   }
+  guard() {
+    if (this._destroyed)
+      throw new Error(`Buffer ${this.id} is destroyed`);
+  }
   get buffers() {
+    this.guard();
     if (this._rawBuffers === null) {
       const size = this._width * this._height;
       const charPtr = this.lib.bufferGetCharPtr(this.bufferPtr);
@@ -4751,9 +4767,6 @@ class OptimizedBuffer {
     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;
-  }
   get width() {
     return this._width;
   }
@@ -4761,22 +4774,28 @@ class OptimizedBuffer {
     return this._height;
   }
   setRespectAlpha(respectAlpha) {
+    this.guard();
     this.lib.bufferSetRespectAlpha(this.bufferPtr, respectAlpha);
     this.respectAlpha = respectAlpha;
   }
   getNativeId() {
+    this.guard();
     return this.lib.bufferGetId(this.bufferPtr);
   }
   clear(bg2 = RGBA.fromValues(0, 0, 0, 1)) {
+    this.guard();
     this.lib.bufferClear(this.bufferPtr, bg2);
   }
   setCell(x, y, char, fg2, bg2, attributes = 0) {
+    this.guard();
     this.lib.bufferSetCell(this.bufferPtr, x, y, char, fg2, bg2, attributes);
   }
   setCellWithAlphaBlending(x, y, char, fg2, bg2, attributes = 0) {
+    this.guard();
     this.lib.bufferSetCellWithAlphaBlending(this.bufferPtr, x, y, char, fg2, bg2, attributes);
   }
   drawText(text, x, y, fg2, bg2, attributes = 0, selection2) {
+    this.guard();
     if (!selection2) {
       this.lib.bufferDrawText(this.bufferPtr, text, x, y, fg2, bg2, attributes);
       return;
@@ -4809,21 +4828,29 @@ class OptimizedBuffer {
     this.lib.bufferFillRect(this.bufferPtr, x, y, width, height, bg2);
   }
   drawFrameBuffer(destX, destY, frameBuffer, sourceX, sourceY, sourceWidth, sourceHeight) {
+    this.guard();
     this.lib.drawFrameBuffer(this.bufferPtr, destX, destY, frameBuffer.ptr, sourceX, sourceY, sourceWidth, sourceHeight);
   }
   destroy() {
+    if (this._destroyed)
+      return;
+    this._destroyed = true;
     this.lib.destroyOptimizedBuffer(this.bufferPtr);
   }
   drawTextBuffer(textBuffer, x, y, clipRect) {
+    this.guard();
     this.lib.bufferDrawTextBuffer(this.bufferPtr, textBuffer.ptr, x, y, clipRect);
   }
   drawSuperSampleBuffer(x, y, pixelDataPtr, pixelDataLength, format, alignedBytesPerRow) {
+    this.guard();
     this.lib.bufferDrawSuperSampleBuffer(this.bufferPtr, x, y, pixelDataPtr, pixelDataLength, format, alignedBytesPerRow);
   }
   drawPackedBuffer(dataPtr, dataLen, posX, posY, terminalWidthCells, terminalHeightCells) {
+    this.guard();
     this.lib.bufferDrawPackedBuffer(this.bufferPtr, dataPtr, dataLen, posX, posY, terminalWidthCells, terminalHeightCells);
   }
   resize(width, height) {
+    this.guard();
     if (this._width === width && this._height === height)
       return;
     this._width = width;
@@ -4832,18 +4859,22 @@ class OptimizedBuffer {
     this.lib.bufferResize(this.bufferPtr, width, height);
   }
   drawBox(options) {
+    this.guard();
     const style = options.borderStyle || "single";
     const borderChars = options.customBorderChars ?? BorderCharArrays[style];
     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.guard();
     this.lib.bufferPushScissorRect(this.bufferPtr, x, y, width, height);
   }
   popScissorRect() {
+    this.guard();
     this.lib.bufferPopScissorRect(this.bufferPtr);
   }
   clearScissorRects() {
+    this.guard();
     this.lib.bufferClearScissorRects(this.bufferPtr);
   }
 }
@@ -4862,7 +4893,7 @@ function getOpenTUILib(libPath) {
       returns: "void"
     },
     createRenderer: {
-      args: ["u32", "u32"],
+      args: ["u32", "u32", "bool"],
       returns: "ptr"
     },
     destroyRenderer: {
@@ -5249,8 +5280,8 @@ class FFIRenderLib {
   setLogCallback(callbackPtr) {
     this.opentui.symbols.setLogCallback(callbackPtr);
   }
-  createRenderer(width, height) {
-    return this.opentui.symbols.createRenderer(width, height);
+  createRenderer(width, height, options = { testing: false }) {
+    return this.opentui.symbols.createRenderer(width, height, options.testing);
   }
   destroyRenderer(renderer, useAlternateScreen, splitHeight) {
     this.opentui.symbols.destroyRenderer(renderer, useAlternateScreen, splitHeight);
@@ -5676,21 +5707,28 @@ class TextBuffer {
   _length = 0;
   _capacity;
   _lineInfo;
+  _destroyed = false;
   constructor(lib, ptr2, capacity) {
     this.lib = lib;
     this.bufferPtr = ptr2;
     this._capacity = capacity;
   }
-  static create(capacity = 256, widthMethod) {
+  static create(capacity = 64, widthMethod) {
     const lib = resolveRenderLib();
     return lib.createTextBuffer(capacity, widthMethod);
   }
+  guard() {
+    if (this._destroyed)
+      throw new Error("TextBuffer is destroyed");
+  }
   setStyledText(text) {
+    this.guard();
     this.lib.textBufferReset(this.bufferPtr);
     this._length = 0;
     this._lineInfo = undefined;
     for (const chunk of text.chunks) {
-      const result = this.lib.textBufferWriteChunk(this.bufferPtr, chunk.text, chunk.fg || null, chunk.bg || null, chunk.attributes ?? null);
+      const textBytes = this.lib.encoder.encode(chunk.text);
+      const result = this.lib.textBufferWriteChunk(this.bufferPtr, textBytes, chunk.fg || null, chunk.bg || null, chunk.attributes ?? null);
       if (result & 1) {
         this._capacity = this.lib.textBufferGetCapacity(this.bufferPtr);
       }
@@ -5699,27 +5737,35 @@ class TextBuffer {
     this._length = this.lib.textBufferGetLength(this.bufferPtr);
   }
   setDefaultFg(fg2) {
+    this.guard();
     this.lib.textBufferSetDefaultFg(this.bufferPtr, fg2);
   }
   setDefaultBg(bg2) {
+    this.guard();
     this.lib.textBufferSetDefaultBg(this.bufferPtr, bg2);
   }
   setDefaultAttributes(attributes) {
+    this.guard();
     this.lib.textBufferSetDefaultAttributes(this.bufferPtr, attributes);
   }
   resetDefaults() {
+    this.guard();
     this.lib.textBufferResetDefaults(this.bufferPtr);
   }
   get length() {
+    this.guard();
     return this._length;
   }
   get capacity() {
+    this.guard();
     return this._capacity;
   }
   get ptr() {
+    this.guard();
     return this.bufferPtr;
   }
   getSelectedText() {
+    this.guard();
     if (this._length === 0)
       return "";
     const selectedBytes = this.lib.getSelectedTextBytes(this.bufferPtr, this.length * 4);
@@ -5728,6 +5774,7 @@ class TextBuffer {
     return this.lib.decoder.decode(selectedBytes);
   }
   getPlainText() {
+    this.guard();
     if (this._length === 0)
       return "";
     const plainBytes = this.lib.getPlainTextBytes(this.bufferPtr, this.length * 4);
@@ -5736,53 +5783,69 @@ class TextBuffer {
     return this.lib.decoder.decode(plainBytes);
   }
   get lineInfo() {
+    this.guard();
     if (!this._lineInfo) {
       this._lineInfo = this.lib.textBufferGetLineInfo(this.bufferPtr);
     }
     return this._lineInfo;
   }
   setSelection(start, end, bgColor, fgColor) {
+    this.guard();
     this.lib.textBufferSetSelection(this.bufferPtr, start, end, bgColor || null, fgColor || null);
   }
   resetSelection() {
+    this.guard();
     this.lib.textBufferResetSelection(this.bufferPtr);
   }
   setLocalSelection(anchorX, anchorY, focusX, focusY, bgColor, fgColor) {
+    this.guard();
     return this.lib.textBufferSetLocalSelection(this.bufferPtr, anchorX, anchorY, focusX, focusY, bgColor || null, fgColor || null);
   }
   resetLocalSelection() {
+    this.guard();
     this.lib.textBufferResetLocalSelection(this.bufferPtr);
   }
   getSelection() {
+    this.guard();
     return this.lib.textBufferGetSelection(this.bufferPtr);
   }
   hasSelection() {
+    this.guard();
     return this.getSelection() !== null;
   }
   insertChunkGroup(index, text, fg2, bg2, attributes) {
+    this.guard();
     const textBytes = this.lib.encoder.encode(text);
     this.insertEncodedChunkGroup(index, textBytes, fg2, bg2, attributes);
   }
   insertEncodedChunkGroup(index, textBytes, fg2, bg2, attributes) {
+    this.guard();
     this._length = this.lib.textBufferInsertChunkGroup(this.bufferPtr, index, textBytes, fg2 || null, bg2 || null, attributes ?? null);
     this._lineInfo = undefined;
   }
   removeChunkGroup(index) {
+    this.guard();
     this._length = this.lib.textBufferRemoveChunkGroup(this.bufferPtr, index);
     this._lineInfo = undefined;
   }
   replaceChunkGroup(index, text, fg2, bg2, attributes) {
+    this.guard();
     const textBytes = this.lib.encoder.encode(text);
     this.replaceEncodedChunkGroup(index, textBytes, fg2, bg2, attributes);
   }
   replaceEncodedChunkGroup(index, textBytes, fg2, bg2, attributes) {
+    this.guard();
     this._length = this.lib.textBufferReplaceChunkGroup(this.bufferPtr, index, textBytes, fg2 || null, bg2 || null, attributes ?? null);
     this._lineInfo = undefined;
   }
   get chunkGroupCount() {
+    this.guard();
     return this.lib.textBufferGetChunkGroupCount(this.bufferPtr);
   }
   destroy() {
+    if (this._destroyed)
+      return;
+    this._destroyed = true;
     this.lib.destroyTextBuffer(this.bufferPtr);
   }
 }
@@ -5877,12 +5940,40 @@ function isRenderable(obj) {
   return !!obj?.[BrandedRenderable];
 }
 
-class Renderable extends EventEmitter3 {
+class BaseRenderable extends EventEmitter3 {
   [BrandedRenderable] = true;
   static renderableNumber = 1;
-  static renderablesByNumber = new Map;
   id;
   num;
+  _dirty = false;
+  parent = null;
+  _visible = true;
+  constructor(options) {
+    super();
+    this.num = BaseRenderable.renderableNumber++;
+    this.id = options.id ?? `renderable-${this.num}`;
+  }
+  get isDirty() {
+    return this._dirty;
+  }
+  markClean() {
+    this._dirty = false;
+  }
+  markDirty() {
+    this._dirty = true;
+  }
+  destroy() {}
+  destroyRecursively() {}
+  get visible() {
+    return this._visible;
+  }
+  set visible(value) {
+    this._visible = value;
+  }
+}
+
+class Renderable extends BaseRenderable {
+  static renderablesByNumber = new Map;
   _isDestroyed = false;
   _ctx;
   _translateX = 0;
@@ -5894,12 +5985,10 @@ class Renderable extends EventEmitter3 {
   _widthValue = 0;
   _heightValue = 0;
   _zIndex;
-  _visible;
   selectable = false;
   buffered;
   frameBuffer = null;
-  _dirty = false;
-  focusable = false;
+  _focusable = false;
   _focused = false;
   keyHandler = getKeyHandler();
   keypressHandler = null;
@@ -5919,12 +6008,12 @@ class Renderable extends EventEmitter3 {
   parent = null;
   childrenPrimarySortDirty = true;
   childrenSortedByPrimaryAxis = [];
+  _newChildren = [];
+  onLifecyclePass = null;
   renderBefore;
   renderAfter;
   constructor(ctx, options) {
-    super();
-    this.num = Renderable.renderableNumber++;
-    this.id = options.id ?? `renderable-${this.num}`;
+    super(options);
     this._ctx = ctx;
     Renderable.renderablesByNumber.set(this.num, this);
     validateOptions(this.id, options);
@@ -5951,12 +6040,19 @@ class Renderable extends EventEmitter3 {
       this.createFrameBuffer();
     }
   }
+  get focusable() {
+    return this._focusable;
+  }
   get ctx() {
     return this._ctx;
   }
   get visible() {
     return this._visible;
   }
+  get primaryAxis() {
+    const dir = this.layoutNode.yogaNode.getFlexDirection();
+    return dir === 2 || dir === 3 ? "row" : "column";
+  }
   set visible(value) {
     if (this._visible === value)
       return;
@@ -5988,8 +6084,9 @@ class Renderable extends EventEmitter3 {
     return false;
   }
   focus() {
-    if (this._focused || !this.focusable)
+    if (this._focused || !this._focusable)
       return;
+    this._ctx.focusRenderable(this);
     this._focused = true;
     this.requestRender();
     this.keypressHandler = (key) => {
@@ -6002,7 +6099,7 @@ class Renderable extends EventEmitter3 {
     this.emit("focused" /* FOCUSED */);
   }
   blur() {
-    if (!this._focused || !this.focusable)
+    if (!this._focused || !this._focusable)
       return;
     this._focused = false;
     this.requestRender();
@@ -6034,9 +6131,6 @@ class Renderable extends EventEmitter3 {
     this._liveCount += delta;
     this.parent?.propagateLiveCount(delta);
   }
-  get isDirty() {
-    return this._dirty;
-  }
   findDescendantById(id) {
     for (const child of this.renderableArray) {
       if (child.id === id)
@@ -6047,11 +6141,8 @@ class Renderable extends EventEmitter3 {
     }
     return;
   }
-  markClean() {
-    this._dirty = false;
-  }
   requestRender() {
-    this._dirty = true;
+    this.markDirty();
     this._ctx.requestRender();
   }
   get translateX() {
@@ -6164,80 +6255,6 @@ 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;
@@ -6609,6 +6626,7 @@ class Renderable extends EventEmitter3 {
     }
     obj.parent = this;
   }
+  _forceLayoutUpdateFor = null;
   add(obj, index) {
     if (!obj) {
       return -1;
@@ -6632,6 +6650,7 @@ class Renderable extends EventEmitter3 {
     let insertedIndex;
     if (index !== undefined) {
       this.renderableArray.splice(index, 0, renderable);
+      this._forceLayoutUpdateFor = this.renderableArray.slice(index);
       insertedIndex = this.layoutNode.insertChild(childLayoutNode, index);
     } else {
       this.renderableArray.push(renderable);
@@ -6640,6 +6659,10 @@ class Renderable extends EventEmitter3 {
     this.needsZIndexSort = true;
     this.childrenPrimarySortDirty = true;
     this.renderableMap.set(renderable.id, renderable);
+    if (typeof renderable.onLifecyclePass === "function") {
+      this._ctx.registerLifecyclePass(renderable);
+    }
+    this._newChildren.push(renderable);
     if (renderable._liveCount > 0) {
       this.propagateLiveCount(renderable._liveCount);
     }
@@ -6657,6 +6680,9 @@ class Renderable extends EventEmitter3 {
     if (!anchor) {
       return this.add(renderable);
     }
+    if (!isRenderable(anchor)) {
+      throw new Error("Anchor must be a Renderable");
+    }
     if (!this.renderableMap.has(anchor.id)) {
       throw new Error("Anchor does not exist");
     }
@@ -6684,6 +6710,7 @@ class Renderable extends EventEmitter3 {
         this.requestRender();
         obj.onRemove();
         obj.parent = null;
+        this._ctx.unregisterLifecyclePass(obj);
       }
       this.renderableMap.delete(id);
       const index = this.renderableArray.findIndex((obj2) => obj2.id === id);
@@ -6700,11 +6727,44 @@ class Renderable extends EventEmitter3 {
   getChildrenCount() {
     return this.renderableArray.length;
   }
-  render(buffer, deltaTime) {
+  updateLayout(deltaTime, renderList = []) {
     if (!this.visible)
       return;
     this.onUpdate(deltaTime);
     this.updateFromLayout();
+    renderList.push({ action: "render", renderable: this });
+    if (this._newChildren.length > 0) {
+      for (const child of this._newChildren) {
+        child.updateFromLayout();
+      }
+      this._newChildren = [];
+    }
+    if (this._forceLayoutUpdateFor) {
+      for (const child of this._forceLayoutUpdateFor) {
+        child.updateFromLayout();
+      }
+      this._forceLayoutUpdateFor = null;
+    }
+    this.ensureZIndexSorted();
+    const shouldPushScissor = this._overflow !== "visible" && this.width > 0 && this.height > 0;
+    if (shouldPushScissor) {
+      const scissorRect = this.getScissorRect();
+      renderList.push({
+        action: "pushScissorRect",
+        x: scissorRect.x,
+        y: scissorRect.y,
+        width: scissorRect.width,
+        height: scissorRect.height
+      });
+    }
+    for (const child of this._getChildren()) {
+      child.updateLayout(deltaTime, renderList);
+    }
+    if (shouldPushScissor) {
+      renderList.push({ action: "popScissorRect" });
+    }
+  }
+  render(buffer, deltaTime) {
     let renderBuffer = buffer;
     if (this.buffered && this.frameBuffer) {
       renderBuffer = this.frameBuffer;
@@ -6718,18 +6778,6 @@ class Renderable extends EventEmitter3 {
     }
     this.markClean();
     this._ctx.addToHitGrid(this.x, this.y, this.width, this.height, this.num);
-    this.ensureZIndexSorted();
-    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);
     }
@@ -6882,6 +6930,7 @@ class Renderable extends EventEmitter3 {
 
 class RootRenderable extends Renderable {
   yogaConfig;
+  renderList = [];
   constructor(ctx) {
     super(ctx, { id: "__root__", zIndex: 0, visible: true, width: ctx.width, height: ctx.height, enableLayout: true });
     this.yogaConfig = src_default.Config.create();
@@ -6896,6 +6945,32 @@ class RootRenderable extends Renderable {
     this.layoutNode.yogaNode.setFlexDirection(FlexDirection.Column);
     this.calculateLayout();
   }
+  render(buffer, deltaTime) {
+    if (!this.visible)
+      return;
+    for (const renderable of this._ctx.getLifecyclePasses()) {
+      renderable.onLifecyclePass?.call(renderable);
+    }
+    if (this.layoutNode.yogaNode.isDirty()) {
+      this.calculateLayout();
+    }
+    this.renderList.length = 0;
+    this.updateLayout(deltaTime, this.renderList);
+    for (let i = 1;i < this.renderList.length; i++) {
+      const command = this.renderList[i];
+      switch (command.action) {
+        case "render":
+          command.renderable.render(buffer, deltaTime);
+          break;
+        case "pushScissorRect":
+          buffer.pushScissorRect(command.x, command.y, command.width, command.height);
+          break;
+        case "popScissorRect":
+          buffer.popScissorRect();
+          break;
+      }
+    }
+  }
   propagateLiveCount(delta) {
     const oldCount = this._liveCount;
     this._liveCount += delta;
@@ -6914,15 +6989,7 @@ class RootRenderable extends Renderable {
     this.height = height;
     this.emit("resized" /* RESIZED */, { width, height });
   }
-  onUpdate() {
-    if (this.layoutNode.yogaNode.isDirty()) {
-      this.calculateLayout();
-    }
-  }
   destroySelf() {
-    if (this.layoutNode) {
-      this.layoutNode.destroy();
-    }
     try {
       this.yogaConfig.free();
     } catch (error) {}
@@ -7783,6 +7850,83 @@ var ANSI = {
 
 // src/renderer.ts
 import { EventEmitter as EventEmitter6 } from "events";
+
+// src/lib/objects-in-viewport.ts
+function getObjectsInViewport(viewport, objects, direction = "column", padding = 10, minTriggerSize = 16) {
+  if (objects.length < minTriggerSize)
+    return objects;
+  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 isRow = direction === "row";
+  const children = objects;
+  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;
+}
+
+// src/renderer.ts
 class MouseEvent {
   type;
   button;
@@ -7944,6 +8088,8 @@ class CliRenderer extends EventEmitter6 {
   sigwinchHandler = null;
   _capabilities = null;
   _latestPointer = { x: 0, y: 0 };
+  _currentFocusedRenderable = null;
+  lifecyclePasses = new Set;
   constructor(lib, rendererPtr, stdin, stdout, width, height, config = {}) {
     super();
     this.stdin = stdin;
@@ -8036,6 +8182,7 @@ Error details:
     global.requestAnimationFrame = (callback) => {
       const id = CliRenderer.animationFrameId++;
       this.animationRequest.set(id, callback);
+      this.requestLive();
       return id;
     };
     global.cancelAnimationFrame = (handle) => {
@@ -8053,6 +8200,27 @@ Error details:
         }
       };
     }
+    this.setupInput();
+  }
+  registerLifecyclePass(renderable) {
+    this.lifecyclePasses.add(renderable);
+  }
+  unregisterLifecyclePass(renderable) {
+    this.lifecyclePasses.delete(renderable);
+  }
+  getLifecyclePasses() {
+    return this.lifecyclePasses;
+  }
+  get currentFocusedRenderable() {
+    return this._currentFocusedRenderable;
+  }
+  focusRenderable(renderable) {
+    if (this._currentFocusedRenderable === renderable)
+      return;
+    if (this._currentFocusedRenderable) {
+      this._currentFocusedRenderable.blur();
+    }
+    this._currentFocusedRenderable = renderable;
   }
   addToHitGrid(x, y, width, height, id) {
     if (id !== this.capturedRenderable?.num) {
@@ -8246,6 +8414,9 @@ Error details:
     if (this._useMouse) {
       this.enableMouse();
     }
+    this.queryPixelResolution();
+  }
+  setupInput() {
     this.stdin.on("data", (data) => {
       const str = data.toString();
       if (this.waitingForPixelResolution && /\x1b\[4;\d+;\d+t/.test(str)) {
@@ -8271,7 +8442,6 @@ Error details:
       }
       this.emit("key", data);
     });
-    this.queryPixelResolution();
   }
   handleMouseData(data) {
     const mouseEvent = this.mouseParser.parseMouseEvent(data);
@@ -8298,7 +8468,7 @@ Error details:
       this.lastOverRenderableNum = maybeRenderableId;
       const maybeRenderable = Renderable.renderablesByNumber.get(maybeRenderableId);
       if (mouseEvent.type === "down" && mouseEvent.button === 0 /* LEFT */ && !this.currentSelection?.isSelecting && !mouseEvent.modifiers.ctrl) {
-        if (maybeRenderable && maybeRenderable.selectable && maybeRenderable.shouldStartSelection(mouseEvent.x, mouseEvent.y)) {
+        if (maybeRenderable && maybeRenderable.selectable && !maybeRenderable.isDestroyed && maybeRenderable.shouldStartSelection(mouseEvent.x, mouseEvent.y)) {
           this.startSelection(maybeRenderable, mouseEvent.x, mouseEvent.y);
           const event2 = new MouseEvent(maybeRenderable, mouseEvent);
           maybeRenderable.processMouseEvent(event2);
@@ -8646,7 +8816,10 @@ Error details:
     const frameRequests = Array.from(this.animationRequest.values());
     this.animationRequest.clear();
     const animationRequestStart = performance.now();
-    frameRequests.forEach((callback) => callback(deltaTime));
+    frameRequests.forEach((callback) => {
+      callback(deltaTime);
+      this.dropLive();
+    });
     const animationRequestEnd = performance.now();
     const animationRequestTime = animationRequestEnd - animationRequestStart;
     const start = performance.now();
@@ -8740,7 +8913,7 @@ Error details:
   clearSelection() {
     if (this.currentSelection) {
       for (const renderable of this.currentSelection.touchedRenderables) {
-        if (renderable.selectable) {
+        if (renderable.selectable && !renderable.isDestroyed) {
           renderable.onSelectionChanged(null);
         }
       }
@@ -8815,7 +8988,7 @@ Error details:
     }
   }
   walkSelectableRenderables(container, selectionBounds, selectedRenderables, touchedRenderables) {
-    const children = container.getChildrenInViewport(selectionBounds, 0);
+    const children = getObjectsInViewport(selectionBounds, container.getChildrenSortedByPrimaryAxis(), container.primaryAxis, 0);
     for (const child of children) {
       if (child.selectable) {
         const hasSelection = child.onSelectionChanged(this.currentSelection);
@@ -8831,7 +9004,7 @@ Error details:
   }
 }
 
-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, 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, maybeMakeRenderable, 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 };
+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, visualizeRenderableTree, isStyledText, 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, 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, maybeMakeRenderable, wrapWithDelegates, instantiate, delegate, LayoutEvents, RenderableEvents, isValidPercentage, isMarginType, isPaddingType, isPositionType, isPositionTypeType, isOverflowType, isDimensionType, isFlexBasisType, isSizeType, isRenderable, BaseRenderable, Renderable, RootRenderable, capture, ConsolePosition, TerminalConsole, getObjectsInViewport, MouseEvent, MouseButton, createCliRenderer, CliRenderEvents, CliRenderer };
 
-//# debugId=071E012DDCE3FA6064756E2164756E21
-//# sourceMappingURL=index-d6kwx5pm.js.map
+//# debugId=5DA797F1A7D4887764756E2164756E21
+//# sourceMappingURL=index-mh94hn7d.js.map