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

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

@@ -3,43 +3,98 @@ export const CONTRIBUTOR_TAG_TESTID = 'diff-contributor-tag';
 export 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 const MIN_TAG_WIDTH = '28px';
+export 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 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 const CONTRIBUTOR_TAG_CLASS = 'ak-editor-diff-contributor-tag';
+
+/** Toggled by the controller to move the tag between the fade's two ends. */
+export 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 const TAG_EXIT_FALLBACK_MS = 1200;
 
 // Positioned against the host widget its decoration renders on the change's first character:
 // `bottom: 100%` lifts the tag onto the line above, `inset-inline-start` starts it on that
 // character.
 const constraintStyle = convertToInlineCss({
-  display: 'block',
+  // `flex`, not `block`: a block box lays the tag on a line box whose strut is the *paragraph's*
+  // line-height (~24px) against the tag's ~20px, so `bottom: 100%` pins that leftover strut to the
+  // change and the tag floats above it. A flex container has no line box.
+  display: 'flex',
   position: 'absolute',
   bottom: '100%',
   insetInlineStart: 0,
+  // On the root, since that is the absolutely positioned box; the tag below fills it.
+  maxWidth: MAX_TAG_WIDTH,
   minWidth: 0,
-  // The tag may cover surrounding text, so it has to paint over it. Matches `akEditorUnitZIndex`.
-  zIndex: 1,
+  // This box's bottom edge is the join with the highlight, and the tag paints *above* that
+  // highlight — so anything spilling past this edge would read as the tag laid on top of the change
+  // rather than attached to it. The reveal's `translateY` is exactly that spill: it starts the tag
+  // 4px low, and clipping the part that hangs over the highlight turns the rise into an unfurl out
+  // of the join. `clip`, not `hidden`: `hidden` would make this a scroll container, and focusing the
+  // tag mid-reveal would scroll it 4px out of alignment for good.
+  //
+  // The tooltip is unaffected — it is a `popover`, so it paints in the top layer, which no
+  // ancestor's clip reaches.
+  overflow: 'clip',
+  zIndex: CONTRIBUTOR_TAG_Z_INDEX,
   // It renders inside the document and it is not content: dragging a selection across the change
   // must not select it.
   userSelect: 'none'
 });
 
-// `backgroundColor`, `borderBottomColor` and the visibility come from the model, and are set by the
-// controller.
+// `backgroundColor` comes from the model, and is set by the controller. `opacity`, `pointer-events`
+// and the transition between their two states are in `contributorTagStyles` — see
+// `CONTRIBUTOR_TAG_CLASS`.
 const tagStyle = convertToInlineCss({
   display: 'inline-flex',
   alignItems: 'center',
   gap: "var(--ds-space-050, 4px)",
-  // Never wider than the highlight; overflow is ellipsised on the name below.
+  // Never wider than `MAX_TAG_WIDTH` on the root; overflow is ellipsised on the name below.
   maxWidth: '100%',
   minWidth: 0,
   overflow: 'hidden',
   paddingInline: "var(--ds-space-050, 4px)",
   paddingBlock: "var(--ds-space-025, 2px)",
-  borderRadius: "var(--ds-radius-small, 4px)",
-  borderBottomStyle: 'solid',
-  borderBottomWidth: "var(--ds-border-width-selected, 2px)",
-  boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #1E1F2126, 0px 0px 1px #1E1F214f)",
+  // Top corners only: the bottom edge butts onto the change, and a rounded corner there would let
+  // the page background through at the join.
+  borderTopLeftRadius: "var(--ds-radius-small, 4px)",
+  borderTopRightRadius: "var(--ds-radius-small, 4px)",
+  borderBottomLeftRadius: 0,
+  borderBottomRightRadius: 0,
+  // Deliberately no bottom border: the change already carries the accent as its own underline, and
+  // a second rule directly above it reads as two objects rather than one label on one change.
+  //
+  // Deliberately no `elevation.shadow.overlay`: its `0 8px 12px` offset casts downwards onto the
+  // change, which reads as a gap between the tag and the content it captions.
   font: "var(--ds-font-body-small, normal 400 12px/16px \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
   whiteSpace: 'nowrap',
   boxSizing: 'border-box'
@@ -86,6 +141,7 @@ const createSpan = (doc, style, attributes = {}) => {
 export const buildContributorTagDom = doc => {
   const root = createSpan(doc, constraintStyle);
   const tag = createSpan(doc, tagStyle, {
+    class: CONTRIBUTOR_TAG_CLASS,
     'data-testid': CONTRIBUTOR_TAG_TESTID,
     // Deliberately no `aria-label`: it would be announced ahead of the element's contents, but
     // design requires the contributor *after* the change — hence the visually hidden label.

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/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/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)"
   };
 }