@compilr-dev/cli 0.4.0 → 0.5.0

package/dist/ui/arch-type-overlay.d.ts

@@ -2,12 +2,7 @@
  * Architecture Type Selection Overlay
  *
  * Shows options for what type of architecture documentation to create.
- * User selects from:
- * - ADR (Architecture Decision Record)
- * - System Diagram
- * - Data Model
- * - API Design
- * - Custom topic
+ * Refactored to use BaseOverlay + ScreenStack + InputFeature.
  */
 export type ArchDocType = 'adr' | 'diagram' | 'data-model' | 'api' | 'custom';
 export interface ArchTypeChoice {

package/dist/ui/arch-type-overlay.js

@@ -2,228 +2,200 @@
  * Architecture Type Selection Overlay
  *
  * Shows options for what type of architecture documentation to create.
- * User selects from:
- * - ADR (Architecture Decision Record)
- * - System Diagram
- * - Data Model
- * - API Design
- * - Custom topic
+ * Refactored to use BaseOverlay + ScreenStack + InputFeature.
  */
 import * as terminal from './terminal.js';
-import { getStyles } from '../themes/index.js';
-import { pauseForOverlay, resumeAfterOverlay } from './overlay-controller.js';
+import { BaseOverlay, BaseScreen, ScreenStack, stay, pushScreen, popScreen, closeOverlay, isEscape, isEnter, isCtrlC, isNavigateUp, isNavigateDown, isClose, } from './base/index.js';
+import { InputFeature } from './features/index.js';
 const ARCH_OPTIONS = [
-    { key: '1', type: 'adr', label: 'Decision Record (ADR)', description: '"Why we chose X over Y"' },
-    { key: '2', type: 'diagram', label: 'System Diagram', description: 'Mermaid component diagram' },
-    { key: '3', type: 'data-model', label: 'Data Model', description: 'Entities and relationships' },
-    { key: '4', type: 'api', label: 'API Design', description: 'Endpoints and contracts' },
-    { key: '5', type: 'custom', label: 'Custom topic...', description: 'Specify your own' },
+    { type: 'adr', label: 'Decision Record (ADR)', description: '"Why we chose X over Y"' },
+    { type: 'diagram', label: 'System Diagram', description: 'Mermaid component diagram' },
+    { type: 'data-model', label: 'Data Model', description: 'Entities and relationships' },
+    { type: 'api', label: 'API Design', description: 'Endpoints and contracts' },
+    { type: 'custom', label: 'Custom topic...', description: 'Specify your own' },
 ];
-// =============================================================================
-// Rendering
-// =============================================================================
-function render(selectedIndex, previousLineCount = 0, targetLineCount = 0) {
-    const s = getStyles();
-    const lines = [];
-    const cols = terminal.getTerminalWidth();
-    const border = s.muted('─'.repeat(Math.max(1, cols - 1)));
-    // Clear previous render
-    if (previousLineCount > 0) {
-        terminal.clearLinesAbove(previousLineCount);
+/**
+ * Select screen - shows list of architecture doc types
+ */
+class SelectScreen extends BaseScreen {
+    state;
+    styles;
+    constructor(state, styles) {
+        super();
+        this.state = state;
+        this.styles = styles;
     }
-    // Header
-    lines.push(border);
-    lines.push(' ' + s.primary('Architecture Documentation'));
-    lines.push('');
-    // Question
-    lines.push(' What would you like to document?');
-    lines.push('');
-    // Options
-    for (let i = 0; i < ARCH_OPTIONS.length; i++) {
-        const opt = ARCH_OPTIONS[i];
-        const isCursor = selectedIndex === i;
-        const prefix = isCursor ? ' ❯ ' : '   ';
-        // Calculate max label width for alignment
+    render() {
+        const s = this.styles;
+        const cols = terminal.getTerminalWidth();
+        const border = s.muted('─'.repeat(Math.max(1, cols - 1)));
+        const lines = [];
+        // Header
+        lines.push(border);
+        lines.push(' ' + s.primary('Architecture Documentation'));
+        lines.push('');
+        // Question
+        lines.push(' What would you like to document?');
+        lines.push('');
+        // Options
         const maxLabelLen = Math.max(...ARCH_OPTIONS.map((o) => o.label.length));
-        const paddedLabel = opt.label.padEnd(maxLabelLen + 2);
-        if (isCursor) {
-            lines.push(s.primary(`${prefix}${opt.key}. ${paddedLabel}`) + s.muted(opt.description));
+        for (let i = 0; i < ARCH_OPTIONS.length; i++) {
+            const opt = ARCH_OPTIONS[i];
+            const isCursor = this.state.selectedIndex === i;
+            const prefix = isCursor ? ' ❯ ' : '   ';
+            const paddedLabel = opt.label.padEnd(maxLabelLen + 2);
+            if (isCursor) {
+                lines.push(s.primary(`${prefix}${paddedLabel}`) + s.muted(opt.description));
+            }
+            else {
+                lines.push(s.muted(`${prefix}${paddedLabel}${opt.description}`));
+            }
+        }
+        // Footer
+        lines.push('');
+        lines.push(s.muted(' ↑↓/jk Navigate · Enter Select · q/Esc Cancel'));
+        lines.push(border);
+        return lines;
+    }
+    handleKey(data) {
+        // Close keys
+        if (isCtrlC(data) || isClose(data)) {
+            return closeOverlay(null);
+        }
+        // Navigation up
+        if (isNavigateUp(data)) {
+            this.state.selectedIndex = Math.max(0, this.state.selectedIndex - 1);
+            return stay();
         }
-        else {
-            lines.push(s.muted(`${prefix}${opt.key}. ${paddedLabel}${opt.description}`));
+        // Navigation down
+        if (isNavigateDown(data)) {
+            this.state.selectedIndex = Math.min(ARCH_OPTIONS.length - 1, this.state.selectedIndex + 1);
+            return stay();
         }
+        // Enter - select option
+        if (isEnter(data)) {
+            const selected = ARCH_OPTIONS[this.state.selectedIndex];
+            if (selected.type === 'custom') {
+                // Switch to custom input screen
+                return pushScreen(new CustomInputScreen(this.styles));
+            }
+            return closeOverlay({ type: selected.type });
+        }
+        return stay();
+    }
+}
+/**
+ * Custom input screen - text input for custom topic using InputFeature
+ */
+class CustomInputScreen extends BaseScreen {
+    styles;
+    input;
+    constructor(styles) {
+        super();
+        this.styles = styles;
+        this.input = new InputFeature({ placeholder: 'e.g., Security Architecture' });
     }
-    // Footer
-    lines.push('');
-    lines.push(s.muted(' ↑↓ Navigate · Enter Select · Esc Cancel'));
-    lines.push(border);
-    // Pad with empty lines to maintain consistent height
-    while (lines.length < targetLineCount) {
+    onEnter() {
+        terminal.showCursor();
+    }
+    onExit() {
+        terminal.hideCursor();
+    }
+    render() {
+        const s = this.styles;
+        const cols = terminal.getTerminalWidth();
+        const border = s.muted('─'.repeat(Math.max(1, cols - 1)));
+        const lines = [];
+        // Header
+        lines.push(border);
+        lines.push(' ' + s.primary('Custom Architecture Topic'));
+        lines.push('');
+        // Input field
+        lines.push(' Enter the topic you want to document:');
         lines.push('');
+        lines.push(' ' + this.input.render(s));
+        lines.push('');
+        // Footer
+        lines.push(s.muted(' Enter Confirm · Esc Back · ←→ Move cursor'));
+        lines.push(border);
+        return lines;
+    }
+    handleKey(data) {
+        // Ctrl+C closes overlay
+        if (isCtrlC(data)) {
+            return closeOverlay(null);
+        }
+        // Escape goes back to select screen
+        if (isEscape(data)) {
+            return popScreen();
+        }
+        // Enter confirms input
+        if (isEnter(data)) {
+            const value = this.input.trimmedValue;
+            if (value) {
+                return closeOverlay({ type: 'custom', customTopic: value });
+            }
+            return stay(false); // Don't allow empty
+        }
+        // Let InputFeature handle the key
+        const result = this.input.handleKey(data);
+        if (result.handled) {
+            return stay(result.render);
+        }
+        return stay(false);
     }
-    // Render all lines
-    terminal.write(lines.join('\n'));
-    return lines.length;
 }
-function renderCustomInput(inputValue, previousLineCount = 0, targetLineCount = 0) {
-    const s = getStyles();
-    const lines = [];
-    const cols = terminal.getTerminalWidth();
-    const border = s.muted('─'.repeat(Math.max(1, cols - 1)));
-    // Clear previous render
-    if (previousLineCount > 0) {
-        terminal.clearLinesAbove(previousLineCount);
+// =============================================================================
+// Overlay Class
+// =============================================================================
+class ArchTypeOverlay extends BaseOverlay {
+    screenStack;
+    constructor() {
+        super({
+            lineCount: 0,
+            maxLineCount: 0,
+            selectedIndex: 0,
+        });
+        this.screenStack = new ScreenStack();
+        this.screenStack.push(new SelectScreen(this.state, this.styles));
     }
-    // Header
-    lines.push(border);
-    lines.push(' ' + s.primary('Custom Architecture Topic'));
-    lines.push('');
-    // Input field
-    lines.push(' Enter the topic you want to document:');
-    lines.push('');
-    lines.push(' ' + s.primary('> ') + inputValue + s.primary('_'));
-    lines.push('');
-    // Footer
-    lines.push(s.muted(' Enter to confirm · Esc to go back'));
-    lines.push(border);
-    // Pad with empty lines to maintain consistent height
-    while (lines.length < targetLineCount) {
-        lines.push('');
+    render() {
+        const screen = this.screenStack.current();
+        return screen?.render() ?? [];
+    }
+    handleKey(data) {
+        const screen = this.screenStack.current();
+        if (!screen) {
+            this.close(null);
+            return;
+        }
+        const result = screen.handleKey(data);
+        switch (result.action) {
+            case 'stay':
+                if (result.render) {
+                    this.update();
+                }
+                break;
+            case 'push':
+                this.screenStack.push(result.screen);
+                this.update();
+                break;
+            case 'pop':
+                this.screenStack.pop();
+                this.update();
+                break;
+            case 'close':
+                this.close(result.result);
+                break;
+        }
     }
-    // Render all lines
-    terminal.write(lines.join('\n'));
-    return lines.length;
 }
 // =============================================================================
-// Main Export
+// Export Function (Backward Compatible)
 // =============================================================================
 /**
  * Show the architecture type selection overlay and return the user's choice.
  */
 export async function showArchTypeOverlay() {
-    let selectedIndex = 0;
-    let lineCount = 0;
-    let maxLineCount = 0;
-    let mode = 'select';
-    let customInput = '';
-    // Pause footer animation
-    pauseForOverlay();
-    // Clear and prepare
-    terminal.clearToEndOfScreen();
-    terminal.writeLine('');
-    terminal.hideCursor();
-    const wasRawMode = process.stdin.isRaw;
-    terminal.enableRawMode();
-    // Initial render
-    lineCount = render(selectedIndex, 0);
-    maxLineCount = Math.max(maxLineCount, lineCount);
-    // Re-render to stabilize
-    lineCount = render(selectedIndex, lineCount, lineCount);
-    return new Promise((resolve) => {
-        const cleanup = () => {
-            terminal.clearLinesAbove(maxLineCount);
-            terminal.writeLine('');
-            terminal.showCursor();
-            if (!wasRawMode) {
-                terminal.disableRawMode();
-            }
-            process.stdin.removeListener('data', handleData);
-            resumeAfterOverlay();
-        };
-        const handleData = (data) => {
-            const isEscape = data.length === 1 && data[0] === 0x1b;
-            const isUpArrow = data.length === 3 && data[0] === 0x1b && data[1] === 0x5b && data[2] === 0x41;
-            const isDownArrow = data.length === 3 && data[0] === 0x1b && data[1] === 0x5b && data[2] === 0x42;
-            const isCtrlC = data.length === 1 && data[0] === 0x03;
-            const isEnter = data.length === 1 && (data[0] === 0x0d || data[0] === 0x0a);
-            const isBackspace = data.length === 1 && (data[0] === 0x7f || data[0] === 0x08);
-            if (mode === 'select') {
-                // Ctrl+C or Escape cancels
-                if (isCtrlC || isEscape) {
-                    cleanup();
-                    resolve(null);
-                    return;
-                }
-                // Navigation
-                if (isUpArrow) {
-                    selectedIndex = Math.max(0, selectedIndex - 1);
-                }
-                else if (isDownArrow) {
-                    selectedIndex = Math.min(ARCH_OPTIONS.length - 1, selectedIndex + 1);
-                }
-                else if (isEnter) {
-                    const selected = ARCH_OPTIONS[selectedIndex];
-                    if (selected.type === 'custom') {
-                        // Switch to custom input mode
-                        mode = 'custom-input';
-                        customInput = '';
-                        terminal.showCursor();
-                        lineCount = renderCustomInput(customInput, maxLineCount, maxLineCount);
-                        maxLineCount = Math.max(maxLineCount, lineCount);
-                        return;
-                    }
-                    cleanup();
-                    resolve({ type: selected.type });
-                    return;
-                }
-                else if (data.length === 1 && data[0] >= 0x31 && data[0] <= 0x35) {
-                    // Number keys 1-5
-                    const numIndex = data[0] - 0x31; // 0-indexed
-                    if (numIndex < ARCH_OPTIONS.length) {
-                        const selected = ARCH_OPTIONS[numIndex];
-                        if (selected.type === 'custom') {
-                            mode = 'custom-input';
-                            customInput = '';
-                            terminal.showCursor();
-                            lineCount = renderCustomInput(customInput, maxLineCount, maxLineCount);
-                            maxLineCount = Math.max(maxLineCount, lineCount);
-                            return;
-                        }
-                        cleanup();
-                        resolve({ type: selected.type });
-                        return;
-                    }
-                }
-                // Re-render
-                lineCount = render(selectedIndex, maxLineCount, maxLineCount);
-                maxLineCount = Math.max(maxLineCount, lineCount);
-            }
-            else {
-                // Custom input mode
-                if (isCtrlC) {
-                    cleanup();
-                    resolve(null);
-                    return;
-                }
-                if (isEscape) {
-                    // Go back to select mode
-                    mode = 'select';
-                    terminal.hideCursor();
-                    lineCount = render(selectedIndex, maxLineCount, maxLineCount);
-                    maxLineCount = Math.max(maxLineCount, lineCount);
-                    return;
-                }
-                if (isEnter) {
-                    if (customInput.trim()) {
-                        cleanup();
-                        resolve({ type: 'custom', customTopic: customInput.trim() });
-                        return;
-                    }
-                    // Don't allow empty custom topic
-                    return;
-                }
-                if (isBackspace) {
-                    customInput = customInput.slice(0, -1);
-                }
-                else if (data.length === 1 && data[0] >= 0x20 && data[0] <= 0x7e) {
-                    // Printable ASCII
-                    customInput += String.fromCharCode(data[0]);
-                }
-                // Re-render
-                lineCount = renderCustomInput(customInput, maxLineCount, maxLineCount);
-                maxLineCount = Math.max(maxLineCount, lineCount);
-            }
-        };
-        process.stdin.on('data', handleData);
-    });
+    return new ArchTypeOverlay().show();
 }

package/dist/ui/ask-user-overlay-v2.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Ask User Overlay (Refactored)
+ *
+ * Modal overlay for presenting multi-question forms to the user.
+ * Uses InlineOverlay base class for consistent lifecycle management.
+ *
+ * Features:
+ * - Multiple questions with navigation (←/→ or Tab)
+ * - Options to select from with arrow keys
+ * - Custom text input option
+ * - Multi-select support
+ * - Progress indicator showing answered questions
+ */
+import type { AskUserQuestion } from '../tools/ask-user.js';
+export interface AskUserOptions {
+    questions: AskUserQuestion[];
+    context?: string;
+}
+export interface AskUserResult {
+    answers: Record<string, string | string[]>;
+    skipped: string[];
+}
+/**
+ * Show the ask user overlay
+ */
+export declare function showAskUserOverlay(options: AskUserOptions): Promise<AskUserResult>;