@rolandjlevy/css-ghost 1.0.4 → 1.1.1

package/src/deleter.js

@@ -0,0 +1,177 @@
+import { readFileSync, writeFileSync } from 'fs';
+import { extname, relative } from 'path';
+import { createInterface } from 'readline';
+import pc from 'picocolors';
+
+// ─── Helpers ────────────────────────────────────────────────────────────────
+
+function prompt(question) {
+  const rl = createInterface({ input: process.stdin, output: process.stdout });
+  return new Promise(resolve => {
+    rl.question(question, answer => { rl.close(); resolve(answer.trim()); });
+  });
+}
+
+// Collapse runs of 3+ blank lines down to 2, and ensure a trailing newline.
+function normalise(content) {
+  return content.replace(/\n{3,}/g, '\n\n').trimEnd() + '\n';
+}
+
+// Return the 0-based index of the last line belonging to the block that
+// starts at `startIdx`. Counts {/(/[ as openers and }/)/] as closers.
+function findBlockEnd(lines, startIdx) {
+  let depth = 0;
+  let hasOpener = false;
+
+  for (let i = startIdx; i < lines.length; i++) {
+    for (const ch of lines[i]) {
+      if (ch === '{' || ch === '(' || ch === '[') { depth++; hasOpener = true; }
+      else if (ch === '}' || ch === ')' || ch === ']') depth--;
+    }
+    if (hasOpener && depth <= 0) return i;
+  }
+
+  return startIdx; // single-line with no opener
+}
+
+// ─── CSS / SCSS / LESS ───────────────────────────────────────────────────────
+
+function deleteFromCssFile(filePath, orphans) {
+  let content = readFileSync(filePath, 'utf-8');
+  let removed = 0;
+
+  // Sort longest rules first so that nested/contained rules don't mis-match.
+  const sorted = [...orphans].sort((a, b) => (b.rule?.length ?? 0) - (a.rule?.length ?? 0));
+
+  for (const { name, rule } of sorted) {
+    if (!rule) continue;
+    const idx = content.indexOf(rule);
+    if (idx === -1) continue;
+
+    const before = content.slice(0, idx);
+    const after  = content.slice(idx + rule.length);
+    // Eat one trailing newline so we don't leave double-blank-lines everywhere.
+    content = before + after.replace(/^\n/, '');
+    removed++;
+  }
+
+  writeFileSync(filePath, normalise(content), 'utf-8');
+  return removed;
+}
+
+// ─── JS style objects (StyleSheet.create / makeStyles / plain objects) ───────
+
+function deleteFromJsFile(filePath, orphans) {
+  const lines = readFileSync(filePath, 'utf-8').split('\n');
+  let removed = 0;
+
+  // Reverse order so later splices don't shift earlier line indices.
+  const sorted = [...orphans].sort((a, b) => b.line - a.line);
+
+  for (const { name, line } of sorted) {
+    const lineIdx = line - 1; // convert to 0-based
+    const lineContent = lines[lineIdx] ?? '';
+
+    // Guard: confirm the key is really on this line.
+    if (!new RegExp(`\\b${name}\\s*:`).test(lineContent)) continue;
+
+    const endIdx = findBlockEnd(lines, lineIdx);
+    lines.splice(lineIdx, endIdx - lineIdx + 1);
+    removed++;
+  }
+
+  writeFileSync(filePath, normalise(lines.join('\n')), 'utf-8');
+  return removed;
+}
+
+// ─── vanilla-extract (.css.ts / .css.js) ─────────────────────────────────────
+
+function deleteFromVeFile(filePath, orphans) {
+  const lines = readFileSync(filePath, 'utf-8').split('\n');
+  let removed = 0;
+
+  const sorted = [...orphans].sort((a, b) => b.line - a.line);
+
+  for (const { name, line } of sorted) {
+    const lineIdx = line - 1;
+    const lineContent = lines[lineIdx] ?? '';
+
+    if (!lineContent.includes(`export const ${name}`)) continue;
+
+    const endIdx = findBlockEnd(lines, lineIdx);
+    lines.splice(lineIdx, endIdx - lineIdx + 1);
+    removed++;
+  }
+
+  writeFileSync(filePath, normalise(lines.join('\n')), 'utf-8');
+  return removed;
+}
+
+// ─── Public API ──────────────────────────────────────────────────────────────
+
+export async function deleteOrphans(results, { yes = false } = {}) {
+  const toDelete = results.filter(r => r.orphaned.length > 0);
+
+  if (toDelete.length === 0) {
+    console.log('Nothing to delete.\n');
+    return 0;
+  }
+
+  const totalCount = toDelete.reduce((n, r) => n + r.orphaned.length, 0);
+
+  console.log(
+    `\n${pc.bold('🗑️  The following orphaned selectors will be permanently deleted:')}\n`
+  );
+
+  for (const { filePath, orphaned } of toDelete) {
+    const rel = relative(process.cwd(), filePath);
+    console.log(`  ${pc.bold(rel)}`);
+    orphaned.forEach(o => console.log(`    ${pc.yellow('•')} .${o.name} ${pc.dim(`(line ${o.line})`)}`));
+  }
+
+  if (!yes) {
+    const answer = await prompt(
+      `\n${pc.yellow('⚠️  This will modify your source files and cannot be undone.')} Continue? ${pc.dim('[y/N]')} `
+    );
+    if (answer.toLowerCase() !== 'y') {
+      console.log('\nCancelled — no files were changed.\n');
+      return 0;
+    }
+  }
+
+  console.log('');
+  let totalRemoved = 0;
+
+  for (const { filePath, orphaned } of toDelete) {
+    const ext    = extname(filePath);
+    const rel    = relative(process.cwd(), filePath);
+    let removed;
+
+    try {
+      if (['.css', '.scss', '.sass', '.less'].includes(ext)) {
+        removed = deleteFromCssFile(filePath, orphaned);
+      } else if (/\.css\.(ts|js)x?$/.test(filePath)) {
+        removed = deleteFromVeFile(filePath, orphaned);
+      } else {
+        removed = deleteFromJsFile(filePath, orphaned);
+      }
+
+      const label = removed === orphaned.length
+        ? pc.green(`✂️  ${rel}`)
+        : pc.yellow(`✂️  ${rel}`);
+      const note  = removed < orphaned.length
+        ? pc.dim(` (${orphaned.length - removed} could not be located — check manually)`)
+        : '';
+      console.log(`${label} — removed ${removed}${note}`);
+      totalRemoved += removed;
+    } catch (err) {
+      console.log(`${pc.red('❌')} ${rel} — ${err.message}`);
+    }
+  }
+
+  console.log(
+    `\n${pc.green(pc.bold(`✅ Done.`))} Removed ${totalRemoved} orphaned selector${totalRemoved !== 1 ? 's' : ''}.\n`
+  );
+
+  return totalRemoved;
+}

