@bpmn-io/form-js-playground 0.10.1 → 0.11.1

package/dist/form-playground.umd.js

@@ -12839,7 +12839,7 @@
       if (arguments.length !== 1) {
         return null;
       }
-      return toString(from);
+      return toString$1(from);
     }, ['any']),
     // date(from) => date string
     // date(from) => date and time
@@ -13365,17 +13365,17 @@
   }
   function toKeyString(key) {
     if (typeof key === 'string' && /\W/.test(key)) {
-      return toString(key, true);
+      return toString$1(key, true);
     }
     return key;
   }
   function toDeepString(obj) {
-    return toString(obj, true);
+    return toString$1(obj, true);
   }
   function escapeStr(str) {
     return str.replace(/("|\\)/g, '\\$1');
   }
-  function toString(obj, wrap = false) {
+  function toString$1(obj, wrap = false) {
     var _a, _b, _c, _d;
     const type = getType(obj);
     if (type === 'nil') {
@@ -18241,9 +18241,9 @@
     return value;
   }
 
-  /**
-   * @typedef {object} Condition
-   * @property {string} [hide]
+  /**
+   * @typedef {object} Condition
+   * @property {string} [hide]
    */
 
   class ConditionChecker {
@@ -18252,11 +18252,11 @@
       this._eventBus = eventBus;
     }
 
-    /**
-     * For given data, remove properties based on condition.
-     *
-     * @param {Object<string, any>} properties
-     * @param {Object<string, any>} data
+    /**
+     * For given data, remove properties based on condition.
+     *
+     * @param {Object<string, any>} properties
+     * @param {Object<string, any>} data
      */
     applyConditions(properties, data = {}) {
       const conditions = this._getConditions();
@@ -18275,13 +18275,13 @@
       return newProperties;
     }
 
-    /**
-     * Check if given condition is met. Returns null for invalid/missing conditions.
-     *
-     * @param {string} condition
-     * @param {import('../types').Data} [data]
-     *
-     * @returns {boolean|null}
+    /**
+     * Check if given condition is met. Returns null for invalid/missing conditions.
+     *
+     * @param {string} condition
+     * @param {import('../types').Data} [data]
+     *
+     * @returns {boolean|null}
      */
     check(condition, data = {}) {
       if (!condition) {
@@ -18302,12 +18302,12 @@
       }
     }
 
-    /**
-     * Check if hide condition is met.
-     *
-     * @param {Condition} condition
-     * @param {Object<string, any>} data
-     * @returns {boolean}
+    /**
+     * Check if hide condition is met.
+     *
+     * @param {Condition} condition
+     * @param {Object<string, any>} data
+     * @returns {boolean}
      */
     _checkHideCondition(condition, data) {
       if (!condition.hide) {
@@ -18317,13 +18317,13 @@
       return result === true;
     }
 
-    /**
-     * Evaluate an expression.
-     *
-     * @param {string} expression
-     * @param {import('../types').Data} [data]
-     *
-     * @returns {any}
+    /**
+     * Evaluate an expression.
+     *
+     * @param {string} expression
+     * @param {import('../types').Data} [data]
+     *
+     * @returns {any}
      */
     evaluate(expression, data = {}) {
       if (!expression) {
@@ -18828,7 +18828,7 @@
       if (type === 'number') {
         const {
           decimalDigits,
-          step
+          increment
         } = field;
         if (value === 'NaN') {
           errors = [...errors, 'Value is not a number.'];
@@ -18836,13 +18836,13 @@
           if (decimalDigits >= 0 && countDecimals$1(value) > decimalDigits) {
             errors = [...errors, 'Value is expected to ' + (decimalDigits === 0 ? 'be an integer' : `have at most ${decimalDigits} decimal digit${decimalDigits > 1 ? 's' : ''}`) + '.'];
           }
-          if (step) {
+          if (increment) {
             const bigValue = Big$1(value);
-            const bigStep = Big$1(step);
-            const offset = bigValue.mod(bigStep);
+            const bigIncrement = Big$1(increment);
+            const offset = bigValue.mod(bigIncrement);
             if (offset.cmp(0) !== 0) {
               const previousValue = bigValue.minus(offset);
-              const nextValue = previousValue.plus(bigStep);
+              const nextValue = previousValue.plus(bigIncrement);
               errors = [...errors, `Please select a valid value, the two nearest valid values are ${previousValue} and ${nextValue}.`];
             }
           }
@@ -18857,10 +18857,10 @@
       if (validate.required && (isNil$1(value) || value === '')) {
         errors = [...errors, 'Field is required.'];
       }
-      if ('min' in validate && value && value < validate.min) {
+      if ('min' in validate && (value || value === 0) && value < validate.min) {
         errors = [...errors, `Field must have minimum value of ${validate.min}.`];
       }
-      if ('max' in validate && value && value > validate.max) {
+      if ('max' in validate && (value || value === 0) && value > validate.max) {
         errors = [...errors, `Field must have maximum value of ${validate.max}.`];
       }
       if ('minLength' in validate && value && value.trim().length < validate.minLength) {
@@ -18928,11 +18928,11 @@
   }
   FormFieldRegistry$1.$inject = ['eventBus'];
 
-  /**
-   * Retrieve variable names from given FEEL unary test.
-   *
-   * @param {string} unaryTest
-   * @returns {string[]}
+  /**
+   * Retrieve variable names from given FEEL unary test.
+   *
+   * @param {string} unaryTest
+   * @returns {string[]}
    */
   function getVariableNames(unaryTest) {
     const tree = parseUnaryTests(unaryTest);
@@ -18947,11 +18947,11 @@
     return Array.from(variables);
   }
 
-  /**
-   * Retrieve variable names from given FEEL expression.
-   *
-   * @param {string} expression
-   * @returns {string[]}
+  /**
+   * Retrieve variable names from given FEEL expression.
+   *
+   * @param {string} expression
+   * @returns {string[]}
    */
   function getExpressionVariableNames(expression) {
     const tree = parseExpressions(expression);
@@ -19036,10 +19036,10 @@
     return injector;
   }
 
-  /**
-   * @param {string?} prefix
-   *
-   * @returns Element
+  /**
+   * @param {string?} prefix
+   *
+   * @returns Element
    */
   function createFormContainer(prefix = 'fjs') {
     const container = document.createElement('div');
@@ -19069,22 +19069,22 @@
     return `${type}${generateIndexForType(type)}`;
   }
 
-  /**
-   * @template T
-   * @param {T} data
-   * @param {(this: any, key: string, value: any) => any} [replacer]
-   * @return {T}
+  /**
+   * @template T
+   * @param {T} data
+   * @param {(this: any, key: string, value: any) => any} [replacer]
+   * @return {T}
    */
   function clone(data, replacer) {
     return JSON.parse(JSON.stringify(data, replacer));
   }
 
-  /**
-   * Parse the schema for input variables a form might make use of
-   *
-   * @param {any} schema
-   *
-   * @return {string[]}
+  /**
+   * Parse the schema for input variables a form might make use of
+   *
+   * @param {any} schema
+   *
+   * @return {string[]}
    */
   function getSchemaVariables(schema) {
     if (!schema.components) {
@@ -19132,25 +19132,25 @@
     return isString$3(value) && value.startsWith('=');
   }
   class Importer$1 {
-    /**
-     * @constructor
-     * @param { import('../core').FormFieldRegistry } formFieldRegistry
-     * @param { import('../render/FormFields').default } formFields
+    /**
+     * @constructor
+     * @param { import('../core').FormFieldRegistry } formFieldRegistry
+     * @param { import('../render/FormFields').default } formFields
      */
     constructor(formFieldRegistry, formFields) {
       this._formFieldRegistry = formFieldRegistry;
       this._formFields = formFields;
     }
 
-    /**
-     * Import schema adding `id`, `_parent` and `_path`
-     * information to each field and adding it to the
-     * form field registry.
-     *
-     * @param {any} schema
-     * @param {any} [data]
-     *
-     * @return { { warnings: Array<any>, schema: any, data: any } }
+    /**
+     * Import schema adding `id`, `_parent` and `_path`
+     * information to each field and adding it to the
+     * form field registry.
+     *
+     * @param {any} schema
+     * @param {any} [data]
+     *
+     * @return { { warnings: Array<any>, schema: any, data: any } }
      */
     importSchema(schema, data = {}) {
       // TODO: Add warnings - https://github.com/bpmn-io/form-js/issues/289
@@ -19169,11 +19169,11 @@
       }
     }
 
-    /**
-     * @param {any} formField
-     * @param {string} [parentId]
-     *
-     * @return {any} importedField
+    /**
+     * @param {any} formField
+     * @param {string} [parentId]
+     *
+     * @return {any} importedField
      */
     importFormField(formField, parentId) {
       const {
@@ -19224,10 +19224,10 @@
       });
     }
 
-    /**
-     * @param {Object} data
-     *
-     * @return {Object} initializedData
+    /**
+     * @param {Object} data
+     *
+     * @return {Object} initializedData
      */
     initializeFieldValues(data) {
       return this._formFieldRegistry.getAll().reduce((initializedData, formField) => {
@@ -19275,11 +19275,11 @@
 
   const FORM_ELEMENT = document.createElement('form');
 
-  /**
-   * Sanitize a HTML string and return the cleaned, safe version.
-   *
-   * @param {string} html
-   * @return {string}
+  /**
+   * Sanitize a HTML string and return the cleaned, safe version.
+   *
+   * @param {string} html
+   * @return {string}
    */
   function sanitizeHTML(html) {
     const doc = new DOMParser().parseFromString(`<!DOCTYPE html>\n<html><body><div>${html}`, 'text/html');
@@ -19299,15 +19299,15 @@
     return valid ? src : '';
   }
 
-  /**
-   * Recursively sanitize a HTML node, potentially
-   * removing it, its children or attributes.
-   *
-   * Inspired by https://github.com/developit/snarkdown/issues/70
-   * and https://github.com/cure53/DOMPurify. Simplified
-   * for our use-case.
-   *
-   * @param {Element} node
+  /**
+   * Recursively sanitize a HTML node, potentially
+   * removing it, its children or attributes.
+   *
+   * Inspired by https://github.com/developit/snarkdown/issues/70
+   * and https://github.com/cure53/DOMPurify. Simplified
+   * for our use-case.
+   *
+   * @param {Element} node
    */
   function sanitizeNode(node) {
     // allow text nodes
@@ -19351,13 +19351,13 @@
     }
   }
 
-  /**
-   * Validates attributes for validity.
-   *
-   * @param {string} lcTag
-   * @param {string} lcName
-   * @param {string} value
-   * @return {boolean}
+  /**
+   * Validates attributes for validity.
+   *
+   * @param {string} lcTag
+   * @param {string} lcName
+   * @param {string} value
+   * @return {boolean}
    */
   function isValidAttribute(lcTag, lcName, value) {
     // disallow most attributes based on whitelist
@@ -19408,14 +19408,14 @@
     return sanitizeHTML(html);
   }
 
-  /**
-   * Sanitizes an image source to ensure we only allow for data URI and links
-   * that start with http(s).
-   *
-   * Note: Most browsers anyway do not support script execution in <img> elements.
-   *
-   * @param {string} src
-   * @returns {string}
+  /**
+   * Sanitizes an image source to ensure we only allow for data URI and links
+   * that start with http(s).
+   *
+   * Note: Most browsers anyway do not support script execution in <img> elements.
+   *
+   * @param {string} src
+   * @returns {string}
    */
   function safeImageSource(src) {
     return sanitizeImageSource(src);
@@ -19460,11 +19460,11 @@
     }
   });
 
-  /**
-   * @param {string} type
-   * @param {boolean} [strict]
-   *
-   * @returns {any}
+  /**
+   * @param {string} type
+   * @param {boolean} [strict]
+   *
+   * @returns {any}
    */
   function getService$2(type, strict) {}
   const FormContext = D$1({
@@ -19588,8 +19588,8 @@
     return getService(type, strict);
   }
 
-  /**
-   * @enum { String }
+  /**
+   * @enum { String }
    */
   const LOAD_STATES = {
     LOADING: 'loading',
@@ -19597,17 +19597,17 @@
     ERROR: 'error'
   };
 
-  /**
-   * @typedef {Object} ValuesGetter
-   * @property {Object[]} values - The values data
-   * @property {(LOAD_STATES)} state - The values data's loading state, to use for conditional rendering
+  /**
+   * @typedef {Object} ValuesGetter
+   * @property {Object[]} values - The values data
+   * @property {(LOAD_STATES)} state - The values data's loading state, to use for conditional rendering
    */
 
-  /**
-   * A hook to load values for single and multiselect components.
-   *
-   * @param {Object} field - The form field to handle values for
-   * @return {ValuesGetter} valuesGetter - A values getter object providing loading state and values
+  /**
+   * A hook to load values for single and multiselect components.
+   *
+   * @param {Object} field - The form field to handle values for
+   * @return {ValuesGetter} valuesGetter - A values getter object providing loading state and values
    */
   function useValuesAsync(field) {
     const {
@@ -19939,13 +19939,13 @@
   Checklist.emptyValue = [];
   Checklist.sanitizeValue = sanitizeMultiSelectValue;
 
-  /**
-   * Check if condition is met with given variables.
-   *
-   * @param {string | undefined} condition
-   * @param {import('../../types').Data} data
-   *
-   * @returns {boolean} true if condition is met or no condition or condition checker exists
+  /**
+   * Check if condition is met with given variables.
+   *
+   * @param {string | undefined} condition
+   * @param {import('../../types').Data} data
+   *
+   * @returns {boolean} true if condition is met or no condition or condition checker exists
    */
   function useCondition(condition, data) {
     const initialData = useService$2('form')._getState().initialData;
@@ -20065,7 +20065,7 @@
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M19 2H9V0H7v2H2a2 2 0 00-2 2v24a2 2 0 002 2h24a2 2 0 002-2V4a2 2 0 00-2-2h-5V0h-2v2zM7 7V4H2v5h24V4h-5v3h-2V4H9v3H7zm-5 4v17h24V11H2z",
-    fill: "#000"
+    fill: "currentColor"
   }));
   function InputAdorner(props) {
     const {
@@ -20128,10 +20128,6 @@
 
     // setup flatpickr instance
     y(() => {
-      if (disabled) {
-        setFlatpickrInstance(null);
-        return;
-      }
       let config = {
         allowInput: true,
         dateFormat: 'm/d/Y',
@@ -20164,7 +20160,7 @@
       // flatpicker logic that was lost when setting allowInput to true
       instance.config.onOpen = [() => instance.calendarContainer.addEventListener('focusout', onCalendarFocusOut), () => instance.calendarContainer.addEventListener('mousedown', onCalendarMouseDown)];
       instance.config.onClose = [() => instance.calendarContainer.removeEventListener('focusout', onCalendarFocusOut), () => instance.calendarContainer.removeEventListener('mousedown', onCalendarMouseDown)];
-    }, [disabled, disallowPassedDates]);
+    }, [disallowPassedDates]);
 
     // onChange is updated dynamically, so not to re-render the flatpicker every time it changes
     y(() => {
@@ -20265,12 +20261,12 @@
     xmlns: "http://www.w3.org/2000/svg"
   }, props), /*#__PURE__*/React.createElement("path", {
     d: "M13 14.41L18.59 20 20 18.59l-5-5.01V5h-2v9.41z",
-    fill: "#000"
+    fill: "currentColor"
   }), /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M6.222 25.64A14 14 0 1021.778 2.36 14 14 0 006.222 25.64zM7.333 4.023a12 12 0 1113.334 19.955A12 12 0 017.333 4.022z",
-    fill: "#000"
+    fill: "currentColor"
   }));
   function useKeyDownAction(targetKey, action, listenerElement = window) {
     function downHandler({
@@ -20360,6 +20356,7 @@
       ref: dropdownContainer,
       tabIndex: -1,
       class: "fjs-dropdownlist",
+      onMouseDown: e => e.preventDefault(),
       style: {
         maxHeight: height,
         scrollBehavior: smoothScrolling ? 'smooth' : 'auto'
@@ -20371,10 +20368,7 @@
           }),
           onMouseMove: mouseControl ? undefined : e => onMouseMovedInKeyboardMode(e, i),
           onMouseEnter: mouseControl ? () => setFocusedValueIndex(i) : undefined,
-          onMouseDown: e => {
-            e.preventDefault();
-            onValueSelected(v);
-          },
+          onMouseDown: e => onValueSelected(v),
           children: getLabel(v)
         });
       }), !values.length && e$1("div", {
@@ -20573,31 +20567,29 @@
         date,
         time
       } = getNullDateTime();
-      if (!disabled) {
-        switch (subtype) {
-          case DATETIME_SUBTYPES.DATE:
-            {
-              date = new Date(Date.parse(value));
-              break;
-            }
-          case DATETIME_SUBTYPES.TIME:
-            {
-              time = parseIsoTime(value);
-              break;
-            }
-          case DATETIME_SUBTYPES.DATETIME:
-            {
-              date = new Date(Date.parse(value));
-              time = isValidDate(date) ? 60 * date.getHours() + date.getMinutes() : null;
-              break;
-            }
-        }
+      switch (subtype) {
+        case DATETIME_SUBTYPES.DATE:
+          {
+            date = new Date(Date.parse(value));
+            break;
+          }
+        case DATETIME_SUBTYPES.TIME:
+          {
+            time = parseIsoTime(value);
+            break;
+          }
+        case DATETIME_SUBTYPES.DATETIME:
+          {
+            date = new Date(Date.parse(value));
+            time = isValidDate(date) ? 60 * date.getHours() + date.getMinutes() : null;
+            break;
+          }
       }
       setDateTime({
         date,
         time
       });
-    }, [subtype, value, disabled]);
+    }, [subtype, value]);
     const computeAndSetState = A$1(({
       date,
       time
@@ -20714,10 +20706,10 @@
   Datetime.emptyValue = null;
   Datetime.sanitizeValue = sanitizeDateTimePickerValue;
 
-  /**
-   * This file must not be changed or exchanged.
-   *
-   * @see http://bpmn.io/license for more information.
+  /**
+   * This file must not be changed or exchanged.
+   *
+   * @see http://bpmn.io/license for more information.
    */
   function Logo() {
     return e$1("svg", {
@@ -20833,10 +20825,10 @@
     });
   }
 
-  /**
-   *
-   * @param {string | undefined} expression
-   * @param {import('../../types').Data} data
+  /**
+   *
+   * @param {string | undefined} expression
+   * @param {import('../../types').Data} data
    */
   function useEvaluation(expression, data) {
     const initialData = useService$2('form')._getState().initialData;
@@ -20853,9 +20845,9 @@
     return conditionChecker.evaluate(expression, filteredData);
   }
 
-  /**
-   *
-   * @param {string} value
+  /**
+   *
+   * @param {string} value
    */
   function useExpressionValue(value) {
     const formData = useService$2('form')._getState().data;
@@ -20996,6 +20988,7 @@
     }), [stringValueCache, value, field]);
     const displayValue = d(() => {
       if (value === 'NaN') return 'NaN';
+      if (stringValueCache === '-') return '-';
       return cacheValueMatchesState ? stringValueCache : value || value === 0 ? Big$1(value).toFixed() : '';
     }, [stringValueCache, value, cacheValueMatchesState]);
     const arrowIncrementValue = d(() => {
@@ -21015,6 +21008,10 @@
 
       // treat commas as dots
       stringValue = stringValue.replaceAll(',', '.');
+      if (stringValue === '-') {
+        setStringValueCache('-');
+        return;
+      }
       if (isNaN(Number(stringValue))) {
         setStringValueCache('NaN');
         onChange({
@@ -21591,18 +21588,18 @@
     styles = {},
     ...props
   }) => /*#__PURE__*/React.createElement("svg", _extends$b({
+    xmlns: "http://www.w3.org/2000/svg",
     width: "54",
     height: "54",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
+    fill: "none"
   }, props), /*#__PURE__*/React.createElement("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
-    d: "M19 24h-6v6h6v-6zm-6-2a2 2 0 00-2 2v6a2 2 0 002 2h6a2 2 0 002-2v-6a2 2 0 00-2-2h-6zm6 18h-6v6h6v-6zm-6-2a2 2 0 00-2 2v6a2 2 0 002 2h6a2 2 0 002-2v-6a2 2 0 00-2-2h-6zm6-30h-6v6h6V8zm-6-2a2 2 0 00-2 2v6a2 2 0 002 2h6a2 2 0 002-2V8a2 2 0 00-2-2h-6z",
-    fill: "#22242A"
+    d: "M18 12h-6v6h6v-6zm-6-2a2 2 0 00-2 2v6a2 2 0 002 2h6a2 2 0 002-2v-6a2 2 0 00-2-2h-6zM18 36h-6v6h6v-6zm-6-2a2 2 0 00-2 2v6a2 2 0 002 2h6a2 2 0 002-2v-6a2 2 0 00-2-2h-6zM18 24h-6v6h6v-6zm-6-2a2 2 0 00-2 2v6a2 2 0 002 2h6a2 2 0 002-2v-6a2 2 0 00-2-2h-6z",
+    fill: "#161616"
   }), /*#__PURE__*/React.createElement("path", {
-    d: "M26 26a1 1 0 011-1h15a1 1 0 011 1v2a1 1 0 01-1 1H27a1 1 0 01-1-1v-2zm0 16a1 1 0 011-1h15a1 1 0 011 1v2a1 1 0 01-1 1H27a1 1 0 01-1-1v-2zm0-32a1 1 0 011-1h15a1 1 0 011 1v2a1 1 0 01-1 1H27a1 1 0 01-1-1v-2z",
-    fill: "#22242A"
+    d: "M23 14.5a1 1 0 011-1h19a1 1 0 011 1v1a1 1 0 01-1 1H24a1 1 0 01-1-1v-1zM23 26.5a1 1 0 011-1h19a1 1 0 011 1v1a1 1 0 01-1 1H24a1 1 0 01-1-1v-1zM23 38.5a1 1 0 011-1h19a1 1 0 011 1v1a1 1 0 01-1 1H24a1 1 0 01-1-1v-1z",
+    fill: "#161616"
   }));
   function _extends$a() {
     _extends$a = Object.assign ? Object.assign.bind() : function (target) {
@@ -29668,6 +29665,7 @@
       this.curLine = null;
       this.breakAtStart = 0;
       this.pendingBuffer = 0 /* Buf.No */;
+      this.bufferMarks = [];
       // Set to false directly after a widget that covers the position after it
       this.atCursorPos = true;
       this.openStart = -1;
@@ -29689,7 +29687,7 @@
       }
       return this.curLine;
     }
-    flushBuffer(active) {
+    flushBuffer(active = this.bufferMarks) {
       if (this.pendingBuffer) {
         this.curLine.append(wrapMarks(new WidgetBufferView(-1), active), active.length);
         this.pendingBuffer = 0 /* Buf.No */;
@@ -29697,12 +29695,12 @@
     }
 
     addBlockWidget(view) {
-      this.flushBuffer([]);
+      this.flushBuffer();
       this.curLine = null;
       this.content.push(view);
     }
     finish(openEnd) {
-      if (!openEnd) this.flushBuffer([]);else this.pendingBuffer = 0 /* Buf.No */;
+      if (this.pendingBuffer && openEnd <= this.bufferMarks.length) this.flushBuffer();else this.pendingBuffer = 0 /* Buf.No */;
       if (!this.posCovered()) this.getLine();
     }
     buildText(length, active, openStart) {
@@ -29718,8 +29716,9 @@
           if (lineBreak) {
             if (!this.posCovered()) this.getLine();
             if (this.content.length) this.content[this.content.length - 1].breakAfter = 1;else this.breakAtStart = 1;
-            this.flushBuffer([]);
+            this.flushBuffer();
             this.curLine = null;
+            this.atCursorPos = true;
             length--;
             continue;
           } else {
@@ -29757,7 +29756,7 @@
         } else {
           let view = WidgetView.create(deco.widget || new NullWidget("span"), len, len ? 0 : deco.startSide);
           let cursorBefore = this.atCursorPos && !view.isEditable && openStart <= active.length && (from < to || deco.startSide > 0);
-          let cursorAfter = !view.isEditable && (from < to || deco.startSide <= 0);
+          let cursorAfter = !view.isEditable && (from < to || openStart > active.length || deco.startSide <= 0);
           let line = this.getLine();
           if (this.pendingBuffer == 2 /* Buf.IfCursor */ && !cursorBefore) this.pendingBuffer = 0 /* Buf.No */;
           this.flushBuffer(active);
@@ -29767,7 +29766,8 @@
           }
           line.append(wrapMarks(view, active), openStart);
           this.atCursorPos = cursorAfter;
-          this.pendingBuffer = !cursorAfter ? 0 /* Buf.No */ : from < to ? 1 /* Buf.Yes */ : 2 /* Buf.IfCursor */;
+          this.pendingBuffer = !cursorAfter ? 0 /* Buf.No */ : from < to || openStart > active.length ? 1 /* Buf.Yes */ : 2 /* Buf.IfCursor */;
+          if (this.pendingBuffer) this.bufferMarks = active.slice();
         }
       } else if (this.doc.lineAt(this.pos).from == this.pos) {
         // Line decoration
@@ -33336,7 +33336,6 @@
       margin: 0,
       flexGrow: 2,
       flexShrink: 0,
-      minHeight: "100%",
       display: "block",
       whiteSpace: "pre",
       wordWrap: "normal",
@@ -33362,14 +33361,13 @@
     },
     ".cm-line": {
       display: "block",
-      padding: "0 2px 0 4px"
+      padding: "0 2px 0 6px"
     },
-    ".cm-selectionLayer": {
-      zIndex: -1,
-      contain: "size style"
-    },
-    ".cm-selectionBackground": {
-      position: "absolute"
+    ".cm-layer": {
+      contain: "size style",
+      "& > *": {
+        position: "absolute"
+      }
     },
     "&light .cm-selectionBackground": {
       background: "#d9d9d9"
@@ -33384,8 +33382,6 @@
       background: "#233"
     },
     ".cm-cursorLayer": {
-      zIndex: 100,
-      contain: "size style",
       pointerEvents: "none"
     },
     "&.cm-focused .cm-cursorLayer": {
@@ -33409,7 +33405,6 @@
       "100%": {}
     },
     ".cm-cursor, .cm-dropCursor": {
-      position: "absolute",
       borderLeft: "1.2px solid black",
       marginLeft: "-0.6px",
       pointerEvents: "none"
@@ -33511,6 +33506,21 @@
       display: "inline-block",
       verticalAlign: "top"
     },
+    ".cm-highlightSpace:before": {
+      content: "attr(data-display)",
+      position: "absolute",
+      pointerEvents: "none",
+      color: "#888"
+    },
+    ".cm-highlightTab": {
+      backgroundImage: `url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="20"><path stroke="%23888" stroke-width="1" fill="none" d="M1 10H196L190 5M190 15L196 10M197 4L197 16"/></svg>')`,
+      backgroundSize: "auto 100%",
+      backgroundPosition: "right 90%",
+      backgroundRepeat: "no-repeat"
+    },
+    ".cm-trailingSpace": {
+      backgroundColor: "#ff332255"
+    },
     ".cm-button": {
       verticalAlign: "middle",
       color: "inherit",
@@ -33817,7 +33827,8 @@
       this.lastChange = 0;
       this.scrollTargets = [];
       this.intersection = null;
-      this.resize = null;
+      this.resizeScroll = null;
+      this.resizeContent = null;
       this.intersecting = false;
       this.gapIntersection = null;
       this.gaps = [];
@@ -33850,11 +33861,13 @@
       this.onPrint = this.onPrint.bind(this);
       this.onScroll = this.onScroll.bind(this);
       if (typeof ResizeObserver == "function") {
-        this.resize = new ResizeObserver(() => {
+        this.resizeScroll = new ResizeObserver(() => {
           var _a;
           if (((_a = this.view.docView) === null || _a === void 0 ? void 0 : _a.lastUpdate) < Date.now() - 75) this.onResize();
         });
-        this.resize.observe(view.scrollDOM);
+        this.resizeScroll.observe(view.scrollDOM);
+        this.resizeContent = new ResizeObserver(() => this.view.requestMeasure());
+        this.resizeContent.observe(view.contentDOM);
       }
       this.addWindowListeners(this.win = view.win);
       this.start();
@@ -34151,11 +34164,12 @@
       win.document.removeEventListener("selectionchange", this.onSelectionChange);
     }
     destroy() {
-      var _a, _b, _c;
+      var _a, _b, _c, _d;
       this.stop();
       (_a = this.intersection) === null || _a === void 0 ? void 0 : _a.disconnect();
       (_b = this.gapIntersection) === null || _b === void 0 ? void 0 : _b.disconnect();
-      (_c = this.resize) === null || _c === void 0 ? void 0 : _c.disconnect();
+      (_c = this.resizeScroll) === null || _c === void 0 ? void 0 : _c.disconnect();
+      (_d = this.resizeContent) === null || _d === void 0 ? void 0 : _d.disconnect();
       for (let dom of this.scrollTargets) dom.removeEventListener("scroll", this.onScroll);
       this.removeWindowListeners(this.win);
       clearTimeout(this.parentCheck);
@@ -34257,7 +34271,7 @@
       this.scrollDOM.className = "cm-scroller";
       this.scrollDOM.appendChild(this.contentDOM);
       this.announceDOM = document.createElement("div");
-      this.announceDOM.style.cssText = "position: absolute; top: -10000px";
+      this.announceDOM.style.cssText = "position: fixed; top: -10000px";
       this.announceDOM.setAttribute("aria-live", "polite");
       this.dom = document.createElement("div");
       this.dom.appendChild(this.announceDOM);
@@ -35285,46 +35299,22 @@
     }
     return fallthrough;
   }
-  const CanHidePrimary = !browser.ios; // FIXME test IE
-  const selectionConfig = /*@__PURE__*/Facet.define({
-    combine(configs) {
-      return combineConfig(configs, {
-        cursorBlinkRate: 1200,
-        drawRangeCursor: true
-      }, {
-        cursorBlinkRate: (a, b) => Math.min(a, b),
-        drawRangeCursor: (a, b) => a || b
-      });
-    }
-  });
-  /**
-  Returns an extension that hides the browser's native selection and
-  cursor, replacing the selection with a background behind the text
-  (with the `cm-selectionBackground` class), and the
-  cursors with elements overlaid over the code (using
-  `cm-cursor-primary` and `cm-cursor-secondary`).
-
-  This allows the editor to display secondary selection ranges, and
-  tends to produce a type of selection more in line with that users
-  expect in a text editor (the native selection styling will often
-  leave gaps between lines and won't fill the horizontal space after
-  a line when the selection continues past it).
 
-  It does have a performance cost, in that it requires an extra DOM
-  layout cycle for many updates (the selection is drawn based on DOM
-  layout information that's only available after laying out the
-  content).
+  /**
+  Implementation of [`LayerMarker`](https://codemirror.net/6/docs/ref/#view.LayerMarker) that creates
+  a rectangle at a given set of coordinates.
   */
-  function drawSelection(config = {}) {
-    return [selectionConfig.of(config), drawSelectionPlugin, hideNativeSelection, nativeSelectionHidden.of(true)];
-  }
-  class Piece {
-    constructor(left, top, width, height, className) {
+  class RectangleMarker {
+    /**
+    Create a marker with the given class and dimensions. If `width`
+    is null, the DOM element will get no width style.
+    */
+    constructor(className, left, top, width, height) {
+      this.className = className;
       this.left = left;
       this.top = top;
       this.width = width;
       this.height = height;
-      this.className = className;
     }
     draw() {
       let elt = document.createElement("div");
@@ -35332,99 +35322,38 @@
       this.adjust(elt);
       return elt;
     }
+    update(elt, prev) {
+      if (prev.className != this.className) return false;
+      this.adjust(elt);
+      return true;
+    }
     adjust(elt) {
       elt.style.left = this.left + "px";
       elt.style.top = this.top + "px";
-      if (this.width >= 0) elt.style.width = this.width + "px";
+      if (this.width != null) elt.style.width = this.width + "px";
       elt.style.height = this.height + "px";
     }
     eq(p) {
       return this.left == p.left && this.top == p.top && this.width == p.width && this.height == p.height && this.className == p.className;
     }
-  }
-  const drawSelectionPlugin = /*@__PURE__*/ViewPlugin.fromClass(class {
-    constructor(view) {
-      this.view = view;
-      this.rangePieces = [];
-      this.cursors = [];
-      this.measureReq = {
-        read: this.readPos.bind(this),
-        write: this.drawSel.bind(this)
-      };
-      this.selectionLayer = view.scrollDOM.appendChild(document.createElement("div"));
-      this.selectionLayer.className = "cm-selectionLayer";
-      this.selectionLayer.setAttribute("aria-hidden", "true");
-      this.cursorLayer = view.scrollDOM.appendChild(document.createElement("div"));
-      this.cursorLayer.className = "cm-cursorLayer";
-      this.cursorLayer.setAttribute("aria-hidden", "true");
-      view.requestMeasure(this.measureReq);
-      this.setBlinkRate();
-    }
-    setBlinkRate() {
-      this.cursorLayer.style.animationDuration = this.view.state.facet(selectionConfig).cursorBlinkRate + "ms";
-    }
-    update(update) {
-      let confChanged = update.startState.facet(selectionConfig) != update.state.facet(selectionConfig);
-      if (confChanged || update.selectionSet || update.geometryChanged || update.viewportChanged) this.view.requestMeasure(this.measureReq);
-      if (update.transactions.some(tr => tr.scrollIntoView)) this.cursorLayer.style.animationName = this.cursorLayer.style.animationName == "cm-blink" ? "cm-blink2" : "cm-blink";
-      if (confChanged) this.setBlinkRate();
-    }
-    readPos() {
-      let {
-          state
-        } = this.view,
-        conf = state.facet(selectionConfig);
-      let rangePieces = state.selection.ranges.map(r => r.empty ? [] : measureRange(this.view, r)).reduce((a, b) => a.concat(b));
-      let cursors = [];
-      for (let r of state.selection.ranges) {
-        let prim = r == state.selection.main;
-        if (r.empty ? !prim || CanHidePrimary : conf.drawRangeCursor) {
-          let piece = measureCursor(this.view, r, prim);
-          if (piece) cursors.push(piece);
-        }
-      }
-      return {
-        rangePieces,
-        cursors
-      };
-    }
-    drawSel({
-      rangePieces,
-      cursors
-    }) {
-      if (rangePieces.length != this.rangePieces.length || rangePieces.some((p, i) => !p.eq(this.rangePieces[i]))) {
-        this.selectionLayer.textContent = "";
-        for (let p of rangePieces) this.selectionLayer.appendChild(p.draw());
-        this.rangePieces = rangePieces;
-      }
-      if (cursors.length != this.cursors.length || cursors.some((c, i) => !c.eq(this.cursors[i]))) {
-        let oldCursors = this.cursorLayer.children;
-        if (oldCursors.length !== cursors.length) {
-          this.cursorLayer.textContent = "";
-          for (const c of cursors) this.cursorLayer.appendChild(c.draw());
-        } else {
-          cursors.forEach((c, idx) => c.adjust(oldCursors[idx]));
-        }
-        this.cursors = cursors;
-      }
-    }
-    destroy() {
-      this.selectionLayer.remove();
-      this.cursorLayer.remove();
-    }
-  });
-  const themeSpec = {
-    ".cm-line": {
-      "& ::selection": {
-        backgroundColor: "transparent !important"
-      },
-      "&::selection": {
-        backgroundColor: "transparent !important"
+    /**
+    Create a set of rectangles for the given selection range,
+    assigning them theclass`className`. Will create a single
+    rectangle for empty ranges, and a set of selection-style
+    rectangles covering the range's content (in a bidi-aware
+    way) for non-empty ones.
+    */
+    static forRange(view, className, range) {
+      if (range.empty) {
+        let pos = view.coordsAtPos(range.head, range.assoc || 1);
+        if (!pos) return [];
+        let base = getBase(view);
+        return [new RectangleMarker(className, pos.left - base.left, pos.top - base.top, null, pos.bottom - pos.top)];
+      } else {
+        return rectanglesForRange(view, className, range);
       }
     }
-  };
-  if (CanHidePrimary) themeSpec[".cm-line"].caretColor = "transparent !important";
-  const hideNativeSelection = /*@__PURE__*/Prec.highest( /*@__PURE__*/EditorView.theme(themeSpec));
+  }
   function getBase(view) {
     let rect = view.scrollDOM.getBoundingClientRect();
     let left = view.textDirection == Direction.LTR ? rect.left : rect.right - view.scrollDOM.clientWidth;
@@ -35448,7 +35377,7 @@
     }
     return line;
   }
-  function measureRange(view, range) {
+  function rectanglesForRange(view, className, range) {
     if (range.to <= view.viewport.from || range.from >= view.viewport.to) return [];
     let from = Math.max(range.from, view.viewport.from),
       to = Math.min(range.to, view.viewport.to);
@@ -35477,8 +35406,9 @@
       return pieces(top).concat(between).concat(pieces(bottom));
     }
     function piece(left, top, right, bottom) {
-      return new Piece(left - base.left, top - base.top - 0.01 /* C.Epsilon */, right - left, bottom - top + 0.01 /* C.Epsilon */, "cm-selectionBackground");
+      return new RectangleMarker(className, left - base.left, top - base.top - 0.01 /* C.Epsilon */, right - left, bottom - top + 0.01 /* C.Epsilon */);
     }
+
     function pieces({
       top,
       bottom,
@@ -35536,12 +35466,162 @@
       };
     }
   }
-  function measureCursor(view, cursor, primary) {
-    let pos = view.coordsAtPos(cursor.head, cursor.assoc || 1);
-    if (!pos) return null;
-    let base = getBase(view);
-    return new Piece(pos.left - base.left, pos.top - base.top, -1, pos.bottom - pos.top, primary ? "cm-cursor cm-cursor-primary" : "cm-cursor cm-cursor-secondary");
+  function sameMarker(a, b) {
+    return a.constructor == b.constructor && a.eq(b);
+  }
+  class LayerView {
+    constructor(view, layer) {
+      this.view = view;
+      this.layer = layer;
+      this.drawn = [];
+      this.measureReq = {
+        read: this.measure.bind(this),
+        write: this.draw.bind(this)
+      };
+      this.dom = view.scrollDOM.appendChild(document.createElement("div"));
+      this.dom.classList.add("cm-layer");
+      if (layer.above) this.dom.classList.add("cm-layer-above");
+      if (layer.class) this.dom.classList.add(layer.class);
+      this.dom.setAttribute("aria-hidden", "true");
+      this.setOrder(view.state);
+      view.requestMeasure(this.measureReq);
+      if (layer.mount) layer.mount(this.dom, view);
+    }
+    update(update) {
+      if (update.startState.facet(layerOrder) != update.state.facet(layerOrder)) this.setOrder(update.state);
+      if (this.layer.update(update, this.dom) || update.geometryChanged) update.view.requestMeasure(this.measureReq);
+    }
+    setOrder(state) {
+      let pos = 0,
+        order = state.facet(layerOrder);
+      while (pos < order.length && order[pos] != this.layer) pos++;
+      this.dom.style.zIndex = String((this.layer.above ? 150 : -1) - pos);
+    }
+    measure() {
+      return this.layer.markers(this.view);
+    }
+    draw(markers) {
+      if (markers.length != this.drawn.length || markers.some((p, i) => !sameMarker(p, this.drawn[i]))) {
+        let old = this.dom.firstChild,
+          oldI = 0;
+        for (let marker of markers) {
+          if (marker.update && old && marker.constructor && this.drawn[oldI].constructor && marker.update(old, this.drawn[oldI])) {
+            old = old.nextSibling;
+            oldI++;
+          } else {
+            this.dom.insertBefore(marker.draw(), old);
+          }
+        }
+        while (old) {
+          let next = old.nextSibling;
+          old.remove();
+          old = next;
+        }
+        this.drawn = markers;
+      }
+    }
+    destroy() {
+      if (this.layer.destroy) this.layer.destroy(this.dom, this.view);
+      this.dom.remove();
+    }
+  }
+  const layerOrder = /*@__PURE__*/Facet.define();
+  /**
+  Define a layer.
+  */
+  function layer(config) {
+    return [ViewPlugin.define(v => new LayerView(v, config)), layerOrder.of(config)];
+  }
+  const CanHidePrimary = !browser.ios; // FIXME test IE
+  const selectionConfig = /*@__PURE__*/Facet.define({
+    combine(configs) {
+      return combineConfig(configs, {
+        cursorBlinkRate: 1200,
+        drawRangeCursor: true
+      }, {
+        cursorBlinkRate: (a, b) => Math.min(a, b),
+        drawRangeCursor: (a, b) => a || b
+      });
+    }
+  });
+  /**
+  Returns an extension that hides the browser's native selection and
+  cursor, replacing the selection with a background behind the text
+  (with the `cm-selectionBackground` class), and the
+  cursors with elements overlaid over the code (using
+  `cm-cursor-primary` and `cm-cursor-secondary`).
+
+  This allows the editor to display secondary selection ranges, and
+  tends to produce a type of selection more in line with that users
+  expect in a text editor (the native selection styling will often
+  leave gaps between lines and won't fill the horizontal space after
+  a line when the selection continues past it).
+
+  It does have a performance cost, in that it requires an extra DOM
+  layout cycle for many updates (the selection is drawn based on DOM
+  layout information that's only available after laying out the
+  content).
+  */
+  function drawSelection(config = {}) {
+    return [selectionConfig.of(config), cursorLayer, selectionLayer, hideNativeSelection, nativeSelectionHidden.of(true)];
   }
+  function configChanged(update) {
+    return update.startState.facet(selectionConfig) != update.startState.facet(selectionConfig);
+  }
+  const cursorLayer = /*@__PURE__*/layer({
+    above: true,
+    markers(view) {
+      let {
+          state
+        } = view,
+        conf = state.facet(selectionConfig);
+      let cursors = [];
+      for (let r of state.selection.ranges) {
+        let prim = r == state.selection.main;
+        if (r.empty ? !prim || CanHidePrimary : conf.drawRangeCursor) {
+          let className = prim ? "cm-cursor cm-cursor-primary" : "cm-cursor cm-cursor-secondary";
+          let cursor = r.empty ? r : EditorSelection.cursor(r.head, r.head > r.anchor ? -1 : 1);
+          for (let piece of RectangleMarker.forRange(view, className, cursor)) cursors.push(piece);
+        }
+      }
+      return cursors;
+    },
+    update(update, dom) {
+      if (update.transactions.some(tr => tr.scrollIntoView)) dom.style.animationName = dom.style.animationName == "cm-blink" ? "cm-blink2" : "cm-blink";
+      let confChange = configChanged(update);
+      if (confChange) setBlinkRate(update.state, dom);
+      return update.docChanged || update.selectionSet || confChange;
+    },
+    mount(dom, view) {
+      setBlinkRate(view.state, dom);
+    },
+    class: "cm-cursorLayer"
+  });
+  function setBlinkRate(state, dom) {
+    dom.style.animationDuration = state.facet(selectionConfig).cursorBlinkRate + "ms";
+  }
+  const selectionLayer = /*@__PURE__*/layer({
+    above: false,
+    markers(view) {
+      return view.state.selection.ranges.map(r => r.empty ? [] : RectangleMarker.forRange(view, "cm-selectionBackground", r)).reduce((a, b) => a.concat(b));
+    },
+    update(update, dom) {
+      return update.docChanged || update.selectionSet || update.viewportChanged || configChanged(update);
+    },
+    class: "cm-selectionLayer"
+  });
+  const themeSpec = {
+    ".cm-line": {
+      "& ::selection": {
+        backgroundColor: "transparent !important"
+      },
+      "&::selection": {
+        backgroundColor: "transparent !important"
+      }
+    }
+  };
+  if (CanHidePrimary) themeSpec[".cm-line"].caretColor = "transparent !important";
+  const hideNativeSelection = /*@__PURE__*/Prec.highest( /*@__PURE__*/EditorView.theme(themeSpec));
   const setDropCursorPos = /*@__PURE__*/StateEffect.define({
     map(pos, mapping) {
       return pos == null ? null : mapping.mapPos(pos);
@@ -36294,6 +36374,16 @@
         let left = size.width > space.right - space.left ? ltr ? space.left : space.right - size.width : ltr ? Math.min(pos.left - (arrow ? 14 /* Arrow.Offset */ : 0) + offset.x, space.right - width) : Math.max(space.left, pos.left - width + (arrow ? 14 /* Arrow.Offset */ : 0) - offset.x);
         let above = !!tooltip.above;
         if (!tooltip.strictSide && (above ? pos.top - (size.bottom - size.top) - offset.y < space.top : pos.bottom + (size.bottom - size.top) + offset.y > space.bottom) && above == space.bottom - pos.bottom > pos.top - space.top) above = !above;
+        let spaceVert = (above ? pos.top - space.top : space.bottom - pos.bottom) - arrowHeight;
+        if (spaceVert < height && tView.resize !== false) {
+          if (spaceVert < this.view.defaultLineHeight) {
+            dom.style.top = Outside;
+            continue;
+          }
+          dom.style.height = (height = spaceVert) + "px";
+        } else if (dom.style.height) {
+          dom.style.height = "";
+        }
         let top = above ? pos.top - height - arrowHeight - offset.y : pos.bottom + arrowHeight + offset.y;
         let right = left + width;
         if (tView.overlap !== true) for (let r of others) if (r.left < right && r.right > left && r.top < top + height && r.bottom > top) top = above ? r.top - height - 2 - arrowHeight : r.bottom + arrowHeight + 2;
@@ -36334,7 +36424,8 @@
   });
   const baseTheme$6 = /*@__PURE__*/EditorView.baseTheme({
     ".cm-tooltip": {
-      zIndex: 100
+      zIndex: 100,
+      boxSizing: "border-box"
     },
     "&light .cm-tooltip": {
       border: "1px solid #bbb",
@@ -40037,6 +40128,7 @@
         maxWidth: "min(700px, 95vw)",
         minWidth: "250px",
         maxHeight: "10em",
+        height: "100%",
         listStyle: "none",
         margin: 0,
         padding: 0,
@@ -40755,7 +40847,7 @@
   /**
   Returns an extension that enables autocompletion.
   */
-  function autocompletion$1(config = {}) {
+  function autocompletion$2(config = {}) {
     return [completionState, completionConfig.of(config), completionPlugin, completionKeymapExt, baseTheme$4];
   }
   /**
@@ -42527,6 +42619,17 @@
     key: "Alt-A",
     run: toggleBlockComment
   }].concat(standardKeymap);
+  /**
+  A binding that binds Tab to [`indentMore`](https://codemirror.net/6/docs/ref/#commands.indentMore) and
+  Shift-Tab to [`indentLess`](https://codemirror.net/6/docs/ref/#commands.indentLess).
+  Please see the [Tab example](../../examples/tab/) before using
+  this.
+  */
+  const indentWithTab = {
+    key: "Tab",
+    run: indentMore,
+    shift: indentLess
+  };
 
   function crelt() {
     var elt = arguments[0];
@@ -44672,13 +44775,13 @@
   /**
    * @type {Facet<import('..').Variable[]>} Variable
    */
-  const variablesFacet = Facet.define();
+  const variablesFacet$1 = Facet.define();
 
   /**
    * @type {import('@codemirror/autocomplete').CompletionSource}
    */
   var variables = context => {
-    const variables = context.state.facet(variablesFacet)[0];
+    const variables = context.state.facet(variablesFacet$1)[0];
     const options = variables.map(v => ({
       label: v.name,
       type: 'variable',
@@ -44711,8 +44814,8 @@
     }
     return result;
   };
-  function autocompletion() {
-    return [autocompletion$1({
+  function autocompletion$1() {
+    return [autocompletion$2({
       override: [variables, builtins, completeFromList(snippets)]
     })];
   }
@@ -44889,7 +44992,7 @@
         return tooltipContainer.getBoundingClientRect();
       }
     }) : [];
-    const extensions = [autocompletionConf.of(variablesFacet.of(variables)), autocompletion(), bracketMatching(), changeHandler, closeBrackets(), indentOnInput(), keyHandler, keymap.of([...defaultKeymap]), language(), linter, lintHandler, tooltipLayout, theme];
+    const extensions = [autocompletionConf.of(variablesFacet$1.of(variables)), autocompletion$1(), bracketMatching(), changeHandler, closeBrackets(), indentOnInput(), keyHandler, keymap.of([...defaultKeymap]), language(), linter, lintHandler, tooltipLayout, theme];
     if (readOnly) {
       extensions.push(EditorView.editable.of(false));
     }
@@ -44956,7 +45059,7 @@
    */
   FeelEditor.prototype.setVariables = function (variables) {
     this._cmEditor.dispatch({
-      effects: autocompletionConf.reconfigure(variablesFacet.of(variables))
+      effects: autocompletionConf.reconfigure(variablesFacet$1.of(variables))
     });
   };
 
@@ -46323,10 +46426,10 @@
     return fn.apply(null, args);
   }
 
-  /**
-   * A factory to create a configurable debouncer.
-   *
-   * @param {number|boolean} [config=true]
+  /**
+   * A factory to create a configurable debouncer.
+   *
+   * @param {number|boolean} [config=true]
    */
   function DebounceFactory(config = true) {
     const timeout = typeof config === 'number' ? config : config ? 300 : 0;
@@ -46338,11 +46441,11 @@
   }
   DebounceFactory.$inject = ['config.debounce'];
   class FieldFactory {
-    /**
-     * @constructor
-     *
-     * @param { import('./FormFieldRegistry').default } formFieldRegistry
-     * @param { import('@bpmn-io/form-js-viewer').FormFields } formFields
+    /**
+     * @constructor
+     *
+     * @param { import('./FormFieldRegistry').default } formFieldRegistry
+     * @param { import('@bpmn-io/form-js-viewer').FormFields } formFields
      */
     constructor(formFieldRegistry, formFields) {
       this._formFieldRegistry = formFieldRegistry;
@@ -46401,11 +46504,11 @@
   }
   FieldFactory.$inject = ['formFieldRegistry', 'formFields'];
   class FormFieldRegistry extends FormFieldRegistry$1 {
-    /**
-     * Updates a form fields id.
-     *
-     * @param {Object} formField
-     * @param {string} newId
+    /**
+     * Updates a form fields id.
+     *
+     * @param {Object} formField
+     * @param {string} newId
      */
     updateId(formField, newId) {
       this._validateId(newId);
@@ -46426,13 +46529,13 @@
       }
     }
 
-    /**
-     * Validate the suitability of the given id and signals a problem
-     * with an exception.
-     *
-     * @param {string} id
-     *
-     * @throws {Error} if id is empty or already assigned
+    /**
+     * Validate the suitability of the given id and signals a problem
+     * with an exception.
+     *
+     * @param {string} id
+     *
+     * @throws {Error} if id is empty or already assigned
      */
     _validateId(id) {
       if (!id) {
@@ -46444,31 +46547,31 @@
     }
   }
   class Importer {
-    /**
-     * @constructor
-     * @param { import('../core/FormFieldRegistry').default } formFieldRegistry
-     * @param { import('../core/FieldFactory').default } fieldFactory
+    /**
+     * @constructor
+     * @param { import('../core/FormFieldRegistry').default } formFieldRegistry
+     * @param { import('../core/FieldFactory').default } fieldFactory
      */
     constructor(formFieldRegistry, fieldFactory) {
       this._formFieldRegistry = formFieldRegistry;
       this._fieldFactory = fieldFactory;
     }
 
-    /**
-     * Import schema creating fields, attaching additional
-     * information to each field and adding fields to the
-     * field registry.
-     *
-     * Additional information attached:
-     *
-     *   * `id` (unless present)
-     *   * `_parent`
-     *   * `_path`
-     *
-     * @param {any} schema
-     *
-     * @typedef {{ warnings: Error[], schema: any }} ImportResult
-     * @returns {ImportResult}
+    /**
+     * Import schema creating 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
@@ -46485,12 +46588,12 @@
       }
     }
 
-    /**
-     * @param {{[x: string]: any}} fieldAttrs
-     * @param {String} [parentId]
-     * @param {number} [index]
-     *
-     * @return {any} field
+    /**
+     * @param {{[x: string]: any}} fieldAttrs
+     * @param {String} [parentId]
+     * @param {number} [index]
+     *
+     * @return {any} field
      */
     importFormField(fieldAttrs, parentId, index) {
       const {
@@ -46527,11 +46630,11 @@
       return field;
     }
 
-    /**
-     * @param {Array<any>} components
-     * @param {string} parentId
-     *
-     * @return {Array<any>} imported components
+    /**
+     * @param {Array<any>} components
+     * @param {string} parentId
+     *
+     * @return {Array<any>} imported components
      */
     importFormFields(components, parentId) {
       return components.map((component, index) => {
@@ -46547,11 +46650,11 @@
     drake: null
   });
 
-  /**
-   * @param {string} type
-   * @param {boolean} [strict]
-   *
-   * @returns {any}
+  /**
+   * @param {string} type
+   * @param {boolean} [strict]
+   *
+   * @returns {any}
    */
   function getService$1(type, strict) {}
   const FormEditorContext = D$1({
@@ -47615,10 +47718,10 @@
     return formField;
   }
   class AddFormFieldHandler {
-    /**
-     * @constructor
-     * @param { import('../../../FormEditor').default } formEditor
-     * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
+    /**
+     * @constructor
+     * @param { import('../../../FormEditor').default } formEditor
+     * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
      */
     constructor(formEditor, formFieldRegistry) {
       this._formEditor = formEditor;
@@ -47678,10 +47781,10 @@
   }
   AddFormFieldHandler.$inject = ['formEditor', 'formFieldRegistry'];
   class EditFormFieldHandler {
-    /**
-     * @constructor
-     * @param { import('../../../FormEditor').default } formEditor
-     * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
+    /**
+     * @constructor
+     * @param { import('../../../FormEditor').default } formEditor
+     * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
      */
     constructor(formEditor, formFieldRegistry) {
       this._formEditor = formEditor;
@@ -47743,10 +47846,10 @@
   }
   EditFormFieldHandler.$inject = ['formEditor', 'formFieldRegistry'];
   class MoveFormFieldHandler {
-    /**
-     * @constructor
-     * @param { import('../../../FormEditor').default } formEditor
-     * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
+    /**
+     * @constructor
+     * @param { import('../../../FormEditor').default } formEditor
+     * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
      */
     constructor(formEditor, formFieldRegistry) {
       this._formEditor = formEditor;
@@ -47822,10 +47925,10 @@
   }
   MoveFormFieldHandler.$inject = ['formEditor', 'formFieldRegistry'];
   class RemoveFormFieldHandler {
-    /**
-     * @constructor
-     * @param { import('../../../FormEditor').default } formEditor
-     * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
+    /**
+     * @constructor
+     * @param { import('../../../FormEditor').default } formEditor
+     * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
      */
     constructor(formEditor, formFieldRegistry) {
       this._formEditor = formEditor;
@@ -47884,9 +47987,9 @@
   }
   RemoveFormFieldHandler.$inject = ['formEditor', 'formFieldRegistry'];
   class UpdateIdClaimHandler {
-    /**
-     * @constructor
-     * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
+    /**
+     * @constructor
+     * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
      */
     constructor(formFieldRegistry) {
       this._formFieldRegistry = formFieldRegistry;
@@ -47918,9 +48021,9 @@
   }
   UpdateIdClaimHandler.$inject = ['formFieldRegistry'];
   class UpdateKeyClaimHandler {
-    /**
-     * @constructor
-     * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
+    /**
+     * @constructor
+     * @param { import('../../../core/FormFieldRegistry').default } formFieldRegistry
      */
     constructor(formFieldRegistry) {
       this._formFieldRegistry = formFieldRegistry;
@@ -48221,10 +48324,39 @@
     }
   }
   KeyBehavior.$inject = ['eventBus', 'modeling'];
+  class ValidateBehavior extends CommandInterceptor {
+    constructor(eventBus) {
+      super(eventBus);
+
+      /**
+       * Remove custom validation if <validationType> is about to be added.
+       */
+      // @ts-ignore-next-line
+      this.preExecute('formField.edit', function (context) {
+        const {
+          properties
+        } = context;
+        const {
+          validate = {}
+        } = properties;
+        if (validate.validationType) {
+          const newValidate = {
+            ...validate
+          };
+          delete newValidate.minLength;
+          delete newValidate.maxLength;
+          delete newValidate.pattern;
+          properties['validate'] = newValidate;
+        }
+      }, true);
+    }
+  }
+  ValidateBehavior.$inject = ['eventBus'];
   var behaviorModule = {
-    __init__: ['idBehavior', 'keyBehavior'],
+    __init__: ['idBehavior', 'keyBehavior', 'validateBehavior'],
     idBehavior: ['type', IdBehavior],
-    keyBehavior: ['type', KeyBehavior]
+    keyBehavior: ['type', KeyBehavior],
+    validateBehavior: ['type', ValidateBehavior]
   };
 
   /**
@@ -48806,10 +48938,10 @@
       });
     }
 
-    /**
-     * Attach the palette to a parent node.
-     *
-     * @param {HTMLElement} container
+    /**
+     * Attach the palette to a parent node.
+     *
+     * @param {HTMLElement} container
      */
     attachTo(container) {
       if (!container) {
@@ -48829,8 +48961,8 @@
       this._eventBus.fire('palette.attach');
     }
 
-    /**
-     * Detach the palette from its parent node.
+    /**
+     * Detach the palette from its parent node.
      */
     detach() {
       const parentNode = this._container.parentNode;
@@ -50965,11 +51097,11 @@
     return `bio-properties-panel-${id}`;
   }
 
-  /**
-   * @param {string} type
-   * @param {boolean} [strict]
-   *
-   * @returns {any}
+  /**
+   * @param {string} type
+   * @param {boolean} [strict]
+   *
+   * @returns {any}
    */
   function getService(type, strict) {}
   const PropertiesPanelContext = D$1({
@@ -51055,8 +51187,8 @@
     }
   };
 
-  /**
-   * Provide placeholders for empty and multiple state.
+  /**
+   * Provide placeholders for empty and multiple state.
    */
   const PropertiesPanelPlaceholderProvider = {
     getEmpty: () => {
@@ -51126,10 +51258,10 @@
     return getService(type, strict);
   }
 
-  /**
-   * Retrieve list of variables from the form schema.
-   *
-   * @returns { string[] } list of variables used in form schema
+  /**
+   * Retrieve list of variables from the form schema.
+   *
+   * @returns { string[] } list of variables used in form schema
    */
   function useVariables() {
     const form = useService('formEditor');
@@ -51926,7 +52058,12 @@
       if (!isValidNumber(value)) return null;
       return value;
     };
-    const setValue = value => editField(field, ['increment'], value);
+    const clearLeadingZeroes = value => {
+      if (!value) return value;
+      const trimmed = value.replace(/^0+/g, '');
+      return (trimmed.startsWith('.') ? '0' : '') + trimmed;
+    };
+    const setValue = value => editField(field, ['increment'], clearLeadingZeroes(value));
     const decimalDigitsSet = decimalDigits || decimalDigits === 0;
     return TextfieldEntry({
       debounce,
@@ -52396,14 +52533,14 @@
 
   // helpers //////////
 
-  /**
-   * Returns copy of object with updated value.
-   *
-   * @param {Object} properties
-   * @param {string} key
-   * @param {string} value
-   *
-   * @returns {Object}
+  /**
+   * Returns copy of object with updated value.
+   *
+   * @param {Object} properties
+   * @param {string} key
+   * @param {string} value
+   *
+   * @returns {Object}
    */
   function updateValue(properties, key, value) {
     return {
@@ -52412,14 +52549,14 @@
     };
   }
 
-  /**
-   * Returns copy of object with updated key.
-   *
-   * @param {Object} properties
-   * @param {string} oldKey
-   * @param {string} newKey
-   *
-   * @returns {Object}
+  /**
+   * Returns copy of object with updated key.
+   *
+   * @param {Object} properties
+   * @param {string} oldKey
+   * @param {string} newKey
+   *
+   * @returns {Object}
    */
   function updateKey(properties, oldKey, newKey) {
     return Object.entries(properties).reduce((newProperties, entry) => {
@@ -52796,7 +52933,7 @@
   }
   const VALIDATION_TYPE_OPTIONS = {
     custom: {
-      value: 'custom',
+      value: undefined,
       label: 'Custom'
     },
     email: {
@@ -52842,6 +52979,7 @@
         component: ValidationType,
         getValue,
         field,
+        editField,
         isEdited: isEdited$1,
         onChange
       });
@@ -52975,10 +53113,10 @@
     return NumberFieldEntry({
       debounce,
       element: field,
-      getValue: getValue('min'),
       id,
       label: 'Minimum',
-      min: 0,
+      step: 'any',
+      getValue: getValue('min'),
       setValue: onChange('min')
     });
   }
@@ -52993,10 +53131,10 @@
     return NumberFieldEntry({
       debounce,
       element: field,
-      getValue: getValue('max'),
       id,
       label: 'Maximum',
-      min: 0,
+      step: 'any',
+      getValue: getValue('max'),
       setValue: onChange('max')
     });
   }
@@ -53008,16 +53146,17 @@
       onChange
     } = props;
     const debounce = useService('debounce');
+    const setValue = validationType => {
+      onChange('validationType')(validationType || undefined);
+    };
     return SelectEntry({
       debounce,
       element: field,
       getValue: getValue('validationType'),
       id,
       label: 'Regular expression validation',
-      setValue: onChange('validationType'),
-      getOptions() {
-        return Object.values(VALIDATION_TYPE_OPTIONS);
-      }
+      setValue,
+      getOptions: () => Object.values(VALIDATION_TYPE_OPTIONS)
     });
   }
   function ValuesGroups(field, editField) {
@@ -53034,8 +53173,8 @@
     };
     const valuesSourceId = `${fieldId}-valuesSource`;
 
-    /**
-     * @type {Array<Group|ListGroup>}
+    /**
+     * @type {Array<Group|ListGroup>}
      */
     const groups = [{
       id: valuesSourceId,
@@ -53135,13 +53274,13 @@
 
   // helpers //////////
 
-  /**
-   * Returns copy of object without key.
-   *
-   * @param {Object} properties
-   * @param {string} oldKey
-   *
-   * @returns {Object}
+  /**
+   * Returns copy of object without key.
+   *
+   * @param {Object} properties
+   * @param {string} oldKey
+   *
+   * @returns {Object}
    */
   function removeKey(properties, oldKey) {
     return Object.entries(properties).reduce((newProperties, entry) => {
@@ -53231,9 +53370,9 @@
     }, []);
     h(() => {
       const onFieldChanged = () => {
-        /**
-         * TODO(pinussilvestrus): update with actual updated element,
-         * once we have a proper updater/change support
+        /**
+         * TODO(pinussilvestrus): update with actual updated element,
+         * once we have a proper updater/change support
          */
         _update(selection.get() || schema);
       };
@@ -53284,10 +53423,10 @@
       });
     }
 
-    /**
-     * Attach the properties panel to a parent node.
-     *
-     * @param {HTMLElement} container
+    /**
+     * Attach the properties panel to a parent node.
+     *
+     * @param {HTMLElement} container
      */
     attachTo(container) {
       if (!container) {
@@ -53307,8 +53446,8 @@
       this._eventBus.fire('propertiesPanel.attach');
     }
 
-    /**
-     * Detach the properties panel from its parent node.
+    /**
+     * Detach the properties panel from its parent node.
      */
     detach() {
       const parentNode = this._container.parentNode;
@@ -53338,48 +53477,48 @@
   };
   const ids = new Ids([32, 36, 1]);
 
-  /**
-   * @typedef { import('./types').Injector } Injector
-   * @typedef { import('./types').Module } Module
-   * @typedef { import('./types').Schema } Schema
-   *
-   * @typedef { import('./types').FormEditorOptions } FormEditorOptions
-   * @typedef { import('./types').FormEditorProperties } FormEditorProperties
-   *
-   * @typedef { {
-   *   properties: FormEditorProperties,
-   *   schema: Schema
-   * } } State
-   *
-   * @typedef { (type:string, priority:number, handler:Function) => void } OnEventWithPriority
-   * @typedef { (type:string, handler:Function) => void } OnEventWithOutPriority
-   * @typedef { OnEventWithPriority & OnEventWithOutPriority } OnEventType
+  /**
+   * @typedef { import('./types').Injector } Injector
+   * @typedef { import('./types').Module } Module
+   * @typedef { import('./types').Schema } Schema
+   *
+   * @typedef { import('./types').FormEditorOptions } FormEditorOptions
+   * @typedef { import('./types').FormEditorProperties } FormEditorProperties
+   *
+   * @typedef { {
+   *   properties: FormEditorProperties,
+   *   schema: Schema
+   * } } State
+   *
+   * @typedef { (type:string, priority:number, handler:Function) => void } OnEventWithPriority
+   * @typedef { (type:string, handler:Function) => void } OnEventWithOutPriority
+   * @typedef { OnEventWithPriority & OnEventWithOutPriority } OnEventType
    */
 
-  /**
-   * The form editor.
+  /**
+   * The form editor.
    */
   class FormEditor {
-    /**
-     * @constructor
-     * @param {FormEditorOptions} options
+    /**
+     * @constructor
+     * @param {FormEditorOptions} options
      */
     constructor(options = {}) {
-      /**
-       * @public
-       * @type {OnEventType}
+      /**
+       * @public
+       * @type {OnEventType}
        */
       this.on = this._onEvent;
 
-      /**
-       * @public
-       * @type {String}
+      /**
+       * @public
+       * @type {String}
        */
       this._id = ids.next();
 
-      /**
-       * @private
-       * @type {Element}
+      /**
+       * @private
+       * @type {Element}
        */
       this._container = createFormContainer();
       this._container.setAttribute('input-handle-modified-keys', 'z,y');
@@ -53390,15 +53529,15 @@
         properties = {}
       } = options;
 
-      /**
-       * @private
-       * @type {any}
+      /**
+       * @private
+       * @type {any}
        */
       this.exporter = exporter;
 
-      /**
-       * @private
-       * @type {State}
+      /**
+       * @private
+       * @type {State}
        */
       this._state = {
         properties,
@@ -53427,10 +53566,10 @@
       this._detach(false);
     }
 
-    /**
-     * @param {Schema} schema
-     *
-     * @return {Promise<{ warnings: Array<any> }>}
+    /**
+     * @param {Schema} schema
+     *
+     * @return {Promise<{ warnings: Array<any> }>}
      */
     importSchema(schema) {
       return new Promise((resolve, reject) => {
@@ -53459,15 +53598,15 @@
       });
     }
 
-    /**
-     * @returns {Schema}
+    /**
+     * @returns {Schema}
      */
     saveSchema() {
       return this.getSchema();
     }
 
-    /**
-     * @returns {Schema}
+    /**
+     * @returns {Schema}
      */
     getSchema() {
       const {
@@ -53476,8 +53615,8 @@
       return exportSchema(schema, this.exporter, schemaVersion);
     }
 
-    /**
-     * @param {Element|string} parentNode
+    /**
+     * @param {Element|string} parentNode
      */
     attachTo(parentNode) {
       if (!parentNode) {
@@ -53495,10 +53634,10 @@
       this._detach();
     }
 
-    /**
-     * @internal
-     *
-     * @param {boolean} [emit]
+    /**
+     * @internal
+     *
+     * @param {boolean} [emit]
      */
     _detach(emit = true) {
       const container = this._container,
@@ -53512,9 +53651,9 @@
       parentNode.removeChild(container);
     }
 
-    /**
-     * @param {any} property
-     * @param {any} value
+    /**
+     * @param {any} property
+     * @param {any} value
      */
     setProperty(property, value) {
       const properties = set(this._getState().properties, [property], value);
@@ -53523,21 +53662,21 @@
       });
     }
 
-    /**
-     * @param {string} type
-     * @param {Function} handler
+    /**
+     * @param {string} type
+     * @param {Function} handler
      */
     off(type, handler) {
       this.get('eventBus').off(type, handler);
     }
 
-    /**
-     * @internal
-     *
-     * @param {FormEditorOptions} options
-     * @param {Element} container
-     *
-     * @returns {Injector}
+    /**
+     * @internal
+     *
+     * @param {FormEditorOptions} options
+     * @param {Element} container
+     *
+     * @returns {Injector}
      */
     _createInjector(options, container) {
       const {
@@ -53559,22 +53698,22 @@
       }, core, ...modules, ...additionalModules]);
     }
 
-    /**
-     * @internal
+    /**
+     * @internal
      */
     _emit(type, data) {
       this.get('eventBus').fire(type, data);
     }
 
-    /**
-     * @internal
+    /**
+     * @internal
      */
     _getState() {
       return this._state;
     }
 
-    /**
-     * @internal
+    /**
+     * @internal
      */
     _setState(state) {
       this._state = {
@@ -53584,15 +53723,15 @@
       this._emit('changed', this._getState());
     }
 
-    /**
-     * @internal
+    /**
+     * @internal
      */
     _getModules() {
       return [ModelingModule, EditorActionsModule, KeyboardModule, SelectionModule, PaletteModule, PropertiesPanelModule];
     }
 
-    /**
-     * @internal
+    /**
+     * @internal
      */
     _onEvent(type, priority, handler) {
       this.get('eventBus').on(type, priority, handler);
@@ -55004,7 +55143,7 @@
   */
   const basicSetup = /*@__PURE__*/(() => [lineNumbers(), highlightActiveLineGutter(), highlightSpecialChars(), history(), foldGutter(), drawSelection(), dropCursor(), EditorState.allowMultipleSelections.of(true), indentOnInput(), syntaxHighlighting(defaultHighlightStyle, {
     fallback: true
-  }), bracketMatching(), closeBrackets(), autocompletion$1(), rectangularSelection(), crosshairCursor(), highlightActiveLine(), highlightSelectionMatches(), keymap.of([...closeBracketsKeymap, ...defaultKeymap, ...searchKeymap, ...historyKeymap, ...foldKeymap, ...completionKeymap, ...lintKeymap])])();
+  }), bracketMatching(), closeBrackets(), autocompletion$2(), rectangularSelection(), crosshairCursor(), highlightActiveLine(), highlightSelectionMatches(), keymap.of([...closeBracketsKeymap, ...defaultKeymap, ...searchKeymap, ...historyKeymap, ...foldKeymap, ...completionKeymap, ...lintKeymap])])();
 
   const jsonHighlighting = styleTags({
     String: tags$1.string,
@@ -55095,18 +55234,56 @@
     return new LanguageSupport(jsonLanguage);
   }
 
+  /**
+   * @type {Facet<import('..').Variables>} Variables
+   */
+  const variablesFacet = Facet.define();
+
+  function autocompletion () {
+    return [autocompletion$2({
+      override: [completions]
+    })];
+  }
+  function completions(context) {
+    const variables = context.state.facet(variablesFacet)[0];
+    const options = variables.map(v => ({
+      label: v,
+      type: 'variable'
+    }));
+    let nodeBefore = syntaxTree(context.state).resolve(context.pos, -1);
+
+    // handle inside property name as explicit call
+    if (nodeBefore.type.name === 'PropertyName') {
+      context.explicit = true;
+    }
+    let word = context.matchBefore(/\w*/);
+    if (word.from == word.to && !context.explicit) {
+      return null;
+    }
+    return {
+      from: word.from,
+      options
+    };
+  }
+
   function JSONEditor(options = {}) {
-    const emitter = mitt();
     const {
       readonly = false
     } = options;
+    const emitter = mitt();
     let language = new Compartment().of(json());
     let tabSize = new Compartment().of(EditorState.tabSize.of(2));
+
+    /**
+     * @typedef {Array<string>} Variables
+     */
+
+    const autocompletionConf = new Compartment();
     const linterExtension = linter$1(jsonParseLinter());
-    function createState(doc, extensions = []) {
+    function createState(doc, extensions = [], variables = []) {
       return EditorState.create({
         doc,
-        extensions: [basicSetup, language, tabSize, linterExtension, lintGutter(), ...extensions]
+        extensions: [basicSetup, language, tabSize, linterExtension, lintGutter(), autocompletionConf.of(variablesFacet.of(variables)), autocompletion(), keymap.of([indentWithTab]), ...extensions]
       });
     }
     function createView(readonly) {
@@ -55124,15 +55301,25 @@
       view.setValue = function (value) {
         this.setState(createState(value, [updateListener, editable]));
       };
+      view.setVariables = function (variables) {
+        this.setState(createState(view.state.doc.toString(), [updateListener, editable], variables));
+      };
       return view;
     }
-    const view = createView(readonly);
+    const view = this._view = createView(readonly);
     this.setValue = function (value) {
       view.setValue(value);
     };
     this.getValue = function () {
       return view.state.doc.toString();
     };
+
+    /**
+     * @param {Variables} variables
+     */
+    this.setVariables = function (variables) {
+      view.setVariables(variables);
+    };
     this.on = emitter.on;
     this.off = emitter.off;
     this.emit = emitter.emit;
@@ -55181,16 +55368,12 @@
   function PlaygroundRoot(props) {
     const {
       actions: actionsConfig = {},
-      editor: editorConfig = {},
       emit,
       exporter: exporterConfig = {}
     } = props;
     const {
       display: displayActions = true
     } = actionsConfig;
-    const {
-      inlinePropertiesPanel = true
-    } = editorConfig;
     const paletteContainerRef = s$1();
     const editorContainerRef = s$1();
     const formContainerRef = s$1();
@@ -55234,11 +55417,11 @@
     }, [props.schema]);
     y(() => {
       const dataEditor = dataEditorRef.current = new JSONEditor({
-        value: toJSON(data)
+        value: toString(data)
       });
       const resultView = resultViewRef.current = new JSONEditor({
         readonly: true,
-        value: toJSON(resultData)
+        value: toString(resultData)
       });
       const form = formRef.current = new Form();
       const formEditor = formEditorRef.current = new FormEditor({
@@ -55249,7 +55432,7 @@
           parent: paletteContainerRef.current
         },
         propertiesPanel: {
-          parent: !inlinePropertiesPanel && propertiesPanelContainerRef.current
+          parent: propertiesPanelContainerRef.current
         },
         exporter: exporterConfig
       });
@@ -55289,16 +55472,25 @@
       };
     }, []);
     y(() => {
-      dataEditorRef.current.setValue(toJSON(initialData));
+      dataEditorRef.current.setValue(toString(initialData));
     }, [initialData]);
     y(() => {
-      initialSchema && formEditorRef.current.importSchema(initialSchema);
+      if (initialSchema) {
+        formEditorRef.current.importSchema(initialSchema);
+        dataEditorRef.current.setVariables(getSchemaVariables(initialSchema));
+      }
     }, [initialSchema]);
+    y(() => {
+      if (schema && dataContainerRef.current) {
+        const variables = getSchemaVariables(schema);
+        dataEditorRef.current.setVariables(variables);
+      }
+    }, [schema]);
     y(() => {
       schema && formRef.current.importSchema(schema, data);
     }, [schema, data]);
     y(() => {
-      resultViewRef.current.setValue(toJSON(resultData));
+      resultViewRef.current.setValue(toString(resultData));
     }, [resultData]);
     y(() => {
       props.onStateChanged({
@@ -55316,9 +55508,7 @@
       setShowEmbed(true);
     }, []);
     return e$1("div", {
-      class: classNames('fjs-container', 'fjs-pgl-root', {
-        'fjs-pgl-inline-editor-panel': inlinePropertiesPanel
-      }),
+      class: classNames('fjs-container', 'fjs-pgl-root'),
       children: [e$1("div", {
         class: "fjs-pgl-modals",
         children: showEmbed ? e$1(EmbedModal, {
@@ -55357,13 +55547,13 @@
             class: "fjs-pgl-form-container"
           })
         }), e$1(Section, {
-          name: "Form Data (Input)",
+          name: "Form Input",
           children: e$1("div", {
             ref: dataContainerRef,
             class: "fjs-pgl-text-container"
           })
         }), e$1(Section, {
-          name: "Form Data (Submit)",
+          name: "Form Output",
           children: e$1("div", {
             ref: resultContainerRef,
             class: "fjs-pgl-text-container"
@@ -55378,7 +55568,7 @@
 
   // helpers ///////////////
 
-  function toJSON(obj) {
+  function toString(obj) {
     return JSON.stringify(obj, null, '  ');
   }