inup 1.4.1 → 1.4.3

package/dist/ui/renderer/package-list.js

@@ -10,11 +10,32 @@ exports.renderInterface = renderInterface;
 exports.renderPackagesTable = renderPackagesTable;
 const chalk_1 = __importDefault(require("chalk"));
 const utils_1 = require("../utils");
+const themes_colors_1 = require("../themes-colors");
+/**
+ * Get type badge for dependency type (theme-aware)
+ */
+function getTypeBadge(type) {
+    switch (type) {
+        case 'devDependencies':
+            return (0, themes_colors_1.getThemeColor)('textSecondary')('[D]');
+        case 'peerDependencies':
+            return (0, themes_colors_1.getThemeColor)('textSecondary')('[P]');
+        case 'optionalDependencies':
+            return (0, themes_colors_1.getThemeColor)('textSecondary')('[O]');
+        case 'dependencies':
+        default:
+            return ''; // No badge for regular dependencies
+    }
+}
 /**
  * Render a single package line
+ * @param state Package selection state
+ * @param index Index in the list
+ * @param isCurrentRow Whether this is the current/highlighted row
+ * @param terminalWidth Terminal width for dynamic truncation (default 80)
  */
-function renderPackageLine(state, index, isCurrentRow) {
-    const prefix = isCurrentRow ? chalk_1.default.green('❯ ') : '  ';
+function renderPackageLine(state, index, isCurrentRow, terminalWidth = 80) {
+    const prefix = isCurrentRow ? (0, themes_colors_1.getThemeColor)('success')('❯ ') : '  ';
     // Package name with special formatting for scoped packages (@author/package)
     let packageName;
     if (state.name.startsWith('@')) {
@@ -23,94 +44,111 @@ function renderPackageLine(state, index, isCurrentRow) {
             const author = parts[0]; // @author
             const packagePart = parts.slice(1).join('/'); // package name
             if (isCurrentRow) {
-                packageName = chalk_1.default.white.bold(author) + chalk_1.default.cyan('/' + packagePart);
+                packageName = chalk_1.default.bold((0, themes_colors_1.getThemeColor)('packageAuthor')(author)) + (0, themes_colors_1.getThemeColor)('packageName')('/' + packagePart);
             }
             else {
-                packageName = chalk_1.default.white.bold(author) + chalk_1.default.white('/' + packagePart);
+                packageName = chalk_1.default.bold.white(author) + chalk_1.default.white('/' + packagePart);
             }
         }
         else {
-            packageName = isCurrentRow ? chalk_1.default.cyan(state.name) : chalk_1.default.white(state.name);
+            packageName = isCurrentRow ? (0, themes_colors_1.getThemeColor)('packageName')(state.name) : chalk_1.default.white(state.name);
         }
     }
     else {
-        packageName = isCurrentRow ? chalk_1.default.cyan(state.name) : chalk_1.default.white(state.name);
+        packageName = isCurrentRow ? (0, themes_colors_1.getThemeColor)('packageName')(state.name) : chalk_1.default.white(state.name);
     }
     // Determine which dot should be filled (only one per package)
     const isCurrentSelected = state.selectedOption === 'none';
     const isRangeSelected = state.selectedOption === 'range';
     const isLatestSelected = state.selectedOption === 'latest';
     // Current version dot and version (show original specifier with prefix)
-    const currentDot = isCurrentSelected ? chalk_1.default.green('●') : chalk_1.default.gray('○');
+    const currentDot = isCurrentSelected ? (0, themes_colors_1.getThemeColor)('dot')('●') : (0, themes_colors_1.getThemeColor)('dotEmpty')('○');
     const currentVersion = chalk_1.default.white(state.currentVersionSpecifier);
     // Range version dot and version
     let rangeDot = '';
     let rangeVersionText = '';
-    let rangeDashes = '';
     if (state.hasRangeUpdate) {
-        rangeDot = isRangeSelected ? chalk_1.default.green('●') : chalk_1.default.gray('○');
+        rangeDot = isRangeSelected ? (0, themes_colors_1.getThemeColor)('dot')('●') : (0, themes_colors_1.getThemeColor)('dotEmpty')('○');
         const rangeVersionWithPrefix = utils_1.VersionUtils.applyVersionPrefix(state.currentVersionSpecifier, state.rangeVersion);
-        rangeVersionText = chalk_1.default.yellow(rangeVersionWithPrefix);
-        rangeDashes = '';
+        rangeVersionText = (0, themes_colors_1.getThemeColor)('versionRange')(rangeVersionWithPrefix);
     }
     else {
-        rangeDot = chalk_1.default.gray('○');
+        rangeDot = (0, themes_colors_1.getThemeColor)('dotEmpty')('○');
         rangeVersionText = '';
-        rangeDashes = chalk_1.default.gray('─');
     }
     // Latest version dot and version
     let latestDot = '';
     let latestVersionText = '';
-    let latestDashes = '';
     if (state.hasMajorUpdate) {
-        latestDot = isLatestSelected ? chalk_1.default.green('●') : chalk_1.default.gray('○');
+        latestDot = isLatestSelected ? (0, themes_colors_1.getThemeColor)('dot')('●') : (0, themes_colors_1.getThemeColor)('dotEmpty')('○');
         const latestVersionWithPrefix = utils_1.VersionUtils.applyVersionPrefix(state.currentVersionSpecifier, state.latestVersion);
-        latestVersionText = chalk_1.default.red(latestVersionWithPrefix);
-        latestDashes = '';
+        latestVersionText = (0, themes_colors_1.getThemeColor)('versionLatest')(latestVersionWithPrefix);
     }
     else {
-        latestDot = chalk_1.default.gray('○');
+        latestDot = (0, themes_colors_1.getThemeColor)('dotEmpty')('○');
         latestVersionText = '';
-        latestDashes = chalk_1.default.gray('─');
     }
-    // Fixed column widths for perfect alignment
-    const packageNameWidth = 38; // Total package column width minus prefix (2 chars)
+    // Column widths with capped package name width
+    // Layout: prefix(2) + name + dashes + spacing(3) + current(16) + spacing(3) + range(16) + spacing(3) + latest(16)
     const currentColumnWidth = 16; // Increased to accommodate ^ and ~ prefixes
     const rangeColumnWidth = 16; // Increased to accommodate ^ and ~ prefixes
     const latestColumnWidth = 16; // Increased to accommodate ^ and ~ prefixes
-    // Package name with fixed width and dashes
-    const nameLength = state.name.length;
-    const namePadding = Math.max(0, packageNameWidth - nameLength - 1); // -1 for space after package name
-    const nameDashes = '-'.repeat(namePadding);
+    const spacingWidth = 3;
+    // Package name width: max 50 chars (after which ellipsis kicks in), but scales down on small terminals
+    const maxPackageNameWidth = 50;
+    const minPackageNameWidth = 24;
+    const otherColumnsWidth = currentColumnWidth + rangeColumnWidth + latestColumnWidth + spacingWidth * 3;
+    const prefixWidth = 2;
+    const availableForPackageName = terminalWidth - prefixWidth - otherColumnsWidth - 1;
+    const packageNameWidth = Math.min(maxPackageNameWidth, Math.max(minPackageNameWidth, availableForPackageName));
+    // Apply ellipsis truncation if package name exceeds available width
+    const badgeWidth = state.type === 'dependencies' ? 0 : 3; // [X] without leading space
+    const truncatedName = utils_1.VersionUtils.truncateMiddle(state.name, packageNameWidth - 1 - badgeWidth); // -1 for space after name, -badgeWidth for badge
+    // Helper function to determine if dashes should be shown based on available padding
+    // Only show dashes if there's significant padding (> 2 chars) to fill
+    const shouldShowDashes = (paddingAmount) => paddingAmount > 2;
     const dashColor = isCurrentRow ? chalk_1.default.white : chalk_1.default.gray;
-    const packageNameSection = `${packageName} ${dashColor(nameDashes)}`;
-    // Current version section with fixed width
+    // Use truncated name if it differs from original, otherwise use colored packageName
+    const displayName = truncatedName !== state.name ? truncatedName : packageName;
+    // Package name with dashes and badge at the end
+    const typeBadge = getTypeBadge(state.type);
+    const nameLength = utils_1.VersionUtils.getVisualLength(truncatedName);
+    const namePadding = Math.max(0, packageNameWidth - nameLength - 1 - badgeWidth); // -1 for space after package name, -badgeWidth for badge at end
+    const nameDashes = shouldShowDashes(namePadding) ? dashColor('-').repeat(namePadding) : ' '.repeat(namePadding);
+    // Place badge at the end of dashes: name ------[D]
+    const packageNameSection = typeBadge
+        ? `${displayName} ${nameDashes}${typeBadge}`
+        : `${displayName} ${nameDashes}`;
+    // Current version section with dashes only if needed
     const currentSection = `${currentDot} ${currentVersion}`;
-    const currentSectionLength = utils_1.VersionUtils.getVisualLength(currentSection) + 1; // +1 for space before dashes
+    const currentSectionLength = utils_1.VersionUtils.getVisualLength(currentSection) + 1; // +1 for space before padding
     const currentPadding = Math.max(0, currentColumnWidth - currentSectionLength);
-    const currentWithPadding = currentSection + ' ' + dashColor('-').repeat(currentPadding);
-    // Range version section with fixed width
+    const currentPaddingText = shouldShowDashes(currentPadding) ? dashColor('-').repeat(currentPadding) : ' '.repeat(currentPadding);
+    const currentWithPadding = currentSection + ' ' + currentPaddingText;
+    // Range version section with dashes only if needed
     let rangeSection = '';
     if (state.hasRangeUpdate) {
         rangeSection = `${rangeDot} ${rangeVersionText}`;
-        const rangeSectionLength = utils_1.VersionUtils.getVisualLength(rangeSection) + 1; // +1 for space before dashes
+        const rangeSectionLength = utils_1.VersionUtils.getVisualLength(rangeSection) + 1; // +1 for space before padding
         const rangePadding = Math.max(0, rangeColumnWidth - rangeSectionLength);
-        rangeSection += ' ' + dashColor('-').repeat(rangePadding);
+        const rangePaddingText = shouldShowDashes(rangePadding) ? dashColor('-').repeat(rangePadding) : ' '.repeat(rangePadding);
+        rangeSection += ' ' + rangePaddingText;
     }
     else {
-        // Empty slot - just spaces to maintain column width
+        // Empty slot - maintain column width
         rangeSection = ' '.repeat(rangeColumnWidth);
     }
-    // Latest version section with fixed width
+    // Latest version section with dashes only if needed
     let latestSection = '';
     if (state.hasMajorUpdate) {
         latestSection = `${latestDot} ${latestVersionText}`;
-        const latestSectionLength = utils_1.VersionUtils.getVisualLength(latestSection) + 1; // +1 for space before dashes
+        const latestSectionLength = utils_1.VersionUtils.getVisualLength(latestSection) + 1; // +1 for space before padding
         const latestPadding = Math.max(0, latestColumnWidth - latestSectionLength);
-        latestSection += ' ' + dashColor('-').repeat(latestPadding);
+        const latestPaddingText = shouldShowDashes(latestPadding) ? dashColor('-').repeat(latestPadding) : ' '.repeat(latestPadding);
+        latestSection += ' ' + latestPaddingText;
     }
     else {
-        // Empty slot - just spaces to maintain column width
+        // Empty slot - maintain column width
         latestSection = ' '.repeat(latestColumnWidth);
     }
     // Build line with fixed column widths
@@ -133,7 +171,7 @@ function renderSpacer() {
 /**
  * Render the main interface
  */
-function renderInterface(states, currentRow, scrollOffset, maxVisibleItems, forceFullRender, renderableItems, dependencyTypeLabel, packageManager, filterMode, filterQuery, totalPackagesBeforeFilter) {
+function renderInterface(states, currentRow, scrollOffset, maxVisibleItems, forceFullRender, renderableItems, activeFilterLabel, packageManager, filterMode, filterQuery, totalPackagesBeforeFilter, terminalWidth = 80) {
     const output = [];
     // Header section (same for initial and incremental render)
     if (packageManager) {
@@ -148,42 +186,59 @@ function renderInterface(states, currentRow, scrollOffset, maxVisibleItems, forc
         // Each character in "inup" gets a different color
         const inupColors = [chalk_1.default.red, chalk_1.default.yellow, chalk_1.default.blue, chalk_1.default.magenta];
         const coloredInup = inupColors.map((color, i) => color.bold('inup'[i])).join('');
-        const headerLine = '  ' + chalk_1.default.bold(pmColor('🚀')) + ' ' + coloredInup + chalk_1.default.gray(` (${packageManager.displayName})`);
-        output.push(dependencyTypeLabel ? headerLine + chalk_1.default.gray(' - ') + chalk_1.default.bold.cyan(dependencyTypeLabel) : headerLine);
+        const headerLine = '  ' + chalk_1.default.bold(pmColor('🚀')) + ' ' + coloredInup + (0, themes_colors_1.getThemeColor)('textSecondary')(` (${packageManager.displayName})`);
+        // Show filter state (always show, including "All")
+        const fullHeaderLine = activeFilterLabel
+            ? headerLine + (0, themes_colors_1.getThemeColor)('textSecondary')(' - ') + (0, themes_colors_1.getThemeColor)('primary')(activeFilterLabel)
+            : headerLine;
+        // Pad to terminal width to clear any leftover characters
+        const headerPadding = Math.max(0, terminalWidth - utils_1.VersionUtils.getVisualLength(fullHeaderLine));
+        output.push(fullHeaderLine + ' '.repeat(headerPadding));
     }
     else {
         const headerLine = '  ' + chalk_1.default.bold.blue('🚀 ') + chalk_1.default.bold.red('i') + chalk_1.default.bold.yellow('n') + chalk_1.default.bold.blue('u') + chalk_1.default.bold.magenta('p');
-        output.push(dependencyTypeLabel ? headerLine + chalk_1.default.gray(' - ') + chalk_1.default.bold.cyan(dependencyTypeLabel) : headerLine);
+        // Show filter state (always show, including "All")
+        const fullHeaderLine = activeFilterLabel
+            ? headerLine + (0, themes_colors_1.getThemeColor)('textSecondary')(' - ') + (0, themes_colors_1.getThemeColor)('primary')(activeFilterLabel)
+            : headerLine;
+        // Pad to terminal width to clear any leftover characters
+        const headerPadding = Math.max(0, terminalWidth - utils_1.VersionUtils.getVisualLength(fullHeaderLine));
+        output.push(fullHeaderLine + ' '.repeat(headerPadding));
     }
     output.push('');
     if (filterMode) {
         // Show filter input with cursor when actively filtering
-        const filterDisplay = '  ' + chalk_1.default.bold.white('Search: ') + chalk_1.default.cyan(filterQuery || '') + chalk_1.default.gray('█');
-        output.push(filterDisplay);
+        const filterDisplay = '  ' + chalk_1.default.bold.white('Search: ') + (0, themes_colors_1.getThemeColor)('primary')(filterQuery || '') + (0, themes_colors_1.getThemeColor)('border')('█');
+        // Pad to terminal width to clear any leftover characters from backspace
+        const padding = Math.max(0, terminalWidth - utils_1.VersionUtils.getVisualLength(filterDisplay));
+        output.push(filterDisplay + ' '.repeat(padding));
     }
     else {
         // Show instructions when not filtering
         output.push('  ' +
             chalk_1.default.bold.white('/ ') +
-            chalk_1.default.gray('Search') +
+            (0, themes_colors_1.getThemeColor)('textSecondary')('Search') +
             '  ' +
             chalk_1.default.bold.white('↑/↓ ') +
-            chalk_1.default.gray('Move') +
+            (0, themes_colors_1.getThemeColor)('textSecondary')('Move') +
             '  ' +
             chalk_1.default.bold.white('←/→ ') +
-            chalk_1.default.gray('Select') +
+            (0, themes_colors_1.getThemeColor)('textSecondary')('Select') +
+            '  ' +
+            chalk_1.default.bold.white('D/P/O ') +
+            (0, themes_colors_1.getThemeColor)('textSecondary')('Filter') +
             '  ' +
             chalk_1.default.bold.white('I ') +
-            chalk_1.default.gray('Info') +
+            (0, themes_colors_1.getThemeColor)('textSecondary')('Info') +
             '  ' +
             chalk_1.default.bold.white('M ') +
-            chalk_1.default.gray('Minor') +
+            (0, themes_colors_1.getThemeColor)('textSecondary')('Minor') +
             '  ' +
             chalk_1.default.bold.white('L ') +
-            chalk_1.default.gray('All') +
+            (0, themes_colors_1.getThemeColor)('textSecondary')('All') +
             '  ' +
             chalk_1.default.bold.white('U ') +
-            chalk_1.default.gray('None'));
+            (0, themes_colors_1.getThemeColor)('textSecondary')('None'));
     }
     // Show status line with item range
     const totalPackages = states.length;
@@ -196,42 +251,42 @@ function renderInterface(states, currentRow, scrollOffset, maxVisibleItems, forc
     if (filterMode) {
         // In filter mode, show ESC to exit filter
         if (totalPackages === 0) {
-            statusLine = chalk_1.default.yellow(`No matches found`) +
+            statusLine = (0, themes_colors_1.getThemeColor)('warning')(`No matches found`) +
                 '  ' +
-                chalk_1.default.gray('Esc ') +
-                chalk_1.default.gray('Clear filter');
+                (0, themes_colors_1.getThemeColor)('textSecondary')('Esc ') +
+                (0, themes_colors_1.getThemeColor)('textSecondary')('Clear filter');
         }
         else if (totalVisualItems > maxVisibleItems) {
-            statusLine = chalk_1.default.gray(`Showing ${chalk_1.default.white(startItem)}-${chalk_1.default.white(endItem)} of ${chalk_1.default.white(totalPackages)} matches (${chalk_1.default.white(totalBeforeFilter)} total)`) +
+            statusLine = (0, themes_colors_1.getThemeColor)('textSecondary')(`Showing ${chalk_1.default.white(startItem)}-${chalk_1.default.white(endItem)} of ${chalk_1.default.white(totalPackages)} matches (${chalk_1.default.white(totalBeforeFilter)} total)`) +
                 '  ' +
-                chalk_1.default.gray('Esc ') +
-                chalk_1.default.gray('Clear filter');
+                (0, themes_colors_1.getThemeColor)('textSecondary')('Esc ') +
+                (0, themes_colors_1.getThemeColor)('textSecondary')('Clear filter');
         }
         else {
-            statusLine = chalk_1.default.gray(`Showing all ${chalk_1.default.white(totalPackages)} matches (${chalk_1.default.white(totalBeforeFilter)} total)`) +
+            statusLine = (0, themes_colors_1.getThemeColor)('textSecondary')(`Showing all ${chalk_1.default.white(totalPackages)} matches (${chalk_1.default.white(totalBeforeFilter)} total)`) +
                 '  ' +
-                chalk_1.default.gray('Esc ') +
-                chalk_1.default.gray('Clear filter');
+                (0, themes_colors_1.getThemeColor)('textSecondary')('Esc ') +
+                (0, themes_colors_1.getThemeColor)('textSecondary')('Clear filter');
         }
     }
     else if (totalPackages < totalBeforeFilter) {
         // Filter is applied but not in filter mode
         if (totalVisualItems > maxVisibleItems) {
-            statusLine = chalk_1.default.gray(`Showing ${chalk_1.default.white(startItem)}-${chalk_1.default.white(endItem)} of ${chalk_1.default.white(totalPackages)} matches (${chalk_1.default.white(totalBeforeFilter)} total)`) +
+            statusLine = (0, themes_colors_1.getThemeColor)('textSecondary')(`Showing ${chalk_1.default.white(startItem)}-${chalk_1.default.white(endItem)} of ${chalk_1.default.white(totalPackages)} matches (${chalk_1.default.white(totalBeforeFilter)} total)`) +
                 '  ' +
-                chalk_1.default.gray('/ ') +
-                chalk_1.default.gray('Edit filter') +
+                (0, themes_colors_1.getThemeColor)('textSecondary')('/ ') +
+                (0, themes_colors_1.getThemeColor)('textSecondary')('Edit filter') +
                 '  ' +
-                chalk_1.default.gray('Enter ') +
-                chalk_1.default.gray('Confirm') +
+                (0, themes_colors_1.getThemeColor)('textSecondary')('Enter ') +
+                (0, themes_colors_1.getThemeColor)('textSecondary')('Confirm') +
                 '  ' +
-                chalk_1.default.gray('Esc ') +
-                chalk_1.default.gray('Cancel');
+                (0, themes_colors_1.getThemeColor)('textSecondary')('Esc ') +
+                (0, themes_colors_1.getThemeColor)('textSecondary')('Cancel');
         }
         else {
-            statusLine = chalk_1.default.gray(`Showing all ${chalk_1.default.white(totalPackages)} matches (${chalk_1.default.white(totalBeforeFilter)} total)`) +
+            statusLine = (0, themes_colors_1.getThemeColor)('textSecondary')(`Showing all ${chalk_1.default.white(totalPackages)} matches (${chalk_1.default.white(totalBeforeFilter)} total)`) +
                 '  ' +
-                chalk_1.default.gray('/ ') +
+                (0, themes_colors_1.getThemeColor)('textSecondary')('/ ') +
                 chalk_1.default.gray('Edit filter') +
                 '  ' +
                 chalk_1.default.gray('Enter ') +
@@ -276,7 +331,7 @@ function renderInterface(states, currentRow, scrollOffset, maxVisibleItems, forc
                 output.push(renderSpacer());
             }
             else if (item.type === 'package') {
-                const line = renderPackageLine(item.state, item.originalIndex, item.originalIndex === currentRow);
+                const line = renderPackageLine(item.state, item.originalIndex, item.originalIndex === currentRow, terminalWidth);
                 output.push(line);
             }
         }
@@ -284,7 +339,7 @@ function renderInterface(states, currentRow, scrollOffset, maxVisibleItems, forc
     else {
         // Fallback to flat rendering (legacy mode)
         for (let i = scrollOffset; i < Math.min(scrollOffset + maxVisibleItems, states.length); i++) {
-            const line = renderPackageLine(states[i], i, i === currentRow);
+            const line = renderPackageLine(states[i], i, i === currentRow, terminalWidth);
             output.push(line);
         }
     }

package/dist/ui/renderer/theme-selector.js

@@ -0,0 +1,83 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderThemeSelectorModal = renderThemeSelectorModal;
+const chalk_1 = __importDefault(require("chalk"));
+const themes_1 = require("../themes");
+/**
+ * Get the visual length of a string (ignoring ANSI color codes)
+ * Accounts for wide characters like emojis
+ */
+function getVisualLength(str) {
+    const cleaned = str.replace(/\u001b\[[0-9;]*m/g, '');
+    let length = 0;
+    for (const char of cleaned) {
+        const code = char.charCodeAt(0);
+        // Emoji ranges: 0x1F000–0x1F9FF (and other ranges)
+        if (code >= 0x1F000 || code >= 0x2600) {
+            length += 2;
+        }
+        else {
+            length += 1;
+        }
+    }
+    return length;
+}
+/**
+ * Render the theme selector modal
+ */
+function renderThemeSelectorModal(currentTheme, previewTheme, terminalWidth = 80, terminalHeight = 24) {
+    const maxModalWidth = 76; // Fixed width that fits comfortably in 80-char terminal
+    const padding = Math.max(0, Math.floor((terminalWidth - maxModalWidth) / 2));
+    const lines = [];
+    const contentWidth = maxModalWidth - 4; // Account for '│ ' on left and ' │' on right
+    // Helper to pad content to exact width
+    const createLine = (content) => {
+        const visualLen = getVisualLength(content);
+        const spacesNeeded = Math.max(0, contentWidth - visualLen);
+        const line = ' '.repeat(padding) + chalk_1.default.gray('│') + ' ' + content + ' '.repeat(spacesNeeded) + ' ' + chalk_1.default.gray('│');
+        return line;
+    };
+    // Top padding to center vertically
+    const topPadding = Math.max(1, Math.floor((terminalHeight - themes_1.themeNames.length - 8) / 2));
+    for (let i = 0; i < topPadding; i++) {
+        lines.push('');
+    }
+    // Top border
+    lines.push(' '.repeat(padding) + chalk_1.default.gray('╭' + '─'.repeat(maxModalWidth - 2) + '╮'));
+    // Title
+    const title = chalk_1.default.cyan('🎨 Select Theme');
+    lines.push(createLine(title));
+    // Separator
+    lines.push(' '.repeat(padding) + chalk_1.default.gray('├' + '─'.repeat(maxModalWidth - 2) + '┤'));
+    // Theme options
+    for (const themeName of themes_1.themeNames) {
+        const isSelected = themeName === previewTheme;
+        const isCurrent = themeName === currentTheme;
+        const themeObj = themes_1.themes[themeName];
+        // Build the theme line
+        let themeLine = '';
+        if (isSelected) {
+            themeLine = chalk_1.default.green('● ');
+        }
+        else {
+            themeLine = chalk_1.default.gray('○ ');
+        }
+        themeLine += themeObj.name;
+        if (isCurrent) {
+            themeLine += chalk_1.default.gray(' (current)');
+        }
+        lines.push(createLine(themeLine));
+    }
+    // Separator before instructions
+    lines.push(' '.repeat(padding) + chalk_1.default.gray('├' + '─'.repeat(maxModalWidth - 2) + '┤'));
+    // Instructions
+    const instruction = chalk_1.default.gray('↑/↓ to navigate • Enter to confirm • Esc to cancel');
+    lines.push(createLine(instruction));
+    // Bottom border
+    lines.push(' '.repeat(padding) + chalk_1.default.gray('╰' + '─'.repeat(maxModalWidth - 2) + '╯'));
+    return lines;
+}
+//# sourceMappingURL=theme-selector.js.map

package/dist/ui/state/filter-manager.js

@@ -6,6 +6,10 @@ class FilterManager {
         this.state = {
             filterMode: false,
             filterQuery: '',
+            showDependencies: true,
+            showDevDependencies: true,
+            showPeerDependencies: true,
+            showOptionalDependencies: true,
         };
     }
     getState() {
@@ -36,12 +40,59 @@ class FilterManager {
             this.state.filterQuery = this.state.filterQuery.slice(0, -1);
         }
     }
+    toggleDependencyType(type) {
+        switch (type) {
+            case 'dependencies':
+                this.state.showDependencies = !this.state.showDependencies;
+                break;
+            case 'devDependencies':
+                this.state.showDevDependencies = !this.state.showDevDependencies;
+                break;
+            case 'peerDependencies':
+                this.state.showPeerDependencies = !this.state.showPeerDependencies;
+                break;
+            case 'optionalDependencies':
+                this.state.showOptionalDependencies = !this.state.showOptionalDependencies;
+                break;
+        }
+    }
+    getActiveFilterLabel() {
+        const activeTypes = [];
+        if (this.state.showDependencies)
+            activeTypes.push('Deps');
+        if (this.state.showDevDependencies)
+            activeTypes.push('Dev');
+        if (this.state.showPeerDependencies)
+            activeTypes.push('Peer');
+        if (this.state.showOptionalDependencies)
+            activeTypes.push('Optional');
+        if (activeTypes.length === 0)
+            return 'None';
+        return activeTypes.join(', ');
+    }
     getFilteredStates(allStates) {
-        if (!this.state.filterQuery) {
-            return allStates;
+        let filtered = allStates;
+        // Apply text filter
+        if (this.state.filterQuery) {
+            const query = this.state.filterQuery.toLowerCase();
+            filtered = filtered.filter((state) => state.name.toLowerCase().includes(query));
         }
-        const query = this.state.filterQuery.toLowerCase();
-        return allStates.filter((state) => state.name.toLowerCase().includes(query));
+        // Apply dependency type filter
+        filtered = filtered.filter((state) => {
+            switch (state.type) {
+                case 'dependencies':
+                    return this.state.showDependencies;
+                case 'devDependencies':
+                    return this.state.showDevDependencies;
+                case 'peerDependencies':
+                    return this.state.showPeerDependencies;
+                case 'optionalDependencies':
+                    return this.state.showOptionalDependencies;
+                default:
+                    return true;
+            }
+        });
+        return filtered;
     }
 }
 exports.FilterManager = FilterManager;

package/dist/ui/state/state-manager.js

@@ -4,6 +4,7 @@ exports.StateManager = void 0;
 const navigation_manager_1 = require("./navigation-manager");
 const modal_manager_1 = require("./modal-manager");
 const filter_manager_1 = require("./filter-manager");
+const theme_manager_1 = require("./theme-manager");
 class StateManager {
     constructor(initialRow = 0, terminalHeight = 24) {
         this.headerLines = 5; // title (with label) + empty + 1 instruction line + status + empty
@@ -11,6 +12,7 @@ class StateManager {
         this.navigationManager = new navigation_manager_1.NavigationManager(initialRow, maxVisibleItems);
         this.modalManager = new modal_manager_1.ModalManager();
         this.filterManager = new filter_manager_1.FilterManager();
+        this.themeManager = new theme_manager_1.ThemeManager();
         this.displayState = {
             maxVisibleItems,
             terminalHeight,
@@ -26,6 +28,7 @@ class StateManager {
         const navState = this.navigationManager.getState();
         const modalState = this.modalManager.getState();
         const filterState = this.filterManager.getState();
+        const themeState = this.themeManager.getState();
         return {
             currentRow: navState.currentRow,
             previousRow: navState.previousRow,
@@ -41,6 +44,8 @@ class StateManager {
             isLoadingModalInfo: modalState.isLoadingModalInfo,
             filterMode: filterState.filterMode,
             filterQuery: filterState.filterQuery,
+            showThemeModal: themeState.showThemeModal,
+            currentTheme: themeState.currentTheme,
         };
     }
     setRenderableItems(items) {
@@ -158,13 +163,13 @@ class StateManager {
     // Filter delegation
     enterFilterMode() {
         this.filterManager.enterFilterMode();
-        this.renderState.forceFullRender = true;
+        // Use incremental render for search mode toggle (no blink)
     }
     exitFilterMode() {
         this.filterManager.exitFilterMode();
         this.navigationManager.setCurrentRow(0);
         this.navigationManager.setScrollOffset(0);
-        this.renderState.forceFullRender = true;
+        // Use incremental render for search mode toggle (no blink)
     }
     updateFilterQuery(query) {
         this.filterManager.updateFilterQuery(query);
@@ -175,17 +180,25 @@ class StateManager {
         this.filterManager.appendToFilterQuery(char);
         this.navigationManager.setCurrentRow(0);
         this.navigationManager.setScrollOffset(0);
-        this.renderState.forceFullRender = true;
     }
     deleteFromFilterQuery() {
         this.filterManager.deleteFromFilterQuery();
         this.navigationManager.setCurrentRow(0);
         this.navigationManager.setScrollOffset(0);
-        this.renderState.forceFullRender = true;
     }
     getFilteredStates(allStates) {
         return this.filterManager.getFilteredStates(allStates);
     }
+    toggleDependencyTypeFilter(type) {
+        this.filterManager.toggleDependencyType(type);
+        // Reset navigation when filter changes
+        this.navigationManager.setCurrentRow(0);
+        this.navigationManager.setScrollOffset(0);
+        // Use incremental render (no blink)
+    }
+    getActiveFilterLabel() {
+        return this.filterManager.getActiveFilterLabel();
+    }
     // Display and render state management
     updateTerminalHeight(newHeight) {
         const newMaxVisibleItems = Math.max(5, newHeight - this.headerLines - 2);
@@ -210,6 +223,26 @@ class StateManager {
         this.navigationManager.resetForResize(totalItems);
         this.renderState.forceFullRender = true;
     }
+    // Theme delegation
+    toggleThemeModal() {
+        this.themeManager.toggleThemeModal();
+        this.renderState.forceFullRender = true;
+    }
+    closeThemeModal() {
+        this.themeManager.closeThemeModal();
+        this.renderState.forceFullRender = true;
+    }
+    previewTheme(themeName) {
+        this.themeManager.previewTheme(themeName);
+        this.renderState.forceFullRender = true;
+    }
+    confirmTheme() {
+        this.themeManager.confirmTheme();
+        this.renderState.forceFullRender = true;
+    }
+    getThemeManager() {
+        return this.themeManager;
+    }
 }
 exports.StateManager = StateManager;
 //# sourceMappingURL=state-manager.js.map