package/src/git.js

@@ -0,0 +1,73 @@
+import { execFileSync, execFile } from 'child_process';
+import { promisify } from 'util';
+
+const execFileAsync = promisify(execFile);
+
+// File globs to restrict class-name searches to component files only
+const COMPONENT_PATTERNS = [
+  '*.tsx', '*.jsx', '*.ts', '*.js',
+  '*.html', '*.vue', '*.svelte',
+];
+
+export function isGitRepo(cwd) {
+  try {
+    execFileSync('git', ['rev-parse', '--git-dir'], { cwd, stdio: 'pipe' });
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+async function fetchTrail(searchStr, cwd, filePatterns) {
+  try {
+    const args = [
+      'log',
+      '-S', searchStr,
+      '--pretty=format:%h|%an|%ar|%s',
+      '-1',
+    ];
+    if (filePatterns.length > 0) {
+      args.push('--');
+      args.push(...filePatterns);
+    }
+    const { stdout } = await execFileAsync('git', args, { cwd, timeout: 8000 });
+    const line = stdout.trim();
+    if (!line) return null;
+
+    const firstPipe  = line.indexOf('|');
+    const secondPipe = line.indexOf('|', firstPipe + 1);
+    const thirdPipe  = line.indexOf('|', secondPipe + 1);
+
+    return {
+      hash:    line.slice(0, firstPipe),
+      author:  line.slice(firstPipe + 1, secondPipe),
+      when:    line.slice(secondPipe + 1, thirdPipe),
+      subject: line.slice(thirdPipe + 1),
+    };
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Fetch the most recent git commit that changed the occurrence count of each
+ * orphan's identifier in the repository.
+ *
+ * For class-name orphans, the search is limited to component file extensions
+ * so the results reflect usage history rather than the style-file definition.
+ *
+ * For CSS variable orphans (`isVar: true`), the search term is `var(--name`
+ * and is not restricted to file types.
+ *
+ * Returns an object mapping orphan name → trail (or null when not found).
+ */
+export async function getGhostTrails(orphans, cwd, { isVar = false } = {}) {
+  const searches = orphans.map(o => {
+    const searchStr  = isVar ? `var(${o.name}` : o.name;
+    const patterns   = isVar ? [] : COMPONENT_PATTERNS;
+    return fetchTrail(searchStr, cwd, patterns).then(trail => [o.name, trail]);
+  });
+
+  const entries = await Promise.all(searches);
+  return Object.fromEntries(entries);
+}

package/src/hook.js

@@ -0,0 +1,64 @@
+import { writeFileSync, mkdirSync, existsSync } from 'fs';
+import { join } from 'path';
+import pc from 'picocolors';
+
+/**
+ * Write a pre-commit hook that runs css-ghost with --strict on every commit.
+ * The hook exits 1 (blocking the commit) if any orphaned selectors are found.
+ *
+ * `dirs` — the directories the hook should scan; defaults to '.' when empty.
+ * `cwd`  — repo root to write the hook into.
+ */
+export function installHook(dirs, cwd = process.cwd()) {
+  const gitDir = join(cwd, '.git');
+  if (!existsSync(gitDir)) {
+    console.error(`${pc.red('❌')} No ${pc.bold('.git')} directory found — is this a git repository?`);
+    process.exit(1);
+  }
+
+  const hooksDir = join(gitDir, 'hooks');
+  mkdirSync(hooksDir, { recursive: true });
+
+  const hookPath   = join(hooksDir, 'pre-commit');
+  const dirArgs    = dirs.length > 0 ? dirs.join(' ') : '.';
+  const alreadyExists = existsSync(hookPath);
+
+  // Single-quote escaping for shell: end the string, insert \', reopen it.
+  const sq = (s) => s.replace(/'/g, "'\\''");
+
+  const script = [
+    '#!/bin/sh',
+    '# css-ghost pre-commit hook',
+    '# Blocks commits when orphaned CSS selectors are present.',
+    `# Installed via: css-ghost --install-hook ${dirArgs}`,
+    `# Scans:         ${dirArgs}`,
+    '# Skip once:     git commit --no-verify',
+    '# Uninstall:     rm .git/hooks/pre-commit',
+    '',
+    `echo "👻  css-ghost — checking for orphaned CSS selectors..."`,
+    `npx --yes @rolandjlevy/css-ghost ${dirArgs} --strict --output /tmp/css-ghost-hook-report.md`,
+    '',
+    'if [ $? -ne 0 ]; then',
+    '  echo ""',
+    `  echo "❌  Commit blocked: orphaned CSS selectors found in: ${sq(dirArgs)}"`,
+    `  echo "    Run 'css-ghost ${sq(dirArgs)}' to see the full report"`,
+    `  echo "    Run 'css-ghost ${sq(dirArgs)} --delete' to remove them"`,
+    '  echo "    Or skip this check: git commit --no-verify"',
+    '  exit 1',
+    'fi',
+    '',
+    'exit 0',
+  ].join('\n') + '\n';
+
+  writeFileSync(hookPath, script, { mode: 0o755 });
+
+  if (alreadyExists) {
+    console.log(`${pc.yellow('⚠️ ')} Overwrote existing pre-commit hook`);
+  } else {
+    console.log(`${pc.green('✅')} Pre-commit hook installed at ${pc.bold('.git/hooks/pre-commit')}`);
+  }
+  console.log(`   Scans:      ${pc.cyan(dirArgs)}`);
+  console.log(`   Blocks:     commits when orphaned selectors are found`);
+  console.log(`   Skip once:  ${pc.dim('git commit --no-verify')}`);
+  console.log(`   Uninstall:  ${pc.dim('rm .git/hooks/pre-commit')}`);
+}

package/src/parser.js

@@ -1,6 +1,56 @@
 import { readFileSync } from 'fs';
 import { extname } from 'path';
 
+// ─── CSS custom property extraction ─────────────────────────────────────────
+
+/**
+ * Find every `--name: value;` declaration in a CSS/SCSS file.
+ * Returns a Map of '--name' → { line, rule }.
+ *
+ * Deliberately ignores `var(--name)` usages because those don't have `:` directly
+ * after the variable name — so the regex `--name\s*:` is safe.
+ */
+function extractCssVarDefinitions(content) {
+  const vars = new Map();
+  // Strip block comments preserving line numbers
+  const stripped = content.replace(/\/\*[\s\S]*?\*\//g, m => m.replace(/[^\n]/g, ' '));
+  const strippedLines = stripped.split('\n');
+  const rawLines = content.split('\n');
+
+  for (let i = 0; i < strippedLines.length; i++) {
+    const line = strippedLines[i];
+    const lineNum = i + 1;
+    const varDefRe = /(--[a-zA-Z][a-zA-Z0-9-]*)\s*:/g;
+    let m;
+    while ((m = varDefRe.exec(line)) !== null) {
+      const name = m[1];
+      if (!vars.has(name)) {
+        // Read value from the raw (non-stripped) line
+        const rawAfterColon = rawLines[i].slice(rawLines[i].indexOf(m[0]) + m[0].length).trim();
+        const value = rawAfterColon.replace(/;.*$/, '').replace(/\/\*.*\*\//g, '').trim();
+        vars.set(name, { line: lineNum, rule: `${name}: ${value};` });
+      }
+    }
+  }
+
+  return vars;
+}
+
+/**
+ * Find every `var(--name)` usage in any file content.
+ * Returns a Set of '--name' strings.
+ * Works across CSS, SCSS, JS, TS, JSX, TSX, HTML, Vue, Svelte, etc.
+ */
+export function extractVarUsages(content) {
+  const used = new Set();
+  const re = /var\s*\(\s*(--[a-zA-Z][a-zA-Z0-9-]*)/g;
+  let m;
+  while ((m = re.exec(content)) !== null) {
+    used.add(m[1]);
+  }
+  return used;
+}
+
 // ─── CSS / SCSS selector extraction ────────────────────────────────────────
 
 function extractCssSelectors(content) {
@@ -76,34 +126,114 @@ function extractCssSelectors(content) {
 export function isJsStyleFile(content, filePath) {
   return (
     /StyleSheet\.create\s*\(\s*\{/.test(content) ||
+    /makeStyles\s*\(/.test(content) ||
+    /\.css\.(ts|js)x?$/.test(filePath) ||                                           // vanilla-extract
     (/styles?\.(js|ts)$/.test(filePath) && /(const|let|var)\s+styles?\s*=\s*\{/.test(content))
   );
 }
 
+// Extract top-level keys from a JS style object, depth-aware so CSS property
+// keys nested inside each class's value object are not returned.
+function extractTopLevelKeys(objectContent, startLine) {
+  const keys = new Map();
+  const objLines = objectContent.split('\n');
+  let depth = 0;
+
+  for (let i = 0; i < objLines.length; i++) {
+    const line = objLines[i];
+    const lineNum = startLine + i;
+
+    if (depth === 0) {
+      const keyMatch = line.match(/^\s*([a-zA-Z_$][a-zA-Z0-9_$]*)\s*:/);
+      if (keyMatch) {
+        const name = keyMatch[1];
+        if (!keys.has(name)) {
+          keys.set(name, { line: lineNum, rule: line.trim() });
+        }
+      }
+    }
+
+    for (const char of line) {
+      if (char === '{') depth++;
+      else if (char === '}') depth--;
+    }
+  }
+
+  return keys;
+}
+
+// Find the content between the first matching { } pair after `startIdx`.
+function extractBraceContent(content, startIdx) {
+  let braceStart = -1;
+  for (let i = startIdx; i < content.length; i++) {
+    if (content[i] === '{') { braceStart = i; break; }
+  }
+  if (braceStart === -1) return null;
+
+  let depth = 0;
+  let end = braceStart;
+  for (let i = braceStart; i < content.length; i++) {
+    if (content[i] === '{') depth++;
+    else if (content[i] === '}') {
+      depth--;
+      if (depth === 0) { end = i; break; }
+    }
+  }
+
+  const inner = content.slice(braceStart + 1, end);
+  const startLine = content.slice(0, braceStart + 1).split('\n').length;
+  return { inner, startLine };
+}
+
 function extractJsStyleKeys(content) {
-  const keys = new Map(); // name → { line, rule }
-  const lines = content.split('\n');
+  const keys = new Map();
 
+  // StyleSheet.create({ ... }) — React Native
   const ssMatch = content.match(/StyleSheet\.create\s*\(\s*\{([\s\S]*?)\}\s*\)/);
+  // const styles = { ... } — plain named object
   const plainMatch = content.match(/(?:const|let|var)\s+styles?\s*=\s*\{([\s\S]*)\}/);
-  const objectContent = ssMatch?.[1] ?? plainMatch?.[1];
+  const flatContent = ssMatch?.[1] ?? plainMatch?.[1];
+
+  if (flatContent) {
+    const startOffset = content.indexOf(flatContent);
+    const startLine = content.slice(0, startOffset).split('\n').length;
+    for (const [k, v] of extractTopLevelKeys(flatContent, startLine)) {
+      if (!keys.has(k)) keys.set(k, v);
+    }
+  }
 
-  if (objectContent) {
-    // Find start offset in original content
-    const startOffset = content.indexOf(objectContent);
-    const preContent = content.slice(0, startOffset);
-    const startLine = preContent.split('\n').length;
+  // makeStyles({ ... }) or makeStyles(theme => ({ ... })) — MUI
+  // Handles plain object, arrow returning object, and createStyles wrapper.
+  const msRegex = /makeStyles\s*\(/g;
+  let msMatch;
+  while ((msMatch = msRegex.exec(content)) !== null) {
+    const result = extractBraceContent(content, msMatch.index);
+    if (!result) continue;
+    for (const [k, v] of extractTopLevelKeys(result.inner, result.startLine)) {
+      if (!keys.has(k)) keys.set(k, v);
+    }
+  }
 
-    const keyRegex = /^\s*([a-zA-Z_$][a-zA-Z0-9_$]*)\s*:/gm;
-    let m;
-    while ((m = keyRegex.exec(objectContent)) !== null) {
-      const keyLine = startLine + objectContent.slice(0, m.index).split('\n').length - 1;
-      const name = m[1];
-      if (!keys.has(name)) {
-        // Grab the value snippet for context
-        const lineText = lines[keyLine - 1]?.trim() ?? '';
-        keys.set(name, { line: keyLine, rule: lineText });
-      }
+  // vanilla-extract: export const foo = style({...}) or style([...])
+  // The export name itself is the class — tracked as a selector.
+  const veStyleRegex = /export\s+const\s+([a-zA-Z_$][a-zA-Z0-9_$]*)\s*=\s*style\s*[([{]/g;
+  let veMatch;
+  while ((veMatch = veStyleRegex.exec(content)) !== null) {
+    const name = veMatch[1];
+    const lineNum = content.slice(0, veMatch.index).split('\n').length;
+    if (!keys.has(name)) {
+      keys.set(name, { line: lineNum, rule: `export const ${name} = style(...)` });
+    }
+  }
+
+  // vanilla-extract: export const variants = styleVariants({ small: {}, large: {} })
+  // The export name is tracked as a selector (usage: variants.small or variants[size]).
+  const veVariantsRegex = /export\s+const\s+([a-zA-Z_$][a-zA-Z0-9_$]*)\s*=\s*styleVariants\s*\(/g;
+  while ((veMatch = veVariantsRegex.exec(content)) !== null) {
+    const name = veMatch[1];
+    const lineNum = content.slice(0, veMatch.index).split('\n').length;
+    if (!keys.has(name)) {
+      keys.set(name, { line: lineNum, rule: `export const ${name} = styleVariants(...)` });
     }
   }
 
@@ -123,8 +253,8 @@ export function extractUsages(content) {
     m[1].trim().split(/\s+/).forEach(c => c && used.add(c));
   }
 
-  // styles.foo
-  const dotRegex = /styles?\.([a-zA-Z_$][a-zA-Z0-9_$]*)/g;
+  // styles.foo or classes.foo (MUI makeStyles convention)
+  const dotRegex = /(?:styles?|classes)\.([a-zA-Z_$][a-zA-Z0-9_$]*)/g;
   while ((m = dotRegex.exec(content)) !== null) {
     used.add(m[1]);
   }
@@ -169,6 +299,16 @@ export function extractUsages(content) {
     }
   }
 
+  // vanilla-extract: import { foo, bar } from './something.css' (resolves to .css.ts)
+  // Named imports from any .css file are treated as used selectors.
+  // Handles aliases: `import { root as buttonRoot }` → tracks 'root' (the defined name).
+  const veImportRegex = /import\s*\{([^}]+)\}\s*from\s*['"][^'"]+\.css['"]/g;
+  while ((m = veImportRegex.exec(content)) !== null) {
+    m[1].split(',')
+      .map(n => n.trim().split(/\s+as\s+/)[0].trim())
+      .forEach(n => n && used.add(n));
+  }
+
   // Template literal dynamic class names — flag only if truly dynamic (has ${})
   // But first extract any static styles.foo refs inside them (already caught above by dotRegex)
   if (/`[^`]*\$\{[^}]+\}[^`]*`/.test(content)) {
@@ -185,15 +325,22 @@ export function parseStyleFile(filePath) {
   const ext = extname(filePath);
 
   if (['.css', '.scss', '.sass', '.less'].includes(ext)) {
-    return { selectors: extractCssSelectors(content), hasDynamic: false };
+    return {
+      selectors: extractCssSelectors(content),
+      cssVars:   extractCssVarDefinitions(content),
+      varUsages: extractVarUsages(content), // vars used within this style file itself
+      hasDynamic: false,
+    };
   }
 
-  // JS/TS style file
+  // JS/TS style file — CSS custom properties are not typically defined here
   const selectors = extractJsStyleKeys(content);
-  return { selectors, hasDynamic: false };
+  return { selectors, cssVars: new Map(), varUsages: new Set(), hasDynamic: false };
 }
 
 export function parseComponentFile(filePath) {
   const content = readFileSync(filePath, 'utf-8');
-  return extractUsages(content);
+  const { used, hasDynamic } = extractUsages(content);
+  const usedVars = extractVarUsages(content);
+  return { used, usedVars, hasDynamic };
 }

package/src/picker.js

@@ -0,0 +1,123 @@
+import { readdirSync, statSync } from 'fs';
+import { join } from 'path';
+
+const SKIP = new Set(['node_modules', '.git', 'dist', 'build', '.next', 'out', 'coverage', '.cache']);
+
+function getDirs(dir) {
+  try {
+    return readdirSync(dir)
+      .filter(f => {
+        if (f.startsWith('.') || SKIP.has(f)) return false;
+        try { return statSync(join(dir, f)).isDirectory(); }
+        catch { return false; }
+      })
+      .sort();
+  } catch { return []; }
+}
+
+export async function pickDirectories() {
+  return new Promise((done) => {
+    let cwd    = process.cwd();
+    let dirs   = getDirs(cwd);
+    let cursor = 0;
+    let selected = [];
+
+    // ANSI helpers (raw — no extra dep)
+    const C = {
+      reset:  '\x1b[0m',
+      bold:   '\x1b[1m',
+      dim:    '\x1b[2m',
+      invert: '\x1b[7m',
+      green:  '\x1b[32m',
+      cyan:   '\x1b[36m',
+    };
+
+    function render() {
+      const lines = [
+        '',
+        `${C.bold}📂 Directory picker${C.reset}  — navigate into a folder, then press ${C.cyan}[a]${C.reset} to add it`,
+        '',
+        `${C.dim}📍 ${cwd}${C.reset}`,
+        '',
+      ];
+
+      if (dirs.length === 0) {
+        lines.push(`  ${C.dim}(no subdirectories)${C.reset}`);
+      } else {
+        dirs.forEach((d, i) => {
+          const active = i === cursor;
+          lines.push(active
+            ? `  ${C.invert} 📁 ${d} ${C.reset}`
+            : `    📁 ${d}`);
+        });
+      }
+
+      lines.push('');
+
+      if (selected.length > 0) {
+        lines.push(`${C.green}✅ Added to scan:${C.reset}`);
+        selected.forEach(s => lines.push(`   ${C.green}${s}${C.reset}`));
+        lines.push('');
+      }
+
+      lines.push(
+        `${C.dim}[↑↓/jk] navigate  [↵/→] enter  [←] parent  [a] add current dir  [d] done  [^C] quit${C.reset}`
+      );
+
+      process.stdout.write('\x1b[H\x1b[J' + lines.join('\n') + '\n');
+    }
+
+    function cleanup() {
+      process.stdin.setRawMode(false);
+      process.stdin.pause();
+      process.stdout.write('\x1b[2J\x1b[H');
+    }
+
+    function finish() {
+      cleanup();
+      done(selected.length > 0 ? selected : [cwd]);
+    }
+
+    function goUp() {
+      const parent = join(cwd, '..');
+      if (parent !== cwd) {
+        cwd   = parent;
+        dirs  = getDirs(cwd);
+        cursor = 0;
+      }
+    }
+
+    function goInto() {
+      if (dirs.length > 0) {
+        cwd    = join(cwd, dirs[cursor]);
+        dirs   = getDirs(cwd);
+        cursor = 0;
+      }
+    }
+
+    function toggleAdd() {
+      const idx = selected.indexOf(cwd);
+      if (idx === -1) selected.push(cwd);
+      else selected.splice(idx, 1);
+    }
+
+    process.stdin.setRawMode(true);
+    process.stdin.resume();
+    process.stdin.setEncoding('utf8');
+    process.stdout.write('\x1b[2J\x1b[H');
+    render();
+
+    process.stdin.on('data', (key) => {
+      if (key === '\x03')                    { cleanup(); process.exit(0); }       // Ctrl+C
+      else if (key === '\x1b[A' || key === 'k') cursor = Math.max(0, cursor - 1); // up
+      else if (key === '\x1b[B' || key === 'j') cursor = Math.min(dirs.length - 1, cursor + 1); // down
+      else if (key === '\x1b[C' || key === '\r') goInto();  // right / Enter
+      else if (key === '\x1b[D' || key === '\x7f') goUp();  // left / backspace
+      else if (key === 'a') toggleAdd();
+      else if (key === 'd') { finish(); return; }
+
+      if (dirs.length === 0) cursor = 0;
+      render();
+    });
+  });
+}