@involvex/youtube-music-cli 0.0.0

package/dist/source/components/player/Suggestions.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Suggestions component
+import { useEffect, useState, useCallback } from 'react';
+import { Box, Text } from 'ink';
+import { useYouTubeMusic } from "../../hooks/useYouTubeMusic.js";
+import { usePlayer } from "../../hooks/usePlayer.js";
+import { useTheme } from "../../hooks/useTheme.js";
+import { useKeyBinding } from "../../hooks/useKeyboard.js";
+import { KEYBINDINGS } from "../../utils/constants.js";
+import { truncate } from "../../utils/format.js";
+export default function Suggestions() {
+    const { theme } = useTheme();
+    const { state: playerState, play } = usePlayer();
+    const { getSuggestions, isLoading } = useYouTubeMusic();
+    const [suggestions, setSuggestions] = useState([]);
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    useEffect(() => {
+        if (playerState.currentTrack?.videoId) {
+            getSuggestions(playerState.currentTrack.videoId).then(setSuggestions);
+        }
+    }, [playerState.currentTrack?.videoId, getSuggestions]);
+    const navigateUp = useCallback(() => {
+        setSelectedIndex(prev => Math.max(0, prev - 1));
+    }, []);
+    const navigateDown = useCallback(() => {
+        setSelectedIndex(prev => Math.min(suggestions.length - 1, prev + 1));
+    }, [suggestions.length]);
+    const playSelected = useCallback(() => {
+        const track = suggestions[selectedIndex];
+        if (track) {
+            play(track);
+        }
+    }, [selectedIndex, suggestions, play]);
+    useKeyBinding(KEYBINDINGS.UP, navigateUp);
+    useKeyBinding(KEYBINDINGS.DOWN, navigateDown);
+    useKeyBinding(KEYBINDINGS.SELECT, playSelected);
+    if (isLoading) {
+        return _jsx(Text, { color: theme.colors.accent, children: "Loading suggestions..." });
+    }
+    if (suggestions.length === 0) {
+        return _jsx(Text, { color: theme.colors.dim, children: "No suggestions available" });
+    }
+    return (_jsxs(Box, { flexDirection: "column", gap: 1, children: [_jsxs(Text, { bold: true, color: theme.colors.primary, children: ["Suggestions based on: ", playerState.currentTrack?.title] }), suggestions.map((track, index) => {
+                const isSelected = index === selectedIndex;
+                return (_jsx(Box, { paddingX: 1, children: _jsxs(Text, { backgroundColor: isSelected ? theme.colors.primary : undefined, color: isSelected ? theme.colors.background : theme.colors.text, bold: isSelected, children: [index + 1, ". ", truncate(track.title, 40), " -", ' ', track.artists?.map(a => a.name).join(', ')] }) }, track.videoId));
+            }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: theme.colors.dim, children: "Arrows to navigate, Enter to play, Esc to go back" }) })] }));
+}

package/dist/source/components/playlist/PlaylistList.d.ts

@@ -0,0 +1 @@
+export default function PlaylistList(): import("react/jsx-runtime").JSX.Element;

package/dist/source/components/playlist/PlaylistList.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Playlist list component
+import { Box, Text } from 'ink';
+import { useTheme } from "../../hooks/useTheme.js";
+import { getConfigService } from "../../services/config/config.service.js";
+export default function PlaylistList() {
+    const { theme } = useTheme();
+    const config = getConfigService();
+    const playlists = config.get('playlists');
+    return (_jsxs(Box, { flexDirection: "column", gap: 1, children: [_jsx(Box, { borderStyle: "double", borderColor: theme.colors.secondary, paddingX: 1, marginBottom: 1, children: _jsx(Text, { bold: true, color: theme.colors.primary, children: "Playlists" }) }), playlists.length === 0 ? (_jsx(Text, { color: theme.colors.dim, children: "No playlists yet" })) : (playlists.map((playlist, index) => (_jsxs(Box, { paddingX: 1, children: [_jsxs(Text, { color: theme.colors.primary, children: [index + 1, "."] }), _jsx(Text, { children: " " }), _jsx(Text, { color: theme.colors.text, children: playlist.name }), _jsxs(Text, { color: theme.colors.dim, children: [_jsx(Text, { children: " " }), "(", playlist.tracks?.length || 0, " tracks)"] })] }, playlist.playlistId || index)))), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: theme.colors.dim, children: ["Press ", _jsx(Text, { color: theme.colors.text, children: "c" }), " to create playlist", _jsx(Text, { children: " | " }), _jsx(Text, { color: theme.colors.text, children: "Esc" }), " to go back"] }) })] }));
+}

