@involvex/youtube-music-cli 0.0.0

package/dist/source/components/common/ErrorBoundary.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Error boundary component for robust error handling
+import { Component } from 'react';
+import { Box, Text } from 'ink';
+export class ErrorBoundary extends Component {
+    state = {
+        hasError: false,
+        error: null,
+    };
+    static getDerivedStateFromError(error) {
+        return { hasError: true, error };
+    }
+    componentDidCatch(error, errorInfo) {
+        console.error('Uncaught error:', error, errorInfo);
+    }
+    render() {
+        if (this.state.hasError) {
+            return (_jsxs(Box, { flexDirection: "column", padding: 1, borderStyle: "round", borderColor: "red", children: [_jsx(Text, { color: "red", bold: true, children: "Something went wrong!" }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "white", children: this.state.error?.message }) }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: "dim", children: "Press Ctrl+C to exit and restart the CLI." }) })] }));
+        }
+        return this.props.children;
+    }
+}

package/dist/source/components/common/Help.d.ts

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

package/dist/source/components/common/Help.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Help component for keyboard shortcuts
+import { Box, Text } from 'ink';
+import { useTheme } from "../../hooks/useTheme.js";
+import { useNavigation } from "../../hooks/useNavigation.js";
+export default function Help() {
+    const { theme } = useTheme();
+    const { dispatch: _dispatch } = useNavigation();
+    return (_jsxs(Box, { flexDirection: "column", gap: 1, padding: 1, children: [_jsx(Box, { borderStyle: "single", borderColor: theme.colors.secondary, paddingX: 1, children: _jsx(Text, { bold: true, color: theme.colors.primary, children: "Keyboard Shortcuts" }) }), _jsxs(Box, { flexDirection: "column", gap: 1, children: [_jsx(Text, { bold: true, color: theme.colors.secondary, children: "Global" }), _jsx(Box, { paddingX: 2, children: _jsxs(Text, { children: [_jsx(Text, { color: theme.colors.text, children: "q / Esc" }), " - Quit", _jsx(Text, { children: " | " }), _jsx(Text, { color: theme.colors.text, children: "?" }), " - Help", _jsx(Text, { children: " | " }), _jsx(Text, { color: theme.colors.text, children: "/" }), " - Search", _jsx(Text, { children: " | " }), _jsx(Text, { color: theme.colors.text, children: "p" }), " - Playlists", _jsx(Text, { children: " | " }), _jsx(Text, { color: theme.colors.text, children: "g" }), " - Suggestions", _jsx(Text, { children: " | " }), _jsx(Text, { color: theme.colors.text, children: "," }), " - Settings"] }) }), _jsx(Text, { bold: true, color: theme.colors.secondary, children: "Player" }), _jsx(Box, { paddingX: 2, children: _jsxs(Text, { children: [_jsx(Text, { color: theme.colors.text, children: "Space" }), " - Play/Pause", _jsx(Text, { children: " | " }), _jsx(Text, { color: theme.colors.text, children: "n" }), " - Next", _jsx(Text, { children: " | " }), _jsx(Text, { color: theme.colors.text, children: "b" }), " - Previous", _jsx(Text, { children: " | " }), _jsx(Text, { color: theme.colors.text, children: "=" }), " - Volume Up", _jsx(Text, { children: " | " }), _jsx(Text, { color: theme.colors.text, children: "-" }), " - Volume Down", _jsx(Text, { children: " | " }), _jsx(Text, { color: theme.colors.text, children: "s" }), " - Toggle Shuffle", _jsx(Text, { children: " | " }), _jsx(Text, { color: theme.colors.text, children: "r" }), " - Toggle Repeat"] }) }), _jsx(Text, { bold: true, color: theme.colors.secondary, children: "Navigation" }), _jsx(Box, { paddingX: 2, children: _jsxs(Text, { children: [_jsx(Text, { color: theme.colors.text, children: "Up" }), " /", _jsx(Text, { children: " " }), _jsx(Text, { color: theme.colors.text, children: "k" }), " - Move Up", _jsx(Text, { children: " | " }), _jsx(Text, { color: theme.colors.text, children: "Down" }), " /", _jsx(Text, { children: " " }), _jsx(Text, { color: theme.colors.text, children: "j" }), " - Move Down", _jsx(Text, { children: " | " }), _jsx(Text, { color: theme.colors.text, children: "Enter" }), " - Select", _jsx(Text, { children: " | " }), _jsx(Text, { color: theme.colors.text, children: "Esc" }), " - Go Back"] }) }), _jsx(Text, { bold: true, color: theme.colors.secondary, children: "Search" }), _jsx(Box, { paddingX: 2, children: _jsxs(Text, { children: [_jsx(Text, { color: theme.colors.text, children: "Tab" }), " - Switch Search Type", _jsx(Text, { children: " | " }), _jsx(Text, { color: theme.colors.text, children: "Esc" }), " - Clear Search", _jsx(Text, { children: " | " }), _jsx(Text, { color: theme.colors.text, children: "[ / ]" }), " - Results Limit"] }) }), _jsx(Text, { bold: true, color: theme.colors.secondary, children: "Playlist" }), _jsx(Box, { paddingX: 2, children: _jsxs(Text, { children: [_jsx(Text, { color: theme.colors.text, children: "a" }), " - Add to Playlist", _jsx(Text, { children: " | " }), _jsx(Text, { color: theme.colors.text, children: "d" }), " - Remove from Playlist", _jsx(Text, { children: " | " }), _jsx(Text, { color: theme.colors.text, children: "c" }), " - Create Playlist", _jsx(Text, { children: " | " }), _jsx(Text, { color: theme.colors.text, children: "D" }), " - Delete Playlist"] }) }), _jsxs(Text, { color: theme.colors.dim, children: ["Press ", _jsx(Text, { color: theme.colors.text, children: "Esc" }), " or", ' ', _jsx(Text, { color: theme.colors.text, children: "?" }), " to close"] })] })] }));
+}

