@opentui/core 0.0.0-20250908-4906ddad

package/index.js

@@ -0,0 +1,3721 @@
+// @bun
+import {
+  ASCIIFontSelectionHelper,
+  BorderCharArrays,
+  BorderChars,
+  CliRenderEvents,
+  CliRenderer,
+  ConsolePosition,
+  DebugOverlayCorner,
+  Edge,
+  Gutter,
+  KeyHandler,
+  LayoutEvents,
+  LogLevel,
+  MeasureMode,
+  MouseButton,
+  MouseEvent,
+  MouseParser,
+  OptimizedBuffer,
+  RGBA,
+  Renderable,
+  RenderableEvents,
+  RootRenderable,
+  Selection,
+  StyledText,
+  SyntaxStyle,
+  TerminalConsole,
+  TextAttributes,
+  TextBuffer,
+  TrackedNode,
+  bg,
+  bgBlack,
+  bgBlue,
+  bgCyan,
+  bgGreen,
+  bgMagenta,
+  bgRed,
+  bgWhite,
+  bgYellow,
+  black,
+  blink,
+  blue,
+  bold,
+  borderCharsToArray,
+  brightBlack,
+  brightBlue,
+  brightCyan,
+  brightGreen,
+  brightMagenta,
+  brightRed,
+  brightWhite,
+  brightYellow,
+  capture,
+  convertGlobalToLocalSelection,
+  coordinateToCharacterIndex,
+  createCliRenderer,
+  createTextAttributes,
+  createTrackedNode,
+  cyan,
+  delegate,
+  dim,
+  fg,
+  fonts,
+  getBorderFromSides,
+  getBorderSides,
+  getCharacterPositions,
+  getKeyHandler,
+  green,
+  h,
+  hastToStyledText,
+  hexToRgb,
+  hsvToRgb,
+  instantiate,
+  isDimensionType,
+  isFlexBasisType,
+  isMarginType,
+  isOverflowType,
+  isPaddingType,
+  isPositionType,
+  isPositionTypeType,
+  isRenderable,
+  isSizeType,
+  isVNode,
+  isValidPercentage,
+  italic,
+  magenta,
+  maybeMakeRenderable,
+  measureText,
+  nonAlphanumericKeys,
+  parseAlign,
+  parseBoxSizing,
+  parseColor,
+  parseDimension,
+  parseDirection,
+  parseDisplay,
+  parseEdge,
+  parseFlexDirection,
+  parseGutter,
+  parseJustify,
+  parseKeypress,
+  parseLogLevel,
+  parseMeasureMode,
+  parseOverflow,
+  parsePositionType,
+  parseUnit,
+  parseWrap,
+  red,
+  renderFontToFrameBuffer,
+  resolveRenderLib,
+  reverse,
+  rgbToHex,
+  setRenderLibPath,
+  strikethrough,
+  stringToStyledText,
+  t,
+  underline,
+  white,
+  wrapWithDelegates,
+  yellow
+} from "./index-d6kwx5pm.js";
+// src/post/filters.ts
+function applyScanlines(buffer, strength = 0.8, step = 2) {
+  const width = buffer.width;
+  const height = buffer.height;
+  const bg2 = buffer.buffers.bg;
+  for (let y = 0;y < height; y += step) {
+    for (let x = 0;x < width; x++) {
+      const colorIndex = (y * width + x) * 4;
+      bg2[colorIndex] *= strength;
+      bg2[colorIndex + 1] *= strength;
+      bg2[colorIndex + 2] *= strength;
+    }
+  }
+}
+function applyGrayscale(buffer) {
+  const size = buffer.width * buffer.height;
+  const fg2 = buffer.buffers.fg;
+  const bg2 = buffer.buffers.bg;
+  for (let i = 0;i < size; i++) {
+    const colorIndex = i * 4;
+    const fgR = fg2[colorIndex];
+    const fgG = fg2[colorIndex + 1];
+    const fgB = fg2[colorIndex + 2];
+    const fgLum = 0.299 * fgR + 0.587 * fgG + 0.114 * fgB;
+    fg2[colorIndex] = fgLum;
+    fg2[colorIndex + 1] = fgLum;
+    fg2[colorIndex + 2] = fgLum;
+    const bgR = bg2[colorIndex];
+    const bgG = bg2[colorIndex + 1];
+    const bgB = bg2[colorIndex + 2];
+    const bgLum = 0.299 * bgR + 0.587 * bgG + 0.114 * bgB;
+    bg2[colorIndex] = bgLum;
+    bg2[colorIndex + 1] = bgLum;
+    bg2[colorIndex + 2] = bgLum;
+  }
+}
+function applySepia(buffer) {
+  const size = buffer.width * buffer.height;
+  const fg2 = buffer.buffers.fg;
+  const bg2 = buffer.buffers.bg;
+  for (let i = 0;i < size; i++) {
+    const colorIndex = i * 4;
+    let fgR = fg2[colorIndex];
+    let fgG = fg2[colorIndex + 1];
+    let fgB = fg2[colorIndex + 2];
+    let newFgR = Math.min(1, fgR * 0.393 + fgG * 0.769 + fgB * 0.189);
+    let newFgG = Math.min(1, fgR * 0.349 + fgG * 0.686 + fgB * 0.168);
+    let newFgB = Math.min(1, fgR * 0.272 + fgG * 0.534 + fgB * 0.131);
+    fg2[colorIndex] = newFgR;
+    fg2[colorIndex + 1] = newFgG;
+    fg2[colorIndex + 2] = newFgB;
+    let bgR = bg2[colorIndex];
+    let bgG = bg2[colorIndex + 1];
+    let bgB = bg2[colorIndex + 2];
+    let newBgR = Math.min(1, bgR * 0.393 + bgG * 0.769 + bgB * 0.189);
+    let newBgG = Math.min(1, bgR * 0.349 + bgG * 0.686 + bgB * 0.168);
+    let newBgB = Math.min(1, bgR * 0.272 + bgG * 0.534 + bgB * 0.131);
+    bg2[colorIndex] = newBgR;
+    bg2[colorIndex + 1] = newBgG;
+    bg2[colorIndex + 2] = newBgB;
+  }
+}
+function applyInvert(buffer) {
+  const size = buffer.width * buffer.height;
+  const fg2 = buffer.buffers.fg;
+  const bg2 = buffer.buffers.bg;
+  for (let i = 0;i < size; i++) {
+    const colorIndex = i * 4;
+    fg2[colorIndex] = 1 - fg2[colorIndex];
+    fg2[colorIndex + 1] = 1 - fg2[colorIndex + 1];
+    fg2[colorIndex + 2] = 1 - fg2[colorIndex + 2];
+    bg2[colorIndex] = 1 - bg2[colorIndex];
+    bg2[colorIndex + 1] = 1 - bg2[colorIndex + 1];
+    bg2[colorIndex + 2] = 1 - bg2[colorIndex + 2];
+  }
+}
+function applyNoise(buffer, strength = 0.1) {
+  const size = buffer.width * buffer.height;
+  const fg2 = buffer.buffers.fg;
+  const bg2 = buffer.buffers.bg;
+  for (let i = 0;i < size; i++) {
+    const colorIndex = i * 4;
+    const noise = (Math.random() - 0.5) * strength;
+    fg2[colorIndex] = Math.max(0, Math.min(1, fg2[colorIndex] + noise));
+    fg2[colorIndex + 1] = Math.max(0, Math.min(1, fg2[colorIndex + 1] + noise));
+    fg2[colorIndex + 2] = Math.max(0, Math.min(1, fg2[colorIndex + 2] + noise));
+    bg2[colorIndex] = Math.max(0, Math.min(1, bg2[colorIndex] + noise));
+    bg2[colorIndex + 1] = Math.max(0, Math.min(1, bg2[colorIndex + 1] + noise));
+    bg2[colorIndex + 2] = Math.max(0, Math.min(1, bg2[colorIndex + 2] + noise));
+  }
+}
+function applyChromaticAberration(buffer, strength = 1) {
+  const width = buffer.width;
+  const height = buffer.height;
+  const srcFg = Float32Array.from(buffer.buffers.fg);
+  const destFg = buffer.buffers.fg;
+  const centerX = width / 2;
+  const centerY = height / 2;
+  for (let y = 0;y < height; y++) {
+    for (let x = 0;x < width; x++) {
+      const dx = x - centerX;
+      const dy = y - centerY;
+      const offset = Math.round(Math.sqrt(dx * dx + dy * dy) / Math.max(centerX, centerY) * strength);
+      const rX = Math.max(0, Math.min(width - 1, x - offset));
+      const bX = Math.max(0, Math.min(width - 1, x + offset));
+      const rIndex = (y * width + rX) * 4;
+      const gIndex = (y * width + x) * 4;
+      const bIndex = (y * width + bX) * 4;
+      const destIndex = (y * width + x) * 4;
+      destFg[destIndex] = srcFg[rIndex];
+      destFg[destIndex + 1] = srcFg[gIndex + 1];
+      destFg[destIndex + 2] = srcFg[bIndex + 2];
+    }
+  }
+}
+function applyAsciiArt(buffer, ramp = " .:-=+*#%@") {
+  const width = buffer.width;
+  const height = buffer.height;
+  const chars = buffer.buffers.char;
+  const bg2 = buffer.buffers.bg;
+  const rampLength = ramp.length;
+  for (let y = 0;y < height; y++) {
+    for (let x = 0;x < width; x++) {
+      const index = y * width + x;
+      const colorIndex = index * 4;
+      const bgR = bg2[colorIndex];
+      const bgG = bg2[colorIndex + 1];
+      const bgB = bg2[colorIndex + 2];
+      const lum = 0.299 * bgR + 0.587 * bgG + 0.114 * bgB;
+      const rampIndex = Math.min(rampLength - 1, Math.floor(lum * rampLength));
+      chars[index] = ramp[rampIndex].charCodeAt(0);
+    }
+  }
+}
+
+class DistortionEffect {
+  glitchChancePerSecond = 0.5;
+  maxGlitchLines = 3;
+  minGlitchDuration = 0.05;
+  maxGlitchDuration = 0.2;
+  maxShiftAmount = 10;
+  shiftFlipRatio = 0.6;
+  colorGlitchChance = 0.2;
+  lastGlitchTime = 0;
+  glitchDuration = 0;
+  activeGlitches = [];
+  constructor(options) {
+    if (options) {
+      Object.assign(this, options);
+    }
+  }
+  apply(buffer, deltaTime) {
+    const width = buffer.width;
+    const height = buffer.height;
+    const buf = buffer.buffers;
+    this.lastGlitchTime += deltaTime;
+    if (this.activeGlitches.length > 0 && this.lastGlitchTime >= this.glitchDuration) {
+      this.activeGlitches = [];
+      this.glitchDuration = 0;
+    }
+    if (this.activeGlitches.length === 0 && Math.random() < this.glitchChancePerSecond * deltaTime) {
+      this.lastGlitchTime = 0;
+      this.glitchDuration = this.minGlitchDuration + Math.random() * (this.maxGlitchDuration - this.minGlitchDuration);
+      const numGlitches = 1 + Math.floor(Math.random() * this.maxGlitchLines);
+      for (let i = 0;i < numGlitches; i++) {
+        const y = Math.floor(Math.random() * height);
+        let type;
+        let amount = 0;
+        const typeRoll = Math.random();
+        if (typeRoll < this.colorGlitchChance) {
+          type = "color";
+        } else {
+          const shiftRoll = (typeRoll - this.colorGlitchChance) / (1 - this.colorGlitchChance);
+          if (shiftRoll < this.shiftFlipRatio) {
+            type = "shift";
+            amount = Math.floor((Math.random() - 0.5) * 2 * this.maxShiftAmount);
+          } else {
+            type = "flip";
+          }
+        }
+        if (!this.activeGlitches.some((g) => g.y === y)) {
+          this.activeGlitches.push({ y, type, amount });
+        }
+      }
+    }
+    if (this.activeGlitches.length > 0) {
+      let tempChar = null;
+      let tempFg = null;
+      let tempBg = null;
+      let tempAttr = null;
+      for (const glitch of this.activeGlitches) {
+        const y = glitch.y;
+        if (y < 0 || y >= height)
+          continue;
+        const baseIndex = y * width;
+        if (glitch.type === "shift" || glitch.type === "flip") {
+          if (!tempChar) {
+            tempChar = new Uint32Array(width);
+            tempFg = new Float32Array(width * 4);
+            tempBg = new Float32Array(width * 4);
+            tempAttr = new Uint8Array(width);
+          }
+          try {
+            tempChar.set(buf.char.subarray(baseIndex, baseIndex + width));
+            tempFg.set(buf.fg.subarray(baseIndex * 4, (baseIndex + width) * 4));
+            tempBg.set(buf.bg.subarray(baseIndex * 4, (baseIndex + width) * 4));
+            tempAttr.set(buf.attributes.subarray(baseIndex, baseIndex + width));
+          } catch (e) {
+            console.error(`Error copying row ${y} for distortion:`, e);
+            continue;
+          }
+          if (glitch.type === "shift") {
+            const shift = glitch.amount;
+            for (let x = 0;x < width; x++) {
+              const srcX = (x - shift + width) % width;
+              const destIndex = baseIndex + x;
+              const srcTempIndex = srcX;
+              buf.char[destIndex] = tempChar[srcTempIndex];
+              buf.attributes[destIndex] = tempAttr[srcTempIndex];
+              const destColorIndex = destIndex * 4;
+              const srcTempColorIndex = srcTempIndex * 4;
+              buf.fg.set(tempFg.subarray(srcTempColorIndex, srcTempColorIndex + 4), destColorIndex);
+              buf.bg.set(tempBg.subarray(srcTempColorIndex, srcTempColorIndex + 4), destColorIndex);
+            }
+          } else {
+            for (let x = 0;x < width; x++) {
+              const srcX = width - 1 - x;
+              const destIndex = baseIndex + x;
+              const srcTempIndex = srcX;
+              buf.char[destIndex] = tempChar[srcTempIndex];
+              buf.attributes[destIndex] = tempAttr[srcTempIndex];
+              const destColorIndex = destIndex * 4;
+              const srcTempColorIndex = srcTempIndex * 4;
+              buf.fg.set(tempFg.subarray(srcTempColorIndex, srcTempColorIndex + 4), destColorIndex);
+              buf.bg.set(tempBg.subarray(srcTempColorIndex, srcTempColorIndex + 4), destColorIndex);
+            }
+          }
+        } else if (glitch.type === "color") {
+          const glitchStart = Math.floor(Math.random() * width);
+          const maxPossibleLength = width - glitchStart;
+          let glitchLength = Math.floor(Math.random() * maxPossibleLength) + 1;
+          if (Math.random() < 0.2) {
+            glitchLength = Math.floor(Math.random() * (width / 4)) + 1;
+          }
+          glitchLength = Math.min(glitchLength, maxPossibleLength);
+          for (let x = glitchStart;x < glitchStart + glitchLength; x++) {
+            if (x >= width)
+              break;
+            const destIndex = baseIndex + x;
+            const destColorIndex = destIndex * 4;
+            let rFg, gFg, bFg, rBg, gBg, bBg;
+            const colorMode = Math.random();
+            if (colorMode < 0.33) {
+              rFg = Math.random();
+              gFg = Math.random();
+              bFg = Math.random();
+              rBg = Math.random();
+              gBg = Math.random();
+              bBg = Math.random();
+            } else if (colorMode < 0.66) {
+              const emphasis = Math.random();
+              if (emphasis < 0.25) {
+                rFg = Math.random();
+                gFg = 0;
+                bFg = 0;
+              } else if (emphasis < 0.5) {
+                rFg = 0;
+                gFg = Math.random();
+                bFg = 0;
+              } else if (emphasis < 0.75) {
+                rFg = 0;
+                gFg = 0;
+                bFg = Math.random();
+              } else {
+                const glitchColorRoll = Math.random();
+                if (glitchColorRoll < 0.33) {
+                  rFg = 1;
+                  gFg = 0;
+                  bFg = 1;
+                } else if (glitchColorRoll < 0.66) {
+                  rFg = 0;
+                  gFg = 1;
+                  bFg = 1;
+                } else {
+                  rFg = 1;
+                  gFg = 1;
+                  bFg = 0;
+                }
+              }
+              if (Math.random() < 0.5) {
+                rBg = 1 - rFg;
+                gBg = 1 - gFg;
+                bBg = 1 - bFg;
+              } else {
+                rBg = rFg * (Math.random() * 0.5 + 0.2);
+                gBg = gFg * (Math.random() * 0.5 + 0.2);
+                bBg = bFg * (Math.random() * 0.5 + 0.2);
+              }
+            } else {
+              rFg = Math.random() > 0.5 ? 1 : 0;
+              gFg = Math.random() > 0.5 ? 1 : 0;
+              bFg = Math.random() > 0.5 ? 1 : 0;
+              rBg = 1 - rFg;
+              gBg = 1 - gFg;
+              bBg = 1 - bFg;
+            }
+            buf.fg[destColorIndex] = rFg;
+            buf.fg[destColorIndex + 1] = gFg;
+            buf.fg[destColorIndex + 2] = bFg;
+            buf.bg[destColorIndex] = rBg;
+            buf.bg[destColorIndex + 1] = gBg;
+            buf.bg[destColorIndex + 2] = bBg;
+          }
+        }
+      }
+    }
+  }
+}
+
+class VignetteEffect {
+  _strength;
+  precomputedBaseAttenuation = null;
+  cachedWidth = -1;
+  cachedHeight = -1;
+  constructor(strength = 0.5) {
+    this._strength = strength;
+  }
+  set strength(newStrength) {
+    this._strength = Math.max(0, newStrength);
+  }
+  get strength() {
+    return this._strength;
+  }
+  _computeFactors(width, height) {
+    this.precomputedBaseAttenuation = new Float32Array(width * height);
+    const centerX = width / 2;
+    const centerY = height / 2;
+    const maxDistSq = centerX * centerX + centerY * centerY;
+    const safeMaxDistSq = maxDistSq === 0 ? 1 : maxDistSq;
+    for (let y = 0;y < height; y++) {
+      const dy = y - centerY;
+      const dySq = dy * dy;
+      for (let x = 0;x < width; x++) {
+        const dx = x - centerX;
+        const distSq = dx * dx + dySq;
+        const baseAttenuation = Math.min(1, distSq / safeMaxDistSq);
+        const index = y * width + x;
+        this.precomputedBaseAttenuation[index] = baseAttenuation;
+      }
+    }
+    this.cachedWidth = width;
+    this.cachedHeight = height;
+  }
+  apply(buffer) {
+    const width = buffer.width;
+    const height = buffer.height;
+    const buf = buffer.buffers;
+    const size = width * height;
+    if (width !== this.cachedWidth || height !== this.cachedHeight || !this.precomputedBaseAttenuation) {
+      this._computeFactors(width, height);
+    }
+    for (let i = 0;i < size; i++) {
+      const factor = Math.max(0, 1 - this.precomputedBaseAttenuation[i] * this._strength);
+      const colorIndex = i * 4;
+      buf.fg[colorIndex] *= factor;
+      buf.fg[colorIndex + 1] *= factor;
+      buf.fg[colorIndex + 2] *= factor;
+      buf.bg[colorIndex] *= factor;
+      buf.bg[colorIndex + 1] *= factor;
+      buf.bg[colorIndex + 2] *= factor;
+    }
+  }
+}
+
+class BrightnessEffect {
+  _brightness;
+  constructor(brightness = 1) {
+    this._brightness = Math.max(0, brightness);
+  }
+  set brightness(newBrightness) {
+    this._brightness = Math.max(0, newBrightness);
+  }
+  get brightness() {
+    return this._brightness;
+  }
+  apply(buffer) {
+    const size = buffer.width * buffer.height;
+    const fg2 = buffer.buffers.fg;
+    const bg2 = buffer.buffers.bg;
+    const factor = this._brightness;
+    if (factor === 1) {
+      return;
+    }
+    for (let i = 0;i < size; i++) {
+      const colorIndex = i * 4;
+      fg2[colorIndex] = Math.min(1, fg2[colorIndex] * factor);
+      fg2[colorIndex + 1] = Math.min(1, fg2[colorIndex + 1] * factor);
+      fg2[colorIndex + 2] = Math.min(1, fg2[colorIndex + 2] * factor);
+      bg2[colorIndex] = Math.min(1, bg2[colorIndex] * factor);
+      bg2[colorIndex + 1] = Math.min(1, bg2[colorIndex + 1] * factor);
+      bg2[colorIndex + 2] = Math.min(1, bg2[colorIndex + 2] * factor);
+    }
+  }
+}
+
+class BlurEffect {
+  _radius;
+  constructor(radius = 1) {
+    this._radius = Math.max(0, Math.round(radius));
+  }
+  set radius(newRadius) {
+    this._radius = Math.max(0, Math.round(newRadius));
+  }
+  get radius() {
+    return this._radius;
+  }
+  apply(buffer) {
+    const radius = this._radius;
+    if (radius <= 0)
+      return;
+    const width = buffer.width;
+    const height = buffer.height;
+    const buf = buffer.buffers;
+    const srcFg = buf.fg;
+    const srcBg = buf.bg;
+    const destFg = buf.fg;
+    const destBg = buf.bg;
+    const chars = buf.char;
+    const size = width * height;
+    const numChannels = 4;
+    const tempBufferFg = new Float32Array(size * numChannels);
+    const tempBufferBg = new Float32Array(size * numChannels);
+    const windowSize = radius * 2 + 1;
+    for (let y = 0;y < height; y++) {
+      let sumR = 0, sumG = 0, sumB = 0, sumA = 0;
+      const baseRowIndex = y * width;
+      for (let x = -radius;x <= radius; x++) {
+        const sampleX = Math.max(0, Math.min(width - 1, x));
+        const srcIndex = (baseRowIndex + sampleX) * numChannels;
+        sumR += srcFg[srcIndex];
+        sumG += srcFg[srcIndex + 1];
+        sumB += srcFg[srcIndex + 2];
+        sumA += srcFg[srcIndex + 3];
+      }
+      for (let x = 0;x < width; x++) {
+        const destIndex = (baseRowIndex + x) * numChannels;
+        tempBufferFg[destIndex] = sumR / windowSize;
+        tempBufferFg[destIndex + 1] = sumG / windowSize;
+        tempBufferFg[destIndex + 2] = sumB / windowSize;
+        tempBufferFg[destIndex + 3] = sumA / windowSize;
+        const leavingX = Math.max(0, Math.min(width - 1, x - radius));
+        const leavingIndex = (baseRowIndex + leavingX) * numChannels;
+        sumR -= srcFg[leavingIndex];
+        sumG -= srcFg[leavingIndex + 1];
+        sumB -= srcFg[leavingIndex + 2];
+        sumA -= srcFg[leavingIndex + 3];
+        const enteringX = Math.max(0, Math.min(width - 1, x + radius + 1));
+        const enteringIndex = (baseRowIndex + enteringX) * numChannels;
+        sumR += srcFg[enteringIndex];
+        sumG += srcFg[enteringIndex + 1];
+        sumB += srcFg[enteringIndex + 2];
+        sumA += srcFg[enteringIndex + 3];
+      }
+    }
+    for (let y = 0;y < height; y++) {
+      let sumR = 0, sumG = 0, sumB = 0, sumA = 0;
+      const baseRowIndex = y * width;
+      for (let x = -radius;x <= radius; x++) {
+        const sampleX = Math.max(0, Math.min(width - 1, x));
+        const srcIndex = (baseRowIndex + sampleX) * numChannels;
+        sumR += srcBg[srcIndex];
+        sumG += srcBg[srcIndex + 1];
+        sumB += srcBg[srcIndex + 2];
+        sumA += srcBg[srcIndex + 3];
+      }
+      for (let x = 0;x < width; x++) {
+        const destIndex = (baseRowIndex + x) * numChannels;
+        tempBufferBg[destIndex] = sumR / windowSize;
+        tempBufferBg[destIndex + 1] = sumG / windowSize;
+        tempBufferBg[destIndex + 2] = sumB / windowSize;
+        tempBufferBg[destIndex + 3] = sumA / windowSize;
+        const leavingX = Math.max(0, Math.min(width - 1, x - radius));
+        const leavingIndex = (baseRowIndex + leavingX) * numChannels;
+        sumR -= srcBg[leavingIndex];
+        sumG -= srcBg[leavingIndex + 1];
+        sumB -= srcBg[leavingIndex + 2];
+        sumA -= srcBg[leavingIndex + 3];
+        const enteringX = Math.max(0, Math.min(width - 1, x + radius + 1));
+        const enteringIndex = (baseRowIndex + enteringX) * numChannels;
+        sumR += srcBg[enteringIndex];
+        sumG += srcBg[enteringIndex + 1];
+        sumB += srcBg[enteringIndex + 2];
+        sumA += srcBg[enteringIndex + 3];
+      }
+    }
+    for (let x = 0;x < width; x++) {
+      let sumR = 0, sumG = 0, sumB = 0, sumA = 0;
+      for (let y = -radius;y <= radius; y++) {
+        const sampleY = Math.max(0, Math.min(height - 1, y));
+        const srcIndex = (sampleY * width + x) * numChannels;
+        sumR += tempBufferFg[srcIndex];
+        sumG += tempBufferFg[srcIndex + 1];
+        sumB += tempBufferFg[srcIndex + 2];
+        sumA += tempBufferFg[srcIndex + 3];
+      }
+      for (let y = 0;y < height; y++) {
+        const destIndex = (y * width + x) * numChannels;
+        destFg[destIndex] = sumR / windowSize;
+        destFg[destIndex + 1] = sumG / windowSize;
+        destFg[destIndex + 2] = sumB / windowSize;
+        destFg[destIndex + 3] = sumA / windowSize;
+        const leavingY = Math.max(0, Math.min(height - 1, y - radius));
+        const leavingIndex = (leavingY * width + x) * numChannels;
+        sumR -= tempBufferFg[leavingIndex];
+        sumG -= tempBufferFg[leavingIndex + 1];
+        sumB -= tempBufferFg[leavingIndex + 2];
+        sumA -= tempBufferFg[leavingIndex + 3];
+        const enteringY = Math.max(0, Math.min(height - 1, y + radius + 1));
+        const enteringIndex = (enteringY * width + x) * numChannels;
+        sumR += tempBufferFg[enteringIndex];
+        sumG += tempBufferFg[enteringIndex + 1];
+        sumB += tempBufferFg[enteringIndex + 2];
+        sumA += tempBufferFg[enteringIndex + 3];
+      }
+    }
+    for (let x = 0;x < width; x++) {
+      let sumR = 0, sumG = 0, sumB = 0, sumA = 0;
+      for (let y = -radius;y <= radius; y++) {
+        const sampleY = Math.max(0, Math.min(height - 1, y));
+        const srcIndex = (sampleY * width + x) * numChannels;
+        sumR += tempBufferBg[srcIndex];
+        sumG += tempBufferBg[srcIndex + 1];
+        sumB += tempBufferBg[srcIndex + 2];
+        sumA += tempBufferBg[srcIndex + 3];
+      }
+      for (let y = 0;y < height; y++) {
+        const destIndex = (y * width + x) * numChannels;
+        destBg[destIndex] = sumR / windowSize;
+        destBg[destIndex + 1] = sumG / windowSize;
+        destBg[destIndex + 2] = sumB / windowSize;
+        destBg[destIndex + 3] = sumA / windowSize;
+        const leavingY = Math.max(0, Math.min(height - 1, y - radius));
+        const leavingIndex = (leavingY * width + x) * numChannels;
+        sumR -= tempBufferBg[leavingIndex];
+        sumG -= tempBufferBg[leavingIndex + 1];
+        sumB -= tempBufferBg[leavingIndex + 2];
+        sumA -= tempBufferBg[leavingIndex + 3];
+        const enteringY = Math.max(0, Math.min(height - 1, y + radius + 1));
+        const enteringIndex = (enteringY * width + x) * numChannels;
+        sumR += tempBufferBg[enteringIndex];
+        sumG += tempBufferBg[enteringIndex + 1];
+        sumB += tempBufferBg[enteringIndex + 2];
+        sumA += tempBufferBg[enteringIndex + 3];
+      }
+    }
+    const charRamp = [" ", "\u2591", "\u2592", "\u2593", " "];
+    const rampLength = charRamp.length;
+    for (let i = 0;i < size; i++) {
+      const alphaIndex = i * numChannels + 3;
+      const fgAlpha = destFg[alphaIndex];
+      const clampedAlpha = Math.max(0, Math.min(1, fgAlpha));
+      const rampIndex = Math.min(rampLength - 1, Math.floor(clampedAlpha * rampLength));
+      chars[i] = charRamp[rampIndex].charCodeAt(0);
+    }
+  }
+}
+
+class BloomEffect {
+  _threshold;
+  _strength;
+  _radius;
+  constructor(threshold = 0.8, strength = 0.2, radius = 2) {
+    this._threshold = Math.max(0, Math.min(1, threshold));
+    this._strength = Math.max(0, strength);
+    this._radius = Math.max(0, Math.round(radius));
+  }
+  set threshold(newThreshold) {
+    this._threshold = Math.max(0, Math.min(1, newThreshold));
+  }
+  get threshold() {
+    return this._threshold;
+  }
+  set strength(newStrength) {
+    this._strength = Math.max(0, newStrength);
+  }
+  get strength() {
+    return this._strength;
+  }
+  set radius(newRadius) {
+    this._radius = Math.max(0, Math.round(newRadius));
+  }
+  get radius() {
+    return this._radius;
+  }
+  apply(buffer) {
+    const threshold = this._threshold;
+    const strength = this._strength;
+    const radius = this._radius;
+    if (strength <= 0 || radius <= 0)
+      return;
+    const width = buffer.width;
+    const height = buffer.height;
+    const srcFg = Float32Array.from(buffer.buffers.fg);
+    const srcBg = Float32Array.from(buffer.buffers.bg);
+    const destFg = buffer.buffers.fg;
+    const destBg = buffer.buffers.bg;
+    const brightPixels = [];
+    for (let y = 0;y < height; y++) {
+      for (let x = 0;x < width; x++) {
+        const index = (y * width + x) * 4;
+        const fgLum = 0.299 * srcFg[index] + 0.587 * srcFg[index + 1] + 0.114 * srcFg[index + 2];
+        const bgLum = 0.299 * srcBg[index] + 0.587 * srcBg[index + 1] + 0.114 * srcBg[index + 2];
+        const lum = Math.max(fgLum, bgLum);
+        if (lum > threshold) {
+          const intensity = (lum - threshold) / (1 - threshold + 0.000001);
+          brightPixels.push({ x, y, intensity: Math.max(0, intensity) });
+        }
+      }
+    }
+    if (brightPixels.length === 0)
+      return;
+    destFg.set(srcFg);
+    destBg.set(srcBg);
+    for (const bright of brightPixels) {
+      for (let ky = -radius;ky <= radius; ky++) {
+        for (let kx = -radius;kx <= radius; kx++) {
+          if (kx === 0 && ky === 0)
+            continue;
+          const sampleX = bright.x + kx;
+          const sampleY = bright.y + ky;
+          if (sampleX >= 0 && sampleX < width && sampleY >= 0 && sampleY < height) {
+            const distSq = kx * kx + ky * ky;
+            const radiusSq = radius * radius;
+            if (distSq <= radiusSq) {
+              const falloff = 1 - distSq / radiusSq;
+              const bloomAmount = bright.intensity * strength * falloff;
+              const destIndex = (sampleY * width + sampleX) * 4;
+              destFg[destIndex] = Math.min(1, destFg[destIndex] + bloomAmount);
+              destFg[destIndex + 1] = Math.min(1, destFg[destIndex + 1] + bloomAmount);
+              destFg[destIndex + 2] = Math.min(1, destFg[destIndex + 2] + bloomAmount);
+              destBg[destIndex] = Math.min(1, destBg[destIndex] + bloomAmount);
+              destBg[destIndex + 1] = Math.min(1, destBg[destIndex + 1] + bloomAmount);
+              destBg[destIndex + 2] = Math.min(1, destBg[destIndex + 2] + bloomAmount);
+            }
+          }
+        }
+      }
+    }
+  }
+}
+// src/animation/Timeline.ts
+var easingFunctions = {
+  linear: (t2) => t2,
+  inQuad: (t2) => t2 * t2,
+  outQuad: (t2) => t2 * (2 - t2),
+  inOutQuad: (t2) => t2 < 0.5 ? 2 * t2 * t2 : -1 + (4 - 2 * t2) * t2,
+  inExpo: (t2) => t2 === 0 ? 0 : Math.pow(2, 10 * (t2 - 1)),
+  outExpo: (t2) => t2 === 1 ? 1 : 1 - Math.pow(2, -10 * t2),
+  inOutSine: (t2) => -(Math.cos(Math.PI * t2) - 1) / 2,
+  outBounce: (t2) => {
+    const n1 = 7.5625;
+    const d1 = 2.75;
+    if (t2 < 1 / d1) {
+      return n1 * t2 * t2;
+    } else if (t2 < 2 / d1) {
+      return n1 * (t2 -= 1.5 / d1) * t2 + 0.75;
+    } else if (t2 < 2.5 / d1) {
+      return n1 * (t2 -= 2.25 / d1) * t2 + 0.9375;
+    } else {
+      return n1 * (t2 -= 2.625 / d1) * t2 + 0.984375;
+    }
+  },
+  outElastic: (t2) => {
+    const c4 = 2 * Math.PI / 3;
+    return t2 === 0 ? 0 : t2 === 1 ? 1 : Math.pow(2, -10 * t2) * Math.sin((t2 * 10 - 0.75) * c4) + 1;
+  },
+  inBounce: (t2) => 1 - easingFunctions.outBounce(1 - t2),
+  inCirc: (t2) => 1 - Math.sqrt(1 - t2 * t2),
+  outCirc: (t2) => Math.sqrt(1 - Math.pow(t2 - 1, 2)),
+  inOutCirc: (t2) => {
+    if ((t2 *= 2) < 1)
+      return -0.5 * (Math.sqrt(1 - t2 * t2) - 1);
+    return 0.5 * (Math.sqrt(1 - (t2 -= 2) * t2) + 1);
+  },
+  inBack: (t2, s = 1.70158) => t2 * t2 * ((s + 1) * t2 - s),
+  outBack: (t2, s = 1.70158) => --t2 * t2 * ((s + 1) * t2 + s) + 1,
+  inOutBack: (t2, s = 1.70158) => {
+    s *= 1.525;
+    if ((t2 *= 2) < 1)
+      return 0.5 * (t2 * t2 * ((s + 1) * t2 - s));
+    return 0.5 * ((t2 -= 2) * t2 * ((s + 1) * t2 + s) + 2);
+  }
+};
+function captureInitialValues(item) {
+  if (!item.properties)
+    return;
+  if (!item.initialValues || item.initialValues.length === 0) {
+    const initialValues = [];
+    for (let i = 0;i < item.target.length; i++) {
+      const target = item.target[i];
+      const targetInitialValues = {};
+      for (const key of Object.keys(item.properties)) {
+        if (typeof target[key] === "number") {
+          targetInitialValues[key] = target[key];
+        }
+      }
+      initialValues.push(targetInitialValues);
+    }
+    item.initialValues = initialValues;
+  }
+}
+function applyAnimationAtProgress(item, progress, reversed, timelineTime, deltaTime = 0) {
+  if (!item.properties || !item.initialValues)
+    return;
+  const easingFn = easingFunctions[item.ease || "linear"] || easingFunctions.linear;
+  const easedProgress = easingFn(Math.max(0, Math.min(1, progress)));
+  const finalProgress = reversed ? 1 - easedProgress : easedProgress;
+  for (let i = 0;i < item.target.length; i++) {
+    const target = item.target[i];
+    const targetInitialValues = item.initialValues[i];
+    if (!targetInitialValues)
+      continue;
+    for (const [key, endValue] of Object.entries(item.properties)) {
+      const startValue = targetInitialValues[key];
+      const newValue = startValue + (endValue - startValue) * finalProgress;
+      target[key] = newValue;
+    }
+  }
+  if (item.onUpdate) {
+    const animation = {
+      targets: item.target,
+      progress: easedProgress,
+      currentTime: timelineTime,
+      deltaTime
+    };
+    item.onUpdate(animation);
+  }
+}
+function evaluateAnimation(item, timelineTime, deltaTime = 0) {
+  if (timelineTime < item.startTime) {
+    return;
+  }
+  const animationTime = timelineTime - item.startTime;
+  const duration = item.duration || 0;
+  if (timelineTime >= item.startTime && !item.started) {
+    captureInitialValues(item);
+    if (item.onStart) {
+      item.onStart();
+    }
+    item.started = true;
+  }
+  if (duration === 0) {
+    if (!item.completed) {
+      applyAnimationAtProgress(item, 1, false, timelineTime, deltaTime);
+      if (item.onComplete) {
+        item.onComplete();
+      }
+      item.completed = true;
+    }
+    return;
+  }
+  const maxLoops = !item.loop || item.loop === 1 ? 1 : typeof item.loop === "number" ? item.loop : Infinity;
+  const loopDelay = item.loopDelay || 0;
+  const cycleTime = duration + loopDelay;
+  let currentCycle = Math.floor(animationTime / cycleTime);
+  let timeInCycle = animationTime % cycleTime;
+  if (item.onLoop && item.currentLoop !== undefined && currentCycle > item.currentLoop && currentCycle < maxLoops) {
+    item.onLoop();
+  }
+  item.currentLoop = currentCycle;
+  if (item.onComplete && !item.completed && currentCycle === maxLoops - 1 && timeInCycle >= duration) {
+    const finalLoopReversed = (item.alternate || false) && currentCycle % 2 === 1;
+    applyAnimationAtProgress(item, 1, finalLoopReversed, timelineTime, deltaTime);
+    item.onComplete();
+    item.completed = true;
+    return;
+  }
+  if (currentCycle >= maxLoops) {
+    if (!item.completed) {
+      const finalReversed = (item.alternate || false) && (maxLoops - 1) % 2 === 1;
+      applyAnimationAtProgress(item, 1, finalReversed, timelineTime, deltaTime);
+      if (item.onComplete) {
+        item.onComplete();
+      }
+      item.completed = true;
+    }
+    return;
+  }
+  if (timeInCycle === 0 && animationTime > 0 && currentCycle < maxLoops) {
+    currentCycle = currentCycle - 1;
+    timeInCycle = cycleTime;
+  }
+  if (timeInCycle >= duration) {
+    const isReversed2 = (item.alternate || false) && currentCycle % 2 === 1;
+    applyAnimationAtProgress(item, 1, isReversed2, timelineTime, deltaTime);
+    return;
+  }
+  const progress = timeInCycle / duration;
+  const isReversed = (item.alternate || false) && currentCycle % 2 === 1;
+  applyAnimationAtProgress(item, progress, isReversed, timelineTime, deltaTime);
+}
+function evaluateCallback(item, timelineTime) {
+  if (!item.executed && timelineTime >= item.startTime && item.callback) {
+    item.callback();
+    item.executed = true;
+  }
+}
+function evaluateTimelineSync(item, timelineTime, deltaTime = 0) {
+  if (!item.timeline)
+    return;
+  if (timelineTime < item.startTime) {
+    return;
+  }
+  if (!item.timelineStarted) {
+    item.timelineStarted = true;
+    item.timeline.play();
+    const overshoot = timelineTime - item.startTime;
+    item.timeline.update(overshoot);
+    return;
+  }
+  item.timeline.update(deltaTime);
+}
+function evaluateItem(item, timelineTime, deltaTime = 0) {
+  if (item.type === "animation") {
+    evaluateAnimation(item, timelineTime, deltaTime);
+  } else if (item.type === "callback") {
+    evaluateCallback(item, timelineTime);
+  }
+}
+
+class Timeline {
+  items = [];
+  subTimelines = [];
+  currentTime = 0;
+  isPlaying = false;
+  isComplete = false;
+  duration;
+  loop;
+  synced = false;
+  autoplay;
+  onComplete;
+  onPause;
+  stateChangeListeners = [];
+  constructor(options = {}) {
+    this.duration = options.duration || 1000;
+    this.loop = options.loop === true;
+    this.autoplay = options.autoplay !== false;
+    this.onComplete = options.onComplete;
+    this.onPause = options.onPause;
+  }
+  addStateChangeListener(listener) {
+    this.stateChangeListeners.push(listener);
+  }
+  removeStateChangeListener(listener) {
+    this.stateChangeListeners = this.stateChangeListeners.filter((l) => l !== listener);
+  }
+  notifyStateChange() {
+    for (const listener of this.stateChangeListeners) {
+      listener(this);
+    }
+  }
+  add(target, properties, startTime = 0) {
+    const resolvedStartTime = typeof startTime === "string" ? 0 : startTime;
+    const animationProperties = {};
+    for (const key in properties) {
+      if (!["duration", "ease", "onUpdate", "onComplete", "onStart", "onLoop", "loop", "loopDelay", "alternate"].includes(key)) {
+        if (typeof properties[key] === "number") {
+          animationProperties[key] = properties[key];
+        }
+      }
+    }
+    this.items.push({
+      type: "animation",
+      startTime: resolvedStartTime,
+      target: Array.isArray(target) ? target : [target],
+      properties: animationProperties,
+      initialValues: [],
+      duration: properties.duration !== undefined ? properties.duration : 1000,
+      ease: properties.ease || "linear",
+      loop: properties.loop,
+      loopDelay: properties.loopDelay || 0,
+      alternate: properties.alternate || false,
+      onUpdate: properties.onUpdate,
+      onComplete: properties.onComplete,
+      onStart: properties.onStart,
+      onLoop: properties.onLoop,
+      completed: false,
+      started: false,
+      currentLoop: 0,
+      once: properties.once ?? false
+    });
+    return this;
+  }
+  once(target, properties) {
+    this.add(target, {
+      ...properties,
+      once: true
+    }, this.currentTime);
+    return this;
+  }
+  call(callback, startTime = 0) {
+    const resolvedStartTime = typeof startTime === "string" ? 0 : startTime;
+    this.items.push({
+      type: "callback",
+      startTime: resolvedStartTime,
+      callback,
+      executed: false
+    });
+    return this;
+  }
+  sync(timeline, startTime = 0) {
+    if (timeline.synced) {
+      throw new Error("Timeline already synced");
+    }
+    this.subTimelines.push({
+      type: "timeline",
+      startTime,
+      timeline
+    });
+    timeline.synced = true;
+    return this;
+  }
+  play() {
+    if (this.isComplete) {
+      return this.restart();
+    }
+    this.subTimelines.forEach((subTimeline) => {
+      if (subTimeline.timelineStarted) {
+        subTimeline.timeline.play();
+      }
+    });
+    this.isPlaying = true;
+    this.notifyStateChange();
+    return this;
+  }
+  pause() {
+    this.subTimelines.forEach((subTimeline) => {
+      subTimeline.timeline.pause();
+    });
+    this.isPlaying = false;
+    if (this.onPause) {
+      this.onPause();
+    }
+    this.notifyStateChange();
+    return this;
+  }
+  resetItems() {
+    this.items.forEach((item) => {
+      if (item.type === "callback") {
+        item.executed = false;
+      } else if (item.type === "animation") {
+        item.completed = false;
+        item.started = false;
+        item.currentLoop = 0;
+      }
+    });
+    this.subTimelines.forEach((subTimeline) => {
+      subTimeline.timelineStarted = false;
+      if (subTimeline.timeline) {
+        subTimeline.timeline.restart();
+        subTimeline.timeline.pause();
+      }
+    });
+  }
+  restart() {
+    this.isComplete = false;
+    this.currentTime = 0;
+    this.isPlaying = true;
+    this.resetItems();
+    this.notifyStateChange();
+    return this;
+  }
+  update(deltaTime) {
+    for (const subTimeline of this.subTimelines) {
+      evaluateTimelineSync(subTimeline, this.currentTime + deltaTime, deltaTime);
+    }
+    if (!this.isPlaying)
+      return;
+    this.currentTime += deltaTime;
+    for (const item of this.items) {
+      evaluateItem(item, this.currentTime, deltaTime);
+    }
+    for (let i = this.items.length - 1;i >= 0; i--) {
+      const item = this.items[i];
+      if (item.type === "animation" && item.once && item.completed) {
+        this.items.splice(i, 1);
+      }
+    }
+    if (this.loop && this.currentTime >= this.duration) {
+      const overshoot = this.currentTime % this.duration;
+      this.resetItems();
+      this.currentTime = 0;
+      if (overshoot > 0) {
+        this.update(overshoot);
+      }
+    } else if (!this.loop && this.currentTime >= this.duration) {
+      this.currentTime = this.duration;
+      this.isPlaying = false;
+      this.isComplete = true;
+      if (this.onComplete) {
+        this.onComplete();
+      }
+      this.notifyStateChange();
+    }
+  }
+}
+
+class TimelineEngine {
+  timelines = new Set;
+  renderer = null;
+  frameCallback = null;
+  isLive = false;
+  defaults = {
+    frameRate: 60
+  };
+  attach(renderer) {
+    if (this.renderer) {
+      this.detach();
+    }
+    this.renderer = renderer;
+    this.frameCallback = async (deltaTime) => {
+      this.update(deltaTime);
+    };
+    renderer.setFrameCallback(this.frameCallback);
+  }
+  detach() {
+    if (this.renderer && this.frameCallback) {
+      this.renderer.removeFrameCallback(this.frameCallback);
+      if (this.isLive) {
+        this.renderer.dropLive();
+        this.isLive = false;
+      }
+    }
+    this.renderer = null;
+    this.frameCallback = null;
+  }
+  updateLiveState() {
+    if (!this.renderer)
+      return;
+    const hasRunningTimelines = Array.from(this.timelines).some((timeline) => !timeline.synced && timeline.isPlaying && !timeline.isComplete);
+    if (hasRunningTimelines && !this.isLive) {
+      this.renderer.requestLive();
+      this.isLive = true;
+    } else if (!hasRunningTimelines && this.isLive) {
+      this.renderer.dropLive();
+      this.isLive = false;
+    }
+  }
+  onTimelineStateChange = (timeline) => {
+    this.updateLiveState();
+  };
+  register(timeline) {
+    if (!this.timelines.has(timeline)) {
+      this.timelines.add(timeline);
+      timeline.addStateChangeListener(this.onTimelineStateChange);
+      this.updateLiveState();
+    }
+  }
+  unregister(timeline) {
+    if (this.timelines.has(timeline)) {
+      this.timelines.delete(timeline);
+      timeline.removeStateChangeListener(this.onTimelineStateChange);
+      this.updateLiveState();
+    }
+  }
+  clear() {
+    for (const timeline of this.timelines) {
+      timeline.removeStateChangeListener(this.onTimelineStateChange);
+    }
+    this.timelines.clear();
+    this.updateLiveState();
+  }
+  update(deltaTime) {
+    for (const timeline of this.timelines) {
+      if (!timeline.synced) {
+        timeline.update(deltaTime);
+      }
+    }
+  }
+}
+var engine = new TimelineEngine;
+function createTimeline(options = {}) {
+  const timeline = new Timeline(options);
+  if (options.autoplay !== false) {
+    timeline.play();
+  }
+  engine.register(timeline);
+  return timeline;
+}
+// src/renderables/Box.ts
+function isGapType(value) {
+  if (value === undefined) {
+    return true;
+  }
+  if (typeof value === "number" && !Number.isNaN(value)) {
+    return true;
+  }
+  return isValidPercentage(value);
+}
+
+class BoxRenderable extends Renderable {
+  _backgroundColor;
+  _border;
+  _borderStyle;
+  _borderColor;
+  _focusedBorderColor;
+  _customBorderCharsObj;
+  _customBorderChars;
+  borderSides;
+  shouldFill;
+  _title;
+  _titleAlignment;
+  _defaultOptions = {
+    backgroundColor: "transparent",
+    borderStyle: "single",
+    border: false,
+    borderColor: "#FFFFFF",
+    shouldFill: true,
+    titleAlignment: "left",
+    focusedBorderColor: "#00AAFF"
+  };
+  constructor(ctx, options) {
+    super(ctx, options);
+    this._backgroundColor = parseColor(options.backgroundColor || this._defaultOptions.backgroundColor);
+    this._border = options.border ?? this._defaultOptions.border;
+    if (!options.border && (options.borderStyle || options.borderColor || options.focusedBorderColor || options.customBorderChars)) {
+      this._border = true;
+    }
+    this._borderStyle = options.borderStyle || this._defaultOptions.borderStyle;
+    this._borderColor = parseColor(options.borderColor || this._defaultOptions.borderColor);
+    this._focusedBorderColor = parseColor(options.focusedBorderColor || this._defaultOptions.focusedBorderColor);
+    this._customBorderCharsObj = options.customBorderChars;
+    this._customBorderChars = this._customBorderCharsObj ? borderCharsToArray(this._customBorderCharsObj) : undefined;
+    this.borderSides = getBorderSides(this._border);
+    this.shouldFill = options.shouldFill ?? this._defaultOptions.shouldFill;
+    this._title = options.title;
+    this._titleAlignment = options.titleAlignment || this._defaultOptions.titleAlignment;
+    this.applyYogaBorders();
+    const hasInitialGapProps = options.gap !== undefined || options.rowGap !== undefined || options.columnGap !== undefined;
+    if (hasInitialGapProps) {
+      this.applyYogaGap(options);
+    }
+  }
+  get customBorderChars() {
+    return this._customBorderCharsObj;
+  }
+  set customBorderChars(value) {
+    this._customBorderCharsObj = value;
+    this._customBorderChars = value ? borderCharsToArray(value) : undefined;
+    this.requestRender();
+  }
+  get backgroundColor() {
+    return this._backgroundColor;
+  }
+  set backgroundColor(value) {
+    const newColor = parseColor(value ?? this._defaultOptions.backgroundColor);
+    if (this._backgroundColor !== newColor) {
+      this._backgroundColor = newColor;
+      this.requestRender();
+    }
+  }
+  get border() {
+    return this._border;
+  }
+  set border(value) {
+    if (this._border !== value) {
+      this._border = value;
+      this.borderSides = getBorderSides(value);
+      this.applyYogaBorders();
+      this.requestRender();
+    }
+  }
+  get borderStyle() {
+    return this._borderStyle;
+  }
+  set borderStyle(value) {
+    let _value = value ?? this._defaultOptions.borderStyle;
+    if (this._borderStyle !== _value) {
+      this._borderStyle = _value;
+      this._customBorderChars = undefined;
+      this.requestRender();
+    }
+  }
+  get borderColor() {
+    return this._borderColor;
+  }
+  set borderColor(value) {
+    const newColor = parseColor(value ?? this._defaultOptions.borderColor);
+    if (this._borderColor !== newColor) {
+      this._borderColor = newColor;
+      this.requestRender();
+    }
+  }
+  get focusedBorderColor() {
+    return this._focusedBorderColor;
+  }
+  set focusedBorderColor(value) {
+    const newColor = parseColor(value ?? this._defaultOptions.focusedBorderColor);
+    if (this._focusedBorderColor !== newColor) {
+      this._focusedBorderColor = newColor;
+      if (this._focused) {
+        this.requestRender();
+      }
+    }
+  }
+  get title() {
+    return this._title;
+  }
+  set title(value) {
+    if (this._title !== value) {
+      this._title = value;
+      this.requestRender();
+    }
+  }
+  get titleAlignment() {
+    return this._titleAlignment;
+  }
+  set titleAlignment(value) {
+    if (this._titleAlignment !== value) {
+      this._titleAlignment = value;
+      this.requestRender();
+    }
+  }
+  renderSelf(buffer) {
+    const currentBorderColor = this._focused ? this._focusedBorderColor : this._borderColor;
+    buffer.drawBox({
+      x: this.x,
+      y: this.y,
+      width: this.width,
+      height: this.height,
+      borderStyle: this._borderStyle,
+      customBorderChars: this._customBorderChars,
+      border: this._border,
+      borderColor: currentBorderColor,
+      backgroundColor: this._backgroundColor,
+      shouldFill: this.shouldFill,
+      title: this._title,
+      titleAlignment: this._titleAlignment
+    });
+  }
+  getScissorRect() {
+    const baseRect = super.getScissorRect();
+    if (!this.borderSides.top && !this.borderSides.right && !this.borderSides.bottom && !this.borderSides.left) {
+      return baseRect;
+    }
+    const leftInset = this.borderSides.left ? 1 : 0;
+    const rightInset = this.borderSides.right ? 1 : 0;
+    const topInset = this.borderSides.top ? 1 : 0;
+    const bottomInset = this.borderSides.bottom ? 1 : 0;
+    return {
+      x: baseRect.x + leftInset,
+      y: baseRect.y + topInset,
+      width: Math.max(0, baseRect.width - leftInset - rightInset),
+      height: Math.max(0, baseRect.height - topInset - bottomInset)
+    };
+  }
+  applyYogaBorders() {
+    const node = this.layoutNode.yogaNode;
+    node.setBorder(Edge.Left, this.borderSides.left ? 1 : 0);
+    node.setBorder(Edge.Right, this.borderSides.right ? 1 : 0);
+    node.setBorder(Edge.Top, this.borderSides.top ? 1 : 0);
+    node.setBorder(Edge.Bottom, this.borderSides.bottom ? 1 : 0);
+    this.requestRender();
+  }
+  applyYogaGap(options) {
+    const node = this.layoutNode.yogaNode;
+    if (isGapType(options.gap)) {
+      node.setGap(Gutter.All, options.gap);
+    }
+    if (isGapType(options.rowGap)) {
+      node.setGap(Gutter.Row, options.rowGap);
+    }
+    if (isGapType(options.columnGap)) {
+      node.setGap(Gutter.Column, options.columnGap);
+    }
+  }
+  set gap(gap) {
+    if (isGapType(gap)) {
+      this.layoutNode.yogaNode.setGap(Gutter.All, gap);
+      this.requestRender();
+    }
+  }
+  set rowGap(rowGap) {
+    if (isGapType(rowGap)) {
+      this.layoutNode.yogaNode.setGap(Gutter.Row, rowGap);
+      this.requestRender();
+    }
+  }
+  set columnGap(columnGap) {
+    if (isGapType(columnGap)) {
+      this.layoutNode.yogaNode.setGap(Gutter.Column, columnGap);
+      this.requestRender();
+    }
+  }
+}
+// src/renderables/FrameBuffer.ts
+class FrameBufferRenderable extends Renderable {
+  frameBuffer;
+  respectAlpha;
+  constructor(ctx, options) {
+    super(ctx, options);
+    this.respectAlpha = options.respectAlpha || false;
+    this.frameBuffer = OptimizedBuffer.create(options.width, options.height, this._ctx.widthMethod, {
+      respectAlpha: this.respectAlpha,
+      id: options.id || `framebufferrenderable-${this.id}`
+    });
+  }
+  onResize(width, height) {
+    if (width <= 0 || height <= 0) {
+      throw new Error(`Invalid resize dimensions for FrameBufferRenderable ${this.id}: ${width}x${height}`);
+    }
+    this.frameBuffer.resize(width, height);
+    super.onResize(width, height);
+    this.requestRender();
+  }
+  renderSelf(buffer) {
+    if (!this.visible)
+      return;
+    buffer.drawFrameBuffer(this.x, this.y, this.frameBuffer);
+  }
+  destroySelf() {
+    this.frameBuffer?.destroy();
+    super.destroySelf();
+  }
+}
+// src/renderables/Text.ts
+class TextRenderable extends Renderable {
+  selectable = true;
+  _text;
+  _defaultFg;
+  _defaultBg;
+  _defaultAttributes;
+  _selectionBg;
+  _selectionFg;
+  lastLocalSelection = null;
+  textBuffer;
+  _lineInfo = { lineStarts: [], lineWidths: [] };
+  _defaultOptions = {
+    content: "",
+    fg: RGBA.fromValues(1, 1, 1, 1),
+    bg: RGBA.fromValues(0, 0, 0, 0),
+    selectionBg: undefined,
+    selectionFg: undefined,
+    selectable: true,
+    attributes: 0
+  };
+  constructor(ctx, options) {
+    super(ctx, options);
+    const content = options.content ?? this._defaultOptions.content;
+    const styledText = typeof content === "string" ? stringToStyledText(content) : content;
+    this._text = styledText;
+    this._defaultFg = parseColor(options.fg ?? this._defaultOptions.fg);
+    this._defaultBg = parseColor(options.bg ?? this._defaultOptions.bg);
+    this._defaultAttributes = options.attributes ?? this._defaultOptions.attributes;
+    this._selectionBg = options.selectionBg ? parseColor(options.selectionBg) : this._defaultOptions.selectionBg;
+    this._selectionFg = options.selectionFg ? parseColor(options.selectionFg) : this._defaultOptions.selectionFg;
+    this.selectable = options.selectable ?? this._defaultOptions.selectable;
+    this.textBuffer = TextBuffer.create(64, this._ctx.widthMethod);
+    this.textBuffer.setDefaultFg(this._defaultFg);
+    this.textBuffer.setDefaultBg(this._defaultBg);
+    this.textBuffer.setDefaultAttributes(this._defaultAttributes);
+    this.setupMeasureFunc();
+    this.updateTextBuffer(styledText);
+    this._text.mount(this);
+    this.updateTextInfo();
+  }
+  updateTextBuffer(styledText) {
+    this.textBuffer.setStyledText(styledText);
+    this.clearChunks(styledText);
+  }
+  clearChunks(styledText) {
+    styledText.chunks.forEach((chunk) => {
+      chunk.text = undefined;
+      chunk.plainText = undefined;
+    });
+  }
+  get content() {
+    return this._text;
+  }
+  get plainText() {
+    return this.textBuffer.getPlainText();
+  }
+  get textLength() {
+    return this.textBuffer.length;
+  }
+  get chunks() {
+    return this._text.chunks;
+  }
+  set content(value) {
+    const styledText = typeof value === "string" ? stringToStyledText(value) : value;
+    if (this._text !== styledText) {
+      this._text = styledText;
+      styledText.mount(this);
+      this.updateTextBuffer(styledText);
+      this.updateTextInfo();
+    }
+  }
+  get fg() {
+    return this._defaultFg;
+  }
+  set fg(value) {
+    const newColor = parseColor(value ?? this._defaultOptions.fg);
+    if (this._defaultFg !== newColor) {
+      this._defaultFg = newColor;
+      this.textBuffer.setDefaultFg(this._defaultFg);
+      this.requestRender();
+    }
+  }
+  get selectionBg() {
+    return this._selectionBg;
+  }
+  set selectionBg(value) {
+    const newColor = value ? parseColor(value) : this._defaultOptions.selectionBg;
+    if (this._selectionBg !== newColor) {
+      this._selectionBg = newColor;
+      if (this.lastLocalSelection) {
+        this.updateLocalSelection(this.lastLocalSelection);
+      }
+      this.requestRender();
+    }
+  }
+  get selectionFg() {
+    return this._selectionFg;
+  }
+  set selectionFg(value) {
+    const newColor = value ? parseColor(value) : this._defaultOptions.selectionFg;
+    if (this._selectionFg !== newColor) {
+      this._selectionFg = newColor;
+      if (this.lastLocalSelection) {
+        this.updateLocalSelection(this.lastLocalSelection);
+      }
+      this.requestRender();
+    }
+  }
+  get bg() {
+    return this._defaultBg;
+  }
+  set bg(value) {
+    const newColor = parseColor(value ?? this._defaultOptions.bg);
+    if (this._defaultBg !== newColor) {
+      this._defaultBg = newColor;
+      this.textBuffer.setDefaultBg(this._defaultBg);
+      this.requestRender();
+    }
+  }
+  get attributes() {
+    return this._defaultAttributes;
+  }
+  set attributes(value) {
+    if (this._defaultAttributes !== value) {
+      this._defaultAttributes = value;
+      this.textBuffer.setDefaultAttributes(this._defaultAttributes);
+      this.requestRender();
+    }
+  }
+  onResize(width, height) {
+    if (this.lastLocalSelection) {
+      const changed = this.updateLocalSelection(this.lastLocalSelection);
+      if (changed) {
+        this.requestRender();
+      }
+    }
+  }
+  updateLocalSelection(localSelection) {
+    if (!localSelection?.isActive) {
+      this.textBuffer.resetLocalSelection();
+      return true;
+    }
+    return this.textBuffer.setLocalSelection(localSelection.anchorX, localSelection.anchorY, localSelection.focusX, localSelection.focusY, this._selectionBg, this._selectionFg);
+  }
+  updateTextInfo() {
+    const lineInfo = this.textBuffer.lineInfo;
+    this._lineInfo.lineStarts = lineInfo.lineStarts;
+    this._lineInfo.lineWidths = lineInfo.lineWidths;
+    if (this.lastLocalSelection) {
+      const changed = this.updateLocalSelection(this.lastLocalSelection);
+      if (changed) {
+        this.requestRender();
+      }
+    }
+    this.layoutNode.yogaNode.markDirty();
+    this.requestRender();
+  }
+  setupMeasureFunc() {
+    const measureFunc = (width, widthMode, height, heightMode) => {
+      const maxLineWidth = Math.max(...this._lineInfo.lineWidths, 0);
+      const numLines = this._lineInfo.lineStarts.length || 1;
+      let measuredWidth = maxLineWidth;
+      let measuredHeight = numLines;
+      if (widthMode === MeasureMode.Exactly) {
+        measuredWidth = width;
+      } else if (widthMode === MeasureMode.AtMost) {
+        measuredWidth = Math.min(maxLineWidth, width);
+      }
+      if (heightMode === MeasureMode.Exactly) {
+        measuredHeight = height;
+      } else if (heightMode === MeasureMode.AtMost) {
+        measuredHeight = Math.min(numLines, height);
+      }
+      return {
+        width: Math.max(1, measuredWidth),
+        height: Math.max(1, measuredHeight)
+      };
+    };
+    this.layoutNode.yogaNode.setMeasureFunc(measureFunc);
+  }
+  insertChunk(chunk, index) {
+    this.textBuffer.insertEncodedChunkGroup(index ?? this.textBuffer.chunkGroupCount, chunk.text, chunk.fg, chunk.bg, chunk.attributes);
+    this.updateTextInfo();
+    this.clearChunks(this._text);
+  }
+  removeChunk(chunk) {
+    const index = this._text.chunks.indexOf(chunk);
+    if (index === -1)
+      return;
+    this.textBuffer.removeChunkGroup(index);
+    this.updateTextInfo();
+    this.clearChunks(this._text);
+  }
+  replaceChunk(chunk, oldChunk) {
+    const index = this._text.chunks.indexOf(oldChunk);
+    if (index === -1)
+      return;
+    this.textBuffer.replaceEncodedChunkGroup(index, chunk.text, chunk.fg, chunk.bg, chunk.attributes);
+    this.updateTextInfo();
+    this.clearChunks(this._text);
+  }
+  shouldStartSelection(x, y) {
+    if (!this.selectable)
+      return false;
+    const localX = x - this.x;
+    const localY = y - this.y;
+    return localX >= 0 && localX < this.width && localY >= 0 && localY < this.height;
+  }
+  onSelectionChanged(selection) {
+    const localSelection = convertGlobalToLocalSelection(selection, this.x, this.y);
+    this.lastLocalSelection = localSelection;
+    const changed = this.updateLocalSelection(localSelection);
+    if (changed) {
+      this.requestRender();
+    }
+    return this.hasSelection();
+  }
+  getSelectedText() {
+    return this.textBuffer.getSelectedText();
+  }
+  hasSelection() {
+    return this.textBuffer.hasSelection();
+  }
+  getSelection() {
+    return this.textBuffer.getSelection();
+  }
+  renderSelf(buffer) {
+    if (this.textBuffer.ptr) {
+      const clipRect = {
+        x: this.x,
+        y: this.y,
+        width: this.width,
+        height: this.height
+      };
+      buffer.drawTextBuffer(this.textBuffer, this.x, this.y, clipRect);
+    }
+  }
+  destroy() {
+    this.textBuffer.destroy();
+    super.destroy();
+  }
+}
+// src/renderables/ASCIIFont.ts
+class ASCIIFontRenderable extends FrameBufferRenderable {
+  selectable = true;
+  _text;
+  _font;
+  _fg;
+  _bg;
+  _selectionBg;
+  _selectionFg;
+  lastLocalSelection = null;
+  selectionHelper;
+  constructor(ctx, options) {
+    const font = options.font || "tiny";
+    const text = options.text || "";
+    const measurements = measureText({ text, font });
+    super(ctx, {
+      ...options,
+      width: measurements.width || 1,
+      height: measurements.height || 1,
+      respectAlpha: true
+    });
+    this._text = text;
+    this._font = font;
+    this._fg = Array.isArray(options.fg) ? options.fg : [options.fg || RGBA.fromInts(255, 255, 255, 255)];
+    this._bg = options.bg || RGBA.fromValues(0, 0, 0, 0);
+    this._selectionBg = options.selectionBg ? parseColor(options.selectionBg) : undefined;
+    this._selectionFg = options.selectionFg ? parseColor(options.selectionFg) : undefined;
+    this.selectable = options.selectable ?? true;
+    this.selectionHelper = new ASCIIFontSelectionHelper(() => this._text, () => this._font);
+    this.renderFontToBuffer();
+  }
+  get text() {
+    return this._text;
+  }
+  set text(value) {
+    this._text = value;
+    this.updateDimensions();
+    if (this.lastLocalSelection) {
+      this.selectionHelper.onLocalSelectionChanged(this.lastLocalSelection, this.width, this.height);
+    }
+    this.renderFontToBuffer();
+    this.requestRender();
+  }
+  get font() {
+    return this._font;
+  }
+  set font(value) {
+    this._font = value;
+    this.updateDimensions();
+    if (this.lastLocalSelection) {
+      this.selectionHelper.onLocalSelectionChanged(this.lastLocalSelection, this.width, this.height);
+    }
+    this.renderFontToBuffer();
+    this.requestRender();
+  }
+  get fg() {
+    return this._fg;
+  }
+  set fg(value) {
+    if (Array.isArray(value)) {
+      this._fg = value.map((color) => typeof color === "string" ? parseColor(color) : color);
+    } else {
+      this._fg = [typeof value === "string" ? parseColor(value) : value];
+    }
+    this.renderFontToBuffer();
+    this.requestRender();
+  }
+  get bg() {
+    return this._bg;
+  }
+  set bg(value) {
+    this._bg = typeof value === "string" ? parseColor(value) : value;
+    this.renderFontToBuffer();
+    this.requestRender();
+  }
+  updateDimensions() {
+    const measurements = measureText({ text: this._text, font: this._font });
+    this.width = measurements.width;
+    this.height = measurements.height;
+  }
+  shouldStartSelection(x, y) {
+    const localX = x - this.x;
+    const localY = y - this.y;
+    return this.selectionHelper.shouldStartSelection(localX, localY, this.width, this.height);
+  }
+  onSelectionChanged(selection) {
+    const localSelection = convertGlobalToLocalSelection(selection, this.x, this.y);
+    this.lastLocalSelection = localSelection;
+    const changed = this.selectionHelper.onLocalSelectionChanged(localSelection, this.width, this.height);
+    if (changed) {
+      this.renderFontToBuffer();
+      this.requestRender();
+    }
+    return changed;
+  }
+  getSelectedText() {
+    const selection = this.selectionHelper.getSelection();
+    if (!selection)
+      return "";
+    return this._text.slice(selection.start, selection.end);
+  }
+  hasSelection() {
+    return this.selectionHelper.hasSelection();
+  }
+  onResize(width, height) {
+    super.onResize(width, height);
+    this.renderFontToBuffer();
+  }
+  renderFontToBuffer() {
+    this.frameBuffer.clear(this._bg);
+    renderFontToFrameBuffer(this.frameBuffer, {
+      text: this._text,
+      x: 0,
+      y: 0,
+      fg: this._fg,
+      bg: this._bg,
+      font: this._font
+    });
+    const selection = this.selectionHelper.getSelection();
+    if (selection && (this._selectionBg || this._selectionFg)) {
+      this.renderSelectionHighlight(selection);
+    }
+  }
+  renderSelectionHighlight(selection) {
+    if (!this._selectionBg && !this._selectionFg)
+      return;
+    const selectedText = this._text.slice(selection.start, selection.end);
+    if (!selectedText)
+      return;
+    const positions = getCharacterPositions(this._text, this._font);
+    const startX = positions[selection.start] || 0;
+    const endX = selection.end < positions.length ? positions[selection.end] : measureText({ text: this._text, font: this._font }).width;
+    if (this._selectionBg) {
+      this.frameBuffer.fillRect(startX, 0, endX - startX, this.height, this._selectionBg);
+    }
+    if (this._selectionFg || this._selectionBg) {
+      renderFontToFrameBuffer(this.frameBuffer, {
+        text: selectedText,
+        x: startX,
+        y: 0,
+        fg: this._selectionFg ? [this._selectionFg] : this._fg,
+        bg: this._selectionBg || this._bg,
+        font: this._font
+      });
+    }
+  }
+}
+// src/renderables/Input.ts
+var InputRenderableEvents;
+((InputRenderableEvents2) => {
+  InputRenderableEvents2["INPUT"] = "input";
+  InputRenderableEvents2["CHANGE"] = "change";
+  InputRenderableEvents2["ENTER"] = "enter";
+})(InputRenderableEvents ||= {});
+
+class InputRenderable extends Renderable {
+  focusable = true;
+  _value = "";
+  _cursorPosition = 0;
+  _placeholder;
+  _backgroundColor;
+  _textColor;
+  _focusedBackgroundColor;
+  _focusedTextColor;
+  _placeholderColor;
+  _cursorColor;
+  _maxLength;
+  _lastCommittedValue = "";
+  _defaultOptions = {
+    backgroundColor: "transparent",
+    textColor: "#FFFFFF",
+    focusedBackgroundColor: "#1a1a1a",
+    focusedTextColor: "#FFFFFF",
+    placeholder: "",
+    placeholderColor: "#666666",
+    cursorColor: "#FFFFFF",
+    maxLength: 1000,
+    value: ""
+  };
+  constructor(ctx, options) {
+    super(ctx, { ...options, buffered: true });
+    this._backgroundColor = parseColor(options.backgroundColor || this._defaultOptions.backgroundColor);
+    this._textColor = parseColor(options.textColor || this._defaultOptions.textColor);
+    this._focusedBackgroundColor = parseColor(options.focusedBackgroundColor || options.backgroundColor || this._defaultOptions.focusedBackgroundColor);
+    this._focusedTextColor = parseColor(options.focusedTextColor || options.textColor || this._defaultOptions.focusedTextColor);
+    this._placeholder = options.placeholder || this._defaultOptions.placeholder;
+    this._value = options.value || this._defaultOptions.value;
+    this._lastCommittedValue = this._value;
+    this._cursorPosition = this._value.length;
+    this._maxLength = options.maxLength || this._defaultOptions.maxLength;
+    this._placeholderColor = parseColor(options.placeholderColor || this._defaultOptions.placeholderColor);
+    this._cursorColor = parseColor(options.cursorColor || this._defaultOptions.cursorColor);
+  }
+  updateCursorPosition() {
+    if (!this._focused)
+      return;
+    const contentX = 0;
+    const contentY = 0;
+    const contentWidth = this.width;
+    const maxVisibleChars = contentWidth - 1;
+    let displayStartIndex = 0;
+    if (this._cursorPosition >= maxVisibleChars) {
+      displayStartIndex = this._cursorPosition - maxVisibleChars + 1;
+    }
+    const cursorDisplayX = this._cursorPosition - displayStartIndex;
+    if (cursorDisplayX >= 0 && cursorDisplayX < contentWidth) {
+      const absoluteCursorX = this.x + contentX + cursorDisplayX + 1;
+      const absoluteCursorY = this.y + contentY + 1;
+      this._ctx.setCursorPosition(absoluteCursorX, absoluteCursorY, true);
+      this._ctx.setCursorColor(this._cursorColor);
+    }
+  }
+  focus() {
+    super.focus();
+    this._ctx.setCursorStyle("block", true);
+    this._ctx.setCursorColor(this._cursorColor);
+    this.updateCursorPosition();
+  }
+  blur() {
+    super.blur();
+    this._ctx.setCursorPosition(0, 0, false);
+    if (this._value !== this._lastCommittedValue) {
+      this._lastCommittedValue = this._value;
+      this.emit("change" /* CHANGE */, this._value);
+    }
+  }
+  renderSelf(buffer, deltaTime) {
+    if (!this.visible || !this.frameBuffer)
+      return;
+    if (this.isDirty) {
+      this.refreshFrameBuffer();
+    }
+  }
+  refreshFrameBuffer() {
+    if (!this.frameBuffer)
+      return;
+    const bgColor = this._focused ? this._focusedBackgroundColor : this._backgroundColor;
+    this.frameBuffer.clear(bgColor);
+    const contentX = 0;
+    const contentY = 0;
+    const contentWidth = this.width;
+    const contentHeight = this.height;
+    const displayText = this._value || this._placeholder;
+    const isPlaceholder = !this._value && this._placeholder;
+    const baseTextColor = this._focused ? this._focusedTextColor : this._textColor;
+    const textColor = isPlaceholder ? this._placeholderColor : baseTextColor;
+    const maxVisibleChars = contentWidth - 1;
+    let displayStartIndex = 0;
+    if (this._cursorPosition >= maxVisibleChars) {
+      displayStartIndex = this._cursorPosition - maxVisibleChars + 1;
+    }
+    const visibleText = displayText.substring(displayStartIndex, displayStartIndex + maxVisibleChars);
+    if (visibleText) {
+      this.frameBuffer.drawText(visibleText, contentX, contentY, textColor);
+    }
+    if (this._focused) {
+      this.updateCursorPosition();
+    }
+  }
+  get value() {
+    return this._value;
+  }
+  set value(value) {
+    const newValue = value.substring(0, this._maxLength);
+    if (this._value !== newValue) {
+      this._value = newValue;
+      this._cursorPosition = Math.min(this._cursorPosition, this._value.length);
+      this.requestRender();
+      this.updateCursorPosition();
+      this.emit("input" /* INPUT */, this._value);
+    }
+  }
+  set placeholder(placeholder) {
+    if (this._placeholder !== placeholder) {
+      this._placeholder = placeholder;
+      this.requestRender();
+    }
+  }
+  get cursorPosition() {
+    return this._cursorPosition;
+  }
+  set cursorPosition(position) {
+    const newPosition = Math.max(0, Math.min(position, this._value.length));
+    if (this._cursorPosition !== newPosition) {
+      this._cursorPosition = newPosition;
+      this.requestRender();
+      this.updateCursorPosition();
+    }
+  }
+  insertText(text) {
+    if (this._value.length + text.length > this._maxLength) {
+      return;
+    }
+    const beforeCursor = this._value.substring(0, this._cursorPosition);
+    const afterCursor = this._value.substring(this._cursorPosition);
+    this._value = beforeCursor + text + afterCursor;
+    this._cursorPosition += text.length;
+    this.requestRender();
+    this.updateCursorPosition();
+    this.emit("input" /* INPUT */, this._value);
+  }
+  deleteCharacter(direction) {
+    if (direction === "backward" && this._cursorPosition > 0) {
+      const beforeCursor = this._value.substring(0, this._cursorPosition - 1);
+      const afterCursor = this._value.substring(this._cursorPosition);
+      this._value = beforeCursor + afterCursor;
+      this._cursorPosition--;
+      this.requestRender();
+      this.updateCursorPosition();
+      this.emit("input" /* INPUT */, this._value);
+    } else if (direction === "forward" && this._cursorPosition < this._value.length) {
+      const beforeCursor = this._value.substring(0, this._cursorPosition);
+      const afterCursor = this._value.substring(this._cursorPosition + 1);
+      this._value = beforeCursor + afterCursor;
+      this.requestRender();
+      this.updateCursorPosition();
+      this.emit("input" /* INPUT */, this._value);
+    }
+  }
+  handleKeyPress(key) {
+    const keyName = typeof key === "string" ? key : key.name;
+    const keySequence = typeof key === "string" ? key : key.sequence;
+    switch (keyName) {
+      case "left":
+        this.cursorPosition = this._cursorPosition - 1;
+        return true;
+      case "right":
+        this.cursorPosition = this._cursorPosition + 1;
+        return true;
+      case "home":
+        this.cursorPosition = 0;
+        return true;
+      case "end":
+        this.cursorPosition = this._value.length;
+        return true;
+      case "backspace":
+        this.deleteCharacter("backward");
+        return true;
+      case "delete":
+        this.deleteCharacter("forward");
+        return true;
+      case "return":
+      case "enter":
+        if (this._value !== this._lastCommittedValue) {
+          this._lastCommittedValue = this._value;
+          this.emit("change" /* CHANGE */, this._value);
+        }
+        this.emit("enter" /* ENTER */, this._value);
+        return true;
+      default:
+        if (keySequence && keySequence.length === 1 && keySequence.charCodeAt(0) >= 32 && keySequence.charCodeAt(0) <= 126) {
+          this.insertText(keySequence);
+          return true;
+        }
+        break;
+    }
+    return false;
+  }
+  set maxLength(maxLength) {
+    this._maxLength = maxLength;
+    if (this._value.length > maxLength) {
+      this._value = this._value.substring(0, maxLength);
+      this.requestRender();
+    }
+  }
+  set backgroundColor(value) {
+    const newColor = parseColor(value ?? this._defaultOptions.backgroundColor);
+    if (this._backgroundColor !== newColor) {
+      this._backgroundColor = newColor;
+      this.requestRender();
+    }
+  }
+  set textColor(value) {
+    const newColor = parseColor(value ?? this._defaultOptions.textColor);
+    if (this._textColor !== newColor) {
+      this._textColor = newColor;
+      this.requestRender();
+    }
+  }
+  set focusedBackgroundColor(value) {
+    const newColor = parseColor(value ?? this._defaultOptions.focusedBackgroundColor);
+    if (this._focusedBackgroundColor !== newColor) {
+      this._focusedBackgroundColor = newColor;
+      this.requestRender();
+    }
+  }
+  set focusedTextColor(value) {
+    const newColor = parseColor(value ?? this._defaultOptions.focusedTextColor);
+    if (this._focusedTextColor !== newColor) {
+      this._focusedTextColor = newColor;
+      this.requestRender();
+    }
+  }
+  set placeholderColor(value) {
+    const newColor = parseColor(value ?? this._defaultOptions.placeholderColor);
+    if (this._placeholderColor !== newColor) {
+      this._placeholderColor = newColor;
+      this.requestRender();
+    }
+  }
+  set cursorColor(value) {
+    const newColor = parseColor(value ?? this._defaultOptions.cursorColor);
+    if (this._cursorColor !== newColor) {
+      this._cursorColor = newColor;
+      this.requestRender();
+    }
+  }
+  updateFromLayout() {
+    super.updateFromLayout();
+    this.updateCursorPosition();
+  }
+  onResize(width, height) {
+    super.onResize(width, height);
+    this.updateCursorPosition();
+  }
+  onRemove() {
+    if (this._focused) {
+      this._ctx.setCursorPosition(0, 0, false);
+    }
+  }
+}
+// src/renderables/Select.ts
+var SelectRenderableEvents;
+((SelectRenderableEvents2) => {
+  SelectRenderableEvents2["SELECTION_CHANGED"] = "selectionChanged";
+  SelectRenderableEvents2["ITEM_SELECTED"] = "itemSelected";
+})(SelectRenderableEvents ||= {});
+
+class SelectRenderable extends Renderable {
+  focusable = true;
+  _options = [];
+  selectedIndex = 0;
+  scrollOffset = 0;
+  maxVisibleItems;
+  _backgroundColor;
+  _textColor;
+  _focusedBackgroundColor;
+  _focusedTextColor;
+  _selectedBackgroundColor;
+  _selectedTextColor;
+  _descriptionColor;
+  _selectedDescriptionColor;
+  _showScrollIndicator;
+  _wrapSelection;
+  _showDescription;
+  _font;
+  _itemSpacing;
+  linesPerItem;
+  fontHeight;
+  _fastScrollStep;
+  _defaultOptions = {
+    backgroundColor: "transparent",
+    textColor: "#FFFFFF",
+    focusedBackgroundColor: "#1a1a1a",
+    focusedTextColor: "#FFFFFF",
+    selectedBackgroundColor: "#334455",
+    selectedTextColor: "#FFFF00",
+    descriptionColor: "#888888",
+    selectedDescriptionColor: "#CCCCCC",
+    showScrollIndicator: false,
+    wrapSelection: false,
+    showDescription: true,
+    itemSpacing: 0,
+    fastScrollStep: 5
+  };
+  constructor(ctx, options) {
+    super(ctx, { ...options, buffered: true });
+    this._backgroundColor = parseColor(options.backgroundColor || this._defaultOptions.backgroundColor);
+    this._textColor = parseColor(options.textColor || this._defaultOptions.textColor);
+    this._focusedBackgroundColor = parseColor(options.focusedBackgroundColor || this._defaultOptions.focusedBackgroundColor);
+    this._focusedTextColor = parseColor(options.focusedTextColor || this._defaultOptions.focusedTextColor);
+    this._options = options.options || [];
+    this._showScrollIndicator = options.showScrollIndicator ?? this._defaultOptions.showScrollIndicator;
+    this._wrapSelection = options.wrapSelection ?? this._defaultOptions.wrapSelection;
+    this._showDescription = options.showDescription ?? this._defaultOptions.showDescription;
+    this._font = options.font;
+    this._itemSpacing = options.itemSpacing || this._defaultOptions.itemSpacing;
+    this.fontHeight = this._font ? measureText({ text: "A", font: this._font }).height : 1;
+    this.linesPerItem = this._showDescription ? this._font ? this.fontHeight + 1 : 2 : this._font ? this.fontHeight : 1;
+    this.linesPerItem += this._itemSpacing;
+    this.maxVisibleItems = Math.max(1, Math.floor(this.height / this.linesPerItem));
+    this._selectedBackgroundColor = parseColor(options.selectedBackgroundColor || this._defaultOptions.selectedBackgroundColor);
+    this._selectedTextColor = parseColor(options.selectedTextColor || this._defaultOptions.selectedTextColor);
+    this._descriptionColor = parseColor(options.descriptionColor || this._defaultOptions.descriptionColor);
+    this._selectedDescriptionColor = parseColor(options.selectedDescriptionColor || this._defaultOptions.selectedDescriptionColor);
+    this._fastScrollStep = options.fastScrollStep || this._defaultOptions.fastScrollStep;
+    this.requestRender();
+  }
+  renderSelf(buffer, deltaTime) {
+    if (!this.visible || !this.frameBuffer)
+      return;
+    if (this.isDirty) {
+      this.refreshFrameBuffer();
+    }
+  }
+  refreshFrameBuffer() {
+    if (!this.frameBuffer || this._options.length === 0)
+      return;
+    const bgColor = this._focused ? this._focusedBackgroundColor : this._backgroundColor;
+    this.frameBuffer.clear(bgColor);
+    const contentX = 0;
+    const contentY = 0;
+    const contentWidth = this.width;
+    const contentHeight = this.height;
+    const visibleOptions = this._options.slice(this.scrollOffset, this.scrollOffset + this.maxVisibleItems);
+    for (let i = 0;i < visibleOptions.length; i++) {
+      const actualIndex = this.scrollOffset + i;
+      const option = visibleOptions[i];
+      const isSelected = actualIndex === this.selectedIndex;
+      const itemY = contentY + i * this.linesPerItem;
+      if (itemY + this.linesPerItem - 1 >= contentY + contentHeight)
+        break;
+      if (isSelected) {
+        const contentHeight2 = this.linesPerItem - this._itemSpacing;
+        this.frameBuffer.fillRect(contentX, itemY, contentWidth, contentHeight2, this._selectedBackgroundColor);
+      }
+      const nameContent = `${isSelected ? "\u25B6 " : "  "}${option.name}`;
+      const baseTextColor = this._focused ? this._focusedTextColor : this._textColor;
+      const nameColor = isSelected ? this._selectedTextColor : baseTextColor;
+      let descX = contentX + 3;
+      if (this._font) {
+        const indicator = isSelected ? "\u25B6 " : "  ";
+        this.frameBuffer.drawText(indicator, contentX + 1, itemY, nameColor);
+        const indicatorWidth = 2;
+        renderFontToFrameBuffer(this.frameBuffer, {
+          text: option.name,
+          x: contentX + 1 + indicatorWidth,
+          y: itemY,
+          fg: nameColor,
+          bg: isSelected ? this._selectedBackgroundColor : bgColor,
+          font: this._font
+        });
+        descX = contentX + 1 + indicatorWidth;
+      } else {
+        this.frameBuffer.drawText(nameContent, contentX + 1, itemY, nameColor);
+      }
+      if (this._showDescription && itemY + this.fontHeight < contentY + contentHeight) {
+        const descColor = isSelected ? this._selectedDescriptionColor : this._descriptionColor;
+        const descBg = this._focused ? this._focusedBackgroundColor : this._backgroundColor;
+        this.frameBuffer.drawText(option.description, descX, itemY + this.fontHeight, descColor);
+      }
+    }
+    if (this._showScrollIndicator && this._options.length > this.maxVisibleItems) {
+      this.renderScrollIndicatorToFrameBuffer(contentX, contentY, contentWidth, contentHeight);
+    }
+  }
+  renderScrollIndicatorToFrameBuffer(contentX, contentY, contentWidth, contentHeight) {
+    if (!this.frameBuffer)
+      return;
+    const scrollPercent = this.selectedIndex / Math.max(1, this._options.length - 1);
+    const indicatorHeight = Math.max(1, contentHeight - 2);
+    const indicatorY = contentY + 1 + Math.floor(scrollPercent * indicatorHeight);
+    const indicatorX = contentX + contentWidth - 1;
+    this.frameBuffer.drawText("\u2588", indicatorX, indicatorY, parseColor("#666666"));
+  }
+  get options() {
+    return this._options;
+  }
+  set options(options) {
+    this._options = options;
+    this.selectedIndex = Math.min(this.selectedIndex, Math.max(0, options.length - 1));
+    this.updateScrollOffset();
+    this.requestRender();
+  }
+  getSelectedOption() {
+    return this._options[this.selectedIndex] || null;
+  }
+  getSelectedIndex() {
+    return this.selectedIndex;
+  }
+  moveUp(steps = 1) {
+    const newIndex = this.selectedIndex - steps;
+    if (newIndex >= 0) {
+      this.selectedIndex = newIndex;
+    } else if (this._wrapSelection && this._options.length > 0) {
+      this.selectedIndex = this._options.length - 1;
+    } else {
+      this.selectedIndex = 0;
+    }
+    this.updateScrollOffset();
+    this.requestRender();
+    this.emit("selectionChanged" /* SELECTION_CHANGED */, this.selectedIndex, this.getSelectedOption());
+  }
+  moveDown(steps = 1) {
+    const newIndex = this.selectedIndex + steps;
+    if (newIndex < this._options.length) {
+      this.selectedIndex = newIndex;
+    } else if (this._wrapSelection && this._options.length > 0) {
+      this.selectedIndex = 0;
+    } else {
+      this.selectedIndex = this._options.length - 1;
+    }
+    this.updateScrollOffset();
+    this.requestRender();
+    this.emit("selectionChanged" /* SELECTION_CHANGED */, this.selectedIndex, this.getSelectedOption());
+  }
+  selectCurrent() {
+    const selected = this.getSelectedOption();
+    if (selected) {
+      this.emit("itemSelected" /* ITEM_SELECTED */, this.selectedIndex, selected);
+    }
+  }
+  setSelectedIndex(index) {
+    if (index >= 0 && index < this._options.length) {
+      this.selectedIndex = index;
+      this.updateScrollOffset();
+      this.requestRender();
+      this.emit("selectionChanged" /* SELECTION_CHANGED */, this.selectedIndex, this.getSelectedOption());
+    }
+  }
+  updateScrollOffset() {
+    if (!this._options)
+      return;
+    const halfVisible = Math.floor(this.maxVisibleItems / 2);
+    const newScrollOffset = Math.max(0, Math.min(this.selectedIndex - halfVisible, this._options.length - this.maxVisibleItems));
+    if (newScrollOffset !== this.scrollOffset) {
+      this.scrollOffset = newScrollOffset;
+      this.requestRender();
+    }
+  }
+  onResize(width, height) {
+    this.maxVisibleItems = Math.max(1, Math.floor(height / this.linesPerItem));
+    this.updateScrollOffset();
+    this.requestRender();
+  }
+  handleKeyPress(key) {
+    const keyName = typeof key === "string" ? key : key.name;
+    const isShift = typeof key !== "string" && key.shift;
+    switch (keyName) {
+      case "up":
+      case "k":
+        this.moveUp(isShift ? this._fastScrollStep : 1);
+        return true;
+      case "down":
+      case "j":
+        this.moveDown(isShift ? this._fastScrollStep : 1);
+        return true;
+      case "return":
+      case "enter":
+        this.selectCurrent();
+        return true;
+    }
+    return false;
+  }
+  get showScrollIndicator() {
+    return this._showScrollIndicator;
+  }
+  set showScrollIndicator(show) {
+    this._showScrollIndicator = show;
+    this.requestRender();
+  }
+  get showDescription() {
+    return this._showDescription;
+  }
+  set showDescription(show) {
+    if (this._showDescription !== show) {
+      this._showDescription = show;
+      this.linesPerItem = this._showDescription ? this._font ? this.fontHeight + 1 : 2 : this._font ? this.fontHeight : 1;
+      this.linesPerItem += this._itemSpacing;
+      this.maxVisibleItems = Math.max(1, Math.floor(this.height / this.linesPerItem));
+      this.updateScrollOffset();
+      this.requestRender();
+    }
+  }
+  get wrapSelection() {
+    return this._wrapSelection;
+  }
+  set wrapSelection(wrap) {
+    this._wrapSelection = wrap;
+  }
+  set backgroundColor(value) {
+    const newColor = parseColor(value ?? this._defaultOptions.backgroundColor);
+    if (this._backgroundColor !== newColor) {
+      this._backgroundColor = newColor;
+      this.requestRender();
+    }
+  }
+  set textColor(value) {
+    const newColor = parseColor(value ?? this._defaultOptions.textColor);
+    if (this._textColor !== newColor) {
+      this._textColor = newColor;
+      this.requestRender();
+    }
+  }
+  set focusedBackgroundColor(value) {
+    const newColor = parseColor(value ?? this._defaultOptions.focusedBackgroundColor);
+    if (this._focusedBackgroundColor !== newColor) {
+      this._focusedBackgroundColor = newColor;
+      this.requestRender();
+    }
+  }
+  set focusedTextColor(value) {
+    const newColor = parseColor(value ?? this._defaultOptions.focusedTextColor);
+    if (this._focusedTextColor !== newColor) {
+      this._focusedTextColor = newColor;
+      this.requestRender();
+    }
+  }
+  set selectedBackgroundColor(value) {
+    const newColor = parseColor(value ?? this._defaultOptions.selectedBackgroundColor);
+    if (this._selectedBackgroundColor !== newColor) {
+      this._selectedBackgroundColor = newColor;
+      this.requestRender();
+    }
+  }
+  set selectedTextColor(value) {
+    const newColor = parseColor(value ?? this._defaultOptions.selectedTextColor);
+    if (this._selectedTextColor !== newColor) {
+      this._selectedTextColor = newColor;
+      this.requestRender();
+    }
+  }
+  set descriptionColor(value) {
+    const newColor = parseColor(value ?? this._defaultOptions.descriptionColor);
+    if (this._descriptionColor !== newColor) {
+      this._descriptionColor = newColor;
+      this.requestRender();
+    }
+  }
+  set selectedDescriptionColor(value) {
+    const newColor = parseColor(value ?? this._defaultOptions.selectedDescriptionColor);
+    if (this._selectedDescriptionColor !== newColor) {
+      this._selectedDescriptionColor = newColor;
+      this.requestRender();
+    }
+  }
+  set font(font) {
+    this._font = font;
+    this.fontHeight = measureText({ text: "A", font: this._font }).height;
+    this.linesPerItem = this._showDescription ? this._font ? this.fontHeight + 1 : 2 : this._font ? this.fontHeight : 1;
+    this.linesPerItem += this._itemSpacing;
+    this.maxVisibleItems = Math.max(1, Math.floor(this.height / this.linesPerItem));
+    this.updateScrollOffset();
+    this.requestRender();
+  }
+  set itemSpacing(spacing) {
+    this._itemSpacing = spacing;
+    this.linesPerItem = this._showDescription ? this._font ? this.fontHeight + 1 : 2 : this._font ? this.fontHeight : 1;
+    this.linesPerItem += this._itemSpacing;
+    this.maxVisibleItems = Math.max(1, Math.floor(this.height / this.linesPerItem));
+    this.updateScrollOffset();
+    this.requestRender();
+  }
+  set fastScrollStep(step) {
+    this._fastScrollStep = step;
+  }
+}
+// src/renderables/TabSelect.ts
+var TabSelectRenderableEvents;
+((TabSelectRenderableEvents2) => {
+  TabSelectRenderableEvents2["SELECTION_CHANGED"] = "selectionChanged";
+  TabSelectRenderableEvents2["ITEM_SELECTED"] = "itemSelected";
+})(TabSelectRenderableEvents ||= {});
+function calculateDynamicHeight(showUnderline, showDescription) {
+  let height = 1;
+  if (showUnderline) {
+    height += 1;
+  }
+  if (showDescription) {
+    height += 1;
+  }
+  return height;
+}
+
+class TabSelectRenderable extends Renderable {
+  focusable = true;
+  _options = [];
+  selectedIndex = 0;
+  scrollOffset = 0;
+  _tabWidth;
+  maxVisibleTabs;
+  _backgroundColor;
+  _textColor;
+  _focusedBackgroundColor;
+  _focusedTextColor;
+  _selectedBackgroundColor;
+  _selectedTextColor;
+  _selectedDescriptionColor;
+  _showScrollArrows;
+  _showDescription;
+  _showUnderline;
+  _wrapSelection;
+  constructor(ctx, options) {
+    const calculatedHeight = calculateDynamicHeight(options.showUnderline ?? true, options.showDescription ?? true);
+    super(ctx, { ...options, height: calculatedHeight, buffered: true });
+    this._backgroundColor = parseColor(options.backgroundColor || "transparent");
+    this._textColor = parseColor(options.textColor || "#FFFFFF");
+    this._focusedBackgroundColor = parseColor(options.focusedBackgroundColor || options.backgroundColor || "#1a1a1a");
+    this._focusedTextColor = parseColor(options.focusedTextColor || options.textColor || "#FFFFFF");
+    this._options = options.options || [];
+    this._tabWidth = options.tabWidth || 20;
+    this._showDescription = options.showDescription ?? true;
+    this._showUnderline = options.showUnderline ?? true;
+    this._showScrollArrows = options.showScrollArrows ?? true;
+    this._wrapSelection = options.wrapSelection ?? false;
+    this.maxVisibleTabs = Math.max(1, Math.floor(this.width / this._tabWidth));
+    this._selectedBackgroundColor = parseColor(options.selectedBackgroundColor || "#334455");
+    this._selectedTextColor = parseColor(options.selectedTextColor || "#FFFF00");
+    this._selectedDescriptionColor = parseColor(options.selectedDescriptionColor || "#CCCCCC");
+  }
+  calculateDynamicHeight() {
+    return calculateDynamicHeight(this._showUnderline, this._showDescription);
+  }
+  renderSelf(buffer, deltaTime) {
+    if (!this.visible || !this.frameBuffer)
+      return;
+    if (this.isDirty) {
+      this.refreshFrameBuffer();
+    }
+  }
+  refreshFrameBuffer() {
+    if (!this.frameBuffer || this._options.length === 0)
+      return;
+    const bgColor = this._focused ? this._focusedBackgroundColor : this._backgroundColor;
+    this.frameBuffer.clear(bgColor);
+    const contentX = 0;
+    const contentY = 0;
+    const contentWidth = this.width;
+    const contentHeight = this.height;
+    const visibleOptions = this._options.slice(this.scrollOffset, this.scrollOffset + this.maxVisibleTabs);
+    for (let i = 0;i < visibleOptions.length; i++) {
+      const actualIndex = this.scrollOffset + i;
+      const option = visibleOptions[i];
+      const isSelected = actualIndex === this.selectedIndex;
+      const tabX = contentX + i * this._tabWidth;
+      if (tabX >= contentX + contentWidth)
+        break;
+      const actualTabWidth = Math.min(this._tabWidth, contentWidth - i * this._tabWidth);
+      if (isSelected) {
+        this.frameBuffer.fillRect(tabX, contentY, actualTabWidth, 1, this._selectedBackgroundColor);
+      }
+      const baseTextColor = this._focused ? this._focusedTextColor : this._textColor;
+      const nameColor = isSelected ? this._selectedTextColor : baseTextColor;
+      const nameContent = this.truncateText(option.name, actualTabWidth - 2);
+      this.frameBuffer.drawText(nameContent, tabX + 1, contentY, nameColor);
+      if (isSelected && this._showUnderline && contentHeight >= 2) {
+        const underlineY = contentY + 1;
+        const underlineBg = isSelected ? this._selectedBackgroundColor : bgColor;
+        this.frameBuffer.drawText("\u25AC".repeat(actualTabWidth), tabX, underlineY, nameColor, underlineBg);
+      }
+    }
+    if (this._showDescription && contentHeight >= (this._showUnderline ? 3 : 2)) {
+      const selectedOption = this.getSelectedOption();
+      if (selectedOption) {
+        const descriptionY = contentY + (this._showUnderline ? 2 : 1);
+        const descColor = this._selectedDescriptionColor;
+        const descContent = this.truncateText(selectedOption.description, contentWidth - 2);
+        this.frameBuffer.drawText(descContent, contentX + 1, descriptionY, descColor);
+      }
+    }
+    if (this._showScrollArrows && this._options.length > this.maxVisibleTabs) {
+      this.renderScrollArrowsToFrameBuffer(contentX, contentY, contentWidth, contentHeight);
+    }
+  }
+  truncateText(text, maxWidth) {
+    if (text.length <= maxWidth)
+      return text;
+    return text.substring(0, Math.max(0, maxWidth - 1)) + "\u2026";
+  }
+  renderScrollArrowsToFrameBuffer(contentX, contentY, contentWidth, contentHeight) {
+    if (!this.frameBuffer)
+      return;
+    const hasMoreLeft = this.scrollOffset > 0;
+    const hasMoreRight = this.scrollOffset + this.maxVisibleTabs < this._options.length;
+    if (hasMoreLeft) {
+      this.frameBuffer.drawText("\u2039", contentX, contentY, parseColor("#AAAAAA"));
+    }
+    if (hasMoreRight) {
+      this.frameBuffer.drawText("\u203A", contentX + contentWidth - 1, contentY, parseColor("#AAAAAA"));
+    }
+  }
+  setOptions(options) {
+    this._options = options;
+    this.selectedIndex = Math.min(this.selectedIndex, Math.max(0, options.length - 1));
+    this.updateScrollOffset();
+    this.requestRender();
+  }
+  getSelectedOption() {
+    return this._options[this.selectedIndex] || null;
+  }
+  getSelectedIndex() {
+    return this.selectedIndex;
+  }
+  moveLeft() {
+    if (this.selectedIndex > 0) {
+      this.selectedIndex--;
+    } else if (this._wrapSelection && this._options.length > 0) {
+      this.selectedIndex = this._options.length - 1;
+    } else {
+      return;
+    }
+    this.updateScrollOffset();
+    this.requestRender();
+    this.emit("selectionChanged" /* SELECTION_CHANGED */, this.selectedIndex, this.getSelectedOption());
+  }
+  moveRight() {
+    if (this.selectedIndex < this._options.length - 1) {
+      this.selectedIndex++;
+    } else if (this._wrapSelection && this._options.length > 0) {
+      this.selectedIndex = 0;
+    } else {
+      return;
+    }
+    this.updateScrollOffset();
+    this.requestRender();
+    this.emit("selectionChanged" /* SELECTION_CHANGED */, this.selectedIndex, this.getSelectedOption());
+  }
+  selectCurrent() {
+    const selected = this.getSelectedOption();
+    if (selected) {
+      this.emit("itemSelected" /* ITEM_SELECTED */, this.selectedIndex, selected);
+    }
+  }
+  setSelectedIndex(index) {
+    if (index >= 0 && index < this._options.length) {
+      this.selectedIndex = index;
+      this.updateScrollOffset();
+      this.requestRender();
+      this.emit("selectionChanged" /* SELECTION_CHANGED */, this.selectedIndex, this.getSelectedOption());
+    }
+  }
+  updateScrollOffset() {
+    const halfVisible = Math.floor(this.maxVisibleTabs / 2);
+    const newScrollOffset = Math.max(0, Math.min(this.selectedIndex - halfVisible, this._options.length - this.maxVisibleTabs));
+    if (newScrollOffset !== this.scrollOffset) {
+      this.scrollOffset = newScrollOffset;
+      this.requestRender();
+    }
+  }
+  onResize(width, height) {
+    this.maxVisibleTabs = Math.max(1, Math.floor(width / this._tabWidth));
+    this.updateScrollOffset();
+    this.requestRender();
+  }
+  setTabWidth(tabWidth) {
+    if (this._tabWidth === tabWidth)
+      return;
+    this._tabWidth = tabWidth;
+    this.maxVisibleTabs = Math.max(1, Math.floor(this.width / this._tabWidth));
+    this.updateScrollOffset();
+    this.requestRender();
+  }
+  getTabWidth() {
+    return this._tabWidth;
+  }
+  handleKeyPress(key) {
+    const keyName = typeof key === "string" ? key : key.name;
+    switch (keyName) {
+      case "left":
+      case "[":
+        this.moveLeft();
+        return true;
+      case "right":
+      case "]":
+        this.moveRight();
+        return true;
+      case "return":
+      case "enter":
+        this.selectCurrent();
+        return true;
+    }
+    return false;
+  }
+  get options() {
+    return this._options;
+  }
+  set options(options) {
+    this._options = options;
+    this.selectedIndex = Math.min(this.selectedIndex, Math.max(0, options.length - 1));
+    this.updateScrollOffset();
+    this.requestRender();
+  }
+  set backgroundColor(color) {
+    this._backgroundColor = parseColor(color);
+    this.requestRender();
+  }
+  set textColor(color) {
+    this._textColor = parseColor(color);
+    this.requestRender();
+  }
+  set focusedBackgroundColor(color) {
+    this._focusedBackgroundColor = parseColor(color);
+    this.requestRender();
+  }
+  set focusedTextColor(color) {
+    this._focusedTextColor = parseColor(color);
+    this.requestRender();
+  }
+  set selectedBackgroundColor(color) {
+    this._selectedBackgroundColor = parseColor(color);
+    this.requestRender();
+  }
+  set selectedTextColor(color) {
+    this._selectedTextColor = parseColor(color);
+    this.requestRender();
+  }
+  set selectedDescriptionColor(color) {
+    this._selectedDescriptionColor = parseColor(color);
+    this.requestRender();
+  }
+  get showDescription() {
+    return this._showDescription;
+  }
+  set showDescription(show) {
+    if (this._showDescription !== show) {
+      this._showDescription = show;
+      const newHeight = this.calculateDynamicHeight();
+      this.height = newHeight;
+      this.requestRender();
+    }
+  }
+  get showUnderline() {
+    return this._showUnderline;
+  }
+  set showUnderline(show) {
+    if (this._showUnderline !== show) {
+      this._showUnderline = show;
+      const newHeight = this.calculateDynamicHeight();
+      this.height = newHeight;
+      this.requestRender();
+    }
+  }
+  get showScrollArrows() {
+    return this._showScrollArrows;
+  }
+  set showScrollArrows(show) {
+    if (this._showScrollArrows !== show) {
+      this._showScrollArrows = show;
+      this.requestRender();
+    }
+  }
+  get wrapSelection() {
+    return this._wrapSelection;
+  }
+  set wrapSelection(wrap) {
+    this._wrapSelection = wrap;
+  }
+  get tabWidth() {
+    return this._tabWidth;
+  }
+  set tabWidth(tabWidth) {
+    if (this._tabWidth === tabWidth)
+      return;
+    this._tabWidth = tabWidth;
+    this.maxVisibleTabs = Math.max(1, Math.floor(this.width / this._tabWidth));
+    this.updateScrollOffset();
+    this.requestRender();
+  }
+}
+// src/renderables/Slider.ts
+var defaultThumbBackgroundColor = RGBA.fromHex("#9a9ea3");
+var defaultTrackBackgroundColor = RGBA.fromHex("#252527");
+
+class SliderRenderable extends Renderable {
+  orientation;
+  _thumbSize;
+  _thumbPosition;
+  _backgroundColor;
+  _foregroundColor;
+  _onChange;
+  constructor(ctx, options) {
+    super(ctx, options);
+    this.orientation = options.orientation;
+    this._thumbSize = options.thumbSize ?? 1;
+    this._thumbPosition = options.thumbPosition ?? 0;
+    this._onChange = options.onChange;
+    this._backgroundColor = options.backgroundColor ? parseColor(options.backgroundColor) : defaultTrackBackgroundColor;
+    this._foregroundColor = options.foregroundColor ? parseColor(options.foregroundColor) : defaultThumbBackgroundColor;
+    this.setupMouseHandling();
+  }
+  get thumbSize() {
+    return this._thumbSize;
+  }
+  set thumbSize(value) {
+    const clamped = Math.max(1, Math.min(value, this.orientation === "vertical" ? this.height : this.width));
+    if (clamped !== this._thumbSize) {
+      this._thumbSize = clamped;
+      this.requestRender();
+    }
+  }
+  get thumbPosition() {
+    return this._thumbPosition;
+  }
+  set thumbPosition(value) {
+    const clamped = Math.max(0, Math.min(1, value));
+    if (clamped !== this._thumbPosition) {
+      this._thumbPosition = clamped;
+      this._onChange?.(clamped);
+      this.emit("change", { position: clamped });
+      this.requestRender();
+    }
+  }
+  get backgroundColor() {
+    return this._backgroundColor;
+  }
+  set backgroundColor(value) {
+    this._backgroundColor = parseColor(value);
+    this.requestRender();
+  }
+  get foregroundColor() {
+    return this._foregroundColor;
+  }
+  set foregroundColor(value) {
+    this._foregroundColor = parseColor(value);
+    this.requestRender();
+  }
+  setupMouseHandling() {
+    let isDragging = false;
+    let relativeStartPos = 0;
+    this.onMouseDown = (event) => {
+      event.stopPropagation();
+      event.preventDefault();
+      isDragging = true;
+      const thumbRect = this.getThumbRect();
+      const isOnThumb = event.x >= thumbRect.x && event.x < thumbRect.x + thumbRect.width && event.y >= thumbRect.y && event.y < thumbRect.y + thumbRect.height;
+      if (isOnThumb) {
+        relativeStartPos = this.orientation === "vertical" ? event.y - thumbRect.y : event.x - thumbRect.x;
+      } else {
+        relativeStartPos = this.orientation === "vertical" ? thumbRect.height / 2 : thumbRect.width / 2;
+      }
+      this.updatePositionFromMouse(event, relativeStartPos);
+    };
+    this.onMouseDrag = (event) => {
+      if (!isDragging)
+        return;
+      event.stopPropagation();
+      this.updatePositionFromMouse(event, relativeStartPos);
+    };
+    this.onMouseUp = () => {
+      isDragging = false;
+    };
+  }
+  updatePositionFromMouse(event, relativeStartPos) {
+    const trackStart = this.orientation === "vertical" ? this.y : this.x;
+    const trackSize = this.orientation === "vertical" ? this.height : this.width;
+    const mousePos = this.orientation === "vertical" ? event.y : event.x;
+    const thumbStartPos = mousePos - trackStart - relativeStartPos;
+    const maxThumbStartPos = trackSize - this._thumbSize;
+    const clampedThumbStartPos = Math.max(0, Math.min(maxThumbStartPos, thumbStartPos));
+    const newPosition = maxThumbStartPos > 0 ? clampedThumbStartPos / maxThumbStartPos : 0;
+    this.thumbPosition = newPosition;
+  }
+  getThumbPosition() {
+    const trackSize = this.orientation === "vertical" ? this.height : this.width;
+    const maxPos = trackSize - this._thumbSize;
+    return Math.round(this._thumbPosition * maxPos);
+  }
+  getThumbRect() {
+    const thumbPos = this.getThumbPosition();
+    if (this.orientation === "vertical") {
+      return {
+        x: this.x,
+        y: this.y + thumbPos,
+        width: this.width,
+        height: this._thumbSize
+      };
+    } else {
+      return {
+        x: this.x + thumbPos,
+        y: this.y,
+        width: this._thumbSize,
+        height: this.height
+      };
+    }
+  }
+  renderSelf(buffer) {
+    buffer.fillRect(this.x, this.y, this.width, this.height, this._backgroundColor);
+    const thumbRect = this.getThumbRect();
+    buffer.fillRect(thumbRect.x, thumbRect.y, thumbRect.width, thumbRect.height, this._foregroundColor);
+  }
+}
+
+// src/renderables/ScrollBar.ts
+class ScrollBarRenderable extends Renderable {
+  slider;
+  startArrow;
+  endArrow;
+  orientation;
+  focusable = true;
+  _scrollSize = 0;
+  _scrollPosition = 0;
+  _viewportSize = 0;
+  _showArrows = false;
+  _manualVisibility = false;
+  _onChange;
+  scrollStep = null;
+  get visible() {
+    return super.visible;
+  }
+  set visible(value) {
+    this._manualVisibility = true;
+    super.visible = value;
+  }
+  resetVisibilityControl() {
+    this._manualVisibility = false;
+    this.recalculateVisibility();
+  }
+  get scrollSize() {
+    return this._scrollSize;
+  }
+  get scrollPosition() {
+    return this._scrollPosition;
+  }
+  get viewportSize() {
+    return this._viewportSize;
+  }
+  set scrollSize(value) {
+    if (value === this.scrollSize)
+      return;
+    this._scrollSize = value;
+    this.recalculateVisibility();
+    this.scrollPosition = this.scrollPosition;
+  }
+  set scrollPosition(value) {
+    const newPosition = Math.round(Math.min(Math.max(0, value), this.scrollSize - this.viewportSize));
+    if (newPosition !== this._scrollPosition) {
+      this._scrollPosition = newPosition;
+      this.updateSliderFromScrollState();
+      this._onChange?.(newPosition);
+      this.emit("change", { position: newPosition });
+    }
+  }
+  set viewportSize(value) {
+    if (value === this.viewportSize)
+      return;
+    this._viewportSize = value;
+    this.recalculateVisibility();
+    this.scrollPosition = this.scrollPosition;
+  }
+  get showArrows() {
+    return this._showArrows;
+  }
+  set showArrows(value) {
+    if (value === this._showArrows)
+      return;
+    this._showArrows = value;
+    this.startArrow.visible = value;
+    this.endArrow.visible = value;
+  }
+  constructor(ctx, { trackOptions, arrowOptions, orientation, showArrows = false, ...options }) {
+    super(ctx, {
+      flexDirection: orientation === "vertical" ? "column" : "row",
+      alignSelf: "stretch",
+      alignItems: "stretch",
+      ...options
+    });
+    this._onChange = options.onChange;
+    this.orientation = orientation;
+    this._showArrows = showArrows;
+    this.slider = new SliderRenderable(ctx, {
+      orientation,
+      onChange: (position) => {
+        const scrollRange = Math.max(0, this._scrollSize - this._viewportSize);
+        this._scrollPosition = Math.round(position * scrollRange);
+        this._onChange?.(this._scrollPosition);
+        this.emit("change", { position: this._scrollPosition });
+      },
+      ...orientation === "vertical" ? {
+        width: 2,
+        height: "100%",
+        marginLeft: "auto"
+      } : {
+        width: "100%",
+        height: 1,
+        marginTop: "auto"
+      },
+      flexGrow: 1,
+      flexShrink: 1,
+      ...trackOptions
+    });
+    this.updateSliderFromScrollState();
+    const arrowOpts = arrowOptions ? {
+      foregroundColor: arrowOptions.backgroundColor,
+      backgroundColor: arrowOptions.backgroundColor,
+      attributes: arrowOptions.attributes,
+      ...arrowOptions
+    } : {};
+    this.startArrow = new ArrowRenderable(ctx, {
+      alignSelf: "center",
+      visible: this.showArrows,
+      direction: this.orientation === "vertical" ? "up" : "left",
+      height: this.orientation === "vertical" ? 1 : 1,
+      ...arrowOpts
+    });
+    this.endArrow = new ArrowRenderable(ctx, {
+      alignSelf: "center",
+      visible: this.showArrows,
+      direction: this.orientation === "vertical" ? "down" : "right",
+      height: this.orientation === "vertical" ? 1 : 1,
+      ...arrowOpts
+    });
+    this.add(this.startArrow);
+    this.add(this.slider);
+    this.add(this.endArrow);
+    let startArrowMouseTimeout = undefined;
+    let endArrowMouseTimeout = undefined;
+    this.startArrow.onMouseDown = (event) => {
+      event.stopPropagation();
+      event.preventDefault();
+      this.scrollBy(-0.5, "viewport");
+      startArrowMouseTimeout = setTimeout(() => {
+        this.scrollBy(-0.5, "viewport");
+        startArrowMouseTimeout = setInterval(() => {
+          this.scrollBy(-0.2, "viewport");
+        }, 200);
+      }, 500);
+    };
+    this.startArrow.onMouseUp = (event) => {
+      event.stopPropagation();
+      clearInterval(startArrowMouseTimeout);
+    };
+    this.endArrow.onMouseDown = (event) => {
+      event.stopPropagation();
+      event.preventDefault();
+      this.scrollBy(0.5, "viewport");
+      endArrowMouseTimeout = setTimeout(() => {
+        this.scrollBy(0.5, "viewport");
+        endArrowMouseTimeout = setInterval(() => {
+          this.scrollBy(0.2, "viewport");
+        }, 200);
+      }, 500);
+    };
+    this.endArrow.onMouseUp = (event) => {
+      event.stopPropagation();
+      clearInterval(endArrowMouseTimeout);
+    };
+  }
+  set arrowOptions(options) {
+    Object.assign(this.startArrow, options);
+    Object.assign(this.endArrow, options);
+    this.requestRender();
+  }
+  set trackOptions(options) {
+    Object.assign(this.slider, options);
+    this.requestRender();
+  }
+  updateSliderFromScrollState() {
+    const trackSize = this.orientation === "vertical" ? this.slider.height : this.slider.width;
+    const scrollRange = Math.max(0, this._scrollSize - this._viewportSize);
+    if (scrollRange === 0) {
+      this.slider.thumbSize = trackSize;
+      this.slider.thumbPosition = 0;
+    } else {
+      const sizeRatio = this._viewportSize / this._scrollSize;
+      this.slider.thumbSize = Math.max(1, Math.round(sizeRatio * trackSize));
+      const positionRatio = this._scrollPosition / scrollRange;
+      this.slider.thumbPosition = Math.max(0, Math.min(1, positionRatio));
+    }
+  }
+  scrollBy(delta, unit = "absolute") {
+    const multiplier = unit === "viewport" ? this.viewportSize : unit === "content" ? this.scrollSize : unit === "step" ? this.scrollStep ?? 1 : 1;
+    const resolvedDelta = multiplier * delta;
+    this.scrollPosition += resolvedDelta;
+  }
+  recalculateVisibility() {
+    if (!this._manualVisibility) {
+      const sizeRatio = this.scrollSize <= this.viewportSize ? 1 : this.viewportSize / this.scrollSize;
+      super.visible = sizeRatio < 1;
+    }
+  }
+  handleKeyPress(key) {
+    const keyName = typeof key === "string" ? key : key.name;
+    switch (keyName) {
+      case "left":
+      case "h":
+        if (this.orientation !== "horizontal")
+          return false;
+        this.scrollBy(-1 / 5, "viewport");
+        return true;
+      case "right":
+      case "l":
+        if (this.orientation !== "horizontal")
+          return false;
+        this.scrollBy(1 / 5, "viewport");
+        return true;
+      case "up":
+      case "k":
+        if (this.orientation !== "vertical")
+          return false;
+        this.scrollBy(-1 / 5, "viewport");
+        return true;
+      case "down":
+      case "j":
+        if (this.orientation !== "vertical")
+          return false;
+        this.scrollBy(1 / 5, "viewport");
+        return true;
+      case "pageup":
+        this.scrollBy(-1 / 2, "viewport");
+        return true;
+      case "pagedown":
+        this.scrollBy(1 / 2, "viewport");
+        return true;
+      case "home":
+        this.scrollBy(-1, "content");
+        return true;
+      case "end":
+        this.scrollBy(1, "content");
+        return true;
+    }
+    return false;
+  }
+}
+
+class ArrowRenderable extends Renderable {
+  _direction;
+  _foregroundColor;
+  _backgroundColor;
+  _attributes;
+  _arrowChars;
+  constructor(ctx, options) {
+    super(ctx, options);
+    this._direction = options.direction;
+    this._foregroundColor = options.foregroundColor ? parseColor(options.foregroundColor) : RGBA.fromValues(1, 1, 1, 1);
+    this._backgroundColor = options.backgroundColor ? parseColor(options.backgroundColor) : RGBA.fromValues(0, 0, 0, 0);
+    this._attributes = options.attributes ?? 0;
+    this._arrowChars = {
+      up: "\u25E2\u25E3",
+      down: "\u25E5\u25E4",
+      left: " \u25C0 ",
+      right: " \u25B6 ",
+      ...options.arrowChars
+    };
+    if (!options.width) {
+      this.width = Bun.stringWidth(this.getArrowChar());
+    }
+  }
+  get direction() {
+    return this._direction;
+  }
+  set direction(value) {
+    if (this._direction !== value) {
+      this._direction = value;
+      this.requestRender();
+    }
+  }
+  get foregroundColor() {
+    return this._foregroundColor;
+  }
+  set foregroundColor(value) {
+    if (this._foregroundColor !== value) {
+      this._foregroundColor = parseColor(value);
+      this.requestRender();
+    }
+  }
+  get backgroundColor() {
+    return this._backgroundColor;
+  }
+  set backgroundColor(value) {
+    if (this._backgroundColor !== value) {
+      this._backgroundColor = parseColor(value);
+      this.requestRender();
+    }
+  }
+  get attributes() {
+    return this._attributes;
+  }
+  set attributes(value) {
+    if (this._attributes !== value) {
+      this._attributes = value;
+      this.requestRender();
+    }
+  }
+  set arrowChars(value) {
+    this._arrowChars = {
+      ...this._arrowChars,
+      ...value
+    };
+    this.requestRender();
+  }
+  renderSelf(buffer) {
+    const char = this.getArrowChar();
+    buffer.drawText(char, this.x, this.y, this._foregroundColor, this._backgroundColor, this._attributes);
+  }
+  getArrowChar() {
+    switch (this._direction) {
+      case "up":
+        return this._arrowChars.up;
+      case "down":
+        return this._arrowChars.down;
+      case "left":
+        return this._arrowChars.left;
+      case "right":
+        return this._arrowChars.right;
+      default:
+        return "?";
+    }
+  }
+}
+
+// src/renderables/ScrollBox.ts
+class ContentRenderable extends BoxRenderable {
+  viewport;
+  constructor(ctx, viewport, options) {
+    super(ctx, options);
+    this.viewport = viewport;
+  }
+  _getChildren() {
+    return this.getChildrenInViewport(this.viewport);
+  }
+}
+
+class ScrollBoxRenderable extends BoxRenderable {
+  static idCounter = 0;
+  internalId = 0;
+  wrapper;
+  viewport;
+  content;
+  horizontalScrollBar;
+  verticalScrollBar;
+  focusable = true;
+  selectionListener;
+  autoScrollMouseX = 0;
+  autoScrollMouseY = 0;
+  autoScrollThresholdVertical = 3;
+  autoScrollThresholdHorizontal = 3;
+  autoScrollSpeedSlow = 6;
+  autoScrollSpeedMedium = 36;
+  autoScrollSpeedFast = 72;
+  isAutoScrolling = false;
+  cachedAutoScrollSpeed = 3;
+  autoScrollAccumulatorX = 0;
+  autoScrollAccumulatorY = 0;
+  get scrollTop() {
+    return this.verticalScrollBar.scrollPosition;
+  }
+  set scrollTop(value) {
+    this.verticalScrollBar.scrollPosition = value;
+  }
+  get scrollLeft() {
+    return this.horizontalScrollBar.scrollPosition;
+  }
+  set scrollLeft(value) {
+    this.horizontalScrollBar.scrollPosition = value;
+  }
+  get scrollWidth() {
+    return this.horizontalScrollBar.scrollSize;
+  }
+  get scrollHeight() {
+    return this.verticalScrollBar.scrollSize;
+  }
+  constructor(ctx, {
+    wrapperOptions,
+    viewportOptions,
+    contentOptions,
+    rootOptions,
+    scrollbarOptions,
+    verticalScrollbarOptions,
+    horizontalScrollbarOptions,
+    ...options
+  }) {
+    super(ctx, {
+      flexShrink: 1,
+      flexGrow: 1,
+      flexDirection: "row",
+      flexWrap: "wrap",
+      alignItems: "stretch",
+      ...options,
+      ...rootOptions
+    });
+    this.internalId = ScrollBoxRenderable.idCounter++;
+    this.wrapper = new BoxRenderable(ctx, {
+      flexDirection: "column",
+      flexGrow: 1,
+      flexShrink: 1,
+      flexBasis: "auto",
+      maxHeight: "100%",
+      maxWidth: "100%",
+      ...wrapperOptions,
+      id: `scroll-box-wrapper-${this.internalId}`
+    });
+    super.add(this.wrapper);
+    this.viewport = new BoxRenderable(ctx, {
+      flexDirection: "column",
+      flexGrow: 1,
+      flexShrink: 1,
+      flexBasis: "auto",
+      maxHeight: "100%",
+      maxWidth: "100%",
+      overflow: "scroll",
+      onSizeChange: () => {
+        this.recalculateBarProps();
+      },
+      ...viewportOptions,
+      id: `scroll-box-viewport-${this.internalId}`
+    });
+    this.wrapper.add(this.viewport);
+    this.content = new ContentRenderable(ctx, this.viewport, {
+      alignSelf: "flex-start",
+      minWidth: "100%",
+      minHeight: "100%",
+      onSizeChange: () => {
+        this.recalculateBarProps();
+      },
+      ...contentOptions,
+      id: `scroll-box-content-${this.internalId}`
+    });
+    this.viewport.add(this.content);
+    this.verticalScrollBar = new ScrollBarRenderable(ctx, {
+      ...scrollbarOptions,
+      ...verticalScrollbarOptions,
+      arrowOptions: {
+        ...scrollbarOptions?.arrowOptions,
+        ...verticalScrollbarOptions?.arrowOptions
+      },
+      id: `scroll-box-vertical-scrollbar-${this.internalId}`,
+      orientation: "vertical",
+      onChange: (position) => {
+        this.content.translateY = -position;
+      }
+    });
+    super.add(this.verticalScrollBar);
+    this.horizontalScrollBar = new ScrollBarRenderable(ctx, {
+      ...scrollbarOptions,
+      ...horizontalScrollbarOptions,
+      arrowOptions: {
+        ...scrollbarOptions?.arrowOptions,
+        ...horizontalScrollbarOptions?.arrowOptions
+      },
+      id: `scroll-box-horizontal-scrollbar-${this.internalId}`,
+      orientation: "horizontal",
+      onChange: (position) => {
+        this.content.translateX = -position;
+      }
+    });
+    this.wrapper.add(this.horizontalScrollBar);
+    this.recalculateBarProps();
+    this.selectionListener = () => {
+      const selection = this._ctx.getSelection();
+      if (!selection || !selection.isSelecting) {
+        this.stopAutoScroll();
+      }
+    };
+    this._ctx.on("selection", this.selectionListener);
+  }
+  onUpdate(deltaTime) {
+    this.handleAutoScroll(deltaTime);
+  }
+  scrollBy(delta, unit = "absolute") {
+    if (typeof delta === "number") {
+      this.verticalScrollBar.scrollBy(delta, unit);
+    } else {
+      this.verticalScrollBar.scrollBy(delta.y, unit);
+      this.horizontalScrollBar.scrollBy(delta.x, unit);
+    }
+  }
+  scrollTo(position) {
+    if (typeof position === "number") {
+      this.scrollTop = position;
+    } else {
+      this.scrollTop = position.y;
+      this.scrollLeft = position.x;
+    }
+  }
+  add(obj, index) {
+    return this.content.add(obj, index);
+  }
+  remove(id) {
+    this.content.remove(id);
+  }
+  getChildren() {
+    return this.content.getChildren();
+  }
+  onMouseEvent(event) {
+    if (event.type === "scroll") {
+      let dir = event.scroll?.direction;
+      if (event.modifiers.shift)
+        dir = dir === "up" ? "left" : dir === "down" ? "right" : dir === "right" ? "down" : "up";
+      if (dir === "up")
+        this.scrollTop -= event.scroll?.delta ?? 0;
+      else if (dir === "down")
+        this.scrollTop += event.scroll?.delta ?? 0;
+      else if (dir === "left")
+        this.scrollLeft -= event.scroll?.delta ?? 0;
+      else if (dir === "right")
+        this.scrollLeft += event.scroll?.delta ?? 0;
+    }
+    if (event.type === "drag" && event.isSelecting) {
+      this.updateAutoScroll(event.x, event.y);
+    } else if (event.type === "up") {
+      this.stopAutoScroll();
+    }
+  }
+  handleKeyPress(key) {
+    if (this.verticalScrollBar.handleKeyPress(key))
+      return true;
+    if (this.horizontalScrollBar.handleKeyPress(key))
+      return true;
+    return false;
+  }
+  startAutoScroll(mouseX, mouseY) {
+    this.stopAutoScroll();
+    this.autoScrollMouseX = mouseX;
+    this.autoScrollMouseY = mouseY;
+    this.cachedAutoScrollSpeed = this.getAutoScrollSpeed(mouseX, mouseY);
+    this.isAutoScrolling = true;
+    if (!this.live) {
+      this.live = true;
+    }
+  }
+  updateAutoScroll(mouseX, mouseY) {
+    this.autoScrollMouseX = mouseX;
+    this.autoScrollMouseY = mouseY;
+    this.cachedAutoScrollSpeed = this.getAutoScrollSpeed(mouseX, mouseY);
+    const scrollX = this.getAutoScrollDirectionX(mouseX);
+    const scrollY = this.getAutoScrollDirectionY(mouseY);
+    if (scrollX === 0 && scrollY === 0) {
+      this.stopAutoScroll();
+    } else if (!this.isAutoScrolling) {
+      this.startAutoScroll(mouseX, mouseY);
+    }
+  }
+  stopAutoScroll() {
+    const wasAutoScrolling = this.isAutoScrolling;
+    this.isAutoScrolling = false;
+    this.autoScrollAccumulatorX = 0;
+    this.autoScrollAccumulatorY = 0;
+    if (wasAutoScrolling && !this.hasOtherLiveReasons()) {
+      this.live = false;
+    }
+  }
+  hasOtherLiveReasons() {
+    return false;
+  }
+  handleAutoScroll(deltaTime) {
+    if (!this.isAutoScrolling)
+      return;
+    const scrollX = this.getAutoScrollDirectionX(this.autoScrollMouseX);
+    const scrollY = this.getAutoScrollDirectionY(this.autoScrollMouseY);
+    const scrollAmount = this.cachedAutoScrollSpeed * (deltaTime / 1000);
+    let scrolled = false;
+    if (scrollX !== 0) {
+      this.autoScrollAccumulatorX += scrollX * scrollAmount;
+      const integerScrollX = Math.trunc(this.autoScrollAccumulatorX);
+      if (integerScrollX !== 0) {
+        this.scrollLeft += integerScrollX;
+        this.autoScrollAccumulatorX -= integerScrollX;
+        scrolled = true;
+      }
+    }
+    if (scrollY !== 0) {
+      this.autoScrollAccumulatorY += scrollY * scrollAmount;
+      const integerScrollY = Math.trunc(this.autoScrollAccumulatorY);
+      if (integerScrollY !== 0) {
+        this.scrollTop += integerScrollY;
+        this.autoScrollAccumulatorY -= integerScrollY;
+        scrolled = true;
+      }
+    }
+    if (scrolled) {
+      this._ctx.requestSelectionUpdate();
+    }
+    if (scrollX === 0 && scrollY === 0) {
+      this.stopAutoScroll();
+    }
+  }
+  getAutoScrollDirectionX(mouseX) {
+    const relativeX = mouseX - this.x;
+    const distToLeft = relativeX;
+    const distToRight = this.width - relativeX;
+    if (distToLeft <= this.autoScrollThresholdHorizontal) {
+      return this.scrollLeft > 0 ? -1 : 0;
+    } else if (distToRight <= this.autoScrollThresholdHorizontal) {
+      const maxScrollLeft = this.scrollWidth - this.viewport.width;
+      return this.scrollLeft < maxScrollLeft ? 1 : 0;
+    }
+    return 0;
+  }
+  getAutoScrollDirectionY(mouseY) {
+    const relativeY = mouseY - this.y;
+    const distToTop = relativeY;
+    const distToBottom = this.height - relativeY;
+    if (distToTop <= this.autoScrollThresholdVertical) {
+      return this.scrollTop > 0 ? -1 : 0;
+    } else if (distToBottom <= this.autoScrollThresholdVertical) {
+      const maxScrollTop = this.scrollHeight - this.viewport.height;
+      return this.scrollTop < maxScrollTop ? 1 : 0;
+    }
+    return 0;
+  }
+  getAutoScrollSpeed(mouseX, mouseY) {
+    const relativeX = mouseX - this.x;
+    const relativeY = mouseY - this.y;
+    const distToLeft = relativeX;
+    const distToRight = this.width - relativeX;
+    const distToTop = relativeY;
+    const distToBottom = this.height - relativeY;
+    const minDistance = Math.min(distToLeft, distToRight, distToTop, distToBottom);
+    if (minDistance <= 1) {
+      return this.autoScrollSpeedFast;
+    } else if (minDistance <= 2) {
+      return this.autoScrollSpeedMedium;
+    } else {
+      return this.autoScrollSpeedSlow;
+    }
+  }
+  recalculateBarProps() {
+    this.verticalScrollBar.scrollSize = this.content.height;
+    this.verticalScrollBar.viewportSize = this.viewport.height;
+    this.horizontalScrollBar.scrollSize = this.content.width;
+    this.horizontalScrollBar.viewportSize = this.viewport.width;
+  }
+  set rootOptions(options) {
+    Object.assign(this, options);
+    this.requestRender();
+  }
+  set wrapperOptions(options) {
+    Object.assign(this.wrapper, options);
+    this.requestRender();
+  }
+  set viewportOptions(options) {
+    Object.assign(this.viewport, options);
+    this.requestRender();
+  }
+  set contentOptions(options) {
+    Object.assign(this.content, options);
+    this.requestRender();
+  }
+  set scrollbarOptions(options) {
+    Object.assign(this.verticalScrollBar, options);
+    Object.assign(this.horizontalScrollBar, options);
+    this.requestRender();
+  }
+  set verticalScrollbarOptions(options) {
+    Object.assign(this.verticalScrollBar, options);
+    this.requestRender();
+  }
+  set horizontalScrollbarOptions(options) {
+    Object.assign(this.horizontalScrollBar, options);
+    this.requestRender();
+  }
+  destroySelf() {
+    if (this.selectionListener) {
+      this._ctx.off("selection", this.selectionListener);
+      this.selectionListener = undefined;
+    }
+    super.destroySelf();
+  }
+}
+// src/renderables/composition/constructs.ts
+function Generic(props, ...children) {
+  return h(VRenderable, props || {}, ...children);
+}
+function Box(props, ...children) {
+  return h(BoxRenderable, props || {}, ...children);
+}
+function Text(props, ...children) {
+  return h(TextRenderable, props || {}, ...children);
+}
+function ASCIIFont(props, ...children) {
+  return h(ASCIIFontRenderable, props || {}, ...children);
+}
+function Input(props, ...children) {
+  return h(InputRenderable, props || {}, ...children);
+}
+function Select(props, ...children) {
+  return h(SelectRenderable, props || {}, ...children);
+}
+function TabSelect(props, ...children) {
+  return h(TabSelectRenderable, props || {}, ...children);
+}
+function FrameBuffer(props, ...children) {
+  return h(FrameBufferRenderable, props, ...children);
+}
+// src/renderables/composition/VRenderable.ts
+class VRenderable extends Renderable {
+  options;
+  constructor(ctx, options) {
+    super(ctx, options);
+    this.options = options;
+  }
+  renderSelf(buffer, deltaTime) {
+    if (this.options.render) {
+      this.options.render.call(this.options, buffer, deltaTime, this);
+    }
+  }
+}
+export {
+  yellow,
+  wrapWithDelegates,
+  white,
+  underline,
+  t,
+  stringToStyledText,
+  strikethrough,
+  setRenderLibPath,
+  rgbToHex,
+  reverse,
+  resolveRenderLib,
+  renderFontToFrameBuffer,
+  red,
+  parseWrap,
+  parseUnit,
+  parsePositionType,
+  parseOverflow,
+  parseMeasureMode,
+  parseLogLevel,
+  parseKeypress,
+  parseJustify,
+  parseGutter,
+  parseFlexDirection,
+  parseEdge,
+  parseDisplay,
+  parseDirection,
+  parseDimension,
+  parseColor,
+  parseBoxSizing,
+  parseAlign,
+  nonAlphanumericKeys,
+  measureText,
+  maybeMakeRenderable,
+  magenta,
+  italic,
+  isValidPercentage,
+  isVNode,
+  isSizeType,
+  isRenderable,
+  isPositionTypeType,
+  isPositionType,
+  isPaddingType,
+  isOverflowType,
+  isMarginType,
+  isFlexBasisType,
+  isDimensionType,
+  instantiate,
+  hsvToRgb,
+  hexToRgb,
+  hastToStyledText,
+  h,
+  green,
+  getKeyHandler,
+  getCharacterPositions,
+  getBorderSides,
+  getBorderFromSides,
+  fonts,
+  fg,
+  engine,
+  dim,
+  delegate,
+  cyan,
+  createTrackedNode,
+  createTimeline,
+  createTextAttributes,
+  createCliRenderer,
+  coordinateToCharacterIndex,
+  convertGlobalToLocalSelection,
+  capture,
+  brightYellow,
+  brightWhite,
+  brightRed,
+  brightMagenta,
+  brightGreen,
+  brightCyan,
+  brightBlue,
+  brightBlack,
+  borderCharsToArray,
+  bold,
+  blue,
+  blink,
+  black,
+  bgYellow,
+  bgWhite,
+  bgRed,
+  bgMagenta,
+  bgGreen,
+  bgCyan,
+  bgBlue,
+  bgBlack,
+  bg,
+  applySepia,
+  applyScanlines,
+  applyNoise,
+  applyInvert,
+  applyGrayscale,
+  applyChromaticAberration,
+  applyAsciiArt,
+  VignetteEffect,
+  VRenderable,
+  TrackedNode,
+  Timeline,
+  TextRenderable,
+  TextBuffer,
+  TextAttributes,
+  Text,
+  TerminalConsole,
+  TabSelectRenderableEvents,
+  TabSelectRenderable,
+  TabSelect,
+  SyntaxStyle,
+  StyledText,
+  Selection,
+  SelectRenderableEvents,
+  SelectRenderable,
+  Select,
+  ScrollBoxRenderable,
+  ScrollBarRenderable,
+  RootRenderable,
+  RenderableEvents,
+  Renderable,
+  RGBA,
+  OptimizedBuffer,
+  MouseParser,
+  MouseEvent,
+  MouseButton,
+  LogLevel,
+  LayoutEvents,
+  KeyHandler,
+  InputRenderableEvents,
+  InputRenderable,
+  Input,
+  Generic,
+  FrameBufferRenderable,
+  FrameBuffer,
+  DistortionEffect,
+  DebugOverlayCorner,
+  ConsolePosition,
+  CliRenderer,
+  CliRenderEvents,
+  BrightnessEffect,
+  BoxRenderable,
+  Box,
+  BorderChars,
+  BorderCharArrays,
+  BlurEffect,
+  BloomEffect,
+  ArrowRenderable,
+  ASCIIFontSelectionHelper,
+  ASCIIFontRenderable,
+  ASCIIFont
+};
+
+//# debugId=D81404410A6C6E2564756E2164756E21
+//# sourceMappingURL=index.js.map