@compilr-dev/cli 0.4.0 → 0.5.0

package/dist/ui/overlay/impl/projects-overlay-v2.js

@@ -0,0 +1,499 @@
+/**
+ * Projects Overlay V2
+ *
+ * Interactive overlay for viewing and managing projects.
+ * Uses TabbedListOverlayV2 for consistent tabbed list behavior.
+ *
+ * Features:
+ * - Tabbed filtering by status (All, Active, Paused, Completed, Archived)
+ * - Paginated list with search
+ * - Project detail preview
+ * - Archive/Restore workflow
+ * - Delete workflow with path validation
+ * - Keyboard navigation (vim-style + arrows)
+ * - Opens WorkflowOverlayV2 for selected project (push onto stack)
+ */
+import * as fs from 'fs';
+import { TabbedListOverlayV2 } from '../../base/tabbed-list-overlay-v2.js';
+import { BaseScreen, stay, popScreen, closeOverlay, renderBorder, } from '../../base/index.js';
+import { projectRepository, workItemRepository } from '../../../db/repositories/index.js';
+import { clearActiveProject, getActiveProject } from '../../../tools/project-db.js';
+import { validateDeletePath } from '../../../utils/path-safety.js';
+import { getAllowedDeletePaths } from '../../../settings/paths.js';
+import { clearProjectAnchors } from '../../../anchors/index.js';
+import * as terminal from '../../terminal.js';
+import { WorkflowOverlayV2 } from './workflow-overlay-v2.js';
+// =============================================================================
+// Constants
+// =============================================================================
+const PAGE_SIZE = 10;
+const TABS = [
+    { id: 'all', label: 'All' },
+    { id: 'active', label: 'Active' },
+    { id: 'paused', label: 'Paused' },
+    { id: 'completed', label: 'Complete' },
+    { id: 'archived', label: 'Archived' },
+];
+const STATUS_ICONS = {
+    active: '●',
+    paused: '◐',
+    completed: '✓',
+    archived: '◌',
+};
+const STATUS_LABELS = {
+    active: 'Active',
+    paused: 'Paused',
+    completed: 'Complete',
+    archived: 'Archived',
+};
+// =============================================================================
+// Helper Functions
+// =============================================================================
+function truncate(str, maxLen) {
+    if (str.length <= maxLen)
+        return str;
+    return str.slice(0, maxLen - 3) + '...';
+}
+function renderProgressBar(percent, width, s) {
+    const filled = Math.round((percent / 100) * width);
+    const empty = width - filled;
+    return s.primary('█'.repeat(filled)) + s.muted('░'.repeat(empty));
+}
+// =============================================================================
+// Key Detection Helpers
+// =============================================================================
+function isCtrlC(data) {
+    return data.length === 1 && data[0] === 0x03;
+}
+function isEscape(data) {
+    return data.length === 1 && data[0] === 0x1b;
+}
+function isEnter(data) {
+    return data.length === 1 && (data[0] === 0x0d || data[0] === 0x0a);
+}
+function isBackspace(data) {
+    return data.length === 1 && (data[0] === 0x7f || data[0] === 0x08);
+}
+function extractPrintable(data) {
+    if (data.length === 1 && data[0] >= 0x20 && data[0] < 0x7f) {
+        return String.fromCharCode(data[0]);
+    }
+    return null;
+}
+// =============================================================================
+// Archive Confirm Screen
+// =============================================================================
+class ArchiveConfirmScreen extends BaseScreen {
+    confirmState;
+    styles;
+    onComplete;
+    constructor(confirmState, styles, onComplete) {
+        super();
+        this.confirmState = confirmState;
+        this.styles = styles;
+        this.onComplete = onComplete;
+    }
+    render() {
+        const s = this.styles;
+        const cols = terminal.getTerminalWidth();
+        const border = renderBorder(cols, s);
+        const project = this.confirmState.targetProject;
+        const lines = [];
+        if (!project) {
+            lines.push(border);
+            lines.push(s.error('  No project selected'));
+            lines.push(border);
+            return lines;
+        }
+        const isArchived = project.status === 'archived';
+        const action = isArchived ? 'RESTORE' : 'ARCHIVE';
+        lines.push(border);
+        lines.push(`  ${s.primaryBold(action + ' PROJECT')}`);
+        lines.push('');
+        if (isArchived) {
+            lines.push(`  ${s.foreground('Restore this project?')}`);
+            lines.push('');
+            lines.push(s.muted('  Project: ') + project.displayName);
+            lines.push('');
+            lines.push(s.foreground('  The project will be marked as "active" and visible again.'));
+        }
+        else {
+            lines.push(`  ${s.warning('Archive this project?')}`);
+            lines.push('');
+            lines.push(s.muted('  Project: ') + project.displayName);
+            lines.push('');
+            lines.push(s.foreground('  The project will be hidden from the active view.'));
+            lines.push(s.foreground('  You can restore it later from the Archived tab.'));
+        }
+        lines.push('');
+        lines.push(border);
+        lines.push(s.muted('  Enter Confirm · Esc Cancel'));
+        lines.push(border);
+        return lines;
+    }
+    handleKey(data) {
+        if (isCtrlC(data)) {
+            return closeOverlay({ action: 'cancel' });
+        }
+        if (isEscape(data)) {
+            this.confirmState.targetProject = null;
+            return popScreen();
+        }
+        if (isEnter(data)) {
+            const project = this.confirmState.targetProject;
+            if (!project)
+                return popScreen();
+            const isArchived = project.status === 'archived';
+            const newStatus = isArchived ? 'active' : 'archived';
+            projectRepository.update(project.id, { status: newStatus });
+            // Clear as active if archiving the active project
+            if (!isArchived && getActiveProject()?.id === project.id) {
+                clearActiveProject();
+            }
+            this.confirmState.modified = true;
+            this.onComplete();
+            this.confirmState.targetProject = null;
+            return popScreen();
+        }
+        return stay(false);
+    }
+    getMinHeight() {
+        return 14;
+    }
+}
+// =============================================================================
+// Delete Confirm Screen
+// =============================================================================
+class DeleteConfirmScreen extends BaseScreen {
+    confirmState;
+    styles;
+    onComplete;
+    constructor(confirmState, styles, onComplete) {
+        super();
+        this.confirmState = confirmState;
+        this.styles = styles;
+        this.onComplete = onComplete;
+    }
+    render() {
+        const s = this.styles;
+        const cols = terminal.getTerminalWidth();
+        const border = renderBorder(cols, s);
+        const project = this.confirmState.targetProject;
+        const validation = this.confirmState.deleteValidation;
+        const lines = [];
+        if (!project) {
+            lines.push(border);
+            lines.push(s.error('  No project selected'));
+            lines.push(border);
+            return lines;
+        }
+        lines.push(border);
+        lines.push(`  ${s.error('DELETE PROJECT')}`);
+        lines.push('');
+        // If validation failed, show error state
+        if (validation && !validation.valid) {
+            lines.push(s.error('  CANNOT DELETE: Path validation failed'));
+            lines.push('');
+            lines.push(s.muted('  Project: ') + project.displayName);
+            lines.push(s.muted('  Path:    ') + project.path);
+            lines.push('');
+            lines.push(s.error(`  Error: ${validation.reason || 'Unknown error'}`));
+            lines.push('');
+            lines.push(s.foreground('  Allowed directories:'));
+            for (const allowed of getAllowedDeletePaths()) {
+                lines.push(s.muted(`    • ${allowed}`));
+            }
+            lines.push('');
+            lines.push(s.foreground('  Options:'));
+            lines.push(s.muted('    1. Move the project to an allowed directory'));
+            lines.push(s.muted('    2. Add path to allowedPaths in /config'));
+            lines.push(s.muted('    3. Delete files manually and remove from database only'));
+            lines.push('');
+            lines.push(border);
+            lines.push(s.muted('  Esc Back'));
+            lines.push(border);
+            return lines;
+        }
+        lines.push(s.warning('  WARNING: This action cannot be undone!'));
+        lines.push('');
+        lines.push(s.muted('  Project: ') + project.displayName);
+        lines.push(s.muted('  Name:    ') + project.name);
+        lines.push(s.muted('  Path:    ') + project.path);
+        lines.push('');
+        // Show validation status
+        if (validation && validation.valid) {
+            if (fs.existsSync(project.path + '/.compilr')) {
+                lines.push(s.success('  ✓ Path is within allowed directory'));
+                lines.push(s.success('  ✓ Project has .compilr marker'));
+            }
+            else if (fs.existsSync(project.path + '/.git')) {
+                lines.push(s.success('  ✓ Path is within allowed directory'));
+                lines.push(s.success('  ✓ Project has .git repository'));
+            }
+            else if (fs.existsSync(project.path + '/package.json')) {
+                lines.push(s.success('  ✓ Path is within allowed directory'));
+                lines.push(s.success('  ✓ Project has package.json'));
+            }
+            else {
+                lines.push(s.success('  ✓ Path is within allowed directory'));
+            }
+            if (validation.warnings && validation.warnings.length > 0) {
+                lines.push('');
+                for (const warning of validation.warnings) {
+                    lines.push(s.warning(`  ⚠ ${warning}`));
+                }
+            }
+            lines.push('');
+        }
+        lines.push(s.foreground('  This will permanently delete:'));
+        lines.push(s.muted('    • Database record (project, work items, documents)'));
+        lines.push(s.muted('    • Project files on disk'));
+        if (project.status !== 'archived') {
+            lines.push('');
+            lines.push(s.warning('  Note: Project will be archived first, then deleted.'));
+        }
+        lines.push('');
+        lines.push(s.muted('  ' + '─'.repeat(cols - 4)));
+        lines.push('');
+        lines.push(s.foreground('  Type the project name to confirm deletion:'));
+        lines.push('');
+        lines.push(`  > ${this.confirmState.deleteConfirmInput}█`);
+        if (this.confirmState.deleteError) {
+            lines.push('');
+            lines.push(s.error(`  ${this.confirmState.deleteError}`));
+        }
+        lines.push('');
+        lines.push(border);
+        lines.push(s.muted('  Enter Confirm · Esc Cancel'));
+        lines.push(border);
+        return lines;
+    }
+    handleKey(data) {
+        const char = extractPrintable(data);
+        if (isCtrlC(data)) {
+            return closeOverlay({ action: 'cancel' });
+        }
+        if (isEscape(data)) {
+            this.confirmState.targetProject = null;
+            this.confirmState.deleteConfirmInput = '';
+            this.confirmState.deleteError = null;
+            this.confirmState.deleteValidation = null;
+            return popScreen();
+        }
+        if (isBackspace(data)) {
+            this.confirmState.deleteConfirmInput = this.confirmState.deleteConfirmInput.slice(0, -1);
+            this.confirmState.deleteError = null;
+            return stay();
+        }
+        if (char) {
+            this.confirmState.deleteConfirmInput += char;
+            this.confirmState.deleteError = null;
+            return stay();
+        }
+        if (isEnter(data)) {
+            const project = this.confirmState.targetProject;
+            if (!project)
+                return popScreen();
+            // If validation failed, don't allow Enter to proceed
+            if (this.confirmState.deleteValidation && !this.confirmState.deleteValidation.valid) {
+                return stay(false);
+            }
+            if (this.confirmState.deleteConfirmInput !== project.name) {
+                this.confirmState.deleteError = `Type "${project.name}" exactly to confirm`;
+                return stay();
+            }
+            // Archive first if not already archived
+            if (project.status !== 'archived') {
+                projectRepository.update(project.id, { status: 'archived' });
+            }
+            // Delete from database
+            projectRepository.delete(project.id);
+            // Clear project-specific anchors
+            clearProjectAnchors(String(project.id));
+            // Clear as active project if needed
+            if (getActiveProject()?.id === project.id) {
+                clearActiveProject();
+            }
+            // Delete filesystem folder (only if validation passed and path exists)
+            const projectPath = project.path;
+            const validation = this.confirmState.deleteValidation;
+            if (projectPath && validation?.valid && fs.existsSync(projectPath)) {
+                try {
+                    fs.rmSync(projectPath, { recursive: true, force: true });
+                }
+                catch {
+                    // Ignore delete errors - DB is already cleaned up
+                }
+            }
+            this.confirmState.modified = true;
+            this.onComplete();
+            this.confirmState.targetProject = null;
+            this.confirmState.deleteConfirmInput = '';
+            this.confirmState.deleteError = null;
+            this.confirmState.deleteValidation = null;
+            return popScreen();
+        }
+        return stay(false);
+    }
+    getMinHeight() {
+        return 28;
+    }
+}
+// =============================================================================
+// Projects Overlay V2
+// =============================================================================
+export class ProjectsOverlayV2 extends TabbedListOverlayV2 {
+    type = 'inline';
+    id = 'projects-overlay-v2';
+    confirmState = {
+        targetProject: null,
+        deleteConfirmInput: '',
+        deleteError: null,
+        deleteValidation: null,
+        modified: false,
+    };
+    constructor() {
+        // Load projects from database
+        const { projects } = projectRepository.list({ status: 'all' });
+        super({
+            title: 'Projects',
+            tabs: TABS,
+            items: projects,
+            pageSize: PAGE_SIZE,
+            filterByTab: (project, tabId) => {
+                if (tabId === 'all') {
+                    // 'all' shows everything except archived
+                    return project.status !== 'archived';
+                }
+                return project.status === tabId;
+            },
+            getSearchText: (project) => `${project.displayName} ${project.name} ${project.path} ${project.type}`,
+            renderItem: (project, isSelected, s) => {
+                const cols = terminal.getTerminalWidth();
+                const nameW = Math.min(24, Math.floor(cols * 0.25));
+                const typeW = 10;
+                const statusW = 12;
+                const pathW = Math.max(20, cols - nameW - typeW - statusW - 12);
+                const cursor = isSelected ? s.primary('❯ ') : '  ';
+                const statusIcon = STATUS_ICONS[project.status];
+                const statusLabel = `${statusIcon} ${STATUS_LABELS[project.status]}`;
+                const row = [
+                    truncate(project.displayName, nameW - 1).padEnd(nameW),
+                    project.type.padEnd(typeW),
+                    statusLabel.padEnd(statusW),
+                    truncate(project.path, pathW - 1),
+                ].join('');
+                if (isSelected) {
+                    return `${cursor}${s.primary(row)}`;
+                }
+                return `${cursor}${row}`;
+            },
+            showCount: true,
+            emptyMessage: 'No projects found. Use /new to create one.',
+            noResultsMessage: 'No projects match the search.',
+            footerHints: (searchMode) => {
+                if (searchMode) {
+                    return 'Type to filter · ↑↓/jk Navigate · Enter Open · Esc Exit search';
+                }
+                return '↑↓/jk Navigate · ←→/hl Tabs · / Search · Enter Open · x Archive · d Delete · q/Esc Close';
+            },
+            renderSelectedPreview: (project, s) => {
+                const lines = [];
+                lines.push(s.muted('  ' + '─'.repeat(60)));
+                // Last activity
+                const lastActivity = project.lastActivityAt
+                    ? new Date(project.lastActivityAt).toLocaleDateString('en-US', {
+                        year: 'numeric',
+                        month: 'short',
+                        day: 'numeric',
+                        hour: '2-digit',
+                        minute: '2-digit',
+                    })
+                    : 'Never';
+                lines.push(`  ${s.muted('Last Activity:')} ${lastActivity}`);
+                // Work items progress
+                const { items: workItems, total } = workItemRepository.query({ project_id: project.id });
+                const completed = workItems.filter(w => w.status === 'completed').length;
+                if (total > 0) {
+                    const percent = Math.round((completed / total) * 100);
+                    const progressBar = renderProgressBar(percent, 20, s);
+                    lines.push(`  ${s.muted('Work Items:')} ${progressBar} ${String(completed)}/${String(total)} (${String(percent)}%)`);
+                }
+                else {
+                    lines.push(`  ${s.muted('Work Items:')} ${s.muted('None')}`);
+                }
+                return lines;
+            },
+        });
+        this.minHeight = 22;
+    }
+    /**
+     * Refresh projects from database after archive/delete
+     */
+    refreshProjects() {
+        const { projects } = projectRepository.list({ status: 'all' });
+        this.state.items = projects;
+        // Re-apply tab filter
+        const tabId = TABS[this.state.currentTab]?.id ?? 'all';
+        let filtered = projects.filter((p) => {
+            if (tabId === 'all')
+                return p.status !== 'archived';
+            return p.status === tabId;
+        });
+        // Re-apply search filter
+        if (this.state.searchQuery) {
+            const query = this.state.searchQuery.toLowerCase();
+            filtered = filtered.filter((p) => p.displayName.toLowerCase().includes(query) ||
+                p.name.toLowerCase().includes(query) ||
+                p.path.toLowerCase().includes(query));
+        }
+        this.state.filteredItems = filtered;
+        this.state.selectedIndex = Math.min(this.state.selectedIndex, Math.max(0, filtered.length - 1));
+    }
+    /**
+     * Override handleKey to add custom behavior (Enter opens workflow, x archive, d delete)
+     */
+    handleKey(key) {
+        // Ctrl+C always closes
+        if (this.isInterruptKey(key)) {
+            return this.close({ action: 'cancel' });
+        }
+        // q or Esc closes (only if not in search mode)
+        if (this.isCloseKey(key) && !this.state.searchMode) {
+            return this.close({ action: 'cancel' });
+        }
+        // Only handle custom keys when on main list (screen stack size = 1)
+        if (this.screenStack.size() === 1 && !this.state.searchMode) {
+            // Enter opens workflow overlay (pushed onto V2 overlay stack)
+            if (this.isEnterKey(key) && this.state.filteredItems.length > 0) {
+                const project = this.state.filteredItems[this.state.selectedIndex];
+                return this.push(new WorkflowOverlayV2(project.id));
+            }
+            // 'x' archive/restore
+            if ((key.char === 'x' || key.char === 'X') && this.state.filteredItems.length > 0) {
+                const project = this.state.filteredItems[this.state.selectedIndex];
+                this.confirmState.targetProject = project;
+                this.screenStack.push(new ArchiveConfirmScreen(this.confirmState, this.getStyles(), () => { this.refreshProjects(); }));
+                return this.rerender();
+            }
+            // 'd' delete
+            if ((key.char === 'd' || key.char === 'D') && this.state.filteredItems.length > 0) {
+                const project = this.state.filteredItems[this.state.selectedIndex];
+                this.confirmState.targetProject = project;
+                this.confirmState.deleteConfirmInput = '';
+                this.confirmState.deleteError = null;
+                this.confirmState.deleteValidation = validateDeletePath(project.path);
+                this.screenStack.push(new DeleteConfirmScreen(this.confirmState, this.getStyles(), () => { this.refreshProjects(); }));
+                return this.rerender();
+            }
+        }
+        // Let parent handle everything else
+        const result = super.handleKey(key);
+        // Convert close result to our result type
+        if (result.type === 'close') {
+            return this.close({ action: 'cancel' });
+        }
+        // Safe to return other actions (render, none, etc.)
+        return result;
+    }
+}

