@bpmn-io/form-js-playground 1.0.0-alpha.2 → 1.0.0-alpha.3

package/dist/form-playground.umd.js

@@ -49278,26 +49278,26 @@
     }(simpleExpressionTree);
   };
 
-  /**
-   * Get the variable name at the specified index in a given path expression.
-   *
-   * @param {Object} root - The root node of the path expression tree.
-   * @param {number} index - The index of the variable name to retrieve.
-   * @returns {string|null} The variable name at the specified index or null if index is out of bounds.
+  /**
+   * Get the variable name at the specified index in a given path expression.
+   *
+   * @param {Object} root - The root node of the path expression tree.
+   * @param {number} index - The index of the variable name to retrieve.
+   * @returns {string|null} The variable name at the specified index or null if index is out of bounds.
    */
   const _getVariableNameAtPathIndex = (root, index) => {
     const accessors = _deconstructPathExpression(root);
     return accessors[index] || null;
   };
 
-  /**
-   * Extracts the variables which are required of the external context for a given path expression.
-   * This is done by traversing the path expression tree and keeping track of the current depth relative to the external context.
-   *
-   * @param {Object} node - The root node of the path expression tree.
-   * @param {number} initialDepth - The depth at which the root node is located in the outer context.
-   * @param {Object} specialDepthAccessors - Definitions of special keywords which represent more complex accesses of the outer context.
-   * @returns {Set} - A set containing the extracted variable names.
+  /**
+   * Extracts the variables which are required of the external context for a given path expression.
+   * This is done by traversing the path expression tree and keeping track of the current depth relative to the external context.
+   *
+   * @param {Object} node - The root node of the path expression tree.
+   * @param {number} initialDepth - The depth at which the root node is located in the outer context.
+   * @param {Object} specialDepthAccessors - Definitions of special keywords which represent more complex accesses of the outer context.
+   * @returns {Set} - A set containing the extracted variable names.
    */
   const _smartExtractVariableNames = (node, initialDepth, specialDepthAccessors) => {
     // depth info represents the previous (initialised as null) and current depth of the current accessor in the path expression
@@ -49343,11 +49343,11 @@
     return new Set(extractedVariables);
   };
 
-  /**
-   * Deconstructs a path expression tree into an array of components.
-   *
-   * @param {Object} root - The root node of the path expression tree.
-   * @returns {Array<string>} An array of components in the path expression, in the correct order.
+  /**
+   * Deconstructs a path expression tree into an array of components.
+   *
+   * @param {Object} root - The root node of the path expression tree.
+   * @returns {Array<string>} An array of components in the path expression, in the correct order.
    */
   const _deconstructPathExpression = root => {
     let node = root;
@@ -49366,13 +49366,13 @@
     return parts.reverse();
   };
 
