@termuijs/widgets 0.1.3 → 0.1.4

package/dist/index.js

@@ -229,6 +229,7 @@ var Widget = class {
       child.unmount();
     }
     this.events.emit("unmount", void 0);
+    this.events.removeAll();
   }
 };
 
@@ -394,8 +395,828 @@ var LogView = class extends Widget {
   }
 };
 
+// src/display/Tree.ts
+import {
+  styleToCellAttrs as styleToCellAttrs5,
+  truncate as truncate2,
+  stringWidth as stringWidth2,
+  caps
+} from "@termuijs/core";
+var Tree = class extends Widget {
+  _nodes;
+  _onSelect;
+  _indent;
+  _selectedIndex = 0;
+  _scrollOffset = 0;
+  _visibleNodes = [];
+  constructor(options, style = {}) {
+    super(style);
+    this._nodes = options.nodes;
+    this._onSelect = options.onSelect;
+    this._indent = options.indent ?? 2;
+    this.focusable = true;
+    this._buildVisibleNodes();
+  }
+  // ── Public API ─────────────────────────────────────
+  get selectedIndex() {
+    return this._selectedIndex;
+  }
+  get selectedNode() {
+    return this._visibleNodes[this._selectedIndex]?.node;
+  }
+  setNodes(nodes) {
+    this._nodes = nodes;
+    this._selectedIndex = 0;
+    this._scrollOffset = 0;
+    this._buildVisibleNodes();
+    this.markDirty();
+  }
+  /** Move cursor up one visible row */
+  movePrev() {
+    if (this._selectedIndex > 0) {
+      this._selectedIndex--;
+      this._clampScroll();
+      this.markDirty();
+    }
+  }
+  /** Move cursor down one visible row */
+  moveNext() {
+    if (this._selectedIndex < this._visibleNodes.length - 1) {
+      this._selectedIndex++;
+      this._clampScroll();
+      this.markDirty();
+    }
+  }
+  /** Go to first visible node */
+  moveFirst() {
+    this._selectedIndex = 0;
+    this._clampScroll();
+    this.markDirty();
+  }
+  /** Go to last visible node */
+  moveLast() {
+    if (this._visibleNodes.length > 0) {
+      this._selectedIndex = this._visibleNodes.length - 1;
+      this._clampScroll();
+      this.markDirty();
+    }
+  }
+  /** Expand the selected node (if it's a collapsed parent) */
+  expand() {
+    const entry = this._visibleNodes[this._selectedIndex];
+    if (!entry) return;
+    const node = entry.node;
+    if (_isParent(node) && !node.expanded) {
+      node.expanded = true;
+      this._buildVisibleNodes();
+      this.markDirty();
+    }
+  }
+  /** Collapse the selected node, or move to parent if already collapsed/leaf */
+  collapse() {
+    const entry = this._visibleNodes[this._selectedIndex];
+    if (!entry) return;
+    const node = entry.node;
+    if (_isParent(node) && node.expanded) {
+      node.expanded = false;
+      this._buildVisibleNodes();
+      this._clampScroll();
+      this.markDirty();
+    } else if (entry.depth > 0) {
+      const parentPath = entry.path.slice(0, -1);
+      const parentIdx = this._visibleNodes.findIndex(
+        (e) => _pathsEqual(e.path, parentPath)
+      );
+      if (parentIdx >= 0) {
+        this._selectedIndex = parentIdx;
+        this._clampScroll();
+        this.markDirty();
+      }
+    }
+  }
+  /** Toggle expand/collapse (parent) or call onSelect (leaf) */
+  toggle() {
+    const entry = this._visibleNodes[this._selectedIndex];
+    if (!entry) return;
+    const node = entry.node;
+    if (_isParent(node)) {
+      node.expanded = !node.expanded;
+      this._buildVisibleNodes();
+      this._clampScroll();
+      this.markDirty();
+    } else {
+      this._onSelect?.(node, entry.path);
+    }
+  }
+  /**
+   * Handle a key event. Call this from your app's key-routing logic
+   * when this widget is focused.
+   */
+  handleKey(key) {
+    switch (key) {
+      case "ArrowUp":
+      case "k":
+        this.movePrev();
+        break;
+      case "ArrowDown":
+      case "j":
+        this.moveNext();
+        break;
+      case "Enter":
+      case " ":
+        this.toggle();
+        break;
+      case "ArrowLeft":
+      case "h":
+        this.collapse();
+        break;
+      case "ArrowRight":
+      case "l":
+        this.expand();
+        break;
+      case "Home":
+        this.moveFirst();
+        break;
+      case "End":
+        this.moveLast();
+        break;
+    }
+  }
+  // ── Rendering ──────────────────────────────────────
+  _renderSelf(screen) {
+    const rect = this._getContentRect();
+    const { x, y, width, height } = rect;
+    if (width <= 0 || height <= 0) return;
+    const attrs = styleToCellAttrs5(this._style);
+    const useUnicode = caps.unicode;
+    const collapsedChevron = useUnicode ? "\u25B6 " : "> ";
+    const expandedChevron = useUnicode ? "\u25BC " : "v ";
+    const leafPrefix = useUnicode ? "\u2022 " : "* ";
+    const visibleCount = Math.min(
+      this._visibleNodes.length - this._scrollOffset,
+      height
+    );
+    for (let i = 0; i < visibleCount; i++) {
+      const entryIdx = this._scrollOffset + i;
+      const entry = this._visibleNodes[entryIdx];
+      const { node, depth } = entry;
+      const isSelected = entryIdx === this._selectedIndex;
+      const indentStr = " ".repeat(this._indent * depth);
+      let chevron;
+      if (_isParent(node)) {
+        chevron = node.expanded ? expandedChevron : collapsedChevron;
+      } else {
+        chevron = leafPrefix;
+      }
+      let line = indentStr + chevron + node.label;
+      line = truncate2(line, width);
+      const cellStyle = isSelected && this.isFocused ? {
+        ...attrs,
+        bg: { type: "named", name: "blue" },
+        bold: true
+      } : isSelected ? { ...attrs, bold: true } : attrs;
+      screen.writeString(x, y + i, line, cellStyle);
+      if (isSelected && this.isFocused) {
+        const lineWidth = stringWidth2(line);
+        const remaining = width - lineWidth;
+        for (let c = 0; c < remaining; c++) {
+          screen.setCell(x + lineWidth + c, y + i, {
+            char: " ",
+            ...cellStyle
+          });
+        }
+      }
+    }
+  }
+  // ── Private helpers ────────────────────────────────
+  /** Rebuild the flat visible-node list from the tree */
+  _buildVisibleNodes() {
+    this._visibleNodes = [];
+    _collectVisible(this._nodes, 0, [], this._visibleNodes);
+  }
+  /** Ensure scroll keeps the selected index in view */
+  _clampScroll() {
+    const rect = this._getContentRect();
+    const visibleHeight = rect.height > 0 ? rect.height : 24;
+    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, this._scrollOffset);
+  }
+};
+function _isParent(node) {
+  return Array.isArray(node.children) && node.children.length > 0;
+}
+function _pathsEqual(a, b) {
+  if (a.length !== b.length) return false;
+  for (let i = 0; i < a.length; i++) {
+    if (a[i] !== b[i]) return false;
+  }
+  return true;
+}
+function _collectVisible(nodes, depth, parentPath, out) {
+  for (let i = 0; i < nodes.length; i++) {
+    const node = nodes[i];
+    const path = [...parentPath, i];
+    out.push({ node, depth, path });
+    if (_isParent(node) && node.expanded) {
+      _collectVisible(node.children, depth + 1, path, out);
+    }
+  }
+}
+
+// src/display/JSONView.ts
+import {
+  styleToCellAttrs as styleToCellAttrs6,
+  truncate as truncate3,
+  stringWidth as stringWidth3,
+  caps as caps2
+} from "@termuijs/core";
+function jsonToTree(value, key) {
+  const prefix = key !== void 0 ? `${key}: ` : "";
+  if (value === null) {
+    return {
+      label: `${prefix}null`,
+      data: { type: "null", key }
+    };
+  }
+  if (typeof value === "boolean") {
+    return {
+      label: `${prefix}${value}`,
+      data: { type: "boolean", key, value }
+    };
+  }
+  if (typeof value === "number") {
+    return {
+      label: `${prefix}${value}`,
+      data: { type: "number", key, value }
+    };
+  }
+  if (typeof value === "string") {
+    return {
+      label: `${prefix}"${value}"`,
+      data: { type: "string", key, value }
+    };
+  }
+  if (Array.isArray(value)) {
+    const children = value.map((v, i) => jsonToTree(v, String(i)));
+    return {
+      label: `${prefix}[${children.length}]`,
+      children,
+      expanded: false,
+      data: { type: "array", key }
+    };
+  }
+  if (typeof value === "object") {
+    const obj = value;
+    const children = Object.keys(obj).map((k) => jsonToTree(obj[k], k));
+    return {
+      label: `${prefix}{${children.length}}`,
+      children,
+      expanded: false,
+      data: { type: "object", key }
+    };
+  }
+  return {
+    label: `${prefix}${String(value)}`,
+    data: { type: "unknown", key }
+  };
+}
+function _valueColor(type) {
+  switch (type) {
+    case "string":
+      return { type: "named", name: "green" };
+    case "number":
+      return { type: "named", name: "yellow" };
+    case "boolean":
+      return { type: "named", name: "magenta" };
+    case "null":
+      return { type: "named", name: "magenta" };
+    default:
+      return { type: "named", name: "white" };
+  }
+}
+var KEY_COLOR = { type: "named", name: "cyan" };
+function _splitLabel(label, nodeData) {
+  if (nodeData.key !== void 0) {
+    const sep = `${nodeData.key}: `;
+    if (label.startsWith(sep)) {
+      return { keyPart: sep, valuePart: label.slice(sep.length) };
+    }
+  }
+  return { keyPart: "", valuePart: label };
+}
+var JSONView = class extends Tree {
+  constructor(options, style = {}) {
+    const root = jsonToTree(options.data);
+    const nodes = root.children && root.children.length > 0 ? root.children : [root];
+    super({ nodes, onSelect: options.onSelect, indent: options.indent }, style);
+  }
+  // ── Override rendering ─────────────────────────────
+  /**
+   * Replicate Tree's _renderSelf but colorize key/value segments.
+   * We access the private state via `(this as any)` since Tree doesn't
+   * expose those fields publicly — the tradeoff of extending vs composing.
+   */
+  _renderSelf(screen) {
+    const rect = this._getContentRect();
+    const { x, y, width, height } = rect;
+    if (width <= 0 || height <= 0) return;
+    const attrs = styleToCellAttrs6(this._style);
+    const useUnicode = caps2.unicode;
+    const collapsedChevron = useUnicode ? "\u25B6 " : "> ";
+    const expandedChevron = useUnicode ? "\u25BC " : "v ";
+    const leafPrefix = useUnicode ? "\u2022 " : "* ";
+    const visibleNodes = this._visibleNodes;
+    const scrollOffset = this._scrollOffset;
+    const selectedIndex = this._selectedIndex;
+    const indent = this._indent;
+    const visibleCount = Math.min(
+      visibleNodes.length - scrollOffset,
+      height
+    );
+    for (let i = 0; i < visibleCount; i++) {
+      const entryIdx = scrollOffset + i;
+      const entry = visibleNodes[entryIdx];
+      const { node, depth } = entry;
+      const isSelected = entryIdx === selectedIndex;
+      const nodeData = node.data ?? { type: "unknown" };
+      const indentStr = " ".repeat(indent * depth);
+      const isParent = Array.isArray(node.children) && node.children.length > 0;
+      let chevron;
+      if (isParent) {
+        chevron = node.expanded ? expandedChevron : collapsedChevron;
+      } else {
+        chevron = leafPrefix;
+      }
+      const linePrefix = indentStr + chevron;
+      const { keyPart, valuePart } = _splitLabel(node.label, nodeData);
+      const baseCellStyle = isSelected && this.isFocused ? {
+        ...attrs,
+        bg: { type: "named", name: "blue" },
+        bold: true
+      } : isSelected ? { ...attrs, bold: true } : attrs;
+      let cursorX = x;
+      const prefixTrunc = truncate3(linePrefix, width);
+      if (prefixTrunc.length > 0) {
+        screen.writeString(cursorX, y + i, prefixTrunc, baseCellStyle);
+        cursorX += stringWidth3(prefixTrunc);
+      }
+      const remaining = width - (cursorX - x);
+      if (remaining <= 0) {
+        _fillSelection(screen, x, y + i, width, cursorX - x, isSelected, this.isFocused, baseCellStyle);
+        continue;
+      }
+      if (keyPart.length > 0) {
+        const keyTrunc = truncate3(keyPart, remaining);
+        const keyStyle = { ...baseCellStyle, fg: KEY_COLOR };
+        screen.writeString(cursorX, y + i, keyTrunc, keyStyle);
+        cursorX += stringWidth3(keyTrunc);
+      }
+      const remaining2 = width - (cursorX - x);
+      if (remaining2 <= 0) {
+        _fillSelection(screen, x, y + i, width, cursorX - x, isSelected, this.isFocused, baseCellStyle);
+        continue;
+      }
+      if (valuePart.length > 0) {
+        const valTrunc = truncate3(valuePart, remaining2);
+        const valColor = _valueColor(nodeData.type);
+        const valStyle = { ...baseCellStyle, fg: valColor };
+        screen.writeString(cursorX, y + i, valTrunc, valStyle);
+        cursorX += stringWidth3(valTrunc);
+      }
+      _fillSelection(screen, x, y + i, width, cursorX - x, isSelected, this.isFocused, baseCellStyle);
+    }
+  }
+};
+function _fillSelection(screen, rowX, rowY, width, writtenWidth, isSelected, isFocused, cellStyle) {
+  if (!isSelected || !isFocused) return;
+  const remaining = width - writtenWidth;
+  for (let c = 0; c < remaining; c++) {
+    screen.setCell(rowX + writtenWidth + c, rowY, {
+      char: " ",
+      ...cellStyle
+    });
+  }
+}
+
+// src/display/DiffView.ts
+import {
+  styleToCellAttrs as styleToCellAttrs7,
+  truncate as truncate4
+} from "@termuijs/core";
+var DiffView = class extends Widget {
+  _lines;
+  _scrollOffset = 0;
+  _showLineNumbers;
+  _gutterWidth;
+  constructor(options, style = {}) {
+    super(style);
+    this._lines = options.lines;
+    this._showLineNumbers = options.showLineNumbers ?? true;
+    this._gutterWidth = options.gutterWidth ?? 5;
+    this.focusable = true;
+  }
+  setLines(lines) {
+    this._lines = lines;
+    this._scrollOffset = 0;
+    this.markDirty();
+  }
+  _renderSelf(screen) {
+    const rect = this._getContentRect();
+    const { x, y, width, height } = rect;
+    if (width <= 0 || height <= 0) return;
+    const baseAttrs = styleToCellAttrs7(this._style);
+    const visibleLines = this._lines.slice(
+      this._scrollOffset,
+      this._scrollOffset + height
+    );
+    for (let i = 0; i < visibleLines.length; i++) {
+      const diffLine = visibleLines[i];
+      let col = x;
+      const row = y + i;
+      const isAdd = diffLine.type === "add";
+      const isRemove = diffLine.type === "remove";
+      const isContext = diffLine.type === "context";
+      const fg = isAdd ? { type: "named", name: "green" } : isRemove ? { type: "named", name: "red" } : void 0;
+      const lineAttrs = {
+        ...baseAttrs,
+        ...fg ? { fg } : {},
+        dim: isContext
+      };
+      if (this._showLineNumbers) {
+        const gutterStr = diffLine.lineNo !== void 0 ? String(diffLine.lineNo).padStart(this._gutterWidth - 1, " ") + " " : " ".repeat(this._gutterWidth);
+        const gutterAttrs = { ...baseAttrs, dim: true };
+        screen.writeString(col, row, gutterStr.slice(0, this._gutterWidth), gutterAttrs);
+        col += this._gutterWidth;
+      }
+      const prefix = isAdd ? "+" : isRemove ? "-" : " ";
+      const remainingWidth = width - (col - x);
+      if (remainingWidth <= 0) continue;
+      screen.writeString(col, row, prefix, lineAttrs);
+      col += 1;
+      const contentWidth = width - (col - x);
+      if (contentWidth <= 0) continue;
+      const content = truncate4(diffLine.content, contentWidth);
+      screen.writeString(col, row, content, lineAttrs);
+    }
+  }
+  handleKey(key) {
+    const rect = this._getContentRect();
+    const visibleHeight = Math.max(1, rect.height);
+    const maxOffset = Math.max(0, this._lines.length - visibleHeight);
+    switch (key) {
+      case "ArrowUp":
+      case "k":
+        this._scrollOffset = Math.max(0, this._scrollOffset - 1);
+        this.markDirty();
+        break;
+      case "ArrowDown":
+      case "j":
+        this._scrollOffset = Math.min(maxOffset, this._scrollOffset + 1);
+        this.markDirty();
+        break;
+      case "PageUp":
+        this._scrollOffset = Math.max(0, this._scrollOffset - visibleHeight);
+        this.markDirty();
+        break;
+      case "PageDown":
+        this._scrollOffset = Math.min(maxOffset, this._scrollOffset + visibleHeight);
+        this.markDirty();
+        break;
+      case "Home":
+        this._scrollOffset = 0;
+        this.markDirty();
+        break;
+      case "End":
+        this._scrollOffset = maxOffset;
+        this.markDirty();
+        break;
+    }
+  }
+};
+
+// src/display/StreamingText.ts
+import { styleToCellAttrs as styleToCellAttrs8, wordWrap as wordWrap2, caps as caps3 } from "@termuijs/core";
+import { timerPoolSubscribe } from "@termuijs/motion";
+var StreamingText = class extends Widget {
+  _text;
+  _cursor;
+  _speed;
+  _blinkInterval;
+  /** Number of characters currently revealed (used when speed > 0) */
+  _revealed;
+  _cursorVisible;
+  _blinkUnsub;
+  constructor(options, style = {}) {
+    super(style);
+    this._text = options.text;
+    this._cursor = options.cursor ?? (caps3.unicode ? "\u258B" : "_");
+    this._speed = options.speed ?? 0;
+    this._blinkInterval = options.blinkInterval ?? 530;
+    this._revealed = 0;
+    this._cursorVisible = true;
+  }
+  /** Replace text content and reset the revealed counter to 0. */
+  setText(text) {
+    this._text = text;
+    this._revealed = 0;
+    this.markDirty();
+  }
+  /**
+   * Advance `_revealed` by `speed` characters.
+   * Call this from an external tick/render loop when `speed > 0`.
+   */
+  tick() {
+    if (this._speed <= 0 || this.isComplete()) return;
+    this._revealed = Math.min(this._revealed + this._speed, this._text.length);
+    this.markDirty();
+  }
+  /** Returns true when all text has been revealed. */
+  isComplete() {
+    if (this._speed === 0) return true;
+    return this._revealed >= this._text.length;
+  }
+  /** Lifecycle: start the blink timer (only when motion is enabled). */
+  mount() {
+    super.mount();
+    if (!caps3.motion) {
+      this._cursorVisible = false;
+      return;
+    }
+    this._blinkUnsub = timerPoolSubscribe(this._blinkInterval, () => {
+      this._cursorVisible = !this._cursorVisible;
+      this.markDirty();
+    });
+  }
+  /** Lifecycle: stop the blink timer. */
+  unmount() {
+    this._blinkUnsub?.();
+    this._blinkUnsub = void 0;
+    super.unmount();
+  }
+  _renderSelf(screen) {
+    const rect = this._getContentRect();
+    const { x, y, width, height } = rect;
+    if (width <= 0 || height <= 0) return;
+    const attrs = styleToCellAttrs8(this._style);
+    const displayText = this._speed > 0 ? this._text.slice(0, this._revealed) : this._text;
+    const fullText = this._cursorVisible ? displayText + this._cursor : displayText;
+    const wrapped = wordWrap2(fullText, width);
+    const lines = wrapped.split("\n");
+    const limit = Math.min(lines.length, height);
+    for (let i = 0; i < limit; i++) {
+      const line = lines[i];
+      if (line === void 0) continue;
+      screen.writeString(x, y + i, line, attrs);
+    }
+  }
+};
+
+// src/display/ChatMessage.ts
+import {
+  styleToCellAttrs as styleToCellAttrs9,
+  stringWidth as stringWidth5,
+  truncate as truncate5,
+  wordWrap as wordWrap3
+} from "@termuijs/core";
+var ROLE_CONFIG = {
+  user: { badge: "[User]", colorName: "cyan" },
+  assistant: { badge: "[Assistant]", colorName: "green" },
+  system: { badge: "[System]", colorName: "yellow" },
+  tool: { badge: "[Tool]", colorName: "magenta" }
+};
+var ChatMessage = class extends Widget {
+  _role;
+  _content;
+  _timestamp;
+  constructor(options, style = {}) {
+    super(style);
+    this._role = options.role;
+    this._content = options.content;
+    this._timestamp = options.timestamp;
+    this.focusable = false;
+  }
+  /** Update the message content and mark dirty. */
+  setContent(content) {
+    this._content = content;
+    this.markDirty();
+  }
+  /** Update the message role and mark dirty. */
+  setRole(role) {
+    this._role = role;
+    this.markDirty();
+  }
+  _renderSelf(screen) {
+    const rect = this._getContentRect();
+    const { x, y, width, height } = rect;
+    if (width <= 0 || height <= 0) return;
+    const config = ROLE_CONFIG[this._role];
+    const baseAttrs = styleToCellAttrs9(this._style);
+    const badgeAttrs = {
+      ...baseAttrs,
+      fg: { type: "named", name: config.colorName }
+    };
+    screen.writeString(x, y, config.badge, badgeAttrs);
+    if (this._timestamp) {
+      const ts = this._timestamp.toLocaleTimeString("en-GB", {
+        hour: "2-digit",
+        minute: "2-digit",
+        second: "2-digit",
+        hour12: false
+      });
+      const tsWidth = stringWidth5(ts);
+      const tsX = x + width - tsWidth;
+      if (tsX > x + stringWidth5(config.badge)) {
+        const dimAttrs = { ...baseAttrs, dim: true };
+        screen.writeString(tsX, y, ts, dimAttrs);
+      }
+    }
+    if (height <= 1) return;
+    const indent = "  ";
+    const contentWidth = Math.max(0, width - indent.length);
+    const lines = contentWidth > 0 ? wordWrap3(this._content, contentWidth).split("\n") : [];
+    const maxContentRows = height - 1;
+    for (let i = 0; i < Math.min(lines.length, maxContentRows); i++) {
+      const line = lines[i];
+      if (line === void 0) continue;
+      const displayLine = truncate5(indent + line, width);
+      screen.writeString(x, y + 1 + i, displayLine, baseAttrs);
+    }
+  }
+};
+
+// src/display/ToolCall.ts
+import {
+  styleToCellAttrs as styleToCellAttrs10,
+  truncate as truncate6,
+  caps as caps4
+} from "@termuijs/core";
+var STATUS_CONFIG = {
+  pending: { unicodeSymbol: "\u25CC", asciiSymbol: "?", colorName: "white", dim: true },
+  running: { unicodeSymbol: "\u25CE", asciiSymbol: "~", colorName: "yellow" },
+  done: { unicodeSymbol: "\u2713", asciiSymbol: "+", colorName: "green" },
+  error: { unicodeSymbol: "\u2717", asciiSymbol: "!", colorName: "red" }
+};
+var ToolCall = class extends Widget {
+  _name;
+  _args;
+  _result;
+  _status;
+  _collapsed;
+  constructor(options, style = {}) {
+    super(style);
+    this._name = options.name;
+    this._args = options.args;
+    this._result = options.result;
+    this._status = options.status;
+    this._collapsed = options.collapsed ?? true;
+    this.focusable = true;
+  }
+  // ── Public API ─────────────────────────────────────
+  setStatus(status) {
+    this._status = status;
+    this.markDirty();
+  }
+  setResult(result) {
+    this._result = result;
+    this.markDirty();
+  }
+  collapse() {
+    this._collapsed = true;
+    this.markDirty();
+  }
+  expand() {
+    this._collapsed = false;
+    this.markDirty();
+  }
+  handleKey(key) {
+    if (key === " " || key === "Enter") {
+      this._collapsed = !this._collapsed;
+      this.markDirty();
+    }
+  }
+  // ── Rendering ──────────────────────────────────────
+  _renderSelf(screen) {
+    const rect = this._getContentRect();
+    const { x, y, width, height } = rect;
+    if (width <= 0 || height <= 0) return;
+    const useUnicode = caps4.unicode;
+    const baseAttrs = styleToCellAttrs10(this._style);
+    const config = STATUS_CONFIG[this._status];
+    const collapsedChevron = useUnicode ? "\u25B6" : ">";
+    const expandedChevron = useUnicode ? "\u25BC" : "v";
+    const chevron = this._collapsed ? collapsedChevron : expandedChevron;
+    const symbol = useUnicode ? config.unicodeSymbol : config.asciiSymbol;
+    const statusAttrs = {
+      ...baseAttrs,
+      fg: { type: "named", name: config.colorName },
+      bold: config.bold ?? false,
+      dim: config.dim ?? false
+    };
+    const headerText = `${chevron} ${this._name} ${symbol} [${this._status}]`;
+    screen.writeString(x, y, truncate6(headerText, width), baseAttrs);
+    const symbolOffset = chevron.length + 1 + this._name.length + 1;
+    if (symbolOffset < width) {
+      screen.writeString(x + symbolOffset, y, symbol, statusAttrs);
+    }
+    if (this._collapsed) return;
+    let row = 1;
+    const argEntries = Object.entries(this._args);
+    for (const [key, value] of argEntries) {
+      if (row >= height) break;
+      const argLine = `  ${key}: ${JSON.stringify(value)}`;
+      screen.writeString(x, y + row, truncate6(argLine, width), baseAttrs);
+      row++;
+    }
+    if (row < height && this._result !== void 0 && (this._status === "done" || this._status === "error")) {
+      const resultStr = typeof this._result === "string" ? this._result : JSON.stringify(this._result);
+      const resultLine = `  result: ${resultStr}`;
+      screen.writeString(x, y + row, truncate6(resultLine, width), baseAttrs);
+    }
+  }
+};
+var ToolApproval = class extends ToolCall {
+  _onApprove;
+  _onDeny;
+  constructor(options, style = {}) {
+    super(options, style);
+    this._onApprove = options.onApprove;
+    this._onDeny = options.onDeny;
+  }
+  _renderSelf(screen) {
+    super._renderSelf(screen);
+    const rect = this._getContentRect();
+    const { x, y, width, height } = rect;
+    if (width <= 0 || height <= 0) return;
+    let rowsUsed = 1;
+    if (!this._collapsed) {
+      rowsUsed += Object.keys(this._args).length;
+      if (this._result !== void 0 && (this._status === "done" || this._status === "error")) {
+        rowsUsed += 1;
+      }
+    }
+    const approvalRow = y + rowsUsed;
+    if (approvalRow >= y + height) return;
+    const baseAttrs = styleToCellAttrs10(this._style);
+    const approveAttrs = {
+      ...baseAttrs,
+      fg: { type: "named", name: "green" },
+      bold: true
+    };
+    const denyAttrs = {
+      ...baseAttrs,
+      fg: { type: "named", name: "red" },
+      bold: true
+    };
+    const approveText = "[y] Approve";
+    const denyText = "[n] Deny";
+    screen.writeString(x, approvalRow, approveText, approveAttrs);
+    const denyX = x + approveText.length + 2;
+    if (denyX + denyText.length <= x + width) {
+      screen.writeString(denyX, approvalRow, denyText, denyAttrs);
+    }
+  }
+  handleKey(key) {
+    if (key === "y" || key === "Enter") {
+      this._onApprove?.();
+    } else if (key === "n" || key === "Escape") {
+      this._onDeny?.();
+    } else {
+      super.handleKey(key);
+    }
+  }
+};
+
+// src/input/virtual-scroll.ts
+function computeRange(scrollOffset, viewportItems, itemCount, overscan = 2) {
+  const start = Math.max(0, scrollOffset - overscan);
+  const end = Math.min(itemCount, scrollOffset + viewportItems + overscan);
+  return { start, end, offsetPx: start };
+}
+function computeVariableRange(scrollPx, viewportPx, sizes, overscan = 2) {
+  const cumulative = [];
+  let sum = 0;
+  for (const s of sizes) {
+    cumulative.push(sum);
+    sum += s;
+  }
+  cumulative.push(sum);
+  let startIdx = cumulative.findIndex((c, i) => i < sizes.length && c + sizes[i] > scrollPx);
+  if (startIdx < 0) startIdx = sizes.length;
+  startIdx = Math.max(0, startIdx - overscan);
+  const viewportEnd = scrollPx + viewportPx;
+  let endIdx = cumulative.findIndex((c) => c >= viewportEnd);
+  if (endIdx < 0) endIdx = sizes.length;
+  endIdx = Math.min(sizes.length, endIdx + overscan);
+  return { start: startIdx, end: endIdx, offsetPx: cumulative[startIdx] };
+}
+
 // src/input/List.ts
