camunda-bpmn-js 0.24.1 → 1.1.0

package/dist/camunda-platform-modeler.development.js

@@ -22147,6 +22147,9 @@
 
 	};
 
+	Overlays.prototype.isShown = function() {
+	  return this._overlayRoot.style.display !== 'none';
+	};
 
 	Overlays.prototype.show = function() {
 	  setVisible$1(this._overlayRoot);
@@ -28053,7 +28056,9 @@
 
 
 	/**
-	 * Trigger context pad action.
+	 * Trigger context pad via DOM event.
+	 *
+	 * The entry to trigger is determined by the target element.
 	 *
 	 * @param  {string} action
 	 * @param  {Event} event
@@ -28061,10 +28066,7 @@
 	 */
 	ContextPad.prototype.trigger = function(action, event, autoActivate) {
 
-	  var target = this._current.target,
-	      entries = this._current.entries,
-	      entry,
-	      handler,
+	  var entry,
 	      originalEvent,
 	      button = event.delegateTarget || event.target;
 
@@ -28072,19 +28074,45 @@
 	    return event.preventDefault();
 	  }
 
-	  entry = entries[attr$1(button, 'data-action')];
-	  handler = entry.action;
-
+	  entry = attr$1(button, 'data-action');
 	  originalEvent = event.originalEvent || event;
 
+	  return this.triggerEntry(entry, action, originalEvent, autoActivate);
+	};
+
+	/**
+	 * Trigger context pad entry entry.
+	 *
+	 * @param {string} entryId
+	 * @param {string} action
+	 * @param {Event} event
+	 * @param {boolean} [autoActivate=false]
+	 */
+	ContextPad.prototype.triggerEntry = function(entryId, action, event, autoActivate) {
+
+	  if (!this.isShown()) {
+	    return;
+	  }
+
+	  var target = this._current.target,
+	      entries = this._current.entries;
+
+	  var entry = entries[entryId];
+
+	  if (!entry) {
+	    return;
+	  }
+
+	  var handler = entry.action;
+
 	  // simple action (via callback function)
 	  if (isFunction(handler)) {
 	    if (action === 'click') {
-	      return handler(originalEvent, target, autoActivate);
+	      return handler(event, target, autoActivate);
 	    }
 	  } else {
 	    if (handler[action]) {
-	      return handler[action](originalEvent, target, autoActivate);
+	      return handler[action](event, target, autoActivate);
 	    }
 	  }
 
@@ -28285,6 +28313,16 @@
 	};
 
 
