@atlaskit/react-ufo 3.13.17 → 3.13.19

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

@@ -9,6 +9,7 @@ var _excluded = ["__debug__element"];
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { fg } from '@atlaskit/platform-feature-flags';
 import { isVCRevisionEnabled } from '../../config';
 import { getActiveInteraction } from '../../interaction-metrics';
 import { attachAbortListeners } from './attachAbortListeners';
@@ -95,7 +96,7 @@ export var VCObserver = /*#__PURE__*/function () {
     });
     _defineProperty(this, "getVCResult", /*#__PURE__*/function () {
       var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref3) {
-        var start, stop, tti, prefix, ssr, vc, isEventAborted, experienceKey, interactionId, includeSSRRatio, startTime, fullPrefix, rawData, abortReason, abortReasonInfo, heatmap, heatmapNext, outOfBoundaryInfo, totalTime, componentsLog, viewport, devToolsEnabled, ratios, isTTVCv1Disabled, vcAbortedResultWithRevisions, ttvcV1Result, VC, VCBox, VCEntries, totalPainted, _componentsLog, vcNext, outOfBoundary, stopTime, ttvcV1DevToolInfo, ttvcV2DevToolInfo, _ufo_devtool_onVCRev2, _ref9, _ufo_devtool_onVCRev, _ref8, isVCClean, revisionsData, speedIndex, SSRRatio, SSRRatioNext, SSRRatioPayload, isTTVCv3Enabled;
+        var start, stop, tti, prefix, ssr, vc, isEventAborted, experienceKey, interactionId, includeSSRRatio, startTime, fullPrefix, rawData, abortReason, abortReasonInfo, heatmap, heatmapNext, outOfBoundaryInfo, totalTime, componentsLog, viewport, devToolsEnabled, ratios, isTTVCv1Disabled, vcAbortedResultWithRevisions, ttvcV1Result, VC, VCBox, VCEntries, totalPainted, _componentsLog, vcNext, outOfBoundary, stopTime, ttvcV1DevToolInfo, ttvcV2DevToolInfo, shouldCreateDebugDetails, v1RevisionDebugDetails, v2RevisionDebugDetails, _window$__ufo_devtool2, _window2, _window$__ufo_devtool, _window, _window$__on_ufo_vc_d2, _window4, _window$__on_ufo_vc_d, _window3, isVCClean, revisionsData, speedIndex, SSRRatio, SSRRatioNext, SSRRatioPayload, isTTVCv3Enabled;
         return _regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
@@ -264,30 +265,42 @@ export var VCObserver = /*#__PURE__*/function () {
                       entries: isTTVCv1Disabled ? vcNext.VCEntries.rel : VCEntries.rel
                     }
                   }));
