@inventure71/paddockjs 2.0.1 → 3.0.0

package/src/app/camera/cameraController.js

@@ -1,7 +1,8 @@
 import { WORLD } from '../../simulation/trackModel.js';
-import { clamp } from '../../simulation/simMath.js';
+import { clamp, normalizeAngle } from '../../simulation/simMath.js';
 import {
   CAMERA_PRESETS,
+  CAMERA_ROTATION_LERP,
   CAMERA_SCALE_LERP,
   CAMERA_TARGET_LERP,
   CAMERA_ZOOM_STEP,
@@ -27,16 +28,47 @@ export function createCameraState(initialCameraMode) {
     initialized: false,
     x: WORLD.width / 2,
     y: WORLD.height / 2,
+    rotation: 0,
     free: false,
     freeTarget: null,
   };
 }
 
+function timingTowerCandidates(readouts) {
+  const nodes = [];
+  readouts?.timingTowers?.forEach?.((node) => {
+    if (node && !nodes.includes(node)) nodes.push(node);
+  });
+  if (readouts?.timingTower && !nodes.includes(readouts.timingTower)) {
+    nodes.push(readouts.timingTower);
+  }
+  return nodes;
+}
+
+function timingTowerFrameForCanvas(readouts, canvasRect, canvasWidth) {
+  for (const timingTower of timingTowerCandidates(readouts)) {
+    const towerRect = timingTower?.getBoundingClientRect?.();
+    if (!towerRect) continue;
+    const overlapsCanvasHorizontally = towerRect.right > canvasRect.left && towerRect.left < canvasRect.right;
+    const hasVerticalBounds = Number.isFinite(canvasRect.top) &&
+      Number.isFinite(canvasRect.bottom) &&
+      Number.isFinite(towerRect.top) &&
+      Number.isFinite(towerRect.bottom);
+    const overlapsCanvasVertically = !hasVerticalBounds ||
+      (towerRect.bottom > canvasRect.top && towerRect.top < canvasRect.bottom);
+    const towerWidth = Math.max(0, towerRect.right - towerRect.left);
+    const isSideGutter = towerWidth < canvasWidth * 0.6;
+    if (overlapsCanvasHorizontally && overlapsCanvasVertically && isSideGutter) return towerRect;
+  }
+  return null;
+}
+
 export class CameraController {
-  constructor({ canvasHost, readouts, initialMode }) {
+  constructor({ canvasHost, readouts, initialMode, driverCamera = false }) {
     this.canvasHost = canvasHost;
     this.readouts = readouts;
     this.camera = createCameraState(initialMode);
+    this.driverCamera = Boolean(driverCamera);
     this.safeAreaCache = null;
     this.pitBoundsCache = null;
     this.trackBoundsCache = null;
@@ -72,23 +104,14 @@ export class CameraController {
     }
 
     const canvasRect = this.canvasHost?.getBoundingClientRect?.();
-    const towerRect = this.readouts?.timingTower?.getBoundingClientRect?.();
-    if (!canvasRect || !towerRect) {
+    if (!canvasRect) {
       const safeArea = { left: 0, width };
       this.safeAreaCache = { width, safeArea };
       return safeArea;
     }
-    const overlapsCanvasHorizontally = towerRect.right > canvasRect.left && towerRect.left < canvasRect.right;
-    const hasVerticalBounds = Number.isFinite(canvasRect.top) &&
-      Number.isFinite(canvasRect.bottom) &&
-      Number.isFinite(towerRect.top) &&
-      Number.isFinite(towerRect.bottom);
-    const overlapsCanvasVertically = !hasVerticalBounds ||
-      (towerRect.bottom > canvasRect.top && towerRect.top < canvasRect.bottom);
     const canvasWidth = Math.max(1, canvasRect.right - canvasRect.left || width);
-    const towerWidth = Math.max(0, towerRect.right - towerRect.left);
-    const isSideGutter = towerWidth < canvasWidth * 0.6;
-    if (!overlapsCanvasHorizontally || !overlapsCanvasVertically || !isSideGutter) {
+    const towerRect = timingTowerFrameForCanvas(this.readouts, canvasRect, canvasWidth);
+    if (!towerRect) {
       const safeArea = { left: 0, width };
       this.safeAreaCache = { width, safeArea };
       return safeArea;
@@ -149,12 +172,16 @@ export class CameraController {
   }
 
   isModeAvailable(mode, snapshot) {
-    return mode !== 'pit' || this.hasPitCamera(snapshot);
+    if (!Object.hasOwn(CAMERA_PRESETS, mode)) return false;
+    if (mode === 'pit') return this.hasPitCamera(snapshot);
+    if (mode === 'driver') return this.driverCamera && Boolean(this.getFollowTarget(snapshot));
+    return true;
   }
 
   getFrame(snapshot, width, height, baseScale, safeArea = { left: 0, width }, selectedId = null) {
+    const activeSnapshot = snapshot ?? {};
     const screenCenterX = safeArea.left + safeArea.width / 2;
-    const trackBounds = this.getTrackBounds(snapshot.track);
+    const trackBounds = this.getTrackBounds(activeSnapshot.track);
     const trackFitScale = this.getBoundsFitScale(trackBounds, height, safeArea);
 
     if (this.camera.mode === 'overview') {
@@ -179,7 +206,7 @@ export class CameraController {
 
     if (this.camera.mode === 'show-all') {
       return this.applyFreeFrame(getShowAllCameraFrame({
-        cars: snapshot.cars,
+        cars: activeSnapshot.cars ?? [],
         cameraZoom: this.camera.zoom,
         height,
         safeArea,
@@ -188,17 +215,29 @@ export class CameraController {
       }));
     }
 
-    if (this.camera.mode === 'pit' && this.hasPitCamera(snapshot)) {
+    if (this.camera.mode === 'pit' && this.hasPitCamera(activeSnapshot)) {
       return this.applyFreeFrame(
-        this.getPitFrame(snapshot.track.pitLane, height, baseScale, safeArea, screenCenterX, trackFitScale),
+        this.getPitFrame(activeSnapshot.track.pitLane, height, baseScale, safeArea, screenCenterX, trackFitScale),
       );
     }
 
+    if (this.camera.mode === 'driver' && this.driverCamera) {
+      const target = this.getFollowTarget(activeSnapshot, selectedId);
+      return this.applyFreeFrame({
+        target,
+        scale: clampCameraScale(baseScale * this.camera.zoom, baseScale, trackFitScale),
+        screenX: screenCenterX,
+        screenY: height * 0.68,
+        rotation: Number.isFinite(target?.heading) ? normalizeAngle(-Math.PI / 2 - target.heading) : 0,
+      });
+    }
+
     return this.applyFreeFrame({
-      target: this.getTarget(snapshot, selectedId),
+      target: this.getTarget(activeSnapshot, selectedId),
       scale: clampCameraScale(baseScale * this.camera.zoom, baseScale, trackFitScale),
       screenX: screenCenterX,
       screenY: height / 2,
+      rotation: 0,
     });
   }
 
@@ -211,19 +250,27 @@ export class CameraController {
   }
 
   getTarget(snapshot, selectedId = null) {
+    const activeSnapshot = snapshot ?? {};
     if (this.camera.free && this.camera.freeTarget) return this.camera.freeTarget;
-    if (this.camera.mode === 'overview') return this.getTrackTarget(snapshot.track);
+    if (this.camera.mode === 'overview') return this.getTrackTarget(activeSnapshot.track);
 
-    if (this.camera.mode === 'pit' && this.hasPitCamera(snapshot)) {
-      return this.getPitTarget(snapshot.track.pitLane);
+    if (this.camera.mode === 'pit' && this.hasPitCamera(activeSnapshot)) {
+      return this.getPitTarget(activeSnapshot.track.pitLane);
     }
 
-    if (this.camera.mode === 'selected') {
-      const selected = snapshot.cars.find((car) => car.id === selectedId);
-      if (selected) return selected;
+    if (this.camera.mode === 'selected' || this.camera.mode === 'driver') {
+      return this.getFollowTarget(activeSnapshot, selectedId);
     }
 
-    const leader = snapshot.cars[0];
+    return this.getFollowTarget(activeSnapshot);
+  }
+
+  getFollowTarget(snapshot, selectedId = null) {
+    if (selectedId != null) {
+      const selected = snapshot?.cars?.find((car) => car.id === selectedId);
+      if (selected) return selected;
+    }
+    const leader = snapshot?.cars?.[0];
     return leader ? { x: leader.x, y: leader.y } : { x: WORLD.width / 2, y: WORLD.height / 2 };
   }
 
@@ -244,6 +291,7 @@ export class CameraController {
     const frame = this.getFrame(snapshot, width, height, baseScale, safeArea, selectedId);
     const scale = frame.scale;
     const target = frame.target;
+    const targetRotation = Number.isFinite(frame.rotation) ? frame.rotation : 0;
     const snapCamera = immediate || !this.camera.initialized;
     this.camera.x = snapCamera
       ? target.x
@@ -254,12 +302,21 @@ export class CameraController {
     const activeScale = snapCamera || this.camera.scale === null
       ? scale
       : this.camera.scale + (scale - this.camera.scale) * CAMERA_SCALE_LERP;
+    const activeRotation = snapCamera
+      ? targetRotation
+      : this.camera.rotation + normalizeAngle(targetRotation - this.camera.rotation) * CAMERA_ROTATION_LERP;
     this.camera.initialized = true;
     this.camera.scale = activeScale;
+    this.camera.rotation = activeRotation;
     worldLayer.scale.set(activeScale);
+    worldLayer.rotation = activeRotation;
+    const cos = Math.cos(activeRotation);
+    const sin = Math.sin(activeRotation);
+    const transformedX = this.camera.x * cos - this.camera.y * sin;
+    const transformedY = this.camera.x * sin + this.camera.y * cos;
     worldLayer.position.set(
-      frame.screenX - this.camera.x * activeScale,
-      frame.screenY - this.camera.y * activeScale,
+      frame.screenX - transformedX * activeScale,
+      frame.screenY - transformedY * activeScale,
     );
   }
 }

package/src/app/camera/cameraGeometry.js

@@ -74,7 +74,18 @@ export function getTrackCameraTarget(trackBounds) {
 }
 
 export function getShowAllCameraFrame({ cars, cameraZoom, height, safeArea, screenCenterX, trackFitScale }) {
-  const bounds = cars.reduce((box, car) => ({
+  const safeCars = Array.isArray(cars) ? cars : [];
+  if (safeCars.length === 0) {
+    const fallbackScale = clampCameraScale(trackFitScale ?? 1, trackFitScale ?? 1, trackFitScale);
+    return {
+      target: { x: WORLD.width / 2, y: WORLD.height / 2 },
+      scale: fallbackScale,
+      screenX: screenCenterX,
+      screenY: height / 2,
+    };
+  }
+
+  const bounds = safeCars.reduce((box, car) => ({
     minX: Math.min(box.minX, car.x),
     minY: Math.min(box.minY, car.y),
     maxX: Math.max(box.maxX, car.x),

package/src/app/domBindings.js

@@ -1,15 +1,90 @@
+function toArray(nodes) {
+  return [...(nodes ?? [])];
+}
+
+export function resolveNodes(nodes, fallbackNode = null) {
+  const resolved = [];
+  if (typeof nodes?.forEach === 'function') {
+    nodes.forEach((node) => {
+      if (node && !resolved.includes(node)) resolved.push(node);
+    });
+  }
+  if (resolved.length === 0 && fallbackNode) resolved.push(fallbackNode);
+  return resolved;
+}
+
+function queryRaceDataPanelBindings(root) {
+  const panelSelector = '[data-race-data-panel]';
+  const panels = toArray(root.querySelectorAll(panelSelector));
+  const fallbackPanel = panels.length ? null : root.querySelector(panelSelector);
+  const raceDataPanels = panels.length ? panels : (fallbackPanel ? [fallbackPanel] : []);
+
+  const findInPanel = (panel, selector) => panel?.querySelector?.(selector) ?? null;
+  const findFallback = (panel, selector) => findInPanel(panel, selector) ?? root.querySelector(selector);
+  const bindings = raceDataPanels.map((panel) => ({
+    panel,
+    kicker: findFallback(panel, '[data-race-data-kicker]'),
+    title: findFallback(panel, '[data-race-data-title]'),
+    number: findFallback(panel, '[data-race-data-number]'),
+    subtitle: findFallback(panel, '[data-race-data-subtitle]'),
+    open: findFallback(panel, '[data-race-data-open]'),
+    dismiss: findFallback(panel, '[data-race-data-dismiss]'),
+  }));
+
+  const first = bindings[0] ?? {};
+  const fallbackOpen = first.open ?? root.querySelector('[data-race-data-open]');
+  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,
+    raceDataKicker: first.kicker ?? null,
+    raceDataTitle: first.title ?? null,
+    raceDataNumber: first.number ?? null,
+    raceDataSubtitle: first.subtitle ?? null,
+    raceDataOpen: fallbackOpen ?? null,
+    raceDataDismiss: fallbackDismiss ?? null,
+  };
+}
+
+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 querySimulatorDom(root) {
+  const raceDataBindings = queryRaceDataPanelBindings(root);
+  const carOverviewFieldBindings = queryCarOverviewFieldBindings(root);
   const readouts = {
     timingTower: root.querySelector('[data-timing-tower]'),
+    timingTowers: root.querySelectorAll('[data-timing-tower]'),
+    timingPanelToggle: root.querySelector('[data-timing-panel-toggle]'),
+    timingPanelToggles: root.querySelectorAll('[data-timing-panel-toggle]'),
     mode: root.querySelector('[data-race-mode]'),
     startLights: root.querySelector('[data-start-lights]'),
     startLightsLabel: root.querySelector('[data-start-lights-label]'),
     towerLap: root.querySelector('[data-tower-lap-readout]'),
+    towerLaps: root.querySelectorAll('[data-tower-lap-readout]'),
     towerTotalLaps: root.querySelector('[data-tower-total-laps]'),
+    towerTotalLapsAll: root.querySelectorAll('[data-tower-total-laps]'),
     towerRaceControlBanner: root.querySelector('[data-tower-race-control-banner]'),
+    towerRaceControlBanners: root.querySelectorAll('[data-tower-race-control-banner]'),
     towerRaceControlKicker: root.querySelector('[data-tower-race-control-kicker]'),
+    towerRaceControlKickers: root.querySelectorAll('[data-tower-race-control-kicker]'),
     towerRaceControlTitle: root.querySelector('[data-tower-race-control-title]'),
+    towerRaceControlTitles: root.querySelectorAll('[data-tower-race-control-title]'),
     timingGapLabel: root.querySelector('[data-timing-gap-label]'),
+    timingGapLabels: root.querySelectorAll('[data-timing-gap-label]'),
     lap: root.querySelector('[data-lap-readout]'),
     drs: root.querySelector('[data-drs-readout]'),
     contacts: root.querySelector('[data-contact-readout]'),
@@ -48,6 +123,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]'),
+    carOverviewFieldBindings,
     telemetryDrawerWorkbench: root.querySelector('[data-race-telemetry-drawer]'),
     telemetryDrawer: root.querySelector('[data-telemetry-drawer]'),
     telemetryDrawerToggle: root.querySelector('[data-telemetry-drawer-toggle]'),
@@ -55,13 +131,7 @@ export function querySimulatorDom(root) {
     stewardMessageKicker: root.querySelector('[data-steward-message-kicker]'),
     stewardMessageTitle: root.querySelector('[data-steward-message-title]'),
     stewardMessageDetail: root.querySelector('[data-steward-message-detail]'),
-    raceDataPanel: root.querySelector('[data-race-data-panel]'),
-    raceDataKicker: root.querySelector('[data-race-data-kicker]'),
-    raceDataTitle: root.querySelector('[data-race-data-title]'),
-    raceDataNumber: root.querySelector('[data-race-data-number]'),
-    raceDataSubtitle: root.querySelector('[data-race-data-subtitle]'),
-    raceDataOpen: root.querySelector('[data-race-data-open]'),
-    raceDataDismiss: root.querySelector('[data-race-data-dismiss]'),
+    ...raceDataBindings,
     finishPanel: root.querySelector('[data-race-finish-panel]'),
     finishWinner: root.querySelector('[data-race-finish-winner]'),
     finishClassification: root.querySelector('[data-race-finish-classification]'),
@@ -71,15 +141,16 @@ export function querySimulatorDom(root) {
     canvasHost: root.querySelector('[data-track-canvas]'),
     safetyButtons: root.querySelectorAll('[data-safety-car]'),
     restartButton: root.querySelector('[data-restart-race]'),
-    openButton: root.querySelector('[data-race-data-open]'),
+    openButton: raceDataBindings.raceDataOpen,
     timingList: root.querySelector('[data-timing-list]'),
-    timingGapModeButtons: root.querySelectorAll('[data-timing-gap-mode]'),
+    timingGapModeButtons: root.querySelectorAll('[data-timing-gap-toggle]'),
     cameraButtons: root.querySelectorAll('[data-camera-mode]'),
     overviewModeButtons: root.querySelectorAll('[data-overview-mode]'),
     bannerMuteButtons: root.querySelectorAll('[data-race-data-banners-muted]'),
     simulationSpeedButtons: root.querySelectorAll('[data-simulation-speed]'),
     zoomInButton: root.querySelector('[data-zoom-in]'),
     zoomOutButton: root.querySelector('[data-zoom-out]'),
+    timingLists: root.querySelectorAll('[data-timing-list]'),
     readouts,
     startLightNodes: [...(readouts.startLights?.querySelectorAll('.start-lights__gantry span') ?? [])],
   };
@@ -91,6 +162,15 @@ export function setText(node, value) {
   if (node.textContent !== nextValue) node.textContent = nextValue;
 }
 
+export function setStyleProperty(node, name, value) {
+  if (!node?.style?.setProperty) return;
+  const nextValue = String(value ?? '');
+  const currentValue = typeof node.style.getPropertyValue === 'function'
+    ? node.style.getPropertyValue(name)
+    : null;
+  if (currentValue !== nextValue) node.style.setProperty(name, nextValue);
+}
+
 export function setTextAll(nodes, value) {
   if (!nodes) return;
   if (typeof nodes.forEach === 'function') {

package/src/app/layoutScheduler.js

@@ -0,0 +1,27 @@
+export function createRafScheduler(sync) {
+  let frame = null;
+
+  const run = () => {
+    frame = null;
+    sync();
+  };
+
+  return {
+    runNow: sync,
+    queue() {
+      if (frame !== null) return;
+      if (typeof requestAnimationFrame !== 'function') {
+        sync();
+        return;
+      }
+      frame = requestAnimationFrame(run);
+    },
+    cancel() {
+      if (frame === null) return;
+      if (typeof cancelAnimationFrame === 'function') {
+        cancelAnimationFrame(frame);
+      }
+      frame = null;
+    },
+  };
+}

package/src/app/layoutSupport.js

@@ -0,0 +1,165 @@
+import { createRafScheduler } from './layoutScheduler.js';
+
+export const PADDOCK_MIN_SUPPORTED_INLINE_SIZE = 320;
+
+const MIN_INLINE_SIZE_BY_COMPONENT = {
+  'race-controls': 260,
+  'camera-controls': 160,
+  'safety-car-control': 44,
+  'timing-tower': 255,
+  'race-canvas': 180,
+  'race-telemetry-drawer': 280,
+  'telemetry-stack': 260,
+  'telemetry-core': 260,
+  'telemetry-sectors': 240,
+  'telemetry-lap-times': 240,
+  'telemetry-sector-times': 240,
+  'telemetry-sector-banner': 240,
+  'car-driver-overview': 260,
+  'race-data-panel': 260,
+  'steward-message': 240,
+};
+
+const MIN_BLOCK_SIZE_BY_COMPONENT = {
+  'race-controls': 88,
+  'camera-controls': 56,
+  'safety-car-control': 44,
+  'timing-tower': 220,
+  'race-canvas': 180,
+  'race-telemetry-drawer': 340,
+  'telemetry-stack': 180,
+  'telemetry-core': 150,
+  'telemetry-sectors': 96,
+  'telemetry-lap-times': 120,
+  'telemetry-sector-times': 140,
+  'telemetry-sector-banner': 88,
+  'car-driver-overview': 180,
+  'race-data-panel': 88,
+  'steward-message': 64,
+};
+
+function componentMinimumInlineSize(element) {
+  if (element.hasAttribute('data-f1-simulator-shell')) return PADDOCK_MIN_SUPPORTED_INLINE_SIZE;
+  const componentName = element.getAttribute('data-paddock-component');
+  if (componentName && MIN_INLINE_SIZE_BY_COMPONENT[componentName]) {
+    return MIN_INLINE_SIZE_BY_COMPONENT[componentName];
+  }
+  return PADDOCK_MIN_SUPPORTED_INLINE_SIZE;
+}
+
+function componentMinimumBlockSize(element) {
+  const componentName = element.getAttribute('data-paddock-component');
+  if (componentName && MIN_BLOCK_SIZE_BY_COMPONENT[componentName]) {
+    return MIN_BLOCK_SIZE_BY_COMPONENT[componentName];
+  }
+  return element.hasAttribute('data-f1-simulator-shell') ? 360 : 0;
+}
+
+function isRendered(element) {
+  if (
+    element.hidden ||
+    element.getAttribute('aria-hidden') === 'true' ||
+    element.classList?.contains('is-hidden')
+  ) {
+    return false;
+  }
+  const rect = element.getBoundingClientRect();
+  const style = getComputedStyle(element);
+  return rect.width > 0 &&
+    rect.height > 0 &&
+    style.display !== 'none' &&
+    style.visibility !== 'hidden';
+}
+
+function clearElementSupportState(element) {
+  if (element.dataset.paddockSizeUnsupported !== 'false') {
+    element.dataset.paddockSizeUnsupported = 'false';
+  }
+  delete element.dataset.paddockSizeUnsupportedReason;
+}
+
+function syncElementSupportState(element) {
+  if (!isRendered(element)) {
+    clearElementSupportState(element);
+    return;
+  }
+  const rect = element.getBoundingClientRect();
+  const minInlineSize = componentMinimumInlineSize(element);
+  const minBlockSize = componentMinimumBlockSize(element);
+  const inlineUnsupported = rect.width < minInlineSize;
+  const blockUnsupported = minBlockSize > 0 && rect.height < minBlockSize;
+  const unsupported = inlineUnsupported || blockUnsupported;
+  const unsupportedValue = unsupported ? 'true' : 'false';
+  if (element.dataset.paddockSizeUnsupported !== unsupportedValue) {
+    element.dataset.paddockSizeUnsupported = unsupportedValue;
+  }
+  if (inlineUnsupported) {
+    if (element.dataset.paddockSizeUnsupportedReason !== 'inline') {
+      element.dataset.paddockSizeUnsupportedReason = 'inline';
+    }
+  } else if (blockUnsupported) {
+    if (element.dataset.paddockSizeUnsupportedReason !== 'block') {
+      element.dataset.paddockSizeUnsupportedReason = 'block';
+    }
+  } else {
+    delete element.dataset.paddockSizeUnsupportedReason;
+  }
+}
+
+function layoutSupportElements(root) {
+  const queryRoot = root?.children ? root : null;
+  if (!queryRoot) return [];
+  const elements = [];
+  if (root.matches?.('[data-f1-simulator-shell], [data-paddock-component]')) {
+    elements.push(root);
+  } else {
+    elements.push(
+      ...[...queryRoot.children].filter((element) => (
+        element.matches?.('[data-f1-simulator-shell], [data-paddock-component]')
+      )),
+    );
+  }
+  return [...new Set(elements)];
+}
+
+export function installLayoutSupport(root) {
+  const elements = layoutSupportElements(root);
+  const syncElements = () => elements.forEach(syncElementSupportState);
+  const scheduler = createRafScheduler(syncElements);
+  scheduler.runNow();
+
+  if (typeof ResizeObserver !== 'function') {
+    return () => {};
+  }
+
+  const observer = new ResizeObserver((entries) => {
+    if (typeof requestAnimationFrame !== 'function') {
+      entries.forEach((entry) => syncElementSupportState(entry.target));
+      return;
+    }
+    scheduler.queue();
+  });
+  elements.forEach((element) => observer.observe(element));
+
+  const mutationObserver = typeof MutationObserver === 'function'
+    ? new MutationObserver(scheduler.queue)
+    : null;
+  elements.forEach((element) => {
+    mutationObserver?.observe(element, {
+      attributes: true,
+      attributeFilter: ['aria-hidden', 'class', 'hidden', 'style'],
+      childList: true,
+      subtree: true,
+    });
+  });
+
+  if (typeof requestAnimationFrame === 'function') {
+    scheduler.queue();
+  }
+
+  return () => {
+    observer.disconnect();
+    mutationObserver?.disconnect();
+    scheduler.cancel();
+  };
+}