ink-hud 0.1.2 → 0.1.4

package/dist/index.cjs

@@ -4,6 +4,7 @@ var React6 = require('react');
 var chalk = require('chalk');
 var tinygradient = require('tinygradient');
 var ink = require('ink');
+var zlib = require('zlib');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -440,186 +441,6 @@ var BlockRenderer = class _BlockRenderer extends Renderer {
   }
 };
 
-// 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) */
@@ -796,8 +617,6 @@ var RendererSelector = class {
         return new BrailleRenderer();
       case "block":
         return new BlockRenderer();
-      case "ascii":
-        return new AsciiRenderer();
     }
   }
   /**
@@ -808,6 +627,17 @@ var RendererSelector = class {
   getRenderer(type) {
     return this.createRenderer(type);
   }
+  /**
+   * Check if a renderer type is supported by the current terminal
+   * Used internally by InkHudProvider to determine the per-chart renderer
+   * @param type - Renderer type
+   * @returns Whether the renderer type is supported
+   */
+  isRendererTypeSupported(type) {
+    const capabilities = this.detector.detect();
+    const renderer = this.createRenderer(type);
+    return this.isRendererSupported(renderer, capabilities);
+  }
   /**
    * Check if the renderer meets terminal capability requirements
    * @param renderer - Renderer instance
@@ -835,15 +665,16 @@ var RendererSelector = class {
     return true;
   }
   /**
-   * Automatically select the best renderer
+   * Automatically select the best renderer from a priority chain.
    *
-   * Try in the order of the priority chain, returning the first renderer that meets terminal capability requirements
-   * If none are satisfied, fallback to ASCII
+   * @deprecated Prefer `<InkHudProvider renderers={{ line: 'block' }}>` combined
+   *   with `useChartRenderer(kind)`. This method remains as a low-level escape
+   *   hatch for custom renderer selection outside the React component tree.
    *
-   * @param preferredChain - Priority chain (default: ['braille', 'block', 'ascii'])
+   * @param preferredChain - Priority chain (default: ['braille', 'block'])
    * @returns Selected renderer instance
    */
-  selectBest(preferredChain = ["braille", "block", "ascii"]) {
+  selectBest(preferredChain = ["braille", "block"]) {
     const capabilities = this.detector.detect();
     for (const rendererType of preferredChain) {
       const renderer = this.getRenderer(rendererType);
@@ -851,7 +682,7 @@ var RendererSelector = class {
         return renderer;
       }
     }
-    return this.getRenderer("ascii");
+    return this.getRenderer("block");
   }
   /**
    * Get terminal capability information
@@ -862,33 +693,70 @@ var RendererSelector = class {
   }
 };
 var rendererSelector = new RendererSelector();
+
+// src/components/InkHudProvider.tsx
+var DEFAULT_CHART_RENDERERS = {
+  line: "braille",
+  area: "braille",
+  bar: "block",
+  pie: "block"
+};
+var selectorFallbackWarnings = /* @__PURE__ */ new WeakMap();
+function warnFallback(selector, kind, target) {
+  if (process.env.NODE_ENV === "production") return;
+  let warned = selectorFallbackWarnings.get(selector);
+  if (!warned) {
+    warned = /* @__PURE__ */ new Set();
+    selectorFallbackWarnings.set(selector, warned);
+  }
+  const key = `${kind}:${target}`;
+  if (warned.has(key)) return;
+  warned.add(key);
+  console.warn(
+    `[ink-hud] Renderer '${target}' is not supported by the current terminal; falling back to 'block' for chart kind '${kind}'. Override via <InkHudProvider renderers={{ ${kind}: 'block' }}>.`
+  );
+}
 var defaultSelector = new RendererSelector();
 var defaultContext = {
   selector: defaultSelector,
   getCapabilities: () => defaultSelector.getTerminalCapabilities(),
   getRenderer: (type) => defaultSelector.getRenderer(type),
-  selectBest: (chain) => defaultSelector.selectBest(chain)
+  getRendererFor: (kind) => {
+    const target = DEFAULT_CHART_RENDERERS[kind];
+    if (defaultSelector.isRendererTypeSupported(target)) {
+      return defaultSelector.getRenderer(target);
+    }
+    warnFallback(defaultSelector, kind, target);
+    return defaultSelector.getRenderer("block");
+  }
 };
 var InkHudContext = React6.createContext(defaultContext);
 var InkHudProvider = ({
   detector,
-  forceRenderer,
+  renderers,
   children
 }) => {
   const value = React6.useMemo(() => {
     const selector = detector ? new RendererSelector(detector) : defaultSelector;
+    const mergedRenderers = {
+      ...DEFAULT_CHART_RENDERERS,
+      ...renderers
+    };
+    const getRendererFor = (kind) => {
+      const target = mergedRenderers[kind];
+      if (selector.isRendererTypeSupported(target)) {
+        return selector.getRenderer(target);
+      }
+      warnFallback(selector, kind, target);
+      return selector.getRenderer("block");
+    };
     return {
       selector,
       getCapabilities: () => selector.getTerminalCapabilities(),
       getRenderer: (type) => selector.getRenderer(type),
-      selectBest: (chain) => {
-        if (forceRenderer) {
-          return selector.getRenderer(forceRenderer);
-        }
-        return selector.selectBest(chain);
-      }
+      getRendererFor
     };
-  }, [detector, forceRenderer]);
+  }, [detector, renderers]);
   return /* @__PURE__ */ React6__default.default.createElement(InkHudContext.Provider, { value }, children);
 };
 function useInkHud() {
@@ -1364,6 +1232,420 @@ function useThrottle(value, fps = 30) {
   }, [value, fps]);
   return throttledValue;
 }
