camunda-bpmn-js 5.14.2 → 5.16.0

package/dist/base-modeler.development.js

@@ -1450,6 +1450,12 @@
     return el.querySelector(selector);
   }
 
+  function all$2(selector, el) {
+    el = el || document;
+
+    return el.querySelectorAll(selector);
+  }
+
   function remove$5(el) {
     el.parentNode && el.parentNode.removeChild(el);
   }
@@ -18870,6 +18876,17 @@
     return element;
   }
 
+  /**
+   * Returns true if the given element is an external label.
+   *
+   * @param {Element} element
+   *
+   * @return {boolean}
+   */
+  function isExternalLabel(element) {
+    return isLabel(element) && isLabelExternal(element.labelTarget);
+  }
+
   var black = 'hsl(225, 10%, 15%)';
   var white = 'white';
 
@@ -19000,11 +19017,11 @@
       [ 'l', width - borderRadius * 2, 0 ],
       [ 'a', borderRadius, borderRadius, 0, 0, 1, borderRadius, borderRadius ],
       [ 'l', 0, height - borderRadius * 2 ],
-      [ 'a', borderRadius, borderRadius, 0, 0, 1, -10, borderRadius ],
+      [ 'a', borderRadius, borderRadius, 0, 0, 1, -borderRadius, borderRadius ],
       [ 'l', borderRadius * 2 - width, 0 ],
-      [ 'a', borderRadius, borderRadius, 0, 0, 1, -10, -10 ],
+      [ 'a', borderRadius, borderRadius, 0, 0, 1, -borderRadius, -borderRadius ],
       [ 'l', 0, borderRadius * 2 - height ],
-      [ 'a', borderRadius, borderRadius, 0, 0, 1, borderRadius, -10 ],
+      [ 'a', borderRadius, borderRadius, 0, 0, 1, borderRadius, -borderRadius ],
       [ 'z' ]
     ];
 
@@ -19102,7 +19119,8 @@
   var ELEMENT_LABEL_DISTANCE$1 = 10,
       INNER_OUTER_DIST = 3,
       PARTICIPANT_STROKE_WIDTH = 1.5,
-      TASK_BORDER_RADIUS = 10;
+      TASK_BORDER_RADIUS = 10,
+      EXTERNAL_LABEL_BORDER_RADIUS = 4;
 
   var DEFAULT_OPACITY = 0.95,
       FULL_OPACITY = 1,