-  /**
-   * Builds a simplified feel structure tree from the given parse tree and feel string.
-   * The nodes follow this structure: `{ name: string, children: Array, variableName?: string }`
-   *
-   * @param {Object} parseTree - The parse tree generated by a parser.
-   * @param {string} feelString - The feel string used for parsing.
-   * @returns {Object} The simplified feel structure tree.
+  /**
+   * Builds a simplified feel structure tree from the given parse tree and feel string.
+   * The nodes follow this structure: `{ name: string, children: Array, variableName?: string }`
+   *
+   * @param {Object} parseTree - The parse tree generated by a parser.
+   * @param {string} feelString - The feel string used for parsing.
+   * @returns {Object} The simplified feel structure tree.
    */
   const _buildSimpleFeelStructureTree = (parseTree, feelString) => {
     const stack = [{
@@ -49402,25 +49402,25 @@
       this._eventBus = eventBus;
     }
 
-    /**
-     * Determines if the given value is a FEEL expression.
-     *
-     * @param {any} value
-     * @returns {boolean}
-     *
+    /**
+     * Determines if the given value is a FEEL expression.
+     *
+     * @param {any} value
+     * @returns {boolean}
+     *
      */
     isExpression(value) {
       return isString$4(value) && value.startsWith('=');
     }
 
-    /**
-     * Retrieve variable names from a given FEEL expression.
-     *
-     * @param {string} expression
-     * @param {object} [options]
-     * @param {string} [options.type]
-     *
-     * @returns {string[]}
+    /**
+     * Retrieve variable names from a given FEEL expression.
+     *
+     * @param {string} expression
+     * @param {object} [options]
+     * @param {string} [options.type]
+     *
+     * @returns {string[]}
      */
     getVariableNames(expression, options = {}) {
       const {
@@ -49435,13 +49435,13 @@
       return getFlavouredFeelVariableNames(expression, type);
     }
 
-    /**
-     * Evaluate an expression.
-     *
-     * @param {string} expression
-     * @param {import('../../types').Data} [data]
-     *
-     * @returns {any}
+    /**
+     * Evaluate an expression.
+     *
+     * @param {string} expression
+     * @param {import('../../types').Data} [data]
+     *
+     * @returns {any}
      */
     evaluate(expression, data = {}) {
       if (!expression) {
@@ -49465,23 +49465,23 @@
   class FeelersTemplating {
     constructor() {}
 
-    /**
-     * Determines if the given value is a feelers template.
-     *
-     * @param {any} value
-     * @returns {boolean}
-     *
+    /**
+     * Determines if the given value is a feelers template.
+     *
+     * @param {any} value
+     * @returns {boolean}
+     *
      */
     isTemplate(value) {
       return isString$4(value) && (value.startsWith('=') || /{{.*?}}/.test(value));
     }
 
-    /**
-     * Retrieve variable names from a given feelers template.
-     *
-     * @param {string} template
-     *
-     * @returns {string[]}
+    /**
+     * Retrieve variable names from a given feelers template.
+     *
+     * @param {string} template
+     *
+     * @returns {string[]}
      */
     getVariableNames(template) {
       if (!this.isTemplate(template)) {
@@ -49507,17 +49507,17 @@
       }, []);
     }
 
-    /**
-     * Evaluate a template.
-     *
-     * @param {string} template
-     * @param {Object<string, any>} context
-     * @param {Object} options
-     * @param {boolean} [options.debug = false]
-     * @param {boolean} [options.strict = false]
-     * @param {Function} [options.buildDebugString]
-     *
-     * @returns
+    /**
+     * Evaluate a template.
+     *
+     * @param {string} template
+     * @param {Object<string, any>} context
+     * @param {Object} options
+     * @param {boolean} [options.debug = false]
+     * @param {boolean} [options.strict = false]
+     * @param {Function} [options.buildDebugString]
+     *
+     * @returns
      */
     evaluate(template, context = {}, options = {}) {
       const {
@@ -49532,22 +49532,22 @@
       });
     }
 
-    /**
-    * @typedef {Object} ExpressionWithDepth
-    * @property {number} depth - The depth of the expression in the syntax tree.
-    * @property {string} expression - The extracted expression
+    /**
+    * @typedef {Object} ExpressionWithDepth
+    * @property {number} depth - The depth of the expression in the syntax tree.
+    * @property {string} expression - The extracted expression
     */
 
-    /**
-    * Extracts all feel expressions in the template along with their depth in the syntax tree.
-    * The depth is incremented for child expressions of loops to account for context drilling.
-    * @name extractExpressionsWithDepth
-    * @param {string} template - A feelers template string.
-    * @returns {Array<ExpressionWithDepth>} An array of objects, each containing the depth and the extracted expression.
-    *
-    * @example
-    * const template = "Hello {{user}}, you have:{{#loop items}}\n- {{amount}} {{name}}{{/loop}}.";
-    * const extractedExpressions = _extractExpressionsWithDepth(template);
+    /**
+    * Extracts all feel expressions in the template along with their depth in the syntax tree.
+    * The depth is incremented for child expressions of loops to account for context drilling.
+     * @name extractExpressionsWithDepth
+    * @param {string} template - A feelers template string.
+    * @returns {Array<ExpressionWithDepth>} An array of objects, each containing the depth and the extracted expression.
+    *
+    * @example
+    * const template = "Hello {{user}}, you have:{{#loop items}}\n- {{amount}} {{name}}{{/loop}}.";
+    * const extractedExpressions = _extractExpressionsWithDepth(template);
     */
     _extractExpressionsWithDepth(template) {
       // build simplified feelers syntax tree
@@ -49578,9 +49578,9 @@
   }
   FeelersTemplating.$inject = [];
 
-  /**
-   * @typedef {object} Condition
-   * @property {string} [hide]
+  /**
+   * @typedef {object} Condition
+   * @property {string} [hide]
    */
 
   class ConditionChecker {
@@ -49589,11 +49589,11 @@
       this._eventBus = eventBus;
     }
 
-    /**
-     * For given data, remove properties based on condition.
-     *
-     * @param {Object<string, any>} properties
-     * @param {Object<string, any>} data
+    /**
+     * For given data, remove properties based on condition.
+     *
+     * @param {Object<string, any>} properties
+     * @param {Object<string, any>} data
      */
     applyConditions(properties, data = {}) {
       const conditions = this._getConditions();
@@ -49612,13 +49612,13 @@
       return newProperties;
     }
 
-    /**
-     * Check if given condition is met. Returns null for invalid/missing conditions.
-     *
-     * @param {string} condition
-     * @param {import('../../types').Data} [data]
-     *
-     * @returns {boolean|null}
+    /**
+     * Check if given condition is met. Returns null for invalid/missing conditions.
+     *
+     * @param {string} condition
+     * @param {import('../../types').Data} [data]
+     *
+     * @returns {boolean|null}
      */
     check(condition, data = {}) {
       if (!condition) {
@@ -49639,12 +49639,12 @@
       }
     }
 
-    /**
-     * Check if hide condition is met.
-     *
-     * @param {Condition} condition
-     * @param {Object<string, any>} data
-     * @returns {boolean}
+    /**
+     * Check if hide condition is met.
+     *
+     * @param {Condition} condition
+     * @param {Object<string, any>} data
+     * @returns {boolean}
      */
     _checkHideCondition(condition, data) {
       if (!condition.hide) {
@@ -49685,12 +49685,12 @@
       this._converter = new showdownExports.Converter();
     }
 
-    /**
-     * Render markdown to HTML.
-     *
-     * @param {string} markdown - The markdown to render
-     *
-     * @returns {string} HTML
+    /**
+     * Render markdown to HTML.
+     *
+     * @param {string} markdown - The markdown to render
+     *
+     * @returns {string} HTML
      */
     render(markdown) {
       return this._converter.makeHtml(markdown);
@@ -50341,23 +50341,23 @@
   };
   FormFieldRegistry$1.$inject = ['eventBus'];
 
-  /**
-   * @typedef { { id: String, components: Array<String> } } FormRow
-   * @typedef { { formFieldId: String, rows: Array<FormRow> } } FormRows
+  /**
+   * @typedef { { id: String, components: Array<String> } } FormRow
+   * @typedef { { formFieldId: String, rows: Array<FormRow> } } FormRows
    */
 
-  /**
-   * Maintains the Form layout in a given structure, for example
-   *
-   *  [
-   *    {
-   *      formFieldId: 'FormField_1',
-   *      rows: [
-   *        { id: 'Row_1', components: [ 'Text_1', 'Textdield_1', ... ]  }
-   *      ]
-   *    }
-   *  ]
-   *
+  /**
+   * Maintains the Form layout in a given structure, for example
+   *
+   *  [
+   *    {
+   *      formFieldId: 'FormField_1',
+   *      rows: [
+   *        { id: 'Row_1', components: [ 'Text_1', 'Textdield_1', ... ]  }
+   *      ]
+   *    }
+   *  ]
+   *
    */
   class FormLayouter {
     constructor(eventBus) {
@@ -50367,8 +50367,8 @@
       this._eventBus = eventBus;
     }
 
-    /**
-     * @param {FormRow} row
+    /**
+     * @param {FormRow} row
      */
     addRow(formFieldId, row) {
       let rowsPerComponent = this._rows.find(r => r.formFieldId === formFieldId);
@@ -50382,18 +50382,18 @@
       rowsPerComponent.rows.push(row);
     }
 
-    /**
-     * @param {String} id
-     * @returns {FormRow}
+    /**
+     * @param {String} id
+     * @returns {FormRow}
      */
     getRow(id) {
       const rows = allRows(this._rows);
       return rows.find(r => r.id === id);
     }
 
-    /**
-     * @param {any} formField
-     * @returns {FormRow}
+    /**
+     * @param {any} formField
+     * @returns {FormRow}
      */
     getRowForField(formField) {
       return allRows(this._rows).find(r => {
@@ -50404,9 +50404,9 @@
       });
     }
 
-    /**
-     * @param {String} formFieldId
-     * @returns { Array<FormRow> }
+    /**
+     * @param {String} formFieldId
+     * @returns { Array<FormRow> }
      */
     getRows(formFieldId) {
       const rowsForField = this._rows.find(r => formFieldId === r.formFieldId);
@@ -50416,15 +50416,15 @@
       return rowsForField.rows;
     }
 
-    /**
-     * @returns {string}
+    /**
+     * @returns {string}
      */
     nextRowId() {
       return this._ids.nextPrefixed('Row_');
     }
 
-    /**
-     * @param {any} formField
+    /**
+     * @param {any} formField
      */
     calculateLayout(formField) {
       const {
@@ -50478,9 +50478,9 @@
     });
   }
 
-  /**
-   * @param {Array<FormRows>} formRows
-   * @returns {Array<FormRow>}
+  /**
+   * @param {Array<FormRows>} formRows
+   * @returns {Array<FormRow>}
    */
   function allRows(formRows) {
     return flatten$3(formRows.map(c => c.rows));
@@ -50556,10 +50556,10 @@
     return injector;
   }
 
-  /**
-   * @param {string?} prefix
-   *
-   * @returns Element
+  /**
+   * @param {string?} prefix
+   *
+   * @returns Element
    */
   function createFormContainer(prefix = 'fjs') {
     const container = document.createElement('div');
@@ -50590,22 +50590,22 @@
     return `${type}${generateIndexForType(type)}`;
   }
 
-  /**
-   * @template T
-   * @param {T} data
-   * @param {(this: any, key: string, value: any) => any} [replacer]
-   * @return {T}
+  /**
+   * @template T
+   * @param {T} data
+   * @param {(this: any, key: string, value: any) => any} [replacer]
+   * @return {T}
    */
   function clone(data, replacer) {
     return JSON.parse(JSON.stringify(data, replacer));
   }
 
-  /**
-   * Parse the schema for input variables a form might make use of
-   *
-   * @param {any} schema
-   *
-   * @return {string[]}
+  /**
+   * Parse the schema for input variables a form might make use of
+   *
+   * @param {any} schema
+   *
+   * @return {string[]}
    */
   function getSchemaVariables(schema, expressionLanguage = new FeelExpressionLanguage(null), templating = new FeelersTemplating()) {
     if (!schema.components) {
@@ -50656,11 +50656,11 @@
     return Array.from(new Set(variables));
   }
   let Importer$1 = class Importer {
-    /**
-     * @constructor
-     * @param { import('../core').FormFieldRegistry } formFieldRegistry
-     * @param { import('../render/FormFields').default } formFields
-     * @param { import('../core').FormLayouter } formLayouter
+    /**
+     * @constructor
+     * @param { import('../core').FormFieldRegistry } formFieldRegistry
+     * @param { import('../render/FormFields').default } formFields
+     * @param { import('../core').FormLayouter } formLayouter
      */
     constructor(formFieldRegistry, formFields, formLayouter) {
       this._formFieldRegistry = formFieldRegistry;
@@ -50668,15 +50668,15 @@
       this._formLayouter = formLayouter;
     }
 
-    /**
-     * Import schema adding `id`, `_parent` and `_path`
-     * information to each field and adding it to the
-     * form field registry.
-     *
-     * @param {any} schema
-     * @param {any} [data]
-     *
-     * @return { { warnings: Array<any>, schema: any, data: any } }
+    /**
+     * Import schema adding `id`, `_parent` and `_path`
+     * information to each field and adding it to the
+     * form field registry.
+     *
+     * @param {any} schema
+     * @param {any} [data]
+     *
+     * @return { { warnings: Array<any>, schema: any, data: any } }
      */
     importSchema(schema, data = {}) {
       // TODO: Add warnings - https://github.com/bpmn-io/form-js/issues/289
@@ -50697,11 +50697,11 @@
       }
     }
 
-    /**
-     * @param {any} formField
-     * @param {string} [parentId]
-     *
-     * @return {any} importedField
+    /**
+     * @param {any} formField
+     * @param {string} [parentId]
+     *
+     * @return {any} importedField
      */
     importFormField(formField, parentId) {
       const {
@@ -50752,10 +50752,10 @@
       });
     }
 
-    /**
-     * @param {Object} data
-     *
-     * @return {Object} initializedData
+    /**
+     * @param {Object} data
+     *
+     * @return {Object} initializedData
      */
     initializeFieldValues(data) {
       return this._formFieldRegistry.getAll().reduce((initializedData, formField) => {
@@ -50889,11 +50889,11 @@
   });
   var FormRenderContext$1 = FormRenderContext;
 
-  /**
-   * @param {string} type
-   * @param {boolean} [strict]
-   *
-   * @returns {any}
+  /**
+   * @param {string} type
+   * @param {boolean} [strict]
+   *
+   * @returns {any}
    */
   function getService$1(type, strict) {}
   const FormContext = D$1({
@@ -50908,10 +50908,10 @@
     return getService(type, strict);
   }
 
-  /**
-   * Returns the conditionally filtered data of a form reactively.
-   * Memoised to minimize re-renders
-   *
+  /**
+   * Returns the conditionally filtered data of a form reactively.
+   * Memoised to minimize re-renders
+   *
    */
   function useFilteredFormData() {
     const {
@@ -50928,12 +50928,12 @@
     }, [conditionChecker, data, initialData]);
   }
 
-  /**
-   * Evaluate if condition is met reactively based on the conditionChecker and form data.
-   *
-   * @param {string | undefined} condition
-   *
-   * @returns {boolean} true if condition is met or no condition or condition checker exists
+  /**
+   * Evaluate if condition is met reactively based on the conditionChecker and form data.
+   *
+   * @param {string | undefined} condition
+   *
+   * @returns {boolean} true if condition is met or no condition or condition checker exists
    */
   function useCondition(condition) {
     const conditionChecker = useService$1('conditionChecker', false);
@@ -50943,13 +50943,13 @@
     }, [conditionChecker, condition, filteredData]);
   }
 
-  /**
-   * Evaluate a string reactively based on the expressionLanguage and form data.
-   * If the string is not an expression, it is returned as is.
-   * Memoised to minimize re-renders.
-   *
-   * @param {string} value
-   *
+  /**
+   * Evaluate a string reactively based on the expressionLanguage and form data.
+   * If the string is not an expression, it is returned as is.
+   * Memoised to minimize re-renders.
+   *
+   * @param {string} value
+   *
    */
   function useExpressionEvaluation(value) {
     const formData = useFilteredFormData();
@@ -50977,16 +50977,16 @@
     });
   }
 
-  /**
-   * Retrieve readonly value of a form field, given it can be an
-   * expression optionally or configured globally.
-   *
-   * @typedef { import('../../types').FormProperties } FormProperties
-   *
-   * @param {any} formField
-   * @param {FormProperties} properties
-   *
-   * @returns {boolean}
+  /**
+   * Retrieve readonly value of a form field, given it can be an
+   * expression optionally or configured globally.
+   *
+   * @typedef { import('../../types').FormProperties } FormProperties
+   *
+   * @param {any} formField
+   * @param {FormProperties} properties
+   *
+   * @returns {boolean}
    */
   function useReadonly(formField, properties = {}) {
     const expressionLanguage = useService$1('expressionLanguage');
@@ -51004,16 +51004,16 @@
     return readonly || false;
   }
 
-  /**
-   * Template a string reactively based on form data. If the string is not a template, it is returned as is.
-   * Memoised to minimize re-renders
-   *
-   * @param {string} value
-   * @param {Object} options
-   * @param {boolean} [options.debug = false]
-   * @param {boolean} [options.strict = false]
-   * @param {Function} [options.buildDebugString]
-   *
+  /**
+   * Template a string reactively based on form data. If the string is not a template, it is returned as is.
+   * Memoised to minimize re-renders
+   *
+   * @param {string} value
+   * @param {Object} options
+   * @param {boolean} [options.debug = false]
+   * @param {boolean} [options.strict = false]
+   * @param {Function} [options.buildDebugString]
+   *
    */
   function useTemplateEvaluation(value, options) {
     const filteredData = useFilteredFormData();
@@ -51026,17 +51026,17 @@
     }, [filteredData, templating, value, options]);
   }
 
