@ciphore/radiocli 0.2.0 → 0.2.1

package/dist/ui/screen-items.js

@@ -4,29 +4,67 @@ export const homeItems = [
     { screen: 'explore', label: 'Explore', detail: 'Move a map cursor through geotagged stations' },
     { screen: 'search', label: 'Search', detail: 'Find stations by name, genre, language, place' },
     { screen: 'countries', label: 'Countries', detail: 'Browse by country list with a world-map toggle' },
-    { screen: 'nearby', label: 'Nearby', detail: 'Opt-in approximate location for local stations' },
+    { screen: 'nearby', label: 'Nearby', detail: 'Approximate IP location for local stations' },
     { screen: 'stats', label: 'Stats', detail: 'Listening graph, stations, streaks, hours' },
     { screen: 'settings', label: 'Settings', detail: 'Audio output, colors, providers' }
 ];
-export const settingsItems = [
-    'Cycle display color',
-    'Cycle receiver style',
-    'Toggle Radio Garden experimental adapter',
-    'Toggle nearby location lookup',
-    'Audio output',
-    'AirPlay receiver',
-    'Volume up',
-    'Volume down',
-    'Mute or unmute',
-    'Toggle skip broken streams',
-    'Resume last station on launch',
-    'Transparent background',
-    'ASCII-safe display',
-    'Reduce motion',
-    'Check for updates',
-    'Refresh provider health',
-    'Learn previous media key',
-    'Learn play/pause media key',
-    'Learn next media key',
-    'Reset learned media keys'
+export const settingsGroups = [
+    {
+        label: 'Playback',
+        items: [
+            'Audio output',
+            'AirPlay receiver',
+            'Volume up',
+            'Volume down',
+            'Mute or unmute',
+            'Toggle skip broken streams',
+            'Resume last station on launch'
+        ]
+    },
+    {
+        label: 'Display',
+        items: [
+            'Cycle display color',
+            'Cycle receiver style',
+            'Transparent background',
+            'ASCII-safe display',
+            'Reduce motion',
+            'Mouse and trackpad scrolling'
+        ]
+    },
+    {
+        label: 'Discovery & privacy',
+        items: [
+            'Toggle nearby location lookup',
+            'Toggle Radio Garden experimental adapter',
+            'Share favorite votes with Radio Browser'
+        ]
+    },
+    {
+        label: 'Data',
+        items: [
+            'Export preferences and library',
+            'Import preferences and library'
+        ]
+    },
+    {
+        label: 'Media keys',
+        items: [
+            'Learn previous media key',
+            'Learn play/pause media key',
+            'Learn next media key',
+            'Reset learned media keys'
+        ]
+    },
+    {
+        label: 'Maintenance',
+        items: [
+            'Refresh provider health',
+            'Check for updates'
+        ]
+    }
 ];
+export const settingsItems = settingsGroups.flatMap(group => group.items);
+export function settingsSectionFor(item) {
+    return settingsGroups.find(group => group.items.some(candidate => candidate === item))?.label ?? 'Preferences';
+}

package/dist/ui/screen-meta.js

@@ -0,0 +1,35 @@
+export const primaryScreens = [
+    'home',
+    'now-playing',
+    'library',
+    'explore',
+    'search',
+    'countries',
+    'nearby',
+    'stats',
+    'settings'
+];
+export const screenMetadata = {
+    home: { tabLabel: 'Overview', title: 'Overview', description: 'Your listening at a glance' },
+    'now-playing': { tabLabel: 'Playing', title: 'Now playing', description: 'Receiver and playback controls' },
+    library: { tabLabel: 'Library', title: 'Library', description: 'Favorites, recents, and imported streams' },
+    explore: { tabLabel: 'Explore', title: 'Explore', description: 'Discover stations on the world map' },
+    search: { tabLabel: 'Search', title: 'Search', description: 'Find stations, genres, languages, or places' },
+    countries: { tabLabel: 'Countries', title: 'Countries', description: 'Browse stations by country' },
+    nearby: { tabLabel: 'Nearby', title: 'Nearby', description: 'Find stations near your approximate location' },
+    stats: { tabLabel: 'Stats', title: 'Listening stats', description: 'History, streaks, stations, and time' },
+    settings: { tabLabel: 'Settings', title: 'Settings', description: 'Playback, display, privacy, and data' }
+};
+const secondaryTitles = {
+    stations: 'Stations',
+    map: 'World map',
+    'airplay-settings': 'AirPlay',
+    'airplay-code': 'AirPlay code',
+    help: 'Help'
+};
+export function screenTitle(screen) {
+    if (screen in screenMetadata) {
+        return screenMetadata[screen].title;
+    }
+    return secondaryTitles[screen] ?? 'RadioCLI';
+}

package/dist/ui/screens/AirPlaySettingsScreen.js

@@ -6,7 +6,8 @@ import { Menu, Pointer } from '../components/Menu.js';
 import { ScreenHeader } from '../components/ScreenHeader.js';
 import { truncate } from '../format.js';
 import { textDim, textMuted, themeAccent } from '../theme.js';
-export function AirPlaySettingsScreen({ selected, settings, backends, devices, theme, width }) {
+import { visibleWindow } from '../list-window.js';
+export function AirPlaySettingsScreen({ selected, settings, backends, devices, theme, width, height }) {
     const accent = themeAccent(theme);
     const availability = airPlayAvailability(backends, devices);
     const selectedDevice = selectedAirPlayDevice(settings, devices);
@@ -14,7 +15,8 @@ export function AirPlaySettingsScreen({ selected, settings, backends, devices, t
     const canEnterCode = availability.ready && selectedDevice?.requiresPassword && !selectedDevice.local;
     const lineWidth = Math.max(24, width - 4);
     const preferredOutput = audioOutputLabel(settings.preferredBackend);
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(ScreenHeader, { title: "AirPlay", subtitle: "Choose where AirPlay playback should go", right: availability.label, width: width, theme: theme }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsxs(Text, { color: textMuted, children: ["Audio output: ", _jsx(Text, { color: accent, children: preferredOutput }), " \u00B7 Streaming:", ' ', _jsx(Text, { color: availability.ready ? accent : 'yellow', children: availability.ready ? 'ready' : 'unavailable' }), " \u00B7 Receivers:", ' ', _jsx(Text, { color: accent, children: devices.length })] }), _jsx(Text, { color: availability.ready ? textMuted : 'yellow', children: truncate(availability.detail, lineWidth) }), _jsxs(Text, { color: textMuted, children: ["Selected: ", _jsx(Text, { color: selectedDevice ? accent : textDim, children: truncate(selectedDevice?.name ?? 'none', Math.max(4, lineWidth - 10)) })] }), availability.ready && selectedDevice?.requiresPassword && !selectedDevice.local ? (_jsxs(Text, { color: textMuted, children: ["Code: ", _jsx(Text, { color: accent, children: "if the receiver shows a code while tuning, RadioCLI will ask for it" })] })) : null, selectedMissing ? (_jsxs(Text, { color: "yellow", children: ["Saved receiver is not visible: ", truncate(settings.preferredAirPlayDevice ?? '', Math.max(8, lineWidth - 31))] })) : null] }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { color: textMuted, bold: true, children: "Receivers" }), devices.length > 0 ? (_jsx(Menu, { items: devices, selected: selected, keyFor: device => device.id, render: (device, _index, active) => {
+    const deviceWindow = visibleWindow(devices, selected, height ? Math.max(1, height - 9) : Math.max(1, devices.length));
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(ScreenHeader, { title: "AirPlay", subtitle: "Choose where AirPlay playback should go", right: availability.label, width: width, theme: theme }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsxs(Text, { color: textMuted, children: ["Audio output: ", _jsx(Text, { color: accent, children: preferredOutput }), " \u00B7 Streaming:", ' ', _jsx(Text, { color: availability.ready ? accent : 'yellow', children: availability.ready ? 'ready' : 'unavailable' }), " \u00B7 Receivers:", ' ', _jsx(Text, { color: accent, children: devices.length })] }), _jsx(Text, { color: availability.ready ? textMuted : 'yellow', children: truncate(availability.detail, lineWidth) }), _jsxs(Text, { color: textMuted, children: ["Selected: ", _jsx(Text, { color: selectedDevice ? accent : textDim, children: truncate(selectedDevice?.name ?? 'none', Math.max(4, lineWidth - 10)) })] }), availability.ready && selectedDevice?.requiresPassword && !selectedDevice.local ? (_jsxs(Text, { color: textMuted, children: ["Code: ", _jsx(Text, { color: accent, children: "if the receiver shows a code while tuning, RadioCLI will ask for it" })] })) : null, selectedMissing ? (_jsxs(Text, { color: "yellow", children: ["Saved receiver is not visible: ", truncate(settings.preferredAirPlayDevice ?? '', Math.max(8, lineWidth - 31))] })) : null] }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { color: textMuted, bold: true, children: "Receivers" }), devices.length > 0 ? (_jsx(Menu, { items: deviceWindow.items, selected: selected - deviceWindow.start, keyFor: device => device.id, render: (device, _index, active) => {
                             const isSelected = device.id === settings.preferredAirPlayDevice;
                             const name = truncate(device.name, Math.max(8, Math.floor(lineWidth * 0.35)));
                             const selectedLabel = isSelected ? ' selected' : '';

package/dist/ui/screens/CountriesScreen.js

@@ -4,13 +4,16 @@ import { Menu, Pointer } from '../components/Menu.js';
 import { ScreenHeader } from '../components/ScreenHeader.js';
 import { textMuted, themeAccent } from '../theme.js';
 import { visibleWindow } from '../list-window.js';
-import { truncate } from '../format.js';
+import { displayWidth, truncate } from '../format.js';
 export function CountriesScreen({ countries, selected, loading, filter, editingFilter, theme, pageSize, width }) {
     const window = visibleWindow(countries, selected, pageSize);
     const rowWidth = Math.max(24, width - 2);
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(ScreenHeader, { title: "Countries", subtitle: editingFilter ? 'Filtering countries — type to narrow the list' : 'Browse the worldwide country directory', width: width, theme: theme, right: `filter: ${filter || 'all'}` }), loading ? _jsx(Text, { color: textMuted, children: "Loading countries from Radio Browser\u2026" }) : null, !loading ? (_jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsxs(Text, { color: textMuted, children: ["Showing ", countries.length ? window.start + 1 : 0, "-", window.end, " of ", countries.length] }), _jsx(Menu, { items: window.items, selected: selected - window.start, keyFor: country => country.code, render: (country, _index, active) => {
-                            const meta = ` · ${country.code} · ${country.stationCount.toLocaleString()} stations`;
-                            const nameWidth = Math.max(4, rowWidth - 2 - meta.length);
-                            return (_jsxs(Box, { height: 1, width: rowWidth, children: [_jsx(Pointer, { active: active }), _jsx(Text, { color: active ? themeAccent(theme) : undefined, bold: active, children: truncate(country.name, nameWidth) }), _jsx(Text, { color: textMuted, children: truncate(meta, Math.max(0, rowWidth - 2 - nameWidth)) })] }));
+    const countWidth = Math.max(12, Math.min(22, Math.max(...countries.map(country => `${country.stationCount.toLocaleString()} stations`.length), 12)));
+    const visibleCountryWidth = Math.max(8, ...window.items.map(country => displayWidth(`${country.name} (${country.code})`)));
+    const countryWidth = Math.min(42, visibleCountryWidth, Math.max(8, rowWidth - countWidth - 4));
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(ScreenHeader, { title: "Countries", subtitle: editingFilter ? 'Filtering countries — type to narrow the list' : 'Browse the worldwide country directory', width: width, theme: theme, right: filter ? `filter: ${filter}` : undefined }), loading ? _jsx(Text, { color: textMuted, children: "Loading countries from Radio Browser\u2026" }) : null, !loading ? (_jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsxs(Text, { color: textMuted, children: ["Showing ", countries.length ? window.start + 1 : 0, "-", window.end, " of ", countries.length] }), _jsx(Menu, { items: window.items, selected: selected - window.start, keyFor: country => country.code, render: (country, _index, active) => {
+                            const code = ` (${country.code})`;
+                            const nameWidth = Math.max(3, countryWidth - displayWidth(code));
+                            return (_jsxs(Box, { height: 1, width: rowWidth, children: [_jsx(Pointer, { active: active }), _jsxs(Box, { width: countryWidth, children: [_jsx(Text, { color: active ? themeAccent(theme) : undefined, bold: active, children: truncate(country.name, nameWidth) }), _jsx(Text, { color: textMuted, children: code })] }), _jsx(Box, { width: 2 }), _jsx(Box, { width: countWidth, children: _jsxs(Text, { color: textMuted, children: [country.stationCount.toLocaleString(), " stations"] }) })] }));
                         } })] })) : null] }));
 }

package/dist/ui/screens/ExploreScreen.js

@@ -13,7 +13,7 @@ export function ExploreScreen({ title, subtitle, stations, selected, loading, th
     const { contentWidth, headerRows, bodyRows, split, listPanelWidth, mapPanelWidth, mapRows, mapColumns, listRows, listPageSize } = computeExploreMapLayout(width, height, pageSize);
     const cursorMarker = React.useMemo(() => [{ lat: cursor.latitude, lon: cursor.longitude, selected: true }], [cursor.latitude, cursor.longitude]);
     const map = React.useMemo(() => buildCosmoWorldMap(mapColumns, mapRows, cursorMarker), [mapColumns, mapRows, cursorMarker]);
-    return (_jsxs(Box, { flexDirection: "column", height: height, width: contentWidth, overflow: "hidden", flexShrink: 0, children: [_jsx(Box, { height: headerRows, flexDirection: "column", flexShrink: 0, children: _jsx(ScreenHeader, { title: title, subtitle: subtitle, width: contentWidth, theme: theme, right: filterLabel === 'none' ? undefined : `filters: ${filterLabel}` }) }), _jsxs(Box, { marginTop: 1, height: bodyRows, width: contentWidth, flexDirection: split ? 'row' : 'column', flexShrink: 0, children: [_jsx(Box, { borderStyle: panelBorderStyle(ascii, 'single'), borderColor: panelBorder, borderBackgroundColor: panelBackground, backgroundColor: panelBackground, width: mapPanelWidth, height: split ? bodyRows : mapRows + 2, flexDirection: "column", children: map.map((row, index) => (_jsx(CosmoMapLine, { row: row, theme: theme }, `map-${index}`))) }), _jsxs(Box, { marginLeft: split ? 1 : 0, marginTop: split ? 0 : 1, borderStyle: panelBorderStyle(ascii, 'single'), borderColor: panelBorder, borderBackgroundColor: panelBackground, backgroundColor: panelBackground, width: listPanelWidth, height: split ? bodyRows : Math.max(5, listRows + 2), flexDirection: "column", children: [_jsxs(Box, { justifyContent: "space-between", width: Math.max(20, listPanelWidth - 2), children: [_jsx(Text, { color: themeAccent(theme), bold: true, children: "Stations" }), _jsx(Text, { color: textMuted, children: stations.length.toLocaleString() })] }), _jsx(Box, { height: 1, flexShrink: 0, children: _jsx(Text, { color: textMuted, children: loading ? (ascii ? toAsciiSafe('Loading stations…') : 'Loading stations…') : ' ' }) }), !loading ? (_jsx(StationList, { stations: stations, selected: selected, theme: theme, favorites: favorites, pageSize: listPageSize, width: Math.max(42, listPanelWidth - 2) })) : null] })] })] }));
+    return (_jsxs(Box, { flexDirection: "column", height: height, width: contentWidth, overflow: "hidden", flexShrink: 0, children: [_jsx(Box, { height: headerRows, flexDirection: "column", flexShrink: 0, children: _jsx(ScreenHeader, { title: title, subtitle: subtitle, width: contentWidth, theme: theme, right: filterLabel === 'none' ? undefined : `filters: ${filterLabel}` }) }), _jsxs(Box, { marginTop: 1, height: bodyRows, width: contentWidth, flexDirection: split ? 'row' : 'column', flexShrink: 0, children: [_jsx(Box, { borderStyle: panelBorderStyle(ascii, 'single'), borderColor: panelBorder, borderBackgroundColor: panelBackground, backgroundColor: panelBackground, width: mapPanelWidth, height: split ? bodyRows : mapRows + 2, flexDirection: "column", children: map.map((row, index) => (_jsx(CosmoMapLine, { row: row, theme: theme }, `map-${index}`))) }), _jsxs(Box, { marginLeft: split ? 1 : 0, marginTop: split ? 0 : 1, borderStyle: panelBorderStyle(ascii, 'single'), borderColor: panelBorder, borderBackgroundColor: panelBackground, backgroundColor: panelBackground, width: listPanelWidth, height: split ? bodyRows : Math.max(5, listRows + 2), flexDirection: "column", children: [_jsxs(Box, { justifyContent: "space-between", width: Math.max(20, listPanelWidth - 2), children: [_jsx(Text, { color: themeAccent(theme), bold: true, children: "Stations" }), _jsx(Text, { color: textMuted, children: stations.length.toLocaleString() })] }), _jsx(Box, { height: 1, flexShrink: 0, children: _jsx(Text, { color: textMuted, children: loading ? (ascii ? toAsciiSafe('Loading stations…') : 'Loading stations…') : ' ' }) }), _jsx(StationList, { stations: stations, selected: selected, theme: theme, favorites: favorites, pageSize: listPageSize, width: Math.max(42, listPanelWidth - 2), showCount: false, emptyTitle: loading ? 'Loading stations…' : 'No stations near this point.', emptyHint: "Move the map cursor to explore another area." })] })] })] }));
 }
 function CosmoMapLine({ row, theme }) {
     const { ascii } = useDisplay();

package/dist/ui/screens/HelpScreen.js

@@ -3,10 +3,24 @@ import { Box, Text } from 'ink';
 import { textMuted, themeAccent } from '../theme.js';
 import { ScreenHeader } from '../components/ScreenHeader.js';
 import { commandHelp, keyHelpSections } from '../help-content.js';
-import { truncate } from '../format.js';
-export function HelpScreen({ theme, width }) {
+import { padDisplayEnd, truncate } from '../format.js';
+import { visibleWindow } from '../list-window.js';
+export function HelpScreen({ theme, width, height, selected }) {
     const accent = themeAccent(theme);
     const keyColumnWidth = 16;
     const lineWidth = Math.max(28, width - 2);
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(ScreenHeader, { title: "Help", subtitle: "Keyboard shortcuts and : commands \u00B7 b or Esc to close", width: width, theme: theme }), _jsx(Box, { marginTop: 1, flexDirection: "row", gap: 4, flexWrap: "wrap", children: keyHelpSections.map(section => (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsx(Text, { color: accent, bold: true, children: section.title }), section.entries.map(entry => (_jsxs(Text, { children: [_jsx(Text, { color: accent, children: entry.keys.padEnd(keyColumnWidth) }), _jsx(Text, { color: textMuted, children: entry.description })] }, entry.keys)))] }, section.title))) }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { color: accent, bold: true, children: "Commands (press : then type)" }), _jsx(Box, { flexDirection: "row", flexWrap: "wrap", columnGap: 3, children: commandHelp.map(command => (_jsx(Text, { color: textMuted, children: truncate(`:${command.name}${command.args ? ` ${command.args}` : ''}`, lineWidth) }, command.name))) })] })] }));
+    const rows = [
+        ...keyHelpSections.flatMap(section => [
+            { key: `section-${section.title}`, heading: section.title },
+            ...section.entries.map(entry => ({ key: `${section.title}-${entry.keys}`, ...entry }))
+        ]),
+        { key: 'commands', heading: 'Commands (press : then type)' },
+        ...commandHelp.map(command => ({
+            key: `command-${command.name}`,
+            keys: `:${command.name}${command.args ? ` ${command.args}` : ''}`,
+            description: command.description
+        }))
+    ];
+    const window = visibleWindow(rows, selected, Math.max(3, height - 4));
+    return (_jsxs(Box, { flexDirection: "column", height: height, overflow: "hidden", children: [_jsx(ScreenHeader, { title: "Help", subtitle: "Keyboard shortcuts and : commands \u00B7 b or Esc to close", width: width, theme: theme }), _jsx(Box, { marginTop: 1, flexDirection: "column", children: window.items.map(row => row.heading ? (_jsx(Text, { color: accent, bold: true, children: row.heading }, row.key)) : (_jsxs(Text, { children: [_jsx(Text, { color: accent, children: padDisplayEnd(truncate(row.keys ?? '', keyColumnWidth - 1), keyColumnWidth) }), _jsx(Text, { color: textMuted, children: truncate(row.description ?? '', Math.max(1, lineWidth - keyColumnWidth)) })] }, row.key))) }), _jsxs(Text, { color: textMuted, children: ["Showing ", window.start + 1, "-", window.end, " of ", rows.length, " \u00B7 \u2191/\u2193 scroll"] })] }));
 }

