@iternio/react-native-auto-play 0.5.14-beta.1 → 0.6.1

package/lib/templates/MapTemplate.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { AutoText } from '..';
-import type { ActionButtonAndroid, MapButton, MapPanButton } from '../types/Button';
+import type { ActionButtonAndroid, ImageButton, MapButton, MapPanButton, TextButton } from '../types/Button';
 import type { AutoManeuver, ManeuverState } from '../types/Maneuver';
 import type { ColorScheme, RootComponentInitialProps } from '../types/RootComponent';
 import type { TripConfig, TripPoint, TripPreviewTextConfiguration, TripsConfig } from '../types/Trip';
@@ -8,7 +8,9 @@ import { type NitroAction } from '../utils/NitroAction';
 import { type NavigationAlert } from '../utils/NitroAlert';
 import { type NitroColor, type ThemedColor } from '../utils/NitroColor';
 import { NitroMapButton } from '../utils/NitroMapButton';
+import { type OptionsPanelConfig } from '../utils/NitroOptionsPanel';
 import { type HeaderActionsIos, type NitroBaseMapTemplateConfig, Template, type TemplateConfig } from './Template';
+export type { ChargerLocation, ChargerOutlet, ChargingConnector, OptionsPanelChargerSection, OptionsPanelConfig, OptionsPanelGridSection, OptionsPanelListSection, OptionsPanelSection, } from '../utils/NitroOptionsPanel';
 export type Point = {
     x: number;
     y: number;
@@ -68,6 +70,17 @@ export type MapHeaderActions<T> = {
     android?: HeaderActionsAndroidMap<T>;
     ios?: HeaderActionsIos<T>;
 };
+/**
+ * @namespace iOS - not supported; CarPlay has no separate header for the map behind a panel, so
+ * the panel template's own `headerActions` are applied to the root map template's nav bar instead.
+ */
+export type PanelHeaderActions<T> = Omit<MapHeaderActions<T>, 'ios'>;
+/**
+ * @namespace iOS - a CPMapPanel can only show one CPTextButton (with a title) and one
+ * optional icon-only button (any title is dropped natively), so a second action must be an
+ * ImageButton rather than a TextButton, and a third action isn't supported at all.
+ */
+export type PanelActionsIos<T> = [TextButton<T>] | [TextButton<T>, ImageButton<T>];
 export type BaseMapTemplateConfig<T> = {
     /**
      * buttons that represent actions on the map template, usually on the bottom right corner
@@ -85,6 +98,12 @@ export type MapTemplateConfig = Omit<NitroMapTemplateConfig, 'mapButtons' | 'hea
      * react component that is rendered
      */
     component: React.ComponentType<RootComponentInitialProps>;
+    /**
+     * the panel shown when tapping the ellipsis button next to the travel estimates during active navigation (iOS 27+).
+     * No-op on Android
+     * @namespace iOS
+     */
+    optionsPanel?: OptionsPanelConfig<MapTemplate>;
     /**
      * Notification that navigation was stopped. May occur when another source such as the car head unit starts navigating.
      * The navigation session on Android Auto/CarPlay is stopped already when this callback is triggered, make sure to stop other things like TTS too.
@@ -110,6 +129,11 @@ export declare class MapTemplate extends Template<MapTemplateConfig, MapTemplate
     id: string;
     private template;
     constructor(config: MapTemplateConfig);
+    /**
+     * @namespace iOS updates the panel shown when tapping the ellipsis button
+     * next to the travel estimates during navigation (iOS 27+).
+     */
+    updateOptionsPanel(optionsPanel?: OptionsPanelConfig<MapTemplate>): Promise<void> | undefined;
     setMapButtons(mapButtons: MapTemplateConfig['mapButtons']): Promise<void>;
     setHeaderActions(headerActions: MapTemplateConfig['headerActions']): Promise<void>;
     /**
@@ -155,7 +179,7 @@ export declare class MapTemplate extends Template<MapTemplateConfig, MapTemplate
      * either use showTripSelector to show a set of trips and let the user start the navigation session
      * or use this to start a navigation session without asking the user
      */
-    startNavigation(trip: TripConfig): void;
+    startNavigation(trip: TripConfig): Promise<void>;
     stopNavigation(): void;
     /**
      * Sets the current maneuver state indicating progress within a maneuver.

package/lib/templates/MapTemplate.js

@@ -10,6 +10,7 @@ import { NitroAlertUtil } from '../utils/NitroAlert';
 import { NitroColorUtil } from '../utils/NitroColor';
 import { NitroManeuverUtil } from '../utils/NitroManeuver';
 import { NitroMapButton } from '../utils/NitroMapButton';
+import { NitroOptionsPanelUtil } from '../utils/NitroOptionsPanel';
 import { Template, } from './Template';
 const HybridMapTemplate = NitroModules.createHybridObject('MapTemplate');
 export class MapTemplate extends Template {
@@ -17,7 +18,7 @@ export class MapTemplate extends Template {
     template = this;
     constructor(config) {
         super(config);
-        const { component, mapButtons, headerActions, onStopNavigation, onAutoDriveEnabled, defaultGuidanceBackgroundColor, ...baseConfig } = config;
+        const { component, mapButtons, headerActions, onStopNavigation, onAutoDriveEnabled, defaultGuidanceBackgroundColor, optionsPanel, ...baseConfig } = config;
         AppRegistry.registerComponent(this.id, () => (props) => React.createElement(MapTemplateProvider, {
             mapTemplate: this.template,
             // biome-ignore lint/correctness/noChildrenProp: there is no other way in a ts file
@@ -43,6 +44,19 @@ export class MapTemplate extends Template {
                 : undefined,
         };
         HybridMapTemplate.createMapTemplate(nitroConfig);
+        // routed through updateOptionsPanel, not embedded in nitroConfig above — nitrogen can't generate
+        // a spec for a variant type nested that deep inside NitroMapTemplateConfig.
+        this.updateOptionsPanel(optionsPanel);
+    }
+    /**
+     * @namespace iOS updates the panel shown when tapping the ellipsis button
+     * next to the travel estimates during navigation (iOS 27+).
+     */
+    updateOptionsPanel(optionsPanel) {
+        if (Platform.OS !== 'ios') {
+            return;
+        }
+        return HybridMapTemplate.updateOptionsPanel(this.id, NitroOptionsPanelUtil.convert(this.template, optionsPanel));
     }
     setMapButtons(mapButtons) {
         const buttons = NitroMapButton.convert(this.template, mapButtons);
@@ -130,7 +144,7 @@ export class MapTemplate extends Template {
      * or use this to start a navigation session without asking the user
      */
     startNavigation(trip) {
-        HybridMapTemplate.startNavigation(this.id, trip);
+        return HybridMapTemplate.startNavigation(this.id, trip);
     }
     stopNavigation() {
         HybridMapTemplate.stopNavigation(this.id);

package/lib/templates/MessageTemplate.d.ts

@@ -1,12 +1,14 @@
-import type { AutoImage, BaseMapTemplateConfig, CustomActionButtonAndroid, HeaderActionsAndroid, TextButton } from '..';
+import type { AutoImage, BaseMapTemplateConfig, CustomActionButtonAndroid, HeaderActions, TextButton } from '..';
 import type { AutoText } from '../types/Text';
 import { type NitroAction } from '../utils/NitroAction';
 import { type NitroImage } from '../utils/NitroImage';
+import type { PanelActionsIos, PanelHeaderActions } from './MapTemplate';
 import type { NitroBaseMapTemplateConfig, TemplateConfig } from './Template';
 export interface NitroMessageTemplateConfig extends TemplateConfig {
     headerActions?: Array<NitroAction>;
     /**
      * @namespace Android title shown on header
+     * @namespace iOS title shown when mapConfig is set, otherwise it isn't supported
      */
     title?: AutoText;
     message: AutoText;
@@ -14,31 +16,69 @@ export interface NitroMessageTemplateConfig extends TemplateConfig {
     image?: NitroImage;
     mapConfig?: NitroBaseMapTemplateConfig;
 }
-export type MessageTemplateConfig = Omit<NitroMessageTemplateConfig, 'headerActions' | 'image' | 'mapConfig' | 'actions'> & {
+type MessageActionsAndroid<T> = [CustomActionButtonAndroid<T>] | [CustomActionButtonAndroid<T>, CustomActionButtonAndroid<T>];
+type MessageTemplateBaseConfig = Omit<NitroMessageTemplateConfig, 'headerActions' | 'image' | 'mapConfig' | 'actions'> & {
     /**
      * action buttons, usually at the top right on Android
-     * @namespace Android
+     * @namespace iOS `ios` only takes effect once this renders as a CPMapPanel (`mapConfig` set,
+     * iOS 27+) and is applied to the root map template's nav bar — without `mapConfig` (or below
+     * iOS 27, where `mapConfig` is a no-op) this template is a full-screen `CPAlertTemplate`, which
+     * has no nav bar at all, so `ios` is silently unused there.
      */
-    headerActions?: HeaderActionsAndroid<MessageTemplate>;
+    headerActions?: HeaderActions<MessageTemplate>;
     /**
      * image shown at the top of the message on Android
      * @namespace Android
      */
     image?: AutoImage;
+};
+/**
+ * `actions`/`mapConfig` are a discriminated union — `mapConfig` restricts `actions.ios` to at
+ * most one `TextButton` plus one icon-only `ImageButton` (a `CPMapPanel` can't show more), vs. up
+ * to three `TextButton`s otherwise. If your `mapConfig` value comes from a variable/prop rather
+ * than an inline literal, TS can't narrow which branch applies — assign it to a local `const` and
+ * branch with `if (mapConfig) { ... } else { ... }` into two separate constructor calls instead
+ * of passing it straight through to one.
+ */
+export type MessageTemplateConfig = MessageTemplateBaseConfig & ({
+    mapConfig?: undefined;
     /**
-     * If mapConfig is defined, it will use a MapWithContentTemplate with the current template. This results in a MessageTemplate with a map in background. No actions need to be specified, can be empty object.
-     * @namespace Android
+     * @namespace Android up to 2 buttons of type TextButton, TextAndImageButton or ImageButton
+     * @namespace iOS - up to 3 buttons of type TextButton
      */
-    mapConfig?: BaseMapTemplateConfig<MessageTemplate>;
+    actions?: {
+        android?: MessageActionsAndroid<MessageTemplate>;
+        ios?: [
+            TextButton<MessageTemplate>,
+            TextButton<MessageTemplate>,
+            TextButton<MessageTemplate>
+        ] | [TextButton<MessageTemplate>, TextButton<MessageTemplate>] | [TextButton<MessageTemplate>];
+    };
+} | {
+    /**
+     * If mapConfig is defined, it will use a MapWithContentTemplate with the current
+     * template. This results in a MessageTemplate with a map in background. No actions
+     * need to be specified, can be empty object.
+     * @namespace Android - uses MapWithContentTemplate
+     * @namespace iOS - renders as a CPMapPanel on the current root map template (iOS 27+),
+     * trading the usual full-screen modal alert presentation for panel content;
+     * `headerActions` here is Android-only — on iOS this template's own `headerActions` are
+     * applied to the root map template's nav bar instead, since CarPlay has no separate
+     * header for the map behind a panel.
+     */
+    mapConfig: Omit<BaseMapTemplateConfig<MessageTemplate>, 'headerActions'> & {
+        headerActions?: PanelHeaderActions<MessageTemplate>;
+    };
     /**
      * @namespace Android up to 2 buttons of type TextButton, TextAndImageButton or ImageButton
-     * @namespace iOS - up to 3 buttons of type TextButton
+     * @namespace iOS - the panel can only show one TextButton plus one optional icon-only
+     * ImageButton, see PanelActionsIos
      */
     actions?: {
-        android?: [CustomActionButtonAndroid<MessageTemplate>] | [CustomActionButtonAndroid<MessageTemplate>, CustomActionButtonAndroid<MessageTemplate>];
-        ios?: [TextButton<MessageTemplate>, TextButton<MessageTemplate>, TextButton<MessageTemplate>] | [TextButton<MessageTemplate>, TextButton<MessageTemplate>] | [TextButton<MessageTemplate>];
+        android?: MessageActionsAndroid<MessageTemplate>;
+        ios?: PanelActionsIos<MessageTemplate>;
     };
-};
+});
 /**
  * This template is always pushed on top and will stay on top until it is popped.
  * Other templates being pushed will end up below this one on the stack.
@@ -53,3 +93,4 @@ export declare class MessageTemplate {
      */
     push(): Promise<void>;
 }
+export {};

package/lib/templates/MessageTemplate.js

@@ -22,7 +22,7 @@ export class MessageTemplate {
         const nitroConfig = {
             ...rest,
             id: this.id,
-            headerActions: NitroActionUtil.convert(this.template, { android: headerActions }),
+            headerActions: NitroActionUtil.convert(this.template, headerActions),
             image: NitroImageUtil.convert(image),
             actions: platformActions,
             mapConfig: mapConfig

package/lib/types/Image.d.ts

@@ -19,7 +19,8 @@ export type GlyphMapKey = keyof AutoPlayGlyphMap extends never ? string : Extrac
 type GlyphStyleFields = {
     /**
      * Sets the icon dark and light mode color or a single color for both.
-     * Defaults to white for dark mode and black for light mode if not specified.
+     * Defaults to `'default'` if not specified, which is white for dark mode and black for light mode.
+     * On Android Auto the host tint that follows the template is not applied when `backgroundColor` is not transparent.
      * Might not get applied everywhere like MapTemplate buttons on Android.
      */
     color?: ThemedColor | string;
@@ -49,6 +50,8 @@ export type AutoImage = AutoGlyph | {
     /**
      * if specified the image gets tinted, if not it will just use the original image
      * Might not get applied everywhere like MapTemplate buttons on Android.
+     * Use `'default'` for monochrome icons that must stay readable on both dark and light
+     * Android Auto templates (17.8+), see README.
      */
     color?: ThemedColor | string;
     type: 'asset';
@@ -57,6 +60,8 @@ export type AutoImage = AutoGlyph | {
     uri: string;
     /**
      * if specified the image gets tinted, if not it will just use the original image
+     * Use `'default'` for monochrome icons that must stay readable on both dark and light
+     * Android Auto templates (17.8+), see README.
      */
     color?: ThemedColor | string;
     /**

package/lib/utils/NitroColor.d.ts

@@ -1,6 +1,7 @@
 export type NitroColor = {
     lightColor: number;
     darkColor: number;
+    isDefault?: boolean;
 };
 export type ThemedColor = {
     lightColor: string;

package/lib/utils/NitroColor.js

@@ -1,4 +1,9 @@
 import { processColor } from 'react-native';
+const DefaultNitroColor = {
+    darkColor: convertColor('white'),
+    lightColor: convertColor('black'),
+    isDefault: true,
+};
 function convertColor(color) {
     // since we accept only string it can return a number only
     return processColor(color);
@@ -8,6 +13,9 @@ function convert(color) {
         return undefined;
     }
     if (typeof color === 'string') {
+        if (color === 'default') {
+            return DefaultNitroColor;
+        }
         const convertedColor = convertColor(color);
         return { darkColor: convertedColor, lightColor: convertedColor };
     }

package/lib/utils/NitroImage.js

@@ -59,7 +59,7 @@ function convert(image) {
         return undefined;
     }
     if (image.type === 'glyph') {
-        const { color = { darkColor: 'white', lightColor: 'black' }, fontScale, backgroundColor = 'transparent', } = image;
+        const { color = 'default', fontScale, backgroundColor = 'transparent' } = image;
         return {
             glyph: resolveGlyph(image),
             fontName: getIconFont(),

package/lib/utils/NitroManeuver.js

@@ -6,9 +6,7 @@ function convertManeuverImage(image) {
         return undefined;
     }
     if (image.type === 'glyph') {
-        const color = typeof image.color === 'string'
-            ? image.color
-            : (image.color ?? { darkColor: 'white', lightColor: 'black' });
+        const color = typeof image.color === 'string' ? image.color : (image.color ?? 'default');
         return NitroImageUtil.convert({
             ...image,
             color: color,

package/lib/utils/NitroOptionsPanel.d.ts

@@ -0,0 +1,103 @@
+import type { ImageButton, TextButton } from '../types/Button';
+import type { AutoImage } from '../types/Image';
+import type { AutoText, Distance } from '../types/Text';
+import type { DurationWithTimeZone } from '../types/Trip';
+import { type NitroAction } from './NitroAction';
+import { type GridButton, type NitroGridButton } from './NitroGrid';
+import { type NitroImage } from './NitroImage';
+import { type DefaultRow, type NitroSection, type RadioRow, type TextRow, type ToggleRow, type WaypointCoordinate, type WaypointRow } from './NitroSection';
+export type OptionsPanelGridSection<T> = {
+    type: 'grid';
+    title?: string;
+    buttons: Array<GridButton<T>>;
+};
+export type ChargingConnector = 'ccs1' | 'ccs2' | 'j1772' | 'chaDeMo' | 'mennekes' | 'gbtDC' | 'gbtAC' | 'nacsDC' | 'nacsAC';
+/**
+ * one outlet (`CPChargingStationConnection`) on a charging station.
+ */
+export type ChargerOutlet<T> = {
+    connector: ChargingConnector;
+    voltage: number;
+    /** converted to megawatts on the native side above 1000 kW */
+    powerKw: number;
+    onPress?: (template: T) => void;
+};
+/**
+ * the charging station's own location, shown as an additional `CPMapTemplateWaypoint` item in
+ * the charger section, alongside its outlets.
+ */
+export type ChargerLocation<T> = {
+    /**
+     * the item's own label — distinct from the section's `title`, which is already shown as the
+     * section header, so this defaults to blank rather than repeating it.
+     */
+    name?: string;
+    /** newline-separated address lines, most-preferred first */
+    address?: string;
+    coordinate: WaypointCoordinate;
+    travelEstimates: {
+        distance: Distance;
+        duration: DurationWithTimeZone;
+        /**
+         * by default travel estimates are not shown
+         * setting this to true add another row showing CPTravelEstimates
+         */
+        visible?: boolean;
+    };
+    image?: AutoImage;
+    onPress?: (template: T) => void;
+};
+/**
+ * charger section having n-ChargerOutlet
+ */
+export type OptionsPanelChargerSection<T> = {
+    type: 'charger';
+    title?: string;
+    outlets: Array<ChargerOutlet<T>>;
+    location?: ChargerLocation<T>;
+};
+export type OptionsPanelListSection<T> = {
+    type: 'list';
+    title?: string;
+    items: Array<DefaultRow<T> | ToggleRow<T> | TextRow | WaypointRow<T>> | Array<RadioRow<T>>;
+};
+export type OptionsPanelSection<T> = OptionsPanelListSection<T> | OptionsPanelGridSection<T> | OptionsPanelChargerSection<T>;
+export type OptionsPanelConfig<T> = {
+    title?: AutoText;
+    sections: Array<OptionsPanelSection<T>>;
+    actions?: [TextButton<T>] | [TextButton<T>, ImageButton<T>];
+};
+export type NitroOptionsPanelGridSection = {
+    title?: string;
+    buttons: Array<NitroGridButton>;
+};
+export type NitroChargerOutlet = {
+    connector: ChargingConnector;
+    voltage: number;
+    powerKw: number;
+    onPress?: () => void;
+};
+export type NitroChargerLocation = {
+    name?: string;
+    address?: string;
+    coordinate: WaypointCoordinate;
+    distance: Distance;
+    duration: DurationWithTimeZone;
+    visible?: boolean;
+    image?: NitroImage;
+    onPress?: () => void;
+};
+export type NitroOptionsPanelChargerSection = {
+    title?: string;
+    outlets: Array<NitroChargerOutlet>;
+    location?: NitroChargerLocation;
+};
+export type NitroOptionsPanelSection = NitroSection | NitroOptionsPanelGridSection | NitroOptionsPanelChargerSection;
+export type NitroOptionsPanelConfig = {
+    title?: AutoText;
+    sections: Array<NitroOptionsPanelSection>;
+    actions?: Array<NitroAction>;
+};
+export declare const NitroOptionsPanelUtil: {
+    convert: <T>(template: T, config?: OptionsPanelConfig<T>) => NitroOptionsPanelConfig | undefined;
+};

package/lib/utils/NitroOptionsPanel.js

@@ -0,0 +1,63 @@
+import { NitroActionUtil } from './NitroAction';
+import { NitroGridUtil } from './NitroGrid';
+import { NitroImageUtil } from './NitroImage';
+import { NitroSectionUtil, } from './NitroSection';
+const isRadioSection = (items) => {
+    return items.length > 0 && items.every((item) => item.type === 'radio');
+};
+const convertSection = (template, section) => {
+    if (section.type === 'grid') {
+        return {
+            title: section.title,
+            buttons: NitroGridUtil.convert(template, section.buttons),
+        };
+    }
+    if (section.type === 'charger') {
+        const { location } = section;
+        return {
+            title: section.title,
+            outlets: section.outlets.map((outlet) => ({
+                connector: outlet.connector,
+                voltage: outlet.voltage,
+                powerKw: outlet.powerKw,
+                onPress: outlet.onPress ? () => outlet.onPress?.(template) : undefined,
+            })),
+            location: location
+                ? {
+                    name: location.name,
+                    address: location.address,
+                    coordinate: location.coordinate,
+                    distance: location.travelEstimates.distance,
+                    duration: location.travelEstimates.duration,
+                    visible: location.travelEstimates.visible,
+                    image: NitroImageUtil.convert(location.image),
+                    onPress: location.onPress ? () => location.onPress?.(template) : undefined,
+                }
+                : undefined,
+        };
+    }
+    const { items, title = '' } = section;
+    const multiSection = isRadioSection(items)
+        ? { type: 'radio', title, items }
+        : {
+            type: 'default',
+            title,
+            items,
+        };
+    const [nitroSection] = NitroSectionUtil.convert(template, [multiSection]) ?? [];
+    if (nitroSection == null) {
+        throw new Error('converting sections failed');
+    }
+    return nitroSection;
+};
+const convert = (template, config) => {
+    if (config == null) {
+        return undefined;
+    }
+    return {
+        title: config.title,
+        sections: config.sections.map((section) => convertSection(template, section)),
+        actions: NitroActionUtil.convert(template, config.actions),
+    };
+};
+export const NitroOptionsPanelUtil = { convert };

package/lib/utils/NitroSection.d.ts

@@ -1,6 +1,82 @@
-import type { Section } from '../templates/ListTemplate';
-import type { AutoText } from '../types/Text';
+import type { ListImageType } from '../templates/ListTemplate';
+import type { AutoImage } from '../types/Image';
+import { type AutoText, type Distance } from '../types/Text';
+import type { DurationWithTimeZone } from '../types/Trip';
 import { type NitroImage } from './NitroImage';
+type BaseRow = {
+    title: AutoText;
+    enabled?: boolean;
+    image?: AutoImage;
+    /** @namespace Android */
+    imageType?: ListImageType;
+};
+export type DefaultRow<T> = BaseRow & {
+    type: 'default';
+    /**
+     * adds a chevron at the end of the row
+     */
+    browsable?: boolean;
+    onPress: (template: T) => void;
+    detailedText?: AutoText;
+};
+export type ToggleRow<T> = BaseRow & {
+    type: 'toggle';
+    checked: boolean;
+    onPress: (template: T, checked: boolean) => void;
+};
+export type RadioRow<T> = BaseRow & {
+    type: 'radio';
+    onPress: (template: T) => void;
+    selected?: boolean;
+};
+export type TextRow = BaseRow & {
+    type: 'text';
+    detailedText?: AutoText;
+};
+export type WaypointCoordinate = {
+    latitude: number;
+    longitude: number;
+    altitude?: number;
+};
+/**
+ * a point of interest, e.g. a charger's location. Renders as a `CPMapTemplateWaypoint` item
+ * (showing `title` as the name, `address` as the address, and the travel estimate for reaching
+ * it) when part of a `CPMapPanel` (iOS 27+); falls back to a plain row using `title`/`address`
+ * as the detail line everywhere else (including Android, which has no equivalent concept).
+ */
+export type WaypointRow<T> = BaseRow & {
+    type: 'waypoint';
+    /**
+     * add one of {@link TextPlaceholders} to add travelEstimates
+     * prefer travelEstimates.visible over that on iOS 27+
+     */
+    address?: string;
+    coordinate: WaypointCoordinate;
+    travelEstimates: {
+        distance: Distance;
+        duration: DurationWithTimeZone;
+        /**
+         * by default travel estimates are not shown
+         * setting this to true adds another row showing CPTravelEstimates
+         * @namespace iOS 27+
+         */
+        visible?: boolean;
+    };
+    onPress?: (template: T) => void;
+};
+export type MultiSection<T> = {
+    type: 'default';
+    title: string;
+    items: Array<DefaultRow<T> | ToggleRow<T> | TextRow | WaypointRow<T>>;
+} | {
+    type: 'radio';
+    title: string;
+    items: Array<RadioRow<T>>;
+};
+export type SingleSection<T> = {
+    [K in MultiSection<T> as K['type']]: Omit<K, 'title' | 'detailedText'>;
+}[MultiSection<T>['type']];
+export type Section<T> = Array<MultiSection<T>> | SingleSection<T>;
 type NitroSectionType = 'default' | 'radio';
 export type NitroRow = {
     title: AutoText;
@@ -8,9 +84,20 @@ export type NitroRow = {
     browsable?: boolean;
     enabled: boolean;
     image?: NitroImage;
+    imageType?: ListImageType;
     checked?: boolean;
     onPress?: (checked?: boolean) => void;
     selected?: boolean;
+    coordinate?: WaypointCoordinate;
+    distance?: Distance;
+    duration?: DurationWithTimeZone;
+    /**
+     * only meaningful in panel context (iOS 27+, `mapConfig` set) — adds a sibling `CPMapPanelItem`
+     * showing `distance`/`duration` as a native `CPTravelEstimates` row. Non-panel/Android rendering
+     * relies purely on `title`/`detailedText` opting in via `TextPlaceholders` instead.
+     */
+    travelEstimatesVisible?: boolean;
+    address?: string;
 };
 export type NitroSection = {
     title?: string;

package/lib/utils/NitroSection.js

@@ -1,3 +1,4 @@
+import { TextPlaceholders } from '../types/Text';
 import { NitroImageUtil } from './NitroImage';
 const validateRadioItems = (type, items) => {
     if (__DEV__ &&
@@ -31,9 +32,49 @@ const convert = (template, sections) => {
         },
     ];
 };
+/**
+ * `AutoText.distance`/`.duration` only take effect if `text` actually uses the matching
+ * `TextPlaceholders` marker — populate whichever of those the text references, leaving the rest
+ * of `text` untouched, so a title/address that doesn't opt in via a placeholder is unaffected.
+ */
+const withTravelEstimates = (text, distance, durationSeconds) => {
+    const hasDistance = text.text.includes(TextPlaceholders.Distance);
+    const hasDuration = text.text.includes(TextPlaceholders.Duration);
+    if (!hasDistance && !hasDuration) {
+        return text;
+    }
+    return {
+        ...text,
+        distance: hasDistance ? distance : text.distance,
+        duration: hasDuration ? durationSeconds : text.duration,
+    };
+};
 const convertRow = (template, item) => {
-    const { title, type, enabled = true, image } = item;
-    const detailedText = 'detailedText' in item ? item.detailedText : undefined;
+    const { type, enabled = true, image, imageType } = item;
+    // `WaypointRow` has no `detailedText` of its own — `address` doubles as the detail line
+    // whenever this falls back to a plain row (non-panel context, Android).
+    let title = item.title;
+    let detailedText = item.type === 'waypoint'
+        ? item.address != null
+            ? { text: item.address }
+            : undefined
+        : 'detailedText' in item
+            ? item.detailedText
+            : undefined;
+    // Opt-in only: a title/address using `{distance}`/`{duration}` gets those values filled in,
+    // via the same substitution `AutoText` already does everywhere else — no separate "estimate"
+    // UI element needed for a row embedded in a list alongside other rows. Deliberately NOT gated
+    // on `travelEstimates.visible` — that flag only controls the panel-only sibling
+    // `CPTravelEstimates` item (see `Parser.swift`'s `travelEstimatesVisible` check), which has no
+    // bearing on the non-panel/Android fallback text this feeds; a placeholder in the text is
+    // already its own explicit opt-in regardless of `visible`.
+    if (item.type === 'waypoint') {
+        const { distance, duration } = item.travelEstimates;
+        title = withTravelEstimates(title, distance, duration.seconds);
+        if (detailedText != null) {
+            detailedText = withTravelEstimates(detailedText, distance, duration.seconds);
+        }
+    }
     const selected = type === 'radio' ? (item.selected ?? false) : undefined;
     const onTogglePress = item.type === 'toggle' ? item.onPress : undefined;
     const onRowPress = item.type !== 'text' && item.type !== 'toggle' ? item.onPress : undefined;
@@ -53,10 +94,16 @@ const convertRow = (template, item) => {
         detailedText,
         enabled,
         image: NitroImageUtil.convert(image),
+        imageType,
         title,
         checked: type === 'toggle' ? item.checked : undefined,
         onPress,
         selected,
+        coordinate: item.type === 'waypoint' ? item.coordinate : undefined,
+        distance: item.type === 'waypoint' ? item.travelEstimates.distance : undefined,
+        duration: item.type === 'waypoint' ? item.travelEstimates.duration : undefined,
+        travelEstimatesVisible: item.type === 'waypoint' ? item.travelEstimates.visible : undefined,
+        address: item.type === 'waypoint' ? item.address : undefined,
     };
 };
 export const NitroSectionUtil = { convert };