@atlaskit/editor-plugin-show-diff 15.1.6 → 15.1.8

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

@@ -2,14 +2,11 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
-function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
-function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
-import { bindAll } from 'bind-event-listener';
+import { bind, bindAll } from 'bind-event-listener';
 import { VanillaTooltip } from '@atlaskit/editor-common/vanilla-tooltip';
 import { getAccentTokens } from '../../pm-plugins/decorations/colorSchemes/factory';
 import { colorSchemeRegistry } from '../../pm-plugins/decorations/colorSchemes/schemes';
-import { buildContributorTagDom, MIN_TAG_WIDTH } from './buildContributorTagDom';
+import { buildContributorTagDom, CONTRIBUTOR_TAG_REVEALED_ATTRIBUTE, TAG_EXIT_FALLBACK_MS } from './buildContributorTagDom';
 import { contributorAvatarRenderer } from './contributorAvatarRenderer';
 import { contributorTagMessages } from './messages';
 var getContributorName = function getContributorName(contributor, formatMessage) {
@@ -28,8 +25,8 @@ var getContributorName = function getContributorName(contributor, formatMessage)
 };
 
 /**
- * Resolves the tag's accent from the same scheme value and token maps the highlight used, so the
- * two can never drift.
+ * Resolves the tag's accent from the same scheme value the highlight was drawn from, so the colour
+ * the two carry can never drift — only the tone does, which is `getAccentTokens`'s to pick.
  */
 var getTagAccent = function getTagAccent(_ref) {
   var colorScheme = _ref.colorScheme,
@@ -40,35 +37,70 @@ var getTagAccent = function getTagAccent(_ref) {
   return getAccentTokens(accent);
 };
 
-/** The line the change starts on: topmost of its fragments, leftmost among those. */
-var findChangeStartLine = function findChangeStartLine(highlights) {
-  var start;
-  var _iterator = _createForOfIteratorHelper(highlights),
-    _step;
-  try {
-    for (_iterator.s(); !(_step = _iterator.n()).done;) {
-      var highlight = _step.value;
-      var _iterator2 = _createForOfIteratorHelper(highlight.getClientRects()),
-        _step2;
-      try {
-        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-          var rect = _step2.value;
-          if (!start || rect.top < start.top - 1 || Math.abs(rect.top - start.top) <= 1 && rect.left < start.left) {
-            start = rect;
-          }
-        }
-      } catch (err) {
-        _iterator2.e(err);
-      } finally {
-        _iterator2.f();
+/**
+ * Keyboard focus, as a member of `revealSources` alongside the elements the pointer can be over. It
+ * has no element of its own to key on — the tag is already in the set under its own hover.
+ */
+var FOCUS_SOURCE = Symbol('contributor-tag-focus');
+
+/** Moves the tag between the two ends of the fade `contributorTagStyles` declares. */
+var setRevealed = function setRevealed(tag, isVisible) {
+  tag.toggleAttribute(CONTRIBUTOR_TAG_REVEALED_ATTRIBUTE, isVisible);
+};
+
+/**
+ * Whether flipping the tag's state will actually run a transition on it.
+ *
+ * Asked of the element rather than of `matchMedia`, because reduced motion and a missing stylesheet
+ * both compute to a zero duration — and a transition that never starts fires no `transitionend`, so
+ * a tag waiting for one would sit on screen until the backstop timeout.
+ *
+ * Read only when a tag is being taken down: it resolves style.
+ */
+var willTransition = function willTransition(tag) {
+  return window.getComputedStyle(tag).transitionDuration.split(',').some(function (duration) {
+    return parseFloat(duration) > 0;
+  });
+};
+
+/**
+ * Fades a tag that is still on screen out, and releases it once the fade has finished.
+ *
+ * No controller owns the element by the time this runs — it is released up front so a republished
+ * model's tag can fade in over the top — so everything the removal needs is captured here.
+ */
+var fadeTagOut = function fadeTagOut(tag, release) {
+  setRevealed(tag, false);
+
+  // Nothing to wait for: reduced motion, or no stylesheet to fade it with.
+  if (!willTransition(tag)) {
+    release();
+    return;
+  }
+  var unbind;
+  var isFinished = false;
+  var finish = function finish() {
+    var _unbind;
+    // Whichever of the two signals arrives first wins; the other must not release twice.
+    if (isFinished) {
+      return;
+    }
+    isFinished = true;
+    (_unbind = unbind) === null || _unbind === void 0 || _unbind();
+    unbind = undefined;
+    clearTimeout(fallbackId);
+    release();
+  };
+  unbind = bind(tag, {
+    type: 'transitionend',
+    // `transitionend` bubbles, and opacity is not the only property that could ever carry one.
+    listener: function listener(event) {
+      if (event.target === tag && event.propertyName === 'opacity') {
+        finish();
       }
     }
-  } catch (err) {
-    _iterator.e(err);
-  } finally {
-    _iterator.f();
-  }
-  return start;
+  });
+  var fallbackId = setTimeout(finish, TAG_EXIT_FALLBACK_MS);
 };
 
 /** The contributors a tag draws, keyed so a republished model can be recognised as the same pair. */
@@ -97,8 +129,18 @@ export var ContributorTagController = /*#__PURE__*/function () {
     _defineProperty(this, "bindToken", 0);
     _defineProperty(this, "fullLabel", '');
     _defineProperty(this, "isDestroyed", false);
-    _defineProperty(this, "isHighlightHovered", false);
-    _defineProperty(this, "isHoveredOrFocused", false);
+    /** Last visibility written, so a teardown knows whether there is anything on screen to fade. */
+    _defineProperty(this, "isVisible", false);
+    /**
+     * Everything currently asking for the tag to be up, other than the model: each hovered highlight,
+     * the tag itself while the pointer is on it, and `FOCUS_SOURCE` while it holds focus.
+     *
+     * One set rather than independent booleans, which is what let the exit's trailing delay go: a
+     * pointer crossing from the highlight onto the tag removes one member and adds another in the same
+     * dispatch, so no style is resolved in between and the browser never starts the exit. Booleans
+     * could not see each other, so the crossing wrote the tag out and straight back in.
+     */
+    _defineProperty(this, "revealSources", new Set());
     _defineProperty(this, "unbindHighlights", []);
     this.options = options;
   }
@@ -160,65 +202,101 @@ export var ContributorTagController = /*#__PURE__*/function () {
       this.renderLabels(next);
       this.applyAccent(next);
       this.syncHighlightBindings(next);
-      this.applyStyles();
+      this.applyVisibility();
       this.syncTooltip();
     }
 
-    /** Takes the tag's DOM down, keeping the subscription so a republished model redraws it. */
+    /**
+     * Takes the tag's DOM down, keeping the subscription so a republished model redraws it.
+     *
+     * A tag that is still on screen is released here and fades out on its own, so a republished
+     * model's tag fades in over the top of the outgoing one — see `fadeTagOut`.
+     */
   }, {
     key: "teardownTag",
     value: function teardownTag() {
-      var _this$unbindTag, _this$tooltip, _this$dom;
+      var _this$unbindTag, _this$tooltip;
+      // Unbound synchronously, ahead of any fade: a tag on its way out must not be revealed again by
+      // the pointer, and these listeners are what hold this controller.
       this.unbindHighlightState();
       this.boundSelector = undefined;
       (_this$unbindTag = this.unbindTag) === null || _this$unbindTag === void 0 || _this$unbindTag.call(this);
       this.unbindTag = undefined;
+      // Destroyed rather than carried through the fade: it is a popover in the top layer.
       (_this$tooltip = this.tooltip) === null || _this$tooltip === void 0 || _this$tooltip.destroy();
       this.tooltip = undefined;
       this.tooltipContent = undefined;
-      this.avatars.forEach(function (avatar) {
-        return avatar.destroy();
-      });
+      var dom = this.dom,
+        isVisible = this.isVisible;
+      // Destroying an avatar removes its element, so the avatars go with whoever removes the tag —
+      // destroyed here and it would fade out empty.
+      var avatars = this.avatars;
       this.avatars = [];
-      (_this$dom = this.dom) === null || _this$dom === void 0 || _this$dom.root.remove();
       this.dom = undefined;
-      this.maxWidthPx = undefined;
-      this.isHoveredOrFocused = false;
-      // Both hover flags belong to the listeners just unbound: a republished model rebinds them, and
-      // stale `true` would draw the tag as visible with the pointer nowhere near it.
-      this.isHighlightHovered = false;
+      this.isVisible = false;
+      // The set belongs to the listeners just unbound: a stale member would draw the tag as visible
+      // with the pointer nowhere near it.
+      this.revealSources.clear();
+      if (!dom) {
+        return;
+      }
+      var release = function release() {
+        avatars.forEach(function (avatar) {
+          return avatar.destroy();
+        });
+        dom.root.remove();
+      };
+
+      // Nothing on screen to fade. `isConnected` covers ProseMirror destroying the widget: a fade on
+      // a detached element never starts.
+      if (!isVisible || !dom.tag.isConnected) {
+        release();
+        return;
+      }
+      fadeTagOut(dom.tag, release);
     }
   }, {
     key: "bindTag",
     value: function bindTag(_ref4) {
-      var _this3 = this;
       var tag = _ref4.tag;
-      var setHoveredOrFocused = function setHoveredOrFocused(isHoveredOrFocused) {
-        return function () {
-          _this3.isHoveredOrFocused = isHoveredOrFocused;
-          _this3.applyStyles();
-        };
-      };
+      // `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
+      // and remove the same member and the set never empties.
       this.unbindTag = bindAll(tag, [{
         type: 'mouseover',
-        listener: setHoveredOrFocused(true)
+        listener: this.trackRevealSource(tag, true)
       }, {
         type: 'mouseout',
-        listener: setHoveredOrFocused(false)
+        listener: this.trackRevealSource(tag, false)
       }, {
         type: 'focus',
-        listener: setHoveredOrFocused(true)
+        listener: this.trackRevealSource(FOCUS_SOURCE, true)
       }, {
         type: 'blur',
-        listener: setHoveredOrFocused(false)
+        listener: this.trackRevealSource(FOCUS_SOURCE, false)
       }]);
     }
+
+    /** One listener shape for every reveal source, so all of them land in the same set. */
+  }, {
+    key: "trackRevealSource",
+    value: function trackRevealSource(source, isRevealing) {
+      var _this3 = this;
+      return function () {
+        if (isRevealing) {
+          _this3.revealSources.add(source);
+        } else {
+          _this3.revealSources.delete(source);
+        }
+        _this3.applyVisibility();
+      };
+    }
   }, {
     key: "renderAvatars",
     value: function renderAvatars(model) {
-      var _this$dom2,
+      var _this$dom,
         _this4 = this;
-      var _ref5 = (_this$dom2 = this.dom) !== null && _this$dom2 !== void 0 ? _this$dom2 : {},
+      var _ref5 = (_this$dom = this.dom) !== null && _this$dom !== void 0 ? _this$dom : {},
         container = _ref5.avatars;
       if (!container) {
         return;
@@ -278,8 +356,8 @@ export var ContributorTagController = /*#__PURE__*/function () {
       var agentName = isPrimaryAgent ? primaryName : secondaryName;
       var userName = isPrimaryAgent ? secondaryName : primaryName;
 
-      // A connected pair only ever shows the agent; the pair is spelled out in the label, because
-      // the tag is never wider than the highlight.
+      // A connected pair only ever shows the agent; the pair is spelled out in the label, because the
+      // tag is capped at `MAX_TAG_WIDTH` and two names rarely fit inside it.
       this.dom.name.textContent = model.connectedContributor ? agentName || primaryName : primaryName;
       this.fullLabel = model.connectedContributor ? formatMessage(contributorTagMessages.changedByConnected, {
         agentName: agentName,
@@ -307,34 +385,34 @@ export var ContributorTagController = /*#__PURE__*/function () {
       }
       var accent = this.accentOf(model);
       this.dom.tag.style.setProperty('background-color', accent.background);
-      this.dom.tag.style.setProperty('border-bottom-color', accent.border);
       this.dom.name.style.setProperty('color', accent.text);
       this.avatars.forEach(function (avatar) {
         return avatar.setRingColor(accent.background);
       });
     }
 
-    /** Width clamp and visibility — the two things that are not carried by the model alone. */
+    /**
+     * Visibility — the one thing the model does not carry on its own, because hover is not in it.
+     *
+     * One idempotent attribute write, with nothing to guard: whether the flip is a real one, whether
+     * the tag is attached yet, and whether motion is wanted at all are all the stylesheet's to answer.
+     */
   }, {
-    key: "applyStyles",
-    value: function applyStyles() {
+    key: "applyVisibility",
+    value: function applyVisibility() {
       var _this$model;
       if (!this.dom) {
         return;
       }
-      this.dom.root.style.setProperty('max-width',
-      // Clamped to the highlight's own width, floored at `MIN_TAG_WIDTH` so a one-character
-      // change still shows an avatar.
-      this.maxWidthPx === undefined ? '' : "max(".concat(Math.round(this.maxWidthPx), "px, ").concat(MIN_TAG_WIDTH, ")"));
-      var isVisible = Boolean((_this$model = this.model) === null || _this$model === void 0 ? void 0 : _this$model.isActive) || this.isHighlightHovered || this.isHoveredOrFocused;
-      this.dom.tag.style.setProperty('opacity', isVisible ? '1' : '0');
-      this.dom.tag.style.setProperty('pointer-events', isVisible ? 'auto' : 'none');
+      var isVisible = Boolean((_this$model = this.model) === null || _this$model === void 0 ? void 0 : _this$model.isActive) || this.revealSources.size > 0;
+      this.isVisible = isVisible;
+      setRevealed(this.dom.tag, isVisible);
     }
 
     /**
-     * The full label is always the tooltip, whether or not the name it draws is clipped: the tag is
-     * never wider than the highlight, so a name that fits at one width is ellipsised at the next, and
-     * a connected pair spells out a contributor the tag does not show at any width.
+     * The full label is always the tooltip, whether or not the name it draws is clipped: a name longer
+     * than `MAX_TAG_WIDTH` is ellipsised, and a connected pair spells out a contributor the tag does
+     * not show at any width.
      *
      * `VanillaTooltip` has no "set new content" call, so it is rebuilt when the label changes — the
      * shape of `syncVanillaDisabledTooltip` in `mentionNodeView`.
@@ -365,9 +443,9 @@ export var ContributorTagController = /*#__PURE__*/function () {
     }
 
     /**
-     * Observes the highlight this tag describes, for what CSS here cannot see: its hover state (the
+     * Observes the highlight this tag describes, for what CSS here cannot see: its hover state. The
      * highlight is a ProseMirror decoration in a different DOM subtree, so listeners are bound
-     * imperatively via `data-diff-id`) and the width the tag is clamped to.
+     * imperatively via `data-diff-id`.
      *
      * Deliberately not routed through plugin state: a transaction per pointer move would re-run the
      * memoised decoration calculation.
@@ -387,8 +465,8 @@ export var ContributorTagController = /*#__PURE__*/function () {
       this.boundSelector = selector;
       this.unbindHighlightState();
 
-      // ProseMirror draws the tag's host in the same pass as the highlights the tag measures, so
-      // those may not be in the document yet. A microtask lands once that pass has finished.
+      // ProseMirror draws the tag's host in the same pass as the highlights it binds to, so those may
+      // 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) {
@@ -399,91 +477,32 @@ export var ContributorTagController = /*#__PURE__*/function () {
   }, {
     key: "bindHighlightState",
     value: function bindHighlightState(selector) {
-      var _this6 = this;
-      // Both queries are 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 supply the geometry.
-      var editorRoot = this.options.getEditorRoot();
-      var highlights = editorRoot === null || editorRoot === void 0 ? void 0 : editorRoot.querySelectorAll(selector);
-      if (!editorRoot || !(highlights !== null && highlights !== void 0 && highlights.length)) {
+      var _this$options$getEdit,
+        _this6 = 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.
+      var highlights = (_this$options$getEdit = this.options.getEditorRoot()) === null || _this$options$getEdit === void 0 ? void 0 : _this$options$getEdit.querySelectorAll(selector);
+      if (!(highlights !== null && highlights !== void 0 && highlights.length)) {
         return;
       }
 
-      // The width comes from this tag's OWN decoration; sibling halves of the change are here for
-      // hover only.
-      var ownElements = Array.from(editorRoot.querySelectorAll("[data-diff-id=\"".concat(this.options.diffId, "\"]")));
-      var measure = function measure() {
-        var _findChangeStartLine;
-        // Counted by distinct line box, not by client rect: an inline node inside the change (a
-        // mention, emoji, date) splits the highlight into several rects on the same line, and
-        // treating that as a wrap would drop the width clamp on changes that never wrapped.
-        var lineTops = new Set();
-        for (var _i = 0, _ownElements = ownElements; _i < _ownElements.length; _i++) {
-          var highlight = _ownElements[_i];
-          var _iterator3 = _createForOfIteratorHelper(highlight.getClientRects()),
-            _step3;
-          try {
-            for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
-              var rect = _step3.value;
-              lineTops.add(Math.round(rect.top));
-            }
-          } catch (err) {
-            _iterator3.e(err);
-          } finally {
-            _iterator3.f();
-          }
-        }
-
-        // A wrapped change's first line says nothing useful about how wide the tag may be.
-        _this6.maxWidthPx = lineTops.size > 1 ? undefined : (_findChangeStartLine = findChangeStartLine(ownElements)) === null || _findChangeStartLine === void 0 ? void 0 : _findChangeStartLine.width;
-        _this6.applyStyles();
-      };
-      measure();
-
-      // An inline element cannot be observed itself (ResizeObserver skips boxes with no principal
-      // box), so the block it sits in is observed instead.
-      this.resizeObserver = new ResizeObserver(measure);
-      var _iterator4 = _createForOfIteratorHelper(new Set(ownElements.map(function (_ref7) {
-          var parentElement = _ref7.parentElement;
-          return parentElement;
-        }))),
-        _step4;
-      try {
-        for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
-          var parent = _step4.value;
-          if (parent) {
-            this.resizeObserver.observe(parent);
-          }
-        }
-
-        // `bindAll` takes a single target, and a change can render more than one highlight.
-      } catch (err) {
-        _iterator4.e(err);
-      } finally {
-        _iterator4.f();
-      }
+      // `bindAll` takes a single target, and a change can render more than one highlight. Each is its
+      // own member of `revealSources`, so the pointer can cross between them without the set
+      // emptying.
       this.unbindHighlights = Array.from(highlights).map(function (highlight) {
         return bindAll(highlight, [{
           type: 'mouseenter',
-          listener: function listener() {
-            _this6.isHighlightHovered = true;
-            _this6.applyStyles();
-          }
+          listener: _this6.trackRevealSource(highlight, true)
         }, {
           type: 'mouseleave',
-          listener: function listener() {
-            _this6.isHighlightHovered = false;
-            _this6.applyStyles();
-          }
+          listener: _this6.trackRevealSource(highlight, false)
         }]);
       });
     }
   }, {
     key: "unbindHighlightState",
     value: function unbindHighlightState() {
-      var _this$resizeObserver;
-      (_this$resizeObserver = this.resizeObserver) === null || _this$resizeObserver === void 0 || _this$resizeObserver.disconnect();
-      this.resizeObserver = undefined;
       this.unbindHighlights.forEach(function (unbind) {
         return unbind();
       });

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

@@ -2,7 +2,7 @@
  * The icons a contributor tag can draw, as inline SVG.
  *
  * Neither `@atlaskit/icon`, `@atlaskit/icon-lab` nor `@atlaskit/logo` exposes a raw-SVG entry
- * point, so the markup is copied here rather than kept as a React island for three glyphs. Keep in
+ * point, so the markup is copied here rather than kept as a React island for these glyphs. Keep in
  * sync with the sources named on each constant.
  *
  * The Rovo hex is the `brand` appearance, whose `--rovo-*-color` variables resolve to `initial` in
@@ -17,8 +17,12 @@ var AI_BOT_ICON_SVG = "<svg width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0
 
 /** `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 = {
   aiBot: AI_BOT_ICON_SVG,
+  claude: CLAUDE_ICON_SVG,
   person: PERSON_ICON_SVG,
   rovoHex: ROVO_HEX_ICON_SVG
 };

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

@@ -1,8 +1,14 @@
 import type { AdsAccentColor, DiffColorScheme } from './types';
-/** Presentation tokens for one diff colour, shared by highlights and contributor tags. */
+/**
+ * Presentation tokens for a contributor tag in one diff colour.
+ *
+ * A `bolder` fill rather than the `subtlest` tint the highlight uses: the tag is a label on the
+ * change, and at tag size a tint reads as a second, weaker highlight sitting above the real one.
+ * `inverse` is the only text tone that reads on a bolder fill, and it needs no per-colour map —
+ * which is also why the tag carries no border: the fill alone bounds it.
+ */
 export declare function getAccentTokens(color: AdsAccentColor): {
     background: string;
-    border: string;
     text: string;
 };
 /** Inline inserted content — default state. */

package/dist/types/showDiffPluginType.d.ts

@@ -35,8 +35,8 @@ export type DiffContributorProfile = {
     name: string;
 };
 type DiffContributorKind = 'user' | 'agent';
-/** Agent presentation: `rovo`/`identified` use the agent's identity, `external` is generic. */
-type DiffAgentKind = 'rovo' | 'identified' | 'external';
+/** Agent presentation: branded, identified by profile, or a generic external agent. */
+type DiffAgentKind = 'rovo' | 'claude' | 'identified' | 'external';
 /**
  * A contributor the plugin has resolved from a step attribution and a supplied profile. Internal:
  * never re-exported from an entry point and not reachable from any public type. Same for

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

@@ -1,10 +1,39 @@
 export declare const CONTRIBUTOR_TAG_TESTID = "diff-contributor-tag";
 export declare const 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.
+ * Ceiling for the tag width. A constant rather than the width of the change: a change is routinely a
+ * word or two, and clamping to it ellipsised the contributor's name — the one thing the tag exists to
+ * show. Longer names are ellipsised into the tooltip.
  */
-export declare const MIN_TAG_WIDTH = "28px";
+export declare const MAX_TAG_WIDTH = "200px";
+/**
+ * The tag sits on the line above the change, so it has to paint over that line to be readable —
+ * including any diff highlight already on it, which would otherwise slice straight through the tag.
+ * Hence one level above `akEditorUnitZIndex`, where the highlights sit; exported because the
+ * change's own highlight is stacked one level below it — see `stackBelowContributorTagStyle` in
+ * `createInlineChangedDecoration`.
+ *
+ * Painting above its own highlight is only safe because the tag can never reach it: `bottom: 100%`
+ * puts the root's bottom edge exactly on the highlight's top edge, and the root's `overflow: clip`
+ * keeps every pixel the tag paints inside it.
+ */
+export declare const CONTRIBUTOR_TAG_Z_INDEX = 2;
+/**
+ * The plugin's whole side of the tag's motion: the fade and the hidden state are
+ * `contributorTagStyles` in both EditorContentContainer stylesheets, keyed on this literal and the
+ * one below — rename in step. This package cannot import `@atlaskit/editor-core` at runtime, so the
+ * plugin emits the hook and editor-core owns the rule, as `VanillaTooltip` does with
+ * `VANILLA_TOOLTIP_DEFAULT_CLASS`.
+ */
+export declare const CONTRIBUTOR_TAG_CLASS = "ak-editor-diff-contributor-tag";
+/** Toggled by the controller to move the tag between the fade's two ends. */
+export declare const CONTRIBUTOR_TAG_REVEALED_ATTRIBUTE = "data-revealed";
+/**
+ * Backstop for removing a fading-out tag: a cancelled transition fires no `transitionend`. Must stay
+ * above the fade's 600ms, which lives in another package's stylesheet and cannot be read back as a
+ * number — hence the wide margin. Raise in step with that duration.
+ */
+export declare const TAG_EXIT_FALLBACK_MS = 1200;
 export type ContributorTagDom = {
     avatars: HTMLSpanElement;
     name: HTMLSpanElement;

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

@@ -38,11 +38,19 @@ export declare class ContributorTagController {
     private fullLabel;
     private host;
     private isDestroyed;
-    private isHighlightHovered;
-    private isHoveredOrFocused;
-    private maxWidthPx;
+    /** Last visibility written, so a teardown knows whether there is anything on screen to fade. */
+    private isVisible;
     private model;
-    private resizeObserver;
+    /**
+     * Everything currently asking for the tag to be up, other than the model: each hovered highlight,
+     * the tag itself while the pointer is on it, and `FOCUS_SOURCE` while it holds focus.
+     *
+     * One set rather than independent booleans, which is what let the exit's trailing delay go: a
+     * pointer crossing from the highlight onto the tag removes one member and adds another in the same
+     * dispatch, so no style is resolved in between and the browser never starts the exit. Booleans
+     * could not see each other, so the crossing wrote the tag out and straight back in.
+     */
+    private revealSources;
     private tooltip;
     private tooltipContent;
     private unbindHighlights;
@@ -53,28 +61,40 @@ export declare class ContributorTagController {
     destroy(): void;
     private findModel;
     private applyModel;
-    /** Takes the tag's DOM down, keeping the subscription so a republished model redraws it. */
+    /**
+     * Takes the tag's DOM down, keeping the subscription so a republished model redraws it.
+     *
+     * A tag that is still on screen is released here and fades out on its own, so a republished
+     * model's tag fades in over the top of the outgoing one — see `fadeTagOut`.
+     */
     private teardownTag;
     private bindTag;
+    /** One listener shape for every reveal source, so all of them land in the same set. */
+    private trackRevealSource;
     private renderAvatars;
     private renderLabels;
     private accentOf;
     private applyAccent;
-    /** Width clamp and visibility — the two things that are not carried by the model alone. */
-    private applyStyles;
     /**
-     * The full label is always the tooltip, whether or not the name it draws is clipped: the tag is
-     * never wider than the highlight, so a name that fits at one width is ellipsised at the next, and
-     * a connected pair spells out a contributor the tag does not show at any width.
+     * Visibility — the one thing the model does not carry on its own, because hover is not in it.
+     *
+     * One idempotent attribute write, with nothing to guard: whether the flip is a real one, whether
+     * the tag is attached yet, and whether motion is wanted at all are all the stylesheet's to answer.
+     */
+    private applyVisibility;
+    /**
+     * The full label is always the tooltip, whether or not the name it draws is clipped: a name longer
+     * than `MAX_TAG_WIDTH` is ellipsised, and a connected pair spells out a contributor the tag does
+     * not show at any width.
      *
      * `VanillaTooltip` has no "set new content" call, so it is rebuilt when the label changes — the
      * shape of `syncVanillaDisabledTooltip` in `mentionNodeView`.
      */
     private syncTooltip;
     /**
-     * Observes the highlight this tag describes, for what CSS here cannot see: its hover state (the
+     * Observes the highlight this tag describes, for what CSS here cannot see: its hover state. The
      * highlight is a ProseMirror decoration in a different DOM subtree, so listeners are bound
-     * imperatively via `data-diff-id`) and the width the tag is clamped to.
+     * imperatively via `data-diff-id`.
      *
      * Deliberately not routed through plugin state: a transaction per pointer move would re-run the
      * memoised decoration calculation.