@termuijs/widgets 0.1.1 → 0.1.3

package/dist/index.cjs

@@ -20,18 +20,21 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  BarChart: () => BarChart,
   Box: () => Box,
   Gauge: () => Gauge,
   List: () => List,
   LogView: () => LogView,
   ProgressBar: () => ProgressBar,
   SPINNER_FRAMES: () => SPINNER_FRAMES,
+  Scrollbar: () => Scrollbar,
   Sparkline: () => Sparkline,
   Spinner: () => Spinner,
   StatusIndicator: () => StatusIndicator,
   Table: () => Table,
   Text: () => Text,
   TextInput: () => TextInput,
+  VirtualList: () => VirtualList,
   Widget: () => Widget
 });
 module.exports = __toCommonJS(index_exports);
@@ -286,29 +289,63 @@ var Text = class extends Widget {
   _content;
   _wrap;
   _align;
+  _scrollY;
+  _scrollX;
   constructor(content, style = {}, props = {}) {
     super(style);
     this._content = content;
     this._wrap = props.wrap ?? true;
     this._align = props.align ?? "left";
+    this._scrollY = props.scrollY ?? 0;
+    this._scrollX = props.scrollX ?? 0;
   }
   /** Update the text content */
   setContent(content) {
     this._content = content;
+    this.markDirty();
   }
   /** Get current text content */
   getContent() {
     return this._content;
   }
+  /** Set vertical scroll offset (lines to skip). */
+  setScrollY(offset) {
+    this._scrollY = Math.max(0, offset);
+    this.markDirty();
+  }
+  /** Set horizontal scroll offset (columns to skip). */
+  setScrollX(offset) {
+    this._scrollX = Math.max(0, offset);
+    this.markDirty();
+  }
+  /** Get the total number of lines after wrapping. */
+  getLineCount() {
+    const contentRect = this._getContentRect();
+    const text = this._wrap ? (0, import_core3.wordWrap)(this._content, contentRect.width) : this._content;
+    return text.split("\n").length;
+  }
   _renderSelf(screen) {
     const contentRect = this._getContentRect();
     const { x, y, width, height } = contentRect;
     if (width <= 0 || height <= 0) return;
     const attrs = (0, import_core3.styleToCellAttrs)(this._style);
     let text = this._wrap ? (0, import_core3.wordWrap)(this._content, width) : this._content;
-    const lines = text.split("\n");
-    for (let i = 0; i < Math.min(lines.length, height); i++) {
-      let line = lines[i];
+    const allLines = text.split("\n");
+    const startLine = Math.min(this._scrollY, allLines.length);
+    const visibleLines = allLines.slice(startLine, startLine + height);
+    for (let i = 0; i < Math.min(visibleLines.length, height); i++) {
+      let line = visibleLines[i];
+      if (line === void 0) continue;
+      if (this._scrollX > 0) {
+        let skipped = 0;
+        let charIndex = 0;
+        for (const ch of line) {
+          if (skipped >= this._scrollX) break;
+          skipped++;
+          charIndex += ch.length;
+        }
+        line = line.slice(charIndex);
+      }
       const lineWidth = (0, import_core3.stringWidth)(line);
       let offsetX = 0;
       if (this._align === "center") {
@@ -343,12 +380,14 @@ var LogView = class extends Widget {
     if (this._autoScroll) {
       this._scrollToBottom();
     }
+    this.markDirty();
   }
   appendLine(line) {
     this._lines.push(line);
     if (this._autoScroll) {
       this._scrollToBottom();
     }
+    this.markDirty();
   }
   scrollUp(n = 1) {
     this._scrollOffset = Math.max(0, this._scrollOffset - n);
@@ -410,6 +449,7 @@ var List = class extends Widget {
     this._items = items;
     this._selectedIndex = Math.min(this._selectedIndex, items.length - 1);
     this._clampScroll();
+    this.markDirty();
   }
   /** Move selection up */
   selectPrev() {
@@ -418,6 +458,7 @@ var List = class extends Widget {
     if (next >= 0) {
       this._selectedIndex = next;
       this._clampScroll();
+      this.markDirty();
     }
   }
   /** Move selection down */
@@ -427,6 +468,7 @@ var List = class extends Widget {
     if (next < this._items.length) {
       this._selectedIndex = next;
       this._clampScroll();
+      this.markDirty();
     }
   }
   /** Confirm the current selection */
@@ -475,7 +517,10 @@ var List = class extends Widget {
   _clampScroll() {
     const rect = this._getContentRect();
     const visibleHeight = rect.height;
-    if (visibleHeight <= 0) return;
+    if (visibleHeight <= 0) {
+      this._scrollOffset = 0;
+      return;
+    }
     if (this._selectedIndex < this._scrollOffset) {
       this._scrollOffset = this._selectedIndex;
     }
@@ -590,8 +635,173 @@ var TextInput = class extends Widget {
   }
 };
 
-// src/data/Table.ts
+// src/input/VirtualList.ts
 var import_core7 = require("@termuijs/core");
+var VirtualList = class extends Widget {
+  _totalItems;
+  _itemHeight;
+  _renderItem;
+  _onSelect;
+  _selectedIndex = 0;
+  _scrollOffset = 0;
+  _overscan;
+  _showScrollbar;
+  constructor(options) {
+    super({ border: "single", ...options.style });
+    this._totalItems = options.totalItems;
+    this._itemHeight = options.itemHeight ?? 1;
+    this._renderItem = options.renderItem;
+    this._onSelect = options.onSelect;
+    this._overscan = options.overscan ?? 2;
+    this._showScrollbar = options.showScrollbar ?? true;
+    this.focusable = true;
+  }
+  // ── Getters ──
+  get totalItems() {
+    return this._totalItems;
+  }
+  get selectedIndex() {
+    return this._selectedIndex;
+  }
+  get scrollOffset() {
+    return this._scrollOffset;
+  }
+  // ── Public API ──
+  /** Update the total item count (e.g., after data refresh) */
+  setTotalItems(count) {
+    this._totalItems = count;
+    this._selectedIndex = Math.min(this._selectedIndex, Math.max(0, count - 1));
+    this._clampScroll();
+    this.markDirty();
+  }
+  /** Update the render function (e.g., when data changes) */
+  setRenderItem(fn) {
+    this._renderItem = fn;
+    this.markDirty();
+  }
+  /** Move selection up by one */
+  selectPrev() {
+    if (this._selectedIndex > 0) {
+      this._selectedIndex--;
+      this._clampScroll();
+      this.markDirty();
+    }
+  }
+  /** Move selection down by one */
+  selectNext() {
+    if (this._selectedIndex < this._totalItems - 1) {
+      this._selectedIndex++;
+      this._clampScroll();
+      this.markDirty();
+    }
+  }
+  /** Jump to the first item */
+  selectFirst() {
+    this._selectedIndex = 0;
+    this._clampScroll();
+    this.markDirty();
+  }
+  /** Jump to the last item */
+  selectLast() {
+    this._selectedIndex = Math.max(0, this._totalItems - 1);
+    this._clampScroll();
+    this.markDirty();
+  }
+  /** Page up — move by viewport height */
+  pageUp() {
+    const rect = this._getContentRect();
+    const pageSize = Math.floor(rect.height / this._itemHeight);
+    this._selectedIndex = Math.max(0, this._selectedIndex - pageSize);
+    this._clampScroll();
+    this.markDirty();
+  }
+  /** Page down — move by viewport height */
+  pageDown() {
+    const rect = this._getContentRect();
+    const pageSize = Math.floor(rect.height / this._itemHeight);
+    this._selectedIndex = Math.min(this._totalItems - 1, this._selectedIndex + pageSize);
+    this._clampScroll();
+    this.markDirty();
+  }
+  /** Scroll to a specific index */
+  scrollTo(index) {
+    this._selectedIndex = Math.max(0, Math.min(index, this._totalItems - 1));
+    this._clampScroll();
+    this.markDirty();
+  }
+  /** Confirm the current selection */
+  confirm() {
+    if (this._totalItems > 0) {
+      this._onSelect?.(this._selectedIndex);
+    }
+  }
+  // ── Rendering ──
+  _renderSelf(screen) {
+    const rect = this._getContentRect();
+    const { x, y, width, height } = rect;
+    if (width <= 0 || height <= 0 || this._totalItems === 0) return;
+    const attrs = (0, import_core7.styleToCellAttrs)(this._style);
+    const visibleItemCount = Math.floor(height / this._itemHeight);
+    const startIdx = Math.max(0, this._scrollOffset - this._overscan);
+    const endIdx = Math.min(this._totalItems, this._scrollOffset + visibleItemCount + this._overscan);
+    const contentWidth = this._showScrollbar && this._totalItems > visibleItemCount ? width - 1 : width;
+    for (let idx = startIdx; idx < endIdx; idx++) {
+      const rowY = y + (idx - this._scrollOffset) * this._itemHeight;
+      if (rowY < y || rowY >= y + height) continue;
+      const isSelected = idx === this._selectedIndex;
+      let content;
+      try {
+        content = this._renderItem(idx);
+      } catch {
+        content = `[Error: item ${idx}]`;
+      }
+      const prefix = isSelected ? "\u25B8 " : "  ";
+      let line = prefix + content;
+      line = (0, import_core7.truncate)(line, contentWidth);
+      const cellStyle = {
+        ...attrs,
+        bold: isSelected,
+        inverse: isSelected && this.isFocused
+      };
+      screen.writeString(x, rowY, line, cellStyle);
+      if (isSelected && this.isFocused) {
+        const remaining = contentWidth - (0, import_core7.stringWidth)(line);
+        for (let c = 0; c < remaining; c++) {
+          screen.setCell(x + (0, import_core7.stringWidth)(line) + c, rowY, { char: " ", ...cellStyle });
+        }
+      }
+    }
+    if (this._showScrollbar && this._totalItems > visibleItemCount) {
+      const scrollbarX = x + width - 1;
+      const totalPages = this._totalItems - visibleItemCount;
+      const scrollRatio = totalPages > 0 ? this._scrollOffset / totalPages : 0;
+      const thumbPos = Math.floor(scrollRatio * (height - 1));
+      for (let r = 0; r < height; r++) {
+        const scrollChar = r === thumbPos ? "\u2588" : "\u2591";
+        screen.setCell(scrollbarX, y + r, { char: scrollChar, ...attrs, dim: r !== thumbPos });
+      }
+    }
+  }
+  // ── Internal ──
+  _clampScroll() {
+    const rect = this._getContentRect();
+    const visibleHeight = Math.floor(rect.height / this._itemHeight);
+    if (visibleHeight <= 0) {
+      this._scrollOffset = 0;
+      return;
+    }
+    if (this._selectedIndex < this._scrollOffset) {
+      this._scrollOffset = this._selectedIndex;
+    }
+    if (this._selectedIndex >= this._scrollOffset + visibleHeight) {
+      this._scrollOffset = this._selectedIndex - visibleHeight + 1;
+    }
+    this._scrollOffset = Math.max(0, Math.min(this._scrollOffset, this._totalItems - visibleHeight));
+  }
+};
+
+// src/data/Table.ts
+var import_core8 = require("@termuijs/core");
 var Table = class extends Widget {
   _columns;
   _rows;
@@ -612,13 +822,14 @@ var Table = class extends Widget {
   }
   setRows(rows) {
     this._rows = rows;
+    this.markDirty();
   }
   _renderSelf(screen) {
     const rect = this._getContentRect();
     const { x, y, width, height } = rect;
     if (width <= 0 || height <= 0) return;
-    const attrs = (0, import_core7.styleToCellAttrs)(this._style);
-    const sepWidth = (0, import_core7.stringWidth)(this._separator);
+    const attrs = (0, import_core8.styleToCellAttrs)(this._style);
+    const sepWidth = (0, import_core8.stringWidth)(this._separator);
     const colWidths = this._computeColumnWidths(
       width - (this._columns.length - 1) * sepWidth
     );
@@ -685,8 +896,8 @@ var Table = class extends Widget {
     return this._columns.map((c) => c.width ?? flexWidth);
   }
   _alignText(text, width, align) {
-    const truncated = (0, import_core7.truncate)(text, width);
-    const textWidth = (0, import_core7.stringWidth)(truncated);
+    const truncated = (0, import_core8.truncate)(text, width);
+    const textWidth = (0, import_core8.stringWidth)(truncated);
     const pad = Math.max(0, width - textWidth);
     switch (align) {
       case "right":
@@ -704,7 +915,7 @@ var Table = class extends Widget {
 };
 
 // src/data/Gauge.ts
-var import_core8 = require("@termuijs/core");
+var import_core9 = require("@termuijs/core");
 var Gauge = class extends Widget {
   _label;
   _value = 0;
@@ -718,22 +929,24 @@ var Gauge = class extends Widget {
   }
   setValue(value) {
     this._value = Math.max(0, Math.min(1, value));
+    this.markDirty();
   }
   getValue() {
     return this._value;
   }
   setLabel(label) {
     this._label = label;
+    this.markDirty();
   }
   _renderSelf(screen) {
     const rect = this._getContentRect();
     const { x, y, width, height } = rect;
     if (width <= 0 || height <= 0) return;
-    const attrs = (0, import_core8.styleToCellAttrs)(this._style);
+    const attrs = (0, import_core9.styleToCellAttrs)(this._style);
     const labelStr = this._label + " ";
     const percentStr = this._showLabel ? ` ${Math.round(this._value * 100)}%` : "";
-    const labelWidth = (0, import_core8.stringWidth)(labelStr);
-    const percentWidth = (0, import_core8.stringWidth)(percentStr);
+    const labelWidth = (0, import_core9.stringWidth)(labelStr);
+    const percentWidth = (0, import_core9.stringWidth)(percentStr);
     const barWidth = Math.max(0, width - labelWidth - percentWidth);
     screen.writeString(x, y, labelStr, { ...attrs, bold: true });
     const filled = Math.round(barWidth * this._value);
@@ -755,7 +968,7 @@ var Gauge = class extends Widget {
 };
 
 // src/data/Sparkline.ts
-var import_core9 = require("@termuijs/core");
+var import_core10 = require("@termuijs/core");
 var SPARK_CHARS = ["\u2581", "\u2582", "\u2583", "\u2584", "\u2585", "\u2586", "\u2587", "\u2588"];
 var Sparkline = class extends Widget {
   _label;
@@ -770,15 +983,17 @@ var Sparkline = class extends Widget {
   }
   setData(data) {
     this._data = data;
+    this.markDirty();
   }
   pushValue(value) {
     this._data.push(value);
+    this.markDirty();
   }
   _renderSelf(screen) {
     const rect = this._getContentRect();
     const { x, y, width, height } = rect;
     if (width <= 0 || height <= 0) return;
-    const attrs = (0, import_core9.styleToCellAttrs)(this._style);
+    const attrs = (0, import_core10.styleToCellAttrs)(this._style);
     const labelStr = this._label + " ";
     const labelWidth = labelStr.length;
     screen.writeString(x, y, labelStr, { ...attrs, bold: true });
@@ -807,7 +1022,7 @@ var Sparkline = class extends Widget {
 };
 
 // src/data/StatusIndicator.ts
-var import_core10 = require("@termuijs/core");
+var import_core11 = require("@termuijs/core");
 var StatusIndicator = class extends Widget {
   _label;
   _isUp;
@@ -833,7 +1048,7 @@ var StatusIndicator = class extends Widget {
     const rect = this._getContentRect();
     const { x, y, width, height } = rect;
     if (width <= 0 || height <= 0) return;
-    const attrs = (0, import_core10.styleToCellAttrs)(this._style);
+    const attrs = (0, import_core11.styleToCellAttrs)(this._style);
     const dot = this._isUp ? "\u25CF" : "\u25CB";
     const statusText = this._isUp ? "Online" : "Offline";
     const color = this._isUp ? this._upColor : this._downColor;
@@ -845,8 +1060,196 @@ var StatusIndicator = class extends Widget {
   }
 };
 
+// src/data/BarChart.ts
+var import_core12 = require("@termuijs/core");
+var BarChart = class extends Widget {
+  _data = [];
+  _direction;
+  _barWidth;
+  _barGap;
+  _groupGap;
+  _max;
+  _barColor;
+  _valueColor;
+  _labelColor;
+  constructor(data, style = {}, opts = {}) {
+    super(style);
+    this._data = data;
+    this._direction = opts.direction ?? "vertical";
+    this._barWidth = opts.barWidth ?? 1;
+    this._barGap = opts.barGap ?? 1;
+    this._groupGap = opts.groupGap ?? 2;
+    this._max = opts.max;
+    this._barColor = opts.barColor ?? { type: "named", name: "cyan" };
+    this._valueColor = opts.valueColor ?? { type: "named", name: "white" };
+    this._labelColor = opts.labelColor ?? { type: "named", name: "brightBlack" };
+  }
+  setData(data) {
+    this._data = data;
+    this.markDirty();
+  }
+  setMax(max) {
+    this._max = max;
+    this.markDirty();
+  }
+  _renderSelf(screen) {
+    const rect = this._getContentRect();
+    const { x, y, width, height } = rect;
+    if (width <= 0 || height <= 0 || this._data.length === 0) return;
+    const maxVal = this._computeMax();
+    if (maxVal === 0) return;
+    if (this._direction === "vertical") {
+      this._renderVertical(screen, x, y, width, height, maxVal);
+    } else {
+      this._renderHorizontal(screen, x, y, width, height, maxVal);
+    }
+  }
+  _computeMax() {
+    if (this._max !== void 0) return this._max;
+    let max = 0;
+    for (const group of this._data) {
+      for (const bar of group.bars) {
+        if (bar.value > max) max = bar.value;
+      }
+    }
+    return max;
+  }
+  // ── Vertical Rendering ───────────────────────────
+  _renderVertical(screen, ox, oy, width, height, maxVal) {
+    const valueRows = 1;
+    const hasLabels = this._data.some(
+      (g) => g.bars.some((b) => b.label !== void 0)
+    );
+    const labelRows = hasLabels ? 1 : 0;
+    const hasGroupLabels = this._data.some((g) => g.label !== void 0);
+    const groupLabelRows = hasGroupLabels ? 1 : 0;
+    const reservedRows = valueRows + labelRows + groupLabelRows;
+    if (height <= reservedRows) return;
+    const barAreaHeight = height - reservedRows;
+    let cx = ox;
+    for (let gi = 0; gi < this._data.length; gi++) {
+      const group = this._data[gi];
+      if (!group) continue;
+      const groupStartX = cx;
+      for (let bi = 0; bi < group.bars.length; bi++) {
+        const bar = group.bars[bi];
+        if (!bar) continue;
+        if (cx + this._barWidth > ox + width) break;
+        const color = bar.color ?? this._barColor;
+        const scaledHeight = bar.value / maxVal * (barAreaHeight * 8);
+        let remaining = Math.round(scaledHeight);
+        for (let row = barAreaHeight - 1; row >= 0; row--) {
+          if (remaining <= 0) break;
+          const level = Math.min(remaining, 8);
+          const symbol = import_core12.VERTICAL_BAR_SYMBOLS[level] ?? " ";
+          const cellY = oy + row;
+          for (let col = 0; col < this._barWidth; col++) {
+            const cellX = cx + col;
+            if (cellX < ox + width) {
+              screen.setCell(cellX, cellY, { char: symbol, fg: color });
+            }
+          }
+          remaining -= 8;
+        }
+        const valStr = Math.round(bar.value).toString();
+        const valX = cx + Math.floor((this._barWidth - (0, import_core12.stringWidth)(valStr)) / 2);
+        screen.writeString(
+          Math.max(cx, valX),
+          oy + barAreaHeight,
+          valStr.slice(0, this._barWidth),
+          { fg: this._valueColor }
+        );
+        if (hasLabels && bar.label) {
+          const label = bar.label.slice(0, this._barWidth);
+          const labelX = cx + Math.floor((this._barWidth - (0, import_core12.stringWidth)(label)) / 2);
+          screen.writeString(
+            Math.max(cx, labelX),
+            oy + barAreaHeight + valueRows,
+            label,
+            { fg: this._labelColor }
+          );
+        }
+        cx += this._barWidth;
+        if (bi < group.bars.length - 1) cx += this._barGap;
+      }
+      if (hasGroupLabels && group.label) {
+        const groupWidth = cx - groupStartX;
+        const label = group.label.slice(0, groupWidth);
+        const labelX = groupStartX + Math.floor((groupWidth - (0, import_core12.stringWidth)(label)) / 2);
+        screen.writeString(
+          Math.max(groupStartX, labelX),
+          oy + height - 1,
+          label,
+          { fg: this._labelColor }
+        );
+      }
+      if (gi < this._data.length - 1) cx += this._groupGap;
+    }
+  }
+  // ── Horizontal Rendering ─────────────────────────
+  _renderHorizontal(screen, ox, oy, width, height, maxVal) {
+    let maxLabelWidth = 0;
+    let maxValueWidth = 0;
+    for (const group of this._data) {
+      for (const bar of group.bars) {
+        if (bar.label) {
+          const w = (0, import_core12.stringWidth)(bar.label);
+          if (w > maxLabelWidth) maxLabelWidth = w;
+        }
+        const vw = Math.round(bar.value).toString().length;
+        if (vw > maxValueWidth) maxValueWidth = vw;
+      }
+    }
+    const labelColWidth = maxLabelWidth > 0 ? maxLabelWidth + 1 : 0;
+    const valueColWidth = maxValueWidth > 0 ? maxValueWidth + 1 : 0;
+    const barAreaWidth = width - labelColWidth - valueColWidth;
+    if (barAreaWidth <= 0) return;
+    let cy = oy;
+    for (let gi = 0; gi < this._data.length; gi++) {
+      const group = this._data[gi];
+      if (!group) continue;
+      for (let bi = 0; bi < group.bars.length; bi++) {
+        const bar = group.bars[bi];
+        if (!bar) continue;
+        for (let row = 0; row < this._barWidth; row++) {
+          const cellY = cy + row;
+          if (cellY >= oy + height) break;
+          if (row === 0 && bar.label) {
+            const label = bar.label.slice(0, maxLabelWidth);
+            const padded = label.padStart(maxLabelWidth);
+            screen.writeString(ox, cellY, padded, { fg: this._labelColor });
+          }
+          const color = bar.color ?? this._barColor;
+          const scaledWidth = bar.value / maxVal * (barAreaWidth * 8);
+          let remaining = Math.round(scaledWidth);
+          const barStartX = ox + labelColWidth;
+          for (let col = 0; col < barAreaWidth; col++) {
+            if (remaining <= 0) break;
+            const level = Math.min(remaining, 8);
+            const symbol = import_core12.HORIZONTAL_BAR_SYMBOLS[level] ?? " ";
+            screen.setCell(barStartX + col, cellY, { char: symbol, fg: color });
+            remaining -= 8;
+          }
+          if (row === 0) {
+            const valStr = Math.round(bar.value).toString();
+            screen.writeString(
+              ox + labelColWidth + barAreaWidth,
+              cellY,
+              ` ${valStr}`,
+              { fg: this._valueColor }
+            );
+          }
+        }
+        cy += this._barWidth;
+        if (bi < group.bars.length - 1) cy += this._barGap;
+      }
+      if (gi < this._data.length - 1) cy += this._groupGap;
+    }
+  }
+};
+
 // src/feedback/ProgressBar.ts
-var import_core11 = require("@termuijs/core");
+var import_core13 = require("@termuijs/core");
 var ProgressBar = class extends Widget {
   _value;
   _fillChar;
@@ -868,6 +1271,7 @@ var ProgressBar = class extends Widget {
   /** Set progress value (0–1) */
   setValue(value) {
     this._value = Math.max(0, Math.min(1, value));
+    this.markDirty();
   }
   get value() {
     return this._value;
@@ -876,7 +1280,7 @@ var ProgressBar = class extends Widget {
     const rect = this._getContentRect();
     const { x, y, width } = rect;
     if (width <= 0) return;
-    const attrs = (0, import_core11.styleToCellAttrs)(this._style);
+    const attrs = (0, import_core13.styleToCellAttrs)(this._style);
     let label = "";
     if (this._showLabel) {
       if (this._labelFormat === "percent") {
@@ -901,7 +1305,7 @@ var ProgressBar = class extends Widget {
 };
 
 // src/feedback/Spinner.ts
-var import_core12 = require("@termuijs/core");
+var import_core14 = require("@termuijs/core");
 var SPINNER_FRAMES = {
   dots: {
     frames: ["\u280B", "\u2819", "\u2839", "\u2838", "\u283C", "\u2834", "\u2826", "\u2827", "\u2807", "\u280F"],
@@ -971,7 +1375,7 @@ var Spinner = class extends Widget {
     const rect = this._getContentRect();
     const { x, y, width } = rect;
     if (width <= 0) return;
-    const attrs = (0, import_core12.styleToCellAttrs)(this._style);
+    const attrs = (0, import_core14.styleToCellAttrs)(this._style);
     const frame = this._frames[this._frameIndex];
     screen.writeString(x, y, frame, { ...attrs, fg: this._color });
     if (this._label) {
@@ -979,20 +1383,106 @@ var Spinner = class extends Widget {
     }
   }
 };
+
+// src/feedback/Scrollbar.ts
+var import_core15 = require("@termuijs/core");
+var Scrollbar = class extends Widget {
+  _contentLength;
+  _viewportLength;
+  _position;
+  _orientation;
+  _thumbColor;
+  _trackColor;
+  _showArrows;
+  constructor(style = {}, opts) {
+    super(style);
+    this._contentLength = opts.contentLength;
+    this._viewportLength = opts.viewportLength;
+    this._position = opts.position ?? 0;
+    this._orientation = opts.orientation ?? "verticalRight";
+    this._thumbColor = opts.thumbColor ?? { type: "named", name: "white" };
+    this._trackColor = opts.trackColor ?? { type: "named", name: "brightBlack" };
+    this._showArrows = opts.showArrows ?? true;
+  }
+  setPosition(position) {
+    this._position = position;
+    this.markDirty();
+  }
+  setContentLength(length) {
+    this._contentLength = length;
+    this.markDirty();
+  }
+  setViewportLength(length) {
+    this._viewportLength = length;
+    this.markDirty();
+  }
+  _renderSelf(screen) {
+    const rect = this._getContentRect();
+    const { x, y, width, height } = rect;
+    if (width <= 0 || height <= 0 || this._contentLength <= 0) return;
+    if (this._contentLength <= this._viewportLength) return;
+    const vertical = this._orientation === "verticalRight" || this._orientation === "verticalLeft";
+    const symbols = vertical ? import_core15.ScrollbarSets.VERTICAL : import_core15.ScrollbarSets.HORIZONTAL;
+    const trackX = this._orientation === "verticalLeft" ? x : this._orientation === "verticalRight" ? x + width - 1 : x;
+    const trackY = this._orientation === "horizontalTop" ? y : this._orientation === "horizontalBottom" ? y + height - 1 : y;
+    const totalLength = vertical ? height : width;
+    if (totalLength <= 0) return;
+    let trackStart = 0;
+    let trackLength = totalLength;
+    if (this._showArrows && totalLength > 2) {
+      const beginX = vertical ? trackX : x;
+      const beginY = vertical ? y : trackY;
+      screen.setCell(beginX, beginY, {
+        char: symbols.begin,
+        fg: this._trackColor
+      });
+      const endX = vertical ? trackX : x + totalLength - 1;
+      const endY = vertical ? y + totalLength - 1 : trackY;
+      screen.setCell(endX, endY, {
+        char: symbols.end,
+        fg: this._trackColor
+      });
+      trackStart = 1;
+      trackLength -= 2;
+    }
+    if (trackLength <= 0) return;
+    const thumbSize = Math.max(1, Math.floor(
+      trackLength * this._viewportLength / this._contentLength
+    ));
+    const maxScroll = Math.max(1, this._contentLength - this._viewportLength);
+    const thumbOffset = Math.min(
+      trackLength - thumbSize,
+      Math.floor(this._position * (trackLength - thumbSize) / maxScroll)
+    );
+    for (let i = 0; i < trackLength; i++) {
+      const pos = trackStart + i;
+      const cellX = vertical ? trackX : x + pos;
+      const cellY = vertical ? y + pos : trackY;
+      const isThumb = i >= thumbOffset && i < thumbOffset + thumbSize;
+      screen.setCell(cellX, cellY, {
+        char: isThumb ? symbols.thumb : symbols.track,
+        fg: isThumb ? this._thumbColor : this._trackColor
+      });
+    }
+  }
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  BarChart,
   Box,
   Gauge,
   List,
   LogView,
   ProgressBar,
   SPINNER_FRAMES,
+  Scrollbar,
   Sparkline,
   Spinner,
   StatusIndicator,
   Table,
   Text,
   TextInput,
+  VirtualList,
   Widget
 });
 //# sourceMappingURL=index.cjs.map