package/dist/source/components/common/ShortcutsBar.d.ts

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

package/dist/source/components/common/ShortcutsBar.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Shortcuts bar component
+import { Box, Text } from 'ink';
+import { useCallback } from 'react';
+import { usePlayer } from "../../hooks/usePlayer.js";
+import { useNavigation } from "../../hooks/useNavigation.js";
+import { useTheme } from "../../hooks/useTheme.js";
+import { useKeyBinding } from "../../hooks/useKeyboard.js";
+import { KEYBINDINGS } from "../../utils/constants.js";
+export default function ShortcutsBar() {
+    const { theme } = useTheme();
+    const { dispatch: navDispatch } = useNavigation();
+    const { state: playerState, pause, resume, next, previous, volumeUp, volumeDown, } = usePlayer();
+    // Register key bindings globally
+    const handlePlayPause = () => {
+        if (playerState.isPlaying) {
+            pause();
+        }
+        else {
+            resume();
+        }
+    };
+    const goConfig = useCallback(() => {
+        navDispatch({ category: 'NAVIGATE', view: 'config' });
+    }, [navDispatch]);
+    useKeyBinding(KEYBINDINGS.PLAY_PAUSE, handlePlayPause);
+    useKeyBinding(KEYBINDINGS.NEXT, next);
+    useKeyBinding(KEYBINDINGS.PREVIOUS, previous);
+    useKeyBinding(KEYBINDINGS.VOLUME_UP, volumeUp);
+    useKeyBinding(KEYBINDINGS.VOLUME_DOWN, volumeDown);
+    useKeyBinding(KEYBINDINGS.SETTINGS, goConfig);
+    return (_jsxs(Box, { borderStyle: "single", borderColor: theme.colors.dim, paddingX: 1, justifyContent: "space-between", children: [_jsxs(Text, { color: theme.colors.dim, children: ["Shortcuts: ", _jsx(Text, { color: theme.colors.text, children: "Space" }), " Play/Pause |", ' ', _jsx(Text, { color: theme.colors.text, children: "n" }), " Next |", ' ', _jsx(Text, { color: theme.colors.text, children: "p" }), " Previous |", ' ', _jsx(Text, { color: theme.colors.text, children: "/" }), " Search |", ' ', _jsx(Text, { color: theme.colors.text, children: "," }), " Settings |", ' ', _jsx(Text, { color: theme.colors.text, children: "?" }), " Help |", ' ', _jsx(Text, { color: theme.colors.text, children: "q" }), " Quit"] }), _jsxs(Text, { color: theme.colors.text, children: [_jsx(Text, { color: theme.colors.dim, children: "[=/" }), "-", _jsx(Text, { color: theme.colors.dim, children: "]" }), " Vol:", ' ', _jsxs(Text, { color: theme.colors.primary, children: [playerState.volume, "%"] })] })] }));
+}

package/dist/source/components/config/ConfigLayout.d.ts

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

