@ciphore/radiocli 0.2.2 → 0.2.4

package/dist/ui/AppContent.js

@@ -15,7 +15,7 @@ import { AirPlayCodeScreen } from './screens/AirPlayCodeScreen.js';
 import { selectedAirPlayDevice } from './airplay-settings.js';
 import { AdaptiveContent } from './AdaptiveContent.js';
 import { AlarmsScreen, AlarmEditorScreen, AlarmPickerScreen, AlarmRingingScreen } from './screens/AlarmsScreen.js';
-export function AppContent({ airPlayDevices, airPlayCode, appVersion, backends, countryFilter, diagnostics, displayStations, editingCountryFilter, editingSearch, exploreCursor, favoriteKeys, filterLabel, filteredCountries, frameWidth, layout, library, loadingCountries, loadingStations, nowPlaying, playback, playingStation, providerHealth, searchQuery, screen, selected, showDiagnostics, sleepLabel, stationContext, stationFavorite, stationTime, storePath, theme, updateCheck, alarmTui }) {
+export function AppContent({ airPlayDevices, airPlayCode, appVersion, backends, countryFilter, diagnostics, displayStations, editingCountryFilter, editingSearch, exploreCursor, favoriteKeys, filterLabel, filteredCountries, frameWidth, layout, library, loadingCountries, loadingStations, nowPlaying, playback, playingStation, providerHealth, searchQuery, screen, settingsPage, selected, showDiagnostics, sleepLabel, stationContext, stationFavorite, stationTime, storePath, theme, updateCheck, alarmTui, airPlaySupported = true }) {
     if (layout.compact) {
         if (screen === 'alarms')
             return _jsx(AlarmsScreen, { alarms: library.alarms, selected: selected, runtime: alarmTui.runtime, verification: alarmTui.verification, deletingId: alarmTui.deletingId, busyAlarmIds: alarmTui.busyAlarmIds, theme: theme, width: frameWidth, height: layout.contentRows, mode: layout.mode });
@@ -25,7 +25,7 @@ export function AppContent({ airPlayDevices, airPlayCode, appVersion, backends,
             return _jsx(AlarmPickerScreen, { choices: alarmTui.pickerChoices, selected: selected, fallback: alarmTui.pickerFallback, theme: theme, width: frameWidth, height: layout.contentRows });
         if (screen === 'alarm-ringing')
             return _jsx(AlarmRingingScreen, { sessions: alarmTui.activeAlarms, alarms: library.alarms, selected: alarmTui.activeSelected, snoozeMinutes: alarmTui.snoozeMinutes, theme: theme, width: frameWidth, height: layout.contentRows });
-        return (_jsx(AdaptiveContent, { mode: layout.mode === 'micro' ? 'micro' : 'compact', screen: screen, selected: selected, height: layout.contentRows, width: frameWidth, theme: theme, playback: playback, playingStation: playingStation, nowPlaying: nowPlaying, stations: displayStations, countries: filteredCountries, airPlayDevices: airPlayDevices, airPlayCode: airPlayCode, searchQuery: searchQuery, editingSearch: editingSearch, countryFilter: countryFilter, editingCountryFilter: editingCountryFilter, loadingCountries: loadingCountries, loadingStations: loadingStations, exploreCursor: exploreCursor, library: library, diagnostics: diagnostics, backends: backends, updateCheck: updateCheck, favoriteKeys: favoriteKeys, stationTitle: stationContext.title, stationError: stationContext.error, filterLabel: filterLabel, sleepLabel: sleepLabel }));
+        return (_jsx(AdaptiveContent, { mode: layout.mode === 'micro' ? 'micro' : 'compact', screen: screen, settingsPage: settingsPage, selected: selected, height: layout.contentRows, width: frameWidth, theme: theme, playback: playback, playingStation: playingStation, nowPlaying: nowPlaying, stations: displayStations, countries: filteredCountries, airPlayDevices: airPlayDevices, airPlayCode: airPlayCode, searchQuery: searchQuery, editingSearch: editingSearch, countryFilter: countryFilter, editingCountryFilter: editingCountryFilter, loadingCountries: loadingCountries, loadingStations: loadingStations, exploreCursor: exploreCursor, library: library, diagnostics: diagnostics, backends: backends, updateCheck: updateCheck, appVersion: appVersion, favoriteKeys: favoriteKeys, stationTitle: stationContext.title, stationError: stationContext.error, filterLabel: filterLabel, sleepLabel: sleepLabel, airPlaySupported: airPlaySupported }));
     }
     if (screen === 'alarms')
         return _jsx(AlarmsScreen, { alarms: library.alarms, selected: selected, runtime: alarmTui.runtime, verification: alarmTui.verification, deletingId: alarmTui.deletingId, busyAlarmIds: alarmTui.busyAlarmIds, theme: theme, width: frameWidth, height: layout.contentRows, mode: layout.mode });
@@ -39,7 +39,7 @@ export function AppContent({ airPlayDevices, airPlayCode, appVersion, backends,
         return _jsx(HomeScreen, { selected: selected, theme: theme, library: library });
     }
     if (screen === 'countries') {
-        return (_jsx(CountriesScreen, { countries: filteredCountries, selected: selected, loading: loadingCountries, filter: countryFilter, editingFilter: editingCountryFilter, theme: theme, pageSize: layout.countryRows, width: frameWidth }));
+        return (_jsx(CountriesScreen, { countries: filteredCountries, selected: selected, loading: loadingCountries, filter: countryFilter, editingFilter: editingCountryFilter, theme: theme, pageSize: layout.countryRows, width: frameWidth, reduceMotion: Boolean(library.settings.reduceMotion) }));
     }
     if (screen === 'map') {
         return (_jsx(MapScreen, { countries: filteredCountries, selected: selected, loading: loadingCountries, filter: countryFilter, editingFilter: editingCountryFilter, theme: theme, pageSize: layout.mapCountryRows, mode: layout.mapMode, width: frameWidth }));
@@ -60,7 +60,7 @@ export function AppContent({ airPlayDevices, airPlayCode, appVersion, backends,
         return _jsx(StatsScreen, { library: library, theme: theme, width: frameWidth, height: layout.contentRows });
     }
     if (screen === 'settings') {
-        return (_jsx(SettingsScreen, { selected: selected, settings: library.settings, appVersion: appVersion, updateCheck: updateCheck, storePath: storePath, playback: playback, backends: backends, airPlayDevices: airPlayDevices, providerHealth: providerHealth, theme: theme, diagnostics: diagnostics, width: frameWidth, height: layout.contentRows }));
+        return (_jsx(SettingsScreen, { page: settingsPage, selected: selected, settings: library.settings, appVersion: appVersion, updateCheck: updateCheck, storePath: storePath, playback: playback, backends: backends, airPlayDevices: airPlayDevices, providerHealth: providerHealth, theme: theme, diagnostics: diagnostics, width: frameWidth, height: layout.contentRows, airPlaySupported: airPlaySupported }));
     }
     if (screen === 'airplay-settings') {
         return (_jsx(AirPlaySettingsScreen, { selected: selected, settings: library.settings, backends: backends, devices: airPlayDevices, theme: theme, width: frameWidth, height: layout.contentRows }));

package/dist/ui/app-state.js

@@ -38,7 +38,7 @@ export const initialStationContexts = {
     },
     library: {
         title: 'Library',
-        subtitle: 'Favorites, recent stations, and imported streams',
+        subtitle: 'Favorites, imported streams, and recent stations',
         stations: []
     }
 };
@@ -58,6 +58,13 @@ export function searchEditingArrowAction(key, hasResults) {
     }
     return null;
 }
+export function shouldTuneSearchResult(query, lastSubmittedQuery) {
+    const trimmedQuery = query.trim();
+    return !trimmedQuery || trimmedQuery === lastSubmittedQuery.trim();
+}
+export function isSearchFavoriteShortcut(input, key) {
+    return input.toLowerCase() === 'f' && Boolean(key.ctrl || key.meta || key.super);
+}
 export function clampVolume(value) {
     return Math.min(100, Math.max(0, Math.round(value)));
 }

package/dist/ui/ascii.js

@@ -64,6 +64,14 @@ function asciiGlyph(code) {
     if (code === 0x25c9 || code === 0x25d2) {
         return 'o'; // ◉ ◒
     }
+    if (code === 0x2218)
+        return 'o'; // ring operator used by receiver patterns
+    if (code === 0x25c6 || code === 0x25c7)
+        return '*'; // decorative diamonds
+    if (code === 0x201c || code === 0x201d)
+        return '"';
+    if (code === 0x2018 || code === 0x2019)
+        return "'";
     if (code === 0x25b2) {
         return '^'; // ▲
     }
@@ -105,8 +113,9 @@ function asciiGlyph(code) {
         return '^';
     if (code === 0x2193)
         return 'v';
-    // Drop zero-width and combining marks entirely so they do not skew widths.
-    if (code === 0x200b || code === 0xfeff || (code >= 0x0300 && code <= 0x036f)) {
+    // Drop invisible separators, but retain combining accents in station data.
+    // Width measurement already accounts for combining marks as zero columns.
+    if (code === 0x200b || code === 0xfeff) {
         return '';
     }
     // Unknown Unicode is user/content data more often than decoration. Preserve

package/dist/ui/components/AdaptiveMarquee.js

@@ -2,16 +2,19 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import { Text } from 'ink';
 import { displayWidth, sliceDisplay, truncate } from '../format.js';
+import { useDisplay } from '../display-context.js';
+import { toAsciiSafe } from '../ascii.js';
 const edgePauseMs = 1000;
 const stepMs = 180;
 export function AdaptiveMarquee({ text, width, active, reduceMotion }) {
+    const { ascii, reduceMotion: terminalReduceMotion } = useDisplay();
     const safeWidth = Math.max(0, width);
     const maxOffset = Math.max(0, displayWidth(text) - safeWidth);
-    const animated = active && !reduceMotion && maxOffset > 0;
+    const animated = active && !reduceMotion && !terminalReduceMotion && maxOffset > 0;
     const [offset, setOffset] = useState(0);
     useEffect(() => {
         setOffset(0);
-    }, [active, reduceMotion, safeWidth, text]);
+    }, [active, reduceMotion, terminalReduceMotion, safeWidth, text]);
     useEffect(() => {
         if (!animated)
             return;
@@ -24,5 +27,5 @@ export function AdaptiveMarquee({ text, width, active, reduceMotion }) {
     const visible = animated
         ? sliceDisplay(text, Math.min(offset, maxOffset), safeWidth)
         : truncate(text, safeWidth);
-    return _jsx(Text, { children: visible });
+    return _jsx(Text, { "aria-label": text, children: ascii ? toAsciiSafe(visible) : visible });
 }

package/dist/ui/components/Logo.js

@@ -1,15 +1,18 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from 'ink';
 import { textMuted } from '../theme.js';
+import { useDisplay } from '../display-context.js';
 const logoSpectrumColors = ['#ff4b5c', '#ff9f43', '#ffd166', '#a3e635', '#22c55e', '#2dd4bf', '#38bdf8', '#818cf8', '#c084fc'];
 function LogoSpectrum() {
-    return (_jsx(_Fragment, { children: logoSpectrumColors.map(color => (_jsx(Text, { color: color, children: "\u2588\u2588" }, color))) }));
+    const { ascii } = useDisplay();
+    return (_jsx(_Fragment, { children: logoSpectrumColors.map(color => (_jsx(Text, { color: color, "aria-hidden": true, children: ascii ? '##' : '██' }, color))) }));
 }
 export function Logo({ compact = false, width = 80 } = {}) {
+    const { ascii } = useDisplay();
     if (compact) {
         const spectrumColumns = Math.max(1, width - 10);
         const colors = logoSpectrumColors.slice(0, Math.min(logoSpectrumColors.length, spectrumColumns));
-        return (_jsxs(Box, { width: width, overflow: "hidden", children: [_jsx(Text, { bold: true, children: "RADIOCLI" }), _jsx(Text, { children: "  " }), colors.map(color => _jsx(Text, { color: color, children: "\u2588" }, color))] }));
+        return (_jsxs(Box, { width: width, overflow: "hidden", children: [_jsx(Text, { bold: true, children: "RADIOCLI" }), _jsx(Text, { children: "  " }), colors.map(color => _jsx(Text, { color: color, "aria-hidden": true, children: ascii ? '#' : '█' }, color))] }));
     }
     return (_jsxs(Box, { flexDirection: "column", marginBottom: 1, children: [_jsxs(Box, { children: [_jsx(Text, { bold: true, children: "RADIOCLI" }), _jsx(Text, { children: "  " }), _jsx(LogoSpectrum, {})] }), _jsx(Text, { color: textMuted, children: "Live public radio from around the world" })] }));
 }

package/dist/ui/components/Menu.js

@@ -2,10 +2,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Box, Text } from 'ink';
 export function Menu({ items, selected, keyFor, render }) {
     const activeIndex = items.length > 0 ? Math.min(Math.max(selected, 0), items.length - 1) : -1;
-    return (_jsx(Box, { flexDirection: "column", children: items.map((item, position) => (_jsx(Box, { children: render(item, position, position === activeIndex) }, keyFor?.(item, position) ?? defaultMenuKey(item)))) }));
+    return (_jsx(Box, { flexDirection: "column", "aria-role": "list", children: items.map((item, position) => (_jsx(Box, { "aria-role": "listitem", "aria-state": { selected: position === activeIndex }, children: render(item, position, position === activeIndex) }, keyFor?.(item, position) ?? defaultMenuKey(item)))) }));
 }
 export function Pointer({ active }) {
-    return _jsx(Text, { bold: active, children: active ? '> ' : '  ' });
+    return _jsx(Text, { bold: active, "aria-hidden": true, children: active ? '> ' : '  ' });
 }
 function defaultMenuKey(item) {
     if (typeof item === 'string' || typeof item === 'number') {

package/dist/ui/components/ScreenHeader.js

@@ -15,5 +15,5 @@ export function ScreenHeader({ title, width, theme, subtitle, right }) {
     const rightText = right ? ` ${right}` : '';
     const ruleWidth = Math.max(1, width - displayWidth(safeTitle) - displayWidth(rightText) - 2);
     const rule = (ascii ? '-' : '─').repeat(ruleWidth);
-    return (_jsxs(Box, { flexDirection: "column", flexShrink: 0, children: [_jsxs(Box, { children: [_jsx(Text, { color: accent, bold: true, children: a(safeTitle) }), _jsxs(Text, { color: textDim, children: [" ", rule] }), rightText ? _jsx(Text, { color: textMuted, children: a(rightText) }) : null] }), subtitle ? _jsx(Text, { color: textMuted, children: a(truncate(subtitle, width)) }) : null] }));
+    return (_jsxs(Box, { flexDirection: "column", flexShrink: 0, children: [_jsxs(Box, { children: [_jsx(Text, { color: accent, bold: true, children: a(safeTitle) }), _jsxs(Text, { color: textDim, "aria-hidden": true, children: [" ", rule] }), rightText ? _jsx(Text, { color: textMuted, children: a(rightText) }) : null] }), subtitle ? _jsx(Text, { color: textMuted, children: a(truncate(subtitle, width)) }) : null] }));
 }

package/dist/ui/components/StationList.js

@@ -1,15 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from 'ink';
-import { displayWidth, stationLocation, stationTags, stationTech, truncate } from '../format.js';
+import { stationLocation, stationTags, stationTech, truncate } from '../format.js';
 import { textMuted, themeAccent } from '../theme.js';
 import { Menu, Pointer } from './Menu.js';
 import { visibleWindow } from '../list-window.js';
 import { useDisplay } from '../display-context.js';
 import { AdaptiveMarquee } from './AdaptiveMarquee.js';
+import { toAsciiSafe } from '../ascii.js';
 export function StationList({ stations, selected, theme, favorites, pageSize, width, emptyTitle = 'No stations found.', emptyHint = 'Try another view or clear active filters.', showCount = true }) {
-    const { reduceMotion } = useDisplay();
+    const { reduceMotion, ascii } = useDisplay();
+    const a = (value) => ascii ? toAsciiSafe(value) : value;
     if (stations.length === 0) {
-        return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: textMuted, children: emptyTitle }), _jsx(Text, { color: textMuted, children: emptyHint })] }));
+        return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: textMuted, children: a(emptyTitle) }), _jsx(Text, { color: textMuted, children: a(emptyHint) })] }));
     }
     const window = visibleWindow(stations, selected, pageSize);
     const rowWidth = Math.max(42, width - 4);
