@opentui/core 0.0.0-20250908-4906ddad → 0.0.0-20250912-12c969f4

package/index.js

@@ -1,6 +1,7 @@
 // @bun
 import {
   ASCIIFontSelectionHelper,
+  BaseRenderable,
   BorderCharArrays,
   BorderChars,
   CliRenderEvents,
@@ -65,6 +66,7 @@ import {
   getBorderSides,
   getCharacterPositions,
   getKeyHandler,
+  getObjectsInViewport,
   green,
   h,
   hastToStyledText,
@@ -80,6 +82,7 @@ import {
   isPositionTypeType,
   isRenderable,
   isSizeType,
+  isStyledText,
   isVNode,
   isValidPercentage,
   italic,
@@ -114,10 +117,11 @@ import {
   stringToStyledText,
   t,
   underline,
+  visualizeRenderableTree,
   white,
   wrapWithDelegates,
   yellow
-} from "./index-d6kwx5pm.js";
+} from "./index-mh94hn7d.js";
 // src/post/filters.ts
 function applyScanlines(buffer, strength = 0.8, step = 2) {
   const width = buffer.width;
@@ -1434,7 +1438,7 @@ class FrameBufferRenderable extends Renderable {
     this.requestRender();
   }
   renderSelf(buffer) {
-    if (!this.visible)
+    if (!this.visible || this.isDestroyed)
       return;
     buffer.drawFrameBuffer(this.x, this.y, this.frameBuffer);
   }
@@ -1443,6 +1447,213 @@ class FrameBufferRenderable extends Renderable {
     super.destroySelf();
   }
 }
+// src/renderables/TextNode.ts
+var BrandedTextNodeRenderable = Symbol.for("@opentui/core/TextNodeRenderable");
+function isTextNodeRenderable(obj) {
+  return !!obj?.[BrandedTextNodeRenderable];
+}
+function styledTextToTextNodes(styledText) {
+  return styledText.chunks.map((chunk) => {
+    const node = new TextNodeRenderable({
+      fg: chunk.fg,
+      bg: chunk.bg,
+      attributes: chunk.attributes
+    });
+    node.add(chunk.text);
+    return node;
+  });
+}
+
+class TextNodeRenderable extends BaseRenderable {
+  [BrandedTextNodeRenderable] = true;
+  _fg;
+  _bg;
+  _attributes;
+  _children = [];
+  parent = null;
+  constructor(options) {
+    super(options);
+    this._fg = options.fg ? parseColor(options.fg) : undefined;
+    this._bg = options.bg ? parseColor(options.bg) : undefined;
+    this._attributes = options.attributes ?? 0;
+  }
+  get children() {
+    return this._children;
+  }
+  set children(children) {
+    this._children = children;
+    this.requestRender();
+  }
+  requestRender() {
+    this.markDirty();
+    this.parent?.requestRender();
+  }
+  add(obj, index) {
+    if (typeof obj === "string") {
+      if (index !== undefined) {
+        this._children.splice(index, 0, obj);
+        this.requestRender();
+        return index;
+      }
+      const insertIndex = this._children.length;
+      this._children.push(obj);
+      this.requestRender();
+      return insertIndex;
+    }
+    if (isTextNodeRenderable(obj)) {
+      if (index !== undefined) {
+        this._children.splice(index, 0, obj);
+        obj.parent = this;
+        this.requestRender();
+        return index;
+      }
+      const insertIndex = this._children.length;
+      this._children.push(obj);
+      obj.parent = this;
+      this.requestRender();
+      return insertIndex;
+    }
+    if (isStyledText(obj)) {
+      const textNodes = styledTextToTextNodes(obj);
+      if (index !== undefined) {
+        this._children.splice(index, 0, ...textNodes);
+        textNodes.forEach((node) => node.parent = this);
+        this.requestRender();
+        return index;
+      }
+      const insertIndex = this._children.length;
+      this._children.push(...textNodes);
+      textNodes.forEach((node) => node.parent = this);
+      this.requestRender();
+      return insertIndex;
+    }
+    throw new Error("TextNodeRenderable only accepts strings, TextNodeRenderable instances, or StyledText instances");
+  }
+  replace(obj, index) {
+    this._children[index] = obj;
+    if (typeof obj !== "string") {
+      obj.parent = this;
+    }
+    this.requestRender();
+  }
+  insertBefore(child, anchorNode) {
+    if (!anchorNode || !isTextNodeRenderable(anchorNode)) {
+      throw new Error("Anchor must be a TextNodeRenderable");
+    }
+    const anchorIndex = this._children.indexOf(anchorNode);
+    if (anchorIndex === -1) {
+      throw new Error("Anchor node not found in children");
+    }
+    if (typeof child === "string") {
+      this._children.splice(anchorIndex, 0, child);
+    } else if (isTextNodeRenderable(child)) {
+      this._children.splice(anchorIndex, 0, child);
+      child.parent = this;
+    } else if (child instanceof StyledText) {
+      const textNodes = styledTextToTextNodes(child);
+      this._children.splice(anchorIndex, 0, ...textNodes);
+      textNodes.forEach((node) => node.parent = this);
+    } else {
+      throw new Error("Child must be a string, TextNodeRenderable, or StyledText instance");
+    }
+    this.requestRender();
+    return this;
+  }
+  remove(child) {
+    const childIndex = this._children.indexOf(child);
+    if (childIndex === -1) {
+      throw new Error("Child not found in children");
+    }
+    this._children.splice(childIndex, 1);
+    if (typeof child !== "string") {
+      child.parent = null;
+    }
+    this.requestRender();
+    return this;
+  }
+  clear() {
+    this._children = [];
+    this.requestRender();
+  }
+  mergeStyles(parentStyle) {
+    return {
+      fg: this._fg ?? parentStyle.fg,
+      bg: this._bg ?? parentStyle.bg,
+      attributes: this._attributes | parentStyle.attributes
+    };
+  }
+  gatherWithInheritedStyle(parentStyle = { fg: undefined, bg: undefined, attributes: 0 }) {
+    const currentStyle = this.mergeStyles(parentStyle);
+    const chunks = [];
+    for (const child of this._children) {
+      if (typeof child === "string") {
+        chunks.push({
+          __isChunk: true,
+          text: child,
+          fg: currentStyle.fg,
+          bg: currentStyle.bg,
+          attributes: currentStyle.attributes
+        });
+      } else {
+        const childChunks = child.gatherWithInheritedStyle(currentStyle);
+        chunks.push(...childChunks);
+      }
+    }
+    this.markClean();
+    return chunks;
+  }
+  static fromString(text, options = {}) {
+    const node = new TextNodeRenderable(options);
+    node.add(text);
+    return node;
+  }
+  static fromNodes(nodes, options = {}) {
+    const node = new TextNodeRenderable(options);
+    for (const childNode of nodes) {
+      node.add(childNode);
+    }
+    return node;
+  }
+  toChunks(parentStyle = { fg: undefined, bg: undefined, attributes: 0 }) {
+    return this.gatherWithInheritedStyle(parentStyle);
+  }
+  getChildren() {
+    return this._children.filter((child) => typeof child !== "string");
+  }
+  getChildrenCount() {
+    return this._children.length;
+  }
+  getRenderable(id) {
+    return this._children.find((child) => typeof child !== "string" && child.id === id);
+  }
+  set fg(fg2) {
+    this._fg = parseColor(fg2);
+    this.requestRender();
+  }
+  set bg(bg2) {
+    this._bg = parseColor(bg2);
+    this.requestRender();
+  }
+  set attributes(attributes) {
+    this._attributes = attributes;
+    this.requestRender();
+  }
+}
+
+class RootTextNodeRenderable extends TextNodeRenderable {
+  ctx;
+  textParent;
+  constructor(ctx, options, textParent) {
+    super(options);
+    this.ctx = ctx;
+    this.textParent = textParent;
+  }
+  requestRender() {
+    this.markDirty();
+    this.ctx.requestRender();
+  }
+}
+
 // src/renderables/Text.ts
 class TextRenderable extends Renderable {
   selectable = true;
@@ -1455,6 +1666,7 @@ class TextRenderable extends Renderable {
   lastLocalSelection = null;
   textBuffer;
   _lineInfo = { lineStarts: [], lineWidths: [] };
+  rootTextNode;
   _defaultOptions = {
     content: "",
     fg: RGBA.fromValues(1, 1, 1, 1),
@@ -1480,6 +1692,12 @@ class TextRenderable extends Renderable {
     this.textBuffer.setDefaultBg(this._defaultBg);
     this.textBuffer.setDefaultAttributes(this._defaultAttributes);
     this.setupMeasureFunc();
+    this.rootTextNode = new RootTextNodeRenderable(ctx, {
+      id: `${this.id}-root`,
+      fg: this._defaultFg,
+      bg: this._defaultBg,
+      attributes: this._defaultAttributes
+    }, this);
     this.updateTextBuffer(styledText);
     this._text.mount(this);
     this.updateTextInfo();
@@ -1488,12 +1706,7 @@ class TextRenderable extends Renderable {
     this.textBuffer.setStyledText(styledText);
     this.clearChunks(styledText);
   }
-  clearChunks(styledText) {
-    styledText.chunks.forEach((chunk) => {
-      chunk.text = undefined;
-      chunk.plainText = undefined;
-    });
-  }
+  clearChunks(styledText) {}
   get content() {
     return this._text;
   }
@@ -1506,6 +1719,9 @@ class TextRenderable extends Renderable {
   get chunks() {
     return this._text.chunks;
   }
+  get textNode() {
+    return this.rootTextNode;
+  }
   set content(value) {
     const styledText = typeof value === "string" ? stringToStyledText(value) : value;
     if (this._text !== styledText) {
@@ -1520,9 +1736,11 @@ class TextRenderable extends Renderable {
   }
   set fg(value) {
     const newColor = parseColor(value ?? this._defaultOptions.fg);
+    this.rootTextNode.fg = newColor;
     if (this._defaultFg !== newColor) {
       this._defaultFg = newColor;
       this.textBuffer.setDefaultFg(this._defaultFg);
+      this.rootTextNode.fg = newColor;
       this.requestRender();
     }
   }
@@ -1557,9 +1775,11 @@ class TextRenderable extends Renderable {
   }
   set bg(value) {
     const newColor = parseColor(value ?? this._defaultOptions.bg);
+    this.rootTextNode.bg = newColor;
     if (this._defaultBg !== newColor) {
       this._defaultBg = newColor;
       this.textBuffer.setDefaultBg(this._defaultBg);
+      this.rootTextNode.bg = newColor;
       this.requestRender();
     }
   }
@@ -1570,6 +1790,7 @@ class TextRenderable extends Renderable {
     if (this._defaultAttributes !== value) {
       this._defaultAttributes = value;
       this.textBuffer.setDefaultAttributes(this._defaultAttributes);
+      this.rootTextNode.attributes = value;
       this.requestRender();
     }
   }
@@ -1625,7 +1846,7 @@ class TextRenderable extends Renderable {
     this.layoutNode.yogaNode.setMeasureFunc(measureFunc);
   }
   insertChunk(chunk, index) {
-    this.textBuffer.insertEncodedChunkGroup(index ?? this.textBuffer.chunkGroupCount, chunk.text, chunk.fg, chunk.bg, chunk.attributes);
+    this.textBuffer.insertChunkGroup(index ?? this.textBuffer.chunkGroupCount, chunk.text, chunk.fg, chunk.bg, chunk.attributes);
     this.updateTextInfo();
     this.clearChunks(this._text);
   }
@@ -1641,10 +1862,46 @@ class TextRenderable extends Renderable {
     const index = this._text.chunks.indexOf(oldChunk);
     if (index === -1)
       return;
-    this.textBuffer.replaceEncodedChunkGroup(index, chunk.text, chunk.fg, chunk.bg, chunk.attributes);
+    this.textBuffer.replaceChunkGroup(index, chunk.text, chunk.fg, chunk.bg, chunk.attributes);
     this.updateTextInfo();
     this.clearChunks(this._text);
   }
+  updateTextFromNodes() {
+    if (this.rootTextNode.isDirty) {
+      const chunks = this.rootTextNode.gatherWithInheritedStyle({
+        fg: this._defaultFg,
+        bg: this._defaultBg,
+        attributes: this._defaultAttributes
+      });
+      this.textBuffer.setStyledText(new StyledText(chunks));
+      this.updateTextInfo();
+    }
+  }
+  add(obj, index) {
+    return this.rootTextNode.add(obj, index);
+  }
+  remove(id) {
+    const child = this.rootTextNode.getRenderable(id);
+    if (child && isTextNodeRenderable(child)) {
+      this.rootTextNode.remove(child);
+    }
+  }
+  insertBefore(obj, anchor) {
+    this.rootTextNode.insertBefore(obj, anchor);
+    return this.rootTextNode.children.indexOf(obj);
+  }
+  getTextChildren() {
+    return this.rootTextNode.getChildren();
+  }
+  clear() {
+    this.rootTextNode.clear();
+    const emptyStyledText = stringToStyledText("");
+    this._text = emptyStyledText;
+    emptyStyledText.mount(this);
+    this.updateTextBuffer(emptyStyledText);
+    this.updateTextInfo();
+    this.requestRender();
+  }
   shouldStartSelection(x, y) {
     if (!this.selectable)
       return false;
@@ -1670,6 +1927,16 @@ class TextRenderable extends Renderable {
   getSelection() {
     return this.textBuffer.getSelection();
   }
+  onLifecyclePass = () => {
+    this.updateTextFromNodes();
+  };
+  render(buffer, deltaTime) {
+    if (!this.visible)
+      return;
+    this.markClean();
+    this._ctx.addToHitGrid(this.x, this.y, this.width, this.height, this.num);
+    this.renderSelf(buffer);
+  }
   renderSelf(buffer) {
     if (this.textBuffer.ptr) {
       const clipRect = {
@@ -1683,6 +1950,7 @@ class TextRenderable extends Renderable {
   }
   destroy() {
     this.textBuffer.destroy();
+    this.rootTextNode.children.length = 0;
     super.destroy();
   }
 }
@@ -1795,6 +2063,8 @@ class ASCIIFontRenderable extends FrameBufferRenderable {
     this.renderFontToBuffer();
   }
   renderFontToBuffer() {
+    if (this.isDestroyed)
+      return;
     this.frameBuffer.clear(this._bg);
     renderFontToFrameBuffer(this.frameBuffer, {
       text: this._text,
@@ -1842,7 +2112,7 @@ var InputRenderableEvents;
 })(InputRenderableEvents ||= {});
 
 class InputRenderable extends Renderable {
-  focusable = true;
+  _focusable = true;
   _value = "";
   _cursorPosition = 0;
   _placeholder;
@@ -2115,7 +2385,7 @@ var SelectRenderableEvents;
 })(SelectRenderableEvents ||= {});
 
 class SelectRenderable extends Renderable {
-  focusable = true;
+  _focusable = true;
   _options = [];
   selectedIndex = 0;
   scrollOffset = 0;
@@ -2451,7 +2721,7 @@ function calculateDynamicHeight(showUnderline, showDescription) {
 }
 
 class TabSelectRenderable extends Renderable {
-  focusable = true;
+  _focusable = true;
   _options = [];
   selectedIndex = 0;
   scrollOffset = 0;
@@ -2741,43 +3011,71 @@ var defaultTrackBackgroundColor = RGBA.fromHex("#252527");
 
 class SliderRenderable extends Renderable {
   orientation;
-  _thumbSize;
-  _thumbPosition;
+  _value;
+  _min;
+  _max;
+  _viewPortSize;
   _backgroundColor;
   _foregroundColor;
   _onChange;
   constructor(ctx, options) {
     super(ctx, options);
     this.orientation = options.orientation;
-    this._thumbSize = options.thumbSize ?? 1;
-    this._thumbPosition = options.thumbPosition ?? 0;
+    this._min = options.min ?? 0;
+    this._max = options.max ?? 100;
+    this._value = options.value ?? this._min;
+    this._viewPortSize = options.viewPortSize ?? Math.max(1, (this._max - this._min) * 0.1);
     this._onChange = options.onChange;
     this._backgroundColor = options.backgroundColor ? parseColor(options.backgroundColor) : defaultTrackBackgroundColor;
     this._foregroundColor = options.foregroundColor ? parseColor(options.foregroundColor) : defaultThumbBackgroundColor;
     this.setupMouseHandling();
   }
-  get thumbSize() {
-    return this._thumbSize;
+  get value() {
+    return this._value;
   }
-  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;
+  set value(newValue) {
+    const clamped = Math.max(this._min, Math.min(this._max, newValue));
+    if (clamped !== this._value) {
+      this._value = clamped;
+      this._onChange?.(clamped);
+      this.emit("change", { value: clamped });
       this.requestRender();
     }
   }
-  get thumbPosition() {
-    return this._thumbPosition;
+  get min() {
+    return this._min;
   }
-  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 });
+  set min(newMin) {
+    if (newMin !== this._min) {
+      this._min = newMin;
+      if (this._value < newMin) {
+        this.value = newMin;
+      }
+      this.requestRender();
+    }
+  }
+  get max() {
+    return this._max;
+  }
+  set max(newMax) {
+    if (newMax !== this._max) {
+      this._max = newMax;
+      if (this._value > newMax) {
+        this.value = newMax;
+      }
+      this.requestRender();
+    }
+  }
+  set viewPortSize(size) {
+    const clampedSize = Math.max(0.01, Math.min(size, this._max - this._min));
+    if (clampedSize !== this._viewPortSize) {
+      this._viewPortSize = clampedSize;
       this.requestRender();
     }
   }
+  get viewPortSize() {
+    return this._viewPortSize;
+  }
   get backgroundColor() {
     return this._backgroundColor;
   }
@@ -2792,69 +3090,183 @@ class SliderRenderable extends Renderable {
     this._foregroundColor = parseColor(value);
     this.requestRender();
   }
+  calculateDragOffsetVirtual(event) {
+    const trackStart = this.orientation === "vertical" ? this.y : this.x;
+    const mousePos = (this.orientation === "vertical" ? event.y : event.x) - trackStart;
+    const virtualMousePos = Math.max(0, Math.min((this.orientation === "vertical" ? this.height : this.width) * 2, mousePos * 2));
+    const virtualThumbStart = this.getVirtualThumbStart();
+    const virtualThumbSize = this.getVirtualThumbSize();
+    return Math.max(0, Math.min(virtualThumbSize, virtualMousePos - virtualThumbStart));
+  }
   setupMouseHandling() {
     let isDragging = false;
-    let relativeStartPos = 0;
+    let dragOffsetVirtual = 0;
     this.onMouseDown = (event) => {
       event.stopPropagation();
       event.preventDefault();
-      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;
+      const thumb = this.getThumbRect();
+      const inThumb = event.x >= thumb.x && event.x < thumb.x + thumb.width && event.y >= thumb.y && event.y < thumb.y + thumb.height;
+      if (inThumb) {
+        isDragging = true;
+        dragOffsetVirtual = this.calculateDragOffsetVirtual(event);
       } else {
-        relativeStartPos = this.orientation === "vertical" ? thumbRect.height / 2 : thumbRect.width / 2;
+        this.updateValueFromMouseDirect(event);
+        isDragging = true;
+        dragOffsetVirtual = this.calculateDragOffsetVirtual(event);
       }
-      this.updatePositionFromMouse(event, relativeStartPos);
     };
     this.onMouseDrag = (event) => {
       if (!isDragging)
         return;
       event.stopPropagation();
-      this.updatePositionFromMouse(event, relativeStartPos);
+      this.updateValueFromMouseWithOffset(event, dragOffsetVirtual);
     };
-    this.onMouseUp = () => {
+    this.onMouseUp = (event) => {
+      if (isDragging) {
+        this.updateValueFromMouseWithOffset(event, dragOffsetVirtual);
+      }
       isDragging = false;
     };
   }
-  updatePositionFromMouse(event, relativeStartPos) {
+  updateValueFromMouseDirect(event) {
     const trackStart = this.orientation === "vertical" ? this.y : this.x;
     const trackSize = this.orientation === "vertical" ? this.height : this.width;
     const mousePos = this.orientation === "vertical" ? event.y : event.x;
-    const 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 relativeMousePos = mousePos - trackStart;
+    const clampedMousePos = Math.max(0, Math.min(trackSize, relativeMousePos));
+    const ratio = trackSize === 0 ? 0 : clampedMousePos / trackSize;
+    const range = this._max - this._min;
+    const newValue = this._min + ratio * range;
+    this.value = newValue;
+  }
+  updateValueFromMouseWithOffset(event, offsetVirtual) {
+    const trackStart = this.orientation === "vertical" ? this.y : this.x;
     const trackSize = this.orientation === "vertical" ? this.height : this.width;
-    const maxPos = trackSize - this._thumbSize;
-    return Math.round(this._thumbPosition * maxPos);
+    const mousePos = this.orientation === "vertical" ? event.y : event.x;
+    const virtualTrackSize = trackSize * 2;
+    const relativeMousePos = mousePos - trackStart;
+    const clampedMousePos = Math.max(0, Math.min(trackSize, relativeMousePos));
+    const virtualMousePos = clampedMousePos * 2;
+    const virtualThumbSize = this.getVirtualThumbSize();
+    const maxThumbStart = Math.max(0, virtualTrackSize - virtualThumbSize);
+    let desiredThumbStart = virtualMousePos - offsetVirtual;
+    desiredThumbStart = Math.max(0, Math.min(maxThumbStart, desiredThumbStart));
+    const ratio = maxThumbStart === 0 ? 0 : desiredThumbStart / maxThumbStart;
+    const range = this._max - this._min;
+    const newValue = this._min + ratio * range;
+    this.value = newValue;
   }
   getThumbRect() {
-    const thumbPos = this.getThumbPosition();
+    const virtualThumbSize = this.getVirtualThumbSize();
+    const virtualThumbStart = this.getVirtualThumbStart();
+    const realThumbStart = Math.floor(virtualThumbStart / 2);
+    const realThumbSize = Math.ceil((virtualThumbStart + virtualThumbSize) / 2) - realThumbStart;
     if (this.orientation === "vertical") {
       return {
         x: this.x,
-        y: this.y + thumbPos,
+        y: this.y + realThumbStart,
         width: this.width,
-        height: this._thumbSize
+        height: Math.max(1, realThumbSize)
       };
     } else {
       return {
-        x: this.x + thumbPos,
+        x: this.x + realThumbStart,
         y: this.y,
-        width: this._thumbSize,
+        width: Math.max(1, realThumbSize),
         height: this.height
       };
     }
   }
   renderSelf(buffer) {
+    if (this.orientation === "horizontal") {
+      this.renderHorizontal(buffer);
+    } else {
+      this.renderVertical(buffer);
+    }
+  }
+  renderHorizontal(buffer) {
+    const virtualThumbSize = this.getVirtualThumbSize();
+    const virtualThumbStart = this.getVirtualThumbStart();
+    const virtualThumbEnd = virtualThumbStart + virtualThumbSize;
     buffer.fillRect(this.x, this.y, this.width, this.height, this._backgroundColor);
-    const thumbRect = this.getThumbRect();
-    buffer.fillRect(thumbRect.x, thumbRect.y, thumbRect.width, thumbRect.height, this._foregroundColor);
+    const realStartCell = Math.floor(virtualThumbStart / 2);
+    const realEndCell = Math.floor((virtualThumbEnd - 1) / 2);
+    const startX = Math.max(0, realStartCell);
+    const endX = Math.min(this.width - 1, realEndCell);
+    for (let realX = startX;realX <= endX; realX++) {
+      const virtualCellStart = realX * 2;
+      const virtualCellEnd = virtualCellStart + 2;
+      const thumbStartInCell = Math.max(virtualThumbStart, virtualCellStart);
+      const thumbEndInCell = Math.min(virtualThumbEnd, virtualCellEnd);
+      const coverage = thumbEndInCell - thumbStartInCell;
+      let char = " ";
+      if (coverage >= 2) {
+        char = "\u2588";
+      } else {
+        const isLeftHalf = thumbStartInCell === virtualCellStart;
+        if (isLeftHalf) {
+          char = "\u258C";
+        } else {
+          char = "\u2590";
+        }
+      }
+      for (let y = 0;y < this.height; y++) {
+        buffer.setCellWithAlphaBlending(this.x + realX, this.y + y, char, this._foregroundColor, this._backgroundColor);
+      }
+    }
+  }
+  renderVertical(buffer) {
+    const virtualThumbSize = this.getVirtualThumbSize();
+    const virtualThumbStart = this.getVirtualThumbStart();
+    const virtualThumbEnd = virtualThumbStart + virtualThumbSize;
+    buffer.fillRect(this.x, this.y, this.width, this.height, this._backgroundColor);
+    const realStartCell = Math.floor(virtualThumbStart / 2);
+    const realEndCell = Math.floor((virtualThumbEnd - 1) / 2);
+    const startY = Math.max(0, realStartCell);
+    const endY = Math.min(this.height - 1, realEndCell);
+    for (let realY = startY;realY <= endY; realY++) {
+      const virtualCellStart = realY * 2;
+      const virtualCellEnd = virtualCellStart + 2;
+      const thumbStartInCell = Math.max(virtualThumbStart, virtualCellStart);
+      const thumbEndInCell = Math.min(virtualThumbEnd, virtualCellEnd);
+      const coverage = thumbEndInCell - thumbStartInCell;
+      let char = " ";
+      if (coverage >= 2) {
+        char = "\u2588";
+      } else if (coverage > 0) {
+        const virtualPositionInCell = thumbStartInCell - virtualCellStart;
+        if (virtualPositionInCell === 0) {
+          char = "\u2580";
+        } else {
+          char = "\u2584";
+        }
+      }
+      for (let x = 0;x < this.width; x++) {
+        buffer.setCellWithAlphaBlending(this.x + x, this.y + realY, char, this._foregroundColor, this._backgroundColor);
+      }
+    }
+  }
+  getVirtualThumbSize() {
+    const virtualTrackSize = this.orientation === "vertical" ? this.height * 2 : this.width * 2;
+    const range = this._max - this._min;
+    if (range === 0)
+      return virtualTrackSize;
+    const viewportSize = Math.max(1, this._viewPortSize);
+    const contentSize = range + viewportSize;
+    if (contentSize <= viewportSize)
+      return virtualTrackSize;
+    const thumbRatio = viewportSize / contentSize;
+    const calculatedSize = Math.floor(virtualTrackSize * thumbRatio);
+    return Math.max(1, Math.min(calculatedSize, virtualTrackSize));
+  }
+  getVirtualThumbStart() {
+    const virtualTrackSize = this.orientation === "vertical" ? this.height * 2 : this.width * 2;
+    const range = this._max - this._min;
+    if (range === 0)
+      return 0;
+    const valueRatio = (this._value - this._min) / range;
+    const virtualThumbSize = this.getVirtualThumbSize();
+    return Math.round(valueRatio * (virtualTrackSize - virtualThumbSize));
   }
 }
 
@@ -2864,7 +3276,7 @@ class ScrollBarRenderable extends Renderable {
   startArrow;
   endArrow;
   orientation;
-  focusable = true;
+  _focusable = true;
   _scrollSize = 0;
   _scrollPosition = 0;
   _viewportSize = 0;
@@ -2897,6 +3309,7 @@ class ScrollBarRenderable extends Renderable {
       return;
     this._scrollSize = value;
     this.recalculateVisibility();
+    this.updateSliderFromScrollState();
     this.scrollPosition = this.scrollPosition;
   }
   set scrollPosition(value) {
@@ -2904,15 +3317,15 @@ class ScrollBarRenderable extends Renderable {
     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.slider.viewPortSize = Math.max(1, this._viewportSize);
     this.recalculateVisibility();
+    this.updateSliderFromScrollState();
     this.scrollPosition = this.scrollPosition;
   }
   get showArrows() {
@@ -2935,16 +3348,22 @@ class ScrollBarRenderable extends Renderable {
     this._onChange = options.onChange;
     this.orientation = orientation;
     this._showArrows = showArrows;
+    const scrollRange = Math.max(0, this._scrollSize - this._viewportSize);
+    const defaultStepSize = Math.max(1, this._viewportSize);
+    const stepSize = trackOptions?.viewPortSize ?? defaultStepSize;
     this.slider = new SliderRenderable(ctx, {
       orientation,
-      onChange: (position) => {
-        const scrollRange = Math.max(0, this._scrollSize - this._viewportSize);
-        this._scrollPosition = Math.round(position * scrollRange);
+      min: 0,
+      max: scrollRange,
+      value: this._scrollPosition,
+      viewPortSize: stepSize,
+      onChange: (value) => {
+        this._scrollPosition = Math.round(value);
         this._onChange?.(this._scrollPosition);
         this.emit("change", { position: this._scrollPosition });
       },
       ...orientation === "vertical" ? {
-        width: 2,
+        width: Math.max(1, Math.min(2, this.width)),
         height: "100%",
         marginLeft: "auto"
       } : {
@@ -3023,17 +3442,10 @@ class ScrollBarRenderable extends Renderable {
     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));
-    }
+    this.slider.min = 0;
+    this.slider.max = scrollRange;
+    this.slider.value = Math.min(this._scrollPosition, scrollRange);
   }
   scrollBy(delta, unit = "absolute") {
     const multiplier = unit === "viewport" ? this.viewportSize : unit === "content" ? this.scrollSize : unit === "step" ? this.scrollStep ?? 1 : 1;
@@ -3103,10 +3515,10 @@ class ArrowRenderable extends Renderable {
     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 ",
+      up: "\u25B2",
+      down: "\u25BC",
+      left: "\u25C0",
+      right: "\u25B6",
       ...options.arrowChars
     };
     if (!options.width) {
@@ -3184,7 +3596,7 @@ class ContentRenderable extends BoxRenderable {
     this.viewport = viewport;
   }
   _getChildren() {
-    return this.getChildrenInViewport(this.viewport);
+    return getObjectsInViewport(this.viewport, this.getChildrenSortedByPrimaryAxis(), this.primaryAxis);
   }
 }
 
@@ -3196,7 +3608,7 @@ class ScrollBoxRenderable extends BoxRenderable {
   content;
   horizontalScrollBar;
   verticalScrollBar;
-  focusable = true;
+  _focusable = true;
   selectionListener;
   autoScrollMouseX = 0;
   autoScrollMouseY = 0;
@@ -3209,17 +3621,42 @@ class ScrollBoxRenderable extends BoxRenderable {
   cachedAutoScrollSpeed = 3;
   autoScrollAccumulatorX = 0;
   autoScrollAccumulatorY = 0;
+  _stickyScroll;
+  _stickyScrollTop = false;
+  _stickyScrollBottom = false;
+  _stickyScrollLeft = false;
+  _stickyScrollRight = false;
+  _stickyStart;
+  _hasManualScroll = false;
+  get stickyScroll() {
+    return this._stickyScroll;
+  }
+  set stickyScroll(value) {
+    this._stickyScroll = value;
+    this.updateStickyState();
+  }
+  get stickyStart() {
+    return this._stickyStart;
+  }
+  set stickyStart(value) {
+    this._stickyStart = value;
+    this.updateStickyState();
+  }
   get scrollTop() {
     return this.verticalScrollBar.scrollPosition;
   }
   set scrollTop(value) {
     this.verticalScrollBar.scrollPosition = value;
+    this._hasManualScroll = true;
+    this.updateStickyState();
   }
   get scrollLeft() {
     return this.horizontalScrollBar.scrollPosition;
   }
   set scrollLeft(value) {
     this.horizontalScrollBar.scrollPosition = value;
+    this._hasManualScroll = true;
+    this.updateStickyState();
   }
   get scrollWidth() {
     return this.horizontalScrollBar.scrollSize;
@@ -3227,6 +3664,56 @@ class ScrollBoxRenderable extends BoxRenderable {
   get scrollHeight() {
     return this.verticalScrollBar.scrollSize;
   }
+  updateStickyState() {
+    if (!this._stickyScroll)
+      return;
+    const maxScrollTop = Math.max(0, this.scrollHeight - this.viewport.height);
+    const maxScrollLeft = Math.max(0, this.scrollWidth - this.viewport.width);
+    if (this.scrollTop <= 0) {
+      this._stickyScrollTop = true;
+      this._stickyScrollBottom = false;
+    } else if (this.scrollTop >= maxScrollTop) {
+      this._stickyScrollTop = false;
+      this._stickyScrollBottom = true;
+    } else {
+      this._stickyScrollTop = false;
+      this._stickyScrollBottom = false;
+    }
+    if (this.scrollLeft <= 0) {
+      this._stickyScrollLeft = true;
+      this._stickyScrollRight = false;
+    } else if (this.scrollLeft >= maxScrollLeft) {
+      this._stickyScrollLeft = false;
+      this._stickyScrollRight = true;
+    } else {
+      this._stickyScrollLeft = false;
+      this._stickyScrollRight = false;
+    }
+  }
+  applyStickyStart(stickyStart) {
+    switch (stickyStart) {
+      case "top":
+        this._stickyScrollTop = true;
+        this._stickyScrollBottom = false;
+        this.verticalScrollBar.scrollPosition = 0;
+        break;
+      case "bottom":
+        this._stickyScrollTop = false;
+        this._stickyScrollBottom = true;
+        this.verticalScrollBar.scrollPosition = Math.max(0, this.scrollHeight - this.viewport.height);
+        break;
+      case "left":
+        this._stickyScrollLeft = true;
+        this._stickyScrollRight = false;
+        this.horizontalScrollBar.scrollPosition = 0;
+        break;
+      case "right":
+        this._stickyScrollLeft = false;
+        this._stickyScrollRight = true;
+        this.horizontalScrollBar.scrollPosition = Math.max(0, this.scrollWidth - this.viewport.width);
+        break;
+    }
+  }
   constructor(ctx, {
     wrapperOptions,
     viewportOptions,
@@ -3235,6 +3722,8 @@ class ScrollBoxRenderable extends BoxRenderable {
     scrollbarOptions,
     verticalScrollbarOptions,
     horizontalScrollbarOptions,
+    stickyScroll = false,
+    stickyStart,
     ...options
   }) {
     super(ctx, {
@@ -3247,6 +3736,8 @@ class ScrollBoxRenderable extends BoxRenderable {
       ...rootOptions
     });
     this.internalId = ScrollBoxRenderable.idCounter++;
+    this._stickyScroll = stickyScroll;
+    this._stickyStart = stickyStart;
     this.wrapper = new BoxRenderable(ctx, {
       flexDirection: "column",
       flexGrow: 1,
@@ -3295,6 +3786,8 @@ class ScrollBoxRenderable extends BoxRenderable {
       orientation: "vertical",
       onChange: (position) => {
         this.content.translateY = -position;
+        this._hasManualScroll = true;
+        this.updateStickyState();
       }
     });
     super.add(this.verticalScrollBar);
@@ -3309,10 +3802,15 @@ class ScrollBoxRenderable extends BoxRenderable {
       orientation: "horizontal",
       onChange: (position) => {
         this.content.translateX = -position;
+        this._hasManualScroll = true;
+        this.updateStickyState();
       }
     });
     this.wrapper.add(this.horizontalScrollBar);
     this.recalculateBarProps();
+    if (stickyStart && stickyScroll) {
+      this.applyStickyStart(stickyStart);
+    }
     this.selectionListener = () => {
       const selection = this._ctx.getSelection();
       if (!selection || !selection.isSelecting) {
@@ -3331,6 +3829,7 @@ class ScrollBoxRenderable extends BoxRenderable {
       this.verticalScrollBar.scrollBy(delta.y, unit);
       this.horizontalScrollBar.scrollBy(delta.x, unit);
     }
+    this._hasManualScroll = true;
   }
   scrollTo(position) {
     if (typeof position === "number") {
@@ -3362,6 +3861,7 @@ class ScrollBoxRenderable extends BoxRenderable {
         this.scrollLeft -= event.scroll?.delta ?? 0;
       else if (dir === "right")
         this.scrollLeft += event.scroll?.delta ?? 0;
+      this._hasManualScroll = true;
     }
     if (event.type === "drag" && event.isSelecting) {
       this.updateAutoScroll(event.x, event.y);
@@ -3370,10 +3870,14 @@ class ScrollBoxRenderable extends BoxRenderable {
     }
   }
   handleKeyPress(key) {
-    if (this.verticalScrollBar.handleKeyPress(key))
+    if (this.verticalScrollBar.handleKeyPress(key)) {
+      this._hasManualScroll = true;
       return true;
-    if (this.horizontalScrollBar.handleKeyPress(key))
+    }
+    if (this.horizontalScrollBar.handleKeyPress(key)) {
+      this._hasManualScroll = true;
       return true;
+    }
     return false;
   }
   startAutoScroll(mouseX, mouseY) {
@@ -3487,6 +3991,27 @@ class ScrollBoxRenderable extends BoxRenderable {
     this.verticalScrollBar.viewportSize = this.viewport.height;
     this.horizontalScrollBar.scrollSize = this.content.width;
     this.horizontalScrollBar.viewportSize = this.viewport.width;
+    if (this._stickyScroll) {
+      const newMaxScrollTop = Math.max(0, this.scrollHeight - this.viewport.height);
+      const newMaxScrollLeft = Math.max(0, this.scrollWidth - this.viewport.width);
+      if (this._stickyStart && !this._hasManualScroll) {
+        this.applyStickyStart(this._stickyStart);
+      } else {
+        if (this._stickyScrollTop) {
+          this.scrollTop = 0;
+        } else if (this._stickyScrollBottom && newMaxScrollTop > 0) {
+          this.scrollTop = newMaxScrollTop;
+        }
+        if (this._stickyScrollLeft) {
+          this.scrollLeft = 0;
+        } else if (this._stickyScrollRight && newMaxScrollLeft > 0) {
+          this.scrollLeft = newMaxScrollLeft;
+        }
+      }
+    }
+    process.nextTick(() => {
+      this.requestRender();
+    });
   }
   set rootOptions(options) {
     Object.assign(this, options);
@@ -3550,6 +4075,37 @@ function TabSelect(props, ...children) {
 function FrameBuffer(props, ...children) {
   return h(FrameBufferRenderable, props, ...children);
 }
+function StyledText2(props, ...children) {
+  const styledProps = props;
+  const textNodeOptions = {
+    ...styledProps,
+    attributes: styledProps?.attributes ?? 0
+  };
+  const textNode = new TextNodeRenderable(textNodeOptions);
+  for (const child of children) {
+    textNode.add(child);
+  }
+  return textNode;
+}
+var vstyles = {
+  bold: (...children) => StyledText2({ attributes: TextAttributes.BOLD }, ...children),
+  italic: (...children) => StyledText2({ attributes: TextAttributes.ITALIC }, ...children),
+  underline: (...children) => StyledText2({ attributes: TextAttributes.UNDERLINE }, ...children),
+  dim: (...children) => StyledText2({ attributes: TextAttributes.DIM }, ...children),
+  blink: (...children) => StyledText2({ attributes: TextAttributes.BLINK }, ...children),
+  inverse: (...children) => StyledText2({ attributes: TextAttributes.INVERSE }, ...children),
+  hidden: (...children) => StyledText2({ attributes: TextAttributes.HIDDEN }, ...children),
+  strikethrough: (...children) => StyledText2({ attributes: TextAttributes.STRIKETHROUGH }, ...children),
+  boldItalic: (...children) => StyledText2({ attributes: TextAttributes.BOLD | TextAttributes.ITALIC }, ...children),
+  boldUnderline: (...children) => StyledText2({ attributes: TextAttributes.BOLD | TextAttributes.UNDERLINE }, ...children),
+  italicUnderline: (...children) => StyledText2({ attributes: TextAttributes.ITALIC | TextAttributes.UNDERLINE }, ...children),
+  boldItalicUnderline: (...children) => StyledText2({ attributes: TextAttributes.BOLD | TextAttributes.ITALIC | TextAttributes.UNDERLINE }, ...children),
+  color: (color, ...children) => StyledText2({ fg: color }, ...children),
+  bgColor: (bgColor, ...children) => StyledText2({ bg: bgColor }, ...children),
+  fg: (color, ...children) => StyledText2({ fg: color }, ...children),
+  bg: (bgColor, ...children) => StyledText2({ bg: bgColor }, ...children),
+  styled: (attributes = 0, ...children) => StyledText2({ attributes }, ...children)
+};
 // src/renderables/composition/VRenderable.ts
 class VRenderable extends Renderable {
   options;
@@ -3567,6 +4123,8 @@ export {
   yellow,
   wrapWithDelegates,
   white,
+  vstyles,
+  visualizeRenderableTree,
   underline,
   t,
   stringToStyledText,
@@ -3601,6 +4159,8 @@ export {
   italic,
   isValidPercentage,
   isVNode,
+  isTextNodeRenderable,
+  isStyledText,
   isSizeType,
   isRenderable,
   isPositionTypeType,
@@ -3667,6 +4227,7 @@ export {
   TrackedNode,
   Timeline,
   TextRenderable,
+  TextNodeRenderable,
   TextBuffer,
   TextAttributes,
   Text,
@@ -3682,6 +4243,7 @@ export {
   Select,
   ScrollBoxRenderable,
   ScrollBarRenderable,
+  RootTextNodeRenderable,
   RootRenderable,
   RenderableEvents,
   Renderable,
@@ -3711,11 +4273,12 @@ export {
   BorderCharArrays,
   BlurEffect,
   BloomEffect,
+  BaseRenderable,
   ArrowRenderable,
   ASCIIFontSelectionHelper,
   ASCIIFontRenderable,
   ASCIIFont
 };
 
-//# debugId=D81404410A6C6E2564756E2164756E21
+//# debugId=4D8A7644AF667D7864756E2164756E21
 //# sourceMappingURL=index.js.map