@bpmn-io/form-js-editor 0.14.0 → 0.15.0-alpha.0

package/dist/index.cjs

@@ -5,7 +5,7 @@ var Ids = require('ids');
 var minDash = require('min-dash');
 var classnames = require('classnames');
 var jsxRuntime = require('preact/jsx-runtime');
-var hooks$1 = require('preact/hooks');
+var hooks = require('preact/hooks');
 var preact = require('preact');
 var React = require('preact/compat');
 var dragula = require('dragula');
@@ -19,6 +19,30 @@ var FN_REF = '__fn';
 var DEFAULT_PRIORITY$2 = 1000;
 var slice = Array.prototype.slice;
 
+/**
+ * @typedef { {
+ *   stopPropagation(): void;
+ *   preventDefault(): void;
+ *   cancelBubble: boolean;
+ *   defaultPrevented: boolean;
+ *   returnValue: any;
+ * } } Event
+ */
+
+/**
+ * @template E
+ *
+ * @typedef { (event: E & Event, ...any) => any } EventBusEventCallback
+ */
+
+/**
+ * @typedef { {
+ *  priority: number;
+ *  next: EventBusListener | null;
+ *  callback: EventBusEventCallback<any>;
+ * } } EventBusListener
+ */
+
 /**
  * A general purpose event bus.
  *
@@ -103,6 +127,9 @@ var slice = Array.prototype.slice;
  * ```
  */
 function EventBus() {
+  /**
+   * @type { Record<string, EventBusListener> }
+   */
   this._listeners = {};
 
   // cleanup on destroy on lowest priority to allow
@@ -122,10 +149,12 @@ function EventBus() {
  *
  * Returning anything but `undefined` from a listener will stop the listener propagation.
  *
- * @param {string|Array<string>} events
- * @param {number} [priority=1000] the priority in which this listener is called, larger is higher
- * @param {Function} callback
- * @param {Object} [that] Pass context (`this`) to the callback
+ * @template T
+ *
+ * @param {string|string[]} events to subscribe to
+ * @param {number} [priority=1000] listen priority
+ * @param {EventBusEventCallback<T>} callback
+ * @param {any} [that] callback context
  */
 EventBus.prototype.on = function (events, priority, callback, that) {
   events = minDash.isArray(events) ? events : [events];
@@ -157,14 +186,16 @@ EventBus.prototype.on = function (events, priority, callback, that) {
 };
 
 /**
- * Register an event listener that is executed only once.
+ * Register an event listener that is called only once.
+ *
+ * @template T
  *
- * @param {string} event the event name to register for
- * @param {number} [priority=1000] the priority in which this listener is called, larger is higher
- * @param {Function} callback the callback to execute
- * @param {Object} [that] Pass context (`this`) to the callback
+ * @param {string|string[]} events to subscribe to
+ * @param {number} [priority=1000] the listen priority
+ * @param {EventBusEventCallback<T>} callback
+ * @param {any} [that] callback context
  */
-EventBus.prototype.once = function (event, priority, callback, that) {
+EventBus.prototype.once = function (events, priority, callback, that) {
   var self = this;
   if (minDash.isFunction(priority)) {
     that = callback;
@@ -177,7 +208,7 @@ EventBus.prototype.once = function (event, priority, callback, that) {
   function wrappedCallback() {
     wrappedCallback.__isTomb = true;
     var result = callback.apply(that, arguments);
-    self.off(event, wrappedCallback);
+    self.off(events, wrappedCallback);
     return result;
   }
 
@@ -185,7 +216,7 @@ EventBus.prototype.once = function (event, priority, callback, that) {
   // bound callbacks via {@link #off} using the original
   // callback
   wrappedCallback[FN_REF] = callback;
-  this.on(event, priority, wrappedCallback);
+  this.on(events, priority, wrappedCallback);
 };
 
 /**
@@ -193,8 +224,8 @@ EventBus.prototype.once = function (event, priority, callback, that) {
  *
  * If no callback is given, all listeners for a given event name are being removed.
  *
- * @param {string|Array<string>} events
- * @param {Function} [callback]
+ * @param {string|string[]} events
+ * @param {EventBusEventCallback} [callback]
  */
 EventBus.prototype.off = function (events, callback) {
   events = minDash.isArray(events) ? events : [events];
@@ -205,11 +236,11 @@ EventBus.prototype.off = function (events, callback) {
 };
 
 /**
- * Create an EventBus event.
+ * Create an event recognized be the event bus.
  *
- * @param {Object} data
+ * @param {Object} data Event data.
  *
- * @return {Object} event, recognized by the eventBus
+ * @return {Event} An event that will be recognized by the event bus.
  */
 EventBus.prototype.createEvent = function (data) {
   var event = new InternalEvent();
@@ -218,10 +249,11 @@ EventBus.prototype.createEvent = function (data) {
 };
 
 /**
- * Fires a named event.
+ * Fires an event.
  *
  * @example
  *
+ * ```javascript
  * // fire event by name
  * events.fire('foo');
  *
@@ -239,13 +271,13 @@ EventBus.prototype.createEvent = function (data) {
  * });
  *
  * events.fire({ type: 'foo' }, 'I am bar!');
+ * ```
  *
- * @param {string} [name] the optional event name
- * @param {Object} [event] the event object
- * @param {...Object} additional arguments to be passed to the callback functions
+ * @param {string} [type] event type
+ * @param {Object} [data] event or event data
+ * @param {...any} [args] additional arguments the callback will be called with.
  *
- * @return {boolean} the events return value, if specified or false if the
- *                   default action was prevented by listeners
+ * @return {any} The return value. Will be set to `false` if the default was prevented.
  */
 EventBus.prototype.fire = function (type, data) {
   var event, firstListener, returnValue, args;
@@ -297,6 +329,14 @@ EventBus.prototype.fire = function (type, data) {
   }
   return returnValue;
 };
+
+/**
+ * Handle an error by firing an event.
+ *
+ * @param {Error} error The error to be handled.
+ *
+ * @return {boolean} Whether the error was handled.
+ */
 EventBus.prototype.handleError = function (error) {
   return this.fire('error', {
     error: error
@@ -305,6 +345,14 @@ EventBus.prototype.handleError = function (error) {
 EventBus.prototype._destroy = function () {
   this._listeners = {};
 };
+
+/**
+ * @param {Event} event
+ * @param {any[]} args
+ * @param {EventBusListener} listener
+ *
+ * @return {any}
+ */
 EventBus.prototype._invokeListeners = function (event, args, listener) {
   var returnValue;
   while (listener) {
@@ -317,6 +365,14 @@ EventBus.prototype._invokeListeners = function (event, args, listener) {
   }
   return returnValue;
 };
+
+/**
+ * @param {Event} event
+ * @param {any[]} args
+ * @param {EventBusListener} listener
+ *
+ * @return {any}
+ */
 EventBus.prototype._invokeListener = function (event, args, listener) {
   var returnValue;
   if (listener.callback.__isTomb) {
@@ -345,7 +401,7 @@ EventBus.prototype._invokeListener = function (event, args, listener) {
   return returnValue;
 };
 
-/*
+/**
  * Add new listener with a certain priority to the list
  * of listeners (for the given event).
  *
@@ -359,7 +415,7 @@ EventBus.prototype._invokeListener = function (event, args, listener) {
  *    * after: [ 1500, 1500, (new=1300), 1000, 1000, (new=1000) ]
  *
  * @param {string} event
- * @param {Object} listener { priority, callback }
+ * @param {EventBusListener} listener
  */
 EventBus.prototype._addListener = function (event, newListener) {
   var listener = this._getListeners(event),
@@ -390,9 +446,20 @@ EventBus.prototype._addListener = function (event, newListener) {
   // add new listener to back
   previousListener.next = newListener;
 };
+
+/**
+ * @param {string} name
+ *
+ * @return {EventBusListener}
+ */
 EventBus.prototype._getListeners = function (name) {
   return this._listeners[name];
 };
+
+/**
+ * @param {string} name
+ * @param {EventBusListener} listener
+ */
 EventBus.prototype._setListeners = function (name, listener) {
   this._listeners[name] = listener;
 };
@@ -440,18 +507,18 @@ InternalEvent.prototype.init = function (data) {
  * Invoke function. Be fast...
  *
  * @param {Function} fn
- * @param {Array<Object>} args
+ * @param {any[]} args
  *
- * @return {Any}
+ * @return {any}
  */
 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;
@@ -464,11 +531,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;
@@ -484,21 +551,24 @@ class FieldFactory {
     if (!fieldDefinition) {
       throw new Error(`form field of type <${type}> not supported`);
     }
+    const {
+      config
+    } = fieldDefinition;
     if (id && this._formFieldRegistry._ids.assigned(id)) {
       throw new Error(`ID <${id}> already assigned`);
     }
     if (key && this._formFieldRegistry._keys.assigned(key)) {
       throw new Error(`key <${key}> already assigned`);
     }
-    const labelAttrs = applyDefaults && fieldDefinition.label ? {
-      label: fieldDefinition.label
+    const labelAttrs = applyDefaults && config.label ? {
+      label: config.label
     } : {};
-    const field = fieldDefinition.create({
+    const field = config.create({
       ...labelAttrs,
       ...attrs
     });
     this._ensureId(field);
-    if (fieldDefinition.keyed) {
+    if (config.keyed) {
       this._ensureKey(field, applyDefaults);
     }
     return field;
@@ -528,11 +598,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);
@@ -553,13 +623,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) {
@@ -571,12 +641,16 @@ class FormFieldRegistry extends formJsViewer.FormFieldRegistry {
   }
 }
 
+const MAX_COLUMNS_PER_ROW = 16;
+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;
@@ -584,15 +658,15 @@ class FormLayoutValidator {
   }
   validateField(field = {}, columns, row) {
     // allow empty (auto columns)
-    if (columns) {
-      // allow minimum 2 cols
-      if (columns < 2) {
-        return 'Minimum 2 columns are allowed';
+    if (Number.isInteger(columns)) {
+      // allow minimum cols
+      if (columns < MIN_COLUMNS) {
+        return `Minimum ${MIN_COLUMNS} columns are allowed`;
       }
 
-      // allow maximum 16 cols
-      if (columns > 16) {
-        return 'Maximum 16 columns are allowed';
+      // allow maximum cols
+      if (columns > MAX_COLUMNS) {
+        return `Maximum ${MAX_COLUMNS} columns are allowed`;
       }
     }
     if (!row) {
@@ -617,23 +691,30 @@ class FormLayoutValidator {
     });
 
     // do not allow overflows
-    if (sumColumns > 16 || sumColumns === 16 && sumAutoCols > 0 || columns === 16 && sumFields > 1) {
-      return 'New value exceeds the maximum of 16 columns per row';
+    if (sumColumns > MAX_COLUMNS_PER_ROW || sumAutoCols > 0 && sumColumns > calculateMaxColumnsWithAuto(sumAutoCols) || columns === MAX_COLUMNS_PER_ROW && sumFields > 1) {
+      return `New value exceeds the maximum of ${MAX_COLUMNS_PER_ROW} columns per row`;
     }
-    if (sumFields > 4) {
-      return 'Maximum 4 fields per row are allowed';
+    if (sumFields > MAX_FIELDS_PER_ROW) {
+      return `Maximum ${MAX_FIELDS_PER_ROW} fields per row are allowed`;
     }
     return null;
   }
 }
 FormLayoutValidator.$inject = ['formLayouter', 'formFieldRegistry'];
 
+// helper //////////////////////
+
+// on normal screen sizes, auto columns take minimum 2 columns
+function calculateMaxColumnsWithAuto(autoCols) {
+  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;
@@ -641,21 +722,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
@@ -673,12 +754,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 {
@@ -715,11 +796,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) => {
@@ -744,16 +825,101 @@ 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
+ */
+function createDragger(fn, dragPreview) {
+  let self;
+  let startX, startY;
+
+  /** drag start */
+  function onDragStart(event) {
+    self = this;
+    startX = event.clientX;
+    startY = event.clientY;
+
+    // (1) prevent preview image
+    if (event.dataTransfer) {
+      event.dataTransfer.setDragImage(dragPreview, 0, 0);
+    }
+
+    // (2) setup drag listeners
+
+    // attach drag + cleanup event
+    document.addEventListener('dragover', onDrag);
+    document.addEventListener('dragend', onEnd);
+    document.addEventListener('drop', preventDefault);
+  }
+  function onDrag(event) {
+    const delta = {
+      x: event.clientX - startX,
+      y: event.clientY - startY
+    };
+
+    // call provided fn with event, delta
+    return fn.call(self, event, delta);
+  }
+  function onEnd() {
+    document.removeEventListener('dragover', onDrag);
+    document.removeEventListener('dragend', onEnd);
+    document.removeEventListener('drop', preventDefault);
+  }
+  return onDragStart;
+}
+
+/**
+ * Throttle function call according UI update cycle.
+ *
+ * @param  {Function} fn
+ *
+ * @return {Function} throttled fn
+ */
+function throttle(fn) {
+  let active = false;
+  let lastArgs = [];
+  let lastThis = undefined;
+  return function (...args) {
+    lastArgs = args;
+    lastThis = this;
+    if (active) {
+      return;
+    }
+    active = true;
+    fn.apply(lastThis, lastArgs);
+    window.requestAnimationFrame(function () {
+      lastArgs = lastThis = active = undefined;
+    });
+  };
+}
+function preventDefault(event) {
+  event.preventDefault();
+  event.stopPropagation();
+}
+
 const DragAndDropContext = preact.createContext({
   drake: null
 });
 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({
@@ -764,7 +930,7 @@ var FormEditorContext$1 = FormEditorContext;
 function useService$1 (type, strict) {
   const {
     getService
-  } = hooks$1.useContext(FormEditorContext$1);
+  } = hooks.useContext(FormEditorContext$1);
   return getService(type, strict);
 }
 
@@ -784,10 +950,42 @@ var CloseIcon = (({
 })));
 
 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 DraggableIcon = (({
+var DeleteIcon$1 = (({
   styles = {},
   ...props
 }) => /*#__PURE__*/React.createElement("svg", _extends$2({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "16",
+  height: "16",
+  fill: "none"
+}, props), /*#__PURE__*/React.createElement("rect", {
+  width: "16",
+  height: "16",
+  x: ".536",
+  fill: "#fff",
+  rx: "3",
+  style: {
+    mixBlendMode: "multiply"
+  }
+}), /*#__PURE__*/React.createElement("path", {
+  fill: "#fff",
+  d: "M.536 0h16v16h-16z",
+  style: {
+    mixBlendMode: "multiply"
+  }
+}), /*#__PURE__*/React.createElement("path", {
+  fill: "currentcolor",
+  d: "M7.536 6h-1v6h1V6zm3 0h-1v6h1V6z"
+}), /*#__PURE__*/React.createElement("path", {
+  fill: "currentcolor",
+  d: "M2.536 3v1h1v10a1 1 0 001 1h8a1 1 0 001-1V4h1V3h-12zm2 11V4h8v10h-8zm6-13h-4v1h4V1z"
+})));
+
+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 DraggableIcon = (({
+  styles = {},
+  ...props
+}) => /*#__PURE__*/React.createElement("svg", _extends$1({
   xmlns: "http://www.w3.org/2000/svg",
   width: "16",
   height: "16",
@@ -800,11 +998,11 @@ var DraggableIcon = (({
   fill: "none"
 })));
 
-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); }
+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 SearchIcon = (({
   styles = {},
   ...props
-}) => /*#__PURE__*/React.createElement("svg", _extends$1({
+}) => /*#__PURE__*/React.createElement("svg", _extends({
   width: "15",
   height: "15",
   fill: "none",
@@ -860,9 +1058,7 @@ function EditorText(props) {
     disableLinks: true
   });
 }
-EditorText.create = formJsViewer.Text.create;
-EditorText.type = formJsViewer.Text.type;
-EditorText.keyed = formJsViewer.Text.keyed;
+EditorText.config = formJsViewer.Text.config;
 
 const editorFormFields = [EditorText];
 
@@ -870,28 +1066,20 @@ class EditorFormFields extends formJsViewer.FormFields {
   constructor() {
     super();
     editorFormFields.forEach(formField => {
-      this.register(formField.type, formField);
+      this.register(formField.config.type, formField);
     });
   }
 }
 
-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 ListDeleteIcon = (({
-  styles = {},
-  ...props
-}) => /*#__PURE__*/React.createElement("svg", _extends({
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "11",
-  height: "14"
-}, props), /*#__PURE__*/React.createElement("path", {
-  d: "M10 4v8c0 1.1-.9 2-2 2H3c-1.1 0-2-.9-2-2V4h9zM8 6H3v4.8c0 .66.5 1.2 1.111 1.2H6.89C7.5 12 8 11.46 8 10.8V6zm3-5H8.5l-1-1h-4l-1 1H0v1.5h11V1z"
-})));
-
-const PALETTE_ENTRIES = formJsViewer.formFields.filter(f => f.type !== 'default').map(f => {
+const PALETTE_ENTRIES = formJsViewer.formFields.filter(({
+  config: fieldConfig
+}) => fieldConfig.type !== 'default').map(({
+  config: fieldConfig
+}) => {
   return {
-    label: f.label,
-    type: f.type,
-    group: f.group
+    label: fieldConfig.label,
+    type: fieldConfig.type,
+    group: fieldConfig.group
   };
 });
 const PALETTE_GROUPS = [{
@@ -908,27 +1096,32 @@ const PALETTE_GROUPS = [{
   id: 'action'
 }];
 function Palette(props) {
-  const [entries, setEntries] = hooks$1.useState(PALETTE_ENTRIES);
-  const [searchTerm, setSearchTerm] = hooks$1.useState('');
-  const inputRef = hooks$1.useRef();
+  const [entries, setEntries] = hooks.useState(PALETTE_ENTRIES);
+  const [searchTerm, setSearchTerm] = hooks.useState('');
+  const inputRef = hooks.useRef();
   const groups = groupEntries(entries);
+  const simplifyString = hooks.useCallback(str => {
+    return str.toLowerCase().replace(/\s+/g, '');
+  }, []);
+  const filter = hooks.useCallback(entry => {
+    const simplifiedSearchTerm = simplifyString(searchTerm);
+    if (!simplifiedSearchTerm) {
+      return true;
+    }
+    const simplifiedEntryLabel = simplifyString(entry.label);
+    const simplifiedEntryType = simplifyString(entry.type);
+    return simplifiedEntryLabel.includes(simplifiedSearchTerm) || simplifiedEntryType.includes(simplifiedSearchTerm);
+  }, [searchTerm, simplifyString]);
 
   // filter entries on search change
-  hooks$1.useEffect(() => {
-    const filter = entry => {
-      if (!searchTerm) {
-        return true;
-      }
-      const search = entry.label.toLowerCase();
-      return searchTerm.toLowerCase().split(/\s/g).every(term => search.includes(term));
-    };
+  hooks.useEffect(() => {
     const entries = PALETTE_ENTRIES.filter(filter);
     setEntries(entries);
-  }, [searchTerm]);
-  const handleInput = hooks$1.useCallback(event => {
+  }, [filter, searchTerm]);
+  const handleInput = hooks.useCallback(event => {
     setSearchTerm(() => event.target.value);
   }, [setSearchTerm]);
-  const handleClear = hooks$1.useCallback(event => {
+  const handleClear = hooks.useCallback(event => {
     setSearchTerm('');
     inputRef.current.focus();
   }, [inputRef, setSearchTerm]);
@@ -1046,19 +1239,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;
@@ -1068,13 +1261,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 */
@@ -1176,8 +1369,8 @@ class Dragging {
     }
   }
 
-  /**
-   * @param { { container: Array<string>, direction: string, mirrorContainer: string } } options
+  /**
+   * @param { { container: Array<string>, direction: string, mirrorContainer: string } } options
    */
   createDragulaInstance(options) {
     const {
@@ -1337,6 +1530,136 @@ function FieldDragPreview(props) {
   });
 }
 
+const COLUMNS_REGEX = /^cds--col(-lg)?/;
+const ELEMENT_RESIZING_CLS = 'fjs-element-resizing';
+const RESIZE_DRAG_PREVIEW_CLS = 'fjs-resize-drag-preview';
+const GRID_OFFSET_PX = 16;
+function FieldResizer(props) {
+  const {
+    field,
+    position
+  } = props;
+  const ref = hooks.useRef(null);
+  const formLayoutValidator = useService$1('formLayoutValidator');
+  const modeling = useService$1('modeling');
+
+  // we can't use state as we need to
+  // manipulate this inside dragging events
+  const context = hooks.useRef({
+    startColumns: 0,
+    newColumns: 0
+  });
+  const onResize = throttle((_, delta) => {
+    const {
+      x: dx
+    } = delta;
+    const {
+      layout = {}
+    } = field;
+    const newColumns = calculateNewColumns(ref.current, layout.columns || context.current.startColumns, dx, position);
+    const errorMessage = formLayoutValidator.validateField(field, newColumns);
+    if (!errorMessage) {
+      context.current.newColumns = newColumns;
+
+      // make visual updates to preview change
+      const columnNode = ref.current.closest('.fjs-layout-column');
+      removeMatching(columnNode, COLUMNS_REGEX);
+      columnNode.classList.add(`cds--col-lg-${newColumns}`);
+    }
+  });
+  const onResizeStart = event => {
+    const target = getElementNode(field);
+    const parent = getParent(target);
+
+    // create a blank element to use as drag preview
+    // ensure it was only created once
+    let blankPreview = getDragPreviewImage(parent);
+    if (!blankPreview) {
+      blankPreview = document.createElement('div');
+      blankPreview.classList.add(RESIZE_DRAG_PREVIEW_CLS);
+      parent.appendChild(blankPreview);
+    }
+
+    // initialize drag handler
+    const onDragStart = createDragger(onResize, blankPreview);
+    onDragStart(event);
+
+    // mitigate auto columns on the grid that
+    // has a offset of 16px (1rem) to both side
+    const columnNode = getColumnNode(target);
+    const startWidth = columnNode.getBoundingClientRect().width + GRID_OFFSET_PX;
+    context.current.startColumns = asColumns(startWidth, parent);
+    setResizing(target, position);
+  };
+  const onResizeEnd = () => {
+    const {
+      layout = {}
+    } = field;
+    if (context.current.newColumns) {
+      modeling.editFormField(field, 'layout', {
+        ...layout,
+        columns: context.current.newColumns
+      });
+    }
+    const target = getElementNode(field);
+    unsetResizing(target, position);
+    context.current.newColumns = null;
+
+    // remove blank preview
+    const blankPreview = getDragPreviewImage(getParent(target));
+    blankPreview.remove();
+  };
+  if (field.type === 'default') {
+    return null;
+  }
+  return jsxRuntime.jsx("div", {
+    ref: ref,
+    class: classnames('fjs-field-resize-handle', 'fjs-field-resize-handle-' + position, DRAG_NO_MOVE_CLS),
+    draggable: true,
+    onDragStart: onResizeStart,
+    onDragEnd: onResizeEnd
+  });
+}
+
+// helper //////
+
+function asColumns(width, parent) {
+  const totalWidth = parent.getBoundingClientRect().width;
+  const oneColumn = 1 / 16 * totalWidth;
+  return Math.round(width / oneColumn);
+}
+function calculateNewColumns(node, currentColumns, deltaX, position) {
+  const parent = getParent(node);
+
+  // invert delta if we are resizing from the left
+  if (position === 'left') {
+    deltaX = deltaX * -1;
+  }
+  const deltaColumns = asColumns(deltaX, parent);
+  return currentColumns + deltaColumns;
+}
+function getParent(node) {
+  return node.closest('.fjs-layout-row');
+}
+function removeMatching(node, regex) {
+  return minDom.classes(node).removeMatching(regex);
+}
+function getColumnNode(node) {
+  return node.closest('.fjs-layout-column');
+}
+function getElementNode(field) {
+  return minDom.query('.fjs-element[data-id="' + field.id + '"]');
+}
+function getDragPreviewImage(node) {
+  return minDom.query('.fjs-resize-drag-preview', node);
+}
+function setResizing(node, position) {
+  minDom.classes(node).add(ELEMENT_RESIZING_CLS + '-' + position);
+}
+function unsetResizing(node, position) {
+  minDom.classes(node).remove(ELEMENT_RESIZING_CLS + '-' + position);
+}
+
 function ContextPad(props) {
   if (!props.children) {
     return null;
@@ -1362,7 +1685,7 @@ function Element(props) {
     id,
     type
   } = field;
-  const ref = hooks$1.useRef();
+  const ref = hooks.useRef();
   function scrollIntoView({
     selection
   }) {
@@ -1375,7 +1698,7 @@ function Element(props) {
       ref.current.scrollIntoView();
     }
   }
-  hooks$1.useEffect(() => {
+  hooks.useEffect(() => {
     eventBus.on('selection.changed', scrollIntoView);
     return () => eventBus.off('selection.changed', scrollIntoView);
   }, [id]);
@@ -1408,9 +1731,15 @@ function Element(props) {
       children: selection.isSelected(field) && field.type !== 'default' ? jsxRuntime.jsx("button", {
         class: "fjs-context-pad-item",
         onClick: onRemove,
-        children: jsxRuntime.jsx(ListDeleteIcon, {})
+        children: jsxRuntime.jsx(DeleteIcon$1, {})
       }) : null
-    }), props.children]
+    }), props.children, jsxRuntime.jsx(FieldResizer, {
+      position: "left",
+      field: field
+    }), jsxRuntime.jsx(FieldResizer, {
+      position: "right",
+      field: field
+    })]
   });
 }
 function DebugColumns(props) {
@@ -1422,7 +1751,7 @@ function DebugColumns(props) {
     return null;
   }
   return jsxRuntime.jsx("div", {
-    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;",
+    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;",
     class: "fjs-debug-columns",
     children: (field.layout || {}).columns || 'auto'
   });
@@ -1495,13 +1824,17 @@ function FormEditor$1(props) {
     propertiesPanel = useService$1('propertiesPanel'),
     propertiesPanelConfig = useService$1('config.propertiesPanel');
   const {
-    schema
+    schema,
+    properties
   } = formEditor._getState();
-  const formContainerRef = hooks$1.useRef(null);
-  const paletteRef = hooks$1.useRef(null);
-  const propertiesPanelRef = hooks$1.useRef(null);
-  const [, setSelection] = hooks$1.useState(schema);
-  hooks$1.useEffect(() => {
+  const {
+    ariaLabel
+  } = properties;
+  const formContainerRef = hooks.useRef(null);
+  const paletteRef = hooks.useRef(null);
+  const propertiesPanelRef = hooks.useRef(null);
+  const [, setSelection] = hooks.useState(schema);
+  hooks.useEffect(() => {
     function handleSelectionChanged(event) {
       setSelection(event.selection || schema);
     }
@@ -1511,11 +1844,11 @@ function FormEditor$1(props) {
       eventBus.off('selection.changed', handleSelectionChanged);
     };
   }, [schema, selection]);
-  const [drake, setDrake] = hooks$1.useState(null);
+  const [drake, setDrake] = hooks.useState(null);
   const dragAndDropContext = {
     drake
   };
-  hooks$1.useEffect(() => {
+  hooks.useEffect(() => {
     let dragulaInstance = dragging.createDragulaInstance({
       container: [DRAG_CONTAINER_CLS, DROP_CONTAINER_VERTICAL_CLS, DROP_CONTAINER_HORIZONTAL_CLS],
       direction: 'vertical',
@@ -1562,7 +1895,7 @@ function FormEditor$1(props) {
   }, []);
 
   // fire event after render to notify interested parties
-  hooks$1.useEffect(() => {
+  hooks.useEffect(() => {
     eventBus.fire('formEditor.rendered');
   }, []);
   const formRenderContext = {
@@ -1582,6 +1915,7 @@ function FormEditor$1(props) {
               data: {},
               errors: {},
               properties: {
+                ariaLabel,
                 readOnly: true
               },
               schema
@@ -1593,12 +1927,12 @@ function FormEditor$1(props) {
     },
     formId: formEditor._id
   };
-  const onSubmit = hooks$1.useCallback(() => {}, []);
-  const onReset = hooks$1.useCallback(() => {}, []);
+  const onSubmit = hooks.useCallback(() => {}, []);
+  const onReset = hooks.useCallback(() => {}, []);
 
   // attach default palette
   const hasDefaultPalette = defaultPalette(paletteConfig);
-  hooks$1.useEffect(() => {
+  hooks.useEffect(() => {
     if (hasDefaultPalette) {
       palette.attachTo(paletteRef.current);
     }
@@ -1606,7 +1940,7 @@ function FormEditor$1(props) {
 
   // attach default properties panel
   const hasDefaultPropertiesPanel = defaultPropertiesPanel(propertiesPanelConfig);
-  hooks$1.useEffect(() => {
+  hooks.useEffect(() => {
     if (hasDefaultPropertiesPanel) {
       propertiesPanel.attachTo(propertiesPanelRef.current);
     }
@@ -1652,7 +1986,7 @@ function getFormFieldIndex(parent, formField) {
 function CreatePreview(props) {
   const {
     drake
-  } = hooks$1.useContext(DragAndDropContext$1);
+  } = hooks.useContext(DragAndDropContext$1);
   function handleCloned(clone, original, type) {
     const fieldType = clone.dataset.fieldType;
 
@@ -1690,7 +2024,7 @@ function CreatePreview(props) {
       clone.classList.add('cds--grid--condensed');
     }
   }
-  hooks$1.useEffect(() => {
+  hooks.useEffect(() => {
     if (!drake) {
       return;
     }
@@ -1719,7 +2053,7 @@ class Renderer {
       compact = false
     } = renderConfig;
     const App = () => {
-      const [state, setState] = hooks$1.useState(formEditor._getState());
+      const [state, setState] = hooks.useState(formEditor._getState());
       const formEditorContext = {
         getService(type, strict = true) {
           return injector.get(type, strict);
@@ -1768,6 +2102,12 @@ var core = {
   fieldFactory: ['type', FieldFactory]
 };
 
+/**
+ * @typedef {import('didi').Injector} Injector
+ *
+ * @typedef {import('../../core/EventBus').default} EventBus
+ */
+
 var NOT_REGISTERED_ERROR = 'is not a registered action',
   IS_REGISTERED_ERROR = 'is already registered';
 
@@ -1897,10 +2237,10 @@ EditorActions.prototype._registerDefaultActions = function (injector) {
 /**
  * Triggers a registered action
  *
- * @param  {string} action
- * @param  {Object} opts
+ * @param {string} action
+ * @param {Object} opts
  *
- * @return {Unknown} Returns what the registered listener returns
+ * @return {unknown} Returns what the registered listener returns
  */
 EditorActions.prototype.trigger = function (action, opts) {
   if (!this._actions[action]) {
@@ -1929,7 +2269,7 @@ EditorActions.prototype.trigger = function (action, opts) {
  * editorActions.isRegistered('spaceTool'); // true
  * ´´´
  *
- * @param  {Object} actions
+ * @param {Object} actions
  */
 EditorActions.prototype.register = function (actions, listener) {
   var self = this;
@@ -1944,8 +2284,8 @@ EditorActions.prototype.register = function (actions, listener) {
 /**
  * Registers a listener to an action key
  *
- * @param  {string} action
- * @param  {Function} listener
+ * @param {string} action
+ * @param {Function} listener
  */
 EditorActions.prototype._registerAction = function (action, listener) {
   if (this.isRegistered(action)) {
@@ -1989,6 +2329,9 @@ function error(action, message) {
   return new Error(action + ' ' + message);
 }
 
+/**
+ * @type { import('didi').ModuleDeclaration }
+ */
 var EditorActionsModule$1 = {
   __init__: ['editorActions'],
   editorActions: ['type', EditorActions]
@@ -2048,10 +2391,10 @@ var DraggingModule = {
   dragging: ['type', Dragging]
 };
 
-var KEYS_COPY = ['c', 'C', 'KeyC'];
-var KEYS_PASTE = ['v', 'V', 'KeyV'];
-var KEYS_REDO$1 = ['y', 'Y', 'KeyY'];
-var KEYS_UNDO$1 = ['z', 'Z', 'KeyZ'];
+var KEYS_COPY = ['c', 'C'];
+var KEYS_PASTE = ['v', 'V'];
+var KEYS_REDO = ['y', 'Y'];
+var KEYS_UNDO = ['z', 'Z'];
 
 /**
  * Returns true if event was triggered with any modifier
@@ -2076,7 +2419,7 @@ function isCmd(event) {
 /**
  * Checks if key pressed is one of provided keys.
  *
- * @param {string|Array<string>} keys
+ * @param {string|string[]} keys
  * @param {KeyboardEvent} event
  */
 function isKey(keys, event) {
@@ -2097,12 +2440,16 @@ function isPaste(event) {
   return isCmd(event) && isKey(KEYS_PASTE, event);
 }
 function isUndo(event) {
-  return isCmd(event) && !isShift(event) && isKey(KEYS_UNDO$1, event);
+  return isCmd(event) && !isShift(event) && isKey(KEYS_UNDO, event);
 }
 function isRedo(event) {
-  return isCmd(event) && (isKey(KEYS_REDO$1, event) || isKey(KEYS_UNDO$1, event) && isShift(event));
+  return isCmd(event) && (isKey(KEYS_REDO, event) || isKey(KEYS_UNDO, event) && isShift(event));
 }
 
+/**
+ * @typedef {import('../../core/EventBus').default} EventBus
+ */
+
 var KEYDOWN_EVENT = 'keyboard.keydown',
   KEYUP_EVENT = 'keyboard.keyup';
 var HANDLE_MODIFIER_ATTRIBUTE = 'input-handle-modified-keys';
@@ -2129,7 +2476,7 @@ var DEFAULT_PRIORITY$1 = 1000;
  * A default binding for the keyboard may be specified via the
  * `keyboard.bindTo` configuration option.
  *
- * @param {Config} config
+ * @param {Object} config
  * @param {EventBus} eventBus
  */
 function Keyboard(config, eventBus) {
@@ -2258,8 +2605,6 @@ function isInput(target) {
 }
 
 var LOW_PRIORITY$1 = 500;
-var KEYS_REDO = ['y', 'Y', 'KeyY'];
-var KEYS_UNDO = ['z', 'Z', 'KeyZ'];
 
 /**
  * Adds default keyboard bindings.
@@ -2390,6 +2735,9 @@ KeyboardBindings.prototype.registerBindings = function (keyboard, editorActions)
   });
 };
 
+/**
+ * @type { import('didi').ModuleDeclaration }
+ */
 var KeyboardModule$1 = {
   __init__: ['keyboard', 'keyboardBindings'],
   keyboard: ['type', Keyboard],
@@ -2469,10 +2817,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;
@@ -2533,10 +2881,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;
@@ -2599,10 +2947,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;
@@ -2691,10 +3039,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;
@@ -2754,9 +3102,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;
@@ -2789,9 +3137,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;
@@ -2925,32 +3273,46 @@ class Modeling {
 }
 Modeling.$inject = ['commandStack', 'eventBus', 'formEditor', 'formFieldRegistry', 'fieldFactory'];
 
+/**
+ * @typedef {import('../core/Types').ElementLike} ElementLike
+ * @typedef {import('../core/EventBus').default} EventBus
+ * @typedef {import('./CommandStack').CommandContext} CommandContext
+ *
+ * @typedef {string|string[]} Events
+ * @typedef { (context: CommandContext) => ElementLike[] | void } HandlerFunction
+ * @typedef { (context: CommandContext) => void } ComposeHandlerFunction
+ */
+
 var DEFAULT_PRIORITY = 1000;
 
 /**
- * A utility that can be used to plug-in into the command execution for
+ * A utility that can be used to plug into the command execution for
  * extension and/or validation.
  *
- * @param {EventBus} eventBus
+ * @class
+ * @constructor
  *
  * @example
  *
- * import inherits from 'inherits-browser';
- *
+ * ```javascript
  * import CommandInterceptor from 'diagram-js/lib/command/CommandInterceptor';
  *
- * function CommandLogger(eventBus) {
- *   CommandInterceptor.call(this, eventBus);
+ * class CommandLogger extends CommandInterceptor {
+ *   constructor(eventBus) {
+ *     super(eventBus);
  *
- *   this.preExecute(function(event) {
- *     console.log('command pre-execute', event);
+ *   this.preExecute('shape.create', (event) => {
+ *     console.log('commandStack.shape-create.preExecute', event);
  *   });
  * }
+ * ```
  *
- * inherits(CommandLogger, CommandInterceptor);
- *
+ * @param {EventBus} eventBus
  */
 function CommandInterceptor(eventBus) {
+  /**
+   * @type {EventBus}
+   */
   this._eventBus = eventBus;
 }
 CommandInterceptor.$inject = ['eventBus'];
@@ -2961,15 +3323,14 @@ function unwrapEvent(fn, that) {
 }
 
 /**
- * Register an interceptor for a command execution
- *
- * @param {string|Array<string>} [events] list of commands to register on
- * @param {string} [hook] command hook, i.e. preExecute, executed to listen on
- * @param {number} [priority] the priority on which to hook into the execution
- * @param {Function} handlerFn interceptor to be invoked with (event)
- * @param {boolean} unwrap if true, unwrap the event and pass (context, command, event) to the
- *                          listener instead
- * @param {Object} [that] Pass context (`this`) to the handler function
+ * Intercept a command during one of the phases.
+ *
+ * @param {Events} [events] command(s) to intercept
+ * @param {string} [hook] phase to intercept
+ * @param {number} [priority]
+ * @param {ComposeHandlerFunction|HandlerFunction} handlerFn
+ * @param {boolean} [unwrap] whether the event should be unwrapped
+ * @param {any} [that]
  */
 CommandInterceptor.prototype.on = function (events, hook, priority, handlerFn, unwrap, that) {
   if (minDash.isFunction(hook) || minDash.isNumber(hook)) {
@@ -3004,28 +3365,130 @@ CommandInterceptor.prototype.on = function (events, hook, priority, handlerFn, u
     eventBus.on(fullEvent, priority, unwrap ? unwrapEvent(handlerFn, that) : handlerFn, that);
   });
 };
-var hooks = ['canExecute', 'preExecute', 'preExecuted', 'execute', 'executed', 'postExecute', 'postExecuted', 'revert', 'reverted'];
+
+/**
+ * Add a <canExecute> phase of command interceptor.
+ *
+ * @param {Events} [events] command(s) to intercept
+ * @param {number} [priority]
+ * @param {ComposeHandlerFunction|HandlerFunction} handlerFn
+ * @param {boolean} [unwrap] whether the event should be unwrapped
+ * @param {any} [that]
+ */
+CommandInterceptor.prototype.canExecute = createHook('canExecute');
+
+/**
+ * Add a <preExecute> phase of command interceptor.
+ *
+ * @param {Events} [events] command(s) to intercept
+ * @param {number} [priority]
+ * @param {ComposeHandlerFunction|HandlerFunction} handlerFn
+ * @param {boolean} [unwrap] whether the event should be unwrapped
+ * @param {any} [that]
+ */
+CommandInterceptor.prototype.preExecute = createHook('preExecute');
+
+/**
+ * Add a <preExecuted> phase of command interceptor.
+ *
+ * @param {Events} [events] command(s) to intercept
+ * @param {number} [priority]
+ * @param {ComposeHandlerFunction|HandlerFunction} handlerFn
+ * @param {boolean} [unwrap] whether the event should be unwrapped
+ * @param {any} [that]
+ */
+CommandInterceptor.prototype.preExecuted = createHook('preExecuted');
+
+/**
+ * Add a <execute> phase of command interceptor.
+ *
+ * @param {Events} [events] command(s) to intercept
+ * @param {number} [priority]
+ * @param {ComposeHandlerFunction|HandlerFunction} handlerFn
+ * @param {boolean} [unwrap] whether the event should be unwrapped
+ * @param {any} [that]
+ */
+CommandInterceptor.prototype.execute = createHook('execute');
+
+/**
+ * Add a <executed> phase of command interceptor.
+ *
+ * @param {Events} [events] command(s) to intercept
+ * @param {number} [priority]
+ * @param {ComposeHandlerFunction|HandlerFunction} handlerFn
+ * @param {boolean} [unwrap] whether the event should be unwrapped
+ * @param {any} [that]
+ */
+CommandInterceptor.prototype.executed = createHook('executed');
+
+/**
+ * Add a <postExecute> phase of command interceptor.
+ *
+ * @param {Events} [events] command(s) to intercept
+ * @param {number} [priority]
+ * @param {ComposeHandlerFunction|HandlerFunction} handlerFn
+ * @param {boolean} [unwrap] whether the event should be unwrapped
+ * @param {any} [that]
+ */
+CommandInterceptor.prototype.postExecute = createHook('postExecute');
+
+/**
+ * Add a <postExecuted> phase of command interceptor.
+ *
+ * @param {Events} [events] command(s) to intercept
+ * @param {number} [priority]
+ * @param {ComposeHandlerFunction|HandlerFunction} handlerFn
+ * @param {boolean} [unwrap] whether the event should be unwrapped
+ * @param {any} [that]
+ */
+CommandInterceptor.prototype.postExecuted = createHook('postExecuted');
+
+/**
+ * Add a <revert> phase of command interceptor.
+ *
+ * @param {Events} [events] command(s) to intercept
+ * @param {number} [priority]
+ * @param {ComposeHandlerFunction|HandlerFunction} handlerFn
+ * @param {boolean} [unwrap] whether the event should be unwrapped
+ * @param {any} [that]
+ */
+CommandInterceptor.prototype.revert = createHook('revert');
+
+/**
+ * Add a <reverted> phase of command interceptor.
+ *
+ * @param {Events} [events] command(s) to intercept
+ * @param {number} [priority]
+ * @param {ComposeHandlerFunction|HandlerFunction} handlerFn
+ * @param {boolean} [unwrap] whether the event should be unwrapped
+ * @param {any} [that]
+ */
+CommandInterceptor.prototype.reverted = createHook('reverted');
 
 /*
- * Install hook shortcuts
+ * Add prototype methods for each phase of command execution (e.g. execute,
+ * revert).
  *
- * This will generate the CommandInterceptor#(preExecute|...|reverted) methods
- * which will in term forward to CommandInterceptor#on.
+ * @param {string} hook
+ *
+ * @return { (
+ *   events?: Events,
+ *   priority?: number,
+ *   handlerFn: ComposeHandlerFunction|HandlerFunction,
+ *   unwrap?: boolean
+ * ) => any }
  */
-minDash.forEach(hooks, function (hook) {
+function createHook(hook) {
   /**
-   * {canExecute|preExecute|preExecuted|execute|executed|postExecute|postExecuted|revert|reverted}
-   *
-   * A named hook for plugging into the command execution
+   * @this {CommandInterceptor}
    *
-   * @param {string|Array<string>} [events] list of commands to register on
-   * @param {number} [priority] the priority on which to hook into the execution
-   * @param {Function} handlerFn interceptor to be invoked with (event)
-   * @param {boolean} [unwrap=false] if true, unwrap the event and pass (context, command, event) to the
-   *                          listener instead
-   * @param {Object} [that] Pass context (`this`) to the handler function
+   * @param {Events} [events]
+   * @param {number} [priority]
+   * @param {ComposeHandlerFunction|HandlerFunction} handlerFn
+   * @param {boolean} [unwrap]
+   * @param {any} [that]
    */
-  CommandInterceptor.prototype[hook] = function (events, priority, handlerFn, unwrap, that) {
+  const hookFn = function (events, priority, handlerFn, unwrap, that) {
     if (minDash.isFunction(events) || minDash.isNumber(events)) {
       that = unwrap;
       unwrap = handlerFn;
@@ -3035,7 +3498,8 @@ minDash.forEach(hooks, function (hook) {
     }
     this.on(events, hook, priority, handlerFn, unwrap, that);
   };
-});
+  return hookFn;
+}
 
 class FormLayoutUpdater extends CommandInterceptor {
   constructor(eventBus, formLayouter, modeling, formEditor) {
@@ -3141,8 +3605,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) {
@@ -3173,6 +3637,34 @@ var behaviorModule = {
   validateBehavior: ['type', ValidateBehavior]
 };
 
+/**
+ * @typedef {import('didi').Injector} Injector
+ *
+ * @typedef {import('../core/Types').ElementLike} ElementLike
+ *
+ * @typedef {import('../core/EventBus').default} EventBus
+ * @typedef {import('./CommandHandler').default} CommandHandler
+ *
+ * @typedef { any } CommandContext
+ * @typedef { {
+ *   new (...args: any[]) : CommandHandler
+ * } } CommandHandlerConstructor
+ * @typedef { {
+ *   [key: string]: CommandHandler;
+ * } } CommandHandlerMap
+ * @typedef { {
+ *   command: string;
+ *   context: any;
+ *   id?: any;
+ * } } CommandStackAction
+ * @typedef { {
+ *   actions: CommandStackAction[];
+ *   dirty: ElementLike[];
+ *   trigger: 'execute' | 'undo' | 'redo' | 'clear' | null;
+ *   atomic?: boolean;
+ * } } CurrentExecution
+ */
+
 /**
  * A service that offers un- and redoable execution of commands.
  *
@@ -3223,7 +3715,7 @@ var behaviorModule = {
  * got changed during the `execute` and `revert` operations.
  *
  * Command handlers may execute other modeling operations (and thus
- * commands) in their `preExecute` and `postExecute` phases. The command
+ * commands) in their `preExecute(d)` and `postExecute(d)` phases. The command
  * stack will properly group all commands together into a logical unit
  * that may be re- and undone atomically.
  *
@@ -3253,14 +3745,14 @@ function CommandStack(eventBus, injector) {
   /**
    * A map of all registered command handlers.
    *
-   * @type {Object}
+   * @type {CommandHandlerMap}
    */
   this._handlerMap = {};
 
   /**
    * A stack containing all re/undoable actions on the diagram
    *
-   * @type {Array<Object>}
+   * @type {CommandStackAction[]}
    */
   this._stack = [];
 
@@ -3274,18 +3766,27 @@ function CommandStack(eventBus, injector) {
   /**
    * Current active commandStack execution
    *
-   * @type {Object}
-   * @property {Object[]} actions
-   * @property {Object[]} dirty
-   * @property { 'undo' | 'redo' | 'clear' | 'execute' | null } trigger the cause of the current excecution
+   * @type {CurrentExecution}
    */
   this._currentExecution = {
     actions: [],
     dirty: [],
     trigger: null
   };
+
+  /**
+   * @type {Injector}
+   */
   this._injector = injector;
+
+  /**
+   * @type EventBus
+   */
   this._eventBus = eventBus;
+
+  /**
+   * @type { number }
+   */
   this._uid = 1;
   eventBus.on(['diagram.destroy', 'diagram.clear'], function () {
     this.clear(false);
@@ -3294,10 +3795,10 @@ function CommandStack(eventBus, injector) {
 CommandStack.$inject = ['eventBus', 'injector'];
 
 /**
- * Execute a command
+ * Execute a command.
  *
- * @param {string} command the command to execute
- * @param {Object} context the environment to execute the command in
+ * @param {string} command The command to execute.
+ * @param {CommandContext} context The context with which to execute the command.
  */
 CommandStack.prototype.execute = function (command, context) {
   if (!command) {
@@ -3310,11 +3811,11 @@ CommandStack.prototype.execute = function (command, context) {
   };
   this._pushAction(action);
   this._internalExecute(action);
-  this._popAction(action);
+  this._popAction();
 };
 
 /**
- * Ask whether a given command can be executed.
+ * Check whether a command can be executed.
  *
  * Implementors may hook into the mechanism on two ways:
  *
@@ -3328,10 +3829,10 @@ CommandStack.prototype.execute = function (command, context) {
  *     If the method {@link CommandHandler#canExecute} is implemented in a handler
  *     it will be called to figure out whether the execution is allowed.
  *
- * @param  {string} command the command to execute
- * @param  {Object} context the environment to execute the command in
+ * @param {string} command The command to execute.
+ * @param {CommandContext} context The context with which to execute the command.
  *
- * @return {boolean} true if the command can be executed
+ * @return {boolean} Whether the command can be executed with the given context.
  */
 CommandStack.prototype.canExecute = function (command, context) {
   const action = {
@@ -3355,7 +3856,9 @@ CommandStack.prototype.canExecute = function (command, context) {
 };
 
 /**
- * Clear the command stack, erasing all undo / redo history
+ * Clear the command stack, erasing all undo / redo history.
+ *
+ * @param {boolean} [emit=true] Whether to fire an event. Defaults to `true`.
  */
 CommandStack.prototype.clear = function (emit) {
   this._stack.length = 0;
@@ -3410,21 +3913,21 @@ CommandStack.prototype.redo = function () {
 };
 
 /**
- * Register a handler instance with the command stack
+ * Register a handler instance with the command stack.
  *
- * @param {string} command
- * @param {CommandHandler} handler
+ * @param {string} command Command to be executed.
+ * @param {CommandHandler} handler Handler to execute the command.
  */
 CommandStack.prototype.register = function (command, handler) {
   this._setHandler(command, handler);
 };
 
 /**
- * Register a handler type with the command stack
- * by instantiating it and injecting its dependencies.
+ * Register a handler type with the command stack  by instantiating it and
+ * injecting its dependencies.
  *
- * @param {string} command
- * @param {Function} a constructor for a {@link CommandHandler}
+ * @param {string} command Command to be executed.
+ * @param {CommandHandlerConstructor} handlerCls Constructor to instantiate a {@link CommandHandler}.
  */
 CommandStack.prototype.registerHandler = function (command, handlerCls) {
   if (!command || !handlerCls) {
@@ -3433,9 +3936,17 @@ CommandStack.prototype.registerHandler = function (command, handlerCls) {
   const handler = this._injector.instantiate(handlerCls);
   this.register(command, handler);
 };
+
+/**
+ * @return {boolean}
+ */
 CommandStack.prototype.canUndo = function () {
   return !!this._getUndoAction();
 };
+
+/**
+ * @return {boolean}
+ */
 CommandStack.prototype.canRedo = function () {
   return !!this._getRedoAction();
 };
@@ -3529,7 +4040,7 @@ CommandStack.prototype._internalExecute = function (action, redo) {
     }
     this._fire(command, 'postExecuted', action);
   }
-  this._popAction(action);
+  this._popAction();
 };
 CommandStack.prototype._pushAction = function (action) {
   const execution = this._currentExecution,
@@ -3590,6 +4101,9 @@ CommandStack.prototype._setHandler = function (command, handler) {
   this._handlerMap[command] = handler;
 };
 
+/**
+ * @type { import('didi').ModuleDeclaration }
+ */
 var commandModule = {
   commandStack: ['type', CommandStack]
 };
@@ -3687,10 +4201,10 @@ class PaletteRenderer {
     });
   }
 
-  /**
-   * Attach the palette to a parent node.
-   *
-   * @param {HTMLElement} container
+  /**
+   * Attach the palette to a parent node.
+   *
+   * @param {HTMLElement} container
    */
   attachTo(container) {
     if (!container) {
@@ -3710,8 +4224,8 @@ class PaletteRenderer {
     this._eventBus.fire('palette.attach');
   }
 
-  /**
-   * Detach the palette from its parent node.
+  /**
+   * Detach the palette from its parent node.
    */
   detach() {
     const parentNode = this._container.parentNode;
@@ -3935,13 +4449,13 @@ const LayoutContext = preact.createContext({
 function useDescriptionContext(id, element) {
   const {
     getDescriptionForId
-  } = hooks$1.useContext(DescriptionContext);
+  } = hooks.useContext(DescriptionContext);
   return getDescriptionForId(id, element);
 }
 function useError(id) {
   const {
     errors
-  } = hooks$1.useContext(ErrorsContext);
+  } = hooks.useContext(ErrorsContext);
   return errors[id];
 }
 
@@ -3952,13 +4466,13 @@ function useError(id) {
  * @param {Function} callback
  */
 function useEvent(event, callback, eventBus) {
-  const eventContext = hooks$1.useContext(EventContext);
+  const eventContext = hooks.useContext(EventContext);
   if (!eventBus) {
     ({
       eventBus
     } = eventContext);
   }
-  const didMount = hooks$1.useRef(false);
+  const didMount = hooks.useRef(false);
 
   // (1) subscribe immediately
   if (eventBus && !didMount.current) {
@@ -3966,7 +4480,7 @@ function useEvent(event, callback, eventBus) {
   }
 
   // (2) update subscription after inputs changed
-  hooks$1.useEffect(() => {
+  hooks.useEffect(() => {
     if (eventBus && didMount.current) {
       eventBus.on(event, callback);
     }
@@ -3998,9 +4512,9 @@ function useLayoutState(path, defaultValue) {
   const {
     getLayoutForKey,
     setLayoutForKey
-  } = hooks$1.useContext(LayoutContext);
+  } = hooks.useContext(LayoutContext);
   const layoutForKey = getLayoutForKey(path, defaultValue);
-  const setState = hooks$1.useCallback(newValue => {
+  const setState = hooks.useCallback(newValue => {
     setLayoutForKey(path, newValue);
   }, [setLayoutForKey]);
   return [layoutForKey, setState];
@@ -4014,8 +4528,8 @@ function useLayoutState(path, defaultValue) {
  */
 
 function usePrevious(value) {
-  const ref = hooks$1.useRef();
-  hooks$1.useEffect(() => {
+  const ref = hooks.useRef();
+  hooks.useEffect(() => {
     ref.current = value;
   });
   return ref.current;
@@ -4031,10 +4545,10 @@ function usePrevious(value) {
 function useShowEntryEvent(id) {
   const {
     onShow
-  } = hooks$1.useContext(LayoutContext);
-  const ref = hooks$1.useRef();
-  const focus = hooks$1.useRef(false);
-  const onShowEntry = hooks$1.useCallback(event => {
+  } = hooks.useContext(LayoutContext);
+  const ref = hooks.useRef();
+  const focus = hooks.useRef(false);
+  const onShowEntry = hooks.useCallback(event => {
     if (event.id === id) {
       onShow();
       if (!focus.current) {
@@ -4042,7 +4556,7 @@ function useShowEntryEvent(id) {
       }
     }
   }, [id]);
-  hooks$1.useEffect(() => {
+  hooks.useEffect(() => {
     if (focus.current && ref.current) {
       if (minDash.isFunction(ref.current.focus)) {
         ref.current.focus();
@@ -4073,7 +4587,7 @@ function useShowEntryEvent(id) {
  * @param {setSticky} setSticky
  */
 function useStickyIntersectionObserver(ref, scrollContainerSelector, setSticky) {
-  hooks$1.useEffect(() => {
+  hooks.useEffect(() => {
     const Observer = IntersectionObserver;
 
     // return early if IntersectionObserver is not available
@@ -4124,9 +4638,9 @@ function useStickyIntersectionObserver(ref, scrollContainerSelector, setSticky)
  * @returns {Function} static function reference
  */
 function useStaticCallback(callback) {
-  const callbackRef = hooks$1.useRef(callback);
+  const callbackRef = hooks.useRef(callback);
   callbackRef.current = callback;
-  return hooks$1.useCallback((...args) => callbackRef.current(...args), []);
+  return hooks.useCallback((...args) => callbackRef.current(...args), []);
 }
 function Group(props) {
   const {
@@ -4136,15 +4650,15 @@ function Group(props) {
     label,
     shouldOpen = false
   } = props;
-  const groupRef = hooks$1.useRef(null);
+  const groupRef = hooks.useRef(null);
   const [open, setOpen] = useLayoutState(['groups', id, 'open'], shouldOpen);
-  const onShow = hooks$1.useCallback(() => setOpen(true), [setOpen]);
+  const onShow = hooks.useCallback(() => setOpen(true), [setOpen]);
   const toggleOpen = () => setOpen(!open);
-  const [edited, setEdited] = hooks$1.useState(false);
-  const [sticky, setSticky] = hooks$1.useState(false);
+  const [edited, setEdited] = hooks.useState(false);
+  const [sticky, setSticky] = hooks.useState(false);
 
   // set edited state depending on all entries
-  hooks$1.useEffect(() => {
+  hooks.useEffect(() => {
     const hasOneEditedEntry = entries.find(entry => {
       const {
         id,
@@ -4163,7 +4677,7 @@ function Group(props) {
   // set css class when group is sticky to top
   useStickyIntersectionObserver(groupRef, 'div.bio-properties-panel-scroll-container', setSticky);
   const propertiesPanelContext = {
-    ...hooks$1.useContext(LayoutContext),
+    ...hooks.useContext(LayoutContext),
     onShow
   };
   return jsxRuntime.jsxs("div", {
@@ -4325,14 +4839,14 @@ function PropertiesPanel(props) {
   } = props;
 
   // set-up layout context
-  const [layout, setLayout] = hooks$1.useState(createLayout(layoutConfig));
+  const [layout, setLayout] = hooks.useState(createLayout(layoutConfig));
 
   // react to external changes in the layout config
   useUpdateEffect(() => {
     const newLayout = createLayout(layoutConfig);
     setLayout(newLayout);
   }, [layoutConfig]);
-  hooks$1.useEffect(() => {
+  hooks.useEffect(() => {
     if (typeof layoutChanged === 'function') {
       layoutChanged(layout);
     }
@@ -4353,8 +4867,8 @@ function PropertiesPanel(props) {
   };
 
   // set-up description context
-  const description = hooks$1.useMemo(() => createDescriptionContext(descriptionConfig), [descriptionConfig]);
-  hooks$1.useEffect(() => {
+  const description = hooks.useMemo(() => createDescriptionContext(descriptionConfig), [descriptionConfig]);
+  hooks.useEffect(() => {
     if (typeof descriptionLoaded === 'function') {
       descriptionLoaded(description);
     }
@@ -4366,7 +4880,7 @@ function PropertiesPanel(props) {
     description,
     getDescriptionForId
   };
-  const [errors, setErrors] = hooks$1.useState({});
+  const [errors, setErrors] = hooks.useState({});
   const onSetErrors = ({
     errors
   }) => setErrors(errors);
@@ -4455,8 +4969,8 @@ function createDescriptionContext(overrides = {}) {
  * @param {Array} deps
  */
 function useUpdateEffect(effect, deps) {
-  const isMounted = hooks$1.useRef(false);
-  hooks$1.useEffect(() => {
+  const isMounted = hooks.useRef(false);
+  hooks.useEffect(() => {
     if (isMounted.current) {
       return effect();
     } else {
@@ -4473,14 +4987,14 @@ function CollapsibleEntry(props) {
     open: shouldOpen,
     remove
   } = props;
-  const [open, setOpen] = hooks$1.useState(shouldOpen);
+  const [open, setOpen] = hooks.useState(shouldOpen);
   const toggleOpen = () => setOpen(!open);
   const {
     onShow
-  } = hooks$1.useContext(LayoutContext);
+  } = hooks.useContext(LayoutContext);
   const propertiesPanelContext = {
-    ...hooks$1.useContext(LayoutContext),
-    onShow: hooks$1.useCallback(() => {
+    ...hooks.useContext(LayoutContext),
+    onShow: hooks.useCallback(() => {
       setOpen(true);
       if (minDash.isFunction(onShow)) {
         onShow();
@@ -4538,7 +5052,7 @@ function ListItem(props) {
   } = props;
 
   // focus specified entry on auto open
-  hooks$1.useEffect(() => {
+  hooks.useEffect(() => {
     if (autoOpen && autoFocusEntry) {
       const entry = minDom.query(`[data-entry-id="${autoFocusEntry}"]`);
       const focusableInput = minDom.query('.bio-properties-panel-input', entry);
@@ -4574,15 +5088,15 @@ function ListGroup(props) {
     shouldOpen = true,
     shouldSort = true
   } = props;
-  const groupRef = hooks$1.useRef(null);
+  const groupRef = hooks.useRef(null);
   const [open, setOpen] = useLayoutState(['groups', id, 'open'], false);
-  const [sticky, setSticky] = hooks$1.useState(false);
-  const onShow = hooks$1.useCallback(() => setOpen(true), [setOpen]);
-  const [ordering, setOrdering] = hooks$1.useState([]);
-  const [newItemAdded, setNewItemAdded] = hooks$1.useState(false);
+  const [sticky, setSticky] = hooks.useState(false);
+  const onShow = hooks.useCallback(() => setOpen(true), [setOpen]);
+  const [ordering, setOrdering] = hooks.useState([]);
+  const [newItemAdded, setNewItemAdded] = hooks.useState(false);
 
   // Flag to mark that add button was clicked in the last render cycle
-  const [addTriggered, setAddTriggered] = hooks$1.useState(false);
+  const [addTriggered, setAddTriggered] = hooks.useState(false);
   const prevItems = usePrevious(items);
   const prevElement = usePrevious(element);
   const elementChanged = element !== prevElement;
@@ -4596,14 +5110,14 @@ function ListGroup(props) {
   // keep ordering in sync to items - and open changes
 
   // (0) set initial ordering from given items
-  hooks$1.useEffect(() => {
+  hooks.useEffect(() => {
     if (!prevItems || !shouldSort) {
       setOrdering(createOrdering(items));
     }
   }, [items, element]);
 
   // (1) items were added
-  hooks$1.useEffect(() => {
+  hooks.useEffect(() => {
     // reset addTriggered flag
     setAddTriggered(false);
     if (shouldHandleEffects && prevItems && items.length > prevItems.length) {
@@ -4644,14 +5158,14 @@ function ListGroup(props) {
   }, [items, open, shouldHandleEffects, addTriggered]);
 
   // (2) sort items on open if shouldSort is set
-  hooks$1.useEffect(() => {
+  hooks.useEffect(() => {
     if (shouldSort && open && !newItemAdded) {
       setOrdering(createOrdering(sortItems(items)));
     }
   }, [open, shouldSort]);
 
   // (3) items were deleted
-  hooks$1.useEffect(() => {
+  hooks.useEffect(() => {
     if (shouldHandleEffects && prevItems && items.length < prevItems.length) {
       let keep = [];
       ordering.forEach(o => {
@@ -4668,7 +5182,7 @@ function ListGroup(props) {
   const toggleOpen = () => setOpen(!open);
   const hasItems = !!items.length;
   const propertiesPanelContext = {
-    ...hooks$1.useContext(LayoutContext),
+    ...hooks.useContext(LayoutContext),
     onShow
   };
   const handleAddClick = e => {
@@ -4776,7 +5290,7 @@ function Checkbox(props) {
     onFocus,
     onBlur
   } = props;
-  const [localValue, setLocalValue] = hooks$1.useState(value);
+  const [localValue, setLocalValue] = hooks.useState(value);
   const handleChangeCallback = ({
     target
   }) => {
@@ -4786,7 +5300,7 @@ function Checkbox(props) {
     handleChangeCallback(e);
     setLocalValue(e.target.value);
   };
-  hooks$1.useEffect(() => {
+  hooks.useEffect(() => {
     if (value === localValue) {
       return;
     }
@@ -4871,8 +5385,8 @@ function prefixId$7(id) {
   return `bio-properties-panel-${id}`;
 }
 const useBufferedFocus$1 = function (editor, ref) {
-  const [buffer, setBuffer] = hooks$1.useState(undefined);
-  ref.current = hooks$1.useMemo(() => ({
+  const [buffer, setBuffer] = hooks.useState(undefined);
+  ref.current = hooks.useMemo(() => ({
     focus: offset => {
       if (editor) {
         editor.focus(offset);
@@ -4884,7 +5398,7 @@ const useBufferedFocus$1 = function (editor, ref) {
       }
     }
   }), [editor]);
-  hooks$1.useEffect(() => {
+  hooks.useEffect(() => {
     if (typeof buffer !== 'undefined' && editor) {
       editor.focus(buffer);
       setBuffer(false);
@@ -4903,15 +5417,15 @@ const CodeEditor$1 = React.forwardRef((props, ref) => {
     hostLanguage = null,
     singleLine = false
   } = props;
-  const inputRef = hooks$1.useRef();
-  const [editor, setEditor] = hooks$1.useState();
-  const [localValue, setLocalValue] = hooks$1.useState(value || '');
+  const inputRef = hooks.useRef();
+  const [editor, setEditor] = hooks.useState();
+  const [localValue, setLocalValue] = hooks.useState(value || '');
   useBufferedFocus$1(editor, ref);
   const handleInput = useStaticCallback(newValue => {
     onInput(newValue);
     setLocalValue(newValue);
   });
-  hooks$1.useEffect(() => {
+  hooks.useEffect(() => {
     let editor;
     editor = new feelers.FeelersEditor({
       container: inputRef.current,
@@ -4931,7 +5445,7 @@ const CodeEditor$1 = React.forwardRef((props, ref) => {
       setEditor(null);
     };
   }, []);
-  hooks$1.useEffect(() => {
+  hooks.useEffect(() => {
     if (!editor) {
       return;
     }
@@ -4952,8 +5466,8 @@ const CodeEditor$1 = React.forwardRef((props, ref) => {
   });
 });
 const useBufferedFocus = function (editor, ref) {
-  const [buffer, setBuffer] = hooks$1.useState(undefined);
-  ref.current = hooks$1.useMemo(() => ({
+  const [buffer, setBuffer] = hooks.useState(undefined);
+  ref.current = hooks.useMemo(() => ({
     focus: offset => {
       if (editor) {
         editor.focus(offset);
@@ -4965,7 +5479,7 @@ const useBufferedFocus = function (editor, ref) {
       }
     }
   }), [editor]);
-  hooks$1.useEffect(() => {
+  hooks.useEffect(() => {
     if (typeof buffer !== 'undefined' && editor) {
       editor.focus(buffer);
       setBuffer(false);
@@ -4982,15 +5496,15 @@ const CodeEditor = React.forwardRef((props, ref) => {
     tooltipContainer,
     variables
   } = props;
-  const inputRef = hooks$1.useRef();
-  const [editor, setEditor] = hooks$1.useState();
-  const [localValue, setLocalValue] = hooks$1.useState(value || '');
+  const inputRef = hooks.useRef();
+  const [editor, setEditor] = hooks.useState();
+  const [localValue, setLocalValue] = hooks.useState(value || '');
   useBufferedFocus(editor, ref);
   const handleInput = useStaticCallback(newValue => {
     onInput(newValue);
     setLocalValue(newValue);
   });
-  hooks$1.useEffect(() => {
+  hooks.useEffect(() => {
     let editor;
 
     /* Trigger FEEL toggle when
@@ -5024,7 +5538,7 @@ const CodeEditor = React.forwardRef((props, ref) => {
       setEditor(null);
     };
   }, []);
-  hooks$1.useEffect(() => {
+  hooks.useEffect(() => {
     if (!editor) {
       return;
     }
@@ -5034,7 +5548,7 @@ const CodeEditor = React.forwardRef((props, ref) => {
     editor.setValue(value);
     setLocalValue(value);
   }, [value]);
-  hooks$1.useEffect(() => {
+  hooks.useEffect(() => {
     if (!editor) {
       return;
     }
@@ -5113,12 +5627,12 @@ function FeelTextfield(props) {
     tooltipContainer,
     OptionalComponent = OptionalFeelInput
   } = props;
-  const [localValue, _setLocalValue] = hooks$1.useState(value);
+  const [localValue, _setLocalValue] = hooks.useState(value);
   const editorRef = useShowEntryEvent(id);
-  const containerRef = hooks$1.useRef();
+  const containerRef = hooks.useRef();
   const feelActive = localValue.startsWith('=') || feel === 'required';
   const feelOnlyValue = localValue.startsWith('=') ? localValue.substring(1) : localValue;
-  const [focus, _setFocus] = hooks$1.useState(undefined);
+  const [focus, _setFocus] = hooks.useState(undefined);
   const setFocus = (offset = 0) => {
     const hasFocus = containerRef.current.contains(document.activeElement);
 
@@ -5126,7 +5640,7 @@ function FeelTextfield(props) {
     const position = hasFocus ? document.activeElement.selectionStart : Infinity;
     _setFocus(position + offset);
   };
-  const handleInputCallback = hooks$1.useMemo(() => {
+  const handleInputCallback = hooks.useMemo(() => {
     return debounce(newValue => {
       onInput(newValue);
     });
@@ -5171,13 +5685,13 @@ function FeelTextfield(props) {
     const message = `${error.source}: ${error.message}`;
     onError(message);
   });
-  hooks$1.useEffect(() => {
+  hooks.useEffect(() => {
     if (typeof focus !== 'undefined') {
       editorRef.current.focus(focus);
       _setFocus(undefined);
     }
   }, [focus]);
-  hooks$1.useEffect(() => {
+  hooks.useEffect(() => {
     if (value === localValue) {
       return;
     }
@@ -5191,7 +5705,7 @@ function FeelTextfield(props) {
   }, [value]);
 
   // copy-paste integration
-  hooks$1.useEffect(() => {
+  hooks.useEffect(() => {
     const copyHandler = event => {
       if (!feelActive) {
         return;
@@ -5273,7 +5787,7 @@ const OptionalFeelInput = React.forwardRef((props, ref) => {
     onFocus,
     onBlur
   } = props;
-  const inputRef = hooks$1.useRef();
+  const inputRef = hooks.useRef();
 
   // To be consistent with the FEEL editor, set focus at start of input
   // this ensures clean editing experience when switching with the keyboard
@@ -5316,7 +5830,7 @@ React.forwardRef((props, ref) => {
     onFocus,
     onBlur
   } = props;
-  const inputRef = hooks$1.useRef();
+  const inputRef = hooks.useRef();
 
   // To be consistent with the FEEL editor, set focus at start of input
   // this ensures clean editing experience when switching with the keyboard
@@ -5387,12 +5901,12 @@ function FeelEntry(props) {
     onFocus,
     onBlur
   } = props;
-  const [cachedInvalidValue, setCachedInvalidValue] = hooks$1.useState(null);
-  const [validationError, setValidationError] = hooks$1.useState(null);
-  const [localError, setLocalError] = hooks$1.useState(null);
+  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$1.useEffect(() => {
+  hooks.useEffect(() => {
     if (minDash.isFunction(validate)) {
       const newValidationError = validate(value) || null;
       setValidationError(newValidationError);
@@ -5413,7 +5927,7 @@ function FeelEntry(props) {
     }
     setValidationError(newValidationError);
   });
-  const onError = hooks$1.useCallback(err => {
+  const onError = hooks.useCallback(err => {
     setLocalError(err);
   }, []);
   if (previousValue === value && validationError) {
@@ -5504,8 +6018,8 @@ function NumberField(props) {
     onFocus,
     onBlur
   } = props;
-  const [localValue, setLocalValue] = hooks$1.useState(value);
-  const handleInputCallback = hooks$1.useMemo(() => {
+  const [localValue, setLocalValue] = hooks.useState(value);
+  const handleInputCallback = hooks.useMemo(() => {
     return debounce(event => {
       const {
         validity,
@@ -5520,7 +6034,7 @@ function NumberField(props) {
     handleInputCallback(e);
     setLocalValue(e.target.value);
   };
-  hooks$1.useEffect(() => {
+  hooks.useEffect(() => {
     if (value === localValue) {
       return;
     }
@@ -5585,12 +6099,12 @@ function NumberFieldEntry(props) {
     onBlur,
     validate
   } = props;
-  const [cachedInvalidValue, setCachedInvalidValue] = hooks$1.useState(null);
+  const [cachedInvalidValue, setCachedInvalidValue] = hooks.useState(null);
   const globalError = useError(id);
-  const [localError, setLocalError] = hooks$1.useState(null);
+  const [localError, setLocalError] = hooks.useState(null);
   let value = getValue(element);
   const previousValue = usePrevious(value);
-  hooks$1.useEffect(() => {
+  hooks.useEffect(() => {
     if (minDash.isFunction(validate)) {
       const newValidationError = validate(value) || null;
       setLocalError(newValidationError);
@@ -5658,7 +6172,7 @@ function Select(props) {
     onBlur
   } = props;
   const ref = useShowEntryEvent(id);
-  const [localValue, setLocalValue] = hooks$1.useState(value);
+  const [localValue, setLocalValue] = hooks.useState(value);
   const handleChangeCallback = ({
     target
   }) => {
@@ -5668,7 +6182,7 @@ function Select(props) {
     handleChangeCallback(e);
     setLocalValue(e.target.value);
   };
-  hooks$1.useEffect(() => {
+  hooks.useEffect(() => {
     if (value === localValue) {
       return;
     }
@@ -5740,12 +6254,12 @@ function SelectEntry(props) {
     validate
   } = props;
   const options = getOptions(element);
-  const [cachedInvalidValue, setCachedInvalidValue] = hooks$1.useState(null);
+  const [cachedInvalidValue, setCachedInvalidValue] = hooks.useState(null);
   const globalError = useError(id);
-  const [localError, setLocalError] = hooks$1.useState(null);
+  const [localError, setLocalError] = hooks.useState(null);
   let value = getValue(element);
   const previousValue = usePrevious(value);
-  hooks$1.useEffect(() => {
+  hooks.useEffect(() => {
     if (minDash.isFunction(validate)) {
       const newValidationError = validate(value) || null;
       setLocalError(newValidationError);
@@ -5819,9 +6333,9 @@ function TextArea(props) {
     autoResize,
     rows = autoResize ? 1 : 2
   } = props;
-  const [localValue, setLocalValue] = hooks$1.useState(value);
+  const [localValue, setLocalValue] = hooks.useState(value);
   const ref = useShowEntryEvent(id);
-  const handleInputCallback = hooks$1.useMemo(() => {
+  const handleInputCallback = hooks.useMemo(() => {
     return debounce(({
       target
     }) => onInput(target.value.length ? target.value : undefined));
@@ -5831,10 +6345,10 @@ function TextArea(props) {
     autoResize && resizeToContents(e.target);
     setLocalValue(e.target.value);
   };
-  hooks$1.useLayoutEffect(() => {
+  hooks.useLayoutEffect(() => {
     autoResize && resizeToContents(ref.current);
   }, []);
-  hooks$1.useEffect(() => {
+  hooks.useEffect(() => {
     if (value === localValue) {
       return;
     }
@@ -5941,9 +6455,9 @@ function Textfield(props) {
     onBlur,
     value = ''
   } = props;
-  const [localValue, setLocalValue] = hooks$1.useState(value || '');
+  const [localValue, setLocalValue] = hooks.useState(value || '');
   const ref = useShowEntryEvent(id);
-  const handleInputCallback = hooks$1.useMemo(() => {
+  const handleInputCallback = hooks.useMemo(() => {
     return debounce(({
       target
     }) => onInput(target.value.length ? target.value : undefined));
@@ -5952,7 +6466,7 @@ function Textfield(props) {
     handleInputCallback(e);
     setLocalValue(e.target.value);
   };
-  hooks$1.useEffect(() => {
+  hooks.useEffect(() => {
     if (value === localValue) {
       return;
     }
@@ -6009,12 +6523,12 @@ function TextfieldEntry(props) {
     onFocus,
     onBlur
   } = props;
-  const [cachedInvalidValue, setCachedInvalidValue] = hooks$1.useState(null);
+  const [cachedInvalidValue, setCachedInvalidValue] = hooks.useState(null);
   const globalError = useError(id);
-  const [localError, setLocalError] = hooks$1.useState(null);
+  const [localError, setLocalError] = hooks.useState(null);
   let value = getValue(element);
   const previousValue = usePrevious(value);
-  hooks$1.useEffect(() => {
+  hooks.useEffect(() => {
     if (minDash.isFunction(validate)) {
       const newValidationError = validate(value) || null;
       setLocalError(newValidationError);
@@ -6068,11 +6582,11 @@ function prefixId$1(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({
@@ -6161,8 +6675,8 @@ const PropertiesPanelHeaderProvider = {
   }
 };
 
-/**
- * Provide placeholders for empty and multiple state.
+/**
+ * Provide placeholders for empty and multiple state.
  */
 const PropertiesPanelPlaceholderProvider = {
   getEmpty: () => {
@@ -6230,14 +6744,14 @@ function Action(props) {
 function useService (type, strict) {
   const {
     getService
-  } = hooks$1.useContext(FormPropertiesPanelContext);
+  } = hooks.useContext(FormPropertiesPanelContext);
   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');
@@ -6335,7 +6849,7 @@ function Columns(props) {
     },
     // todo(pinussilvestrus): make options dependant on field type
     // cf. https://github.com/bpmn-io/form-js/issues/575
-    ...[2, 4, 6, 8, 10, 12, 14, 16].map(asOption)];
+    ...asArray(16).filter(i => i >= MIN_COLUMNS).map(asOption)];
   };
   return SelectEntry({
     debounce,
@@ -6357,6 +6871,11 @@ function asOption(number) {
     label: number.toString()
   };
 }
+function asArray(length) {
+  return Array.from({
+    length
+  }).map((_, i) => i + 1);
+}
 
 function DescriptionEntry(props) {
   const {
@@ -7042,7 +7561,7 @@ function Text(props) {
   const setValue = value => {
     return editField(field, path, value);
   };
-  const description = hooks$1.useMemo(() => jsxRuntime.jsxs(jsxRuntime.Fragment, {
+  const description = hooks.useMemo(() => jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: ["Supports markdown and templating. ", jsxRuntime.jsx("a", {
       href: "https://docs.camunda.io/docs/components/modeler/forms/form-element-library/forms-element-library-text/",
       target: "_blank",
@@ -7514,7 +8033,7 @@ function Label(props) {
     id,
     label: 'Label',
     setValue,
-    validate: validateFactory(getValue())
+    validate: validateFactory(getValue(), entry => entry.label)
   });
 }
 function Value$1(props) {
@@ -7540,7 +8059,7 @@ function Value$1(props) {
     id,
     label: 'Value',
     setValue,
-    validate: validateFactory(getValue())
+    validate: validateFactory(getValue(), entry => entry.value)
   });
 }
 
@@ -7630,14 +8149,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 {
@@ -7646,14 +8165,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) => {
@@ -7782,13 +8301,13 @@ function StaticValuesSourceEntry(props) {
   const addEntry = e => {
     e.stopPropagation();
     const index = values.length + 1;
-    const entry = getIndexedEntry(index);
+    const entry = getIndexedEntry(index, values);
     editField(field, formJsViewer.VALUES_SOURCES_PATHS[formJsViewer.VALUES_SOURCES.STATIC], arrayAdd(values, values.length, entry));
   };
   const removeEntry = entry => {
     editField(field, formJsViewer.VALUES_SOURCES_PATHS[formJsViewer.VALUES_SOURCES.STATIC], minDash.without(values, entry));
   };
-  const validateFactory = key => {
+  const validateFactory = (key, getValue) => {
     return value => {
       if (value === key) {
         return;
@@ -7796,7 +8315,7 @@ function StaticValuesSourceEntry(props) {
       if (minDash.isUndefined(value) || !value.length) {
         return 'Must not be empty.';
       }
-      const isValueAssigned = values.find(entry => entry.value === value);
+      const isValueAssigned = values.find(entry => getValue(entry) === value);
       if (isValueAssigned) {
         return 'Must be unique.';
       }
@@ -7827,17 +8346,23 @@ function StaticValuesSourceEntry(props) {
 
 // helper
 
-function getIndexedEntry(index) {
+function getIndexedEntry(index, values) {
   const entry = {
     label: 'Value',
     value: 'value'
   };
+  while (labelOrValueIsAlreadyAssignedForIndex(index, values)) {
+    index++;
+  }
   if (index > 1) {
     entry.label += ` ${index}`;
     entry.value += `${index}`;
   }
   return entry;
 }
+function labelOrValueIsAlreadyAssignedForIndex(index, values) {
+  return values.some(existingEntry => existingEntry.label === `Value ${index}` || existingEntry.value === `value${index}`);
+}
 
 function AdornerEntry(props) {
   const {
@@ -8289,8 +8814,8 @@ function ValuesGroups(field, editField) {
   };
   const valuesSourceId = `${fieldId}-valuesSource`;
 
-  /**
-   * @type {Array<Group|ListGroup>}
+  /**
+   * @type {Array<Group|ListGroup>}
    */
   const groups = [{
     id: valuesSourceId,
@@ -8338,12 +8863,13 @@ function CustomValuesGroup(field, editField) {
   }
   const addEntry = event => {
     event.stopPropagation();
-    const index = Object.keys(properties).length + 1;
-    const key = `key${index}`,
-      value = 'value';
+    let index = Object.keys(properties).length + 1;
+    while (`key${index}` in properties) {
+      index++;
+    }
     editField(field, ['properties'], {
       ...properties,
-      [key]: value
+      [`key${index}`]: 'value'
     });
   };
   const validateFactory = key => {
@@ -8391,13 +8917,13 @@ function CustomValuesGroup(field, editField) {
 
 // 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) => {
@@ -8486,7 +9012,7 @@ function FormPropertiesPanel(props) {
   const {
     schema
   } = formEditor._getState();
-  const [state, setState] = hooks$1.useState({
+  const [state, setState] = hooks.useState({
     selectedFormField: selection.get() || schema
   });
   const _update = field => {
@@ -8500,7 +9026,7 @@ function FormPropertiesPanel(props) {
       formField: field
     });
   };
-  hooks$1.useLayoutEffect(() => {
+  hooks.useLayoutEffect(() => {
     function onSelectionChange(event) {
       _update(event.selection || schema);
     }
@@ -8509,11 +9035,11 @@ function FormPropertiesPanel(props) {
       eventBus.off('selection.changed', onSelectionChange);
     };
   }, []);
-  hooks$1.useLayoutEffect(() => {
+  hooks.useLayoutEffect(() => {
     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);
     };
@@ -8529,7 +9055,7 @@ function FormPropertiesPanel(props) {
   };
   const onFocus = () => eventBus.fire('propertiesPanel.focusin');
   const onBlur = () => eventBus.fire('propertiesPanel.focusout');
-  const editField = hooks$1.useCallback((formField, key, value) => modeling.editFormField(formField, key, value), [modeling]);
+  const editField = hooks.useCallback((formField, key, value) => modeling.editFormField(formField, key, value), [modeling]);
   return jsxRuntime.jsx("div", {
     class: "fjs-properties-panel",
     "data-field": selectedFormField && selectedFormField.id,
@@ -8564,10 +9090,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) {
@@ -8587,8 +9113,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;
@@ -8626,48 +9152,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');
@@ -8678,15 +9204,15 @@ class FormEditor {
       properties = {}
     } = options;
 
-    /**
-     * @private
-     * @type {any}
+    /**
+     * @private
+     * @type {any}
      */
     this.exporter = exporter;
 
-    /**
-     * @private
-     * @type {State}
+    /**
+     * @private
+     * @type {State}
      */
     this._state = {
       properties,
@@ -8715,10 +9241,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) => {
@@ -8747,15 +9273,15 @@ class FormEditor {
     });
   }
 
-  /**
-   * @returns {Schema}
+  /**
+   * @returns {Schema}
    */
   saveSchema() {
     return this.getSchema();
   }
 
-  /**
-   * @returns {Schema}
+  /**
+   * @returns {Schema}
    */
   getSchema() {
     const {
@@ -8764,8 +9290,8 @@ class FormEditor {
     return exportSchema(schema, this.exporter, formJsViewer.schemaVersion);
   }
 
-  /**
-   * @param {Element|string} parentNode
+  /**
+   * @param {Element|string} parentNode
    */
   attachTo(parentNode) {
     if (!parentNode) {
@@ -8783,10 +9309,10 @@ class FormEditor {
     this._detach();
   }
 
-  /**
-   * @internal
-   *
-   * @param {boolean} [emit]
+  /**
+   * @internal
+   *
+   * @param {boolean} [emit]
    */
   _detach(emit = true) {
     const container = this._container,
@@ -8800,9 +9326,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);
@@ -8811,21 +9337,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 {
@@ -8847,22 +9373,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 = {
@@ -8872,15 +9398,15 @@ class FormEditor {
     this._emit('changed', this._getState());
   }
 
-  /**
-   * @internal
+  /**
+   * @internal
    */
   _getModules() {
     return [ModelingModule, EditorActionsModule, DraggingModule, KeyboardModule, SelectionModule, PaletteModule, ExpressionLanguageModule, formJsViewer.MarkdownModule, PropertiesPanelModule];
   }
 
-  /**
-   * @internal
+  /**
+   * @internal
    */
   _onEvent(type, priority, handler) {
     this.get('eventBus').on(type, priority, handler);