@ciphore/radiocli 0.2.2 → 0.2.4

package/dist/ui/AdaptiveContent.js

@@ -5,7 +5,7 @@ import { computeListeningStats } from '../activity/stats.js';
 import { playbackBackendLabel } from '../player/backend-install.js';
 import { visibleWindow } from './list-window.js';
 import { displayWidth, padDisplayEnd, stationLocation, stationTags, stationTech, truncate } from './format.js';
-import { homeItems, settingsItems, settingsSectionFor } from './screen-items.js';
+import { homeItems, settingsGroup, settingsGroups, settingsItemsForPage } from './screen-items.js';
 import { screenTitle } from './screen-meta.js';
 import { keyHelpSections, commandHelp } from './help-content.js';
 import { settingLabel, settingValue } from './screens/SettingsScreen.js';
@@ -23,9 +23,9 @@ export function AdaptiveContent(props) {
     return _jsx(AdaptiveContentBody, { ...props });
 }
 function AdaptiveContentBody(props) {
-    const { mode, screen, selected, height, width, theme, playback, playingStation, nowPlaying, stations, countries, airPlayDevices, airPlayCode, searchQuery, editingSearch, countryFilter, loadingCountries, loadingStations, exploreCursor, library, diagnostics, backends, updateCheck, favoriteKeys, stationTitle, } = props;
+    const { mode, screen, settingsPage = 'root', selected, height, width, theme, playback, playingStation, nowPlaying, stations, countries, airPlayDevices, airPlayCode, searchQuery, editingSearch, countryFilter, loadingCountries, loadingStations, exploreCursor, library, diagnostics, backends, updateCheck, appVersion, favoriteKeys, stationTitle, airPlaySupported = true, } = props;
     const accent = themeAccent(theme);
-    const { ascii } = useDisplay();
+    const { ascii, reduceMotion } = useDisplay();
     const { bodyRows } = adaptiveFrameMetrics(mode, height);
     const title = screenTitle(screen);
     const status = adaptiveStatus(props);
@@ -33,14 +33,15 @@ function AdaptiveContentBody(props) {
         return (_jsx(AdaptiveHome, { mode: mode, selected: selected, height: height, width: width, theme: theme, library: library }));
     }
     if (screen === 'now-playing') {
-        return (_jsx(AdaptiveNowPlaying, { mode: mode, station: playingStation, playback: playback, metadata: nowPlaying, width: width, height: height, ascii: ascii, theme: theme, receiverStyle: library.settings.receiverStyle, reduceMotion: Boolean(library.settings.reduceMotion) }));
+        return (_jsx(AdaptiveNowPlaying, { mode: mode, station: playingStation, playback: playback, metadata: nowPlaying, width: width, height: height, ascii: ascii, theme: theme, receiverStyle: library.settings.receiverStyle, reduceMotion: reduceMotion }));
     }
     if (screen === 'explore') {
-        return (_jsx(AdaptiveExplore, { mode: mode, width: width, height: height, theme: theme, stations: stations, selected: selected, favorites: favoriteKeys, cursor: exploreCursor, loading: loadingStations, error: props.stationError, ascii: ascii, reduceMotion: Boolean(library.settings.reduceMotion) }));
+        return (_jsx(AdaptiveExplore, { mode: mode, width: width, height: height, theme: theme, stations: stations, selected: selected, favorites: favoriteKeys, cursor: exploreCursor, loading: loadingStations, error: props.stationError, ascii: ascii, reduceMotion: reduceMotion }));
     }
     if (screen === 'search') {
         const rows = adaptiveRows({
             screen,
+            settingsPage,
             stations,
             countries,
             airPlayDevices,
@@ -48,11 +49,13 @@ function AdaptiveContentBody(props) {
             diagnostics,
             backends,
             updateCheck,
+            appVersion,
             favoriteKeys,
             selected,
             width,
             mode,
-            ascii
+            ascii,
+            airPlaySupported
         });
         const empty = adaptiveEmptyState({
             screen,
@@ -65,7 +68,7 @@ function AdaptiveContentBody(props) {
             stationTitle,
             stationError: props.stationError
         });
-        return (_jsx(AdaptiveSearch, { mode: mode, query: searchQuery, editing: editingSearch, loading: loadingStations, rows: rows, empty: empty, selected: selected, height: height, width: width, theme: theme, ascii: ascii, reduceMotion: Boolean(library.settings.reduceMotion) }));
+        return (_jsx(AdaptiveSearch, { mode: mode, query: searchQuery, editing: editingSearch, loading: loadingStations, rows: rows, empty: empty, selected: selected, height: height, width: width, theme: theme, ascii: ascii, reduceMotion: reduceMotion }));
     }
     if (screen === 'stats') {
         const stats = computeListeningStats(library.activity.sessions);
@@ -84,10 +87,11 @@ function AdaptiveContentBody(props) {
     }
     if (screen === 'airplay-code') {
         const prompt = airPlayCode ? `Code: ${airPlayCode}` : 'Type the code shown by the receiver.';
-        return (_jsx(AdaptiveFrame, { title: title, status: status, mode: mode, height: height, width: width, theme: theme, children: bodyRows > 0 ? _jsx(Text, { color: airPlayCode ? accent : textMuted, children: truncate(prompt, width) }) : null }));
+        return (_jsx(AdaptiveFrame, { title: title, status: status, mode: mode, height: height, width: width, theme: theme, children: bodyRows > 0 ? _jsx(Text, { color: airPlayCode ? accent : textMuted, children: ascii ? toAsciiSafe(truncate(prompt, width)) : truncate(prompt, width) }) : null }));
     }
     const rows = adaptiveRows({
         screen,
+        settingsPage,
         stations,
         countries,
         airPlayDevices,
@@ -95,11 +99,13 @@ function AdaptiveContentBody(props) {
         diagnostics,
         backends,
         updateCheck,
+        appVersion,
         favoriteKeys,
         selected,
         width,
         mode,
-        ascii
+        ascii,
+        airPlaySupported
     });
     const empty = adaptiveEmptyState({
         screen,
@@ -112,11 +118,12 @@ function AdaptiveContentBody(props) {
         stationTitle,
         stationError: props.stationError
     });
-    return (_jsx(AdaptiveFrame, { title: title, status: status, mode: mode, height: height, width: width, theme: theme, children: rows.length > 0 ? (_jsx(AdaptiveList, { rows: rows, selected: selected, pageSize: bodyRows, width: width, theme: theme, reduceMotion: Boolean(library.settings.reduceMotion) })) : (_jsx(StaticRows, { rows: empty.slice(0, bodyRows), width: width, theme: theme })) }));
+    return (_jsx(AdaptiveFrame, { title: title, status: status, mode: mode, height: height, width: width, theme: theme, children: rows.length > 0 ? (_jsx(AdaptiveList, { rows: rows, selected: selected, pageSize: bodyRows, width: width, theme: theme, reduceMotion: reduceMotion })) : (_jsx(StaticRows, { rows: empty.slice(0, bodyRows), width: width, theme: theme })) }));
 }
 function AdaptiveExplore({ mode, width, height, theme, stations, selected, favorites, cursor, loading, error, ascii, reduceMotion }) {
     const accent = themeAccent(theme);
     const { headerRows, headerGap, bodyRows } = adaptiveExploreFrameMetrics(mode, height);
+    const a = (value) => ascii ? toAsciiSafe(value) : value;
     const layout = computeAdaptiveExploreLayout(mode, width, Math.max(1, bodyRows));
     const marker = React.useMemo(() => [{ lat: cursor.latitude, lon: cursor.longitude, selected: true }], [cursor.latitude, cursor.longitude]);
     const map = React.useMemo(() => buildCosmoWorldMap(layout.mapColumns, layout.mapRows, marker), [layout.mapColumns, layout.mapRows, marker]);
@@ -130,10 +137,10 @@ function AdaptiveExplore({ mode, width, height, theme, stations, selected, favor
             ? [{ key: 'error', label: error }]
             : [{ key: 'empty', label: 'No stations near this point.' }];
     const list = (_jsx(AdaptiveList, { rows: stationRows.length > 0 ? stationRows : emptyRows, selected: stationRows.length > 0 ? selected : 0, pageSize: layout.listRows, width: layout.listWidth, theme: theme, reduceMotion: reduceMotion }));
-    return (_jsxs(Box, { flexDirection: "column", height: height, width: width, overflow: "hidden", children: [_jsx(Text, { color: accent, bold: true, children: truncate(title, width) }), headerRows > 1 ? _jsx(Text, { color: textMuted, children: truncate(status, width) }) : null, headerGap ? _jsx(Box, { height: headerGap, flexShrink: 0 }) : null, bodyRows > 0 ? layout.split ? (_jsxs(Box, { flexDirection: "row", height: bodyRows, width: width, overflow: "hidden", children: [_jsx(AdaptiveCosmoMap, { rows: map, width: layout.mapAreaWidth, height: layout.mapRows, offsetX: layout.mapOffsetX, theme: theme, ascii: ascii }), layout.gap ? _jsx(Box, { width: layout.gap, flexShrink: 0 }) : null, _jsx(Box, { flexDirection: "column", width: layout.listWidth, height: layout.listRows, overflow: "hidden", children: list })] })) : (_jsxs(Box, { flexDirection: "column", height: bodyRows, width: width, overflow: "hidden", children: [_jsx(AdaptiveCosmoMap, { rows: map, width: layout.mapAreaWidth, height: layout.mapRows, offsetX: layout.mapOffsetX, theme: theme, ascii: ascii }), layout.gap ? _jsx(Box, { height: layout.gap, flexShrink: 0 }) : null, _jsx(Box, { flexDirection: "column", height: layout.listRows, width: layout.listWidth, overflow: "hidden", children: list })] })) : null] }));
+    return (_jsxs(Box, { flexDirection: "column", height: height, width: width, overflow: "hidden", children: [_jsx(Text, { color: accent, bold: true, "aria-label": title, children: a(truncate(title, width)) }), headerRows > 1 ? _jsx(Text, { color: textMuted, "aria-label": status, children: a(truncate(status, width)) }) : null, headerGap ? _jsx(Box, { height: headerGap, flexShrink: 0 }) : null, bodyRows > 0 ? layout.split ? (_jsxs(Box, { flexDirection: "row", height: bodyRows, width: width, overflow: "hidden", children: [_jsx(AdaptiveCosmoMap, { rows: map, width: layout.mapAreaWidth, height: layout.mapRows, offsetX: layout.mapOffsetX, theme: theme, ascii: ascii }), layout.gap ? _jsx(Box, { width: layout.gap, flexShrink: 0 }) : null, _jsx(Box, { flexDirection: "column", width: layout.listWidth, height: layout.listRows, overflow: "hidden", children: list })] })) : (_jsxs(Box, { flexDirection: "column", height: bodyRows, width: width, overflow: "hidden", children: [_jsx(AdaptiveCosmoMap, { rows: map, width: layout.mapAreaWidth, height: layout.mapRows, offsetX: layout.mapOffsetX, theme: theme, ascii: ascii }), layout.gap ? _jsx(Box, { height: layout.gap, flexShrink: 0 }) : null, _jsx(Box, { flexDirection: "column", height: layout.listRows, width: layout.listWidth, overflow: "hidden", children: list })] })) : null] }));
 }
 function AdaptiveCosmoMap({ rows, width, height, offsetX, theme, ascii }) {
-    return (_jsx(Box, { flexDirection: "column", width: width, height: height, overflow: "hidden", flexShrink: 0, children: rows.map((row, rowIndex) => {
+    return (_jsx(Box, { flexDirection: "column", width: width, height: height, overflow: "hidden", flexShrink: 0, "aria-hidden": true, children: rows.map((row, rowIndex) => {
             const chunks = [];
             for (const cell of row.cells) {
                 const previous = chunks.at(-1);
@@ -162,11 +169,12 @@ function adaptiveMapColor(kind, theme) {
 function AdaptiveFrame({ title, status, mode, height, width, theme, children }) {
     const accent = themeAccent(theme);
     const { ascii } = useDisplay();
+    const a = (value) => ascii ? toAsciiSafe(value) : value;
     const titlePrefix = mode === 'micro' ? 'RC / ' : 'RADIOCLI  ';
     const titleText = truncate(`${titlePrefix}${title}${mode === 'micro' && status ? ` · ${status}` : ''}`, width);
     const ruleWidth = Math.max(0, width - displayWidth(titleText) - 1);
     const { bodyRows, gapRows } = adaptiveFrameMetrics(mode, height);
-    return (_jsxs(Box, { flexDirection: "column", height: height, width: width, overflow: "hidden", children: [_jsxs(Text, { color: accent, bold: true, children: [titleText, _jsx(Text, { color: textDim, children: ruleWidth ? ` ${(ascii ? '-' : '─').repeat(ruleWidth)}` : '' })] }), mode === 'compact' && height >= 4 ? _jsx(Text, { color: textMuted, children: truncate(status, width) }) : null, gapRows ? _jsx(Box, { height: gapRows, flexShrink: 0 }) : null, _jsx(Box, { flexDirection: "column", height: bodyRows, overflow: "hidden", flexShrink: 0, children: children }), gapRows ? _jsx(Box, { height: gapRows, flexShrink: 0 }) : null] }));
+    return (_jsxs(Box, { flexDirection: "column", height: height, width: width, overflow: "hidden", children: [_jsxs(Text, { color: accent, bold: true, "aria-label": `${titlePrefix}${title}${status ? `. ${status}` : ''}`, children: [a(titleText), _jsx(Text, { color: textDim, "aria-hidden": true, children: ruleWidth ? ` ${(ascii ? '-' : '─').repeat(ruleWidth)}` : '' })] }), mode === 'compact' && height >= 4 ? _jsx(Text, { color: textMuted, "aria-label": status, children: a(truncate(status, width)) }) : null, gapRows ? _jsx(Box, { height: gapRows, flexShrink: 0 }) : null, _jsx(Box, { flexDirection: "column", height: bodyRows, overflow: "hidden", flexShrink: 0, children: children }), gapRows ? _jsx(Box, { height: gapRows, flexShrink: 0 }) : null] }));
 }
 function adaptiveFrameMetrics(mode, height) {
     const headerRows = mode === 'compact' && height >= 4 ? 2 : 1;
@@ -178,6 +186,8 @@ function adaptiveFrameMetrics(mode, height) {
 }
 function AdaptiveHome({ mode, selected, height, width, theme, library }) {
     const gapRows = height >= 5 ? 1 : 0;
+    const { ascii } = useDisplay();
+    const a = (value) => ascii ? toAsciiSafe(value) : value;
     const showSummary = mode === 'compact' && height >= 10;
     const menuRows = Math.max(1, height - 1 - gapRows * 2 - (showSummary ? 1 : 0));
     const selectedIndex = Math.min(Math.max(selected, 0), homeItems.length - 1);
@@ -187,8 +197,8 @@ function AdaptiveHome({ mode, selected, height, width, theme, library }) {
                     const absoluteIndex = window.start + offset;
                     const active = absoluteIndex === selectedIndex;
                     const detail = mode === 'compact' && width >= 52 ? ` · ${item.detail}` : '';
-                    return (_jsxs(Text, { color: active ? accent : undefined, bold: active, children: [active ? '> ' : '  ', absoluteIndex + 1, " ", truncate(`${item.label}${detail}`, Math.max(1, width - 4))] }, item.screen));
-                }) }), showSummary ? (_jsx(Text, { color: textMuted, children: truncate(`${library.recent.length} recent · ${library.favorites.length} favorites · ${library.imported.length} imported`, width) })) : null, gapRows ? _jsx(Box, { height: gapRows, flexShrink: 0 }) : null] }));
+                    return (_jsxs(Text, { color: active ? accent : undefined, bold: active, "aria-label": `${active ? 'Selected: ' : ''}${absoluteIndex + 1}. ${item.label}. ${item.detail}`, children: [active ? '> ' : '  ', absoluteIndex + 1, " ", a(truncate(`${item.label}${detail}`, Math.max(1, width - 4)))] }, item.screen));
+                }) }), showSummary ? (_jsx(Text, { color: textMuted, children: a(truncate(`${library.recent.length} recent · ${library.favorites.length} favorites · ${library.imported.length} imported`, width)) })) : null, gapRows ? _jsx(Box, { height: gapRows, flexShrink: 0 }) : null] }));
 }
 function AdaptiveList({ rows, selected, pageSize, width, theme, reduceMotion }) {
     const selectedIndex = Math.min(Math.max(selected, 0), Math.max(0, rows.length - 1));
@@ -201,35 +211,37 @@ function AdaptiveList({ rows, selected, pageSize, width, theme, reduceMotion })
             const detail = row.detail ? `${row.separator ?? ' · '}${row.detail}` : '';
             const text = `${row.label}${detail}`;
             const favoriteWidth = row.favoriteGlyph ? 2 : 0;
-            return (_jsxs(Text, { color: active ? accent : row.heading ? textMuted : undefined, bold: active || row.heading, children: [prefix, _jsx(AdaptiveMarquee, { text: text, width: Math.max(0, width - 2 - favoriteWidth), active: active && Boolean(row.marquee), reduceMotion: reduceMotion }), row.favoriteGlyph ? _jsxs(Text, { color: "yellow", children: [" ", row.favoriteGlyph] }) : null] }, row.key));
+            return (_jsxs(Text, { color: active ? accent : row.heading ? textMuted : undefined, bold: active || row.heading, "aria-label": `${active ? 'Selected: ' : ''}${text}${row.favoriteGlyph ? '. Favorite' : ''}`, children: [prefix, _jsx(AdaptiveMarquee, { text: text, width: Math.max(0, width - 2 - favoriteWidth), active: active && Boolean(row.marquee), reduceMotion: reduceMotion }), row.favoriteGlyph ? _jsxs(Text, { color: "yellow", children: [" ", row.favoriteGlyph] }) : null] }, row.key));
         }) }));
 }
 function StaticRows({ rows, width, theme }) {
     const accent = themeAccent(theme);
-    return (_jsx(Box, { flexDirection: "column", children: rows.map(row => (_jsxs(Text, { color: row.heading ? textMuted : undefined, bold: row.heading, children: [truncate(row.detail ? `${row.label} · ${row.detail}` : row.label, width), row.key === 'activity' ? _jsx(Text, { color: accent }) : null] }, row.key))) }));
+    const { ascii } = useDisplay();
+    return (_jsx(Box, { flexDirection: "column", children: rows.map(row => (_jsxs(Text, { color: row.heading ? textMuted : undefined, bold: row.heading, "aria-label": row.detail ? `${row.label}: ${row.detail}` : row.label, children: [ascii ? toAsciiSafe(truncate(row.detail ? `${row.label} · ${row.detail}` : row.label, width)) : truncate(row.detail ? `${row.label} · ${row.detail}` : row.label, width), row.key === 'activity' ? _jsx(Text, { color: accent }) : null] }, row.key))) }));
 }
 function AdaptiveNowPlaying({ mode, station, playback, metadata, width, height, ascii, theme, receiverStyle, reduceMotion }) {
     const pulse = useReceiverPulse();
+    const { screenReader } = useDisplay();
     const accent = themeAccent(theme);
     const stationName = station?.name ?? 'No station tuned';
-    const showMetadata = mode === 'compact' && height >= 9 && Boolean(metadata?.title);
+    const showMetadata = Boolean(metadata?.title) && (screenReader || mode === 'compact' && height >= 9);
     const headerRows = mode === 'compact' ? 2 : 1;
     const metadataRows = showMetadata ? 1 : 0;
     const gapRows = height >= 5 ? 1 : 0;
     const availableVisualRows = Math.max(1, height - headerRows - metadataRows - gapRows * 2);
     const visualHeight = visualizerHeight(receiverStyle, availableVisualRows, width);
-    const visualRows = buildVisualizer(receiverStyle, pulse, width, visualHeight, station, playback, theme, mode === 'micro' ? 'micro' : 'standard');
+    const visualRows = screenReader ? [] : buildVisualizer(receiverStyle, pulse, width, visualHeight, station, playback, theme, mode === 'micro' ? 'micro' : 'standard');
     const header = mode === 'micro'
         ? `${stationName} · ${playback.state}`
         : 'RADIOCLI  Now playing';
     const status = `${stationName}  ${playback.state}${playback.muted ? ' · muted' : ` · vol ${playback.volume}`}`;
-    return (_jsxs(Box, { flexDirection: "column", height: height, width: width, overflow: "hidden", children: [_jsx(Text, { color: accent, bold: true, children: mode === 'micro'
+    return (_jsxs(Box, { flexDirection: "column", height: height, width: width, overflow: "hidden", children: [_jsx(Text, { color: accent, bold: true, "aria-label": mode === 'micro' ? `Now playing. Station: ${stationName}. Playback: ${playback.state}, ${playback.muted ? 'muted' : `volume ${playback.volume}`}` : undefined, children: mode === 'micro'
                     ? _jsx(AdaptiveMarquee, { text: header, width: width, active: true, reduceMotion: reduceMotion })
-                    : truncate(header, width) }), mode === 'compact' ? _jsx(Text, { color: textMuted, children: truncate(status, width) }) : null, gapRows ? _jsx(Box, { height: gapRows, flexShrink: 0 }) : null, _jsx(Box, { flexDirection: "column", height: availableVisualRows, overflow: "hidden", children: visualRows.map((row, index) => (_jsx(Text, { color: row.segments ? undefined : row.color, children: row.segments
+                    : truncate(header, width) }), mode === 'compact' ? _jsx(Text, { color: textMuted, "aria-label": `Station: ${stationName}. Playback: ${playback.state}, ${playback.muted ? 'muted' : `volume ${playback.volume}`}`, children: ascii ? toAsciiSafe(truncate(status, width)) : truncate(status, width) }) : null, gapRows ? _jsx(Box, { height: gapRows, flexShrink: 0 }) : null, !screenReader ? _jsx(Box, { flexDirection: "column", height: availableVisualRows, overflow: "hidden", "aria-hidden": true, children: visualRows.map((row, index) => (_jsx(Text, { color: row.segments ? undefined : row.color, children: row.segments
                         ? renderAdaptiveSegments(row.segments, ascii)
                         : ascii
                             ? toAsciiSafe(row.text)
-                            : row.text }, index))) }), showMetadata ? (_jsx(Text, { color: accent, children: _jsx(AdaptiveMarquee, { text: metadata?.title ?? '', width: width, active: true, reduceMotion: reduceMotion }) })) : null, gapRows ? _jsx(Box, { height: gapRows, flexShrink: 0 }) : null] }));
+                            : row.text }, index))) }) : null, showMetadata ? (_jsx(Text, { color: accent, "aria-label": `Track: ${metadata?.title ?? ''}`, children: _jsx(AdaptiveMarquee, { text: metadata?.title ?? '', width: width, active: true, reduceMotion: reduceMotion }) })) : null, gapRows ? _jsx(Box, { height: gapRows, flexShrink: 0 }) : null] }));
 }
 function renderAdaptiveSegments(segments, ascii) {
     let offset = 0;
@@ -242,12 +254,13 @@ function renderAdaptiveSegments(segments, ascii) {
 function AdaptiveSearch({ mode, query, editing, loading, rows, empty, selected, height, width, theme, ascii, reduceMotion }) {
     const accent = themeAccent(theme);
     const { panel: panelBackground } = useDisplay();
+    const a = (value) => ascii ? toAsciiSafe(value) : value;
     const fieldText = query || 'station, genre, or place';
     const prefix = loading ? (ascii ? '* ' : '⣾ ') : editing ? '› ' : '/ ';
     const fieldRows = height >= 4 ? 3 : 1;
     const gapRows = height >= 6 ? 1 : 0;
     const listRows = Math.max(0, height - 1 - fieldRows - gapRows * 2);
-    return (_jsxs(Box, { flexDirection: "column", height: height, width: width, overflow: "hidden", children: [_jsx(Text, { color: accent, bold: true, children: mode === 'micro' ? 'SEARCH' : 'RADIOCLI  Search' }), fieldRows === 3 ? (_jsxs(Box, { borderStyle: panelBorderStyle(ascii, 'single'), borderColor: editing || loading ? accent : panelBorder, borderBackgroundColor: panelBackground, backgroundColor: panelBackground, width: width, height: 3, flexShrink: 0, children: [_jsx(Text, { color: editing || loading ? accent : textMuted, children: prefix }), _jsx(Text, { color: query ? accent : textMuted, children: truncate(fieldText, Math.max(1, width - 5)) })] })) : (_jsx(Text, { color: query ? accent : textMuted, children: truncate(`[${prefix}${fieldText}]`, width) })), gapRows ? _jsx(Box, { height: gapRows, flexShrink: 0 }) : null, _jsx(Box, { flexDirection: "column", height: listRows, overflow: "hidden", flexShrink: 0, children: rows.length > 0 ? (_jsx(AdaptiveList, { rows: rows, selected: selected, pageSize: listRows, width: width, theme: theme, reduceMotion: reduceMotion })) : (_jsx(StaticRows, { rows: empty.slice(0, listRows), width: width, theme: theme })) }), gapRows ? _jsx(Box, { height: gapRows, flexShrink: 0 }) : null] }));
+    return (_jsxs(Box, { flexDirection: "column", height: height, width: width, overflow: "hidden", children: [_jsx(Text, { color: accent, bold: true, children: mode === 'micro' ? 'SEARCH' : 'RADIOCLI  Search' }), fieldRows === 3 ? (_jsxs(Box, { borderStyle: panelBorderStyle(ascii, 'single'), borderColor: editing || loading ? accent : panelBorder, borderBackgroundColor: panelBackground, backgroundColor: panelBackground, width: width, height: 3, flexShrink: 0, children: [_jsx(Text, { color: editing || loading ? accent : textMuted, children: a(prefix) }), _jsx(Text, { color: query ? accent : textMuted, children: a(truncate(fieldText, Math.max(1, width - 5))) })] })) : (_jsx(Text, { color: query ? accent : textMuted, children: a(truncate(`[${prefix}${fieldText}]`, width)) })), gapRows ? _jsx(Box, { height: gapRows, flexShrink: 0 }) : null, _jsx(Box, { flexDirection: "column", height: listRows, overflow: "hidden", flexShrink: 0, children: rows.length > 0 ? (_jsx(AdaptiveList, { rows: rows, selected: selected, pageSize: listRows, width: width, theme: theme, reduceMotion: reduceMotion })) : (_jsx(StaticRows, { rows: empty.slice(0, listRows), width: width, theme: theme })) }), gapRows ? _jsx(Box, { height: gapRows, flexShrink: 0 }) : null] }));
 }
 function adaptiveRows(input) {
     const { screen, stations, countries, airPlayDevices, library, diagnostics, backends, updateCheck, favoriteKeys, selected, width, mode, ascii } = input;
@@ -255,16 +268,20 @@ function adaptiveRows(input) {
         return homeItems.map(item => ({
             key: item.screen,
             label: item.label,
-            detail: mode === 'compact' && width >= 52 ? item.detail : undefined
+            detail: mode === 'compact' && width >= 52 ? item.detail : undefined,
+            separator: '   '
         }));
     }
     if (screen === 'settings') {
-        const labels = settingsItems.map(item => settingLabel(item, updateCheck));
+        const pageItems = settingsItemsForPage(input.settingsPage);
+        const labels = pageItems.map(item => settingLabel(item, updateCheck, input.appVersion, input.airPlaySupported));
         const labelWidth = pairedColumnWidth(labels, width, mode);
-        return settingsItems.map((item, index) => ({
+        return pageItems.map((item, index) => ({
             key: item,
-            label: padDisplayEnd(truncate(settingLabel(item, updateCheck), labelWidth), labelWidth),
-            detail: settingValue(item, library.settings, diagnostics, backends, airPlayDevices, updateCheck),
+            label: padDisplayEnd(truncate(settingLabel(item, updateCheck, input.appVersion, input.airPlaySupported), labelWidth), labelWidth),
+            detail: input.settingsPage === 'root'
+                ? adaptiveSettingsRootValue(item)
+                : settingValue(item, library.settings, diagnostics, backends, airPlayDevices, updateCheck, input.appVersion),
             separator: '   ',
             index
         }));
@@ -303,6 +320,10 @@ function adaptiveRows(input) {
     }
     return stationAdaptiveRows(stations, favoriteKeys, selected, width, ascii);
 }
+function adaptiveSettingsRootValue(item) {
+    const group = settingsGroups.find(candidate => candidate.label === item);
+    return group ? `${group.items.length} settings ›` : undefined;
+}
 function stationAdaptiveRows(stations, favoriteKeys, selected, width, ascii) {
     return stations.map((station, index) => {
         const favorite = favoriteKeys.has(`${station.provider}:${station.id}`);
@@ -362,7 +383,7 @@ function adaptiveEmptyState(input) {
     return [{ key: 'empty', label: `No stations in ${stationTitle.toLowerCase()}.` }, { key: 'hint', label: 'Try another view or clear filters.' }];
 }
 function adaptiveStatus(props) {
-    const { screen, playback, playingStation, stations, countries, searchQuery, editingSearch, countryFilter, editingCountryFilter, library, filterLabel, selected } = props;
+    const { screen, playback, playingStation, stations, countries, searchQuery, editingSearch, countryFilter, editingCountryFilter, library, filterLabel } = props;
     if (screen === 'home') {
         return `${library.favorites.length} favorites · ${library.recent.length} recent · ${library.imported.length} imported`;
     }
@@ -370,7 +391,10 @@ function adaptiveStatus(props) {
         return `${playbackBackendLabel(playback.backend)} · ${playback.state} · vol ${playback.volume}`;
     }
     if (screen === 'settings') {
-        return `${settingsSectionFor(settingsItems[selected])} · Enter changes the selected setting`;
+        const group = settingsGroup(props.settingsPage ?? 'root');
+        return group
+            ? `${group.label} · Enter changes setting · b categories`
+            : 'Choose a category · Updates are available here';
     }
     if (screen === 'search') {
         const query = searchQuery || (editingSearch ? 'type to search' : 'press / to search');