@opentui/core 0.1.14 → 0.1.15

package/index.js

@@ -27,7 +27,6 @@ import {
   TerminalConsole,
   TextAttributes,
   TextBuffer,
-  TextSelectionHelper,
   TrackedNode,
   bg,
   bgBlack,
@@ -52,6 +51,7 @@ import {
   brightWhite,
   brightYellow,
   capture,
+  convertGlobalToLocalSelection,
   coordinateToCharacterIndex,
   createCliRenderer,
   createTextAttributes,
@@ -79,6 +79,7 @@ import {
   isPaddingType,
   isPositionType,
   isPositionTypeType,
+  isRenderable,
   isSizeType,
   isVNode,
   isValidPercentage,
@@ -117,7 +118,7 @@ import {
   white,
   wrapWithDelegates,
   yellow
-} from "./index-rv93tneq.js";
+} from "./index-sw194bbj.js";
 // src/post/filters.ts
 function applyScanlines(buffer, strength = 0.8, step = 2) {
   const width = buffer.width;
@@ -1446,15 +1447,14 @@ 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: "",
@@ -1467,9 +1467,9 @@ class TextRenderable extends Renderable {
   };
   constructor(ctx, options) {
     super(ctx, options);
-    this.selectionHelper = new TextSelectionHelper(() => this.x, () => this.y, () => this._plainText.length, () => this._lineInfo);
     const content = options.content ?? this._defaultOptions.content;
-    this._text = typeof content === "string" ? stringToStyledText(content) : 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;
@@ -1481,14 +1481,15 @@ class TextRenderable extends Renderable {
     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;
@@ -1508,7 +1509,9 @@ class TextRenderable extends Renderable {
     const newColor = value ? parseColor(value) : this._defaultOptions.selectionBg;
     if (this._selectionBg !== newColor) {
       this._selectionBg = newColor;
-      this.syncSelectionToTextBuffer();
+      if (this.lastLocalSelection) {
+        this.updateLocalSelection(this.lastLocalSelection);
+      }
       this.requestRender();
     }
   }
@@ -1519,7 +1522,9 @@ class TextRenderable extends Renderable {
     const newColor = value ? parseColor(value) : this._defaultOptions.selectionFg;
     if (this._selectionFg !== newColor) {
       this._selectionFg = newColor;
-      this.syncSelectionToTextBuffer();
+      if (this.lastLocalSelection) {
+        this.updateLocalSelection(this.lastLocalSelection);
+      }
       this.requestRender();
     }
   }
@@ -1545,29 +1550,30 @@ class TextRenderable extends Renderable {
     }
   }
   onResize(width, height) {
-    const changed = this.selectionHelper.reevaluateSelection(width, height);
-    if (changed) {
-      this.syncSelectionToTextBuffer();
-      this.requestRender();
+    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.requestRender();
@@ -1596,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.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();
   }
-  updateTextBuffer() {
-    this.textBuffer.setStyledText(this._text);
+  getSelection() {
+    return this.textBuffer.getSelection();
+  }
+  updateTextBuffer(styledText) {
+    this.textBuffer.setStyledText(styledText);
   }
   renderSelf(buffer) {
     if (this.textBuffer.ptr) {
@@ -1643,6 +1654,7 @@ class ASCIIFontRenderable extends FrameBufferRenderable {
   _bg;
   _selectionBg;
   _selectionFg;
+  lastLocalSelection = null;
   selectionHelper;
   constructor(ctx, options) {
     const font = options.font || "tiny";
@@ -1661,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() {
@@ -1670,7 +1682,9 @@ 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.requestRender();
   }
@@ -1680,7 +1694,9 @@ 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.requestRender();
   }
@@ -1710,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.requestRender();
     }
-    return this.selectionHelper.hasSelection();
+    return changed;
   }
   getSelectedText() {
     const selection = this.selectionHelper.getSelection();
@@ -2674,6 +2694,791 @@ class TabSelectRenderable extends Renderable {
     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
 function Generic(props, ...children) {
   return h(VRenderable, props || {}, ...children);
@@ -2751,6 +3556,7 @@ export {
   isValidPercentage,
   isVNode,
   isSizeType,
+  isRenderable,
   isPositionTypeType,
   isPositionType,
   isPaddingType,
@@ -2780,6 +3586,7 @@ export {
   createTextAttributes,
   createCliRenderer,
   coordinateToCharacterIndex,
+  convertGlobalToLocalSelection,
   capture,
   brightYellow,
   brightWhite,
@@ -2814,7 +3621,6 @@ export {
   VRenderable,
   TrackedNode,
   Timeline,
-  TextSelectionHelper,
   TextRenderable,
   TextBuffer,
   TextAttributes,
@@ -2829,6 +3635,8 @@ export {
   SelectRenderableEvents,
   SelectRenderable,
   Select,
+  ScrollBoxRenderable,
+  ScrollBarRenderable,
   RootRenderable,
   RenderableEvents,
   Renderable,
@@ -2858,10 +3666,11 @@ export {
   BorderCharArrays,
   BlurEffect,
   BloomEffect,
+  ArrowRenderable,
   ASCIIFontSelectionHelper,
   ASCIIFontRenderable,
   ASCIIFont
 };
 
-//# debugId=673E2078AE4B8BC264756E2164756E21
+//# debugId=B627209D76BECE1A64756E2164756E21
 //# sourceMappingURL=index.js.map