keyvoid 1.0.0

package/src/ui/components/counter.js

@@ -0,0 +1,64 @@
+// ─── Big Counter Component ───────────────────────────────────────────
+// Renders a large, visually striking keystroke counter.
+
+import { renderBigNumber, bigNumberWidth, formatCount } from '../../utils/big-digits.js';
+import { centerText } from '../../utils/terminal.js';
+import { RESET, BOLD, interpolateColor } from '../../utils/colors.js';
+
+// Render the counter as big digits with gradient coloring
+export function renderCounter(count, cols, tick = 0, colorConfig = {}) {
+  const {
+    r1 = 0, g1 = 255, b1 = 224,   // Start color (cyan)
+    r2 = 191, g2 = 64, b2 = 255,  // End color (purple)
+  } = colorConfig;
+
+  const countStr = formatCount(count);
+  const bigLines = renderBigNumber(countStr);
+  const numWidth = bigNumberWidth(countStr);
+  const lines = [];
+
+  // Animated subtle pulse: brightness oscillates
+  const pulse = 0.85 + 0.15 * Math.sin(tick * 0.15);
+
+  for (let row = 0; row < bigLines.length; row++) {
+    const rawLine = bigLines[row];
+    let colored = '';
+
+    for (let j = 0; j < rawLine.length; j++) {
+      const ch = rawLine[j];
+      if (ch === ' ') {
+        colored += ' ';
+        continue;
+      }
+
+      // Horizontal gradient across the number
+      const t = j / Math.max(rawLine.length - 1, 1);
+      const r = Math.round((r1 + (r2 - r1) * t) * pulse);
+      const g = Math.round((g1 + (g2 - g1) * t) * pulse);
+      const b = Math.round((b1 + (b2 - b1) * t) * pulse);
+
+      colored += `\x1b[38;2;${r};${g};${b}m${BOLD}${ch}`;
+    }
+
+    lines.push(centerText(colored, cols) + RESET);
+  }
+
+  return lines;
+}
+
+// Render a small inline counter (for status bars etc)
+export function renderSmallCounter(count, color = '\x1b[38;2;0;255;224m') {
+  return `${color}${BOLD}${formatCount(count)}${RESET}`;
+}
+
+// Render the "KEYSTROKES BLOCKED" label below the counter
+export function renderCounterLabel(cols, tick = 0, labelColor = '\x1b[38;2;100;100;130m') {
+  const label = '◆  KEYSTROKES BLOCKED  ◆';
+  const phase = Math.floor(tick / 8) % 2;
+
+  // Subtle pulsing dot indicator
+  const dot = phase === 0 ? '●' : '○';
+  const fullLabel = `${labelColor}${dot}  KEYSTROKES BLOCKED  ${dot}`;
+
+  return centerText(fullLabel, cols) + RESET;
+}

package/src/ui/components/header.js

@@ -0,0 +1,102 @@
+// ─── Header Component ────────────────────────────────────────────────
+// Renders the KEYVOID ASCII art title with animated gradient colors.
+
+import figlet from 'figlet';
+import gradient from 'gradient-string';
+import { centerText, stripAnsi } from '../../utils/terminal.js';
+import { RESET, BOLD, interpolateColor } from '../../utils/colors.js';
+
+// Pre-render the figlet text (sync, cached)
+let cachedTitle = null;
+let cachedWidth = 0;
+
+function getTitle() {
+  if (!cachedTitle) {
+    try {
+      cachedTitle = figlet.textSync('KEYVOID', {
+        font: 'ANSI Shadow',
+        horizontalLayout: 'fitted',
+      });
+    } catch {
+      // Fallback if font not available
+      try {
+        cachedTitle = figlet.textSync('KEYVOID', { font: 'Standard' });
+      } catch {
+        cachedTitle = ' K E Y V O I D ';
+      }
+    }
+    cachedWidth = Math.max(...cachedTitle.split('\n').map(l => l.length));
+  }
+  return cachedTitle;
+}
+
+// Render the header with animated gradient
+// `tick` is a frame counter for animation
+export function renderHeader(cols, tick = 0) {
+  const title = getTitle();
+  const titleLines = title.split('\n');
+  const lines = [];
+
+  // Animated gradient that shifts over time
+  const phase = (tick * 0.03) % 1;
+
+  for (let i = 0; i < titleLines.length; i++) {
+    const raw = titleLines[i];
+    let colored = '';
+
+    for (let j = 0; j < raw.length; j++) {
+      const ch = raw[j];
+      if (ch === ' ') {
+        colored += ' ';
+        continue;
+      }
+
+      // Create a cycling gradient: cyan → purple → pink → cyan
+      const t = ((j / Math.max(raw.length, 1)) + phase) % 1;
+      let r, g, b;
+
+      if (t < 0.33) {
+        const p = t / 0.33;
+        r = Math.round(0 + 191 * p);
+        g = Math.round(255 - 191 * p);
+        b = Math.round(224 + 31 * p);
+      } else if (t < 0.66) {
+        const p = (t - 0.33) / 0.33;
+        r = Math.round(191 + 64 * p);
+        g = Math.round(64 + 56 * p);
+        b = Math.round(255 - 55 * p);
+      } else {
+        const p = (t - 0.66) / 0.34;
+        r = Math.round(255 - 255 * p);
+        g = Math.round(120 + 135 * p);
+        b = Math.round(200 + 24 * p);
+      }
+
+      colored += `\x1b[38;2;${r};${g};${b}m${BOLD}${ch}`;
+    }
+
+    lines.push(centerText(colored, cols) + RESET);
+  }
+
+  return lines;
+}
+
+// Simpler static gradient header (fallback)
+export function renderHeaderStatic(cols) {
+  const title = getTitle();
+  const titleLines = title.split('\n');
+  const lines = [];
+
+  const grad = gradient(['#00FFE0', '#BF40BF', '#FF78C8']);
+
+  for (const raw of titleLines) {
+    lines.push(centerText(grad(raw), cols));
+  }
+
+  return lines;
+}
+
+// Get the number of lines the header takes up
+export function getHeaderHeight() {
+  return getTitle().split('\n').length;
+}

