formeo 2.2.1 → 2.3.0

package/dist/formeo.es.js

@@ -1,7 +1,7 @@
 
 /**
 formeo - https://formeo.io
-Version: 2.2.0
+Version: 2.2.2
 Author: Draggable https://draggable.io
 */
 
@@ -230,8 +230,207 @@ class I18N {
   }
 }
 const mi18n = new I18N();
+!function() {
+  try {
+    if ("undefined" != typeof document) {
+      var o = document.createElement("style");
+      o.appendChild(document.createTextNode('._3x4ZIcu-{position:absolute;background:#1f2937;color:#fff;padding:.75rem;border-radius:.375rem;max-width:200px;z-index:50;visibility:hidden;opacity:0;transition:opacity .2s;pointer-events:none;left:0;top:0}._3x4ZIcu-.JIt36hCJ{visibility:visible;opacity:1;pointer-events:all}._3x4ZIcu-:before{content:"";position:absolute;width:0;height:0;border:6px solid transparent}._3x4ZIcu-[data-position=top]:before{border-top-color:#1f2937;bottom:-12px;left:50%;transform:translate(-50%)}._3x4ZIcu-[data-position=bottom]:before{border-bottom-color:#1f2937;top:-12px;left:50%;transform:translate(-50%)}._3x4ZIcu-[data-position=left]:before{border-left-color:#1f2937;right:-12px;top:50%;transform:translateY(-50%)}._3x4ZIcu-[data-position=right]:before{border-right-color:#1f2937;left:-12px;top:50%;transform:translateY(-50%)}._3x4ZIcu-[data-position=top-left]:before{border-top-color:#1f2937;bottom:-12px;left:12px;transform:none}._3x4ZIcu-[data-position=top-right]:before{border-top-color:#1f2937;bottom:-12px;right:12px;left:auto;transform:none}._3x4ZIcu-[data-position=bottom-left]:before{border-bottom-color:#1f2937;top:-12px;left:12px;transform:none}._3x4ZIcu-[data-position=bottom-right]:before{border-bottom-color:#1f2937;top:-12px;right:12px;left:auto;transform:none}')), document.head.appendChild(o);
+    }
+  } catch (t) {
+    console.error("vite-plugin-css-injected-by-js", t);
+  }
+}();
+var __defProp2 = Object.defineProperty;
+var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField2 = (obj, key, value) => __defNormalProp2(obj, typeof key !== "symbol" ? key + "" : key, value);
+const tooltip = "_3x4ZIcu-";
+const visible = "JIt36hCJ";
+const styles = {
+  tooltip,
+  visible
+};
+const defaultOptions$1 = {
+  triggerName: "tooltip"
+};
+class SmartTooltip {
+  constructor(options = defaultOptions$1) {
+    __publicField2(this, "triggerName");
+    __publicField2(this, "tooltip");
+    __publicField2(this, "activeTriggerType", null);
+    __publicField2(this, "spacing", 12);
+    __publicField2(this, "handleClick", (e) => {
+      const triggerName = this.triggerName;
+      const trigger = e.target.closest(`[${triggerName}][${triggerName}-type="click"]`);
+      if (trigger) {
+        if (this.isVisible()) {
+          this.hide();
+        } else {
+          const content = trigger.getAttribute(`${triggerName}`);
+          this.show(trigger, content);
+          this.activeTriggerType = "click";
+        }
+      } else {
+        this.hide();
+      }
+    });
+    __publicField2(this, "handleMouseOver", (e) => {
+      const triggerName = this.triggerName;
+      const trigger = e.target.closest(`[${triggerName}]`);
+      if (this.activeTriggerType !== "click" && (trigger == null ? void 0 : trigger.getAttribute(`${triggerName}-type`)) !== "click") {
+        const content = trigger == null ? void 0 : trigger.getAttribute(`${triggerName}`);
+        if (content) {
+          this.show(trigger, content);
+          this.activeTriggerType = "hover";
+        }
+      }
+    });
+    __publicField2(this, "handleMouseOut", (e) => {
+      const triggerName = this.triggerName;
+      const trigger = e.target.closest(`[${triggerName}]`);
+      if (this.activeTriggerType !== "click" && (trigger == null ? void 0 : trigger.getAttribute(`${triggerName}-type`)) !== "click") {
+        this.hide();
+      }
+    });
+    __publicField2(this, "handleResize", () => {
+      if (this.isVisible()) {
+        this.hide();
+      }
+    });
+    __publicField2(this, "handleScroll", () => {
+      if (this.isVisible()) {
+        this.hide();
+      }
+    });
+    this.triggerName = `data-${options.triggerName}`;
+    this.tooltip = document.createElement("div");
+    this.tooltip.className = `d-tooltip ${styles.tooltip}`;
+    document.body.appendChild(this.tooltip);
+    this.setupEventListeners();
+  }
+  setupEventListeners() {
+    document.addEventListener("mouseover", this.handleMouseOver);
+    document.addEventListener("mouseout", this.handleMouseOut);
+    document.addEventListener("click", this.handleClick);
+    window.addEventListener("resize", this.handleResize);
+    window.addEventListener("scroll", this.handleScroll, true);
+  }
+  isVisible() {
+    return this.tooltip.classList.contains(styles.visible);
+  }
+  /**
+   * Calculates the optimal position for the tooltip relative to the trigger element.
+   * It tries to find a position where the tooltip fits within the viewport.
+   * If no position fits, it defaults to the first position in the list.
+   *
+   * @param {HTMLElement} trigger - The HTML element that triggers the tooltip.
+   * @returns {Position} The calculated position for the tooltip.
+   */
+  calculatePosition(trigger) {
+    const triggerRect = trigger.getBoundingClientRect();
+    const tooltipRect = this.tooltip.getBoundingClientRect();
+    const positions = [
+      {
+        name: "top",
+        x: triggerRect.left + (triggerRect.width - tooltipRect.width) / 2,
+        y: triggerRect.top - tooltipRect.height - this.spacing
+      },
+      {
+        name: "bottom",
+        x: triggerRect.left + (triggerRect.width - tooltipRect.width) / 2,
+        y: triggerRect.bottom + this.spacing
+      },
+      {
+        name: "left",
+        x: triggerRect.left - tooltipRect.width - this.spacing,
+        y: triggerRect.top + (triggerRect.height - tooltipRect.height) / 2
+      },
+      {
+        name: "right",
+        x: triggerRect.right + this.spacing,
+        y: triggerRect.top + (triggerRect.height - tooltipRect.height) / 2
+      },
+      // Corner positions
+      {
+        name: "top-left",
+        x: triggerRect.left,
+        y: triggerRect.top - tooltipRect.height - this.spacing
+      },
+      {
+        name: "top-right",
+        x: triggerRect.right - tooltipRect.width,
+        y: triggerRect.top - tooltipRect.height - this.spacing
+      },
+      {
+        name: "bottom-left",
+        x: triggerRect.left,
+        y: triggerRect.bottom + this.spacing
+      },
+      {
+        name: "bottom-right",
+        x: triggerRect.right - tooltipRect.width,
+        y: triggerRect.bottom + this.spacing
+      }
+    ];
+    return positions.find((pos) => this.fitsInViewport(pos, tooltipRect)) || positions[0];
+  }
+  /**
+   * Checks if the tooltip fits within the viewport and is not obstructed by other elements.
+   *
+   * @param pos - The position of the tooltip.
+   * @param tooltipRect - The bounding rectangle of the tooltip.
+   * @returns `true` if the tooltip fits within the viewport and is not obstructed, otherwise `false`.
+   */
+  fitsInViewport(pos, tooltipRect) {
+    const inViewport = pos.x >= 0 && pos.y >= 0 && pos.x + tooltipRect.width <= window.innerWidth && pos.y + tooltipRect.height <= window.innerHeight;
+    if (!inViewport) return false;
+    const points = [
+      [pos.x, pos.y],
+      // Top-left
+      [pos.x + tooltipRect.width, pos.y],
+      // Top-right
+      [pos.x, pos.y + tooltipRect.height],
+      // Bottom-left
+      [pos.x + tooltipRect.width, pos.y + tooltipRect.height],
+      // Bottom-right
+      [pos.x + tooltipRect.width / 2, pos.y + tooltipRect.height / 2]
+      // Center
+    ];
+    const elementsAtPoints = points.flatMap(([x, y]) => Array.from(document.elementsFromPoint(x, y)));
+    const obstructingElements = elementsAtPoints.filter((element) => {
+      if (this.tooltip.contains(element) || // Exclude tooltip and its children
+      element === this.tooltip || element.classList.contains(styles.tooltip) || // Ignore other tooltips
+      getComputedStyle(element).pointerEvents === "none") {
+        return false;
+      }
+    });
+    return obstructingElements.length === 0;
+  }
+  show(trigger, content) {
+    this.tooltip.innerHTML = content ?? "";
+    this.tooltip.classList.add(styles.visible);
+    const position = this.calculatePosition(trigger);
+    this.tooltip.style.left = `${position.x}px`;
+    this.tooltip.style.top = `${position.y}px`;
+    this.tooltip.dataset.position = position.name;
+  }
+  hide() {
+    this.tooltip.classList.remove(styles.visible);
+    this.activeTriggerType = null;
+  }
+  destroy() {
+    document.removeEventListener("mouseover", this.handleMouseOver);
+    document.removeEventListener("mouseout", this.handleMouseOut);
+    document.removeEventListener("click", this.handleClick);
+    window.removeEventListener("resize", this.handleResize);
+    window.removeEventListener("scroll", this.handleScroll, true);
+    this.tooltip.remove();
+  }
+}
+if (window !== void 0) {
+  window.SmartTooltip = SmartTooltip;
+}
 const name$1 = "formeo";
