@inventure71/paddockjs 4.1.0 → 4.3.0

package/src/app/HostLifecycleEmitter.js

@@ -0,0 +1,93 @@
+export class HostLifecycleEmitter {
+  constructor(getOptions, getDispatchSource = () => undefined) {
+    this.getOptions = getOptions;
+    this.getDispatchSource = getDispatchSource;
+    this.reset();
+  }
+
+  reset() {
+    this.dispatchGeneration = (this.dispatchGeneration ?? 0) + 1;
+    this.lastLeaderLap = null;
+    this.emittedRaceEventKeys = new Set();
+    this.raceFinishEmitted = false;
+  }
+
+  captureDispatch() {
+    return { generation: this.dispatchGeneration, source: this.getDispatchSource() };
+  }
+
+  isDispatchCurrent(dispatch) {
+    return dispatch.source !== false &&
+      dispatch.generation === this.dispatchGeneration &&
+      dispatch.source === this.getDispatchSource();
+  }
+
+  emitCallback(name, ...args) {
+    const options = this.getOptions?.();
+    const callback = options?.[name];
+    if (typeof callback !== 'function') return;
+    try {
+      callback(...args);
+    } catch (error) {
+      if (name !== 'onError' && typeof options?.onError === 'function') {
+        try {
+          options.onError(error, { callback: name });
+        } catch {
+          // Host callbacks should not break the simulator runtime.
+        }
+      }
+    }
+  }
+
+  emitSnapshot(snapshot) {
+    const dispatch = this.captureDispatch();
+    if (!this.isDispatchCurrent(dispatch)) return;
+    const leader = snapshot.cars[0];
+    const leaderLap = leader?.lap;
+    if (Number.isFinite(leaderLap)) {
+      if (this.lastLeaderLap != null && leaderLap !== this.lastLeaderLap) {
+        this.emitCallback('onLapChange', {
+          previousLeaderLap: this.lastLeaderLap,
+          leaderLap,
+          leader,
+          snapshot,
+        });
+        if (!this.isDispatchCurrent(dispatch)) return;
+      }
+      this.lastLeaderLap = leaderLap;
+    }
+
+    this.emitRaceEvents(snapshot.events, snapshot, dispatch);
+    if (!this.isDispatchCurrent(dispatch)) return;
+
+    if (snapshot.raceControl.finished && !this.raceFinishEmitted) {
+      this.raceFinishEmitted = true;
+      this.emitCallback('onRaceFinish', {
+        winner: snapshot.raceControl.winner,
+        classification: snapshot.raceControl.classification ?? [],
+        snapshot,
+      });
+    }
+  }
+
+  emitRaceEvents(events = [], snapshot, dispatch = this.captureDispatch()) {
+    for (const event of events) {
+      if (!this.isDispatchCurrent(dispatch)) return;
+      const key = [
+        event.type,
+        event.at ?? snapshot?.time,
+        event.id ?? '',
+        event.penaltyId ?? '',
+        event.driverId ?? '',
+        event.carId ?? '',
+        event.otherCarId ?? '',
+        event.winnerId ?? '',
+        event.sequence ?? '',
+        event.status ?? '',
+      ].join(':');
+      if (this.emittedRaceEventKeys.has(key)) continue;
+      this.emittedRaceEventKeys.add(key);
+      this.emitCallback('onRaceEvent', event, snapshot);
+    }
+  }
+}

package/src/app/banners/raceDataBannerController.js

@@ -52,7 +52,7 @@ export function shouldAutoHideActiveRaceData({ activeRaceDataId, options, readou
   );
 }
 
