@inventure71/paddockjs 2.0.1 → 4.0.0

package/src/ui/bannerTemplates.js

@@ -1,4 +1,7 @@
-import { createLoadingMarkup } from './templateUtils.js';
+import {
+  createComponentSurfaceMarkup,
+  createTelemetrySectorBarsMarkup,
+} from './templateUtils.js';
 
 export function createStewardMessageMarkup() {
   return `
@@ -10,13 +13,13 @@ export function createStewardMessageMarkup() {
   `;
 }
 
-export function createRaceDataPanelMarkup({ ui = {} } = {}) {
+export function createRaceDataPanelMarkup({ ui = {}, standalone = false } = {}) {
   const sizeMode = ui.raceDataBannerSize === 'auto' ? 'auto' : 'custom';
   const telemetryDetail = Boolean(ui.raceDataTelemetryDetail);
   const classNames = ['race-data-panel', `race-data-panel--${sizeMode}`];
+  if (standalone) classNames.push('race-data-panel--standalone');
   if (telemetryDetail) classNames.push('race-data-panel--with-telemetry');
-  return `
-    <div class="${classNames.join(' ')}" data-paddock-component="race-data-panel" data-race-data-panel aria-live="polite">
+  const body = `
       <button class="race-data-dismiss" type="button" data-race-data-dismiss aria-label="Close race data pill">x</button>
       <div class="race-data-copy">
         <span class="race-data-kicker" data-race-data-kicker>Project</span>
@@ -26,44 +29,51 @@ export function createRaceDataPanelMarkup({ ui = {} } = {}) {
       ${telemetryDetail ? createRaceDataTelemetryMarkup() : ''}
       <strong class="race-data-number" data-race-data-number>--</strong>
       <button class="race-data-link" type="button" data-race-data-open>Open project</button>
-      ${createLoadingMarkup('Race data')}
-    </div>
   `;
+
+  return createComponentSurfaceMarkup({
+    tagName: 'div',
+    className: classNames.join(' '),
+    componentName: 'race-data-panel',
+    ariaLabel: 'Race data panel',
+    attributes: 'data-race-data-panel aria-live="polite"',
+    body,
+    unsupportedLabel: 'Race data panel',
+    loadingLabel: 'Race data',
+  });
 }
 
 function createRaceDataTelemetryMarkup() {
   return `
-      <div class="race-data-telemetry" data-race-data-telemetry aria-label="Project sector telemetry">
-        <span class="race-data-telemetry__label">Sectors</span>
-        <div class="race-data-telemetry__bars">
-          ${[1, 2, 3].map((sector) => `
-          <div class="telemetry-sector-bar race-data-sector-bar" data-telemetry-sector-bar="${sector}" style="--sector-fill: 0%">
-            <span>S${sector}</span>
-            <strong data-telemetry-sector-time="${sector}">--</strong>
-          </div>
-          `).join('')}
-        </div>
+      <div class="race-data-telemetry" data-race-data-telemetry aria-label="Project telemetry">
+        ${createTelemetrySectorBarsMarkup({
+          wrapperClassName: 'race-data-telemetry__bars',
+          barClassName: 'telemetry-sector-bar race-data-sector-bar',
+        })}
       </div>
   `;
 }
 
 export function createTelemetrySectorBannerMarkup() {
-  return `
-      <section class="telemetry-sector-banner" data-paddock-component="telemetry-sector-banner" data-telemetry-sector-banner aria-label="Broadcast sector telemetry">
+  const body = `
         <div class="telemetry-sector-banner__copy">
           <span><b data-selected-code>--</b> sector telemetry</span>
           <strong data-selected-name>Select driver</strong>
           <em data-telemetry-current-sector>S1</em>
         </div>
-        <div class="telemetry-sector-banner__bars">
-          ${[1, 2, 3].map((sector) => `
-          <div class="telemetry-sector-bar" data-telemetry-sector-bar="${sector}" style="--sector-fill: 0%">
-            <span>S${sector}</span>
-            <strong data-telemetry-sector-time="${sector}">--</strong>
-          </div>
-          `).join('')}
-        </div>
-        ${createLoadingMarkup('Sector banner')}
-      </section>
+        ${createTelemetrySectorBarsMarkup({
+          wrapperClassName: 'telemetry-sector-banner__bars',
+        })}
   `;
+
+  return createComponentSurfaceMarkup({
+    tagName: 'section',
+    className: 'telemetry-sector-banner',
+    componentName: 'telemetry-sector-banner',
+    ariaLabel: 'Broadcast sector telemetry',
+    attributes: 'data-telemetry-sector-banner',
+    body,
+    unsupportedLabel: 'Sector banner',
+    loadingLabel: 'Sector banner',
+  });
 }

package/src/ui/cameraControlsTemplate.js

@@ -1,20 +1,31 @@
-import { createLoadingMarkup } from './templateUtils.js';
+import { createComponentSurfaceMarkup } from './templateUtils.js';
 
 export function createCameraControlsMarkup({ embedded = false, showSimulationSpeed = false, ui = {} } = {}) {
   const className = embedded ? 'camera-controls' : 'camera-controls camera-controls--external';
   const showSpeedControl = showSimulationSpeed || ui.simulationSpeedControl === true;
-  return `
-      <div class="${className}" data-paddock-component="camera-controls" aria-label="Camera controls">
+  const driverCameraControl = ui.driverCamera === true
+    ? '<button type="button" data-camera-mode="driver" aria-pressed="false">Driver</button>'
+    : '';
+  const body = `
         <button type="button" data-camera-mode="overview" aria-pressed="false">Overview</button>
         <button type="button" data-camera-mode="leader" aria-pressed="true">Leader</button>
         <button type="button" data-camera-mode="selected" aria-pressed="false">Selected</button>
+        ${driverCameraControl}
         <button type="button" data-camera-mode="show-all" aria-pressed="false">Show all</button>
         <button type="button" data-camera-mode="pit" aria-pressed="false">Pits</button>
         <button type="button" data-zoom-out aria-label="Zoom out">-</button>
         <button type="button" data-zoom-in aria-label="Zoom in">+</button>
         ${showSpeedControl ? '<button type="button" data-simulation-speed aria-label="Simulation speed">1x</button>' : ''}
         <button type="button" data-race-data-banners-muted aria-pressed="false">Mute banners</button>
-        ${createLoadingMarkup('Camera controls')}
-      </div>
   `;
+
+  return createComponentSurfaceMarkup({
+    tagName: 'div',
+    className,
+    componentName: 'camera-controls',
+    ariaLabel: 'Camera controls',
+    body,
+    unsupportedLabel: 'Camera controls',
+    loadingLabel: 'Camera controls',
+  });
 }

package/src/ui/carOverviewTemplate.js

@@ -1,4 +1,4 @@
-import { createLoadingMarkup, escapeHtml } from './templateUtils.js';
+import { createComponentSurfaceMarkup, escapeHtml } from './templateUtils.js';
 
 export function createCarDriverOverviewMarkup({ assets }) {
   const cells = Array.from({ length: 7 }, (_, index) => `
@@ -8,8 +8,7 @@ export function createCarDriverOverviewMarkup({ assets }) {
           </div>
   `).join('');
 
-  return `
-      <section class="car-overview" data-paddock-component="car-driver-overview" aria-label="Selected car and driver overview">
+  const body = `
         <div class="car-overview-header">
           <span data-car-overview-title>Car overview</span>
           <strong data-car-overview-code>---</strong>
@@ -27,7 +26,15 @@ export function createCarDriverOverviewMarkup({ assets }) {
             <span class="car-overview-core-stat" data-car-overview-core-stat>Car</span>
           </div>
         </div>
-        ${createLoadingMarkup('Car and driver overview')}
-      </section>
   `;
+
+  return createComponentSurfaceMarkup({
+    tagName: 'section',
+    className: 'car-overview',
+    componentName: 'car-driver-overview',
+    ariaLabel: 'Selected car and driver overview',
+    body,
+    unsupportedLabel: 'Car and driver overview',
+    loadingLabel: 'Car and driver overview',
+  });
 }

package/src/ui/raceCanvasTemplate.js

@@ -5,7 +5,14 @@ import {
 } from './bannerTemplates.js';
 import { createCameraControlsMarkup } from './cameraControlsTemplate.js';
 import { createTimingTowerMarkup } from './timingTowerTemplate.js';
-import { createLoadingMarkup } from './templateUtils.js';
+import { createComponentSurfaceMarkup } from './templateUtils.js';
+
+let timingPanelIdSequence = 0;
+
+function createTimingPanelId() {
+  timingPanelIdSequence += 1;
+  return `paddock-timing-panel-${timingPanelIdSequence}`;
+}
 
 export function createRaceCanvasMarkup({
   includeRaceDataPanel = false,
@@ -17,27 +24,35 @@ export function createRaceCanvasMarkup({
   physicsMode = 'arcade',
   ui = {},
   debug = {},
+  responsiveNarrowLayout,
 } = {}) {
   const showFps = ui.showFps !== false;
   const showEmbeddedCameraControls = ui.cameraControls === 'embedded';
+  const enableResponsiveNarrowLayout = responsiveNarrowLayout ?? ui.responsiveNarrowLayout ?? true;
   const timingFit = (timingTowerVerticalFit ?? ui.timingTowerVerticalFit) === 'scroll'
     ? 'scroll'
     : 'expand-race-view';
   const classNames = ['sim-canvas-panel'];
   if (includeTimingTower) {
     classNames.push('sim-canvas-panel--with-timing-tower', `sim-canvas-panel--timing-${timingFit}`);
+    if (enableResponsiveNarrowLayout) classNames.push('sim-canvas-panel--responsive-narrow');
   }
+  const timingPanelId = includeTimingTower ? createTimingPanelId() : '';
   const showPhysicsModeIndicator = debug.physicsModeIndicator === true;
-  const physicsModeLabel = physicsMode === 'simulator' ? 'Simulator physics mode' : 'Arcade physics mode';
-  const physicsModeClass = physicsMode === 'simulator' ? 'simulator' : 'arcade';
+  const physicsModeLabel = physicsMode === 'advanced' ? 'Advanced physics mode' : 'Arcade physics mode';
+  const physicsModeClass = physicsMode === 'advanced' ? 'advanced' : 'arcade';
 
-  return `
-    <section class="${classNames.join(' ')}" data-paddock-component="race-canvas" aria-label="Track view">
+  const body = `
       <div class="track-canvas" data-track-canvas></div>
       ${showPhysicsModeIndicator ? `
       <div class="physics-mode-indicator physics-mode-indicator--${physicsModeClass}" data-physics-mode-indicator aria-label="${physicsModeLabel}" title="${physicsModeLabel}"></div>
       ` : ''}
-      ${includeTimingTower ? createTimingTowerMarkup({ totalLaps, assets }) : ''}
+      ${includeTimingTower ? `
+      <button class="timing-panel-toggle" type="button" data-timing-panel-toggle aria-expanded="false" aria-controls="${timingPanelId}">
+        Timing
+      </button>
+      ${createTimingTowerMarkup({ totalLaps, assets, id: timingPanelId, ui })}
+      ` : ''}
       ${showFps ? `
       <div class="fps-counter" aria-label="Frames per second">
         <span>FPS</span>
@@ -63,7 +78,15 @@ export function createRaceCanvasMarkup({
         <strong data-race-finish-winner>--</strong>
         <ol data-race-finish-classification></ol>
       </div>
-      ${createLoadingMarkup('Race view')}
-    </section>
   `;
+
+  return createComponentSurfaceMarkup({
+    tagName: 'section',
+    className: classNames.join(' '),
+    componentName: 'race-canvas',
+    ariaLabel: 'Track view',
+    body,
+    unsupportedLabel: 'Race view',
+    loadingLabel: 'Race view',
+  });
 }

package/src/ui/raceControlsTemplate.js

@@ -1,4 +1,4 @@
-import { createLoadingMarkup, escapeHtml } from './templateUtils.js';
+import { createComponentSurfaceMarkup, escapeHtml } from './templateUtils.js';
 
 function buttonHiddenAttribute(isVisible) {
   return isVisible ? '' : ' hidden';
@@ -11,8 +11,7 @@ export function createRaceControlsMarkup({
   backLinkLabel,
   showBackLink,
 }) {
-  return `
-    <header class="sim-topbar" data-paddock-component="race-controls">
+  const body = `
       <a class="sim-backlink" href="${escapeHtml(backLinkHref)}"${buttonHiddenAttribute(showBackLink)}>${escapeHtml(backLinkLabel)}</a>
       <div class="sim-title-block">
         <p class="sim-kicker">${escapeHtml(kicker)}</p>
@@ -22,15 +21,33 @@ export function createRaceControlsMarkup({
         ${createSafetyCarControlMarkup({ compact: true })}
         <button class="sim-control" type="button" data-restart-race>Restart</button>
       </div>
-      ${createLoadingMarkup('Race controls')}
-    </header>
   `;
+
+  return createComponentSurfaceMarkup({
+    tagName: 'header',
+    className: 'sim-topbar',
+    componentName: 'race-controls',
+    ariaLabel: 'Race controls',
+    body,
+    unsupportedLabel: 'Race controls',
+    loadingLabel: 'Race controls',
+  });
 }
 
 export function createSafetyCarControlMarkup({ compact = false } = {}) {
-  const className = compact
-    ? 'sim-control sim-control--safety'
-    : 'sim-control sim-control--safety standalone-control';
-  const componentAttribute = compact ? '' : ' data-paddock-component="safety-car-control"';
-  return `<button class="${className}" type="button" data-safety-car aria-pressed="false"${componentAttribute}>Safety Car</button>`;
+  if (compact) {
+    return '<button class="sim-control sim-control--safety" type="button" data-safety-car aria-pressed="false">Safety Car</button>';
+  }
+  const body = `
+      <button class="sim-control sim-control--safety" type="button" data-safety-car aria-pressed="false">Safety Car</button>
+  `;
+
+  return createComponentSurfaceMarkup({
+    tagName: 'div',
+    className: 'standalone-control',
+    componentName: 'safety-car-control',
+    ariaLabel: 'Safety car control',
+    body,
+    unsupportedLabel: 'Safety car control',
+  });
 }

package/src/ui/shellTemplate.js

@@ -5,6 +5,7 @@ import {
   createTelemetryPanelMarkup,
   createTimingTowerMarkup,
 } from './componentTemplates.js';
+import { createUnsupportedSizeMarkup } from './templateUtils.js';
 
 export function createF1SimulatorShell({
   title,
@@ -34,11 +35,12 @@ export function createF1SimulatorShell({
         ${createRaceControlsMarkup({ title, kicker, backLinkHref, backLinkLabel, showBackLink })}
         ${cameraControls}
         <div class="sim-grid">
-          ${createTimingTowerMarkup({ totalLaps, assets })}
+          ${createTimingTowerMarkup({ totalLaps, assets, ui })}
 	          ${createRaceCanvasMarkup({ includeRaceDataPanel: ui.showRaceDataPanel !== false, assets, totalLaps, physicsMode, ui })}
           ${createTelemetryPanelMarkup({ assets, ui })}
         </div>
       </section>
+      ${createUnsupportedSizeMarkup('F1 simulator')}
     </main>
   `;
 }

package/src/ui/telemetryDrawerTemplate.js

@@ -2,6 +2,7 @@ import { createCameraControlsMarkup } from './cameraControlsTemplate.js';
 import { createRaceCanvasMarkup } from './raceCanvasTemplate.js';
 import { createSafetyCarControlMarkup } from './raceControlsTemplate.js';
 import { createTelemetryPanelMarkup } from './telemetryTemplates.js';
+import { createComponentSurfaceMarkup } from './templateUtils.js';
 
 let telemetryDrawerIdSequence = 0;
 
@@ -14,8 +15,11 @@ export function createRaceTelemetryDrawerMarkup(options, {
   timingTowerVerticalFit,
   drawerInitiallyOpen = false,
   raceDataTelemetryDetail = options.ui?.raceDataTelemetryDetail,
+  responsiveNarrowLayout,
 } = {}) {
   const openClass = drawerInitiallyOpen ? ' is-telemetry-open' : '';
+  const enableResponsiveNarrowLayout = responsiveNarrowLayout ?? options.ui?.responsiveNarrowLayout ?? true;
+  const responsiveClass = enableResponsiveNarrowLayout ? ' race-telemetry-drawer--responsive-narrow' : '';
   const drawerId = createTelemetryDrawerId();
   const drawerOptions = {
     ...options,
@@ -23,17 +27,17 @@ export function createRaceTelemetryDrawerMarkup(options, {
       ...(options.ui ?? {}),
       cameraControls: false,
       raceDataTelemetryDetail: Boolean(raceDataTelemetryDetail),
+      responsiveNarrowLayout: enableResponsiveNarrowLayout,
     },
   };
   const showCameraControls = options.ui?.cameraControls !== false;
-  return `
-    <section class="race-telemetry-drawer${openClass}" data-paddock-component="race-telemetry-drawer" data-race-telemetry-drawer aria-label="Race view with telemetry drawer">
+  const body = `
       <div class="race-telemetry-drawer__toolbar" aria-label="Race workbench controls">
         ${showCameraControls ? createCameraControlsMarkup({ showSimulationSpeed: true, ui: options.ui }) : ''}
         <div class="race-telemetry-drawer__controls">
           ${createSafetyCarControlMarkup({ compact: true })}
-          <button class="telemetry-drawer-toggle" type="button" data-telemetry-drawer-toggle aria-expanded="${drawerInitiallyOpen ? 'true' : 'false'}" aria-controls="${drawerId}">
-            ${drawerInitiallyOpen ? 'Close telemetry' : 'Telemetry'}
+          <button class="telemetry-drawer-toggle" type="button" data-telemetry-drawer-toggle aria-expanded="${drawerInitiallyOpen ? 'true' : 'false'}" aria-controls="${drawerId}" aria-label="${drawerInitiallyOpen ? 'Close telemetry' : 'Open telemetry'}">
+            ${drawerInitiallyOpen ? 'Close' : 'Telemetry'}
           </button>
         </div>
       </div>
@@ -44,12 +48,21 @@ export function createRaceTelemetryDrawerMarkup(options, {
           includeTimingTower: true,
           timingTowerVerticalFit,
         })}
+        <aside id="${drawerId}" class="telemetry-drawer" data-telemetry-drawer aria-label="Telemetry drawer" aria-hidden="${drawerInitiallyOpen ? 'false' : 'true'}"${drawerInitiallyOpen ? '' : ' inert'}>
+          <div class="telemetry-drawer__content">
+            ${createTelemetryPanelMarkup(options, { includeOverview: false })}
+          </div>
+        </aside>
       </div>
-      <aside id="${drawerId}" class="telemetry-drawer" data-telemetry-drawer aria-label="Telemetry drawer" aria-hidden="${drawerInitiallyOpen ? 'false' : 'true'}"${drawerInitiallyOpen ? '' : ' inert'}>
-        <div class="telemetry-drawer__content">
-          ${createTelemetryPanelMarkup(options, { includeOverview: false })}
-        </div>
-      </aside>
-    </section>
   `;
+
+  return createComponentSurfaceMarkup({
+    tagName: 'section',
+    className: `race-telemetry-drawer${responsiveClass}${openClass}`,
+    componentName: 'race-telemetry-drawer',
+    ariaLabel: 'Race view with telemetry drawer',
+    attributes: 'data-race-telemetry-drawer',
+    body,
+    unsupportedLabel: 'Race telemetry drawer',
+  });
 }

package/src/ui/telemetryTemplates.js

@@ -1,5 +1,8 @@
 import { createCarDriverOverviewMarkup } from './carOverviewTemplate.js';
-import { createLoadingMarkup } from './templateUtils.js';
+import {
+  createComponentSurfaceMarkup,
+  createTelemetrySectorBarsMarkup,
+} from './templateUtils.js';
 
 function getTelemetryModules(ui = {}) {
   const defaults = {
@@ -26,8 +29,14 @@ function getTelemetryModuleClass(componentName) {
 }
 
 export function createTelemetryCoreMarkup() {
-  return `
-    <section class="${getTelemetryModuleClass('core')}" data-paddock-component="telemetry-core" aria-label="Selected car core telemetry">
+  return createComponentSurfaceMarkup({
+    tagName: 'section',
+    className: getTelemetryModuleClass('core'),
+    componentName: 'telemetry-core',
+    ariaLabel: 'Selected car core telemetry',
+    unsupportedLabel: 'Core telemetry',
+    loadingLabel: 'Core telemetry',
+    body: `
       <div class="telemetry-header">
         <span data-selected-code>---</span>
         <strong data-selected-name>Select car</strong>
@@ -46,34 +55,40 @@ export function createTelemetryCoreMarkup() {
         <div><dt>Interval</dt><dd data-telemetry-gap>--</dd></div>
         <div><dt>Leader</dt><dd data-telemetry-leader-gap>--</dd></div>
       </dl>
-      ${createLoadingMarkup('Core telemetry')}
-    </section>
-  `;
+    `,
+  });
 }
 
 export function createTelemetrySectorsMarkup() {
-  return `
-      <section class="${getTelemetryModuleClass('sectors')} telemetry-sector-strip" data-paddock-component="telemetry-sectors" data-telemetry-sector-strip aria-label="Sector progress">
+  return createComponentSurfaceMarkup({
+    tagName: 'section',
+    className: `${getTelemetryModuleClass('sectors')} telemetry-sector-strip`,
+    componentName: 'telemetry-sectors',
+    ariaLabel: 'Sector progress',
+    attributes: 'data-telemetry-sector-strip',
+    unsupportedLabel: 'Sector telemetry',
+    loadingLabel: 'Sector telemetry',
+    body: `
         <div class="telemetry-module-header">
           <span>Sector map</span>
           <strong data-telemetry-current-sector>S1</strong>
         </div>
-        <div class="telemetry-sector-bars">
-          ${[1, 2, 3].map((sector) => `
-          <div class="telemetry-sector-bar" data-telemetry-sector-bar="${sector}" style="--sector-fill: 0%">
-            <span>S${sector}</span>
-            <strong data-telemetry-sector-time="${sector}">--</strong>
-          </div>
-          `).join('')}
-        </div>
-        ${createLoadingMarkup('Sector telemetry')}
-      </section>
-  `;
+        ${createTelemetrySectorBarsMarkup({
+          wrapperClassName: 'telemetry-sector-bars',
+        })}
+    `,
+  });
 }
 
 export function createTelemetryLapTimesMarkup() {
-  return `
-      <section class="${getTelemetryModuleClass('lap-times')} telemetry-lap-module" data-paddock-component="telemetry-lap-times" aria-label="Lap timing">
+  return createComponentSurfaceMarkup({
+    tagName: 'section',
+    className: `${getTelemetryModuleClass('lap-times')} telemetry-lap-module`,
+    componentName: 'telemetry-lap-times',
+    ariaLabel: 'Lap timing',
+    unsupportedLabel: 'Lap telemetry',
+    loadingLabel: 'Lap telemetry',
+    body: `
         <div class="telemetry-module-header">
           <span>Lap timing</span>
           <strong data-telemetry-completed-laps>0 laps</strong>
@@ -85,14 +100,19 @@ export function createTelemetryLapTimesMarkup() {
             <tr><th scope="row">Best</th><td data-telemetry-best-lap-time>--</td></tr>
           </tbody>
         </table>
-        ${createLoadingMarkup('Lap telemetry')}
-      </section>
-  `;
+    `,
+  });
 }
 
 export function createTelemetrySectorTimesMarkup() {
-  return `
-      <section class="${getTelemetryModuleClass('sector-times')} telemetry-sector-table-module" data-paddock-component="telemetry-sector-times" aria-label="Sector timing table">
+  return createComponentSurfaceMarkup({
+    tagName: 'section',
+    className: `${getTelemetryModuleClass('sector-times')} telemetry-sector-table-module`,
+    componentName: 'telemetry-sector-times',
+    ariaLabel: 'Sector timing table',
+    unsupportedLabel: 'Sector table',
+    loadingLabel: 'Sector table',
+    body: `
         <div class="telemetry-module-header">
           <span>Sector timing</span>
           <strong>Last / Best</strong>
@@ -111,9 +131,8 @@ export function createTelemetrySectorTimesMarkup() {
             `).join('')}
           </tbody>
         </table>
-        ${createLoadingMarkup('Sector table')}
-      </section>
-  `;
+    `,
+  });
 }
 
 function createTelemetryComponentMarkup(options, modules = getTelemetryModules(options.ui)) {
@@ -127,10 +146,17 @@ function createTelemetryComponentMarkup(options, modules = getTelemetryModules(o
 
 export function createTelemetryPanelMarkup(options, { includeOverview = options.ui?.telemetryIncludesOverview !== false } = {}) {
   const modules = getTelemetryModules(options.ui);
-  return `
-    <aside class="telemetry-stack" data-paddock-component="telemetry-stack" aria-label="Selected car telemetry stack">
+  const body = `
       ${createTelemetryComponentMarkup(options, modules)}
       ${includeOverview ? createCarDriverOverviewMarkup(options) : ''}
-    </aside>
   `;
+
+  return createComponentSurfaceMarkup({
+    tagName: 'aside',
+    className: 'telemetry-stack',
+    componentName: 'telemetry-stack',
+    ariaLabel: 'Selected car telemetry stack',
+    body,
+    unsupportedLabel: 'Telemetry stack',
+  });
 }

package/src/ui/templateUtils.js

@@ -21,3 +21,51 @@ export function createLoadingMarkup(label = 'Loading') {
       </div>
   `;
 }
+
+export function createUnsupportedSizeMarkup(label = 'PaddockJS component') {
+  return `
+      <div class="paddock-unsupported-size" data-paddock-unsupported-size role="status" aria-live="polite">
+        <strong>Unsupported size</strong>
+        <span>${escapeHtml(label)} needs more inline space or height to remain usable.</span>
+      </div>
+    `;
+}
+
+const COMPONENT_SURFACE_TAGS = new Set(['section', 'aside', 'div', 'header']);
+
+export function createComponentSurfaceMarkup({
+  tagName = 'section',
+  className,
+  componentName,
+  ariaLabel,
+  attributes = '',
+  body = '',
+  unsupportedLabel,
+  loadingLabel,
+} = {}) {
+  const tag = COMPONENT_SURFACE_TAGS.has(tagName) ? tagName : 'section';
+  const extraAttributes = attributes ? ` ${attributes}` : '';
+  return `
+      <${tag} class="${escapeHtml(className)}" data-paddock-component="${escapeHtml(componentName)}"${extraAttributes} aria-label="${escapeHtml(ariaLabel)}">
+        ${body}
+        ${unsupportedLabel ? createUnsupportedSizeMarkup(unsupportedLabel) : ''}
+        ${loadingLabel ? createLoadingMarkup(loadingLabel) : ''}
+      </${tag}>
+  `;
+}
+
+export function createTelemetrySectorBarsMarkup({
+  wrapperClassName = 'telemetry-sector-bars',
+  barClassName = 'telemetry-sector-bar',
+} = {}) {
+  return `
+        <div class="${escapeHtml(wrapperClassName)}">
+          ${[1, 2, 3].map((sector) => `
+          <div class="${escapeHtml(barClassName)}" data-telemetry-sector-bar="${sector}" style="--sector-fill: 0%">
+            <span>S${sector}</span>
+            <strong data-telemetry-sector-time="${sector}">--</strong>
+          </div>
+          `).join('')}
+        </div>
+  `;
+}

package/src/ui/timingTowerTemplate.js

@@ -1,9 +1,19 @@
+import { getTimingGapModeLabel, normalizeTimingGapMode } from '../config/timingGapMode.js';
 import { createRaceControlStatusBannerMarkup } from './raceControlStatusBanner.js';
-import { createLoadingMarkup, escapeHtml } from './templateUtils.js';
+import { createComponentSurfaceMarkup, escapeHtml } from './templateUtils.js';
 
-export function createTimingTowerMarkup({ totalLaps, assets }) {
-  return `
-    <aside class="sim-timing broadcast-tower" data-paddock-component="timing-tower" data-timing-tower aria-label="Timing tower">
+function normalizeTimingEntryVerticalPadding(value) {
+  const numericValue = Number(value);
+  return Number.isFinite(numericValue) && numericValue >= 0 ? numericValue : 5;
+}
+
+export function createTimingTowerMarkup({ totalLaps, assets, id, ui = {} }) {
+  const idAttribute = id ? `id="${escapeHtml(id)}" ` : '';
+  const timingGapMode = normalizeTimingGapMode(ui.timingGapMode);
+  const timingGapLabel = getTimingGapModeLabel(timingGapMode);
+  const showGapToggle = ui.timingGapModeToggle !== false;
+  const timingEntryVerticalPadding = normalizeTimingEntryVerticalPadding(ui.timingEntryVerticalPadding);
+  const body = `
       <div class="broadcast-tower-frame">
         <div class="broadcast-brand">
           <img class="broadcast-f1-logo" src="${escapeHtml(assets.f1Logo)}" alt="F1" />
@@ -14,21 +24,28 @@ export function createTimingTowerMarkup({ totalLaps, assets }) {
           <span>/</span>
           <span data-tower-total-laps>${escapeHtml(totalLaps)}</span>
         </div>
-        <div class="broadcast-gap-mode" role="group" aria-label="Timing gap mode">
-          <button type="button" data-timing-gap-mode="interval" aria-pressed="true">Int</button>
-          <button type="button" data-timing-gap-mode="leader" aria-pressed="false">Gap</button>
-        </div>
         ${createRaceControlStatusBannerMarkup()}
-        <div class="broadcast-column-head" aria-hidden="true">
+        <div class="broadcast-column-head">
           <span>Pos</span>
           <span>Team</span>
           <span>Project</span>
-          <span data-timing-gap-label>Int</span>
+          ${showGapToggle
+            ? `<button class="broadcast-gap-mode-toggle" type="button" data-timing-gap-toggle data-timing-gap-label aria-pressed="${timingGapMode === 'leader'}" aria-label="Timing gap mode ${escapeHtml(timingGapLabel)}">${escapeHtml(timingGapLabel)}</button>`
+            : `<span data-timing-gap-label>${escapeHtml(timingGapLabel)}</span>`}
           <span>Tyre</span>
         </div>
         <ol class="timing-list" data-timing-list></ol>
       </div>
-      ${createLoadingMarkup('Timing tower')}
-    </aside>
   `;
+
+  return createComponentSurfaceMarkup({
+    tagName: 'aside',
+    className: 'sim-timing broadcast-tower',
+    componentName: 'timing-tower',
+    ariaLabel: 'Timing tower',
+    attributes: `${idAttribute}data-timing-tower style="--timing-entry-extra-block-padding: ${timingEntryVerticalPadding}px"`,
+    body,
+    unsupportedLabel: 'Timing tower',
+    loadingLabel: 'Timing tower',
+  });
 }