@atlaskit/editor-plugin-block-controls 17.3.9 → 17.3.11

package/CHANGELOG.md

@@ -1,5 +1,56 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 17.3.11
+
+### Patch Changes
+
+- [`0927c3666c010`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0927c3666c010) -
+  Upgrade `uuid` from `3.x` to `11.1.1` to remediate GHSA-w5hq-g745-h8pq / SNYK-JS-UUID-16133035.
+
+  `uuid@11` removed the deep subpath exports (`uuid/v4`, `uuid/v1`, `uuid/v5`) and the default
+  export, so all internal call sites were migrated to named imports:
+
+  ```diff
+  -import uuid from 'uuid/v4';
+  +import { v4 as uuid } from 'uuid';
+
+  -import uuid from 'uuid';
+  +import { v4 as uuid } from 'uuid';
+  ```
+
+  With the exception of `@atlassian/integrations` (below), this is an internal implementation change
+  only - no public API, export, or entrypoint changed. UUID generation behaviour is unchanged
+  (`uuid@3`'s default export was already `v4`).
+
+  `@atlassian/integrations` declares `uuid` as a peer dependency, so its declared range moved from
+  `^3.1.0` to `^11.1.1`. That is a peer dependency declaration change, hence `minor` rather than
+  `patch` for that package.
+
+  The following `platform/packages/ai-mate` packages were also touched, but are all `private: true`
+  and so are intentionally not listed in the frontmatter above:
+  - `@atlassian/csm-assistance-service` - bumped its explicit `uuid` dependency from `npm:^9.0.0` to
+    `npm:^11.1.1` (`9.0.1` is also within the advisory's affected range).
+  - `@atlassian/csm-guidance-config` - example helper only, migrated to the named `uuid` import.
+  - `@atlassian/csm-ui-components` - example helper only, migrated to the named `uuid` import.
+
+- Updated dependencies
+
+## 17.3.10
+
+### Patch Changes
+
+- [`42ff8dffbdf01`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/42ff8dffbdf01) -
+  EDITOR-8771: Buttons registered on the same surface position now stay visible independently of
+  eachother: a button that renders without hover (e.g. an AI suggestions icon) no longer
+  hides/showstogether with a hover-only button (e.g. Remix) that shares its position.Increase the
+  default drag-handle/surface gap for non-resizable, default-sized nodes from 8px to12px, matching
+  the gap already used for resizable/breakout nodes, so spacing is consistent acrossnode
+  types.Simplify `surfaceNodePositionsEnabled` (which controls whether the "stored" whole-doc
+  surface scanruns) to depend only on `platform_editor_block_control_migration`, dropping the
+  extra`platform_editor_collapsible_headings` OR-condition now
+  that`platform_editor_block_control_right_surface` consumers need the same behavior.
+- Updated dependencies
+
 ## 17.3.9
 
 ### Patch Changes

package/dist/cjs/blockControlsPlugin.js

@@ -46,7 +46,6 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
   var rightSideControlsEnabled = (_config$rightSideCont = config === null || config === void 0 ? void 0 : config.rightSideControlsEnabled) !== null && _config$rightSideCont !== void 0 ? _config$rightSideCont : false;
   var quickInsertButtonEnabled = (_config$quickInsertBu = config === null || config === void 0 ? void 0 : config.quickInsertButtonEnabled) !== null && _config$quickInsertBu !== void 0 ? _config$quickInsertBu : true;
   var registryBlockControlsEnabled = (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_control_migration');
-  var surfaceNodePositionsEnabled = registryBlockControlsEnabled && (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_collapsible_headings');
   var legacyBlockControlsEnabled = !registryBlockControlsEnabled;
   var rightSurfaceEnabled = registryBlockControlsEnabled && (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_control_right_surface');
   if (registryBlockControlsEnabled) {
@@ -146,7 +145,7 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
         plugin: function plugin(_ref2) {
           var getIntl = _ref2.getIntl,
             nodeViewPortalProviderAPI = _ref2.nodeViewPortalProviderAPI;
-          return (0, _main.createPlugin)(api, getIntl, nodeViewPortalProviderAPI, nodeDecorationRegistry, rightSideControlsEnabled, quickInsertButtonEnabled && legacyBlockControlsEnabled, legacyBlockControlsEnabled, surfaceNodePositionsEnabled, rightSurfaceEnabled);
+          return (0, _main.createPlugin)(api, getIntl, nodeViewPortalProviderAPI, nodeDecorationRegistry, rightSideControlsEnabled, quickInsertButtonEnabled && legacyBlockControlsEnabled, legacyBlockControlsEnabled, rightSurfaceEnabled);
         }
       }];
       if ((0, _editorExperiment.editorExperiment)('platform_editor_controls', 'variant1')) {
@@ -448,7 +447,7 @@ var blockControlsPlugin = exports.blockControlsPlugin = function blockControlsPl
         isEditing: (_interactionTrackingP = _pmPlugin.interactionTrackingPluginKey.getState(editorState)) === null || _interactionTrackingP === void 0 ? void 0 : _interactionTrackingP.isEditing,
         isSelectedViaDragHandle: (_key$getState$isSelec = (_key$getState10 = _main.key.getState(editorState)) === null || _key$getState10 === void 0 ? void 0 : _key$getState10.isSelectedViaDragHandle) !== null && _key$getState$isSelec !== void 0 ? _key$getState$isSelec : false
       };
-      if (surfaceNodePositionsEnabled) {
+      if (registryBlockControlsEnabled) {
         var _key$getState$surface, _key$getState11;
         sharedState.surfaceNodePositions = (_key$getState$surface = (_key$getState11 = _main.key.getState(editorState)) === null || _key$getState11 === void 0 ? void 0 : _key$getState11.surfaceNodePositions) !== null && _key$getState$surface !== void 0 ? _key$getState$surface : [];
       }

package/dist/cjs/pm-plugins/decorations-common.js

@@ -8,7 +8,7 @@ exports.unmountDecorations = exports.getNodeTypeWithLevel = exports.getNodeAncho
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _uuid = _interopRequireDefault(require("uuid"));
+var _uuid = require("uuid");
 var _nodeTypeUtils = require("@atlaskit/editor-common/utils/node-type-utils");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _reactRootRegistry = require("./react-root-registry");
@@ -48,7 +48,7 @@ var ObjHash = /*#__PURE__*/function () {
         return this.caching.get(node);
       }
       // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
-      var uniqueId = (0, _uuid.default)();
+      var uniqueId = (0, _uuid.v4)();
       this.caching.set(node, uniqueId);
       return uniqueId;
     }

package/dist/cjs/pm-plugins/decorations-drag-handle.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.findHandleDec = exports.findActiveDragHandleNodeDec = exports.emptyParagraphNodeDecorations = exports.dragHandleDecoration = exports.createActiveDragHandleNodeDecoration = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
-var _uuid = _interopRequireDefault(require("uuid"));
+var _uuid = require("uuid");
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
@@ -62,12 +62,12 @@ var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDec
     editorState = _ref.editorState;
   (0, _decorationsCommon.unmountDecorations)(nodeViewPortalProviderAPI, 'data-blocks-drag-handle-container', 'data-blocks-drag-handle-key');
   // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
-  var key = (0, _uuid.default)();
+  var key = (0, _uuid.v4)();
   var widgetSpec = (0, _editorExperiment.editorExperiment)('platform_editor_breakout_resizing', true) ? {
     side: -1,
     type: _decorationsCommon.TYPE_HANDLE_DEC,
     // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
-    testid: "".concat(_decorationsCommon.TYPE_HANDLE_DEC, "-").concat((0, _uuid.default)()),
+    testid: "".concat(_decorationsCommon.TYPE_HANDLE_DEC, "-").concat((0, _uuid.v4)()),
     /**
      * sigh - `marks` influences the position that the widget is drawn (as described on the `side` property).
      * Exclude 'breakout' on purpose, so the widgets render at the top of the document to avoid z-index issues
@@ -78,7 +78,7 @@ var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDec
     side: -1,
     type: _decorationsCommon.TYPE_HANDLE_DEC,
     // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
-    testid: "".concat(_decorationsCommon.TYPE_HANDLE_DEC, "-").concat((0, _uuid.default)()),
+    testid: "".concat(_decorationsCommon.TYPE_HANDLE_DEC, "-").concat((0, _uuid.v4)()),
     marks: (0, _expValEquals.expValEquals)('platform_editor_small_font_size', 'isEnabled', true) ? (0, _marks.getMatchingBlockMarks)(editorState, pos, [editorState.schema.marks.alignment, editorState.schema.marks.fontSize]) : []
   };
   return _view.Decoration.widget(pos, function (view, getPosUnsafe) {

package/dist/cjs/pm-plugins/decorations-drop-target.js

@@ -9,7 +9,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = require("react");
 var _memoizeOne = _interopRequireDefault(require("memoize-one"));
-var _uuid = _interopRequireDefault(require("uuid"));
+var _uuid = require("uuid");
 var _selection = require("@atlaskit/editor-common/selection");
 var _utils = require("@atlaskit/editor-common/utils");
 var _nodeTypeUtils = require("@atlaskit/editor-common/utils/node-type-utils");
@@ -100,7 +100,7 @@ var findDropTargetDecs = exports.findDropTargetDecs = function findDropTargetDec
 };
 var createDropTargetDecoration = exports.createDropTargetDecoration = function createDropTargetDecoration(pos, props, nodeViewPortalProviderAPI, side, anchorRectCache, isSameLayout) {
   // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
-  var key = (0, _uuid.default)();
+  var key = (0, _uuid.v4)();
   return _view.Decoration.widget(pos, function (_, getPosUnsafe) {
     var getPos = function getPos() {
       try {
@@ -139,7 +139,7 @@ var createDropTargetDecoration = exports.createDropTargetDecoration = function c
 };
 var createLayoutDropTargetDecoration = exports.createLayoutDropTargetDecoration = function createLayoutDropTargetDecoration(pos, props, nodeViewPortalProviderAPI, anchorRectCache) {
   // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
-  var key = (0, _uuid.default)();
+  var key = (0, _uuid.v4)();
   return _view.Decoration.widget(pos, function (_, getPosUnsafe) {
     var getPos = function getPos() {
       try {

package/dist/cjs/pm-plugins/decorations-quick-insert-button.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.quickInsertButtonDecoration = exports.findQuickInsertInsertButtonDecoration = exports.findActiveQuickInsertNodeDec = exports.createActiveQuickInsertNodeDecoration = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
-var _uuid = _interopRequireDefault(require("uuid"));
+var _uuid = require("uuid");
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
@@ -51,7 +51,7 @@ var quickInsertButtonDecoration = exports.quickInsertButtonDecoration = function
     anchorRectCache = _ref.anchorRectCache,
     editorState = _ref.editorState;
   // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
-  var key = (0, _uuid.default)();
+  var key = (0, _uuid.v4)();
   var cleanupCallbacks = [];
   var widgetSpec = (0, _editorExperiment.editorExperiment)('platform_editor_breakout_resizing', true) ? {
     side: -2,

package/dist/cjs/pm-plugins/main.js

@@ -890,14 +890,16 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl, no
   var rightSideControlsEnabled = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
   var quickInsertButtonEnabled = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : true;
   var legacyDragHandleEnabled = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : true;
-  var surfaceNodePositionsEnabled = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : false;
-  var rightSurfaceEnabled = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : false;
+  var rightSurfaceEnabled = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : false;
   var _getIntl = getIntl(),
     formatMessage = _getIntl.formatMessage;
   var isAdvancedLayoutEnabled = (0, _editorExperiment.editorExperiment)('advanced_layouts', true, {
     exposure: true
   });
   var toolbarFlagsEnabled = (0, _toolbarFlagCheck.areToolbarFlagsEnabled)(Boolean(api === null || api === void 0 ? void 0 : api.toolbar));
+  // Mirrors `registryBlockControlsEnabled` in blockControlsPlugin.tsx: `legacyDragHandleEnabled` is
+  // only false once that gate is on.
+  var surfaceNodePositionsEnabled = !legacyDragHandleEnabled;
   var flags = {
     legacyDragHandleEnabled: legacyDragHandleEnabled,
     surfaceNodePositionsEnabled: surfaceNodePositionsEnabled,

package/dist/cjs/ui/block-controls-left-surface.js

@@ -14,6 +14,7 @@ var _surfaceKeys = require("@atlaskit/editor-common/block-controls/surface-keys"
 var _surfaceRenderer = require("@atlaskit/editor-ui-control-model/surface-renderer");
 var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _blockControlsSurfaceContext = require("./block-controls-surface-context");
+var _partitionComponentsByPersistence = require("./utils/partition-components-by-persistence");
 var _visibilityContainer = require("./visibility-container");
 var leftSurfaceOuterStyles = null;
 var leftSurfaceRowStyles = null;
@@ -34,11 +35,11 @@ var BlockControlsLeftSurface = exports.BlockControlsLeftSurface = function Block
   if (!placement || !(0, _surfaceRenderer.willSurfaceRender)(components, _surfaceKeys.BLOCK_CONTROLS_LEFT_SURFACE, surfaceContext)) {
     return null;
   }
-  var surface = /*#__PURE__*/_react.default.createElement(_surfaceRenderer.SurfaceRenderer, {
-    components: components,
-    surface: _surfaceKeys.BLOCK_CONTROLS_LEFT_SURFACE,
-    surfaceContext: surfaceContext
-  });
+  var _partitionComponentsB = (0, _partitionComponentsByPersistence.partitionComponentsByPersistence)(components, _surfaceKeys.BLOCK_CONTROLS_LEFT_SURFACE, surfaceContext),
+    hoverOnlyComponents = _partitionComponentsB.hoverOnlyComponents,
+    persistentComponents = _partitionComponentsB.persistentComponents;
+  var willRenderPersistent = (0, _surfaceRenderer.willSurfaceRender)(persistentComponents, _surfaceKeys.BLOCK_CONTROLS_LEFT_SURFACE, surfaceContext);
+  var willRenderHoverOnly = (0, _surfaceRenderer.willSurfaceRender)(hoverOnlyComponents, _surfaceKeys.BLOCK_CONTROLS_LEFT_SURFACE, surfaceContext);
   var isSticky = placement.height !== undefined;
   return /*#__PURE__*/_react.default.createElement("div", {
     "data-editor-block-controls-surface": true,
@@ -49,10 +50,23 @@ var BlockControlsLeftSurface = exports.BlockControlsLeftSurface = function Block
     className: (0, _runtime.ax)(["_kqswstnw _1pbyb4wl"])
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _runtime.ax)(["_zulpv77o _4cvr1h6o _1e0c1txw", isSticky && "_kqsw1if8 _154iu2gc"])
-  }, /*#__PURE__*/_react.default.createElement(_visibilityContainer.VisibilityContainer, {
+  }, willRenderPersistent && /*#__PURE__*/_react.default.createElement(_visibilityContainer.VisibilityContainer, {
+    api: api,
+    controlSide: (0, _blockControlsSurfaceContext.getBlockControlsSurfaceControlSide)(surfaceContext.get(_blockControlUiContext.BLOCK_CONTROL_UI_CONTEXT), (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_controls_reliable_anchor')),
+    forceVisibleOnMouseOut: forceVisibleOnMouseOut,
+    shouldUseDisplayContents: true
+  }, /*#__PURE__*/_react.default.createElement(_surfaceRenderer.SurfaceRenderer, {
+    components: persistentComponents,
+    surface: _surfaceKeys.BLOCK_CONTROLS_LEFT_SURFACE,
+    surfaceContext: surfaceContext
+  })), willRenderHoverOnly && /*#__PURE__*/_react.default.createElement(_visibilityContainer.VisibilityContainer, {
     api: api,
     controlSide: (0, _blockControlsSurfaceContext.getBlockControlsSurfaceControlSide)(surfaceContext.get(_blockControlUiContext.BLOCK_CONTROL_UI_CONTEXT), (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_controls_reliable_anchor')),
     forceVisibleOnMouseOut: forceVisibleOnMouseOut,
     shouldUseDisplayContents: true
-  }, surface)));
+  }, /*#__PURE__*/_react.default.createElement(_surfaceRenderer.SurfaceRenderer, {
+    components: hoverOnlyComponents,
+    surface: _surfaceKeys.BLOCK_CONTROLS_LEFT_SURFACE,
+    surfaceContext: surfaceContext
+  }))));
 };

package/dist/cjs/ui/block-controls-right-surface.js

@@ -11,6 +11,7 @@ var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireDefault(require("react"));
 var _surfaceKeys = require("@atlaskit/editor-common/block-controls/surface-keys");
 var _surfaceRenderer = require("@atlaskit/editor-ui-control-model/surface-renderer");
+var _partitionComponentsByPersistence = require("./utils/partition-components-by-persistence");
 var _visibilityContainer = require("./visibility-container");
 var rightSurfaceOuterStyles = null;
 var rightSurfaceRowStyles = null;
@@ -31,11 +32,11 @@ var BlockControlsRightSurface = exports.BlockControlsRightSurface = function Blo
   if (!placement || !(0, _surfaceRenderer.willSurfaceRender)(components, _surfaceKeys.BLOCK_CONTROLS_RIGHT_SURFACE, surfaceContext)) {
     return null;
   }
-  var surface = /*#__PURE__*/_react.default.createElement(_surfaceRenderer.SurfaceRenderer, {
-    components: components,
-    surface: _surfaceKeys.BLOCK_CONTROLS_RIGHT_SURFACE,
-    surfaceContext: surfaceContext
-  });
+  var _partitionComponentsB = (0, _partitionComponentsByPersistence.partitionComponentsByPersistence)(components, _surfaceKeys.BLOCK_CONTROLS_RIGHT_SURFACE, surfaceContext),
+    hoverOnlyComponents = _partitionComponentsB.hoverOnlyComponents,
+    persistentComponents = _partitionComponentsB.persistentComponents;
+  var willRenderPersistent = (0, _surfaceRenderer.willSurfaceRender)(persistentComponents, _surfaceKeys.BLOCK_CONTROLS_RIGHT_SURFACE, surfaceContext);
+  var willRenderHoverOnly = (0, _surfaceRenderer.willSurfaceRender)(hoverOnlyComponents, _surfaceKeys.BLOCK_CONTROLS_RIGHT_SURFACE, surfaceContext);
   var isSticky = placement.height !== undefined;
   return /*#__PURE__*/_react.default.createElement("div", {
     "data-editor-block-controls-surface": true,
@@ -46,10 +47,23 @@ var BlockControlsRightSurface = exports.BlockControlsRightSurface = function Blo
     className: (0, _runtime.ax)(["_kqswstnw _1pbyb4wl"])
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _runtime.ax)(["_zulpv77o _4cvr1h6o _1e0c1txw", isSticky && "_kqsw1if8 _154iu2gc"])
-  }, /*#__PURE__*/_react.default.createElement(_visibilityContainer.VisibilityContainer, {
+  }, willRenderPersistent && /*#__PURE__*/_react.default.createElement(_visibilityContainer.VisibilityContainer, {
+    api: api,
+    controlSide: "right",
+    isPersistent: true,
+    shouldUseDisplayContents: true
+  }, /*#__PURE__*/_react.default.createElement(_surfaceRenderer.SurfaceRenderer, {
+    components: persistentComponents,
+    surface: _surfaceKeys.BLOCK_CONTROLS_RIGHT_SURFACE,
+    surfaceContext: surfaceContext
+  })), willRenderHoverOnly && /*#__PURE__*/_react.default.createElement(_visibilityContainer.VisibilityContainer, {
     api: api,
     controlSide: "right",
     forceVisibleOnMouseOut: forceVisibleOnMouseOut,
     shouldUseDisplayContents: true
-  }, surface)));
+  }, /*#__PURE__*/_react.default.createElement(_surfaceRenderer.SurfaceRenderer, {
+    components: hoverOnlyComponents,
+    surface: _surfaceKeys.BLOCK_CONTROLS_RIGHT_SURFACE,
+    surfaceContext: surfaceContext
+  }))));
 };