package/dist/source/components/config/ConfigLayout.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Config screen layout
+import { Box, Text } from 'ink';
+import { useState, useCallback } from 'react';
+import { useTheme } from "../../hooks/useTheme.js";
+import { useKeyBinding } from "../../hooks/useKeyboard.js";
+import { useNavigation } from "../../hooks/useNavigation.js";
+import { KEYBINDINGS } from "../../utils/constants.js";
+import { getConfigService } from "../../services/config/config.service.js";
+export default function ConfigLayout() {
+    const { theme, setTheme } = useTheme();
+    const { dispatch } = useNavigation();
+    const [selectedSection, setSelectedSection] = useState('theme');
+    const config = getConfigService();
+    // Navigate sections
+    const goUp = useCallback(() => {
+        const sections = ['theme', 'quality', 'volumeStep'];
+        const currentIndex = sections.indexOf(selectedSection);
+        if (currentIndex > 0) {
+            setSelectedSection(sections[currentIndex - 1]);
+        }
+    }, [selectedSection]);
+    const goDown = useCallback(() => {
+        const sections = ['theme', 'quality', 'volumeStep'];
+        const currentIndex = sections.indexOf(selectedSection);
+        if (currentIndex < sections.length - 1) {
+            setSelectedSection(sections[currentIndex + 1]);
+        }
+    }, [selectedSection]);
+    // Handle Enter key based on selected section
+    const handleSelect = useCallback(() => {
+        if (selectedSection === 'theme') {
+            const themes = ['dark', 'light', 'midnight', 'matrix'];
+            const currentTheme = theme.name;
+            const currentIndex = themes.indexOf(currentTheme);
+            const nextIndex = (currentIndex + 1) % themes.length;
+            const nextTheme = themes[nextIndex];
+            setTheme(nextTheme);
+            config.set('theme', nextTheme);
+        }
+        else if (selectedSection === 'quality') {
+            const qualities = ['low', 'medium', 'high'];
+            const currentQuality = config.get('streamQuality');
+            const currentIndex = qualities.indexOf(currentQuality);
+            const nextIndex = (currentIndex + 1) % qualities.length;
+            config.set('streamQuality', qualities[nextIndex]);
+        }
+    }, [selectedSection, config, theme, setTheme]);
+    // Change volume step
+    const increaseVolumeStep = useCallback(() => {
+        if (selectedSection === 'volumeStep') {
+            const current = config.get('volume');
+            if (current < 100) {
+                config.set('volume', Math.min(100, current + 10));
+            }
+        }
+    }, [selectedSection, config]);
+    const decreaseVolumeStep = useCallback(() => {
+        if (selectedSection === 'volumeStep') {
+            const current = config.get('volume');
+            if (current > 0) {
+                config.set('volume', Math.max(0, current - 10));
+            }
+        }
+    }, [selectedSection, config]);
+    // Go back
+    const goBack = useCallback(() => {
+        dispatch({ category: 'GO_BACK' });
+    }, [dispatch]);
+    useKeyBinding(KEYBINDINGS.UP, goUp);
+    useKeyBinding(KEYBINDINGS.DOWN, goDown);
+    useKeyBinding(KEYBINDINGS.SELECT, handleSelect);
+    useKeyBinding(KEYBINDINGS.VOLUME_UP, increaseVolumeStep);
+    useKeyBinding(KEYBINDINGS.VOLUME_DOWN, decreaseVolumeStep);
+    useKeyBinding(KEYBINDINGS.BACK, goBack);
+    const currentTheme = theme.name;
+    const currentQuality = config.get('streamQuality') || 'high';
+    const currentVolume = config.get('volume') || 70;
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { borderStyle: "single", borderColor: theme.colors.secondary, paddingX: 1, children: _jsx(Text, { bold: true, color: theme.colors.primary, children: "Settings" }) }), _jsxs(Box, { paddingX: 1, borderStyle: "single", borderColor: selectedSection === 'theme' ? theme.colors.primary : theme.colors.dim, children: [_jsxs(Text, { color: theme.colors.text, children: ["Theme: ", _jsx(Text, { color: theme.colors.primary, children: currentTheme })] }), selectedSection === 'theme' && (_jsx(Text, { color: theme.colors.dim, children: " (Press Enter to cycle)" }))] }), _jsxs(Box, { paddingX: 1, borderStyle: "single", borderColor: selectedSection === 'quality'
+                    ? theme.colors.primary
+                    : theme.colors.dim, children: [_jsxs(Text, { color: theme.colors.text, children: ["Stream Quality:", ' ', _jsx(Text, { color: theme.colors.primary, children: currentQuality })] }), selectedSection === 'quality' && (_jsx(Text, { color: theme.colors.dim, children: " (Press Enter to cycle)" }))] }), _jsxs(Box, { paddingX: 1, borderStyle: "single", borderColor: selectedSection === 'volumeStep'
+                    ? theme.colors.primary
+                    : theme.colors.dim, children: [_jsxs(Text, { color: theme.colors.text, children: ["Default Volume:", ' ', _jsxs(Text, { color: theme.colors.primary, children: [currentVolume, "%"] })] }), selectedSection === 'volumeStep' && (_jsx(Text, { color: theme.colors.dim, children: " (Press =/- to adjust)" }))] })] }));
+}