package/dist/ui/screens/HomeScreen.js

@@ -4,7 +4,6 @@ import { Logo } from '../components/Logo.js';
 import { Menu, Pointer } from '../components/Menu.js';
 import { textMuted, themeAccent } from '../theme.js';
 import { homeItems } from '../screen-items.js';
-import { playbackBackendLabel } from '../../player/backend-install.js';
-export function HomeScreen({ selected, theme, library, playback }) {
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Logo, {}), _jsxs(Text, { children: ["Receiver:", ' ', _jsx(Text, { color: themeAccent(theme), children: playback.state === 'playing' ? playback.message ?? 'playing' : playback.state }), _jsxs(Text, { color: textMuted, children: [" \u00B7 ", playbackBackendLabel(playback.backend)] })] }), _jsx(Box, { marginTop: 1, flexDirection: "column", children: _jsx(Menu, { items: homeItems, selected: selected, keyFor: item => item.screen, render: (item, index, active) => (_jsxs(Box, { children: [_jsx(Pointer, { active: active }), _jsxs(Text, { color: textMuted, children: [index + 1, " "] }), _jsx(Text, { color: active ? themeAccent(theme) : undefined, bold: active, children: item.label }), _jsxs(Text, { color: textMuted, children: [" \u00B7 ", item.detail] })] })) }) }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: textMuted, children: [library.recent.length, " recent \u00B7 ", library.favorites.length, " favorites \u00B7 ", library.imported.length, " imported"] }) })] }));
+export function HomeScreen({ selected, theme, library }) {
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Logo, {}), _jsx(Box, { marginTop: 1, flexDirection: "column", children: _jsx(Menu, { items: homeItems, selected: selected, keyFor: item => item.screen, render: (item, index, active) => (_jsxs(Box, { children: [_jsx(Pointer, { active: active }), _jsxs(Text, { color: textMuted, children: [index + 1, " "] }), _jsx(Text, { color: active ? themeAccent(theme) : undefined, bold: active, children: item.label }), _jsxs(Text, { color: textMuted, children: [" \u00B7 ", item.detail] })] })) }) }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: textMuted, children: [library.recent.length, " recent \u00B7 ", library.favorites.length, " favorites \u00B7 ", library.imported.length, " imported"] }) })] }));
 }