package/dist/source/components/plugins/PluginInstallDialog.d.ts

@@ -0,0 +1,5 @@
+interface PluginInstallDialogProps {
+    onClose: () => void;
+}
+export default function PluginInstallDialog({ onClose, }: PluginInstallDialogProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/source/components/plugins/PluginInstallDialog.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Plugin install dialog - prompts for plugin name or URL
+import { useState, useCallback } from 'react';
+import { Box, Text } from 'ink';
+import TextInput from 'ink-text-input';
+import { useTheme } from "../../hooks/useTheme.js";
+import { usePlugins } from "../../stores/plugins.store.js";
+import { useKeyBinding } from "../../hooks/useKeyboard.js";
+import { KEYBINDINGS } from "../../utils/constants.js";
+export default function PluginInstallDialog({ onClose, }) {
+    const { theme } = useTheme();
+    const { installPlugin, state } = usePlugins();
+    const [input, setInput] = useState('');
+    const [installing, setInstalling] = useState(false);
+    const [result, setResult] = useState(null);
+    const handleSubmit = useCallback(async () => {
+        if (!input.trim() || installing)
+            return;
+        setInstalling(true);
+        setResult(null);
+        const installResult = await installPlugin(input.trim());
+        setInstalling(false);
+        setResult({
+            success: installResult.success,
+            message: installResult.success
+                ? `Successfully installed ${installResult.pluginId}`
+                : installResult.error || 'Installation failed',
+        });
+        if (installResult.success) {
+            // Close after a brief delay on success
+            setTimeout(onClose, 1500);
+        }
+    }, [input, installing, installPlugin, onClose]);
+    const handleClose = useCallback(() => {
+        if (!installing) {
+            onClose();
+        }
+    }, [installing, onClose]);
+    useKeyBinding(KEYBINDINGS.BACK, handleClose);
+    return (_jsxs(Box, { flexDirection: "column", gap: 1, children: [_jsx(Box, { borderStyle: "double", borderColor: theme.colors.secondary, paddingX: 1, children: _jsx(Text, { bold: true, color: theme.colors.primary, children: "Install Plugin" }) }), _jsx(Box, { paddingX: 1, children: _jsx(Text, { color: theme.colors.dim, children: "Enter a plugin name (from default repo) or GitHub URL:" }) }), _jsxs(Box, { paddingX: 1, children: [_jsx(Text, { color: theme.colors.text, children: '> ' }), _jsx(TextInput, { value: input, onChange: setInput, onSubmit: handleSubmit, placeholder: "e.g., adblock or https://github.com/user/plugin" })] }), installing && (_jsx(Box, { paddingX: 1, children: _jsx(Text, { color: theme.colors.warning, children: "Installing..." }) })), result && (_jsx(Box, { paddingX: 1, children: _jsxs(Text, { color: result.success ? theme.colors.success : theme.colors.error, children: [result.success ? '✓' : '✗', " ", result.message] }) })), state.error && !result && (_jsx(Box, { paddingX: 1, children: _jsxs(Text, { color: theme.colors.error, children: ["Error: ", state.error] }) })), _jsx(Box, { marginTop: 1, paddingX: 1, children: _jsxs(Text, { color: theme.colors.dim, children: ["Press ", _jsx(Text, { color: theme.colors.text, children: "Enter" }), " to install,", ' ', _jsx(Text, { color: theme.colors.text, children: "Esc" }), " to cancel"] }) })] }));
+}

package/dist/source/components/plugins/PluginsAvailable.d.ts

@@ -0,0 +1,5 @@
+interface PluginsAvailableProps {
+    selectedIndex: number;
+}
+export default function PluginsAvailable({ selectedIndex, }: PluginsAvailableProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/source/components/plugins/PluginsAvailable.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Available plugins component - displays plugins from the default repo
+import { useMemo } from 'react';
+import { Box, Text } from 'ink';
+import { useTheme } from "../../hooks/useTheme.js";
+import { usePlugins } from "../../stores/plugins.store.js";
+// Mock available plugins (in production, these would be fetched from the repo)
+const AVAILABLE_PLUGINS = [
+    {
+        id: 'adblock',
+        name: 'Adblock',
+        version: '1.0.0',
+        description: 'Blocks ads by filtering known ad video IDs',
+        author: 'involvex',
+        repository: 'https://github.com/involvex/youtube-music-cli-plugins',
+        installUrl: 'adblock',
+        tags: ['audio', 'filter'],
+    },
+    {
+        id: 'now-playing',
+        name: 'Now Playing',
+        version: '1.0.0',
+        description: 'Shows system notifications when track changes',
+        author: 'involvex',
+        repository: 'https://github.com/involvex/youtube-music-cli-plugins',
+        installUrl: 'now-playing',
+        tags: ['notifications'],
+    },
+    {
+        id: 'lyrics',
+        name: 'Lyrics',
+        version: '1.0.0',
+        description: 'Displays lyrics for the current track',
+        author: 'involvex',
+        repository: 'https://github.com/involvex/youtube-music-cli-plugins',
+        installUrl: 'lyrics',
+        tags: ['ui', 'lyrics'],
+    },
+];
+export default function PluginsAvailable({ selectedIndex, }) {
+    const { theme } = useTheme();
+    const { state } = usePlugins();
+    // Use useMemo instead of useEffect to avoid setState in effect
+    const plugins = useMemo(() => {
+        const installedIds = new Set(state.installedPlugins.map(p => p.manifest.id));
+        return AVAILABLE_PLUGINS.filter(p => !installedIds.has(p.id));
+    }, [state.installedPlugins]);
+    if (plugins.length === 0) {
+        return (_jsx(Box, { paddingX: 1, children: _jsx(Text, { color: theme.colors.dim, children: "All available plugins are already installed." }) }));
+    }
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { paddingX: 1, marginBottom: 1, children: _jsx(Text, { bold: true, color: theme.colors.secondary, children: "Available Plugins" }) }), plugins.map((plugin, index) => {
+                const isSelected = index === selectedIndex;
+                return (_jsx(Box, { paddingX: 1, children: _jsxs(Text, { backgroundColor: isSelected ? theme.colors.primary : undefined, color: isSelected ? theme.colors.background : theme.colors.text, bold: isSelected, children: [plugin.name, _jsxs(Text, { color: isSelected ? undefined : theme.colors.dim, children: [' ', "v", plugin.version, " - ", plugin.description] })] }) }, plugin.id));
+            })] }));
+}

