@opentui/core 0.1.13 → 0.1.15

package/index.js

@@ -11,6 +11,7 @@ import {
   Gutter,
   KeyHandler,
   LayoutEvents,
+  LogLevel,
   MeasureMode,
   MouseButton,
   MouseEvent,
@@ -26,7 +27,6 @@ import {
   TerminalConsole,
   TextAttributes,
   TextBuffer,
-  TextSelectionHelper,
   TrackedNode,
   bg,
   bgBlack,
@@ -51,6 +51,7 @@ import {
   brightWhite,
   brightYellow,
   capture,
+  convertGlobalToLocalSelection,
   coordinateToCharacterIndex,
   createCliRenderer,
   createTextAttributes,
@@ -74,9 +75,11 @@ import {
   isDimensionType,
   isFlexBasisType,
   isMarginType,
+  isOverflowType,
   isPaddingType,
   isPositionType,
-  isPostionTypeType,
+  isPositionTypeType,
+  isRenderable,
   isSizeType,
   isVNode,
   isValidPercentage,
@@ -115,7 +118,7 @@ import {
   white,
   wrapWithDelegates,
   yellow
-} from "./index-4gez9k7q.js";
+} from "./index-sw194bbj.js";
 // src/post/filters.ts
 function applyScanlines(buffer, strength = 0.8, step = 2) {
   const width = buffer.width;
@@ -958,6 +961,7 @@ class Timeline {
   autoplay;
   onComplete;
   onPause;
+  stateChangeListeners = [];
   constructor(options = {}) {
     this.duration = options.duration || 1000;
     this.loop = options.loop === true;
@@ -965,6 +969,17 @@ class Timeline {
     this.onComplete = options.onComplete;
     this.onPause = options.onPause;
   }
+  addStateChangeListener(listener) {
+    this.stateChangeListeners.push(listener);
+  }
+  removeStateChangeListener(listener) {
+    this.stateChangeListeners = this.stateChangeListeners.filter((l) => l !== listener);
+  }
+  notifyStateChange() {
+    for (const listener of this.stateChangeListeners) {
+      listener(this);
+    }
+  }
   add(target, properties, startTime = 0) {
     const resolvedStartTime = typeof startTime === "string" ? 0 : startTime;
     const animationProperties = {};
@@ -1036,6 +1051,7 @@ class Timeline {
       }
     });
     this.isPlaying = true;
+    this.notifyStateChange();
     return this;
   }
   pause() {
@@ -1046,6 +1062,7 @@ class Timeline {
     if (this.onPause) {
       this.onPause();
     }
+    this.notifyStateChange();
     return this;
   }
   resetItems() {
@@ -1071,6 +1088,7 @@ class Timeline {
     this.currentTime = 0;
     this.isPlaying = true;
     this.resetItems();
+    this.notifyStateChange();
     return this;
   }
   update(deltaTime) {
@@ -1103,23 +1121,75 @@ class Timeline {
       if (this.onComplete) {
         this.onComplete();
       }
+      this.notifyStateChange();
     }
   }
 }
 
 class TimelineEngine {
   timelines = new Set;
+  renderer = null;
+  frameCallback = null;
+  isLive = false;
   defaults = {
     frameRate: 60
   };
+  attach(renderer) {
+    if (this.renderer) {
+      this.detach();
+    }
+    this.renderer = renderer;
+    this.frameCallback = async (deltaTime) => {
+      this.update(deltaTime);
+    };
+    renderer.setFrameCallback(this.frameCallback);
+  }
+  detach() {
+    if (this.renderer && this.frameCallback) {
+      this.renderer.removeFrameCallback(this.frameCallback);
+      if (this.isLive) {
+        this.renderer.dropLive();
+        this.isLive = false;
+      }
+    }
+    this.renderer = null;
+    this.frameCallback = null;
+  }
+  updateLiveState() {
+    if (!this.renderer)
+      return;
+    const hasRunningTimelines = Array.from(this.timelines).some((timeline) => !timeline.synced && timeline.isPlaying && !timeline.isComplete);
+    if (hasRunningTimelines && !this.isLive) {
+      this.renderer.requestLive();
+      this.isLive = true;
+    } else if (!hasRunningTimelines && this.isLive) {
+      this.renderer.dropLive();
+      this.isLive = false;
+    }
+  }
+  onTimelineStateChange = (timeline) => {
+    this.updateLiveState();
+  };
   register(timeline) {
-    this.timelines.add(timeline);
+    if (!this.timelines.has(timeline)) {
+      this.timelines.add(timeline);
+      timeline.addStateChangeListener(this.onTimelineStateChange);
+      this.updateLiveState();
+    }
   }
   unregister(timeline) {
-    this.timelines.delete(timeline);
+    if (this.timelines.has(timeline)) {
+      this.timelines.delete(timeline);
+      timeline.removeStateChangeListener(this.onTimelineStateChange);
+      this.updateLiveState();
+    }
   }
   clear() {
+    for (const timeline of this.timelines) {
+      timeline.removeStateChangeListener(this.onTimelineStateChange);
+    }
     this.timelines.clear();
+    this.updateLiveState();
   }
   update(deltaTime) {
     for (const timeline of this.timelines) {
@@ -1198,7 +1268,7 @@ class BoxRenderable extends Renderable {
   set customBorderChars(value) {
     this._customBorderCharsObj = value;
     this._customBorderChars = value ? borderCharsToArray(value) : undefined;
-    this.needsUpdate();
+    this.requestRender();
   }
   get backgroundColor() {
     return this._backgroundColor;
@@ -1207,7 +1277,7 @@ class BoxRenderable extends Renderable {
     const newColor = parseColor(value ?? this._defaultOptions.backgroundColor);
     if (this._backgroundColor !== newColor) {
       this._backgroundColor = newColor;
-      this.needsUpdate();
+      this.requestRender();
     }
   }
   get border() {
@@ -1218,7 +1288,7 @@ class BoxRenderable extends Renderable {
       this._border = value;
       this.borderSides = getBorderSides(value);
       this.applyYogaBorders();
-      this.needsUpdate();
+      this.requestRender();
     }
   }
   get borderStyle() {
@@ -1229,7 +1299,7 @@ class BoxRenderable extends Renderable {
     if (this._borderStyle !== _value) {
       this._borderStyle = _value;
       this._customBorderChars = undefined;
-      this.needsUpdate();
+      this.requestRender();
     }
   }
   get borderColor() {
@@ -1239,7 +1309,7 @@ class BoxRenderable extends Renderable {
     const newColor = parseColor(value ?? this._defaultOptions.borderColor);
     if (this._borderColor !== newColor) {
       this._borderColor = newColor;
-      this.needsUpdate();
+      this.requestRender();
     }
   }
   get focusedBorderColor() {
@@ -1250,7 +1320,7 @@ class BoxRenderable extends Renderable {
     if (this._focusedBorderColor !== newColor) {
       this._focusedBorderColor = newColor;
       if (this._focused) {
-        this.needsUpdate();
+        this.requestRender();
       }
     }
   }
@@ -1260,7 +1330,7 @@ class BoxRenderable extends Renderable {
   set title(value) {
     if (this._title !== value) {
       this._title = value;
-      this.needsUpdate();
+      this.requestRender();
     }
   }
   get titleAlignment() {
@@ -1269,7 +1339,7 @@ class BoxRenderable extends Renderable {
   set titleAlignment(value) {
     if (this._titleAlignment !== value) {
       this._titleAlignment = value;
-      this.needsUpdate();
+      this.requestRender();
     }
   }
   renderSelf(buffer) {
@@ -1289,13 +1359,29 @@ class BoxRenderable extends Renderable {
       titleAlignment: this._titleAlignment
     });
   }
+  getScissorRect() {
+    const baseRect = super.getScissorRect();
+    if (!this.borderSides.top && !this.borderSides.right && !this.borderSides.bottom && !this.borderSides.left) {
+      return baseRect;
+    }
+    const leftInset = this.borderSides.left ? 1 : 0;
+    const rightInset = this.borderSides.right ? 1 : 0;
+    const topInset = this.borderSides.top ? 1 : 0;
+    const bottomInset = this.borderSides.bottom ? 1 : 0;
+    return {
+      x: baseRect.x + leftInset,
+      y: baseRect.y + topInset,
+      width: Math.max(0, baseRect.width - leftInset - rightInset),
+      height: Math.max(0, baseRect.height - topInset - bottomInset)
+    };
+  }
   applyYogaBorders() {
     const node = this.layoutNode.yogaNode;
     node.setBorder(Edge.Left, this.borderSides.left ? 1 : 0);
     node.setBorder(Edge.Right, this.borderSides.right ? 1 : 0);
     node.setBorder(Edge.Top, this.borderSides.top ? 1 : 0);
     node.setBorder(Edge.Bottom, this.borderSides.bottom ? 1 : 0);
-    this.needsUpdate();
+    this.requestRender();
   }
   applyYogaGap(options) {
     const node = this.layoutNode.yogaNode;
@@ -1312,19 +1398,19 @@ class BoxRenderable extends Renderable {
   set gap(gap) {
     if (isGapType(gap)) {
       this.layoutNode.yogaNode.setGap(Gutter.All, gap);
-      this.needsUpdate();
+      this.requestRender();
     }
   }
   set rowGap(rowGap) {
     if (isGapType(rowGap)) {
       this.layoutNode.yogaNode.setGap(Gutter.Row, rowGap);
-      this.needsUpdate();
+      this.requestRender();
     }
   }
   set columnGap(columnGap) {
     if (isGapType(columnGap)) {
       this.layoutNode.yogaNode.setGap(Gutter.Column, columnGap);
-      this.needsUpdate();
+      this.requestRender();
     }
   }
 }
@@ -1336,7 +1422,8 @@ class FrameBufferRenderable extends Renderable {
     super(ctx, options);
     this.respectAlpha = options.respectAlpha || false;
     this.frameBuffer = OptimizedBuffer.create(options.width, options.height, this._ctx.widthMethod, {
-      respectAlpha: this.respectAlpha
+      respectAlpha: this.respectAlpha,
+      id: options.id || `framebufferrenderable-${this.id}`
     });
   }
   onResize(width, height) {
@@ -1345,7 +1432,7 @@ class FrameBufferRenderable extends Renderable {
     }
     this.frameBuffer.resize(width, height);
     super.onResize(width, height);
-    this.needsUpdate();
+    this.requestRender();
   }
   renderSelf(buffer) {
     if (!this.visible)
@@ -1360,96 +1447,136 @@ class FrameBufferRenderable extends Renderable {
 // src/renderables/Text.ts
 class TextRenderable extends Renderable {
   selectable = true;
-  _text = stringToStyledText("");
+  _text;
   _defaultFg;
   _defaultBg;
   _defaultAttributes;
   _selectionBg;
   _selectionFg;
-  selectionHelper;
+  lastLocalSelection = null;
   textBuffer;
-  _plainText = "";
   _lineInfo = { lineStarts: [], lineWidths: [] };
+  _defaultOptions = {
+    content: "",
+    fg: RGBA.fromValues(1, 1, 1, 1),
+    bg: RGBA.fromValues(0, 0, 0, 0),
+    selectionBg: undefined,
+    selectionFg: undefined,
+    selectable: true,
+    attributes: 0
+  };
   constructor(ctx, options) {
     super(ctx, options);
-    this.selectionHelper = new TextSelectionHelper(() => this.x, () => this.y, () => this._plainText.length, () => this._lineInfo);
-    const content = options.content ?? "";
-    this._text = typeof content === "string" ? stringToStyledText(content) : content;
-    this._defaultFg = options.fg ? parseColor(options.fg) : RGBA.fromValues(1, 1, 1, 1);
-    this._defaultBg = options.bg ? parseColor(options.bg) : RGBA.fromValues(0, 0, 0, 0);
-    this._defaultAttributes = options.attributes ?? 0;
-    this._selectionBg = options.selectionBg ? parseColor(options.selectionBg) : undefined;
-    this._selectionFg = options.selectionFg ? parseColor(options.selectionFg) : undefined;
-    this.selectable = options.selectable ?? true;
+    const content = options.content ?? this._defaultOptions.content;
+    const styledText = typeof content === "string" ? stringToStyledText(content) : content;
+    this._text = styledText;
+    this._defaultFg = parseColor(options.fg ?? this._defaultOptions.fg);
+    this._defaultBg = parseColor(options.bg ?? this._defaultOptions.bg);
+    this._defaultAttributes = options.attributes ?? this._defaultOptions.attributes;
+    this._selectionBg = options.selectionBg ? parseColor(options.selectionBg) : this._defaultOptions.selectionBg;
+    this._selectionFg = options.selectionFg ? parseColor(options.selectionFg) : this._defaultOptions.selectionFg;
+    this.selectable = options.selectable ?? this._defaultOptions.selectable;
     this.textBuffer = TextBuffer.create(64, this._ctx.widthMethod);
     this.textBuffer.setDefaultFg(this._defaultFg);
     this.textBuffer.setDefaultBg(this._defaultBg);
     this.textBuffer.setDefaultAttributes(this._defaultAttributes);
     this.setupMeasureFunc();
-    this.updateTextInfo();
+    this.updateTextInfo(styledText);
   }
   get content() {
     return this._text;
   }
   set content(value) {
-    this._text = typeof value === "string" ? stringToStyledText(value) : value;
-    this.updateTextInfo();
+    const styledText = typeof value === "string" ? stringToStyledText(value) : value;
+    this._text = styledText;
+    this.updateTextInfo(styledText);
   }
   get fg() {
     return this._defaultFg;
   }
   set fg(value) {
-    if (value) {
-      this._defaultFg = parseColor(value);
+    const newColor = parseColor(value ?? this._defaultOptions.fg);
+    if (this._defaultFg !== newColor) {
+      this._defaultFg = newColor;
       this.textBuffer.setDefaultFg(this._defaultFg);
-      this.needsUpdate();
+      this.requestRender();
+    }
+  }
+  get selectionBg() {
+    return this._selectionBg;
+  }
+  set selectionBg(value) {
+    const newColor = value ? parseColor(value) : this._defaultOptions.selectionBg;
+    if (this._selectionBg !== newColor) {
+      this._selectionBg = newColor;
+      if (this.lastLocalSelection) {
+        this.updateLocalSelection(this.lastLocalSelection);
+      }
+      this.requestRender();
+    }
+  }
+  get selectionFg() {
+    return this._selectionFg;
+  }
+  set selectionFg(value) {
+    const newColor = value ? parseColor(value) : this._defaultOptions.selectionFg;
+    if (this._selectionFg !== newColor) {
+      this._selectionFg = newColor;
+      if (this.lastLocalSelection) {
+        this.updateLocalSelection(this.lastLocalSelection);
+      }
+      this.requestRender();
     }
   }
   get bg() {
     return this._defaultBg;
   }
   set bg(value) {
-    if (value) {
-      this._defaultBg = parseColor(value);
+    const newColor = parseColor(value ?? this._defaultOptions.bg);
+    if (this._defaultBg !== newColor) {
+      this._defaultBg = newColor;
       this.textBuffer.setDefaultBg(this._defaultBg);
-      this.needsUpdate();
+      this.requestRender();
     }
   }
   get attributes() {
     return this._defaultAttributes;
   }
   set attributes(value) {
-    this._defaultAttributes = value;
-    this.textBuffer.setDefaultAttributes(this._defaultAttributes);
-    this.needsUpdate();
+    if (this._defaultAttributes !== value) {
+      this._defaultAttributes = value;
+      this.textBuffer.setDefaultAttributes(this._defaultAttributes);
+      this.requestRender();
+    }
   }
   onResize(width, height) {
-    const changed = this.selectionHelper.reevaluateSelection(width, height);
-    if (changed) {
-      this.syncSelectionToTextBuffer();
-      this.needsUpdate();
+    if (this.lastLocalSelection) {
+      const changed = this.updateLocalSelection(this.lastLocalSelection);
+      if (changed) {
+        this.requestRender();
+      }
     }
   }
-  syncSelectionToTextBuffer() {
-    const selection = this.selectionHelper.getSelection();
-    if (selection) {
-      this.textBuffer.setSelection(selection.start, selection.end, this._selectionBg, this._selectionFg);
-    } else {
-      this.textBuffer.resetSelection();
+  updateLocalSelection(localSelection) {
+    if (!localSelection?.isActive) {
+      this.textBuffer.resetLocalSelection();
+      return true;
     }
+    return this.textBuffer.setLocalSelection(localSelection.anchorX, localSelection.anchorY, localSelection.focusX, localSelection.focusY, this._selectionBg, this._selectionFg);
   }
-  updateTextInfo() {
-    this._plainText = this._text.toString();
-    this.updateTextBuffer();
+  updateTextInfo(styledText) {
+    this.updateTextBuffer(styledText);
     const lineInfo = this.textBuffer.lineInfo;
     this._lineInfo.lineStarts = lineInfo.lineStarts;
     this._lineInfo.lineWidths = lineInfo.lineWidths;
-    const changed = this.selectionHelper.reevaluateSelection(this.width, this.height);
-    if (changed) {
-      this.syncSelectionToTextBuffer();
+    if (this.lastLocalSelection) {
+      const changed = this.updateLocalSelection(this.lastLocalSelection);
+      if (changed) {
+        this.requestRender();
+      }
     }
     this.layoutNode.yogaNode.markDirty();
-    this.needsUpdate();
+    this.requestRender();
   }
   setupMeasureFunc() {
     const measureFunc = (width, widthMode, height, heightMode) => {
@@ -1475,27 +1602,32 @@ class TextRenderable extends Renderable {
     this.layoutNode.yogaNode.setMeasureFunc(measureFunc);
   }
   shouldStartSelection(x, y) {
-    return this.selectionHelper.shouldStartSelection(x, y, this.width, this.height);
+    if (!this.selectable)
+      return false;
+    const localX = x - this.x;
+    const localY = y - this.y;
+    return localX >= 0 && localX < this.width && localY >= 0 && localY < this.height;
   }
   onSelectionChanged(selection) {
-    const changed = this.selectionHelper.onSelectionChanged(selection, this.width, this.height);
+    const localSelection = convertGlobalToLocalSelection(selection, this.x, this.y);
+    this.lastLocalSelection = localSelection;
+    const changed = this.updateLocalSelection(localSelection);
     if (changed) {
-      this.syncSelectionToTextBuffer();
-      this.needsUpdate();
+      this.requestRender();
     }
-    return this.selectionHelper.hasSelection();
+    return this.hasSelection();
   }
   getSelectedText() {
-    const selection = this.selectionHelper.getSelection();
-    if (!selection)
-      return "";
-    return this._plainText.slice(selection.start, selection.end);
+    return this.textBuffer.getSelectedText();
   }
   hasSelection() {
-    return this.selectionHelper.hasSelection();
+    return this.textBuffer.hasSelection();
+  }
+  getSelection() {
+    return this.textBuffer.getSelection();
   }
-  updateTextBuffer() {
-    this.textBuffer.setStyledText(this._text);
+  updateTextBuffer(styledText) {
+    this.textBuffer.setStyledText(styledText);
   }
   renderSelf(buffer) {
     if (this.textBuffer.ptr) {
@@ -1522,6 +1654,7 @@ class ASCIIFontRenderable extends FrameBufferRenderable {
   _bg;
   _selectionBg;
   _selectionFg;
+  lastLocalSelection = null;
   selectionHelper;
   constructor(ctx, options) {
     const font = options.font || "tiny";
@@ -1540,7 +1673,7 @@ class ASCIIFontRenderable extends FrameBufferRenderable {
     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.x, () => this.y, () => this._text, () => this._font);
+    this.selectionHelper = new ASCIIFontSelectionHelper(() => this._text, () => this._font);
     this.renderFontToBuffer();
   }
   get text() {
@@ -1549,9 +1682,11 @@ class ASCIIFontRenderable extends FrameBufferRenderable {
   set text(value) {
     this._text = value;
     this.updateDimensions();
-    this.selectionHelper.reevaluateSelection(this.width, this.height);
+    if (this.lastLocalSelection) {
+      this.selectionHelper.onLocalSelectionChanged(this.lastLocalSelection, this.width, this.height);
+    }
     this.renderFontToBuffer();
-    this.needsUpdate();
+    this.requestRender();
   }
   get font() {
     return this._font;
@@ -1559,9 +1694,11 @@ class ASCIIFontRenderable extends FrameBufferRenderable {
   set font(value) {
     this._font = value;
     this.updateDimensions();
-    this.selectionHelper.reevaluateSelection(this.width, this.height);
+    if (this.lastLocalSelection) {
+      this.selectionHelper.onLocalSelectionChanged(this.lastLocalSelection, this.width, this.height);
+    }
     this.renderFontToBuffer();
-    this.needsUpdate();
+    this.requestRender();
   }
   get fg() {
     return this._fg;
@@ -1573,7 +1710,7 @@ class ASCIIFontRenderable extends FrameBufferRenderable {
       this._fg = [typeof value === "string" ? parseColor(value) : value];
     }
     this.renderFontToBuffer();
-    this.needsUpdate();
+    this.requestRender();
   }
   get bg() {
     return this._bg;
@@ -1581,7 +1718,7 @@ class ASCIIFontRenderable extends FrameBufferRenderable {
   set bg(value) {
     this._bg = typeof value === "string" ? parseColor(value) : value;
     this.renderFontToBuffer();
-    this.needsUpdate();
+    this.requestRender();
   }
   updateDimensions() {
     const measurements = measureText({ text: this._text, font: this._font });
@@ -1589,15 +1726,19 @@ class ASCIIFontRenderable extends FrameBufferRenderable {
     this.height = measurements.height;
   }
   shouldStartSelection(x, y) {
-    return this.selectionHelper.shouldStartSelection(x, y, this.width, this.height);
+    const localX = x - this.x;
+    const localY = y - this.y;
+    return this.selectionHelper.shouldStartSelection(localX, localY, this.width, this.height);
   }
   onSelectionChanged(selection) {
-    const changed = this.selectionHelper.onSelectionChanged(selection, this.width, this.height);
+    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.needsUpdate();
+      this.requestRender();
     }
-    return this.selectionHelper.hasSelection();
+    return changed;
   }
   getSelectedText() {
     const selection = this.selectionHelper.getSelection();
@@ -1771,7 +1912,7 @@ class InputRenderable extends Renderable {
     if (this._value !== newValue) {
       this._value = newValue;
       this._cursorPosition = Math.min(this._cursorPosition, this._value.length);
-      this.needsUpdate();
+      this.requestRender();
       this.updateCursorPosition();
       this.emit("input" /* INPUT */, this._value);
     }
@@ -1779,14 +1920,14 @@ class InputRenderable extends Renderable {
   set placeholder(placeholder) {
     if (this._placeholder !== placeholder) {
       this._placeholder = placeholder;
-      this.needsUpdate();
+      this.requestRender();
     }
   }
   set cursorPosition(position) {
     const newPosition = Math.max(0, Math.min(position, this._value.length));
     if (this._cursorPosition !== newPosition) {
       this._cursorPosition = newPosition;
-      this.needsUpdate();
+      this.requestRender();
       this.updateCursorPosition();
     }
   }
@@ -1798,7 +1939,7 @@ class InputRenderable extends Renderable {
     const afterCursor = this._value.substring(this._cursorPosition);
     this._value = beforeCursor + text + afterCursor;
     this._cursorPosition += text.length;
-    this.needsUpdate();
+    this.requestRender();
     this.updateCursorPosition();
     this.emit("input" /* INPUT */, this._value);
   }
@@ -1808,14 +1949,14 @@ class InputRenderable extends Renderable {
       const afterCursor = this._value.substring(this._cursorPosition);
       this._value = beforeCursor + afterCursor;
       this._cursorPosition--;
-      this.needsUpdate();
+      this.requestRender();
       this.updateCursorPosition();
       this.emit("input" /* INPUT */, this._value);
     } else if (direction === "forward" && this._cursorPosition < this._value.length) {
       const beforeCursor = this._value.substring(0, this._cursorPosition);
       const afterCursor = this._value.substring(this._cursorPosition + 1);
       this._value = beforeCursor + afterCursor;
-      this.needsUpdate();
+      this.requestRender();
       this.updateCursorPosition();
       this.emit("input" /* INPUT */, this._value);
     }
@@ -1863,49 +2004,49 @@ class InputRenderable extends Renderable {
     this._maxLength = maxLength;
     if (this._value.length > maxLength) {
       this._value = this._value.substring(0, maxLength);
-      this.needsUpdate();
+      this.requestRender();
     }
   }
   set backgroundColor(value) {
     const newColor = parseColor(value ?? this._defaultOptions.backgroundColor);
     if (this._backgroundColor !== newColor) {
       this._backgroundColor = newColor;
-      this.needsUpdate();
+      this.requestRender();
     }
   }
   set textColor(value) {
     const newColor = parseColor(value ?? this._defaultOptions.textColor);
     if (this._textColor !== newColor) {
       this._textColor = newColor;
-      this.needsUpdate();
+      this.requestRender();
     }
   }
   set focusedBackgroundColor(value) {
     const newColor = parseColor(value ?? this._defaultOptions.focusedBackgroundColor);
     if (this._focusedBackgroundColor !== newColor) {
       this._focusedBackgroundColor = newColor;
-      this.needsUpdate();
+      this.requestRender();
     }
   }
   set focusedTextColor(value) {
     const newColor = parseColor(value ?? this._defaultOptions.focusedTextColor);
     if (this._focusedTextColor !== newColor) {
       this._focusedTextColor = newColor;
-      this.needsUpdate();
+      this.requestRender();
     }
   }
   set placeholderColor(value) {
     const newColor = parseColor(value ?? this._defaultOptions.placeholderColor);
     if (this._placeholderColor !== newColor) {
       this._placeholderColor = newColor;
-      this.needsUpdate();
+      this.requestRender();
     }
   }
   set cursorColor(value) {
     const newColor = parseColor(value ?? this._defaultOptions.cursorColor);
     if (this._cursorColor !== newColor) {
       this._cursorColor = newColor;
-      this.needsUpdate();
+      this.requestRender();
     }
   }
   updateFromLayout() {
@@ -1990,7 +2131,7 @@ class SelectRenderable extends Renderable {
     this._descriptionColor = parseColor(options.descriptionColor || this._defaultOptions.descriptionColor);
     this._selectedDescriptionColor = parseColor(options.selectedDescriptionColor || this._defaultOptions.selectedDescriptionColor);
     this._fastScrollStep = options.fastScrollStep || this._defaultOptions.fastScrollStep;
-    this.needsUpdate();
+    this.requestRender();
   }
   renderSelf(buffer, deltaTime) {
     if (!this.visible || !this.frameBuffer)
@@ -2066,7 +2207,7 @@ class SelectRenderable extends Renderable {
     this._options = options;
     this.selectedIndex = Math.min(this.selectedIndex, Math.max(0, options.length - 1));
     this.updateScrollOffset();
-    this.needsUpdate();
+    this.requestRender();
   }
   getSelectedOption() {
     return this._options[this.selectedIndex] || null;
@@ -2084,7 +2225,7 @@ class SelectRenderable extends Renderable {
       this.selectedIndex = 0;
     }
     this.updateScrollOffset();
-    this.needsUpdate();
+    this.requestRender();
     this.emit("selectionChanged" /* SELECTION_CHANGED */, this.selectedIndex, this.getSelectedOption());
   }
   moveDown(steps = 1) {
@@ -2097,7 +2238,7 @@ class SelectRenderable extends Renderable {
       this.selectedIndex = this._options.length - 1;
     }
     this.updateScrollOffset();
-    this.needsUpdate();
+    this.requestRender();
     this.emit("selectionChanged" /* SELECTION_CHANGED */, this.selectedIndex, this.getSelectedOption());
   }
   selectCurrent() {
@@ -2110,7 +2251,7 @@ class SelectRenderable extends Renderable {
     if (index >= 0 && index < this._options.length) {
       this.selectedIndex = index;
       this.updateScrollOffset();
-      this.needsUpdate();
+      this.requestRender();
       this.emit("selectionChanged" /* SELECTION_CHANGED */, this.selectedIndex, this.getSelectedOption());
     }
   }
@@ -2121,13 +2262,13 @@ class SelectRenderable extends Renderable {
     const newScrollOffset = Math.max(0, Math.min(this.selectedIndex - halfVisible, this._options.length - this.maxVisibleItems));
     if (newScrollOffset !== this.scrollOffset) {
       this.scrollOffset = newScrollOffset;
-      this.needsUpdate();
+      this.requestRender();
     }
   }
   onResize(width, height) {
     this.maxVisibleItems = Math.max(1, Math.floor(height / this.linesPerItem));
     this.updateScrollOffset();
-    this.needsUpdate();
+    this.requestRender();
   }
   handleKeyPress(key) {
     const keyName = typeof key === "string" ? key : key.name;
@@ -2153,7 +2294,7 @@ class SelectRenderable extends Renderable {
   }
   set showScrollIndicator(show) {
     this._showScrollIndicator = show;
-    this.needsUpdate();
+    this.requestRender();
   }
   get showDescription() {
     return this._showDescription;
@@ -2165,7 +2306,7 @@ class SelectRenderable extends Renderable {
       this.linesPerItem += this._itemSpacing;
       this.maxVisibleItems = Math.max(1, Math.floor(this.height / this.linesPerItem));
       this.updateScrollOffset();
-      this.needsUpdate();
+      this.requestRender();
     }
   }
   get wrapSelection() {
@@ -2178,56 +2319,56 @@ class SelectRenderable extends Renderable {
     const newColor = parseColor(value ?? this._defaultOptions.backgroundColor);
     if (this._backgroundColor !== newColor) {
       this._backgroundColor = newColor;
-      this.needsUpdate();
+      this.requestRender();
     }
   }
   set textColor(value) {
     const newColor = parseColor(value ?? this._defaultOptions.textColor);
     if (this._textColor !== newColor) {
       this._textColor = newColor;
-      this.needsUpdate();
+      this.requestRender();
     }
   }
   set focusedBackgroundColor(value) {
     const newColor = parseColor(value ?? this._defaultOptions.focusedBackgroundColor);
     if (this._focusedBackgroundColor !== newColor) {
       this._focusedBackgroundColor = newColor;
-      this.needsUpdate();
+      this.requestRender();
     }
   }
   set focusedTextColor(value) {
     const newColor = parseColor(value ?? this._defaultOptions.focusedTextColor);
     if (this._focusedTextColor !== newColor) {
       this._focusedTextColor = newColor;
-      this.needsUpdate();
+      this.requestRender();
     }
   }
   set selectedBackgroundColor(value) {
     const newColor = parseColor(value ?? this._defaultOptions.selectedBackgroundColor);
     if (this._selectedBackgroundColor !== newColor) {
       this._selectedBackgroundColor = newColor;
-      this.needsUpdate();
+      this.requestRender();
     }
   }
   set selectedTextColor(value) {
     const newColor = parseColor(value ?? this._defaultOptions.selectedTextColor);
     if (this._selectedTextColor !== newColor) {
       this._selectedTextColor = newColor;
-      this.needsUpdate();
+      this.requestRender();
     }
   }
   set descriptionColor(value) {
     const newColor = parseColor(value ?? this._defaultOptions.descriptionColor);
     if (this._descriptionColor !== newColor) {
       this._descriptionColor = newColor;
-      this.needsUpdate();
+      this.requestRender();
     }
   }
   set selectedDescriptionColor(value) {
     const newColor = parseColor(value ?? this._defaultOptions.selectedDescriptionColor);
     if (this._selectedDescriptionColor !== newColor) {
       this._selectedDescriptionColor = newColor;
-      this.needsUpdate();
+      this.requestRender();
     }
   }
   set font(font) {
@@ -2237,7 +2378,7 @@ class SelectRenderable extends Renderable {
     this.linesPerItem += this._itemSpacing;
     this.maxVisibleItems = Math.max(1, Math.floor(this.height / this.linesPerItem));
     this.updateScrollOffset();
-    this.needsUpdate();
+    this.requestRender();
   }
   set itemSpacing(spacing) {
     this._itemSpacing = spacing;
@@ -2245,7 +2386,7 @@ class SelectRenderable extends Renderable {
     this.linesPerItem += this._itemSpacing;
     this.maxVisibleItems = Math.max(1, Math.floor(this.height / this.linesPerItem));
     this.updateScrollOffset();
-    this.needsUpdate();
+    this.requestRender();
   }
   set fastScrollStep(step) {
     this._fastScrollStep = step;
@@ -2379,7 +2520,7 @@ class TabSelectRenderable extends Renderable {
     this._options = options;
     this.selectedIndex = Math.min(this.selectedIndex, Math.max(0, options.length - 1));
     this.updateScrollOffset();
-    this.needsUpdate();
+    this.requestRender();
   }
   getSelectedOption() {
     return this._options[this.selectedIndex] || null;
@@ -2396,7 +2537,7 @@ class TabSelectRenderable extends Renderable {
       return;
     }
     this.updateScrollOffset();
-    this.needsUpdate();
+    this.requestRender();
     this.emit("selectionChanged" /* SELECTION_CHANGED */, this.selectedIndex, this.getSelectedOption());
   }
   moveRight() {
@@ -2408,7 +2549,7 @@ class TabSelectRenderable extends Renderable {
       return;
     }
     this.updateScrollOffset();
-    this.needsUpdate();
+    this.requestRender();
     this.emit("selectionChanged" /* SELECTION_CHANGED */, this.selectedIndex, this.getSelectedOption());
   }
   selectCurrent() {
@@ -2421,7 +2562,7 @@ class TabSelectRenderable extends Renderable {
     if (index >= 0 && index < this._options.length) {
       this.selectedIndex = index;
       this.updateScrollOffset();
-      this.needsUpdate();
+      this.requestRender();
       this.emit("selectionChanged" /* SELECTION_CHANGED */, this.selectedIndex, this.getSelectedOption());
     }
   }
@@ -2430,13 +2571,13 @@ class TabSelectRenderable extends Renderable {
     const newScrollOffset = Math.max(0, Math.min(this.selectedIndex - halfVisible, this._options.length - this.maxVisibleTabs));
     if (newScrollOffset !== this.scrollOffset) {
       this.scrollOffset = newScrollOffset;
-      this.needsUpdate();
+      this.requestRender();
     }
   }
   onResize(width, height) {
     this.maxVisibleTabs = Math.max(1, Math.floor(width / this._tabWidth));
     this.updateScrollOffset();
-    this.needsUpdate();
+    this.requestRender();
   }
   setTabWidth(tabWidth) {
     if (this._tabWidth === tabWidth)
@@ -2444,7 +2585,7 @@ class TabSelectRenderable extends Renderable {
     this._tabWidth = tabWidth;
     this.maxVisibleTabs = Math.max(1, Math.floor(this.width / this._tabWidth));
     this.updateScrollOffset();
-    this.needsUpdate();
+    this.requestRender();
   }
   getTabWidth() {
     return this._tabWidth;
@@ -2474,35 +2615,35 @@ class TabSelectRenderable extends Renderable {
     this._options = options;
     this.selectedIndex = Math.min(this.selectedIndex, Math.max(0, options.length - 1));
     this.updateScrollOffset();
-    this.needsUpdate();
+    this.requestRender();
   }
   set backgroundColor(color) {
     this._backgroundColor = parseColor(color);
-    this.needsUpdate();
+    this.requestRender();
   }
   set textColor(color) {
     this._textColor = parseColor(color);
-    this.needsUpdate();
+    this.requestRender();
   }
   set focusedBackgroundColor(color) {
     this._focusedBackgroundColor = parseColor(color);
-    this.needsUpdate();
+    this.requestRender();
   }
   set focusedTextColor(color) {
     this._focusedTextColor = parseColor(color);
-    this.needsUpdate();
+    this.requestRender();
   }
   set selectedBackgroundColor(color) {
     this._selectedBackgroundColor = parseColor(color);
-    this.needsUpdate();
+    this.requestRender();
   }
   set selectedTextColor(color) {
     this._selectedTextColor = parseColor(color);
-    this.needsUpdate();
+    this.requestRender();
   }
   set selectedDescriptionColor(color) {
     this._selectedDescriptionColor = parseColor(color);
-    this.needsUpdate();
+    this.requestRender();
   }
   get showDescription() {
     return this._showDescription;
@@ -2512,7 +2653,7 @@ class TabSelectRenderable extends Renderable {
       this._showDescription = show;
       const newHeight = this.calculateDynamicHeight();
       this.height = newHeight;
-      this.needsUpdate();
+      this.requestRender();
     }
   }
   get showUnderline() {
@@ -2523,7 +2664,7 @@ class TabSelectRenderable extends Renderable {
       this._showUnderline = show;
       const newHeight = this.calculateDynamicHeight();
       this.height = newHeight;
-      this.needsUpdate();
+      this.requestRender();
     }
   }
   get showScrollArrows() {
@@ -2532,7 +2673,7 @@ class TabSelectRenderable extends Renderable {
   set showScrollArrows(show) {
     if (this._showScrollArrows !== show) {
       this._showScrollArrows = show;
-      this.needsUpdate();
+      this.requestRender();
     }
   }
   get wrapSelection() {
@@ -2550,7 +2691,792 @@ class TabSelectRenderable extends Renderable {
     this._tabWidth = tabWidth;
     this.maxVisibleTabs = Math.max(1, Math.floor(this.width / this._tabWidth));
     this.updateScrollOffset();
-    this.needsUpdate();
+    this.requestRender();
+  }
+}
+// src/renderables/Slider.ts
+var defaultThumbBackgroundColor = RGBA.fromHex("#9a9ea3");
+var defaultTrackBackgroundColor = RGBA.fromHex("#252527");
+
+class SliderRenderable extends Renderable {
+  orientation;
+  _thumbSize;
+  _thumbPosition;
+  _backgroundColor;
+  _foregroundColor;
+  _onChange;
+  constructor(ctx, options) {
+    super(ctx, options);
+    this.orientation = options.orientation;
+    this._thumbSize = options.thumbSize ?? 1;
+    this._thumbPosition = options.thumbPosition ?? 0;
+    this._onChange = options.onChange;
+    this._backgroundColor = options.backgroundColor ? parseColor(options.backgroundColor) : defaultTrackBackgroundColor;
+    this._foregroundColor = options.foregroundColor ? parseColor(options.foregroundColor) : defaultThumbBackgroundColor;
+    this.setupMouseHandling();
+  }
+  get thumbSize() {
+    return this._thumbSize;
+  }
+  set thumbSize(value) {
+    const clamped = Math.max(1, Math.min(value, this.orientation === "vertical" ? this.height : this.width));
+    if (clamped !== this._thumbSize) {
+      this._thumbSize = clamped;
+      this.requestRender();
+    }
+  }
+  get thumbPosition() {
+    return this._thumbPosition;
+  }
+  set thumbPosition(value) {
+    const clamped = Math.max(0, Math.min(1, value));
+    if (clamped !== this._thumbPosition) {
+      this._thumbPosition = clamped;
+      this._onChange?.(clamped);
+      this.emit("change", { position: clamped });
+      this.requestRender();
+    }
+  }
+  get backgroundColor() {
+    return this._backgroundColor;
+  }
+  set backgroundColor(value) {
+    this._backgroundColor = parseColor(value);
+    this.requestRender();
+  }
+  get foregroundColor() {
+    return this._foregroundColor;
+  }
+  set foregroundColor(value) {
+    this._foregroundColor = parseColor(value);
+    this.requestRender();
+  }
+  setupMouseHandling() {
+    let isDragging = false;
+    let relativeStartPos = 0;
+    this.onMouseDown = (event) => {
+      event.stopPropagation();
+      isDragging = true;
+      const thumbRect = this.getThumbRect();
+      const isOnThumb = event.x >= thumbRect.x && event.x < thumbRect.x + thumbRect.width && event.y >= thumbRect.y && event.y < thumbRect.y + thumbRect.height;
+      if (isOnThumb) {
+        relativeStartPos = this.orientation === "vertical" ? event.y - thumbRect.y : event.x - thumbRect.x;
+      } else {
+        relativeStartPos = this.orientation === "vertical" ? thumbRect.height / 2 : thumbRect.width / 2;
+      }
+      this.updatePositionFromMouse(event, relativeStartPos);
+    };
+    this.onMouseDrag = (event) => {
+      if (!isDragging)
+        return;
+      event.stopPropagation();
+      this.updatePositionFromMouse(event, relativeStartPos);
+    };
+    this.onMouseUp = () => {
+      isDragging = false;
+    };
+  }
+  updatePositionFromMouse(event, relativeStartPos) {
+    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 thumbStartPos = mousePos - trackStart - relativeStartPos;
+    const maxThumbStartPos = trackSize - this._thumbSize;
+    const clampedThumbStartPos = Math.max(0, Math.min(maxThumbStartPos, thumbStartPos));
+    const newPosition = maxThumbStartPos > 0 ? clampedThumbStartPos / maxThumbStartPos : 0;
+    this.thumbPosition = newPosition;
+  }
+  getThumbPosition() {
+    const trackSize = this.orientation === "vertical" ? this.height : this.width;
+    const maxPos = trackSize - this._thumbSize;
+    return Math.round(this._thumbPosition * maxPos);
+  }
+  getThumbRect() {
+    const thumbPos = this.getThumbPosition();
+    if (this.orientation === "vertical") {
+      return {
+        x: this.x,
+        y: this.y + thumbPos,
+        width: this.width,
+        height: this._thumbSize
+      };
+    } else {
+      return {
+        x: this.x + thumbPos,
+        y: this.y,
+        width: this._thumbSize,
+        height: this.height
+      };
+    }
+  }
+  renderSelf(buffer) {
+    buffer.fillRect(this.x, this.y, this.width, this.height, this._backgroundColor);
+    const thumbRect = this.getThumbRect();
+    buffer.fillRect(thumbRect.x, thumbRect.y, thumbRect.width, thumbRect.height, this._foregroundColor);
+  }
+}
+
+// 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.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();
+      this._onChange?.(newPosition);
+      this.emit("change", { position: newPosition });
+    }
+  }
+  set viewportSize(value) {
+    if (value === this.viewportSize)
+      return;
+    this._viewportSize = value;
+    this.recalculateVisibility();
+    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;
+  }
+  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;
+    this.slider = new SliderRenderable(ctx, {
+      orientation,
+      onChange: (position) => {
+        const scrollRange = Math.max(0, this._scrollSize - this._viewportSize);
+        this._scrollPosition = Math.round(position * scrollRange);
+        this._onChange?.(this._scrollPosition);
+        this.emit("change", { position: this._scrollPosition });
+      },
+      ...orientation === "vertical" ? {
+        width: 2,
+        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();
+      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();
+      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 arrowOptions(options) {
+    Object.assign(this.startArrow, options);
+    Object.assign(this.endArrow, options);
+    this.requestRender();
+  }
+  set trackOptions(options) {
+    Object.assign(this.slider, options);
+    this.requestRender();
+  }
+  updateSliderFromScrollState() {
+    const trackSize = this.orientation === "vertical" ? this.slider.height : this.slider.width;
+    const scrollRange = Math.max(0, this._scrollSize - this._viewportSize);
+    if (scrollRange === 0) {
+      this.slider.thumbSize = trackSize;
+      this.slider.thumbPosition = 0;
+    } else {
+      const sizeRatio = this._viewportSize / this._scrollSize;
+      this.slider.thumbSize = Math.max(1, Math.round(sizeRatio * trackSize));
+      const positionRatio = this._scrollPosition / scrollRange;
+      this.slider.thumbPosition = Math.max(0, Math.min(1, positionRatio));
+    }
+  }
+  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;
+  }
+  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;
+  }
+}
+
+class ArrowRenderable extends Renderable {
+  _direction;
+  _foregroundColor;
+  _backgroundColor;
+  _attributes;
+  _arrowChars;
+  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: "\u25E2\u25E3",
+      down: "\u25E5\u25E4",
+      left: " \u25C0 ",
+      right: " \u25B6 ",
+      ...options.arrowChars
+    };
+    if (!options.width) {
+      this.width = Bun.stringWidth(this.getArrowChar());
+    }
+  }
+  get direction() {
+    return this._direction;
+  }
+  set direction(value) {
+    if (this._direction !== value) {
+      this._direction = value;
+      this.requestRender();
+    }
+  }
+  get foregroundColor() {
+    return this._foregroundColor;
+  }
+  set foregroundColor(value) {
+    if (this._foregroundColor !== value) {
+      this._foregroundColor = parseColor(value);
+      this.requestRender();
+    }
+  }
+  get backgroundColor() {
+    return this._backgroundColor;
+  }
+  set backgroundColor(value) {
+    if (this._backgroundColor !== value) {
+      this._backgroundColor = parseColor(value);
+      this.requestRender();
+    }
+  }
+  get attributes() {
+    return this._attributes;
+  }
+  set attributes(value) {
+    if (this._attributes !== value) {
+      this._attributes = value;
+      this.requestRender();
+    }
+  }
+  set arrowChars(value) {
+    this._arrowChars = {
+      ...this._arrowChars,
+      ...value
+    };
+    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) {
+      case "up":
+        return this._arrowChars.up;
+      case "down":
+        return this._arrowChars.down;
+      case "left":
+        return this._arrowChars.left;
+      case "right":
+        return this._arrowChars.right;
+      default:
+        return "?";
+    }
+  }
+}
+
+// src/renderables/ScrollBox.ts
+class ContentRenderable extends BoxRenderable {
+  viewport;
+  constructor(ctx, viewport, options) {
+    super(ctx, options);
+    this.viewport = viewport;
+  }
+  _getChildren() {
+    return this.getChildrenInViewport(this.viewport);
+  }
+}
+
+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;
+  get scrollTop() {
+    return this.verticalScrollBar.scrollPosition;
+  }
+  set scrollTop(value) {
+    this.verticalScrollBar.scrollPosition = value;
+  }
+  get scrollLeft() {
+    return this.horizontalScrollBar.scrollPosition;
+  }
+  set scrollLeft(value) {
+    this.horizontalScrollBar.scrollPosition = value;
+  }
+  get scrollWidth() {
+    return this.horizontalScrollBar.scrollSize;
+  }
+  get scrollHeight() {
+    return this.verticalScrollBar.scrollSize;
+  }
+  constructor(ctx, {
+    wrapperOptions,
+    viewportOptions,
+    contentOptions,
+    rootOptions,
+    scrollbarOptions,
+    verticalScrollbarOptions,
+    horizontalScrollbarOptions,
+    ...options
+  }) {
+    super(ctx, {
+      flexShrink: 1,
+      flexGrow: 1,
+      flexDirection: "row",
+      flexWrap: "wrap",
+      alignItems: "stretch",
+      ...options,
+      ...rootOptions
+    });
+    this.internalId = ScrollBoxRenderable.idCounter++;
+    this.wrapper = new BoxRenderable(ctx, {
+      flexDirection: "column",
+      flexGrow: 1,
+      flexShrink: 1,
+      flexBasis: "auto",
+      maxHeight: "100%",
+      maxWidth: "100%",
+      ...wrapperOptions,
+      id: `scroll-box-wrapper-${this.internalId}`
+    });
+    super.add(this.wrapper);
+    this.viewport = new BoxRenderable(ctx, {
+      flexDirection: "column",
+      flexGrow: 1,
+      flexShrink: 1,
+      flexBasis: "auto",
+      maxHeight: "100%",
+      maxWidth: "100%",
+      overflow: "scroll",
+      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",
+      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;
+      }
+    });
+    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.wrapper.add(this.horizontalScrollBar);
+    this.recalculateBarProps();
+    this.selectionListener = () => {
+      const selection = this._ctx.getSelection();
+      if (!selection || !selection.isSelecting) {
+        this.stopAutoScroll();
+      }
+    };
+    this._ctx.on("selection", this.selectionListener);
+  }
+  onUpdate(deltaTime) {
+    this.handleAutoScroll(deltaTime);
+  }
+  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);
+    }
+  }
+  scrollTo(position) {
+    if (typeof position === "number") {
+      this.scrollTop = position;
+    } else {
+      this.scrollTop = position.y;
+      this.scrollLeft = position.x;
+    }
+  }
+  add(obj, index) {
+    return this.content.add(obj, index);
+  }
+  remove(id) {
+    this.content.remove(id);
+  }
+  getChildren() {
+    return this.content.getChildren();
+  }
+  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";
+      if (dir === "up")
+        this.scrollTop -= event.scroll?.delta ?? 0;
+      else if (dir === "down")
+        this.scrollTop += event.scroll?.delta ?? 0;
+      else if (dir === "left")
+        this.scrollLeft -= event.scroll?.delta ?? 0;
+      else if (dir === "right")
+        this.scrollLeft += event.scroll?.delta ?? 0;
+    }
+    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))
+      return true;
+    if (this.horizontalScrollBar.handleKeyPress(key))
+      return true;
+    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;
+    }
+  }
+  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);
+    }
+  }
+  stopAutoScroll() {
+    const wasAutoScrolling = this.isAutoScrolling;
+    this.isAutoScrolling = false;
+    this.autoScrollAccumulatorX = 0;
+    this.autoScrollAccumulatorY = 0;
+    if (wasAutoScrolling && !this.hasOtherLiveReasons()) {
+      this.live = false;
+    }
+  }
+  hasOtherLiveReasons() {
+    return false;
+  }
+  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;
+      }
+    }
+    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();
+    }
+  }
+  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;
+  }
+  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;
+  }
+  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;
+    }
+  }
+  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;
+  }
+  set rootOptions(options) {
+    Object.assign(this, options);
+    this.requestRender();
+  }
+  set wrapperOptions(options) {
+    Object.assign(this.wrapper, options);
+    this.requestRender();
+  }
+  set viewportOptions(options) {
+    Object.assign(this.viewport, options);
+    this.requestRender();
+  }
+  set contentOptions(options) {
+    Object.assign(this.content, options);
+    this.requestRender();
+  }
+  set scrollbarOptions(options) {
+    Object.assign(this.verticalScrollBar, options);
+    Object.assign(this.horizontalScrollBar, options);
+    this.requestRender();
+  }
+  set verticalScrollbarOptions(options) {
+    Object.assign(this.verticalScrollBar, options);
+    this.requestRender();
+  }
+  set horizontalScrollbarOptions(options) {
+    Object.assign(this.horizontalScrollBar, options);
+    this.requestRender();
+  }
+  destroySelf() {
+    if (this.selectionListener) {
+      this._ctx.off("selection", this.selectionListener);
+      this.selectionListener = undefined;
+    }
+    super.destroySelf();
   }
 }
 // src/renderables/composition/constructs.ts
@@ -2630,9 +3556,11 @@ export {
   isValidPercentage,
   isVNode,
   isSizeType,
-  isPostionTypeType,
+  isRenderable,
+  isPositionTypeType,
   isPositionType,
   isPaddingType,
+  isOverflowType,
   isMarginType,
   isFlexBasisType,
   isDimensionType,
@@ -2658,6 +3586,7 @@ export {
   createTextAttributes,
   createCliRenderer,
   coordinateToCharacterIndex,
+  convertGlobalToLocalSelection,
   capture,
   brightYellow,
   brightWhite,
@@ -2692,7 +3621,6 @@ export {
   VRenderable,
   TrackedNode,
   Timeline,
-  TextSelectionHelper,
   TextRenderable,
   TextBuffer,
   TextAttributes,
@@ -2707,6 +3635,8 @@ export {
   SelectRenderableEvents,
   SelectRenderable,
   Select,
+  ScrollBoxRenderable,
+  ScrollBarRenderable,
   RootRenderable,
   RenderableEvents,
   Renderable,
@@ -2715,6 +3645,7 @@ export {
   MouseParser,
   MouseEvent,
   MouseButton,
+  LogLevel,
   LayoutEvents,
   KeyHandler,
   InputRenderableEvents,
@@ -2735,10 +3666,11 @@ export {
   BorderCharArrays,
   BlurEffect,
   BloomEffect,
+  ArrowRenderable,
   ASCIIFontSelectionHelper,
   ASCIIFontRenderable,
   ASCIIFont
 };
 
-//# debugId=90AD54F99873C73864756E2164756E21
+//# debugId=B627209D76BECE1A64756E2164756E21
 //# sourceMappingURL=index.js.map