package/dist/cjs/ui/consts.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.topPositionAdjustment = exports.spacingBetweenNodesForPreview = exports.spaceLookupMap = exports.rootElementGap = exports.nodeMargins = exports.getNestedNodeLeftPaddingMargin = exports.dropTargetMarginMap = exports.dragHandleGap = exports.STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER = exports.STICKY_CONTROLS_TOP_MARGIN = exports.QUICK_INSERT_WIDTH = exports.QUICK_INSERT_LEFT_OFFSET = exports.QUICK_INSERT_HEIGHT = exports.QUICK_INSERT_DIMENSIONS = exports.DRAG_HANDLE_ZINDEX = exports.DRAG_HANDLE_WRAPPED_MEDIA_EMBED_TOP_ADJUSTMENT = exports.DRAG_HANDLE_SYNCED_BLOCK_GAP = exports.DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT = exports.DRAG_HANDLE_PARAGRAPH_SMALL_TOP_ADJUSTMENT = exports.DRAG_HANDLE_NARROW_GAP = exports.DRAG_HANDLE_MAX_WIDTH_PLUS_GAP = exports.DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH = exports.DRAG_HANDLE_MAX_GAP = exports.DRAG_HANDLE_LAYOUT_SECTION_TOP_ADJUSTMENT = exports.DRAG_HANDLE_HEIGHT = exports.DRAG_HANDLE_H6_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H5_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H4_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H3_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H2_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H1_TOP_ADJUSTMENT = exports.DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT = exports.DRAG_HANDLE_DEFAULT_GAP = exports.DRAG_HANDLE_BORDER_RADIUS = exports.DEFAULT_COLUMN_DISTRIBUTIONS = exports.BLOCK_CONTROLS_SURFACE_SELECTOR = exports.ACTIVE_QUICK_INSERT_FALLBACK_ANCHOR_NAME = exports.ACTIVE_QUICK_INSERT_ATTR = exports.ACTIVE_DRAG_HANDLE_FALLBACK_ANCHOR_NAME = exports.ACTIVE_DRAG_HANDLE_ATTR = void 0;
+exports.topPositionAdjustment = exports.spacingBetweenNodesForPreview = exports.spaceLookupMap = exports.rootElementGap = exports.nodeMargins = exports.getNestedNodeLeftPaddingMargin = exports.dropTargetMarginMap = exports.dragHandleGap = exports.STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER = exports.STICKY_CONTROLS_TOP_MARGIN = exports.QUICK_INSERT_WIDTH = exports.QUICK_INSERT_LEFT_OFFSET = exports.QUICK_INSERT_HEIGHT = exports.QUICK_INSERT_DIMENSIONS = exports.DRAG_HANDLE_ZINDEX = exports.DRAG_HANDLE_WRAPPED_MEDIA_EMBED_TOP_ADJUSTMENT = exports.DRAG_HANDLE_SYNCED_BLOCK_GAP = exports.DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT = exports.DRAG_HANDLE_PARAGRAPH_SMALL_TOP_ADJUSTMENT = exports.DRAG_HANDLE_NARROW_GAP = exports.DRAG_HANDLE_MAX_WIDTH_PLUS_GAP = exports.DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH = exports.DRAG_HANDLE_MAX_GAP = exports.DRAG_HANDLE_LAYOUT_SECTION_TOP_ADJUSTMENT = exports.DRAG_HANDLE_HEIGHT = exports.DRAG_HANDLE_H6_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H5_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H4_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H3_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H2_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H1_TOP_ADJUSTMENT = exports.DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT = exports.DRAG_HANDLE_BORDER_RADIUS = exports.DEFAULT_COLUMN_DISTRIBUTIONS = exports.BLOCK_CONTROLS_SURFACE_SELECTOR = exports.ACTIVE_QUICK_INSERT_FALLBACK_ANCHOR_NAME = exports.ACTIVE_QUICK_INSERT_ATTR = exports.ACTIVE_DRAG_HANDLE_FALLBACK_ANCHOR_NAME = exports.ACTIVE_DRAG_HANDLE_ATTR = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _styles = require("@atlaskit/editor-common/styles");
@@ -23,11 +23,19 @@ var ACTIVE_QUICK_INSERT_FALLBACK_ANCHOR_NAME = exports.ACTIVE_QUICK_INSERT_FALLB
 var DRAG_HANDLE_HEIGHT = exports.DRAG_HANDLE_HEIGHT = 24;
 var DRAG_HANDLE_BORDER_RADIUS = exports.DRAG_HANDLE_BORDER_RADIUS = 4;
 var DRAG_HANDLE_ZINDEX = exports.DRAG_HANDLE_ZINDEX = _editorSharedStyles.akRichMediaResizeZIndex + _editorSharedStyles.akEditorUnitZIndex; //place above legacy resizer