package/dist/source/components/plugins/PluginsList.d.ts

@@ -0,0 +1,8 @@
+import type { PluginInstance } from '../../types/plugin.types.ts';
+interface PluginsListProps {
+    plugins: PluginInstance[];
+    selectedIndex: number;
+    onToggle?: (pluginId: string) => void;
+}
+export default function PluginsList({ plugins, selectedIndex, }: PluginsListProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/source/components/plugins/PluginsList.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Plugins list component - displays installed plugins
+import { Box, Text } from 'ink';
+import { useTheme } from "../../hooks/useTheme.js";
+export default function PluginsList({ plugins, selectedIndex, }) {
+    const { theme } = useTheme();
+    if (plugins.length === 0) {
+        return (_jsx(Box, { paddingX: 1, children: _jsx(Text, { color: theme.colors.dim, children: "No plugins installed. Press 'i' to install a plugin." }) }));
+    }
+    return (_jsx(Box, { flexDirection: "column", children: plugins.map((plugin, index) => {
+            const isSelected = index === selectedIndex;
+            const statusIcon = plugin.enabled ? '●' : '○';
+            const statusColor = plugin.enabled
+                ? theme.colors.success
+                : theme.colors.dim;
+            return (_jsx(Box, { paddingX: 1, children: _jsxs(Text, { backgroundColor: isSelected ? theme.colors.primary : undefined, color: isSelected ? theme.colors.background : theme.colors.text, bold: isSelected, children: [_jsx(Text, { color: isSelected ? undefined : statusColor, children: statusIcon }), ' ', plugin.manifest.name, _jsxs(Text, { color: isSelected ? undefined : theme.colors.dim, children: [' ', "v", plugin.manifest.version] })] }) }, plugin.manifest.id));
+        }) }));
+}

package/dist/source/components/search/SearchBar.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+type Props = {
+    onInput: (input: string) => void;
+    isActive?: boolean;
+};
+declare function SearchBar({ onInput, isActive }: Props): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof SearchBar>;
+export default _default;

package/dist/source/components/search/SearchBar.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Search bar component
+import { useNavigation } from "../../hooks/useNavigation.js";
+import { useState, useCallback } from 'react';
+import React from 'react';
+import { SEARCH_TYPE } from "../../utils/constants.js";
+import { useTheme } from "../../hooks/useTheme.js";
+import { useKeyBinding } from "../../hooks/useKeyboard.js";
+import { Box, Text } from 'ink';
+import TextInput from 'ink-text-input';
+function SearchBar({ onInput, isActive = true }) {
+    const { theme } = useTheme();
+    const { state: navState, dispatch } = useNavigation();
+    const [input, setInput] = useState('');
+    const searchTypes = Object.values(SEARCH_TYPE);
+    // Handle type switching
+    const cycleType = useCallback(() => {
+        if (!isActive)
+            return;
+        const currentIndex = searchTypes.indexOf(navState.searchType);
+        const nextIndex = (currentIndex + 1) % searchTypes.length;
+        const nextType = searchTypes[nextIndex];
+        if (nextType) {
+            dispatch({
+                category: 'SET_SEARCH_CATEGORY',
+                searchType: nextType,
+            });
+        }
+    }, [navState.searchType, searchTypes, dispatch, isActive]);
+    // Handle submit via ink-text-input's onSubmit
+    const handleSubmit = useCallback((value) => {
+        if (value && isActive) {
+            dispatch({ category: 'SET_SEARCH_QUERY', query: value });
+            onInput(value);
+        }
+    }, [dispatch, onInput, isActive]);
+    // Handle clearing search
+    const clearSearch = useCallback(() => {
+        if (isActive) {
+            setInput('');
+            onInput('');
+        }
+    }, [isActive, onInput]);
+    useKeyBinding(['tab'], cycleType);
+    useKeyBinding(['escape'], clearSearch);
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: theme.colors.secondary, padding: 1, children: [_jsxs(Box, { marginBottom: 1, children: [_jsx(Text, { color: theme.colors.dim, children: "Type: " }), searchTypes.map((type, index) => (_jsxs(Text, { color: navState.searchType === type
+                            ? theme.colors.primary
+                            : theme.colors.dim, bold: navState.searchType === type, children: [type, index < searchTypes.length - 1 && ' '] }, type))), _jsx(Text, { color: theme.colors.dim, children: " (Tab to switch)" })] }), isActive && (_jsxs(Box, { children: [_jsx(Text, { color: theme.colors.primary, children: "Search: " }), _jsx(TextInput, { value: input, onChange: setInput, onSubmit: handleSubmit, placeholder: "Type to search...", focus: isActive })] })), !isActive && (_jsxs(Box, { children: [_jsx(Text, { color: theme.colors.primary, children: "Search: " }), _jsx(Text, { color: theme.colors.dim, children: input || 'Type to search...' })] })), _jsx(Text, { color: theme.colors.dim, children: "Type to search, Enter to search, Tab to change type, Esc to clear" })] }));
+}
+export default React.memo(SearchBar);

