@atlaskit/media-card 79.12.0 → 79.13.0

package/dist/cjs/utils/ufoExperiences.js

@@ -4,19 +4,402 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.startUfoExperience = exports.shouldPerformanceBeSampled = exports.completeUfoExperience = exports.abortUfoExperience = void 0;
+exports.useMediaCardUfoExperience = exports.startUfoExperience = exports.shouldPerformanceBeSampled = exports.completeUfoExperience = exports.abortUfoExperience = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _react = require("react");
 var _ufo = require("@atlaskit/ufo");
 var _mediaCommon = require("@atlaskit/media-common");
 var _uuidValidate = _interopRequireDefault(require("uuid-validate"));
 var _analytics = require("./analytics");
 var _errors = require("../errors");
 var _mediaClient = require("@atlaskit/media-client");
+var _interactionMetrics = require("@atlaskit/react-ufo/interaction-metrics");
+var _globalScope = require("./globalScope/globalScope");
 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) { (0, _defineProperty2.default)(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; }
 var packageName = "@atlaskit/media-card";
-var packageVersion = "0.0.0-development";
+var packageVersion = "79.13.0";
 var SAMPLE_RATE = 0.05;
+
+/**
+ * Determines if performance events should be sampled for this instance.
+ * Approximately 5% of instances will be sampled.
+ */
+var shouldPerformanceBeSampled = exports.shouldPerformanceBeSampled = function shouldPerformanceBeSampled() {
+  return Math.random() < SAMPLE_RATE;
+};
+
+/**
+ * Gets the UFO interaction start time.
+ * For page_load: returns 0 (relative to page navigation)
+ * For SPA transitions: returns performance.now() when transition started
+ */
+var getInteractionStartTime = function getInteractionStartTime() {
+  var _interaction$start;
+  var interaction = (0, _interactionMetrics.getActiveInteraction)();
+  return (_interaction$start = interaction === null || interaction === void 0 ? void 0 : interaction.start) !== null && _interaction$start !== void 0 ? _interaction$start : 0;
+};
+
+/**
+ * Finds a performance resource timing entry by matching a full URI.
+ * Searches from the end (most recent) to find the latest matching entry.
+ */
+var findPerformanceEntryByName = function findPerformanceEntryByName(name) {
+  var _getMediaGlobalScope$;
+  if (typeof performance === 'undefined' || !performance.getEntriesByType) {
+    return undefined;
+  }
+
+  // For data URIs (base64), there won't be a performance entry
+  if (name.startsWith('data:')) {
+    return undefined;
+  }
+  var entries = performance.getEntriesByType('resource');
+  var ssrPerformanceEntries = (_getMediaGlobalScope$ = (0, _globalScope.getMediaGlobalScope)().performanceEntries) !== null && _getMediaGlobalScope$ !== void 0 ? _getMediaGlobalScope$ : [];
+  return [].concat((0, _toConsumableArray2.default)(ssrPerformanceEntries), (0, _toConsumableArray2.default)(entries)).find(function (entry) {
+    return name.includes(entry.name);
+  });
+};
+
+/**
+ * Creates timing configuration for the UFO experience based on the performance entry.
+ * These timings will be calculated by UFO using the marks we add.
+ */
+var createTimingsConfig = function createTimingsConfig(prefix) {
+  return [{
+    key: "".concat(prefix, ":resourceTiming"),
+    startMark: "".concat(prefix, ":resourceTiming:start"),
+    endMark: "".concat(prefix, ":resourceTiming:end")
+  }, {
+    key: "".concat(prefix, ":dnsLookup"),
+    startMark: "".concat(prefix, ":dnsLookup:start"),
+    endMark: "".concat(prefix, ":dnsLookup:end")
+  }, {
+    key: "".concat(prefix, ":tcpHandshake"),
+    startMark: "".concat(prefix, ":tcpHandshake:start"),
+    endMark: "".concat(prefix, ":tcpHandshake:end")
+  }, {
+    key: "".concat(prefix, ":tlsNegotiation"),
+    startMark: "".concat(prefix, ":tlsNegotiation:start"),
+    endMark: "".concat(prefix, ":tlsNegotiation:end")
+  }, {
+    key: "".concat(prefix, ":ttfb"),
+    startMark: "".concat(prefix, ":ttfb:start"),
+    endMark: "".concat(prefix, ":ttfb:end")
+  }, {
+    key: "".concat(prefix, ":contentDownload"),
+    startMark: "".concat(prefix, ":contentDownload:start"),
+    endMark: "".concat(prefix, ":contentDownload:end")
+  }, {
+    key: "".concat(prefix, ":redirect"),
+    startMark: "".concat(prefix, ":redirect:start"),
+    endMark: "".concat(prefix, ":redirect:end")
+  }, {
+    key: "".concat(prefix, ":fetchTime"),
+    startMark: "".concat(prefix, ":fetchTime:start"),
+    endMark: "".concat(prefix, ":fetchTime:end")
+  }];
+};
+
+/**
+ * Creates resource timing metadata from a performance entry.
+ * Only includes non-timing information (sizes, cache status, protocol, CDN info).
+ * Timing durations are captured via marks which feed into the timings config.
+ */
+var createResourceTimingMetadata = function createResourceTimingMetadata(entry) {
+  var _entry$serverTiming$s, _entry$serverTiming, _entry$serverTiming2, _entry$serverTiming3;
+  return {
+    // Size information
+    resourceTransferSize: entry.transferSize,
+    resourceDecodedBodySize: entry.decodedBodySize,
+    // Request info
+    resourceInitiatorType: entry.initiatorType,
+    resourceNextHopProtocol: entry.nextHopProtocol,
+    // Cache status
+    resourceBrowserCacheHit: entry.transferSize === 0,
+    // Server timing (CDN metrics)
+    resourceCdnCacheHit: (_entry$serverTiming$s = (_entry$serverTiming = entry.serverTiming) === null || _entry$serverTiming === void 0 ? void 0 : _entry$serverTiming.some(function (_ref) {
+      var name = _ref.name;
+      return name === 'cdn-cache-hit';
+    })) !== null && _entry$serverTiming$s !== void 0 ? _entry$serverTiming$s : false,
+    resourceCdnDownstreamFBL: (_entry$serverTiming2 = entry.serverTiming) === null || _entry$serverTiming2 === void 0 || (_entry$serverTiming2 = _entry$serverTiming2.find(function (_ref2) {
+      var name = _ref2.name;
+      return name === 'cdn-downstream-fbl';
+    })) === null || _entry$serverTiming2 === void 0 ? void 0 : _entry$serverTiming2.duration,
+    resourceCdnUpstreamFBL: (_entry$serverTiming3 = entry.serverTiming) === null || _entry$serverTiming3 === void 0 || (_entry$serverTiming3 = _entry$serverTiming3.find(function (_ref3) {
+      var name = _ref3.name;
+      return name === 'cdn-upstream-fbl';
+    })) === null || _entry$serverTiming3 === void 0 ? void 0 : _entry$serverTiming3.duration
+  };
+};
+
+/**
+ * Adds timing marks from a performance resource timing entry to the UFO experience.
+ */
+var addResourceTimingMarks = function addResourceTimingMarks(experience, entry, interactionStartTime, prefix) {
+  var addMark = function addMark(name, start, end) {
+    var relativeStart = start - interactionStartTime;
+    var relativeEnd = end - interactionStartTime;
+    if (relativeEnd > relativeStart && relativeStart >= 0) {
+      experience.mark("".concat(prefix, ":").concat(name, ":start"), relativeStart);
+      experience.mark("".concat(prefix, ":").concat(name, ":end"), relativeEnd);
+    }
+  };
+
+  // Overall resource timing
+  addMark('resourceTiming', entry.startTime, entry.responseEnd);
+
+  // DNS lookup
+  addMark('dnsLookup', entry.domainLookupStart, entry.domainLookupEnd);
+
+  // TCP handshake
+  addMark('tcpHandshake', entry.connectStart, entry.connectEnd);
+
+  // TLS negotiation (only for HTTPS)
+  if (entry.secureConnectionStart > 0) {
+    addMark('tlsNegotiation', entry.secureConnectionStart, entry.requestStart);
+  }
+
+  // Request to first byte (TTFB)
+  addMark('ttfb', entry.requestStart, entry.responseStart);
+
+  // Content download
+  addMark('contentDownload', entry.responseStart, entry.responseEnd);
+
+  // Redirect time (if any)
+  if (entry.redirectStart > 0 && entry.redirectEnd > 0) {
+    addMark('redirect', entry.redirectStart, entry.redirectEnd);
+  }
+
+  // Total fetch time (without redirect) - from fetchStart to responseEnd
+  addMark('fetchTime', entry.fetchStart, entry.responseEnd);
+};
+var sanitiseFileAttributes = function sanitiseFileAttributes(fileAttributes) {
+  var sanitisedFileId = 'INVALID_FILE_ID';
+  if (fileAttributes.fileId === 'external-image' || (0, _uuidValidate.default)(fileAttributes.fileId)) {
+    sanitisedFileId = fileAttributes.fileId;
+  }
+  return _objectSpread(_objectSpread({}, fileAttributes), {}, {
+    fileId: sanitisedFileId
+  });
+};
+var getBasePayloadAttributes = function getBasePayloadAttributes() {
+  return {
+    packageName: packageName,
+    packageVersion: packageVersion,
+    mediaEnvironment: (0, _mediaClient.getMediaEnvironment)(),
+    mediaRegion: (0, _mediaClient.getMediaRegion)()
+  };
+};
+/**
+ * Creates a new UFO experience instance with the given configuration.
+ */
+var createExperience = function createExperience(instanceId) {
+  var timings = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  return new _ufo.UFOExperience('media-card-render', {
+    platform: {
+      component: 'media-card'
+    },
+    type: _ufo.ExperienceTypes.Experience,
+    performanceType: _ufo.ExperiencePerformanceTypes.InlineResult,
+    featureFlags: (0, _mediaCommon.getFeatureFlagKeysAllProducts)(),
+    timings: timings
+  }, instanceId);
+};
+
+/**
+ * Hook to create a UFO experience tied to a media card component lifecycle.
+ *
+ * This creates a unique UFOExperience instance per component, allowing:
+ * - Unique timing config per instance
+ * - Direct control over experience lifecycle
+ * - Proper cleanup on unmount
+ *
+ * @example
+ * ```tsx
+ * const ufoExperience = useMediaCardUfoExperience({
+ *   instanceId: internalOccurrenceKey,
+ *   enabled: shouldSendPerformanceEvent,
+ * });
+ *
+ * // On card visible
+ * ufoExperience.start();
+ *
+ * // On card complete/error
+ * ufoExperience.complete(status, fileAttributes, fileStateFlags, ssrReliability, error, ssrPreviewInfo);
+ * ```
+ */
+var useMediaCardUfoExperience = exports.useMediaCardUfoExperience = function useMediaCardUfoExperience(_ref4) {
+  var instanceId = _ref4.instanceId,
+    enabled = _ref4.enabled;
+  // Store the start time when start() is called - experience creation is deferred to complete()
+  var startTimeRef = (0, _react.useRef)(undefined);
+  var hasStartedRef = (0, _react.useRef)(false);
+  // Store the experience so abort() can use it after complete() has run
+  var experienceRef = (0, _react.useRef)(null);
+
+  // Reset refs when instanceId changes (new card instance)
+  (0, _react.useEffect)(function () {
+    return function () {
+      // Note: Don't clear experienceRef here as abort() might still need it
+      // The component's cleanup calls abort() which handles final state
+      hasStartedRef.current = false;
+      startTimeRef.current = undefined;
+    };
+  }, [instanceId]);
+  var start = (0, _react.useCallback)(function (options) {
+    if (!enabled) {
+      return;
+    }
+    // Store the start time - experience will be created in complete()
+    // This allows us to have the correct timings config when creating the experience
+    hasStartedRef.current = true;
+    startTimeRef.current = options !== null && options !== void 0 && options.useInteractionTime ? getInteractionStartTime() : performance.now();
+  }, [enabled]);
+  var complete = (0, _react.useCallback)(function (status, fileAttributes, fileStateFlags, ssrReliability) {
+    var error = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : new _errors.MediaCardError('missing-error-data');
+    var ssrPreviewInfo = arguments.length > 5 ? arguments[5] : undefined;
+    // Only complete for terminal statuses - ignore intermediate statuses like 'loading-preview'
+    if (!['complete', 'error', 'failed-processing'].includes(status)) {
+      return;
+    }
+    if (!enabled || !hasStartedRef.current) {
+      return;
+    }
+    var interactionStartTime = getInteractionStartTime();
+
+    // Determine timings config based on SSR status
+    var timingsConfig = [];
+    var resourceTimingEntry;
+    if (ssrPreviewInfo !== null && ssrPreviewInfo !== void 0 && ssrPreviewInfo.wasSSRSuccessful && ssrPreviewInfo.dataUri) {
+      var _ssrPreviewInfo$srcse;
+      resourceTimingEntry = findPerformanceEntryByName((_ssrPreviewInfo$srcse = ssrPreviewInfo.srcset) !== null && _ssrPreviewInfo$srcse !== void 0 ? _ssrPreviewInfo$srcse : ssrPreviewInfo.dataUri);
+      if (resourceTimingEntry) {
+        timingsConfig = createTimingsConfig('ssr');
+      }
+    }
+
+    // Create the experience with the correct timings config
+    var experience = createExperience(instanceId, timingsConfig);
+    experienceRef.current = experience;
+    experience.start(startTimeRef.current);
+
+    // Add timing marks and metadata based on strategy
+    if (ssrPreviewInfo !== null && ssrPreviewInfo !== void 0 && ssrPreviewInfo.wasSSRSuccessful && ssrPreviewInfo.dataUri) {
+      if (resourceTimingEntry) {
+        addResourceTimingMarks(experience, resourceTimingEntry, interactionStartTime, 'ssr');
+        experience.addMetadata(_objectSpread(_objectSpread({}, createResourceTimingMetadata(resourceTimingEntry)), {}, {
+          timingStrategy: 'ssr-resource-timing'
+        }));
+      } else {
+        experience.addMetadata({
+          timingStrategy: 'ssr-no-entry-found'
+        });
+      }
+    } else if (ssrPreviewInfo !== null && ssrPreviewInfo !== void 0 && ssrPreviewInfo.wasSSRAttempted) {
+      // Strategy 2: SSR was attempted but failed - use interaction start time
+      experience.addMetadata({
+        timingStrategy: 'ssr-failed',
+        interactionStartTime: interactionStartTime
+      });
+      experience.mark('interactionStart', 0);
+    } else {
+      // Strategy 3: No SSR - CSR mount-based behavior
+      experience.addMetadata({
+        timingStrategy: 'csr-mount-based'
+      });
+    }
+
+    // Complete the experience with appropriate state
+    var sanitisedFileAttributes = sanitiseFileAttributes(fileAttributes);
+    switch (status) {
+      case 'complete':
+        experience.success({
+          metadata: _objectSpread({
+            fileAttributes: sanitisedFileAttributes,
+            ssrReliability: ssrReliability,
+            fileStateFlags: fileStateFlags
+          }, getBasePayloadAttributes())
+        });
+        break;
+      case 'failed-processing':
+        experience.failure({
+          metadata: _objectSpread({
+            fileAttributes: sanitisedFileAttributes,
+            ssrReliability: ssrReliability,
+            fileStateFlags: fileStateFlags,
+            failReason: 'failed-processing'
+          }, getBasePayloadAttributes())
+        });
+        break;
+      case 'error':
+        experience.failure({
+          metadata: _objectSpread(_objectSpread({
+            fileAttributes: sanitisedFileAttributes,
+            ssrReliability: ssrReliability,
+            fileStateFlags: fileStateFlags
+          }, (0, _analytics.extractErrorInfo)(error)), {}, {
+            request: (0, _analytics.getRenderErrorRequestMetadata)(error)
+          }, getBasePayloadAttributes())
+        });
+        break;
+    }
+
+    // Reset state after completion
+    hasStartedRef.current = false;
+    startTimeRef.current = undefined;
+  }, [enabled, instanceId]);
+  var abort = (0, _react.useCallback)(function (properties) {
+    if (!enabled) {
+      return;
+    }
+
+    // Use existing experience if available (created by complete()),
+    // otherwise create new one if experience was started but not completed
+    var experience = experienceRef.current;
+    if (!experience) {
+      if (!hasStartedRef.current) {
+        return;
+      }
+      experience = createExperience(instanceId);
+      experienceRef.current = experience;
+      experience.start(startTimeRef.current);
+    }
+    var metadata = _objectSpread({}, getBasePayloadAttributes());
+    if (properties !== null && properties !== void 0 && properties.fileAttributes) {
+      metadata.fileAttributes = sanitiseFileAttributes(properties.fileAttributes);
+    }
+    if (properties !== null && properties !== void 0 && properties.fileStateFlags) {
+      metadata.fileStateFlags = properties.fileStateFlags;
+    }
+    if (properties !== null && properties !== void 0 && properties.ssrReliability) {
+      metadata.ssrReliability = properties.ssrReliability;
+    }
+
+    // UFO will ignore abort if experience is already in final state
+    experience.abort({
+      metadata: metadata
+    });
+
+    // Reset state after abort
+    hasStartedRef.current = false;
+    startTimeRef.current = undefined;
+  }, [enabled, instanceId]);
+  return (0, _react.useMemo)(function () {
+    return {
+      start: start,
+      complete: complete,
+      abort: abort
+    };
+  }, [start, complete, abort]);
+};
+
+// ============================================================================
+// Legacy exports for backwards compatibility
+// These will be removed once all consumers are migrated to the hook
+// ============================================================================
+
 var concurrentExperience;
 var getExperience = function getExperience(id) {
   if (!concurrentExperience) {
@@ -32,89 +415,92 @@ var getExperience = function getExperience(id) {
   }
   return concurrentExperience.getInstance(id);
 };
-var shouldPerformanceBeSampled = exports.shouldPerformanceBeSampled = function shouldPerformanceBeSampled() {
-  return (
-    // We generate about 100M events UFOv1 events, we want to reduce this to about 5M as we can get the same info from there
-    // Math.random() generates a random floating-point number between 0 (inclusive) and 1 (exclusive).
-    // The condition Math.random() < SAMPLE_RATE (0.05) will be true approximately 5% of the time.
-    Math.random() < SAMPLE_RATE
-  );
-};
-var startUfoExperience = exports.startUfoExperience = function startUfoExperience(id) {
-  getExperience(id).start();
-};
-var sanitiseFileAttributes = function sanitiseFileAttributes(fileAttributes) {
-  /*
-  	Allow external image mediaItemType as fileId
-  	See ExternalImageIdentifier interface on platform/packages/media/media-client/src/identifier.ts
-   */
-  var sanitisedFileId = 'INVALID_FILE_ID';
-  if (fileAttributes.fileId === 'external-image' || (0, _uuidValidate.default)(fileAttributes.fileId)) {
-    sanitisedFileId = fileAttributes.fileId;
-  }
-  return _objectSpread(_objectSpread({}, fileAttributes), {}, {
-    fileId: sanitisedFileId
-  });
+var startUfoExperience = exports.startUfoExperience = function startUfoExperience(id, startTime) {
+  getExperience(id).start(startTime);
 };
 var completeUfoExperience = exports.completeUfoExperience = function completeUfoExperience(id, status, fileAttributes, fileStateFlags, ssrReliability) {
   var error = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : new _errors.MediaCardError('missing-error-data');
+  var ssrPreviewInfo = arguments.length > 6 ? arguments[6] : undefined;
+  // Only complete for terminal statuses - ignore intermediate statuses like 'loading-preview'
+  if (!['complete', 'error', 'failed-processing'].includes(status)) {
+    return;
+  }
+  var experience = getExperience(id);
+  var interactionStartTime = getInteractionStartTime();
+
+  // Determine timing strategy based on SSR status
+  if (ssrPreviewInfo !== null && ssrPreviewInfo !== void 0 && ssrPreviewInfo.wasSSRSuccessful && ssrPreviewInfo.dataUri) {
+    var _ssrPreviewInfo$srcse2;
+    var entry = findPerformanceEntryByName((_ssrPreviewInfo$srcse2 = ssrPreviewInfo.srcset) !== null && _ssrPreviewInfo$srcse2 !== void 0 ? _ssrPreviewInfo$srcse2 : ssrPreviewInfo.dataUri);
+    if (entry) {
+      addResourceTimingMarks(experience, entry, interactionStartTime, 'ssr');
+      experience.addMetadata(_objectSpread(_objectSpread({}, createResourceTimingMetadata(entry)), {}, {
+        timingStrategy: 'ssr-resource-timing'
+      }));
+    } else {
+      experience.addMetadata({
+        timingStrategy: 'ssr-no-entry-found'
+      });
+    }
+  } else if (ssrPreviewInfo !== null && ssrPreviewInfo !== void 0 && ssrPreviewInfo.wasSSRAttempted) {
+    experience.addMetadata({
+      timingStrategy: 'ssr-failed',
+      interactionStartTime: interactionStartTime
+    });
+    experience.mark('interactionStart', 0);
+  } else {
+    experience.addMetadata({
+      timingStrategy: 'csr-mount-based'
+    });
+  }
+  var sanitisedFileAttributes = sanitiseFileAttributes(fileAttributes);
   switch (status) {
     case 'complete':
-      succeedUfoExperience(id, {
-        fileAttributes: fileAttributes,
-        ssrReliability: ssrReliability,
-        fileStateFlags: fileStateFlags
+      experience.success({
+        metadata: _objectSpread({
+          fileAttributes: sanitisedFileAttributes,
+          ssrReliability: ssrReliability,
+          fileStateFlags: fileStateFlags
+        }, getBasePayloadAttributes())
       });
       break;
     case 'failed-processing':
-      failUfoExperience(id, {
-        fileAttributes: fileAttributes,
-        failReason: 'failed-processing',
-        ssrReliability: ssrReliability,
-        fileStateFlags: fileStateFlags
+      experience.failure({
+        metadata: _objectSpread({
+          fileAttributes: sanitisedFileAttributes,
+          ssrReliability: ssrReliability,
+          fileStateFlags: fileStateFlags,
+          failReason: 'failed-processing'
+        }, getBasePayloadAttributes())
       });
       break;
     case 'error':
-      failUfoExperience(id, _objectSpread(_objectSpread({
-        fileAttributes: fileAttributes
-      }, (0, _analytics.extractErrorInfo)(error)), {}, {
-        request: (0, _analytics.getRenderErrorRequestMetadata)(error),
-        ssrReliability: ssrReliability,
-        fileStateFlags: fileStateFlags
-      }));
+      experience.failure({
+        metadata: _objectSpread(_objectSpread({
+          fileAttributes: sanitisedFileAttributes,
+          ssrReliability: ssrReliability,
+          fileStateFlags: fileStateFlags
+        }, (0, _analytics.extractErrorInfo)(error)), {}, {
+          request: (0, _analytics.getRenderErrorRequestMetadata)(error)
+        }, getBasePayloadAttributes())
+      });
       break;
   }
 };
-var getBasePayloadAttributes = function getBasePayloadAttributes() {
-  return {
-    packageName: packageName,
-    packageVersion: packageVersion,
-    mediaEnvironment: (0, _mediaClient.getMediaEnvironment)(),
-    mediaRegion: (0, _mediaClient.getMediaRegion)()
-  };
-};
-var succeedUfoExperience = function succeedUfoExperience(id, properties) {
+var abortUfoExperience = exports.abortUfoExperience = function abortUfoExperience(id, properties) {
+  var metadata = _objectSpread({}, getBasePayloadAttributes());
   if (properties !== null && properties !== void 0 && properties.fileAttributes) {
-    properties.fileAttributes = sanitiseFileAttributes(properties.fileAttributes);
+    metadata.fileAttributes = sanitiseFileAttributes(properties.fileAttributes);
   }
-  getExperience(id).success({
-    metadata: _objectSpread(_objectSpread({}, properties), getBasePayloadAttributes())
-  });
-};
-var failUfoExperience = function failUfoExperience(id, properties) {
-  if (properties !== null && properties !== void 0 && properties.fileAttributes) {
-    properties.fileAttributes = sanitiseFileAttributes(properties.fileAttributes);
+  if (properties !== null && properties !== void 0 && properties.fileStateFlags) {
+    metadata.fileStateFlags = properties.fileStateFlags;
   }
-  getExperience(id).failure({
-    metadata: _objectSpread(_objectSpread({}, properties), getBasePayloadAttributes())
-  });
-};
-var abortUfoExperience = exports.abortUfoExperience = function abortUfoExperience(id, properties) {
-  // UFO won't abort if it's already in a final state (succeeded, failed, aborted, etc)
-  if (properties !== null && properties !== void 0 && properties.fileAttributes) {
-    properties.fileAttributes = sanitiseFileAttributes(properties.fileAttributes);
+  if (properties !== null && properties !== void 0 && properties.ssrReliability) {
+    metadata.ssrReliability = properties.ssrReliability;
   }
   getExperience(id).abort({
-    metadata: _objectSpread(_objectSpread({}, properties), getBasePayloadAttributes())
+    metadata: metadata
   });
-};
+};
+
+// Suppress unused type warnings - these are used for type documentation

package/dist/es2019/card/card.js

@@ -11,7 +11,7 @@ import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { fg } from '@atlaskit/platform-feature-flags';
 import UFOLabel from '@atlaskit/react-ufo/label';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "0.0.0-development";
+const packageVersion = "79.13.0";
 export const CardBase = ({
   identifier,
   ...otherProps

package/dist/es2019/card/externalImageCard.js

@@ -7,7 +7,7 @@ import ReactDOM from 'react-dom';
 import { ImageLoadError } from '../errors';
 import { generateUniqueId } from '../utils/generateUniqueId';
 import { getMediaCardCursor } from '../utils/getMediaCardCursor';
-import { abortUfoExperience, completeUfoExperience, startUfoExperience, shouldPerformanceBeSampled } from '../utils/ufoExperiences';
+import { shouldPerformanceBeSampled, useMediaCardUfoExperience } from '../utils/ufoExperiences';
 import { useCurrentValueRef } from '../utils/useCurrentValueRef';
 import { getDefaultCardDimensions } from '../utils/cardDimensions';
 import { usePrevious } from '../utils/usePrevious';
@@ -52,10 +52,15 @@ export const ExternalImageCard = ({
     wasStatusUploading: false,
     wasStatusProcessing: false
   });
+  const shouldSendPerformanceEvent = useMemo(() => shouldPerformanceBeSampled(), []);
+
+  // UFO experience hook - creates a unique experience instance per card
+  const ufoExperience = useMediaCardUfoExperience({
+    instanceId: internalOccurrenceKey,
+    enabled: shouldSendPerformanceEvent
+  });
   const startUfoExperienceRef = useCurrentValueRef(() => {
-    if (shouldSendPerformanceEventRef.current) {
-      startUfoExperience(internalOccurrenceKey);
-    }
+    ufoExperience.start();
   });
   const [status, setStatus] = useState('loading-preview');
   const cardPreview = useMemo(() => ({
@@ -85,7 +90,6 @@ export const ExternalImageCard = ({
   const [previewDidRender, setPreviewDidRender] = useState(false);
   const [error, setError] = useState();
   const [mediaViewerSelectedItem, setMediaViewerSelectedItem] = useState(null);
-  const shouldSendPerformanceEventRef = useRef(shouldPerformanceBeSampled());
 
   //----------------------------------------------------------------//
   //---------------------- Analytics  ------------------------------//
@@ -101,17 +105,16 @@ export const ExternalImageCard = ({
       }
     };
     createAnalyticsEvent && fireOperationalEvent(createAnalyticsEvent, status, fileAttributes, performanceAttributes, ssrReliability, error, traceContext, undefined);
-    shouldSendPerformanceEventRef.current && completeUfoExperience(internalOccurrenceKey, status, fileAttributes, fileStateFlagsRef.current, ssrReliability, error);
+    // External images don't use SSR - no ssrPreviewInfo passed
+    ufoExperience.complete(status, fileAttributes, fileStateFlagsRef.current, ssrReliability, error, undefined);
   });
   const fireAbortedEventRef = useCurrentValueRef(() => {
     // UFO won't abort if it's already in a final state (succeeded, failed, aborted, etc)
-    if (shouldSendPerformanceEventRef.current) {
-      abortUfoExperience(internalOccurrenceKey, {
-        fileAttributes,
-        fileStateFlags: fileStateFlagsRef === null || fileStateFlagsRef === void 0 ? void 0 : fileStateFlagsRef.current,
-        ssrReliability: ssrReliability
-      });
-    }
+    ufoExperience.abort({
+      fileAttributes,
+      fileStateFlags: fileStateFlagsRef === null || fileStateFlagsRef === void 0 ? void 0 : fileStateFlagsRef.current,
+      ssrReliability: ssrReliability
+    });
   });
 
   //----------------------------------------------------------------//