-export function renderRaceData({ car, drivers, readouts, options }) {
+export function renderRaceData({ car, drivers, readouts, options, presentation = null }) {
   const panels = getRaceDataPanelBindings(readouts);
   if (!car || !panels.length) return false;
   if (typeof options.isRaceDataBannerEnabled === 'function' && !options.isRaceDataBannerEnabled('project')) return false;
@@ -66,11 +66,16 @@ export function renderRaceData({ car, drivers, readouts, options }) {
     binding.panel.classList.remove('is-radio-mode');
     clearRaceDataIdleMode(binding.panel);
     setText(binding.kicker, 'Project');
-    setText(binding.title, driver.name);
+    setText(binding.title, presentation?.name ?? driver.name);
     setText(binding.number, formatDriverNumber(car.driverNumber ?? driver.driverNumber));
-    setText(binding.subtitle, `${car.code} - P${car.rank} - ${driver.raceData?.[0] ?? 'Project entry'}`);
+    setText(binding.subtitle, `${car.code} - P${car.rank} - ${presentation?.summary ?? driver.raceData?.[0] ?? 'Project entry'}`);
     if (binding.open) {
-      binding.open.hidden = typeof options.onDriverOpen !== 'function';
+      if (binding.open.tagName === 'A') {
+        binding.open.hidden = !presentation?.href;
+        if (presentation?.href) binding.open.setAttribute('href', presentation.href);
+        else binding.open.removeAttribute('href');
+        setText(binding.open, presentation?.linkLabel ?? 'Open project');
+      } else binding.open.hidden = typeof options.onDriverOpen !== 'function';
     }
   });
   return true;

package/src/app/camera/cameraConstants.js

@@ -1,5 +1,5 @@
 import { metersToSimUnits } from '../../simulation/units.js';
-import { VEHICLE_GEOMETRY } from '../../simulation/vehicleGeometry.js';
+import { VEHICLE_GEOMETRY } from '../../simulation/vehicle/vehicleGeometry.js';
 
 export const CAMERA_TARGET_LERP = 0.12;
 export const CAMERA_SCALE_LERP = 0.12;

package/src/app/camera/cameraController.js

@@ -1,4 +1,4 @@
-import { WORLD } from '../../simulation/trackModel.js';
+import { WORLD } from '../../simulation/track/trackModel.js';
 import { clamp, normalizeAngle } from '../../simulation/simMath.js';
 import {
   CAMERA_PRESETS,
@@ -274,14 +274,7 @@ export class CameraController {
     return leader ? { x: leader.x, y: leader.y } : { x: WORLD.width / 2, y: WORLD.height / 2 };
   }
 
-  getBaseScale() {
-    const width = this.canvasHost.clientWidth || 900;
-    const height = this.canvasHost.clientHeight || 640;
-    const safeArea = this.getSafeArea(width);
-    return Math.min(safeArea.width / (WORLD.width + 260), height / (WORLD.height + 220));
-  }
-
-  applyToWorldLayer(worldLayer, snapshot, { immediate = false, selectedId = null } = {}) {
+  applyToWorldLayer(worldLayer, snapshot, { immediate = false, selectedId = null, elapsedMs = 1000 / 60 } = {}) {
     if (!worldLayer) return;
 
     const width = this.canvasHost.clientWidth || 900;
@@ -293,18 +286,22 @@ export class CameraController {
     const target = frame.target;
     const targetRotation = Number.isFinite(frame.rotation) ? frame.rotation : 0;
     const snapCamera = immediate || !this.camera.initialized;
+    const elapsedFrames = Math.max(0, elapsedMs) / (1000 / 60);
+    const targetLerp = 1 - (1 - CAMERA_TARGET_LERP) ** elapsedFrames;
+    const scaleLerp = 1 - (1 - CAMERA_SCALE_LERP) ** elapsedFrames;
+    const rotationLerp = 1 - (1 - CAMERA_ROTATION_LERP) ** elapsedFrames;
     this.camera.x = snapCamera
       ? target.x
-      : this.camera.x + (target.x - this.camera.x) * CAMERA_TARGET_LERP;
+      : this.camera.x + (target.x - this.camera.x) * targetLerp;
     this.camera.y = snapCamera
       ? target.y
-      : this.camera.y + (target.y - this.camera.y) * CAMERA_TARGET_LERP;
+      : this.camera.y + (target.y - this.camera.y) * targetLerp;
     const activeScale = snapCamera || this.camera.scale === null
       ? scale
-      : this.camera.scale + (scale - this.camera.scale) * CAMERA_SCALE_LERP;
+      : this.camera.scale + (scale - this.camera.scale) * scaleLerp;
     const activeRotation = snapCamera
       ? targetRotation
-      : this.camera.rotation + normalizeAngle(targetRotation - this.camera.rotation) * CAMERA_ROTATION_LERP;
+      : this.camera.rotation + normalizeAngle(targetRotation - this.camera.rotation) * rotationLerp;
     this.camera.initialized = true;
     this.camera.scale = activeScale;
     this.camera.rotation = activeRotation;

package/src/app/camera/cameraGeometry.js

@@ -1,4 +1,4 @@
-import { WORLD } from '../../simulation/trackModel.js';
+import { WORLD } from '../../simulation/track/trackModel.js';
 import { clamp } from '../../simulation/simMath.js';
 import {
   CAMERA_MAX_ZOOM,

package/src/app/controls/SimulatorViewControls.js

@@ -0,0 +1,45 @@
+// Separately mounted controls share one runtime view; they never own race state.
+export class SimulatorViewControls {
+  constructor(root, onView, signal) {
+    this.surfaces = [...root.querySelectorAll('[data-paddock-component="view-controls"]')];
+    this.buttons = this.surfaces.flatMap((surface) => [...surface.querySelectorAll('[data-grid-view]')]);
+    this.toggles = this.surfaces.flatMap((surface) => [...surface.querySelectorAll('[data-grid-toggle]')]);
+    this.view = this.buttons.find((button) => button.getAttribute('aria-pressed') === 'true')?.dataset.gridView ?? 'race';
+    for (const button of this.buttons) {
+      button.addEventListener('click', () => onView(button.dataset.gridView), { signal });
+      button.disabled = false;
+    }
+    for (const button of this.toggles) {
+      button.addEventListener('click', () => onView(this.view === 'race' ? 'grid-walk' : 'race'), { signal });
+      button.disabled = false;
+    }
+    for (const surface of this.surfaces) surface.hidden = false;
+  }
+
+  update(view, variant = 'switch') {
+    this.view = view;
+    const toggle = variant === 'toggle';
+    for (const button of this.buttons) {
+      button.hidden = toggle;
+      button.setAttribute('aria-pressed', String(button.dataset.gridView === view));
+    }
+    for (const button of this.toggles) {
+      button.hidden = !toggle;
+      button.dataset.gridAction = view === 'grid-walk' ? 'start' : 'stop';
+      const label = button.querySelector?.('[data-control-label]') ?? button;
+      label.textContent = view === 'grid-walk' ? 'Start race' : 'Stop race';
+    }
+  }
+
+  focusRace() {
+    const button = [...this.buttons.filter((node) => node.dataset.gridView === 'race'), ...this.toggles]
+      .find((node) => !node.hidden && node.checkVisibility());
+    button?.focus({ preventScroll: true });
+    return Boolean(button);
+  }
+
+  destroy() {
+    for (const button of [...this.buttons, ...this.toggles]) button.disabled = true;
+    for (const surface of this.surfaces) surface.hidden = true;
+  }
+}

package/src/app/controls/workbenchBindings.js

@@ -0,0 +1,64 @@
+function uniqueNodes(nodes = []) {
+  return [...new Set([...nodes].filter(Boolean))];
+}
+
+// Bind DOM gestures to commands without owning race state or a simulation.
+export function bindWorkbenchControls(nodes, commands, signal) {
+  const eventOptions = { signal };
+  nodes.safetyButtons.forEach((button) => {
+    button.addEventListener('click', commands.toggleSafetyCar, eventOptions);
+  });
+  uniqueNodes(nodes.restartButtons?.length ? nodes.restartButtons : [nodes.restartButton]).forEach((button) => button.addEventListener('click', commands.restart, eventOptions));
+  nodes.cameraButtons.forEach((button) => {
+    button.addEventListener('click', () => commands.setCameraMode(button.dataset.cameraMode), eventOptions);
+  });
+  for (const [buttons, fallback, direction] of [[nodes.zoomInButtons, nodes.zoomInButton, 1], [nodes.zoomOutButtons, nodes.zoomOutButton, -1]]) {
+    uniqueNodes(buttons?.length ? buttons : [fallback]).forEach((button) => button.addEventListener('click', () => commands.adjustCameraZoom(direction), eventOptions));
+  }
+  nodes.simulationSpeedButtons?.forEach((button) => {
+    button.addEventListener('click', commands.cycleSimulationSpeed, eventOptions);
+  });
+  commands.updateSimulationSpeedControls();
+  nodes.bannerMuteButtons?.forEach((button) => {
+    button.addEventListener('click', commands.toggleRaceDataBanners, eventOptions);
+  });
+  nodes.overviewModeButtons.forEach((button) => {
+    button.addEventListener('click', () => {
+      commands.setOverviewMode(button.dataset.overviewMode === 'driver' ? 'driver' : 'vehicle');
+    }, eventOptions);
+  });
+  nodes.timingGapModeButtons.forEach((button) => {
+    button.addEventListener('click', commands.toggleTimingGapMode, eventOptions);
+  });
+  nodes.timingLists?.forEach?.((timingList) => {
+    timingList.addEventListener?.('click', (event) => {
+      const row = event.target instanceof Element ? event.target.closest('[data-driver-id]') : null;
+      if (row) commands.selectCar(row.dataset.driverId);
+    }, eventOptions);
+  });
+  nodes.timingPanelToggles?.forEach?.((toggle) => {
+    toggle.addEventListener?.('click', () => {
+      const racePanel = toggle.closest?.('.sim-canvas-panel');
+      commands.setTimingPanelOpen(!racePanel?.classList?.contains?.('is-timing-panel-open'), racePanel);
+    }, eventOptions);
+  });
+  const openButtons = uniqueNodes(nodes.raceDataOpens?.length ? nodes.raceDataOpens : [nodes.openButton]);
+  openButtons.forEach((button) => button.addEventListener('click', commands.openDriver, eventOptions));
+  const dismissButtons = uniqueNodes(nodes.raceDataDismisses?.length ? nodes.raceDataDismisses : [nodes.raceDataDismiss]);
+  dismissButtons.forEach((button) => button.addEventListener('click', (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    commands.dismissRaceDataPanel(performance.now());
+  }, eventOptions));
+  nodes.telemetryDrawerToggle?.addEventListener('click', commands.toggleTelemetryDrawer, eventOptions);
+}
+
+export function bindCameraWheelControls(canvasHost, adjustCameraZoom, eventOptions, isEnabled = () => true) {
+  if (!canvasHost?.addEventListener) return;
+  canvasHost.addEventListener('wheel', (event) => {
+    if (!isEnabled() || !event.cancelable || event.defaultPrevented || event.ctrlKey || event.metaKey ||
+      !Number.isFinite(event.deltaY) || event.deltaY === 0) return;
+    if (!adjustCameraZoom(event.deltaY > 0 ? -1 : 1)) return;
+    event.preventDefault?.();
+  }, { ...eventOptions, passive: false });
+}

package/src/app/controls/workbenchDisclosure.js

@@ -0,0 +1,41 @@
+export function renderTelemetryDrawerDisclosure({ workbench, drawer, toggle }, open) {
+  workbench?.classList?.toggle?.('is-telemetry-open', open);
+  if (open) {
+    drawer?.removeAttribute?.('inert');
+    drawer?.setAttribute?.('aria-hidden', 'false');
+  } else {
+    drawer?.setAttribute?.('inert', '');
+    drawer?.setAttribute?.('aria-hidden', 'true');
+  }
+  toggle?.setAttribute?.('aria-expanded', String(open));
+  if (toggle) {
+    const label = toggle.querySelector?.('[data-control-label]') ?? toggle;
+    label.textContent = open ? 'Close' : 'Telemetry';
+    toggle.setAttribute('aria-label', open ? 'Close telemetry' : 'Open telemetry');
+  }
+}
+
+export function isTimingPanelDisclosureMode(toggle) {
+  if (!toggle) return false;
+  const style = getComputedStyle(toggle);
+  return style.display !== 'none' && style.visibility !== 'hidden';
+}
+
+export function syncTimingPanelDisclosureState({ toggles, targetPanel = null, isDisclosureMode = isTimingPanelDisclosureMode }) {
+  for (const toggle of [...(toggles ?? [])]) {
+    const racePanel = toggle.closest?.('.sim-canvas-panel');
+    if (targetPanel && racePanel !== targetPanel) continue;
+    const tower = racePanel?.querySelector?.('[data-timing-tower]');
+    const disclosureMode = isDisclosureMode(toggle);
+    const open = disclosureMode && Boolean(racePanel?.classList?.contains?.('is-timing-panel-open'));
+    racePanel?.classList?.toggle?.('is-timing-panel-open', open);
+    if (!disclosureMode || open) {
+      tower?.removeAttribute?.('inert');
+      tower?.setAttribute?.('aria-hidden', 'false');
+    } else {
+      tower?.setAttribute?.('inert', '');
+      tower?.setAttribute?.('aria-hidden', 'true');
+    }
+    toggle.setAttribute?.('aria-expanded', String(open));
+  }
+}

package/src/app/domBindings.js

@@ -13,7 +13,7 @@ export function resolveNodes(nodes, fallbackNode = null) {
   return resolved;
 }
 
-function queryRaceDataPanelBindings(root) {
+export function queryRaceDataPanelBindings(root) {
   const panelSelector = '[data-race-data-panel]';
   const panels = toArray(root.querySelectorAll(panelSelector));
   const fallbackPanel = panels.length ? null : root.querySelector(panelSelector);
@@ -36,11 +36,6 @@ function queryRaceDataPanelBindings(root) {
   const fallbackDismiss = first.dismiss ?? root.querySelector('[data-race-data-dismiss]');
   return {
     raceDataPanelBindings: bindings,
-    raceDataPanels,
-    raceDataKickers: bindings.map((binding) => binding.kicker).filter(Boolean),
-    raceDataTitles: bindings.map((binding) => binding.title).filter(Boolean),
-    raceDataNumbers: bindings.map((binding) => binding.number).filter(Boolean),
-    raceDataSubtitles: bindings.map((binding) => binding.subtitle).filter(Boolean),
     raceDataOpens: bindings.map((binding) => binding.open).filter(Boolean),
     raceDataDismisses: bindings.map((binding) => binding.dismiss).filter(Boolean),
     raceDataPanel: first.panel ?? null,
@@ -53,18 +48,27 @@ function queryRaceDataPanelBindings(root) {
   };
 }
 
-function queryCarOverviewFieldBindings(root) {
-  const fields = toArray(root.querySelectorAll('[data-overview-field]'));
-  return fields.map((field) => ({
-    field,
-    label: field.querySelector?.('[data-overview-field-label]') ?? null,
-    value: field.querySelector?.('[data-overview-field-value]') ?? null,
+export function queryCarOverviewBindings(root) {
+  return toArray(root.querySelectorAll('[data-paddock-component="car-driver-overview"]')).map((panel) => ({
+    carOverview: panel,
+    ...Object.fromEntries([
+      ['carOverviewTitle', '[data-car-overview-title]'], ['carOverviewDiagram', '.car-overview-diagram'],
+      ['carOverviewCode', '[data-car-overview-code]'], ['carOverviewIcon', '[data-car-overview-icon]'],
+      ['carOverviewImage', '[data-car-overview-image]'], ['carOverviewNumber', '[data-car-overview-number]'],
+      ['carOverviewCoreStat', '[data-car-overview-core-stat]'],
+    ].map(([name, selector]) => [name, panel.querySelector(selector)])),
+    carOverviewFieldBindings: toArray(panel.querySelectorAll('[data-overview-field]')).map((field) => ({
+      field, label: field.querySelector('[data-overview-field-label]'), value: field.querySelector('[data-overview-field-value]'),
+    })),
   }));
 }
 
 export function querySimulatorDom(root) {
   const raceDataBindings = queryRaceDataPanelBindings(root);
-  const carOverviewFieldBindings = queryCarOverviewFieldBindings(root);
+  const carOverviewBindings = queryCarOverviewBindings(root);
+  const carOverviewFieldBindings = carOverviewBindings[0]?.carOverviewFieldBindings ?? toArray(root.querySelectorAll('[data-overview-field]')).map((field) => ({
+    field, label: field.querySelector?.('[data-overview-field-label]') ?? null, value: field.querySelector?.('[data-overview-field-value]') ?? null,
+  }));
   const readouts = {
     timingTower: root.querySelector('[data-timing-tower]'),
     timingTowers: root.querySelectorAll('[data-timing-tower]'),
@@ -123,6 +127,7 @@ 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]'),
+    carOverviewBindings,
     carOverviewFieldBindings,
     telemetryDrawerWorkbench: root.querySelector('[data-race-telemetry-drawer]'),
     telemetryDrawer: root.querySelector('[data-telemetry-drawer]'),
@@ -141,6 +146,7 @@ export function querySimulatorDom(root) {
     canvasHost: root.querySelector('[data-track-canvas]'),
     safetyButtons: root.querySelectorAll('[data-safety-car]'),
     restartButton: root.querySelector('[data-restart-race]'),
+    restartButtons: root.querySelectorAll('[data-restart-race]'),
     openButton: raceDataBindings.raceDataOpen,
     timingList: root.querySelector('[data-timing-list]'),
     timingGapModeButtons: root.querySelectorAll('[data-timing-gap-toggle]'),
@@ -149,7 +155,9 @@ export function querySimulatorDom(root) {
     bannerMuteButtons: root.querySelectorAll('[data-race-data-banners-muted]'),
     simulationSpeedButtons: root.querySelectorAll('[data-simulation-speed]'),
     zoomInButton: root.querySelector('[data-zoom-in]'),
+    zoomInButtons: root.querySelectorAll('[data-zoom-in]'),
     zoomOutButton: root.querySelector('[data-zoom-out]'),
+    zoomOutButtons: root.querySelectorAll('[data-zoom-out]'),
     timingLists: root.querySelectorAll('[data-timing-list]'),
     readouts,
     startLightNodes: [...(readouts.startLights?.querySelectorAll('.start-lights__gantry span') ?? [])],

package/src/app/gridWalk/GridWalkController.js

@@ -0,0 +1,180 @@
+import { createGridWalkMarkup } from '../../ui/gridWalkTemplate.js';
+import { GridWalkSession } from './gridWalkSession.js';
+import { GridWalkCamera, gridWalkOrientation } from './gridWalkCamera.js';
+import { GridWalkCrew } from './gridWalkCrew.js';
+import { GridWalkNavigation } from './gridWalkNavigation.js';
+import { GridWalkControls } from './gridWalkControls.js';
+import { GridWalkLabels } from './gridWalkLabels.js';
+import { GridWalkProjectBanner } from './gridWalkProjectBanner.js';
+import { GridWalkLayout } from './gridWalkLayout.js';
+import { SimulatorViewControls } from '../controls/SimulatorViewControls.js';
+
+// Coordinates lifecycle and scene presentation. Each UI/input component owns
+// its own actions and geometry; none owns or steps the simulation.
+export class GridWalkController {
+  constructor(app) {
+    this.app = app;
+    this.session = new GridWalkSession(app.sim, app.options.gridWalk);
+    this.abort = new AbortController();
+    this.elapsed = 0;
+    this.lastTime = performance.now();
+    this.panel = app.canvasHost.closest('.sim-canvas-panel');
+    const wrapper = app.canvasHost.ownerDocument.createElement('div');
+    const cars = this.session.snapshot.cars;
+    wrapper.innerHTML = createGridWalkMarkup(app.drivers, cars, app.options.ui);
+    this.element = wrapper.firstElementChild;
+    const select = (id) => app.selectCar(id, { focus: true });
+    const { signal } = this.abort;
+    this.viewControls = new SimulatorViewControls(app.root, (view) => this.setView(view), signal);
+    this.controls = new GridWalkControls(this.element, {
+      onSelect: select, onMove: (direction) => this.move(direction),
+    }, signal);
+    this.labels = new GridWalkLabels(this.element, cars, select, signal);
+    this.banner = new GridWalkProjectBanner(this.element, () => this.closeProjectBanner(), signal);
+    this.camera = new GridWalkCamera(cars);
+    this.layout = new GridWalkLayout({ element: this.element, panel: this.panel, canvasHost: app.canvasHost, root: app.root });
+    this.navigation = new GridWalkNavigation({ host: app.canvasHost, surface: this.panel,
+      isEnabled: () => this.active && !this.session.clearing,
+      getOrientation: () => this.orientation,
+      onPan: (delta) => {
+        if (!this.camera.pan(delta)) return false;
+        this.render();
+        return true;
+      },
+      onHome: () => { this.camera.focus(app.selectedId); this.render(); }, onSelect: select,
+    }, signal);
+    this.media = globalThis.matchMedia?.('(prefers-reduced-motion: reduce)');
+    this.media?.addEventListener('change', () => {
+      this.session.advance(0, this.motion);
+      this.sync();
+    }, { signal });
+    this.crew = new GridWalkCrew(app.worldLayer, cars);
+    this.panel.appendChild(this.element);
+  }
+
+  get active() { return this.session.active; }
+  get motion() { return this.app.options.gridWalk.ambientMotion && !this.media?.matches; }
+  get needsAnimation() { return this.active && this.motion; }
+
+  setView(view) {
+    if (!this.session.setView(view, this.motion)) return false;
+    this.navigation.cancel();
+    // Preserve the fixed-step remainder; only discard time spent browsing.
+    this.app.lastTime = this.lastTime = performance.now();
+    if (view === 'race' && this.element.contains(this.element.ownerDocument.activeElement) && !this.viewControls.focusRace()) {
+      this.app.canvasHost.querySelector('canvas').focus({ preventScroll: true });
+    }
+    this.sync();
+    return true;
+  }
+
+  select(id, { focus = false } = {}) {
+    if (!this.active || this.session.clearing || !this.app.driverById.has(id)) return;
+    // A visible car stays where it was clicked. The selector can bring an
+    // offscreen entry into view without resetting the camera on every click.
+    if (!this.labels.isVisible(id)) this.camera.focus(id);
+    this.banner.open = true;
+    this.sync();
+    if (focus) {
+      if (!this.banner.element.hidden) this.banner.focus();
+      else this.labels.focus(id, this.controls.jump);
+    }
+  }
+
+  closeProjectBanner() {
+    this.banner.open = false;
+    this.sync();
+    this.labels.focus(this.app.selectedId, this.controls.jump);
+  }
+
+  move(direction) {
+    const cars = this.session.snapshot.cars;
+    const index = cars.findIndex((car) => car.id === this.app.selectedId);
+    this.app.selectCar(cars[(index + direction + cars.length) % cars.length].id, { focus: true });
+  }
+
+  sync({ updateTicker = true } = {}) {
+    const { app, session } = this;
+    this.navigation.sync();
+    this.panel.dataset.gridWalkActive = String(this.active);
+    this.element.dataset.view = session.view;
+    this.controls.update(session, app.selectedId);
+    this.viewControls.update(session.view, app.options.ui.viewControls);
+    this.element.querySelector('[data-grid-labels]').hidden = !this.active || session.clearing;
+    this.banner.update({ active: this.active, clearing: session.clearing,
+      enabled: app.isRaceDataBannerEnabled('project'), car: session.snapshot.cars.find((car) => car.id === app.selectedId),
+      drivers: app.drivers, options: app.options, presentation: app.driverById.get(app.selectedId).presentation });
+    for (const layer of [app.trailLayer, app.sensorLayer, app.pitLaneStatusLayer]) if (layer) layer.visible = !this.active;
+    this.syncLayout();
+    if (!this.active) app.syncTimingPanelDisclosureState();
+    if (this.active) this.render();
+    else {
+      this.crew.container.visible = false;
+      app.syncRendererToCurrentLayout({ render: true });
+    }
+    if (updateTicker) app.syncRuntimeTicker();
+  }
+
+  syncLayout() { this.layout.update(this.active); }
+
+  applyCamera() {
+    const { app } = this;
+    this.syncLayout();
+    const width = app.canvasHost.clientWidth;
+    const height = app.canvasHost.clientHeight;
+    if (!(width > 0 && height > 0)) return;
+    const orientation = gridWalkOrientation(width, height, this.orientation);
+    if (this.orientation && orientation !== this.orientation) this.navigation.cancel();
+    this.orientation = orientation;
+    this.element.dataset.orientation = this.orientation;
+    this.element.dataset.compactControls = String(width < 600 && height < 420);
+    const area = this.layout.measure(this.banner.measure(width, height));
+    this.element.dataset.compactLabels = String(area.bottom - area.top < 164);
+    this.frame = this.camera.update({ selectedId: app.selectedId, width, height, orientation: this.orientation, area });
+    this.crew.updateCamera(this.frame, width, height);
+    app.worldLayer.rotation = this.frame.rotation;
+    app.worldLayer.scale.set(this.frame.scale);
+    app.worldLayer.position.set(this.frame.x, this.frame.y);
+    this.labels.update(this.frame, app.selectedId, this.controls.jump);
+  }
+
+  render() {
+    const { app, session } = this;
+    const screen = app.app?.renderer?.screen;
+    if (!screen || screen.width !== Math.max(1, Math.round(app.canvasHost.clientWidth)) ||
+      screen.height !== Math.max(1, Math.round(app.canvasHost.clientHeight))) app.resizeRendererToCanvasHost();
+    this.applyCamera();
+    app.renderCars(session.snapshot);
+    this.crew.render({ active: this.active, motion: this.motion, elapsed: this.elapsed,
+      clearing: session.clearing, clearProgress: Math.min(1, session.clearElapsed / 650) });
+    app.app?.render?.();
+  }
+
+  tick(now) {
+    if (!this.active) return false;
+    const elapsed = Math.max(0, Math.min(now - this.lastTime, 100));
+    this.lastTime = now;
+    this.elapsed += elapsed;
+    const wasClearing = this.session.clearing;
+    this.session.advance(elapsed, this.motion);
+    if (wasClearing && !this.session.clearing) this.sync();
+    if (!this.active) return false;
+    // A busy browser can defer the media callback; stop on this frame too.
+    if (!this.motion) this.app.syncRuntimeTicker();
+    this.crew.render({ active: true, motion: this.motion, elapsed: this.elapsed,
+      clearing: this.session.clearing, clearProgress: Math.min(1, this.session.clearElapsed / 650) });
+    return true;
+  }
+
+  destroy() {
+    this.navigation.destroy();
+    this.viewControls.destroy();
+    this.abort.abort();
+    try { this.crew.destroy(); } finally {
+      this.layout.destroy();
+      this.element.remove();
+      delete this.panel.dataset.gridWalkActive;
+      for (const layer of [this.app.trailLayer, this.app.sensorLayer, this.app.pitLaneStatusLayer]) if (layer) layer.visible = true;
+    }
+  }
+}