package/dist/source/components/search/SearchResults.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { SearchResult } from '../../types/youtube-music.types.ts';
+type Props = {
+    results: SearchResult[];
+    selectedIndex: number;
+    isActive?: boolean;
+};
+declare function SearchResults({ results, selectedIndex, isActive }: Props): import("react/jsx-runtime").JSX.Element | null;
+declare const _default: React.MemoExoticComponent<typeof SearchResults>;
+export default _default;

package/dist/source/components/search/SearchResults.js

@@ -0,0 +1,111 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+// Search results component
+import React from 'react';
+import { Box, Text } from 'ink';
+import { useTheme } from "../../hooks/useTheme.js";
+import { useNavigation } from "../../hooks/useNavigation.js";
+import { useKeyBinding } from "../../hooks/useKeyboard.js";
+import { usePlayer } from "../../hooks/usePlayer.js";
+import { KEYBINDINGS } from "../../utils/constants.js";
+import { truncate } from "../../utils/format.js";
+import { useCallback, useRef, useEffect } from 'react';
+import { logger } from "../../services/logger/logger.service.js";
+import { useTerminalSize } from "../../hooks/useTerminalSize.js";
+// Generate unique component instance ID
+let instanceCounter = 0;
+function SearchResults({ results, selectedIndex, isActive = true }) {
+    const { theme } = useTheme();
+    const { dispatch } = useNavigation();
+    const { play } = usePlayer();
+    const { columns } = useTerminalSize();
+    // Track component instance and last action time for debouncing
+    const instanceIdRef = useRef(++instanceCounter);
+    const lastSelectTime = useRef(0);
+    const SELECT_DEBOUNCE_MS = 300; // Prevent duplicate triggers within 300ms
+    useEffect(() => {
+        const instanceId = instanceIdRef.current;
+        logger.debug('SearchResults', 'Component mounted', { instanceId });
+        return () => {
+            logger.debug('SearchResults', 'Component unmounted', { instanceId });
+        };
+    }, []);
+    // Navigate results with arrow keys
+    const navigateUp = useCallback(() => {
+        if (!isActive)
+            return;
+        if (selectedIndex > 0) {
+            dispatch({ category: 'SET_SELECTED_RESULT', index: selectedIndex - 1 });
+        }
+    }, [selectedIndex, dispatch, isActive]);
+    const navigateDown = useCallback(() => {
+        if (!isActive)
+            return;
+        if (selectedIndex < results.length - 1) {
+            dispatch({ category: 'SET_SELECTED_RESULT', index: selectedIndex + 1 });
+        }
+    }, [selectedIndex, results.length, dispatch, isActive]);
+    // Play selected result
+    const playSelected = useCallback(() => {
+        logger.debug('SearchResults', 'playSelected called', {
+            isActive,
+            selectedIndex,
+            resultsLength: results.length,
+        });
+        if (!isActive)
+            return;
+        const selected = results[selectedIndex];
+        logger.info('SearchResults', 'Playing selected track', {
+            type: selected?.type,
+            title: selected?.type === 'song' ? selected.data.title : 'N/A',
+        });
+        if (selected && selected.type === 'song') {
+            // Clear queue when playing from search results to ensure indices match
+            play(selected.data, { clearQueue: true });
+        }
+        else {
+            logger.warn('SearchResults', 'Selected item is not a song', {
+                type: selected?.type,
+            });
+        }
+    }, [selectedIndex, results, play, isActive]);
+    // Play selected result handler (memoized to prevent duplicate registrations)
+    const handleSelect = useCallback(() => {
+        const now = Date.now();
+        const timeSinceLastSelect = now - lastSelectTime.current;
+        const instanceId = instanceIdRef.current;
+        if (!isActive) {
+            logger.debug('SearchResults', 'SELECT ignored, not active', { instanceId });
+            return;
+        }
+        // Debounce to prevent double-triggers
+        if (timeSinceLastSelect < SELECT_DEBOUNCE_MS) {
+            logger.warn('SearchResults', 'SELECT debounced (duplicate trigger)', {
+                instanceId,
+                timeSinceLastSelect,
+                debounceMs: SELECT_DEBOUNCE_MS,
+            });
+            return;
+        }
+        lastSelectTime.current = now;
+        logger.debug('SearchResults', 'SELECT key pressed', { isActive, instanceId });
+        playSelected();
+    }, [isActive, playSelected]);
+    useKeyBinding(KEYBINDINGS.UP, navigateUp);
+    useKeyBinding(KEYBINDINGS.DOWN, navigateDown);
+    useKeyBinding(KEYBINDINGS.SELECT, handleSelect);
+    // Note: Removed redundant useEffect that was syncing selectedIndex to dispatch
+    // This was causing unnecessary re-renders. The selectedIndex is already managed
+    // by the parent component (SearchLayout) and passed down as a prop.
+    if (results.length === 0) {
+        return null;
+    }
+    // Calculate responsive truncation
+    const maxTitleWidth = Math.max(20, Math.floor(columns * 0.4));
+    return (_jsxs(Box, { flexDirection: "column", gap: 1, children: [_jsxs(Text, { color: theme.colors.dim, bold: true, children: ["Results (", results.length, ")"] }), _jsx(Box, { paddingX: 1, children: _jsxs(Text, { color: theme.colors.dim, bold: true, children: ['#'.padEnd(6), " ", 'Type'.padEnd(10), " ", 'Title'.padEnd(maxTitleWidth)] }) }), results.map((result, index) => {
+                const isSelected = index === selectedIndex;
+                const data = result.data;
+                const title = 'title' in data ? data.title : 'name' in data ? data.name : 'Unknown';
+                return (_jsxs(Box, { paddingX: 1, borderStyle: isSelected ? 'double' : undefined, borderColor: isSelected ? theme.colors.primary : undefined, children: [_jsx(Text, { color: isSelected ? theme.colors.primary : theme.colors.dim, bold: isSelected, children: (isSelected ? '> ' : '  ') + (index + 1).toString().padEnd(4) }), _jsx(Text, { color: isSelected ? theme.colors.primary : theme.colors.dim, bold: isSelected, children: result.type.toUpperCase().padEnd(10) }), _jsx(Text, { color: isSelected ? theme.colors.primary : theme.colors.text, bold: isSelected, children: truncate(title, maxTitleWidth) })] }, index));
+            })] }));
+}
+export default React.memo(SearchResults);