-var DRAG_HANDLE_DEFAULT_GAP = exports.DRAG_HANDLE_DEFAULT_GAP = 8;
+var LEGACY_DRAG_HANDLE_DEFAULT_GAP = 8;
+var MIGRATED_DRAG_HANDLE_DEFAULT_GAP = 12;
 var DRAG_HANDLE_NARROW_GAP = exports.DRAG_HANDLE_NARROW_GAP = 4;
 var DRAG_HANDLE_MAX_GAP = exports.DRAG_HANDLE_MAX_GAP = 12;
 var DRAG_HANDLE_SYNCED_BLOCK_GAP = exports.DRAG_HANDLE_SYNCED_BLOCK_GAP = 2.5;
 var DRAG_HANDLE_MAX_WIDTH_PLUS_GAP = exports.DRAG_HANDLE_MAX_WIDTH_PLUS_GAP = _styles.DRAG_HANDLE_WIDTH + DRAG_HANDLE_MAX_GAP;
+
+// Non-resizable/default-sized nodes get the same gap as resizable/breakout nodes
+// (DRAG_HANDLE_MAX_GAP) once the registry-backed surfaces are on; kept at the legacy value
+// otherwise to avoid an unrelated visual change for consumers still on the old decoration path.
+var getDragHandleDefaultGap = function getDragHandleDefaultGap() {
+  return (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_block_control_migration') ? MIGRATED_DRAG_HANDLE_DEFAULT_GAP : LEGACY_DRAG_HANDLE_DEFAULT_GAP;
+};
 var DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT = exports.DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT = 4 + 2; // 4px for the divider vertical padding and 2px for the divider height
 var DRAG_HANDLE_H1_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H1_TOP_ADJUSTMENT = 5;
 var DRAG_HANDLE_H2_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H2_TOP_ADJUSTMENT = 2;
@@ -78,12 +86,12 @@ var dragHandleGap = exports.dragHandleGap = function dragHandleGap(nodeType, par
     }
   }
   if (nodeType === 'layoutSection') {
-    return DRAG_HANDLE_DEFAULT_GAP + 20;
+    return getDragHandleDefaultGap() + 20;
   }
   if (nodeTypeExcludeList.includes(nodeType)) {
     return DRAG_HANDLE_MAX_GAP;
   }
-  return DRAG_HANDLE_DEFAULT_GAP;
+  return getDragHandleDefaultGap();
 };
 
 // use for returning gap only for root level elements
@@ -104,7 +112,7 @@ var rootElementGap = exports.rootElementGap = function rootElementGap(nodeType)
   if (nodeType === 'layoutSection') {
     return DRAG_HANDLE_MAX_GAP + 12;
   }