package/dist/source/components/layouts/MainLayout.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+declare function MainLayout(): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof MainLayout>;
+export default _default;

package/dist/source/components/layouts/MainLayout.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Main layout shell
+import { useCallback, useMemo } from 'react';
+import React from 'react';
+import { useNavigation } from "../../hooks/useNavigation.js";
+import PlaylistList from "../playlist/PlaylistList.js";
+import Help from "../common/Help.js";
+import { useTheme } from "../../hooks/useTheme.js";
+import { useKeyBinding } from "../../hooks/useKeyboard.js";
+import SearchLayout from "./SearchLayout.js";
+import PlayerLayout from "./PlayerLayout.js";
+import PluginsLayout from "./PluginsLayout.js";
+import Suggestions from "../player/Suggestions.js";
+import Settings from "../settings/Settings.js";
+import ConfigLayout from "../config/ConfigLayout.js";
+import ShortcutsBar from "../common/ShortcutsBar.js";
+import { KEYBINDINGS, VIEW } from "../../utils/constants.js";
+import { Box } from 'ink';
+import { useTerminalSize } from "../../hooks/useTerminalSize.js";
+function MainLayout() {
+    const { theme } = useTheme();
+    const { state: navState, dispatch } = useNavigation();
+    const { columns } = useTerminalSize();
+    // Responsive padding based on terminal size
+    const getPadding = () => (columns < 100 ? 0 : 1);
+    // Navigate to different views
+    const goToSearch = useCallback(() => {
+        dispatch({ category: 'NAVIGATE', view: VIEW.SEARCH });
+    }, [dispatch]);
+    const goToPlaylists = useCallback(() => {
+        dispatch({ category: 'NAVIGATE', view: VIEW.PLAYLISTS });
+    }, [dispatch]);
+    const goToSuggestions = useCallback(() => {
+        dispatch({ category: 'NAVIGATE', view: VIEW.SUGGESTIONS });
+    }, [dispatch]);
+    const goToSettings = useCallback(() => {
+        dispatch({ category: 'NAVIGATE', view: VIEW.SETTINGS });
+    }, [dispatch]);
+    const goToHelp = useCallback(() => {
+        dispatch({ category: 'NAVIGATE', view: VIEW.HELP });
+    }, [dispatch]);
+    const handleQuit = useCallback(() => {
+        // From player view, quit the app
+        if (navState.currentView === VIEW.PLAYER) {
+            process.exit(0);
+        }
+        // From other views, go back
+        dispatch({ category: 'GO_BACK' });
+    }, [navState.currentView, dispatch]);
+    // Global keyboard bindings
+    useKeyBinding(KEYBINDINGS.QUIT, handleQuit);
+    useKeyBinding(KEYBINDINGS.SEARCH, goToSearch);
+    useKeyBinding(KEYBINDINGS.PLAYLISTS, goToPlaylists);
+    useKeyBinding(KEYBINDINGS.SUGGESTIONS, goToSuggestions);
+    useKeyBinding(KEYBINDINGS.SETTINGS, goToSettings);
+    useKeyBinding(KEYBINDINGS.HELP, goToHelp);
+    // Memoize the view component to prevent unnecessary remounts
+    // Only recreate when currentView actually changes
+    const currentView = useMemo(() => {
+        switch (navState.currentView) {
+            case 'player':
+                return _jsx(PlayerLayout, {}, "player");
+            case 'search':
+                return _jsx(SearchLayout, {}, "search");
+            case 'playlists':
+                return _jsx(PlaylistList, {}, "playlists");
+            case 'suggestions':
+                return _jsx(Suggestions, {}, "suggestions");
+            case 'settings':
+                return _jsx(Settings, {}, "settings");
+            case 'plugins':
+                return _jsx(PluginsLayout, {}, "plugins");
+            case 'config':
+                return _jsx(ConfigLayout, {}, "config");
+            case 'help':
+                return _jsx(Help, {}, "help");
+            default:
+                return _jsx(PlayerLayout, {}, "player-default");
+        }
+    }, [navState.currentView]);
+    return (_jsxs(Box, { flexDirection: "column", paddingX: getPadding(), borderStyle: "single", borderColor: theme.colors.primary, children: [currentView, _jsx(ShortcutsBar, {})] }));
+}
+export default React.memo(MainLayout);

package/dist/source/components/layouts/PlayerLayout.d.ts

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

package/dist/source/components/layouts/PlayerLayout.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { usePlayer } from "../../hooks/usePlayer.js";
+import NowPlaying from "../player/NowPlaying.js";
+import ProgressBar from "../player/ProgressBar.js";
+import QueueList from "../player/QueueList.js";
+import { Box } from 'ink';
+export default function PlayerLayout() {
+    const { state: playerState } = usePlayer();
+    return (_jsxs(Box, { flexDirection: "column", gap: 1, children: [_jsx(NowPlaying, {}), _jsx(ProgressBar, {}), playerState.queue.length > 0 && _jsx(QueueList, {})] }));
+}

