@opentui/core 0.1.23 → 0.1.25

package/index.js

@@ -13,7 +13,6 @@ import {
   KeyHandler,
   LayoutEvents,
   LogLevel,
-  MeasureMode,
   MouseButton,
   MouseEvent,
   MouseParser,
@@ -28,7 +27,6 @@ import {
   TerminalConsole,
   TextAttributes,
   TextBuffer,
-  TrackedNode,
   bg,
   bgBlack,
   bgBlue,
@@ -56,16 +54,19 @@ import {
   coordinateToCharacterIndex,
   createCliRenderer,
   createTextAttributes,
-  createTrackedNode,
   cyan,
   delegate,
   dim,
+  env,
+  envRegistry,
+  exports_src,
   fg,
   fonts,
+  generateEnvColored,
+  generateEnvMarkdown,
   getBorderFromSides,
   getBorderSides,
   getCharacterPositions,
-  getKeyHandler,
   getObjectsInViewport,
   green,
   h,
@@ -73,15 +74,7 @@ import {
   hexToRgb,
   hsvToRgb,
   instantiate,
-  isDimensionType,
-  isFlexBasisType,
-  isMarginType,
-  isOverflowType,
-  isPaddingType,
-  isPositionType,
-  isPositionTypeType,
   isRenderable,
-  isSizeType,
   isStyledText,
   isVNode,
   isValidPercentage,
@@ -108,6 +101,7 @@ import {
   parseUnit,
   parseWrap,
   red,
+  registerEnvVar,
   renderFontToFrameBuffer,
   resolveRenderLib,
   reverse,
@@ -117,10 +111,11 @@ import {
   stringToStyledText,
   t,
   underline,
+  visualizeRenderableTree,
   white,
   wrapWithDelegates,
   yellow
-} from "./index-a6ydv6yb.js";
+} from "./index-6kvgbzah.js";
 // src/post/filters.ts
 function applyScanlines(buffer, strength = 0.8, step = 2) {
   const width = buffer.width;
@@ -1378,7 +1373,7 @@ class BoxRenderable extends Renderable {
     };
   }
   applyYogaBorders() {
-    const node = this.layoutNode.yogaNode;
+    const node = this.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);
@@ -1386,7 +1381,7 @@ class BoxRenderable extends Renderable {
     this.requestRender();
   }
   applyYogaGap(options) {
-    const node = this.layoutNode.yogaNode;
+    const node = this.yogaNode;
     if (isGapType(options.gap)) {
       node.setGap(Gutter.All, options.gap);
     }
@@ -1399,19 +1394,19 @@ class BoxRenderable extends Renderable {
   }
   set gap(gap) {
     if (isGapType(gap)) {
-      this.layoutNode.yogaNode.setGap(Gutter.All, gap);
+      this.yogaNode.setGap(Gutter.All, gap);
       this.requestRender();
     }
   }
   set rowGap(rowGap) {
     if (isGapType(rowGap)) {
-      this.layoutNode.yogaNode.setGap(Gutter.Row, rowGap);
+      this.yogaNode.setGap(Gutter.Row, rowGap);
       this.requestRender();
     }
   }
   set columnGap(columnGap) {
     if (isGapType(columnGap)) {
-      this.layoutNode.yogaNode.setGap(Gutter.Column, columnGap);
+      this.yogaNode.setGap(Gutter.Column, columnGap);
       this.requestRender();
     }
   }
@@ -1437,7 +1432,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);
   }
@@ -1465,16 +1460,16 @@ function styledTextToTextNodes(styledText) {
 
 class TextNodeRenderable extends BaseRenderable {
   [BrandedTextNodeRenderable] = true;
-  fg;
-  bg;
-  attributes;
+  _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;
+    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;
@@ -1528,6 +1523,13 @@ class TextNodeRenderable extends BaseRenderable {
     }
     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");
@@ -1569,9 +1571,9 @@ class TextNodeRenderable extends BaseRenderable {
   }
   mergeStyles(parentStyle) {
     return {
-      fg: this.fg ?? parentStyle.fg,
-      bg: this.bg ?? parentStyle.bg,
-      attributes: this.attributes | parentStyle.attributes
+      fg: this._fg ?? parentStyle.fg,
+      bg: this._bg ?? parentStyle.bg,
+      attributes: this._attributes | parentStyle.attributes
     };
   }
   gatherWithInheritedStyle(parentStyle = { fg: undefined, bg: undefined, attributes: 0 }) {
@@ -1618,13 +1620,46 @@ class TextNodeRenderable extends BaseRenderable {
   getRenderable(id) {
     return this._children.find((child) => typeof child !== "string" && child.id === id);
   }
+  get fg() {
+    return this._fg;
+  }
+  set fg(fg2) {
+    if (!fg2) {
+      this._fg = undefined;
+      this.requestRender();
+      return;
+    }
+    this._fg = parseColor(fg2);
+    this.requestRender();
+  }
+  set bg(bg2) {
+    if (!bg2) {
+      this._bg = undefined;
+      this.requestRender();
+      return;
+    }
+    this._bg = parseColor(bg2);
+    this.requestRender();
+  }
+  get bg() {
+    return this._bg;
+  }
+  set attributes(attributes) {
+    this._attributes = attributes;
+    this.requestRender();
+  }
+  get attributes() {
+    return this._attributes;
+  }
 }
 
 class RootTextNodeRenderable extends TextNodeRenderable {
   ctx;
-  constructor(ctx, options) {
+  textParent;
+  constructor(ctx, options, textParent) {
     super(options);
     this.ctx = ctx;
+    this.textParent = textParent;
   }
   requestRender() {
     this.markDirty();
@@ -1636,14 +1671,17 @@ class RootTextNodeRenderable extends TextNodeRenderable {
 class TextRenderable extends Renderable {
   selectable = true;
   _text;
+  _hasManualStyledText = false;
   _defaultFg;
   _defaultBg;
   _defaultAttributes;
   _selectionBg;
   _selectionFg;
+  _wrap = false;
+  _wrapMode = "word";
   lastLocalSelection = null;
   textBuffer;
-  _lineInfo = { lineStarts: [], lineWidths: [] };
+  _lineInfo = { lineStarts: [], lineWidths: [], maxLineWidth: 0 };
   rootTextNode;
   _defaultOptions = {
     content: "",
@@ -1652,32 +1690,41 @@ class TextRenderable extends Renderable {
     selectionBg: undefined,
     selectionFg: undefined,
     selectable: true,
-    attributes: 0
+    attributes: 0,
+    wrap: true,
+    wrapMode: "word"
   };
   constructor(ctx, options) {
     super(ctx, options);
     const content = options.content ?? this._defaultOptions.content;
     const styledText = typeof content === "string" ? stringToStyledText(content) : content;
     this._text = styledText;
+    this._hasManualStyledText = !!options.content;
     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._wrap = options.wrap ?? this._defaultOptions.wrap;
+    this._wrapMode = options.wrapMode ?? this._defaultOptions.wrapMode;
+    this.textBuffer = TextBuffer.create(this._ctx.widthMethod);
+    this.textBuffer.setWrapMode(this._wrapMode);
+    this.setupMeasureFunc();
     this.textBuffer.setDefaultFg(this._defaultFg);
     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);
+    if (this._wrap && this.width > 0) {
+      this.updateWrapWidth(this.width);
+    }
     this.updateTextInfo();
   }
   updateTextBuffer(styledText) {
@@ -1697,7 +1744,11 @@ class TextRenderable extends Renderable {
   get chunks() {
     return this._text.chunks;
   }
+  get textNode() {
+    return this.rootTextNode;
+  }
   set content(value) {
+    this._hasManualStyledText = true;
     const styledText = typeof value === "string" ? stringToStyledText(value) : value;
     if (this._text !== styledText) {
       this._text = styledText;
@@ -1711,9 +1762,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();
     }
   }
@@ -1748,9 +1801,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();
     }
   }
@@ -1761,6 +1816,27 @@ class TextRenderable extends Renderable {
     if (this._defaultAttributes !== value) {
       this._defaultAttributes = value;
       this.textBuffer.setDefaultAttributes(this._defaultAttributes);
+      this.rootTextNode.attributes = value;
+      this.requestRender();
+    }
+  }
+  get wrap() {
+    return this._wrap;
+  }
+  set wrap(value) {
+    if (this._wrap !== value) {
+      this._wrap = value;
+      this.textBuffer.setWrapWidth(this._wrap ? this.width : null);
+      this.requestRender();
+    }
+  }
+  get wrapMode() {
+    return this._wrapMode;
+  }
+  set wrapMode(value) {
+    if (this._wrapMode !== value) {
+      this._wrapMode = value;
+      this.textBuffer.setWrapMode(this._wrapMode);
       this.requestRender();
     }
   }
@@ -1780,40 +1856,42 @@ class TextRenderable extends Renderable {
     return this.textBuffer.setLocalSelection(localSelection.anchorX, localSelection.anchorY, localSelection.focusX, localSelection.focusY, this._selectionBg, this._selectionFg);
   }
   updateTextInfo() {
-    const lineInfo = this.textBuffer.lineInfo;
-    this._lineInfo.lineStarts = lineInfo.lineStarts;
-    this._lineInfo.lineWidths = lineInfo.lineWidths;
     if (this.lastLocalSelection) {
       const changed = this.updateLocalSelection(this.lastLocalSelection);
       if (changed) {
         this.requestRender();
       }
     }
-    this.layoutNode.yogaNode.markDirty();
+    this.yogaNode.markDirty();
     this.requestRender();
   }
+  updateLineInfo() {
+    const lineInfo = this.textBuffer.lineInfo;
+    this._lineInfo.lineStarts = lineInfo.lineStarts;
+    this._lineInfo.lineWidths = lineInfo.lineWidths;
+    this._lineInfo.maxLineWidth = lineInfo.maxLineWidth;
+  }
+  updateWrapWidth(width) {
+    this.textBuffer.setWrapWidth(width);
+    this.updateLineInfo();
+  }
   setupMeasureFunc() {
     const measureFunc = (width, widthMode, height, heightMode) => {
-      const maxLineWidth = Math.max(...this._lineInfo.lineWidths, 0);
-      const numLines = this._lineInfo.lineStarts.length || 1;
-      let measuredWidth = maxLineWidth;
-      let measuredHeight = numLines;
-      if (widthMode === MeasureMode.Exactly) {
-        measuredWidth = width;
-      } else if (widthMode === MeasureMode.AtMost) {
-        measuredWidth = Math.min(maxLineWidth, width);
-      }
-      if (heightMode === MeasureMode.Exactly) {
-        measuredHeight = height;
-      } else if (heightMode === MeasureMode.AtMost) {
-        measuredHeight = Math.min(numLines, height);
+      if (this._wrap) {
+        if (this.width !== width) {
+          this.updateWrapWidth(width);
+        }
+      } else {
+        this.updateLineInfo();
       }
+      const measuredWidth = this._lineInfo.maxLineWidth;
+      const measuredHeight = this._lineInfo.lineStarts.length;
       return {
         width: Math.max(1, measuredWidth),
         height: Math.max(1, measuredHeight)
       };
     };
-    this.layoutNode.yogaNode.setMeasureFunc(measureFunc);
+    this.yogaNode.setMeasureFunc(measureFunc);
   }
   insertChunk(chunk, index) {
     this.textBuffer.insertChunkGroup(index ?? this.textBuffer.chunkGroupCount, chunk.text, chunk.fg, chunk.bg, chunk.attributes);
@@ -1837,14 +1915,15 @@ class TextRenderable extends Renderable {
     this.clearChunks(this._text);
   }
   updateTextFromNodes() {
-    if (this.rootTextNode.isDirty) {
+    if (this.rootTextNode.isDirty && !this._hasManualStyledText) {
       const chunks = this.rootTextNode.gatherWithInheritedStyle({
         fg: this._defaultFg,
         bg: this._defaultBg,
         attributes: this._defaultAttributes
       });
       this.textBuffer.setStyledText(new StyledText(chunks));
-      this.updateTextInfo();
+      this.updateLineInfo();
+      this.yogaNode.markDirty();
     }
   }
   add(obj, index) {
@@ -1860,6 +1939,9 @@ class TextRenderable extends Renderable {
     this.rootTextNode.insertBefore(obj, anchor);
     return this.rootTextNode.children.indexOf(obj);
   }
+  getTextChildren() {
+    return this.rootTextNode.getChildren();
+  }
   clear() {
     this.rootTextNode.clear();
     const emptyStyledText = stringToStyledText("");
@@ -1894,9 +1976,9 @@ class TextRenderable extends Renderable {
   getSelection() {
     return this.textBuffer.getSelection();
   }
-  onUpdate(deltaTime) {
+  onLifecyclePass = () => {
     this.updateTextFromNodes();
-  }
+  };
   render(buffer, deltaTime) {
     if (!this.visible)
       return;
@@ -1937,6 +2019,7 @@ class ASCIIFontRenderable extends FrameBufferRenderable {
     const text = options.text || "";
     const measurements = measureText({ text, font });
     super(ctx, {
+      flexShrink: 0,
       ...options,
       width: measurements.width || 1,
       height: measurements.height || 1,
@@ -2030,6 +2113,8 @@ class ASCIIFontRenderable extends FrameBufferRenderable {
     this.renderFontToBuffer();
   }
   renderFontToBuffer() {
+    if (this.isDestroyed)
+      return;
     this.frameBuffer.clear(this._bg);
     renderFontToFrameBuffer(this.frameBuffer, {
       text: this._text,
@@ -2976,43 +3061,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);
+    super(ctx, { flexShrink: 0, ...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;
   }
@@ -3027,69 +3140,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 realStartCell = Math.floor(virtualThumbStart / 2);
+    const realEndCell = Math.ceil(virtualThumbEnd / 2) - 1;
+    const startX = Math.max(0, realStartCell);
+    const endX = Math.min(this.width - 1, realEndCell);
+    for (let realX = startX;realX <= endX; realX++) {
+      const virtualCellStart = realX * 2;
+      const virtualCellEnd = virtualCellStart + 2;
+      const thumbStartInCell = Math.max(virtualThumbStart, virtualCellStart);
+      const thumbEndInCell = Math.min(virtualThumbEnd, virtualCellEnd);
+      const coverage = thumbEndInCell - thumbStartInCell;
+      let char = " ";
+      if (coverage >= 2) {
+        char = "\u2588";
+      } else {
+        const isLeftHalf = thumbStartInCell === virtualCellStart;
+        if (isLeftHalf) {
+          char = "\u258C";
+        } else {
+          char = "\u2590";
+        }
+      }
+      for (let y = 0;y < this.height; y++) {
+        buffer.setCellWithAlphaBlending(this.x + realX, this.y + y, char, this._foregroundColor, this._backgroundColor);
+      }
+    }
+  }
+  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 thumbRect = this.getThumbRect();
-    buffer.fillRect(thumbRect.x, thumbRect.y, thumbRect.width, thumbRect.height, this._foregroundColor);
+    const realStartCell = Math.floor(virtualThumbStart / 2);
+    const realEndCell = Math.ceil(virtualThumbEnd / 2) - 1;
+    const startY = Math.max(0, realStartCell);
+    const endY = Math.min(this.height - 1, realEndCell);
+    for (let realY = startY;realY <= endY; realY++) {
+      const virtualCellStart = realY * 2;
+      const virtualCellEnd = virtualCellStart + 2;
+      const thumbStartInCell = Math.max(virtualThumbStart, virtualCellStart);
+      const thumbEndInCell = Math.min(virtualThumbEnd, virtualCellEnd);
+      const coverage = thumbEndInCell - thumbStartInCell;
+      let char = " ";
+      if (coverage >= 2) {
+        char = "\u2588";
+      } else if (coverage > 0) {
+        const virtualPositionInCell = thumbStartInCell - virtualCellStart;
+        if (virtualPositionInCell === 0) {
+          char = "\u2580";
+        } else {
+          char = "\u2584";
+        }
+      }
+      for (let x = 0;x < this.width; x++) {
+        buffer.setCellWithAlphaBlending(this.x + x, this.y + realY, char, this._foregroundColor, this._backgroundColor);
+      }
+    }
+  }
+  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));
   }
 }
 
@@ -3132,6 +3359,7 @@ class ScrollBarRenderable extends Renderable {
       return;
     this._scrollSize = value;
     this.recalculateVisibility();
+    this.updateSliderFromScrollState();
     this.scrollPosition = this.scrollPosition;
   }
   set scrollPosition(value) {
@@ -3139,15 +3367,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() {
@@ -3170,16 +3398,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"
       } : {
@@ -3258,17 +3492,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;
@@ -3338,10 +3565,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) {
@@ -3547,13 +3774,12 @@ class ScrollBoxRenderable extends BoxRenderable {
     horizontalScrollbarOptions,
     stickyScroll = false,
     stickyStart,
+    scrollX = false,
+    scrollY = true,
     ...options
   }) {
     super(ctx, {
-      flexShrink: 1,
-      flexGrow: 1,
       flexDirection: "row",
-      flexWrap: "wrap",
       alignItems: "stretch",
       ...options,
       ...rootOptions
@@ -3564,10 +3790,6 @@ class ScrollBoxRenderable extends BoxRenderable {
     this.wrapper = new BoxRenderable(ctx, {
       flexDirection: "column",
       flexGrow: 1,
-      flexShrink: 1,
-      flexBasis: "auto",
-      maxHeight: "100%",
-      maxWidth: "100%",
       ...wrapperOptions,
       id: `scroll-box-wrapper-${this.internalId}`
     });
@@ -3575,11 +3797,7 @@ class ScrollBoxRenderable extends BoxRenderable {
     this.viewport = new BoxRenderable(ctx, {
       flexDirection: "column",
       flexGrow: 1,
-      flexShrink: 1,
-      flexBasis: "auto",
-      maxHeight: "100%",
-      maxWidth: "100%",
-      overflow: "scroll",
+      overflow: "hidden",
       onSizeChange: () => {
         this.recalculateBarProps();
       },
@@ -3589,8 +3807,9 @@ class ScrollBoxRenderable extends BoxRenderable {
     this.wrapper.add(this.viewport);
     this.content = new ContentRenderable(ctx, this.viewport, {
       alignSelf: "flex-start",
-      minWidth: "100%",
-      minHeight: "100%",
+      flexShrink: 0,
+      ...scrollX ? { minWidth: "100%" } : { minWidth: "100%", maxWidth: "100%" },
+      ...scrollY ? { minHeight: "100%" } : { minHeight: "100%", maxHeight: "100%" },
       onSizeChange: () => {
         this.recalculateBarProps();
       },
@@ -3609,6 +3828,8 @@ class ScrollBoxRenderable extends BoxRenderable {
       orientation: "vertical",
       onChange: (position) => {
         this.content.translateY = -position;
+        this._hasManualScroll = true;
+        this.updateStickyState();
       }
     });
     super.add(this.verticalScrollBar);
@@ -3623,6 +3844,8 @@ class ScrollBoxRenderable extends BoxRenderable {
       orientation: "horizontal",
       onChange: (position) => {
         this.content.translateX = -position;
+        this._hasManualScroll = true;
+        this.updateStickyState();
       }
     });
     this.wrapper.add(this.horizontalScrollBar);
@@ -3689,10 +3912,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) {
@@ -3824,6 +4051,9 @@ class ScrollBoxRenderable extends BoxRenderable {
         }
       }
     }
+    process.nextTick(() => {
+      this.requestRender();
+    });
   }
   set rootOptions(options) {
     Object.assign(this, options);
@@ -3936,6 +4166,7 @@ export {
   wrapWithDelegates,
   white,
   vstyles,
+  visualizeRenderableTree,
   underline,
   t,
   stringToStyledText,
@@ -3945,6 +4176,7 @@ export {
   reverse,
   resolveRenderLib,
   renderFontToFrameBuffer,
+  registerEnvVar,
   red,
   parseWrap,
   parseUnit,
@@ -3968,36 +4200,29 @@ export {
   maybeMakeRenderable,
   magenta,
   italic,
-  isValidPercentage,
   isVNode,
   isTextNodeRenderable,
   isStyledText,
-  isSizeType,
   isRenderable,
-  isPositionTypeType,
-  isPositionType,
-  isPaddingType,
-  isOverflowType,
-  isMarginType,
-  isFlexBasisType,
-  isDimensionType,
   instantiate,
   hsvToRgb,
   hexToRgb,
   hastToStyledText,
   h,
   green,
-  getKeyHandler,
   getCharacterPositions,
   getBorderSides,
   getBorderFromSides,
+  generateEnvMarkdown,
+  generateEnvColored,
   fonts,
   fg,
+  envRegistry,
+  env,
   engine,
   dim,
   delegate,
   cyan,
-  createTrackedNode,
   createTimeline,
   createTextAttributes,
   createCliRenderer,
@@ -4033,9 +4258,9 @@ export {
   applyGrayscale,
   applyChromaticAberration,
   applyAsciiArt,
+  exports_src as Yoga,
   VignetteEffect,
   VRenderable,
-  TrackedNode,
   Timeline,
   TextRenderable,
   TextNodeRenderable,
@@ -4091,5 +4316,5 @@ export {
   ASCIIFont
 };
 
-//# debugId=E4AC186230704DBA64756E2164756E21
+//# debugId=9C915E7AEEBC51B664756E2164756E21
 //# sourceMappingURL=index.js.map