package/dist/source/components/settings/Settings.d.ts

@@ -0,0 +1 @@
+export default function Settings(): import("react/jsx-runtime").JSX.Element;

package/dist/source/components/settings/Settings.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Settings component
+import { useState, useCallback } from 'react';
+import { Box, Text } from 'ink';
+import { useTheme } from "../../hooks/useTheme.js";
+import { useNavigation } from "../../hooks/useNavigation.js";
+import { getConfigService } from "../../services/config/config.service.js";
+import { useKeyBinding } from "../../hooks/useKeyboard.js";
+import { KEYBINDINGS, VIEW } from "../../utils/constants.js";
+const QUALITIES = ['low', 'medium', 'high'];
+const SETTINGS_ITEMS = ['Stream Quality', 'Manage Plugins'];
+export default function Settings() {
+    const { theme } = useTheme();
+    const { dispatch } = useNavigation();
+    const config = getConfigService();
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const [quality, setQuality] = useState(config.get('streamQuality') || 'high');
+    const navigateUp = useCallback(() => {
+        setSelectedIndex(prev => Math.max(0, prev - 1));
+    }, [setSelectedIndex]);
+    const navigateDown = useCallback(() => {
+        setSelectedIndex(prev => Math.min(SETTINGS_ITEMS.length - 1, prev + 1));
+    }, [setSelectedIndex]);
+    const toggleQuality = useCallback(() => {
+        const currentIndex = QUALITIES.indexOf(quality);
+        const nextQuality = QUALITIES[(currentIndex + 1) % QUALITIES.length];
+        setQuality(nextQuality);
+        config.set('streamQuality', nextQuality);
+    }, [quality, config]);
+    const handleSelect = useCallback(() => {
+        if (selectedIndex === 0) {
+            toggleQuality();
+        }
+        else if (selectedIndex === 1) {
+            dispatch({ category: 'NAVIGATE', view: VIEW.PLUGINS });
+        }
+    }, [selectedIndex, toggleQuality, dispatch]);
+    useKeyBinding(KEYBINDINGS.UP, navigateUp);
+    useKeyBinding(KEYBINDINGS.DOWN, navigateDown);
+    useKeyBinding(KEYBINDINGS.SELECT, handleSelect);
+    return (_jsxs(Box, { flexDirection: "column", gap: 1, children: [_jsx(Box, { borderStyle: "double", borderColor: theme.colors.secondary, paddingX: 1, marginBottom: 1, children: _jsx(Text, { bold: true, color: theme.colors.primary, children: "Settings" }) }), _jsx(Box, { paddingX: 1, children: _jsxs(Text, { backgroundColor: selectedIndex === 0 ? theme.colors.primary : undefined, color: selectedIndex === 0 ? theme.colors.background : theme.colors.text, bold: selectedIndex === 0, children: ["Stream Quality: ", quality.toUpperCase()] }) }), _jsx(Box, { paddingX: 1, children: _jsx(Text, { backgroundColor: selectedIndex === 1 ? theme.colors.primary : undefined, color: selectedIndex === 1 ? theme.colors.background : theme.colors.text, bold: selectedIndex === 1, children: "Manage Plugins" }) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: theme.colors.dim, children: "Arrows to navigate, Enter to select, Esc/q to go back" }) })] }));
+}

