@mieweb/forms-editor 0.1.0 → 0.1.2

package/dist/index.js

@@ -1,698 +1,1288 @@
-// src/QuestionnaireEditor.jsx
-import React14, { useEffect as useEffect3, useRef as useRef2 } from "react";
+import E, { useState as xe, useRef as rr, useEffect as ee, useMemo as re, useCallback as be } from "react";
+import { useFormStore as q, useFieldsArray as Ie, useUIApi as H, EYECLOSED_ICON as Ar, EYEEDIT_ICON as Dr, PLUSSQUARE_ICON as Pr, DATALOG_ICON as Fr, X_ICON as $r, fieldTypes as le, useFormApi as tr, isVisible as Lr, getFieldComponent as Mr } from "@mieweb/forms-engine";
+import { AnimatePresence as Wr, motion as K } from "framer-motion";
+import qr from "js-yaml";
+import './index.css';var pe = { exports: {} }, se = {};
+/**
+ * @license React
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var ze;
+function Ur() {
+  if (ze) return se;
+  ze = 1;
+  var t = E, n = Symbol.for("react.element"), s = Symbol.for("react.fragment"), i = Object.prototype.hasOwnProperty, o = t.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, u = { key: !0, ref: !0, __self: !0, __source: !0 };
+  function b(c, f, g) {
+    var m, p = {}, h = null, T = null;
+    g !== void 0 && (h = "" + g), f.key !== void 0 && (h = "" + f.key), f.ref !== void 0 && (T = f.ref);
+    for (m in f) i.call(f, m) && !u.hasOwnProperty(m) && (p[m] = f[m]);
+    if (c && c.defaultProps) for (m in f = c.defaultProps, f) p[m] === void 0 && (p[m] = f[m]);
+    return { $$typeof: n, type: c, key: h, ref: T, props: p, _owner: o.current };
+  }
+  return se.Fragment = s, se.jsx = b, se.jsxs = b, se;
+}
+var ie = {};
+/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var Ge;
+function Yr() {
+  return Ge || (Ge = 1, process.env.NODE_ENV !== "production" && (function() {
+    var t = E, n = Symbol.for("react.element"), s = Symbol.for("react.portal"), i = Symbol.for("react.fragment"), o = Symbol.for("react.strict_mode"), u = Symbol.for("react.profiler"), b = Symbol.for("react.provider"), c = Symbol.for("react.context"), f = Symbol.for("react.forward_ref"), g = Symbol.for("react.suspense"), m = Symbol.for("react.suspense_list"), p = Symbol.for("react.memo"), h = Symbol.for("react.lazy"), T = Symbol.for("react.offscreen"), v = Symbol.iterator, S = "@@iterator";
+    function k(e) {
+      if (e === null || typeof e != "object")
+        return null;
+      var a = v && e[v] || e[S];
+      return typeof a == "function" ? a : null;
+    }
+    var L = t.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+    function _(e) {
+      {
+        for (var a = arguments.length, l = new Array(a > 1 ? a - 1 : 0), x = 1; x < a; x++)
+          l[x - 1] = arguments[x];
+        F("error", e, l);
+      }
+    }
+    function F(e, a, l) {
+      {
+        var x = L.ReactDebugCurrentFrame, N = x.getStackAddendum();
+        N !== "" && (a += "%s", l = l.concat([N]));
+        var R = l.map(function(w) {
+          return String(w);
+        });
+        R.unshift("Warning: " + a), Function.prototype.apply.call(console[e], console, R);
+      }
+    }
+    var O = !1, he = !1, ve = !1, ge = !1, X = !1, oe;
+    oe = Symbol.for("react.module.reference");
+    function J(e) {
+      return !!(typeof e == "string" || typeof e == "function" || e === i || e === u || X || e === o || e === g || e === m || ge || e === T || O || he || ve || typeof e == "object" && e !== null && (e.$$typeof === h || e.$$typeof === p || e.$$typeof === b || e.$$typeof === c || e.$$typeof === f || // This needs to include all possible module reference object
+      // types supported by any Flight configuration anywhere since
+      // we don't know which Flight build this will end up being used
+      // with.
+      e.$$typeof === oe || e.getModuleId !== void 0));
+    }
+    function ce(e, a, l) {
+      var x = e.displayName;
+      if (x)
+        return x;
+      var N = a.displayName || a.name || "";
+      return N !== "" ? l + "(" + N + ")" : l;
+    }
+    function te(e) {
+      return e.displayName || "Context";
+    }
+    function B(e) {
+      if (e == null)
+        return null;
+      if (typeof e.tag == "number" && _("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."), typeof e == "function")
+        return e.displayName || e.name || null;
+      if (typeof e == "string")
+        return e;
+      switch (e) {
+        case i:
+          return "Fragment";
+        case s:
+          return "Portal";
+        case u:
+          return "Profiler";
+        case o:
+          return "StrictMode";
+        case g:
+          return "Suspense";
+        case m:
+          return "SuspenseList";
+      }
+      if (typeof e == "object")
+        switch (e.$$typeof) {
+          case c:
+            var a = e;
+            return te(a) + ".Consumer";
+          case b:
+            var l = e;
+            return te(l._context) + ".Provider";
+          case f:
+            return ce(e, e.render, "ForwardRef");
+          case p:
+            var x = e.displayName || null;
+            return x !== null ? x : B(e.type) || "Memo";
+          case h: {
+            var N = e, R = N._payload, w = N._init;
+            try {
+              return B(w(R));
+            } catch {
+              return null;
+            }
+          }
+        }
+      return null;
+    }
+    var d = Object.assign, C = 0, I, Y, A, U, y, z, ne;
+    function ye() {
+    }
+    ye.__reactDisabledLog = !0;
+    function je() {
+      {
+        if (C === 0) {
+          I = console.log, Y = console.info, A = console.warn, U = console.error, y = console.group, z = console.groupCollapsed, ne = console.groupEnd;
+          var e = {
+            configurable: !0,
+            enumerable: !0,
+            value: ye,
+            writable: !0
+          };
+          Object.defineProperties(console, {
+            info: e,
+            log: e,
+            warn: e,
+            error: e,
+            group: e,
+            groupCollapsed: e,
+            groupEnd: e
+          });
+        }
+        C++;
+      }
+    }
+    function lr() {
+      {
+        if (C--, C === 0) {
+          var e = {
+            configurable: !0,
+            enumerable: !0,
+            writable: !0
+          };
+          Object.defineProperties(console, {
+            log: d({}, e, {
+              value: I
+            }),
+            info: d({}, e, {
+              value: Y
+            }),
+            warn: d({}, e, {
+              value: A
+            }),
+            error: d({}, e, {
+              value: U
+            }),
+            group: d({}, e, {
+              value: y
+            }),
+            groupCollapsed: d({}, e, {
+              value: z
+            }),
+            groupEnd: d({}, e, {
+              value: ne
+            })
+          });
+        }
+        C < 0 && _("disabledDepth fell below zero. This is a bug in React. Please file an issue.");
+      }
+    }
+    var we = L.ReactCurrentDispatcher, Ee;
+    function de(e, a, l) {
+      {
+        if (Ee === void 0)
+          try {
+            throw Error();
+          } catch (N) {
+            var x = N.stack.trim().match(/\n( *(at )?)/);
+            Ee = x && x[1] || "";
+          }
+        return `
+` + Ee + e;
+      }
+    }
+    var ke = !1, ue;
+    {
+      var or = typeof WeakMap == "function" ? WeakMap : Map;
+      ue = new or();
+    }
+    function Oe(e, a) {
+      if (!e || ke)
+        return "";
+      {
+        var l = ue.get(e);
+        if (l !== void 0)
+          return l;
+      }
+      var x;
+      ke = !0;
+      var N = Error.prepareStackTrace;
+      Error.prepareStackTrace = void 0;
+      var R;
+      R = we.current, we.current = null, je();
+      try {
+        if (a) {
+          var w = function() {
+            throw Error();
+          };
+          if (Object.defineProperty(w.prototype, "props", {
+            set: function() {
+              throw Error();
+            }
+          }), typeof Reflect == "object" && Reflect.construct) {
+            try {
+              Reflect.construct(w, []);
+            } catch (W) {
+              x = W;
+            }
+            Reflect.construct(e, [], w);
+          } else {
+            try {
+              w.call();
+            } catch (W) {
+              x = W;
+            }
+            e.call(w.prototype);
+          }
+        } else {
+          try {
+            throw Error();
+          } catch (W) {
+            x = W;
+          }
+          e();
+        }
+      } catch (W) {
+        if (W && x && typeof W.stack == "string") {
+          for (var j = W.stack.split(`
+`), M = x.stack.split(`
+`), D = j.length - 1, P = M.length - 1; D >= 1 && P >= 0 && j[D] !== M[P]; )
+            P--;
+          for (; D >= 1 && P >= 0; D--, P--)
+            if (j[D] !== M[P]) {
+              if (D !== 1 || P !== 1)
+                do
+                  if (D--, P--, P < 0 || j[D] !== M[P]) {
+                    var V = `
+` + j[D].replace(" at new ", " at ");
+                    return e.displayName && V.includes("<anonymous>") && (V = V.replace("<anonymous>", e.displayName)), typeof e == "function" && ue.set(e, V), V;
+                  }
+                while (D >= 1 && P >= 0);
+              break;
+            }
+        }
+      } finally {
+        ke = !1, we.current = R, lr(), Error.prepareStackTrace = N;
+      }
+      var Z = e ? e.displayName || e.name : "", G = Z ? de(Z) : "";
+      return typeof e == "function" && ue.set(e, G), G;
+    }
+    function cr(e, a, l) {
+      return Oe(e, !1);
+    }
+    function dr(e) {
+      var a = e.prototype;
+      return !!(a && a.isReactComponent);
+    }
+    function fe(e, a, l) {
+      if (e == null)
+        return "";
+      if (typeof e == "function")
+        return Oe(e, dr(e));
+      if (typeof e == "string")
+        return de(e);
+      switch (e) {
+        case g:
+          return de("Suspense");
+        case m:
+          return de("SuspenseList");
+      }
+      if (typeof e == "object")
+        switch (e.$$typeof) {
+          case f:
+            return cr(e.render);
+          case p:
+            return fe(e.type, a, l);
+          case h: {
+            var x = e, N = x._payload, R = x._init;
+            try {
+              return fe(R(N), a, l);
+            } catch {
+            }
+          }
+        }
+      return "";
+    }
+    var ae = Object.prototype.hasOwnProperty, Ae = {}, De = L.ReactDebugCurrentFrame;
+    function me(e) {
+      if (e) {
+        var a = e._owner, l = fe(e.type, e._source, a ? a.type : null);
+        De.setExtraStackFrame(l);
+      } else
+        De.setExtraStackFrame(null);
+    }
+    function ur(e, a, l, x, N) {
+      {
+        var R = Function.call.bind(ae);
+        for (var w in e)
+          if (R(e, w)) {
+            var j = void 0;
+            try {
+              if (typeof e[w] != "function") {
+                var M = Error((x || "React class") + ": " + l + " type `" + w + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof e[w] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");
+                throw M.name = "Invariant Violation", M;
+              }
+              j = e[w](a, w, x, l, null, "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");
+            } catch (D) {
+              j = D;
+            }
+            j && !(j instanceof Error) && (me(N), _("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).", x || "React class", l, w, typeof j), me(null)), j instanceof Error && !(j.message in Ae) && (Ae[j.message] = !0, me(N), _("Failed %s type: %s", l, j.message), me(null));
+          }
+      }
+    }
+    var fr = Array.isArray;
+    function Ne(e) {
+      return fr(e);
+    }
+    function mr(e) {
+      {
+        var a = typeof Symbol == "function" && Symbol.toStringTag, l = a && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return l;
+      }
+    }
+    function pr(e) {
+      try {
+        return Pe(e), !1;
+      } catch {
+        return !0;
+      }
+    }
+    function Pe(e) {
+      return "" + e;
+    }
+    function Fe(e) {
+      if (pr(e))
+        return _("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", mr(e)), Pe(e);
+    }
+    var $e = L.ReactCurrentOwner, br = {
+      key: !0,
+      ref: !0,
+      __self: !0,
+      __source: !0
+    }, Le, Me;
+    function xr(e) {
+      if (ae.call(e, "ref")) {
+        var a = Object.getOwnPropertyDescriptor(e, "ref").get;
+        if (a && a.isReactWarning)
+          return !1;
+      }
+      return e.ref !== void 0;
+    }
+    function hr(e) {
+      if (ae.call(e, "key")) {
+        var a = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (a && a.isReactWarning)
+          return !1;
+      }
+      return e.key !== void 0;
+    }
+    function vr(e, a) {
+      typeof e.ref == "string" && $e.current;
+    }
+    function gr(e, a) {
+      {
+        var l = function() {
+          Le || (Le = !0, _("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", a));
+        };
+        l.isReactWarning = !0, Object.defineProperty(e, "key", {
+          get: l,
+          configurable: !0
+        });
+      }
+    }
+    function yr(e, a) {
+      {
+        var l = function() {
+          Me || (Me = !0, _("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", a));
+        };
+        l.isReactWarning = !0, Object.defineProperty(e, "ref", {
+          get: l,
+          configurable: !0
+        });
+      }
+    }
+    var jr = function(e, a, l, x, N, R, w) {
+      var j = {
+        // This tag allows us to uniquely identify this as a React Element
+        $$typeof: n,
+        // Built-in properties that belong on the element
+        type: e,
+        key: a,
+        ref: l,
+        props: w,
+        // Record the component responsible for creating this element.
+        _owner: R
+      };
+      return j._store = {}, Object.defineProperty(j._store, "validated", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: !1
+      }), Object.defineProperty(j, "_self", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !1,
+        value: x
+      }), Object.defineProperty(j, "_source", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !1,
+        value: N
+      }), Object.freeze && (Object.freeze(j.props), Object.freeze(j)), j;
+    };
+    function wr(e, a, l, x, N) {
+      {
+        var R, w = {}, j = null, M = null;
+        l !== void 0 && (Fe(l), j = "" + l), hr(a) && (Fe(a.key), j = "" + a.key), xr(a) && (M = a.ref, vr(a, N));
+        for (R in a)
+          ae.call(a, R) && !br.hasOwnProperty(R) && (w[R] = a[R]);
+        if (e && e.defaultProps) {
+          var D = e.defaultProps;
+          for (R in D)
+            w[R] === void 0 && (w[R] = D[R]);
+        }
+        if (j || M) {
+          var P = typeof e == "function" ? e.displayName || e.name || "Unknown" : e;
+          j && gr(w, P), M && yr(w, P);
+        }
+        return jr(e, j, M, N, x, $e.current, w);
+      }
+    }
+    var Ce = L.ReactCurrentOwner, We = L.ReactDebugCurrentFrame;
+    function Q(e) {
+      if (e) {
+        var a = e._owner, l = fe(e.type, e._source, a ? a.type : null);
+        We.setExtraStackFrame(l);
+      } else
+        We.setExtraStackFrame(null);
+    }
+    var Re;
+    Re = !1;
+    function Te(e) {
+      return typeof e == "object" && e !== null && e.$$typeof === n;
+    }
+    function qe() {
+      {
+        if (Ce.current) {
+          var e = B(Ce.current.type);
+          if (e)
+            return `
 
-// src/components/Header.jsx
-import React2, { useState } from "react";
-import { useFormStore, useFieldsArray, useUIApi, useUIStore } from "@mieweb/forms-engine";
+Check the render method of \`` + e + "`.";
+        }
+        return "";
+      }
+    }
+    function Er(e) {
+      return "";
+    }
+    var Ue = {};
+    function kr(e) {
+      {
+        var a = qe();
+        if (!a) {
+          var l = typeof e == "string" ? e : e.displayName || e.name;
+          l && (a = `
 
-// src/components/DataViewer.jsx
-import React from "react";
-import { AnimatePresence, motion } from "framer-motion";
-import yaml from "js-yaml";
-function DataViewer({
-  open,
-  onClose,
-  data,
-  title = "Data Viewer",
-  placement = "center",
+Check the top-level render call using <` + l + ">.");
+        }
+        return a;
+      }
+    }
+    function Ye(e, a) {
+      {
+        if (!e._store || e._store.validated || e.key != null)
+          return;
+        e._store.validated = !0;
+        var l = kr(a);
+        if (Ue[l])
+          return;
+        Ue[l] = !0;
+        var x = "";
+        e && e._owner && e._owner !== Ce.current && (x = " It was passed a child from " + B(e._owner.type) + "."), Q(e), _('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.', l, x), Q(null);
+      }
+    }
+    function Ve(e, a) {
+      {
+        if (typeof e != "object")
+          return;
+        if (Ne(e))
+          for (var l = 0; l < e.length; l++) {
+            var x = e[l];
+            Te(x) && Ye(x, a);
+          }
+        else if (Te(e))
+          e._store && (e._store.validated = !0);
+        else if (e) {
+          var N = k(e);
+          if (typeof N == "function" && N !== e.entries)
+            for (var R = N.call(e), w; !(w = R.next()).done; )
+              Te(w.value) && Ye(w.value, a);
+        }
+      }
+    }
+    function Nr(e) {
+      {
+        var a = e.type;
+        if (a == null || typeof a == "string")
+          return;
+        var l;
+        if (typeof a == "function")
+          l = a.propTypes;
+        else if (typeof a == "object" && (a.$$typeof === f || // Note: Memo only checks outer props here.
+        // Inner props are checked in the reconciler.
+        a.$$typeof === p))
+          l = a.propTypes;
+        else
+          return;
+        if (l) {
+          var x = B(a);
+          ur(l, e.props, "prop", x, e);
+        } else if (a.PropTypes !== void 0 && !Re) {
+          Re = !0;
+          var N = B(a);
+          _("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", N || "Unknown");
+        }
+        typeof a.getDefaultProps == "function" && !a.getDefaultProps.isReactClassApproved && _("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.");
+      }
+    }
+    function Cr(e) {
+      {
+        for (var a = Object.keys(e.props), l = 0; l < a.length; l++) {
+          var x = a[l];
+          if (x !== "children" && x !== "key") {
+            Q(e), _("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.", x), Q(null);
+            break;
+          }
+        }
+        e.ref !== null && (Q(e), _("Invalid attribute `ref` supplied to `React.Fragment`."), Q(null));
+      }
+    }
+    var Be = {};
+    function Je(e, a, l, x, N, R) {
+      {
+        var w = J(e);
+        if (!w) {
+          var j = "";
+          (e === void 0 || typeof e == "object" && e !== null && Object.keys(e).length === 0) && (j += " You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");
+          var M = Er();
+          M ? j += M : j += qe();
+          var D;
+          e === null ? D = "null" : Ne(e) ? D = "array" : e !== void 0 && e.$$typeof === n ? (D = "<" + (B(e.type) || "Unknown") + " />", j = " Did you accidentally export a JSX literal instead of a component?") : D = typeof e, _("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", D, j);
+        }
+        var P = wr(e, a, l, N, R);
+        if (P == null)
+          return P;
+        if (w) {
+          var V = a.children;
+          if (V !== void 0)
+            if (x)
+              if (Ne(V)) {
+                for (var Z = 0; Z < V.length; Z++)
+                  Ve(V[Z], e);
+                Object.freeze && Object.freeze(V);
+              } else
+                _("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");
+            else
+              Ve(V, e);
+        }
+        if (ae.call(a, "key")) {
+          var G = B(e), W = Object.keys(a).filter(function(Or) {
+            return Or !== "key";
+          }), Se = W.length > 0 ? "{key: someKey, " + W.join(": ..., ") + ": ...}" : "{key: someKey}";
+          if (!Be[G + Se]) {
+            var Ir = W.length > 0 ? "{" + W.join(": ..., ") + ": ...}" : "{}";
+            _(`A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`, Se, G, Ir, G), Be[G + Se] = !0;
+          }
+        }
+        return e === i ? Cr(P) : Nr(P), P;
+      }
+    }
+    function Rr(e, a, l) {
+      return Je(e, a, l, !0);
+    }
+    function Tr(e, a, l) {
+      return Je(e, a, l, !1);
+    }
+    var Sr = Tr, _r = Rr;
+    ie.Fragment = i, ie.jsx = Sr, ie.jsxs = _r;
+  })()), ie;
+}
+var Ke;
+function Vr() {
+  return Ke || (Ke = 1, process.env.NODE_ENV === "production" ? pe.exports = Ur() : pe.exports = Yr()), pe.exports;
+}
+var r = Vr();
+function nr({
+  open: t,
+  onClose: n,
+  data: s,
+  title: i = "Data Viewer",
+  placement: o = "center",
   // "center" | "bottom"
-  pretty = 2,
-  defaultMode = "yaml",
+  pretty: u = 2,
+  defaultMode: b = "yaml",
   // "json" | "yaml"
-  fileBaseName = "form-data",
-  contentClassName = ""
+  fileBaseName: c = "form-data",
+  contentClassName: f = ""
 }) {
-  const isCenter = placement === "center";
-  const [mode, setMode] = React.useState(defaultMode === "yaml" ? "yaml" : "json");
-  const viewerText = React.useMemo(() => {
-    const indent = Math.max(2, pretty | 0);
+  const g = o === "center", [m, p] = E.useState(b === "yaml" ? "yaml" : "json"), h = E.useMemo(() => {
+    const k = Math.max(2, u | 0);
     try {
-      return mode === "yaml" ? yaml.dump(data ?? {}, {
-        indent,
+      return m === "yaml" ? qr.dump(s ?? {}, {
+        indent: k,
         lineWidth: 80,
-        noRefs: true,
-        forceQuotes: true,
-        skipInvalid: true
-      }) : JSON.stringify(data ?? {}, null, indent);
+        noRefs: !0,
+        forceQuotes: !0,
+        skipInvalid: !0
+      }) : JSON.stringify(s ?? {}, null, k);
     } catch {
-      return mode === "yaml" ? "# Failed to render YAML" : String(data);
+      return m === "yaml" ? "# Failed to render YAML" : String(s);
     }
-  }, [data, mode, pretty]);
-  const stop = (e) => e.stopPropagation();
-  const download = (e) => {
-    stop(e);
-    const isYaml = mode === "yaml";
-    const blob = new Blob([viewerText], { type: isYaml ? "text/yaml" : "application/json" });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement("a");
-    a.href = url;
-    a.download = `${fileBaseName}.${isYaml ? "yml" : "json"}`;
-    a.click();
-    URL.revokeObjectURL(url);
-  };
-  const copy = async (e) => {
-    stop(e);
+  }, [s, m, u]), T = (k) => k.stopPropagation(), v = (k) => {
+    T(k);
+    const L = m === "yaml", _ = new Blob([h], { type: L ? "text/yaml" : "application/json" }), F = URL.createObjectURL(_), O = document.createElement("a");
+    O.href = F, O.download = `${c}.${L ? "yml" : "json"}`, O.click(), URL.revokeObjectURL(F);
+  }, S = async (k) => {
+    T(k);
     try {
-      await navigator.clipboard.writeText(viewerText);
+      await navigator.clipboard.writeText(h);
     } catch {
     }
   };
-  return /* @__PURE__ */ React.createElement(AnimatePresence, null, open && /* @__PURE__ */ React.createElement(
-    motion.div,
+  return /* @__PURE__ */ r.jsx(Wr, { children: t && /* @__PURE__ */ r.jsx(
+    K.div,
     {
       className: "fixed inset-0 z-[60] flex items-center justify-center",
       initial: { opacity: 0 },
       animate: { opacity: 1 },
       exit: { opacity: 0 },
-      onMouseDown: onClose,
+      onMouseDown: n,
       "aria-modal": "true",
-      role: "dialog"
-    },
-    /* @__PURE__ */ React.createElement("div", { className: "w-full h-full flex items-end sm:items-center justify-center sm:max-w-4xl" }, /* @__PURE__ */ React.createElement(
-      motion.div,
-      {
-        onMouseDown: stop,
-        initial: { y: isCenter ? 20 : "100%", opacity: isCenter ? 0 : 1, scale: isCenter ? 0.98 : 1 },
-        animate: { y: 0, opacity: 1, scale: 1 },
-        exit: { y: isCenter ? 20 : "100%", opacity: isCenter ? 0 : 1, scale: isCenter ? 0.98 : 1 },
-        transition: { type: "spring", stiffness: 160, damping: 20 },
-        className: isCenter ? "w-full sm:max-w-2xl sm:rounded-2xl rounded-t-2xl bg-white shadow-lg border border-black/10 max-h-[80vh] overflow-hidden" : "w-full mx-auto bg-black/5 border border-black/15 px-6 py-4 rounded-2xl backdrop-blur-xl overflow-hidden"
-      },
-      /* @__PURE__ */ React.createElement("div", { className: `flex items-center justify-between ${isCenter ? "px-4 py-3 border-b border-black/10" : ""}` }, /* @__PURE__ */ React.createElement("h3", { className: "font-semibold" }, title, " (", mode.toUpperCase(), ")"), /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement("div", { className: "inline-flex rounded-lg border border-black/10 overflow-hidden" }, /* @__PURE__ */ React.createElement(
-        "button",
+      role: "dialog",
+      children: /* @__PURE__ */ r.jsx("div", { className: "w-full h-full flex items-end sm:items-center justify-center sm:max-w-4xl", children: /* @__PURE__ */ r.jsxs(
+        K.div,
         {
-          className: `px-3 py-1 text-sm ${mode === "yaml" ? "bg-black/6" : "bg-gray-200 hover:bg-black/5"}`,
-          "aria-pressed": mode === "yaml",
-          onClick: (e) => {
-            stop(e);
-            setMode("yaml");
-          }
-        },
-        "YAML"
-      ), /* @__PURE__ */ React.createElement(
-        "button",
-        {
-          className: `px-3 py-1 text-sm ${mode === "json" ? "bg-black/6" : "bg-gray-200 hover:bg-black/5"}`,
-          "aria-pressed": mode === "json",
-          onClick: (e) => {
-            stop(e);
-            setMode("json");
-          }
-        },
-        "JSON"
-      )), /* @__PURE__ */ React.createElement("button", { className: "px-3 py-1 rounded-lg border border-black/10 hover:bg-black/5 text-sm", onClick: copy }, "Copy"), /* @__PURE__ */ React.createElement("button", { className: "px-3 py-1 rounded-lg border border-black/10 hover:bg-black/5 text-sm", onClick: download }, "Download"), /* @__PURE__ */ React.createElement(
-        "button",
-        {
-          className: "px-3 py-1 rounded-lg border border-black/10 hover:bg-black/5 text-sm",
-          onClick: (e) => {
-            stop(e);
-            onClose == null ? void 0 : onClose();
-          }
-        },
-        "Close"
-      ))),
-      /* @__PURE__ */ React.createElement("div", { className: isCenter ? `p-4 overflow-auto max-h-[70vh] ${contentClassName}` : `mt-2 p-2 rounded-lg overflow-y-auto max-h-96 ${contentClassName}` }, /* @__PURE__ */ React.createElement("pre", { className: "whitespace-pre-wrap break-words text-sm text-gray-700" }, viewerText))
-    ))
-  ));
+          onMouseDown: T,
+          initial: { y: g ? 20 : "100%", opacity: g ? 0 : 1, scale: g ? 0.98 : 1 },
+          animate: { y: 0, opacity: 1, scale: 1 },
+          exit: { y: g ? 20 : "100%", opacity: g ? 0 : 1, scale: g ? 0.98 : 1 },
+          transition: { type: "spring", stiffness: 160, damping: 20 },
+          className: g ? "w-full sm:max-w-2xl sm:rounded-2xl rounded-t-2xl bg-white shadow-lg border border-black/10 max-h-[80vh] overflow-hidden" : "w-full mx-auto bg-black/5 border border-black/15 px-6 py-4 rounded-2xl backdrop-blur-xl overflow-hidden",
+          children: [
+            /* @__PURE__ */ r.jsxs("div", { className: `flex items-center justify-between ${g ? "px-4 py-3 border-b border-black/10" : ""}`, children: [
+              /* @__PURE__ */ r.jsxs("h3", { className: "font-semibold", children: [
+                i,
+                " (",
+                m.toUpperCase(),
+                ")"
+              ] }),
+              /* @__PURE__ */ r.jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ r.jsxs("div", { className: "inline-flex rounded-lg border border-black/10 overflow-hidden", children: [
+                  /* @__PURE__ */ r.jsx(
+                    "button",
+                    {
+                      className: `px-3 py-1 text-sm ${m === "yaml" ? "bg-black/6" : "bg-gray-200 hover:bg-black/5"}`,
+                      "aria-pressed": m === "yaml",
+                      onClick: (k) => {
+                        T(k), p("yaml");
+                      },
+                      children: "YAML"
+                    }
+                  ),
+                  /* @__PURE__ */ r.jsx(
+                    "button",
+                    {
+                      className: `px-3 py-1 text-sm ${m === "json" ? "bg-black/6" : "bg-gray-200 hover:bg-black/5"}`,
+                      "aria-pressed": m === "json",
+                      onClick: (k) => {
+                        T(k), p("json");
+                      },
+                      children: "JSON"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ r.jsx("button", { className: "px-3 py-1 rounded-lg border border-black/10 hover:bg-black/5 text-sm", onClick: S, children: "Copy" }),
+                /* @__PURE__ */ r.jsx("button", { className: "px-3 py-1 rounded-lg border border-black/10 hover:bg-black/5 text-sm", onClick: v, children: "Download" }),
+                /* @__PURE__ */ r.jsx(
+                  "button",
+                  {
+                    className: "px-3 py-1 rounded-lg border border-black/10 hover:bg-black/5 text-sm",
+                    onClick: (k) => {
+                      T(k), n == null || n();
+                    },
+                    children: "Close"
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ r.jsx("div", { className: g ? `p-4 overflow-auto max-h-[70vh] ${f}` : `mt-2 p-2 rounded-lg overflow-y-auto max-h-96 ${f}`, children: /* @__PURE__ */ r.jsx("pre", { className: "whitespace-pre-wrap break-words text-sm text-gray-700", children: h }) })
+          ]
+        }
+      ) })
+    }
+  ) });
 }
-
-// src/components/Header.jsx
-function Header() {
-  const [showData, setShowData] = useState(false);
-  const replaceAll = useFormStore((s) => s.replaceAll);
-  const fieldsArray = useFieldsArray();
-  const ui = useUIApi();
-  const isPreview = ui.state.isPreview;
-  const importData = (data) => {
+function Br() {
+  const [t, n] = xe(!1), s = q((g) => g.replaceAll), i = Ie(), o = H(), u = o.state.isPreview, b = (g) => {
     try {
-      const text = String(data).replace(/^\uFEFF/, "").trim();
-      const parsed = JSON.parse(text);
-      const arr = Array.isArray(parsed) ? parsed : parsed == null ? void 0 : parsed.fields;
-      if (!Array.isArray(arr)) throw new Error("Expected [] or { fields: [] }");
-      replaceAll(arr);
-      ui.selectedFieldId.clear();
-      ui.preview.set(false);
-    } catch (err) {
-      alert((err == null ? void 0 : err.message) || "Invalid JSON format");
+      const m = String(g).replace(/^\uFEFF/, "").trim(), p = JSON.parse(m), h = Array.isArray(p) ? p : p == null ? void 0 : p.fields;
+      if (!Array.isArray(h)) throw new Error("Expected [] or { fields: [] }");
+      s(h), o.selectedFieldId.clear(), o.preview.set(!1);
+    } catch (m) {
+      alert((m == null ? void 0 : m.message) || "Invalid JSON format");
     }
+  }, c = () => {
+    o.preview.set(!0), o.selectedFieldId.clear();
+  }, f = () => {
+    o.preview.set(!1);
   };
-  const onPreview = () => {
-    ui.preview.set(true);
-    ui.selectedFieldId.clear();
-  };
-  const onEdit = () => {
-    ui.preview.set(false);
-  };
-  return /* @__PURE__ */ React2.createElement("header", { className: "sticky top-0 z-49 bg-transparent mx-auto" }, /* @__PURE__ */ React2.createElement("div", { className: "py-6 text-center" }, /* @__PURE__ */ React2.createElement("h1", { className: "text-3xl sm:text-4xl tracking-tight" }, "Questionnaire Builder"), /* @__PURE__ */ React2.createElement("p", { className: "mt-1 text-sm text-black/60" }, "Build dynamic questionnaires with JSON config and FHIR export")), /* @__PURE__ */ React2.createElement("div", { className: "max-w-6xl mx-auto px-4" }, /* @__PURE__ */ React2.createElement("div", { className: "grid grid-cols-2 rounded-xl border border-black/10 bg-white shadow-sm" }, /* @__PURE__ */ React2.createElement(
-    "button",
-    {
-      className: `py-3 rounded-xl text-sm font-medium ${!isPreview ? "bg-black/5" : ""}`,
-      onClick: onEdit
-    },
-    "Builder"
-  ), /* @__PURE__ */ React2.createElement(
-    "button",
-    {
-      className: `py-3 rounded-xl text-sm font-medium ${isPreview ? "bg-black/5" : ""}`,
-      onClick: onPreview
-    },
-    "Preview"
-  )), /* @__PURE__ */ React2.createElement("div", { className: "mt-4 flex flex-wrap gap-2 items-center justify-end" }, /* @__PURE__ */ React2.createElement("label", { className: "px-4 py-2 rounded-xl border border-black/15 bg-white hover:bg-black/5 cursor-pointer text-sm" }, "Import", /* @__PURE__ */ React2.createElement(
-    "input",
-    {
-      className: "hidden",
-      type: "file",
-      accept: ".json,application/json",
-      onChange: (e) => {
-        var _a;
-        const file = (_a = e.target.files) == null ? void 0 : _a[0];
-        if (!file) return;
-        const reader = new FileReader();
-        reader.onload = (ev) => {
-          var _a2;
-          return importData(((_a2 = ev.target) == null ? void 0 : _a2.result) ?? "");
-        };
-        reader.readAsText(file);
-        e.target.value = "";
+  return /* @__PURE__ */ r.jsxs("header", { className: "sticky top-0 z-49 bg-transparent mx-auto", children: [
+    /* @__PURE__ */ r.jsxs("div", { className: "py-6 text-center", children: [
+      /* @__PURE__ */ r.jsx("h1", { className: "text-3xl sm:text-4xl tracking-tight", children: "Questionnaire Builder" }),
+      /* @__PURE__ */ r.jsx("p", { className: "mt-1 text-sm text-black/60", children: "Build dynamic questionnaires with JSON config and FHIR export" })
+    ] }),
+    /* @__PURE__ */ r.jsxs("div", { className: "max-w-6xl mx-auto px-4", children: [
+      /* @__PURE__ */ r.jsxs("div", { className: "grid grid-cols-2 rounded-xl border border-black/10 bg-white shadow-sm", children: [
+        /* @__PURE__ */ r.jsx(
+          "button",
+          {
+            className: `py-3 rounded-xl text-sm font-medium ${u ? "" : "bg-black/10"}`,
+            onClick: f,
+            children: "Builder"
+          }
+        ),
+        /* @__PURE__ */ r.jsx(
+          "button",
+          {
+            className: `py-3 rounded-xl text-sm font-medium ${u ? "bg-black/10" : ""}`,
+            onClick: c,
+            children: "Preview"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ r.jsxs("div", { className: "mt-4 flex flex-wrap gap-2 items-center justify-end", children: [
+        /* @__PURE__ */ r.jsxs("label", { className: "px-4 py-2 rounded-xl border border-black/15 bg-white hover:bg-black/5 cursor-pointer text-sm", children: [
+          "Import",
+          /* @__PURE__ */ r.jsx(
+            "input",
+            {
+              className: "hidden",
+              type: "file",
+              accept: ".json,application/json",
+              onChange: (g) => {
+                var h;
+                const m = (h = g.target.files) == null ? void 0 : h[0];
+                if (!m) return;
+                const p = new FileReader();
+                p.onload = (T) => {
+                  var v;
+                  return b(((v = T.target) == null ? void 0 : v.result) ?? "");
+                }, p.readAsText(m), g.target.value = "";
+              }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ r.jsx(
+          "button",
+          {
+            className: "px-4 py-2 rounded-xl border border-black/15 bg-white hover:bg-black/5 text-sm",
+            onClick: () => n(!0),
+            children: "Data Viewer"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ r.jsx(
+      nr,
+      {
+        open: t,
+        onClose: () => n(!1),
+        data: i,
+        title: "Form Data",
+        placement: "bottom",
+        contentClassName: "custom-scrollbar"
       }
-    }
-  )), /* @__PURE__ */ React2.createElement(
-    "button",
-    {
-      className: "px-4 py-2 rounded-xl border border-black/15 bg-white hover:bg-black/5 text-sm",
-      onClick: () => setShowData(true)
-    },
-    "Data Viewer"
-  ))), /* @__PURE__ */ React2.createElement(
-    DataViewer,
-    {
-      open: showData,
-      onClose: () => setShowData(false),
-      data: fieldsArray,
-      title: "Form Data",
-      placement: "bottom",
-      contentClassName: "custom-scrollbar"
-    }
-  ));
+    )
+  ] });
 }
-
-// src/components/MobileToolBar.jsx
-import React3, { useState as useState2, useEffect, useRef } from "react";
-import { motion as motion2 } from "framer-motion";
-import { DATALOG_ICON, EYEEDIT_ICON, EYECLOSED_ICON, PLUSSQUARE_ICON, X_ICON } from "@mieweb/forms-engine";
-import { useFormStore as useFormStore2, useFieldsArray as useFieldsArray2, useUIApi as useUIApi2, fieldTypes } from "@mieweb/forms-engine";
-function MobileToolBar() {
-  const [isToolBarExpanded, setIsToolBarExpanded] = useState2(false);
-  const [isLogExpanded, setIsLogExpanded] = useState2(false);
-  const containerRef = useRef(null);
-  const addField = useFormStore2((s) => s.addField);
-  const fieldsArray = useFieldsArray2();
-  const ui = useUIApi2();
-  const isPreview = ui.state.isPreview;
-  const handleToolBarExpanded = () => {
-    setIsToolBarExpanded((v) => !v);
-    setIsLogExpanded(false);
+function Jr() {
+  const [t, n] = xe(!1), [s, i] = xe(!1), o = rr(null), u = q((h) => h.addField), b = Ie(), c = H(), f = c.state.isPreview, g = () => {
+    n((h) => !h), i(!1);
+  }, m = () => {
+    i((h) => !h), n(!1);
+  }, p = () => {
+    c.preview.toggle(), n(!1), i(!1);
   };
-  const handleLogExpanded = () => {
-    setIsLogExpanded((v) => !v);
-    setIsToolBarExpanded(false);
-  };
-  const handlePreviewMode = () => {
-    ui.preview.toggle();
-    setIsToolBarExpanded(false);
-    setIsLogExpanded(false);
-  };
-  useEffect(() => {
-    if (!isToolBarExpanded || isLogExpanded) return;
-    const handleDocDown = (event) => {
-      const el = containerRef.current;
-      if (el && !el.contains(event.target)) {
-        setIsToolBarExpanded(false);
-        setIsLogExpanded(false);
-      }
+  return ee(() => {
+    if (!t || s) return;
+    const h = (T) => {
+      const v = o.current;
+      v && !v.contains(T.target) && (n(!1), i(!1));
     };
-    document.addEventListener("pointerdown", handleDocDown);
-    return () => document.removeEventListener("pointerdown", handleDocDown);
-  }, [isToolBarExpanded, isLogExpanded]);
-  return /* @__PURE__ */ React3.createElement("div", { className: "MobileToolBar fixed bottom-0 left-0 w-full text-stone-900 shadow-lg z-10" }, /* @__PURE__ */ React3.createElement(
-    motion2.div,
-    {
-      initial: { y: "100%" },
-      animate: { y: "0%" },
-      transition: { duration: 0.8, ease: [0.25, 0.1, 0.25, 1] },
-      className: `flex ${!isPreview ? "justify-around" : "justify-center"} pb-5 max-w-xl sm:max-w-4xl mx-auto`
-    },
-    /* @__PURE__ */ React3.createElement(
-      motion2.button,
+    return document.addEventListener("pointerdown", h), () => document.removeEventListener("pointerdown", h);
+  }, [t, s]), /* @__PURE__ */ r.jsxs("div", { className: "MobileToolBar fixed bottom-0 left-0 w-full text-stone-900 shadow-lg z-10", children: [
+    /* @__PURE__ */ r.jsxs(
+      K.div,
       {
-        onClick: handlePreviewMode,
-        initial: { opacity: 1, scale: 1, x: "0%" },
-        animate: {
-          opacity: isToolBarExpanded || isLogExpanded ? 0 : 1,
-          scale: isToolBarExpanded || isLogExpanded ? 0 : 1,
-          x: !isPreview ? "0%" : "120%"
-        },
-        className: `relative cursor-pointer ${!isPreview ? "" : "mx-29"} bg-black/5 rounded-2xl p-3 backdrop-blur-xl`
-      },
-      !isPreview ? /* @__PURE__ */ React3.createElement(EYECLOSED_ICON, { className: "h-12 w-12" }) : /* @__PURE__ */ React3.createElement(EYEEDIT_ICON, { className: "h-12 w-12" })
+        initial: { y: "100%" },
+        animate: { y: "0%" },
+        transition: { duration: 0.8, ease: [0.25, 0.1, 0.25, 1] },
+        className: `flex ${f ? "justify-center" : "justify-around"} pb-5 max-w-xl sm:max-w-4xl mx-auto`,
+        children: [
+          /* @__PURE__ */ r.jsx(
+            K.button,
+            {
+              onClick: p,
+              initial: { opacity: 1, scale: 1, x: "0%" },
+              animate: {
+                opacity: t || s ? 0 : 1,
+                scale: t || s ? 0 : 1,
+                x: f ? "120%" : "0%"
+              },
+              className: `relative cursor-pointer ${f ? "mx-29" : ""} bg-black/5 rounded-2xl p-3 backdrop-blur-xl`,
+              children: f ? /* @__PURE__ */ r.jsx(Dr, { className: "h-12 w-12" }) : /* @__PURE__ */ r.jsx(Ar, { className: "h-12 w-12" })
+            }
+          ),
+          !f && /* @__PURE__ */ r.jsx(
+            K.button,
+            {
+              onClick: g,
+              initial: { opacity: 1, scale: 1 },
+              animate: {
+                opacity: t || s ? 0 : 1,
+                scale: t || s ? 0 : 1
+              },
+              className: "relative cursor-pointer bg-black/5 rounded-2xl p-3 backdrop-blur-xl",
+              children: /* @__PURE__ */ r.jsx(Pr, { className: "h-12 w-12" })
+            }
+          ),
+          /* @__PURE__ */ r.jsx(
+            K.button,
+            {
+              onClick: m,
+              initial: { opacity: 1, scale: 1, x: "0%" },
+              animate: {
+                opacity: s || t ? 0 : 1,
+                scale: s || t ? 0 : 1,
+                x: f ? "-120%" : "0%"
+              },
+              className: `relative cursor-pointer ${f ? "mx-29" : ""} bg-black/5 rounded-2xl p-3 backdrop-blur-xl`,
+              children: /* @__PURE__ */ r.jsx(Fr, { className: "h-12 w-12" })
+            }
+          )
+        ]
+      }
     ),
-    !isPreview && /* @__PURE__ */ React3.createElement(
-      motion2.button,
+    /* @__PURE__ */ r.jsx(
+      nr,
       {
-        onClick: handleToolBarExpanded,
-        initial: { opacity: 1, scale: 1 },
-        animate: {
-          opacity: isToolBarExpanded || isLogExpanded ? 0 : 1,
-          scale: isToolBarExpanded || isLogExpanded ? 0 : 1
-        },
-        className: "relative cursor-pointer bg-black/5 rounded-2xl p-3 backdrop-blur-xl"
-      },
-      /* @__PURE__ */ React3.createElement(PLUSSQUARE_ICON, { className: "h-12 w-12" })
+        open: s,
+        onClose: () => i(!1),
+        data: b,
+        title: "Form Data",
+        placement: "bottom",
+        contentClassName: "custom-scrollbar"
+      }
     ),
-    /* @__PURE__ */ React3.createElement(
-      motion2.button,
+    /* @__PURE__ */ r.jsx(
+      K.div,
       {
-        onClick: handleLogExpanded,
-        initial: { opacity: 1, scale: 1, x: "0%" },
+        ref: o,
+        onPointerDown: (h) => h.stopPropagation(),
+        initial: { opacity: 0, y: "100%", scale: 0 },
         animate: {
-          opacity: isLogExpanded || isToolBarExpanded ? 0 : 1,
-          scale: isLogExpanded || isToolBarExpanded ? 0 : 1,
-          x: !isPreview ? "0%" : "-120%"
+          opacity: t ? 1 : 0,
+          y: t ? "0%" : "100%",
+          scale: t ? 1 : 0.6
         },
-        className: `relative cursor-pointer ${!isPreview ? "" : "mx-29"} bg-black/5 rounded-2xl p-3 backdrop-blur-xl`
-      },
-      /* @__PURE__ */ React3.createElement(DATALOG_ICON, { className: "h-12 w-12" })
+        transition: { type: "spring", stiffness: 150, damping: 20 },
+        className: "MobileToolBar-Modal fixed bottom-0 w-full mx-auto bg-black/5 border-black/15 border px-9 py-4 mb-2 rounded-2xl backdrop-blur-xl overflow-y-scroll",
+        children: /* @__PURE__ */ r.jsxs("div", { className: "grid grid-cols-1 gap-2", children: [
+          /* @__PURE__ */ r.jsx("button", { className: "flex w-full justify-end", onClick: () => n(!1), children: /* @__PURE__ */ r.jsx($r, {}) }),
+          Object.keys(le).map((h) => /* @__PURE__ */ r.jsxs(
+            "button",
+            {
+              className: "px-4 pl-6 py-2 text-black text-left rounded hover:bg-slate-50",
+              onClick: () => {
+                u(h), n(!1);
+              },
+              children: [
+                "Add ",
+                le[h].label
+              ]
+            },
+            h
+          ))
+        ] })
+      }
     )
-  ), /* @__PURE__ */ React3.createElement(
-    DataViewer,
-    {
-      open: isLogExpanded,
-      onClose: () => setIsLogExpanded(false),
-      data: fieldsArray,
-      title: "Form Data",
-      placement: "bottom",
-      contentClassName: "custom-scrollbar"
-    }
-  ), /* @__PURE__ */ React3.createElement(
-    motion2.div,
-    {
-      ref: containerRef,
-      onPointerDown: (e) => e.stopPropagation(),
-      initial: { opacity: 0, y: "100%", scale: 0 },
-      animate: {
-        opacity: isToolBarExpanded ? 1 : 0,
-        y: isToolBarExpanded ? "0%" : "100%",
-        scale: isToolBarExpanded ? 1 : 0.6
-      },
-      transition: { type: "spring", stiffness: 150, damping: 20 },
-      className: "MobileToolBar-Modal fixed bottom-0 w-full mx-auto bg-black/5 border-black/15 border px-9 py-4 mb-2 rounded-2xl backdrop-blur-xl overflow-y-scroll"
-    },
-    /* @__PURE__ */ React3.createElement("div", { className: "grid grid-cols-1 gap-2" }, /* @__PURE__ */ React3.createElement("button", { className: "flex w-full justify-end", onClick: () => setIsToolBarExpanded(false) }, /* @__PURE__ */ React3.createElement(X_ICON, null)), Object.keys(fieldTypes).map((type) => /* @__PURE__ */ React3.createElement(
+  ] });
+}
+const He = Object.entries(le).map(([t, n]) => ({
+  type: t,
+  label: n.label
+})), zr = ({ isPreview: t = !1 }) => {
+  if (t) return null;
+  const n = q((i) => i.addField), s = re(() => {
+    const i = {};
+    for (const { type: o } of He) i[o] = () => n(o);
+    return i;
+  }, [n]);
+  return /* @__PURE__ */ r.jsxs("div", { className: "p-4 bg-white border border-gray-200 rounded-lg shadow-sm", children: [
+    /* @__PURE__ */ r.jsx("h3", { className: "text-lg font-semibold mb-3", children: "Tools" }),
+    /* @__PURE__ */ r.jsx("div", { className: "grid grid-cols-1 gap-2", children: He.map(({ type: i, label: o }) => /* @__PURE__ */ r.jsxs(
       "button",
       {
-        key: type,
-        className: "px-4 pl-6 py-2 text-black text-left rounded hover:bg-slate-50",
-        onClick: () => {
-          addField(type);
-          setIsToolBarExpanded(false);
-        }
+        className: "px-3 py-2 text-left border border-black/10 rounded-md hover:bg-slate-50",
+        onClick: s[i],
+        children: [
+          "Add ",
+          o
+        ]
       },
-      "Add ",
-      fieldTypes[type].label
-    )))
-  ));
-}
-
-// src/components/desktopLayout/Layout.jsx
-import React13 from "react";
-
-// src/components/desktopLayout/toolPanel/ToolPanel.jsx
-import React4, { useMemo } from "react";
-import { fieldTypes as fieldTypes2, useFormStore as useFormStore3 } from "@mieweb/forms-engine";
-var TOOL_ITEMS = Object.entries(fieldTypes2).map(([type, cfg]) => ({
-  type,
-  label: cfg.label
-}));
-var ToolPanelImpl = ({ isPreview = false }) => {
-  if (isPreview) return null;
-  const addField = useFormStore3((s) => s.addField);
-  const handlers = useMemo(() => {
-    const m = {};
-    for (const { type } of TOOL_ITEMS) m[type] = () => addField(type);
-    return m;
-  }, [addField]);
-  return /* @__PURE__ */ React4.createElement("div", { className: "p-4 bg-white border border-gray-200 rounded-lg shadow-sm" }, /* @__PURE__ */ React4.createElement("h3", { className: "text-lg font-semibold mb-3" }, "Tools"), /* @__PURE__ */ React4.createElement("div", { className: "grid grid-cols-1 gap-2" }, TOOL_ITEMS.map(({ type, label }) => /* @__PURE__ */ React4.createElement(
-    "button",
-    {
-      key: type,
-      className: "px-3 py-2 text-left border border-black/10 rounded-md hover:bg-slate-50",
-      onClick: handlers[type]
-    },
-    "Add ",
-    label
-  ))));
-};
-var ToolPanel = React4.memo(ToolPanelImpl, (prev, next) => prev.isPreview === next.isPreview);
-var ToolPanel_default = ToolPanel;
-
-// src/components/desktopLayout/editPanel/EditPanel.jsx
-import React11 from "react";
-
-// src/components/desktopLayout/editPanel/types/NonSectionEditor.jsx
-import React8, { useCallback, useMemo as useMemo2 } from "react";
-
-// src/components/desktopLayout/editPanel/types/CommonEditor.jsx
-import React6 from "react";
-
-// src/components/desktopLayout/editPanel/types/DraftIdEditor.jsx
-import React5 from "react";
-function DraftIdEditor({
-  id = "",
-  label = "ID",
-  onCommit,
-  validate,
-  placeholder = "Enter unique ID\u2026",
-  className = ""
+      i
+    )) })
+  ] });
+}, Gr = E.memo(zr, (t, n) => t.isPreview === n.isPreview);
+function ar({
+  id: t = "",
+  label: n = "ID",
+  onCommit: s,
+  validate: i,
+  placeholder: o = "Enter unique ID…",
+  className: u = ""
 }) {
-  const [draft, setDraft] = React5.useState(id ?? "");
-  const [err, setErr] = React5.useState("");
-  React5.useEffect(() => {
-    setDraft(id ?? "");
-    setErr("");
-  }, [id]);
-  const commit = React5.useCallback(() => {
-    const next = String(draft ?? "").trim();
-    if (!next) {
-      setErr("ID cannot be empty.");
-      setDraft(id ?? "");
+  const [b, c] = E.useState(t ?? ""), [f, g] = E.useState("");
+  E.useEffect(() => {
+    c(t ?? ""), g("");
+  }, [t]);
+  const m = E.useCallback(() => {
+    const p = String(b ?? "").trim();
+    if (!p) {
+      g("ID cannot be empty."), c(t ?? "");
       return;
     }
-    if (next === (id ?? "")) return;
-    if (typeof validate === "function") {
-      const msg = validate(next, id ?? "");
-      if (msg) {
-        setErr(msg);
-        return;
-      }
-    }
-    onCommit == null ? void 0 : onCommit(next);
-  }, [draft, id, onCommit, validate]);
-  return /* @__PURE__ */ React5.createElement("div", { className }, /* @__PURE__ */ React5.createElement("label", { className: "block text-sm mb-1" }, label), /* @__PURE__ */ React5.createElement(
-    "input",
-    {
-      className: "w-full px-3 py-2 border border-black/20 rounded",
-      value: draft,
-      onChange: (e) => {
-        if (err) setErr("");
-        setDraft(e.target.value);
-      },
-      onBlur: commit,
-      onKeyDown: (e) => {
-        if (e.key === "Enter") {
-          e.preventDefault();
-          commit();
+    if (p !== (t ?? "")) {
+      if (typeof i == "function") {
+        const h = i(p, t ?? "");
+        if (h) {
+          g(h);
+          return;
         }
-      },
-      placeholder
-    }
-  ), err ? /* @__PURE__ */ React5.createElement("p", { className: "text-xs text-red-600 mt-1" }, err) : null);
-}
-
-// src/components/desktopLayout/editPanel/types/CommonEditor.jsx
-function CommonEditor({ f, onUpdateField }) {
-  return /* @__PURE__ */ React6.createElement("div", { className: "space-y-3" }, /* @__PURE__ */ React6.createElement(
-    DraftIdEditor,
-    {
-      id: f.id ?? "",
-      onCommit: (next) => onUpdateField == null ? void 0 : onUpdateField("id", next)
-    }
-  ), /* @__PURE__ */ React6.createElement("div", null, /* @__PURE__ */ React6.createElement("label", { className: "block text-sm mb-1" }, "Label / Question"), /* @__PURE__ */ React6.createElement(
-    "input",
-    {
-      className: "w-full px-3 py-2 border border-black/20 rounded",
-      value: f.question || "",
-      onChange: (e) => onUpdateField("question", e.target.value),
-      placeholder: "Enter question text"
-    }
-  )), /* @__PURE__ */ React6.createElement("div", null, /* @__PURE__ */ React6.createElement("label", { className: "inline-flex items-center gap-2 text-sm" }, /* @__PURE__ */ React6.createElement(
-    "input",
-    {
-      type: "checkbox",
-      checked: !!f.required,
-      onChange: (e) => onUpdateField("required", e.target.checked)
-    }
-  ), "Required")), /* @__PURE__ */ React6.createElement("div", null, /* @__PURE__ */ React6.createElement("label", { className: "block text-sm mb-1" }, "Sublabel (optional)"), /* @__PURE__ */ React6.createElement(
-    "textarea",
-    {
-      className: "w-full px-3 py-2 border border-black/20 rounded",
-      value: f.sublabel || "",
-      onChange: (e) => onUpdateField("sublabel", e.target.value),
-      placeholder: "Helper text / description"
+      }
+      s == null || s(p);
     }
-  )));
+  }, [b, t, s, i]);
+  return /* @__PURE__ */ r.jsxs("div", { className: u, children: [
+    /* @__PURE__ */ r.jsx("label", { className: "block text-sm mb-1", children: n }),
+    /* @__PURE__ */ r.jsx(
+      "input",
+      {
+        className: "w-full px-3 py-2 border border-black/20 rounded",
+        value: b,
+        onChange: (p) => {
+          f && g(""), c(p.target.value);
+        },
+        onBlur: m,
+        onKeyDown: (p) => {
+          p.key === "Enter" && (p.preventDefault(), m());
+        },
+        placeholder: o
+      }
+    ),
+    f ? /* @__PURE__ */ r.jsx("p", { className: "text-xs text-red-600 mt-1", children: f }) : null
+  ] });
 }
-var CommonEditor_default = CommonEditor;
-
-// src/components/desktopLayout/editPanel/types/OptionListEditor.jsx
-import React7 from "react";
-
-// ../../node_modules/uuid/dist/esm/stringify.js
-var byteToHex = [];
-for (let i = 0; i < 256; ++i) {
-  byteToHex.push((i + 256).toString(16).slice(1));
+function sr({ f: t, onUpdateField: n }) {
+  return /* @__PURE__ */ r.jsxs("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ r.jsx(
+      ar,
+      {
+        id: t.id ?? "",
+        onCommit: (s) => n == null ? void 0 : n("id", s)
+      }
+    ),
+    /* @__PURE__ */ r.jsxs("div", { children: [
+      /* @__PURE__ */ r.jsx("label", { className: "block text-sm mb-1", children: "Label / Question" }),
+      /* @__PURE__ */ r.jsx(
+        "input",
+        {
+          className: "w-full px-3 py-2 border border-black/20 rounded",
+          value: t.question || "",
+          onChange: (s) => n("question", s.target.value),
+          placeholder: "Enter question text"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ r.jsx("div", { children: /* @__PURE__ */ r.jsxs("label", { className: "inline-flex items-center gap-2 text-sm", children: [
+      /* @__PURE__ */ r.jsx(
+        "input",
+        {
+          type: "checkbox",
+          checked: !!t.required,
+          onChange: (s) => n("required", s.target.checked)
+        }
+      ),
+      "Required"
+    ] }) }),
+    /* @__PURE__ */ r.jsxs("div", { children: [
+      /* @__PURE__ */ r.jsx("label", { className: "block text-sm mb-1", children: "Sublabel (optional)" }),
+      /* @__PURE__ */ r.jsx(
+        "textarea",
+        {
+          className: "w-full px-3 py-2 border border-black/20 rounded",
+          value: t.sublabel || "",
+          onChange: (s) => n("sublabel", s.target.value),
+          placeholder: "Helper text / description"
+        }
+      )
+    ] })
+  ] });
 }
-function unsafeStringify(arr, offset = 0) {
-  return (byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + "-" + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + "-" + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + "-" + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + "-" + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]]).toLowerCase();
+const $ = [];
+for (let t = 0; t < 256; ++t)
+  $.push((t + 256).toString(16).slice(1));
+function Kr(t, n = 0) {
+  return ($[t[n + 0]] + $[t[n + 1]] + $[t[n + 2]] + $[t[n + 3]] + "-" + $[t[n + 4]] + $[t[n + 5]] + "-" + $[t[n + 6]] + $[t[n + 7]] + "-" + $[t[n + 8]] + $[t[n + 9]] + "-" + $[t[n + 10]] + $[t[n + 11]] + $[t[n + 12]] + $[t[n + 13]] + $[t[n + 14]] + $[t[n + 15]]).toLowerCase();
 }
-
-// ../../node_modules/uuid/dist/esm/rng.js
-import { randomFillSync } from "crypto";
-var rnds8Pool = new Uint8Array(256);
-var poolPtr = rnds8Pool.length;
-function rng() {
-  if (poolPtr > rnds8Pool.length - 16) {
-    randomFillSync(rnds8Pool);
-    poolPtr = 0;
+let _e;
+const Hr = new Uint8Array(16);
+function Xr() {
+  if (!_e) {
+    if (typeof crypto > "u" || !crypto.getRandomValues)
+      throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");
+    _e = crypto.getRandomValues.bind(crypto);
   }
-  return rnds8Pool.slice(poolPtr, poolPtr += 16);
+  return _e(Hr);
 }
-
-// ../../node_modules/uuid/dist/esm/native.js
-import { randomUUID } from "crypto";
-var native_default = { randomUUID };
-
-// ../../node_modules/uuid/dist/esm/v4.js
-function v4(options, buf, offset) {
-  var _a;
-  if (native_default.randomUUID && !buf && !options) {
-    return native_default.randomUUID();
-  }
-  options = options || {};
-  const rnds = options.random ?? ((_a = options.rng) == null ? void 0 : _a.call(options)) ?? rng();
-  if (rnds.length < 16) {
+const Qr = typeof crypto < "u" && crypto.randomUUID && crypto.randomUUID.bind(crypto), Xe = { randomUUID: Qr };
+function Zr(t, n, s) {
+  var o;
+  if (Xe.randomUUID && !t)
+    return Xe.randomUUID();
+  t = t || {};
+  const i = t.random ?? ((o = t.rng) == null ? void 0 : o.call(t)) ?? Xr();
+  if (i.length < 16)
     throw new Error("Random bytes length must be >= 16");
-  }
-  rnds[6] = rnds[6] & 15 | 64;
-  rnds[8] = rnds[8] & 63 | 128;
-  if (buf) {
-    offset = offset || 0;
-    if (offset < 0 || offset + 16 > buf.length) {
-      throw new RangeError(`UUID byte range ${offset}:${offset + 15} is out of buffer bounds`);
-    }
-    for (let i = 0; i < 16; ++i) {
-      buf[offset + i] = rnds[i];
-    }
-    return buf;
-  }
-  return unsafeStringify(rnds);
+  return i[6] = i[6] & 15 | 64, i[8] = i[8] & 63 | 128, Kr(i);
 }
-var v4_default = v4;
-
-// src/components/desktopLayout/editPanel/types/OptionListEditor.jsx
-function OptionListEditor({ field, onUpdateField }) {
-  const opts = field.options || [];
-  const addOption = () => {
-    onUpdateField("options", [...opts, { id: v4_default(), value: "" }]);
-  };
-  const updateOption = (id, value) => {
-    onUpdateField(
+function ir({ field: t, onUpdateField: n }) {
+  const s = t.options || [], i = () => {
+    n("options", [...s, { id: Zr(), value: "" }]);
+  }, o = (b, c) => {
+    n(
       "options",
-      opts.map((o) => o.id === id ? { ...o, value } : o)
+      s.map((f) => f.id === b ? { ...f, value: c } : f)
     );
-  };
-  const removeOption = (id) => {
-    onUpdateField(
+  }, u = (b) => {
+    n(
       "options",
-      opts.filter((o) => o.id !== id)
+      s.filter((c) => c.id !== b)
     );
   };
-  return /* @__PURE__ */ React7.createElement("div", { className: "mt-3" }, /* @__PURE__ */ React7.createElement("div", { className: "text-sm font-medium mb-1" }, "Options"), opts.map((opt) => /* @__PURE__ */ React7.createElement("div", { key: opt.id, className: "flex items-center gap-2 mb-2" }, /* @__PURE__ */ React7.createElement(
-    "input",
-    {
-      className: "flex-1 px-3 py-2 border border-black/20 rounded",
-      value: opt.value,
-      onChange: (e) => updateOption(opt.id, e.target.value),
-      placeholder: "Option text"
-    }
-  ), /* @__PURE__ */ React7.createElement(
-    "button",
-    {
-      onClick: () => removeOption(opt.id),
-      className: "px-2 py-1 text-sm border border-black/20 rounded hover:bg-slate-50"
-    },
-    "Remove"
-  ))), /* @__PURE__ */ React7.createElement(
-    "button",
-    {
-      onClick: addOption,
-      className: "mt-1 px-3 py-2 text-sm border border-black/20 rounded hover:bg-slate-50"
-    },
-    "+ Add Option"
-  ));
+  return /* @__PURE__ */ r.jsxs("div", { className: "mt-3", children: [
+    /* @__PURE__ */ r.jsx("div", { className: "text-sm font-medium mb-1", children: "Options" }),
+    s.map((b) => /* @__PURE__ */ r.jsxs("div", { className: "flex items-center gap-2 mb-2", children: [
+      /* @__PURE__ */ r.jsx(
+        "input",
+        {
+          className: "flex-1 px-3 py-2 border border-black/20 rounded",
+          value: b.value,
+          onChange: (c) => o(b.id, c.target.value),
+          placeholder: "Option text"
+        }
+      ),
+      /* @__PURE__ */ r.jsx(
+        "button",
+        {
+          onClick: () => u(b.id),
+          className: "px-2 py-1 text-sm border border-black/20 rounded hover:bg-slate-50",
+          children: "Remove"
+        }
+      )
+    ] }, b.id)),
+    /* @__PURE__ */ r.jsx(
+      "button",
+      {
+        onClick: i,
+        className: "mt-1 px-3 py-2 text-sm border border-black/20 rounded hover:bg-slate-50",
+        children: "+ Add Option"
+      }
+    )
+  ] });
 }
-
-// src/components/desktopLayout/editPanel/types/NonSectionEditor.jsx
-import { useFormApi } from "@mieweb/forms-engine";
-function NonSectionEditor({ f }) {
-  const api = useFormApi(f.id);
-  const onUpdateField = useCallback(
-    (key, value) => api.field.update(key, value),
-    [api]
+function et({ f: t }) {
+  const n = tr(t.id), s = be(
+    (o, u) => n.field.update(o, u),
+    [n]
+  ), i = re(
+    () => ["radio", "check", "selection"].includes(t.fieldType),
+    [t.fieldType]
   );
-  const isChoice = useMemo2(
-    () => ["radio", "check", "selection"].includes(f.fieldType),
-    [f.fieldType]
-  );
-  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement("h3", { className: "text-lg font-semibold mb-3" }, "Edit"), /* @__PURE__ */ React8.createElement(CommonEditor_default, { f, onUpdateField }), f.fieldType === "input" && /* @__PURE__ */ React8.createElement("div", { className: "mt-4" }, /* @__PURE__ */ React8.createElement("div", { className: "text-sm font-medium mb-1" }, "Default Answer"), /* @__PURE__ */ React8.createElement(
-    "input",
-    {
-      className: "w-full px-3 py-2 border border-black/20 rounded",
-      value: f.answer || "",
-      onChange: (e) => onUpdateField("answer", e.target.value),
-      placeholder: "Default value"
-    }
-  )), isChoice && /* @__PURE__ */ React8.createElement(OptionListEditor, { field: f, onUpdateField }));
+  return /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
+    /* @__PURE__ */ r.jsx("h3", { className: "text-lg font-semibold mb-3", children: "Edit" }),
+    /* @__PURE__ */ r.jsx(sr, { f: t, onUpdateField: s }),
+    t.fieldType === "input" && /* @__PURE__ */ r.jsxs("div", { className: "mt-4", children: [
+      /* @__PURE__ */ r.jsx("div", { className: "text-sm font-medium mb-1", children: "Default Answer" }),
+      /* @__PURE__ */ r.jsx(
+        "input",
+        {
+          className: "w-full px-3 py-2 border border-black/20 rounded",
+          value: t.answer || "",
+          onChange: (o) => s("answer", o.target.value),
+          placeholder: "Default value"
+        }
+      )
+    ] }),
+    i && /* @__PURE__ */ r.jsx(ir, { field: t, onUpdateField: s })
+  ] });
 }
-var NonSectionEditor_default = NonSectionEditor;
-
-// src/components/desktopLayout/editPanel/types/SectionEditor.jsx
-import React9, { useState as useState3, useEffect as useEffect2, useMemo as useMemo3, useCallback as useCallback2 } from "react";
-import { fieldTypes as fieldTypes3, useFormStore as useFormStore4, useFormApi as useFormApi2 } from "@mieweb/forms-engine";
-function SectionEditor({ section, onActiveChildChange }) {
-  var _a, _b, _c;
-  const sectionApi = useFormApi2(section.id);
-  const children = Array.isArray(section.fields) ? section.fields : [];
-  const [activeChildId, setActiveChildId] = useState3(((_a = children[0]) == null ? void 0 : _a.id) || null);
-  useEffect2(() => {
-    var _a2;
-    setActiveChildId(((_a2 = children[0]) == null ? void 0 : _a2.id) || null);
-  }, [section.id]);
-  useEffect2(() => {
-    if (!children.length) {
-      if (activeChildId !== null) setActiveChildId(null);
+function rt({ section: t, onActiveChildChange: n }) {
+  var p, h, T;
+  const s = tr(t.id), i = Array.isArray(t.fields) ? t.fields : [], [o, u] = xe(((p = i[0]) == null ? void 0 : p.id) || null);
+  ee(() => {
+    var v;
+    u(((v = i[0]) == null ? void 0 : v.id) || null);
+  }, [t.id]), ee(() => {
+    if (!i.length) {
+      o !== null && u(null);
       return;
     }
-    const stillExists = children.some((c) => c.id === activeChildId);
-    if (!stillExists) setActiveChildId(children[0].id);
-  }, [children, activeChildId]);
-  useEffect2(() => {
-    onActiveChildChange == null ? void 0 : onActiveChildChange(section.id, activeChildId || null);
-  }, [section.id, activeChildId, onActiveChildChange]);
-  const onUpdateSection = useCallback2(
-    (key, value) => sectionApi.field.update(key, value),
-    [sectionApi]
-  );
-  const activeChild = useMemo3(
-    () => children.find((c) => c.id === activeChildId) || null,
-    [children, activeChildId]
-  );
-  const onUpdateChild = useCallback2(
-    (key, value) => {
-      if (!activeChild) return;
-      if (key === "id") {
-        const next = String(value ?? "").trim();
-        if (!next) return;
-        useFormStore4.getState().updateField(
-          activeChild.id,
-          { id: next },
-          {
-            sectionId: section.id,
-            onIdChange: (newId, oldId) => {
-              setActiveChildId((curr) => curr === oldId ? newId : curr);
+    i.some((S) => S.id === o) || u(i[0].id);
+  }, [i, o]), ee(() => {
+    n == null || n(t.id, o || null);
+  }, [t.id, o, n]);
+  const b = be(
+    (v, S) => s.field.update(v, S),
+    [s]
+  ), c = re(
+    () => i.find((v) => v.id === o) || null,
+    [i, o]
+  ), f = be(
+    (v, S) => {
+      if (c) {
+        if (v === "id") {
+          const k = String(S ?? "").trim();
+          if (!k) return;
+          q.getState().updateField(
+            c.id,
+            { id: k },
+            {
+              sectionId: t.id,
+              onIdChange: (L, _) => {
+                u((F) => F === _ ? L : F);
+              }
             }
-          }
+          );
+          return;
+        }
+        q.getState().updateField(
+          c.id,
+          { [v]: S },
+          { sectionId: t.id }
         );
-        return;
       }
-      useFormStore4.getState().updateField(
-        activeChild.id,
-        { [key]: value },
-        { sectionId: section.id }
-      );
     },
-    [activeChild, section.id]
+    [c, t.id]
+  ), g = be(() => {
+    c && q.getState().deleteField(c.id, { sectionId: t.id });
+  }, [c, t.id]), m = re(
+    () => c && ["radio", "check", "selection"].includes(c.fieldType),
+    [c]
   );
-  const onDeleteChild = useCallback2(() => {
-    if (!activeChild) return;
-    useFormStore4.getState().deleteField(activeChild.id, { sectionId: section.id });
-  }, [activeChild, section.id]);
-  const isChoiceChild = useMemo3(
-    () => activeChild && ["radio", "check", "selection"].includes(activeChild.fieldType),
-    [activeChild]
-  );
-  return /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement("h3", { className: "text-lg font-semibold mb-3" }, "Edit Section"), /* @__PURE__ */ React9.createElement(
-    DraftIdEditor,
-    {
-      id: section.id,
-      onCommit: (next) => sectionApi.field.renameId(next)
-    }
-  ), /* @__PURE__ */ React9.createElement("div", { className: "mt-3" }, /* @__PURE__ */ React9.createElement("label", { className: "block text-sm mb-1" }, "Section Title"), /* @__PURE__ */ React9.createElement(
-    "input",
-    {
-      className: "w-full px-3 py-2 border border-black/20 rounded",
-      value: section.title || "",
-      onChange: (e) => onUpdateSection("title", e.target.value),
-      placeholder: "Section title"
-    }
-  )), /* @__PURE__ */ React9.createElement("div", { className: "mt-6" }, /* @__PURE__ */ React9.createElement("div", { className: "text-sm font-semibold mb-2" }, "Fields in this section"), children.length === 0 ? /* @__PURE__ */ React9.createElement("div", { className: "text-sm text-gray-500" }, "No fields yet. Use the section\u2019s mini toolbar to add fields.") : /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement("div", { className: "flex flex-wrap gap-2 mb-3" }, children.map((c) => {
-    var _a2, _b2;
-    return /* @__PURE__ */ React9.createElement(
-      "button",
+  return /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
+    /* @__PURE__ */ r.jsx("h3", { className: "text-lg font-semibold mb-3", children: "Edit Section" }),
+    /* @__PURE__ */ r.jsx(
+      ar,
       {
-        key: c.id,
-        className: [
-          "px-3 py-1.5 text-sm rounded border",
-          activeChildId === c.id ? "bg-black/5 border-black/20" : "bg-white border-black/10 hover:bg-slate-50"
-        ].join(" "),
-        onClick: () => setActiveChildId(c.id),
-        title: c.question || c.fieldType
-      },
-      ((_a2 = c.question) == null ? void 0 : _a2.trim()) || ((_b2 = fieldTypes3[c.fieldType]) == null ? void 0 : _b2.label) || "Field"
-    );
-  })), activeChild && /* @__PURE__ */ React9.createElement("div", { className: "mt-2" }, /* @__PURE__ */ React9.createElement("div", { className: "text-sm font-semibold mb-2" }, "Editing: ", ((_b = activeChild.question) == null ? void 0 : _b.trim()) || ((_c = fieldTypes3[activeChild.fieldType]) == null ? void 0 : _c.label)), /* @__PURE__ */ React9.createElement(CommonEditor_default, { f: activeChild, onUpdateField: onUpdateChild }), activeChild.fieldType === "input" && /* @__PURE__ */ React9.createElement("div", { className: "mt-4" }, /* @__PURE__ */ React9.createElement("div", { className: "text-sm font-medium mb-1" }, "Default Answer"), /* @__PURE__ */ React9.createElement(
-    "input",
-    {
-      className: "w-full px-3 py-2 border border-black/20 rounded",
-      value: activeChild.answer || "",
-      onChange: (e) => onUpdateChild("answer", e.target.value),
-      placeholder: "Default value"
-    }
-  )), isChoiceChild && /* @__PURE__ */ React9.createElement(OptionListEditor, { field: activeChild, onUpdateField: onUpdateChild }), /* @__PURE__ */ React9.createElement(
-    "button",
-    {
-      className: "mt-3 px-3 py-2 text-sm text-red-400 border rounded",
-      onClick: onDeleteChild
-    },
-    "Delete this field"
-  )))));
+        id: t.id,
+        onCommit: (v) => s.field.renameId(v)
+      }
+    ),
+    /* @__PURE__ */ r.jsxs("div", { className: "mt-3", children: [
+      /* @__PURE__ */ r.jsx("label", { className: "block text-sm mb-1", children: "Section Title" }),
+      /* @__PURE__ */ r.jsx(
+        "input",
+        {
+          className: "w-full px-3 py-2 border border-black/20 rounded",
+          value: t.title || "",
+          onChange: (v) => b("title", v.target.value),
+          placeholder: "Section title"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ r.jsxs("div", { className: "mt-6", children: [
+      /* @__PURE__ */ r.jsx("div", { className: "text-sm font-semibold mb-2", children: "Fields in this section" }),
+      i.length === 0 ? /* @__PURE__ */ r.jsx("div", { className: "text-sm text-gray-500", children: "No fields yet. Use the section’s mini toolbar to add fields." }) : /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
+        /* @__PURE__ */ r.jsx("div", { className: "flex flex-wrap gap-2 mb-3", children: i.map((v) => {
+          var S, k;
+          return /* @__PURE__ */ r.jsx(
+            "button",
+            {
+              className: [
+                "px-3 py-1.5 text-sm rounded border",
+                o === v.id ? "bg-black/5 border-black/20" : "bg-white border-black/10 hover:bg-slate-50"
+              ].join(" "),
+              onClick: () => u(v.id),
+              title: v.question || v.fieldType,
+              children: ((S = v.question) == null ? void 0 : S.trim()) || ((k = le[v.fieldType]) == null ? void 0 : k.label) || "Field"
+            },
+            v.id
+          );
+        }) }),
+        c && /* @__PURE__ */ r.jsxs("div", { className: "mt-2", children: [
+          /* @__PURE__ */ r.jsxs("div", { className: "text-sm font-semibold mb-2", children: [
+            "Editing: ",
+            ((h = c.question) == null ? void 0 : h.trim()) || ((T = le[c.fieldType]) == null ? void 0 : T.label)
+          ] }),
+          /* @__PURE__ */ r.jsx(sr, { f: c, onUpdateField: f }),
+          c.fieldType === "input" && /* @__PURE__ */ r.jsxs("div", { className: "mt-4", children: [
+            /* @__PURE__ */ r.jsx("div", { className: "text-sm font-medium mb-1", children: "Default Answer" }),
+            /* @__PURE__ */ r.jsx(
+              "input",
+              {
+                className: "w-full px-3 py-2 border border-black/20 rounded",
+                value: c.answer || "",
+                onChange: (v) => f("answer", v.target.value),
+                placeholder: "Default value"
+              }
+            )
+          ] }),
+          m && /* @__PURE__ */ r.jsx(ir, { field: c, onUpdateField: f }),
+          /* @__PURE__ */ r.jsx(
+            "button",
+            {
+              className: "mt-3 px-3 py-2 text-sm text-red-400 border rounded",
+              onClick: g,
+              children: "Delete this field"
+            }
+          )
+        ] })
+      ] })
+    ] })
+  ] });
 }
-var SectionEditor_default = SectionEditor;
-
-// src/components/desktopLayout/editPanel/types/LogicEditor.jsx
-import React10 from "react";
-import { useUIApi as useUIApi3, useFormStore as useFormStore5 } from "@mieweb/forms-engine";
-function getOperatorsForFieldType(fieldType) {
-  switch (fieldType) {
+function Qe(t) {
+  switch (t) {
     case "input":
       return ["equals", "contains"];
     case "radio":
@@ -704,417 +1294,363 @@ function getOperatorsForFieldType(fieldType) {
       return ["equals"];
   }
 }
-function normOption(opt) {
-  if (opt && typeof opt === "object") {
-    const id = opt.id ?? String(opt.value ?? "");
-    const value = String(opt.value ?? opt.label ?? opt.id ?? "");
-    return { id, value };
+function Ze(t) {
+  if (t && typeof t == "object") {
+    const s = t.id ?? String(t.value ?? ""), i = String(t.value ?? t.label ?? t.id ?? "");
+    return { id: s, value: i };
   }
-  const s = String(opt ?? "");
-  return { id: s, value: s };
+  const n = String(t ?? "");
+  return { id: n, value: n };
 }
-function LogicEditor() {
-  var _a, _b, _c;
-  const ui = useUIApi3();
-  const byId = useFormStore5((s) => s.byId);
-  const setEnableWhen = useFormStore5((s) => s.setEnableWhen);
-  const updateField = useFormStore5((s) => s.updateField);
-  const selectedId = ((_a = ui == null ? void 0 : ui.selectedFieldId) == null ? void 0 : _a.value) ?? null;
-  const rawParentId = ((_b = ui == null ? void 0 : ui.selectedChildId) == null ? void 0 : _b.ParentId) ?? null;
-  const rawChildId = ((_c = ui == null ? void 0 : ui.selectedChildId) == null ? void 0 : _c.ChildId) ?? null;
-  const selectedField = selectedId ? byId[selectedId] : null;
-  const isSectionCtx = (selectedField == null ? void 0 : selectedField.fieldType) === "section";
-  const sectionChildren = React10.useMemo(() => {
-    if (!isSectionCtx) return [];
-    const arr = Array.isArray(selectedField == null ? void 0 : selectedField.fields) ? selectedField.fields : [];
-    return arr;
-  }, [isSectionCtx, selectedField]);
-  const childValidForSection = React10.useMemo(() => {
-    if (!isSectionCtx || !rawChildId) return false;
-    return sectionChildren.some((c) => c.id === rawChildId);
-  }, [isSectionCtx, rawChildId, sectionChildren]);
-  const initialTarget = React10.useMemo(() => {
-    if (!isSectionCtx) return "";
-    if (childValidForSection) return `child:${rawChildId}`;
-    return "";
-  }, [isSectionCtx, childValidForSection, rawChildId]);
-  const [target, setTarget] = React10.useState(initialTarget);
-  React10.useEffect(() => {
-    setTarget(initialTarget);
-  }, [initialTarget]);
-  React10.useEffect(() => {
-    if (!isSectionCtx) return;
-    if (target && target.startsWith("child:")) {
-      const cid = target.slice(6);
-      ui.selectedChildId.set(selectedId, cid);
-    } else {
-      ui.selectedChildId.set(null, null);
-    }
-  }, [isSectionCtx, target, selectedId, ui]);
-  const isChildScope = Boolean(isSectionCtx && target && target.startsWith("child:"));
-  const effectiveChildId = isChildScope ? target.slice(6) : null;
-  const effectiveId = isChildScope ? effectiveChildId : selectedId;
-  const field = React10.useMemo(() => {
-    if (!effectiveId) return null;
-    if (isChildScope) {
-      return sectionChildren.find((c) => c.id === effectiveChildId) ?? null;
-    }
-    return byId[effectiveId] ?? null;
-  }, [byId, effectiveId, isChildScope, effectiveChildId, sectionChildren]);
-  const targets = React10.useMemo(() => {
-    var _a2, _b2, _c2;
-    const out = [];
-    for (const f of Object.values(byId)) {
-      if (!f) continue;
-      if (f.fieldType === "section" && Array.isArray(f.fields)) {
-        const sectTitle = ((_a2 = f.title) == null ? void 0 : _a2.trim()) || "Section";
-        f.fields.forEach((c) => {
-          var _a3;
-          out.push({
-            id: c.id,
-            parentId: f.id,
-            label: `${sectTitle} \u203A ${((_a3 = c.question) == null ? void 0 : _a3.trim()) || c.id}`,
-            fieldType: c.fieldType,
-            options: Array.isArray(c.options) ? c.options : []
+function tt() {
+  var ce, te, B;
+  const t = H(), n = q((d) => d.byId), s = q((d) => d.setEnableWhen), i = q((d) => d.updateField), o = ((ce = t == null ? void 0 : t.selectedFieldId) == null ? void 0 : ce.value) ?? null;
+  (te = t == null ? void 0 : t.selectedChildId) == null || te.ParentId;
+  const u = ((B = t == null ? void 0 : t.selectedChildId) == null ? void 0 : B.ChildId) ?? null, b = o ? n[o] : null, c = (b == null ? void 0 : b.fieldType) === "section", f = E.useMemo(() => c ? Array.isArray(b == null ? void 0 : b.fields) ? b.fields : [] : [], [c, b]), g = E.useMemo(() => !c || !u ? !1 : f.some((d) => d.id === u), [c, u, f]), m = E.useMemo(() => c && g ? `child:${u}` : "", [c, g, u]), [p, h] = E.useState(m);
+  E.useEffect(() => {
+    h(m);
+  }, [m]), E.useEffect(() => {
+    if (c)
+      if (p && p.startsWith("child:")) {
+        const d = p.slice(6);
+        t.selectedChildId.set(o, d);
+      } else
+        t.selectedChildId.set(null, null);
+  }, [c, p, o, t]);
+  const T = !!(c && p && p.startsWith("child:")), v = T ? p.slice(6) : null, S = T ? v : o, k = E.useMemo(() => S ? T ? f.find((d) => d.id === v) ?? null : n[S] ?? null : null, [n, S, T, v, f]), L = E.useMemo(() => {
+    var C, I, Y;
+    const d = [];
+    for (const A of Object.values(n))
+      if (A)
+        if (A.fieldType === "section" && Array.isArray(A.fields)) {
+          const U = ((C = A.title) == null ? void 0 : C.trim()) || "Section";
+          A.fields.forEach((y) => {
+            var z;
+            d.push({
+              id: y.id,
+              parentId: A.id,
+              label: `${U} › ${((z = y.question) == null ? void 0 : z.trim()) || y.id}`,
+              fieldType: y.fieldType,
+              options: Array.isArray(y.options) ? y.options : []
+            });
           });
-        });
-      } else {
-        out.push({
-          id: f.id,
-          parentId: null,
-          label: ((_b2 = f.question) == null ? void 0 : _b2.trim()) || ((_c2 = f.title) == null ? void 0 : _c2.trim()) || f.id,
-          fieldType: f.fieldType,
-          options: Array.isArray(f.options) ? f.options : []
-        });
-      }
-    }
-    return out;
-  }, [byId]);
-  const findTarget = React10.useCallback(
-    (tid) => targets.find((t) => t.id === tid) || null,
-    [targets]
-  );
-  const writeEnableWhen = React10.useCallback(
-    (next) => {
-      if (!effectiveId) return;
-      const normalized = next && Array.isArray(next.conditions) ? { logic: next.logic || "AND", conditions: next.conditions } : void 0;
-      if (isChildScope && selectedId) {
-        updateField(effectiveId, { enableWhen: normalized }, { sectionId: selectedId });
-      } else {
-        setEnableWhen(effectiveId, normalized);
-      }
+        } else
+          d.push({
+            id: A.id,
+            parentId: null,
+            label: ((I = A.question) == null ? void 0 : I.trim()) || ((Y = A.title) == null ? void 0 : Y.trim()) || A.id,
+            fieldType: A.fieldType,
+            options: Array.isArray(A.options) ? A.options : []
+          });
+    return d;
+  }, [n]), _ = E.useCallback(
+    (d) => L.find((C) => C.id === d) || null,
+    [L]
+  ), F = E.useCallback(
+    (d) => {
+      if (!S) return;
+      const C = d && Array.isArray(d.conditions) ? { logic: d.logic || "AND", conditions: d.conditions } : void 0;
+      T && o ? i(S, { enableWhen: C }, { sectionId: o }) : s(S, C);
     },
-    [effectiveId, isChildScope, selectedId, setEnableWhen, updateField]
-  );
-  const ew = React10.useMemo(() => {
-    return (field == null ? void 0 : field.enableWhen) && Array.isArray(field.enableWhen.conditions) ? { logic: field.enableWhen.logic || "AND", conditions: field.enableWhen.conditions } : { logic: "AND", conditions: [] };
-  }, [field]);
-  const addCond = React10.useCallback(() => {
-    const next = {
-      logic: ew.logic || "AND",
+    [S, T, o, s, i]
+  ), O = E.useMemo(() => k != null && k.enableWhen && Array.isArray(k.enableWhen.conditions) ? { logic: k.enableWhen.logic || "AND", conditions: k.enableWhen.conditions } : { logic: "AND", conditions: [] }, [k]), he = E.useCallback(() => {
+    const d = {
+      logic: O.logic || "AND",
       conditions: [
-        ...Array.isArray(ew.conditions) ? ew.conditions : [],
+        ...Array.isArray(O.conditions) ? O.conditions : [],
         { targetId: "", operator: "equals", value: "" }
       ]
     };
-    writeEnableWhen(next);
-  }, [ew, writeEnableWhen]);
-  const clear = React10.useCallback(() => writeEnableWhen(null), [writeEnableWhen]);
-  const removeCond = React10.useCallback(
-    (idx) => {
-      const base = Array.isArray(ew.conditions) ? ew.conditions : [];
-      const nextConds = base.filter((_, i) => i !== idx);
-      writeEnableWhen({ ...ew, conditions: nextConds });
+    F(d);
+  }, [O, F]), ve = E.useCallback(() => F(null), [F]), ge = E.useCallback(
+    (d) => {
+      const I = (Array.isArray(O.conditions) ? O.conditions : []).filter((Y, A) => A !== d);
+      F({ ...O, conditions: I });
     },
-    [ew, writeEnableWhen]
-  );
-  const updateCond = React10.useCallback(
-    (idx, patch) => {
-      const base = Array.isArray(ew.conditions) ? ew.conditions : [];
-      const nextConds = [...base];
-      const curr = nextConds[idx] || { targetId: "", operator: "equals", value: "" };
-      const updated = { ...curr, ...patch };
-      if ("targetId" in patch) {
-        const meta = findTarget(updated.targetId);
-        const ops = getOperatorsForFieldType(meta == null ? void 0 : meta.fieldType);
-        if (!ops.includes(updated.operator)) updated.operator = ops[0] || "equals";
-        const opts = Array.isArray(meta == null ? void 0 : meta.options) ? meta.options.map(normOption) : [];
-        if (opts.length > 0) {
-          const valid = new Set(opts.map((o) => o.id));
-          if (!valid.has(updated.value)) updated.value = "";
-        }
+    [O, F]
+  ), X = E.useCallback(
+    (d, C) => {
+      const Y = [...Array.isArray(O.conditions) ? O.conditions : []], U = { ...Y[d] || { targetId: "", operator: "equals", value: "" }, ...C };
+      if ("targetId" in C) {
+        const y = _(U.targetId), z = Qe(y == null ? void 0 : y.fieldType);
+        z.includes(U.operator) || (U.operator = z[0] || "equals");
+        const ne = Array.isArray(y == null ? void 0 : y.options) ? y.options.map(Ze) : [];
+        ne.length > 0 && (new Set(ne.map((je) => je.id)).has(U.value) || (U.value = ""));
       }
-      nextConds[idx] = updated;
-      writeEnableWhen({ ...ew, conditions: nextConds });
-    },
-    [ew, findTarget, writeEnableWhen]
-  );
-  const filteredTargets = React10.useMemo(
-    () => targets.filter((t) => t.id !== effectiveId),
-    [targets, effectiveId]
-  );
-  const isDisabled = !field || !effectiveId;
-  return /* @__PURE__ */ React10.createElement("div", { className: "space-y-2" }, isSectionCtx && /* @__PURE__ */ React10.createElement("div", { className: "flex gap-2 items-center" }, /* @__PURE__ */ React10.createElement("label", { className: "text-sm" }, "Target:"), /* @__PURE__ */ React10.createElement(
-    "select",
-    {
-      className: "border p-1 rounded",
-      value: target,
-      onChange: (e) => setTarget(e.target.value)
+      Y[d] = U, F({ ...O, conditions: Y });
     },
-    /* @__PURE__ */ React10.createElement("option", { value: "" }, "Section (this)"),
-    sectionChildren.map((c) => {
-      var _a2, _b2;
-      return /* @__PURE__ */ React10.createElement("option", { key: c.id, value: `child:${c.id}` }, ((_a2 = c.question) == null ? void 0 : _a2.trim()) || ((_b2 = c.title) == null ? void 0 : _b2.trim()) || c.id);
+    [O, _, F]
+  ), oe = E.useMemo(
+    () => L.filter((d) => d.id !== S),
+    [L, S]
+  ), J = !k || !S;
+  return /* @__PURE__ */ r.jsxs("div", { className: "space-y-2", children: [
+    c && /* @__PURE__ */ r.jsxs("div", { className: "flex gap-2 items-center", children: [
+      /* @__PURE__ */ r.jsx("label", { className: "text-sm", children: "Target:" }),
+      /* @__PURE__ */ r.jsxs(
+        "select",
+        {
+          className: "border p-1 rounded",
+          value: p,
+          onChange: (d) => h(d.target.value),
+          children: [
+            /* @__PURE__ */ r.jsx("option", { value: "", children: "Section (this)" }),
+            f.map((d) => {
+              var C, I;
+              return /* @__PURE__ */ r.jsx("option", { value: `child:${d.id}`, children: ((C = d.question) == null ? void 0 : C.trim()) || ((I = d.title) == null ? void 0 : I.trim()) || d.id }, d.id);
+            })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ r.jsxs("div", { className: "flex gap-2 items-center", children: [
+      /* @__PURE__ */ r.jsx("label", { className: "text-sm", children: "Logic:" }),
+      /* @__PURE__ */ r.jsxs(
+        "select",
+        {
+          value: O.logic || "AND",
+          onChange: (d) => F({ ...O, logic: d.target.value }),
+          className: "border p-1 rounded",
+          disabled: J,
+          children: [
+            /* @__PURE__ */ r.jsx("option", { value: "AND", children: "AND" }),
+            /* @__PURE__ */ r.jsx("option", { value: "OR", children: "OR" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ r.jsx("button", { type: "button", className: "px-2 py-1 border rounded", onClick: he, disabled: J, children: "+ Condition" }),
+      /* @__PURE__ */ r.jsx("button", { type: "button", className: "px-2 py-1 border rounded", onClick: ve, disabled: J, children: "Clear" })
+    ] }),
+    (Array.isArray(O.conditions) ? O.conditions : []).map((d, C) => {
+      const I = _(d.targetId), Y = Qe(I == null ? void 0 : I.fieldType), A = Array.isArray(I == null ? void 0 : I.options) ? I.options.map(Ze) : [], U = A.length > 0;
+      return /* @__PURE__ */ r.jsxs("div", { className: "grid grid-cols-1 sm:grid-cols-7 gap-2 items-center opacity-100", children: [
+        /* @__PURE__ */ r.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => ge(C),
+            className: "px-2 py-1 border rounded sm:col-span-1",
+            title: "Remove condition",
+            disabled: J,
+            children: "✕"
+          }
+        ),
+        /* @__PURE__ */ r.jsxs(
+          "select",
+          {
+            className: "border p-1 rounded sm:col-span-3",
+            value: d.targetId,
+            onChange: (y) => X(C, { targetId: y.target.value }),
+            disabled: J,
+            children: [
+              /* @__PURE__ */ r.jsx("option", { value: "", children: "— Select field —" }),
+              oe.map((y) => /* @__PURE__ */ r.jsx("option", { value: y.id, children: y.label }, y.id))
+            ]
+          }
+        ),
+        /* @__PURE__ */ r.jsx(
+          "select",
+          {
+            className: "border p-1 rounded sm:col-span-1",
+            value: d.operator,
+            onChange: (y) => X(C, { operator: y.target.value }),
+            disabled: J || !I,
+            children: (I ? Y : ["equals"]).map((y) => /* @__PURE__ */ r.jsx("option", { value: y, children: y }, y))
+          }
+        ),
+        U ? /* @__PURE__ */ r.jsxs(
+          "select",
+          {
+            className: "border p-1 rounded sm:col-span-2",
+            value: d.value,
+            onChange: (y) => X(C, { value: y.target.value }),
+            disabled: J || !I,
+            children: [
+              /* @__PURE__ */ r.jsx("option", { value: "", children: "— Select option —" }),
+              A.map((y) => /* @__PURE__ */ r.jsx("option", { value: y.id, children: y.value }, y.id))
+            ]
+          }
+        ) : /* @__PURE__ */ r.jsx(
+          "input",
+          {
+            className: "border p-1 rounded sm:col-span-2",
+            placeholder: "Enter value",
+            value: d.value,
+            onChange: (y) => X(C, { value: y.target.value }),
+            disabled: J || !I
+          }
+        )
+      ] }, C);
     })
-  )), /* @__PURE__ */ React10.createElement("div", { className: "flex gap-2 items-center" }, /* @__PURE__ */ React10.createElement("label", { className: "text-sm" }, "Logic:"), /* @__PURE__ */ React10.createElement(
-    "select",
-    {
-      value: ew.logic || "AND",
-      onChange: (e) => writeEnableWhen({ ...ew, logic: e.target.value }),
-      className: "border p-1 rounded",
-      disabled: isDisabled
-    },
-    /* @__PURE__ */ React10.createElement("option", { value: "AND" }, "AND"),
-    /* @__PURE__ */ React10.createElement("option", { value: "OR" }, "OR")
-  ), /* @__PURE__ */ React10.createElement("button", { type: "button", className: "px-2 py-1 border rounded", onClick: addCond, disabled: isDisabled }, "+ Condition"), /* @__PURE__ */ React10.createElement("button", { type: "button", className: "px-2 py-1 border rounded", onClick: clear, disabled: isDisabled }, "Clear")), (Array.isArray(ew.conditions) ? ew.conditions : []).map((c, i) => {
-    const meta = findTarget(c.targetId);
-    const allowedOps = getOperatorsForFieldType(meta == null ? void 0 : meta.fieldType);
-    const optList = Array.isArray(meta == null ? void 0 : meta.options) ? meta.options.map(normOption) : [];
-    const hasOptions = optList.length > 0;
-    return /* @__PURE__ */ React10.createElement("div", { key: i, className: "grid grid-cols-1 sm:grid-cols-7 gap-2 items-center opacity-100" }, /* @__PURE__ */ React10.createElement(
-      "button",
-      {
-        type: "button",
-        onClick: () => removeCond(i),
-        className: "px-2 py-1 border rounded sm:col-span-1",
-        title: "Remove condition",
-        disabled: isDisabled
-      },
-      "\u2715"
-    ), /* @__PURE__ */ React10.createElement(
-      "select",
-      {
-        className: "border p-1 rounded sm:col-span-3",
-        value: c.targetId,
-        onChange: (e) => updateCond(i, { targetId: e.target.value }),
-        disabled: isDisabled
-      },
-      /* @__PURE__ */ React10.createElement("option", { value: "" }, "\u2014 Select field \u2014"),
-      filteredTargets.map((t) => /* @__PURE__ */ React10.createElement("option", { key: t.id, value: t.id }, t.label))
-    ), /* @__PURE__ */ React10.createElement(
-      "select",
-      {
-        className: "border p-1 rounded sm:col-span-1",
-        value: c.operator,
-        onChange: (e) => updateCond(i, { operator: e.target.value }),
-        disabled: isDisabled || !meta
-      },
-      (meta ? allowedOps : ["equals"]).map((op) => /* @__PURE__ */ React10.createElement("option", { key: op, value: op }, op))
-    ), hasOptions ? /* @__PURE__ */ React10.createElement(
-      "select",
-      {
-        className: "border p-1 rounded sm:col-span-2",
-        value: c.value,
-        onChange: (e) => updateCond(i, { value: e.target.value }),
-        disabled: isDisabled || !meta
-      },
-      /* @__PURE__ */ React10.createElement("option", { value: "" }, "\u2014 Select option \u2014"),
-      optList.map((opt) => /* @__PURE__ */ React10.createElement("option", { key: opt.id, value: opt.id }, opt.value))
-    ) : /* @__PURE__ */ React10.createElement(
-      "input",
-      {
-        className: "border p-1 rounded sm:col-span-2",
-        placeholder: "Enter value",
-        value: c.value,
-        onChange: (e) => updateCond(i, { value: e.target.value }),
-        disabled: isDisabled || !meta
-      }
-    ));
-  }));
+  ] });
 }
-
-// src/components/desktopLayout/editPanel/EditPanel.jsx
-import { useUIApi as useUIApi4, useFormStore as useFormStore6 } from "@mieweb/forms-engine";
-function EditPanel() {
-  const ui = useUIApi4();
-  const selectedField = useFormStore6(
-    React11.useCallback(
-      (s) => ui.selectedFieldId.value ? s.byId[ui.selectedFieldId.value] : null,
-      [ui.selectedFieldId.value]
+function er() {
+  const t = H(), n = q(
+    E.useCallback(
+      (c) => t.selectedFieldId.value ? c.byId[t.selectedFieldId.value] : null,
+      [t.selectedFieldId.value]
     )
-  );
-  const [tab, setTab] = React11.useState("EDIT");
-  const handleActiveChildChange = React11.useCallback(
-    (sectionId, childId) => {
-      ui.selectedChildId.set(sectionId, childId);
+  ), [s, i] = E.useState("EDIT"), o = E.useCallback(
+    (c, f) => {
+      t.selectedChildId.set(c, f);
     },
-    [ui.selectedChildId.set]
+    [t.selectedChildId.set]
   );
-  React11.useEffect(() => {
-    ui.selectedChildId.set(null, null);
-    setTab("EDIT");
-  }, [ui.selectedFieldId.value]);
-  if (ui.state.isPreview) return null;
-  const isNone = !selectedField;
-  const isSection = (selectedField == null ? void 0 : selectedField.fieldType) === "section";
-  return /* @__PURE__ */ React11.createElement(
+  if (E.useEffect(() => {
+    t.selectedChildId.set(null, null), i("EDIT");
+  }, [t.selectedFieldId.value]), t.state.isPreview) return null;
+  const u = !n, b = (n == null ? void 0 : n.fieldType) === "section";
+  return /* @__PURE__ */ r.jsxs(
     "div",
     {
       className: `p-4 bg-white border border-gray-200 rounded-lg shadow-sm overflow-y-auto custom-scrollbar 
-        ${selectedField ? "" : "max-h-32"} max-h-[calc(100svh-19rem)] lg:max-h-[calc(100dvh-15rem)]`
-    },
-    /* @__PURE__ */ React11.createElement(
-      "div",
-      {
-        className: "sticky top-0 z-30 mb-4 inline-flex rounded-md border border-gray-200 overflow-hidden bg-white",
-        role: "tablist"
-      },
-      /* @__PURE__ */ React11.createElement(
-        "button",
-        {
-          type: "button",
-          onClick: () => setTab("EDIT"),
-          "aria-selected": tab === "EDIT",
-          className: `px-3 py-1 text-sm ${tab === "EDIT" ? "bg-gray-100 font-semibold" : "bg-white"}`
-        },
-        "EDIT"
-      ),
-      /* @__PURE__ */ React11.createElement(
-        "button",
-        {
-          type: "button",
-          onClick: () => setTab("LOGIC"),
-          "aria-selected": tab === "LOGIC",
-          className: `px-3 py-1 text-sm border-l border-gray-200 ${tab === "LOGIC" ? "bg-gray-100 font-semibold" : "bg-white"}`
-        },
-        "LOGIC"
-      )
-    ),
-    isNone && /* @__PURE__ */ React11.createElement("div", { className: "text-gray-600" }, /* @__PURE__ */ React11.createElement("h3", { className: "text-lg font-semibold mb-2" }, "Edit"), /* @__PURE__ */ React11.createElement("p", null, "Select a field in the center panel to edit its properties.")),
-    !isNone && tab === "EDIT" && /* @__PURE__ */ React11.createElement(React11.Fragment, null, !isSection && /* @__PURE__ */ React11.createElement(NonSectionEditor_default, { f: selectedField }), isSection && /* @__PURE__ */ React11.createElement(
-      SectionEditor_default,
-      {
-        section: selectedField,
-        onActiveChildChange: handleActiveChildChange
-      }
-    )),
-    !isNone && tab === "LOGIC" && /* @__PURE__ */ React11.createElement(LogicEditor, null)
+        ${n ? "" : "max-h-32"} max-h-[calc(100svh-19rem)] lg:max-h-[calc(100dvh-15rem)]`,
+      children: [
+        /* @__PURE__ */ r.jsxs(
+          "div",
+          {
+            className: "sticky top-0 z-30 mb-4 inline-flex rounded-md border border-gray-200 overflow-hidden bg-white",
+            role: "tablist",
+            children: [
+              /* @__PURE__ */ r.jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => i("EDIT"),
+                  "aria-selected": s === "EDIT",
+                  className: `px-3 py-1 text-sm ${s === "EDIT" ? "bg-gray-100 font-semibold" : "bg-white"}`,
+                  children: "EDIT"
+                }
+              ),
+              /* @__PURE__ */ r.jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => i("LOGIC"),
+                  "aria-selected": s === "LOGIC",
+                  className: `px-3 py-1 text-sm border-l border-gray-200 ${s === "LOGIC" ? "bg-gray-100 font-semibold" : "bg-white"}`,
+                  children: "LOGIC"
+                }
+              )
+            ]
+          }
+        ),
+        u && /* @__PURE__ */ r.jsxs("div", { className: "text-gray-600", children: [
+          /* @__PURE__ */ r.jsx("h3", { className: "text-lg font-semibold mb-2", children: "Edit" }),
+          /* @__PURE__ */ r.jsx("p", { children: "Select a field in the center panel to edit its properties." })
+        ] }),
+        !u && s === "EDIT" && /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
+          !b && /* @__PURE__ */ r.jsx(et, { f: n }),
+          b && /* @__PURE__ */ r.jsx(
+            rt,
+            {
+              section: n,
+              onActiveChildChange: o
+            }
+          )
+        ] }),
+        !u && s === "LOGIC" && /* @__PURE__ */ r.jsx(tt, {})
+      ]
+    }
   );
 }
-
-// src/components/FormBuilderMain.jsx
-import React12, { useMemo as useMemo4 } from "react";
-import { fieldTypes as fieldTypes4, getFieldComponent, useFieldsArray as useFieldsArray3, useFormStore as useFormStore7, useUIApi as useUIApi5, isVisible } from "@mieweb/forms-engine";
-function FormBuilderMain() {
-  const ui = useUIApi5();
-  const fields = useFieldsArray3();
-  const allFlat = useMemo4(() => {
-    const out = [];
-    (fields || []).forEach((f) => {
-      out.push(f);
-      if ((f == null ? void 0 : f.fieldType) === "section" && Array.isArray(f.fields)) out.push(...f.fields);
-    });
-    return out;
-  }, [fields]);
-  const visibleIds = useMemo4(() => {
-    const list = ui.state.isPreview ? fields.filter((f) => isVisible(f, allFlat)) : fields;
-    return list.map((f) => f.id);
-  }, [ui.state.isPreview, fields, allFlat]);
-  return /* @__PURE__ */ React12.createElement(
+function nt() {
+  const t = H(), n = Ie(), s = re(() => {
+    const o = [];
+    return (n || []).forEach((u) => {
+      o.push(u), (u == null ? void 0 : u.fieldType) === "section" && Array.isArray(u.fields) && o.push(...u.fields);
+    }), o;
+  }, [n]), i = re(() => (t.state.isPreview ? n.filter((u) => Lr(u, s)) : n).map((u) => u.id), [t.state.isPreview, n, s]);
+  return /* @__PURE__ */ r.jsx(
     "div",
     {
       className: "w-full max-w-4xl mx-auto rounded-lg overflow-y-auto max-h-[calc(100svh-19rem)] lg:max-h-[calc(100dvh-15rem)] custom-scrollbar pr-2",
-      onClick: () => !ui.state.isPreview && ui.selectedFieldId.clear()
-    },
-    visibleIds.length === 0 ? /* @__PURE__ */ React12.createElement(EmptyState, null) : visibleIds.map((id) => /* @__PURE__ */ React12.createElement(FieldRow, { key: id, id }))
+      onClick: () => !t.state.isPreview && t.selectedFieldId.clear(),
+      children: i.length === 0 ? /* @__PURE__ */ r.jsx(st, {}) : i.map((o) => /* @__PURE__ */ r.jsx(at, { id: o }, o))
+    }
   );
 }
-var FieldRow = React12.memo(function FieldRow2({ id }) {
-  const field = useFormStore7(React12.useCallback((s) => s.byId[id], [id]));
-  if (!field) return null;
-  const FieldComponent = getFieldComponent(field.fieldType);
-  if (!FieldComponent) return null;
-  return /* @__PURE__ */ React12.createElement("div", { className: "mb-1.5", "data-field-type": field.fieldType, "data-field-id": field.id }, /* @__PURE__ */ React12.createElement(FieldComponent, { field }));
+const at = E.memo(function({ id: n }) {
+  const s = q(E.useCallback((o) => o.byId[n], [n]));
+  if (!s) return null;
+  const i = Mr(s.fieldType);
+  return i ? /* @__PURE__ */ r.jsx("div", { className: "mb-1.5", "data-field-type": s.fieldType, "data-field-id": s.id, children: /* @__PURE__ */ r.jsx(i, { field: s }) }) : null;
 });
-function EmptyState() {
-  return /* @__PURE__ */ React12.createElement("div", { className: "flex flex-col items-center justify-center h-72 bg-gradient-to-br from-gray-50 to-gray-100 border-2 border-dashed border-blue-200 rounded-xl shadow-md text-center px-8 py-10" }, /* @__PURE__ */ React12.createElement("div", { className: "text-xl font-semibold text-gray-700 mb-2" }, "Start building your questionnaire"), /* @__PURE__ */ React12.createElement("div", { className: "text-base text-gray-500" }, "Add tools with ", /* @__PURE__ */ React12.createElement("span", { className: "font-semibold text-blue-500" }, "Tool Panel"), " on the left.", /* @__PURE__ */ React12.createElement("br", null), "Select fields to edit on the ", /* @__PURE__ */ React12.createElement("span", { className: "font-semibold text-blue-500" }, "Edit Panel"), " on the left."));
+function st() {
+  return /* @__PURE__ */ r.jsxs("div", { className: "flex flex-col items-center justify-center h-72 bg-gradient-to-br from-gray-50 to-gray-100 border-2 border-dashed border-blue-200 rounded-xl shadow-md text-center px-8 py-10", children: [
+    /* @__PURE__ */ r.jsx("div", { className: "text-xl font-semibold text-gray-700 mb-2", children: "Start building your questionnaire" }),
+    /* @__PURE__ */ r.jsxs("div", { className: "text-base text-gray-500", children: [
+      "Add tools with ",
+      /* @__PURE__ */ r.jsx("span", { className: "font-semibold text-blue-500", children: "Tool Panel" }),
+      " on the left.",
+      /* @__PURE__ */ r.jsx("br", {}),
+      "Select fields to edit on the ",
+      /* @__PURE__ */ r.jsx("span", { className: "font-semibold text-blue-500", children: "Edit Panel" }),
+      " on the left."
+    ] })
+  ] });
 }
-
-// src/components/desktopLayout/Layout.jsx
-import { useUIApi as useUIApi6 } from "@mieweb/forms-engine";
-function Layout({ selectedField }) {
-  const ui = useUIApi6();
-  const isPreview = ui.state.isPreview;
-  const isEditModalOpen = ui.state.isEditModalOpen;
-  const panelResetKey = ui.state.panelResetKey;
-  const editMode = !isPreview;
-  const cols = editMode ? "lg:grid-cols-[280px_minmax(0,1fr)_320px]" : "lg:grid-cols-[minmax(0,1fr)]";
-  return /* @__PURE__ */ React13.createElement("div", { className: "w-full max-w-6xl mx-auto px-4 h-fit rounded-lg mt-2" }, /* @__PURE__ */ React13.createElement("div", { className: `grid grid-cols-1 ${cols} gap-3 h-full items-start` }, editMode && /* @__PURE__ */ React13.createElement("div", { className: "hidden lg:block" }, /* @__PURE__ */ React13.createElement(ToolPanel_default, null)), /* @__PURE__ */ React13.createElement("div", null, /* @__PURE__ */ React13.createElement(FormBuilderMain, null)), editMode && /* @__PURE__ */ React13.createElement("div", { className: "hidden lg:block" }, /* @__PURE__ */ React13.createElement(EditPanel, { key: panelResetKey })), editMode && /* @__PURE__ */ React13.createElement("div", { className: "lg:hidden" }, isEditModalOpen && selectedField && /* @__PURE__ */ React13.createElement(
-    "div",
-    {
-      className: "fixed inset-0 top-5 z-50 flex items-center justify-center bg-transparent/30 backdrop-blur-sm p-4",
-      onClick: () => ui.modal.set(false)
-    },
-    /* @__PURE__ */ React13.createElement(
+function it({ selectedField: t }) {
+  const n = H(), s = n.state.isPreview, i = n.state.isEditModalOpen, o = n.state.panelResetKey, u = !s, b = u ? "lg:grid-cols-[280px_minmax(0,1fr)_320px]" : "lg:grid-cols-[minmax(0,1fr)]";
+  return /* @__PURE__ */ r.jsx("div", { className: "w-full max-w-6xl mx-auto px-4 h-fit rounded-lg mt-2", children: /* @__PURE__ */ r.jsxs("div", { className: `grid grid-cols-1 ${b} gap-3 h-full items-start`, children: [
+    u && /* @__PURE__ */ r.jsx("div", { className: "hidden lg:block", children: /* @__PURE__ */ r.jsx(Gr, {}) }),
+    /* @__PURE__ */ r.jsx("div", { children: /* @__PURE__ */ r.jsx(nt, {}) }),
+    u && /* @__PURE__ */ r.jsx("div", { className: "hidden lg:block", children: /* @__PURE__ */ r.jsx(er, {}, o) }),
+    u && /* @__PURE__ */ r.jsx("div", { className: "lg:hidden", children: i && t && /* @__PURE__ */ r.jsx(
       "div",
       {
-        className: "w-full max-w-md mx-auto relative bg-white rounded-lg overflow-hidden",
-        onClick: (e) => e.stopPropagation()
-      },
-      /* @__PURE__ */ React13.createElement(
-        "button",
-        {
-          className: "absolute top-3 right-7 text-gray-500",
-          onClick: () => ui.modal.set(false)
-        },
-        /* @__PURE__ */ React13.createElement("span", { className: "text-3xl" }, "\xD7")
-      ),
-      /* @__PURE__ */ React13.createElement(EditPanel, { key: panelResetKey })
-    )
-  ))));
+        className: "fixed inset-0 top-5 z-50 flex items-center justify-center bg-transparent/30 backdrop-blur-sm p-4",
+        onClick: () => n.modal.set(!1),
+        children: /* @__PURE__ */ r.jsxs(
+          "div",
+          {
+            className: "w-full max-w-md mx-auto relative bg-white rounded-lg overflow-hidden",
+            onClick: (c) => c.stopPropagation(),
+            children: [
+              /* @__PURE__ */ r.jsx(
+                "button",
+                {
+                  className: "absolute top-3 right-7 text-gray-500",
+                  onClick: () => n.modal.set(!1),
+                  children: /* @__PURE__ */ r.jsx("span", { className: "text-3xl", children: "×" })
+                }
+              ),
+              /* @__PURE__ */ r.jsx(er, {}, o)
+            ]
+          }
+        )
+      }
+    ) })
+  ] }) });
 }
-
-// src/QuestionnaireEditor.jsx
-import {
-  useFormStore as useFormStore8,
-  useFormApi as useFormApi3,
-  useUIApi as useUIApi7,
-  useFieldsArray as useFieldsArray4
-} from "@mieweb/forms-engine";
-function QuestionnaireEditor({
-  initialFields,
-  onChange,
-  className = "",
-  showHeader = true,
-  showMobileToolbar = true,
-  startInPreview = false
+function ut({
+  initialFields: t,
+  onChange: n,
+  className: s = "",
+  showHeader: i = !0,
+  showMobileToolbar: o = !0,
+  startInPreview: u = !1
 }) {
-  const ui = useUIApi7();
-  const formStoreInitialized = useRef2(false);
-  useEffect3(() => {
-    if (formStoreInitialized.current) return;
-    if (Array.isArray(initialFields) && initialFields.length) {
-      useFormStore8.getState().replaceAll(initialFields);
-    }
-    ui.preview.set(!!startInPreview);
-    formStoreInitialized.current = true;
-  }, [initialFields, startInPreview, ui.preview]);
-  useEffect3(() => {
-    if (!onChange) return;
-    const unsub = useFormStore8.subscribe((s) => {
-      const arr = s.flatArray ? s.flatArray() : Object.values(s.byId);
-      onChange(arr);
-    });
-    return unsub;
-  }, [onChange]);
-  const selectedField = useFormStore8(
-    React14.useCallback(
-      (s) => ui.selectedFieldId.value ? s.byId[ui.selectedFieldId.value] : null,
-      [ui.selectedFieldId.value]
+  const b = H(), c = rr(!1);
+  ee(() => {
+    c.current || (Array.isArray(t) && t.length && q.getState().replaceAll(t), b.preview.set(!!u), c.current = !0);
+  }, [t, u, b.preview]), ee(() => n ? q.subscribe((m) => {
+    const p = m.flatArray ? m.flatArray() : Object.values(m.byId);
+    n(p);
+  }) : void 0, [n]);
+  const f = q(
+    E.useCallback(
+      (g) => b.selectedFieldId.value ? g.byId[b.selectedFieldId.value] : null,
+      [b.selectedFieldId.value]
     )
   );
-  return /* @__PURE__ */ React14.createElement("div", { className: `qb-editor-root min-h-screen bg-gray-100 font-titillium ${className}` }, showHeader && /* @__PURE__ */ React14.createElement(Header, null), showMobileToolbar && /* @__PURE__ */ React14.createElement("div", { className: "lg:hidden" }, /* @__PURE__ */ React14.createElement(MobileToolBar, null)), /* @__PURE__ */ React14.createElement(Layout, { selectedField }));
+  return /* @__PURE__ */ r.jsxs("div", { className: `qb-editor-root min-h-screen bg-gray-100 font-titillium ${s}`, children: [
+    i && /* @__PURE__ */ r.jsx(Br, {}),
+    o && /* @__PURE__ */ r.jsx("div", { className: "lg:hidden", children: /* @__PURE__ */ r.jsx(Jr, {}) }),
+    /* @__PURE__ */ r.jsx(it, { selectedField: f })
+  ] });
 }
 export {
-  QuestionnaireEditor
+  ut as QuestionnaireEditor
 };
+//# sourceMappingURL=index.js.map