ink-hud 0.1.0

package/dist/index.js

@@ -0,0 +1,2951 @@
+import React6, { createContext, useMemo, useContext, useState, useRef, useEffect } from 'react';
+import chalk from 'chalk';
+import tinygradient from 'tinygradient';
+import { useStdout, Box, Text, useFocus, useInput } from 'ink';
+
+// src/core/renderer.ts
+var Renderer = class {
+  // ============================================================
+  // Common implementations shared by all renderers
+  // ============================================================
+  /**
+   * Create a blank Canvas
+   * @param width - Canvas width (pixels)
+   * @param height - Canvas height (pixels)
+   * @returns 2D pixel array
+   */
+  createCanvas(width, height) {
+    return Array.from(
+      { length: height },
+      () => Array.from({ length: width }, () => ({ active: false }))
+    );
+  }
+  /**
+   * Set a single pixel on the Canvas
+   * @param canvas - Canvas
+   * @param x - x coordinate
+   * @param y - y coordinate
+   * @param pixel - Pixel properties (active, color, etc.)
+   */
+  setPixel(canvas, x, y, pixel = { active: true }) {
+    const row = canvas[y];
+    if (y >= 0 && y < canvas.length && row && x >= 0 && x < row.length) {
+      const current = row[x];
+      if (current) {
+        Object.assign(current, pixel);
+      }
+    }
+  }
+  /**
+   * Draw line segments (Bresenham's algorithm)
+   */
+  drawLine(canvas, x0, y0, x1, y1, pixel = { active: true }) {
+    const dx = Math.abs(x1 - x0);
+    const dy = Math.abs(y1 - y0);
+    const sx = x0 < x1 ? 1 : -1;
+    const sy = y0 < y1 ? 1 : -1;
+    let err = dx - dy;
+    let x = Math.round(x0);
+    let y = Math.round(y0);
+    const endX = Math.round(x1);
+    const endY = Math.round(y1);
+    while (true) {
+      this.setPixel(canvas, x, y, pixel);
+      if (x === endX && y === endY) break;
+      const e2 = 2 * err;
+      if (e2 > -dy) {
+        err -= dy;
+        x += sx;
+      }
+      if (e2 < dx) {
+        err += dx;
+        y += sy;
+      }
+    }
+  }
+  /**
+   * Draw circle or ring (Midpoint Circle algorithm)
+   */
+  drawCircle(canvas, centerX, centerY, radius, filled = false, pixel = { active: true }) {
+    if (filled) {
+      for (let y = -radius; y <= radius; y++) {
+        const width = Math.sqrt(radius * radius - y * y);
+        for (let x = -width; x <= width; x++) {
+          this.setPixel(canvas, Math.round(centerX + x), Math.round(centerY + y), pixel);
+        }
+      }
+    } else {
+      let x = 0;
+      let y = radius;
+      let d = 1 - radius;
+      while (x <= y) {
+        this.setPixel(canvas, centerX + x, centerY + y, pixel);
+        this.setPixel(canvas, centerX - x, centerY + y, pixel);
+        this.setPixel(canvas, centerX + x, centerY - y, pixel);
+        this.setPixel(canvas, centerX - x, centerY - y, pixel);
+        this.setPixel(canvas, centerX + y, centerY + x, pixel);
+        this.setPixel(canvas, centerX - y, centerY + x, pixel);
+        this.setPixel(canvas, centerX + y, centerY - x, pixel);
+        this.setPixel(canvas, centerX - y, centerY - x, pixel);
+        x++;
+        if (d < 0) {
+          d += 2 * x + 1;
+        } else {
+          y--;
+          d += 2 * (x - y) + 1;
+        }
+      }
+    }
+  }
+  /**
+   * Draw arc (Parametric equation)
+   */
+  drawArc(canvas, centerX, centerY, radius, startAngle, endAngle, thickness = 1, pixel = { active: true }) {
+    let start = startAngle;
+    let end = endAngle;
+    if (start > end) {
+      [start, end] = [end, start];
+    }
+    const angleStep = 1 / (radius * 2);
+    for (let r = Math.max(0, radius - thickness + 1); r <= radius; r++) {
+      for (let theta = start; theta <= end; theta += angleStep) {
+        const x = centerX + r * Math.cos(theta);
+        const y = centerY + r * Math.sin(theta);
+        this.setPixel(canvas, Math.round(x), Math.round(y), pixel);
+      }
+    }
+  }
+  /**
+   * Draw rectangle
+   */
+  drawRect(canvas, x, y, width, height, filled = false, pixel = { active: true }) {
+    if (filled) {
+      for (let py = y; py < y + height; py++) {
+        for (let px = x; px < x + width; px++) {
+          this.setPixel(canvas, px, py, pixel);
+        }
+      }
+    } else {
+      for (let px = x; px < x + width; px++) {
+        this.setPixel(canvas, px, y + height - 1, pixel);
+      }
+      for (let py = y; py < y + height; py++) {
+        this.setPixel(canvas, x, py, pixel);
+      }
+      for (let py = y; py < y + height; py++) {
+        this.setPixel(canvas, x + width - 1, py, pixel);
+      }
+    }
+  }
+  // ============================================================
+  // Helper methods
+  // ============================================================
+  /**
+   * Get renderer resolution
+   */
+  getResolution() {
+    return this.getMetadata().resolution;
+  }
+  /**
+   * Get renderer name
+   */
+  getName() {
+    return this.getMetadata().name;
+  }
+  /**
+   * Calculate number of character rows and columns needed to render specified dimensions
+   */
+  calculateCharDimensions(pixelWidth, pixelHeight) {
+    const res = this.getResolution();
+    return {
+      cols: Math.ceil(pixelWidth / res.horizontal),
+      rows: Math.ceil(pixelHeight / res.vertical)
+    };
+  }
+};
+
+// src/core/braille.ts
+var BRAILLE_BASE = 10240;
+var DOT_WEIGHTS = [1, 2, 4, 8, 16, 32, 64, 128];
+var BrailleRenderer = class extends Renderer {
+  getMetadata() {
+    return {
+      name: "braille",
+      displayName: "Braille",
+      description: "Braille character (\u28FF) 2x4 matrix, 8x resolution",
+      resolution: {
+        horizontal: 2,
+        vertical: 4
+      },
+      requiresUtf8: true,
+      requiresUnicode: true,
+      minScore: 80
+    };
+  }
+  // ============================================================
+  // Braille-specific private methods
+  // ============================================================
+  createBrailleChar(dots) {
+    let code = BRAILLE_BASE;
+    for (let i = 0; i < 8 && i < DOT_WEIGHTS.length; i++) {
+      if (dots[i]) {
+        const weight = DOT_WEIGHTS[i];
+        if (weight !== void 0) {
+          code += weight;
+        }
+      }
+    }
+    return String.fromCharCode(code);
+  }
+  pixelToDotIndex(x, y) {
+    if (x === 0) {
+      return y === 3 ? 6 : y;
+    }
+    return y === 3 ? 7 : y + 3;
+  }
+  fillBrailleDots(pixels, cx, cy, width, height) {
+    const dots = Array(8).fill(false);
+    for (let py = 0; py < 4; py++) {
+      for (let px = 0; px < 2; px++) {
+        const pixelY = cy * 4 + py;
+        const pixelX = cx * 2 + px;
+        if (pixelY < height && pixelX < width) {
+          dots[this.pixelToDotIndex(px, py)] = pixels[pixelY]?.[pixelX]?.active ?? false;
+        }
+      }
+    }
+    return dots;
+  }
+  resolveColor(pixels, cx, cy, width, height) {
+    const counts = /* @__PURE__ */ new Map();
+    for (let py = 0; py < 4; py++) {
+      for (let px = 0; px < 2; px++) {
+        const pixelY = cy * 4 + py;
+        const pixelX = cx * 2 + px;
+        if (pixelY < height && pixelX < width) {
+          const pixel = pixels[pixelY]?.[pixelX];
+          if (pixel?.active && pixel.color) {
+            counts.set(pixel.color, (counts.get(pixel.color) ?? 0) + 1);
+          }
+        }
+      }
+    }
+    if (counts.size === 0) return void 0;
+    let maxCount = 0;
+    let dominantColor;
+    for (const [color, count] of counts) {
+      if (count > maxCount) {
+        maxCount = count;
+        dominantColor = color;
+      }
+    }
+    return dominantColor;
+  }
+  // ============================================================
+  // Methods that subclasses must implement
+  // ============================================================
+  renderCanvas(pixels, width, height) {
+    const charWidth = Math.ceil(width / 2);
+    const charHeight = Math.ceil(height / 4);
+    const lines = [];
+    for (let cy = 0; cy < charHeight; cy++) {
+      const lineSegments = [];
+      let buffer = "";
+      let bufferColor;
+      for (let cx = 0; cx < charWidth; cx++) {
+        const dots = this.fillBrailleDots(pixels, cx, cy, width, height);
+        const char = this.createBrailleChar(dots);
+        const color = this.resolveColor(pixels, cx, cy, width, height);
+        if (buffer && bufferColor !== color) {
+          lineSegments.push(
+            bufferColor ? { text: buffer, color: bufferColor } : { text: buffer }
+          );
+          buffer = "";
+        }
+        bufferColor = color;
+        buffer += char;
+      }
+      if (buffer) {
+        lineSegments.push(
+          bufferColor ? { text: buffer, color: bufferColor } : { text: buffer }
+        );
+      }
+      lines.push(lineSegments);
+    }
+    return lines;
+  }
+};
+
+// src/core/block.ts
+var BlockRenderer = class _BlockRenderer extends Renderer {
+  // 9x9 Lookup table: [leftHeight][rightHeight] -> char
+  // Index 0-8 represents filled pixel height of column
+  static BLOCK_LUT = [
+    // R=0  1    2    3    4    5    6    7    8   (L Row Index)
+    [" ", "\u2597", "\u2597", "\u2597", "\u2597", "\u2597", "\u2597", "\u2590", "\u2590"],
+    // L=0
+    ["\u2596", "\u2582", "\u2582", "\u2583", "\u2583", "\u2584", "\u2584", "\u2585", "\u2585"],
+    // L=1: Avg 1-1.5 -> ▂
+    ["\u2596", "\u2582", "\u2582", "\u2583", "\u2583", "\u2584", "\u2584", "\u2585", "\u2585"],
+    // L=2
+    ["\u2596", "\u2583", "\u2583", "\u2583", "\u2584", "\u2584", "\u2585", "\u2585", "\u2585"],
+    // L=3: Avg 1.5-3.5
+    ["\u2596", "\u2583", "\u2583", "\u2584", "\u2584", "\u2585", "\u2585", "\u2586", "\u2586"],
+    // L=4
+    ["\u2596", "\u2584", "\u2584", "\u2585", "\u2585", "\u2585", "\u2586", "\u2586", "\u2587"],
+    // L=5
+    ["\u2596", "\u2584", "\u2584", "\u2585", "\u2585", "\u2586", "\u2586", "\u2587", "\u2587"],
+    // L=6
+    ["\u258C", "\u2585", "\u2585", "\u2586", "\u2586", "\u2587", "\u2587", "\u2587", "\u2588"],
+    // L=7
+    ["\u258C", "\u2585", "\u2585", "\u2586", "\u2586", "\u2587", "\u2587", "\u2588", "\u2588"]
+    // L=8
+  ];
+  getMetadata() {
+    return {
+      name: "block",
+      displayName: "Block Elements",
+      description: "Block Elements character (\u2588) 2x8 matrix, vertical 8x resolution",
+      resolution: {
+        horizontal: 2,
+        vertical: 8
+      },
+      requiresUtf8: true,
+      requiresUnicode: true,
+      minScore: 30
+    };
+  }
+  // ============================================================
+  // Block-specific private methods
+  // ============================================================
+  /**
+   * Determine primary color
+   */
+  resolveColor(pixels, startX, startY, width, height) {
+    const counts = /* @__PURE__ */ new Map();
+    for (let py = 0; py < 8; py++) {
+      for (let px = 0; px < 2; px++) {
+        const y = startY + py;
+        const x = startX + px;
+        if (y >= height || x >= width) continue;
+        const pixel = pixels[y]?.[x];
+        if (pixel?.active && pixel.color) {
+          counts.set(pixel.color, (counts.get(pixel.color) ?? 0) + 1);
+        }
+      }
+    }
+    if (counts.size === 0) return void 0;
+    let maxCount = 0;
+    let dominantColor;
+    for (const [color, count] of counts) {
+      if (count > maxCount) {
+        maxCount = count;
+        dominantColor = color;
+      }
+    }
+    return dominantColor;
+  }
+  // ============================================================
+  // Methods that subclasses must implement
+  // ============================================================
+  renderCanvas(pixels, width, height) {
+    const charWidth = Math.ceil(width / 2);
+    const charHeight = Math.ceil(height / 8);
+    const lines = [];
+    for (let cy = 0; cy < charHeight; cy++) {
+      const lineSegments = [];
+      let buffer = "";
+      let bufferFg;
+      let bufferBg;
+      let bufferColorKey;
+      for (let cx = 0; cx < charWidth; cx++) {
+        const startY = cy * 8;
+        const leftX = cx * 2;
+        const rightX = cx * 2 + 1;
+        const analyzeColumn = (colX) => {
+          let count = 0;
+          let sumY = 0;
+          for (let py = 0; py < 8; py++) {
+            const y = startY + py;
+            if (y >= height) break;
+            if (pixels[y]?.[colX]?.active) {
+              count++;
+              sumY += py;
+            }
+          }
+          const gravity = count > 0 ? sumY / count : 3.5;
+          return { count, gravity };
+        };
+        const left = analyzeColumn(leftX);
+        const right = analyzeColumn(rightX);
+        const isLeftTop = left.count > 0 && left.gravity < 3.5;
+        const isRightTop = right.count > 0 && right.gravity < 3.5;
+        const useInverse = isLeftTop && (isRightTop || right.count === 0) || isRightTop && (isLeftTop || left.count === 0);
+        let char = " ";
+        let isInverted = false;
+        const pixelColor = this.resolveColor(pixels, leftX, startY, width, height);
+        if (useInverse) {
+          const invLeft = 8 - left.count;
+          const invRight = 8 - right.count;
+          char = _BlockRenderer.BLOCK_LUT[invLeft]?.[invRight] ?? " ";
+          isInverted = true;
+        } else {
+          const finalLeft = Math.min(8, Math.max(0, left.count));
+          const finalRight = Math.min(8, Math.max(0, right.count));
+          char = _BlockRenderer.BLOCK_LUT[finalLeft]?.[finalRight] ?? " ";
+        }
+        let fgColor;
+        let bgColor;
+        if (char !== " ") {
+          if (isInverted) {
+            fgColor = "black";
+            bgColor = pixelColor;
+          } else {
+            fgColor = pixelColor;
+            bgColor = void 0;
+          }
+        }
+        const colorKey = `${fgColor}|${bgColor}`;
+        if (buffer && bufferColorKey !== colorKey) {
+          lineSegments.push({
+            text: buffer,
+            ...bufferFg ? { color: bufferFg } : {},
+            ...bufferBg ? { backgroundColor: bufferBg } : {}
+          });
+          buffer = "";
+        }
+        bufferColorKey = colorKey;
+        bufferFg = fgColor;
+        bufferBg = bgColor;
+        buffer += char;
+      }
+      if (buffer) {
+        lineSegments.push({
+          text: buffer,
+          ...bufferFg ? { color: bufferFg } : {},
+          ...bufferBg ? { backgroundColor: bufferBg } : {}
+        });
+      }
+      lines.push(lineSegments);
+    }
+    return lines;
+  }
+};
+
+// src/core/ascii.ts
+var AsciiRenderer = class extends Renderer {
+  getMetadata() {
+    return {
+      name: "ascii",
+      displayName: "ASCII",
+      description: "ASCII character (. _ - ' / \\ |) 1x3 resolution, maximum compatibility",
+      resolution: {
+        horizontal: 1,
+        vertical: 3
+      },
+      requiresUtf8: false,
+      requiresUnicode: false,
+      minScore: 0
+      // No requirements, usable in any terminal
+    };
+  }
+  // ============================================================
+  // ASCII-specific private methods
+  // ============================================================
+  /**
+   * Check if the pixel at the specified position is set
+   */
+  isPixelSet(pixels, x, y) {
+    const row = pixels[y];
+    if (!row) return false;
+    return row[x]?.active ?? false;
+  }
+  getCellPositions(pixels, x, baseY) {
+    const positions = [];
+    for (let offset = 0; offset < 3; offset++) {
+      if (this.isPixelSet(pixels, x, baseY + offset)) {
+        positions.push(offset);
+      }
+    }
+    return positions;
+  }
+  getNeighborPosition(pixels, x, baseY) {
+    const positions = this.getCellPositions(pixels, x, baseY);
+    if (positions.length === 0) {
+      return null;
+    }
+    const sum = positions.reduce((total, value) => total + value, 0);
+    return sum / positions.length;
+  }
+  selectMultiPixelChar(hasAnyLeft, hasAnyRight) {
+    return hasAnyLeft || hasAnyRight ? "+" : "|";
+  }
+  selectHorizontalChar(pos) {
+    if (pos === 0) {
+      return "'";
+    }
+    if (pos === 1) {
+      return "-";
+    }
+    return "_";
+  }
+  selectDiagonalChar(params) {
+    const { pos, hasAnyLeft, hasAnyRight, leftPos, rightPos } = params;
+    if (hasAnyLeft && leftPos !== null && leftPos !== pos) {
+      return pos < leftPos ? "/" : "\\";
+    }
+    if (hasAnyRight && rightPos !== null && rightPos !== pos) {
+      return pos > rightPos ? "/" : "\\";
+    }
+    return null;
+  }
+  selectIsolatedChar(pos) {
+    if (pos === 0) {
+      return '"';
+    }
+    if (pos === 1) {
+      return "+";
+    }
+    return ".";
+  }
+  selectSinglePixelChar(params) {
+    const { pos, hasSameHorizontal, hasAnyLeft, hasAnyRight, leftPos, rightPos } = params;
+    if (hasSameHorizontal) {
+      return this.selectHorizontalChar(pos);
+    }
+    const diagonal = this.selectDiagonalChar({
+      pos,
+      hasAnyLeft,
+      hasAnyRight,
+      leftPos,
+      rightPos
+    });
+    if (diagonal) {
+      return diagonal;
+    }
+    return this.selectIsolatedChar(pos);
+  }
+  /**
+   * Intelligently select ASCII character
+   * Select appropriate character based on 1x3 vertical pixels and adjacent column connections
+   */
+  selectAsciiChar(pixels, x, baseY) {
+    const positions = this.getCellPositions(pixels, x, baseY);
+    if (positions.length === 0) {
+      return " ";
+    }
+    const leftPos = this.getNeighborPosition(pixels, x - 1, baseY);
+    const rightPos = this.getNeighborPosition(pixels, x + 1, baseY);
+    const hasAnyLeft = leftPos !== null;
+    const hasAnyRight = rightPos !== null;
+    if (positions.length >= 2) {
+      return this.selectMultiPixelChar(hasAnyLeft, hasAnyRight);
+    }
+    const pos = positions[0] ?? 1;
+    const hasLeftSame = this.isPixelSet(pixels, x - 1, baseY + pos);
+    const hasRightSame = this.isPixelSet(pixels, x + 1, baseY + pos);
+    const hasSameHorizontal = hasLeftSame || hasRightSame;
+    return this.selectSinglePixelChar({
+      pos,
+      hasSameHorizontal,
+      hasAnyLeft,
+      hasAnyRight,
+      leftPos,
+      rightPos
+    });
+  }
+  /**
+   * Determine the primary color for this character cell
+   */
+  resolveColor(pixels, x, baseY) {
+    const counts = /* @__PURE__ */ new Map();
+    for (let offset = 0; offset < 3; offset++) {
+      const y = baseY + offset;
+      if (y >= pixels.length) continue;
+      const pixel = pixels[y]?.[x];
+      if (pixel?.active && pixel.color) {
+        counts.set(pixel.color, (counts.get(pixel.color) ?? 0) + 1);
+      }
+    }
+    if (counts.size === 0) return void 0;
+    let maxCount = 0;
+    let dominantColor;
+    for (const [color, count] of counts) {
+      if (count > maxCount) {
+        maxCount = count;
+        dominantColor = color;
+      }
+    }
+    return dominantColor;
+  }
+  // ============================================================
+  // Methods that subclasses must implement
+  // ============================================================
+  renderCanvas(pixels, width, height) {
+    const lines = [];
+    const charHeight = Math.ceil(height / 3);
+    for (let cy = 0; cy < charHeight; cy++) {
+      const lineSegments = [];
+      const baseY = cy * 3;
+      let buffer = "";
+      let bufferColor;
+      for (let x = 0; x < width; x++) {
+        const char = this.selectAsciiChar(pixels, x, baseY);
+        const color = char === " " ? void 0 : this.resolveColor(pixels, x, baseY);
+        if (buffer && bufferColor !== color) {
+          lineSegments.push(
+            bufferColor ? { text: buffer, color: bufferColor } : { text: buffer }
+          );
+          buffer = "";
+        }
+        bufferColor = color;
+        buffer += char;
+      }
+      if (buffer) {
+        lineSegments.push(
+          bufferColor ? { text: buffer, color: bufferColor } : { text: buffer }
+        );
+      }
+      lines.push(lineSegments);
+    }
+    return lines;
+  }
+};
+
+// src/detect/terminal.ts
+var TerminalDetector = class _TerminalDetector {
+  /** Terminal whitelist supporting Braille characters (lowercase) */
+  static BRAILLE_SUPPORTED_TERMINALS = [
+    "iterm",
+    "warp",
+    "alacritty",
+    "kitty",
+    "wezterm",
+    "hyper",
+    "tabby",
+    "rio"
+  ];
+  /** Environment variable information */
+  envInfo;
+  constructor(env = process.env) {
+    this.envInfo = this.extractEnvInfo(env);
+  }
+  /**
+   * Extract relevant information from environment variables
+   * @param env - Environment variable object
+   * @returns Environment information
+   */
+  extractEnvInfo(env) {
+    const info = {};
+    if (env.LANG !== void 0) {
+      info.LANG = env.LANG;
+    }
+    if (env.TERM !== void 0) {
+      info.TERM = env.TERM;
+    }
+    if (env.COLORTERM !== void 0) {
+      info.COLORTERM = env.COLORTERM;
+    }
+    if (env.TERM_PROGRAM !== void 0) {
+      info.TERM_PROGRAM = env.TERM_PROGRAM;
+    }
+    if (env.TERM_PROGRAM_VERSION !== void 0) {
+      info.TERM_PROGRAM_VERSION = env.TERM_PROGRAM_VERSION;
+    }
+    return info;
+  }
+  /**
+   * Detect UTF-8 support
+   * @returns Whether UTF-8 is supported
+   */
+  checkUtf8Support() {
+    const lang = this.envInfo.LANG || "";
+    return lang.toUpperCase().includes("UTF-8") || lang.toUpperCase().includes("UTF8");
+  }
+  /**
+   * Detect Unicode support
+   * UTF-8 terminals usually support Unicode
+   * @returns Whether Unicode is supported
+   */
+  checkUnicodeSupport() {
+    return this.checkUtf8Support();
+  }
+  /**
+   * Detect Braille character support
+   * Determine based on terminal program whitelist
+   * @returns Whether Braille characters are supported
+   */
+  checkBrailleSupport() {
+    const termProgram = (this.envInfo.TERM_PROGRAM || "").toLowerCase();
+    return _TerminalDetector.BRAILLE_SUPPORTED_TERMINALS.some(
+      (supportedTerm) => termProgram.includes(supportedTerm)
+    );
+  }
+  /**
+   * Detect Block Elements character support
+   * Most terminals supporting Unicode also support Block Elements
+   * @returns Whether Block Elements are supported
+   */
+  checkBlockElementsSupport() {
+    return this.checkUnicodeSupport();
+  }
+  /**
+   * Detect color support (16 colors or more)
+   * @returns Whether colors are supported
+   */
+  checkColorSupport() {
+    const term = this.envInfo.TERM || "";
+    const colorterm = this.envInfo.COLORTERM || "";
+    if (term.includes("color") || term.includes("256color")) {
+      return true;
+    }
+    if (colorterm.length > 0) {
+      return true;
+    }
+    return false;
+  }
+  /**
+   * Detect true color support (24-bit RGB)
+   * @returns Whether true color is supported
+   */
+  checkTrueColorSupport() {
+    const colorterm = this.envInfo.COLORTERM || "";
+    return colorterm.toLowerCase() === "truecolor" || colorterm === "24bit";
+  }
+  /**
+   * Calculate comprehensive terminal capability score (0-100)
+   * @returns Score
+   */
+  calculateScore() {
+    let score = 0;
+    if (this.checkUtf8Support()) {
+      score += 20;
+    }
+    if (this.checkUnicodeSupport()) {
+      score += 10;
+    }
+    if (this.checkBrailleSupport()) {
+      score += 30;
+    }
+    if (this.checkBlockElementsSupport()) {
+      score += 10;
+    }
+    if (this.checkColorSupport()) {
+      score += 15;
+    }
+    if (this.checkTrueColorSupport()) {
+      score += 15;
+    }
+    return Math.min(score, 100);
+  }
+  /**
+   * Detect terminal capabilities
+   * @returns Terminal capability information
+   */
+  detect() {
+    const supportsUtf8 = this.checkUtf8Support();
+    const supportsUnicode = this.checkUnicodeSupport();
+    const supportsBraille = this.checkBrailleSupport();
+    const supportsBlockElements = this.checkBlockElementsSupport();
+    const supportsColor = this.checkColorSupport();
+    const supportsTrueColor = this.checkTrueColorSupport();
+    const score = this.calculateScore();
+    return {
+      supportsUtf8,
+      supportsUnicode,
+      supportsBraille,
+      supportsBlockElements,
+      supportsColor,
+      supportsTrueColor,
+      score
+    };
+  }
+  /**
+   * Get environment information
+   * @returns Environment information
+   */
+  getEnvironmentInfo() {
+    return { ...this.envInfo };
+  }
+};
+var terminalDetector = new TerminalDetector();
+
+// src/detect/selector.ts
+var RendererSelector = class {
+  /** Terminal detector */
+  detector;
+  constructor(detector = new TerminalDetector()) {
+    this.detector = detector;
+  }
+  /**
+   * Creates a renderer instance of the specified type
+   * @param type - Renderer type
+   * @returns Renderer instance
+   */
+  createRenderer(type) {
+    switch (type) {
+      case "braille":
+        return new BrailleRenderer();
+      case "block":
+        return new BlockRenderer();
+      case "ascii":
+        return new AsciiRenderer();
+    }
+  }
+  /**
+   * Get renderer by type
+   * @param type - Renderer type
+   * @returns Renderer instance
+   */
+  getRenderer(type) {
+    return this.createRenderer(type);
+  }
+  /**
+   * Check if the renderer meets terminal capability requirements
+   * @param renderer - Renderer instance
+   * @param capabilities - Terminal capabilities
+   * @returns Whether requirements are met
+   */
+  isRendererSupported(renderer, capabilities) {
+    const metadata = renderer.getMetadata();
+    if (capabilities.score < metadata.minScore) {
+      return false;
+    }
+    if (metadata.requiresUtf8 && !capabilities.supportsUtf8) {
+      return false;
+    }
+    if (metadata.requiresUnicode && !capabilities.supportsUnicode) {
+      return false;
+    }
+    const rendererName = metadata.name;
+    if (rendererName === "braille" && !capabilities.supportsBraille) {
+      return false;
+    }
+    if (rendererName === "block" && !capabilities.supportsBlockElements) {
+      return false;
+    }
+    return true;
+  }
+  /**
+   * Automatically select the best renderer
+   *
+   * Try in the order of the priority chain, returning the first renderer that meets terminal capability requirements
+   * If none are satisfied, fallback to ASCII
+   *
+   * @param preferredChain - Priority chain (default: ['braille', 'block', 'ascii'])
+   * @returns Selected renderer instance
+   */
+  selectBest(preferredChain = ["braille", "block", "ascii"]) {
+    const capabilities = this.detector.detect();
+    for (const rendererType of preferredChain) {
+      const renderer = this.getRenderer(rendererType);
+      if (this.isRendererSupported(renderer, capabilities)) {
+        return renderer;
+      }
+    }
+    return this.getRenderer("ascii");
+  }
+  /**
+   * Get terminal capability information
+   * @returns Terminal capabilities
+   */
+  getTerminalCapabilities() {
+    return this.detector.detect();
+  }
+};
+var rendererSelector = new RendererSelector();
+var defaultSelector = new RendererSelector();
+var defaultContext = {
+  selector: defaultSelector,
+  getCapabilities: () => defaultSelector.getTerminalCapabilities(),
+  getRenderer: (type) => defaultSelector.getRenderer(type),
+  selectBest: (chain) => defaultSelector.selectBest(chain)
+};
+var InkHudContext = createContext(defaultContext);
+var InkHudProvider = ({
+  detector,
+  forceRenderer,
+  children
+}) => {
+  const value = useMemo(() => {
+    const selector = detector ? new RendererSelector(detector) : defaultSelector;
+    return {
+      selector,
+      getCapabilities: () => selector.getTerminalCapabilities(),
+      getRenderer: (type) => selector.getRenderer(type),
+      selectBest: (chain) => {
+        if (forceRenderer) {
+          return selector.getRenderer(forceRenderer);
+        }
+        return selector.selectBest(chain);
+      }
+    };
+  }, [detector, forceRenderer]);
+  return /* @__PURE__ */ React6.createElement(InkHudContext.Provider, { value }, children);
+};
+function useInkHud() {
+  return useContext(InkHudContext);
+}
+function useRendererSelector() {
+  return useInkHud().selector;
+}
+function createGradient(colors, steps) {
+  if (colors.length === 0) {
+    return Array(steps).fill((text) => text);
+  }
+  if (colors.length === 1) {
+    const color = colors[0];
+    if (color) {
+      const colorFn = (text) => chalk.hex(color)(text);
+      return Array(steps).fill(colorFn);
+    }
+    return Array(steps).fill((text) => text);
+  }
+  const gradient = tinygradient(colors);
+  const rgbColors = gradient.rgb(steps);
+  return rgbColors.map((color) => {
+    const hex = color.toHex();
+    return (text) => chalk.hex(hex)(text);
+  });
+}
+var ONE_DARK_PALETTES = {
+  /** One Dark - Classic theme */
+  standard: [
+    "#61afef",
+    // blue
+    "#98c379",
+    // green
+    "#e5c07b",
+    // yellow
+    "#c678dd",
+    // purple
+    "#e06c75",
+    // red
+    "#56b6c2",
+    // cyan
+    "#d19a66",
+    // orange
+    "#abb2bf"
+    // gray
+  ],
+  /** One Dark Vivid - More vibrant variant */
+  vivid: [
+    "#61afef",
+    // blue
+    "#98c379",
+    // green
+    "#e5c07b",
+    // yellow
+    "#c678dd",
+    // purple
+    "#e06c75",
+    // red
+    "#56b6c2",
+    // cyan
+    "#be5046",
+    // dark red
+    "#d19a66",
+    // orange
+    "#528bff"
+    // bright blue
+  ]
+};
+function assignColors(seriesCount, palette = "one-dark") {
+  if (seriesCount === 0) {
+    return [];
+  }
+  let baseColors;
+  if (Array.isArray(palette)) {
+    baseColors = palette;
+  } else {
+    switch (palette) {
+      case "one-dark-vivid":
+        baseColors = ONE_DARK_PALETTES.vivid;
+        break;
+      default:
+        baseColors = ONE_DARK_PALETTES.standard;
+        break;
+    }
+  }
+  if (seriesCount <= baseColors.length) {
+    return baseColors.slice(0, seriesCount);
+  }
+  const gradient = tinygradient(baseColors);
+  return gradient.rgb(seriesCount).map((c) => c.toHex());
+}
+function colorToChalk(color) {
+  if (color.startsWith("#")) {
+    return (text) => chalk.hex(color)(text);
+  }
+  if (typeof chalk[color] === "function") {
+    return (text) => chalk[color](text);
+  }
+  return (text) => text;
+}
+
+// src/theme/ThemeContext.tsx
+var ONE_DARK_THEME = {
+  name: "one-dark",
+  palette: ONE_DARK_PALETTES.standard,
+  semantic: {
+    success: "#98c379",
+    // green
+    error: "#e06c75",
+    // red
+    warning: "#e5c07b",
+    // yellow
+    info: "#61afef",
+    // blue
+    muted: "#5c6370",
+    // gray
+    text: "#abb2bf",
+    // light gray
+    textSecondary: "#5c6370"
+    // dark gray
+  },
+  heatmapGradient: [
+    "#282c34",
+    // background (dark)
+    "#56b6c2",
+    // cyan
+    "#98c379",
+    // green
+    "#e5c07b",
+    // yellow
+    "#61afef"
+    // blue (light)
+  ]
+};
+var ThemeContext = createContext(ONE_DARK_THEME);
+var ThemeProvider = ({ theme: customTheme, children }) => {
+  const mergedTheme = useMemo(() => {
+    if (!customTheme) {
+      return ONE_DARK_THEME;
+    }
+    return {
+      ...ONE_DARK_THEME,
+      ...customTheme,
+      semantic: {
+        ...ONE_DARK_THEME.semantic,
+        ...customTheme.semantic
+      }
+    };
+  }, [customTheme]);
+  return /* @__PURE__ */ React6.createElement(ThemeContext.Provider, { value: mergedTheme }, children);
+};
+function useTheme() {
+  return useContext(ThemeContext);
+}
+function useSemanticColors() {
+  const theme = useTheme();
+  return theme.semantic;
+}
+
+// src/utils/scale.ts
+function linearScale(value, domain, range) {
+  const [domainMin, domainMax] = domain;
+  const [rangeMin, rangeMax] = range;
+  if (domainMax === domainMin) {
+    return rangeMin;
+  }
+  const ratio = (value - domainMin) / (domainMax - domainMin);
+  return ratio * (rangeMax - rangeMin) + rangeMin;
+}
+function normalize(data) {
+  if (data.length === 0) {
+    return [];
+  }
+  const min = Math.min(...data);
+  const max = Math.max(...data);
+  if (max === min) {
+    return data.map(() => 0.5);
+  }
+  return data.map((value) => linearScale(value, [min, max], [0, 1]));
+}
+function scaleToRange(data, range) {
+  if (data.length === 0) {
+    return [];
+  }
+  const min = Math.min(...data);
+  const max = Math.max(...data);
+  if (max === min) {
+    const midPoint = (range[0] + range[1]) / 2;
+    return data.map(() => midPoint);
+  }
+  return data.map((value) => linearScale(value, [min, max], range));
+}
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+
+// src/utils/geometry.ts
+function midpointCircle(centerX, centerY, radius) {
+  const points = [];
+  let x = 0;
+  let y = radius;
+  let d = 1 - radius;
+  while (x <= y) {
+    points.push(
+      [centerX + x, centerY + y],
+      [centerX - x, centerY + y],
+      [centerX + x, centerY - y],
+      [centerX - x, centerY - y],
+      [centerX + y, centerY + x],
+      [centerX - y, centerY + x],
+      [centerX + y, centerY - x],
+      [centerX - y, centerY - x]
+    );
+    x++;
+    if (d < 0) {
+      d += 2 * x + 1;
+    } else {
+      y--;
+      d += 2 * (x - y) + 1;
+    }
+  }
+  return points;
+}
+function pointOnArc(centerX, centerY, radius, angle) {
+  const x = centerX + radius * Math.cos(angle);
+  const y = centerY + radius * Math.sin(angle);
+  return [x, y];
+}
+function arcPoints(centerX, centerY, radius, startAngle, endAngle, steps) {
+  const points = [];
+  let start = startAngle;
+  let end = endAngle;
+  if (start > end) {
+    [start, end] = [end, start];
+  }
+  const angleRange = end - start;
+  const stepCount = steps ?? Math.max(10, Math.ceil(radius * angleRange));
+  const angleStep = angleRange / stepCount;
+  for (let i = 0; i <= stepCount; i++) {
+    const angle = start + i * angleStep;
+    points.push(pointOnArc(centerX, centerY, radius, angle));
+  }
+  return points;
+}
+function degreesToRadians(degrees) {
+  return degrees * Math.PI / 180;
+}
+function radiansToDegrees(radians) {
+  return radians * 180 / Math.PI;
+}
+function distanceBetweenPoints(x1, y1, x2, y2) {
+  const dx = x2 - x1;
+  const dy = y2 - y1;
+  return Math.sqrt(dx * dx + dy * dy);
+}
+
+// src/utils/downsampling.ts
+function computeAveragePoint(data, startIndexInclusive, endIndexExclusive) {
+  const count = endIndexExclusive - startIndexInclusive;
+  if (count <= 0) {
+    return { x: 0, y: 0 };
+  }
+  let sumX = 0;
+  let sumY = 0;
+  for (let i = startIndexInclusive; i < endIndexExclusive; i++) {
+    sumX += i;
+    sumY += data[i] ?? 0;
+  }
+  return { x: sumX / count, y: sumY / count };
+}
+function triangleArea(prevX, prevY, avgX, avgY, pointX, pointY) {
+  return Math.abs((prevX - avgX) * (pointY - prevY) - (prevX - pointX) * (avgY - prevY));
+}
+function findLargestTrianglePointIndex(data, bucketStart, bucketEnd, prevX, prevY, avgX, avgY) {
+  let maxArea = -1;
+  let maxIdx = bucketStart;
+  for (let i = bucketStart; i < bucketEnd; i++) {
+    const area = triangleArea(prevX, prevY, avgX, avgY, i, data[i] ?? 0);
+    if (area > maxArea) {
+      maxArea = area;
+      maxIdx = i;
+    }
+  }
+  return maxIdx;
+}
+function lttb(data, threshold) {
+  if (data.length <= threshold) {
+    return data;
+  }
+  if (threshold <= 2) {
+    return [data[0] ?? 0, data[data.length - 1] ?? 0];
+  }
+  const sampled = [data[0] ?? 0];
+  let prevIndex = 0;
+  const bucketSize = (data.length - 2) / (threshold - 2);
+  for (let i = 0; i < threshold - 2; i++) {
+    const bucketStart = Math.floor(i * bucketSize) + 1;
+    const bucketEnd = Math.floor((i + 1) * bucketSize) + 1;
+    const nextBucketStart = bucketEnd;
+    const nextBucketEnd = Math.min(Math.floor((i + 2) * bucketSize) + 1, data.length);
+    const { x: avgX, y: avgY } = computeAveragePoint(data, nextBucketStart, nextBucketEnd);
+    const prevX = prevIndex;
+    const prevY = data[prevIndex] ?? 0;
+    const maxIdx = findLargestTrianglePointIndex(
+      data,
+      bucketStart,
+      bucketEnd,
+      prevX,
+      prevY,
+      avgX,
+      avgY
+    );
+    sampled.push(data[maxIdx] ?? 0);
+    prevIndex = maxIdx;
+  }
+  sampled.push(data[data.length - 1] ?? 0);
+  return sampled;
+}
+function fixedIntervalDownsampling(data, threshold) {
+  if (data.length <= threshold) {
+    return data;
+  }
+  const sampled = [];
+  const step = (data.length - 1) / (threshold - 1);
+  for (let i = 0; i < threshold; i++) {
+    const index = Math.round(i * step);
+    sampled.push(data[index] ?? 0);
+  }
+  return sampled;
+}
+function averageDownsampling(data, threshold) {
+  if (data.length <= threshold) {
+    return data;
+  }
+  const sampled = [];
+  const bucketSize = data.length / threshold;
+  for (let i = 0; i < threshold; i++) {
+    const bucketStart = Math.floor(i * bucketSize);
+    const bucketEnd = Math.floor((i + 1) * bucketSize);
+    let sum = 0;
+    let count = 0;
+    for (let j = bucketStart; j < bucketEnd; j++) {
+      sum += data[j] ?? 0;
+      count++;
+    }
+    sampled.push(count > 0 ? sum / count : 0);
+  }
+  return sampled;
+}
+function minMaxDownsampling(data, threshold) {
+  if (data.length <= threshold) {
+    return data;
+  }
+  const sampled = [];
+  const bucketSize = data.length / threshold;
+  for (let i = 0; i < threshold; i++) {
+    const bucketStart = Math.floor(i * bucketSize);
+    const bucketEnd = Math.floor((i + 1) * bucketSize);
+    let min = Number.POSITIVE_INFINITY;
+    let max = Number.NEGATIVE_INFINITY;
+    for (let j = bucketStart; j < bucketEnd; j++) {
+      const value = data[j] ?? 0;
+      if (value < min) min = value;
+      if (value > max) max = value;
+    }
+    sampled.push(min, max);
+  }
+  return sampled;
+}
+function easeInOutQuad(t) {
+  return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
+}
+function easeLinear(t) {
+  return t;
+}
+function easeOutCubic(t) {
+  const t1 = t - 1;
+  return t1 * t1 * t1 + 1;
+}
+function easeInCubic(t) {
+  return t * t * t;
+}
+function useSmooth(targetValue, duration = 300, easingFn = easeInOutQuad) {
+  const [currentValue, setCurrentValue] = useState(targetValue);
+  const startValueRef = useRef(targetValue);
+  const startTimeRef = useRef(null);
+  const timerRef = useRef(null);
+  useEffect(() => {
+    if (targetValue === currentValue) {
+      return;
+    }
+    startValueRef.current = currentValue;
+    startTimeRef.current = Date.now();
+    const frameInterval = 1e3 / 30;
+    const animate = () => {
+      const now = Date.now();
+      const elapsed = now - (startTimeRef.current ?? now);
+      const progress = Math.min(elapsed / duration, 1);
+      const easedProgress = easingFn(progress);
+      const newValue = startValueRef.current + (targetValue - startValueRef.current) * easedProgress;
+      setCurrentValue(newValue);
+      if (progress < 1) {
+        timerRef.current = setTimeout(animate, frameInterval);
+      }
+    };
+    timerRef.current = setTimeout(animate, frameInterval);
+    return () => {
+      if (timerRef.current !== null) {
+        clearTimeout(timerRef.current);
+      }
+    };
+  }, [targetValue, duration, easingFn, currentValue]);
+  return currentValue;
+}
+function useSmoothArray(targetData, duration = 300, easingFn = easeInOutQuad) {
+  const [currentData, setCurrentData] = useState(targetData);
+  const startDataRef = useRef(targetData);
+  const startTimeRef = useRef(null);
+  const timerRef = useRef(null);
+  useEffect(() => {
+    if (targetData.length !== currentData.length) {
+      setCurrentData(targetData);
+      return;
+    }
+    const hasChanged = targetData.some((value, i) => value !== currentData[i]);
+    if (!hasChanged) {
+      return;
+    }
+    startDataRef.current = currentData;
+    startTimeRef.current = Date.now();
+    const frameInterval = 1e3 / 30;
+    const animate = () => {
+      const now = Date.now();
+      const elapsed = now - (startTimeRef.current ?? now);
+      const progress = Math.min(elapsed / duration, 1);
+      const easedProgress = easingFn(progress);
+      const newData = targetData.map((target, i) => {
+        const start = startDataRef.current[i] ?? 0;
+        return start + (target - start) * easedProgress;
+      });
+      setCurrentData(newData);
+      if (progress < 1) {
+        timerRef.current = setTimeout(animate, frameInterval);
+      }
+    };
+    timerRef.current = setTimeout(animate, frameInterval);
+    return () => {
+      if (timerRef.current !== null) {
+        clearTimeout(timerRef.current);
+      }
+    };
+  }, [targetData, duration, easingFn, currentData]);
+  return currentData;
+}
+function useThrottle(value, fps = 30) {
+  const [throttledValue, setThrottledValue] = useState(value);
+  const lastUpdateRef = useRef(Date.now());
+  useEffect(() => {
+    const now = Date.now();
+    const interval = 1e3 / fps;
+    const elapsed = now - lastUpdateRef.current;
+    if (elapsed >= interval) {
+      setThrottledValue(value);
+      lastUpdateRef.current = now;
+      return;
+    }
+    const timeoutId = setTimeout(() => {
+      setThrottledValue(value);
+      lastUpdateRef.current = Date.now();
+    }, interval - elapsed);
+    return () => clearTimeout(timeoutId);
+  }, [value, fps]);
+  return throttledValue;
+}
+var GridContext = createContext({
+  columns: 12,
+  gap: 0,
+  totalWidth: 80
+  // Fallback
+});
+var GridItemContext = createContext(null);
+var Grid = ({
+  columns = 12,
+  gap = 0,
+  width: propsWidth,
+  widthOffset = 0,
+  rowHeight,
+  children
+}) => {
+  const { stdout } = useStdout();
+  const [terminalWidth, setTerminalWidth] = useState(stdout ? stdout.columns : 80);
+  useEffect(() => {
+    if (!stdout) return;
+    const onResize = () => setTerminalWidth(stdout.columns);
+    stdout.on("resize", onResize);
+    return () => {
+      stdout.off("resize", onResize);
+    };
+  }, [stdout]);
+  const defaultWidth = terminalWidth > 2 ? terminalWidth - 2 : terminalWidth;
+  const totalWidth = propsWidth ?? Math.max(0, defaultWidth - widthOffset);
+  return /* @__PURE__ */ React6.createElement(GridContext.Provider, { value: { columns, gap, totalWidth, rowHeight } }, /* @__PURE__ */ React6.createElement(
+    Box,
+    {
+      flexDirection: "row",
+      flexWrap: "wrap",
+      columnGap: gap,
+      rowGap: gap,
+      width: totalWidth
+    },
+    children
+  ));
+};
+var GridItem = ({
+  span = 1,
+  height,
+  minHeight,
+  overflow,
+  children
+}) => {
+  const { columns, gap, totalWidth, rowHeight: contextRowHeight } = useContext(GridContext);
+  const totalGapWidth = Math.max(0, (columns - 1) * gap);
+  const availableWidth = Math.max(0, totalWidth - totalGapWidth);
+  const colWidth = availableWidth / columns;
+  const itemGapWidth = Math.max(0, (span - 1) * gap);
+  const basisWidth = Math.floor(colWidth * span + itemGapWidth);
+  const effectiveHeight = height ?? contextRowHeight;
+  return /* @__PURE__ */ React6.createElement(GridItemContext.Provider, { value: { width: basisWidth, height: effectiveHeight } }, /* @__PURE__ */ React6.createElement(
+    Box,
+    {
+      flexGrow: 1,
+      flexShrink: 1,
+      flexBasis: basisWidth,
+      flexDirection: "column",
+      ...effectiveHeight !== void 0 && { height: effectiveHeight },
+      ...minHeight !== void 0 && { minHeight },
+      ...overflow !== void 0 && { overflow }
+    },
+    children
+  ));
+};
+
+// src/components/common/chartUtils.ts
+function resolveSeriesColors(series, colors, palette) {
+  if (series.length === 0) {
+    return [];
+  }
+  if (colors && colors.length >= series.length) {
+    return colors.slice(0, series.length);
+  }
+  if (colors && colors.length > 0) {
+    return assignColors(series.length, colors);
+  }
+  return assignColors(series.length, palette);
+}
+function useChartLayout(props, config) {
+  const {
+    minWidth = 10,
+    widthOffset = 0,
+    heightOffset = 0,
+    showXAxis = true,
+    showYAxis = true,
+    showLegend = true,
+    legendPosition = "right",
+    xAxisLabel,
+    yTickCount = 5,
+    yTickFormat,
+    defaultWidth = 60,
+    min,
+    max
+  } = config;
+  const gridContext = useContext(GridItemContext);
+  const totalHeight = props.height ?? (typeof gridContext?.height === "number" ? gridContext.height : 15);
+  let totalWidth = props.width;
+  if (totalWidth === void 0) {
+    if (gridContext?.width) {
+      totalWidth = Math.max(minWidth, gridContext.width - widthOffset);
+    } else {
+      totalWidth = defaultWidth;
+    }
+  }
+  const yAxisWidth = showYAxis ? getYAxisLabelWidth({
+    min,
+    max,
+    tickCount: yTickCount,
+    tickFormat: yTickFormat ?? defaultTickFormat
+  }) : 0;
+  const effectiveXAxisHeight = showXAxis ? 1 + (xAxisLabel ? 1 : 0) : 0;
+  let legendWidth = 0;
+  let legendHeight = 0;
+  if (showLegend) {
+    if (legendPosition === "right") {
+      legendWidth = 20;
+    } else {
+      legendHeight = 2;
+    }
+  }
+  const yAxisSpacing = showYAxis ? 1 : 0;
+  const legendSpacing = showLegend && legendPosition === "right" ? 2 : 0;
+  const plotWidth = Math.max(
+    1,
+    totalWidth - yAxisWidth - yAxisSpacing - legendWidth - legendSpacing
+  );
+  const plotHeight = Math.max(
+    1,
+    totalHeight - heightOffset - legendHeight - effectiveXAxisHeight
+  );
+  return {
+    totalWidth,
+    totalHeight,
+    plotWidth,
+    plotHeight,
+    yAxisWidth,
+    legendHeight,
+    legendWidth,
+    xAxisHeight: effectiveXAxisHeight
+  };
+}
+function useChartLayoutSimple(props, min, max) {
+  const {
+    width: propsWidth,
+    height: propsHeight,
+    showAxis = true,
+    showXAxis,
+    showYAxis,
+    showLegend = true,
+    legendPosition = "right",
+    xAxisLabel,
+    yAxisLabel,
+    yTickCount = 5,
+    yTickFormat,
+    widthOffset = 0,
+    heightOffset = 0
+  } = props;
+  const renderXAxis = showXAxis ?? showAxis;
+  const renderYAxis = showYAxis ?? showAxis;
+  return useChartLayout(
+    {
+      ...propsWidth !== void 0 && { width: propsWidth },
+      ...propsHeight !== void 0 && { height: propsHeight }
+    },
+    {
+      widthOffset,
+      heightOffset,
+      showXAxis: renderXAxis,
+      showYAxis: renderYAxis,
+      showLegend,
+      legendPosition,
+      ...xAxisLabel && { xAxisLabel },
+      ...yAxisLabel && { yAxisLabel },
+      yTickCount,
+      ...yTickFormat && { yTickFormat },
+      min,
+      max
+    }
+  );
+}
+function buildSeriesInputParams(series, data, seriesName) {
+  const params = {};
+  if (series !== void 0) {
+    params.series = series;
+  }
+  if (data !== void 0) {
+    params.data = data;
+  }
+  if (seriesName !== void 0) {
+    params.seriesName = seriesName;
+  }
+  return params;
+}
+function resolveSeriesInput(params) {
+  const { series, data, seriesName } = params;
+  if (series && series.length > 0) {
+    return series;
+  }
+  if (data && data.length > 0) {
+    return [
+      {
+        name: seriesName ?? "Series",
+        data
+      }
+    ];
+  }
+  return [];
+}
+function computeSeriesExtent(series) {
+  let min = 0;
+  let max = 0;
+  let maxLength = 0;
+  let hasValue = false;
+  for (const item of series) {
+    maxLength = Math.max(maxLength, item.data.length);
+    for (const value of item.data) {
+      if (!hasValue) {
+        min = value;
+        max = value;
+        hasValue = true;
+        continue;
+      }
+      min = Math.min(min, value);
+      max = Math.max(max, value);
+    }
+  }
+  if (!hasValue) {
+    return { min: 0, max: 0, maxLength };
+  }
+  return { min, max, maxLength };
+}
+function getPixelDimensions(renderer, width, height) {
+  const resolution = renderer.getResolution();
+  return {
+    pixelWidth: width * resolution.horizontal,
+    pixelHeight: height * resolution.vertical
+  };
+}
+function defaultTickFormat(value) {
+  const absValue = Math.abs(value);
+  const sign = value < 0 ? "-" : "";
+  if (absValue >= 1e9) {
+    const v = absValue / 1e9;
+    return `${sign}${Number.isInteger(v) ? v : v.toFixed(1)}b`;
+  }
+  if (absValue >= 1e6) {
+    const v = absValue / 1e6;
+    return `${sign}${Number.isInteger(v) ? v : v.toFixed(1)}m`;
+  }
+  if (absValue >= 1e3) {
+    const v = absValue / 1e3;
+    return `${sign}${Number.isInteger(v) ? v : v.toFixed(1)}k`;
+  }
+  return Math.round(value).toString();
+}
+function getYAxisLabelWidth(params) {
+  const { min, max, tickCount, tickFormat = defaultTickFormat } = params;
+  if (tickCount <= 0) {
+    return 0;
+  }
+  if (max === min) {
+    return tickFormat(min).length;
+  }
+  const step = (max - min) / (tickCount - 1);
+  let maxLength = 0;
+  for (let i = 0; i < tickCount; i++) {
+    const value = min + i * step;
+    maxLength = Math.max(maxLength, tickFormat(value).length);
+  }
+  return maxLength;
+}
+function computeBaselineY(params) {
+  const { min, max, pixelHeight } = params;
+  if (max === min) {
+    return Math.round((pixelHeight - 1) / 2);
+  }
+  const baselineValue = min <= 0 && max >= 0 ? 0 : min > 0 ? min : max;
+  return Math.round(linearScale(baselineValue, [min, max], [pixelHeight - 1, 0]));
+}
+
+// src/components/common/Axis.tsx
+var Axis = ({
+  type,
+  min,
+  max,
+  tickCount = 5,
+  tickFormat = defaultTickFormat,
+  label,
+  length,
+  color = "gray",
+  showGrid: _showGrid = false,
+  integerScale = false
+}) => {
+  const ticks = useMemo(() => {
+    if (tickCount <= 0) {
+      return [];
+    }
+    if (max === min) {
+      return [{ value: min, position: 0 }];
+    }
+    let effectiveTickCount = tickCount;
+    let step = (max - min) / (tickCount - 1);
+    if (integerScale) {
+      const range = max - min;
+      if (range < tickCount - 1) {
+        effectiveTickCount = range + 1;
+        step = 1;
+      }
+    }
+    return Array.from({ length: effectiveTickCount }, (_, i) => {
+      let value = min + i * step;
+      if (integerScale) {
+        value = Math.round(value);
+      }
+      const position = (value - min) / (max - min) * length;
+      return { value, position };
+    });
+  }, [min, max, tickCount, length, integerScale]);
+  if (type === "x") {
+    const xConfig = (() => {
+      let previousEnd = 0;
+      const elements = [];
+      ticks.forEach((tick, i) => {
+        const tickLabel = tickFormat(tick.value);
+        const labelWidth = tickLabel.length;
+        const intendedStart = Math.floor(tick.position - labelWidth / 2);
+        const actualStart = Math.max(previousEnd, intendedStart);
+        const spaces = Math.max(0, actualStart - previousEnd);
+        if (spaces > 0) {
+          elements.push(/* @__PURE__ */ React6.createElement(Text, { key: `space-${i}` }, " ".repeat(spaces)));
+        }
+        elements.push(
+          /* @__PURE__ */ React6.createElement(Text, { key: `tick-${i}`, color, wrap: "truncate" }, tickLabel)
+        );
+        previousEnd = actualStart + labelWidth;
+      });
+      return elements;
+    })();
+    return /* @__PURE__ */ React6.createElement(Box, { flexDirection: "column" }, /* @__PURE__ */ React6.createElement(Box, { flexDirection: "row" }, xConfig), label && /* @__PURE__ */ React6.createElement(Box, { justifyContent: "center", marginTop: 0 }, /* @__PURE__ */ React6.createElement(Text, { color, dimColor: true }, label)));
+  }
+  return /* @__PURE__ */ React6.createElement(
+    Box,
+    {
+      flexDirection: "column",
+      alignItems: "flex-end",
+      height: length,
+      justifyContent: "space-between"
+    },
+    ticks.slice().reverse().map((tick, i) => /* @__PURE__ */ React6.createElement(Box, { key: `tick-${i}` }, /* @__PURE__ */ React6.createElement(Text, { color, wrap: "truncate" }, tickFormat(tick.value))))
+  );
+};
+var Legend = ({
+  items,
+  position = "horizontal",
+  color,
+  gap = 2
+}) => {
+  if (items.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ React6.createElement(Box, { flexDirection: position === "horizontal" ? "row" : "column", gap }, items.map((item, i) => /* @__PURE__ */ React6.createElement(Box, { key: `legend-${i}`, gap: 1 }, /* @__PURE__ */ React6.createElement(Text, { color: color ?? item.color }, item.symbol || "\u25CF"), /* @__PURE__ */ React6.createElement(Text, { ...color && { color } }, item.name))));
+};
+
+// src/components/common/ChartContainer.tsx
+var ChartContainer = ({
+  layout,
+  showXAxis = true,
+  showYAxis = true,
+  xAxisConfig,
+  yAxisConfig,
+  showLegend = true,
+  legendPosition = "right",
+  legendItems = [],
+  children
+}) => {
+  const { totalWidth, plotWidth, plotHeight, yAxisWidth } = layout;
+  return /* @__PURE__ */ React6.createElement(Box, { flexDirection: "column", width: totalWidth }, showLegend && legendPosition === "top" && /* @__PURE__ */ React6.createElement(Box, { marginBottom: 1, marginLeft: showYAxis ? yAxisWidth + 1 : 0 }, /* @__PURE__ */ React6.createElement(Legend, { items: legendItems, position: "horizontal" })), /* @__PURE__ */ React6.createElement(Box, { flexDirection: "row" }, showYAxis && yAxisConfig && /* @__PURE__ */ React6.createElement(Box, { marginRight: 1, width: yAxisWidth }, /* @__PURE__ */ React6.createElement(Axis, { type: "y", length: plotHeight, ...yAxisConfig })), /* @__PURE__ */ React6.createElement(Box, { flexDirection: "column" }, children), showLegend && legendPosition === "right" && /* @__PURE__ */ React6.createElement(Box, { marginLeft: 2 }, /* @__PURE__ */ React6.createElement(Legend, { items: legendItems, position: "vertical" }))), showXAxis && xAxisConfig && /* @__PURE__ */ React6.createElement(Box, { marginLeft: showYAxis ? yAxisWidth + 1 : 0 }, /* @__PURE__ */ React6.createElement(Axis, { type: "x", length: plotWidth, ...xAxisConfig })), showLegend && legendPosition === "bottom" && /* @__PURE__ */ React6.createElement(Box, { marginTop: 1, marginLeft: showYAxis ? yAxisWidth + 1 : 0 }, /* @__PURE__ */ React6.createElement(Legend, { items: legendItems, position: "horizontal" })));
+};
+function useChartCore(props) {
+  const { series: seriesProp, data, seriesName, colors: colorsProp, colorPalette } = props;
+  const series = useMemo(
+    () => resolveSeriesInput(buildSeriesInputParams(seriesProp, data, seriesName)),
+    [seriesProp, data, seriesName]
+  );
+  const { min, max, maxLength } = useMemo(() => computeSeriesExtent(series), [series]);
+  const colors = useMemo(
+    () => resolveSeriesColors(series, colorsProp, colorPalette),
+    [series, colorsProp, colorPalette]
+  );
+  const legendItems = useMemo(
+    () => series.map((item, i) => ({
+      name: item.name,
+      color: item.color ?? colors[i] ?? "cyan",
+      symbol: "\u25CF"
+    })),
+    [series, colors]
+  );
+  return {
+    series,
+    min,
+    max,
+    maxLength,
+    colors,
+    legendItems
+  };
+}
+var DEFAULT_RENDERER_CHAIN = ["braille", "block", "ascii"];
+var BAR_CHART_RENDERER_CHAIN = ["block", "braille", "ascii"];
+function useChartRenderer(props, defaultChain = DEFAULT_RENDERER_CHAIN) {
+  const { getRenderer, selectBest } = useInkHud();
+  const { renderer: preferredRenderer, rendererChain = defaultChain } = props;
+  return useMemo(() => {
+    if (preferredRenderer) {
+      return getRenderer(preferredRenderer);
+    }
+    return selectBest(rendererChain);
+  }, [preferredRenderer, rendererChain, getRenderer, selectBest]);
+}
+
+// src/components/LineChart.tsx
+var LineChart = (props) => {
+  const {
+    showLegend = true,
+    showAxis = true,
+    showXAxis,
+    showYAxis,
+    legendPosition = "right",
+    xAxisLabel,
+    yAxisLabel,
+    xTickCount = 5,
+    yTickCount = 5,
+    xTickFormat,
+    yTickFormat,
+    rendererChain = DEFAULT_RENDERER_CHAIN,
+    xIntegerScale = true,
+    yIntegerScale = false
+  } = props;
+  const renderXAxis = showXAxis ?? showAxis;
+  const renderYAxis = showYAxis ?? showAxis;
+  const { series, min, max, maxLength, colors, legendItems } = useChartCore(props);
+  const renderer = useChartRenderer(props, rendererChain);
+  const layout = useChartLayoutSimple(props, min, max);
+  const { plotWidth: canvasWidth, plotHeight: canvasHeight } = layout;
+  const coloredLines = useMemo(
+    () => renderLineChartCanvas({
+      renderer,
+      series,
+      canvasWidth,
+      canvasHeight,
+      min,
+      max,
+      colors
+    }),
+    [renderer, series, canvasWidth, canvasHeight, min, max, colors]
+  );
+  if (coloredLines.length === 0) {
+    return null;
+  }
+  const yAxisConfig = {
+    min,
+    max,
+    tickCount: yTickCount,
+    tickFormat: yTickFormat ?? defaultTickFormat,
+    ...yIntegerScale !== void 0 && { integerScale: yIntegerScale },
+    ...yAxisLabel ? { label: yAxisLabel } : {}
+  };
+  const xAxisConfig = {
+    min: 0,
+    max: Math.max(0, maxLength - 1),
+    tickCount: xTickCount,
+    tickFormat: xTickFormat ?? defaultTickFormat,
+    ...xIntegerScale !== void 0 && { integerScale: xIntegerScale },
+    ...xAxisLabel ? { label: xAxisLabel } : {}
+  };
+  return /* @__PURE__ */ React6.createElement(
+    ChartContainer,
+    {
+      layout,
+      showLegend,
+      legendPosition,
+      legendItems,
+      showXAxis: renderXAxis,
+      showYAxis: renderYAxis,
+      xAxisConfig,
+      yAxisConfig
+    },
+    coloredLines.map((line, i) => /* @__PURE__ */ React6.createElement(Text, { key: i }, line.map((seg, j) => /* @__PURE__ */ React6.createElement(
+      Text,
+      {
+        key: j,
+        ...seg.color ? { color: seg.color } : {},
+        ...seg.backgroundColor ? { backgroundColor: seg.backgroundColor } : {}
+      },
+      seg.text
+    ))))
+  );
+};
+function renderLineChartCanvas({
+  renderer,
+  series,
+  canvasWidth,
+  canvasHeight,
+  min,
+  max,
+  colors
+}) {
+  const { pixelWidth, pixelHeight } = getPixelDimensions(renderer, canvasWidth, canvasHeight);
+  if (pixelWidth <= 0 || pixelHeight <= 0 || series.length === 0) {
+    return [];
+  }
+  const canvas = renderer.createCanvas(pixelWidth, pixelHeight);
+  for (let si = 0; si < series.length; si++) {
+    const s = series[si];
+    if (!s) continue;
+    const { data } = s;
+    const color = s.color ?? colors[si] ?? "cyan";
+    if (data.length === 0) continue;
+    const xScale = data.length > 1 ? (pixelWidth - 1) / (data.length - 1) : 0;
+    const scaleY = (value) => {
+      if (max === min) {
+        return Math.round((pixelHeight - 1) / 2);
+      }
+      return Math.round(linearScale(value, [min, max], [pixelHeight - 1, 0]));
+    };
+    for (let i = 0; i < data.length - 1; i++) {
+      const currVal = data[i];
+      const nextVal = data[i + 1];
+      if (currVal === void 0 || nextVal === void 0) continue;
+      const x0 = Math.round(i * xScale);
+      const y0 = scaleY(currVal);
+      const x1 = Math.round((i + 1) * xScale);
+      const y1 = scaleY(nextVal);
+      renderer.drawLine(canvas, x0, y0, x1, y1, { active: true, color });
+    }
+    if (data.length === 1) {
+      const val = data[0];
+      if (val !== void 0) {
+        const x = Math.round(pixelWidth / 2);
+        const y = scaleY(val);
+        renderer.setPixel(canvas, x, y, { active: true, color });
+      }
+    }
+  }
+  return renderer.renderCanvas(canvas, pixelWidth, pixelHeight);
+}
+function fillVerticalLine(renderer, canvas, x, y1, y2, color) {
+  const fillStart = Math.min(y1, y2);
+  const fillEnd = Math.max(y1, y2);
+  for (let fy = fillStart; fy <= fillEnd; fy++) {
+    renderer.setPixel(canvas, x, fy, {
+      active: true,
+      ...color ? { color } : {}
+    });
+  }
+}
+function renderAreaChartCanvas(params) {
+  const { renderer, series, canvasWidth, canvasHeight, min, max, maxLength, colors } = params;
+  if (series.length === 0 || maxLength === 0) {
+    return [];
+  }
+  const { pixelWidth, pixelHeight } = getPixelDimensions(renderer, canvasWidth, canvasHeight);
+  const canvas = renderer.createCanvas(pixelWidth, pixelHeight);
+  const baselineY = computeBaselineY({ min, max, pixelHeight });
+  const xStep = maxLength > 1 ? (pixelWidth - 1) / (maxLength - 1) : 0;
+  const scaleValue = (value) => {
+    if (max === min) {
+      return Math.round((pixelHeight - 1) / 2);
+    }
+    return Math.round(linearScale(value, [min, max], [pixelHeight - 1, 0]));
+  };
+  const sortedData = series.map((s, i) => {
+    const maxVal = Math.max(...s.data);
+    return { series: s, color: colors[i], maxVal };
+  }).sort((a, b) => b.maxVal - a.maxVal);
+  for (const { series: item, color } of sortedData) {
+    let prevPoint = null;
+    for (let idx = 0; idx < item.data.length; idx++) {
+      const value = item.data[idx];
+      if (value === void 0) continue;
+      const point = { x: Math.round(idx * xStep), y: scaleValue(value) };
+      if (prevPoint) {
+        const startX = Math.min(prevPoint.x, point.x);
+        const endX = Math.max(prevPoint.x, point.x);
+        for (let px = startX; px <= endX; px++) {
+          const t = endX === startX ? 0 : (px - prevPoint.x) / (point.x - prevPoint.x);
+          const py = Math.floor(prevPoint.y + (point.y - prevPoint.y) * t);
+          fillVerticalLine(renderer, canvas, px, py, baselineY, color);
+        }
+        renderer.drawLine(canvas, prevPoint.x, prevPoint.y, point.x, point.y, {
+          active: true,
+          ...color ? { color } : {}
+        });
+      } else {
+        fillVerticalLine(renderer, canvas, point.x, point.y, baselineY, color);
+      }
+      prevPoint = point;
+    }
+  }
+  return renderer.renderCanvas(canvas, pixelWidth, pixelHeight);
+}
+var AreaChart = (props) => {
+  const {
+    showLegend = true,
+    showAxis = true,
+    showXAxis,
+    showYAxis,
+    legendPosition = "right",
+    xAxisLabel,
+    yAxisLabel,
+    xTickCount = 5,
+    yTickCount = 5,
+    xTickFormat,
+    yTickFormat,
+    rendererChain = DEFAULT_RENDERER_CHAIN,
+    xIntegerScale = true,
+    yIntegerScale = false
+  } = props;
+  const renderXAxis = showXAxis ?? showAxis;
+  const renderYAxis = showYAxis ?? showAxis;
+  const { series, min, max, maxLength, colors, legendItems } = useChartCore(props);
+  const renderer = useChartRenderer(props, rendererChain);
+  const layout = useChartLayoutSimple(props, min, max);
+  const { plotWidth: canvasWidth, plotHeight: canvasHeight } = layout;
+  const coloredLines = useMemo(
+    () => renderAreaChartCanvas({
+      renderer,
+      series,
+      canvasWidth,
+      canvasHeight,
+      min,
+      max,
+      maxLength,
+      colors
+    }),
+    [renderer, series, canvasWidth, canvasHeight, min, max, maxLength, colors]
+  );
+  if (coloredLines.length === 0) {
+    return null;
+  }
+  const yAxisConfig = {
+    min,
+    max,
+    tickCount: yTickCount,
+    tickFormat: yTickFormat ?? defaultTickFormat,
+    ...yIntegerScale !== void 0 && { integerScale: yIntegerScale },
+    ...yAxisLabel ? { label: yAxisLabel } : {}
+  };
+  const xAxisConfig = {
+    min: 0,
+    max: Math.max(0, maxLength - 1),
+    tickCount: xTickCount,
+    tickFormat: xTickFormat ?? defaultTickFormat,
+    ...xIntegerScale !== void 0 && { integerScale: xIntegerScale },
+    ...xAxisLabel ? { label: xAxisLabel } : {}
+  };
+  return /* @__PURE__ */ React6.createElement(
+    ChartContainer,
+    {
+      layout,
+      showXAxis: renderXAxis,
+      showYAxis: renderYAxis,
+      xAxisConfig,
+      yAxisConfig,
+      showLegend,
+      legendPosition,
+      legendItems
+    },
+    coloredLines.map((segments, i) => /* @__PURE__ */ React6.createElement(Text, { key: `chart-line-${i}` }, segments.map(
+      (segment, j) => segment.color ? /* @__PURE__ */ React6.createElement(Text, { key: `seg-${i}-${j}`, color: segment.color }, segment.text) : /* @__PURE__ */ React6.createElement(Text, { key: `seg-${i}-${j}` }, segment.text)
+    )))
+  );
+};
+var alignDown = (val, alignment) => Math.floor(val / alignment) * alignment;
+function computeVerticalLayout(params) {
+  const { pixelWidth, categoryCount, seriesCount, alignment } = params;
+  const maxGroupWidth = alignDown(
+    Math.max(alignment, Math.floor(pixelWidth / Math.max(1, categoryCount))),
+    alignment
+  );
+  const groupWidth = maxGroupWidth;
+  const calculateForPadding = (p) => {
+    const available = groupWidth - p * 2;
+    const minNeed = seriesCount * alignment;
+    if (available < minNeed) return null;
+    const gap = available >= seriesCount * alignment + (seriesCount - 1) * alignment ? alignment : 0;
+    const totalGap = gap * (seriesCount - 1);
+    const remaining = available - totalGap;
+    let barWidth = Math.floor(remaining / seriesCount);
+    barWidth = alignDown(barWidth, alignment);
+    if (barWidth < alignment) return null;
+    return { groupWidth, barWidth, barGap: gap, groupPadding: p };
+  };
+  const paddingStandard = alignment;
+  const layoutStandard = calculateForPadding(paddingStandard);
+  const layoutCompact = calculateForPadding(0);
+  if (!layoutStandard) {
+    return layoutCompact ?? { groupWidth, barWidth: alignment, barGap: 0, groupPadding: 0 };
+  }
+  if (!layoutCompact) {
+    return layoutStandard;
+  }
+  if (layoutCompact.barWidth > layoutStandard.barWidth) {
+    return layoutCompact;
+  }
+  return layoutStandard;
+}
+function computeHorizontalLayout(params) {
+  const { pixelHeight, categoryCount, seriesCount, alignment } = params;
+  const maxGroupHeight = alignDown(
+    Math.max(alignment, Math.floor(pixelHeight / Math.max(1, categoryCount))),
+    alignment
+  );
+  if (alignment >= 4) {
+    const stackHeight = seriesCount * alignment;
+    const groupHeight = Math.max(alignment, stackHeight);
+    return {
+      groupHeight,
+      // Strictly tight
+      barHeight: alignment,
+      // Min thickness (1 block char)
+      barGap: 0,
+      // No gaps
+      groupPadding: 0
+      // No padding
+    };
+  }
+  const padding = alignment;
+  const available = maxGroupHeight - padding * 2;
+  if (available > seriesCount * alignment * 1.5) {
+    const gap = alignment;
+    const barHeight = alignDown(
+      Math.floor((available - gap * (seriesCount - 1)) / seriesCount),
+      alignment
+    );
+    return { groupHeight: maxGroupHeight, barHeight, barGap: gap, groupPadding: padding };
+  }
+  const availableCompact = maxGroupHeight;
+  const barHeightCompact = alignDown(Math.floor(availableCompact / seriesCount), alignment);
+  return { groupHeight: maxGroupHeight, barHeight: barHeightCompact, barGap: 0, groupPadding: 0 };
+}
+function renderVertical(params) {
+  const { renderer, series, width, height, min, max, maxLength, colors } = params;
+  const { pixelWidth, pixelHeight } = getPixelDimensions(renderer, width, height);
+  const canvas = renderer.createCanvas(pixelWidth, pixelHeight);
+  const resolution = renderer.getResolution();
+  const alignment = resolution.horizontal;
+  const { groupWidth, barWidth, barGap, groupPadding } = computeVerticalLayout({
+    pixelWidth,
+    categoryCount: maxLength,
+    seriesCount: series.length,
+    alignment
+  });
+  const baselineY = computeBaselineY({ min, max, pixelHeight });
+  const scaleValue = (val) => {
+    if (max === min) return Math.round((pixelHeight - 1) / 2);
+    return Math.round(linearScale(val, [min, max], [pixelHeight - 1, 0]));
+  };
+  for (let i = 0; i < maxLength; i++) {
+    const groupLeft = i * groupWidth + groupPadding;
+    for (let j = 0; j < series.length; j++) {
+      const val = series[j]?.data[i] ?? 0;
+      const yVal = scaleValue(val);
+      const x = groupLeft + j * (barWidth + barGap);
+      const xEnd = Math.min(pixelWidth - 1, x + barWidth - 1);
+      const yStart = Math.min(yVal, baselineY);
+      const yEnd = Math.max(yVal, baselineY);
+      const color = colors[j];
+      for (let yy = yStart; yy <= yEnd; yy++) {
+        for (let xx = x; xx <= xEnd; xx++) {
+          renderer.setPixel(canvas, xx, yy, {
+            active: true,
+            ...color ? { color } : {}
+          });
+        }
+      }
+    }
+  }
+  return renderer.renderCanvas(canvas, pixelWidth, pixelHeight);
+}
+function renderHorizontal(params) {
+  const { renderer, series, width, height, min, max, maxLength, colors } = params;
+  const resolution = renderer.getResolution();
+  const pixelWidth = width * resolution.horizontal;
+  const pixelHeight = height * resolution.vertical;
+  const canvas = renderer.createCanvas(pixelWidth, pixelHeight);
+  const alignment = resolution.vertical;
+  const { groupHeight, barHeight, barGap, groupPadding } = computeHorizontalLayout({
+    pixelHeight,
+    categoryCount: maxLength,
+    seriesCount: series.length,
+    alignment
+  });
+  const scaleValue = (val) => {
+    if (max === min) return Math.round((pixelWidth - 1) / 2);
+    return Math.round(linearScale(val, [min, max], [0, pixelWidth - 1]));
+  };
+  let baselineVal = 0;
+  if (min > 0) baselineVal = min;
+  else if (max < 0) baselineVal = max;
+  const baselineX = scaleValue(baselineVal);
+  for (let i = 0; i < maxLength; i++) {
+    const groupTop = i * groupHeight + groupPadding;
+    for (let j = 0; j < series.length; j++) {
+      const val = series[j]?.data[i] ?? 0;
+      const xVal = scaleValue(val);
+      const y = groupTop + j * (barHeight + barGap);
+      const yEnd = Math.min(pixelHeight - 1, y + barHeight - 1);
+      if (y >= pixelHeight) continue;
+      const xStart = Math.min(xVal, baselineX);
+      const xEndFill = Math.max(xVal, baselineX);
+      const color = colors[j];
+      for (let yy = y; yy <= yEnd; yy++) {
+        for (let xx = xStart; xx <= xEndFill; xx++) {
+          renderer.setPixel(canvas, xx, yy, {
+            active: true,
+            ...color ? { color } : {}
+          });
+        }
+      }
+    }
+  }
+  return renderer.renderCanvas(canvas, pixelWidth, pixelHeight);
+}
+var BarChart = (props) => {
+  const {
+    showLegend = true,
+    showAxis = true,
+    showXAxis,
+    showYAxis,
+    legendPosition = "right",
+    orientation = "vertical",
+    xAxisLabel,
+    yAxisLabel,
+    xTickCount = 5,
+    yTickCount = 5,
+    xTickFormat,
+    yTickFormat,
+    rendererChain = BAR_CHART_RENDERER_CHAIN,
+    xIntegerScale,
+    yIntegerScale
+  } = props;
+  const renderXAxis = showXAxis ?? showAxis;
+  const renderYAxis = showYAxis ?? showAxis;
+  const { series, min, max, maxLength, colors, legendItems } = useChartCore(props);
+  const renderer = useChartRenderer(props, rendererChain);
+  const layout = useChartLayoutSimple(props, min, max);
+  const { plotWidth: canvasWidth, plotHeight: canvasHeight } = layout;
+  const coloredLines = useMemo(() => {
+    if (series.length === 0 || maxLength === 0) return [];
+    if (orientation === "horizontal") {
+      return renderHorizontal({
+        renderer,
+        series,
+        width: canvasWidth,
+        height: canvasHeight,
+        min,
+        max,
+        maxLength,
+        colors
+      });
+    }
+    return renderVertical({
+      renderer,
+      series,
+      width: canvasWidth,
+      height: canvasHeight,
+      min,
+      max,
+      maxLength,
+      colors
+    });
+  }, [renderer, series, canvasWidth, canvasHeight, min, max, maxLength, colors, orientation]);
+  if (coloredLines.length === 0) return null;
+  const yAxisConfig = {
+    min,
+    max,
+    tickCount: yTickCount,
+    tickFormat: yTickFormat ?? defaultTickFormat,
+    ...yIntegerScale !== void 0 && { integerScale: yIntegerScale },
+    ...yAxisLabel ? { label: yAxisLabel } : {}
+  };
+  const xAxisConfig = {
+    min: 0,
+    max: Math.max(0, maxLength - 1),
+    tickCount: xTickCount,
+    tickFormat: xTickFormat ?? defaultTickFormat,
+    integerScale: xIntegerScale ?? true,
+    ...xAxisLabel ? { label: xAxisLabel } : {}
+  };
+  return /* @__PURE__ */ React6.createElement(
+    ChartContainer,
+    {
+      layout,
+      showXAxis: renderXAxis,
+      showYAxis: renderYAxis,
+      xAxisConfig,
+      yAxisConfig,
+      showLegend,
+      legendPosition,
+      legendItems
+    },
+    coloredLines.map((segments, i) => /* @__PURE__ */ React6.createElement(Text, { key: `chart-line-${i}` }, segments.map((segment, j) => /* @__PURE__ */ React6.createElement(
+      Text,
+      {
+        key: `seg-${i}-${j}`,
+        ...segment.color ? { color: segment.color } : {},
+        ...segment.backgroundColor ? { backgroundColor: segment.backgroundColor } : {}
+      },
+      segment.text
+    ))))
+  );
+};
+function resolveDataItems(data, labels) {
+  if (!data || data.length === 0) {
+    return [];
+  }
+  if (typeof data[0] === "number") {
+    return data.map((value, i) => ({
+      name: labels?.[i] ?? `Item ${i + 1}`,
+      value
+    }));
+  }
+  return data;
+}
+var TWO_PI = Math.PI * 2;
+var START_ANGLE = -Math.PI / 2;
+function resolveRadius(pixelWidth, pixelHeight, customRadius) {
+  const centerX = Math.floor(pixelWidth / 2);
+  const centerY = Math.floor(pixelHeight / 2);
+  const maxRadius = Math.max(
+    0,
+    Math.min(Math.floor(pixelWidth / 2) - 1, Math.floor(pixelHeight / 2) - 1)
+  );
+  const radius = customRadius ?? maxRadius;
+  return { centerX, centerY, radius };
+}
+function buildAngleStops(data, total) {
+  if (total <= 0) {
+    return [];
+  }
+  const stops = [];
+  let current = 0;
+  data.forEach((item, index) => {
+    if (item.value <= 0) {
+      return;
+    }
+    current += item.value / total * TWO_PI;
+    stops.push({ index, end: current });
+  });
+  return stops;
+}
+function resolveSliceIndex(angle, stops) {
+  if (stops.length === 0) {
+    return null;
+  }
+  for (const stop of stops) {
+    if (angle <= stop.end) {
+      return stop.index;
+    }
+  }
+  return stops[stops.length - 1]?.index ?? null;
+}
+var PieChart = ({
+  data: dataProp,
+  labels,
+  width,
+  height,
+  radius: customRadius,
+  aspectRatio,
+  donutRatio = 0,
+  showLabels = false,
+  showLegend = true,
+  legendPosition = "right",
+  colors,
+  colorPalette,
+  renderer: preferredRenderer,
+  rendererChain = ["braille", "block", "ascii"],
+  heightOffset = 0,
+  widthOffset = 0
+}) => {
+  const data = useMemo(() => resolveDataItems(dataProp, labels), [dataProp, labels]);
+  const layout = useChartLayoutSimple(
+    {
+      ...width !== void 0 && { width },
+      ...height !== void 0 && { height },
+      showAxis: false,
+      showLegend,
+      legendPosition,
+      widthOffset,
+      heightOffset
+    },
+    0,
+    0
+  );
+  const { totalWidth, plotWidth: canvasWidth, plotHeight: canvasHeight } = layout;
+  const { getRenderer, selectBest } = useInkHud();
+  const renderer = useMemo(() => {
+    if (preferredRenderer) {
+      return getRenderer(preferredRenderer);
+    }
+    return selectBest(rendererChain);
+  }, [preferredRenderer, rendererChain, getRenderer, selectBest]);
+  const ratio = useMemo(() => {
+    if (aspectRatio !== void 0) return aspectRatio;
+    const resolution = renderer.getResolution();
+    return 2 * (resolution.horizontal / resolution.vertical);
+  }, [aspectRatio, renderer]);
+  const itemColors = useMemo(() => {
+    if (colors && colors.length >= data.length) {
+      return colors;
+    }
+    if (colors && colors.length > 0) {
+      return assignColors(data.length, colors);
+    }
+    return assignColors(data.length, colorPalette);
+  }, [data.length, colors, colorPalette]);
+  const { total, percentages } = useMemo(() => {
+    const sum = data.reduce((acc, item) => acc + item.value, 0);
+    const pcts = data.map((item) => sum > 0 ? item.value / sum * 100 : 0);
+    return { total: sum, percentages: pcts };
+  }, [data]);
+  const coloredLines = useMemo(() => {
+    if (data.length === 0 || total <= 0) {
+      return [];
+    }
+    const { pixelWidth, pixelHeight } = getPixelDimensions(renderer, canvasWidth, canvasHeight);
+    const canvas = renderer.createCanvas(pixelWidth, pixelHeight);
+    const {
+      centerX,
+      centerY,
+      radius: outerRadius
+    } = resolveRadius(pixelWidth, pixelHeight, customRadius);
+    const innerRadius = outerRadius * donutRatio;
+    const angleStops = buildAngleStops(data, total);
+    for (let y = 0; y < pixelHeight; y++) {
+      const dy = (y - centerY) * ratio;
+      for (let x = 0; x < pixelWidth; x++) {
+        const dx = x - centerX;
+        const distance = Math.sqrt(dx * dx + dy * dy);
+        if (distance > outerRadius || distance < innerRadius) {
+          continue;
+        }
+        const angle = (Math.atan2(dy, dx) - START_ANGLE + TWO_PI) % TWO_PI;
+        const sliceIndex = resolveSliceIndex(angle, angleStops);
+        if (sliceIndex !== null) {
+          const color = data[sliceIndex]?.color ?? itemColors[sliceIndex];
+          if (color) {
+            renderer.setPixel(canvas, x, y, { active: true, color });
+          }
+        }
+      }
+    }
+    return renderer.renderCanvas(canvas, pixelWidth, pixelHeight);
+  }, [
+    data,
+    total,
+    renderer,
+    canvasWidth,
+    canvasHeight,
+    customRadius,
+    ratio,
+    donutRatio,
+    itemColors
+  ]);
+  const legendItems = useMemo(() => {
+    return data.map((item, i) => ({
+      name: showLabels ? `${item.name} (${percentages[i]?.toFixed(1)}%)` : item.name,
+      color: item.color ?? itemColors[i] ?? "cyan",
+      symbol: "\u25CF"
+    }));
+  }, [data, itemColors, showLabels, percentages]);
+  if (coloredLines.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ React6.createElement(Box, { flexDirection: "column", width: totalWidth, alignItems: "center" }, /* @__PURE__ */ React6.createElement(Box, { flexDirection: "row" }, /* @__PURE__ */ React6.createElement(Box, { flexDirection: "column" }, coloredLines.map((segments, i) => /* @__PURE__ */ React6.createElement(Text, { key: `chart-line-${i}` }, segments.map((segment, j) => /* @__PURE__ */ React6.createElement(
+    Text,
+    {
+      key: `seg-${i}-${j}`,
+      ...segment.color ? { color: segment.color } : {},
+      ...segment.backgroundColor ? { backgroundColor: segment.backgroundColor } : {}
+    },
+    segment.text
+  ))))), showLegend && legendPosition === "right" && /* @__PURE__ */ React6.createElement(Box, { marginLeft: 2 }, /* @__PURE__ */ React6.createElement(Legend, { items: legendItems, position: "vertical" }))), showLegend && legendPosition === "bottom" && /* @__PURE__ */ React6.createElement(Box, { marginTop: 1 }, /* @__PURE__ */ React6.createElement(Legend, { items: legendItems, position: "horizontal" })));
+};
+var SPARK_LEVELS_BLOCK = [" ", "\u2582", "\u2583", "\u2584", "\u2585", "\u2586", "\u2587", "\u2588"];
+var SPARK_LEVELS_BRAILLE = ["\u2800", "\u2840", "\u28C0", "\u28C4", "\u28E4", "\u28E6", "\u28F6", "\u28F7", "\u28FF"];
+var SPARK_LEVELS_ASCII = [" ", ".", ":", "-", "=", "+", "*", "#", "%", "@"];
+var Sparkline = ({
+  data,
+  width: propsWidth,
+  min: userMin,
+  max: userMax,
+  color,
+  variant = "block"
+}) => {
+  const gridContext = useContext(GridItemContext);
+  const effectiveWidth = propsWidth ?? gridContext?.width;
+  const text = useMemo(() => {
+    if (!data || data.length === 0) return "";
+    let processedData = data;
+    if (effectiveWidth && data.length > effectiveWidth) {
+      processedData = lttb(data, effectiveWidth);
+    }
+    const min = userMin ?? Math.min(...processedData);
+    let max = userMax ?? Math.max(...processedData);
+    if (max === min) {
+      max = min + 1;
+    }
+    const levels = variant === "braille" ? SPARK_LEVELS_BRAILLE : variant === "ascii" ? SPARK_LEVELS_ASCII : SPARK_LEVELS_BLOCK;
+    return processedData.map((v) => {
+      const value = Math.max(min, Math.min(max, v));
+      const normalized = (value - min) / (max - min);
+      const index = Math.round(normalized * (levels.length - 1));
+      return levels[index];
+    }).join("");
+  }, [data, effectiveWidth, userMin, userMax, variant]);
+  return /* @__PURE__ */ React6.createElement(Text, { ...color ? { color } : {} }, text);
+};
+var Panel = ({
+  title,
+  titleAlignment = "left",
+  borderStyle = "round",
+  borderColor,
+  padding = 0,
+  width,
+  height,
+  children
+}) => {
+  const gridContext = React6.useContext(GridItemContext);
+  const effectiveWidth = width ?? gridContext?.width;
+  const effectiveHeight = height ?? gridContext?.height;
+  const borderOverhead = borderStyle ? 2 : 0;
+  const paddingOverhead = padding * 2;
+  const totalOverhead = borderOverhead + paddingOverhead;
+  const innerWidth = typeof effectiveWidth === "number" ? Math.max(0, effectiveWidth - totalOverhead) : void 0;
+  const innerHeight = typeof effectiveHeight === "number" ? Math.max(0, effectiveHeight - totalOverhead) : void 0;
+  const boxProps = {
+    borderStyle,
+    flexDirection: "column",
+    ...effectiveWidth !== void 0 && { width: effectiveWidth },
+    ...effectiveHeight !== void 0 && { height: effectiveHeight },
+    ...borderColor !== void 0 && { borderColor }
+  };
+  const childContext = React6.useMemo(
+    () => ({
+      ...innerWidth !== void 0 ? { width: innerWidth } : {},
+      height: innerHeight
+    }),
+    [innerWidth, innerHeight]
+  );
+  return /* @__PURE__ */ React6.createElement(GridItemContext.Provider, { value: childContext }, /* @__PURE__ */ React6.createElement(Box, { ...boxProps }, title && /* @__PURE__ */ React6.createElement(
+    Box,
+    {
+      position: "absolute",
+      marginTop: -1,
+      width: "100%",
+      paddingX: 2,
+      justifyContent: titleAlignment === "center" ? "center" : titleAlignment === "right" ? "flex-end" : "flex-start"
+    },
+    /* @__PURE__ */ React6.createElement(Text, { bold: true, color: borderColor || "white" }, " ", title, " ")
+  ), /* @__PURE__ */ React6.createElement(Box, { padding, flexDirection: "column", flexGrow: 1 }, children)));
+};
+var CHAR_SETS = {
+  unicode: { fill: "\u2588", empty: "\u2591" },
+  ascii: { fill: "#", empty: "-" }
+};
+var Gauge = ({
+  value,
+  min = 0,
+  max = 100,
+  width = 20,
+  color,
+  emptyColor,
+  showPercent = true,
+  variant = "unicode",
+  fillChar,
+  emptyChar,
+  label
+}) => {
+  const theme = useTheme();
+  const effectiveColor = color ?? theme.semantic.success;
+  const effectiveEmptyColor = emptyColor ?? theme.semantic.muted;
+  const charSet = CHAR_SETS[variant];
+  const effectiveFillChar = fillChar ?? charSet.fill;
+  const effectiveEmptyChar = emptyChar ?? charSet.empty;
+  const clampedValue = Math.min(Math.max(value, min), max);
+  const range = max - min;
+  const ratio = range === 0 ? 0 : (clampedValue - min) / range;
+  const percent = Math.round(ratio * 100);
+  const filledLength = Math.round(ratio * width);
+  const emptyLength = width - filledLength;
+  const filledStr = effectiveFillChar.repeat(filledLength);
+  const emptyStr = effectiveEmptyChar.repeat(emptyLength);
+  return /* @__PURE__ */ React6.createElement(Box, { flexDirection: "row" }, label && /* @__PURE__ */ React6.createElement(Box, { marginRight: 1 }, /* @__PURE__ */ React6.createElement(Text, null, label)), /* @__PURE__ */ React6.createElement(Text, { color: effectiveColor }, filledStr), /* @__PURE__ */ React6.createElement(Text, { color: effectiveEmptyColor }, emptyStr), showPercent && /* @__PURE__ */ React6.createElement(Box, { marginLeft: 1 }, /* @__PURE__ */ React6.createElement(Text, null, percent, "%")));
+};
+
+// src/components/BigNumber/font.ts
+var BLOCK_FONT = {
+  "0": ["\u2588\u2580\u2588", "\u2588 \u2588", "\u2588\u2584\u2588"],
+  "1": [" \u2588 ", " \u2588 ", " \u2588 "],
+  "2": ["\u2580\u2580\u2588", " \u2580\u2584", "\u2588\u2584\u2584"],
+  "3": ["\u2580\u2580\u2588", " \u2580\u2584", "\u2584\u2584\u2588"],
+  "4": ["\u2588 \u2588", "\u2588\u2584\u2588", "  \u2588"],
+  "5": ["\u2588\u2580\u2580", "\u2580\u2580\u2584", "\u2584\u2584\u2588"],
+  "6": ["\u2588\u2580\u2580", "\u2588\u2584\u2584", "\u2588\u2584\u2588"],
+  "7": ["\u2580\u2580\u2588", "  \u2588", "  \u2588"],
+  "8": ["\u2588\u2580\u2588", "\u2588\u2580\u2588", "\u2588\u2584\u2588"],
+  "9": ["\u2588\u2580\u2588", "\u2580\u2580\u2588", "  \u2588"],
+  ".": ["   ", "   ", " \u2584 "],
+  ",": ["   ", "   ", " \u2599 "],
+  "%": ["\u2588  ", " \u2588 ", "  \u2588"],
+  "+": ["   ", " \u253C ", "   "],
+  "-": ["   ", " \u2500 ", "   "]
+};
+var BRAILLE_FONT = {
+  "0": ["\u28F0\u28C6", "\u2847\u28B8", "\u2819\u281B"],
+  "1": ["\u2880\u2846", "\u2800\u2847", "\u2800\u2807"],
+  "2": ["\u2824\u28E4", "\u2880\u2864", "\u2813\u2812"],
+  "3": ["\u2824\u28E4", "\u2800\u2864", "\u2812\u281A"],
+  "4": ["\u2846\u28B8", "\u2813\u28BA", "\u2800\u28B8"],
+  "5": ["\u2816\u2836", "\u2812\u28B2", "\u2812\u281A"],
+  "6": ["\u28B0\u2846", "\u2816\u28B2", "\u2813\u281A"],
+  "7": ["\u2824\u28E4", "\u2800\u2870", "\u2800\u2847"],
+  "8": ["\u28B0\u2846", "\u2816\u2876", "\u2813\u281A"],
+  "9": ["\u28B0\u2846", "\u2813\u28BA", "\u2800\u28B8"],
+  ".": ["\u2800\u2800", "\u2800\u2800", "\u2800\u2804"],
+  ",": ["\u2800\u2800", "\u2800\u2800", "\u2800\u2822"],
+  "%": ["\u2801\u2800", "\u2800\u2802", "\u2800\u2808"],
+  "+": ["\u2800\u2800", "\u2810\u2812", "\u2800\u2800"],
+  "-": ["\u2800\u2800", "\u2810\u2812", "\u2800\u2800"]
+};
+var ASCII_FONT = {
+  "0": ["+~+", "| |", "+~+"],
+  "1": [" | ", " | ", " | "],
+  "2": ["~~+", "+-+", "+~~"],
+  "3": ["~~+", " ~+", "~~+"],
+  "4": ["+ +", "+-+", "  +"],
+  "5": ["+~~", "+~+", "~~+"],
+  "6": ["+~~", "+~+", "+~+"],
+  "7": ["~~+", "  +", "  +"],
+  "8": ["+~+", "+~+", "+~+"],
+  "9": ["+~+", "+~+", "  +"],
+  ".": ["   ", "   ", " . "],
+  ",": ["   ", "   ", " , "],
+  "%": ["*  ", " * ", "  *"],
+  "+": ["   ", " + ", "   "],
+  "-": ["   ", " - ", "   "]
+};
+var FONTS = {
+  block: BLOCK_FONT,
+  braille: BRAILLE_FONT,
+  ascii: ASCII_FONT
+};
+var UNKNOWN = {
+  block: ["   ", " ? ", "   "],
+  braille: ["\u2800\u2800", "\u2800\u2826", "\u2800\u2800"],
+  ascii: ["   ", " ? ", "   "]
+};
+function getBigChar(char, style = "block") {
+  return FONTS[style][char] || UNKNOWN[style];
+}
+function renderBigString(text, style = "block") {
+  const rows = ["", "", ""];
+  for (const char of text) {
+    const matrix = getBigChar(char, style);
+    rows[0] += `${matrix[0]} `;
+    rows[1] += `${matrix[1]} `;
+    rows[2] += `${matrix[2]} `;
+  }
+  return rows;
+}
+
+// src/components/BigNumber.tsx
+var TREND_ARROWS = {
+  unicode: { up: "\u25B2", down: "\u25BC", neutral: "\u2500" },
+  ascii: { up: "^", down: "v", neutral: "-" }
+};
+var BigNumber = ({
+  value,
+  label,
+  color = "white",
+  trendDirection,
+  trendLabel,
+  variant = "unicode",
+  fontStyle = "block",
+  align = "center"
+}) => {
+  const bigLines = useMemo(() => renderBigString(String(value), fontStyle), [value, fontStyle]);
+  const theme = useTheme();
+  const arrows = TREND_ARROWS[variant];
+  let trendColor = theme.semantic.muted;
+  let trendArrow = "";
+  if (trendDirection === "up") {
+    trendColor = theme.semantic.success;
+    trendArrow = arrows.up;
+  } else if (trendDirection === "down") {
+    trendColor = theme.semantic.error;
+    trendArrow = arrows.down;
+  } else if (trendDirection === "neutral") {
+    trendArrow = arrows.neutral;
+  }
+  const alignItems = align === "center" ? "center" : align === "right" ? "flex-end" : "flex-start";
+  return /* @__PURE__ */ React6.createElement(Box, { flexDirection: "column", alignItems }, /* @__PURE__ */ React6.createElement(Box, { flexDirection: "column", marginBottom: 1 }, bigLines.map((line, i) => /* @__PURE__ */ React6.createElement(Text, { key: i, color }, line))), /* @__PURE__ */ React6.createElement(Box, { flexDirection: "row", gap: 1 }, label && /* @__PURE__ */ React6.createElement(Text, { color: theme.semantic.textSecondary }, label), (trendLabel || trendArrow) && /* @__PURE__ */ React6.createElement(Text, { color: trendColor }, trendArrow, " ", trendLabel)));
+};
+var CHAR_SETS2 = {
+  unicode: "\u25A0",
+  ascii: "#"
+};
+var findMinMax = (data) => {
+  let minVal = Number.POSITIVE_INFINITY;
+  let maxVal = Number.NEGATIVE_INFINITY;
+  for (const row of data) {
+    for (const val of row) {
+      if (val < minVal) minVal = val;
+      if (val > maxVal) maxVal = val;
+    }
+  }
+  return { min: minVal, max: maxVal };
+};
+var Heatmap = ({ data, colors, variant = "unicode", char }) => {
+  const theme = useTheme();
+  const effectiveColors = colors ?? theme.heatmapGradient;
+  const effectiveChar = char ?? CHAR_SETS2[variant];
+  const { min, max } = useMemo(() => {
+    const { min: minVal, max: maxVal } = findMinMax(data);
+    if (minVal === Number.POSITIVE_INFINITY) return { min: 0, max: 0 };
+    return { min: minVal, max: maxVal > minVal ? maxVal : minVal + 1 };
+  }, [data]);
+  const steps = effectiveColors.length;
+  const gradient = useMemo(
+    () => createGradient(effectiveColors, steps),
+    [effectiveColors, steps]
+  );
+  return /* @__PURE__ */ React6.createElement(Box, { flexDirection: "column" }, data.map((row, rowIndex) => /* @__PURE__ */ React6.createElement(Box, { key: rowIndex, flexDirection: "row" }, row.map((val, colIndex) => {
+    const normalized = max === min ? 0 : (val - min) / (max - min);
+    let stepIndex = Math.floor(normalized * steps);
+    if (stepIndex >= steps) stepIndex = steps - 1;
+    const colorFn = gradient[stepIndex];
+    const renderedChar = colorFn ? colorFn(effectiveChar) : effectiveChar;
+    return /* @__PURE__ */ React6.createElement(Text, { key: `${rowIndex}-${colIndex}` }, renderedChar, " ");
+  }))));
+};
+function parseLogLine(line) {
+  const timeRegex = /\[?(\d{2,4}-\d{2}-\d{2}\s)?(\d{2}:\d{2}:\d{2})\]?/;
+  const timeMatch = line.match(timeRegex);
+  let timestamp = timeMatch ? timeMatch[0] : void 0;
+  let content = line;
+  if (timestamp) {
+    content = content.replace(timestamp, "").trim();
+    timestamp = timestamp.replace(/^\[|\]$/g, "");
+  }
+  const levelRegex = /(info|warn|warning|error|err|success|debug)/i;
+  const levelMatch = content.match(levelRegex);
+  let level = "unknown";
+  if (levelMatch) {
+    const lvl = levelMatch[0].toLowerCase();
+    if (lvl.includes("error") || lvl.includes("err")) level = "error";
+    else if (lvl.includes("warn")) level = "warn";
+    else if (lvl.includes("info")) level = "info";
+    else if (lvl.includes("success")) level = "success";
+    else if (lvl.includes("debug")) level = "debug";
+    content = content.replace(new RegExp(`\\[?${levelMatch[0]}\\]?`, "i"), "").trim();
+    content = content.replace(/^[:\-\s]+/, "");
+  }
+  return {
+    ...timestamp ? { timestamp } : {},
+    level,
+    message: content || line,
+    raw: line
+  };
+}
+var LogLine = ({ parsed, semantic }) => {
+  const { timestamp, level, message } = parsed;
+  const getStyle = (lvl) => {
+    switch (lvl) {
+      case "error":
+        return { color: semantic.error, badge: "\u2716  ERROR", icon: "\u2716" };
+      case "warn":
+        return { color: semantic.warning, badge: "\u26A0  WARN ", icon: "\u26A0" };
+      case "success":
+        return { color: semantic.success, badge: "\u2714 SUCCESS", icon: "\u2714" };
+      case "debug":
+        return { color: semantic.muted, badge: "\u2699 DEBUG", icon: "\u2699" };
+      default:
+        return { color: semantic.info, badge: "\u2139  INFO ", icon: "\u2139" };
+    }
+  };
+  const style = getStyle(level);
+  return /* @__PURE__ */ React6.createElement(Box, { flexDirection: "row", width: "100%" }, timestamp && /* @__PURE__ */ React6.createElement(Box, { marginRight: 1, width: 10 }, /* @__PURE__ */ React6.createElement(Text, { dimColor: true, wrap: "truncate" }, timestamp)), /* @__PURE__ */ React6.createElement(Box, { marginRight: 1, width: 9 }, level === "unknown" ? /* @__PURE__ */ React6.createElement(Text, { color: semantic.muted }, "\u2022") : /* @__PURE__ */ React6.createElement(Text, { color: style.color, bold: true }, level === "error" || level === "warn" ? `${style.icon} ${level.toUpperCase()}` : level.toUpperCase())), /* @__PURE__ */ React6.createElement(Box, { flexGrow: 1 }, level === "error" ? /* @__PURE__ */ React6.createElement(Text, { color: style.color, wrap: "truncate-end" }, message) : /* @__PURE__ */ React6.createElement(Text, { color: semantic.text, wrap: "truncate-end" }, message)));
+};
+var LogStream = ({ logs, maxLines = 100, height, width }) => {
+  const theme = useTheme();
+  const gridContext = useContext(GridItemContext);
+  const effectiveHeight = height ?? (typeof gridContext?.height === "number" ? gridContext.height : void 0);
+  const effectiveWidth = width ?? gridContext?.width;
+  const recentLogs = useMemo(() => {
+    const start = Math.max(0, logs.length - maxLines);
+    return logs.slice(start);
+  }, [logs, maxLines]);
+  const displayLogs = useMemo(() => {
+    if (effectiveHeight && effectiveHeight > 0) {
+      const start = Math.max(0, recentLogs.length - effectiveHeight);
+      return recentLogs.slice(start);
+    }
+    return recentLogs;
+  }, [recentLogs, effectiveHeight]);
+  const items = displayLogs.map((line, index) => {
+    const parsed = parseLogLine(line);
+    return /* @__PURE__ */ React6.createElement(LogLine, { key: index, parsed, semantic: theme.semantic });
+  });
+  return /* @__PURE__ */ React6.createElement(
+    Box,
+    {
+      flexDirection: "column",
+      justifyContent: "flex-end",
+      flexGrow: 1,
+      ...effectiveHeight !== void 0 && { height: effectiveHeight },
+      ...effectiveWidth !== void 0 && { width: effectiveWidth }
+    },
+    items
+  );
+};
+var ALIGN_MAP = {
+  left: "flex-start",
+  right: "flex-end",
+  center: "center"
+};
+var SortableHeaderCell = ({
+  column,
+  width,
+  isSorted,
+  sortDirection,
+  onSort,
+  align,
+  autoFocus
+}) => {
+  const theme = useTheme();
+  const semantic = theme.semantic;
+  const { isFocused } = useFocus({ autoFocus: !!autoFocus });
+  useInput((input, key) => {
+    if (isFocused && (key.return || input === " ")) {
+      onSort?.(column);
+    }
+  });
+  let indicator = "";
+  if (isSorted) {
+    indicator = sortDirection === "asc" ? " \u25B2" : " \u25BC";
+  }
+  return /* @__PURE__ */ React6.createElement(
+    Box,
+    {
+      width,
+      justifyContent: align,
+      flexShrink: 0,
+      paddingX: 1,
+      ...isFocused ? { borderStyle: "single" } : {},
+      borderColor: semantic.info,
+      marginTop: isFocused ? -1 : 0
+    },
+    /* @__PURE__ */ React6.createElement(
+      Text,
+      {
+        bold: true,
+        color: isFocused ? semantic.info : semantic.success,
+        underline: isFocused,
+        wrap: "truncate-end"
+      },
+      column.header,
+      indicator
+    )
+  );
+};
+var getCellContentLength = (item, col) => {
+  let content = "";
+  if (typeof col.accessor === "function") {
+    const result = col.accessor(item);
+    if (typeof result === "string" || typeof result === "number") {
+      content = String(result);
+    }
+  } else {
+    const val = item[col.accessor];
+    if (val !== void 0 && val !== null) {
+      content = String(val);
+    }
+  }
+  return content.length;
+};
+var calculateWidths = (columns, data) => {
+  return columns.map((col) => {
+    if (col.width) return col.width;
+    let max = col.header.length + 2;
+    for (const item of data) {
+      max = Math.max(max, getCellContentLength(item, col));
+    }
+    return max + 2;
+  });
+};
+var Table = ({
+  data,
+  columns,
+  sortColumn,
+  sortDirection = "asc",
+  zebra = false,
+  onSort
+}) => {
+  const gridContext = useContext(GridItemContext);
+  const availableWidth = gridContext?.width;
+  const contentWidths = useMemo(() => calculateWidths(columns, data), [data, columns]);
+  const totalContentWidth = contentWidths.reduce((a, b) => a + b, 0);
+  const finalColumnWidths = useMemo(() => {
+    if (!availableWidth) {
+      return contentWidths;
+    }
+    const scale = availableWidth / totalContentWidth;
+    let allocated = 0;
+    return contentWidths.map((w, i) => {
+      if (i === contentWidths.length - 1) {
+        return Math.max(1, availableWidth - allocated);
+      }
+      const newW = Math.floor(w * scale);
+      allocated += newW;
+      return Math.max(1, newW);
+    });
+  }, [availableWidth, totalContentWidth, contentWidths]);
+  return /* @__PURE__ */ React6.createElement(
+    Box,
+    {
+      flexDirection: "column",
+      ...availableWidth !== void 0 && { width: availableWidth }
+    },
+    /* @__PURE__ */ React6.createElement(
+      Box,
+      {
+        borderStyle: "single",
+        borderTop: false,
+        borderLeft: false,
+        borderRight: false,
+        borderBottom: true,
+        flexDirection: "row"
+      },
+      columns.map((col, i) => {
+        const width = finalColumnWidths[i] ?? 0;
+        const isSorted = sortColumn === i || sortColumn === col.header;
+        const justifyContent = col.align ? ALIGN_MAP[col.align] : "flex-start";
+        return /* @__PURE__ */ React6.createElement(
+          SortableHeaderCell,
+          {
+            key: i,
+            column: col,
+            width,
+            isSorted,
+            sortDirection,
+            align: justifyContent,
+            onSort: () => onSort?.(col, i),
+            autoFocus: i === 0
+          }
+        );
+      })
+    ),
+    data.map((item, rowIndex) => {
+      const isZebra = zebra && rowIndex % 2 === 1;
+      return /* @__PURE__ */ React6.createElement(Box, { key: rowIndex, flexDirection: "row" }, columns.map((col, colIndex) => {
+        const width = finalColumnWidths[colIndex] ?? 0;
+        let content;
+        if (typeof col.accessor === "function") {
+          content = col.accessor(item);
+        } else {
+          const val = item[col.accessor];
+          content = val !== void 0 && val !== null ? String(val) : "";
+        }
+        const justifyContent = col.align ? ALIGN_MAP[col.align] : "flex-start";
+        return /* @__PURE__ */ React6.createElement(
+          Box,
+          {
+            key: colIndex,
+            width,
+            justifyContent,
+            flexShrink: 0,
+            paddingX: 1
+          },
+          /* @__PURE__ */ React6.createElement(Text, { dimColor: isZebra, wrap: "truncate-end" }, content)
+        );
+      }));
+    })
+  );
+};
+
+export { AreaChart, AsciiRenderer, Axis, BarChart, BigNumber, BlockRenderer, BrailleRenderer, Gauge, Grid, GridItem, Heatmap, InkHudProvider, Legend, LineChart, LogStream, ONE_DARK_THEME, Panel, PieChart, Renderer, RendererSelector, Sparkline, Table, TerminalDetector, ThemeProvider, arcPoints, assignColors, averageDownsampling, clamp, colorToChalk, createGradient, degreesToRadians, distanceBetweenPoints, easeInCubic, easeInOutQuad, easeLinear, easeOutCubic, fixedIntervalDownsampling, linearScale, lttb, midpointCircle, minMaxDownsampling, normalize, pointOnArc, radiansToDegrees, rendererSelector, scaleToRange, terminalDetector, useInkHud, useRendererSelector, useSemanticColors, useSmooth, useSmoothArray, useTheme, useThrottle };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map