package/dist/source/components/theme/ThemeSwitcher.d.ts

@@ -0,0 +1 @@
+export default function ThemeSwitcher(): import("react/jsx-runtime").JSX.Element;

package/dist/source/components/theme/ThemeSwitcher.js

@@ -0,0 +1,11 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+// Theme switcher component
+import { Box, Text } from 'ink';
+import { useTheme } from "../../hooks/useTheme.js";
+import { BUILTIN_THEMES } from "../../config/themes.config.js";
+import { useState } from 'react';
+export default function ThemeSwitcher() {
+    const { theme } = useTheme();
+    const [expanded, _setExpanded] = useState(false);
+    return (_jsxs(Box, { flexDirection: "column", gap: 1, children: [_jsxs(Box, { borderStyle: "double", borderColor: theme.colors.secondary, paddingX: 1, children: [_jsxs(Text, { bold: true, color: theme.colors.primary, children: ["Theme: ", theme.name] }), _jsx(Text, { children: " " }), _jsx(Text, { color: theme.colors.dim, children: "(Enter to change, Esc to close)" })] }), expanded ? (_jsx(_Fragment, { children: Object.keys(BUILTIN_THEMES).map(themeName => (_jsxs(Box, { paddingX: 2, children: [_jsx(Text, { color: theme.colors.text, children: "\u2192 " }), _jsx(Text, { color: theme.colors.dim, children: themeName }), _jsx(Text, { children: " " }), _jsxs(Text, { color: theme.colors.dim, children: ["Press ", _jsx(Text, { color: theme.colors.text, children: "Enter" }), " to select"] })] }, themeName))) })) : (_jsxs(Box, { paddingX: 2, children: [_jsx(Text, { color: theme.colors.dim, children: "Press " }), _jsx(Text, { color: theme.colors.text, children: "Enter" }), _jsx(Text, { color: theme.colors.dim, children: " to browse themes" })] })), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: theme.colors.dim, children: ["Current: ", _jsx(Text, { color: theme.colors.primary, children: theme.name })] }) })] }));
+}

