@compilr-dev/cli 0.4.0 → 0.5.0

package/dist/ui/base/tabbed-list-overlay.js

@@ -0,0 +1,369 @@
+/**
+ * Tabbed List Overlay Base Class
+ *
+ * A reusable base for overlays that display:
+ * - Tabs for filtering/categorizing
+ * - A paginated list of items
+ * - Search mode (activated with /)
+ * - Detail view (via ScreenStack)
+ *
+ * This provides ~80% of the common overlay functionality,
+ * leaving only item-specific rendering to be customized.
+ *
+ * Usage:
+ * ```typescript
+ * interface MyItem { name: string; description: string; }
+ *
+ * const TABS = [
+ *   { id: 'all', label: 'All' },
+ *   { id: 'active', label: 'Active' },
+ * ];
+ *
+ * class MyOverlay extends TabbedListOverlay<MyItem, MyResult> {
+ *   constructor(items: MyItem[]) {
+ *     super({
+ *       title: 'My Items',
+ *       tabs: TABS,
+ *       items,
+ *       pageSize: 12,
+ *       filterByTab: (item, tabId) => tabId === 'all' || item.active,
+ *       getSearchText: (item) => `${item.name} ${item.description}`,
+ *       renderItem: (item, isSelected, styles) => {
+ *         const prefix = isSelected ? '❯ ' : '  ';
+ *         return prefix + item.name;
+ *       },
+ *     });
+ *   }
+ *
+ *   // Optional: Override to add detail view
+ *   protected createDetailScreen(item: MyItem): BaseScreen | null {
+ *     return new MyDetailScreen(item, this.styles);
+ *   }
+ * }
+ * ```
+ */
+import * as terminal from '../terminal.js';
+import { BaseOverlay } from './overlay-base.js';
+import { BaseScreen, ScreenStack, stay, pushScreen, closeOverlay } from './screen-stack.js';
+import { TabFeature } from '../features/tab-feature.js';
+import { PaginationFeature } from '../features/pagination-feature.js';
+import { SearchFeature } from '../features/search-feature.js';
+import { isCtrlC, isClose, isEscape, isSlash, isEnter } from './key-utils.js';
+import { renderBorder } from './render-utils.js';
+// =============================================================================
+// List Screen (Main View)
+// =============================================================================
+/**
+ * The main list screen for TabbedListOverlay.
+ * Handles tabs, search, pagination, and item display.
+ */
+class ListScreen extends BaseScreen {
+    config;
+    state;
+    styles;
+    createDetailScreen;
+    tabFeature;
+    pagination;
+    searchFeature;
+    hasBeenPushedTo = false;
+    constructor(config, state, styles, createDetailScreen) {
+        super();
+        this.config = config;
+        this.state = state;
+        this.styles = styles;
+        this.createDetailScreen = createDetailScreen;
+        this.tabFeature = new TabFeature(config.tabs, () => {
+            this.onTabChange();
+        });
+        this.pagination = new PaginationFeature({
+            pageSize: config.pageSize ?? 12,
+        });
+        this.searchFeature = new SearchFeature({
+            onSearch: () => { this.applyFilters(); },
+            escapeClearsSearch: false,
+        });
+    }
+    /**
+     * Called when returning from a detail screen.
+     * Clear screen if we came back from a full-screen view.
+     * (resetRenderState() will handle cursor positioning)
+     */
+    onEnter() {
+        if (this.hasBeenPushedTo && this.config.detailScreensFullScreen !== false) {
+            // Returning from a full-screen detail screen - clear screen
+            terminal.clearScreen();
+        }
+    }
+    /**
+     * Called when navigating to a detail screen.
+     */
+    onExit() {
+        this.hasBeenPushedTo = true;
+    }
+    onTabChange() {
+        this.state.selectedIndex = 0;
+        this.state.scrollOffset = 0;
+        this.state.searchMode = false;
+        this.state.searchQuery = '';
+        this.applyFilters();
+    }
+    applyFilters() {
+        const tabId = this.tabFeature.getCurrentTabId(this.state);
+        // Filter by tab
+        let filtered = this.state.items.filter((item) => this.config.filterByTab(item, tabId));
+        // Filter by search
+        if (this.state.searchQuery) {
+            filtered = this.searchFeature.filterItems(filtered, this.state, this.config.getSearchText);
+        }
+        this.state.filteredItems = filtered;
+        this.state.selectedIndex = 0;
+        this.state.scrollOffset = 0;
+    }
+    render() {
+        const s = this.styles;
+        const cols = terminal.getTerminalWidth();
+        const border = renderBorder(cols, s);
+        const pageSize = this.config.pageSize ?? 12;
+        const lines = [];
+        // Header
+        lines.push(border);
+        const showCount = this.config.showCount ?? true;
+        const countBadge = showCount
+            ? s.muted(` [${String(this.state.filteredItems.length)}/${String(this.state.items.length)}]`)
+            : '';
+        lines.push(`  ${s.primaryBold(this.config.title)}${countBadge}`);
+        lines.push('');
+        // Tab bar with hint
+        const tabBar = this.tabFeature.renderTabs(this.state, s);
+        const tabHint = s.muted(`(${this.tabFeature.renderHints()})`);
+        lines.push(`  ${tabBar}  ${tabHint}`);
+        lines.push('');
+        // Search box (if in search mode)
+        if (this.state.searchMode) {
+            const query = this.state.searchQuery;
+            lines.push(`  ${s.muted('Search:')} ${query ? s.primary(query) : ''}█`);
+            lines.push('');
+        }
+        // Items
+        const visibleItems = this.pagination.getVisibleItems(this.state, this.state.filteredItems);
+        if (visibleItems.length === 0) {
+            const msg = this.state.searchQuery
+                ? (this.config.noResultsMessage ?? 'No items match the search.')
+                : (this.config.emptyMessage ?? 'No items available.');
+            lines.push(`    ${s.muted(msg)}`);
+            for (let i = 0; i < pageSize - 1; i++) {
+                lines.push('');
+            }
+        }
+        else {
+            for (let i = 0; i < visibleItems.length; i++) {
+                const item = visibleItems[i];
+                const absoluteIndex = this.state.scrollOffset + i;
+                const isSelected = absoluteIndex === this.state.selectedIndex;
+                lines.push(this.config.renderItem(item, isSelected, s));
+            }
+            // Pad to fixed height
+            for (let i = visibleItems.length; i < pageSize; i++) {
+                lines.push('');
+            }
+        }
+        // Pagination indicator
+        lines.push('');
+        const indicator = this.pagination.renderIndicator(this.state, this.state.filteredItems.length, s);
+        if (indicator) {
+            lines.push(indicator);
+        }
+        // Selected item preview (if configured)
+        if (this.config.renderSelectedPreview && visibleItems.length > 0) {
+            const selectedItem = this.state.filteredItems[this.state.selectedIndex];
+            if (selectedItem) {
+                lines.push('');
+                const previewLines = this.config.renderSelectedPreview(selectedItem, s);
+                lines.push(...previewLines);
+            }
+        }
+        // Footer
+        lines.push(border);
+        lines.push(`  ${s.muted(this.getFooterHints())}`);
+        lines.push(border);
+        return lines;
+    }
+    getFooterHints() {
+        // Use custom footer hints if provided
+        if (this.config.footerHints) {
+            return this.config.footerHints(this.state.searchMode);
+        }
+        // Default footer hints
+        if (this.state.searchMode) {
+            return 'Type to filter · ↑↓/jk Navigate · Enter Details · Esc Exit search';
+        }
+        return this.pagination.renderHints() + ' · / Search · Enter Details · q/Esc Close';
+    }
+    handleKey(data) {
+        // Ctrl+C always closes
+        if (isCtrlC(data)) {
+            return closeOverlay(undefined);
+        }
+        // Search mode handling
+        if (this.state.searchMode) {
+            if (isEscape(data)) {
+                this.state.searchMode = false;
+                if (this.state.searchQuery) {
+                    this.state.searchQuery = '';
+                    this.applyFilters();
+                }
+                return stay();
+            }
+            const searchResult = this.searchFeature.handleKey(data, this.state);
+            if (searchResult?.handled) {
+                return searchResult.action === 'render' ? stay() : stay(false);
+            }
+            if (isEnter(data)) {
+                return this.handleEnter();
+            }
+            const paginationResult = this.pagination.handleKey(data, this.state, this.state.filteredItems.length);
+            if (paginationResult?.handled) {
+                return paginationResult.action === 'render' ? stay() : stay(false);
+            }
+            return stay(false);
+        }
+        // Not in search mode
+        if (isSlash(data)) {
+            this.state.searchMode = true;
+            return stay();
+        }
+        if (isClose(data)) {
+            return closeOverlay(undefined);
+        }
+        // Tab navigation
+        const tabResult = this.tabFeature.handleKey(data, this.state);
+        if (tabResult?.handled) {
+            return tabResult.action === 'render' ? stay() : stay(false);
+        }
+        // Enter shows detail
+        if (isEnter(data)) {
+            return this.handleEnter();
+        }
+        // Pagination
+        const paginationResult = this.pagination.handleKey(data, this.state, this.state.filteredItems.length);
+        if (paginationResult?.handled) {
+            return paginationResult.action === 'render' ? stay() : stay(false);
+        }
+        return stay(false);
+    }
+    handleEnter() {
+        if (this.state.filteredItems.length === 0) {
+            return stay(false);
+        }
+        const item = this.state.filteredItems[this.state.selectedIndex];
+        const detailScreen = this.createDetailScreen(item);
+        if (detailScreen) {
+            return pushScreen(detailScreen);
+        }
+        return stay(false);
+    }
+}
+// =============================================================================
+// TabbedListOverlay Base Class
+// =============================================================================
+/**
+ * Abstract base class for tabbed list overlays.
+ *
+ * Provides:
+ * - Tab-based filtering
+ * - Search mode with / toggle
+ * - Paginated item display
+ * - ScreenStack for detail views
+ *
+ * Subclasses can override createDetailScreen() to add detail views.
+ */
+export class TabbedListOverlay extends BaseOverlay {
+    screenStack;
+    listConfig;
+    resizeHandler = null;
+    constructor(config) {
+        const initialState = {
+            lineCount: 0,
+            maxLineCount: 0,
+            currentTab: 0,
+            selectedIndex: 0,
+            scrollOffset: 0,
+            searchQuery: '',
+            searchMode: false,
+            items: config.items,
+            filteredItems: config.items.filter((item) => config.filterByTab(item, config.tabs[0]?.id ?? 'all')),
+        };
+        super(initialState);
+        this.listConfig = config;
+        this.screenStack = new ScreenStack();
+        this.screenStack.push(new ListScreen(config, this.state, this.styles, (item) => this.createDetailScreen(item)));
+    }
+    /**
+     * Override to create a detail screen for an item.
+     * Return null to disable detail view.
+     */
+    createDetailScreen(_item) {
+        return null;
+    }
+    async show() {
+        // Add resize handler
+        this.resizeHandler = () => {
+            this.update();
+        };
+        process.stdout.on('resize', this.resizeHandler);
+        return super.show();
+    }
+    close(result) {
+        if (this.resizeHandler) {
+            process.stdout.removeListener('resize', this.resizeHandler);
+            this.resizeHandler = null;
+        }
+        super.close(result);
+    }
+    render() {
+        const screen = this.screenStack.current();
+        return screen?.render() ?? [];
+    }
+    handleKey(data) {
+        const screen = this.screenStack.current();
+        if (!screen) {
+            this.close(undefined);
+            return;
+        }
+        const result = screen.handleKey(data);
+        switch (result.action) {
+            case 'stay':
+                if (result.render) {
+                    this.update();
+                }
+                break;
+            case 'push':
+                this.screenStack.push(result.screen);
+                // Reset overlay state after screen change (screen's onEnter may have cleared screen)
+                // Skip for in-place rendering (detailScreensFullScreen: false)
+                if (this.listConfig.detailScreensFullScreen !== false) {
+                    this.resetRenderState();
+                }
+                this.update();
+                break;
+            case 'pop':
+                this.screenStack.pop();
+                // Reset overlay state after screen change (screen's onEnter may have cleared screen)
+                // Skip for in-place rendering (detailScreensFullScreen: false)
+                if (this.listConfig.detailScreensFullScreen !== false) {
+                    this.resetRenderState();
+                }
+                this.update();
+                break;
+            case 'close':
+                this.close(result.result);
+                break;
+        }
+    }
+    /**
+     * Get the currently selected item.
+     */
+    getSelectedItem() {
+        return this.state.filteredItems[this.state.selectedIndex];
+    }
+}

package/dist/ui/commands-overlay-v2.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Commands Overlay V2
+ *
+ * Modal overlay for viewing and managing custom command definitions.
+ * Uses TabbedListOverlayV2 for consistent navigation patterns.
+ *
+ * Features:
+ * - Tabs: All, Project, Personal
+ * - Search with / toggle
+ * - Detail view for command information
+ * - Wizard for creating new commands
+ */
+import { type CustomCommand } from '../commands/index.js';
+import { TabbedListOverlayV2, BaseScreen } from './base/index.js';
+export interface CommandsOverlayV2Result {
+    /** Command that was created (if any) */
+    created?: string;
+}
+type CommandItem = CustomCommand | {
+    type: 'create';
+};
+/**
+ * Commands overlay using TabbedListOverlayV2.
+ * Displays custom commands in a searchable, tabbed list.
+ */
+export declare class CommandsOverlayV2 extends TabbedListOverlayV2<CommandItem, CommandsOverlayV2Result> {
+    readonly type: "inline";
+    readonly id = "commands-overlay-v2";
+    private readonly registry;
+    constructor();
+    protected createDetailScreen(item: CommandItem): BaseScreen | null;
+}
+export {};