@inventure71/paddockjs 0.1.0 → 0.2.0

package/src/app/F1SimulatorApp.js

@@ -7,7 +7,7 @@ import { createRenderSnapshot } from '../rendering/renderSnapshot.js';
 import { createRaceSimulation } from '../simulation/raceSimulation.js';
 import { clamp } from '../simulation/simMath.js';
 import { offsetTrackPoint, pointAt, WORLD } from '../simulation/trackModel.js';
-import { querySimulatorDom, setText } from './domBindings.js';
+import { querySimulatorDom, setText, setTextAll } from './domBindings.js';
 
 const FIXED_STEP = 1 / 60;
 const TARGET_RENDER_FPS = 60;
@@ -84,6 +84,23 @@ function getTireClass(tire) {
   return String(tire ?? 'M').toLowerCase();
 }
 
+function formatTelemetryTime(value) {
+  if (!Number.isFinite(value)) return '--';
+  const clamped = Math.max(0, value);
+  if (clamped >= 60) {
+    const minutes = Math.floor(clamped / 60);
+    const seconds = clamped - minutes * 60;
+    return `${minutes}:${seconds.toFixed(3).padStart(6, '0')}`;
+  }
+  return `${clamped.toFixed(3)}s`;
+}
+
+function setPerformanceClass(node, status) {
+  ['overall-best', 'personal-best', 'slower'].forEach((name) => {
+    node?.classList?.toggle?.(`is-${name}`, status === name);
+  });
+}
+
 function colorToTint(color) {
   if (TINT_BY_COLOR.has(color)) return TINT_BY_COLOR.get(color);
   const tint = Number.parseInt(String(color ?? '').replace('#', ''), 16);
@@ -155,6 +172,9 @@ export class F1SimulatorApp {
     this.lastDomUpdateTime = 0;
     this.lastTimingRenderTime = 0;
     this.lastTimingRaceMode = null;
+    this.lastTimingMarkup = null;
+    this.lastOverviewRenderKey = null;
+    this.lastFinishClassificationMarkup = null;
     this.runtimeViewportVisible = true;
     this.runtimeDocumentVisible = typeof document === 'undefined' ? true : document.visibilityState !== 'hidden';
     this.runtimeTickerRunning = true;
@@ -167,6 +187,9 @@ export class F1SimulatorApp {
     this.emittedRaceEventKeys = new Set();
     this.raceFinishEmitted = false;
     this.timingGapMode = 'interval';
+    this.telemetryDrawerOpen = Boolean(
+      this.readouts.telemetryDrawerWorkbench?.classList?.contains?.('is-telemetry-open'),
+    );
   }
 
   async init() {
@@ -391,6 +414,31 @@ export class F1SimulatorApp {
       if (!driver) return;
       this.options.onDriverOpen?.(driver);
     }, eventOptions);
+
+    this.readouts.telemetryDrawerToggle?.addEventListener('click', () => {
+      this.setTelemetryDrawerOpen(!this.telemetryDrawerOpen);
+    }, eventOptions);
+
+    this.readouts.telemetryDrawerClose?.addEventListener('click', () => {
+      this.setTelemetryDrawerOpen(false);
+    }, eventOptions);
+  }
+
+  setTelemetryDrawerOpen(open) {
+    this.telemetryDrawerOpen = Boolean(open);
+    this.readouts.telemetryDrawerWorkbench?.classList?.toggle?.('is-telemetry-open', this.telemetryDrawerOpen);
+    if (this.telemetryDrawerOpen) {
+      this.readouts.telemetryDrawer?.removeAttribute?.('inert');
+      this.readouts.telemetryDrawer?.setAttribute?.('aria-hidden', 'false');
+    } else {
+      this.readouts.telemetryDrawer?.setAttribute?.('inert', '');
+      this.readouts.telemetryDrawer?.setAttribute?.('aria-hidden', 'true');
+    }
+    this.readouts.telemetryDrawerToggle?.setAttribute?.('aria-expanded', String(this.telemetryDrawerOpen));
+    if (this.readouts.telemetryDrawerToggle) {
+      this.readouts.telemetryDrawerToggle.textContent = this.telemetryDrawerOpen ? 'Close telemetry' : 'Telemetry';
+    }
+    this.invalidateCameraSafeArea();
   }
 
   observeLayoutResize() {
@@ -637,8 +685,17 @@ export class F1SimulatorApp {
       this.cameraSafeAreaCache = { width, safeArea };
       return safeArea;
     }
-    const overlapsCanvas = towerRect.right > canvasRect.left && towerRect.left < canvasRect.right;
-    if (!overlapsCanvas) {
+    const overlapsCanvasHorizontally = towerRect.right > canvasRect.left && towerRect.left < canvasRect.right;
+    const hasVerticalBounds = Number.isFinite(canvasRect.top) &&
+      Number.isFinite(canvasRect.bottom) &&
+      Number.isFinite(towerRect.top) &&
+      Number.isFinite(towerRect.bottom);
+    const overlapsCanvasVertically = !hasVerticalBounds ||
+      (towerRect.bottom > canvasRect.top && towerRect.top < canvasRect.bottom);
+    const canvasWidth = Math.max(1, canvasRect.right - canvasRect.left || width);
+    const towerWidth = Math.max(0, towerRect.right - towerRect.left);
+    const isSideGutter = towerWidth < canvasWidth * 0.6;
+    if (!overlapsCanvasHorizontally || !overlapsCanvasVertically || !isSideGutter) {
       const safeArea = { left: 0, width };
       this.cameraSafeAreaCache = { width, safeArea };
       return safeArea;
@@ -837,12 +894,16 @@ export class F1SimulatorApp {
 
     if (this.readouts.finishClassification) {
       const topThree = (snapshot.raceControl.classification ?? []).slice(0, 3);
-      this.readouts.finishClassification.innerHTML = topThree.map((entry) => `
+      const classificationMarkup = topThree.map((entry) => `
         <li>
           <span>P${escapeHtml(entry.rank)}</span>
           <strong>${escapeHtml(entry.timingCode ?? entry.code ?? entry.id)}</strong>
         </li>
       `).join('');
+      if (classificationMarkup !== this.lastFinishClassificationMarkup) {
+        this.readouts.finishClassification.innerHTML = classificationMarkup;
+        this.lastFinishClassificationMarkup = classificationMarkup;
+      }
     }
   }
 
@@ -903,7 +964,7 @@ export class F1SimulatorApp {
   renderTiming(cars, raceMode) {
     if (!this.timingList) return;
     this.syncTimingGapModeControls();
-    this.timingList.innerHTML = cars.map((car) => {
+    const timingMarkup = cars.map((car) => {
       const driver = this.driverById.get(car.id);
       let gap = 'Leader';
       if (raceMode === 'finished') {
@@ -935,6 +996,10 @@ export class F1SimulatorApp {
         </li>
       `;
     }).join('');
+    if (timingMarkup !== this.lastTimingMarkup) {
+      this.timingList.innerHTML = timingMarkup;
+      this.lastTimingMarkup = timingMarkup;
+    }
   }
 
   formatTimingGap(car) {
@@ -962,22 +1027,27 @@ export class F1SimulatorApp {
     const drsState = car.drsActive ? 'OPEN' : car.drsEligible ? 'READY' : 'OFF';
     const surface = (car.surface ?? 'track').toUpperCase();
 
-    setText(this.readouts.selectedCode, car.code);
-    if (this.readouts.selectedCode) this.readouts.selectedCode.style.color = car.color;
-    setText(this.readouts.selectedName, car.name);
-    setText(this.readouts.speed, `${Math.round(car.speedKph)} km/h`);
-    setText(this.readouts.throttle, `${Math.round(car.throttle * 100)}%`);
-    setText(this.readouts.brake, `${Math.round(car.brake * 100)}%`);
-    setText(this.readouts.tyres, `${Math.round(car.tireEnergy ?? 100)}%`);
-    setText(this.readouts.selectedDrs, drsState);
-    setText(this.readouts.surface, surface);
-    setText(
+    setTextAll(this.readouts.selectedCode, car.code);
+    this.readouts.selectedCode?.forEach?.((node) => {
+      node.style.color = car.color;
+    });
+    this.readouts.telemetrySectorBanners?.forEach?.((node) => {
+      node.style.setProperty('--driver-color', car.color);
+    });
+    setTextAll(this.readouts.selectedName, car.name);
+    setTextAll(this.readouts.speed, `${Math.round(car.speedKph)} km/h`);
+    setTextAll(this.readouts.throttle, `${Math.round(car.throttle * 100)}%`);
+    setTextAll(this.readouts.brake, `${Math.round(car.brake * 100)}%`);
+    setTextAll(this.readouts.tyres, `${Math.round(car.tireEnergy ?? 100)}%`);
+    setTextAll(this.readouts.selectedDrs, drsState);
+    setTextAll(this.readouts.surface, surface);
+    setTextAll(
       this.readouts.gap,
       car.rank === 1 || !Number.isFinite(car.gapAheadSeconds)
         ? '--'
         : `${car.gapAheadSeconds.toFixed(2)}s`,
     );
-    setText(
+    setTextAll(
       this.readouts.leaderGap,
       car.rank === 1 || !Number.isFinite(car.leaderGapSeconds)
         ? '--'
@@ -985,6 +1055,56 @@ export class F1SimulatorApp {
     );
 
     this.renderCarDriverOverview(car);
+    this.renderLapTelemetry(car.lapTelemetry);
+  }
+
+  renderLapTelemetry(telemetry) {
+    if (!telemetry) return;
+
+    setTextAll(this.readouts.currentSector, `S${telemetry.currentSector ?? 1}`);
+    setTextAll(this.readouts.completedLaps, `${telemetry.completedLaps ?? 0} laps`);
+    setTextAll(this.readouts.currentLapTime, formatTelemetryTime(telemetry.currentLapTime));
+    setTextAll(this.readouts.lastLapTime, formatTelemetryTime(telemetry.lastLapTime));
+    setTextAll(this.readouts.bestLapTime, formatTelemetryTime(telemetry.bestLapTime));
+
+    this.readouts.telemetrySectorBars?.forEach((bar) => {
+      const sector = Number(bar.dataset.telemetrySectorBar);
+      const index = sector - 1;
+      const isActive = sector === telemetry.currentSector;
+      const sectorComplete = Number.isFinite(telemetry.currentSectors?.[index]);
+      const fill = sectorComplete
+        ? 100
+        : (isActive ? clamp((telemetry.currentSectorProgress ?? 0) * 100, 0, 100) : 0);
+      const fillValue = `${fill.toFixed(1)}%`;
+      if (bar.style.getPropertyValue('--sector-fill') !== fillValue) {
+        bar.style.setProperty('--sector-fill', fillValue);
+      }
+      bar.classList.toggle('is-active', isActive);
+      bar.classList.toggle('is-complete', sectorComplete);
+      setPerformanceClass(bar, telemetry.sectorPerformance?.current?.[index]);
+    });
+
+    this.readouts.telemetrySectorTimes?.forEach((node) => {
+      const sector = Number(node.dataset.telemetrySectorTime);
+      const index = sector - 1;
+      const value = sector === telemetry.currentSector && !Number.isFinite(telemetry.currentSectors?.[index])
+        ? telemetry.currentSectorElapsed
+        : telemetry.currentSectors?.[index];
+      setText(node, formatTelemetryTime(value));
+      setPerformanceClass(node, telemetry.sectorPerformance?.current?.[index]);
+    });
+
+    this.readouts.telemetrySectorLast?.forEach((node) => {
+      const index = Number(node.dataset.telemetrySectorLast) - 1;
+      setText(node, formatTelemetryTime(telemetry.lastSectors?.[index]));
+      setPerformanceClass(node, telemetry.sectorPerformance?.last?.[index]);
+    });
+
+    this.readouts.telemetrySectorBest?.forEach((node) => {
+      const index = Number(node.dataset.telemetrySectorBest) - 1;
+      setText(node, formatTelemetryTime(telemetry.bestSectors?.[index]));
+      setPerformanceClass(node, telemetry.sectorPerformance?.best?.[index]);
+    });
   }
 
   getOverviewFields(driver, mode) {
@@ -1024,6 +1144,25 @@ export class F1SimulatorApp {
     const displayFields = fields.length > 0
       ? fields
       : [{ label: mode === 'driver' ? 'Driver fields' : 'Car fields', value: 'No custom fields' }];
+    const imageSrc = mode === 'driver'
+      ? (driver?.driverImage ?? driver?.portrait ?? driver?.avatar ?? this.assets.driverHelmet)
+      : this.assets.carOverview;
+    const overviewCode = mode === 'driver'
+      ? `${car.code} driver`
+      : `${driver?.vehicle?.name ?? car.vehicleName ?? car.code}`;
+    const overviewKey = JSON.stringify({
+      id: car.id,
+      mode,
+      color: car.color,
+      code: car.code,
+      icon,
+      driverNumber,
+      imageSrc,
+      overviewCode,
+      fields: displayFields.map((field) => [field.label, field.value]),
+    });
+    if (overviewKey === this.lastOverviewRenderKey) return;
+    this.lastOverviewRenderKey = overviewKey;
 
     this.readouts.carOverview?.style.setProperty('--driver-color', car.color);
     this.readouts.carOverviewDiagram?.style.setProperty('--driver-color', car.color);
@@ -1031,15 +1170,11 @@ export class F1SimulatorApp {
       this.readouts.carOverviewTitle.textContent = mode === 'driver' ? 'Driver overview' : 'Car overview';
     }
     if (this.readouts.carOverviewCode) {
-      this.readouts.carOverviewCode.textContent = mode === 'driver'
-        ? `${car.code} driver`
-        : `${driver?.vehicle?.name ?? car.vehicleName ?? car.code}`;
+      this.readouts.carOverviewCode.textContent = overviewCode;
     }
     if (this.readouts.carOverviewIcon) this.readouts.carOverviewIcon.textContent = icon;
     if (this.readouts.carOverviewImage) {
-      this.readouts.carOverviewImage.src = mode === 'driver'
-        ? (driver?.driverImage ?? driver?.portrait ?? driver?.avatar ?? this.assets.driverHelmet)
-        : this.assets.carOverview;
+      this.readouts.carOverviewImage.src = imageSrc;
     }
     if (this.readouts.carOverviewNumber) this.readouts.carOverviewNumber.textContent = driverNumber;
     if (this.readouts.carOverviewCoreStat) this.readouts.carOverviewCoreStat.textContent = mode === 'driver' ? 'Driver' : 'Car';
@@ -1255,6 +1390,9 @@ export class F1SimulatorApp {
     }
     this.sim = this.createRaceSimulation();
     this.selectedId = this.drivers[0]?.id ?? null;
+    this.lastTimingMarkup = null;
+    this.lastOverviewRenderKey = null;
+    this.lastFinishClassificationMarkup = null;
     this.resetRaceDataBannerState(performance.now());
     this.lastTimingRenderTime = 0;
     this.lastTimingRaceMode = null;

package/src/app/domBindings.js

@@ -13,16 +13,26 @@ export function querySimulatorDom(root) {
     contacts: root.querySelector('[data-contact-readout]'),
     camera: root.querySelector('[data-camera-readout]'),
     fps: root.querySelector('[data-fps-readout]'),
-    selectedCode: root.querySelector('[data-selected-code]'),
-    selectedName: root.querySelector('[data-selected-name]'),
-    speed: root.querySelector('[data-telemetry-speed]'),
-    throttle: root.querySelector('[data-telemetry-throttle]'),
-    brake: root.querySelector('[data-telemetry-brake]'),
-    tyres: root.querySelector('[data-telemetry-tyres]'),
-    selectedDrs: root.querySelector('[data-telemetry-drs]'),
-    surface: root.querySelector('[data-telemetry-surface]'),
-    gap: root.querySelector('[data-telemetry-gap]'),
-    leaderGap: root.querySelector('[data-telemetry-leader-gap]'),
+    selectedCode: root.querySelectorAll('[data-selected-code]'),
+    selectedName: root.querySelectorAll('[data-selected-name]'),
+    speed: root.querySelectorAll('[data-telemetry-speed]'),
+    throttle: root.querySelectorAll('[data-telemetry-throttle]'),
+    brake: root.querySelectorAll('[data-telemetry-brake]'),
+    tyres: root.querySelectorAll('[data-telemetry-tyres]'),
+    selectedDrs: root.querySelectorAll('[data-telemetry-drs]'),
+    surface: root.querySelectorAll('[data-telemetry-surface]'),
+    gap: root.querySelectorAll('[data-telemetry-gap]'),
+    leaderGap: root.querySelectorAll('[data-telemetry-leader-gap]'),
+    currentSector: root.querySelectorAll('[data-telemetry-current-sector]'),
+    completedLaps: root.querySelectorAll('[data-telemetry-completed-laps]'),
+    currentLapTime: root.querySelectorAll('[data-telemetry-current-lap-time]'),
+    lastLapTime: root.querySelectorAll('[data-telemetry-last-lap-time]'),
+    bestLapTime: root.querySelectorAll('[data-telemetry-best-lap-time]'),
+    telemetrySectorBars: root.querySelectorAll('[data-telemetry-sector-bar]'),
+    telemetrySectorTimes: root.querySelectorAll('[data-telemetry-sector-time]'),
+    telemetrySectorLast: root.querySelectorAll('[data-telemetry-sector-last]'),
+    telemetrySectorBest: root.querySelectorAll('[data-telemetry-sector-best]'),
+    telemetrySectorBanners: root.querySelectorAll('[data-telemetry-sector-banner]'),
     carOverview: root.querySelector('[data-paddock-component="car-driver-overview"]'),
     carOverviewTitle: root.querySelector('[data-car-overview-title]'),
     carOverviewDiagram: root.querySelector('.car-overview-diagram'),
@@ -32,6 +42,10 @@ export function querySimulatorDom(root) {
     carOverviewNumber: root.querySelector('[data-car-overview-number]'),
     carOverviewCoreStat: root.querySelector('[data-car-overview-core-stat]'),
     carOverviewFields: root.querySelectorAll('[data-overview-field]'),
+    telemetryDrawerWorkbench: root.querySelector('[data-race-telemetry-drawer]'),
+    telemetryDrawer: root.querySelector('[data-telemetry-drawer]'),
+    telemetryDrawerToggle: root.querySelector('[data-telemetry-drawer-toggle]'),
+    telemetryDrawerClose: root.querySelector('[data-telemetry-drawer-close]'),
     raceDataPanel: root.querySelector('[data-race-data-panel]'),
     raceDataKicker: root.querySelector('[data-race-data-kicker]'),
     raceDataTitle: root.querySelector('[data-race-data-title]'),
@@ -60,5 +74,16 @@ export function querySimulatorDom(root) {
 }
 
 export function setText(node, value) {
-  if (node) node.textContent = value;
+  if (!node) return;
+  const nextValue = String(value ?? '');
+  if (node.textContent !== nextValue) node.textContent = nextValue;
+}
+
+export function setTextAll(nodes, value) {
+  if (!nodes) return;
+  if (typeof nodes.forEach === 'function') {
+    nodes.forEach((node) => setText(node, value));
+    return;
+  }
+  setText(nodes, value);
 }

package/src/config/defaultOptions.js

@@ -18,6 +18,12 @@ export const DEFAULT_F1_SIMULATOR_OPTIONS = {
     showTimingTower: true,
     showTelemetry: true,
     telemetryIncludesOverview: true,
+    telemetryModules: {
+      core: true,
+      sectors: true,
+      lapTimes: true,
+      sectorTimes: true,
+    },
     showRaceDataPanel: true,
     raceDataBanners: {
       initial: 'project',
@@ -121,6 +127,7 @@ export function resolveF1SimulatorOptions(options = {}) {
     },
   };
   ui.raceDataBanners.enabled = normalizeEnabledBanners(ui.raceDataBanners.enabled);
+  ui.telemetryModules = normalizeTelemetryModules(ui.telemetryModules);
   if (!['project', 'radio', 'hidden'].includes(ui.raceDataBanners.initial)) {
     ui.raceDataBanners.initial = DEFAULT_F1_SIMULATOR_OPTIONS.ui.raceDataBanners.initial;
   }
@@ -174,6 +181,24 @@ function normalizeEnabledBanners(value) {
   return [...new Set(value.filter((item) => item === 'project' || item === 'radio'))];
 }
 
+function normalizeTelemetryModules(value) {
+  const defaults = DEFAULT_F1_SIMULATOR_OPTIONS.ui.telemetryModules;
+  const names = Object.keys(defaults);
+  if (value === false) {
+    return Object.fromEntries(names.map((name) => [name, false]));
+  }
+  if (value === true || value == null) return { ...defaults };
+  if (Array.isArray(value)) {
+    const requested = new Set(value);
+    return Object.fromEntries(names.map((name) => [name, requested.has(name)]));
+  }
+  if (typeof value !== 'object') return { ...defaults };
+  return Object.fromEntries(names.map((name) => [
+    name,
+    value[name] == null ? defaults[name] : Boolean(value[name]),
+  ]));
+}
+
 function normalizeTheme(theme) {
   return Object.fromEntries(
     Object.entries(DEFAULT_F1_SIMULATOR_OPTIONS.theme).map(([key, fallback]) => [

package/src/index.d.ts

@@ -7,6 +7,8 @@ export type TimingTowerVerticalFit = 'expand-race-view' | 'scroll';
 export type LayoutPreset = 'standard' | 'left-tower-overlay';
 export type CameraControlsMode = 'embedded' | 'external' | false;
 export type PaddockPresetName = 'dashboard' | 'timing-overlay' | 'compact-race' | 'full-dashboard';
+export type TelemetryModuleName = 'core' | 'sectors' | 'lapTimes' | 'sectorTimes';
+export type SectorPerformanceStatus = 'overall-best' | 'personal-best' | 'slower';
 
 export interface CustomField {
   label: string;
@@ -170,6 +172,7 @@ export interface F1SimulatorUiOptions {
   showTimingTower?: boolean;
   showTelemetry?: boolean;
   telemetryIncludesOverview?: boolean;
+  telemetryModules?: boolean | TelemetryModuleName[] | Partial<Record<TelemetryModuleName, boolean>>;
   showRaceDataPanel?: boolean;
   raceDataBanners?: {
     initial?: RaceBannerMode;
@@ -197,9 +200,40 @@ export interface TrackSnapshot {
   seed?: number | null;
   width?: number;
   length?: number;
+  sectors?: TrackSectorSnapshot[];
   [key: string]: unknown;
 }
 
+export interface TrackSectorSnapshot {
+  index: number;
+  id: string;
+  label: string;
+  start: number;
+  end: number;
+  startRatio: number;
+  endRatio: number;
+  length: number;
+}
+
+export interface LapTelemetrySnapshot {
+  currentLap: number;
+  currentSector: number;
+  currentLapTime: number | null;
+  currentSectorElapsed: number | null;
+  currentSectorProgress: number | null;
+  currentSectors: Array<number | null>;
+  sectorPerformance: {
+    current: Array<SectorPerformanceStatus | null>;
+    last: Array<SectorPerformanceStatus | null>;
+    best: Array<SectorPerformanceStatus | null>;
+  };
+  lastLapTime: number | null;
+  bestLapTime: number | null;
+  lastSectors: Array<number | null>;
+  bestSectors: Array<number | null>;
+  completedLaps: number;
+}
+
 export interface RaceEvent {
   type: string;
   at?: number;
@@ -221,6 +255,7 @@ export interface CarSnapshot {
   classifiedRank?: number | null;
   intervalAheadSeconds?: number | null;
   leaderGapSeconds?: number | null;
+  lapTelemetry?: LapTelemetrySnapshot;
   [key: string]: unknown;
 }
 
@@ -309,6 +344,7 @@ export interface F1SimulatorOptions extends F1SimulatorCallbacks {
 export interface MountRaceCanvasOptions {
   includeRaceDataPanel?: boolean;
   includeTimingTower?: boolean;
+  includeTelemetrySectorBanner?: boolean;
   timingTowerVerticalFit?: TimingTowerVerticalFit;
 }
 
@@ -316,6 +352,11 @@ export interface MountTelemetryPanelOptions {
   includeOverview?: boolean;
 }
 
+export interface MountRaceTelemetryDrawerOptions {
+  timingTowerVerticalFit?: TimingTowerVerticalFit;
+  drawerInitiallyOpen?: boolean;
+}
+
 export interface F1MountedSimulator {
   destroy(): void;
   restart(nextOptions?: Partial<F1SimulatorOptions>): void;
@@ -334,6 +375,12 @@ export interface PaddockSimulatorController {
   mountTimingTower<T extends Element>(root: T): T;
   mountRaceCanvas<T extends Element>(root: T, options?: MountRaceCanvasOptions): T;
   mountTelemetryPanel<T extends Element>(root: T, options?: MountTelemetryPanelOptions): T;
+  mountTelemetryCore<T extends Element>(root: T): T;
+  mountTelemetrySectors<T extends Element>(root: T): T;
+  mountTelemetrySectorBanner<T extends Element>(root: T): T;
+  mountTelemetryLapTimes<T extends Element>(root: T): T;
+  mountTelemetrySectorTimes<T extends Element>(root: T): T;
+  mountRaceTelemetryDrawer<T extends Element>(root: T, options?: MountRaceTelemetryDrawerOptions): T;
   mountCarDriverOverview<T extends Element>(root: T): T;
   mountRaceDataPanel<T extends Element>(root: T): T;
   querySelector(selector: string): Element | null;
@@ -395,5 +442,15 @@ export function mountTelemetryPanel<T extends Element>(
   simulator: PaddockSimulatorController,
   options?: MountTelemetryPanelOptions,
 ): T;
+export function mountTelemetryCore<T extends Element>(root: T, simulator: PaddockSimulatorController): T;
+export function mountTelemetrySectors<T extends Element>(root: T, simulator: PaddockSimulatorController): T;
+export function mountTelemetrySectorBanner<T extends Element>(root: T, simulator: PaddockSimulatorController): T;
+export function mountTelemetryLapTimes<T extends Element>(root: T, simulator: PaddockSimulatorController): T;
+export function mountTelemetrySectorTimes<T extends Element>(root: T, simulator: PaddockSimulatorController): T;
+export function mountRaceTelemetryDrawer<T extends Element>(
+  root: T,
+  simulator: PaddockSimulatorController,
+  options?: MountRaceTelemetryDrawerOptions,
+): T;
 export function mountCarDriverOverview<T extends Element>(root: T, simulator: PaddockSimulatorController): T;
 export function mountRaceDataPanel<T extends Element>(root: T, simulator: PaddockSimulatorController): T;

package/src/index.js

@@ -9,8 +9,14 @@ export {
   mountRaceCanvas,
   mountRaceControls,
   mountRaceDataPanel,
+  mountRaceTelemetryDrawer,
   mountSafetyCarControl,
+  mountTelemetryCore,
+  mountTelemetryLapTimes,
   mountTelemetryPanel,
+  mountTelemetrySectorBanner,
+  mountTelemetrySectorTimes,
+  mountTelemetrySectors,
   mountTimingTower,
 } from './api/PaddockSimulatorController.js';