bpmn-js 18.20.0 → 18.22.0

package/dist/bpmn-modeler.development.js

@@ -1,5 +1,5 @@
 /*!
- * bpmn-js - bpmn-modeler v18.20.0
+ * bpmn-js - bpmn-modeler v18.22.0
  *
  * Copyright (c) 2014-present, camunda Services GmbH
  *
@@ -8,7 +8,7 @@
  *
  * Source Code: https://github.com/bpmn-io/bpmn-js
  *
- * Date: 2026-07-06
+ * Date: 2026-07-23
  */
 (function (global, factory) {
 	typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -742,8 +742,9 @@
 	}
 
 	/**
+	 * @template {(...args: any[]) => any} T
 	 * @typedef { {
-	 *   (...args: any[]): any;
+	 *   (...args: Parameters<T>): void;
 	 *   flush: () => void;
 	 *   cancel: () => void;
 	 * } } DebouncedFunction
@@ -756,10 +757,12 @@
 	 * Lodash-style the function exposes methods to `#clear`
 	 * and `#flush` to control internal behavior.
 	 *
-	 * @param  {Function} fn
-	 * @param  {Number} timeout
+	 * @template {(...args: any[]) => any} T
+	 *
+	 * @param  {T} fn
+	 * @param  {number} timeout
 	 *
-	 * @return {DebouncedFunction} debounced function
+	 * @return {DebouncedFunction<T>} debounced function
 	 */
 	function debounce(fn, timeout) {
 
@@ -806,7 +809,7 @@
 	  }
 
 	  /**
-	   * @type { DebouncedFunction }
+	   * @type {DebouncedFunction<T>}
 	   */
 	  function callback(...args) {
 	    lastNow = Date.now();
@@ -4842,6 +4845,8 @@
 	 * @typedef {import('./Types.js').ParentLike } ParentLike
 	 * @typedef {import('./Types.js').ShapeLike} ShapeLike
 	 *
+	 * @typedef {ShapeLike|ConnectionLike|RootLike|string} ElementOrIdentifier
+	 *
 	 * @typedef { {
 	 *   container?: HTMLElement;
 	 *   deferUpdate?: boolean;
@@ -5065,9 +5070,16 @@
 	  // debounce canvas.viewbox.changed events when deferUpdate is set
 	  // to help with potential performance issues
 	  if (config.deferUpdate) {
-	    this._viewboxChanged = debounce(bind$1(this._viewboxChanged, this), 300);
+	    this._viewboxChanged = debounce(this._viewboxChanged, 300);
 	  }
 
+	  /**
+	   * Schedule focus restoration.
+	   *
+	   * @type {import('min-dash').DebouncedFunction<typeof this.restoreFocus>}
+	   */
+	  this._restoreFocus = debounce(this._restoreFocus, 0);
+
 	  eventBus.on('diagram.init', () => {
 
 	    /**
@@ -5106,6 +5118,8 @@
 	};
 
 	Canvas.prototype._destroy = function() {
+	  this._restoreFocus.cancel();
+
 	  this._eventBus.fire('canvas.destroy', {
 	    svg: this._svg,
 	    viewport: this._viewport
@@ -5169,9 +5183,17 @@
 	};
 
 	/**
-	* Sets focus on the canvas SVG element if `document.body` is currently focused.
-	*/
+	 * Restores focus on the canvas SVG element if `document.body` is
+	 * currently focused.
+	 *
+	 * Safely executes on the next render cycle - never prevents pending
+	 * (in flight) user clicks.
+	 */
 	Canvas.prototype.restoreFocus = function() {
+	  this._restoreFocus();
+	};
+
+	Canvas.prototype._restoreFocus = function() {
 	  if (document.activeElement === document.body) {
 	    this.focus();
 	  }
@@ -5373,26 +5395,40 @@
 
 
 	/**
-	 * Returns the plane which contains the given element.
+	 * Returns the plane which contains the given element(s).
 	 *
-	 * @param {ShapeLike|ConnectionLike|string} element The element or its ID.
+	 * If multiple elements are passed, the shared plane is returned
+	 * (or undefined if no shared plane exists).
+	 *
+	 * @param {ElementOrIdentifier|ElementOrIdentifier[]} element
 	 *
 	 * @return {RootLike|undefined} The root of the element.
 	 */
 	Canvas.prototype.findRoot = function(element) {
-	  if (typeof element === 'string') {
-	    element = this._elementRegistry.get(element);
-	  }
 
-	  if (!element) {
-	    return;
-	  }
+	  const elements = this._resolveElements(element);
+
+	  let root;
+
+	  for (const element of elements) {
+	    const plane = this._findPlaneForRoot(
+	      findRoot(element)
+	    );
+
+	    if (!plane) {
+	      return;
+	    }
+
+	    if (root && plane.rootElement !== root) {
+
+	      // no shared root
+	      return undefined;
+	    }
 
-	  const plane = this._findPlaneForRoot(
-	    findRoot(element)
-	  ) || {};
+	    root = plane.rootElement;
+	  }
 
-	  return plane.rootElement;
+	  return root;
 	};
 
 	/**
@@ -5412,6 +5448,33 @@
 	  });
 	};
 
+	/**
+	 * @param {ElementOrIdentifier} element
+	 *
+	 * @return {ShapeLike|ConnectionLike|RootLike|undefined}
+	 */
+	Canvas.prototype._resolveElement = function(element) {
+
+	  if (typeof element === 'string') {
+	    return this._elementRegistry.get(element);
+	  }
+
+	  return element;
+	};
+
+	/**
+	 * @param {ElementOrIdentifier|ElementOrIdentifier[]} elements
+	 *
+	 * @return {Array<ShapeLike|ConnectionLike|RootLike>}
+	 */
+	Canvas.prototype._resolveElements = function(elements) {
+
+	  if (!isArray$2(elements)) {
+	    elements = [ elements ];
+	  }
+
+	  return elements.map(element => this._resolveElement(element)).filter(Boolean);
+	};
 
 	/**
 	 * Returns the html element that encloses the
@@ -5429,9 +5492,7 @@
 	Canvas.prototype._updateMarker = function(element, marker, add) {
 	  let container;
 
-	  if (!element.id) {
-	    element = this._elementRegistry.get(element);
-	  }
+	  element = this._resolveElement(element);
 
 	  element.markers = element.markers || new Set();
 
@@ -5514,9 +5575,7 @@
 	 * @param {string} marker The marker.
 	 */
 	Canvas.prototype.hasMarker = function(element, marker) {
-	  if (!element.id) {
-	    element = this._elementRegistry.get(element);
-	  }
+	  element = this._resolveElement(element);
 
 	  if (!element.markers) {
 	    return false;
@@ -5613,9 +5672,7 @@
 	 */
 	Canvas.prototype.removeRootElement = function(rootElement) {
 
-	  if (typeof rootElement === 'string') {
-	    rootElement = this._elementRegistry.get(rootElement);
-	  }
+	  rootElement = this._resolveElement(rootElement);
 
 	  const plane = this._findPlaneForRoot(rootElement);
 
@@ -6112,34 +6169,44 @@
 	};
 
 	/**
-	 * Scrolls the viewbox to contain the given element.
+	 * Scrolls the viewbox to contain the given element or elements.
 	 * Optionally specify a padding to be applied to the edges.
 	 *
-	 * @param {ShapeLike|ConnectionLike|string} element The element to scroll to or its ID.
+	 * The canvas navigates to the shared root of the element(s). If no shared
+	 * root can be found, no navigation is performed.
+	 *
+	 * @param {ElementOrIdentifier|ElementOrIdentifier[]} element The element(s) to scroll to or their ID(s).
 	 * @param {RectTRBL|number} [padding=100] The padding to be applied. Can also specify top, bottom, left and right.
 	 */
 	Canvas.prototype.scrollToElement = function(element, padding) {
 	  let defaultPadding = 100;
 
-	  if (typeof element === 'string') {
-	    element = this._elementRegistry.get(element);
+	  const elements = this._resolveElements(element);
+
+	  if (!elements.length) {
+	    return;
 	  }
 
-	  // set to correct rootElement
-	  const rootElement = this.findRoot(element);
+	  const rootElement = this.findRoot(elements);
+
+	  if (!rootElement) {
+	    return;
+	  }
 
 	  if (rootElement !== this.getRootElement()) {
 	    this.setRootElement(rootElement);
 	  }
 
-	  // element is rootElement, do not change viewport
-	  if (rootElement === element) {
+	  const visibleElements = elements.filter(e => e != rootElement);
+
+	  if (!visibleElements.length) {
 	    return;
 	  }
 
 	  if (!padding) {
 	    padding = {};
 	  }
+
 	  if (typeof padding === 'number') {
 	    defaultPadding = padding;
 	  }
@@ -6151,7 +6218,7 @@
 	    left: padding.left || defaultPadding
 	  };
 
-	  const elementBounds = getBBox(element),
+	  const elementBounds = getBBox(visibleElements),
 	        elementTrbl = asTRBL(elementBounds),
 	        viewboxBounds = this.viewbox(),
 	        zoom = this.zoom();
@@ -22458,7 +22525,7 @@
 	};
 
 	// document wide unique overlay ids
-	var ids$1 = new IdGenerator('ov');
+	var ids$2 = new IdGenerator('ov');
 
 	var LOW_PRIORITY$q = 500;
 
@@ -22590,7 +22657,7 @@
 	  this._canvas = canvas;
 	  this._elementRegistry = elementRegistry;
 
-	  this._ids = ids$1;
+	  this._ids = ids$2;
 
 	  /**
 	   * @type {OverlaysConfigDefault}
@@ -27791,11 +27858,27 @@
 	 * @typedef {import('./PopupMenuProvider.js').PopupMenuEntry} PopupMenuEntry
 	 */
 
+	/**
+	 * Compute the DOM `id` of a rendered popup menu entry.
+	 *
+	 * Used to wire the entry (`role="option"`) to the search field
+	 * via `aria-activedescendant`.
+	 *
+	 * @param {string} idPrefix
+	 * @param {PopupMenuEntry} entry
+	 *
+	 * @return {string}
+	 */
+	function getPopupMenuItemId(idPrefix, entry) {
+	  return `${ idPrefix }-entry-${ entry.id }`;
+	}
+
 	/**
 	 * Component that renders a popup menu entry.
 	 *
 	 * @param {Object} props
 	 * @param {string} props.key
+	 * @param {string} props.idPrefix
 	 * @param {PopupMenuEntry} props.entry
 	 * @param {boolean} props.selected
 	 * @param {(event: MouseEvent) => void} props.onMouseEnter
@@ -27804,6 +27887,7 @@
 	 */
 	function PopupMenuItem(props) {
 	  const {
+	    idPrefix,
 	    entry,
 	    selected,
 	    onMouseEnter,
@@ -27825,13 +27909,13 @@
     <li
       class=${ clsx('entry', { selected, disabled: entry.disabled }) }
       data-id=${ entry.id }
+      id=${ getPopupMenuItemId(idPrefix, entry) }
+      role="option"
+      aria-selected=${ selected || undefined }
+      aria-haspopup=${ entry.entries ? 'true' : undefined }
       title=${ entry.title }
-      aria-label=${ entry.title || entry.label }
       aria-disabled=${ entry.disabled || undefined }
-      tabIndex="0"
       onClick=${ handleClick }
-      onFocus=${ onMouseEnter }
-      onBlur=${ onMouseLeave }
       onMouseEnter=${ onMouseEnter }
       onMouseLeave=${ onMouseLeave }
       onDragStart=${ (event) => draggable && handleClick(event, 'dragstart') }
@@ -27851,15 +27935,17 @@
           ` : null }
 
           ${ entry.documentationRef && m$1`
-            <a class="djs-popup-entry-docs"
+            <a
+              class="djs-popup-entry-docs"
               href=${ entry.documentationRef }
               onClick=${ (event) => event.stopPropagation() }
-              title="Open element documentation"
-              aria-label="Open element documentation"
+              title="Open entry documentation"
+              tabIndex="-1"
+              aria-hidden="true"
               target="_blank"
               rel="noopener"
             >
-              <svg aria-hidden="true" width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path fill-rule="evenodd" clip-rule="evenodd" d="M10.6368 10.6375V5.91761H11.9995V10.6382C11.9995 10.9973 11.8623 11.3141 11.5878 11.5885C11.3134 11.863 10.9966 12.0002 10.6375 12.0002H1.36266C0.982345 12.0002 0.660159 11.8681 0.396102 11.6041C0.132044 11.34 1.52588e-05 11.0178 1.52588e-05 10.6375V1.36267C1.52588e-05 0.98236 0.132044 0.660173 0.396102 0.396116C0.660159 0.132058 0.982345 2.95639e-05 1.36266 2.95639e-05H5.91624V1.36267H1.36266V10.6375H10.6368ZM12 0H7.2794L7.27873 1.36197H9.68701L3.06507 7.98391L4.01541 8.93425L10.6373 2.31231V4.72059H12V0Z" fill="#818798"/>
               </svg>
             </a>
@@ -27897,6 +27983,11 @@
 	 * @param {PopupMenuEntry} props.selectedEntry
 	 * @param {(entry: PopupMenuEntry | null) => void} props.setSelectedEntry
 	 * @param {import('@bpmn-io/diagram-js-ui').Ref<boolean>} props.keyboardSelection
+	 * @param {string} props.idPrefix
+	 * @param {string} props.id
+	 * @param {string} [props.ariaLabel]
+	 * @param {number} [props.tabIndex]
+	 * @param {string} [props.ariaActivedescendant]
 	 */
 	function PopupMenuList(props) {
 	  const {
@@ -27904,6 +27995,11 @@
 	    setSelectedEntry,
 	    groupedEntries,
 	    keyboardSelection,
+	    idPrefix,
+	    id,
+	    ariaLabel,
+	    tabIndex,
+	    ariaActivedescendant,
 	    ...restProps
 	  } = props;
 
@@ -27915,8 +28011,6 @@
 	      return;
 	    }
 
-	    keyboardSelection.current = false;
-
 	    const containerEl = resultsRef.current;
 
 	    if (!containerEl)
@@ -27929,22 +28023,60 @@
 	    }
 	  }, [ selectedEntry ]);
 
+	  const handleMouseMove = () => {
+	    keyboardSelection.current = false;
+	  };
+
+	  const handleEntryMouseEnter = (entry) => {
+
+	    // Prevents keyboard selection from being overridden
+	    // by mouse hover when `scrollIntoView` is called.
+	    if (keyboardSelection.current) {
+	      return;
+	    }
+
+	    setSelectedEntry(entry);
+	  };
+
+	  const handleEntryMouseLeave = () => {
+	    if (keyboardSelection.current) {
+	      return;
+	    }
+
+	    setSelectedEntry(null);
+	  };
+
 	  return m$1`
-    <div class="djs-popup-results" ref=${ resultsRef }>
+    <div
+      class="djs-popup-results"
+      ref=${ resultsRef }
+      id=${ id }
+      role="listbox"
+      aria-label=${ ariaLabel }
+      tabIndex=${ tabIndex }
+      aria-activedescendant=${ ariaActivedescendant }
+      onMouseMove=${ handleMouseMove }
+    >
       ${ groupedEntries.map(group => m$1`
         ${ group.name && m$1`
-          <div key=${ group.id } class="entry-header" title=${ group.name }>
+          <div key=${ group.id } id=${ getGroupHeaderId(idPrefix, group) } class="entry-header" title=${ group.name }>
             ${ group.name }
           </div>
         ` }
-        <ul class="djs-popup-group" data-group=${ group.id }>
+        <ul
+          class="djs-popup-group"
+          data-group=${ group.id }
+          role="group"
+          aria-labelledby=${ group.name ? getGroupHeaderId(idPrefix, group) : undefined }
+        >
           ${ group.entries.map(entry => m$1`
             <${PopupMenuItem}
               key=${ entry.id }
+              idPrefix=${ idPrefix }
               entry=${ entry }
               selected=${ entry === selectedEntry }
-              onMouseEnter=${ () => setSelectedEntry(entry) }
-              onMouseLeave=${ () => setSelectedEntry(null) }
+              onMouseEnter=${ () => handleEntryMouseEnter(entry) }
+              onMouseLeave=${ handleEntryMouseLeave }
               ...${ restProps }
             />
           `) }
@@ -27957,6 +28089,10 @@
 
 	// helpers ////////////////
 
+	function getGroupHeaderId(idPrefix, group) {
+	  return `${ idPrefix }-group-${ group.id }`;
+	}
+
 	function scrollIntoView(el) {
 	  if (typeof el.scrollIntoViewIfNeeded === 'function') {
 	    el.scrollIntoViewIfNeeded();
@@ -27968,6 +28104,8 @@
 	  }
 	}
 
+	const ids$1 = new IdGenerator('djs-popup');
+
 	/**
 	 * @typedef {import('./PopupMenuProvider.js').PopupMenuEntry} PopupMenuEntry
 	 * @typedef {import('./PopupMenuProvider.js').PopupMenuActionEntry} PopupMenuActionEntry
@@ -27995,7 +28133,7 @@
 	 * @param {string} [props.title]
 	 * @param {boolean} [props.search]
 	 * @param {PopupMenuEmptyPlaceholder} [props.emptyPlaceholder]
-	 * @param {number} [props.width]
+	 * @param {number|string} [props.width]
 	 * @param {searchFn} props.searchFn
 	 */
 	function PopupMenuComponent(props) {
@@ -28084,6 +28222,12 @@
 	   */
 	  const keyboardSelection = A(false);
 
+	  // per instance basis to generate field IDs
+	  const idPrefix = T(() => ids$1.next(), []);
+
+	  const resultsId = `${ idPrefix }-results`;
+	  const activeDescendantId = selectedEntry && getPopupMenuItemId(idPrefix, selectedEntry);
+
 	  y(() => {
 	    const restore = restoreSelection.current;
 
@@ -28146,6 +28290,14 @@
 
 	  const handleKeyDown = q(event => {
 	    if (event.key === 'Enter' && selectedEntry) {
+	      const target = event.target;
+	      const isNativeActionTarget = !!closest(target, 'a, button', true);
+
+	      // let native controls handle <Enter> themselves
+	      if (isNativeActionTarget) {
+	        return;
+	      }
+
 	      if (selectedEntry.disabled) {
 	        return;
 	      }
@@ -28217,6 +28369,7 @@
       position=${ position }
       width=${ width }
       scale=${ scale }
+      navigationStack=${ navigationStack }
     >
       ${ displayHeader && m$1`
         <${PopupMenuHeader}
@@ -28241,7 +28394,16 @@
             <svg class="djs-popup-search-icon" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
               <path fill-rule="evenodd" clip-rule="evenodd" d="M9.0325 8.5H9.625L13.3675 12.25L12.25 13.3675L8.5 9.625V9.0325L8.2975 8.8225C7.4425 9.5575 6.3325 10 5.125 10C2.4325 10 0.25 7.8175 0.25 5.125C0.25 2.4325 2.4325 0.25 5.125 0.25C7.8175 0.25 10 2.4325 10 5.125C10 6.3325 9.5575 7.4425 8.8225 8.2975L9.0325 8.5ZM1.75 5.125C1.75 6.9925 3.2575 8.5 5.125 8.5C6.9925 8.5 8.5 6.9925 8.5 5.125C8.5 3.2575 6.9925 1.75 5.125 1.75C3.2575 1.75 1.75 3.2575 1.75 5.125Z" fill="#22242A"/>
             </svg>
-            <input type="text" spellcheck=${ false } aria-label="${ title || 'Search' }" />
+            <input
+              type="text"
+              spellcheck=${ false }
+              role="combobox"
+              aria-label="${ title || 'Search' }"
+              aria-expanded="true"
+              aria-controls=${ resultsId }
+              aria-activedescendant=${ activeDescendantId || undefined }
+              aria-autocomplete="list"
+            />
           </div>
           ` }
 
@@ -28257,7 +28419,31 @@
             setSelectedEntry=${ setSelectedEntry }
             keyboardSelection=${ keyboardSelection }
             onAction=${ handleEntryAction }
+            idPrefix=${ idPrefix }
+            id=${ resultsId }
+            ariaLabel=${ title || 'Results' }
+            tabIndex=${ searchable ? -1 : 0 }
+            ariaActivedescendant=${ searchable ? undefined : (activeDescendantId || undefined) }
           />
+
+          ${ selectedEntry && selectedEntry.documentationRef && m$1`
+            <div class="djs-popup-footer">
+              <a
+                class="djs-popup-footer-docs"
+                href=${ selectedEntry.documentationRef }
+                onClick=${ (event) => event.stopPropagation() }
+                aria-label=${ selectedEntry.label ? `Open entry documentation for ${ selectedEntry.label }` : 'Open entry documentation' }
+                target="_blank"
+                rel="noopener"
+              >
+                Open entry documentation
+
+                <svg aria-hidden="true" width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path fill-rule="evenodd" clip-rule="evenodd" d="M10.6368 10.6375V5.91761H11.9995V10.6382C11.9995 10.9973 11.8623 11.3141 11.5878 11.5885C11.3134 11.863 10.9966 12.0002 10.6375 12.0002H1.36266C0.982345 12.0002 0.660159 11.8681 0.396102 11.6041C0.132044 11.34 1.52588e-05 11.0178 1.52588e-05 10.6375V1.36267C1.52588e-05 0.98236 0.132044 0.660173 0.396102 0.396116C0.660159 0.132058 0.982345 2.95639e-05 1.36266 2.95639e-05H5.91624V1.36267H1.36266V10.6375H10.6368ZM12 0H7.2794L7.27873 1.36197H9.68701L3.06507 7.98391L4.01541 8.93425L10.6373 2.31231V4.72059H12V0Z" fill="#818798"/>
+                </svg>
+              </a>
+            </div>
+          ` }
         </div>
       ` }
     ${ emptyPlaceholder && entriesToShow.length === 0 && m$1`
@@ -28279,6 +28465,7 @@
 	    onKeyup,
 	    className,
 	    children,
+	    navigationStack,
 	    position: positionGetter
 	  } = props;
 
@@ -28297,7 +28484,6 @@
 	    popupEl.style.top = `${position.y}px`;
 	  }, [ popupRef.current, positionGetter ]);
 
-	  // initial focus
 	  _(() => {
 	    const popupEl = popupRef.current;
 
@@ -28305,10 +28491,15 @@
 	      return;
 	    }
 
-	    const inputEl = popupEl.querySelector('input');
+	    // focus the combobox (search) if present, otherwise the listbox
+	    // itself which then holds focus + `aria-activedescendant`;
+	    // fall back to the popup element (e.g. empty placeholder)
+	    const focusEl = popupEl.querySelector('input')
+	      || popupEl.querySelector('[role="listbox"]')
+	      || popupEl;
 
-	    (inputEl || popupEl).focus();
-	  }, []);
+	    focusEl.focus();
+	  }, [ navigationStack ]);
 
 	  // global <Escape> / blur handlers
 	  y(() => {
@@ -28360,9 +28551,14 @@
 	// helpers //////////////////////
 
 	function getPopupStyle(props) {
+	  const { width } = props;
+
+	  const normalizedWidth = typeof width === 'number' ? `${width}px` : width;
+
 	  return {
 	    transform: `scale(${props.scale})`,
-	    width: `${props.width}px`,
+	    width: isDefined(width) ? normalizedWidth : undefined,
+	    maxWidth: isDefined(width) ? 'unset' : undefined,
 	    'transform-origin': 'top left'
 	  };
 	}
@@ -55720,6 +55916,7 @@
 	 * @param {DOMElement} options.container The DOM element to append the contentContainer to
 	 * @param {Function} options.keyHandler Handler for key events
 	 * @param {Function} options.resizeHandler Handler for resize events
+	 * @param {Function} [options.focusoutHandler] Handler for focusout events
 	 */
 	function TextBox(options) {
 	  this.container = options.container;
@@ -55734,6 +55931,7 @@
 
 	  this.keyHandler = options.keyHandler || function() {};
 	  this.resizeHandler = options.resizeHandler || function() {};
+	  this.focusoutHandler = options.focusoutHandler || function() {};
 
 	  this.autoResize = bind$1(this.autoResize, this);
 	  this.handlePaste = bind$1(this.handlePaste, this);
@@ -55838,6 +56036,7 @@
 	  event.bind(content, 'keydown', this.keyHandler);
 	  event.bind(content, 'mousedown', stopPropagation);
 	  event.bind(content, 'paste', self.handlePaste);
+	  event.bind(content, 'focusout', this.focusoutHandler);
 
 	  if (options.autoResize) {
 	    event.bind(content, 'input', this.autoResize);
@@ -56090,6 +56289,7 @@
 	  event.unbind(content, 'mousedown', stopPropagation);
 	  event.unbind(content, 'input', this.autoResize);
 	  event.unbind(content, 'paste', this.handlePaste);
+	  event.unbind(content, 'focusout', this.focusoutHandler);
 
 	  if (resizeHandle) {
 	    resizeHandle.removeAttribute('style');
@@ -56152,8 +56352,11 @@
 	  this._textbox = new TextBox({
 	    container: canvas.getContainer(),
 	    keyHandler: bind$1(this._handleKey, this),
-	    resizeHandler: bind$1(this._handleResize, this)
+	    resizeHandler: bind$1(this._handleResize, this),
+	    focusoutHandler: bind$1(this._handleFocusout, this)
 	  });
+
+	  eventBus.on([ 'diagram.clear', 'diagram.destroy' ], () => this._cleanup());
 	}
 
 	DirectEditing.$inject = [ 'eventBus', 'canvas' ];
@@ -56203,18 +56406,25 @@
 	};
 
 	DirectEditing.prototype.close = function() {
-	  this._textbox.destroy();
-
 	  this._fire('deactivate');
 
-	  this._active = null;
-
-	  this.resizable = undefined;
+	  this._cleanup();
 
 	  // restoreFocus API is available from diagram-js@15.0.0
 	  this._canvas.restoreFocus && this._canvas.restoreFocus();
 	};
 
+	DirectEditing.prototype._cleanup = function() {
+	  if (!this._active) {
+	    return;
+	  }
+
+	  this._textbox.destroy();
+
+	  this._active = null;
+
+	  this.resizable = undefined;
+	};
 
 	DirectEditing.prototype.complete = function() {
 
@@ -56282,6 +56492,17 @@
 	};
 
 
+	DirectEditing.prototype._handleFocusout = function(event) {
+
+	  // ignore focus moves within the textbox (e.g. to the resize handle)
+	  if (event.relatedTarget && this._textbox.parent.contains(event.relatedTarget)) {
+	    return;
+	  }
+
+	  this.complete();
+	};
+
+
 	/**
 	 * Activate direct editing on the given element
 	 *
@@ -56383,196 +56604,408 @@
 	}
 
 	/**
-	 * @typedef { () => string } LabelGetter
+	 * Shared catalog of BPMN element popup entry definitions.
+	 *
+	 * Each entry is the context-independent identity of an element — its `target`
+	 * (moddle type + discriminating attributes), plus the `label` and `className`
+	 * shared across every menu that offers it (create, append, replace).
+	 *
+	 * Menus compose their own option lists from these atoms, adding menu-specific fields
 	 *
 	 * @typedef { {
-	 *   label: string | LabelGetter;
-	 *   actionName: string;
+	 *   label: string;
 	 *   className: string;
-	 *   target?: {
+	 *   target: {
 	 *     type: string;
 	 *     isExpanded?: boolean;
-	 *     isInterrupting?: boolean;
 	 *     triggeredByEvent?: boolean;
+	 *     instantiate?: boolean;
+	 *     eventGatewayType?: string;
+	 *     isInterrupting?: boolean;
 	 *     cancelActivity?: boolean;
 	 *     eventDefinitionType?: string;
-	 *     eventDefinitionAttrs?: Record<string, any>
+	 *     eventDefinitionAttrs?: Record<string, any>;
 	 *   };
-	 * } } ReplaceOption
+	 * } } ElementDefinition
+	 *
+	 * @type {Record<string, ElementDefinition>}
 	 */
+	const PopupEntries = {
 
-	/**
-	 * @type {ReplaceOption[]}
-	 */
-	var START_EVENT = [
-	  {
+	  // Tasks
+	  'task': {
+	    label: 'Task',
+	    className: 'bpmn-icon-task',
+	    target: {
+	      type: 'bpmn:Task'
+	    }
+	  },
+	  'user-task': {
+	    label: 'User task',
+	    className: 'bpmn-icon-user',
+	    target: {
+	      type: 'bpmn:UserTask'
+	    }
+	  },
+	  'service-task': {
+	    label: 'Service task',
+	    className: 'bpmn-icon-service',
+	    target: {
+	      type: 'bpmn:ServiceTask'
+	    }
+	  },
+	  'send-task': {
+	    label: 'Send task',
+	    className: 'bpmn-icon-send',
+	    target: {
+	      type: 'bpmn:SendTask'
+	    }
+	  },
+	  'receive-task': {
+	    label: 'Receive task',
+	    className: 'bpmn-icon-receive',
+	    target: {
+	      type: 'bpmn:ReceiveTask'
+	    }
+	  },
+	  'manual-task': {
+	    label: 'Manual task',
+	    className: 'bpmn-icon-manual',
+	    target: {
+	      type: 'bpmn:ManualTask'
+	    }
+	  },
+	  'rule-task': {
+	    label: 'Business rule task',
+	    className: 'bpmn-icon-business-rule',
+	    target: {
+	      type: 'bpmn:BusinessRuleTask'
+	    }
+	  },
+	  'script-task': {
+	    label: 'Script task',
+	    className: 'bpmn-icon-script',
+	    target: {
+	      type: 'bpmn:ScriptTask'
+	    }
+	  },
+
+	  // Sub-processes
+	  'call-activity': {
+	    label: 'Call activity',
+	    className: 'bpmn-icon-call-activity',
+	    target: {
+	      type: 'bpmn:CallActivity'
+	    }
+	  },
+	  'transaction': {
+	    label: 'Transaction',
+	    className: 'bpmn-icon-transaction',
+	    target: {
+	      type: 'bpmn:Transaction',
+	      isExpanded: true
+	    }
+	  },
+	  'event-subprocess': {
+	    label: 'Event sub-process',
+	    className: 'bpmn-icon-event-subprocess-expanded',
+	    target: {
+	      type: 'bpmn:SubProcess',
+	      triggeredByEvent: true,
+	      isExpanded: true
+	    }
+	  },
+	  'collapsed-subprocess': {
+	    label: 'Sub-process (collapsed)',
+	    className: 'bpmn-icon-subprocess-collapsed',
+	    target: {
+	      type: 'bpmn:SubProcess',
+	      isExpanded: false
+	    }
+	  },
+	  'expanded-subprocess': {
+	    label: 'Sub-process (expanded)',
+	    className: 'bpmn-icon-subprocess-expanded',
+	    target: {
+	      type: 'bpmn:SubProcess',
+	      isExpanded: true
+	    }
+	  },
+	  'collapsed-ad-hoc-subprocess': {
+	    label: 'Ad-hoc sub-process (collapsed)',
+	    className: 'bpmn-icon-subprocess-collapsed',
+	    target: {
+	      type: 'bpmn:AdHocSubProcess',
+	      isExpanded: false
+	    }
+	  },
+	  'expanded-ad-hoc-subprocess': {
+	    label: 'Ad-hoc sub-process (expanded)',
+	    className: 'bpmn-icon-subprocess-expanded',
+	    target: {
+	      type: 'bpmn:AdHocSubProcess',
+	      isExpanded: true
+	    }
+	  },
+
+	  // Gateways
+	  'exclusive-gateway': {
+	    label: 'Exclusive gateway',
+	    className: 'bpmn-icon-gateway-xor',
+	    target: {
+	      type: 'bpmn:ExclusiveGateway'
+	    }
+	  },
+	  'parallel-gateway': {
+	    label: 'Parallel gateway',
+	    className: 'bpmn-icon-gateway-parallel',
+	    target: {
+	      type: 'bpmn:ParallelGateway'
+	    }
+	  },
+	  'inclusive-gateway': {
+	    label: 'Inclusive gateway',
+	    className: 'bpmn-icon-gateway-or',
+	    target: {
+	      type: 'bpmn:InclusiveGateway'
+	    }
+	  },
+	  'complex-gateway': {
+	    label: 'Complex gateway',
+	    className: 'bpmn-icon-gateway-complex',
+	    target: {
+	      type: 'bpmn:ComplexGateway'
+	    }
+	  },
+	  'event-based-gateway': {
+	    label: 'Event-based gateway',
+	    className: 'bpmn-icon-gateway-eventbased',
+	    target: {
+	      type: 'bpmn:EventBasedGateway',
+	      instantiate: false,
+	      eventGatewayType: 'Exclusive'
+	    }
+	  },
+
+	  // Data
+	  'data-store-reference': {
+	    label: 'Data store reference',
+	    className: 'bpmn-icon-data-store',
+	    target: {
+	      type: 'bpmn:DataStoreReference'
+	    }
+	  },
+	  'data-object-reference': {
+	    label: 'Data object reference',
+	    className: 'bpmn-icon-data-object',
+	    target: {
+	      type: 'bpmn:DataObjectReference'
+	    }
+	  },
+
+	  // Participants
+	  'expanded-pool': {
+	    label: 'Expanded pool/participant',
+	    className: 'bpmn-icon-participant',
+	    target: {
+	      type: 'bpmn:Participant',
+	      isExpanded: true
+	    }
+	  },
+	  'collapsed-pool': {
+	    label: 'Empty pool/participant',
+	    className: 'bpmn-icon-lane',
+	    target: {
+	      type: 'bpmn:Participant',
+	      isExpanded: false
+	    }
+	  },
+
+	  // Events — none
+	  'none-start-event': {
 	    label: 'Start event',
-	    actionName: 'replace-with-none-start',
 	    className: 'bpmn-icon-start-event-none',
 	    target: {
 	      type: 'bpmn:StartEvent'
 	    }
 	  },
-	  {
+	  'none-intermediate-throwing': {
 	    label: 'Intermediate throw event',
-	    actionName: 'replace-with-none-intermediate-throwing',
 	    className: 'bpmn-icon-intermediate-event-none',
 	    target: {
 	      type: 'bpmn:IntermediateThrowEvent'
 	    }
 	  },
-	  {
+	  'none-boundary-event': {
+	    label: 'Boundary event',
+	    className: 'bpmn-icon-intermediate-event-none',
+	    target: {
+	      type: 'bpmn:BoundaryEvent'
+	    }
+	  },
+	  'none-end-event': {
 	    label: 'End event',
-	    actionName: 'replace-with-none-end',
 	    className: 'bpmn-icon-end-event-none',
 	    target: {
 	      type: 'bpmn:EndEvent'
 	    }
 	  },
-	  {
+
+	  // Events — typed start
+	  'message-start': {
 	    label: 'Message start event',
-	    actionName: 'replace-with-message-start',
 	    className: 'bpmn-icon-start-event-message',
 	    target: {
 	      type: 'bpmn:StartEvent',
-	      eventDefinitionType: 'bpmn:MessageEventDefinition'
+	      eventDefinitionType: 'bpmn:MessageEventDefinition',
+	      isInterrupting: true
 	    }
 	  },
-	  {
+	  'timer-start': {
 	    label: 'Timer start event',
-	    actionName: 'replace-with-timer-start',
 	    className: 'bpmn-icon-start-event-timer',
 	    target: {
 	      type: 'bpmn:StartEvent',
-	      eventDefinitionType: 'bpmn:TimerEventDefinition'
+	      eventDefinitionType: 'bpmn:TimerEventDefinition',
+	      isInterrupting: true
 	    }
 	  },
-	  {
+	  'conditional-start': {
 	    label: 'Conditional start event',
-	    actionName: 'replace-with-conditional-start',
 	    className: 'bpmn-icon-start-event-condition',
 	    target: {
 	      type: 'bpmn:StartEvent',
-	      eventDefinitionType: 'bpmn:ConditionalEventDefinition'
+	      eventDefinitionType: 'bpmn:ConditionalEventDefinition',
+	      isInterrupting: true
 	    }
 	  },
-	  {
+	  'signal-start': {
 	    label: 'Signal start event',
-	    actionName: 'replace-with-signal-start',
 	    className: 'bpmn-icon-start-event-signal',
 	    target: {
 	      type: 'bpmn:StartEvent',
-	      eventDefinitionType: 'bpmn:SignalEventDefinition'
+	      eventDefinitionType: 'bpmn:SignalEventDefinition',
+	      isInterrupting: true
 	    }
-	  }
-	];
-
-	/**
-	 * @type {ReplaceOption[]}
-	 */
-	var START_EVENT_SUB_PROCESS = [
-	  {
-	    label: 'Start event',
-	    actionName: 'replace-with-none-start',
-	    className: 'bpmn-icon-start-event-none',
+	  },
+	  'error-start': {
+	    label: 'Error start event',
+	    className: 'bpmn-icon-start-event-error',
 	    target: {
-	      type: 'bpmn:StartEvent'
+	      type: 'bpmn:StartEvent',
+	      eventDefinitionType: 'bpmn:ErrorEventDefinition',
+	      isInterrupting: true
 	    }
 	  },
-	  {
-	    label: 'Intermediate throw event',
-	    actionName: 'replace-with-none-intermediate-throwing',
-	    className: 'bpmn-icon-intermediate-event-none',
+	  'escalation-start': {
+	    label: 'Escalation start event',
+	    className: 'bpmn-icon-start-event-escalation',
 	    target: {
-	      type: 'bpmn:IntermediateThrowEvent'
+	      type: 'bpmn:StartEvent',
+	      eventDefinitionType: 'bpmn:EscalationEventDefinition',
+	      isInterrupting: true
 	    }
 	  },
-	  {
-	    label: 'End event',
-	    actionName: 'replace-with-none-end',
-	    className: 'bpmn-icon-end-event-none',
+	  'compensation-start': {
+	    label: 'Compensation start event',
+	    className: 'bpmn-icon-start-event-compensation',
 	    target: {
-	      type: 'bpmn:EndEvent'
+	      type: 'bpmn:StartEvent',
+	      eventDefinitionType: 'bpmn:CompensateEventDefinition',
+	      isInterrupting: true
 	    }
-	  }
-	];
+	  },
 
-	/**
-	 * @type {ReplaceOption[]}
-	 */
-	var INTERMEDIATE_EVENT = [
-	  {
-	    label: 'Start event',
-	    actionName: 'replace-with-none-start',
-	    className: 'bpmn-icon-start-event-none',
+	  // Events — non-interrupting start (event subprocess)
+	  'non-interrupting-message-start': {
+	    label: 'Message start event (non-interrupting)',
+	    className: 'bpmn-icon-start-event-non-interrupting-message',
 	    target: {
-	      type: 'bpmn:StartEvent'
+	      type: 'bpmn:StartEvent',
+	      eventDefinitionType: 'bpmn:MessageEventDefinition',
+	      isInterrupting: false
 	    }
 	  },
-	  {
-	    label: 'Intermediate throw event',
-	    actionName: 'replace-with-none-intermediate-throw',
-	    className: 'bpmn-icon-intermediate-event-none',
+	  'non-interrupting-timer-start': {
+	    label: 'Timer start event (non-interrupting)',
+	    className: 'bpmn-icon-start-event-non-interrupting-timer',
 	    target: {
-	      type: 'bpmn:IntermediateThrowEvent'
+	      type: 'bpmn:StartEvent',
+	      eventDefinitionType: 'bpmn:TimerEventDefinition',
+	      isInterrupting: false
 	    }
 	  },
-	  {
-	    label: 'End event',
-	    actionName: 'replace-with-none-end',
-	    className: 'bpmn-icon-end-event-none',
+	  'non-interrupting-conditional-start': {
+	    label: 'Conditional start event (non-interrupting)',
+	    className: 'bpmn-icon-start-event-non-interrupting-condition',
 	    target: {
-	      type: 'bpmn:EndEvent'
+	      type: 'bpmn:StartEvent',
+	      eventDefinitionType: 'bpmn:ConditionalEventDefinition',
+	      isInterrupting: false
 	    }
 	  },
-	  {
+	  'non-interrupting-signal-start': {
+	    label: 'Signal start event (non-interrupting)',
+	    className: 'bpmn-icon-start-event-non-interrupting-signal',
+	    target: {
+	      type: 'bpmn:StartEvent',
+	      eventDefinitionType: 'bpmn:SignalEventDefinition',
+	      isInterrupting: false
+	    }
+	  },
+	  'non-interrupting-escalation-start': {
+	    label: 'Escalation start event (non-interrupting)',
+	    className: 'bpmn-icon-start-event-non-interrupting-escalation',
+	    target: {
+	      type: 'bpmn:StartEvent',
+	      eventDefinitionType: 'bpmn:EscalationEventDefinition',
+	      isInterrupting: false
+	    }
+	  },
+
+	  // Events — intermediate (catch/throw)
+	  'message-intermediate-catch': {
 	    label: 'Message intermediate catch event',
-	    actionName: 'replace-with-message-intermediate-catch',
 	    className: 'bpmn-icon-intermediate-event-catch-message',
 	    target: {
 	      type: 'bpmn:IntermediateCatchEvent',
 	      eventDefinitionType: 'bpmn:MessageEventDefinition'
 	    }
 	  },
-	  {
+	  'message-intermediate-throw': {
 	    label: 'Message intermediate throw event',
-	    actionName: 'replace-with-message-intermediate-throw',
 	    className: 'bpmn-icon-intermediate-event-throw-message',
 	    target: {
 	      type: 'bpmn:IntermediateThrowEvent',
 	      eventDefinitionType: 'bpmn:MessageEventDefinition'
 	    }
 	  },
-	  {
+	  'timer-intermediate-catch': {
 	    label: 'Timer intermediate catch event',
-	    actionName: 'replace-with-timer-intermediate-catch',
 	    className: 'bpmn-icon-intermediate-event-catch-timer',
 	    target: {
 	      type: 'bpmn:IntermediateCatchEvent',
 	      eventDefinitionType: 'bpmn:TimerEventDefinition'
 	    }
 	  },
-	  {
+	  'escalation-intermediate-throw': {
 	    label: 'Escalation intermediate throw event',
-	    actionName: 'replace-with-escalation-intermediate-throw',
 	    className: 'bpmn-icon-intermediate-event-throw-escalation',
 	    target: {
 	      type: 'bpmn:IntermediateThrowEvent',
 	      eventDefinitionType: 'bpmn:EscalationEventDefinition'
 	    }
 	  },
-	  {
+	  'conditional-intermediate-catch': {
 	    label: 'Conditional intermediate catch event',
-	    actionName: 'replace-with-conditional-intermediate-catch',
 	    className: 'bpmn-icon-intermediate-event-catch-condition',
 	    target: {
 	      type: 'bpmn:IntermediateCatchEvent',
 	      eventDefinitionType: 'bpmn:ConditionalEventDefinition'
 	    }
 	  },
-	  {
+	  'link-intermediate-catch': {
 	    label: 'Link intermediate catch event',
-	    actionName: 'replace-with-link-intermediate-catch',
 	    className: 'bpmn-icon-intermediate-event-catch-link',
 	    target: {
 	      type: 'bpmn:IntermediateCatchEvent',
@@ -56582,9 +57015,8 @@
 	      }
 	    }
 	  },
-	  {
+	  'link-intermediate-throw': {
 	    label: 'Link intermediate throw event',
-	    actionName: 'replace-with-link-intermediate-throw',
 	    className: 'bpmn-icon-intermediate-event-throw-link',
 	    target: {
 	      type: 'bpmn:IntermediateThrowEvent',
@@ -56594,174 +57026,320 @@
 	      }
 	    }
 	  },
-	  {
+	  'compensation-intermediate-throw': {
 	    label: 'Compensation intermediate throw event',
-	    actionName: 'replace-with-compensation-intermediate-throw',
 	    className: 'bpmn-icon-intermediate-event-throw-compensation',
 	    target: {
 	      type: 'bpmn:IntermediateThrowEvent',
 	      eventDefinitionType: 'bpmn:CompensateEventDefinition'
 	    }
 	  },
-	  {
+	  'signal-intermediate-catch': {
 	    label: 'Signal intermediate catch event',
-	    actionName: 'replace-with-signal-intermediate-catch',
 	    className: 'bpmn-icon-intermediate-event-catch-signal',
 	    target: {
 	      type: 'bpmn:IntermediateCatchEvent',
 	      eventDefinitionType: 'bpmn:SignalEventDefinition'
 	    }
 	  },
-	  {
+	  'signal-intermediate-throw': {
 	    label: 'Signal intermediate throw event',
-	    actionName: 'replace-with-signal-intermediate-throw',
 	    className: 'bpmn-icon-intermediate-event-throw-signal',
 	    target: {
 	      type: 'bpmn:IntermediateThrowEvent',
 	      eventDefinitionType: 'bpmn:SignalEventDefinition'
 	    }
-	  }
-	];
+	  },
 
-	/**
-	 * @type {ReplaceOption[]}
-	 */
-	var END_EVENT = [
-	  {
-	    label: 'Start event',
-	    actionName: 'replace-with-none-start',
-	    className: 'bpmn-icon-start-event-none',
+	  // Events — boundary (interrupting)
+	  'message-boundary': {
+	    label: 'Message boundary event',
+	    className: 'bpmn-icon-intermediate-event-catch-message',
 	    target: {
-	      type: 'bpmn:StartEvent'
+	      type: 'bpmn:BoundaryEvent',
+	      eventDefinitionType: 'bpmn:MessageEventDefinition',
+	      cancelActivity: true
 	    }
 	  },
-	  {
-	    label: 'Intermediate throw event',
-	    actionName: 'replace-with-none-intermediate-throw',
-	    className: 'bpmn-icon-intermediate-event-none',
+	  'timer-boundary': {
+	    label: 'Timer boundary event',
+	    className: 'bpmn-icon-intermediate-event-catch-timer',
 	    target: {
-	      type: 'bpmn:IntermediateThrowEvent'
+	      type: 'bpmn:BoundaryEvent',
+	      eventDefinitionType: 'bpmn:TimerEventDefinition',
+	      cancelActivity: true
 	    }
 	  },
-	  {
-	    label: 'End event',
-	    actionName: 'replace-with-none-end',
-	    className: 'bpmn-icon-end-event-none',
+	  'escalation-boundary': {
+	    label: 'Escalation boundary event',
+	    className: 'bpmn-icon-intermediate-event-catch-escalation',
 	    target: {
-	      type: 'bpmn:EndEvent'
+	      type: 'bpmn:BoundaryEvent',
+	      eventDefinitionType: 'bpmn:EscalationEventDefinition',
+	      cancelActivity: true
 	    }
 	  },
-	  {
-	    label: 'Message end event',
-	    actionName: 'replace-with-message-end',
-	    className: 'bpmn-icon-end-event-message',
+	  'conditional-boundary': {
+	    label: 'Conditional boundary event',
+	    className: 'bpmn-icon-intermediate-event-catch-condition',
 	    target: {
-	      type: 'bpmn:EndEvent',
-	      eventDefinitionType: 'bpmn:MessageEventDefinition'
+	      type: 'bpmn:BoundaryEvent',
+	      eventDefinitionType: 'bpmn:ConditionalEventDefinition',
+	      cancelActivity: true
 	    }
 	  },
-	  {
-	    label: 'Escalation end event',
-	    actionName: 'replace-with-escalation-end',
-	    className: 'bpmn-icon-end-event-escalation',
+	  'error-boundary': {
+	    label: 'Error boundary event',
+	    className: 'bpmn-icon-intermediate-event-catch-error',
 	    target: {
-	      type: 'bpmn:EndEvent',
-	      eventDefinitionType: 'bpmn:EscalationEventDefinition'
+	      type: 'bpmn:BoundaryEvent',
+	      eventDefinitionType: 'bpmn:ErrorEventDefinition',
+	      cancelActivity: true
 	    }
 	  },
-	  {
-	    label: 'Error end event',
-	    actionName: 'replace-with-error-end',
-	    className: 'bpmn-icon-end-event-error',
+	  'cancel-boundary': {
+	    label: 'Cancel boundary event',
+	    className: 'bpmn-icon-intermediate-event-catch-cancel',
 	    target: {
-	      type: 'bpmn:EndEvent',
-	      eventDefinitionType: 'bpmn:ErrorEventDefinition'
+	      type: 'bpmn:BoundaryEvent',
+	      eventDefinitionType: 'bpmn:CancelEventDefinition',
+	      cancelActivity: true
 	    }
 	  },
-	  {
-	    label: 'Cancel end event',
-	    actionName: 'replace-with-cancel-end',
-	    className: 'bpmn-icon-end-event-cancel',
+	  'signal-boundary': {
+	    label: 'Signal boundary event',
+	    className: 'bpmn-icon-intermediate-event-catch-signal',
 	    target: {
-	      type: 'bpmn:EndEvent',
-	      eventDefinitionType: 'bpmn:CancelEventDefinition'
+	      type: 'bpmn:BoundaryEvent',
+	      eventDefinitionType: 'bpmn:SignalEventDefinition',
+	      cancelActivity: true
 	    }
 	  },
-	  {
+	  'compensation-boundary': {
+	    label: 'Compensation boundary event',
+	    className: 'bpmn-icon-intermediate-event-catch-compensation',
+	    target: {
+	      type: 'bpmn:BoundaryEvent',
+	      eventDefinitionType: 'bpmn:CompensateEventDefinition',
+	      cancelActivity: true
+	    }
+	  },
+
+	  // Events — boundary (non-interrupting)
+	  'non-interrupting-message-boundary': {
+	    label: 'Message boundary event (non-interrupting)',
+	    className: 'bpmn-icon-intermediate-event-catch-non-interrupting-message',
+	    target: {
+	      type: 'bpmn:BoundaryEvent',
+	      eventDefinitionType: 'bpmn:MessageEventDefinition',
+	      cancelActivity: false
+	    }
+	  },
+	  'non-interrupting-timer-boundary': {
+	    label: 'Timer boundary event (non-interrupting)',
+	    className: 'bpmn-icon-intermediate-event-catch-non-interrupting-timer',
+	    target: {
+	      type: 'bpmn:BoundaryEvent',
+	      eventDefinitionType: 'bpmn:TimerEventDefinition',
+	      cancelActivity: false
+	    }
+	  },
+	  'non-interrupting-escalation-boundary': {
+	    label: 'Escalation boundary event (non-interrupting)',
+	    className: 'bpmn-icon-intermediate-event-catch-non-interrupting-escalation',
+	    target: {
+	      type: 'bpmn:BoundaryEvent',
+	      eventDefinitionType: 'bpmn:EscalationEventDefinition',
+	      cancelActivity: false
+	    }
+	  },
+	  'non-interrupting-conditional-boundary': {
+	    label: 'Conditional boundary event (non-interrupting)',
+	    className: 'bpmn-icon-intermediate-event-catch-non-interrupting-condition',
+	    target: {
+	      type: 'bpmn:BoundaryEvent',
+	      eventDefinitionType: 'bpmn:ConditionalEventDefinition',
+	      cancelActivity: false
+	    }
+	  },
+	  'non-interrupting-signal-boundary': {
+	    label: 'Signal boundary event (non-interrupting)',
+	    className: 'bpmn-icon-intermediate-event-catch-non-interrupting-signal',
+	    target: {
+	      type: 'bpmn:BoundaryEvent',
+	      eventDefinitionType: 'bpmn:SignalEventDefinition',
+	      cancelActivity: false
+	    }
+	  },
+
+	  // Events — typed end
+	  'message-end': {
+	    label: 'Message end event',
+	    className: 'bpmn-icon-end-event-message',
+	    target: {
+	      type: 'bpmn:EndEvent',
+	      eventDefinitionType: 'bpmn:MessageEventDefinition'
+	    }
+	  },
+	  'escalation-end': {
+	    label: 'Escalation end event',
+	    className: 'bpmn-icon-end-event-escalation',
+	    target: {
+	      type: 'bpmn:EndEvent',
+	      eventDefinitionType: 'bpmn:EscalationEventDefinition'
+	    }
+	  },
+	  'error-end': {
+	    label: 'Error end event',
+	    className: 'bpmn-icon-end-event-error',
+	    target: {
+	      type: 'bpmn:EndEvent',
+	      eventDefinitionType: 'bpmn:ErrorEventDefinition'
+	    }
+	  },
+	  'cancel-end': {
+	    label: 'Cancel end event',
+	    className: 'bpmn-icon-end-event-cancel',
+	    target: {
+	      type: 'bpmn:EndEvent',
+	      eventDefinitionType: 'bpmn:CancelEventDefinition'
+	    }
+	  },
+	  'compensation-end': {
 	    label: 'Compensation end event',
-	    actionName: 'replace-with-compensation-end',
 	    className: 'bpmn-icon-end-event-compensation',
 	    target: {
 	      type: 'bpmn:EndEvent',
 	      eventDefinitionType: 'bpmn:CompensateEventDefinition'
 	    }
 	  },
-	  {
+	  'signal-end': {
 	    label: 'Signal end event',
-	    actionName: 'replace-with-signal-end',
 	    className: 'bpmn-icon-end-event-signal',
 	    target: {
 	      type: 'bpmn:EndEvent',
 	      eventDefinitionType: 'bpmn:SignalEventDefinition'
 	    }
 	  },
-	  {
+	  'terminate-end': {
 	    label: 'Terminate end event',
-	    actionName: 'replace-with-terminate-end',
 	    className: 'bpmn-icon-end-event-terminate',
 	    target: {
 	      type: 'bpmn:EndEvent',
 	      eventDefinitionType: 'bpmn:TerminateEventDefinition'
 	    }
 	  }
+	};
+
+	/**
+	 * @typedef { () => string } LabelGetter
+	 *
+	 * @typedef { {
+	 *   label: string | LabelGetter;
+	 *   actionName: string;
+	 *   className: string;
+	 *   target?: {
+	 *     type: string;
+	 *     isExpanded?: boolean;
+	 *     isInterrupting?: boolean;
+	 *     triggeredByEvent?: boolean;
+	 *     cancelActivity?: boolean;
+	 *     eventDefinitionType?: string;
+	 *     eventDefinitionAttrs?: Record<string, any>
+	 *   };
+	 * } } ReplaceOption
+	 */
+
+
+	/**
+	 * Build a replace option from the shared `PopupEntries` catalog. The `actionName`
+	 * defaults to `replace-with-<id>`.
+	 *
+	 * @param {string} id popup entry id
+	 * @param {Object} [extra] fields to override or add (e.g. `actionName`, `label`)
+	 *
+	 * @return {ReplaceOption}
+	 */
+	function replaceWith(id, extra = {}) {
+	  var entry = PopupEntries[id];
+
+	  if (!entry) {
+	    throw new Error('unknown popup entry <' + id + '>');
+	  }
+
+	  return {
+	    ...entry,
+	    actionName: 'replace-with-' + id,
+	    ...extra
+	  };
+	}
+
+	/**
+	 * @type {ReplaceOption[]}
+	 */
+	var START_EVENT = [
+	  replaceWith('none-start-event', { actionName: 'replace-with-none-start' }),
+	  replaceWith('none-intermediate-throwing'),
+	  replaceWith('none-end-event', { actionName: 'replace-with-none-end' }),
+	  replaceWith('message-start'),
+	  replaceWith('timer-start'),
+	  replaceWith('conditional-start'),
+	  replaceWith('signal-start')
+	];
+
+	/**
+	 * @type {ReplaceOption[]}
+	 */
+	var START_EVENT_SUB_PROCESS = [
+	  replaceWith('none-start-event', { actionName: 'replace-with-none-start' }),
+	  replaceWith('none-intermediate-throwing'),
+	  replaceWith('none-end-event', { actionName: 'replace-with-none-end' })
+	];
+
+	/**
+	 * @type {ReplaceOption[]}
+	 */
+	var INTERMEDIATE_EVENT = [
+	  replaceWith('none-start-event', { actionName: 'replace-with-none-start' }),
+	  replaceWith('none-intermediate-throwing', { actionName: 'replace-with-none-intermediate-throw' }),
+	  replaceWith('none-end-event', { actionName: 'replace-with-none-end' }),
+	  replaceWith('message-intermediate-catch'),
+	  replaceWith('message-intermediate-throw'),
+	  replaceWith('timer-intermediate-catch'),
+	  replaceWith('escalation-intermediate-throw'),
+	  replaceWith('conditional-intermediate-catch'),
+	  replaceWith('link-intermediate-catch'),
+	  replaceWith('link-intermediate-throw'),
+	  replaceWith('compensation-intermediate-throw'),
+	  replaceWith('signal-intermediate-catch'),
+	  replaceWith('signal-intermediate-throw')
+	];
+
+	/**
+	 * @type {ReplaceOption[]}
+	 */
+	var END_EVENT = [
+	  replaceWith('none-start-event', { actionName: 'replace-with-none-start' }),
+	  replaceWith('none-intermediate-throwing', { actionName: 'replace-with-none-intermediate-throw' }),
+	  replaceWith('none-end-event', { actionName: 'replace-with-none-end' }),
+	  replaceWith('message-end'),
+	  replaceWith('escalation-end'),
+	  replaceWith('error-end'),
+	  replaceWith('cancel-end'),
+	  replaceWith('compensation-end'),
+	  replaceWith('signal-end'),
+	  replaceWith('terminate-end')
 	];
 
 	/**
 	 * @type {ReplaceOption[]}
 	 */
 	var GATEWAY = [
-	  {
-	    label: 'Exclusive gateway',
-	    actionName: 'replace-with-exclusive-gateway',
-	    className: 'bpmn-icon-gateway-xor',
-	    target: {
-	      type: 'bpmn:ExclusiveGateway'
-	    }
-	  },
-	  {
-	    label: 'Parallel gateway',
-	    actionName: 'replace-with-parallel-gateway',
-	    className: 'bpmn-icon-gateway-parallel',
-	    target: {
-	      type: 'bpmn:ParallelGateway'
-	    }
-	  },
-	  {
-	    label: 'Inclusive gateway',
-	    actionName: 'replace-with-inclusive-gateway',
-	    className: 'bpmn-icon-gateway-or',
-	    target: {
-	      type: 'bpmn:InclusiveGateway'
-	    }
-	  },
-	  {
-	    label: 'Complex gateway',
-	    actionName: 'replace-with-complex-gateway',
-	    className: 'bpmn-icon-gateway-complex',
-	    target: {
-	      type: 'bpmn:ComplexGateway'
-	    }
-	  },
-	  {
-	    label: 'Event-based gateway',
-	    actionName: 'replace-with-event-based-gateway',
-	    className: 'bpmn-icon-gateway-eventbased',
-	    target: {
-	      type: 'bpmn:EventBasedGateway',
-	      instantiate: false,
-	      eventGatewayType: 'Exclusive'
-	    }
-	  }
+	  replaceWith('exclusive-gateway'),
+	  replaceWith('parallel-gateway'),
+	  replaceWith('inclusive-gateway'),
+	  replaceWith('complex-gateway'),
+	  replaceWith('event-based-gateway')
 
 	  // Gateways deactivated until https://github.com/bpmn-io/bpmn-js/issues/194
 	  // {
@@ -56792,129 +57370,30 @@
 	 * @type {ReplaceOption[]}
 	 */
 	var SUBPROCESS_EXPANDED = [
-	  {
-	    label: 'Transaction',
-	    actionName: 'replace-with-transaction',
-	    className: 'bpmn-icon-transaction',
-	    target: {
-	      type: 'bpmn:Transaction',
-	      isExpanded: true
-	    }
-	  },
-	  {
-	    label: 'Event sub-process',
-	    actionName: 'replace-with-event-subprocess',
-	    className: 'bpmn-icon-event-subprocess-expanded',
-	    target: {
-	      type: 'bpmn:SubProcess',
-	      triggeredByEvent: true,
-	      isExpanded: true
-	    }
-	  },
-	  {
-	    label: 'Ad-hoc sub-process',
-	    actionName: 'replace-with-ad-hoc-subprocess',
-	    className: 'bpmn-icon-subprocess-expanded',
-	    target: {
-	      type: 'bpmn:AdHocSubProcess',
-	      isExpanded: true
-	    }
-	  },
-	  {
-	    label: 'Sub-process (collapsed)',
-	    actionName: 'replace-with-collapsed-subprocess',
-	    className: 'bpmn-icon-subprocess-collapsed',
-	    target: {
-	      type: 'bpmn:SubProcess',
-	      isExpanded: false
-	    }
-	  }
+	  replaceWith('transaction'),
+	  replaceWith('event-subprocess'),
+	  replaceWith('expanded-ad-hoc-subprocess', { actionName: 'replace-with-ad-hoc-subprocess', label: 'Ad-hoc sub-process' }),
+	  replaceWith('collapsed-subprocess')
 	];
 
 	/**
 	 * @type {ReplaceOption[]}
 	 */
 	var AD_HOC_SUBPROCESS_EXPANDED = [
-	  {
-	    label: 'Sub-process',
-	    actionName: 'replace-with-subprocess',
-	    className: 'bpmn-icon-subprocess-expanded',
-	    target: {
-	      type: 'bpmn:SubProcess',
-	      isExpanded: true
-	    }
-	  },
-	  {
-	    label: 'Transaction',
-	    actionName: 'replace-with-transaction',
-	    className: 'bpmn-icon-transaction',
-	    target: {
-	      type: 'bpmn:Transaction',
-	      isExpanded: true
-	    }
-	  },
-	  {
-	    label: 'Event sub-process',
-	    actionName: 'replace-with-event-subprocess',
-	    className: 'bpmn-icon-event-subprocess-expanded',
-	    target: {
-	      type: 'bpmn:SubProcess',
-	      triggeredByEvent: true,
-	      isExpanded: true
-	    }
-	  },
-	  {
-	    label: 'Ad-hoc sub-process (collapsed)',
-	    actionName: 'replace-with-collapsed-ad-hoc-subprocess',
-	    className: 'bpmn-icon-subprocess-collapsed',
-	    target: {
-	      type: 'bpmn:AdHocSubProcess',
-	      isExpanded: false
-	    }
-	  }
+	  replaceWith('expanded-subprocess', { actionName: 'replace-with-subprocess', label: 'Sub-process' }),
+	  replaceWith('transaction'),
+	  replaceWith('event-subprocess'),
+	  replaceWith('collapsed-ad-hoc-subprocess')
 	];
 
 	/**
 	 * @type {ReplaceOption[]}
 	 */
 	var TRANSACTION = [
-	  {
-	    label: 'Transaction',
-	    actionName: 'replace-with-transaction',
-	    className: 'bpmn-icon-transaction',
-	    target: {
-	      type: 'bpmn:Transaction',
-	      isExpanded: true
-	    }
-	  },
-	  {
-	    label: 'Sub-process',
-	    actionName: 'replace-with-subprocess',
-	    className: 'bpmn-icon-subprocess-expanded',
-	    target: {
-	      type: 'bpmn:SubProcess',
-	      isExpanded: true
-	    }
-	  },
-	  {
-	    label: 'Ad-hoc sub-process',
-	    actionName: 'replace-with-ad-hoc-subprocess',
-	    className: 'bpmn-icon-subprocess-expanded',
-	    target: {
-	      type: 'bpmn:AdHocSubProcess',
-	      isExpanded: true
-	    }
-	  },
-	  {
-	    label: 'Event sub-process',
-	    actionName: 'replace-with-event-subprocess',
-	    className: 'bpmn-icon-event-subprocess-expanded',
-	    target: {
-	      type: 'bpmn:SubProcess',
-	      triggeredByEvent: true,
-	      isExpanded: true
-	    }
-	  }
+	  replaceWith('transaction'),
+	  replaceWith('expanded-subprocess', { actionName: 'replace-with-subprocess', label: 'Sub-process' }),
+	  replaceWith('expanded-ad-hoc-subprocess', { actionName: 'replace-with-ad-hoc-subprocess', label: 'Ad-hoc sub-process' }),
+	  replaceWith('event-subprocess')
 	];
 
 	/**
@@ -56926,404 +57405,70 @@
 	 * @type {ReplaceOption[]}
 	 */
 	var TASK = [
-	  {
-	    label: 'Task',
-	    actionName: 'replace-with-task',
-	    className: 'bpmn-icon-task',
-	    target: {
-	      type: 'bpmn:Task'
-	    }
-	  },
-	  {
-	    label: 'User task',
-	    actionName: 'replace-with-user-task',
-	    className: 'bpmn-icon-user',
-	    target: {
-	      type: 'bpmn:UserTask'
-	    }
-	  },
-	  {
-	    label: 'Service task',
-	    actionName: 'replace-with-service-task',
-	    className: 'bpmn-icon-service',
-	    target: {
-	      type: 'bpmn:ServiceTask'
-	    }
-	  },
-	  {
-	    label: 'Send task',
-	    actionName: 'replace-with-send-task',
-	    className: 'bpmn-icon-send',
-	    target: {
-	      type: 'bpmn:SendTask'
-	    }
-	  },
-	  {
-	    label: 'Receive task',
-	    actionName: 'replace-with-receive-task',
-	    className: 'bpmn-icon-receive',
-	    target: {
-	      type: 'bpmn:ReceiveTask'
-	    }
-	  },
-	  {
-	    label: 'Manual task',
-	    actionName: 'replace-with-manual-task',
-	    className: 'bpmn-icon-manual',
-	    target: {
-	      type: 'bpmn:ManualTask'
-	    }
-	  },
-	  {
-	    label: 'Business rule task',
-	    actionName: 'replace-with-rule-task',
-	    className: 'bpmn-icon-business-rule',
-	    target: {
-	      type: 'bpmn:BusinessRuleTask'
-	    }
-	  },
-	  {
-	    label: 'Script task',
-	    actionName: 'replace-with-script-task',
-	    className: 'bpmn-icon-script',
-	    target: {
-	      type: 'bpmn:ScriptTask'
-	    }
-	  },
-	  {
-	    label: 'Call activity',
-	    actionName: 'replace-with-call-activity',
-	    className: 'bpmn-icon-call-activity',
-	    target: {
-	      type: 'bpmn:CallActivity'
-	    }
-	  },
-	  {
-	    label: 'Sub-process (collapsed)',
-	    actionName: 'replace-with-collapsed-subprocess',
-	    className: 'bpmn-icon-subprocess-collapsed',
-	    target: {
-	      type: 'bpmn:SubProcess',
-	      isExpanded: false
-	    }
-	  },
-	  {
-	    label: 'Sub-process (expanded)',
-	    actionName: 'replace-with-expanded-subprocess',
-	    className: 'bpmn-icon-subprocess-expanded',
-	    target: {
-	      type: 'bpmn:SubProcess',
-	      isExpanded: true
-	    }
-	  },
-	  {
-	    label: 'Ad-hoc sub-process (collapsed)',
-	    actionName: 'replace-with-collapsed-ad-hoc-subprocess',
-	    className: 'bpmn-icon-subprocess-collapsed',
-	    target: {
-	      type: 'bpmn:AdHocSubProcess',
-	      isExpanded: false
-	    }
-	  },
-	  {
-	    label: 'Ad-hoc sub-process (expanded)',
-	    actionName: 'replace-with-ad-hoc-subprocess',
-	    className: 'bpmn-icon-subprocess-expanded',
-	    target: {
-	      type: 'bpmn:AdHocSubProcess',
-	      isExpanded: true
-	    }
-	  }
+	  replaceWith('task'),
+	  replaceWith('user-task'),
+	  replaceWith('service-task'),
+	  replaceWith('send-task'),
+	  replaceWith('receive-task'),
+	  replaceWith('manual-task'),
+	  replaceWith('rule-task'),
+	  replaceWith('script-task'),
+	  replaceWith('call-activity'),
+	  replaceWith('collapsed-subprocess'),
+	  replaceWith('expanded-subprocess'),
+	  replaceWith('collapsed-ad-hoc-subprocess'),
+	  replaceWith('expanded-ad-hoc-subprocess', { actionName: 'replace-with-ad-hoc-subprocess' })
 	];
 
 	/**
 	 * @type {ReplaceOption[]}
 	 */
 	var DATA_OBJECT_REFERENCE = [
-	  {
-	    label: 'Data store reference',
-	    actionName: 'replace-with-data-store-reference',
-	    className: 'bpmn-icon-data-store',
-	    target: {
-	      type: 'bpmn:DataStoreReference'
-	    }
-	  }
+	  replaceWith('data-store-reference')
 	];
 
 	/**
 	 * @type {ReplaceOption[]}
 	 */
 	var DATA_STORE_REFERENCE = [
-	  {
-	    label: 'Data object reference',
-	    actionName: 'replace-with-data-object-reference',
-	    className: 'bpmn-icon-data-object',
-	    target: {
-	      type: 'bpmn:DataObjectReference'
-	    }
-	  }
+	  replaceWith('data-object-reference')
 	];
 
 	/**
 	 * @type {ReplaceOption[]}
 	 */
 	var BOUNDARY_EVENT = [
-	  {
-	    label: 'Message boundary event',
-	    actionName: 'replace-with-message-boundary',
-	    className: 'bpmn-icon-intermediate-event-catch-message',
-	    target: {
-	      type: 'bpmn:BoundaryEvent',
-	      eventDefinitionType: 'bpmn:MessageEventDefinition',
-	      cancelActivity: true
-	    }
-	  },
-	  {
-	    label: 'Timer boundary event',
-	    actionName: 'replace-with-timer-boundary',
-	    className: 'bpmn-icon-intermediate-event-catch-timer',
-	    target: {
-	      type: 'bpmn:BoundaryEvent',
-	      eventDefinitionType: 'bpmn:TimerEventDefinition',
-	      cancelActivity: true
-	    }
-	  },
-	  {
-	    label: 'Escalation boundary event',
-	    actionName: 'replace-with-escalation-boundary',
-	    className: 'bpmn-icon-intermediate-event-catch-escalation',
-	    target: {
-	      type: 'bpmn:BoundaryEvent',
-	      eventDefinitionType: 'bpmn:EscalationEventDefinition',
-	      cancelActivity: true
-	    }
-	  },
-	  {
-	    label: 'Conditional boundary event',
-	    actionName: 'replace-with-conditional-boundary',
-	    className: 'bpmn-icon-intermediate-event-catch-condition',
-	    target: {
-	      type: 'bpmn:BoundaryEvent',
-	      eventDefinitionType: 'bpmn:ConditionalEventDefinition',
-	      cancelActivity: true
-	    }
-	  },
-	  {
-	    label: 'Error boundary event',
-	    actionName: 'replace-with-error-boundary',
-	    className: 'bpmn-icon-intermediate-event-catch-error',
-	    target: {
-	      type: 'bpmn:BoundaryEvent',
-	      eventDefinitionType: 'bpmn:ErrorEventDefinition',
-	      cancelActivity: true
-	    }
-	  },
-	  {
-	    label: 'Cancel boundary event',
-	    actionName: 'replace-with-cancel-boundary',
-	    className: 'bpmn-icon-intermediate-event-catch-cancel',
-	    target: {
-	      type: 'bpmn:BoundaryEvent',
-	      eventDefinitionType: 'bpmn:CancelEventDefinition',
-	      cancelActivity: true
-	    }
-	  },
-	  {
-	    label: 'Signal boundary event',
-	    actionName: 'replace-with-signal-boundary',
-	    className: 'bpmn-icon-intermediate-event-catch-signal',
-	    target: {
-	      type: 'bpmn:BoundaryEvent',
-	      eventDefinitionType: 'bpmn:SignalEventDefinition',
-	      cancelActivity: true
-	    }
-	  },
-	  {
-	    label: 'Compensation boundary event',
-	    actionName: 'replace-with-compensation-boundary',
-	    className: 'bpmn-icon-intermediate-event-catch-compensation',
-	    target: {
-	      type: 'bpmn:BoundaryEvent',
-	      eventDefinitionType: 'bpmn:CompensateEventDefinition',
-	      cancelActivity: true
-	    }
-	  },
-	  {
-	    label: 'Message boundary event (non-interrupting)',
-	    actionName: 'replace-with-non-interrupting-message-boundary',
-	    className: 'bpmn-icon-intermediate-event-catch-non-interrupting-message',
-	    target: {
-	      type: 'bpmn:BoundaryEvent',
-	      eventDefinitionType: 'bpmn:MessageEventDefinition',
-	      cancelActivity: false
-	    }
-	  },
-	  {
-	    label: 'Timer boundary event (non-interrupting)',
-	    actionName: 'replace-with-non-interrupting-timer-boundary',
-	    className: 'bpmn-icon-intermediate-event-catch-non-interrupting-timer',
-	    target: {
-	      type: 'bpmn:BoundaryEvent',
-	      eventDefinitionType: 'bpmn:TimerEventDefinition',
-	      cancelActivity: false
-	    }
-	  },
-	  {
-	    label: 'Escalation boundary event (non-interrupting)',
-	    actionName: 'replace-with-non-interrupting-escalation-boundary',
-	    className: 'bpmn-icon-intermediate-event-catch-non-interrupting-escalation',
-	    target: {
-	      type: 'bpmn:BoundaryEvent',
-	      eventDefinitionType: 'bpmn:EscalationEventDefinition',
-	      cancelActivity: false
-	    }
-	  },
-	  {
-	    label: 'Conditional boundary event (non-interrupting)',
-	    actionName: 'replace-with-non-interrupting-conditional-boundary',
-	    className: 'bpmn-icon-intermediate-event-catch-non-interrupting-condition',
-	    target: {
-	      type: 'bpmn:BoundaryEvent',
-	      eventDefinitionType: 'bpmn:ConditionalEventDefinition',
-	      cancelActivity: false
-	    }
-	  },
-	  {
-	    label: 'Signal boundary event (non-interrupting)',
-	    actionName: 'replace-with-non-interrupting-signal-boundary',
-	    className: 'bpmn-icon-intermediate-event-catch-non-interrupting-signal',
-	    target: {
-	      type: 'bpmn:BoundaryEvent',
-	      eventDefinitionType: 'bpmn:SignalEventDefinition',
-	      cancelActivity: false
-	    }
-	  }
+	  replaceWith('message-boundary'),
+	  replaceWith('timer-boundary'),
+	  replaceWith('escalation-boundary'),
+	  replaceWith('conditional-boundary'),
+	  replaceWith('error-boundary'),
+	  replaceWith('cancel-boundary'),
+	  replaceWith('signal-boundary'),
+	  replaceWith('compensation-boundary'),
+	  replaceWith('non-interrupting-message-boundary'),
+	  replaceWith('non-interrupting-timer-boundary'),
+	  replaceWith('non-interrupting-escalation-boundary'),
+	  replaceWith('non-interrupting-conditional-boundary'),
+	  replaceWith('non-interrupting-signal-boundary')
 	];
 
 	/**
 	 * @type {ReplaceOption[]}
 	 */
 	var EVENT_SUB_PROCESS_START_EVENT = [
-	  {
-	    label: 'Message start event',
-	    actionName: 'replace-with-message-start',
-	    className: 'bpmn-icon-start-event-message',
-	    target: {
-	      type: 'bpmn:StartEvent',
-	      eventDefinitionType: 'bpmn:MessageEventDefinition',
-	      isInterrupting: true
-	    }
-	  },
-	  {
-	    label: 'Timer start event',
-	    actionName: 'replace-with-timer-start',
-	    className: 'bpmn-icon-start-event-timer',
-	    target: {
-	      type: 'bpmn:StartEvent',
-	      eventDefinitionType: 'bpmn:TimerEventDefinition',
-	      isInterrupting: true
-	    }
-	  },
-	  {
-	    label: 'Conditional start event',
-	    actionName: 'replace-with-conditional-start',
-	    className: 'bpmn-icon-start-event-condition',
-	    target: {
-	      type: 'bpmn:StartEvent',
-	      eventDefinitionType: 'bpmn:ConditionalEventDefinition',
-	      isInterrupting: true
-	    }
-	  },
-	  {
-	    label: 'Signal start event',
-	    actionName: 'replace-with-signal-start',
-	    className: 'bpmn-icon-start-event-signal',
-	    target: {
-	      type: 'bpmn:StartEvent',
-	      eventDefinitionType: 'bpmn:SignalEventDefinition',
-	      isInterrupting: true
-	    }
-	  },
-	  {
-	    label: 'Error start event',
-	    actionName: 'replace-with-error-start',
-	    className: 'bpmn-icon-start-event-error',
-	    target: {
-	      type: 'bpmn:StartEvent',
-	      eventDefinitionType: 'bpmn:ErrorEventDefinition',
-	      isInterrupting: true
-	    }
-	  },
-	  {
-	    label: 'Escalation start event',
-	    actionName: 'replace-with-escalation-start',
-	    className: 'bpmn-icon-start-event-escalation',
-	    target: {
-	      type: 'bpmn:StartEvent',
-	      eventDefinitionType: 'bpmn:EscalationEventDefinition',
-	      isInterrupting: true
-	    }
-	  },
-	  {
-	    label: 'Compensation start event',
-	    actionName: 'replace-with-compensation-start',
-	    className: 'bpmn-icon-start-event-compensation',
-	    target: {
-	      type: 'bpmn:StartEvent',
-	      eventDefinitionType: 'bpmn:CompensateEventDefinition',
-	      isInterrupting: true
-	    }
-	  },
-	  {
-	    label: 'Message start event (non-interrupting)',
-	    actionName: 'replace-with-non-interrupting-message-start',
-	    className: 'bpmn-icon-start-event-non-interrupting-message',
-	    target: {
-	      type: 'bpmn:StartEvent',
-	      eventDefinitionType: 'bpmn:MessageEventDefinition',
-	      isInterrupting: false
-	    }
-	  },
-	  {
-	    label: 'Timer start event (non-interrupting)',
-	    actionName: 'replace-with-non-interrupting-timer-start',
-	    className: 'bpmn-icon-start-event-non-interrupting-timer',
-	    target: {
-	      type: 'bpmn:StartEvent',
-	      eventDefinitionType: 'bpmn:TimerEventDefinition',
-	      isInterrupting: false
-	    }
-	  },
-	  {
-	    label: 'Conditional start event (non-interrupting)',
-	    actionName: 'replace-with-non-interrupting-conditional-start',
-	    className: 'bpmn-icon-start-event-non-interrupting-condition',
-	    target: {
-	      type: 'bpmn:StartEvent',
-	      eventDefinitionType: 'bpmn:ConditionalEventDefinition',
-	      isInterrupting: false
-	    }
-	  },
-	  {
-	    label: 'Signal start event (non-interrupting)',
-	    actionName: 'replace-with-non-interrupting-signal-start',
-	    className: 'bpmn-icon-start-event-non-interrupting-signal',
-	    target: {
-	      type: 'bpmn:StartEvent',
-	      eventDefinitionType: 'bpmn:SignalEventDefinition',
-	      isInterrupting: false
-	    }
-	  },
-	  {
-	    label: 'Escalation start event (non-interrupting)',
-	    actionName: 'replace-with-non-interrupting-escalation-start',
-	    className: 'bpmn-icon-start-event-non-interrupting-escalation',
-	    target: {
-	      type: 'bpmn:StartEvent',
-	      eventDefinitionType: 'bpmn:EscalationEventDefinition',
-	      isInterrupting: false
-	    }
-	  }
+	  replaceWith('message-start'),
+	  replaceWith('timer-start'),
+	  replaceWith('conditional-start'),
+	  replaceWith('signal-start'),
+	  replaceWith('error-start'),
+	  replaceWith('escalation-start'),
+	  replaceWith('compensation-start'),
+	  replaceWith('non-interrupting-message-start'),
+	  replaceWith('non-interrupting-timer-start'),
+	  replaceWith('non-interrupting-conditional-start'),
+	  replaceWith('non-interrupting-signal-start'),
+	  replaceWith('non-interrupting-escalation-start')
 	];
 
 	/**
@@ -57351,16 +57496,8 @@
 	 * @type {ReplaceOption[]}
 	 */
 	var PARTICIPANT = [
-	  {
-	    label: 'Expanded pool/participant',
-	    actionName: 'replace-with-expanded-pool',
-	    className: 'bpmn-icon-participant',
-	    target: {
-	      type: 'bpmn:Participant',
-	      isExpanded: true
-	    }
-	  },
-	  {
+	  replaceWith('expanded-pool'),
+	  replaceWith('collapsed-pool', {
 	    label: function(element) {
 	      var label = 'Empty pool/participant';
 
@@ -57369,16 +57506,8 @@
 	      }
 
 	      return label;
-	    },
-	    actionName: 'replace-with-collapsed-pool',
-
-	    // TODO(@janstuemmel): maybe design new icon
-	    className: 'bpmn-icon-lane',
-	    target: {
-	      type: 'bpmn:Participant',
-	      isExpanded: false
 	    }
-	  }
+	  })
 	];
 
 	/**
@@ -57386,205 +57515,38 @@
 	 */
 	var TYPED_EVENT = {
 	  'bpmn:MessageEventDefinition': [
-	    {
-	      label: 'Message start event',
-	      actionName: 'replace-with-message-start',
-	      className: 'bpmn-icon-start-event-message',
-	      target: {
-	        type: 'bpmn:StartEvent',
-	        eventDefinitionType: 'bpmn:MessageEventDefinition',
-	        isInterrupting: true
-	      }
-	    },
-	    {
-	      label: 'Message intermediate catch event',
-	      actionName: 'replace-with-message-intermediate-catch',
-	      className: 'bpmn-icon-intermediate-event-catch-message',
-	      target: {
-	        type: 'bpmn:IntermediateCatchEvent',
-	        eventDefinitionType: 'bpmn:MessageEventDefinition'
-	      }
-	    },
-	    {
-	      label: 'Message intermediate throw event',
-	      actionName: 'replace-with-message-intermediate-throw',
-	      className: 'bpmn-icon-intermediate-event-throw-message',
-	      target: {
-	        type: 'bpmn:IntermediateThrowEvent',
-	        eventDefinitionType: 'bpmn:MessageEventDefinition'
-	      }
-	    },
-	    {
-	      label: 'Message end event',
-	      actionName: 'replace-with-message-end',
-	      className: 'bpmn-icon-end-event-message',
-	      target: {
-	        type: 'bpmn:EndEvent',
-	        eventDefinitionType: 'bpmn:MessageEventDefinition'
-	      }
-	    }
+	    replaceWith('message-start'),
+	    replaceWith('message-intermediate-catch'),
+	    replaceWith('message-intermediate-throw'),
+	    replaceWith('message-end')
 	  ],
 	  'bpmn:TimerEventDefinition': [
-	    {
-	      label: 'Timer start event',
-	      actionName: 'replace-with-timer-start',
-	      className: 'bpmn-icon-start-event-timer',
-	      target: {
-	        type: 'bpmn:StartEvent',
-	        eventDefinitionType: 'bpmn:TimerEventDefinition',
-	        isInterrupting: true
-	      }
-	    },
-	    {
-	      label: 'Timer intermediate catch event',
-	      actionName: 'replace-with-timer-intermediate-catch',
-	      className: 'bpmn-icon-intermediate-event-catch-timer',
-	      target: {
-	        type: 'bpmn:IntermediateCatchEvent',
-	        eventDefinitionType: 'bpmn:TimerEventDefinition'
-	      }
-	    }
+	    replaceWith('timer-start'),
+	    replaceWith('timer-intermediate-catch')
 	  ],
 	  'bpmn:ConditionalEventDefinition': [
-	    {
-	      label: 'Conditional start event',
-	      actionName: 'replace-with-conditional-start',
-	      className: 'bpmn-icon-start-event-condition',
-	      target: {
-	        type: 'bpmn:StartEvent',
-	        eventDefinitionType: 'bpmn:ConditionalEventDefinition',
-	        isInterrupting: true
-	      }
-	    },
-	    {
-	      label: 'Conditional intermediate catch event',
-	      actionName: 'replace-with-conditional-intermediate-catch',
-	      className: 'bpmn-icon-intermediate-event-catch-condition',
-	      target: {
-	        type: 'bpmn:IntermediateCatchEvent',
-	        eventDefinitionType: 'bpmn:ConditionalEventDefinition'
-	      }
-	    }
+	    replaceWith('conditional-start'),
+	    replaceWith('conditional-intermediate-catch')
 	  ],
 	  'bpmn:SignalEventDefinition': [
-	    {
-	      label: 'Signal start event',
-	      actionName: 'replace-with-signal-start',
-	      className: 'bpmn-icon-start-event-signal',
-	      target: {
-	        type: 'bpmn:StartEvent',
-	        eventDefinitionType: 'bpmn:SignalEventDefinition',
-	        isInterrupting: true
-	      }
-	    },
-	    {
-	      label: 'Signal intermediate catch event',
-	      actionName: 'replace-with-signal-intermediate-catch',
-	      className: 'bpmn-icon-intermediate-event-catch-signal',
-	      target: {
-	        type: 'bpmn:IntermediateCatchEvent',
-	        eventDefinitionType: 'bpmn:SignalEventDefinition'
-	      }
-	    },
-	    {
-	      label: 'Signal intermediate throw event',
-	      actionName: 'replace-with-signal-intermediate-throw',
-	      className: 'bpmn-icon-intermediate-event-throw-signal',
-	      target: {
-	        type: 'bpmn:IntermediateThrowEvent',
-	        eventDefinitionType: 'bpmn:SignalEventDefinition'
-	      }
-	    },
-	    {
-	      label: 'Signal end event',
-	      actionName: 'replace-with-signal-end',
-	      className: 'bpmn-icon-end-event-signal',
-	      target: {
-	        type: 'bpmn:EndEvent',
-	        eventDefinitionType: 'bpmn:SignalEventDefinition'
-	      }
-	    }
+	    replaceWith('signal-start'),
+	    replaceWith('signal-intermediate-catch'),
+	    replaceWith('signal-intermediate-throw'),
+	    replaceWith('signal-end')
 	  ],
 	  'bpmn:ErrorEventDefinition': [
-	    {
-	      label: 'Error start event',
-	      actionName: 'replace-with-error-start',
-	      className: 'bpmn-icon-start-event-error',
-	      target: {
-	        type: 'bpmn:StartEvent',
-	        eventDefinitionType: 'bpmn:ErrorEventDefinition',
-	        isInterrupting: true
-	      }
-	    },
-	    {
-	      label: 'Error end event',
-	      actionName: 'replace-with-error-end',
-	      className: 'bpmn-icon-end-event-error',
-	      target: {
-	        type: 'bpmn:EndEvent',
-	        eventDefinitionType: 'bpmn:ErrorEventDefinition'
-	      }
-	    }
+	    replaceWith('error-start'),
+	    replaceWith('error-end')
 	  ],
 	  'bpmn:EscalationEventDefinition': [
-	    {
-	      label: 'Escalation start event',
-	      actionName: 'replace-with-escalation-start',
-	      className: 'bpmn-icon-start-event-escalation',
-	      target: {
-	        type: 'bpmn:StartEvent',
-	        eventDefinitionType: 'bpmn:EscalationEventDefinition',
-	        isInterrupting: true
-	      }
-	    },
-	    {
-	      label: 'Escalation intermediate throw event',
-	      actionName: 'replace-with-escalation-intermediate-throw',
-	      className: 'bpmn-icon-intermediate-event-throw-escalation',
-	      target: {
-	        type: 'bpmn:IntermediateThrowEvent',
-	        eventDefinitionType: 'bpmn:EscalationEventDefinition'
-	      }
-	    },
-	    {
-	      label: 'Escalation end event',
-	      actionName: 'replace-with-escalation-end',
-	      className: 'bpmn-icon-end-event-escalation',
-	      target: {
-	        type: 'bpmn:EndEvent',
-	        eventDefinitionType: 'bpmn:EscalationEventDefinition'
-	      }
-	    }
+	    replaceWith('escalation-start'),
+	    replaceWith('escalation-intermediate-throw'),
+	    replaceWith('escalation-end')
 	  ],
 	  'bpmn:CompensateEventDefinition': [
-	    {
-	      label: 'Compensation start event',
-	      actionName: 'replace-with-compensation-start',
-	      className: 'bpmn-icon-start-event-compensation',
-	      target: {
-	        type: 'bpmn:StartEvent',
-	        eventDefinitionType: 'bpmn:CompensateEventDefinition',
-	        isInterrupting: true
-	      }
-	    },
-	    {
-	      label: 'Compensation intermediate throw event',
-	      actionName: 'replace-with-compensation-intermediate-throw',
-	      className: 'bpmn-icon-intermediate-event-throw-compensation',
-	      target: {
-	        type: 'bpmn:IntermediateThrowEvent',
-	        eventDefinitionType: 'bpmn:CompensateEventDefinition'
-	      }
-	    },
-	    {
-	      label: 'Compensation end event',
-	      actionName: 'replace-with-compensation-end',
-	      className: 'bpmn-icon-end-event-compensation',
-	      target: {
-	        type: 'bpmn:EndEvent',
-	        eventDefinitionType: 'bpmn:CompensateEventDefinition'
-	      }
-	    }
+	    replaceWith('compensation-start'),
+	    replaceWith('compensation-intermediate-throw'),
+	    replaceWith('compensation-end')
 	  ]
 	};
 
@@ -58689,7 +58651,7 @@
 
 	            popupMenu.open(element, 'bpmn-replace', position, {
 	              title: translate('Change element'),
-	              width: 300,
+	              width: 'var(--bpmn-replace-popup-width, 300px)',
 	              search: true
 	            });
 	          }