@atlaskit/editor-plugin-show-diff 30.0.11 → 30.0.13

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/editor-plugin-show-diff
 
+## 30.0.13
+
+### Patch Changes
+
+- Updated dependencies
+
+## 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

package/compass.yml

@@ -35,7 +35,7 @@ customFields:
     value: true
   - name: Reviewer Selection Mechanism
     type: text
-    value: random(2)
+    value: randomTZIgnored(2)
   - name: Required Reviewer Approvals
     type: number
     value: 1

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/cjs/ui/IndicatorBar/IndicatorBar.js

@@ -1,4 +1,4 @@
-/* IndicatorBar.tsx generated by @compiled/babel-plugin v3.0.2 */
+/* IndicatorBar.tsx generated by @compiled/babel-plugin v3.0.4 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");

package/dist/cjs/ui/IndicatorBar/IndicatorBarContentComponent.js

@@ -1,4 +1,4 @@
-/* IndicatorBarContentComponent.tsx generated by @compiled/babel-plugin v3.0.2 */
+/* IndicatorBarContentComponent.tsx generated by @compiled/babel-plugin v3.0.4 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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/es2019/ui/IndicatorBar/IndicatorBar.js

@@ -1,4 +1,4 @@
-/* IndicatorBar.tsx generated by @compiled/babel-plugin v3.0.2 */
+/* IndicatorBar.tsx generated by @compiled/babel-plugin v3.0.4 */
 import "./IndicatorBar.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/es2019/ui/IndicatorBar/IndicatorBarContentComponent.js

@@ -1,4 +1,4 @@
-/* IndicatorBarContentComponent.tsx generated by @compiled/babel-plugin v3.0.2 */
+/* IndicatorBarContentComponent.tsx generated by @compiled/babel-plugin v3.0.4 */
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/useSharedPluginStateWithSelector';

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/esm/ui/IndicatorBar/IndicatorBar.js

@@ -1,4 +1,4 @@
-/* IndicatorBar.tsx generated by @compiled/babel-plugin v3.0.2 */
+/* IndicatorBar.tsx generated by @compiled/babel-plugin v3.0.4 */
 import "./IndicatorBar.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/esm/ui/IndicatorBar/IndicatorBarContentComponent.js

@@ -1,4 +1,4 @@
-/* IndicatorBarContentComponent.tsx generated by @compiled/babel-plugin v3.0.2 */
+/* IndicatorBarContentComponent.tsx generated by @compiled/babel-plugin v3.0.4 */
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/useSharedPluginStateWithSelector';

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.11",
+	"version": "30.0.13",
 	"description": "ShowDiff plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -39,8 +39,8 @@
 		"@atlaskit/platform-feature-experiments": "^0.3.0",
 		"@atlaskit/platform-feature-flags": "^2.2.0",
 		"@atlaskit/primitives": "^22.7.0",
-		"@atlaskit/tmp-editor-statsig": "^260.0.0",
-		"@atlaskit/tokens": "^20.10.0",
+		"@atlaskit/tmp-editor-statsig": "^261.0.0",
+		"@atlaskit/tokens": "^20.11.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^1.0.2",
 		"bind-event-listener": "^3.0.0",
@@ -50,11 +50,11 @@
 	},
 	"devDependencies": {
 		"@atlaskit/adf-utils": "^20.9.0",
-		"@atlaskit/button": "^25.7.0",
+		"@atlaskit/button": "^25.8.0",
 		"@atlaskit/css": "^1.1.0",
-		"@atlaskit/dropdown-menu": "^21.1.0",
-		"@atlaskit/editor-common": "^134.9.0",
-		"@atlaskit/editor-core": "^242.1.0",
+		"@atlaskit/dropdown-menu": "^21.3.0",
+		"@atlaskit/editor-common": "^134.16.0",
+		"@atlaskit/editor-core": "^242.3.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.13.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.16.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"