@inventure71/paddockjs 2.0.1 → 4.0.0

package/src/app/readouts/timingTowerRenderer.js

@@ -1,5 +1,12 @@
-import { setText } from '../domBindings.js';
-import { escapeHtml, formatLapGap, formatRaceGap, getTireClass } from './readoutFormatters.js';
+import { getNextTimingGapMode, getTimingGapModeLabel, normalizeTimingGapMode } from '../../config/timingGapMode.js';
+import { setText, setTextAll } from '../domBindings.js';
+import {
+  escapeHtml,
+  formatCssColor,
+  formatLapGap,
+  formatRaceGap,
+  getTireClass,
+} from './readoutFormatters.js';
 
 function formatPenaltyHeadline(penalty) {
   const serviceType = penalty?.serviceType;
@@ -104,12 +111,206 @@ export function getTimingOrderKey(cars = [], { timingGapMode = 'interval' } = {}
 }
 
 export function syncTimingGapModeControls({ readouts, buttons, timingGapMode }) {
-  const label = timingGapMode === 'leader' ? 'Gap' : 'Int';
-  setText(readouts.timingGapLabel, label);
+  const normalizedMode = normalizeTimingGapMode(timingGapMode);
+  const label = getTimingGapModeLabel(normalizedMode);
+  const nextLabel = getTimingGapModeLabel(getNextTimingGapMode(normalizedMode));
+  setTextAll(readouts.timingGapLabels ?? readouts.timingGapLabel, label);
   buttons.forEach((button) => {
-    const active = button.dataset.timingGapMode === timingGapMode;
-    button.setAttribute('aria-pressed', String(active));
-    button.classList?.toggle?.('is-active', active);
+    const leaderMode = normalizedMode === 'leader';
+    setText(button, label);
+    button.setAttribute('aria-pressed', String(leaderMode));
+    button.setAttribute('aria-label', `Timing gap mode ${label}; switch to ${nextLabel}`);
+    button.setAttribute('title', `Switch to ${nextLabel}`);
+    button.classList?.toggle?.('is-active', leaderMode);
+  });
+}
+
+function timingGapForCar(car, raceMode, timingGapMode) {
+  if (isDnfCar(car)) return 'DNF';
+  if (isWavedFlagCar(car) && raceMode !== 'finished') return 'WAVED';
+  if (raceMode === 'finished') return car.rank === 1 ? 'Winner' : 'FIN';
+  if (raceMode === 'safety-car' && car.rank > 1) return 'SC';
+  if (raceMode === 'pre-start') return car.rank === 1 ? 'Pole' : 'Grid';
+  if (car.rank > 1) return formatRaceGap(car, timingGapMode);
+  return 'Leader';
+}
+
+function timingRowModel({ car, driver, raceMode, selectedId, timingGapMode, penalty }) {
+  const dnf = isDnfCar(car);
+  const tire = car.tire ?? driver?.tire ?? 'M';
+  const timingCode = car.timingCode ?? driver?.timingCode ?? car.code;
+  const team = car.team ?? driver?.team ?? null;
+  const icon = team?.icon ?? car.icon ?? driver?.icon ?? timingCode;
+  const driverColor = formatCssColor(car.color);
+  const iconColor = formatCssColor(team?.color ?? car.color, driverColor);
+  const penaltyLabel = penalty ? formatPenaltyBadgeLabel(penalty) : '';
+
+  return {
+    id: car.id,
+    rank: car.rank,
+    name: car.name,
+    selected: car.id === selectedId,
+    dnf,
+    gap: timingGapForCar(car, raceMode, timingGapMode),
+    tire,
+    tireClass: getTireClass(tire),
+    timingCode,
+    icon,
+    driverColor,
+    iconColor,
+    penaltyLabel,
+  };
+}
+
+function timingRowKey(row) {
+  return [
+    row.id,
+    row.rank,
+    row.name,
+    row.selected ? 1 : 0,
+    row.dnf ? 1 : 0,
+    row.gap,
+    row.tire,
+    row.tireClass,
+    row.timingCode,
+    row.icon,
+    row.driverColor,
+    row.iconColor,
+    row.penaltyLabel,
+  ].join('\u001f');
+}
+
+function timingRowsKey(rows) {
+  return rows.map(timingRowKey).join('\u001e');
+}
+
+function renderTimingRowMarkup(row) {
+  const penaltyBadge = row.penaltyLabel
+    ? `<span class="timing-penalty-badge" aria-label="${escapeHtml(row.penaltyLabel)}" title="${escapeHtml(row.penaltyLabel)}">!</span>`
+    : '';
+
+  return `
+        <li>
+          <button class="timing-row ${row.selected ? 'is-selected' : ''} ${row.dnf ? 'is-dnf' : ''}" type="button"
+            data-driver-id="${escapeHtml(row.id)}" aria-label="Select ${escapeHtml(row.name)}"
+            style="--driver-color: ${escapeHtml(row.driverColor)}">
+            <span class="timing-position">${row.rank}</span>
+            <span class="timing-icon timing-team-icon" aria-hidden="true" style="--team-color: ${escapeHtml(row.iconColor)}">${escapeHtml(row.icon)}</span>
+            <span class="timing-name" title="${escapeHtml(row.name)}"><span>${escapeHtml(row.timingCode)}</span>${penaltyBadge}</span>
+            <span class="timing-gap">${escapeHtml(row.gap)}</span>
+            <span class="timing-tire timing-tire--${row.tireClass}">${escapeHtml(row.tire)}</span>
+          </button>
+        </li>
+      `;
+}
+
+function canPatchTimingRows(timingList) {
+  return Boolean(
+    timingList?.ownerDocument?.createElement &&
+    typeof timingList.appendChild === 'function' &&
+    timingList.children,
+  );
+}
+
+function createTimingRowView(document) {
+  const item = document.createElement('li');
+  const button = document.createElement('button');
+  const position = document.createElement('span');
+  const icon = document.createElement('span');
+  const name = document.createElement('span');
+  const code = document.createElement('span');
+  const gap = document.createElement('span');
+  const tire = document.createElement('span');
+
+  item.appendChild(button);
+  button.appendChild(position);
+  button.appendChild(icon);
+  button.appendChild(name);
+  name.appendChild(code);
+  button.appendChild(gap);
+  button.appendChild(tire);
+
+  return {
+    item,
+    button,
+    position,
+    icon,
+    name,
+    code,
+    gap,
+    tire,
+    penaltyBadge: null,
+  };
+}
+
+function setStyleProperty(element, name, value) {
+  if (typeof element.style?.setProperty === 'function') {
+    element.style.setProperty(name, value);
+  } else {
+    element.setAttribute?.('style', `${name}: ${value}`);
+  }
+}
+
+function updateTimingRowView(view, row) {
+  view.button.className = `timing-row ${row.selected ? 'is-selected' : ''} ${row.dnf ? 'is-dnf' : ''}`;
+  view.button.setAttribute('type', 'button');
+  view.button.setAttribute('data-driver-id', row.id);
+  view.button.setAttribute('aria-label', `Select ${row.name}`);
+  setStyleProperty(view.button, '--driver-color', row.driverColor);
+
+  view.position.className = 'timing-position';
+  view.position.textContent = String(row.rank);
+
+  view.icon.className = 'timing-icon timing-team-icon';
+  view.icon.setAttribute('aria-hidden', 'true');
+  setStyleProperty(view.icon, '--team-color', row.iconColor);
+  view.icon.textContent = String(row.icon ?? '');
+
+  view.name.className = 'timing-name';
+  view.name.setAttribute('title', row.name);
+  view.code.textContent = String(row.timingCode ?? '');
+
+  if (row.penaltyLabel) {
+    if (!view.penaltyBadge) {
+      view.penaltyBadge = view.name.ownerDocument.createElement('span');
+      view.name.appendChild(view.penaltyBadge);
+    }
+    view.penaltyBadge.className = 'timing-penalty-badge';
+    view.penaltyBadge.setAttribute('aria-label', row.penaltyLabel);
+    view.penaltyBadge.setAttribute('title', row.penaltyLabel);
+    view.penaltyBadge.textContent = '!';
+  } else if (view.penaltyBadge) {
+    view.penaltyBadge.remove();
+    view.penaltyBadge = null;
+  }
+
+  view.gap.className = 'timing-gap';
+  view.gap.textContent = String(row.gap);
+
+  view.tire.className = `timing-tire timing-tire--${row.tireClass}`;
+  view.tire.textContent = String(row.tire ?? '');
+}
+
+function patchTimingRows(timingList, rows) {
+  const rowViews = timingList.__paddockTimingRowViews ?? new Map();
+  timingList.__paddockTimingRowViews = rowViews;
+  const seen = new Set();
+
+  rows.forEach((row) => {
+    let view = rowViews.get(row.id);
+    if (!view) {
+      view = createTimingRowView(timingList.ownerDocument);
+      rowViews.set(row.id, view);
+    }
+    seen.add(row.id);
+    updateTimingRowView(view, row);
+    timingList.appendChild(view.item);
+  });
+
+  rowViews.forEach((view, id) => {
+    if (seen.has(id)) return;
+    view.item.remove();
+    rowViews.delete(id);
   });
 }
 
@@ -126,52 +327,64 @@ export function renderTimingTower({
 }) {
   if (!timingList) return lastTimingMarkup;
   const penaltyByDriver = timingPenaltyBadgesEnabled ? getPenaltyByDriver(penalties) : new Map();
-  const timingMarkup = cars.map((car) => {
-    const driver = driverById.get(car.id);
-    const dnf = isDnfCar(car);
-    let gap = 'Leader';
-    if (dnf) {
-      gap = 'DNF';
-    } else if (isWavedFlagCar(car) && raceMode !== 'finished') {
-      gap = 'WAVED';
-    } else if (raceMode === 'finished') {
-      gap = car.rank === 1 ? 'Winner' : 'FIN';
-    } else if (raceMode === 'safety-car' && car.rank > 1) {
-      gap = 'SC';
-    } else if (raceMode === 'pre-start') {
-      gap = car.rank === 1 ? 'Pole' : 'Grid';
-    } else if (car.rank > 1) {
-      gap = formatRaceGap(car, timingGapMode);
-    }
-    const tire = car.tire ?? driver?.tire ?? 'M';
-    const timingCode = car.timingCode ?? driver?.timingCode ?? car.code;
-    const team = car.team ?? driver?.team ?? null;
-    const icon = team?.icon ?? car.icon ?? driver?.icon ?? timingCode;
-    const iconColor = team?.color ?? car.color;
-    const penalty = penaltyByDriver.get(car.id);
-    const penaltyBadge = penalty
-      ? `<span class="timing-penalty-badge" aria-label="${escapeHtml(formatPenaltyBadgeLabel(penalty))}" title="${escapeHtml(formatPenaltyBadgeLabel(penalty))}">!</span>`
-      : '';
-
-    return `
-        <li>
-          <button class="timing-row ${car.id === selectedId ? 'is-selected' : ''} ${dnf ? 'is-dnf' : ''}" type="button"
-            data-driver-id="${escapeHtml(car.id)}" aria-label="Select ${escapeHtml(car.name)}"
-            style="--driver-color: ${escapeHtml(car.color)}">
-            <span class="timing-position">${car.rank}</span>
-            <span class="timing-icon timing-team-icon" aria-hidden="true" style="--team-color: ${escapeHtml(iconColor)}">${escapeHtml(icon)}</span>
-            <span class="timing-name" title="${escapeHtml(car.name)}"><span>${escapeHtml(timingCode)}</span>${penaltyBadge}</span>
-            <span class="timing-gap">${escapeHtml(gap)}</span>
-            <span class="timing-tire timing-tire--${getTireClass(tire)}">${escapeHtml(tire)}</span>
-          </button>
-        </li>
-      `;
-  }).join('');
-  if (timingMarkup !== lastTimingMarkup) {
+  const rows = cars.map((car) => timingRowModel({
+    car,
+    driver: driverById.get(car.id),
+    raceMode,
+    selectedId,
+    timingGapMode,
+    penalty: penaltyByDriver.get(car.id),
+  }));
+  if (canPatchTimingRows(timingList)) {
+    patchTimingRows(timingList, rows);
+    return timingRowsKey(rows);
+  }
+
+  const timingMarkup = rows.map(renderTimingRowMarkup).join('');
+  if (timingMarkup !== lastTimingMarkup || timingList.innerHTML !== timingMarkup) {
     timingList.innerHTML = timingMarkup;
     return timingMarkup;
   }
   return lastTimingMarkup;
 }
 
+export function renderTimingTowers({
+  timingLists,
+  timingList,
+  cars,
+  raceMode,
+  penalties = [],
+  driverById,
+  selectedId,
+  timingGapMode,
+  timingPenaltyBadgesEnabled,
+  lastTimingMarkup,
+}) {
+  const candidateLists = typeof timingLists?.forEach === 'function'
+    ? [...timingLists]
+    : [];
+  const lists = candidateLists.length > 0
+    ? candidateLists
+    : timingList
+      ? [timingList]
+      : [];
+  if (lists.length === 0) return lastTimingMarkup;
+
+  let nextTimingMarkup = lastTimingMarkup;
+  lists.forEach((list) => {
+    nextTimingMarkup = renderTimingTower({
+      timingList: list,
+      cars,
+      raceMode,
+      penalties,
+      driverById,
+      selectedId,
+      timingGapMode,
+      timingPenaltyBadgesEnabled,
+      lastTimingMarkup: nextTimingMarkup,
+    });
+  });
+  return nextTimingMarkup;
+}
+
 export { formatLapGap, formatRaceGap };

package/src/app/runtime/frameLoop.js

@@ -48,7 +48,11 @@ export function runFrameLoopTick(app) {
   const shouldUpdateDom = now - app.lastDomUpdateTime >= domUpdateIntervalForSpeed(app.simulationSpeed);
   const fullSnapshot = stepEvents.length > 0 || shouldUpdateDom ? app.sim.snapshot() : null;
   if (stepEvents.length > 0) app.emitRaceEvents(stepEvents, fullSnapshot);
-  const renderSource = fullSnapshot ?? app.sim.snapshotRender?.() ?? app.sim.snapshot();
+  const renderSource = fullSnapshot ??
+    app.sim.snapshotRenderInto?.(app.renderSourceSnapshotBuffer ?? {}) ??
+    app.sim.snapshotRender?.() ??
+    app.sim.snapshot();
+  if (!fullSnapshot && app.sim.snapshotRenderInto) app.renderSourceSnapshotBuffer = renderSource;
   const renderSnapshot = interpolateRenderSnapshotInto(
     app.renderSnapshotBuffer ?? {},
     renderSource,

package/src/app/runtime/runtimeVisibility.js

@@ -1,11 +1,31 @@
 export function observeRuntimeVisibility(app) {
   if (!app.canvasHost) return;
 
+  const syncViewportVisibility = () => {
+    app.runtimeViewportVisible = isRuntimeViewportVisible(app.canvasHost);
+    app.syncRuntimeTicker();
+  };
+  const scheduleViewportVisibilitySync = () => {
+    if (app.runtimeVisibilitySyncFrame) return;
+    if (typeof globalThis.requestAnimationFrame !== 'function') {
+      syncViewportVisibility();
+      return;
+    }
+    app.runtimeVisibilitySyncFrame = globalThis.requestAnimationFrame(() => {
+      app.runtimeVisibilitySyncFrame = null;
+      syncViewportVisibility();
+    });
+  };
+
   if (typeof IntersectionObserver === 'function') {
     app.visibilityObserver?.disconnect?.();
     app.visibilityObserver = new IntersectionObserver((entries) => {
       const entry = entries.find((item) => item.target === app.canvasHost) ?? entries[0];
-      app.runtimeViewportVisible = Boolean(entry?.isIntersecting || entry?.intersectionRatio > 0);
+      app.runtimeViewportVisible = Boolean(
+        entry?.isIntersecting ||
+        entry?.intersectionRatio > 0 ||
+        isRuntimeViewportVisible(app.canvasHost),
+      );
       app.syncRuntimeTicker();
     }, {
       root: null,
@@ -25,21 +45,62 @@ export function observeRuntimeVisibility(app) {
     });
   }
 
+  syncViewportVisibility();
+  globalThis.addEventListener?.('scroll', scheduleViewportVisibilitySync, {
+    passive: true,
+    signal: app.abortController.signal,
+  });
+  globalThis.addEventListener?.('resize', scheduleViewportVisibilitySync, {
+    passive: true,
+    signal: app.abortController.signal,
+  });
+  globalThis.addEventListener?.('focus', syncViewportVisibility, {
+    signal: app.abortController.signal,
+  });
+  globalThis.addEventListener?.('pageshow', syncViewportVisibility, {
+    signal: app.abortController.signal,
+  });
   app.syncRuntimeTicker();
 }
 
 export function syncRuntimeTicker(app) {
   if (app.expertMode) return;
-  if (!app.app?.ticker) return;
+  const ticker = app.app?.ticker;
+  if (!ticker) return;
 
   const shouldRun = app.runtimeViewportVisible && app.runtimeDocumentVisible;
-  if (shouldRun === app.runtimeTickerRunning) return;
+  const tickerRunning = typeof ticker.started === 'boolean'
+    ? ticker.started
+    : app.runtimeTickerRunning;
+  if (shouldRun === app.runtimeTickerRunning && shouldRun === tickerRunning) return;
 
   app.runtimeTickerRunning = shouldRun;
   if (shouldRun) {
     app.resetFrameClock();
-    app.app.ticker.start?.();
+    ticker.start?.();
   } else {
-    app.app.ticker.stop?.();
+    ticker.stop?.();
   }
 }
+
+function isRuntimeViewportVisible(element) {
+  const rect = element?.getBoundingClientRect?.();
+  if (!rect) return true;
+
+  const top = Number(rect.top);
+  const bottom = Number(rect.bottom);
+  const left = Number(rect.left);
+  const right = Number(rect.right);
+  const width = Number(rect.width ?? right - left);
+  const height = Number(rect.height ?? bottom - top);
+  if (![top, bottom, left, right, width, height].every(Number.isFinite)) return true;
+  if (width <= 0 || height <= 0) return false;
+
+  const viewportHeight = globalThis.innerHeight || globalThis.document?.documentElement?.clientHeight || 0;
+  const viewportWidth = globalThis.innerWidth || globalThis.document?.documentElement?.clientWidth || 0;
+  const margin = 240;
+  return bottom >= -margin &&
+    top <= viewportHeight + margin &&
+    right >= -margin &&
+    left <= viewportWidth + margin;
+}

package/src/config/cssValues.js

@@ -0,0 +1,16 @@
+import { normalizeCssColorToken } from './themeOptions.js';
+
+export const DEFAULT_SAFE_DRIVER_COLOR = '#e10600';
+
+export function formatCssColor(value, fallback = DEFAULT_SAFE_DRIVER_COLOR) {
+  return normalizeCssColorToken(value, fallback);
+}
+
+export function formatCssUrl(value) {
+  const raw = String(value ?? '');
+  const escaped = raw
+    .replaceAll('\\', '\\\\')
+    .replaceAll('"', '\\"')
+    .replace(/[\u0000-\u001F\u007F]/g, '');
+  return `url("${escaped}")`;
+}

package/src/config/defaultOptions.js

@@ -3,11 +3,18 @@ import { CHAMPIONSHIP_ENTRY_BLUEPRINTS } from '../data/championship.js';
 import { normalizeSimulatorDrivers } from '../data/normalizeDrivers.js';
 import { normalizePhysicsMode } from '../simulation/vehicle/vehiclePhysics.js';
 import { normalizeWarmupOptions } from '../simulation/warmup/runtimeWarmup.js';
+import {
+  DEFAULT_PADDOCK_THEME_INPUT,
+  applyPaddockThemeCssVariables,
+  mergeThemeInputs,
+  normalizePaddockTheme,
+} from './themeOptions.js';
+import { normalizeTimingGapMode } from './timingGapMode.js';
+import { normalizePublicUrlOption } from './urlOptions.js';
 
 export const DEFAULT_F1_SIMULATOR_OPTIONS = {
   seed: 1971,
   physicsMode: 'arcade',
-  trackQueryIndex: true,
   warmup: {
     enabled: true,
     policy: 'config-change',
@@ -34,23 +41,22 @@ export const DEFAULT_F1_SIMULATOR_OPTIONS = {
     },
     showRaceDataPanel: true,
     raceDataTelemetryDetail: false,
+    driverCamera: false,
     raceDataBanners: {
       initial: 'project',
       enabled: ['project', 'radio'],
     },
     raceDataBannerSize: 'custom',
     timingTowerVerticalFit: 'expand-race-view',
+    timingGapMode: 'interval',
+    timingGapModeToggle: true,
+    timingEntryVerticalPadding: 5,
+    responsiveNarrowLayout: true,
   },
   debug: {
     physicsModeIndicator: false,
   },
-  theme: {
-    accentColor: '#e10600',
-    greenColor: '#14c784',
-    yellowColor: '#ffd166',
-    timingTowerMaxWidth: '390px',
-    raceViewMinHeight: '620px',
-  },
+  theme: DEFAULT_PADDOCK_THEME_INPUT,
 };
 
 export const PADDOCK_SIMULATOR_PRESETS = {
@@ -113,15 +119,21 @@ export const PADDOCK_SIMULATOR_PRESETS = {
   },
 };
 
-export const PADDOCK_THEME_CSS_VARIABLES = {
-  accentColor: '--paddock-accent-color',
-  greenColor: '--paddock-green-color',
-  yellowColor: '--paddock-yellow-color',
-  timingTowerMaxWidth: '--paddock-timing-tower-max-width',
-  raceViewMinHeight: '--paddock-race-view-min-height',
-};
+export {
+  DEFAULT_PADDOCK_THEME,
+  PADDOCK_THEME_CSS_VARIABLES,
+  PADDOCK_THEME_TOKEN_KEYS,
+  applyPaddockTheme,
+  applyPaddockThemeCssVariables,
+  resolvePaddockTheme,
+} from './themeOptions.js';
 
-const SUPPORTED_CAMERA_MODES = new Set(['overview', 'leader', 'selected', 'show-all', 'pit']);
+const SUPPORTED_CAMERA_MODES = new Set(['overview', 'leader', 'selected', 'driver', 'show-all', 'pit']);
+
+function normalizeNonNegativeFiniteNumber(value, fallback) {
+  const numericValue = Number(value);
+  return Number.isFinite(numericValue) && numericValue >= 0 ? numericValue : fallback;
+}
 
 export function resolveF1SimulatorOptions(options = {}) {
   const presetName = Object.hasOwn(PADDOCK_SIMULATOR_PRESETS, options.preset)
@@ -130,6 +142,9 @@ export function resolveF1SimulatorOptions(options = {}) {
   const preset = presetName ? PADDOCK_SIMULATOR_PRESETS[presetName] : {};
   const requestedUi = options.ui ?? {};
   const presetUi = preset.ui ?? {};
+  const initialCameraMode = SUPPORTED_CAMERA_MODES.has(options.initialCameraMode)
+    ? options.initialCameraMode
+    : DEFAULT_F1_SIMULATOR_OPTIONS.initialCameraMode;
   const ui = {
     ...DEFAULT_F1_SIMULATOR_OPTIONS.ui,
     ...presetUi,
@@ -140,6 +155,7 @@ export function resolveF1SimulatorOptions(options = {}) {
       ...(requestedUi.raceDataBanners ?? {}),
     },
   };
+  ui.driverCamera = Boolean(ui.driverCamera || initialCameraMode === 'driver');
   ui.raceDataBanners.enabled = normalizeEnabledBanners(ui.raceDataBanners.enabled);
   ui.telemetryModules = normalizeTelemetryModules(ui.telemetryModules);
   if (!['project', 'radio', 'hidden'].includes(ui.raceDataBanners.initial)) {
@@ -151,6 +167,13 @@ export function resolveF1SimulatorOptions(options = {}) {
   if (!['expand-race-view', 'scroll'].includes(ui.timingTowerVerticalFit)) {
     ui.timingTowerVerticalFit = DEFAULT_F1_SIMULATOR_OPTIONS.ui.timingTowerVerticalFit;
   }
+  ui.timingGapMode = normalizeTimingGapMode(ui.timingGapMode);
+  ui.timingGapModeToggle = ui.timingGapModeToggle !== false;
+  ui.timingEntryVerticalPadding = normalizeNonNegativeFiniteNumber(
+    ui.timingEntryVerticalPadding,
+    DEFAULT_F1_SIMULATOR_OPTIONS.ui.timingEntryVerticalPadding,
+  );
+  ui.responsiveNarrowLayout = ui.responsiveNarrowLayout !== false;
   if (!['auto', 'custom'].includes(ui.raceDataBannerSize)) {
     ui.raceDataBannerSize = DEFAULT_F1_SIMULATOR_OPTIONS.ui.raceDataBannerSize;
   }
@@ -161,28 +184,30 @@ export function resolveF1SimulatorOptions(options = {}) {
     ...(options.debug ?? {}),
   };
   debug.physicsModeIndicator = Boolean(debug.physicsModeIndicator);
-  const initialCameraMode = SUPPORTED_CAMERA_MODES.has(options.initialCameraMode)
-    ? options.initialCameraMode
-    : DEFAULT_F1_SIMULATOR_OPTIONS.initialCameraMode;
   const mergedOptions = {
     ...DEFAULT_F1_SIMULATOR_OPTIONS,
     ...preset,
     ...options,
   };
-  const theme = normalizeTheme({
-    ...DEFAULT_F1_SIMULATOR_OPTIONS.theme,
-    ...(preset.theme ?? {}),
-    ...(options.theme ?? {}),
-  });
   const drivers = normalizeSimulatorDrivers(mergedOptions.drivers, {
     entries: mergedOptions.entries ?? CHAMPIONSHIP_ENTRY_BLUEPRINTS,
   });
+  const theme = normalizePaddockTheme(mergeThemeInputs(
+    DEFAULT_F1_SIMULATOR_OPTIONS.theme,
+    preset.theme,
+    collectDriverTeamThemes(drivers),
+    options.theme,
+  ));
 
   return {
     ...DEFAULT_F1_SIMULATOR_OPTIONS,
     ...preset,
     ...options,
     preset: presetName ?? options.preset,
+    backLinkHref: normalizePublicUrlOption(
+      mergedOptions.backLinkHref,
+      DEFAULT_F1_SIMULATOR_OPTIONS.backLinkHref,
+    ),
     physicsMode: normalizePhysicsMode(options.physicsMode ?? preset.physicsMode),
     warmup: normalizeWarmupOptions(mergedOptions.warmup, 'browser'),
     initialCameraMode,
@@ -194,12 +219,16 @@ export function resolveF1SimulatorOptions(options = {}) {
   };
 }
 
-export function applyPaddockThemeCssVariables(root, theme = DEFAULT_F1_SIMULATOR_OPTIONS.theme) {
-  Object.entries(PADDOCK_THEME_CSS_VARIABLES).forEach(([key, variable]) => {
-    const value = theme?.[key];
-    if (value == null || value === '') return;
-    root?.style?.setProperty?.(variable, String(value));
+function collectDriverTeamThemes(drivers = []) {
+  const teamThemes = {};
+  drivers.forEach((driver) => {
+    const teamId = driver?.team?.id;
+    const theme = driver?.team?.theme;
+    if (typeof teamId === 'string' && teamId !== '' && typeof theme === 'string' && theme !== '') {
+      teamThemes[teamId] = theme;
+    }
   });
+  return Object.keys(teamThemes).length > 0 ? { teamThemes } : {};
 }
 
 function normalizeEnabledBanners(value) {
@@ -226,12 +255,3 @@ function normalizeTelemetryModules(value) {
     value[name] == null ? defaults[name] : Boolean(value[name]),
   ]));
 }
-
-function normalizeTheme(theme) {
-  return Object.fromEntries(
-    Object.entries(DEFAULT_F1_SIMULATOR_OPTIONS.theme).map(([key, fallback]) => [
-      key,
-      theme?.[key] == null || theme?.[key] === '' ? fallback : theme[key],
-    ]),
-  );
-}