+	/**
+	 * Check if pad is open and not hidden.
+	 *
+	 * @return {boolean}
+	 */
+	ContextPad.prototype.isShown = function() {
+	  return this.isOpen() && this._overlays.isShown();
+	};
+
+
 	/**
 	 * Get contex pad position.
 	 *
@@ -28337,11 +28375,11 @@
 
 	var n$3,l$3,u$3,t$5,o$5,f$3={},e$5=[],c$3=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i;function s$3(n,l){for(var u in l)n[u]=l[u];return n}function a$4(n){var l=n.parentNode;l&&l.removeChild(n);}function h$3(l,u,i){var t,o,r,f={};for(r in u)"key"==r?t=u[r]:"ref"==r?o=u[r]:f[r]=u[r];if(arguments.length>2&&(f.children=arguments.length>3?n$3.call(arguments,2):i),"function"==typeof l&&null!=l.defaultProps)for(r in l.defaultProps)void 0===f[r]&&(f[r]=l.defaultProps[r]);return v$3(l,f,t,o,null)}function v$3(n,i,t,o,r){var f={type:n,props:i,key:t,ref:o,__k:null,__:null,__b:0,__e:null,__d:void 0,__c:null,__h:null,constructor:void 0,__v:null==r?++u$3:r};return null==r&&null!=l$3.vnode&&l$3.vnode(f),f}function p$4(n){return n.children}function d$3(n,l){this.props=n,this.context=l;}function _$3(n,l){if(null==l)return n.__?_$3(n.__,n.__.__k.indexOf(n)+1):null;for(var u;l<n.__k.length;l++)if(null!=(u=n.__k[l])&&null!=u.__e)return u.__e;return "function"==typeof n.type?_$3(n):null}function k$4(n){var l,u;if(null!=(n=n.__)&&null!=n.__c){for(n.__e=n.__c.base=null,l=0;l<n.__k.length;l++)if(null!=(u=n.__k[l])&&null!=u.__e){n.__e=n.__c.base=u.__e;break}return k$4(n)}}function b$3(n){(!n.__d&&(n.__d=!0)&&t$5.push(n)&&!g$4.__r++||o$5!==l$3.debounceRendering)&&((o$5=l$3.debounceRendering)||setTimeout)(g$4);}function g$4(){for(var n;g$4.__r=t$5.length;)n=t$5.sort(function(n,l){return n.__v.__b-l.__v.__b}),t$5=[],n.some(function(n){var l,u,i,t,o,r;n.__d&&(o=(t=(l=n).__v).__e,(r=l.__P)&&(u=[],(i=s$3({},t)).__v=t.__v+1,j$4(r,t,i,l.__n,void 0!==r.ownerSVGElement,null!=t.__h?[o]:null,u,null==o?_$3(t):o,t.__h),z$3(u,t),t.__e!=o&&k$4(t)));});}function w$4(n,l,u,i,t,o,r,c,s,a){var h,y,d,k,b,g,w,x=i&&i.__k||e$5,C=x.length;for(u.__k=[],h=0;h<l.length;h++)if(null!=(k=u.__k[h]=null==(k=l[h])||"boolean"==typeof k?null:"string"==typeof k||"number"==typeof k||"bigint"==typeof k?v$3(null,k,null,null,k):Array.isArray(k)?v$3(p$4,{children:k},null,null,null):k.__b>0?v$3(k.type,k.props,k.key,k.ref?k.ref:null,k.__v):k)){if(k.__=u,k.__b=u.__b+1,null===(d=x[h])||d&&k.key==d.key&&k.type===d.type)x[h]=void 0;else for(y=0;y<C;y++){if((d=x[y])&&k.key==d.key&&k.type===d.type){x[y]=void 0;break}d=null;}j$4(n,k,d=d||f$3,t,o,r,c,s,a),b=k.__e,(y=k.ref)&&d.ref!=y&&(w||(w=[]),d.ref&&w.push(d.ref,null,k),w.push(y,k.__c||b,k)),null!=b?(null==g&&(g=b),"function"==typeof k.type&&k.__k===d.__k?k.__d=s=m$4(k,s,n):s=A$3(n,k,d,x,b,s),"function"==typeof u.type&&(u.__d=s)):s&&d.__e==s&&s.parentNode!=n&&(s=_$3(d));}for(u.__e=g,h=C;h--;)null!=x[h]&&N$2(x[h],x[h]);if(w)for(h=0;h<w.length;h++)M$2(w[h],w[++h],w[++h]);}function m$4(n,l,u){for(var i,t=n.__k,o=0;t&&o<t.length;o++)(i=t[o])&&(i.__=n,l="function"==typeof i.type?m$4(i,l,u):A$3(u,i,i,t,i.__e,l));return l}function A$3(n,l,u,i,t,o){var r,f,e;if(void 0!==l.__d)r=l.__d,l.__d=void 0;else if(null==u||t!=o||null==t.parentNode)n:if(null==o||o.parentNode!==n)n.appendChild(t),r=null;else {for(f=o,e=0;(f=f.nextSibling)&&e<i.length;e+=1)if(f==t)break n;n.insertBefore(t,o),r=o;}return void 0!==r?r:t.nextSibling}function C$3(n,l,u,i,t){var o;for(o in u)"children"===o||"key"===o||o in l||H$2(n,o,null,u[o],i);for(o in l)t&&"function"!=typeof l[o]||"children"===o||"key"===o||"value"===o||"checked"===o||u[o]===l[o]||H$2(n,o,l[o],u[o],i);}function $$2(n,l,u){"-"===l[0]?n.setProperty(l,u):n[l]=null==u?"":"number"!=typeof u||c$3.test(l)?u:u+"px";}function H$2(n,l,u,i,t){var o;n:if("style"===l)if("string"==typeof u)n.style.cssText=u;else {if("string"==typeof i&&(n.style.cssText=i=""),i)for(l in i)u&&l in u||$$2(n.style,l,"");if(u)for(l in u)i&&u[l]===i[l]||$$2(n.style,l,u[l]);}else if("o"===l[0]&&"n"===l[1])o=l!==(l=l.replace(/Capture$/,"")),l=l.toLowerCase()in n?l.toLowerCase().slice(2):l.slice(2),n.l||(n.l={}),n.l[l+o]=u,u?i||n.addEventListener(l,o?T$4:I$2,o):n.removeEventListener(l,o?T$4:I$2,o);else if("dangerouslySetInnerHTML"!==l){if(t)l=l.replace(/xlink(H|:h)/,"h").replace(/sName$/,"s");else if("href"!==l&&"list"!==l&&"form"!==l&&"tabIndex"!==l&&"download"!==l&&l in n)try{n[l]=null==u?"":u;break n}catch(n){}"function"==typeof u||(null==u||!1===u&&-1==l.indexOf("-")?n.removeAttribute(l):n.setAttribute(l,u));}}function I$2(n){this.l[n.type+!1](l$3.event?l$3.event(n):n);}function T$4(n){this.l[n.type+!0](l$3.event?l$3.event(n):n);}function j$4(n,u,i,t,o,r,f,e,c){var a,h,v,y,_,k,b,g,m,x,A,C,$,H,I,T=u.type;if(void 0!==u.constructor)return null;null!=i.__h&&(c=i.__h,e=u.__e=i.__e,u.__h=null,r=[e]),(a=l$3.__b)&&a(u);try{n:if("function"==typeof T){if(g=u.props,m=(a=T.contextType)&&t[a.__c],x=a?m?m.props.value:a.__:t,i.__c?b=(h=u.__c=i.__c).__=h.__E:("prototype"in T&&T.prototype.render?u.__c=h=new T(g,x):(u.__c=h=new d$3(g,x),h.constructor=T,h.render=O$2),m&&m.sub(h),h.props=g,h.state||(h.state={}),h.context=x,h.__n=t,v=h.__d=!0,h.__h=[],h._sb=[]),null==h.__s&&(h.__s=h.state),null!=T.getDerivedStateFromProps&&(h.__s==h.state&&(h.__s=s$3({},h.__s)),s$3(h.__s,T.getDerivedStateFromProps(g,h.__s))),y=h.props,_=h.state,v)null==T.getDerivedStateFromProps&&null!=h.componentWillMount&&h.componentWillMount(),null!=h.componentDidMount&&h.__h.push(h.componentDidMount);else {if(null==T.getDerivedStateFromProps&&g!==y&&null!=h.componentWillReceiveProps&&h.componentWillReceiveProps(g,x),!h.__e&&null!=h.shouldComponentUpdate&&!1===h.shouldComponentUpdate(g,h.__s,x)||u.__v===i.__v){for(h.props=g,h.state=h.__s,u.__v!==i.__v&&(h.__d=!1),h.__v=u,u.__e=i.__e,u.__k=i.__k,u.__k.forEach(function(n){n&&(n.__=u);}),A=0;A<h._sb.length;A++)h.__h.push(h._sb[A]);h._sb=[],h.__h.length&&f.push(h);break n}null!=h.componentWillUpdate&&h.componentWillUpdate(g,h.__s,x),null!=h.componentDidUpdate&&h.__h.push(function(){h.componentDidUpdate(y,_,k);});}if(h.context=x,h.props=g,h.__v=u,h.__P=n,C=l$3.__r,$=0,"prototype"in T&&T.prototype.render){for(h.state=h.__s,h.__d=!1,C&&C(u),a=h.render(h.props,h.state,h.context),H=0;H<h._sb.length;H++)h.__h.push(h._sb[H]);h._sb=[];}else do{h.__d=!1,C&&C(u),a=h.render(h.props,h.state,h.context),h.state=h.__s;}while(h.__d&&++$<25);h.state=h.__s,null!=h.getChildContext&&(t=s$3(s$3({},t),h.getChildContext())),v||null==h.getSnapshotBeforeUpdate||(k=h.getSnapshotBeforeUpdate(y,_)),I=null!=a&&a.type===p$4&&null==a.key?a.props.children:a,w$4(n,Array.isArray(I)?I:[I],u,i,t,o,r,f,e,c),h.base=u.__e,u.__h=null,h.__h.length&&f.push(h),b&&(h.__E=h.__=null),h.__e=!1;}else null==r&&u.__v===i.__v?(u.__k=i.__k,u.__e=i.__e):u.__e=L$2(i.__e,u,i,t,o,r,f,c);(a=l$3.diffed)&&a(u);}catch(n){u.__v=null,(c||null!=r)&&(u.__e=e,u.__h=!!c,r[r.indexOf(e)]=null),l$3.__e(n,u,i);}}function z$3(n,u){l$3.__c&&l$3.__c(u,n),n.some(function(u){try{n=u.__h,u.__h=[],n.some(function(n){n.call(u);});}catch(n){l$3.__e(n,u.__v);}});}function L$2(l,u,i,t,o,r,e,c){var s,h,v,y=i.props,p=u.props,d=u.type,k=0;if("svg"===d&&(o=!0),null!=r)for(;k<r.length;k++)if((s=r[k])&&"setAttribute"in s==!!d&&(d?s.localName===d:3===s.nodeType)){l=s,r[k]=null;break}if(null==l){if(null===d)return document.createTextNode(p);l=o?document.createElementNS("http://www.w3.org/2000/svg",d):document.createElement(d,p.is&&p),r=null,c=!1;}if(null===d)y===p||c&&l.data===p||(l.data=p);else {if(r=r&&n$3.call(l.childNodes),h=(y=i.props||f$3).dangerouslySetInnerHTML,v=p.dangerouslySetInnerHTML,!c){if(null!=r)for(y={},k=0;k<l.attributes.length;k++)y[l.attributes[k].name]=l.attributes[k].value;(v||h)&&(v&&(h&&v.__html==h.__html||v.__html===l.innerHTML)||(l.innerHTML=v&&v.__html||""));}if(C$3(l,p,y,o,c),v)u.__k=[];else if(k=u.props.children,w$4(l,Array.isArray(k)?k:[k],u,i,t,o&&"foreignObject"!==d,r,e,r?r[0]:i.__k&&_$3(i,0),c),null!=r)for(k=r.length;k--;)null!=r[k]&&a$4(r[k]);c||("value"in p&&void 0!==(k=p.value)&&(k!==l.value||"progress"===d&&!k||"option"===d&&k!==y.value)&&H$2(l,"value",k,y.value,!1),"checked"in p&&void 0!==(k=p.checked)&&k!==l.checked&&H$2(l,"checked",k,y.checked,!1));}return l}function M$2(n,u,i){try{"function"==typeof n?n(u):n.current=u;}catch(n){l$3.__e(n,i);}}function N$2(n,u,i){var t,o;if(l$3.unmount&&l$3.unmount(n),(t=n.ref)&&(t.current&&t.current!==n.__e||M$2(t,null,u)),null!=(t=n.__c)){if(t.componentWillUnmount)try{t.componentWillUnmount();}catch(n){l$3.__e(n,u);}t.base=t.__P=null,n.__c=void 0;}if(t=n.__k)for(o=0;o<t.length;o++)t[o]&&N$2(t[o],u,i||"function"!=typeof n.type);i||null==n.__e||a$4(n.__e),n.__=n.__e=n.__d=void 0;}function O$2(n,l,u){return this.constructor(n,u)}function P$2(u,i,t){var o,r,e;l$3.__&&l$3.__(u,i),r=(o="function"==typeof t)?null:t&&t.__k||i.__k,e=[],j$4(i,u=(!o&&t||i).__k=h$3(p$4,null,[u]),r||f$3,f$3,void 0!==i.ownerSVGElement,!o&&t?[t]:r?null:i.firstChild?n$3.call(i.childNodes):null,e,!o&&t?t:r?r.__e:i.firstChild,o),z$3(e,u);}n$3=e$5.slice,l$3={__e:function(n,l,u,i){for(var t,o,r;l=l.__;)if((t=l.__c)&&!t.__)try{if((o=t.constructor)&&null!=o.getDerivedStateFromError&&(t.setState(o.getDerivedStateFromError(n)),r=t.__d),null!=t.componentDidCatch&&(t.componentDidCatch(n,i||{}),r=t.__d),r)return t.__E=t}catch(l){n=l;}throw n}},u$3=0,d$3.prototype.setState=function(n,l){var u;u=null!=this.__s&&this.__s!==this.state?this.__s:this.__s=s$3({},this.state),"function"==typeof n&&(n=n(s$3({},u),this.props)),n&&s$3(u,n),null!=n&&this.__v&&(l&&this._sb.push(l),b$3(this));},d$3.prototype.forceUpdate=function(n){this.__v&&(this.__e=!0,n&&this.__h.push(n),b$3(this));},d$3.prototype.render=p$4,t$5=[],g$4.__r=0;
 
-	var t$4,r$3,u$2,i$4,o$4=0,f$2=[],c$2=[],e$4=l$3.__b,a$3=l$3.__r,v$2=l$3.diffed,l$2=l$3.__c,m$3=l$3.unmount;function d$2(t,u){l$3.__h&&l$3.__h(r$3,t,o$4||u),o$4=0;var i=r$3.__H||(r$3.__H={__:[],__h:[]});return t>=i.__.length&&i.__.push({__V:c$2}),i.__[t]}function p$3(n){return o$4=1,y$2(B$1,n)}function y$2(n,u,i){var o=d$2(t$4++,2);if(o.t=n,!o.__c&&(o.__=[i?i(u):B$1(void 0,u),function(n){var t=o.__N?o.__N[0]:o.__[0],r=o.t(t,n);t!==r&&(o.__N=[r,o.__[1]],o.__c.setState({}));}],o.__c=r$3,!r$3.u)){r$3.u=!0;var f=r$3.shouldComponentUpdate;r$3.shouldComponentUpdate=function(n,t,r){if(!o.__c.__H)return !0;var u=o.__c.__H.__.filter(function(n){return n.__c});if(u.every(function(n){return !n.__N}))return !f||f.call(this,n,t,r);var i=!1;return u.forEach(function(n){if(n.__N){var t=n.__[0];n.__=n.__N,n.__N=void 0,t!==n.__[0]&&(i=!0);}}),!(!i&&o.__c.props===n)&&(!f||f.call(this,n,t,r))};}return o.__N||o.__}function h$2(u,i){var o=d$2(t$4++,3);!l$3.__s&&z$2(o.__H,i)&&(o.__=u,o.i=i,r$3.__H.__h.push(o));}function s$2(u,i){var o=d$2(t$4++,4);!l$3.__s&&z$2(o.__H,i)&&(o.__=u,o.i=i,r$3.__h.push(o));}function _$2(n){return o$4=5,F$2(function(){return {current:n}},[])}function F$2(n,r){var u=d$2(t$4++,7);return z$2(u.__H,r)?(u.__V=n(),u.i=r,u.__h=n,u.__V):u.__}function T$3(n,t){return o$4=8,F$2(function(){return n},t)}function b$2(){for(var t;t=f$2.shift();)if(t.__P&&t.__H)try{t.__H.__h.forEach(k$3),t.__H.__h.forEach(w$3),t.__H.__h=[];}catch(r){t.__H.__h=[],l$3.__e(r,t.__v);}}l$3.__b=function(n){r$3=null,e$4&&e$4(n);},l$3.__r=function(n){a$3&&a$3(n),t$4=0;var i=(r$3=n.__c).__H;i&&(u$2===r$3?(i.__h=[],r$3.__h=[],i.__.forEach(function(n){n.__N&&(n.__=n.__N),n.__V=c$2,n.__N=n.i=void 0;})):(i.__h.forEach(k$3),i.__h.forEach(w$3),i.__h=[])),u$2=r$3;},l$3.diffed=function(t){v$2&&v$2(t);var o=t.__c;o&&o.__H&&(o.__H.__h.length&&(1!==f$2.push(o)&&i$4===l$3.requestAnimationFrame||((i$4=l$3.requestAnimationFrame)||j$3)(b$2)),o.__H.__.forEach(function(n){n.i&&(n.__H=n.i),n.__V!==c$2&&(n.__=n.__V),n.i=void 0,n.__V=c$2;})),u$2=r$3=null;},l$3.__c=function(t,r){r.some(function(t){try{t.__h.forEach(k$3),t.__h=t.__h.filter(function(n){return !n.__||w$3(n)});}catch(u){r.some(function(n){n.__h&&(n.__h=[]);}),r=[],l$3.__e(u,t.__v);}}),l$2&&l$2(t,r);},l$3.unmount=function(t){m$3&&m$3(t);var r,u=t.__c;u&&u.__H&&(u.__H.__.forEach(function(n){try{k$3(n);}catch(n){r=n;}}),u.__H=void 0,r&&l$3.__e(r,u.__v));};var g$3="function"==typeof requestAnimationFrame;function j$3(n){var t,r=function(){clearTimeout(u),g$3&&cancelAnimationFrame(t),setTimeout(n);},u=setTimeout(r,100);g$3&&(t=requestAnimationFrame(r));}function k$3(n){var t=r$3,u=n.__c;"function"==typeof u&&(n.__c=void 0,u()),r$3=t;}function w$3(n){var t=r$3;n.__c=n.__(),r$3=t;}function z$2(n,t){return !n||n.length!==t.length||t.some(function(t,r){return t!==n[r]})}function B$1(n,t){return "function"==typeof t?t(n):t}
+	var n$2=function(t,s,r,e){var u;s[0]=0;for(var h=1;h<s.length;h++){var p=s[h++],a=s[h]?(s[0]|=p?1:2,r[s[h++]]):s[++h];3===p?e[0]=a:4===p?e[1]=Object.assign(e[1]||{},a):5===p?(e[1]=e[1]||{})[s[++h]]=a:6===p?e[1][s[++h]]+=a+"":p?(u=t.apply(a,n$2(t,a,r,["",null])),e.push(u),a[0]?s[0]|=2:(s[h-2]=0,s[h]=u)):e.push(a);}return e},t$4=new Map;function e$4(s){var r=t$4.get(this);return r||(r=new Map,t$4.set(this,r)),(r=n$2(this,r.get(s)||(r.set(s,r=function(n){for(var t,s,r=1,e="",u="",h=[0],p=function(n){1===r&&(n||(e=e.replace(/^\s*\n\s*|\s*\n\s*$/g,"")))?h.push(0,n,e):3===r&&(n||e)?(h.push(3,n,e),r=2):2===r&&"..."===e&&n?h.push(4,n,0):2===r&&e&&!n?h.push(5,0,!0,e):r>=5&&((e||!n&&5===r)&&(h.push(r,0,e,s),r=6),n&&(h.push(r,n,0,s),r=6)),e="";},a=0;a<n.length;a++){a&&(1===r&&p(),p(a));for(var l=0;l<n[a].length;l++)t=n[a][l],1===r?"<"===t?(p(),h=[h],r=3):e+=t:4===r?"--"===e&&">"===t?(r=1,e=""):e=t+e[0]:u?t===u?u="":e+=t:'"'===t||"'"===t?u=t:">"===t?(p(),r=1):r&&("="===t?(r=5,s=e,e=""):"/"===t&&(r<5||">"===n[a][l+1])?(p(),3===r&&(h=h[0]),r=h,(h=h[0]).push(2,0,r),r=0):" "===t||"\t"===t||"\n"===t||"\r"===t?(p(),r=2):e+=t),3===r&&"!--"===e&&(r=4,h=h[0]);}return p(),h}(s)),r),arguments,[])).length>1?r:r[0]}
 
-	var n$2=function(t,s,r,e){var u;s[0]=0;for(var h=1;h<s.length;h++){var p=s[h++],a=s[h]?(s[0]|=p?1:2,r[s[h++]]):s[++h];3===p?e[0]=a:4===p?e[1]=Object.assign(e[1]||{},a):5===p?(e[1]=e[1]||{})[s[++h]]=a:6===p?e[1][s[++h]]+=a+"":p?(u=t.apply(a,n$2(t,a,r,["",null])),e.push(u),a[0]?s[0]|=2:(s[h-2]=0,s[h]=u)):e.push(a);}return e},t$3=new Map;function e$3(s){var r=t$3.get(this);return r||(r=new Map,t$3.set(this,r)),(r=n$2(this,r.get(s)||(r.set(s,r=function(n){for(var t,s,r=1,e="",u="",h=[0],p=function(n){1===r&&(n||(e=e.replace(/^\s*\n\s*|\s*\n\s*$/g,"")))?h.push(0,n,e):3===r&&(n||e)?(h.push(3,n,e),r=2):2===r&&"..."===e&&n?h.push(4,n,0):2===r&&e&&!n?h.push(5,0,!0,e):r>=5&&((e||!n&&5===r)&&(h.push(r,0,e,s),r=6),n&&(h.push(r,n,0,s),r=6)),e="";},a=0;a<n.length;a++){a&&(1===r&&p(),p(a));for(var l=0;l<n[a].length;l++)t=n[a][l],1===r?"<"===t?(p(),h=[h],r=3):e+=t:4===r?"--"===e&&">"===t?(r=1,e=""):e=t+e[0]:u?t===u?u="":e+=t:'"'===t||"'"===t?u=t:">"===t?(p(),r=1):r&&("="===t?(r=5,s=e,e=""):"/"===t&&(r<5||">"===n[a][l+1])?(p(),3===r&&(h=h[0]),r=h,(h=h[0]).push(2,0,r),r=0):" "===t||"\t"===t||"\n"===t||"\r"===t?(p(),r=2):e+=t),3===r&&"!--"===e&&(r=4,h=h[0]);}return p(),h}(s)),r),arguments,[])).length>1?r:r[0]}
+	var m$3=e$4.bind(h$3);
 
-	var m$2=e$3.bind(h$3);
+	var t$3,r$3,u$2,i$4,o$4=0,f$2=[],c$2=[],e$3=l$3.__b,a$3=l$3.__r,v$2=l$3.diffed,l$2=l$3.__c,m$2=l$3.unmount;function d$2(t,u){l$3.__h&&l$3.__h(r$3,t,o$4||u),o$4=0;var i=r$3.__H||(r$3.__H={__:[],__h:[]});return t>=i.__.length&&i.__.push({__V:c$2}),i.__[t]}function p$3(n){return o$4=1,y$2(B$1,n)}function y$2(n,u,i){var o=d$2(t$3++,2);if(o.t=n,!o.__c&&(o.__=[i?i(u):B$1(void 0,u),function(n){var t=o.__N?o.__N[0]:o.__[0],r=o.t(t,n);t!==r&&(o.__N=[r,o.__[1]],o.__c.setState({}));}],o.__c=r$3,!r$3.u)){r$3.u=!0;var f=r$3.shouldComponentUpdate;r$3.shouldComponentUpdate=function(n,t,r){if(!o.__c.__H)return !0;var u=o.__c.__H.__.filter(function(n){return n.__c});if(u.every(function(n){return !n.__N}))return !f||f.call(this,n,t,r);var i=!1;return u.forEach(function(n){if(n.__N){var t=n.__[0];n.__=n.__N,n.__N=void 0,t!==n.__[0]&&(i=!0);}}),!(!i&&o.__c.props===n)&&(!f||f.call(this,n,t,r))};}return o.__N||o.__}function h$2(u,i){var o=d$2(t$3++,3);!l$3.__s&&z$2(o.__H,i)&&(o.__=u,o.i=i,r$3.__H.__h.push(o));}function s$2(u,i){var o=d$2(t$3++,4);!l$3.__s&&z$2(o.__H,i)&&(o.__=u,o.i=i,r$3.__h.push(o));}function _$2(n){return o$4=5,F$2(function(){return {current:n}},[])}function F$2(n,r){var u=d$2(t$3++,7);return z$2(u.__H,r)?(u.__V=n(),u.i=r,u.__h=n,u.__V):u.__}function T$3(n,t){return o$4=8,F$2(function(){return n},t)}function b$2(){for(var t;t=f$2.shift();)if(t.__P&&t.__H)try{t.__H.__h.forEach(k$3),t.__H.__h.forEach(w$3),t.__H.__h=[];}catch(r){t.__H.__h=[],l$3.__e(r,t.__v);}}l$3.__b=function(n){r$3=null,e$3&&e$3(n);},l$3.__r=function(n){a$3&&a$3(n),t$3=0;var i=(r$3=n.__c).__H;i&&(u$2===r$3?(i.__h=[],r$3.__h=[],i.__.forEach(function(n){n.__N&&(n.__=n.__N),n.__V=c$2,n.__N=n.i=void 0;})):(i.__h.forEach(k$3),i.__h.forEach(w$3),i.__h=[])),u$2=r$3;},l$3.diffed=function(t){v$2&&v$2(t);var o=t.__c;o&&o.__H&&(o.__H.__h.length&&(1!==f$2.push(o)&&i$4===l$3.requestAnimationFrame||((i$4=l$3.requestAnimationFrame)||j$3)(b$2)),o.__H.__.forEach(function(n){n.i&&(n.__H=n.i),n.__V!==c$2&&(n.__=n.__V),n.i=void 0,n.__V=c$2;})),u$2=r$3=null;},l$3.__c=function(t,r){r.some(function(t){try{t.__h.forEach(k$3),t.__h=t.__h.filter(function(n){return !n.__||w$3(n)});}catch(u){r.some(function(n){n.__h&&(n.__h=[]);}),r=[],l$3.__e(u,t.__v);}}),l$2&&l$2(t,r);},l$3.unmount=function(t){m$2&&m$2(t);var r,u=t.__c;u&&u.__H&&(u.__H.__.forEach(function(n){try{k$3(n);}catch(n){r=n;}}),u.__H=void 0,r&&l$3.__e(r,u.__v));};var g$3="function"==typeof requestAnimationFrame;function j$3(n){var t,r=function(){clearTimeout(u),g$3&&cancelAnimationFrame(t),setTimeout(n);},u=setTimeout(r,100);g$3&&(t=requestAnimationFrame(r));}function k$3(n){var t=r$3,u=n.__c;"function"==typeof u&&(n.__c=void 0,u()),r$3=t;}function w$3(n){var t=r$3;n.__c=n.__(),r$3=t;}function z$2(n,t){return !n||n.length!==t.length||t.some(function(t,r){return t!==n[r]})}function B$1(n,t){return "function"==typeof t?t(n):t}
 
 	function r$2(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r$2(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r$2(e))&&(n&&(n+=" "),n+=t);return n}
 
@@ -28364,7 +28402,7 @@
 	    onClick
 	  } = props;
 
-	  return m$2`
+	  return m$3`
     <li
       class=${ clsx('entry', { selected }) }
       data-id=${ entry.id }
@@ -28377,17 +28415,17 @@
         <span
           class=${ clsx('djs-popup-entry-name', entry.className) }
         >
-          ${ entry.imageUrl ? m$2`
+          ${ entry.imageUrl ? m$3`
             <img class="djs-popup-entry-icon" src=${ entry.imageUrl } />
           ` : null }
 
-          ${ entry.label ? m$2`
+          ${ entry.label ? m$3`
             <span class="djs-popup-label">
               ${ entry.label }
             </span>
           ` : null }
         </span>
-        ${ entry.description && m$2`
+        ${ entry.description && m$3`
           <span
             class="djs-popup-entry-description"
             title=${ entry.description }
@@ -28396,7 +28434,7 @@
           </span>
         ` }
       </div>
-      ${ entry.documentationRef && m$2`
+      ${ entry.documentationRef && m$3`
         <div class="djs-popup-entry-docs">
           <a
             href="${ entry.documentationRef }"
@@ -28451,16 +28489,16 @@
 	    }
 	  }, [ selectedEntry ]);
 
-	  return m$2`
+	  return m$3`
     <div class="djs-popup-results" ref=${ resultsRef }>
-      ${ groups.map(group => m$2`
-        ${ group.name && m$2`
+      ${ groups.map(group => m$3`
+        ${ group.name && m$3`
           <div key=${ group.id } class="entry-header" title=${ group.name }>
             ${ group.name }
           </div>
         ` }
         <ul class="djs-popup-group" data-group=${ group.id }>
-          ${ group.entries.map(entry => m$2`
+          ${ group.entries.map(entry => m$3`
             <${PopupMenuItem}
               key=${ entry.id }
               entry=${ entry }
@@ -28679,7 +28717,7 @@
 
 	  const displayHeader = F$2(() => title || headerEntries.length > 0, [ title, headerEntries ]);
 
-	  return m$2`
+	  return m$3`
     <${PopupMenuWrapper}
       onClose=${ onClose }
       onKeyup=${ handleKey }
@@ -28689,10 +28727,10 @@
       width=${ width }
       scale=${ scale }
     >
-      ${ displayHeader && m$2`
+      ${ displayHeader && m$3`
         <div class="djs-popup-header">
           <h3 class="djs-popup-title" title=${ title }>${ title }</h3>
-          ${ headerEntries.map(entry => m$2`
+          ${ headerEntries.map(entry => m$3`
             <span
               class=${ getHeaderClasses(entry, entry === selectedEntry) }
               onClick=${ event => onSelect(event, entry) }
@@ -28701,21 +28739,21 @@
               onMouseEnter=${ () => setSelectedEntry(entry) }
               onMouseLeave=${ () => setSelectedEntry(null) }
             >
-              ${ entry.imageUrl ? m$2`
+              ${ entry.imageUrl ? m$3`
                 <img class="djs-popup-entry-icon" src=${ entry.imageUrl } />
               ` : null }
 
-              ${ entry.label ? m$2`
+              ${ entry.label ? m$3`
                 <span class="djs-popup-label">${ entry.label }</span>
               ` : null }
             </span>
           `) }
         </div>
       ` }
-      ${ originalEntries.length > 0 && m$2`
+      ${ originalEntries.length > 0 && m$3`
         <div class="djs-popup-body">
 
-          ${ searchable && m$2`
+          ${ searchable && m$3`
           <div class="djs-popup-search">
             <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"/>
@@ -28734,7 +28772,7 @@
             onClick=${ onSelect }
           />
         </div>
-        ${ entries.length === 0 && m$2`
+        ${ entries.length === 0 && m$3`
           <div class="djs-popup-no-results">No matching entries found.</div>
         ` }
       ` }
@@ -28787,7 +28825,7 @@
 	    popupRef.current && popupRef.current.focus();
 	  }, []);
 
-	  return m$2`
+	  return m$3`
     <div
       class="djs-popup-backdrop"
       onClick=${ checkClose }
@@ -28918,7 +28956,7 @@
 	  const onSelect = (event, entry) => this.trigger(event, entry);
 
 	  P$2(
-	    m$2`
+	    m$3`
       <${PopupMenuComponent}
         onClose=${ onClose }
         onSelect=${ onSelect }
@@ -29042,13 +29080,10 @@
 
 	PopupMenu.prototype._createContainer = function(config) {
 
-	  let parent = config && config.parent || 'body';
-
-	  if (typeof parent === 'string') {
-	    parent = document.querySelector(parent);
-	  }
+	  var canvas = this._canvas,
+	      parent = canvas.getContainer();
 
-	  const container = domify$1(`<div class="djs-popup-parent djs-parent" data-popup=${config.provider}></div>`);
+	  const container = domify$1(`<div class="djs-popup-parent djs-scrollable" data-popup=${config.provider}></div>`);
 
 	  parent.appendChild(container);
 
@@ -37810,6 +37845,25 @@
 	  }
 	];
 
+	var replaceOptions = /*#__PURE__*/Object.freeze({
+		__proto__: null,
+		START_EVENT: START_EVENT,
+		START_EVENT_SUB_PROCESS: START_EVENT_SUB_PROCESS,
+		INTERMEDIATE_EVENT: INTERMEDIATE_EVENT,
+		END_EVENT: END_EVENT,
+		GATEWAY: GATEWAY,
+		SUBPROCESS_EXPANDED: SUBPROCESS_EXPANDED,
+		TRANSACTION: TRANSACTION,
+		EVENT_SUB_PROCESS: EVENT_SUB_PROCESS,
+		TASK: TASK,
+		DATA_OBJECT_REFERENCE: DATA_OBJECT_REFERENCE,
+		DATA_STORE_REFERENCE: DATA_STORE_REFERENCE,
+		BOUNDARY_EVENT: BOUNDARY_EVENT,
+		EVENT_SUB_PROCESS_START_EVENT: EVENT_SUB_PROCESS_START_EVENT,
+		SEQUENCE_FLOW: SEQUENCE_FLOW,
+		PARTICIPANT: PARTICIPANT
+	});
+
 	/**
 	 * This module is an element agnostic replace menu provider for the popup menu.
 	 */
