@compilr-dev/cli 0.4.0 → 0.5.0

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

@@ -0,0 +1,37 @@
+/**
+ * Architecture Type Selection Overlay V2
+ *
+ * Shows options for what type of architecture documentation to create.
+ * Uses BaseOverlayV2 for TerminalUI integration.
+ *
+ * Has two "screens":
+ * - Select: Choose from predefined doc types
+ * - Custom input: Enter a custom topic
+ */
+import { BaseOverlayV2 } from '../../base/index.js';
+import type { RenderContext, OverlayAction, KeyEvent } from '../types.js';
+export type ArchDocType = 'adr' | 'diagram' | 'data-model' | 'api' | 'custom';
+export interface ArchTypeChoiceV2 {
+    type: ArchDocType;
+    customTopic?: string;
+}
+type ScreenMode = 'select' | 'custom-input';
+interface ArchTypeState {
+    mode: ScreenMode;
+    selectedIndex: number;
+    inputBuffer: string;
+    inputCursorPos: number;
+}
+export declare class ArchTypeOverlayV2 extends BaseOverlayV2<ArchTypeState, ArchTypeChoiceV2 | null> {
+    readonly type: "inline";
+    readonly id = "arch-type-overlay-v2";
+    constructor();
+    protected renderContent(context: RenderContext): string[];
+    private renderSelectScreen;
+    private renderCustomInputScreen;
+    handleKey(key: KeyEvent): OverlayAction<ArchTypeChoiceV2 | null>;
+    private handleSelectKey;
+    private handleCustomInputKey;
+    getCloseSummary(result: ArchTypeChoiceV2 | null): string | null;
+}
+export {};

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

@@ -0,0 +1,240 @@
+/**
+ * Architecture Type Selection Overlay V2
+ *
+ * Shows options for what type of architecture documentation to create.
+ * Uses BaseOverlayV2 for TerminalUI integration.
+ *
+ * Has two "screens":
+ * - Select: Choose from predefined doc types
+ * - Custom input: Enter a custom topic
+ */
+import { BaseOverlayV2, renderBorder } from '../../base/index.js';
+const ARCH_OPTIONS = [
+    { 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' },
+];
+// =============================================================================
+// Overlay Implementation
+// =============================================================================
+export class ArchTypeOverlayV2 extends BaseOverlayV2 {
+    type = 'inline';
+    id = 'arch-type-overlay-v2';
+    constructor() {
+        super({
+            mode: 'select',
+            selectedIndex: 0,
+            inputBuffer: '',
+            inputCursorPos: 0,
+        });
+        this.minHeight = 14; // Prevent jitter between screens
+    }
+    // ===========================================================================
+    // Rendering
+    // ===========================================================================
+    renderContent(context) {
+        if (this.state.mode === 'select') {
+            return this.renderSelectScreen(context);
+        }
+        else {
+            return this.renderCustomInputScreen(context);
+        }
+    }
+    renderSelectScreen(context) {
+        const s = context.styles;
+        const lines = [];
+        const border = renderBorder(context.width, s);
+        // 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));
+        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(' Up/Down Navigate | Enter Select | q/Esc Cancel'));
+        lines.push(border);
+        return lines;
+    }
+    renderCustomInputScreen(context) {
+        const s = context.styles;
+        const lines = [];
+        const border = renderBorder(context.width, s);
+        // 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('');
+        // Render input with cursor
+        const displayValue = this.state.inputBuffer || s.muted('e.g., Security Architecture');
+        if (this.state.inputBuffer) {
+            // Show cursor position
+            const before = this.state.inputBuffer.slice(0, this.state.inputCursorPos);
+            const after = this.state.inputBuffer.slice(this.state.inputCursorPos);
+            lines.push(` > ${before}|${after}`);
+        }
+        else {
+            lines.push(` > |${displayValue}`);
+        }
+        lines.push('');
+        // Footer
+        lines.push(s.muted(' Enter Confirm | Esc Back | Left/Right Move cursor'));
+        lines.push(border);
+        return lines;
+    }
+    // ===========================================================================
+    // Key Handling
+    // ===========================================================================
+    handleKey(key) {
+        // Ctrl+C always cancels
+        if (this.isInterruptKey(key)) {
+            return this.close(null);
+        }
+        if (this.state.mode === 'select') {
+            return this.handleSelectKey(key);
+        }
+        else {
+            return this.handleCustomInputKey(key);
+        }
+    }
+    handleSelectKey(key) {
+        // Close keys (q or Escape)
+        if (this.isCloseKey(key)) {
+            return this.close(null);
+        }
+        // Navigation up
+        if (this.isUpKey(key)) {
+            this.state.selectedIndex = Math.max(0, this.state.selectedIndex - 1);
+            return this.rerender();
+        }
+        // Navigation down
+        if (this.isDownKey(key)) {
+            this.state.selectedIndex = Math.min(ARCH_OPTIONS.length - 1, this.state.selectedIndex + 1);
+            return this.rerender();
+        }
+        // Enter - select option
+        if (this.isEnterKey(key)) {
+            const selected = ARCH_OPTIONS[this.state.selectedIndex];
+            if (selected.type === 'custom') {
+                // Switch to custom input screen
+                this.state.mode = 'custom-input';
+                this.state.inputBuffer = '';
+                this.state.inputCursorPos = 0;
+                return this.rerender();
+            }
+            return this.close({ type: selected.type });
+        }
+        return this.noAction();
+    }
+    handleCustomInputKey(key) {
+        // Escape goes back to select screen
+        if (key.name === 'escape') {
+            this.state.mode = 'select';
+            return this.rerender();
+        }
+        // Enter confirms input
+        if (this.isEnterKey(key)) {
+            const value = this.state.inputBuffer.trim();
+            if (value) {
+                return this.close({ type: 'custom', customTopic: value });
+            }
+            // Don't allow empty - just ignore enter
+            return this.noAction();
+        }
+        // Backspace
+        if (key.name === 'backspace') {
+            if (this.state.inputCursorPos > 0) {
+                const before = this.state.inputBuffer.slice(0, this.state.inputCursorPos - 1);
+                const after = this.state.inputBuffer.slice(this.state.inputCursorPos);
+                this.state.inputBuffer = before + after;
+                this.state.inputCursorPos--;
+                return this.rerender();
+            }
+            return this.noAction();
+        }
+        // Delete
+        if (key.name === 'delete') {
+            if (this.state.inputCursorPos < this.state.inputBuffer.length) {
+                const before = this.state.inputBuffer.slice(0, this.state.inputCursorPos);
+                const after = this.state.inputBuffer.slice(this.state.inputCursorPos + 1);
+                this.state.inputBuffer = before + after;
+                return this.rerender();
+            }
+            return this.noAction();
+        }
+        // Left arrow - move cursor
+        if (key.name === 'left') {
+            if (this.state.inputCursorPos > 0) {
+                this.state.inputCursorPos--;
+                return this.rerender();
+            }
+            return this.noAction();
+        }
+        // Right arrow - move cursor
+        if (key.name === 'right') {
+            if (this.state.inputCursorPos < this.state.inputBuffer.length) {
+                this.state.inputCursorPos++;
+                return this.rerender();
+            }
+            return this.noAction();
+        }
+        // Home - move to start
+        if (key.name === 'home') {
+            this.state.inputCursorPos = 0;
+            return this.rerender();
+        }
+        // End - move to end
+        if (key.name === 'end') {
+            this.state.inputCursorPos = this.state.inputBuffer.length;
+            return this.rerender();
+        }
+        // Regular character input
+        if (key.char && key.char.length === 1 && key.char >= ' ' && key.char <= '~') {
+            const before = this.state.inputBuffer.slice(0, this.state.inputCursorPos);
+            const after = this.state.inputBuffer.slice(this.state.inputCursorPos);
+            this.state.inputBuffer = before + key.char + after;
+            this.state.inputCursorPos++;
+            return this.rerender();
+        }
+        return this.noAction();
+    }
+    // ===========================================================================
+    // Close Summary
+    // ===========================================================================
+    getCloseSummary(result) {
+        const s = this.getStyles();
+        if (!result) {
+            return s.muted('Arch: ') + s.warning('Cancelled');
+        }
+        if (result.customTopic) {
+            return s.muted('Arch: ') + s.primary(`Custom: ${result.customTopic}`);
+        }
+        const labels = {
+            'adr': 'ADR',
+            'diagram': 'Diagram',
+            'data-model': 'Data Model',
+            'api': 'API Design',
+            'custom': 'Custom',
+        };
+        return s.muted('Arch: ') + s.primary(labels[result.type]);
+    }
+}

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