package/dist/source/components/layouts/PluginsLayout.d.ts

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

package/dist/source/components/layouts/PluginsLayout.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Plugins layout - main plugin management view
+import { useState, useCallback } from 'react';
+import { Box, Text } from 'ink';
+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";
+import PluginsList from "../plugins/PluginsList.js";
+import PluginInstallDialog from "../plugins/PluginInstallDialog.js";
+export default function PluginsLayout() {
+    const { theme } = useTheme();
+    const { state, dispatch, enablePlugin, disablePlugin, uninstallPlugin, updatePlugin, } = usePlugins();
+    const [viewMode, setViewMode] = useState('list');
+    const { installedPlugins, selectedIndex, isLoading, error, lastAction } = state;
+    // Navigation
+    const navigateUp = useCallback(() => {
+        if (viewMode === 'list') {
+            dispatch({
+                type: 'SET_SELECTED',
+                index: Math.max(0, selectedIndex - 1),
+            });
+        }
+    }, [viewMode, selectedIndex, dispatch]);
+    const navigateDown = useCallback(() => {
+        if (viewMode === 'list') {
+            dispatch({
+                type: 'SET_SELECTED',
+                index: Math.min(installedPlugins.length - 1, selectedIndex + 1),
+            });
+        }
+    }, [viewMode, selectedIndex, installedPlugins.length, dispatch]);
+    // Actions
+    const togglePlugin = useCallback(async () => {
+        const plugin = installedPlugins[selectedIndex];
+        if (!plugin)
+            return;
+        if (plugin.enabled) {
+            await disablePlugin(plugin.manifest.id);
+        }
+        else {
+            await enablePlugin(plugin.manifest.id);
+        }
+    }, [installedPlugins, selectedIndex, enablePlugin, disablePlugin]);
+    const removePlugin = useCallback(async () => {
+        const plugin = installedPlugins[selectedIndex];
+        if (!plugin)
+            return;
+        await uninstallPlugin(plugin.manifest.id);
+    }, [installedPlugins, selectedIndex, uninstallPlugin]);
+    const handleUpdate = useCallback(async () => {
+        const plugin = installedPlugins[selectedIndex];
+        if (!plugin)
+            return;
+        await updatePlugin(plugin.manifest.id);
+    }, [installedPlugins, selectedIndex, updatePlugin]);
+    const openInstall = useCallback(() => {
+        setViewMode('install');
+    }, []);
+    const closeInstall = useCallback(() => {
+        setViewMode('list');
+    }, []);
+    // Key bindings
+    useKeyBinding(KEYBINDINGS.UP, navigateUp);
+    useKeyBinding(KEYBINDINGS.DOWN, navigateDown);
+    useKeyBinding(['e'], togglePlugin);
+    useKeyBinding(['r'], removePlugin);
+    useKeyBinding(['u'], handleUpdate);
+    useKeyBinding(['i'], openInstall);
+    // Show install dialog
+    if (viewMode === 'install') {
+        return _jsx(PluginInstallDialog, { onClose: closeInstall });
+    }
+    // Get selected plugin details
+    const selectedPlugin = installedPlugins[selectedIndex];
+    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: "Plugin Manager" }) }), isLoading && (_jsx(Box, { paddingX: 1, children: _jsx(Text, { color: theme.colors.warning, children: "Loading..." }) })), error && (_jsx(Box, { paddingX: 1, children: _jsxs(Text, { color: theme.colors.error, children: ["Error: ", error] }) })), lastAction && !error && (_jsx(Box, { paddingX: 1, children: _jsxs(Text, { color: theme.colors.success, children: ["\u2713 ", lastAction] }) })), _jsx(PluginsList, { plugins: installedPlugins, selectedIndex: selectedIndex }), selectedPlugin && (_jsxs(Box, { flexDirection: "column", borderStyle: "single", borderColor: theme.colors.dim, paddingX: 1, marginTop: 1, children: [_jsx(Text, { bold: true, color: theme.colors.secondary, children: selectedPlugin.manifest.name }), _jsx(Text, { color: theme.colors.dim, children: selectedPlugin.manifest.description }), _jsxs(Text, { color: theme.colors.dim, children: ["Author: ", selectedPlugin.manifest.author] }), _jsxs(Text, { color: theme.colors.dim, children: ["Permissions: ", selectedPlugin.manifest.permissions.join(', ')] })] })), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: theme.colors.dim, children: [_jsx(Text, { color: theme.colors.text, children: "i" }), "=Install", ' ', _jsx(Text, { color: theme.colors.text, children: "e" }), "=Enable/Disable", ' ', _jsx(Text, { color: theme.colors.text, children: "r" }), "=Remove", ' ', _jsx(Text, { color: theme.colors.text, children: "u" }), "=Update", ' ', _jsx(Text, { color: theme.colors.text, children: "Esc" }), "=Back"] }) })] }));
+}