-import { styleToCellAttrs as styleToCellAttrs5, stringWidth as stringWidth2, truncate as truncate2 } from "@termuijs/core";
+import { styleToCellAttrs as styleToCellAttrs11, stringWidth as stringWidth6, truncate as truncate7, caps as caps5 } from "@termuijs/core";
 var List = class extends Widget {
   _items;
   _selectedIndex = 0;
@@ -450,15 +1271,15 @@ var List = class extends Widget {
     const rect = this._getContentRect();
     const { x, y, width, height } = rect;
     if (width <= 0 || height <= 0) return;
-    const attrs = styleToCellAttrs5(this._style);
+    const attrs = styleToCellAttrs11(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 " : "  ";
+      const prefix = isSelected ? caps5.unicode ? "\u25B8 " : "> " : "  ";
       let line = prefix + item.label;
-      line = truncate2(line, width);
+      line = truncate7(line, width);
       const cellStyle = {
         ...attrs,
         bold: isSelected,
@@ -467,9 +1288,9 @@ var List = class extends Widget {
       };
       screen.writeString(x, y + i, line, cellStyle);
       if (isSelected && this.isFocused) {
-        const remaining = width - stringWidth2(line);
+        const remaining = width - stringWidth6(line);
         for (let c = 0; c < remaining; c++) {
-          screen.setCell(x + stringWidth2(line) + c, y + i, { char: " ", ...cellStyle });
+          screen.setCell(x + stringWidth6(line) + c, y + i, { char: " ", ...cellStyle });
         }
       }
     }
@@ -477,7 +1298,7 @@ var List = class extends Widget {
       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";
+        const scrollChar = r === scrollPos ? caps5.unicode ? "\u2588" : "#" : caps5.unicode ? "\u2591" : "-";
         screen.setCell(x + width - 1, y + r, { char: scrollChar, ...attrs, dim: true });
       }
     }
@@ -499,7 +1320,7 @@ var List = class extends Widget {
 };
 
 // src/input/TextInput.ts
-import { styleToCellAttrs as styleToCellAttrs6, truncate as truncate3 } from "@termuijs/core";
+import { styleToCellAttrs as styleToCellAttrs12, truncate as truncate8 } from "@termuijs/core";
 var TextInput = class extends Widget {
   _value = "";
   _cursorPos = 0;
@@ -576,9 +1397,9 @@ var TextInput = class extends Widget {
     const rect = this._getContentRect();
     const { x, y, width, height } = rect;
     if (width <= 0 || height <= 0) return;
-    const attrs = styleToCellAttrs6(this._style);
+    const attrs = styleToCellAttrs12(this._style);
     if (this._value.length === 0 && !this.isFocused) {
-      screen.writeString(x, y, truncate3(this._placeholder, width), { ...attrs, dim: true });
+      screen.writeString(x, y, truncate8(this._placeholder, width), { ...attrs, dim: true });
       return;
     }
     const displayValue = this._mask ? this._mask.repeat(this._value.length) : this._value;
@@ -604,7 +1425,7 @@ var TextInput = class extends Widget {
 };
 
 // src/input/VirtualList.ts
-import { styleToCellAttrs as styleToCellAttrs7, truncate as truncate4, stringWidth as stringWidth4 } from "@termuijs/core";
+import { styleToCellAttrs as styleToCellAttrs13, truncate as truncate9, stringWidth as stringWidth8, caps as caps6 } from "@termuijs/core";
 var VirtualList = class extends Widget {
   _totalItems;
   _itemHeight;
@@ -708,10 +1529,14 @@ var VirtualList = class extends Widget {
     const rect = this._getContentRect();
     const { x, y, width, height } = rect;
     if (width <= 0 || height <= 0 || this._totalItems === 0) return;
-    const attrs = styleToCellAttrs7(this._style);
+    const attrs = styleToCellAttrs13(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 { start: startIdx, end: endIdx } = computeRange(
+      this._scrollOffset,
+      visibleItemCount,
+      this._totalItems,
+      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;
@@ -723,9 +1548,9 @@ var VirtualList = class extends Widget {
       } catch {
         content = `[Error: item ${idx}]`;
       }
-      const prefix = isSelected ? "\u25B8 " : "  ";
+      const prefix = isSelected ? caps6.unicode ? "\u25B8 " : "> " : "  ";
       let line = prefix + content;
-      line = truncate4(line, contentWidth);
+      line = truncate9(line, contentWidth);
       const cellStyle = {
         ...attrs,
         bold: isSelected,
@@ -733,9 +1558,9 @@ var VirtualList = class extends Widget {
       };
       screen.writeString(x, rowY, line, cellStyle);
       if (isSelected && this.isFocused) {
-        const remaining = contentWidth - stringWidth4(line);
+        const remaining = contentWidth - stringWidth8(line);
         for (let c = 0; c < remaining; c++) {
-          screen.setCell(x + stringWidth4(line) + c, rowY, { char: " ", ...cellStyle });
+          screen.setCell(x + stringWidth8(line) + c, rowY, { char: " ", ...cellStyle });
         }
       }
     }
@@ -744,8 +1569,10 @@ var VirtualList = class extends Widget {
       const totalPages = this._totalItems - visibleItemCount;
       const scrollRatio = totalPages > 0 ? this._scrollOffset / totalPages : 0;
       const thumbPos = Math.floor(scrollRatio * (height - 1));
+      const thumbChar = caps6.unicode ? "\u2588" : "#";
+      const trackChar = caps6.unicode ? "\u2591" : "|";
       for (let r = 0; r < height; r++) {
-        const scrollChar = r === thumbPos ? "\u2588" : "\u2591";
+        const scrollChar = r === thumbPos ? thumbChar : trackChar;
         screen.setCell(scrollbarX, y + r, { char: scrollChar, ...attrs, dim: r !== thumbPos });
       }
     }
@@ -768,8 +1595,173 @@ var VirtualList = class extends Widget {
   }
 };
 
+// src/input/CommandPalette.ts
+import { styleToCellAttrs as styleToCellAttrs14, stringWidth as stringWidth9, truncate as truncate10 } from "@termuijs/core";
+var CommandPalette = class extends Widget {
+  _commands;
+  _filtered;
+  _query = "";
+  _selectedIndex = 0;
+  _options;
+  constructor(options, style = {}) {
+    super({ border: "single", ...style });
+    this._options = {
+      placeholder: "Type to search...",
+      maxVisible: 8,
+      ...options
+    };
+    this._commands = options.commands;
+    this._filtered = [...this._commands];
+    this.focusable = true;
+  }
+  /** Update the full command list and re-filter. */
+  setCommands(commands) {
+    this._commands = commands;
+    this._filter();
+    this.markDirty();
+  }
+  /**
+   * Reset query, re-filter all commands, reset selection.
+   * Call this when opening the palette.
+   */
+  open() {
+    this._query = "";
+    this._selectedIndex = 0;
+    this._filtered = [...this._commands];
+    this.markDirty();
+  }
+  /** Current query string. */
+  getQuery() {
+    return this._query;
+  }
+  // ─── Private helpers ────────────────────────────────
+  /** Filter commands based on current query (case-insensitive substring). */
+  _filter() {
+    const q = this._query.toLowerCase();
+    if (q === "") {
+      this._filtered = [...this._commands];
+    } else {
+      this._filtered = this._commands.filter(
+        (cmd) => cmd.label.toLowerCase().includes(q) || cmd.id.toLowerCase().includes(q)
+      );
+    }
+    const max = Math.max(0, this._filtered.length - 1);
+    this._selectedIndex = Math.min(this._selectedIndex, max);
+  }
+  _executeSelected() {
+    const cmd = this._filtered[this._selectedIndex];
+    if (cmd) {
+      cmd.action();
+    }
+  }
+  _moveUp() {
+    if (this._selectedIndex > 0) {
+      this._selectedIndex--;
+    }
+  }
+  _moveDown() {
+    const maxVisible = this._options.maxVisible ?? 8;
+    const visibleCount = Math.min(this._filtered.length, maxVisible);
+    if (this._selectedIndex < visibleCount - 1) {
+      this._selectedIndex++;
+    }
+  }
+  // ─── Key handling ────────────────────────────────────
+  handleKey(key) {
+    switch (key) {
+      case "Escape":
+        this._options.onClose?.();
+        break;
+      case "Enter":
+        this._executeSelected();
+        break;
+      case "ArrowUp":
+      case "k":
+        this._moveUp();
+        break;
+      case "ArrowDown":
+      case "j":
+        this._moveDown();
+        break;
+      case "Backspace":
+        this._query = this._query.slice(0, -1);
+        this._filter();
+        break;
+      default:
+        if (key.length === 1) {
+          this._query += key;
+          this._filter();
+        }
+        break;
+    }
+    this.markDirty();
+  }
+  // ─── Rendering ───────────────────────────────────────
+  _renderSelf(screen) {
+    const rect = this._getContentRect();
+    const { x, y, width, height } = rect;
+    if (width <= 0 || height <= 0) return;
+    const attrs = styleToCellAttrs14(this._style);
+    const maxVisible = this._options.maxVisible ?? 8;
+    const placeholder = this._options.placeholder ?? "Type to search...";
+    const prefix = "> ";
+    const queryDisplay = this._query.length > 0 ? this._query : placeholder;
+    const queryDim = this._query.length === 0;
+    const queryLine = truncate10(prefix + queryDisplay, width);
+    screen.writeString(x, y, queryLine, { ...attrs, dim: queryDim });
+    const queryLineWidth = stringWidth9(queryLine);
+    for (let c = queryLineWidth; c < width; c++) {
+      screen.setCell(x + c, y, { char: " ", ...attrs });
+    }
+    const listStartRow = 1;
+    const listHeight = height - listStartRow;
+    const visibleCount = Math.min(this._filtered.length, maxVisible, listHeight);
+    for (let i = 0; i < visibleCount; i++) {
+      const cmd = this._filtered[i];
+      const isSelected = i === this._selectedIndex;
+      const rowY = y + listStartRow + i;
+      const rowPrefix = isSelected ? "\u25B8 " : "  ";
+      const labelPart = rowPrefix + cmd.label;
+      const desc = cmd.description ?? "";
+      const descWidth = stringWidth9(desc);
+      const gap = 1;
+      const labelMaxWidth = desc ? Math.max(0, width - descWidth - gap) : width;
+      const labelTruncated = truncate10(labelPart, labelMaxWidth);
+      const labelWidth = stringWidth9(labelTruncated);
+      const cellStyle = {
+        ...attrs,
+        bold: isSelected,
+        inverse: isSelected
+      };
+      const dimStyle = {
+        ...attrs,
+        dim: true,
+        inverse: isSelected
+      };
+      screen.writeString(x, rowY, labelTruncated, cellStyle);
+      if (desc) {
+        const descX = x + width - descWidth;
+        for (let c = x + labelWidth; c < descX; c++) {
+          screen.setCell(c, rowY, { char: " ", ...cellStyle });
+        }
+        screen.writeString(descX, rowY, desc, dimStyle);
+      } else {
+        for (let c = x + labelWidth; c < x + width; c++) {
+          screen.setCell(c, rowY, { char: " ", ...cellStyle });
+        }
+      }
+    }
+    for (let i = visibleCount; i < listHeight; i++) {
+      const rowY = y + listStartRow + i;
+      for (let c = 0; c < width; c++) {
+        screen.setCell(x + c, rowY, { char: " ", ...attrs });
+      }
+    }
+  }
+};
+
 // src/data/Table.ts
-import { styleToCellAttrs as styleToCellAttrs8, stringWidth as stringWidth5, truncate as truncate5 } from "@termuijs/core";
+import { styleToCellAttrs as styleToCellAttrs15, stringWidth as stringWidth10, truncate as truncate11 } from "@termuijs/core";
 var Table = class extends Widget {
   _columns;
   _rows;
@@ -796,8 +1788,8 @@ var Table = class extends Widget {
     const rect = this._getContentRect();
     const { x, y, width, height } = rect;
     if (width <= 0 || height <= 0) return;
-    const attrs = styleToCellAttrs8(this._style);
-    const sepWidth = stringWidth5(this._separator);
+    const attrs = styleToCellAttrs15(this._style);
+    const sepWidth = stringWidth10(this._separator);
     const colWidths = this._computeColumnWidths(
       width - (this._columns.length - 1) * sepWidth
     );
@@ -864,8 +1856,8 @@ var Table = class extends Widget {
     return this._columns.map((c) => c.width ?? flexWidth);
   }
   _alignText(text, width, align) {
-    const truncated = truncate5(text, width);
-    const textWidth = stringWidth5(truncated);
+    const truncated = truncate11(text, width);
+    const textWidth = stringWidth10(truncated);
     const pad = Math.max(0, width - textWidth);
     switch (align) {
       case "right":
@@ -883,7 +1875,7 @@ var Table = class extends Widget {
 };
 
 // src/data/Gauge.ts
-import { styleToCellAttrs as styleToCellAttrs9, stringWidth as stringWidth6 } from "@termuijs/core";
+import { styleToCellAttrs as styleToCellAttrs16, stringWidth as stringWidth11, caps as caps7 } from "@termuijs/core";
 var Gauge = class extends Widget {
   _label;
   _value = 0;
@@ -910,17 +1902,17 @@ var Gauge = class extends Widget {
     const rect = this._getContentRect();
     const { x, y, width, height } = rect;
     if (width <= 0 || height <= 0) return;
-    const attrs = styleToCellAttrs9(this._style);
+    const attrs = styleToCellAttrs16(this._style);
     const labelStr = this._label + " ";
     const percentStr = this._showLabel ? ` ${Math.round(this._value * 100)}%` : "";
-    const labelWidth = stringWidth6(labelStr);
-    const percentWidth = stringWidth6(percentStr);
+    const labelWidth = stringWidth11(labelStr);
+    const percentWidth = stringWidth11(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";
+      const char = i < filled ? caps7.unicode ? "\u2588" : "#" : caps7.unicode ? "\u2591" : "-";
       screen.setCell(barX + i, y, {
         char,
         fg: i < filled ? this._color : { type: "named", name: "brightBlack" }
@@ -936,8 +1928,9 @@ var Gauge = class extends Widget {
 };
 
 // src/data/Sparkline.ts
-import { styleToCellAttrs as styleToCellAttrs10 } from "@termuijs/core";
-var SPARK_CHARS = ["\u2581", "\u2582", "\u2583", "\u2584", "\u2585", "\u2586", "\u2587", "\u2588"];
+import { styleToCellAttrs as styleToCellAttrs17, caps as caps8 } from "@termuijs/core";
+var SPARK_CHARS_UNICODE = ["\u2581", "\u2582", "\u2583", "\u2584", "\u2585", "\u2586", "\u2587", "\u2588"];
+var SPARK_CHARS_ASCII = ["1", "2", "3", "4", "5", "6", "7", "8"];
 var Sparkline = class extends Widget {
   _label;
   _data = [];
@@ -961,7 +1954,7 @@ var Sparkline = class extends Widget {
     const rect = this._getContentRect();
     const { x, y, width, height } = rect;
     if (width <= 0 || height <= 0) return;
-    const attrs = styleToCellAttrs10(this._style);
+    const attrs = styleToCellAttrs17(this._style);
     const labelStr = this._label + " ";
     const labelWidth = labelStr.length;
     screen.writeString(x, y, labelStr, { ...attrs, bold: true });
@@ -971,11 +1964,12 @@ var Sparkline = class extends Widget {
     const min = Math.min(...data);
     const max = Math.max(...data);
     const range = max - min || 1;
+    const sparkChars = caps8.unicode ? SPARK_CHARS_UNICODE : SPARK_CHARS_ASCII;
     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],
+        char: sparkChars[charIdx],
         fg: this._color
       });
     }
@@ -990,7 +1984,7 @@ var Sparkline = class extends Widget {
 };
 
 // src/data/StatusIndicator.ts
-import { styleToCellAttrs as styleToCellAttrs11 } from "@termuijs/core";
+import { styleToCellAttrs as styleToCellAttrs18 } from "@termuijs/core";
 var StatusIndicator = class extends Widget {
   _label;
   _isUp;
@@ -1016,7 +2010,7 @@ var StatusIndicator = class extends Widget {
     const rect = this._getContentRect();
     const { x, y, width, height } = rect;
     if (width <= 0 || height <= 0) return;
-    const attrs = styleToCellAttrs11(this._style);
+    const attrs = styleToCellAttrs18(this._style);
     const dot = this._isUp ? "\u25CF" : "\u25CB";
     const statusText = this._isUp ? "Online" : "Offline";
     const color = this._isUp ? this._upColor : this._downColor;
@@ -1030,7 +2024,7 @@ var StatusIndicator = class extends Widget {
 
 // src/data/BarChart.ts
 import {
-  stringWidth as stringWidth7,
+  stringWidth as stringWidth12,
   VERTICAL_BAR_SYMBOLS,
   HORIZONTAL_BAR_SYMBOLS
 } from "@termuijs/core";
@@ -1124,7 +2118,7 @@ var BarChart = class extends Widget {
           remaining -= 8;
         }
         const valStr = Math.round(bar.value).toString();
-        const valX = cx + Math.floor((this._barWidth - stringWidth7(valStr)) / 2);
+        const valX = cx + Math.floor((this._barWidth - stringWidth12(valStr)) / 2);
         screen.writeString(
           Math.max(cx, valX),
           oy + barAreaHeight,
@@ -1133,7 +2127,7 @@ var BarChart = class extends Widget {
         );
         if (hasLabels && bar.label) {
           const label = bar.label.slice(0, this._barWidth);
-          const labelX = cx + Math.floor((this._barWidth - stringWidth7(label)) / 2);
+          const labelX = cx + Math.floor((this._barWidth - stringWidth12(label)) / 2);
           screen.writeString(
             Math.max(cx, labelX),
             oy + barAreaHeight + valueRows,
@@ -1147,7 +2141,7 @@ var BarChart = class extends Widget {
       if (hasGroupLabels && group.label) {
         const groupWidth = cx - groupStartX;
         const label = group.label.slice(0, groupWidth);
-        const labelX = groupStartX + Math.floor((groupWidth - stringWidth7(label)) / 2);
+        const labelX = groupStartX + Math.floor((groupWidth - stringWidth12(label)) / 2);
         screen.writeString(
           Math.max(groupStartX, labelX),
           oy + height - 1,
@@ -1165,7 +2159,7 @@ var BarChart = class extends Widget {
     for (const group of this._data) {
       for (const bar of group.bars) {
         if (bar.label) {
-          const w = stringWidth7(bar.label);
+          const w = stringWidth12(bar.label);
           if (w > maxLabelWidth) maxLabelWidth = w;
         }
         const vw = Math.round(bar.value).toString().length;
@@ -1220,8 +2214,270 @@ var BarChart = class extends Widget {
   }
 };
 
+// src/layout/Grid.ts
+var Grid = class extends Widget {
+  _columns;
+  _colGap;
+  _rowGap;
+  _rows = [];
+  _itemCount = 0;
+  constructor(style, options) {
+    super({ flexDirection: "column", ...style });
+    this._columns = Math.max(1, options.columns);
+    const gap = options.gap ?? 1;
+    this._colGap = options.colGap ?? gap;
+    this._rowGap = options.rowGap ?? gap;
+  }
+  _renderSelf(_screen) {
+  }
+  /**
+   * Add a widget to the grid. Items fill left-to-right,
+   * wrapping to a new row automatically every `columns` items.
+   * Overrides Widget.addChild so the reconciler generic loop works unchanged.
+   */
+  addChild(widget) {
+    const rowIndex = Math.floor(this._itemCount / this._columns);
+    if (rowIndex >= this._rows.length) {
+      const rowStyle = { flexDirection: "row" };
+      if (this._colGap > 0) rowStyle.gap = this._colGap;
+      if (this._rows.length > 0 && this._rowGap > 0) {
+        rowStyle.margin = this._rowGap;
+      }
+      const row = new Box(rowStyle);
+      this._rows.push(row);
+      super.addChild(row);
+    }
+    const currentRow = this._rows[rowIndex];
+    widget.setStyle({ flexGrow: 1 });
+    currentRow.addChild(widget);
+    this._itemCount++;
+  }
+  /** Add an item explicitly (alias for addChild) */
+  addItem(widget) {
+    this.addChild(widget);
+  }
+  /** Remove all items and reset the grid */
+  clearItems() {
+    for (const row of this._rows) {
+      row.unmount();
+      row.parent = null;
+    }
+    this._children = [];
+    this._rows = [];
+    this._itemCount = 0;
+  }
+};
+
+// src/layout/ScrollView.ts
+import { styleToCellAttrs as styleToCellAttrs20 } from "@termuijs/core";
+var ScrollView = class extends Widget {
+  _scrollOffset = 0;
+  _contentHeight;
+  _showScrollbar;
+  constructor(style = {}, opts = {}) {
+    super({ overflow: "hidden", ...style });
+    this._contentHeight = opts.contentHeight ?? 0;
+    this._showScrollbar = opts.showScrollbar ?? true;
+    this.focusable = true;
+  }
+  /** Set the total content height (in rows) */
+  setContentHeight(h) {
+    this._contentHeight = h;
+    this._clampOffset();
+    this.markDirty();
+  }
+  /** Get current scroll offset */
+  get scrollOffset() {
+    return this._scrollOffset;
+  }
+  /** Scroll by delta rows */
+  scrollBy(delta) {
+    this._scrollOffset += delta;
+    this._clampOffset();
+    this.markDirty();
+  }
+  /** Scroll to absolute offset */
+  scrollTo(offset) {
+    this._scrollOffset = offset;
+    this._clampOffset();
+    this.markDirty();
+  }
+  _clampOffset() {
+    const viewHeight = this._rect.height;
+    const maxOffset = Math.max(0, this._contentHeight - viewHeight);
+    this._scrollOffset = Math.max(0, Math.min(this._scrollOffset, maxOffset));
+  }
+  /** Handle keyboard navigation */
+  onKey(event) {
+    switch (event.key) {
+      case "ArrowUp":
+        this.scrollBy(-1);
+        break;
+      case "ArrowDown":
+        this.scrollBy(1);
+        break;
+      case "PageUp":
+        this.scrollBy(-Math.max(1, this._rect.height - 1));
+        break;
+      case "PageDown":
+        this.scrollBy(Math.max(1, this._rect.height - 1));
+        break;
+    }
+  }
+  render(screen) {
+    if (this._style.visible === false) return;
+    const shouldClip = true;
+    if (shouldClip) screen.pushClip(this._rect);
+    this._renderSelf(screen);
+    this._renderBorder(screen);
+    const rect = this._getContentRect();
+    for (const child of this._children) {
+      const origRect = { ...child.rect };
+      child._rect = {
+        x: origRect.x,
+        y: origRect.y - this._scrollOffset,
+        width: origRect.width,
+        height: origRect.height
+      };
+      try {
+        child.render(screen);
+      } finally {
+        child._rect = origRect;
+      }
+    }
+    if (shouldClip) screen.popClip();
+    if (this._showScrollbar && this._contentHeight > this._rect.height) {
+      this._renderScrollbar(screen, rect);
+    }
+  }
+  _renderScrollbar(screen, contentRect) {
+    const { y, width, height } = contentRect;
+    const scrollX = contentRect.x + width;
+    if (scrollX >= this._rect.x + this._rect.width) return;
+    const trackHeight = height;
+    const thumbSize = Math.max(1, Math.round(height / this._contentHeight * trackHeight));
+    const maxOffset = Math.max(1, this._contentHeight - height);
+    const thumbPos = Math.round(this._scrollOffset / maxOffset * (trackHeight - thumbSize));
+    const attrs = styleToCellAttrs20(this._style);
+    const thumbChar = "\u2588";
+    const trackChar = "\u2591";
+    for (let i = 0; i < trackHeight; i++) {
+      const isThumb = i >= thumbPos && i < thumbPos + thumbSize;
+      screen.setCell(scrollX, y + i, {
+        char: isThumb ? thumbChar : trackChar,
+        ...attrs,
+        dim: !isThumb
+      });
+    }
+  }
+  _renderSelf(_screen) {
+  }
+};
+
+// src/layout/Center.ts
+var Center = class extends Widget {
+  _horizontal;
+  _vertical;
+  constructor(style = {}, opts = {}) {
+    super(style);
+    this._horizontal = opts.horizontal ?? true;
+    this._vertical = opts.vertical ?? true;
+  }
+  _renderSelf(_screen) {
+  }
+  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);
+    const content = this._getContentRect();
+    for (const child of this._children) {
+      const childRect = child.rect;
+      const origRect = { ...childRect };
+      let offsetX = content.x;
+      let offsetY = content.y;
+      if (this._horizontal) {
+        offsetX = content.x + Math.max(0, Math.floor((content.width - childRect.width) / 2));
+      }
+      if (this._vertical) {
+        offsetY = content.y + Math.max(0, Math.floor((content.height - childRect.height) / 2));
+      }
+      child._rect = {
+        x: offsetX,
+        y: offsetY,
+        width: childRect.width,
+        height: childRect.height
+      };
+      child.render(screen);
+      child._rect = origRect;
+    }
+    if (shouldClip) screen.popClip();
+  }
+};
+
+// src/layout/Card.ts
+import { styleToCellAttrs as styleToCellAttrs21, stringWidth as stringWidth13 } from "@termuijs/core";
+var Card = class extends Widget {
+  _title;
+  _borderColor;
+  constructor(style = {}, opts = {}) {
+    super({
+      border: "single",
+      padding: 1,
+      ...style
+    });
+    this._title = opts.title ?? "";
+    this._borderColor = opts.borderColor;
+  }
+  setTitle(title) {
+    this._title = title;
+    this.markDirty();
+  }
+  _renderSelf(screen) {
+    if (!this._title) return;
+    const { x, y, width } = this._rect;
+    if (width < 4) return;
+    const attrs = styleToCellAttrs21(this._style);
+    const fg = this._borderColor ?? attrs.fg;
+    const titleText = ` ${this._title} `;
+    const titleWidth = stringWidth13(titleText);
+    const innerWidth = width - 2;
+    if (titleWidth > innerWidth) return;
+    const titleX = x + 1 + Math.floor((innerWidth - titleWidth) / 2);
+    screen.writeString(titleX, y, titleText, { fg, bold: true });
+  }
+};
+
+// src/layout/Columns.ts
+var Columns = class extends Widget {
+  _inner;
+  constructor(style = {}, opts = {}) {
+    super(style);
+    this._inner = new Box({
+      flexDirection: "row",
+      gap: opts.gap ?? 1,
+      width: "100%",
+      height: "100%"
+    });
+    super.addChild(this._inner);
+  }
+  addChild(widget) {
+    widget.setStyle({ flexGrow: 1 });
+    this._inner.addChild(widget);
+  }
+  removeChild(widget) {
+    this._inner.removeChild(widget);
+  }
+  clearChildren() {
+    this._inner.clearChildren();
+  }
+  _renderSelf(_screen) {
+  }
+};
+
 // src/feedback/ProgressBar.ts
-import { styleToCellAttrs as styleToCellAttrs13 } from "@termuijs/core";
+import { styleToCellAttrs as styleToCellAttrs22, caps as caps10 } from "@termuijs/core";
 var ProgressBar = class extends Widget {
   _value;
   _fillChar;
@@ -1233,8 +2489,8 @@ var ProgressBar = class extends Widget {
   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._fillChar = options.fillChar ?? (caps10.unicode ? "\u2588" : "#");
+    this._emptyChar = options.emptyChar ?? (caps10.unicode ? "\u2591" : "-");
     this._fillColor = options.fillColor ?? { type: "named", name: "green" };
     this._showLabel = options.showLabel ?? true;
     this._labelFormat = options.labelFormat ?? "percent";
@@ -1252,7 +2508,7 @@ var ProgressBar = class extends Widget {
     const rect = this._getContentRect();
     const { x, y, width } = rect;
     if (width <= 0) return;
-    const attrs = styleToCellAttrs13(this._style);
+    const attrs = styleToCellAttrs22(this._style);
     let label = "";
     if (this._showLabel) {
       if (this._labelFormat === "percent") {
@@ -1276,8 +2532,84 @@ var ProgressBar = class extends Widget {
   }
 };
 
+// src/feedback/MultiProgress.ts
+import { styleToCellAttrs as styleToCellAttrs23, caps as caps11, BLOCK } from "@termuijs/core";
+var MultiProgress = class extends Widget {
+  _items;
+  _labelWidth;
+  _showValues;
+  constructor(options, style = {}) {
+    const height = options.items.length;
+    super({ height, ...style });
+    this._items = options.items.map((item) => ({
+      ...item,
+      value: Math.max(0, Math.min(1, item.value))
+    }));
+    this._labelWidth = options.labelWidth ?? 12;
+    this._showValues = options.showValues ?? true;
+  }
+  /**
+   * Replace all items and mark dirty
+   */
+  setItems(items) {
+    this._items = items.map((item) => ({
+      ...item,
+      value: Math.max(0, Math.min(1, item.value))
+    }));
+    this.markDirty();
+  }
+  /**
+   * Update a single item's value
+   */
+  updateItem(index, value) {
+    if (index >= 0 && index < this._items.length) {
+      this._items[index].value = Math.max(0, Math.min(1, value));
+      this.markDirty();
+    }
+  }
+  _renderSelf(screen) {
+    const rect = this._getContentRect();
+    const { x, y, width } = rect;
+    if (width <= 0) return;
+    const attrs = styleToCellAttrs23(this._style);
+    const fillChar = caps11.unicode ? "\u2588" : BLOCK.full;
+    const emptyChar = caps11.unicode ? "\u2591" : BLOCK.empty;
+    for (let i = 0; i < this._items.length; i++) {
+      const item = this._items[i];
+      const rowY = y + i;
+      let colX = x;
+      const label = item.label.length > this._labelWidth ? item.label.substring(0, this._labelWidth) : item.label.padEnd(this._labelWidth);
+      screen.writeString(colX, rowY, label, attrs);
+      colX += this._labelWidth;
+      if (colX < x + width) {
+        screen.setCell(colX, rowY, { char: " ", ...attrs });
+        colX++;
+      }
+      let percentLabel = "";
+      if (this._showValues) {
+        percentLabel = ` ${Math.round(item.value * 100)}%`;
+      }
+      const barWidth = Math.max(0, x + width - colX - percentLabel.length);
+      const filled = Math.round(barWidth * item.value);
+      const empty = barWidth - filled;
+      const fillColor = item.color ?? { type: "named", name: "green" };
+      for (let j = 0; j < filled; j++) {
+        screen.setCell(colX + j, rowY, { char: fillChar, ...attrs, fg: fillColor });
+      }
+      for (let j = 0; j < empty; j++) {
+        screen.setCell(colX + filled + j, rowY, { char: emptyChar, ...attrs, dim: true });
+      }
+      if (percentLabel) {
+        const labelX = colX + barWidth;
+        screen.writeString(labelX, rowY, percentLabel, { ...attrs, bold: true });
+      }
+    }
+  }
+};
+
 // src/feedback/Spinner.ts
-import { styleToCellAttrs as styleToCellAttrs14 } from "@termuijs/core";
+import { styleToCellAttrs as styleToCellAttrs24, caps as caps12, BRAILLE_SPIN } from "@termuijs/core";
+import { timerPoolSubscribe as timerPoolSubscribe2 } from "@termuijs/motion";
 var SPINNER_FRAMES = {
   dots: {
     frames: ["\u280B", "\u2819", "\u2839", "\u2838", "\u283C", "\u2834", "\u2826", "\u2827", "\u2807", "\u280F"],
@@ -1320,6 +2652,7 @@ var Spinner = class extends Widget {
   _color;
   _lastTick = 0;
   _elapsed = 0;
+  _timerUnsub;
   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;
@@ -1327,6 +2660,10 @@ var Spinner = class extends Widget {
     this._interval = spinnerDef.interval;
     this._label = options.label ?? "";
     this._color = options.color ?? { type: "named", name: "cyan" };
+    if (!caps12.unicode && this._frames.some((f) => f.codePointAt(0) > 127)) {
+      this._frames = Array.from(BRAILLE_SPIN);
+      this._interval = 130;
+    }
   }
   /** Update the spinner label */
   setLabel(label) {
@@ -1343,11 +2680,26 @@ var Spinner = class extends Widget {
       this._elapsed = 0;
     }
   }
+  /** Lifecycle: start the frame-advance timer (only when motion is enabled). */
+  mount() {
+    super.mount();
+    if (!caps12.motion) return;
+    this._timerUnsub = timerPoolSubscribe2(this._interval, () => {
+      this._frameIndex = (this._frameIndex + 1) % this._frames.length;
+      this.markDirty();
+    });
+  }
+  /** Lifecycle: stop the frame-advance timer. */
+  unmount() {
+    this._timerUnsub?.();
+    this._timerUnsub = void 0;
+    super.unmount();
+  }
   _renderSelf(screen) {
     const rect = this._getContentRect();
     const { x, y, width } = rect;
     if (width <= 0) return;
-    const attrs = styleToCellAttrs14(this._style);
+    const attrs = styleToCellAttrs24(this._style);
     const frame = this._frames[this._frameIndex];
     screen.writeString(x, y, frame, { ...attrs, fg: this._color });
     if (this._label) {
@@ -1440,22 +2792,754 @@ var Scrollbar = class extends Widget {
     }
   }
 };
+
+// src/feedback/Skeleton.ts
+import { caps as caps13 } from "@termuijs/core";
+import { timerPoolSubscribe as timerPoolSubscribe3 } from "@termuijs/motion";
+var Skeleton = class extends Widget {
+  _frame = 0;
+  _shimmerPos = 0;
+  _unsub;
+  _chars;
+  _variant;
+  _intervalMs;
+  constructor(style = {}, options = {}) {
+    super(style);
+    this._variant = options.variant ?? "pulse";
+    this._intervalMs = options.intervalMs ?? 600;
+    const defaultChars = caps13.unicode ? ["\u2591", "\u2592"] : ["-", "#"];
+    this._chars = options.chars ?? defaultChars;
+    if (caps13.motion) {
+      this._unsub = timerPoolSubscribe3(this._intervalMs, () => {
+        this._frame = 1 - this._frame;
+        if (this._variant === "shimmer") {
+          this._shimmerPos++;
+        }
+        this.markDirty();
+      });
+    }
+  }
+  unmount() {
+    this._unsub?.();
+    this._unsub = void 0;
+    super.unmount();
+  }
+  _renderSelf(screen) {
+    const rect = this._getContentRect();
+    const { x, y, width, height } = rect;
+    if (width <= 0 || height <= 0) return;
+    if (this._variant === "pulse") {
+      const char = this._chars[this._frame];
+      const dim = this._frame === 0;
+      for (let row = y; row < y + height; row++) {
+        for (let col = x; col < x + width; col++) {
+          screen.setCell(col, row, { char, dim, bold: false });
+        }
+      }
+    } else {
+      const bandWidth = Math.max(1, Math.floor(width * 0.2));
+      const totalPositions = width + bandWidth;
+      const bandStart = this._shimmerPos % totalPositions;
+      for (let row = y; row < y + height; row++) {
+        for (let colOffset = 0; colOffset < width; colOffset++) {
+          const col = x + colOffset;
+          const inBand = colOffset >= bandStart && colOffset < bandStart + bandWidth;
+          const char = inBand ? this._chars[1] : this._chars[0];
+          screen.setCell(col, row, { char, dim: !inBand, bold: false });
+        }
+      }
+    }
+  }
+};
+
+// src/feedback/StatusMessage.ts
+import { styleToCellAttrs as styleToCellAttrs25, caps as caps14 } from "@termuijs/core";
+var ICONS_UNICODE = {
+  success: "\u2713",
+  error: "\u2717",
+  warning: "\u26A0",
+  info: "\u2139"
+};
+var ICONS_ASCII = {
+  success: "+",
+  error: "x",
+  warning: "!",
+  info: "i"
+};
+var COLORS = {
+  success: { type: "named", name: "green" },
+  error: { type: "named", name: "red" },
+  warning: { type: "named", name: "yellow" },
+  info: { type: "named", name: "cyan" }
+};
+var StatusMessage = class extends Widget {
+  _message;
+  _variant;
+  _icon;
+  constructor(message, style = {}, opts = {}) {
+    super({ height: 1, ...style });
+    this._message = message;
+    this._variant = opts.variant ?? "info";
+    this._icon = opts.icon;
+  }
+  setMessage(message) {
+    this._message = message;
+    this.markDirty();
+  }
+  setVariant(variant) {
+    this._variant = variant;
+    this.markDirty();
+  }
+  _renderSelf(screen) {
+    const rect = this._getContentRect();
+    const { x, y, width } = rect;
+    if (width <= 0) return;
+    const attrs = styleToCellAttrs25(this._style);
+    const color = COLORS[this._variant];
+    const iconMap = caps14.unicode ? ICONS_UNICODE : ICONS_ASCII;
+    const icon = this._icon ?? iconMap[this._variant];
+    screen.writeString(x, y, icon, { ...attrs, fg: color, bold: true });
+    const msgX = x + icon.length + 1;
+    const remaining = width - icon.length - 1;
+    if (remaining > 0) {
+      screen.writeString(msgX, y, this._message.slice(0, remaining), { ...attrs, fg: color });
+    }
+  }
+};
+
+// src/feedback/Banner.ts
+import { styleToCellAttrs as styleToCellAttrs26, getBorderChars as getBorderChars2 } from "@termuijs/core";
+var VARIANT_COLORS = {
+  success: { type: "named", name: "green" },
+  error: { type: "named", name: "red" },
+  warning: { type: "named", name: "yellow" },
+  info: { type: "named", name: "cyan" }
+};
+var Banner = class extends Widget {
+  _variant;
+  _title;
+  _body;
+  constructor(style = {}, opts = {}) {
+    super({
+      width: "100%",
+      padding: 1,
+      ...style
+    });
+    this._variant = opts.variant ?? "info";
+    this._title = opts.title ?? "";
+    this._body = opts.body ?? "";
+  }
+  setTitle(title) {
+    this._title = title;
+    this.markDirty();
+  }
+  setBody(body) {
+    this._body = body;
+    this.markDirty();
+  }
+  setVariant(variant) {
+    this._variant = variant;
+    this.markDirty();
+  }
+  _renderSelf(screen) {
+    const { x, y, width, height } = this._rect;
+    if (width < 2 || height < 2) return;
+    const attrs = styleToCellAttrs26(this._style);
+    const color = VARIANT_COLORS[this._variant];
+    const fg = color;
+    const borderChars = getBorderChars2("single");
+    if (borderChars) {
+      screen.setCell(x, y, { char: borderChars.topLeft, fg });
+      for (let c = 1; c < width - 1; c++) {
+        screen.setCell(x + c, y, { char: borderChars.top, fg });
+      }
+      screen.setCell(x + width - 1, y, { char: borderChars.topRight, fg });
+      screen.setCell(x, y + height - 1, { char: borderChars.bottomLeft, fg });
+      for (let c = 1; c < width - 1; c++) {
+        screen.setCell(x + c, y + height - 1, { char: borderChars.bottom, fg });
+      }
+      screen.setCell(x + width - 1, y + height - 1, { char: borderChars.bottomRight, fg });
+      for (let r = 1; r < height - 1; r++) {
+        screen.setCell(x, y + r, { char: borderChars.left, fg });
+        screen.setCell(x + width - 1, y + r, { char: borderChars.right, fg });
+      }
+    }
+    const cx = x + 2;
+    const cy = y + 2;
+    const contentWidth = Math.max(0, width - 4);
+    const contentHeight = Math.max(0, height - 4);
+    let row = 0;
+    if (this._title && row < contentHeight) {
+      screen.writeString(cx, cy + row, this._title.slice(0, contentWidth), {
+        ...attrs,
+        fg: color,
+        bold: true
+      });
+      row++;
+    }
+    if (this._body) {
+      const lines = this._body.split("\n");
+      for (const line of lines) {
+        if (row >= contentHeight) break;
+        screen.writeString(cx, cy + row, line.slice(0, contentWidth), {
+          ...attrs,
+          fg: color
+        });
+        row++;
+      }
+    }
+  }
+};
+
+// src/data/KeyValue.ts
+import { styleToCellAttrs as styleToCellAttrs27, stringWidth as stringWidth14 } from "@termuijs/core";
+var KeyValue = class extends Widget {
+  _pairs;
+  _separator;
+  _keyColor;
+  _valueColor;
+  constructor(pairs, style = {}, opts = {}) {
+    super(style);
+    this._pairs = Array.isArray(pairs) ? pairs : Object.entries(pairs).map(([key, value]) => ({ key, value }));
+    this._separator = opts.separator ?? ": ";
+    this._keyColor = opts.keyColor;
+    this._valueColor = opts.valueColor;
+  }
+  setPairs(pairs) {
+    this._pairs = Array.isArray(pairs) ? pairs : Object.entries(pairs).map(([key, value]) => ({ key, value }));
+    this.markDirty();
+  }
+  _renderSelf(screen) {
+    const rect = this._getContentRect();
+    const { x, y, width, height } = rect;
+    if (width <= 0 || height <= 0 || this._pairs.length === 0) return;
+    const attrs = styleToCellAttrs27(this._style);
+    let maxKeyWidth = 0;
+    for (const pair of this._pairs) {
+      const w = stringWidth14(pair.key);
+      if (w > maxKeyWidth) maxKeyWidth = w;
+    }
+    const sepWidth = stringWidth14(this._separator);
+    for (let i = 0; i < this._pairs.length && i < height; i++) {
+      const pair = this._pairs[i];
+      if (!pair) continue;
+      const keyWidth = stringWidth14(pair.key);
+      const keyX = x + (maxKeyWidth - keyWidth);
+      const sepX = x + maxKeyWidth;
+      const valX = sepX + sepWidth;
+      const valWidth = Math.max(0, width - maxKeyWidth - sepWidth);
+      screen.writeString(keyX, y + i, pair.key, {
+        ...attrs,
+        fg: this._keyColor ?? attrs.fg,
+        bold: true
+      });
+      screen.writeString(sepX, y + i, this._separator, { ...attrs, dim: true });
+      if (valWidth > 0) {
+        screen.writeString(valX, y + i, pair.value.slice(0, valWidth), {
+          ...attrs,
+          fg: this._valueColor ?? attrs.fg
+        });
+      }
+    }
+  }
+};
+
+// src/data/Sidebar.ts
+import { styleToCellAttrs as styleToCellAttrs28, stringWidth as stringWidth15 } from "@termuijs/core";
+var Sidebar = class extends Widget {
+  _items;
+  _collapsed;
+  _collapsedWidth;
+  _activeColor;
+  _badgeColor;
+  constructor(items, style = {}, opts = {}) {
+    super(style);
+    this._items = items;
+    this._collapsed = opts.collapsed ?? false;
+    this._collapsedWidth = opts.collapsedWidth ?? 3;
+    this._activeColor = opts.activeColor ?? { type: "named", name: "cyan" };
+    this._badgeColor = opts.badgeColor ?? { type: "named", name: "yellow" };
+  }
+  setItems(items) {
+    this._items = items;
+    this.markDirty();
+  }
+  setCollapsed(collapsed) {
+    this._collapsed = collapsed;
+    this.markDirty();
+  }
+  toggle() {
+    this._collapsed = !this._collapsed;
+    this.markDirty();
+  }
+  get isCollapsed() {
+    return this._collapsed;
+  }
+  _renderSelf(screen) {
+    const rect = this._getContentRect();
+    const { x, y, width, height } = rect;
+    if (width <= 0 || height <= 0) return;
+    const attrs = styleToCellAttrs28(this._style);
+    for (let i = 0; i < this._items.length && i < height; i++) {
+      const item = this._items[i];
+      if (!item) continue;
+      const isActive = item.active ?? false;
+      const fg = isActive ? this._activeColor : attrs.fg;
+      if (this._collapsed) {
+        const char = item.label.charAt(0) || " ";
+        screen.writeString(x, y + i, char, { ...attrs, fg, bold: isActive });
+      } else {
+        const prefix = isActive ? "\u25B6 " : "  ";
+        const prefixWidth = stringWidth15(prefix);
+        screen.writeString(x, y + i, prefix, { ...attrs, fg });
+        const badgeText = item.badge ? ` [${item.badge}]` : "";
+        const badgeWidth = stringWidth15(badgeText);
+        const labelWidth = Math.max(0, width - prefixWidth - badgeWidth);
+        const label = item.label.slice(0, labelWidth);
+        screen.writeString(x + prefixWidth, y + i, label, {
+          ...attrs,
+          fg,
+          bold: isActive
+        });
+        if (item.badge && badgeWidth > 0) {
+          const badgeX = x + width - badgeWidth;
+          screen.writeString(badgeX, y + i, badgeText, {
+            ...attrs,
+            fg: this._badgeColor
+          });
+        }
+      }
+    }
+  }
+};
+
+// src/data/LineChart.ts
+import { styleToCellAttrs as styleToCellAttrs29, caps as caps15 } from "@termuijs/core";
+var POINT_CHAR_UNICODE = "\u25CF";
+var POINT_CHAR_ASCII = "*";
+var LineChart = class extends Widget {
+  _data;
+  _color;
+  _showYAxis;
+  _showXAxis;
+  _yLabel;
+  _max;
+  _min;
+  constructor(data, style = {}, opts = {}) {
+    super(style);
+    this._data = data;
+    this._color = opts.color ?? { type: "named", name: "cyan" };
+    this._showYAxis = opts.showYAxis ?? false;
+    this._showXAxis = opts.showXAxis ?? false;
+    this._yLabel = opts.yLabel ?? "";
+    this._max = opts.max;
+    this._min = opts.min;
+  }
+  setData(data) {
+    this._data = data;
+    this.markDirty();
+  }
+  pushValue(value) {
+    this._data.push(value);
+    this.markDirty();
+  }
+  _renderSelf(screen) {
+    const rect = this._getContentRect();
+    let { x, y, width, height } = rect;
+    if (width <= 0 || height <= 0 || this._data.length === 0) return;
+    const attrs = styleToCellAttrs29(this._style);
+    const plotHeight = this._showXAxis ? Math.max(1, height - 1) : height;
+    const yAxisWidth = this._showYAxis ? 5 : 0;
+    const plotWidth = Math.max(1, width - yAxisWidth);
+    const plotX = x + yAxisWidth;
+    const min = this._min ?? Math.min(...this._data);
+    const max = this._max ?? Math.max(...this._data);
+    const range = max - min || 1;
+    const samples = [];
+    for (let col = 0; col < plotWidth; col++) {
+      const idx = Math.floor(col / plotWidth * this._data.length);
+      const val = this._data[Math.min(idx, this._data.length - 1)];
+      samples.push(val ?? min);
+    }
+    const toRow = (v) => {
+      const norm = (v - min) / range;
+      return Math.max(0, Math.min(plotHeight - 1, Math.round((1 - norm) * (plotHeight - 1))));
+    };
+    if (this._showYAxis && yAxisWidth > 0) {
+      for (let row = 0; row < plotHeight; row++) {
+        const v = plotHeight > 1 ? max - row / (plotHeight - 1) * range : max;
+        if (row === 0 || row === plotHeight - 1) {
+          const label = v.toFixed(0).padStart(yAxisWidth - 1, " ");
+          screen.writeString(x, y + row, label + "\u2524", { ...attrs, dim: true });
+        } else {
+          screen.writeString(x + yAxisWidth - 1, y + row, "\u2502", { ...attrs, dim: true });
+        }
+      }
+    }
+    const pointChar = caps15.unicode ? POINT_CHAR_UNICODE : POINT_CHAR_ASCII;
+    let prevRow = null;
+    for (let col = 0; col < samples.length; col++) {
+      const val = samples[col];
+      if (val === void 0) continue;
+      const row = toRow(val);
+      if (prevRow !== null && Math.abs(row - prevRow) > 1) {
+        const top = Math.min(prevRow, row) + 1;
+        const bottom = Math.max(prevRow, row);
+        for (let r = top; r < bottom; r++) {
+          screen.setCell(plotX + col, y + r, { char: "\u2502", fg: this._color, dim: true });
+        }
+      }
+      screen.setCell(plotX + col, y + row, { char: pointChar, fg: this._color });
+      prevRow = row;
+    }
+    if (this._showXAxis) {
+      const axisY = y + height - 1;
+      for (let col = 0; col < plotWidth; col++) {
+        screen.setCell(plotX + col, axisY, { char: "\u2500", ...attrs, dim: true });
+      }
+      if (yAxisWidth > 0) {
+        screen.setCell(plotX - 1, axisY, { char: "\u2514", ...attrs, dim: true });
+      }
+    }
+  }
+};
+
+// src/data/HeatMap.ts
+import { styleToCellAttrs as styleToCellAttrs30, caps as caps16 } from "@termuijs/core";
+var SHADE_CHARS_UNICODE = ["\u2591", "\u2592", "\u2593", "\u2588"];
+var SHADE_CHARS_ASCII = [".", ":", "+", "#"];
+var HeatMap = class extends Widget {
+  _matrix;
+  _highColor;
+  _lowColor;
+  _rowLabels;
+  _colLabels;
+  constructor(matrix, style = {}, opts = {}) {
+    super(style);
+    this._matrix = matrix;
+    this._highColor = opts.highColor ?? { type: "named", name: "red" };
+    this._lowColor = opts.lowColor ?? { type: "named", name: "brightBlack" };
+    this._rowLabels = opts.rowLabels ?? [];
+    this._colLabels = opts.colLabels ?? [];
+  }
+  setMatrix(matrix) {
+    this._matrix = matrix;
+    this.markDirty();
+  }
+  _renderSelf(screen) {
+    const rect = this._getContentRect();
+    const { x, y, width, height } = rect;
+    if (width <= 0 || height <= 0 || this._matrix.length === 0) return;
+    const attrs = styleToCellAttrs30(this._style);
+    const shadeChars = caps16.unicode ? SHADE_CHARS_UNICODE : SHADE_CHARS_ASCII;
+    const labelWidth = this._rowLabels.length > 0 ? Math.max(...this._rowLabels.map((l) => l.length)) + 1 : 0;
+    let globalMin = Infinity;
+    let globalMax = -Infinity;
+    for (const row of this._matrix) {
+      for (const val of row) {
+        if (val < globalMin) globalMin = val;
+        if (val > globalMax) globalMax = val;
+      }
+    }
+    const range = globalMax - globalMin || 1;
+    let startRow = 0;
+    if (this._colLabels.length > 0) {
+      for (let col = 0; col < this._colLabels.length; col++) {
+        const cx = x + labelWidth + col;
+        if (cx >= x + width) break;
+        const label = (this._colLabels[col] ?? "").charAt(0);
+        screen.setCell(cx, y, { char: label, ...attrs, dim: true });
+      }
+      startRow = 1;
+    }
+    for (let r = 0; r < this._matrix.length; r++) {
+      const rowY = y + startRow + r;
+      if (rowY >= y + height) break;
+      if (this._rowLabels[r]) {
+        const label = this._rowLabels[r].slice(0, labelWidth - 1).padEnd(labelWidth - 1, " ");
+        screen.writeString(x, rowY, label + " ", { ...attrs, dim: true });
+      }
+      const row = this._matrix[r];
+      if (!row) continue;
+      for (let col = 0; col < row.length; col++) {
+        const cx = x + labelWidth + col;
+        if (cx >= x + width) break;
+        const val = row[col] ?? 0;
+        const norm = (val - globalMin) / range;
+        const level = Math.min(3, Math.floor(norm * 4));
+        const char = shadeChars[level] ?? shadeChars[0];
+        const fg = norm >= 0.75 ? this._highColor : this._lowColor;
+        screen.setCell(cx, rowY, { char, fg });
+      }
+    }
+  }
+};
+
+// src/data/Definition.ts
+import { styleToCellAttrs as styleToCellAttrs31 } from "@termuijs/core";
+var Definition = class extends Widget {
+  _pairs;
+  _indent;
+  _spacing;
+  _termColor;
+  _definitionColor;
+  constructor(pairs, style = {}, opts = {}) {
+    super(style);
+    this._pairs = Array.isArray(pairs) ? pairs : Object.entries(pairs).map(([term, definition]) => ({ term, definition }));
+    this._indent = opts.indent ?? 2;
+    this._spacing = opts.spacing ?? true;
+    this._termColor = opts.termColor;
+    this._definitionColor = opts.definitionColor;
+  }
+  setPairs(pairs) {
+    this._pairs = Array.isArray(pairs) ? pairs : Object.entries(pairs).map(([term, definition]) => ({ term, definition }));
+    this.markDirty();
+  }
+  _renderSelf(screen) {
+    const rect = this._getContentRect();
+    const { x, y, width, height } = rect;
+    if (width <= 0 || height <= 0 || this._pairs.length === 0) return;
+    const attrs = styleToCellAttrs31(this._style);
+    const indent = Math.min(this._indent, width - 1);
+    let row = 0;
+    for (const pair of this._pairs) {
+      if (row >= height) break;
+      screen.writeString(x, y + row, pair.term.slice(0, width), {
+        ...attrs,
+        fg: this._termColor ?? attrs.fg,
+        bold: true
+      });
+      row++;
+      if (row >= height) break;
+      const defWidth = Math.max(1, width - indent);
+      const words = pair.definition.split(" ");
+      let line = "";
+      for (const word of words) {
+        if (line.length === 0) {
+          line = word;
+        } else if (line.length + 1 + word.length <= defWidth) {
+          line += " " + word;
+        } else {
+          if (row >= height) break;
+          screen.writeString(x + indent, y + row, line, {
+            ...attrs,
+            fg: this._definitionColor ?? attrs.fg
+          });
+          row++;
+          line = word;
+        }
+      }
+      if (line && row < height) {
+        screen.writeString(x + indent, y + row, line, {
+          ...attrs,
+          fg: this._definitionColor ?? attrs.fg
+        });
+        row++;
+      }
+      if (this._spacing && row < height) {
+        row++;
+      }
+    }
+  }
+};
+
+// src/display/BigText.ts
+import { styleToCellAttrs as styleToCellAttrs32 } from "@termuijs/core";
+var CHAR_MAP = {
+  "A": [" # ", "# #", "###", "# #", "# #"],
+  "B": ["## ", "# #", "## ", "# #", "## "],
+  "C": [" ##", "#  ", "#  ", "#  ", " ##"],
+  "D": ["## ", "# #", "# #", "# #", "## "],
+  "E": ["###", "#  ", "## ", "#  ", "###"],
+  "F": ["###", "#  ", "## ", "#  ", "#  "],
+  "G": [" ##", "#  ", "# #", "# #", " ##"],
+  "H": ["# #", "# #", "###", "# #", "# #"],
+  "I": ["###", " # ", " # ", " # ", "###"],
+  "J": ["###", "  #", "  #", "# #", " # "],
+  "K": ["# #", "## ", "#  ", "## ", "# #"],
+  "L": ["#  ", "#  ", "#  ", "#  ", "###"],
+  "M": ["# #", "###", "# #", "# #", "# #"],
+  "N": ["# #", "## ", "# #", "# #", "# #"],
+  "O": [" # ", "# #", "# #", "# #", " # "],
+  "P": ["## ", "# #", "## ", "#  ", "#  "],
+  "Q": [" # ", "# #", "# #", "##:", " ##"],
+  "R": ["## ", "# #", "## ", "## ", "# #"],
+  "S": [" ##", "#  ", " # ", "  #", "## "],
+  "T": ["###", " # ", " # ", " # ", " # "],
+  "U": ["# #", "# #", "# #", "# #", "###"],
+  "V": ["# #", "# #", "# #", "# #", " # "],
+  "W": ["# #", "# #", "# #", "###", "# #"],
+  "X": ["# #", "# #", " # ", "# #", "# #"],
+  "Y": ["# #", "# #", " # ", " # ", " # "],
+  "Z": ["###", "  #", " # ", "#  ", "###"],
+  "0": [" # ", "# #", "# #", "# #", " # "],
+  "1": [" # ", "## ", " # ", " # ", "###"],
+  "2": [" # ", "# #", " # ", "#  ", "###"],
+  "3": ["## ", "  #", " ##", "  #", "## "],
+  "4": ["# #", "# #", "###", "  #", "  #"],
+  "5": ["###", "#  ", "## ", "  #", "## "],
+  "6": [" # ", "#  ", "## ", "# #", " # "],
+  "7": ["###", "  #", " # ", "#  ", "#  "],
+  "8": [" # ", "# #", " # ", "# #", " # "],
+  "9": [" # ", "# #", " ##", "  #", " # "],
+  " ": ["   ", "   ", "   ", "   ", "   "],
+  "!": [" # ", " # ", " # ", "   ", " # "],
+  ".": ["   ", "   ", "   ", "   ", " # "],
+  "-": ["   ", "   ", "###", "   ", "   "],
+  ":": ["   ", " # ", "   ", " # ", "   "]
+};
+var CHAR_HEIGHT = 5;
+var CHAR_WIDTH = 3;
+var BigText = class extends Widget {
+  _text;
+  _color;
+  constructor(text, style = {}, opts = {}) {
+    super(style);
+    this._text = text.toUpperCase();
+    this._color = opts.color ?? { type: "named", name: "white" };
+  }
+  setText(text) {
+    this._text = text.toUpperCase();
+    this.markDirty();
+  }
+  _renderSelf(screen) {
+    const rect = this._getContentRect();
+    const { x, y, width, height } = rect;
+    if (width <= 0 || height <= 0) return;
+    const attrs = styleToCellAttrs32(this._style);
+    const fg = this._color;
+    let curX = x;
+    for (const ch of this._text) {
+      const glyph = CHAR_MAP[ch] ?? ["# #", "# #", "# #", "# #", "# #"];
+      const glyphWidth = glyph[0]?.length ?? CHAR_WIDTH;
+      if (curX + glyphWidth > x + width) break;
+      for (let row = 0; row < CHAR_HEIGHT && row < height; row++) {
+        const rowStr = glyph[row] ?? "";
+        for (let col = 0; col < rowStr.length; col++) {
+          if (rowStr[col] !== " ") {
+            screen.setCell(curX + col, y + row, { char: "\u2588", ...attrs, fg });
+          }
+        }
+      }
+      curX += glyphWidth + 1;
+    }
+  }
+};
+
+// src/display/Gradient.ts
+import { styleToCellAttrs as styleToCellAttrs33, caps as caps17, parseColor } from "@termuijs/core";
+function hexToRgb(hex) {
+  const clean = hex.replace("#", "");
+  if (clean.length !== 6) return null;
+  const r = parseInt(clean.slice(0, 2), 16);
+  const g = parseInt(clean.slice(2, 4), 16);
+  const b = parseInt(clean.slice(4, 6), 16);
+  if (isNaN(r) || isNaN(g) || isNaN(b)) return null;
+  return [r, g, b];
+}
+function lerpRgb(a, b, t) {
+  return [
+    Math.round(a[0] + (b[0] - a[0]) * t),
+    Math.round(a[1] + (b[1] - a[1]) * t),
+    Math.round(a[2] + (b[2] - a[2]) * t)
+  ];
+}
+var Gradient = class extends Widget {
+  _text;
+  _startColor;
+  _endColor;
+  _align;
+  constructor(text, style = {}, opts = {}) {
+    super({ height: 1, ...style });
+    this._text = text;
+    this._startColor = opts.startColor ?? "#ff0000";
+    this._endColor = opts.endColor ?? "#0000ff";
+    this._align = opts.align ?? "left";
+  }
+  setText(text) {
+    this._text = text;
+    this.markDirty();
+  }
+  setColors(start, end) {
+    this._startColor = start;
+    this._endColor = end;
+    this.markDirty();
+  }
+  _renderSelf(screen) {
+    const rect = this._getContentRect();
+    const { x, y, width } = rect;
+    if (width <= 0 || !this._text) return;
+    const attrs = styleToCellAttrs33(this._style);
+    if (!caps17.color) {
+      screen.writeString(x, y, this._text.slice(0, width), attrs);
+      return;
+    }
+    const startRgb = hexToRgb(this._startColor);
+    const endRgb = hexToRgb(this._endColor);
+    const chars = Array.from(this._text).slice(0, width);
+    const len = chars.length;
+    let offsetX = 0;
+    if (this._align === "center") offsetX = Math.floor((width - len) / 2);
+    else if (this._align === "right") offsetX = width - len;
+    offsetX = Math.max(0, offsetX);
+    for (let i = 0; i < chars.length; i++) {
+      const t = len > 1 ? i / (len - 1) : 0;
+      let fg;
+      if (startRgb && endRgb) {
+        const [r, g, b] = lerpRgb(startRgb, endRgb, t);
+        fg = { type: "rgb", r, g, b };
+      } else if (startRgb) {
+        fg = parseColor(this._startColor) ?? attrs.fg;
+      } else {
+        fg = attrs.fg;
+      }
+      screen.setCell(x + offsetX + i, y, { char: chars[i] ?? " ", ...attrs, fg });
+    }
+  }
+};
 export {
+  Banner,
   BarChart,
+  BigText,
   Box,
+  Card,
+  Center,
+  ChatMessage,
+  Columns,
+  CommandPalette,
+  Definition,
+  DiffView,
   Gauge,
+  Gradient,
+  Grid,
+  HeatMap,
+  JSONView,
+  KeyValue,
+  LineChart,
   List,
   LogView,
+  MultiProgress,
   ProgressBar,
   SPINNER_FRAMES,
+  ScrollView,
   Scrollbar,
+  Sidebar,
+  Skeleton,
   Sparkline,
   Spinner,
   StatusIndicator,
+  StatusMessage,
+  StreamingText,
   Table,
   Text,
   TextInput,
+  ToolApproval,
+  ToolCall,
+  Tree,
   VirtualList,
-  Widget
+  Widget,
+  computeRange,
+  computeVariableRange,
+  jsonToTree
 };
 //# sourceMappingURL=index.js.map