@bpmn-io/form-js-editor 1.2.0 → 1.3.0-alpha.0

package/dist/index.es.js

@@ -1,7 +1,7 @@
-import { FormFieldRegistry as FormFieldRegistry$1, clone, iconsByType, Text as Text$1, FormFields, formFields, FormContext, FormRenderContext, FormComponent, FormLayouter, getSchemaVariables, DATETIME_SUBTYPES, DATE_LABEL_PATH, TIME_LABEL_PATH, DATETIME_SUBTYPE_PATH, DATETIME_SUBTYPES_LABELS, TIME_SERIALISING_FORMAT_PATH, TIME_SERIALISING_FORMATS, TIME_INTERVAL_PATH, TIME_USE24H_PATH, DATE_DISALLOW_PAST_PATH, TIME_SERIALISINGFORMAT_LABELS, getValuesSource, VALUES_SOURCES, VALUES_SOURCES_DEFAULTS, VALUES_SOURCES_PATHS, VALUES_SOURCES_LABELS, FeelExpressionLanguage, createFormContainer, createInjector, MarkdownModule, schemaVersion } from '@bpmn-io/form-js-viewer';
+import { FormFieldRegistry as FormFieldRegistry$1, iconsByType, Text as Text$1, FormFields, formFields, FormContext, FormRenderContext, FormComponent, Importer, PathRegistry, FormLayouter, FieldFactory, runRecursively, clone, getSchemaVariables, DATETIME_SUBTYPES, DATE_LABEL_PATH, TIME_LABEL_PATH, DATETIME_SUBTYPE_PATH, DATETIME_SUBTYPES_LABELS, TIME_SERIALISING_FORMAT_PATH, TIME_SERIALISING_FORMATS, TIME_INTERVAL_PATH, TIME_USE24H_PATH, DATE_DISALLOW_PAST_PATH, TIME_SERIALISINGFORMAT_LABELS, getValuesSource, VALUES_SOURCES, VALUES_SOURCES_DEFAULTS, VALUES_SOURCES_PATHS, VALUES_SOURCES_LABELS, FeelExpressionLanguage, createFormContainer, createInjector, MarkdownModule, schemaVersion } from '@bpmn-io/form-js-viewer';
 export { schemaVersion } from '@bpmn-io/form-js-viewer';
 import Ids from 'ids';
-import { isArray, isFunction, isNumber, bind, assign, debounce, forEach, get, isObject, uniqueBy, sortBy, find, set as set$1, isString, isUndefined, without, has } from 'min-dash';
+import { isArray, isFunction, isNumber, bind, assign, debounce, forEach, get, isObject, uniqueBy, sortBy, find, throttle as throttle$1, set as set$1, isString, isUndefined, without, has } from 'min-dash';
 import classnames from 'classnames';
 import { jsx, jsxs, Fragment as Fragment$1 } from 'preact/jsx-runtime';
 import { useContext, useState, useMemo, useEffect, useCallback, useRef as useRef$1, useLayoutEffect } from 'preact/hooks';
@@ -13,6 +13,8 @@ import { classes, query, closest, event, matches, domify } from 'min-dom';
 import { mutate } from 'array-move';
 import { FeelersEditor } from 'feelers';
 import FeelEditor from '@bpmn-io/feel-editor';
+import { lineNumbers } from '@codemirror/view';
+import * as focusTrap from 'focus-trap';
 import Big from 'big.js';
 
 var FN_REF = '__fn';