package/dist/source/components/layouts/SearchLayout.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+declare function SearchLayout(): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof SearchLayout>;
+export default _default;

package/dist/source/components/layouts/SearchLayout.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Search view layout
+import { useNavigation } from "../../hooks/useNavigation.js";
+import { useYouTubeMusic } from "../../hooks/useYouTubeMusic.js";
+import SearchResults from "../search/SearchResults.js";
+import { useState, useCallback, useEffect } from 'react';
+import React from 'react';
+import { useTheme } from "../../hooks/useTheme.js";
+import SearchBar from "../search/SearchBar.js";
+import { useKeyBinding } from "../../hooks/useKeyboard.js";
+import { KEYBINDINGS } from "../../utils/constants.js";
+import { Box, Text } from 'ink';
+function SearchLayout() {
+    const { theme } = useTheme();
+    const { state: navState, dispatch } = useNavigation();
+    const { isLoading, error, search } = useYouTubeMusic();
+    const [results, setResults] = useState([]);
+    const [isTyping, setIsTyping] = useState(true);
+    const [isSearching, setIsSearching] = useState(false);
+    // Handle search action
+    const performSearch = useCallback(async (query) => {
+        if (!query || isSearching)
+            return;
+        setIsSearching(true);
+        const response = await search(query, {
+            type: navState.searchType,
+            limit: navState.searchLimit,
+        });
+        if (response) {
+            setResults(response.results);
+            dispatch({ category: 'SET_SELECTED_RESULT', index: 0 });
+            dispatch({ category: 'SET_HAS_SEARCHED', hasSearched: true });
+            // Defer focus switch to avoid consuming the same Enter key
+            // Use longer delay to ensure key event has been fully processed
+            setTimeout(() => setIsTyping(false), 100);
+        }
+        setIsSearching(false);
+    }, [search, navState.searchType, navState.searchLimit, dispatch, isSearching]);
+    // Adjust results limit
+    const increaseLimit = useCallback(() => {
+        dispatch({ category: 'SET_SEARCH_LIMIT', limit: navState.searchLimit + 5 });
+    }, [navState.searchLimit, dispatch]);
+    const decreaseLimit = useCallback(() => {
+        dispatch({ category: 'SET_SEARCH_LIMIT', limit: navState.searchLimit - 5 });
+    }, [navState.searchLimit, dispatch]);
+    useKeyBinding(KEYBINDINGS.INCREASE_RESULTS, increaseLimit);
+    useKeyBinding(KEYBINDINGS.DECREASE_RESULTS, decreaseLimit);
+    // Initial search if query is in state (usually from CLI flags)
+    useEffect(() => {
+        if (navState.searchQuery && !navState.hasSearched) {
+            void performSearch(navState.searchQuery);
+        }
+        // We only want this to run once on mount or when searchQuery changes initially
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    // Handle going back
+    const goBack = useCallback(() => {
+        if (!isTyping) {
+            setIsTyping(true); // Back to typing if in results
+            dispatch({ category: 'SET_HAS_SEARCHED', hasSearched: false });
+        }
+        else {
+            dispatch({ category: 'GO_BACK' });
+        }
+    }, [isTyping, dispatch]);
+    useKeyBinding(KEYBINDINGS.BACK, goBack);
+    // Reset search state when leaving view
+    useEffect(() => {
+        return () => {
+            setResults([]);
+            dispatch({ category: 'SET_HAS_SEARCHED', hasSearched: false });
+            dispatch({ category: 'SET_SEARCH_QUERY', query: '' });
+        };
+    }, [dispatch]);
+    return (_jsxs(Box, { flexDirection: "column", gap: 1, children: [_jsxs(Box, { borderStyle: "single", borderColor: theme.colors.secondary, paddingX: 1, children: [_jsx(Text, { bold: true, color: theme.colors.primary, children: "Search" }), _jsxs(Text, { color: theme.colors.dim, children: [' ', "| Limit: ", navState.searchLimit, " (Use [ or ] to adjust)"] })] }), _jsx(SearchBar, { isActive: isTyping && !isSearching, onInput: input => {
+                    void performSearch(input);
+                } }), (isLoading || isSearching) && (_jsx(Text, { color: theme.colors.accent, children: "Searching..." })), error && _jsx(Text, { color: theme.colors.error, children: error }), !isLoading && navState.hasSearched && (_jsx(SearchResults, { results: results, selectedIndex: navState.selectedResult, isActive: !isTyping })), !isLoading && navState.hasSearched && results.length === 0 && !error && (_jsx(Text, { color: theme.colors.dim, children: "No results found" })), _jsx(Text, { color: theme.colors.dim, children: isTyping
+                    ? 'Type to search, Enter to start'
+                    : 'Arrows to navigate, Enter to play, Esc to type again' })] }));
+}
+export default React.memo(SearchLayout);

package/dist/source/components/player/NowPlaying.d.ts

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

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

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Now playing component
+import { Box, Text } from 'ink';
+import { usePlayer } from "../../hooks/usePlayer.js";
+import { useTheme } from "../../hooks/useTheme.js";
+import { formatTime } from "../../utils/format.js";
+import { useTerminalSize } from "../../hooks/useTerminalSize.js";
+export default function NowPlaying() {
+    const { theme } = useTheme();
+    const { state: playerState } = usePlayer();
+    const { columns } = useTerminalSize();
+    if (!playerState.currentTrack) {
+        return (_jsx(Box, { borderStyle: "round", borderColor: theme.colors.dim, padding: 1, marginY: 1, children: _jsx(Text, { color: theme.colors.dim, children: "No track playing" }) }));
+    }
+    const track = playerState.currentTrack;
+    const artists = track.artists?.map(a => a.name).join(', ') || 'Unknown Artist';
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: theme.colors.primary, padding: 1, marginY: 1, children: [_jsx(Text, { bold: true, color: theme.colors.primary, children: track.title }), _jsx(Text, { color: theme.colors.secondary, children: artists }), track.album && _jsx(Text, { color: theme.colors.dim, children: track.album.name }), _jsxs(Box, { marginTop: 1, children: [_jsx(Text, { color: theme.colors.text, children: formatTime(playerState.progress) }), _jsx(Text, { children: " " }), _jsxs(Text, { color: theme.colors.dim, children: ["[", Math.round((playerState.progress / (playerState.duration || 1)) * 100), "%]"] }), _jsx(Text, { children: " " }), _jsx(Text, { color: theme.colors.text, children: formatTime(playerState.duration) })] }), playerState.duration > 0 && (_jsxs(Box, { children: [_jsx(Text, { color: theme.colors.primary, children: '■'.repeat(Math.floor((playerState.progress / playerState.duration) * (columns - 10))) }), _jsx(Text, { color: theme.colors.dim, children: '-'.repeat(Math.max(0, columns -
+                            10 -
+                            Math.floor((playerState.progress / playerState.duration) *
+                                (columns - 10)))) })] })), playerState.isLoading && (_jsx(Text, { color: theme.colors.accent, children: "Loading..." })), playerState.error && (_jsx(Text, { color: theme.colors.error, children: playerState.error }))] }));
+}