-const version$2 = "2.2.0";
+const version$2 = "2.2.2";
 const type = "module";
 const main = "dist/formeo.cjs.js";
 const module = "dist/formeo.es.js";
@@ -302,15 +501,17 @@ const scripts = {
   "build:demo:watch": "vite build --mode demo --watch",
   "build:icons": "node ./tools/generate-sprite",
   lint: "eslint ./src --ext .js || true",
-  test: "node --experimental-test-snapshots --require ./tools/test-setup.cjs --test --no-warnings src/**/*.test.js",
-  "test:updateSnapshots": "node --experimental-test-snapshots --test-update-snapshots --require ./tools/test-setup.cjs --test --no-warnings src/**/*.test.js",
-  "test:ci": "yarn test --coverage",
+  test: "node --experimental-test-snapshots --require ./tools/test-setup.cjs --test --no-warnings src/**/*.test.{js,mjs}",
+  "test:watch": "node --watch --experimental-test-snapshots --require ./tools/test-setup.cjs --test --no-warnings src/**/*.test.{js,mjs}",
+  "test:updateSnapshots": "node --experimental-test-snapshots --test-update-snapshots --require ./tools/test-setup.cjs --test --no-warnings src/**/*.test.{js,mjs}",
+  "test:ci": "npm test --coverage",
   start: "npm-run-all build:icons dev",
   "semantic-release": "semantic-release --ci --debug",
   "copy:lang": "node ./tools/copy-directory.mjs ./node_modules/formeo-i18n/dist/lang ./src/demo/assets/lang",
   "travis-deploy-once": "travis-deploy-once --pro",
-  prepush: "yarn test",
-  defaults: "webpack-defaults"
+  prepush: "npm test",
+  prepare: "lefthook install",
+  postmerge: "lefthook install"
 };
 const devDependencies = {
   "@biomejs/biome": "^1.9.3",
@@ -334,6 +535,7 @@ const devDependencies = {
 const dependencies = {
   "@draggable/formeo-languages": "^3.1.3",
   "@draggable/i18n": "^1.0.7",
+  "@draggable/tooltip": "^1.2.1",
   lodash: "^4.17.21",
   sortablejs: "^1.15.3"
 };
@@ -1501,11 +1703,17 @@ const uuid = (elem) => {
   }
   return id;
 };
-const merge = (obj1, obj2, opts = /* @__PURE__ */ Object.create(null)) => {
+const merge = (obj1, obj2) => {
   const customizer = (objValue, srcValue) => {
     if (Array.isArray(objValue)) {
-      if (Array.isArray(srcValue)) {
-        return unique(opts.mergeArray ? objValue.concat(srcValue) : srcValue);
+      if (srcValue !== void 0 && srcValue !== null) {
+        return unique(objValue.concat(srcValue));
+      }
+      return srcValue;
+    }
+    if (Array.isArray(srcValue)) {
+      if (objValue !== void 0 && objValue !== null) {
+        return unique(srcValue.concat(objValue));
       }
       return srcValue;
     }
@@ -1570,17 +1778,23 @@ const sessionStorage = Object.create(null, {
 const isAddress = (str) => COMPONENT_INDEX_TYPES.some((indexType) => new RegExp(`^${indexType}.`).test(str));
 const isExternalAddress = (str) => str.startsWith("external");
 const isBoolKey = (key) => /^is|^has/.test(key);
-function throttle$1(callback, limit) {
-  let wait = false;
-  return function() {
-    if (!wait) {
-      callback(...arguments);
-      wait = true;
-      const timeout = setTimeout(() => {
-        wait = false;
-        clearTimeout(timeout);
-      }, limit);
+function throttle$1(callback, limit = ANIMATION_SPEED_SLOW) {
+  let lastCall = 0;
+  return function(...args) {
+    const now = Date.now();
+    if (now - lastCall >= limit) {
+      lastCall = now;
+      callback.apply(this, args);
+    }
+  };
+}
+function debounce(fn, delay = ANIMATION_SPEED_BASE) {
+  let timeoutID;
+  return function(...args) {
+    if (timeoutID) {
+      clearTimeout(timeoutID);
     }
+    timeoutID = setTimeout(() => fn.apply(this, args), delay);
   };
 }
 function identity(value) {
@@ -1803,7 +2017,7 @@ const safeAttrName = (name2) => {
     return sanitizedAttributeNames[name2];
   }
   const attributeName = attributeMap[name2] || name2;
-  const sanitizedAttributeName = attributeName.replace(/^\d/, "").replace(/[^a-zA-Z0-9-:]/g, "");
+  const sanitizedAttributeName = attributeName.replace(/^\d+/, "").replace(/[^a-zA-Z0-9-:]/g, "");
   sanitizedAttributeNames[name2] = sanitizedAttributeName;
   return sanitizedAttributeName;
 };
@@ -1928,12 +2142,30 @@ const defaults$3 = {
   },
   onAdd: () => {
   },
-  onUpdate: (evt) => events.opts.debug && console.log(evt),
-  onUpdateStage: (evt) => events.opts.debug && console.log(evt),
-  onUpdateRow: (evt) => events.opts.debug && console.log(evt),
-  onUpdateColumn: (evt) => events.opts.debug && console.log(evt),
-  onUpdateField: (evt) => events.opts.debug && console.log(evt),
-  onRender: (evt) => events.opts.debug && console.log(evt),
+  onUpdate: (evt) => {
+    var _a;
+    return ((_a = events.opts) == null ? void 0 : _a.debug) && console.log(evt);
+  },
+  onUpdateStage: (evt) => {
+    var _a;
+    return ((_a = events.opts) == null ? void 0 : _a.debug) && console.log(evt);
+  },
+  onUpdateRow: (evt) => {
+    var _a;
+    return ((_a = events.opts) == null ? void 0 : _a.debug) && console.log(evt);
+  },
+  onUpdateColumn: (evt) => {
+    var _a;
+    return ((_a = events.opts) == null ? void 0 : _a.debug) && console.log(evt);
+  },
+  onUpdateField: (evt) => {
+    var _a;
+    return ((_a = events.opts) == null ? void 0 : _a.debug) && console.log(evt);
+  },
+  onRender: (evt) => {
+    var _a;
+    return ((_a = events.opts) == null ? void 0 : _a.debug) && console.log(evt);
+  },
   onSave: (evt) => {
   },
   confirmClearAll: (evt) => {
@@ -1943,9 +2175,10 @@ const defaults$3 = {
   }
 };
 const defaultCustomEvent = ({ src, ...evtData }, type2 = EVENT_FORMEO_UPDATED) => {
+  var _a, _b;
   const evt = new window.CustomEvent(type2, {
     detail: evtData,
-    bubbles: events.opts.debug || events.opts.bubbles
+    bubbles: ((_a = events.opts) == null ? void 0 : _a.debug) || ((_b = events.opts) == null ? void 0 : _b.bubbles)
   });
   evt.data = (src || document).dispatchEvent(evt);
   return evt;
@@ -2034,12 +2267,12 @@ let throttling;
 function onResizeWindow() {
   throttling = throttling || window.requestAnimationFrame(() => {
     throttling = false;
-    Object.values(Columns2.data).forEach((column) => {
+    for (const column of Object.values(Columns2.data)) {
       column.dom.classList.add(NO_TRANSITION_CLASS_NAME);
       Controls2.dom.classList.add(NO_TRANSITION_CLASS_NAME);
       Controls2.panels.nav.refresh();
       column.refreshFieldPanels();
-    });
+    }
   });
 }
 window.addEventListener("resize", onResizeWindow);
@@ -2774,11 +3007,11 @@ function getRect(el, relativeToContainingBlock, relativeToNonStaticParent, undoS
 function isScrolledPast(el, elSide, parentSide) {
   var parent = getParentAutoScrollElement(el, true), elSideVal = getRect(el)[elSide];
   while (parent) {
-    var parentSideVal = getRect(parent)[parentSide], visible = void 0;
+    var parentSideVal = getRect(parent)[parentSide], visible2 = void 0;
     {
-      visible = elSideVal >= parentSideVal;
+      visible2 = elSideVal >= parentSideVal;
     }
-    if (!visible) return parent;
+    if (!visible2) return parent;
     if (parent === getWindowScrollingElement()) break;
     parent = getParentAutoScrollElement(parent, false);
   }
@@ -5018,7 +5251,10 @@ const BASE_NAME = "f-autocomplete";
 const HIGHLIGHT_CLASS_NAME = "highlight-component";
 let lastCache = Date.now();
 let optionsCache;
-const labelCount = (arr, label) => arr.reduce((n, x) => n + (x === label), 0);
+const labelCount = (arr, label) => {
+  const count = arr.reduce((n, x) => n + (x === label), 0);
+  return count > 1 ? `(${count})` : "";
+};
 const getComponentLabel = ({ name: name2, id, ...component }) => {
   const labelPaths = ["config.label", "attrs.id", "meta.id"];
   const label = labelPaths.reduce((acc, cur) => {
@@ -5030,13 +5266,24 @@ const getComponentLabel = ({ name: name2, id, ...component }) => {
   const externalLabel = (...externalAddress) => mi18n.get(externalAddress.join(".")) || toTitleCase(externalAddress.join(" "));
   return label || name2 === "external" && externalLabel(name2, id);
 };
-const componentOptions = (selected) => {
+const makeOption = ({ id, textLabel, htmlLabel, selectedId }) => {
+  const option2 = {
+    value: id,
+    textLabel,
+    htmlLabel
+  };
+  if (id === selectedId) {
+    option2.selected = true;
+  }
+  return option2;
+};
+const componentOptions = (selectedId) => {
   const labels = [];
   const flatList = components.flatList();
   const options = Object.entries(flatList).map(([id, component]) => {
     const label = getComponentLabel(component);
     if (label) {
-      const type2 = {
+      const typeConfig = {
         tag: "span",
         content: ` ${toTitleCase(component.name)}`,
         className: "component-type"
@@ -5046,10 +5293,12 @@ const componentOptions = (selected) => {
       const count = labelCount(labels, labelKey);
       const countConfig = {
         tag: "span",
-        content: count > 1 && `(${count})`,
+        content: count,
         className: "component-label-count"
       };
-      return dom.makeOption([id, [`${label} `, countConfig, type2]], selected);
+      const htmlLabel = [`${label} `, countConfig, typeConfig];
+      const textLabel = [label, count].join(" ").trim();
+      return makeOption({ id, textLabel, htmlLabel, selectedId });
     }
   });
   return options.filter(Boolean);
@@ -5147,9 +5396,9 @@ class Autocomplete {
           const activeOption = this.getActiveOption() || filteredOptions[0];
           this.showList(activeOption);
         }
-        this.hiddenField.value = evt.target.value;
-        this.value = evt.target.value;
-        this.runEvent("onChange", { target: this.hiddenField });
+        const value = evt.target.value.trim();
+        this.hiddenField.value = value;
+        this.value = value;
       }
     };
     this.displayField = dom.create({
@@ -5195,7 +5444,9 @@ class Autocomplete {
       lastCache = now;
     }
     const options = optionsCache || this.generateOptions();
-    options.forEach((option2) => this.list.appendChild(option2));
+    for (const option2 of options) {
+      this.list.appendChild(option2);
+    }
   }
   generateOptions() {
     const options = componentOptions();
@@ -5207,15 +5458,13 @@ class Autocomplete {
       return target;
     };
     optionsCache = options.map((optionData) => {
-      const value = optionData.value;
-      let [label] = optionData.label;
-      label = label.trim();
+      const { value, textLabel, htmlLabel } = optionData;
       const optionConfig = {
         tag: "li",
-        children: optionData.label,
+        children: htmlLabel,
         dataset: {
           value,
-          label
+          label: textLabel
         },
         className: `${BASE_NAME}-list-item`,
         action: {
@@ -5296,15 +5545,16 @@ class Autocomplete {
    * @param {Object} selectedOption - option - 'li' element - to be selected in autocomplete list
    */
   selectOption(selectedOption, list = this.list) {
+    var _a;
     const options = list.querySelectorAll("li");
-    for (let i = 0; i < options.length; i++) {
+    for (const option2 of options) {
       const {
         dataset: { value }
-      } = options[i];
-      options[i].classList.remove("active-option");
+      } = option2;
+      option2.classList.remove("active-option");
       if (value) {
         const component = components.getAddress(value);
-        component.dom && component.dom.classList.remove(HIGHLIGHT_CLASS_NAME);
+        (_a = component.dom) == null ? void 0 : _a.classList.remove(HIGHLIGHT_CLASS_NAME);
       }
     }
     if (selectedOption) {
@@ -5317,20 +5567,21 @@ class Autocomplete {
    */
   removeHighlight() {
     const highlightedComponents = document.getElementsByClassName(HIGHLIGHT_CLASS_NAME);
-    for (let i = 0; i < highlightedComponents.length; i++) {
-      highlightedComponents[i].classList.remove(HIGHLIGHT_CLASS_NAME);
+    for (const component of highlightedComponents) {
+      component.classList.remove(HIGHLIGHT_CLASS_NAME);
     }
   }
   /**
    * Highlight a component that maps to the option
    */
   highlightComponent(option2) {
+    var _a;
     const {
       dataset: { value }
     } = option2;
     if (value) {
       const component = components.getAddress(value);
-      component.dom && component.dom.classList.add(HIGHLIGHT_CLASS_NAME);
+      (_a = component.dom) == null ? void 0 : _a.classList.add(HIGHLIGHT_CLASS_NAME);
     }
   }
   /**
@@ -5359,11 +5610,11 @@ class Autocomplete {
     this.events.push([key, event]);
   }
   runEvent(eventName, evt) {
-    this.events.forEach(([key, event]) => {
+    for (const [key, event] of this.events) {
       if (key === eventName) {
         event(evt);
       }
-    });
+    }
   }
 }
 const getOptionData = (key) => {
@@ -5400,7 +5651,9 @@ const createOptions = (fieldVal, selected) => {
 };
 const addOptions = (select, options) => {
   dom.empty(select);
-  options.forEach((option2) => select.add(option2));
+  for (const option2 of options) {
+    select.add(option2);
+  }
 };
 const inputConfigBase = ({ key, value, type: type2 = "text", checked }) => {
   const config2 = {
@@ -5446,7 +5699,6 @@ const ITEM_INPUT_TYPE_MAP = {
   },
   object: (val) => {
     return Object.entries(val).map(([key, val2]) => {
-      console.log(dom.childType(val2));
       return ITEM_INPUT_TYPE_MAP[dom.childType(val2)](key, val2);
     });
   }
@@ -5463,7 +5715,6 @@ const INPUT_TYPE_ACTION = {
         );
       }
       field.set(dataKey, checked);
-      field.updatePreview();
     }
   }),
   string: (dataKey, field) => ({
@@ -5474,13 +5725,11 @@ const INPUT_TYPE_ACTION = {
   number: (dataKey, field) => ({
     input: ({ target: { value } }) => {
       field.set(dataKey, Number(value));
-      field.updatePreview();
     }
   }),
   array: (dataKey, field) => ({
     change: ({ target: { value } }) => {
       field.set(dataKey, value);
-      field.updatePreview();
     }
   }),
   object: () => ({})
@@ -5590,12 +5839,12 @@ class EditPanelItem {
           }
         ]
       ]);
-      fields2.forEach((field) => {
+      for (const field of fields2) {
         const action = actions2.get(field.className);
         if (action) {
           action(field);
         }
-      });
+      }
     });
     __publicField(this, "conditionInput", (key, val, conditionType, i) => {
       const field = this.field;
@@ -5604,7 +5853,7 @@ class EditPanelItem {
       const dataPath = `${field.name}s.${conditionAddress}.${key}`;
       const createConditionSelect = (key2, propertyValue, i18nKey) => {
         const options = createOptions(i18nKey || key2, propertyValue);
-        const propertyFieldConfig = ITEM_INPUT_TYPE_MAP["array"](`condition.${key2}`);
+        const propertyFieldConfig = ITEM_INPUT_TYPE_MAP.array(`condition.${key2}`);
         propertyFieldConfig.action = {
           change: conditionChangeAction,
           onRender: (elem) => conditionChangeAction({ target: elem })
@@ -5633,7 +5882,7 @@ class EditPanelItem {
         comparison: (value) => createConditionSelect("comparison", value),
         logical: (value) => createConditionSelect("logical", value),
         source: (value, type2 = "source") => {
-          const componentInput = ITEM_INPUT_TYPE_MAP["autocomplete"](`condition.${type2}`, value, conditionType);
+          const componentInput = ITEM_INPUT_TYPE_MAP.autocomplete(`condition.${type2}`, value, conditionType);
           components.setConditionMap(value, field);
           componentInput.addEvent("onChange", (evt) => {
             components.removeConditionMap(components.getAddress(dataPath));
@@ -5646,7 +5895,7 @@ class EditPanelItem {
         targetProperty: (value) => createConditionSelect("targetProperty", value, "field.property"),
         target: (value) => segmentTypes.source(value, "target"),
         value: (value) => {
-          const valueField = ITEM_INPUT_TYPE_MAP["string"]("condition.value", value);
+          const valueField = ITEM_INPUT_TYPE_MAP.string("condition.value", value);
           valueField.action = {
             input: conditionChangeAction
           };
@@ -5727,14 +5976,14 @@ class EditPanelItem {
     const valType = dom.childType(val) || "string";
     const inputTypeConfig = { ...{ config: {}, attrs: {} }, ...ITEM_INPUT_TYPE_MAP[valType](key, val) };
     const dataKey = this.itemKey.replace(/.\d+$/, (index2) => `${index2}.${key}`);
-    const labelKey = dataKey.split(".").filter(Number.isNaN).join(".");
+    const labelKey = dataKey.split(".").filter(Number.isNaN).join(".") || key;
     const [id, name2] = [[...this.itemKey.split("."), key], [key]].map(
       (attrVars) => [this.field.id, ...attrVars].filter(Boolean).join("-")
     );
     inputTypeConfig.config = {
       ...inputTypeConfig.config,
       ...{
-        label: this.panelName !== "options" && labelHelper(labelKey),
+        label: this.panelName !== "options" && (labelHelper(labelKey) || toTitleCase(labelKey)),
         labelAfter: false
       }
     };
@@ -5960,10 +6209,10 @@ class Component extends Data {
         tag: "span",
         className: ["component-tag", `${this.name}-tag`],
         children: [
-          (this.isColumn || this.isField) && dom.icon("component-corner", ["bottom-left"]),
+          (this.isColumn || this.isField) && dom.icon("component-corner", { className: "bottom-left" }),
           dom.icon(`handle-${this.name}`),
           toTitleCase(this.name),
-          (this.isColumn || this.isRow) && dom.icon("component-corner", ["bottom-right"])
+          (this.isColumn || this.isRow) && dom.icon("component-corner", { className: "bottom-right" })
         ].filter(Boolean)
       });
     });
@@ -6094,7 +6343,7 @@ class Component extends Data {
     this.config = components[`${this.name}s`].config;
     merge(this.config, data.config);
     this.dataPath = `${this.name}s.${this.id}.`;
-    this.observer = new MutationObserver(this.mutationHandler);
+    this.observer = new window.MutationObserver(this.mutationHandler);
     this.render = render;
   }
   observe(container) {
@@ -6126,7 +6375,7 @@ class Component extends Data {
     return {
       className: [`${this.name}-actions`, "group-actions"],
       action: {
-        mouseenter: ({ target }) => {
+        mouseenter: () => {
           components.stages.active.dom.classList.add(`active-hover-${this.name}`);
           this.dom.classList.add(...hoverClassnames);
         },
@@ -6473,23 +6722,20 @@ class Field extends Component {
     /**
      * Updates the conditions panel when linked field data changes
      */
-    __publicField(this, "updateConditionsPanel", () => {
-      const updateConditionsTimeout = setTimeout(() => {
-        const newConditionsPanel = this.editPanels.find(({ name: name2 }) => name2 === "conditions");
-        if (!newConditionsPanel) {
-          return null;
-        }
-        const newProps = newConditionsPanel.createProps();
-        const currentConditionsProps = this.dom.querySelector(".field-edit-conditions");
-        currentConditionsProps.parentElement.replaceChild(newProps, currentConditionsProps);
-        clearTimeout(updateConditionsTimeout);
-      }, ANIMATION_SPEED_BASE);
-    });
+    __publicField(this, "updateConditionsPanel", throttle$1(() => {
+      const newConditionsPanel = this.editPanels.find(({ name: name2 }) => name2 === "conditions");
+      if (!newConditionsPanel) {
+        return null;
+      }
+      const newProps = newConditionsPanel.createProps();
+      const currentConditionsProps = this.dom.querySelector(".field-edit-conditions");
+      currentConditionsProps.parentElement.replaceChild(newProps, currentConditionsProps);
+    }, ANIMATION_SPEED_BASE));
     /**
      * Updates a field's preview
      * @return {Object} fresh preview
      */
-    __publicField(this, "updatePreview", throttle$1(() => {
+    __publicField(this, "updatePreview", () => {
       if (!this.preview.parentElement) {
         return null;
       }
@@ -6497,7 +6743,44 @@ class Field extends Component {
       const newPreview = dom.create(this.fieldPreview(), true);
       this.preview.parentElement.replaceChild(newPreview, this.preview);
       this.preview = newPreview;
-    }, ANIMATION_SPEED_BASE));
+    });
+    __publicField(this, "updateEditPanels", () => {
+      this.editPanels = [];
+      const editable = ["object", "array"];
+      const panelOrder = unique([...this.config.panels.order, ...Object.keys(this.data)]);
+      const noPanels = ["config", "meta", "action", "events", ...this.config.panels.disabled];
+      const allowedPanels = panelOrder.filter((panelName) => !noPanels.includes(panelName));
+      for (const panelName of allowedPanels) {
+        const panelData = this.get(panelName);
+        const propType = dom.childType(panelData);
+        if (editable.includes(propType)) {
+          const editPanel = new EditPanel(panelData, panelName, this);
+          this.editPanels.push(editPanel);
+        }
+      }
+      const panelsData = {
+        panels: this.editPanels.map(({ panelConfig }) => panelConfig),
+        id: this.id,
+        displayType: "auto"
+      };
+      this.panels = new Panels(panelsData);
+      if (this.dom) {
+        this.dom.querySelector(".panel-nav").replaceWith(this.panels.panelNav);
+        this.dom.querySelector(".panels").replaceWith(this.panels.panelsWrap);
+      }
+    });
+    __publicField(this, "toggleCheckedOptions", (optionIndex, type2) => {
+      const updatedOptionData = this.get("options").map((option2, index2) => {
+        const isCurrentIndex = index2 === optionIndex;
+        if (type2 === "radio") {
+          option2.selected = isCurrentIndex;
+        } else {
+          option2.checked = isCurrentIndex ? !option2.checked : option2.checked;
+        }
+        return option2;
+      });
+      this.set("options", updatedOptionData);
+    });
     /**
      * Checks if attribute is allowed to be edited
      * @param  {String}  propName
@@ -6524,6 +6807,7 @@ class Field extends Component {
       const lockedAttrs = propKind.locked.concat(this.get(`config.locked${toTitleCase(kind)}`));
       return lockedAttrs.includes(propName);
     });
+    this.debouncedUpdateEditPanels = debounce(this.updateEditPanels);
     this.label = dom.create(this.labelConfig);
     this.preview = dom.create({});
     this.editPanels = [];
@@ -6642,65 +6926,42 @@ class Field extends Component {
    * @return {Object} fieldEdit element config
    */
   get fieldEdit() {
-    this.editPanels = [];
-    const editable = ["object", "array"];
-    const noPanels = ["config", "meta", "action", "events", ...this.config.panels.disabled];
-    const panelOrder = unique([...this.config.panels.order, ...Object.keys(this.data)]);
-    const allowedPanels = panelOrder.filter((panelName) => !noPanels.includes(panelName));
     const fieldEdit = {
       className: ["field-edit", "slide-toggle", "formeo-panels-wrap"]
     };
-    for (const panelName of allowedPanels) {
-      const panelData = this.get(panelName);
-      const propType = dom.childType(panelData);
-      if (editable.includes(propType)) {
-        const editPanel = new EditPanel(panelData, panelName, this);
-        this.editPanels.push(editPanel);
-      }
-    }
-    const panelsData = {
-      panels: this.editPanels.map(({ panelConfig }) => panelConfig),
-      id: this.id,
-      displayType: "auto"
-    };
+    this.updateEditPanels();
     const editPanelLength = this.editPanels.length;
     if (editPanelLength) {
-      this.panels = new Panels(panelsData);
       fieldEdit.className.push(`panel-count-${editPanelLength}`);
       fieldEdit.content = [this.panels.panelNav, this.panels.panelsWrap];
       this.panelNav = this.panels.nav;
       this.resizePanelWrap = this.panels.nav.refresh;
-      fieldEdit.action = {
-        onRender: () => {
+    }
+    fieldEdit.action = {
+      onRender: () => {
+        if (editPanelLength === 0) {
+          const field = this.dom;
+          const editToggle = field.querySelector(".item-edit-toggle");
+          const fieldActions = field.querySelector(".field-actions");
+          const actionButtons = fieldActions.getElementsByTagName("button");
+          fieldActions.style.maxWidth = `${actionButtons.length * actionButtons[0].clientWidth}px`;
+          dom.remove(editToggle);
+        } else {
           this.resizePanelWrap();
-          if (!editPanelLength) {
-            const field = this.dom;
-            const editToggle = field.querySelector(".item-edit-toggle");
-            const fieldActions = field.querySelector(".field-actions");
-            const actionButtons = fieldActions.getElementsByTagName("button");
-            fieldActions.style.maxWidth = `${actionButtons.length * actionButtons[0].clientWidth}px`;
-            dom.remove(editToggle);
-          }
         }
-      };
-    }
-    return fieldEdit;
+      }
+    };
+    return dom.create(fieldEdit);
   }
   get defaultPreviewActions() {
     return {
       change: (evt) => {
         const { target } = evt;
-        const { checked, type: type2 } = target;
+        const { type: type2 } = target;
         if (["checkbox", "radio"].includes(type2)) {
           const optionIndex = +target.id.split("-").pop();
-          if (type2 === "radio") {
-            this.set(
-              "options",
-              this.get("options").map((option2) => ({ ...option2, selected: false }))
-            );
-          }
-          const checkType = type2 === "checkbox" ? "checked" : "selected";
-          this.set(`options.${optionIndex}.${checkType}`, checked);
+          this.toggleCheckedOptions(optionIndex, type2);
+          this.debouncedUpdateEditPanels();
         }
       },
       click: (evt) => {
@@ -6709,10 +6970,20 @@ class Field extends Component {
         }
       },
       input: (evt) => {
-        if (["input", "meter", "progress", "button"].includes(this.data.tag)) {
+        if (["input", "meter", "progress", "button"].includes(evt.target.tagName.toLowerCase())) {
           super.set("attrs.value", evt.target.value);
+          return this.debouncedUpdateEditPanels();
         }
         if (evt.target.contentEditable) {
+          const parentClassList = evt.target.parentElement.classList;
+          const isOption = parentClassList.contains("f-checkbox") || parentClassList.contains("f-radio");
+          if (isOption) {
+            const option2 = evt.target.parentElement;
+            const optionWrap = option2.parentElement;
+            const optionIndex = indexOfNode(option2, optionWrap);
+            super.set(`options[${optionIndex}].label`, evt.target.innerHTML);
+            return this.debouncedUpdateEditPanels();
+          }
           super.set("content", evt.target.innerHTML);
         }
       }
@@ -7528,7 +7799,7 @@ let Controls$1 = class Controls {
     return controlConfig;
   }
   get(controlId) {
-    return this.data.get(controlId);
+    return clone$1(this.data.get(controlId));
   }
   /**
    * Generate the DOM config for form actions like settings, save and clear
@@ -7977,13 +8248,25 @@ class Row extends Component {
         description: mi18n.get("row.makeInputGroupDesc")
       }
     };
+    const rowTitleTooltip = {
+      tag: "span",
+      content: " ⓘ",
+      dataset: {
+        tooltip: "Row title will be used as the legend for the fieldset"
+      }
+    };
     const legendInput = {
       tag: "input",
       attrs: {
         type: "text",
         ariaLabel: "Legend for fieldset",
         value: this.get("config.legend"),
-        placeholder: "Legend"
+        placeholder: "Title"
+      },
+      config: {
+        label: {
+          children: ["Row Title", rowTitleTooltip]
+        }
       },
       action: {
         input: ({ target: { value } }) => this.set("config.legend", value)
@@ -8309,7 +8592,6 @@ class Column extends Component {
       this.dom.style.width = width;
       return this.set("config.width", width);
     });
-    const _this = this;
     const children = this.createChildWrap();
     this.dom = dom.create({
       tag: "li",
@@ -8330,7 +8612,7 @@ class Column extends Component {
     events.columnResized = new window.CustomEvent("columnResized", {
       detail: {
         column: this.dom,
-        instance: _this
+        instance: this
       }
     });
     Sortable.create(children, {
@@ -8563,12 +8845,13 @@ const iconFontTemplates = {
   },
   fontello: (icon) => `<i class="${iconPrefix}${icon}">${icon}</i>`
 };
+const inputTags = /* @__PURE__ */ new Set(["input", "textarea", "select"]);
 class DOM {
   /**
    * Set defaults, store references to key elements
    * like stages, rows, columns etc
    */
-  constructor() {
+  constructor(options = /* @__PURE__ */ Object.create(null)) {
     /**
      * Wraps dom.create to modify data
      * Used when rendering components in form- not editor
@@ -8584,15 +8867,15 @@ class DOM {
      * @return {Object}            DOM Object
      */
     __publicField(this, "create", (elemArg, isPreview = false) => {
-      let elem = elemArg;
-      if (!elem) {
+      if (!elemArg) {
         return;
       }
-      elem = this.processTagName(elem);
       const _this = this;
+      const processed = ["children", "content"];
+      const { className, options, dataset, ...elem } = this.processTagName(elemArg);
+      processed.push("tag");
       let childType;
       const { tag } = elem;
-      const processed = ["children", "content"];
       let i;
       const wrap = {
         attrs: {},
@@ -8628,36 +8911,26 @@ class DOM {
         undefined: () => null,
         boolean: () => null
       };
-      processed.push("tag");
-      if (elem.className) {
-        const { className } = elem;
-        elem.attrs = Object.assign({}, elem.attrs, { className });
-        delete elem.className;
-      }
-      if (elem.options) {
-        let { options } = elem;
-        options = this.processOptions(options, elem, isPreview);
+      if (className) {
+        elem.attrs = merge(elem.attrs, { className });
+      }
+      if (options) {
+        const processedOptions = this.processOptions(options, elem, isPreview);
         if (this.holdsContent(element) && tag !== "button") {
-          appendChildren.array.call(this, options);
-          delete elem.content;
+          appendChildren.array.call(this, processedOptions);
+          elem.content = void 0;
         } else {
-          helpers.forEach(options, (option2) => {
+          helpers.forEach(processedOptions, (option2) => {
             wrap.children.push(_this.create(option2, isPreview));
           });
           if (elem.attrs.className) {
             wrap.className = elem.attrs.className;
           }
-          wrap.config = Object.assign({}, elem.config);
+          wrap.config = { ...elem.config };
           return this.create(wrap, isPreview);
         }
         processed.push("options");
       }
-      if (element.tagName === "OPTION") {
-        const timeout = setTimeout(() => {
-          element.selected = false;
-          clearTimeout(timeout);
-        }, 0);
-      }
       if (elem.attrs) {
         _this.processAttrs(elem, element, isPreview);
         processed.push("attrs");
@@ -8666,7 +8939,10 @@ class DOM {
         if (elem.config.label && (elem.config.label && tag !== "button" || ["radio", "checkbox"].includes(helpers.get(elem, "attrs.type"))) && !isPreview) {
           const label = _this.label(elem);
           if (!elem.config.hideLabel) {
-            const wrapContent = [..._this.labelAfter(elem) ? [element, label] : [label, element]];
+            const wrapContent = [label, element];
+            if (_this.labelAfter(elem)) {
+              wrapContent.reverse();
+            }
             wrap.children.push(wrapContent);
           }
         }
@@ -8680,10 +8956,10 @@ class DOM {
         }
         appendChildren[childType].call(this, children);
       }
-      if (elem.dataset) {
-        for (const data in elem.dataset) {
-          if (Object.hasOwn(elem.dataset, data)) {
-            element.dataset[data] = typeof elem.dataset[data] === "function" ? elem.dataset[data]() : elem.dataset[data];
+      if (dataset) {
+        for (const data in dataset) {
+          if (Object.hasOwn(dataset, data)) {
+            element.dataset[data] = typeof dataset[data] === "function" ? dataset[data]() : dataset[data];
           }
         }
         processed.push("dataset");
@@ -8754,16 +9030,6 @@ class DOM {
         }
       };
     });
-    __publicField(this, "makeOption", ([value, label], selected, i18nKey) => {
-      const option2 = {
-        value,
-        label: mi18n.get(`${i18nKey}.${label}`) || label
-      };
-      if (value === selected) {
-        option2.selected = true;
-      }
-      return option2;
-    });
     __publicField(this, "requiredMark", () => ({
       tag: "span",
       className: "text-error",
@@ -8782,9 +9048,8 @@ class DOM {
       if (!children.length) {
         if (!this.isStage(parent)) {
           return this.removeEmpty(parent);
-        } else {
-          this.emptyClass(parent);
         }
+        return this.emptyClass(parent);
       }
     });
     __publicField(this, "btnTemplate", ({ title = "", ...rest }) => ({
@@ -8801,29 +9066,23 @@ class DOM {
     __publicField(this, "isColumn", (node) => componentType(node) === COLUMN_CLASSNAME);
     __publicField(this, "isField", (node) => componentType(node) === FIELD_CLASSNAME);
     __publicField(this, "asComponent", (elem) => components[`${componentType(elem)}s`].get(elem.id));
-    this.options = /* @__PURE__ */ Object.create(null);
-    this.styleSheet = (() => {
-      const style = document.createElement("style");
-      style.setAttribute("media", "screen");
-      style.setAttribute("type", "text/css");
-      style.appendChild(document.createTextNode(""));
-      document.head.appendChild(style);
-      return style.sheet;
-    })();
+    this.options = options;
   }
   set setOptions(options) {
-    this.options = merge(Object.assign({}, this.options, options));
+    this.options = merge(this.options, options);
   }
   /**
    * Ensure elements have proper tagName
    * @param  {Object|String} elem
    * @return {Object} valid element object
    */
-  processTagName(elem) {
+  processTagName(elemArg) {
+    let elem = elemArg;
     let tagName;
     if (typeof elem === "string") {
       tagName = elem;
       elem = { tag: tagName };
+      return elem;
     }
     if (elem.attrs) {
       const { tag, ...restAttrs } = elem.attrs;
@@ -8866,7 +9125,7 @@ class DOM {
     const createSvgIconConfig = (symbolId) => ({
       tag: "svg",
       attrs: {
-        className: `svg-icon ${symbolId}`
+        className: ["svg-icon", symbolId]
       },
       children: [
         {
@@ -8880,9 +9139,10 @@ class DOM {
     });
     this.iconSymbols = Array.from(iconSymbolNodes).reduce((acc, symbol) => {
       const name2 = symbol.id.replace(iconPrefix, "");
-      acc[name2] = dom.create(createSvgIconConfig(symbol.id));
+      acc[name2] = createSvgIconConfig(symbol.id);
       return acc;
     }, {});
+    this.cachedIcons = {};
     return this.iconSymbols;
   }
   /**
@@ -8891,20 +9151,29 @@ class DOM {
    *  - we don't need the perks of having icons be DOM objects at this stage
    *  - it forces the icon to be appended using innerHTML which helps svg render
    * @param  {String} name - icon name
+   * @param  {Function} config - dom element config object
    * @return {String} icon markup
    */
-  icon(name2 = null, classNames = []) {
-    var _a;
+  icon(name2, config2) {
+    var _a, _b;
     if (!name2) {
       return;
     }
-    const icon = this.icons[name2];
-    if (icon) {
-      const iconClone = icon.cloneNode(true);
-      iconClone.classList.add(...classNames);
-      return iconClone.outerHTML;
+    const cacheKey = `${name2}?${new URLSearchParams(config2).toString()}`;
+    if ((_a = this.cachedIcons) == null ? void 0 : _a[cacheKey]) {
+      return this.cachedIcons[cacheKey];
+    }
+    const iconConfig = this.icons[name2];
+    if (iconConfig) {
+      if (config2) {
+        const mergedConfig = merge(iconConfig, config2);
+        this.cachedIcons[cacheKey] = dom.create(mergedConfig).outerHTML;
+        return this.cachedIcons[cacheKey];
+      }
+      this.cachedIcons[cacheKey] = dom.create(iconConfig).outerHTML;
+      return this.cachedIcons[cacheKey];
     }
-    return ((_a = iconFontTemplates[dom.options.iconFont]) == null ? void 0 : _a.call(iconFontTemplates, name2)) || name2;
+    return ((_b = iconFontTemplates[dom.options.iconFont]) == null ? void 0 : _b.call(iconFontTemplates, name2)) || name2;
   }
   /**
    * JS Object to DOM attributes
@@ -8915,34 +9184,29 @@ class DOM {
    */
   processAttrs(elem, element, isPreview) {
     const { attrs = {} } = elem;
-    if (!isPreview) {
-      if (!attrs.name && this.isInput(elem.tag)) {
-        element.setAttribute("name", uuid(elem));
-      }
+    if (!isPreview && !attrs.name && this.isInput(elem.tag)) {
+      element.setAttribute("name", uuid(elem));
     }
     for (const attr of Object.keys(attrs)) {
       const name2 = helpers.safeAttrName(attr);
-      let value = attrs[attr] || "";
-      if (Array.isArray(value)) {
-        if (typeof value[0] === "object") {
-          const selected = value.filter((t) => t.selected === true);
-          value = selected.length ? selected[0].value : value[0].value;
-        } else {
-          value = value.join(" ");
-        }
-      }
+      const value = this.processAttrValue(attrs[attr]);
       if (value) {
-        if (element.tagName === "OPTION" && name2 === "selected") {
-          const timeout = setTimeout(() => {
-            element.setAttribute(name2, value);
-            clearTimeout(timeout);
-          }, 0);
-        } else {
-          element.setAttribute(name2, value);
-        }
+        element.setAttribute(name2, value === true ? "" : value);
       }
     }
   }
+  processAttrValue(valueArg) {
+    let value = valueArg || "";
+    if (Array.isArray(value)) {
+      if (typeof value[0] === "object") {
+        const selected = value.filter((t) => t.selected === true);
+        value = selected.length ? selected[0].value : value[0].value;
+      } else {
+        value = value.join(" ");
+      }
+    }
+    return value;
+  }
   /**
    * Extend Array of option config objects
    * @param  {Array} options
@@ -9049,11 +9313,12 @@ class DOM {
    * @param  {String|Object} tag tagName or DOM element
    * @return {Boolean} isInput
    */
-  isInput(tag) {
+  isInput(tagArg) {
+    let tag = tagArg;
     if (typeof tag !== "string") {
       tag = tag.tagName;
     }
-    return ["input", "textarea", "select"].indexOf(tag) !== -1;
+    return inputTags.has(tag);
   }
   /**
    * Converts escaped HTML into usable HTML
@@ -9101,7 +9366,7 @@ class DOM {
       action: {}
     };
     if (fMap) {
-      delete fieldLabel.attrs.for;
+      fieldLabel.attrs.for = void 0;
       fieldLabel.attrs.contenteditable = true;
       fieldLabel.fMap = fMap;
     }
@@ -9257,7 +9522,8 @@ class DOM {
    * @param  {Object} elem DOM element
    * @param  {Boolean} state
    */
-  toggleSortable(elem, state) {
+  toggleSortable(elem, stateArg) {
+    let state = stateArg;
     const fType = componentType(elem);
     if (!fType) {
       return;
@@ -9335,6 +9601,7 @@ let FormeoEditor$1 = class FormeoEditor {
     this.dom = dom;
     events.init({ debug, ...events$1 });
     actions.init({ debug, sessionStorage: opts.sessionStorage, ...actions$1 });
+    this.tooltip = new SmartTooltip();
     document.addEventListener("DOMContentLoaded", this.loadResources.bind(this));
   }
   get formData() {