@bpmn-io/form-js-editor 1.0.0 → 1.2.0

package/dist/index.cjs

@@ -8,7 +8,7 @@ var jsxRuntime = require('preact/jsx-runtime');
 var hooks = require('preact/hooks');
 var preact = require('preact');
 var React = require('preact/compat');
-var dragula = require('dragula');
+var dragula = require('@bpmn-io/draggle');
 var minDom = require('min-dom');
 var arrayMove = require('array-move');
 var feelers = require('feelers');
@@ -534,10 +534,10 @@ function invokeFunction(fn, args) {
   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;
@@ -550,11 +550,11 @@ function DebounceFactory(config = true) {
 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;
@@ -617,11 +617,11 @@ class FieldFactory {
 FieldFactory.$inject = ['formFieldRegistry', 'formFields'];
 
 class FormFieldRegistry extends formJsViewer.FormFieldRegistry {
-  /**
-   * 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);
@@ -642,13 +642,13 @@ class FormFieldRegistry extends formJsViewer.FormFieldRegistry {
     }
   }
 
-  /**
-   * 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) {
@@ -665,11 +665,11 @@ const MAX_COLUMNS = 16;
 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;
@@ -729,11 +729,11 @@ function calculateMaxColumnsWithAuto(autoCols) {
 }
 
 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;
@@ -741,21 +741,21 @@ class Importer {
     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
@@ -773,12 +773,12 @@ class Importer {
     }
   }
 
-  /**
-   * @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 {
@@ -815,11 +815,11 @@ class Importer {
     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) => {
@@ -844,22 +844,22 @@ function editorFormFieldClasses(type, {
   });
 }
 
-/**
- * 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;
@@ -900,12 +900,12 @@ function createDragger(fn, dragPreview) {
   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;
@@ -934,11 +934,11 @@ const DragAndDropContext = preact.createContext({
 });
 var DragAndDropContext$1 = DragAndDropContext;
 
-/**
- * @param {string} type
- * @param {boolean} [strict]
- *
- * @returns {any}
+/**
+ * @param {string} type
+ * @param {boolean} [strict]
+ *
+ * @returns {any}
  */
 function getService$1(type, strict) {}
 const FormEditorContext = preact.createContext({
@@ -953,15 +953,15 @@ function useService$1 (type, strict) {
   return getService(type, strict);
 }
 
-var _path$3;
-function _extends$3() { _extends$3 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
+var _path$4;
+function _extends$4() { _extends$4 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4.apply(this, arguments); }
 var SvgClose = function SvgClose(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$4({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
     fill: "currentColor"
-  }, props), _path$3 || (_path$3 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$4 || (_path$4 = /*#__PURE__*/React__namespace.createElement("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",
     clipRule: "evenodd"
@@ -969,10 +969,10 @@ var SvgClose = function SvgClose(props) {
 };
 var CloseIcon = SvgClose;
 
-var _path$2, _path2;
-function _extends$2() { _extends$2 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
+var _path$3, _path2$1;
+function _extends$3() { _extends$3 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
 var SvgDelete = function SvgDelete(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3({
     xmlns: "http://www.w3.org/2000/svg",
     width: 16,
     height: 16,
@@ -993,27 +993,27 @@ var SvgDelete = function SvgDelete(props) {
       mixBlendMode: "multiply"
     },
     transform: "translate(.536)"
-  }), _path$2 || (_path$2 = /*#__PURE__*/React__namespace.createElement("path", {
+  }), _path$3 || (_path$3 = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "currentcolor",
     d: "M7.536 6h-1v6h1V6Zm3 0h-1v6h1V6Z"
-  })), _path2 || (_path2 = /*#__PURE__*/React__namespace.createElement("path", {
+  })), _path2$1 || (_path2$1 = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "currentcolor",
     d: "M2.536 3v1h1v10a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4h1V3h-12Zm2 11V4h8v10h-8Zm6-13h-4v1h4V1Z"
   })));
 };
 var DeleteIcon$1 = SvgDelete;
 
-var _path$1;
-function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
+var _path$2;
+function _extends$2() { _extends$2 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
 var SvgDraggable = function SvgDraggable(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
     xmlns: "http://www.w3.org/2000/svg",
     xmlSpace: "preserve",
     width: 16,
     height: 16,
     fill: "currentcolor",
     viewBox: "0 0 32 32"
-  }, props), _path$1 || (_path$1 = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$2 || (_path$2 = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M10 6h4v4h-4zm8 0h4v4h-4zm-8 8h4v4h-4zm8 0h4v4h-4zm-8 8h4v4h-4zm8 0h4v4h-4z"
   })), /*#__PURE__*/React__namespace.createElement("path", {
     d: "M0 0h32v32H0z",
@@ -1024,21 +1024,76 @@ var SvgDraggable = function SvgDraggable(props) {
 };
 var DraggableIcon = SvgDraggable;
 
-var _path;
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var _path$1;
+function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
 var SvgSearch = function SvgSearch(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
     xmlns: "http://www.w3.org/2000/svg",
     width: 15,
     height: 15,
     fill: "none"
-  }, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
+  }, props), _path$1 || (_path$1 = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "currentColor",
     d: "m14.5 13.793-3.776-3.776a5.508 5.508 0 1 0-.707.707l3.776 3.776.707-.707ZM2 6.5a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0Z"
   })));
 };
 var SearchIcon = SvgSearch;
 
+var _path, _rect, _mask, _path2, _path3, _path4, _path5, _path6;
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var SvgEmptyForm = function SvgEmptyForm(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 126,
+    height: 96,
+    fill: "none"
+  }, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "#FF832B",
+    fillRule: "evenodd",
+    d: "M70 78v8a3 3 0 0 1-3 3h-8v-5h6v-6h5Zm0-16h-5V46h5v16Zm0-32h-5v-6h-6v-5h8a3 3 0 0 1 3 3v8ZM43 19v5H27v-5h16Zm-32 0v5H5v6H0v-8a3 3 0 0 1 3-3h8ZM0 46h5v16H0V46Zm0 32h5v6h6v5H3a3 3 0 0 1-3-3v-8Zm27 11v-5h16v5H27Z",
+    clipRule: "evenodd"
+  })), _rect || (_rect = /*#__PURE__*/React__namespace.createElement("rect", {
+    width: 70,
+    height: 70,
+    fill: "#E5E5E5",
+    rx: 3,
+    transform: "matrix(-1 0 0 1 94 0)"
+  })), _mask || (_mask = /*#__PURE__*/React__namespace.createElement("mask", {
+    id: "EmptyForm_svg__a",
+    fill: "#fff"
+  }, /*#__PURE__*/React__namespace.createElement("path", {
+    fillRule: "evenodd",
+    d: "M87.085 88.684 75.43 45.185l43.499 11.656-11.044 8.072 8.557 8.556-12.728 12.728-8.557-8.556-8.072 11.043Z",
+    clipRule: "evenodd"
+  }))), _path2 || (_path2 = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "#393939",
+    fillRule: "evenodd",
+    d: "M87.085 88.684 75.43 45.185l43.499 11.656-11.044 8.072 8.557 8.556-12.728 12.728-8.557-8.556-8.072 11.043Z",
+    clipRule: "evenodd"
+  })), _path3 || (_path3 = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "#393939",
+    d: "M75.43 45.185 70.6 46.48l-2.241-8.365 8.365 2.242-1.294 4.83Zm11.655 43.499 4.037 2.95-6.163 8.432-2.704-10.088 4.83-1.294Zm31.844-31.843 1.294-4.83 10.088 2.703-8.432 6.163-2.95-4.036Zm-11.044 8.072-3.535 3.535-4.128-4.127 4.713-3.445 2.95 4.037Zm8.557 8.556 3.535-3.535 3.536 3.535-3.536 3.536-3.535-3.536Zm-12.728 12.728 3.536 3.536-3.536 3.535-3.536-3.535 3.536-3.536Zm-8.557-8.556-4.036-2.951 3.444-4.713 4.128 4.128-3.536 3.535ZM80.26 43.89 91.915 87.39l-9.66 2.588L70.6 46.48l9.66-2.588Zm37.375 17.78L74.136 50.014l2.588-9.66 43.499 11.656-2.589 9.66Zm-12.699-.795 11.043-8.072 5.901 8.073-11.043 8.072-5.901-8.073Zm7.971 16.129-8.556-8.557 7.071-7.07 8.556 8.556-7.071 7.07Zm-12.728 5.657 12.728-12.728 7.071 7.07-12.727 12.729-7.072-7.071Zm-1.485-8.557 8.557 8.557-7.072 7.07-8.556-8.556 7.07-7.071ZM83.049 85.733 91.12 74.69l8.073 5.901-8.072 11.044-8.073-5.902Z",
+    mask: "url(#EmptyForm_svg__a)"
+  })), _path4 || (_path4 = /*#__PURE__*/React__namespace.createElement("path", {
+    stroke: "#000",
+    strokeLinecap: "round",
+    strokeWidth: 3,
+    d: "m69.431 39.163-9.192-9.192"
+  })), _path5 || (_path5 = /*#__PURE__*/React__namespace.createElement("path", {
+    stroke: "#000",
+    strokeLinecap: "round",
+    strokeWidth: 3,
+    d: "M1.5-1.5h8",
+    transform: "matrix(-1 0 0 1 68.213 50.123)"
+  })), _path6 || (_path6 = /*#__PURE__*/React__namespace.createElement("path", {
+    stroke: "#000",
+    strokeLinecap: "round",
+    strokeWidth: 3,
+    d: "M78.969 36.367v-8"
+  })));
+};
+var EmptyFormIcon = SvgEmptyForm;
+
 function EditorText(props) {
   const {
     type,
@@ -1047,7 +1102,7 @@ function EditorText(props) {
   const Icon = formJsViewer.iconsByType('text');
   const templating = useService$1('templating');
   const expressionLanguage = useService$1('expressionLanguage');
-  if (!text) {
+  if (!text || !text.trim()) {
     return jsxRuntime.jsx("div", {
       class: editorFormFieldClasses(type),
       children: jsxRuntime.jsxs("div", {
@@ -1233,23 +1288,23 @@ var Slot = (props => {
   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 => jsxRuntime.jsx(preact.Fragment, {
   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 = [];
@@ -1267,8 +1322,8 @@ const buildFills = (groups, fillRenderer, separatorRenderer) => {
   return result;
 };
 
-/**
- * Groups fills by group name property.
+/**
+ * Groups fills by group name property.
  */
 const _groupByGroupName = fills => {
   const groups = [];
@@ -1288,8 +1343,8 @@ const _groupByGroupName = fills => {
   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);
@@ -1517,19 +1572,19 @@ const DRAG_NO_DROP_CLS = 'fjs-no-drop';
 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;
@@ -1539,13 +1594,13 @@ class Dragging {
     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 */
@@ -1647,17 +1702,21 @@ class Dragging {
     }
   }
 
-  /**
-   * @param { { container: Array<string>, direction: string, mirrorContainer: string } } options
+  /**
+   * @param { { container: Array<string>, direction: string, mirrorContainer: string } } options
    */
   createDragulaInstance(options) {
     const {
       container,
-      direction,
       mirrorContainer
     } = options || {};
-    const dragulaInstance = dragula({
-      direction,
+    let dragulaOptions = {
+      direction: function (el, target) {
+        if (isRow(target)) {
+          return 'horizontal';
+        }
+        return 'vertical';
+      },
       mirrorContainer,
       isContainer(el) {
         return container.some(cls => el.classList.contains(cls));
@@ -1688,7 +1747,8 @@ class Dragging {
       },
       slideFactorX: 10,
       slideFactorY: 5
-    });
+    };
+    const dragulaInstance = dragula(dragulaOptions);
 
     // bind life cycle events
     dragulaInstance.on('drag', (element, source) => {
@@ -1948,7 +2008,19 @@ function ContextPad(props) {
   });
 }
 function Empty(props) {
-  return null;
+  return jsxRuntime.jsx("div", {
+    class: "fjs-empty-editor",
+    children: jsxRuntime.jsxs("div", {
+      class: "fjs-empty-editor-card",
+      children: [jsxRuntime.jsx(EmptyFormIcon, {}), jsxRuntime.jsx("h2", {
+        children: "Build your form"
+      }), jsxRuntime.jsx("span", {
+        children: "Drag and drop components here to start designing."
+      }), jsxRuntime.jsx("span", {
+        children: "Use the preview window to test your form."
+      })]
+    })
+  });
 }
 function Element$1(props) {
   const eventBus = useService$1('eventBus'),
@@ -2045,7 +2117,7 @@ function DebugColumns(props) {
     return null;
   }
   return jsxRuntime.jsx("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'
   });
@@ -2142,7 +2214,6 @@ function FormEditor$1(props) {
   hooks.useEffect(() => {
     let dragulaInstance = dragging.createDragulaInstance({
       container: [DRAG_CONTAINER_CLS, DROP_CONTAINER_VERTICAL_CLS, DROP_CONTAINER_HORIZONTAL_CLS],
-      direction: 'vertical',
       mirrorContainer: formContainerRef.current
     });
     setDrake(dragulaInstance);
@@ -2156,7 +2227,6 @@ function FormEditor$1(props) {
       onDetach();
       dragulaInstance = dragging.createDragulaInstance({
         container: [DRAG_CONTAINER_CLS, DROP_CONTAINER_VERTICAL_CLS, DROP_CONTAINER_HORIZONTAL_CLS],
-        direction: 'vertical',
         mirrorContainer: formContainerRef.current
       });
       setDrake(dragulaInstance);
@@ -3104,10 +3174,10 @@ function updateRow(formField, rowId) {
 }
 
 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;
@@ -3168,10 +3238,10 @@ class AddFormFieldHandler {
 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;
@@ -3234,10 +3304,10 @@ class EditFormFieldHandler {
 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;
@@ -3326,10 +3396,10 @@ class MoveFormFieldHandler {
 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;
@@ -3389,9 +3459,9 @@ class RemoveFormFieldHandler {
 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;
@@ -3424,9 +3494,9 @@ class UpdateIdClaimHandler {
 UpdateIdClaimHandler.$inject = ['formFieldRegistry'];
 
 class UpdateKeyClaimHandler {
-  /**
-   * @constructor
-   * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
+  /**
+   * @constructor
+   * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
    */
   constructor(formFieldRegistry) {
     this._formFieldRegistry = formFieldRegistry;
@@ -3892,8 +3962,8 @@ class ValidateBehavior extends CommandInterceptor {
   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) {
@@ -4473,22 +4543,22 @@ var SelectionModule = {
   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;
@@ -4501,10 +4571,10 @@ class SectionModuleBase {
     });
   }
 
-  /**
-   * 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._onceSectionRendered(() => this._eventBus.fire(`${this._sectionKey}.attach`, {
@@ -4512,22 +4582,22 @@ class SectionModuleBase {
     }));
   }
 
-  /**
-   * Detach the managed section from its parent node.
+  /**
+   * Detach the managed section from its parent node.
    */
   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._onceSectionRendered(() => this._eventBus.fire(`${this._sectionKey}.reset`));
   }
 
-  /**
-   * Circumvents timing issues.
+  /**
+   * Circumvents timing issues.
    */
   _onceSectionRendered(callback) {
     if (this.isSectionRendered) {
@@ -4702,6 +4772,166 @@ const LayoutContext = preact.createContext({
   getLayoutForKey: () => {},
   setLayoutForKey: () => {}
 });
+const TooltipContext = preact.createContext({
+  tooltip: {},
+  getTooltipForId: () => {}
+});
+
+/**
+ * Accesses the global TooltipContext and returns a tooltip for a given id and element.
+ *
+ * @example
+ * ```jsx
+ * function TextField(props) {
+ *   const tooltip = useTooltipContext('input1', element);
+ * }
+ * ```
+ *
+ * @param {string} id
+ * @param {object} element
+ *
+ * @returns {string}
+ */
+function useTooltipContext(id, element) {
+  const {
+    getTooltipForId
+  } = hooks.useContext(TooltipContext);
+  return getTooltipForId(id, element);
+}
+function TooltipWrapper(props) {
+  const {
+    forId,
+    element
+  } = props;
+  const contextDescription = useTooltipContext(forId, element);
+  const value = props.value || contextDescription;
+  if (!value) {
+    return props.children;
+  }
+  return jsxRuntime.jsx(Tooltip, {
+    ...props,
+    value: value,
+    forId: prefixId$8(forId)
+  });
+}
+function Tooltip(props) {
+  const {
+    forId,
+    value,
+    parent
+  } = props;
+  const [visible, setShow] = hooks.useState(false);
+  let timeout = null;
+  const wrapperRef = hooks.useRef(null);
+  const tooltipRef = hooks.useRef(null);
+  const showTooltip = async event => {
+    const show = () => !visible && setShow(true);
+    if (event instanceof MouseEvent) {
+      timeout = setTimeout(show, 200);
+    } else {
+      show();
+    }
+  };
+  const hideTooltip = () => setShow(false);
+  const hideTooltipViaEscape = e => {
+    e.code === 'Escape' && hideTooltip();
+  };
+  const isTooltipHovered = ({
+    x,
+    y
+  }) => {
+    const tooltip = tooltipRef.current;
+    const wrapper = wrapperRef.current;
+    return tooltip && (inBounds(x, y, wrapper.getBoundingClientRect()) || inBounds(x, y, tooltip.getBoundingClientRect()));
+  };
+  hooks.useEffect(() => {
+    const {
+      current
+    } = wrapperRef;
+    if (!current) {
+      return;
+    }
+    const hideHoveredTooltip = e => {
+      const isFocused = document.activeElement === wrapperRef.current || document.activeElement.closest('.bio-properties-panel-tooltip');
+      if (visible && !isTooltipHovered({
+        x: e.x,
+        y: e.y
+      }) && !isFocused) {
+        hideTooltip();
+      }
+    };
+    const hideFocusedTooltip = e => {
+      const {
+        relatedTarget
+      } = e;
+      const isTooltipChild = el => el && !!el.closest('.bio-properties-panel-tooltip');
+      if (visible && !isHovered(wrapperRef.current) && !isTooltipChild(relatedTarget)) {
+        hideTooltip();
+      }
+    };
+    document.addEventListener('wheel', hideHoveredTooltip);
+    document.addEventListener('focusout', hideFocusedTooltip);
+    document.addEventListener('mousemove', hideHoveredTooltip);
+    return () => {
+      document.removeEventListener('wheel', hideHoveredTooltip);
+      document.removeEventListener('mousemove', hideHoveredTooltip);
+      document.removeEventListener('focusout', hideFocusedTooltip);
+    };
+  }, [wrapperRef.current, visible]);
+  const renderTooltip = () => {
+    return jsxRuntime.jsxs("div", {
+      class: "bio-properties-panel-tooltip",
+      role: "tooltip",
+      id: "bio-properties-panel-tooltip",
+      "aria-labelledby": forId,
+      style: getTooltipPosition(wrapperRef.current),
+      ref: tooltipRef,
+      onClick: e => e.stopPropagation(),
+      children: [jsxRuntime.jsx("div", {
+        class: "bio-properties-panel-tooltip-content",
+        children: value
+      }), jsxRuntime.jsx("div", {
+        class: "bio-properties-panel-tooltip-arrow"
+      })]
+    });
+  };
+  return jsxRuntime.jsxs("div", {
+    class: "bio-properties-panel-tooltip-wrapper",
+    tabIndex: "0",
+    ref: wrapperRef,
+    onMouseEnter: showTooltip,
+    onMouseLeave: () => clearTimeout(timeout),
+    onFocus: showTooltip,
+    onKeyDown: hideTooltipViaEscape,
+    onMouseDown: e => {
+      e.preventDefault();
+    },
+    children: [props.children, visible ? parent ? React.createPortal(renderTooltip(), parent.current) : renderTooltip() : null]
+  });
+}
+
+// helper
+function inBounds(x, y, bounds) {
+  const {
+    top,
+    right,
+    bottom,
+    left
+  } = bounds;
+  return x >= left && x <= right && y >= top && y <= bottom;
+}
+function getTooltipPosition(refElement) {
+  const refPosition = refElement.getBoundingClientRect();
+  const right = `calc(100% - ${refPosition.x}px)`;
+  const top = `${refPosition.top - 10}px`;
+  return `right: ${right}; top: ${top};`;
+}
+function isHovered(element) {
+  return element.matches(':hover');
+}
+function prefixId$8(id) {
+  return `bio-properties-panel-${id}`;
+}
 
 /**
  * Accesses the global DescriptionContext and returns a description for a given id and element.
@@ -4730,6 +4960,12 @@ function useError(id) {
   } = hooks.useContext(ErrorsContext);
   return errors[id];
 }
+function useErrors() {
+  const {
+    errors
+  } = hooks.useContext(ErrorsContext);
+  return errors;
+}
 
 /**
  * Subscribe to an event immediately. Update subscription after inputs changed.
@@ -4961,6 +5197,10 @@ function Group(props) {
     setEdited(hasOneEditedEntry);
   }, [entries]);
 
+  // set error state depending on all entries
+  const allErrors = useErrors();
+  const hasErrors = entries.some(entry => allErrors[entry.id]);
+
   // set css class when group is sticky to top
   useStickyIntersectionObserver(groupRef, 'div.bio-properties-panel-scroll-container', setSticky);
   const propertiesPanelContext = {
@@ -4977,10 +5217,19 @@ function Group(props) {
       children: [jsxRuntime.jsx("div", {
         title: label,
         class: "bio-properties-panel-group-header-title",
-        children: label
+        children: jsxRuntime.jsx(TooltipWrapper, {
+          value: props.tooltip,
+          forId: 'group-' + id,
+          element: element,
+          parent: groupRef,
+          children: label
+        })
       }), jsxRuntime.jsxs("div", {
         class: "bio-properties-panel-group-header-buttons",
-        children: [edited && jsxRuntime.jsx(DataMarker, {}), jsxRuntime.jsx("button", {
+        children: [jsxRuntime.jsx(DataMarker, {
+          edited: edited,
+          hasErrors: hasErrors
+        }), jsxRuntime.jsx("button", {
           title: "Toggle section",
           class: "bio-properties-panel-group-header-button bio-properties-panel-arrow",
           children: jsxRuntime.jsx(ArrowIcon, {
@@ -5007,11 +5256,24 @@ function Group(props) {
     })]
   });
 }
-function DataMarker() {
-  return jsxRuntime.jsx("div", {
-    title: "Section contains data",
-    class: "bio-properties-panel-dot"
-  });
+function DataMarker(props) {
+  const {
+    edited,
+    hasErrors
+  } = props;
+  if (hasErrors) {
+    return jsxRuntime.jsx("div", {
+      title: "Section contains an error",
+      class: "bio-properties-panel-dot bio-properties-panel-dot--error"
+    });
+  }
+  if (edited) {
+    return jsxRuntime.jsx("div", {
+      title: "Section contains data",
+      class: "bio-properties-panel-dot"
+    });
+  }
+  return null;
 }
 
 /**
@@ -5042,6 +5304,7 @@ function Placeholder(props) {
 }
 const DEFAULT_LAYOUT = {};
 const DEFAULT_DESCRIPTION = {};
+const DEFAULT_TOOLTIP = {};
 
 /**
  * @typedef { {
@@ -5082,12 +5345,22 @@ const DEFAULT_DESCRIPTION = {};
  *    [id: String]: GetDescriptionFunction
  * } } DescriptionConfig
  *
+ *  @typedef { {
+ *    [id: String]: GetTooltipFunction
+ * } } TooltipConfig
+ *
  * @callback { {
  * @param {string} id
  * @param {Object} element
  * @returns {string}
  * } } GetDescriptionFunction
  *
+ * @callback { {
+ * @param {string} id
+ * @param {Object} element
+ * @returns {string}
+ * } } GetTooltipFunction
+ *
  * @typedef { {
  *  getEmpty: (element: object) => import('./components/Placeholder').PlaceholderDefinition,
  *  getMultiple: (element: Object) => import('./components/Placeholder').PlaceholderDefinition
@@ -5108,6 +5381,8 @@ const DEFAULT_DESCRIPTION = {};
  * @param {Function} [props.layoutChanged]
  * @param {DescriptionConfig} [props.descriptionConfig]
  * @param {Function} [props.descriptionLoaded]
+ * @param {TooltipConfig} [props.tooltipConfig]
+ * @param {Function} [props.tooltipLoaded]
  * @param {Object} [props.eventBus]
  */
 function PropertiesPanel(props) {
@@ -5120,6 +5395,8 @@ function PropertiesPanel(props) {
     layoutChanged,
     descriptionConfig,
     descriptionLoaded,
+    tooltipConfig,
+    tooltipLoaded,
     eventBus
   } = props;
 
@@ -5165,6 +5442,21 @@ function PropertiesPanel(props) {
     description,
     getDescriptionForId
   };
+
+  // set-up tooltip context
+  const tooltip = hooks.useMemo(() => createTooltipContext(tooltipConfig), [tooltipConfig]);
+  hooks.useEffect(() => {
+    if (typeof tooltipLoaded === 'function') {
+      tooltipLoaded(tooltip);
+    }
+  }, [tooltip, tooltipLoaded]);
+  const getTooltipForId = (id, element) => {
+    return tooltip[id] && tooltip[id](element);
+  };
+  const tooltipContext = {
+    tooltip,
+    getTooltipForId
+  };
   const [errors, setErrors] = hooks.useState({});
   const onSetErrors = ({
     errors
@@ -5199,29 +5491,32 @@ function PropertiesPanel(props) {
       value: errorsContext,
       children: jsxRuntime.jsx(DescriptionContext.Provider, {
         value: descriptionContext,
-        children: jsxRuntime.jsx(LayoutContext.Provider, {
-          value: layoutContext,
-          children: jsxRuntime.jsx(EventContext.Provider, {
-            value: eventContext,
-            children: jsxRuntime.jsxs("div", {
-              class: "bio-properties-panel",
-              children: [jsxRuntime.jsx(Header, {
-                element: element,
-                headerProvider: headerProvider
-              }), jsxRuntime.jsx("div", {
-                class: "bio-properties-panel-scroll-container",
-                children: groups.map(group => {
-                  const {
-                    component: Component = Group,
-                    id
-                  } = group;
-                  return preact.createElement(Component, {
-                    ...group,
-                    key: id,
-                    element: element
-                  });
-                })
-              })]
+        children: jsxRuntime.jsx(TooltipContext.Provider, {
+          value: tooltipContext,
+          children: jsxRuntime.jsx(LayoutContext.Provider, {
+            value: layoutContext,
+            children: jsxRuntime.jsx(EventContext.Provider, {
+              value: eventContext,
+              children: jsxRuntime.jsxs("div", {
+                class: "bio-properties-panel",
+                children: [jsxRuntime.jsx(Header, {
+                  element: element,
+                  headerProvider: headerProvider
+                }), jsxRuntime.jsx("div", {
+                  class: "bio-properties-panel-scroll-container",
+                  children: groups.map(group => {
+                    const {
+                      component: Component = Group,
+                      id
+                    } = group;
+                    return preact.createElement(Component, {
+                      ...group,
+                      key: id,
+                      element: element
+                    });
+                  })
+                })]
+              })
             })
           })
         })
@@ -5244,6 +5539,12 @@ function createDescriptionContext(overrides = {}) {
     ...overrides
   };
 }
+function createTooltipContext(overrides = {}) {
+  return {
+    ...DEFAULT_TOOLTIP,
+    ...overrides
+  };
+}
 
 // hooks //////////////////
 
@@ -5474,6 +5775,18 @@ function ListGroup(props) {
     setAddTriggered(true);
     add(e);
   };
+  const allErrors = useErrors();
+  const hasError = items.some(item => {
+    if (allErrors[item.id]) {
+      return true;
+    }
+    if (!item.entries) {
+      return;
+    }
+
+    // also check if the error is nested, e.g. for name-value entries
+    return item.entries.some(entry => allErrors[entry.id]);
+  });
   return jsxRuntime.jsxs("div", {
     class: "bio-properties-panel-group",
     "data-group-id": 'group-' + id,
@@ -5484,7 +5797,13 @@ function ListGroup(props) {
       children: [jsxRuntime.jsx("div", {
         title: label,
         class: "bio-properties-panel-group-header-title",
-        children: label
+        children: jsxRuntime.jsx(TooltipWrapper, {
+          value: props.tooltip,
+          forId: 'group-' + id,
+          element: element,
+          parent: groupRef,
+          children: label
+        })
       }), jsxRuntime.jsxs("div", {
         class: "bio-properties-panel-group-header-buttons",
         children: [add ? jsxRuntime.jsxs("button", {
@@ -5497,7 +5816,7 @@ function ListGroup(props) {
           }) : null]
         }) : null, hasItems ? jsxRuntime.jsx("div", {
           title: `List contains ${items.length} item${items.length != 1 ? 's' : ''}`,
-          class: "bio-properties-panel-list-badge",
+          class: classnames('bio-properties-panel-list-badge', hasError ? 'bio-properties-panel-list-badge--error' : ''),
           children: items.length
         }) : null, hasItems ? jsxRuntime.jsx("button", {
           title: "Toggle section",
@@ -5573,7 +5892,8 @@ function Checkbox(props) {
     disabled,
     value = false,
     onFocus,
-    onBlur
+    onBlur,
+    tooltip
   } = props;
   const [localValue, setLocalValue] = hooks.useState(value);
   const handleChangeCallback = ({
@@ -5608,7 +5928,12 @@ function Checkbox(props) {
     }), jsxRuntime.jsx("label", {
       for: prefixId$7(id),
       class: "bio-properties-panel-label",
-      children: label
+      children: jsxRuntime.jsx(TooltipWrapper, {
+        value: tooltip,
+        forId: id,
+        element: props.element,
+        children: label
+      })
     })]
   });
 }
@@ -5623,6 +5948,7 @@ function Checkbox(props) {
  * @param {Function} props.setValue
  * @param {Function} props.onFocus
  * @param {Function} props.onBlur
+ * @param {string|import('preact').Component} props.tooltip
  * @param {boolean} [props.disabled]
  */
 function CheckboxEntry(props) {
@@ -5635,7 +5961,8 @@ function CheckboxEntry(props) {
     setValue,
     disabled,
     onFocus,
-    onBlur
+    onBlur,
+    tooltip
   } = props;
   const value = getValue(element);
   const error = useError(id);
@@ -5649,7 +5976,9 @@ function CheckboxEntry(props) {
       onChange: setValue,
       onFocus: onFocus,
       onBlur: onBlur,
-      value: value
+      value: value,
+      tooltip: tooltip,
+      element: element
     }, element), error && jsxRuntime.jsx("div", {
       class: "bio-properties-panel-error",
       children: error
@@ -5906,7 +6235,8 @@ function ToggleSwitch(props) {
     inline,
     onFocus,
     onBlur,
-    inputRef
+    inputRef,
+    tooltip
   } = props;
   const [localValue, setLocalValue] = hooks.useState(value);
   const handleInputCallback = async () => {
@@ -5929,7 +6259,12 @@ function ToggleSwitch(props) {
     children: [jsxRuntime.jsx("label", {
       class: "bio-properties-panel-label",
       for: prefixId$6(id),
-      children: label
+      children: jsxRuntime.jsx(TooltipWrapper, {
+        value: tooltip,
+        forId: id,
+        element: props.element,
+        children: label
+      })
     }), jsxRuntime.jsxs("div", {
       class: "bio-properties-panel-field-wrapper",
       children: [jsxRuntime.jsxs("label", {
@@ -5967,6 +6302,7 @@ function ToggleSwitch(props) {
  * @param {Function} props.setValue
  * @param {Function} props.onFocus
  * @param {Function} props.onBlur
+ * @param {string|import('preact').Component} props.tooltip
  */
 function ToggleSwitchEntry(props) {
   const {
@@ -5979,7 +6315,8 @@ function ToggleSwitchEntry(props) {
     getValue,
     setValue,
     onFocus,
-    onBlur
+    onBlur,
+    tooltip
   } = props;
   const value = getValue(element);
   return jsxRuntime.jsxs("div", {
@@ -5993,7 +6330,9 @@ function ToggleSwitchEntry(props) {
       onFocus: onFocus,
       onBlur: onBlur,
       switcherLabel: switcherLabel,
-      inline: inline
+      inline: inline,
+      tooltip: tooltip,
+      element: element
     }), jsxRuntime.jsx(Description$1, {
       forId: id,
       element: element,
@@ -6108,11 +6447,9 @@ function NumberFieldEntry(props) {
     onBlur,
     validate
   } = props;
-  const [cachedInvalidValue, setCachedInvalidValue] = hooks.useState(null);
   const globalError = useError(id);
   const [localError, setLocalError] = hooks.useState(null);
   let value = getValue(element);
-  const previousValue = usePrevious(value);
   hooks.useEffect(() => {
     if (minDash.isFunction(validate)) {
       const newValidationError = validate(value) || null;
@@ -6124,16 +6461,9 @@ function NumberFieldEntry(props) {
     if (minDash.isFunction(validate)) {
       newValidationError = validate(newValue) || null;
     }
-    if (newValidationError) {
-      setCachedInvalidValue(newValue);
-    } else {
-      setValue(newValue);
-    }
+    setValue(newValue, newValidationError);
     setLocalError(newValidationError);
   };
-  if (previousValue === value && localError) {
-    value = cachedInvalidValue;
-  }
   const error = globalError || localError;
   return jsxRuntime.jsxs("div", {
     class: classnames('bio-properties-panel-entry', error ? 'has-error' : ''),
@@ -6182,7 +6512,8 @@ function FeelTextfield(props) {
     disabled = false,
     variables,
     tooltipContainer,
-    OptionalComponent = OptionalFeelInput
+    OptionalComponent = OptionalFeelInput,
+    tooltip
   } = props;
   const [localValue, _setLocalValue] = hooks.useState(value);
   const editorRef = useShowEntryEvent(id);
@@ -6298,7 +6629,12 @@ function FeelTextfield(props) {
       for: prefixId$4(id),
       class: "bio-properties-panel-label",
       onClick: () => setFocus(),
-      children: [label, jsxRuntime.jsx(FeelIcon, {
+      children: [jsxRuntime.jsx(TooltipWrapper, {
+        value: tooltip,
+        forId: id,
+        element: props.element,
+        children: label
+      }), jsxRuntime.jsx(FeelIcon, {
         label: label,
         feel: feel,
         onClick: handleFeelToggle,
@@ -6558,6 +6894,7 @@ React.forwardRef((props, ref) => {
  * @param {Function} props.variables
  * @param {Function} props.onFocus
  * @param {Function} props.onBlur
+ * @param {string|import('preact').Component} props.tooltip
  */
 function FeelEntry(props) {
   const {
@@ -6578,13 +6915,12 @@ function FeelEntry(props) {
     example,
     variables,
     onFocus,
-    onBlur
+    onBlur,
+    tooltip
   } = props;
-  const [cachedInvalidValue, setCachedInvalidValue] = hooks.useState(null);
   const [validationError, setValidationError] = hooks.useState(null);
   const [localError, setLocalError] = hooks.useState(null);
   let value = getValue(element);
-  const previousValue = usePrevious(value);
   hooks.useEffect(() => {
     if (minDash.isFunction(validate)) {
       const newValidationError = validate(value) || null;
@@ -6596,22 +6932,16 @@ function FeelEntry(props) {
     if (minDash.isFunction(validate)) {
       newValidationError = validate(newValue) || null;
     }
-    if (newValidationError) {
-      setCachedInvalidValue(newValue);
-    } else {
-      // don't create multiple commandStack entries for the same value
-      if (newValue !== value) {
-        setValue(newValue);
-      }
+
+    // don't create multiple commandStack entries for the same value
+    if (newValue !== value) {
+      setValue(newValue, newValidationError);
     }
     setValidationError(newValidationError);
   });
   const onError = hooks.useCallback(err => {
     setLocalError(err);
   }, []);
-  if (previousValue === value && validationError) {
-    value = cachedInvalidValue;
-  }
   const temporaryError = useError(id);
   const error = localError || temporaryError || validationError;
   return jsxRuntime.jsxs("div", {
@@ -6636,7 +6966,8 @@ function FeelEntry(props) {
       value: value,
       variables: variables,
       tooltipContainer: tooltipContainer,
-      OptionalComponent: props.OptionalComponent
+      OptionalComponent: props.OptionalComponent,
+      tooltip: tooltip
     }), error && jsxRuntime.jsx("div", {
       class: "bio-properties-panel-error",
       children: error
@@ -6757,7 +7088,8 @@ function Select(props) {
     value = '',
     disabled,
     onFocus,
-    onBlur
+    onBlur,
+    tooltip
   } = props;
   const ref = useShowEntryEvent(id);
   const [localValue, setLocalValue] = hooks.useState(value);
@@ -6781,7 +7113,12 @@ function Select(props) {
     children: [jsxRuntime.jsx("label", {
       for: prefixId$3(id),
       class: "bio-properties-panel-label",
-      children: label
+      children: jsxRuntime.jsx(TooltipWrapper, {
+        value: tooltip,
+        forId: id,
+        element: props.element,
+        children: label
+      })
     }), jsxRuntime.jsx("select", {
       ref: ref,
       id: prefixId$3(id),
@@ -6826,6 +7163,7 @@ function Select(props) {
  * @param {Function} props.getOptions
  * @param {boolean} [props.disabled]
  * @param {Function} [props.validate]
+ * @param {string|import('preact').Component} props.tooltip
  */
 function SelectEntry(props) {
   const {
@@ -6839,14 +7177,13 @@ function SelectEntry(props) {
     disabled,
     onFocus,
     onBlur,
-    validate
+    validate,
+    tooltip
   } = props;
   const options = getOptions(element);
-  const [cachedInvalidValue, setCachedInvalidValue] = hooks.useState(null);
   const globalError = useError(id);
   const [localError, setLocalError] = hooks.useState(null);
   let value = getValue(element);
-  const previousValue = usePrevious(value);
   hooks.useEffect(() => {
     if (minDash.isFunction(validate)) {
       const newValidationError = validate(value) || null;
@@ -6858,16 +7195,9 @@ function SelectEntry(props) {
     if (minDash.isFunction(validate)) {
       newValidationError = validate(newValue) || null;
     }
-    if (newValidationError) {
-      setCachedInvalidValue(newValue);
-    } else {
-      setValue(newValue);
-    }
+    setValue(newValue, newValidationError);
     setLocalError(newValidationError);
   };
-  if (previousValue === value && localError) {
-    value = cachedInvalidValue;
-  }
   const error = globalError || localError;
   return jsxRuntime.jsxs("div", {
     class: classnames('bio-properties-panel-entry', error ? 'has-error' : ''),
@@ -6880,7 +7210,9 @@ function SelectEntry(props) {
       onFocus: onFocus,
       onBlur: onBlur,
       options: options,
-      disabled: disabled
+      disabled: disabled,
+      tooltip: tooltip,
+      element: element
     }, element), error && jsxRuntime.jsx("div", {
       class: "bio-properties-panel-error",
       children: error
@@ -6919,7 +7251,8 @@ function TextArea(props) {
     onFocus,
     onBlur,
     autoResize,
-    rows = autoResize ? 1 : 2
+    rows = autoResize ? 1 : 2,
+    tooltip
   } = props;
   const [localValue, setLocalValue] = hooks.useState(value);
   const ref = useShowEntryEvent(id);
@@ -6947,7 +7280,12 @@ function TextArea(props) {
     children: [jsxRuntime.jsx("label", {
       for: prefixId$1(id),
       class: "bio-properties-panel-label",
-      children: label
+      children: jsxRuntime.jsx(TooltipWrapper, {
+        value: tooltip,
+        forId: id,
+        element: props.element,
+        children: label
+      })
     }), jsxRuntime.jsx("textarea", {
       ref: ref,
       id: prefixId$1(id),
@@ -6996,13 +7334,12 @@ function TextAreaEntry(props) {
     validate,
     onFocus,
     onBlur,
-    autoResize
+    autoResize,
+    tooltip
   } = props;
-  const [cachedInvalidValue, setCachedInvalidValue] = hooks.useState(null);
   const globalError = useError(id);
   const [localError, setLocalError] = hooks.useState(null);
   let value = getValue(element);
-  const previousValue = usePrevious(value);
   hooks.useEffect(() => {
     if (minDash.isFunction(validate)) {
       const newValidationError = validate(value) || null;
@@ -7014,16 +7351,9 @@ function TextAreaEntry(props) {
     if (minDash.isFunction(validate)) {
       newValidationError = validate(newValue) || null;
     }
-    if (newValidationError) {
-      setCachedInvalidValue(newValue);
-    } else {
-      setValue(newValue);
-    }
+    setValue(newValue, newValidationError);
     setLocalError(newValidationError);
   };
-  if (previousValue === value && localError) {
-    value = cachedInvalidValue;
-  }
   const error = globalError || localError;
   return jsxRuntime.jsxs("div", {
     class: classnames('bio-properties-panel-entry', error ? 'has-error' : ''),
@@ -7039,7 +7369,9 @@ function TextAreaEntry(props) {
       debounce: debounce,
       monospace: monospace,
       disabled: disabled,
-      autoResize: autoResize
+      autoResize: autoResize,
+      tooltip: tooltip,
+      element: element
     }, element), error && jsxRuntime.jsx("div", {
       class: "bio-properties-panel-error",
       children: error
@@ -7068,7 +7400,8 @@ function Textfield(props) {
     onInput,
     onFocus,
     onBlur,
-    value = ''
+    value = '',
+    tooltip
   } = props;
   const [localValue, setLocalValue] = hooks.useState(value || '');
   const ref = useShowEntryEvent(id);
@@ -7092,7 +7425,12 @@ function Textfield(props) {
     children: [jsxRuntime.jsx("label", {
       for: prefixId(id),
       class: "bio-properties-panel-label",
-      children: label
+      children: jsxRuntime.jsx(TooltipWrapper, {
+        value: tooltip,
+        forId: id,
+        element: props.element,
+        children: label
+      })
     }), jsxRuntime.jsx("input", {
       ref: ref,
       id: prefixId(id),
@@ -7122,6 +7460,7 @@ function Textfield(props) {
  * @param {Function} props.setValue
  * @param {Function} props.onFocus
  * @param {Function} props.onBlur
+ * @param {string|import('preact').Component} props.tooltip
  * @param {Function} props.validate
  */
 function TextfieldEntry(props) {
@@ -7136,13 +7475,12 @@ function TextfieldEntry(props) {
     setValue,
     validate,
     onFocus,
-    onBlur
+    onBlur,
+    tooltip
   } = props;
-  const [cachedInvalidValue, setCachedInvalidValue] = hooks.useState(null);
   const globalError = useError(id);
   const [localError, setLocalError] = hooks.useState(null);
   let value = getValue(element);
-  const previousValue = usePrevious(value);
   hooks.useEffect(() => {
     if (minDash.isFunction(validate)) {
       const newValidationError = validate(value) || null;
@@ -7154,16 +7492,9 @@ function TextfieldEntry(props) {
     if (minDash.isFunction(validate)) {
       newValidationError = validate(newValue) || null;
     }
-    if (newValidationError) {
-      setCachedInvalidValue(newValue);
-    } else {
-      setValue(newValue);
-    }
+    setValue(newValue, newValidationError);
     setLocalError(newValidationError);
   };
-  if (previousValue === value && localError) {
-    value = cachedInvalidValue;
-  }
   const error = globalError || localError;
   return jsxRuntime.jsxs("div", {
     class: classnames('bio-properties-panel-entry', error ? 'has-error' : ''),
@@ -7176,7 +7507,9 @@ function TextfieldEntry(props) {
       onInput: onInput,
       onFocus: onFocus,
       onBlur: onBlur,
-      value: value
+      value: value,
+      tooltip: tooltip,
+      element: element
     }, element), error && jsxRuntime.jsx("div", {
       class: "bio-properties-panel-error",
       children: error
@@ -7197,11 +7530,11 @@ function prefixId(id) {
   return `bio-properties-panel-${id}`;
 }
 
-/**
- * @param {string} type
- * @param {boolean} [strict]
- *
- * @returns {any}
+/**
+ * @param {string} type
+ * @param {boolean} [strict]
+ *
+ * @returns {any}
  */
 function getService(type, strict) {}
 const PropertiesPanelContext = preact.createContext({
@@ -7248,6 +7581,7 @@ const labelsByType = {
   number: 'NUMBER',
   radio: 'RADIO',
   select: 'SELECT',
+  spacer: 'SPACER',
   taglist: 'TAGLIST',
   text: 'TEXT VIEW',
   textfield: 'TEXT FIELD',
@@ -7290,8 +7624,8 @@ const PropertiesPanelHeaderProvider = {
   }
 };
 
-/**
- * Provide placeholders for empty and multiple state.
+/**
+ * Provide placeholders for empty and multiple state.
  */
 const PropertiesPanelPlaceholderProvider = {
   getEmpty: () => {
@@ -7363,10 +7697,10 @@ function useService (type, strict) {
   return getService(type, strict);
 }
 
-/**
- * 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');
@@ -7418,6 +7752,7 @@ function AltText(props) {
     getValue,
     id,
     label: 'Alternative text',
+    tooltip: 'Descriptive text for screen reader accessibility.',
     setValue,
     singleLine: true,
     variables
@@ -7450,7 +7785,10 @@ function Columns(props) {
   const validate = value => {
     return formLayoutValidator.validateField(field, value ? parseInt(value) : null);
   };
-  const setValue = value => {
+  const setValue = (value, error) => {
+    if (error) {
+      return;
+    }
     const layout = minDash.get(field, ['layout'], {});
     const newValue = value ? parseInt(value) : null;
     editField(field, ['layout'], minDash.set(layout, ['columns'], newValue));
@@ -7658,7 +7996,10 @@ function DefaultValueNumber(props) {
     // Enforces decimal notation so that we do not submit defaults in exponent form
     return serializeToString ? Big(value).toFixed() : value;
   };
-  const setValue = value => {
+  const setValue = (value, error) => {
+    if (error) {
+      return;
+    }
     let newValue;
     if (isValidNumber(value)) {
       newValue = serializeToString ? value : Number(value);
@@ -7815,6 +8156,7 @@ function Disabled(props) {
     getValue,
     id,
     label: 'Disabled',
+    tooltip: 'Field cannot be edited by the end-user, and the data is not submitted.',
     inline: true,
     setValue
   });
@@ -7849,7 +8191,10 @@ function Id(props) {
   const getValue = () => {
     return minDash.get(field, path, '');
   };
-  const setValue = value => {
+  const setValue = (value, error) => {
+    if (error) {
+      return;
+    }
     return editField(field, path, value);
   };
   const validate = value => {
@@ -7929,7 +8274,10 @@ function Key$1(props) {
   const getValue = () => {
     return minDash.get(field, path, '');
   };
-  const setValue = value => {
+  const setValue = (value, error) => {
+    if (error) {
+      return;
+    }
     return editField(field, path, value);
   };
   const validate = value => {
@@ -7952,6 +8300,7 @@ function Key$1(props) {
     getValue,
     id,
     label: 'Key',
+    tooltip: 'Use a unique "key" to link the form element and the related input/output data. When dealing with nested data, break it down in the user task\'s input mapping before using it.',
     setValue,
     validate
   });
@@ -8012,7 +8361,7 @@ function Label$1(props) {
     return minDash.get(field, path, '');
   };
   const setValue = value => {
-    return editField(field, path, value);
+    return editField(field, path, value || '');
   };
   return FeelTemplatingEntry({
     debounce,
@@ -8040,7 +8389,7 @@ function DateLabel(props) {
     return minDash.get(field, path, '');
   };
   const setValue = value => {
-    return editField(field, path, value);
+    return editField(field, path, value || '');
   };
   return FeelTemplatingEntry({
     debounce,
@@ -8068,7 +8417,7 @@ function TimeLabel(props) {
     return minDash.get(field, path, '');
   };
   const setValue = value => {
-    return editField(field, path, value);
+    return editField(field, path, value || '');
   };
   return FeelTemplatingEntry({
     debounce,
@@ -8127,6 +8476,7 @@ function Source(props) {
     getValue,
     id,
     label: 'Image source',
+    tooltip: 'Link referring to a hosted image, or use a data URI directly to embed image data into the form.',
     setValue,
     singleLine: true,
     variables
@@ -8184,7 +8534,7 @@ function Text(props) {
     return minDash.get(field, path, '');
   };
   const setValue = value => {
-    return editField(field, path, value);
+    return editField(field, path, value || '');
   };
   const description = hooks.useMemo(() => jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: ["Supports markdown and templating. ", jsxRuntime.jsx("a", {
@@ -8206,6 +8556,57 @@ function Text(props) {
   });
 }
 
+function SpacerEntry(props) {
+  const {
+    editField,
+    field,
+    id
+  } = props;
+  const {
+    type
+  } = field;
+  if (type !== 'spacer') {
+    return [];
+  }
+  const entries = [];
+  entries.push({
+    id: id + '-height',
+    component: SpacerHeight,
+    isEdited: isEdited$6,
+    editField,
+    field
+  });
+  return entries;
+}
+function SpacerHeight(props) {
+  const {
+    editField,
+    field,
+    id
+  } = props;
+  const debounce = useService('debounce');
+  const getValue = e => minDash.get(field, ['height']);
+  const setValue = (value, error) => {
+    if (error) {
+      return;
+    }
+    editField(field, ['height'], value);
+  };
+  return NumberFieldEntry({
+    debounce,
+    label: 'Height',
+    element: field,
+    id,
+    getValue,
+    setValue,
+    validate: value => {
+      if (value === undefined || value === null) return;
+      if (value < 1) return 'Should be greater than zero.';
+      if (!Number.isInteger(value)) return 'Should be an integer.';
+    }
+  });
+}
+
 function NumberEntries(props) {
   const {
     editField,
@@ -8243,7 +8644,12 @@ function NumberDecimalDigits(props) {
   } = props;
   const debounce = useService('debounce');
   const getValue = e => minDash.get(field, ['decimalDigits']);
-  const setValue = value => editField(field, ['decimalDigits'], value);
+  const setValue = (value, error) => {
+    if (error) {
+      return;
+    }
+    editField(field, ['decimalDigits'], value);
+  };
   return NumberFieldEntry({
     debounce,
     label: 'Decimal digits',
@@ -8279,7 +8685,12 @@ function NumberArrowStep(props) {
     const trimmed = value.replace(/^0+/g, '');
     return (trimmed.startsWith('.') ? '0' : '') + trimmed;
   };
-  const setValue = value => editField(field, ['increment'], clearLeadingZeroes(value));
+  const setValue = (value, error) => {
+    if (error) {
+      return;
+    }
+    editField(field, ['increment'], clearLeadingZeroes(value));
+  };
   const decimalDigitsSet = decimalDigits || decimalDigits === 0;
   return TextfieldEntry({
     debounce,
@@ -8688,7 +9099,10 @@ function Label(props) {
     validateFactory
   } = props;
   const debounce = useService('debounce');
-  const setValue = value => {
+  const setValue = (value, error) => {
+    if (error) {
+      return;
+    }
     const values = minDash.get(field, ['values']);
     return editField(field, 'values', minDash.set(values, [index, 'label'], value));
   };
@@ -8714,7 +9128,10 @@ function Value$1(props) {
     validateFactory
   } = props;
   const debounce = useService('debounce');
-  const setValue = value => {
+  const setValue = (value, error) => {
+    if (error) {
+      return;
+    }
     const values = minDash.get(field, ['values']);
     return editField(field, 'values', minDash.set(values, [index, 'value'], value));
   };
@@ -8768,7 +9185,10 @@ function Key(props) {
     validateFactory
   } = props;
   const debounce = useService('debounce');
-  const setValue = value => {
+  const setValue = (value, error) => {
+    if (error) {
+      return;
+    }
     const properties = minDash.get(field, ['properties']);
     const key = Object.keys(properties)[index];
     return editField(field, 'properties', updateKey(properties, key, value));
@@ -8818,14 +9238,14 @@ function Value(props) {
 
 // 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 {
@@ -8834,14 +9254,14 @@ function updateValue(properties, key, value) {
   };
 }
 
-/**
- * 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) => {
@@ -8979,7 +9399,12 @@ function InputValuesKey(props) {
   const debounce = useService('debounce');
   const path = formJsViewer.VALUES_SOURCES_PATHS[formJsViewer.VALUES_SOURCES.INPUT];
   const getValue = () => minDash.get(field, path, '');
-  const setValue = value => editField(field, path, value || '');
+  const setValue = (value, error) => {
+    if (error) {
+      return;
+    }
+    editField(field, path, value || '');
+  };
   const validate = value => {
     if (minDash.isUndefined(value) || !value.length) {
       return 'Must not be empty.';
@@ -9208,6 +9633,7 @@ function Readonly(props) {
     getValue,
     id,
     label: 'Read only',
+    tooltip: 'Field cannot be edited by the end-user, but the data will still be submitted.',
     setValue,
     variables
   });
@@ -9336,6 +9762,9 @@ function GeneralGroup(field, editField, getService) {
     field,
     editField,
     getService
+  }), ...SpacerEntry({
+    field,
+    editField
   }), ...NumberEntries({
     field,
     editField
@@ -9658,12 +10087,13 @@ function ValuesGroups(field, editField) {
   };
   const valuesSourceId = `${fieldId}-valuesSource`;
 
-  /**
-   * @type {Array<Group|ListGroup>}
+  /**
+   * @type {Array<Group|ListGroup>}
    */
   const groups = [{
     id: valuesSourceId,
     label: 'Options source',
+    tooltip: '"Static" defines a constant, predefined set of form options.\n"Dynamic" defines options that are populated dynamically, adjusting based on variable data for flexible responses to different conditions or inputs.',
     component: Group,
     entries: ValuesSourceSelectEntry({
       ...context,
@@ -9708,7 +10138,7 @@ function ValuesGroups(field, editField) {
   return groups;
 }
 
-function CustomValuesGroup(field, editField) {
+function CustomPropertiesGroup(field, editField) {
   const {
     properties = {},
     type
@@ -9766,19 +10196,20 @@ function CustomValuesGroup(field, editField) {
     id: 'custom-values',
     items,
     label: 'Custom properties',
+    tooltip: 'Add properties directly to the form schema, useful to configure functionality in custom-built task applications and form renderers.',
     shouldSort: false
   };
 }
 
 // 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) => {
@@ -9851,7 +10282,7 @@ function getGroups(field, editField, getService) {
   if (!field) {
     return [];
   }
-  const groups = [GeneralGroup(field, editField, getService), ConditionGroup(field, editField), LayoutGroup(field, editField), AppearanceGroup(field, editField), SerializationGroup(field, editField), ...ValuesGroups(field, editField), ConstraintsGroup(field, editField), ValidationGroup(field, editField), CustomValuesGroup(field, editField)];
+  const groups = [GeneralGroup(field, editField, getService), ConditionGroup(field, editField), LayoutGroup(field, editField), AppearanceGroup(field, editField), SerializationGroup(field, editField), ...ValuesGroups(field, editField), ConstraintsGroup(field, editField), ValidationGroup(field, editField), CustomPropertiesGroup(field, editField)];
 
   // contract: if a group returns null, it should not be displayed at all
   return groups.filter(group => group !== null);
@@ -9881,9 +10312,9 @@ function FormPropertiesPanel(props) {
     });
   }, [eventBus, formEditor, selectionModule]);
   hooks.useLayoutEffect(() => {
-    /**
-     * 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
      */
     eventBus.on('changed', refresh);
     eventBus.on('import.done', refresh);
@@ -9935,10 +10366,10 @@ class PropertiesPanelRenderer {
     });
   }
 
-  /**
-   * Attach the properties panel to a parent node.
-   *
-   * @param {HTMLElement} container
+  /**
+   * Attach the properties panel to a parent node.
+   *
+   * @param {HTMLElement} container
    */
   attachTo(container) {
     if (!container) {
@@ -9958,8 +10389,8 @@ class PropertiesPanelRenderer {
     this._eventBus.fire('propertiesPanel.attach');
   }
 
-  /**
-   * Detach the properties panel from its parent node.
+  /**
+   * Detach the properties panel from its parent node.
    */
   detach() {
     const parentNode = this._container.parentNode;
@@ -9989,10 +10420,10 @@ var PropertiesPanelModule = {
   propertiesPanel: ['type', PropertiesPanelRenderer]
 };
 
-/**
- * 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) {
@@ -10001,10 +10432,10 @@ class RenderInjector extends SectionModuleBase {
     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, {
@@ -10013,17 +10444,17 @@ class RenderInjector extends SectionModuleBase {
     }];
   }
 
-  /**
-   * 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;
@@ -10057,48 +10488,48 @@ var ExpressionLanguageModule = {
 
 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 = formJsViewer.createFormContainer();
     this._container.setAttribute('input-handle-modified-keys', 'z,y');
@@ -10109,15 +10540,15 @@ class FormEditor {
       properties = {}
     } = options;
 
-    /**
-     * @private
-     * @type {any}
+    /**
+     * @private
+     * @type {any}
      */
     this.exporter = exporter;
 
-    /**
-     * @private
-     * @type {State}
+    /**
+     * @private
+     * @type {State}
      */
     this._state = {
       properties,
@@ -10146,10 +10577,10 @@ class FormEditor {
     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) => {
@@ -10178,15 +10609,15 @@ class FormEditor {
     });
   }
 
-  /**
-   * @returns {Schema}
+  /**
+   * @returns {Schema}
    */
   saveSchema() {
     return this.getSchema();
   }
 
-  /**
-   * @returns {Schema}
+  /**
+   * @returns {Schema}
    */
   getSchema() {
     const {
@@ -10195,8 +10626,8 @@ class FormEditor {
     return exportSchema(schema, this.exporter, formJsViewer.schemaVersion);
   }
 
-  /**
-   * @param {Element|string} parentNode
+  /**
+   * @param {Element|string} parentNode
    */
   attachTo(parentNode) {
     if (!parentNode) {
@@ -10214,10 +10645,10 @@ class FormEditor {
     this._detach();
   }
 
-  /**
-   * @internal
-   *
-   * @param {boolean} [emit]
+  /**
+   * @internal
+   *
+   * @param {boolean} [emit]
    */
   _detach(emit = true) {
     const container = this._container,
@@ -10231,9 +10662,9 @@ class FormEditor {
     parentNode.removeChild(container);
   }
 
-  /**
-   * @param {any} property
-   * @param {any} value
+  /**
+   * @param {any} property
+   * @param {any} value
    */
   setProperty(property, value) {
     const properties = minDash.set(this._getState().properties, [property], value);
@@ -10242,21 +10673,21 @@ class FormEditor {
     });
   }
 
-  /**
-   * @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 {
@@ -10278,22 +10709,22 @@ class FormEditor {
     }, 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 = {
@@ -10303,15 +10734,15 @@ class FormEditor {
     this._emit('changed', this._getState());
   }
 
-  /**
-   * @internal
+  /**
+   * @internal
    */
   _getModules() {
     return [ModelingModule, EditorActionsModule, DraggingModule, KeyboardModule, SelectionModule, PaletteModule, ExpressionLanguageModule, formJsViewer.MarkdownModule, PropertiesPanelModule, RenderInjectionModule];
   }
 
-  /**
-   * @internal
+  /**
+   * @internal
    */
   _onEvent(type, priority, handler) {
     this.get('eventBus').on(type, priority, handler);