@@ -19,14 +21,12 @@ export function StationList({ stations, selected, theme, favorites, pageSize, wi
                     const favorite = favorites.has(`${station.provider}:${station.id}`);
                     if (width < 42) {
                         const compactNameWidth = Math.max(1, width - 2 - (favorite ? 2 : 0));
-                        return (_jsxs(Box, { children: [_jsx(Pointer, { active: active }), _jsx(Text, { color: active ? themeAccent(theme) : undefined, bold: active, children: _jsx(AdaptiveMarquee, { text: station.name, width: compactNameWidth, active: active, reduceMotion: reduceMotion }) }), favorite ? _jsx(Text, { color: "yellow", children: " \u2605" }) : null] }));
+                        return (_jsxs(Box, { children: [_jsx(Pointer, { active: active }), _jsx(Text, { color: active ? themeAccent(theme) : undefined, bold: active, children: _jsx(AdaptiveMarquee, { text: station.name, width: compactNameWidth, active: active, reduceMotion: reduceMotion }) }), favorite ? _jsx(Text, { color: "yellow", "aria-label": "Favorite", children: a(' ★') }) : null] }));
                     }
-                    const stationName = truncate(station.name, favorite ? Math.max(1, nameWidth - 2) : nameWidth);
+                    const stationNameWidth = favorite ? Math.max(1, nameWidth - 2) : nameWidth;
                     const titleWidth = nameWidth + 2;
-                    const titleUsed = displayWidth(stationName) + (favorite ? 2 : 0);
-                    const titlePadding = ' '.repeat(Math.max(1, titleWidth - titleUsed));
                     const standardMetadata = `${stationLocation(station)} · ${stationTech(station)}`;
                     const selectedMetadata = station.tags.length > 0 ? stationTags(station) : standardMetadata;
-                    return (_jsxs(Box, { children: [_jsx(Pointer, { active: active }), _jsx(Text, { color: active ? themeAccent(theme) : undefined, bold: active, children: stationName }), favorite ? _jsx(Text, { color: "yellow", children: " \u2605" }) : null, _jsx(Text, { children: titlePadding }), _jsx(Text, { color: active ? themeAccent(theme) : textMuted, children: truncate(active ? selectedMetadata : standardMetadata, metaWidth) })] }));
+                    return (_jsxs(Box, { children: [_jsx(Pointer, { active: active }), _jsxs(Box, { width: titleWidth, children: [_jsx(Box, { width: stationNameWidth, children: _jsx(Text, { color: active ? themeAccent(theme) : undefined, bold: active, children: _jsx(AdaptiveMarquee, { text: station.name, width: stationNameWidth, active: active, reduceMotion: reduceMotion }) }) }), favorite ? _jsx(Text, { color: "yellow", "aria-label": "Favorite", children: a(' ★') }) : null] }), _jsx(Text, { color: active ? themeAccent(theme) : textMuted, children: a(truncate(active ? selectedMetadata : standardMetadata, metaWidth)) })] }));
                 } })] }));
 }

