@bpmn-io/form-js-playground 0.10.0 → 0.11.0

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') {
@@ -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) {
@@ -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
@@ -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({
@@ -21120,6 +21117,7 @@
             }),
             children: [e$1("button", {
               class: "fjs-number-arrow-up",
+              type: "button",
               onClick: () => increment(),
               tabIndex: -1,
               children: "\u02C4"
@@ -21127,6 +21125,7 @@
               class: "fjs-number-arrow-separator"
             }), e$1("button", {
               class: "fjs-number-arrow-down",
+              type: "button",
               onClick: () => decrement(),
               tabIndex: -1,
               children: "\u02C5"
@@ -21589,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) {
@@ -29666,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;
@@ -29687,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 */;
@@ -29695,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) {
@@ -29716,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 {
@@ -29755,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);
@@ -29765,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
@@ -33334,7 +33336,6 @@
       margin: 0,
       flexGrow: 2,
       flexShrink: 0,
-      minHeight: "100%",
       display: "block",
       whiteSpace: "pre",
       wordWrap: "normal",
@@ -33360,14 +33361,13 @@
     },
     ".cm-line": {
       display: "block",
-      padding: "0 2px 0 4px"
-    },
-    ".cm-selectionLayer": {
-      zIndex: -1,
-      contain: "size style"
+      padding: "0 2px 0 6px"
     },
-    ".cm-selectionBackground": {
-      position: "absolute"
+    ".cm-layer": {
+      contain: "size style",
+      "& > *": {
+        position: "absolute"
+      }
     },
     "&light .cm-selectionBackground": {
       background: "#d9d9d9"
@@ -33382,8 +33382,6 @@
       background: "#233"
     },
     ".cm-cursorLayer": {
-      zIndex: 100,
-      contain: "size style",
       pointerEvents: "none"
     },
     "&.cm-focused .cm-cursorLayer": {
@@ -33407,7 +33405,6 @@
       "100%": {}
     },
     ".cm-cursor, .cm-dropCursor": {
-      position: "absolute",
       borderLeft: "1.2px solid black",
       marginLeft: "-0.6px",
       pointerEvents: "none"
@@ -33509,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",
@@ -33815,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 = [];
@@ -33848,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();
@@ -34149,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);
@@ -34255,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);
@@ -35283,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");
@@ -35330,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;
@@ -35446,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);
@@ -35475,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,
@@ -35534,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);
@@ -36292,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;
@@ -36332,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",
@@ -40035,6 +40128,7 @@
         maxWidth: "min(700px, 95vw)",
         minWidth: "250px",
         maxHeight: "10em",
+        height: "100%",
         listStyle: "none",
         margin: 0,
         padding: 0,
@@ -40753,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];
   }
   /**
@@ -42525,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];
@@ -44670,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',
@@ -44709,8 +44814,8 @@
     }
     return result;
   };
-  function autocompletion() {
-    return [autocompletion$1({
+  function autocompletion$1() {
+    return [autocompletion$2({
       override: [variables, builtins, completeFromList(snippets)]
     })];
   }
@@ -44887,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));
     }
@@ -44954,7 +45059,7 @@
    */
   FeelEditor.prototype.setVariables = function (variables) {
     this._cmEditor.dispatch({
-      effects: autocompletionConf.reconfigure(variablesFacet.of(variables))
+      effects: autocompletionConf.reconfigure(variablesFacet$1.of(variables))
     });
   };
 
@@ -51924,7 +52029,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,
@@ -52794,7 +52904,7 @@
   }
   const VALIDATION_TYPE_OPTIONS = {
     custom: {
-      value: 'custom',
+      value: undefined,
       label: 'Custom'
     },
     email: {
@@ -52973,10 +53083,10 @@
     return NumberFieldEntry({
       debounce,
       element: field,
-      getValue: getValue('min'),
       id,
       label: 'Minimum',
-      min: 0,
+      step: 'any',
+      getValue: getValue('min'),
       setValue: onChange('min')
     });
   }
@@ -52991,10 +53101,10 @@
     return NumberFieldEntry({
       debounce,
       element: field,
-      getValue: getValue('max'),
       id,
       label: 'Maximum',
-      min: 0,
+      step: 'any',
+      getValue: getValue('max'),
       setValue: onChange('max')
     });
   }
@@ -53006,16 +53116,25 @@
       onChange
     } = props;
     const debounce = useService('debounce');
+    const clearCustomValidation = () => {
+      onChange('minLength')(undefined);
+      onChange('maxLength')(undefined);
+      onChange('pattern')(undefined);
+    };
+    const setValue = validationType => {
+      if (validationType) {
+        clearCustomValidation();
+      }
+      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) {
@@ -55002,7 +55121,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,
@@ -55093,18 +55212,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) {
@@ -55122,15 +55279,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;
@@ -55179,16 +55346,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();
@@ -55232,11 +55395,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({
@@ -55247,7 +55410,7 @@
           parent: paletteContainerRef.current
         },
         propertiesPanel: {
-          parent: !inlinePropertiesPanel && propertiesPanelContainerRef.current
+          parent: propertiesPanelContainerRef.current
         },
         exporter: exporterConfig
       });
@@ -55287,16 +55450,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({
@@ -55314,9 +55486,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, {
@@ -55355,13 +55525,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"
@@ -55376,7 +55546,7 @@
 
   // helpers ///////////////
 
-  function toJSON(obj) {
+  function toString(obj) {
     return JSON.stringify(obj, null, '  ');
   }