package/dist/ui/screens/MapScreen.js

@@ -6,7 +6,7 @@ import { toAsciiSafe } from '../ascii.js';
 import { visibleWindow } from '../list-window.js';
 import { Menu, Pointer } from '../components/Menu.js';
 import { ScreenHeader } from '../components/ScreenHeader.js';
-import { truncate } from '../format.js';
+import { padDisplayEnd, truncate } from '../format.js';
 import { buildWorldMap } from '../world-map.js';
 export function MapScreen({ countries, selected, loading, filter, editingFilter, theme, pageSize, mode, width }) {
     const { ascii } = useDisplay();
@@ -18,7 +18,7 @@ export function MapScreen({ countries, selected, loading, filter, editingFilter,
     const graph = buildWorldMap(countries, selectedCountry, mode, contentWidth);
     const topWidth = mode === 'full' ? 50 : contentWidth;
     const listWidth = Math.max(28, Math.min(contentWidth - topWidth - 4, 56));
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(ScreenHeader, { title: "World map", subtitle: editingFilter ? 'Filtering country list — type to narrow' : 'Station density by country', width: contentWidth, theme: theme, right: `filter: ${filter || 'all'}` }), loading ? _jsx(Text, { color: textMuted, children: asciify('Loading country density…') }) : null, _jsx(Box, { marginTop: 1, flexDirection: "column", children: graph.rows.map(row => (_jsx(MapLine, { row: row, theme: theme }, row.cells.map(cell => cell.char).join('')))) }), _jsx(Text, { color: textMuted, children: asciify(`${graph.plotted} plotted · ${graph.unplotted} unplaced · labels show highest station counts`) }), _jsxs(Box, { marginTop: 1, flexDirection: mode === 'full' ? 'row' : 'column', children: [_jsxs(Box, { width: topWidth, flexDirection: "column", children: [_jsx(Text, { color: textMuted, children: "Highest station counts" }), topCountries.map(country => (_jsxs(Text, { children: [_jsx(Text, { color: themeAccent(theme), children: country.code.padEnd(3) }), _jsx(Text, { children: truncate(country.name, 30).padEnd(31) }), _jsx(Text, { color: textMuted, children: country.stationCount.toLocaleString().padStart(7) })] }, country.code)))] }), _jsxs(Box, { marginLeft: mode === 'full' ? 3 : 0, marginTop: mode === 'full' ? 0 : 1, width: listWidth, flexDirection: "column", children: [_jsxs(Text, { children: ["Selected:", ' ', _jsx(Text, { color: themeAccent(theme), children: selectedCountry ? asciify(`${selectedCountry.name} · ${selectedCountry.stationCount.toLocaleString()}`) : 'none' })] }), _jsx(Menu, { items: window.items, selected: selected - window.start, keyFor: country => country.code, render: (country, _index, active) => (_jsxs(Box, { children: [_jsx(Pointer, { active: active }), _jsx(Text, { color: active ? themeAccent(theme) : undefined, bold: active, children: country.code }), _jsx(Text, { color: textMuted, children: asciify(` · ${truncate(country.name, Math.max(8, listWidth - 8))}`) })] })) })] })] })] }));
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(ScreenHeader, { title: "World map", subtitle: editingFilter ? 'Filtering country list — type to narrow' : 'Station density by country', width: contentWidth, theme: theme, right: filter ? `filter: ${filter}` : undefined }), loading ? _jsx(Text, { color: textMuted, children: asciify('Loading country density…') }) : null, _jsx(Box, { marginTop: 1, flexDirection: "column", children: graph.rows.map((row, index) => (_jsx(MapLine, { row: row, theme: theme }, `map-row-${index}`))) }), _jsx(Text, { color: textMuted, children: asciify(`${graph.plotted} plotted · ${graph.unplotted} unplaced · labels show highest station counts`) }), _jsxs(Box, { marginTop: 1, flexDirection: mode === 'full' ? 'row' : 'column', children: [_jsxs(Box, { width: topWidth, flexDirection: "column", children: [_jsx(Text, { color: textMuted, children: "Highest station counts" }), topCountries.map(country => (_jsxs(Text, { children: [_jsx(Text, { color: themeAccent(theme), children: country.code.padEnd(3) }), _jsx(Text, { children: padDisplayEnd(truncate(country.name, 30), 31) }), _jsx(Text, { color: textMuted, children: country.stationCount.toLocaleString().padStart(7) })] }, country.code)))] }), _jsx(Box, { marginLeft: mode === 'full' ? 3 : 0, marginTop: mode === 'full' ? 0 : 1, width: listWidth, flexDirection: "column", children: _jsx(Menu, { items: window.items, selected: selected - window.start, keyFor: country => country.code, render: (country, _index, active) => (_jsxs(Box, { children: [_jsx(Pointer, { active: active }), _jsx(Text, { color: active ? themeAccent(theme) : undefined, bold: active, children: country.code }), _jsx(Text, { color: textMuted, children: asciify(` · ${truncate(country.name, Math.max(8, listWidth - 8))}`) })] })) }) })] })] }));
 }
 function MapLine({ row, theme }) {
     const { ascii } = useDisplay();

package/dist/ui/screens/NowPlayingScreen.js

@@ -1,12 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from 'ink';
-import { stationLocation, stationTags, stationTech, truncate } from '../format.js';
+import { displayWidth, stationLocation, truncate } from '../format.js';
 import { textMuted, themeAccent } from '../theme.js';
 import { panelBorderStyle, useDisplay } from '../display-context.js';
 import { toAsciiSafe } from '../ascii.js';
 import { ScreenHeader } from '../components/ScreenHeader.js';
 import { buildVisualizer, visualizerHeight } from '../visualizers/receiver-visualizers.js';
-export function NowPlayingScreen({ station, playback, metadata, theme, favorite, pulse, diagnostics, sleepLabel, showDiagnostics, stationTime, receiverStyle, trackHistory, width, height }) {
+// Terminal rows are roughly twice as tall as columns are wide. One vertical
+// row and three horizontal columns produce a closer optical inset around the
+// highest and lowest visible text than a mechanically equal cell count.
+const receiverPaddingX = 3;
+const receiverPaddingY = 1;
+export function NowPlayingScreen({ station, playback, metadata, theme, favorite, pulse, diagnostics, showDiagnostics, stationTime, receiverStyle, trackHistory, width, height }) {
     const { panel: panelBackground, ascii } = useDisplay();
     // In ASCII mode route every rendered string through the glyph mapper so no
     // braille, block, box-drawing, or punctuation (·, ★) leaks to the terminal.
@@ -15,30 +20,29 @@ export function NowPlayingScreen({ station, playback, metadata, theme, favorite,
     const accent = themeAccent(theme);
     const panelWidth = Math.max(62, width);
     const panelHeight = Math.max(10, height);
-    const innerWidth = Math.max(28, panelWidth - 6);
-    const visualHeight = visualizerHeight(receiverStyle, panelHeight - (showDiagnostics ? 14 : 9), innerWidth);
+    const innerWidth = Math.max(28, panelWidth - (receiverPaddingX * 2) - 2);
+    // Station identity now lives in the receiver header. Its former name and
+    // location rows become visualizer space, while a shared gutter keeps the
+    // visualization equally separated from the header and track title.
+    const visualizerGutterRows = 1;
+    const visualHeight = visualizerHeight(receiverStyle, panelHeight - (showDiagnostics ? 10 : 5) - visualizerGutterRows, innerWidth);
     const visualRows = buildVisualizer(receiverStyle, pulse, innerWidth, visualHeight, station, playback, theme);
-    const stationName = station ? truncate(station.name, innerWidth) : 'No station tuned';
-    const stationPlace = station
-        ? truncate(stationLocation(station).toUpperCase(), innerWidth)
-        : 'Choose a station from Library, Explore, Search, Countries, or Nearby.';
+    const receiverState = playback.state.toUpperCase();
+    const identityWidth = Math.max(8, innerWidth - displayWidth(receiverState) - 2);
+    const stationIdentity = receiverStationIdentity(station, identityWidth);
     const infoFallback = diagnostics.availableBackends.length > 0
         ? 'Playback backend ready. Choose a station to start tuning.'
         : 'No playback backend found. Run radiocli doctor for setup help.';
-    // One compact meta line: stream tech, tags, and the sleep timer only when set.
-    const sleepSuffix = sleepLabel !== 'Sleep off' ? ` · ${sleepLabel}` : '';
-    const infoLine = station
-        ? truncate(`${stationTech(station)} · ${stationTags(station)}${sleepSuffix}`, innerWidth)
-        : infoFallback;
     const metadataLine = metadata?.title
         ? truncate(metadata.title, Math.max(8, innerWidth - 12))
-        : 'Waiting for ICY track metadata';
-    const dialLabel = receiverDialLabel(station);
+        : station
+            ? 'Waiting for ICY track metadata'
+            : infoFallback;
     const renderRows = ascii ? visualRows.map(asciifyVisualRow) : visualRows;
     const favoriteText = favorite ? '★ Favorite' : '☆ Favorite';
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(ScreenHeader, { title: "Now playing", width: panelWidth, theme: theme }), _jsxs(Box, { borderStyle: panelBorderStyle(ascii), borderColor: accent, borderBackgroundColor: panelBackground, backgroundColor: panelBackground, flexDirection: "column", paddingX: 2, paddingY: 1, width: panelWidth, height: panelHeight, children: [_jsxs(Box, { justifyContent: "space-between", width: innerWidth, children: [_jsx(Text, { color: accent, bold: true, children: a(dialLabel) }), _jsx(Text, { color: accent, children: "RADIOCLI" }), _jsx(Text, { color: accent, children: playback.state.toUpperCase() })] }), _jsx(Box, { marginTop: 1, children: _jsx(Text, { color: accent, bold: true, children: a(stationName) }) }), _jsx(Text, { color: textMuted, children: a(truncate(stationPlace, innerWidth)) }), _jsx(Box, { flexDirection: "column", children: renderRows.map((row, index) => (_jsx(Text, { color: row.segments ? undefined : row.color, children: row.segments
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(ScreenHeader, { title: "Now playing", width: panelWidth, theme: theme }), _jsxs(Box, { borderStyle: panelBorderStyle(ascii), borderColor: accent, borderBackgroundColor: panelBackground, backgroundColor: panelBackground, flexDirection: "column", paddingX: receiverPaddingX, paddingY: receiverPaddingY, width: panelWidth, height: panelHeight, children: [_jsxs(Box, { justifyContent: "space-between", width: innerWidth, flexShrink: 0, children: [_jsxs(Box, { width: identityWidth, overflow: "hidden", children: [_jsx(Text, { color: accent, bold: true, children: a(stationIdentity.name) }), stationIdentity.location ? _jsx(Text, { color: textMuted, children: a(` · ${stationIdentity.location}`) }) : null] }), _jsx(Text, { color: accent, children: receiverState })] }), _jsx(Box, { marginTop: visualizerGutterRows, flexDirection: "column", flexShrink: 1, overflow: "hidden", children: renderRows.map((row, index) => (_jsx(Text, { color: row.segments ? undefined : row.color, children: row.segments
                                 ? renderSegments(row.segments)
-                                : row.text }, `${index}-${row.color}-${row.text}`))) }), _jsxs(Box, { marginTop: 1, justifyContent: "space-between", width: innerWidth, children: [_jsx(Text, { color: metadata?.title ? accent : textMuted, children: a(metadataLine) }), _jsx(Text, { color: favorite ? 'yellow' : textMuted, children: a(favoriteText) })] }), _jsx(Text, { color: textMuted, children: a(infoLine) }), showDiagnostics ? (_jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { color: textMuted, children: "Diagnostics" }), _jsx(Text, { color: textMuted, children: a(`Stream: ${diagnostics.streamUrl ? truncate(diagnostics.streamUrl, innerWidth - 8) : 'none'}`) }), _jsx(Text, { color: textMuted, children: a(`Station time: ${stationTime}`) }), _jsx(Text, { color: textMuted, children: a(`Started: ${diagnostics.startedAt ? new Date(diagnostics.startedAt).toLocaleTimeString() : 'not playing'} · available ${diagnostics.availableBackends.join(', ') || 'none'}`) }), stationTracks.length > 0 ? (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { color: textMuted, children: "Recent tracks" }), stationTracks.map(track => (_jsx(Text, { color: textMuted, children: a(`· ${truncate(track.title, innerWidth - 2)}`) }, `${track.at}-${track.title}`)))] })) : null] })) : null] })] }));
+                                : row.text }, index))) }), _jsxs(Box, { marginTop: visualizerGutterRows, justifyContent: "space-between", width: innerWidth, flexShrink: 0, children: [_jsx(Text, { color: metadata?.title ? accent : textMuted, children: a(metadataLine) }), _jsx(Text, { color: favorite ? 'yellow' : textMuted, children: a(favoriteText) })] }), showDiagnostics ? (_jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { color: textMuted, children: "Diagnostics" }), _jsx(Text, { color: textMuted, children: a(`Stream: ${diagnostics.streamUrl ? truncate(diagnostics.streamUrl, innerWidth - 8) : 'none'}`) }), _jsx(Text, { color: textMuted, children: a(`Station time: ${stationTime}`) }), _jsx(Text, { color: textMuted, children: a(`Started: ${diagnostics.startedAt ? new Date(diagnostics.startedAt).toLocaleTimeString() : 'not playing'} · available ${diagnostics.availableBackends.join(', ') || 'none'}`) }), stationTracks.length > 0 ? (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { color: textMuted, children: "Recent tracks" }), stationTracks.map(track => (_jsx(Text, { color: textMuted, children: a(`· ${truncate(track.title, innerWidth - 2)}`) }, `${track.at}-${track.title}`)))] })) : null] })) : null] })] }));
 }
 function asciifyVisualRow(row) {
     return {
@@ -54,43 +58,19 @@ export function recentTracksForStation(history, station, limit) {
     const key = `${station.provider}:${station.id}`;
     return history.filter(track => track.stationKey === key).slice(0, limit);
 }
-export function receiverDialLabel(station) {
+export function receiverStationIdentity(station, width) {
     if (!station) {
-        return 'FM ---';
+        return { name: truncate('No station tuned', width), location: '' };
     }
-    const frequency = stationFrequency(station.name);
-    if (frequency) {
-        return frequency;
+    const nameWidth = displayWidth(station.name);
+    if (nameWidth >= width - 3) {
+        return { name: truncate(station.name, width), location: '' };
     }
-    const codec = station.codec?.trim().toUpperCase();
-    if (station.bitrate && codec) {
-        return `FM ${String(station.bitrate).padStart(3, '0')}.${codec.slice(0, 1)}`;
-    }
-    if (station.bitrate) {
-        return `FM ${String(station.bitrate).padStart(3, '0')}`;
-    }
-    if (codec) {
-        return `FM ${codec}`;
-    }
-    return 'FM LIVE';
-}
-function stationFrequency(name) {
-    const frequencyMatch = name.match(/\b(?:(AM|FM)\s*)?(\d{2,4}(?:\.\d{1,2})?)(?:\s*(AM|FM))?\b/i);
-    if (!frequencyMatch) {
-        return null;
-    }
-    const value = Number(frequencyMatch[2]);
-    if (!Number.isFinite(value)) {
-        return null;
-    }
-    const explicitBand = (frequencyMatch[1] ?? frequencyMatch[3])?.toUpperCase();
-    if (explicitBand === 'AM' || (!explicitBand && value >= 520 && value <= 1710)) {
-        return `AM ${frequencyMatch[2]}`;
-    }
-    if (explicitBand === 'FM' || (!explicitBand && value >= 65 && value <= 120)) {
-        return `FM ${frequencyMatch[2]}`;
-    }
-    return null;
+    const locationWidth = Math.max(0, width - nameWidth - 3);
+    return {
+        name: station.name,
+        location: truncate(stationLocation(station).toUpperCase(), locationWidth)
+    };
 }
 function renderSegments(segments) {
     let offset = 0;

package/dist/ui/screens/SearchScreen.js

@@ -10,5 +10,5 @@ export function SearchScreen({ query, editing, loading, stations, selected, them
     const contentWidth = Math.max(40, width);
     const inputWidth = Math.max(34, Math.min(contentWidth, 96));
     const inputTextWidth = Math.max(8, inputWidth - 8);
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(ScreenHeader, { title: "Search", subtitle: `Radio Browser${experimentalOn ? ' + Radio Garden experimental' : ''}`, width: width, theme: theme, right: filterLabel === 'none' ? undefined : `filters: ${filterLabel}` }), _jsxs(Box, { marginTop: 1, borderStyle: panelBorderStyle(ascii, 'single'), borderColor: editing ? themeAccent(theme) : panelBorder, borderBackgroundColor: panelBackground, backgroundColor: panelBackground, width: inputWidth, height: 3, marginBottom: 1, flexShrink: 0, children: [_jsx(Text, { color: editing ? themeAccent(theme) : textMuted, children: editing ? '› ' : '  ' }), _jsx(Text, { color: query ? themeAccent(theme) : textMuted, children: truncate(query || 'Search stations, genres, languages, places…', inputTextWidth) })] }), loading ? _jsx(Text, { color: textMuted, children: "Searching public station directories\u2026" }) : null, !loading ? _jsx(StationList, { stations: stations, selected: selected, theme: theme, favorites: favorites, pageSize: pageSize, width: width }) : null] }));
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(ScreenHeader, { title: "Search", subtitle: `Radio Browser${experimentalOn ? ' + Radio Garden experimental' : ''}`, width: width, theme: theme, right: filterLabel === 'none' ? undefined : `filters: ${filterLabel}` }), _jsxs(Box, { marginTop: 1, borderStyle: panelBorderStyle(ascii, 'single'), borderColor: editing ? themeAccent(theme) : panelBorder, borderBackgroundColor: panelBackground, backgroundColor: panelBackground, width: inputWidth, height: 3, marginBottom: 1, flexShrink: 0, children: [_jsx(Text, { color: editing ? themeAccent(theme) : textMuted, children: editing ? '› ' : '  ' }), _jsx(Text, { color: query ? themeAccent(theme) : textMuted, children: truncate(query || 'Search stations, genres, languages, places…', inputTextWidth) })] }), loading ? _jsx(Text, { color: textMuted, children: "Searching station directories\u2026" }) : null, !loading || stations.length > 0 ? (_jsx(StationList, { stations: stations, selected: selected, theme: theme, favorites: favorites, pageSize: pageSize, width: width, emptyTitle: query ? `No matches for “${query}”.` : 'Search for a station, genre, language, or place.', emptyHint: query ? 'Try fewer words or clear active filters.' : 'Type above and press Enter.' })) : null] }));
 }