package/dist/source/components/player/PlayerControls.d.ts

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

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

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Player controls component
+import { useKeyBinding } from "../../hooks/useKeyboard.js";
+import { KEYBINDINGS } from "../../utils/constants.js";
+import { usePlayer } from "../../hooks/usePlayer.js";
+import { useTheme } from "../../hooks/useTheme.js";
+import { Box, Text } from 'ink';
+import { useEffect } from 'react';
+import { logger } from "../../services/logger/logger.service.js";
+let mountCount = 0;
+export default function PlayerControls() {
+    const instanceId = ++mountCount;
+    useEffect(() => {
+        logger.debug('PlayerControls', 'Component mounted', { instanceId });
+        return () => {
+            logger.debug('PlayerControls', 'Component unmounted', { instanceId });
+        };
+    }, [instanceId]);
+    const { theme } = useTheme();
+    const { state: playerState, pause, resume, next, previous, volumeUp, volumeDown, } = usePlayer();
+    // DEBUG: Log when callbacks change (detect instability)
+    useEffect(() => {
+        // Temporarily output to stderr to debug without triggering Ink re-render
+        process.stderr.write(`[PlayerControls] volumeUp callback: ${typeof volumeUp}\n`);
+    }, [volumeUp, instanceId]);
+    const handlePlayPause = () => {
+        if (playerState.isPlaying) {
+            pause();
+        }
+        else {
+            resume();
+        }
+    };
+    // Keyboard bindings
+    useKeyBinding(KEYBINDINGS.PLAY_PAUSE, handlePlayPause);
+    useKeyBinding(KEYBINDINGS.NEXT, next);
+    useKeyBinding(KEYBINDINGS.PREVIOUS, previous);
+    useKeyBinding(KEYBINDINGS.VOLUME_UP, volumeUp);
+    useKeyBinding(KEYBINDINGS.VOLUME_DOWN, volumeDown);
+    return (_jsxs(Box, { flexDirection: "row", justifyContent: "space-between", paddingX: 2, borderStyle: "classic", borderColor: theme.colors.dim, children: [_jsxs(Text, { color: theme.colors.text, children: ["[", _jsx(Text, { color: theme.colors.dim, children: "b" }), "] Prev"] }), _jsx(Text, { color: theme.colors.primary, children: playerState.isPlaying ? (_jsxs(Text, { children: ["[", _jsx(Text, { color: theme.colors.dim, children: "Space" }), "] Pause"] })) : (_jsxs(Text, { children: ["[", _jsx(Text, { color: theme.colors.dim, children: "Space" }), "] Play"] })) }), _jsxs(Text, { color: theme.colors.text, children: ["[", _jsx(Text, { color: theme.colors.dim, children: "n" }), "] Next"] }), _jsxs(Text, { color: theme.colors.text, children: ["[", _jsx(Text, { color: theme.colors.dim, children: "+/-" }), "] Vol: ", playerState.volume, "%"] })] }));
+}

