@atlaskit/editor-plugin-show-diff 30.0.10 → 30.0.12

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/editor-plugin-show-diff
 
+## 30.0.12
+
+### Patch Changes
+
+- [`ba8362b562ea6`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ba8362b562ea6) -
+  EDITOR-10060 Renders the human avatar in a connected agent+human contributor tag 4px smaller
+  (12px) and overlapping the agent icon, instead of sitting flush beside it.
+- Updated dependencies
+
+## 30.0.11
+
+### Patch Changes
+
+- [`4ad02bd627f7f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4ad02bd627f7f) -
+  Respect explicit brand active colours and otherwise use the existing gray active diff treatment.
+  Preserve Rovo purple active colours and Claude specified light and dark colours. Route contributor
+  attribution through shared brand schemes under platform_editor_attributed_version_history,
+  platform_editor_show_diff_color_scheme_refactor, platform_editor_agent_mentions and
+  platform_editor_agent_telepointer_redesign.
+- Updated dependencies
+
 ## 30.0.10
 
 ### Patch Changes

package/dist/cjs/pm-plugins/decorations/colorSchemes/attributions.js

@@ -28,8 +28,8 @@ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length)
 var HASHED_PARTICIPANT_COLOR_SCHEMES = [].concat((0, _toConsumableArray2.default)(_types.PARTICIPANT_COLOR_SCHEMES), ['blue', 'red', 'orange', 'yellow', 'green', 'teal', 'purple', 'magenta']);
 
 /**
- * Red means "deleted" in both public schemes, so it never identifies an actor. Reserving it here
- * covers every path into an attribution colour; `createAttributionColorMap` is the only caller, and
+ * ADS red means "deleted" in both public schemes, so it is excluded from hashed participant colours.
+ * Brand schemes retain their own palettes. `createAttributionColorMap` is the only caller, and
  * it is gated on `platform_editor_attributed_version_history` plus
  * `platform_editor_show_diff_color_scheme_refactor`.
  */
@@ -142,23 +142,25 @@ var isContributorTagsEnabled = exports.isContributorTagsEnabled = function isCon
   })) && contributors !== undefined && Object.keys(contributors).length > 0;
 };
 var getAttributionParticipantColor = function getAttributionParticipantColor(attribution, identity, contributors) {
-  var _ref2, _getThirdPartyAgentCo, _attribution$agentId2;
+  var _ref2, _attribution$agentId2;
   var contributor = contributors === null || contributors === void 0 ? void 0 : contributors[identity.key];
   var brand = isDiffAgentBrand(contributor === null || contributor === void 0 ? void 0 : contributor.agentKind) ? contributor === null || contributor === void 0 ? void 0 : contributor.agentKind : undefined;
-  var agentName = (_ref2 = brand !== null && brand !== void 0 ? brand : (_getThirdPartyAgentCo = (0, _getThirdPartyAgentColor.getThirdPartyAgentColor)({
-    agentNamedId: attribution === null || attribution === void 0 ? void 0 : attribution.agentNamedId,
-    agentName: contributor === null || contributor === void 0 ? void 0 : contributor.name
-  })) === null || _getThirdPartyAgentCo === void 0 ? void 0 : _getThirdPartyAgentCo.name) !== null && _ref2 !== void 0 ? _ref2 : attribution !== null && attribution !== void 0 && (_attribution$agentId2 = attribution.agentId) !== null && _attribution$agentId2 !== void 0 && _attribution$agentId2.trim() ? (contributor === null || contributor === void 0 ? void 0 : contributor.name) || 'Agent' : undefined;
-  return (0, _utils.getParticipantColor)(identity.colorSeed, agentName,
+  var brandColor = (0, _getThirdPartyAgentColor.getThirdPartyAgentColor)({
+    agentNamedId: brand ? undefined : attribution === null || attribution === void 0 ? void 0 : attribution.agentNamedId,
+    agentName: brand !== null && brand !== void 0 ? brand : contributor === null || contributor === void 0 ? void 0 : contributor.name
+  });
+  var agentName = (_ref2 = brand !== null && brand !== void 0 ? brand : brandColor === null || brandColor === void 0 ? void 0 : brandColor.name) !== null && _ref2 !== void 0 ? _ref2 : attribution !== null && attribution !== void 0 && (_attribution$agentId2 = attribution.agentId) !== null && _attribution$agentId2 !== void 0 && _attribution$agentId2.trim() ? (contributor === null || contributor === void 0 ? void 0 : contributor.name) || 'Agent' : undefined;
+  return _objectSpread(_objectSpread({}, (0, _utils.getParticipantColor)(identity.colorSeed, agentName,
   // Keep an explicitly resolved brand consistent with the contributor's icon.
-  brand ? undefined : attribution === null || attribution === void 0 ? void 0 : attribution.agentNamedId);
+  brand ? undefined : attribution === null || attribution === void 0 ? void 0 : attribution.agentNamedId)), {}, {
+    scheme: brandColor === null || brandColor === void 0 ? void 0 : brandColor.scheme
+  });
 };
 var createAttributionColorMap = exports.createAttributionColorMap = function createAttributionColorMap(stepAttributions, contributors) {
   var colors = new Map();
   var allocatedColors = new Set();
 
-  // Reserve shared brand colours before hashing other actors, regardless of step order. A brand
-  // slot is pinned deliberately, so it is taken verbatim rather than through `getSlotColor`.
+  // Keep brand schemes intact; only unbranded contributors use the hashed ADS palette below.
   var _iterator2 = _createForOfIteratorHelper(stepAttributions),
     _step2;
   try {
@@ -170,10 +172,14 @@ var createAttributionColorMap = exports.createAttributionColorMap = function cre
       }
       var _getAttributionPartic = getAttributionParticipantColor(attribution, identity, contributors),
         index = _getAttributionPartic.index,
-        isFixed = _getAttributionPartic.isFixed;
+        isFixed = _getAttributionPartic.isFixed,
+        scheme = _getAttributionPartic.scheme;
+      if (scheme) {
+        colors.set(identity.key, scheme);
+      }
+      // Keep the old slot reserved so selecting a brand cannot recolour other contributors.
       var color = HASHED_PARTICIPANT_COLOR_SCHEMES[index];
       if (isFixed && color) {
-        colors.set(identity.key, color);
         allocatedColors.add(color);
       }
     }

package/dist/cjs/pm-plugins/decorations/colorSchemes/factory.js

@@ -221,8 +221,8 @@ function bgBolder(color) {
   return (_getBrand$bold = (_getBrand4 = getBrand(color)) === null || _getBrand4 === void 0 ? void 0 : _getBrand4.bold) !== null && _getBrand$bold !== void 0 ? _getBrand$bold : bgBolderMap[color];
 }
 function bgSubtlerPressed(color) {
-  var _getBrand$background3, _getBrand5;
-  return (_getBrand$background3 = (_getBrand5 = getBrand(color)) === null || _getBrand5 === void 0 ? void 0 : _getBrand5.background) !== null && _getBrand$background3 !== void 0 ? _getBrand$background3 : bgSubtlerPressedMap[color];
+  var _ref, _getBrand$emphasisBac, _getBrand5;
+  return (_ref = (_getBrand$emphasisBac = (_getBrand5 = getBrand(color)) === null || _getBrand5 === void 0 ? void 0 : _getBrand5.emphasisBackground) !== null && _getBrand$emphasisBac !== void 0 ? _getBrand$emphasisBac : bgSubtlerPressedMap[color]) !== null && _ref !== void 0 ? _ref : bgSubtlerPressedMap.gray;
 }
 function borderAccent(color) {
   var _getBrand$border2, _getBrand6;
@@ -233,8 +233,8 @@ function textAccent(color) {
   return (_getBrand$accentText = (_getBrand7 = getBrand(color)) === null || _getBrand7 === void 0 ? void 0 : _getBrand7.accentText) !== null && _getBrand$accentText !== void 0 ? _getBrand$accentText : textAccentMap[color];
 }
 function deletedBackground(color) {
-  var _getBrand$emphasisBac, _getBrand8;
-  return (_getBrand$emphasisBac = (_getBrand8 = getBrand(color)) === null || _getBrand8 === void 0 ? void 0 : _getBrand8.emphasisBackground) !== null && _getBrand$emphasisBac !== void 0 ? _getBrand$emphasisBac : bgSubtlest(color);
+  var _getBrand$emphasisBac2, _getBrand8;
+  return (_getBrand$emphasisBac2 = (_getBrand8 = getBrand(color)) === null || _getBrand8 === void 0 ? void 0 : _getBrand8.emphasisBackground) !== null && _getBrand$emphasisBac2 !== void 0 ? _getBrand$emphasisBac2 : bgSubtlest(color);
 }
 
 /** Contributor tags use a bold fill with a contrasting foreground, including branded schemes. */
@@ -316,13 +316,14 @@ function buildInsertStyleInBlockExtended(colors) {
 
 /** Active state of the extended insert style. */
 function buildInsertStyleExtendedActive(colors) {
+  var _ref2, _brand$activeBorder;
   var brand = getBrand(colors.insertColor);
   return (0, _cssHelper.convertToInlineCss)(_objectSpread(_objectSpread({
     background: bgSubtlerPressed(colors.insertActiveColor)
   }, brand ? {
     color: brand.text
   } : {}), {}, {
-    borderBottom: "2px solid ".concat(borderAccent(colors.insertColor)),
+    borderBottom: "2px solid ".concat((_ref2 = (_brand$activeBorder = brand === null || brand === void 0 ? void 0 : brand.activeBorder) !== null && _brand$activeBorder !== void 0 ? _brand$activeBorder : borderAccentMap[colors.insertColor]) !== null && _ref2 !== void 0 ? _ref2 : borderAccentMap.gray),
     padding: "1px 0 2px"
   }));
 }
@@ -1117,9 +1118,9 @@ function buildDeletedQuoteNodeWithLozengeStyle(colors, isActive) {
  * codeBlock). Every scheme shares the active state; `deletedNodeEmphasis` changes only the
  * resting one — 'stateful' a 4px subtlest ring, 'static' a 1px accent ring.
  */
-function buildDeletedWrappedBlockOutline(colors, _ref) {
-  var isActive = _ref.isActive,
-    isRounded = _ref.isRounded;
+function buildDeletedWrappedBlockOutline(colors, _ref3) {
+  var isActive = _ref3.isActive,
+    isRounded = _ref3.isRounded;
   if (isActive) {
     return isRounded ? buildDeletedBlockOutlineRoundedActive(colors) : buildDeletedBlockOutlineActive(colors);
   }

package/dist/cjs/ui/ContributorTag/contributorAvatarRenderer.js

@@ -13,40 +13,35 @@ var _contributorTagIcons = require("./contributorTagIcons");
 var AVATAR_SIZE = _avatarSizes.AVATAR_SIZES.xxsmall;
 /** `xxsmall` also carried a `space.025` margin — the same 2px — which is where the ring is painted. */
 var AVATAR_RING_WIDTH = _default.BORDER_WIDTH;
-var AVATAR_BOX_SIZE = AVATAR_SIZE + AVATAR_RING_WIDTH * 2;
 
 /** Reused from `@atlaskit/avatar`'s `avatar-content`, so the two shapes cannot drift. */
 var HEXAGON_CLIP_PATH = 'polygon(45% 1.33975%, 46.5798% 0.60307%, 48.26352% 0.15192%, 50% 0%, 51.73648% 0.15192%, 53.4202% 0.60307%, 55% 1.33975%, 89.64102% 21.33975%, 91.06889% 22.33956%, 92.30146% 23.57212%, 93.30127% 25%, 94.03794% 26.5798%, 94.48909% 28.26352%, 94.64102% 30%, 94.64102% 70%, 94.48909% 71.73648%, 94.03794% 73.4202%, 93.30127% 75%, 92.30146% 76.42788%, 91.06889% 77.66044%, 89.64102% 78.66025%, 55% 98.66025%, 53.4202% 99.39693%, 51.73648% 99.84808%, 50% 100%, 48.26352% 99.84808%, 46.5798% 99.39693%, 45% 98.66025%, 10.35898% 78.66025%, 8.93111% 77.66044%, 7.69854% 76.42788%, 6.69873% 75%, 5.96206% 73.4202%, 5.51091% 71.73648%, 5.35898% 70%, 5.35898% 30%, 5.51091% 28.26352%, 5.96206% 26.5798%, 6.69873% 25%, 7.69854% 23.57212%, 8.93111% 22.33956%, 10.35898% 21.33975%)';
-var boxStyle = (0, _cssHelper.convertToInlineCss)({
-  display: 'inline-flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  flexShrink: 0,
-  boxSizing: 'border-box',
-  width: "".concat(AVATAR_BOX_SIZE, "px"),
-  height: "".concat(AVATAR_BOX_SIZE, "px")
-});
 
-/** Agents get a drop shadow instead of a ring, so their box skips the ring's padding. */
-var agentBoxStyle = (0, _cssHelper.convertToInlineCss)({
-  display: 'inline-flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  flexShrink: 0,
-  boxSizing: 'border-box',
-  width: "".concat(AVATAR_SIZE, "px"),
-  height: "".concat(AVATAR_SIZE, "px")
-});
-var shapeStyle = (0, _cssHelper.convertToInlineCss)({
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  boxSizing: 'border-box',
-  width: "".concat(AVATAR_SIZE, "px"),
-  height: "".concat(AVATAR_SIZE, "px"),
-  aspectRatio: '1/1',
-  overflow: 'hidden'
-});
+/** The avatar plus its ring. */
+var getBoxStyle = function getBoxStyle(size, ringWidth) {
+  var boxSize = size + ringWidth * 2;
+  return (0, _cssHelper.convertToInlineCss)({
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 0,
+    boxSizing: 'border-box',
+    width: "".concat(boxSize, "px"),
+    height: "".concat(boxSize, "px")
+  });
+};
+var getShapeStyle = function getShapeStyle(size) {
+  return (0, _cssHelper.convertToInlineCss)({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    boxSizing: 'border-box',
+    width: "".concat(size, "px"),
+    height: "".concat(size, "px"),
+    aspectRatio: '1/1',
+    overflow: 'hidden'
+  });
+};
 
 /**
  * The shadow's colour per theme. In the dark theme `elevation.shadow.overflow.perimeter` is
@@ -88,10 +83,16 @@ var contributorAvatarRenderer = exports.contributorAvatarRenderer = function con
   var contributor = _ref.contributor,
     doc = _ref.doc,
     ringColor = _ref.ringColor,
+    _ref$ringWidth = _ref.ringWidth,
+    ringWidth = _ref$ringWidth === void 0 ? AVATAR_RING_WIDTH : _ref$ringWidth,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? AVATAR_SIZE : _ref$size,
     stackIndex = _ref.stackIndex;
   var isAgent = contributor.kind === 'agent';
   var element = doc.createElement('span');
-  element.setAttribute('style', isAgent ? "".concat(agentBoxStyle, " ").concat(agentShadowStyle) : boxStyle);
+  // Agents get a drop shadow instead of a ring, so their box skips the ring's padding.
+  var boxStyle = getBoxStyle(size, isAgent ? 0 : ringWidth);
+  element.setAttribute('style', isAgent ? "".concat(boxStyle, " ").concat(agentShadowStyle) : boxStyle);
   // Decorative: the tag names its contributors in the visually hidden label its screen-reader
   // announcement comes from.
   element.setAttribute('aria-hidden', 'true');
@@ -99,7 +100,7 @@ var contributorAvatarRenderer = exports.contributorAvatarRenderer = function con
     element.style.setProperty('z-index', String(stackIndex));
   }
   var shape = doc.createElement('span');
-  shape.setAttribute('style', shapeStyle);
+  shape.setAttribute('style', getShapeStyle(size));
   element.appendChild(shape);
   if (isAgent) {
     shape.style.setProperty('clip-path', HEXAGON_CLIP_PATH);
@@ -145,7 +146,7 @@ var contributorAvatarRenderer = exports.contributorAvatarRenderer = function con
       shape.style.setProperty('background', nextRingColor);
       return;
     }
-    shape.style.setProperty('box-shadow', "0 0 0 ".concat(AVATAR_RING_WIDTH, "px ").concat(nextRingColor));
+    shape.style.setProperty('box-shadow', "0 0 0 ".concat(ringWidth, "px ").concat(nextRingColor));
     shape.style.setProperty('background', nextRingColor);
   };
   setRingColor(ringColor);

package/dist/cjs/ui/ContributorTag/contributorTagController.js

@@ -32,6 +32,13 @@ var getTagAccent = function getTagAccent(_ref) {
   return (0, _factory.getAccentTokens)(accent);
 };
 
+/** Person's diameter in a connected pair. */
+var CONNECTED_USER_AVATAR_SIZE = 12;
+/** Px the person overlaps the agent. */
+var CONNECTED_AVATAR_OVERLAP = 3;
+/** Px of ring around the person in a connected pair. */
+var CONNECTED_USER_RING_WIDTH = 1;
+
 /** Bespoke accents for agent kinds that use standard ADS tokens rather than the agent-color registry. */
 var BESPOKE_AGENT_ACCENTS = {
   rovo: {
@@ -342,29 +349,34 @@ var ContributorTagController = exports.ContributorTagController = /*#__PURE__*/f
       var agent = isPrimaryAgent ? model.contributor : model.connectedContributor;
 
       // Hand-rolled avatar stack: `@atlaskit/avatar-group` cannot render below 24px and the tag uses
-      // 16px avatars.
+      // 16px avatars. A connected pair's person is smaller and overlaps the agent.
       var stack = model.connectedContributor ? [].concat((0, _toConsumableArray2.default)(agent ? [{
         contributor: agent,
-        stackIndex: 1
+        stackIndex: 0
       }] : []), (0, _toConsumableArray2.default)(user ? [{
         contributor: user,
-        stackIndex: 0
+        ringWidth: CONNECTED_USER_RING_WIDTH,
+        size: CONNECTED_USER_AVATAR_SIZE,
+        stackIndex: 1
       }] : [])) : [{
         contributor: model.contributor
       }];
       stack.forEach(function (_ref6, index) {
         var contributor = _ref6.contributor,
+          ringWidth = _ref6.ringWidth,
+          size = _ref6.size,
           stackIndex = _ref6.stackIndex;
         var avatar = (0, _contributorAvatarRenderer.contributorAvatarRenderer)({
           contributor: contributor,
           doc: doc,
           ringColor: background,
+          ringWidth: ringWidth,
+          size: size,
           stackIndex: stackIndex
         });
         if (index < stack.length - 1) {
-          // Sits the leading avatar of a connected pair flush against the one behind it, with
-          // no overlap and no extra gap.
-          avatar.element.style.setProperty('margin-inline-end', '0');
+          // The person's ring cuts a gap into the agent.
+          avatar.element.style.setProperty('margin-inline-end', "-".concat(CONNECTED_AVATAR_OVERLAP, "px"));
         }
         container.appendChild(avatar.element);
         _this5.avatars.push(avatar);

package/dist/es2019/pm-plugins/decorations/colorSchemes/attributions.js

@@ -12,8 +12,8 @@ import { PARTICIPANT_COLOR_SCHEMES } from './types';
 const HASHED_PARTICIPANT_COLOR_SCHEMES = [...PARTICIPANT_COLOR_SCHEMES, 'blue', 'red', 'orange', 'yellow', 'green', 'teal', 'purple', 'magenta'];
 
 /**
- * Red means "deleted" in both public schemes, so it never identifies an actor. Reserving it here
- * covers every path into an attribution colour; `createAttributionColorMap` is the only caller, and
+ * ADS red means "deleted" in both public schemes, so it is excluded from hashed participant colours.
+ * Brand schemes retain their own palettes. `createAttributionColorMap` is the only caller, and
  * it is gated on `platform_editor_attributed_version_history` plus
  * `platform_editor_show_diff_color_scheme_refactor`.
  */
@@ -109,23 +109,26 @@ export const isAttributionColoringEnabled = stepAttributions => {
  */
 export const isContributorTagsEnabled = (stepAttributions, contributors) => areAttributionColorGatesEnabled() && Boolean(stepAttributions === null || stepAttributions === void 0 ? void 0 : stepAttributions.some(attribution => getAttributionKey(attribution) !== undefined)) && contributors !== undefined && Object.keys(contributors).length > 0;
 const getAttributionParticipantColor = (attribution, identity, contributors) => {
-  var _ref, _getThirdPartyAgentCo, _attribution$agentId2;
+  var _ref, _attribution$agentId2;
   const contributor = contributors === null || contributors === void 0 ? void 0 : contributors[identity.key];
   const brand = isDiffAgentBrand(contributor === null || contributor === void 0 ? void 0 : contributor.agentKind) ? contributor === null || contributor === void 0 ? void 0 : contributor.agentKind : undefined;
-  const agentName = (_ref = brand !== null && brand !== void 0 ? brand : (_getThirdPartyAgentCo = getThirdPartyAgentColor({
-    agentNamedId: attribution === null || attribution === void 0 ? void 0 : attribution.agentNamedId,
-    agentName: contributor === null || contributor === void 0 ? void 0 : contributor.name
-  })) === null || _getThirdPartyAgentCo === void 0 ? void 0 : _getThirdPartyAgentCo.name) !== null && _ref !== void 0 ? _ref : attribution !== null && attribution !== void 0 && (_attribution$agentId2 = attribution.agentId) !== null && _attribution$agentId2 !== void 0 && _attribution$agentId2.trim() ? (contributor === null || contributor === void 0 ? void 0 : contributor.name) || 'Agent' : undefined;
-  return getParticipantColor(identity.colorSeed, agentName,
-  // Keep an explicitly resolved brand consistent with the contributor's icon.
-  brand ? undefined : attribution === null || attribution === void 0 ? void 0 : attribution.agentNamedId);
+  const brandColor = getThirdPartyAgentColor({
+    agentNamedId: brand ? undefined : attribution === null || attribution === void 0 ? void 0 : attribution.agentNamedId,
+    agentName: brand !== null && brand !== void 0 ? brand : contributor === null || contributor === void 0 ? void 0 : contributor.name
+  });
+  const agentName = (_ref = brand !== null && brand !== void 0 ? brand : brandColor === null || brandColor === void 0 ? void 0 : brandColor.name) !== null && _ref !== void 0 ? _ref : attribution !== null && attribution !== void 0 && (_attribution$agentId2 = attribution.agentId) !== null && _attribution$agentId2 !== void 0 && _attribution$agentId2.trim() ? (contributor === null || contributor === void 0 ? void 0 : contributor.name) || 'Agent' : undefined;
+  return {
+    ...getParticipantColor(identity.colorSeed, agentName,
+    // Keep an explicitly resolved brand consistent with the contributor's icon.
+    brand ? undefined : attribution === null || attribution === void 0 ? void 0 : attribution.agentNamedId),
+    scheme: brandColor === null || brandColor === void 0 ? void 0 : brandColor.scheme
+  };
 };
 export const createAttributionColorMap = (stepAttributions, contributors) => {
   const colors = new Map();
   const allocatedColors = new Set();
 
-  // Reserve shared brand colours before hashing other actors, regardless of step order. A brand
-  // slot is pinned deliberately, so it is taken verbatim rather than through `getSlotColor`.
+  // Keep brand schemes intact; only unbranded contributors use the hashed ADS palette below.
   for (const attribution of stepAttributions) {
     const identity = getAttributionIdentity(attribution);
     if (!identity) {
@@ -133,11 +136,15 @@ export const createAttributionColorMap = (stepAttributions, contributors) => {
     }
     const {
       index,
-      isFixed
+      isFixed,
+      scheme
     } = getAttributionParticipantColor(attribution, identity, contributors);
+    if (scheme) {
+      colors.set(identity.key, scheme);
+    }
+    // Keep the old slot reserved so selecting a brand cannot recolour other contributors.
     const color = HASHED_PARTICIPANT_COLOR_SCHEMES[index];
     if (isFixed && color) {
-      colors.set(identity.key, color);
       allocatedColors.add(color);
     }
   }

package/dist/es2019/pm-plugins/decorations/colorSchemes/factory.js

@@ -141,8 +141,8 @@ function bgBolder(color) {
   return (_getBrand$bold = (_getBrand4 = getBrand(color)) === null || _getBrand4 === void 0 ? void 0 : _getBrand4.bold) !== null && _getBrand$bold !== void 0 ? _getBrand$bold : bgBolderMap[color];
 }
 function bgSubtlerPressed(color) {
-  var _getBrand$background3, _getBrand5;
-  return (_getBrand$background3 = (_getBrand5 = getBrand(color)) === null || _getBrand5 === void 0 ? void 0 : _getBrand5.background) !== null && _getBrand$background3 !== void 0 ? _getBrand$background3 : bgSubtlerPressedMap[color];
+  var _ref, _getBrand$emphasisBac, _getBrand5;
+  return (_ref = (_getBrand$emphasisBac = (_getBrand5 = getBrand(color)) === null || _getBrand5 === void 0 ? void 0 : _getBrand5.emphasisBackground) !== null && _getBrand$emphasisBac !== void 0 ? _getBrand$emphasisBac : bgSubtlerPressedMap[color]) !== null && _ref !== void 0 ? _ref : bgSubtlerPressedMap.gray;
 }
 function borderAccent(color) {
   var _getBrand$border2, _getBrand6;
@@ -153,8 +153,8 @@ function textAccent(color) {
   return (_getBrand$accentText = (_getBrand7 = getBrand(color)) === null || _getBrand7 === void 0 ? void 0 : _getBrand7.accentText) !== null && _getBrand$accentText !== void 0 ? _getBrand$accentText : textAccentMap[color];
 }
 function deletedBackground(color) {
-  var _getBrand$emphasisBac, _getBrand8;
-  return (_getBrand$emphasisBac = (_getBrand8 = getBrand(color)) === null || _getBrand8 === void 0 ? void 0 : _getBrand8.emphasisBackground) !== null && _getBrand$emphasisBac !== void 0 ? _getBrand$emphasisBac : bgSubtlest(color);
+  var _getBrand$emphasisBac2, _getBrand8;
+  return (_getBrand$emphasisBac2 = (_getBrand8 = getBrand(color)) === null || _getBrand8 === void 0 ? void 0 : _getBrand8.emphasisBackground) !== null && _getBrand$emphasisBac2 !== void 0 ? _getBrand$emphasisBac2 : bgSubtlest(color);
 }
 
 /** Contributor tags use a bold fill with a contrasting foreground, including branded schemes. */
@@ -236,13 +236,14 @@ export function buildInsertStyleInBlockExtended(colors) {
 
 /** Active state of the extended insert style. */
 export function buildInsertStyleExtendedActive(colors) {
+  var _ref2, _brand$activeBorder;
   const brand = getBrand(colors.insertColor);
   return convertToInlineCss({
     background: bgSubtlerPressed(colors.insertActiveColor),
     ...(brand ? {
       color: brand.text
     } : {}),
-    borderBottom: `2px solid ${borderAccent(colors.insertColor)}`,
+    borderBottom: `2px solid ${(_ref2 = (_brand$activeBorder = brand === null || brand === void 0 ? void 0 : brand.activeBorder) !== null && _brand$activeBorder !== void 0 ? _brand$activeBorder : borderAccentMap[colors.insertColor]) !== null && _ref2 !== void 0 ? _ref2 : borderAccentMap.gray}`,
     padding: `1px 0 2px`
   });
 }

package/dist/es2019/ui/ContributorTag/contributorAvatarRenderer.js

@@ -8,37 +8,30 @@ import { getContributorTagIcon } from './contributorTagIcons';
 const AVATAR_SIZE = AVATAR_SIZES.xxsmall;
 /** `xxsmall` also carried a `space.025` margin — the same 2px — which is where the ring is painted. */
 const AVATAR_RING_WIDTH = BORDER_WIDTH;
-const AVATAR_BOX_SIZE = AVATAR_SIZE + AVATAR_RING_WIDTH * 2;
 
 /** Reused from `@atlaskit/avatar`'s `avatar-content`, so the two shapes cannot drift. */
 const HEXAGON_CLIP_PATH = 'polygon(45% 1.33975%, 46.5798% 0.60307%, 48.26352% 0.15192%, 50% 0%, 51.73648% 0.15192%, 53.4202% 0.60307%, 55% 1.33975%, 89.64102% 21.33975%, 91.06889% 22.33956%, 92.30146% 23.57212%, 93.30127% 25%, 94.03794% 26.5798%, 94.48909% 28.26352%, 94.64102% 30%, 94.64102% 70%, 94.48909% 71.73648%, 94.03794% 73.4202%, 93.30127% 75%, 92.30146% 76.42788%, 91.06889% 77.66044%, 89.64102% 78.66025%, 55% 98.66025%, 53.4202% 99.39693%, 51.73648% 99.84808%, 50% 100%, 48.26352% 99.84808%, 46.5798% 99.39693%, 45% 98.66025%, 10.35898% 78.66025%, 8.93111% 77.66044%, 7.69854% 76.42788%, 6.69873% 75%, 5.96206% 73.4202%, 5.51091% 71.73648%, 5.35898% 70%, 5.35898% 30%, 5.51091% 28.26352%, 5.96206% 26.5798%, 6.69873% 25%, 7.69854% 23.57212%, 8.93111% 22.33956%, 10.35898% 21.33975%)';
-const boxStyle = convertToInlineCss({
-  display: 'inline-flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  flexShrink: 0,
-  boxSizing: 'border-box',
-  width: `${AVATAR_BOX_SIZE}px`,
-  height: `${AVATAR_BOX_SIZE}px`
-});
 
-/** Agents get a drop shadow instead of a ring, so their box skips the ring's padding. */
-const agentBoxStyle = convertToInlineCss({
-  display: 'inline-flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  flexShrink: 0,
-  boxSizing: 'border-box',
-  width: `${AVATAR_SIZE}px`,
-  height: `${AVATAR_SIZE}px`
-});
-const shapeStyle = convertToInlineCss({
+/** The avatar plus its ring. */
+const getBoxStyle = (size, ringWidth) => {
+  const boxSize = size + ringWidth * 2;
+  return convertToInlineCss({
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 0,
+    boxSizing: 'border-box',
+    width: `${boxSize}px`,
+    height: `${boxSize}px`
+  });
+};
+const getShapeStyle = size => convertToInlineCss({
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
   boxSizing: 'border-box',
-  width: `${AVATAR_SIZE}px`,
-  height: `${AVATAR_SIZE}px`,
+  width: `${size}px`,
+  height: `${size}px`,
   aspectRatio: '1/1',
   overflow: 'hidden'
 });
@@ -83,11 +76,15 @@ export const contributorAvatarRenderer = ({
   contributor,
   doc,
   ringColor,
+  ringWidth = AVATAR_RING_WIDTH,
+  size = AVATAR_SIZE,
   stackIndex
 }) => {
   const isAgent = contributor.kind === 'agent';
   const element = doc.createElement('span');
-  element.setAttribute('style', isAgent ? `${agentBoxStyle} ${agentShadowStyle}` : boxStyle);
+  // Agents get a drop shadow instead of a ring, so their box skips the ring's padding.
+  const boxStyle = getBoxStyle(size, isAgent ? 0 : ringWidth);
+  element.setAttribute('style', isAgent ? `${boxStyle} ${agentShadowStyle}` : boxStyle);
   // Decorative: the tag names its contributors in the visually hidden label its screen-reader
   // announcement comes from.
   element.setAttribute('aria-hidden', 'true');
@@ -95,7 +92,7 @@ export const contributorAvatarRenderer = ({
     element.style.setProperty('z-index', String(stackIndex));
   }
   const shape = doc.createElement('span');
-  shape.setAttribute('style', shapeStyle);
+  shape.setAttribute('style', getShapeStyle(size));
   element.appendChild(shape);
   if (isAgent) {
     shape.style.setProperty('clip-path', HEXAGON_CLIP_PATH);
@@ -141,7 +138,7 @@ export const contributorAvatarRenderer = ({
       shape.style.setProperty('background', nextRingColor);
       return;
     }
-    shape.style.setProperty('box-shadow', `0 0 0 ${AVATAR_RING_WIDTH}px ${nextRingColor}`);
+    shape.style.setProperty('box-shadow', `0 0 0 ${ringWidth}px ${nextRingColor}`);
     shape.style.setProperty('background', nextRingColor);
   };
   setRingColor(ringColor);

package/dist/es2019/ui/ContributorTag/contributorTagController.js

@@ -21,6 +21,13 @@ const getTagAccent = ({
   return getAccentTokens(accent);
 };
 
+/** Person's diameter in a connected pair. */
+const CONNECTED_USER_AVATAR_SIZE = 12;
+/** Px the person overlaps the agent. */
+const CONNECTED_AVATAR_OVERLAP = 3;
+/** Px of ring around the person in a connected pair. */
+const CONNECTED_USER_RING_WIDTH = 1;
+
 /** Bespoke accents for agent kinds that use standard ADS tokens rather than the agent-color registry. */
 const BESPOKE_AGENT_ACCENTS = {
   rovo: {
@@ -298,30 +305,35 @@ export class ContributorTagController {
     const agent = isPrimaryAgent ? model.contributor : model.connectedContributor;
 
     // Hand-rolled avatar stack: `@atlaskit/avatar-group` cannot render below 24px and the tag uses
-    // 16px avatars.
+    // 16px avatars. A connected pair's person is smaller and overlaps the agent.
     const stack = model.connectedContributor ? [...(agent ? [{
       contributor: agent,
-      stackIndex: 1
+      stackIndex: 0
     }] : []), ...(user ? [{
       contributor: user,
-      stackIndex: 0
+      ringWidth: CONNECTED_USER_RING_WIDTH,
+      size: CONNECTED_USER_AVATAR_SIZE,
+      stackIndex: 1
     }] : [])] : [{
       contributor: model.contributor
     }];
     stack.forEach(({
       contributor,
+      ringWidth,
+      size,
       stackIndex
     }, index) => {
       const avatar = contributorAvatarRenderer({
         contributor,
         doc,
         ringColor: background,
+        ringWidth,
+        size,
         stackIndex
       });
       if (index < stack.length - 1) {
-        // Sits the leading avatar of a connected pair flush against the one behind it, with
-        // no overlap and no extra gap.
-        avatar.element.style.setProperty('margin-inline-end', '0');
+        // The person's ring cuts a gap into the agent.
+        avatar.element.style.setProperty('margin-inline-end', `-${CONNECTED_AVATAR_OVERLAP}px`);
       }
       container.appendChild(avatar.element);
       this.avatars.push(avatar);

package/dist/esm/pm-plugins/decorations/colorSchemes/attributions.js

@@ -22,8 +22,8 @@ import { PARTICIPANT_COLOR_SCHEMES } from './types';
 var HASHED_PARTICIPANT_COLOR_SCHEMES = [].concat(_toConsumableArray(PARTICIPANT_COLOR_SCHEMES), ['blue', 'red', 'orange', 'yellow', 'green', 'teal', 'purple', 'magenta']);
 
 /**
- * Red means "deleted" in both public schemes, so it never identifies an actor. Reserving it here
- * covers every path into an attribution colour; `createAttributionColorMap` is the only caller, and
+ * ADS red means "deleted" in both public schemes, so it is excluded from hashed participant colours.
+ * Brand schemes retain their own palettes. `createAttributionColorMap` is the only caller, and
  * it is gated on `platform_editor_attributed_version_history` plus
  * `platform_editor_show_diff_color_scheme_refactor`.
  */
@@ -136,23 +136,25 @@ export var isContributorTagsEnabled = function isContributorTagsEnabled(stepAttr
   })) && contributors !== undefined && Object.keys(contributors).length > 0;
 };
 var getAttributionParticipantColor = function getAttributionParticipantColor(attribution, identity, contributors) {
-  var _ref2, _getThirdPartyAgentCo, _attribution$agentId2;
+  var _ref2, _attribution$agentId2;
   var contributor = contributors === null || contributors === void 0 ? void 0 : contributors[identity.key];
   var brand = isDiffAgentBrand(contributor === null || contributor === void 0 ? void 0 : contributor.agentKind) ? contributor === null || contributor === void 0 ? void 0 : contributor.agentKind : undefined;
-  var agentName = (_ref2 = brand !== null && brand !== void 0 ? brand : (_getThirdPartyAgentCo = getThirdPartyAgentColor({
-    agentNamedId: attribution === null || attribution === void 0 ? void 0 : attribution.agentNamedId,
-    agentName: contributor === null || contributor === void 0 ? void 0 : contributor.name
-  })) === null || _getThirdPartyAgentCo === void 0 ? void 0 : _getThirdPartyAgentCo.name) !== null && _ref2 !== void 0 ? _ref2 : attribution !== null && attribution !== void 0 && (_attribution$agentId2 = attribution.agentId) !== null && _attribution$agentId2 !== void 0 && _attribution$agentId2.trim() ? (contributor === null || contributor === void 0 ? void 0 : contributor.name) || 'Agent' : undefined;
-  return getParticipantColor(identity.colorSeed, agentName,
+  var brandColor = getThirdPartyAgentColor({
+    agentNamedId: brand ? undefined : attribution === null || attribution === void 0 ? void 0 : attribution.agentNamedId,
+    agentName: brand !== null && brand !== void 0 ? brand : contributor === null || contributor === void 0 ? void 0 : contributor.name
+  });
+  var agentName = (_ref2 = brand !== null && brand !== void 0 ? brand : brandColor === null || brandColor === void 0 ? void 0 : brandColor.name) !== null && _ref2 !== void 0 ? _ref2 : attribution !== null && attribution !== void 0 && (_attribution$agentId2 = attribution.agentId) !== null && _attribution$agentId2 !== void 0 && _attribution$agentId2.trim() ? (contributor === null || contributor === void 0 ? void 0 : contributor.name) || 'Agent' : undefined;
+  return _objectSpread(_objectSpread({}, getParticipantColor(identity.colorSeed, agentName,
   // Keep an explicitly resolved brand consistent with the contributor's icon.
-  brand ? undefined : attribution === null || attribution === void 0 ? void 0 : attribution.agentNamedId);
+  brand ? undefined : attribution === null || attribution === void 0 ? void 0 : attribution.agentNamedId)), {}, {
+    scheme: brandColor === null || brandColor === void 0 ? void 0 : brandColor.scheme
+  });
 };
 export var createAttributionColorMap = function createAttributionColorMap(stepAttributions, contributors) {
   var colors = new Map();
   var allocatedColors = new Set();
 
-  // Reserve shared brand colours before hashing other actors, regardless of step order. A brand
-  // slot is pinned deliberately, so it is taken verbatim rather than through `getSlotColor`.
+  // Keep brand schemes intact; only unbranded contributors use the hashed ADS palette below.
   var _iterator2 = _createForOfIteratorHelper(stepAttributions),
     _step2;
   try {
@@ -164,10 +166,14 @@ export var createAttributionColorMap = function createAttributionColorMap(stepAt
       }
       var _getAttributionPartic = getAttributionParticipantColor(attribution, identity, contributors),
         index = _getAttributionPartic.index,
-        isFixed = _getAttributionPartic.isFixed;
+        isFixed = _getAttributionPartic.isFixed,
+        scheme = _getAttributionPartic.scheme;
+      if (scheme) {
+        colors.set(identity.key, scheme);
+      }
+      // Keep the old slot reserved so selecting a brand cannot recolour other contributors.
       var color = HASHED_PARTICIPANT_COLOR_SCHEMES[index];
       if (isFixed && color) {
-        colors.set(identity.key, color);
         allocatedColors.add(color);
       }
     }

package/dist/esm/pm-plugins/decorations/colorSchemes/factory.js

@@ -146,8 +146,8 @@ function bgBolder(color) {
   return (_getBrand$bold = (_getBrand4 = getBrand(color)) === null || _getBrand4 === void 0 ? void 0 : _getBrand4.bold) !== null && _getBrand$bold !== void 0 ? _getBrand$bold : bgBolderMap[color];
 }
 function bgSubtlerPressed(color) {
-  var _getBrand$background3, _getBrand5;
-  return (_getBrand$background3 = (_getBrand5 = getBrand(color)) === null || _getBrand5 === void 0 ? void 0 : _getBrand5.background) !== null && _getBrand$background3 !== void 0 ? _getBrand$background3 : bgSubtlerPressedMap[color];
+  var _ref, _getBrand$emphasisBac, _getBrand5;
+  return (_ref = (_getBrand$emphasisBac = (_getBrand5 = getBrand(color)) === null || _getBrand5 === void 0 ? void 0 : _getBrand5.emphasisBackground) !== null && _getBrand$emphasisBac !== void 0 ? _getBrand$emphasisBac : bgSubtlerPressedMap[color]) !== null && _ref !== void 0 ? _ref : bgSubtlerPressedMap.gray;
 }
 function borderAccent(color) {
   var _getBrand$border2, _getBrand6;
@@ -158,8 +158,8 @@ function textAccent(color) {
   return (_getBrand$accentText = (_getBrand7 = getBrand(color)) === null || _getBrand7 === void 0 ? void 0 : _getBrand7.accentText) !== null && _getBrand$accentText !== void 0 ? _getBrand$accentText : textAccentMap[color];
 }
 function deletedBackground(color) {
-  var _getBrand$emphasisBac, _getBrand8;
-  return (_getBrand$emphasisBac = (_getBrand8 = getBrand(color)) === null || _getBrand8 === void 0 ? void 0 : _getBrand8.emphasisBackground) !== null && _getBrand$emphasisBac !== void 0 ? _getBrand$emphasisBac : bgSubtlest(color);
+  var _getBrand$emphasisBac2, _getBrand8;
+  return (_getBrand$emphasisBac2 = (_getBrand8 = getBrand(color)) === null || _getBrand8 === void 0 ? void 0 : _getBrand8.emphasisBackground) !== null && _getBrand$emphasisBac2 !== void 0 ? _getBrand$emphasisBac2 : bgSubtlest(color);
 }
 
 /** Contributor tags use a bold fill with a contrasting foreground, including branded schemes. */
@@ -241,13 +241,14 @@ export function buildInsertStyleInBlockExtended(colors) {
 
 /** Active state of the extended insert style. */
 export function buildInsertStyleExtendedActive(colors) {
+  var _ref2, _brand$activeBorder;
   var brand = getBrand(colors.insertColor);
   return convertToInlineCss(_objectSpread(_objectSpread({
     background: bgSubtlerPressed(colors.insertActiveColor)
   }, brand ? {
     color: brand.text
   } : {}), {}, {
-    borderBottom: "2px solid ".concat(borderAccent(colors.insertColor)),
+    borderBottom: "2px solid ".concat((_ref2 = (_brand$activeBorder = brand === null || brand === void 0 ? void 0 : brand.activeBorder) !== null && _brand$activeBorder !== void 0 ? _brand$activeBorder : borderAccentMap[colors.insertColor]) !== null && _ref2 !== void 0 ? _ref2 : borderAccentMap.gray),
     padding: "1px 0 2px"
   }));
 }
@@ -1042,9 +1043,9 @@ export function buildDeletedQuoteNodeWithLozengeStyle(colors, isActive) {
  * codeBlock). Every scheme shares the active state; `deletedNodeEmphasis` changes only the
  * resting one — 'stateful' a 4px subtlest ring, 'static' a 1px accent ring.
  */
-export function buildDeletedWrappedBlockOutline(colors, _ref) {
-  var isActive = _ref.isActive,
-    isRounded = _ref.isRounded;
+export function buildDeletedWrappedBlockOutline(colors, _ref3) {
+  var isActive = _ref3.isActive,
+    isRounded = _ref3.isRounded;
   if (isActive) {
     return isRounded ? buildDeletedBlockOutlineRoundedActive(colors) : buildDeletedBlockOutlineActive(colors);
   }

package/dist/esm/ui/ContributorTag/contributorAvatarRenderer.js

@@ -8,40 +8,35 @@ import { getContributorTagIcon } from './contributorTagIcons';
 var AVATAR_SIZE = AVATAR_SIZES.xxsmall;
 /** `xxsmall` also carried a `space.025` margin — the same 2px — which is where the ring is painted. */
 var AVATAR_RING_WIDTH = BORDER_WIDTH;
-var AVATAR_BOX_SIZE = AVATAR_SIZE + AVATAR_RING_WIDTH * 2;
 
 /** Reused from `@atlaskit/avatar`'s `avatar-content`, so the two shapes cannot drift. */
 var HEXAGON_CLIP_PATH = 'polygon(45% 1.33975%, 46.5798% 0.60307%, 48.26352% 0.15192%, 50% 0%, 51.73648% 0.15192%, 53.4202% 0.60307%, 55% 1.33975%, 89.64102% 21.33975%, 91.06889% 22.33956%, 92.30146% 23.57212%, 93.30127% 25%, 94.03794% 26.5798%, 94.48909% 28.26352%, 94.64102% 30%, 94.64102% 70%, 94.48909% 71.73648%, 94.03794% 73.4202%, 93.30127% 75%, 92.30146% 76.42788%, 91.06889% 77.66044%, 89.64102% 78.66025%, 55% 98.66025%, 53.4202% 99.39693%, 51.73648% 99.84808%, 50% 100%, 48.26352% 99.84808%, 46.5798% 99.39693%, 45% 98.66025%, 10.35898% 78.66025%, 8.93111% 77.66044%, 7.69854% 76.42788%, 6.69873% 75%, 5.96206% 73.4202%, 5.51091% 71.73648%, 5.35898% 70%, 5.35898% 30%, 5.51091% 28.26352%, 5.96206% 26.5798%, 6.69873% 25%, 7.69854% 23.57212%, 8.93111% 22.33956%, 10.35898% 21.33975%)';
-var boxStyle = convertToInlineCss({
-  display: 'inline-flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  flexShrink: 0,
-  boxSizing: 'border-box',
-  width: "".concat(AVATAR_BOX_SIZE, "px"),
-  height: "".concat(AVATAR_BOX_SIZE, "px")
-});
 
-/** Agents get a drop shadow instead of a ring, so their box skips the ring's padding. */
-var agentBoxStyle = convertToInlineCss({
-  display: 'inline-flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  flexShrink: 0,
-  boxSizing: 'border-box',
-  width: "".concat(AVATAR_SIZE, "px"),
-  height: "".concat(AVATAR_SIZE, "px")
-});
-var shapeStyle = convertToInlineCss({
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  boxSizing: 'border-box',
-  width: "".concat(AVATAR_SIZE, "px"),
-  height: "".concat(AVATAR_SIZE, "px"),
-  aspectRatio: '1/1',
-  overflow: 'hidden'
-});
+/** The avatar plus its ring. */
+var getBoxStyle = function getBoxStyle(size, ringWidth) {
+  var boxSize = size + ringWidth * 2;
+  return convertToInlineCss({
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 0,
+    boxSizing: 'border-box',
+    width: "".concat(boxSize, "px"),
+    height: "".concat(boxSize, "px")
+  });
+};
+var getShapeStyle = function getShapeStyle(size) {
+  return convertToInlineCss({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    boxSizing: 'border-box',
+    width: "".concat(size, "px"),
+    height: "".concat(size, "px"),
+    aspectRatio: '1/1',
+    overflow: 'hidden'
+  });
+};
 
 /**
  * The shadow's colour per theme. In the dark theme `elevation.shadow.overflow.perimeter` is
@@ -83,10 +78,16 @@ export var contributorAvatarRenderer = function contributorAvatarRenderer(_ref)
   var contributor = _ref.contributor,
     doc = _ref.doc,
     ringColor = _ref.ringColor,
+    _ref$ringWidth = _ref.ringWidth,
+    ringWidth = _ref$ringWidth === void 0 ? AVATAR_RING_WIDTH : _ref$ringWidth,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? AVATAR_SIZE : _ref$size,
     stackIndex = _ref.stackIndex;
   var isAgent = contributor.kind === 'agent';
   var element = doc.createElement('span');
-  element.setAttribute('style', isAgent ? "".concat(agentBoxStyle, " ").concat(agentShadowStyle) : boxStyle);
+  // Agents get a drop shadow instead of a ring, so their box skips the ring's padding.
+  var boxStyle = getBoxStyle(size, isAgent ? 0 : ringWidth);
+  element.setAttribute('style', isAgent ? "".concat(boxStyle, " ").concat(agentShadowStyle) : boxStyle);
   // Decorative: the tag names its contributors in the visually hidden label its screen-reader
   // announcement comes from.
   element.setAttribute('aria-hidden', 'true');
@@ -94,7 +95,7 @@ export var contributorAvatarRenderer = function contributorAvatarRenderer(_ref)
     element.style.setProperty('z-index', String(stackIndex));
   }
   var shape = doc.createElement('span');
-  shape.setAttribute('style', shapeStyle);
+  shape.setAttribute('style', getShapeStyle(size));
   element.appendChild(shape);
   if (isAgent) {
     shape.style.setProperty('clip-path', HEXAGON_CLIP_PATH);
@@ -140,7 +141,7 @@ export var contributorAvatarRenderer = function contributorAvatarRenderer(_ref)
       shape.style.setProperty('background', nextRingColor);
       return;
     }
-    shape.style.setProperty('box-shadow', "0 0 0 ".concat(AVATAR_RING_WIDTH, "px ").concat(nextRingColor));
+    shape.style.setProperty('box-shadow', "0 0 0 ".concat(ringWidth, "px ").concat(nextRingColor));
     shape.style.setProperty('background', nextRingColor);
   };
   setRingColor(ringColor);

package/dist/esm/ui/ContributorTag/contributorTagController.js

@@ -25,6 +25,13 @@ var getTagAccent = function getTagAccent(_ref) {
   return getAccentTokens(accent);
 };
 
+/** Person's diameter in a connected pair. */
+var CONNECTED_USER_AVATAR_SIZE = 12;
+/** Px the person overlaps the agent. */
+var CONNECTED_AVATAR_OVERLAP = 3;
+/** Px of ring around the person in a connected pair. */
+var CONNECTED_USER_RING_WIDTH = 1;
+
 /** Bespoke accents for agent kinds that use standard ADS tokens rather than the agent-color registry. */
 var BESPOKE_AGENT_ACCENTS = {
   rovo: {
@@ -335,29 +342,34 @@ export var ContributorTagController = /*#__PURE__*/function () {
       var agent = isPrimaryAgent ? model.contributor : model.connectedContributor;
 
       // Hand-rolled avatar stack: `@atlaskit/avatar-group` cannot render below 24px and the tag uses
-      // 16px avatars.
+      // 16px avatars. A connected pair's person is smaller and overlaps the agent.
       var stack = model.connectedContributor ? [].concat(_toConsumableArray(agent ? [{
         contributor: agent,
-        stackIndex: 1
+        stackIndex: 0
       }] : []), _toConsumableArray(user ? [{
         contributor: user,
-        stackIndex: 0
+        ringWidth: CONNECTED_USER_RING_WIDTH,
+        size: CONNECTED_USER_AVATAR_SIZE,
+        stackIndex: 1
       }] : [])) : [{
         contributor: model.contributor
       }];
       stack.forEach(function (_ref6, index) {
         var contributor = _ref6.contributor,
+          ringWidth = _ref6.ringWidth,
+          size = _ref6.size,
           stackIndex = _ref6.stackIndex;
         var avatar = contributorAvatarRenderer({
           contributor: contributor,
           doc: doc,
           ringColor: background,
+          ringWidth: ringWidth,
+          size: size,
           stackIndex: stackIndex
         });
         if (index < stack.length - 1) {
-          // Sits the leading avatar of a connected pair flush against the one behind it, with
-          // no overlap and no extra gap.
-          avatar.element.style.setProperty('margin-inline-end', '0');
+          // The person's ring cuts a gap into the agent.
+          avatar.element.style.setProperty('margin-inline-end', "-".concat(CONNECTED_AVATAR_OVERLAP, "px"));
         }
         container.appendChild(avatar.element);
         _this5.avatars.push(avatar);

package/dist/types/pm-plugins/decorations/colorSchemes/attributions.d.ts

@@ -1,6 +1,6 @@
 import type { Change } from 'prosemirror-changeset';
 import { type DiffContributors, type DiffStepAttribution, type TagContributor } from '../../../showDiffPluginType';
-import { type AdsAccentColor, type ColorScheme } from './types';
+import { type AccentColor, type ColorScheme } from './types';
 export type DiffAttributionSpanData = DiffStepAttribution & {
     stepIndex: number;
 };
@@ -24,10 +24,10 @@ export declare const isAttributionColoringEnabled: (stepAttributions: Array<Diff
  * a tag only has to name one.
  */
 export declare const isContributorTagsEnabled: (stepAttributions: Array<DiffStepAttribution | undefined> | undefined, contributors: ResolvedDiffContributors | undefined) => boolean;
-export declare const createAttributionColorMap: (stepAttributions: Array<DiffStepAttribution | undefined>, contributors?: ResolvedDiffContributors) => Map<string, AdsAccentColor>;
+export declare const createAttributionColorMap: (stepAttributions: Array<DiffStepAttribution | undefined>, contributors?: ResolvedDiffContributors) => Map<string, AccentColor>;
 /**
  * Preserve overlap attribution outside Confluence version history. Within version history, a
  * recovery step's keyless spans must not inherit an overlapping NCS step's actor.
  */
 export declare const getAttributionKeyForChange: (change: Change, attributedChanges: Change[]) => string | undefined;
-export declare const getColorSchemeForChange: (change: Change, attributedChanges: Change[], attributionColors: Map<string, AdsAccentColor>, fallback: ColorScheme | undefined) => ColorScheme | undefined;
+export declare const getColorSchemeForChange: (change: Change, attributedChanges: Change[], attributionColors: Map<string, AccentColor>, fallback: ColorScheme | undefined) => ColorScheme | undefined;

package/dist/types/ui/ContributorTag/contributorAvatarRenderer.d.ts

@@ -13,10 +13,14 @@ export type ContributorAvatar = {
  * `box-shadow` on the circle and a second clipped hexagon behind the agent, since `box-shadow` is
  * cut away by `clip-path`.
  */
-export declare const contributorAvatarRenderer: ({ contributor, doc, ringColor, stackIndex, }: {
+export declare const contributorAvatarRenderer: ({ contributor, doc, ringColor, ringWidth, size, stackIndex, }: {
     contributor: TagContributor;
     doc: Document;
     ringColor: string;
-    /** Paints the leading avatar of a connected pair over the one it overlaps. */
+    /** Ring width in px around a person. */
+    ringWidth?: number;
+    /** Diameter in px. */
+    size?: number;
+    /** Paints above lower indexes: the person (1) over the agent (0) in a connected pair. */
     stackIndex?: number;
 }) => ContributorAvatar;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-show-diff",
-	"version": "30.0.10",
+	"version": "30.0.12",
 	"description": "ShowDiff plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -26,7 +26,7 @@
 	"atlaskit:src": "src/index.ts",
 	"dependencies": {
 		"@atlaskit/adf-schema": "^57.7.0",
-		"@atlaskit/agent-color": "^1.0.0",
+		"@atlaskit/agent-color": "^1.1.0",
 		"@atlaskit/avatar": "^30.1.0",
 		"@atlaskit/custom-steps": "^1.1.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^30.0.0",
@@ -38,9 +38,9 @@
 		"@atlaskit/editor-tables": "^3.2.0",
 		"@atlaskit/platform-feature-experiments": "^0.3.0",
 		"@atlaskit/platform-feature-flags": "^2.2.0",
-		"@atlaskit/primitives": "^22.6.0",
-		"@atlaskit/tmp-editor-statsig": "^259.0.0",
-		"@atlaskit/tokens": "^20.9.0",
+		"@atlaskit/primitives": "^22.7.0",
+		"@atlaskit/tmp-editor-statsig": "^260.0.0",
+		"@atlaskit/tokens": "^20.10.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^1.0.2",
 		"bind-event-listener": "^3.0.0",
@@ -53,8 +53,8 @@
 		"@atlaskit/button": "^25.7.0",
 		"@atlaskit/css": "^1.1.0",
 		"@atlaskit/dropdown-menu": "^21.1.0",
-		"@atlaskit/editor-common": "^134.9.0",
-		"@atlaskit/editor-core": "^242.0.0",
+		"@atlaskit/editor-common": "^134.10.0",
+		"@atlaskit/editor-core": "^242.2.0",
 		"@atlaskit/editor-json-transformer": "^10.0.0",
 		"@atlaskit/editor-plugins": "^17.0.0",
 		"@atlaskit/form": "^18.3.0",
@@ -65,14 +65,14 @@
 		"@atlassian/confluence-presets": "workspace:^",
 		"@atlassian/content-reconciliation": "^0.1.3506",
 		"@atlassian/editor-ai-injected-editors": "^46.0.0",
-		"@atlassian/editor-plugin-ai": "^84.7.0",
+		"@atlassian/editor-plugin-ai": "^84.8.0",
 		"@atlassian/structured-docs-types": "workspace:^",
 		"react": "^19.2.0",
 		"react-dom": "^19.2.0",
 		"react-intl": "^7.0.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^134.9.0",
+		"@atlaskit/editor-common": "^134.10.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"