@atlaskit/editor-plugin-show-diff 16.0.10 → 16.0.12

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-show-diff
 
+## 16.0.12
+
+### Patch Changes
+
+- [`c3d0cc90fb8a8`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c3d0cc90fb8a8) -
+  [ux] A contributor tag that has been clicked no longer stays visible after the pointer has left
+  the change it captions. Behind `confluence_ncs_step_diffing_version_history`.
+- [`e6656f3612782`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e6656f3612782) -
+  Use the shared agent icon for external diff contributors.
+- Updated dependencies
+
+## 16.0.11
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 16.0.10
 
 ### Patch Changes

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

@@ -104,7 +104,7 @@ var contributorAvatarRenderer = exports.contributorAvatarRenderer = function con
       shape.appendChild(fallback);
       return;
     }
-    shape.appendChild((0, _contributorTagIcons.getContributorTagIcon)((_AGENT_KIND_ICONS = AGENT_KIND_ICONS[(_contributor$agentKin = contributor.agentKind) !== null && _contributor$agentKin !== void 0 ? _contributor$agentKin : 'external']) !== null && _AGENT_KIND_ICONS !== void 0 ? _AGENT_KIND_ICONS : 'aiBot', doc));
+    shape.appendChild((0, _contributorTagIcons.getContributorTagIcon)((_AGENT_KIND_ICONS = AGENT_KIND_ICONS[(_contributor$agentKin = contributor.agentKind) !== null && _contributor$agentKin !== void 0 ? _contributor$agentKin : 'external']) !== null && _AGENT_KIND_ICONS !== void 0 ? _AGENT_KIND_ICONS : 'aiAgent', doc));
   };
   if (contributor.avatarUrl) {
     image = doc.createElement('img');

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

@@ -40,6 +40,18 @@ var setRevealed = function setRevealed(tag, isVisible) {
   tag.toggleAttribute(_buildContributorTagDom.CONTRIBUTOR_TAG_REVEALED_ATTRIBUTE, isVisible);
 };
 
+/**
+ * Whether the browser is showing this focus, which is the same question its focus ring answers — see
+ * the `:focus-visible` rule in `contributorTagStyles`.
+ *
+ * Clicking the tag focuses it, so a tag held up by focus alone stayed on screen after the pointer had
+ * left, until something else took focus (EDITOR-9046). Measured in Chromium: a click leaves this
+ * `false` and `Tab` leaves it `true`, so the keyboard focus stop is unaffected.
+ */
+var isFocusVisible = function isFocusVisible(tag) {
+  return tag.matches(':focus-visible');
+};
+
 /**
  * Whether flipping the tag's state will actually run a transition on it.
  *
@@ -252,6 +264,7 @@ var ContributorTagController = exports.ContributorTagController = /*#__PURE__*/f
   }, {
     key: "bindTag",
     value: function bindTag(_ref4) {
+      var _this3 = this;
       var tag = _ref4.tag;
       // `mouseover`/`mouseout` rather than the enter/leave pair, because they are what fire as the
       // pointer moves between the tag's own children. Both are keyed on the tag, so those moves add
@@ -262,9 +275,13 @@ var ContributorTagController = exports.ContributorTagController = /*#__PURE__*/f
       }, {
         type: 'mouseout',
         listener: this.trackRevealSource(tag, false)
-      }, {
+      },
+      // Only a focus the browser is showing holds the tag up — see `isFocusVisible`.
+      {
         type: 'focus',
-        listener: this.trackRevealSource(FOCUS_SOURCE, true)
+        listener: function listener() {
+          return _this3.setRevealSource(FOCUS_SOURCE, isFocusVisible(tag));
+        }
       }, {
         type: 'blur',
         listener: this.trackRevealSource(FOCUS_SOURCE, false)
@@ -275,21 +292,26 @@ var ContributorTagController = exports.ContributorTagController = /*#__PURE__*/f
   }, {
     key: "trackRevealSource",
     value: function trackRevealSource(source, isRevealing) {
-      var _this3 = this;
+      var _this4 = this;
       return function () {
-        if (isRevealing) {
-          _this3.revealSources.add(source);
-        } else {
-          _this3.revealSources.delete(source);
-        }
-        _this3.applyVisibility();
+        return _this4.setRevealSource(source, isRevealing);
       };
     }
+  }, {
+    key: "setRevealSource",
+    value: function setRevealSource(source, isRevealing) {
+      if (isRevealing) {
+        this.revealSources.add(source);
+      } else {
+        this.revealSources.delete(source);
+      }
+      this.applyVisibility();
+    }
   }, {
     key: "renderAvatars",
     value: function renderAvatars(model) {
       var _this$dom,
-        _this4 = this;
+        _this5 = this;
       var _ref5 = (_this$dom = this.dom) !== null && _this$dom !== void 0 ? _this$dom : {},
         container = _ref5.avatars;
       if (!container) {
@@ -333,7 +355,7 @@ var ContributorTagController = exports.ContributorTagController = /*#__PURE__*/f
           avatar.element.style.setProperty('margin-inline-end', "var(--ds-space-negative-050, -4px)");
         }
         container.appendChild(avatar.element);
-        _this4.avatars.push(avatar);
+        _this5.avatars.push(avatar);
       });
     }
   }, {
@@ -484,7 +506,7 @@ var ContributorTagController = exports.ContributorTagController = /*#__PURE__*/f
     key: "syncHighlightBindings",
     value: function syncHighlightBindings(model) {
       var _model$linkedDiffIds,
-        _this5 = this;
+        _this6 = this;
       var diffId = this.options.diffId;
       var selector = [diffId].concat((0, _toConsumableArray2.default)((_model$linkedDiffIds = model.linkedDiffIds) !== null && _model$linkedDiffIds !== void 0 ? _model$linkedDiffIds : [])).map(function (id) {
         return "[data-diff-id=\"".concat(id, "\"]");
@@ -499,8 +521,8 @@ var ContributorTagController = exports.ContributorTagController = /*#__PURE__*/f
       // not be in the document yet. A microtask lands once that pass has finished.
       var pendingBind = ++this.bindToken;
       queueMicrotask(function () {
-        if (!_this5.isDestroyed && pendingBind === _this5.bindToken) {
-          _this5.bindHighlightState(selector);
+        if (!_this6.isDestroyed && pendingBind === _this6.bindToken) {
+          _this6.bindHighlightState(selector);
         }
       });
     }
@@ -508,7 +530,7 @@ var ContributorTagController = exports.ContributorTagController = /*#__PURE__*/f
     key: "bindHighlightState",
     value: function bindHighlightState(selector) {
       var _this$options$getEdit,
-        _this6 = this;
+        _this7 = this;
       // Scoped to this editor's content root, so a tag can only ever bind to the decorations its own
       // plugin instance rendered — another editor on the page, or one nested inside this one, cannot
       // reveal this tag.
@@ -524,10 +546,10 @@ var ContributorTagController = exports.ContributorTagController = /*#__PURE__*/f
       this.unbindHighlights = this.highlightElements.map(function (highlight) {
         return (0, _bindEventListener.bindAll)(highlight, [{
           type: 'mouseenter',
-          listener: _this6.trackRevealSource(highlight, true)
+          listener: _this7.trackRevealSource(highlight, true)
         }, {
           type: 'mouseleave',
-          listener: _this6.trackRevealSource(highlight, false)
+          listener: _this7.trackRevealSource(highlight, false)
         }]);
       });
       // The pointer may already be over a highlight by the time this binds, a draw pass after it

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

@@ -21,12 +21,20 @@ var PERSON_ICON_SVG = "<svg width=\"16\" height=\"16\" fill=\"none\" viewBox=\"0
 /** `@atlaskit/icon-lab/core/ai-bot`, at 12px so it fits inside the 16px hexagon. */
 var AI_BOT_ICON_SVG = "<svg width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 16 16\" role=\"presentation\" style=\"display:block\"><path fill=\"currentcolor\" d=\"M13 5.5a.5.5 0 0 0-.5-.5h-9a.5.5 0 0 0-.5.5V13a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5zm-6.5 2v3H5v-3zm4.5 0v3H9.5v-3zm3.5 1H16V10h-1.5v3a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2v-3H0V8.5h1.5v-3a2 2 0 0 1 2-2h3.75v-2H4V0h4a.75.75 0 0 1 .75.75V3.5h3.75a2 2 0 0 1 2 2z\"/></svg>";
 
+/**
+ * The glyph from `@atlaskit/icon/core/ai-agent`, at 12px so it fits inside the 16px hexagon.
+ * The icon package only exposes this as a React component; this tag is otherwise imperative DOM,
+ * so keep the generated glyph here rather than introducing a React render boundary.
+ */
+var AI_AGENT_ICON_SVG = "<svg width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 16 16\" role=\"presentation\" style=\"display:block\"><path fill=\"currentcolor\" fill-rule=\"evenodd\" d=\"M6.971.493a2 2 0 0 1 2.058 0l5 3A2 2 0 0 1 15 5.208v5.584a2 2 0 0 1-.971 1.715l-5 3a2 2 0 0 1-2.058 0l-5-3A2 2 0 0 1 1 10.792V5.208a2 2 0 0 1 .971-1.715zm1.286 1.286a.5.5 0 0 0-.514 0l-5 3a.5.5 0 0 0-.243.429v5.584a.5.5 0 0 0 .243.429l1.098.66a4.25 4.25 0 1 1 8.318 0l1.098-.66a.5.5 0 0 0 .243-.429V5.208a.5.5 0 0 0-.243-.429zM8 8.25a2.75 2.75 0 1 0 0 5.5 2.75 2.75 0 0 0 0-5.5\" clip-rule=\"evenodd\"/></svg>";
+
 /** `RovoHexIcon` from `@atlaskit/logo/rovo-hex/icon`, at the 16px `xxsmall` renders. */
 var ROVO_HEX_ICON_SVG = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" role=\"presentation\" style=\"display:block\"><path fill=\"#1868db\" fill-rule=\"evenodd\" d=\"m13.227 16.789-7.154 4.169-3.403-1.96a2.72 2.72 0 0 1-1.362-2.355V7.366c0-.973.518-1.87 1.361-2.354l6.044-3.487-.038.114a3.6 3.6 0 0 0-.172 1.088v9.278c0 1.274.68 2.45 1.786 3.085z\" clip-rule=\"evenodd\"/><path fill=\"#6a9a23\" fill-rule=\"evenodd\" d=\"m11.296 15.671-7.193 4.153 6.607 3.812a2.73 2.73 0 0 0 2.676.026l.048-.033a2.73 2.73 0 0 0 1.232-1.525 2.7 2.7 0 0 0 .127-.822v-3.594z\" clip-rule=\"evenodd\"/><path fill=\"#af59e1\" fill-rule=\"evenodd\" d=\"m21.477 5.003-4.404-2.539-5.904 4.89 2.69 1.556a3.56 3.56 0 0 1 1.785 3.086v9.277a3.6 3.6 0 0 1-.21 1.202l6.044-3.486a2.71 2.71 0 0 0 1.362-2.355V7.357c0-.97-.521-1.87-1.363-2.354\" clip-rule=\"evenodd\"/><path fill=\"#fca700\" fill-rule=\"evenodd\" d=\"M12.74 8.266 9.353 6.312V2.718c0-.283.044-.56.127-.821A2.73 2.73 0 0 1 10.71.372V.37a.4.4 0 0 0 .048-.033 2.73 2.73 0 0 1 2.676.026l6.499 3.75z\" clip-rule=\"evenodd\"/></svg>";
 
 /** ClaudeLogo from ai-mate/studio-browse-kit, inset to fit the agent hexagon. */
 var CLAUDE_ICON_SVG = "<svg width=\"12\" height=\"12\" viewBox=\"8 8 32 32\" role=\"presentation\" style=\"display:block\"><path fill=\"#FFFFFF\" d=\"M14.2785 29.274L20.5732 25.7445L20.6785 25.4369L20.5732 25.2669H20.2653L19.2122 25.2021L15.6152 25.105L12.4962 24.9755L9.47443 24.8136L8.71291 24.6517L8 23.7126L8.07291 23.2431L8.71291 22.8141L9.62835 22.895L11.6537 23.0326L14.6916 23.2431L16.8952 23.3726L20.16 23.7126H20.6785L20.7514 23.5022L20.5732 23.3726L20.4354 23.2431L17.2922 21.1141L13.8896 18.8636L12.1073 17.5684L11.1433 16.9127L10.6572 16.2975L10.4466 14.9537L11.3215 13.9904L12.4962 14.0713L12.7959 14.1523L13.9868 15.067L16.5306 17.0342L19.8522 19.4789L20.3382 19.8836L20.5327 19.746L20.557 19.6489L20.3382 19.2846L18.5316 16.0223L16.6035 12.7033L15.7448 11.3271L15.518 10.5014C15.437 10.1614 15.3803 9.87807 15.3803 9.52998L16.3767 8.17809L16.9276 8L18.2562 8.17809L18.8152 8.6638L19.6415 10.55L20.9782 13.5209L23.0522 17.5603L23.6597 18.7584L23.9838 19.8674L24.1053 20.2074H24.3159V20.0132L24.4861 17.7384L24.802 14.9456L25.1099 11.3514L25.2152 10.3395L25.7175 9.12522L26.7139 8.46952L27.4916 8.84189L28.1316 9.75664L28.0425 10.3476L27.6618 12.8166L26.9165 16.6861L26.4304 19.2765H26.7139L27.038 18.9527L28.3504 17.2122L30.5539 14.4599L31.5261 13.3671L32.6603 12.1609L33.3894 11.5861H34.7666L35.7792 13.0918L35.3256 14.6461L33.9079 16.4432L32.7332 17.9651L31.0481 20.2317L29.9949 22.045L30.0922 22.1907L30.3433 22.1665L34.1509 21.3569L36.2086 20.9846L38.6633 20.5636L39.7732 21.0817L39.8947 21.6079L39.4572 22.6845L36.8324 23.3322L33.7539 23.9474L29.1686 25.0321L29.1119 25.0726L29.1767 25.1536L31.2425 25.3478L32.1256 25.3964H34.2886L38.3149 25.6959L39.3681 26.3921L40 27.2421L39.8947 27.8897L38.2744 28.7154L36.0871 28.1973L30.9833 26.9831L29.2334 26.5459H28.9904V26.6916L30.4486 28.1164L33.122 30.5287L36.4678 33.6372L36.638 34.4063L36.2086 35.0134L35.7549 34.9486L32.8142 32.7387L31.68 31.743L29.1119 29.5816H28.9418V29.8082L29.5332 30.6744L32.6603 35.3696L32.8223 36.8105L32.5954 37.28L31.7853 37.5634L30.8942 37.4015L29.0633 34.8353L27.1757 31.9454L25.6527 29.3549L25.4663 29.4602L24.5671 39.1338L24.1458 39.6276L23.1737 40L22.3635 39.3848L21.9342 38.3891L22.3635 36.422L22.882 33.8558L23.3033 31.8158L23.6841 29.2821L23.9109 28.4402L23.8947 28.3835L23.7084 28.4078L21.7965 31.0306L18.8881 34.9567L16.5873 37.4177L16.0365 37.6362L15.0805 37.1424L15.1696 36.2601L15.7043 35.4748L18.8881 31.4273L20.8081 28.9178L22.0476 27.4688L22.0395 27.2583H21.9666L13.5089 32.7468L12.002 32.9411L11.3539 32.3339L11.4349 31.3382L11.7428 31.0144L14.2866 29.2659L14.2785 29.274Z\"/></svg>";
 var markup = {
+  aiAgent: AI_AGENT_ICON_SVG,
   aiBot: AI_BOT_ICON_SVG,
   claude: CLAUDE_ICON_SVG,
   person: PERSON_ICON_SVG,

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

@@ -1,4 +1,4 @@
-/* IndicatorBar.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* IndicatorBar.tsx generated by @compiled/babel-plugin v3.0.2 */
 "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.1 */
+/* IndicatorBarContentComponent.tsx generated by @compiled/babel-plugin v3.0.2 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

@@ -100,7 +100,7 @@ export const contributorAvatarRenderer = ({
       shape.appendChild(fallback);
       return;
     }
-    shape.appendChild(getContributorTagIcon((_AGENT_KIND_ICONS = AGENT_KIND_ICONS[(_contributor$agentKin = contributor.agentKind) !== null && _contributor$agentKin !== void 0 ? _contributor$agentKin : 'external']) !== null && _AGENT_KIND_ICONS !== void 0 ? _AGENT_KIND_ICONS : 'aiBot', doc));
+    shape.appendChild(getContributorTagIcon((_AGENT_KIND_ICONS = AGENT_KIND_ICONS[(_contributor$agentKin = contributor.agentKind) !== null && _contributor$agentKin !== void 0 ? _contributor$agentKin : 'external']) !== null && _AGENT_KIND_ICONS !== void 0 ? _AGENT_KIND_ICONS : 'aiAgent', doc));
   };
   if (contributor.avatarUrl) {
     image = doc.createElement('img');

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

@@ -31,6 +31,16 @@ const setRevealed = (tag, isVisible) => {
   tag.toggleAttribute(CONTRIBUTOR_TAG_REVEALED_ATTRIBUTE, isVisible);
 };
 
+/**
+ * Whether the browser is showing this focus, which is the same question its focus ring answers — see
+ * the `:focus-visible` rule in `contributorTagStyles`.
+ *
+ * Clicking the tag focuses it, so a tag held up by focus alone stayed on screen after the pointer had
+ * left, until something else took focus (EDITOR-9046). Measured in Chromium: a click leaves this
+ * `false` and `Tab` leaves it `true`, so the keyboard focus stop is unaffected.
+ */
+const isFocusVisible = tag => tag.matches(':focus-visible');
+
 /**
  * Whether flipping the tag's state will actually run a transition on it.
  *
@@ -235,9 +245,11 @@ export class ContributorTagController {
     }, {
       type: 'mouseout',
       listener: this.trackRevealSource(tag, false)
-    }, {
+    },
+    // Only a focus the browser is showing holds the tag up — see `isFocusVisible`.
+    {
       type: 'focus',
-      listener: this.trackRevealSource(FOCUS_SOURCE, true)
+      listener: () => this.setRevealSource(FOCUS_SOURCE, isFocusVisible(tag))
     }, {
       type: 'blur',
       listener: this.trackRevealSource(FOCUS_SOURCE, false)
@@ -246,14 +258,15 @@ export class ContributorTagController {
 
   /** One listener shape for every reveal source, so all of them land in the same set. */
   trackRevealSource(source, isRevealing) {
-    return () => {
-      if (isRevealing) {
-        this.revealSources.add(source);
-      } else {
-        this.revealSources.delete(source);
-      }
-      this.applyVisibility();
-    };
+    return () => this.setRevealSource(source, isRevealing);
+  }
+  setRevealSource(source, isRevealing) {
+    if (isRevealing) {
+      this.revealSources.add(source);
+    } else {
+      this.revealSources.delete(source);
+    }
+    this.applyVisibility();
   }
   renderAvatars(model) {
     var _this$dom;

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

@@ -15,12 +15,20 @@ const PERSON_ICON_SVG = `<svg width="16" height="16" fill="none" viewBox="0 0 16
 /** `@atlaskit/icon-lab/core/ai-bot`, at 12px so it fits inside the 16px hexagon. */
 const AI_BOT_ICON_SVG = `<svg width="12" height="12" fill="none" viewBox="0 0 16 16" role="presentation" style="display:block"><path fill="currentcolor" d="M13 5.5a.5.5 0 0 0-.5-.5h-9a.5.5 0 0 0-.5.5V13a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5zm-6.5 2v3H5v-3zm4.5 0v3H9.5v-3zm3.5 1H16V10h-1.5v3a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2v-3H0V8.5h1.5v-3a2 2 0 0 1 2-2h3.75v-2H4V0h4a.75.75 0 0 1 .75.75V3.5h3.75a2 2 0 0 1 2 2z"/></svg>`;
 
+/**
+ * The glyph from `@atlaskit/icon/core/ai-agent`, at 12px so it fits inside the 16px hexagon.
+ * The icon package only exposes this as a React component; this tag is otherwise imperative DOM,
+ * so keep the generated glyph here rather than introducing a React render boundary.
+ */
+const AI_AGENT_ICON_SVG = `<svg width="12" height="12" fill="none" viewBox="0 0 16 16" role="presentation" style="display:block"><path fill="currentcolor" fill-rule="evenodd" d="M6.971.493a2 2 0 0 1 2.058 0l5 3A2 2 0 0 1 15 5.208v5.584a2 2 0 0 1-.971 1.715l-5 3a2 2 0 0 1-2.058 0l-5-3A2 2 0 0 1 1 10.792V5.208a2 2 0 0 1 .971-1.715zm1.286 1.286a.5.5 0 0 0-.514 0l-5 3a.5.5 0 0 0-.243.429v5.584a.5.5 0 0 0 .243.429l1.098.66a4.25 4.25 0 1 1 8.318 0l1.098-.66a.5.5 0 0 0 .243-.429V5.208a.5.5 0 0 0-.243-.429zM8 8.25a2.75 2.75 0 1 0 0 5.5 2.75 2.75 0 0 0 0-5.5" clip-rule="evenodd"/></svg>`;
+
 /** `RovoHexIcon` from `@atlaskit/logo/rovo-hex/icon`, at the 16px `xxsmall` renders. */
 const ROVO_HEX_ICON_SVG = `<svg width="16" height="16" viewBox="0 0 24 24" role="presentation" style="display:block"><path fill="#1868db" fill-rule="evenodd" d="m13.227 16.789-7.154 4.169-3.403-1.96a2.72 2.72 0 0 1-1.362-2.355V7.366c0-.973.518-1.87 1.361-2.354l6.044-3.487-.038.114a3.6 3.6 0 0 0-.172 1.088v9.278c0 1.274.68 2.45 1.786 3.085z" clip-rule="evenodd"/><path fill="#6a9a23" fill-rule="evenodd" d="m11.296 15.671-7.193 4.153 6.607 3.812a2.73 2.73 0 0 0 2.676.026l.048-.033a2.73 2.73 0 0 0 1.232-1.525 2.7 2.7 0 0 0 .127-.822v-3.594z" clip-rule="evenodd"/><path fill="#af59e1" fill-rule="evenodd" d="m21.477 5.003-4.404-2.539-5.904 4.89 2.69 1.556a3.56 3.56 0 0 1 1.785 3.086v9.277a3.6 3.6 0 0 1-.21 1.202l6.044-3.486a2.71 2.71 0 0 0 1.362-2.355V7.357c0-.97-.521-1.87-1.363-2.354" clip-rule="evenodd"/><path fill="#fca700" fill-rule="evenodd" d="M12.74 8.266 9.353 6.312V2.718c0-.283.044-.56.127-.821A2.73 2.73 0 0 1 10.71.372V.37a.4.4 0 0 0 .048-.033 2.73 2.73 0 0 1 2.676.026l6.499 3.75z" clip-rule="evenodd"/></svg>`;
 
 /** ClaudeLogo from ai-mate/studio-browse-kit, inset to fit the agent hexagon. */
 const CLAUDE_ICON_SVG = `<svg width="12" height="12" viewBox="8 8 32 32" role="presentation" style="display:block"><path fill="#FFFFFF" d="M14.2785 29.274L20.5732 25.7445L20.6785 25.4369L20.5732 25.2669H20.2653L19.2122 25.2021L15.6152 25.105L12.4962 24.9755L9.47443 24.8136L8.71291 24.6517L8 23.7126L8.07291 23.2431L8.71291 22.8141L9.62835 22.895L11.6537 23.0326L14.6916 23.2431L16.8952 23.3726L20.16 23.7126H20.6785L20.7514 23.5022L20.5732 23.3726L20.4354 23.2431L17.2922 21.1141L13.8896 18.8636L12.1073 17.5684L11.1433 16.9127L10.6572 16.2975L10.4466 14.9537L11.3215 13.9904L12.4962 14.0713L12.7959 14.1523L13.9868 15.067L16.5306 17.0342L19.8522 19.4789L20.3382 19.8836L20.5327 19.746L20.557 19.6489L20.3382 19.2846L18.5316 16.0223L16.6035 12.7033L15.7448 11.3271L15.518 10.5014C15.437 10.1614 15.3803 9.87807 15.3803 9.52998L16.3767 8.17809L16.9276 8L18.2562 8.17809L18.8152 8.6638L19.6415 10.55L20.9782 13.5209L23.0522 17.5603L23.6597 18.7584L23.9838 19.8674L24.1053 20.2074H24.3159V20.0132L24.4861 17.7384L24.802 14.9456L25.1099 11.3514L25.2152 10.3395L25.7175 9.12522L26.7139 8.46952L27.4916 8.84189L28.1316 9.75664L28.0425 10.3476L27.6618 12.8166L26.9165 16.6861L26.4304 19.2765H26.7139L27.038 18.9527L28.3504 17.2122L30.5539 14.4599L31.5261 13.3671L32.6603 12.1609L33.3894 11.5861H34.7666L35.7792 13.0918L35.3256 14.6461L33.9079 16.4432L32.7332 17.9651L31.0481 20.2317L29.9949 22.045L30.0922 22.1907L30.3433 22.1665L34.1509 21.3569L36.2086 20.9846L38.6633 20.5636L39.7732 21.0817L39.8947 21.6079L39.4572 22.6845L36.8324 23.3322L33.7539 23.9474L29.1686 25.0321L29.1119 25.0726L29.1767 25.1536L31.2425 25.3478L32.1256 25.3964H34.2886L38.3149 25.6959L39.3681 26.3921L40 27.2421L39.8947 27.8897L38.2744 28.7154L36.0871 28.1973L30.9833 26.9831L29.2334 26.5459H28.9904V26.6916L30.4486 28.1164L33.122 30.5287L36.4678 33.6372L36.638 34.4063L36.2086 35.0134L35.7549 34.9486L32.8142 32.7387L31.68 31.743L29.1119 29.5816H28.9418V29.8082L29.5332 30.6744L32.6603 35.3696L32.8223 36.8105L32.5954 37.28L31.7853 37.5634L30.8942 37.4015L29.0633 34.8353L27.1757 31.9454L25.6527 29.3549L25.4663 29.4602L24.5671 39.1338L24.1458 39.6276L23.1737 40L22.3635 39.3848L21.9342 38.3891L22.3635 36.422L22.882 33.8558L23.3033 31.8158L23.6841 29.2821L23.9109 28.4402L23.8947 28.3835L23.7084 28.4078L21.7965 31.0306L18.8881 34.9567L16.5873 37.4177L16.0365 37.6362L15.0805 37.1424L15.1696 36.2601L15.7043 35.4748L18.8881 31.4273L20.8081 28.9178L22.0476 27.4688L22.0395 27.2583H21.9666L13.5089 32.7468L12.002 32.9411L11.3539 32.3339L11.4349 31.3382L11.7428 31.0144L14.2866 29.2659L14.2785 29.274Z"/></svg>`;
 const markup = {
+  aiAgent: AI_AGENT_ICON_SVG,
   aiBot: AI_BOT_ICON_SVG,
   claude: CLAUDE_ICON_SVG,
   person: PERSON_ICON_SVG,

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

@@ -1,4 +1,4 @@
-/* IndicatorBar.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* IndicatorBar.tsx generated by @compiled/babel-plugin v3.0.2 */
 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.1 */
+/* IndicatorBarContentComponent.tsx generated by @compiled/babel-plugin v3.0.2 */
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';

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

@@ -99,7 +99,7 @@ export var contributorAvatarRenderer = function contributorAvatarRenderer(_ref)
       shape.appendChild(fallback);
       return;
     }
-    shape.appendChild(getContributorTagIcon((_AGENT_KIND_ICONS = AGENT_KIND_ICONS[(_contributor$agentKin = contributor.agentKind) !== null && _contributor$agentKin !== void 0 ? _contributor$agentKin : 'external']) !== null && _AGENT_KIND_ICONS !== void 0 ? _AGENT_KIND_ICONS : 'aiBot', doc));
+    shape.appendChild(getContributorTagIcon((_AGENT_KIND_ICONS = AGENT_KIND_ICONS[(_contributor$agentKin = contributor.agentKind) !== null && _contributor$agentKin !== void 0 ? _contributor$agentKin : 'external']) !== null && _AGENT_KIND_ICONS !== void 0 ? _AGENT_KIND_ICONS : 'aiAgent', doc));
   };
   if (contributor.avatarUrl) {
     image = doc.createElement('img');

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

@@ -33,6 +33,18 @@ var setRevealed = function setRevealed(tag, isVisible) {
   tag.toggleAttribute(CONTRIBUTOR_TAG_REVEALED_ATTRIBUTE, isVisible);
 };
 
+/**
+ * Whether the browser is showing this focus, which is the same question its focus ring answers — see
+ * the `:focus-visible` rule in `contributorTagStyles`.
+ *
+ * Clicking the tag focuses it, so a tag held up by focus alone stayed on screen after the pointer had
+ * left, until something else took focus (EDITOR-9046). Measured in Chromium: a click leaves this
+ * `false` and `Tab` leaves it `true`, so the keyboard focus stop is unaffected.
+ */
+var isFocusVisible = function isFocusVisible(tag) {
+  return tag.matches(':focus-visible');
+};
+
 /**
  * Whether flipping the tag's state will actually run a transition on it.
  *
@@ -245,6 +257,7 @@ export var ContributorTagController = /*#__PURE__*/function () {
   }, {
     key: "bindTag",
     value: function bindTag(_ref4) {
+      var _this3 = this;
       var tag = _ref4.tag;
       // `mouseover`/`mouseout` rather than the enter/leave pair, because they are what fire as the
       // pointer moves between the tag's own children. Both are keyed on the tag, so those moves add
@@ -255,9 +268,13 @@ export var ContributorTagController = /*#__PURE__*/function () {
       }, {
         type: 'mouseout',
         listener: this.trackRevealSource(tag, false)
-      }, {
+      },
+      // Only a focus the browser is showing holds the tag up — see `isFocusVisible`.
+      {
         type: 'focus',
-        listener: this.trackRevealSource(FOCUS_SOURCE, true)
+        listener: function listener() {
+          return _this3.setRevealSource(FOCUS_SOURCE, isFocusVisible(tag));
+        }
       }, {
         type: 'blur',
         listener: this.trackRevealSource(FOCUS_SOURCE, false)
@@ -268,21 +285,26 @@ export var ContributorTagController = /*#__PURE__*/function () {
   }, {
     key: "trackRevealSource",
     value: function trackRevealSource(source, isRevealing) {
-      var _this3 = this;
+      var _this4 = this;
       return function () {
-        if (isRevealing) {
-          _this3.revealSources.add(source);
-        } else {
-          _this3.revealSources.delete(source);
-        }
-        _this3.applyVisibility();
+        return _this4.setRevealSource(source, isRevealing);
       };
     }
+  }, {
+    key: "setRevealSource",
+    value: function setRevealSource(source, isRevealing) {
+      if (isRevealing) {
+        this.revealSources.add(source);
+      } else {
+        this.revealSources.delete(source);
+      }
+      this.applyVisibility();
+    }
   }, {
     key: "renderAvatars",
     value: function renderAvatars(model) {
       var _this$dom,
-        _this4 = this;
+        _this5 = this;
       var _ref5 = (_this$dom = this.dom) !== null && _this$dom !== void 0 ? _this$dom : {},
         container = _ref5.avatars;
       if (!container) {
@@ -326,7 +348,7 @@ export var ContributorTagController = /*#__PURE__*/function () {
           avatar.element.style.setProperty('margin-inline-end', "var(--ds-space-negative-050, -4px)");
         }
         container.appendChild(avatar.element);
-        _this4.avatars.push(avatar);
+        _this5.avatars.push(avatar);
       });
     }
   }, {
@@ -477,7 +499,7 @@ export var ContributorTagController = /*#__PURE__*/function () {
     key: "syncHighlightBindings",
     value: function syncHighlightBindings(model) {
       var _model$linkedDiffIds,
-        _this5 = this;
+        _this6 = this;
       var diffId = this.options.diffId;
       var selector = [diffId].concat(_toConsumableArray((_model$linkedDiffIds = model.linkedDiffIds) !== null && _model$linkedDiffIds !== void 0 ? _model$linkedDiffIds : [])).map(function (id) {
         return "[data-diff-id=\"".concat(id, "\"]");
@@ -492,8 +514,8 @@ export var ContributorTagController = /*#__PURE__*/function () {
       // not be in the document yet. A microtask lands once that pass has finished.
       var pendingBind = ++this.bindToken;
       queueMicrotask(function () {
-        if (!_this5.isDestroyed && pendingBind === _this5.bindToken) {
-          _this5.bindHighlightState(selector);
+        if (!_this6.isDestroyed && pendingBind === _this6.bindToken) {
+          _this6.bindHighlightState(selector);
         }
       });
     }
@@ -501,7 +523,7 @@ export var ContributorTagController = /*#__PURE__*/function () {
     key: "bindHighlightState",
     value: function bindHighlightState(selector) {
       var _this$options$getEdit,
-        _this6 = this;
+        _this7 = this;
       // Scoped to this editor's content root, so a tag can only ever bind to the decorations its own
       // plugin instance rendered — another editor on the page, or one nested inside this one, cannot
       // reveal this tag.
@@ -517,10 +539,10 @@ export var ContributorTagController = /*#__PURE__*/function () {
       this.unbindHighlights = this.highlightElements.map(function (highlight) {
         return bindAll(highlight, [{
           type: 'mouseenter',
-          listener: _this6.trackRevealSource(highlight, true)
+          listener: _this7.trackRevealSource(highlight, true)
         }, {
           type: 'mouseleave',
-          listener: _this6.trackRevealSource(highlight, false)
+          listener: _this7.trackRevealSource(highlight, false)
         }]);
       });
       // The pointer may already be over a highlight by the time this binds, a draw pass after it

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

@@ -15,12 +15,20 @@ var PERSON_ICON_SVG = "<svg width=\"16\" height=\"16\" fill=\"none\" viewBox=\"0
 /** `@atlaskit/icon-lab/core/ai-bot`, at 12px so it fits inside the 16px hexagon. */
 var AI_BOT_ICON_SVG = "<svg width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 16 16\" role=\"presentation\" style=\"display:block\"><path fill=\"currentcolor\" d=\"M13 5.5a.5.5 0 0 0-.5-.5h-9a.5.5 0 0 0-.5.5V13a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5zm-6.5 2v3H5v-3zm4.5 0v3H9.5v-3zm3.5 1H16V10h-1.5v3a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2v-3H0V8.5h1.5v-3a2 2 0 0 1 2-2h3.75v-2H4V0h4a.75.75 0 0 1 .75.75V3.5h3.75a2 2 0 0 1 2 2z\"/></svg>";
 
+/**
+ * The glyph from `@atlaskit/icon/core/ai-agent`, at 12px so it fits inside the 16px hexagon.
+ * The icon package only exposes this as a React component; this tag is otherwise imperative DOM,
+ * so keep the generated glyph here rather than introducing a React render boundary.
+ */
+var AI_AGENT_ICON_SVG = "<svg width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 16 16\" role=\"presentation\" style=\"display:block\"><path fill=\"currentcolor\" fill-rule=\"evenodd\" d=\"M6.971.493a2 2 0 0 1 2.058 0l5 3A2 2 0 0 1 15 5.208v5.584a2 2 0 0 1-.971 1.715l-5 3a2 2 0 0 1-2.058 0l-5-3A2 2 0 0 1 1 10.792V5.208a2 2 0 0 1 .971-1.715zm1.286 1.286a.5.5 0 0 0-.514 0l-5 3a.5.5 0 0 0-.243.429v5.584a.5.5 0 0 0 .243.429l1.098.66a4.25 4.25 0 1 1 8.318 0l1.098-.66a.5.5 0 0 0 .243-.429V5.208a.5.5 0 0 0-.243-.429zM8 8.25a2.75 2.75 0 1 0 0 5.5 2.75 2.75 0 0 0 0-5.5\" clip-rule=\"evenodd\"/></svg>";
+
 /** `RovoHexIcon` from `@atlaskit/logo/rovo-hex/icon`, at the 16px `xxsmall` renders. */
 var ROVO_HEX_ICON_SVG = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" role=\"presentation\" style=\"display:block\"><path fill=\"#1868db\" fill-rule=\"evenodd\" d=\"m13.227 16.789-7.154 4.169-3.403-1.96a2.72 2.72 0 0 1-1.362-2.355V7.366c0-.973.518-1.87 1.361-2.354l6.044-3.487-.038.114a3.6 3.6 0 0 0-.172 1.088v9.278c0 1.274.68 2.45 1.786 3.085z\" clip-rule=\"evenodd\"/><path fill=\"#6a9a23\" fill-rule=\"evenodd\" d=\"m11.296 15.671-7.193 4.153 6.607 3.812a2.73 2.73 0 0 0 2.676.026l.048-.033a2.73 2.73 0 0 0 1.232-1.525 2.7 2.7 0 0 0 .127-.822v-3.594z\" clip-rule=\"evenodd\"/><path fill=\"#af59e1\" fill-rule=\"evenodd\" d=\"m21.477 5.003-4.404-2.539-5.904 4.89 2.69 1.556a3.56 3.56 0 0 1 1.785 3.086v9.277a3.6 3.6 0 0 1-.21 1.202l6.044-3.486a2.71 2.71 0 0 0 1.362-2.355V7.357c0-.97-.521-1.87-1.363-2.354\" clip-rule=\"evenodd\"/><path fill=\"#fca700\" fill-rule=\"evenodd\" d=\"M12.74 8.266 9.353 6.312V2.718c0-.283.044-.56.127-.821A2.73 2.73 0 0 1 10.71.372V.37a.4.4 0 0 0 .048-.033 2.73 2.73 0 0 1 2.676.026l6.499 3.75z\" clip-rule=\"evenodd\"/></svg>";
 
 /** ClaudeLogo from ai-mate/studio-browse-kit, inset to fit the agent hexagon. */
 var CLAUDE_ICON_SVG = "<svg width=\"12\" height=\"12\" viewBox=\"8 8 32 32\" role=\"presentation\" style=\"display:block\"><path fill=\"#FFFFFF\" d=\"M14.2785 29.274L20.5732 25.7445L20.6785 25.4369L20.5732 25.2669H20.2653L19.2122 25.2021L15.6152 25.105L12.4962 24.9755L9.47443 24.8136L8.71291 24.6517L8 23.7126L8.07291 23.2431L8.71291 22.8141L9.62835 22.895L11.6537 23.0326L14.6916 23.2431L16.8952 23.3726L20.16 23.7126H20.6785L20.7514 23.5022L20.5732 23.3726L20.4354 23.2431L17.2922 21.1141L13.8896 18.8636L12.1073 17.5684L11.1433 16.9127L10.6572 16.2975L10.4466 14.9537L11.3215 13.9904L12.4962 14.0713L12.7959 14.1523L13.9868 15.067L16.5306 17.0342L19.8522 19.4789L20.3382 19.8836L20.5327 19.746L20.557 19.6489L20.3382 19.2846L18.5316 16.0223L16.6035 12.7033L15.7448 11.3271L15.518 10.5014C15.437 10.1614 15.3803 9.87807 15.3803 9.52998L16.3767 8.17809L16.9276 8L18.2562 8.17809L18.8152 8.6638L19.6415 10.55L20.9782 13.5209L23.0522 17.5603L23.6597 18.7584L23.9838 19.8674L24.1053 20.2074H24.3159V20.0132L24.4861 17.7384L24.802 14.9456L25.1099 11.3514L25.2152 10.3395L25.7175 9.12522L26.7139 8.46952L27.4916 8.84189L28.1316 9.75664L28.0425 10.3476L27.6618 12.8166L26.9165 16.6861L26.4304 19.2765H26.7139L27.038 18.9527L28.3504 17.2122L30.5539 14.4599L31.5261 13.3671L32.6603 12.1609L33.3894 11.5861H34.7666L35.7792 13.0918L35.3256 14.6461L33.9079 16.4432L32.7332 17.9651L31.0481 20.2317L29.9949 22.045L30.0922 22.1907L30.3433 22.1665L34.1509 21.3569L36.2086 20.9846L38.6633 20.5636L39.7732 21.0817L39.8947 21.6079L39.4572 22.6845L36.8324 23.3322L33.7539 23.9474L29.1686 25.0321L29.1119 25.0726L29.1767 25.1536L31.2425 25.3478L32.1256 25.3964H34.2886L38.3149 25.6959L39.3681 26.3921L40 27.2421L39.8947 27.8897L38.2744 28.7154L36.0871 28.1973L30.9833 26.9831L29.2334 26.5459H28.9904V26.6916L30.4486 28.1164L33.122 30.5287L36.4678 33.6372L36.638 34.4063L36.2086 35.0134L35.7549 34.9486L32.8142 32.7387L31.68 31.743L29.1119 29.5816H28.9418V29.8082L29.5332 30.6744L32.6603 35.3696L32.8223 36.8105L32.5954 37.28L31.7853 37.5634L30.8942 37.4015L29.0633 34.8353L27.1757 31.9454L25.6527 29.3549L25.4663 29.4602L24.5671 39.1338L24.1458 39.6276L23.1737 40L22.3635 39.3848L21.9342 38.3891L22.3635 36.422L22.882 33.8558L23.3033 31.8158L23.6841 29.2821L23.9109 28.4402L23.8947 28.3835L23.7084 28.4078L21.7965 31.0306L18.8881 34.9567L16.5873 37.4177L16.0365 37.6362L15.0805 37.1424L15.1696 36.2601L15.7043 35.4748L18.8881 31.4273L20.8081 28.9178L22.0476 27.4688L22.0395 27.2583H21.9666L13.5089 32.7468L12.002 32.9411L11.3539 32.3339L11.4349 31.3382L11.7428 31.0144L14.2866 29.2659L14.2785 29.274Z\"/></svg>";
 var markup = {
+  aiAgent: AI_AGENT_ICON_SVG,
   aiBot: AI_BOT_ICON_SVG,
   claude: CLAUDE_ICON_SVG,
   person: PERSON_ICON_SVG,

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

@@ -1,4 +1,4 @@
-/* IndicatorBar.tsx generated by @compiled/babel-plugin v3.0.1 */
+/* IndicatorBar.tsx generated by @compiled/babel-plugin v3.0.2 */
 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.1 */
+/* IndicatorBarContentComponent.tsx generated by @compiled/babel-plugin v3.0.2 */
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';

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

@@ -75,6 +75,7 @@ export declare class ContributorTagController {
     private bindTag;
     /** One listener shape for every reveal source, so all of them land in the same set. */
     private trackRevealSource;
+    private setRevealSource;
     private renderAvatars;
     private renderLabels;
     private accentOf;

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

@@ -8,5 +8,5 @@
  * The Rovo hex is the `brand` appearance, whose `--rovo-*-color` variables resolve to `initial` in
  * both themes — the fallbacks below are the rendered colours, so no theme observer is needed.
  */
-export type ContributorTagIcon = 'aiBot' | 'claude' | 'person' | 'rovoHex';
+export type ContributorTagIcon = 'aiAgent' | 'aiBot' | 'claude' | 'person' | 'rovoHex';
 export declare const getContributorTagIcon: (icon: ContributorTagIcon, doc: Document) => DocumentFragment;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-show-diff",
-	"version": "16.0.10",
+	"version": "16.0.12",
 	"description": "ShowDiff plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -32,8 +32,8 @@
 		"@atlaskit/platform-feature-experiments": "^0.3.0",
 		"@atlaskit/platform-feature-flags": "^2.2.0",
 		"@atlaskit/primitives": "^22.5.0",
-		"@atlaskit/tmp-editor-statsig": "^194.0.0",
-		"@atlaskit/tokens": "^16.12.0",
+		"@atlaskit/tmp-editor-statsig": "^196.0.0",
+		"@atlaskit/tokens": "^17.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^1.0.2",
 		"bind-event-listener": "^3.0.0",
@@ -64,7 +64,7 @@
 		"react-intl": "^7.0.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^122.6.0",
+		"@atlaskit/editor-common": "^122.7.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"