+
+// src/render/capabilities.ts
+function detectImageProtocol(env = process.env) {
+  const override = env.INKHU_IMAGE_PROTOCOL;
+  if (override === "kitty") return "kitty";
+  if (override === "iterm2") return "iterm2";
+  if (override === "none") return null;
+  if (env.KITTY_WINDOW_ID) return "kitty";
+  const tp = (env.TERM_PROGRAM ?? "").toLowerCase();
+  if (tp === "wezterm" || tp === "ghostty") return "kitty";
+  if (tp === "iterm.app") return "iterm2";
+  return null;
+}
+
+// src/render/image/iterm2.ts
+function encodeIterm2(pngBuffer, cols) {
+  const b64 = pngBuffer.toString("base64");
+  const args = ["inline=1", "preserveAspectRatio=1"];
+  if (cols !== void 0) args.push(`width=${cols}`);
+  return `\x1B]1337;File=${args.join(";")}:${b64}\x07`;
+}
+
+// src/render/image/kitty.ts
+var CHUNK_SIZE = 4096;
+var DIACRITICS = [
+  // 0–99 (original set)
+  773,
+  781,
+  782,
+  784,
+  786,
+  829,
+  830,
+  831,
+  838,
+  842,
+  843,
+  844,
+  848,
+  849,
+  850,
+  855,
+  859,
+  867,
+  868,
+  869,
+  870,
+  871,
+  872,
+  873,
+  874,
+  875,
+  876,
+  877,
+  878,
+  879,
+  1155,
+  1156,
+  1157,
+  1158,
+  1159,
+  1426,
+  1427,
+  1428,
+  1429,
+  1431,
+  1432,
+  1433,
+  1436,
+  1437,
+  1438,
+  1439,
+  1440,
+  1441,
+  1448,
+  1449,
+  1451,
+  1452,
+  1455,
+  1476,
+  1552,
+  1553,
+  1554,
+  1555,
+  1556,
+  1557,
+  1558,
+  1559,
+  1623,
+  1624,
+  1625,
+  1626,
+  1627,
+  1629,
+  1630,
+  1750,
+  1751,
+  1752,
+  1753,
+  1754,
+  1755,
+  1756,
+  1759,
+  1760,
+  1761,
+  1762,
+  1764,
+  1767,
+  1768,
+  1771,
+  1772,
+  1840,
+  1842,
+  1843,
+  1845,
+  1846,
+  1850,
+  1853,
+  1855,
+  1856,
+  1857,
+  1859,
+  1861,
+  1863,
+  1865,
+  1866,
+  // 100–107
+  2027,
+  2028,
+  2029,
+  2030,
+  2031,
+  2032,
+  2033,
+  2035,
+  // 108–128
+  2070,
+  2071,
+  2072,
+  2073,
+  2075,
+  2076,
+  2077,
+  2078,
+  2079,
+  2080,
+  2081,
+  2082,
+  2083,
+  2085,
+  2086,
+  2087,
+  2089,
+  2090,
+  2091,
+  2092,
+  2093,
+  // 129–131
+  2385,
+  2387,
+  2388,
+  // 132–135
+  3970,
+  3971,
+  3974,
+  3975,
+  // 136–138
+  4957,
+  4958,
+  4959,
+  // 139
+  6109,
+  // 140
+  6458,
+  // 141–149
+  6679,
+  6773,
+  6774,
+  6775,
+  6776,
+  6777,
+  6778,
+  6779,
+  6780,
+  // 150–158
+  7019,
+  7020,
+  7021,
+  7022,
+  7023,
+  7024,
+  7025,
+  7026,
+  7027,
+  // 159–173
+  7376,
+  7377,
+  7378,
+  7386,
+  7387,
+  7392,
+  7393,
+  7394,
+  7395,
+  7396,
+  7397,
+  7398,
+  7399,
+  7400,
+  7405,
+  // 174–176
+  7412,
+  7416,
+  7417,
+  // 177–187
+  7616,
+  7617,
+  7619,
+  7620,
+  7621,
+  7622,
+  7623,
+  7624,
+  7625,
+  7627,
+  7628,
+  // 188–210
+  7633,
+  7634,
+  7635,
+  7636,
+  7637,
+  7638,
+  7639,
+  7640,
+  7641,
+  7642,
+  7643,
+  7644,
+  7645,
+  7646,
+  7647,
+  7648,
+  7649,
+  7650,
+  7651,
+  7652,
+  7653,
+  7654,
+  7678,
+  // 211–222
+  8400,
+  8401,
+  8404,
+  8405,
+  8406,
+  8407,
+  8411,
+  8412,
+  8417,
+  8423,
+  8425,
+  8432,
+  // 223–225
+  11503,
+  11504,
+  11505,
+  // 226–255
+  11744,
+  11745,
+  11746,
+  11747,
+  11748,
+  11749,
+  11750,
+  11751,
+  11752,
+  11753,
+  11754,
+  11755,
+  11756,
+  11757,
+  11758,
+  11759,
+  11760,
+  11761,
+  11762,
+  11763,
+  11764,
+  11765,
+  11766,
+  11767,
+  11768,
+  11769,
+  11770,
+  11771,
+  11772,
+  11773
+];
+function encodeKittyUpload(pngBuffer, cols, rows, imageId) {
+  const b64 = pngBuffer.toString("base64");
+  const parts = [];
+  for (let i = 0; i < b64.length; i += CHUNK_SIZE) {
+    const data = b64.slice(i, i + CHUNK_SIZE);
+    const isFirst = i === 0;
+    const isLast = i + CHUNK_SIZE >= b64.length;
+    let params;
+    if (isFirst) {
+      const more = isLast ? 0 : 1;
+      params = `a=T,U=1,i=${imageId},f=100,q=2,m=${more},c=${cols},r=${rows}`;
+    } else {
+      params = `m=${isLast ? 0 : 1},q=2`;
+    }
+    parts.push(`\x1B_G${params};${data}\x1B\\`);
+  }
+  return parts.join("");
+}
+function encodeKittyPlaceholders(cols, rows, imageId, options = {}) {
+  const { trailingSpace = true } = options;
+  const r = imageId >> 16 & 255;
+  const g = imageId >> 8 & 255;
+  const b = imageId & 255;
+  const colorSeq = `\x1B[38;2;${r};${g};${b}m`;
+  const resetSeq = "\x1B[39m";
+  const placeholder = "\u{10EEEE}";
+  const maxDim = DIACRITICS.length;
+  if (rows > maxDim || cols > maxDim) {
+    throw new RangeError(
+      `encodeKittyPlaceholders: rows (${rows}) and cols (${cols}) must each be \u2264 ${maxDim}`
+    );
+  }
+  const lines = [];
+  for (let row = 0; row < rows; row++) {
+    const rowMark = String.fromCodePoint(DIACRITICS[row] ?? 0);
+    let line = colorSeq;
+    for (let col = 0; col < cols; col++) {
+      const colMark = String.fromCodePoint(DIACRITICS[col] ?? 0);
+      line += placeholder + rowMark + colMark + (trailingSpace ? " " : "");
+    }
+    line += resetSeq;
+    lines.push(line);
+  }
+  return lines.join("\n");
+}
+function encodeKittyDelete(imageId) {
+  return `\x1B_Ga=d,d=I,i=${imageId}\x1B\\`;
+}
+function encodeKitty(pngBuffer, cols, rows) {
+  const b64 = pngBuffer.toString("base64");
+  const parts = [];
+  for (let i = 0; i < b64.length; i += CHUNK_SIZE) {
+    const data = b64.slice(i, i + CHUNK_SIZE);
+    const isFirst = i === 0;
+    const isLast = i + CHUNK_SIZE >= b64.length;
+    let params;
+    if (isFirst) {
+      const more = isLast ? 0 : 1;
+      params = `a=T,f=100,q=2,m=${more},c=${cols},r=${rows}`;
+    } else {
+      params = `m=${isLast ? 0 : 1},q=2`;
+    }
+    parts.push(`\x1B_G${params};${data}\x1B\\`);
+  }
+  return parts.join("");
+}
+
+// src/hooks/useImageProtocol.ts
+var nextImageId = 1;
+function useImageProtocol({
+  mode,
+  charCols,
+  charRows,
+  pngBuf,
+  trailingSpace = true
+}) {
+  const { stdout } = ink.useStdout();
+  const imageIdRef = React6.useRef(null);
+  if (imageIdRef.current === null) {
+    imageIdRef.current = nextImageId++;
+  }
+  const imageId = imageIdRef.current;
+  const protocol = React6.useMemo(() => {
+    if (mode === "character") return null;
+    return detectImageProtocol();
+  }, [mode]);
+  const useImage = protocol !== null && mode !== "character" && pngBuf !== null && charCols > 0 && charRows > 0;
+  React6.useEffect(() => {
+    if (protocol !== "kitty" || !pngBuf || charCols <= 0 || charRows <= 0 || mode === "character")
+      return;
+    stdout.write(encodeKittyUpload(pngBuf, charCols, charRows, imageId));
+    return () => {
+      stdout.write(encodeKittyDelete(imageId));
+    };
+  }, [mode, protocol, pngBuf, charCols, charRows, imageId, stdout]);
+  React6.useEffect(() => {
+    if (protocol !== "iterm2" || !pngBuf || charCols <= 0 || charRows <= 0 || mode === "character")
+      return;
+    const terminalCols = charCols * (trailingSpace ? 2 : 1);
+    const seq = encodeIterm2(pngBuf, terminalCols);
+    stdout.write(`\x1B[${charRows}A\x1B[0G${seq}\x1B[${charRows}B`);
+  }, [mode, protocol, pngBuf, charCols, charRows, trailingSpace, stdout]);
+  if (!useImage) {
+    return { useImage: false, kittyLines: null, iterm2Cols: null };
+  }
+  if (protocol === "kitty") {
+    const text = encodeKittyPlaceholders(charCols, charRows, imageId, { trailingSpace });
+    return { useImage: true, kittyLines: text.split("\n"), iterm2Cols: null };
+  }
+  return {
+    useImage: true,
+    kittyLines: null,
+    iterm2Cols: charCols * (trailingSpace ? 2 : 1)
+  };
+}
 var GridContext = React6.createContext({
   columns: 12,
   gap: 0,
@@ -1492,6 +1774,24 @@ var GridItem = ({
 };
 
 // src/components/common/chartUtils.ts
+function estimateHorizontalLegendRows(names, availableWidth) {
+  if (!names || names.length === 0) return 1;
+  const SYMBOL_WIDTH = 2;
+  const ITEM_GAP = 2;
+  let rows = 1;
+  let used = 0;
+  for (const n of names) {
+    const itemWidth = SYMBOL_WIDTH + n.length;
+    const needed = used === 0 ? itemWidth : itemWidth + ITEM_GAP;
+    if (used + needed > availableWidth && used > 0) {
+      rows++;
+      used = itemWidth;
+    } else {
+      used += needed;
+    }
+  }
+  return rows;
+}
 function resolveSeriesColors(series, colors, palette) {
   if (series.length === 0) {
     return [];
@@ -1519,7 +1819,8 @@ function useChartLayout(props, config) {
     defaultWidth = 60,
     defaultHeight = 15,
     min,
-    max
+    max,
+    legendNames
   } = config;
   const gridContext = React6.useContext(GridItemContext);
   const totalHeight = props.height ?? (typeof gridContext?.height === "number" ? gridContext.height : defaultHeight);
@@ -1542,9 +1843,11 @@ function useChartLayout(props, config) {
   let legendHeight = 0;
   if (showLegend) {
     if (legendPosition === "right") {
-      legendWidth = 20;
+      legendWidth = legendNames && legendNames.length > 0 ? Math.max(...legendNames.map((n) => n.length)) + 2 : 20;
     } else {
-      legendHeight = 2;
+      const legendAvailWidth = Math.max(1, totalWidth - yAxisWidth - (showYAxis ? 1 : 0));
+      const contentRows = estimateHorizontalLegendRows(legendNames, legendAvailWidth);
+      legendHeight = contentRows + 1;
     }
   }
   const yAxisSpacing = showYAxis ? 1 : 0;
@@ -1568,7 +1871,7 @@ function useChartLayout(props, config) {
     xAxisHeight: effectiveXAxisHeight
   };
 }
-function useChartLayoutSimple(props, min, max) {
+function useChartLayoutSimple(props, min, max, legendNames) {
   const {
     width: propsWidth,
     height: propsHeight,
@@ -1603,7 +1906,8 @@ function useChartLayoutSimple(props, min, max) {
       yTickCount,
       ...yTickFormat && { yTickFormat },
       min,
-      max
+      max,
+      ...legendNames && { legendNames }
     }
   );
 }
@@ -1803,8 +2107,38 @@ var ChartContainer = ({
   children
 }) => {
   const { totalWidth, totalHeight, plotWidth, plotHeight, yAxisWidth } = layout;
-  return /* @__PURE__ */ React6__default.default.createElement(ink.Box, { flexDirection: "column", width: totalWidth, height: totalHeight }, showLegend && legendPosition === "top" && /* @__PURE__ */ React6__default.default.createElement(ink.Box, { marginBottom: 1, marginLeft: showYAxis ? yAxisWidth + 1 : 0 }, /* @__PURE__ */ React6__default.default.createElement(Legend, { items: legendItems, position: "horizontal" })), /* @__PURE__ */ React6__default.default.createElement(ink.Box, { flexDirection: "row" }, showYAxis && yAxisConfig && /* @__PURE__ */ React6__default.default.createElement(ink.Box, { marginRight: 1, width: yAxisWidth }, /* @__PURE__ */ React6__default.default.createElement(Axis, { type: "y", length: plotHeight, ...yAxisConfig })), /* @__PURE__ */ React6__default.default.createElement(ink.Box, { flexDirection: "column" }, children), showLegend && legendPosition === "right" && /* @__PURE__ */ React6__default.default.createElement(ink.Box, { marginLeft: 2 }, /* @__PURE__ */ React6__default.default.createElement(Legend, { items: legendItems, position: "vertical" }))), showXAxis && xAxisConfig && /* @__PURE__ */ React6__default.default.createElement(ink.Box, { marginLeft: showYAxis ? yAxisWidth + 1 : 0 }, /* @__PURE__ */ React6__default.default.createElement(Axis, { type: "x", length: plotWidth, ...xAxisConfig })), showLegend && legendPosition === "bottom" && /* @__PURE__ */ React6__default.default.createElement(ink.Box, { marginTop: 1, marginLeft: showYAxis ? yAxisWidth + 1 : 0 }, /* @__PURE__ */ React6__default.default.createElement(Legend, { items: legendItems, position: "horizontal" })));
+  return /* @__PURE__ */ React6__default.default.createElement(ink.Box, { flexDirection: "column", width: totalWidth, height: totalHeight }, showLegend && legendPosition === "top" && /* @__PURE__ */ React6__default.default.createElement(ink.Box, { marginBottom: 1, marginLeft: showYAxis ? yAxisWidth + 1 : 0 }, /* @__PURE__ */ React6__default.default.createElement(Legend, { items: legendItems, position: "horizontal" })), /* @__PURE__ */ React6__default.default.createElement(ink.Box, { flexDirection: "row" }, showYAxis && yAxisConfig && /* @__PURE__ */ React6__default.default.createElement(ink.Box, { marginRight: 1, width: yAxisWidth }, /* @__PURE__ */ React6__default.default.createElement(Axis, { type: "y", length: plotHeight, ...yAxisConfig })), /* @__PURE__ */ React6__default.default.createElement(ink.Box, { flexDirection: "column" }, children), showLegend && legendPosition === "right" && /* @__PURE__ */ React6__default.default.createElement(ink.Box, { marginLeft: 2 }, /* @__PURE__ */ React6__default.default.createElement(Legend, { items: legendItems, position: "vertical" }))), showXAxis && xAxisConfig && /* @__PURE__ */ React6__default.default.createElement(ink.Box, { marginLeft: showYAxis ? yAxisWidth + 1 : 0 }, /* @__PURE__ */ React6__default.default.createElement(Axis, { type: "x", length: plotWidth, ...xAxisConfig })), showLegend && legendPosition === "bottom" && /* @__PURE__ */ React6__default.default.createElement(
+    ink.Box,
+    {
+      marginTop: 1,
+      marginLeft: showYAxis ? yAxisWidth + 1 : 0,
+      width: plotWidth,
+      justifyContent: "center"
+    },
+    /* @__PURE__ */ React6__default.default.createElement(Legend, { items: legendItems, position: "horizontal" })
+  ));
 };
+
+// src/symbols.ts
+var TREND = { up: "\u25B2", down: "\u25BC", neutral: "\u2500" };
+var LEGEND = { dot: "\u25CF" };
+var BAR = { fill: "\u2588", empty: "\u2591" };
+var HEATMAP = { default: "\u25A0" };
+var BORDER_ROUNDED = {
+  topLeft: "\u256D",
+  topRight: "\u256E",
+  bottomLeft: "\u2570",
+  bottomRight: "\u256F",
+  horizontal: "\u2500",
+  vertical: "\u2502",
+  bar: "\u258C"
+};
+var SPARK_LEVELS = {
+  block: [" ", "\u2582", "\u2583", "\u2584", "\u2585", "\u2586", "\u2587", "\u2588"],
+  braille: ["\u2800", "\u2840", "\u28C0", "\u28C4", "\u28E4", "\u28E6", "\u28F6", "\u28F7", "\u28FF"]
+};
+
+// src/components/common/useChartCore.ts
 function useChartCore(props) {
   const { series: seriesProp, data, seriesName, colors: colorsProp, colorPalette } = props;
   const series = React6.useMemo(
@@ -1820,7 +2154,7 @@ function useChartCore(props) {
     () => series.map((item, i) => ({
       name: item.name,
       color: item.color ?? colors[i] ?? "cyan",
-      symbol: "\u25CF"
+      symbol: LEGEND.dot
     })),
     [series, colors]
   );
@@ -1833,17 +2167,9 @@ function useChartCore(props) {
     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 React6.useMemo(() => {
-    if (preferredRenderer) {
-      return getRenderer(preferredRenderer);
-    }
-    return selectBest(rendererChain);
-  }, [preferredRenderer, rendererChain, getRenderer, selectBest]);
+function useChartRenderer(kind) {
+  const { getRendererFor } = useInkHud();
+  return React6.useMemo(() => getRendererFor(kind), [kind, getRendererFor]);
 }
 
 // src/components/LineChart.tsx
@@ -1860,15 +2186,19 @@ var LineChart = (props) => {
     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 renderer = useChartRenderer("line");
+  const layout = useChartLayoutSimple(
+    props,
+    min,
+    max,
+    legendItems.map((it) => it.name)
+  );
   const { plotWidth: canvasWidth, plotHeight: canvasHeight } = layout;
   const coloredLines = React6.useMemo(
     () => renderLineChartCanvas({
@@ -2040,15 +2370,19 @@ var AreaChart = (props) => {
     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 renderer = useChartRenderer("area");
+  const layout = useChartLayoutSimple(
+    props,
+    min,
+    max,
+    legendItems.map((it) => it.name)
+  );
   const { plotWidth: canvasWidth, plotHeight: canvasHeight } = layout;
   const coloredLines = React6.useMemo(
     () => renderAreaChartCanvas({
@@ -2264,15 +2598,19 @@ var BarChart = (props) => {
     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 renderer = useChartRenderer("bar");
+  const layout = useChartLayoutSimple(
+    props,
+    min,
+    max,
+    legendItems.map((it) => it.name)
+  );
   const { plotWidth: canvasWidth, plotHeight: canvasHeight } = layout;
   const coloredLines = React6.useMemo(() => {
     if (series.length === 0 || maxLength === 0) return [];
@@ -2353,15 +2691,17 @@ function resolveDataItems(data, labels) {
 }
 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 resolveRadius(canvasWChars, canvasHChars, renderer, customRadius, aspectRatioCorrection) {
+  const { pixelWidth, pixelHeight } = getPixelDimensions(renderer, canvasWChars, canvasHChars);
+  const { vertical } = renderer.getResolution();
+  const centerX = (pixelWidth - 1) / 2;
+  const centerY = (pixelHeight - 1) / 2;
+  const maxRadiusByWidth = Math.min(centerX, pixelWidth - 1 - centerX);
+  const verticalInsetPixels = Math.ceil(vertical / 2);
+  const maxRadiusByHeight = Math.max(0, Math.min(centerY, pixelHeight - 1 - centerY) - verticalInsetPixels) * aspectRatioCorrection;
+  const maxRadius = Math.max(0, Math.min(maxRadiusByWidth, maxRadiusByHeight));
+  const radius = customRadius !== void 0 ? Math.min(Math.max(0, customRadius), maxRadius) : maxRadius;
+  return { pixelWidth, pixelHeight, centerX, centerY, radius };
 }
 function buildAngleStops(data, total) {
   if (total <= 0) {
@@ -2401,34 +2741,35 @@ var PieChart = ({
   showLegend = true,
   legendPosition = "right",
   colors,
-  colorPalette,
-  renderer: preferredRenderer,
-  rendererChain = ["braille", "block", "ascii"],
-  heightOffset = 0,
-  widthOffset = 0
+  colorPalette
 }) => {
   const data = React6.useMemo(() => resolveDataItems(dataProp, labels), [dataProp, labels]);
+  const percentagesEarly = React6.useMemo(() => {
+    const sum = data.reduce((acc, item) => acc + item.value, 0);
+    return data.map((item) => sum > 0 ? item.value / sum * 100 : 0);
+  }, [data]);
+  const legendNamesForLayout = React6.useMemo(() => {
+    if (!showLegend) return void 0;
+    return data.map(
+      (item, i) => showLabels ? `${item.name} (${percentagesEarly[i]?.toFixed(1)}%)` : item.name
+    );
+  }, [data, showLegend, showLabels, percentagesEarly]);
   const layout = useChartLayoutSimple(
     {
       ...width !== void 0 && { width },
       ...height !== void 0 && { height },
       showAxis: false,
       showLegend,
-      legendPosition,
-      widthOffset,
-      heightOffset
+      legendPosition
     },
     0,
-    0
+    0,
+    legendNamesForLayout
   );
-  const { totalWidth, plotWidth: canvasWidth, plotHeight: canvasHeight } = layout;
-  const { getRenderer, selectBest } = useInkHud();
-  const renderer = React6.useMemo(() => {
-    if (preferredRenderer) {
-      return getRenderer(preferredRenderer);
-    }
-    return selectBest(rendererChain);
-  }, [preferredRenderer, rendererChain, getRenderer, selectBest]);
+  const { totalWidth, plotWidth: plotW, plotHeight: plotH } = layout;
+  const canvasHeight = Math.max(1, Math.min(plotH, Math.floor(plotW / 2)));
+  const canvasWidth = canvasHeight * 2;
+  const renderer = useChartRenderer("pie");
   const ratio = React6.useMemo(() => {
     if (aspectRatio !== void 0) return aspectRatio;
     const resolution = renderer.getResolution();
@@ -2443,22 +2784,20 @@ var PieChart = ({
     }
     return assignColors(data.length, colorPalette);
   }, [data.length, colors, colorPalette]);
-  const { total, percentages } = React6.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 total = React6.useMemo(() => data.reduce((acc, item) => acc + item.value, 0), [data]);
+  const percentages = percentagesEarly;
   const coloredLines = React6.useMemo(() => {
     if (data.length === 0 || total <= 0) {
       return [];
     }
-    const { pixelWidth, pixelHeight } = getPixelDimensions(renderer, canvasWidth, canvasHeight);
-    const canvas = renderer.createCanvas(pixelWidth, pixelHeight);
     const {
+      pixelWidth,
+      pixelHeight,
       centerX,
       centerY,
       radius: outerRadius
-    } = resolveRadius(pixelWidth, pixelHeight, customRadius);
+    } = resolveRadius(canvasWidth, canvasHeight, renderer, customRadius, ratio);
+    const canvas = renderer.createCanvas(pixelWidth, pixelHeight);
     const innerRadius = outerRadius * donutRatio;
     const angleStops = buildAngleStops(data, total);
     for (let y = 0; y < pixelHeight; y++) {
@@ -2495,7 +2834,7 @@ var PieChart = ({
     return data.map((item, i) => ({
       name: showLabels ? `${item.name} (${percentages[i]?.toFixed(1)}%)` : item.name,
       color: item.color ?? itemColors[i] ?? "cyan",
-      symbol: "\u25CF"
+      symbol: LEGEND.dot
     }));
   }, [data, itemColors, showLabels, percentages]);
   if (coloredLines.length === 0) {
@@ -2509,40 +2848,203 @@ var PieChart = ({
       ...segment.backgroundColor ? { backgroundColor: segment.backgroundColor } : {}
     },
     segment.text
-  ))))), showLegend && legendPosition === "right" && /* @__PURE__ */ React6__default.default.createElement(ink.Box, { marginLeft: 2 }, /* @__PURE__ */ React6__default.default.createElement(Legend, { items: legendItems, position: "vertical" }))), showLegend && legendPosition === "bottom" && /* @__PURE__ */ React6__default.default.createElement(ink.Box, { marginTop: 1 }, /* @__PURE__ */ React6__default.default.createElement(Legend, { items: legendItems, position: "horizontal" })));
+  ))))), showLegend && legendPosition === "right" && /* @__PURE__ */ React6__default.default.createElement(ink.Box, { marginLeft: 2 }, /* @__PURE__ */ React6__default.default.createElement(Legend, { items: legendItems, position: "vertical" }))), showLegend && legendPosition === "bottom" && /* @__PURE__ */ React6__default.default.createElement(ink.Box, { marginTop: 1, width: totalWidth, justifyContent: "center" }, /* @__PURE__ */ React6__default.default.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 CRC_TABLE = (() => {
+  const table = new Uint32Array(256);
+  for (let i = 0; i < 256; i++) {
+    let c = i;
+    for (let k = 0; k < 8; k++) {
+      c = c & 1 ? 3988292384 ^ c >>> 1 : c >>> 1;
+    }
+    table[i] = c;
+  }
+  return table;
+})();
+function crc32(buf) {
+  let crc = 4294967295;
+  for (let i = 0; i < buf.length; i++) {
+    crc = (CRC_TABLE[(crc ^ buf[i]) & 255] ?? 0) ^ crc >>> 8;
+  }
+  return (crc ^ 4294967295) >>> 0;
+}
+function chunk(type, data) {
+  const len = Buffer.alloc(4);
+  len.writeUInt32BE(data.length, 0);
+  const typeBytes = Buffer.from(type, "ascii");
+  const crcBytes = Buffer.alloc(4);
+  crcBytes.writeUInt32BE(crc32(Buffer.concat([typeBytes, data])), 0);
+  return Buffer.concat([len, typeBytes, data, crcBytes]);
+}
+function createRgbPng(pixels) {
+  const height = pixels.length;
+  const width = pixels[0]?.length ?? 0;
+  const ihdrData = Buffer.alloc(13);
+  ihdrData.writeUInt32BE(width, 0);
+  ihdrData.writeUInt32BE(height, 4);
+  ihdrData[8] = 8;
+  ihdrData[9] = 2;
+  const rawRows = [];
+  for (const row of pixels) {
+    const rowBuf = Buffer.alloc(1 + width * 3);
+    rowBuf[0] = 0;
+    let offset = 1;
+    for (const [r, g, b] of row) {
+      rowBuf[offset++] = r;
+      rowBuf[offset++] = g;
+      rowBuf[offset++] = b;
+    }
+    rawRows.push(rowBuf);
+  }
+  const compressed = zlib.deflateSync(Buffer.concat(rawRows), { level: 1 });
+  const PNG_SIGNATURE = Buffer.from([137, 80, 78, 71, 13, 10, 26, 10]);
+  return Buffer.concat([
+    PNG_SIGNATURE,
+    chunk("IHDR", ihdrData),
+    chunk("IDAT", compressed),
+    chunk("IEND", Buffer.alloc(0))
+  ]);
+}
+function hexToRgb(hex) {
+  const h = hex.startsWith("#") ? hex.slice(1) : hex;
+  const n = Number.parseInt(h, 16);
+  return [n >> 16 & 255, n >> 8 & 255, n & 255];
+}
+
+// src/render/image/drawing.ts
+function clamp2(v, lo, hi) {
+  return v < lo ? lo : v > hi ? hi : v;
+}
+function darken(rgb, factor) {
+  return [Math.round(rgb[0] * factor), Math.round(rgb[1] * factor), Math.round(rgb[2] * factor)];
+}
+function gradientColorFn(colors) {
+  if (colors.length === 0) return () => [128, 128, 128];
+  if (colors.length === 1) {
+    const rgb = hexToRgb(colors[0] ?? "");
+    return () => rgb;
+  }
+  const g = tinygradient__default.default(colors);
+  const palette = g.rgb(256).map((c) => hexToRgb(`#${c.toHex()}`));
+  return (normalized) => {
+    const idx = clamp2(Math.floor(normalized * 256), 0, 255);
+    return palette[idx] ?? [128, 128, 128];
+  };
+}
+function buildSparklinePixelGrid(data, widthPx, heightPx, min, max, colorFn, bgColor = [10, 10, 14]) {
+  const grid = Array.from(
+    { length: heightPx },
+    () => Array.from({ length: widthPx }, () => [...bgColor])
+  );
+  if (data.length === 0 || widthPx === 0 || heightPx === 0) return grid;
+  const range = max === min ? 1 : max - min;
+  for (let x = 0; x < widthPx; x++) {
+    const t = data.length === 1 ? 0 : x / Math.max(widthPx - 1, 1) * (data.length - 1);
+    const baseIdx = clamp2(Math.floor(t), 0, data.length - 2);
+    const frac = data.length === 1 ? 0 : t - baseIdx;
+    const raw = data.length === 1 ? data[0] ?? 0 : (data[baseIdx] ?? 0) * (1 - frac) + (data[baseIdx + 1] ?? 0) * frac;
+    const normalized = clamp2((raw - min) / range, 0, 1);
+    const yLine = Math.round((1 - normalized) * (heightPx - 1));
+    const lineRgb = colorFn(normalized);
+    const fillRgb = darken(lineRgb, 0.28);
+    for (let y = yLine + 2; y < heightPx; y++) {
+      const row = grid[y];
+      if (row !== void 0) row[x] = fillRgb;
+    }
+    if (yLine + 1 < heightPx) {
+      const row = grid[yLine + 1];
+      if (row !== void 0) row[x] = darken(lineRgb, 0.55);
+    }
+    const lineRow = grid[yLine];
+    if (lineRow !== void 0) lineRow[x] = lineRgb;
+    if (yLine - 1 >= 0) {
+      const capRow = grid[yLine - 1];
+      if (capRow !== void 0) capRow[x] = darken(lineRgb, 0.75);
+    }
+  }
+  return grid;
+}
+
+// src/components/Sparkline.tsx
 var Sparkline = ({
   data,
   width: propsWidth,
   min: userMin,
   max: userMax,
   color,
-  variant = "block"
+  variant = "block",
+  mode = "auto",
+  height = 1,
+  colors,
+  cellPx = 8
 }) => {
   const gridContext = React6.useContext(GridItemContext);
+  const theme = useTheme();
   const effectiveWidth = propsWidth ?? gridContext?.width;
-  const text = React6.useMemo(() => {
-    if (!data || data.length === 0) return "";
-    let processedData = data;
+  const { processedData, min, max } = React6.useMemo(() => {
+    if (!data || data.length === 0) return { processedData: [], min: 0, max: 1 };
+    let processed = 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]);
+      processed = lttb(data, effectiveWidth);
+    }
+    const lo = userMin ?? Math.min(...processed);
+    let hi = userMax ?? Math.max(...processed);
+    if (hi === lo) hi = lo + 1;
+    return { processedData: processed, min: lo, max: hi };
+  }, [data, effectiveWidth, userMin, userMax]);
+  const charCols = effectiveWidth ?? processedData.length;
+  const charRows = height;
+  const pngBuf = React6.useMemo(() => {
+    if (mode === "character" || charCols === 0 || processedData.length === 0) return null;
+    const effectiveColors = colors ?? (color ? [color] : theme.heatmapGradient);
+    const colorFn = gradientColorFn(effectiveColors);
+    const pixelGrid = buildSparklinePixelGrid(
+      processedData,
+      charCols * cellPx,
+      charRows * cellPx,
+      min,
+      max,
+      colorFn
+    );
+    return createRgbPng(pixelGrid);
+  }, [
+    mode,
+    charCols,
+    charRows,
+    cellPx,
+    colors,
+    color,
+    theme.heatmapGradient,
+    processedData,
+    min,
+    max
+  ]);
+  const { kittyLines, iterm2Cols } = useImageProtocol({
+    mode,
+    charCols,
+    charRows,
+    pngBuf,
+    trailingSpace: false
+  });
+  if (kittyLines !== null) {
+    return /* @__PURE__ */ React6__default.default.createElement(ink.Box, { flexDirection: "column" }, kittyLines.map((line, i) => /* @__PURE__ */ React6__default.default.createElement(ink.Text, { key: i }, line)));
+  }
+  if (iterm2Cols !== null) {
+    return /* @__PURE__ */ React6__default.default.createElement(ink.Box, { flexDirection: "column" }, Array.from({ length: charRows }, (_, i) => /* @__PURE__ */ React6__default.default.createElement(ink.Text, { key: i }, " ".repeat(iterm2Cols))));
+  }
+  if (processedData.length === 0) {
+    return /* @__PURE__ */ React6__default.default.createElement(ink.Text, null, "");
+  }
+  const levels = SPARK_LEVELS[variant];
+  const outputCols = charCols > 0 ? charCols : processedData.length;
+  const text = Array.from({ length: outputCols }, (_, i) => {
+    const dataIndex = Math.floor(i * processedData.length / outputCols);
+    const v = processedData[dataIndex] ?? 0;
+    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("");
   return /* @__PURE__ */ React6__default.default.createElement(ink.Text, { ...color ? { color } : {} }, text);
 };
 var Panel = ({
@@ -2591,10 +3093,6 @@ var Panel = ({
     /* @__PURE__ */ React6__default.default.createElement(ink.Text, { bold: true, color: borderColor || "white" }, " ", title, " ")
   ), /* @__PURE__ */ React6__default.default.createElement(ink.Box, { padding, flexDirection: "column", flexGrow: 1 }, children)));
 };
-var CHAR_SETS = {
-  unicode: { fill: "\u2588", empty: "\u2591" },
-  ascii: { fill: "#", empty: "-" }
-};
 var Gauge = ({
   value,
   min = 0,
@@ -2603,7 +3101,6 @@ var Gauge = ({
   color,
   emptyColor,
   showPercent = true,
-  variant = "unicode",
   fillChar,
   emptyChar,
   label
@@ -2611,9 +3108,8 @@ var Gauge = ({
   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 effectiveFillChar = fillChar ?? BAR.fill;
+  const effectiveEmptyChar = emptyChar ?? BAR.empty;
   const clampedValue = Math.min(Math.max(value, min), max);
   const range = max - min;
   const ratio = range === 0 ? 0 : (clampedValue - min) / range;
@@ -2660,35 +3156,31 @@ var BRAILLE_FONT = {
   "+": ["\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
+  braille: BRAILLE_FONT
 };
 var UNKNOWN = {
   block: ["   ", " ? ", "   "],
-  braille: ["\u2800\u2800", "\u2800\u2826", "\u2800\u2800"],
-  ascii: ["   ", " ? ", "   "]
+  braille: ["\u2800\u2800", "\u2800\u2826", "\u2800\u2800"]
 };
+var warnedChars = /* @__PURE__ */ new Set();
+function warnUnsupportedChar(char, style) {
+  if (process.env.NODE_ENV === "production") return;
+  const key = `${style}:${char}`;
+  if (warnedChars.has(key)) return;
+  warnedChars.add(key);
+  console.warn(
+    `[ink-hud] BigNumber: unsupported char "${char}" (style="${style}") rendered as "?". Use the prefix/suffix props for units or symbols (e.g. <BigNumber value="49" suffix="ms" />).`
+  );
+}
 function getBigChar(char, style = "block") {
-  return FONTS[style][char] || UNKNOWN[style];
+  const glyphs = FONTS[style][char];
+  if (!glyphs) {
+    warnUnsupportedChar(char, style);
+    return UNKNOWN[style];
+  }
+  return glyphs;
 }
 function renderBigString(text, style = "block") {
   const rows = ["", "", ""];
@@ -2702,42 +3194,34 @@ function renderBigString(text, style = "block") {
 }
 
 // src/components/BigNumber.tsx
-var TREND_ARROWS = {
-  unicode: { up: "\u25B2", down: "\u25BC", neutral: "\u2500" },
-  ascii: { up: "^", down: "v", neutral: "-" }
-};
 var BigNumber = ({
   value,
+  prefix,
+  suffix,
   label,
   color = "white",
   trendDirection,
   trendLabel,
-  variant = "unicode",
   fontStyle = "block",
   align = "center"
 }) => {
   const bigLines = React6.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;
+    trendArrow = TREND.up;
   } else if (trendDirection === "down") {
     trendColor = theme.semantic.error;
-    trendArrow = arrows.down;
+    trendArrow = TREND.down;
   } else if (trendDirection === "neutral") {
-    trendArrow = arrows.neutral;
+    trendArrow = TREND.neutral;
   }
   const alignItems = align === "center" ? "center" : align === "right" ? "flex-end" : "flex-start";
-  return /* @__PURE__ */ React6__default.default.createElement(ink.Box, { flexDirection: "column", alignItems }, /* @__PURE__ */ React6__default.default.createElement(ink.Box, { flexDirection: "column", marginBottom: 1 }, bigLines.map((line, i) => /* @__PURE__ */ React6__default.default.createElement(ink.Text, { key: i, color }, line))), /* @__PURE__ */ React6__default.default.createElement(ink.Box, { flexDirection: "row", gap: 1 }, label && /* @__PURE__ */ React6__default.default.createElement(ink.Text, { color: theme.semantic.textSecondary }, label), (trendLabel || trendArrow) && /* @__PURE__ */ React6__default.default.createElement(ink.Text, { color: trendColor }, trendArrow, " ", trendLabel)));
-};
-var CHAR_SETS2 = {
-  unicode: "\u25A0",
-  ascii: "#"
+  return /* @__PURE__ */ React6__default.default.createElement(ink.Box, { flexDirection: "column", alignItems }, /* @__PURE__ */ React6__default.default.createElement(ink.Box, { flexDirection: "row", alignItems: "flex-end", marginBottom: 1 }, prefix && /* @__PURE__ */ React6__default.default.createElement(ink.Box, { marginRight: 1 }, /* @__PURE__ */ React6__default.default.createElement(ink.Text, { color }, prefix)), /* @__PURE__ */ React6__default.default.createElement(ink.Box, { flexDirection: "column" }, bigLines.map((line, i) => /* @__PURE__ */ React6__default.default.createElement(ink.Text, { key: i, color }, line))), suffix && /* @__PURE__ */ React6__default.default.createElement(ink.Box, { marginLeft: 1 }, /* @__PURE__ */ React6__default.default.createElement(ink.Text, { color }, suffix))), /* @__PURE__ */ React6__default.default.createElement(ink.Box, { flexDirection: "row", gap: 1 }, label && /* @__PURE__ */ React6__default.default.createElement(ink.Text, { color: theme.semantic.textSecondary }, label), (trendLabel || trendArrow) && /* @__PURE__ */ React6__default.default.createElement(ink.Text, { color: trendColor }, trendArrow, " ", trendLabel)));
 };
-var findMinMax = (data) => {
+function findMinMax(data) {
   let minVal = Number.POSITIVE_INFINITY;
   let maxVal = Number.NEGATIVE_INFINITY;
   for (const row of data) {
@@ -2747,21 +3231,71 @@ var findMinMax = (data) => {
     }
   }
   return { min: minVal, max: maxVal };
-};
-var Heatmap = ({ data, colors, variant = "unicode", char }) => {
+}
+function gradientRgbPalette(colors, steps) {
+  if (steps === 0) return [];
+  if (colors.length === 0) return Array(steps).fill([128, 128, 128]);
+  if (colors.length === 1) {
+    const rgb = hexToRgb(colors[0] ?? "#808080");
+    return Array(steps).fill(rgb);
+  }
+  const g = tinygradient__default.default(colors);
+  return g.rgb(steps).map((c) => hexToRgb(`#${c.toHex()}`));
+}
+var Heatmap = ({
+  data,
+  colors,
+  char,
+  mode = "auto",
+  cellPx = 8
+}) => {
   const theme = useTheme();
   const effectiveColors = colors ?? theme.heatmapGradient;
-  const effectiveChar = char ?? CHAR_SETS2[variant];
+  const effectiveChar = char ?? HEATMAP.default;
+  const dataRows = data.length;
+  const dataCols = data[0]?.length ?? 0;
   const { min, max } = React6.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 = React6.useMemo(
-    () => createGradient(effectiveColors, steps),
-    [effectiveColors, steps]
-  );
+  const pngBuf = React6.useMemo(() => {
+    if (mode === "character" || !dataRows || !dataCols) return null;
+    const palette = gradientRgbPalette(effectiveColors, steps);
+    const pixelGrid = [];
+    const GAP = [16, 16, 16];
+    for (let row = 0; row < dataRows; row++) {
+      for (let py = 0; py < cellPx; py++) {
+        const pixelRow = [];
+        for (let col = 0; col < dataCols; col++) {
+          const val = data[row]?.[col] ?? 0;
+          const normalized = max === min ? 0 : (val - min) / (max - min);
+          let si = Math.floor(normalized * steps);
+          if (si >= steps) si = steps - 1;
+          const rgb = palette[si] ?? GAP;
+          for (let px = 0; px < cellPx; px++) pixelRow.push(rgb);
+          for (let px = 0; px < cellPx; px++) pixelRow.push(GAP);
+        }
+        pixelGrid.push(pixelRow);
+      }
+    }
+    return createRgbPng(pixelGrid);
+  }, [data, min, max, steps, effectiveColors, cellPx, mode, dataRows, dataCols]);
+  const { kittyLines, iterm2Cols } = useImageProtocol({
+    mode,
+    charCols: dataCols,
+    charRows: dataRows,
+    pngBuf,
+    trailingSpace: true
+  });
+  if (kittyLines !== null) {
+    return /* @__PURE__ */ React6__default.default.createElement(ink.Box, { flexDirection: "column" }, kittyLines.map((line, i) => /* @__PURE__ */ React6__default.default.createElement(ink.Text, { key: i }, line)));
+  }
+  if (iterm2Cols !== null) {
+    return /* @__PURE__ */ React6__default.default.createElement(ink.Box, { flexDirection: "column" }, data.map((_, i) => /* @__PURE__ */ React6__default.default.createElement(ink.Text, { key: i }, " ".repeat(iterm2Cols))));
+  }
+  const gradient = createGradient(effectiveColors, steps);
   return /* @__PURE__ */ React6__default.default.createElement(ink.Box, { flexDirection: "column" }, data.map((row, rowIndex) => /* @__PURE__ */ React6__default.default.createElement(ink.Box, { key: rowIndex, flexDirection: "row" }, row.map((val, colIndex) => {
     const normalized = max === min ? 0 : (val - min) / (max - min);
     let stepIndex = Math.floor(normalized * steps);
@@ -2875,7 +3409,7 @@ var SortableHeaderCell = ({
   });
   let indicator = "";
   if (isSorted) {
-    indicator = sortDirection === "asc" ? " \u25B2" : " \u25BC";
+    indicator = sortDirection === "asc" ? ` ${TREND.up}` : ` ${TREND.down}`;
   }
   return /* @__PURE__ */ React6__default.default.createElement(
     ink.Box,
@@ -3015,34 +3549,8 @@ var Table = ({
     })
   );
 };
-var CHAR_SETS3 = {
-  unicode: {
-    bar: "\u258C",
-    left: "\u256D",
-    right: "\u256E",
-    leftBottom: "\u2570",
-    rightBottom: "\u256F",
-    horizontal: "\u2500",
-    vertical: "\u2502"
-  },
-  ascii: {
-    bar: "|",
-    left: "/",
-    right: "\\",
-    leftBottom: "\\",
-    rightBottom: "/",
-    horizontal: "-",
-    vertical: "|"
-  }
-};
-var PulseBar = ({
-  records,
-  maxBars = 30,
-  variant = "unicode",
-  colors
-}) => {
+var PulseBar = ({ records = [], maxBars = 30, colors }) => {
   const theme = useTheme();
-  const chars = CHAR_SETS3[variant];
   const getColor = (status) => {
     switch (status) {
       case "good":
@@ -3056,23 +3564,27 @@ var PulseBar = ({
   const displayRecords = records.slice(-maxBars);
   const paddingCount = maxBars - displayRecords.length;
   const borderColor = theme.semantic.muted;
-  const topBorder = chars.left + chars.horizontal.repeat(maxBars) + chars.right;
-  const bottomBorder = chars.leftBottom + chars.horizontal.repeat(maxBars) + chars.rightBottom;
-  return /* @__PURE__ */ React6__default.default.createElement(ink.Box, { flexDirection: "column" }, /* @__PURE__ */ React6__default.default.createElement(ink.Text, { color: borderColor }, topBorder), /* @__PURE__ */ React6__default.default.createElement(ink.Box, { flexDirection: "row" }, /* @__PURE__ */ React6__default.default.createElement(ink.Text, { color: borderColor }, chars.vertical), paddingCount > 0 && /* @__PURE__ */ React6__default.default.createElement(ink.Text, { color: borderColor }, chars.bar.repeat(paddingCount)), displayRecords.map((record, index) => /* @__PURE__ */ React6__default.default.createElement(ink.Text, { key: index, color: getColor(record.status) }, chars.bar)), /* @__PURE__ */ React6__default.default.createElement(ink.Text, { color: borderColor }, chars.vertical)), /* @__PURE__ */ React6__default.default.createElement(ink.Text, { color: borderColor }, bottomBorder));
+  const topBorder = BORDER_ROUNDED.topLeft + BORDER_ROUNDED.horizontal.repeat(maxBars) + BORDER_ROUNDED.topRight;
+  const bottomBorder = BORDER_ROUNDED.bottomLeft + BORDER_ROUNDED.horizontal.repeat(maxBars) + BORDER_ROUNDED.bottomRight;
+  return /* @__PURE__ */ React6__default.default.createElement(ink.Box, { flexDirection: "column" }, /* @__PURE__ */ React6__default.default.createElement(ink.Text, { color: borderColor }, topBorder), /* @__PURE__ */ React6__default.default.createElement(ink.Box, { flexDirection: "row" }, /* @__PURE__ */ React6__default.default.createElement(ink.Text, { color: borderColor }, BORDER_ROUNDED.vertical), paddingCount > 0 && /* @__PURE__ */ React6__default.default.createElement(ink.Text, { color: borderColor }, BORDER_ROUNDED.bar.repeat(paddingCount)), displayRecords.map((record, index) => /* @__PURE__ */ React6__default.default.createElement(ink.Text, { key: index, color: getColor(record.status) }, BORDER_ROUNDED.bar)), /* @__PURE__ */ React6__default.default.createElement(ink.Text, { color: borderColor }, BORDER_ROUNDED.vertical)), /* @__PURE__ */ React6__default.default.createElement(ink.Text, { color: borderColor }, bottomBorder));
 };
 
 exports.AreaChart = AreaChart;
-exports.AsciiRenderer = AsciiRenderer;
 exports.Axis = Axis;
+exports.BAR = BAR;
+exports.BORDER_ROUNDED = BORDER_ROUNDED;
 exports.BarChart = BarChart;
 exports.BigNumber = BigNumber;
 exports.BlockRenderer = BlockRenderer;
 exports.BrailleRenderer = BrailleRenderer;
+exports.DEFAULT_CHART_RENDERERS = DEFAULT_CHART_RENDERERS;
 exports.Gauge = Gauge;
 exports.Grid = Grid;
 exports.GridItem = GridItem;
+exports.HEATMAP = HEATMAP;
 exports.Heatmap = Heatmap;
 exports.InkHudProvider = InkHudProvider;
+exports.LEGEND = LEGEND;
 exports.Legend = Legend;
 exports.LineChart = LineChart;
 exports.LogStream = LogStream;
@@ -3082,23 +3594,35 @@ exports.PieChart = PieChart;
 exports.PulseBar = PulseBar;
 exports.Renderer = Renderer;
 exports.RendererSelector = RendererSelector;
+exports.SPARK_LEVELS = SPARK_LEVELS;
 exports.Sparkline = Sparkline;
+exports.TREND = TREND;
 exports.Table = Table;
 exports.TerminalDetector = TerminalDetector;
 exports.ThemeProvider = ThemeProvider;
 exports.arcPoints = arcPoints;
 exports.assignColors = assignColors;
 exports.averageDownsampling = averageDownsampling;
+exports.buildSparklinePixelGrid = buildSparklinePixelGrid;
 exports.clamp = clamp;
 exports.colorToChalk = colorToChalk;
 exports.createGradient = createGradient;
+exports.createRgbPng = createRgbPng;
 exports.degreesToRadians = degreesToRadians;
+exports.detectImageProtocol = detectImageProtocol;
 exports.distanceBetweenPoints = distanceBetweenPoints;
 exports.easeInCubic = easeInCubic;
 exports.easeInOutQuad = easeInOutQuad;
 exports.easeLinear = easeLinear;
 exports.easeOutCubic = easeOutCubic;
+exports.encodeIterm2 = encodeIterm2;
+exports.encodeKitty = encodeKitty;
+exports.encodeKittyDelete = encodeKittyDelete;
+exports.encodeKittyPlaceholders = encodeKittyPlaceholders;
+exports.encodeKittyUpload = encodeKittyUpload;
 exports.fixedIntervalDownsampling = fixedIntervalDownsampling;
+exports.gradientColorFn = gradientColorFn;
+exports.hexToRgb = hexToRgb;
 exports.linearScale = linearScale;
 exports.lttb = lttb;
 exports.midpointCircle = midpointCircle;
@@ -3109,6 +3633,7 @@ exports.radiansToDegrees = radiansToDegrees;
 exports.rendererSelector = rendererSelector;
 exports.scaleToRange = scaleToRange;
 exports.terminalDetector = terminalDetector;
+exports.useImageProtocol = useImageProtocol;
 exports.useInkHud = useInkHud;
 exports.useRendererSelector = useRendererSelector;
 exports.useSemanticColors = useSemanticColors;