package/dist/ui/screens/SettingsScreen.js

@@ -1,9 +1,9 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from 'ink';
 import { Menu, Pointer } from '../components/Menu.js';
 import { ScreenHeader } from '../components/ScreenHeader.js';
 import { truncate } from '../format.js';
-import { settingsItems } from '../screen-items.js';
+import { settingsItems, settingsSectionFor } from '../screen-items.js';
 import { textMuted, themeAccent } from '../theme.js';
 import { playbackBackendCapabilities } from '../../player/backend-install.js';
 import { airPlayReceiverSettingValue } from '../airplay-settings.js';
@@ -12,31 +12,62 @@ import { updateStatusText } from '../../update-check.js';
 export function SettingsScreen({ selected, settings, appVersion, updateCheck, storePath, playback, backends, airPlayDevices, providerHealth, theme, diagnostics, width, height }) {
     const accent = themeAccent(theme);
     const lineWidth = Math.max(32, width - 4);
-    const health = Object.entries(providerHealth);
     const menuWindow = settingsMenuWindow(selected, height);
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(ScreenHeader, { title: "Settings", subtitle: "Enter changes the highlighted setting \u00B7 shortcuts in the footer", width: width, theme: theme }), _jsx(Box, { marginTop: 1, flexDirection: "column", children: _jsx(Menu, { items: menuWindow.items, selected: selected - menuWindow.start, keyFor: ({ item }) => item, render: (item, _index, active) => {
+    const selectedItem = settingsItems[selected];
+    const activeSection = settingsSectionFor(selectedItem);
+    const detail = settingDetail({
+        item: selectedItem,
+        appVersion,
+        updateCheck,
+        storePath,
+        playback,
+        providerHealth,
+        diagnostics,
+        lineWidth
+    });
+    const valueGap = 3;
+    const labelWidth = Math.min(34, Math.max(20, lineWidth - valueGap - 24));
+    const valueWidth = Math.max(12, Math.min(34, lineWidth - labelWidth - valueGap - 2));
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(ScreenHeader, { title: "Settings", subtitle: activeSection, width: width, theme: theme }), _jsx(Box, { marginTop: 1, flexDirection: "column", children: _jsx(Menu, { items: menuWindow.items, selected: menuWindow.selectedOffset, keyFor: ({ item }) => item, render: (item, _index, active) => {
                         const label = settingLabel(item.item, updateCheck);
                         const value = settingValue(item.item, settings, diagnostics, backends, airPlayDevices, updateCheck);
-                        return (_jsxs(Box, { children: [_jsx(Pointer, { active: active }), _jsx(Text, { color: active ? accent : undefined, bold: active, children: label }), value ? (_jsxs(_Fragment, { children: [_jsx(Text, { color: textMuted, children: " \u00B7 " }), _jsx(Text, { color: accent, children: value })] })) : null] }));
-                    } }) }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { color: textMuted, bold: true, children: "Status" }), _jsxs(Text, { color: textMuted, children: ["Output: ", _jsx(Text, { color: accent, children: audioOutputLabel(playback.backend) }), " / ", playback.state, " \u00B7", ' ', "Selected: ", _jsx(Text, { color: accent, children: audioOutputLabel(settings.preferredBackend) }), " \u00B7", ' ', diagnostics.muted ? 'muted' : `vol ${diagnostics.volume}`, " \u00B7 tune timeout ", settings.tuneTimeoutSeconds, "s"] }), _jsxs(Text, { color: textMuted, children: ["Provider health: ", health.length ? health.map(([provider, status]) => `${provider} ${status}`).join(' · ') : 'not checked yet'] }), _jsxs(Text, { color: textMuted, children: ["Version: ", _jsxs(Text, { color: accent, children: ["v", appVersion] }), " \u00B7 Update: ", updateStatusText(updateCheck)] }), _jsxs(Text, { color: textMuted, children: ["Active stream: ", truncate(diagnostics.streamUrl ?? 'none', lineWidth - 15)] }), _jsxs(Text, { color: textMuted, children: ["Library: ", truncate(storePath, lineWidth - 9)] })] })] }));
+                        return (_jsxs(Box, { flexDirection: "column", children: [item.showSection ? (_jsx(Text, { color: textMuted, bold: true, children: item.section })) : null, _jsxs(Box, { width: lineWidth, children: [_jsx(Pointer, { active: active }), _jsx(Box, { width: labelWidth, children: _jsx(Text, { color: active ? accent : undefined, bold: active, children: truncate(label, labelWidth) }) }), _jsx(Box, { width: valueGap }), _jsx(Box, { width: valueWidth, children: _jsx(Text, { color: value ? accent : textMuted, children: truncate(value ?? '', valueWidth) }) })] })] }));
+                    } }) }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { color: textMuted, bold: true, children: "Selected" }), _jsx(Text, { color: textMuted, children: truncate(detail, lineWidth) })] })] }));
 }
 function settingsMenuWindow(selected, height) {
-    if (!height) {
-        return { start: 0, items: settingsItems.map(item => ({ item })) };
-    }
-    const reservedRows = 10;
-    const maxRows = Math.max(5, height - reservedRows);
-    if (settingsItems.length <= maxRows) {
-        return { start: 0, items: settingsItems.map(item => ({ item })) };
-    }
+    const reservedRows = 6;
+    const maxRows = height ? Math.max(5, height - reservedRows) : Number.POSITIVE_INFINITY;
     const clampedSelected = Math.min(Math.max(selected, 0), settingsItems.length - 1);
-    const start = Math.min(Math.floor(clampedSelected / maxRows) * maxRows, Math.max(0, settingsItems.length - maxRows));
+    const pages = [];
+    let page = [];
+    let pageRows = 0;
+    let previousSection = '';
+    settingsItems.forEach((item, index) => {
+        const section = settingsSectionFor(item);
+        let showSection = section !== previousSection;
+        let rowCost = 1 + (showSection ? 1 : 0);
+        if (page.length > 0 && pageRows + rowCost > maxRows) {
+            pages.push(page);
+            page = [];
+            pageRows = 0;
+            previousSection = '';
+            showSection = true;
+            rowCost = 2;
+        }
+        page.push({ item, section, showSection, index });
+        pageRows += rowCost;
+        previousSection = section;
+    });
+    if (page.length > 0) {
+        pages.push(page);
+    }
+    const selectedPage = pages.find(candidate => candidate.some(entry => entry.index === clampedSelected)) ?? pages[0] ?? [];
     return {
-        start,
-        items: settingsItems.slice(start, start + maxRows).map(item => ({ item }))
+        items: selectedPage,
+        selectedOffset: Math.max(0, selectedPage.findIndex(entry => entry.index === clampedSelected))
     };
 }