package/src/ui/components/status-bar.js

@@ -0,0 +1,71 @@
+// ─── Status Bar Component ────────────────────────────────────────────
+// Bottom bar showing uptime, failsafe hint, OS info, and active skin.
+
+import { RESET, BOLD, DIM } from '../../utils/colors.js';
+import { centerText, horizontalLine, padEnd, visibleLength } from '../../utils/terminal.js';
+import { getPlatformName } from '../../engine/permissions.js';
+
+// Format duration in seconds to HH:MM:SS
+function formatUptime(seconds) {
+  const h = Math.floor(seconds / 3600);
+  const m = Math.floor((seconds % 3600) / 60);
+  const s = Math.floor(seconds % 60);
+  return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`;
+}
+
+// Render the status bar (2 lines: divider + info)
+export function renderStatusBar(cols, state, tick = 0) {
+  const {
+    skinName = 'clean',
+    startTime = Date.now(),
+    suppressorActive = false,
+    failsafeProgress = 0,
+  } = state;
+
+  const lines = [];
+  const uptime = formatUptime((Date.now() - startTime) / 1000);
+  const platform = getPlatformName();
+  const dimColor = '\x1b[38;2;60;60;80m';
+  const accentColor = '\x1b[38;2;100;100;140m';
+  const activeColor = suppressorActive ? '\x1b[38;2;0;200;100m' : '\x1b[38;2;200;80;80m';
+  const activeText = suppressorActive ? '● LOCKED' : '○ UNLOCKED';
+
+  // Divider line
+  lines.push(`${dimColor}${horizontalLine(cols, '─')}${RESET}`);
+
+  // Info line
+  const left = `${accentColor} ⏱  ${uptime}  ${dimColor}│${RESET}  ${activeColor}${BOLD}${activeText}${RESET}`;
+  const center = `${dimColor}Hold ${BOLD}ESC+SPACE${RESET}${dimColor} for 5s to force-quit${RESET}`;
+  const right = `${accentColor}${platform}  ${dimColor}│  ${accentColor}${skinName.toUpperCase()} ${RESET}`;
+
+  // Build the line with proper spacing
+  const leftLen = visibleLength(left);
+  const rightLen = visibleLength(right);
+  const centerLen = visibleLength(center);
+  const totalContent = leftLen + centerLen + rightLen;
+  const gaps = Math.max(0, cols - totalContent);
+  const leftGap = Math.floor(gaps / 2);
+  const rightGap = gaps - leftGap;
+
+  let infoLine = left + ' '.repeat(leftGap) + center + ' '.repeat(rightGap) + right;
+
+  lines.push(infoLine);
+
+  // Failsafe progress bar (only shown when ESC+SPACE is held)
+  if (failsafeProgress > 0) {
+    const barWidth = Math.min(40, cols - 4);
+    const filled = Math.floor(barWidth * failsafeProgress);
+    const empty = barWidth - filled;
+    const bar = `\x1b[38;2;255;80;80m${'█'.repeat(filled)}\x1b[38;2;60;60;80m${'░'.repeat(empty)}${RESET}`;
+    const pct = Math.floor(failsafeProgress * 100);
+    const label = ` FORCE QUIT: ${pct}%`;
+    lines.push(centerText(`${bar}${label}`, cols));
+  }
+
+  return lines;
+}
+
+// Get the height of the status bar
+export function getStatusBarHeight(state = {}) {
+  return state.failsafeProgress > 0 ? 3 : 2;
+}

package/src/ui/components/unvoid-button.js

@@ -0,0 +1,78 @@
+// ─── UNVOID Button Component ─────────────────────────────────────────
+// A large, prominent mouse-click-only button to exit the keyboard lock.
+
+import { centerText, box } from '../../utils/terminal.js';
+import { RESET, BOLD } from '../../utils/colors.js';
+
+const BUTTON_WIDTH = 32;
+const BUTTON_HEIGHT = 5;
+
+// Render the UNVOID button
+// Returns { lines: string[], row: number } where row is the Y position
+// for mouse region registration
+export function renderUnvoidButton(cols, row, tick = 0, hidden = false) {
+  if (hidden) return { lines: [], row, width: 0, height: 0, x: 0 };
+
+  const lines = [];
+  const x = Math.max(1, Math.floor((cols - BUTTON_WIDTH) / 2));
+
+  // Animated border glow
+  const phase = (tick * 0.08) % (Math.PI * 2);
+  const glow = Math.floor(100 + 155 * ((Math.sin(phase) + 1) / 2));
+  const borderColor = `\x1b[38;2;${glow};${Math.floor(glow * 0.4)};${Math.floor(glow * 0.4)}m`;
+
+  // Button content
+  const sublabel = 'mouse click only';
+
+  // Top border
+  lines.push(centerText(
+    `${borderColor}${BOLD}${box.topLeft}${'━'.repeat(BUTTON_WIDTH - 2)}${box.topRight}`,
+    cols
+  ) + RESET);
+
+  // Empty line
+  lines.push(centerText(
+    `${borderColor}${box.vertical}${RESET}${' '.repeat(BUTTON_WIDTH - 2)}${borderColor}${box.vertical}`,
+    cols
+  ) + RESET);
+
+  // Main label
+  // We avoid emojis here to ensure strict ASCII alignment across all terminals
+  const label = 'CLICK TO UNVOID';
+  const labelPadded = centerPad(label, BUTTON_WIDTH - 2);
+  lines.push(centerText(
+    `${borderColor}${box.vertical}${RESET}\x1b[38;2;255;80;80m${BOLD}${labelPadded}\x1b[0m${borderColor}${box.vertical}`,
+    cols
+  ) + RESET);
+
+  // Sub label
+  const subPadded = centerPad(sublabel, BUTTON_WIDTH - 2);
+  lines.push(centerText(
+    `${borderColor}${box.vertical}${RESET}\x1b[38;2;120;100;100m${subPadded}${RESET}${borderColor}${box.vertical}`,
+    cols
+  ) + RESET);
+
+  // Bottom border
+  lines.push(centerText(
+    `${borderColor}${BOLD}${box.bottomLeft}${'━'.repeat(BUTTON_WIDTH - 2)}${box.bottomRight}`,
+    cols
+  ) + RESET);
+
+  return {
+    lines,
+    row,
+    width: BUTTON_WIDTH,
+    height: BUTTON_HEIGHT,
+    x: Math.floor((cols - BUTTON_WIDTH) / 2) + 1,
+  };
+}
+
+// Center-pad a string within a given width
+function centerPad(str, width) {
+  const pad = Math.max(0, width - str.length);
+  const left = Math.floor(pad / 2);
+  const right = pad - left;
+  return ' '.repeat(left) + str + ' '.repeat(right);
+}
+
+export { BUTTON_WIDTH, BUTTON_HEIGHT };

package/src/ui/mouse.js

@@ -0,0 +1,97 @@
+// ─── Terminal Mouse Tracking ─────────────────────────────────────────
+// Parses SGR extended mouse events from stdin and provides a clean
+// event API for clickable regions.
+
+import { EventEmitter } from 'events';
+
+export class MouseTracker extends EventEmitter {
+  constructor() {
+    super();
+    this.regions = []; // { id, x, y, width, height, onClick }
+    this._boundHandler = this._handleData.bind(this);
+  }
+
+  // Start listening for mouse events on stdin
+  start() {
+    process.stdin.on('data', this._boundHandler);
+  }
+
+  // Stop listening
+  stop() {
+    process.stdin.removeListener('data', this._boundHandler);
+  }
+
+  // Register a clickable region
+  addRegion(id, x, y, width, height, onClick) {
+    // Remove existing region with same id
+    this.regions = this.regions.filter(r => r.id !== id);
+    this.regions.push({ id, x, y, width, height, onClick });
+  }
+
+  // Remove a region
+  removeRegion(id) {
+    this.regions = this.regions.filter(r => r.id !== id);
+  }
+
+  // Clear all regions
+  clearRegions() {
+    this.regions = [];
+  }
+
+  // Update a region's position (e.g., after resize)
+  updateRegion(id, x, y, width, height) {
+    const region = this.regions.find(r => r.id === id);
+    if (region) {
+      region.x = x;
+      region.y = y;
+      if (width !== undefined) region.width = width;
+      if (height !== undefined) region.height = height;
+    }
+  }
+
+  _handleData(data) {
+    const str = data.toString();
+
+    // Parse SGR mouse events: \x1b[<Btn;X;YM (press) or \x1b[<Btn;X;Ym (release)
+    const regex = /\x1b\[<(\d+);(\d+);(\d+)([Mm])/g;
+    let match;
+
+    while ((match = regex.exec(str)) !== null) {
+      const btn = parseInt(match[1], 10);
+      const x = parseInt(match[2], 10);
+      const y = parseInt(match[3], 10);
+      const isPress = match[4] === 'M';
+
+      // btn: 0 = left click, 1 = middle, 2 = right
+      // btn >= 64 = scroll
+      const event = {
+        button: btn & 0x03,     // 0=left, 1=middle, 2=right
+        x,
+        y,
+        isPress,
+        isRelease: !isPress,
+        isScroll: btn >= 64,
+      };
+
+      this.emit('mouse', event);
+
+      // Only process left-click presses
+      if (event.isPress && event.button === 0 && !event.isScroll) {
+        this.emit('click', event);
+
+        // Check if click is within any registered region
+        for (const region of this.regions) {
+          if (
+            x >= region.x && x < region.x + region.width &&
+            y >= region.y && y < region.y + region.height
+          ) {
+            this.emit('region-click', { regionId: region.id, ...event });
+            if (region.onClick) {
+              region.onClick(event);
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/src/ui/renderer.js

@@ -0,0 +1,113 @@
+// ─── Full-Screen Terminal Renderer ───────────────────────────────────
+// Manages the terminal lifecycle: alt screen, raw mode, cursor hiding,
+// and provides a frame-based rendering API for the skins.
+
+import cliCursor from 'cli-cursor';
+import {
+  enterAltScreen, exitAltScreen, clearScreen,
+  hideCursor, showCursor, enableMouse, disableMouse,
+  moveTo, getSize, write, padEnd, centerText,
+} from '../utils/terminal.js';
+import { RESET } from '../utils/colors.js';
+
+export class Renderer {
+  constructor() {
+    this.size = getSize();
+    this.running = false;
+    this.renderFn = null;
+    this.frameTimer = null;
+    this.fps = 15; // 15 fps is smooth enough for terminal
+    this.lastFrame = [];
+  }
+
+  // Initialize the terminal for full-screen rendering
+  setup() {
+    this.size = getSize();
+
+    // Enter alternate screen buffer (preserves user's terminal)
+    write(enterAltScreen);
+    write(hideCursor);
+    write(clearScreen);
+
+    // Enable mouse tracking for UNVOID button
+    write(enableMouse);
+
+    // Put stdin in raw mode for mouse events + key detection
+    if (process.stdin.isTTY) {
+      process.stdin.setRawMode(true);
+      process.stdin.resume();
+      process.stdin.setEncoding('utf8');
+    }
+
+    // Handle terminal resize
+    process.stdout.on('resize', () => {
+      this.size = getSize();
+      this.fullRender();
+    });
+
+    this.running = true;
+  }
+
+  // Tear down: restore terminal state
+  teardown() {
+    this.running = false;
+
+    if (this.frameTimer) {
+      clearInterval(this.frameTimer);
+      this.frameTimer = null;
+    }
+
+    // Disable mouse tracking
+    write(disableMouse);
+
+    // Restore terminal
+    write(showCursor);
+    write(exitAltScreen);
+    write(RESET);
+
+    cliCursor.show();
+
+    if (process.stdin.isTTY) {
+      process.stdin.setRawMode(false);
+      process.stdin.pause();
+    }
+  }
+
+  // Set the render function (called on each frame)
+  setRenderFunction(fn) {
+    this.renderFn = fn;
+  }
+
+  // Start the render loop
+  startLoop() {
+    if (this.frameTimer) return;
+    this.fullRender();
+    this.frameTimer = setInterval(() => {
+      this.fullRender();
+    }, Math.floor(1000 / this.fps));
+  }
+
+  // Force a full re-render
+  fullRender() {
+    if (!this.running || !this.renderFn) return;
+
+    const { cols, rows } = this.size;
+    const lines = this.renderFn(cols, rows);
+
+    // Build output: move to top-left and write all lines
+    let output = moveTo(1, 1);
+    for (let i = 0; i < rows; i++) {
+      const line = lines[i] || '';
+      output += padEnd(line, cols) + RESET;
+      if (i < rows - 1) output += '\n';
+    }
+
+    write(output);
+  }
+
+  // Get current terminal dimensions
+  getSize() {
+    this.size = getSize();
+    return this.size;
+  }
+}