@ciphore/radiocli 0.1.9 → 0.2.1

package/dist/ui/AppContent.js

@@ -1,6 +1,5 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Text } from 'ink';
-import { textMuted, themeAccent } from './theme.js';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text } from 'ink';
 import { HomeScreen } from './screens/HomeScreen.js';
 import { CountriesScreen } from './screens/CountriesScreen.js';
 import { MapScreen } from './screens/MapScreen.js';
@@ -14,13 +13,13 @@ import { HelpScreen } from './screens/HelpScreen.js';
 import { AirPlaySettingsScreen } from './screens/AirPlaySettingsScreen.js';
 import { AirPlayCodeScreen } from './screens/AirPlayCodeScreen.js';
 import { selectedAirPlayDevice } from './airplay-settings.js';
-import { playbackBackendLabel } from '../player/backend-install.js';
-export function AppContent({ airPlayDevices, airPlayCode, 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 }) {
+import { AdaptiveContent } from './AdaptiveContent.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, pulse, searchQuery, screen, selected, showDiagnostics, sleepLabel, stationContext, stationFavorite, stationTime, storePath, theme, updateCheck }) {
     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: textMuted, children: "Resize to at least 64x18 for the full receiver UI." }), _jsxs(Text, { color: textMuted, children: ["Playback: ", playback.state, " \u00B7 ", playbackBackendLabel(playback.backend)] }), _jsx(Text, { color: textMuted, children: "q quit \u00B7 Ctrl+C always exits" })] }));
+        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, library: library, diagnostics: diagnostics, backends: backends, updateCheck: updateCheck, favoriteKeys: favoriteKeys, stationTitle: stationContext.title, filterLabel: filterLabel, pulse: pulse, sleepLabel: sleepLabel }));
     }
     if (screen === 'home') {
-        return _jsx(HomeScreen, { selected: selected, theme: theme, library: library, playback: playback });
+        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 }));
@@ -29,7 +28,7 @@ export function AppContent({ airPlayDevices, airPlayCode, backends, countryFilte
         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 }));
+        return (_jsx(SearchScreen, { query: searchQuery, editing: editingSearch, loading: loadingStations, stations: displayStations, selected: selected, theme: theme, favorites: favoriteKeys, experimentalOn: library.settings.enableRadioGarden, filterLabel: filterLabel, pageSize: Math.max(1, layout.contentRows - 8), 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 }));
@@ -38,22 +37,22 @@ export function AppContent({ airPlayDevices, airPlayCode, backends, countryFilte
         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, trackHistory: library.trackHistory, width: layout.receiverWidth, height: layout.receiverRows }));
+        return (_jsx(NowPlayingScreen, { station: playingStation, playback: playback, metadata: nowPlaying, theme: theme, favorite: stationFavorite, pulse: pulse, diagnostics: diagnostics, showDiagnostics: showDiagnostics, stationTime: stationTime, receiverStyle: library.settings.receiverStyle, trackHistory: library.trackHistory, 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, airPlayDevices: airPlayDevices, providerHealth: providerHealth, theme: theme, diagnostics: diagnostics, width: frameWidth }));
+        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 }));
     }
     if (screen === 'airplay-settings') {
-        return (_jsx(AirPlaySettingsScreen, { selected: selected, settings: library.settings, backends: backends, devices: airPlayDevices, theme: theme, width: frameWidth }));
+        return (_jsx(AirPlaySettingsScreen, { selected: selected, settings: library.settings, backends: backends, devices: airPlayDevices, theme: theme, width: frameWidth, height: layout.contentRows }));
     }
     if (screen === 'airplay-code') {
         return (_jsx(AirPlayCodeScreen, { code: airPlayCode, playback: playback, selectedDevice: selectedAirPlayDevice(library.settings, airPlayDevices), theme: theme, width: frameWidth }));
     }
     if (screen === 'help') {
-        return _jsx(HelpScreen, { theme: theme, width: frameWidth });
+        return _jsx(HelpScreen, { theme: theme, width: frameWidth, height: layout.contentRows, selected: selected });
     }
     return _jsx(Text, { children: "Unknown screen." });
 }

package/dist/ui/app-state.js

@@ -1,4 +1,8 @@
 import { isPlaybackOutputError } from '../player/player-controller.js';