-
-                  // Add devtool callback for both v1 and v2
-                  if (typeof window.__ufo_devtool_onVCRevisionReady__ === 'function') {
-                    // Handle v1 if not disabled
-                    if (!isTTVCv1Disabled) {
-                      (_ufo_devtool_onVCRev = (_ref8 = window).__ufo_devtool_onVCRevisionReady__) === null || _ufo_devtool_onVCRev === void 0 || _ufo_devtool_onVCRev.call(_ref8, getVCRevisionDebugDetails({
-                        revision: 'fy25.01',
-                        isClean: !abortReasonInfo,
-                        abortReason: abortReason.reason,
-                        VCEntries: VCEntries.rel,
-                        componentsLog: componentsLog,
-                        interactionId: interactionId
-                      }));
-                    }
-
-                    // Handle v2
-                    (_ufo_devtool_onVCRev2 = (_ref9 = window).__ufo_devtool_onVCRevisionReady__) === null || _ufo_devtool_onVCRev2 === void 0 || _ufo_devtool_onVCRev2.call(_ref9, getVCRevisionDebugDetails({
+                }
+                if (!_this.isPostInteraction) {
+                  // Only create revision debug details if callbacks exist
+                  shouldCreateDebugDetails = typeof window.__ufo_devtool_onVCRevisionReady__ === 'function' || typeof window.__on_ufo_vc_debug_data_ready === 'function' && fg('platform_ufo_emit_vc_debug_data');
+                  if (shouldCreateDebugDetails) {
+                    v1RevisionDebugDetails = getVCRevisionDebugDetails({
+                      revision: 'fy25.01',
+                      isClean: !abortReasonInfo,
+                      abortReason: abortReason.reason,
+                      VCEntries: VCEntries.rel,
+                      componentsLog: componentsLog,
+                      interactionId: interactionId
+                    });
+                    v2RevisionDebugDetails = getVCRevisionDebugDetails({
                       revision: 'fy25.02',
                       isClean: !abortReasonInfo,
                       abortReason: abortReason.reason,
                       VCEntries: vcNext.VCEntries.rel,
                       componentsLog: componentsLog,
                       interactionId: interactionId
-                    }));
+                    }); // Add devtool callback for both v1 and v2
+                    if (typeof window.__ufo_devtool_onVCRevisionReady__ === 'function') {
+                      // Handle v1 if not disabled
+                      if (!isTTVCv1Disabled) {
+                        (_window$__ufo_devtool = (_window = window).__ufo_devtool_onVCRevisionReady__) === null || _window$__ufo_devtool === void 0 || _window$__ufo_devtool.call(_window, v1RevisionDebugDetails);
+                      }
+
+                      // Handle v2
+                      (_window$__ufo_devtool2 = (_window2 = window).__ufo_devtool_onVCRevisionReady__) === null || _window$__ufo_devtool2 === void 0 || _window$__ufo_devtool2.call(_window2, v2RevisionDebugDetails);
+                    }
+                    if (typeof window.__on_ufo_vc_debug_data_ready === 'function' && fg('platform_ufo_emit_vc_debug_data')) {
+                      if (!isTTVCv1Disabled) {
+                        (_window$__on_ufo_vc_d = (_window3 = window).__on_ufo_vc_debug_data_ready) === null || _window$__on_ufo_vc_d === void 0 || _window$__on_ufo_vc_d.call(_window3, v1RevisionDebugDetails);
+                      }
+                      (_window$__on_ufo_vc_d2 = (_window4 = window).__on_ufo_vc_debug_data_ready) === null || _window$__on_ufo_vc_d2 === void 0 || _window$__on_ufo_vc_d2.call(_window4, v2RevisionDebugDetails);
+                    }
                   }
                 }
               } catch (e) {
@@ -416,14 +429,14 @@ export var VCObserver = /*#__PURE__*/function () {
       }
     });
     _defineProperty(this, "attachAbortListeners", function () {
-      var _window;
+      var _window5;
       _this.detachAbortListeners();
       var unbinds = attachAbortListeners(window, _this.viewport, _this.abortReasonCallback);
-      if ((_window = window) !== null && _window !== void 0 && _window.__SSR_ABORT_LISTENERS__) {
-        Object.entries(window.__SSR_ABORT_LISTENERS__.aborts).forEach(function (_ref1) {
-          var _ref10 = _slicedToArray(_ref1, 2),
-            key = _ref10[0],
-            time = _ref10[1];
+      if ((_window5 = window) !== null && _window5 !== void 0 && _window5.__SSR_ABORT_LISTENERS__) {
+        Object.entries(window.__SSR_ABORT_LISTENERS__.aborts).forEach(function (_ref9) {
+          var _ref0 = _slicedToArray(_ref9, 2),
+            key = _ref0[0],
+            time = _ref0[1];
           if (time) {
             _this.abortReasonCallback(key, time);
           }
@@ -453,8 +466,8 @@ export var VCObserver = /*#__PURE__*/function () {
   }
   return _createClass(VCObserver, [{
     key: "start",
-    value: function start(_ref11) {
-      var startTime = _ref11.startTime;
+    value: function start(_ref1) {
+      var startTime = _ref1.startTime;
       this.active = true;
       if (this.observers.isBrowserSupported()) {
         this.setViewportSize();
@@ -476,12 +489,12 @@ export var VCObserver = /*#__PURE__*/function () {
   }, {
     key: "getIgnoredElements",
     value: function getIgnoredElements(componentsLog) {
-      return Object.values(componentsLog).flat().filter(function (_ref12) {
-        var ignoreReason = _ref12.ignoreReason;
+      return Object.values(componentsLog).flat().filter(function (_ref10) {
+        var ignoreReason = _ref10.ignoreReason;
         return Boolean(ignoreReason);
-      }).map(function (_ref13) {
-        var targetName = _ref13.targetName,
-          ignoreReason = _ref13.ignoreReason;
+      }).map(function (_ref11) {
+        var targetName = _ref11.targetName,
+          ignoreReason = _ref11.ignoreReason;
         return {
           targetName: targetName,
           ignoreReason: ignoreReason
@@ -611,13 +624,13 @@ export var VCObserver = /*#__PURE__*/function () {
     }
   }, {
     key: "calculateVC",
-    value: function calculateVC(_ref14) {
-      var heatmap = _ref14.heatmap,
-        _ref14$ssr = _ref14.ssr,
-        ssr = _ref14$ssr === void 0 ? UNUSED_SECTOR : _ref14$ssr,
-        componentsLog = _ref14.componentsLog,
-        viewport = _ref14.viewport,
-        fixSSRAttribution = _ref14.fixSSRAttribution;
+    value: function calculateVC(_ref12) {
+      var heatmap = _ref12.heatmap,
+        _ref12$ssr = _ref12.ssr,
+        ssr = _ref12$ssr === void 0 ? UNUSED_SECTOR : _ref12$ssr,
+        componentsLog = _ref12.componentsLog,
+        viewport = _ref12.viewport,
+        fixSSRAttribution = _ref12.fixSSRAttribution;
       var lastUpdate = {};
       var totalPainted = 0;
       var ssrTime = fixSSRAttribution ? Math.floor(ssr) : ssr;
@@ -684,11 +697,11 @@ export var VCObserver = /*#__PURE__*/function () {
         });
         return VCRatio;
       }, 0);
-      var VCEntries = entries.reduce(function (acc, _ref15, i) {
+      var VCEntries = entries.reduce(function (acc, _ref13, i) {
         var _acc$abs, _componentsLog$timest, _acc$rel$vc, _acc$rel;
-        var _ref16 = _slicedToArray(_ref15, 2),
-          timestamp = _ref16[0],
-          entryPainted = _ref16[1];
+        var _ref14 = _slicedToArray(_ref13, 2),
+          timestamp = _ref14[0],
+          entryPainted = _ref14[1];
         var currentlyPainted = entryPainted + (((_acc$abs = acc.abs[i - 1]) === null || _acc$abs === void 0 ? void 0 : _acc$abs[1]) || 0);
         var currentlyPaintedRatio = Math.round(currentlyPainted / totalPainted * 1000) / 10;
         var logEntry = _toConsumableArray(new Set((_componentsLog$timest = componentsLog[timestamp]) === null || _componentsLog$timest === void 0 ? void 0 : _componentsLog$timest.filter(function (v) {

package/dist/esm/vc/vc-observer/observers/index.js

@@ -5,6 +5,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { isContainedWithinMediaWrapper } from '../media-wrapper/vc-utils';
 import isNonVisualStyleMutation from './non-visual-styles/is-non-visual-style-mutation';
+import { RLLPlaceholderHandlers } from './rll-placeholders';
 import { SSRPlaceholderHandlers } from './ssr-placeholders';
 var state = {
   normal: 1,
@@ -272,6 +273,9 @@ export var Observers = /*#__PURE__*/function () {
             if (!isElementVisible(target)) {
               data.ignoreReason = 'not-visible';
             }
+            if (RLLPlaceholderHandlers.getInstance().isRLLPlaceholderHydration(ir)) {
+              data.ignoreReason = 'rll-placeholder';
+            }
             _this3.callbacks.forEach(function (callback) {
               var elementName;
               try {

package/dist/esm/vc/vc-observer/observers/rll-placeholders/index.js

@@ -0,0 +1,201 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { fg } from '@atlaskit/platform-feature-flags';
+var GLOBAL_RLL_HANDLERS_KEY = '__REACT_UFO_RLL_PLACEHOLDER_HANDLERS__';
+export var RLLPlaceholderHandlers = /*#__PURE__*/function () {
+  function RLLPlaceholderHandlers() {
+    _classCallCheck(this, RLLPlaceholderHandlers);
+    _defineProperty(this, "placeholders", []);
+    if (typeof window !== 'undefined' && typeof document !== 'undefined' && typeof window.document !== 'undefined') {
+      this.collectRLLPlaceholders();
+    }
+  }
+
+  /**
+   * Gets the global singleton instance of RLLPlaceholderHandlers.
+   * Creates the instance if it doesn't exist and stores it in globalThis.
+   * @returns The singleton instance of RLLPlaceholderHandlers
+   */
+  return _createClass(RLLPlaceholderHandlers, [{
+    key: "reset",
+    value: function reset() {
+      this.placeholders = [];
+    }
+
+    /**
+     * Collects all React Loosely Lazy (RLL) placeholders from the DOM and caches their viewport intersecting rectangles.
+     * RLL placeholders are marked with data-lazy-begin and data-lazy-end attributes on hidden input elements.
+     * Performance optimized to batch getBoundingClientRect calls and minimize layout thrashing.
+     * Only stores the intersecting portions of rectangles that are currently visible in the viewport.
+     */
+  }, {
+    key: "collectRLLPlaceholders",
+    value: function collectRLLPlaceholders() {
+      if (typeof window === 'undefined' || typeof document === 'undefined' || typeof window.document === 'undefined') {
+        return;
+      }
+      if (!fg('platform_ufo_rll_placeholder_ignore')) {
+        return;
+      }
+      var beginElements = document.querySelectorAll('input[data-lazy-begin]');
+      var beginCount = beginElements.length;
+      if (beginCount === 0) {
+        return;
+      }
+
+      // Performance optimization: pre-allocate array with estimated size
+      var allElements = [];
+
+      // Performance optimization: use traditional for loop instead of forEach
+      for (var i = 0; i < beginCount; i++) {
+        var beginEl = beginElements[i];
+        var id = beginEl.getAttribute('data-lazy-begin');
+        if (!id) {
+          continue;
+        }
+        var elements = this.refElements(beginEl, id);
+        if (elements.length > 0) {
+          allElements.push.apply(allElements, _toConsumableArray(elements));
+        }
+      }
+
+      // Second pass: batch all getBoundingClientRect calls to minimize reflow cycles
+      var allElementsLength = allElements.length;
+      if (allElementsLength > 0) {
+        // Performance optimization: pre-allocate array with exact size
+        var intersectingRects = [];
+        var windowWidth = window.innerWidth;
+        var windowHeight = window.innerHeight;
+        for (var _i = 0; _i < allElementsLength; _i++) {
+          var rect = allElements[_i].getBoundingClientRect();
+
+          // Performance optimization: inline intersection calculation to avoid function call overhead
+          var left = Math.max(rect.left, 0);
+          var top = Math.max(rect.top, 0);
+          var right = Math.min(rect.right, windowWidth);
+          var bottom = Math.min(rect.bottom, windowHeight);
+
+          // Check if there's a valid intersection with non-zero width and height
+          if (left < right && top < bottom) {
+            intersectingRects.push(new DOMRect(left, top, right - left, bottom - top));
+          }
+        }
+        this.placeholders = intersectingRects;
+      }
+    }
+
+    /**
+     * Traverses DOM siblings to find all elements between RLL begin and end markers.
+     * Based on the refElements pattern from react-loosely-lazy's platform/packages/async/react-loosely-lazy/src/collect/hydrate.ts
+     * Performance optimized to minimize iterations and early exit conditions.
+     *
+     * @param fromEl - The input element with data-lazy-begin attribute
+     * @param id - The placeholder ID to match against data-lazy-end
+     * @returns Array of DOM elements between the begin/end markers
+     */
+  }, {
+    key: "refElements",
+    value: function refElements(fromEl, id) {
+      var result = [];
+      var el = fromEl.nextSibling;
+
+      // Performance optimization: use while loop instead of recursive calls
+      while (el) {
+        var _el$dataset;
+        if (((_el$dataset = el.dataset) === null || _el$dataset === void 0 ? void 0 : _el$dataset.lazyEnd) === id) {
+          break;
+        }
+        if (el.nodeType === Node.ELEMENT_NODE) {
+          result.push(el);
+        }
+        el = el.nextSibling;
+      }
+      return result;
+    }
+
+    /**
+     * Returns the cached intersecting viewport rectangles for all RLL placeholder elements.
+     * @returns Array of DOMRect objects representing the intersecting portions of placeholders within the viewport
+     */
+  }, {
+    key: "getPlaceholders",
+    value: function getPlaceholders() {
+      return this.placeholders;
+    }
+
+    /**
+     * Checks if the given intersecting rectangle matches any of the cached RLL placeholder intersecting rectangles.
+     * This is designed to be called from IntersectionObserver with the intersectionRect.
+     * Performance optimized with early exits and minimal calculations.
+     * @param intersectingRect - The intersecting rectangle from IntersectionObserver
+     * @returns true if the intersecting rectangle matches a cached placeholder rectangle and hasn't exceeded match limit, false otherwise
+     */
+  }, {
+    key: "isRLLPlaceholderHydration",
+    value: function isRLLPlaceholderHydration(intersectingRect) {
+      var placeholdersLength = this.placeholders.length;
+      if (placeholdersLength === 0) {
+        return false;
+      }
+
+      // Performance optimization: cache array length and use traditional for loop
+      for (var i = 0; i < placeholdersLength; i++) {
+        var placeholderRect = this.placeholders[i];
+        if (this.areRectsEqual(intersectingRect, placeholderRect)) {
+          return true;
+        }
+      }
+      return false;
+    }
+
+    /**
+     * Compares two DOMRect objects for equality with ±1 pixel tolerance.
+     * Performance optimized to minimize calculations and early exit on major differences.
+     * @param rect1 - First rectangle to compare
+     * @param rect2 - Second rectangle to compare
+     * @returns true if rectangles are within 1 pixel tolerance for all properties
+     */
+  }, {
+    key: "areRectsEqual",
+    value: function areRectsEqual(rect1, rect2) {
+      // Early exit for exact matches (most common case)
+      if (rect1.left === rect2.left && rect1.top === rect2.top && rect1.right === rect2.right && rect1.bottom === rect2.bottom) {
+        return true;
+      }
+
+      // Performance optimization: check largest differences first for early exit
+      var leftDiff = rect1.left - rect2.left;
+      if (leftDiff > 1 || leftDiff < -1) {
+        return false;
+      }
+      var rightDiff = rect1.right - rect2.right;
+      if (rightDiff > 1 || rightDiff < -1) {
+        return false;
+      }
+      var topDiff = rect1.top - rect2.top;
+      if (topDiff > 1 || topDiff < -1) {
+        return false;
+      }
+      var bottomDiff = rect1.bottom - rect2.bottom;
+      if (bottomDiff > 1 || bottomDiff < -1) {
+        return false;
+      }
+      return true;
+    }
+  }], [{
+    key: "getInstance",
+    value: function getInstance() {
+      if (typeof globalThis !== 'undefined') {
+        if (!globalThis[GLOBAL_RLL_HANDLERS_KEY]) {
+          globalThis[GLOBAL_RLL_HANDLERS_KEY] = new RLLPlaceholderHandlers();
+        }
+        return globalThis[GLOBAL_RLL_HANDLERS_KEY];
+      }
+
+      // Fallback for environments without globalThis (should be rare)
+      return new RLLPlaceholderHandlers();
+    }
+  }]);
+}();

package/dist/esm/vc/vc-observer-new/metric-calculator/abstract-base-vc-calculator.js

@@ -1,8 +1,12 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 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; }
@@ -10,6 +14,8 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { calculateTTVCPercentilesWithDebugInfo } from './percentile-calc';
 import getViewportHeight from './utils/get-viewport-height';
 import getViewportWidth from './utils/get-viewport-width';
+
+// Create comprehensive debug details including ignored entries
 var AbstractVCCalculatorBase = /*#__PURE__*/function () {
   function AbstractVCCalculatorBase(revisionNo) {
     _classCallCheck(this, AbstractVCCalculatorBase);
@@ -72,8 +78,9 @@ var AbstractVCCalculatorBase = /*#__PURE__*/function () {
   }, {
     key: "calculateWithDebugInfo",
     value: function () {
-      var _calculateWithDebugInfo = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(filteredEntries, startTime, stopTime, isPostInteraction, isVCClean, interactionId, dirtyReason) {
-        var percentiles, viewportEntries, vcLogs, vcDetails, percentileIndex, entryDataBuffer, _iterator3, _step3, _entry2, time, viewportPercentage, entries, elementNames, previousResult, i, percentile, _ufo_devtool_onVCRev, _ref;
+      var _calculateWithDebugInfo = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(filteredEntries, startTime, stopTime, isPostInteraction, isVCClean, interactionId, dirtyReason, allEntries) {
+        var _window, _window2, _window3, _window5;
+        var percentiles, viewportEntries, vcLogs, vcDetails, percentileIndex, entryDataBuffer, _iterator3, _step3, _entry2, time, viewportPercentage, entries, elementNames, previousResult, i, percentile, enhancedVcLogs, shouldCalculateDebugDetails, sortedVcLogs, maxViewportPercentageAtTime, maxSoFar, _iterator4, _step4, log, getBiggestPreviousViewportPercentage, ignoredEntriesByTime, _iterator5, _step5, _entry3, _ignoredEntriesByTime, viewportData, timestamp, additionalVcLogs, _iterator6, _step6, _step6$value, _timestamp, ignoredEntries, _viewportPercentage, v3RevisionDebugDetails, _window4, _window4$__ufo_devtoo, _window6, _window6$__on_ufo_vc_;
         return _regeneratorRuntime.wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
@@ -163,31 +170,138 @@ var AbstractVCCalculatorBase = /*#__PURE__*/function () {
                   previousResult = vcDetails["".concat(percentile)];
                 }
               }
+              enhancedVcLogs = vcLogs ? vcLogs.map(function (log) {
+                return _objectSpread(_objectSpread({}, log), {}, {
+                  viewportPercentage: log.viewportPercentage
+                });
+              }) : []; // Only calculate enhanced debug details if devtool callbacks exist
+              shouldCalculateDebugDetails = !isPostInteraction && (typeof ((_window = window) === null || _window === void 0 ? void 0 : _window.__ufo_devtool_onVCRevisionReady__) === 'function' || typeof ((_window2 = window) === null || _window2 === void 0 ? void 0 : _window2.__on_ufo_vc_debug_data_ready) === 'function' && fg('platform_ufo_emit_vc_debug_data'));
+              if (shouldCalculateDebugDetails && allEntries && vcLogs) {
+                // Pre-sort vcLogs by time for efficient lookups
+                sortedVcLogs = _toConsumableArray(vcLogs).sort(function (a, b) {
+                  return a.time - b.time;
+                }); // Pre-calculate max viewport percentage up to each time for efficient lookups
+                maxViewportPercentageAtTime = new Map();
+                maxSoFar = 0;
+                _iterator4 = _createForOfIteratorHelper(sortedVcLogs);
+                try {
+                  for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
+                    log = _step4.value;
+                    if (log.viewportPercentage !== null) {
+                      maxSoFar = Math.max(maxSoFar, log.viewportPercentage);
+                      maxViewportPercentageAtTime.set(log.time, maxSoFar);
+                    }
+                  }
+
+                  // Helper function to find the biggest previous viewport percentage
+                } catch (err) {
+                  _iterator4.e(err);
+                } finally {
+                  _iterator4.f();
+                }
+                getBiggestPreviousViewportPercentage = function getBiggestPreviousViewportPercentage(targetTime) {
+                  // Binary search for the largest time <= targetTime
+                  var left = 0;
+                  var right = sortedVcLogs.length - 1;
+                  var result = -1;
+                  while (left <= right) {
+                    var mid = Math.floor((left + right) / 2);
+                    if (sortedVcLogs[mid].time <= targetTime) {
+                      result = mid;
+                      left = mid + 1;
+                    } else {
+                      right = mid - 1;
+                    }
+                  }
+                  return result >= 0 ? maxViewportPercentageAtTime.get(sortedVcLogs[result].time) || null : null;
+                }; // Group ignored entries by timestamp
+                ignoredEntriesByTime = new Map();
+                _iterator5 = _createForOfIteratorHelper(allEntries);
+                try {
+                  for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
+                    _entry3 = _step5.value;
+                    if ('rect' in _entry3.data && !this.isEntryIncluded(_entry3)) {
+                      viewportData = _entry3.data;
+                      timestamp = Math.round(_entry3.time);
+                      if (!ignoredEntriesByTime.has(timestamp)) {
+                        ignoredEntriesByTime.set(timestamp, []);
+                      }
+                      (_ignoredEntriesByTime = ignoredEntriesByTime.get(timestamp)) === null || _ignoredEntriesByTime === void 0 || _ignoredEntriesByTime.push(_objectSpread(_objectSpread({}, viewportData), {}, {
+                        ignoreReason: viewportData.visible ? viewportData.type : 'not-visible'
+                      }));
+                    }
+                  }
+
+                  // Add ignored entries to vcLogs
+                } catch (err) {
+                  _iterator5.e(err);
+                } finally {
+                  _iterator5.f();
+                }
+                additionalVcLogs = [];
+                _iterator6 = _createForOfIteratorHelper(ignoredEntriesByTime);
+                try {
+                  for (_iterator6.s(); !(_step6 = _iterator6.n()).done;) {
+                    _step6$value = _slicedToArray(_step6.value, 2), _timestamp = _step6$value[0], ignoredEntries = _step6$value[1];
+                    if (ignoredEntries.length > 0) {
+                      _viewportPercentage = getBiggestPreviousViewportPercentage(_timestamp);
+                      additionalVcLogs.push({
+                        time: _timestamp,
+                        viewportPercentage: _viewportPercentage,
+                        entries: ignoredEntries
+                      });
+                    }
+                  }
+
+                  // Combine and sort all vcLogs
+                } catch (err) {
+                  _iterator6.e(err);
+                } finally {
+                  _iterator6.f();
+                }
+                enhancedVcLogs = [].concat(_toConsumableArray(enhancedVcLogs), additionalVcLogs).sort(function (a, b) {
+                  return a.time - b.time;
+                });
+              }
+
+              // Only create debug details if callbacks exist
+              v3RevisionDebugDetails = null;
+              if (shouldCalculateDebugDetails) {
+                v3RevisionDebugDetails = {
+                  revision: this.revisionNo,
+                  isClean: isVCClean,
+                  abortReason: dirtyReason,
+                  vcLogs: enhancedVcLogs,
+                  interactionId: interactionId
+                };
+              }
 
               // Handle devtool callback
-              if (!isPostInteraction && typeof window !== 'undefined' && typeof window.__ufo_devtool_onVCRevisionReady__ === 'function') {
+              if (v3RevisionDebugDetails && typeof ((_window3 = window) === null || _window3 === void 0 ? void 0 : _window3.__ufo_devtool_onVCRevisionReady__) === 'function') {
                 try {
-                  (_ufo_devtool_onVCRev = (_ref = window).__ufo_devtool_onVCRevisionReady__) === null || _ufo_devtool_onVCRev === void 0 || _ufo_devtool_onVCRev.call(_ref, {
-                    revision: this.revisionNo,
-                    isClean: isVCClean,
-                    abortReason: dirtyReason,
-                    vcLogs: vcLogs,
-                    interactionId: interactionId
-                  });
+                  (_window4 = window) === null || _window4 === void 0 || (_window4$__ufo_devtoo = _window4.__ufo_devtool_onVCRevisionReady__) === null || _window4$__ufo_devtoo === void 0 || _window4$__ufo_devtoo.call(_window4, v3RevisionDebugDetails);
                 } catch (e) {
                   // if any error communicating with devtool, we don't want to break the app
                   // eslint-disable-next-line no-console
                   console.error('Error in onVCRevisionReady', e);
                 }
               }
+              if (v3RevisionDebugDetails && typeof ((_window5 = window) === null || _window5 === void 0 ? void 0 : _window5.__on_ufo_vc_debug_data_ready) === 'function' && fg('platform_ufo_emit_vc_debug_data')) {
+                try {
+                  (_window6 = window) === null || _window6 === void 0 || (_window6$__on_ufo_vc_ = _window6.__on_ufo_vc_debug_data_ready) === null || _window6$__on_ufo_vc_ === void 0 || _window6$__on_ufo_vc_.call(_window6, v3RevisionDebugDetails);
+                } catch (e) {
+                  // eslint-disable-next-line no-console
+                  console.error('Error in onVCRevisionReady', e);
+                }
+              }
               return _context.abrupt("return", vcDetails);
-            case 32:
+            case 38:
             case "end":
               return _context.stop();
           }
         }, _callee, this, [[10, 22, 25, 28]]);
       }));
-      function calculateWithDebugInfo(_x, _x2, _x3, _x4, _x5, _x6, _x7) {
+      function calculateWithDebugInfo(_x, _x2, _x3, _x4, _x5, _x6, _x7, _x8) {
         return _calculateWithDebugInfo.apply(this, arguments);
       }
       return calculateWithDebugInfo;
@@ -195,7 +309,7 @@ var AbstractVCCalculatorBase = /*#__PURE__*/function () {
   }, {
     key: "calculate",
     value: function () {
-      var _calculate = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(_ref2) {
+      var _calculate = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(_ref) {
         var _this = this,
           _vcDetails$90$t,
           _vcDetails$;
@@ -203,7 +317,7 @@ var AbstractVCCalculatorBase = /*#__PURE__*/function () {
         return _regeneratorRuntime.wrap(function _callee2$(_context2) {
           while (1) switch (_context2.prev = _context2.next) {
             case 0:
-              startTime = _ref2.startTime, stopTime = _ref2.stopTime, orderedEntries = _ref2.orderedEntries, interactionId = _ref2.interactionId, isPostInteraction = _ref2.isPostInteraction;
+              startTime = _ref.startTime, stopTime = _ref.stopTime, orderedEntries = _ref.orderedEntries, interactionId = _ref.interactionId, isPostInteraction = _ref.isPostInteraction;
               filteredEntries = orderedEntries.filter(function (entry) {
                 return _this.isEntryIncluded(entry);
               });
@@ -222,7 +336,7 @@ var AbstractVCCalculatorBase = /*#__PURE__*/function () {
               });
             case 7:
               _context2.next = 9;
-              return this.calculateWithDebugInfo(filteredEntries, startTime, stopTime, isPostInteraction, isVCClean, interactionId, dirtyReason);
+              return this.calculateWithDebugInfo(filteredEntries, startTime, stopTime, isPostInteraction, isVCClean, interactionId, dirtyReason, orderedEntries);
             case 9:
               vcDetails = _context2.sent;
               result = {
@@ -241,7 +355,7 @@ var AbstractVCCalculatorBase = /*#__PURE__*/function () {
           }
         }, _callee2, this);
       }));
-      function calculate(_x8) {
+      function calculate(_x9) {
         return _calculate.apply(this, arguments);
       }
       return calculate;

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

@@ -6,6 +6,7 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r)
 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; }
 import { isContainedWithinMediaWrapper } from '../../vc-observer/media-wrapper/vc-utils';
 import isNonVisualStyleMutation from '../../vc-observer/observers/non-visual-styles/is-non-visual-style-mutation';
+import { RLLPlaceholderHandlers } from '../../vc-observer/observers/rll-placeholders';
 import { createIntersectionObserver } from './intersection-observer';
 import createMutationObserver from './mutation-observer';
 import createPerformanceObserver from './performance-observer';
@@ -41,6 +42,10 @@ function sameRectDimensions(a, b) {
 var createElementMutationsWatcher = function createElementMutationsWatcher(removedNodeRects) {
   return function (_ref) {
     var rect = _ref.rect;
+    var isRLLPlaceholder = RLLPlaceholderHandlers.getInstance().isRLLPlaceholderHydration(rect);
+    if (isRLLPlaceholder) {
+      return 'mutation:rll-placeholder';
+    }
     var wasDeleted = removedNodeRects.some(function (nr) {
       return sameRectDimensions(nr, rect);
     });
@@ -146,6 +151,17 @@ var ViewportObserver = /*#__PURE__*/function () {
             }
           };
         }
+        var isRLLPlaceholder = RLLPlaceholderHandlers.getInstance().isRLLPlaceholderHydration(rect);
+        if (isRLLPlaceholder) {
+          return {
+            type: 'mutation:rll-placeholder',
+            mutationData: {
+              attributeName: attributeName,
+              oldValue: oldValue,
+              newValue: newValue
+            }
+          };
+        }
         var lastElementRect = _this.mapVisibleNodeRects.get(target);
         if (lastElementRect && sameRectSize(rect, lastElementRect)) {
           return {

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

@@ -35,7 +35,7 @@ export type VCEntryType = {
     vc: number;
     elements: string[];
 };
-export type VCIgnoreReason = 'image' | 'ssr-hydration' | 'not-visible' | 'non-visual-style' | '';
+export type VCIgnoreReason = 'image' | 'ssr-hydration' | 'not-visible' | 'non-visual-style' | 'rll-placeholder' | '';
 export type ComponentsLogEntry = {
     type?: string;
     targetName: string;