@opentui/core 0.1.26 → 0.1.28

package/index.js

@@ -26,6 +26,7 @@ import {
   RGBA,
   Renderable,
   RenderableEvents,
+  RendererControlState,
   RootRenderable,
   Selection,
   StyledText,
@@ -132,7 +133,7 @@ import {
   white,
   wrapWithDelegates,
   yellow
-} from "./index-pxa2sv92.js";
+} from "./index-phjxdb6g.js";
 // src/post/filters.ts
 function applyScanlines(buffer, strength = 0.8, step = 2) {
   const width = buffer.width;
@@ -1222,6 +1223,187 @@ function createTimeline(options = {}) {
   engine.register(timeline);
   return timeline;
 }
+// src/renderables/FrameBuffer.ts
+class FrameBufferRenderable extends Renderable {
+  frameBuffer;
+  respectAlpha;
+  constructor(ctx, options) {
+    super(ctx, options);
+    this.respectAlpha = options.respectAlpha || false;
+    this.frameBuffer = OptimizedBuffer.create(options.width, options.height, this._ctx.widthMethod, {
+      respectAlpha: this.respectAlpha,
+      id: options.id || `framebufferrenderable-${this.id}`
+    });
+  }
+  onResize(width, height) {
+    if (width <= 0 || height <= 0) {
+      throw new Error(`Invalid resize dimensions for FrameBufferRenderable ${this.id}: ${width}x${height}`);
+    }
+    this.frameBuffer.resize(width, height);
+    super.onResize(width, height);
+    this.requestRender();
+  }
+  renderSelf(buffer) {
+    if (!this.visible || this.isDestroyed)
+      return;
+    buffer.drawFrameBuffer(this.x, this.y, this.frameBuffer);
+  }
+  destroySelf() {
+    this.frameBuffer?.destroy();
+    super.destroySelf();
+  }
+}
+
+// src/renderables/ASCIIFont.ts
+class ASCIIFontRenderable extends FrameBufferRenderable {
+  selectable = true;
+  _text;
+  _font;
+  _fg;
+  _bg;
+  _selectionBg;
+  _selectionFg;
+  lastLocalSelection = null;
+  selectionHelper;
+  constructor(ctx, options) {
+    const font = options.font || "tiny";
+    const text = options.text || "";
+    const measurements = measureText({ text, font });
+    super(ctx, {
+      flexShrink: 0,
+      ...options,
+      width: measurements.width || 1,
+      height: measurements.height || 1,
+      respectAlpha: true
+    });
+    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);
+    this._selectionBg = options.selectionBg ? parseColor(options.selectionBg) : undefined;
+    this._selectionFg = options.selectionFg ? parseColor(options.selectionFg) : undefined;
+    this.selectable = options.selectable ?? true;
+    this.selectionHelper = new ASCIIFontSelectionHelper(() => this._text, () => this._font);
+    this.renderFontToBuffer();
+  }
+  get text() {
+    return this._text;
+  }
+  set text(value) {
+    this._text = value;
+    this.updateDimensions();
+    if (this.lastLocalSelection) {
+      this.selectionHelper.onLocalSelectionChanged(this.lastLocalSelection, this.width, this.height);
+    }
+    this.renderFontToBuffer();
+    this.requestRender();
+  }
+  get font() {
+    return this._font;
+  }
+  set font(value) {
+    this._font = value;
+    this.updateDimensions();
+    if (this.lastLocalSelection) {
+      this.selectionHelper.onLocalSelectionChanged(this.lastLocalSelection, this.width, this.height);
+    }
+    this.renderFontToBuffer();
+    this.requestRender();
+  }
+  get fg() {
+    return this._fg;
+  }
+  set fg(value) {
+    if (Array.isArray(value)) {
+      this._fg = value.map((color) => typeof color === "string" ? parseColor(color) : color);
+    } else {
+      this._fg = [typeof value === "string" ? parseColor(value) : value];
+    }
+    this.renderFontToBuffer();
+    this.requestRender();
+  }
+  get bg() {
+    return this._bg;
+  }
+  set bg(value) {
+    this._bg = typeof value === "string" ? parseColor(value) : value;
+    this.renderFontToBuffer();
+    this.requestRender();
+  }
+  updateDimensions() {
+    const measurements = measureText({ text: this._text, font: this._font });
+    this.width = measurements.width;
+    this.height = measurements.height;
+  }
+  shouldStartSelection(x, y) {
+    const localX = x - this.x;
+    const localY = y - this.y;
+    return this.selectionHelper.shouldStartSelection(localX, localY, this.width, this.height);
+  }
+  onSelectionChanged(selection) {
+    const localSelection = convertGlobalToLocalSelection(selection, this.x, this.y);
+    this.lastLocalSelection = localSelection;
+    const changed = this.selectionHelper.onLocalSelectionChanged(localSelection, this.width, this.height);
+    if (changed) {
+      this.renderFontToBuffer();
+      this.requestRender();
+    }
+    return changed;
+  }
+  getSelectedText() {
+    const selection = this.selectionHelper.getSelection();
+    if (!selection)
+      return "";
+    return this._text.slice(selection.start, selection.end);
+  }
+  hasSelection() {
+    return this.selectionHelper.hasSelection();
+  }
+  onResize(width, height) {
+    super.onResize(width, height);
+    this.renderFontToBuffer();
+  }
+  renderFontToBuffer() {
+    if (this.isDestroyed)
+      return;
+    this.frameBuffer.clear(this._bg);
+    renderFontToFrameBuffer(this.frameBuffer, {
+      text: this._text,
+      x: 0,
+      y: 0,
+      fg: this._fg,
+      bg: this._bg,
+      font: this._font
+    });
+    const selection = this.selectionHelper.getSelection();
+    if (selection && (this._selectionBg || this._selectionFg)) {
+      this.renderSelectionHighlight(selection);
+    }
+  }
+  renderSelectionHighlight(selection) {
+    if (!this._selectionBg && !this._selectionFg)
+      return;
+    const selectedText = this._text.slice(selection.start, selection.end);
+    if (!selectedText)
+      return;
+    const positions = getCharacterPositions(this._text, this._font);
+    const startX = positions[selection.start] || 0;
+    const endX = selection.end < positions.length ? positions[selection.end] : measureText({ text: this._text, font: this._font }).width;
+    if (this._selectionBg) {
+      this.frameBuffer.fillRect(startX, 0, endX - startX, this.height, this._selectionBg);
+    }
+    if (this._selectionFg || this._selectionBg) {
+      renderFontToFrameBuffer(this.frameBuffer, {
+        text: selectedText,
+        x: startX,
+        y: 0,
+        fg: this._selectionFg ? [this._selectionFg] : this._fg,
+        bg: this._selectionBg || this._bg,
+        font: this._font
+      });
+    }
+  }
+}
 // src/renderables/Box.ts
 function isGapType(value) {
   if (value === undefined) {
@@ -1776,36 +1958,6 @@ class CodeRenderable extends TextBufferRenderable {
     return new StyledText(chunks);
   }
 }
-// src/renderables/FrameBuffer.ts
-class FrameBufferRenderable extends Renderable {
-  frameBuffer;
-  respectAlpha;
-  constructor(ctx, options) {
-    super(ctx, options);
-    this.respectAlpha = options.respectAlpha || false;
-    this.frameBuffer = OptimizedBuffer.create(options.width, options.height, this._ctx.widthMethod, {
-      respectAlpha: this.respectAlpha,
-      id: options.id || `framebufferrenderable-${this.id}`
-    });
-  }
-  onResize(width, height) {
-    if (width <= 0 || height <= 0) {
-      throw new Error(`Invalid resize dimensions for FrameBufferRenderable ${this.id}: ${width}x${height}`);
-    }
-    this.frameBuffer.resize(width, height);
-    super.onResize(width, height);
-    this.requestRender();
-  }
-  renderSelf(buffer) {
-    if (!this.visible || this.isDestroyed)
-      return;
-    buffer.drawFrameBuffer(this.x, this.y, this.frameBuffer);
-  }
-  destroySelf() {
-    this.frameBuffer?.destroy();
-    super.destroySelf();
-  }
-}
 // src/renderables/TextNode.ts
 var BrandedTextNodeRenderable = Symbol.for("@opentui/core/TextNodeRenderable");
 function isTextNodeRenderable(obj) {
@@ -1918,15 +2070,14 @@ class TextNodeRenderable extends BaseRenderable {
     this.requestRender();
     return this;
   }
-  remove(child) {
-    const childIndex = this._children.indexOf(child);
+  remove(id) {
+    const childIndex = this.getRenderableIndex(id);
     if (childIndex === -1) {
       throw new Error("Child not found in children");
     }
+    const child = this._children[childIndex];
     this._children.splice(childIndex, 1);
-    if (typeof child !== "string") {
-      child.parent = null;
-    }
+    child.parent = null;
     this.requestRender();
     return this;
   }
@@ -1985,6 +2136,9 @@ class TextNodeRenderable extends BaseRenderable {
   getRenderable(id) {
     return this._children.find((child) => typeof child !== "string" && child.id === id);
   }
+  getRenderableIndex(id) {
+    return this._children.findIndex((child) => isTextNodeRenderable(child) && child.id === id);
+  }
   get fg() {
     return this._fg;
   }
@@ -2035,2296 +2189,2148 @@ class RootTextNodeRenderable extends TextNodeRenderable {
   }
 }
 
-// src/renderables/Text.ts
-class TextRenderable extends TextBufferRenderable {
-  _text;
-  _hasManualStyledText = false;
-  rootTextNode;
-  _contentDefaultOptions = {
-    content: ""
+// src/renderables/composition/constructs.ts
+function Generic(props, ...children) {
+  return h(VRenderable, props || {}, ...children);
+}
+function Box(props, ...children) {
+  return h(BoxRenderable, props || {}, ...children);
+}
+function Text(props, ...children) {
+  return h(TextRenderable, props || {}, ...children);
+}
+function ASCIIFont(props, ...children) {
+  return h(ASCIIFontRenderable, props || {}, ...children);
+}
+function Input(props, ...children) {
+  return h(InputRenderable, props || {}, ...children);
+}
+function Select(props, ...children) {
+  return h(SelectRenderable, props || {}, ...children);
+}
+function TabSelect(props, ...children) {
+  return h(TabSelectRenderable, props || {}, ...children);
+}
+function FrameBuffer(props, ...children) {
+  return h(FrameBufferRenderable, props, ...children);
+}
+function StyledText2(props, ...children) {
+  const styledProps = props;
+  const textNodeOptions = {
+    ...styledProps,
+    attributes: styledProps?.attributes ?? 0
   };
-  constructor(ctx, options) {
-    super(ctx, options);
-    const content = options.content ?? this._contentDefaultOptions.content;
-    const styledText = typeof content === "string" ? stringToStyledText(content) : content;
-    this._text = styledText;
-    this._hasManualStyledText = options.content !== undefined && content !== "";
-    this.rootTextNode = new RootTextNodeRenderable(ctx, {
-      id: `${this.id}-root`,
-      fg: this._defaultFg,
-      bg: this._defaultBg,
-      attributes: this._defaultAttributes
-    }, this);
-    this.updateTextBuffer(styledText);
-  }
-  updateTextBuffer(styledText) {
-    this.textBuffer.setStyledText(styledText);
-    this.clearChunks(styledText);
-  }
-  clearChunks(styledText) {}
-  get content() {
-    return this._text;
-  }
-  get chunks() {
-    return this._text.chunks;
+  const textNode = new TextNodeRenderable(textNodeOptions);
+  for (const child of children) {
+    textNode.add(child);
   }
-  get textNode() {
-    return this.rootTextNode;
+  return textNode;
+}
+var vstyles = {
+  bold: (...children) => StyledText2({ attributes: TextAttributes.BOLD }, ...children),
+  italic: (...children) => StyledText2({ attributes: TextAttributes.ITALIC }, ...children),
+  underline: (...children) => StyledText2({ attributes: TextAttributes.UNDERLINE }, ...children),
+  dim: (...children) => StyledText2({ attributes: TextAttributes.DIM }, ...children),
+  blink: (...children) => StyledText2({ attributes: TextAttributes.BLINK }, ...children),
+  inverse: (...children) => StyledText2({ attributes: TextAttributes.INVERSE }, ...children),
+  hidden: (...children) => StyledText2({ attributes: TextAttributes.HIDDEN }, ...children),
+  strikethrough: (...children) => StyledText2({ attributes: TextAttributes.STRIKETHROUGH }, ...children),
+  boldItalic: (...children) => StyledText2({ attributes: TextAttributes.BOLD | TextAttributes.ITALIC }, ...children),
+  boldUnderline: (...children) => StyledText2({ attributes: TextAttributes.BOLD | TextAttributes.UNDERLINE }, ...children),
+  italicUnderline: (...children) => StyledText2({ attributes: TextAttributes.ITALIC | TextAttributes.UNDERLINE }, ...children),
+  boldItalicUnderline: (...children) => StyledText2({ attributes: TextAttributes.BOLD | TextAttributes.ITALIC | TextAttributes.UNDERLINE }, ...children),
+  color: (color, ...children) => StyledText2({ fg: color }, ...children),
+  bgColor: (bgColor, ...children) => StyledText2({ bg: bgColor }, ...children),
+  fg: (color, ...children) => StyledText2({ fg: color }, ...children),
+  bg: (bgColor, ...children) => StyledText2({ bg: bgColor }, ...children),
+  styled: (attributes = 0, ...children) => StyledText2({ attributes }, ...children)
+};
+// src/renderables/composition/VRenderable.ts
+class VRenderable extends Renderable {
+  options;
+  constructor(ctx, options) {
+    super(ctx, options);
+    this.options = options;
   }
-  set content(value) {
-    this._hasManualStyledText = true;
-    const styledText = typeof value === "string" ? stringToStyledText(value) : value;
-    if (this._text !== styledText) {
-      this._text = styledText;
-      this.updateTextBuffer(styledText);
-      this.updateTextInfo();
+  renderSelf(buffer, deltaTime) {
+    if (this.options.render) {
+      this.options.render.call(this.options, buffer, deltaTime, this);
     }
   }
-  insertChunk(chunk, index) {
-    super.insertChunk(chunk, index);
-    this.clearChunks(this._text);
+}
+// src/renderables/Input.ts
+var InputRenderableEvents;
+((InputRenderableEvents2) => {
+  InputRenderableEvents2["INPUT"] = "input";
+  InputRenderableEvents2["CHANGE"] = "change";
+  InputRenderableEvents2["ENTER"] = "enter";
+})(InputRenderableEvents ||= {});
+
+class InputRenderable extends Renderable {
+  _focusable = true;
+  _value = "";
+  _cursorPosition = 0;
+  _placeholder;
+  _backgroundColor;
+  _textColor;
+  _focusedBackgroundColor;
+  _focusedTextColor;
+  _placeholderColor;
+  _cursorColor;
+  _maxLength;
+  _lastCommittedValue = "";
+  _defaultOptions = {
+    backgroundColor: "transparent",
+    textColor: "#FFFFFF",
+    focusedBackgroundColor: "#1a1a1a",
+    focusedTextColor: "#FFFFFF",
+    placeholder: "",
+    placeholderColor: "#666666",
+    cursorColor: "#FFFFFF",
+    maxLength: 1000,
+    value: ""
+  };
+  constructor(ctx, options) {
+    super(ctx, { ...options, buffered: true });
+    this._backgroundColor = parseColor(options.backgroundColor || this._defaultOptions.backgroundColor);
+    this._textColor = parseColor(options.textColor || this._defaultOptions.textColor);
+    this._focusedBackgroundColor = parseColor(options.focusedBackgroundColor || options.backgroundColor || this._defaultOptions.focusedBackgroundColor);
+    this._focusedTextColor = parseColor(options.focusedTextColor || options.textColor || this._defaultOptions.focusedTextColor);
+    this._placeholder = options.placeholder || this._defaultOptions.placeholder;
+    this._value = options.value || this._defaultOptions.value;
+    this._lastCommittedValue = this._value;
+    this._cursorPosition = this._value.length;
+    this._maxLength = options.maxLength || this._defaultOptions.maxLength;
+    this._placeholderColor = parseColor(options.placeholderColor || this._defaultOptions.placeholderColor);
+    this._cursorColor = parseColor(options.cursorColor || this._defaultOptions.cursorColor);
   }
-  removeChunkByObject(chunk) {
-    const index = this._text.chunks.indexOf(chunk);
-    if (index === -1)
+  updateCursorPosition() {
+    if (!this._focused)
       return;
-    super.removeChunk(index);
-    this.clearChunks(this._text);
+    const contentX = 0;
+    const contentY = 0;
+    const contentWidth = this.width;
+    const maxVisibleChars = contentWidth - 1;
+    let displayStartIndex = 0;
+    if (this._cursorPosition >= maxVisibleChars) {
+      displayStartIndex = this._cursorPosition - maxVisibleChars + 1;
+    }
+    const cursorDisplayX = this._cursorPosition - displayStartIndex;
+    if (cursorDisplayX >= 0 && cursorDisplayX < contentWidth) {
+      const absoluteCursorX = this.x + contentX + cursorDisplayX + 1;
+      const absoluteCursorY = this.y + contentY + 1;
+      this._ctx.setCursorPosition(absoluteCursorX, absoluteCursorY, true);
+      this._ctx.setCursorColor(this._cursorColor);
+    }
   }
-  replaceChunkByObject(chunk, oldChunk) {
-    const index = this._text.chunks.indexOf(oldChunk);
-    if (index === -1)
-      return;
-    super.replaceChunk(index, chunk);
-    this.clearChunks(this._text);
+  focus() {
+    super.focus();
+    this._ctx.setCursorStyle("block", true);
+    this._ctx.setCursorColor(this._cursorColor);
+    this.updateCursorPosition();
   }
-  updateTextFromNodes() {
-    if (this.rootTextNode.isDirty && !this._hasManualStyledText) {
-      const chunks = this.rootTextNode.gatherWithInheritedStyle({
-        fg: this._defaultFg,
-        bg: this._defaultBg,
-        attributes: this._defaultAttributes
-      });
-      this.textBuffer.setStyledText(new StyledText(chunks));
-      this.refreshLocalSelection();
-      this.yogaNode.markDirty();
+  blur() {
+    super.blur();
+    this._ctx.setCursorPosition(0, 0, false);
+    if (this._value !== this._lastCommittedValue) {
+      this._lastCommittedValue = this._value;
+      this.emit("change" /* CHANGE */, this._value);
     }
   }
-  add(obj, index) {
-    return this.rootTextNode.add(obj, index);
-  }
-  remove(id) {
-    const child = this.rootTextNode.getRenderable(id);
-    if (child && isTextNodeRenderable(child)) {
-      this.rootTextNode.remove(child);
+  renderSelf(buffer, deltaTime) {
+    if (!this.visible || !this.frameBuffer)
+      return;
+    if (this.isDirty) {
+      this.refreshFrameBuffer();
     }
   }
-  insertBefore(obj, anchor) {
-    this.rootTextNode.insertBefore(obj, anchor);
-    return this.rootTextNode.children.indexOf(obj);
+  refreshFrameBuffer() {
+    if (!this.frameBuffer)
+      return;
+    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 maxVisibleChars = contentWidth - 1;
+    let displayStartIndex = 0;
+    if (this._cursorPosition >= maxVisibleChars) {
+      displayStartIndex = this._cursorPosition - maxVisibleChars + 1;
+    }
+    const visibleText = displayText.substring(displayStartIndex, displayStartIndex + maxVisibleChars);
+    if (visibleText) {
+      this.frameBuffer.drawText(visibleText, contentX, contentY, textColor);
+    }
+    if (this._focused) {
+      this.updateCursorPosition();
+    }
   }
-  getTextChildren() {
-    return this.rootTextNode.getChildren();
+  get value() {
+    return this._value;
   }
-  clear() {
-    this.rootTextNode.clear();
-    const emptyStyledText = stringToStyledText("");
-    this._text = emptyStyledText;
-    this.updateTextBuffer(emptyStyledText);
-    this.updateTextInfo();
-    this.requestRender();
+  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.requestRender();
+      this.updateCursorPosition();
+      this.emit("input" /* INPUT */, this._value);
+    }
   }
-  onLifecyclePass = () => {
-    this.updateTextFromNodes();
-  };
-  onFgChanged(newColor) {
-    this.rootTextNode.fg = newColor;
+  set placeholder(placeholder) {
+    if (this._placeholder !== placeholder) {
+      this._placeholder = placeholder;
+      this.requestRender();
+    }
   }
-  onBgChanged(newColor) {
-    this.rootTextNode.bg = newColor;
+  get cursorPosition() {
+    return this._cursorPosition;
   }
-  onAttributesChanged(newAttributes) {
-    this.rootTextNode.attributes = newAttributes;
+  set cursorPosition(position) {
+    const newPosition = Math.max(0, Math.min(position, this._value.length));
+    if (this._cursorPosition !== newPosition) {
+      this._cursorPosition = newPosition;
+      this.requestRender();
+      this.updateCursorPosition();
+    }
   }
-  destroy() {
-    this.rootTextNode.children.length = 0;
-    super.destroy();
+  insertText(text) {
+    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;
+    this.requestRender();
+    this.updateCursorPosition();
+    this.emit("input" /* INPUT */, this._value);
   }
-}
-// src/renderables/ASCIIFont.ts
-class ASCIIFontRenderable extends FrameBufferRenderable {
-  selectable = true;
-  _text;
-  _font;
-  _fg;
-  _bg;
-  _selectionBg;
-  _selectionFg;
-  lastLocalSelection = null;
-  selectionHelper;
-  constructor(ctx, options) {
-    const font = options.font || "tiny";
-    const text = options.text || "";
-    const measurements = measureText({ text, font });
-    super(ctx, {
-      flexShrink: 0,
-      ...options,
-      width: measurements.width || 1,
-      height: measurements.height || 1,
-      respectAlpha: true
-    });
-    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);
-    this._selectionBg = options.selectionBg ? parseColor(options.selectionBg) : undefined;
-    this._selectionFg = options.selectionFg ? parseColor(options.selectionFg) : undefined;
-    this.selectable = options.selectable ?? true;
-    this.selectionHelper = new ASCIIFontSelectionHelper(() => this._text, () => this._font);
-    this.renderFontToBuffer();
-  }
-  get text() {
-    return this._text;
-  }
-  set text(value) {
-    this._text = value;
-    this.updateDimensions();
-    if (this.lastLocalSelection) {
-      this.selectionHelper.onLocalSelectionChanged(this.lastLocalSelection, this.width, this.height);
+  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--;
+      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.requestRender();
+      this.updateCursorPosition();
+      this.emit("input" /* INPUT */, this._value);
     }
-    this.renderFontToBuffer();
-    this.requestRender();
   }
-  get font() {
-    return this._font;
-  }
-  set font(value) {
-    this._font = value;
-    this.updateDimensions();
-    if (this.lastLocalSelection) {
-      this.selectionHelper.onLocalSelectionChanged(this.lastLocalSelection, this.width, this.height);
+  handleKeyPress(key) {
+    const keyName = typeof key === "string" ? key : key.name;
+    const keySequence = typeof key === "string" ? key : key.sequence;
+    switch (keyName) {
+      case "left":
+        this.cursorPosition = this._cursorPosition - 1;
+        return true;
+      case "right":
+        this.cursorPosition = this._cursorPosition + 1;
+        return true;
+      case "home":
+        this.cursorPosition = 0;
+        return true;
+      case "end":
+        this.cursorPosition = this._value.length;
+        return true;
+      case "backspace":
+        this.deleteCharacter("backward");
+        return true;
+      case "delete":
+        this.deleteCharacter("forward");
+        return true;
+      case "return":
+      case "enter":
+        if (this._value !== this._lastCommittedValue) {
+          this._lastCommittedValue = this._value;
+          this.emit("change" /* CHANGE */, this._value);
+        }
+        this.emit("enter" /* ENTER */, this._value);
+        return true;
+      default:
+        if (keySequence && keySequence.length === 1 && keySequence.charCodeAt(0) >= 32 && keySequence.charCodeAt(0) <= 126) {
+          this.insertText(keySequence);
+          return true;
+        }
+        break;
     }
-    this.renderFontToBuffer();
-    this.requestRender();
-  }
-  get fg() {
-    return this._fg;
+    return false;
   }
-  set fg(value) {
-    if (Array.isArray(value)) {
-      this._fg = value.map((color) => typeof color === "string" ? parseColor(color) : color);
-    } else {
-      this._fg = [typeof value === "string" ? parseColor(value) : value];
+  set maxLength(maxLength) {
+    this._maxLength = maxLength;
+    if (this._value.length > maxLength) {
+      this._value = this._value.substring(0, maxLength);
+      this.requestRender();
     }
-    this.renderFontToBuffer();
-    this.requestRender();
   }
-  get bg() {
-    return this._bg;
+  set backgroundColor(value) {
+    const newColor = parseColor(value ?? this._defaultOptions.backgroundColor);
+    if (this._backgroundColor !== newColor) {
+      this._backgroundColor = newColor;
+      this.requestRender();
+    }
   }
-  set bg(value) {
-    this._bg = typeof value === "string" ? parseColor(value) : value;
-    this.renderFontToBuffer();
-    this.requestRender();
+  set textColor(value) {
+    const newColor = parseColor(value ?? this._defaultOptions.textColor);
+    if (this._textColor !== newColor) {
+      this._textColor = newColor;
+      this.requestRender();
+    }
   }
-  updateDimensions() {
-    const measurements = measureText({ text: this._text, font: this._font });
-    this.width = measurements.width;
-    this.height = measurements.height;
+  set focusedBackgroundColor(value) {
+    const newColor = parseColor(value ?? this._defaultOptions.focusedBackgroundColor);
+    if (this._focusedBackgroundColor !== newColor) {
+      this._focusedBackgroundColor = newColor;
+      this.requestRender();
+    }
   }
-  shouldStartSelection(x, y) {
-    const localX = x - this.x;
-    const localY = y - this.y;
-    return this.selectionHelper.shouldStartSelection(localX, localY, this.width, this.height);
+  set focusedTextColor(value) {
+    const newColor = parseColor(value ?? this._defaultOptions.focusedTextColor);
+    if (this._focusedTextColor !== newColor) {
+      this._focusedTextColor = newColor;
+      this.requestRender();
+    }
   }
-  onSelectionChanged(selection) {
-    const localSelection = convertGlobalToLocalSelection(selection, this.x, this.y);
-    this.lastLocalSelection = localSelection;
-    const changed = this.selectionHelper.onLocalSelectionChanged(localSelection, this.width, this.height);
-    if (changed) {
-      this.renderFontToBuffer();
+  set placeholderColor(value) {
+    const newColor = parseColor(value ?? this._defaultOptions.placeholderColor);
+    if (this._placeholderColor !== newColor) {
+      this._placeholderColor = newColor;
       this.requestRender();
     }
-    return changed;
   }
-  getSelectedText() {
-    const selection = this.selectionHelper.getSelection();
-    if (!selection)
-      return "";
-    return this._text.slice(selection.start, selection.end);
+  set cursorColor(value) {
+    const newColor = parseColor(value ?? this._defaultOptions.cursorColor);
+    if (this._cursorColor !== newColor) {
+      this._cursorColor = newColor;
+      this.requestRender();
+    }
   }
-  hasSelection() {
-    return this.selectionHelper.hasSelection();
+  updateFromLayout() {
+    super.updateFromLayout();
+    this.updateCursorPosition();
   }
   onResize(width, height) {
     super.onResize(width, height);
-    this.renderFontToBuffer();
-  }
-  renderFontToBuffer() {
-    if (this.isDestroyed)
-      return;
-    this.frameBuffer.clear(this._bg);
-    renderFontToFrameBuffer(this.frameBuffer, {
-      text: this._text,
-      x: 0,
-      y: 0,
-      fg: this._fg,
-      bg: this._bg,
-      font: this._font
-    });
-    const selection = this.selectionHelper.getSelection();
-    if (selection && (this._selectionBg || this._selectionFg)) {
-      this.renderSelectionHighlight(selection);
-    }
+    this.updateCursorPosition();
   }
-  renderSelectionHighlight(selection) {
-    if (!this._selectionBg && !this._selectionFg)
-      return;
-    const selectedText = this._text.slice(selection.start, selection.end);
-    if (!selectedText)
-      return;
-    const positions = getCharacterPositions(this._text, this._font);
-    const startX = positions[selection.start] || 0;
-    const endX = selection.end < positions.length ? positions[selection.end] : measureText({ text: this._text, font: this._font }).width;
-    if (this._selectionBg) {
-      this.frameBuffer.fillRect(startX, 0, endX - startX, this.height, this._selectionBg);
-    }
-    if (this._selectionFg || this._selectionBg) {
-      renderFontToFrameBuffer(this.frameBuffer, {
-        text: selectedText,
-        x: startX,
-        y: 0,
-        fg: this._selectionFg ? [this._selectionFg] : this._fg,
-        bg: this._selectionBg || this._bg,
-        font: this._font
-      });
+  onRemove() {
+    if (this._focused) {
+      this._ctx.setCursorPosition(0, 0, false);
     }
   }
 }
-// src/renderables/Input.ts
-var InputRenderableEvents;
-((InputRenderableEvents2) => {
-  InputRenderableEvents2["INPUT"] = "input";
-  InputRenderableEvents2["CHANGE"] = "change";
-  InputRenderableEvents2["ENTER"] = "enter";
-})(InputRenderableEvents ||= {});
+// src/renderables/Slider.ts
+var defaultThumbBackgroundColor = RGBA.fromHex("#9a9ea3");
+var defaultTrackBackgroundColor = RGBA.fromHex("#252527");
 
-class InputRenderable extends Renderable {
-  _focusable = true;
-  _value = "";
-  _cursorPosition = 0;
-  _placeholder;
+class SliderRenderable extends Renderable {
+  orientation;
+  _value;
+  _min;
+  _max;
+  _viewPortSize;
   _backgroundColor;
-  _textColor;
-  _focusedBackgroundColor;
-  _focusedTextColor;
-  _placeholderColor;
-  _cursorColor;
-  _maxLength;
-  _lastCommittedValue = "";
-  _defaultOptions = {
-    backgroundColor: "transparent",
-    textColor: "#FFFFFF",
-    focusedBackgroundColor: "#1a1a1a",
-    focusedTextColor: "#FFFFFF",
-    placeholder: "",
-    placeholderColor: "#666666",
-    cursorColor: "#FFFFFF",
-    maxLength: 1000,
-    value: ""
-  };
+  _foregroundColor;
+  _onChange;
   constructor(ctx, options) {
-    super(ctx, { ...options, buffered: true });
-    this._backgroundColor = parseColor(options.backgroundColor || this._defaultOptions.backgroundColor);
-    this._textColor = parseColor(options.textColor || this._defaultOptions.textColor);
-    this._focusedBackgroundColor = parseColor(options.focusedBackgroundColor || options.backgroundColor || this._defaultOptions.focusedBackgroundColor);
-    this._focusedTextColor = parseColor(options.focusedTextColor || options.textColor || this._defaultOptions.focusedTextColor);
-    this._placeholder = options.placeholder || this._defaultOptions.placeholder;
-    this._value = options.value || this._defaultOptions.value;
-    this._lastCommittedValue = this._value;
-    this._cursorPosition = this._value.length;
-    this._maxLength = options.maxLength || this._defaultOptions.maxLength;
-    this._placeholderColor = parseColor(options.placeholderColor || this._defaultOptions.placeholderColor);
-    this._cursorColor = parseColor(options.cursorColor || this._defaultOptions.cursorColor);
-  }
-  updateCursorPosition() {
-    if (!this._focused)
-      return;
-    const contentX = 0;
-    const contentY = 0;
-    const contentWidth = this.width;
-    const maxVisibleChars = contentWidth - 1;
-    let displayStartIndex = 0;
-    if (this._cursorPosition >= maxVisibleChars) {
-      displayStartIndex = this._cursorPosition - maxVisibleChars + 1;
-    }
-    const cursorDisplayX = this._cursorPosition - displayStartIndex;
-    if (cursorDisplayX >= 0 && cursorDisplayX < contentWidth) {
-      const absoluteCursorX = this.x + contentX + cursorDisplayX + 1;
-      const absoluteCursorY = this.y + contentY + 1;
-      this._ctx.setCursorPosition(absoluteCursorX, absoluteCursorY, true);
-      this._ctx.setCursorColor(this._cursorColor);
-    }
-  }
-  focus() {
-    super.focus();
-    this._ctx.setCursorStyle("block", true);
-    this._ctx.setCursorColor(this._cursorColor);
-    this.updateCursorPosition();
-  }
-  blur() {
-    super.blur();
-    this._ctx.setCursorPosition(0, 0, false);
-    if (this._value !== this._lastCommittedValue) {
-      this._lastCommittedValue = this._value;
-      this.emit("change" /* CHANGE */, this._value);
-    }
-  }
-  renderSelf(buffer, deltaTime) {
-    if (!this.visible || !this.frameBuffer)
-      return;
-    if (this.isDirty) {
-      this.refreshFrameBuffer();
-    }
-  }
-  refreshFrameBuffer() {
-    if (!this.frameBuffer)
-      return;
-    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 maxVisibleChars = contentWidth - 1;
-    let displayStartIndex = 0;
-    if (this._cursorPosition >= maxVisibleChars) {
-      displayStartIndex = this._cursorPosition - maxVisibleChars + 1;
-    }
-    const visibleText = displayText.substring(displayStartIndex, displayStartIndex + maxVisibleChars);
-    if (visibleText) {
-      this.frameBuffer.drawText(visibleText, contentX, contentY, textColor);
-    }
-    if (this._focused) {
-      this.updateCursorPosition();
-    }
+    super(ctx, { flexShrink: 0, ...options });
+    this.orientation = options.orientation;
+    this._min = options.min ?? 0;
+    this._max = options.max ?? 100;
+    this._value = options.value ?? this._min;
+    this._viewPortSize = options.viewPortSize ?? Math.max(1, (this._max - this._min) * 0.1);
+    this._onChange = options.onChange;
+    this._backgroundColor = options.backgroundColor ? parseColor(options.backgroundColor) : defaultTrackBackgroundColor;
+    this._foregroundColor = options.foregroundColor ? parseColor(options.foregroundColor) : defaultThumbBackgroundColor;
+    this.setupMouseHandling();
   }
   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);
+  set value(newValue) {
+    const clamped = Math.max(this._min, Math.min(this._max, newValue));
+    if (clamped !== this._value) {
+      this._value = clamped;
+      this._onChange?.(clamped);
+      this.emit("change", { value: clamped });
       this.requestRender();
-      this.updateCursorPosition();
-      this.emit("input" /* INPUT */, this._value);
     }
   }
-  set placeholder(placeholder) {
-    if (this._placeholder !== placeholder) {
-      this._placeholder = placeholder;
+  get min() {
+    return this._min;
+  }
+  set min(newMin) {
+    if (newMin !== this._min) {
+      this._min = newMin;
+      if (this._value < newMin) {
+        this.value = newMin;
+      }
       this.requestRender();
     }
   }
-  get cursorPosition() {
-    return this._cursorPosition;
+  get max() {
+    return this._max;
   }
-  set cursorPosition(position) {
-    const newPosition = Math.max(0, Math.min(position, this._value.length));
-    if (this._cursorPosition !== newPosition) {
-      this._cursorPosition = newPosition;
+  set max(newMax) {
+    if (newMax !== this._max) {
+      this._max = newMax;
+      if (this._value > newMax) {
+        this.value = newMax;
+      }
       this.requestRender();
-      this.updateCursorPosition();
-    }
-  }
-  insertText(text) {
-    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;
-    this.requestRender();
-    this.updateCursorPosition();
-    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--;
-      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;
+  set viewPortSize(size) {
+    const clampedSize = Math.max(0.01, Math.min(size, this._max - this._min));
+    if (clampedSize !== this._viewPortSize) {
+      this._viewPortSize = clampedSize;
       this.requestRender();
-      this.updateCursorPosition();
-      this.emit("input" /* INPUT */, this._value);
     }
   }
-  handleKeyPress(key) {
-    const keyName = typeof key === "string" ? key : key.name;
-    const keySequence = typeof key === "string" ? key : key.sequence;
-    switch (keyName) {
-      case "left":
-        this.cursorPosition = this._cursorPosition - 1;
-        return true;
-      case "right":
-        this.cursorPosition = this._cursorPosition + 1;
-        return true;
-      case "home":
-        this.cursorPosition = 0;
-        return true;
-      case "end":
-        this.cursorPosition = this._value.length;
-        return true;
-      case "backspace":
-        this.deleteCharacter("backward");
-        return true;
-      case "delete":
-        this.deleteCharacter("forward");
-        return true;
-      case "return":
-      case "enter":
-        if (this._value !== this._lastCommittedValue) {
-          this._lastCommittedValue = this._value;
-          this.emit("change" /* CHANGE */, this._value);
-        }
-        this.emit("enter" /* ENTER */, this._value);
-        return true;
-      default:
-        if (keySequence && keySequence.length === 1 && keySequence.charCodeAt(0) >= 32 && keySequence.charCodeAt(0) <= 126) {
-          this.insertText(keySequence);
-          return true;
-        }
-        break;
-    }
-    return false;
+  get viewPortSize() {
+    return this._viewPortSize;
   }
-  set maxLength(maxLength) {
-    this._maxLength = maxLength;
-    if (this._value.length > maxLength) {
-      this._value = this._value.substring(0, maxLength);
-      this.requestRender();
-    }
+  get backgroundColor() {
+    return this._backgroundColor;
   }
   set backgroundColor(value) {
-    const newColor = parseColor(value ?? this._defaultOptions.backgroundColor);
-    if (this._backgroundColor !== newColor) {
-      this._backgroundColor = newColor;
-      this.requestRender();
-    }
+    this._backgroundColor = parseColor(value);
+    this.requestRender();
   }
-  set textColor(value) {
-    const newColor = parseColor(value ?? this._defaultOptions.textColor);
-    if (this._textColor !== newColor) {
-      this._textColor = newColor;
-      this.requestRender();
-    }
+  get foregroundColor() {
+    return this._foregroundColor;
   }
-  set focusedBackgroundColor(value) {
-    const newColor = parseColor(value ?? this._defaultOptions.focusedBackgroundColor);
-    if (this._focusedBackgroundColor !== newColor) {
-      this._focusedBackgroundColor = newColor;
-      this.requestRender();
-    }
+  set foregroundColor(value) {
+    this._foregroundColor = parseColor(value);
+    this.requestRender();
   }
-  set focusedTextColor(value) {
-    const newColor = parseColor(value ?? this._defaultOptions.focusedTextColor);
-    if (this._focusedTextColor !== newColor) {
-      this._focusedTextColor = newColor;
-      this.requestRender();
-    }
+  calculateDragOffsetVirtual(event) {
+    const trackStart = this.orientation === "vertical" ? this.y : this.x;
+    const mousePos = (this.orientation === "vertical" ? event.y : event.x) - trackStart;
+    const virtualMousePos = Math.max(0, Math.min((this.orientation === "vertical" ? this.height : this.width) * 2, mousePos * 2));
+    const virtualThumbStart = this.getVirtualThumbStart();
+    const virtualThumbSize = this.getVirtualThumbSize();
+    return Math.max(0, Math.min(virtualThumbSize, virtualMousePos - virtualThumbStart));
   }
-  set placeholderColor(value) {
-    const newColor = parseColor(value ?? this._defaultOptions.placeholderColor);
-    if (this._placeholderColor !== newColor) {
-      this._placeholderColor = newColor;
-      this.requestRender();
-    }
-  }
-  set cursorColor(value) {
-    const newColor = parseColor(value ?? this._defaultOptions.cursorColor);
-    if (this._cursorColor !== newColor) {
-      this._cursorColor = newColor;
-      this.requestRender();
-    }
+  setupMouseHandling() {
+    let isDragging = false;
+    let dragOffsetVirtual = 0;
+    this.onMouseDown = (event) => {
+      event.stopPropagation();
+      event.preventDefault();
+      const thumb = this.getThumbRect();
+      const inThumb = event.x >= thumb.x && event.x < thumb.x + thumb.width && event.y >= thumb.y && event.y < thumb.y + thumb.height;
+      if (inThumb) {
+        isDragging = true;
+        dragOffsetVirtual = this.calculateDragOffsetVirtual(event);
+      } else {
+        this.updateValueFromMouseDirect(event);
+        isDragging = true;
+        dragOffsetVirtual = this.calculateDragOffsetVirtual(event);
+      }
+    };
+    this.onMouseDrag = (event) => {
+      if (!isDragging)
+        return;
+      event.stopPropagation();
+      this.updateValueFromMouseWithOffset(event, dragOffsetVirtual);
+    };
+    this.onMouseUp = (event) => {
+      if (isDragging) {
+        this.updateValueFromMouseWithOffset(event, dragOffsetVirtual);
+      }
+      isDragging = false;
+    };
   }
-  updateFromLayout() {
-    super.updateFromLayout();
-    this.updateCursorPosition();
+  updateValueFromMouseDirect(event) {
+    const trackStart = this.orientation === "vertical" ? this.y : this.x;
+    const trackSize = this.orientation === "vertical" ? this.height : this.width;
+    const mousePos = this.orientation === "vertical" ? event.y : event.x;
+    const relativeMousePos = mousePos - trackStart;
+    const clampedMousePos = Math.max(0, Math.min(trackSize, relativeMousePos));
+    const ratio = trackSize === 0 ? 0 : clampedMousePos / trackSize;
+    const range = this._max - this._min;
+    const newValue = this._min + ratio * range;
+    this.value = newValue;
   }
-  onResize(width, height) {
-    super.onResize(width, height);
-    this.updateCursorPosition();
+  updateValueFromMouseWithOffset(event, offsetVirtual) {
+    const trackStart = this.orientation === "vertical" ? this.y : this.x;
+    const trackSize = this.orientation === "vertical" ? this.height : this.width;
+    const mousePos = this.orientation === "vertical" ? event.y : event.x;
+    const virtualTrackSize = trackSize * 2;
+    const relativeMousePos = mousePos - trackStart;
+    const clampedMousePos = Math.max(0, Math.min(trackSize, relativeMousePos));
+    const virtualMousePos = clampedMousePos * 2;
+    const virtualThumbSize = this.getVirtualThumbSize();
+    const maxThumbStart = Math.max(0, virtualTrackSize - virtualThumbSize);
+    let desiredThumbStart = virtualMousePos - offsetVirtual;
+    desiredThumbStart = Math.max(0, Math.min(maxThumbStart, desiredThumbStart));
+    const ratio = maxThumbStart === 0 ? 0 : desiredThumbStart / maxThumbStart;
+    const range = this._max - this._min;
+    const newValue = this._min + ratio * range;
+    this.value = newValue;
   }
-  onRemove() {
-    if (this._focused) {
-      this._ctx.setCursorPosition(0, 0, false);
+  getThumbRect() {
+    const virtualThumbSize = this.getVirtualThumbSize();
+    const virtualThumbStart = this.getVirtualThumbStart();
+    const realThumbStart = Math.floor(virtualThumbStart / 2);
+    const realThumbSize = Math.ceil((virtualThumbStart + virtualThumbSize) / 2) - realThumbStart;
+    if (this.orientation === "vertical") {
+      return {
+        x: this.x,
+        y: this.y + realThumbStart,
+        width: this.width,
+        height: Math.max(1, realThumbSize)
+      };
+    } else {
+      return {
+        x: this.x + realThumbStart,
+        y: this.y,
+        width: Math.max(1, realThumbSize),
+        height: this.height
+      };
     }
   }
-}
-// src/renderables/Select.ts
-var SelectRenderableEvents;
-((SelectRenderableEvents2) => {
-  SelectRenderableEvents2["SELECTION_CHANGED"] = "selectionChanged";
-  SelectRenderableEvents2["ITEM_SELECTED"] = "itemSelected";
-})(SelectRenderableEvents ||= {});
-
-class SelectRenderable extends Renderable {
-  _focusable = true;
-  _options = [];
-  selectedIndex = 0;
-  scrollOffset = 0;
-  maxVisibleItems;
-  _backgroundColor;
-  _textColor;
-  _focusedBackgroundColor;
-  _focusedTextColor;
-  _selectedBackgroundColor;
-  _selectedTextColor;
-  _descriptionColor;
-  _selectedDescriptionColor;
-  _showScrollIndicator;
-  _wrapSelection;
-  _showDescription;
-  _font;
-  _itemSpacing;
-  linesPerItem;
-  fontHeight;
-  _fastScrollStep;
-  _defaultOptions = {
-    backgroundColor: "transparent",
-    textColor: "#FFFFFF",
-    focusedBackgroundColor: "#1a1a1a",
-    focusedTextColor: "#FFFFFF",
-    selectedBackgroundColor: "#334455",
-    selectedTextColor: "#FFFF00",
-    descriptionColor: "#888888",
-    selectedDescriptionColor: "#CCCCCC",
-    showScrollIndicator: false,
-    wrapSelection: false,
-    showDescription: true,
-    itemSpacing: 0,
-    fastScrollStep: 5
-  };
-  constructor(ctx, options) {
-    super(ctx, { ...options, buffered: true });
-    this._backgroundColor = parseColor(options.backgroundColor || this._defaultOptions.backgroundColor);
-    this._textColor = parseColor(options.textColor || this._defaultOptions.textColor);
-    this._focusedBackgroundColor = parseColor(options.focusedBackgroundColor || this._defaultOptions.focusedBackgroundColor);
-    this._focusedTextColor = parseColor(options.focusedTextColor || this._defaultOptions.focusedTextColor);
-    this._options = options.options || [];
-    this._showScrollIndicator = options.showScrollIndicator ?? this._defaultOptions.showScrollIndicator;
-    this._wrapSelection = options.wrapSelection ?? this._defaultOptions.wrapSelection;
-    this._showDescription = options.showDescription ?? this._defaultOptions.showDescription;
-    this._font = options.font;
-    this._itemSpacing = options.itemSpacing || this._defaultOptions.itemSpacing;
-    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 || this._defaultOptions.selectedBackgroundColor);
-    this._selectedTextColor = parseColor(options.selectedTextColor || this._defaultOptions.selectedTextColor);
-    this._descriptionColor = parseColor(options.descriptionColor || this._defaultOptions.descriptionColor);
-    this._selectedDescriptionColor = parseColor(options.selectedDescriptionColor || this._defaultOptions.selectedDescriptionColor);
-    this._fastScrollStep = options.fastScrollStep || this._defaultOptions.fastScrollStep;
-    this.requestRender();
-  }
-  renderSelf(buffer, deltaTime) {
-    if (!this.visible || !this.frameBuffer)
-      return;
-    if (this.isDirty) {
-      this.refreshFrameBuffer();
+  renderSelf(buffer) {
+    if (this.orientation === "horizontal") {
+      this.renderHorizontal(buffer);
+    } else {
+      this.renderVertical(buffer);
     }
   }
-  refreshFrameBuffer() {
-    if (!this.frameBuffer || this._options.length === 0)
-      return;
-    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);
-    for (let i = 0;i < visibleOptions.length; i++) {
-      const actualIndex = this.scrollOffset + i;
-      const option = visibleOptions[i];
-      const isSelected = actualIndex === this.selectedIndex;
-      const itemY = contentY + i * this.linesPerItem;
-      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 nameContent = `${isSelected ? "\u25B6 " : "  "}${option.name}`;
-      const baseTextColor = this._focused ? this._focusedTextColor : this._textColor;
-      const nameColor = isSelected ? this._selectedTextColor : baseTextColor;
-      let descX = contentX + 3;
-      if (this._font) {
-        const indicator = isSelected ? "\u25B6 " : "  ";
-        this.frameBuffer.drawText(indicator, contentX + 1, itemY, nameColor);
-        const indicatorWidth = 2;
-        renderFontToFrameBuffer(this.frameBuffer, {
-          text: option.name,
-          x: contentX + 1 + indicatorWidth,
-          y: itemY,
-          fg: nameColor,
-          bg: isSelected ? this._selectedBackgroundColor : bgColor,
-          font: this._font
-        });
-        descX = contentX + 1 + indicatorWidth;
+  renderHorizontal(buffer) {
+    const virtualThumbSize = this.getVirtualThumbSize();
+    const virtualThumbStart = this.getVirtualThumbStart();
+    const virtualThumbEnd = virtualThumbStart + virtualThumbSize;
+    buffer.fillRect(this.x, this.y, this.width, this.height, this._backgroundColor);
+    const realStartCell = Math.floor(virtualThumbStart / 2);
+    const realEndCell = Math.ceil(virtualThumbEnd / 2) - 1;
+    const startX = Math.max(0, realStartCell);
+    const endX = Math.min(this.width - 1, realEndCell);
+    for (let realX = startX;realX <= endX; realX++) {
+      const virtualCellStart = realX * 2;
+      const virtualCellEnd = virtualCellStart + 2;
+      const thumbStartInCell = Math.max(virtualThumbStart, virtualCellStart);
+      const thumbEndInCell = Math.min(virtualThumbEnd, virtualCellEnd);
+      const coverage = thumbEndInCell - thumbStartInCell;
+      let char = " ";
+      if (coverage >= 2) {
+        char = "\u2588";
       } else {
-        this.frameBuffer.drawText(nameContent, contentX + 1, itemY, nameColor);
+        const isLeftHalf = thumbStartInCell === virtualCellStart;
+        if (isLeftHalf) {
+          char = "\u258C";
+        } else {
+          char = "\u2590";
+        }
       }
-      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);
+      for (let y = 0;y < this.height; y++) {
+        buffer.setCellWithAlphaBlending(this.x + realX, this.y + y, char, this._foregroundColor, this._backgroundColor);
       }
     }
-    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 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"));
   }
-  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.requestRender();
-  }
-  getSelectedOption() {
-    return this._options[this.selectedIndex] || null;
-  }
-  getSelectedIndex() {
-    return this.selectedIndex;
-  }
-  moveUp(steps = 1) {
-    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 {
-      this.selectedIndex = 0;
-    }
-    this.updateScrollOffset();
-    this.requestRender();
-    this.emit("selectionChanged" /* SELECTION_CHANGED */, this.selectedIndex, this.getSelectedOption());
-  }
-  moveDown(steps = 1) {
-    const newIndex = this.selectedIndex + steps;
-    if (newIndex < this._options.length) {
-      this.selectedIndex = newIndex;
-    } else if (this._wrapSelection && this._options.length > 0) {
-      this.selectedIndex = 0;
-    } else {
-      this.selectedIndex = this._options.length - 1;
-    }
-    this.updateScrollOffset();
-    this.requestRender();
-    this.emit("selectionChanged" /* SELECTION_CHANGED */, this.selectedIndex, this.getSelectedOption());
-  }
-  selectCurrent() {
-    const selected = this.getSelectedOption();
-    if (selected) {
-      this.emit("itemSelected" /* ITEM_SELECTED */, this.selectedIndex, selected);
-    }
-  }
-  setSelectedIndex(index) {
-    if (index >= 0 && index < this._options.length) {
-      this.selectedIndex = index;
-      this.updateScrollOffset();
-      this.requestRender();
-      this.emit("selectionChanged" /* SELECTION_CHANGED */, this.selectedIndex, this.getSelectedOption());
-    }
-  }
-  updateScrollOffset() {
-    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));
-    if (newScrollOffset !== this.scrollOffset) {
-      this.scrollOffset = newScrollOffset;
-      this.requestRender();
-    }
-  }
-  onResize(width, height) {
-    this.maxVisibleItems = Math.max(1, Math.floor(height / this.linesPerItem));
-    this.updateScrollOffset();
-    this.requestRender();
-  }
-  handleKeyPress(key) {
-    const keyName = typeof key === "string" ? key : key.name;
-    const isShift = typeof key !== "string" && key.shift;
-    switch (keyName) {
-      case "up":
-      case "k":
-        this.moveUp(isShift ? this._fastScrollStep : 1);
-        return true;
-      case "down":
-      case "j":
-        this.moveDown(isShift ? this._fastScrollStep : 1);
-        return true;
-      case "return":
-      case "enter":
-        this.selectCurrent();
-        return true;
+  renderVertical(buffer) {
+    const virtualThumbSize = this.getVirtualThumbSize();
+    const virtualThumbStart = this.getVirtualThumbStart();
+    const virtualThumbEnd = virtualThumbStart + virtualThumbSize;
+    buffer.fillRect(this.x, this.y, this.width, this.height, this._backgroundColor);
+    const realStartCell = Math.floor(virtualThumbStart / 2);
+    const realEndCell = Math.ceil(virtualThumbEnd / 2) - 1;
+    const startY = Math.max(0, realStartCell);
+    const endY = Math.min(this.height - 1, realEndCell);
+    for (let realY = startY;realY <= endY; realY++) {
+      const virtualCellStart = realY * 2;
+      const virtualCellEnd = virtualCellStart + 2;
+      const thumbStartInCell = Math.max(virtualThumbStart, virtualCellStart);
+      const thumbEndInCell = Math.min(virtualThumbEnd, virtualCellEnd);
+      const coverage = thumbEndInCell - thumbStartInCell;
+      let char = " ";
+      if (coverage >= 2) {
+        char = "\u2588";
+      } else if (coverage > 0) {
+        const virtualPositionInCell = thumbStartInCell - virtualCellStart;
+        if (virtualPositionInCell === 0) {
+          char = "\u2580";
+        } else {
+          char = "\u2584";
+        }
+      }
+      for (let x = 0;x < this.width; x++) {
+        buffer.setCellWithAlphaBlending(this.x + x, this.y + realY, char, this._foregroundColor, this._backgroundColor);
+      }
     }
-    return false;
   }
-  get showScrollIndicator() {
-    return this._showScrollIndicator;
+  getVirtualThumbSize() {
+    const virtualTrackSize = this.orientation === "vertical" ? this.height * 2 : this.width * 2;
+    const range = this._max - this._min;
+    if (range === 0)
+      return virtualTrackSize;
+    const viewportSize = Math.max(1, this._viewPortSize);
+    const contentSize = range + viewportSize;
+    if (contentSize <= viewportSize)
+      return virtualTrackSize;
+    const thumbRatio = viewportSize / contentSize;
+    const calculatedSize = Math.floor(virtualTrackSize * thumbRatio);
+    return Math.max(1, Math.min(calculatedSize, virtualTrackSize));
   }
-  set showScrollIndicator(show) {
-    this._showScrollIndicator = show;
-    this.requestRender();
+  getVirtualThumbStart() {
+    const virtualTrackSize = this.orientation === "vertical" ? this.height * 2 : this.width * 2;
+    const range = this._max - this._min;
+    if (range === 0)
+      return 0;
+    const valueRatio = (this._value - this._min) / range;
+    const virtualThumbSize = this.getVirtualThumbSize();
+    return Math.round(valueRatio * (virtualTrackSize - virtualThumbSize));
   }
-  get showDescription() {
-    return this._showDescription;
+}
+
+// src/renderables/ScrollBar.ts
+class ScrollBarRenderable extends Renderable {
+  slider;
+  startArrow;
+  endArrow;
+  orientation;
+  _focusable = true;
+  _scrollSize = 0;
+  _scrollPosition = 0;
+  _viewportSize = 0;
+  _showArrows = false;
+  _manualVisibility = false;
+  _onChange;
+  scrollStep = null;
+  get visible() {
+    return super.visible;
   }
-  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.requestRender();
-    }
+  set visible(value) {
+    this._manualVisibility = true;
+    super.visible = value;
   }
-  get wrapSelection() {
-    return this._wrapSelection;
+  resetVisibilityControl() {
+    this._manualVisibility = false;
+    this.recalculateVisibility();
   }
-  set wrapSelection(wrap) {
-    this._wrapSelection = wrap;
+  get scrollSize() {
+    return this._scrollSize;
   }
-  set backgroundColor(value) {
-    const newColor = parseColor(value ?? this._defaultOptions.backgroundColor);
-    if (this._backgroundColor !== newColor) {
-      this._backgroundColor = newColor;
-      this.requestRender();
-    }
+  get scrollPosition() {
+    return this._scrollPosition;
   }
-  set textColor(value) {
-    const newColor = parseColor(value ?? this._defaultOptions.textColor);
-    if (this._textColor !== newColor) {
-      this._textColor = newColor;
-      this.requestRender();
-    }
+  get viewportSize() {
+    return this._viewportSize;
   }
-  set focusedBackgroundColor(value) {
-    const newColor = parseColor(value ?? this._defaultOptions.focusedBackgroundColor);
-    if (this._focusedBackgroundColor !== newColor) {
-      this._focusedBackgroundColor = newColor;
-      this.requestRender();
-    }
+  set scrollSize(value) {
+    if (value === this.scrollSize)
+      return;
+    this._scrollSize = value;
+    this.recalculateVisibility();
+    this.updateSliderFromScrollState();
+    this.scrollPosition = this.scrollPosition;
   }
-  set focusedTextColor(value) {
-    const newColor = parseColor(value ?? this._defaultOptions.focusedTextColor);
-    if (this._focusedTextColor !== newColor) {
-      this._focusedTextColor = newColor;
-      this.requestRender();
+  set scrollPosition(value) {
+    const newPosition = Math.round(Math.min(Math.max(0, value), this.scrollSize - this.viewportSize));
+    if (newPosition !== this._scrollPosition) {
+      this._scrollPosition = newPosition;
+      this.updateSliderFromScrollState();
     }
   }
-  set selectedBackgroundColor(value) {
-    const newColor = parseColor(value ?? this._defaultOptions.selectedBackgroundColor);
-    if (this._selectedBackgroundColor !== newColor) {
-      this._selectedBackgroundColor = newColor;
-      this.requestRender();
-    }
+  set viewportSize(value) {
+    if (value === this.viewportSize)
+      return;
+    this._viewportSize = value;
+    this.slider.viewPortSize = Math.max(1, this._viewportSize);
+    this.recalculateVisibility();
+    this.updateSliderFromScrollState();
+    this.scrollPosition = this.scrollPosition;
   }
-  set selectedTextColor(value) {
-    const newColor = parseColor(value ?? this._defaultOptions.selectedTextColor);
-    if (this._selectedTextColor !== newColor) {
-      this._selectedTextColor = newColor;
-      this.requestRender();
-    }
+  get showArrows() {
+    return this._showArrows;
   }
-  set descriptionColor(value) {
-    const newColor = parseColor(value ?? this._defaultOptions.descriptionColor);
-    if (this._descriptionColor !== newColor) {
-      this._descriptionColor = newColor;
-      this.requestRender();
-    }
+  set showArrows(value) {
+    if (value === this._showArrows)
+      return;
+    this._showArrows = value;
+    this.startArrow.visible = value;
+    this.endArrow.visible = value;
   }
-  set selectedDescriptionColor(value) {
-    const newColor = parseColor(value ?? this._defaultOptions.selectedDescriptionColor);
-    if (this._selectedDescriptionColor !== newColor) {
-      this._selectedDescriptionColor = newColor;
-      this.requestRender();
-    }
+  constructor(ctx, { trackOptions, arrowOptions, orientation, showArrows = false, ...options }) {
+    super(ctx, {
+      flexDirection: orientation === "vertical" ? "column" : "row",
+      alignSelf: "stretch",
+      alignItems: "stretch",
+      ...options
+    });
+    this._onChange = options.onChange;
+    this.orientation = orientation;
+    this._showArrows = showArrows;
+    const scrollRange = Math.max(0, this._scrollSize - this._viewportSize);
+    const defaultStepSize = Math.max(1, this._viewportSize);
+    const stepSize = trackOptions?.viewPortSize ?? defaultStepSize;
+    this.slider = new SliderRenderable(ctx, {
+      orientation,
+      min: 0,
+      max: scrollRange,
+      value: this._scrollPosition,
+      viewPortSize: stepSize,
+      onChange: (value) => {
+        this._scrollPosition = Math.round(value);
+        this._onChange?.(this._scrollPosition);
+        this.emit("change", { position: this._scrollPosition });
+      },
+      ...orientation === "vertical" ? {
+        width: Math.max(1, Math.min(2, this.width)),
+        height: "100%",
+        marginLeft: "auto"
+      } : {
+        width: "100%",
+        height: 1,
+        marginTop: "auto"
+      },
+      flexGrow: 1,
+      flexShrink: 1,
+      ...trackOptions
+    });
+    this.updateSliderFromScrollState();
+    const arrowOpts = arrowOptions ? {
+      foregroundColor: arrowOptions.backgroundColor,
+      backgroundColor: arrowOptions.backgroundColor,
+      attributes: arrowOptions.attributes,
+      ...arrowOptions
+    } : {};
+    this.startArrow = new ArrowRenderable(ctx, {
+      alignSelf: "center",
+      visible: this.showArrows,
+      direction: this.orientation === "vertical" ? "up" : "left",
+      height: this.orientation === "vertical" ? 1 : 1,
+      ...arrowOpts
+    });
+    this.endArrow = new ArrowRenderable(ctx, {
+      alignSelf: "center",
+      visible: this.showArrows,
+      direction: this.orientation === "vertical" ? "down" : "right",
+      height: this.orientation === "vertical" ? 1 : 1,
+      ...arrowOpts
+    });
+    this.add(this.startArrow);
+    this.add(this.slider);
+    this.add(this.endArrow);
+    let startArrowMouseTimeout = undefined;
+    let endArrowMouseTimeout = undefined;
+    this.startArrow.onMouseDown = (event) => {
+      event.stopPropagation();
+      event.preventDefault();
+      this.scrollBy(-0.5, "viewport");
+      startArrowMouseTimeout = setTimeout(() => {
+        this.scrollBy(-0.5, "viewport");
+        startArrowMouseTimeout = setInterval(() => {
+          this.scrollBy(-0.2, "viewport");
+        }, 200);
+      }, 500);
+    };
+    this.startArrow.onMouseUp = (event) => {
+      event.stopPropagation();
+      clearInterval(startArrowMouseTimeout);
+    };
+    this.endArrow.onMouseDown = (event) => {
+      event.stopPropagation();
+      event.preventDefault();
+      this.scrollBy(0.5, "viewport");
+      endArrowMouseTimeout = setTimeout(() => {
+        this.scrollBy(0.5, "viewport");
+        endArrowMouseTimeout = setInterval(() => {
+          this.scrollBy(0.2, "viewport");
+        }, 200);
+      }, 500);
+    };
+    this.endArrow.onMouseUp = (event) => {
+      event.stopPropagation();
+      clearInterval(endArrowMouseTimeout);
+    };
   }
-  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();
+  set arrowOptions(options) {
+    Object.assign(this.startArrow, options);
+    Object.assign(this.endArrow, options);
     this.requestRender();
   }
-  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();
+  set trackOptions(options) {
+    Object.assign(this.slider, options);
     this.requestRender();
   }
-  set fastScrollStep(step) {
-    this._fastScrollStep = step;
+  updateSliderFromScrollState() {
+    const scrollRange = Math.max(0, this._scrollSize - this._viewportSize);
+    this.slider.min = 0;
+    this.slider.max = scrollRange;
+    this.slider.value = Math.min(this._scrollPosition, scrollRange);
   }
-}
-// src/renderables/TabSelect.ts
-var TabSelectRenderableEvents;
-((TabSelectRenderableEvents2) => {
-  TabSelectRenderableEvents2["SELECTION_CHANGED"] = "selectionChanged";
-  TabSelectRenderableEvents2["ITEM_SELECTED"] = "itemSelected";
-})(TabSelectRenderableEvents ||= {});
-function calculateDynamicHeight(showUnderline, showDescription) {
-  let height = 1;
-  if (showUnderline) {
-    height += 1;
+  scrollBy(delta, unit = "absolute") {
+    const multiplier = unit === "viewport" ? this.viewportSize : unit === "content" ? this.scrollSize : unit === "step" ? this.scrollStep ?? 1 : 1;
+    const resolvedDelta = multiplier * delta;
+    this.scrollPosition += resolvedDelta;
   }
-  if (showDescription) {
-    height += 1;
+  recalculateVisibility() {
+    if (!this._manualVisibility) {
+      const sizeRatio = this.scrollSize <= this.viewportSize ? 1 : this.viewportSize / this.scrollSize;
+      super.visible = sizeRatio < 1;
+    }
+  }
+  handleKeyPress(key) {
+    const keyName = typeof key === "string" ? key : key.name;
+    switch (keyName) {
+      case "left":
+      case "h":
+        if (this.orientation !== "horizontal")
+          return false;
+        this.scrollBy(-1 / 5, "viewport");
+        return true;
+      case "right":
+      case "l":
+        if (this.orientation !== "horizontal")
+          return false;
+        this.scrollBy(1 / 5, "viewport");
+        return true;
+      case "up":
+      case "k":
+        if (this.orientation !== "vertical")
+          return false;
+        this.scrollBy(-1 / 5, "viewport");
+        return true;
+      case "down":
+      case "j":
+        if (this.orientation !== "vertical")
+          return false;
+        this.scrollBy(1 / 5, "viewport");
+        return true;
+      case "pageup":
+        this.scrollBy(-1 / 2, "viewport");
+        return true;
+      case "pagedown":
+        this.scrollBy(1 / 2, "viewport");
+        return true;
+      case "home":
+        this.scrollBy(-1, "content");
+        return true;
+      case "end":
+        this.scrollBy(1, "content");
+        return true;
+    }
+    return false;
   }
-  return height;
 }
 
-class TabSelectRenderable extends Renderable {
-  _focusable = true;
-  _options = [];
-  selectedIndex = 0;
-  scrollOffset = 0;
-  _tabWidth;
-  maxVisibleTabs;
+class ArrowRenderable extends Renderable {
+  _direction;
+  _foregroundColor;
   _backgroundColor;
-  _textColor;
-  _focusedBackgroundColor;
-  _focusedTextColor;
-  _selectedBackgroundColor;
-  _selectedTextColor;
-  _selectedDescriptionColor;
-  _showScrollArrows;
-  _showDescription;
-  _showUnderline;
-  _wrapSelection;
+  _attributes;
+  _arrowChars;
   constructor(ctx, options) {
-    const calculatedHeight = calculateDynamicHeight(options.showUnderline ?? true, options.showDescription ?? true);
-    super(ctx, { ...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");
+    super(ctx, options);
+    this._direction = options.direction;
+    this._foregroundColor = options.foregroundColor ? parseColor(options.foregroundColor) : RGBA.fromValues(1, 1, 1, 1);
+    this._backgroundColor = options.backgroundColor ? parseColor(options.backgroundColor) : RGBA.fromValues(0, 0, 0, 0);
+    this._attributes = options.attributes ?? 0;
+    this._arrowChars = {
+      up: "\u25B2",
+      down: "\u25BC",
+      left: "\u25C0",
+      right: "\u25B6",
+      ...options.arrowChars
+    };
+    if (!options.width) {
+      this.width = Bun.stringWidth(this.getArrowChar());
+    }
   }
-  calculateDynamicHeight() {
-    return calculateDynamicHeight(this._showUnderline, this._showDescription);
+  get direction() {
+    return this._direction;
   }
-  renderSelf(buffer, deltaTime) {
-    if (!this.visible || !this.frameBuffer)
-      return;
-    if (this.isDirty) {
-      this.refreshFrameBuffer();
+  set direction(value) {
+    if (this._direction !== value) {
+      this._direction = value;
+      this.requestRender();
     }
   }
-  refreshFrameBuffer() {
-    if (!this.frameBuffer || this._options.length === 0)
-      return;
-    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);
-    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;
-      if (tabX >= contentX + contentWidth)
-        break;
-      const actualTabWidth = Math.min(this._tabWidth, contentWidth - i * this._tabWidth);
-      if (isSelected) {
-        this.frameBuffer.fillRect(tabX, contentY, actualTabWidth, 1, this._selectedBackgroundColor);
-      }
-      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) {
-        const underlineY = contentY + 1;
-        const underlineBg = isSelected ? this._selectedBackgroundColor : bgColor;
-        this.frameBuffer.drawText("\u25AC".repeat(actualTabWidth), tabX, underlineY, nameColor, underlineBg);
-      }
-    }
-    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 descContent = this.truncateText(selectedOption.description, contentWidth - 2);
-        this.frameBuffer.drawText(descContent, contentX + 1, descriptionY, descColor);
-      }
-    }
-    if (this._showScrollArrows && this._options.length > this.maxVisibleTabs) {
-      this.renderScrollArrowsToFrameBuffer(contentX, contentY, contentWidth, contentHeight);
-    }
-  }
-  truncateText(text, maxWidth) {
-    if (text.length <= maxWidth)
-      return text;
-    return text.substring(0, Math.max(0, maxWidth - 1)) + "\u2026";
-  }
-  renderScrollArrowsToFrameBuffer(contentX, contentY, contentWidth, contentHeight) {
-    if (!this.frameBuffer)
-      return;
-    const hasMoreLeft = this.scrollOffset > 0;
-    const hasMoreRight = this.scrollOffset + this.maxVisibleTabs < this._options.length;
-    if (hasMoreLeft) {
-      this.frameBuffer.drawText("\u2039", contentX, contentY, parseColor("#AAAAAA"));
-    }
-    if (hasMoreRight) {
-      this.frameBuffer.drawText("\u203A", contentX + contentWidth - 1, contentY, parseColor("#AAAAAA"));
-    }
-  }
-  setOptions(options) {
-    this._options = options;
-    this.selectedIndex = Math.min(this.selectedIndex, Math.max(0, options.length - 1));
-    this.updateScrollOffset();
-    this.requestRender();
-  }
-  getSelectedOption() {
-    return this._options[this.selectedIndex] || null;
-  }
-  getSelectedIndex() {
-    return this.selectedIndex;
-  }
-  moveLeft() {
-    if (this.selectedIndex > 0) {
-      this.selectedIndex--;
-    } else if (this._wrapSelection && this._options.length > 0) {
-      this.selectedIndex = this._options.length - 1;
-    } else {
-      return;
-    }
-    this.updateScrollOffset();
-    this.requestRender();
-    this.emit("selectionChanged" /* SELECTION_CHANGED */, this.selectedIndex, this.getSelectedOption());
+  get foregroundColor() {
+    return this._foregroundColor;
   }
-  moveRight() {
-    if (this.selectedIndex < this._options.length - 1) {
-      this.selectedIndex++;
-    } else if (this._wrapSelection && this._options.length > 0) {
-      this.selectedIndex = 0;
-    } else {
-      return;
+  set foregroundColor(value) {
+    if (this._foregroundColor !== value) {
+      this._foregroundColor = parseColor(value);
+      this.requestRender();
     }
-    this.updateScrollOffset();
-    this.requestRender();
-    this.emit("selectionChanged" /* SELECTION_CHANGED */, this.selectedIndex, this.getSelectedOption());
   }
-  selectCurrent() {
-    const selected = this.getSelectedOption();
-    if (selected) {
-      this.emit("itemSelected" /* ITEM_SELECTED */, this.selectedIndex, selected);
-    }
+  get backgroundColor() {
+    return this._backgroundColor;
   }
-  setSelectedIndex(index) {
-    if (index >= 0 && index < this._options.length) {
-      this.selectedIndex = index;
-      this.updateScrollOffset();
+  set backgroundColor(value) {
+    if (this._backgroundColor !== value) {
+      this._backgroundColor = parseColor(value);
       this.requestRender();
-      this.emit("selectionChanged" /* SELECTION_CHANGED */, this.selectedIndex, this.getSelectedOption());
     }
   }
-  updateScrollOffset() {
-    const halfVisible = Math.floor(this.maxVisibleTabs / 2);
-    const newScrollOffset = Math.max(0, Math.min(this.selectedIndex - halfVisible, this._options.length - this.maxVisibleTabs));
-    if (newScrollOffset !== this.scrollOffset) {
-      this.scrollOffset = newScrollOffset;
+  get attributes() {
+    return this._attributes;
+  }
+  set attributes(value) {
+    if (this._attributes !== value) {
+      this._attributes = value;
       this.requestRender();
     }
   }
-  onResize(width, height) {
-    this.maxVisibleTabs = Math.max(1, Math.floor(width / this._tabWidth));
-    this.updateScrollOffset();
-    this.requestRender();
-  }
-  setTabWidth(tabWidth) {
-    if (this._tabWidth === tabWidth)
-      return;
-    this._tabWidth = tabWidth;
-    this.maxVisibleTabs = Math.max(1, Math.floor(this.width / this._tabWidth));
-    this.updateScrollOffset();
+  set arrowChars(value) {
+    this._arrowChars = {
+      ...this._arrowChars,
+      ...value
+    };
     this.requestRender();
   }
-  getTabWidth() {
-    return this._tabWidth;
+  renderSelf(buffer) {
+    const char = this.getArrowChar();
+    buffer.drawText(char, this.x, this.y, this._foregroundColor, this._backgroundColor, this._attributes);
   }
-  handleKeyPress(key) {
-    const keyName = typeof key === "string" ? key : key.name;
-    switch (keyName) {
+  getArrowChar() {
+    switch (this._direction) {
+      case "up":
+        return this._arrowChars.up;
+      case "down":
+        return this._arrowChars.down;
       case "left":
-      case "[":
-        this.moveLeft();
-        return true;
+        return this._arrowChars.left;
       case "right":
-      case "]":
-        this.moveRight();
-        return true;
-      case "return":
-      case "enter":
-        this.selectCurrent();
-        return true;
+        return this._arrowChars.right;
+      default:
+        return "?";
     }
-    return false;
-  }
-  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.requestRender();
+}
+// src/renderables/ScrollBox.ts
+class ContentRenderable extends BoxRenderable {
+  viewport;
+  constructor(ctx, viewport, options) {
+    super(ctx, options);
+    this.viewport = viewport;
   }
-  set backgroundColor(color) {
-    this._backgroundColor = parseColor(color);
-    this.requestRender();
+  _getChildren() {
+    return getObjectsInViewport(this.viewport, this.getChildrenSortedByPrimaryAxis(), this.primaryAxis);
   }
-  set textColor(color) {
-    this._textColor = parseColor(color);
-    this.requestRender();
+}
+
+class ScrollBoxRenderable extends BoxRenderable {
+  static idCounter = 0;
+  internalId = 0;
+  wrapper;
+  viewport;
+  content;
+  horizontalScrollBar;
+  verticalScrollBar;
+  _focusable = true;
+  selectionListener;
+  autoScrollMouseX = 0;
+  autoScrollMouseY = 0;
+  autoScrollThresholdVertical = 3;
+  autoScrollThresholdHorizontal = 3;
+  autoScrollSpeedSlow = 6;
+  autoScrollSpeedMedium = 36;
+  autoScrollSpeedFast = 72;
+  isAutoScrolling = false;
+  cachedAutoScrollSpeed = 3;
+  autoScrollAccumulatorX = 0;
+  autoScrollAccumulatorY = 0;
+  _stickyScroll;
+  _stickyScrollTop = false;
+  _stickyScrollBottom = false;
+  _stickyScrollLeft = false;
+  _stickyScrollRight = false;
+  _stickyStart;
+  _hasManualScroll = false;
+  scrollAccel;
+  get stickyScroll() {
+    return this._stickyScroll;
   }
-  set focusedBackgroundColor(color) {
-    this._focusedBackgroundColor = parseColor(color);
-    this.requestRender();
+  set stickyScroll(value) {
+    this._stickyScroll = value;
+    this.updateStickyState();
   }
-  set focusedTextColor(color) {
-    this._focusedTextColor = parseColor(color);
-    this.requestRender();
+  get stickyStart() {
+    return this._stickyStart;
   }
-  set selectedBackgroundColor(color) {
-    this._selectedBackgroundColor = parseColor(color);
-    this.requestRender();
+  set stickyStart(value) {
+    this._stickyStart = value;
+    this.updateStickyState();
   }
-  set selectedTextColor(color) {
-    this._selectedTextColor = parseColor(color);
-    this.requestRender();
+  get scrollTop() {
+    return this.verticalScrollBar.scrollPosition;
   }
-  set selectedDescriptionColor(color) {
-    this._selectedDescriptionColor = parseColor(color);
-    this.requestRender();
+  set scrollTop(value) {
+    this.verticalScrollBar.scrollPosition = value;
+    this._hasManualScroll = true;
+    this.updateStickyState();
   }
-  get showDescription() {
-    return this._showDescription;
+  get scrollLeft() {
+    return this.horizontalScrollBar.scrollPosition;
   }
-  set showDescription(show) {
-    if (this._showDescription !== show) {
-      this._showDescription = show;
-      const newHeight = this.calculateDynamicHeight();
-      this.height = newHeight;
-      this.requestRender();
-    }
+  set scrollLeft(value) {
+    this.horizontalScrollBar.scrollPosition = value;
+    this._hasManualScroll = true;
+    this.updateStickyState();
   }
-  get showUnderline() {
-    return this._showUnderline;
+  get scrollWidth() {
+    return this.horizontalScrollBar.scrollSize;
   }
-  set showUnderline(show) {
-    if (this._showUnderline !== show) {
-      this._showUnderline = show;
-      const newHeight = this.calculateDynamicHeight();
-      this.height = newHeight;
-      this.requestRender();
-    }
+  get scrollHeight() {
+    return this.verticalScrollBar.scrollSize;
   }
-  get showScrollArrows() {
-    return this._showScrollArrows;
+  updateStickyState() {
+    if (!this._stickyScroll)
+      return;
+    const maxScrollTop = Math.max(0, this.scrollHeight - this.viewport.height);
+    const maxScrollLeft = Math.max(0, this.scrollWidth - this.viewport.width);
+    if (this.scrollTop <= 0) {
+      this._stickyScrollTop = true;
+      this._stickyScrollBottom = false;
+    } else if (this.scrollTop >= maxScrollTop) {
+      this._stickyScrollTop = false;
+      this._stickyScrollBottom = true;
+    } else {
+      this._stickyScrollTop = false;
+      this._stickyScrollBottom = false;
+    }
+    if (this.scrollLeft <= 0) {
+      this._stickyScrollLeft = true;
+      this._stickyScrollRight = false;
+    } else if (this.scrollLeft >= maxScrollLeft) {
+      this._stickyScrollLeft = false;
+      this._stickyScrollRight = true;
+    } else {
+      this._stickyScrollLeft = false;
+      this._stickyScrollRight = false;
+    }
   }
-  set showScrollArrows(show) {
-    if (this._showScrollArrows !== show) {
-      this._showScrollArrows = show;
-      this.requestRender();
+  applyStickyStart(stickyStart) {
+    switch (stickyStart) {
+      case "top":
+        this._stickyScrollTop = true;
+        this._stickyScrollBottom = false;
+        this.verticalScrollBar.scrollPosition = 0;
+        break;
+      case "bottom":
+        this._stickyScrollTop = false;
+        this._stickyScrollBottom = true;
+        this.verticalScrollBar.scrollPosition = Math.max(0, this.scrollHeight - this.viewport.height);
+        break;
+      case "left":
+        this._stickyScrollLeft = true;
+        this._stickyScrollRight = false;
+        this.horizontalScrollBar.scrollPosition = 0;
+        break;
+      case "right":
+        this._stickyScrollLeft = false;
+        this._stickyScrollRight = true;
+        this.horizontalScrollBar.scrollPosition = Math.max(0, this.scrollWidth - this.viewport.width);
+        break;
     }
   }
-  get wrapSelection() {
-    return this._wrapSelection;
+  constructor(ctx, {
+    wrapperOptions,
+    viewportOptions,
+    contentOptions,
+    rootOptions,
+    scrollbarOptions,
+    verticalScrollbarOptions,
+    horizontalScrollbarOptions,
+    stickyScroll = false,
+    stickyStart,
+    scrollX = false,
+    scrollY = true,
+    scrollAcceleration,
+    ...options
+  }) {
+    super(ctx, {
+      flexDirection: "row",
+      alignItems: "stretch",
+      ...options,
+      ...rootOptions
+    });
+    this.internalId = ScrollBoxRenderable.idCounter++;
+    this._stickyScroll = stickyScroll;
+    this._stickyStart = stickyStart;
+    if (scrollAcceleration) {
+      this.scrollAccel = scrollAcceleration;
+    } else if (process.platform === "darwin") {
+      this.scrollAccel = new MacOSScrollAccel;
+    }
+    this.scrollAccel ??= new LinearScrollAccel;
+    this.wrapper = new BoxRenderable(ctx, {
+      flexDirection: "column",
+      flexGrow: 1,
+      ...wrapperOptions,
+      id: `scroll-box-wrapper-${this.internalId}`
+    });
+    super.add(this.wrapper);
+    this.viewport = new BoxRenderable(ctx, {
+      flexDirection: "column",
+      flexGrow: 1,
+      overflow: "hidden",
+      onSizeChange: () => {
+        this.recalculateBarProps();
+      },
+      ...viewportOptions,
+      id: `scroll-box-viewport-${this.internalId}`
+    });
+    this.wrapper.add(this.viewport);
+    this.content = new ContentRenderable(ctx, this.viewport, {
+      alignSelf: "flex-start",
+      flexShrink: 0,
+      ...scrollX ? { minWidth: "100%" } : { minWidth: "100%", maxWidth: "100%" },
+      ...scrollY ? { minHeight: "100%" } : { minHeight: "100%", maxHeight: "100%" },
+      onSizeChange: () => {
+        this.recalculateBarProps();
+      },
+      ...contentOptions,
+      id: `scroll-box-content-${this.internalId}`
+    });
+    this.viewport.add(this.content);
+    this.verticalScrollBar = new ScrollBarRenderable(ctx, {
+      ...scrollbarOptions,
+      ...verticalScrollbarOptions,
+      arrowOptions: {
+        ...scrollbarOptions?.arrowOptions,
+        ...verticalScrollbarOptions?.arrowOptions
+      },
+      id: `scroll-box-vertical-scrollbar-${this.internalId}`,
+      orientation: "vertical",
+      onChange: (position) => {
+        this.content.translateY = -position;
+        this._hasManualScroll = true;
+        this.updateStickyState();
+      }
+    });
+    super.add(this.verticalScrollBar);
+    this.horizontalScrollBar = new ScrollBarRenderable(ctx, {
+      ...scrollbarOptions,
+      ...horizontalScrollbarOptions,
+      arrowOptions: {
+        ...scrollbarOptions?.arrowOptions,
+        ...horizontalScrollbarOptions?.arrowOptions
+      },
+      id: `scroll-box-horizontal-scrollbar-${this.internalId}`,
+      orientation: "horizontal",
+      onChange: (position) => {
+        this.content.translateX = -position;
+        this._hasManualScroll = true;
+        this.updateStickyState();
+      }
+    });
+    this.wrapper.add(this.horizontalScrollBar);
+    this.recalculateBarProps();
+    if (stickyStart && stickyScroll) {
+      this.applyStickyStart(stickyStart);
+    }
+    this.selectionListener = () => {
+      const selection = this._ctx.getSelection();
+      if (!selection || !selection.isSelecting) {
+        this.stopAutoScroll();
+      }
+    };
+    this._ctx.on("selection", this.selectionListener);
   }
-  set wrapSelection(wrap) {
-    this._wrapSelection = wrap;
+  onUpdate(deltaTime) {
+    this.handleAutoScroll(deltaTime);
   }
-  get tabWidth() {
-    return this._tabWidth;
+  scrollBy(delta, unit = "absolute") {
+    if (typeof delta === "number") {
+      this.verticalScrollBar.scrollBy(delta, unit);
+    } else {
+      this.verticalScrollBar.scrollBy(delta.y, unit);
+      this.horizontalScrollBar.scrollBy(delta.x, unit);
+    }
+    this._hasManualScroll = true;
   }
-  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.requestRender();
+  scrollTo(position) {
+    if (typeof position === "number") {
+      this.scrollTop = position;
+    } else {
+      this.scrollTop = position.y;
+      this.scrollLeft = position.x;
+    }
   }
-}
-// src/renderables/Slider.ts
-var defaultThumbBackgroundColor = RGBA.fromHex("#9a9ea3");
-var defaultTrackBackgroundColor = RGBA.fromHex("#252527");
-
-class SliderRenderable extends Renderable {
-  orientation;
-  _value;
-  _min;
-  _max;
-  _viewPortSize;
-  _backgroundColor;
-  _foregroundColor;
-  _onChange;
-  constructor(ctx, options) {
-    super(ctx, { flexShrink: 0, ...options });
-    this.orientation = options.orientation;
-    this._min = options.min ?? 0;
-    this._max = options.max ?? 100;
-    this._value = options.value ?? this._min;
-    this._viewPortSize = options.viewPortSize ?? Math.max(1, (this._max - this._min) * 0.1);
-    this._onChange = options.onChange;
-    this._backgroundColor = options.backgroundColor ? parseColor(options.backgroundColor) : defaultTrackBackgroundColor;
-    this._foregroundColor = options.foregroundColor ? parseColor(options.foregroundColor) : defaultThumbBackgroundColor;
-    this.setupMouseHandling();
+  add(obj, index) {
+    return this.content.add(obj, index);
   }
-  get value() {
-    return this._value;
+  insertBefore(obj, anchor) {
+    return this.content.insertBefore(obj, anchor);
   }
-  set value(newValue) {
-    const clamped = Math.max(this._min, Math.min(this._max, newValue));
-    if (clamped !== this._value) {
-      this._value = clamped;
-      this._onChange?.(clamped);
-      this.emit("change", { value: clamped });
-      this.requestRender();
-    }
+  remove(id) {
+    this.content.remove(id);
   }
-  get min() {
-    return this._min;
+  getChildren() {
+    return this.content.getChildren();
   }
-  set min(newMin) {
-    if (newMin !== this._min) {
-      this._min = newMin;
-      if (this._value < newMin) {
-        this.value = newMin;
+  onMouseEvent(event) {
+    if (event.type === "scroll") {
+      let dir = event.scroll?.direction;
+      if (event.modifiers.shift)
+        dir = dir === "up" ? "left" : dir === "down" ? "right" : dir === "right" ? "down" : "up";
+      const baseDelta = event.scroll?.delta ?? 0;
+      const now = Date.now();
+      const multiplier = this.scrollAccel.tick(now);
+      if (dir === "up") {
+        this.scrollTop -= baseDelta * multiplier;
+      } else if (dir === "down") {
+        this.scrollTop += baseDelta * multiplier;
+      } else if (dir === "left") {
+        this.scrollLeft -= baseDelta * multiplier;
+      } else if (dir === "right") {
+        this.scrollLeft += baseDelta * multiplier;
       }
-      this.requestRender();
+      this._hasManualScroll = true;
     }
-  }
-  get max() {
-    return this._max;
-  }
-  set max(newMax) {
-    if (newMax !== this._max) {
-      this._max = newMax;
-      if (this._value > newMax) {
-        this.value = newMax;
-      }
-      this.requestRender();
+    if (event.type === "drag" && event.isSelecting) {
+      this.updateAutoScroll(event.x, event.y);
+    } else if (event.type === "up") {
+      this.stopAutoScroll();
     }
   }
-  set viewPortSize(size) {
-    const clampedSize = Math.max(0.01, Math.min(size, this._max - this._min));
-    if (clampedSize !== this._viewPortSize) {
-      this._viewPortSize = clampedSize;
-      this.requestRender();
+  handleKeyPress(key) {
+    if (this.verticalScrollBar.handleKeyPress(key)) {
+      this._hasManualScroll = true;
+      this.scrollAccel.reset();
+      return true;
     }
+    if (this.horizontalScrollBar.handleKeyPress(key)) {
+      this._hasManualScroll = true;
+      this.scrollAccel.reset();
+      return true;
+    }
+    return false;
   }
-  get viewPortSize() {
-    return this._viewPortSize;
-  }
-  get backgroundColor() {
-    return this._backgroundColor;
-  }
-  set backgroundColor(value) {
-    this._backgroundColor = parseColor(value);
-    this.requestRender();
+  startAutoScroll(mouseX, mouseY) {
+    this.stopAutoScroll();
+    this.autoScrollMouseX = mouseX;
+    this.autoScrollMouseY = mouseY;
+    this.cachedAutoScrollSpeed = this.getAutoScrollSpeed(mouseX, mouseY);
+    this.isAutoScrolling = true;
+    if (!this.live) {
+      this.live = true;
+    }
   }
-  get foregroundColor() {
-    return this._foregroundColor;
+  updateAutoScroll(mouseX, mouseY) {
+    this.autoScrollMouseX = mouseX;
+    this.autoScrollMouseY = mouseY;
+    this.cachedAutoScrollSpeed = this.getAutoScrollSpeed(mouseX, mouseY);
+    const scrollX = this.getAutoScrollDirectionX(mouseX);
+    const scrollY = this.getAutoScrollDirectionY(mouseY);
+    if (scrollX === 0 && scrollY === 0) {
+      this.stopAutoScroll();
+    } else if (!this.isAutoScrolling) {
+      this.startAutoScroll(mouseX, mouseY);
+    }
   }
-  set foregroundColor(value) {
-    this._foregroundColor = parseColor(value);
-    this.requestRender();
+  stopAutoScroll() {
+    const wasAutoScrolling = this.isAutoScrolling;
+    this.isAutoScrolling = false;
+    this.autoScrollAccumulatorX = 0;
+    this.autoScrollAccumulatorY = 0;
+    if (wasAutoScrolling && !this.hasOtherLiveReasons()) {
+      this.live = false;
+    }
   }
-  calculateDragOffsetVirtual(event) {
-    const trackStart = this.orientation === "vertical" ? this.y : this.x;
-    const mousePos = (this.orientation === "vertical" ? event.y : event.x) - trackStart;
-    const virtualMousePos = Math.max(0, Math.min((this.orientation === "vertical" ? this.height : this.width) * 2, mousePos * 2));
-    const virtualThumbStart = this.getVirtualThumbStart();
-    const virtualThumbSize = this.getVirtualThumbSize();
-    return Math.max(0, Math.min(virtualThumbSize, virtualMousePos - virtualThumbStart));
+  hasOtherLiveReasons() {
+    return false;
   }
-  setupMouseHandling() {
-    let isDragging = false;
-    let dragOffsetVirtual = 0;
-    this.onMouseDown = (event) => {
-      event.stopPropagation();
-      event.preventDefault();
-      const thumb = this.getThumbRect();
-      const inThumb = event.x >= thumb.x && event.x < thumb.x + thumb.width && event.y >= thumb.y && event.y < thumb.y + thumb.height;
-      if (inThumb) {
-        isDragging = true;
-        dragOffsetVirtual = this.calculateDragOffsetVirtual(event);
-      } else {
-        this.updateValueFromMouseDirect(event);
-        isDragging = true;
-        dragOffsetVirtual = this.calculateDragOffsetVirtual(event);
+  handleAutoScroll(deltaTime) {
+    if (!this.isAutoScrolling)
+      return;
+    const scrollX = this.getAutoScrollDirectionX(this.autoScrollMouseX);
+    const scrollY = this.getAutoScrollDirectionY(this.autoScrollMouseY);
+    const scrollAmount = this.cachedAutoScrollSpeed * (deltaTime / 1000);
+    let scrolled = false;
+    if (scrollX !== 0) {
+      this.autoScrollAccumulatorX += scrollX * scrollAmount;
+      const integerScrollX = Math.trunc(this.autoScrollAccumulatorX);
+      if (integerScrollX !== 0) {
+        this.scrollLeft += integerScrollX;
+        this.autoScrollAccumulatorX -= integerScrollX;
+        scrolled = true;
       }
-    };
-    this.onMouseDrag = (event) => {
-      if (!isDragging)
-        return;
-      event.stopPropagation();
-      this.updateValueFromMouseWithOffset(event, dragOffsetVirtual);
-    };
-    this.onMouseUp = (event) => {
-      if (isDragging) {
-        this.updateValueFromMouseWithOffset(event, dragOffsetVirtual);
+    }
+    if (scrollY !== 0) {
+      this.autoScrollAccumulatorY += scrollY * scrollAmount;
+      const integerScrollY = Math.trunc(this.autoScrollAccumulatorY);
+      if (integerScrollY !== 0) {
+        this.scrollTop += integerScrollY;
+        this.autoScrollAccumulatorY -= integerScrollY;
+        scrolled = true;
       }
-      isDragging = false;
-    };
-  }
-  updateValueFromMouseDirect(event) {
-    const trackStart = this.orientation === "vertical" ? this.y : this.x;
-    const trackSize = this.orientation === "vertical" ? this.height : this.width;
-    const mousePos = this.orientation === "vertical" ? event.y : event.x;
-    const relativeMousePos = mousePos - trackStart;
-    const clampedMousePos = Math.max(0, Math.min(trackSize, relativeMousePos));
-    const ratio = trackSize === 0 ? 0 : clampedMousePos / trackSize;
-    const range = this._max - this._min;
-    const newValue = this._min + ratio * range;
-    this.value = newValue;
-  }
-  updateValueFromMouseWithOffset(event, offsetVirtual) {
-    const trackStart = this.orientation === "vertical" ? this.y : this.x;
-    const trackSize = this.orientation === "vertical" ? this.height : this.width;
-    const mousePos = this.orientation === "vertical" ? event.y : event.x;
-    const virtualTrackSize = trackSize * 2;
-    const relativeMousePos = mousePos - trackStart;
-    const clampedMousePos = Math.max(0, Math.min(trackSize, relativeMousePos));
-    const virtualMousePos = clampedMousePos * 2;
-    const virtualThumbSize = this.getVirtualThumbSize();
-    const maxThumbStart = Math.max(0, virtualTrackSize - virtualThumbSize);
-    let desiredThumbStart = virtualMousePos - offsetVirtual;
-    desiredThumbStart = Math.max(0, Math.min(maxThumbStart, desiredThumbStart));
-    const ratio = maxThumbStart === 0 ? 0 : desiredThumbStart / maxThumbStart;
-    const range = this._max - this._min;
-    const newValue = this._min + ratio * range;
-    this.value = newValue;
-  }
-  getThumbRect() {
-    const virtualThumbSize = this.getVirtualThumbSize();
-    const virtualThumbStart = this.getVirtualThumbStart();
-    const realThumbStart = Math.floor(virtualThumbStart / 2);
-    const realThumbSize = Math.ceil((virtualThumbStart + virtualThumbSize) / 2) - realThumbStart;
-    if (this.orientation === "vertical") {
-      return {
-        x: this.x,
-        y: this.y + realThumbStart,
-        width: this.width,
-        height: Math.max(1, realThumbSize)
-      };
-    } else {
-      return {
-        x: this.x + realThumbStart,
-        y: this.y,
-        width: Math.max(1, realThumbSize),
-        height: this.height
-      };
     }
-  }
-  renderSelf(buffer) {
-    if (this.orientation === "horizontal") {
-      this.renderHorizontal(buffer);
-    } else {
-      this.renderVertical(buffer);
+    if (scrolled) {
+      this._ctx.requestSelectionUpdate();
     }
-  }
-  renderHorizontal(buffer) {
-    const virtualThumbSize = this.getVirtualThumbSize();
-    const virtualThumbStart = this.getVirtualThumbStart();
-    const virtualThumbEnd = virtualThumbStart + virtualThumbSize;
-    buffer.fillRect(this.x, this.y, this.width, this.height, this._backgroundColor);
-    const realStartCell = Math.floor(virtualThumbStart / 2);
-    const realEndCell = Math.ceil(virtualThumbEnd / 2) - 1;
-    const startX = Math.max(0, realStartCell);
-    const endX = Math.min(this.width - 1, realEndCell);
-    for (let realX = startX;realX <= endX; realX++) {
-      const virtualCellStart = realX * 2;
-      const virtualCellEnd = virtualCellStart + 2;
-      const thumbStartInCell = Math.max(virtualThumbStart, virtualCellStart);
-      const thumbEndInCell = Math.min(virtualThumbEnd, virtualCellEnd);
-      const coverage = thumbEndInCell - thumbStartInCell;
-      let char = " ";
-      if (coverage >= 2) {
-        char = "\u2588";
-      } else {
-        const isLeftHalf = thumbStartInCell === virtualCellStart;
-        if (isLeftHalf) {
-          char = "\u258C";
-        } else {
-          char = "\u2590";
-        }
-      }
-      for (let y = 0;y < this.height; y++) {
-        buffer.setCellWithAlphaBlending(this.x + realX, this.y + y, char, this._foregroundColor, this._backgroundColor);
-      }
+    if (scrollX === 0 && scrollY === 0) {
+      this.stopAutoScroll();
     }
   }
-  renderVertical(buffer) {
-    const virtualThumbSize = this.getVirtualThumbSize();
-    const virtualThumbStart = this.getVirtualThumbStart();
-    const virtualThumbEnd = virtualThumbStart + virtualThumbSize;
-    buffer.fillRect(this.x, this.y, this.width, this.height, this._backgroundColor);
-    const realStartCell = Math.floor(virtualThumbStart / 2);
-    const realEndCell = Math.ceil(virtualThumbEnd / 2) - 1;
-    const startY = Math.max(0, realStartCell);
-    const endY = Math.min(this.height - 1, realEndCell);
-    for (let realY = startY;realY <= endY; realY++) {
-      const virtualCellStart = realY * 2;
-      const virtualCellEnd = virtualCellStart + 2;
-      const thumbStartInCell = Math.max(virtualThumbStart, virtualCellStart);
-      const thumbEndInCell = Math.min(virtualThumbEnd, virtualCellEnd);
-      const coverage = thumbEndInCell - thumbStartInCell;
-      let char = " ";
-      if (coverage >= 2) {
-        char = "\u2588";
-      } else if (coverage > 0) {
-        const virtualPositionInCell = thumbStartInCell - virtualCellStart;
-        if (virtualPositionInCell === 0) {
-          char = "\u2580";
-        } else {
-          char = "\u2584";
-        }
-      }
-      for (let x = 0;x < this.width; x++) {
-        buffer.setCellWithAlphaBlending(this.x + x, this.y + realY, char, this._foregroundColor, this._backgroundColor);
-      }
+  getAutoScrollDirectionX(mouseX) {
+    const relativeX = mouseX - this.x;
+    const distToLeft = relativeX;
+    const distToRight = this.width - relativeX;
+    if (distToLeft <= this.autoScrollThresholdHorizontal) {
+      return this.scrollLeft > 0 ? -1 : 0;
+    } else if (distToRight <= this.autoScrollThresholdHorizontal) {
+      const maxScrollLeft = this.scrollWidth - this.viewport.width;
+      return this.scrollLeft < maxScrollLeft ? 1 : 0;
     }
+    return 0;
   }
-  getVirtualThumbSize() {
-    const virtualTrackSize = this.orientation === "vertical" ? this.height * 2 : this.width * 2;
-    const range = this._max - this._min;
-    if (range === 0)
-      return virtualTrackSize;
-    const viewportSize = Math.max(1, this._viewPortSize);
-    const contentSize = range + viewportSize;
-    if (contentSize <= viewportSize)
-      return virtualTrackSize;
-    const thumbRatio = viewportSize / contentSize;
-    const calculatedSize = Math.floor(virtualTrackSize * thumbRatio);
-    return Math.max(1, Math.min(calculatedSize, virtualTrackSize));
-  }
-  getVirtualThumbStart() {
-    const virtualTrackSize = this.orientation === "vertical" ? this.height * 2 : this.width * 2;
-    const range = this._max - this._min;
-    if (range === 0)
-      return 0;
-    const valueRatio = (this._value - this._min) / range;
-    const virtualThumbSize = this.getVirtualThumbSize();
-    return Math.round(valueRatio * (virtualTrackSize - virtualThumbSize));
-  }
-}
-
-// src/renderables/ScrollBar.ts
-class ScrollBarRenderable extends Renderable {
-  slider;
-  startArrow;
-  endArrow;
-  orientation;
-  _focusable = true;
-  _scrollSize = 0;
-  _scrollPosition = 0;
-  _viewportSize = 0;
-  _showArrows = false;
-  _manualVisibility = false;
-  _onChange;
-  scrollStep = null;
-  get visible() {
-    return super.visible;
-  }
-  set visible(value) {
-    this._manualVisibility = true;
-    super.visible = value;
-  }
-  resetVisibilityControl() {
-    this._manualVisibility = false;
-    this.recalculateVisibility();
-  }
-  get scrollSize() {
-    return this._scrollSize;
-  }
-  get scrollPosition() {
-    return this._scrollPosition;
-  }
-  get viewportSize() {
-    return this._viewportSize;
-  }
-  set scrollSize(value) {
-    if (value === this.scrollSize)
-      return;
-    this._scrollSize = value;
-    this.recalculateVisibility();
-    this.updateSliderFromScrollState();
-    this.scrollPosition = this.scrollPosition;
-  }
-  set scrollPosition(value) {
-    const newPosition = Math.round(Math.min(Math.max(0, value), this.scrollSize - this.viewportSize));
-    if (newPosition !== this._scrollPosition) {
-      this._scrollPosition = newPosition;
-      this.updateSliderFromScrollState();
+  getAutoScrollDirectionY(mouseY) {
+    const relativeY = mouseY - this.y;
+    const distToTop = relativeY;
+    const distToBottom = this.height - relativeY;
+    if (distToTop <= this.autoScrollThresholdVertical) {
+      return this.scrollTop > 0 ? -1 : 0;
+    } else if (distToBottom <= this.autoScrollThresholdVertical) {
+      const maxScrollTop = this.scrollHeight - this.viewport.height;
+      return this.scrollTop < maxScrollTop ? 1 : 0;
     }
+    return 0;
   }
-  set viewportSize(value) {
-    if (value === this.viewportSize)
-      return;
-    this._viewportSize = value;
-    this.slider.viewPortSize = Math.max(1, this._viewportSize);
-    this.recalculateVisibility();
-    this.updateSliderFromScrollState();
-    this.scrollPosition = this.scrollPosition;
-  }
-  get showArrows() {
-    return this._showArrows;
-  }
-  set showArrows(value) {
-    if (value === this._showArrows)
-      return;
-    this._showArrows = value;
-    this.startArrow.visible = value;
-    this.endArrow.visible = value;
+  getAutoScrollSpeed(mouseX, mouseY) {
+    const relativeX = mouseX - this.x;
+    const relativeY = mouseY - this.y;
+    const distToLeft = relativeX;
+    const distToRight = this.width - relativeX;
+    const distToTop = relativeY;
+    const distToBottom = this.height - relativeY;
+    const minDistance = Math.min(distToLeft, distToRight, distToTop, distToBottom);
+    if (minDistance <= 1) {
+      return this.autoScrollSpeedFast;
+    } else if (minDistance <= 2) {
+      return this.autoScrollSpeedMedium;
+    } else {
+      return this.autoScrollSpeedSlow;
+    }
   }
-  constructor(ctx, { trackOptions, arrowOptions, orientation, showArrows = false, ...options }) {
-    super(ctx, {
-      flexDirection: orientation === "vertical" ? "column" : "row",
-      alignSelf: "stretch",
-      alignItems: "stretch",
-      ...options
-    });
-    this._onChange = options.onChange;
-    this.orientation = orientation;
-    this._showArrows = showArrows;
-    const scrollRange = Math.max(0, this._scrollSize - this._viewportSize);
-    const defaultStepSize = Math.max(1, this._viewportSize);
-    const stepSize = trackOptions?.viewPortSize ?? defaultStepSize;
-    this.slider = new SliderRenderable(ctx, {
-      orientation,
-      min: 0,
-      max: scrollRange,
-      value: this._scrollPosition,
-      viewPortSize: stepSize,
-      onChange: (value) => {
-        this._scrollPosition = Math.round(value);
-        this._onChange?.(this._scrollPosition);
-        this.emit("change", { position: this._scrollPosition });
-      },
-      ...orientation === "vertical" ? {
-        width: Math.max(1, Math.min(2, this.width)),
-        height: "100%",
-        marginLeft: "auto"
-      } : {
-        width: "100%",
-        height: 1,
-        marginTop: "auto"
-      },
-      flexGrow: 1,
-      flexShrink: 1,
-      ...trackOptions
-    });
-    this.updateSliderFromScrollState();
-    const arrowOpts = arrowOptions ? {
-      foregroundColor: arrowOptions.backgroundColor,
-      backgroundColor: arrowOptions.backgroundColor,
-      attributes: arrowOptions.attributes,
-      ...arrowOptions
-    } : {};
-    this.startArrow = new ArrowRenderable(ctx, {
-      alignSelf: "center",
-      visible: this.showArrows,
-      direction: this.orientation === "vertical" ? "up" : "left",
-      height: this.orientation === "vertical" ? 1 : 1,
-      ...arrowOpts
-    });
-    this.endArrow = new ArrowRenderable(ctx, {
-      alignSelf: "center",
-      visible: this.showArrows,
-      direction: this.orientation === "vertical" ? "down" : "right",
-      height: this.orientation === "vertical" ? 1 : 1,
-      ...arrowOpts
-    });
-    this.add(this.startArrow);
-    this.add(this.slider);
-    this.add(this.endArrow);
-    let startArrowMouseTimeout = undefined;
-    let endArrowMouseTimeout = undefined;
-    this.startArrow.onMouseDown = (event) => {
-      event.stopPropagation();
-      event.preventDefault();
-      this.scrollBy(-0.5, "viewport");
-      startArrowMouseTimeout = setTimeout(() => {
-        this.scrollBy(-0.5, "viewport");
-        startArrowMouseTimeout = setInterval(() => {
-          this.scrollBy(-0.2, "viewport");
-        }, 200);
-      }, 500);
-    };
-    this.startArrow.onMouseUp = (event) => {
-      event.stopPropagation();
-      clearInterval(startArrowMouseTimeout);
-    };
-    this.endArrow.onMouseDown = (event) => {
-      event.stopPropagation();
-      event.preventDefault();
-      this.scrollBy(0.5, "viewport");
-      endArrowMouseTimeout = setTimeout(() => {
-        this.scrollBy(0.5, "viewport");
-        endArrowMouseTimeout = setInterval(() => {
-          this.scrollBy(0.2, "viewport");
-        }, 200);
-      }, 500);
-    };
-    this.endArrow.onMouseUp = (event) => {
-      event.stopPropagation();
-      clearInterval(endArrowMouseTimeout);
-    };
+  recalculateBarProps() {
+    this.verticalScrollBar.scrollSize = this.content.height;
+    this.verticalScrollBar.viewportSize = this.viewport.height;
+    this.horizontalScrollBar.scrollSize = this.content.width;
+    this.horizontalScrollBar.viewportSize = this.viewport.width;
+    if (this._stickyScroll) {
+      const newMaxScrollTop = Math.max(0, this.scrollHeight - this.viewport.height);
+      const newMaxScrollLeft = Math.max(0, this.scrollWidth - this.viewport.width);
+      if (this._stickyStart && !this._hasManualScroll) {
+        this.applyStickyStart(this._stickyStart);
+      } else {
+        if (this._stickyScrollTop) {
+          this.scrollTop = 0;
+        } else if (this._stickyScrollBottom && newMaxScrollTop > 0) {
+          this.scrollTop = newMaxScrollTop;
+        }
+        if (this._stickyScrollLeft) {
+          this.scrollLeft = 0;
+        } else if (this._stickyScrollRight && newMaxScrollLeft > 0) {
+          this.scrollLeft = newMaxScrollLeft;
+        }
+      }
+    }
+    process.nextTick(() => {
+      this.requestRender();
+    });
   }
-  set arrowOptions(options) {
-    Object.assign(this.startArrow, options);
-    Object.assign(this.endArrow, options);
+  set rootOptions(options) {
+    Object.assign(this, options);
     this.requestRender();
   }
-  set trackOptions(options) {
-    Object.assign(this.slider, options);
+  set wrapperOptions(options) {
+    Object.assign(this.wrapper, options);
     this.requestRender();
   }
-  updateSliderFromScrollState() {
-    const scrollRange = Math.max(0, this._scrollSize - this._viewportSize);
-    this.slider.min = 0;
-    this.slider.max = scrollRange;
-    this.slider.value = Math.min(this._scrollPosition, scrollRange);
+  set viewportOptions(options) {
+    Object.assign(this.viewport, options);
+    this.requestRender();
   }
-  scrollBy(delta, unit = "absolute") {
-    const multiplier = unit === "viewport" ? this.viewportSize : unit === "content" ? this.scrollSize : unit === "step" ? this.scrollStep ?? 1 : 1;
-    const resolvedDelta = multiplier * delta;
-    this.scrollPosition += resolvedDelta;
+  set contentOptions(options) {
+    Object.assign(this.content, options);
+    this.requestRender();
   }
-  recalculateVisibility() {
-    if (!this._manualVisibility) {
-      const sizeRatio = this.scrollSize <= this.viewportSize ? 1 : this.viewportSize / this.scrollSize;
-      super.visible = sizeRatio < 1;
-    }
+  set scrollbarOptions(options) {
+    Object.assign(this.verticalScrollBar, options);
+    Object.assign(this.horizontalScrollBar, options);
+    this.requestRender();
   }
-  handleKeyPress(key) {
-    const keyName = typeof key === "string" ? key : key.name;
-    switch (keyName) {
-      case "left":
-      case "h":
-        if (this.orientation !== "horizontal")
-          return false;
-        this.scrollBy(-1 / 5, "viewport");
-        return true;
-      case "right":
-      case "l":
-        if (this.orientation !== "horizontal")
-          return false;
-        this.scrollBy(1 / 5, "viewport");
-        return true;
-      case "up":
-      case "k":
-        if (this.orientation !== "vertical")
-          return false;
-        this.scrollBy(-1 / 5, "viewport");
-        return true;
-      case "down":
-      case "j":
-        if (this.orientation !== "vertical")
-          return false;
-        this.scrollBy(1 / 5, "viewport");
-        return true;
-      case "pageup":
-        this.scrollBy(-1 / 2, "viewport");
-        return true;
-      case "pagedown":
-        this.scrollBy(1 / 2, "viewport");
-        return true;
-      case "home":
-        this.scrollBy(-1, "content");
-        return true;
-      case "end":
-        this.scrollBy(1, "content");
-        return true;
+  set verticalScrollbarOptions(options) {
+    Object.assign(this.verticalScrollBar, options);
+    this.requestRender();
+  }
+  set horizontalScrollbarOptions(options) {
+    Object.assign(this.horizontalScrollBar, options);
+    this.requestRender();
+  }
+  get scrollAcceleration() {
+    return this.scrollAccel;
+  }
+  set scrollAcceleration(value) {
+    this.scrollAccel = value;
+  }
+  destroySelf() {
+    if (this.selectionListener) {
+      this._ctx.off("selection", this.selectionListener);
+      this.selectionListener = undefined;
     }
-    return false;
+    super.destroySelf();
   }
 }
+// src/renderables/Select.ts
+var SelectRenderableEvents;
+((SelectRenderableEvents2) => {
+  SelectRenderableEvents2["SELECTION_CHANGED"] = "selectionChanged";
+  SelectRenderableEvents2["ITEM_SELECTED"] = "itemSelected";
+})(SelectRenderableEvents ||= {});
 
-class ArrowRenderable extends Renderable {
-  _direction;
-  _foregroundColor;
+class SelectRenderable extends Renderable {
+  _focusable = true;
+  _options = [];
+  selectedIndex = 0;
+  scrollOffset = 0;
+  maxVisibleItems;
   _backgroundColor;
-  _attributes;
-  _arrowChars;
+  _textColor;
+  _focusedBackgroundColor;
+  _focusedTextColor;
+  _selectedBackgroundColor;
+  _selectedTextColor;
+  _descriptionColor;
+  _selectedDescriptionColor;
+  _showScrollIndicator;
+  _wrapSelection;
+  _showDescription;
+  _font;
+  _itemSpacing;
+  linesPerItem;
+  fontHeight;
+  _fastScrollStep;
+  _defaultOptions = {
+    backgroundColor: "transparent",
+    textColor: "#FFFFFF",
+    focusedBackgroundColor: "#1a1a1a",
+    focusedTextColor: "#FFFFFF",
+    selectedBackgroundColor: "#334455",
+    selectedTextColor: "#FFFF00",
+    descriptionColor: "#888888",
+    selectedDescriptionColor: "#CCCCCC",
+    showScrollIndicator: false,
+    wrapSelection: false,
+    showDescription: true,
+    itemSpacing: 0,
+    fastScrollStep: 5
+  };
   constructor(ctx, options) {
-    super(ctx, options);
-    this._direction = options.direction;
-    this._foregroundColor = options.foregroundColor ? parseColor(options.foregroundColor) : RGBA.fromValues(1, 1, 1, 1);
-    this._backgroundColor = options.backgroundColor ? parseColor(options.backgroundColor) : RGBA.fromValues(0, 0, 0, 0);
-    this._attributes = options.attributes ?? 0;
-    this._arrowChars = {
-      up: "\u25B2",
-      down: "\u25BC",
-      left: "\u25C0",
-      right: "\u25B6",
-      ...options.arrowChars
-    };
-    if (!options.width) {
-      this.width = Bun.stringWidth(this.getArrowChar());
+    super(ctx, { ...options, buffered: true });
+    this._backgroundColor = parseColor(options.backgroundColor || this._defaultOptions.backgroundColor);
+    this._textColor = parseColor(options.textColor || this._defaultOptions.textColor);
+    this._focusedBackgroundColor = parseColor(options.focusedBackgroundColor || this._defaultOptions.focusedBackgroundColor);
+    this._focusedTextColor = parseColor(options.focusedTextColor || this._defaultOptions.focusedTextColor);
+    this._options = options.options || [];
+    this._showScrollIndicator = options.showScrollIndicator ?? this._defaultOptions.showScrollIndicator;
+    this._wrapSelection = options.wrapSelection ?? this._defaultOptions.wrapSelection;
+    this._showDescription = options.showDescription ?? this._defaultOptions.showDescription;
+    this._font = options.font;
+    this._itemSpacing = options.itemSpacing || this._defaultOptions.itemSpacing;
+    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 || this._defaultOptions.selectedBackgroundColor);
+    this._selectedTextColor = parseColor(options.selectedTextColor || this._defaultOptions.selectedTextColor);
+    this._descriptionColor = parseColor(options.descriptionColor || this._defaultOptions.descriptionColor);
+    this._selectedDescriptionColor = parseColor(options.selectedDescriptionColor || this._defaultOptions.selectedDescriptionColor);
+    this._fastScrollStep = options.fastScrollStep || this._defaultOptions.fastScrollStep;
+    this.requestRender();
+  }
+  renderSelf(buffer, deltaTime) {
+    if (!this.visible || !this.frameBuffer)
+      return;
+    if (this.isDirty) {
+      this.refreshFrameBuffer();
+    }
+  }
+  refreshFrameBuffer() {
+    if (!this.frameBuffer || this._options.length === 0)
+      return;
+    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);
+    for (let i = 0;i < visibleOptions.length; i++) {
+      const actualIndex = this.scrollOffset + i;
+      const option = visibleOptions[i];
+      const isSelected = actualIndex === this.selectedIndex;
+      const itemY = contentY + i * this.linesPerItem;
+      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 nameContent = `${isSelected ? "\u25B6 " : "  "}${option.name}`;
+      const baseTextColor = this._focused ? this._focusedTextColor : this._textColor;
+      const nameColor = isSelected ? this._selectedTextColor : baseTextColor;
+      let descX = contentX + 3;
+      if (this._font) {
+        const indicator = isSelected ? "\u25B6 " : "  ";
+        this.frameBuffer.drawText(indicator, contentX + 1, itemY, nameColor);
+        const indicatorWidth = 2;
+        renderFontToFrameBuffer(this.frameBuffer, {
+          text: option.name,
+          x: contentX + 1 + indicatorWidth,
+          y: itemY,
+          fg: nameColor,
+          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;
+        this.frameBuffer.drawText(option.description, descX, itemY + this.fontHeight, descColor);
+      }
+    }
+    if (this._showScrollIndicator && this._options.length > this.maxVisibleItems) {
+      this.renderScrollIndicatorToFrameBuffer(contentX, contentY, contentWidth, contentHeight);
     }
   }
-  get direction() {
-    return this._direction;
+  renderScrollIndicatorToFrameBuffer(contentX, contentY, contentWidth, contentHeight) {
+    if (!this.frameBuffer)
+      return;
+    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"));
+  }
+  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.requestRender();
+  }
+  getSelectedOption() {
+    return this._options[this.selectedIndex] || null;
+  }
+  getSelectedIndex() {
+    return this.selectedIndex;
   }
-  set direction(value) {
-    if (this._direction !== value) {
-      this._direction = value;
-      this.requestRender();
+  moveUp(steps = 1) {
+    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 {
+      this.selectedIndex = 0;
     }
+    this.updateScrollOffset();
+    this.requestRender();
+    this.emit("selectionChanged" /* SELECTION_CHANGED */, this.selectedIndex, this.getSelectedOption());
   }
-  get foregroundColor() {
-    return this._foregroundColor;
-  }
-  set foregroundColor(value) {
-    if (this._foregroundColor !== value) {
-      this._foregroundColor = parseColor(value);
-      this.requestRender();
+  moveDown(steps = 1) {
+    const newIndex = this.selectedIndex + steps;
+    if (newIndex < this._options.length) {
+      this.selectedIndex = newIndex;
+    } else if (this._wrapSelection && this._options.length > 0) {
+      this.selectedIndex = 0;
+    } else {
+      this.selectedIndex = this._options.length - 1;
     }
+    this.updateScrollOffset();
+    this.requestRender();
+    this.emit("selectionChanged" /* SELECTION_CHANGED */, this.selectedIndex, this.getSelectedOption());
   }
-  get backgroundColor() {
-    return this._backgroundColor;
+  selectCurrent() {
+    const selected = this.getSelectedOption();
+    if (selected) {
+      this.emit("itemSelected" /* ITEM_SELECTED */, this.selectedIndex, selected);
+    }
   }
-  set backgroundColor(value) {
-    if (this._backgroundColor !== value) {
-      this._backgroundColor = parseColor(value);
+  setSelectedIndex(index) {
+    if (index >= 0 && index < this._options.length) {
+      this.selectedIndex = index;
+      this.updateScrollOffset();
       this.requestRender();
+      this.emit("selectionChanged" /* SELECTION_CHANGED */, this.selectedIndex, this.getSelectedOption());
     }
   }
-  get attributes() {
-    return this._attributes;
-  }
-  set attributes(value) {
-    if (this._attributes !== value) {
-      this._attributes = value;
+  updateScrollOffset() {
+    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));
+    if (newScrollOffset !== this.scrollOffset) {
+      this.scrollOffset = newScrollOffset;
       this.requestRender();
     }
   }
-  set arrowChars(value) {
-    this._arrowChars = {
-      ...this._arrowChars,
-      ...value
-    };
+  onResize(width, height) {
+    this.maxVisibleItems = Math.max(1, Math.floor(height / this.linesPerItem));
+    this.updateScrollOffset();
     this.requestRender();
   }
-  renderSelf(buffer) {
-    const char = this.getArrowChar();
-    buffer.drawText(char, this.x, this.y, this._foregroundColor, this._backgroundColor, this._attributes);
-  }
-  getArrowChar() {
-    switch (this._direction) {
+  handleKeyPress(key) {
+    const keyName = typeof key === "string" ? key : key.name;
+    const isShift = typeof key !== "string" && key.shift;
+    switch (keyName) {
       case "up":
-        return this._arrowChars.up;
+      case "k":
+        this.moveUp(isShift ? this._fastScrollStep : 1);
+        return true;
       case "down":
-        return this._arrowChars.down;
-      case "left":
-        return this._arrowChars.left;
-      case "right":
-        return this._arrowChars.right;
-      default:
-        return "?";
+      case "j":
+        this.moveDown(isShift ? this._fastScrollStep : 1);
+        return true;
+      case "return":
+      case "enter":
+        this.selectCurrent();
+        return true;
     }
+    return false;
   }
-}
-
-// src/renderables/ScrollBox.ts
-class ContentRenderable extends BoxRenderable {
-  viewport;
-  constructor(ctx, viewport, options) {
-    super(ctx, options);
-    this.viewport = viewport;
-  }
-  _getChildren() {
-    return getObjectsInViewport(this.viewport, this.getChildrenSortedByPrimaryAxis(), this.primaryAxis);
-  }
-}
-
-class ScrollBoxRenderable extends BoxRenderable {
-  static idCounter = 0;
-  internalId = 0;
-  wrapper;
-  viewport;
-  content;
-  horizontalScrollBar;
-  verticalScrollBar;
-  _focusable = true;
-  selectionListener;
-  autoScrollMouseX = 0;
-  autoScrollMouseY = 0;
-  autoScrollThresholdVertical = 3;
-  autoScrollThresholdHorizontal = 3;
-  autoScrollSpeedSlow = 6;
-  autoScrollSpeedMedium = 36;
-  autoScrollSpeedFast = 72;
-  isAutoScrolling = false;
-  cachedAutoScrollSpeed = 3;
-  autoScrollAccumulatorX = 0;
-  autoScrollAccumulatorY = 0;
-  _stickyScroll;
-  _stickyScrollTop = false;
-  _stickyScrollBottom = false;
-  _stickyScrollLeft = false;
-  _stickyScrollRight = false;
-  _stickyStart;
-  _hasManualScroll = false;
-  scrollAccel;
-  get stickyScroll() {
-    return this._stickyScroll;
-  }
-  set stickyScroll(value) {
-    this._stickyScroll = value;
-    this.updateStickyState();
-  }
-  get stickyStart() {
-    return this._stickyStart;
-  }
-  set stickyStart(value) {
-    this._stickyStart = value;
-    this.updateStickyState();
-  }
-  get scrollTop() {
-    return this.verticalScrollBar.scrollPosition;
+  get showScrollIndicator() {
+    return this._showScrollIndicator;
   }
-  set scrollTop(value) {
-    this.verticalScrollBar.scrollPosition = value;
-    this._hasManualScroll = true;
-    this.updateStickyState();
+  set showScrollIndicator(show) {
+    this._showScrollIndicator = show;
+    this.requestRender();
   }
-  get scrollLeft() {
-    return this.horizontalScrollBar.scrollPosition;
+  get showDescription() {
+    return this._showDescription;
   }
-  set scrollLeft(value) {
-    this.horizontalScrollBar.scrollPosition = value;
-    this._hasManualScroll = true;
-    this.updateStickyState();
+  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.requestRender();
+    }
   }
-  get scrollWidth() {
-    return this.horizontalScrollBar.scrollSize;
+  get wrapSelection() {
+    return this._wrapSelection;
   }
-  get scrollHeight() {
-    return this.verticalScrollBar.scrollSize;
+  set wrapSelection(wrap) {
+    this._wrapSelection = wrap;
   }
-  updateStickyState() {
-    if (!this._stickyScroll)
-      return;
-    const maxScrollTop = Math.max(0, this.scrollHeight - this.viewport.height);
-    const maxScrollLeft = Math.max(0, this.scrollWidth - this.viewport.width);
-    if (this.scrollTop <= 0) {
-      this._stickyScrollTop = true;
-      this._stickyScrollBottom = false;
-    } else if (this.scrollTop >= maxScrollTop) {
-      this._stickyScrollTop = false;
-      this._stickyScrollBottom = true;
-    } else {
-      this._stickyScrollTop = false;
-      this._stickyScrollBottom = false;
+  set backgroundColor(value) {
+    const newColor = parseColor(value ?? this._defaultOptions.backgroundColor);
+    if (this._backgroundColor !== newColor) {
+      this._backgroundColor = newColor;
+      this.requestRender();
     }
-    if (this.scrollLeft <= 0) {
-      this._stickyScrollLeft = true;
-      this._stickyScrollRight = false;
-    } else if (this.scrollLeft >= maxScrollLeft) {
-      this._stickyScrollLeft = false;
-      this._stickyScrollRight = true;
-    } else {
-      this._stickyScrollLeft = false;
-      this._stickyScrollRight = false;
+  }
+  set textColor(value) {
+    const newColor = parseColor(value ?? this._defaultOptions.textColor);
+    if (this._textColor !== newColor) {
+      this._textColor = newColor;
+      this.requestRender();
     }
   }
-  applyStickyStart(stickyStart) {
-    switch (stickyStart) {
-      case "top":
-        this._stickyScrollTop = true;
-        this._stickyScrollBottom = false;
-        this.verticalScrollBar.scrollPosition = 0;
-        break;
-      case "bottom":
-        this._stickyScrollTop = false;
-        this._stickyScrollBottom = true;
-        this.verticalScrollBar.scrollPosition = Math.max(0, this.scrollHeight - this.viewport.height);
-        break;
-      case "left":
-        this._stickyScrollLeft = true;
-        this._stickyScrollRight = false;
-        this.horizontalScrollBar.scrollPosition = 0;
-        break;
-      case "right":
-        this._stickyScrollLeft = false;
-        this._stickyScrollRight = true;
-        this.horizontalScrollBar.scrollPosition = Math.max(0, this.scrollWidth - this.viewport.width);
-        break;
+  set focusedBackgroundColor(value) {
+    const newColor = parseColor(value ?? this._defaultOptions.focusedBackgroundColor);
+    if (this._focusedBackgroundColor !== newColor) {
+      this._focusedBackgroundColor = newColor;
+      this.requestRender();
     }
   }
-  constructor(ctx, {
-    wrapperOptions,
-    viewportOptions,
-    contentOptions,
-    rootOptions,
-    scrollbarOptions,
-    verticalScrollbarOptions,
-    horizontalScrollbarOptions,
-    stickyScroll = false,
-    stickyStart,
-    scrollX = false,
-    scrollY = true,
-    scrollAcceleration,
-    ...options
-  }) {
-    super(ctx, {
-      flexDirection: "row",
-      alignItems: "stretch",
-      ...options,
-      ...rootOptions
-    });
-    this.internalId = ScrollBoxRenderable.idCounter++;
-    this._stickyScroll = stickyScroll;
-    this._stickyStart = stickyStart;
-    if (scrollAcceleration) {
-      this.scrollAccel = scrollAcceleration;
-    } else if (process.platform === "darwin") {
-      this.scrollAccel = new MacOSScrollAccel;
+  set focusedTextColor(value) {
+    const newColor = parseColor(value ?? this._defaultOptions.focusedTextColor);
+    if (this._focusedTextColor !== newColor) {
+      this._focusedTextColor = newColor;
+      this.requestRender();
     }
-    this.scrollAccel ??= new LinearScrollAccel;
-    this.wrapper = new BoxRenderable(ctx, {
-      flexDirection: "column",
-      flexGrow: 1,
-      ...wrapperOptions,
-      id: `scroll-box-wrapper-${this.internalId}`
-    });
-    super.add(this.wrapper);
-    this.viewport = new BoxRenderable(ctx, {
-      flexDirection: "column",
-      flexGrow: 1,
-      overflow: "hidden",
-      onSizeChange: () => {
-        this.recalculateBarProps();
-      },
-      ...viewportOptions,
-      id: `scroll-box-viewport-${this.internalId}`
-    });
-    this.wrapper.add(this.viewport);
-    this.content = new ContentRenderable(ctx, this.viewport, {
-      alignSelf: "flex-start",
-      flexShrink: 0,
-      ...scrollX ? { minWidth: "100%" } : { minWidth: "100%", maxWidth: "100%" },
-      ...scrollY ? { minHeight: "100%" } : { minHeight: "100%", maxHeight: "100%" },
-      onSizeChange: () => {
-        this.recalculateBarProps();
-      },
-      ...contentOptions,
-      id: `scroll-box-content-${this.internalId}`
-    });
-    this.viewport.add(this.content);
-    this.verticalScrollBar = new ScrollBarRenderable(ctx, {
-      ...scrollbarOptions,
-      ...verticalScrollbarOptions,
-      arrowOptions: {
-        ...scrollbarOptions?.arrowOptions,
-        ...verticalScrollbarOptions?.arrowOptions
-      },
-      id: `scroll-box-vertical-scrollbar-${this.internalId}`,
-      orientation: "vertical",
-      onChange: (position) => {
-        this.content.translateY = -position;
-        this._hasManualScroll = true;
-        this.updateStickyState();
-      }
-    });
-    super.add(this.verticalScrollBar);
-    this.horizontalScrollBar = new ScrollBarRenderable(ctx, {
-      ...scrollbarOptions,
-      ...horizontalScrollbarOptions,
-      arrowOptions: {
-        ...scrollbarOptions?.arrowOptions,
-        ...horizontalScrollbarOptions?.arrowOptions
-      },
-      id: `scroll-box-horizontal-scrollbar-${this.internalId}`,
-      orientation: "horizontal",
-      onChange: (position) => {
-        this.content.translateX = -position;
-        this._hasManualScroll = true;
-        this.updateStickyState();
-      }
-    });
-    this.wrapper.add(this.horizontalScrollBar);
-    this.recalculateBarProps();
-    if (stickyStart && stickyScroll) {
-      this.applyStickyStart(stickyStart);
+  }
+  set selectedBackgroundColor(value) {
+    const newColor = parseColor(value ?? this._defaultOptions.selectedBackgroundColor);
+    if (this._selectedBackgroundColor !== newColor) {
+      this._selectedBackgroundColor = newColor;
+      this.requestRender();
     }
-    this.selectionListener = () => {
-      const selection = this._ctx.getSelection();
-      if (!selection || !selection.isSelecting) {
-        this.stopAutoScroll();
-      }
-    };
-    this._ctx.on("selection", this.selectionListener);
   }
-  onUpdate(deltaTime) {
-    this.handleAutoScroll(deltaTime);
+  set selectedTextColor(value) {
+    const newColor = parseColor(value ?? this._defaultOptions.selectedTextColor);
+    if (this._selectedTextColor !== newColor) {
+      this._selectedTextColor = newColor;
+      this.requestRender();
+    }
   }
-  scrollBy(delta, unit = "absolute") {
-    if (typeof delta === "number") {
-      this.verticalScrollBar.scrollBy(delta, unit);
-    } else {
-      this.verticalScrollBar.scrollBy(delta.y, unit);
-      this.horizontalScrollBar.scrollBy(delta.x, unit);
+  set descriptionColor(value) {
+    const newColor = parseColor(value ?? this._defaultOptions.descriptionColor);
+    if (this._descriptionColor !== newColor) {
+      this._descriptionColor = newColor;
+      this.requestRender();
     }
-    this._hasManualScroll = true;
   }
-  scrollTo(position) {
-    if (typeof position === "number") {
-      this.scrollTop = position;
-    } else {
-      this.scrollTop = position.y;
-      this.scrollLeft = position.x;
+  set selectedDescriptionColor(value) {
+    const newColor = parseColor(value ?? this._defaultOptions.selectedDescriptionColor);
+    if (this._selectedDescriptionColor !== newColor) {
+      this._selectedDescriptionColor = newColor;
+      this.requestRender();
     }
   }
-  add(obj, index) {
-    return this.content.add(obj, index);
+  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.requestRender();
   }
-  insertBefore(obj, anchor) {
-    return this.content.insertBefore(obj, anchor);
+  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.requestRender();
   }
-  remove(id) {
-    this.content.remove(id);
+  set fastScrollStep(step) {
+    this._fastScrollStep = step;
   }
-  getChildren() {
-    return this.content.getChildren();
+}
+// src/renderables/TabSelect.ts
+var TabSelectRenderableEvents;
+((TabSelectRenderableEvents2) => {
+  TabSelectRenderableEvents2["SELECTION_CHANGED"] = "selectionChanged";
+  TabSelectRenderableEvents2["ITEM_SELECTED"] = "itemSelected";
+})(TabSelectRenderableEvents ||= {});
+function calculateDynamicHeight(showUnderline, showDescription) {
+  let height = 1;
+  if (showUnderline) {
+    height += 1;
   }
-  onMouseEvent(event) {
-    if (event.type === "scroll") {
-      let dir = event.scroll?.direction;
-      if (event.modifiers.shift)
-        dir = dir === "up" ? "left" : dir === "down" ? "right" : dir === "right" ? "down" : "up";
-      const baseDelta = event.scroll?.delta ?? 0;
-      const now = Date.now();
-      const multiplier = this.scrollAccel.tick(now);
-      if (dir === "up") {
-        this.scrollTop -= baseDelta * multiplier;
-      } else if (dir === "down") {
-        this.scrollTop += baseDelta * multiplier;
-      } else if (dir === "left") {
-        this.scrollLeft -= baseDelta * multiplier;
-      } else if (dir === "right") {
-        this.scrollLeft += baseDelta * multiplier;
+  if (showDescription) {
+    height += 1;
+  }
+  return height;
+}
+
+class TabSelectRenderable extends Renderable {
+  _focusable = true;
+  _options = [];
+  selectedIndex = 0;
+  scrollOffset = 0;
+  _tabWidth;
+  maxVisibleTabs;
+  _backgroundColor;
+  _textColor;
+  _focusedBackgroundColor;
+  _focusedTextColor;
+  _selectedBackgroundColor;
+  _selectedTextColor;
+  _selectedDescriptionColor;
+  _showScrollArrows;
+  _showDescription;
+  _showUnderline;
+  _wrapSelection;
+  constructor(ctx, options) {
+    const calculatedHeight = calculateDynamicHeight(options.showUnderline ?? true, options.showDescription ?? true);
+    super(ctx, { ...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");
+  }
+  calculateDynamicHeight() {
+    return calculateDynamicHeight(this._showUnderline, this._showDescription);
+  }
+  renderSelf(buffer, deltaTime) {
+    if (!this.visible || !this.frameBuffer)
+      return;
+    if (this.isDirty) {
+      this.refreshFrameBuffer();
+    }
+  }
+  refreshFrameBuffer() {
+    if (!this.frameBuffer || this._options.length === 0)
+      return;
+    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);
+    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;
+      if (tabX >= contentX + contentWidth)
+        break;
+      const actualTabWidth = Math.min(this._tabWidth, contentWidth - i * this._tabWidth);
+      if (isSelected) {
+        this.frameBuffer.fillRect(tabX, contentY, actualTabWidth, 1, this._selectedBackgroundColor);
+      }
+      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) {
+        const underlineY = contentY + 1;
+        const underlineBg = isSelected ? this._selectedBackgroundColor : bgColor;
+        this.frameBuffer.drawText("\u25AC".repeat(actualTabWidth), tabX, underlineY, nameColor, underlineBg);
       }
-      this._hasManualScroll = true;
-    }
-    if (event.type === "drag" && event.isSelecting) {
-      this.updateAutoScroll(event.x, event.y);
-    } else if (event.type === "up") {
-      this.stopAutoScroll();
     }
-  }
-  handleKeyPress(key) {
-    if (this.verticalScrollBar.handleKeyPress(key)) {
-      this._hasManualScroll = true;
-      this.scrollAccel.reset();
-      return true;
+    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 descContent = this.truncateText(selectedOption.description, contentWidth - 2);
+        this.frameBuffer.drawText(descContent, contentX + 1, descriptionY, descColor);
+      }
     }
-    if (this.horizontalScrollBar.handleKeyPress(key)) {
-      this._hasManualScroll = true;
-      this.scrollAccel.reset();
-      return true;
+    if (this._showScrollArrows && this._options.length > this.maxVisibleTabs) {
+      this.renderScrollArrowsToFrameBuffer(contentX, contentY, contentWidth, contentHeight);
     }
-    return false;
   }
-  startAutoScroll(mouseX, mouseY) {
-    this.stopAutoScroll();
-    this.autoScrollMouseX = mouseX;
-    this.autoScrollMouseY = mouseY;
-    this.cachedAutoScrollSpeed = this.getAutoScrollSpeed(mouseX, mouseY);
-    this.isAutoScrolling = true;
-    if (!this.live) {
-      this.live = true;
-    }
+  truncateText(text, maxWidth) {
+    if (text.length <= maxWidth)
+      return text;
+    return text.substring(0, Math.max(0, maxWidth - 1)) + "\u2026";
   }
-  updateAutoScroll(mouseX, mouseY) {
-    this.autoScrollMouseX = mouseX;
-    this.autoScrollMouseY = mouseY;
-    this.cachedAutoScrollSpeed = this.getAutoScrollSpeed(mouseX, mouseY);
-    const scrollX = this.getAutoScrollDirectionX(mouseX);
-    const scrollY = this.getAutoScrollDirectionY(mouseY);
-    if (scrollX === 0 && scrollY === 0) {
-      this.stopAutoScroll();
-    } else if (!this.isAutoScrolling) {
-      this.startAutoScroll(mouseX, mouseY);
+  renderScrollArrowsToFrameBuffer(contentX, contentY, contentWidth, contentHeight) {
+    if (!this.frameBuffer)
+      return;
+    const hasMoreLeft = this.scrollOffset > 0;
+    const hasMoreRight = this.scrollOffset + this.maxVisibleTabs < this._options.length;
+    if (hasMoreLeft) {
+      this.frameBuffer.drawText("\u2039", contentX, contentY, parseColor("#AAAAAA"));
     }
-  }
-  stopAutoScroll() {
-    const wasAutoScrolling = this.isAutoScrolling;
-    this.isAutoScrolling = false;
-    this.autoScrollAccumulatorX = 0;
-    this.autoScrollAccumulatorY = 0;
-    if (wasAutoScrolling && !this.hasOtherLiveReasons()) {
-      this.live = false;
+    if (hasMoreRight) {
+      this.frameBuffer.drawText("\u203A", contentX + contentWidth - 1, contentY, parseColor("#AAAAAA"));
     }
   }
-  hasOtherLiveReasons() {
-    return false;
+  setOptions(options) {
+    this._options = options;
+    this.selectedIndex = Math.min(this.selectedIndex, Math.max(0, options.length - 1));
+    this.updateScrollOffset();
+    this.requestRender();
   }
-  handleAutoScroll(deltaTime) {
-    if (!this.isAutoScrolling)
+  getSelectedOption() {
+    return this._options[this.selectedIndex] || null;
+  }
+  getSelectedIndex() {
+    return this.selectedIndex;
+  }
+  moveLeft() {
+    if (this.selectedIndex > 0) {
+      this.selectedIndex--;
+    } else if (this._wrapSelection && this._options.length > 0) {
+      this.selectedIndex = this._options.length - 1;
+    } else {
       return;
-    const scrollX = this.getAutoScrollDirectionX(this.autoScrollMouseX);
-    const scrollY = this.getAutoScrollDirectionY(this.autoScrollMouseY);
-    const scrollAmount = this.cachedAutoScrollSpeed * (deltaTime / 1000);
-    let scrolled = false;
-    if (scrollX !== 0) {
-      this.autoScrollAccumulatorX += scrollX * scrollAmount;
-      const integerScrollX = Math.trunc(this.autoScrollAccumulatorX);
-      if (integerScrollX !== 0) {
-        this.scrollLeft += integerScrollX;
-        this.autoScrollAccumulatorX -= integerScrollX;
-        scrolled = true;
-      }
-    }
-    if (scrollY !== 0) {
-      this.autoScrollAccumulatorY += scrollY * scrollAmount;
-      const integerScrollY = Math.trunc(this.autoScrollAccumulatorY);
-      if (integerScrollY !== 0) {
-        this.scrollTop += integerScrollY;
-        this.autoScrollAccumulatorY -= integerScrollY;
-        scrolled = true;
-      }
-    }
-    if (scrolled) {
-      this._ctx.requestSelectionUpdate();
     }
-    if (scrollX === 0 && scrollY === 0) {
-      this.stopAutoScroll();
+    this.updateScrollOffset();
+    this.requestRender();
+    this.emit("selectionChanged" /* SELECTION_CHANGED */, this.selectedIndex, this.getSelectedOption());
+  }
+  moveRight() {
+    if (this.selectedIndex < this._options.length - 1) {
+      this.selectedIndex++;
+    } else if (this._wrapSelection && this._options.length > 0) {
+      this.selectedIndex = 0;
+    } else {
+      return;
     }
+    this.updateScrollOffset();
+    this.requestRender();
+    this.emit("selectionChanged" /* SELECTION_CHANGED */, this.selectedIndex, this.getSelectedOption());
   }
-  getAutoScrollDirectionX(mouseX) {
-    const relativeX = mouseX - this.x;
-    const distToLeft = relativeX;
-    const distToRight = this.width - relativeX;
-    if (distToLeft <= this.autoScrollThresholdHorizontal) {
-      return this.scrollLeft > 0 ? -1 : 0;
-    } else if (distToRight <= this.autoScrollThresholdHorizontal) {
-      const maxScrollLeft = this.scrollWidth - this.viewport.width;
-      return this.scrollLeft < maxScrollLeft ? 1 : 0;
+  selectCurrent() {
+    const selected = this.getSelectedOption();
+    if (selected) {
+      this.emit("itemSelected" /* ITEM_SELECTED */, this.selectedIndex, selected);
     }
-    return 0;
   }
-  getAutoScrollDirectionY(mouseY) {
-    const relativeY = mouseY - this.y;
-    const distToTop = relativeY;
-    const distToBottom = this.height - relativeY;
-    if (distToTop <= this.autoScrollThresholdVertical) {
-      return this.scrollTop > 0 ? -1 : 0;
-    } else if (distToBottom <= this.autoScrollThresholdVertical) {
-      const maxScrollTop = this.scrollHeight - this.viewport.height;
-      return this.scrollTop < maxScrollTop ? 1 : 0;
+  setSelectedIndex(index) {
+    if (index >= 0 && index < this._options.length) {
+      this.selectedIndex = index;
+      this.updateScrollOffset();
+      this.requestRender();
+      this.emit("selectionChanged" /* SELECTION_CHANGED */, this.selectedIndex, this.getSelectedOption());
     }
-    return 0;
   }
-  getAutoScrollSpeed(mouseX, mouseY) {
-    const relativeX = mouseX - this.x;
-    const relativeY = mouseY - this.y;
-    const distToLeft = relativeX;
-    const distToRight = this.width - relativeX;
-    const distToTop = relativeY;
-    const distToBottom = this.height - relativeY;
-    const minDistance = Math.min(distToLeft, distToRight, distToTop, distToBottom);
-    if (minDistance <= 1) {
-      return this.autoScrollSpeedFast;
-    } else if (minDistance <= 2) {
-      return this.autoScrollSpeedMedium;
-    } else {
-      return this.autoScrollSpeedSlow;
+  updateScrollOffset() {
+    const halfVisible = Math.floor(this.maxVisibleTabs / 2);
+    const newScrollOffset = Math.max(0, Math.min(this.selectedIndex - halfVisible, this._options.length - this.maxVisibleTabs));
+    if (newScrollOffset !== this.scrollOffset) {
+      this.scrollOffset = newScrollOffset;
+      this.requestRender();
     }
   }
-  recalculateBarProps() {
-    this.verticalScrollBar.scrollSize = this.content.height;
-    this.verticalScrollBar.viewportSize = this.viewport.height;
-    this.horizontalScrollBar.scrollSize = this.content.width;
-    this.horizontalScrollBar.viewportSize = this.viewport.width;
-    if (this._stickyScroll) {
-      const newMaxScrollTop = Math.max(0, this.scrollHeight - this.viewport.height);
-      const newMaxScrollLeft = Math.max(0, this.scrollWidth - this.viewport.width);
-      if (this._stickyStart && !this._hasManualScroll) {
-        this.applyStickyStart(this._stickyStart);
-      } else {
-        if (this._stickyScrollTop) {
-          this.scrollTop = 0;
-        } else if (this._stickyScrollBottom && newMaxScrollTop > 0) {
-          this.scrollTop = newMaxScrollTop;
-        }
-        if (this._stickyScrollLeft) {
-          this.scrollLeft = 0;
-        } else if (this._stickyScrollRight && newMaxScrollLeft > 0) {
-          this.scrollLeft = newMaxScrollLeft;
-        }
-      }
+  onResize(width, height) {
+    this.maxVisibleTabs = Math.max(1, Math.floor(width / this._tabWidth));
+    this.updateScrollOffset();
+    this.requestRender();
+  }
+  setTabWidth(tabWidth) {
+    if (this._tabWidth === tabWidth)
+      return;
+    this._tabWidth = tabWidth;
+    this.maxVisibleTabs = Math.max(1, Math.floor(this.width / this._tabWidth));
+    this.updateScrollOffset();
+    this.requestRender();
+  }
+  getTabWidth() {
+    return this._tabWidth;
+  }
+  handleKeyPress(key) {
+    const keyName = typeof key === "string" ? key : key.name;
+    switch (keyName) {
+      case "left":
+      case "[":
+        this.moveLeft();
+        return true;
+      case "right":
+      case "]":
+        this.moveRight();
+        return true;
+      case "return":
+      case "enter":
+        this.selectCurrent();
+        return true;
     }
-    process.nextTick(() => {
-      this.requestRender();
-    });
+    return false;
   }
-  set rootOptions(options) {
-    Object.assign(this, 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.requestRender();
   }
-  set wrapperOptions(options) {
-    Object.assign(this.wrapper, options);
+  set backgroundColor(color) {
+    this._backgroundColor = parseColor(color);
     this.requestRender();
   }
-  set viewportOptions(options) {
-    Object.assign(this.viewport, options);
+  set textColor(color) {
+    this._textColor = parseColor(color);
     this.requestRender();
   }
-  set contentOptions(options) {
-    Object.assign(this.content, options);
+  set focusedBackgroundColor(color) {
+    this._focusedBackgroundColor = parseColor(color);
     this.requestRender();
   }
-  set scrollbarOptions(options) {
-    Object.assign(this.verticalScrollBar, options);
-    Object.assign(this.horizontalScrollBar, options);
+  set focusedTextColor(color) {
+    this._focusedTextColor = parseColor(color);
     this.requestRender();
   }
-  set verticalScrollbarOptions(options) {
-    Object.assign(this.verticalScrollBar, options);
+  set selectedBackgroundColor(color) {
+    this._selectedBackgroundColor = parseColor(color);
     this.requestRender();
   }
-  set horizontalScrollbarOptions(options) {
-    Object.assign(this.horizontalScrollBar, options);
+  set selectedTextColor(color) {
+    this._selectedTextColor = parseColor(color);
     this.requestRender();
   }
-  destroySelf() {
-    if (this.selectionListener) {
-      this._ctx.off("selection", this.selectionListener);
-      this.selectionListener = undefined;
+  set selectedDescriptionColor(color) {
+    this._selectedDescriptionColor = parseColor(color);
+    this.requestRender();
+  }
+  get showDescription() {
+    return this._showDescription;
+  }
+  set showDescription(show) {
+    if (this._showDescription !== show) {
+      this._showDescription = show;
+      const newHeight = this.calculateDynamicHeight();
+      this.height = newHeight;
+      this.requestRender();
     }
-    super.destroySelf();
   }
-}
-// src/renderables/composition/constructs.ts
-function Generic(props, ...children) {
-  return h(VRenderable, props || {}, ...children);
-}
-function Box(props, ...children) {
-  return h(BoxRenderable, props || {}, ...children);
-}
-function Text(props, ...children) {
-  return h(TextRenderable, props || {}, ...children);
-}
-function ASCIIFont(props, ...children) {
-  return h(ASCIIFontRenderable, props || {}, ...children);
-}
-function Input(props, ...children) {
-  return h(InputRenderable, props || {}, ...children);
-}
-function Select(props, ...children) {
-  return h(SelectRenderable, props || {}, ...children);
-}
-function TabSelect(props, ...children) {
-  return h(TabSelectRenderable, props || {}, ...children);
-}
-function FrameBuffer(props, ...children) {
-  return h(FrameBufferRenderable, props, ...children);
-}
-function StyledText2(props, ...children) {
-  const styledProps = props;
-  const textNodeOptions = {
-    ...styledProps,
-    attributes: styledProps?.attributes ?? 0
-  };
-  const textNode = new TextNodeRenderable(textNodeOptions);
-  for (const child of children) {
-    textNode.add(child);
+  get showUnderline() {
+    return this._showUnderline;
+  }
+  set showUnderline(show) {
+    if (this._showUnderline !== show) {
+      this._showUnderline = show;
+      const newHeight = this.calculateDynamicHeight();
+      this.height = newHeight;
+      this.requestRender();
+    }
+  }
+  get showScrollArrows() {
+    return this._showScrollArrows;
+  }
+  set showScrollArrows(show) {
+    if (this._showScrollArrows !== show) {
+      this._showScrollArrows = show;
+      this.requestRender();
+    }
+  }
+  get wrapSelection() {
+    return this._wrapSelection;
+  }
+  set wrapSelection(wrap) {
+    this._wrapSelection = wrap;
+  }
+  get tabWidth() {
+    return this._tabWidth;
+  }
+  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.requestRender();
   }
-  return textNode;
 }
-var vstyles = {
-  bold: (...children) => StyledText2({ attributes: TextAttributes.BOLD }, ...children),
-  italic: (...children) => StyledText2({ attributes: TextAttributes.ITALIC }, ...children),
-  underline: (...children) => StyledText2({ attributes: TextAttributes.UNDERLINE }, ...children),
-  dim: (...children) => StyledText2({ attributes: TextAttributes.DIM }, ...children),
-  blink: (...children) => StyledText2({ attributes: TextAttributes.BLINK }, ...children),
-  inverse: (...children) => StyledText2({ attributes: TextAttributes.INVERSE }, ...children),
-  hidden: (...children) => StyledText2({ attributes: TextAttributes.HIDDEN }, ...children),
-  strikethrough: (...children) => StyledText2({ attributes: TextAttributes.STRIKETHROUGH }, ...children),
-  boldItalic: (...children) => StyledText2({ attributes: TextAttributes.BOLD | TextAttributes.ITALIC }, ...children),
-  boldUnderline: (...children) => StyledText2({ attributes: TextAttributes.BOLD | TextAttributes.UNDERLINE }, ...children),
-  italicUnderline: (...children) => StyledText2({ attributes: TextAttributes.ITALIC | TextAttributes.UNDERLINE }, ...children),
-  boldItalicUnderline: (...children) => StyledText2({ attributes: TextAttributes.BOLD | TextAttributes.ITALIC | TextAttributes.UNDERLINE }, ...children),
-  color: (color, ...children) => StyledText2({ fg: color }, ...children),
-  bgColor: (bgColor, ...children) => StyledText2({ bg: bgColor }, ...children),
-  fg: (color, ...children) => StyledText2({ fg: color }, ...children),
-  bg: (bgColor, ...children) => StyledText2({ bg: bgColor }, ...children),
-  styled: (attributes = 0, ...children) => StyledText2({ attributes }, ...children)
-};
-// src/renderables/composition/VRenderable.ts
-class VRenderable extends Renderable {
-  options;
+// src/renderables/Text.ts
+class TextRenderable extends TextBufferRenderable {
+  _text;
+  _hasManualStyledText = false;
+  rootTextNode;
+  _contentDefaultOptions = {
+    content: ""
+  };
   constructor(ctx, options) {
     super(ctx, options);
-    this.options = options;
+    const content = options.content ?? this._contentDefaultOptions.content;
+    const styledText = typeof content === "string" ? stringToStyledText(content) : content;
+    this._text = styledText;
+    this._hasManualStyledText = options.content !== undefined && content !== "";
+    this.rootTextNode = new RootTextNodeRenderable(ctx, {
+      id: `${this.id}-root`,
+      fg: this._defaultFg,
+      bg: this._defaultBg,
+      attributes: this._defaultAttributes
+    }, this);
+    this.updateTextBuffer(styledText);
   }
-  renderSelf(buffer, deltaTime) {
-    if (this.options.render) {
-      this.options.render.call(this.options, buffer, deltaTime, this);
+  updateTextBuffer(styledText) {
+    this.textBuffer.setStyledText(styledText);
+    this.clearChunks(styledText);
+  }
+  clearChunks(styledText) {}
+  get content() {
+    return this._text;
+  }
+  get chunks() {
+    return this._text.chunks;
+  }
+  get textNode() {
+    return this.rootTextNode;
+  }
+  set content(value) {
+    this._hasManualStyledText = true;
+    const styledText = typeof value === "string" ? stringToStyledText(value) : value;
+    if (this._text !== styledText) {
+      this._text = styledText;
+      this.updateTextBuffer(styledText);
+      this.updateTextInfo();
+    }
+  }
+  insertChunk(chunk, index) {
+    super.insertChunk(chunk, index);
+    this.clearChunks(this._text);
+  }
+  removeChunkByObject(chunk) {
+    const index = this._text.chunks.indexOf(chunk);
+    if (index === -1)
+      return;
+    super.removeChunk(index);
+    this.clearChunks(this._text);
+  }
+  replaceChunkByObject(chunk, oldChunk) {
+    const index = this._text.chunks.indexOf(oldChunk);
+    if (index === -1)
+      return;
+    super.replaceChunk(index, chunk);
+    this.clearChunks(this._text);
+  }
+  updateTextFromNodes() {
+    if (this.rootTextNode.isDirty && !this._hasManualStyledText) {
+      const chunks = this.rootTextNode.gatherWithInheritedStyle({
+        fg: this._defaultFg,
+        bg: this._defaultBg,
+        attributes: this._defaultAttributes
+      });
+      this.textBuffer.setStyledText(new StyledText(chunks));
+      this.refreshLocalSelection();
+      this.yogaNode.markDirty();
     }
   }
+  add(obj, index) {
+    return this.rootTextNode.add(obj, index);
+  }
+  remove(id) {
+    this.rootTextNode.remove(id);
+  }
+  insertBefore(obj, anchor) {
+    this.rootTextNode.insertBefore(obj, anchor);
+    return this.rootTextNode.children.indexOf(obj);
+  }
+  getTextChildren() {
+    return this.rootTextNode.getChildren();
+  }
+  clear() {
+    this.rootTextNode.clear();
+    const emptyStyledText = stringToStyledText("");
+    this._text = emptyStyledText;
+    this.updateTextBuffer(emptyStyledText);
+    this.updateTextInfo();
+    this.requestRender();
+  }
+  onLifecyclePass = () => {
+    this.updateTextFromNodes();
+  };
+  onFgChanged(newColor) {
+    this.rootTextNode.fg = newColor;
+  }
+  onBgChanged(newColor) {
+    this.rootTextNode.bg = newColor;
+  }
+  onAttributesChanged(newAttributes) {
+    this.rootTextNode.attributes = newAttributes;
+  }
+  destroy() {
+    this.rootTextNode.children.length = 0;
+    super.destroy();
+  }
 }
 export {
   yellow,
@@ -4450,6 +4456,7 @@ export {
   TabSelect,
   SyntaxStyle,
   StyledText,
+  SliderRenderable,
   Selection,
   SelectRenderableEvents,
   SelectRenderable,
@@ -4458,6 +4465,7 @@ export {
   ScrollBarRenderable,
   RootTextNodeRenderable,
   RootRenderable,
+  RendererControlState,
   RenderableEvents,
   Renderable,
   RGBA,
@@ -4500,5 +4508,5 @@ export {
   ASCIIFont
 };
 
-//# debugId=F1FAFC796A264ABA64756E2164756E21
+//# debugId=6F0864CECE58138064756E2164756E21
 //# sourceMappingURL=index.js.map