@@ -530,73 +532,6 @@ 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(formFieldRegistry, formFields) {
-    this._formFieldRegistry = formFieldRegistry;
-    this._formFields = formFields;
-  }
-  create(attrs, applyDefaults = true) {
-    const {
-      id,
-      key,
-      type
-    } = attrs;
-    const fieldDefinition = this._formFields.get(type);
-    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 && config.label ? {
-      label: config.label
-    } : {};
-    const field = config.create({
-      ...labelAttrs,
-      ...attrs
-    });
-    this._ensureId(field);
-    if (config.keyed) {
-      this._ensureKey(field, applyDefaults);
-    }
-    return field;
-  }
-  _ensureId(field) {
-    if (field.id) {
-      this._formFieldRegistry._ids.claim(field.id, field);
-      return;
-    }
-    let prefix = 'Field';
-    if (field.type === 'default') {
-      prefix = 'Form';
-    }
-    field.id = this._formFieldRegistry._ids.nextPrefixed(`${prefix}_`, field);
-  }
-  _ensureKey(field, applyDefaults) {
-    if (field.key) {
-      this._formFieldRegistry._keys.claim(field.key, field);
-      return;
-    }
-    if (applyDefaults) {
-      let prefix = 'field';
-      field.key = this._formFieldRegistry._keys.nextPrefixed(`${prefix}_`, field);
-    }
-  }
-}
-FieldFactory.$inject = ['formFieldRegistry', 'formFields'];
-
 class FormFieldRegistry extends FormFieldRegistry$1 {
   /**
    * Updates a form fields id.
@@ -709,111 +644,7 @@ 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(formFieldRegistry, fieldFactory, formLayouter) {
-    this._formFieldRegistry = formFieldRegistry;
-    this._fieldFactory = fieldFactory;
-    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}
-   */
-  importSchema(schema) {
-    // TODO: Add warnings
-    const warnings = [];
-    try {
-      const importedSchema = this.importFormField(clone(schema));
-      this._formLayouter.calculateLayout(clone(importedSchema));
-      return {
-        schema: importedSchema,
-        warnings
-      };
-    } catch (err) {
-      err.warnings = warnings;
-      throw err;
-    }
-  }
-
-  /**
-   * @param {{[x: string]: any}} fieldAttrs
-   * @param {String} [parentId]
-   * @param {number} [index]
-   *
-   * @return {any} field
-   */
-  importFormField(fieldAttrs, parentId, index) {
-    const {
-      components,
-      id,
-      key
-    } = fieldAttrs;
-    let parent, path;
-    if (parentId) {
-      parent = this._formFieldRegistry.get(parentId);
-    }
-
-    // validate <id> uniqueness
-    if (id && this._formFieldRegistry._ids.assigned(id)) {
-      throw new Error(`form field with id <${id}> already exists`);
-    }
-
-    // validate <key> uniqueness
-    if (key && this._formFieldRegistry._keys.assigned(key)) {
-      throw new Error(`form field with key <${key}> already exists`);
-    }
-
-    // set form field path
-    path = parent ? [...parent._path, 'components', index] : [];
-    const field = this._fieldFactory.create({
-      ...fieldAttrs,
-      _path: path,
-      _parent: parent && parent.id
-    }, false);
-    this._formFieldRegistry.add(field);
-    if (components) {
-      field.components = this.importFormFields(components, field.id);
-    }
-    return field;
-  }
-
-  /**
-   * @param {Array<any>} components
-   * @param {string} parentId
-   *
-   * @return {Array<any>} imported components
-   */
-  importFormFields(components, parentId) {
-    return components.map((component, index) => {
-      return this.importFormField(component, parentId, index);
-    });
-  }
-}
-Importer.$inject = ['formFieldRegistry', 'fieldFactory', 'formLayouter'];
-
-var importModule = {
-  importer: ['type', Importer]
-};
-
+const emptyImage = createEmptyImage();
 function editorFormFieldClasses(type, {
   disabled = false
 } = {}) {
@@ -838,11 +669,10 @@ function editorFormFieldClasses(type, {
  * domElement.addEventListener('dragstart', dragger(dragMove));
  *
  * @param {Function} fn
- * @param {Element} dragPreview
  *
  * @return {Function} drag start callback function
  */
-function createDragger(fn, dragPreview) {
+function createDragger$1(fn) {
   let self;
   let startX, startY;
 
@@ -852,9 +682,9 @@ function createDragger(fn, dragPreview) {
     startX = event.clientX;
     startY = event.clientY;
 
-    // (1) prevent preview image
+    // (1) hide drag preview image
     if (event.dataTransfer) {
-      event.dataTransfer.setDragImage(dragPreview, 0, 0);
+      event.dataTransfer.setDragImage(emptyImage, 0, 0);
     }
 
     // (2) setup drag listeners
@@ -862,7 +692,7 @@ function createDragger(fn, dragPreview) {
     // attach drag + cleanup event
     document.addEventListener('dragover', onDrag);
     document.addEventListener('dragend', onEnd);
-    document.addEventListener('drop', preventDefault);
+    document.addEventListener('drop', preventDefault$1);
   }
   function onDrag(event) {
     const delta = {
@@ -876,7 +706,7 @@ function createDragger(fn, dragPreview) {
   function onEnd() {
     document.removeEventListener('dragover', onDrag);
     document.removeEventListener('dragend', onEnd);
-    document.removeEventListener('drop', preventDefault);
+    document.removeEventListener('drop', preventDefault$1);
   }
   return onDragStart;
 }
@@ -905,10 +735,15 @@ function throttle(fn) {
     });
   };
 }
-function preventDefault(event) {
+function preventDefault$1(event) {
   event.preventDefault();
   event.stopPropagation();
 }
+function createEmptyImage() {
+  const img = new Image();
+  img.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
+  return img;
+}
 
 const DragAndDropContext = createContext({
   drake: null
@@ -1566,13 +1401,15 @@ class Dragging {
    * @param { import('../../core/FormLayoutValidator').default } formLayoutValidator
    * @param { import('../../core/EventBus').default } eventBus
    * @param { import('../modeling/Modeling').default } modeling
+   * @param { import('@bpmn-io/form-js-viewer').PathRegistry } pathRegistry
    */
-  constructor(formFieldRegistry, formLayouter, formLayoutValidator, eventBus, modeling) {
+  constructor(formFieldRegistry, formLayouter, formLayoutValidator, eventBus, modeling, pathRegistry) {
     this._formFieldRegistry = formFieldRegistry;
     this._formLayouter = formLayouter;
     this._formLayoutValidator = formLayoutValidator;
     this._eventBus = eventBus;
     this._modeling = modeling;
+    this._pathRegistry = pathRegistry;
   }
 
   /**
@@ -1606,11 +1443,50 @@ class Dragging {
     const targetRow = this._formLayouter.getRow(target.dataset.rowId);
     let columns;
     let formField;
+    let targetParentId;
     if (formFieldNode) {
       formField = this._formFieldRegistry.get(formFieldNode.dataset.id);
       columns = (formField.layout || {}).columns;
+
+      // (1) check for row constraints
+      if (isRow(target)) {
+        targetParentId = getFormParent(target).dataset.id;
+        const rowError = this._formLayoutValidator.validateField(formField, columns, targetRow);
+        if (rowError) {
+          return rowError;
+        }
+      } else {
+        targetParentId = target.dataset.id;
+      }
+
+      // (2) check target is a valid parent
+      if (!targetParentId) {
+        return 'Drop is not a valid target';
+      }
+
+      // (3) check  for path collisions
+      const targetParentFormField = this._formFieldRegistry.get(targetParentId);
+      const currentParentFormField = this._formFieldRegistry.get(formField._parent);
+      if (targetParentFormField !== currentParentFormField) {
+        const targetParentPath = this._pathRegistry.getValuePath(targetParentFormField);
+        const currentParentPath = this._pathRegistry.getValuePath(currentParentFormField);
+        if (targetParentPath.join('.') !== currentParentPath.join('.')) {
+          const isDropAllowedByPathRegistry = this._pathRegistry.executeRecursivelyOnFields(formField, ({
+            field,
+            isClosed
+          }) => {
+            const options = {
+              cutoffNode: currentParentFormField.id
+            };
+            const fieldPath = this._pathRegistry.getValuePath(field, options);
+            return this._pathRegistry.canClaimPath([...targetParentPath, ...fieldPath], isClosed);
+          });
+          if (!isDropAllowedByPathRegistry) {
+            return 'Drop not allowed by path registry';
+          }
+        }
+      }
     }
-    return this._formLayoutValidator.validateField(formField, columns, targetRow);
   }
   moveField(element, source, targetRow, targetFormField, targetIndex) {
     const formFieldNode = element.querySelector('.fjs-element');
@@ -1628,6 +1504,7 @@ class Dragging {
     };
     attrs = {
       ...attrs,
+      _parent: targetFormField.id,
       layout: {
         row: targetRow ? targetRow.id : this._formLayouter.nextRowId(),
         // enable auto columns
@@ -1661,14 +1538,13 @@ class Dragging {
 
     // (2.1) dropped in existing row
     if (isRow(target)) {
-      unsetDropNotAllowed(target);
       targetRow = this._formLayouter.getRow(target.dataset.rowId);
+    }
 
-      // validate whether drop is allowed
-      const validationError = this.validateDrop(el, target);
-      if (validationError) {
-        return drake.cancel(true);
-      }
+    // (2.2) validate whether drop is allowed
+    const validationError = this.validateDrop(el, target);
+    if (validationError) {
+      return drake.cancel(true);
     }
     drake.remove();
 
@@ -1716,13 +1592,11 @@ class Dragging {
           return !target.classList.contains(DROP_CONTAINER_HORIZONTAL_CLS);
         }
 
-        // validate field drop in row
-        if (isRow(target)) {
-          const validationError = this.validateDrop(el, target);
-          if (validationError) {
-            // set error feedback to row
-            setDropNotAllowed(target);
-          }
+        // validate field drop
+        const validationError = this.validateDrop(el, target);
+        if (validationError) {
+          // set error feedback to row
+          setDropNotAllowed(target);
         }
         return !target.classList.contains(DRAG_NO_DROP_CLS);
       },
@@ -1793,7 +1667,7 @@ class Dragging {
     this._eventBus.fire(event, context);
   }
 }
-Dragging.$inject = ['formFieldRegistry', 'formLayouter', 'formLayoutValidator', 'eventBus', 'modeling'];
+Dragging.$inject = ['formFieldRegistry', 'formLayouter', 'formLayoutValidator', 'eventBus', 'modeling', 'pathRegistry'];
 
 // helper //////////
 
@@ -1851,7 +1725,6 @@ 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 {
@@ -1890,17 +1763,8 @@ function FieldResizer(props) {
     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);
+    const onDragStart = createDragger$1(onResize);
     onDragStart(event);
 
     // mitigate auto columns on the grid that
@@ -1923,10 +1787,6 @@ function FieldResizer(props) {
     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;
@@ -1969,9 +1829,6 @@ function getColumnNode(node) {
 function getElementNode(field) {
   return query('.fjs-element[data-id="' + field.id + '"]');
 }
-function getDragPreviewImage(node) {
-  return query('.fjs-resize-drag-preview', node);
-}
 function setResizing(node, position) {
   classes(node).add(ELEMENT_RESIZING_CLS + '-' + position);
 }
@@ -1988,7 +1845,10 @@ function ContextPad(props) {
     children: props.children
   });
 }
-function Empty(props) {
+function Empty() {
+  return null;
+}
+function EmptyRoot(props) {
   return jsx("div", {
     class: "fjs-empty-editor",
     children: jsxs("div", {
@@ -2009,12 +1869,17 @@ function Element$1(props) {
     formFieldRegistry = useService$1('formFieldRegistry'),
     modeling = useService$1('modeling'),
     selection = useService$1('selection');
+  const {
+    hoveredId,
+    setHoveredId
+  } = useContext(FormRenderContext);
   const {
     field
   } = props;
   const {
     id,
-    type
+    type,
+    showOutline
   } = field;
   const ref = useRef$1();
   function scrollIntoView({
@@ -2052,6 +1917,12 @@ function Element$1(props) {
   if (selection.isSelected(field)) {
     classes.push('fjs-editor-selected');
   }
+  if (showOutline) {
+    classes.push('fjs-outlined');
+  }
+  if (hoveredId === field.id) {
+    classes.push('fjs-editor-hovered');
+  }
   const onRemove = event => {
     event.stopPropagation();
     const parentField = formFieldRegistry.get(field._parent);
@@ -2071,6 +1942,11 @@ function Element$1(props) {
     tabIndex: type === 'default' ? -1 : 0,
     onClick: onClick,
     onKeyPress: onKeyPress,
+    onMouseOver: e => {
+      // @ts-ignore
+      setHoveredId(field.id);
+      e.stopPropagation();
+    },
     ref: ref,
     children: [jsx(DebugColumns, {
       field: field
@@ -2240,14 +2116,18 @@ function FormEditor$1(props) {
   useEffect(() => {
     eventBus.fire('formEditor.rendered');
   }, []);
-  const formRenderContext = {
+  const [hoveredId, setHoveredId] = useState(null);
+  const formRenderContext = useMemo(() => ({
     Children,
     Column,
     Element: Element$1,
     Empty,
-    Row
-  };
-  const formContext = {
+    EmptyRoot,
+    Row,
+    hoveredId,
+    setHoveredId
+  }), [hoveredId]);
+  const formContext = useMemo(() => ({
     getService(type, strict = true) {
       // TODO(philippfromme): clean up
       if (type === 'form') {
@@ -2268,7 +2148,7 @@ function FormEditor$1(props) {
       return injector.get(type, strict);
     },
     formId: formEditor._id
-  };
+  }), [ariaLabel, formEditor, injector, schema]);
   const onSubmit = useCallback(() => {}, []);
   const onReset = useCallback(() => {}, []);
 
@@ -2294,6 +2174,7 @@ function FormEditor$1(props) {
           children: jsx(FormContext.Provider, {
             value: formContext,
             children: jsx(FormRenderContext.Provider, {
+              // @ts-ignore
               value: formRenderContext,
               children: jsx(FormComponent, {
                 onSubmit: onSubmit,
@@ -2431,10 +2312,12 @@ var renderModule = {
 };
 
 var core = {
-  __depends__: [importModule, renderModule],
+  __depends__: [renderModule],
   debounce: ['factory', DebounceFactory],
   eventBus: ['type', EventBus],
+  importer: ['type', Importer],
   formFieldRegistry: ['type', FormFieldRegistry],
+  pathRegistry: ['type', PathRegistry],
   formLayouter: ['type', FormLayouter],
   formLayoutValidator: ['type', FormLayoutValidator],
   fieldFactory: ['type', FieldFactory]
@@ -3143,9 +3026,16 @@ function arrayRemove(array, index) {
 }
 function updatePath(formFieldRegistry, formField, index) {
   const parent = formFieldRegistry.get(formField._parent);
-  formField._path = [...parent._path, 'components', index];
+  refreshPathsRecursively(formField, [...parent._path, 'components', index]);
   return formField;
 }
+function refreshPathsRecursively(formField, path) {
+  formField._path = path;
+  const components = formField.components || [];
+  components.forEach((component, index) => {
+    refreshPathsRecursively(component, [...path, 'components', index]);
+  });
+}
 function updateRow(formField, rowId) {
   formField.layout = {
     ...(formField.layout || {}),
@@ -3179,7 +3069,7 @@ class AddFormFieldHandler {
     // (1) Add new form field
     arrayAdd$1(get(schema, targetPath), targetIndex, formField);
 
-    // (2) Update paths of new form field and its siblings
+    // (2) Update internal paths of new form field and its siblings (and their children)
     get(schema, targetPath).forEach((formField, index) => updatePath(this._formFieldRegistry, formField, index));
 
     // (3) Add new form field to form field registry
@@ -3204,7 +3094,7 @@ class AddFormFieldHandler {
     // (1) Remove new form field
     arrayRemove(get(schema, targetPath), targetIndex);
 
-    // (2) Update paths of new form field and its siblings
+    // (2) Update internal paths of new form field and its siblings (and their children)
     get(schema, targetPath).forEach((formField, index) => updatePath(this._formFieldRegistry, formField, index));
 
     // (3) Remove new form field from form field registry
@@ -3289,10 +3179,12 @@ class MoveFormFieldHandler {
    * @constructor
    * @param { import('../../../FormEditor').default } formEditor
    * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
+   * @param { import('@bpmn-io/form-js-viewer').PathRegistry } pathRegistry
    */
-  constructor(formEditor, formFieldRegistry) {
+  constructor(formEditor, formFieldRegistry, pathRegistry) {
     this._formEditor = formEditor;
     this._formFieldRegistry = formFieldRegistry;
+    this._pathRegistry = pathRegistry;
   }
   execute(context) {
     this.moveFormField(context);
@@ -3345,27 +3237,42 @@ class MoveFormFieldHandler {
       // (2) Move form field
       mutate(get(schema, sourcePath), sourceIndex, targetIndex);
 
-      // (3) Update paths of new form field and its siblings
+      // (3) Update internal paths of new form field and its siblings (and their children)
       get(schema, sourcePath).forEach((formField, index) => updatePath(this._formFieldRegistry, formField, index));
     } else {
       const formField = get(schema, [...sourcePath, sourceIndex]);
+
+      // (1) Deregister form field (and children) from path registry
+      this._pathRegistry.executeRecursivelyOnFields(formField, ({
+        field
+      }) => {
+        this._pathRegistry.unclaimPath(this._pathRegistry.getValuePath(field));
+      });
       formField._parent = targetFormField.id;
 
-      // (1) Remove form field
+      // (2) Remove form field
       arrayRemove(get(schema, sourcePath), sourceIndex);
 
-      // (2) Update paths of siblings
+      // (3) Update internal paths of siblings (and their children)
       get(schema, sourcePath).forEach((formField, index) => updatePath(this._formFieldRegistry, formField, index));
       const targetPath = [...targetFormField._path, 'components'];
 
-      // (3) Add to row
+      // (4) Add to row
       updateRow(formField, targetRow ? targetRow.id : null);
 
-      // (4) Add form field
+      // (5) Add form field
       arrayAdd$1(get(schema, targetPath), targetIndex, formField);
 
-      // (5) Update paths of siblings
+      // (6) Update internal paths of siblings (and their children)
       get(schema, targetPath).forEach((formField, index) => updatePath(this._formFieldRegistry, formField, index));
+
+      // (7) Reregister form field (and children) from path registry
+      this._pathRegistry.executeRecursivelyOnFields(formField, ({
+        field,
+        isClosed
+      }) => {
+        this._pathRegistry.claimPath(this._pathRegistry.getValuePath(field), isClosed);
+      });
     }
 
     // TODO: Create updater/change support that automatically updates paths and schema on command execution
@@ -3374,7 +3281,7 @@ class MoveFormFieldHandler {
     });
   }
 }
-MoveFormFieldHandler.$inject = ['formEditor', 'formFieldRegistry'];
+MoveFormFieldHandler.$inject = ['formEditor', 'formFieldRegistry', 'pathRegistry'];
 
 class RemoveFormFieldHandler {
   /**
@@ -3400,11 +3307,11 @@ class RemoveFormFieldHandler {
     // (1) Remove form field
     arrayRemove(get(schema, sourcePath), sourceIndex);
 
-    // (2) Update paths of its siblings
+    // (2) Update internal paths of its siblings (and their children)
     get(schema, sourcePath).forEach((formField, index) => updatePath(this._formFieldRegistry, formField, index));
 
-    // (3) Remove form field from form field registry
-    this._formFieldRegistry.remove(formField);
+    // (3) Remove form field and children from form field registry
+    runRecursively(formField, formField => this._formFieldRegistry.remove(formField));
 
     // TODO: Create updater/change support that automatically updates paths and schema on command execution
     this._formEditor._setState({
@@ -3425,11 +3332,11 @@ class RemoveFormFieldHandler {
     // (1) Add form field
     arrayAdd$1(get(schema, sourcePath), sourceIndex, formField);
 
-    // (2) Update paths of its siblings
+    // (2) Update internal paths of its siblings (and their children)
     get(schema, sourcePath).forEach((formField, index) => updatePath(this._formFieldRegistry, formField, index));
 
-    // (3) Add form field to form field registry
-    this._formFieldRegistry.add(formField);
+    // (3) Add form field and children to form field registry
+    runRecursively(formField, formField => this._formFieldRegistry.add(formField));
 
     // TODO: Create updater/change support that automatically updates paths and schema on command execution
     this._formEditor._setState({
@@ -3477,10 +3384,10 @@ UpdateIdClaimHandler.$inject = ['formFieldRegistry'];
 class UpdateKeyClaimHandler {
   /**
    * @constructor
-   * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
+   * @param { import('@bpmn-io/form-js-viewer').PathRegistry } pathRegistry
    */
-  constructor(formFieldRegistry) {
-    this._formFieldRegistry = formFieldRegistry;
+  constructor(pathRegistry) {
+    this._pathRegistry = pathRegistry;
   }
   execute(context) {
     const {
@@ -3488,26 +3395,106 @@ class UpdateKeyClaimHandler {
       formField,
       key
     } = context;
+    const options = {
+      replacements: {
+        [formField.id]: key
+      }
+    };
+    const valuePath = this._pathRegistry.getValuePath(formField, options);
     if (claiming) {
-      this._formFieldRegistry._keys.claim(key, formField);
+      this._pathRegistry.claimPath(valuePath, true);
     } else {
-      this._formFieldRegistry._keys.unclaim(key);
+      this._pathRegistry.unclaimPath(valuePath);
     }
+
+    // cache path for revert
+    context.valuePath = valuePath;
   }
   revert(context) {
+    const {
+      claiming,
+      valuePath
+    } = context;
+    if (claiming) {
+      this._pathRegistry.unclaimPath(valuePath);
+    } else {
+      this._pathRegistry.claimPath(valuePath, true);
+    }
+  }
+}
+UpdateKeyClaimHandler.$inject = ['pathRegistry'];
+
+class UpdatePathClaimHandler {
+  /**
+   * @constructor
+   * @param { import('@bpmn-io/form-js-viewer').PathRegistry } pathRegistry
+   */
+  constructor(pathRegistry) {
+    this._pathRegistry = pathRegistry;
+  }
+  execute(context) {
     const {
       claiming,
       formField,
-      key
+      path
+    } = context;
+    const options = {
+      replacements: {
+        [formField.id]: path
+      }
+    };
+    const valuePaths = [];
+    if (claiming) {
+      this._pathRegistry.executeRecursivelyOnFields(formField, ({
+        field,
+        isClosed
+      }) => {
+        const valuePath = this._pathRegistry.getValuePath(field, options);
+        valuePaths.push({
+          valuePath,
+          isClosed
+        });
+        this._pathRegistry.claimPath(valuePath, isClosed);
+      });
+    } else {
+      this._pathRegistry.executeRecursivelyOnFields(formField, ({
+        field,
+        isClosed
+      }) => {
+        const valuePath = this._pathRegistry.getValuePath(field, options);
+        valuePaths.push({
+          valuePath,
+          isClosed
+        });
+        this._pathRegistry.unclaimPath(valuePath);
+      });
+    }
+
+    // cache path info for revert
+    context.valuePaths = valuePaths;
+  }
+  revert(context) {
+    const {
+      claiming,
+      valuePaths
     } = context;
     if (claiming) {
-      this._formFieldRegistry._keys.unclaim(key);
+      valuePaths.forEach(({
+        valuePath
+      }) => {
+        this._pathRegistry.unclaimPath(valuePath);
+      });
     } else {
-      this._formFieldRegistry._keys.claim(key, formField);
+      valuePaths.forEach(({
+        valuePath,
+        isClosed
+      }) => {
+        this._pathRegistry.claimPath(valuePath, isClosed);
+      });
     }
   }
 }
-UpdateKeyClaimHandler.$inject = ['formFieldRegistry'];
+UpdatePathClaimHandler.$inject = ['pathRegistry'];
 
 class Modeling {
   constructor(commandStack, eventBus, formEditor, formFieldRegistry, fieldFactory) {
@@ -3531,7 +3518,8 @@ class Modeling {
       'formField.move': MoveFormFieldHandler,
       'formField.remove': RemoveFormFieldHandler,
       'id.updateClaim': UpdateIdClaimHandler,
-      'key.updateClaim': UpdateKeyClaimHandler
+      'key.updateClaim': UpdateKeyClaimHandler,
+      'path.updateClaim': UpdatePathClaimHandler
     };
   }
   addFormField(attrs, targetFormField, targetIndex) {
@@ -3608,6 +3596,22 @@ class Modeling {
     };
     this._commandStack.execute('key.updateClaim', context);
   }
+  claimPath(formField, path) {
+    const context = {
+      formField,
+      path,
+      claiming: true
+    };
+    this._commandStack.execute('path.updateClaim', context);
+  }
+  unclaimPath(formField, path) {
+    const context = {
+      formField,
+      path,
+      claiming: false
+    };
+    this._commandStack.execute('path.updateClaim', context);
+  }
 }
 Modeling.$inject = ['commandStack', 'eventBus', 'formEditor', 'formFieldRegistry', 'fieldFactory'];
 
@@ -3880,8 +3884,6 @@ FormLayoutUpdater.$inject = ['eventBus', 'formLayouter', 'modeling', 'formEditor
 class IdBehavior extends CommandInterceptor {
   constructor(eventBus, modeling) {
     super(eventBus);
-
-    // @ts-ignore-next-line
     this.preExecute('formField.remove', function (context) {
       const {
         formField
@@ -3891,8 +3893,6 @@ class IdBehavior extends CommandInterceptor {
       } = formField;
       modeling.unclaimId(formField, id);
     }, true);
-
-    // @ts-ignore-next-line
     this.preExecute('formField.edit', function (context) {
       const {
         formField,
@@ -3908,36 +3908,82 @@ class IdBehavior extends CommandInterceptor {
 IdBehavior.$inject = ['eventBus', 'modeling'];
 
 class KeyBehavior extends CommandInterceptor {
-  constructor(eventBus, modeling) {
+  constructor(eventBus, modeling, formFields) {
     super(eventBus);
-
-    // @ts-ignore-next-line
     this.preExecute('formField.remove', function (context) {
       const {
         formField
       } = context;
       const {
-        key
+        key,
+        type
       } = formField;
-      if (key) {
+      const {
+        config
+      } = formFields.get(type);
+      if (config.keyed) {
         modeling.unclaimKey(formField, key);
       }
     }, true);
-
-    // @ts-ignore-next-line
     this.preExecute('formField.edit', function (context) {
       const {
         formField,
         properties
       } = context;
-      if ('key' in properties) {
-        modeling.unclaimKey(formField, formField.key);
+      const {
+        key,
+        type
+      } = formField;
+      const {
+        config
+      } = formFields.get(type);
+      if (config.keyed && 'key' in properties) {
+        modeling.unclaimKey(formField, key);
         modeling.claimKey(formField, properties.key);
       }
     }, true);
   }
 }
-KeyBehavior.$inject = ['eventBus', 'modeling'];
+KeyBehavior.$inject = ['eventBus', 'modeling', 'formFields'];
+
+class PathBehavior extends CommandInterceptor {
+  constructor(eventBus, modeling, formFields) {
+    super(eventBus);
+    this.preExecute('formField.remove', function (context) {
+      const {
+        formField
+      } = context;
+      const {
+        path,
+        type
+      } = formField;
+      const {
+        config
+      } = formFields.get(type);
+      if (config.pathed) {
+        modeling.unclaimPath(formField, path);
+      }
+    }, true);
+    this.preExecute('formField.edit', function (context) {
+      const {
+        formField,
+        properties
+      } = context;
+      const {
+        path,
+        type
+      } = formField;
+      const {
+        config
+      } = formFields.get(type);
+      if (config.pathed && 'path' in properties) {
+        modeling.unclaimPath(formField, path);
+        modeling.claimPath(formField, properties.path);
+      }
+    }, true);
+  }
+}
+PathBehavior.$inject = ['eventBus', 'modeling', 'formFields'];
 
 class ValidateBehavior extends CommandInterceptor {
   constructor(eventBus) {
@@ -3946,7 +3992,6 @@ class ValidateBehavior extends CommandInterceptor {
     /**
      * Remove custom validation if <validationType> is about to be added.
      */
-    // @ts-ignore-next-line
     this.preExecute('formField.edit', function (context) {
       const {
         properties
@@ -3969,9 +4014,10 @@ class ValidateBehavior extends CommandInterceptor {
 ValidateBehavior.$inject = ['eventBus'];
 
 var behaviorModule = {
-  __init__: ['idBehavior', 'keyBehavior', 'validateBehavior'],
+  __init__: ['idBehavior', 'keyBehavior', 'pathBehavior', 'validateBehavior'],
   idBehavior: ['type', IdBehavior],
   keyBehavior: ['type', KeyBehavior],
+  pathBehavior: ['type', PathBehavior],
   validateBehavior: ['type', ValidateBehavior]
 };
 
@@ -4642,6 +4688,33 @@ DeleteIcon.defaultProps = {
   width: "16",
   height: "16"
 };
+var DragIcon = function DragIcon(props) {
+  return jsxs("svg", {
+    ...props,
+    children: [jsx("path", {
+      fill: "#fff",
+      style: {
+        mixBlendMode: "multiply"
+      },
+      d: "M0 0h16v16H0z"
+    }), jsx("path", {
+      fill: "#fff",
+      style: {
+        mixBlendMode: "multiply"
+      },
+      d: "M0 0h16v16H0z"
+    }), jsx("path", {
+      d: "M7 3H5v2h2V3zm4 0H9v2h2V3zM7 7H5v2h2V7zm4 0H9v2h2V7zm-4 4H5v2h2v-2zm4 0H9v2h2v-2z",
+      fill: "#161616"
+    })]
+  });
+};
+DragIcon.defaultProps = {
+  width: "16",
+  height: "16",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+};
 var ExternalLinkIcon = function ExternalLinkIcon(props) {
   return jsx("svg", {
     ...props,
@@ -4649,7 +4722,7 @@ var ExternalLinkIcon = function ExternalLinkIcon(props) {
       fillRule: "evenodd",
       clipRule: "evenodd",
       d: "M12.637 12.637v-4.72h1.362v4.721c0 .36-.137.676-.411.95-.275.275-.591.412-.95.412H3.362c-.38 0-.703-.132-.967-.396A1.315 1.315 0 0 1 2 12.638V3.362c0-.38.132-.703.396-.967S2.982 2 3.363 2h4.553v1.363H3.363v9.274h9.274ZM14 2H9.28l-.001 1.362h2.408L5.065 9.984l.95.95 6.622-6.622v2.409H14V2Z",
-      fill: "#818798"
+      fill: "currentcolor"
     })
   });
 };
@@ -4792,7 +4865,7 @@ function TooltipWrapper(props) {
   return jsx(Tooltip, {
     ...props,
     value: value,
-    forId: prefixId$8(forId)
+    forId: prefixId$9(forId)
   });
 }
 function Tooltip(props) {
@@ -4910,7 +4983,7 @@ function getTooltipPosition(refElement) {
 function isHovered(element) {
   return element.matches(':hover');
 }
-function prefixId$8(id) {
+function prefixId$9(id) {
   return `bio-properties-panel-${id}`;
 }
 
@@ -5283,638 +5356,739 @@ function Placeholder(props) {
     })
   });
 }
-const DEFAULT_LAYOUT = {};
-const DEFAULT_DESCRIPTION = {};
-const DEFAULT_TOOLTIP = {};
+function Description$1(props) {
+  const {
+    element,
+    forId,
+    value
+  } = props;
+  const contextDescription = useDescriptionContext(forId, element);
+  const description = value || contextDescription;
+  if (description) {
+    return jsx("div", {
+      class: "bio-properties-panel-description",
+      children: description
+    });
+  }
+}
+const noop$6 = () => {};
 
 /**
- * @typedef { {
- *    component: import('preact').Component,
- *    id: String,
- *    isEdited?: Function
- * } } EntryDefinition
- *
- * @typedef { {
- *    autoFocusEntry: String,
- *    autoOpen?: Boolean,
- *    entries: Array<EntryDefinition>,
- *    id: String,
- *    label: String,
- *    remove: (event: MouseEvent) => void
- * } } ListItemDefinition
- *
- * @typedef { {
- *    add: (event: MouseEvent) => void,
- *    component: import('preact').Component,
- *    element: Object,
- *    id: String,
- *    items: Array<ListItemDefinition>,
- *    label: String,
- *    shouldSort?: Boolean,
- *    shouldOpen?: Boolean
- * } } ListGroupDefinition
- *
- * @typedef { {
- *    component?: import('preact').Component,
- *    entries: Array<EntryDefinition>,
- *    id: String,
- *    label: String,
- *    shouldOpen?: Boolean
- * } } GroupDefinition
- *
- *  @typedef { {
- *    [id: String]: GetDescriptionFunction
- * } } DescriptionConfig
- *
- *  @typedef { {
- *    [id: String]: GetTooltipFunction
- * } } TooltipConfig
- *
- * @callback { {
- * @param {string} id
- * @param {Object} element
- * @returns {string}
- * } } GetDescriptionFunction
- *
- * @callback { {
- * @param {string} id
- * @param {Object} element
- * @returns {string}
- * } } GetTooltipFunction
- *
- * @typedef { {
- *  getEmpty: (element: object) => import('./components/Placeholder').PlaceholderDefinition,
- *  getMultiple: (element: Object) => import('./components/Placeholder').PlaceholderDefinition
- * } } PlaceholderProvider
- *
- */
-
-/**
- * A basic properties panel component. Describes *how* content will be rendered, accepts
- * data from implementor to describe *what* will be rendered.
- *
- * @param {Object} props
- * @param {Object|Array} props.element
- * @param {import('./components/Header').HeaderProvider} props.headerProvider
- * @param {PlaceholderProvider} [props.placeholderProvider]
- * @param {Array<GroupDefinition|ListGroupDefinition>} props.groups
- * @param {Object} [props.layoutConfig]
- * @param {Function} [props.layoutChanged]
- * @param {DescriptionConfig} [props.descriptionConfig]
- * @param {Function} [props.descriptionLoaded]
- * @param {TooltipConfig} [props.tooltipConfig]
- * @param {Function} [props.tooltipLoaded]
- * @param {Object} [props.eventBus]
+ * Buffer `.focus()` calls while the editor is not initialized.
+ * Set Focus inside when the editor is ready.
  */
-function PropertiesPanel(props) {
+const useBufferedFocus$1 = function (editor, ref) {
+  const [buffer, setBuffer] = useState(undefined);
+  ref.current = useMemo(() => ({
+    focus: offset => {
+      if (editor) {
+        editor.focus(offset);
+      } else {
+        if (typeof offset === 'undefined') {
+          offset = Infinity;
+        }
+        setBuffer(offset);
+      }
+    }
+  }), [editor]);
+  useEffect(() => {
+    if (typeof buffer !== 'undefined' && editor) {
+      editor.focus(buffer);
+      setBuffer(false);
+    }
+  }, [editor, buffer]);
+};
+const CodeEditor$1 = forwardRef((props, ref) => {
   const {
-    element,
-    headerProvider,
-    placeholderProvider,
-    groups,
-    layoutConfig,
-    layoutChanged,
-    descriptionConfig,
-    descriptionLoaded,
-    tooltipConfig,
-    tooltipLoaded,
-    eventBus
+    onInput,
+    disabled,
+    tooltipContainer,
+    enableGutters,
+    value,
+    onLint = noop$6,
+    onPopupOpen = noop$6,
+    popupOpen,
+    contentAttributes = {},
+    hostLanguage = null,
+    singleLine = false
   } = props;
-
-  // set-up layout context
-  const [layout, setLayout] = useState(createLayout(layoutConfig));
-
-  // react to external changes in the layout config
-  useUpdateLayoutEffect(() => {
-    const newLayout = createLayout(layoutConfig);
-    setLayout(newLayout);
-  }, [layoutConfig]);
+  const inputRef = useRef$1();
+  const [editor, setEditor] = useState();
+  const [localValue, setLocalValue] = useState(value || '');
+  useBufferedFocus$1(editor, ref);
+  const handleInput = useStaticCallback(newValue => {
+    onInput(newValue);
+    setLocalValue(newValue);
+  });
   useEffect(() => {
-    if (typeof layoutChanged === 'function') {
-      layoutChanged(layout);
+    let editor;
+    editor = new FeelersEditor({
+      container: inputRef.current,
+      onChange: handleInput,
+      value: localValue,
+      onLint,
+      contentAttributes,
+      tooltipContainer,
+      enableGutters,
+      hostLanguage,
+      singleLine
+    });
+    setEditor(editor);
+    return () => {
+      onLint([]);
+      inputRef.current.innerHTML = '';
+      setEditor(null);
+    };
+  }, []);
+  useEffect(() => {
+    if (!editor) {
+      return;
     }
-  }, [layout, layoutChanged]);
-  const getLayoutForKey = (key, defaultValue) => {
-    return get(layout, key, defaultValue);
-  };
-  const setLayoutForKey = (key, config) => {
-    const newLayout = assign({}, layout);
-    set$1(newLayout, key, config);
-    setLayout(newLayout);
-  };
-  const layoutContext = {
-    layout,
-    setLayout,
-    getLayoutForKey,
-    setLayoutForKey
+    if (value === localValue) {
+      return;
+    }
+    editor.setValue(value);
+    setLocalValue(value);
+  }, [value]);
+  const handleClick = () => {
+    ref.current.focus();
   };
+  return jsxs("div", {
+    class: classnames('bio-properties-panel-feelers-editor-container', popupOpen ? 'popupOpen' : null),
+    children: [jsx("div", {
+      class: "bio-properties-panel-feelers-editor__open-popup-placeholder",
+      children: "Opened in editor"
+    }), jsx("div", {
+      name: props.name,
+      class: classnames('bio-properties-panel-feelers-editor bio-properties-panel-input', localValue ? 'edited' : null, disabled ? 'disabled' : null),
+      ref: inputRef,
+      onClick: handleClick
+    }), jsx("button", {
+      title: "Open pop-up editor",
+      class: "bio-properties-panel-open-feel-popup",
+      onClick: () => onPopupOpen('feelers'),
+      children: jsx(ExternalLinkIcon, {})
+    })]
+  });
+});
+const noop$5 = () => {};
 
-  // set-up description context
-  const description = useMemo(() => createDescriptionContext(descriptionConfig), [descriptionConfig]);
+/**
+ * Buffer `.focus()` calls while the editor is not initialized.
+ * Set Focus inside when the editor is ready.
+ */
+const useBufferedFocus = function (editor, ref) {
+  const [buffer, setBuffer] = useState(undefined);
+  ref.current = useMemo(() => ({
+    focus: offset => {
+      if (editor) {
+        editor.focus(offset);
+      } else {
+        if (typeof offset === 'undefined') {
+          offset = Infinity;
+        }
+        setBuffer(offset);
+      }
+    }
+  }), [editor]);
   useEffect(() => {
-    if (typeof descriptionLoaded === 'function') {
-      descriptionLoaded(description);
+    if (typeof buffer !== 'undefined' && editor) {
+      editor.focus(buffer);
+      setBuffer(false);
     }
-  }, [description, descriptionLoaded]);
-  const getDescriptionForId = (id, element) => {
-    return description[id] && description[id](element);
-  };
-  const descriptionContext = {
-    description,
-    getDescriptionForId
-  };
+  }, [editor, buffer]);
+};
+const CodeEditor = forwardRef((props, ref) => {
+  const {
+    enableGutters,
+    value,
+    onInput,
+    onFeelToggle = noop$5,
+    onLint = noop$5,
+    onPopupOpen = noop$5,
+    popupOpen,
+    disabled,
+    tooltipContainer,
+    variables
+  } = props;
+  const inputRef = useRef$1();
+  const [editor, setEditor] = useState();
+  const [localValue, setLocalValue] = useState(value || '');
+  useBufferedFocus(editor, ref);
+  const handleInput = useStaticCallback(newValue => {
+    onInput(newValue);
+    setLocalValue(newValue);
+  });
+  useEffect(() => {
+    let editor;
 
-  // set-up tooltip context
-  const tooltip = useMemo(() => createTooltipContext(tooltipConfig), [tooltipConfig]);
+    /* Trigger FEEL toggle when
+     *
+     * - `backspace` is pressed
+     * - AND the cursor is at the beginning of the input
+     */
+    const onKeyDown = e => {
+      if (e.key !== 'Backspace' || !editor) {
+        return;
+      }
+      const selection = editor.getSelection();
+      const range = selection.ranges[selection.mainIndex];
+      if (range.from === 0 && range.to === 0) {
+        onFeelToggle();
+      }
+    };
+    editor = new FeelEditor({
+      container: inputRef.current,
+      onChange: handleInput,
+      onKeyDown: onKeyDown,
+      onLint: onLint,
+      tooltipContainer: tooltipContainer,
+      value: localValue,
+      variables: variables,
+      extensions: [...(enableGutters ? [lineNumbers()] : [])]
+    });
+    setEditor(editor);
+    return () => {
+      onLint([]);
+      inputRef.current.innerHTML = '';
+      setEditor(null);
+    };
+  }, []);
   useEffect(() => {
-    if (typeof tooltipLoaded === 'function') {
-      tooltipLoaded(tooltip);
+    if (!editor) {
+      return;
     }
-  }, [tooltip, tooltipLoaded]);
-  const getTooltipForId = (id, element) => {
-    return tooltip[id] && tooltip[id](element);
-  };
-  const tooltipContext = {
-    tooltip,
-    getTooltipForId
-  };
-  const [errors, setErrors] = useState({});
-  const onSetErrors = ({
-    errors
-  }) => setErrors(errors);
-  useEvent('propertiesPanel.setErrors', onSetErrors, eventBus);
-  const errorsContext = {
-    errors
-  };
-  const eventContext = {
-    eventBus
-  };
-  const propertiesPanelContext = {
-    element
+    if (value === localValue) {
+      return;
+    }
+    editor.setValue(value);
+    setLocalValue(value);
+  }, [value]);
+  useEffect(() => {
+    if (!editor) {
+      return;
+    }
+    editor.setVariables(variables);
+  }, [variables]);
+  const handleClick = () => {
+    ref.current.focus();
   };
-
-  // empty state
-  if (placeholderProvider && !element) {
-    return jsx(Placeholder, {
-      ...placeholderProvider.getEmpty()
-    });
-  }
-
-  // multiple state
-  if (placeholderProvider && isArray(element)) {
-    return jsx(Placeholder, {
-      ...placeholderProvider.getMultiple()
-    });
+  return jsxs("div", {
+    class: classnames('bio-properties-panel-feel-editor-container', disabled ? 'disabled' : null, popupOpen ? 'popupOpen' : null),
+    children: [jsx("div", {
+      class: "bio-properties-panel-feel-editor__open-popup-placeholder",
+      children: "Opened in editor"
+    }), jsx("div", {
+      name: props.name,
+      class: classnames('bio-properties-panel-input', localValue ? 'edited' : null),
+      ref: inputRef,
+      onClick: handleClick
+    }), jsx("button", {
+      title: "Open pop-up editor",
+      class: "bio-properties-panel-open-feel-popup",
+      onClick: () => onPopupOpen(),
+      children: jsx(ExternalLinkIcon, {})
+    })]
+  });
+});
+function FeelIndicator(props) {
+  const {
+    active
+  } = props;
+  if (!active) {
+    return null;
   }
-  return jsx(LayoutContext.Provider, {
-    value: propertiesPanelContext,
-    children: jsx(ErrorsContext.Provider, {
-      value: errorsContext,
-      children: jsx(DescriptionContext.Provider, {
-        value: descriptionContext,
-        children: jsx(TooltipContext.Provider, {
-          value: tooltipContext,
-          children: jsx(LayoutContext.Provider, {
-            value: layoutContext,
-            children: jsx(EventContext.Provider, {
-              value: eventContext,
-              children: jsxs("div", {
-                class: "bio-properties-panel",
-                children: [jsx(Header, {
-                  element: element,
-                  headerProvider: headerProvider
-                }), jsx("div", {
-                  class: "bio-properties-panel-scroll-container",
-                  children: groups.map(group => {
-                    const {
-                      component: Component = Group,
-                      id
-                    } = group;
-                    return createElement(Component, {
-                      ...group,
-                      key: id,
-                      element: element
-                    });
-                  })
-                })]
-              })
-            })
-          })
-        })
-      })
-    })
+  return jsx("span", {
+    class: "bio-properties-panel-feel-indicator",
+    children: "="
   });
 }
+const noop$4 = () => {};
 
-// helpers //////////////////
+/**
+ * @param {Object} props
+ * @param {Object} props.label
+ * @param {String} props.feel
+ */
+function FeelIcon(props) {
+  const {
+    feel = false,
+    active,
+    disabled = false,
+    onClick = noop$4
+  } = props;
+  const feelRequiredLabel = 'FEEL expression is mandatory';
+  const feelOptionalLabel = `Click to ${active ? 'remove' : 'set a'} dynamic value with FEEL expression`;
+  const handleClick = e => {
+    onClick(e);
 
-function createLayout(overrides = {}, defaults = DEFAULT_LAYOUT) {
-  return {
-    ...defaults,
-    ...overrides
+    // when pointer event was created from keyboard, keep focus on button
+    if (!e.pointerType) {
+      e.stopPropagation();
+    }
   };
+  return jsx("button", {
+    class: classnames('bio-properties-panel-feel-icon', active ? 'active' : null, feel === 'required' ? 'required' : 'optional'),
+    onClick: handleClick,
+    disabled: feel === 'required' || disabled,
+    title: feel === 'required' ? feelRequiredLabel : feelOptionalLabel,
+    children: jsx(FeelIcon$1, {})
+  });
 }
-function createDescriptionContext(overrides = {}) {
-  return {
-    ...DEFAULT_DESCRIPTION,
-    ...overrides
-  };
+const FeelPopupContext = createContext({
+  open: () => {},
+  close: () => {},
+  source: null
+});
+
+/**
+ * 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 || emptyCanvas(), 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;
 }
-function createTooltipContext(overrides = {}) {
-  return {
-    ...DEFAULT_TOOLTIP,
-    ...overrides
-  };
+function preventDefault(event) {
+  event.preventDefault();
+  event.stopPropagation();
 }
-
-// hooks //////////////////
+function emptyCanvas() {
+  return domify('<canvas width="0" height="0" />');
+}
+const noop$3 = () => {};
 
 /**
- * This hook behaves like useLayoutEffect, but does not trigger on the first render.
+ * A generic popup component.
  *
- * @param {Function} effect
- * @param {Array} deps
+ * @param {Object} props
+ * @param {HTMLElement} [props.container]
+ * @param {string} [props.className]
+ * @param {{x: number, y: number}} [props.position]
+ * @param {number} [props.width]
+ * @param {number} [props.height]
+ * @param {Function} props.onClose
+ * @param {Function} [props.onPostActivate]
+ * @param {Function} [props.onPostDeactivate]
+ * @param {boolean} [props.returnFocus]
+ * @param {string} props.title
  */
-function useUpdateLayoutEffect(effect, deps) {
-  const isMounted = useRef$1(false);
-  useLayoutEffect(() => {
-    if (isMounted.current) {
-      return effect();
-    } else {
-      isMounted.current = true;
+function Popup(props) {
+  const {
+    container,
+    className,
+    position,
+    width,
+    height,
+    onClose,
+    onPostActivate = noop$3,
+    onPostDeactivate = noop$3,
+    returnFocus = true,
+    title
+  } = props;
+  const focusTrapRef = useRef$1(null);
+  const popupRef = useRef$1(null);
+  const handleKeyPress = event => {
+    if (event.key === 'Escape') {
+      onClose();
     }
-  }, deps);
+  };
+
+  // re-activate focus trap on focus
+  const handleFocus = () => {
+    if (focusTrapRef.current) {
+      focusTrapRef.current.activate();
+    }
+  };
+  let style = {};
+  if (position) {
+    style = {
+      ...style,
+      top: position.top + 'px',
+      left: position.left + 'px'
+    };
+  }
+  if (width) {
+    style.width = width + 'px';
+  }
+  if (height) {
+    style.height = height + 'px';
+  }
+  useEffect(() => {
+    if (popupRef.current) {
+      popupRef.current.addEventListener('keydown', handleKeyPress);
+    }
+    return () => {
+      popupRef.current.removeEventListener('keydown', handleKeyPress);
+    };
+  }, [popupRef]);
+  useEffect(() => {
+    if (popupRef.current) {
+      popupRef.current.addEventListener('focusin', handleFocus);
+    }
+    return () => {
+      popupRef.current.removeEventListener('focusin', handleFocus);
+    };
+  }, [popupRef]);
+  useEffect(() => {
+    if (popupRef.current) {
+      focusTrapRef.current = focusTrap.createFocusTrap(popupRef.current, {
+        clickOutsideDeactivates: true,
+        fallbackFocus: popupRef.current,
+        onPostActivate,
+        onPostDeactivate,
+        returnFocusOnDeactivate: returnFocus
+      });
+      focusTrapRef.current.activate();
+    }
+    return () => focusTrapRef.current && focusTrapRef.current.deactivate();
+  }, [popupRef]);
+  return createPortal(jsx("div", {
+    "aria-label": title,
+    tabIndex: -1,
+    ref: popupRef,
+    role: "dialog",
+    class: classnames('bio-properties-panel-popup', className),
+    style: style,
+    children: props.children
+  }), container || document.body);
 }
-function CollapsibleEntry(props) {
+Popup.Title = Title;
+Popup.Body = Body;
+Popup.Footer = Footer;
+function Title(props) {
   const {
-    element,
-    entries = [],
-    id,
-    label,
-    open: shouldOpen,
-    remove
+    children,
+    className,
+    draggable,
+    title,
+    ...rest
   } = props;
-  const [open, setOpen] = useState(shouldOpen);
-  const toggleOpen = () => setOpen(!open);
-  const {
-    onShow
-  } = useContext(LayoutContext);
-  const propertiesPanelContext = {
-    ...useContext(LayoutContext),
-    onShow: useCallback(() => {
-      setOpen(true);
-      if (isFunction(onShow)) {
-        onShow();
-      }
-    }, [onShow, setOpen])
-  };
 
-  // todo(pinussilvestrus): translate once we have a translate mechanism for the core
-  const placeholderLabel = '<empty>';
+  // we can't use state as we need to
+  // manipulate this inside dragging events
+  const context = useRef$1({
+    startPosition: null,
+    newPosition: null
+  });
+  const dragPreviewRef = useRef$1();
+  const titleRef = useRef$1();
+  const onMove = throttle$1((_, delta) => {
+    const {
+      x: dx,
+      y: dy
+    } = delta;
+    const newPosition = {
+      x: context.current.startPosition.x + dx,
+      y: context.current.startPosition.y + dy
+    };
+    const popupParent = getPopupParent(titleRef.current);
+    popupParent.style.top = newPosition.y + 'px';
+    popupParent.style.left = newPosition.x + 'px';
+  });
+  const onMoveStart = event => {
+    // initialize drag handler
+    const onDragStart = createDragger(onMove, dragPreviewRef.current);
+    onDragStart(event);
+    const popupParent = getPopupParent(titleRef.current);
+    const bounds = popupParent.getBoundingClientRect();
+    context.current.startPosition = {
+      x: bounds.left,
+      y: bounds.top
+    };
+  };
+  const onMoveEnd = () => {
+    context.current.newPosition = null;
+  };
   return jsxs("div", {
-    "data-entry-id": id,
-    class: classnames('bio-properties-panel-collapsible-entry', open ? 'open' : ''),
-    children: [jsxs("div", {
-      class: "bio-properties-panel-collapsible-entry-header",
-      onClick: toggleOpen,
+    class: classnames('bio-properties-panel-popup__header', draggable && 'draggable', className),
+    ref: titleRef,
+    draggable: draggable,
+    onDragStart: onMoveStart,
+    onDragEnd: onMoveEnd,
+    ...rest,
+    children: [draggable && jsxs(Fragment$1, {
       children: [jsx("div", {
-        title: label || placeholderLabel,
-        class: classnames('bio-properties-panel-collapsible-entry-header-title', !label && 'empty'),
-        children: label || placeholderLabel
-      }), jsx("button", {
-        title: "Toggle list item",
-        class: "bio-properties-panel-arrow  bio-properties-panel-collapsible-entry-arrow",
-        children: jsx(ArrowIcon, {
-          class: open ? 'bio-properties-panel-arrow-down' : 'bio-properties-panel-arrow-right'
-        })
-      }), remove ? jsx("button", {
-        title: "Delete item",
-        class: "bio-properties-panel-remove-entry",
-        onClick: remove,
-        children: jsx(DeleteIcon, {})
-      }) : null]
+        ref: dragPreviewRef,
+        class: "bio-properties-panel-popup__drag-preview"
+      }), jsx("div", {
+        class: "bio-properties-panel-popup__drag-handle",
+        children: jsx(DragIcon, {})
+      })]
     }), jsx("div", {
-      class: classnames('bio-properties-panel-collapsible-entry-entries', open ? 'open' : ''),
-      children: jsx(LayoutContext.Provider, {
-        value: propertiesPanelContext,
-        children: entries.map(entry => {
-          const {
-            component: Component,
-            id
-          } = entry;
-          return createElement(Component, {
-            ...entry,
-            element: element,
-            key: id
-          });
-        })
-      })
-    })]
+      class: "bio-properties-panel-popup__title",
+      children: title
+    }), children]
   });
 }
-function ListItem(props) {
+function Body(props) {
   const {
-    autoFocusEntry,
-    autoOpen
+    children,
+    className,
+    ...rest
   } = props;
-
-  // focus specified entry on auto open
-  useEffect(() => {
-    if (autoOpen && autoFocusEntry) {
-      const entry = query(`[data-entry-id="${autoFocusEntry}"]`);
-      const focusableInput = query('.bio-properties-panel-input', entry);
-      if (focusableInput) {
-        if (isFunction(focusableInput.select)) {
-          focusableInput.select();
-        } else if (isFunction(focusableInput.focus)) {
-          focusableInput.focus();
-        }
-      }
-    }
-  }, [autoOpen, autoFocusEntry]);
   return jsx("div", {
-    class: "bio-properties-panel-list-item",
-    children: jsx(CollapsibleEntry, {
-      ...props,
-      open: autoOpen
-    })
+    class: classnames('bio-properties-panel-popup__body', className),
+    ...rest,
+    children: children
   });
 }
-const noop$3 = () => {};
+function Footer(props) {
+  const {
+    children,
+    className,
+    ...rest
+  } = props;
+  return jsx("div", {
+    class: classnames('bio-properties-panel-popup__footer', className),
+    ...rest,
+    children: props.children
+  });
+}
+
+// helpers //////////////////////
+
+function getPopupParent(node) {
+  return node.closest('.bio-properties-panel-popup');
+}
+const FEEL_POPUP_WIDTH = 700;
+const FEEL_POPUP_HEIGHT = 250;
 
 /**
- * @param {import('../PropertiesPanel').ListGroupDefinition} props
+ * FEEL popup component, built as a singleton.
  */
-function ListGroup(props) {
+function FEELPopupRoot(props) {
   const {
-    add,
-    element,
-    id,
-    items,
-    label,
-    shouldOpen = true,
-    shouldSort = true
+    element
   } = props;
-  const groupRef = useRef$1(null);
-  const [open, setOpen] = useLayoutState(['groups', id, 'open'], false);
-  const [sticky, setSticky] = useState(false);
-  const onShow = useCallback(() => setOpen(true), [setOpen]);
-  const [ordering, setOrdering] = useState([]);
-  const [newItemAdded, setNewItemAdded] = useState(false);
-
-  // Flag to mark that add button was clicked in the last render cycle
-  const [addTriggered, setAddTriggered] = useState(false);
-  const prevItems = usePrevious(items);
   const prevElement = usePrevious(element);
-  const elementChanged = element !== prevElement;
-  const shouldHandleEffects = !elementChanged && (shouldSort || shouldOpen);
-
-  // reset initial ordering when element changes (before first render)
-  if (elementChanged) {
-    setOrdering(createOrdering(shouldSort ? sortItems(items) : items));
-  }
-
-  // keep ordering in sync to items - and open changes
-
-  // (0) set initial ordering from given items
-  useEffect(() => {
-    if (!prevItems || !shouldSort) {
-      setOrdering(createOrdering(items));
-    }
-  }, [items, element]);
-
-  // (1) items were added
+  const [popupConfig, setPopupConfig] = useState({});
+  const [open, setOpen] = useState(false);
+  const [source, setSource] = useState(null);
+  const [sourceElement, setSourceElement] = useState(null);
+  const handleOpen = (key, config, _sourceElement) => {
+    setSource(key);
+    setPopupConfig(config);
+    setOpen(true);
+    setSourceElement(_sourceElement);
+  };
+  const handleClose = () => {
+    setOpen(false);
+    setSource(null);
+  };
+  const feelPopupContext = {
+    open: handleOpen,
+    close: handleClose,
+    source
+  };
+
+  // close popup on element change, cf. https://github.com/bpmn-io/properties-panel/issues/270
   useEffect(() => {
-    // reset addTriggered flag
-    setAddTriggered(false);
-    if (shouldHandleEffects && prevItems && items.length > prevItems.length) {
-      let add = [];
-      items.forEach(item => {
-        if (!ordering.includes(item.id)) {
-          add.push(item.id);
-        }
-      });
-      let newOrdering = ordering;
-
-      // open if not open, configured and triggered by add button
-      //
-      // TODO(marstamm): remove once we refactor layout handling for listGroups.
-      // Ideally, opening should be handled as part of the `add` callback and
-      // not be a concern for the ListGroup component.
-      if (addTriggered && !open && shouldOpen) {
-        toggleOpen();
-      }
-
-      // filter when not open and configured
-      if (!open && shouldSort) {
-        newOrdering = createOrdering(sortItems(items));
-      }
-
-      // add new items on top or bottom depending on sorting behavior
-      newOrdering = newOrdering.filter(item => !add.includes(item));
-      if (shouldSort) {
-        newOrdering.unshift(...add);
-      } else {
-        newOrdering.push(...add);
-      }
-      setOrdering(newOrdering);
-      setNewItemAdded(addTriggered);
-    } else {
-      setNewItemAdded(false);
+    if (element && element !== prevElement) {
+      handleClose();
     }
-  }, [items, open, shouldHandleEffects, addTriggered]);
-
-  // (2) sort items on open if shouldSort is set
+  }, [element]);
+  return jsxs(FeelPopupContext.Provider, {
+    value: feelPopupContext,
+    children: [open && jsx(FeelPopupComponent, {
+      onClose: handleClose,
+      sourceElement: sourceElement,
+      ...popupConfig
+    }), props.children]
+  });
+}
+function FeelPopupComponent(props) {
+  const {
+    id,
+    hostLanguage,
+    onInput,
+    onClose,
+    position,
+    singleLine,
+    sourceElement,
+    title,
+    tooltipContainer,
+    type,
+    value,
+    variables
+  } = props;
+  const editorRef = useRef$1();
+  const handleSetReturnFocus = () => {
+    sourceElement && sourceElement.focus();
+  };
   useEffect(() => {
-    if (shouldSort && open && !newItemAdded) {
-      setOrdering(createOrdering(sortItems(items)));
-    }
-  }, [open, shouldSort]);
+    const editor = editorRef.current;
+    if (editor) {
+      editor.focus();
+    }
+  }, [editorRef, id]);
+  return jsxs(Popup, {
+    className: "bio-properties-panel-feel-popup",
+    position: position,
+    title: title,
+    onClose: onClose
+
+    // handle focus manually on deactivate
+    ,
+
+    returnFocus: false,
+    onPostDeactivate: handleSetReturnFocus,
+    height: FEEL_POPUP_HEIGHT,
+    width: FEEL_POPUP_WIDTH,
+    children: [jsx(Popup.Title, {
+      title: title,
+      draggable: true
+    }), jsx(Popup.Body, {
+      children: jsxs("div", {
+        class: "bio-properties-panel-feel-popup__body",
+        children: [type === 'feel' && jsx(CodeEditor, {
+          enableGutters: true,
+          id: prefixId$8(id),
+          name: id,
+          onInput: onInput,
+          value: value,
+          variables: variables,
+          ref: editorRef,
+          tooltipContainer: tooltipContainer
+        }), type === 'feelers' && jsx(CodeEditor$1, {
+          id: prefixId$8(id),
+          contentAttributes: {
+            'aria-label': title
+          },
+          enableGutters: true,
+          hostLanguage: hostLanguage,
+          name: id,
+          onInput: onInput,
+          value: value,
+          ref: editorRef,
+          singleLine: singleLine,
+          tooltipContainer: tooltipContainer
+        })]
+      })
+    }), jsx(Popup.Footer, {
+      children: jsx("button", {
+        onClick: onClose,
+        title: "Close pop-up editor",
+        class: "bio-properties-panel-feel-popup__close-btn",
+        children: "Close"
+      })
+    })]
+  });
+}
 
-  // (3) items were deleted
-  useEffect(() => {
-    if (shouldHandleEffects && prevItems && items.length < prevItems.length) {
-      let keep = [];
-      ordering.forEach(o => {
-        if (getItem(items, o)) {
-          keep.push(o);
-        }
-      });
-      setOrdering(keep);
-    }
-  }, [items, shouldHandleEffects]);
+// helpers /////////////////
 
-  // set css class when group is sticky to top
-  useStickyIntersectionObserver(groupRef, 'div.bio-properties-panel-scroll-container', setSticky);
-  const toggleOpen = () => setOpen(!open);
-  const hasItems = !!items.length;
-  const propertiesPanelContext = {
-    ...useContext(LayoutContext),
-    onShow
+function prefixId$8(id) {
+  return `bio-properties-panel-${id}`;
+}
+function ToggleSwitch(props) {
+  const {
+    id,
+    label,
+    onInput,
+    value,
+    switcherLabel,
+    inline,
+    onFocus,
+    onBlur,
+    inputRef,
+    tooltip
+  } = props;
+  const [localValue, setLocalValue] = useState(value);
+  const handleInputCallback = async () => {
+    onInput(!value);
   };
-  const handleAddClick = e => {
-    setAddTriggered(true);
-    add(e);
+  const handleInput = e => {
+    handleInputCallback();
+    setLocalValue(e.target.value);
   };
-  const allErrors = useErrors();
-  const hasError = items.some(item => {
-    if (allErrors[item.id]) {
-      return true;
-    }
-    if (!item.entries) {
+  useEffect(() => {
+    if (value === localValue) {
       return;
     }
-
-    // also check if the error is nested, e.g. for name-value entries
-    return item.entries.some(entry => allErrors[entry.id]);
-  });
+    setLocalValue(value);
+  }, [value]);
   return jsxs("div", {
-    class: "bio-properties-panel-group",
-    "data-group-id": 'group-' + id,
-    ref: groupRef,
-    children: [jsxs("div", {
-      class: classnames('bio-properties-panel-group-header', hasItems ? '' : 'empty', hasItems && open ? 'open' : '', sticky && open ? 'sticky' : ''),
-      onClick: hasItems ? toggleOpen : noop$3,
-      children: [jsx("div", {
-        title: label,
-        class: "bio-properties-panel-group-header-title",
-        children: jsx(TooltipWrapper, {
-          value: props.tooltip,
-          forId: 'group-' + id,
-          element: element,
-          parent: groupRef,
-          children: label
-        })
-      }), jsxs("div", {
-        class: "bio-properties-panel-group-header-buttons",
-        children: [add ? jsxs("button", {
-          title: "Create new list item",
-          class: "bio-properties-panel-group-header-button bio-properties-panel-add-entry",
-          onClick: handleAddClick,
-          children: [jsx(CreateIcon, {}), !hasItems ? jsx("span", {
-            class: "bio-properties-panel-add-entry-label",
-            children: "Create"
-          }) : null]
-        }) : null, hasItems ? jsx("div", {
-          title: `List contains ${items.length} item${items.length != 1 ? 's' : ''}`,
-          class: classnames('bio-properties-panel-list-badge', hasError ? 'bio-properties-panel-list-badge--error' : ''),
-          children: items.length
-        }) : null, hasItems ? jsx("button", {
-          title: "Toggle section",
-          class: "bio-properties-panel-group-header-button bio-properties-panel-arrow",
-          children: jsx(ArrowIcon, {
-            class: open ? 'bio-properties-panel-arrow-down' : 'bio-properties-panel-arrow-right'
-          })
-        }) : null]
-      })]
-    }), jsx("div", {
-      class: classnames('bio-properties-panel-list', open && hasItems ? 'open' : ''),
-      children: jsx(LayoutContext.Provider, {
-        value: propertiesPanelContext,
-        children: ordering.map((o, index) => {
-          const item = getItem(items, o);
-          if (!item) {
-            return;
-          }
-          const {
-            id
-          } = item;
-
-          // if item was added, open it
-          // Existing items will not be affected as autoOpen is only applied on first render
-          const autoOpen = newItemAdded;
-          return createElement(ListItem, {
-            ...item,
-            autoOpen: autoOpen,
-            element: element,
-            index: index,
-            key: id
-          });
-        })
-      })
-    })]
-  });
-}
-
-// helpers ////////////////////
-
-/**
- * Sorts given items alphanumeric by label
- */
-function sortItems(items) {
-  return sortBy(items, i => i.label.toLowerCase());
-}
-function getItem(items, id) {
-  return find(items, i => i.id === id);
-}
-function createOrdering(items) {
-  return items.map(i => i.id);
-}
-function Description$1(props) {
-  const {
-    element,
-    forId,
-    value
-  } = props;
-  const contextDescription = useDescriptionContext(forId, element);
-  const description = value || contextDescription;
-  if (description) {
-    return jsx("div", {
-      class: "bio-properties-panel-description",
-      children: description
-    });
-  }
-}
-function Checkbox(props) {
-  const {
-    id,
-    label,
-    onChange,
-    disabled,
-    value = false,
-    onFocus,
-    onBlur,
-    tooltip
-  } = props;
-  const [localValue, setLocalValue] = useState(value);
-  const handleChangeCallback = ({
-    target
-  }) => {
-    onChange(target.checked);
-  };
-  const handleChange = e => {
-    handleChangeCallback(e);
-    setLocalValue(e.target.value);
-  };
-  useEffect(() => {
-    if (value === localValue) {
-      return;
-    }
-    setLocalValue(value);
-  }, [value]);
-  const ref = useShowEntryEvent(id);
-  return jsxs("div", {
-    class: "bio-properties-panel-checkbox",
-    children: [jsx("input", {
-      ref: ref,
-      id: prefixId$7(id),
-      name: id,
-      onFocus: onFocus,
-      onBlur: onBlur,
-      type: "checkbox",
-      class: "bio-properties-panel-input",
-      onChange: handleChange,
-      checked: localValue,
-      disabled: disabled
-    }), jsx("label", {
-      for: prefixId$7(id),
+    class: classnames('bio-properties-panel-toggle-switch', {
+      inline
+    }),
+    children: [jsx("label", {
       class: "bio-properties-panel-label",
+      for: prefixId$7(id),
       children: jsx(TooltipWrapper, {
         value: tooltip,
         forId: id,
         element: props.element,
         children: label
       })
+    }), jsxs("div", {
+      class: "bio-properties-panel-field-wrapper",
+      children: [jsxs("label", {
+        class: "bio-properties-panel-toggle-switch__switcher",
+        children: [jsx("input", {
+          ref: inputRef,
+          id: prefixId$7(id),
+          class: "bio-properties-panel-input",
+          type: "checkbox",
+          onFocus: onFocus,
+          onBlur: onBlur,
+          name: id,
+          onInput: handleInput,
+          checked: !!localValue
+        }), jsx("span", {
+          class: "bio-properties-panel-toggle-switch__slider"
+        })]
+      }), switcherLabel && jsx("p", {
+        class: "bio-properties-panel-toggle-switch__label",
+        children: switcherLabel
+      })]
     })]
   });
 }
@@ -5925,44 +6099,43 @@ function Checkbox(props) {
  * @param {String} props.id
  * @param {String} props.description
  * @param {String} props.label
+ * @param {String} props.switcherLabel
+ * @param {Boolean} props.inline
  * @param {Function} props.getValue
  * @param {Function} props.setValue
  * @param {Function} props.onFocus
  * @param {Function} props.onBlur
  * @param {string|import('preact').Component} props.tooltip
- * @param {boolean} [props.disabled]
  */
-function CheckboxEntry(props) {
+function ToggleSwitchEntry(props) {
   const {
     element,
     id,
     description,
     label,
+    switcherLabel,
+    inline,
     getValue,
     setValue,
-    disabled,
     onFocus,
     onBlur,
     tooltip
   } = props;
   const value = getValue(element);
-  const error = useError(id);
   return jsxs("div", {
-    class: "bio-properties-panel-entry bio-properties-panel-checkbox-entry",
+    class: "bio-properties-panel-entry bio-properties-panel-toggle-switch-entry",
     "data-entry-id": id,
-    children: [jsx(Checkbox, {
-      disabled: disabled,
+    children: [jsx(ToggleSwitch, {
       id: id,
       label: label,
-      onChange: setValue,
+      value: value,
+      onInput: setValue,
       onFocus: onFocus,
       onBlur: onBlur,
-      value: value,
+      switcherLabel: switcherLabel,
+      inline: inline,
       tooltip: tooltip,
       element: element
-    }, element), error && jsx("div", {
-      class: "bio-properties-panel-error",
-      children: error
     }), jsx(Description$1, {
       forId: id,
       element: element,
@@ -5979,254 +6152,38 @@ function isEdited$8(node) {
 function prefixId$7(id) {
   return `bio-properties-panel-${id}`;
 }
-const useBufferedFocus$1 = function (editor, ref) {
-  const [buffer, setBuffer] = useState(undefined);
-  ref.current = useMemo(() => ({
-    focus: offset => {
-      if (editor) {
-        editor.focus(offset);
-      } else {
-        if (typeof offset === 'undefined') {
-          offset = Infinity;
-        }
-        setBuffer(offset);
-      }
-    }
-  }), [editor]);
-  useEffect(() => {
-    if (typeof buffer !== 'undefined' && editor) {
-      editor.focus(buffer);
-      setBuffer(false);
-    }
-  }, [editor, buffer]);
-};
-const CodeEditor$1 = forwardRef((props, ref) => {
+function NumberField(props) {
   const {
-    onInput,
+    debounce,
     disabled,
-    tooltipContainer,
-    enableGutters,
-    value,
-    onLint = () => {},
-    contentAttributes = {},
-    hostLanguage = null,
-    singleLine = false
+    displayLabel = true,
+    id,
+    inputRef,
+    label,
+    max,
+    min,
+    onInput,
+    step,
+    value = '',
+    onFocus,
+    onBlur
   } = props;
-  const inputRef = useRef$1();
-  const [editor, setEditor] = useState();
-  const [localValue, setLocalValue] = useState(value || '');
-  useBufferedFocus$1(editor, ref);
-  const handleInput = useStaticCallback(newValue => {
-    onInput(newValue);
-    setLocalValue(newValue);
-  });
-  useEffect(() => {
-    let editor;
-    editor = new FeelersEditor({
-      container: inputRef.current,
-      onChange: handleInput,
-      value: localValue,
-      onLint,
-      contentAttributes,
-      tooltipContainer,
-      enableGutters,
-      hostLanguage,
-      singleLine
+  const [localValue, setLocalValue] = useState(value);
+  const handleInputCallback = useMemo(() => {
+    return debounce(event => {
+      const {
+        validity,
+        value
+      } = event.target;
+      if (validity.valid) {
+        onInput(value ? parseFloat(value) : undefined);
+      }
     });
-    setEditor(editor);
-    return () => {
-      onLint([]);
-      inputRef.current.innerHTML = '';
-      setEditor(null);
-    };
-  }, []);
-  useEffect(() => {
-    if (!editor) {
-      return;
-    }
-    if (value === localValue) {
-      return;
-    }
-    editor.setValue(value);
-    setLocalValue(value);
-  }, [value]);
-  const handleClick = () => {
-    ref.current.focus();
-  };
-  return jsx("div", {
-    name: props.name,
-    class: classnames('bio-properties-panel-feelers-editor bio-properties-panel-input', localValue ? 'edited' : null, disabled ? 'disabled' : null),
-    ref: inputRef,
-    onClick: handleClick
-  });
-});
-const useBufferedFocus = function (editor, ref) {
-  const [buffer, setBuffer] = useState(undefined);
-  ref.current = useMemo(() => ({
-    focus: offset => {
-      if (editor) {
-        editor.focus(offset);
-      } else {
-        if (typeof offset === 'undefined') {
-          offset = Infinity;
-        }
-        setBuffer(offset);
-      }
-    }
-  }), [editor]);
-  useEffect(() => {
-    if (typeof buffer !== 'undefined' && editor) {
-      editor.focus(buffer);
-      setBuffer(false);
-    }
-  }, [editor, buffer]);
-};
-const CodeEditor = forwardRef((props, ref) => {
-  const {
-    value,
-    onInput,
-    onFeelToggle,
-    onLint = () => {},
-    disabled,
-    tooltipContainer,
-    variables
-  } = props;
-  const inputRef = useRef$1();
-  const [editor, setEditor] = useState();
-  const [localValue, setLocalValue] = useState(value || '');
-  useBufferedFocus(editor, ref);
-  const handleInput = useStaticCallback(newValue => {
-    onInput(newValue);
-    setLocalValue(newValue);
-  });
-  useEffect(() => {
-    let editor;
-
-    /* Trigger FEEL toggle when
-     *
-     * - `backspace` is pressed
-     * - AND the cursor is at the beginning of the input
-     */
-    const onKeyDown = e => {
-      if (e.key !== 'Backspace' || !editor) {
-        return;
-      }
-      const selection = editor.getSelection();
-      const range = selection.ranges[selection.mainIndex];
-      if (range.from === 0 && range.to === 0) {
-        onFeelToggle();
-      }
-    };
-    editor = new FeelEditor({
-      container: inputRef.current,
-      onChange: handleInput,
-      onKeyDown: onKeyDown,
-      onLint: onLint,
-      tooltipContainer: tooltipContainer,
-      value: localValue,
-      variables: variables
-    });
-    setEditor(editor);
-    return () => {
-      onLint([]);
-      inputRef.current.innerHTML = '';
-      setEditor(null);
-    };
-  }, []);
-  useEffect(() => {
-    if (!editor) {
-      return;
-    }
-    if (value === localValue) {
-      return;
-    }
-    editor.setValue(value);
-    setLocalValue(value);
-  }, [value]);
-  useEffect(() => {
-    if (!editor) {
-      return;
-    }
-    editor.setVariables(variables);
-  }, [variables]);
-  const handleClick = () => {
-    ref.current.focus();
-  };
-  return jsx("div", {
-    class: classnames('bio-properties-panel-feel-editor-container', disabled ? 'disabled' : null),
-    children: jsx("div", {
-      name: props.name,
-      class: classnames('bio-properties-panel-input', localValue ? 'edited' : null),
-      ref: inputRef,
-      onClick: handleClick
-    })
-  });
-});
-function FeelIndicator(props) {
-  const {
-    active
-  } = props;
-  if (!active) {
-    return null;
-  }
-  return jsx("span", {
-    class: "bio-properties-panel-feel-indicator",
-    children: "="
-  });
-}
-const noop$2 = () => {};
-
-/**
- * @param {Object} props
- * @param {Object} props.label
- * @param {String} props.feel
- */
-function FeelIcon(props) {
-  const {
-    feel = false,
-    active,
-    disabled = false,
-    onClick = noop$2
-  } = props;
-  const feelRequiredLabel = 'FEEL expression is mandatory';
-  const feelOptionalLabel = `Click to ${active ? 'remove' : 'set a'} dynamic value with FEEL expression`;
-  const handleClick = e => {
-    onClick(e);
-
-    // when pointer event was created from keyboard, keep focus on button
-    if (!e.pointerType) {
-      e.stopPropagation();
-    }
-  };
-  return jsx("button", {
-    class: classnames('bio-properties-panel-feel-icon', active ? 'active' : null, feel === 'required' ? 'required' : 'optional'),
-    onClick: handleClick,
-    disabled: feel === 'required' || disabled,
-    title: feel === 'required' ? feelRequiredLabel : feelOptionalLabel,
-    children: jsx(FeelIcon$1, {})
-  });
-}
-function ToggleSwitch(props) {
-  const {
-    id,
-    label,
-    onInput,
-    value,
-    switcherLabel,
-    inline,
-    onFocus,
-    onBlur,
-    inputRef,
-    tooltip
-  } = props;
-  const [localValue, setLocalValue] = useState(value);
-  const handleInputCallback = async () => {
-    onInput(!value);
-  };
-  const handleInput = e => {
-    handleInputCallback();
-    setLocalValue(e.target.value);
-  };
+  }, [onInput, debounce]);
+  const handleInput = e => {
+    handleInputCallback(e);
+    setLocalValue(e.target.value);
+  };
   useEffect(() => {
     if (value === localValue) {
       return;
@@ -6234,199 +6191,64 @@ function ToggleSwitch(props) {
     setLocalValue(value);
   }, [value]);
   return jsxs("div", {
-    class: classnames('bio-properties-panel-toggle-switch', {
-      inline
-    }),
-    children: [jsx("label", {
-      class: "bio-properties-panel-label",
+    class: "bio-properties-panel-numberfield",
+    children: [displayLabel && jsx("label", {
       for: prefixId$6(id),
-      children: jsx(TooltipWrapper, {
-        value: tooltip,
-        forId: id,
-        element: props.element,
-        children: label
-      })
-    }), jsxs("div", {
-      class: "bio-properties-panel-field-wrapper",
-      children: [jsxs("label", {
-        class: "bio-properties-panel-toggle-switch__switcher",
-        children: [jsx("input", {
-          ref: inputRef,
-          id: prefixId$6(id),
-          class: "bio-properties-panel-input",
-          type: "checkbox",
-          onFocus: onFocus,
-          onBlur: onBlur,
-          name: id,
-          onInput: handleInput,
-          checked: !!localValue
-        }), jsx("span", {
-          class: "bio-properties-panel-toggle-switch__slider"
-        })]
-      }), switcherLabel && jsx("p", {
-        class: "bio-properties-panel-toggle-switch__label",
-        children: switcherLabel
-      })]
+      class: "bio-properties-panel-label",
+      children: label
+    }), jsx("input", {
+      id: prefixId$6(id),
+      ref: inputRef,
+      type: "number",
+      name: id,
+      spellCheck: "false",
+      autoComplete: "off",
+      disabled: disabled,
+      class: "bio-properties-panel-input",
+      max: max,
+      min: min,
+      onInput: handleInput,
+      onFocus: onFocus,
+      onBlur: onBlur,
+      step: step,
+      value: localValue
     })]
   });
 }
 
 /**
  * @param {Object} props
+ * @param {Boolean} props.debounce
+ * @param {String} props.description
+ * @param {Boolean} props.disabled
  * @param {Object} props.element
+ * @param {Function} props.getValue
  * @param {String} props.id
- * @param {String} props.description
  * @param {String} props.label
- * @param {String} props.switcherLabel
- * @param {Boolean} props.inline
- * @param {Function} props.getValue
+ * @param {String} props.max
+ * @param {String} props.min
  * @param {Function} props.setValue
  * @param {Function} props.onFocus
  * @param {Function} props.onBlur
- * @param {string|import('preact').Component} props.tooltip
+ * @param {String} props.step
+ * @param {Function} props.validate
  */
-function ToggleSwitchEntry(props) {
+function NumberFieldEntry(props) {
   const {
+    debounce,
+    description,
+    disabled,
     element,
+    getValue,
     id,
-    description,
     label,
-    switcherLabel,
-    inline,
-    getValue,
+    max,
+    min,
     setValue,
+    step,
     onFocus,
     onBlur,
-    tooltip
-  } = props;
-  const value = getValue(element);
-  return jsxs("div", {
-    class: "bio-properties-panel-entry bio-properties-panel-toggle-switch-entry",
-    "data-entry-id": id,
-    children: [jsx(ToggleSwitch, {
-      id: id,
-      label: label,
-      value: value,
-      onInput: setValue,
-      onFocus: onFocus,
-      onBlur: onBlur,
-      switcherLabel: switcherLabel,
-      inline: inline,
-      tooltip: tooltip,
-      element: element
-    }), jsx(Description$1, {
-      forId: id,
-      element: element,
-      value: description
-    })]
-  });
-}
-function isEdited$7(node) {
-  return node && !!node.checked;
-}
-
-// helpers /////////////////
-
-function prefixId$6(id) {
-  return `bio-properties-panel-${id}`;
-}
-function NumberField(props) {
-  const {
-    debounce,
-    disabled,
-    displayLabel = true,
-    id,
-    inputRef,
-    label,
-    max,
-    min,
-    onInput,
-    step,
-    value = '',
-    onFocus,
-    onBlur
-  } = props;
-  const [localValue, setLocalValue] = useState(value);
-  const handleInputCallback = useMemo(() => {
-    return debounce(event => {
-      const {
-        validity,
-        value
-      } = event.target;
-      if (validity.valid) {
-        onInput(value ? parseFloat(value) : undefined);
-      }
-    });
-  }, [onInput, debounce]);
-  const handleInput = e => {
-    handleInputCallback(e);
-    setLocalValue(e.target.value);
-  };
-  useEffect(() => {
-    if (value === localValue) {
-      return;
-    }
-    setLocalValue(value);
-  }, [value]);
-  return jsxs("div", {
-    class: "bio-properties-panel-numberfield",
-    children: [displayLabel && jsx("label", {
-      for: prefixId$5(id),
-      class: "bio-properties-panel-label",
-      children: label
-    }), jsx("input", {
-      id: prefixId$5(id),
-      ref: inputRef,
-      type: "number",
-      name: id,
-      spellCheck: "false",
-      autoComplete: "off",
-      disabled: disabled,
-      class: "bio-properties-panel-input",
-      max: max,
-      min: min,
-      onInput: handleInput,
-      onFocus: onFocus,
-      onBlur: onBlur,
-      step: step,
-      value: localValue
-    })]
-  });
-}
-
-/**
- * @param {Object} props
- * @param {Boolean} props.debounce
- * @param {String} props.description
- * @param {Boolean} props.disabled
- * @param {Object} props.element
- * @param {Function} props.getValue
- * @param {String} props.id
- * @param {String} props.label
- * @param {String} props.max
- * @param {String} props.min
- * @param {Function} props.setValue
- * @param {Function} props.onFocus
- * @param {Function} props.onBlur
- * @param {String} props.step
- * @param {Function} props.validate
- */
-function NumberFieldEntry(props) {
-  const {
-    debounce,
-    description,
-    disabled,
-    element,
-    getValue,
-    id,
-    label,
-    max,
-    min,
-    setValue,
-    step,
-    onFocus,
-    onBlur,
-    validate
+    validate
   } = props;
   const globalError = useError(id);
   const [localError, setLocalError] = useState(null);
@@ -6471,27 +6293,30 @@ function NumberFieldEntry(props) {
     })]
   });
 }
-function isEdited$6(node) {
+function isEdited$7(node) {
   return node && !!node.value;
 }
 
 // helpers /////////////////
 
-function prefixId$5(id) {
+function prefixId$6(id) {
   return `bio-properties-panel-${id}`;
 }
-const noop$1 = () => {};
+const noop$2 = () => {};
 function FeelTextfield(props) {
   const {
     debounce,
     id,
+    element,
     label,
+    hostLanguage,
     onInput,
     onError,
     feel,
     value = '',
     disabled = false,
     variables,
+    singleLine,
     tooltipContainer,
     OptionalComponent = OptionalFeelInput,
     tooltip
@@ -6502,6 +6327,11 @@ function FeelTextfield(props) {
   const feelActive = isString(localValue) && localValue.startsWith('=') || feel === 'required';
   const feelOnlyValue = isString(localValue) && localValue.startsWith('=') ? localValue.substring(1) : localValue;
   const [focus, _setFocus] = useState(undefined);
+  const {
+    open: openPopup,
+    source: popupSource
+  } = useContext(FeelPopupContext);
+  const popuOpen = popupSource === id;
   const setFocus = (offset = 0) => {
     const hasFocus = containerRef.current.contains(document.activeElement);
 
@@ -6554,6 +6384,21 @@ function FeelTextfield(props) {
     const message = `${error.source}: ${error.message}`;
     onError(message);
   });
+  const handlePopupOpen = (type = 'feel') => {
+    const popupOptions = {
+      id,
+      hostLanguage,
+      onInput: handleLocalInput,
+      position: calculatePopupPosition(containerRef.current),
+      singleLine,
+      title: getPopupTitle(element, label),
+      tooltipContainer,
+      type,
+      value: feelOnlyValue,
+      variables
+    };
+    openPopup(id, popupOptions, editorRef.current);
+  };
   useEffect(() => {
     if (typeof focus !== 'undefined') {
       editorRef.current.focus(focus);
@@ -6582,7 +6427,7 @@ function FeelTextfield(props) {
       event.clipboardData.setData('application/FEEL', event.clipboardData.getData('text'));
     };
     const pasteHandler = event => {
-      if (feelActive) {
+      if (feelActive || popuOpen) {
         return;
       }
       const data = event.clipboardData.getData('application/FEEL');
@@ -6607,7 +6452,7 @@ function FeelTextfield(props) {
       'feel-active': feelActive
     }),
     children: [jsxs("label", {
-      for: prefixId$4(id),
+      for: prefixId$5(id),
       class: "bio-properties-panel-label",
       onClick: () => setFocus(),
       children: [jsx(TooltipWrapper, {
@@ -6629,28 +6474,33 @@ function FeelTextfield(props) {
         disabled: feel !== 'optional' || disabled,
         onClick: handleFeelToggle
       }), feelActive ? jsx(CodeEditor, {
-        id: prefixId$4(id),
+        id: prefixId$5(id),
         name: id,
         onInput: handleLocalInput,
         disabled: disabled,
+        popupOpen: popuOpen,
         onFeelToggle: () => {
           handleFeelToggle();
           setFocus(true);
         },
         onLint: handleLint,
+        onPopupOpen: handlePopupOpen,
         value: feelOnlyValue,
         variables: variables,
         ref: editorRef,
         tooltipContainer: tooltipContainer
       }) : jsx(OptionalComponent, {
         ...props,
+        popupOpen: popuOpen,
         onInput: handleLocalInput,
         contentAttributes: {
-          'id': prefixId$4(id),
+          'id': prefixId$5(id),
           'aria-label': label
         },
         value: localValue,
-        ref: editorRef
+        ref: editorRef,
+        onPopupOpen: handlePopupOpen,
+        containerRef: containerRef
       })]
     })]
   });
@@ -6684,7 +6534,7 @@ const OptionalFeelInput = forwardRef((props, ref) => {
     }
   };
   return jsx("input", {
-    id: prefixId$4(id),
+    id: prefixId$5(id),
     type: "text",
     ref: inputRef,
     name: id,
@@ -6711,309 +6561,995 @@ const OptionalFeelNumberField = forwardRef((props, ref) => {
     onFocus,
     onBlur
   } = props;
-  const inputRef = useRef$1();
+  const inputRef = useRef$1();
+
+  // To be consistent with the FEEL editor, set focus at start of input
+  // this ensures clean editing experience when switching with the keyboard
+  ref.current = {
+    focus: position => {
+      const input = inputRef.current;
+      if (!input) {
+        return;
+      }
+      input.focus();
+      if (typeof position === 'number' && position !== Infinity) {
+        if (position > value.length) {
+          position = value.length;
+        }
+        input.setSelectionRange(position, position);
+      }
+    }
+  };
+  return jsx(NumberField, {
+    id: id,
+    debounce: debounce,
+    disabled: disabled,
+    displayLabel: false,
+    inputRef: inputRef,
+    max: max,
+    min: min,
+    onInput: onInput,
+    step: step,
+    value: value,
+    onFocus: onFocus,
+    onBlur: onBlur
+  });
+});
+forwardRef((props, ref) => {
+  const {
+    id,
+    disabled,
+    onInput,
+    value,
+    onFocus,
+    onBlur
+  } = props;
+  const inputRef = useRef$1();
+
+  // To be consistent with the FEEL editor, set focus at start of input
+  // this ensures clean editing experience when switching with the keyboard
+  ref.current = {
+    focus: () => {
+      const input = inputRef.current;
+      if (!input) {
+        return;
+      }
+      input.focus();
+      input.setSelectionRange(0, 0);
+    }
+  };
+  return jsx("textarea", {
+    id: prefixId$5(id),
+    type: "text",
+    ref: inputRef,
+    name: id,
+    spellCheck: "false",
+    autoComplete: "off",
+    disabled: disabled,
+    class: "bio-properties-panel-input",
+    onInput: e => onInput(e.target.value),
+    onFocus: onFocus,
+    onBlur: onBlur,
+    value: value || '',
+    "data-gramm": "false"
+  });
+});
+const OptionalFeelToggleSwitch = forwardRef((props, ref) => {
+  const {
+    id,
+    onInput,
+    value,
+    onFocus,
+    onBlur,
+    switcherLabel
+  } = props;
+  const inputRef = useRef$1();
+
+  // To be consistent with the FEEL editor, set focus at start of input
+  // this ensures clean editing experience when switching with the keyboard
+  ref.current = {
+    focus: () => {
+      const input = inputRef.current;
+      if (!input) {
+        return;
+      }
+      input.focus();
+    }
+  };
+  return jsx(ToggleSwitch, {
+    id: id,
+    value: value,
+    inputRef: inputRef,
+    onInput: onInput,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    switcherLabel: switcherLabel
+  });
+});
+forwardRef((props, ref) => {
+  const {
+    id,
+    disabled,
+    onInput,
+    value,
+    onFocus,
+    onBlur
+  } = props;
+  const inputRef = useRef$1();
+  const handleChange = ({
+    target
+  }) => {
+    onInput(target.checked);
+  };
+
+  // To be consistent with the FEEL editor, set focus at start of input
+  // this ensures clean editing experience when switching with the keyboard
+  ref.current = {
+    focus: () => {
+      const input = inputRef.current;
+      if (!input) {
+        return;
+      }
+      input.focus();
+    }
+  };
+  return jsx("input", {
+    ref: inputRef,
+    id: prefixId$5(id),
+    name: id,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    type: "checkbox",
+    class: "bio-properties-panel-input",
+    onChange: handleChange,
+    checked: value,
+    disabled: disabled
+  });
+});
+
+/**
+ * @param {Object} props
+ * @param {Object} props.element
+ * @param {String} props.id
+ * @param {String} props.description
+ * @param {Boolean} props.debounce
+ * @param {Boolean} props.disabled
+ * @param {Boolean} props.feel
+ * @param {String} props.label
+ * @param {Function} props.getValue
+ * @param {Function} props.setValue
+ * @param {Function} props.tooltipContainer
+ * @param {Function} props.validate
+ * @param {Function} props.show
+ * @param {Function} props.example
+ * @param {Function} props.variables
+ * @param {Function} props.onFocus
+ * @param {Function} props.onBlur
+ * @param {string|import('preact').Component} props.tooltip
+ */
+function FeelEntry(props) {
+  const {
+    element,
+    id,
+    description,
+    debounce,
+    disabled,
+    feel,
+    label,
+    getValue,
+    setValue,
+    tooltipContainer,
+    hostLanguage,
+    singleLine,
+    validate,
+    show = noop$2,
+    example,
+    variables,
+    onFocus,
+    onBlur,
+    tooltip
+  } = props;
+  const [validationError, setValidationError] = useState(null);
+  const [localError, setLocalError] = useState(null);
+  let value = getValue(element);
+  useEffect(() => {
+    if (isFunction(validate)) {
+      const newValidationError = validate(value) || null;
+      setValidationError(newValidationError);
+    }
+  }, [value]);
+  const onInput = useStaticCallback(newValue => {
+    let newValidationError = null;
+    if (isFunction(validate)) {
+      newValidationError = validate(newValue) || null;
+    }
+
+    // don't create multiple commandStack entries for the same value
+    if (newValue !== value) {
+      setValue(newValue, newValidationError);
+    }
+    setValidationError(newValidationError);
+  });
+  const onError = useCallback(err => {
+    setLocalError(err);
+  }, []);
+  const temporaryError = useError(id);
+  const error = localError || temporaryError || validationError;
+  return jsxs("div", {
+    class: classnames(props.class, 'bio-properties-panel-entry', error ? 'has-error' : ''),
+    "data-entry-id": id,
+    children: [createElement(FeelTextfield, {
+      ...props,
+      debounce: debounce,
+      disabled: disabled,
+      feel: feel,
+      id: id,
+      key: element,
+      label: label,
+      onInput: onInput,
+      onError: onError,
+      onFocus: onFocus,
+      onBlur: onBlur,
+      example: example,
+      hostLanguage: hostLanguage,
+      singleLine: singleLine,
+      show: show,
+      value: value,
+      variables: variables,
+      tooltipContainer: tooltipContainer,
+      OptionalComponent: props.OptionalComponent,
+      tooltip: tooltip
+    }), error && jsx("div", {
+      class: "bio-properties-panel-error",
+      children: error
+    }), jsx(Description$1, {
+      forId: id,
+      element: element,
+      value: description
+    })]
+  });
+}
+
+/**
+ * @param {Object} props
+ * @param {Object} props.element
+ * @param {String} props.id
+ * @param {String} props.description
+ * @param {Boolean} props.debounce
+ * @param {Boolean} props.disabled
+ * @param {String} props.max
+ * @param {String} props.min
+ * @param {String} props.step
+ * @param {Boolean} props.feel
+ * @param {String} props.label
+ * @param {Function} props.getValue
+ * @param {Function} props.setValue
+ * @param {Function} props.tooltipContainer
+ * @param {Function} props.validate
+ * @param {Function} props.show
+ * @param {Function} props.example
+ * @param {Function} props.variables
+ * @param {Function} props.onFocus
+ * @param {Function} props.onBlur
+ */
+function FeelNumberEntry(props) {
+  return jsx(FeelEntry, {
+    class: "bio-properties-panel-feel-number",
+    OptionalComponent: OptionalFeelNumberField,
+    ...props
+  });
+}
+
+/**
+ * @param {Object} props
+ * @param {Object} props.element
+ * @param {String} props.id
+ * @param {String} props.description
+ * @param {Boolean} props.debounce
+ * @param {Boolean} props.disabled
+ * @param {Boolean} props.feel
+ * @param {String} props.label
+ * @param {Function} props.getValue
+ * @param {Function} props.setValue
+ * @param {Function} props.tooltipContainer
+ * @param {Function} props.validate
+ * @param {Function} props.show
+ * @param {Function} props.example
+ * @param {Function} props.variables
+ * @param {Function} props.onFocus
+ * @param {Function} props.onBlur
+ */
+function FeelToggleSwitchEntry(props) {
+  return jsx(FeelEntry, {
+    class: "bio-properties-panel-feel-toggle-switch",
+    OptionalComponent: OptionalFeelToggleSwitch,
+    ...props
+  });
+}
+
+/**
+ * @param {Object} props
+ * @param {Object} props.element
+ * @param {String} props.id
+ * @param {String} props.description
+ * @param {String} props.hostLanguage
+ * @param {Boolean} props.singleLine
+ * @param {Boolean} props.debounce
+ * @param {Boolean} props.disabled
+ * @param {Boolean} props.feel
+ * @param {String} props.label
+ * @param {Function} props.getValue
+ * @param {Function} props.setValue
+ * @param {Function} props.tooltipContainer
+ * @param {Function} props.validate
+ * @param {Function} props.show
+ * @param {Function} props.example
+ * @param {Function} props.variables
+ * @param {Function} props.onFocus
+ * @param {Function} props.onBlur
+ */
+function FeelTemplatingEntry(props) {
+  return jsx(FeelEntry, {
+    class: "bio-properties-panel-feel-templating",
+    OptionalComponent: CodeEditor$1,
+    ...props
+  });
+}
+function isEdited$6(node) {
+  if (!node) {
+    return false;
+  }
+  if (node.type === 'checkbox') {
+    return !!node.checked || node.classList.contains('edited');
+  }
+  return !!node.value || node.classList.contains('edited');
+}
+
+// helpers /////////////////
+
+function prefixId$5(id) {
+  return `bio-properties-panel-${id}`;
+}
+function calculatePopupPosition(element) {
+  const {
+    top,
+    left
+  } = element.getBoundingClientRect();
+  return {
+    left: left - FEEL_POPUP_WIDTH - 20,
+    top: top
+  };
+}
+
+// todo(pinussilvestrus): make this configurable in the future
+function getPopupTitle(element, label) {
+  let popupTitle;
+  if (element && element.type) {
+    popupTitle = `${element.type} / `;
+  }
+  return `${popupTitle}${label}`;
+}
+const DEFAULT_LAYOUT = {};
+const DEFAULT_DESCRIPTION = {};
+const DEFAULT_TOOLTIP = {};
+
+/**
+ * @typedef { {
+ *    component: import('preact').Component,
+ *    id: String,
+ *    isEdited?: Function
+ * } } EntryDefinition
+ *
+ * @typedef { {
+ *    autoFocusEntry: String,
+ *    autoOpen?: Boolean,
+ *    entries: Array<EntryDefinition>,
+ *    id: String,
+ *    label: String,
+ *    remove: (event: MouseEvent) => void
+ * } } ListItemDefinition
+ *
+ * @typedef { {
+ *    add: (event: MouseEvent) => void,
+ *    component: import('preact').Component,
+ *    element: Object,
+ *    id: String,
+ *    items: Array<ListItemDefinition>,
+ *    label: String,
+ *    shouldSort?: Boolean,
+ *    shouldOpen?: Boolean
+ * } } ListGroupDefinition
+ *
+ * @typedef { {
+ *    component?: import('preact').Component,
+ *    entries: Array<EntryDefinition>,
+ *    id: String,
+ *    label: String,
+ *    shouldOpen?: Boolean
+ * } } GroupDefinition
+ *
+ *  @typedef { {
+ *    [id: String]: GetDescriptionFunction
+ * } } DescriptionConfig
+ *
+ *  @typedef { {
+ *    [id: String]: GetTooltipFunction
+ * } } TooltipConfig
+ *
+ * @callback { {
+ * @param {string} id
+ * @param {Object} element
+ * @returns {string}
+ * } } GetDescriptionFunction
+ *
+ * @callback { {
+ * @param {string} id
+ * @param {Object} element
+ * @returns {string}
+ * } } GetTooltipFunction
+ *
+ * @typedef { {
+ *  getEmpty: (element: object) => import('./components/Placeholder').PlaceholderDefinition,
+ *  getMultiple: (element: Object) => import('./components/Placeholder').PlaceholderDefinition
+ * } } PlaceholderProvider
+ *
+ */
+
+/**
+ * A basic properties panel component. Describes *how* content will be rendered, accepts
+ * data from implementor to describe *what* will be rendered.
+ *
+ * @param {Object} props
+ * @param {Object|Array} props.element
+ * @param {import('./components/Header').HeaderProvider} props.headerProvider
+ * @param {PlaceholderProvider} [props.placeholderProvider]
+ * @param {Array<GroupDefinition|ListGroupDefinition>} props.groups
+ * @param {Object} [props.layoutConfig]
+ * @param {Function} [props.layoutChanged]
+ * @param {DescriptionConfig} [props.descriptionConfig]
+ * @param {Function} [props.descriptionLoaded]
+ * @param {TooltipConfig} [props.tooltipConfig]
+ * @param {Function} [props.tooltipLoaded]
+ * @param {Object} [props.eventBus]
+ */
+function PropertiesPanel(props) {
+  const {
+    element,
+    headerProvider,
+    placeholderProvider,
+    groups,
+    layoutConfig,
+    layoutChanged,
+    descriptionConfig,
+    descriptionLoaded,
+    tooltipConfig,
+    tooltipLoaded,
+    eventBus
+  } = props;
+
+  // set-up layout context
+  const [layout, setLayout] = useState(createLayout(layoutConfig));
+
+  // react to external changes in the layout config
+  useUpdateLayoutEffect(() => {
+    const newLayout = createLayout(layoutConfig);
+    setLayout(newLayout);
+  }, [layoutConfig]);
+  useEffect(() => {
+    if (typeof layoutChanged === 'function') {
+      layoutChanged(layout);
+    }
+  }, [layout, layoutChanged]);
+  const getLayoutForKey = (key, defaultValue) => {
+    return get(layout, key, defaultValue);
+  };
+  const setLayoutForKey = (key, config) => {
+    const newLayout = assign({}, layout);
+    set$1(newLayout, key, config);
+    setLayout(newLayout);
+  };
+  const layoutContext = {
+    layout,
+    setLayout,
+    getLayoutForKey,
+    setLayoutForKey
+  };
+
+  // set-up description context
+  const description = useMemo(() => createDescriptionContext(descriptionConfig), [descriptionConfig]);
+  useEffect(() => {
+    if (typeof descriptionLoaded === 'function') {
+      descriptionLoaded(description);
+    }
+  }, [description, descriptionLoaded]);
+  const getDescriptionForId = (id, element) => {
+    return description[id] && description[id](element);
+  };
+  const descriptionContext = {
+    description,
+    getDescriptionForId
+  };
+
+  // set-up tooltip context
+  const tooltip = useMemo(() => createTooltipContext(tooltipConfig), [tooltipConfig]);
+  useEffect(() => {
+    if (typeof tooltipLoaded === 'function') {
+      tooltipLoaded(tooltip);
+    }
+  }, [tooltip, tooltipLoaded]);
+  const getTooltipForId = (id, element) => {
+    return tooltip[id] && tooltip[id](element);
+  };
+  const tooltipContext = {
+    tooltip,
+    getTooltipForId
+  };
+  const [errors, setErrors] = useState({});
+  const onSetErrors = ({
+    errors
+  }) => setErrors(errors);
+  useEvent('propertiesPanel.setErrors', onSetErrors, eventBus);
+  const errorsContext = {
+    errors
+  };
+  const eventContext = {
+    eventBus
+  };
+  const propertiesPanelContext = {
+    element
+  };
+
+  // empty state
+  if (placeholderProvider && !element) {
+    return jsx(Placeholder, {
+      ...placeholderProvider.getEmpty()
+    });
+  }
+
+  // multiple state
+  if (placeholderProvider && isArray(element)) {
+    return jsx(Placeholder, {
+      ...placeholderProvider.getMultiple()
+    });
+  }
+  return jsx(LayoutContext.Provider, {
+    value: propertiesPanelContext,
+    children: jsx(ErrorsContext.Provider, {
+      value: errorsContext,
+      children: jsx(DescriptionContext.Provider, {
+        value: descriptionContext,
+        children: jsx(TooltipContext.Provider, {
+          value: tooltipContext,
+          children: jsx(LayoutContext.Provider, {
+            value: layoutContext,
+            children: jsx(EventContext.Provider, {
+              value: eventContext,
+              children: jsx(FEELPopupRoot, {
+                element: element,
+                children: jsxs("div", {
+                  class: "bio-properties-panel",
+                  children: [jsx(Header, {
+                    element: element,
+                    headerProvider: headerProvider
+                  }), jsx("div", {
+                    class: "bio-properties-panel-scroll-container",
+                    children: groups.map(group => {
+                      const {
+                        component: Component = Group,
+                        id
+                      } = group;
+                      return createElement(Component, {
+                        ...group,
+                        key: id,
+                        element: element
+                      });
+                    })
+                  })]
+                })
+              })
+            })
+          })
+        })
+      })
+    })
+  });
+}
+
+// helpers //////////////////
+
+function createLayout(overrides = {}, defaults = DEFAULT_LAYOUT) {
+  return {
+    ...defaults,
+    ...overrides
+  };
+}
+function createDescriptionContext(overrides = {}) {
+  return {
+    ...DEFAULT_DESCRIPTION,
+    ...overrides
+  };
+}
+function createTooltipContext(overrides = {}) {
+  return {
+    ...DEFAULT_TOOLTIP,
+    ...overrides
+  };
+}
+
+// hooks //////////////////
+
+/**
+ * This hook behaves like useLayoutEffect, but does not trigger on the first render.
+ *
+ * @param {Function} effect
+ * @param {Array} deps
+ */
+function useUpdateLayoutEffect(effect, deps) {
+  const isMounted = useRef$1(false);
+  useLayoutEffect(() => {
+    if (isMounted.current) {
+      return effect();
+    } else {
+      isMounted.current = true;
+    }
+  }, deps);
+}
+function CollapsibleEntry(props) {
+  const {
+    element,
+    entries = [],
+    id,
+    label,
+    open: shouldOpen,
+    remove
+  } = props;
+  const [open, setOpen] = useState(shouldOpen);
+  const toggleOpen = () => setOpen(!open);
+  const {
+    onShow
+  } = useContext(LayoutContext);
+  const propertiesPanelContext = {
+    ...useContext(LayoutContext),
+    onShow: useCallback(() => {
+      setOpen(true);
+      if (isFunction(onShow)) {
+        onShow();
+      }
+    }, [onShow, setOpen])
+  };
+
+  // todo(pinussilvestrus): translate once we have a translate mechanism for the core
+  const placeholderLabel = '<empty>';
+  return jsxs("div", {
+    "data-entry-id": id,
+    class: classnames('bio-properties-panel-collapsible-entry', open ? 'open' : ''),
+    children: [jsxs("div", {
+      class: "bio-properties-panel-collapsible-entry-header",
+      onClick: toggleOpen,
+      children: [jsx("div", {
+        title: label || placeholderLabel,
+        class: classnames('bio-properties-panel-collapsible-entry-header-title', !label && 'empty'),
+        children: label || placeholderLabel
+      }), jsx("button", {
+        title: "Toggle list item",
+        class: "bio-properties-panel-arrow  bio-properties-panel-collapsible-entry-arrow",
+        children: jsx(ArrowIcon, {
+          class: open ? 'bio-properties-panel-arrow-down' : 'bio-properties-panel-arrow-right'
+        })
+      }), remove ? jsx("button", {
+        title: "Delete item",
+        class: "bio-properties-panel-remove-entry",
+        onClick: remove,
+        children: jsx(DeleteIcon, {})
+      }) : null]
+    }), jsx("div", {
+      class: classnames('bio-properties-panel-collapsible-entry-entries', open ? 'open' : ''),
+      children: jsx(LayoutContext.Provider, {
+        value: propertiesPanelContext,
+        children: entries.map(entry => {
+          const {
+            component: Component,
+            id
+          } = entry;
+          return createElement(Component, {
+            ...entry,
+            element: element,
+            key: id
+          });
+        })
+      })
+    })]
+  });
+}
+function ListItem(props) {
+  const {
+    autoFocusEntry,
+    autoOpen
+  } = props;
 
-  // To be consistent with the FEEL editor, set focus at start of input
-  // this ensures clean editing experience when switching with the keyboard
-  ref.current = {
-    focus: position => {
-      const input = inputRef.current;
-      if (!input) {
-        return;
-      }
-      input.focus();
-      if (typeof position === 'number' && position !== Infinity) {
-        if (position > value.length) {
-          position = value.length;
+  // focus specified entry on auto open
+  useEffect(() => {
+    if (autoOpen && autoFocusEntry) {
+      const entry = query(`[data-entry-id="${autoFocusEntry}"]`);
+      const focusableInput = query('.bio-properties-panel-input', entry);
+      if (focusableInput) {
+        if (isFunction(focusableInput.select)) {
+          focusableInput.select();
+        } else if (isFunction(focusableInput.focus)) {
+          focusableInput.focus();
         }
-        input.setSelectionRange(position, position);
       }
     }
-  };
-  return jsx(NumberField, {
-    id: id,
-    debounce: debounce,
-    disabled: disabled,
-    displayLabel: false,
-    inputRef: inputRef,
-    max: max,
-    min: min,
-    onInput: onInput,
-    step: step,
-    value: value,
-    onFocus: onFocus,
-    onBlur: onBlur
+  }, [autoOpen, autoFocusEntry]);
+  return jsx("div", {
+    class: "bio-properties-panel-list-item",
+    children: jsx(CollapsibleEntry, {
+      ...props,
+      open: autoOpen
+    })
   });
-});
-forwardRef((props, ref) => {
+}
+const noop$1 = () => {};
+
+/**
+ * @param {import('../PropertiesPanel').ListGroupDefinition} props
+ */
+function ListGroup(props) {
   const {
+    add,
+    element,
     id,
-    disabled,
-    onInput,
-    value,
-    onFocus,
-    onBlur
+    items,
+    label,
+    shouldOpen = true,
+    shouldSort = true
   } = props;
-  const inputRef = useRef$1();
+  const groupRef = useRef$1(null);
+  const [open, setOpen] = useLayoutState(['groups', id, 'open'], false);
+  const [sticky, setSticky] = useState(false);
+  const onShow = useCallback(() => setOpen(true), [setOpen]);
+  const [ordering, setOrdering] = useState([]);
+  const [newItemAdded, setNewItemAdded] = useState(false);
 
-  // To be consistent with the FEEL editor, set focus at start of input
-  // this ensures clean editing experience when switching with the keyboard
-  ref.current = {
-    focus: () => {
-      const input = inputRef.current;
-      if (!input) {
-        return;
+  // Flag to mark that add button was clicked in the last render cycle
+  const [addTriggered, setAddTriggered] = useState(false);
+  const prevItems = usePrevious(items);
+  const prevElement = usePrevious(element);
+  const elementChanged = element !== prevElement;
+  const shouldHandleEffects = !elementChanged && (shouldSort || shouldOpen);
+
+  // reset initial ordering when element changes (before first render)
+  if (elementChanged) {
+    setOrdering(createOrdering(shouldSort ? sortItems(items) : items));
+  }
+
+  // keep ordering in sync to items - and open changes
+
+  // (0) set initial ordering from given items
+  useEffect(() => {
+    if (!prevItems || !shouldSort) {
+      setOrdering(createOrdering(items));
+    }
+  }, [items, element]);
+
+  // (1) items were added
+  useEffect(() => {
+    // reset addTriggered flag
+    setAddTriggered(false);
+    if (shouldHandleEffects && prevItems && items.length > prevItems.length) {
+      let add = [];
+      items.forEach(item => {
+        if (!ordering.includes(item.id)) {
+          add.push(item.id);
+        }
+      });
+      let newOrdering = ordering;
+
+      // open if not open, configured and triggered by add button
+      //
+      // TODO(marstamm): remove once we refactor layout handling for listGroups.
+      // Ideally, opening should be handled as part of the `add` callback and
+      // not be a concern for the ListGroup component.
+      if (addTriggered && !open && shouldOpen) {
+        toggleOpen();
       }
-      input.focus();
-      input.setSelectionRange(0, 0);
+
+      // filter when not open and configured
+      if (!open && shouldSort) {
+        newOrdering = createOrdering(sortItems(items));
+      }
+
+      // add new items on top or bottom depending on sorting behavior
+      newOrdering = newOrdering.filter(item => !add.includes(item));
+      if (shouldSort) {
+        newOrdering.unshift(...add);
+      } else {
+        newOrdering.push(...add);
+      }
+      setOrdering(newOrdering);
+      setNewItemAdded(addTriggered);
+    } else {
+      setNewItemAdded(false);
+    }
+  }, [items, open, shouldHandleEffects, addTriggered]);
+
+  // (2) sort items on open if shouldSort is set
+  useEffect(() => {
+    if (shouldSort && open && !newItemAdded) {
+      setOrdering(createOrdering(sortItems(items)));
+    }
+  }, [open, shouldSort]);
+
+  // (3) items were deleted
+  useEffect(() => {
+    if (shouldHandleEffects && prevItems && items.length < prevItems.length) {
+      let keep = [];
+      ordering.forEach(o => {
+        if (getItem(items, o)) {
+          keep.push(o);
+        }
+      });
+      setOrdering(keep);
     }
+  }, [items, shouldHandleEffects]);
+
+  // set css class when group is sticky to top
+  useStickyIntersectionObserver(groupRef, 'div.bio-properties-panel-scroll-container', setSticky);
+  const toggleOpen = () => setOpen(!open);
+  const hasItems = !!items.length;
+  const propertiesPanelContext = {
+    ...useContext(LayoutContext),
+    onShow
   };
-  return jsx("textarea", {
-    id: prefixId$4(id),
-    type: "text",
-    ref: inputRef,
-    name: id,
-    spellCheck: "false",
-    autoComplete: "off",
-    disabled: disabled,
-    class: "bio-properties-panel-input",
-    onInput: e => onInput(e.target.value),
-    onFocus: onFocus,
-    onBlur: onBlur,
-    value: value || '',
-    "data-gramm": "false"
+  const handleAddClick = e => {
+    setAddTriggered(true);
+    add(e);
+  };
+  const allErrors = useErrors();
+  const hasError = items.some(item => {
+    if (allErrors[item.id]) {
+      return true;
+    }
+    if (!item.entries) {
+      return;
+    }
+
+    // also check if the error is nested, e.g. for name-value entries
+    return item.entries.some(entry => allErrors[entry.id]);
   });
-});
-const OptionalFeelToggleSwitch = forwardRef((props, ref) => {
-  const {
-    id,
-    onInput,
-    value,
-    onFocus,
-    onBlur,
-    switcherLabel
-  } = props;
-  const inputRef = useRef$1();
+  return jsxs("div", {
+    class: "bio-properties-panel-group",
+    "data-group-id": 'group-' + id,
+    ref: groupRef,
+    children: [jsxs("div", {
+      class: classnames('bio-properties-panel-group-header', hasItems ? '' : 'empty', hasItems && open ? 'open' : '', sticky && open ? 'sticky' : ''),
+      onClick: hasItems ? toggleOpen : noop$1,
+      children: [jsx("div", {
+        title: label,
+        class: "bio-properties-panel-group-header-title",
+        children: jsx(TooltipWrapper, {
+          value: props.tooltip,
+          forId: 'group-' + id,
+          element: element,
+          parent: groupRef,
+          children: label
+        })
+      }), jsxs("div", {
+        class: "bio-properties-panel-group-header-buttons",
+        children: [add ? jsxs("button", {
+          title: "Create new list item",
+          class: "bio-properties-panel-group-header-button bio-properties-panel-add-entry",
+          onClick: handleAddClick,
+          children: [jsx(CreateIcon, {}), !hasItems ? jsx("span", {
+            class: "bio-properties-panel-add-entry-label",
+            children: "Create"
+          }) : null]
+        }) : null, hasItems ? jsx("div", {
+          title: `List contains ${items.length} item${items.length != 1 ? 's' : ''}`,
+          class: classnames('bio-properties-panel-list-badge', hasError ? 'bio-properties-panel-list-badge--error' : ''),
+          children: items.length
+        }) : null, hasItems ? jsx("button", {
+          title: "Toggle section",
+          class: "bio-properties-panel-group-header-button bio-properties-panel-arrow",
+          children: jsx(ArrowIcon, {
+            class: open ? 'bio-properties-panel-arrow-down' : 'bio-properties-panel-arrow-right'
+          })
+        }) : null]
+      })]
+    }), jsx("div", {
+      class: classnames('bio-properties-panel-list', open && hasItems ? 'open' : ''),
+      children: jsx(LayoutContext.Provider, {
+        value: propertiesPanelContext,
+        children: ordering.map((o, index) => {
+          const item = getItem(items, o);
+          if (!item) {
+            return;
+          }
+          const {
+            id
+          } = item;
 
-  // To be consistent with the FEEL editor, set focus at start of input
-  // this ensures clean editing experience when switching with the keyboard
-  ref.current = {
-    focus: () => {
-      const input = inputRef.current;
-      if (!input) {
-        return;
-      }
-      input.focus();
-    }
-  };
-  return jsx(ToggleSwitch, {
-    id: id,
-    value: value,
-    inputRef: inputRef,
-    onInput: onInput,
-    onFocus: onFocus,
-    onBlur: onBlur,
-    switcherLabel: switcherLabel
+          // if item was added, open it
+          // Existing items will not be affected as autoOpen is only applied on first render
+          const autoOpen = newItemAdded;
+          return createElement(ListItem, {
+            ...item,
+            autoOpen: autoOpen,
+            element: element,
+            index: index,
+            key: id
+          });
+        })
+      })
+    })]
   });
-});
-forwardRef((props, ref) => {
-  const {
-    id,
-    disabled,
-    onInput,
-    value,
-    onFocus,
-    onBlur
-  } = props;
-  const inputRef = useRef$1();
-  const handleChange = ({
-    target
-  }) => {
-    onInput(target.checked);
-  };
+}
 
-  // To be consistent with the FEEL editor, set focus at start of input
-  // this ensures clean editing experience when switching with the keyboard
-  ref.current = {
-    focus: () => {
-      const input = inputRef.current;
-      if (!input) {
-        return;
-      }
-      input.focus();
-    }
-  };
-  return jsx("input", {
-    ref: inputRef,
-    id: prefixId$4(id),
-    name: id,
-    onFocus: onFocus,
-    onBlur: onBlur,
-    type: "checkbox",
-    class: "bio-properties-panel-input",
-    onChange: handleChange,
-    checked: value,
-    disabled: disabled
-  });
-});
+// helpers ////////////////////
 
 /**
- * @param {Object} props
- * @param {Object} props.element
- * @param {String} props.id
- * @param {String} props.description
- * @param {Boolean} props.debounce
- * @param {Boolean} props.disabled
- * @param {Boolean} props.feel
- * @param {String} props.label
- * @param {Function} props.getValue
- * @param {Function} props.setValue
- * @param {Function} props.tooltipContainer
- * @param {Function} props.validate
- * @param {Function} props.show
- * @param {Function} props.example
- * @param {Function} props.variables
- * @param {Function} props.onFocus
- * @param {Function} props.onBlur
- * @param {string|import('preact').Component} props.tooltip
+ * Sorts given items alphanumeric by label
  */
-function FeelEntry(props) {
+function sortItems(items) {
+  return sortBy(items, i => i.label.toLowerCase());
+}
+function getItem(items, id) {
+  return find(items, i => i.id === id);
+}
+function createOrdering(items) {
+  return items.map(i => i.id);
+}
+function Checkbox(props) {
   const {
-    element,
     id,
-    description,
-    debounce,
-    disabled,
-    feel,
     label,
-    getValue,
-    setValue,
-    tooltipContainer,
-    hostLanguage,
-    singleLine,
-    validate,
-    show = noop$1,
-    example,
-    variables,
+    onChange,
+    disabled,
+    value = false,
     onFocus,
     onBlur,
     tooltip
   } = props;
-  const [validationError, setValidationError] = useState(null);
-  const [localError, setLocalError] = useState(null);
-  let value = getValue(element);
+  const [localValue, setLocalValue] = useState(value);
+  const handleChangeCallback = ({
+    target
+  }) => {
+    onChange(target.checked);
+  };
+  const handleChange = e => {
+    handleChangeCallback(e);
+    setLocalValue(e.target.value);
+  };
   useEffect(() => {
-    if (isFunction(validate)) {
-      const newValidationError = validate(value) || null;
-      setValidationError(newValidationError);
+    if (value === localValue) {
+      return;
     }
+    setLocalValue(value);
   }, [value]);
-  const onInput = useStaticCallback(newValue => {
-    let newValidationError = null;
-    if (isFunction(validate)) {
-      newValidationError = validate(newValue) || null;
-    }
-
-    // don't create multiple commandStack entries for the same value
-    if (newValue !== value) {
-      setValue(newValue, newValidationError);
-    }
-    setValidationError(newValidationError);
-  });
-  const onError = useCallback(err => {
-    setLocalError(err);
-  }, []);
-  const temporaryError = useError(id);
-  const error = localError || temporaryError || validationError;
+  const ref = useShowEntryEvent(id);
   return jsxs("div", {
-    class: classnames(props.class, 'bio-properties-panel-entry', error ? 'has-error' : ''),
-    "data-entry-id": id,
-    children: [createElement(FeelTextfield, {
-      ...props,
-      debounce: debounce,
-      disabled: disabled,
-      feel: feel,
-      id: id,
-      key: element,
-      label: label,
-      onInput: onInput,
-      onError: onError,
+    class: "bio-properties-panel-checkbox",
+    children: [jsx("input", {
+      ref: ref,
+      id: prefixId$4(id),
+      name: id,
       onFocus: onFocus,
       onBlur: onBlur,
-      example: example,
-      hostLanguage: hostLanguage,
-      singleLine: singleLine,
-      show: show,
-      value: value,
-      variables: variables,
-      tooltipContainer: tooltipContainer,
-      OptionalComponent: props.OptionalComponent,
-      tooltip: tooltip
-    }), error && jsx("div", {
-      class: "bio-properties-panel-error",
-      children: error
-    }), jsx(Description$1, {
-      forId: id,
-      element: element,
-      value: description
-    })]
-  });
-}
-
-/**
- * @param {Object} props
- * @param {Object} props.element
- * @param {String} props.id
- * @param {String} props.description
- * @param {Boolean} props.debounce
- * @param {Boolean} props.disabled
- * @param {String} props.max
- * @param {String} props.min
- * @param {String} props.step
- * @param {Boolean} props.feel
- * @param {String} props.label
- * @param {Function} props.getValue
- * @param {Function} props.setValue
- * @param {Function} props.tooltipContainer
- * @param {Function} props.validate
- * @param {Function} props.show
- * @param {Function} props.example
- * @param {Function} props.variables
- * @param {Function} props.onFocus
- * @param {Function} props.onBlur
- */
-function FeelNumberEntry(props) {
-  return jsx(FeelEntry, {
-    class: "bio-properties-panel-feel-number",
-    OptionalComponent: OptionalFeelNumberField,
-    ...props
-  });
-}
-
-/**
- * @param {Object} props
- * @param {Object} props.element
- * @param {String} props.id
- * @param {String} props.description
- * @param {Boolean} props.debounce
- * @param {Boolean} props.disabled
- * @param {Boolean} props.feel
- * @param {String} props.label
- * @param {Function} props.getValue
- * @param {Function} props.setValue
- * @param {Function} props.tooltipContainer
- * @param {Function} props.validate
- * @param {Function} props.show
- * @param {Function} props.example
- * @param {Function} props.variables
- * @param {Function} props.onFocus
- * @param {Function} props.onBlur
- */
-function FeelToggleSwitchEntry(props) {
-  return jsx(FeelEntry, {
-    class: "bio-properties-panel-feel-toggle-switch",
-    OptionalComponent: OptionalFeelToggleSwitch,
-    ...props
+      type: "checkbox",
+      class: "bio-properties-panel-input",
+      onChange: handleChange,
+      checked: localValue,
+      disabled: disabled
+    }), jsx("label", {
+      for: prefixId$4(id),
+      class: "bio-properties-panel-label",
+      children: jsx(TooltipWrapper, {
+        value: tooltip,
+        forId: id,
+        element: props.element,
+        children: label
+      })
+    })]
   });
 }
 
@@ -7022,37 +7558,54 @@ function FeelToggleSwitchEntry(props) {
  * @param {Object} props.element
  * @param {String} props.id
  * @param {String} props.description
- * @param {String} props.hostLanguage
- * @param {Boolean} props.singleLine
- * @param {Boolean} props.debounce
- * @param {Boolean} props.disabled
- * @param {Boolean} props.feel
  * @param {String} props.label
  * @param {Function} props.getValue
  * @param {Function} props.setValue
- * @param {Function} props.tooltipContainer
- * @param {Function} props.validate
- * @param {Function} props.show
- * @param {Function} props.example
- * @param {Function} props.variables
  * @param {Function} props.onFocus
  * @param {Function} props.onBlur
+ * @param {string|import('preact').Component} props.tooltip
+ * @param {boolean} [props.disabled]
  */
-function FeelTemplatingEntry(props) {
-  return jsx(FeelEntry, {
-    class: "bio-properties-panel-feel-templating",
-    OptionalComponent: CodeEditor$1,
-    ...props
+function CheckboxEntry(props) {
+  const {
+    element,
+    id,
+    description,
+    label,
+    getValue,
+    setValue,
+    disabled,
+    onFocus,
+    onBlur,
+    tooltip
+  } = props;
+  const value = getValue(element);
+  const error = useError(id);
+  return jsxs("div", {
+    class: "bio-properties-panel-entry bio-properties-panel-checkbox-entry",
+    "data-entry-id": id,
+    children: [jsx(Checkbox, {
+      disabled: disabled,
+      id: id,
+      label: label,
+      onChange: setValue,
+      onFocus: onFocus,
+      onBlur: onBlur,
+      value: value,
+      tooltip: tooltip,
+      element: element
+    }, element), error && jsx("div", {
+      class: "bio-properties-panel-error",
+      children: error
+    }), jsx(Description$1, {
+      forId: id,
+      element: element,
+      value: description
+    })]
   });
 }
 function isEdited$5(node) {
-  if (!node) {
-    return false;
-  }
-  if (node.type === 'checkbox') {
-    return !!node.checked || node.classList.contains('edited');
-  }
-  return !!node.value || node.classList.contains('edited');
+  return node && !!node.checked;
 }
 
 // helpers /////////////////
@@ -7548,6 +8101,9 @@ function textToLabel(text) {
   }
   return null;
 }
+function isValidDotPath(path) {
+  return /^\w+(\.\w+)*$/.test(path);
+}
 const INPUTS = ['checkbox', 'checklist', 'datetime', 'number', 'radio', 'select', 'taglist', 'textfield', 'textarea'];
 const VALUES_INPUTS = ['checklist', 'radio', 'select', 'taglist'];
 
@@ -7558,6 +8114,7 @@ const labelsByType = {
   columns: 'COLUMNS',
   default: 'FORM',
   datetime: 'DATETIME',
+  group: 'GROUP',
   image: 'IMAGE VIEW',
   number: 'NUMBER',
   radio: 'RADIO',
@@ -7573,6 +8130,9 @@ const PropertiesPanelHeaderProvider = {
     const {
       type
     } = field;
+    if (type === 'spacer') {
+      return '';
+    }
     if (type === 'text') {
       return textToLabel(field.text);
     }
@@ -7704,7 +8264,7 @@ function AltTextEntry(props) {
       component: AltText,
       editField: editField,
       field: field,
-      isEdited: isEdited$5
+      isEdited: isEdited$6
     });
   }
   return entries;
@@ -7827,7 +8387,7 @@ function DescriptionEntry(props) {
       component: Description,
       editField: editField,
       field: field,
-      isEdited: isEdited$5
+      isEdited: isEdited$6
     });
   }
   return entries;
@@ -8114,7 +8674,7 @@ function DisabledEntry(props) {
       component: Disabled,
       editField: editField,
       field: field,
-      isEdited: isEdited$7
+      isEdited: isEdited$8
     });
   }
   return entries;
@@ -8249,7 +8809,7 @@ function Key$1(props) {
     field,
     id
   } = props;
-  const formFieldRegistry = useService('formFieldRegistry');
+  const pathRegistry = useService('pathRegistry');
   const debounce = useService('debounce');
   const path = ['key'];
   const getValue = () => {
@@ -8262,17 +8822,32 @@ function Key$1(props) {
     return editField(field, path, value);
   };
   const validate = value => {
+    if (value === field.key) {
+      return null;
+    }
     if (isUndefined(value) || !value.length) {
       return 'Must not be empty.';
     }
-    if (/\s/.test(value)) {
-      return 'Must not contain spaces.';
+    if (value && !isValidDotPath(value)) {
+      return 'Must be a variable or a dot separated path.';
     }
-    const assigned = formFieldRegistry._keys.assigned(value);
-    if (assigned && assigned !== field) {
-      return 'Must be unique.';
+    const hasIntegerPathSegment = value.split('.').some(segment => /^\d+$/.test(segment));
+    if (hasIntegerPathSegment) {
+      return 'Must not contain numerical path segments.';
     }
-    return null;
+    const replacements = {
+      [field.id]: value.split('.')
+    };
+    const oldPath = pathRegistry.getValuePath(field);
+    const newPath = pathRegistry.getValuePath(field, {
+      replacements
+    });
+
+    // unclaim temporarily to avoid self-conflicts
+    pathRegistry.unclaimPath(oldPath);
+    const canClaim = pathRegistry.canClaimPath(newPath, true);
+    pathRegistry.claimPath(oldPath, true);
+    return canClaim ? null : 'Must not conflict with other key/path assignments.';
   };
   return TextfieldEntry({
     debounce,
@@ -8287,6 +8862,147 @@ function Key$1(props) {
   });
 }
 
+function PathEntry(props) {
+  const {
+    editField,
+    field
+  } = props;
+  const {
+    type
+  } = field;
+  const entries = [];
+  if (type === 'group') {
+    entries.push({
+      id: 'path',
+      component: Path,
+      editField: editField,
+      field: field,
+      isEdited: isEdited
+    });
+  }
+  return entries;
+}
+function Path(props) {
+  const {
+    editField,
+    field,
+    id
+  } = props;
+  const debounce = useService('debounce');
+  const pathRegistry = useService('pathRegistry');
+  const path = ['path'];
+  const getValue = () => {
+    return get(field, path, '');
+  };
+  const setValue = (value, error) => {
+    if (error) {
+      return;
+    }
+    return editField(field, path, value);
+  };
+  const validate = value => {
+    if (!value || value === field.path) {
+      return null;
+    }
+    if (value && !isValidDotPath(value)) {
+      return 'Must be empty, a variable or a dot separated path';
+    }
+    const hasIntegerPathSegment = value && value.split('.').some(segment => /^\d+$/.test(segment));
+    if (hasIntegerPathSegment) {
+      return 'Must not contain numerical path segments.';
+    }
+    const options = value && {
+      replacements: {
+        [field.id]: [value]
+      }
+    } || {};
+    const canClaim = pathRegistry.executeRecursivelyOnFields(field, ({
+      field,
+      isClosed
+    }) => {
+      const path = pathRegistry.getValuePath(field, options);
+      return pathRegistry.canClaimPath(path, isClosed);
+    });
+    if (!canClaim) {
+      return 'Must not cause two binding paths to colide';
+    }
+  };
+  return TextfieldEntry({
+    debounce,
+    description: 'Where the child variables of this component are pathed to.',
+    element: field,
+    getValue,
+    id,
+    label: 'Path',
+    tooltip: 'Routes the children of this component into a form variable, may be left empty to route at the root level.',
+    setValue,
+    validate
+  });
+}
+
+function simpleBoolEntryFactory(options) {
+  const {
+    id,
+    label,
+    description,
+    path,
+    props
+  } = options;
+  const {
+    editField,
+    field
+  } = props;
+  return {
+    id,
+    label,
+    path,
+    field,
+    editField,
+    description,
+    component: SimpleBoolComponent,
+    isEdited: isEdited$5
+  };
+}
+const SimpleBoolComponent = props => {
+  const {
+    id,
+    label,
+    path,
+    field,
+    editField,
+    description
+  } = props;
+  const getValue = () => get(field, path, '');
+  const setValue = value => editField(field, path, value || false);
+  return CheckboxEntry({
+    element: field,
+    getValue,
+    id,
+    label,
+    setValue,
+    description
+  });
+};
+
+function GroupEntries(props) {
+  const {
+    field
+  } = props;
+  const {
+    type
+  } = field;
+  if (type !== 'group') {
+    return [];
+  }
+  const entries = [simpleBoolEntryFactory({
+    id: 'showOutline',
+    path: ['showOutline'],
+    label: 'Show outline',
+    props
+  })];
+  return entries;
+}
+
 function LabelEntry(props) {
   const {
     field,
@@ -8304,7 +9020,7 @@ function LabelEntry(props) {
         component: DateLabel,
         editField,
         field,
-        isEdited: isEdited$5
+        isEdited: isEdited$6
       });
     }
     if (subtype === DATETIME_SUBTYPES.TIME || subtype === DATETIME_SUBTYPES.DATETIME) {
@@ -8313,16 +9029,16 @@ function LabelEntry(props) {
         component: TimeLabel,
         editField,
         field,
-        isEdited: isEdited$5
+        isEdited: isEdited$6
       });
     }
-  } else if (INPUTS.includes(type) || type === 'button') {
+  } else if (INPUTS.includes(type) || type === 'button' || type === 'group') {
     entries.push({
       id: 'label',
       component: Label$1,
       editField,
       field,
-      isEdited: isEdited$5
+      isEdited: isEdited$6
     });
   }
   return entries;
@@ -8344,12 +9060,13 @@ function Label$1(props) {
   const setValue = value => {
     return editField(field, path, value || '');
   };
+  const label = field.type === 'group' ? 'Group label' : 'Field label';
   return FeelTemplatingEntry({
     debounce,
     element: field,
     getValue,
     id,
-    label: 'Field label',
+    label,
     singleLine: true,
     setValue,
     variables
@@ -8427,7 +9144,7 @@ function SourceEntry(props) {
       component: Source,
       editField: editField,
       field: field,
-      isEdited: isEdited$5
+      isEdited: isEdited$6
     });
   }
   return entries;
@@ -8484,7 +9201,7 @@ function TextEntry(props) {
     component: Text,
     editField: editField,
     field: field,
-    isEdited: isEdited$5
+    isEdited: isEdited$6
   }];
 
   // todo: skipped to make the release without too much risk
@@ -8553,7 +9270,7 @@ function SpacerEntry(props) {
   entries.push({
     id: id + '-height',
     component: SpacerHeight,
-    isEdited: isEdited$6,
+    isEdited: isEdited$7,
     editField,
     field
   });
@@ -8604,7 +9321,7 @@ function NumberEntries(props) {
   entries.push({
     id: id + '-decimalDigits',
     component: NumberDecimalDigits,
-    isEdited: isEdited$6,
+    isEdited: isEdited$7,
     editField,
     field
   });
@@ -8708,7 +9425,7 @@ function NumberSerializationEntry(props) {
   entries.push({
     id: 'serialize-to-string',
     component: SerializeToString,
-    isEdited: isEdited$8,
+    isEdited: isEdited$5,
     editField,
     field
   });
@@ -8767,7 +9484,7 @@ function DateTimeEntry(props) {
     entries.push({
       id: 'use24h',
       component: Use24h,
-      isEdited: isEdited$8,
+      isEdited: isEdited$5,
       editField,
       field
     });
@@ -8880,7 +9597,7 @@ function DateTimeConstraintsEntry(props) {
     entries.push({
       id: id + '-disallowPassedDates',
       component: DisallowPassedDates,
-      isEdited: isEdited$8,
+      isEdited: isEdited$5,
       editField,
       field
     });
@@ -8981,50 +9698,6 @@ function TimeFormatSelect(props) {
   });
 }
 
-function simpleBoolEntryFactory(options) {
-  const {
-    id,
-    label,
-    description,
-    path,
-    props
-  } = options;
-  const {
-    editField,
-    field
-  } = props;
-  return {
-    id,
-    label,
-    path,
-    field,
-    editField,
-    description,
-    component: SimpleBoolComponent,
-    isEdited: isEdited$8
-  };
-}
-const SimpleBoolComponent = props => {
-  const {
-    id,
-    label,
-    path,
-    field,
-    editField,
-    description
-  } = props;
-  const getValue = () => get(field, path, '');
-  const setValue = value => editField(field, path, value);
-  return CheckboxEntry({
-    element: field,
-    getValue,
-    id,
-    label,
-    setValue,
-    description
-  });
-};
-
 function SelectEntries(props) {
   const {
     field
@@ -9506,7 +10179,7 @@ function AdornerEntry(props) {
     entries.push({
       id: 'prefix-adorner',
       component: PrefixAdorner,
-      isEdited: isEdited$5,
+      isEdited: isEdited$6,
       editField,
       field,
       onChange,
@@ -9515,7 +10188,7 @@ function AdornerEntry(props) {
     entries.push({
       id: 'suffix-adorner',
       component: SuffixAdorner,
-      isEdited: isEdited$5,
+      isEdited: isEdited$6,
       editField,
       field,
       onChange,
@@ -9585,7 +10258,7 @@ function ReadonlyEntry(props) {
       component: Readonly,
       editField: editField,
       field: field,
-      isEdited: isEdited$5
+      isEdited: isEdited$6
     });
   }
   return entries;
@@ -9630,7 +10303,7 @@ function ConditionEntry(props) {
     component: Condition,
     editField: editField,
     field: field,
-    isEdited: isEdited$5
+    isEdited: isEdited$6
   }];
 }
 function Condition(props) {
@@ -9678,7 +10351,7 @@ function ValuesExpressionEntry(props) {
     id: id + '-expression',
     component: ValuesExpression,
     label: 'Values expression',
-    isEdited: isEdited$5,
+    isEdited: isEdited$6,
     editField,
     field
   }];
@@ -9730,6 +10403,12 @@ function GeneralGroup(field, editField, getService) {
   }), ...KeyEntry({
     field,
     editField
+  }), ...PathEntry({
+    field,
+    editField
+  }), ...GroupEntries({
+    field,
+    editField
   }), ...DefaultOptionEntry({
     field,
     editField
@@ -9844,7 +10523,7 @@ function ValidationGroup(field, editField) {
     component: Required,
     getValue,
     field,
-    isEdited: isEdited$8,
+    isEdited: isEdited$5,
     onChange
   }];
   if (type === 'textfield') {
@@ -9864,14 +10543,14 @@ function ValidationGroup(field, editField) {
       component: MinLength,
       getValue,
       field,
-      isEdited: isEdited$5,
+      isEdited: isEdited$6,
       onChange
     }, {
       id: 'maxLength',
       component: MaxLength,
       getValue,
       field,
-      isEdited: isEdited$5,
+      isEdited: isEdited$6,
       onChange
     });
   }
@@ -9891,14 +10570,14 @@ function ValidationGroup(field, editField) {
       component: Min,
       getValue,
       field,
-      isEdited: isEdited$5,
+      isEdited: isEdited$6,
       onChange
     }, {
       id: 'max',
       component: Max,
       getValue,
       field,
-      isEdited: isEdited$5,
+      isEdited: isEdited$6,
       onChange
     });
   }