@atlaskit/editor-plugin-show-diff 14.5.1 → 15.0.0

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

@@ -1,6 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { PARTICIPANT_COLOR_SCHEMES } from './types';
+
 /** Green insertions, red deletions. */
 export var traditionalScheme = {
   insertColor: 'green',
@@ -64,30 +66,15 @@ var createAttributionScheme = function createAttributionScheme(color) {
     deletedCellColor: color
   });
 };
+var attributionColorSchemes = Object.fromEntries(PARTICIPANT_COLOR_SCHEMES.map(function (color) {
+  return [color, createAttributionScheme(color)];
+}));
 
 /** Maps public schemes and attribution-only participant slots to their data objects. */
-export var colorSchemeRegistry = {
-  'red-bolder': createAttributionScheme('red-bolder'),
-  'blue-bolder': createAttributionScheme('blue-bolder'),
-  'green-bolder': createAttributionScheme('green-bolder'),
-  'yellow-bolder': createAttributionScheme('yellow-bolder'),
-  'purple-bolder': createAttributionScheme('purple-bolder'),
-  'magenta-bolder': createAttributionScheme('magenta-bolder'),
-  'teal-bolder': createAttributionScheme('teal-bolder'),
-  'orange-bolder': createAttributionScheme('orange-bolder'),
-  'lime-bolder': createAttributionScheme('lime-bolder'),
-  'gray-bolder': createAttributionScheme('gray-bolder'),
-  'blue-subtle': createAttributionScheme('blue-subtle'),
-  'red-subtle': createAttributionScheme('red-subtle'),
-  'orange-subtle': createAttributionScheme('orange-subtle'),
-  'yellow-subtle': createAttributionScheme('yellow-subtle'),
-  'green-subtle': createAttributionScheme('green-subtle'),
-  'teal-subtle': createAttributionScheme('teal-subtle'),
-  'purple-subtle': createAttributionScheme('purple-subtle'),
-  'magenta-subtle': createAttributionScheme('magenta-subtle'),
+export var colorSchemeRegistry = _objectSpread(_objectSpread({}, attributionColorSchemes), {}, {
   traditional: traditionalScheme,
   standard: standardScheme
-};
+});
 
 /** Attribution accents are impossible in the refactor-off cohort; fall back defensively. */
 export var getLegacyColorScheme = function getLegacyColorScheme(colorScheme) {

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

@@ -1,16 +1,14 @@
 /** Schemes consumers may explicitly request through the show-diff API. */
 
 /** Attribution-only participant slots selected by the plugin, never by consumers. */
-export var PARTICIPANT_COLOR_SCHEMES = ['red-bolder', 'blue-bolder', 'green-bolder', 'yellow-bolder', 'purple-bolder', 'magenta-bolder', 'teal-bolder', 'orange-bolder', 'lime-bolder', 'gray-bolder', 'blue-subtle', 'red-subtle', 'orange-subtle', 'yellow-subtle', 'green-subtle', 'teal-subtle', 'purple-subtle', 'magenta-subtle'];
+export var PARTICIPANT_COLOR_SCHEMES = ['red', 'blue', 'green', 'yellow', 'purple', 'magenta', 'teal', 'orange', 'lime', 'gray'];
 
 /** ADS accent hues used by the public and participant colour schemes. */
 
 /** A public scheme or an attribution participant slot resolved internally for one change. */
 
-/** A colour value that the factory expands into a complete set of diff-safe ADS tokens. */
-
 /**
- * A show-diff colour scheme. Colour fields are ADS hues or shared participant slots that
- * `factory.ts` expands into token paths; the rest encode structural differences no colour can
- * express. Ring widths, padding, radius and pointer-events are fixed in the factory, not per scheme.
+ * A show-diff colour scheme. Colour fields are ADS hues that `factory.ts` expands into token paths;
+ * the rest encode structural differences no colour can express. Ring widths, padding, radius and
+ * pointer-events are fixed in the factory, not per scheme.
  */

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

@@ -18,7 +18,6 @@ import { resolveCellOverlayStyleLegacy, resolveDeletedRowStyleLegacy } from './c
 import { buildDiffDecorationSpec } from './decorationKeys';
 import { findSafeInsertPos } from './utils/findSafeInsertPos';
 import { applyCellEdgeAttrs, getRowCellEdgeAttrs, getTableTopAndBottomCellEdgeAttrs } from './utils/tableCellEdgeAttrs';
-var DEFAULT_COLOR_SCHEME = 'standard';
 /**
  * Extracts information about deleted table rows from a change
  */
@@ -130,7 +129,7 @@ var isEmptyRow = function isEmptyRow(rowNode) {
  */
 var createChangedRowDOM = function createChangedRowDOM(rowNode, cellEdgeAttrs, nodeViewSerializer, colorScheme, isInserted, diffType) {
   var tr = document.createElement('tr');
-  var colors = colorSchemeRegistry[colorScheme !== null && colorScheme !== void 0 ? colorScheme : DEFAULT_COLOR_SCHEME];
+  var colors = colorSchemeRegistry[colorScheme !== null && colorScheme !== void 0 ? colorScheme : 'standard'];
 
   // Inserted rows keep their natural styling; the row strikethrough is deletions only.
   if (!isExtendedEnabled(diffType) || !isInserted) {

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

@@ -1,12 +1,11 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-import { createElement } from 'react';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
-import { ContributorTagWidget } from '../../ui/ContributorTag/ContributorTagWidget';
+import { ContributorTagController } from '../../ui/ContributorTag/contributorTagController';
 import { clampAnchorPosIntoCell } from './createAnchorDecorationWidgets';
-import { buildContributorTagDecorationSpec, DecorationFamily } from './decorationKeys';
+import { buildContributorTagDecorationSpec } from './decorationKeys';
 
 /** Marks the host element of one tag, so a tag can be found in the document by its own diff. */
 export var CONTRIBUTOR_TAG_HOST_ATTRIBUTE = 'data-contributor-tag-host';
@@ -17,23 +16,19 @@ var isContributorTagWidgetEnabled = function isContributorTagWidgetEnabled() {
 };
 
 /**
- * Everything a tag needs to mount itself into the document, plumbed down from the plugin. Absent in
+ * Everything a tag needs to draw itself into the document, plumbed down from the plugin. Absent in
  * unit tests that build decorations directly: the hosts are still emitted, they just stay empty.
  */
 
 /** A mounted tag, so whoever emitted the host can take it down again. */
 
 /**
- * Unique per mount rather than per diff, because ProseMirror draws a replacement widget before it
- * destroys the widget being replaced: on a shared key the outgoing widget's `destroy` would
- * unregister the incoming widget's portal.
- */
-var nextContributorTagPortalId = 0;
-
-/**
- * Renders the tag into `host` through the editor's portal provider, the way the rest of the editor
- * mounts React into decorations. The tag resolves its own model from plugin state, so a redraw of
- * the host re-parents the tag instead of stranding it, and `isActive` changes arrive as a re-render.
+ * Draws the tag into `host`. The tag resolves its own model from plugin state, so a redraw of the
+ * host re-parents the tag instead of stranding it, and `isActive` changes arrive as an update.
+ *
+ * Each mount owns its own controller and DOM, so when ProseMirror draws a replacement widget before
+ * destroying the one it replaces, the outgoing `destroy` cannot take the incoming tag down with it
+ * (EDITOR-8702).
  */
 export var mountContributorTag = function mountContributorTag(_ref) {
   var diffId = _ref.diffId,
@@ -42,24 +37,14 @@ export var mountContributorTag = function mountContributorTag(_ref) {
   if (!mountContext) {
     return undefined;
   }
-  var api = mountContext.api,
-    getEditorRoot = mountContext.getEditorRoot,
-    portalProviderAPI = mountContext.portalProviderAPI;
-  var key = "".concat(DecorationFamily.contributorTag, "-").concat(diffId, "-").concat(nextContributorTagPortalId++);
-  portalProviderAPI.render(function () {
-    return /*#__PURE__*/createElement(ContributorTagWidget, {
-      api: api,
-      diffId: diffId,
-      getEditorRoot: getEditorRoot
-    });
-  }, host, key);
-  return {
-    key: key,
-    portalProviderAPI: portalProviderAPI
-  };
+  var controller = new ContributorTagController(_objectSpread(_objectSpread({}, mountContext), {}, {
+    diffId: diffId
+  }));
+  controller.mount(host);
+  return controller;
 };
 export var unmountContributorTag = function unmountContributorTag(mount) {
-  mount === null || mount === void 0 || mount.portalProviderAPI.remove(mount.key);
+  mount === null || mount === void 0 || mount.destroy();
 };
 
 /**

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

@@ -15,9 +15,8 @@ import { buildDiffDecorationSpec } from './decorationKeys';
 var displayNoneStyle = convertToInlineCss({
   display: 'none'
 });
-var DEFAULT_COLOR_SCHEME = 'standard';
 var getColorScheme = function getColorScheme(colorScheme) {
-  return colorSchemeRegistry[colorScheme !== null && colorScheme !== void 0 ? colorScheme : DEFAULT_COLOR_SCHEME];
+  return colorSchemeRegistry[colorScheme !== null && colorScheme !== void 0 ? colorScheme : 'standard'];
 };
 
 /**

package/dist/esm/pm-plugins/decorations/utils/getAttrChangeRanges.js

@@ -4,11 +4,9 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import isEqual from 'lodash/isEqual';
 import omit from 'lodash/omit';
 import { SetAttrsStep } from '@atlaskit/adf-schema/steps/set-attrs';
-import { isExperimentEnabled } from '@atlaskit/editor-common/deprecated-platform-feature-experiments';
 import { getBaseNodeTypeName } from '@atlaskit/editor-common/utils/node-type-utils';
 import { AttrStep } from '@atlaskit/editor-prosemirror/transform';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
-import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { getRequiredIncludedDiffableAttrs, isDiffableAttr } from './diffableAttrs';
 var filterUndefined = function filterUndefined(x) {
   return !!x;
@@ -79,26 +77,9 @@ export var getAttrChangeRanges = function getAttrChangeRanges(doc, attrStepConte
     var nodeAtPos = doc.nodeAt(finalPos);
     var originalNodeAtPos = originalPos === undefined ? null : originalDoc.nodeAt(originalPos);
 
-    // date node: timestamp attribute change — highlight the date node itself (inline)
-    if (attrsToCheck.some(function (v) {
-      return dateAttrs.includes(v);
-    }) && (nodeAtPos === null || nodeAtPos === void 0 ? void 0 : nodeAtPos.type.name) === 'date' && !isExperimentEnabled('platform_editor_improve_inline_diffs', function () {
-      return expValEquals('platform_editor_improve_inline_diffs', 'isEnabled', true);
-    })) {
-      return {
-        fromB: finalPos,
-        toB: finalPos + nodeAtPos.nodeSize,
-        isInline: true,
-        inlineNodeName: 'date'
-      };
-    }
-
-    // The following inline node attr changes are gated behind platform_editor_improve_inline_diffs.
     // The changeset path (createDecorationsForChange) handles the deletion widget via
     // prosemirror-changeset; we only need to add the inline insertion highlight here.
-    if (isExperimentEnabled('platform_editor_improve_inline_diffs', function () {
-      return expValEquals('platform_editor_improve_inline_diffs', 'isEnabled', true);
-    }) && nodeAtPos) {
+    if (nodeAtPos) {
       var nodeName = nodeAtPos.type.name;
       if (isInlineAttrChangeNodeName(nodeName)) {
         var watchedAttrs = inlineNodeAttrMap[nodeName];
@@ -175,12 +156,8 @@ export var getAttrChangeRanges = function getAttrChangeRanges(doc, attrStepConte
   // Deduplicate by node position: multiple AttrSteps on the same node
   // (e.g. setNodeAttribute(pos, 'text', ...) + setNodeAttribute(pos, 'color', ...))
   // should produce only one decoration, not one per step.
-  // Gated behind the same experiment as the inline node attr changes that introduced
-  // the possibility of multiple ranges for the same node position.
   .filter(function (range, i, arr) {
-    return !isExperimentEnabled('platform_editor_improve_inline_diffs', function () {
-      return expValEquals('platform_editor_improve_inline_diffs', 'isEnabled', true);
-    }) || arr.findIndex(function (r) {
+    return arr.findIndex(function (r) {
       return r.fromB === range.fromB;
     }) === i;
   });

package/dist/esm/pm-plugins/decorations/utils/wrapBlockNodeViewStyles.js

@@ -19,9 +19,8 @@ import { isExtendedEnabled } from '../../isExtendedEnabled';
 import { buildAddedCellOverlayRoundedStyle, buildAddedCellOverlayStyle, buildAddedCellOverlayStyleNew, buildDeletedCellOverlayRoundedStyle, buildDeletedCellOverlayStyle, buildDeletedInlineContentStyle, buildDeletedInlineContentStyleExtended, buildDeletedLozengeActiveStyle, buildDeletedLozengeStyle, buildDeletedNodeCSSVariables, buildDeletedQuoteNodeWithLozengeStyle, buildDeletedStrikethroughLine, buildDeletedWrappedBlockOutline, buildInsertedBlockNodeStyle, buildInsertedInlineStyle, buildInsertStyleInBlockExtended, buildInsertStyleInBlockExtendedNoUnderline, buildInsertStyleNode } from '../colorSchemes/factory';
 import { colorSchemeRegistry, getLegacyColorScheme, standardScheme } from '../colorSchemes/schemes';
 import { getChangedContentStyleLegacy, getChangedNodeStyleLegacy, getDeletedContentStyleLegacy, getDeletedContentStyleUnboundedLegacy, getInsertedContentStyleLegacy, hasRestingDeletedRingLegacy, resolveCellOverlayStyleLegacy, resolveNestedInsertedNodeStyleLegacy, resolveRemovedLozengeStyleLegacy } from './wrapBlockNodeViewStyles.legacy';
-var DEFAULT_COLOR_SCHEME = 'standard';
 var getColorScheme = function getColorScheme(colorScheme) {
-  return colorSchemeRegistry[colorScheme !== null && colorScheme !== void 0 ? colorScheme : DEFAULT_COLOR_SCHEME];
+  return colorSchemeRegistry[colorScheme !== null && colorScheme !== void 0 ? colorScheme : 'standard'];
 };
 
 /**

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

@@ -34,7 +34,7 @@ var dropOrphanedContributorTags = function dropOrphanedContributorTags(contribut
   });
   return liveTags.length === contributorTags.length ? contributorTags : liveTags;
 };
-export var createPlugin = function createPlugin(config, getIntl, api, portalProviderAPI, onEditorView) {
+export var createPlugin = function createPlugin(config, getIntl, api, onEditorView) {
   enforceCustomStepRegisters();
   var nodeViewSerializer = new NodeViewSerializer({});
   var setNodeViewSerializer = function setNodeViewSerializer(editorView) {
@@ -51,14 +51,14 @@ export var createPlugin = function createPlugin(config, getIntl, api, portalProv
    * lifecycle, which decorations are calculated independently of.
    */
   var currentEditorView;
-  var tagMountContext = portalProviderAPI ? {
+  var tagMountContext = {
     api: api,
     getEditorRoot: function getEditorRoot() {
       var _currentEditorView$do, _currentEditorView;
       return (_currentEditorView$do = (_currentEditorView = currentEditorView) === null || _currentEditorView === void 0 ? void 0 : _currentEditorView.dom) !== null && _currentEditorView$do !== void 0 ? _currentEditorView$do : null;
     },
-    portalProviderAPI: portalProviderAPI
-  } : undefined;
+    getIntl: getIntl
+  };
   return new SafePlugin({
     key: showDiffPluginKey,
     state: {

package/dist/esm/showDiffPlugin.js

@@ -98,12 +98,11 @@ export var showDiffPlugin = function showDiffPlugin(_ref3) {
     pmPlugins: function pmPlugins() {
       return [{
         name: 'showDiffPlugin',
-        // Contributor tags mount into their own decoration widgets through the portal
-        // provider, the way the rest of the editor renders React into decorations.
+        // Contributor tags draw themselves into their own decoration widgets — plain DOM, so
+        // no portal provider is needed here.
         plugin: function plugin(_ref8) {
-          var getIntl = _ref8.getIntl,
-            nodeViewPortalProviderAPI = _ref8.nodeViewPortalProviderAPI;
-          return createPlugin(config, getIntl, api, nodeViewPortalProviderAPI, setEditorView);
+          var getIntl = _ref8.getIntl;
+          return createPlugin(config, getIntl, api, setEditorView);
         }
       }];
     },

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

@@ -0,0 +1,115 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
+export var CONTRIBUTOR_TAG_TESTID = 'diff-contributor-tag';
+export var CONTRIBUTOR_TAG_NAME_TESTID = 'diff-contributor-tag-name';
+
+/**
+ * Floor for the tag width (~one 16px avatar plus padding), so the highlight-width clamp cannot
+ * collapse the box on a very short highlight.
+ */
+export var MIN_TAG_WIDTH = '28px';
+
+// Positioned against the host widget its decoration renders on the change's first character:
+// `bottom: 100%` lifts the tag onto the line above, `inset-inline-start` starts it on that
+// character.
+var constraintStyle = convertToInlineCss({
+  display: 'block',
+  position: 'absolute',
+  bottom: '100%',
+  insetInlineStart: 0,
+  minWidth: 0,
+  // The tag may cover surrounding text, so it has to paint over it. Matches `akEditorUnitZIndex`.
+  zIndex: 1,
+  // It renders inside the document and it is not content: dragging a selection across the change
+  // must not select it.
+  userSelect: 'none'
+});
+
+// `backgroundColor`, `borderBottomColor` and the visibility come from the model, and are set by the
+// controller.
+var tagStyle = convertToInlineCss({
+  display: 'inline-flex',
+  alignItems: 'center',
+  gap: "var(--ds-space-050, 4px)",
+  // Never wider than the highlight; overflow is ellipsised on the name below.
+  maxWidth: '100%',
+  minWidth: 0,
+  overflow: 'hidden',
+  paddingInline: "var(--ds-space-050, 4px)",
+  paddingBlock: "var(--ds-space-025, 2px)",
+  borderRadius: "var(--ds-radius-small, 4px)",
+  borderBottomStyle: 'solid',
+  borderBottomWidth: "var(--ds-border-width-selected, 2px)",
+  boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #1E1F2126, 0px 0px 1px #1E1F214f)",
+  font: "var(--ds-font-body-small, normal 400 12px/16px \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
+  whiteSpace: 'nowrap',
+  boxSizing: 'border-box'
+});
+var avatarsStyle = convertToInlineCss({
+  display: 'inline-flex',
+  alignItems: 'center',
+  flexShrink: 0
+});
+var nameStyle = convertToInlineCss({
+  display: 'block',
+  minWidth: 0,
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap'
+});
+
+/** `@atlaskit/visually-hidden`, inlined. */
+var srLabelStyle = convertToInlineCss({
+  width: '1px',
+  height: '1px',
+  padding: 0,
+  position: 'absolute',
+  border: 0,
+  clip: 'rect(1px, 1px, 1px, 1px)',
+  overflow: 'hidden',
+  userSelect: 'none',
+  whiteSpace: 'nowrap'
+});
+var createSpan = function createSpan(doc, style) {
+  var attributes = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  var span = doc.createElement('span');
+  span.setAttribute('style', style);
+  for (var _i = 0, _Object$entries = Object.entries(attributes); _i < _Object$entries.length; _i++) {
+    var _Object$entries$_i = _slicedToArray(_Object$entries[_i], 2),
+      name = _Object$entries$_i[0],
+      value = _Object$entries$_i[1];
+    span.setAttribute(name, value);
+  }
+  return span;
+};
+/**
+ * The tag's markup, with no model applied — see `ContributorTagController`.
+ *
+ * Built element by element rather than through `DOMSerializer.renderSpec`, which returns `Node` and
+ * would need a cast per reference below.
+ */
+export var buildContributorTagDom = function buildContributorTagDom(doc) {
+  var root = createSpan(doc, constraintStyle);
+  var tag = createSpan(doc, tagStyle, {
+    'data-testid': CONTRIBUTOR_TAG_TESTID,
+    // Deliberately no `aria-label`: it would be announced ahead of the element's contents, but
+    // design requires the contributor *after* the change — hence the visually hidden label.
+    role: 'note',
+    // Focusable so keyboard and screen-reader users can reach the tag and its tooltip.
+    tabindex: '0'
+  });
+  var avatars = createSpan(doc, avatarsStyle);
+  var name = createSpan(doc, nameStyle, {
+    'data-testid': CONTRIBUTOR_TAG_NAME_TESTID
+  });
+  var srLabel = createSpan(doc, srLabelStyle);
+  tag.append(avatars, name, srLabel);
+  root.appendChild(tag);
+  return {
+    avatars: avatars,
+    name: name,
+    root: root,
+    srLabel: srLabel,
+    tag: tag
+  };
+};

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

@@ -0,0 +1,135 @@
+import { bind } from 'bind-event-listener';
+import { AVATAR_SIZES } from '@atlaskit/avatar/avatar-sizes';
+import { BORDER_WIDTH } from '@atlaskit/avatar/constants/default';
+import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
+import { getContributorTagIcon } from './contributorTagIcons';
+
+/** The size `@atlaskit/avatar`'s `xxsmall` rendered at. */
+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")
+});
+var shapeStyle = convertToInlineCss({
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  boxSizing: 'border-box',
+  width: "".concat(AVATAR_SIZE, "px"),
+  height: "".concat(AVATAR_SIZE, "px"),
+  overflow: 'hidden'
+});
+var imageStyle = convertToInlineCss({
+  display: 'block',
+  width: '100%',
+  height: '100%',
+  objectFit: 'cover'
+});
+
+/** The `@atlaskit/avatar` image fallback: a subtle glyph on a tinted box. */
+var personFallbackStyle = convertToInlineCss({
+  width: '100%',
+  height: '100%',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  backgroundColor: "var(--ds-background-accent-gray-subtler, #DDDEE1)",
+  color: "var(--ds-icon-subtle, #505258)"
+});
+/**
+ * One 16px avatar for a contributor: a circle for a person, a hexagon for an agent.
+ *
+ * Mirrors `mentionAvatarRenderer` — a bare `<img>` with a glyph fallback bound to `error`, and the
+ * hexagon cut with `clip-path`. The ring `@atlaskit/avatar` drew from `borderColor` is a
+ * `box-shadow` on the circle and a second clipped hexagon behind the agent, since `box-shadow` is
+ * cut away by `clip-path`.
+ */
+export var contributorAvatarRenderer = function contributorAvatarRenderer(_ref) {
+  var contributor = _ref.contributor,
+    doc = _ref.doc,
+    ringColor = _ref.ringColor,
+    stackIndex = _ref.stackIndex;
+  var isAgent = contributor.kind === 'agent';
+  var element = doc.createElement('span');
+  element.setAttribute('style', boxStyle);
+  // Decorative: the tag names its contributors in the visually hidden label its screen-reader
+  // announcement comes from.
+  element.setAttribute('aria-hidden', 'true');
+  if (stackIndex !== undefined) {
+    element.style.setProperty('z-index', String(stackIndex));
+  }
+  var shape = doc.createElement('span');
+  shape.setAttribute('style', shapeStyle);
+  element.appendChild(shape);
+  if (isAgent) {
+    element.style.setProperty('clip-path', HEXAGON_CLIP_PATH);
+    shape.style.setProperty('clip-path', HEXAGON_CLIP_PATH);
+  } else {
+    shape.style.setProperty('border-radius', "var(--ds-radius-full, 9999px)");
+  }
+  var image;
+  var unbindImageError;
+  var showFallback = function showFallback() {
+    var _unbindImageError, _image;
+    (_unbindImageError = unbindImageError) === null || _unbindImageError === void 0 || _unbindImageError();
+    unbindImageError = undefined;
+    (_image = image) === null || _image === void 0 || _image.remove();
+    image = undefined;
+    if (!isAgent) {
+      var fallback = doc.createElement('span');
+      fallback.setAttribute('style', personFallbackStyle);
+      fallback.appendChild(getContributorTagIcon('person', doc));
+      shape.appendChild(fallback);
+      return;
+    }
+    shape.appendChild(getContributorTagIcon(contributor.agentKind === 'rovo' ? 'rovoHex' : 'aiBot', doc));
+  };
+  if (contributor.avatarUrl) {
+    image = doc.createElement('img');
+    image.alt = '';
+    image.decoding = 'async';
+    image.draggable = false;
+    image.loading = 'lazy';
+    image.setAttribute('style', imageStyle);
+    unbindImageError = bind(image, {
+      type: 'error',
+      listener: showFallback
+    });
+    shape.appendChild(image);
+    image.src = contributor.avatarUrl;
+  } else {
+    showFallback();
+  }
+  var setRingColor = function setRingColor(nextRingColor) {
+    if (isAgent) {
+      element.style.setProperty('background', nextRingColor);
+      // Shows through wherever the artwork is transparent, as the avatar background did.
+      shape.style.setProperty('background', nextRingColor);
+      return;
+    }
+    shape.style.setProperty('box-shadow', "0 0 0 ".concat(AVATAR_RING_WIDTH, "px ").concat(nextRingColor));
+    shape.style.setProperty('background', nextRingColor);
+  };
+  setRingColor(ringColor);
+  return {
+    destroy: function destroy() {
+      var _unbindImageError2;
+      (_unbindImageError2 = unbindImageError) === null || _unbindImageError2 === void 0 || _unbindImageError2();
+      unbindImageError = undefined;
+      element.remove();
+    },
+    element: element,
+    setRingColor: setRingColor
+  };
+};