@mieweb/forms-editor 2.1.3 → 2.1.4-prerelease.0

package/README.md

@@ -1,46 +1,46 @@
-# @mieweb/forms-editor
-
-Visual questionnaire builder with three editing modes: Build, Code, and Preview.
-
-## Installation
-
-```bash
-npm install @mieweb/forms-editor
-```
-
-**Requirements:** React 18+ and React DOM 18+
-
-## Quick Start
-
-```jsx
-import { QuestionnaireEditor } from '@mieweb/forms-editor';
-
-function App() {
-  const [formData, setFormData] = React.useState({
-    schemaType: 'mieforms-v1.0',
-    fields: []
-  });
-
-  return (
-    <QuestionnaireEditor 
-      initialFormData={formData} 
-      onChange={setFormData} 
-    />
-  );
-}
-```
-
-## Documentation
-
-**[Full Documentation](https://questionnaire-builder.opensource.mieweb.org/docs/editor/overview)**
-
-For detailed information, see:
-- [Quick Start Guide](https://questionnaire-builder.opensource.mieweb.org/docs/getting-started/quickstart-editor)
-- [Props Reference](https://questionnaire-builder.opensource.mieweb.org/docs/editor/props)
-- [Editor Modes](https://questionnaire-builder.opensource.mieweb.org/docs/editor/modes)
-- [Field Editing](https://questionnaire-builder.opensource.mieweb.org/docs/editor/field-editing)
-- [Import/Export](https://questionnaire-builder.opensource.mieweb.org/docs/editor/importing)
-
-## License
-
-MIT
+# @mieweb/forms-editor
+
+Visual questionnaire builder with three editing modes: Build, Code, and Preview.
+
+## Installation
+
+```bash
+npm install @mieweb/forms-editor
+```
+
+**Requirements:** React 18+ and React DOM 18+
+
+## Quick Start
+
+```jsx
+import { QuestionnaireEditor } from '@mieweb/forms-editor';
+
+function App() {
+  const [formData, setFormData] = React.useState({
+    schemaType: 'mieforms-v1.0',
+    fields: []
+  });
+
+  return (
+    <QuestionnaireEditor 
+      initialFormData={formData} 
+      onChange={setFormData} 
+    />
+  );
+}
+```
+
+## Documentation
+
+**[Full Documentation](https://questionnaire-builder.opensource.mieweb.org/docs/editor/overview)**
+
+For detailed information, see:
+- [Quick Start Guide](https://questionnaire-builder.opensource.mieweb.org/docs/getting-started/quickstart-editor)
+- [Props Reference](https://questionnaire-builder.opensource.mieweb.org/docs/editor/props)
+- [Editor Modes](https://questionnaire-builder.opensource.mieweb.org/docs/editor/modes)
+- [Field Editing](https://questionnaire-builder.opensource.mieweb.org/docs/editor/field-editing)
+- [Import/Export](https://questionnaire-builder.opensource.mieweb.org/docs/editor/importing)
+
+## License
+
+MIT

package/dist/index.js

@@ -10,7 +10,7 @@
   }
   window.__QUESTIONNAIRE_EDITOR_CSS_INJECTED = true;
 })();
-import c, { useCallback as ue, useMemo as Ee, memo as Oe, useState as fe, useRef as V, useEffect as J } from "react";
+import m, { useCallback as ue, useMemo as Ee, memo as Oe, useState as fe, useRef as V, useEffect as J } from "react";
 import { useFormStore as Y, useFormDefinition as Ue, useAlert as ze, useUIApi as B, VEDITOR_ICON as ti, CODE_ICON as ri, PICTURE_ICON as ni, UPLOAD_ICON as oi, DOWNLOAD_ICON as si, parseAndDetect as pe, adaptSchema as he, fieldTypes as X, TOOLS_ICON as ai, X_ICON as li, PAPERCLIP_ICON as mi, MATRIX_ICON as ci, RANKING_ICON as di, SELECTINPUT_ICON as ui, FOLDERS_ICON as fi, TEXTINPUT_ICON as pi, useInstanceId as K, CustomCheckbox as hi, TRASHCANTWO_ICON as oe, useFormApi as Ne, FormStoreContext as Te, ARROWDOWN_ICON as xi, NUMERIC_EXPRESSION_FORMATS as bi, EDIT_ICON as gi, EYEEDIT_ICON as vi, useVisibleFields as yi, useUIStore as ji, getFieldComponent as wi, MIE_FORMS_SCHEMA_TYPE as ye, createFormStore as Ci, createUIStore as Ei, UIStoreContext as Ni, AlertProvider as Oi } from "@mieweb/forms-engine";
 import ee from "js-yaml";
 import { useStore as Ti } from "zustand";
@@ -21,8 +21,8 @@ function Ii() {
   Ie = 1;
   var e = /* @__PURE__ */ Symbol.for("react.transitional.element"), t = /* @__PURE__ */ Symbol.for("react.fragment");
   function r(n, o, a) {
-    var m = null;
-    if (a !== void 0 && (m = "" + a), o.key !== void 0 && (m = "" + o.key), "key" in o) {
+    var c = null;
+    if (a !== void 0 && (c = "" + a), o.key !== void 0 && (c = "" + o.key), "key" in o) {
       a = {};
       for (var l in o)
         l !== "key" && (a[l] = o[l]);
@@ -30,7 +30,7 @@ function Ii() {
     return o = a.ref, {
       $$typeof: e,
       type: n,
-      key: m,
+      key: c,
       ref: o !== void 0 ? o : null,
       props: a
     };
@@ -122,7 +122,7 @@ function Si() {
     function a() {
       return Error("react-stack-top-frame");
     }
-    function m(s) {
+    function c(s) {
       if (f.call(s, "key")) {
         var C = Object.getOwnPropertyDescriptor(s, "key").get;
         if (C && C.isReactWarning) return !1;
@@ -211,7 +211,7 @@ React keys must be passed directly to JSX without using spread:
           U
         ), z[U + j] = !0);
       }
-      if (U = null, $ !== void 0 && (r($), U = "" + $), m(C) && (r(C.key), U = "" + C.key), "key" in C) {
+      if (U = null, $ !== void 0 && (r($), U = "" + $), c(C) && (r(C.key), U = "" + C.key), "key" in C) {
         $ = {};
         for (var ve in C)
           ve !== "key" && ($[ve] = C[ve]);
@@ -234,7 +234,7 @@ React keys must be passed directly to JSX without using spread:
     function N(s) {
       return typeof s == "object" && s !== null && s.$$typeof === W;
     }
-    var M = c, W = /* @__PURE__ */ Symbol.for("react.transitional.element"), F = /* @__PURE__ */ Symbol.for("react.portal"), E = /* @__PURE__ */ Symbol.for("react.fragment"), T = /* @__PURE__ */ Symbol.for("react.strict_mode"), y = /* @__PURE__ */ Symbol.for("react.profiler"), R = /* @__PURE__ */ Symbol.for("react.consumer"), A = /* @__PURE__ */ Symbol.for("react.context"), b = /* @__PURE__ */ Symbol.for("react.forward_ref"), O = /* @__PURE__ */ Symbol.for("react.suspense"), x = /* @__PURE__ */ Symbol.for("react.suspense_list"), q = /* @__PURE__ */ Symbol.for("react.memo"), P = /* @__PURE__ */ Symbol.for("react.lazy"), I = /* @__PURE__ */ Symbol.for("react.activity"), w = /* @__PURE__ */ Symbol.for("react.client.reference"), S = M.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, f = Object.prototype.hasOwnProperty, g = Array.isArray, v = console.createTask ? console.createTask : function() {
+    var M = m, W = /* @__PURE__ */ Symbol.for("react.transitional.element"), F = /* @__PURE__ */ Symbol.for("react.portal"), E = /* @__PURE__ */ Symbol.for("react.fragment"), T = /* @__PURE__ */ Symbol.for("react.strict_mode"), y = /* @__PURE__ */ Symbol.for("react.profiler"), R = /* @__PURE__ */ Symbol.for("react.consumer"), A = /* @__PURE__ */ Symbol.for("react.context"), b = /* @__PURE__ */ Symbol.for("react.forward_ref"), O = /* @__PURE__ */ Symbol.for("react.suspense"), x = /* @__PURE__ */ Symbol.for("react.suspense_list"), q = /* @__PURE__ */ Symbol.for("react.memo"), P = /* @__PURE__ */ Symbol.for("react.lazy"), I = /* @__PURE__ */ Symbol.for("react.activity"), w = /* @__PURE__ */ Symbol.for("react.client.reference"), S = M.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, f = Object.prototype.hasOwnProperty, g = Array.isArray, v = console.createTask ? console.createTask : function() {
       return null;
     };
     M = {
@@ -275,11 +275,11 @@ function ki() {
 }
 var i = ki();
 function Ri() {
-  const [e, t] = c.useState(!1), [r, n] = c.useState(null), o = Y((y) => y.replaceAll), a = Ue(), { showAlert: m } = ze(), l = B(), d = l.state.isPreview, u = l.state.isCodeEditor ?? !1, p = l.state.codeEditorHasError ?? !1, h = (y) => {
+  const [e, t] = m.useState(!1), [r, n] = m.useState(null), o = Y((y) => y.replaceAll), a = Ue(), { showAlert: c } = ze(), l = B(), d = l.state.isPreview, u = l.state.isCodeEditor ?? !1, p = l.state.codeEditorHasError ?? !1, h = (y) => {
     try {
       const R = String(y).replace(/^\uFEFF/, "").trim(), { data: A, schemaType: b } = pe(R);
       if (b !== "mieforms" && b !== "surveyjs") {
-        m(
+        c(
           `Expected: MIE Forms or SurveyJS
 Detected: ${b}`,
           { title: "Unsupported Schema Format" }
@@ -288,7 +288,7 @@ Detected: ${b}`,
       }
       n({ data: A, detectedSchemaType: b }), t(!0);
     } catch (R) {
-      m(
+      c(
         R?.message || "Invalid file format",
         { title: "Failed to Parse File" }
       );
@@ -311,7 +311,7 @@ Detected: ${b}`,
         }
         if (o(O), l.selectedFieldId.clear(), l.preview.set(!1), y === "surveyjs" && A.conversionReport) {
           const x = A.conversionReport, q = x.unsupportedFields?.length || 0;
-          m(
+          c(
             `Format: SurveyJS → MIE Forms
 
 Converted: ${x.convertedFields || 0} field(s)
@@ -319,14 +319,14 @@ Unsupported: ${q} field(s)${q > 0 ? " ⚠️" : ""}`,
             { title: "✅ Import Successful" }
           );
         } else
-          m(
+          c(
             `Format: ${y === "surveyjs" ? "SurveyJS" : "MIE Forms"}
 Loaded ${b.length} field(s)`,
             { title: "✅ Import Successful" }
           );
         t(!1), n(null);
       } catch (R) {
-        m(
+        c(
           R?.message || "Invalid format",
           { title: "Import Failed" }
         ), t(!1), n(null);
@@ -467,21 +467,20 @@ const Ai = (e) => {
       return null;
   }
 }, $i = ({ isPreview: e = !1 }) => {
-  if (e) return null;
   const t = Y((u) => u.addField), r = B(), n = Y(
     ue(
       (u) => r.selectedFieldId.value ? u.byId[r.selectedFieldId.value] : null,
       [r.selectedFieldId.value]
     )
-  ), o = n?.fieldType === "section", a = n?.title || "Section", m = c.useCallback(() => {
+  ), o = n?.fieldType === "section", a = n?.title || "Section", c = m.useCallback(() => {
     r.selectedFieldId.set(null);
   }, [r.selectedFieldId]);
-  c.useEffect(() => {
+  m.useEffect(() => {
     const u = (p) => {
-      p.key === "Escape" && (p.preventDefault(), p.stopPropagation(), m());
+      p.key === "Escape" && (p.preventDefault(), p.stopPropagation(), c());
     };
     return window.addEventListener("keydown", u), () => window.removeEventListener("keydown", u);
-  }, [m]);
+  }, [c]);
   const l = Ee(() => {
     const u = {};
     return Object.entries(X).filter(([p]) => p !== "unsupported").forEach(([p, h]) => {
@@ -501,7 +500,7 @@ const Ai = (e) => {
       });
     }), u;
   }, [l, t, o, n?.id]);
-  return /* @__PURE__ */ i.jsx(
+  return e ? null : /* @__PURE__ */ i.jsx(
     "div",
     {
       className: " mie:border mie:border-mieborder mie:rounded-lg mie:bg-miesurface mie:overflow-y-auto mie:custom-scrollbar mie:max-h-[calc(100svh-24rem)] mie:lg:max-h-[calc(100dvh-20rem)]",
@@ -515,7 +514,7 @@ const Ai = (e) => {
           o && /* @__PURE__ */ i.jsx(
             "button",
             {
-              onClick: m,
+              onClick: c,
               className: "mie:bg-transparent mie:text-mietextmuted mie:hover:text-miedanger mie:hover:bg-miedanger/10 mie:p-1 mie:rounded mie:transition-colors mie:shrink-0",
               title: "Unselect section",
               children: /* @__PURE__ */ i.jsx(li, { className: "mie:w-5 mie:h-5" })
@@ -551,7 +550,7 @@ const Ai = (e) => {
       ] })
     }
   );
-}, Re = c.memo($i, (e, t) => e.isPreview === t.isPreview);
+}, Re = m.memo($i, (e, t) => e.isPreview === t.isPreview);
 function Ve({
   id: e = "",
   label: t = "ID",
@@ -560,11 +559,11 @@ function Ve({
   placeholder: o = "Enter unique ID…",
   className: a = ""
 }) {
-  const m = K(), [l, d] = c.useState(e ?? ""), [u, p] = c.useState("");
-  c.useEffect(() => {
+  const c = K(), [l, d] = m.useState(e ?? ""), [u, p] = m.useState("");
+  m.useEffect(() => {
     d(e ?? ""), p("");
   }, [e]);
-  const h = c.useCallback(() => {
+  const h = m.useCallback(() => {
     const N = String(l ?? "").trim();
     if (!N) {
       p("ID cannot be empty."), d(e ?? "");
@@ -582,11 +581,11 @@ function Ve({
     }
   }, [l, e, r, n]);
   return /* @__PURE__ */ i.jsxs("div", { className: a ? `draft-id-editor-container ${a}` : "draft-id-editor-container", children: [
-    /* @__PURE__ */ i.jsx("label", { htmlFor: `${m}-editor-field-id-${e}`, className: "mie:block mie:text-sm mie:text-mietext mie:mb-1", children: t }),
+    /* @__PURE__ */ i.jsx("label", { htmlFor: `${c}-editor-field-id-${e}`, className: "mie:block mie:text-sm mie:text-mietext mie:mb-1", children: t }),
     /* @__PURE__ */ i.jsx(
       "input",
       {
-        id: `${m}-editor-field-id-${e}`,
+        id: `${c}-editor-field-id-${e}`,
         "aria-label": t,
         className: "mie:w-full mie:px-3 mie:py-2 mie:border mie:border-mieborder mie:bg-miesurface mie:text-mietext mie:rounded mie:focus:border-mieprimary mie:focus:ring-1 mie:focus:ring-mieprimary mie:outline-none mie:transition-colors",
         value: l,
@@ -663,8 +662,8 @@ function Mi({ field: e, onUpdate: t }) {
           "aria-label": "Input Type",
           className: "mie:w-full mie:px-3 mie:py-2 mie:border mie:border-mieborder mie:bg-miesurface mie:text-mietext mie:rounded mie:focus:border-mieprimary mie:focus:ring-1 mie:focus:ring-mieprimary mie:outline-none mie:cursor-pointer mie:transition-colors",
           value: n,
-          onChange: (m) => t("inputType", m.target.value),
-          children: Fi.map((m) => /* @__PURE__ */ i.jsx("option", { value: m.value, children: m.label }, m.value))
+          onChange: (c) => t("inputType", c.target.value),
+          children: Fi.map((c) => /* @__PURE__ */ i.jsx("option", { value: c.value, children: c.label }, c.value))
         }
       )
     ] }),
@@ -677,10 +676,10 @@ function Mi({ field: e, onUpdate: t }) {
           "aria-label": "Unit (optional)",
           className: "mie:w-full mie:px-3 mie:py-2 mie:border mie:border-mieborder mie:bg-miesurface mie:text-mietext mie:rounded mie:focus:border-mieprimary mie:focus:ring-1 mie:focus:ring-mieprimary mie:outline-none mie:cursor-pointer mie:transition-colors",
           value: o,
-          onChange: (m) => t("unit", m.target.value),
+          onChange: (c) => t("unit", c.target.value),
           children: [
             /* @__PURE__ */ i.jsx("option", { value: "", children: "None" }),
-            Object.entries(Pi).map(([m, l]) => /* @__PURE__ */ i.jsx("optgroup", { label: m, children: l.map((d) => /* @__PURE__ */ i.jsx("option", { value: d.value, children: d.label }, d.value)) }, m))
+            Object.entries(Pi).map(([c, l]) => /* @__PURE__ */ i.jsx("optgroup", { label: c, children: l.map((d) => /* @__PURE__ */ i.jsx("option", { value: d.value, children: d.label }, d.value)) }, c))
           ]
         }
       )
@@ -688,9 +687,9 @@ function Mi({ field: e, onUpdate: t }) {
   ] });
 }
 function We({ f: e, onUpdateField: t }) {
-  const r = K(), n = Y(c.useCallback((a) => a.byId, [])), o = c.useCallback((a, m) => {
+  const r = K(), n = Y(m.useCallback((a) => a.byId, [])), o = m.useCallback((a, c) => {
     if (!a?.trim()) return "ID cannot be empty.";
-    if (a === m) return "";
+    if (a === c) return "";
     const l = new Set(Object.keys(n));
     return Object.values(n).forEach((d) => {
       d?.fieldType === "section" && Array.isArray(d.fields) && d.fields.forEach((u) => l.add(u.id));
@@ -749,16 +748,16 @@ function We({ f: e, onUpdateField: t }) {
   ] });
 }
 function He({ field: e, api: t }) {
-  const r = K(), n = e.options || [], o = e.fieldType === "boolean", a = e.fieldType === "multitext", m = c.useRef(null), l = c.useRef(n.length), d = a ? "Text Inputs" : "Options", u = a ? "Text Input" : "Option", p = a ? "Input label" : "Option text";
-  return c.useEffect(() => {
-    if (n.length > l.current && m.current) {
-      const h = m.current.lastElementChild;
+  const r = K(), n = e.options || [], o = e.fieldType === "boolean", a = e.fieldType === "multitext", c = m.useRef(null), l = m.useRef(n.length), d = a ? "Text Inputs" : "Options", u = a ? "Text Input" : "Option", p = a ? "Input label" : "Option text";
+  return m.useEffect(() => {
+    if (n.length > l.current && c.current) {
+      const h = c.current.lastElementChild;
       h && h.scrollIntoView({ behavior: "smooth", block: "nearest" });
     }
     l.current = n.length;
   }, [n.length]), /* @__PURE__ */ i.jsxs("div", { className: "mie:space-y-3", children: [
     /* @__PURE__ */ i.jsx("span", { className: "mie:block mie:text-sm mie:font-medium mie:text-mietext", children: d }),
-    /* @__PURE__ */ i.jsx("div", { ref: m, className: "mie:space-y-2", children: n.map((h) => /* @__PURE__ */ i.jsxs("div", { className: "mie:flex mie:items-center mie:gap-2 mie:px-3 mie:py-2 mie:border mie:border-mieborder mie:rounded-lg mie:shadow-sm mie:hover:border-mieprimary/50 mie:transition-colors", children: [
+    /* @__PURE__ */ i.jsx("div", { ref: c, className: "mie:space-y-2", children: n.map((h) => /* @__PURE__ */ i.jsxs("div", { className: "mie:flex mie:items-center mie:gap-2 mie:px-3 mie:py-2 mie:border mie:border-mieborder mie:rounded-lg mie:shadow-sm mie:hover:border-mieprimary/50 mie:transition-colors", children: [
       /* @__PURE__ */ i.jsx(
         "input",
         {
@@ -794,16 +793,16 @@ function He({ field: e, api: t }) {
   ] });
 }
 function Ye({ field: e, api: t }) {
-  const r = K(), n = e.rows || [], o = e.columns || [], a = c.useRef(null), m = c.useRef(null), l = c.useRef(n.length), d = c.useRef(o.length);
-  return c.useEffect(() => {
+  const r = K(), n = e.rows || [], o = e.columns || [], a = m.useRef(null), c = m.useRef(null), l = m.useRef(n.length), d = m.useRef(o.length);
+  return m.useEffect(() => {
     if (n.length > l.current && a.current) {
       const u = a.current.lastElementChild;
       u && u.scrollIntoView({ behavior: "smooth", block: "nearest" });
     }
     l.current = n.length;
-  }, [n.length]), c.useEffect(() => {
-    if (o.length > d.current && m.current) {
-      const u = m.current.lastElementChild;
+  }, [n.length]), m.useEffect(() => {
+    if (o.length > d.current && c.current) {
+      const u = c.current.lastElementChild;
       u && u.scrollIntoView({ behavior: "smooth", block: "nearest" });
     }
     d.current = o.length;
@@ -843,7 +842,7 @@ function Ye({ field: e, api: t }) {
     ] }),
     /* @__PURE__ */ i.jsxs("div", { className: "mie:space-y-3", children: [
       /* @__PURE__ */ i.jsx("span", { className: "mie:block mie:text-sm mie:font-medium mie:text-mietext", children: "Columns" }),
-      /* @__PURE__ */ i.jsx("div", { ref: m, className: "mie:space-y-2", children: o.map((u) => /* @__PURE__ */ i.jsxs("div", { className: "mie:flex mie:items-center mie:gap-2 mie:px-3 mie:py-2 mie:border mie:border-mieborder mie:rounded-lg mie:shadow-sm mie:hover:border-mieprimary/50 mie:transition-colors", children: [
+      /* @__PURE__ */ i.jsx("div", { ref: c, className: "mie:space-y-2", children: o.map((u) => /* @__PURE__ */ i.jsxs("div", { className: "mie:flex mie:items-center mie:gap-2 mie:px-3 mie:py-2 mie:border mie:border-mieborder mie:rounded-lg mie:shadow-sm mie:hover:border-mieprimary/50 mie:transition-colors", children: [
         /* @__PURE__ */ i.jsx(
           "input",
           {
@@ -877,10 +876,10 @@ function Ye({ field: e, api: t }) {
   ] });
 }
 function _i({ f: e }) {
-  const t = K(), r = Ne(e.id), n = c.useCallback(
+  const t = K(), r = Ne(e.id), n = m.useCallback(
     (l, d) => r.field.update(l, d),
     [r]
-  ), o = X[e.fieldType] || {}, a = o.hasOptions || !1, m = o.hasMatrix || !1;
+  ), o = X[e.fieldType] || {}, a = o.hasOptions || !1, c = o.hasMatrix || !1;
   return /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
     /* @__PURE__ */ i.jsx(We, { f: e, onUpdateField: n }),
     e.fieldType === "input" && /* @__PURE__ */ i.jsxs("div", { className: "non-section-editor-default-answer mie:mt-4", children: [
@@ -898,36 +897,39 @@ function _i({ f: e }) {
       )
     ] }),
     a && /* @__PURE__ */ i.jsx(He, { field: e, api: r }),
-    m && /* @__PURE__ */ i.jsx(Ye, { field: e, api: r })
+    c && /* @__PURE__ */ i.jsx(Ye, { field: e, api: r })
   ] });
 }
 function Di({ section: e, onActiveChildChange: t }) {
-  const r = K(), n = Ne(e.id), o = c.useContext(Te), a = B();
+  const r = K(), n = Ne(e.id), o = m.useContext(Te), a = B();
   if (!o) throw new Error("Missing FormStoreContext.Provider in the tree");
-  const m = Array.isArray(e.fields) ? e.fields : [], l = a.selectedChildId.ParentId, d = a.selectedChildId.ChildId, u = c.useMemo(() => l === e.id && d && m.some((x) => x.id === d) ? d : m[0]?.id || null, []), [p, h] = c.useState(u), N = c.useRef(d);
-  c.useEffect(() => {
+  const c = m.useMemo(
+    () => Array.isArray(e.fields) ? e.fields : [],
+    [e.fields]
+  ), l = a.selectedChildId.ParentId, d = a.selectedChildId.ChildId, u = m.useMemo(() => l === e.id && d && c.some((x) => x.id === d) ? d : c[0]?.id || null, []), [p, h] = m.useState(u), N = m.useRef(d);
+  m.useEffect(() => {
     N.current !== d && (N.current = d, l === e.id && d && d !== p && h(d));
-  }, [l, d, e.id, p]), c.useEffect(() => {
-    if (!m.length) {
+  }, [l, d, e.id, p]), m.useEffect(() => {
+    if (!c.length) {
       p !== null && h(null);
       return;
     }
-    m.some((q) => q.id === p) || h(m[0].id);
-  }, [m, p]), c.useEffect(() => {
+    c.some((q) => q.id === p) || h(c[0].id);
+  }, [c, p]), m.useEffect(() => {
     t?.(e.id, p || null);
   }, [e.id, p, t]);
-  const M = c.useCallback(
+  const M = m.useCallback(
     (x) => {
       h(x), a.selectedChildId.set(e.id, x);
     },
     [e.id, a.selectedChildId]
-  ), W = c.useCallback((x) => x.question?.trim() || X[x.fieldType]?.label || "Untitled", []), F = c.useCallback(
+  ), W = m.useCallback((x) => x.question?.trim() || X[x.fieldType]?.label || "Untitled", []), F = m.useCallback(
     (x, q) => n.field.update(x, q),
     [n]
-  ), E = c.useMemo(
-    () => m.find((x) => x.id === p) || null,
-    [m, p]
-  ), T = Ne(E?.id || "", e.id), y = E && T ? T : null, R = c.useCallback(
+  ), E = m.useMemo(
+    () => c.find((x) => x.id === p) || null,
+    [c, p]
+  ), T = Ne(E?.id || "", e.id), y = E && T ? T : null, R = m.useCallback(
     (x, q) => {
       if (E) {
         if (x === "id") {
@@ -953,12 +955,12 @@ function Di({ section: e, onActiveChildChange: t }) {
       }
     },
     [E, e.id, o]
-  ), A = c.useCallback(() => {
+  ), A = m.useCallback(() => {
     E && o.getState().deleteField(E.id, { sectionId: e.id });
-  }, [E, e.id, o]), b = c.useMemo(
+  }, [E, e.id, o]), b = m.useMemo(
     () => E && (X[E.fieldType] || {}).hasOptions || !1,
     [E]
-  ), O = c.useMemo(
+  ), O = m.useMemo(
     () => E && (X[E.fieldType] || {}).hasMatrix || !1,
     [E]
   );
@@ -990,10 +992,10 @@ function Di({ section: e, onActiveChildChange: t }) {
     /* @__PURE__ */ i.jsxs("div", { className: "mie:space-y-3", children: [
       /* @__PURE__ */ i.jsxs("h3", { className: "mie:text-sm mie:font-semibold mie:text-mietext mie:uppercase mie:tracking-wide", children: [
         "Fields (",
-        m.length,
+        c.length,
         ")"
       ] }),
-      m.length === 0 ? /* @__PURE__ */ i.jsxs("div", { className: "mie:flex mie:flex-col mie:items-center mie:justify-center mie:p-6 mie:bg-miebackground mie:border-2 mie:border-dashed mie:border-mieborder mie:rounded-lg mie:text-center", children: [
+      c.length === 0 ? /* @__PURE__ */ i.jsxs("div", { className: "mie:flex mie:flex-col mie:items-center mie:justify-center mie:p-6 mie:bg-miebackground mie:border-2 mie:border-dashed mie:border-mieborder mie:rounded-lg mie:text-center", children: [
         /* @__PURE__ */ i.jsx("p", { className: "mie:text-sm mie:text-mietextmuted", children: "No fields in this section" }),
         /* @__PURE__ */ i.jsx("p", { className: "mie:text-xs mie:text-mietextmuted/70 mie:mt-1", children: "Use the Tool Panel to add fields" })
       ] }) : /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
@@ -1006,7 +1008,7 @@ function Di({ section: e, onActiveChildChange: t }) {
               className: "mie:w-full mie:px-3 mie:py-2 mie:pr-10 mie:border mie:border-mieborder mie:rounded mie:bg-miesurface mie:text-mietext mie:focus:border-mieprimary mie:focus:ring-1 mie:focus:ring-mieprimary/30 mie:outline-none mie:appearance-none mie:cursor-pointer",
               value: p || "",
               onChange: (x) => M(x.target.value),
-              children: m.map((x) => /* @__PURE__ */ i.jsxs("option", { value: x.id, children: [
+              children: c.map((x) => /* @__PURE__ */ i.jsxs("option", { value: x.id, children: [
                 W(x),
                 " — ",
                 X[x.fieldType]?.label
@@ -1125,18 +1127,18 @@ function $e(e) {
 function Ui() {
   const e = B(), t = Y((f) => f.byId), r = Y((f) => f.setEnableWhen), n = Y((f) => f.updateField), o = e?.selectedFieldId?.value ?? null;
   e?.selectedChildId?.ParentId;
-  const a = e?.selectedChildId?.ChildId ?? null, m = o ? t[o] : null, l = K(), d = m?.fieldType === "section", u = c.useMemo(() => d ? Array.isArray(m?.fields) ? m.fields : [] : [], [d, m]), p = c.useMemo(() => !d || !a ? !1 : u.some((f) => f.id === a), [d, a, u]), h = c.useMemo(() => d && p ? `child:${a}` : "", [d, p, a]), [N, M] = c.useState(h);
-  c.useEffect(() => {
+  const a = e?.selectedChildId?.ChildId ?? null, c = o ? t[o] : null, l = K(), d = c?.fieldType === "section", u = m.useMemo(() => d ? Array.isArray(c?.fields) ? c.fields : [] : [], [d, c]), p = m.useMemo(() => !d || !a ? !1 : u.some((f) => f.id === a), [d, a, u]), h = m.useMemo(() => d && p ? `child:${a}` : "", [d, p, a]), [N, M] = m.useState(h);
+  m.useEffect(() => {
     M(h);
   }, [h]);
-  const W = c.useCallback((f) => {
+  const W = m.useCallback((f) => {
     if (M(f), !!d)
       if (f && f.startsWith("child:")) {
         const g = f.slice(6);
         e.selectedChildId.set(o, g);
       } else
         e.selectedChildId.set(null, null);
-  }, [d, o, e]), F = !!(d && N && N.startsWith("child:")), E = F ? N.slice(6) : null, T = F ? E : o, y = c.useMemo(() => T ? F ? u.find((f) => f.id === E) ?? null : t[T] ?? null : null, [t, T, F, E, u]), R = c.useMemo(() => {
+  }, [d, o, e]), F = !!(d && N && N.startsWith("child:")), E = F ? N.slice(6) : null, T = F ? E : o, y = m.useMemo(() => T ? F ? u.find((f) => f.id === E) ?? null : t[T] ?? null : null, [t, T, F, E, u]), R = m.useMemo(() => {
     const f = [];
     for (const g of Object.values(t))
       if (g)
@@ -1162,17 +1164,17 @@ function Ui() {
             options: Array.isArray(g.options) ? g.options : []
           });
     return f;
-  }, [t]), A = c.useCallback(
+  }, [t]), A = m.useCallback(
     (f) => R.find((g) => g.id === f) || null,
     [R]
-  ), b = c.useCallback(
+  ), b = m.useCallback(
     (f) => {
       if (!T) return;
       const g = f && Array.isArray(f.conditions) ? { logic: f.logic || "AND", conditions: f.conditions } : void 0;
       F && o ? n(T, { enableWhen: g }, { sectionId: o }) : r(T, g);
     },
     [T, F, o, r, n]
-  ), O = c.useMemo(() => y?.enableWhen && Array.isArray(y.enableWhen.conditions) ? { logic: y.enableWhen.logic || "AND", conditions: y.enableWhen.conditions } : { logic: "AND", conditions: [] }, [y]), x = c.useCallback(() => {
+  ), O = m.useMemo(() => y?.enableWhen && Array.isArray(y.enableWhen.conditions) ? { logic: y.enableWhen.logic || "AND", conditions: y.enableWhen.conditions } : { logic: "AND", conditions: [] }, [y]), x = m.useCallback(() => {
     const f = {
       logic: O.logic || "AND",
       conditions: [
@@ -1181,13 +1183,13 @@ function Ui() {
       ]
     };
     b(f);
-  }, [O, b]), q = c.useCallback(() => b(null), [b]), P = c.useCallback(
+  }, [O, b]), q = m.useCallback(() => b(null), [b]), P = m.useCallback(
     (f) => {
       const v = (Array.isArray(O.conditions) ? O.conditions : []).filter((k, _) => _ !== f);
       b({ ...O, conditions: v });
     },
     [O, b]
-  ), I = c.useCallback(
+  ), I = m.useCallback(
     (f, g) => {
       const k = [...Array.isArray(O.conditions) ? O.conditions : []], D = { ...k[f] || { targetId: "", operator: "equals", value: "" }, ...g };
       if ("targetId" in g) {
@@ -1199,7 +1201,7 @@ function Ui() {
       k[f] = D, b({ ...O, conditions: k });
     },
     [O, A, b]
-  ), w = c.useMemo(
+  ), w = m.useMemo(
     () => R.filter((f) => f.id !== T),
     [R, T]
   ), S = !y || !T;
@@ -1388,20 +1390,21 @@ function Ui() {
 }
 function Fe({ isMobileModal: e = !1 }) {
   const t = B(), r = Y(
-    c.useCallback(
+    m.useCallback(
       (d) => t.selectedFieldId.value ? d.byId[t.selectedFieldId.value] : null,
       [t.selectedFieldId.value]
     )
-  ), [n, o] = c.useState("EDIT"), a = c.useCallback(
+  ), [n, o] = m.useState("EDIT"), a = m.useCallback(
     (d, u) => {
       t.selectedChildId.set(d, u);
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- .set is stable
     [t.selectedChildId.set]
   );
-  if (c.useEffect(() => {
+  if (m.useEffect(() => {
     t.selectedChildId.set(null, null), o("EDIT");
   }, [t.selectedFieldId.value]), t.state.isPreview) return null;
-  const m = !r, l = r?.fieldType === "section";
+  const c = !r, l = r?.fieldType === "section";
   return /* @__PURE__ */ i.jsxs(
     "div",
     {
@@ -1434,8 +1437,8 @@ function Fe({ isMobileModal: e = !1 }) {
           )
         ] }) }),
         /* @__PURE__ */ i.jsxs("div", { className: "mie:p-4", children: [
-          m && /* @__PURE__ */ i.jsx("div", { className: "edit-panel-empty mie:text-mietextmuted", children: /* @__PURE__ */ i.jsx("p", { children: "Select a field in the center panel to edit its properties." }) }),
-          !m && n === "EDIT" && /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
+          c && /* @__PURE__ */ i.jsx("div", { className: "edit-panel-empty mie:text-mietextmuted", children: /* @__PURE__ */ i.jsx("p", { children: "Select a field in the center panel to edit its properties." }) }),
+          !c && n === "EDIT" && /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
             !l && /* @__PURE__ */ i.jsx(_i, { f: r }),
             l && /* @__PURE__ */ i.jsx(
               Di,
@@ -1445,15 +1448,15 @@ function Fe({ isMobileModal: e = !1 }) {
               }
             )
           ] }),
-          !m && n === "LOGIC" && /* @__PURE__ */ i.jsx(Ui, {})
+          !c && n === "LOGIC" && /* @__PURE__ */ i.jsx(Ui, {})
         ] })
       ]
     }
   );
 }
 function zi() {
-  const e = B(), { fields: t } = yi(e.state.isPreview), r = ji((l) => l.hideUnsupportedFields), n = Y((l) => l.order), o = c.useRef(null), a = c.useRef(0), m = Ee(() => (r ? t.filter((d) => d.fieldType !== "unsupported") : t).map((d) => d.id), [t, r]);
-  return c.useEffect(() => {
+  const e = B(), { fields: t } = yi(e.state.isPreview), r = ji((l) => l.hideUnsupportedFields), n = Y((l) => l.order), o = m.useRef(null), a = m.useRef(0), c = Ee(() => (r ? t.filter((d) => d.fieldType !== "unsupported") : t).map((d) => d.id), [t, r]);
+  return m.useEffect(() => {
     if (!e.state.isPreview) {
       if (n.length > a.current) {
         const l = n[n.length - 1], d = o.current?.querySelector(`[data-field-id="${l}"]`);
@@ -1469,15 +1472,13 @@ function zi() {
         ${e.state.isPreview ? "mie:max-w-4xl" : "mie:max-w-xl"} 
         mie:mx-auto mie:rounded-lg mie:overflow-y-auto mie:max-h-[calc(100svh-13rem)] mie:lg:max-h-[calc(100dvh-11rem)] mie:custom-scrollbar mie:lg:pr-2`,
       onClick: () => !e.state.isPreview && e.selectedFieldId.clear(),
-      children: m.length === 0 ? /* @__PURE__ */ i.jsx(Wi, {}) : m.map((l) => /* @__PURE__ */ i.jsx(Vi, { id: l }, l))
+      children: c.length === 0 ? /* @__PURE__ */ i.jsx(Wi, {}) : c.map((l) => /* @__PURE__ */ i.jsx(Vi, { id: l }, l))
     }
   );
 }
-const Vi = c.memo(function({ id: t }) {
-  const r = Y(c.useCallback((o) => o.byId[t], [t]));
-  if (!r) return null;
-  const n = wi(r.fieldType);
-  return n ? /* @__PURE__ */ i.jsx("div", { className: "mie:mb-1.5", "data-field-type": r.fieldType, "data-field-id": r.id, children: /* @__PURE__ */ i.jsx(n, { field: r }) }) : null;
+const Vi = m.memo(function({ id: t }) {
+  const r = Y(m.useCallback((o) => o.byId[t], [t])), n = r ? wi(r.fieldType) : null;
+  return !r || !n ? null : /* @__PURE__ */ i.jsx("div", { className: "mie:mb-1.5", "data-field-type": r.fieldType, "data-field-id": r.id, children: /* @__PURE__ */ i.jsx(n, { field: r }) });
 });
 function Wi() {
   return /* @__PURE__ */ i.jsxs(
@@ -1525,14 +1526,14 @@ function Yi(e, t, r) {
 function Ji(e, t) {
   var r = e == null ? null : typeof Symbol < "u" && e[Symbol.iterator] || e["@@iterator"];
   if (r != null) {
-    var n, o, a, m, l = [], d = !0, u = !1;
+    var n, o, a, c, l = [], d = !0, u = !1;
     try {
       if (a = (r = r.call(e)).next, t !== 0) for (; !(d = (n = a.call(r)).done) && (l.push(n.value), l.length !== t); d = !0) ;
     } catch (p) {
       u = !0, o = p;
     } finally {
       try {
-        if (!d && r.return != null && (m = r.return(), Object(m) !== m)) return;
+        if (!d && r.return != null && (c = r.return(), Object(c) !== c)) return;
       } finally {
         if (u) throw o;
       }
@@ -1650,7 +1651,7 @@ function re(e) {
     for (var r = this, n = arguments.length, o = new Array(n), a = 0; a < n; a++)
       o[a] = arguments[a];
     return o.length >= e.length ? e.apply(this, o) : function() {
-      for (var m = arguments.length, l = new Array(m), d = 0; d < m; d++)
+      for (var c = arguments.length, l = new Array(c), d = 0; d < c; d++)
         l[d] = arguments[d];
       return t.apply(r, [].concat(o, l));
     };
@@ -1708,7 +1709,7 @@ function dt(e) {
   ce.initial(e), ce.handler(t);
   var r = {
     current: e
-  }, n = re(pt)(r, t), o = re(ft)(r), a = re(ce.changes)(e), m = re(ut)(r);
+  }, n = re(pt)(r, t), o = re(ft)(r), a = re(ce.changes)(e), c = re(ut)(r);
   function l() {
     var u = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : function(p) {
       return p;
@@ -1716,7 +1717,7 @@ function dt(e) {
     return ce.selector(u), u(r.current);
   }
   function d(u) {
-    tt(n, o, a, m)(u);
+    tt(n, o, a, c)(u);
   }
   return [l, d];
 }
@@ -1744,7 +1745,7 @@ function bt(e) {
     for (var r = this, n = arguments.length, o = new Array(n), a = 0; a < n; a++)
       o[a] = arguments[a];
     return o.length >= e.length ? e.apply(this, o) : function() {
-      for (var m = arguments.length, l = new Array(m), d = 0; d < m; d++)
+      for (var c = arguments.length, l = new Array(c), d = 0; d < c; d++)
         l[d] = arguments[d];
       return t.apply(r, [].concat(o, l));
     };
@@ -1786,8 +1787,8 @@ var Je = {
   for (var t = arguments.length, r = new Array(t), n = 0; n < t; n++)
     r[n] = arguments[n];
   return function(o) {
-    return r.reduceRight(function(a, m) {
-      return m(a);
+    return r.reduceRight(function(a, c) {
+      return c(a);
     }, o);
   };
 };
@@ -1903,11 +1904,11 @@ var we = new Promise(function(e, t) {
   __getMonacoInstance: $t
 }, Ft = { wrapper: { display: "flex", position: "relative", textAlign: "initial" }, fullWidth: { width: "100%" }, hide: { display: "none" } }, Ce = Ft, Pt = { container: { display: "flex", height: "100%", width: "100%", justifyContent: "center", alignItems: "center" } }, Mt = Pt;
 function _t({ children: e }) {
-  return c.createElement("div", { style: Mt.container }, e);
+  return m.createElement("div", { style: Mt.container }, e);
 }
 var Dt = _t, qt = Dt;
-function Lt({ width: e, height: t, isEditorReady: r, loading: n, _ref: o, className: a, wrapperProps: m }) {
-  return c.createElement("section", { style: { ...Ce.wrapper, width: e, height: t }, ...m }, !r && c.createElement(qt, null, n), c.createElement("div", { ref: o, style: { ...Ce.fullWidth, ...!r && Ce.hide }, className: a }));
+function Lt({ width: e, height: t, isEditorReady: r, loading: n, _ref: o, className: a, wrapperProps: c }) {
+  return m.createElement("section", { style: { ...Ce.wrapper, width: e, height: t }, ...c }, !r && m.createElement(qt, null, n), m.createElement("div", { ref: o, style: { ...Ce.fullWidth, ...!r && Ce.hide }, className: a }));
 }
 var Ut = Lt, Qe = Oe(Ut);
 function zt(e) {
@@ -1935,7 +1936,7 @@ function Ht(e, t, r, n) {
 function ei(e, t) {
   return e.Uri.parse(t);
 }
-function Yt({ original: e, modified: t, language: r, originalLanguage: n, modifiedLanguage: o, originalModelPath: a, modifiedModelPath: m, keepCurrentOriginalModel: l = !1, keepCurrentModifiedModel: d = !1, theme: u = "light", loading: p = "Loading...", options: h = {}, height: N = "100%", width: M = "100%", className: W, wrapperProps: F = {}, beforeMount: E = ne, onMount: T = ne }) {
+function Yt({ original: e, modified: t, language: r, originalLanguage: n, modifiedLanguage: o, originalModelPath: a, modifiedModelPath: c, keepCurrentOriginalModel: l = !1, keepCurrentModifiedModel: d = !1, theme: u = "light", loading: p = "Loading...", options: h = {}, height: N = "100%", width: M = "100%", className: W, wrapperProps: F = {}, beforeMount: E = ne, onMount: T = ne }) {
   let [y, R] = fe(!1), [A, b] = fe(!0), O = V(null), x = V(null), q = V(null), P = V(T), I = V(E), w = V(!1);
   Ze(() => {
     let v = Xe.init();
@@ -1947,10 +1948,10 @@ function Yt({ original: e, modified: t, language: r, originalLanguage: n, modifi
     }
   }, [a], y), H(() => {
     if (O.current && x.current) {
-      let v = O.current.getModifiedEditor(), k = Z(x.current, t || "", o || r || "text", m || "");
+      let v = O.current.getModifiedEditor(), k = Z(x.current, t || "", o || r || "text", c || "");
       k !== v.getModel() && v.setModel(k);
     }
-  }, [m], y), H(() => {
+  }, [c], y), H(() => {
     let v = O.current.getModifiedEditor();
     v.getOption(x.current.editor.EditorOption.readOnly) ? v.setValue(t || "") : t !== v.getValue() && (v.executeEdits("", [{ range: v.getModel().getFullModelRange(), text: t || "", forceMoveMarkers: !0 }]), v.pushUndoStop());
   }, [t], y), H(() => {
@@ -1966,9 +1967,9 @@ function Yt({ original: e, modified: t, language: r, originalLanguage: n, modifi
   let S = ue(() => {
     if (!x.current) return;
     I.current(x.current);
-    let v = Z(x.current, e || "", n || r || "text", a || ""), k = Z(x.current, t || "", o || r || "text", m || "");
+    let v = Z(x.current, e || "", n || r || "text", a || ""), k = Z(x.current, t || "", o || r || "text", c || "");
     O.current?.setModel({ original: v, modified: k });
-  }, [r, t, o, e, n, a, m]), f = ue(() => {
+  }, [r, t, o, e, n, a, c]), f = ue(() => {
     !w.current && q.current && (O.current = x.current.editor.createDiffEditor(q.current, { automaticLayout: !0, ...h }), S(), x.current?.editor.setTheme(u), R(!0), w.current = !0);
   }, [h, u, S]);
   J(() => {
@@ -1980,7 +1981,7 @@ function Yt({ original: e, modified: t, language: r, originalLanguage: n, modifi
     let v = O.current?.getModel();
     l || v?.original?.dispose(), d || v?.modified?.dispose(), O.current?.dispose();
   }
-  return c.createElement(Qe, { width: M, height: N, isEditorReady: y, loading: p, _ref: q, className: W, wrapperProps: F });
+  return m.createElement(Qe, { width: M, height: N, isEditorReady: y, loading: p, _ref: q, className: W, wrapperProps: F });
 }
 var Jt = Yt;
 Oe(Jt);
@@ -1991,7 +1992,7 @@ function Bt(e) {
   }, [e]), t.current;
 }
 var Gt = Bt, de = /* @__PURE__ */ new Map();
-function Kt({ defaultValue: e, defaultLanguage: t, defaultPath: r, value: n, language: o, path: a, theme: m = "light", line: l, loading: d = "Loading...", options: u = {}, overrideServices: p = {}, saveViewState: h = !0, keepCurrentModel: N = !1, width: M = "100%", height: W = "100%", className: F, wrapperProps: E = {}, beforeMount: T = ne, onMount: y = ne, onChange: R, onValidate: A = ne }) {
+function Kt({ defaultValue: e, defaultLanguage: t, defaultPath: r, value: n, language: o, path: a, theme: c = "light", line: l, loading: d = "Loading...", options: u = {}, overrideServices: p = {}, saveViewState: h = !0, keepCurrentModel: N = !1, width: M = "100%", height: W = "100%", className: F, wrapperProps: E = {}, beforeMount: T = ne, onMount: y = ne, onChange: R, onValidate: A = ne }) {
   let [b, O] = fe(!1), [x, q] = fe(!0), P = V(null), I = V(null), w = V(null), S = V(y), f = V(T), g = V(), v = V(n), k = Gt(a), _ = V(!1), D = V(!1);
   Ze(() => {
     let s = Xe.init();
@@ -2009,15 +2010,15 @@ function Kt({ defaultValue: e, defaultLanguage: t, defaultPath: r, value: n, lan
   }, [o], b), H(() => {
     l !== void 0 && I.current?.revealLine(l);
   }, [l], b), H(() => {
-    P.current?.editor.setTheme(m);
-  }, [m], b);
+    P.current?.editor.setTheme(c);
+  }, [c], b);
   let L = ue(() => {
     if (!(!w.current || !P.current) && !_.current) {
       f.current(P.current);
       let s = a || r, C = Z(P.current, n || e || "", t || o || "", s || "");
-      I.current = P.current?.editor.create(w.current, { model: C, automaticLayout: !0, ...u }, p), h && I.current.restoreViewState(de.get(s)), P.current.editor.setTheme(m), l !== void 0 && I.current.revealLine(l), O(!0), _.current = !0;
+      I.current = P.current?.editor.create(w.current, { model: C, automaticLayout: !0, ...u }, p), h && I.current.restoreViewState(de.get(s)), P.current.editor.setTheme(c), l !== void 0 && I.current.revealLine(l), O(!0), _.current = !0;
     }
-  }, [e, t, r, n, o, a, u, p, h, m, l]);
+  }, [e, t, r, n, o, a, u, p, h, c, l]);
   J(() => {
     b && S.current(I.current, P.current);
   }, [b]), J(() => {
@@ -2045,12 +2046,12 @@ function Kt({ defaultValue: e, defaultLanguage: t, defaultPath: r, value: n, lan
   function z() {
     g.current?.dispose(), N ? h && de.set(a, I.current.saveViewState()) : I.current.getModel()?.dispose(), I.current.dispose();
   }
-  return c.createElement(Qe, { width: M, height: W, isEditorReady: b, loading: d, _ref: w, className: F, wrapperProps: E });
+  return m.createElement(Qe, { width: M, height: W, isEditorReady: b, loading: d, _ref: w, className: F, wrapperProps: E });
 }
 var Xt = Kt, Qt = Oe(Xt), Zt = Qt;
 function er() {
-  const e = Ue(), t = Y((w) => w.replaceAll), r = B(), { showAlert: n } = ze(), o = c.useRef(null), a = c.useRef(""), m = c.useRef(null), l = c.useRef(!1), d = c.useRef(t), u = c.useRef(r), p = c.useRef(e), [h, N] = c.useState("yaml"), M = c.useRef(h), [W, F] = c.useState(!1);
-  c.useEffect(() => {
+  const e = Ue(), t = Y((w) => w.replaceAll), r = B(), { showAlert: n } = ze(), o = m.useRef(null), a = m.useRef(""), c = m.useRef(null), l = m.useRef(!1), d = m.useRef(t), u = m.useRef(r), p = m.useRef(e), [h, N] = m.useState("yaml"), M = m.useRef(h), [W, F] = m.useState(!1);
+  m.useEffect(() => {
     const w = document.querySelector(".qb-editor-root");
     if (!w) return;
     const S = () => {
@@ -2060,20 +2061,20 @@ function er() {
     const f = new MutationObserver(S);
     return f.observe(w, { attributes: !0, attributeFilter: ["class"] }), () => f.disconnect();
   }, []);
-  const [E, T] = c.useState(640), [y, R] = c.useState(() => {
+  const [E, T] = m.useState(640), [y, R] = m.useState(() => {
     try {
       return ee.dump(e, { indent: 2, lineWidth: -1 });
     } catch {
       return "";
     }
-  }), [A, b] = c.useState("");
-  c.useEffect(() => {
+  }), [A, b] = m.useState("");
+  m.useEffect(() => {
     r.setCodeEditorHasError(!1);
-  }, []), c.useEffect(() => {
+  }, []), m.useEffect(() => {
     d.current = t, u.current = r, p.current = e, M.current = h;
   });
-  const O = c.useCallback((w) => h === "json" ? JSON.parse(w) : ee.load(w), [h]), x = c.useCallback((w) => h === "json" ? JSON.stringify(w, null, 2) : ee.dump(w, { indent: 2, lineWidth: -1 }), [h]);
-  c.useEffect(() => {
+  const O = m.useCallback((w) => h === "json" ? JSON.parse(w) : ee.load(w), [h]), x = m.useCallback((w) => h === "json" ? JSON.stringify(w, null, 2) : ee.dump(w, { indent: 2, lineWidth: -1 }), [h]);
+  m.useEffect(() => {
     const w = () => {
       if (o.current) {
         const S = o.current.getBoundingClientRect().top, f = window.innerHeight - S - 20;
@@ -2081,7 +2082,7 @@ function er() {
       }
     };
     return w(), window.addEventListener("resize", w), () => window.removeEventListener("resize", w);
-  }, []), c.useEffect(() => {
+  }, []), m.useEffect(() => {
     if (!l.current)
       try {
         const w = x(e);
@@ -2102,7 +2103,7 @@ function er() {
       b(f), r.setCodeEditorHasError(!0);
     }
   }, P = (w) => {
-    m.current = w, w.onDidPaste((S) => {
+    c.current = w, w.onDidPaste((S) => {
       const f = y, g = w.getModel().getValue();
       try {
         const v = O(g);
@@ -2154,7 +2155,7 @@ Please use MIE Forms schema inside of code editor for the best experience in the
       b(`Cannot convert: ${S.message}`), r.setCodeEditorHasError(!0);
     }
   };
-  return c.useEffect(() => () => {
+  return m.useEffect(() => () => {
     const w = a.current?.trim(), S = M.current, f = p.current, g = d.current, v = u.current, k = (_) => S === "json" ? JSON.parse(_) : ee.load(_);
     if (!w) {
       g({ schemaType: ye, fields: [] }), l.current = !1;
@@ -2225,13 +2226,13 @@ Please use MIE Forms schema inside of code editor for the best experience in the
   ] });
 }
 function ir({ selectedField: e }) {
-  const t = B(), [r, n] = c.useState(!1), o = t.state.isPreview, a = t.state.isCodeEditor, m = t.state.isEditModalOpen, l = t.state.panelResetKey, d = !o;
+  const t = B(), [r, n] = m.useState(!1), o = t.state.isPreview, a = t.state.isCodeEditor, c = t.state.isEditModalOpen, l = t.state.panelResetKey, d = !o;
   return /* @__PURE__ */ i.jsxs("div", { className: "layout-container mie:w-full mie:h-fit mie:rounded-lg mie:mt-3", children: [
     a ? /* @__PURE__ */ i.jsx("div", { className: "mie:border mie:border-mieborder mie:rounded-lg", children: /* @__PURE__ */ i.jsx(er, {}) }) : /* @__PURE__ */ i.jsxs("div", { className: "layout-grid mie:flex mie:lg:gap-3 mie:h-full", children: [
       d && /* @__PURE__ */ i.jsx("div", { className: "layout-tool-panel mie:hidden mie:lg:block mie:lg:w-72", children: /* @__PURE__ */ i.jsx(Re, {}) }),
       /* @__PURE__ */ i.jsx("div", { className: "layout-main-content mie:flex-1 mie:min-w-0", children: /* @__PURE__ */ i.jsx(zi, {}) }),
       d && /* @__PURE__ */ i.jsx("div", { className: "layout-edit-panel mie:hidden mie:lg:block mie:lg:w-90 mie:md:w-80", children: /* @__PURE__ */ i.jsx(Fe, {}, l) }),
-      d && /* @__PURE__ */ i.jsx("div", { className: "layout-mobile-modal mie:lg:hidden", children: m && e && /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
+      d && /* @__PURE__ */ i.jsx("div", { className: "layout-mobile-modal mie:lg:hidden", children: c && e && /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
         /* @__PURE__ */ i.jsx(
           "div",
           {
@@ -2272,11 +2273,11 @@ function tr({
   className: n = "",
   showHeader: o = !0,
   startInPreview: a = !1,
-  hideUnsupportedFields: m = !1,
+  hideUnsupportedFields: c = !1,
   theme: l = "light"
 }) {
-  const [d, u] = c.useState("json"), p = B(), h = c.useRef(!1), N = c.useContext(Te);
-  c.useEffect(() => {
+  const [d, u] = m.useState("json"), p = B(), h = m.useRef(!1), N = m.useContext(Te);
+  m.useEffect(() => {
     if (!(h.current || !N)) {
       if (e)
         try {
@@ -2298,9 +2299,9 @@ function tr({
         }
       p.preview.set(!!a), h.current = !0;
     }
-  }, [e, t, a, p, N]), c.useEffect(() => {
-    p.setHideUnsupportedFields(m);
-  }, [m, p]), c.useEffect(() => {
+  }, [e, t, a, p, N]), m.useEffect(() => {
+    p.setHideUnsupportedFields(c);
+  }, [c, p]), m.useEffect(() => {
     if (!(!r || !N))
       return N.subscribe((F) => {
         r({
@@ -2320,7 +2321,7 @@ function tr({
   ] }) });
 }
 function ar(e) {
-  const t = c.useRef(Ci()).current, r = c.useRef(Ei()).current;
+  const t = m.useMemo(() => Ci(), []), r = m.useMemo(() => Ei(), []);
   return /* @__PURE__ */ i.jsx(Te.Provider, { value: t, children: /* @__PURE__ */ i.jsx(Ni.Provider, { value: r, children: /* @__PURE__ */ i.jsx(tr, { ...e }) }) });
 }
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@mieweb/forms-editor",
-	"version": "2.1.3",
+	"version": "2.1.4-prerelease.0",
 	"description": "Embeddable questionnaire form editor component",
 	"type": "module",
 	"main": "./dist/index.js",
@@ -30,7 +30,7 @@
 		"react-dom": ">=18.0.0"
 	},
 	"dependencies": {
-		"@mieweb/forms-engine": "^2.1.3",
+		"@mieweb/forms-engine": "^2.1.4-prerelease.0",
 		"@monaco-editor/react": "^4.6.0",
 		"js-yaml": "^4.1.0"
 	},