package/dist/ui/components/TopTabs.js

@@ -21,7 +21,7 @@ export function TopTabs({ tabs, active, theme, width, backendLabel }) {
     const visibleTabs = fitTabs(tabs, active, tabsAvailableWidth);
     const visibleTabsWidth = tabsWidth(visibleTabs);
     const tabPaddingWidth = Math.max(0, bodyWidth - visibleTabsWidth - (canShowRight ? rightWidth : 0));
-    return (_jsxs(Box, { flexDirection: "column", backgroundColor: background, width: width, children: [_jsxs(Text, { backgroundColor: background, children: [_jsxs(Text, { color: panelBorder, children: [box.tl, " "] }), _jsx(Text, { color: accent, bold: true, children: brand }), _jsxs(Text, { color: panelBorder, children: [" ", box.h.repeat(titleRuleWidth), box.tr] })] }), _jsxs(Text, { backgroundColor: background, children: [_jsxs(Text, { color: panelBorder, children: [box.v, " "] }), visibleTabs.map((item, index) => (_jsxs(Text, { children: [item.type === 'overflow' ? (_jsx(Text, { color: textMuted, children: "\u2026" })) : (_jsx(Text, { color: item.tab.screen === active ? accent : textMuted, bold: item.tab.screen === active, children: item.tab.label })), index < visibleTabs.length - 1 ? _jsxs(Text, { color: textMuted, children: [" ", box.v, " "] }) : null] }, item.type === 'overflow' ? `${item.side}-overflow` : item.tab.screen))), _jsx(Text, { children: ' '.repeat(tabPaddingWidth) }), canShowRight ? _jsx(Text, { color: textMuted, children: rightText }) : null, _jsxs(Text, { color: panelBorder, children: [" ", box.v] })] }), _jsxs(Text, { backgroundColor: background, color: panelBorder, children: [box.bl, box.h.repeat(Math.max(0, width - 2)), box.br] })] }));
+    return (_jsxs(Box, { flexDirection: "column", backgroundColor: background, width: width, "aria-label": `RadioCLI. Tabs: ${tabs.map(tab => `${tab.label}${tab.screen === active ? ' (selected)' : ''}`).join(', ')}. Audio output: ${backendLabel}.`, children: [_jsxs(Text, { backgroundColor: background, children: [_jsxs(Text, { color: panelBorder, children: [box.tl, " "] }), _jsx(Text, { color: accent, bold: true, children: brand }), _jsxs(Text, { color: panelBorder, children: [" ", box.h.repeat(titleRuleWidth), box.tr] })] }), _jsxs(Text, { backgroundColor: background, children: [_jsxs(Text, { color: panelBorder, children: [box.v, " "] }), visibleTabs.map((item, index) => (_jsxs(Text, { children: [item.type === 'overflow' ? (_jsx(Text, { color: textMuted, children: ascii ? '.' : '…' })) : (_jsx(Text, { color: item.tab.screen === active ? accent : textMuted, bold: item.tab.screen === active, children: item.tab.label })), index < visibleTabs.length - 1 ? _jsxs(Text, { color: textMuted, children: [" ", box.v, " "] }) : null] }, item.type === 'overflow' ? `${item.side}-overflow` : item.tab.screen))), _jsx(Text, { children: ' '.repeat(tabPaddingWidth) }), canShowRight ? _jsx(Text, { color: textMuted, children: rightText }) : null, _jsxs(Text, { color: panelBorder, children: [" ", box.v] })] }), _jsxs(Text, { backgroundColor: background, color: panelBorder, children: [box.bl, box.h.repeat(Math.max(0, width - 2)), box.br] })] }));
 }
 function fitTabs(tabs, active, maxWidth) {
     const all = tabs.map(tab => ({ type: 'tab', tab }));

package/dist/ui/components/VersionIndicator.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { updateAvailableForVersion } from '../../update-check.js';
+import { displayWidth } from '../format.js';
+import { appBackground, textDim, themeAccent } from '../theme.js';
+export function availableUpdateLabel(currentVersion, updateCheck) {
+    return updateAvailableForVersion(updateCheck, currentVersion) && updateCheck?.latestVersion
+        ? `v${updateCheck.latestVersion} available`
+        : undefined;
+}
+export function versionIndicatorWidth(currentVersion, updateCheck) {
+    const versionWidth = displayWidth(`v${currentVersion}`);
+    const updateLabel = availableUpdateLabel(currentVersion, updateCheck);
+    return updateLabel ? displayWidth(updateLabel) + 3 + versionWidth : versionWidth;
+}
+export function VersionIndicator({ currentVersion, updateCheck, theme }) {
+    const updateLabel = availableUpdateLabel(currentVersion, updateCheck);
+    return (_jsxs(Box, { flexShrink: 0, children: [updateLabel ? (_jsxs(_Fragment, { children: [_jsx(Text, { color: appBackground, backgroundColor: themeAccent(theme), bold: true, children: ` ${updateLabel} ` }), _jsx(Text, { children: " " })] })) : null, _jsx(Text, { color: textDim, children: `v${currentVersion}` })] }));
+}

package/dist/ui/display-context.js

@@ -1,19 +1,16 @@
 import { createContext, useContext } from 'react';
+import { resolveTerminalCapabilities } from '../platform/terminal.js';
 import { appBackground, panelBackground } from './theme.js';
 const opaqueBackgrounds = { app: appBackground, panel: panelBackground };
 const transparentBackgrounds = { app: undefined, panel: undefined };
-// Respect the NO_COLOR convention (https://no-color.org): any non-empty value
-// opts the user out of our forced colors, including the dark panel fills.
-export function noColorRequested(env = process.env) {
-    return typeof env.NO_COLOR === 'string' && env.NO_COLOR.length > 0;
+// Sixteen-color palettes cannot safely reproduce our dark fills. Let those
+// terminals keep their own background while Ink quantizes the foregrounds.
+export function resolveDisplayMode(settings, env = process.env, evidence = {}) {
+    const terminal = resolveTerminalCapabilities(env, { ...settings, ...evidence });
+    const backgrounds = settings.transparentBackground || terminal.colorLevel < 2 ? transparentBackgrounds : opaqueBackgrounds;
+    return { ...backgrounds, ascii: !terminal.unicode, reduceMotion: terminal.reduceMotion, screenReader: terminal.screenReader, colorLevel: terminal.colorLevel };
 }
-// Resolve the effective display mode from the user's settings and the NO_COLOR
-// environment so light terminals keep their own background.
-export function resolveDisplayMode(settings, env = process.env) {
-    const backgrounds = settings.transparentBackground || noColorRequested(env) ? transparentBackgrounds : opaqueBackgrounds;
-    return { ...backgrounds, ascii: Boolean(settings.asciiMode), reduceMotion: Boolean(settings.reduceMotion) };
-}
-const defaultMode = { ...opaqueBackgrounds, ascii: false, reduceMotion: false };
+const defaultMode = resolveDisplayMode({}, {});
 export const DisplayContext = createContext(defaultMode);
 export function useDisplay() {
     return useContext(DisplayContext);

package/dist/ui/help-content.js

@@ -20,7 +20,7 @@ export const keyHelpSections = [
             { keys: ', / . or F7/F9', description: 'Previous / next station' },
             { keys: '+ / -', description: 'Volume up / down' },
             { keys: 'm', description: 'Mute / unmute' },
-            { keys: 'f', description: 'Favorite the station' },
+            { keys: 'f / Ctrl+F', description: 'Favorite the station (Ctrl+F while typing in Search)' },
             { keys: 'O', description: 'Open station homepage' },
             { keys: 'y', description: 'Copy stream URL' },
             { keys: 's', description: 'Sleep timer (Now Playing)' },
@@ -70,7 +70,7 @@ export const commandHelp = [
     { name: 'ascii', args: '<on|off>', description: 'ASCII-safe display' },
     { name: 'motion', args: '<on|off>', description: 'Reduce motion' },
     { name: 'background', args: '<on|off>', description: 'Transparent background' },
-    { name: 'airplay', description: 'Open AirPlay settings' },
+    { name: 'airplay', description: 'Open AirPlay settings (macOS only)' },
     { name: 'learn', args: '<previous|play|next>', description: 'Learn a media key' },
     { name: 'keys', args: '[reset]', description: 'Show or reset learned media keys' },
     { name: 'favorite', description: 'Favorite the current station (alias :fav)' },
@@ -78,8 +78,9 @@ export const commandHelp = [
     { name: 'map', description: 'Open the world map' },
     { name: 'stats', description: 'Open listening stats' },
     { name: 'settings', description: 'Open settings' },
-    { name: 'export', args: '[backup.json]', description: 'Export preferences and library' },
-    { name: 'import', args: '<backup.json>', description: 'Restore preferences and library' },
+    { name: 'import', args: '<stream-url> [name]', description: 'Add a custom station and discover its details' },
+    { name: 'export', args: '[backup.json]', description: 'Back up preferences and library' },
+    { name: 'restore', args: '<backup.json>', description: 'Restore preferences and library' },
     { name: 'update', description: 'Show the install command for the latest release' },
     { name: 'stop', description: 'Stop playback' },
     { name: 'help', description: 'Open this help' }
@@ -103,7 +104,6 @@ export const commandNames = [
     'airplay-code',
     'airplay-settings',
     'backup',
-    'restore',
     ...commandHelp.map(entry => entry.name)
 ].sort((a, b) => a.localeCompare(b));
 // Complete a partial command name to the longest shared prefix of its matches.

package/dist/ui/layout.js

@@ -18,8 +18,11 @@ export function computeTerminalLayout(columns = 100, rows = 30, footerRows = 2)
     const reservedFooterRows = Math.min(desiredFooterRows, Math.max(0, safeRows - topRows - 1));
     const contentRows = Math.max(1, safeRows - reservedFooterRows - topRows);
     const mapMode = frameWidth >= 88 && contentRows >= 24 ? 'full' : 'compact';
-    const stationRows = clamp(contentRows - 6, 1, 48);
-    const countryRows = clamp(contentRows - 5, 1, 64);
+    // Derive list windows from the live terminal height. Capping these values
+    // leaves the lower half of tall/full-screen terminals unused while the
+    // selection continues scrolling through rows that could already be visible.
+    const stationRows = Math.max(1, contentRows - 6);
+    const countryRows = Math.max(1, contentRows - 5);
     return {
         columns: safeColumns,
         rows: safeRows,

package/dist/ui/page-footer.js

@@ -13,7 +13,7 @@ export function fullStatusFooterRows(screen, message, footerMessage, playbackSta
         { key: 'playback', text: footerMessage ?? playbackStatus ?? ' ' }
     ];
 }
-export function pageFooterText({ capturingTransportAction, commandMode, commandText, editingCountryFilter, editingSearch, canEnterAirPlayCode, playbackBackend, screen }) {
+export function pageFooterText({ capturingTransportAction, commandMode, commandText, editingCountryFilter, editingSearch, canEnterAirPlayCode, airPlaySupported = true, playbackBackend, screen, settingsPage = 'root' }) {
     if (capturingTransportAction) {
         return `Learn ${mediaActionLabel(capturingTransportAction)} key: press key · Esc cancel`;
     }
@@ -24,7 +24,7 @@ export function pageFooterText({ capturingTransportAction, commandMode, commandT
         return '↑/↓ move · Enter open · number jump · l location · : command';
     }
     if (screen === 'search' && editingSearch) {
-        return 'Type query · ↑/↓ move results · Ctrl+↑/↓ history · Enter search/tune · Esc finish';
+        return 'Type query · ↑/↓ move results · Ctrl+↑/↓ history · Enter search/tune · Ctrl+F favorite · Esc finish';
     }
     if (screen === 'search') {
         return '/ edit query · ↑/↓ or n/p move · Enter tune · f favorite · b Overview';
@@ -58,7 +58,9 @@ export function pageFooterText({ capturingTransportAction, commandMode, commandT
         return 'space/F8 pause · f favorite · m mute · s sleep · d diagnostics · b Overview';
     }
     if (screen === 'settings') {
-        return 'Enter change selected · g Radio Garden · l location · x skip · o output · a AirPlay · r health · b Overview';
+        return settingsPage === 'root'
+            ? `↑/↓ choose · Enter open · o output${airPlaySupported ? ' · a AirPlay' : ''} · b Overview`
+            : '↑/↓ choose · Enter change · b Settings · shortcuts still work';
     }
     if (screen === 'airplay-settings') {
         return canEnterAirPlayCode

package/dist/ui/screen-items.js

@@ -1,6 +1,6 @@
 export const homeItems = [
     { screen: 'now-playing', label: 'Playing', detail: 'Receiver display and controls' },
-    { screen: 'library', label: 'Library', detail: 'Favorites, recent stations, imported streams' },
+    { screen: 'library', label: 'Library', detail: 'Favorites, imported streams, recent stations' },
     { 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' },
@@ -11,7 +11,9 @@ export const homeItems = [
 ];
 export const settingsGroups = [
     {
-        label: 'Playback',
+        id: 'playback',
+        label: 'Playback & audio',
+        description: 'Output, volume, AirPlay, and startup behavior',
         items: [
             'Audio output',
             'AirPlay receiver',
@@ -23,7 +25,9 @@ export const settingsGroups = [
         ]
     },
     {
-        label: 'Display',
+        id: 'appearance',
+        label: 'Appearance',
+        description: 'Colors, receiver style, motion, and terminal display',
         items: [
             'Cycle display color',
             'Cycle receiver style',
@@ -34,22 +38,40 @@ export const settingsGroups = [
         ]
     },
     {
-        label: 'Discovery & privacy',
+        id: 'discovery',
+        label: 'Discovery & providers',
+        description: 'Location, station directories, privacy, and provider health',
         items: [
             'Toggle nearby location lookup',
             'Toggle Radio Garden experimental adapter',
-            'Share favorite votes with Radio Browser'
+            'Share favorite votes with Radio Browser',
+            'Refresh provider health'
         ]
     },
     {
-        label: 'Data',
+        id: 'data',
+        label: 'Data & library',
+        description: 'Back up or restore preferences and saved stations',
         items: [
             'Export preferences and library',
-            'Import preferences and library'
+            'Restore preferences and library'
         ]
     },
     {
+        id: 'agent',
+        label: 'Agent control & MCP',
+        description: 'Local agent access and MCP playback behavior',
+        items: [
+            'Allow local agent control',
+            'Install or repair MCP integrations',
+            'Open TUI for agent playback',
+            'Show Now Playing for agent playback'
+        ]
+    },
+    {
+        id: 'media-keys',
         label: 'Media keys',
+        description: 'Teach RadioCLI your keyboard playback controls',
         items: [
             'Learn previous media key',
             'Learn play/pause media key',
@@ -58,14 +80,23 @@ export const settingsGroups = [
         ]
     },
     {
-        label: 'Maintenance',
+        id: 'updates',
+        label: 'Updates',
+        description: 'Automatic launch checks, version status, and installation',
         items: [
-            'Refresh provider health',
+            'Automatically check for updates',
             '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';
+export const settingsRootItems = settingsGroups.map(group => group.label);
+export function settingsGroup(page) {
+    return settingsGroups.find(group => group.id === page);
+}
+export function settingsItemsForPage(page) {
+    return page === 'root' ? settingsRootItems : settingsGroup(page)?.items ?? [];
+}
+export function settingsPageForRootItem(item) {
+    return settingsGroups.find(group => group.label === item)?.id;
 }

package/dist/ui/screen-meta.js

@@ -12,7 +12,7 @@ export const primaryScreens = [
 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' },
+    library: { tabLabel: 'Library', title: 'Library', description: 'Favorites, imported streams, and recents' },
     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' },

package/dist/ui/screens/AirPlayCodeScreen.js

@@ -2,16 +2,20 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from 'ink';
 import { ScreenHeader } from '../components/ScreenHeader.js';
 import { truncate } from '../format.js';
+import { useDisplay } from '../display-context.js';
+import { toAsciiSafe } from '../ascii.js';
 import { textDim, textMuted, themeAccent } from '../theme.js';
 export function AirPlayCodeScreen({ code, playback, selectedDevice, theme, width }) {
+    const { ascii } = useDisplay();
+    const a = (value) => ascii ? toAsciiSafe(value) : value;
     const accent = themeAccent(theme);
     const lineWidth = Math.max(24, width - 4);
     const promptActive = isAirPlayCodePromptActive(playback);
     const receiverName = playback.airPlayDeviceName ?? selectedDevice?.name ?? 'selected receiver';
     const masked = code.length > 0 ? '*'.repeat(code.length) : '';
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(ScreenHeader, { title: "AirPlay Code", subtitle: "Enter the code shown on the receiver", right: promptActive ? 'Waiting for code' : 'Not requested', width: width, theme: theme }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsxs(Text, { color: textMuted, children: ["Receiver: ", _jsx(Text, { color: accent, children: truncate(receiverName, Math.max(8, lineWidth - 10)) })] }), _jsxs(Text, { color: textMuted, children: ["Playback: ", _jsx(Text, { color: accent, children: playback.backend }), " / ", playback.state] }), _jsx(Text, { color: promptActive ? accent : 'yellow', children: promptActive
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(ScreenHeader, { title: "AirPlay Code", subtitle: "Enter the code shown on the receiver", right: promptActive ? 'Waiting for code' : 'Not requested', width: width, theme: theme }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsxs(Text, { color: textMuted, children: ["Receiver: ", _jsx(Text, { color: accent, children: a(truncate(receiverName, Math.max(8, lineWidth - 10))) })] }), _jsxs(Text, { color: textMuted, children: ["Playback: ", _jsx(Text, { color: accent, children: playback.backend }), " / ", playback.state] }), _jsx(Text, { color: promptActive ? accent : 'yellow', children: promptActive
                             ? 'The receiver is asking for a code now.'
-                            : 'Tune a station with AirPlay first; this screen is used once the receiver asks for a code.' })] }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { color: textMuted, bold: true, children: "Code" }), _jsx(Text, { color: code ? accent : textDim, children: code ? masked : 'type the code from the receiver' }), _jsx(Text, { color: textDim, children: "Enter submits \u00B7 Backspace edits \u00B7 Esc returns to AirPlay" })] })] }));
+                            : 'Tune a station with AirPlay first; this screen is used once the receiver asks for a code.' })] }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { color: textMuted, bold: true, children: "Code" }), _jsx(Text, { color: code ? accent : textDim, children: code ? masked : 'type the code from the receiver' }), _jsx(Text, { color: textDim, children: a('Enter submits · Backspace edits · Esc returns to AirPlay') })] })] }));
 }
 export function isAirPlayCodePromptActive(playback) {
     return playback.backend === 'airplay' && playback.message === 'AirPlay code required. Use :airplay-code 1234.';

package/dist/ui/screens/AirPlaySettingsScreen.js

@@ -7,7 +7,11 @@ import { ScreenHeader } from '../components/ScreenHeader.js';
 import { truncate } from '../format.js';
 import { textDim, textMuted, themeAccent } from '../theme.js';
 import { visibleWindow } from '../list-window.js';
+import { useDisplay } from '../display-context.js';
+import { toAsciiSafe } from '../ascii.js';
 export function AirPlaySettingsScreen({ selected, settings, backends, devices, theme, width, height }) {
+    const { ascii } = useDisplay();
+    const a = (value) => ascii ? toAsciiSafe(value) : value;
     const accent = themeAccent(theme);
     const availability = airPlayAvailability(backends, devices);
     const selectedDevice = selectedAirPlayDevice(settings, devices);
@@ -16,11 +20,11 @@ export function AirPlaySettingsScreen({ selected, settings, backends, devices, t
     const lineWidth = Math.max(24, width - 4);
     const preferredOutput = audioOutputLabel(settings.preferredBackend);
     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) => {
+    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 }), a(' · Streaming: '), _jsx(Text, { color: availability.ready ? accent : 'yellow', children: availability.ready ? 'ready' : 'unavailable' }), a(' · Receivers: '), _jsx(Text, { color: accent, children: devices.length })] }), _jsx(Text, { color: availability.ready ? textMuted : 'yellow', children: a(truncate(availability.detail, lineWidth)) }), _jsxs(Text, { color: textMuted, children: ["Selected: ", _jsx(Text, { color: selectedDevice ? accent : textDim, children: a(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: ", a(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' : '';
                             const detail = truncate(airPlayDeviceDetail(device), Math.max(12, lineWidth - name.length - selectedLabel.length - 5));
-                            return (_jsxs(Box, { children: [_jsx(Pointer, { active: active }), _jsx(Text, { color: active ? accent : undefined, bold: active, children: name }), isSelected ? _jsx(Text, { color: accent, children: selectedLabel }) : null, _jsxs(Text, { color: textMuted, children: [" \u00B7 ", detail] })] }));
-                        } })) : (_jsx(Text, { color: textMuted, children: "No receivers discovered." })), _jsx(Text, { color: textDim, children: canEnterCode ? 'Enter selects · c opens code entry · r refreshes receivers' : 'Enter selects · r refreshes receivers' })] })] }));
+                            return (_jsxs(Box, { children: [_jsx(Pointer, { active: active }), _jsx(Text, { color: active ? accent : undefined, bold: active, children: a(name) }), isSelected ? _jsx(Text, { color: accent, children: selectedLabel }) : null, _jsx(Text, { color: textMuted, children: a(` · ${detail}`) })] }));
+                        } })) : (_jsx(Text, { color: textMuted, children: "No receivers discovered." })), _jsx(Text, { color: textDim, children: a(canEnterCode ? 'Enter selects · c opens code entry · r refreshes receivers' : 'Enter selects · r refreshes receivers') })] })] }));
 }

