@atlaskit/renderer 126.9.5 → 126.10.0

package/dist/esm/react/marks/breakout.js

@@ -8,13 +8,26 @@ import { css, jsx } from '@emotion/react';
 import { akEditorFullWidthLayoutWidth, akEditorMaxLayoutWidth, blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-var wrapperStyles = css({
+import { RendererCssClassName } from '../../consts';
+
+// Legacy centering (breaks position: sticky in nested content).
+var legacyWrapperStyles = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   margin: "".concat(blockNodesVerticalMargin, " 0"),
   // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   marginLeft: '50%',
   transform: 'translateX(-50%)'
 });
+var flexWrapperStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  margin: "".concat(blockNodesVerticalMargin, " 0")
+});
+
+// Flex item: no vertical margin so flex container height = content height (matches legacy single-wrapper height).
+// flexShrink: 0 so the inner div keeps its width (matches legacy behaviour; flex items default to flex-shrink: 1).
+var innerWrapperStyles = css({
+  flexShrink: 0
+});
 var getWidth = function getWidth(width, mode) {
   if (editorExperiment('advanced_layouts', true) && width) {
     return "min(".concat(width, "px, var(--ak-editor--breakout-container-without-gutter-width))");
@@ -40,8 +53,33 @@ var getWidth = function getWidth(width, mode) {
  * @returns The rendered breakout mark as a React element.
  */
 export default function Breakout(props) {
+  var width = getWidth('width' in props ? props.width : null, props.mode);
+  var useStickySafeCentering = expValEquals('platform_editor_flex_based_centering', 'isEnabled', true);
+  if (useStickySafeCentering) {
+    return jsx("div", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+      className: RendererCssClassName.STICKY_SAFE_BREAKOUT_WRAPPER + ' ' + RendererCssClassName.FLEX_CENTER_WRAPPER,
+      css: flexWrapperStyles
+    }, jsx("div", _extends({
+      css: innerWrapperStyles
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+      ,
+      className: "".concat(RendererCssClassName.STICKY_SAFE_BREAKOUT_INNER, " fabric-editor-breakout-mark fabric-editor-block-mark"),
+      "data-mode": props.mode
+      // Ignored via go/ees005
+      // eslint-disable-next-line react/jsx-props-no-spreading
+    }, editorExperiment('advanced_layouts', true) && {
+      'data-has-width': !!props.width,
+      'data-width': props.width
+    }, {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+      style: {
+        width: width
+      }
+    }), props.children));
+  }
   return jsx("div", _extends({
-    css: wrapperStyles,
+    css: legacyWrapperStyles,
     "data-mode": props.mode
     // Ignored via go/ees005
     // eslint-disable-next-line react/jsx-props-no-spreading

package/dist/esm/react/nodes/blockCard.js

@@ -14,10 +14,30 @@ import { AnalyticsContext } from '@atlaskit/analytics-next';
 import { DatasourceTableView } from '@atlaskit/link-datasource';
 import { CardSSR } from '@atlaskit/smart-card/ssr';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { N40 } from '@atlaskit/theme/colors';
 import { calcBreakoutWidth, canRenderDatasource } from '@atlaskit/editor-common/utils';
 import { usePortal } from '../../ui/Renderer/PortalContext';
+import { RendererCssClassName } from '../../consts';
+var datasourceCenterWrapperStyles = css({
+  marginTop: "var(--ds-space-150, 0.75rem)",
+  marginBottom: "var(--ds-space-150, 0.75rem)"
+});
 var datasourceContainerStyleWithMarginTop = css({
+  borderRadius: "var(--ds-radius-large, 8px)",
+  border: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border, ".concat(N40, ")")),
+  overflow: 'hidden',
+  marginTop: "var(--ds-space-150, 0.75rem)",
+  marginBottom: "var(--ds-space-150, 0.75rem)"
+});
+
+// No vertical margin when inside center wrapper (wrapper has margin so it participates in collapse). Styles from datasourceContainerStyleLegacy
+var datasourceContainerStyleNoVerticalMargin = css({
+  borderRadius: "var(--ds-radius-large, 8px)",
+  border: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border, ".concat(N40, ")")),
+  overflow: 'hidden'
+});
+var datasourceContainerStyleLegacy = css({
   borderRadius: "var(--ds-radius-large, 8px)",
   border: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border, ".concat(N40, ")")),
   overflow: 'hidden',
@@ -100,8 +120,10 @@ export default function BlockCard(props) {
         // eslint-disable-next-line react/jsx-props-no-spreading
       }, cardProps), jsx(WidthConsumer, null, function (_ref5) {
         var width = _ref5.width;
-        return jsx("div", {
-          css: datasourceContainerStyleWithMarginTop,
+        var useStickySafeCentering = expValEquals('platform_editor_flex_based_centering', 'isEnabled', true);
+        var useCenterWrapper = !isNodeNested && useStickySafeCentering;
+        var datasourceDiv = jsx("div", {
+          css: useCenterWrapper ? datasourceContainerStyleNoVerticalMargin : useStickySafeCentering ? datasourceContainerStyleWithMarginTop : datasourceContainerStyleLegacy,
           "data-testid": "renderer-datasource-table",
           "data-local-id": localId,
           style: {
@@ -116,6 +138,11 @@ export default function BlockCard(props) {
           wrappedColumnKeys: wrappedColumnKeys && wrappedColumnKeys.length > 0 ? wrappedColumnKeys : undefined,
           url: url
         }));
+        return useCenterWrapper ? jsx("div", {
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+          className: RendererCssClassName.BLOCK_CARD_DATASOURCE_CENTER_WRAPPER + ' ' + RendererCssClassName.FLEX_CENTER_WRAPPER,
+          css: datasourceCenterWrapperStyles
+        }, datasourceDiv) : datasourceDiv;
       })));
     }
     return jsx(InlineCard, {

package/dist/esm/react/nodes/embedCard.js

@@ -15,8 +15,10 @@ import { WidthConsumer, UnsupportedBlock, MediaSingle as UIMediaSingle, WidthCon
 import { akEditorDefaultLayoutWidth, akEditorFullPageNarrowBreakout, akEditorFullWidthLayoutWidth, DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { componentWithCondition } from '@atlaskit/platform-feature-flags-react';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { CardErrorBoundary } from './fallback';
+import { RendererCssClassName } from '../../consts';
 import { FullPagePadding } from '../../ui/Renderer/style';
 import { getCardClickHandler } from '../utils/getCardClickHandler';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
@@ -35,9 +37,15 @@ var embedCardWrapperStyles = css({
   },
   margin: '0 auto'
 });
+var embedCardCenterWrapperStyles = css({
+  // Match MediaSingle calcMargin(layout) default for wide/full-width: 24px top/bottom (so wrapper participates in collapse)
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space -- Matches editor-common MediaSingle calcMargin
+  margin: '24px 0'
+});
 
+// Legacy centering when platform_editor_flex_based_centering is off.
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-var uIMediaSingleLayoutStyles = css({
+var uIMediaSingleLayoutStylesLegacy = css({
   // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
   marginLeft: '50%',
   transform: 'translateX(-50%)'
@@ -142,7 +150,8 @@ function EmbedCardInternal(props) {
       }
     }
     var lineLength = isFullWidth ? Math.min(akEditorFullWidthLayoutWidth, containerWidth - padding) : nonFullWidthSize;
-    var uiMediaSingleStyles = layout === 'full-width' || layout === 'wide' ? uIMediaSingleLayoutStyles : '';
+    var useStickySafeCentering = expValEquals('platform_editor_flex_based_centering', 'isEnabled', true);
+    var uiMediaSingleStyles = layout === 'full-width' || layout === 'wide' ? useStickySafeCentering ? undefined : uIMediaSingleLayoutStylesLegacy : '';
     var onError = function onError(_ref4) {
       var err = _ref4.err;
       if (err) {
@@ -191,30 +200,38 @@ function EmbedCardInternal(props) {
       }, cardProps), jsx(EmbedResizeMessageListener, {
         embedIframeRef: embedIframeRef,
         onHeightUpdate: setLiveHeight
-      }, jsx(UIMediaSingle, {
-        css: uiMediaSingleStyles,
-        layout: layout,
-        width: originalWidth,
-        containerWidth: containerWidth,
-        pctWidth: width,
-        height: originalHeight,
-        fullWidthMode: isFullWidth,
-        nodeType: "embedCard",
-        lineLength: isInsideOfBlockNode ? containerWidth : lineLength,
-        hasFallbackContainer: hasPreview,
-        isInsideOfInlineExtension: isInsideOfInlineExtension
-      }, jsx("div", {
-        css: embedCardWrapperStyles
-      }, jsx("div", {
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-        className: "embedCardView-content-wrap",
-        "data-embed-card": true,
-        "data-layout": layout,
-        "data-width": width,
-        "data-card-data": data ? JSON.stringify(data) : undefined,
-        "data-card-url": url,
-        "data-card-original-height": originalHeight
-      }, cardComponent)))))
+      }, function () {
+        var useCenterWrapper = (layout === 'full-width' || layout === 'wide') && expValEquals('platform_editor_flex_based_centering', 'isEnabled', true);
+        var mediaSingle = jsx(UIMediaSingle, {
+          css: uiMediaSingleStyles,
+          layout: layout,
+          width: originalWidth,
+          containerWidth: containerWidth,
+          pctWidth: width,
+          height: originalHeight,
+          fullWidthMode: isFullWidth,
+          nodeType: "embedCard",
+          lineLength: isInsideOfBlockNode ? containerWidth : lineLength,
+          hasFallbackContainer: hasPreview,
+          isInsideOfInlineExtension: isInsideOfInlineExtension
+        }, jsx("div", {
+          css: embedCardWrapperStyles
+        }, jsx("div", {
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+          className: "embedCardView-content-wrap",
+          "data-embed-card": true,
+          "data-layout": layout,
+          "data-width": width,
+          "data-card-data": data ? JSON.stringify(data) : undefined,
+          "data-card-url": url,
+          "data-card-original-height": originalHeight
+        }, cardComponent)));
+        return useCenterWrapper ? jsx("div", {
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+          className: RendererCssClassName.EMBED_CARD_CENTER_WRAPPER + ' ' + RendererCssClassName.FLEX_CENTER_WRAPPER,
+          css: embedCardCenterWrapperStyles
+        }, mediaSingle) : mediaSingle;
+      }()))
     );
   }));
 }

package/dist/esm/react/nodes/extension.js

@@ -70,7 +70,7 @@ export var renderExtension = function renderExtension(content, layout) {
   var isInline = (shouldDisplayExtensionAsInline === null || shouldDisplayExtensionAsInline === void 0 ? void 0 : shouldDisplayExtensionAsInline(node)) && expValEquals('platform_editor_render_bodied_extension_as_inline', 'isEnabled', true);
   var inlineClassName = isInline ? RendererCssClassName.EXTENSION_AS_INLINE : '';
   if (expValEquals('platform_editor_renderer_extension_width_fix', 'isEnabled', true)) {
-    return jsx("div", {
+    var extensionDiv = jsx("div", {
       ref: options.handleRef
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       ,
@@ -93,15 +93,20 @@ export var renderExtension = function renderExtension(content, layout) {
       className: overflowContainerClass,
       css: [!(isInsideOfInlineExtension && expValEquals('confluence_inline_insert_excerpt_width_bugfix', 'isEnabled', true)) && fg('platform_fix_macro_renders_in_layouts') && containerStyle]
     }, content));
+    return centerAlignClass && expValEquals('platform_editor_flex_based_centering', 'isEnabled', true) ? jsx("div", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+      className: RendererCssClassName.STICKY_SAFE_CENTER_WRAPPER + ' ' + RendererCssClassName.FLEX_CENTER_WRAPPER
+    }, extensionDiv) : extensionDiv;
   }
   return jsx(WidthConsumer, null, function (_ref2) {
     var width = _ref2.width;
-    return jsx("div", {
+    var extensionDiv = jsx("div", {
       ref: options.handleRef
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       ,
       className: "".concat(RendererCssClassName.EXTENSION, " ").concat(inlineClassName, " ").concat(options.shadowClassNames, " ").concat(centerAlignClass),
       style: {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
         width: isInline ? undefined : (expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? isCustomLayout : isTopLevel) ?
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
         calcBreakoutWidth(layout, width) : expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? undefined : '100%',
@@ -117,6 +122,10 @@ export var renderExtension = function renderExtension(content, layout) {
       className: overflowContainerClass,
       css: [!(isInsideOfInlineExtension && expValEquals('confluence_inline_insert_excerpt_width_bugfix', 'isEnabled', true)) && fg('platform_fix_macro_renders_in_layouts') && containerStyle]
     }, content));
+    return centerAlignClass && expValEquals('platform_editor_flex_based_centering', 'isEnabled', true) ? jsx("div", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+      className: RendererCssClassName.STICKY_SAFE_CENTER_WRAPPER + ' ' + RendererCssClassName.FLEX_CENTER_WRAPPER
+    }, extensionDiv) : extensionDiv;
   });
 };
 var Extension = function Extension(props) {

package/dist/esm/react/nodes/multiBodiedExtension.js

@@ -23,6 +23,11 @@ var containerStyles = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-nested-selectors
   '&:first-child > .ak-renderer-extension': {
     marginTop: 0
+  },
+  // When patch is on, direct child is center wrapper (not extension); same first-child behaviour
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-nested-selectors
+  '&:first-child > .ak-renderer-sticky-safe-center-wrapper': {
+    marginTop: 0
   }
 });
 var MultiBodiedExtensionChildrenContainer = function MultiBodiedExtensionChildrenContainer(_ref) {
@@ -158,6 +163,13 @@ var MultiBodiedExtension = function MultiBodiedExtension(props) {
   // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
   var containerActiveFrameStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t\t& [data-extension-frame='true']:nth-of-type(", ") {\n\t\t\tdisplay: block;\n\t\t}\n\t"])), activeChildIndex + 1);
   if (expValEquals('platform_editor_renderer_extension_width_fix', 'isEnabled', true)) {
+    var _isTopLevel = path.length < 1;
+    var _useCenterWrapper = _isTopLevel && ['wide', 'full-width'].includes(layout) && expValEquals('platform_editor_flex_based_centering', 'isEnabled', true);
+    var wrapper = jsx(MultiBodiedExtensionWrapperNext, {
+      layout: layout,
+      path: path,
+      rendererAppearance: rendererAppearance
+    }, renderContent());
     return jsx("section", {
       css: [containerStyles, containerActiveFrameStyles],
       "data-testid": "multiBodiedExtension--container",
@@ -166,12 +178,13 @@ var MultiBodiedExtension = function MultiBodiedExtension(props) {
       "data-layout": layout,
       "data-local-id": localId,
       "data-node-type": "multiBodiedExtension"
-    }, jsx(MultiBodiedExtensionWrapperNext, {
-      layout: layout,
-      path: path,
-      rendererAppearance: rendererAppearance
-    }, renderContent()));
+    }, _useCenterWrapper ? jsx("div", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+      className: RendererCssClassName.STICKY_SAFE_CENTER_WRAPPER + ' ' + RendererCssClassName.FLEX_CENTER_WRAPPER
+    }, wrapper) : wrapper);
   }
+  var isTopLevel = path.length < 1;
+  var useCenterWrapper = isTopLevel && ['wide', 'full-width'].includes(layout) && expValEquals('platform_editor_flex_based_centering', 'isEnabled', true);
   return jsx("section", {
     css: [containerStyles, containerActiveFrameStyles],
     "data-testid": "multiBodiedExtension--container",
@@ -181,12 +194,16 @@ var MultiBodiedExtension = function MultiBodiedExtension(props) {
     "data-local-id": localId
   }, jsx(WidthConsumer, null, function (_ref5) {
     var width = _ref5.width;
-    return jsx(MultiBodiedExtensionWrapperLegacy, {
+    var wrapper = jsx(MultiBodiedExtensionWrapperLegacy, {
       layout: layout,
       width: width,
       path: path,
       rendererAppearance: rendererAppearance
     }, renderContent());
+    return useCenterWrapper ? jsx("div", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+      className: RendererCssClassName.STICKY_SAFE_CENTER_WRAPPER + ' ' + RendererCssClassName.FLEX_CENTER_WRAPPER
+    }, wrapper) : wrapper;
   }));
 };
 export default MultiBodiedExtension;

package/dist/esm/ui/Renderer/RendererStyleContainer.js

@@ -1,5 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _css8;
+var _css8, _$concat3, _$concat6;
 /* eslint-disable @atlaskit/ui-styling-standard/no-important-styles, @atlaskit/ui-styling-standard/no-unsafe-selectors */
 /* eslint-disable @atlaskit/ui-styling-standard/no-imported-style-values */
 /* eslint-disable @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values */
@@ -989,6 +989,22 @@ var headerSmartCardStyles = css({
     }
   }
 });
+
+// Flex wrapper for centering without transform (platform_editor_flex_based_centering).
+// flex: 1 1 0% + minWidth: 0 so the wrapper takes full width when it's a flex item (full-width nodes otherwise render narrow).
+// flexShrink: 0 on child so the node keeps size.
+var centerWrapperStyles = css(_defineProperty({}, ".".concat(RendererCssClassName.FLEX_CENTER_WRAPPER), {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'flex-start',
+  width: '100%',
+  flex: '1 1 0%',
+  minWidth: 0,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  '& > *': {
+    flexShrink: 0
+  }
+}));
 var baseOtherStylesDuplicateAnchor = css(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
   '& .UnknownBlock': {
     fontFamily: "var(--ds-font-family-body, \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
@@ -1034,7 +1050,7 @@ var baseOtherStylesDuplicateAnchor = css(_defineProperty(_defineProperty(_define
 }), 'div[class^="image-wrap-"] + div[class^="image-wrap-"]', {
   marginLeft: 0,
   marginRight: 0
-}), ".".concat(RendererCssClassName.DOCUMENT, " >"), _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "*:not([data-mark-type='fragment']) .".concat(TableSharedCssClassName.TABLE_CONTAINER), {
+}), ".".concat(RendererCssClassName.DOCUMENT, " >"), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "*:not([data-mark-type='fragment']) .".concat(TableSharedCssClassName.TABLE_CONTAINER), {
   // Temporarily ignoring the below the owning team can add the ticket number for the TODO.  Context: https://atlassian.slack.com/archives/CPUEVD9MY/p1741565387326829
   // eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format
   // TODO - improve inline style logic on table container so important styles aren't required here
@@ -1050,16 +1066,45 @@ var baseOtherStylesDuplicateAnchor = css(_defineProperty(_defineProperty(_define
   overflowX: 'auto'
 }), "& .".concat(RendererCssClassName.EXTENSION, ":first-child"), {
   marginTop: 0
-})), ".".concat(RendererCssClassName.DOCUMENT), _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ".".concat(RendererCssClassName.EXTENSION), {
+}), "& .".concat(RendererCssClassName.FLEX_CENTER_WRAPPER, ":first-child"), {
+  marginTop: 0
+})), ".".concat(RendererCssClassName.DOCUMENT), (_$concat3 = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_$concat3, ".".concat(RendererCssClassName.EXTENSION), {
   marginTop: "".concat(blockNodesVerticalMargin)
-}), ".".concat(RendererCssClassName.EXTENSION_CENTER_ALIGN), {
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-  marginLeft: '50%',
-  transform: 'translateX(-50%)'
+}), ".".concat(RendererCssClassName.STICKY_SAFE_CENTER_WRAPPER), {
+  marginTop: "".concat(blockNodesVerticalMargin)
+}), ".".concat(RendererCssClassName.DOCUMENT, " [data-multiBodiedExtension-container]:first-child .").concat(RendererCssClassName.STICKY_SAFE_CENTER_WRAPPER), {
+  marginTop: 0
+}), ".".concat(RendererCssClassName.STICKY_SAFE_CENTER_WRAPPER, " .").concat(RendererCssClassName.EXTENSION), {
+  marginTop: 0,
+  marginBottom: 0
+}), ".".concat(RendererCssClassName.EMBED_CARD_CENTER_WRAPPER, " .mediaSingleView-content-wrap"), {
+  marginTop: 0,
+  marginBottom: 0
+}), ".".concat(RendererCssClassName.STICKY_SAFE_BREAKOUT_INNER, " > *:first-child"), {
+  marginTop: 0
+}), ".".concat(RendererCssClassName.STICKY_SAFE_BREAKOUT_INNER, " > *:last-child"), {
+  marginBottom: 0
+}), ".".concat(RendererCssClassName.EMBED_CARD_CENTER_WRAPPER, " > .mediaSingleView-content-wrap > *:first-child"), {
+  marginTop: 0
+}), ".".concat(RendererCssClassName.EMBED_CARD_CENTER_WRAPPER, " > .mediaSingleView-content-wrap > *:last-child"), {
+  marginBottom: 0
+}), ".".concat(RendererCssClassName.BLOCK_CARD_DATASOURCE_CENTER_WRAPPER, " > div > *:first-child"), {
+  marginTop: 0
+}), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_$concat3, ".".concat(RendererCssClassName.BLOCK_CARD_DATASOURCE_CENTER_WRAPPER, " > div > *:last-child"), {
+  marginBottom: 0
+}), ".".concat(RendererCssClassName.STICKY_SAFE_CENTER_WRAPPER, " .").concat(RendererCssClassName.EXTENSION, " > *:first-child"), {
+  marginTop: 0
+}), ".".concat(RendererCssClassName.STICKY_SAFE_CENTER_WRAPPER, " .").concat(RendererCssClassName.EXTENSION, " > *:last-child"), {
+  marginBottom: 0
 }), ".".concat(TableSharedCssClassName.TABLE_NODE_WRAPPER), {
   overflowX: 'auto'
 }), ".".concat(shadowObserverClassNames.SHADOW_CONTAINER, " .").concat(TableSharedCssClassName.TABLE_NODE_WRAPPER), {
   display: 'flex'
+}))));
+var extensionCenterAlignLegacyStyles = css(_defineProperty({}, ".".concat(RendererCssClassName.DOCUMENT), _defineProperty({}, ".".concat(RendererCssClassName.EXTENSION_CENTER_ALIGN), {
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+  marginLeft: '50%',
+  transform: 'translateX(-50%)'
 })));
 var baseOtherStyles = css(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
   '& .UnknownBlock': {
@@ -1106,7 +1151,7 @@ var baseOtherStyles = css(_defineProperty(_defineProperty(_defineProperty(_defin
 }), 'div[class^="image-wrap-"] + div[class^="image-wrap-"]', {
   marginLeft: 0,
   marginRight: 0
-}), ".".concat(RendererCssClassName.DOCUMENT, " >"), _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "*:not([data-mark-type='fragment']) .".concat(TableSharedCssClassName.TABLE_CONTAINER), {
+}), ".".concat(RendererCssClassName.DOCUMENT, " >"), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "*:not([data-mark-type='fragment']) .".concat(TableSharedCssClassName.TABLE_CONTAINER), {
   // Temporarily ignoring the below the owning team can add the ticket number for the TODO.  Context: https://atlassian.slack.com/archives/CPUEVD9MY/p1741565387326829
   // eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format
   // TODO - improve inline style logic on table container so important styles aren't required here
@@ -1122,17 +1167,41 @@ var baseOtherStyles = css(_defineProperty(_defineProperty(_defineProperty(_defin
   overflowX: 'auto'
 }), "& .".concat(RendererCssClassName.EXTENSION, ":first-child"), {
   marginTop: 0
-})), ".".concat(RendererCssClassName.DOCUMENT), _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ".".concat(RendererCssClassName.EXTENSION), {
+}), "& .".concat(RendererCssClassName.FLEX_CENTER_WRAPPER, ":first-child"), {
+  marginTop: 0
+})), ".".concat(RendererCssClassName.DOCUMENT), (_$concat6 = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_$concat6, ".".concat(RendererCssClassName.EXTENSION), {
   marginTop: "".concat(blockNodesVerticalMargin)
-}), ".".concat(RendererCssClassName.EXTENSION_CENTER_ALIGN), {
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-  marginLeft: '50%',
-  transform: 'translateX(-50%)'
+}), ".".concat(RendererCssClassName.STICKY_SAFE_CENTER_WRAPPER), {
+  marginTop: "".concat(blockNodesVerticalMargin)
+}), ".".concat(RendererCssClassName.DOCUMENT, " [data-multiBodiedExtension-container]:first-child .").concat(RendererCssClassName.STICKY_SAFE_CENTER_WRAPPER), {
+  marginTop: 0
+}), ".".concat(RendererCssClassName.STICKY_SAFE_CENTER_WRAPPER, " .").concat(RendererCssClassName.EXTENSION), {
+  marginTop: 0,
+  marginBottom: 0
+}), ".".concat(RendererCssClassName.EMBED_CARD_CENTER_WRAPPER, " .mediaSingleView-content-wrap"), {
+  marginTop: 0,
+  marginBottom: 0
+}), ".".concat(RendererCssClassName.STICKY_SAFE_BREAKOUT_INNER, " > *:first-child"), {
+  marginTop: 0
+}), ".".concat(RendererCssClassName.STICKY_SAFE_BREAKOUT_INNER, " > *:last-child"), {
+  marginBottom: 0
+}), ".".concat(RendererCssClassName.EMBED_CARD_CENTER_WRAPPER, " > .mediaSingleView-content-wrap > *:first-child"), {
+  marginTop: 0
+}), ".".concat(RendererCssClassName.EMBED_CARD_CENTER_WRAPPER, " > .mediaSingleView-content-wrap > *:last-child"), {
+  marginBottom: 0
+}), ".".concat(RendererCssClassName.BLOCK_CARD_DATASOURCE_CENTER_WRAPPER, " > div > *:first-child"), {
+  marginTop: 0
+}), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_$concat6, ".".concat(RendererCssClassName.BLOCK_CARD_DATASOURCE_CENTER_WRAPPER, " > div > *:last-child"), {
+  marginBottom: 0
+}), ".".concat(RendererCssClassName.STICKY_SAFE_CENTER_WRAPPER, " .").concat(RendererCssClassName.EXTENSION, " > *:first-child"), {
+  marginTop: 0
+}), ".".concat(RendererCssClassName.STICKY_SAFE_CENTER_WRAPPER, " .").concat(RendererCssClassName.EXTENSION, " > *:last-child"), {
+  marginBottom: 0
 }), ".".concat(TableSharedCssClassName.TABLE_NODE_WRAPPER), {
   overflowX: 'auto'
 }), ".".concat(shadowObserverClassNames.SHADOW_CONTAINER, " .").concat(TableSharedCssClassName.TABLE_NODE_WRAPPER), {
   display: 'flex'
-})));
+}))));
 var alignedHeadingAnchorStyleDuplicateAnchor = css({
   // Temporarily ignoring the below the owning team can add the ticket number for the TODO.  Context: https://atlassian.slack.com/archives/CPUEVD9MY/p1741565387326829
   // eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format
@@ -1937,11 +2006,11 @@ export var RendererStyleContainer = function RendererStyleContainer(props) {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
       textHighlightPaddingStyles, tasksAndDecisionsStyles, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) && headingPanelStyles, smartCardStyles, smartCardStylesAvatarFix, editorExperiment('platform_editor_preview_panel_linking_exp', true) && headerSmartCardStyles, smartCardStylesAvatarMarginFix, smartCardStylesAvatarListZeroMarginTop, fg('editor_inline_comments_on_inline_nodes') && rendererAnnotationStyles,
       // eslint-disable-next-line @atlaskit/platform/no-preconditioning
-      fg('editor_inline_comments_on_inline_nodes') && rendererAnnotationStylesCommentHeightFix, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? baseOtherStyles : baseOtherStylesDuplicateAnchor,
+      fg('editor_inline_comments_on_inline_nodes') && rendererAnnotationStylesCommentHeightFix, expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? baseOtherStyles : baseOtherStylesDuplicateAnchor, !expValEquals('platform_editor_flex_based_centering', 'isEnabled', true) && extensionCenterAlignLegacyStyles,
       // this should be placed after baseOtherStyles
       expValEquals('platform_editor_render_bodied_extension_as_inline', 'isEnabled', true) && (expValEquals('platform_editor_remove_important_in_render_ext', 'isEnabled', true) ? extensionAsInlineStyle : oldExtensionAsInlineStyle), expValEquals('confluence_insert_excerpt_inline_vertical_align', 'isEnabled', true) && inlineExtensionRendererMarginFix, allowNestedHeaderLinks && (expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? alignedHeadingAnchorStyle : alignedHeadingAnchorStyleDuplicateAnchor), mediaSingleSharedStyle,
       // merge firstWrappedMediaStyles with mediaSingleSharedStyle when clean up platform_editor_fix_media_in_renderer
-      fg('platform_editor_fix_media_in_renderer') && firstWrappedMediaStyles, tableSharedStyle, tableRendererHeaderStylesForTableCellOnly, fg('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, fg('platform_editor_nested_dnd_styles_changes') ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, isStickyScrollbarEnabled(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && allowNestedHeaderLinks && (expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks : rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinksDuplicateAnchor), rendererTableColumnStyles, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, (appearance === 'full-width' || appearance === 'max' && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true))) && responsiveBreakoutWidthFullWidth, expValEquals('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? isCompactModeEnabled ? scaledDenseEmojiStyles : scaledEmojiStyles : isCompactModeEnabled ? denseStyles : undefined, editorExperiment('platform_synced_block', true) && syncBlockStyles, editorExperiment('platform_synced_block', true) && syncBlockOverflowStyles, editorExperiment('platform_synced_block', true) && fg('platform_synced_block_patch_2') && syncBlockPatch2Styles],
+      fg('platform_editor_fix_media_in_renderer') && firstWrappedMediaStyles, tableSharedStyle, tableRendererHeaderStylesForTableCellOnly, fg('platform_editor_bordered_panel_nested_in_table') && tableRendererNestedPanelStyles, isBackgroundClipBrowserFixNeeded() && tableStylesBackGroundClipForGeckoForTableCellOnly, fg('platform_editor_nested_dnd_styles_changes') ? firstNodeWithNotMarginTopWithNestedDnD : firstNodeWithNotMarginTop, rendererTableStyles, isStickyScrollbarEnabled(appearance) && stickyScrollbarStyles, rendererTableHeaderEqualHeightStylesForTableCellOnly, allowColumnSorting && rendererTableSortableColumnStyles, allowColumnSorting && allowNestedHeaderLinks && (expValEquals('platform_editor_copy_link_a11y_inconsistency_fix', 'isEnabled', true) ? rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinks : rendererTableHeaderEqualHeightStylesAllowNestedHeaderLinksDuplicateAnchor), rendererTableColumnStyles, stickyHeaderStyles, codeBlockAndLayoutStyles, columnLayoutSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveSharedStyle, isAdvancedLayoutsOn && columnLayoutResponsiveRendererStyles, isAdvancedLayoutsOn && layoutSectionForAdvancedLayoutsStyles, !useBlockRenderForCodeBlock && gridRenderForCodeBlockStyles, browser.safari && codeBlockInListSafariFixStyles, appearance === 'full-page' && !isPreviewPanelResponsivenessOn && responsiveBreakoutWidth, appearance === 'full-page' && isPreviewPanelResponsivenessOn && responsiveBreakoutWidthWithReducedPadding, (appearance === 'full-width' || appearance === 'max' && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true))) && responsiveBreakoutWidthFullWidth, expValEquals('platform_editor_lovability_emoji_scaling', 'isEnabled', true) ? isCompactModeEnabled ? scaledDenseEmojiStyles : scaledEmojiStyles : isCompactModeEnabled ? denseStyles : undefined, editorExperiment('platform_synced_block', true) && syncBlockStyles, editorExperiment('platform_synced_block', true) && syncBlockOverflowStyles, editorExperiment('platform_synced_block', true) && fg('platform_synced_block_patch_2') && syncBlockPatch2Styles, centerWrapperStyles],
       "data-testid": testId
     }, children)
   );

