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

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

@@ -1,9 +1,9 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-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';
 const getContributorName = (contributor, formatMessage) => {
@@ -22,8 +22,8 @@ const 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.
  */
 const getTagAccent = ({
   colorScheme,
@@ -35,17 +35,66 @@ const getTagAccent = ({
   return getAccentTokens(accent);
 };
 
-/** The line the change starts on: topmost of its fragments, leftmost among those. */
-const findChangeStartLine = highlights => {
-  let start;
-  for (const highlight of highlights) {
-    for (const rect of highlight.getClientRects()) {
-      if (!start || rect.top < start.top - 1 || Math.abs(rect.top - start.top) <= 1 && rect.left < start.left) {
-        start = rect;
+/**
+ * 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.
+ */
+const FOCUS_SOURCE = Symbol('contributor-tag-focus');
+
+/** Moves the tag between the two ends of the fade `contributorTagStyles` declares. */
+const 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.
+ */
+const willTransition = tag => window.getComputedStyle(tag).transitionDuration.split(',').some(duration => 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.
+ */
+const fadeTagOut = (tag, release) => {
+  setRevealed(tag, false);
+
+  // Nothing to wait for: reduced motion, or no stylesheet to fade it with.
+  if (!willTransition(tag)) {
+    release();
+    return;
+  }
+  let unbind;
+  let isFinished = false;
+  const 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 ? 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: event => {
+      if (event.target === tag && event.propertyName === 'opacity') {
+        finish();
       }
     }
-  }
-  return start;
+  });
+  const fallbackId = setTimeout(finish, TAG_EXIT_FALLBACK_MS);
 };
 
 /** The contributors a tag draws, keyed so a republished model can be recognised as the same pair. */
@@ -71,8 +120,18 @@ export class ContributorTagController {
     _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;
   }
@@ -124,56 +183,96 @@ export class ContributorTagController {
     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`.
+   */
   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 ? 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 ? void 0 : _this$tooltip.destroy();
     this.tooltip = undefined;
     this.tooltipContent = undefined;
-    this.avatars.forEach(avatar => avatar.destroy());
+    const {
+      dom,
+      isVisible
+    } = this;
+    // Destroying an avatar removes its element, so the avatars go with whoever removes the tag —
+    // destroyed here and it would fade out empty.
+    const {
+      avatars
+    } = this;
     this.avatars = [];
-    (_this$dom = this.dom) === null || _this$dom === void 0 ? 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;
+    }
+    const release = () => {
+      avatars.forEach(avatar => 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);
   }
   bindTag({
     tag
   }) {
-    const setHoveredOrFocused = isHoveredOrFocused => () => {
-      this.isHoveredOrFocused = isHoveredOrFocused;
-      this.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. */
+  trackRevealSource(source, isRevealing) {
+    return () => {
+      if (isRevealing) {
+        this.revealSources.add(source);
+      } else {
+        this.revealSources.delete(source);
+      }
+      this.applyVisibility();
+    };
+  }
   renderAvatars(model) {
-    var _this$dom2;
+    var _this$dom;
     const {
       avatars: container
-    } = (_this$dom2 = this.dom) !== null && _this$dom2 !== void 0 ? _this$dom2 : {};
+    } = (_this$dom = this.dom) !== null && _this$dom !== void 0 ? _this$dom : {};
     if (!container) {
       return;
     }
@@ -231,8 +330,8 @@ export class ContributorTagController {
     const agentName = isPrimaryAgent ? primaryName : secondaryName;
     const 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,
@@ -256,30 +355,30 @@ export class ContributorTagController {
     }
     const 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(avatar => avatar.setRingColor(accent.background));
   }
 
-  /** Width clamp and visibility — the two things that are not carried by the model alone. */
-  applyStyles() {
+  /**
+   * 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.
+   */
+  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(${Math.round(this.maxWidthPx)}px, ${MIN_TAG_WIDTH})`);
-    const 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');
+    const 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`.
@@ -308,9 +407,9 @@ export class ContributorTagController {
   }
 
   /**
-   * 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.
@@ -327,8 +426,8 @@ export class ContributorTagController {
     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.
     const pendingBind = ++this.bindToken;
     queueMicrotask(() => {
       if (!this.isDestroyed && pendingBind === this.bindToken) {
@@ -337,66 +436,27 @@ export class ContributorTagController {
     });
   }
   bindHighlightState(selector) {
-    // 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.
-    const editorRoot = this.options.getEditorRoot();
-    const highlights = editorRoot === null || editorRoot === void 0 ? void 0 : editorRoot.querySelectorAll(selector);
-    if (!editorRoot || !(highlights !== null && highlights !== void 0 && highlights.length)) {
+    var _this$options$getEdit;
+    // 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.
+    const 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.
-    const ownElements = Array.from(editorRoot.querySelectorAll(`[data-diff-id="${this.options.diffId}"]`));
-    const 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.
-      const lineTops = new Set();
-      for (const highlight of ownElements) {
-        for (const rect of highlight.getClientRects()) {
-          lineTops.add(Math.round(rect.top));
-        }
-      }
-
-      // A wrapped change's first line says nothing useful about how wide the tag may be.
-      this.maxWidthPx = lineTops.size > 1 ? undefined : (_findChangeStartLine = findChangeStartLine(ownElements)) === null || _findChangeStartLine === void 0 ? void 0 : _findChangeStartLine.width;
-      this.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);
-    for (const parent of new Set(ownElements.map(({
-      parentElement
-    }) => parentElement))) {
-      if (parent) {
-        this.resizeObserver.observe(parent);
-      }
-    }
-
-    // `bindAll` takes a single target, and a change can render more than one highlight.
+    // `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(highlight => bindAll(highlight, [{
       type: 'mouseenter',
-      listener: () => {
-        this.isHighlightHovered = true;
-        this.applyStyles();
-      }
+      listener: this.trackRevealSource(highlight, true)
     }, {
       type: 'mouseleave',
-      listener: () => {
-        this.isHighlightHovered = false;
-        this.applyStyles();
-      }
+      listener: this.trackRevealSource(highlight, false)
     }]));
   }
   unbindHighlightState() {
-    var _this$resizeObserver;
-    (_this$resizeObserver = this.resizeObserver) === null || _this$resizeObserver === void 0 ? void 0 : _this$resizeObserver.disconnect();
-    this.resizeObserver = undefined;
     this.unbindHighlights.forEach(unbind => unbind());
     this.unbindHighlights = [];
   }

package/dist/es2019/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 @@ const AI_BOT_ICON_SVG = `<svg width="12" height="12" fill="none" viewBox="0 0 16
 
 /** `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 = {
   aiBot: AI_BOT_ICON_SVG,
+  claude: CLAUDE_ICON_SVG,
   person: PERSON_ICON_SVG,
   rovoHex: ROVO_HEX_ICON_SVG
 };

package/dist/esm/pm-plugins/calculateDiff/calculateDiffDecorations.js

@@ -14,7 +14,7 @@ import { Mapping } from '@atlaskit/editor-prosemirror/transform';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { UNSAFE_expValNoExposure } from '@atlaskit/platform-feature-experiments/unsafe-exp-val-no-exposure';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
-import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { areDocsEqualByBlockStructureAndText } from '../areDocsEqualByBlockStructureAndText';
 import { createDocMarginAnchorWidget } from '../decorations/createAnchorDecorationWidgets';
 import { createBlockChangedDecoration } from '../decorations/createBlockChangedDecoration';
@@ -514,8 +514,9 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref8
       // gets highlighted, and structural gaps never do.
       var isSmartNodeLevel = diffType === 'smart' && fg('platform_editor_ai_smart_diff') && smartChangeLevel(change) === 'node';
       // For a large inserted table, skip the per-cell inline decorations that
-      // freeze the browser on re-render. Only active in the AIFC experience.
-      var useCoarseTableDecoration = isSmartNodeLevel && expValEquals('platform_editor_ai_new_aifc_editor_experience', 'isBackendReviewMomentEnabled', true) && isLargeInsertedTableRange(tr.doc, change.fromB, change.toB);
+      // freeze the browser on re-render. Only active when Review moment is
+      // eligible (xstate + M1).
+      var useCoarseTableDecoration = isSmartNodeLevel && expValEqualsNoExposure('platform_editor_ai_xstate_migration', 'isEnabled', true) && UNSAFE_expValNoExposure('platform_editor_ai_streaming_ux_experience_m1', 'isEnabled', false) === true && isLargeInsertedTableRange(tr.doc, change.fromB, change.toB);
       // Whether the deleted-content widget will actually be rendered for this
       // change. Used to decide if indicator anchor positions should be adjusted
       // inward — when the widget is present the anchor must stay at the block
@@ -714,7 +715,7 @@ var calculateDiffDecorationsInner = function calculateDiffDecorationsInner(_ref8
       })));
       // If the original node position is known (e.g. a panel type change), also render
       // the old block node as a "deleted" widget so the reviewer sees the before/after.
-      var isSmartNodeLevelAttrChange = diffType === 'smart' && fg('platform_editor_ai_smart_diff') && expValEquals('platform_editor_ai_new_aifc_editor_experience', 'isEnabled', true);
+      var isSmartNodeLevelAttrChange = diffType === 'smart' && fg('platform_editor_ai_smart_diff') && expValEqualsNoExposure('platform_editor_ai_xstate_migration', 'isEnabled', true) && UNSAFE_expValNoExposure('platform_editor_ai_streaming_ux_experience_m1', 'isEnabled', false) === true;
       if (isSmartNodeLevelAttrChange && change.fromA !== undefined && change.toA !== undefined) {
         var placeBelow = deletedDiffPlacement === 'bottom';
         decorations.push.apply(decorations, _toConsumableArray(createNodeChangedDecorationWidget(_objectSpread(_objectSpread({

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

@@ -126,29 +126,54 @@ export var isContributorTagsEnabled = function isContributorTagsEnabled(stepAttr
 export var createAttributionColorMap = function createAttributionColorMap(stepAttributions) {
   var colors = new Map();
   var allocatedColors = new Set();
+
+  // Reserve shared brand colours before hashing other actors, regardless of step order.
   var _iterator2 = _createForOfIteratorHelper(stepAttributions),
     _step2;
   try {
     for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
       var attribution = _step2.value;
       var identity = getAttributionIdentity(attribution);
-      if (!identity || colors.has(identity.key)) {
+      if (!identity) {
         continue;
       }
-      var _getParticipantColor = getParticipantColor(identity.colorSeed),
-        index = _getParticipantColor.index;
-      var hashedColor = HASHED_PARTICIPANT_COLOR_SCHEMES[index];
+      var _getParticipantColor = getParticipantColor(identity.colorSeed, attribution === null || attribution === void 0 ? void 0 : attribution.agentType),
+        index = _getParticipantColor.index,
+        isFixed = _getParticipantColor.isFixed;
+      var color = HASHED_PARTICIPANT_COLOR_SCHEMES[index];
+      if (isFixed && color) {
+        colors.set(identity.key, color);
+        allocatedColors.add(color);
+      }
+    }
+  } catch (err) {
+    _iterator2.e(err);
+  } finally {
+    _iterator2.f();
+  }
+  var _iterator3 = _createForOfIteratorHelper(stepAttributions),
+    _step3;
+  try {
+    for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+      var _attribution = _step3.value;
+      var _identity = getAttributionIdentity(_attribution);
+      if (!_identity || colors.has(_identity.key)) {
+        continue;
+      }
+      var _getParticipantColor2 = getParticipantColor(_identity.colorSeed),
+        _index = _getParticipantColor2.index;
+      var hashedColor = HASHED_PARTICIPANT_COLOR_SCHEMES[_index];
       if (!hashedColor) {
         continue;
       }
       var participantColorScheme = getAvailableColor(hashedColor, allocatedColors);
-      colors.set(identity.key, participantColorScheme);
+      colors.set(_identity.key, participantColorScheme);
       allocatedColors.add(participantColorScheme);
     }
   } catch (err) {
-    _iterator2.e(err);
+    _iterator3.e(err);
   } finally {
-    _iterator2.f();
+    _iterator3.f();
   }
   return colors;
 };

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

@@ -65,6 +65,18 @@ var bgSubtlerPressedMap = {
   gray: "var(--ds-background-accent-gray-subtler-pressed, #8C8F97)",
   lime: "var(--ds-background-accent-lime-subtler-pressed, #B3DF72)"
 };
+var bgBolderMap = {
+  green: "var(--ds-background-accent-green-bolder, #1F845A)",
+  teal: "var(--ds-background-accent-teal-bolder, #227D9B)",
+  blue: "var(--ds-background-accent-blue-bolder, #1868DB)",
+  purple: "var(--ds-background-accent-purple-bolder, #964AC0)",
+  red: "var(--ds-background-accent-red-bolder, #C9372C)",
+  orange: "var(--ds-background-accent-orange-bolder, #BD5B00)",
+  yellow: "var(--ds-background-accent-yellow-bolder, #946F00)",
+  magenta: "var(--ds-background-accent-magenta-bolder, #AE4787)",
+  gray: "var(--ds-background-accent-gray-bolder, #6B6E76)",
+  lime: "var(--ds-background-accent-lime-bolder, #5B7F24)"
+};
 var borderAccentMap = {
   green: "var(--ds-border-accent-green, #22A06B)",
   teal: "var(--ds-border-accent-teal, #2898BD)",
@@ -98,6 +110,9 @@ function bgSubtlestPressed(color) {
 function bgSubtler(color) {
   return bgSubtlerMap[color];
 }
+function bgBolder(color) {
+  return bgBolderMap[color];
+}
 function bgSubtlerPressed(color) {
   return bgSubtlerPressedMap[color];
 }
@@ -108,12 +123,18 @@ function textAccent(color) {
   return textAccentMap[color];
 }
 
-/** 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 function getAccentTokens(color) {
   return {
-    background: bgSubtlest(color),
-    border: borderAccent(color),
-    text: textAccent(color)
+    background: bgBolder(color),
+    text: "var(--ds-text-inverse, #FFFFFF)"
   };
 }
 

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

@@ -5,6 +5,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
+import { CONTRIBUTOR_TAG_Z_INDEX } from '../../ui/ContributorTag/buildContributorTagDom';
 import { isExtendedEnabled } from '../isExtendedEnabled';
 import { hasVisibleContent } from '../utils/hasVisibleContent';
 import { buildAtomicInlineChangedCSSVariables, buildDeletedInlineContentStyleExtended, buildDeletedInlineStyle, buildDeletedInlineStyleStandard, buildInsertStyle, buildInsertStyleActive, buildInsertStyleExtended, buildInsertStyleExtendedActive, buildInsertStyleExtendedNoUnderline, buildInsertStyleExtendedNoUnderlineActive } from './colorSchemes/factory';
@@ -17,6 +18,25 @@ import { REVEAL_ATTR, resolveRevealStyle } from './revealStyles';
 var displayNoneStyle = convertToInlineCss({
   display: 'none'
 });
+
+/**
+ * Stacks the change's highlight below its contributor tag, so no highlight can slice through a tag:
+ * a tag overlays the line *above* its own change, and a highlight already on that line — the tail of
+ * this change, or another change entirely — would otherwise paint straight over it.
+ *
+ * The tag still reads as attached to the change rather than laid on top of it, because it cannot
+ * paint over this highlight at all: its bottom edge is pinned to the highlight's top edge and
+ * clipped there. See `CONTRIBUTOR_TAG_Z_INDEX`.
+ *
+ * prosemirror-view places the tag's host widget as a *sibling* of this decoration's span, so
+ * painting order is decided by stacking level — and the host is absolutely positioned at
+ * `CONTRIBUTOR_TAG_Z_INDEX`. `position: relative` is what makes `z-index` apply to an otherwise
+ * static inline box; it adds no offset.
+ */
+var stackBelowContributorTagStyle = convertToInlineCss({
+  position: 'relative',
+  zIndex: CONTRIBUTOR_TAG_Z_INDEX - 1
+});
 var getColorScheme = function getColorScheme(colorScheme) {
   return colorSchemeRegistry[colorScheme !== null && colorScheme !== void 0 ? colorScheme : 'standard'];
 };
@@ -176,8 +196,23 @@ export var createInlineChangedDecoration = function createInlineChangedDecoratio
   });
   var isAtomicInlineInsertion = isAtomicInlineNode && isInserted;
   var atomicInlineAttrs = isAtomicInlineInsertion ? resolveAtomicInlineAttrs(inlineNodeName, colorScheme, colors) : undefined;
+
+  // Built from the raw change range, not the indicator anchors resolved below: a tag lines up with
+  // the changed text, while the bar's anchors are held on a block boundary when a deleted widget
+  // renders beside them.
+  //
+  // Built up here, ahead of where it is pushed, so the highlight's stacking below keys off whether a
+  // tag exists rather than re-deriving the condition and risking disagreement.
+  var tagWidget = canTagChange && doc ? createContributorTagWidget({
+    doc: doc,
+    from: change.fromB,
+    to: change.toB,
+    diffId: diffId,
+    mountContext: tagMountContext
+  }) : undefined;
+  var inlineStyle = [style, atomicInlineAttrs === null || atomicInlineAttrs === void 0 ? void 0 : atomicInlineAttrs.styleSuffix, tagWidget ? stackBelowContributorTagStyle : undefined].filter(Boolean).join('');
   var decorations = [Decoration.inline(change.fromB, change.toB, _objectSpread(_objectSpread(_objectSpread({
-    style: atomicInlineAttrs ? "".concat(style).concat(atomicInlineAttrs.styleSuffix) : style
+    style: inlineStyle
   }, atomicInlineAttrs && {
     class: atomicInlineAttrs.className
   }), revealed && _defineProperty({}, REVEAL_ATTR, revealed.role)), {}, {
@@ -228,19 +263,10 @@ export var createInlineChangedDecoration = function createInlineChangedDecoratio
     })));
   }
 
-  // Built from the raw change range, not the anchors above: a tag lines up with the changed text,
-  // while the bar's anchors are held on a block boundary when a deleted widget renders beside them.
-  if (canTagChange && doc) {
-    var tagWidget = createContributorTagWidget({
-      doc: doc,
-      from: change.fromB,
-      to: change.toB,
-      diffId: diffId,
-      mountContext: tagMountContext
-    });
-    if (tagWidget) {
-      decorations.push(tagWidget);
-    }
+  // Pushed after the indicator anchors so the decoration order is unchanged — see `tagWidget` above
+  // for why it is built before them.
+  if (tagWidget) {
+    decorations.push(tagWidget);
   }
   return decorations;
 };