@@ -39908,6 +39962,7 @@
 	  var directEditing = injector.get('directEditing', false);
 	  var searchPad = injector.get('searchPad', false);
 	  var modeling = injector.get('modeling', false);
+	  var contextPad = injector.get('contextPad', false);
 
 	  // (2) check components and register actions
 
@@ -40031,6 +40086,12 @@
 	    });
 	  }
 
+	  if (selection && contextPad) {
+	    this._registerAction('replaceElement', function(event) {
+	      contextPad.triggerEntry('replace', 'click', event);
+	    });
+	  }
+
 	};
 
 	var EditorActionsModule = {
@@ -41149,6 +41210,23 @@
 	    }
 	  });
 
+	  // activate replace element
+	  // R
+	  addListener('replaceElement', function(context) {
+
+	    var event = context.keyEvent;
+
+	    if (keyboard.hasModifier(event)) {
+	      return;
+	    }
+
+	    if (keyboard.isKey([ 'r', 'R' ], event)) {
+	      editorActions.trigger('replaceElement', event);
+
+	      return true;
+	    }
+	  });
+
 	};
 
 	var KeyboardModule = {
@@ -64434,10 +64512,11 @@
 	    /**
 	    Create a selection range.
 	    */
-	    static range(anchor, head, goalColumn) {
-	        let goal = (goalColumn !== null && goalColumn !== void 0 ? goalColumn : 33554431 /* RangeFlag.NoGoalColumn */) << 5 /* RangeFlag.GoalColumnOffset */;
-	        return head < anchor ? SelectionRange.create(head, anchor, 16 /* RangeFlag.Inverted */ | goal | 8 /* RangeFlag.AssocAfter */)
-	            : SelectionRange.create(anchor, head, goal | (head > anchor ? 4 /* RangeFlag.AssocBefore */ : 0));
+	    static range(anchor, head, goalColumn, bidiLevel) {
+	        let flags = ((goalColumn !== null && goalColumn !== void 0 ? goalColumn : 33554431 /* RangeFlag.NoGoalColumn */) << 5 /* RangeFlag.GoalColumnOffset */) |
+	            (bidiLevel == null ? 3 : Math.min(2, bidiLevel));
+	        return head < anchor ? SelectionRange.create(head, anchor, 16 /* RangeFlag.Inverted */ | 8 /* RangeFlag.AssocAfter */ | flags)
+	            : SelectionRange.create(anchor, head, (head > anchor ? 4 /* RangeFlag.AssocBefore */ : 0) | flags);
 	    }
 	    /**
 	    @internal
@@ -67267,6 +67346,26 @@
 	        }
 	    }
 	}
+	function scrollableParent(dom) {
+	    let doc = dom.ownerDocument;
+	    for (let cur = dom.parentNode; cur;) {
+	        if (cur == doc.body) {
+	            break;
+	        }
+	        else if (cur.nodeType == 1) {
+	            if (cur.scrollHeight > cur.clientHeight || cur.scrollWidth > cur.clientWidth)
+	                return cur;
+	            cur = cur.assignedSlot || cur.parentNode;
+	        }
+	        else if (cur.nodeType == 11) {
+	            cur = cur.host;
+	        }
+	        else {
+	            break;
+	        }
+	    }
+	    return null;
+	}
 	class DOMSelectionState {
 	    constructor() {
 	        this.anchorNode = null;
@@ -68403,7 +68502,9 @@
 	        super(-200000000 /* Side.Line */, -200000000 /* Side.Line */, null, spec);
 	    }
 	    eq(other) {
-	        return other instanceof LineDecoration && attrsEq(this.spec.attributes, other.spec.attributes);
+	        return other instanceof LineDecoration &&
+	            this.spec.class == other.spec.class &&
+	            attrsEq(this.spec.attributes, other.spec.attributes);
 	    }
 	    range(from, to = from) {
 	        if (to != from)
@@ -68678,6 +68779,7 @@
 	        this.curLine = null;
 	        this.breakAtStart = 0;
 	        this.pendingBuffer = 0 /* Buf.No */;
+	        this.bufferMarks = [];
 	        // Set to false directly after a widget that covers the position after it
 	        this.atCursorPos = true;
 	        this.openStart = -1;
@@ -68700,20 +68802,20 @@
 	        }
 	        return this.curLine;
 	    }
