@inventure71/paddockjs 4.2.0 → 4.3.0

package/src/styles.css

@@ -552,7 +552,7 @@
 .f1-sim-component h1 {
   margin: 0;
   font-size: clamp(1.8rem, 4vw, 4.6rem);
-  line-height: 0.88;
+  line-height: 1.15;
   text-transform: uppercase;
   letter-spacing: 0;
 }
@@ -580,11 +580,6 @@
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
-  :where(.f1-sim-component, .f1-sim-component *).sim-topbar h1 {
-    line-height: 0.92;
-    min-height: 1.08em;
-  }
-
   :where(.f1-sim-component, .f1-sim-component *).sim-control,
 :where(.f1-sim-component, .f1-sim-component *).sim-backlink {
     text-align: center;
@@ -1426,6 +1421,7 @@
   width: 100% !important;
   height: 100% !important;
   display: block;
+  touch-action: auto;
 }
 
 :where(.f1-sim-component, .f1-sim-component *).physics-mode-indicator {
@@ -1532,7 +1528,7 @@
   position: relative;
   z-index: 13;
   display: flex;
-  align-items: center;
+  align-items: stretch;
   justify-content: space-between;
   gap: 0.7rem;
   min-height: var(--race-toolbar-height);
@@ -1545,6 +1541,10 @@
   flex: 1 1 auto;
 }
 
+:where(.f1-sim-component, .f1-sim-component *).race-telemetry-drawer__toolbar [data-paddock-component='camera-controls'] button {
+  flex: 1 1 auto;
+}
+
 :where(.f1-sim-component, .f1-sim-component *).race-telemetry-drawer__race {
   position: relative;
   min-width: 0;
@@ -1569,8 +1569,9 @@
 
 :where(.f1-sim-component, .f1-sim-component *).race-telemetry-drawer__controls {
   min-width: 0;
-  display: flex;
-  flex-wrap: wrap;
+  flex: 0 0 auto;
+  display: grid;
+  grid-template-columns: repeat(2, max-content);
   justify-content: flex-end;
   gap: 0.45rem;
 }
@@ -1680,6 +1681,14 @@
   border-color: var(--text);
 }
 
+:where(.f1-sim-component, .f1-sim-component *).camera-controls__zoom {
+  display: flex;
+  gap: 0.35rem;
+  flex: 2 1 auto;
+  min-width: calc(88px + 0.35rem);
+}
+:where(.f1-sim-component, .f1-sim-component *).camera-controls__zoom button { flex: 1 1 44px; }
+
 :where(.f1-sim-component, .f1-sim-component *).steward-message {
   --steward-panel-bg: rgba(8, 9, 11, 0.92);
   --steward-chip-bg: color-mix(in srgb, var(--steward-color, var(--yellow)) 18%, rgba(8, 9, 11, 0.94));
@@ -3592,7 +3601,7 @@
   }
 }
 