-function settingValue(item, settings, diagnostics, backends, airPlayDevices, updateCheck) {
+export function settingValue(item, settings, diagnostics, backends, airPlayDevices, updateCheck) {
     switch (item) {
         case 'Cycle display color':
             return settings.theme;
@@ -46,12 +77,14 @@ function settingValue(item, settings, diagnostics, backends, airPlayDevices, upd
             return settings.enableRadioGarden ? 'on' : 'off';
         case 'Toggle nearby location lookup':
             return settings.enableNearbyLocation ? 'on' : 'off';
+        case 'Share favorite votes with Radio Browser':
+            return settings.shareDirectoryVotes ? 'on' : 'off';
         case 'Audio output':
             return audioOutputSettingValue(settings, diagnostics, backends);
         case 'AirPlay receiver':
             return airPlayReceiverSettingValue(settings, airPlayDevices, backends);
         case 'Mute or unmute':
-            if (diagnostics.backend === 'ffplay' && !playbackBackendCapabilities(diagnostics.backend).supportsMute) {
+            if (!playbackBackendCapabilities(diagnostics.backend).supportsMute) {
                 return 'requires mpv';
             }
             return diagnostics.muted ? 'muted' : `vol ${diagnostics.volume}`;
@@ -65,17 +98,56 @@ function settingValue(item, settings, diagnostics, backends, airPlayDevices, upd
             return settings.asciiMode ? 'on' : 'off';
         case 'Reduce motion':
             return settings.reduceMotion ? 'on' : 'off';
+        case 'Mouse and trackpad scrolling':
+            return settings.mouseSupport === false ? 'off' : 'auto';
         case 'Check for updates':
             return updateStatusText(updateCheck);
         case 'Reset learned media keys':
             return `prev ${settings.mediaKeys.previous.length} · play ${settings.mediaKeys.playPause.length} · next ${settings.mediaKeys.next.length}`;
+        case 'Export preferences and library':
+            return 'JSON backup';
+        case 'Import preferences and library':
+            return 'restore JSON backup';
         default:
             return undefined;
     }
 }
-function settingLabel(item, updateCheck) {
+export function settingLabel(item, updateCheck) {
     if (item === 'Check for updates' && updateCheck?.updateAvailable) {
         return 'Install update';
     }
-    return item;
+    return settingDisplayLabels[item] ?? item;
+}
+const settingDisplayLabels = {
+    'Cycle display color': 'Display color',
+    'Cycle receiver style': 'Receiver style',
+    'Toggle nearby location lookup': 'Nearby location',
+    'Toggle Radio Garden experimental adapter': 'Radio Garden adapter',
+    'Toggle skip broken streams': 'Skip broken streams'
+};
+function settingDetail(input) {
+    const { item, appVersion, updateCheck, storePath, playback, providerHealth, diagnostics, lineWidth } = input;
+    if (item === 'Audio output') {
+        return `Active: ${audioOutputLabel(playback.backend)} · ${playback.state} · ${diagnostics.muted ? 'muted' : `volume ${diagnostics.volume}`}`;
+    }
+    if (item === 'Refresh provider health') {
+        const health = Object.entries(providerHealth);
+        return health.length ? health.map(([provider, status]) => `${provider}: ${status}`).join(' · ') : 'Press Enter to check station providers.';
+    }
+    if (item === 'Check for updates') {
+        return `RadioCLI v${appVersion} · ${updateStatusText(updateCheck)}`;
+    }
+    if (item === 'Export preferences and library' || item === 'Import preferences and library') {
+        return `Library file: ${truncate(storePath, Math.max(8, lineWidth - 14))}`;
+    }
+    if (item === 'Share favorite votes with Radio Browser') {
+        return 'When enabled, favoriting also sends a public directory vote.';
+    }
+    if (item === 'Toggle nearby location lookup') {
+        return 'Uses approximate IP location only when you open Nearby.';
+    }
+    if (item === 'Reduce motion') {
+        return 'Freezes animated receiver displays for calmer, lower-power rendering.';
+    }
+    return 'Press Enter to change this setting.';
 }

package/dist/ui/screens/StationScreen.js

@@ -4,5 +4,18 @@ import { StationList } from '../components/StationList.js';
 import { ScreenHeader } from '../components/ScreenHeader.js';
 import { textMuted } from '../theme.js';
 export function StationScreen({ title, subtitle, stations, selected, loading, theme, favorites, filterLabel, pageSize, width }) {
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(ScreenHeader, { title: title, subtitle: subtitle, width: width, theme: theme, right: filterLabel === 'none' ? undefined : `filters: ${filterLabel}` }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [loading ? _jsx(Text, { color: textMuted, children: "Loading stations\u2026" }) : null, !loading ? _jsx(StationList, { stations: stations, selected: selected, theme: theme, favorites: favorites, pageSize: pageSize, width: width }) : null] })] }));
+    const empty = stationEmptyState(title);
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(ScreenHeader, { title: title, subtitle: subtitle, width: width, theme: theme, right: filterLabel === 'none' ? undefined : `filters: ${filterLabel}` }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [loading ? _jsx(Text, { color: textMuted, children: "Loading stations\u2026" }) : null, !loading || stations.length > 0 ? (_jsx(StationList, { stations: stations, selected: selected, theme: theme, favorites: favorites, pageSize: pageSize, width: width, emptyTitle: empty.title, emptyHint: empty.hint })) : null] })] }));
+}
+function stationEmptyState(title) {
+    if (title.toLowerCase().includes('library')) {
+        return { title: 'Your library is empty.', hint: 'Press f on any station to save it here.' };
+    }
+    if (title.toLowerCase().includes('nearby')) {
+        return { title: 'No nearby stations found.', hint: 'Try again later or browse Countries.' };
+    }
+    if (title.toLowerCase().includes('country')) {
+        return { title: 'No stations found for this country.', hint: 'Choose another country or clear active filters.' };
+    }
+    return { title: 'No stations found.', hint: 'Try another view or clear active filters.' };
 }