package/dist/esm/ui/Renderer/index.js

@@ -62,7 +62,7 @@ export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var TABLE_INFO_TIMEOUT = 10000;
 var RENDER_EVENT_SAMPLE_RATE = 0.2;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "126.9.4";
+var packageVersion = "126.9.5";
 var setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

package/dist/types/consts.d.ts

@@ -1,9 +1,20 @@
 export declare const RendererCssClassName: {
+    FLEX_CENTER_WRAPPER: string;
     DOCUMENT: string;
     EXTENSION: string;
     EXTENSION_AS_INLINE: string;
     EXTENSION_CENTER_ALIGN: string;
     EXTENSION_OVERFLOW_CONTAINER: string;
+    /** Wrapper for center-aligned extensions/MBE; margin here so it participates in collapse */
+    STICKY_SAFE_CENTER_WRAPPER: string;
+    /** Wrapper for center-aligned embed card (wide/full-width); margin here so it participates in collapse */
+    EMBED_CARD_CENTER_WRAPPER: string;
+    /** Wrapper for center-aligned block card datasource (wide/full-width); margin here so it participates in collapse */
+    BLOCK_CARD_DATASOURCE_CENTER_WRAPPER: string;
+    /** Outer flex wrapper for sticky-safe breakout (has vertical margin); zero margin when first in doc */
+    STICKY_SAFE_BREAKOUT_WRAPPER: string;
+    /** Flex item in sticky-safe breakout; zero first/last child margin so flex container height matches legacy */
+    STICKY_SAFE_BREAKOUT_INNER: string;
     NUMBER_COLUMN: string;
     SORTABLE_COLUMN_WRAPPER: string;
     SORTABLE_COLUMN: string;

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

@@ -1,9 +1,20 @@
 export declare const RendererCssClassName: {
+    FLEX_CENTER_WRAPPER: string;
     DOCUMENT: string;
     EXTENSION: string;
     EXTENSION_AS_INLINE: string;
     EXTENSION_CENTER_ALIGN: string;
     EXTENSION_OVERFLOW_CONTAINER: string;
+    /** Wrapper for center-aligned extensions/MBE; margin here so it participates in collapse */
+    STICKY_SAFE_CENTER_WRAPPER: string;
+    /** Wrapper for center-aligned embed card (wide/full-width); margin here so it participates in collapse */
+    EMBED_CARD_CENTER_WRAPPER: string;
+    /** Wrapper for center-aligned block card datasource (wide/full-width); margin here so it participates in collapse */
+    BLOCK_CARD_DATASOURCE_CENTER_WRAPPER: string;
+    /** Outer flex wrapper for sticky-safe breakout (has vertical margin); zero margin when first in doc */
+    STICKY_SAFE_BREAKOUT_WRAPPER: string;
+    /** Flex item in sticky-safe breakout; zero first/last child margin so flex container height matches legacy */
+    STICKY_SAFE_BREAKOUT_INNER: string;
     NUMBER_COLUMN: string;
     SORTABLE_COLUMN_WRAPPER: string;
     SORTABLE_COLUMN: string;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "126.9.5",
+	"version": "126.10.0",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"