-:where(.f1-sim-component, .f1-sim-component *).race-data-panel--standalone {
+:where(.f1-sim-component, .f1-sim-component *).race-data-panel.race-data-panel--standalone {
   position: relative;
   left: auto;
   right: auto;
@@ -3604,29 +3613,29 @@
   min-height: 0;
 }
 
-:where(.f1-sim-component, .f1-sim-component *).race-data-panel--standalone .race-data-copy {
+:where(.f1-sim-component, .f1-sim-component *).race-data-panel.race-data-panel--standalone .race-data-copy {
   grid-column: 2;
   grid-row: 1;
   min-width: 0;
   padding: 0.75rem 0.68rem 0.55rem;
 }
 
-:where(.f1-sim-component, .f1-sim-component *).race-data-panel--standalone .race-data-kicker {
+:where(.f1-sim-component, .f1-sim-component *).race-data-panel.race-data-panel--standalone .race-data-kicker {
   font-size: 0.54rem;
   letter-spacing: 0.12em;
 }
 
-:where(.f1-sim-component, .f1-sim-component *).race-data-panel--standalone .race-data-copy strong {
+:where(.f1-sim-component, .f1-sim-component *).race-data-panel.race-data-panel--standalone .race-data-copy strong {
   font-size: clamp(1.05rem, 3vw, 1.45rem);
   line-height: 0.98;
 }
 
-:where(.f1-sim-component, .f1-sim-component *).race-data-panel--standalone .race-data-subtitle {
+:where(.f1-sim-component, .f1-sim-component *).race-data-panel.race-data-panel--standalone .race-data-subtitle {
   font-size: 0.55rem;
   letter-spacing: 0.06em;
 }
 
-:where(.f1-sim-component, .f1-sim-component *).race-data-panel--standalone .race-data-number {
+:where(.f1-sim-component, .f1-sim-component *).race-data-panel.race-data-panel--standalone .race-data-number {
   grid-column: 1;
   grid-row: 1;
   min-width: 0;
@@ -3634,7 +3643,7 @@
   font-size: clamp(2.3rem, 5vw, 3.9rem);
 }
 
-:where(.f1-sim-component, .f1-sim-component *).race-data-panel--standalone .race-data-link {
+:where(.f1-sim-component, .f1-sim-component *).race-data-panel.race-data-panel--standalone .race-data-link {
   grid-column: 1 / -1;
   grid-row: 2;
   margin: 0;
@@ -3643,18 +3652,163 @@
   font-size: 0.62rem;
 }
 
-:where(.f1-sim-component, .f1-sim-component *).race-data-panel--standalone.race-data-panel--with-telemetry {
+:where(.f1-sim-component, .f1-sim-component *).race-data-panel.race-data-panel--standalone.race-data-panel--with-telemetry {
   grid-template-columns: minmax(4.6rem, 0.35fr) minmax(0, 1fr);
 }
 
-:where(.f1-sim-component, .f1-sim-component *).race-data-panel--standalone.race-data-panel--with-telemetry .race-data-copy {
+:where(.f1-sim-component, .f1-sim-component *).race-data-panel.race-data-panel--standalone.race-data-panel--with-telemetry .race-data-copy {
   grid-column: 2;
   padding-bottom: 0.35rem;
 }
 
-:where(.f1-sim-component, .f1-sim-component *).race-data-panel--standalone .race-data-telemetry {
+:where(.f1-sim-component, .f1-sim-component *).race-data-panel.race-data-panel--standalone .race-data-telemetry {
   grid-column: 1 / -1;
   grid-row: auto;
   padding: 0 0.68rem 0.65rem;
   border-left: 0;
 }
+
+/* Grid Walk positions shared simulator controls over the existing world. */
+:where(.f1-sim-component, .f1-sim-component *) .grid-walk {
+  position: absolute;
+  inset: 0;
+  z-index: 24;
+  overflow: hidden;
+  pointer-events: none;
+  color: var(--text);
+}
+.grid-walk [hidden] { display: none !important; }
+.is-grid-walk-covered { visibility: hidden !important; pointer-events: none !important; }
+.grid-walk button, .grid-walk select, .grid-walk a { pointer-events: auto; touch-action: manipulation; }
+.grid-walk :is(button, select, a, [data-grid-heading]):focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
+.grid-walk .grid-walk__toolbar {
+  position: absolute;
+  top: 12px;
+  left: 12px;
+  right: 12px;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: center;
+  gap: 8px;
+}
+.grid-walk .grid-walk__toolbar > .camera-controls {
+  position: static;
+  max-width: 100%;
+  box-sizing: border-box;
+  background: var(--paddock-camera-controls-background, var(--surface-panel));
+}
+:where(.f1-sim-component, .f1-sim-component *).paddock-view-controls[hidden] { display: none !important; }
+.paddock-view-controls [hidden] { display: none !important; }
+:where(.f1-sim-component, .f1-sim-component *).paddock-view-controls { flex: 0 0 auto; }
+.race-telemetry-drawer__toolbar .paddock-view-controls { flex: 0 0 auto; }
+.paddock-view-controls button:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
+.paddock-view-controls.camera-controls button[data-grid-action='start'] {
+  color: #08090b;
+  background: var(--green);
+  border-color: var(--green);
+}
+.paddock-view-controls.camera-controls button[data-grid-action='stop'] {
+  color: #ffffff;
+  background: var(--race-control-red);
+  border-color: var(--race-control-red);
+}
+/* Intrinsic sizing reserves the longest action label in both states. */
+:where(.f1-sim-component, .f1-sim-component *) button[data-size-label] { display: grid; place-items: center; }
+:where(.f1-sim-component, .f1-sim-component *) button[data-size-label]::after { content: attr(data-size-label); visibility: hidden; grid-area: 1 / 1; }
+:where(.f1-sim-component, .f1-sim-component *) button[data-size-label] > [data-control-label] { grid-area: 1 / 1; }
+.grid-walk .grid-walk__entry {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 180px;
+  min-height: 44px;
+  padding: 8px 10px;
+  box-sizing: border-box;
+  text-align: left;
+  white-space: normal;
+  font-family: var(--font-display);
+  color: var(--text);
+  background: var(--surface-panel);
+  border: 1px solid var(--line);
+  border-inline-start: 3px solid var(--driver-color, var(--red));
+  box-shadow: 0 3px 12px #0003;
+  cursor: pointer;
+}
+.grid-walk .grid-walk__entry:hover { background: var(--surface-raised); border-color: var(--text); }
+.grid-walk .grid-walk__entry { touch-action: none; }
+.grid-walk .grid-walk__entry[aria-pressed='true'] {
+  border-color: var(--driver-color, var(--red));
+  box-shadow: inset 0 0 0 1px var(--driver-color, var(--red)), 0 3px 12px #0003;
+}
+.grid-walk__entry strong {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  overflow: hidden;
+  font-size: .78rem;
+  line-height: 1.25;
+  overflow-wrap: anywhere;
+}
+.grid-walk__position { display: block; font: 10px var(--font-mono); color: var(--muted); }
+.grid-walk[data-compact-labels='true'] .grid-walk__entry { padding: 5px 8px; }
+.grid-walk[data-compact-labels='true'] .grid-walk__entry strong { -webkit-line-clamp: 1; }
+.grid-walk__connectors { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; stroke: var(--muted); stroke-width: 1; }
+.grid-walk .grid-walk__toolbar > .grid-walk__navigation {
+  width: 360px;
+  min-width: min(240px, 100%);
+  max-width: min(360px, 100%);
+  flex: 0 1 360px;
+  flex-wrap: nowrap;
+  align-items: center;
+}
+.grid-walk[data-compact-controls='true'] .grid-walk__toolbar > .grid-walk__navigation { min-width: min(180px, 100%); flex: 1 1 180px; }
+.grid-walk__navigation button { flex: 0 0 44px; }
+.grid-walk__navigation label { min-width: 0; flex: 1; }
+.grid-walk .grid-walk__navigation select { display: block; width: 100%; min-height: 44px; font-family: var(--font-mono); padding: 6px; background: var(--surface-panel); text-align: center; text-align-last: center; }
+.grid-walk[data-view] [data-grid-project-banner] {
+  position: absolute;
+  left: 50%;
+  bottom: 12px;
+  width: calc(100% - 24px);
+  max-width: 1080px;
+  transform: translateX(-50%);
+  pointer-events: auto;
+  min-height: 0;
+  overflow: auto;
+}
+.grid-walk__status, .grid-walk__sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
+.sim-canvas-panel[data-grid-walk-active='true'] [data-track-canvas] canvas { touch-action: none; cursor: grab !important; }
+.sim-canvas-panel[data-grid-walk-active='true'] [data-grid-dragging='true'] canvas { cursor: grabbing !important; }
+.sim-canvas-panel[data-grid-walk-active='true'] > :is(.sim-timing, .timing-panel-toggle, .fps-counter, .start-lights, .steward-message, .camera-controls, .race-data-panel, .telemetry-sector-banner, .race-finish-panel) { display: none !important; }
+@media (prefers-reduced-motion: reduce) { .grid-walk .race-data-panel { transition: none; } }
+
+/* Opt-in shell chrome uses its container, including embeds on wide pages.
+   This reuses the shell's stacked composition without changing board sizing. */
+@container (max-width: 900px) {
+  .sim-shell:has(.grid-walk) .sim-grid { grid-template-columns: minmax(0, 1fr); }
+  .sim-shell:has(.grid-walk) .sim-canvas-panel {
+    grid-column: 1;
+    grid-row: 1;
+    min-height: var(--paddock-race-view-min-height, 620px);
+  }
+  .sim-shell:has(.grid-walk) .sim-grid > .sim-timing {
+    position: relative;
+    inset: auto;
+    grid-column: 1;
+    grid-row: 2;
+    width: min(100%, var(--timing-board-max-width));
+    max-width: var(--timing-board-max-width);
+    height: auto;
+    clip-path: none;
+  }
+  .sim-shell:has(.grid-walk) .telemetry-stack { grid-column: 1; grid-row: 3; max-height: none; }
+  .sim-shell:has(.grid-walk) .sim-canvas-panel > .camera-controls { left: 1rem; max-width: calc(100% - 2rem); }
+  .sim-shell:has(.grid-walk) .start-lights { left: 50%; }
+  .sim-shell:has(.grid-walk) .race-data-panel {
+    --race-data-safe-left: 0px;
+    --race-data-banner-left: 50%;
+    --race-data-banner-width: calc(100% - 1.5rem);
+    left: 50%;
+  }
+}

package/src/ui/bannerTemplates.js

@@ -13,7 +13,7 @@ export function createStewardMessageMarkup() {
   `;
 }
 
-export function createRaceDataPanelMarkup({ ui = {}, standalone = false } = {}) {
+export function createRaceDataPanelMarkup({ ui = {}, standalone = false, navigationLink = false } = {}) {
   const sizeMode = ui.raceDataBannerSize === 'auto' ? 'auto' : 'custom';
   const telemetryDetail = Boolean(ui.raceDataTelemetryDetail);
   const classNames = ['race-data-panel', `race-data-panel--${sizeMode}`];
@@ -28,7 +28,9 @@ export function createRaceDataPanelMarkup({ ui = {}, standalone = false } = {})
       </div>
       ${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>
+      ${navigationLink
+        ? '<a class="race-data-link" data-race-data-open>Open project</a>'
+        : '<button class="race-data-link" type="button" data-race-data-open>Open project</button>'}
   `;
 
   return createComponentSurfaceMarkup({

package/src/ui/cameraControlsTemplate.js

@@ -13,8 +13,10 @@ export function createCameraControlsMarkup({ embedded = false, showSimulationSpe
         ${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>
+        <div class="camera-controls__zoom" role="group" aria-label="Zoom">
+          <button type="button" data-zoom-out aria-label="Zoom out">-</button>
+          <button type="button" data-zoom-in aria-label="Zoom in">+</button>
+        </div>
         ${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>
   `;

package/src/ui/gridWalkTemplate.js

@@ -0,0 +1,29 @@
+import { createRaceDataPanelMarkup } from './bannerTemplates.js';
+import { escapeHtml as html } from './htmlEscaping.js';
+
+export function createGridWalkMarkup(drivers, cars, ui = {}) {
+  const byId = new Map(drivers.map((driver) => [driver.id, driver]));
+  return `<div class="grid-walk" data-grid-walk>
+    <div class="grid-walk__toolbar" data-grid-header>
+    <div class="camera-controls grid-walk__navigation" data-grid-navigation>
+      <button type="button" data-grid-previous aria-label="Previous grid entry">←</button>
+      <label><span class="grid-walk__sr-only">Explore the grid</span><select class="sim-control" data-grid-jump aria-label="Jump to grid entry">
+        ${cars.map((car, index) => `<option value="${html(car.id)}">${index + 1}. ${html(byId.get(car.id).presentation.name)}</option>`).join('')}
+      </select></label>
+      <button type="button" data-grid-next aria-label="Next grid entry">→</button>
+    </div>
+    </div>
+    <div class="grid-walk__labels" data-grid-labels role="group" aria-label="Starting grid">
+      <svg class="grid-walk__connectors" aria-hidden="true">${cars.map((car) => `<line data-grid-connector="${html(car.id)}" />`).join('')}</svg>
+      ${cars.map((car, index) => {
+        const entry = byId.get(car.id).presentation;
+        return `<button type="button" class="grid-walk__entry" data-grid-entry="${html(car.id)}" title="${html(entry.name)}" style="--driver-color: ${html(byId.get(car.id).color)}" aria-pressed="false">
+          <span class="grid-walk__position">${String(index + 1).padStart(2, '0')}</span>
+          <strong>${html(entry.name)}</strong>
+        </button>`;
+      }).join('')}
+    </div>
+    ${createRaceDataPanelMarkup({ ui: { ...ui, raceDataTelemetryDetail: false }, navigationLink: true })}
+    <span class="grid-walk__status" data-grid-status role="status"></span>
+  </div>`;
+}

package/src/ui/htmlEscaping.js

@@ -0,0 +1,8 @@
+export function escapeHtml(value) {
+  return String(value ?? '')
+    .replaceAll('&', '&')
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;')
+    .replaceAll('"', '&quot;')
+    .replaceAll("'", '&#39;');
+}

package/src/ui/shellTemplate.js

@@ -5,6 +5,7 @@ import {
   createTelemetryPanelMarkup,
   createTimingTowerMarkup,
 } from './componentTemplates.js';
+import { createViewControlsMarkup } from './viewControlsTemplate.js';
 import { createUnsupportedSizeMarkup } from './templateUtils.js';
 
 export function createF1SimulatorShell({
@@ -17,6 +18,7 @@ export function createF1SimulatorShell({
 	  physicsMode,
 	  assets,
   ui = {},
+  gridWalk = {},
 }) {
   const layoutPreset = ui.layoutPreset === 'left-tower-overlay' ? 'left-tower-overlay' : 'standard';
   const timingFit = ui.timingTowerVerticalFit === 'scroll' ? 'scroll' : 'expand-race-view';
@@ -34,6 +36,7 @@ export function createF1SimulatorShell({
       <section class="sim-workspace" aria-label="F1 race simulator">
         ${createRaceControlsMarkup({ title, kicker, backLinkHref, backLinkLabel, showBackLink })}
         ${cameraControls}
+        ${createViewControlsMarkup({ gridWalk, ui })}
         <div class="sim-grid">
           ${createTimingTowerMarkup({ totalLaps, assets, ui })}
 	          ${createRaceCanvasMarkup({ includeRaceDataPanel: ui.showRaceDataPanel !== false, assets, totalLaps, physicsMode, ui })}

package/src/ui/telemetryDrawerTemplate.js

@@ -1,3 +1,4 @@
+import { createViewControlsMarkup } from './viewControlsTemplate.js';
 import { createCameraControlsMarkup } from './cameraControlsTemplate.js';
 import { createRaceCanvasMarkup } from './raceCanvasTemplate.js';
 import { createSafetyCarControlMarkup } from './raceControlsTemplate.js';
@@ -33,11 +34,12 @@ export function createRaceTelemetryDrawerMarkup(options, {
   const showCameraControls = options.ui?.cameraControls !== false;
   const body = `
       <div class="race-telemetry-drawer__toolbar" aria-label="Race workbench controls">
+        ${createViewControlsMarkup(options)}
         ${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}" aria-label="${drawerInitiallyOpen ? 'Close telemetry' : 'Open telemetry'}">
-            ${drawerInitiallyOpen ? 'Close' : 'Telemetry'}
+          <button class="telemetry-drawer-toggle" type="button" data-telemetry-drawer-toggle data-size-label="Telemetry" aria-expanded="${drawerInitiallyOpen ? 'true' : 'false'}" aria-controls="${drawerId}" aria-label="${drawerInitiallyOpen ? 'Close telemetry' : 'Open telemetry'}">
+            <span data-control-label>${drawerInitiallyOpen ? 'Close' : 'Telemetry'}</span>
           </button>
         </div>
       </div>

package/src/ui/telemetryTemplates.js

@@ -1,29 +1,10 @@
+import { normalizeTelemetryModules } from '../config/telemetryModules.js';
 import { createCarDriverOverviewMarkup } from './carOverviewTemplate.js';
 import {
   createComponentSurfaceMarkup,
   createTelemetrySectorBarsMarkup,
 } from './templateUtils.js';
 
-function getTelemetryModules(ui = {}) {
-  const defaults = {
-    core: true,
-    sectors: true,
-    lapTimes: true,
-    sectorTimes: true,
-  };
-  const modules = ui.telemetryModules;
-  if (modules === false) return Object.fromEntries(Object.keys(defaults).map((name) => [name, false]));
-  if (Array.isArray(modules)) {
-    const requested = new Set(modules);
-    return Object.fromEntries(Object.keys(defaults).map((name) => [name, requested.has(name)]));
-  }
-  if (!modules || typeof modules !== 'object') return defaults;
-  return Object.fromEntries(Object.entries(defaults).map(([name, fallback]) => [
-    name,
-    modules[name] == null ? fallback : Boolean(modules[name]),
-  ]));
-}
-
 function getTelemetryModuleClass(componentName) {
   return `sim-telemetry telemetry-component telemetry-component--${componentName}`;
 }
@@ -135,7 +116,7 @@ export function createTelemetrySectorTimesMarkup() {
   });
 }
 
-function createTelemetryComponentMarkup(options, modules = getTelemetryModules(options.ui)) {
+function createTelemetryComponentMarkup(options, modules = normalizeTelemetryModules(options.ui?.telemetryModules)) {
   return `
       ${modules.core ? createTelemetryCoreMarkup(options) : ''}
       ${modules.sectors ? createTelemetrySectorsMarkup(options) : ''}
@@ -145,7 +126,7 @@ function createTelemetryComponentMarkup(options, modules = getTelemetryModules(o
 }
 
 export function createTelemetryPanelMarkup(options, { includeOverview = options.ui?.telemetryIncludesOverview !== false } = {}) {
-  const modules = getTelemetryModules(options.ui);
+  const modules = normalizeTelemetryModules(options.ui?.telemetryModules);
   const body = `
       ${createTelemetryComponentMarkup(options, modules)}
       ${includeOverview ? createCarDriverOverviewMarkup(options) : ''}

package/src/ui/templateUtils.js

@@ -1,11 +1,5 @@
-export function escapeHtml(value) {
-  return String(value ?? '')
-    .replaceAll('&', '&')
-    .replaceAll('<', '&lt;')
-    .replaceAll('>', '&gt;')
-    .replaceAll('"', '&quot;')
-    .replaceAll("'", '&#39;');
-}
+import { escapeHtml } from './htmlEscaping.js';
+export { escapeHtml } from './htmlEscaping.js';
 
 export function createLoadingMarkup(label = 'Loading') {
   return `

package/src/ui/viewControlsTemplate.js

@@ -0,0 +1,21 @@
+import { createComponentSurfaceMarkup } from './templateUtils.js';
+
+export function createViewControlsMarkup({ gridWalk = {}, ui = {} } = {}) {
+  const enabled = gridWalk.enabled === true;
+  const view = enabled && gridWalk.initialView === 'grid-walk' ? 'grid-walk' : 'race';
+  const toggle = ui.viewControls === 'toggle';
+  return createComponentSurfaceMarkup({
+    tagName: 'div',
+    className: 'camera-controls camera-controls--external paddock-view-controls',
+    componentName: 'view-controls',
+    ariaLabel: 'Simulator view',
+    attributes: `role="group"${enabled ? '' : ' hidden'}`,
+    body: `
+      <button type="button" data-grid-view="grid-walk" aria-pressed="${view === 'grid-walk'}" disabled${toggle ? ' hidden' : ''}>Grid Walk</button>
+      <button type="button" data-grid-view="race" aria-pressed="${view === 'race'}" disabled${toggle ? ' hidden' : ''}>Race</button>
+      <button type="button" data-grid-action="${view === 'grid-walk' ? 'start' : 'stop'}" data-grid-toggle data-size-label="Start race" disabled${toggle ? '' : ' hidden'}><span data-control-label>${view === 'grid-walk' ? 'Start race' : 'Stop race'}</span></button>
+    `,
+    unsupportedLabel: 'Simulator view',
+    loadingLabel: 'Simulator view',
+  });
+}