@bpmn-io/form-js-editor 0.12.2 → 0.13.1

package/dist/index.cjs

@@ -5,12 +5,13 @@ var Ids = require('ids');
 var minDash = require('min-dash');
 var classnames = require('classnames');
 var jsxRuntime = require('preact/jsx-runtime');
-var preact = require('preact');
 var hooks$1 = require('preact/hooks');
-var dragula = require('dragula');
+var preact = require('preact');
 var React = require('preact/compat');
+var dragula = require('dragula');
 var minDom = require('min-dom');
 var arrayMove = require('array-move');
+var feelers = require('feelers');
 var FeelEditor = require('@bpmn-io/feel-editor');
 var Big = require('big.js');
 
@@ -570,19 +571,78 @@ class FormFieldRegistry extends formJsViewer.FormFieldRegistry {
   }
 }
 
+class FormLayoutValidator {
+  /**
+   * @constructor
+   *
+   * @param { import('./FormLayouter').default } formLayouter
+   * @param { import('./FormFieldRegistry').default } formFieldRegistry
+   */
+  constructor(formLayouter, formFieldRegistry) {
+    this._formLayouter = formLayouter;
+    this._formFieldRegistry = formFieldRegistry;
+  }
+  validateField(field = {}, columns, row) {
+    // allow empty (auto columns)
+    if (columns) {
+      // allow minimum 2 cols
+      if (columns < 2) {
+        return 'Minimum 2 columns are allowed';
+      }
+
+      // allow maximum 16 cols
+      if (columns > 16) {
+        return 'Maximum 16 columns are allowed';
+      }
+    }
+    if (!row) {
+      row = this._formLayouter.getRowForField(field);
+    }
+
+    // calculate columns with and without updated field
+    let sumColumns = parseInt(columns) || 0;
+    let sumFields = 1;
+    let sumAutoCols = columns ? 0 : 1;
+    row.components.forEach(id => {
+      if (field.id === id) {
+        return;
+      }
+      const component = this._formFieldRegistry.get(id);
+      const cols = (component.layout || {}).columns;
+      if (!cols) {
+        sumAutoCols++;
+      }
+      sumColumns += parseInt(cols) || 0;
+      sumFields++;
+    });
+
+    // do not allow overflows
+    if (sumColumns > 16 || sumColumns === 16 && sumAutoCols > 0 || columns === 16 && sumFields > 1) {
+      return 'New value exceeds the maximum of 16 columns per row';
+    }
+    if (sumFields > 4) {
+      return 'Maximum 4 fields per row are allowed';
+    }
+    return null;
+  }
+}
+FormLayoutValidator.$inject = ['formLayouter', 'formFieldRegistry'];
+
 class Importer {
   /**
    * @constructor
    * @param { import('../core/FormFieldRegistry').default } formFieldRegistry
    * @param { import('../core/FieldFactory').default } fieldFactory
+   * @param { import('../core/FormLayouter').default } formLayouter
    */
-  constructor(formFieldRegistry, fieldFactory) {
+  constructor(formFieldRegistry, fieldFactory, formLayouter) {
     this._formFieldRegistry = formFieldRegistry;
     this._fieldFactory = fieldFactory;
+    this._formLayouter = formLayouter;
   }
 
   /**
-   * Import schema creating fields, attaching additional
+   * Import schema creating rows, fields, attaching additional
    * information to each field and adding fields to the
    * field registry.
    *
@@ -602,6 +662,7 @@ class Importer {
     const warnings = [];
     try {
       const importedSchema = this.importFormField(formJsViewer.clone(schema));
+      this._formLayouter.calculateLayout(formJsViewer.clone(importedSchema));
       return {
         schema: importedSchema,
         warnings
@@ -666,7 +727,7 @@ class Importer {
     });
   }
 }
-Importer.$inject = ['formFieldRegistry', 'fieldFactory'];
+Importer.$inject = ['formFieldRegistry', 'fieldFactory', 'formLayouter'];
 
 var importModule = {
   importer: ['type', Importer]
@@ -683,11 +744,35 @@ function editorFormFieldClasses(type, {
   });
 }
 
-function _extends$2() { _extends$2 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
+const DragAndDropContext = preact.createContext({
+  drake: null
+});
+var DragAndDropContext$1 = DragAndDropContext;
+
+/**
+ * @param {string} type
+ * @param {boolean} [strict]
+ *
+ * @returns {any}
+ */
+function getService$1(type, strict) {}
+const FormEditorContext = preact.createContext({
+  getService: getService$1
+});
+var FormEditorContext$1 = FormEditorContext;
+
+function useService$1 (type, strict) {
+  const {
+    getService
+  } = hooks$1.useContext(FormEditorContext$1);
+  return getService(type, strict);
+}
+
+function _extends$3() { _extends$3 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
 var CloseIcon = (({
   styles = {},
   ...props
-}) => /*#__PURE__*/React.createElement("svg", _extends$2({
+}) => /*#__PURE__*/React.createElement("svg", _extends$3({
   width: "16",
   height: "16",
   fill: "currentColor",
@@ -698,6 +783,23 @@ var CloseIcon = (({
   d: "M12 4.7l-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8 12 4.7z"
 })));
 
+function _extends$2() { _extends$2 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
+var DraggableIcon = (({
+  styles = {},
+  ...props
+}) => /*#__PURE__*/React.createElement("svg", _extends$2({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "16",
+  height: "16",
+  fill: "currentcolor",
+  viewBox: "0 0 32 32"
+}, props), /*#__PURE__*/React.createElement("path", {
+  d: "M10 6h4v4h-4zm8 0h4v4h-4zm-8 8h4v4h-4zm8 0h4v4h-4zm-8 8h4v4h-4zm8 0h4v4h-4z"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M0 0h32v32H0z",
+  fill: "none"
+})));
+
 function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
 var SearchIcon = (({
   styles = {},
@@ -718,6 +820,8 @@ function EditorText(props) {
     text = ''
   } = props.field;
   const Icon = formJsViewer.iconsByType('text');
+  const templating = useService$1('templating');
+  const expressionLanguage = useService$1('expressionLanguage');
   if (!text) {
     return jsxRuntime.jsx("div", {
       class: editorFormFieldClasses(type),
@@ -729,7 +833,7 @@ function EditorText(props) {
       })
     });
   }
-  if (formJsViewer.isExpression(text)) {
+  if (expressionLanguage.isExpression(text)) {
     return jsxRuntime.jsx("div", {
       class: editorFormFieldClasses(type),
       children: jsxRuntime.jsxs("div", {
@@ -740,6 +844,17 @@ function EditorText(props) {
       })
     });
   }
+  if (templating.isTemplate(text)) {
+    return jsxRuntime.jsx("div", {
+      class: editorFormFieldClasses(type),
+      children: jsxRuntime.jsxs("div", {
+        class: "fjs-form-field-placeholder",
+        children: [jsxRuntime.jsx(Icon, {
+          viewBox: "0 0 54 54"
+        }), "Text view is templated"]
+      })
+    });
+  }
   return jsxRuntime.jsx(formJsViewer.Text, {
     ...props,
     disableLinks: true
@@ -760,30 +875,6 @@ class EditorFormFields extends formJsViewer.FormFields {
   }
 }
 
-const DragAndDropContext = preact.createContext({
-  drake: null
-});
-var DragAndDropContext$1 = DragAndDropContext;
-
-/**
- * @param {string} type
- * @param {boolean} [strict]
- *
- * @returns {any}
- */
-function getService$1(type, strict) {}
-const FormEditorContext = preact.createContext({
-  getService: getService$1
-});
-var FormEditorContext$1 = FormEditorContext;
-
-function useService$1 (type, strict) {
-  const {
-    getService
-  } = hooks$1.useContext(FormEditorContext$1);
-  return getService(type, strict);
-}
-
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 var ListDeleteIcon = (({
   styles = {},
@@ -945,6 +1036,307 @@ function unset() {
   set(null);
 }
 
+const DRAG_CONTAINER_CLS = 'fjs-drag-container';
+const DROP_CONTAINER_VERTICAL_CLS = 'fjs-drop-container-vertical';
+const DROP_CONTAINER_HORIZONTAL_CLS = 'fjs-drop-container-horizontal';
+const DRAG_MOVE_CLS = 'fjs-drag-move';
+const DRAG_ROW_MOVE_CLS = 'fjs-drag-row-move';
+const DRAG_COPY_CLS = 'fjs-drag-copy';
+const DRAG_NO_DROP_CLS = 'fjs-no-drop';
+const DRAG_NO_MOVE_CLS = 'fjs-no-move';
+const ERROR_DROP_CLS = 'fjs-error-drop';
+
+/**
+ * @typedef { { id: String, components: Array<any> } } FormRow
+ */
+
+class Dragging {
+  /**
+   * @constructor
+   *
+   * @param { import('../../core/FormFieldRegistry').default } formFieldRegistry
+   * @param { import('../../core/FormLayouter').default } formLayouter
+   * @param { import('../../core/FormLayoutValidator').default } formLayoutValidator
+   * @param { import('../../core/EventBus').default } eventBus
+   * @param { import('../modeling/Modeling').default } modeling
+   */
+  constructor(formFieldRegistry, formLayouter, formLayoutValidator, eventBus, modeling) {
+    this._formFieldRegistry = formFieldRegistry;
+    this._formLayouter = formLayouter;
+    this._formLayoutValidator = formLayoutValidator;
+    this._eventBus = eventBus;
+    this._modeling = modeling;
+  }
+
+  /**
+   * Calculcates position in form schema given the dropped place.
+   *
+   * @param { FormRow } targetRow
+   * @param { any } targetFormField
+   * @param { HTMLElement } sibling
+   * @returns { number }
+   */
+  getTargetIndex(targetRow, targetFormField, sibling) {
+    /** @type HTMLElement */
+    const siblingFormFieldNode = sibling && sibling.querySelector('.fjs-element');
+    const siblingFormField = siblingFormFieldNode && this._formFieldRegistry.get(siblingFormFieldNode.dataset.id);
+
+    // (1) dropped before existing field => place before
+    if (siblingFormField) {
+      return getFormFieldIndex$1(targetFormField, siblingFormField);
+    }
+
+    // (2) dropped in row => place at the end of row (after last field in row)
+    if (targetRow) {
+      return getFormFieldIndex$1(targetFormField, this._formFieldRegistry.get(targetRow.components[targetRow.components.length - 1])) + 1;
+    }
+
+    // (3) dropped as last item
+    return targetFormField.components.length;
+  }
+  validateDrop(element, target) {
+    const formFieldNode = element.querySelector('.fjs-element');
+    const targetRow = this._formLayouter.getRow(target.dataset.rowId);
+    let columns;
+    let formField;
+    if (formFieldNode) {
+      formField = this._formFieldRegistry.get(formFieldNode.dataset.id);
+      columns = (formField.layout || {}).columns;
+    }
+    return this._formLayoutValidator.validateField(formField, columns, targetRow);
+  }
+  moveField(element, source, targetRow, targetFormField, targetIndex) {
+    const formFieldNode = element.querySelector('.fjs-element');
+    const formField = this._formFieldRegistry.get(formFieldNode.dataset.id);
+    const sourceParent = getFormParent(source);
+    const sourceFormField = this._formFieldRegistry.get(sourceParent.dataset.id);
+    const sourceIndex = getFormFieldIndex$1(sourceFormField, formField);
+    const sourceRow = this._formLayouter.getRowForField(formField);
+    this._modeling.moveFormField(formField, sourceFormField, targetFormField, sourceIndex, targetIndex, sourceRow, targetRow);
+  }
+  createNewField(element, targetRow, targetFormField, targetIndex) {
+    const type = element.dataset.fieldType;
+    let attrs = {
+      type
+    };
+    attrs = {
+      ...attrs,
+      layout: {
+        row: targetRow ? targetRow.id : this._formLayouter.nextRowId(),
+        // enable auto columns
+        columns: null
+      }
+    };
+    this._modeling.addFormField(attrs, targetFormField, targetIndex);
+  }
+  handleRowDrop(el, target, source, sibling) {
+    const targetFormField = this._formFieldRegistry.get(target.dataset.id);
+    const rowNode = el.querySelector('.fjs-layout-row');
+    const row = this._formLayouter.getRow(rowNode.dataset.rowId);
+
+    // move each field in the row before first field of sibling row
+    row.components.forEach((id, index) => {
+      const formField = this._formFieldRegistry.get(id);
+      const sourceParent = getFormParent(source);
+      const sourceFormField = this._formFieldRegistry.get(sourceParent.dataset.id);
+      const siblingRowNode = sibling && sibling.querySelector('.fjs-layout-row');
+      const siblingRow = siblingRowNode && this._formLayouter.getRow(siblingRowNode.dataset.rowId);
+      const siblingFormField = sibling && this._formFieldRegistry.get(siblingRow.components[0]);
+      const sourceIndex = getFormFieldIndex$1(sourceFormField, formField);
+      const targetIndex = (siblingRowNode ? getFormFieldIndex$1(targetFormField, siblingFormField) : targetFormField.components.length) + index;
+      this._modeling.moveFormField(formField, sourceFormField, targetFormField, sourceIndex, targetIndex, row, row);
+    });
+  }
+  handleElementDrop(el, target, source, sibling, drake) {
+    // (1) detect drop target
+    const targetFormField = this._formFieldRegistry.get(getFormParent(target).dataset.id);
+    let targetRow;
+
+    // (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);
+      }
+    }
+    drake.remove();
+
+    // (3) detect position to drop field in schema order
+    const targetIndex = this.getTargetIndex(targetRow, targetFormField, sibling);
+
+    // (4) create new field or move existing
+    if (isPalette(source)) {
+      this.createNewField(el, targetRow, targetFormField, targetIndex);
+    } else {
+      this.moveField(el, source, targetRow, targetFormField, targetIndex);
+    }
+  }
+
+  /**
+   * @param { { container: Array<string>, direction: string, mirrorContainer: string } } options
+   */
+  createDragulaInstance(options) {
+    const {
+      container,
+      direction,
+      mirrorContainer
+    } = options || {};
+    const dragulaInstance = dragula({
+      direction,
+      mirrorContainer,
+      isContainer(el) {
+        return container.some(cls => el.classList.contains(cls));
+      },
+      moves(el, source, handle) {
+        return !handle.classList.contains(DRAG_NO_MOVE_CLS) && (el.classList.contains(DRAG_MOVE_CLS) || el.classList.contains(DRAG_COPY_CLS) || el.classList.contains(DRAG_ROW_MOVE_CLS));
+      },
+      copy(el) {
+        return el.classList.contains(DRAG_COPY_CLS);
+      },
+      accepts: (el, target) => {
+        unsetDropNotAllowed(target);
+
+        // allow dropping rows only between rows
+        if (el.classList.contains(DRAG_ROW_MOVE_CLS)) {
+          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);
+          }
+        }
+        return !target.classList.contains(DRAG_NO_DROP_CLS);
+      },
+      slideFactorX: 10,
+      slideFactorY: 5
+    });
+
+    // bind life cycle events
+    dragulaInstance.on('drag', (element, source) => {
+      this.emit('drag.start', {
+        element,
+        source
+      });
+    });
+    dragulaInstance.on('dragend', element => {
+      this.emit('drag.end', {
+        element
+      });
+    });
+    dragulaInstance.on('drop', (element, target, source, sibling) => {
+      this.emit('drag.drop', {
+        element,
+        target,
+        source,
+        sibling
+      });
+    });
+    dragulaInstance.on('over', (element, container, source) => {
+      this.emit('drag.hover', {
+        element,
+        container,
+        source
+      });
+    });
+    dragulaInstance.on('out', (element, container, source) => {
+      this.emit('drag.out', {
+        element,
+        container,
+        source
+      });
+    });
+    dragulaInstance.on('cancel', (element, container, source) => {
+      this.emit('drag.cancel', {
+        element,
+        container,
+        source
+      });
+    });
+    dragulaInstance.on('drop', (el, target, source, sibling) => {
+      if (!target) {
+        dragulaInstance.remove();
+        return;
+      }
+
+      // (1) handle row drop
+      if (isDragRow(el)) {
+        this.handleRowDrop(el, target, source, sibling);
+      } else {
+        // (2) handle form field drop
+        this.handleElementDrop(el, target, source, sibling, dragulaInstance);
+      }
+    });
+    this.emit('dragula.created', dragulaInstance);
+    return dragulaInstance;
+  }
+  emit(event, context) {
+    this._eventBus.fire(event, context);
+  }
+}
+Dragging.$inject = ['formFieldRegistry', 'formLayouter', 'formLayoutValidator', 'eventBus', 'modeling'];
+
+// helper //////////
+
+function getFormFieldIndex$1(parent, formField) {
+  let fieldFormIndex = parent.components.length;
+  parent.components.forEach(({
+    id
+  }, index) => {
+    if (id === formField.id) {
+      fieldFormIndex = index;
+    }
+  });
+  return fieldFormIndex;
+}
+function isRow(node) {
+  return node.classList.contains('fjs-layout-row');
+}
+function isDragRow(node) {
+  return node.classList.contains(DRAG_ROW_MOVE_CLS);
+}
+function isPalette(node) {
+  return node.classList.contains('fjs-palette-fields');
+}
+function getFormParent(node) {
+  return node.closest('.fjs-element');
+}
+function setDropNotAllowed(node) {
+  node.classList.add(ERROR_DROP_CLS);
+  set('not-allowed');
+}
+function unsetDropNotAllowed(node) {
+  node.classList.remove(ERROR_DROP_CLS);
+  set('grabbing');
+}
+
+function FieldDragPreview(props) {
+  const {
+    class: className,
+    Icon,
+    label
+  } = props;
+  return jsxRuntime.jsxs("div", {
+    class: classnames('fjs-field-preview', className),
+    children: [jsxRuntime.jsx(Icon, {
+      class: "fjs-field-preview-icon",
+      width: "36",
+      height: "36",
+      viewBox: "0 0 54 54"
+    }), jsxRuntime.jsx("span", {
+      class: "fjs-field-preview-text",
+      children: label
+    })]
+  });
+}
+
 function ContextPad(props) {
   if (!props.children) {
     return null;
@@ -991,7 +1383,7 @@ function Element(props) {
     event.stopPropagation();
     selection.toggle(field);
   }
-  const classes = ['fjs-element'];
+  const classes = [];
   if (props.class) {
     classes.push(...props.class.split(' '));
   }
@@ -1010,7 +1402,9 @@ function Element(props) {
     "data-field-type": type,
     onClick: onClick,
     ref: ref,
-    children: [jsxRuntime.jsx(ContextPad, {
+    children: [jsxRuntime.jsx(DebugColumns, {
+      field: field
+    }), jsxRuntime.jsx(ContextPad, {
       children: selection.isSelected(field) && field.type !== 'default' ? jsxRuntime.jsx("button", {
         class: "fjs-context-pad-item",
         onClick: onRemove,
@@ -1019,6 +1413,20 @@ function Element(props) {
     }), props.children]
   });
 }
+function DebugColumns(props) {
+  const {
+    field
+  } = props;
+  const debugColumnsConfig = useService$1('config.debugColumns');
+  if (!debugColumnsConfig || field.type == 'default') {
+    return null;
+  }
+  return jsxRuntime.jsx("div", {
+    style: "width: fit-content; padding: 2px 6px; height: 16px; background: var(--color-blue-205-100-95); display: flex; justify-content: center; align-items: center; position: absolute; bottom: -2px; z-index: 2; font-size: 10px; right: 3px;",
+    class: "fjs-debug-columns",
+    children: (field.layout || {}).columns || 'auto'
+  });
+}
 function Children(props) {
   const {
     field
@@ -1026,7 +1434,7 @@ function Children(props) {
   const {
     id
   } = field;
-  const classes = ['fjs-children', 'fjs-drag-container'];
+  const classes = ['fjs-children', DROP_CONTAINER_VERTICAL_CLS];
   if (props.class) {
     classes.push(...props.class.split(' '));
   }
@@ -1036,12 +1444,51 @@ function Children(props) {
     children: props.children
   });
 }
+function Row(props) {
+  const {
+    row
+  } = props;
+  const {
+    id
+  } = row;
+  const classes = [DROP_CONTAINER_HORIZONTAL_CLS];
+  if (props.class) {
+    classes.push(...props.class.split(' '));
+  }
+  return jsxRuntime.jsxs("div", {
+    class: classnames(DRAG_ROW_MOVE_CLS),
+    children: [jsxRuntime.jsx("span", {
+      class: "fjs-row-dragger",
+      children: jsxRuntime.jsx(DraggableIcon, {})
+    }), jsxRuntime.jsx("div", {
+      class: classes.join(' '),
+      "data-row-id": id,
+      children: props.children
+    })]
+  });
+}
+function Column(props) {
+  const {
+    field
+  } = props;
+  const classes = [DRAG_MOVE_CLS];
+  if (field.type === 'default') {
+    return props.children;
+  }
+  if (props.class) {
+    classes.push(...props.class.split(' '));
+  }
+  return jsxRuntime.jsx("div", {
+    "data-field-type": field.type,
+    class: classes.join(' '),
+    children: props.children
+  });
+}
 function FormEditor$1(props) {
-  const eventBus = useService$1('eventBus'),
+  const dragging = useService$1('dragging'),
+    eventBus = useService$1('eventBus'),
     formEditor = useService$1('formEditor'),
-    formFieldRegistry = useService$1('formFieldRegistry'),
     injector = useService$1('injector'),
-    modeling = useService$1('modeling'),
     selection = useService$1('selection'),
     palette = useService$1('palette'),
     paletteConfig = useService$1('config.palette'),
@@ -1050,6 +1497,7 @@ function FormEditor$1(props) {
   const {
     schema
   } = formEditor._getState();
+  const formContainerRef = hooks$1.useRef(null);
   const paletteRef = hooks$1.useRef(null);
   const propertiesPanelRef = hooks$1.useRef(null);
   const [, setSelection] = hooks$1.useState(schema);
@@ -1068,98 +1516,12 @@ function FormEditor$1(props) {
     drake
   };
   hooks$1.useEffect(() => {
-    const handleDragEvent = (type, context) => {
-      return eventBus.fire(type, context);
-    };
-    const createDragulaInstance = () => {
-      const dragulaInstance = dragula({
-        isContainer(el) {
-          return el.classList.contains('fjs-drag-container');
-        },
-        copy(el) {
-          return el.classList.contains('fjs-drag-copy');
-        },
-        accepts(el, target) {
-          return !target.classList.contains('fjs-no-drop');
-        },
-        slideFactorX: 10,
-        slideFactorY: 5
-      });
-
-      // bind life cycle events
-      dragulaInstance.on('drag', (element, source) => {
-        handleDragEvent('drag.start', {
-          element,
-          source
-        });
-      });
-      dragulaInstance.on('dragend', element => {
-        handleDragEvent('drag.end', {
-          element
-        });
-      });
-      dragulaInstance.on('drop', (element, target, source, sibling) => {
-        handleDragEvent('drag.drop', {
-          element,
-          target,
-          source,
-          sibling
-        });
-      });
-      dragulaInstance.on('over', (element, container, source) => {
-        handleDragEvent('drag.hover', {
-          element,
-          container,
-          source
-        });
-      });
-      dragulaInstance.on('out', (element, container, source) => {
-        handleDragEvent('drag.out', {
-          element,
-          container,
-          source
-        });
-      });
-      dragulaInstance.on('cancel', (element, container, source) => {
-        handleDragEvent('drag.cancel', {
-          element,
-          container,
-          source
-        });
-      });
-
-      // set custom styling
-      dragulaInstance.on('drag', () => {
-        set('grabbing');
-      });
-      dragulaInstance.on('dragend', () => {
-        unset();
-      });
-      dragulaInstance.on('drop', (el, target, source, sibling) => {
-        dragulaInstance.remove();
-        if (!target) {
-          return;
-        }
-        const targetFormField = formFieldRegistry.get(target.dataset.id);
-        const siblingFormField = sibling && formFieldRegistry.get(sibling.dataset.id),
-          targetIndex = siblingFormField ? getFormFieldIndex(targetFormField, siblingFormField) : targetFormField.components.length;
-        if (source.classList.contains('fjs-palette-fields')) {
-          const type = el.dataset.fieldType;
-          modeling.addFormField({
-            type
-          }, targetFormField, targetIndex);
-        } else {
-          const formField = formFieldRegistry.get(el.dataset.id),
-            sourceFormField = formFieldRegistry.get(source.dataset.id),
-            sourceIndex = getFormFieldIndex(sourceFormField, formField);
-          modeling.moveFormField(formField, sourceFormField, targetFormField, sourceIndex, targetIndex);
-        }
-      });
-      eventBus.fire('dragula.created');
-      setDrake(dragulaInstance);
-      return dragulaInstance;
-    };
-    let dragulaInstance = createDragulaInstance();
+    let dragulaInstance = dragging.createDragulaInstance({
+      container: [DRAG_CONTAINER_CLS, DROP_CONTAINER_VERTICAL_CLS, DROP_CONTAINER_HORIZONTAL_CLS],
+      direction: 'vertical',
+      mirrorContainer: formContainerRef.current
+    });
+    setDrake(dragulaInstance);
     const onDetach = () => {
       if (dragulaInstance) {
         dragulaInstance.destroy();
@@ -1168,14 +1530,34 @@ function FormEditor$1(props) {
     };
     const onAttach = () => {
       onDetach();
-      dragulaInstance = createDragulaInstance();
+      dragulaInstance = dragging.createDragulaInstance({
+        container: [DRAG_CONTAINER_CLS, DROP_CONTAINER_VERTICAL_CLS, DROP_CONTAINER_HORIZONTAL_CLS],
+        direction: 'vertical',
+        mirrorContainer: formContainerRef.current
+      });
+      setDrake(dragulaInstance);
+    };
+    const onCreate = drake => {
+      setDrake(drake);
+    };
+    const onDragStart = () => {
+      set('grabbing');
+    };
+    const onDragEnd = () => {
+      unset();
     };
     eventBus.on('attach', onAttach);
     eventBus.on('detach', onDetach);
+    eventBus.on('dragula.created', onCreate);
+    eventBus.on('drag.start', onDragStart);
+    eventBus.on('drag.end', onDragEnd);
     return () => {
       onDetach();
       eventBus.off('attach', onAttach);
       eventBus.off('detach', onDetach);
+      eventBus.off('dragula.created', onCreate);
+      eventBus.off('drag.start', onDragStart);
+      eventBus.off('drag.end', onDragEnd);
     };
   }, []);
 
@@ -1185,8 +1567,10 @@ function FormEditor$1(props) {
   }, []);
   const formRenderContext = {
     Children,
+    Column,
     Element,
-    Empty
+    Empty,
+    Row
   };
   const formContext = {
     getService(type, strict = true) {
@@ -1235,6 +1619,7 @@ function FormEditor$1(props) {
         class: "fjs-editor-palette-container",
         ref: paletteRef
       }), jsxRuntime.jsx("div", {
+        ref: formContainerRef,
         class: "fjs-form-container",
         children: jsxRuntime.jsx(formJsViewer.FormContext.Provider, {
           value: formContext,
@@ -1270,29 +1655,39 @@ function CreatePreview(props) {
   } = hooks$1.useContext(DragAndDropContext$1);
   function handleCloned(clone, original, type) {
     const fieldType = clone.dataset.fieldType;
-    const Icon = formJsViewer.iconsByType(fieldType);
-    const {
-      label
-    } = findPaletteEntry(fieldType);
+
+    // (1) field preview
     if (fieldType) {
+      const {
+        label
+      } = findPaletteEntry(fieldType);
+      const Icon = formJsViewer.iconsByType(fieldType);
       clone.innerHTML = '';
       clone.class = 'gu-mirror';
+      clone.classList.add('fjs-field-preview-container');
       if (original.classList.contains('fjs-palette-field')) {
-        preact.render(jsxRuntime.jsxs("div", {
-          class: "fjs-palette-field",
-          children: [jsxRuntime.jsx(Icon, {
-            class: "fjs-palette-field-icon",
-            width: "36",
-            height: "36",
-            viewBox: "0 0 54 54"
-          }), jsxRuntime.jsx("span", {
-            class: "fjs-palette-field-text",
-            children: label
-          })]
-        }), clone);
-      } else {
-        preact.render(jsxRuntime.jsx(Icon, {}), clone);
+        // default to auto columns when creating from palette
+        clone.classList.add('cds--col');
       }
+
+      // todo(pinussilvestrus): dragula, how to mitigate cursor position
+      // https://github.com/bevacqua/dragula/issues/285
+      preact.render(jsxRuntime.jsx(FieldDragPreview, {
+        label: label,
+        Icon: Icon
+      }), clone);
+    } else {
+      // (2) row preview
+
+      // remove elements from copy (context pad, row dragger, ...)
+      ['fjs-context-pad', 'fjs-row-dragger', 'fjs-debug-columns'].forEach(cls => {
+        const cloneNode = clone.querySelectorAll('.' + cls);
+        cloneNode.length && cloneNode.forEach(e => e.remove());
+      });
+
+      // mirror grid
+      clone.classList.add('cds--grid');
+      clone.classList.add('cds--grid--condensed');
     }
   }
   hooks$1.useEffect(() => {
@@ -1365,10 +1760,12 @@ var renderModule = {
 
 var core = {
   __depends__: [importModule, renderModule],
+  debounce: ['factory', DebounceFactory],
   eventBus: ['type', EventBus],
   formFieldRegistry: ['type', FormFieldRegistry],
-  fieldFactory: ['type', FieldFactory],
-  debounce: ['factory', DebounceFactory]
+  formLayouter: ['type', formJsViewer.FormLayouter],
+  formLayoutValidator: ['type', FormLayoutValidator],
+  fieldFactory: ['type', FieldFactory]
 };
 
 var NOT_REGISTERED_ERROR = 'is not a registered action',
@@ -1646,6 +2043,11 @@ var EditorActionsModule = {
   editorActions: ['type', FormEditorActions]
 };
 
+var DraggingModule = {
+  __init__: ['dragging'],
+  dragging: ['type', Dragging]
+};
+
 var KEYS_COPY = ['c', 'C', 'KeyC'];
 var KEYS_PASTE = ['v', 'V', 'KeyV'];
 var KEYS_REDO$1 = ['y', 'Y', 'KeyY'];
@@ -2058,6 +2460,13 @@ function updatePath(formFieldRegistry, formField, index) {
   formField._path = [...parent._path, 'components', index];
   return formField;
 }
+function updateRow(formField, rowId) {
+  formField.layout = {
+    ...(formField.layout || {}),
+    row: rowId
+  };
+  return formField;
+}
 
 class AddFormFieldHandler {
   /**
@@ -2207,13 +2616,17 @@ class MoveFormFieldHandler {
       sourceFormField,
       targetFormField,
       sourceIndex,
-      targetIndex
+      targetIndex,
+      sourceRow,
+      targetRow
     } = context;
     this.moveFormField({
       sourceFormField: targetFormField,
       targetFormField: sourceFormField,
       sourceIndex: targetIndex,
-      targetIndex: sourceIndex
+      targetIndex: sourceIndex,
+      sourceRow: targetRow,
+      targetRow: sourceRow
     }, true);
   }
   moveFormField(context, revert) {
@@ -2221,7 +2634,8 @@ class MoveFormFieldHandler {
       sourceFormField,
       targetFormField,
       sourceIndex,
-      targetIndex
+      targetIndex,
+      targetRow
     } = context;
     let {
       schema
@@ -2237,11 +2651,15 @@ class MoveFormFieldHandler {
           targetIndex--;
         }
       }
+      const formField = minDash.get(schema, [...sourcePath, sourceIndex]);
+
+      // (1) Add to row
+      updateRow(formField, targetRow ? targetRow.id : null);
 
-      // (1) Move form field
+      // (2) Move form field
       arrayMove.mutate(minDash.get(schema, sourcePath), sourceIndex, targetIndex);
 
-      // (2) Update paths of new form field and its siblings
+      // (3) Update paths of new form field and its siblings
       minDash.get(schema, sourcePath).forEach((formField, index) => updatePath(this._formFieldRegistry, formField, index));
     } else {
       const formField = minDash.get(schema, [...sourcePath, sourceIndex]);
@@ -2254,10 +2672,13 @@ class MoveFormFieldHandler {
       minDash.get(schema, sourcePath).forEach((formField, index) => updatePath(this._formFieldRegistry, formField, index));
       const targetPath = [...targetFormField._path, 'components'];
 
-      // (3) Add form field
+      // (3) Add to row
+      updateRow(formField, targetRow ? targetRow.id : null);
+
+      // (4) Add form field
       arrayAdd$1(minDash.get(schema, targetPath), targetIndex, formField);
 
-      // (4) Update paths of siblings
+      // (5) Update paths of siblings
       minDash.get(schema, targetPath).forEach((formField, index) => updatePath(this._formFieldRegistry, formField, index));
     }
 
@@ -2449,13 +2870,15 @@ class Modeling {
     };
     this._commandStack.execute('formField.edit', context);
   }
-  moveFormField(formField, sourceFormField, targetFormField, sourceIndex, targetIndex) {
+  moveFormField(formField, sourceFormField, targetFormField, sourceIndex, targetIndex, sourceRow, targetRow) {
     const context = {
       formField,
       sourceFormField,
       targetFormField,
       sourceIndex,
-      targetIndex
+      targetIndex,
+      sourceRow,
+      targetRow
     };
     this._commandStack.execute('formField.move', context);
   }
@@ -2614,6 +3037,44 @@ minDash.forEach(hooks, function (hook) {
   };
 });
 
+class FormLayoutUpdater extends CommandInterceptor {
+  constructor(eventBus, formLayouter, modeling, formEditor) {
+    super(eventBus);
+    this._eventBus = eventBus;
+    this._formLayouter = formLayouter;
+    this._modeling = modeling;
+    this._formEditor = formEditor;
+
+    // @ts-ignore
+    this.preExecute(['formField.add', 'formField.remove', 'formField.move', 'id.updateClaim'], event => this.updateRowIds(event));
+
+    // we need that as the state got updates
+    // on the next tick (not in post execute)
+    eventBus.on('changed', context => {
+      const {
+        schema
+      } = context;
+      this.updateLayout(schema);
+    });
+  }
+  updateLayout(schema) {
+    this._formLayouter.clear();
+    this._formLayouter.calculateLayout(formJsViewer.clone(schema));
+  }
+  updateRowIds(event) {
+    const {
+      schema
+    } = this._formEditor._getState();
+
+    // make sure rows are persisted in schema (e.g. for migration case)
+    schema.components.forEach(formField => {
+      const row = this._formLayouter.getRowForField(formField);
+      updateRow(formField, row.id);
+    });
+  }
+}
+FormLayoutUpdater.$inject = ['eventBus', 'formLayouter', 'modeling', 'formEditor'];
+
 class IdBehavior extends CommandInterceptor {
   constructor(eventBus, modeling) {
     super(eventBus);
@@ -3135,7 +3596,8 @@ var commandModule = {
 
 var ModelingModule = {
   __depends__: [behaviorModule, commandModule],
-  __init__: ['modeling'],
+  __init__: ['formLayoutUpdater', 'modeling'],
+  formLayoutUpdater: ['type', FormLayoutUpdater],
   modeling: ['type', Modeling]
 };
 
@@ -3431,19 +3893,19 @@ const ErrorsContext = preact.createContext({
   errors: {}
 });
 
-/**
- * @typedef {Function} <propertiesPanel.showEntry> callback
- *
- * @example
- *
- * useEvent('propertiesPanel.showEntry', ({ focus = false, ...rest }) => {
- *   // ...
- * });
- *
- * @param {Object} context
- * @param {boolean} [context.focus]
- *
- * @returns void
+/**
+ * @typedef {Function} <propertiesPanel.showEntry> callback
+ *
+ * @example
+ *
+ * useEvent('propertiesPanel.showEntry', ({ focus = false, ...rest }) => {
+ *   // ...
+ * });
+ *
+ * @param {Object} context
+ * @param {boolean} [context.focus]
+ *
+ * @returns void
  */
 const EventContext = preact.createContext({
   eventBus: null
@@ -3455,20 +3917,20 @@ const LayoutContext = preact.createContext({
   setLayoutForKey: () => {}
 });
 
-/**
- * Accesses the global DescriptionContext and returns a description for a given id and element.
- *
- * @example
- * ```jsx
- * function TextField(props) {
- *   const description = useDescriptionContext('input1', element);
- * }
- * ```
- *
- * @param {string} id
- * @param {object} element
- *
- * @returns {string}
+/**
+ * Accesses the global DescriptionContext and returns a description for a given id and element.
+ *
+ * @example
+ * ```jsx
+ * function TextField(props) {
+ *   const description = useDescriptionContext('input1', element);
+ * }
+ * ```
+ *
+ * @param {string} id
+ * @param {object} element
+ *
+ * @returns {string}
  */
 function useDescriptionContext(id, element) {
   const {
@@ -3483,11 +3945,11 @@ function useError(id) {
   return errors[id];
 }
 
-/**
- * Subscribe to an event immediately. Update subscription after inputs changed.
- *
- * @param {string} event
- * @param {Function} callback
+/**
+ * Subscribe to an event immediately. Update subscription after inputs changed.
+ *
+ * @param {string} event
+ * @param {Function} callback
  */
 function useEvent(event, callback, eventBus) {
   const eventContext = hooks$1.useContext(EventContext);
@@ -3517,20 +3979,20 @@ function useEvent(event, callback, eventBus) {
   }, [callback, event, eventBus]);
 }
 
-/**
- * Creates a state that persists in the global LayoutContext.
- *
- * @example
- * ```jsx
- * function Group(props) {
- *   const [ open, setOpen ] = useLayoutState([ 'groups', 'foo', 'open' ], false);
- * }
- * ```
- *
- * @param {(string|number)[]} path
- * @param {any} [defaultValue]
- *
- * @returns {[ any, Function ]}
+/**
+ * Creates a state that persists in the global LayoutContext.
+ *
+ * @example
+ * ```jsx
+ * function Group(props) {
+ *   const [ open, setOpen ] = useLayoutState([ 'groups', 'foo', 'open' ], false);
+ * }
+ * ```
+ *
+ * @param {(string|number)[]} path
+ * @param {any} [defaultValue]
+ *
+ * @returns {[ any, Function ]}
  */
 function useLayoutState(path, defaultValue) {
   const {
@@ -3538,22 +4000,17 @@ function useLayoutState(path, defaultValue) {
     setLayoutForKey
   } = hooks$1.useContext(LayoutContext);
   const layoutForKey = getLayoutForKey(path, defaultValue);
-  const [value, set] = hooks$1.useState(layoutForKey);
-  const setState = newValue => {
-    // (1) set component state
-    set(newValue);
-
-    // (2) set context
+  const setState = hooks$1.useCallback(newValue => {
     setLayoutForKey(path, newValue);
-  };
-  return [value, setState];
+  }, [setLayoutForKey]);
+  return [layoutForKey, setState];
 }
 
-/**
- * @pinussilvestrus: we need to introduce our own hook to persist the previous
- * state on updates.
- *
- * cf. https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state
+/**
+ * @pinussilvestrus: we need to introduce our own hook to persist the previous
+ * state on updates.
+ *
+ * cf. https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state
  */
 
 function usePrevious(value) {
@@ -3564,12 +4021,12 @@ function usePrevious(value) {
   return ref.current;
 }
 
-/**
- * Subscribe to `propertiesPanel.showEntry`.
- *
- * @param {string} id
- *
- * @returns {import('preact').Ref}
+/**
+ * Subscribe to `propertiesPanel.showEntry`.
+ *
+ * @param {string} id
+ *
+ * @returns {import('preact').Ref}
  */
 function useShowEntryEvent(id) {
   const {
@@ -3600,20 +4057,20 @@ function useShowEntryEvent(id) {
   return ref;
 }
 
-/**
- * @callback setSticky
- * @param {boolean} value
+/**
+ * @callback setSticky
+ * @param {boolean} value
  */
 
-/**
- * Use IntersectionObserver to identify when DOM element is in sticky mode.
- * If sticky is observered setSticky(true) will be called.
- * If sticky mode is left, setSticky(false) will be called.
- *
- *
- * @param {Object} ref
- * @param {string} scrollContainerSelector
- * @param {setSticky} setSticky
+/**
+ * Use IntersectionObserver to identify when DOM element is in sticky mode.
+ * If sticky is observered setSticky(true) will be called.
+ * If sticky mode is left, setSticky(false) will be called.
+ *
+ *
+ * @param {Object} ref
+ * @param {string} scrollContainerSelector
+ * @param {setSticky} setSticky
  */
 function useStickyIntersectionObserver(ref, scrollContainerSelector, setSticky) {
   hooks$1.useEffect(() => {
@@ -3652,19 +4109,19 @@ function useStickyIntersectionObserver(ref, scrollContainerSelector, setSticky)
   }, [ref, scrollContainerSelector, setSticky]);
 }
 
-/**
- * Creates a static function reference with changing body.
- * This is necessary when external libraries require a callback function
- * that has references to state variables.
- *
- * Usage:
- * const callback = useStaticCallback((val) => {val === currentState});
- *
- * The `callback` reference is static and can be safely used in external
- * libraries or as a prop that does not cause rerendering of children.
- *
- * @param {Function} callback function with changing reference
- * @returns {Function} static function reference
+/**
+ * Creates a static function reference with changing body.
+ * This is necessary when external libraries require a callback function
+ * that has references to state variables.
+ *
+ * Usage:
+ * const callback = useStaticCallback((val) => {val === currentState});
+ *
+ * The `callback` reference is static and can be safely used in external
+ * libraries or as a prop that does not cause rerendering of children.
+ *
+ * @param {Function} callback function with changing reference
+ * @returns {Function} static function reference
  */
 function useStaticCallback(callback) {
   const callbackRef = hooks$1.useRef(callback);
@@ -3756,13 +4213,13 @@ function DataMarker() {
   });
 }
 
-/**
- * @typedef { {
- *  text: (element: object) => string,
- *  icon?: (element: Object) => import('preact').Component
- * } } PlaceholderDefinition
- *
- * @param { PlaceholderDefinition } props
+/**
+ * @typedef { {
+ *  text: (element: object) => string,
+ *  icon?: (element: Object) => import('preact').Component
+ * } } PlaceholderDefinition
+ *
+ * @param { PlaceholderDefinition } props
  */
 function Placeholder(props) {
   const {
@@ -3787,72 +4244,72 @@ const DEFAULT_LAYOUT = {
 };
 const DEFAULT_DESCRIPTION = {};
 
-/**
- * @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
- *
- * @callback { {
- * @param {string} id
- * @param {Object} element
- * @returns {string}
- * } } GetDescriptionFunction
- *
- * @typedef { {
- *  getEmpty: (element: object) => import('./components/Placeholder').PlaceholderDefinition,
- *  getMultiple: (element: Object) => import('./components/Placeholder').PlaceholderDefinition
- * } } PlaceholderProvider
- *
+/**
+ * @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
+ *
+ * @callback { {
+ * @param {string} id
+ * @param {Object} element
+ * @returns {string}
+ * } } GetDescriptionFunction
+ *
+ * @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 {Object} [props.eventBus]
+/**
+ * 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 {Object} [props.eventBus]
  */
 function PropertiesPanel(props) {
   const {
@@ -3860,15 +4317,21 @@ function PropertiesPanel(props) {
     headerProvider,
     placeholderProvider,
     groups,
-    layoutConfig = {},
+    layoutConfig,
     layoutChanged,
-    descriptionConfig = {},
+    descriptionConfig,
     descriptionLoaded,
     eventBus
   } = props;
 
   // set-up layout context
   const [layout, setLayout] = hooks$1.useState(createLayout(layoutConfig));
+
+  // react to external changes in the layout config
+  useUpdateEffect(() => {
+    const newLayout = createLayout(layoutConfig);
+    setLayout(newLayout);
+  }, [layoutConfig]);
   hooks$1.useEffect(() => {
     if (typeof layoutChanged === 'function') {
       layoutChanged(layout);
@@ -3890,10 +4353,12 @@ function PropertiesPanel(props) {
   };
 
   // set-up description context
-  const description = createDescriptionContext(descriptionConfig);
-  if (typeof descriptionLoaded === 'function') {
-    descriptionLoaded(description);
-  }
+  const description = hooks$1.useMemo(() => createDescriptionContext(descriptionConfig), [descriptionConfig]);
+  hooks$1.useEffect(() => {
+    if (typeof descriptionLoaded === 'function') {
+      descriptionLoaded(description);
+    }
+  }, [description, descriptionLoaded]);
   const getDescriptionForId = (id, element) => {
     return description[id] && description[id](element);
   };
@@ -3968,18 +4433,37 @@ function PropertiesPanel(props) {
 
 // helpers //////////////////
 
-function createLayout(overrides) {
+function createLayout(overrides = {}, defaults = DEFAULT_LAYOUT) {
   return {
-    ...DEFAULT_LAYOUT,
+    ...defaults,
     ...overrides
   };
 }
-function createDescriptionContext(overrides) {
+function createDescriptionContext(overrides = {}) {
   return {
     ...DEFAULT_DESCRIPTION,
     ...overrides
   };
 }
+
+// hooks //////////////////
+
+/**
+ * This hook behaves like useEffect, but does not trigger on the first render.
+ *
+ * @param {Function} effect
+ * @param {Array} deps
+ */
+function useUpdateEffect(effect, deps) {
+  const isMounted = hooks$1.useRef(false);
+  hooks$1.useEffect(() => {
+    if (isMounted.current) {
+      return effect();
+    } else {
+      isMounted.current = true;
+    }
+  }, deps);
+}
 function CollapsibleEntry(props) {
   const {
     element,
@@ -4075,10 +4559,10 @@ function ListItem(props) {
     })
   });
 }
-const noop$2 = () => {};
+const noop$3 = () => {};
 
-/**
- * @param {import('../PropertiesPanel').ListGroupDefinition} props
+/**
+ * @param {import('../PropertiesPanel').ListGroupDefinition} props
  */
 function ListGroup(props) {
   const {
@@ -4096,6 +4580,9 @@ function ListGroup(props) {
   const onShow = hooks$1.useCallback(() => setOpen(true), [setOpen]);
   const [ordering, setOrdering] = hooks$1.useState([]);
   const [newItemAdded, setNewItemAdded] = hooks$1.useState(false);
+
+  // Flag to mark that add button was clicked in the last render cycle
+  const [addTriggered, setAddTriggered] = hooks$1.useState(false);
   const prevItems = usePrevious(items);
   const prevElement = usePrevious(element);
   const elementChanged = element !== prevElement;
@@ -4117,6 +4604,8 @@ function ListGroup(props) {
 
   // (1) items were added
   hooks$1.useEffect(() => {
+    // reset addTriggered flag
+    setAddTriggered(false);
     if (shouldHandleEffects && prevItems && items.length > prevItems.length) {
       let add = [];
       items.forEach(item => {
@@ -4126,14 +4615,18 @@ function ListGroup(props) {
       });
       let newOrdering = ordering;
 
-      // open if not open and configured
-      if (!open && shouldOpen) {
+      // 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();
+      }
 
-        // if I opened and I should sort, then sort items
-        if (shouldSort) {
-          newOrdering = createOrdering(sortItems(items));
-        }
+      // filter when not open and configured
+      if (!open && shouldSort) {
+        newOrdering = createOrdering(sortItems(items));
       }
 
       // add new items on top or bottom depending on sorting behavior
@@ -4144,11 +4637,11 @@ function ListGroup(props) {
         newOrdering.push(...add);
       }
       setOrdering(newOrdering);
-      setNewItemAdded(true);
+      setNewItemAdded(addTriggered);
     } else {
       setNewItemAdded(false);
     }
-  }, [items, open, shouldHandleEffects]);
+  }, [items, open, shouldHandleEffects, addTriggered]);
 
   // (2) sort items on open if shouldSort is set
   hooks$1.useEffect(() => {
@@ -4178,13 +4671,17 @@ function ListGroup(props) {
     ...hooks$1.useContext(LayoutContext),
     onShow
   };
+  const handleAddClick = e => {
+    setAddTriggered(true);
+    add(e);
+  };
   return jsxRuntime.jsxs("div", {
     class: "bio-properties-panel-group",
     "data-group-id": 'group-' + id,
     ref: groupRef,
     children: [jsxRuntime.jsxs("div", {
       class: classnames('bio-properties-panel-group-header', hasItems ? '' : 'empty', hasItems && open ? 'open' : '', sticky && open ? 'sticky' : ''),
-      onClick: hasItems ? toggleOpen : noop$2,
+      onClick: hasItems ? toggleOpen : noop$3,
       children: [jsxRuntime.jsx("div", {
         title: label,
         class: "bio-properties-panel-group-header-title",
@@ -4194,7 +4691,7 @@ function ListGroup(props) {
         children: [add ? jsxRuntime.jsxs("button", {
           title: "Create new list item",
           class: "bio-properties-panel-group-header-button bio-properties-panel-add-entry",
-          onClick: add,
+          onClick: handleAddClick,
           children: [jsxRuntime.jsx(CreateIcon, {}), !hasItems ? jsxRuntime.jsx("span", {
             class: "bio-properties-panel-add-entry-label",
             children: "Create"
@@ -4224,8 +4721,9 @@ function ListGroup(props) {
             id
           } = item;
 
-          // if item was added, open first or last item based on ordering
-          const autoOpen = newItemAdded && (shouldSort ? index === 0 : index === ordering.length - 1);
+          // if item was added, open it
+          // Existing items will not be affected as autoOpen is only applied on first render
+          const autoOpen = newItemAdded;
           return preact.createElement(ListItem, {
             ...item,
             autoOpen: autoOpen,
@@ -4241,8 +4739,8 @@ function ListGroup(props) {
 
 // helpers ////////////////////
 
-/**
- * Sorts given items alphanumeric by label
+/**
+ * Sorts given items alphanumeric by label
  */
 function sortItems(items) {
   return minDash.sortBy(items, i => i.label.toLowerCase());
@@ -4316,17 +4814,17 @@ function Checkbox(props) {
   });
 }
 
-/**
- * @param {Object} props
- * @param {Object} props.element
- * @param {String} props.id
- * @param {String} props.description
- * @param {String} props.label
- * @param {Function} props.getValue
- * @param {Function} props.setValue
- * @param {Function} props.onFocus
- * @param {Function} props.onBlur
- * @param {boolean} [props.disabled]
+/**
+ * @param {Object} props
+ * @param {Object} props.element
+ * @param {String} props.id
+ * @param {String} props.description
+ * @param {String} props.label
+ * @param {Function} props.getValue
+ * @param {Function} props.setValue
+ * @param {Function} props.onFocus
+ * @param {Function} props.onBlur
+ * @param {boolean} [props.disabled]
  */
 function CheckboxEntry(props) {
   const {
@@ -4363,7 +4861,7 @@ function CheckboxEntry(props) {
     })]
   });
 }
-function isEdited$7(node) {
+function isEdited$8(node) {
   return node && !!node.checked;
 }
 
@@ -4372,6 +4870,87 @@ function isEdited$7(node) {
 function prefixId$7(id) {
   return `bio-properties-panel-${id}`;
 }
+const useBufferedFocus$1 = function (editor, ref) {
+  const [buffer, setBuffer] = hooks$1.useState(undefined);
+  ref.current = hooks$1.useMemo(() => ({
+    focus: offset => {
+      if (editor) {
+        editor.focus(offset);
+      } else {
+        if (typeof offset === 'undefined') {
+          offset = Infinity;
+        }
+        setBuffer(offset);
+      }
+    }
+  }), [editor]);
+  hooks$1.useEffect(() => {
+    if (typeof buffer !== 'undefined' && editor) {
+      editor.focus(buffer);
+      setBuffer(false);
+    }
+  }, [editor, buffer]);
+};
+const CodeEditor$1 = React.forwardRef((props, ref) => {
+  const {
+    onInput,
+    disabled,
+    tooltipContainer,
+    enableGutters,
+    value,
+    onLint = () => {},
+    contentAttributes = {},
+    hostLanguage = null,
+    singleLine = false
+  } = props;
+  const inputRef = hooks$1.useRef();
+  const [editor, setEditor] = hooks$1.useState();
+  const [localValue, setLocalValue] = hooks$1.useState(value || '');
+  useBufferedFocus$1(editor, ref);
+  const handleInput = useStaticCallback(newValue => {
+    onInput(newValue);
+    setLocalValue(newValue);
+  });
+  hooks$1.useEffect(() => {
+    let editor;
+    editor = new feelers.FeelersEditor({
+      container: inputRef.current,
+      onChange: handleInput,
+      value: localValue,
+      onLint,
+      contentAttributes,
+      tooltipContainer,
+      enableGutters,
+      hostLanguage,
+      singleLine
+    });
+    setEditor(editor);
+    return () => {
+      onLint([]);
+      inputRef.current.innerHTML = '';
+      setEditor(null);
+    };
+  }, []);
+  hooks$1.useEffect(() => {
+    if (!editor) {
+      return;
+    }
+    if (value === localValue) {
+      return;
+    }
+    editor.setValue(value);
+    setLocalValue(value);
+  }, [value]);
+  const handleClick = () => {
+    ref.current.focus();
+  };
+  return jsxRuntime.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] = hooks$1.useState(undefined);
   ref.current = hooks$1.useMemo(() => ({
@@ -4414,10 +4993,10 @@ const CodeEditor = React.forwardRef((props, ref) => {
   hooks$1.useEffect(() => {
     let editor;
 
-    /* Trigger FEEL toggle when
-     *
-     * - `backspace` is pressed
-     * - AND the cursor is at the beginning of the input
+    /* 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) {
@@ -4486,12 +5065,12 @@ function FeelIndicator(props) {
     children: "="
   });
 }
-const noop$1 = () => {};
+const noop$2 = () => {};
 
-/**
- * @param {Object} props
- * @param {Object} props.label
- * @param {String} props.feel
+/**
+ * @param {Object} props
+ * @param {Object} props.label
+ * @param {String} props.feel
  */
 function FeelIcon(props) {
   const {
@@ -4499,7 +5078,7 @@ function FeelIcon(props) {
     feel = false,
     active,
     disabled = false,
-    onClick = noop$1
+    onClick = noop$2
   } = props;
   const feelRequiredLabel = ' must be a FEEL expression';
   const feelOptionalLabel = ' can optionally be a FEEL expression';
@@ -4519,7 +5098,7 @@ function FeelIcon(props) {
     children: feel === 'required' ? jsxRuntime.jsx(FeelRequiredIcon, {}) : jsxRuntime.jsx(FeelOptionalIcon, {})
   });
 }
-const noop = () => {};
+const noop$1 = () => {};
 function FeelTextfield(props) {
   const {
     debounce,
@@ -4676,6 +5255,9 @@ function FeelTextfield(props) {
       }) : jsxRuntime.jsx(OptionalComponent, {
         ...props,
         onInput: handleLocalInput,
+        contentAttributes: {
+          'id': prefixId$6(id)
+        },
         value: localValue,
         ref: editorRef
       })]
@@ -4725,7 +5307,7 @@ const OptionalFeelInput = React.forwardRef((props, ref) => {
     value: value || ''
   });
 });
-const OptionalFeelTextArea = React.forwardRef((props, ref) => {
+React.forwardRef((props, ref) => {
   const {
     id,
     disabled,
@@ -4765,17 +5347,24 @@ const OptionalFeelTextArea = React.forwardRef((props, ref) => {
   });
 });
 
-/**
- * @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.label
- * @param {Function} props.getValue
- * @param {Function} props.setValue
- * @param {Function} props.validate
+/**
+ * @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 FeelEntry(props) {
   const {
@@ -4789,8 +5378,10 @@ function FeelEntry(props) {
     getValue,
     setValue,
     tooltipContainer,
+    hostLanguage,
+    singleLine,
     validate,
-    show = noop,
+    show = noop$1,
     example,
     variables,
     onFocus,
@@ -4844,6 +5435,8 @@ function FeelEntry(props) {
       onFocus: onFocus,
       onBlur: onBlur,
       example: example,
+      hostLanguage: hostLanguage,
+      singleLine: singleLine,
       show: show,
       value: value,
       variables: variables,
@@ -4860,28 +5453,35 @@ function FeelEntry(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 {String} props.label
- * @param {Function} props.getValue
- * @param {Function} props.setValue
- * @param {Function} props.onFocus
- * @param {Function} props.onBlur
- * @param {Function} props.validate
+/**
+ * @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 FeelTextArea(props) {
+function FeelTemplatingEntry(props) {
   return jsxRuntime.jsx(FeelEntry, {
-    class: "bio-properties-panel-feel-textarea",
-    OptionalComponent: OptionalFeelTextArea,
+    class: "bio-properties-panel-feel-templating",
+    OptionalComponent: CodeEditor$1,
     ...props
   });
 }
-function isEdited$6(node) {
+function isEdited$7(node) {
   return node && (!!node.value || node.classList.contains('edited'));
 }
 
@@ -4951,22 +5551,22 @@ function NumberField(props) {
   });
 }
 
-/**
- * @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
+/**
+ * @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 {
@@ -5091,6 +5691,16 @@ function Select(props) {
       value: localValue,
       disabled: disabled,
       children: options.map((option, idx) => {
+        if (option.children) {
+          return jsxRuntime.jsx("optgroup", {
+            label: option.label,
+            children: option.children.map((child, idx) => jsxRuntime.jsx("option", {
+              value: child.value,
+              disabled: child.disabled,
+              children: child.label
+            }, idx))
+          }, idx);
+        }
         return jsxRuntime.jsx("option", {
           value: option.value,
           disabled: option.disabled,
@@ -5101,18 +5711,19 @@ function Select(props) {
   });
 }
 
-/**
- * @param {object} props
- * @param {object} props.element
- * @param {string} props.id
- * @param {string} [props.description]
- * @param {string} props.label
- * @param {Function} props.getValue
- * @param {Function} props.setValue
- * @param {Function} props.onFocus
- * @param {Function} props.onBlur
- * @param {Function} props.getOptions
- * @param {boolean} [props.disabled]
+/**
+ * @param {object} props
+ * @param {object} props.element
+ * @param {string} props.id
+ * @param {string} [props.description]
+ * @param {string} props.label
+ * @param {Function} props.getValue
+ * @param {Function} props.setValue
+ * @param {Function} props.onFocus
+ * @param {Function} props.onBlur
+ * @param {Function} props.getOptions
+ * @param {boolean} [props.disabled]
+ * @param {Function} [props.validate]
  */
 function SelectEntry(props) {
   const {
@@ -5125,11 +5736,37 @@ function SelectEntry(props) {
     getOptions,
     disabled,
     onFocus,
-    onBlur
+    onBlur,
+    validate
   } = props;
-  const value = getValue(element);
   const options = getOptions(element);
-  const error = useError(id);
+  const [cachedInvalidValue, setCachedInvalidValue] = hooks$1.useState(null);
+  const globalError = useError(id);
+  const [localError, setLocalError] = hooks$1.useState(null);
+  let value = getValue(element);
+  const previousValue = usePrevious(value);
+  hooks$1.useEffect(() => {
+    if (minDash.isFunction(validate)) {
+      const newValidationError = validate(value) || null;
+      setLocalError(newValidationError);
+    }
+  }, [value]);
+  const onChange = newValue => {
+    let newValidationError = null;
+    if (minDash.isFunction(validate)) {
+      newValidationError = validate(newValue) || null;
+    }
+    if (newValidationError) {
+      setCachedInvalidValue(newValue);
+    } else {
+      setValue(newValue);
+    }
+    setLocalError(newValidationError);
+  };
+  if (previousValue === value && localError) {
+    value = cachedInvalidValue;
+  }
+  const error = globalError || localError;
   return jsxRuntime.jsxs("div", {
     class: classnames('bio-properties-panel-entry', error ? 'has-error' : ''),
     "data-entry-id": id,
@@ -5137,7 +5774,7 @@ function SelectEntry(props) {
       id: id,
       label: label,
       value: value,
-      onChange: setValue,
+      onChange: onChange,
       onFocus: onFocus,
       onBlur: onBlur,
       options: options,
@@ -5161,18 +5798,26 @@ function isEdited$4(node) {
 function prefixId$4(id) {
   return `bio-properties-panel-${id}`;
 }
+function resizeToContents(element) {
+  element.style.height = 'auto';
+
+  // a 2px pixel offset is required to prevent scrollbar from
+  // appearing on OS with a full length scroll bar (Windows/Linux)
+  element.style.height = `${element.scrollHeight + 2}px`;
+}
 function TextArea(props) {
   const {
     id,
     label,
-    rows = 2,
     debounce,
     onInput,
     value = '',
     disabled,
     monospace,
     onFocus,
-    onBlur
+    onBlur,
+    autoResize,
+    rows = autoResize ? 1 : 2
   } = props;
   const [localValue, setLocalValue] = hooks$1.useState(value);
   const ref = useShowEntryEvent(id);
@@ -5183,8 +5828,12 @@ function TextArea(props) {
   }, [onInput, debounce]);
   const handleInput = e => {
     handleInputCallback(e);
+    autoResize && resizeToContents(e.target);
     setLocalValue(e.target.value);
   };
+  hooks$1.useLayoutEffect(() => {
+    autoResize && resizeToContents(ref.current);
+  }, []);
   hooks$1.useEffect(() => {
     if (value === localValue) {
       return;
@@ -5202,7 +5851,7 @@ function TextArea(props) {
       id: prefixId$2(id),
       name: id,
       spellCheck: "false",
-      class: classnames('bio-properties-panel-input', monospace ? 'bio-properties-panel-input-monospace' : ''),
+      class: classnames('bio-properties-panel-input', monospace ? 'bio-properties-panel-input-monospace' : '', autoResize ? 'auto-resize' : ''),
       onInput: handleInput,
       onFocus: onFocus,
       onBlur: onBlur,
@@ -5214,20 +5863,20 @@ function TextArea(props) {
   });
 }
 
-/**
- * @param {object} props
- * @param {object} props.element
- * @param {string} props.id
- * @param {string} props.description
- * @param {boolean} props.debounce
- * @param {string} props.label
- * @param {Function} props.getValue
- * @param {Function} props.setValue
- * @param {Function} props.onFocus
- * @param {Function} props.onBlur
- * @param {number} props.rows
- * @param {boolean} props.monospace
- * @param {boolean} [props.disabled]
+/**
+ * @param {object} props
+ * @param {object} props.element
+ * @param {string} props.id
+ * @param {string} props.description
+ * @param {boolean} props.debounce
+ * @param {string} props.label
+ * @param {Function} props.getValue
+ * @param {Function} props.setValue
+ * @param {Function} props.onFocus
+ * @param {Function} props.onBlur
+ * @param {number} props.rows
+ * @param {boolean} props.monospace
+ * @param {boolean} [props.disabled]
  */
 function TextAreaEntry(props) {
   const {
@@ -5242,7 +5891,8 @@ function TextAreaEntry(props) {
     monospace,
     disabled,
     onFocus,
-    onBlur
+    onBlur,
+    autoResize
   } = props;
   const value = getValue(element);
   const error = useError(id);
@@ -5259,7 +5909,8 @@ function TextAreaEntry(props) {
       rows: rows,
       debounce: debounce,
       monospace: monospace,
-      disabled: disabled
+      disabled: disabled,
+      autoResize: autoResize
     }, element), error && jsxRuntime.jsx("div", {
       class: "bio-properties-panel-error",
       children: error
@@ -5330,19 +5981,19 @@ function Textfield(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 {String} props.label
- * @param {Function} props.getValue
- * @param {Function} props.setValue
- * @param {Function} props.onFocus
- * @param {Function} props.onBlur
- * @param {Function} props.validate
+/**
+ * @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.label
+ * @param {Function} props.getValue
+ * @param {Function} props.setValue
+ * @param {Function} props.onFocus
+ * @param {Function} props.onBlur
+ * @param {Function} props.validate
  */
 function TextfieldEntry(props) {
   const {
@@ -5609,7 +6260,7 @@ function AltTextEntry(props) {
       component: AltText,
       editField: editField,
       field: field,
-      isEdited: isEdited$6
+      isEdited: isEdited$7
     });
   }
   return entries;
@@ -5643,59 +6294,70 @@ function AltText(props) {
   });
 }
 
+const AUTO_OPTION_VALUE = '';
 function ColumnsEntry(props) {
   const {
     editField,
     field
   } = props;
-  const {
-    type
-  } = field;
-  const entries = [];
-  if (type === 'columns') {
-    entries.push({
-      id: 'columns',
-      component: Columns,
-      editField: editField,
-      field: field,
-      isEdited: isEdited$5
-    });
-  }
+  const entries = [{
+    id: 'columns',
+    component: Columns,
+    field,
+    editField,
+    isEdited: isEdited$4
+  }];
   return entries;
 }
 function Columns(props) {
   const {
-    editField,
     field,
+    editField,
     id
   } = props;
   const debounce = useService('debounce');
-  const getValue = () => {
-    return field.components.length;
+  const formLayoutValidator = useService('formLayoutValidator');
+  const validate = value => {
+    return formLayoutValidator.validateField(field, value ? parseInt(value) : null);
   };
   const setValue = value => {
-    let components = field.components.slice();
-    if (value > components.length) {
-      while (value > components.length) {
-        components.push(formJsViewer.Default.create({
-          _parent: field.id
-        }));
-      }
-    } else {
-      components = components.slice(0, value);
-    }
-    editField(field, 'components', components);
+    const layout = minDash.get(field, ['layout'], {});
+    const newValue = value ? parseInt(value) : null;
+    editField(field, ['layout'], minDash.set(layout, ['columns'], newValue));
   };
-  return NumberFieldEntry({
+  const getValue = () => {
+    return minDash.get(field, ['layout', 'columns']);
+  };
+  const getOptions = () => {
+    return [{
+      label: 'Auto',
+      value: AUTO_OPTION_VALUE
+    },
+    // todo(pinussilvestrus): make options dependant on field type
+    // cf. https://github.com/bpmn-io/form-js/issues/575
+    ...[2, 4, 6, 8, 10, 12, 14, 16].map(asOption)];
+  };
+  return SelectEntry({
     debounce,
     element: field,
-    getValue,
     id,
     label: 'Columns',
-    setValue
+    getOptions,
+    getValue,
+    setValue,
+    validate
   });
 }
 
+// helper /////////
+
+function asOption(number) {
+  return {
+    value: number,
+    label: number.toString()
+  };
+}
+
 function DescriptionEntry(props) {
   const {
     editField,
@@ -5990,7 +6652,7 @@ function DisabledEntry(props) {
       component: Disabled,
       editField: editField,
       field: field,
-      isEdited: isEdited$7
+      isEdited: isEdited$8
     });
   }
   return entries;
@@ -6200,6 +6862,7 @@ function simpleBoolEntryFactory(options) {
   const {
     id,
     label,
+    description,
     path,
     props
   } = options;
@@ -6213,8 +6876,9 @@ function simpleBoolEntryFactory(options) {
     path,
     field,
     editField,
+    description,
     component: SimpleBoolComponent,
-    isEdited: isEdited$7
+    isEdited: isEdited$8
   };
 }
 const SimpleBoolComponent = props => {
@@ -6223,7 +6887,8 @@ const SimpleBoolComponent = props => {
     label,
     path,
     field,
-    editField
+    editField,
+    description
   } = props;
   const getValue = () => minDash.get(field, path, '');
   const setValue = value => editField(field, path, value);
@@ -6232,7 +6897,8 @@ const SimpleBoolComponent = props => {
     getValue,
     id,
     label,
-    setValue
+    setValue,
+    description
   });
 };
 
@@ -6288,7 +6954,7 @@ function SourceEntry(props) {
       component: Source,
       editField: editField,
       field: field,
-      isEdited: isEdited$6
+      isEdited: isEdited$7
     });
   }
   return entries;
@@ -6326,21 +6992,38 @@ function Source(props) {
 function TextEntry(props) {
   const {
     editField,
+    /* getService, */
     field
   } = props;
   const {
     type
   } = field;
+
+  // const templating = getService('templating');
+
   if (type !== 'text') {
     return [];
   }
-  return [{
+  const entries = [{
     id: 'text',
     component: Text,
     editField: editField,
     field: field,
-    isEdited: isEdited$6
+    isEdited: isEdited$7
   }];
+
+  // todo: skipped to make the release without too much risk
+  // if (templating.isTemplate(field.text)) {
+  //   entries.push(simpleBoolEntryFactory({
+  //     id: 'strict',
+  //     path: [ 'strict' ],
+  //     label: 'Strict templating',
+  //     description: 'Enforces types to be correct',
+  //     props
+  //   }));
+  // }
+
+  return entries;
 }
 function Text(props) {
   const {
@@ -6359,15 +7042,21 @@ function Text(props) {
   const setValue = value => {
     return editField(field, path, value);
   };
-  return FeelTextArea({
+  const description = hooks$1.useMemo(() => jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: ["Supports markdown and templating. ", jsxRuntime.jsx("a", {
+      href: "https://docs.camunda.io/docs/components/modeler/forms/form-element-library/forms-element-library-text/",
+      target: "_blank",
+      children: "Learn more"
+    })]
+  }), []);
+  return FeelTemplatingEntry({
     debounce,
-    description: 'Use an Expression, Markdown or basic HTML to format.',
+    description,
     element: field,
-    feel: 'optional',
     getValue,
     id,
     label: 'Text',
-    rows: 10,
+    hostLanguage: 'markdown',
     setValue,
     variables
   });
@@ -6483,7 +7172,7 @@ function NumberSerializationEntry(props) {
   entries.push({
     id: 'serialize-to-string',
     component: SerializeToString,
-    isEdited: isEdited$7,
+    isEdited: isEdited$8,
     editField,
     field
   });
@@ -6542,7 +7231,7 @@ function DateTimeEntry(props) {
     entries.push({
       id: 'use24h',
       component: Use24h,
-      isEdited: isEdited$7,
+      isEdited: isEdited$8,
       editField,
       field
     });
@@ -6655,7 +7344,7 @@ function DateTimeConstraintsEntry(props) {
     entries.push({
       id: id + '-disallowPassedDates',
       component: DisallowPassedDates,
-      isEdited: isEdited$7,
+      isEdited: isEdited$8,
       editField,
       field
     });
@@ -7030,11 +7719,19 @@ function InputKeyValuesSourceEntry(props) {
     field,
     id
   } = props;
+  const schema = '[\n  {\n    "label": "dollar",\n    "value": "$"\n  }\n]';
+  const description = jsxRuntime.jsxs("div", {
+    children: ["Define which input property to populate the values from.", jsxRuntime.jsx("br", {}), jsxRuntime.jsx("br", {}), "The input property may be an array of simple values or alternatively follow this schema:", jsxRuntime.jsx("pre", {
+      children: jsxRuntime.jsx("code", {
+        children: schema
+      })
+    })]
+  });
   return [{
     id: id + '-key',
     component: InputValuesKey,
     label: 'Input values key',
-    description: 'Define which input property to populate the values from',
+    description,
     isEdited: isEdited$1,
     editField,
     field
@@ -7229,7 +7926,7 @@ function ConditionEntry(props) {
     component: Condition,
     editField: editField,
     field: field,
-    isEdited: isEdited$6
+    isEdited: isEdited$7
   }];
 }
 function Condition(props) {
@@ -7267,7 +7964,7 @@ function Condition(props) {
   });
 }
 
-function GeneralGroup(field, editField) {
+function GeneralGroup(field, editField, getService) {
   const entries = [...IdEntry({
     field,
     editField
@@ -7286,15 +7983,13 @@ function GeneralGroup(field, editField) {
   }), ...ActionEntry({
     field,
     editField
-  }), ...ColumnsEntry({
-    field,
-    editField
   }), ...DateTimeEntry({
     field,
     editField
   }), ...TextEntry({
     field,
-    editField
+    editField,
+    getService
   }), ...NumberEntries({
     field,
     editField
@@ -7390,7 +8085,7 @@ function ValidationGroup(field, editField) {
     component: Required,
     getValue,
     field,
-    isEdited: isEdited$7,
+    isEdited: isEdited$8,
     onChange
   }];
   if (type === 'textfield') {
@@ -7732,6 +8427,27 @@ function AppearanceGroup(field, editField) {
   };
 }
 
+function LayoutGroup(field, editField) {
+  const {
+    type
+  } = field;
+  if (type === 'default') {
+    return null;
+  }
+  const entries = [...ColumnsEntry({
+    field,
+    editField
+  })];
+  if (entries.length === 0) {
+    return null;
+  }
+  return {
+    id: 'layout',
+    label: 'Layout',
+    entries
+  };
+}
+
 function ConditionGroup(field, editField) {
   const {
     type
@@ -7750,11 +8466,11 @@ function ConditionGroup(field, editField) {
   };
 }
 
-function getGroups(field, editField) {
+function getGroups(field, editField, getService) {
   if (!field) {
     return [];
   }
-  const groups = [GeneralGroup(field, editField), ConditionGroup(field, editField), AppearanceGroup(field, editField), SerializationGroup(field, editField), ...ValuesGroups(field, editField), ConstraintsGroup(field, editField), ValidationGroup(field, editField), CustomValuesGroup(field, editField)];
+  const groups = [GeneralGroup(field, editField, getService), ConditionGroup(field, editField), LayoutGroup(field, editField), AppearanceGroup(field, editField), SerializationGroup(field, editField), ...ValuesGroups(field, editField), ConstraintsGroup(field, editField), ValidationGroup(field, editField), CustomValuesGroup(field, editField)];
 
   // contract: if a group returns null, it should not be displayed at all
   return groups.filter(group => group !== null);
@@ -7807,10 +8523,9 @@ function FormPropertiesPanel(props) {
     };
   }, []);
   const selectedFormField = state.selectedFormField;
+  const getService = (type, strict = true) => injector.get(type, strict);
   const propertiesPanelContext = {
-    getService(type, strict = true) {
-      return injector.get(type, strict);
-    }
+    getService
   };
   const onFocus = () => eventBus.fire('propertiesPanel.focusin');
   const onBlur = () => eventBus.fire('propertiesPanel.focusout');
@@ -7825,7 +8540,7 @@ function FormPropertiesPanel(props) {
       children: jsxRuntime.jsx(PropertiesPanel, {
         element: selectedFormField,
         eventBus: eventBus,
-        groups: getGroups(selectedFormField, editField),
+        groups: getGroups(selectedFormField, editField, getService),
         headerProvider: PropertiesPanelHeaderProvider,
         placeholderProvider: PropertiesPanelPlaceholderProvider
       })
@@ -7903,6 +8618,12 @@ var PropertiesPanelModule = {
   propertiesPanel: ['type', PropertiesPanelRenderer]
 };
 
+var ExpressionLanguageModule = {
+  __init__: ['expressionLanguage', 'templating'],
+  expressionLanguage: ['type', formJsViewer.FeelExpressionLanguage],
+  templating: ['type', formJsViewer.FeelersTemplating]
+};
+
 const ids = new Ids([32, 36, 1]);
 
 /**
@@ -8155,7 +8876,7 @@ class FormEditor {
    * @internal
    */
   _getModules() {
-    return [ModelingModule, EditorActionsModule, KeyboardModule, SelectionModule, PaletteModule, PropertiesPanelModule];
+    return [ModelingModule, EditorActionsModule, DraggingModule, KeyboardModule, SelectionModule, PaletteModule, ExpressionLanguageModule, formJsViewer.MarkdownModule, PropertiesPanelModule];
   }
 
   /**