-	    flushBuffer(active) {
+	    flushBuffer(active = this.bufferMarks) {
 	        if (this.pendingBuffer) {
 	            this.curLine.append(wrapMarks(new WidgetBufferView(-1), active), active.length);
 	            this.pendingBuffer = 0 /* Buf.No */;
 	        }
 	    }
 	    addBlockWidget(view) {
-	        this.flushBuffer([]);
+	        this.flushBuffer();
 	        this.curLine = null;
 	        this.content.push(view);
 	    }
 	    finish(openEnd) {
-	        if (!openEnd)
-	            this.flushBuffer([]);
+	        if (this.pendingBuffer && openEnd <= this.bufferMarks.length)
+	            this.flushBuffer();
 	        else
 	            this.pendingBuffer = 0 /* Buf.No */;
 	        if (!this.posCovered())
@@ -68733,8 +68835,9 @@
 	                        this.content[this.content.length - 1].breakAfter = 1;
 	                    else
 	                        this.breakAtStart = 1;
-	                    this.flushBuffer([]);
+	                    this.flushBuffer();
 	                    this.curLine = null;
+	                    this.atCursorPos = true;
 	                    length--;
 	                    continue;
 	                }
@@ -68776,7 +68879,7 @@
 	            else {
 	                let view = WidgetView.create(deco.widget || new NullWidget("span"), len, len ? 0 : deco.startSide);
 	                let cursorBefore = this.atCursorPos && !view.isEditable && openStart <= active.length && (from < to || deco.startSide > 0);
-	                let cursorAfter = !view.isEditable && (from < to || deco.startSide <= 0);
+	                let cursorAfter = !view.isEditable && (from < to || openStart > active.length || deco.startSide <= 0);
 	                let line = this.getLine();
 	                if (this.pendingBuffer == 2 /* Buf.IfCursor */ && !cursorBefore)
 	                    this.pendingBuffer = 0 /* Buf.No */;
@@ -68787,7 +68890,9 @@
 	                }
 	                line.append(wrapMarks(view, active), openStart);
 	                this.atCursorPos = cursorAfter;
-	                this.pendingBuffer = !cursorAfter ? 0 /* Buf.No */ : from < to ? 1 /* Buf.Yes */ : 2 /* Buf.IfCursor */;
+	                this.pendingBuffer = !cursorAfter ? 0 /* Buf.No */ : from < to || openStart > active.length ? 1 /* Buf.Yes */ : 2 /* Buf.IfCursor */;
+	                if (this.pendingBuffer)
+	                    this.bufferMarks = active.slice();
 	            }
 	        }
 	        else if (this.doc.lineAt(this.pos).from == this.pos) { // Line decoration
@@ -70461,22 +70566,30 @@
 	        this.compositionFirstChange = null;
 	        this.compositionEndedAt = 0;
 	        this.mouseSelection = null;
+	        let handleEvent = (handler, event) => {
+	            if (this.ignoreDuringComposition(event))
+	                return;
+	            if (event.type == "keydown" && this.keydown(view, event))
+	                return;
+	            if (this.mustFlushObserver(event))
+	                view.observer.forceFlush();
+	            if (this.runCustomHandlers(event.type, view, event))
+	                event.preventDefault();
+	            else
+	                handler(view, event);
+	        };
 	        for (let type in handlers) {
 	            let handler = handlers[type];
-	            view.contentDOM.addEventListener(type, (event) => {
-	                if (!eventBelongsToEditor(view, event) || this.ignoreDuringComposition(event))
-	                    return;
-	                if (type == "keydown" && this.keydown(view, event))
-	                    return;
-	                if (this.mustFlushObserver(event))
-	                    view.observer.forceFlush();
-	                if (this.runCustomHandlers(type, view, event))
-	                    event.preventDefault();
-	                else
-	                    handler(view, event);
+	            view.contentDOM.addEventListener(type, event => {
+	                if (eventBelongsToEditor(view, event))
+	                    handleEvent(handler, event);
 	            }, handlerOptions[type]);
 	            this.registeredEvents.push(type);
 	        }
+	        view.scrollDOM.addEventListener("mousedown", (event) => {
+	            if (event.target == view.scrollDOM)
+	                handleEvent(handlers.mousedown, event);
+	        });
 	        if (browser.chrome && browser.chrome_version == 102) { // FIXME remove at some point
 	            // On Chrome 102, viewport updates somehow stop wheel-based
 	            // scrolling. Turning off pointer events during the scroll seems
@@ -70633,12 +70746,18 @@
 	const EmacsyPendingKeys = "dthko";
 	// Key codes for modifier keys
 	const modifierCodes = [16, 17, 18, 20, 91, 92, 224, 225];
+	function dragScrollSpeed(dist) {
+	    return dist * 0.7 + 8;
+	}
 	class MouseSelection {
 	    constructor(view, startEvent, style, mustSelect) {
 	        this.view = view;
 	        this.style = style;
 	        this.mustSelect = mustSelect;
+	        this.scrollSpeed = { x: 0, y: 0 };
+	        this.scrolling = -1;
 	        this.lastEvent = startEvent;
+	        this.scrollParent = scrollableParent(view.contentDOM);
 	        let doc = view.contentDOM.ownerDocument;
 	        doc.addEventListener("mousemove", this.move = this.move.bind(this));
 	        doc.addEventListener("mouseup", this.up = this.up.bind(this));
@@ -70654,11 +70773,24 @@
 	        }
 	    }
 	    move(event) {
+	        var _a;
 	        if (event.buttons == 0)
 	            return this.destroy();
 	        if (this.dragging !== false)
 	            return;
 	        this.select(this.lastEvent = event);
+	        let sx = 0, sy = 0;
+	        let rect = ((_a = this.scrollParent) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect())
+	            || { left: 0, top: 0, right: this.view.win.innerWidth, bottom: this.view.win.innerHeight };
+	        if (event.clientX <= rect.left)
+	            sx = -dragScrollSpeed(rect.left - event.clientX);
+	        else if (event.clientX >= rect.right)
+	            sx = dragScrollSpeed(event.clientX - rect.right);
+	        if (event.clientY <= rect.top)
+	            sy = -dragScrollSpeed(rect.top - event.clientY);
+	        else if (event.clientY >= rect.bottom)
+	            sy = dragScrollSpeed(event.clientY - rect.bottom);
+	        this.setScrollSpeed(sx, sy);
 	    }
 	    up(event) {
 	        if (this.dragging == null)
@@ -70668,19 +70800,41 @@
 	        this.destroy();
 	    }
 	    destroy() {
+	        this.setScrollSpeed(0, 0);
 	        let doc = this.view.contentDOM.ownerDocument;
 	        doc.removeEventListener("mousemove", this.move);
 	        doc.removeEventListener("mouseup", this.up);
 	        this.view.inputState.mouseSelection = null;
 	    }
+	    setScrollSpeed(sx, sy) {
+	        this.scrollSpeed = { x: sx, y: sy };
+	        if (sx || sy) {
+	            if (this.scrolling < 0)
+	                this.scrolling = setInterval(() => this.scroll(), 50);
+	        }
+	        else if (this.scrolling > -1) {
+	            clearInterval(this.scrolling);
+	            this.scrolling = -1;
+	        }
+	    }
+	    scroll() {
+	        if (this.scrollParent) {
+	            this.scrollParent.scrollLeft += this.scrollSpeed.x;
+	            this.scrollParent.scrollTop += this.scrollSpeed.y;
+	        }
+	        else {
+	            this.view.win.scrollBy(this.scrollSpeed.x, this.scrollSpeed.y);
+	        }
+	        if (this.dragging === false)
+	            this.select(this.lastEvent);
+	    }
 	    select(event) {
 	        let selection = this.style.get(event, this.extend, this.multiple);
 	        if (this.mustSelect || !selection.eq(this.view.state.selection) ||
 	            selection.main.assoc != this.view.state.selection.main.assoc)
 	            this.view.dispatch({
 	                selection,
-	                userEvent: "select.pointer",
-	                scrollIntoView: true
+	                userEvent: "select.pointer"
 	            });
 	        this.mustSelect = false;
 	    }
@@ -70871,23 +71025,15 @@
 	function basicMouseSelection(view, event) {
 	    let start = queryPos(view, event), type = getClickType(event);
 	    let startSel = view.state.selection;
-	    let last = start, lastEvent = event;
 	    return {
 	        update(update) {
 	            if (update.docChanged) {
 	                start.pos = update.changes.mapPos(start.pos);
 	                startSel = startSel.map(update.changes);
-	                lastEvent = null;
 	            }
 	        },
 	        get(event, extend, multiple) {
-	            let cur;
-	            if (lastEvent && event.clientX == lastEvent.clientX && event.clientY == lastEvent.clientY)
-	                cur = last;
-	            else {
-	                cur = last = queryPos(view, event);
-	                lastEvent = event;
-	            }
+	            let cur = queryPos(view, event);
 	            let range = rangeForClick(view, cur.pos, cur.bias, type);
 	            if (start.pos != cur.pos && !extend) {
 	                let startRange = rangeForClick(view, start.pos, start.bias, type);
@@ -72333,7 +72479,7 @@
 	    });
 	}
 	const baseTheme$1$1 = /*@__PURE__*/buildTheme("." + baseThemeID, {
-	    "&.cm-editor": {
+	    "&": {
 	        position: "relative !important",
 	        boxSizing: "border-box",
 	        "&.cm-focused": {
@@ -72364,7 +72510,6 @@
 	        margin: 0,
 	        flexGrow: 2,
 	        flexShrink: 0,
-	        minHeight: "100%",
 	        display: "block",
 	        whiteSpace: "pre",
 	        wordWrap: "normal",
@@ -72386,14 +72531,13 @@
 	    "&dark .cm-content": { caretColor: "white" },
 	    ".cm-line": {
 	        display: "block",
-	        padding: "0 2px 0 4px"
-	    },
-	    ".cm-selectionLayer": {
-	        zIndex: -1,
-	        contain: "size style"
+	        padding: "0 2px 0 6px"
 	    },
-	    ".cm-selectionBackground": {
-	        position: "absolute",
+	    ".cm-layer": {
+	        contain: "size style",
+	        "& > *": {
+	            position: "absolute"
+	        }
 	    },
 	    "&light .cm-selectionBackground": {
 	        background: "#d9d9d9"
@@ -72408,8 +72552,6 @@
 	        background: "#233"
 	    },
 	    ".cm-cursorLayer": {
-	        zIndex: 100,
-	        contain: "size style",
 	        pointerEvents: "none"
 	    },
 	    "&.cm-focused .cm-cursorLayer": {
@@ -72421,7 +72563,6 @@
 	    "@keyframes cm-blink": { "0%": {}, "50%": { opacity: 0 }, "100%": {} },
 	    "@keyframes cm-blink2": { "0%": {}, "50%": { opacity: 0 }, "100%": {} },
 	    ".cm-cursor, .cm-dropCursor": {
-	        position: "absolute",
 	        borderLeft: "1.2px solid black",
 	        marginLeft: "-0.6px",
 	        pointerEvents: "none",
@@ -72515,6 +72656,21 @@
 	        display: "inline-block",
 	        verticalAlign: "top",
 	    },
+	    ".cm-highlightSpace:before": {
+	        content: "attr(data-display)",
+	        position: "absolute",
+	        pointerEvents: "none",
+	        color: "#888"
+	    },
+	    ".cm-highlightTab": {
+	        backgroundImage: `url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="20"><path stroke="%23888" stroke-width="1" fill="none" d="M1 10H196L190 5M190 15L196 10M197 4L197 16"/></svg>')`,
+	        backgroundSize: "auto 100%",
+	        backgroundPosition: "right 90%",
+	        backgroundRepeat: "no-repeat"
+	    },
+	    ".cm-trailingSpace": {
+	        backgroundColor: "#ff332255"
+	    },
 	    ".cm-button": {
 	        verticalAlign: "middle",
 	        color: "inherit",
@@ -72607,7 +72763,7 @@
 	                insert: Text.of(domChange.text.slice(diff.from, diff.toB).split(LineBreakPlaceholder)) };
 	        }
 	    }
-	    else if (newSel && (!view.hasFocus || !view.state.facet(editable) || newSel.main.eq(sel))) {
+	    else if (newSel && (!view.hasFocus && view.state.facet(editable) || newSel.main.eq(sel))) {
 	        newSel = null;
 	    }
 	    if (!change && !newSel)
@@ -72817,7 +72973,8 @@
 	        this.lastChange = 0;
 	        this.scrollTargets = [];
 	        this.intersection = null;
-	        this.resize = null;
+	        this.resizeScroll = null;
+	        this.resizeContent = null;
 	        this.intersecting = false;
 	        this.gapIntersection = null;
 	        this.gaps = [];
@@ -72855,12 +73012,14 @@
 	        this.onPrint = this.onPrint.bind(this);
 	        this.onScroll = this.onScroll.bind(this);
 	        if (typeof ResizeObserver == "function") {
-	            this.resize = new ResizeObserver(() => {
+	            this.resizeScroll = new ResizeObserver(() => {
 	                var _a;
 	                if (((_a = this.view.docView) === null || _a === void 0 ? void 0 : _a.lastUpdate) < Date.now() - 75)
 	                    this.onResize();
 	            });
-	            this.resize.observe(view.scrollDOM);
+	            this.resizeScroll.observe(view.scrollDOM);
+	            this.resizeContent = new ResizeObserver(() => this.view.requestMeasure());
+	            this.resizeContent.observe(view.contentDOM);
 	        }
 	        this.addWindowListeners(this.win = view.win);
 	        this.start();
@@ -73179,11 +73338,12 @@
 	        win.document.removeEventListener("selectionchange", this.onSelectionChange);
 	    }
 	    destroy() {
-	        var _a, _b, _c;
+	        var _a, _b, _c, _d;
 	        this.stop();
 	        (_a = this.intersection) === null || _a === void 0 ? void 0 : _a.disconnect();
 	        (_b = this.gapIntersection) === null || _b === void 0 ? void 0 : _b.disconnect();
-	        (_c = this.resize) === null || _c === void 0 ? void 0 : _c.disconnect();
+	        (_c = this.resizeScroll) === null || _c === void 0 ? void 0 : _c.disconnect();
+	        (_d = this.resizeContent) === null || _d === void 0 ? void 0 : _d.disconnect();
 	        for (let dom of this.scrollTargets)
 	            dom.removeEventListener("scroll", this.onScroll);
 	        this.removeWindowListeners(this.win);
@@ -73282,7 +73442,7 @@
 	        this.scrollDOM.className = "cm-scroller";
 	        this.scrollDOM.appendChild(this.contentDOM);
 	        this.announceDOM = document.createElement("div");
-	        this.announceDOM.style.cssText = "position: absolute; top: -10000px";
+	        this.announceDOM.style.cssText = "position: fixed; top: -10000px";
 	        this.announceDOM.setAttribute("aria-live", "polite");
 	        this.dom = document.createElement("div");
 	        this.dom.appendChild(this.announceDOM);
@@ -73667,6 +73827,8 @@
 	        if (this.measureScheduled < 0)
 	            this.measureScheduled = this.win.requestAnimationFrame(() => this.measure());
 	        if (request) {
+	            if (this.measureRequests.indexOf(request) > -1)
+	                return;
 	            if (request.key != null)
 	                for (let i = 0; i < this.measureRequests.length; i++) {
 	                    if (this.measureRequests[i].key === request.key) {
@@ -74342,6 +74504,8 @@
 	        if (runFor(scopeObj[prefix + modifiers(name, event, !isChar)]))
 	            return true;
 	        if (isChar && (event.altKey || event.metaKey || event.ctrlKey) &&
+	            // Ctrl-Alt may be used for AltGr on Windows
+	            !(browser.windows && event.ctrlKey && event.altKey) &&
 	            (baseName = base[event.keyCode]) && baseName != name) {
 	            if (runFor(scopeObj[prefix + modifiers(baseName, event, true)]))
 	                return true;
@@ -74579,6 +74743,17 @@
 	                : pos.bottom + (size.bottom - size.top) + offset.y > space.bottom) &&
 	                above == (space.bottom - pos.bottom > pos.top - space.top))
 	                above = !above;
+	            let spaceVert = (above ? pos.top - space.top : space.bottom - pos.bottom) - arrowHeight;
+	            if (spaceVert < height && tView.resize !== false) {
+	                if (spaceVert < this.view.defaultLineHeight) {
+	                    dom.style.top = Outside;
+	                    continue;
+	                }
+	                dom.style.height = (height = spaceVert) + "px";
+	            }
+	            else if (dom.style.height) {
+	                dom.style.height = "";
+	            }
 	            let top = above ? pos.top - height - arrowHeight - offset.y : pos.bottom + arrowHeight + offset.y;
 	            let right = left + width;
 	            if (tView.overlap !== true)
@@ -74622,7 +74797,8 @@
 	});
 	const baseTheme$4 = /*@__PURE__*/EditorView.baseTheme({
 	    ".cm-tooltip": {
-	        zIndex: 100
+	        zIndex: 100,
+	        boxSizing: "border-box"
 	    },
 	    "&light .cm-tooltip": {
 	        border: "1px solid #bbb",
@@ -75187,8 +75363,8 @@
 	    /// Define a node type.
 	    static define(spec) {
 	        let props = spec.props && spec.props.length ? Object.create(null) : noProps;
-	        let flags = (spec.top ? 1 /* Top */ : 0) | (spec.skipped ? 2 /* Skipped */ : 0) |
-	            (spec.error ? 4 /* Error */ : 0) | (spec.name == null ? 8 /* Anonymous */ : 0);
+	        let flags = (spec.top ? 1 /* NodeFlag.Top */ : 0) | (spec.skipped ? 2 /* NodeFlag.Skipped */ : 0) |
+	            (spec.error ? 4 /* NodeFlag.Error */ : 0) | (spec.name == null ? 8 /* NodeFlag.Anonymous */ : 0);
 	        let type = new NodeType(spec.name || "", props, spec.id, flags);
 	        if (spec.props)
 	            for (let src of spec.props) {
@@ -75206,14 +75382,14 @@
 	    /// the prop isn't present on this node.
 	    prop(prop) { return this.props[prop.id]; }
 	    /// True when this is the top node of a grammar.
-	    get isTop() { return (this.flags & 1 /* Top */) > 0; }
+	    get isTop() { return (this.flags & 1 /* NodeFlag.Top */) > 0; }
 	    /// True when this node is produced by a skip rule.
-	    get isSkipped() { return (this.flags & 2 /* Skipped */) > 0; }
+	    get isSkipped() { return (this.flags & 2 /* NodeFlag.Skipped */) > 0; }
 	    /// Indicates whether this is an error node.
-	    get isError() { return (this.flags & 4 /* Error */) > 0; }
+	    get isError() { return (this.flags & 4 /* NodeFlag.Error */) > 0; }
 	    /// When true, this node type doesn't correspond to a user-declared
 	    /// named node, for example because it is used to cache repetition.
-	    get isAnonymous() { return (this.flags & 8 /* Anonymous */) > 0; }
+	    get isAnonymous() { return (this.flags & 8 /* NodeFlag.Anonymous */) > 0; }
 	    /// Returns true when this node's name or one of its
 	    /// [groups](#common.NodeProp^group) matches the given string.
 	    is(name) {
@@ -75246,7 +75422,7 @@
 	    }
 	}
 	/// An empty dummy node type to use when no actual type is available.
-	NodeType.none = new NodeType("", Object.create(null), 0, 8 /* Anonymous */);
+	NodeType.none = new NodeType("", Object.create(null), 0, 8 /* NodeFlag.Anonymous */);
 	/// A node set holds a collection of node types. It is used to
 	/// compactly represent trees by storing their type ids, rather than a
 	/// full pointer to the type object, in a numeric array. Each parser
@@ -75455,7 +75631,7 @@
 	    /// which may have children grouped into subtrees with type
 	    /// [`NodeType.none`](#common.NodeType^none).
 	    balance(config = {}) {
-	        return this.children.length <= 8 /* BranchFactor */ ? this :
+	        return this.children.length <= 8 /* Balance.BranchFactor */ ? this :
 	            balanceRange(NodeType.none, this.children, this.positions, 0, this.children.length, 0, this.length, (children, positions, length) => new Tree(this.type, children, positions, length, this.propValues), config.makeTree || ((children, positions, length) => new Tree(NodeType.none, children, positions, length)));
 	    }
 	    /// Build a tree from a postfix-ordered buffer of node information,
@@ -75534,26 +75710,27 @@
 	        return pick;
 	    }
 	    /// @internal
-	    slice(startI, endI, from, to) {
+	    slice(startI, endI, from) {
 	        let b = this.buffer;
-	        let copy = new Uint16Array(endI - startI);
+	        let copy = new Uint16Array(endI - startI), len = 0;
 	        for (let i = startI, j = 0; i < endI;) {
 	            copy[j++] = b[i++];
 	            copy[j++] = b[i++] - from;
-	            copy[j++] = b[i++] - from;
+	            let to = copy[j++] = b[i++] - from;
 	            copy[j++] = b[i++] - startI;
+	            len = Math.max(len, to);
 	        }
-	        return new TreeBuffer(copy, to - from, this.set);
+	        return new TreeBuffer(copy, len, this.set);
 	    }
 	}
 	function checkSide(side, pos, from, to) {
 	    switch (side) {
-	        case -2 /* Before */: return from < pos;
-	        case -1 /* AtOrBefore */: return to >= pos && from < pos;
-	        case 0 /* Around */: return from < pos && to > pos;
-	        case 1 /* AtOrAfter */: return from <= pos && to > pos;
-	        case 2 /* After */: return to > pos;
-	        case 4 /* DontCare */: return true;
+	        case -2 /* Side.Before */: return from < pos;
+	        case -1 /* Side.AtOrBefore */: return to >= pos && from < pos;
+	        case 0 /* Side.Around */: return from < pos && to > pos;
+	        case 1 /* Side.AtOrAfter */: return from <= pos && to > pos;
+	        case 2 /* Side.After */: return to > pos;
+	        case 4 /* Side.DontCare */: return true;
 	    }
 	}
 	function enterUnfinishedNodesBefore(node, pos) {
@@ -75643,10 +75820,10 @@
 	                return null;
 	        }
 	    }
-	    get firstChild() { return this.nextChild(0, 1, 0, 4 /* DontCare */); }
-	    get lastChild() { return this.nextChild(this._tree.children.length - 1, -1, 0, 4 /* DontCare */); }
-	    childAfter(pos) { return this.nextChild(0, 1, pos, 2 /* After */); }
-	    childBefore(pos) { return this.nextChild(this._tree.children.length - 1, -1, pos, -2 /* Before */); }
+	    get firstChild() { return this.nextChild(0, 1, 0, 4 /* Side.DontCare */); }
+	    get lastChild() { return this.nextChild(this._tree.children.length - 1, -1, 0, 4 /* Side.DontCare */); }
+	    childAfter(pos) { return this.nextChild(0, 1, pos, 2 /* Side.After */); }
+	    childBefore(pos) { return this.nextChild(this._tree.children.length - 1, -1, pos, -2 /* Side.Before */); }
 	    enter(pos, side, mode = 0) {
 	        let mounted;
 	        if (!(mode & IterMode.IgnoreOverlays) && (mounted = this._tree.prop(NodeProp.mounted)) && mounted.overlay) {
@@ -75669,10 +75846,10 @@
 	        return this._parent ? this._parent.nextSignificantParent() : null;
 	    }
 	    get nextSibling() {
-	        return this._parent && this.index >= 0 ? this._parent.nextChild(this.index + 1, 1, 0, 4 /* DontCare */) : null;
+	        return this._parent && this.index >= 0 ? this._parent.nextChild(this.index + 1, 1, 0, 4 /* Side.DontCare */) : null;
 	    }
 	    get prevSibling() {
-	        return this._parent && this.index >= 0 ? this._parent.nextChild(this.index - 1, -1, 0, 4 /* DontCare */) : null;
+	        return this._parent && this.index >= 0 ? this._parent.nextChild(this.index - 1, -1, 0, 4 /* Side.DontCare */) : null;
 	    }
 	    cursor(mode = 0) { return new TreeCursor(this, mode); }
 	    get tree() { return this._tree; }
@@ -75734,24 +75911,24 @@
 	    }
 	}
 	class BufferNode {
+	    get name() { return this.type.name; }
+	    get from() { return this.context.start + this.context.buffer.buffer[this.index + 1]; }
+	    get to() { return this.context.start + this.context.buffer.buffer[this.index + 2]; }
 	    constructor(context, _parent, index) {
 	        this.context = context;
 	        this._parent = _parent;
 	        this.index = index;
 	        this.type = context.buffer.set.types[context.buffer.buffer[index]];
 	    }
-	    get name() { return this.type.name; }
-	    get from() { return this.context.start + this.context.buffer.buffer[this.index + 1]; }
-	    get to() { return this.context.start + this.context.buffer.buffer[this.index + 2]; }
 	    child(dir, pos, side) {
 	        let { buffer } = this.context;
 	        let index = buffer.findChild(this.index + 4, buffer.buffer[this.index + 3], dir, pos - this.context.start, side);
 	        return index < 0 ? null : new BufferNode(this.context, this, index);
 	    }
-	    get firstChild() { return this.child(1, 0, 4 /* DontCare */); }
-	    get lastChild() { return this.child(-1, 0, 4 /* DontCare */); }
-	    childAfter(pos) { return this.child(1, pos, 2 /* After */); }
-	    childBefore(pos) { return this.child(-1, pos, -2 /* Before */); }
+	    get firstChild() { return this.child(1, 0, 4 /* Side.DontCare */); }
+	    get lastChild() { return this.child(-1, 0, 4 /* Side.DontCare */); }
+	    childAfter(pos) { return this.child(1, pos, 2 /* Side.After */); }
+	    childBefore(pos) { return this.child(-1, pos, -2 /* Side.Before */); }
 	    enter(pos, side, mode = 0) {
 	        if (mode & IterMode.ExcludeBuffers)
 	            return null;
@@ -75763,7 +75940,7 @@
 	        return this._parent || this.context.parent.nextSignificantParent();
 	    }
 	    externalSibling(dir) {
-	        return this._parent ? null : this.context.parent.nextChild(this.context.index + dir, dir, 0, 4 /* DontCare */);
+	        return this._parent ? null : this.context.parent.nextChild(this.context.index + dir, dir, 0, 4 /* Side.DontCare */);
 	    }
 	    get nextSibling() {
 	        let { buffer } = this.context;
@@ -75777,7 +75954,7 @@
 	        let parentStart = this._parent ? this._parent.index + 4 : 0;
 	        if (this.index == parentStart)
 	            return this.externalSibling(-1);
-	        return new BufferNode(this.context, this._parent, buffer.findChild(parentStart, this.index, -1, 0, 4 /* DontCare */));
+	        return new BufferNode(this.context, this._parent, buffer.findChild(parentStart, this.index, -1, 0, 4 /* Side.DontCare */));
 	    }
 	    cursor(mode = 0) { return new TreeCursor(this, mode); }
 	    get tree() { return null; }
@@ -75786,8 +75963,8 @@
 	        let { buffer } = this.context;
 	        let startI = this.index + 4, endI = buffer.buffer[this.index + 3];
 	        if (endI > startI) {
-	            let from = buffer.buffer[this.index + 1], to = buffer.buffer[this.index + 2];
-	            children.push(buffer.slice(startI, endI, from, to));
+	            let from = buffer.buffer[this.index + 1];
+	            children.push(buffer.slice(startI, endI, from));
 	            positions.push(0);
 	        }
 	        return new Tree(this.type, children, positions, this.to - this.from);
@@ -75814,6 +75991,8 @@
 	/// A tree cursor object focuses on a given node in a syntax tree, and
 	/// allows you to move to adjacent nodes.
 	class TreeCursor {
+	    /// Shorthand for `.type.name`.
+	    get name() { return this.type.name; }
 	    /// @internal
 	    constructor(node, 
 	    /// @internal
@@ -75837,8 +76016,6 @@
 	            this.yieldBuf(node.index);
 	        }
 	    }
-	    /// Shorthand for `.type.name`.
-	    get name() { return this.type.name; }
 	    yieldNode(node) {
 	        if (!node)
 	            return false;
@@ -75883,13 +76060,13 @@
 	    }
 	    /// Move the cursor to this node's first child. When this returns
 	    /// false, the node has no child, and the cursor has not been moved.
-	    firstChild() { return this.enterChild(1, 0, 4 /* DontCare */); }
+	    firstChild() { return this.enterChild(1, 0, 4 /* Side.DontCare */); }
 	    /// Move the cursor to this node's last child.
-	    lastChild() { return this.enterChild(-1, 0, 4 /* DontCare */); }
+	    lastChild() { return this.enterChild(-1, 0, 4 /* Side.DontCare */); }
 	    /// Move the cursor to the first child that ends after `pos`.
-	    childAfter(pos) { return this.enterChild(1, pos, 2 /* After */); }
+	    childAfter(pos) { return this.enterChild(1, pos, 2 /* Side.After */); }
 	    /// Move to the last child that starts before `pos`.
-	    childBefore(pos) { return this.enterChild(-1, pos, -2 /* Before */); }
+	    childBefore(pos) { return this.enterChild(-1, pos, -2 /* Side.Before */); }
 	    /// Move the cursor to the child around `pos`. If side is -1 the
 	    /// child may end at that position, when 1 it may start there. This
 	    /// will also enter [overlaid](#common.MountedTree.overlay)
@@ -75915,19 +76092,19 @@
 	        if (!this.buffer)
 	            return !this._tree._parent ? false
 	                : this.yield(this._tree.index < 0 ? null
-	                    : this._tree._parent.nextChild(this._tree.index + dir, dir, 0, 4 /* DontCare */, this.mode));
+	                    : this._tree._parent.nextChild(this._tree.index + dir, dir, 0, 4 /* Side.DontCare */, this.mode));
 	        let { buffer } = this.buffer, d = this.stack.length - 1;
 	        if (dir < 0) {
 	            let parentStart = d < 0 ? 0 : this.stack[d] + 4;
 	            if (this.index != parentStart)
-	                return this.yieldBuf(buffer.findChild(parentStart, this.index, -1, 0, 4 /* DontCare */));
+	                return this.yieldBuf(buffer.findChild(parentStart, this.index, -1, 0, 4 /* Side.DontCare */));
 	        }
 	        else {
 	            let after = buffer.buffer[this.index + 3];
 	            if (after < (d < 0 ? buffer.buffer.length : buffer.buffer[this.stack[d] + 3]))
 	                return this.yieldBuf(after);
 	        }
-	        return d < 0 ? this.yield(this.buffer.parent.nextChild(this.buffer.index + dir, dir, 0, 4 /* DontCare */, this.mode)) : false;
+	        return d < 0 ? this.yield(this.buffer.parent.nextChild(this.buffer.index + dir, dir, 0, 4 /* Side.DontCare */, this.mode)) : false;
 	    }
 	    /// Move to this node's next sibling, if any.
 	    nextSibling() { return this.sibling(1); }
@@ -75964,7 +76141,7 @@
 	        return true;
 	    }
 	    move(dir, enter) {
-	        if (enter && this.enterChild(dir, 0, 4 /* DontCare */))
+	        if (enter && this.enterChild(dir, 0, 4 /* Side.DontCare */))
 	            return true;
 	        for (;;) {
 	            if (this.sibling(dir))
@@ -75974,7 +76151,7 @@
 	        }
 	    }
 	    /// Move to the next node in a
-	    /// [pre-order](https://en.wikipedia.org/wiki/Tree_traversal#Pre-order_(NLR))
+	    /// [pre-order](https://en.wikipedia.org/wiki/Tree_traversal#Pre-order,_NLR)
 	    /// traversal, going from a node to its first child or, if the
 	    /// current node is empty or `enter` is false, its next sibling or
 	    /// the next sibling of the first parent node that has one.
@@ -76090,17 +76267,17 @@
 	        let lookAheadAtStart = lookAhead;
 	        while (size < 0) {
 	            cursor.next();
-	            if (size == -1 /* Reuse */) {
+	            if (size == -1 /* SpecialRecord.Reuse */) {
 	                let node = reused[id];
 	                children.push(node);
 	                positions.push(start - parentStart);
 	                return;
 	            }
-	            else if (size == -3 /* ContextChange */) { // Context change
+	            else if (size == -3 /* SpecialRecord.ContextChange */) { // Context change
 	                contextHash = id;
 	                return;
 	            }
-	            else if (size == -4 /* LookAhead */) {
+	            else if (size == -4 /* SpecialRecord.LookAhead */) {
 	                lookAhead = id;
 	                return;
 	            }
@@ -76217,7 +76394,7 @@
 	            fork.next();
 	            while (fork.pos > startPos) {
 	                if (fork.size < 0) {
-	                    if (fork.size == -3 /* ContextChange */)
+	                    if (fork.size == -3 /* SpecialRecord.ContextChange */)
 	                        localSkipped += 4;
 	                    else
 	                        break scan;
@@ -76253,10 +76430,10 @@
 	            buffer[--index] = start - bufferStart;
 	            buffer[--index] = id;
 	        }
-	        else if (size == -3 /* ContextChange */) {
+	        else if (size == -3 /* SpecialRecord.ContextChange */) {
 	            contextHash = id;
 	        }
-	        else if (size == -4 /* LookAhead */) {
+	        else if (size == -4 /* SpecialRecord.LookAhead */) {
 	            lookAhead = id;
 	        }
 	        return index;
@@ -76303,7 +76480,7 @@
 	    let total = 0;
 	    for (let i = from; i < to; i++)
 	        total += nodeSize(balanceType, children[i]);
-	    let maxChild = Math.ceil((total * 1.5) / 8 /* BranchFactor */);
+	    let maxChild = Math.ceil((total * 1.5) / 8 /* Balance.BranchFactor */);
 	    let localChildren = [], localPositions = [];
 	    function divide(children, positions, from, to, offset) {
 	        for (let i = from; i < to;) {
@@ -76364,16 +76541,16 @@
 	        this.to = to;
 	        this.tree = tree;
 	        this.offset = offset;
-	        this.open = (openStart ? 1 /* Start */ : 0) | (openEnd ? 2 /* End */ : 0);
+	        this.open = (openStart ? 1 /* Open.Start */ : 0) | (openEnd ? 2 /* Open.End */ : 0);
 	    }
 	    /// Whether the start of the fragment represents the start of a
 	    /// parse, or the end of a change. (In the second case, it may not
 	    /// be safe to reuse some nodes at the start, depending on the
 	    /// parsing algorithm.)
-	    get openStart() { return (this.open & 1 /* Start */) > 0; }
+	    get openStart() { return (this.open & 1 /* Open.Start */) > 0; }
 	    /// Whether the end of the fragment represents the end of a
 	    /// full-document parse, or the start of a change.
-	    get openEnd() { return (this.open & 2 /* End */) > 0; }
+	    get openEnd() { return (this.open & 2 /* Open.End */) > 0; }
 	    /// Create a set of fragments from a freshly parsed tree, or update
 	    /// an existing set of fragments by replacing the ones that overlap
 	    /// with a tree with content from the new tree. When `partial` is
@@ -76617,10 +76794,10 @@
 	            tags = [tags];
 	        for (let part of prop.split(" "))
 	            if (part) {
-	                let pieces = [], mode = 2 /* Normal */, rest = part;
+	                let pieces = [], mode = 2 /* Mode.Normal */, rest = part;
 	                for (let pos = 0;;) {
 	                    if (rest == "..." && pos > 0 && pos + 3 == part.length) {
-	                        mode = 1 /* Inherit */;
+	                        mode = 1 /* Mode.Inherit */;
 	                        break;
 	                    }
 	                    let m = /^"(?:[^"\\]|\\.)*?"|[^\/!]+/.exec(rest);
@@ -76632,7 +76809,7 @@
 	                        break;
 	                    let next = part[pos++];
 	                    if (pos == part.length && next == "!") {
-	                        mode = 0 /* Opaque */;
+	                        mode = 0 /* Mode.Opaque */;
 	                        break;
 	                    }
 	                    if (next != "/")
@@ -76656,8 +76833,8 @@
 	        this.context = context;
 	        this.next = next;
 	    }
-	    get opaque() { return this.mode == 0 /* Opaque */; }
-	    get inherit() { return this.mode == 1 /* Inherit */; }
+	    get opaque() { return this.mode == 0 /* Mode.Opaque */; }
+	    get inherit() { return this.mode == 1 /* Mode.Inherit */; }
 	    sort(other) {
 	        if (!other || other.depth < this.depth) {
 	            this.next = other;
@@ -76668,7 +76845,7 @@
 	    }
 	    get depth() { return this.context ? this.context.length : 0; }
 	}
-	Rule.empty = new Rule([], 2 /* Normal */, null);
+	Rule.empty = new Rule([], 2 /* Mode.Normal */, null);
 	/// Define a [highlighter](#highlight.Highlighter) from an array of
 	/// tag/class pairs. Classes associated with more specific tags will
 	/// take precedence.
@@ -76755,7 +76932,7 @@
 	            if (cls)
 	                cls += " ";
 	            cls += tagCls;
-	            if (rule.mode == 1 /* Inherit */)
+	            if (rule.mode == 1 /* Mode.Inherit */)
 	                inheritedClass += (inheritedClass ? " " : "") + tagCls;
 	        }
 	        this.startSpan(cursor.from, cls);
@@ -76773,7 +76950,7 @@
 	                if (rangeFrom < rangeTo && hasChild) {
 	                    while (cursor.from < rangeTo) {
 	                        this.highlightRange(cursor, rangeFrom, rangeTo, inheritedClass, highlighters);
-	                        this.startSpan(Math.min(to, cursor.to), cls);
+	                        this.startSpan(Math.min(rangeTo, cursor.to), cls);
 	                        if (cursor.to >= nextPos || !cursor.nextSibling())
 	                            break;
 	                    }
@@ -78714,6 +78891,7 @@
 	            closeOnBlur: true,
 	            maxRenderedOptions: 100,
 	            defaultKeymap: true,
+	            tooltipClass: () => "",
 	            optionClass: () => "",
 	            aboveCursor: false,
 	            icons: true,
@@ -78724,6 +78902,7 @@
 	            defaultKeymap: (a, b) => a && b,
 	            closeOnBlur: (a, b) => a && b,
 	            icons: (a, b) => a && b,
+	            tooltipClass: (a, b) => c => joinClass(a(c), b(c)),
 	            optionClass: (a, b) => c => joinClass(a(c), b(c)),
 	            addToOptions: (a, b) => a.concat(b)
 	        });
@@ -78802,14 +78981,17 @@
 	            key: this
 	        };
 	        this.space = null;
+	        this.currentClass = "";
 	        let cState = view.state.field(stateField);
 	        let { options, selected } = cState.open;
 	        let config = view.state.facet(completionConfig);
 	        this.optionContent = optionContent(config);
 	        this.optionClass = config.optionClass;
+	        this.tooltipClass = config.tooltipClass;
 	        this.range = rangeAroundSelected(options.length, selected, config.maxRenderedOptions);
 	        this.dom = document.createElement("div");
 	        this.dom.className = "cm-tooltip-autocomplete";
+	        this.updateTooltipClass(view.state);
 	        this.dom.addEventListener("mousedown", (e) => {
 	            for (let dom = e.target, match; dom && dom != this.dom; dom = dom.parentNode) {
 	                if (dom.nodeName == "LI" && (match = /-(\d+)$/.exec(dom.id)) && +match[1] < options.length) {
@@ -78830,12 +79012,25 @@
 	        var _a, _b, _c;
 	        let cState = update.state.field(this.stateField);
 	        let prevState = update.startState.field(this.stateField);
+	        this.updateTooltipClass(update.state);
 	        if (cState != prevState) {
 	            this.updateSel();
 	            if (((_a = cState.open) === null || _a === void 0 ? void 0 : _a.disabled) != ((_b = prevState.open) === null || _b === void 0 ? void 0 : _b.disabled))
 	                this.dom.classList.toggle("cm-tooltip-autocomplete-disabled", !!((_c = cState.open) === null || _c === void 0 ? void 0 : _c.disabled));
 	        }
 	    }
+	    updateTooltipClass(state) {
+	        let cls = this.tooltipClass(state);
+	        if (cls != this.currentClass) {
+	            for (let c of this.currentClass.split(" "))
+	                if (c)
+	                    this.dom.classList.remove(c);
+	            for (let c of cls.split(" "))
+	                if (c)
+	                    this.dom.classList.add(c);
+	            this.currentClass = cls;
+	        }
+	    }
 	    positioned(space) {
 	        this.space = space;
 	        if (this.info)
@@ -79096,13 +79291,13 @@
 	        if (active.length == this.active.length && active.every((a, i) => a == this.active[i]))
 	            active = this.active;
 	        let open = this.open;
+	        if (open && tr.docChanged)
+	            open = open.map(tr.changes);
 	        if (tr.selection || active.some(a => a.hasResult() && tr.changes.touchesRange(a.from, a.to)) ||
 	            !sameResults(active, this.active))
-	            open = CompletionDialog.build(active, state, this.id, this.open, conf);
+	            open = CompletionDialog.build(active, state, this.id, open, conf);
 	        else if (open && open.disabled && !active.some(a => a.state == 1 /* State.Pending */))
 	            open = null;
-	        else if (open && tr.docChanged)
-	            open = open.map(tr.changes);
 	        if (!open && active.every(a => a.state != 1 /* State.Pending */) && active.some(a => a.hasResult()))
 	            active = active.map(a => a.hasResult() ? new ActiveSource(a.source, 0 /* State.Inactive */) : a);
 	        for (let effect of tr.effects)
@@ -79457,6 +79652,7 @@
 	            maxWidth: "min(700px, 95vw)",
 	            minWidth: "250px",
 	            maxHeight: "10em",
+	            height: "100%",
 	            listStyle: "none",
 	            margin: 0,
 	            padding: 0,
@@ -80411,7 +80607,7 @@
 	function extendSel(view, how) {
 	    let selection = updateSel(view.state.selection, range => {
 	        let head = how(range);
-	        return EditorSelection.range(range.anchor, head.head, head.goalColumn);
+	        return EditorSelection.range(range.anchor, head.head, head.goalColumn, head.bidiLevel || undefined);
 	    });
 	    if (selection.eq(view.state.selection))
 	        return false;
@@ -84384,6 +84580,88 @@
 	    }
 	});
 
+	/**
+	 * Create an array of syntax errors in the given tree.
+	 *
+	 * @param {Tree} syntaxTree
+	 * @returns {LintMessage[]} array of syntax errors
+	 */
+	function lintSyntax(syntaxTree) {
+
+	  const lintMessages = [];
+
+	  syntaxTree.iterate({
+	    enter: node => {
+	      if (node.type.isError) {
+
+	        const error = node.toString();
+
+	        /* The error has the pattern [⚠ || ⚠(NodeType)]. The regex extracts the node type from inside the brackets */
+	        const match = /\((.*?)\)/.exec(error);
+	        const nodeType = match && match[1];
+
+	        let message;
+
+	        if (nodeType) {
+	          message = 'unexpected ' + nodeType;
+	        } else {
+	          message = 'expression expected';
+	        }
+
+	        lintMessages.push(
+	          {
+	            from: node.from,
+	            to: node.to,
+	            severity: 'error',
+	            message: message,
+	            type: 'syntaxError'
+	          }
+	        );
+	      }
+	    }
+	  });
+
+	  return lintMessages;
+	}
+
+	/**
+	 * Generates lint messages for the given syntax tree.
+	 *
+	 * @param {Tree} syntaxTree
+	 * @returns {LintMessage[]} array of all lint messages
+	 */
+	function lintAll(syntaxTree) {
+
+	  const lintMessages = [
+	    ... lintSyntax(syntaxTree)
+	  ];
+
+	  return lintMessages;
+	}
+
+	/**
+	 * CodeMirror extension that provides linting for FEEL expressions.
+	 *
+	 * @param {EditorView} editorView
+	 * @returns {Source} CodeMirror linting source
+	 */
+	const cmFeelLinter = () => editorView => {
+
+	  // don't lint if the Editor is empty
+	  if (editorView.state.doc.length === 0) {
+	    return [];
+	  }
+
+	  const tree = syntaxTree(editorView.state);
+
+	  const messages = lintAll(tree);
+
+	  return messages.map(message => ({
+	    ...message,
+	    source: 'syntaxError'
+	  }));
+	};
+
 	// helpers ///////////////////////////////
 
 	function isNodeEmpty(node) {
@@ -84747,9 +85025,10 @@
 	    label: tag.name,
 	    type: 'function',
 	    info: () => {
-	      const html = domify$1(tag.description);
+	      const html = domify$1(`<div class="description">${tag.description}<div>`);
 	      return html;
-	    }
+	    },
+	    boost: -1
 	  }
 	));
 
@@ -84788,6 +85067,109 @@
 	 */
 	const variablesFacet = Facet.define();
 
+	var pathExpression = context => {
+	  const variables = context.state.facet(variablesFacet)[0];
+	  const nodeBefore = syntaxTree(context.state).resolve(context.pos, -1);
+
+	  if (!isPathExpression(nodeBefore)) {
+	    return;
+	  }
+
+	  const expression = findPathExpression(nodeBefore);
+
+	  // if the cursor is directly after the `.`, variable starts at the cursor position
+	  const from = nodeBefore === expression ? context.pos : nodeBefore.from;
+
+	  const path = getPath(expression, context);
+
+	  let options = variables;
+	  for (var i = 0; i < path.length - 1; i++) {
+	    var childVar = options.find(val => val.name === path[i].name);
+
+	    if (!childVar) {
+	      return null;
+	    }
+
+	    // only suggest if variable type matches
+	    if (
+	      childVar.isList !== 'optional' &&
+	      !!childVar.isList !== path[i].isList
+	    ) {
+	      return;
+	    }
+
+	    options = childVar.entries;
+	  }
+
+	  if (!options) return;
+
+	  options = options.map(v => ({
+	    label: v.name,
+	    type: 'variable',
+	    info: v.info,
+	    detail: v.detail
+	  }));
+
+	  const result = {
+	    from: from,
+	    options: options
+	  };
+
+	  return result;
+	};
+
+
+	function findPathExpression(node) {
+	  while (node) {
+	    if (node.name === 'PathExpression') {
+	      return node;
+	    }
+	    node = node.parent;
+	  }
+	}
+
+	// parses the path expression into a list of variable names with type information
+	// e.g. foo[0].bar => [ { name: 'foo', isList: true }, { name: 'bar', isList: false } ]
+	function getPath(node, context) {
+	  let path = [];
+
+	  for (let child = node.firstChild; child; child = child.nextSibling) {
+	    if (child.name === 'PathExpression') {
+	      path.push(...getPath(child, context));
+	    } else if (child.name === 'FilterExpression') {
+	      path.push(...getFilter(child, context));
+	    }
+	    else {
+	      path.push({
+	        name: getNodeContent(child, context),
+	        isList: false
+	      });
+	    }
+	  }
+	  return path;
+	}
+
+	function getFilter(node, context) {
+	  const list = node.firstChild;
+
+	  if (list.name === 'PathExpression') {
+	    const path = getPath(list, context);
+	    const last = path[path.length - 1];
+	    last.isList = true;
+
+	    return path;
+	  }
+
+	  return [ {
+	    name: getNodeContent(list, context),
+	    isList: true
+	  } ];
+	}
+
+	function getNodeContent(node, context) {
+	  return context.state.sliceDoc(node.from, node.to);
+	}
+
 	/**
 	 * @type {import('@codemirror/autocomplete').CompletionSource}
 	 */
@@ -84839,7 +85221,8 @@
 	      override: [
 	        variables,
 	        builtins,
-	        completeFromList(snippets)
+	        completeFromList(snippets.map(s => ({ ...s, boost: -1 }))),
+	        pathExpression
 	      ]
 	    })
 	  ];
@@ -84849,53 +85232,7 @@
 	  return new LanguageSupport(feelLanguage, [ ]);
 	}
 
-	const FeelLinter = function(editorView) {
-	  const messages = [];
-
-	  // don't lint if the Editor is empty
-	  if (editorView.state.doc.length === 0) {
-	    return messages;
-	  }
-
-	  const tree = syntaxTree(editorView.state);
-
-	  tree.iterate({
-	    enter: node => {
-	      if (node.type.isError) {
-
-	        const error = node.toString();
-
-	        /* The error has the pattern [⚠ || ⚠(NodeType)]. The regex extracts the node type from inside the brackets */
-	        const match = /\((.*?)\)/.exec(error);
-	        const nodeType = match && match[1];
-
-	        let message;
-
-	        if (nodeType) {
-	          message = 'unexpected ' + nodeType;
-	        } else {
-	          message = 'expression expected';
-	        }
-
-	        messages.push(
-	          {
-	            from: node.from,
-	            to: node.to,
-	            severity: 'error',
-	            message: message,
-	            source: 'syntaxError'
-	          }
-	        );
-	      }
-	    }
-	  });
-
-	  return messages;
-	};
-
-	var syntaxLinter = linter$1(FeelLinter);
-
-	var linter = [ syntaxLinter ];
+	var linter = [ linter$1(cmFeelLinter()) ];
 
 	const baseTheme = EditorView.theme({
 	  '& .cm-content': {
@@ -84963,9 +85300,11 @@
 
 	/**
 	 * @typedef {object} Variable
-	 * @property {string} name
-	 * @property {string} [info]
-	 * @property {string} [detail]
+	 * @property {string} name name or key of the variable
+	 * @property {string} [info] short information about the variable, e.g. type
+	 * @property {string} [detail] longer description of the variable content
+	 * @property {boolean} [isList] whether the variable is a list
+	 * @property {array<Variable>} [schema] array of child variables if the variable is a context or list
 	 */
 
 	const autocompletionConf = new Compartment();
@@ -86703,7 +87042,7 @@
 	    label,
 	    onChange,
 	    options = [],
-	    value,
+	    value = '',
 	    disabled,
 	    onFocus,
 	    onBlur
@@ -87798,28 +88137,41 @@
 
 	// api /////////////////////////
 
+	/**
+	 * Extractors add ProcessVariables to the `options.processVariables` parameter.
+	 * @callback extractor
+	 * @param {Object} options
+	 * @param {Array<ModdleElement>} options.elements
+	 * @param {ModdleElement} options.containerElement
+	 * @param {Array<ProcessVariable>} options.processVariables
+	 */
+
 	/**
 	 * Retrieves all process variables for a given container element.
 	 * @param {ModdleElement} containerElement
+	 * @param {Array<extractor>} [additionalExtractors]
 	 *
-	 * @returns {Array<ProcessVariable>}
+	 * @returns {Promise<Array<ProcessVariable>>}
 	 */
-	function getProcessVariables$1(containerElement) {
+	function getProcessVariables$1(containerElement, additionalExtractors = []) {
 	  var processVariables = [];
 
 	  // (1) extract all flow elements inside the container
 	  var elements = selfAndAllFlowElements$1([ containerElement ], false);
 
+	  const allPromises = [];
+
 	  // (2) extract all variables from the extractors
-	  minDash$1.forEach(extractors$1, function(extractor) {
-	    extractor({
+	  minDash$1.forEach([ ...extractors$1, ...additionalExtractors ], function(extractor) {
+	    allPromises.push(extractor({
 	      elements: elements,
 	      containerElement: containerElement,
 	      processVariables: processVariables
-	    });
+	    }));
 	  });
 
-	  return processVariables;
+	  return Promise.all(allPromises)
+	    .then(() => processVariables);
 	}
 
 	/**
@@ -87831,12 +88183,13 @@
 	 *
 	 * @param {string} scope
 	 * @param {ModdleElement} rootElement element from where to extract all variables
+	 * @param {Array<extractor>} [additionalExtractors]
 	 *
-	 * @returns {Array<ProcessVariable>}
+	 * @returns {Promise<Array<ProcessVariable>>}
 	 */
-	function getVariablesForScope$1(scope, rootElement) {
+	async function getVariablesForScope$1(scope, rootElement, additionalExtractors = []) {
 
-	  var allVariables = getProcessVariables$1(rootElement);
+	  var allVariables = await getProcessVariables$1(rootElement, additionalExtractors);
 
 	  var scopeElement = getElement$1(scope, rootElement);
 
@@ -87858,8 +88211,8 @@
 	}
 
 
-	function getVariablesForElement(element) {
-	  return getVariablesForScope$1(getScope$2(element), getRootElement$1(element));
+	function getVariablesForElement(element, additionalExtractors = []) {
+	  return getVariablesForScope$1(getScope$2(element), getRootElement$1(element), additionalExtractors);
 	}
 
 	function getScope$2(element) {
@@ -88564,30 +88917,46 @@
 	 * @property {ModdleElement} scope
 	 */
 
+
+	/**
+	 * Extractors add ProcessVariables to the `options.processVariables` parameter.
+	 * @callback extractor
+	 * @param {Object} options
+	 * @param {Array<ModdleElement>} options.elements
+	 * @param {ModdleElement} options.containerElement
+	 * @param {Array<ProcessVariable>} options.processVariables
+	 */
+
 	// api /////////////////////////
 
 	/**
 	 * Retrieves all process variables for a given container element.
 	 * @param {ModdleElement} containerElement
+	 * @param {Array<extractor>} additionalExtractors
 	 *
-	 * @returns {Array<ProcessVariable>}
+	 * @returns {Promise<Array<ProcessVariable>>}
 	 */
-	function getProcessVariables(containerElement) {
+	function getProcessVariables(containerElement, additionalExtractors = []) {
+	  const allPromises = [];
+
 	  var processVariables = [];
 
 	  // (1) extract all flow elements inside the container
 	  var elements = selfAndAllFlowElements([ containerElement ], false);
 
 	  // (2) extract all variables from the extractors
-	  minDash.forEach(extractors, function(extractor) {
-	    extractor({
-	      elements: elements,
-	      containerElement: containerElement,
-	      processVariables: processVariables
-	    });
+	  minDash.forEach([ ...extractors, ...additionalExtractors ], function(extractor) {
+	    allPromises.push(
+	      extractor({
+	        elements: elements,
+	        containerElement: containerElement,
+	        processVariables: processVariables
+	      })
+	    );
 	  });
 
-	  return processVariables;
+	  return Promise.all(allPromises)
+	    .then(() => processVariables);
 	}
 
 	/**
@@ -88599,12 +88968,13 @@
 	 *
 	 * @param {string} scope
 	 * @param {ModdleElement} rootElement element from where to extract all variables
+	 * @param {Array<extractor>} additionalExtractors
 	 *
-	 * @returns {Array<ProcessVariable>}
+	 * @returns {Promise<Array<ProcessVariable>>}
 	 */
-	function getVariablesForScope(scope, rootElement) {
+	async function getVariablesForScope(scope, rootElement, additionalExtractors = []) {
 
-	  var allVariables = getProcessVariables(rootElement);
+	  var allVariables = await getProcessVariables(rootElement, additionalExtractors);
 
 	  var scopeElement = getElement(scope, rootElement);
 
@@ -91618,7 +91988,7 @@
 	/**
 	 * @returns {Array<Entry>} entries
 	 */
-	function ErrorProps$1(props) {
+	function ErrorProps$2(props) {
 	  const {
 	    element
 	  } = props;
@@ -91638,7 +92008,7 @@
 	      isEdited: isEdited$1
 	    }, {
 	      id: 'errorCode',
-	      component: ErrorCode$1,
+	      component: ErrorCode$2,
 	      isEdited: isEdited$1
 	    }];
 	  }
@@ -91754,7 +92124,7 @@
 	    debounce
 	  });
 	}
-	function ErrorCode$1(props) {
+	function ErrorCode$2(props) {
 	  const {
 	    element
 	  } = props;
@@ -93228,7 +93598,7 @@
 	    id: 'error',
 	    label: translate('Error'),
 	    component: Group,
-	    entries: [...ErrorProps$1({
+	    entries: [...ErrorProps$2({
 	      element
 	    })]
 	  };
@@ -99583,7 +99953,8 @@
 	  }
 	  return {
 	    items,
-	    add
+	    add,
+	    shouldSort: false
 	  };
 	}
 	function removeFactory$2(props) {
@@ -100391,7 +100762,8 @@
 	      bpmnFactory,
 	      commandStack,
 	      element
-	    })
+	    }),
+	    shouldSort: false
 	  };
 	}
 	function removeFactory({
@@ -100955,24 +101327,23 @@
 	  return businessObject.get('processRef') || businessObject;
 	}
 
-	function ProcessVariablesProps(props) {
+	function ProcessVariablesEntry(props) {
 	  const {
 	    element
 	  } = props;
-	  if (!canHaveProcessVariables(element)) {
-	    return null;
-	  }
-	  const businessObject = getBusinessObject$1(element);
-	  const rootElement = getRootElement(businessObject);
-	  const scope = getScope(element);
-
-	  // (1) fetch available process variables for given scope
-	  const variables = getVariablesForScope_1(scope, rootElement);
+	  const [variables, setVariables] = l$1([]);
+	  y(async () => {
+	    const businessObject = getBusinessObject$1(element);
+	    const rootElement = getRootElement(businessObject);
+	    const scope = getScope(element);
+	    const rawVariables = await getVariablesForScope_1(scope, rootElement);
+	    const withName = populateElementNames(sortByName(rawVariables));
+	    setVariables(withName);
+	  }, [element]);
 	  if (!variables.length) {
 	    return null;
 	  }
-	  const withNames = populateElementNames(sortByName(variables));
-	  const byScope = groupByScope(withNames);
+	  const byScope = groupByScope(variables);
 	  const multiScope = isMultiScope(byScope);
 	  let variableItems = [];
 
@@ -100984,7 +101355,7 @@
 	    variableItems = flatten$1(reversed);
 	  } else {
 	    // (2b) single scope
-	    variableItems = withNames;
+	    variableItems = variables;
 	  }
 	  const items = variableItems.map((variable, index) => {
 	    const id = element.id + '-variable-' + index;
@@ -100998,8 +101369,21 @@
 	      })]
 	    };
 	  });
+	  return o$1(ListGroup, {
+	    ...props,
+	    items: items,
+	    shouldSort: false
+	  });
+	}
+	function ProcessVariablesProps(props) {
+	  const {
+	    element
+	  } = props;
+	  if (!canHaveProcessVariables(element)) {
+	    return null;
+	  }
 	  return {
-	    items,
+	    component: ProcessVariablesEntry,
 	    shouldSort: false
 	  };
 	}
@@ -102136,19 +102520,19 @@
 	}
 	function ProcessVariablesGroup(element, injector) {
 	  const translate = injector.get('translate');
+	  const variableProps = ProcessVariablesProps({
+	    element,
+	    injector
+	  });
+	  if (!variableProps) {
+	    return null;
+	  }
 	  const group = {
 	    label: translate('Process variables'),
 	    id: 'CamundaPlatform__ProcessVariables',
-	    component: ListGroup,
-	    ...ProcessVariablesProps({
-	      element,
-	      injector
-	    })
+	    ...variableProps
 	  };
-	  if (group.items) {
-	    return group;
-	  }
-	  return null;
+	  return group;
 	}
 	function FormDataGroup(element, injector) {
 	  const translate = injector.get('translate');
@@ -103168,7 +103552,7 @@
 	  // different conditions but same bindings
 	  return oldProperties.filter(property => !findPropertyWithBinding(newTemplate, property));
 	}
-	function normalizeReplacer(key, value) {
+	function normalizeReplacer$1(key, value) {
 	  if (isObject(value)) {
 	    const keys = Object.keys(value).sort();
 	    return keys.reduce((obj, key) => {
@@ -103179,7 +103563,7 @@
 	  return value;
 	}
 	function equals(a, b) {
-	  return JSON.stringify(a, normalizeReplacer) === JSON.stringify(b, normalizeReplacer);
+	  return JSON.stringify(a, normalizeReplacer$1) === JSON.stringify(b, normalizeReplacer$1);
 	}
 
 	/**
@@ -104744,6 +105128,163 @@
 	  });
 	}
 
+	/**
+	 * Restores the original order of the template properties
+	 * on the moddle element.
+	 */
+	class UpdateTemplatePropertiesOrder extends CommandInterceptor {
+	  constructor(eventBus, elementTemplates, commandStack, bpmnFactory) {
+	    super(eventBus);
+	    this._eventBus = eventBus;
+	    this._elementTemplates = elementTemplates;
+	    this._commandStack = commandStack;
+	    this._bpmnFactory = bpmnFactory;
+	    this.postExecute(['element.updateProperties', 'element.updateModdleProperties'], this._updatePropertiesOrder, true, this);
+	  }
+	  _updatePropertiesOrder(context) {
+	    const {
+	      element
+	    } = context;
+	    const template = this._elementTemplates.get(element);
+	    const businessObject = element.businessObject;
+	    const commands = [];
+	    if (!template) {
+	      return;
+	    }
+	    const templateProperties = template.properties;
+
+	    // zeebe:Property
+	    const zeebeProperties = findExtension$1(businessObject, 'zeebe:Properties');
+	    if (zeebeProperties) {
+	      this._updateZeebePropertiesOrder(zeebeProperties, templateProperties, commands, context);
+	    }
+
+	    // zeebe:IoMapping
+	    const ioMapping = findExtension$1(businessObject, 'zeebe:IoMapping');
+	    if (ioMapping) {
+	      // zeebe:Input
+	      this._updateInputOrder(ioMapping, templateProperties, commands, context);
+
+	      // zeebe:Output
+	      this._updateOutputOrder(ioMapping, templateProperties, commands, context);
+	    }
+
+	    // zeebe:TaskHeaders
+	    const taskHeaders = findExtension$1(businessObject, 'zeebe:TaskHeaders');
+	    if (taskHeaders) {
+	      this._updateTaskHeadersOrder(taskHeaders, templateProperties, commands, context);
+	    }
+	    if (commands.length) {
+	      const commandsToExecute = commands.filter(command => command !== null);
+	      commandsToExecute.length && this._commandStack.execute('properties-panel.multi-command-executor', commandsToExecute);
+	      return;
+	    }
+	  }
+	  _updateZeebePropertiesOrder(zeebeProperties, templateProperties, commands, context) {
+	    const findIndex = (properties, propertyToFind) => properties.findIndex(prop => prop.binding.type == 'zeebe:property' && prop.binding.name === propertyToFind.get('name'));
+	    const properties = zeebeProperties.get('properties');
+	    if (properties.length < 1) return;
+	    let newPropertiesOrder = [...properties];
+	    sortProperties(newPropertiesOrder, findIndex, templateProperties);
+	    if (!arrayEquals(newPropertiesOrder, properties)) {
+	      commands.push({
+	        cmd: 'element.updateModdleProperties',
+	        context: {
+	          ...context,
+	          moddleElement: zeebeProperties,
+	          properties: {
+	            properties: newPropertiesOrder
+	          }
+	        }
+	      });
+	    }
+	  }
+	  _updateInputOrder(ioMapping, templateProperties, commands, context) {
+	    const findIndex = (properties, propertyToFind) => properties.findIndex(prop => prop.binding.type == 'zeebe:input' && prop.binding.name === propertyToFind.get('target'));
+	    const inputParameters = ioMapping.get('inputParameters');
+	    if (inputParameters.length < 1) return;
+	    let newInputOrder = [...inputParameters];
+	    sortProperties(newInputOrder, findIndex, templateProperties);
+	    if (!arrayEquals(newInputOrder, inputParameters)) {
+	      commands.push({
+	        cmd: 'element.updateModdleProperties',
+	        context: {
+	          ...context,
+	          moddleElement: ioMapping,
+	          properties: {
+	            inputParameters: newInputOrder
+	          }
+	        }
+	      });
+	    }
+	  }
+	  _updateOutputOrder(ioMapping, templateProperties, commands, context) {
+	    const findIndex = (properties, propertyToFind) => properties.findIndex(prop => prop.binding.type == 'zeebe:output' && prop.binding.source === propertyToFind.get('source'));
+	    const outputParameters = ioMapping.get('outputParameters');
+	    if (outputParameters.length < 1) return;
+	    let newOutputOrder = [...outputParameters];
+	    sortProperties(newOutputOrder, findIndex, templateProperties);
+	    if (!arrayEquals(newOutputOrder, outputParameters)) {
+	      commands.push({
+	        cmd: 'element.updateModdleProperties',
+	        context: {
+	          ...context,
+	          moddleElement: ioMapping,
+	          properties: {
+	            outputParameters: newOutputOrder
+	          }
+	        }
+	      });
+	    }
+	  }
+	  _updateTaskHeadersOrder(taskHeaders, templateProperties, commands, context) {
+	    const findIndex = (properties, propertyToFind) => properties.findIndex(prop => prop.binding.type == 'zeebe:taskHeader' && prop.binding.key === propertyToFind.get('key'));
+	    const headers = taskHeaders.get('zeebe:values');
+	    if (headers.length < 1) return;
+	    let newHeadersOrder = [...headers];
+	    sortProperties(newHeadersOrder, findIndex, templateProperties);
+	    if (!arrayEquals(newHeadersOrder, headers)) {
+	      commands.push({
+	        cmd: 'element.updateModdleProperties',
+	        context: {
+	          ...context,
+	          moddleElement: taskHeaders,
+	          properties: {
+	            values: newHeadersOrder
+	          }
+	        }
+	      });
+	    }
+	  }
+	}
+	UpdateTemplatePropertiesOrder.$inject = ['eventBus', 'elementTemplates', 'commandStack', 'bpmnFactory'];
+
+	// helpers
+
+	function normalizeReplacer(key, value) {
+	  if (isObject(value)) {
+	    const keys = Object.keys(value).sort();
+	    return keys.reduce((obj, key) => {
+	      obj[key] = value[key];
+	      return obj;
+	    }, {});
+	  }
+	  return value;
+	}
+	function objectEquals(a, b) {
+	  return JSON.stringify(a, normalizeReplacer) === JSON.stringify(b, normalizeReplacer);
+	}
+	function arrayEquals(a, b) {
+	  return a.every((element, idx) => objectEquals(element, b[idx]));
+	}
+	function sortProperties(array, findIndex, templateProperties) {
+	  return array.sort((a, b) => {
+	    const aIndex = findIndex(templateProperties, a);
+	    const bIndex = findIndex(templateProperties, b);
+	    return aIndex - bIndex;
+	  });
+	}
+
 	/**
 	 * This Behavior checks if the new element's type is in
 	 * the list of elements the template applies to and unlinks
@@ -109902,6 +110443,374 @@
 	  camunda: camundaModdle
 	};
 
+	const ALL_OPTIONS = Object.values(replaceOptions);
+
+	function getReplaceOptionGroups() {
+	  return ALL_OPTIONS;
+	}
+
+	/**
+	 * A replace menu provider that allows to replace elements with
+	 * templates applied with the correspondent plain element.
+	 */
+	function UnlinkTemplateReplaceProvider(popupMenu, translate, elementTemplates) {
+
+	  this._popupMenu = popupMenu;
+	  this._translate = translate;
+	  this._elementTemplates = elementTemplates;
+
+	  this.register();
+	}
+
+	UnlinkTemplateReplaceProvider.$inject = [
+	  'popupMenu',
+	  'translate',
+	  'elementTemplates'
+	];
+
+	/**
+	 * Register replace menu provider in the popup menu
+	 */
+	UnlinkTemplateReplaceProvider.prototype.register = function() {
+	  this._popupMenu.registerProvider('bpmn-replace', this);
+	};
+
+	/**
+	 * Adds the element templates to the replace menu.
+	 * @param {djs.model.Base} element
+	 *
+	 * @returns {Object}
+	 */
+	UnlinkTemplateReplaceProvider.prototype.getPopupMenuEntries = function(element) {
+
+	  return (entries) => {
+
+	    // convert our entries into something sortable
+	    let entrySet = Object.entries(entries);
+
+	    if (this._elementTemplates.get(element)) {
+
+	      // add unlink template option
+	      this.addPlainElementEntry(element, entrySet, this._translate, this._elementTemplates);
+	    }
+
+	    // convert back to object
+	    return entrySet.reduce((entries, [ key, value ]) => {
+	      entries[key] = value;
+
+	      return entries;
+	    }, {});
+	  };
+	};
+
+
+	/**
+	 * Adds the option to replace with plain element (unlink template).
+	 *
+	 * @param {djs.model.Base} element
+	 * @param {Array<Object>} entries
+	 */
+	UnlinkTemplateReplaceProvider.prototype.addPlainElementEntry = function(element, entries, translate, elementTemplates) {
+
+	  const replaceOption = this.getPlainEntry(element, entries, translate, elementTemplates);
+
+	  if (!replaceOption) {
+	    return;
+	  }
+
+	  const [
+	    insertIndex,
+	    entry
+	  ] = replaceOption;
+
+	  // insert unlink entry
+	  entries.splice(insertIndex, 0, [ entry.id, entry ]);
+	};
+
+	/**
+	 * Returns the option to replace with plain element and the index where it should be inserted.
+	 *
+	 * @param {djs.model.Base} element
+	 * @param {Array<Object>} entries
+	 *
+	 * @returns {Array<Object, number>}
+	 */
+	UnlinkTemplateReplaceProvider.prototype.getPlainEntry = function(element, entries, translate, elementTemplates) {
+
+	  const {
+	    options,
+	    option,
+	    optionIndex
+	  } = findReplaceOptions(element) || { };
+
+	  if (!options) {
+	    return null;
+	  }
+
+	  const entry = {
+	    id: 'replace-unlink-element-template',
+	    action: () => {
+	      elementTemplates.applyTemplate(element, null);
+	    },
+	    label: translate(option.label),
+	    className: option.className
+	  };
+
+	  // insert after previous option, if it exists
+	  const previousIndex = getOptionIndex(options, optionIndex - 1, entries);
+
+	  if (previousIndex) {
+	    return [
+	      previousIndex + 1,
+	      entry
+	    ];
+	  }
+
+	  // insert before next option, if it exists
+	  const nextIndex = getOptionIndex(options, optionIndex + 1, entries);
+
+	  if (nextIndex) {
+	    return [
+	      nextIndex,
+	      entry
+	    ];
+	  }
+
+	  // fallback to insert at start
+	  return [
+	    0,
+	    entry
+	  ];
+	};
+
+
+	/**
+	 * @param {ModdleElement} element
+	 *
+	 * @return { { options: Array<any>, option: any, optionIndex: number } | null }
+	 */
+	function findReplaceOptions(element) {
+
+	  const isSameType = (element, option) => option.target && !isDifferentType(element)(option);
+
+	  return getReplaceOptionGroups().reduce((result, options) => {
+
+	    if (result) {
+	      return result;
+	    }
+
+	    const optionIndex = options.findIndex(option => isSameType(element, option));
+
+	    if (optionIndex === -1) {
+	      return;
+	    }
+
+	    return {
+	      options,
+	      option: options[optionIndex],
+	      optionIndex
+	    };
+	  }, null);
+	}
+
+	function getOptionIndex(options, index, entries) {
+	  const option = options[index];
+
+	  if (!option) {
+	    return false;
+	  }
+
+	  return entries.findIndex(
+	    ([ key ]) => key === option.actionName
+	  );
+	}
+
+	var sharedReplaceModule = {
+	  __init__: [
+	    'unlinkTemplateReplaceProvider'
+	  ],
+	  unlinkTemplateReplaceProvider: [ 'type', UnlinkTemplateReplaceProvider ]
+	};
+
+	const colorImageSvg = '<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22"><path d="m12.5 5.5.3-.4 3.6-3.6c.5-.5 1.3-.5 1.7 0l1 1c.5.4.5 1.2 0 1.7l-3.6 3.6-.4.2v.2c0 1.4.6 2 1 2.7v.6l-1.7 1.6c-.2.2-.4.2-.6 0L7.3 6.6a.4.4 0 0 1 0-.6l.3-.3.5-.5.8-.8c.2-.2.4-.1.6 0 .9.5 1.5 1.1 3 1.1zm-9.9 6 4.2-4.2 6.3 6.3-4.2 4.2c-.3.3-.9.3-1.2 0l-.8-.8-.9-.8-2.3-2.9" /></svg>';
+
+	const colorImageUrl = 'data:image/svg+xml;utf8,' + encodeURIComponent(colorImageSvg);
+
+
+	function ColorContextPadProvider(contextPad, popupMenu, canvas, translate) {
+
+	  this._contextPad = contextPad;
+	  this._popupMenu = popupMenu;
+	  this._canvas = canvas;
+	  this._translate = translate;
+
+	  contextPad.registerProvider(this);
+	}
+
+
+	ColorContextPadProvider.$inject = [
+	  'contextPad',
+	  'popupMenu',
+	  'canvas',
+	  'translate'
+	];
+
+
+	ColorContextPadProvider.prototype.getContextPadEntries = function(element) {
+	  return this._createPopupAction([ element ]);
+	};
+
+
+	ColorContextPadProvider.prototype.getMultiElementContextPadEntries = function(elements) {
+
+	  return this._createPopupAction(elements);
+	};
+
+	ColorContextPadProvider.prototype._createPopupAction = function(elements) {
+
+	  const canvas = this._canvas;
+	  const translate = this._translate;
+	  const contextPad = this._contextPad;
+	  const popupMenu = this._popupMenu;
+
+	  return {
+	    'set-color': {
+	      group: 'edit',
+	      className: 'bpmn-icon-color',
+	      title: translate('Set Color'),
+	      imageUrl: colorImageUrl,
+	      action: {
+	        click: (event, element) => {
+
+	          // get start popup draw start position
+	          var position = {
+	            ...getStartPosition(canvas, contextPad, elements),
+	            cursor: {
+	              x: event.x,
+	              y: event.y
+	            }
+	          };
+
+	          // open new color-picker popup
+	          popupMenu.open(elements, 'color-picker', position);
+	        }
+	      }
+	    }
+	  };
+
+	};
+
+
+	// helpers //////////////////////
+
+	function getStartPosition(canvas, contextPad, elements) {
+
+	  var Y_OFFSET = 5;
+
+	  var diagramContainer = canvas.getContainer(),
+	      pad = contextPad.getPad(elements).html;
+
+	  var diagramRect = diagramContainer.getBoundingClientRect(),
+	      padRect = pad.getBoundingClientRect();
+
+	  var top = padRect.top - diagramRect.top;
+	  var left = padRect.left - diagramRect.left;
+
+	  var pos = {
+	    x: left,
+	    y: top + padRect.height + Y_OFFSET
+	  };
+
+	  return pos;
+	}
+
+	const COLORS = [ {
+	  label: 'Default',
+	  fill: undefined,
+	  stroke: undefined
+	}, {
+	  label: 'Blue',
+	  fill: '#BBDEFB',
+	  stroke: '#0D4372'
+	}, {
+	  label: 'Orange',
+	  fill: '#FFE0B2',
+	  stroke: '#6B3C00'
+	}, {
+	  label: 'Green',
+	  fill: '#C8E6C9',
+	  stroke: '#205022'
+	}, {
+	  label: 'Red',
+	  fill: '#FFCDD2',
+	  stroke: '#831311'
+	}, {
+	  label: 'Purple',
+	  fill: '#E1BEE7',
+	  stroke: '#5B176D'
+	} ];
+
+
+	function ColorPopupProvider(config, popupMenu, modeling, translate) {
+	  this._popupMenu = popupMenu;
+	  this._modeling = modeling;
+	  this._translate = translate;
+
+	  this._colors = config && config.colors || COLORS;
+
+	  this._popupMenu.registerProvider('color-picker', this);
+	}
+
+
+	ColorPopupProvider.$inject = [
+	  'config.colorPicker',
+	  'popupMenu',
+	  'modeling',
+	  'translate'
+	];
+
+
+	ColorPopupProvider.prototype.getEntries = function(elements) {
+	  var self = this;
+
+	  var colorIcon = domify$1(`
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="100%">
+      <rect rx="2" x="1" y="1" width="22" height="22" fill="var(--fill-color)" stroke="var(--stroke-color)"></rect>
+    </svg>
+  `);
+
+	  var entries = this._colors.map(function(color) {
+
+	    colorIcon.style.setProperty('--fill-color', color.fill || 'white');
+	    colorIcon.style.setProperty('--stroke-color', color.stroke || 'rgb(34, 36, 42)');
+
+	    return {
+	      title: self._translate(color.label),
+	      id: color.label.toLowerCase() + '-color',
+	      imageUrl: `data:image/svg+xml;utf8,${ encodeURIComponent(colorIcon.outerHTML) }`,
+	      action: createAction(self._modeling, elements, color)
+	    };
+	  });
+
+	  return entries;
+	};
+
+
+	function createAction(modeling, element, color) {
+	  return function() {
+	    modeling.setColor(element, color);
+	  };
+	}
+
+	var colorPickerModule = {
+	  __init__: [
+	    'colorContextPadProvider',
+	    'colorPopupProvider'
+	  ],
+	  colorContextPadProvider: [ 'type', ColorContextPadProvider ],
+	  colorPopupProvider: [ 'type', ColorPopupProvider ]
+	};
+
 	/**
 	 *
 	 * @param {Object} options
@@ -109924,7 +110833,9 @@
 	Modeler.prototype._camundaPlatformModules = [
 	  behaviorsModule,
 	  camundaPlatformPropertiesProviderModule,
-	  index
+	  index,
+	  sharedReplaceModule,
+	  colorPickerModule
 	];
 
 	Modeler.prototype._modules = [].concat(