package/dist/ui/screens/AlarmsScreen.js

@@ -76,12 +76,13 @@ export function AlarmRingingScreen({ sessions, alarms = [], selected, snoozeMinu
     const accent = themeAccent(theme);
     const session = sessions[selected];
     const label = session ? alarms.find(alarm => alarm.id === session.status.alarmId)?.label : undefined;
+    const starting = session?.status.state === 'starting';
     const { ascii } = useDisplay();
     const a = (value) => ascii ? toAsciiSafe(value) : value;
     const roomy = width >= 42 && height >= 12;
     const clockText = session ? formatClock(new Date(session.status.scheduledAt)) : '';
     const displayClock = roomy && !ascii ? fullwidthClock(clockText) : clockText;
-    return _jsxs(Box, { flexDirection: "column", height: height, width: width, overflow: "hidden", children: [_jsx(ScreenHeader, { title: "Alarm ringing", subtitle: sessions.length > 1 ? `${selected + 1} of ${sessions.length} active alarms` : 'Wake radio · playing now', theme: theme, width: width }), session ? _jsxs(Box, { flexDirection: "column", alignItems: "center", width: width, children: [_jsx(Text, { backgroundColor: accent, color: "black", bold: true, children: a('  ALARM ACTIVE  ') }), _jsx(Box, { marginTop: roomy ? 1 : 0, children: _jsx(Text, { backgroundColor: roomy ? accent : undefined, color: roomy ? 'black' : accent, bold: true, children: a(roomy ? `      ${displayClock}      ` : displayClock) }) }), _jsxs(Box, { flexDirection: "column", alignItems: "center", marginTop: roomy ? 1 : 0, width: width, children: [_jsx(Text, { color: accent, bold: true, children: a(truncate(label ? `${session.status.stationName} · ${label}` : session.status.stationName, width)) }), height >= 12 ? _jsx(Text, { color: textMuted, children: a(truncate(`Started ${formatElapsed(session.status.startedAt)} ago · scheduled ${formatWhen(new Date(session.status.scheduledAt))}`, width)) }) : null] }), _jsxs(Box, { marginTop: 1, flexDirection: width >= 58 ? 'row' : 'column', alignItems: "center", children: [_jsx(Text, { backgroundColor: accent, color: "black", bold: true, children: a('  ENTER  KEEP PLAYING  ') }), width >= 58 ? _jsx(Text, { children: "  " }) : null, _jsx(Text, { backgroundColor: accent, color: "black", bold: true, children: a(`  SPACE  SNOOZE ${snoozeMinutes} MIN  `) })] }), height >= 14 ? _jsx(Text, { color: textMuted, children: a('Enter opens Playing · Space stops the radio until snooze ends · b return') }) : null, sessions.length > 1 && height >= 15 ? _jsx(Text, { color: textMuted, children: a(`↑/↓ choose active alarm · ${selected + 1}/${sessions.length}`) }) : null] }) : _jsx(Text, { color: textMuted, children: "The alarm session ended. Press b to return." })] });
+    return _jsxs(Box, { flexDirection: "column", height: height, width: width, overflow: "hidden", children: [_jsx(ScreenHeader, { title: "Alarm ringing", subtitle: sessions.length > 1 ? `${selected + 1} of ${sessions.length} active alarms` : starting ? 'Wake radio · preparing station' : 'Wake radio · playing now', theme: theme, width: width }), session ? _jsxs(Box, { flexDirection: "column", alignItems: "center", width: width, children: [_jsx(Text, { backgroundColor: accent, color: "black", bold: true, children: a(starting ? '  ALARM STARTING  ' : '  ALARM ACTIVE  ') }), _jsx(Box, { marginTop: roomy ? 1 : 0, children: _jsx(Text, { backgroundColor: roomy ? accent : undefined, color: roomy ? 'black' : accent, bold: true, children: a(roomy ? `      ${displayClock}      ` : displayClock) }) }), _jsxs(Box, { flexDirection: "column", alignItems: "center", marginTop: roomy ? 1 : 0, width: width, children: [_jsx(Text, { color: accent, bold: true, children: a(truncate(label ? `${session.status.stationName} · ${label}` : session.status.stationName, width)) }), height >= 12 ? _jsx(Text, { color: textMuted, children: a(truncate(`${starting ? 'Preparing' : 'Started'} ${formatElapsed(session.status.startedAt)} ago · scheduled ${formatWhen(new Date(session.status.scheduledAt))}`, width)) }) : null] }), _jsxs(Box, { marginTop: 1, flexDirection: width >= 58 ? 'row' : 'column', alignItems: "center", children: [_jsx(Text, { backgroundColor: accent, color: "black", bold: true, children: a(starting ? '  ENTER  WAIT FOR STATION  ' : '  ENTER  KEEP PLAYING  ') }), width >= 58 ? _jsx(Text, { children: "  " }) : null, _jsx(Text, { backgroundColor: accent, color: "black", bold: true, children: a(`  SPACE  SNOOZE ${snoozeMinutes} MIN  `) })] }), height >= 14 ? _jsx(Text, { color: textMuted, children: a(starting ? 'Space snoozes before playback · b return' : 'Enter opens Playing · Space stops the radio until snooze ends · b return') }) : null, sessions.length > 1 && height >= 15 ? _jsx(Text, { color: textMuted, children: a(`↑/↓ choose active alarm · ${selected + 1}/${sessions.length}`) }) : null] }) : _jsx(Text, { color: textMuted, children: "The alarm session ended. Press b to return." })] });
 }
 function editorRows(draft) {
     const next = draftNextOccurrence(draft);

package/dist/ui/screens/CountriesScreen.js

@@ -4,16 +4,19 @@ 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 { displayWidth, truncate } from '../format.js';
-export function CountriesScreen({ countries, selected, loading, filter, editingFilter, theme, pageSize, width }) {
+import { displayWidth } from '../format.js';
+import { AdaptiveMarquee } from '../components/AdaptiveMarquee.js';
+export function CountriesScreen({ countries, selected, loading, filter, editingFilter, theme, pageSize, width, reduceMotion = false }) {
     const window = visibleWindow(countries, selected, pageSize);
     const rowWidth = Math.max(24, width - 2);
     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));
+    // Keep the metadata column fixed while the viewport scrolls. Forty-two cells
+    // accommodates long directory names such as Lao People's Democratic Republic
+    // plus its country code, while narrow terminals still receive a bounded row.
+    const countryWidth = Math.min(42, 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"] }) })] }));
+                            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: _jsx(AdaptiveMarquee, { text: country.name, width: nameWidth, active: active, reduceMotion: reduceMotion }) }), _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] }));
 }