@ciphore/radiocli 0.1.0

package/dist/ui/AppContent.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { themeAccent } from './theme.js';
+import { HomeScreen } from './screens/HomeScreen.js';
+import { CountriesScreen } from './screens/CountriesScreen.js';
+import { MapScreen } from './screens/MapScreen.js';
+import { SearchScreen } from './screens/SearchScreen.js';
+import { ExploreScreen } from './screens/ExploreScreen.js';
+import { StationScreen } from './screens/StationScreen.js';
+import { NowPlayingScreen } from './screens/NowPlayingScreen.js';
+import { StatsScreen } from './screens/StatsScreen.js';
+import { SettingsScreen } from './screens/SettingsScreen.js';
+export function AppContent({ backends, countryFilter, diagnostics, displayStations, editingCountryFilter, editingSearch, exploreCursor, favoriteKeys, filterLabel, filteredCountries, frameWidth, layout, library, loadingCountries, loadingStations, nowPlaying, playback, playingStation, providerHealth, pulse, searchQuery, screen, selected, showDiagnostics, sleepLabel, stationContext, stationFavorite, stationTime, storePath, theme }) {
+    if (layout.compact) {
+        return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, children: "RadioCLI" }), _jsxs(Text, { color: themeAccent(theme), children: ["Terminal too small: ", layout.columns, "x", layout.rows] }), _jsx(Text, { color: "gray", children: "Resize to at least 64x18 for the full receiver UI." }), _jsxs(Text, { color: "gray", children: ["Playback: ", playback.state, " \u00B7 ", playback.backend] }), _jsx(Text, { color: "gray", children: "q quit \u00B7 Ctrl+C always exits" })] }));
+    }
+    if (screen === 'home') {
+        return _jsx(HomeScreen, { selected: selected, theme: theme, library: library, playback: playback });
+    }
+    if (screen === 'countries') {
+        return (_jsx(CountriesScreen, { countries: filteredCountries, selected: selected, loading: loadingCountries, filter: countryFilter, editingFilter: editingCountryFilter, theme: theme, pageSize: layout.countryRows, width: frameWidth }));
+    }
+    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 }));
+    }
+    if (screen === 'search') {
+        return (_jsx(SearchScreen, { query: searchQuery, editing: editingSearch, loading: loadingStations, stations: displayStations, selected: selected, theme: theme, favorites: favoriteKeys, experimentalOn: library.settings.enableRadioGarden, filterLabel: filterLabel, pageSize: layout.stationRows, width: frameWidth }));
+    }
+    if (screen === 'explore') {
+        return (_jsx(ExploreScreen, { title: stationContext.title, subtitle: stationContext.subtitle, stations: displayStations, selected: selected, loading: loadingStations, theme: theme, favorites: favoriteKeys, filterLabel: filterLabel, cursor: exploreCursor, pageSize: layout.stationRows, width: frameWidth, height: layout.contentRows }));
+    }
+    if (screen === 'nearby' || screen === 'stations' || screen === 'library') {
+        return (_jsx(StationScreen, { title: stationContext.title, subtitle: stationContext.subtitle, stations: displayStations, selected: selected, loading: loadingStations, theme: theme, favorites: favoriteKeys, filterLabel: filterLabel, pageSize: layout.stationRows, width: frameWidth }));
+    }
+    if (screen === 'now-playing') {
+        return (_jsx(NowPlayingScreen, { station: playingStation, playback: playback, metadata: nowPlaying, theme: theme, favorite: stationFavorite, pulse: pulse, diagnostics: diagnostics, sleepLabel: sleepLabel, showDiagnostics: showDiagnostics, stationTime: stationTime, receiverStyle: library.settings.receiverStyle, width: layout.receiverWidth, height: layout.receiverRows }));
+    }
+    if (screen === 'stats') {
+        return _jsx(StatsScreen, { library: library, theme: theme, width: frameWidth, height: layout.contentRows });
+    }
+    if (screen === 'settings') {
+        return (_jsx(SettingsScreen, { selected: selected, settings: library.settings, storePath: storePath, playback: playback, backends: backends, providerHealth: providerHealth, theme: theme, diagnostics: diagnostics, width: frameWidth }));
+    }
+    return _jsx(Text, { children: "Unknown screen." });
+}

