@atlaskit/react-ufo 5.2.9 → 5.3.0

package/dist/esm/vc/vc-observer-new/metric-calculator/utils/detect-layout-shift-cause.js

@@ -0,0 +1,158 @@
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+var calculateOffenderState = function calculateOffenderState(current, matchesCurrentEntry) {
+  // Once we know it's mixed across entries, we can short-circuit.
+  if (current === 'some') {
+    return 'some';
+  }
+  var entryState = matchesCurrentEntry ? 'all' : 'none';
+  if (current == null) {
+    return entryState;
+  }
+
+  // If the state flips between entries (all <-> none), it's "some".
+  if (current !== entryState) {
+    return 'some';
+  }
+  return current;
+};
+var calculateLayoutShiftMovement = function calculateLayoutShiftMovement(layoutShiftEntries) {
+  var movements = layoutShiftEntries.map(function (lsEntry) {
+    var rect = lsEntry.rect;
+    var previousRect = lsEntry.previousRect;
+    if (!rect || !previousRect) {
+      return null;
+    }
+    var dx = rect.x - previousRect.x;
+    var dy = rect.y - previousRect.y;
+    return {
+      dx: dx,
+      dy: dy,
+      movedX: dx !== 0,
+      movedY: dy !== 0,
+      dirX: Math.sign(dx),
+      dirY: Math.sign(dy),
+      absDx: Math.abs(dx),
+      absDy: Math.abs(dy)
+    };
+  });
+  var hasMovement = function hasMovement(m) {
+    return m !== null;
+  };
+  var validMovements = movements.filter(hasMovement);
+  var allHaveRects = layoutShiftEntries.length > 0 && validMovements.length === layoutShiftEntries.length;
+  if (!allHaveRects) {
+    return {
+      allHaveRects: allHaveRects,
+      allMovedSameWay: false,
+      allMovedSameAmount: false
+    };
+  }
+  var first = validMovements[0];
+  var allMovedSameWay = validMovements.every(function (m) {
+    return m.movedX === first.movedX && m.movedY === first.movedY && m.dirX === first.dirX && m.dirY === first.dirY;
+  });
+  var allMovedSameAmount = allMovedSameWay && validMovements.every(function (m) {
+    return m.absDx === first.absDx && m.absDy === first.absDy;
+  });
+  return {
+    allHaveRects: allHaveRects,
+    allMovedSameWay: allMovedSameWay,
+    allMovedSameAmount: allMovedSameAmount,
+    deltaX: first.dx,
+    deltaY: first.dy
+  };
+};
+export var detectLayoutShiftCause = function detectLayoutShiftCause(_ref) {
+  var viewportEntries = _ref.viewportEntries,
+    layoutShiftEntries = _ref.layoutShiftEntries,
+    time = _ref.time,
+    startTime = _ref.startTime,
+    _ref$offenderWindowMs = _ref.offenderWindowMs,
+    offenderWindowMs = _ref$offenderWindowMs === void 0 ? 250 : _ref$offenderWindowMs;
+  var checkpointTimestamp = startTime + time;
+  var filteredLSPotentialOffenders = viewportEntries.filter(function (viewportEntry) {
+    return (viewportEntry.time < checkpointTimestamp && viewportEntry.time > checkpointTimestamp - offenderWindowMs || viewportEntry.time > checkpointTimestamp && viewportEntry.time < checkpointTimestamp + offenderWindowMs) && viewportEntry.data.type !== 'layout-shift';
+  });
+
+  // Summarize whether all layout-shift entries moved in a consistent direction and by the same amount.
+  var layoutShiftVariables = calculateLayoutShiftMovement(layoutShiftEntries);
+
+  // Classify each offender against *all* layout-shift entries when the layout shift is consistently moving in a
+  // single axis (pure X or pure Y) so we can reason about whether an offender could have caused the movement.
+  var layoutShiftOffenders = filteredLSPotentialOffenders.reduce(function (acc, offender) {
+    var _offenderData$origina;
+    var offenderData = offender.data;
+    var offenderRect = offenderData.rect;
+    if (!offenderRect) {
+      return acc;
+    }
+    var offenderTimestamp = (_offenderData$origina = offenderData.originalMutationTimestamp) !== null && _offenderData$origina !== void 0 ? _offenderData$origina : offender.time;
+    var happenedBefore = offenderTimestamp <= checkpointTimestamp;
+    var offenderLeft = offenderRect.x;
+    var offenderRight = offenderRect.x + offenderRect.width;
+    var offenderTop = offenderRect.y;
+    var offenderBottom = offenderRect.y + offenderRect.height;
+    var shouldClassifyAgainstAllEntries = layoutShiftVariables.allMovedSameWay && 'deltaX' in layoutShiftVariables && 'deltaY' in layoutShiftVariables && layoutShiftVariables.deltaX === 0 !== (layoutShiftVariables.deltaY === 0);
+    var isAbove = null;
+    var isLeft = null;
+    var isRight = null;
+    var hasHorizontalOverlap = null;
+    var hasVerticalOverlap = null;
+    if (shouldClassifyAgainstAllEntries) {
+      var _iterator = _createForOfIteratorHelper(layoutShiftEntries),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var lsEntry = _step.value;
+          var lsRect = lsEntry.rect;
+          if (!lsRect) {
+            continue;
+          }
+          var lsLeft = lsRect.x;
+          var lsRight = lsRect.x + lsRect.width;
+          var lsTop = lsRect.y;
+          var lsBottom = lsRect.y + lsRect.height;
+          isAbove = calculateOffenderState(isAbove, offenderBottom <= lsTop);
+          isLeft = calculateOffenderState(isLeft, offenderRight <= lsLeft);
+          isRight = calculateOffenderState(isRight, offenderLeft >= lsRight);
+          hasHorizontalOverlap = calculateOffenderState(hasHorizontalOverlap, offenderLeft < lsRight && offenderRight > lsLeft);
+          hasVerticalOverlap = calculateOffenderState(hasVerticalOverlap, offenderTop < lsBottom && offenderBottom > lsTop);
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+    }
+    var matchesLayoutShiftDelta = false;
+    if (shouldClassifyAgainstAllEntries && layoutShiftVariables.allMovedSameAmount && offenderData.previousRect) {
+      var dx = offenderRect.x - offenderData.previousRect.x;
+      var dy = offenderRect.y - offenderData.previousRect.y;
+      var isPureX = layoutShiftVariables.deltaX !== 0 && layoutShiftVariables.deltaY === 0;
+      var isPureY = layoutShiftVariables.deltaY !== 0 && layoutShiftVariables.deltaX === 0;
+      if (isPureX) {
+        matchesLayoutShiftDelta = dx === layoutShiftVariables.deltaX && dy === 0;
+      } else if (isPureY) {
+        matchesLayoutShiftDelta = dy === layoutShiftVariables.deltaY && dx === 0;
+      }
+    }
+    acc.push({
+      offender: offenderData.elementName,
+      happenedBefore: happenedBefore,
+      distanceToLS: Math.round(offenderTimestamp - checkpointTimestamp),
+      isAbove: isAbove !== null && isAbove !== void 0 ? isAbove : 'none',
+      isLeft: isLeft !== null && isLeft !== void 0 ? isLeft : 'none',
+      isRight: isRight !== null && isRight !== void 0 ? isRight : 'none',
+      hasHorizontalOverlap: hasHorizontalOverlap !== null && hasHorizontalOverlap !== void 0 ? hasHorizontalOverlap : 'none',
+      hasVerticalOverlap: hasVerticalOverlap !== null && hasVerticalOverlap !== void 0 ? hasVerticalOverlap : 'none',
+      matchesLayoutShiftDelta: matchesLayoutShiftDelta
+    });
+    return acc;
+  }, []);
+  return {
+    layoutShiftVariables: layoutShiftVariables,
+    layoutShiftOffenders: layoutShiftOffenders
+  };
+};