-  /**
-   * Template a string reactively based on form data. If the string is not a template, it is returned as is.
-   * If the string contains multiple lines, only the first line is returned.
-   * Memoised to minimize re-renders
-   *
-   * @param {string} value
-   * @param {Object} [options]
-   * @param {boolean} [options.debug = false]
-   * @param {boolean} [options.strict = false]
-   * @param {Function} [options.buildDebugString]
-   *
+  /**
+   * Template a string reactively based on form data. If the string is not a template, it is returned as is.
+   * If the string contains multiple lines, only the first line is returned.
+   * Memoised to minimize re-renders
+   *
+   * @param {string} value
+   * @param {Object} [options]
+   * @param {boolean} [options.debug = false]
+   * @param {boolean} [options.strict = false]
+   * @param {Function} [options.buildDebugString]
+   *
    */
   function useSingleLineTemplateEvaluation(value, options = {}) {
     const evaluatedTemplate = useTemplateEvaluation(value, options);
@@ -51219,8 +51219,8 @@
     return value || value === 0 || value === false;
   }
 
-  /**
-   * @enum { String }
+  /**
+   * @enum { String }
    */
   const LOAD_STATES = {
     LOADING: 'loading',
@@ -51228,17 +51228,17 @@
     ERROR: 'error'
   };
 