-  return DRAG_HANDLE_DEFAULT_GAP;
+  return getDragHandleDefaultGap();
 };
 var getNestedNodeLeftPaddingMargin = exports.getNestedNodeLeftPaddingMargin = function getNestedNodeLeftPaddingMargin(nodeType) {
   switch (nodeType) {

package/dist/cjs/ui/utils/partition-components-by-persistence.js

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.partitionComponentsByPersistence = void 0;
+var _blockControlUiContext = require("@atlaskit/editor-common/block-controls/block-control-ui-context");
+var _surfaceRenderer = require("@atlaskit/editor-ui-control-model/surface-renderer");
+var _createSurfaceContext = require("@atlaskit/editor-ui-control-model/create-surface-context");
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+/**
+ * Split registered components into two groups:
+ * those that should be rendered persistently and those that should only be rendered on hover.
+ */
+var partitionComponentsByPersistence = exports.partitionComponentsByPersistence = function partitionComponentsByPersistence(components, surface, surfaceContext) {
+  var _resolveSurface = (0, _surfaceRenderer.resolveSurface)(components, surface),
+    childrenMap = _resolveSurface.childrenMap,
+    root = _resolveSurface.root,
+    topLevelChildren = _resolveSurface.topLevelChildren;
+  if (!root || !topLevelChildren || topLevelChildren.length === 0) {
+    return {
+      hoverOnlyComponents: [],
+      persistentComponents: components
+    };
+  }
+  var context = surfaceContext === null || surfaceContext === void 0 ? void 0 : surfaceContext.get(_blockControlUiContext.BLOCK_CONTROL_UI_CONTEXT);
+  var storedSurfaceContext = context ? (0, _createSurfaceContext.createSurfaceContext)(_blockControlUiContext.BLOCK_CONTROL_UI_CONTEXT, {
+    activeNode: undefined,
+    rootNode: context.targetNode,
+    targetNode: context.targetNode
+  }) : undefined;
+  var isLeaf = function isLeaf(component) {
+    var children = childrenMap.get((0, _surfaceRenderer.getComponentIdentity)(component));
+    return !children || children.length === 0;
+  };
+  var persistentComponents = [];
+  var hoverOnlyComponents = [];
+  var _iterator = _createForOfIteratorHelper(components),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var component = _step.value;
+      if (!isLeaf(component)) {
+        persistentComponents.push(component);
+        hoverOnlyComponents.push(component);
+        continue;
+      }
+      if ((0, _surfaceRenderer.willComponentRender)(component, childrenMap, storedSurfaceContext)) {
+        persistentComponents.push(component);
+      } else {
+        hoverOnlyComponents.push(component);
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return {
+    hoverOnlyComponents: hoverOnlyComponents,
+    persistentComponents: persistentComponents
+  };
+};

package/dist/cjs/ui/visibility-container.js

@@ -62,6 +62,7 @@ var VisibilityContainer = exports.VisibilityContainer = function VisibilityConta
     children = _ref.children,
     controlSide = _ref.controlSide,
     forceVisibleOnMouseOut = _ref.forceVisibleOnMouseOut,
+    isPersistent = _ref.isPersistent,
     shouldUseDisplayContents = _ref.shouldUseDisplayContents;
   var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['typeAhead', 'blockControls', 'editorViewMode', 'userIntent', 'showDiff'], function (states) {
       var _states$typeAheadStat, _states$blockControls, _states$blockControls2, _states$blockControls3, _states$editorViewMod, _states$userIntentSta, _states$showDiffState, _states$blockControls4;
@@ -99,9 +100,12 @@ var VisibilityContainer = exports.VisibilityContainer = function VisibilityConta
   // When forceVisibleOnMouseOut is true (e.g. drag handle focused via keyboard Shift+Ctrl+H),
   // override the mouse-out condition so the control stays visible regardless of mouse position.
   var shouldHideWhenMouseOut = forceVisibleOnMouseOut ? false : hideOnMouseOut;
-  var shouldHideImmediate = isTypeAheadOpen || isEditing || shouldHideWhenMouseOut || userIntent === 'aiStreaming' ||
+  // Persistent controls (e.g. an AI suggestion icon on every qualifying node) aren't hover-driven,
+  // so none of the hover/typing/mouse-out/diff-review reasons below apply to them — they're never
+  // hidden by this container.
+  var shouldHideImmediate = !isPersistent && (isTypeAheadOpen || isEditing || shouldHideWhenMouseOut || userIntent === 'aiStreaming' ||
   // EDITOR-7926: hide the drag handle while a diff is on screen or a suggestion card is open.
-  (isDisplayingDiff || userIntent === 'reviewing') && (0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true) || sideHidden;
+  (isDisplayingDiff || userIntent === 'reviewing') && (0, _expValEquals.expValEquals)('platform_editor_diff_plugin_extended', 'isEnabled', true) || sideHidden);
 
   // Delay hiding the right control in view mode to reduce flickering when moving from block
   // toward the right-edge button (avoids rapid show/hide as mouse crosses boundaries).

package/dist/es2019/blockControlsPlugin.js

@@ -36,7 +36,6 @@ export const blockControlsPlugin = ({
   const rightSideControlsEnabled = (_config$rightSideCont = config === null || config === void 0 ? void 0 : config.rightSideControlsEnabled) !== null && _config$rightSideCont !== void 0 ? _config$rightSideCont : false;
   const quickInsertButtonEnabled = (_config$quickInsertBu = config === null || config === void 0 ? void 0 : config.quickInsertButtonEnabled) !== null && _config$quickInsertBu !== void 0 ? _config$quickInsertBu : true;
   const registryBlockControlsEnabled = isExperimentEnabled('platform_editor_block_control_migration');
-  const surfaceNodePositionsEnabled = registryBlockControlsEnabled && isExperimentEnabled('platform_editor_collapsible_headings');
   const legacyBlockControlsEnabled = !registryBlockControlsEnabled;
   const rightSurfaceEnabled = registryBlockControlsEnabled && isExperimentEnabled('platform_editor_block_control_right_surface');
   if (registryBlockControlsEnabled) {
@@ -144,7 +143,7 @@ export const blockControlsPlugin = ({
         plugin: ({
           getIntl,
           nodeViewPortalProviderAPI
-        }) => createPlugin(api, getIntl, nodeViewPortalProviderAPI, nodeDecorationRegistry, rightSideControlsEnabled, quickInsertButtonEnabled && legacyBlockControlsEnabled, legacyBlockControlsEnabled, surfaceNodePositionsEnabled, rightSurfaceEnabled)
+        }) => createPlugin(api, getIntl, nodeViewPortalProviderAPI, nodeDecorationRegistry, rightSideControlsEnabled, quickInsertButtonEnabled && legacyBlockControlsEnabled, legacyBlockControlsEnabled, rightSurfaceEnabled)
       }];
       if (editorExperiment('platform_editor_controls', 'variant1')) {
         pmPlugins.push({
@@ -440,7 +439,7 @@ export const blockControlsPlugin = ({
         isEditing: (_interactionTrackingP = interactionTrackingPluginKey.getState(editorState)) === null || _interactionTrackingP === void 0 ? void 0 : _interactionTrackingP.isEditing,
         isSelectedViaDragHandle: (_key$getState$isSelec = (_key$getState10 = key.getState(editorState)) === null || _key$getState10 === void 0 ? void 0 : _key$getState10.isSelectedViaDragHandle) !== null && _key$getState$isSelec !== void 0 ? _key$getState$isSelec : false
       };
-      if (surfaceNodePositionsEnabled) {
+      if (registryBlockControlsEnabled) {
         var _key$getState$surface, _key$getState11;
         sharedState.surfaceNodePositions = (_key$getState$surface = (_key$getState11 = key.getState(editorState)) === null || _key$getState11 === void 0 ? void 0 : _key$getState11.surfaceNodePositions) !== null && _key$getState$surface !== void 0 ? _key$getState$surface : [];
       }

package/dist/es2019/pm-plugins/decorations-common.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
-import uuid from 'uuid';
+import { v4 as uuid } from 'uuid';
 import { getBaseNodeTypeName } from '@atlaskit/editor-common/utils/node-type-utils';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { unmountFromMountPoint } from './react-root-registry';

package/dist/es2019/pm-plugins/decorations-drag-handle.js

@@ -1,6 +1,6 @@
 import { createElement } from 'react';
 // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
-import uuid from 'uuid';
+import { v4 as uuid } from 'uuid';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';

package/dist/es2019/pm-plugins/decorations-drop-target.js

@@ -1,7 +1,7 @@
 import { createElement } from 'react';
 import memoizeOne from 'memoize-one';
 // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
-import uuid from 'uuid';
+import { v4 as uuid } from 'uuid';
 import { expandSelectionBounds } from '@atlaskit/editor-common/selection';
 import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
 import { getBaseNodeTypeName } from '@atlaskit/editor-common/utils/node-type-utils';

package/dist/es2019/pm-plugins/decorations-quick-insert-button.js

@@ -1,6 +1,6 @@
 import { createElement } from 'react';
 // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
-import uuid from 'uuid';
+import { v4 as uuid } from 'uuid';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';

package/dist/es2019/pm-plugins/main.js

@@ -784,7 +784,7 @@ export const apply = (api, formatMessage, tr, currentState, newState, flags, nod
     isSelectedViaDragHandle: isSelectedViaDragHandleNew
   };
 };
-export const createPlugin = (api, getIntl, nodeViewPortalProviderAPI, nodeDecorationRegistry, rightSideControlsEnabled = false, quickInsertButtonEnabled = true, legacyDragHandleEnabled = true, surfaceNodePositionsEnabled = false, rightSurfaceEnabled = false) => {
+export const createPlugin = (api, getIntl, nodeViewPortalProviderAPI, nodeDecorationRegistry, rightSideControlsEnabled = false, quickInsertButtonEnabled = true, legacyDragHandleEnabled = true, rightSurfaceEnabled = false) => {
   var _api$uiControlRegistr, _api$uiControlRegistr2, _api$uiControlRegistr3, _api$uiControlRegistr4;
   const {
     formatMessage
@@ -793,6 +793,9 @@ export const createPlugin = (api, getIntl, nodeViewPortalProviderAPI, nodeDecora
     exposure: true
   });
   const toolbarFlagsEnabled = areToolbarFlagsEnabled(Boolean(api === null || api === void 0 ? void 0 : api.toolbar));
+  // Mirrors `registryBlockControlsEnabled` in blockControlsPlugin.tsx: `legacyDragHandleEnabled` is
+  // only false once that gate is on.
+  const surfaceNodePositionsEnabled = !legacyDragHandleEnabled;
   const flags = {
     legacyDragHandleEnabled,
     surfaceNodePositionsEnabled,

package/dist/es2019/ui/block-controls-left-surface.js

@@ -7,6 +7,7 @@ import { BLOCK_CONTROLS_LEFT_SURFACE } from '@atlaskit/editor-common/block-contr
 import { SurfaceRenderer, willSurfaceRender } from '@atlaskit/editor-ui-control-model/surface-renderer';
 import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { getBlockControlsSurfaceControlSide } from './block-controls-surface-context';
+import { partitionComponentsByPersistence } from './utils/partition-components-by-persistence';
 import { VisibilityContainer } from './visibility-container';
 const leftSurfaceOuterStyles = null;
 const leftSurfaceRowStyles = null;
@@ -28,11 +29,12 @@ export const BlockControlsLeftSurface = ({
   if (!placement || !willSurfaceRender(components, BLOCK_CONTROLS_LEFT_SURFACE, surfaceContext)) {
     return null;
   }
-  const surface = /*#__PURE__*/React.createElement(SurfaceRenderer, {
-    components: components,
-    surface: BLOCK_CONTROLS_LEFT_SURFACE,
-    surfaceContext: surfaceContext
-  });
+  const {
+    hoverOnlyComponents,
+    persistentComponents
+  } = partitionComponentsByPersistence(components, BLOCK_CONTROLS_LEFT_SURFACE, surfaceContext);
+  const willRenderPersistent = willSurfaceRender(persistentComponents, BLOCK_CONTROLS_LEFT_SURFACE, surfaceContext);
+  const willRenderHoverOnly = willSurfaceRender(hoverOnlyComponents, BLOCK_CONTROLS_LEFT_SURFACE, surfaceContext);
   const isSticky = placement.height !== undefined;
   return /*#__PURE__*/React.createElement("div", {
     "data-editor-block-controls-surface": true,
@@ -43,10 +45,23 @@ export const BlockControlsLeftSurface = ({
     className: ax(["_kqswstnw _1pbyb4wl"])
   }, /*#__PURE__*/React.createElement("div", {
     className: ax(["_zulpv77o _4cvr1h6o _1e0c1txw", isSticky && "_kqsw1if8 _154iu2gc"])
-  }, /*#__PURE__*/React.createElement(VisibilityContainer, {
+  }, willRenderPersistent && /*#__PURE__*/React.createElement(VisibilityContainer, {
+    api: api,
+    controlSide: getBlockControlsSurfaceControlSide(surfaceContext.get(BLOCK_CONTROL_UI_CONTEXT), isExperimentEnabled('platform_editor_controls_reliable_anchor')),
+    forceVisibleOnMouseOut: forceVisibleOnMouseOut,
+    shouldUseDisplayContents: true
+  }, /*#__PURE__*/React.createElement(SurfaceRenderer, {
+    components: persistentComponents,
+    surface: BLOCK_CONTROLS_LEFT_SURFACE,
+    surfaceContext: surfaceContext
+  })), willRenderHoverOnly && /*#__PURE__*/React.createElement(VisibilityContainer, {
     api: api,
     controlSide: getBlockControlsSurfaceControlSide(surfaceContext.get(BLOCK_CONTROL_UI_CONTEXT), isExperimentEnabled('platform_editor_controls_reliable_anchor')),
     forceVisibleOnMouseOut: forceVisibleOnMouseOut,
     shouldUseDisplayContents: true
-  }, surface)));
+  }, /*#__PURE__*/React.createElement(SurfaceRenderer, {
+    components: hoverOnlyComponents,
+    surface: BLOCK_CONTROLS_LEFT_SURFACE,
+    surfaceContext: surfaceContext
+  }))));
 };

package/dist/es2019/ui/block-controls-right-surface.js

@@ -4,6 +4,7 @@ import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import { BLOCK_CONTROLS_RIGHT_SURFACE } from '@atlaskit/editor-common/block-controls/surface-keys';
 import { SurfaceRenderer, willSurfaceRender } from '@atlaskit/editor-ui-control-model/surface-renderer';
+import { partitionComponentsByPersistence } from './utils/partition-components-by-persistence';
 import { VisibilityContainer } from './visibility-container';
 const rightSurfaceOuterStyles = null;
 const rightSurfaceRowStyles = null;
@@ -25,11 +26,12 @@ export const BlockControlsRightSurface = ({
   if (!placement || !willSurfaceRender(components, BLOCK_CONTROLS_RIGHT_SURFACE, surfaceContext)) {
     return null;
   }
-  const surface = /*#__PURE__*/React.createElement(SurfaceRenderer, {
-    components: components,
-    surface: BLOCK_CONTROLS_RIGHT_SURFACE,
-    surfaceContext: surfaceContext
-  });
+  const {
+    hoverOnlyComponents,
+    persistentComponents
+  } = partitionComponentsByPersistence(components, BLOCK_CONTROLS_RIGHT_SURFACE, surfaceContext);
+  const willRenderPersistent = willSurfaceRender(persistentComponents, BLOCK_CONTROLS_RIGHT_SURFACE, surfaceContext);
+  const willRenderHoverOnly = willSurfaceRender(hoverOnlyComponents, BLOCK_CONTROLS_RIGHT_SURFACE, surfaceContext);
   const isSticky = placement.height !== undefined;
   return /*#__PURE__*/React.createElement("div", {
     "data-editor-block-controls-surface": true,
@@ -40,10 +42,23 @@ export const BlockControlsRightSurface = ({
     className: ax(["_kqswstnw _1pbyb4wl"])
   }, /*#__PURE__*/React.createElement("div", {
     className: ax(["_zulpv77o _4cvr1h6o _1e0c1txw", isSticky && "_kqsw1if8 _154iu2gc"])
-  }, /*#__PURE__*/React.createElement(VisibilityContainer, {
+  }, willRenderPersistent && /*#__PURE__*/React.createElement(VisibilityContainer, {
+    api: api,
+    controlSide: "right",
+    isPersistent: true,
+    shouldUseDisplayContents: true
+  }, /*#__PURE__*/React.createElement(SurfaceRenderer, {
+    components: persistentComponents,
+    surface: BLOCK_CONTROLS_RIGHT_SURFACE,
+    surfaceContext: surfaceContext
+  })), willRenderHoverOnly && /*#__PURE__*/React.createElement(VisibilityContainer, {
     api: api,
     controlSide: "right",
     forceVisibleOnMouseOut: forceVisibleOnMouseOut,
     shouldUseDisplayContents: true
-  }, surface)));
+  }, /*#__PURE__*/React.createElement(SurfaceRenderer, {
+    components: hoverOnlyComponents,
+    surface: BLOCK_CONTROLS_RIGHT_SURFACE,
+    surfaceContext: surfaceContext
+  }))));
 };

package/dist/es2019/ui/consts.js

@@ -13,11 +13,17 @@ export const ACTIVE_QUICK_INSERT_FALLBACK_ANCHOR_NAME = '--editor-block-controls
 export const DRAG_HANDLE_HEIGHT = 24;
 export const DRAG_HANDLE_BORDER_RADIUS = 4;
 export const DRAG_HANDLE_ZINDEX = akRichMediaResizeZIndex + akEditorUnitZIndex; //place above legacy resizer
-export const DRAG_HANDLE_DEFAULT_GAP = 8;
+const LEGACY_DRAG_HANDLE_DEFAULT_GAP = 8;
+const MIGRATED_DRAG_HANDLE_DEFAULT_GAP = 12;
 export const DRAG_HANDLE_NARROW_GAP = 4;
 export const DRAG_HANDLE_MAX_GAP = 12;
 export const DRAG_HANDLE_SYNCED_BLOCK_GAP = 2.5;
 export const DRAG_HANDLE_MAX_WIDTH_PLUS_GAP = DRAG_HANDLE_WIDTH + DRAG_HANDLE_MAX_GAP;
+
+// Non-resizable/default-sized nodes get the same gap as resizable/breakout nodes
+// (DRAG_HANDLE_MAX_GAP) once the registry-backed surfaces are on; kept at the legacy value
+// otherwise to avoid an unrelated visual change for consumers still on the old decoration path.
+const getDragHandleDefaultGap = () => isExperimentEnabled('platform_editor_block_control_migration') ? MIGRATED_DRAG_HANDLE_DEFAULT_GAP : LEGACY_DRAG_HANDLE_DEFAULT_GAP;
 export const DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT = 4 + 2; // 4px for the divider vertical padding and 2px for the divider height
 export const DRAG_HANDLE_H1_TOP_ADJUSTMENT = 5;
 export const DRAG_HANDLE_H2_TOP_ADJUSTMENT = 2;
@@ -68,12 +74,12 @@ export const dragHandleGap = (nodeType, parentNodeType) => {
     }
   }
   if (nodeType === 'layoutSection') {
-    return DRAG_HANDLE_DEFAULT_GAP + 20;
+    return getDragHandleDefaultGap() + 20;
   }
   if (nodeTypeExcludeList.includes(nodeType)) {
     return DRAG_HANDLE_MAX_GAP;
   }
-  return DRAG_HANDLE_DEFAULT_GAP;
+  return getDragHandleDefaultGap();
 };
 
 // use for returning gap only for root level elements
@@ -94,7 +100,7 @@ export const rootElementGap = nodeType => {
   if (nodeType === 'layoutSection') {
     return DRAG_HANDLE_MAX_GAP + 12;
   }
-  return DRAG_HANDLE_DEFAULT_GAP;
+  return getDragHandleDefaultGap();
 };
 export const getNestedNodeLeftPaddingMargin = nodeType => {
   switch (nodeType) {

package/dist/es2019/ui/utils/partition-components-by-persistence.js

@@ -0,0 +1,48 @@
+import { BLOCK_CONTROL_UI_CONTEXT } from '@atlaskit/editor-common/block-controls/block-control-ui-context';
+import { getComponentIdentity, resolveSurface, willComponentRender } from '@atlaskit/editor-ui-control-model/surface-renderer';
+import { createSurfaceContext } from '@atlaskit/editor-ui-control-model/create-surface-context';
+/**
+ * Split registered components into two groups:
+ * those that should be rendered persistently and those that should only be rendered on hover.
+ */
+export const partitionComponentsByPersistence = (components, surface, surfaceContext) => {
+  const {
+    childrenMap,
+    root,
+    topLevelChildren
+  } = resolveSurface(components, surface);
+  if (!root || !topLevelChildren || topLevelChildren.length === 0) {
+    return {
+      hoverOnlyComponents: [],
+      persistentComponents: components
+    };
+  }
+  const context = surfaceContext === null || surfaceContext === void 0 ? void 0 : surfaceContext.get(BLOCK_CONTROL_UI_CONTEXT);
+  const storedSurfaceContext = context ? createSurfaceContext(BLOCK_CONTROL_UI_CONTEXT, {
+    activeNode: undefined,
+    rootNode: context.targetNode,
+    targetNode: context.targetNode
+  }) : undefined;
+  const isLeaf = component => {
+    const children = childrenMap.get(getComponentIdentity(component));
+    return !children || children.length === 0;
+  };
+  const persistentComponents = [];
+  const hoverOnlyComponents = [];
+  for (const component of components) {
+    if (!isLeaf(component)) {
+      persistentComponents.push(component);
+      hoverOnlyComponents.push(component);
+      continue;
+    }
+    if (willComponentRender(component, childrenMap, storedSurfaceContext)) {
+      persistentComponents.push(component);
+    } else {
+      hoverOnlyComponents.push(component);
+    }
+  }
+  return {
+    hoverOnlyComponents,
+    persistentComponents
+  };
+};

package/dist/es2019/ui/visibility-container.js

@@ -51,6 +51,7 @@ export const VisibilityContainer = ({
   children,
   controlSide,
   forceVisibleOnMouseOut,
+  isPersistent,
   shouldUseDisplayContents
 }) => {
   const {
@@ -90,9 +91,12 @@ export const VisibilityContainer = ({
   // When forceVisibleOnMouseOut is true (e.g. drag handle focused via keyboard Shift+Ctrl+H),
   // override the mouse-out condition so the control stays visible regardless of mouse position.
   const shouldHideWhenMouseOut = forceVisibleOnMouseOut ? false : hideOnMouseOut;
-  const shouldHideImmediate = isTypeAheadOpen || isEditing || shouldHideWhenMouseOut || userIntent === 'aiStreaming' ||
+  // Persistent controls (e.g. an AI suggestion icon on every qualifying node) aren't hover-driven,
+  // so none of the hover/typing/mouse-out/diff-review reasons below apply to them — they're never
+  // hidden by this container.
+  const shouldHideImmediate = !isPersistent && (isTypeAheadOpen || isEditing || shouldHideWhenMouseOut || userIntent === 'aiStreaming' ||
   // EDITOR-7926: hide the drag handle while a diff is on screen or a suggestion card is open.
-  (isDisplayingDiff || userIntent === 'reviewing') && expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) || sideHidden;
+  (isDisplayingDiff || userIntent === 'reviewing') && expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) || sideHidden);
 
   // Delay hiding the right control in view mode to reduce flickering when moving from block
   // toward the right-edge button (avoids rapid show/hide as mouse crosses boundaries).

package/dist/esm/blockControlsPlugin.js

@@ -39,7 +39,6 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
   var rightSideControlsEnabled = (_config$rightSideCont = config === null || config === void 0 ? void 0 : config.rightSideControlsEnabled) !== null && _config$rightSideCont !== void 0 ? _config$rightSideCont : false;
   var quickInsertButtonEnabled = (_config$quickInsertBu = config === null || config === void 0 ? void 0 : config.quickInsertButtonEnabled) !== null && _config$quickInsertBu !== void 0 ? _config$quickInsertBu : true;
   var registryBlockControlsEnabled = isExperimentEnabled('platform_editor_block_control_migration');
-  var surfaceNodePositionsEnabled = registryBlockControlsEnabled && isExperimentEnabled('platform_editor_collapsible_headings');
   var legacyBlockControlsEnabled = !registryBlockControlsEnabled;
   var rightSurfaceEnabled = registryBlockControlsEnabled && isExperimentEnabled('platform_editor_block_control_right_surface');
   if (registryBlockControlsEnabled) {
@@ -139,7 +138,7 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
         plugin: function plugin(_ref2) {
           var getIntl = _ref2.getIntl,
             nodeViewPortalProviderAPI = _ref2.nodeViewPortalProviderAPI;
-          return createPlugin(api, getIntl, nodeViewPortalProviderAPI, nodeDecorationRegistry, rightSideControlsEnabled, quickInsertButtonEnabled && legacyBlockControlsEnabled, legacyBlockControlsEnabled, surfaceNodePositionsEnabled, rightSurfaceEnabled);
+          return createPlugin(api, getIntl, nodeViewPortalProviderAPI, nodeDecorationRegistry, rightSideControlsEnabled, quickInsertButtonEnabled && legacyBlockControlsEnabled, legacyBlockControlsEnabled, rightSurfaceEnabled);
         }
       }];
       if (editorExperiment('platform_editor_controls', 'variant1')) {
@@ -441,7 +440,7 @@ export var blockControlsPlugin = function blockControlsPlugin(_ref) {
         isEditing: (_interactionTrackingP = interactionTrackingPluginKey.getState(editorState)) === null || _interactionTrackingP === void 0 ? void 0 : _interactionTrackingP.isEditing,
         isSelectedViaDragHandle: (_key$getState$isSelec = (_key$getState10 = key.getState(editorState)) === null || _key$getState10 === void 0 ? void 0 : _key$getState10.isSelectedViaDragHandle) !== null && _key$getState$isSelec !== void 0 ? _key$getState$isSelec : false
       };
-      if (surfaceNodePositionsEnabled) {
+      if (registryBlockControlsEnabled) {
         var _key$getState$surface, _key$getState11;
         sharedState.surfaceNodePositions = (_key$getState$surface = (_key$getState11 = key.getState(editorState)) === null || _key$getState11 === void 0 ? void 0 : _key$getState11.surfaceNodePositions) !== null && _key$getState$surface !== void 0 ? _key$getState$surface : [];
       }

package/dist/esm/pm-plugins/decorations-common.js

@@ -2,7 +2,7 @@ import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
-import uuid from 'uuid';
+import { v4 as uuid } from 'uuid';
 import { getBaseNodeTypeName } from '@atlaskit/editor-common/utils/node-type-utils';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { unmountFromMountPoint } from './react-root-registry';

package/dist/esm/pm-plugins/decorations-drag-handle.js

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { createElement } from 'react';
 // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
-import uuid from 'uuid';
+import { v4 as uuid } from 'uuid';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';

package/dist/esm/pm-plugins/decorations-drop-target.js

@@ -5,7 +5,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { createElement } from 'react';
 import memoizeOne from 'memoize-one';
 // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
-import uuid from 'uuid';
+import { v4 as uuid } from 'uuid';
 import { expandSelectionBounds } from '@atlaskit/editor-common/selection';
 import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
 import { getBaseNodeTypeName } from '@atlaskit/editor-common/utils/node-type-utils';

package/dist/esm/pm-plugins/decorations-quick-insert-button.js

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { createElement } from 'react';
 // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
-import uuid from 'uuid';
+import { v4 as uuid } from 'uuid';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';

package/dist/esm/pm-plugins/main.js

@@ -884,14 +884,16 @@ export var createPlugin = function createPlugin(api, getIntl, nodeViewPortalProv
   var rightSideControlsEnabled = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
   var quickInsertButtonEnabled = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : true;
   var legacyDragHandleEnabled = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : true;
-  var surfaceNodePositionsEnabled = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : false;
-  var rightSurfaceEnabled = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : false;
+  var rightSurfaceEnabled = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : false;
   var _getIntl = getIntl(),
     formatMessage = _getIntl.formatMessage;
   var isAdvancedLayoutEnabled = editorExperiment('advanced_layouts', true, {
     exposure: true
   });
   var toolbarFlagsEnabled = areToolbarFlagsEnabled(Boolean(api === null || api === void 0 ? void 0 : api.toolbar));
+  // Mirrors `registryBlockControlsEnabled` in blockControlsPlugin.tsx: `legacyDragHandleEnabled` is
+  // only false once that gate is on.
+  var surfaceNodePositionsEnabled = !legacyDragHandleEnabled;
   var flags = {
     legacyDragHandleEnabled: legacyDragHandleEnabled,
     surfaceNodePositionsEnabled: surfaceNodePositionsEnabled,

package/dist/esm/ui/block-controls-left-surface.js

@@ -7,6 +7,7 @@ import { BLOCK_CONTROLS_LEFT_SURFACE } from '@atlaskit/editor-common/block-contr
 import { SurfaceRenderer, willSurfaceRender } from '@atlaskit/editor-ui-control-model/surface-renderer';
 import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
 import { getBlockControlsSurfaceControlSide } from './block-controls-surface-context';
+import { partitionComponentsByPersistence } from './utils/partition-components-by-persistence';
 import { VisibilityContainer } from './visibility-container';
 var leftSurfaceOuterStyles = null;
 var leftSurfaceRowStyles = null;
@@ -27,11 +28,11 @@ export var BlockControlsLeftSurface = function BlockControlsLeftSurface(_ref) {
   if (!placement || !willSurfaceRender(components, BLOCK_CONTROLS_LEFT_SURFACE, surfaceContext)) {
     return null;
   }
-  var surface = /*#__PURE__*/React.createElement(SurfaceRenderer, {
-    components: components,
-    surface: BLOCK_CONTROLS_LEFT_SURFACE,
-    surfaceContext: surfaceContext
-  });
+  var _partitionComponentsB = partitionComponentsByPersistence(components, BLOCK_CONTROLS_LEFT_SURFACE, surfaceContext),
+    hoverOnlyComponents = _partitionComponentsB.hoverOnlyComponents,
+    persistentComponents = _partitionComponentsB.persistentComponents;
+  var willRenderPersistent = willSurfaceRender(persistentComponents, BLOCK_CONTROLS_LEFT_SURFACE, surfaceContext);
+  var willRenderHoverOnly = willSurfaceRender(hoverOnlyComponents, BLOCK_CONTROLS_LEFT_SURFACE, surfaceContext);
   var isSticky = placement.height !== undefined;
   return /*#__PURE__*/React.createElement("div", {
     "data-editor-block-controls-surface": true,
@@ -42,10 +43,23 @@ export var BlockControlsLeftSurface = function BlockControlsLeftSurface(_ref) {
     className: ax(["_kqswstnw _1pbyb4wl"])
   }, /*#__PURE__*/React.createElement("div", {
     className: ax(["_zulpv77o _4cvr1h6o _1e0c1txw", isSticky && "_kqsw1if8 _154iu2gc"])
-  }, /*#__PURE__*/React.createElement(VisibilityContainer, {
+  }, willRenderPersistent && /*#__PURE__*/React.createElement(VisibilityContainer, {
+    api: api,
+    controlSide: getBlockControlsSurfaceControlSide(surfaceContext.get(BLOCK_CONTROL_UI_CONTEXT), isExperimentEnabled('platform_editor_controls_reliable_anchor')),
+    forceVisibleOnMouseOut: forceVisibleOnMouseOut,
+    shouldUseDisplayContents: true
+  }, /*#__PURE__*/React.createElement(SurfaceRenderer, {
+    components: persistentComponents,
+    surface: BLOCK_CONTROLS_LEFT_SURFACE,
+    surfaceContext: surfaceContext
+  })), willRenderHoverOnly && /*#__PURE__*/React.createElement(VisibilityContainer, {
     api: api,
     controlSide: getBlockControlsSurfaceControlSide(surfaceContext.get(BLOCK_CONTROL_UI_CONTEXT), isExperimentEnabled('platform_editor_controls_reliable_anchor')),
     forceVisibleOnMouseOut: forceVisibleOnMouseOut,
     shouldUseDisplayContents: true
-  }, surface)));
+  }, /*#__PURE__*/React.createElement(SurfaceRenderer, {
+    components: hoverOnlyComponents,
+    surface: BLOCK_CONTROLS_LEFT_SURFACE,
+    surfaceContext: surfaceContext
+  }))));
 };

package/dist/esm/ui/block-controls-right-surface.js

@@ -4,6 +4,7 @@ import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import { BLOCK_CONTROLS_RIGHT_SURFACE } from '@atlaskit/editor-common/block-controls/surface-keys';
 import { SurfaceRenderer, willSurfaceRender } from '@atlaskit/editor-ui-control-model/surface-renderer';
+import { partitionComponentsByPersistence } from './utils/partition-components-by-persistence';
 import { VisibilityContainer } from './visibility-container';
 var rightSurfaceOuterStyles = null;
 var rightSurfaceRowStyles = null;
@@ -24,11 +25,11 @@ export var BlockControlsRightSurface = function BlockControlsRightSurface(_ref)
   if (!placement || !willSurfaceRender(components, BLOCK_CONTROLS_RIGHT_SURFACE, surfaceContext)) {
     return null;
   }
-  var surface = /*#__PURE__*/React.createElement(SurfaceRenderer, {
-    components: components,
-    surface: BLOCK_CONTROLS_RIGHT_SURFACE,
-    surfaceContext: surfaceContext
-  });
+  var _partitionComponentsB = partitionComponentsByPersistence(components, BLOCK_CONTROLS_RIGHT_SURFACE, surfaceContext),
+    hoverOnlyComponents = _partitionComponentsB.hoverOnlyComponents,
+    persistentComponents = _partitionComponentsB.persistentComponents;
+  var willRenderPersistent = willSurfaceRender(persistentComponents, BLOCK_CONTROLS_RIGHT_SURFACE, surfaceContext);
+  var willRenderHoverOnly = willSurfaceRender(hoverOnlyComponents, BLOCK_CONTROLS_RIGHT_SURFACE, surfaceContext);
   var isSticky = placement.height !== undefined;
   return /*#__PURE__*/React.createElement("div", {
     "data-editor-block-controls-surface": true,
@@ -39,10 +40,23 @@ export var BlockControlsRightSurface = function BlockControlsRightSurface(_ref)
     className: ax(["_kqswstnw _1pbyb4wl"])
   }, /*#__PURE__*/React.createElement("div", {
     className: ax(["_zulpv77o _4cvr1h6o _1e0c1txw", isSticky && "_kqsw1if8 _154iu2gc"])
-  }, /*#__PURE__*/React.createElement(VisibilityContainer, {
+  }, willRenderPersistent && /*#__PURE__*/React.createElement(VisibilityContainer, {
+    api: api,
+    controlSide: "right",
+    isPersistent: true,
+    shouldUseDisplayContents: true
+  }, /*#__PURE__*/React.createElement(SurfaceRenderer, {
+    components: persistentComponents,
+    surface: BLOCK_CONTROLS_RIGHT_SURFACE,
+    surfaceContext: surfaceContext
+  })), willRenderHoverOnly && /*#__PURE__*/React.createElement(VisibilityContainer, {
     api: api,
     controlSide: "right",
     forceVisibleOnMouseOut: forceVisibleOnMouseOut,
     shouldUseDisplayContents: true
-  }, surface)));
+  }, /*#__PURE__*/React.createElement(SurfaceRenderer, {
+    components: hoverOnlyComponents,
+    surface: BLOCK_CONTROLS_RIGHT_SURFACE,
+    surfaceContext: surfaceContext
+  }))));
 };

package/dist/esm/ui/consts.js

@@ -16,11 +16,19 @@ export var ACTIVE_QUICK_INSERT_FALLBACK_ANCHOR_NAME = '--editor-block-controls-a
 export var DRAG_HANDLE_HEIGHT = 24;
 export var DRAG_HANDLE_BORDER_RADIUS = 4;
 export var DRAG_HANDLE_ZINDEX = akRichMediaResizeZIndex + akEditorUnitZIndex; //place above legacy resizer
-export var DRAG_HANDLE_DEFAULT_GAP = 8;
+var LEGACY_DRAG_HANDLE_DEFAULT_GAP = 8;
+var MIGRATED_DRAG_HANDLE_DEFAULT_GAP = 12;
 export var DRAG_HANDLE_NARROW_GAP = 4;
 export var DRAG_HANDLE_MAX_GAP = 12;
 export var DRAG_HANDLE_SYNCED_BLOCK_GAP = 2.5;
 export var DRAG_HANDLE_MAX_WIDTH_PLUS_GAP = DRAG_HANDLE_WIDTH + DRAG_HANDLE_MAX_GAP;
+
+// Non-resizable/default-sized nodes get the same gap as resizable/breakout nodes
+// (DRAG_HANDLE_MAX_GAP) once the registry-backed surfaces are on; kept at the legacy value
+// otherwise to avoid an unrelated visual change for consumers still on the old decoration path.
+var getDragHandleDefaultGap = function getDragHandleDefaultGap() {
+  return isExperimentEnabled('platform_editor_block_control_migration') ? MIGRATED_DRAG_HANDLE_DEFAULT_GAP : LEGACY_DRAG_HANDLE_DEFAULT_GAP;
+};
 export var DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT = 4 + 2; // 4px for the divider vertical padding and 2px for the divider height
 export var DRAG_HANDLE_H1_TOP_ADJUSTMENT = 5;
 export var DRAG_HANDLE_H2_TOP_ADJUSTMENT = 2;
@@ -71,12 +79,12 @@ export var dragHandleGap = function dragHandleGap(nodeType, parentNodeType) {
     }
   }
   if (nodeType === 'layoutSection') {
-    return DRAG_HANDLE_DEFAULT_GAP + 20;
+    return getDragHandleDefaultGap() + 20;
   }
   if (nodeTypeExcludeList.includes(nodeType)) {
     return DRAG_HANDLE_MAX_GAP;
   }
-  return DRAG_HANDLE_DEFAULT_GAP;
+  return getDragHandleDefaultGap();
 };
 
 // use for returning gap only for root level elements
@@ -97,7 +105,7 @@ export var rootElementGap = function rootElementGap(nodeType) {
   if (nodeType === 'layoutSection') {
     return DRAG_HANDLE_MAX_GAP + 12;
   }
-  return DRAG_HANDLE_DEFAULT_GAP;
+  return getDragHandleDefaultGap();
 };
 export var getNestedNodeLeftPaddingMargin = function getNestedNodeLeftPaddingMargin(nodeType) {
   switch (nodeType) {

package/dist/esm/ui/utils/partition-components-by-persistence.js

@@ -0,0 +1,59 @@
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+import { BLOCK_CONTROL_UI_CONTEXT } from '@atlaskit/editor-common/block-controls/block-control-ui-context';
+import { getComponentIdentity, resolveSurface, willComponentRender } from '@atlaskit/editor-ui-control-model/surface-renderer';
+import { createSurfaceContext } from '@atlaskit/editor-ui-control-model/create-surface-context';
+/**
+ * Split registered components into two groups:
+ * those that should be rendered persistently and those that should only be rendered on hover.
+ */
+export var partitionComponentsByPersistence = function partitionComponentsByPersistence(components, surface, surfaceContext) {
+  var _resolveSurface = resolveSurface(components, surface),
+    childrenMap = _resolveSurface.childrenMap,
+    root = _resolveSurface.root,
+    topLevelChildren = _resolveSurface.topLevelChildren;
+  if (!root || !topLevelChildren || topLevelChildren.length === 0) {
+    return {
+      hoverOnlyComponents: [],
+      persistentComponents: components
+    };
+  }
+  var context = surfaceContext === null || surfaceContext === void 0 ? void 0 : surfaceContext.get(BLOCK_CONTROL_UI_CONTEXT);
+  var storedSurfaceContext = context ? createSurfaceContext(BLOCK_CONTROL_UI_CONTEXT, {
+    activeNode: undefined,
+    rootNode: context.targetNode,
+    targetNode: context.targetNode
+  }) : undefined;
+  var isLeaf = function isLeaf(component) {
+    var children = childrenMap.get(getComponentIdentity(component));
+    return !children || children.length === 0;
+  };
+  var persistentComponents = [];
+  var hoverOnlyComponents = [];
+  var _iterator = _createForOfIteratorHelper(components),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var component = _step.value;
+      if (!isLeaf(component)) {
+        persistentComponents.push(component);
+        hoverOnlyComponents.push(component);
+        continue;
+      }
+      if (willComponentRender(component, childrenMap, storedSurfaceContext)) {
+        persistentComponents.push(component);
+      } else {
+        hoverOnlyComponents.push(component);
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return {
+    hoverOnlyComponents: hoverOnlyComponents,
+    persistentComponents: persistentComponents
+  };
+};

package/dist/esm/ui/visibility-container.js

@@ -51,6 +51,7 @@ export var VisibilityContainer = function VisibilityContainer(_ref) {
     children = _ref.children,
     controlSide = _ref.controlSide,
     forceVisibleOnMouseOut = _ref.forceVisibleOnMouseOut,
+    isPersistent = _ref.isPersistent,
     shouldUseDisplayContents = _ref.shouldUseDisplayContents;
   var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['typeAhead', 'blockControls', 'editorViewMode', 'userIntent', 'showDiff'], function (states) {
       var _states$typeAheadStat, _states$blockControls, _states$blockControls2, _states$blockControls3, _states$editorViewMod, _states$userIntentSta, _states$showDiffState, _states$blockControls4;
@@ -88,9 +89,12 @@ export var VisibilityContainer = function VisibilityContainer(_ref) {
   // When forceVisibleOnMouseOut is true (e.g. drag handle focused via keyboard Shift+Ctrl+H),
   // override the mouse-out condition so the control stays visible regardless of mouse position.
   var shouldHideWhenMouseOut = forceVisibleOnMouseOut ? false : hideOnMouseOut;
-  var shouldHideImmediate = isTypeAheadOpen || isEditing || shouldHideWhenMouseOut || userIntent === 'aiStreaming' ||
+  // Persistent controls (e.g. an AI suggestion icon on every qualifying node) aren't hover-driven,
+  // so none of the hover/typing/mouse-out/diff-review reasons below apply to them — they're never
+  // hidden by this container.
+  var shouldHideImmediate = !isPersistent && (isTypeAheadOpen || isEditing || shouldHideWhenMouseOut || userIntent === 'aiStreaming' ||
   // EDITOR-7926: hide the drag handle while a diff is on screen or a suggestion card is open.
-  (isDisplayingDiff || userIntent === 'reviewing') && expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) || sideHidden;
+  (isDisplayingDiff || userIntent === 'reviewing') && expValEquals('platform_editor_diff_plugin_extended', 'isEnabled', true) || sideHidden);
 
   // Delay hiding the right control in view mode to reduce flickering when moving from block
   // toward the right-edge button (avoids rapid show/hide as mouse crosses boundaries).

package/dist/types/pm-plugins/main.d.ts

@@ -44,7 +44,7 @@ export declare const apply: (api: ExtractInjectionAPI<BlockControlsPlugin> | und
     multiSelectDnD: MultiSelectDnD | undefined;
     surfaceNodePositions: number[];
 };
-export declare const createPlugin: (api: ExtractInjectionAPI<BlockControlsPlugin> | undefined, getIntl: () => IntlShape, nodeViewPortalProviderAPI: PortalProviderAPI, nodeDecorationRegistry: NodeDecorationFactory[], rightSideControlsEnabled?: boolean, quickInsertButtonEnabled?: boolean, legacyDragHandleEnabled?: boolean, surfaceNodePositionsEnabled?: boolean, rightSurfaceEnabled?: boolean) => SafePlugin<PluginState | {
+export declare const createPlugin: (api: ExtractInjectionAPI<BlockControlsPlugin> | undefined, getIntl: () => IntlShape, nodeViewPortalProviderAPI: PortalProviderAPI, nodeDecorationRegistry: NodeDecorationFactory[], rightSideControlsEnabled?: boolean, quickInsertButtonEnabled?: boolean, legacyDragHandleEnabled?: boolean, rightSurfaceEnabled?: boolean) => SafePlugin<PluginState | {
     activeDropTargetNode: ActiveDropTargetNode | undefined;
     activeNode: any;
     blockMenuOptions: {

package/dist/types/ui/consts.d.ts

@@ -6,7 +6,6 @@ export declare const ACTIVE_QUICK_INSERT_FALLBACK_ANCHOR_NAME = "--editor-block-
 export declare const DRAG_HANDLE_HEIGHT = 24;
 export declare const DRAG_HANDLE_BORDER_RADIUS = 4;
 export declare const DRAG_HANDLE_ZINDEX: number;
-export declare const DRAG_HANDLE_DEFAULT_GAP = 8;
 export declare const DRAG_HANDLE_NARROW_GAP = 4;
 export declare const DRAG_HANDLE_MAX_GAP = 12;
 export declare const DRAG_HANDLE_SYNCED_BLOCK_GAP = 2.5;

package/dist/types/ui/utils/partition-components-by-persistence.d.ts

@@ -0,0 +1,15 @@
+import type { RegisterComponent, SurfaceContext } from '@atlaskit/editor-ui-control-model/types';
+type SurfaceIdentifier = {
+    key: string;
+    type: 'toolbar' | 'menu';
+};
+type PartitionedComponents = {
+    hoverOnlyComponents: RegisterComponent[];
+    persistentComponents: RegisterComponent[];
+};
+/**
+ * Split registered components into two groups:
+ * those that should be rendered persistently and those that should only be rendered on hover.
+ */
+export declare const partitionComponentsByPersistence: (components: RegisterComponent[], surface: SurfaceIdentifier, surfaceContext: SurfaceContext | undefined) => PartitionedComponents;
+export {};

package/dist/types/ui/visibility-container.d.ts

@@ -11,10 +11,11 @@ interface VisibilityContainerProps {
     children: React.ReactNode;
     controlSide?: 'left' | 'right';
     forceVisibleOnMouseOut?: boolean;
+    isPersistent?: boolean;
     /**
      * Set when the container should not create its own layout box while its descendants retain theirs.
      */
     shouldUseDisplayContents?: boolean;
 }
-export declare const VisibilityContainer: ({ api, children, controlSide, forceVisibleOnMouseOut, shouldUseDisplayContents, }: VisibilityContainerProps) => jsx.JSX.Element;
+export declare const VisibilityContainer: ({ api, children, controlSide, forceVisibleOnMouseOut, isPersistent, shouldUseDisplayContents, }: VisibilityContainerProps) => jsx.JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "17.3.9",
+	"version": "17.3.11",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -34,7 +34,7 @@
 		"@atlaskit/editor-plugin-metrics": "^17.0.0",
 		"@atlaskit/editor-plugin-quick-insert": "^16.2.0",
 		"@atlaskit/editor-plugin-selection": "^16.1.0",
-		"@atlaskit/editor-plugin-show-diff": "^14.3.0",
+		"@atlaskit/editor-plugin-show-diff": "^14.4.0",
 		"@atlaskit/editor-plugin-toolbar": "^13.0.0",
 		"@atlaskit/editor-plugin-type-ahead": "^17.1.0",
 		"@atlaskit/editor-plugin-ui-control-registry": "^10.0.0",
@@ -45,7 +45,7 @@
 		"@atlaskit/editor-tables": "^3.1.0",
 		"@atlaskit/editor-ui-control-model": "^2.9.0",
 		"@atlaskit/icon": "^37.6.0",
-		"@atlaskit/icon-lab": "^7.7.0",
+		"@atlaskit/icon-lab": "^7.8.0",
 		"@atlaskit/link": "^5.1.0",
 		"@atlaskit/platform-feature-experiments": "^0.3.0",
 		"@atlaskit/platform-feature-flags": "^2.2.0",
@@ -64,10 +64,10 @@
 		"bind-event-listener": "^3.0.0",
 		"memoize-one": "^6.0.0",
 		"raf-schd": "^4.0.3",
-		"uuid": "^3.1.0"
+		"uuid": "^11.1.1"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^120.12.0",
+		"@atlaskit/editor-common": "^120.13.0",
 		"react": "^18.2.0 || ^19.2.0",
 		"react-dom": "^18.2.0 || ^19.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"