@opentui/core 0.1.1 → 0.1.3

package/index.js

@@ -2,7 +2,7 @@
 // src/Renderable.ts
 import { EventEmitter as EventEmitter3 } from "events";
 
-// node_modules/yoga-layout/dist/binaries/yoga-wasm-base64-esm.js
+// ../../node_modules/yoga-layout/dist/binaries/yoga-wasm-base64-esm.js
 var loadYoga = (() => {
   var _scriptDir = import.meta.url;
   return function(loadYoga2) {
@@ -1307,7 +1307,7 @@ var loadYoga = (() => {
 })();
 var yoga_wasm_base64_esm_default = loadYoga;
 
-// node_modules/yoga-layout/dist/src/generated/YGEnums.js
+// ../../node_modules/yoga-layout/dist/src/generated/YGEnums.js
 var Align = /* @__PURE__ */ function(Align2) {
   Align2[Align2["Auto"] = 0] = "Auto";
   Align2[Align2["FlexStart"] = 1] = "FlexStart";
@@ -1510,7 +1510,7 @@ var constants = {
 };
 var YGEnums_default = constants;
 
-// node_modules/yoga-layout/dist/src/wrapAssembly.js
+// ../../node_modules/yoga-layout/dist/src/wrapAssembly.js
 function wrapAssembly(lib) {
   function patch(prototype, name, fn) {
     const original = prototype[name];
@@ -1612,7 +1612,7 @@ function wrapAssembly(lib) {
   };
 }
 
-// node_modules/yoga-layout/dist/src/index.js
+// ../../node_modules/yoga-layout/dist/src/index.js
 var Yoga = wrapAssembly(await yoga_wasm_base64_esm_default());
 var src_default = Yoga;
 
@@ -1626,7 +1626,6 @@ class TrackedNode extends EventEmitter {
   metadata;
   parent;
   children;
-  zIndex;
   _destroyed = false;
   _width = "auto";
   _height = "auto";
@@ -1637,7 +1636,6 @@ class TrackedNode extends EventEmitter {
     this.metadata = metadata;
     this.parent = null;
     this.children = [];
-    this.zIndex = 0;
   }
   parseWidth(width) {
     if (this._destroyed) {
@@ -1694,9 +1692,6 @@ class TrackedNode extends EventEmitter {
     childNode.parent = this;
     const index = this.children.length;
     this.children.push(childNode);
-    if (!childNode.zIndex) {
-      childNode.zIndex = this.zIndex + 100;
-    }
     this.yogaNode.insertChild(childNode.yogaNode, index);
     try {
       childNode.yogaNode.setWidth(childNode.parseWidth(childNode._width));
@@ -1749,7 +1744,6 @@ class TrackedNode extends EventEmitter {
       childNode.parent.removeChild(childNode);
     }
     childNode.parent = this;
-    childNode.zIndex = this.zIndex + 100;
     const boundedIndex = Math.max(0, Math.min(index, this.children.length));
     this.children.splice(boundedIndex, 0, childNode);
     this.yogaNode.insertChild(childNode.yogaNode, boundedIndex);
@@ -1995,6 +1989,64 @@ function getKeyHandler() {
   return keyHandler;
 }
 
+// src/lib/yoga.options.ts
+function parseAlign(value) {
+  switch (value.toLowerCase()) {
+    case "auto":
+      return Align.Auto;
+    case "flex-start":
+      return Align.FlexStart;
+    case "center":
+      return Align.Center;
+    case "flex-end":
+      return Align.FlexEnd;
+    case "stretch":
+      return Align.Stretch;
+    case "baseline":
+      return Align.Baseline;
+    case "space-between":
+      return Align.SpaceBetween;
+    case "space-around":
+      return Align.SpaceAround;
+    case "space-evenly":
+      return Align.SpaceEvenly;
+    default:
+      return Align.Auto;
+  }
+}
+function parseFlexDirection(value) {
+  switch (value.toLowerCase()) {
+    case "column":
+      return FlexDirection.Column;
+    case "column-reverse":
+      return FlexDirection.ColumnReverse;
+    case "row":
+      return FlexDirection.Row;
+    case "row-reverse":
+      return FlexDirection.RowReverse;
+    default:
+      return FlexDirection.Column;
+  }
+}
+function parseJustify(value) {
+  switch (value.toLowerCase()) {
+    case "flex-start":
+      return Justify.FlexStart;
+    case "center":
+      return Justify.Center;
+    case "flex-end":
+      return Justify.FlexEnd;
+    case "space-between":
+      return Justify.SpaceBetween;
+    case "space-around":
+      return Justify.SpaceAround;
+    case "space-evenly":
+      return Justify.SpaceEvenly;
+    default:
+      return Justify.FlexStart;
+  }
+}
+
 // src/Renderable.ts
 var LayoutEvents;
 ((LayoutEvents2) => {
@@ -2021,6 +2073,59 @@ function validateOptions(id, options) {
     }
   }
 }
+function isValidPercentage(value) {
+  if (typeof value === "string" && value.endsWith("%")) {
+    const numPart = value.slice(0, -1);
+    const num = parseFloat(numPart);
+    return !Number.isNaN(num);
+  }
+  return false;
+}
+function isMarginType(value) {
+  if (typeof value === "number" && !Number.isNaN(value)) {
+    return true;
+  }
+  if (value === "auto") {
+    return true;
+  }
+  return isValidPercentage(value);
+}
+function isPaddingType(value) {
+  if (typeof value === "number" && !Number.isNaN(value)) {
+    return true;
+  }
+  return isValidPercentage(value);
+}
+function isPositionType(value) {
+  if (typeof value === "number" && !Number.isNaN(value)) {
+    return true;
+  }
+  if (value === "auto") {
+    return true;
+  }
+  return isValidPercentage(value);
+}
+function isDimensionType(value) {
+  return isPositionType(value);
+}
+function isFlexBasisType(value) {
+  if (value === undefined || value === "auto") {
+    return true;
+  }
+  if (typeof value === "number" && !Number.isNaN(value)) {
+    return true;
+  }
+  return false;
+}
+function isSizeType(value) {
+  if (value === undefined) {
+    return true;
+  }
+  if (typeof value === "number" && !Number.isNaN(value)) {
+    return true;
+  }
+  return isValidPercentage(value);
+}
 
 class Renderable extends EventEmitter3 {
   static renderablesByNumber = new Map;
@@ -2142,19 +2247,39 @@ class Renderable extends EventEmitter3 {
     return this._x;
   }
   set x(value) {
-    this.setPosition({
-      left: value
-    });
+    this.left = value;
+  }
+  get top() {
+    return this._position.top;
   }
   set top(value) {
-    this.setPosition({
-      top: value
-    });
+    if (isPositionType(value) || value === undefined) {
+      this.setPosition({ top: value });
+    }
+  }
+  get right() {
+    return this._position.right;
+  }
+  set right(value) {
+    if (isPositionType(value) || value === undefined) {
+      this.setPosition({ right: value });
+    }
+  }
+  get bottom() {
+    return this._position.bottom;
+  }
+  set bottom(value) {
+    if (isPositionType(value) || value === undefined) {
+      this.setPosition({ bottom: value });
+    }
+  }
+  get left() {
+    return this._position.left;
   }
   set left(value) {
-    this.setPosition({
-      left: value
-    });
+    if (isPositionType(value) || value === undefined) {
+      this.setPosition({ left: value });
+    }
   }
   get y() {
     if (this.parent && this._positionType === "relative") {
@@ -2163,25 +2288,27 @@ class Renderable extends EventEmitter3 {
     return this._y;
   }
   set y(value) {
-    this.setPosition({
-      top: value
-    });
+    this.top = value;
   }
   get width() {
     return this._widthValue;
   }
   set width(value) {
-    this._width = value;
-    this.layoutNode.setWidth(value);
-    this.requestLayout();
+    if (isDimensionType(value)) {
+      this._width = value;
+      this.layoutNode.setWidth(value);
+      this.requestLayout();
+    }
   }
   get height() {
     return this._heightValue;
   }
   set height(value) {
-    this._height = value;
-    this.layoutNode.setHeight(value);
-    this.requestLayout();
+    if (isDimensionType(value)) {
+      this._height = value;
+      this.layoutNode.setHeight(value);
+      this.requestLayout();
+    }
   }
   get zIndex() {
     return this._zIndex;
@@ -2203,13 +2330,13 @@ class Renderable extends EventEmitter3 {
   }
   setupYogaProperties(options) {
     const node = this.layoutNode.yogaNode;
-    if (options.flexBasis !== undefined) {
+    if (isFlexBasisType(options.flexBasis)) {
       node.setFlexBasis(options.flexBasis);
     }
-    if (options.minWidth !== undefined) {
+    if (isSizeType(options.minWidth)) {
       node.setMinWidth(options.minWidth);
     }
-    if (options.minHeight !== undefined) {
+    if (isSizeType(options.minHeight)) {
       node.setMinHeight(options.minHeight);
     }
     if (options.flexGrow !== undefined) {
@@ -2224,19 +2351,19 @@ class Renderable extends EventEmitter3 {
       node.setFlexShrink(shrinkValue);
     }
     if (options.flexDirection !== undefined) {
-      node.setFlexDirection(options.flexDirection);
+      node.setFlexDirection(parseFlexDirection(options.flexDirection));
     }
     if (options.alignItems !== undefined) {
-      node.setAlignItems(options.alignItems);
+      node.setAlignItems(parseAlign(options.alignItems));
     }
     if (options.justifyContent !== undefined) {
-      node.setJustifyContent(options.justifyContent);
+      node.setJustifyContent(parseJustify(options.justifyContent));
     }
-    if (options.width !== undefined) {
+    if (isDimensionType(options.width)) {
       this._width = options.width;
       this.layoutNode.setWidth(options.width);
     }
-    if (options.height !== undefined) {
+    if (isDimensionType(options.height)) {
       this._height = options.height;
       this.layoutNode.setHeight(options.height);
     }
@@ -2244,79 +2371,93 @@ class Renderable extends EventEmitter3 {
     if (this._positionType === "absolute") {
       node.setPositionType(PositionType.Absolute);
     }
-    if (options.position) {
-      this._position = options.position;
-      this.updateYogaPosition(options.position);
+    const hasPositionProps = options.top !== undefined || options.right !== undefined || options.bottom !== undefined || options.left !== undefined;
+    if (hasPositionProps) {
+      this._position = {
+        top: options.top,
+        right: options.right,
+        bottom: options.bottom,
+        left: options.left
+      };
+      this.updateYogaPosition(this._position);
     }
-    if (options.maxWidth !== undefined) {
+    if (isSizeType(options.maxWidth)) {
       node.setMaxWidth(options.maxWidth);
     }
-    if (options.maxHeight !== undefined) {
+    if (isSizeType(options.maxHeight)) {
       node.setMaxHeight(options.maxHeight);
     }
-    if (typeof options.margin === "object") {
-      const { top, right, bottom, left } = options.margin;
-      if (top !== undefined)
-        node.setMargin(Edge.Top, top);
-      if (right !== undefined)
-        node.setMargin(Edge.Right, right);
-      if (bottom !== undefined)
-        node.setMargin(Edge.Bottom, bottom);
-      if (left !== undefined)
-        node.setMargin(Edge.Left, left);
-    } else if (options.margin !== undefined) {
+    this.setupMarginAndPadding(options);
+  }
+  setupMarginAndPadding(options) {
+    const node = this.layoutNode.yogaNode;
+    if (isMarginType(options.margin)) {
       node.setMargin(Edge.Top, options.margin);
       node.setMargin(Edge.Right, options.margin);
       node.setMargin(Edge.Bottom, options.margin);
       node.setMargin(Edge.Left, options.margin);
     }
-    if (typeof options.padding === "object") {
-      const { top, right, bottom, left } = options.padding;
-      if (top !== undefined)
-        node.setPadding(Edge.Top, top);
-      if (right !== undefined)
-        node.setPadding(Edge.Right, right);
-      if (bottom !== undefined)
-        node.setPadding(Edge.Bottom, bottom);
-      if (left !== undefined)
-        node.setPadding(Edge.Left, left);
-    } else if (options.padding !== undefined) {
+    if (isMarginType(options.marginTop)) {
+      node.setMargin(Edge.Top, options.marginTop);
+    }
+    if (isMarginType(options.marginRight)) {
+      node.setMargin(Edge.Right, options.marginRight);
+    }
+    if (isMarginType(options.marginBottom)) {
+      node.setMargin(Edge.Bottom, options.marginBottom);
+    }
+    if (isMarginType(options.marginLeft)) {
+      node.setMargin(Edge.Left, options.marginLeft);
+    }
+    if (isPaddingType(options.padding)) {
       node.setPadding(Edge.Top, options.padding);
       node.setPadding(Edge.Right, options.padding);
       node.setPadding(Edge.Bottom, options.padding);
       node.setPadding(Edge.Left, options.padding);
     }
+    if (isPaddingType(options.paddingTop)) {
+      node.setPadding(Edge.Top, options.paddingTop);
+    }
+    if (isPaddingType(options.paddingRight)) {
+      node.setPadding(Edge.Right, options.paddingRight);
+    }
+    if (isPaddingType(options.paddingBottom)) {
+      node.setPadding(Edge.Bottom, options.paddingBottom);
+    }
+    if (isPaddingType(options.paddingLeft)) {
+      node.setPadding(Edge.Left, options.paddingLeft);
+    }
   }
   setPosition(position) {
-    this._position = position;
+    this._position = { ...this._position, ...position };
     this.updateYogaPosition(position);
   }
   updateYogaPosition(position) {
     const node = this.layoutNode.yogaNode;
     const { top, right, bottom, left } = position;
     if (this._positionType === "relative") {
-      if (top !== undefined) {
+      if (isPositionType(top)) {
         if (top === "auto") {
           node.setPositionAuto(Edge.Top);
         } else {
           node.setPosition(Edge.Top, top);
         }
       }
-      if (right !== undefined) {
+      if (isPositionType(right)) {
         if (right === "auto") {
           node.setPositionAuto(Edge.Right);
         } else {
           node.setPosition(Edge.Right, right);
         }
       }
-      if (bottom !== undefined) {
+      if (isPositionType(bottom)) {
         if (bottom === "auto") {
           node.setPositionAuto(Edge.Bottom);
         } else {
           node.setPosition(Edge.Bottom, bottom);
         }
       }
-      if (left !== undefined) {
+      if (isPositionType(left)) {
         if (left === "auto") {
           node.setPositionAuto(Edge.Left);
         } else {
@@ -2344,36 +2485,114 @@ class Renderable extends EventEmitter3 {
     this.requestLayout();
   }
   set flexDirection(direction) {
-    this.layoutNode.yogaNode.setFlexDirection(direction);
+    this.layoutNode.yogaNode.setFlexDirection(parseFlexDirection(direction));
     this.requestLayout();
   }
   set alignItems(alignItems) {
-    this.layoutNode.yogaNode.setAlignItems(alignItems);
+    this.layoutNode.yogaNode.setAlignItems(parseAlign(alignItems));
     this.requestLayout();
   }
   set justifyContent(justifyContent) {
-    this.layoutNode.yogaNode.setJustifyContent(justifyContent);
+    this.layoutNode.yogaNode.setJustifyContent(parseJustify(justifyContent));
     this.requestLayout();
   }
   set flexBasis(basis) {
-    this.layoutNode.yogaNode.setFlexBasis(basis);
-    this.requestLayout();
+    if (isFlexBasisType(basis)) {
+      this.layoutNode.yogaNode.setFlexBasis(basis);
+      this.requestLayout();
+    }
   }
   set minWidth(minWidth) {
-    this.layoutNode.yogaNode.setMinWidth(minWidth);
-    this.requestLayout();
+    if (isSizeType(minWidth)) {
+      this.layoutNode.yogaNode.setMinWidth(minWidth);
+      this.requestLayout();
+    }
   }
   set maxWidth(maxWidth) {
-    this.layoutNode.yogaNode.setMaxWidth(maxWidth);
-    this.requestLayout();
+    if (isSizeType(maxWidth)) {
+      this.layoutNode.yogaNode.setMaxWidth(maxWidth);
+      this.requestLayout();
+    }
   }
   set minHeight(minHeight) {
-    this.layoutNode.yogaNode.setMinHeight(minHeight);
-    this.requestLayout();
+    if (isSizeType(minHeight)) {
+      this.layoutNode.yogaNode.setMinHeight(minHeight);
+      this.requestLayout();
+    }
   }
   set maxHeight(maxHeight) {
-    this.layoutNode.yogaNode.setMaxHeight(maxHeight);
-    this.requestLayout();
+    if (isSizeType(maxHeight)) {
+      this.layoutNode.yogaNode.setMaxHeight(maxHeight);
+      this.requestLayout();
+    }
+  }
+  set margin(margin) {
+    if (isMarginType(margin)) {
+      const node = this.layoutNode.yogaNode;
+      node.setMargin(Edge.Top, margin);
+      node.setMargin(Edge.Right, margin);
+      node.setMargin(Edge.Bottom, margin);
+      node.setMargin(Edge.Left, margin);
+      this.requestLayout();
+    }
+  }
+  set marginTop(margin) {
+    if (isMarginType(margin)) {
+      this.layoutNode.yogaNode.setMargin(Edge.Top, margin);
+      this.requestLayout();
+    }
+  }
+  set marginRight(margin) {
+    if (isMarginType(margin)) {
+      this.layoutNode.yogaNode.setMargin(Edge.Right, margin);
+      this.requestLayout();
+    }
+  }
+  set marginBottom(margin) {
+    if (isMarginType(margin)) {
+      this.layoutNode.yogaNode.setMargin(Edge.Bottom, margin);
+      this.requestLayout();
+    }
+  }
+  set marginLeft(margin) {
+    if (isMarginType(margin)) {
+      this.layoutNode.yogaNode.setMargin(Edge.Left, margin);
+      this.requestLayout();
+    }
+  }
+  set padding(padding) {
+    if (isPaddingType(padding)) {
+      const node = this.layoutNode.yogaNode;
+      node.setPadding(Edge.Top, padding);
+      node.setPadding(Edge.Right, padding);
+      node.setPadding(Edge.Bottom, padding);
+      node.setPadding(Edge.Left, padding);
+      this.requestLayout();
+    }
+  }
+  set paddingTop(padding) {
+    if (isPaddingType(padding)) {
+      this.layoutNode.yogaNode.setPadding(Edge.Top, padding);
+      this.requestLayout();
+    }
+  }
+  set paddingRight(padding) {
+    if (isPaddingType(padding)) {
+      this.layoutNode.yogaNode.setPadding(Edge.Right, padding);
+      this.requestLayout();
+    }
+  }
+  set paddingBottom(padding) {
+    if (isPaddingType(padding)) {
+      this.layoutNode.yogaNode.setPadding(Edge.Bottom, padding);
+      this.requestLayout();
+    }
+  }
+  set paddingLeft(padding) {
+    if (isPaddingType(padding)) {
+      this.layoutNode.yogaNode.setPadding(Edge.Left, padding);
+      this.requestLayout();
+    }
   }
   getLayoutNode() {
     return this.layoutNode;
@@ -2439,10 +2658,7 @@ class Renderable extends EventEmitter3 {
     }
     this.needsUpdate();
   }
-  add(obj) {
-    if (this.renderableMap.has(obj.id)) {
-      this.remove(obj.id);
-    }
+  replaceParent(obj) {
     if (obj.parent) {
       obj.parent.remove(obj.id);
     }
@@ -2450,13 +2666,40 @@ class Renderable extends EventEmitter3 {
     if (this.ctx) {
       obj.propagateContext(this.ctx);
     }
-    this.renderableArray.push(obj);
+  }
+  add(obj, index) {
+    if (this.renderableMap.has(obj.id)) {
+      console.warn(`A renderable with id ${obj.id} already exists in ${this.id}, removing it`);
+      this.remove(obj.id);
+    }
+    this.replaceParent(obj);
+    const childLayoutNode = obj.getLayoutNode();
+    let insertedIndex;
+    if (index !== undefined) {
+      this.renderableArray.splice(index, 0, obj);
+      insertedIndex = this.layoutNode.insertChild(childLayoutNode, index);
+    } else {
+      this.renderableArray.push(obj);
+      insertedIndex = this.layoutNode.addChild(childLayoutNode);
+    }
     this.needsZIndexSort = true;
     this.renderableMap.set(obj.id, obj);
-    const childLayoutNode = obj.getLayoutNode();
-    this.layoutNode.addChild(childLayoutNode);
     this.requestLayout();
     this.emit("child:added", obj);
+    return insertedIndex;
+  }
+  insertBefore(obj, anchor) {
+    if (!anchor) {
+      return this.add(obj);
+    }
+    if (!this.renderableMap.has(anchor.id)) {
+      throw new Error("Anchor does not exist");
+    }
+    const anchorIndex = this.renderableArray.indexOf(anchor);
+    if (anchorIndex === -1) {
+      throw new Error("Anchor does not exist");
+    }
+    return this.add(obj, anchorIndex);
   }
   propagateContext(ctx) {
     this.ctx = ctx;
@@ -2530,6 +2773,12 @@ class Renderable extends EventEmitter3 {
     this.removeAllListeners();
     this.destroySelf();
   }
+  destroyRecursively() {
+    this.destroy();
+    for (const child of this.renderableArray) {
+      child.destroyRecursively();
+    }
+  }
   destroySelf() {}
   processMouseEvent(event) {
     this.onMouseEvent(event);
@@ -2557,22 +2806,6 @@ class RootRenderable extends Renderable {
     this.layoutNode.yogaNode.setFlexDirection(FlexDirection.Column);
     this.calculateLayout();
   }
-  add(obj) {
-    super.add(obj);
-    const childLayoutNode = obj.getLayoutNode();
-    this.layoutNode.addChild(childLayoutNode);
-    this.requestLayout();
-    this.emit("added" /* ADDED */, obj);
-  }
-  remove(id) {
-    const obj = this.getRenderable(id);
-    if (obj) {
-      this.layoutNode.removeChild(obj.getLayoutNode());
-      this.emit("removed" /* REMOVED */, obj);
-      this.requestLayout();
-    }
-    super.remove(id);
-  }
   requestLayout() {
     this.needsUpdate();
   }
@@ -2816,9 +3049,8 @@ var DebugOverlayCorner;
   DebugOverlayCorner2[DebugOverlayCorner2["bottomRight"] = 3] = "bottomRight";
 })(DebugOverlayCorner ||= {});
 // src/zig.ts
-import { dlopen, suffix, toArrayBuffer } from "bun:ffi";
-import { dirname, join } from "path";
-import { existsSync, readFileSync } from "fs";
+import { dlopen, toArrayBuffer } from "bun:ffi";
+import { existsSync } from "fs";
 
 // src/text-buffer.ts
 class TextBuffer {
@@ -2905,25 +3137,13 @@ class TextBuffer {
 }
 
 // src/zig.ts
-import { createRequire } from "module";
-import { fileURLToPath } from "url";
-var require2 = createRequire(import.meta.url);
-var __filename2 = fileURLToPath(import.meta.url);
-var __dirname2 = dirname(__filename2);
-var packageJson = JSON.parse(readFileSync(join(__dirname2, ...__filename2.endsWith(".ts") ? ["..", "dist", "./package.json"] : ["./package.json"]), { encoding: "utf8" }));
-function findLibrary() {
-  try {
-    const isWindows = process.platform === "win32";
-    const libraryName = isWindows ? "opentui" : "libopentui";
-    const targetLibPath = require2.resolve(`${packageJson.name}-${process.platform}-${process.arch}/${libraryName}.${suffix}`);
-    if (existsSync(targetLibPath)) {
-      return targetLibPath;
-    }
-  } catch {}
+var module = await import(`@opentui/core-${process.platform}-${process.arch}/index.ts`);
+var targetLibPath = module.default;
+if (!existsSync(targetLibPath)) {
   throw new Error(`opentui is not supported on the current platform: ${process.platform}-${process.arch}`);
 }
 function getOpenTUILib(libPath) {
-  const resolvedLibPath = libPath || findLibrary();
+  const resolvedLibPath = libPath || targetLibPath;
   return dlopen(resolvedLibPath, {
     createRenderer: {
       args: ["u32", "u32"],
@@ -3547,6 +3767,9 @@ class FFIRenderLib {
 }
 var opentuiLibPath;
 var opentuiLib;
+function setRenderLibPath(libPath) {
+  opentuiLibPath = libPath;
+}
 function resolveRenderLib() {
   if (!opentuiLib) {
     opentuiLib = new FFIRenderLib(opentuiLibPath);
@@ -7160,6 +7383,22 @@ 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
+    }
+  });
+}
+
 class TerminalConsoleCache extends EventEmitter5 {
   originalConsole;
   _cachedLogs = [];
@@ -7240,19 +7479,6 @@ class TerminalConsoleCache extends EventEmitter5 {
     this.deactivate();
   }
 }
-var capture = new Capture;
-var mockStdout = new CapturedWritableStream("stdout", capture);
-var mockStderr = new CapturedWritableStream("stderr", capture);
-global.console = new console.Console({
-  stdout: mockStdout,
-  stderr: mockStderr,
-  colorMode: true,
-  inspectOptions: {
-    compact: false,
-    breakLength: 80,
-    depth: 2
-  }
-});
 var terminalConsoleCache = new TerminalConsoleCache;
 process.on("exit", () => {
   terminalConsoleCache.destroy();
@@ -8805,7 +9031,7 @@ Error details:
 }
 // src/renderables/Box.ts
 class BoxRenderable extends Renderable {
-  _bg;
+  _backgroundColor;
   _border;
   _borderStyle;
   _borderColor;
@@ -8817,7 +9043,7 @@ class BoxRenderable extends Renderable {
   _titleAlignment;
   constructor(id, options) {
     super(id, options);
-    this._bg = parseColor(options.bg || "transparent");
+    this._backgroundColor = parseColor(options.backgroundColor || "transparent");
     this._border = options.border ?? true;
     this._borderStyle = options.borderStyle || "single";
     this._borderColor = parseColor(options.borderColor || "#FFFFFF");
@@ -8829,14 +9055,14 @@ class BoxRenderable extends Renderable {
     this._titleAlignment = options.titleAlignment || "left";
     this.applyYogaBorders();
   }
-  get bg() {
-    return this._bg;
+  get backgroundColor() {
+    return this._backgroundColor;
   }
-  set bg(value) {
+  set backgroundColor(value) {
     if (value) {
       const newColor = parseColor(value);
-      if (this._bg !== newColor) {
-        this._bg = newColor;
+      if (this._backgroundColor !== newColor) {
+        this._backgroundColor = newColor;
         this.needsUpdate();
       }
     }
@@ -8913,7 +9139,7 @@ class BoxRenderable extends Renderable {
       customBorderChars: this.customBorderChars,
       border: this._border,
       borderColor: currentBorderColor,
-      backgroundColor: this._bg,
+      backgroundColor: this._backgroundColor,
       shouldFill: this.shouldFill,
       title: this._title,
       titleAlignment: this._titleAlignment
@@ -8953,7 +9179,7 @@ class FrameBufferRenderable extends Renderable {
     buffer.drawFrameBuffer(this.x, this.y, this.frameBuffer);
   }
   destroySelf() {
-    this.frameBuffer.destroy();
+    this.frameBuffer?.destroy();
     super.destroySelf();
   }
 }
@@ -8966,7 +9192,7 @@ class GroupRenderable extends Renderable {
 // src/renderables/Text.ts
 class TextRenderable extends Renderable {
   selectable = true;
-  _text;
+  _text = stringToStyledText("");
   _defaultFg;
   _defaultBg;
   _defaultAttributes;
@@ -8979,7 +9205,9 @@ class TextRenderable extends Renderable {
   constructor(id, options) {
     super(id, options);
     this.selectionHelper = new TextSelectionHelper(() => this.x, () => this.y, () => this._plainText.length, () => this._lineInfo);
-    this._text = typeof options.content === "string" ? stringToStyledText(options.content) : options.content;
+    if (options.content) {
+      this._text = typeof options.content === "string" ? stringToStyledText(options.content) : options.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;
@@ -9141,14 +9369,15 @@ class ASCIIFontRenderable extends FrameBufferRenderable {
   selectionHelper;
   constructor(id, options) {
     const font = options.font || "tiny";
-    const measurements = measureText({ text: options.text, font });
+    const text = options.text || "";
+    const measurements = measureText({ text, font });
     super(id, {
       ...options,
-      width: measurements.width,
-      height: measurements.height,
+      width: measurements.width || 1,
+      height: measurements.height || 1,
       respectAlpha: true
     });
-    this._text = options.text;
+    this._text = text;
     this._font = font;
     this._fg = Array.isArray(options.fg) ? options.fg : [options.fg || RGBA.fromInts(255, 255, 255, 255)];
     this._bg = options.bg || RGBA.fromValues(0, 0, 0, 0);
@@ -9276,30 +9505,30 @@ var InputRenderableEvents;
 
 class InputRenderable extends Renderable {
   focusable = true;
-  value = "";
-  cursorPosition = 0;
-  placeholder;
-  backgroundColor;
-  textColor;
-  focusedBackgroundColor;
-  focusedTextColor;
-  placeholderColor;
-  cursorColor;
-  maxLength;
-  lastCommittedValue = "";
+  _value = "";
+  _cursorPosition = 0;
+  _placeholder;
+  _backgroundColor;
+  _textColor;
+  _focusedBackgroundColor;
+  _focusedTextColor;
+  _placeholderColor;
+  _cursorColor;
+  _maxLength;
+  _lastCommittedValue = "";
   constructor(id, options) {
     super(id, { ...options, 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.placeholder = options.placeholder || "";
-    this.value = options.value || "";
-    this.lastCommittedValue = this.value;
-    this.cursorPosition = this.value.length;
-    this.maxLength = options.maxLength || 1000;
-    this.placeholderColor = parseColor(options.placeholderColor || "#666666");
-    this.cursorColor = parseColor(options.cursorColor || "#FFFFFF");
+    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._placeholder = options.placeholder || "";
+    this._value = options.value || "";
+    this._lastCommittedValue = this._value;
+    this._cursorPosition = this._value.length;
+    this._maxLength = options.maxLength || 1000;
+    this._placeholderColor = parseColor(options.placeholderColor || "#666666");
+    this._cursorColor = parseColor(options.cursorColor || "#FFFFFF");
   }
   updateCursorPosition() {
     if (!this._focused)
@@ -9309,28 +9538,28 @@ class InputRenderable extends Renderable {
     const contentWidth = this.width;
     const maxVisibleChars = contentWidth - 1;
     let displayStartIndex = 0;
-    if (this.cursorPosition >= maxVisibleChars) {
-      displayStartIndex = this.cursorPosition - maxVisibleChars + 1;
+    if (this._cursorPosition >= maxVisibleChars) {
+      displayStartIndex = this._cursorPosition - maxVisibleChars + 1;
     }
-    const cursorDisplayX = this.cursorPosition - displayStartIndex;
+    const cursorDisplayX = this._cursorPosition - displayStartIndex;
     if (cursorDisplayX >= 0 && cursorDisplayX < contentWidth) {
       const absoluteCursorX = this.x + contentX + cursorDisplayX + 1;
       const absoluteCursorY = this.y + contentY + 1;
       CliRenderer.setCursorPosition(absoluteCursorX, absoluteCursorY, true);
-      CliRenderer.setCursorColor(this.cursorColor);
+      CliRenderer.setCursorColor(this._cursorColor);
     }
   }
   focus() {
     super.focus();
-    CliRenderer.setCursorStyle("block", true, this.cursorColor);
+    CliRenderer.setCursorStyle("block", true, this._cursorColor);
     this.updateCursorPosition();
   }
   blur() {
     super.blur();
     CliRenderer.setCursorPosition(0, 0, false);
-    if (this.value !== this.lastCommittedValue) {
-      this.lastCommittedValue = this.value;
-      this.emit("change" /* CHANGE */, this.value);
+    if (this._value !== this._lastCommittedValue) {
+      this._lastCommittedValue = this._value;
+      this.emit("change" /* CHANGE */, this._value);
     }
   }
   renderSelf(buffer, deltaTime) {
@@ -9343,20 +9572,20 @@ class InputRenderable extends Renderable {
   refreshFrameBuffer() {
     if (!this.frameBuffer)
       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 displayText = this.value || this.placeholder;
-    const isPlaceholder = !this.value && this.placeholder;
-    const baseTextColor = this._focused ? this.focusedTextColor : this.textColor;
-    const textColor = isPlaceholder ? this.placeholderColor : baseTextColor;
+    const displayText = this._value || this._placeholder;
+    const isPlaceholder = !this._value && this._placeholder;
+    const baseTextColor = this._focused ? this._focusedTextColor : this._textColor;
+    const textColor = isPlaceholder ? this._placeholderColor : baseTextColor;
     const maxVisibleChars = contentWidth - 1;
     let displayStartIndex = 0;
-    if (this.cursorPosition >= maxVisibleChars) {
-      displayStartIndex = this.cursorPosition - maxVisibleChars + 1;
+    if (this._cursorPosition >= maxVisibleChars) {
+      displayStartIndex = this._cursorPosition - maxVisibleChars + 1;
     }
     const visibleText = displayText.substring(displayStartIndex, displayStartIndex + maxVisibleChars);
     if (visibleText) {
@@ -9366,67 +9595,61 @@ class InputRenderable extends Renderable {
       this.updateCursorPosition();
     }
   }
-  setValue(value) {
-    const newValue = value.substring(0, this.maxLength);
-    if (this.value !== newValue) {
-      this.value = newValue;
-      this.cursorPosition = Math.min(this.cursorPosition, this.value.length);
+  get value() {
+    return this._value;
+  }
+  set value(value) {
+    const newValue = value.substring(0, this._maxLength);
+    if (this._value !== newValue) {
+      this._value = newValue;
+      this._cursorPosition = Math.min(this._cursorPosition, this._value.length);
       this.needsUpdate();
       this.updateCursorPosition();
-      this.emit("input" /* INPUT */, this.value);
+      this.emit("input" /* INPUT */, this._value);
     }
   }
-  getValue() {
-    return this.value;
-  }
-  getPlaceholder() {
-    return this.placeholder;
-  }
-  setPlaceholder(placeholder) {
-    if (this.placeholder !== placeholder) {
-      this.placeholder = placeholder;
+  set placeholder(placeholder) {
+    if (this._placeholder !== placeholder) {
+      this._placeholder = placeholder;
       this.needsUpdate();
     }
   }
-  getCursorPosition() {
-    return this.cursorPosition;
-  }
-  setCursorPosition(position) {
-    const newPosition = Math.max(0, Math.min(position, this.value.length));
-    if (this.cursorPosition !== newPosition) {
-      this.cursorPosition = newPosition;
+  set cursorPosition(position) {
+    const newPosition = Math.max(0, Math.min(position, this._value.length));
+    if (this._cursorPosition !== newPosition) {
+      this._cursorPosition = newPosition;
       this.needsUpdate();
       this.updateCursorPosition();
     }
   }
   insertText(text) {
-    if (this.value.length + text.length > this.maxLength) {
+    if (this._value.length + text.length > this._maxLength) {
       return;
     }
-    const beforeCursor = this.value.substring(0, this.cursorPosition);
-    const afterCursor = this.value.substring(this.cursorPosition);
-    this.value = beforeCursor + text + afterCursor;
-    this.cursorPosition += text.length;
+    const beforeCursor = this._value.substring(0, this._cursorPosition);
+    const afterCursor = this._value.substring(this._cursorPosition);
+    this._value = beforeCursor + text + afterCursor;
+    this._cursorPosition += text.length;
     this.needsUpdate();
     this.updateCursorPosition();
-    this.emit("input" /* INPUT */, this.value);
+    this.emit("input" /* INPUT */, this._value);
   }
   deleteCharacter(direction) {
-    if (direction === "backward" && this.cursorPosition > 0) {
-      const beforeCursor = this.value.substring(0, this.cursorPosition - 1);
-      const afterCursor = this.value.substring(this.cursorPosition);
-      this.value = beforeCursor + afterCursor;
-      this.cursorPosition--;
+    if (direction === "backward" && this._cursorPosition > 0) {
+      const beforeCursor = this._value.substring(0, this._cursorPosition - 1);
+      const afterCursor = this._value.substring(this._cursorPosition);
+      this._value = beforeCursor + afterCursor;
+      this._cursorPosition--;
       this.needsUpdate();
       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.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.updateCursorPosition();
-      this.emit("input" /* INPUT */, this.value);
+      this.emit("input" /* INPUT */, this._value);
     }
   }
   handleKeyPress(key) {
@@ -9434,16 +9657,16 @@ class InputRenderable extends Renderable {
     const keySequence = typeof key === "string" ? key : key.sequence;
     switch (keyName2) {
       case "left":
-        this.setCursorPosition(this.cursorPosition - 1);
+        this.cursorPosition = this._cursorPosition - 1;
         return true;
       case "right":
-        this.setCursorPosition(this.cursorPosition + 1);
+        this.cursorPosition = this._cursorPosition + 1;
         return true;
       case "home":
-        this.setCursorPosition(0);
+        this.cursorPosition = 0;
         return true;
       case "end":
-        this.setCursorPosition(this.value.length);
+        this.cursorPosition = this._value.length;
         return true;
       case "backspace":
         this.deleteCharacter("backward");
@@ -9453,11 +9676,11 @@ class InputRenderable extends Renderable {
         return true;
       case "return":
       case "enter":
-        if (this.value !== this.lastCommittedValue) {
-          this.lastCommittedValue = this.value;
-          this.emit("change" /* CHANGE */, this.value);
+        if (this._value !== this._lastCommittedValue) {
+          this._lastCommittedValue = this._value;
+          this.emit("change" /* CHANGE */, this._value);
         }
-        this.emit("enter" /* ENTER */, this.value);
+        this.emit("enter" /* ENTER */, this._value);
         return true;
       default:
         if (keySequence && keySequence.length === 1 && keySequence.charCodeAt(0) >= 32 && keySequence.charCodeAt(0) <= 126) {
@@ -9468,15 +9691,37 @@ class InputRenderable extends Renderable {
     }
     return false;
   }
-  getMaxLength() {
-    return this.maxLength;
-  }
-  setMaxLength(maxLength) {
-    this.maxLength = maxLength;
-    if (this.value.length > maxLength) {
-      this.setValue(this.value.substring(0, maxLength));
+  set maxLength(maxLength) {
+    this._maxLength = maxLength;
+    if (this._value.length > maxLength) {
+      this._value = this._value.substring(0, maxLength);
+      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 placeholderColor(color) {
+    this._placeholderColor = parseColor(color);
+    this.needsUpdate();
+  }
+  set cursorColor(color) {
+    this._cursorColor = parseColor(color);
+    this.needsUpdate();
+  }
   destroySelf() {
     if (this._focused) {
       CliRenderer.setCursorPosition(0, 0, false);
@@ -9493,47 +9738,47 @@ var SelectRenderableEvents;
 
 class SelectRenderable extends Renderable {
   focusable = true;
-  options;
+  _options = [];
   selectedIndex = 0;
   scrollOffset = 0;
   maxVisibleItems;
-  backgroundColor;
-  textColor;
-  focusedBackgroundColor;
-  focusedTextColor;
-  selectedBackgroundColor;
-  selectedTextColor;
-  descriptionColor;
-  selectedDescriptionColor;
-  showScrollIndicator;
-  wrapSelection;
-  showDescription;
-  font;
-  itemSpacing;
+  _backgroundColor;
+  _textColor;
+  _focusedBackgroundColor;
+  _focusedTextColor;
+  _selectedBackgroundColor;
+  _selectedTextColor;
+  _descriptionColor;
+  _selectedDescriptionColor;
+  _showScrollIndicator;
+  _wrapSelection;
+  _showDescription;
+  _font;
+  _itemSpacing;
   linesPerItem;
   fontHeight;
-  fastScrollStep;
+  _fastScrollStep;
   constructor(id, options) {
     super(id, { ...options, 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.showScrollIndicator = options.showScrollIndicator ?? false;
-    this.wrapSelection = options.wrapSelection ?? false;
-    this.showDescription = options.showDescription ?? true;
-    this.font = options.font;
-    this.itemSpacing = options.itemSpacing || 0;
-    this.fontHeight = this.font ? measureText({ text: "A", font: this.font }).height : 1;
-    this.linesPerItem = this.showDescription ? this.font ? this.fontHeight + 1 : 2 : this.font ? this.fontHeight : 1;
-    this.linesPerItem += this.itemSpacing;
+    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._showScrollIndicator = options.showScrollIndicator ?? false;
+    this._wrapSelection = options.wrapSelection ?? false;
+    this._showDescription = options.showDescription ?? true;
+    this._font = options.font;
+    this._itemSpacing = options.itemSpacing || 0;
+    this.fontHeight = this._font ? measureText({ text: "A", font: this._font }).height : 1;
+    this.linesPerItem = this._showDescription ? this._font ? this.fontHeight + 1 : 2 : this._font ? this.fontHeight : 1;
+    this.linesPerItem += this._itemSpacing;
     this.maxVisibleItems = Math.max(1, Math.floor(this.height / this.linesPerItem));
-    this.selectedBackgroundColor = parseColor(options.selectedBackgroundColor || "#334455");
-    this.selectedTextColor = parseColor(options.selectedTextColor || "#FFFF00");
-    this.descriptionColor = parseColor(options.descriptionColor || "#888888");
-    this.selectedDescriptionColor = parseColor(options.selectedDescriptionColor || "#CCCCCC");
-    this.fastScrollStep = options.fastScrollStep || 5;
+    this._selectedBackgroundColor = parseColor(options.selectedBackgroundColor || "#334455");
+    this._selectedTextColor = parseColor(options.selectedTextColor || "#FFFF00");
+    this._descriptionColor = parseColor(options.descriptionColor || "#888888");
+    this._selectedDescriptionColor = parseColor(options.selectedDescriptionColor || "#CCCCCC");
+    this._fastScrollStep = options.fastScrollStep || 5;
     this.needsUpdate();
   }
   renderSelf(buffer, deltaTime) {
@@ -9544,15 +9789,15 @@ class SelectRenderable 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.maxVisibleItems);
+    const visibleOptions = this._options.slice(this.scrollOffset, this.scrollOffset + this.maxVisibleItems);
     for (let i = 0;i < visibleOptions.length; i++) {
       const actualIndex = this.scrollOffset + i;
       const option = visibleOptions[i];
@@ -9561,14 +9806,14 @@ class SelectRenderable extends Renderable {
       if (itemY + this.linesPerItem - 1 >= contentY + contentHeight)
         break;
       if (isSelected) {
-        const contentHeight2 = this.linesPerItem - this.itemSpacing;
-        this.frameBuffer.fillRect(contentX, itemY, contentWidth, contentHeight2, this.selectedBackgroundColor);
+        const contentHeight2 = this.linesPerItem - this._itemSpacing;
+        this.frameBuffer.fillRect(contentX, itemY, contentWidth, contentHeight2, this._selectedBackgroundColor);
       }
       const nameContent = `${isSelected ? "\u25B6 " : "  "}${option.name}`;
-      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;
       let descX = contentX + 3;
-      if (this.font) {
+      if (this._font) {
         const indicator = isSelected ? "\u25B6 " : "  ";
         this.frameBuffer.drawText(indicator, contentX + 1, itemY, nameColor);
         const indicatorWidth = 2;
@@ -9577,40 +9822,43 @@ class SelectRenderable extends Renderable {
           x: contentX + 1 + indicatorWidth,
           y: itemY,
           fg: nameColor,
-          bg: isSelected ? this.selectedBackgroundColor : bgColor,
-          font: this.font
+          bg: isSelected ? this._selectedBackgroundColor : bgColor,
+          font: this._font
         });
         descX = contentX + 1 + indicatorWidth;
       } else {
         this.frameBuffer.drawText(nameContent, contentX + 1, itemY, nameColor);
       }
-      if (this.showDescription && itemY + this.fontHeight < contentY + contentHeight) {
-        const descColor = isSelected ? this.selectedDescriptionColor : this.descriptionColor;
-        const descBg = this._focused ? this.focusedBackgroundColor : this.backgroundColor;
+      if (this._showDescription && itemY + this.fontHeight < contentY + contentHeight) {
+        const descColor = isSelected ? this._selectedDescriptionColor : this._descriptionColor;
+        const descBg = this._focused ? this._focusedBackgroundColor : this._backgroundColor;
         this.frameBuffer.drawText(option.description, descX, itemY + this.fontHeight, descColor);
       }
     }
-    if (this.showScrollIndicator && this.options.length > this.maxVisibleItems) {
+    if (this._showScrollIndicator && this._options.length > this.maxVisibleItems) {
       this.renderScrollIndicatorToFrameBuffer(contentX, contentY, contentWidth, contentHeight);
     }
   }
   renderScrollIndicatorToFrameBuffer(contentX, contentY, contentWidth, contentHeight) {
     if (!this.frameBuffer)
       return;
-    const scrollPercent = this.selectedIndex / Math.max(1, this.options.length - 1);
+    const scrollPercent = this.selectedIndex / Math.max(1, this._options.length - 1);
     const indicatorHeight = Math.max(1, contentHeight - 2);
     const indicatorY = contentY + 1 + Math.floor(scrollPercent * indicatorHeight);
     const indicatorX = contentX + contentWidth - 1;
     this.frameBuffer.drawText("\u2588", indicatorX, indicatorY, parseColor("#666666"));
   }
-  setOptions(options) {
-    this.options = options;
+  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();
   }
   getSelectedOption() {
-    return this.options[this.selectedIndex] || null;
+    return this._options[this.selectedIndex] || null;
   }
   getSelectedIndex() {
     return this.selectedIndex;
@@ -9619,8 +9867,8 @@ class SelectRenderable extends Renderable {
     const newIndex = this.selectedIndex - steps;
     if (newIndex >= 0) {
       this.selectedIndex = newIndex;
-    } 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 {
       this.selectedIndex = 0;
     }
@@ -9630,12 +9878,12 @@ class SelectRenderable extends Renderable {
   }
   moveDown(steps = 1) {
     const newIndex = this.selectedIndex + steps;
-    if (newIndex < this.options.length) {
+    if (newIndex < this._options.length) {
       this.selectedIndex = newIndex;
-    } else if (this.wrapSelection && this.options.length > 0) {
+    } else if (this._wrapSelection && this._options.length > 0) {
       this.selectedIndex = 0;
     } else {
-      this.selectedIndex = this.options.length - 1;
+      this.selectedIndex = this._options.length - 1;
     }
     this.updateScrollOffset();
     this.needsUpdate();
@@ -9648,7 +9896,7 @@ class SelectRenderable 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();
@@ -9656,10 +9904,10 @@ class SelectRenderable extends Renderable {
     }
   }
   updateScrollOffset() {
-    if (!this.options)
+    if (!this._options)
       return;
     const halfVisible = Math.floor(this.maxVisibleItems / 2);
-    const newScrollOffset = Math.max(0, Math.min(this.selectedIndex - halfVisible, this.options.length - this.maxVisibleItems));
+    const newScrollOffset = Math.max(0, Math.min(this.selectedIndex - halfVisible, this._options.length - this.maxVisibleItems));
     if (newScrollOffset !== this.scrollOffset) {
       this.scrollOffset = newScrollOffset;
       this.needsUpdate();
@@ -9676,11 +9924,11 @@ class SelectRenderable extends Renderable {
     switch (keyName2) {
       case "up":
       case "k":
-        this.moveUp(isShift ? this.fastScrollStep : 1);
+        this.moveUp(isShift ? this._fastScrollStep : 1);
         return true;
       case "down":
       case "j":
-        this.moveDown(isShift ? this.fastScrollStep : 1);
+        this.moveDown(isShift ? this._fastScrollStep : 1);
         return true;
       case "return":
       case "enter":
@@ -9689,31 +9937,83 @@ class SelectRenderable extends Renderable {
     }
     return false;
   }
-  getShowScrollIndicator() {
-    return this.showScrollIndicator;
+  get showScrollIndicator() {
+    return this._showScrollIndicator;
   }
-  setShowScrollIndicator(show) {
-    this.showScrollIndicator = show;
+  set showScrollIndicator(show) {
+    this._showScrollIndicator = show;
     this.needsUpdate();
   }
-  getShowDescription() {
-    return this.showDescription;
+  get showDescription() {
+    return this._showDescription;
   }
-  setShowDescription(show) {
-    if (this.showDescription !== show) {
-      this.showDescription = show;
-      this.linesPerItem = this.showDescription ? this.font ? this.fontHeight + 1 : 2 : this.font ? this.fontHeight : 1;
-      this.linesPerItem += this.itemSpacing;
+  set showDescription(show) {
+    if (this._showDescription !== show) {
+      this._showDescription = show;
+      this.linesPerItem = this._showDescription ? this._font ? this.fontHeight + 1 : 2 : this._font ? this.fontHeight : 1;
+      this.linesPerItem += this._itemSpacing;
       this.maxVisibleItems = Math.max(1, Math.floor(this.height / this.linesPerItem));
       this.updateScrollOffset();
       this.needsUpdate();
     }
   }
-  getWrapSelection() {
-    return this.wrapSelection;
+  get wrapSelection() {
+    return this._wrapSelection;
   }
-  setWrapSelection(wrap) {
-    this.wrapSelection = wrap;
+  set wrapSelection(wrap) {
+    this._wrapSelection = wrap;
+  }
+  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 descriptionColor(color) {
+    this._descriptionColor = parseColor(color);
+    this.needsUpdate();
+  }
+  set selectedDescriptionColor(color) {
+    this._selectedDescriptionColor = parseColor(color);
+    this.needsUpdate();
+  }
+  set font(font) {
+    this._font = font;
+    this.fontHeight = measureText({ text: "A", font: this._font }).height;
+    this.linesPerItem = this._showDescription ? this._font ? this.fontHeight + 1 : 2 : this._font ? this.fontHeight : 1;
+    this.linesPerItem += this._itemSpacing;
+    this.maxVisibleItems = Math.max(1, Math.floor(this.height / this.linesPerItem));
+    this.updateScrollOffset();
+    this.needsUpdate();
+  }
+  set itemSpacing(spacing) {
+    this._itemSpacing = spacing;
+    this.linesPerItem = this._showDescription ? this._font ? this.fontHeight + 1 : 2 : this._font ? this.fontHeight : 1;
+    this.linesPerItem += this._itemSpacing;
+    this.maxVisibleItems = Math.max(1, Math.floor(this.height / this.linesPerItem));
+    this.updateScrollOffset();
+    this.needsUpdate();
+  }
+  set fastScrollStep(step) {
+    this._fastScrollStep = step;
   }
 }
 // src/renderables/TabSelect.ts
@@ -9735,7 +10035,7 @@ function calculateDynamicHeight(showUnderline, showDescription) {
 
 class TabSelectRenderable extends Renderable {
   focusable = true;
-  options;
+  options = [];
   selectedIndex = 0;
   scrollOffset = 0;
   tabWidth;
@@ -9976,8 +10276,10 @@ export {
   t,
   stringToStyledText,
   strikethrough,
+  setRenderLibPath,
   rgbToHex,
   reverse,
+  resolveRenderLib,
   renderFontToFrameBuffer,
   red,
   parseKeypress,
@@ -9987,6 +10289,12 @@ export {
   magenta,
   loadTemplate,
   italic,
+  isSizeType,
+  isPositionType,
+  isPaddingType,
+  isMarginType,
+  isFlexBasisType,
+  isDimensionType,
   hsvToRgb,
   hexToRgb,
   green,
@@ -10051,21 +10359,16 @@ export {
   RenderableEvents,
   Renderable,
   RGBA,
-  PositionType,
   OptimizedBuffer,
   MouseEvent,
   MouseButton,
   LayoutEvents,
   KeyHandler,
-  Justify,
   InputRenderableEvents,
   InputRenderable,
   GroupRenderable,
   FrameBufferRenderable,
-  FlexDirection,
-  Edge,
   DistortionEffect,
-  Direction,
   DebugOverlayCorner,
   CliRenderer,
   CliRenderEvents,
@@ -10075,7 +10378,6 @@ export {
   BorderCharArrays,
   BlurEffect,
   BloomEffect,
-  Align,
   ASCIIFontSelectionHelper,
   ASCIIFontRenderable
 };