@opentui/core 0.1.12 → 0.1.14

package/index.js

@@ -11,6 +11,7 @@ import {
   Gutter,
   KeyHandler,
   LayoutEvents,
+  LogLevel,
   MeasureMode,
   MouseButton,
   MouseEvent,
@@ -74,9 +75,10 @@ import {
   isDimensionType,
   isFlexBasisType,
   isMarginType,
+  isOverflowType,
   isPaddingType,
   isPositionType,
-  isPostionTypeType,
+  isPositionTypeType,
   isSizeType,
   isVNode,
   isValidPercentage,
@@ -115,7 +117,7 @@ import {
   white,
   wrapWithDelegates,
   yellow
-} from "./index-bpwzbxgn.js";
+} from "./index-rv93tneq.js";
 // src/post/filters.ts
 function applyScanlines(buffer, strength = 0.8, step = 2) {
   const width = buffer.width;
@@ -958,6 +960,7 @@ class Timeline {
   autoplay;
   onComplete;
   onPause;
+  stateChangeListeners = [];
   constructor(options = {}) {
     this.duration = options.duration || 1000;
     this.loop = options.loop === true;
@@ -965,6 +968,17 @@ class Timeline {
     this.onComplete = options.onComplete;
     this.onPause = options.onPause;
   }
+  addStateChangeListener(listener) {
+    this.stateChangeListeners.push(listener);
+  }
+  removeStateChangeListener(listener) {
+    this.stateChangeListeners = this.stateChangeListeners.filter((l) => l !== listener);
+  }
+  notifyStateChange() {
+    for (const listener of this.stateChangeListeners) {
+      listener(this);
+    }
+  }
   add(target, properties, startTime = 0) {
     const resolvedStartTime = typeof startTime === "string" ? 0 : startTime;
     const animationProperties = {};
@@ -1036,6 +1050,7 @@ class Timeline {
       }
     });
     this.isPlaying = true;
+    this.notifyStateChange();
     return this;
   }
   pause() {
@@ -1046,6 +1061,7 @@ class Timeline {
     if (this.onPause) {
       this.onPause();
     }
+    this.notifyStateChange();
     return this;
   }
   resetItems() {
@@ -1071,6 +1087,7 @@ class Timeline {
     this.currentTime = 0;
     this.isPlaying = true;
     this.resetItems();
+    this.notifyStateChange();
     return this;
   }
   update(deltaTime) {
@@ -1103,23 +1120,75 @@ class Timeline {
       if (this.onComplete) {
         this.onComplete();
       }
+      this.notifyStateChange();
     }
   }
 }
 
 class TimelineEngine {
   timelines = new Set;
+  renderer = null;
+  frameCallback = null;
+  isLive = false;
   defaults = {
     frameRate: 60
   };
+  attach(renderer) {
+    if (this.renderer) {
+      this.detach();
+    }
+    this.renderer = renderer;
+    this.frameCallback = async (deltaTime) => {
+      this.update(deltaTime);
+    };
+    renderer.setFrameCallback(this.frameCallback);
+  }
+  detach() {
+    if (this.renderer && this.frameCallback) {
+      this.renderer.removeFrameCallback(this.frameCallback);
+      if (this.isLive) {
+        this.renderer.dropLive();
+        this.isLive = false;
+      }
+    }
+    this.renderer = null;
+    this.frameCallback = null;
+  }
+  updateLiveState() {
+    if (!this.renderer)
+      return;
+    const hasRunningTimelines = Array.from(this.timelines).some((timeline) => !timeline.synced && timeline.isPlaying && !timeline.isComplete);
+    if (hasRunningTimelines && !this.isLive) {
+      this.renderer.requestLive();
+      this.isLive = true;
+    } else if (!hasRunningTimelines && this.isLive) {
+      this.renderer.dropLive();
+      this.isLive = false;
+    }
+  }
+  onTimelineStateChange = (timeline) => {
+    this.updateLiveState();
+  };
   register(timeline) {
-    this.timelines.add(timeline);
+    if (!this.timelines.has(timeline)) {
+      this.timelines.add(timeline);
+      timeline.addStateChangeListener(this.onTimelineStateChange);
+      this.updateLiveState();
+    }
   }
   unregister(timeline) {
-    this.timelines.delete(timeline);
+    if (this.timelines.has(timeline)) {
+      this.timelines.delete(timeline);
+      timeline.removeStateChangeListener(this.onTimelineStateChange);
+      this.updateLiveState();
+    }
   }
   clear() {
+    for (const timeline of this.timelines) {
+      timeline.removeStateChangeListener(this.onTimelineStateChange);
+    }
     this.timelines.clear();
+    this.updateLiveState();
   }
   update(deltaTime) {
     for (const timeline of this.timelines) {
@@ -1174,6 +1243,9 @@ class BoxRenderable extends Renderable {
     super(ctx, options);
     this._backgroundColor = parseColor(options.backgroundColor || this._defaultOptions.backgroundColor);
     this._border = options.border ?? this._defaultOptions.border;
+    if (!options.border && (options.borderStyle || options.borderColor || options.focusedBorderColor || options.customBorderChars)) {
+      this._border = true;
+    }
     this._borderStyle = options.borderStyle || this._defaultOptions.borderStyle;
     this._borderColor = parseColor(options.borderColor || this._defaultOptions.borderColor);
     this._focusedBorderColor = parseColor(options.focusedBorderColor || this._defaultOptions.focusedBorderColor);
@@ -1195,7 +1267,7 @@ class BoxRenderable extends Renderable {
   set customBorderChars(value) {
     this._customBorderCharsObj = value;
     this._customBorderChars = value ? borderCharsToArray(value) : undefined;
-    this.needsUpdate();
+    this.requestRender();
   }
   get backgroundColor() {
     return this._backgroundColor;
@@ -1204,7 +1276,7 @@ class BoxRenderable extends Renderable {
     const newColor = parseColor(value ?? this._defaultOptions.backgroundColor);
     if (this._backgroundColor !== newColor) {
       this._backgroundColor = newColor;
-      this.needsUpdate();
+      this.requestRender();
     }
   }
   get border() {
@@ -1215,7 +1287,7 @@ class BoxRenderable extends Renderable {
       this._border = value;
       this.borderSides = getBorderSides(value);
       this.applyYogaBorders();
-      this.needsUpdate();
+      this.requestRender();
     }
   }
   get borderStyle() {
@@ -1226,7 +1298,7 @@ class BoxRenderable extends Renderable {
     if (this._borderStyle !== _value) {
       this._borderStyle = _value;
       this._customBorderChars = undefined;
-      this.needsUpdate();
+      this.requestRender();
     }
   }
   get borderColor() {
@@ -1236,7 +1308,7 @@ class BoxRenderable extends Renderable {
     const newColor = parseColor(value ?? this._defaultOptions.borderColor);
     if (this._borderColor !== newColor) {
       this._borderColor = newColor;
-      this.needsUpdate();
+      this.requestRender();
     }
   }
   get focusedBorderColor() {
@@ -1247,7 +1319,7 @@ class BoxRenderable extends Renderable {
     if (this._focusedBorderColor !== newColor) {
       this._focusedBorderColor = newColor;
       if (this._focused) {
-        this.needsUpdate();
+        this.requestRender();
       }
     }
   }
@@ -1257,7 +1329,7 @@ class BoxRenderable extends Renderable {
   set title(value) {
     if (this._title !== value) {
       this._title = value;
-      this.needsUpdate();
+      this.requestRender();
     }
   }
   get titleAlignment() {
@@ -1266,7 +1338,7 @@ class BoxRenderable extends Renderable {
   set titleAlignment(value) {
     if (this._titleAlignment !== value) {
       this._titleAlignment = value;
-      this.needsUpdate();
+      this.requestRender();
     }
   }
   renderSelf(buffer) {
@@ -1286,13 +1358,29 @@ class BoxRenderable extends Renderable {
       titleAlignment: this._titleAlignment
     });
   }
+  getScissorRect() {
+    const baseRect = super.getScissorRect();
+    if (!this.borderSides.top && !this.borderSides.right && !this.borderSides.bottom && !this.borderSides.left) {
+      return baseRect;
+    }
+    const leftInset = this.borderSides.left ? 1 : 0;
+    const rightInset = this.borderSides.right ? 1 : 0;
+    const topInset = this.borderSides.top ? 1 : 0;
+    const bottomInset = this.borderSides.bottom ? 1 : 0;
+    return {
+      x: baseRect.x + leftInset,
+      y: baseRect.y + topInset,
+      width: Math.max(0, baseRect.width - leftInset - rightInset),
+      height: Math.max(0, baseRect.height - topInset - bottomInset)
+    };
+  }
   applyYogaBorders() {
     const node = this.layoutNode.yogaNode;
     node.setBorder(Edge.Left, this.borderSides.left ? 1 : 0);
     node.setBorder(Edge.Right, this.borderSides.right ? 1 : 0);
     node.setBorder(Edge.Top, this.borderSides.top ? 1 : 0);
     node.setBorder(Edge.Bottom, this.borderSides.bottom ? 1 : 0);
-    this.needsUpdate();
+    this.requestRender();
   }
   applyYogaGap(options) {
     const node = this.layoutNode.yogaNode;
@@ -1309,19 +1397,19 @@ class BoxRenderable extends Renderable {
   set gap(gap) {
     if (isGapType(gap)) {
       this.layoutNode.yogaNode.setGap(Gutter.All, gap);
-      this.needsUpdate();
+      this.requestRender();
     }
   }
   set rowGap(rowGap) {
     if (isGapType(rowGap)) {
       this.layoutNode.yogaNode.setGap(Gutter.Row, rowGap);
-      this.needsUpdate();
+      this.requestRender();
     }
   }
   set columnGap(columnGap) {
     if (isGapType(columnGap)) {
       this.layoutNode.yogaNode.setGap(Gutter.Column, columnGap);
-      this.needsUpdate();
+      this.requestRender();
     }
   }
 }
@@ -1333,7 +1421,8 @@ class FrameBufferRenderable extends Renderable {
     super(ctx, options);
     this.respectAlpha = options.respectAlpha || false;
     this.frameBuffer = OptimizedBuffer.create(options.width, options.height, this._ctx.widthMethod, {
-      respectAlpha: this.respectAlpha
+      respectAlpha: this.respectAlpha,
+      id: options.id || `framebufferrenderable-${this.id}`
     });
   }
   onResize(width, height) {
@@ -1342,7 +1431,7 @@ class FrameBufferRenderable extends Renderable {
     }
     this.frameBuffer.resize(width, height);
     super.onResize(width, height);
-    this.needsUpdate();
+    this.requestRender();
   }
   renderSelf(buffer) {
     if (!this.visible)
@@ -1354,12 +1443,6 @@ class FrameBufferRenderable extends Renderable {
     super.destroySelf();
   }
 }
-// src/renderables/Group.ts
-class GroupRenderable extends Renderable {
-  constructor(ctx, options) {
-    super(ctx, options);
-  }
-}
 // src/renderables/Text.ts
 class TextRenderable extends Renderable {
   selectable = true;
@@ -1373,17 +1456,26 @@ class TextRenderable extends Renderable {
   textBuffer;
   _plainText = "";
   _lineInfo = { lineStarts: [], lineWidths: [] };
+  _defaultOptions = {
+    content: "",
+    fg: RGBA.fromValues(1, 1, 1, 1),
+    bg: RGBA.fromValues(0, 0, 0, 0),
+    selectionBg: undefined,
+    selectionFg: undefined,
+    selectable: true,
+    attributes: 0
+  };
   constructor(ctx, options) {
     super(ctx, options);
     this.selectionHelper = new TextSelectionHelper(() => this.x, () => this.y, () => this._plainText.length, () => this._lineInfo);
-    const content = options.content ?? "";
+    const content = options.content ?? this._defaultOptions.content;
     this._text = typeof content === "string" ? stringToStyledText(content) : content;
-    this._defaultFg = options.fg ? parseColor(options.fg) : RGBA.fromValues(1, 1, 1, 1);
-    this._defaultBg = options.bg ? parseColor(options.bg) : RGBA.fromValues(0, 0, 0, 0);
-    this._defaultAttributes = options.attributes ?? 0;
-    this._selectionBg = options.selectionBg ? parseColor(options.selectionBg) : undefined;
-    this._selectionFg = options.selectionFg ? parseColor(options.selectionFg) : undefined;
-    this.selectable = options.selectable ?? true;
+    this._defaultFg = parseColor(options.fg ?? this._defaultOptions.fg);
+    this._defaultBg = parseColor(options.bg ?? this._defaultOptions.bg);
+    this._defaultAttributes = options.attributes ?? this._defaultOptions.attributes;
+    this._selectionBg = options.selectionBg ? parseColor(options.selectionBg) : this._defaultOptions.selectionBg;
+    this._selectionFg = options.selectionFg ? parseColor(options.selectionFg) : this._defaultOptions.selectionFg;
+    this.selectable = options.selectable ?? this._defaultOptions.selectable;
     this.textBuffer = TextBuffer.create(64, this._ctx.widthMethod);
     this.textBuffer.setDefaultFg(this._defaultFg);
     this.textBuffer.setDefaultBg(this._defaultBg);
@@ -1402,35 +1494,61 @@ class TextRenderable extends Renderable {
     return this._defaultFg;
   }
   set fg(value) {
-    if (value) {
-      this._defaultFg = parseColor(value);
+    const newColor = parseColor(value ?? this._defaultOptions.fg);
+    if (this._defaultFg !== newColor) {
+      this._defaultFg = newColor;
       this.textBuffer.setDefaultFg(this._defaultFg);
-      this.needsUpdate();
+      this.requestRender();
+    }
+  }
+  get selectionBg() {
+    return this._selectionBg;
+  }
+  set selectionBg(value) {
+    const newColor = value ? parseColor(value) : this._defaultOptions.selectionBg;
+    if (this._selectionBg !== newColor) {
+      this._selectionBg = newColor;
+      this.syncSelectionToTextBuffer();
+      this.requestRender();
+    }
+  }
+  get selectionFg() {
+    return this._selectionFg;
+  }
+  set selectionFg(value) {
+    const newColor = value ? parseColor(value) : this._defaultOptions.selectionFg;
+    if (this._selectionFg !== newColor) {
+      this._selectionFg = newColor;
+      this.syncSelectionToTextBuffer();
+      this.requestRender();
     }
   }
   get bg() {
     return this._defaultBg;
   }
   set bg(value) {
-    if (value) {
-      this._defaultBg = parseColor(value);
+    const newColor = parseColor(value ?? this._defaultOptions.bg);
+    if (this._defaultBg !== newColor) {
+      this._defaultBg = newColor;
       this.textBuffer.setDefaultBg(this._defaultBg);
-      this.needsUpdate();
+      this.requestRender();
     }
   }
   get attributes() {
     return this._defaultAttributes;
   }
   set attributes(value) {
-    this._defaultAttributes = value;
-    this.textBuffer.setDefaultAttributes(this._defaultAttributes);
-    this.needsUpdate();
+    if (this._defaultAttributes !== value) {
+      this._defaultAttributes = value;
+      this.textBuffer.setDefaultAttributes(this._defaultAttributes);
+      this.requestRender();
+    }
   }
   onResize(width, height) {
     const changed = this.selectionHelper.reevaluateSelection(width, height);
     if (changed) {
       this.syncSelectionToTextBuffer();
-      this.needsUpdate();
+      this.requestRender();
     }
   }
   syncSelectionToTextBuffer() {
@@ -1452,7 +1570,7 @@ class TextRenderable extends Renderable {
       this.syncSelectionToTextBuffer();
     }
     this.layoutNode.yogaNode.markDirty();
-    this.needsUpdate();
+    this.requestRender();
   }
   setupMeasureFunc() {
     const measureFunc = (width, widthMode, height, heightMode) => {
@@ -1484,7 +1602,7 @@ class TextRenderable extends Renderable {
     const changed = this.selectionHelper.onSelectionChanged(selection, this.width, this.height);
     if (changed) {
       this.syncSelectionToTextBuffer();
-      this.needsUpdate();
+      this.requestRender();
     }
     return this.selectionHelper.hasSelection();
   }
@@ -1554,7 +1672,7 @@ class ASCIIFontRenderable extends FrameBufferRenderable {
     this.updateDimensions();
     this.selectionHelper.reevaluateSelection(this.width, this.height);
     this.renderFontToBuffer();
-    this.needsUpdate();
+    this.requestRender();
   }
   get font() {
     return this._font;
@@ -1564,7 +1682,7 @@ class ASCIIFontRenderable extends FrameBufferRenderable {
     this.updateDimensions();
     this.selectionHelper.reevaluateSelection(this.width, this.height);
     this.renderFontToBuffer();
-    this.needsUpdate();
+    this.requestRender();
   }
   get fg() {
     return this._fg;
@@ -1576,7 +1694,7 @@ class ASCIIFontRenderable extends FrameBufferRenderable {
       this._fg = [typeof value === "string" ? parseColor(value) : value];
     }
     this.renderFontToBuffer();
-    this.needsUpdate();
+    this.requestRender();
   }
   get bg() {
     return this._bg;
@@ -1584,7 +1702,7 @@ class ASCIIFontRenderable extends FrameBufferRenderable {
   set bg(value) {
     this._bg = typeof value === "string" ? parseColor(value) : value;
     this.renderFontToBuffer();
-    this.needsUpdate();
+    this.requestRender();
   }
   updateDimensions() {
     const measurements = measureText({ text: this._text, font: this._font });
@@ -1598,7 +1716,7 @@ class ASCIIFontRenderable extends FrameBufferRenderable {
     const changed = this.selectionHelper.onSelectionChanged(selection, this.width, this.height);
     if (changed) {
       this.renderFontToBuffer();
-      this.needsUpdate();
+      this.requestRender();
     }
     return this.selectionHelper.hasSelection();
   }
@@ -1774,7 +1892,7 @@ class InputRenderable extends Renderable {
     if (this._value !== newValue) {
       this._value = newValue;
       this._cursorPosition = Math.min(this._cursorPosition, this._value.length);
-      this.needsUpdate();
+      this.requestRender();
       this.updateCursorPosition();
       this.emit("input" /* INPUT */, this._value);
     }
@@ -1782,14 +1900,14 @@ class InputRenderable extends Renderable {
   set placeholder(placeholder) {
     if (this._placeholder !== placeholder) {
       this._placeholder = placeholder;
-      this.needsUpdate();
+      this.requestRender();
     }
   }
   set cursorPosition(position) {
     const newPosition = Math.max(0, Math.min(position, this._value.length));
     if (this._cursorPosition !== newPosition) {
       this._cursorPosition = newPosition;
-      this.needsUpdate();
+      this.requestRender();
       this.updateCursorPosition();
     }
   }
@@ -1801,7 +1919,7 @@ class InputRenderable extends Renderable {
     const afterCursor = this._value.substring(this._cursorPosition);
     this._value = beforeCursor + text + afterCursor;
     this._cursorPosition += text.length;
-    this.needsUpdate();
+    this.requestRender();
     this.updateCursorPosition();
     this.emit("input" /* INPUT */, this._value);
   }
@@ -1811,14 +1929,14 @@ class InputRenderable extends Renderable {
       const afterCursor = this._value.substring(this._cursorPosition);
       this._value = beforeCursor + afterCursor;
       this._cursorPosition--;
-      this.needsUpdate();
+      this.requestRender();
       this.updateCursorPosition();
       this.emit("input" /* INPUT */, this._value);
     } else if (direction === "forward" && this._cursorPosition < this._value.length) {
       const beforeCursor = this._value.substring(0, this._cursorPosition);
       const afterCursor = this._value.substring(this._cursorPosition + 1);
       this._value = beforeCursor + afterCursor;
-      this.needsUpdate();
+      this.requestRender();
       this.updateCursorPosition();
       this.emit("input" /* INPUT */, this._value);
     }
@@ -1866,49 +1984,49 @@ class InputRenderable extends Renderable {
     this._maxLength = maxLength;
     if (this._value.length > maxLength) {
       this._value = this._value.substring(0, maxLength);
-      this.needsUpdate();
+      this.requestRender();
     }
   }
   set backgroundColor(value) {
     const newColor = parseColor(value ?? this._defaultOptions.backgroundColor);
     if (this._backgroundColor !== newColor) {
       this._backgroundColor = newColor;
-      this.needsUpdate();
+      this.requestRender();
     }
   }
   set textColor(value) {
     const newColor = parseColor(value ?? this._defaultOptions.textColor);
     if (this._textColor !== newColor) {
       this._textColor = newColor;
-      this.needsUpdate();
+      this.requestRender();
     }
   }
   set focusedBackgroundColor(value) {
     const newColor = parseColor(value ?? this._defaultOptions.focusedBackgroundColor);
     if (this._focusedBackgroundColor !== newColor) {
       this._focusedBackgroundColor = newColor;
-      this.needsUpdate();
+      this.requestRender();
     }
   }
   set focusedTextColor(value) {
     const newColor = parseColor(value ?? this._defaultOptions.focusedTextColor);
     if (this._focusedTextColor !== newColor) {
       this._focusedTextColor = newColor;
-      this.needsUpdate();
+      this.requestRender();
     }
   }
   set placeholderColor(value) {
     const newColor = parseColor(value ?? this._defaultOptions.placeholderColor);
     if (this._placeholderColor !== newColor) {
       this._placeholderColor = newColor;
-      this.needsUpdate();
+      this.requestRender();
     }
   }
   set cursorColor(value) {
     const newColor = parseColor(value ?? this._defaultOptions.cursorColor);
     if (this._cursorColor !== newColor) {
       this._cursorColor = newColor;
-      this.needsUpdate();
+      this.requestRender();
     }
   }
   updateFromLayout() {
@@ -1993,7 +2111,7 @@ class SelectRenderable extends Renderable {
     this._descriptionColor = parseColor(options.descriptionColor || this._defaultOptions.descriptionColor);
     this._selectedDescriptionColor = parseColor(options.selectedDescriptionColor || this._defaultOptions.selectedDescriptionColor);
     this._fastScrollStep = options.fastScrollStep || this._defaultOptions.fastScrollStep;
-    this.needsUpdate();
+    this.requestRender();
   }
   renderSelf(buffer, deltaTime) {
     if (!this.visible || !this.frameBuffer)
@@ -2069,7 +2187,7 @@ class SelectRenderable extends Renderable {
     this._options = options;
     this.selectedIndex = Math.min(this.selectedIndex, Math.max(0, options.length - 1));
     this.updateScrollOffset();
-    this.needsUpdate();
+    this.requestRender();
   }
   getSelectedOption() {
     return this._options[this.selectedIndex] || null;
@@ -2087,7 +2205,7 @@ class SelectRenderable extends Renderable {
       this.selectedIndex = 0;
     }
     this.updateScrollOffset();
-    this.needsUpdate();
+    this.requestRender();
     this.emit("selectionChanged" /* SELECTION_CHANGED */, this.selectedIndex, this.getSelectedOption());
   }
   moveDown(steps = 1) {
@@ -2100,7 +2218,7 @@ class SelectRenderable extends Renderable {
       this.selectedIndex = this._options.length - 1;
     }
     this.updateScrollOffset();
-    this.needsUpdate();
+    this.requestRender();
     this.emit("selectionChanged" /* SELECTION_CHANGED */, this.selectedIndex, this.getSelectedOption());
   }
   selectCurrent() {
@@ -2113,7 +2231,7 @@ class SelectRenderable extends Renderable {
     if (index >= 0 && index < this._options.length) {
       this.selectedIndex = index;
       this.updateScrollOffset();
-      this.needsUpdate();
+      this.requestRender();
       this.emit("selectionChanged" /* SELECTION_CHANGED */, this.selectedIndex, this.getSelectedOption());
     }
   }
@@ -2124,13 +2242,13 @@ class SelectRenderable extends Renderable {
     const newScrollOffset = Math.max(0, Math.min(this.selectedIndex - halfVisible, this._options.length - this.maxVisibleItems));
     if (newScrollOffset !== this.scrollOffset) {
       this.scrollOffset = newScrollOffset;
-      this.needsUpdate();
+      this.requestRender();
     }
   }
   onResize(width, height) {
     this.maxVisibleItems = Math.max(1, Math.floor(height / this.linesPerItem));
     this.updateScrollOffset();
-    this.needsUpdate();
+    this.requestRender();
   }
   handleKeyPress(key) {
     const keyName = typeof key === "string" ? key : key.name;
@@ -2156,7 +2274,7 @@ class SelectRenderable extends Renderable {
   }
   set showScrollIndicator(show) {
     this._showScrollIndicator = show;
-    this.needsUpdate();
+    this.requestRender();
   }
   get showDescription() {
     return this._showDescription;
@@ -2168,7 +2286,7 @@ class SelectRenderable extends Renderable {
       this.linesPerItem += this._itemSpacing;
       this.maxVisibleItems = Math.max(1, Math.floor(this.height / this.linesPerItem));
       this.updateScrollOffset();
-      this.needsUpdate();
+      this.requestRender();
     }
   }
   get wrapSelection() {
@@ -2181,56 +2299,56 @@ class SelectRenderable extends Renderable {
     const newColor = parseColor(value ?? this._defaultOptions.backgroundColor);
     if (this._backgroundColor !== newColor) {
       this._backgroundColor = newColor;
-      this.needsUpdate();
+      this.requestRender();
     }
   }
   set textColor(value) {
     const newColor = parseColor(value ?? this._defaultOptions.textColor);
     if (this._textColor !== newColor) {
       this._textColor = newColor;
-      this.needsUpdate();
+      this.requestRender();
     }
   }
   set focusedBackgroundColor(value) {
     const newColor = parseColor(value ?? this._defaultOptions.focusedBackgroundColor);
     if (this._focusedBackgroundColor !== newColor) {
       this._focusedBackgroundColor = newColor;
-      this.needsUpdate();
+      this.requestRender();
     }
   }
   set focusedTextColor(value) {
     const newColor = parseColor(value ?? this._defaultOptions.focusedTextColor);
     if (this._focusedTextColor !== newColor) {
       this._focusedTextColor = newColor;
-      this.needsUpdate();
+      this.requestRender();
     }
   }
   set selectedBackgroundColor(value) {
     const newColor = parseColor(value ?? this._defaultOptions.selectedBackgroundColor);
     if (this._selectedBackgroundColor !== newColor) {
       this._selectedBackgroundColor = newColor;
-      this.needsUpdate();
+      this.requestRender();
     }
   }
   set selectedTextColor(value) {
     const newColor = parseColor(value ?? this._defaultOptions.selectedTextColor);
     if (this._selectedTextColor !== newColor) {
       this._selectedTextColor = newColor;
-      this.needsUpdate();
+      this.requestRender();
     }
   }
   set descriptionColor(value) {
     const newColor = parseColor(value ?? this._defaultOptions.descriptionColor);
     if (this._descriptionColor !== newColor) {
       this._descriptionColor = newColor;
-      this.needsUpdate();
+      this.requestRender();
     }
   }
   set selectedDescriptionColor(value) {
     const newColor = parseColor(value ?? this._defaultOptions.selectedDescriptionColor);
     if (this._selectedDescriptionColor !== newColor) {
       this._selectedDescriptionColor = newColor;
-      this.needsUpdate();
+      this.requestRender();
     }
   }
   set font(font) {
@@ -2240,7 +2358,7 @@ class SelectRenderable extends Renderable {
     this.linesPerItem += this._itemSpacing;
     this.maxVisibleItems = Math.max(1, Math.floor(this.height / this.linesPerItem));
     this.updateScrollOffset();
-    this.needsUpdate();
+    this.requestRender();
   }
   set itemSpacing(spacing) {
     this._itemSpacing = spacing;
@@ -2248,7 +2366,7 @@ class SelectRenderable extends Renderable {
     this.linesPerItem += this._itemSpacing;
     this.maxVisibleItems = Math.max(1, Math.floor(this.height / this.linesPerItem));
     this.updateScrollOffset();
-    this.needsUpdate();
+    this.requestRender();
   }
   set fastScrollStep(step) {
     this._fastScrollStep = step;
@@ -2382,7 +2500,7 @@ class TabSelectRenderable extends Renderable {
     this._options = options;
     this.selectedIndex = Math.min(this.selectedIndex, Math.max(0, options.length - 1));
     this.updateScrollOffset();
-    this.needsUpdate();
+    this.requestRender();
   }
   getSelectedOption() {
     return this._options[this.selectedIndex] || null;
@@ -2399,7 +2517,7 @@ class TabSelectRenderable extends Renderable {
       return;
     }
     this.updateScrollOffset();
-    this.needsUpdate();
+    this.requestRender();
     this.emit("selectionChanged" /* SELECTION_CHANGED */, this.selectedIndex, this.getSelectedOption());
   }
   moveRight() {
@@ -2411,7 +2529,7 @@ class TabSelectRenderable extends Renderable {
       return;
     }
     this.updateScrollOffset();
-    this.needsUpdate();
+    this.requestRender();
     this.emit("selectionChanged" /* SELECTION_CHANGED */, this.selectedIndex, this.getSelectedOption());
   }
   selectCurrent() {
@@ -2424,7 +2542,7 @@ class TabSelectRenderable extends Renderable {
     if (index >= 0 && index < this._options.length) {
       this.selectedIndex = index;
       this.updateScrollOffset();
-      this.needsUpdate();
+      this.requestRender();
       this.emit("selectionChanged" /* SELECTION_CHANGED */, this.selectedIndex, this.getSelectedOption());
     }
   }
@@ -2433,13 +2551,13 @@ class TabSelectRenderable extends Renderable {
     const newScrollOffset = Math.max(0, Math.min(this.selectedIndex - halfVisible, this._options.length - this.maxVisibleTabs));
     if (newScrollOffset !== this.scrollOffset) {
       this.scrollOffset = newScrollOffset;
-      this.needsUpdate();
+      this.requestRender();
     }
   }
   onResize(width, height) {
     this.maxVisibleTabs = Math.max(1, Math.floor(width / this._tabWidth));
     this.updateScrollOffset();
-    this.needsUpdate();
+    this.requestRender();
   }
   setTabWidth(tabWidth) {
     if (this._tabWidth === tabWidth)
@@ -2447,7 +2565,7 @@ class TabSelectRenderable extends Renderable {
     this._tabWidth = tabWidth;
     this.maxVisibleTabs = Math.max(1, Math.floor(this.width / this._tabWidth));
     this.updateScrollOffset();
-    this.needsUpdate();
+    this.requestRender();
   }
   getTabWidth() {
     return this._tabWidth;
@@ -2477,35 +2595,35 @@ class TabSelectRenderable extends Renderable {
     this._options = options;
     this.selectedIndex = Math.min(this.selectedIndex, Math.max(0, options.length - 1));
     this.updateScrollOffset();
-    this.needsUpdate();
+    this.requestRender();
   }
   set backgroundColor(color) {
     this._backgroundColor = parseColor(color);
-    this.needsUpdate();
+    this.requestRender();
   }
   set textColor(color) {
     this._textColor = parseColor(color);
-    this.needsUpdate();
+    this.requestRender();
   }
   set focusedBackgroundColor(color) {
     this._focusedBackgroundColor = parseColor(color);
-    this.needsUpdate();
+    this.requestRender();
   }
   set focusedTextColor(color) {
     this._focusedTextColor = parseColor(color);
-    this.needsUpdate();
+    this.requestRender();
   }
   set selectedBackgroundColor(color) {
     this._selectedBackgroundColor = parseColor(color);
-    this.needsUpdate();
+    this.requestRender();
   }
   set selectedTextColor(color) {
     this._selectedTextColor = parseColor(color);
-    this.needsUpdate();
+    this.requestRender();
   }
   set selectedDescriptionColor(color) {
     this._selectedDescriptionColor = parseColor(color);
-    this.needsUpdate();
+    this.requestRender();
   }
   get showDescription() {
     return this._showDescription;
@@ -2515,7 +2633,7 @@ class TabSelectRenderable extends Renderable {
       this._showDescription = show;
       const newHeight = this.calculateDynamicHeight();
       this.height = newHeight;
-      this.needsUpdate();
+      this.requestRender();
     }
   }
   get showUnderline() {
@@ -2526,7 +2644,7 @@ class TabSelectRenderable extends Renderable {
       this._showUnderline = show;
       const newHeight = this.calculateDynamicHeight();
       this.height = newHeight;
-      this.needsUpdate();
+      this.requestRender();
     }
   }
   get showScrollArrows() {
@@ -2535,7 +2653,7 @@ class TabSelectRenderable extends Renderable {
   set showScrollArrows(show) {
     if (this._showScrollArrows !== show) {
       this._showScrollArrows = show;
-      this.needsUpdate();
+      this.requestRender();
     }
   }
   get wrapSelection() {
@@ -2553,16 +2671,13 @@ class TabSelectRenderable extends Renderable {
     this._tabWidth = tabWidth;
     this.maxVisibleTabs = Math.max(1, Math.floor(this.width / this._tabWidth));
     this.updateScrollOffset();
-    this.needsUpdate();
+    this.requestRender();
   }
 }
 // src/renderables/composition/constructs.ts
 function Generic(props, ...children) {
   return h(VRenderable, props || {}, ...children);
 }
-function Group(props, ...children) {
-  return h(GroupRenderable, props || {}, ...children);
-}
 function Box(props, ...children) {
   return h(BoxRenderable, props || {}, ...children);
 }
@@ -2636,9 +2751,10 @@ export {
   isValidPercentage,
   isVNode,
   isSizeType,
-  isPostionTypeType,
+  isPositionTypeType,
   isPositionType,
   isPaddingType,
+  isOverflowType,
   isMarginType,
   isFlexBasisType,
   isDimensionType,
@@ -2721,13 +2837,12 @@ export {
   MouseParser,
   MouseEvent,
   MouseButton,
+  LogLevel,
   LayoutEvents,
   KeyHandler,
   InputRenderableEvents,
   InputRenderable,
   Input,
-  GroupRenderable,
-  Group,
   Generic,
   FrameBufferRenderable,
   FrameBuffer,
@@ -2748,5 +2863,5 @@ export {
   ASCIIFont
 };
 
-//# debugId=81DD4B36658B2C2464756E2164756E21
+//# debugId=673E2078AE4B8BC264756E2164756E21
 //# sourceMappingURL=index.js.map