@termuijs/widgets 0.1.0

package/dist/index.js

@@ -0,0 +1,968 @@
+// src/base/Widget.ts
+import {
+  defaultStyle,
+  mergeStyles,
+  createLayoutNode,
+  EventEmitter,
+  normalizeEdges,
+  getBorderChars,
+  styleToCellAttrs,
+  containsPoint
+} from "@termuijs/core";
+var _widgetIdCounter = 0;
+var Widget = class {
+  /** Unique widget identifier */
+  id;
+  /** Widget's style */
+  _style;
+  /** Child widgets */
+  _children = [];
+  /** Parent widget (null for root) */
+  parent = null;
+  /** Computed layout rectangle */
+  _rect = { x: 0, y: 0, width: 0, height: 0 };
+  /** Reference to the layout node (set during getLayoutNode) */
+  _layoutNode = null;
+  /** Whether this widget can receive focus */
+  focusable = false;
+  /** Tab index for focus ordering */
+  tabIndex = 0;
+  /** Event emitter for this widget */
+  events = new EventEmitter();
+  /** Whether the widget is currently focused */
+  isFocused = false;
+  /**
+   * Dirty flag — true when this widget needs re-rendering.
+   * Newly created widgets start dirty.
+   */
+  _dirty = true;
+  constructor(style = {}) {
+    this.id = `widget_${++_widgetIdCounter}`;
+    this._style = mergeStyles(defaultStyle(), style);
+  }
+  /** Get the current style */
+  get style() {
+    return this._style;
+  }
+  /** Update the style (merge with existing) */
+  setStyle(style) {
+    this._style = mergeStyles(this._style, style);
+    this.markDirty();
+  }
+  /** Get the computed rect after layout */
+  get rect() {
+    return this._rect;
+  }
+  /** Add a child widget */
+  addChild(child) {
+    child.parent = this;
+    this._children.push(child);
+  }
+  /** Remove a child widget */
+  removeChild(child) {
+    const idx = this._children.indexOf(child);
+    if (idx >= 0) {
+      this._children.splice(idx, 1);
+      child.parent = null;
+    }
+  }
+  /** Remove all children */
+  clearChildren() {
+    for (const child of this._children) {
+      child.parent = null;
+    }
+    this._children = [];
+  }
+  /** Get all children */
+  get children() {
+    return this._children;
+  }
+  /**
+   * Build the LayoutNode tree for this widget.
+   * Stores a reference so we can sync computed rects back via syncLayout().
+   */
+  getLayoutNode() {
+    const childNodes = this._children.filter((c) => c.style.visible !== false).map((c) => c.getLayoutNode());
+    this._layoutNode = createLayoutNode(this.id, this._style, childNodes);
+    return this._layoutNode;
+  }
+  /**
+   * After computeLayout() has been called, sync the computed rects
+   * from the layout tree back into widget `_rect` fields.
+   * This MUST be called after computeLayout() and before render().
+   */
+  syncLayout() {
+    if (this._layoutNode) {
+      this._rect = { ...this._layoutNode.computed };
+    }
+    const visibleChildren = this._children.filter((c) => c.style.visible !== false);
+    for (let i = 0; i < visibleChildren.length; i++) {
+      visibleChildren[i].syncLayout();
+    }
+  }
+  /**
+   * Render this widget (and children) into the screen buffer.
+   * Automatically pushes a clip region if overflow is hidden (default).
+   */
+  render(screen) {
+    if (this._style.visible === false) return;
+    const shouldClip = this._style.overflow !== "visible";
+    if (shouldClip) {
+      screen.pushClip(this._rect);
+    }
+    this._renderSelf(screen);
+    this._renderBorder(screen);
+    for (const child of this._children) {
+      child.render(screen);
+    }
+    if (shouldClip) {
+      screen.popClip();
+    }
+  }
+  /**
+   * Update the computed rect from layout results.
+   */
+  updateRect(rect) {
+    this._rect = rect;
+  }
+  /**
+   * Mark this widget as needing re-render.
+   * Propagates up to parent so the render loop can detect changes.
+   */
+  markDirty() {
+    if (this._dirty) return;
+    this._dirty = true;
+    this.parent?.markDirty();
+  }
+  /**
+   * Clear the dirty flag after rendering.
+   */
+  clearDirty() {
+    this._dirty = false;
+    for (const child of this._children) {
+      child.clearDirty();
+    }
+  }
+  /** Check if this widget (or any child) needs re-rendering */
+  get isDirty() {
+    return this._dirty;
+  }
+  /**
+   * Render the border around this widget, including focus ring if focused.
+   */
+  _renderBorder(screen) {
+    const border = this._style.border;
+    const hasBorder = border && border !== "none";
+    const showFocusRing = this.isFocused && this.focusable && this._style.focusRingStyle !== "none";
+    if (!hasBorder && !showFocusRing) return;
+    const { x, y, width, height } = this._rect;
+    if (width < 2 || height < 2) return;
+    if (hasBorder) {
+      const chars = getBorderChars(border);
+      if (!chars) return;
+      const attrs = styleToCellAttrs(this._style);
+      const borderFg = this._style.borderColor ?? attrs.fg;
+      const fg = showFocusRing ? this._style.focusRingColor ?? { type: "named", name: "cyan" } : borderFg;
+      const cellStyle = { fg };
+      screen.setCell(x, y, { char: chars.topLeft, ...cellStyle });
+      for (let c = 1; c < width - 1; c++) {
+        screen.setCell(x + c, y, { char: chars.top, ...cellStyle });
+      }
+      screen.setCell(x + width - 1, y, { char: chars.topRight, ...cellStyle });
+      screen.setCell(x, y + height - 1, { char: chars.bottomLeft, ...cellStyle });
+      for (let c = 1; c < width - 1; c++) {
+        screen.setCell(x + c, y + height - 1, { char: chars.bottom, ...cellStyle });
+      }
+      screen.setCell(x + width - 1, y + height - 1, { char: chars.bottomRight, ...cellStyle });
+      for (let r = 1; r < height - 1; r++) {
+        screen.setCell(x, y + r, { char: chars.left, ...cellStyle });
+        screen.setCell(x + width - 1, y + r, { char: chars.right, ...cellStyle });
+      }
+    } else if (showFocusRing) {
+      const fg = this._style.focusRingColor ?? { type: "named", name: "cyan" };
+      const cellStyle = { fg, bold: true };
+      screen.setCell(x, y, { char: "\u250C", ...cellStyle });
+      if (width > 2) screen.setCell(x + 1, y, { char: "\u2500", ...cellStyle });
+      screen.setCell(x + width - 1, y, { char: "\u2510", ...cellStyle });
+      if (width > 2) screen.setCell(x + width - 2, y, { char: "\u2500", ...cellStyle });
+      screen.setCell(x, y + height - 1, { char: "\u2514", ...cellStyle });
+      if (width > 2) screen.setCell(x + 1, y + height - 1, { char: "\u2500", ...cellStyle });
+      screen.setCell(x + width - 1, y + height - 1, { char: "\u2518", ...cellStyle });
+      if (width > 2) screen.setCell(x + width - 2, y + height - 1, { char: "\u2500", ...cellStyle });
+      if (height > 2) {
+        screen.setCell(x, y + 1, { char: "\u2502", ...cellStyle });
+        screen.setCell(x + width - 1, y + 1, { char: "\u2502", ...cellStyle });
+        screen.setCell(x, y + height - 2, { char: "\u2502", ...cellStyle });
+        screen.setCell(x + width - 1, y + height - 2, { char: "\u2502", ...cellStyle });
+      }
+    }
+  }
+  /**
+   * Get the inner content area (after border + padding).
+   */
+  _getContentRect() {
+    const padding = normalizeEdges(this._style.padding);
+    const border = this._style.border && this._style.border !== "none" ? 1 : 0;
+    return {
+      x: this._rect.x + padding.left + border,
+      y: this._rect.y + padding.top + border,
+      width: Math.max(0, this._rect.width - padding.left - padding.right - border * 2),
+      height: Math.max(0, this._rect.height - padding.top - padding.bottom - border * 2)
+    };
+  }
+  /**
+   * Check if a point hits this widget.
+   */
+  hitTest(x, y) {
+    return containsPoint(this._rect, x, y);
+  }
+  /** Lifecycle: called when the widget is mounted */
+  mount() {
+    this.events.emit("mount", void 0);
+    for (const child of this._children) {
+      child.mount();
+    }
+  }
+  /** Lifecycle: called when the widget is unmounted */
+  unmount() {
+    for (const child of this._children) {
+      child.unmount();
+    }
+    this.events.emit("unmount", void 0);
+  }
+};
+
+// src/display/Box.ts
+import { styleToCellAttrs as styleToCellAttrs2 } from "@termuijs/core";
+var Box = class extends Widget {
+  constructor(style = {}) {
+    super(style);
+  }
+  _renderSelf(screen) {
+    const { bg } = styleToCellAttrs2(this._style);
+    if (bg.type === "none") return;
+    const { x, y, width, height } = this._rect;
+    const border = this._style.border && this._style.border !== "none" ? 1 : 0;
+    for (let r = border; r < height - border; r++) {
+      for (let c = border; c < width - border; c++) {
+        screen.setCell(x + c, y + r, { char: " ", bg });
+      }
+    }
+  }
+};
+
+// src/display/Text.ts
+import { styleToCellAttrs as styleToCellAttrs3, wordWrap, stringWidth } from "@termuijs/core";
+var Text = class extends Widget {
+  _content;
+  _wrap;
+  _align;
+  constructor(content, style = {}, props = {}) {
+    super(style);
+    this._content = content;
+    this._wrap = props.wrap ?? true;
+    this._align = props.align ?? "left";
+  }
+  /** Update the text content */
+  setContent(content) {
+    this._content = content;
+  }
+  /** Get current text content */
+  getContent() {
+    return this._content;
+  }
+  _renderSelf(screen) {
+    const contentRect = this._getContentRect();
+    const { x, y, width, height } = contentRect;
+    if (width <= 0 || height <= 0) return;
+    const attrs = styleToCellAttrs3(this._style);
+    let text = this._wrap ? 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 lineWidth = stringWidth(line);
+      let offsetX = 0;
+      if (this._align === "center") {
+        offsetX = Math.floor((width - lineWidth) / 2);
+      } else if (this._align === "right") {
+        offsetX = width - lineWidth;
+      }
+      screen.writeString(x + Math.max(0, offsetX), y + i, line, attrs);
+    }
+  }
+};
+
+// src/display/LogView.ts
+import { styleToCellAttrs as styleToCellAttrs4, truncate } from "@termuijs/core";
+var LogView = class extends Widget {
+  _lines = [];
+  _scrollOffset = 0;
+  _highlight;
+  _autoScroll;
+  constructor(style = {}, opts = {}) {
+    super(style);
+    this._highlight = opts.highlight ?? {
+      ERROR: { type: "named", name: "red" },
+      WARN: { type: "named", name: "yellow" },
+      INFO: { type: "named", name: "green" },
+      DEBUG: { type: "named", name: "brightBlack" }
+    };
+    this._autoScroll = opts.autoScroll ?? true;
+  }
+  setLines(lines) {
+    this._lines = lines;
+    if (this._autoScroll) {
+      this._scrollToBottom();
+    }
+  }
+  appendLine(line) {
+    this._lines.push(line);
+    if (this._autoScroll) {
+      this._scrollToBottom();
+    }
+  }
+  scrollUp(n = 1) {
+    this._scrollOffset = Math.max(0, this._scrollOffset - n);
+  }
+  scrollDown(n = 1) {
+    this._scrollOffset = Math.min(
+      Math.max(0, this._lines.length - 1),
+      this._scrollOffset + n
+    );
+  }
+  _scrollToBottom() {
+    const rect = this._getContentRect();
+    const visibleLines = Math.max(1, rect.height);
+    this._scrollOffset = Math.max(0, this._lines.length - visibleLines);
+  }
+  _renderSelf(screen) {
+    const rect = this._getContentRect();
+    const { x, y, width, height } = rect;
+    if (width <= 0 || height <= 0) return;
+    const attrs = styleToCellAttrs4(this._style);
+    const visibleLines = this._lines.slice(this._scrollOffset, this._scrollOffset + height);
+    for (let i = 0; i < Math.min(visibleLines.length, height); i++) {
+      const line = truncate(visibleLines[i], width);
+      const lineColor = this._getLineColor(line);
+      screen.writeString(x, y + i, line, {
+        ...attrs,
+        ...lineColor ? { fg: lineColor } : {}
+      });
+    }
+  }
+  _getLineColor(line) {
+    for (const [keyword, color] of Object.entries(this._highlight)) {
+      if (line.includes(keyword)) return color;
+    }
+    return null;
+  }
+};
+
+// src/input/List.ts
+import { styleToCellAttrs as styleToCellAttrs5, stringWidth as stringWidth2, truncate as truncate2 } from "@termuijs/core";
+var List = class extends Widget {
+  _items;
+  _selectedIndex = 0;
+  _scrollOffset = 0;
+  _onSelect;
+  constructor(items, style = {}, onSelect) {
+    super({ border: "single", ...style });
+    this._items = items;
+    this._onSelect = onSelect;
+    this.focusable = true;
+  }
+  get selectedIndex() {
+    return this._selectedIndex;
+  }
+  get selectedItem() {
+    return this._items[this._selectedIndex];
+  }
+  setItems(items) {
+    this._items = items;
+    this._selectedIndex = Math.min(this._selectedIndex, items.length - 1);
+    this._clampScroll();
+  }
+  /** Move selection up */
+  selectPrev() {
+    let next = this._selectedIndex - 1;
+    while (next >= 0 && this._items[next].disabled) next--;
+    if (next >= 0) {
+      this._selectedIndex = next;
+      this._clampScroll();
+    }
+  }
+  /** Move selection down */
+  selectNext() {
+    let next = this._selectedIndex + 1;
+    while (next < this._items.length && this._items[next].disabled) next++;
+    if (next < this._items.length) {
+      this._selectedIndex = next;
+      this._clampScroll();
+    }
+  }
+  /** Confirm the current selection */
+  confirm() {
+    const item = this._items[this._selectedIndex];
+    if (item && !item.disabled) {
+      this._onSelect?.(item, this._selectedIndex);
+    }
+  }
+  _renderSelf(screen) {
+    const rect = this._getContentRect();
+    const { x, y, width, height } = rect;
+    if (width <= 0 || height <= 0) return;
+    const attrs = styleToCellAttrs5(this._style);
+    const visibleCount = Math.min(this._items.length - this._scrollOffset, height);
+    for (let i = 0; i < visibleCount; i++) {
+      const itemIdx = this._scrollOffset + i;
+      const item = this._items[itemIdx];
+      const isSelected = itemIdx === this._selectedIndex;
+      const prefix = isSelected ? "\u25B8 " : "  ";
+      let line = prefix + item.label;
+      line = truncate2(line, width);
+      const cellStyle = {
+        ...attrs,
+        bold: isSelected,
+        dim: item.disabled ?? false,
+        inverse: isSelected && this.isFocused
+      };
+      screen.writeString(x, y + i, line, cellStyle);
+      if (isSelected && this.isFocused) {
+        const remaining = width - stringWidth2(line);
+        for (let c = 0; c < remaining; c++) {
+          screen.setCell(x + stringWidth2(line) + c, y + i, { char: " ", ...cellStyle });
+        }
+      }
+    }
+    if (this._items.length > height) {
+      const scrollRatio = this._scrollOffset / (this._items.length - height);
+      const scrollPos = Math.floor(scrollRatio * (height - 1));
+      for (let r = 0; r < height; r++) {
+        const scrollChar = r === scrollPos ? "\u2588" : "\u2591";
+        screen.setCell(x + width - 1, y + r, { char: scrollChar, ...attrs, dim: true });
+      }
+    }
+  }
+  _clampScroll() {
+    const rect = this._getContentRect();
+    const visibleHeight = rect.height;
+    if (visibleHeight <= 0) return;
+    if (this._selectedIndex < this._scrollOffset) {
+      this._scrollOffset = this._selectedIndex;
+    }
+    if (this._selectedIndex >= this._scrollOffset + visibleHeight) {
+      this._scrollOffset = this._selectedIndex - visibleHeight + 1;
+    }
+  }
+};
+
+// src/input/TextInput.ts
+import { styleToCellAttrs as styleToCellAttrs6, truncate as truncate3 } from "@termuijs/core";
+var TextInput = class extends Widget {
+  _value = "";
+  _cursorPos = 0;
+  _placeholder;
+  _mask;
+  _maxLength;
+  _onChange;
+  _onSubmit;
+  constructor(style = {}, options = {}) {
+    super({ border: "single", height: 3, ...style });
+    this._placeholder = options.placeholder ?? "";
+    this._mask = options.mask ?? null;
+    this._maxLength = options.maxLength ?? Infinity;
+    this._onChange = options.onChange;
+    this._onSubmit = options.onSubmit;
+    this.focusable = true;
+  }
+  get value() {
+    return this._value;
+  }
+  set value(v) {
+    this._value = v.slice(0, this._maxLength);
+    this._cursorPos = Math.min(this._cursorPos, this._value.length);
+  }
+  /**
+   * Handle a typed character.
+   */
+  insertChar(char) {
+    if (this._value.length >= this._maxLength) return;
+    this._value = this._value.slice(0, this._cursorPos) + char + this._value.slice(this._cursorPos);
+    this._cursorPos++;
+    this._onChange?.(this._value);
+  }
+  /**
+   * Delete the character before the cursor.
+   */
+  deleteBack() {
+    if (this._cursorPos > 0) {
+      this._value = this._value.slice(0, this._cursorPos - 1) + this._value.slice(this._cursorPos);
+      this._cursorPos--;
+      this._onChange?.(this._value);
+    }
+  }
+  /**
+   * Delete the character after the cursor.
+   */
+  deleteForward() {
+    if (this._cursorPos < this._value.length) {
+      this._value = this._value.slice(0, this._cursorPos) + this._value.slice(this._cursorPos + 1);
+      this._onChange?.(this._value);
+    }
+  }
+  moveCursorLeft() {
+    this._cursorPos = Math.max(0, this._cursorPos - 1);
+  }
+  moveCursorRight() {
+    this._cursorPos = Math.min(this._value.length, this._cursorPos + 1);
+  }
+  moveCursorHome() {
+    this._cursorPos = 0;
+  }
+  moveCursorEnd() {
+    this._cursorPos = this._value.length;
+  }
+  submit() {
+    this._onSubmit?.(this._value);
+  }
+  clear() {
+    this._value = "";
+    this._cursorPos = 0;
+    this._onChange?.("");
+  }
+  _renderSelf(screen) {
+    const rect = this._getContentRect();
+    const { x, y, width, height } = rect;
+    if (width <= 0 || height <= 0) return;
+    const attrs = styleToCellAttrs6(this._style);
+    if (this._value.length === 0 && !this.isFocused) {
+      screen.writeString(x, y, truncate3(this._placeholder, width), { ...attrs, dim: true });
+      return;
+    }
+    const displayValue = this._mask ? this._mask.repeat(this._value.length) : this._value;
+    const visibleWidth = width - 1;
+    let scrollX = 0;
+    if (this._cursorPos > visibleWidth) {
+      scrollX = this._cursorPos - visibleWidth;
+    }
+    const visibleText = displayValue.slice(scrollX, scrollX + visibleWidth);
+    screen.writeString(x, y, visibleText, attrs);
+    if (this.isFocused) {
+      const cursorScreenPos = x + this._cursorPos - scrollX;
+      if (cursorScreenPos >= x && cursorScreenPos < x + width) {
+        const cursorChar = this._cursorPos < displayValue.length ? displayValue[this._cursorPos] : " ";
+        screen.setCell(cursorScreenPos, y, {
+          char: cursorChar,
+          ...attrs,
+          inverse: true
+        });
+      }
+    }
+  }
+};
+
+// src/data/Table.ts
+import { styleToCellAttrs as styleToCellAttrs7, stringWidth as stringWidth4, truncate as truncate4 } from "@termuijs/core";
+var Table = class extends Widget {
+  _columns;
+  _rows;
+  _showHeader;
+  _headerColor;
+  _stripe;
+  _stripeColor;
+  _separator;
+  constructor(columns, rows, style = {}, options = {}) {
+    super(style);
+    this._columns = columns;
+    this._rows = rows;
+    this._showHeader = options.showHeader ?? true;
+    this._headerColor = options.headerColor ?? { type: "named", name: "cyan" };
+    this._stripe = options.stripe ?? true;
+    this._stripeColor = options.stripeColor ?? { type: "named", name: "brightBlack" };
+    this._separator = options.separator ?? " \u2502 ";
+  }
+  setRows(rows) {
+    this._rows = rows;
+  }
+  _renderSelf(screen) {
+    const rect = this._getContentRect();
+    const { x, y, width, height } = rect;
+    if (width <= 0 || height <= 0) return;
+    const attrs = styleToCellAttrs7(this._style);
+    const sepWidth = stringWidth4(this._separator);
+    const colWidths = this._computeColumnWidths(
+      width - (this._columns.length - 1) * sepWidth
+    );
+    let row = 0;
+    if (this._showHeader && row < height) {
+      let cx = x;
+      for (let c = 0; c < this._columns.length; c++) {
+        const col = this._columns[c];
+        const cellText = this._alignText(col.header, colWidths[c], col.align ?? "left");
+        screen.writeString(cx, y + row, cellText, {
+          ...attrs,
+          fg: this._headerColor,
+          bold: true
+        });
+        cx += colWidths[c];
+        if (c < this._columns.length - 1) {
+          screen.writeString(cx, y + row, this._separator, { ...attrs, dim: true });
+          cx += sepWidth;
+        }
+      }
+      row++;
+      if (row < height) {
+        const sepLine = "\u2500".repeat(width);
+        screen.writeString(x, y + row, sepLine, { ...attrs, dim: true });
+        row++;
+      }
+    }
+    for (let r = 0; r < this._rows.length && row < height; r++) {
+      const dataRow = this._rows[r];
+      const isStripe = this._stripe && r % 2 === 1;
+      let cx = x;
+      for (let c = 0; c < this._columns.length; c++) {
+        const col = this._columns[c];
+        const rawValue = String(dataRow[col.key] ?? "");
+        const cellText = this._alignText(rawValue, colWidths[c], col.align ?? "left");
+        screen.writeString(cx, y + row, cellText, {
+          ...attrs,
+          bg: isStripe ? this._stripeColor : attrs.bg
+        });
+        cx += colWidths[c];
+        if (c < this._columns.length - 1) {
+          screen.writeString(cx, y + row, this._separator, {
+            ...attrs,
+            dim: true,
+            bg: isStripe ? this._stripeColor : attrs.bg
+          });
+          cx += sepWidth;
+        }
+      }
+      if (isStripe) {
+        for (let fx = cx; fx < x + width; fx++) {
+          screen.setCell(fx, y + row, { char: " ", bg: this._stripeColor });
+        }
+      }
+      row++;
+    }
+  }
+  _computeColumnWidths(totalWidth) {
+    const fixedCols = this._columns.filter((c) => c.width !== void 0);
+    const flexCols = this._columns.filter((c) => c.width === void 0);
+    let usedWidth = fixedCols.reduce((sum, c) => sum + (c.width ?? 0), 0);
+    const remainingWidth = Math.max(0, totalWidth - usedWidth);
+    const flexWidth = flexCols.length > 0 ? Math.floor(remainingWidth / flexCols.length) : 0;
+    return this._columns.map((c) => c.width ?? flexWidth);
+  }
+  _alignText(text, width, align) {
+    const truncated = truncate4(text, width);
+    const textWidth = stringWidth4(truncated);
+    const pad = Math.max(0, width - textWidth);
+    switch (align) {
+      case "right":
+        return " ".repeat(pad) + truncated;
+      case "center": {
+        const left = Math.floor(pad / 2);
+        const right = pad - left;
+        return " ".repeat(left) + truncated + " ".repeat(right);
+      }
+      case "left":
+      default:
+        return truncated + " ".repeat(pad);
+    }
+  }
+};
+
+// src/data/Gauge.ts
+import { styleToCellAttrs as styleToCellAttrs8, stringWidth as stringWidth5 } from "@termuijs/core";
+var Gauge = class extends Widget {
+  _label;
+  _value = 0;
+  _color;
+  _showLabel;
+  constructor(label, style = {}, opts = {}) {
+    super(style);
+    this._label = label;
+    this._color = opts.color ?? { type: "named", name: "green" };
+    this._showLabel = opts.showLabel ?? true;
+  }
+  setValue(value) {
+    this._value = Math.max(0, Math.min(1, value));
+  }
+  getValue() {
+    return this._value;
+  }
+  setLabel(label) {
+    this._label = label;
+  }
+  _renderSelf(screen) {
+    const rect = this._getContentRect();
+    const { x, y, width, height } = rect;
+    if (width <= 0 || height <= 0) return;
+    const attrs = styleToCellAttrs8(this._style);
+    const labelStr = this._label + " ";
+    const percentStr = this._showLabel ? ` ${Math.round(this._value * 100)}%` : "";
+    const labelWidth = stringWidth5(labelStr);
+    const percentWidth = stringWidth5(percentStr);
+    const barWidth = Math.max(0, width - labelWidth - percentWidth);
+    screen.writeString(x, y, labelStr, { ...attrs, bold: true });
+    const filled = Math.round(barWidth * this._value);
+    const barX = x + labelWidth;
+    for (let i = 0; i < barWidth; i++) {
+      const char = i < filled ? "\u2588" : "\u2591";
+      screen.setCell(barX + i, y, {
+        char,
+        fg: i < filled ? this._color : { type: "named", name: "brightBlack" }
+      });
+    }
+    if (this._showLabel) {
+      screen.writeString(barX + barWidth, y, percentStr, {
+        ...attrs,
+        bold: true
+      });
+    }
+  }
+};
+
+// src/data/Sparkline.ts
+import { styleToCellAttrs as styleToCellAttrs9 } from "@termuijs/core";
+var SPARK_CHARS = ["\u2581", "\u2582", "\u2583", "\u2584", "\u2585", "\u2586", "\u2587", "\u2588"];
+var Sparkline = class extends Widget {
+  _label;
+  _data = [];
+  _color;
+  _showRange;
+  constructor(label, style = {}, opts = {}) {
+    super(style);
+    this._label = label;
+    this._color = opts.color ?? { type: "named", name: "cyan" };
+    this._showRange = opts.showRange ?? false;
+  }
+  setData(data) {
+    this._data = data;
+  }
+  pushValue(value) {
+    this._data.push(value);
+  }
+  _renderSelf(screen) {
+    const rect = this._getContentRect();
+    const { x, y, width, height } = rect;
+    if (width <= 0 || height <= 0) return;
+    const attrs = styleToCellAttrs9(this._style);
+    const labelStr = this._label + " ";
+    const labelWidth = labelStr.length;
+    screen.writeString(x, y, labelStr, { ...attrs, bold: true });
+    const sparkWidth = width - labelWidth;
+    if (sparkWidth <= 0 || this._data.length === 0) return;
+    const data = this._data.slice(-sparkWidth);
+    const min = Math.min(...data);
+    const max = Math.max(...data);
+    const range = max - min || 1;
+    for (let i = 0; i < data.length; i++) {
+      const normalized = (data[i] - min) / range;
+      const charIdx = Math.min(7, Math.floor(normalized * 8));
+      screen.setCell(x + labelWidth + i, y, {
+        char: SPARK_CHARS[charIdx],
+        fg: this._color
+      });
+    }
+    if (this._showRange && height > 1) {
+      const rangeStr = `${min.toFixed(0)}\u2013${max.toFixed(0)}`;
+      screen.writeString(x + labelWidth, y + 1, rangeStr, {
+        ...attrs,
+        dim: true
+      });
+    }
+  }
+};
+
+// src/data/StatusIndicator.ts
+import { styleToCellAttrs as styleToCellAttrs10 } from "@termuijs/core";
+var StatusIndicator = class extends Widget {
+  _label;
+  _isUp;
+  _upColor;
+  _downColor;
+  constructor(label, isUp, style = {}, opts = {}) {
+    super(style);
+    this._label = label;
+    this._isUp = isUp;
+    this._upColor = opts.upColor ?? { type: "named", name: "green" };
+    this._downColor = opts.downColor ?? { type: "named", name: "red" };
+  }
+  setStatus(isUp) {
+    this._isUp = isUp;
+  }
+  getStatus() {
+    return this._isUp;
+  }
+  setLabel(label) {
+    this._label = label;
+  }
+  _renderSelf(screen) {
+    const rect = this._getContentRect();
+    const { x, y, width, height } = rect;
+    if (width <= 0 || height <= 0) return;
+    const attrs = styleToCellAttrs10(this._style);
+    const dot = this._isUp ? "\u25CF" : "\u25CB";
+    const statusText = this._isUp ? "Online" : "Offline";
+    const color = this._isUp ? this._upColor : this._downColor;
+    screen.setCell(x, y, { char: dot, fg: color });
+    screen.writeString(x + 2, y, `${this._label} \u2014 ${statusText}`, {
+      ...attrs,
+      fg: color
+    });
+  }
+};
+
+// src/feedback/ProgressBar.ts
+import { styleToCellAttrs as styleToCellAttrs11 } from "@termuijs/core";
+var ProgressBar = class extends Widget {
+  _value;
+  _fillChar;
+  _emptyChar;
+  _fillColor;
+  _showLabel;
+  _labelFormat;
+  _total;
+  constructor(style = {}, options = {}) {
+    super({ height: 1, ...style });
+    this._value = Math.max(0, Math.min(1, options.value ?? 0));
+    this._fillChar = options.fillChar ?? "\u2588";
+    this._emptyChar = options.emptyChar ?? "\u2591";
+    this._fillColor = options.fillColor ?? { type: "named", name: "green" };
+    this._showLabel = options.showLabel ?? true;
+    this._labelFormat = options.labelFormat ?? "percent";
+    this._total = options.total ?? 100;
+  }
+  /** Set progress value (0–1) */
+  setValue(value) {
+    this._value = Math.max(0, Math.min(1, value));
+  }
+  get value() {
+    return this._value;
+  }
+  _renderSelf(screen) {
+    const rect = this._getContentRect();
+    const { x, y, width } = rect;
+    if (width <= 0) return;
+    const attrs = styleToCellAttrs11(this._style);
+    let label = "";
+    if (this._showLabel) {
+      if (this._labelFormat === "percent") {
+        label = ` ${Math.round(this._value * 100)}%`;
+      } else {
+        label = ` ${Math.round(this._value * this._total)}/${this._total}`;
+      }
+    }
+    const barWidth = Math.max(0, width - label.length);
+    const filled = Math.round(barWidth * this._value);
+    const empty = barWidth - filled;
+    for (let i = 0; i < filled; i++) {
+      screen.setCell(x + i, y, { char: this._fillChar, ...attrs, fg: this._fillColor });
+    }
+    for (let i = 0; i < empty; i++) {
+      screen.setCell(x + filled + i, y, { char: this._emptyChar, ...attrs, dim: true });
+    }
+    if (label) {
+      screen.writeString(x + barWidth, y, label, { ...attrs, bold: true });
+    }
+  }
+};
+
+// src/feedback/Spinner.ts
+import { styleToCellAttrs as styleToCellAttrs12 } from "@termuijs/core";
+var SPINNER_FRAMES = {
+  dots: {
+    frames: ["\u280B", "\u2819", "\u2839", "\u2838", "\u283C", "\u2834", "\u2826", "\u2827", "\u2807", "\u280F"],
+    interval: 80
+  },
+  line: {
+    frames: ["-", "\\", "|", "/"],
+    interval: 130
+  },
+  star: {
+    frames: ["\u2736", "\u2738", "\u2739", "\u273A", "\u2739", "\u2737"],
+    interval: 70
+  },
+  arc: {
+    frames: ["\u25DC", "\u25E0", "\u25DD", "\u25DE", "\u25E1", "\u25DF"],
+    interval: 100
+  },
+  circle: {
+    frames: ["\u25D0", "\u25D3", "\u25D1", "\u25D2"],
+    interval: 120
+  },
+  bounce: {
+    frames: ["\u2801", "\u2802", "\u2804", "\u2802"],
+    interval: 120
+  },
+  arrow: {
+    frames: ["\u2190", "\u2196", "\u2191", "\u2197", "\u2192", "\u2198", "\u2193", "\u2199"],
+    interval: 100
+  },
+  clock: {
+    frames: ["\u{1F550}", "\u{1F551}", "\u{1F552}", "\u{1F553}", "\u{1F554}", "\u{1F555}", "\u{1F556}", "\u{1F557}", "\u{1F558}", "\u{1F559}", "\u{1F55A}", "\u{1F55B}"],
+    interval: 100
+  }
+};
+var Spinner = class extends Widget {
+  _frames;
+  _interval;
+  _frameIndex = 0;
+  _label;
+  _color;
+  _lastTick = 0;
+  _elapsed = 0;
+  constructor(style = {}, options = {}) {
+    super({ height: 1, ...style });
+    const spinnerDef = typeof options.spinner === "string" ? SPINNER_FRAMES[options.spinner] ?? SPINNER_FRAMES.dots : options.spinner ?? SPINNER_FRAMES.dots;
+    this._frames = spinnerDef.frames;
+    this._interval = spinnerDef.interval;
+    this._label = options.label ?? "";
+    this._color = options.color ?? { type: "named", name: "cyan" };
+  }
+  /** Update the spinner label */
+  setLabel(label) {
+    this._label = label;
+  }
+  /**
+   * Advance the spinner frame based on elapsed time.
+   * Call this with a delta (ms) from the render loop.
+   */
+  tick(deltaMs) {
+    this._elapsed += deltaMs;
+    if (this._elapsed >= this._interval) {
+      this._frameIndex = (this._frameIndex + 1) % this._frames.length;
+      this._elapsed = 0;
+    }
+  }
+  _renderSelf(screen) {
+    const rect = this._getContentRect();
+    const { x, y, width } = rect;
+    if (width <= 0) return;
+    const attrs = styleToCellAttrs12(this._style);
+    const frame = this._frames[this._frameIndex];
+    screen.writeString(x, y, frame, { ...attrs, fg: this._color });
+    if (this._label) {
+      screen.writeString(x + 2, y, this._label, attrs);
+    }
+  }
+};
+export {
+  Box,
+  Gauge,
+  List,
+  LogView,
+  ProgressBar,
+  SPINNER_FRAMES,
+  Sparkline,
+  Spinner,
+  StatusIndicator,
+  Table,
+  Text,
+  TextInput,
+  Widget
+};
+//# sourceMappingURL=index.js.map