package/dist/ui/app-state.js

@@ -0,0 +1,250 @@
+const emptyMediaKeyBindings = {
+    previous: [],
+    playPause: [],
+    next: []
+};
+const mediaTransportActions = ['previous', 'playPause', 'next'];
+const sleepTimerOptions = [null, 15, 30, 60];
+export const defaultExploreCursor = {
+    latitude: 48.8566,
+    longitude: 2.3522
+};
+export const initialStationContexts = {
+    explore: {
+        title: 'Explore world',
+        subtitle: `Map cursor near ${formatExploreCursor(defaultExploreCursor)} · scans the full geotagged atlas`,
+        stations: []
+    },
+    stations: {
+        title: 'Country stations',
+        subtitle: 'Pick a country to load stations',
+        stations: []
+    },
+    search: {
+        title: 'Search',
+        subtitle: 'Matches across enabled public station directories',
+        stations: []
+    },
+    nearby: {
+        title: 'Nearby',
+        subtitle: 'Opt-in approximate location for local stations',
+        stations: []
+    },
+    library: {
+        title: 'Library',
+        subtitle: 'Favorites, recent stations, and imported streams',
+        stations: []
+    }
+};
+export const topTabs = [
+    { screen: 'home', label: 'Overview' },
+    { screen: 'now-playing', label: 'Playing' },
+    { screen: 'library', label: 'Library' },
+    { screen: 'explore', label: 'Explore' },
+    { screen: 'search', label: 'Search' },
+    { screen: 'countries', label: 'Countries' },
+    { screen: 'nearby', label: 'Nearby' },
+    { screen: 'stats', label: 'Stats' },
+    { screen: 'settings', label: 'Settings' }
+];
+export function clamp(value, max) {
+    return Math.min(Math.max(value, 0), Math.max(max, 0));
+}
+export function clampVolume(value) {
+    return Math.min(100, Math.max(0, Math.round(value)));
+}
+export function applyStationFilters(stations, filters) {
+    return stations.filter(station => {
+        if (filters.codec && station.codec && station.codec.toLowerCase() !== filters.codec.toLowerCase()) {
+            return false;
+        }
+        if (filters.language && station.language && !station.language.toLowerCase().includes(filters.language.toLowerCase())) {
+            return false;
+        }
+        if (filters.minBitrate && (station.bitrate ?? 0) < filters.minBitrate) {
+            return false;
+        }
+        return true;
+    });
+}
+export function formatFilterLabel(filters) {
+    const parts = [
+        filters.codec ? `codec ${filters.codec}` : undefined,
+        filters.language ? `language ${filters.language}` : undefined,
+        filters.minBitrate ? `min ${filters.minBitrate} kbps` : undefined
+    ].filter(Boolean);
+    return parts.join(' · ') || 'none';
+}
+export function formatTimeLeft(ms) {
+    if (ms <= 0) {
+        return 'now';
+    }
+    const minutes = Math.ceil(ms / 60_000);
+    return `${minutes}m`;
+}
+export function nextSleepTimerMinutes(currentMinutes) {
+    const currentIndex = sleepTimerOptions.findIndex(option => option === currentMinutes);
+    const nextIndex = currentIndex >= 0 ? (currentIndex + 1) % sleepTimerOptions.length : 0;
+    return sleepTimerOptions[nextIndex] ?? null;
+}
+export function moveExploreCursor(cursor, direction, fast = false) {
+    const latitudeStep = fast ? 6 : 1;
+    const longitudeStep = fast ? 12 : 2;
+    const latitudeDelta = direction === 'up' ? latitudeStep : direction === 'down' ? -latitudeStep : 0;
+    const longitudeDelta = direction === 'right' ? longitudeStep : direction === 'left' ? -longitudeStep : 0;
+    return {
+        latitude: Math.min(84, Math.max(-84, cursor.latitude + latitudeDelta)),
+        longitude: wrapLongitude(cursor.longitude + longitudeDelta)
+    };
+}
+export function formatExploreCursor(cursor) {
+    const latitude = `${Math.abs(cursor.latitude).toFixed(1)}${cursor.latitude >= 0 ? 'N' : 'S'}`;
+    const longitude = `${Math.abs(cursor.longitude).toFixed(1)}${cursor.longitude >= 0 ? 'E' : 'W'}`;
+    return `${latitude}, ${longitude}`;
+}
+function wrapLongitude(longitude) {
+    if (!Number.isFinite(longitude)) {
+        return 0;
+    }
+    let wrapped = longitude;
+    while (wrapped > 180) {
+        wrapped -= 360;
+    }
+    while (wrapped < -180) {
+        wrapped += 360;
+    }
+    return wrapped;
+}
+export function stationApproximateTime(station) {
+    if (!station || typeof station.longitude !== 'number') {
+        return 'unknown';
+    }
+    const offsetHours = Math.round(station.longitude / 15);
+    const date = new Date(Date.now() + offsetHours * 60 * 60 * 1000);
+    const sign = offsetHours >= 0 ? '+' : '';
+    return `${date.toISOString().slice(11, 16)} UTC${sign}${offsetHours}`;
+}
+export function favoriteTarget(screen, selectedStation, playingStation) {
+    if (screen === 'now-playing') {
+        return playingStation;
+    }
+    if (screen === 'explore' || screen === 'stations' || screen === 'search' || screen === 'nearby' || screen === 'library') {
+        return selectedStation;
+    }
+    return playingStation;
+}
+export function activeTabForScreen(screen) {
+    return screen === 'stations' || screen === 'map' ? 'countries' : screen;
+}
+export function stationContextKeyForScreen(screen) {
+    if (screen === 'explore' ||
+        screen === 'stations' ||
+        screen === 'search' ||
+        screen === 'nearby' ||
+        screen === 'library') {
+        return screen;
+    }
+    return null;
+}
+export function shouldAnimateReceiver(screen, playback) {
+    return screen === 'now-playing' && playback.state === 'playing' && playback.ready;
+}
+export function isEditableInput(input, key) {
+    return Boolean(key.backspace || key.delete || input);
+}
+export function applyTextInput(value, input, key) {
+    if (key.backspace || key.delete || (key.ctrl && input === 'h')) {
+        return value.slice(0, -1);
+    }
+    if (key.ctrl || key.meta) {
+        return value;
+    }
+    let next = value;
+    for (const character of input) {
+        if (character === '\u007f' || character === '\b') {
+            next = next.slice(0, -1);
+        }
+        else if (character >= ' ') {
+            next += character;
+        }
+    }
+    return next;
+}
+export function mediaTransportActionForInput(input, mediaKeys = emptyMediaKeyBindings) {
+    const normalized = normalizeMediaKeyBindings(mediaKeys);
+    for (const action of mediaTransportActions) {
+        if (new Set(normalized[action]).has(input)) {
+            return action;
+        }
+    }
+    const matches = [...input.matchAll(/\u001B\[(18|19|20)(?:;\d+)?~/g)];
+    const keyCode = matches.at(-1)?.[1];
+    if (keyCode === '18') {
+        return 'previous';
+    }
+    if (keyCode === '19') {
+        return 'playPause';
+    }
+    if (keyCode === '20') {
+        return 'next';
+    }
+    const kittyMatches = [...input.matchAll(/\u001B\[(57428|57429|57430|57431|57433|57434|57435|57436)(?:;[0-9:;]+)?u/g)];
+    const kittyCode = kittyMatches.at(-1)?.[1];
+    if (kittyCode === '57431' || kittyCode === '57434' || kittyCode === '57436') {
+        return 'previous';
+    }
+    if (kittyCode === '57428' || kittyCode === '57429' || kittyCode === '57430') {
+        return 'playPause';
+    }
+    if (kittyCode === '57433' || kittyCode === '57435') {
+        return 'next';
+    }
+    const modifiedArrowMatches = [...input.matchAll(/\u001B\[1;[235]([CD])/g)];
+    const modifiedArrow = modifiedArrowMatches.at(-1)?.[1];
+    if (modifiedArrow === 'D') {
+        return 'previous';
+    }
+    if (modifiedArrow === 'C') {
+        return 'next';
+    }
+    return null;
+}
+export function normalizeMediaKeyBindings(mediaKeys) {
+    return {
+        previous: uniqueStrings(mediaKeys?.previous ?? []),
+        playPause: uniqueStrings(mediaKeys?.playPause ?? []),
+        next: uniqueStrings(mediaKeys?.next ?? [])
+    };
+}
+export function addMediaKeyBinding(mediaKeys, action, input) {
+    const normalized = normalizeMediaKeyBindings(mediaKeys);
+    return {
+        ...normalized,
+        [action]: uniqueStrings([...normalized[action], input]).slice(-8)
+    };
+}
+export function mediaActionLabel(action) {
+    if (action === 'playPause') {
+        return 'play/pause';
+    }
+    return action;
+}
+export function parseMediaActionName(value) {
+    const normalized = value.toLowerCase().replace(/[^a-z]/g, '');
+    if (normalized === 'previous' || normalized === 'prev' || normalized === 'back') {
+        return 'previous';
+    }
+    if (normalized === 'playpause' || normalized === 'pause' || normalized === 'play') {
+        return 'playPause';
+    }
+    if (normalized === 'next' || normalized === 'forward') {
+        return 'next';
+    }
+    return null;
+}
+export function isPlainPrintableInput(input) {
+    return input.length > 0 && [...input].every(character => character >= ' ' && character !== '\u007f');
+}
+function uniqueStrings(values) {
+    return [...new Set(values.filter(value => value.length > 0))];
+}

package/dist/ui/components/Logo.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+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))) }));
+}
+export function Logo() {
+    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: "gray", children: "Live public radio from around the world" })] }));
+}

