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

package/src/templates/ListTemplate.ts

@@ -1,11 +1,10 @@
 import { NitroModules } from 'react-native-nitro-modules';
 import type { ListTemplate as NitroListTemplate } from '../specs/ListTemplate.nitro';
-import type { AutoImage } from '../types/Image';
 import type { AutoText } from '../types/Text';
 import { type NitroAction, NitroActionUtil } from '../utils/NitroAction';
 import { NitroMapButton } from '../utils/NitroMapButton';
-import { type NitroSection, NitroSectionUtil } from '../utils/NitroSection';
-import type { BaseMapTemplateConfig } from './MapTemplate';
+import { type NitroSection, NitroSectionUtil, type Section } from '../utils/NitroSection';
+import type { BaseMapTemplateConfig, PanelHeaderActions } from './MapTemplate';
 import {
   type HeaderActions,
   type NitroBaseMapTemplateConfig,
@@ -16,56 +15,23 @@ import {
 
 const HybridListTemplate = NitroModules.createHybridObject<NitroListTemplate>('ListTemplate');
 
-type BaseRow = {
-  title: AutoText;
-  enabled?: boolean;
-  image?: AutoImage;
-};
-
-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 MultiSection<T> =
-  | {
-      type: 'default';
-      title: string;
-      items: Array<DefaultRow<T> | ToggleRow<T> | TextRow>;
-    }
-  | {
-      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>;
+/**
+ * Controls the Android image size for a list item.
+ * @namespace Android
+ */
+export type ListImageType = 'large' | 'medium' | 'small' | 'extra_small' | 'icon';
+
+export type {
+  DefaultRow,
+  MultiSection,
+  RadioRow,
+  Section,
+  SingleSection,
+  TextRow,
+  ToggleRow,
+  WaypointCoordinate,
+  WaypointRow,
+} from '../utils/NitroSection';
 
 export interface NitroListTemplateConfig extends TemplateConfig {
   headerActions?: Array<NitroAction>;
@@ -92,9 +58,15 @@ export type ListTemplateConfig = Omit<
   sections?: Section<ListTemplate>;
   /**
    * If mapConfig is defined, it will use a MapWithContentTemplate with the current template. This results in a ListTemplate with a map in background. No actions need to be specified, can be empty object.
-   * @namespace Android
+   * @namespace Android - uses MapWithContentTemplate
+   * @namespace iOS - renders as a CPMapPanel on the current root map template (iOS 27+);
+   * `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?: BaseMapTemplateConfig<ListTemplate>;
+  mapConfig?: Omit<BaseMapTemplateConfig<ListTemplate>, 'headerActions'> & {
+    headerActions?: PanelHeaderActions<ListTemplate>;
+  };
 };
 
 export class ListTemplate extends Template<ListTemplateConfig, HeaderActions<ListTemplate>> {

package/src/templates/MapTemplate.ts

@@ -7,7 +7,13 @@ import { SafeAreaInsetsProvider } from '../components/SafeAreaInsetsContext';
 import { WindowInformationWrapper } from '../components/WindowInformationWrapper';
 import { HybridAutoPlay } from '../hybrid/HybridAutoPlay';
 import type { MapTemplate as NitroMapTemplate } from '../specs/MapTemplate.nitro';
-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 {
@@ -21,6 +27,7 @@ import { type NavigationAlert, NitroAlertUtil } from '../utils/NitroAlert';
 import { type NitroColor, NitroColorUtil, type ThemedColor } from '../utils/NitroColor';
 import { NitroManeuverUtil, type NitroRoutingManeuver } from '../utils/NitroManeuver';
 import { NitroMapButton } from '../utils/NitroMapButton';
+import { NitroOptionsPanelUtil, type OptionsPanelConfig } from '../utils/NitroOptionsPanel';
 import {
   type HeaderActionsIos,
   type NitroBaseMapTemplateConfig,
@@ -31,6 +38,17 @@ import {
 
 const HybridMapTemplate = NitroModules.createHybridObject<NitroMapTemplate>('MapTemplate');
 
+export type {
+  ChargerLocation,
+  ChargerOutlet,
+  ChargingConnector,
+  OptionsPanelChargerSection,
+  OptionsPanelConfig,
+  OptionsPanelGridSection,
+  OptionsPanelListSection,
+  OptionsPanelSection,
+} from '../utils/NitroOptionsPanel';
+
 export type Point = { x: number; y: number };
 export type VisibleTravelEstimate = 'first' | 'last';
 
@@ -118,6 +136,19 @@ export type MapHeaderActions<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
@@ -146,6 +177,13 @@ export type MapTemplateConfig = Omit<
      */
     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.
@@ -185,6 +223,7 @@ export class MapTemplate extends Template<MapTemplateConfig, MapTemplateConfig['
       onStopNavigation,
       onAutoDriveEnabled,
       defaultGuidanceBackgroundColor,
+      optionsPanel,
       ...baseConfig
     } = config;
 
@@ -220,6 +259,25 @@ export class MapTemplate extends Template<MapTemplateConfig, MapTemplateConfig['
     };
 
     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+).
+   */
+  public updateOptionsPanel(optionsPanel?: OptionsPanelConfig<MapTemplate>) {
+    if (Platform.OS !== 'ios') {
+      return;
+    }
+
+    return HybridMapTemplate.updateOptionsPanel(
+      this.id,
+      NitroOptionsPanelUtil.convert(this.template, optionsPanel)
+    );
   }
 
   public setMapButtons(mapButtons: MapTemplateConfig['mapButtons']) {
@@ -364,7 +422,7 @@ export class MapTemplate extends Template<MapTemplateConfig, MapTemplateConfig['
    * or use this to start a navigation session without asking the user
    */
   public startNavigation(trip: TripConfig) {
-    HybridMapTemplate.startNavigation(this.id, trip);
+    return HybridMapTemplate.startNavigation(this.id, trip);
   }
 
   public stopNavigation() {

package/src/templates/MessageTemplate.ts

@@ -5,7 +5,7 @@ import type {
   AutoImage,
   BaseMapTemplateConfig,
   CustomActionButtonAndroid,
-  HeaderActionsAndroid,
+  HeaderActions,
   TextButton,
 } from '..';
 import { HybridAutoPlay } from '../hybrid/HybridAutoPlay';
@@ -14,6 +14,7 @@ import type { AutoText } from '../types/Text';
 import { type NitroAction, NitroActionUtil } from '../utils/NitroAction';
 import { type NitroImage, NitroImageUtil } from '../utils/NitroImage';
 import { NitroMapButton } from '../utils/NitroMapButton';
+import type { PanelActionsIos, PanelHeaderActions } from './MapTemplate';
 import type { NitroBaseMapTemplateConfig, NitroTemplateConfig, TemplateConfig } from './Template';
 
 const HybridMessageTemplate =
@@ -23,6 +24,7 @@ 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;
@@ -31,41 +33,86 @@ export interface NitroMessageTemplateConfig extends TemplateConfig {
   mapConfig?: NitroBaseMapTemplateConfig;
 }
 
-export type MessageTemplateConfig = Omit<
+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;
-  /**
-   * 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
-   */
-  mapConfig?: BaseMapTemplateConfig<MessageTemplate>;
-
-  /**
-   * @namespace Android up to 2 buttons of type TextButton, TextAndImageButton or ImageButton
-   * @namespace iOS - up to 3 buttons of type TextButton
-   */
-  actions?: {
-    android?:
-      | [CustomActionButtonAndroid<MessageTemplate>]
-      | [CustomActionButtonAndroid<MessageTemplate>, CustomActionButtonAndroid<MessageTemplate>];
-    ios?:
-      | [TextButton<MessageTemplate>, TextButton<MessageTemplate>, TextButton<MessageTemplate>]
-      | [TextButton<MessageTemplate>, TextButton<MessageTemplate>]
-      | [TextButton<MessageTemplate>];
-  };
 };
 
+/**
+ * `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;
+
+        /**
+         * @namespace Android up to 2 buttons of type TextButton, TextAndImageButton or ImageButton
+         * @namespace iOS - up to 3 buttons of type TextButton
+         */
+        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 - the panel can only show one TextButton plus one optional icon-only
+         * ImageButton, see PanelActionsIos
+         */
+        actions?: {
+          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.
@@ -86,7 +133,7 @@ export class MessageTemplate {
     const nitroConfig: NitroMessageTemplateConfig & NitroTemplateConfig = {
       ...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/src/types/Image.ts

@@ -24,7 +24,8 @@ export type GlyphMapKey = keyof AutoPlayGlyphMap extends never
 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;
@@ -61,6 +62,8 @@ export type AutoImage =
       /**
        * 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';
@@ -70,6 +73,8 @@ export type AutoImage =
       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/src/utils/NitroColor.ts

@@ -1,8 +1,14 @@
 import { processColor } from 'react-native';
 
-export type NitroColor = { lightColor: number; darkColor: number };
+export type NitroColor = { lightColor: number; darkColor: number; isDefault?: boolean };
 export type ThemedColor = { lightColor: string; darkColor: string };
 
+const DefaultNitroColor = {
+  darkColor: convertColor('white'),
+  lightColor: convertColor('black'),
+  isDefault: true,
+};
+
 function convertColor(color: string): number;
 function convertColor(color?: string): number | undefined;
 function convertColor(color?: string): number | undefined {
@@ -18,6 +24,9 @@ function convert(color?: ThemedColor | string): NitroColor | undefined {
   }
 
   if (typeof color === 'string') {
+    if (color === 'default') {
+      return DefaultNitroColor;
+    }
     const convertedColor = convertColor(color);
     return { darkColor: convertedColor, lightColor: convertedColor };
   }

package/src/utils/NitroImage.ts

@@ -96,11 +96,7 @@ function convert(image?: AutoImage): NitroImage | 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),

package/src/utils/NitroManeuver.ts

@@ -71,10 +71,7 @@ function convertManeuverImage(image?: ManeuverImage): NitroImage | 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/src/utils/NitroOptionsPanel.ts

@@ -0,0 +1,218 @@
+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, NitroActionUtil } from './NitroAction';
+import { type GridButton, type NitroGridButton, NitroGridUtil } from './NitroGrid';
+import { type NitroImage, NitroImageUtil } from './NitroImage';
+import {
+  type DefaultRow,
+  type MultiSection,
+  type NitroSection,
+  NitroSectionUtil,
+  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>;
+};
+
+const isRadioSection = <T>(
+  items: OptionsPanelListSection<T>['items']
+): items is Array<RadioRow<T>> => {
+  return items.length > 0 && items.every((item) => item.type === 'radio');
+};
+
+const convertSection = <T>(
+  template: T,
+  section: OptionsPanelSection<T>
+): NitroOptionsPanelSection => {
+  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: MultiSection<T> = 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 = <T>(
+  template: T,
+  config?: OptionsPanelConfig<T>
+): NitroOptionsPanelConfig | undefined => {
+  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 };