@@ -0,0 +1,72 @@
+/**
+ * Ask User Overlay V2
+ *
+ * Modal overlay for presenting multi-question forms to the user.
+ * Uses BaseOverlayV2 for TerminalUI integration.
+ *
+ * Features:
+ * - Multiple questions with navigation (Left/Right or Tab)
+ * - Options to select from with arrow keys
+ * - Custom text input option
+ * - Multi-select support
+ * - Progress indicator showing answered questions
+ * - Submit tab at the end
+ */
+import { BaseOverlayV2 } from '../../base/index.js';
+import type { RenderContext, OverlayAction, KeyEvent } from '../types.js';
+import type { AskUserQuestion } from '../../../shared-handlers.js';
+interface AskUserState {
+    /** Current question index */
+    currentQuestion: number;
+    /** Selected option index for current question */
+    selectedIndex: number;
+    /** Custom input buffer for free-text */
+    inputBuffer: string;
+    /** Whether currently typing custom input */
+    isTypingCustom: boolean;
+    /** Collected answers */
+    answers: Record<string, string | string[]>;
+    /** Multi-select selections for current question */
+    multiSelections: Set<number>;
+    /** Warning message to display (e.g., incomplete questions) */
+    warningMessage: string;
+    /** Whether currently on the Submit tab */
+    isOnSubmitTab: boolean;
+}
+export interface AskUserOptionsV2 {
+    questions: AskUserQuestion[];
+    context?: string;
+}
+export interface AskUserResultV2 {
+    answers: Record<string, string | string[]>;
+    skipped: string[];
+}
+export declare class AskUserOverlayV2 extends BaseOverlayV2<AskUserState, AskUserResultV2> {
+    readonly type: "inline";
+    readonly id = "ask-user-overlay-v2";
+    private readonly questions;
+    private readonly context?;
+    constructor(options: AskUserOptionsV2);
+    protected renderContent(context: RenderContext): string[];
+    handleKey(key: KeyEvent): OverlayAction<AskUserResultV2>;
+    /**
+     * Summary shown after overlay closes.
+     */
+    getCloseSummary(result: AskUserResultV2): string | null;
+    private renderTabBar;
+    private renderQuestion;
+    private renderSubmitTab;
+    private renderInstructions;
+    private handleSubmitTabKey;
+    private handleTypingKey;
+    private handleNavigationKey;
+    private getResult;
+    private getOptionCount;
+    private getAnswerInfo;
+    private restoreFromAnswer;
+    private nextQuestion;
+    private prevQuestion;
+    private tryComplete;
+    private submitAnswer;
+}
+export {};