@atlaskit/react-ufo 3.13.13 → 3.13.14

package/dist/es2019/interaction-metrics/index.js

@@ -581,11 +581,11 @@ function callCancelCallbacks(interaction) {
 export function abort(interactionId, abortReason) {
   const interaction = interactions.get(interactionId);
   if (interaction != null) {
-    var _getConfig10, _getConfig10$experime;
+    var _getConfig0, _getConfig0$experimen;
     callCancelCallbacks(interaction);
     interaction.abortReason = abortReason;
     finishInteraction(interactionId, interaction);
-    if ((_getConfig10 = getConfig()) !== null && _getConfig10 !== void 0 && (_getConfig10$experime = _getConfig10.experimentalInteractionMetrics) !== null && _getConfig10$experime !== void 0 && _getConfig10$experime.enabled) {
+    if ((_getConfig0 = getConfig()) !== null && _getConfig0 !== void 0 && (_getConfig0$experimen = _getConfig0.experimentalInteractionMetrics) !== null && _getConfig0$experimen !== void 0 && _getConfig0$experimen.enabled) {
       onExperimentalInteractionComplete(interactionId, interaction);
       remove(interactionId);
     }
@@ -594,12 +594,12 @@ export function abort(interactionId, abortReason) {
 export function abortByNewInteraction(interactionId, interactionName) {
   const interaction = interactions.get(interactionId);
   if (interaction != null) {
-    var _getConfig11, _getConfig11$experime;
+    var _getConfig1, _getConfig1$experimen;
     callCancelCallbacks(interaction);
     interaction.abortReason = 'new_interaction';
     interaction.abortedByInteractionName = interactionName;
     finishInteraction(interactionId, interaction);
-    if ((_getConfig11 = getConfig()) !== null && _getConfig11 !== void 0 && (_getConfig11$experime = _getConfig11.experimentalInteractionMetrics) !== null && _getConfig11$experime !== void 0 && _getConfig11$experime.enabled) {
+    if ((_getConfig1 = getConfig()) !== null && _getConfig1 !== void 0 && (_getConfig1$experimen = _getConfig1.experimentalInteractionMetrics) !== null && _getConfig1$experimen !== void 0 && _getConfig1$experimen.enabled) {
       onExperimentalInteractionComplete(interactionId, interaction);
       remove(interactionId);
     }
@@ -607,7 +607,7 @@ export function abortByNewInteraction(interactionId, interactionName) {
 }
 export function abortAll(abortReason, abortedByInteractionName) {
   interactions.forEach((interaction, interactionId) => {
-    var _getConfig12, _getConfig12$experime;
+    var _getConfig10, _getConfig10$experime;
     const noMoreHolds = interaction.holdActive.size === 0;
     if (!noMoreHolds) {
       callCancelCallbacks(interaction);
@@ -617,7 +617,7 @@ export function abortAll(abortReason, abortedByInteractionName) {
       }
     }
     finishInteraction(interactionId, interaction);
-    if ((_getConfig12 = getConfig()) !== null && _getConfig12 !== void 0 && (_getConfig12$experime = _getConfig12.experimentalInteractionMetrics) !== null && _getConfig12$experime !== void 0 && _getConfig12$experime.enabled) {
+    if ((_getConfig10 = getConfig()) !== null && _getConfig10 !== void 0 && (_getConfig10$experime = _getConfig10.experimentalInteractionMetrics) !== null && _getConfig10$experime !== void 0 && _getConfig10$experime.enabled) {
       onExperimentalInteractionComplete(interactionId, interaction);
       remove(interactionId);
     }
@@ -628,8 +628,8 @@ export function addOnCancelCallback(id, cancelCallback) {
   interaction === null || interaction === void 0 ? void 0 : interaction.cancelCallbacks.push(cancelCallback);
 }
 export function addNewInteraction(interactionId, ufoName, type, startTime, rate, labelStack, routeName, trace = null) {
-  var _getConfig13, _getConfig13$postInte;
-  if ((_getConfig13 = getConfig()) !== null && _getConfig13 !== void 0 && (_getConfig13$postInte = _getConfig13.postInteractionLog) !== null && _getConfig13$postInte !== void 0 && _getConfig13$postInte.enabled) {
+  var _getConfig11, _getConfig11$postInte;
+  if ((_getConfig11 = getConfig()) !== null && _getConfig11 !== void 0 && (_getConfig11$postInte = _getConfig11.postInteractionLog) !== null && _getConfig11$postInte !== void 0 && _getConfig11$postInte.enabled) {
     postInteractionLog.reset();
   }
   let previousTime = startTime;
@@ -717,7 +717,7 @@ export function addNewInteraction(interactionId, ufoName, type, startTime, rate,
     addHoldByID(interactionId, [], ufoName, ufoName, true);
   }
   if (type === 'transition') {
-    var _getConfig14, _getConfig14$experime;
+    var _getConfig12, _getConfig12$experime;
     getVCObserver().start({
       startTime,
       experienceKey: ufoName
@@ -725,7 +725,7 @@ export function addNewInteraction(interactionId, ufoName, type, startTime, rate,
     postInteractionLog.startVCObserver({
       startTime
     });
-    if ((_getConfig14 = getConfig()) !== null && _getConfig14 !== void 0 && (_getConfig14$experime = _getConfig14.experimentalInteractionMetrics) !== null && _getConfig14$experime !== void 0 && _getConfig14$experime.enabled) {
+    if ((_getConfig12 = getConfig()) !== null && _getConfig12 !== void 0 && (_getConfig12$experime = _getConfig12.experimentalInteractionMetrics) !== null && _getConfig12$experime !== void 0 && _getConfig12$experime.enabled) {
       experimentalVC.start({
         startTime
       });

package/dist/es2019/vc/vc-observer/getVCRevisionsData.js

@@ -1,3 +1,4 @@
+import { fg } from '@atlaskit/platform-feature-flags';
 import { isVCRevisionEnabled } from '../../config';
 import { getPageVisibilityState } from '../../hidden-timing';
 const VCParts = ['25', '50', '75', '80', '85', '90', '95', '98', '99'];
@@ -33,27 +34,36 @@ export function getVCRevisionsData({
   isEventAborted,
   calculatedVC,
   calculatedVCNext,
-  experienceKey
+  experienceKey,
+  ratios
 }) {
   const pageVisibilityUpToTTAI = getPageVisibilityState(interaction.start, interaction.end);
   const isVisiblePageVisibleUpToTTAI = pageVisibilityUpToTTAI === 'visible';
   const shouldHaveVCmetric = isVCClean && !isEventAborted && isVisiblePageVisibleUpToTTAI;
   const availableVCRevisionPayloads = [];
   if (isVCRevisionEnabled('fy25.01', experienceKey)) {
-    availableVCRevisionPayloads.push({
+    const revision = {
       revision: 'fy25.01',
       clean: isVCClean,
       'metric:vc90': shouldHaveVCmetric ? calculatedVC.VC['90'] : null,
       vcDetails: createVCDetails(calculatedVC, shouldHaveVCmetric)
-    });
+    };
+    if (shouldHaveVCmetric && fg('platform_ufo_rev_ratios')) {
+      revision.ratios = ratios;
+    }
+    availableVCRevisionPayloads.push(revision);
   }
   if (isVCRevisionEnabled('fy25.02', experienceKey)) {
-    availableVCRevisionPayloads.push({
+    const revision = {
       revision: 'fy25.02',
       clean: isVCClean,
       'metric:vc90': shouldHaveVCmetric ? calculatedVCNext.VC['90'] : null,
       vcDetails: createVCDetails(calculatedVCNext, shouldHaveVCmetric)
-    });
+    };
+    if (shouldHaveVCmetric && fg('platform_ufo_rev_ratios')) {
+      revision.ratios = ratios;
+    }
+    availableVCRevisionPayloads.push(revision);
   }
   return {
     [`${fullPrefix}vc:rev`]: availableVCRevisionPayloads

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

@@ -330,7 +330,8 @@ export class VCObserver {
           VCBox: vcNext.VCBox
         },
         isEventAborted,
-        experienceKey
+        experienceKey,
+        ratios
       });
       const speedIndex = {
         [`ufo:speedIndex`]: isTTVCv1Disabled ? vcNext.VCEntries.speedIndex : VCEntries.speedIndex,

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

@@ -11,6 +11,31 @@ export default class AbstractVCCalculatorBase {
       return 'rect' in entry.data;
     });
   }
+
+  /**
+   * Calculate ratios for each element based on their viewport coverage.
+   */
+  calculateRatios(filteredEntries) {
+    const ratios = {};
+    const viewportWidth = getViewportWidth();
+    const viewportHeight = getViewportHeight();
+    const totalViewportArea = viewportWidth * viewportHeight;
+    if (totalViewportArea === 0) {
+      return ratios;
+    }
+    const elementRects = new Map();
+    for (const entry of filteredEntries) {
+      if ('rect' in entry.data) {
+        const viewportEntry = entry.data;
+        elementRects.set(viewportEntry.elementName, viewportEntry.rect);
+      }
+    }
+    for (const [elementName, rect] of elementRects) {
+      const elementArea = rect.width * rect.height;
+      ratios[elementName] = elementArea / totalViewportArea;
+    }
+    return ratios;
+  }
   async calculateBasic(filteredEntries, startTime, stopTime) {
     const percentiles = [25, 50, 75, 80, 85, 90, 95, 98, 99];
     const viewportEntries = this.filterViewportEntries(filteredEntries);
@@ -135,11 +160,15 @@ export default class AbstractVCCalculatorBase {
     }
     const useDebugInfo = fg('platform_ufo_ttvc_v3_devtool');
     const vcDetails = useDebugInfo ? await this.calculateWithDebugInfo(filteredEntries, startTime, stopTime, isPostInteraction, isVCClean, interactionId, dirtyReason) : await this.calculateBasic(filteredEntries, startTime, stopTime);
-    return {
+    const result = {
       revision: this.revisionNo,
       clean: true,
       'metric:vc90': (_vcDetails$90$t = vcDetails === null || vcDetails === void 0 ? void 0 : (_vcDetails$ = vcDetails['90']) === null || _vcDetails$ === void 0 ? void 0 : _vcDetails$.t) !== null && _vcDetails$90$t !== void 0 ? _vcDetails$90$t : null,
       vcDetails: vcDetails !== null && vcDetails !== void 0 ? vcDetails : undefined
     };
+    if (fg('platform_ufo_rev_ratios')) {
+      result.ratios = this.calculateRatios(filteredEntries);
+    }
+    return result;
   }
 }

package/dist/es2019/vc/vc-observer-new/metric-calculator/fy25_03/index.js

@@ -29,7 +29,7 @@ export default class VCCalculator_FY25_03 extends AbstractVCCalculatorBase {
       if (attributeName === 'data-aui-version' && fg('platform_ufo_filter_out_aui_attribute_changes')) {
         return false;
       }
-      if ((attributeName === 'data-testid' || attributeName === 'data-vc' || attributeName === 'data-ssr-placeholder' || attributeName === 'data-ssr-placeholder-replace' || attributeName === 'data-vc-nvs' || attributeName === 'data-media-vc-wrapper' || attributeName === 'data-auto-scrollable' || attributeName === 'id' || attributeName === 'tabindex' || NON_VISUAL_ARIA_ATTRIBUTES.includes(attributeName)) && fg('platform_ufo_ignore_non_vis_attributes')) {
+      if (attributeName === 'data-testid' || attributeName === 'data-vc' || attributeName === 'data-ssr-placeholder' || attributeName === 'data-ssr-placeholder-replace' || attributeName === 'data-vc-nvs' || attributeName === 'data-media-vc-wrapper' || attributeName === 'data-auto-scrollable' || attributeName === 'id' || attributeName === 'tabindex' || NON_VISUAL_ARIA_ATTRIBUTES.includes(attributeName)) {
         return false;
       }
       return true;

package/dist/esm/config/index.js

@@ -283,8 +283,8 @@ export function getDoNotAbortActivePressInteraction() {
     if (!config) {
       return undefined;
     }
-    var _config10 = config,
-      doNotAbortActivePressInteraction = _config10.doNotAbortActivePressInteraction;
+    var _config0 = config,
+      doNotAbortActivePressInteraction = _config0.doNotAbortActivePressInteraction;
     return doNotAbortActivePressInteraction;
   } catch (e) {
     return undefined;
@@ -297,8 +297,8 @@ export function getDoNotAbortActivePressInteractionOnTransition() {
     if (!config) {
       return undefined;
     }
-    var _config11 = config,
-      doNotAbortActivePressInteractionOnTransition = _config11.doNotAbortActivePressInteractionOnTransition;
+    var _config1 = config,
+      doNotAbortActivePressInteractionOnTransition = _config1.doNotAbortActivePressInteractionOnTransition;
     return doNotAbortActivePressInteractionOnTransition;
   } catch (e) {
     return undefined;

package/dist/esm/interaction-metrics/index.js

@@ -659,11 +659,11 @@ function callCancelCallbacks(interaction) {
 export function abort(interactionId, abortReason) {
   var interaction = interactions.get(interactionId);
   if (interaction != null) {
-    var _getConfig10;
+    var _getConfig0;
     callCancelCallbacks(interaction);
     interaction.abortReason = abortReason;
     finishInteraction(interactionId, interaction);
-    if ((_getConfig10 = getConfig()) !== null && _getConfig10 !== void 0 && (_getConfig10 = _getConfig10.experimentalInteractionMetrics) !== null && _getConfig10 !== void 0 && _getConfig10.enabled) {
+    if ((_getConfig0 = getConfig()) !== null && _getConfig0 !== void 0 && (_getConfig0 = _getConfig0.experimentalInteractionMetrics) !== null && _getConfig0 !== void 0 && _getConfig0.enabled) {
       onExperimentalInteractionComplete(interactionId, interaction);
       remove(interactionId);
     }
@@ -672,12 +672,12 @@ export function abort(interactionId, abortReason) {
 export function abortByNewInteraction(interactionId, interactionName) {
   var interaction = interactions.get(interactionId);
   if (interaction != null) {
-    var _getConfig11;
+    var _getConfig1;
     callCancelCallbacks(interaction);
     interaction.abortReason = 'new_interaction';
     interaction.abortedByInteractionName = interactionName;
     finishInteraction(interactionId, interaction);
-    if ((_getConfig11 = getConfig()) !== null && _getConfig11 !== void 0 && (_getConfig11 = _getConfig11.experimentalInteractionMetrics) !== null && _getConfig11 !== void 0 && _getConfig11.enabled) {
+    if ((_getConfig1 = getConfig()) !== null && _getConfig1 !== void 0 && (_getConfig1 = _getConfig1.experimentalInteractionMetrics) !== null && _getConfig1 !== void 0 && _getConfig1.enabled) {
       onExperimentalInteractionComplete(interactionId, interaction);
       remove(interactionId);
     }
@@ -685,7 +685,7 @@ export function abortByNewInteraction(interactionId, interactionName) {
 }
 export function abortAll(abortReason, abortedByInteractionName) {
   interactions.forEach(function (interaction, interactionId) {
-    var _getConfig12;
+    var _getConfig10;
     var noMoreHolds = interaction.holdActive.size === 0;
     if (!noMoreHolds) {
       callCancelCallbacks(interaction);
@@ -695,7 +695,7 @@ export function abortAll(abortReason, abortedByInteractionName) {
       }
     }
     finishInteraction(interactionId, interaction);
-    if ((_getConfig12 = getConfig()) !== null && _getConfig12 !== void 0 && (_getConfig12 = _getConfig12.experimentalInteractionMetrics) !== null && _getConfig12 !== void 0 && _getConfig12.enabled) {
+    if ((_getConfig10 = getConfig()) !== null && _getConfig10 !== void 0 && (_getConfig10 = _getConfig10.experimentalInteractionMetrics) !== null && _getConfig10 !== void 0 && _getConfig10.enabled) {
       onExperimentalInteractionComplete(interactionId, interaction);
       remove(interactionId);
     }
@@ -706,9 +706,9 @@ export function addOnCancelCallback(id, cancelCallback) {
   interaction === null || interaction === void 0 || interaction.cancelCallbacks.push(cancelCallback);
 }
 export function addNewInteraction(interactionId, ufoName, type, startTime, rate, labelStack, routeName) {
-  var _getConfig13;
+  var _getConfig11;
   var trace = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : null;
-  if ((_getConfig13 = getConfig()) !== null && _getConfig13 !== void 0 && (_getConfig13 = _getConfig13.postInteractionLog) !== null && _getConfig13 !== void 0 && _getConfig13.enabled) {
+  if ((_getConfig11 = getConfig()) !== null && _getConfig11 !== void 0 && (_getConfig11 = _getConfig11.postInteractionLog) !== null && _getConfig11 !== void 0 && _getConfig11.enabled) {
     postInteractionLog.reset();
   }
   var previousTime = startTime;
@@ -796,7 +796,7 @@ export function addNewInteraction(interactionId, ufoName, type, startTime, rate,
     addHoldByID(interactionId, [], ufoName, ufoName, true);
   }
   if (type === 'transition') {
-    var _getConfig14;
+    var _getConfig12;
     getVCObserver().start({
       startTime: startTime,
       experienceKey: ufoName
@@ -804,7 +804,7 @@ export function addNewInteraction(interactionId, ufoName, type, startTime, rate,
     postInteractionLog.startVCObserver({
       startTime: startTime
     });
-    if ((_getConfig14 = getConfig()) !== null && _getConfig14 !== void 0 && (_getConfig14 = _getConfig14.experimentalInteractionMetrics) !== null && _getConfig14 !== void 0 && _getConfig14.enabled) {
+    if ((_getConfig12 = getConfig()) !== null && _getConfig12 !== void 0 && (_getConfig12 = _getConfig12.experimentalInteractionMetrics) !== null && _getConfig12 !== void 0 && _getConfig12.enabled) {
       experimentalVC.start({
         startTime: startTime
       });

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

@@ -2,6 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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; }
+import { fg } from '@atlaskit/platform-feature-flags';
 import { isVCRevisionEnabled } from '../../config';
 import { getPageVisibilityState } from '../../hidden-timing';
 var VCParts = ['25', '50', '75', '80', '85', '90', '95', '98', '99'];
@@ -43,26 +44,35 @@ export function getVCRevisionsData(_ref) {
     isEventAborted = _ref.isEventAborted,
     calculatedVC = _ref.calculatedVC,
     calculatedVCNext = _ref.calculatedVCNext,
-    experienceKey = _ref.experienceKey;
+    experienceKey = _ref.experienceKey,
+    ratios = _ref.ratios;
   var pageVisibilityUpToTTAI = getPageVisibilityState(interaction.start, interaction.end);
   var isVisiblePageVisibleUpToTTAI = pageVisibilityUpToTTAI === 'visible';
   var shouldHaveVCmetric = isVCClean && !isEventAborted && isVisiblePageVisibleUpToTTAI;
   var availableVCRevisionPayloads = [];
   if (isVCRevisionEnabled('fy25.01', experienceKey)) {
-    availableVCRevisionPayloads.push({
+    var revision = {
       revision: 'fy25.01',
       clean: isVCClean,
       'metric:vc90': shouldHaveVCmetric ? calculatedVC.VC['90'] : null,
       vcDetails: createVCDetails(calculatedVC, shouldHaveVCmetric)
-    });
+    };
+    if (shouldHaveVCmetric && fg('platform_ufo_rev_ratios')) {
+      revision.ratios = ratios;
+    }
+    availableVCRevisionPayloads.push(revision);
   }
   if (isVCRevisionEnabled('fy25.02', experienceKey)) {
-    availableVCRevisionPayloads.push({
+    var _revision = {
       revision: 'fy25.02',
       clean: isVCClean,
       'metric:vc90': shouldHaveVCmetric ? calculatedVCNext.VC['90'] : null,
       vcDetails: createVCDetails(calculatedVCNext, shouldHaveVCmetric)
-    });
+    };
+    if (shouldHaveVCmetric && fg('platform_ufo_rev_ratios')) {
+      _revision.ratios = ratios;
+    }
+    availableVCRevisionPayloads.push(_revision);
   }
   return _defineProperty({}, "".concat(fullPrefix, "vc:rev"), availableVCRevisionPayloads);
 }

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

@@ -311,7 +311,8 @@ export var VCObserver = /*#__PURE__*/function () {
                   VCBox: vcNext.VCBox
                 },
                 isEventAborted: isEventAborted,
-                experienceKey: experienceKey
+                experienceKey: experienceKey,
+                ratios: ratios
               });
               speedIndex = _defineProperty(_defineProperty({}, "ufo:speedIndex", isTTVCv1Disabled ? vcNext.VCEntries.speedIndex : VCEntries.speedIndex), "ufo:next:speedIndex", vcNext.VCEntries.speedIndex);
               SSRRatio = VCObserver.getSSRRatio(VCEntries.rel, ssr);
@@ -420,10 +421,10 @@ export var VCObserver = /*#__PURE__*/function () {
       _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 (_ref11) {
-          var _ref12 = _slicedToArray(_ref11, 2),
-            key = _ref12[0],
-            time = _ref12[1];
+        Object.entries(window.__SSR_ABORT_LISTENERS__.aborts).forEach(function (_ref1) {
+          var _ref10 = _slicedToArray(_ref1, 2),
+            key = _ref10[0],
+            time = _ref10[1];
           if (time) {
             _this.abortReasonCallback(key, time);
           }
@@ -453,8 +454,8 @@ export var VCObserver = /*#__PURE__*/function () {
   }
   return _createClass(VCObserver, [{
     key: "start",
-    value: function start(_ref13) {
-      var startTime = _ref13.startTime;
+    value: function start(_ref11) {
+      var startTime = _ref11.startTime;
       this.active = true;
       if (this.observers.isBrowserSupported()) {
         this.setViewportSize();
@@ -476,12 +477,12 @@ export var VCObserver = /*#__PURE__*/function () {
   }, {
     key: "getIgnoredElements",
     value: function getIgnoredElements(componentsLog) {
-      return Object.values(componentsLog).flat().filter(function (_ref14) {
-        var ignoreReason = _ref14.ignoreReason;
+      return Object.values(componentsLog).flat().filter(function (_ref12) {
+        var ignoreReason = _ref12.ignoreReason;
         return Boolean(ignoreReason);
-      }).map(function (_ref15) {
-        var targetName = _ref15.targetName,
-          ignoreReason = _ref15.ignoreReason;
+      }).map(function (_ref13) {
+        var targetName = _ref13.targetName,
+          ignoreReason = _ref13.ignoreReason;
         return {
           targetName: targetName,
           ignoreReason: ignoreReason
@@ -611,13 +612,13 @@ export var VCObserver = /*#__PURE__*/function () {
     }
   }, {
     key: "calculateVC",
-    value: function calculateVC(_ref16) {
-      var heatmap = _ref16.heatmap,
-        _ref16$ssr = _ref16.ssr,
-        ssr = _ref16$ssr === void 0 ? UNUSED_SECTOR : _ref16$ssr,
-        componentsLog = _ref16.componentsLog,
-        viewport = _ref16.viewport,
-        fixSSRAttribution = _ref16.fixSSRAttribution;
+    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;
       var lastUpdate = {};
       var totalPainted = 0;
       var ssrTime = fixSSRAttribution ? Math.floor(ssr) : ssr;
@@ -684,11 +685,11 @@ export var VCObserver = /*#__PURE__*/function () {
         });
         return VCRatio;
       }, 0);
-      var VCEntries = entries.reduce(function (acc, _ref17, i) {
+      var VCEntries = entries.reduce(function (acc, _ref15, i) {
         var _acc$abs, _componentsLog$timest, _acc$rel$vc, _acc$rel;
-        var _ref18 = _slicedToArray(_ref17, 2),
-          timestamp = _ref18[0],
-          entryPainted = _ref18[1];
+        var _ref16 = _slicedToArray(_ref15, 2),
+          timestamp = _ref16[0],
+          entryPainted = _ref16[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-new/metric-calculator/abstract-base-vc-calculator.js

@@ -1,10 +1,11 @@
 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 _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; }
-import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { fg } from '@atlaskit/platform-feature-flags';
 import { calculateTTVCPercentiles, calculateTTVCPercentilesWithDebugInfo } from './percentile-calc';
 import getViewportHeight from './utils/get-viewport-height';
@@ -21,6 +22,53 @@ var AbstractVCCalculatorBase = /*#__PURE__*/function () {
         return 'rect' in entry.data;
       });
     }
+
+    /**
+     * Calculate ratios for each element based on their viewport coverage.
+     */
+  }, {
+    key: "calculateRatios",
+    value: function calculateRatios(filteredEntries) {
+      var ratios = {};
+      var viewportWidth = getViewportWidth();
+      var viewportHeight = getViewportHeight();
+      var totalViewportArea = viewportWidth * viewportHeight;
+      if (totalViewportArea === 0) {
+        return ratios;
+      }
+      var elementRects = new Map();
+      var _iterator = _createForOfIteratorHelper(filteredEntries),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var _entry = _step.value;
+          if ('rect' in _entry.data) {
+            var viewportEntry = _entry.data;
+            elementRects.set(viewportEntry.elementName, viewportEntry.rect);
+          }
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+      var _iterator2 = _createForOfIteratorHelper(elementRects),
+        _step2;
+      try {
+        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+          var _step2$value = _slicedToArray(_step2.value, 2),
+            elementName = _step2$value[0],
+            rect = _step2$value[1];
+          var elementArea = rect.width * rect.height;
+          ratios[elementName] = elementArea / totalViewportArea;
+        }
+      } catch (err) {
+        _iterator2.e(err);
+      } finally {
+        _iterator2.f();
+      }
+      return ratios;
+    }
   }, {
     key: "calculateBasic",
     value: function () {
@@ -60,7 +108,7 @@ var AbstractVCCalculatorBase = /*#__PURE__*/function () {
     key: "calculateWithDebugInfo",
     value: function () {
       var _calculateWithDebugInfo = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(filteredEntries, startTime, stopTime, isPostInteraction, isVCClean, interactionId, dirtyReason) {
-        var percentiles, viewportEntries, vcLogs, vcDetails, percentileIndex, entryDataBuffer, _iterator, _step, _entry, time, viewportPercentage, entries, elementNames, previousResult, i, percentile, _ufo_devtool_onVCRev, _ref;
+        var percentiles, viewportEntries, vcLogs, vcDetails, percentileIndex, entryDataBuffer, _iterator3, _step3, _entry2, time, viewportPercentage, entries, elementNames, previousResult, i, percentile, _ufo_devtool_onVCRev, _ref;
         return _regeneratorRuntime.wrap(function _callee2$(_context2) {
           while (1) switch (_context2.prev = _context2.next) {
             case 0:
@@ -85,16 +133,16 @@ var AbstractVCCalculatorBase = /*#__PURE__*/function () {
                 _context2.next = 28;
                 break;
               }
-              _iterator = _createForOfIteratorHelper(vcLogs);
+              _iterator3 = _createForOfIteratorHelper(vcLogs);
               _context2.prev = 10;
-              _iterator.s();
+              _iterator3.s();
             case 12:
-              if ((_step = _iterator.n()).done) {
+              if ((_step3 = _iterator3.n()).done) {
                 _context2.next = 20;
                 break;
               }
-              _entry = _step.value;
-              time = _entry.time, viewportPercentage = _entry.viewportPercentage, entries = _entry.entries; // Only process entries if we haven't reached all percentiles
+              _entry2 = _step3.value;
+              time = _entry2.time, viewportPercentage = _entry2.viewportPercentage, entries = _entry2.entries; // Only process entries if we haven't reached all percentiles
               if (!(percentileIndex >= percentiles.length)) {
                 _context2.next = 17;
                 break;
@@ -131,10 +179,10 @@ var AbstractVCCalculatorBase = /*#__PURE__*/function () {
             case 22:
               _context2.prev = 22;
               _context2.t0 = _context2["catch"](10);
-              _iterator.e(_context2.t0);
+              _iterator3.e(_context2.t0);
             case 25:
               _context2.prev = 25;
-              _iterator.f();
+              _iterator3.f();
               return _context2.finish(25);
             case 28:
               // Fill in any missing percentiles with the last known values
@@ -174,7 +222,7 @@ var AbstractVCCalculatorBase = /*#__PURE__*/function () {
           }
         }, _callee2, this, [[10, 22, 25, 28]]);
       }));
-      function calculateWithDebugInfo(_x4, _x5, _x6, _x7, _x8, _x9, _x10) {
+      function calculateWithDebugInfo(_x4, _x5, _x6, _x7, _x8, _x9, _x0) {
         return _calculateWithDebugInfo.apply(this, arguments);
       }
       return calculateWithDebugInfo;
@@ -186,7 +234,7 @@ var AbstractVCCalculatorBase = /*#__PURE__*/function () {
         var _this = this,
           _vcDetails$90$t,
           _vcDetails$;
-        var startTime, stopTime, orderedEntries, interactionId, isPostInteraction, filteredEntries, isVCClean, dirtyReason, getVCCleanStatusResult, useDebugInfo, vcDetails;
+        var startTime, stopTime, orderedEntries, interactionId, isPostInteraction, filteredEntries, isVCClean, dirtyReason, getVCCleanStatusResult, useDebugInfo, vcDetails, result;
         return _regeneratorRuntime.wrap(function _callee3$(_context3) {
           while (1) switch (_context3.prev = _context3.next) {
             case 0:
@@ -226,19 +274,23 @@ var AbstractVCCalculatorBase = /*#__PURE__*/function () {
               _context3.t0 = _context3.sent;
             case 17:
               vcDetails = _context3.t0;
-              return _context3.abrupt("return", {
+              result = {
                 revision: this.revisionNo,
                 clean: true,
                 'metric:vc90': (_vcDetails$90$t = vcDetails === null || vcDetails === void 0 || (_vcDetails$ = vcDetails['90']) === null || _vcDetails$ === void 0 ? void 0 : _vcDetails$.t) !== null && _vcDetails$90$t !== void 0 ? _vcDetails$90$t : null,
                 vcDetails: vcDetails !== null && vcDetails !== void 0 ? vcDetails : undefined
-              });
-            case 19:
+              };
+              if (fg('platform_ufo_rev_ratios')) {
+                result.ratios = this.calculateRatios(filteredEntries);
+              }
+              return _context3.abrupt("return", result);
+            case 21:
             case "end":
               return _context3.stop();
           }
         }, _callee3, this);
       }));
-      function calculate(_x11) {
+      function calculate(_x1) {
         return _calculate.apply(this, arguments);
       }
       return calculate;

package/dist/esm/vc/vc-observer-new/metric-calculator/fy25_03/index.js

@@ -40,7 +40,7 @@ var VCCalculator_FY25_03 = /*#__PURE__*/function (_AbstractVCCalculator) {
         if (attributeName === 'data-aui-version' && fg('platform_ufo_filter_out_aui_attribute_changes')) {
           return false;
         }
-        if ((attributeName === 'data-testid' || attributeName === 'data-vc' || attributeName === 'data-ssr-placeholder' || attributeName === 'data-ssr-placeholder-replace' || attributeName === 'data-vc-nvs' || attributeName === 'data-media-vc-wrapper' || attributeName === 'data-auto-scrollable' || attributeName === 'id' || attributeName === 'tabindex' || NON_VISUAL_ARIA_ATTRIBUTES.includes(attributeName)) && fg('platform_ufo_ignore_non_vis_attributes')) {
+        if (attributeName === 'data-testid' || attributeName === 'data-vc' || attributeName === 'data-ssr-placeholder' || attributeName === 'data-ssr-placeholder-replace' || attributeName === 'data-vc-nvs' || attributeName === 'data-media-vc-wrapper' || attributeName === 'data-auto-scrollable' || attributeName === 'id' || attributeName === 'tabindex' || NON_VISUAL_ARIA_ATTRIBUTES.includes(attributeName)) {
           return false;
         }
         return true;

package/dist/esm/vc/vc-observer-new/metric-calculator/percentile-calc/canvas-heatmap/index.js

@@ -204,8 +204,8 @@ export function calculatePercentilesWithDebugInfo(timePixelCounts, elementMap, t
   var sortedEntries = Array.from(timePixelCounts.entries()).sort(function (_ref7, _ref8) {
     var _ref9 = _slicedToArray(_ref7, 1),
       timeA = _ref9[0];
-    var _ref10 = _slicedToArray(_ref8, 1),
-      timeB = _ref10[0];
+    var _ref0 = _slicedToArray(_ref8, 1),
+      timeB = _ref0[0];
     return Number(timeA) - Number(timeB);
   });
   for (var i = 0; i < sortedEntries.length; i++) {

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

@@ -113,6 +113,7 @@ export type RevisionPayloadEntry = {
     revision: string;
     clean: boolean;
     vcDetails?: RevisionPayloadVCDetails;
+    ratios?: VCRatioType;
     abortReason?: VCAbortReason | null;
 };
 export type RevisionPayload = RevisionPayloadEntry[];