@atlaskit/media-card 80.6.0 → 80.7.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/media-card
 
+## 80.7.0
+
+### Minor Changes
+
+- [`2c10000a3bba9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2c10000a3bba9) -
+  Adding `backgroundColor` prop to allow overriding background color
+- [`a68f551856a81`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a68f551856a81) -
+  Add ssrFileState prop to FileCard and MediaInlineCard for SSR metadata seeding via Relay
+  fragments. Deprecate ssrItemDetails in favour of ssrFileState. Cards now use initialFileState in
+  useFileState to display pre-hydrated data immediately without an items() API call when
+  platform_media_ssr_data_seed gate is on.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 80.6.1
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 80.6.0
 
 ### Minor Changes

package/dist/cjs/card/card.js

@@ -20,7 +20,7 @@ var _label = _interopRequireDefault(require("@atlaskit/react-ufo/label"));
 var _excluded = ["identifier"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var packageName = "@atlaskit/media-card";
-var packageVersion = "80.5.9";
+var packageVersion = "80.6.1";
 var CardBase = exports.CardBase = function CardBase(_ref) {
   var identifier = _ref.identifier,
     otherProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);

package/dist/cjs/card/cardView.js

@@ -90,7 +90,8 @@ var CardViewBase = exports.CardViewBase = function CardViewBase(_ref) {
     onSvgError = _ref.onSvgError,
     onSvgLoad = _ref.onSvgLoad,
     traceId = _ref.traceId,
-    isAIGenerating = _ref.isAIGenerating;
+    isAIGenerating = _ref.isAIGenerating,
+    backgroundColor = _ref.backgroundColor;
   var intl = (0, _reactIntl.useIntl)();
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -311,7 +312,8 @@ var CardViewBase = exports.CardViewBase = function CardViewBase(_ref) {
     resizeMode: resizeMode || 'crop',
     onError: onSvgError,
     onLoad: onSvgLoadBase,
-    wrapperRef: divRef
+    wrapperRef: divRef,
+    backgroundColor: backgroundColor
   }), renderImageRenderer && identifier && /*#__PURE__*/_react.default.createElement(_imageRenderer.ImageRenderer, {
     cardPreview: cardPreview,
     mediaType: (metadata === null || metadata === void 0 ? void 0 : metadata.mediaType) || 'unknown',
@@ -323,7 +325,8 @@ var CardViewBase = exports.CardViewBase = function CardViewBase(_ref) {
     nativeLazyLoad: nativeLazyLoad,
     forceSyncDisplay: forceSyncDisplay,
     identifier: identifier,
-    wrapperRef: divRef
+    wrapperRef: divRef,
+    backgroundColor: backgroundColor
   }), renderPlayButton && /*#__PURE__*/_react.default.createElement(_iconWrapper.IconWrapper, {
     breakpoint: breakpoint,
     hasTitleBox: hasVisibleTitleBox

package/dist/cjs/card/fileCard.js

@@ -85,6 +85,7 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
     testId = _ref.testId,
     titleBoxBgColor = _ref.titleBoxBgColor,
     titleBoxIcon = _ref.titleBoxIcon,
+    backgroundColor = _ref.backgroundColor,
     isAIGenerating = _ref.isAIGenerating,
     onPreviewRender = _ref.onPreviewRender,
     shouldHideTooltip = _ref.shouldHideTooltip,
@@ -95,6 +96,7 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
     viewerOptions = _ref.viewerOptions,
     includeHashForDuplicateFiles = _ref.includeHashForDuplicateFiles,
     ssrItemDetails = _ref.ssrItemDetails,
+    ssrFileState = _ref.ssrFileState,
     onError = _ref.onError,
     mediaViewerExtensions = _ref.mediaViewerExtensions;
   var _useIntl = (0, _reactIntl.useIntl)(),
@@ -135,11 +137,17 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
     _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
     isCardVisible = _useState6[0],
     setIsCardVisible = _useState6[1];
+
+  // Note: mapMediaItemToFileState maps the fragment's processingStatus faithfully (including
+  // processing/pending). The decision to skip polling is delegated to useFileState —
+  // it skips subscription only when status === 'processed'. Do not add status guards here.
+  var initialFileState = (0, _platformFeatureFlags.fg)('platform_media_ssr_data_seed') ? ssrFileState : undefined;
   var _useFileState = (0, _mediaClientReact.useFileState)(identifier.id, {
       skipRemote: !isCardVisible,
       collectionName: identifier.collectionName,
       occurrenceKey: identifier.occurrenceKey,
-      includeHashForDuplicateFiles: includeHashForDuplicateFiles
+      includeHashForDuplicateFiles: includeHashForDuplicateFiles,
+      initialFileState: initialFileState
     }),
     fileState = _useFileState.fileState;
   var prevFileState = (0, _usePrevious.usePrevious)(fileState && (0, _mediaClient.isErrorFileState)(fileState) ? undefined : fileState);
@@ -206,6 +214,7 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
     }) : undefined;
   }, [alt, previewDimensions, contextId, fileStateValue, identifier, originalDimensions]);
   var _useFilePreview = (0, _mediaFilePreview.useFilePreview)({
+      initialFileState: initialFileState,
       useSrcSet: true,
       mediaBlobUrlAttrs: mediaBlobUrlAttrs,
       resizeMode: (0, _mediaClient.imageResizeModeToFileImageMode)(resizeMode),
@@ -732,6 +741,7 @@ var FileCard = exports.FileCard = function FileCard(_ref) {
       testId: testId,
       titleBoxBgColor: titleBoxBgColor,
       titleBoxIcon: titleBoxIcon,
+      backgroundColor: backgroundColor,
       onImageError: withCallbacks ? onImageError : undefined,
       onImageLoad: withCallbacks ? onImageLoad : undefined,
       onSvgError: onSvgError,

package/dist/cjs/card/media-card-analytics-error-boundary.js

@@ -87,7 +87,7 @@ var WrappedMediaCardAnalyticsErrorBoundary = /*#__PURE__*/function (_React$Compo
 }(_react.default.Component);
 (0, _defineProperty2.default)(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
 var packageName = "@atlaskit/media-card";
-var packageVersion = "80.5.9";
+var packageVersion = "80.6.1";
 
 // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
 var MediaCardAnalyticsErrorBoundary = (0, _mediaCommon.withMediaAnalyticsContext)({

package/dist/cjs/card/svgView/svgImage-compiled.js

@@ -30,7 +30,8 @@ var getErrorReason = function getErrorReason(svgReason) {
       return 'svg-unknown-error';
   }
 };
-var svgRendererStyles = null;
+var svgRendererBaseStyles = null;
+var svgRendererWhiteBgStyles = null;
 var svgRendererMaxDimensionStyles = null;
 var SvgView = exports.SvgView = function SvgView(_ref) {
   var identifier = _ref.identifier,
@@ -38,7 +39,8 @@ var SvgView = exports.SvgView = function SvgView(_ref) {
     onLoad = _ref.onLoad,
     onError = _ref.onError,
     wrapperRef = _ref.wrapperRef,
-    alt = _ref.alt;
+    alt = _ref.alt,
+    backgroundColor = _ref.backgroundColor;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     didSvgRender = _useState2[0],
@@ -81,6 +83,7 @@ var SvgView = exports.SvgView = function SvgView(_ref) {
     src: svgUrl,
     alt: alt,
     style: _objectSpread({
+      backgroundColor: backgroundColor,
       visibility: didSvgRender ? 'visible' : 'hidden'
     }, svgDimensions),
     onLoad: onSvgLoad,
@@ -88,6 +91,6 @@ var SvgView = exports.SvgView = function SvgView(_ref) {
       onSvgError(new _mediaSvg.MediaSVGError('img-error'));
     },
     ref: imgRef,
-    className: (0, _runtime.ax)(["_5ral1f51 _bfhku67f", !width && !height && "_p12f1osq _c71l1osq"])
+    className: (0, _runtime.ax)(["_5ral1f51", !backgroundColor && "_bfhku67f", !width && !height && "_p12f1osq _c71l1osq"])
   }) : null;
 };

package/dist/cjs/card/svgView/svgViewV2.js

@@ -36,7 +36,8 @@ var SvgView = exports.SvgView = function SvgView(_ref) {
     onLoad = _ref.onLoad,
     onError = _ref.onError,
     wrapperRef = _ref.wrapperRef,
-    alt = _ref.alt;
+    alt = _ref.alt,
+    backgroundColor = _ref.backgroundColor;
   var onSvgError = function onSvgError(err) {
     var error = new _errors.MediaCardError(getErrorReason(err.primaryReason), err.secondaryError);
     onError === null || onError === void 0 || onError(error);
@@ -62,6 +63,7 @@ var SvgView = exports.SvgView = function SvgView(_ref) {
     },
     wrapperRef: wrapperRef,
     mediaType: "image",
-    useWhiteBackground: true
+    useWhiteBackground: !backgroundColor,
+    backgroundColor: backgroundColor
   }) : null;
 };

package/dist/cjs/card/ui/imageRenderer/imageRendererV2.js

@@ -40,6 +40,7 @@ var ImageRenderer = exports.ImageRenderer = function ImageRenderer(_ref) {
     identifier = _ref.identifier,
     wrapperRef = _ref.wrapperRef,
     useWhiteBackground = _ref.useWhiteBackground,
+    backgroundColor = _ref.backgroundColor,
     testId = _ref.testId;
   var onDisplayImageRef = (0, _useCurrentValueRef.useCurrentValueRef)(onDisplayImage);
   var ufoContext = (0, _interactionContext.useInteractionContext)();
@@ -112,6 +113,7 @@ var ImageRenderer = exports.ImageRenderer = function ImageRenderer(_ref) {
     onError: onError,
     loading: nativeLazyLoad ? 'lazy' : undefined,
     style: _objectSpread({
+      backgroundColor: backgroundColor,
       visibility: didRender || forceSyncDisplay ? 'visible' : 'hidden'
     }, resolvedDimensions),
     className: (0, _runtime.ax)(["_5ral1f51", useWhiteBackground && "_bfhku67f"])

package/dist/cjs/inline/loader.js

@@ -116,7 +116,7 @@ var MediaInlineCardLoader = exports.default = /*#__PURE__*/function (_React$Pure
         ErrorBoundary = _this$state.ErrorBoundary;
       var analyticsContext = {
         packageVersion: "@atlaskit/media-card",
-        packageName: "80.5.9",
+        packageName: "80.6.1",
         componentName: 'mediaInlineCard',
         component: 'mediaInlineCard'
       };

package/dist/cjs/inline/mediaInlineCard.js

@@ -13,6 +13,7 @@ var _mediaUi = require("@atlaskit/media-ui");
 var _formatDate = require("@atlaskit/media-ui/formatDate");
 var _mimeTypeIcon = require("@atlaskit/media-ui/mime-type-icon");
 var _mediaViewer = require("@atlaskit/media-viewer");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactDom = _interopRequireDefault(require("react-dom"));
@@ -35,8 +36,14 @@ var MediaInlineCardInternal = exports.MediaInlineCardInternal = function MediaIn
     mediaViewerItems = _ref.mediaViewerItems,
     intl = _ref.intl,
     viewerOptions = _ref.viewerOptions,
-    fallbackMediaNameFetcher = _ref.fallbackMediaNameFetcher;
-  var _useState = (0, _react.useState)(),
+    fallbackMediaNameFetcher = _ref.fallbackMediaNameFetcher,
+    ssrFileState = _ref.ssrFileState;
+  var initialFileState = (0, _platformFeatureFlags.fg)('platform_media_ssr_data_seed') ? ssrFileState : undefined;
+  // Capture as a ref so it's a stable one-time SSR seed that doesn't affect
+  // the useEffect dependency array (including it would cause repeated
+  // unsubscribe/resubscribe cycles whenever ssrFileState changes reference).
+  var initialFileStateRef = (0, _react.useRef)(initialFileState);
+  var _useState = (0, _react.useState)(initialFileState),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     fileState = _useState2[0],
     setFileState = _useState2[1];
@@ -128,6 +135,9 @@ var MediaInlineCardInternal = exports.MediaInlineCardInternal = function MediaIn
   });
   (0, _react.useEffect)(function () {
     var subscription = mediaClient.file.getFileState(identifier.id, {
+      // Use the ref value so this effect doesn't re-run when ssrFileState
+      // changes object reference — initialFileState is a one-time SSR seed.
+      initialFileState: initialFileStateRef.current,
       collectionName: identifier.collectionName
     }).subscribe({
       next: function next(fileState) {

package/dist/cjs/utils/ufoExperiences.js

@@ -19,7 +19,7 @@ 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 = "80.5.9";
+var packageVersion = "80.6.1";
 var SAMPLE_RATE = 0.05;
 
 /**

package/dist/es2019/card/card.js

@@ -9,7 +9,7 @@ import { startResourceObserver, setAnalyticsContext } from '../utils/mediaPerfor
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import UFOLabel from '@atlaskit/react-ufo/label';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "80.5.9";
+const packageVersion = "80.6.1";
 export const CardBase = ({
   identifier,
   ...otherProps

package/dist/es2019/card/cardView.js

@@ -75,7 +75,8 @@ export const CardViewBase = ({
   onSvgError,
   onSvgLoad,
   traceId,
-  isAIGenerating
+  isAIGenerating,
+  backgroundColor
 }) => {
   const intl = useIntl();
   const [didSvgRender, setDidSvgRender] = useState(false);
@@ -300,7 +301,8 @@ export const CardViewBase = ({
     resizeMode: resizeMode || 'crop',
     onError: onSvgError,
     onLoad: onSvgLoadBase,
-    wrapperRef: divRef
+    wrapperRef: divRef,
+    backgroundColor: backgroundColor
   }), renderImageRenderer && identifier && /*#__PURE__*/React.createElement(ImageRenderer, {
     cardPreview: cardPreview,
     mediaType: (metadata === null || metadata === void 0 ? void 0 : metadata.mediaType) || 'unknown',
@@ -312,7 +314,8 @@ export const CardViewBase = ({
     nativeLazyLoad: nativeLazyLoad,
     forceSyncDisplay: forceSyncDisplay,
     identifier: identifier,
-    wrapperRef: divRef
+    wrapperRef: divRef,
+    backgroundColor: backgroundColor
   }), renderPlayButton && /*#__PURE__*/React.createElement(IconWrapper, {
     breakpoint: breakpoint,
     hasTitleBox: hasVisibleTitleBox

package/dist/es2019/card/fileCard.js

@@ -66,6 +66,7 @@ export const FileCard = ({
   testId,
   titleBoxBgColor,
   titleBoxIcon,
+  backgroundColor,
   isAIGenerating,
   onPreviewRender,
   shouldHideTooltip,
@@ -76,6 +77,7 @@ export const FileCard = ({
   viewerOptions,
   includeHashForDuplicateFiles,
   ssrItemDetails,
+  ssrFileState,
   onError,
   mediaViewerExtensions
 }) => {
@@ -107,13 +109,19 @@ export const FileCard = ({
     element: cardElement
   }), [cardDimensions, cardElement]);
   const [isCardVisible, setIsCardVisible] = useState(!isLazy);
+
+  // Note: mapMediaItemToFileState maps the fragment's processingStatus faithfully (including
+  // processing/pending). The decision to skip polling is delegated to useFileState —
+  // it skips subscription only when status === 'processed'. Do not add status guards here.
+  const initialFileState = fg('platform_media_ssr_data_seed') ? ssrFileState : undefined;
   const {
     fileState
   } = useFileState(identifier.id, {
     skipRemote: !isCardVisible,
     collectionName: identifier.collectionName,
     occurrenceKey: identifier.occurrenceKey,
-    includeHashForDuplicateFiles
+    includeHashForDuplicateFiles,
+    initialFileState
   });
   const prevFileState = usePrevious(fileState && isErrorFileState(fileState) ? undefined : fileState);
   const fileStateValue = useMemo(() => {
@@ -176,6 +184,7 @@ export const FileCard = ({
     getSsrScriptProps,
     copyNodeRef
   } = useFilePreview({
+    initialFileState: initialFileState,
     useSrcSet: true,
     mediaBlobUrlAttrs,
     resizeMode: imageResizeModeToFileImageMode(resizeMode),
@@ -652,6 +661,7 @@ export const FileCard = ({
       testId: testId,
       titleBoxBgColor: titleBoxBgColor,
       titleBoxIcon: titleBoxIcon,
+      backgroundColor: backgroundColor,
       onImageError: withCallbacks ? onImageError : undefined,
       onImageLoad: withCallbacks ? onImageLoad : undefined,
       onSvgError: onSvgError,

package/dist/es2019/card/media-card-analytics-error-boundary.js

@@ -66,7 +66,7 @@ class WrappedMediaCardAnalyticsErrorBoundary extends React.Component {
 }
 _defineProperty(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
 const packageName = "@atlaskit/media-card";
-const packageVersion = "80.5.9";
+const packageVersion = "80.6.1";
 
 // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
 const MediaCardAnalyticsErrorBoundary = withMediaAnalyticsContext({

package/dist/es2019/card/svgView/svgImage-compiled.js

@@ -17,7 +17,8 @@ const getErrorReason = svgReason => {
       return 'svg-unknown-error';
   }
 };
-const svgRendererStyles = null;
+const svgRendererBaseStyles = null;
+const svgRendererWhiteBgStyles = null;
 const svgRendererMaxDimensionStyles = null;
 export const SvgView = ({
   identifier,
@@ -25,7 +26,8 @@ export const SvgView = ({
   onLoad,
   onError,
   wrapperRef,
-  alt
+  alt,
+  backgroundColor
 }) => {
   const [didSvgRender, setDidSvgRender] = useState(false);
   const [svgDimensions, setSvgDimensions] = useState({});
@@ -66,6 +68,7 @@ export const SvgView = ({
     src: svgUrl,
     alt: alt,
     style: {
+      backgroundColor,
       visibility: didSvgRender ? 'visible' : 'hidden',
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
       ...svgDimensions
@@ -75,6 +78,6 @@ export const SvgView = ({
       onSvgError(new MediaSVGError('img-error'));
     },
     ref: imgRef,
-    className: ax(["_5ral1f51 _bfhku67f", !width && !height && "_p12f1osq _c71l1osq"])
+    className: ax(["_5ral1f51", !backgroundColor && "_bfhku67f", !width && !height && "_p12f1osq _c71l1osq"])
   }) : null;
 };

package/dist/es2019/card/svgView/svgViewV2.js

@@ -27,7 +27,8 @@ export const SvgView = ({
   onLoad,
   onError,
   wrapperRef,
-  alt
+  alt,
+  backgroundColor
 }) => {
   const onSvgError = err => {
     const error = new MediaCardError(getErrorReason(err.primaryReason), err.secondaryError);
@@ -53,6 +54,7 @@ export const SvgView = ({
     },
     wrapperRef: wrapperRef,
     mediaType: "image",
-    useWhiteBackground: true
+    useWhiteBackground: !backgroundColor,
+    backgroundColor: backgroundColor
   }) : null;
 };

package/dist/es2019/card/ui/imageRenderer/imageRendererV2.js

@@ -25,6 +25,7 @@ export const ImageRenderer = ({
   identifier,
   wrapperRef,
   useWhiteBackground,
+  backgroundColor,
   testId
 }) => {
   const onDisplayImageRef = useCurrentValueRef(onDisplayImage);
@@ -92,6 +93,7 @@ export const ImageRenderer = ({
     onError: onError,
     loading: nativeLazyLoad ? 'lazy' : undefined,
     style: {
+      backgroundColor,
       visibility: didRender || forceSyncDisplay ? 'visible' : 'hidden',
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
       ...resolvedDimensions

package/dist/es2019/inline/loader.js

@@ -37,7 +37,7 @@ export default class MediaInlineCardLoader extends React.PureComponent {
     } = this.state;
     const analyticsContext = {
       packageVersion: "@atlaskit/media-card",
-      packageName: "80.5.9",
+      packageName: "80.6.1",
       componentName: 'mediaInlineCard',
       component: 'mediaInlineCard'
     };

package/dist/es2019/inline/mediaInlineCard.js

@@ -4,6 +4,7 @@ import { MediaInlineCardErroredView, MediaInlineCardLoadedView, MediaInlineCardL
 import { formatDate } from '@atlaskit/media-ui/formatDate';
 import { MimeTypeIcon } from '@atlaskit/media-ui/mime-type-icon';
 import { MediaViewer } from '@atlaskit/media-viewer';
+import { fg } from '@atlaskit/platform-feature-flags';
 import Tooltip from '@atlaskit/tooltip';
 import React, { useEffect, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
@@ -25,9 +26,15 @@ export const MediaInlineCardInternal = ({
   mediaViewerItems,
   intl,
   viewerOptions,
-  fallbackMediaNameFetcher
+  fallbackMediaNameFetcher,
+  ssrFileState
 }) => {
-  const [fileState, setFileState] = useState();
+  const initialFileState = fg('platform_media_ssr_data_seed') ? ssrFileState : undefined;
+  // Capture as a ref so it's a stable one-time SSR seed that doesn't affect
+  // the useEffect dependency array (including it would cause repeated
+  // unsubscribe/resubscribe cycles whenever ssrFileState changes reference).
+  const initialFileStateRef = useRef(initialFileState);
+  const [fileState, setFileState] = useState(initialFileState);
   const [subscribeError, setSubscribeError] = useState();
   const [isSucceededEventSent, setIsSucceededEventSent] = useState(false);
   const [isFailedEventSent, setIsFailedEventSent] = useState(false);
@@ -96,6 +103,9 @@ export const MediaInlineCardInternal = ({
   });
   useEffect(() => {
     const subscription = mediaClient.file.getFileState(identifier.id, {
+      // Use the ref value so this effect doesn't re-run when ssrFileState
+      // changes object reference — initialFileState is a one-time SSR seed.
+      initialFileState: initialFileStateRef.current,
       collectionName: identifier.collectionName
     }).subscribe({
       next: fileState => {

package/dist/es2019/utils/ufoExperiences.js

@@ -9,7 +9,7 @@ import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 import { getActiveInteraction } from '@atlaskit/react-ufo/interaction-metrics';
 import { getMediaGlobalScope } from './globalScope/globalScope';
 const packageName = "@atlaskit/media-card";
-const packageVersion = "80.5.9";
+const packageVersion = "80.6.1";
 const SAMPLE_RATE = 0.05;
 
 /**

package/dist/esm/card/card.js

@@ -11,7 +11,7 @@ import { startResourceObserver, setAnalyticsContext } from '../utils/mediaPerfor
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import UFOLabel from '@atlaskit/react-ufo/label';
 var packageName = "@atlaskit/media-card";
-var packageVersion = "80.5.9";
+var packageVersion = "80.6.1";
 export var CardBase = function CardBase(_ref) {
   var identifier = _ref.identifier,
     otherProps = _objectWithoutProperties(_ref, _excluded);

package/dist/esm/card/cardView.js

@@ -81,7 +81,8 @@ export var CardViewBase = function CardViewBase(_ref) {
     onSvgError = _ref.onSvgError,
     onSvgLoad = _ref.onSvgLoad,
     traceId = _ref.traceId,
-    isAIGenerating = _ref.isAIGenerating;
+    isAIGenerating = _ref.isAIGenerating,
+    backgroundColor = _ref.backgroundColor;
   var intl = useIntl();
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -302,7 +303,8 @@ export var CardViewBase = function CardViewBase(_ref) {
     resizeMode: resizeMode || 'crop',
     onError: onSvgError,
     onLoad: onSvgLoadBase,
-    wrapperRef: divRef
+    wrapperRef: divRef,
+    backgroundColor: backgroundColor
   }), renderImageRenderer && identifier && /*#__PURE__*/React.createElement(ImageRenderer, {
     cardPreview: cardPreview,
     mediaType: (metadata === null || metadata === void 0 ? void 0 : metadata.mediaType) || 'unknown',
@@ -314,7 +316,8 @@ export var CardViewBase = function CardViewBase(_ref) {
     nativeLazyLoad: nativeLazyLoad,
     forceSyncDisplay: forceSyncDisplay,
     identifier: identifier,
-    wrapperRef: divRef
+    wrapperRef: divRef,
+    backgroundColor: backgroundColor
   }), renderPlayButton && /*#__PURE__*/React.createElement(IconWrapper, {
     breakpoint: breakpoint,
     hasTitleBox: hasVisibleTitleBox

package/dist/esm/card/fileCard.js

@@ -77,6 +77,7 @@ export var FileCard = function FileCard(_ref) {
     testId = _ref.testId,
     titleBoxBgColor = _ref.titleBoxBgColor,
     titleBoxIcon = _ref.titleBoxIcon,
+    backgroundColor = _ref.backgroundColor,
     isAIGenerating = _ref.isAIGenerating,
     onPreviewRender = _ref.onPreviewRender,
     shouldHideTooltip = _ref.shouldHideTooltip,
@@ -87,6 +88,7 @@ export var FileCard = function FileCard(_ref) {
     viewerOptions = _ref.viewerOptions,
     includeHashForDuplicateFiles = _ref.includeHashForDuplicateFiles,
     ssrItemDetails = _ref.ssrItemDetails,
+    ssrFileState = _ref.ssrFileState,
     onError = _ref.onError,
     mediaViewerExtensions = _ref.mediaViewerExtensions;
   var _useIntl = useIntl(),
@@ -127,11 +129,17 @@ export var FileCard = function FileCard(_ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     isCardVisible = _useState6[0],
     setIsCardVisible = _useState6[1];
+
+  // Note: mapMediaItemToFileState maps the fragment's processingStatus faithfully (including
+  // processing/pending). The decision to skip polling is delegated to useFileState —
+  // it skips subscription only when status === 'processed'. Do not add status guards here.
+  var initialFileState = fg('platform_media_ssr_data_seed') ? ssrFileState : undefined;
   var _useFileState = useFileState(identifier.id, {
       skipRemote: !isCardVisible,
       collectionName: identifier.collectionName,
       occurrenceKey: identifier.occurrenceKey,
-      includeHashForDuplicateFiles: includeHashForDuplicateFiles
+      includeHashForDuplicateFiles: includeHashForDuplicateFiles,
+      initialFileState: initialFileState
     }),
     fileState = _useFileState.fileState;
   var prevFileState = usePrevious(fileState && isErrorFileState(fileState) ? undefined : fileState);
@@ -198,6 +206,7 @@ export var FileCard = function FileCard(_ref) {
     }) : undefined;
   }, [alt, previewDimensions, contextId, fileStateValue, identifier, originalDimensions]);
   var _useFilePreview = useFilePreview({
+      initialFileState: initialFileState,
       useSrcSet: true,
       mediaBlobUrlAttrs: mediaBlobUrlAttrs,
       resizeMode: imageResizeModeToFileImageMode(resizeMode),
@@ -724,6 +733,7 @@ export var FileCard = function FileCard(_ref) {
       testId: testId,
       titleBoxBgColor: titleBoxBgColor,
       titleBoxIcon: titleBoxIcon,
+      backgroundColor: backgroundColor,
       onImageError: withCallbacks ? onImageError : undefined,
       onImageLoad: withCallbacks ? onImageLoad : undefined,
       onSvgError: onSvgError,

package/dist/esm/card/media-card-analytics-error-boundary.js

@@ -80,7 +80,7 @@ var WrappedMediaCardAnalyticsErrorBoundary = /*#__PURE__*/function (_React$Compo
 }(React.Component);
 _defineProperty(WrappedMediaCardAnalyticsErrorBoundary, "displayName", 'MediaCardAnalyticsErrorBoundary');
 var packageName = "@atlaskit/media-card";
-var packageVersion = "80.5.9";
+var packageVersion = "80.6.1";
 
 // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
 var MediaCardAnalyticsErrorBoundary = withMediaAnalyticsContext({

package/dist/esm/card/svgView/svgImage-compiled.js

@@ -21,7 +21,8 @@ var getErrorReason = function getErrorReason(svgReason) {
       return 'svg-unknown-error';
   }
 };
-var svgRendererStyles = null;
+var svgRendererBaseStyles = null;
+var svgRendererWhiteBgStyles = null;
 var svgRendererMaxDimensionStyles = null;
 export var SvgView = function SvgView(_ref) {
   var identifier = _ref.identifier,
@@ -29,7 +30,8 @@ export var SvgView = function SvgView(_ref) {
     onLoad = _ref.onLoad,
     onError = _ref.onError,
     wrapperRef = _ref.wrapperRef,
-    alt = _ref.alt;
+    alt = _ref.alt,
+    backgroundColor = _ref.backgroundColor;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     didSvgRender = _useState2[0],
@@ -72,6 +74,7 @@ export var SvgView = function SvgView(_ref) {
     src: svgUrl,
     alt: alt,
     style: _objectSpread({
+      backgroundColor: backgroundColor,
       visibility: didSvgRender ? 'visible' : 'hidden'
     }, svgDimensions),
     onLoad: onSvgLoad,
@@ -79,6 +82,6 @@ export var SvgView = function SvgView(_ref) {
       onSvgError(new MediaSVGError('img-error'));
     },
     ref: imgRef,
-    className: ax(["_5ral1f51 _bfhku67f", !width && !height && "_p12f1osq _c71l1osq"])
+    className: ax(["_5ral1f51", !backgroundColor && "_bfhku67f", !width && !height && "_p12f1osq _c71l1osq"])
   }) : null;
 };

package/dist/esm/card/svgView/svgViewV2.js

@@ -27,7 +27,8 @@ export var SvgView = function SvgView(_ref) {
     onLoad = _ref.onLoad,
     onError = _ref.onError,
     wrapperRef = _ref.wrapperRef,
-    alt = _ref.alt;
+    alt = _ref.alt,
+    backgroundColor = _ref.backgroundColor;
   var onSvgError = function onSvgError(err) {
     var error = new MediaCardError(getErrorReason(err.primaryReason), err.secondaryError);
     onError === null || onError === void 0 || onError(error);
@@ -53,6 +54,7 @@ export var SvgView = function SvgView(_ref) {
     },
     wrapperRef: wrapperRef,
     mediaType: "image",
-    useWhiteBackground: true
+    useWhiteBackground: !backgroundColor,
+    backgroundColor: backgroundColor
   }) : null;
 };

package/dist/esm/card/ui/imageRenderer/imageRendererV2.js

@@ -31,6 +31,7 @@ export var ImageRenderer = function ImageRenderer(_ref) {
     identifier = _ref.identifier,
     wrapperRef = _ref.wrapperRef,
     useWhiteBackground = _ref.useWhiteBackground,
+    backgroundColor = _ref.backgroundColor,
     testId = _ref.testId;
   var onDisplayImageRef = useCurrentValueRef(onDisplayImage);
   var ufoContext = useInteractionContext();
@@ -103,6 +104,7 @@ export var ImageRenderer = function ImageRenderer(_ref) {
     onError: onError,
     loading: nativeLazyLoad ? 'lazy' : undefined,
     style: _objectSpread({
+      backgroundColor: backgroundColor,
       visibility: didRender || forceSyncDisplay ? 'visible' : 'hidden'
     }, resolvedDimensions),
     className: ax(["_5ral1f51", useWhiteBackground && "_bfhku67f"])

package/dist/esm/inline/loader.js

@@ -101,7 +101,7 @@ var MediaInlineCardLoader = /*#__PURE__*/function (_React$PureComponent) {
         ErrorBoundary = _this$state.ErrorBoundary;
       var analyticsContext = {
         packageVersion: "@atlaskit/media-card",
-        packageName: "80.5.9",
+        packageName: "80.6.1",
         componentName: 'mediaInlineCard',
         component: 'mediaInlineCard'
       };

package/dist/esm/inline/mediaInlineCard.js

@@ -5,6 +5,7 @@ import { MediaInlineCardErroredView, MediaInlineCardLoadedView, MediaInlineCardL
 import { formatDate } from '@atlaskit/media-ui/formatDate';
 import { MimeTypeIcon } from '@atlaskit/media-ui/mime-type-icon';
 import { MediaViewer } from '@atlaskit/media-viewer';
+import { fg } from '@atlaskit/platform-feature-flags';
 import Tooltip from '@atlaskit/tooltip';
 import React, { useEffect, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
@@ -26,8 +27,14 @@ export var MediaInlineCardInternal = function MediaInlineCardInternal(_ref) {
     mediaViewerItems = _ref.mediaViewerItems,
     intl = _ref.intl,
     viewerOptions = _ref.viewerOptions,
-    fallbackMediaNameFetcher = _ref.fallbackMediaNameFetcher;
-  var _useState = useState(),
+    fallbackMediaNameFetcher = _ref.fallbackMediaNameFetcher,
+    ssrFileState = _ref.ssrFileState;
+  var initialFileState = fg('platform_media_ssr_data_seed') ? ssrFileState : undefined;
+  // Capture as a ref so it's a stable one-time SSR seed that doesn't affect
+  // the useEffect dependency array (including it would cause repeated
+  // unsubscribe/resubscribe cycles whenever ssrFileState changes reference).
+  var initialFileStateRef = useRef(initialFileState);
+  var _useState = useState(initialFileState),
     _useState2 = _slicedToArray(_useState, 2),
     fileState = _useState2[0],
     setFileState = _useState2[1];
@@ -119,6 +126,9 @@ export var MediaInlineCardInternal = function MediaInlineCardInternal(_ref) {
   });
   useEffect(function () {
     var subscription = mediaClient.file.getFileState(identifier.id, {
+      // Use the ref value so this effect doesn't re-run when ssrFileState
+      // changes object reference — initialFileState is a one-time SSR seed.
+      initialFileState: initialFileStateRef.current,
       collectionName: identifier.collectionName
     }).subscribe({
       next: function next(fileState) {

package/dist/esm/utils/ufoExperiences.js

@@ -13,7 +13,7 @@ import { getMediaEnvironment, getMediaRegion } from '@atlaskit/media-client';
 import { getActiveInteraction } from '@atlaskit/react-ufo/interaction-metrics';
 import { getMediaGlobalScope } from './globalScope/globalScope';
 var packageName = "@atlaskit/media-card";
-var packageVersion = "80.5.9";
+var packageVersion = "80.6.1";
 var SAMPLE_RATE = 0.05;
 
 /**

package/dist/types/card/cardView.d.ts

@@ -18,6 +18,7 @@ export interface CardViewProps {
     readonly testId?: string;
     readonly titleBoxBgColor?: string;
     readonly titleBoxIcon?: TitleBoxIcon;
+    readonly backgroundColor?: React.CSSProperties['backgroundColor'];
     readonly status: CardStatus;
     readonly mediaItemType: MediaItemType;
     readonly mediaCardCursor?: MediaCardCursor;
@@ -62,6 +63,6 @@ export interface RenderConfigByStatus {
     customTitleMessage?: MessageDescriptor;
     traceTooltipVariant?: TraceTooltipVariant;
 }
-export declare const CardViewBase: ({ identifier, innerRef, onImageLoad, onImageError, dimensions, onClick, onMouseEnter, testId, metadata, status, selected, selectable, cardPreview, mediaCardCursor, shouldHideTooltip, progress, alt, resizeMode, onDisplayImage, nativeLazyLoad, forceSyncDisplay, actions, disableOverlay, titleBoxBgColor, titleBoxIcon, error, disableAnimation, openMediaViewerButtonRef, shouldOpenMediaViewer, overriddenCreationDate, onSvgError, onSvgLoad, traceId, isAIGenerating, }: CardViewBaseProps) => React.JSX.Element;
+export declare const CardViewBase: ({ identifier, innerRef, onImageLoad, onImageError, dimensions, onClick, onMouseEnter, testId, metadata, status, selected, selectable, cardPreview, mediaCardCursor, shouldHideTooltip, progress, alt, resizeMode, onDisplayImage, nativeLazyLoad, forceSyncDisplay, actions, disableOverlay, titleBoxBgColor, titleBoxIcon, error, disableAnimation, openMediaViewerButtonRef, shouldOpenMediaViewer, overriddenCreationDate, onSvgError, onSvgLoad, traceId, isAIGenerating, backgroundColor, }: CardViewBaseProps) => React.JSX.Element;
 export declare const CardView: React.ForwardRefExoticComponent<Omit<CardViewProps, keyof WithAnalyticsEventsProps> & React.RefAttributes<any>>;
 export {};

package/dist/types/card/fileCard.d.ts

@@ -1,4 +1,4 @@
-import { type FileIdentifier, type Identifier, type ImageResizeMode } from '@atlaskit/media-client';
+import { type FileIdentifier, type FileState, type Identifier, type ImageResizeMode } from '@atlaskit/media-client';
 import { type MediaFeatureFlags, type NumericalCardDimensions, type SSR } from '@atlaskit/media-common';
 import { type ViewerOptionsProps, type MediaViewerExtensions } from '@atlaskit/media-viewer';
 import React from 'react';
@@ -33,6 +33,8 @@ export interface FileCardProps extends CardEventProps {
     readonly titleBoxBgColor?: string;
     /** Sets the title box icon. */
     readonly titleBoxIcon?: TitleBoxIcon;
+    /** Overrides the background color for media rendering (e.g. the default white background used for SVG transparency). */
+    readonly backgroundColor?: React.CSSProperties['backgroundColor'];
     /** Indicates the media card is being generated by AI (e.g. Rovo image-create). */
     readonly isAIGenerating?: boolean;
     /** Callback fired when the media card's image preview has rendered. */
@@ -59,11 +61,21 @@ export interface FileCardProps extends CardEventProps {
     readonly viewerOptions?: ViewerOptionsProps;
     /** Sets options for viewer **/
     readonly includeHashForDuplicateFiles?: boolean;
-    /** Optional file details to render straight away **/
+    /**
+     * @deprecated Use `ssrFileState` instead (Phase 5b). Will be removed in a future major.
+     */
     readonly ssrItemDetails?: SsrItemDetails;
+    /**
+     * Pre-hydrated SSR metadata from a Relay fragment (Media Platform Phase 5b).
+     * When provided and `fg('platform_media_ssr_data_seed')` is on, the card seeds
+     * `useFileState` with this data and skips the `items()` API call for files
+     * whose `processingStatus` is `succeeded`.
+     * @see https://product-fabric.atlassian.net/browse/BMPT-7914
+     */
+    readonly ssrFileState?: FileState;
     /** General Error handling include status errors and display errors*/
     readonly onError?: (reason: MediaFilePreviewErrorPrimaryReason | MediaCardErrorPrimaryReason) => void;
     /** Extensions for the media viewer (e.g. comment button in header). */
     readonly mediaViewerExtensions?: MediaViewerExtensions;
 }
-export declare const FileCard: ({ appearance, resizeMode, isLazy, disableOverlay, featureFlags, identifier, ssr, dimensions, originalDimensions, contextId, alt, actions, shouldEnableDownloadButton, useInlinePlayer, shouldOpenMediaViewer, onFullscreenChange, selectable, selected, testId, titleBoxBgColor, titleBoxIcon, isAIGenerating, onPreviewRender, shouldHideTooltip, mediaViewerItems, onClick, onMouseEnter, videoControlsWrapperRef, viewerOptions, includeHashForDuplicateFiles, ssrItemDetails, onError, mediaViewerExtensions, }: FileCardProps) => React.JSX.Element;
+export declare const FileCard: ({ appearance, resizeMode, isLazy, disableOverlay, featureFlags, identifier, ssr, dimensions, originalDimensions, contextId, alt, actions, shouldEnableDownloadButton, useInlinePlayer, shouldOpenMediaViewer, onFullscreenChange, selectable, selected, testId, titleBoxBgColor, titleBoxIcon, backgroundColor, isAIGenerating, onPreviewRender, shouldHideTooltip, mediaViewerItems, onClick, onMouseEnter, videoControlsWrapperRef, viewerOptions, includeHashForDuplicateFiles, ssrItemDetails, ssrFileState, onError, mediaViewerExtensions, }: FileCardProps) => React.JSX.Element;

package/dist/types/card/svgView/svgImage-compiled.d.ts

@@ -1,2 +1,2 @@
 import type { SvgViewProps } from './types';
-export declare const SvgView: ({ identifier, resizeMode, onLoad, onError, wrapperRef, alt, }: SvgViewProps) => JSX.Element | null;
+export declare const SvgView: ({ identifier, resizeMode, onLoad, onError, wrapperRef, alt, backgroundColor, }: SvgViewProps) => JSX.Element | null;

package/dist/types/card/svgView/svgViewV2.d.ts

@@ -4,4 +4,4 @@
  */
 import React from 'react';
 import type { SvgViewProps } from './types';
-export declare const SvgView: ({ identifier, resizeMode, onLoad, onError, wrapperRef, alt, }: SvgViewProps) => React.JSX.Element | null;
+export declare const SvgView: ({ identifier, resizeMode, onLoad, onError, wrapperRef, alt, backgroundColor, }: SvgViewProps) => React.JSX.Element | null;

package/dist/types/card/svgView/types.d.ts

@@ -8,4 +8,5 @@ export type SvgViewProps = {
     readonly onError?: (error: MediaCardError) => void;
     readonly wrapperRef: React.RefObject<HTMLDivElement>;
     readonly alt?: string;
+    readonly backgroundColor?: React.CSSProperties['backgroundColor'];
 };

package/dist/types/card/ui/imageRenderer/imageRendererV2.d.ts

@@ -1,2 +1,2 @@
 import type { ImageRendererProps } from './types';
-export declare const ImageRenderer: ({ cardPreview, alt, resizeMode, onImageLoad, onImageError, onDisplayImage, mediaType, nativeLazyLoad, forceSyncDisplay, identifier, wrapperRef, useWhiteBackground, testId, }: ImageRendererProps) => JSX.Element | null;
+export declare const ImageRenderer: ({ cardPreview, alt, resizeMode, onImageLoad, onImageError, onDisplayImage, mediaType, nativeLazyLoad, forceSyncDisplay, identifier, wrapperRef, useWhiteBackground, backgroundColor, testId, }: ImageRendererProps) => JSX.Element | null;

package/dist/types/card/ui/imageRenderer/types.d.ts

@@ -13,5 +13,6 @@ export type ImageRendererProps = {
     readonly wrapperRef: React.RefObject<HTMLDivElement>;
     readonly identifier: Identifier;
     readonly useWhiteBackground?: boolean;
+    readonly backgroundColor?: React.CSSProperties['backgroundColor'];
     readonly testId?: string;
 };

package/dist/types/inline/mediaInlineCard.d.ts

@@ -1,4 +1,4 @@
-import { type FileIdentifier, type Identifier, type MediaClient } from '@atlaskit/media-client';
+import { type FileIdentifier, type FileState, type Identifier, type MediaClient } from '@atlaskit/media-client';
 import { type ViewerOptionsProps } from '@atlaskit/media-viewer';
 import React, { type FC } from 'react';
 import { type WrappedComponentProps } from 'react-intl';
@@ -18,6 +18,14 @@ export interface MediaInlineCardProps {
      * Receives the file ID and should resolve to the filename string.
      */
     fallbackMediaNameFetcher?: (id: string) => Promise<string>;
+    /**
+     * Pre-hydrated SSR metadata from a Relay fragment (Media Platform Phase 5b).
+     * When provided and `fg('platform_media_ssr_data_seed')` is on, the card seeds
+     * `useFileState` with this data and skips the `items()` API call for files
+     * whose `processingStatus` is `succeeded`.
+     * @see https://product-fabric.atlassian.net/browse/BMPT-7914
+     */
+    readonly ssrFileState?: FileState;
 }
 export declare const MediaInlineCardInternal: FC<MediaInlineCardProps & WrappedComponentProps>;
 export declare const MediaInlineCard: React.FC<MediaInlineCardProps>;

package/dist/types/types.d.ts

@@ -65,6 +65,7 @@ export interface SharedCardProps {
     readonly alt?: string;
     readonly testId?: string;
     readonly titleBoxBgColor?: string;
+    readonly backgroundColor?: React.CSSProperties['backgroundColor'];
     readonly titleBoxIcon?: TitleBoxIcon;
     readonly isAIGenerating?: boolean;
     readonly onPreviewRender?: (fileId: string) => void;
@@ -111,6 +112,14 @@ export interface CardProps extends SharedCardProps, CardEventProps {
     readonly shouldHideTooltip?: boolean;
     /** General Media Settings */
     readonly mediaSettings?: MediaSettings;
+    /**
+     * Pre-hydrated SSR metadata from a Relay fragment.
+     * When provided and `fg('platform_media_ssr_data_seed')` is on, the card seeds
+     * `useFileState` with this data and skips the `items()` API call for files
+     * whose `processingStatus` is `succeeded`.
+     * @see https://product-fabric.atlassian.net/browse/BMPT-7914
+     */
+    readonly ssrFileState?: FileState;
     /** General Error handling include status errors and display errors*/
     readonly onError?: (reason: MediaFilePreviewErrorPrimaryReason | MediaCardErrorPrimaryReason) => void;
     /** Extensions for the media viewer (e.g. comment button in header). */

package/dist/types-ts4.5/card/cardView.d.ts

@@ -18,6 +18,7 @@ export interface CardViewProps {
     readonly testId?: string;
     readonly titleBoxBgColor?: string;
     readonly titleBoxIcon?: TitleBoxIcon;
+    readonly backgroundColor?: React.CSSProperties['backgroundColor'];
     readonly status: CardStatus;
     readonly mediaItemType: MediaItemType;
     readonly mediaCardCursor?: MediaCardCursor;
@@ -62,6 +63,6 @@ export interface RenderConfigByStatus {
     customTitleMessage?: MessageDescriptor;
     traceTooltipVariant?: TraceTooltipVariant;
 }
-export declare const CardViewBase: ({ identifier, innerRef, onImageLoad, onImageError, dimensions, onClick, onMouseEnter, testId, metadata, status, selected, selectable, cardPreview, mediaCardCursor, shouldHideTooltip, progress, alt, resizeMode, onDisplayImage, nativeLazyLoad, forceSyncDisplay, actions, disableOverlay, titleBoxBgColor, titleBoxIcon, error, disableAnimation, openMediaViewerButtonRef, shouldOpenMediaViewer, overriddenCreationDate, onSvgError, onSvgLoad, traceId, isAIGenerating, }: CardViewBaseProps) => React.JSX.Element;
+export declare const CardViewBase: ({ identifier, innerRef, onImageLoad, onImageError, dimensions, onClick, onMouseEnter, testId, metadata, status, selected, selectable, cardPreview, mediaCardCursor, shouldHideTooltip, progress, alt, resizeMode, onDisplayImage, nativeLazyLoad, forceSyncDisplay, actions, disableOverlay, titleBoxBgColor, titleBoxIcon, error, disableAnimation, openMediaViewerButtonRef, shouldOpenMediaViewer, overriddenCreationDate, onSvgError, onSvgLoad, traceId, isAIGenerating, backgroundColor, }: CardViewBaseProps) => React.JSX.Element;
 export declare const CardView: React.ForwardRefExoticComponent<Omit<CardViewProps, keyof WithAnalyticsEventsProps> & React.RefAttributes<any>>;
 export {};

package/dist/types-ts4.5/card/fileCard.d.ts

@@ -1,4 +1,4 @@
-import { type FileIdentifier, type Identifier, type ImageResizeMode } from '@atlaskit/media-client';
+import { type FileIdentifier, type FileState, type Identifier, type ImageResizeMode } from '@atlaskit/media-client';
 import { type MediaFeatureFlags, type NumericalCardDimensions, type SSR } from '@atlaskit/media-common';
 import { type ViewerOptionsProps, type MediaViewerExtensions } from '@atlaskit/media-viewer';
 import React from 'react';
@@ -33,6 +33,8 @@ export interface FileCardProps extends CardEventProps {
     readonly titleBoxBgColor?: string;
     /** Sets the title box icon. */
     readonly titleBoxIcon?: TitleBoxIcon;
+    /** Overrides the background color for media rendering (e.g. the default white background used for SVG transparency). */
+    readonly backgroundColor?: React.CSSProperties['backgroundColor'];
     /** Indicates the media card is being generated by AI (e.g. Rovo image-create). */
     readonly isAIGenerating?: boolean;
     /** Callback fired when the media card's image preview has rendered. */
@@ -59,11 +61,21 @@ export interface FileCardProps extends CardEventProps {
     readonly viewerOptions?: ViewerOptionsProps;
     /** Sets options for viewer **/
     readonly includeHashForDuplicateFiles?: boolean;
-    /** Optional file details to render straight away **/
+    /**
+     * @deprecated Use `ssrFileState` instead (Phase 5b). Will be removed in a future major.
+     */
     readonly ssrItemDetails?: SsrItemDetails;
+    /**
+     * Pre-hydrated SSR metadata from a Relay fragment (Media Platform Phase 5b).
+     * When provided and `fg('platform_media_ssr_data_seed')` is on, the card seeds
+     * `useFileState` with this data and skips the `items()` API call for files
+     * whose `processingStatus` is `succeeded`.
+     * @see https://product-fabric.atlassian.net/browse/BMPT-7914
+     */
+    readonly ssrFileState?: FileState;
     /** General Error handling include status errors and display errors*/
     readonly onError?: (reason: MediaFilePreviewErrorPrimaryReason | MediaCardErrorPrimaryReason) => void;
     /** Extensions for the media viewer (e.g. comment button in header). */
     readonly mediaViewerExtensions?: MediaViewerExtensions;
 }
-export declare const FileCard: ({ appearance, resizeMode, isLazy, disableOverlay, featureFlags, identifier, ssr, dimensions, originalDimensions, contextId, alt, actions, shouldEnableDownloadButton, useInlinePlayer, shouldOpenMediaViewer, onFullscreenChange, selectable, selected, testId, titleBoxBgColor, titleBoxIcon, isAIGenerating, onPreviewRender, shouldHideTooltip, mediaViewerItems, onClick, onMouseEnter, videoControlsWrapperRef, viewerOptions, includeHashForDuplicateFiles, ssrItemDetails, onError, mediaViewerExtensions, }: FileCardProps) => React.JSX.Element;
+export declare const FileCard: ({ appearance, resizeMode, isLazy, disableOverlay, featureFlags, identifier, ssr, dimensions, originalDimensions, contextId, alt, actions, shouldEnableDownloadButton, useInlinePlayer, shouldOpenMediaViewer, onFullscreenChange, selectable, selected, testId, titleBoxBgColor, titleBoxIcon, backgroundColor, isAIGenerating, onPreviewRender, shouldHideTooltip, mediaViewerItems, onClick, onMouseEnter, videoControlsWrapperRef, viewerOptions, includeHashForDuplicateFiles, ssrItemDetails, ssrFileState, onError, mediaViewerExtensions, }: FileCardProps) => React.JSX.Element;

package/dist/types-ts4.5/card/svgView/svgImage-compiled.d.ts

@@ -1,2 +1,2 @@
 import type { SvgViewProps } from './types';
-export declare const SvgView: ({ identifier, resizeMode, onLoad, onError, wrapperRef, alt, }: SvgViewProps) => JSX.Element | null;
+export declare const SvgView: ({ identifier, resizeMode, onLoad, onError, wrapperRef, alt, backgroundColor, }: SvgViewProps) => JSX.Element | null;

package/dist/types-ts4.5/card/svgView/svgViewV2.d.ts

@@ -4,4 +4,4 @@
  */
 import React from 'react';
 import type { SvgViewProps } from './types';
-export declare const SvgView: ({ identifier, resizeMode, onLoad, onError, wrapperRef, alt, }: SvgViewProps) => React.JSX.Element | null;
+export declare const SvgView: ({ identifier, resizeMode, onLoad, onError, wrapperRef, alt, backgroundColor, }: SvgViewProps) => React.JSX.Element | null;

package/dist/types-ts4.5/card/svgView/types.d.ts

@@ -8,4 +8,5 @@ export type SvgViewProps = {
     readonly onError?: (error: MediaCardError) => void;
     readonly wrapperRef: React.RefObject<HTMLDivElement>;
     readonly alt?: string;
+    readonly backgroundColor?: React.CSSProperties['backgroundColor'];
 };

package/dist/types-ts4.5/card/ui/imageRenderer/imageRendererV2.d.ts

@@ -1,2 +1,2 @@
 import type { ImageRendererProps } from './types';
-export declare const ImageRenderer: ({ cardPreview, alt, resizeMode, onImageLoad, onImageError, onDisplayImage, mediaType, nativeLazyLoad, forceSyncDisplay, identifier, wrapperRef, useWhiteBackground, testId, }: ImageRendererProps) => JSX.Element | null;
+export declare const ImageRenderer: ({ cardPreview, alt, resizeMode, onImageLoad, onImageError, onDisplayImage, mediaType, nativeLazyLoad, forceSyncDisplay, identifier, wrapperRef, useWhiteBackground, backgroundColor, testId, }: ImageRendererProps) => JSX.Element | null;

package/dist/types-ts4.5/card/ui/imageRenderer/types.d.ts

@@ -13,5 +13,6 @@ export type ImageRendererProps = {
     readonly wrapperRef: React.RefObject<HTMLDivElement>;
     readonly identifier: Identifier;
     readonly useWhiteBackground?: boolean;
+    readonly backgroundColor?: React.CSSProperties['backgroundColor'];
     readonly testId?: string;
 };

package/dist/types-ts4.5/inline/mediaInlineCard.d.ts

@@ -1,4 +1,4 @@
-import { type FileIdentifier, type Identifier, type MediaClient } from '@atlaskit/media-client';
+import { type FileIdentifier, type FileState, type Identifier, type MediaClient } from '@atlaskit/media-client';
 import { type ViewerOptionsProps } from '@atlaskit/media-viewer';
 import React, { type FC } from 'react';
 import { type WrappedComponentProps } from 'react-intl';
@@ -18,6 +18,14 @@ export interface MediaInlineCardProps {
      * Receives the file ID and should resolve to the filename string.
      */
     fallbackMediaNameFetcher?: (id: string) => Promise<string>;
+    /**
+     * Pre-hydrated SSR metadata from a Relay fragment (Media Platform Phase 5b).
+     * When provided and `fg('platform_media_ssr_data_seed')` is on, the card seeds
+     * `useFileState` with this data and skips the `items()` API call for files
+     * whose `processingStatus` is `succeeded`.
+     * @see https://product-fabric.atlassian.net/browse/BMPT-7914
+     */
+    readonly ssrFileState?: FileState;
 }
 export declare const MediaInlineCardInternal: FC<MediaInlineCardProps & WrappedComponentProps>;
 export declare const MediaInlineCard: React.FC<MediaInlineCardProps>;

package/dist/types-ts4.5/types.d.ts

@@ -65,6 +65,7 @@ export interface SharedCardProps {
     readonly alt?: string;
     readonly testId?: string;
     readonly titleBoxBgColor?: string;
+    readonly backgroundColor?: React.CSSProperties['backgroundColor'];
     readonly titleBoxIcon?: TitleBoxIcon;
     readonly isAIGenerating?: boolean;
     readonly onPreviewRender?: (fileId: string) => void;
@@ -111,6 +112,14 @@ export interface CardProps extends SharedCardProps, CardEventProps {
     readonly shouldHideTooltip?: boolean;
     /** General Media Settings */
     readonly mediaSettings?: MediaSettings;
+    /**
+     * Pre-hydrated SSR metadata from a Relay fragment.
+     * When provided and `fg('platform_media_ssr_data_seed')` is on, the card seeds
+     * `useFileState` with this data and skips the `items()` API call for files
+     * whose `processingStatus` is `succeeded`.
+     * @see https://product-fabric.atlassian.net/browse/BMPT-7914
+     */
+    readonly ssrFileState?: FileState;
     /** General Error handling include status errors and display errors*/
     readonly onError?: (reason: MediaFilePreviewErrorPrimaryReason | MediaCardErrorPrimaryReason) => void;
     /** Extensions for the media viewer (e.g. comment button in header). */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/media-card",
-	"version": "80.6.0",
+	"version": "80.7.0",
 	"description": "Includes all media card related components, CardView, CardViewSmall, Card...",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -39,27 +39,27 @@
 	},
 	"dependencies": {
 		"@atlaskit/analytics-next": "^11.2.0",
-		"@atlaskit/dropdown-menu": "^16.9.0",
+		"@atlaskit/dropdown-menu": "^16.10.0",
 		"@atlaskit/editor-shared-styles": "^3.11.0",
 		"@atlaskit/icon": "^35.3.0",
 		"@atlaskit/link": "^3.4.0",
 		"@atlaskit/media-client": "^36.3.0",
-		"@atlaskit/media-client-react": "^5.1.0",
+		"@atlaskit/media-client-react": "^5.2.0",
 		"@atlaskit/media-common": "^13.3.0",
-		"@atlaskit/media-file-preview": "^0.17.0",
-		"@atlaskit/media-state": "^2.1.0",
+		"@atlaskit/media-file-preview": "^0.18.0",
+		"@atlaskit/media-state": "^2.2.0",
 		"@atlaskit/media-svg": "^2.3.0",
 		"@atlaskit/media-ui": "^29.3.0",
 		"@atlaskit/media-viewer": "^53.2.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^19.0.0",
 		"@atlaskit/progress-bar": "^4.2.0",
-		"@atlaskit/react-ufo": "^6.2.0",
+		"@atlaskit/react-ufo": "^6.5.0",
 		"@atlaskit/spinner": "^19.1.0",
 		"@atlaskit/theme": "^25.0.0",
-		"@atlaskit/tmp-editor-statsig": "^84.2.0",
-		"@atlaskit/tokens": "^13.0.0",
-		"@atlaskit/tooltip": "^22.3.0",
+		"@atlaskit/tmp-editor-statsig": "^85.0.0",
+		"@atlaskit/tokens": "^13.1.0",
+		"@atlaskit/tooltip": "^22.5.0",
 		"@atlaskit/ufo": "^0.5.0",
 		"@atlaskit/visually-hidden": "^3.1.0",
 		"@babel/runtime": "^7.0.0",
@@ -89,7 +89,7 @@
 		"@atlaskit/radio": "^8.6.0",
 		"@atlaskit/range": "^10.1.0",
 		"@atlaskit/ssr": "workspace:^",
-		"@atlaskit/toggle": "^16.0.0",
+		"@atlaskit/toggle": "^16.1.0",
 		"@atlassian/a11y-jest-testing": "^0.11.0",
 		"@atlassian/feature-flags-test-utils": "^1.1.0",
 		"@atlassian/react-compiler-gating": "workspace:^",
@@ -174,6 +174,9 @@
 		},
 		"platform_media_a11y_suppression_fixes": {
 			"type": "boolean"
+		},
+		"platform_media_ssr_data_seed": {
+			"type": "boolean"
 		}
 	},
 	"techstack": {

package/report.api.md

@@ -27,6 +27,7 @@ import { Identifier } from '@atlaskit/media-client';
 import { ImageResizeMode } from '@atlaskit/media-client';
 import { MediaClient } from '@atlaskit/media-client';
 import { MediaFeatureFlags } from '@atlaskit/media-common';
+import { MediaItemSSRData } from '@atlaskit/media-common';
 import { MouseEvent as MouseEvent_2 } from 'react';
 import { NumericalCardDimensions } from '@atlaskit/media-common';
 import { default as React_2 } from 'react';
@@ -157,6 +158,8 @@ export interface CardProps extends SharedCardProps, CardEventProps {
 	// (undocumented)
 	readonly ssr?: SSR;
 	// (undocumented)
+	readonly ssrFileState?: FileState;
+	// (undocumented)
 	readonly useInlinePlayer?: boolean;
 }