package/dist/source/config/themes.config.d.ts

@@ -0,0 +1,3 @@
+import type { Theme } from '../types/theme.types.ts';
+export declare const BUILTIN_THEMES: Record<string, Theme>;
+export declare const DEFAULT_THEME: Theme;

package/dist/source/config/themes.config.js

@@ -0,0 +1,63 @@
+export const BUILTIN_THEMES = {
+    dark: {
+        name: 'Dark',
+        colors: {
+            primary: 'cyan',
+            secondary: 'blue',
+            background: 'black',
+            text: 'white',
+            accent: 'yellow',
+            dim: 'gray',
+            error: 'red',
+            success: 'green',
+            warning: 'yellow',
+        },
+        inverse: false,
+    },
+    light: {
+        name: 'Light',
+        colors: {
+            primary: 'blue',
+            secondary: 'cyan',
+            background: 'white',
+            text: 'black',
+            accent: 'magenta',
+            dim: 'gray',
+            error: 'red',
+            success: 'green',
+            warning: 'yellow',
+        },
+        inverse: false,
+    },
+    midnight: {
+        name: 'Midnight',
+        colors: {
+            primary: 'magenta',
+            secondary: 'purple',
+            background: 'black',
+            text: 'white',
+            accent: 'cyan',
+            dim: 'gray',
+            error: 'red',
+            success: 'greenBright',
+            warning: 'yellowBright',
+        },
+        inverse: false,
+    },
+    matrix: {
+        name: 'Matrix',
+        colors: {
+            primary: 'green',
+            secondary: 'greenBright',
+            background: 'black',
+            text: 'white',
+            accent: 'greenBright',
+            dim: 'green',
+            error: 'red',
+            success: 'greenBright',
+            warning: 'yellow',
+        },
+        inverse: false,
+    },
+};
+export const DEFAULT_THEME = BUILTIN_THEMES['dark'];