+import { isProviderUnavailableError } from '../providers/radio-browser.js';
+import { receiverStyleMetadata } from './visualizers/receiver-style-registry.js';
+import { removeLastGrapheme } from './format.js';
+import { primaryScreens, screenMetadata } from './screen-meta.js';
 const emptyMediaKeyBindings = {
     previous: [],
     playPause: [],
@@ -29,7 +33,7 @@ export const initialStationContexts = {
     },
     nearby: {
         title: 'Nearby',
-        subtitle: 'Opt-in approximate location for local stations',
+        subtitle: 'Approximate IP location for local stations',
         stations: []
     },
     library: {
@@ -38,17 +42,10 @@ export const initialStationContexts = {
         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 const topTabs = primaryScreens.map(screen => ({
+    screen,
+    label: screenMetadata[screen].tabLabel
+}));
 export function clamp(value, max) {
     return Math.min(Math.max(value, 0), Math.max(max, 0));
 }
@@ -149,7 +146,10 @@ export function favoriteTarget(screen, selectedStation, playingStation) {
     return playingStation;
 }
 export function shouldSkipAfterTuneError(error, skipBrokenStreams, nextStation) {
-    return Boolean(skipBrokenStreams && nextStation && !isPlaybackOutputError(error));
+    return Boolean(skipBrokenStreams &&
+        nextStation &&
+        !isPlaybackOutputError(error) &&
+        !isProviderUnavailableError(error));
 }
 export function activeTabForScreen(screen) {
     if (screen === 'stations' || screen === 'map') {
@@ -180,7 +180,8 @@ export function nextReceiverPulse(pulse) {
     return pulse + 1;
 }
 export function shouldResetReceiverPulse(previous, current) {
-    if (current.receiverStyle !== 'ultracode') {
+    const style = receiverStyleMetadata[current.receiverStyle];
+    if (!('resetPulse' in style) || !style.resetPulse) {
         return false;
     }
     const currentActive = current.screen === 'now-playing' &&
@@ -189,8 +190,17 @@ export function shouldResetReceiverPulse(previous, current) {
     if (!currentActive) {
         return false;
     }
+    // Every receiver except Ultracode resumes from its frozen pause frame.
+    // Ultracode intentionally retains its active-signal restart behavior.
+    if (current.receiverStyle !== 'ultracode' &&
+        previous?.screen === 'now-playing' &&
+        previous.receiverStyle === current.receiverStyle &&
+        previous.playbackState === 'paused' &&
+        previous.playbackReady) {
+        return false;
+    }
     return !(previous?.screen === 'now-playing' &&
-        previous.receiverStyle === 'ultracode' &&
+        previous.receiverStyle === current.receiverStyle &&
         previous.playbackState === 'playing' &&
         previous.playbackReady);
 }
@@ -199,7 +209,7 @@ export function isEditableInput(input, key) {
 }
 export function applyTextInput(value, input, key) {
     if (key.backspace || key.delete || (key.ctrl && input === 'h')) {
-        return value.slice(0, -1);
+        return removeLastGrapheme(value);
     }
     if (key.ctrl || key.meta) {
         return value;

package/dist/ui/ascii.js

@@ -23,6 +23,17 @@ function asciiGlyph(code) {
     if (code >= 0x2580 && code <= 0x259f) {
         return '#';
     }
+    // Diagonal box strokes need to retain their direction for wireframes,
+    // routes, folds, and other receiver geometry.
+    if (code === 0x2571) {
+        return '/';
+    }
+    if (code === 0x2572) {
+        return '\\';
+    }
+    if (code === 0x2573) {
+        return 'X';
+    }
     // Box drawing.
     if (code >= 0x2500 && code <= 0x257f) {
         if (code === 0x2500 || code === 0x2501 || code === 0x2504 || code === 0x2505) {
@@ -50,6 +61,33 @@ function asciiGlyph(code) {
     if (code === 0x25cb || code === 0x25aa || code === 0x25a0) {
         return '*';
     }
+    if (code === 0x25c9 || code === 0x25d2) {
+        return 'o'; // ◉ ◒
+    }
+    if (code === 0x25b2) {
+        return '^'; // ▲
+    }
+    if (code === 0x25bc) {
+        return 'v'; // ▼
+    }
+    if (code === 0x25e2 || code === 0x25e5) {
+        return '/'; // ◢ ◥
+    }
+    if (code === 0x25e3 || code === 0x25e4) {
+        return '\\'; // ◣ ◤
+    }
+    if (code === 0x22d6) {
+        return '<'; // ⋖
+    }
+    if (code === 0x22d7) {
+        return '>'; // ⋗
+    }
+    if (code === 0x2301) {
+        return '~'; // ⌁
+    }
+    if (code === 0x02d9) {
+        return '.'; // ˙
+    }
     if (code === 0x2605) {
         return '*'; // ★
     }
@@ -63,7 +101,10 @@ function asciiGlyph(code) {
     if (code === 0x200b || code === 0xfeff || (code >= 0x0300 && code <= 0x036f)) {
         return '';
     }
-    return '*';
+    // Unknown Unicode is user/content data more often than decoration. Preserve
+    // it instead of destroying international station names; known terminal-art
+    // ranges above still receive ASCII fallbacks.
+    return String.fromCodePoint(code);
 }
 function popcount(value) {
     let count = 0;

package/dist/ui/components/Logo.js

@@ -5,6 +5,11 @@ const logoSpectrumColors = ['#ff4b5c', '#ff9f43', '#ffd166', '#a3e635', '#22c55e
 function LogoSpectrum() {
     return (_jsx(_Fragment, { children: logoSpectrumColors.map(color => (_jsx(Text, { color: color, children: "\u2588\u2588" }, color))) }));
 }
-export function Logo() {
+export function Logo({ compact = false, width = 80 } = {}) {
+    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, { 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/ScreenHeader.js

@@ -3,7 +3,7 @@ import { Box, Text } from 'ink';
 import { textDim, textMuted, themeAccent } from '../theme.js';
 import { useDisplay } from '../display-context.js';
 import { toAsciiSafe } from '../ascii.js';
-import { truncate } from '../format.js';
+import { displayWidth, 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).
@@ -13,7 +13,7 @@ export function ScreenHeader({ title, width, theme, subtitle, right }) {
     const a = (value) => (ascii ? toAsciiSafe(value) : value);
     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 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] }));
 }

package/dist/ui/components/StationList.js

@@ -1,23 +1,25 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from 'ink';
-import { stationLocation, stationTags, stationTech, truncate } from '../format.js';
+import { displayWidth, stationLocation, stationTags, stationTech, truncate } from '../format.js';
 import { textMuted, 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 }) {
+export function StationList({ stations, selected, theme, favorites, pageSize, width, emptyTitle = 'No stations found.', emptyHint = 'Try another view or clear active filters.', showCount = true }) {
     if (stations.length === 0) {
-        return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: textMuted, children: "No stations here yet." }), _jsx(Text, { color: textMuted, children: "Try a different search or country, or clear active filters with :clear." })] }));
+        return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { color: textMuted, children: emptyTitle }), _jsx(Text, { color: textMuted, children: emptyHint })] }));
     }
     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: textMuted, 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) => {
+    return (_jsxs(Box, { flexDirection: "column", children: [showCount ? (_jsxs(Text, { color: textMuted, children: [window.start + 1, "-", window.end, " of ", stations.length] })) : null, _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 titleUsed = displayWidth(stationName) + (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: textMuted, children: truncate(`${stationLocation(station)} · ${stationTech(station)}`, metaWidth) })] }), active ? (_jsx(Box, { marginLeft: 4, children: _jsxs(Text, { color: textMuted, children: ["#", window.start + index + 1, " \u00B7 ", truncate(stationTags(station), rowWidth - 8)] }) })) : null] }));
+                    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) })] }));
                 } })] }));
 }