-  /**
-   * @typedef {Object} ValuesGetter
-   * @property {Object[]} values - The values data
-   * @property {(LOAD_STATES)} state - The values data's loading state, to use for conditional rendering
+  /**
+   * @typedef {Object} ValuesGetter
+   * @property {Object[]} values - The values data
+   * @property {(LOAD_STATES)} state - The values data's loading state, to use for conditional rendering
    */
 
-  /**
-   * A hook to load values for single and multiselect components.
-   *
-   * @param {Object} field - The form field to handle values for
-   * @return {ValuesGetter} valuesGetter - A values getter object providing loading state and values
+  /**
+   * A hook to load values for single and multiselect components.
+   *
+   * @param {Object} field - The form field to handle values for
+   * @return {ValuesGetter} valuesGetter - A values getter object providing loading state and values
    */
   function useValuesAsync(field) {
     const {
@@ -52368,10 +52368,10 @@
     }
   };
 
-  /**
-   * This file must not be changed or exchanged.
-   *
-   * @see http://bpmn.io/license for more information.
+  /**
+   * This file must not be changed or exchanged.
+   *
+   * @see http://bpmn.io/license for more information.
    */
   function Logo() {
     return e$1("svg", {
@@ -52501,11 +52501,11 @@
 
   const FORM_ELEMENT = document.createElement('form');
 
-  /**
-   * Sanitize a HTML string and return the cleaned, safe version.
-   *
-   * @param {string} html
-   * @return {string}
+  /**
+   * Sanitize a HTML string and return the cleaned, safe version.
+   *
+   * @param {string} html
+   * @return {string}
    */
 
   // see https://github.com/developit/snarkdown/issues/70
@@ -52523,29 +52523,29 @@
     }
   }
 
-  /**
-   * Sanitizes an image source to ensure we only allow for data URI and links
-   * that start with http(s).
-   *
-   * Note: Most browsers anyway do not support script execution in <img> elements.
-   *
-   * @param {string} src
-   * @returns {string}
+  /**
+   * Sanitizes an image source to ensure we only allow for data URI and links
+   * that start with http(s).
+   *
+   * Note: Most browsers anyway do not support script execution in <img> elements.
+   *
+   * @param {string} src
+   * @returns {string}
    */
   function sanitizeImageSource(src) {
     const valid = ALLOWED_IMAGE_SRC_PATTERN.test(src);
     return valid ? src : '';
   }
 
-  /**
-   * Recursively sanitize a HTML node, potentially
-   * removing it, its children or attributes.
-   *
-   * Inspired by https://github.com/developit/snarkdown/issues/70
-   * and https://github.com/cure53/DOMPurify. Simplified
-   * for our use-case.
-   *
-   * @param {Element} node
+  /**
+   * Recursively sanitize a HTML node, potentially
+   * removing it, its children or attributes.
+   *
+   * Inspired by https://github.com/developit/snarkdown/issues/70
+   * and https://github.com/cure53/DOMPurify. Simplified
+   * for our use-case.
+   *
+   * @param {Element} node
    */
   function sanitizeNode(node) {
     // allow text nodes
@@ -52589,13 +52589,13 @@
     }
   }
 
-  /**
-   * Validates attributes for validity.
-   *
-   * @param {string} lcTag
-   * @param {string} lcName
-   * @param {string} value
-   * @return {boolean}
+  /**
+   * Validates attributes for validity.
+   *
+   * @param {string} lcTag
+   * @param {string} lcName
+   * @param {string} value
+   * @return {boolean}
    */
   function isValidAttribute(lcTag, lcName, value) {
     // disallow most attributes based on whitelist
@@ -58558,10 +58558,10 @@
     return fn.apply(null, args);
   }
 
