keyvoid 1.0.0

package/src/ui/skins/prank.js

@@ -0,0 +1,195 @@
+// ─── Prank Skin ──────────────────────────────────────────────────────
+// Fake "Windows Update" screen. Progress bar stuck at 99%.
+// Exit: triple-click in the top-right corner area.
+
+import { renderStatusBar, getStatusBarHeight } from '../components/status-bar.js';
+import { palettes, RESET, BOLD, DIM } from '../../utils/colors.js';
+import { centerText, blocks } from '../../utils/terminal.js';
+
+const P = palettes.prank;
+
+// Fake file operations that scroll
+const FAKE_FILES = [
+  'Configuring system32/ntdll.dll...',
+  'Updating kernel32.sys...',
+  'Installing security patch KB5034441...',
+  'Applying cumulative update...',
+  'Downloading telemetry modules...',
+  'Optimizing system registry...',
+  'Reconfiguring boot loader...',
+  'Updating display drivers...',
+  'Applying .NET Framework 8.5 update...',
+  'Installing Windows Defender definitions...',
+  'Updating OneDrive integration...',
+  'Configuring Hyper-V services...',
+  'Applying power management settings...',
+  'Updating Bluetooth stack...',
+  'Reinstalling Cortana...',
+  'Applying Group Policy updates...',
+  'Updating Windows Search indexer...',
+  'Installing optional features...',
+  'Configuring Windows Update service...',
+  'Finalizing pending operations...',
+  'Running system file checker...',
+  'Verifying system integrity...',
+  'Applying network stack update...',
+  'Updating USB controller firmware...',
+  'Installing audio engine update...',
+  'Please wait, this will take a while...',
+  'Almost done, do not turn off your computer...',
+  'Preparing to configure Windows...',
+  'Running cleanup tasks...',
+  'Registering system components...',
+];
+
+// Track secret exit: triple-click in top-right 5×3 area
+let clickTimestamps = [];
+const TRIPLE_CLICK_WINDOW = 1500; // 1.5 seconds
+const TRIPLE_CLICK_ZONE = { x: -10, y: 1, width: 10, height: 3 }; // relative to top-right
+
+export function renderPrank(cols, rows, state, tick) {
+  const lines = [];
+
+  // Windows blue background
+  const bgLine = `${P.bg}${' '.repeat(cols)}${RESET}`;
+  for (let i = 0; i < rows; i++) lines.push(bgLine);
+
+  // ── Windows-style logo (simplified) ──
+  const logoY = Math.floor(rows * 0.15);
+  const logo = [
+    '⊞',
+  ];
+  lines[logoY] = `${P.bg}${centerText(`${P.primary}${BOLD}⊞`, cols)}${RESET}`;
+
+  // ── Main message ──
+  const msgY = logoY + 2;
+  lines[msgY] = `${P.bg}${centerText(
+    `${P.primary}${BOLD}Working on updates`,
+    cols
+  )}${RESET}`;
+
+  // Animated dots
+  const dots = '.'.repeat((Math.floor(tick / 10) % 4));
+  lines[msgY + 1] = `${P.bg}${centerText(
+    `${P.secondary}${dots.padEnd(3)}`,
+    cols
+  )}${RESET}`;
+
+  // ── Progress percentage ──
+  // Stuck at 99%, occasionally flickers to 98%
+  const pctFlicker = tick % 120 > 110 ? 98 : 99;
+  const pctY = msgY + 3;
+  lines[pctY] = `${P.bg}${centerText(
+    `${P.primary}${BOLD}${pctFlicker}% complete`,
+    cols
+  )}${RESET}`;
+
+  // ── Progress bar ──
+  const barWidth = Math.min(50, cols - 20);
+  const barY = pctY + 2;
+  const filledWidth = Math.floor(barWidth * 0.99);
+  const emptyWidth = barWidth - filledWidth;
+
+  // Animated shimmer on the progress bar
+  const shimmerPos = Math.floor((tick * 0.5) % (filledWidth + 5));
+
+  let barStr = '';
+  for (let i = 0; i < filledWidth; i++) {
+    if (i >= shimmerPos - 2 && i <= shimmerPos + 2) {
+      // Bright shimmer
+      barStr += `\x1b[48;2;120;180;255m `;
+    } else {
+      barStr += `\x1b[48;2;255;255;255m `;
+    }
+  }
+  barStr += `\x1b[48;2;0;60;130m${' '.repeat(emptyWidth)}`;
+
+  // Re-apply the Windows Blue background (P.bg) after barStr, so centerText's right padding uses it
+  lines[barY] = `${P.bg}${centerText(`${barStr}${P.bg}`, cols)}${RESET}`;
+
+  // ── "Don't turn off" message ──
+  const warnY = barY + 2;
+  lines[warnY] = `${P.bg}${centerText(
+    `${P.secondary}Don't turn off your computer`,
+    cols
+  )}${RESET}`;
+
+  // ── Scrolling fake file operations ──
+  const fileY = warnY + 3;
+  const visibleFiles = Math.min(6, rows - fileY - 5);
+  const fileOffset = Math.floor(tick / 8) % FAKE_FILES.length;
+
+  for (let i = 0; i < visibleFiles; i++) {
+    const fileIdx = (fileOffset + i) % FAKE_FILES.length;
+    const fade = i === 0 ? P.dim : (i === visibleFiles - 1 ? P.dim : P.secondary);
+    const fileRow = fileY + i;
+    if (fileRow < rows - 3) {
+      lines[fileRow] = `${P.bg}${centerText(
+        `${fade}${DIM}${FAKE_FILES[fileIdx]}`,
+        cols
+      )}${RESET}`;
+    }
+  }
+
+  // ── ETA (fake, keeps increasing) ──
+  const etaY = fileY + visibleFiles + 1;
+  const etaMinutes = 45 + Math.floor(tick / 60);
+  if (etaY < rows - 3) {
+    lines[etaY] = `${P.bg}${centerText(
+      `${P.dim}Estimated time remaining: ${etaMinutes} minutes`,
+      cols
+    )}${RESET}`;
+  }
+
+  // ── Visible hint (bottom of screen) ──
+  const hintRow = rows - 1;
+  const hintColor = '\x1b[38;2;150;200;255m'; // Light blue, visible but unobtrusive
+  const hintText = '(triple click on top right to exit)';
+  
+  // Center the hint text at the bottom
+  lines[hintRow] = `${P.bg}${centerText(`${hintColor}${DIM}${hintText}`, cols)}${RESET}`;
+
+  // NOTE: In prank mode, the UNVOID button is HIDDEN.
+  // Exit is via triple-click in the top-right corner area.
+
+  // The secret clickable region is the top-right 10×3 area
+  const secretRegion = {
+    x: Math.max(1, cols - 10),
+    y: 1,
+    width: 10,
+    height: 3,
+  };
+
+  return {
+    lines,
+    buttonRegion: null, // No visible UNVOID button
+    secretRegion,       // Secret exit zone
+    isPrank: true,
+  };
+}
+
+// Check if a triple-click has occurred in the secret zone
+export function checkPrankExit(clickX, clickY, cols) {
+  const now = Date.now();
+
+  // Check if click is in the top-right zone
+  if (clickX >= cols - 10 && clickY <= 3) {
+    clickTimestamps.push(now);
+
+    // Remove clicks older than the time window
+    clickTimestamps = clickTimestamps.filter(t => now - t < TRIPLE_CLICK_WINDOW);
+
+    // Triple-click detected!
+    if (clickTimestamps.length >= 3) {
+      clickTimestamps = [];
+      return true;
+    }
+  }
+
+  return false;
+}
+
+// Reset prank state
+export function resetPrankState() {
+  clickTimestamps = [];
+}

package/src/ui/skins/toddler.js

@@ -0,0 +1,131 @@
+// ─── Toddler Skin ────────────────────────────────────────────────────
+// Fun mode: random emojis, cycling rainbow colors, playful messages.
+// Designed to entertain a child while keeping the system safe.
+
+import { renderUnvoidButton } from '../components/unvoid-button.js';
+import { renderStatusBar, getStatusBarHeight } from '../components/status-bar.js';
+import { palettes, rainbow, RESET, BOLD } from '../../utils/colors.js';
+import { centerText } from '../../utils/terminal.js';
+import { formatCount } from '../../utils/big-digits.js';
+
+const P = palettes.toddler;
+
+// Emoji collections for different "reactions"
+const ANIMALS = ['🦕', '🦖', '🐘', '🦋', '🐙', '🦄', '🐢', '🐬', '🦊', '🐼', '🐨', '🦜', '🐳', '🦁', '🐸'];
+const SPACE = ['🚀', '🌍', '⭐', '🌙', '🛸', '☄️', '🪐', '🌈', '✨', '💫', '🌟', '⚡'];
+const FOOD = ['🍕', '🍦', '🍩', '🧁', '🍪', '🎂', '🍭', '🍬', '🍫', '🍓', '🍉', '🥝'];
+const FUN = ['🎨', '🎪', '🎠', '🎡', '🎵', '🎶', '🎸', '🥁', '🎺', '🎹', '🪩', '🎯'];
+
+const ALL_EMOJIS = [...ANIMALS, ...SPACE, ...FOOD, ...FUN];
+
+const MESSAGES = [
+  'WOW!', 'COOL!', 'AMAZING!', 'YAY!', 'WHEEE!',
+  'AWESOME!', 'SUPER!', 'WOOHOO!', 'TADA!', 'MAGIC!',
+  'BOOM!', 'POW!', 'ZAP!', 'KABOOM!', 'SPARKLE!',
+];
+
+// State for the toddler animations
+let lastEmoji = '🦕';
+let lastMessage = 'WOW!';
+let currentBgIndex = 0;
+let lastKeyCount = 0;
+
+export function renderToddler(cols, rows, state, tick) {
+  const lines = [];
+  const { keyCount = 0 } = state;
+
+  // Update emoji and message when new key is pressed
+  if (keyCount > lastKeyCount) {
+    lastEmoji = ALL_EMOJIS[Math.floor(Math.random() * ALL_EMOJIS.length)];
+    lastMessage = MESSAGES[Math.floor(Math.random() * MESSAGES.length)];
+    currentBgIndex = (currentBgIndex + 1) % rainbow.length;
+    lastKeyCount = keyCount;
+  }
+
+  // Cycling background color (shifts even without key presses, slowly)
+  const bgIdx = (currentBgIndex + Math.floor(tick / 30)) % rainbow.length;
+  const bg = rainbow[bgIdx];
+  const bgLine = `${bg}${' '.repeat(cols)}${RESET}`;
+
+  // Fill background
+  for (let i = 0; i < rows; i++) {
+    lines.push(bgLine);
+  }
+
+  // ── Title ──
+  const title = '✨ K E Y V O I D ✨';
+  const titleColored = `${P.primary}${BOLD}${title}`;
+  lines[2] = `${bg}${centerText(titleColored, cols)}${RESET}`;
+
+  const subtitle = '~ toddler mode ~';
+  lines[3] = `${bg}${centerText(`${P.secondary}${subtitle}`, cols)}${RESET}`;
+
+  // ── Bottom Elements ──
+  const statusHeight = getStatusBarHeight(state);
+  const buttonRow = Math.max(20, rows - statusHeight - 7);
+  const button = renderUnvoidButton(cols, buttonRow, tick);
+
+  const countRow = buttonRow - 3;
+  const msgRow = countRow - 2;
+
+  // ── Giant Emoji (Floating in available space) ──
+  const availableSpace = msgRow - 5;
+  const centerY = 5 + Math.floor(availableSpace / 2);
+  const bounce = Math.floor(Math.sin(tick * 0.2) * 2); // Bouncing animation
+  const emojiRow = Math.max(5, Math.min(centerY + bounce, rows - 15));
+
+  // Build a huge emoji display (using text around emoji)
+  const sparkles = '✨'.repeat(3);
+  const emojiDisplay = `${sparkles}  ${lastEmoji}  ${sparkles}`;
+  lines[emojiRow] = `${bg}${centerText(emojiDisplay, cols)}${RESET}`;
+
+  // Repeat emoji bigger in surrounding rows
+  lines[emojiRow - 1] = `${bg}${centerText(`${lastEmoji}     ${lastEmoji}     ${lastEmoji}`, cols)}${RESET}`;
+  lines[emojiRow + 1] = `${bg}${centerText(`${lastEmoji}     ${lastEmoji}     ${lastEmoji}`, cols)}${RESET}`;
+
+  // ── Fun Message ──
+  if (msgRow < rows - 5 && msgRow > emojiRow + 1) {
+    const msgColors = [P.primary, P.secondary, P.accent, P.fun1, P.fun2, P.fun3, P.fun4];
+    const msgColor = msgColors[Math.floor(tick / 5) % msgColors.length];
+    const msgStr = `${msgColor}${BOLD}  ★  ${lastMessage}  ★  `;
+    lines[msgRow] = `${bg}${centerText(msgStr, cols)}${RESET}`;
+  }
+
+  // ── Key Count (playful) ──
+  if (countRow < rows - 5 && countRow > emojiRow + 2) {
+    const countStr = `${P.secondary}${formatCount(keyCount)} little taps blocked! 🛡️`;
+    lines[countRow] = `${bg}${centerText(countStr, cols)}${RESET}`;
+  }
+
+  // ── Stars border animation ──
+  const star1 = tick % 4 === 0 ? '⭐' : '✨';
+  const star2 = tick % 4 === 2 ? '⭐' : '✨';
+  const starLine = (star1 + ' ').repeat(Math.floor(cols / 3));
+  lines[0] = `${bg}${starLine.substring(0, cols)}${RESET}`;
+
+  // ── UNVOID Button ──
+  for (let i = 0; i < button.lines.length; i++) {
+    if (buttonRow + i < rows - statusHeight) {
+      lines[buttonRow + i] = `${bg}${button.lines[i].replace(/\x1b\[0m/g, RESET + bg)}${RESET}`;
+    }
+  }
+
+  // ── Status Bar ──
+  const statusLines = renderStatusBar(cols, { ...state, skinName: 'toddler' }, tick);
+  const statusStartRow = rows - statusLines.length;
+  for (let i = 0; i < statusLines.length; i++) {
+    if (statusStartRow + i < rows) {
+      lines[statusStartRow + i] = `${bg}${statusLines[i].replace(/\x1b\[0m/g, RESET + bg)}${RESET}`;
+    }
+  }
+
+  return {
+    lines,
+    buttonRegion: {
+      x: button.x,
+      y: buttonRow + 1,
+      width: button.width,
+      height: button.height,
+    },
+  };
+}

package/src/ui/skins/zen.js

@@ -0,0 +1,169 @@
+// ─── Zen Skin ─────────────────────────────────────────────────────────
+// A calm, meditative breathing visual. Blocked keys create gentle ripples.
+
+import { renderUnvoidButton } from '../components/unvoid-button.js';
+import { renderStatusBar, getStatusBarHeight } from '../components/status-bar.js';
+import { palettes, RESET } from '../../utils/colors.js';
+import { centerText } from '../../utils/terminal.js';
+
+const P = palettes.zen;
+let lastKeyCount = 0;
+
+// Track active ripples: { radius: 0, life: 1.0 }
+const activeRipples = [];
+
+export function renderZen(cols, rows, state, tick) {
+  const lines = Array(rows).fill(`${P.bg}${' '.repeat(cols)}${RESET}`);
+  const statusHeight = getStatusBarHeight(state);
+  const playAreaH = rows - statusHeight - 4;
+  
+  const { keyCount = 0 } = state;
+
+  // Trigger ripples on key press
+  if (keyCount > lastKeyCount) {
+    const diff = Math.min(keyCount - lastKeyCount, 3);
+    for (let i = 0; i < diff; i++) {
+       activeRipples.push({
+           radius: 0 - (i * 2), // Stagger slightly if multiple
+           life: 1.0
+       });
+    }
+    lastKeyCount = keyCount;
+  }
+
+  // Update ripples
+  for (let i = activeRipples.length - 1; i >= 0; i--) {
+      const r = activeRipples[i];
+      r.radius += 0.8; // expansion speed
+      if (r.radius > 0) {
+          r.life -= 0.012; // fade out
+      }
+      if (r.life <= 0) {
+          activeRipples.splice(i, 1);
+      }
+  }
+
+  // Breathing animation (slow sine wave)
+  const breath = Math.sin(tick * 0.02); // -1 to 1
+  const baseRadius = 8 + breath * 2;
+  
+  const cx = Math.floor(cols / 2);
+  const cy = Math.floor(playAreaH / 2);
+
+  // Precompute RGB interpolation helper
+  const interpolatePhaseColor = (dist, rippleIntensity = 0) => {
+      // Base phase colors based on distance and breath
+      const phase = dist * 0.5 - (tick * 0.05);
+      const val = (Math.sin(phase) + 1) / 2; // 0 to 1
+      
+      // We will interpolate between dim and primary
+      // Then add ripple brightness
+      
+      // parse values from RGB tuples string for speed, or just use hardcoded mapped values
+      // Primary: 180, 180, 255
+      // Dim:      60,  60,  90
+      
+      let red = 60 + (120 * val);
+      let green = 60 + (120 * val);
+      let blue = 90 + (165 * val);
+      
+      if (rippleIntensity > 0) {
+          // Add white peak to the ripple
+          red += (255 - red) * rippleIntensity;
+          green += (255 - green) * rippleIntensity;
+          blue += (255 - blue) * rippleIntensity;
+      }
+      
+      return `\x1b[38;2;${Math.floor(red)};${Math.floor(green)};${Math.floor(blue)}m`;
+  };
+
+  for (let r = 0; r < playAreaH; r++) {
+      let rowStr = '';
+      let currColor = P.bg;
+      let currRun = '';
+      
+      for (let c = 0; c < cols; c++) {
+          // Terminal fonts are roughly 2:1 aspect ratio
+          const dx = (c - cx) / 2;
+          const dy = (r - cy);
+          const dist = Math.sqrt(dx*dx + dy*dy);
+          
+          let char = ' ';
+          let color = P.bg;
+          
+          // Check ripples
+          let rippleIntensity = 0;
+          for (const rip of activeRipples) {
+              if (rip.radius > 0) {
+                  const rDist = Math.abs(dist - rip.radius);
+                  if (rDist < 1.5) {
+                      // Sharp peak
+                      rippleIntensity = Math.max(rippleIntensity, rip.life * (1 - (rDist/1.5)));
+                  }
+              }
+          }
+          
+          if (dist < baseRadius || rippleIntensity > 0.1 || (dist > baseRadius && dist < baseRadius + 12 && Math.sin(dist*2 - tick*0.1) > 0.5)) {
+              char = '·';
+              
+              if (dist < baseRadius - 1) {
+                  char = '█';
+              } else if (dist < baseRadius) {
+                  char = '▓';
+              } else if (dist < baseRadius + 1) {
+                  char = '▒';
+              }
+              
+              if (rippleIntensity > 0.5) char = '█';
+              else if (rippleIntensity > 0.2) char = '▓';
+              
+              color = P.bg + interpolatePhaseColor(dist, rippleIntensity);
+          }
+          
+          if (color !== currColor) {
+              rowStr += currColor + currRun;
+              currColor = color;
+              currRun = char;
+          } else {
+              currRun += char;
+          }
+      }
+      rowStr += currColor + currRun + RESET;
+      lines[r] = rowStr;
+  }
+
+  // ── UI Overlays ──
+  const titleLine = `${P.bg}${P.secondary}Z E N   M O D E${RESET}`;
+  lines[1] = `${P.bg}${centerText(titleLine, cols)}${RESET}`;
+
+  const subtitleLine = `${P.bg}${P.dim}Take a deep breath. Focus on your flow.${RESET}`;
+  lines[3] = `${P.bg}${centerText(subtitleLine, cols)}${RESET}`;
+
+  // UNVOID Button
+  const buttonRow = playAreaH + 1;
+  const button = renderUnvoidButton(cols, buttonRow, tick);
+  for (let i = 0; i < button.lines.length; i++) {
+    if (buttonRow + i < rows - statusHeight) {
+      lines[buttonRow + i] = `${P.bg}${button.lines[i].replace(/\x1b\[0m/g, RESET + P.bg)}${RESET}`;
+    }
+  }
+
+  // Status Bar
+  const statusLines = renderStatusBar(cols, { ...state, skinName: 'zen' }, tick);
+  const statusStartRow = rows - statusLines.length;
+  for (let i = 0; i < statusLines.length; i++) {
+    if (statusStartRow + i < rows) {
+      lines[statusStartRow + i] = `${P.bg}${statusLines[i].replace(/\x1b\[0m/g, RESET + P.bg)}${RESET}`;
+    }
+  }
+
+  return {
+    lines,
+    buttonRegion: {
+      x: button.x,
+      y: buttonRow + 1,
+      width: button.width,
+      height: button.height,
+    },
+  };
+}

package/src/ui/unlock-sequence.js

@@ -0,0 +1,105 @@
+// ─── Unlock Sequence ──────────────────────────────────────────────────
+// A cinematic glitch-out and power-down sequence transitioning the 
+// user back to the terminal prompt.
+
+import chalk from 'chalk';
+import { RESET, BOLD } from '../utils/colors.js';
+import { centerText } from '../utils/terminal.js';
+
+const GLITCH_CHARS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789@#$%^&*()_+-=[]{}|;:\'<>,.?/';
+
+export function renderUnlockSequence(cols, rows, tick, unlockTick) {
+  const elapsed = tick - unlockTick;
+  const frames = 60; // 1 second exactly
+  
+  const progress = Math.min(elapsed / frames, 1.0);
+  
+  const lines = [];
+
+  // Phase 1 (0 -> 0.3): White noise static glitch
+  // Phase 2 (0.3 -> 0.6): Curtain drop (black screen wiping down)
+  // Phase 3 (0.6 -> 1.0): "SESSION UNLOCKED" text blooming in center
+  
+  const cx = Math.floor(cols / 2);
+  const cy = Math.floor(rows / 2);
+
+  if (progress < 0.3) {
+      // White noise static glitch
+      const intensity = 1 - (progress / 0.3); // 1 to 0
+      for (let r = 0; r < rows; r++) {
+          let line = '';
+          for (let c = 0; c < cols; c++) {
+              if (Math.random() < intensity * 0.4) {
+                 const char = GLITCH_CHARS[Math.floor(Math.random() * GLITCH_CHARS.length)];
+                 // Random green, cyan, or white
+                 const isGreen = Math.random() > 0.5;
+                 line += isGreen ? `\x1b[38;2;0;255;150m${char}\x1b[0m` : `\x1b[38;2;150;255;255m${char}\x1b[0m`;
+              } else {
+                 line += ' ';
+              }
+          }
+          lines.push(line);
+      }
+  } else if (progress < 0.6) {
+      // Curtain drop wipe (top to bottom fade to black)
+      const dropProgress = (progress - 0.3) / 0.3; 
+      const curtainRow = Math.floor(rows * dropProgress);
+      
+      for (let r = 0; r < rows; r++) {
+         if (r > curtainRow) {
+             // Still some sparse glitching below the curtain
+             let line = '';
+             for (let c = 0; c < cols; c++) {
+                 if (Math.random() < 0.05) {
+                    const char = GLITCH_CHARS[Math.floor(Math.random() * GLITCH_CHARS.length)];
+                    line += `\x1b[38;5;${235 + Math.floor(Math.random() * 8)}m${char}\x1b[0m`;
+                 } else {
+                    line += ' ';
+                 }
+             }
+             lines.push(line);
+         } else {
+             // Pure black void above the curtain
+             lines.push(' '.repeat(cols));
+         }
+      }
+  } else {
+      // Final bloom: Just the UNLOCKED text in the middle
+      const textProgress = (progress - 0.6) / 0.4;
+      
+      for (let r = 0; r < rows; r++) {
+          lines.push(' '.repeat(cols));
+      }
+      
+      // Box height expands
+      const boxHeight = Math.floor(7 * textProgress);
+      if (boxHeight > 0) {
+          const top = cy - Math.floor(boxHeight / 2);
+          const bot = cy + Math.floor(boxHeight / 2);
+          
+          for (let r = top; r <= bot; r++) {
+             if (r >= 0 && r < rows) {
+                // Draw a sleek frame
+                const width = Math.floor(cols * 0.4 * textProgress);
+                const str = `\x1b[48;2;10;15;20m${' '.repeat(width)}\x1b[0m`;
+                lines[r] = centerText(str, cols);
+             }
+          }
+          
+          if (boxHeight > 2) {
+              const width = Math.floor(cols * 0.4 * textProgress);
+              const pulse = Math.floor(100 + 155 * textProgress);
+              const headerColor = `\x1b[38;2;0;${pulse};${Math.floor(pulse * 0.6)}m`;
+              
+              const text = ' [ SYSTEM UNLOCKED ] ';
+              const padTotal = Math.max(0, width - text.length);
+              const padStr = ' '.repeat(Math.floor(padTotal / 2));
+              
+              const innerBg = `\x1b[48;2;10;15;20m${padStr}${headerColor}${BOLD}${text}\x1b[0m\x1b[48;2;10;15;20m${' '.repeat(padTotal - Math.floor(padTotal / 2))}\x1b[0m`;
+              lines[cy] = centerText(innerBg, cols);
+          }
+      }
+  }
+
+  return lines;
+}