package/dist/ui/components/TopTabs.js

@@ -2,24 +2,25 @@ import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { Box, Text } from 'ink';
 import { panelBorder, textMuted, themeAccent } from '../theme.js';
 import { useDisplay } from '../display-context.js';
-import { truncate } from '../format.js';
-export function TopTabs({ tabs, active, theme, width, rightLabel }) {
+import { displayWidth, truncate } from '../format.js';
+export function TopTabs({ tabs, active, theme, width, backendLabel }) {
     const accent = themeAccent(theme);
     const { app: background, ascii } = useDisplay();
     const box = ascii
         ? { tl: '+', tr: '+', bl: '+', br: '+', h: '-', v: '|' }
         : { tl: '┌', tr: '┐', bl: '└', br: '┘', h: '─', v: '│' };
     const brand = 'RADIOCLI';
-    const rightText = ` ${rightLabel} `;
+    const rightText = ` ${backendLabel} `;
     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 rightWidth = displayWidth(rightText);
+    const canShowRight = bodyWidth - allTabsWidth - rightWidth >= 1;
+    const tabsAvailableWidth = Math.max(1, bodyWidth - (canShowRight ? rightWidth + 1 : 0));
     const visibleTabs = fitTabs(tabs, active, tabsAvailableWidth);
     const visibleTabsWidth = tabsWidth(visibleTabs);
-    const tabPaddingWidth = Math.max(0, bodyWidth - visibleTabsWidth - (canShowRight ? rightText.length : 0));
+    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] })] }));
 }
 function fitTabs(tabs, active, maxWidth) {
@@ -81,7 +82,7 @@ function segmentsForRange(tabs, firstIndex, lastIndex) {
 }
 function tabsWidth(segments) {
     return segments.reduce((total, segment, index) => {
-        const labelWidth = segment.type === 'overflow' ? 1 : segment.tab.label.length;
+        const labelWidth = segment.type === 'overflow' ? 1 : displayWidth(segment.tab.label);
         return total + labelWidth + (index > 0 ? 3 : 0);
     }, 0);
 }