@@ -21411,6 +21429,11 @@
    * @return {string} path
    */
   BpmnRenderer.prototype.getShapePath = function(shape) {
+
+    if (isLabel(shape)) {
+      return getRoundRectPath(shape, EXTERNAL_LABEL_BORDER_RADIUS);
+    }
+
     if (is(shape, 'bpmn:Event')) {
       return getCirclePath(shape);
     }
@@ -25870,7 +25893,7 @@
    * @param {KeyboardEvent} event
    * @return {boolean}
    */
-  function isCmd(event) {
+  function isCmd$1(event) {
 
     // ensure we don't react to AltGr
     // (mapped to CTRL + ALT)
@@ -25905,28 +25928,28 @@
    * @param {KeyboardEvent} event
    */
   function isCopy(event) {
-    return isCmd(event) && isKey(KEYS_COPY, event);
+    return isCmd$1(event) && isKey(KEYS_COPY, event);
   }
 
   /**
    * @param {KeyboardEvent} event
    */
   function isPaste(event) {
-    return isCmd(event) && isKey(KEYS_PASTE, event);
+    return isCmd$1(event) && isKey(KEYS_PASTE, event);
   }
 
   /**
    * @param {KeyboardEvent} event
    */
   function isUndo(event) {
-    return isCmd(event) && !isShift(event) && isKey(KEYS_UNDO, event);
+    return isCmd$1(event) && !isShift(event) && isKey(KEYS_UNDO, event);
   }
 
   /**
    * @param {KeyboardEvent} event
    */
   function isRedo(event) {
-    return isCmd(event) && (
+    return isCmd$1(event) && (
       isKey(KEYS_REDO, event) || (
         isKey(KEYS_UNDO, event) && isShift(event)
       )
@@ -26130,7 +26153,7 @@
   };
 
   Keyboard.prototype.hasModifier = hasModifier;
-  Keyboard.prototype.isCmd = isCmd;
+  Keyboard.prototype.isCmd = isCmd$1;
   Keyboard.prototype.isShift = isShift;
   Keyboard.prototype.isKey = isKey;
 
@@ -26248,7 +26271,7 @@
 
       // quirk: it has to be triggered by `=` as well to work on international keyboard layout
       // cf: https://github.com/bpmn-io/bpmn-js/issues/1362#issuecomment-722989754
-      if (isKey([ '+', 'Add', '=' ], event) && isCmd(event)) {
+      if (isKey([ '+', 'Add', '=' ], event) && isCmd$1(event)) {
         editorActions.trigger('stepZoom', { value: 1 });
 
         return true;
@@ -26261,7 +26284,7 @@
 
       var event = context.keyEvent;
 
-      if (isKey([ '-', 'Subtract' ], event) && isCmd(event)) {
+      if (isKey([ '-', 'Subtract' ], event) && isCmd$1(event)) {
         editorActions.trigger('stepZoom', { value: -1 });
 
         return true;
@@ -26274,7 +26297,7 @@
 
       var event = context.keyEvent;
 
-      if (isKey('0', event) && isCmd(event)) {
+      if (isKey('0', event) && isCmd$1(event)) {
         editorActions.trigger('zoom', { value: 1 });
 
         return true;
@@ -35976,6 +35999,9 @@
         // create a DataObject every time a DataObjectReference is created
         var dataObject = bpmnFactory.create('bpmn:DataObject');
 
+        // Copy the isCollection property if needed.
+        dataObject.isCollection = shape.businessObject.dataObjectRef?.isCollection || false;
+
         // set the reference to the DataObject
         shape.businessObject.dataObjectRef = dataObject;
       }
@@ -44985,7 +45011,8 @@
     'errorRef',
     'escalationRef',
     'messageRef',
-    'signalRef'
+    'signalRef',
+    'dataObjectRef'
   ];
 
   /**
@@ -59581,7 +59608,7 @@
     ], LOWER_PRIORITY, function(event) {
       var originalEvent = event.originalEvent;
 
-      if (!self.active || (originalEvent && isCmd(originalEvent))) {
+      if (!self.active || (originalEvent && isCmd$1(originalEvent))) {
         return;
       }
 
@@ -62119,6 +62146,487 @@
     labelEditingPreview: [ 'type', LabelEditingPreview ]
   };
 
+  var LOW_PRIORITY$4 = 500;
+
+  var DEFAULT_PRIORITY$2 = 1000;
+
+  /**
+   * @typedef {import('../../model/Types').Element} Element
+   *
+   * @typedef {import('./OutlineProvider').default} OutlineProvider
+   * @typedef {import('../../core/EventBus').default} EventBus
+   * @typedef {import('../../draw/Styles').default} Styles
+   */
+
+  /**
+   * @class
+   *
+   * A plugin that adds an outline to shapes and connections that may be activated and styled
+   * via CSS classes.
+   *
+   * @param {EventBus} eventBus
+   * @param {Styles} styles
+   */
+  function Outline$1(eventBus, styles) {
+
+    this._eventBus = eventBus;
+
+    this.offset = 5;
+
+    var OUTLINE_STYLE = styles.cls('djs-outline', [ 'no-fill' ]);
+
+    var self = this;
+
+    /**
+     * @param {SVGElement} gfx
+     *
+     * @return {SVGElement} outline
+     */
+    function createOutline(gfx) {
+      var outline = create$1('rect');
+
+      attr$2(outline, assign$2({
+        x: 0,
+        y: 0,
+        rx: 4,
+        width: 100,
+        height: 100
+      }, OUTLINE_STYLE));
+
+      return outline;
+    }
+
+    // A low priortity is necessary, because outlines of labels have to be updated
+    // after the label bounds have been updated in the renderer.
+    eventBus.on([ 'shape.added', 'shape.changed' ], LOW_PRIORITY$4, function(event) {
+      var element = event.element,
+          gfx = event.gfx;
+
+      var outline = query$4('.djs-outline', gfx);
+
+      if (!outline) {
+        outline = self.getOutline(element) || createOutline();
+        append(gfx, outline);
+      }
+
+      self.updateShapeOutline(outline, element);
+    });
+
+    eventBus.on([ 'connection.added', 'connection.changed' ], function(event) {
+      var element = event.element,
+          gfx = event.gfx;
+
+      var outline = query$4('.djs-outline', gfx);
+
+      if (!outline) {
+        outline = createOutline();
+        append(gfx, outline);
+      }
+
+      self.updateConnectionOutline(outline, element);
+    });
+  }
+
+
+  /**
+   * Updates the outline of a shape respecting the dimension of the
+   * element and an outline offset.
+   *
+   * @param {SVGElement} outline
+   * @param {Element} element
+   */
+  Outline$1.prototype.updateShapeOutline = function(outline, element) {
+
+    var updated = false;
+    var providers = this._getProviders();
+
+    if (providers.length) {
+      forEach$2(providers, function(provider) {
+        updated = updated || provider.updateOutline(element, outline);
+      });
+    }
+
+    if (!updated) {
+      attr$2(outline, {
+        x: -this.offset,
+        y: -this.offset,
+        width: element.width + this.offset * 2,
+        height: element.height + this.offset * 2
+      });
+    }
+  };
+
+  /**
+   * Updates the outline of a connection respecting the bounding box of
+   * the connection and an outline offset.
+   * Register an outline provider with the given priority.
+   *
+   * @param {SVGElement} outline
+   * @param {Element} connection
+   */
+  Outline$1.prototype.updateConnectionOutline = function(outline, connection) {
+    var bbox = getBBox(connection);
+
+    attr$2(outline, {
+      x: bbox.x - this.offset,
+      y: bbox.y - this.offset,
+      width: bbox.width + this.offset * 2,
+      height: bbox.height + this.offset * 2
+    });
+  };
+
+  /**
+   * Register an outline provider with the given priority.
+   *
+   * @param {number} priority
+   * @param {OutlineProvider} provider
+   */
+  Outline$1.prototype.registerProvider = function(priority, provider) {
+    if (!provider) {
+      provider = priority;
+      priority = DEFAULT_PRIORITY$2;
+    }
+
+    this._eventBus.on('outline.getProviders', priority, function(event) {
+      event.providers.push(provider);
+    });
+  };
+
+  /**
+   * Returns the registered outline providers.
+   *
+   * @returns {OutlineProvider[]}
+   */
+  Outline$1.prototype._getProviders = function() {
+    var event = this._eventBus.createEvent({
+      type: 'outline.getProviders',
+      providers: []
+    });
+
+    this._eventBus.fire(event);
+
+    return event.providers;
+  };
+
+  /**
+   * Returns the outline for an element.
+   *
+   * @param {Element} element
+   */
+  Outline$1.prototype.getOutline = function(element) {
+    var outline;
+    var providers = this._getProviders();
+
+    forEach$2(providers, function(provider) {
+
+      if (!isFunction(provider.getOutline)) {
+        return;
+      }
+
+      outline = outline || provider.getOutline(element);
+    });
+
+    return outline;
+  };
+
+  Outline$1.$inject = [ 'eventBus', 'styles', 'elementRegistry' ];
+
+  var SELECTION_OUTLINE_PADDING = 6;
+
+  /**
+   * @typedef {import('../../model/Types').Element} Element
+   *
+   * @typedef {import('../../core/EventBus').default} EventBus
+   * @typedef {import('../selection/Selection').default} Selection
+   * @typedef {import('../../core/Canvas').default} Canvas
+   */
+
+  /**
+   * @class
+   *
+   * A plugin that adds an outline to shapes and connections that may be activated and styled
+   * via CSS classes.
+   *
+   * @param {EventBus} eventBus
+   * @param {Canvas} canvas
+   * @param {Selection} selection
+   */
+  function MultiSelectionOutline(eventBus, canvas, selection) {
+    this._canvas = canvas;
+
+    var self = this;
+
+    eventBus.on('element.changed', function(event) {
+      if (selection.isSelected(event.element)) {
+        self._updateMultiSelectionOutline(selection.get());
+      }
+    });
+
+    eventBus.on('selection.changed', function(event) {
+      var newSelection = event.newSelection;
+
+      self._updateMultiSelectionOutline(newSelection);
+    });
+  }
+
+
+
+  MultiSelectionOutline.prototype._updateMultiSelectionOutline = function(selection) {
+    var layer = this._canvas.getLayer('selectionOutline');
+
+    clear$1(layer);
+
+    var enabled = selection.length > 1;
+
+    var container = this._canvas.getContainer();
+
+    classes$2(container)[enabled ? 'add' : 'remove']('djs-multi-select');
+
+    if (!enabled) {
+      return;
+    }
+
+    var bBox = addSelectionOutlinePadding(getBBox(selection));
+
+    var rect = create$1('rect');
+
+    attr$2(rect, assign$2({
+      rx: 3
+    }, bBox));
+
+    classes$2(rect).add('djs-selection-outline');
+
+    append(layer, rect);
+  };
+
+
+  MultiSelectionOutline.$inject = [ 'eventBus', 'canvas', 'selection' ];
+
+  // helpers //////////
+
+  function addSelectionOutlinePadding(bBox) {
+    return {
+      x: bBox.x - SELECTION_OUTLINE_PADDING,
+      y: bBox.y - SELECTION_OUTLINE_PADDING,
+      width: bBox.width + SELECTION_OUTLINE_PADDING * 2,
+      height: bBox.height + SELECTION_OUTLINE_PADDING * 2
+    };
+  }
+
+  /**
+   * @type { import('didi').ModuleDeclaration }
+   */
+  var Outline = {
+    __depends__: [
+      SelectionModule
+    ],
+    __init__: [ 'outline', 'multiSelectionOutline' ],
+    outline: [ 'type', Outline$1 ],
+    multiSelectionOutline: [ 'type', MultiSelectionOutline ]
+  };
+
+  /**
+   * @typedef {import('diagram-js/lib/core/EventBus').default} EventBus
+   * @typedef {import('diagram-js/lib/core/Canvas').default} Canvas
+   * @typedef {import('diagram-js/lib/core/GraphicsFactory').default} GraphicsFactory
+   * @typedef {import('../outline/OutlineProvider').default} Outline
+   * @typedef {import('diagram-js/lib/features/selection').default} Selection
+   *
+   * @typedef {import('diagram-js/lib/model/Types').Element} Element
+   */
+
+  const ALLOWED_ELEMENTS = [ 'bpmn:Event', 'bpmn:SequenceFlow', 'bpmn:Gateway' ];
+
+  const LINE_STYLE = {
+    class: 'bjs-label-link',
+    stroke: 'var(--element-selected-outline-secondary-stroke-color)',
+    strokeDasharray: '5, 5',
+  };
+
+  const DISTANCE_THRESHOLD = 15;
+  const PATH_OFFSET = 2;
+
+  /**
+   * Render a line between an external label and its target element,
+   * when either is selected.
+   *
+   * @param {EventBus} eventBus
+   * @param {Canvas} canvas
+   * @param {GraphicsFactory} graphicsFactory
+   * @param {Outline} outline
+   */
+  function LabelLink$1(eventBus, canvas, graphicsFactory, outline, selection) {
+
+    const layer = canvas.getLayer('overlays');
+
+    eventBus.on([ 'selection.changed', 'shape.changed' ], function() {
+      cleanUp();
+    });
+
+    eventBus.on('selection.changed', function({ newSelection }) {
+
+      const allowedElements = newSelection.filter(element => isAny(element, ALLOWED_ELEMENTS));
+
+      if (allowedElements.length === 1) {
+        const element = allowedElements[0];
+        if (isLabel(element)) {
+          createLink(element, element.labelTarget, newSelection);
+        } else if (element.labels?.length) {
+          createLink(element.labels[0], element, newSelection);
+        }
+      }
+
+      // Only allowed when both label and its target are selected
+      if (allowedElements.length === 2) {
+        const label = allowedElements.find(isLabel);
+        const target = allowedElements.find(el => el.labels?.includes(label));
+        if (label && target) {
+          createLink(label, target, newSelection);
+        }
+      }
+    });
+
+    eventBus.on('shape.changed', function({ element }) {
+
+      if (!isAny(element, ALLOWED_ELEMENTS) || !isElementSelected(element)) {
+        return;
+      }
+
+      if (isLabel(element)) {
+        createLink(element, element.labelTarget, selection.get());
+      } else if (element.labels?.length) {
+        createLink(element.labels[0], element, selection.get());
+      }
+    });
+
+    /**
+     * Render a line between an external label and its target.
+     *
+     * @param {Element} label
+     * @param {Element} target
+     * @param {Element[]} selection
+     */
+    function createLink(label, target, selection = []) {
+
+      // Create an auxiliary line between label and target mid points
+      const line = createLine(
+        [ getMid(target), getMid(label) ],
+        LINE_STYLE
+      );
+      const linePath = line.getAttribute('d');
+
+      // Calculate the intersection point between line and label
+      const labelSelected = selection.includes(label);
+      const labelPath = labelSelected ? getElementOutlinePath(label) : getElementPath(label);
+      const labelInter = getElementLineIntersection(labelPath, linePath);
+
+      // Label on top of the target
+      if (!labelInter) {
+        return;
+      }
+
+      // Calculate the intersection point between line and label
+      // If the target is a sequence flow, there is no intersection,
+      // so we link to the middle of it.
+      const targetSelected = selection.includes(target);
+      const targetPath = targetSelected ? getElementOutlinePath(target) : getElementPath(target);
+      const targetInter = getElementLineIntersection(targetPath, linePath) || getMid(target);
+
+      // Do not draw a link if the points are too close
+      const distance = getDistancePointPoint(targetInter, labelInter);
+      if (distance < DISTANCE_THRESHOLD) {
+        return;
+      }
+
+      // Connect the actual closest points
+      updateLine(line, [ targetInter, labelInter ]);
+      append(layer, line);
+    }
+
+    /**
+     * Remove all existing label links.
+     */
+    function cleanUp() {
+      all$2(`.${LINE_STYLE.class}`, layer).forEach(remove$4);
+    }
+
+    /**
+     * Get element's slightly expanded outline path.
+     *
+     * @param {Element} element
+     * @returns {string} svg path
+     */
+    function getElementOutlinePath(element) {
+      const outlineShape = outline.getOutline(element);
+      const outlineOffset = outline.offset;
+
+      if (!outlineShape) {
+        return getElementPath(element);
+      }
+
+      if (outlineShape.x) {
+        const shape = {
+          x: element.x + parseSvgNumAttr(outlineShape, 'x') - PATH_OFFSET,
+          y: element.y + parseSvgNumAttr(outlineShape, 'y') - PATH_OFFSET,
+          width: parseSvgNumAttr(outlineShape, 'width') + PATH_OFFSET * 2,
+          height: parseSvgNumAttr(outlineShape, 'height') + PATH_OFFSET * 2
+        };
+
+        return getRoundRectPath(shape, parseSvgNumAttr(outlineShape, 'rx'));
+      }
+
+      if (outlineShape.cx) {
+        const shape = {
+          x: element.x - outlineOffset,
+          y: element.y - outlineOffset,
+          width: parseSvgNumAttr(outlineShape, 'r') * 2,
+          height: parseSvgNumAttr(outlineShape, 'r') * 2,
+        };
+
+        return getCirclePath(shape);
+      }
+    }
+
+    function getElementPath(element) {
+      return graphicsFactory.getShapePath(element);
+    }
+
+    function isElementSelected(element) {
+      return selection.get().includes(element);
+    }
+  }
+
+  LabelLink$1.$inject = [
+    'eventBus',
+    'canvas',
+    'graphicsFactory',
+    'outline',
+    'selection'
+  ];
+
+  /**
+   * Get numeric attribute from SVG element
+   * or 0 if not present.
+   *
+   * @param {SVGElement} node
+   * @param {string} attr
+   * @returns {number}
+   */
+  function parseSvgNumAttr(node, attr) {
+    return parseFloat(attr$2(node, attr) || 0);
+  }
+
+  var LabelLink = {
+    __depends__: [
+      SelectionModule,
+      Outline
+    ],
+    __init__: [
+      'labelLink'
+    ],
+    labelLink: [ 'type', LabelLink$1 ]
+  };
+
   /**
    * @typedef {import('../../core/Canvas').default} Canvas
    * @typedef {import('../../core/EventBus').default} EventBus
@@ -62566,285 +63074,6 @@
     modelingFeedback: [ 'type', ModelingFeedback ]
   };
 
-  var LOW_PRIORITY$4 = 500;
-
-  var DEFAULT_PRIORITY$2 = 1000;
-
-  /**
-   * @typedef {import('../../model/Types').Element} Element
-   *
-   * @typedef {import('./OutlineProvider').default} OutlineProvider
-   * @typedef {import('../../core/EventBus').default} EventBus
-   * @typedef {import('../../draw/Styles').default} Styles
-   */
-
-  /**
-   * @class
-   *
-   * A plugin that adds an outline to shapes and connections that may be activated and styled
-   * via CSS classes.
-   *
-   * @param {EventBus} eventBus
-   * @param {Styles} styles
-   */
-  function Outline(eventBus, styles) {
-
-    this._eventBus = eventBus;
-
-    this.offset = 5;
-
-    var OUTLINE_STYLE = styles.cls('djs-outline', [ 'no-fill' ]);
-
-    var self = this;
-
-    /**
-     * @param {SVGElement} gfx
-     *
-     * @return {SVGElement} outline
-     */
-    function createOutline(gfx) {
-      var outline = create$1('rect');
-
-      attr$2(outline, assign$2({
-        x: 0,
-        y: 0,
-        rx: 4,
-        width: 100,
-        height: 100
-      }, OUTLINE_STYLE));
-
-      return outline;
-    }
-
-    // A low priortity is necessary, because outlines of labels have to be updated
-    // after the label bounds have been updated in the renderer.
-    eventBus.on([ 'shape.added', 'shape.changed' ], LOW_PRIORITY$4, function(event) {
-      var element = event.element,
-          gfx = event.gfx;
-
-      var outline = query$4('.djs-outline', gfx);
-
-      if (!outline) {
-        outline = self.getOutline(element) || createOutline();
-        append(gfx, outline);
-      }
-
-      self.updateShapeOutline(outline, element);
-    });
-
-    eventBus.on([ 'connection.added', 'connection.changed' ], function(event) {
-      var element = event.element,
-          gfx = event.gfx;
-
-      var outline = query$4('.djs-outline', gfx);
-
-      if (!outline) {
-        outline = createOutline();
-        append(gfx, outline);
-      }
-
-      self.updateConnectionOutline(outline, element);
-    });
-  }
-
-
-  /**
-   * Updates the outline of a shape respecting the dimension of the
-   * element and an outline offset.
-   *
-   * @param {SVGElement} outline
-   * @param {Element} element
-   */
-  Outline.prototype.updateShapeOutline = function(outline, element) {
-
-    var updated = false;
-    var providers = this._getProviders();
-
-    if (providers.length) {
-      forEach$2(providers, function(provider) {
-        updated = updated || provider.updateOutline(element, outline);
-      });
-    }
-
-    if (!updated) {
-      attr$2(outline, {
-        x: -this.offset,
-        y: -this.offset,
-        width: element.width + this.offset * 2,
-        height: element.height + this.offset * 2
-      });
-    }
-  };
-
-  /**
-   * Updates the outline of a connection respecting the bounding box of
-   * the connection and an outline offset.
-   * Register an outline provider with the given priority.
-   *
-   * @param {SVGElement} outline
-   * @param {Element} connection
-   */
-  Outline.prototype.updateConnectionOutline = function(outline, connection) {
-    var bbox = getBBox(connection);
-
-    attr$2(outline, {
-      x: bbox.x - this.offset,
-      y: bbox.y - this.offset,
-      width: bbox.width + this.offset * 2,
-      height: bbox.height + this.offset * 2
-    });
-  };
-
-  /**
-   * Register an outline provider with the given priority.
-   *
-   * @param {number} priority
-   * @param {OutlineProvider} provider
-   */
-  Outline.prototype.registerProvider = function(priority, provider) {
-    if (!provider) {
-      provider = priority;
-      priority = DEFAULT_PRIORITY$2;
-    }
-
-    this._eventBus.on('outline.getProviders', priority, function(event) {
-      event.providers.push(provider);
-    });
-  };
-
-  /**
-   * Returns the registered outline providers.
-   *
-   * @returns {OutlineProvider[]}
-   */
-  Outline.prototype._getProviders = function() {
-    var event = this._eventBus.createEvent({
-      type: 'outline.getProviders',
-      providers: []
-    });
-
-    this._eventBus.fire(event);
-
-    return event.providers;
-  };
-
-  /**
-   * Returns the outline for an element.
-   *
-   * @param {Element} element
-   */
-  Outline.prototype.getOutline = function(element) {
-    var outline;
-    var providers = this._getProviders();
-
-    forEach$2(providers, function(provider) {
-
-      if (!isFunction(provider.getOutline)) {
-        return;
-      }
-
-      outline = outline || provider.getOutline(element);
-    });
-
-    return outline;
-  };
-
-  Outline.$inject = [ 'eventBus', 'styles', 'elementRegistry' ];
-
-  var SELECTION_OUTLINE_PADDING = 6;
-
-  /**
-   * @typedef {import('../../model/Types').Element} Element
-   *
-   * @typedef {import('../../core/EventBus').default} EventBus
-   * @typedef {import('../selection/Selection').default} Selection
-   * @typedef {import('../../core/Canvas').default} Canvas
-   */
-
-  /**
-   * @class
-   *
-   * A plugin that adds an outline to shapes and connections that may be activated and styled
-   * via CSS classes.
-   *
-   * @param {EventBus} eventBus
-   * @param {Canvas} canvas
-   * @param {Selection} selection
-   */
-  function MultiSelectionOutline(eventBus, canvas, selection) {
-    this._canvas = canvas;
-
-    var self = this;
-
-    eventBus.on('element.changed', function(event) {
-      if (selection.isSelected(event.element)) {
-        self._updateMultiSelectionOutline(selection.get());
-      }
-    });
-
-    eventBus.on('selection.changed', function(event) {
-      var newSelection = event.newSelection;
-
-      self._updateMultiSelectionOutline(newSelection);
-    });
-  }
-
-
-
-  MultiSelectionOutline.prototype._updateMultiSelectionOutline = function(selection) {
-    var layer = this._canvas.getLayer('selectionOutline');
-
-    clear$1(layer);
-
-    var enabled = selection.length > 1;
-
-    var container = this._canvas.getContainer();
-
-    classes$2(container)[enabled ? 'add' : 'remove']('djs-multi-select');
-
-    if (!enabled) {
-      return;
-    }
-
-    var bBox = addSelectionOutlinePadding(getBBox(selection));
-
-    var rect = create$1('rect');
-
-    attr$2(rect, assign$2({
-      rx: 3
-    }, bBox));
-
-    classes$2(rect).add('djs-selection-outline');
-
-    append(layer, rect);
-  };
-
-
-  MultiSelectionOutline.$inject = [ 'eventBus', 'canvas', 'selection' ];
-
-  // helpers //////////
-
-  function addSelectionOutlinePadding(bBox) {
-    return {
-      x: bBox.x - SELECTION_OUTLINE_PADDING,
-      y: bBox.y - SELECTION_OUTLINE_PADDING,
-      width: bBox.width + SELECTION_OUTLINE_PADDING * 2,
-      height: bBox.height + SELECTION_OUTLINE_PADDING * 2
-    };
-  }
-
-  /**
-   * @type { import('didi').ModuleDeclaration }
-   */
-  var Ouline = {
-    __depends__: [
-      SelectionModule
-    ],
-    __init__: [ 'outline', 'multiSelectionOutline' ],
-    outline: [ 'type', Outline ],
-    multiSelectionOutline: [ 'type', MultiSelectionOutline ]
-  };
-
   /**
    * @typedef {import('../../core/Types').ElementLike} Element
    * @typedef {import('../../core/Types').ShapeLike} Shape
@@ -63347,7 +63576,7 @@
     __depends__: [
       InteractionEventsModule$1,
       SelectionModule,
-      Ouline,
+      Outline,
       RulesModule$1,
       DraggingModule,
       PreviewSupportModule
@@ -64923,7 +65152,7 @@
           target = context.target;
 
       // do NOT snap on CMD
-      if (event.originalEvent && isCmd(event.originalEvent)) {
+      if (event.originalEvent && isCmd$1(event.originalEvent)) {
         return;
       }
 
@@ -65362,7 +65591,7 @@
           snapContext = context.snapContext,
           target = context.target;
 
-      if (event.originalEvent && isCmd(event.originalEvent)) {
+      if (event.originalEvent && isCmd$1(event.originalEvent)) {
         return;
       }
 
@@ -65811,7 +66040,7 @@
           direction = context.direction,
           snapContext = context.snapContext;
 
-      if (event.originalEvent && isCmd(event.originalEvent)) {
+      if (event.originalEvent && isCmd$1(event.originalEvent)) {
         return;
       }
 
@@ -66835,6 +67064,20 @@
 
     var outline;
 
+    if (isExternalLabel(element)) {
+      outline = create$1('rect');
+
+      attr$2(outline, assign$2({
+        x: -5,
+        y: -5,
+        rx: 4,
+        width: element.width + DEFAULT_OFFSET * 2,
+        height: element.height + DEFAULT_OFFSET * 2
+      }, OUTLINE_STYLE));
+
+      return outline;
+    }
+
     if (isLabel(element)) {
       return;
     }
@@ -66962,7 +67205,7 @@
 
   var OutlineModule = {
     __depends__: [
-      Ouline
+      Outline
     ],
     __init__: [ 'outlineProvider' ],
     outlineProvider: [ 'type', OutlineProvider ]
@@ -67113,6 +67356,7 @@
     KeyboardModule,
     KeyboardMoveSelectionModule,
     LabelEditingModule,
+    LabelLink,
     ModelingModule,
     ModelingFeedbackModule,
     MoveModule,
@@ -69288,6 +69532,7 @@
           this.deserialize = config.deserialize || (() => {
               throw new Error("This node type doesn't define a deserialize function");
           });
+          this.combine = config.combine || null;
       }
       /**
       This is meant to be used with
@@ -69552,7 +69797,10 @@
                   if (add) {
                       if (!newProps)
                           newProps = Object.assign({}, type.props);
-                      newProps[add[0].id] = add[1];
+                      let value = add[1], prop = add[0];
+                      if (prop.combine && prop.id in newProps)
+                          value = prop.combine(newProps[prop.id], value);
+                      newProps[prop.id] = value;
                   }
               }
               newTypes.push(newProps ? new NodeType(type.name, newProps, type.id, type.flags) : type);
@@ -70025,6 +70273,7 @@
       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 */); }
+      prop(prop) { return this._tree.prop(prop); }
       enter(pos, side, mode = 0) {
           let mounted;
           if (!(mode & IterMode.IgnoreOverlays) && (mounted = MountedTree.get(this._tree)) && mounted.overlay) {
@@ -70118,6 +70367,7 @@
       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 */); }
+      prop(prop) { return this.type.prop(prop); }
       enter(pos, side, mode = 0) {
           if (mode & IterMode.ExcludeBuffers)
               return null;
@@ -70535,7 +70785,7 @@
       function takeNode(parentStart, minPos, children, positions, inRepeat, depth) {
           let { id, start, end, size } = cursor;
           let lookAheadAtStart = lookAhead, contextAtStart = contextHash;
-          while (size < 0) {
+          if (size < 0) {
               cursor.next();
               if (size == -1 /* SpecialRecord.Reuse */) {
                   let node = reused[id];
@@ -70699,7 +70949,7 @@
               fork.next();
               while (fork.pos > startPos) {
                   if (fork.size < 0) {
-                      if (fork.size == -3 /* SpecialRecord.ContextChange */)
+                      if (fork.size == -3 /* SpecialRecord.ContextChange */ || fork.size == -4 /* SpecialRecord.LookAhead */)
                           localSkipped += 4;
                       else
                           break scan;
@@ -71088,8 +71338,15 @@
               }
               else if (!cursor.type.isAnonymous && (nest = this.nest(cursor, this.input)) &&
                   (cursor.from < cursor.to || !nest.overlay)) {
-                  if (!cursor.tree)
+                  if (!cursor.tree) {
                       materialize(cursor);
+                      // materialize create one more level of nesting
+                      // we need to add depth to active overlay for going backwards
+                      if (overlay)
+                          overlay.depth++;
+                      if (covered)
+                          covered.depth++;
+                  }
                   let oldMounts = fragmentCursor.findMounts(cursor.from, nest.parser);
                   if (typeof nest.overlay == "function") {
                       overlay = new ActiveOverlay(nest.parser, nest.overlay, oldMounts, this.inner.length, cursor.from, cursor.tree, overlay);
@@ -71501,9 +71758,7 @@
           var _a;
           let depth = action >> 19 /* Action.ReduceDepthShift */, type = action & 65535 /* Action.ValueMask */;
           let { parser } = this.p;
-          let lookaheadRecord = this.reducePos < this.pos - 25 /* Lookahead.Margin */;
-          if (lookaheadRecord)
-              this.setLookAhead(this.pos);
+          let lookaheadRecord = this.reducePos < this.pos - 25 /* Lookahead.Margin */ && this.setLookAhead(this.pos);
           let dPrec = parser.dynamicPrecedence(type);
           if (dPrec)
               this.score += dPrec;
@@ -71581,7 +71836,7 @@
           }
           else { // There may be skipped nodes that have to be moved forward
               let index = this.buffer.length;
-              if (index > 0 && this.buffer[index - 4] != 0 /* Term.Err */) {
+              if (index > 0 && (this.buffer[index - 4] != 0 /* Term.Err */ || this.buffer[index - 1] < 0)) {
                   let mustMove = false;
                   for (let scan = index; scan > 0 && this.buffer[scan - 2] > end; scan -= 4) {
                       if (this.buffer[scan - 1] >= 0) {
@@ -71894,10 +72149,11 @@
       @internal
       */
       setLookAhead(lookAhead) {
-          if (lookAhead > this.lookAhead) {
-              this.emitLookAhead();
-              this.lookAhead = lookAhead;
-          }
+          if (lookAhead <= this.lookAhead)
+              return false;
+          this.emitLookAhead();
+          this.lookAhead = lookAhead;
+          return true;
       }
       /**
       @internal
@@ -72726,8 +72982,10 @@
                       }
                   }
               }
-              if (newStacks.length > 12 /* Rec.MaxStackCount */)
+              if (newStacks.length > 12 /* Rec.MaxStackCount */) {
+                  newStacks.sort((a, b) => b.score - a.score);
                   newStacks.splice(12 /* Rec.MaxStackCount */, newStacks.length - 12 /* Rec.MaxStackCount */);
+              }
           }
           this.minStackPos = newStacks[0].pos;
           for (let i = 1; i < newStacks.length; i++)
@@ -72828,7 +73086,7 @@
                       continue;
               }
               let force = stack.split(), forceBase = base;
-              for (let j = 0; force.forceReduce() && j < 10 /* Rec.ForceReduceLimit */; j++) {
+              for (let j = 0; j < 10 /* Rec.ForceReduceLimit */ && force.forceReduce(); j++) {
                   if (verbose)
                       console.log(forceBase + this.stackID(force) + " (via force-reduce)");
                   let done = this.advanceFully(force, newStacks);
@@ -73389,7 +73647,7 @@
   For example:
 
   ```javascript
-  parser.withProps(
+  parser.configure({props: [
     styleTags({
       // Style Number and BigNumber nodes
       "Number BigNumber": tags.number,
@@ -73404,7 +73662,7 @@
       // Style the node named "/" as punctuation
       '"/"': tags.punctuation
     })
-  )
+  ]})
   ```
   */
   function styleTags(spec) {
@@ -73446,7 +73704,30 @@
       }
       return ruleNodeProp.add(byName);
   }
-  const ruleNodeProp = new NodeProp();
+  const ruleNodeProp = new NodeProp({
+      combine(a, b) {
+          let cur, root, take;
+          while (a || b) {
+              if (!a || b && a.depth >= b.depth) {
+                  take = b;
+                  b = b.next;
+              }
+              else {
+                  take = a;
+                  a = a.next;
+              }
+              if (cur && cur.mode == take.mode && !take.context && !cur.context)
+                  continue;
+              let copy = new Rule(take.tags, take.mode, take.context);
+              if (cur)
+                  cur.next = copy;
+              else
+                  root = copy;
+              cur = copy;
+          }
+          return root;
+      }
+  });
   class Rule {
       constructor(tags, mode, context, next) {
           this.tags = tags;
@@ -103304,22 +103585,30 @@
   var OpenPopupIcon = function OpenPopupIcon(props) {
     return u("svg", {
       ...props,
-      children: [u("path", {
-        fill: "currentColor",
-        d: "M28 4H10a2.006 2.006 0 0 0-2 2v14a2.006 2.006 0 0 0 2 2h18a2.006 2.006 0 0 0 2-2V6a2.006 2.006 0 0 0-2-2Zm0 16H10V6h18Z"
-      }), u("path", {
-        fill: "currentColor",
-        d: "M18 26H4V16h2v-2H4a2.006 2.006 0 0 0-2 2v10a2.006 2.006 0 0 0 2 2h14a2.006 2.006 0 0 0 2-2v-2h-2Z"
-      })]
+      children: u("path", {
+        d: "M6 15v-1H2.7L7 9.7 6.3 9 2 13.3V10H1v5zm4-14v1h3.3L9 6.3l.7.7L14 2.7V6h1V1z"
+      })
     });
   };
   OpenPopupIcon.defaultProps = {
     xmlns: "http://www.w3.org/2000/svg",
-    width: "16",
-    height: "16",
-    viewBox: "0 0 32 32"
+    viewBox: "0 0 16 16"
   };
 
+  /**
+   * @typedef { {
+   *  getElementLabel: (element: object) => string,
+   *  getTypeLabel: (element: object) => string,
+   *  getElementIcon: (element: object) => import('preact').Component,
+   *  getDocumentationRef: (element: object) => string
+   * } } HeaderProvider
+   */
+
+  /**
+   * @param {Object} props
+   * @param {Object} props.element,
+   * @param {HeaderProvider} props.headerProvider
+   */
   function Header(props) {
     const {
       element,
@@ -103347,11 +103636,9 @@
       }), u("div", {
         class: "bio-properties-panel-header-labels",
         children: [u("div", {
-          title: type,
           class: "bio-properties-panel-header-type",
           children: type
         }), label ? u("div", {
-          title: label,
           class: "bio-properties-panel-header-label",
           children: label
         }) : null]
@@ -103444,6 +103731,26 @@
     return getTooltipForId(id, element);
   }
 
+  /**
+   * @typedef {Object} TooltipProps
+   * @property {Object} [parent] - Parent element ref for portal rendering
+   * @property {String} [direction='right'] - Tooltip direction ( 'right', 'top')
+   * @property {String} [position] - Custom CSS position override
+   * @property {Number} [showDelay=250] - Delay in ms before showing tooltip on hover
+   * @property {Number} [hideDelay=250] - Delay in ms before hiding tooltip when mouse leaves, to avoid multiple tooltips from being opened, this should be the same as showDelay
+   * @property {*} [children] - Child elements to render inside the tooltip wrapper
+   */
+
+  /**
+   * Tooltip wrapper that provides context-based tooltip content lookup.
+   * All props are forwarded to the underlying Tooltip component.
+   *
+   * @param {TooltipProps & {
+   *   forId: String,
+   *   value?: String|Object,
+   *   element?: Object
+   * }} props - Shared tooltip props plus wrapper-specific ones
+   */
   function TooltipWrapper(props) {
     const {
       forId,
@@ -103460,35 +103767,77 @@
       forId: `bio-properties-panel-${forId}`
     });
   }
+
+  /**
+   * @param {TooltipProps & {
+   *   forId: String,
+   *   value: String|Object
+   * }} props
+   */
   function Tooltip(props) {
     const {
       forId,
       value,
       parent,
       direction = 'right',
-      position
+      position,
+      showDelay = 250,
+      hideDelay = 250
     } = props;
     const [visible, setVisible] = h(false);
-
-    // Tooltip will be shown after SHOW_DELAY ms from hovering over the source element.
-    const SHOW_DELAY = 200;
-    let timeout = null;
+    const showTimeoutRef = _(null);
+    const hideTimeoutRef = _(null);
     const wrapperRef = _(null);
     const tooltipRef = _(null);
     const show = (_, delay) => {
+      clearTimeout(showTimeoutRef.current);
+      clearTimeout(hideTimeoutRef.current);
       if (visible) return;
       if (delay) {
-        timeout = setTimeout(() => {
+        showTimeoutRef.current = setTimeout(() => {
           setVisible(true);
-        }, SHOW_DELAY);
+        }, showDelay);
       } else {
         setVisible(true);
       }
     };
-    const hide = () => {
-      clearTimeout(timeout);
-      setVisible(false);
+    const handleWrapperMouseEnter = e => {
+      show(e, true);
+    };
+    const hide = (delay = false) => {
+      clearTimeout(showTimeoutRef.current);
+      clearTimeout(hideTimeoutRef.current);
+      if (delay) {
+        hideTimeoutRef.current = setTimeout(() => {
+          setVisible(false);
+        }, hideDelay);
+      } else {
+        setVisible(false);
+      }
     };
+
+    // Cleanup timeouts on unmount
+    p(() => {
+      return () => {
+        clearTimeout(showTimeoutRef.current);
+        clearTimeout(hideTimeoutRef.current);
+      };
+    }, []);
+
+    // Handle click outside to close tooltip for non-focusable elements
+    p(() => {
+      if (!visible) return;
+      const handleClickOutside = e => {
+        // If clicking outside both the wrapper and tooltip, hide it
+        if (wrapperRef.current && !wrapperRef.current.contains(e.target) && tooltipRef.current && !tooltipRef.current.contains(e.target)) {
+          hide(false);
+        }
+      };
+      document.addEventListener('mousedown', handleClickOutside);
+      return () => {
+        document.removeEventListener('mousedown', handleClickOutside);
+      };
+    }, [visible, hide]);
     const handleMouseLeave = ({
       relatedTarget
     }) => {
@@ -103496,23 +103845,32 @@
       if (relatedTarget === wrapperRef.current || relatedTarget === tooltipRef.current || relatedTarget?.parentElement === tooltipRef.current) {
         return;
       }
-      hide();
+      const selection = window.getSelection();
+      if (selection && selection.toString().length > 0) {
+        // Check if selection is within tooltip content
+        const selectionRange = selection.getRangeAt(0);
+        if (tooltipRef.current?.contains(selectionRange.commonAncestorContainer) || tooltipRef.current?.contains(selection.anchorNode) || tooltipRef.current?.contains(selection.focusNode)) {
+          return; // Keep tooltip open during text selection
+        }
+      }
+      hide(true);
+    };
+    const handleTooltipMouseEnter = () => {
+      clearTimeout(hideTimeoutRef.current);
     };
     const handleFocusOut = e => {
       const {
-        target
+        relatedTarget
       } = e;
 
-      // Don't hide the tooltip if the wrapper or the tooltip itself is clicked.
-      const isHovered = target.matches(':hover') || tooltipRef.current?.matches(':hover');
-      if (target === wrapperRef.current && isHovered) {
-        e.stopPropagation();
+      // Don't hide if focus moved to the tooltip or another element within the wrapper
+      if (tooltipRef.current?.contains(relatedTarget) || wrapperRef.current?.contains(relatedTarget)) {
         return;
       }
-      hide();
+      hide(false);
     };
     const hideTooltipViaEscape = e => {
-      e.code === 'Escape' && hide();
+      e.code === 'Escape' && hide(false);
     };
     const renderTooltip = () => {
       return u("div", {
@@ -103523,6 +103881,7 @@
         style: position || getTooltipPosition(wrapperRef.current),
         ref: tooltipRef,
         onClick: e => e.stopPropagation(),
+        onMouseEnter: handleTooltipMouseEnter,
         onMouseLeave: handleMouseLeave,
         children: [u("div", {
           class: "bio-properties-panel-tooltip-content",
@@ -103536,7 +103895,7 @@
       class: "bio-properties-panel-tooltip-wrapper",
       tabIndex: "0",
       ref: wrapperRef,
-      onMouseEnter: e => show(e, true),
+      onMouseEnter: handleWrapperMouseEnter,
       onMouseLeave: handleMouseLeave,
       onFocus: show,
       onBlur: handleFocusOut,
@@ -103818,6 +104177,9 @@
     return visible;
   }
 
+  /**
+   * @param {import('../PropertiesPanel').GroupDefinition} props
+   */
   function Group(props) {
     const {
       element,
@@ -103872,8 +104234,6 @@
         class: classnames('bio-properties-panel-group-header', edited ? '' : 'empty', open ? 'open' : '', sticky && open ? 'sticky' : ''),
         onClick: toggleOpen,
         children: [u("div", {
-          title: props.tooltip ? null : label,
-          "data-title": label,
           class: "bio-properties-panel-group-header-title",
           children: u(TooltipWrapper, {
             value: props.tooltip,
@@ -104226,6 +104586,12 @@
     }, deps);
   }
 
+  /**
+   * @param {Object} props
+   * @param {Object} props.element
+   * @param {String} props.forId - id of the entry the description is used for
+   * @param {String} props.value
+   */
   function Description(props) {
     const {
       element,
@@ -104357,6 +104723,15 @@
     return `bio-properties-panel-${id}`;
   }
 
+  /**
+   * Button to open popups.
+   *
+   * @param {Object} props
+   * @param {Function} props.onClick - Callback to trigger when the button is clicked.
+   * @param {string} [props.title] - Tooltip text for the button.
+   * @param {boolean} [props.disabled] - Whether the button is disabled.
+   * @param {string} [props.className] - Additional class names for the button.
+   */
   function OpenPopupButton({
     onClick,
     title = 'Open pop-up editor'
@@ -104502,6 +104877,7 @@
       enableGutters,
       value,
       onInput,
+      onKeyDown: onKeyDownProp = noop$4,
       onFeelToggle = noop$4,
       onLint = noop$4,
       onOpenPopup = noop$4,
@@ -104534,6 +104910,8 @@
        * - AND the cursor is at the beginning of the input
        */
       const onKeyDown = e => {
+        // Call parent onKeyDown handler first
+        onKeyDownProp(e);
         if (e.key !== 'Backspace' || !editor) {
           return;
         }
@@ -104606,6 +104984,22 @@
     });
   });
 
+  /**
+   * @param {KeyboardEvent} event
+   * @return {boolean}
+   */
+  function isCmd(event) {
+    // ensure we don't react to AltGr
+    // (mapped to CTRL + ALT)
+    if (event.altKey) {
+      return false;
+    }
+    return event.ctrlKey || event.metaKey;
+  }
+  function isCmdWithChar(event) {
+    return isCmd(event) && event.key.length === 1 && /^[a-zA-Z]$/.test(event.key);
+  }
+
   function ToggleSwitch(props) {
     const {
       id,
@@ -104753,6 +105147,7 @@
       id,
       disabled,
       onInput,
+      onKeyDown,
       value,
       onFocus,
       onBlur,
@@ -104788,6 +105183,7 @@
       class: "bio-properties-panel-input",
       onInput: e => onInput(e.target.value),
       onFocus: onFocus,
+      onKeyDown: onKeyDown,
       onBlur: onBlur,
       placeholder: placeholder,
       value: value || ''
@@ -104960,6 +105356,24 @@
     return `bio-properties-panel-${id}`;
   }
 
+  /**
+   * @typedef { { value: string, label: string, disabled: boolean, children: { value: string, label: string, disabled: boolean } } } Option
+   */
+
+  /**
+   * Provides basic select input.
+   *
+   * @param {object} props
+   * @param {string} props.id
+   * @param {string[]} props.path
+   * @param {string} props.label
+   * @param {Function} props.onChange
+   * @param {Function} props.onFocus
+   * @param {Function} props.onBlur
+   * @param {Array<Option>} [props.options]
+   * @param {string} props.value
+   * @param {boolean} [props.disabled]
+   */
   function Select(props) {
     const {
       id,
@@ -105126,12 +105540,13 @@
       id,
       label,
       debounce,
-      onInput,
+      onInput: commitValue,
       value = '',
       disabled,
       monospace,
       onFocus,
       onBlur,
+      onPaste,
       autoResize = true,
       placeholder,
       rows = autoResize ? 1 : 2,
@@ -105139,16 +105554,16 @@
     } = props;
     const [localValue, setLocalValue] = h(value);
     const ref = useShowEntryEvent(id);
+    const onInput = T$1(newValue => {
+      const newModelValue = newValue === '' ? undefined : newValue;
+      commitValue(newModelValue);
+    }, [commitValue]);
     const visible = useElementVisible(ref.current);
 
     /**
      * @type { import('min-dash').DebouncedFunction }
      */
-    const handleInputCallback = useDebounce(onInput, debounce);
-    const handleInput = newValue => {
-      const newModelValue = newValue === '' ? undefined : newValue;
-      handleInputCallback(newModelValue);
-    };
+    const handleInput = useDebounce(onInput, debounce);
     const handleLocalInput = e => {
       autoResize && resizeToContents(e.target);
       if (e.target.value === localValue) {
@@ -105161,11 +105576,40 @@
       const trimmedValue = e.target.value.trim();
 
       // trim and commit on blur
+      handleInput.cancel?.();
       onInput(trimmedValue);
+      setLocalValue(trimmedValue);
       if (onBlur) {
         onBlur(e);
       }
     };
+    const handleOnPaste = e => {
+      const input = e.target;
+      const isFieldEmpty = !input.value;
+      const isAllSelected = input.selectionStart === 0 && input.selectionEnd === input.value.length;
+
+      // Trim and handle paste if field is empty or all content is selected
+      if (isFieldEmpty || isAllSelected) {
+        const trimmedValue = e.clipboardData.getData('text').trim();
+        setLocalValue(trimmedValue);
+        handleInput(trimmedValue);
+        if (onPaste) {
+          onPaste(e);
+        }
+        e.preventDefault();
+        return;
+      }
+
+      // Allow default paste behavior for normal text editing
+      if (onPaste) {
+        onPaste(e);
+      }
+    };
+    const handleOnKeyDown = e => {
+      if (isCmdWithChar(e)) {
+        handleInput.flush();
+      }
+    };
     y(() => {
       autoResize && resizeToContents(ref.current);
     }, []);
@@ -105197,7 +105641,9 @@
         class: classnames('bio-properties-panel-input', monospace ? 'bio-properties-panel-input-monospace' : '', autoResize ? 'auto-resize' : ''),
         onInput: handleLocalInput,
         onFocus: onFocus,
+        onKeyDown: handleOnKeyDown,
         onBlur: handleOnBlur,
+        onPaste: handleOnPaste,
         placeholder: placeholder,
         rows: rows,
         value: localValue,
@@ -105218,6 +105664,7 @@
    * @param {Function} props.setValue
    * @param {Function} props.onFocus
    * @param {Function} props.onBlur
+   * @param {Function} props.onPaste
    * @param {number} props.rows
    * @param {boolean} props.monospace
    * @param {Function} [props.validate]
@@ -105238,6 +105685,7 @@
       validate,
       onFocus,
       onBlur,
+      onPaste,
       placeholder,
       autoResize,
       tooltip
@@ -105273,6 +105721,7 @@
         onInput: onInput,
         onFocus: onFocus,
         onBlur: onBlur,
+        onPaste: onPaste,
         rows: rows,
         debounce: debounce,
         monospace: monospace,
@@ -105307,32 +105756,57 @@
       disabled = false,
       id,
       label,
-      onInput,
+      onInput: commitValue,
       onFocus,
       onBlur,
+      onPaste,
       placeholder,
       value = '',
       tooltip
     } = props;
     const [localValue, setLocalValue] = h(value || '');
     const ref = useShowEntryEvent(id);
+    const onInput = T$1(newValue => {
+      const newModelValue = newValue === '' ? undefined : newValue;
+      commitValue(newModelValue);
+    }, [commitValue]);
 
     /**
      * @type { import('min-dash').DebouncedFunction }
      */
-    const handleInputCallback = useDebounce(onInput, debounce);
+    const handleInput = useDebounce(onInput, debounce);
     const handleOnBlur = e => {
       const trimmedValue = e.target.value.trim();
 
       // trim and commit on blur
+      handleInput.cancel?.();
       onInput(trimmedValue);
+      setLocalValue(trimmedValue);
       if (onBlur) {
         onBlur(e);
       }
     };
-    const handleInput = newValue => {
-      const newModelValue = newValue === '' ? undefined : newValue;
-      handleInputCallback(newModelValue);
+    const handleOnPaste = e => {
+      const input = e.target;
+      const isFieldEmpty = !input.value;
+      const isAllSelected = input.selectionStart === 0 && input.selectionEnd === input.value.length;
+
+      // Trim and handle paste if field is empty or all content is selected (overwrite)
+      if (isFieldEmpty || isAllSelected) {
+        const trimmedValue = e.clipboardData.getData('text').trim();
+        setLocalValue(trimmedValue);
+        handleInput(trimmedValue);
+        if (onPaste) {
+          onPaste(e);
+        }
+        e.preventDefault();
+        return;
+      }
+
+      // Allow default paste behavior for normal text editing
+      if (onPaste) {
+        onPaste(e);
+      }
     };
     const handleLocalInput = e => {
       if (e.target.value === localValue) {
@@ -105347,6 +105821,11 @@
       }
       setLocalValue(value);
     }, [value]);
+    const handleOnKeyDown = e => {
+      if (isCmdWithChar(e)) {
+        handleInput.flush();
+      }
+    };
     return u("div", {
       class: "bio-properties-panel-textfield",
       children: [u("label", {
@@ -105369,7 +105848,9 @@
         class: "bio-properties-panel-input",
         onInput: handleLocalInput,
         onFocus: onFocus,
+        onKeyDown: handleOnKeyDown,
         onBlur: handleOnBlur,
+        onPaste: handleOnPaste,
         placeholder: placeholder,
         value: localValue
       })]
@@ -105404,6 +105885,7 @@
       validate,
       onFocus,
       onBlur,
+      onPaste,
       placeholder,
       tooltip
     } = props;
@@ -105439,6 +105921,7 @@
         onInput: onInput,
         onFocus: onFocus,
         onBlur: onBlur,
+        onPaste: onPaste,
         placeholder: placeholder,
         value: value,
         tooltip: tooltip,
@@ -105471,7 +105954,7 @@
    * - If `debounceDelay` is `false`, the function executes immediately without debouncing.
    * - If a number is provided, the function execution is delayed by the given time in milliseconds.
    *
-   * @param { Boolean | Number } [debounceDelay=300]
+   * @param { Boolean | Number } [debounceDelay=600]
    *
    * @example
    * const debounce = debounceInput();
@@ -105791,6 +106274,24 @@
     event.stopPropagation();
   }
 
+  /**
+   * @typedef {Object} FeelPopupProps
+   * @property {string} entryId
+   * @property {Function} onInput
+   * @property {Function} onClose
+   * @property {string} title
+   * @property {'feel'|'feelers'} type
+   * @property {string} value
+   * @property {Array} [links]
+   * @property {Array|Object} [variables]
+   * @property {Object} [position]
+   * @property {string} [hostLanguage]
+   * @property {boolean} [singleLine]
+   * @property {HTMLElement} [sourceElement]
+   * @property {HTMLElement|string} [tooltipContainer]
+   * @property {Object} [eventBus]
+   */
+
   const FEEL_POPUP_WIDTH = 700;
   const FEEL_POPUP_HEIGHT = 250;
 
@@ -107649,17 +108150,17 @@
       };
     }, [selectedElement]);
 
-    // (2c) root element changed
+    // (2c) import done
     p(() => {
-      const onRootAdded = e => {
-        const element = e.element;
-        _update(element);
+      const onImportDone = () => {
+        const rootElement = canvas.getRootElement();
+        _update(rootElement);
       };
-      eventBus.on('root.added', onRootAdded);
+      eventBus.on('import.done', onImportDone);
       return () => {
-        eventBus.off('root.added', onRootAdded);
+        eventBus.off('import.done', onImportDone);
       };
-    }, [selectedElement]);
+    }, []);
 
     // (2d) provided entries changed
     p(() => {
@@ -108129,7 +108630,7 @@
     }, {
       id: 'cancelRemainingInstances',
       component: CancelRemainingInstances,
-      isEdited: isEdited$8
+      isEdited: node => node && !node.checked // the default value is true
     }];
   }
   function CompletionCondition$3(props) {
@@ -109898,6 +110399,13 @@
     });
   }
 
+  /**
+   * @typedef { import('@bpmn-io/properties-panel').EntryDefinition } Entry
+   */
+
+  /**
+   * @returns {Array<Entry>} entries
+   */
   function TimerProps$2(props) {
     const {
       element,