camunda-bpmn-js 4.9.0 → 4.11.0

package/dist/base-modeler.development.js

@@ -65138,7 +65138,7 @@
    * @return {SearchResult[]}
    */
   BpmnSearchProvider.prototype.find = function(pattern) {
-    var rootElement = this._canvas.getRootElement();
+    var rootElements = this._canvas.getRootElements();
 
     var elements = this._elementRegistry.filter(function(element) {
       if (element.labelTarget) {
@@ -65149,7 +65149,7 @@
 
     // do not include root element
     elements = filter$1(elements, function(element) {
-      return element !== rootElement;
+      return !rootElements.includes(element);
     });
 
     elements = map$3(elements, function(element) {
@@ -69204,6 +69204,8 @@
           var _a;
           let depth = action >> 19 /* Action.ReduceDepthShift */, type = action & 65535 /* Action.ValueMask */;
           let { parser } = this.p;
+          if (this.reducePos < this.pos - 25 /* Lookahead.Margin */)
+              this.setLookAhead(this.pos);
           let dPrec = parser.dynamicPrecedence(type);
           if (dPrec)
               this.score += dPrec;
@@ -70083,8 +70085,8 @@
           if (!(side < 0 ? cursor.childBefore(pos) : cursor.childAfter(pos)))
               for (;;) {
                   if ((side < 0 ? cursor.to < pos : cursor.from > pos) && !cursor.type.isError)
-                      return side < 0 ? Math.max(0, Math.min(cursor.to - 1, pos - 25 /* Safety.Margin */))
-                          : Math.min(tree.length, Math.max(cursor.from + 1, pos + 25 /* Safety.Margin */));
+                      return side < 0 ? Math.max(0, Math.min(cursor.to - 1, pos - 25 /* Lookahead.Margin */))
+                          : Math.min(tree.length, Math.max(cursor.from + 1, pos + 25 /* Lookahead.Margin */));
                   if (side < 0 ? cursor.prevSibling() : cursor.nextSibling())
                       break;
                   if (!cursor.parent())
@@ -70202,7 +70204,7 @@
                   token.mask = mask;
                   token.context = context;
               }
-              if (token.lookAhead > token.end + 25 /* Safety.Margin */)
+              if (token.lookAhead > token.end + 25 /* Lookahead.Margin */)
                   lookAhead = Math.max(token.lookAhead, lookAhead);
               if (token.value != 0 /* Term.Err */) {
                   let startIndex = actionIndex;
@@ -71825,8 +71827,13 @@
   /* global console,process */
 
 
+  // @ts-expect-error env access
   const LOG_PARSE = typeof process != 'undefined' && process.env && /\bfparse(:dbg)?\b/.test(process.env.LOG);
+
+  // @ts-expect-error env access
   const LOG_PARSE_DEBUG = typeof process != 'undefined' && process.env && /\bfparse:dbg\b/.test(process.env.LOG);
+
+  // @ts-expect-error env access
   const LOG_VARS = typeof process != 'undefined' && process.env && /\bcontext\b/.test(process.env.LOG);
 
   const spaceChars = [
@@ -72220,7 +72227,7 @@
     }
 
     /**
-     * @param { Function }
+     * @param { Function } fn
      *
      * @return { ValueProducer }
      */
@@ -72279,11 +72286,13 @@
     get(key) {
       const result = this.value[key];
 
-      if (this.constructor.isAtomic(result)) {
+      const constructor = /** @type { typeof VariableContext } */ (this.constructor);
+
+      if (constructor.isAtomic(result)) {
         return result;
       }
 
-      return this.constructor.of(result);
+      return constructor.of(result);
     }
 
     /**
@@ -72291,10 +72300,14 @@
      *
      * @param {String} key
      * @param {any} value
+     *
      * @returns {VariableContext} new context with the given key added
      */
     set(key, value) {
-      return this.constructor.of({
+
+      const constructor = /** @type { typeof VariableContext } */ (this.constructor);
+
+      return constructor.of({
         ...this.value,
         [key]: value
       });
@@ -72352,9 +72365,9 @@
       tokens = [],
       children = [],
       parent = null,
-      context,
-      value,
-      raw
+      context = null,
+      value = null,
+      raw = null
     } = {}) {
       this.name = name;
       this.tokens = tokens;
@@ -72500,6 +72513,9 @@
 
     pushChildren(children) {
 
+      /**
+       * @type {Variables}
+       */
       let parent = this;
 
       for (const child of children) {
@@ -72619,7 +72635,7 @@
    * Wrap children of variables under the given named child.
    *
    * @param { Variables } variables
-   * @param { string } name
+   * @param { string } scopeName
    * @param { string } code
    * @return { Variables }
    */
@@ -72741,6 +72757,7 @@
             .assign({ context: newContext || currentContext });
         }
 
+        // @ts-expect-error internal method
         const code = input.read(input.pos, stack.pos);
 
         const end = contextEnds[term];
@@ -72948,7 +72965,7 @@
     function: tags$1.definitionKeyword,
     as: tags$1.keyword,
     'Type/...': tags$1.typeName,
-    Wildcard: tags$1.special,
+    Wildcard: tags$1.special(tags$1.variableName),
     null: tags$1.null,
     LineComment: tags$1.lineComment,
     BlockComment: tags$1.blockComment,
@@ -72989,7 +73006,7 @@
     tokenData: "+l~RuXY#fYZ$ZZ[#f]^$Zpq#fqr$`rs$kwx&cxy&hyz&mz{&r{|'P|}'U}!O'Z!O!P'h!P!Q(Q!Q![){![!]*^!]!^*c!^!_*h!_!`$f!`!a*w!b!c+R!}#O+W#P#Q+]#Q#R&z#o#p+b#q#r+g$f$g#f#BY#BZ#f$IS$I_#f$I|$I}$Z$I}$JO$Z$JT$JU#f$KV$KW#f&FU&FV#f?HT?HU#f~#kY#q~XY#fZ[#fpq#f$f$g#f#BY#BZ#f$IS$I_#f$JT$JU#f$KV$KW#f&FU&FV#f?HT?HU#f~$`O#r~~$cP!_!`$f~$kOr~~$pW$h~OY$kZr$krs%Ys#O$k#O#P%_#P;'S$k;'S;=`&]<%lO$k~%_O$h~~%bRO;'S$k;'S;=`%k;=`O$k~%pX$h~OY$kZr$krs%Ys#O$k#O#P%_#P;'S$k;'S;=`&];=`<%l$k<%lO$k~&`P;=`<%l$k~&hO#z~~&mOv~~&rOx~~&wP^~z{&z~'PO_~~'UO[~~'ZO#}~R'`PZP!`!a'cQ'hO$]Q~'mQ#y~!O!P's!Q!['x~'xO#|~~'}P$g~!Q!['x~(VQ]~z{(]!P!Q)d~(`TOz(]z{(o{;'S(];'S;=`)^<%lO(]~(rVOz(]z{(o{!P(]!P!Q)X!Q;'S(];'S;=`)^<%lO(]~)^OQ~~)aP;=`<%l(]~)iSP~OY)dZ;'S)d;'S;=`)u<%lO)d~)xP;=`<%l)d~*QQ$g~!O!P*W!Q![){~*ZP!Q!['x~*cO$Z~~*hO$q~R*oP![QsP!_!`*rP*wOsPR+OP!XQsP!_!`*r~+WO$j~~+]O!h~~+bO!f~~+gO#R~~+lO#Q~",
     tokenizers: [propertyIdentifiers, identifiers, insertSemicolon, 0, 1],
     topRules: {"Expression":[0,3],"Expressions":[1,101],"UnaryTests":[2,102]},
-    dynamicPrecedences: {"31":-1,"71":-1,"73":-1},
+    dynamicPrecedences: {"31":-1,"67":1,"71":-1,"73":-1},
     specialized: [{term: 121, get: (value) => spec_identifier[value] || -1}],
     tokenPrec: 2500
   });
@@ -85424,6 +85441,51 @@
       themeSpec[".cm-content"] = { caretColor: "transparent !important" };
   }
 
+  let Placeholder$1 = class Placeholder extends WidgetType {
+      constructor(content) {
+          super();
+          this.content = content;
+      }
+      toDOM() {
+          let wrap = document.createElement("span");
+          wrap.className = "cm-placeholder";
+          wrap.style.pointerEvents = "none";
+          wrap.appendChild(typeof this.content == "string" ? document.createTextNode(this.content) : this.content);
+          if (typeof this.content == "string")
+              wrap.setAttribute("aria-label", "placeholder " + this.content);
+          else
+              wrap.setAttribute("aria-hidden", "true");
+          return wrap;
+      }
+      coordsAt(dom) {
+          let rects = dom.firstChild ? clientRectsFor(dom.firstChild) : [];
+          if (!rects.length)
+              return null;
+          let style = window.getComputedStyle(dom.parentNode);
+          let rect = flattenRect(rects[0], style.direction != "rtl");
+          let lineHeight = parseInt(style.lineHeight);
+          if (rect.bottom - rect.top > lineHeight * 1.5)
+              return { left: rect.left, right: rect.right, top: rect.top, bottom: rect.top + lineHeight };
+          return rect;
+      }
+      ignoreEvent() { return false; }
+  };
+  /**
+  Extension that enables a placeholder—a piece of example content
+  to show when the editor is empty.
+  */
+  function placeholder(content) {
+      return ViewPlugin.fromClass(class {
+          constructor(view) {
+              this.view = view;
+              this.placeholder = content
+                  ? Decoration.set([Decoration.widget({ widget: new Placeholder$1(content), side: 1 }).range(0)])
+                  : Decoration.none;
+          }
+          get decorations() { return this.view.state.doc.length ? Decoration.none : this.placeholder; }
+      }, { decorations: v => v.decorations });
+  }
+
   const Outside = "-10000px";
   class TooltipViewManager {
       constructor(view, facet, createTooltipView, removeTooltipView) {
@@ -94133,176 +94195,182 @@
 
   var lint = linter$1(cmFeelersLinter());
 
-  /**
-   * Creates a Feelers editor in the supplied container.
-   *
-   * @param {Object} config Configuration options for the Feelers editor.
-   * @param {DOMNode} [config.container] The DOM node that will contain the editor.
-   * @param {DOMNode|String} [config.tooltipContainer] The DOM node or CSS selector string for the tooltip container.
-   * @param {String} [config.hostLanguage] The host language for the editor (e.g., 'markdown').
-   * @param {Object} [config.hostLanguageParser] A custom parser for the host language.
-   * @param {Function} [config.onChange] Callback function that is called when the editor's content changes.
-   * @param {Function} [config.onKeyDown] Callback function that is called when a key is pressed within the editor.
-   * @param {Function} [config.onLint] Callback function that is called when linting messages are available.
-   * @param {Object} [config.contentAttributes] Additional attributes to set on the editor's content element.
-   * @param {Boolean} [config.readOnly] Set to true to make the editor read-only.
-   * @param {String} [config.value] Initial value of the editor.
-   * @param {Boolean} [config.enableGutters] Set to true to enable gutter decorations (e.g., line numbers).
-   * @param {Boolean} [config.darkMode] Set to true to use the dark theme for the editor.
-   *
-   * @returns {Object} editor An instance of the FeelersEditor class.
-   */
-  function FeelersEditor({
-    container,
-    tooltipContainer,
-    hostLanguage,
-    hostLanguageParser,
-    onChange = () => { },
-    onKeyDown = () => { },
-    onLint = () => { },
-    contentAttributes = { },
-    readOnly = false,
-    value = '',
-    enableGutters = false,
-    singleLine = false,
-    darkMode = false
-  }) {
-
-    const changeHandler = EditorView.updateListener.of((update) => {
-      if (update.docChanged) {
-        onChange(update.state.doc.toString());
-      }
-    });
-
-    const lintHandler = EditorView.updateListener.of((update) => {
-      const diagnosticEffects = update.transactions
-        .flatMap(t => t.effects)
-        .filter(effect => effect.is(setDiagnosticsEffect));
-
-      if (!diagnosticEffects.length) {
-        return;
-      }
-
-      const messages = diagnosticEffects.flatMap(effect => effect.value);
-
-      onLint(messages);
-    });
-
-    const contentAttributesExtension = EditorView.contentAttributes.of(contentAttributes);
-
-    const keyHandler = EditorView.domEventHandlers(
-      {
-        keydown: onKeyDown
-      }
-    );
-
-    if (typeof tooltipContainer === 'string') {
-      // eslint-disable-next-line no-undef
-      tooltipContainer = document.querySelector(tooltipContainer);
-    }
-
-    const tooltipLayout = tooltipContainer ? tooltips({
-      tooltipSpace: function() {
-        return tooltipContainer.getBoundingClientRect();
-      }
-    }) : [];
-
-    const _getHostLanguageParser = (hostLanguage) => {
-      switch (hostLanguage) {
-      case 'markdown':
-        return parser$1;
-      default:
-        return null;
-      }
-    };
-
-    const feelersLanguageSupport = createFeelersLanguageSupport(hostLanguageParser || hostLanguage && _getHostLanguageParser(hostLanguage));
-
-    const extensions = [
-      bracketMatching(),
-      changeHandler,
-      contentAttributesExtension,
-      closeBrackets(),
-      indentOnInput(),
-      keyHandler,
-      keymap.of([
-        ...defaultKeymap,
-      ]),
-      feelersLanguageSupport,
-      lint,
-      lintHandler,
-      tooltipLayout,
-      darkMode ? darkTheme : lightTheme,
-      ...(enableGutters ? [
-
-        // todo: adjust folding boundaries first foldGutter(),
-        lineNumbers()
-      ] : []),
-      ...(singleLine ? [
-        EditorState.transactionFilter.of(tr => tr.newDoc.lines > 1 ? [] : tr)
-      ] : [])
-    ];
-
-    if (readOnly) {
-      extensions.push(EditorView.editable.of(false));
-    }
-
-    if (singleLine && value) {
-      value = value.toString().split('\n')[0];
-    }
-
-    this._cmEditor = new EditorView({
-      state: EditorState.create({
-        doc: value,
-        extensions: extensions
-      }),
-      parent: container
-    });
-
-    return this;
-  }
-
-  /**
-   * Replaces the content of the Editor
-   *
-   * @param {String} value
-   */
-  FeelersEditor.prototype.setValue = function(value) {
-    this._cmEditor.dispatch({
-      changes: {
-        from: 0,
-        to: this._cmEditor.state.doc.length,
-        insert: value,
-      }
-    });
-  };
-
-  /**
-   * Sets the focus in the editor.
-   */
-  FeelersEditor.prototype.focus = function(position) {
-    const cmEditor = this._cmEditor;
-
-    // the Codemirror `focus` method always calls `focus` with `preventScroll`,
-    // so we have to focus + scroll manually
-    cmEditor.contentDOM.focus();
-    cmEditor.focus();
-
-    if (typeof position === 'number') {
-      const end = cmEditor.state.doc.length;
-      cmEditor.dispatch({ selection: { anchor: position <= end ? position : end } });
-    }
-  };
-
-  /**
-   * Returns the current selection ranges. If no text is selected, a single
-   * range with the start and end index at the cursor position will be returned.
-   *
-   * @returns {Object} selection
-   * @returns {Array} selection.ranges
-   */
-  FeelersEditor.prototype.getSelection = function() {
-    return this._cmEditor.state.selection;
+  /**
+   * Creates a Feelers editor in the supplied container.
+   *
+   * @param {Object} config Configuration options for the Feelers editor.
+   * @param {DOMNode} [config.container] The DOM node that will contain the editor.
+   * @param {DOMNode|String} [config.tooltipContainer] The DOM node or CSS selector string for the tooltip container.
+   * @param {String} [config.hostLanguage] The host language for the editor (e.g., 'markdown').
+   * @param {Object} [config.hostLanguageParser] A custom parser for the host language.
+   * @param {Function} [config.onChange] Callback function that is called when the editor's content changes.
+   * @param {Function} [config.onKeyDown] Callback function that is called when a key is pressed within the editor.
+   * @param {Function} [config.onLint] Callback function that is called when linting messages are available.
+   * @param {Object} [config.contentAttributes] Additional attributes to set on the editor's content element.
+   * @param {Boolean} [config.readOnly] Set to true to make the editor read-only.
+   * @param {String} [config.value] Initial value of the editor.
+   * @param {Boolean} [config.enableGutters] Set to true to enable gutter decorations (e.g., line numbers).
+   * @param {Boolean} [config.singleLine] Set to true to limit the editor to a single line.
+   * @param {Boolean} [config.lineWrap] Set to true to enable line wrapping.
+   * @param {Boolean} [config.darkMode] Set to true to use the dark theme for the editor.
+   *
+   * @returns {Object} editor An instance of the FeelersEditor class.
+   */
+  function FeelersEditor({
+    container,
+    tooltipContainer,
+    hostLanguage,
+    hostLanguageParser,
+    onChange = () => { },
+    onKeyDown = () => { },
+    onLint = () => { },
+    contentAttributes = { },
+    readOnly = false,
+    value = '',
+    enableGutters = false,
+    singleLine = false,
+    lineWrap = false,
+    darkMode = false
+  }) {
+
+    const changeHandler = EditorView.updateListener.of((update) => {
+      if (update.docChanged) {
+        onChange(update.state.doc.toString());
+      }
+    });
+
+    const lintHandler = EditorView.updateListener.of((update) => {
+      const diagnosticEffects = update.transactions
+        .flatMap(t => t.effects)
+        .filter(effect => effect.is(setDiagnosticsEffect));
+
+      if (!diagnosticEffects.length) {
+        return;
+      }
+
+      const messages = diagnosticEffects.flatMap(effect => effect.value);
+
+      onLint(messages);
+    });
+
+    const contentAttributesExtension = EditorView.contentAttributes.of(contentAttributes);
+
+    const keyHandler = EditorView.domEventHandlers(
+      {
+        keydown: onKeyDown
+      }
+    );
+
+    if (typeof tooltipContainer === 'string') {
+      // eslint-disable-next-line no-undef
+      tooltipContainer = document.querySelector(tooltipContainer);
+    }
+
+    const tooltipLayout = tooltipContainer ? tooltips({
+      tooltipSpace: function() {
+        return tooltipContainer.getBoundingClientRect();
+      }
+    }) : [];
+
+    const _getHostLanguageParser = (hostLanguage) => {
+      switch (hostLanguage) {
+      case 'markdown':
+        return parser$1;
+      default:
+        return null;
+      }
+    };
+
+    const feelersLanguageSupport = createFeelersLanguageSupport(hostLanguageParser || hostLanguage && _getHostLanguageParser(hostLanguage));
+
+    const extensions = [
+      bracketMatching(),
+      changeHandler,
+      contentAttributesExtension,
+      closeBrackets(),
+      indentOnInput(),
+      keyHandler,
+      keymap.of([
+        ...defaultKeymap,
+      ]),
+      feelersLanguageSupport,
+      lint,
+      lintHandler,
+      tooltipLayout,
+      darkMode ? darkTheme : lightTheme,
+      ...(enableGutters ? [
+
+        // todo: adjust folding boundaries first foldGutter(),
+        lineNumbers()
+      ] : []),
+      ...(singleLine ? [
+        EditorState.transactionFilter.of(tr => tr.newDoc.lines > 1 ? [] : tr)
+      ] : []),
+      ...(lineWrap ? [
+        EditorView.lineWrapping
+      ] : [])
+    ];
+
+    if (readOnly) {
+      extensions.push(EditorView.editable.of(false));
+    }
+
+    if (singleLine && value) {
+      value = value.toString().split('\n')[0];
+    }
+
+    this._cmEditor = new EditorView({
+      state: EditorState.create({
+        doc: value,
+        extensions: extensions
+      }),
+      parent: container
+    });
+
+    return this;
+  }
+
+  /**
+   * Replaces the content of the Editor
+   *
+   * @param {String} value
+   */
+  FeelersEditor.prototype.setValue = function(value) {
+    this._cmEditor.dispatch({
+      changes: {
+        from: 0,
+        to: this._cmEditor.state.doc.length,
+        insert: value,
+      }
+    });
+  };
+
+  /**
+   * Sets the focus in the editor.
+   */
+  FeelersEditor.prototype.focus = function(position) {
+    const cmEditor = this._cmEditor;
+
+    // the Codemirror `focus` method always calls `focus` with `preventScroll`,
+    // so we have to focus + scroll manually
+    cmEditor.contentDOM.focus();
+    cmEditor.focus();
+
+    if (typeof position === 'number') {
+      const end = cmEditor.state.doc.length;
+      cmEditor.dispatch({ selection: { anchor: position <= end ? position : end } });
+    }
+  };
+
+  /**
+   * Returns the current selection ranges. If no text is selected, a single
+   * range with the start and end index at the cursor position will be returned.
+   *
+   * @returns {Object} selection
+   * @returns {Array} selection.ranges
+   */
+  FeelersEditor.prototype.getSelection = function() {
+    return this._cmEditor.state.selection;
   };
 
   /**
@@ -95167,12 +95235,7 @@
 
     const variables = context.state.facet(variablesFacet)[0];
 
-    const options = variables.map(v => ({
-      label: v.name,
-      type: 'variable',
-      info: v.info,
-      detail: v.detail
-    }));
+    const options = variables.map(v => createVariableSuggestion(v));
 
     // In most cases, use what is typed before the cursor
     let nodeBefore = syntaxTree(context.state).resolve(context.pos, -1);
@@ -95205,6 +95268,55 @@
     return result;
   };
 
+  /**
+   * @param {import('..').Variable} variable
+   * @returns {import('@codemirror/autocomplete').Completion}
+   */
+  function createVariableSuggestion(variable) {
+    if (variable.type === 'function') {
+      return createFunctionVariable(variable);
+    }
+
+    return {
+      label: variable.name,
+      type: 'variable',
+      info: variable.info,
+      detail: variable.detail
+    };
+  }
+
+  /**
+   * @param {import('..').Variable} variable
+   * @returns {import('@codemirror/autocomplete').Completion}
+   */
+  function createFunctionVariable(variable) {
+    const {
+      name,
+      info,
+      detail,
+      params = []
+    } = variable;
+
+    const paramsWithNames = params.map(({ name, type }, index) => ({
+      name: name || `param ${index + 1}`,
+      type
+    }));
+
+    const template = `${name}(${paramsWithNames.map(p => '${' + p.name + '}').join(', ')})`;
+
+    const paramsSignature = paramsWithNames.map(({ name, type }) => (
+      type ? `${name}: ${type}` : name
+    )).join(', ');
+    const label = `${name}(${paramsSignature})`;
+
+    return snippetCompletion(template, {
+      label,
+      type: 'function',
+      info,
+      detail
+    });
+  }
+
   function autocompletion() {
     return [
       autocompletion$1({
@@ -95301,15 +95413,18 @@
 
   /**
    * @typedef {object} Variable
-   * @typedef {import('@codemirror/state').Extension} Extension
    * @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
+   * @property {Array<Variable>} [schema] array of child variables if the variable is a context or list
+   * @property {'function'|'variable'} [type] type of the variable
+   * @property {Array<{name: string, type: string}>} [params] function parameters
    */
 
   const autocompletionConf = new Compartment();
+  const placeholderConf = new Compartment();
+
 
   /**
    * Creates a FEEL editor in the supplied container
@@ -95335,6 +95450,7 @@
     onChange = () => {},
     onKeyDown = () => {},
     onLint = () => {},
+    placeholder: placeholder$1 = '',
     readOnly = false,
     value = '',
     variables = []
@@ -95391,6 +95507,7 @@
       language(),
       linter,
       lintHandler,
+      placeholderConf.of(placeholder(placeholder$1)),
       tooltipLayout,
       theme,
       ...editorExtensions
@@ -95465,6 +95582,17 @@
     });
   };
 
+  /**
+   * Update placeholder text.
+   * @param {string} placeholder
+   * @returns {void}
+   */
+  FeelEditor.prototype.setPlaceholder = function(placeholder$1) {
+    this._cmEditor.dispatch({
+      effects: placeholderConf.reconfigure(placeholder(placeholder$1))
+    });
+  };
+
   /*!
   * tabbable 6.2.0
   * @license MIT, https://github.com/focus-trap/tabbable/blob/master/LICENSE
@@ -97049,6 +97177,21 @@
     height: "16",
     viewBox: "0 0 32 32"
   };
+  var CloseIcon = function CloseIcon(props) {
+    return u("svg", {
+      ...props,
+      children: u("path", {
+        fillRule: "evenodd",
+        d: "m12 4.7-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8 12 4.7Z",
+        fill: "currentColor"
+      })
+    });
+  };
+  CloseIcon.defaultProps = {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "16",
+    height: "16"
+  };
 
   function Header(props) {
     const {
@@ -97759,7 +97902,8 @@
         tooltipContainer,
         enableGutters,
         hostLanguage,
-        singleLine
+        singleLine,
+        lineWrap: true
       });
       setEditor(editor);
       return () => {
@@ -97796,7 +97940,7 @@
         title: "Open pop-up editor",
         class: "bio-properties-panel-open-feel-popup",
         onClick: () => onPopupOpen('feelers'),
-        children: u(ExternalLinkIcon, {})
+        children: u(PopupIcon, {})
       })]
     });
   });
@@ -97837,6 +97981,7 @@
       onFeelToggle = noop$5,
       onLint = noop$5,
       onPopupOpen = noop$5,
+      placeholder,
       popupOpen,
       disabled,
       tooltipContainer,
@@ -97873,6 +98018,7 @@
         onChange: handleInput,
         onKeyDown: onKeyDown,
         onLint: onLint,
+        placeholder: placeholder,
         tooltipContainer: tooltipContainer,
         value: localValue,
         variables: variables,
@@ -97902,6 +98048,12 @@
       }
       editor.setVariables(variables);
     }, [variables]);
+    p(() => {
+      if (!editor) {
+        return;
+      }
+      editor.setPlaceholder(placeholder);
+    }, [placeholder]);
     const handleClick = () => {
       ref.current.focus();
     };
@@ -98111,6 +98263,9 @@
       draggable,
       emit = () => {},
       title,
+      showCloseButton = false,
+      closeButtonTooltip = 'Close popup',
+      onClose,
       ...rest
     } = props;
 
@@ -98181,7 +98336,12 @@
       }), u("div", {
         class: "bio-properties-panel-popup__title",
         children: title
-      }), children]
+      }), children, showCloseButton && u("button", {
+        title: closeButtonTooltip,
+        class: "bio-properties-panel-popup__close",
+        onClick: onClose,
+        children: u(CloseIcon, {})
+      })]
     });
   }
   function Body(props) {
@@ -98399,6 +98559,9 @@
       children: [u(Popup.Title, {
         title: title,
         emit: emit,
+        showCloseButton: true,
+        closeButtonTooltip: "Save and close",
+        onClose: onClose,
         draggable: true,
         children: [type === 'feel' && u("a", {
           href: "https://docs.camunda.io/docs/components/modeler/feel/what-is-feel/",
@@ -98440,14 +98603,6 @@
             tooltipContainer: tooltipContainer
           })]
         })
-      }), u(Popup.Footer, {
-        children: u("button", {
-          type: "button",
-          onClick: () => onClose(),
-          title: "Close pop-up editor",
-          class: "bio-properties-panel-feel-popup__close-btn",
-          children: "Close"
-        })
       })]
     });
   }
@@ -98621,7 +98776,8 @@
       onInput,
       value,
       onFocus,
-      onBlur
+      onBlur,
+      placeholder
     } = props;
     const inputRef = _();
 
@@ -98654,6 +98810,7 @@
       onInput: e => onInput(e.target.value),
       onFocus: onFocus,
       onBlur: onBlur,
+      placeholder: placeholder,
       value: value || ''
     });
   });
@@ -98711,7 +98868,8 @@
       onInput,
       value,
       onFocus,
-      onBlur
+      onBlur,
+      placeholder
     } = props;
     const inputRef = _();
 
@@ -98739,6 +98897,7 @@
       onInput: e => onInput(e.target.value),
       onFocus: onFocus,
       onBlur: onBlur,
+      placeholder: placeholder,
       value: value || '',
       "data-gramm": "false"
     });
@@ -99379,6 +99538,7 @@
       onFocus,
       onBlur,
       autoResize,
+      placeholder,
       rows = autoResize ? 1 : 2,
       tooltip
     } = props;
@@ -99421,6 +99581,7 @@
         onInput: handleInput,
         onFocus: onFocus,
         onBlur: onBlur,
+        placeholder: placeholder,
         rows: rows,
         value: localValue,
         disabled: disabled,
@@ -99460,6 +99621,7 @@
       validate,
       onFocus,
       onBlur,
+      placeholder,
       autoResize,
       tooltip
     } = props;
@@ -99495,6 +99657,7 @@
         debounce: debounce,
         monospace: monospace,
         disabled: disabled,
+        placeholder: placeholder,
         autoResize: autoResize,
         tooltip: tooltip,
         element: element
@@ -99527,6 +99690,7 @@
       onInput,
       onFocus,
       onBlur,
+      placeholder,
       value = '',
       tooltip
     } = props;
@@ -99568,6 +99732,7 @@
         onInput: handleInput,
         onFocus: onFocus,
         onBlur: onBlur,
+        placeholder: placeholder,
         value: localValue
       })]
     });
@@ -99601,6 +99766,7 @@
       validate,
       onFocus,
       onBlur,
+      placeholder,
       tooltip
     } = props;
     const globalError = useError(id);
@@ -99632,6 +99798,7 @@
         onInput: onInput,
         onFocus: onFocus,
         onBlur: onBlur,
+        placeholder: placeholder,
         value: value,
         tooltip: tooltip,
         element: element