@opentui/core 0.1.8 → 0.1.9

package/index.js

@@ -1646,9 +1646,9 @@ var src_default = Yoga;
 
 // src/lib/TrackedNode.ts
 import { EventEmitter } from "events";
-var idCounter = 0;
 
 class TrackedNode extends EventEmitter {
+  static idCounter = 0;
   id;
   yogaNode;
   metadata;
@@ -1659,7 +1659,7 @@ class TrackedNode extends EventEmitter {
   _height = "auto";
   constructor(yogaNode, metadata = {}) {
     super();
-    this.id = idCounter++;
+    this.id = TrackedNode.idCounter++;
     this.yogaNode = yogaNode;
     this.metadata = metadata;
     this.parent = null;
@@ -1991,6 +1991,16 @@ var parseKeypress = (s = "") => {
   return key;
 };
 
+// src/singleton.ts
+var singletonCacheSymbol = Symbol.for("@opentui/core/singleton");
+function singleton(key, factory) {
+  const bag = globalThis[singletonCacheSymbol] ??= {};
+  if (!(key in bag)) {
+    bag[key] = factory();
+  }
+  return bag[key];
+}
+
 // src/lib/KeyHandler.ts
 class KeyHandler extends EventEmitter2 {
   constructor() {
@@ -2012,7 +2022,7 @@ class KeyHandler extends EventEmitter2 {
 var keyHandler = null;
 function getKeyHandler() {
   if (!keyHandler) {
-    keyHandler = new KeyHandler;
+    keyHandler = singleton("KeyHandler", () => new KeyHandler);
   }
   return keyHandler;
 }
@@ -2248,7 +2258,6 @@ var RenderableEvents;
   RenderableEvents2["FOCUSED"] = "focused";
   RenderableEvents2["BLURRED"] = "blurred";
 })(RenderableEvents ||= {});
-var renderableNumber = 1;
 function validateOptions(id, options) {
   if (typeof options.width === "number") {
     if (options.width < 0) {
@@ -2319,6 +2328,7 @@ function isSizeType(value) {
 }
 
 class Renderable extends EventEmitter3 {
+  static renderableNumber = 1;
   static renderablesByNumber = new Map;
   id;
   num;
@@ -2350,11 +2360,10 @@ class Renderable extends EventEmitter3 {
   renderableArray = [];
   needsZIndexSort = false;
   parent = null;
-  _yogaPerformancePositionUpdated = false;
   constructor(id, options) {
     super();
     this.id = id;
-    this.num = renderableNumber++;
+    this.num = Renderable.renderableNumber++;
     Renderable.renderablesByNumber.set(this.num, this);
     validateOptions(id, options);
     this._width = options.width ?? "auto";
@@ -2397,7 +2406,7 @@ class Renderable extends EventEmitter3 {
     if (this._focused) {
       this.blur();
     }
-    this.requestLayout();
+    this.needsUpdate();
   }
   hasSelection() {
     return false;
@@ -2525,7 +2534,7 @@ class Renderable extends EventEmitter3 {
     if (isDimensionType(value)) {
       this._width = value;
       this.layoutNode.setWidth(value);
-      this.requestLayout();
+      this.needsUpdate();
     }
   }
   get height() {
@@ -2535,7 +2544,7 @@ class Renderable extends EventEmitter3 {
     if (isDimensionType(value)) {
       this._height = value;
       this.layoutNode.setHeight(value);
-      this.requestLayout();
+      this.needsUpdate();
     }
   }
   get zIndex() {
@@ -2662,7 +2671,6 @@ class Renderable extends EventEmitter3 {
     this._positionType = positionType;
     this.layoutNode.yogaNode.setPositionType(parsePositionType(positionType));
     this.needsUpdate();
-    this._yogaPerformancePositionUpdated = true;
   }
   setPosition(position) {
     this._position = { ...this._position, ...position };
@@ -2671,95 +2679,84 @@ class Renderable extends EventEmitter3 {
   updateYogaPosition(position) {
     const node = this.layoutNode.yogaNode;
     const { top, right, bottom, left } = position;
-    if (this._positionType === "relative") {
-      if (isPositionType(top)) {
-        if (top === "auto") {
-          node.setPositionAuto(Edge.Top);
-        } else {
-          node.setPosition(Edge.Top, top);
-        }
-      }
-      if (isPositionType(right)) {
-        if (right === "auto") {
-          node.setPositionAuto(Edge.Right);
-        } else {
-          node.setPosition(Edge.Right, right);
-        }
-      }
-      if (isPositionType(bottom)) {
-        if (bottom === "auto") {
-          node.setPositionAuto(Edge.Bottom);
-        } else {
-          node.setPosition(Edge.Bottom, bottom);
-        }
+    if (isPositionType(top)) {
+      if (top === "auto") {
+        node.setPositionAuto(Edge.Top);
+      } else {
+        node.setPosition(Edge.Top, top);
       }
-      if (isPositionType(left)) {
-        if (left === "auto") {
-          node.setPositionAuto(Edge.Left);
-        } else {
-          node.setPosition(Edge.Left, left);
-        }
+    }
+    if (isPositionType(right)) {
+      if (right === "auto") {
+        node.setPositionAuto(Edge.Right);
+      } else {
+        node.setPosition(Edge.Right, right);
       }
-      this.requestLayout();
-    } else {
-      if (typeof top === "number" && this._positionType === "absolute") {
-        this._y = top;
+    }
+    if (isPositionType(bottom)) {
+      if (bottom === "auto") {
+        node.setPositionAuto(Edge.Bottom);
+      } else {
+        node.setPosition(Edge.Bottom, bottom);
       }
-      if (typeof left === "number" && this._positionType === "absolute") {
-        this._x = left;
+    }
+    if (isPositionType(left)) {
+      if (left === "auto") {
+        node.setPositionAuto(Edge.Left);
+      } else {
+        node.setPosition(Edge.Left, left);
       }
-      this.needsUpdate();
-      this._yogaPerformancePositionUpdated = false;
     }
+    this.needsUpdate();
   }
   set flexGrow(grow) {
     this.layoutNode.yogaNode.setFlexGrow(grow);
-    this.requestLayout();
+    this.needsUpdate();
   }
   set flexShrink(shrink) {
     this.layoutNode.yogaNode.setFlexShrink(shrink);
-    this.requestLayout();
+    this.needsUpdate();
   }
   set flexDirection(direction) {
     this.layoutNode.yogaNode.setFlexDirection(parseFlexDirection(direction));
-    this.requestLayout();
+    this.needsUpdate();
   }
   set alignItems(alignItems) {
     this.layoutNode.yogaNode.setAlignItems(parseAlign(alignItems));
-    this.requestLayout();
+    this.needsUpdate();
   }
   set justifyContent(justifyContent) {
     this.layoutNode.yogaNode.setJustifyContent(parseJustify(justifyContent));
-    this.requestLayout();
+    this.needsUpdate();
   }
   set flexBasis(basis) {
     if (isFlexBasisType(basis)) {
       this.layoutNode.yogaNode.setFlexBasis(basis);
-      this.requestLayout();
+      this.needsUpdate();
     }
   }
   set minWidth(minWidth) {
     if (isSizeType(minWidth)) {
       this.layoutNode.yogaNode.setMinWidth(minWidth);
-      this.requestLayout();
+      this.needsUpdate();
     }
   }
   set maxWidth(maxWidth) {
     if (isSizeType(maxWidth)) {
       this.layoutNode.yogaNode.setMaxWidth(maxWidth);
-      this.requestLayout();
+      this.needsUpdate();
     }
   }
   set minHeight(minHeight) {
     if (isSizeType(minHeight)) {
       this.layoutNode.yogaNode.setMinHeight(minHeight);
-      this.requestLayout();
+      this.needsUpdate();
     }
   }
   set maxHeight(maxHeight) {
     if (isSizeType(maxHeight)) {
       this.layoutNode.yogaNode.setMaxHeight(maxHeight);
-      this.requestLayout();
+      this.needsUpdate();
     }
   }
   set margin(margin) {
@@ -2769,31 +2766,31 @@ class Renderable extends EventEmitter3 {
       node.setMargin(Edge.Right, margin);
       node.setMargin(Edge.Bottom, margin);
       node.setMargin(Edge.Left, margin);
-      this.requestLayout();
+      this.needsUpdate();
     }
   }
   set marginTop(margin) {
     if (isMarginType(margin)) {
       this.layoutNode.yogaNode.setMargin(Edge.Top, margin);
-      this.requestLayout();
+      this.needsUpdate();
     }
   }
   set marginRight(margin) {
     if (isMarginType(margin)) {
       this.layoutNode.yogaNode.setMargin(Edge.Right, margin);
-      this.requestLayout();
+      this.needsUpdate();
     }
   }
   set marginBottom(margin) {
     if (isMarginType(margin)) {
       this.layoutNode.yogaNode.setMargin(Edge.Bottom, margin);
-      this.requestLayout();
+      this.needsUpdate();
     }
   }
   set marginLeft(margin) {
     if (isMarginType(margin)) {
       this.layoutNode.yogaNode.setMargin(Edge.Left, margin);
-      this.requestLayout();
+      this.needsUpdate();
     }
   }
   set padding(padding) {
@@ -2803,31 +2800,31 @@ class Renderable extends EventEmitter3 {
       node.setPadding(Edge.Right, padding);
       node.setPadding(Edge.Bottom, padding);
       node.setPadding(Edge.Left, padding);
-      this.requestLayout();
+      this.needsUpdate();
     }
   }
   set paddingTop(padding) {
     if (isPaddingType(padding)) {
       this.layoutNode.yogaNode.setPadding(Edge.Top, padding);
-      this.requestLayout();
+      this.needsUpdate();
     }
   }
   set paddingRight(padding) {
     if (isPaddingType(padding)) {
       this.layoutNode.yogaNode.setPadding(Edge.Right, padding);
-      this.requestLayout();
+      this.needsUpdate();
     }
   }
   set paddingBottom(padding) {
     if (isPaddingType(padding)) {
       this.layoutNode.yogaNode.setPadding(Edge.Bottom, padding);
-      this.requestLayout();
+      this.needsUpdate();
     }
   }
   set paddingLeft(padding) {
     if (isPaddingType(padding)) {
       this.layoutNode.yogaNode.setPadding(Edge.Left, padding);
-      this.requestLayout();
+      this.needsUpdate();
     }
   }
   getLayoutNode() {
@@ -2835,10 +2832,8 @@ class Renderable extends EventEmitter3 {
   }
   updateFromLayout() {
     const layout = this.layoutNode.yogaNode.getComputedLayout();
-    if (this._positionType === "relative" || this._yogaPerformancePositionUpdated) {
-      this._x = layout.left;
-      this._y = layout.top;
-    }
+    this._x = layout.left;
+    this._y = layout.top;
     const newWidth = Math.max(layout.width, 1);
     const newHeight = Math.max(layout.height, 1);
     const sizeChanged = this.width !== newWidth || this.height !== newHeight;
@@ -2883,17 +2878,6 @@ class Renderable extends EventEmitter3 {
     }
   }
   onResize(width, height) {}
-  requestLayout() {
-    if (!this._yogaPerformancePositionUpdated) {
-      const layout = this.layoutNode.yogaNode.getComputedLayout();
-      if (layout.left !== this._x || layout.top !== this._y) {
-        this.layoutNode.yogaNode.setPosition(Edge.Left, this._x);
-        this.layoutNode.yogaNode.setPosition(Edge.Top, this._y);
-      }
-      this._yogaPerformancePositionUpdated = true;
-    }
-    this.needsUpdate();
-  }
   replaceParent(obj) {
     if (obj.parent) {
       obj.parent.remove(obj.id);
@@ -2923,7 +2907,7 @@ class Renderable extends EventEmitter3 {
     if (obj._liveCount > 0) {
       this.propagateLiveCount(obj._liveCount);
     }
-    this.requestLayout();
+    this.needsUpdate();
     this.emit("child:added", obj);
     return insertedIndex;
   }
@@ -2961,7 +2945,7 @@ class Renderable extends EventEmitter3 {
         }
         const childLayoutNode = obj.getLayoutNode();
         this.layoutNode.removeChild(childLayoutNode);
-        this.requestLayout();
+        this.needsUpdate();
         obj.parent = null;
         obj.propagateContext(null);
       }
@@ -3136,9 +3120,6 @@ class RootRenderable extends Renderable {
     this.layoutNode.yogaNode.setFlexDirection(FlexDirection.Column);
     this.calculateLayout();
   }
-  requestLayout() {
-    this.needsUpdate();
-  }
   propagateLiveCount(delta) {
     const oldCount = this._liveCount;
     this._liveCount += delta;
@@ -6480,7 +6461,10 @@ class FFIRenderLib {
 var opentuiLibPath;
 var opentuiLib;
 function setRenderLibPath(libPath) {
-  opentuiLibPath = libPath;
+  if (opentuiLibPath !== libPath) {
+    opentuiLibPath = libPath;
+    opentuiLib = undefined;
+  }
 }
 function resolveRenderLib() {
   if (!opentuiLib) {
@@ -6490,7 +6474,6 @@ function resolveRenderLib() {
 }
 
 // src/buffer.ts
-var fbIdCounter = 0;
 function isRGBAWithAlpha(color) {
   return color.a < 1;
 }
@@ -6542,6 +6525,7 @@ function blendColors(overlay, text) {
 }
 
 class OptimizedBuffer {
+  static fbIdCounter = 0;
   id;
   lib;
   bufferPtr;
@@ -6554,7 +6538,7 @@ class OptimizedBuffer {
     return this.bufferPtr;
   }
   constructor(lib, ptr, buffer, width, height, options) {
-    this.id = `fb_${fbIdCounter++}`;
+    this.id = `fb_${OptimizedBuffer.fbIdCounter++}`;
     this.lib = lib;
     this.respectAlpha = options.respectAlpha || false;
     this.width = width;
@@ -7900,6 +7884,7 @@ var ANSI = {
 
 // 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";
@@ -7970,21 +7955,24 @@ function getCallerInfo() {
   const columnNumber = parseInt(match[4], 10) || 0;
   return { functionName, fullPath, fileName, lineNumber, columnNumber };
 }
-var capture = new Capture;
-var mockStdout = new CapturedWritableStream("stdout", capture);
-var mockStderr = new CapturedWritableStream("stderr", capture);
-if (process.env.SKIP_CONSOLE_CACHE !== "true") {
-  global.console = new console.Console({
-    stdout: mockStdout,
-    stderr: mockStderr,
-    colorMode: true,
-    inspectOptions: {
-      compact: false,
-      breakLength: 80,
-      depth: 2
-    }
-  });
-}
+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 };
+});
 
 class TerminalConsoleCache extends EventEmitter5 {
   originalConsole;
@@ -8066,9 +8054,12 @@ class TerminalConsoleCache extends EventEmitter5 {
     this.deactivate();
   }
 }
-var terminalConsoleCache = new TerminalConsoleCache;
-process.on("exit", () => {
-  terminalConsoleCache.destroy();
+var terminalConsoleCache = singleton("TerminalConsoleCache", () => {
+  const terminalConsoleCache2 = new TerminalConsoleCache;
+  process.on("exit", () => {
+    terminalConsoleCache2.destroy();
+  });
+  return terminalConsoleCache2;
 });
 var ConsolePosition;
 ((ConsolePosition2) => {
@@ -8557,7 +8548,6 @@ class TerminalConsole extends EventEmitter5 {
 
 // src/renderer.ts
 import { EventEmitter as EventEmitter6 } from "events";
-
 class MouseEvent {
   type;
   button;
@@ -8593,9 +8583,11 @@ var MouseButton;
   MouseButton2[MouseButton2["WHEEL_UP"] = 4] = "WHEEL_UP";
   MouseButton2[MouseButton2["WHEEL_DOWN"] = 5] = "WHEEL_DOWN";
 })(MouseButton ||= {});
-["SIGINT", "SIGTERM", "SIGQUIT", "SIGABRT"].forEach((signal) => {
-  process.on(signal, () => {
-    process.exit();
+singleton("ProcessExitSignals", () => {
+  ["SIGINT", "SIGTERM", "SIGQUIT", "SIGABRT"].forEach((signal) => {
+    process.on(signal, () => {
+      process.exit();
+    });
   });
 });
 async function createCliRenderer(config = {}) {
@@ -8625,9 +8617,8 @@ var CliRenderEvents;
 ((CliRenderEvents2) => {
   CliRenderEvents2["DEBUG_OVERLAY_TOGGLE"] = "debugOverlay:toggle";
 })(CliRenderEvents ||= {});
-var animationFrameId = 0;
-
 class CliRenderer extends EventEmitter6 {
+  static animationFrameId = 0;
   lib;
   rendererPtr;
   stdin;
@@ -8815,7 +8806,7 @@ Error details:
     this._console = new TerminalConsole(this, config.consoleOptions);
     this.useConsole = config.useConsole ?? true;
     global.requestAnimationFrame = (callback) => {
-      const id = animationFrameId++;
+      const id = CliRenderer.animationFrameId++;
       this.animationRequest.set(id, callback);
       return id;
     };
@@ -9320,6 +9311,7 @@ Error details:
     }
   }
   destroy() {
+    this.stdin.setRawMode(false);
     if (this.isDestroyed)
       return;
     this.isDestroyed = true;
@@ -9330,8 +9322,8 @@ Error details:
       this.sigwinchHandler = null;
     }
     this._console.deactivate();
-    this.lib.destroyRenderer(this.rendererPtr, this._useAlternateScreen, this._splitHeight);
     this.disableStdoutInterception();
+    this.lib.destroyRenderer(this.rendererPtr, this._useAlternateScreen, this._splitHeight);
   }
   startRenderLoop() {
     if (!this._isRunning)
@@ -9364,7 +9356,7 @@ Error details:
     this.renderStats.frameCount++;
     this.renderStats.fps = this.currentFps;
     const overallStart = performance.now();
-    const frameRequests = this.animationRequest.values();
+    const frameRequests = Array.from(this.animationRequest.values());
     this.animationRequest.clear();
     const animationRequestStart = performance.now();
     frameRequests.forEach((callback) => callback(deltaTime));
@@ -9558,7 +9550,8 @@ class BoxRenderable extends Renderable {
   _borderStyle;
   _borderColor;
   _focusedBorderColor;
-  customBorderChars;
+  _customBorderCharsObj;
+  _customBorderChars;
   borderSides;
   shouldFill;
   _title;
@@ -9570,13 +9563,22 @@ class BoxRenderable extends Renderable {
     this._borderStyle = options.borderStyle || "single";
     this._borderColor = parseColor(options.borderColor || "#FFFFFF");
     this._focusedBorderColor = parseColor(options.focusedBorderColor || "#00AAFF");
-    this.customBorderChars = options.customBorderChars ? borderCharsToArray(options.customBorderChars) : undefined;
+    this._customBorderCharsObj = options.customBorderChars;
+    this._customBorderChars = this._customBorderCharsObj ? borderCharsToArray(this._customBorderCharsObj) : undefined;
     this.borderSides = getBorderSides(this._border);
     this.shouldFill = options.shouldFill ?? true;
     this._title = options.title;
     this._titleAlignment = options.titleAlignment || "left";
     this.applyYogaBorders();
   }
+  get customBorderChars() {
+    return this._customBorderCharsObj;
+  }
+  set customBorderChars(value) {
+    this._customBorderCharsObj = value;
+    this._customBorderChars = value ? borderCharsToArray(value) : undefined;
+    this.needsUpdate();
+  }
   get backgroundColor() {
     return this._backgroundColor;
   }
@@ -9606,7 +9608,7 @@ class BoxRenderable extends Renderable {
   set borderStyle(value) {
     if (this._borderStyle !== value) {
       this._borderStyle = value;
-      this.customBorderChars = undefined;
+      this._customBorderChars = undefined;
       this.needsUpdate();
     }
   }
@@ -9658,7 +9660,7 @@ class BoxRenderable extends Renderable {
       width: this.width,
       height: this.height,
       borderStyle: this._borderStyle,
-      customBorderChars: this.customBorderChars,
+      customBorderChars: this._customBorderChars,
       border: this._border,
       borderColor: currentBorderColor,
       backgroundColor: this._backgroundColor,
@@ -9673,7 +9675,7 @@ class BoxRenderable extends Renderable {
     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.requestLayout();
+    this.needsUpdate();
   }
 }
 // src/renderables/FrameBuffer.ts
@@ -10241,6 +10243,14 @@ class InputRenderable extends Renderable {
     this._cursorColor = parseColor(color);
     this.needsUpdate();
   }
+  updateFromLayout() {
+    super.updateFromLayout();
+    this.updateCursorPosition();
+  }
+  onResize(width, height) {
+    super.onResize(width, height);
+    this.updateCursorPosition();
+  }
   destroySelf() {
     if (this._focused) {
       CliRenderer.setCursorPosition(0, 0, false);
@@ -10554,42 +10564,42 @@ function calculateDynamicHeight(showUnderline, showDescription) {
 
 class TabSelectRenderable extends Renderable {
   focusable = true;
-  options = [];
+  _options = [];
   selectedIndex = 0;
   scrollOffset = 0;
-  tabWidth;
+  _tabWidth;
   maxVisibleTabs;
-  backgroundColor;
-  textColor;
-  focusedBackgroundColor;
-  focusedTextColor;
-  selectedBackgroundColor;
-  selectedTextColor;
-  selectedDescriptionColor;
-  showScrollArrows;
-  showDescription;
-  showUnderline;
-  wrapSelection;
+  _backgroundColor;
+  _textColor;
+  _focusedBackgroundColor;
+  _focusedTextColor;
+  _selectedBackgroundColor;
+  _selectedTextColor;
+  _selectedDescriptionColor;
+  _showScrollArrows;
+  _showDescription;
+  _showUnderline;
+  _wrapSelection;
   constructor(id, options) {
     const calculatedHeight = calculateDynamicHeight(options.showUnderline ?? true, options.showDescription ?? true);
     super(id, { ...options, height: calculatedHeight, buffered: true });
-    this.backgroundColor = parseColor(options.backgroundColor || "transparent");
-    this.textColor = parseColor(options.textColor || "#FFFFFF");
-    this.focusedBackgroundColor = parseColor(options.focusedBackgroundColor || options.backgroundColor || "#1a1a1a");
-    this.focusedTextColor = parseColor(options.focusedTextColor || options.textColor || "#FFFFFF");
-    this.options = options.options || [];
-    this.tabWidth = options.tabWidth || 20;
-    this.showDescription = options.showDescription ?? true;
-    this.showUnderline = options.showUnderline ?? true;
-    this.showScrollArrows = options.showScrollArrows ?? true;
-    this.wrapSelection = options.wrapSelection ?? false;
-    this.maxVisibleTabs = Math.max(1, Math.floor(this.width / this.tabWidth));
-    this.selectedBackgroundColor = parseColor(options.selectedBackgroundColor || "#334455");
-    this.selectedTextColor = parseColor(options.selectedTextColor || "#FFFF00");
-    this.selectedDescriptionColor = parseColor(options.selectedDescriptionColor || "#CCCCCC");
+    this._backgroundColor = parseColor(options.backgroundColor || "transparent");
+    this._textColor = parseColor(options.textColor || "#FFFFFF");
+    this._focusedBackgroundColor = parseColor(options.focusedBackgroundColor || options.backgroundColor || "#1a1a1a");
+    this._focusedTextColor = parseColor(options.focusedTextColor || options.textColor || "#FFFFFF");
+    this._options = options.options || [];
+    this._tabWidth = options.tabWidth || 20;
+    this._showDescription = options.showDescription ?? true;
+    this._showUnderline = options.showUnderline ?? true;
+    this._showScrollArrows = options.showScrollArrows ?? true;
+    this._wrapSelection = options.wrapSelection ?? false;
+    this.maxVisibleTabs = Math.max(1, Math.floor(this.width / this._tabWidth));
+    this._selectedBackgroundColor = parseColor(options.selectedBackgroundColor || "#334455");
+    this._selectedTextColor = parseColor(options.selectedTextColor || "#FFFF00");
+    this._selectedDescriptionColor = parseColor(options.selectedDescriptionColor || "#CCCCCC");
   }
   calculateDynamicHeight() {
-    return calculateDynamicHeight(this.showUnderline, this.showDescription);
+    return calculateDynamicHeight(this._showUnderline, this._showDescription);
   }
   renderSelf(buffer, deltaTime) {
     if (!this.visible || !this.frameBuffer)
@@ -10599,46 +10609,46 @@ class TabSelectRenderable extends Renderable {
     }
   }
   refreshFrameBuffer() {
-    if (!this.frameBuffer || this.options.length === 0)
+    if (!this.frameBuffer || this._options.length === 0)
       return;
-    const bgColor = this._focused ? this.focusedBackgroundColor : this.backgroundColor;
+    const bgColor = this._focused ? this._focusedBackgroundColor : this._backgroundColor;
     this.frameBuffer.clear(bgColor);
     const contentX = 0;
     const contentY = 0;
     const contentWidth = this.width;
     const contentHeight = this.height;
-    const visibleOptions = this.options.slice(this.scrollOffset, this.scrollOffset + this.maxVisibleTabs);
+    const visibleOptions = this._options.slice(this.scrollOffset, this.scrollOffset + this.maxVisibleTabs);
     for (let i = 0;i < visibleOptions.length; i++) {
       const actualIndex = this.scrollOffset + i;
       const option = visibleOptions[i];
       const isSelected = actualIndex === this.selectedIndex;
-      const tabX = contentX + i * this.tabWidth;
+      const tabX = contentX + i * this._tabWidth;
       if (tabX >= contentX + contentWidth)
         break;
-      const actualTabWidth = Math.min(this.tabWidth, contentWidth - i * this.tabWidth);
+      const actualTabWidth = Math.min(this._tabWidth, contentWidth - i * this._tabWidth);
       if (isSelected) {
-        this.frameBuffer.fillRect(tabX, contentY, actualTabWidth, 1, this.selectedBackgroundColor);
+        this.frameBuffer.fillRect(tabX, contentY, actualTabWidth, 1, this._selectedBackgroundColor);
       }
-      const baseTextColor = this._focused ? this.focusedTextColor : this.textColor;
-      const nameColor = isSelected ? this.selectedTextColor : baseTextColor;
+      const baseTextColor = this._focused ? this._focusedTextColor : this._textColor;
+      const nameColor = isSelected ? this._selectedTextColor : baseTextColor;
       const nameContent = this.truncateText(option.name, actualTabWidth - 2);
       this.frameBuffer.drawText(nameContent, tabX + 1, contentY, nameColor);
-      if (isSelected && this.showUnderline && contentHeight >= 2) {
+      if (isSelected && this._showUnderline && contentHeight >= 2) {
         const underlineY = contentY + 1;
-        const underlineBg = isSelected ? this.selectedBackgroundColor : bgColor;
+        const underlineBg = isSelected ? this._selectedBackgroundColor : bgColor;
         this.frameBuffer.drawText("\u25AC".repeat(actualTabWidth), tabX, underlineY, nameColor, underlineBg);
       }
     }
-    if (this.showDescription && contentHeight >= (this.showUnderline ? 3 : 2)) {
+    if (this._showDescription && contentHeight >= (this._showUnderline ? 3 : 2)) {
       const selectedOption = this.getSelectedOption();
       if (selectedOption) {
-        const descriptionY = contentY + (this.showUnderline ? 2 : 1);
-        const descColor = this.selectedDescriptionColor;
+        const descriptionY = contentY + (this._showUnderline ? 2 : 1);
+        const descColor = this._selectedDescriptionColor;
         const descContent = this.truncateText(selectedOption.description, contentWidth - 2);
         this.frameBuffer.drawText(descContent, contentX + 1, descriptionY, descColor);
       }
     }
-    if (this.showScrollArrows && this.options.length > this.maxVisibleTabs) {
+    if (this._showScrollArrows && this._options.length > this.maxVisibleTabs) {
       this.renderScrollArrowsToFrameBuffer(contentX, contentY, contentWidth, contentHeight);
     }
   }
@@ -10651,7 +10661,7 @@ class TabSelectRenderable extends Renderable {
     if (!this.frameBuffer)
       return;
     const hasMoreLeft = this.scrollOffset > 0;
-    const hasMoreRight = this.scrollOffset + this.maxVisibleTabs < this.options.length;
+    const hasMoreRight = this.scrollOffset + this.maxVisibleTabs < this._options.length;
     if (hasMoreLeft) {
       this.frameBuffer.drawText("\u2039", contentX, contentY, parseColor("#AAAAAA"));
     }
@@ -10660,13 +10670,13 @@ class TabSelectRenderable extends Renderable {
     }
   }
   setOptions(options) {
-    this.options = options;
+    this._options = options;
     this.selectedIndex = Math.min(this.selectedIndex, Math.max(0, options.length - 1));
     this.updateScrollOffset();
     this.needsUpdate();
   }
   getSelectedOption() {
-    return this.options[this.selectedIndex] || null;
+    return this._options[this.selectedIndex] || null;
   }
   getSelectedIndex() {
     return this.selectedIndex;
@@ -10674,8 +10684,8 @@ class TabSelectRenderable extends Renderable {
   moveLeft() {
     if (this.selectedIndex > 0) {
       this.selectedIndex--;
-    } else if (this.wrapSelection && this.options.length > 0) {
-      this.selectedIndex = this.options.length - 1;
+    } else if (this._wrapSelection && this._options.length > 0) {
+      this.selectedIndex = this._options.length - 1;
     } else {
       return;
     }
@@ -10684,9 +10694,9 @@ class TabSelectRenderable extends Renderable {
     this.emit("selectionChanged" /* SELECTION_CHANGED */, this.selectedIndex, this.getSelectedOption());
   }
   moveRight() {
-    if (this.selectedIndex < this.options.length - 1) {
+    if (this.selectedIndex < this._options.length - 1) {
       this.selectedIndex++;
-    } else if (this.wrapSelection && this.options.length > 0) {
+    } else if (this._wrapSelection && this._options.length > 0) {
       this.selectedIndex = 0;
     } else {
       return;
@@ -10702,7 +10712,7 @@ class TabSelectRenderable extends Renderable {
     }
   }
   setSelectedIndex(index) {
-    if (index >= 0 && index < this.options.length) {
+    if (index >= 0 && index < this._options.length) {
       this.selectedIndex = index;
       this.updateScrollOffset();
       this.needsUpdate();
@@ -10711,27 +10721,27 @@ class TabSelectRenderable extends Renderable {
   }
   updateScrollOffset() {
     const halfVisible = Math.floor(this.maxVisibleTabs / 2);
-    const newScrollOffset = Math.max(0, Math.min(this.selectedIndex - halfVisible, this.options.length - this.maxVisibleTabs));
+    const newScrollOffset = Math.max(0, Math.min(this.selectedIndex - halfVisible, this._options.length - this.maxVisibleTabs));
     if (newScrollOffset !== this.scrollOffset) {
       this.scrollOffset = newScrollOffset;
       this.needsUpdate();
     }
   }
   onResize(width, height) {
-    this.maxVisibleTabs = Math.max(1, Math.floor(width / this.tabWidth));
+    this.maxVisibleTabs = Math.max(1, Math.floor(width / this._tabWidth));
     this.updateScrollOffset();
     this.needsUpdate();
   }
   setTabWidth(tabWidth) {
-    if (this.tabWidth === tabWidth)
+    if (this._tabWidth === tabWidth)
       return;
-    this.tabWidth = tabWidth;
-    this.maxVisibleTabs = Math.max(1, Math.floor(this.width / this.tabWidth));
+    this._tabWidth = tabWidth;
+    this.maxVisibleTabs = Math.max(1, Math.floor(this.width / this._tabWidth));
     this.updateScrollOffset();
     this.needsUpdate();
   }
   getTabWidth() {
-    return this.tabWidth;
+    return this._tabWidth;
   }
   handleKeyPress(key) {
     const keyName2 = typeof key === "string" ? key : key.name;
@@ -10751,40 +10761,90 @@ class TabSelectRenderable extends Renderable {
     }
     return false;
   }
-  setShowDescription(show) {
-    if (this.showDescription !== show) {
-      this.showDescription = show;
+  get options() {
+    return this._options;
+  }
+  set options(options) {
+    this._options = options;
+    this.selectedIndex = Math.min(this.selectedIndex, Math.max(0, options.length - 1));
+    this.updateScrollOffset();
+    this.needsUpdate();
+  }
+  set backgroundColor(color) {
+    this._backgroundColor = parseColor(color);
+    this.needsUpdate();
+  }
+  set textColor(color) {
+    this._textColor = parseColor(color);
+    this.needsUpdate();
+  }
+  set focusedBackgroundColor(color) {
+    this._focusedBackgroundColor = parseColor(color);
+    this.needsUpdate();
+  }
+  set focusedTextColor(color) {
+    this._focusedTextColor = parseColor(color);
+    this.needsUpdate();
+  }
+  set selectedBackgroundColor(color) {
+    this._selectedBackgroundColor = parseColor(color);
+    this.needsUpdate();
+  }
+  set selectedTextColor(color) {
+    this._selectedTextColor = parseColor(color);
+    this.needsUpdate();
+  }
+  set selectedDescriptionColor(color) {
+    this._selectedDescriptionColor = parseColor(color);
+    this.needsUpdate();
+  }
+  get showDescription() {
+    return this._showDescription;
+  }
+  set showDescription(show) {
+    if (this._showDescription !== show) {
+      this._showDescription = show;
       const newHeight = this.calculateDynamicHeight();
       this.height = newHeight;
+      this.needsUpdate();
     }
   }
-  getShowDescription() {
-    return this.showDescription;
+  get showUnderline() {
+    return this._showUnderline;
   }
-  setShowUnderline(show) {
-    if (this.showUnderline !== show) {
-      this.showUnderline = show;
+  set showUnderline(show) {
+    if (this._showUnderline !== show) {
+      this._showUnderline = show;
       const newHeight = this.calculateDynamicHeight();
       this.height = newHeight;
+      this.needsUpdate();
     }
   }
-  getShowUnderline() {
-    return this.showUnderline;
+  get showScrollArrows() {
+    return this._showScrollArrows;
   }
-  setShowScrollArrows(show) {
-    if (this.showScrollArrows !== show) {
-      this.showScrollArrows = show;
+  set showScrollArrows(show) {
+    if (this._showScrollArrows !== show) {
+      this._showScrollArrows = show;
       this.needsUpdate();
     }
   }
-  getShowScrollArrows() {
-    return this.showScrollArrows;
+  get wrapSelection() {
+    return this._wrapSelection;
+  }
+  set wrapSelection(wrap) {
+    this._wrapSelection = wrap;
   }
-  setWrapSelection(wrap) {
-    this.wrapSelection = wrap;
+  get tabWidth() {
+    return this._tabWidth;
   }
-  getWrapSelection() {
-    return this.wrapSelection;
+  set tabWidth(tabWidth) {
+    if (this._tabWidth === tabWidth)
+      return;
+    this._tabWidth = tabWidth;
+    this.maxVisibleTabs = Math.max(1, Math.floor(this.width / this._tabWidth));
+    this.updateScrollOffset();
+    this.needsUpdate();
   }
 }
 export {
@@ -10921,5 +10981,5 @@ export {
   ASCIIFontRenderable
 };
 export { __toESM, __commonJS, __export, __require };
-//# debugId=D2D08A0277CDE28864756E2164756E21
+//# debugId=173A228A48201A5364756E2164756E21
 //# sourceMappingURL=index.js.map