package/dist/source/contexts/theme.context.d.ts

@@ -0,0 +1,13 @@
+import { type ReactNode } from 'react';
+import type { Theme } from '../types/theme.types.ts';
+type ThemeContextValue = {
+    theme: Theme;
+    themeName: string;
+    setTheme: (name: string) => void;
+    setCustomTheme: (theme: Theme) => void;
+};
+export declare function ThemeProvider({ children }: {
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useTheme(): ThemeContextValue;
+export {};

package/dist/source/contexts/theme.context.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// Theme context and provider
+import { createContext, useContext, useState, useCallback, } from 'react';
+import { getConfigService } from "../services/config/config.service.js";
+const ThemeContext = createContext(null);
+export function ThemeProvider({ children }) {
+    const [theme, setThemeState] = useState(getConfigService().getTheme());
+    const [themeName, setThemeNameState] = useState(getConfigService().get('theme'));
+    const setTheme = useCallback((name) => {
+        const configService = getConfigService();
+        configService.updateTheme(name);
+        setThemeNameState(name);
+        setThemeState(configService.getTheme());
+    }, []);
+    const setCustomTheme = useCallback((themeValue) => {
+        const configService = getConfigService();
+        configService.setCustomTheme(themeValue);
+        setThemeNameState('custom');
+        setThemeState(themeValue);
+    }, []);
+    return (_jsx(ThemeContext.Provider, { value: { theme, themeName, setTheme, setCustomTheme }, children: children }));
+}
+export function useTheme() {
+    const context = useContext(ThemeContext);
+    if (!context) {
+        throw new Error('useTheme must be used within ThemeProvider');
+    }
+    return context;
+}

package/dist/source/hooks/useKeyboard.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Hook to bind keyboard shortcuts.
+ * This uses a centralized manager to avoid multiple useInput calls and memory leaks.
+ */
+export declare function useKeyBinding(keys: readonly string[], handler: () => void): void;
+/**
+ * Global Keyboard Manager Component
+ * This should be rendered once at the root of the app.
+ */
+export declare function KeyboardManager(): null;