package/dist/ui/components/Menu.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+export function Menu({ items, selected, keyFor, render }) {
+    return (_jsx(Box, { flexDirection: "column", children: items.map((item, position) => (_jsx(Box, { children: render(item, position, position === selected) }, keyFor?.(item, position) ?? defaultMenuKey(item)))) }));
+}
+export function Pointer({ active }) {
+    return _jsx(Text, { bold: active, children: active ? '> ' : '  ' });
+}
+function defaultMenuKey(item) {
+    if (typeof item === 'string' || typeof item === 'number') {
+        return item;
+    }
+    if (item && typeof item === 'object') {
+        const record = item;
+        for (const field of ['id', 'code', 'screen', 'label', 'name']) {
+            const value = record[field];
+            if (typeof value === 'string' || typeof value === 'number') {
+                return `${field}:${value}`;
+            }
+        }
+    }
+    return JSON.stringify(item);
+}

package/dist/ui/components/ScreenHeader.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { textDim, themeAccent } from '../theme.js';
+import { truncate } from '../format.js';
+// One title treatment shared by every screen: an accented, bold title trailed by
+// a dim rule that fills the frame, with optional right-aligned meta and a muted
+// subtitle below. Renders one row (plus one for the subtitle when present).
+export function ScreenHeader({ title, width, theme, subtitle, right }) {
+    const accent = themeAccent(theme);
+    const safeTitle = truncate(title, Math.max(4, width - 4));
+    const rightText = right ? ` ${right}` : '';
+    const ruleWidth = Math.max(1, width - safeTitle.length - rightText.length - 2);
+    const rule = '─'.repeat(ruleWidth);
+    return (_jsxs(Box, { flexDirection: "column", flexShrink: 0, children: [_jsxs(Box, { children: [_jsx(Text, { color: accent, bold: true, children: safeTitle }), _jsxs(Text, { color: textDim, children: [" ", rule] }), rightText ? _jsx(Text, { color: "gray", children: rightText }) : null] }), subtitle ? _jsx(Text, { color: "gray", children: truncate(subtitle, width) }) : null] }));
+}