package/dist/esm/vc/vc-observer-new/viewport-observer/index.js

@@ -88,22 +88,151 @@ var createElementMutationsWatcher = function createElementMutationsWatcher(remov
     return 'mutation:element';
   };
 };
+var createElementMutationsWatcherNew = function createElementMutationsWatcherNew(removedNodeRects, isWithinThirdPartySegment, isWithinSmartAnswersSegment, hasSameDeletedNode, timestamp, isTargetReactRoot, getSSRState, getSSRPlaceholderHandler) {
+  return function (_ref2) {
+    var target = _ref2.target,
+      rect = _ref2.rect;
+    if (getSSRState) {
+      var ssrState = getSSRState();
+      var SSRStateEnum = {
+        normal: 1,
+        waitingForFirstRender: 2,
+        ignoring: 3
+      };
+      if (ssrState.state === SSRStateEnum.waitingForFirstRender && timestamp > ssrState.renderStart && isTargetReactRoot) {
+        ssrState.state = SSRStateEnum.ignoring;
+        if (ssrState.renderStop === -1) {
+          // arbitrary 500ms DOM update window
+          ssrState.renderStop = timestamp + 500;
+        }
+        return {
+          type: 'ssr-hydration',
+          mutationData: {
+            timestamp: timestamp
+          }
+        };
+      }
+      if (ssrState.state === SSRStateEnum.ignoring && timestamp > ssrState.renderStart && isTargetReactRoot) {
+        if (timestamp <= ssrState.renderStop) {
+          return {
+            type: 'ssr-hydration',
+            mutationData: {
+              timestamp: timestamp
+            }
+          };
+        } else {
+          ssrState.state = SSRStateEnum.normal;
+        }
+      }
+    }
+    if (getSSRPlaceholderHandler) {
+      var ssrPlaceholderHandler = getSSRPlaceholderHandler();
+      if (ssrPlaceholderHandler) {
+        if ((ssrPlaceholderHandler.isPlaceholderV4(target) || ssrPlaceholderHandler.isPlaceholderIgnored(target)) && ssrPlaceholderHandler.checkIfExistedAndSizeMatchingV3(target)) {
+          return {
+            type: 'mutation:ssr-placeholder',
+            mutationData: {
+              timestamp: timestamp
+            }
+          };
+        }
+        if ((ssrPlaceholderHandler.isPlaceholderReplacementV4(target) || ssrPlaceholderHandler.isPlaceholderIgnored(target)) && ssrPlaceholderHandler.validateReactComponentMatchToPlaceholderV4(target)) {
+          return {
+            type: 'mutation:ssr-placeholder',
+            mutationData: {
+              timestamp: timestamp
+            }
+          };
+        }
+      }
+    }
+    if (hasSameDeletedNode && isInVCIgnoreIfNoLayoutShiftMarker(target)) {
+      return {
+        type: 'mutation:remount',
+        mutationData: {
+          timestamp: timestamp
+        }
+      };
+    }
+    if (isContainedWithinMediaWrapper(target)) {
+      return {
+        type: 'mutation:media',
+        mutationData: {
+          timestamp: timestamp
+        }
+      };
+    }
+    if (isWithinThirdPartySegment) {
+      return {
+        type: 'mutation:third-party-element',
+        mutationData: {
+          timestamp: timestamp
+        }
+      };
+    }
+    if (isWithinSmartAnswersSegment) {
+      return {
+        type: 'mutation:smart-answers-element',
+        mutationData: {
+          timestamp: timestamp
+        }
+      };
+    }
+    var isInIgnoreLsMarker = isInVCIgnoreIfNoLayoutShiftMarker(target);
+    if (!isInIgnoreLsMarker) {
+      return {
+        type: 'mutation:element',
+        mutationData: {
+          timestamp: timestamp
+        }
+      };
+    }
+    var isRLLPlaceholder = RLLPlaceholderHandlers.getInstance().isRLLPlaceholderHydration(rect);
+    if (isRLLPlaceholder && isInIgnoreLsMarker) {
+      return {
+        type: 'mutation:rll-placeholder',
+        mutationData: {
+          timestamp: timestamp
+        }
+      };
+    }
+    var wasDeleted = removedNodeRects.some(function (nr) {
+      return isSameRectDimensions(nr, rect);
+    });
+    if (wasDeleted && isInIgnoreLsMarker) {
+      return {
+        type: 'mutation:element-replacement',
+        mutationData: {
+          timestamp: timestamp
+        }
+      };
+    }
+    return {
+      type: 'mutation:element',
+      mutationData: {
+        timestamp: timestamp
+      }
+    };
+  };
+};
 var ViewportObserver = /*#__PURE__*/function () {
   // SSR context functions
 
-  function ViewportObserver(_ref2) {
+  function ViewportObserver(_ref3) {
     var _this = this;
-    var onChange = _ref2.onChange,
-      getSSRState = _ref2.getSSRState,
-      getSSRPlaceholderHandler = _ref2.getSSRPlaceholderHandler,
-      searchPageConfig = _ref2.searchPageConfig;
+    var onChange = _ref3.onChange,
+      getSSRState = _ref3.getSSRState,
+      getSSRPlaceholderHandler = _ref3.getSSRPlaceholderHandler,
+      _ref3$trackLayoutShif = _ref3.trackLayoutShiftOffenders,
+      trackLayoutShiftOffenders = _ref3$trackLayoutShif === void 0 ? false : _ref3$trackLayoutShif,
+      searchPageConfig = _ref3.searchPageConfig;
     _classCallCheck(this, ViewportObserver);
-    _defineProperty(this, "handleIntersectionEntry", function (_ref3) {
-      var target = _ref3.target,
-        rect = _ref3.rect,
-        time = _ref3.time,
-        type = _ref3.type,
-        mutationData = _ref3.mutationData;
+    _defineProperty(this, "handleIntersectionEntry", function (_ref4) {
+      var target = _ref4.target,
+        rect = _ref4.rect,
+        time = _ref4.time,
+        type = _ref4.type,
+        mutationData = _ref4.mutationData;
       if (!target) {
         return;
       }
@@ -121,12 +250,12 @@ var ViewportObserver = /*#__PURE__*/function () {
       });
     });
     _defineProperty(this, "handleChildListMutation", /*#__PURE__*/function () {
-      var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref4) {
+      var _ref6 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref5) {
         var target, addedNodes, removedNodes, timestamp, removedNodeRects, targetNode, _iterator, _step, _loop;
         return _regeneratorRuntime.wrap(function _callee$(_context2) {
           while (1) switch (_context2.prev = _context2.next) {
             case 0:
-              target = _ref4.target, addedNodes = _ref4.addedNodes, removedNodes = _ref4.removedNodes, timestamp = _ref4.timestamp;
+              target = _ref5.target, addedNodes = _ref5.addedNodes, removedNodes = _ref5.removedNodes, timestamp = _ref5.timestamp;
               removedNodeRects = removedNodes.map(function (ref) {
                 var n = ref.deref();
                 if (!n) {
@@ -161,7 +290,7 @@ var ViewportObserver = /*#__PURE__*/function () {
                       _checkWithinComponent = checkWithinComponent(addedNode, 'UFOThirdPartySegment', _this.mapIs3pResult), isWithinThirdPartySegment = _checkWithinComponent.isWithin;
                       isWithinSmartAnswersSegment = Boolean(_this.shouldCheckSmartAnswersMutations() && isContainedWithinSmartAnswers(addedNode));
                       isTargetReactRoot = targetNode === ((_this$getSSRState = _this.getSSRState) === null || _this$getSSRState === void 0 || (_this$getSSRState = _this$getSSRState.call(_this)) === null || _this$getSSRState === void 0 ? void 0 : _this$getSSRState.reactRootElement);
-                      (_this$intersectionObs = _this.intersectionObserver) === null || _this$intersectionObs === void 0 || _this$intersectionObs.watchAndTag(addedNode, createElementMutationsWatcher(removedNodeRects, isWithinThirdPartySegment, isWithinSmartAnswersSegment, !!hasSameDeletedNode, timestamp, isTargetReactRoot, _this.getSSRState, _this.getSSRPlaceholderHandler));
+                      (_this$intersectionObs = _this.intersectionObserver) === null || _this$intersectionObs === void 0 || _this$intersectionObs.watchAndTag(addedNode, (_this.trackLayoutShiftOffenders ? createElementMutationsWatcherNew : createElementMutationsWatcher)(removedNodeRects, isWithinThirdPartySegment, isWithinSmartAnswersSegment, !!hasSameDeletedNode, timestamp, isTargetReactRoot, _this.getSSRState, _this.getSSRPlaceholderHandler));
                     case 9:
                     case "end":
                       return _context.stop();
@@ -202,25 +331,27 @@ var ViewportObserver = /*#__PURE__*/function () {
         }, _callee, null, [[4, 15, 18, 21]]);
       }));
       return function (_x) {
-        return _ref5.apply(this, arguments);
+        return _ref6.apply(this, arguments);
       };
     }());
-    _defineProperty(this, "handleAttributeMutation", function (_ref6) {
+    _defineProperty(this, "handleAttributeMutation", function (_ref7) {
       var _this$intersectionObs2;
-      var target = _ref6.target,
-        attributeName = _ref6.attributeName,
-        oldValue = _ref6.oldValue,
-        newValue = _ref6.newValue;
-      (_this$intersectionObs2 = _this.intersectionObserver) === null || _this$intersectionObs2 === void 0 || _this$intersectionObs2.watchAndTag(target, function (_ref7) {
-        var target = _ref7.target,
-          rect = _ref7.rect;
+      var target = _ref7.target,
+        attributeName = _ref7.attributeName,
+        oldValue = _ref7.oldValue,
+        newValue = _ref7.newValue,
+        timestamp = _ref7.timestamp;
+      (_this$intersectionObs2 = _this.intersectionObserver) === null || _this$intersectionObs2 === void 0 || _this$intersectionObs2.watchAndTag(target, function (_ref8) {
+        var target = _ref8.target,
+          rect = _ref8.rect;
         if (isContainedWithinMediaWrapper(target)) {
           return {
             type: 'mutation:media',
             mutationData: {
               attributeName: attributeName,
               oldValue: oldValue,
-              newValue: newValue
+              newValue: newValue,
+              timestamp: timestamp
             }
           };
         }
@@ -233,7 +364,8 @@ var ViewportObserver = /*#__PURE__*/function () {
               mutationData: {
                 attributeName: attributeName,
                 oldValue: oldValue,
-                newValue: newValue
+                newValue: newValue,
+                timestamp: timestamp
               }
             };
           }
@@ -259,7 +391,8 @@ var ViewportObserver = /*#__PURE__*/function () {
             mutationData: {
               attributeName: attributeName,
               oldValue: oldValue,
-              newValue: newValue
+              newValue: newValue,
+              timestamp: timestamp
             }
           };
         }
@@ -273,7 +406,8 @@ var ViewportObserver = /*#__PURE__*/function () {
             mutationData: {
               attributeName: attributeName,
               oldValue: oldValue,
-              newValue: newValue
+              newValue: newValue,
+              timestamp: timestamp
             }
           };
         }
@@ -288,7 +422,8 @@ var ViewportObserver = /*#__PURE__*/function () {
             mutationData: {
               attributeName: attributeName,
               oldValue: oldValue,
-              newValue: newValue
+              newValue: newValue,
+              timestamp: timestamp
             }
           };
         }
@@ -299,7 +434,8 @@ var ViewportObserver = /*#__PURE__*/function () {
             mutationData: {
               attributeName: attributeName,
               oldValue: oldValue,
-              newValue: newValue
+              newValue: newValue,
+              timestamp: timestamp
             }
           };
         }
@@ -310,7 +446,8 @@ var ViewportObserver = /*#__PURE__*/function () {
             mutationData: {
               attributeName: attributeName,
               oldValue: oldValue,
-              newValue: newValue
+              newValue: newValue,
+              timestamp: timestamp
             }
           };
         }
@@ -319,14 +456,15 @@ var ViewportObserver = /*#__PURE__*/function () {
           mutationData: {
             attributeName: attributeName,
             oldValue: oldValue,
-            newValue: newValue
+            newValue: newValue,
+            timestamp: timestamp
           }
         };
       });
     });
-    _defineProperty(this, "handleLayoutShift", function (_ref8) {
-      var time = _ref8.time,
-        changedRects = _ref8.changedRects;
+    _defineProperty(this, "handleLayoutShift", function (_ref9) {
+      var time = _ref9.time,
+        changedRects = _ref9.changedRects;
       var _iterator2 = _createForOfIteratorHelper(changedRects),
         _step2;
       try {
@@ -362,6 +500,7 @@ var ViewportObserver = /*#__PURE__*/function () {
     this.intersectionObserver = null;
     this.mutationObserver = null;
     this.performanceObserver = null;
+    this.trackLayoutShiftOffenders = trackLayoutShiftOffenders;
 
     // Initialize SSR context functions
     this.getSSRState = getSSRState;

package/dist/esm/vc/vc-observer-new/viewport-observer/intersection-observer/index.js

@@ -30,7 +30,7 @@ export function createIntersectionObserver(_ref) {
           }
 
           // override as display-contents mutation
-          if (tagOrCallbackResult && typeof tagOrCallbackResult !== 'string' && tagOrCallbackResult.type === 'mutation:attribute') {
+          if (tagOrCallbackResult && typeof tagOrCallbackResult !== 'string' && tagOrCallbackResult.type === 'mutation:attribute' && 'oldValue' in tagOrCallbackResult.mutationData) {
             var _tagOrCallbackResult$ = tagOrCallbackResult.mutationData,
               attributeName = _tagOrCallbackResult$.attributeName,
               oldValue = _tagOrCallbackResult$.oldValue,

package/dist/esm/vc/vc-observer-new/viewport-observer/mutation-observer/index.js

@@ -53,7 +53,8 @@ function createMutationObserver(_ref) {
                 target: mut.target,
                 attributeName: (_mut$attributeName = mut.attributeName) !== null && _mut$attributeName !== void 0 ? _mut$attributeName : 'unknown',
                 oldValue: oldValue,
-                newValue: newValue
+                newValue: newValue,
+                timestamp: mut.timestamp || performance.now()
               });
             }
             return 0; // continue

package/dist/types/common/react-ufo-payload-schema.d.ts

@@ -1,4 +1,5 @@
 import { type createPayloads } from '../create-payload';
+import type { HiddenTimingItem } from '../hidden-timing';
 import { type LabelStack } from '../interaction-context';
 import { type VCObserver } from '../vc/vc-observer';
 import type { AbortReasonType, ApdexType, HoldActive, InteractionError, InteractionType, MinorInteraction, SegmentInfo } from './common/types';
@@ -120,6 +121,7 @@ export type ReactUFOPayload = {
             'ufo:wasPageHiddenBeforeInit'?: boolean;
             'ufo:isOpenedInBackground'?: boolean;
             'ufo:isTabThrottled'?: boolean;
+            'ufo:pageVisibilityTimeline'?: HiddenTimingItem[];
             interactionMetrics: {
                 namePrefix: string;
                 segmentPrefix: string;

package/dist/types/common/vc/types.d.ts

@@ -118,6 +118,7 @@ export type CalculateTTVCResult = {
     vcDetails: RevisionPayloadVCDetails;
     ssrRatio: number;
     speedIndex: number;
+    VC90layoutShiftInsights: LayoutShiftInsights;
 };
 export type RawObservation = {
     t: number;
@@ -130,8 +131,31 @@ export type RawEventObservation = {
     t: number;
     evt: number;
 };
+export type LayoutShiftInsightsPayload = {
+    impact: number;
+    sources: number;
+    same: {
+        dir: boolean;
+        dist: boolean;
+    };
+    total_mut: number;
+    mut: Array<{
+        e: string;
+        size: number;
+        attr: {
+            t_before: boolean;
+            p_above: 'all' | 'some' | 'none';
+            p_left: 'all' | 'some' | 'none';
+            p_right: 'all' | 'some' | 'none';
+            p_h_overlap: 'all' | 'some' | 'none';
+            p_v_overlap: 'all' | 'some' | 'none';
+            p_same_offset: 'all' | 'some' | 'none';
+        };
+    }>;
+};
 export type RevisionPayloadEntry = {
     'metric:vc90': number | null;
+    'vc90:ls'?: LayoutShiftInsightsPayload;
     revision: string;
     clean: boolean;
     vcDetails?: RevisionPayloadVCDetails;
@@ -157,4 +181,35 @@ export type RevisionPayloadEntry = {
     rawVCTime?: number;
 };
 export type RevisionPayload = RevisionPayloadEntry[];
+export type LayoutShiftVariables = {
+    allHaveRects: false;
+    allMovedSameWay: false;
+    allMovedSameAmount: false;
+} | {
+    allHaveRects: true;
+    allMovedSameWay: boolean;
+    allMovedSameAmount: boolean;
+    deltaX: number;
+    deltaY: number;
+};
+export type LayoutShiftOffenderMatchState = 'all' | 'some' | 'none';
+export type LayoutShiftOffender = {
+    offender: string;
+    happenedBefore: boolean;
+    distanceToLS: number;
+    isAbove: LayoutShiftOffenderMatchState;
+    isLeft: LayoutShiftOffenderMatchState;
+    isRight: LayoutShiftOffenderMatchState;
+    hasHorizontalOverlap: LayoutShiftOffenderMatchState;
+    hasVerticalOverlap: LayoutShiftOffenderMatchState;
+    matchesLayoutShiftDelta: boolean;
+};
+export type LayoutShiftInsights = {
+    layoutShiftOffendersResult: {
+        layoutShiftVariables: LayoutShiftVariables;
+        layoutShiftOffenders: LayoutShiftOffender[];
+    };
+    layoutShiftEntriesCount: number;
+    layoutShiftImpact: number;
+} | null;
 export {};

package/dist/types/config/index.d.ts

@@ -135,6 +135,7 @@ export type Config = {
             all: readonly TTVCRevision[];
             byExperience?: Record<string, readonly TTVCRevision[]>;
         };
+        readonly trackLayoutShiftOffenders?: boolean;
     };
     readonly postInteractionLog?: {
         readonly enabled?: boolean;

package/dist/types/hidden-timing/index.d.ts

@@ -51,3 +51,12 @@ export declare function getThrottleMeasurements(startTime: number, endTime: numb
  * @param measurement - The throttle measurement to inject
  */
 export declare function __injectThrottleMeasurementForTesting(measurement: ThrottleMeasurement): void;
+/**
+ * Returns the page visibility timeline entries within the specified time window.
+ * Each entry contains the time (relative to startTime) and whether the page was hidden.
+ *
+ * @param startTime - The start timestamp of the window (DOMHighResTimeStamp)
+ * @param endTime - The end timestamp of the window (DOMHighResTimeStamp)
+ * @returns Array of HiddenTimingItem entries within the time window, with times relative to startTime
+ */
+export declare function getPageVisibilityTimeline(startTime: number, endTime: number): HiddenTimingItem[];

package/dist/types/vc/types.d.ts

@@ -19,6 +19,7 @@ export type GetVCResultType = {
     interactionAbortReason?: AbortReasonType;
     includeRawData?: boolean;
     rawDataStopTime?: number;
+    reportLayoutShiftOffenders?: boolean;
 };
 export type SelectorConfig = {
     id: boolean;
@@ -48,6 +49,7 @@ export type VCObserverOptions = {
     isPostInteraction?: boolean;
     ssrEnablePageLayoutPlaceholder?: boolean;
     ssrPlaceholderHandler?: any;
+    trackLayoutShiftOffenders?: boolean;
     searchPageConfig?: SearchPageConfig;
 };
 export interface VCObserverInterface {

package/dist/types/vc/vc-observer-new/index.d.ts

@@ -10,6 +10,7 @@ export type VCObserverNewConfig = {
         enablePageLayoutPlaceholder?: boolean;
     };
     ssrPlaceholderHandler?: SSRPlaceholderHandlers | null;
+    trackLayoutShiftOffenders?: boolean;
     searchPageConfig?: SearchPageConfig;
 };
 declare const SSRState: {
@@ -31,6 +32,7 @@ export default class VCObserverNew {
     private windowEventObserver;
     private entriesTimeline;
     private isPostInteraction;
+    private trackLayoutShiftOffenders;
     private ssrPlaceholderHandler;
     private ssr;
     constructor(config: VCObserverNewConfig);

package/dist/types/vc/vc-observer-new/metric-calculator/abstract-base-vc-calculator.d.ts

@@ -25,5 +25,5 @@ export default abstract class AbstractVCCalculatorBase implements VCCalculator {
     private calculateRatios;
     private getLabelStacks;
     private calculateWithDebugInfo;
-    calculate({ startTime, stopTime, orderedEntries, interactionId, isPostInteraction, include3p, excludeSmartAnswersInSearch, includeSSRRatio, interactionType, isPageVisible, interactionAbortReason, }: VCCalculatorParam): Promise<RevisionPayloadEntry | undefined>;
+    calculate({ startTime, stopTime, orderedEntries, interactionId, isPostInteraction, include3p, excludeSmartAnswersInSearch, includeSSRRatio, interactionType, isPageVisible, interactionAbortReason, reportLayoutShiftOffenders, }: VCCalculatorParam): Promise<RevisionPayloadEntry | undefined>;
 }

package/dist/types/vc/vc-observer-new/metric-calculator/types.d.ts

@@ -13,6 +13,7 @@ export type VCCalculatorParam = {
     interactionType: InteractionType;
     isPageVisible: boolean;
     interactionAbortReason?: AbortReasonType;
+    reportLayoutShiftOffenders?: boolean;
 };
 export interface VCCalculator {
     calculate(param: VCCalculatorParam): Promise<RevisionPayloadEntry | undefined>;