package/dist/ui/overlay/impl/theme-overlay-v2.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Theme Overlay V2
+ *
+ * Theme selection overlay using TabbedListOverlayV2 for the new Overlay interface.
+ * Works with TerminalUI's overlay management.
+ *
+ * Features:
+ * - Tabs: Curated (top picks), All, Dark, Light
+ * - Search mode with / toggle
+ * - Live preview with syntax highlighting
+ * - Persists selection to settings
+ */
+import { TabbedListOverlayV2 } from '../../base/index.js';
+import type { KeyEvent, OverlayAction } from '../index.js';
+import { type Theme } from '../../../themes/index.js';
+export interface ThemeOverlayOptions {
+    /** Current theme ID (for highlighting current selection) */
+    currentThemeId?: string;
+}
+export interface ThemeOverlayResult {
+    /** Selected theme ID (if changed) */
+    themeChanged?: string;
+    /** Selected theme name */
+    themeName?: string;
+}
+/**
+ * Theme overlay using the new Overlay interface.
+ * Displays available themes in a searchable, tabbed list with preview.
+ */
+export declare class ThemeOverlayV2 extends TabbedListOverlayV2<Theme, ThemeOverlayResult> {
+    readonly type: "inline";
+    readonly id = "theme-overlay-v2";
+    private readonly currentThemeId;
+    private readonly curatedIds;
+    constructor(options?: ThemeOverlayOptions);
+    handleKey(key: KeyEvent): OverlayAction<ThemeOverlayResult>;
+    private selectTheme;
+    /**
+     * Optional summary shown after overlay closes.
+     */
+    getCloseSummary(result: ThemeOverlayResult): string | null;
+}