package/dist/ui/components/StationList.js

@@ -0,0 +1,23 @@
+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 { themeAccent } from '../theme.js';
+import { Menu, Pointer } from './Menu.js';
+import { visibleWindow } from '../list-window.js';
+export function StationList({ stations, selected, theme, favorites, pageSize, width }) {
+    if (stations.length === 0) {
+        return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: "gray", children: "No stations here yet." }), _jsx(Text, { color: "gray", children: "Try a different search or country, or clear active filters with :clear." })] }));
+    }
+    const window = visibleWindow(stations, selected, pageSize);
+    const rowWidth = Math.max(42, width - 4);
+    const nameWidth = Math.min(48, Math.max(18, Math.floor(rowWidth * 0.42)));
+    const metaWidth = Math.max(12, rowWidth - nameWidth - 6);
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { color: "gray", children: ["Showing ", window.start + 1, "-", window.end, " of ", stations.length] }), _jsx(Menu, { items: window.items, selected: selected - window.start, keyFor: station => `${station.provider}:${station.id}`, render: (station, index, active) => {
+                    const favorite = favorites.has(`${station.provider}:${station.id}`);
+                    const stationName = truncate(station.name, favorite ? Math.max(1, nameWidth - 2) : nameWidth);
+                    const titleWidth = nameWidth + 2;
+                    const titleUsed = stationName.length + (favorite ? 2 : 0);
+                    const titlePadding = ' '.repeat(Math.max(1, titleWidth - titleUsed));
+                    return (_jsxs(Box, { flexDirection: "column", children: [_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: "gray", children: truncate(`${stationLocation(station)} · ${stationTech(station)}`, metaWidth) })] }), active ? (_jsx(Box, { marginLeft: 4, children: _jsxs(Text, { color: "gray", children: ["#", window.start + index + 1, " \u00B7 ", truncate(stationTags(station), rowWidth - 8)] }) })) : null] }));
+                } })] }));
+}