-  /**
-   * A factory to create a configurable debouncer.
-   *
-   * @param {number|boolean} [config=true]
+  /**
+   * A factory to create a configurable debouncer.
+   *
+   * @param {number|boolean} [config=true]
    */
   function DebounceFactory(config = true) {
     const timeout = typeof config === 'number' ? config : config ? 300 : 0;
@@ -58573,11 +58573,11 @@
   }
   DebounceFactory.$inject = ['config.debounce'];
   class FieldFactory {
-    /**
-     * @constructor
-     *
-     * @param { import('./FormFieldRegistry').default } formFieldRegistry
-     * @param { import('@bpmn-io/form-js-viewer').FormFields } formFields
+    /**
+     * @constructor
+     *
+     * @param { import('./FormFieldRegistry').default } formFieldRegistry
+     * @param { import('@bpmn-io/form-js-viewer').FormFields } formFields
      */
     constructor(formFieldRegistry, formFields) {
       this._formFieldRegistry = formFieldRegistry;
@@ -58639,11 +58639,11 @@
   }
   FieldFactory.$inject = ['formFieldRegistry', 'formFields'];
   class FormFieldRegistry extends FormFieldRegistry$1 {
-    /**
-     * Updates a form fields id.
-     *
-     * @param {Object} formField
-     * @param {string} newId
+    /**
+     * Updates a form fields id.
+     *
+     * @param {Object} formField
+     * @param {string} newId
      */
     updateId(formField, newId) {
       this._validateId(newId);
@@ -58664,13 +58664,13 @@
       }
     }
 
-    /**
-     * Validate the suitability of the given id and signals a problem
-     * with an exception.
-     *
-     * @param {string} id
-     *
-     * @throws {Error} if id is empty or already assigned
+    /**
+     * Validate the suitability of the given id and signals a problem
+     * with an exception.
+     *
+     * @param {string} id
+     *
+     * @throws {Error} if id is empty or already assigned
      */
     _validateId(id) {
       if (!id) {
@@ -58686,11 +58686,11 @@
   const MIN_COLUMNS = 2;
   const MAX_FIELDS_PER_ROW = 4;
   class FormLayoutValidator {
-    /**
-     * @constructor
-     *
-     * @param { import('./FormLayouter').default } formLayouter
-     * @param { import('./FormFieldRegistry').default } formFieldRegistry
+    /**
+     * @constructor
+     *
+     * @param { import('./FormLayouter').default } formLayouter
+     * @param { import('./FormFieldRegistry').default } formFieldRegistry
      */
     constructor(formLayouter, formFieldRegistry) {
       this._formLayouter = formLayouter;
@@ -58749,11 +58749,11 @@
     return MAX_COLUMNS_PER_ROW - autoCols * 2;
   }
   class Importer {
-    /**
-     * @constructor
-     * @param { import('../core/FormFieldRegistry').default } formFieldRegistry
-     * @param { import('../core/FieldFactory').default } fieldFactory
-     * @param { import('../core/FormLayouter').default } formLayouter
+    /**
+     * @constructor
+     * @param { import('../core/FormFieldRegistry').default } formFieldRegistry
+     * @param { import('../core/FieldFactory').default } fieldFactory
+     * @param { import('../core/FormLayouter').default } formLayouter
      */
     constructor(formFieldRegistry, fieldFactory, formLayouter) {
       this._formFieldRegistry = formFieldRegistry;
@@ -58761,21 +58761,21 @@
       this._formLayouter = formLayouter;
     }
 
-    /**
-     * Import schema creating rows, fields, attaching additional
-     * information to each field and adding fields to the
-     * field registry.
-     *
-     * Additional information attached:
-     *
-     *   * `id` (unless present)
-     *   * `_parent`
-     *   * `_path`
-     *
-     * @param {any} schema
-     *
-     * @typedef {{ warnings: Error[], schema: any }} ImportResult
-     * @returns {ImportResult}
+    /**
+     * Import schema creating rows, fields, attaching additional
+     * information to each field and adding fields to the
+     * field registry.
+     *
+     * Additional information attached:
+     *
+     *   * `id` (unless present)
+     *   * `_parent`
+     *   * `_path`
+     *
+     * @param {any} schema
+     *
+     * @typedef {{ warnings: Error[], schema: any }} ImportResult
+     * @returns {ImportResult}
      */
     importSchema(schema) {
       // TODO: Add warnings
@@ -58793,12 +58793,12 @@
       }
     }
 
-    /**
-     * @param {{[x: string]: any}} fieldAttrs
-     * @param {String} [parentId]
-     * @param {number} [index]
-     *
-     * @return {any} field
+    /**
+     * @param {{[x: string]: any}} fieldAttrs
+     * @param {String} [parentId]
+     * @param {number} [index]
+     *
+     * @return {any} field
      */
     importFormField(fieldAttrs, parentId, index) {
       const {
@@ -58835,11 +58835,11 @@
       return field;
     }
 
-    /**
-     * @param {Array<any>} components
-     * @param {string} parentId
-     *
-     * @return {Array<any>} imported components
+    /**
+     * @param {Array<any>} components
+     * @param {string} parentId
+     *
+     * @return {Array<any>} imported components
      */
     importFormFields(components, parentId) {
       return components.map((component, index) => {
@@ -58862,22 +58862,22 @@
     });
   }
 
-  /**
-   * Add a dragger that calls back the passed function with
-   * { event, delta } on drag.
-   *
-   * @example
-   *
-   * function dragMove(event, delta) {
-   *   // we are dragging (!!)
-   * }
-   *
-   * domElement.addEventListener('dragstart', dragger(dragMove));
-   *
-   * @param {Function} fn
-   * @param {Element} dragPreview
-   *
-   * @return {Function} drag start callback function
+  /**
+   * Add a dragger that calls back the passed function with
+   * { event, delta } on drag.
+   *
+   * @example
+   *
+   * function dragMove(event, delta) {
+   *   // we are dragging (!!)
+   * }
+   *
+   * domElement.addEventListener('dragstart', dragger(dragMove));
+   *
+   * @param {Function} fn
+   * @param {Element} dragPreview
+   *
+   * @return {Function} drag start callback function
    */
   function createDragger(fn, dragPreview) {
     let self;
@@ -58918,12 +58918,12 @@
     return onDragStart;
   }
 
-  /**
-   * Throttle function call according UI update cycle.
-   *
-   * @param  {Function} fn
-   *
-   * @return {Function} throttled fn
+  /**
+   * Throttle function call according UI update cycle.
+   *
+   * @param  {Function} fn
+   *
+   * @return {Function} throttled fn
    */
   function throttle(fn) {
     let active = false;
@@ -58951,11 +58951,11 @@
   });
   var DragAndDropContext$1 = DragAndDropContext;
 
-  /**
-   * @param {string} type
-   * @param {boolean} [strict]
-   *
-   * @returns {any}
+  /**
+   * @param {string} type
+   * @param {boolean} [strict]
+   *
+   * @returns {any}
    */
   function getService(type, strict) {}
   const FormEditorContext = D$1({
@@ -59197,10 +59197,12 @@
       eventBus.on(`${section}.attach`, onAttach);
       eventBus.on(`${section}.detach`, onDetach);
       eventBus.on(`${section}.reset`, onReset);
+      eventBus.fire(`${section}.section.rendered`);
       return () => {
         eventBus.off(`${section}.attach`, onAttach);
         eventBus.off(`${section}.detach`, onDetach);
         eventBus.off(`${section}.reset`, onReset);
+        eventBus.fire(`${section}.section.destroyed`);
       };
     }, [eventBus, section]);
     y(() => {
@@ -59279,23 +59281,23 @@
     return fillsAndSeparators;
   };
 
-  /**
-   * Creates a Fragment for a fill.
-   *
-   * @param {Object} fill Fill to be rendered
-   * @returns {Object} Preact Fragment containing fill's children
+  /**
+   * Creates a Fragment for a fill.
+   *
+   * @param {Object} fill Fill to be rendered
+   * @returns {Object} Preact Fragment containing fill's children
    */
   const FillFragment = fill => e$1(d$1, {
     children: fill.children
   }, fill.id);
 
-  /**
-   * Creates an array of fills, with separators inserted between groups.
-   *
-   * @param {Array} groups Groups of fills
-   * @param {Function} fillRenderer Function to create a fill
-   * @param {Function} separatorRenderer Function to create a separator
-   * @returns {Array} Array of fills and separators
+  /**
+   * Creates an array of fills, with separators inserted between groups.
+   *
+   * @param {Array} groups Groups of fills
+   * @param {Function} fillRenderer Function to create a fill
+   * @param {Function} separatorRenderer Function to create a separator
+   * @returns {Array} Array of fills and separators
    */
   const buildFills = (groups, fillRenderer, separatorRenderer) => {
     const result = [];
@@ -59313,8 +59315,8 @@
     return result;
   };
 
-  /**
-   * Groups fills by group name property.
+  /**
+   * Groups fills by group name property.
    */
   const _groupByGroupName = fills => {
     const groups = [];
@@ -59334,8 +59336,8 @@
     return Object.keys(groupsById).sort().map(id => groupsById[id]);
   };
 
-  /**
-   * Compares fills by priority.
+  /**
+   * Compares fills by priority.
    */
   const _comparePriority = (a, b) => {
     return (b.priority || 0) - (a.priority || 0);
@@ -62085,10 +62087,10 @@
     return `bio-properties-panel-${id}`;
   }
 
-  /**
-   * Retrieve list of variables from the form schema.
-   *
-   * @returns { string[] } list of variables used in form schema
+  /**
+   * Retrieve list of variables from the form schema.
+   *
+   * @returns { string[] } list of variables used in form schema
    */
   function useVariables() {
     const form = useService('formEditor');
@@ -62175,8 +62177,8 @@
     }
   };
 
-  /**
-   * Provide placeholders for empty and multiple state.
+  /**
+   * Provide placeholders for empty and multiple state.
    */
   const PropertiesPanelPlaceholderProvider = {
     getEmpty: () => {
@@ -63663,14 +63665,14 @@
 
   // helpers //////////
 
-  /**
-   * Returns copy of object with updated value.
-   *
-   * @param {Object} properties
-   * @param {string} key
-   * @param {string} value
-   *
-   * @returns {Object}
+  /**
+   * Returns copy of object with updated value.
+   *
+   * @param {Object} properties
+   * @param {string} key
+   * @param {string} value
+   *
+   * @returns {Object}
    */
   function updateValue(properties, key, value) {
     return {
@@ -63679,14 +63681,14 @@
     };
   }
 
-  /**
-   * Returns copy of object with updated key.
-   *
-   * @param {Object} properties
-   * @param {string} oldKey
-   * @param {string} newKey
-   *
-   * @returns {Object}
+  /**
+   * Returns copy of object with updated key.
+   *
+   * @param {Object} properties
+   * @param {string} oldKey
+   * @param {string} newKey
+   *
+   * @returns {Object}
    */
   function updateKey(properties, oldKey, newKey) {
     return Object.entries(properties).reduce((newProperties, entry) => {
@@ -64369,8 +64371,8 @@
     };
     const valuesSourceId = `${fieldId}-valuesSource`;
 
-    /**
-     * @type {Array<Group|ListGroup>}
+    /**
+     * @type {Array<Group|ListGroup>}
      */
     const groups = [{
       id: valuesSourceId,
@@ -64471,13 +64473,13 @@
 
   // helpers //////////
 
-  /**
-   * Returns copy of object without key.
-   *
-   * @param {Object} properties
-   * @param {string} oldKey
-   *
-   * @returns {Object}
+  /**
+   * Returns copy of object without key.
+   *
+   * @param {Object} properties
+   * @param {string} oldKey
+   *
+   * @returns {Object}
    */
   function removeKey(properties, oldKey) {
     return Object.entries(properties).reduce((newProperties, entry) => {
@@ -64585,9 +64587,9 @@
     }, []);
     h(() => {
       const onFieldChanged = () => {
-        /**
-         * TODO(pinussilvestrus): update with actual updated element,
-         * once we have a proper updater/change support
+        /**
+         * TODO(pinussilvestrus): update with actual updated element,
+         * once we have a proper updater/change support
          */
         _update(selection.get() || schema);
       };
@@ -64655,19 +64657,19 @@
   const DRAG_NO_MOVE_CLS = 'fjs-no-move';
   const ERROR_DROP_CLS = 'fjs-error-drop';
 
-  /**
-   * @typedef { { id: String, components: Array<any> } } FormRow
+  /**
+   * @typedef { { id: String, components: Array<any> } } FormRow
    */
 
   class Dragging {
-    /**
-     * @constructor
-     *
-     * @param { import('../../core/FormFieldRegistry').default } formFieldRegistry
-     * @param { import('../../core/FormLayouter').default } formLayouter
-     * @param { import('../../core/FormLayoutValidator').default } formLayoutValidator
-     * @param { import('../../core/EventBus').default } eventBus
-     * @param { import('../modeling/Modeling').default } modeling
+    /**
+     * @constructor
+     *
+     * @param { import('../../core/FormFieldRegistry').default } formFieldRegistry
+     * @param { import('../../core/FormLayouter').default } formLayouter
+     * @param { import('../../core/FormLayoutValidator').default } formLayoutValidator
+     * @param { import('../../core/EventBus').default } eventBus
+     * @param { import('../modeling/Modeling').default } modeling
      */
     constructor(formFieldRegistry, formLayouter, formLayoutValidator, eventBus, modeling) {
       this._formFieldRegistry = formFieldRegistry;
@@ -64677,13 +64679,13 @@
       this._modeling = modeling;
     }
 
-    /**
-     * Calculcates position in form schema given the dropped place.
-     *
-     * @param { FormRow } targetRow
-     * @param { any } targetFormField
-     * @param { HTMLElement } sibling
-     * @returns { number }
+    /**
+     * Calculcates position in form schema given the dropped place.
+     *
+     * @param { FormRow } targetRow
+     * @param { any } targetFormField
+     * @param { HTMLElement } sibling
+     * @returns { number }
      */
     getTargetIndex(targetRow, targetFormField, sibling) {
       /** @type HTMLElement */
@@ -64785,8 +64787,8 @@
       }
     }
 
-    /**
-     * @param { { container: Array<string>, direction: string, mirrorContainer: string } } options
+    /**
+     * @param { { container: Array<string>, direction: string, mirrorContainer: string } } options
      */
     createDragulaInstance(options) {
       const {
@@ -65180,7 +65182,7 @@
       return null;
     }
     return e$1("div", {
-      style: "width: fit-content; padding: 2px 6px; height: 16px; background: var(--color-blue-205-100-95); display: flex; justify-content: center; align-items: center; position: absolute; bottom: -2px; z-index: 2; font-size: 10px; right: 3px;",
+      style: "width: fit-content;\r padding: 2px 6px;\r height: 16px;\r background: var(--color-blue-205-100-95);\r display: flex;\r justify-content: center;\r align-items: center;\r position: absolute;\r bottom: -2px;\r z-index: 2;\r font-size: 10px;\r right: 3px;",
       class: "fjs-debug-columns",
       children: (field.layout || {}).columns || 'auto'
     });
@@ -66214,10 +66216,10 @@
     return formField;
   }
   class AddFormFieldHandler {
-    /**
-     * @constructor
-     * @param { import('../../../FormEditor').default } formEditor
-     * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
+    /**
+     * @constructor
+     * @param { import('../../../FormEditor').default } formEditor
+     * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
      */
     constructor(formEditor, formFieldRegistry) {
       this._formEditor = formEditor;
@@ -66277,10 +66279,10 @@
   }
   AddFormFieldHandler.$inject = ['formEditor', 'formFieldRegistry'];
   class EditFormFieldHandler {
-    /**
-     * @constructor
-     * @param { import('../../../FormEditor').default } formEditor
-     * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
+    /**
+     * @constructor
+     * @param { import('../../../FormEditor').default } formEditor
+     * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
      */
     constructor(formEditor, formFieldRegistry) {
       this._formEditor = formEditor;
@@ -66342,10 +66344,10 @@
   }
   EditFormFieldHandler.$inject = ['formEditor', 'formFieldRegistry'];
   class MoveFormFieldHandler {
-    /**
-     * @constructor
-     * @param { import('../../../FormEditor').default } formEditor
-     * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
+    /**
+     * @constructor
+     * @param { import('../../../FormEditor').default } formEditor
+     * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
      */
     constructor(formEditor, formFieldRegistry) {
       this._formEditor = formEditor;
@@ -66433,10 +66435,10 @@
   }
   MoveFormFieldHandler.$inject = ['formEditor', 'formFieldRegistry'];
   class RemoveFormFieldHandler {
-    /**
-     * @constructor
-     * @param { import('../../../FormEditor').default } formEditor
-     * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
+    /**
+     * @constructor
+     * @param { import('../../../FormEditor').default } formEditor
+     * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
      */
     constructor(formEditor, formFieldRegistry) {
       this._formEditor = formEditor;
@@ -66495,9 +66497,9 @@
   }
   RemoveFormFieldHandler.$inject = ['formEditor', 'formFieldRegistry'];
   class UpdateIdClaimHandler {
-    /**
-     * @constructor
-     * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
+    /**
+     * @constructor
+     * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
      */
     constructor(formFieldRegistry) {
       this._formFieldRegistry = formFieldRegistry;
@@ -66529,9 +66531,9 @@
   }
   UpdateIdClaimHandler.$inject = ['formFieldRegistry'];
   class UpdateKeyClaimHandler {
-    /**
-     * @constructor
-     * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
+    /**
+     * @constructor
+     * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
      */
     constructor(formFieldRegistry) {
       this._formFieldRegistry = formFieldRegistry;
@@ -66992,8 +66994,8 @@
     constructor(eventBus) {
       super(eventBus);
 
-      /**
-       * Remove custom validation if <validationType> is about to be added.
+      /**
+       * Remove custom validation if <validationType> is about to be added.
        */
       // @ts-ignore-next-line
       this.preExecute('formField.edit', function (context) {
@@ -67568,51 +67570,62 @@
     selectionBehavior: ['type', SelectionBehavior]
   };
 
-  /**
-   * Base class for sectionable UI modules.
-   *
-   * @property {EventBus} _eventBus - EventBus instance used for event handling.
-   * @property {string} managerType - Type of the render manager. Used to form event names.
-   *
-   * @class SectionModuleBase
+  /**
+   * Base class for sectionable UI modules.
+   *
+   * @property {EventBus} _eventBus - EventBus instance used for event handling.
+   * @property {string} managerType - Type of the render manager. Used to form event names.
+   *
+   * @class SectionModuleBase
    */
   class SectionModuleBase {
-    /**
-     * Create a SectionModuleBase instance.
-     *
-     * @param {any} eventBus - The EventBus instance used for event handling.
-     * @param {string} sectionKey - The type of render manager. Used to form event names.
-     *
-     * @constructor
+    /**
+     * Create a SectionModuleBase instance.
+     *
+     * @param {any} eventBus - The EventBus instance used for event handling.
+     * @param {string} sectionKey - The type of render manager. Used to form event names.
+     *
+     * @constructor
      */
     constructor(eventBus, sectionKey) {
       this._eventBus = eventBus;
-      this.sectionKey = sectionKey;
+      this._sectionKey = sectionKey;
+      this._eventBus.on(`${this._sectionKey}.section.rendered`, () => this.isSectionRendered = true);
+      this._eventBus.on(`${this._sectionKey}.section.destroyed`, () => this.isSectionRendered = false);
     }
 
-    /**
-     * Attach the managed section to a parent node.
-     *
-     * @param {HTMLElement} container - The parent node to attach to.
+    /**
+     * Attach the managed section to a parent node.
+     *
+     * @param {HTMLElement} container - The parent node to attach to.
      */
     attachTo(container) {
-      this._eventBus.fire(`${this.sectionKey}.attach`, {
+      this._onceSectionRendered(() => this._eventBus.fire(`${this._sectionKey}.attach`, {
         container
-      });
+      }));
     }
 
-    /**
-     * Detach the managed section from its parent node.
+    /**
+     * Detach the managed section from its parent node.
      */
     detach() {
-      this._eventBus.fire(`${this.sectionKey}.detach`);
+      this._onceSectionRendered(() => this._eventBus.fire(`${this._sectionKey}.detach`));
     }
 
-    /**
-     * Reset the managed section to its initial state.
+    /**
+     * Reset the managed section to its initial state.
      */
     reset() {
-      this._eventBus.fire(`${this.sectionKey}.reset`);
+      this._onceSectionRendered(() => this._eventBus.fire(`${this._sectionKey}.reset`));
+    }
+
+    /**
+     * Circumvents timing issues.
+     */
+    _onceSectionRendered(callback) {
+      this.isSectionRendered ? callback() : this._eventBus.once(`${this._sectionKey}.section.rendered`, () => {
+        callback();
+      });
     }
   }
   let PaletteModule$1 = class PaletteModule extends SectionModuleBase {
@@ -67635,10 +67648,10 @@
     propertiesPanel: ['type', PropertiesPanelModule$1]
   };
 
-  /**
-   * Manages the rendering of visual plugins.
-   * @constructor
-   * @param {Object} eventBus - Event bus for the application.
+  /**
+   * Manages the rendering of visual plugins.
+   * @constructor
+   * @param {Object} eventBus - Event bus for the application.
    */
   class RenderInjector extends SectionModuleBase {
     constructor(eventBus) {
@@ -67647,10 +67660,10 @@
       this.registeredRenderers = [];
     }
 
-    /**
-     * Inject a new renderer into the injector.
-     * @param {string} identifier - Identifier for the renderer.
-     * @param {Function} Renderer - The renderer function.
+    /**
+     * Inject a new renderer into the injector.
+     * @param {string} identifier - Identifier for the renderer.
+     * @param {Function} Renderer - The renderer function.
      */
     attachRenderer(identifier, Renderer) {
       this.registeredRenderers = [...this.registeredRenderers, {
@@ -67659,17 +67672,17 @@
       }];
     }
 
-    /**
-     * Detach a renderer from the by key injector.
-     * @param {string} identifier - Identifier for the renderer.
+    /**
+     * Detach a renderer from the by key injector.
+     * @param {string} identifier - Identifier for the renderer.
      */
     detachRenderer(identifier) {
       this.registeredRenderers = this.registeredRenderers.filter(r => r.identifier !== identifier);
     }
 
-    /**
-     * Returns the registered renderers.
-     * @returns {Array} Array of registered renderers.
+    /**
+     * Returns the registered renderers.
+     * @returns {Array} Array of registered renderers.
      */
     fetchRenderers() {
       return this.registeredRenderers;
@@ -67699,48 +67712,48 @@
   };
   const ids = new Ids([32, 36, 1]);
 
-  /**
-   * @typedef { import('./types').Injector } Injector
-   * @typedef { import('./types').Module } Module
-   * @typedef { import('./types').Schema } Schema
-   *
-   * @typedef { import('./types').FormEditorOptions } FormEditorOptions
-   * @typedef { import('./types').FormEditorProperties } FormEditorProperties
-   *
-   * @typedef { {
-   *   properties: FormEditorProperties,
-   *   schema: Schema
-   * } } State
-   *
-   * @typedef { (type:string, priority:number, handler:Function) => void } OnEventWithPriority
-   * @typedef { (type:string, handler:Function) => void } OnEventWithOutPriority
-   * @typedef { OnEventWithPriority & OnEventWithOutPriority } OnEventType
+  /**
+   * @typedef { import('./types').Injector } Injector
+   * @typedef { import('./types').Module } Module
+   * @typedef { import('./types').Schema } Schema
+   *
+   * @typedef { import('./types').FormEditorOptions } FormEditorOptions
+   * @typedef { import('./types').FormEditorProperties } FormEditorProperties
+   *
+   * @typedef { {
+   *   properties: FormEditorProperties,
+   *   schema: Schema
+   * } } State
+   *
+   * @typedef { (type:string, priority:number, handler:Function) => void } OnEventWithPriority
+   * @typedef { (type:string, handler:Function) => void } OnEventWithOutPriority
+   * @typedef { OnEventWithPriority & OnEventWithOutPriority } OnEventType
    */
 
-  /**
-   * The form editor.
+  /**
+   * The form editor.
    */
   class FormEditor {
-    /**
-     * @constructor
-     * @param {FormEditorOptions} options
+    /**
+     * @constructor
+     * @param {FormEditorOptions} options
      */
     constructor(options = {}) {
-      /**
-       * @public
-       * @type {OnEventType}
+      /**
+       * @public
+       * @type {OnEventType}
        */
       this.on = this._onEvent;
 
-      /**
-       * @public
-       * @type {String}
+      /**
+       * @public
+       * @type {String}
        */
       this._id = ids.next();
 
-      /**
-       * @private
-       * @type {Element}
+      /**
+       * @private
+       * @type {Element}
        */
       this._container = createFormContainer();
       this._container.setAttribute('input-handle-modified-keys', 'z,y');
@@ -67751,15 +67764,15 @@
         properties = {}
       } = options;
 
-      /**
-       * @private
-       * @type {any}
+      /**
+       * @private
+       * @type {any}
        */
       this.exporter = exporter;
 
-      /**
-       * @private
-       * @type {State}
+      /**
+       * @private
+       * @type {State}
        */
       this._state = {
         properties,
@@ -67788,10 +67801,10 @@
       this._detach(false);
     }
 
-    /**
-     * @param {Schema} schema
-     *
-     * @return {Promise<{ warnings: Array<any> }>}
+    /**
+     * @param {Schema} schema
+     *
+     * @return {Promise<{ warnings: Array<any> }>}
      */
     importSchema(schema) {
       return new Promise((resolve, reject) => {
@@ -67820,15 +67833,15 @@
       });
     }
 
-    /**
-     * @returns {Schema}
+    /**
+     * @returns {Schema}
      */
     saveSchema() {
       return this.getSchema();
     }
 
-    /**
-     * @returns {Schema}
+    /**
+     * @returns {Schema}
      */
     getSchema() {
       const {
@@ -67837,8 +67850,8 @@
       return exportSchema(schema, this.exporter, schemaVersion);
     }
 
-    /**
-     * @param {Element|string} parentNode
+    /**
+     * @param {Element|string} parentNode
      */
     attachTo(parentNode) {
       if (!parentNode) {
@@ -67856,10 +67869,10 @@
       this._detach();
     }
 
-    /**
-     * @internal
-     *
-     * @param {boolean} [emit]
+    /**
+     * @internal
+     *
+     * @param {boolean} [emit]
      */
     _detach(emit = true) {
       const container = this._container,
@@ -67873,9 +67886,9 @@
       parentNode.removeChild(container);
     }
 
-    /**
-     * @param {any} property
-     * @param {any} value
+    /**
+     * @param {any} property
+     * @param {any} value
      */
     setProperty(property, value) {
       const properties = set$1(this._getState().properties, [property], value);
@@ -67884,21 +67897,21 @@
       });
     }
 
-    /**
-     * @param {string} type
-     * @param {Function} handler
+    /**
+     * @param {string} type
+     * @param {Function} handler
      */
     off(type, handler) {
       this.get('eventBus').off(type, handler);
     }
 
-    /**
-     * @internal
-     *
-     * @param {FormEditorOptions} options
-     * @param {Element} container
-     *
-     * @returns {Injector}
+    /**
+     * @internal
+     *
+     * @param {FormEditorOptions} options
+     * @param {Element} container
+     *
+     * @returns {Injector}
      */
     _createInjector(options, container) {
       const {
@@ -67920,22 +67933,22 @@
       }, core, ...modules, ...additionalModules]);
     }
 
-    /**
-     * @internal
+    /**
+     * @internal
      */
     _emit(type, data) {
       this.get('eventBus').fire(type, data);
     }
 
-    /**
-     * @internal
+    /**
+     * @internal
      */
     _getState() {
       return this._state;
     }
 
-    /**
-     * @internal
+    /**
+     * @internal
      */
     _setState(state) {
       this._state = {
@@ -67945,15 +67958,15 @@
       this._emit('changed', this._getState());
     }
 
-    /**
-     * @internal
+    /**
+     * @internal
      */
     _getModules() {
       return [ModelingModule, EditorActionsModule, DraggingModule, KeyboardModule, SelectionModule, PaletteModule, ExpressionLanguageModule, MarkdownModule, PropertiesPanelModule, RenderInjectionModule];
     }
 
-    /**
-     * @internal
+    /**
+     * @internal
      */
     _onEvent(type, priority, handler) {
       this.get('eventBus').on(type, priority, handler);
@@ -69456,8 +69469,8 @@
     return new LanguageSupport(jsonLanguage);
   }
 
-  /**
-   * @type {Facet<import('..').Variables>} Variables
+  /**
+   * @type {Facet<import('..').Variables>} Variables
    */
   const variablesFacet = Facet.define();
 
@@ -69497,8 +69510,8 @@
     let language = new Compartment().of(json());
     let tabSize = new Compartment().of(EditorState.tabSize.of(2));
 
-    /**
-     * @typedef {Array<string>} Variables
+    /**
+     * @typedef {Array<string>} Variables
      */
 
     const autocompletionConf = new Compartment();
@@ -69538,8 +69551,8 @@
       return view.state.doc.toString();
     };
 
-    /**
-     * @param {Variables} variables
+    /**
+     * @param {Variables} variables
      */
     this.setVariables = function (variables) {
       view.setVariables(variables);