package/dist/source/components/player/ProgressBar.d.ts

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

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

@@ -0,0 +1,18 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+// Progress bar component
+import { Box, Text } from 'ink';
+import { useTheme } from "../../hooks/useTheme.js";
+import { usePlayer } from "../../hooks/usePlayer.js";
+import { formatTime } from "../../utils/format.js";
+export default function ProgressBar() {
+    const { theme } = useTheme();
+    const { state: playerState } = usePlayer();
+    if (!playerState.currentTrack || !playerState.duration) {
+        return null;
+    }
+    const progress = playerState.progress;
+    const duration = playerState.duration;
+    const percentage = duration > 0 ? Math.floor((progress / duration) * 100) : 0;
+    const barWidth = Math.max(0, Math.min(20, Math.floor(percentage / 5))); // 20 chars max, bounds checked
+    return (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Box, { children: [_jsxs(Text, { color: theme.colors.text, children: [formatTime(progress), " / ", formatTime(duration)] }), _jsxs(Text, { color: theme.colors.dim, children: [" ", percentage, "%"] })] }), _jsxs(Box, { children: [_jsx(Text, { color: theme.colors.primary, children: '■'.repeat(barWidth) }), _jsx(Text, { color: theme.colors.dim, children: '-'.repeat(20 - barWidth) })] })] }));
+}

package/dist/source/components/player/QueueList.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+declare function QueueList(): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof QueueList>;
+export default _default;

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

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Queue management component
+import { useState } from 'react';
+import React from 'react';
+import { Box, Text } from 'ink';
+import { useTheme } from "../../hooks/useTheme.js";
+import { usePlayer } from "../../hooks/usePlayer.js";
+import { truncate } from "../../utils/format.js";
+import { useTerminalSize } from "../../hooks/useTerminalSize.js";
+function QueueList() {
+    const { theme } = useTheme();
+    const { state: playerState } = usePlayer();
+    const { columns } = useTerminalSize();
+    const [selectedIndex, _setSelectedIndex] = useState(0);
+    // Calculate responsive truncation
+    const getTruncateLength = (baseLength) => {
+        const scale = Math.min(1, columns / 100);
+        return Math.max(20, Math.floor(baseLength * scale));
+    };
+    if (playerState.queue.length === 0) {
+        return (_jsx(Box, { paddingX: 1, children: _jsx(Text, { color: theme.colors.dim, children: "Queue is empty" }) }));
+    }
+    return (_jsxs(Box, { flexDirection: "column", gap: 1, children: [_jsx(Box, { borderStyle: "double", borderColor: theme.colors.secondary, paddingX: 1, marginBottom: 1, children: _jsxs(Text, { bold: true, color: theme.colors.primary, children: ["Queue (", playerState.queue.length, " tracks)"] }) }), playerState.queue.map((track, index) => {
+                const isSelected = index === selectedIndex;
+                const artists = track.artists?.map(a => a.name).join(', ') || 'Unknown';
+                const title = truncate(track.title, getTruncateLength(50));
+                return (_jsxs(Box, { paddingX: 1, borderStyle: isSelected ? 'double' : undefined, borderColor: isSelected ? theme.colors.primary : undefined, children: [_jsxs(Text, { color: theme.colors.dim, children: [index + 1, "."] }), _jsx(Text, { color: isSelected ? theme.colors.primary : theme.colors.text, bold: isSelected, children: title }), _jsxs(Text, { color: theme.colors.dim, children: [' - ', artists] })] }, track.videoId));
+            })] }));
+}
+export default React.memo(QueueList);

package/dist/source/components/player/Suggestions.d.ts

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