package/dist/ui/components/TopTabs.js

@@ -0,0 +1,82 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from 'ink';
+import { panelBackground, panelBorder, themeAccent } from '../theme.js';
+import { truncate } from '../format.js';
+export function TopTabs({ tabs, active, theme, width, rightLabel }) {
+    const accent = themeAccent(theme);
+    const brand = 'RADIOCLI';
+    const rightText = ` ${rightLabel} `;
+    const bodyWidth = Math.max(1, width - 4);
+    const titlePrefixWidth = 2 + brand.length + 1;
+    const titleRuleWidth = Math.max(0, width - titlePrefixWidth - 1);
+    const allTabsWidth = tabsWidth(tabs.map(tab => ({ type: 'tab', tab })));
+    const canShowRight = bodyWidth - allTabsWidth - rightText.length >= 1;
+    const tabsAvailableWidth = Math.max(1, bodyWidth - (canShowRight ? rightText.length + 1 : 0));
+    const visibleTabs = fitTabs(tabs, active, tabsAvailableWidth);
+    const visibleTabsWidth = tabsWidth(visibleTabs);
+    const tabPaddingWidth = Math.max(0, bodyWidth - visibleTabsWidth - (canShowRight ? rightText.length : 0));
+    return (_jsxs(Box, { flexDirection: "column", backgroundColor: panelBackground, width: width, children: [_jsxs(Text, { backgroundColor: panelBackground, children: [_jsx(Text, { color: panelBorder, children: "\u250C " }), _jsx(Text, { color: accent, bold: true, children: brand }), _jsxs(Text, { color: panelBorder, children: [" ", '─'.repeat(titleRuleWidth), "\u2510"] })] }), _jsxs(Text, { backgroundColor: panelBackground, children: [_jsx(Text, { color: panelBorder, children: "\u2502 " }), visibleTabs.map((item, index) => (_jsxs(Text, { children: [item.type === 'overflow' ? (_jsx(Text, { color: "gray", children: "\u2026" })) : (_jsx(Text, { color: item.tab.screen === active ? accent : 'gray', bold: item.tab.screen === active, children: item.tab.label })), index < visibleTabs.length - 1 ? _jsx(Text, { color: "gray", children: " \u2502 " }) : null] }, item.type === 'overflow' ? `${item.side}-overflow` : item.tab.screen))), _jsx(Text, { children: ' '.repeat(tabPaddingWidth) }), canShowRight ? _jsx(Text, { color: "gray", children: rightText }) : null, _jsx(Text, { color: panelBorder, children: " \u2502" })] }), _jsxs(Text, { backgroundColor: panelBackground, color: panelBorder, children: ["\u2514", '─'.repeat(Math.max(0, width - 2)), "\u2518"] })] }));
+}
+function fitTabs(tabs, active, maxWidth) {
+    const all = tabs.map(tab => ({ type: 'tab', tab }));
+    if (tabsWidth(all) <= maxWidth) {
+        return all;
+    }
+    const activeIndex = Math.max(0, tabs.findIndex(tab => tab.screen === active));
+    let firstIndex = activeIndex;
+    let lastIndex = activeIndex;
+    let blockedLeft = false;
+    let blockedRight = false;
+    while (!blockedLeft || !blockedRight) {
+        if (!blockedLeft) {
+            if (firstIndex === 0) {
+                blockedLeft = true;
+            }
+            else if (tabsWidth(segmentsForRange(tabs, firstIndex - 1, lastIndex)) <= maxWidth) {
+                firstIndex -= 1;
+            }
+            else {
+                blockedLeft = true;
+            }
+        }
+        if (!blockedRight) {
+            if (lastIndex === tabs.length - 1) {
+                blockedRight = true;
+            }
+            else if (tabsWidth(segmentsForRange(tabs, firstIndex, lastIndex + 1)) <= maxWidth) {
+                lastIndex += 1;
+            }
+            else {
+                blockedRight = true;
+            }
+        }
+    }
+    const segments = segmentsForRange(tabs, firstIndex, lastIndex);
+    if (tabsWidth(segments) <= maxWidth) {
+        return segments;
+    }
+    const activeTab = tabs[activeIndex] ?? tabs[0];
+    return [{ type: 'tab', tab: { ...activeTab, label: truncate(activeTab.label, Math.max(1, maxWidth)) } }];
+}
+function segmentsForRange(tabs, firstIndex, lastIndex) {
+    const segments = [];
+    if (firstIndex > 0) {
+        segments.push({ type: 'overflow', side: 'left' });
+    }
+    for (let index = firstIndex; index <= lastIndex; index += 1) {
+        const tab = tabs[index];
+        if (tab) {
+            segments.push({ type: 'tab', tab });
+        }
+    }
+    if (lastIndex < tabs.length - 1) {
+        segments.push({ type: 'overflow', side: 'right' });
+    }
+    return segments;
+}
+function tabsWidth(segments) {
+    return segments.reduce((total, segment, index) => {
+        const labelWidth = segment.type === 'overflow' ? 1 : segment.tab.label.length;
+        return total + labelWidth + (index > 0 ? 3 : 0);
+    }, 0);
+}