package/dist/ui/overlay/impl/theme-overlay-v2.js

@@ -0,0 +1,135 @@
+/**
+ * Theme Overlay V2
+ *
+ * Theme selection overlay using TabbedListOverlayV2 for the new Overlay interface.
+ * Works with TerminalUI's overlay management.
+ *
+ * Features:
+ * - Tabs: Curated (top picks), All, Dark, Light
+ * - Search mode with / toggle
+ * - Live preview with syntax highlighting
+ * - Persists selection to settings
+ */
+import chalk from 'chalk';
+import { TabbedListOverlayV2, } from '../../base/index.js';
+import { getCuratedThemes, getCurrentTheme, setCurrentTheme, getAllThemes, getThemeCount, clearStyleCache, } from '../../../themes/index.js';
+// =============================================================================
+// Constants
+// =============================================================================
+const PAGE_SIZE = 10;
+const TABS = [
+    { id: 'curated', label: 'Curated' },
+    { id: 'all', label: 'All' },
+    { id: 'dark', label: 'Dark' },
+    { id: 'light', label: 'Light' },
+];
+// =============================================================================
+// Helper Functions
+// =============================================================================
+function renderPreview(theme, styles) {
+    const lines = [];
+    const colors = theme.colors;
+    lines.push(styles.muted('  Preview:'));
+    // Use chalk for hex colors in preview
+    const primary = chalk.hex(colors.primary);
+    const secondary = chalk.hex(colors.secondary || colors.primary);
+    const muted = chalk.hex(colors.muted);
+    const fg = chalk.hex(colors.foreground);
+    lines.push('  ' + primary.bold('function') + ' ' + secondary('greet') + fg('() {'));
+    lines.push('    ' + muted('// Say hello'));
+    lines.push('    ' + fg('console.') + secondary('log') + fg('("Hello, ') + primary('World') + fg('!");'));
+    lines.push('  ' + fg('}'));
+    return lines;
+}
+// =============================================================================
+// Theme Overlay V2 Class
+// =============================================================================
+/**
+ * Theme overlay using the new Overlay interface.
+ * Displays available themes in a searchable, tabbed list with preview.
+ */
+export class ThemeOverlayV2 extends TabbedListOverlayV2 {
+    type = 'inline';
+    id = 'theme-overlay-v2';
+    currentThemeId;
+    curatedIds;
+    constructor(options = {}) {
+        const currentTheme = getCurrentTheme();
+        const currentThemeId = options.currentThemeId ?? currentTheme.id;
+        const curatedThemes = getCuratedThemes();
+        const curatedIds = new Set(curatedThemes.map(t => t.id));
+        const allThemes = getAllThemes();
+        const counts = getThemeCount();
+        super({
+            title: `Select Theme (${String(counts.total)})`,
+            tabs: TABS,
+            items: allThemes,
+            pageSize: PAGE_SIZE,
+            showCount: false, // We show count in title
+            filterByTab: (theme, tabId) => {
+                switch (tabId) {
+                    case 'curated':
+                        return curatedIds.has(theme.id);
+                    case 'dark':
+                        return theme.type === 'dark';
+                    case 'light':
+                        return theme.type === 'light';
+                    default:
+                        return true; // 'all'
+                }
+            },
+            getSearchText: (theme) => {
+                return `${theme.name} ${theme.id}`;
+            },
+            renderItem: (theme, isSelected, styles) => {
+                const isCurrent = theme.id === currentThemeId;
+                const prefix = isSelected ? styles.primary('> ') : '  ';
+                const icon = theme.type === 'dark' ? 'D' : 'L';
+                const checkmark = isCurrent ? styles.success(' *') : '';
+                // Pad the plain name first, then apply styling (ANSI codes break padEnd)
+                const paddedName = theme.name.padEnd(33);
+                const label = isSelected ? styles.primary(paddedName) : paddedName;
+                return `  ${prefix}${label}${icon}${checkmark}`;
+            },
+            renderSelectedPreview: (theme, styles) => {
+                return renderPreview(theme, styles);
+            },
+            footerHints: (searchMode) => {
+                if (searchMode) {
+                    return 'Type to filter · ↑↓/jk Navigate · Enter Select · Esc Exit search';
+                }
+                return 'Tab Filter · ↑↓/jk · ←→/hl Pages · / Search · Enter Select · q/Esc Close';
+            },
+            emptyMessage: 'No themes available.',
+            noResultsMessage: 'No themes match the search.',
+        });
+        this.currentThemeId = currentThemeId;
+        this.curatedIds = curatedIds;
+    }
+    handleKey(key) {
+        // Handle Enter/Space to select theme
+        if ((key.name === 'return' || key.name === 'space') && this.state.filteredItems.length > 0) {
+            const theme = this.state.filteredItems[this.state.selectedIndex];
+            return this.selectTheme(theme);
+        }
+        // Let parent handle other keys
+        return super.handleKey(key);
+    }
+    selectTheme(theme) {
+        setCurrentTheme(theme.id);
+        clearStyleCache();
+        return this.close({
+            themeChanged: theme.id,
+            themeName: theme.name,
+        });
+    }
+    /**
+     * Optional summary shown after overlay closes.
+     */
+    getCloseSummary(result) {
+        if (result.themeName) {
+            return `Theme changed to: ${result.themeName}`;
+        }
+        return null;
+    }
+}