@encatch/ws-react 0.0.50-beta.3 → 0.0.50-beta.5

package/README.md

@@ -35,40 +35,36 @@ yarn add @encatch/ws-react
 
 ### EncatchPreview
 
-The main component for rendering Encatch forms in your React application.
+The main component for rendering Encatch forms in an iframe. Provide `formConfig` and `formPageUrl` (e.g. your shareable app route) to render the form.
 
 ```tsx
 import { EncatchPreview } from '@encatch/ws-react';
 
 function App() {
-  const formData = {
-    theme: 'default',
-    currentMode: 'light',
-    currentLanguage: 'en',
-    questions: [],
-    questionLanguages: [],
-    otherConfigurationProperties: {},
+  const formConfig = {
+    questionnaireFields: { questions: {}, sections: [], selectedLanguages: [], translations: {} },
+    appearanceProperties: { themes: {}, featureSettings: {} },
     welcomeScreenProperties: {},
     endScreenProperties: {},
-    translations: {},
-    sections: [],
-    themeSettings: null,
-    onClose: () => console.log('Form closed'),
-    onSectionChange: (index) => console.log('Section changed:', index),
-    apiKey: 'your-api-key',
-    hostUrl: 'https://api.encatch.com',
-    feedbackConfigId: 'your-config-id',
-    identifier: 'user-identifier',
+    otherConfigurationProperties: {},
+    feedbackConfigurationId: 'your-config-id',
+    feedbackIdentifier: 'user-identifier',
   };
 
   return (
-    <EncatchPreview
-      formData={formData}
-      cssLink="https://your-styles.css"
-      scale={100}
-      persistMode="none"
-      instanceId="unique-form-id"
-    />
+    <div style={{ width: '100%', height: '500px' }}>
+      <EncatchPreview
+        formConfig={formConfig}
+        formPageUrl="https://your-shareable-app.com/s/encatch-preview-form"
+        iframeWidth="100%"
+        iframeHeight="100%"
+        scale={100}
+        formId="unique-form-id"
+        onFormEvent={(formEvent) => {
+          formEvent.onSubmit((data) => console.log('Submitted', data));
+        }}
+      />
+    </div>
   );
 }
 ```
@@ -77,12 +73,14 @@ function App() {
 
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
-| `formData` | `object` | Yes | - | Form configuration object |
-| `cssLink` | `string` | Yes | - | URL to the form's CSS stylesheet |
-| `scale` | `number` | No | `100` | Scale factor for the form (percentage) |
-| `persistMode` | `"retain" \| "reset" \| "none"` | No | `"none"` | Form state persistence mode |
-| `instanceId` | `string` | No | - | Unique identifier for filtering events |
-| `onFormEvent` | `OnFormEventHandler` | No | - | Event handler builder function |
+| `formConfig` | `EncatchFormConfig` | Yes* | - | Form configuration for the iframe. Required with formPageUrl to render. |
+| `formPageUrl` | `string` | Yes* | - | URL of the iframe form page (e.g. shareable app route). Required with formConfig to render. |
+| `formId` | `string` | No | from formConfig or "preview" | Form id for URL and message payloads. |
+| `iframeWidth` | `string` | No | `"100%"` | Container width as percentage (e.g. "100%", "80%"). |
+| `iframeHeight` | `string` | No | `"100%"` | Container height as percentage (e.g. "100%", "80%"). |
+| `scale` | `number` | No | `100` | Visual scale of iframe content, 1–100. Applied via CSS transform. |
+| `instanceId` | `string` | No | - | Unique identifier for filtering events. |
+| `onFormEvent` | `OnFormEventHandler` | No | - | Event handler builder function. |
 
 ### Event Handling with onFormEvent
 
@@ -126,8 +124,8 @@ function App() {
 
   return (
     <EncatchPreview
-      formData={formData}
-      cssLink="https://your-styles.css"
+      formConfig={formConfig}
+      formPageUrl="https://your-shareable-app.com/s/encatch-preview-form"
       instanceId="my-form"
       onFormEvent={handleFormEvents}
     />
@@ -254,14 +252,14 @@ function MultiFormApp() {
   return (
     <>
       <EncatchPreview
-        formData={surveyFormData}
-        cssLink="https://styles.css"
+        formConfig={surveyFormConfig}
+        formPageUrl="https://your-shareable-app.com/s/encatch-preview-form"
         instanceId="survey-form"
       />
 
       <EncatchPreview
-        formData={feedbackFormData}
-        cssLink="https://styles.css"
+        formConfig={feedbackFormConfig}
+        formPageUrl="https://your-shareable-app.com/s/encatch-preview-form"
         instanceId="feedback-form"
       />
     </>

package/dist/EncatchPreview.d.ts

@@ -1,66 +1,18 @@
-import { AppProps, Section } from "@encatch/schema";
 import React from "react";
 import type { EncatchFormConfig, OnFormEventHandler } from "./types";
-declare module "react" {
-    namespace JSX {
-        interface IntrinsicElements {
-            "encatch-app": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & {
-                theme?: AppProps["theme"];
-                currentMode?: "light" | "dark";
-                currentLanguage?: AppProps["currentLanguage"];
-                questions?: AppProps["questions"];
-                questionLanguages?: AppProps["questionLanguages"];
-                otherConfigurationProperties?: AppProps["otherConfigurationProperties"];
-                welcomeScreenProperties?: AppProps["welcomeScreenProperties"];
-                endScreenProperties?: AppProps["endScreenProperties"];
-                translations?: AppProps["translations"];
-                sections?: Section[];
-                themeSettings?: AppProps["themeSettings"] | null;
-                onClose?: () => void;
-                onSectionChange?: (index: number) => void;
-                apiKey?: string;
-                hostUrl?: string;
-                feedbackConfigId?: string;
-                identifier?: string;
-                cssLink?: string;
-                scale?: number;
-                persistMode?: "retain" | "reset" | "none";
-                instanceId?: string;
-            };
-        }
-    }
-}
-interface EncatchPreviewFormData {
-    theme: AppProps["theme"];
-    currentMode: "light" | "dark";
-    currentLanguage: AppProps["currentLanguage"];
-    questions: AppProps["questions"];
-    questionLanguages: AppProps["questionLanguages"];
-    otherConfigurationProperties: AppProps["otherConfigurationProperties"];
-    welcomeScreenProperties: AppProps["welcomeScreenProperties"];
-    endScreenProperties: AppProps["endScreenProperties"];
-    translations: AppProps["translations"];
-    sections: Section[];
-    themeSettings: AppProps["themeSettings"] | null;
-    onClose: () => void;
-    onSectionChange: (index: number) => void;
-    apiKey: string;
-    hostUrl: string;
-    feedbackConfigId: string;
-    identifier: string;
-}
 interface EncatchPreviewProps {
-    /** Required for inline mode (same-document rendering). Omit when using formConfig + formPageUrl. */
-    formData?: EncatchPreviewFormData;
-    /** Full form config for iframe mode. Use with formPageUrl. */
+    /** Form config for the iframe. Required together with formPageUrl to render. */
     formConfig?: EncatchFormConfig;
-    /** URL of the iframe form page (e.g. shareable origin + /encatch-preview-form). Use with formConfig. */
+    /** URL of the iframe form page (e.g. shareable origin + /encatch-preview-form). Required together with formConfig to render. */
     formPageUrl?: string;
     /** Optional form id for iframe URL query and message payloads. Defaults to formConfig.formId or "preview". */
     formId?: string;
-    cssLink?: string;
+    /** Iframe container width as a percentage string (e.g. "100%", "80%"). Default "100%". */
+    iframeWidth?: string;
+    /** Iframe container height as a percentage string (e.g. "100%", "80%"). Default "100%". */
+    iframeHeight?: string;
+    /** Visual scale of the iframe content, 1–100. Applied via CSS transform. Default 100. */
     scale?: number;
-    persistMode?: "retain" | "reset" | "none";
     instanceId?: string;
     /**
      * Callback function that receives a FormEventBuilder to register event handlers

package/dist/index.es.js

@@ -1,5 +1,5 @@
-import U, { useState as ee, useRef as B, useEffect as y, useCallback as re } from "react";
-var $ = { exports: {} }, M = {};
+import V, { useRef as J, useEffect as P, useCallback as H } from "react";
+var D = { exports: {} }, j = {};
 /**
  * @license React
  * react-jsx-runtime.production.js
@@ -9,29 +9,29 @@ var $ = { exports: {} }, M = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var te;
-function ie() {
-  if (te) return M;
-  te = 1;
-  var o = Symbol.for("react.transitional.element"), r = Symbol.for("react.fragment");
-  function n(u, c, f) {
-    var w = null;
-    if (f !== void 0 && (w = "" + f), c.key !== void 0 && (w = "" + c.key), "key" in c) {
-      f = {};
-      for (var d in c)
-        d !== "key" && (f[d] = c[d]);
-    } else f = c;
-    return c = f.ref, {
-      $$typeof: o,
-      type: u,
-      key: w,
-      ref: c !== void 0 ? c : null,
-      props: f
+var Z;
+function se() {
+  if (Z) return j;
+  Z = 1;
+  var i = Symbol.for("react.transitional.element"), r = Symbol.for("react.fragment");
+  function n(s, a, c) {
+    var p = null;
+    if (c !== void 0 && (p = "" + c), a.key !== void 0 && (p = "" + a.key), "key" in a) {
+      c = {};
+      for (var w in a)
+        w !== "key" && (c[w] = a[w]);
+    } else c = a;
+    return a = c.ref, {
+      $$typeof: i,
+      type: s,
+      key: p,
+      ref: a !== void 0 ? a : null,
+      props: c
     };
   }
-  return M.Fragment = r, M.jsx = n, M.jsxs = n, M;
+  return j.Fragment = r, j.jsx = n, j.jsxs = n, j;
 }
-var F = {};
+var N = {};
 /**
  * @license React
  * react-jsx-runtime.development.js
@@ -41,47 +41,47 @@ var F = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var ne;
+var K;
 function ae() {
-  return ne || (ne = 1, process.env.NODE_ENV !== "production" && (function() {
-    function o(e) {
+  return K || (K = 1, process.env.NODE_ENV !== "production" && (function() {
+    function i(e) {
       if (e == null) return null;
       if (typeof e == "function")
-        return e.$$typeof === V ? null : e.displayName || e.name || null;
+        return e.$$typeof === te ? null : e.displayName || e.name || null;
       if (typeof e == "string") return e;
       switch (e) {
-        case g:
+        case A:
           return "Fragment";
-        case k:
+        case u:
           return "Profiler";
-        case A:
+        case x:
           return "StrictMode";
-        case L:
+        case M:
           return "Suspense";
-        case Y:
+        case E:
           return "SuspenseList";
-        case W:
+        case o:
           return "Activity";
       }
       if (typeof e == "object")
         switch (typeof e.tag == "number" && console.error(
           "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
         ), e.$$typeof) {
-          case J:
+          case f:
             return "Portal";
-          case N:
+          case k:
             return (e.displayName || "Context") + ".Provider";
-          case j:
+          case d:
             return (e._context.displayName || "Context") + ".Consumer";
-          case i:
-            var s = e.render;
-            return e = e.displayName, e || (e = s.displayName || s.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
-          case t:
-            return s = e.displayName || null, s !== null ? s : o(e.type) || "Memo";
-          case b:
-            s = e._payload, e = e._init;
+          case F:
+            var t = e.render;
+            return e = e.displayName, e || (e = t.displayName || t.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
+          case O:
+            return t = e.displayName || null, t !== null ? t : i(e.type) || "Memo";
+          case T:
+            t = e._payload, e = e._init;
             try {
-              return o(e(s));
+              return i(e(t));
             } catch {
             }
         }
@@ -93,50 +93,50 @@ function ae() {
     function n(e) {
       try {
         r(e);
-        var s = !1;
+        var t = !1;
       } catch {
-        s = !0;
+        t = !0;
       }
-      if (s) {
-        s = console;
-        var l = s.error, m = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+      if (t) {
+        t = console;
+        var l = t.error, m = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
         return l.call(
-          s,
+          t,
           "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
           m
         ), r(e);
       }
     }
-    function u(e) {
-      if (e === g) return "<>";
-      if (typeof e == "object" && e !== null && e.$$typeof === b)
+    function s(e) {
+      if (e === A) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === T)
         return "<...>";
       try {
-        var s = o(e);
-        return s ? "<" + s + ">" : "<...>";
+        var t = i(e);
+        return t ? "<" + t + ">" : "<...>";
       } catch {
         return "<...>";
       }
     }
-    function c() {
-      var e = E.A;
+    function a() {
+      var e = Y.A;
       return e === null ? null : e.getOwner();
     }
-    function f() {
+    function c() {
       return Error("react-stack-top-frame");
     }
-    function w(e) {
-      if (I.call(e, "key")) {
-        var s = Object.getOwnPropertyDescriptor(e, "key").get;
-        if (s && s.isReactWarning) return !1;
+    function p(e) {
+      if (U.call(e, "key")) {
+        var t = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (t && t.isReactWarning) return !1;
       }
       return e.key !== void 0;
     }
-    function d(e, s) {
+    function w(e, t) {
       function l() {
-        X || (X = !0, console.error(
+        z || (z = !0, console.error(
           "%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://react.dev/link/special-props)",
-          s
+          t
         ));
       }
       l.isReactWarning = !0, Object.defineProperty(e, "key", {
@@ -144,22 +144,22 @@ function ae() {
         configurable: !0
       });
     }
-    function R() {
-      var e = o(this.type);
-      return H[e] || (H[e] = !0, console.error(
+    function h() {
+      var e = i(this.type);
+      return G[e] || (G[e] = !0, console.error(
         "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
       )), e = this.props.ref, e !== void 0 ? e : null;
     }
-    function h(e, s, l, m, S, v, z, Q) {
+    function R(e, t, l, m, _, v, $, L) {
       return l = v.ref, e = {
-        $$typeof: q,
+        $$typeof: I,
         type: e,
-        key: s,
+        key: t,
         props: v,
-        _owner: S
+        _owner: _
       }, (l !== void 0 ? l : null) !== null ? Object.defineProperty(e, "ref", {
         enumerable: !1,
-        get: R
+        get: h
       }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
         configurable: !1,
         enumerable: !1,
@@ -174,33 +174,33 @@ function ae() {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: z
+        value: $
       }), Object.defineProperty(e, "_debugTask", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: Q
+        value: L
       }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
     }
-    function C(e, s, l, m, S, v, z, Q) {
-      var p = s.children;
-      if (p !== void 0)
+    function S(e, t, l, m, _, v, $, L) {
+      var b = t.children;
+      if (b !== void 0)
         if (m)
-          if (P(p)) {
-            for (m = 0; m < p.length; m++)
-              x(p[m]);
-            Object.freeze && Object.freeze(p);
+          if (ne(b)) {
+            for (m = 0; m < b.length; m++)
+              g(b[m]);
+            Object.freeze && Object.freeze(b);
           } else
             console.error(
               "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 x(p);
-      if (I.call(s, "key")) {
-        p = o(e);
-        var O = Object.keys(s).filter(function(se) {
-          return se !== "key";
+        else g(b);
+      if (U.call(t, "key")) {
+        b = i(e);
+        var C = Object.keys(t).filter(function(oe) {
+          return oe !== "key";
         });
-        m = 0 < O.length ? "{key: someKey, " + O.join(": ..., ") + ": ...}" : "{key: someKey}", K[p + m] || (O = 0 < O.length ? "{" + O.join(": ..., ") + ": ...}" : "{}", console.error(
+        m = 0 < C.length ? "{key: someKey, " + C.join(": ..., ") + ": ...}" : "{key: someKey}", X[b + m] || (C = 0 < C.length ? "{" + C.join(": ..., ") + ": ...}" : "{}", console.error(
           `A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
@@ -208,78 +208,218 @@ React keys must be passed directly to JSX without using spread:
   let props = %s;
   <%s key={someKey} {...props} />`,
           m,
-          p,
-          O,
-          p
-        ), K[p + m] = !0);
+          b,
+          C,
+          b
+        ), X[b + m] = !0);
       }
-      if (p = null, l !== void 0 && (n(l), p = "" + l), w(s) && (n(s.key), p = "" + s.key), "key" in s) {
+      if (b = null, l !== void 0 && (n(l), b = "" + l), p(t) && (n(t.key), b = "" + t.key), "key" in t) {
         l = {};
-        for (var G in s)
-          G !== "key" && (l[G] = s[G]);
-      } else l = s;
-      return p && d(
+        for (var q in t)
+          q !== "key" && (l[q] = t[q]);
+      } else l = t;
+      return b && w(
         l,
         typeof e == "function" ? e.displayName || e.name || "Unknown" : e
-      ), h(
+      ), R(
         e,
-        p,
+        b,
         v,
-        S,
-        c(),
+        _,
+        a(),
         l,
-        z,
-        Q
+        $,
+        L
       );
     }
-    function x(e) {
-      typeof e == "object" && e !== null && e.$$typeof === q && e._store && (e._store.validated = 1);
+    function g(e) {
+      typeof e == "object" && e !== null && e.$$typeof === I && e._store && (e._store.validated = 1);
     }
-    var T = U, q = Symbol.for("react.transitional.element"), J = Symbol.for("react.portal"), g = Symbol.for("react.fragment"), A = Symbol.for("react.strict_mode"), k = Symbol.for("react.profiler"), j = Symbol.for("react.consumer"), N = Symbol.for("react.context"), i = Symbol.for("react.forward_ref"), L = Symbol.for("react.suspense"), Y = Symbol.for("react.suspense_list"), t = Symbol.for("react.memo"), b = Symbol.for("react.lazy"), W = Symbol.for("react.activity"), V = Symbol.for("react.client.reference"), E = T.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, I = Object.prototype.hasOwnProperty, P = Array.isArray, a = console.createTask ? console.createTask : function() {
+    var y = V, I = Symbol.for("react.transitional.element"), f = Symbol.for("react.portal"), A = Symbol.for("react.fragment"), x = Symbol.for("react.strict_mode"), u = Symbol.for("react.profiler"), d = Symbol.for("react.consumer"), k = Symbol.for("react.context"), F = Symbol.for("react.forward_ref"), M = Symbol.for("react.suspense"), E = Symbol.for("react.suspense_list"), O = Symbol.for("react.memo"), T = Symbol.for("react.lazy"), o = Symbol.for("react.activity"), te = Symbol.for("react.client.reference"), Y = y.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, U = Object.prototype.hasOwnProperty, ne = Array.isArray, W = console.createTask ? console.createTask : function() {
       return null;
     };
-    T = {
+    y = {
       react_stack_bottom_frame: function(e) {
         return e();
       }
     };
-    var X, H = {}, D = T.react_stack_bottom_frame.bind(
-      T,
-      f
-    )(), Z = a(u(f)), K = {};
-    F.Fragment = g, F.jsx = function(e, s, l, m, S) {
-      var v = 1e4 > E.recentlyCreatedOwnerStacks++;
-      return C(
+    var z, G = {}, B = y.react_stack_bottom_frame.bind(
+      y,
+      c
+    )(), Q = W(s(c)), X = {};
+    N.Fragment = A, N.jsx = function(e, t, l, m, _) {
+      var v = 1e4 > Y.recentlyCreatedOwnerStacks++;
+      return S(
         e,
-        s,
+        t,
         l,
         !1,
         m,
-        S,
-        v ? Error("react-stack-top-frame") : D,
-        v ? a(u(e)) : Z
+        _,
+        v ? Error("react-stack-top-frame") : B,
+        v ? W(s(e)) : Q
       );
-    }, F.jsxs = function(e, s, l, m, S) {
-      var v = 1e4 > E.recentlyCreatedOwnerStacks++;
-      return C(
+    }, N.jsxs = function(e, t, l, m, _) {
+      var v = 1e4 > Y.recentlyCreatedOwnerStacks++;
+      return S(
         e,
-        s,
+        t,
         l,
         !0,
         m,
-        S,
-        v ? Error("react-stack-top-frame") : D,
-        v ? a(u(e)) : Z
+        _,
+        v ? Error("react-stack-top-frame") : B,
+        v ? W(s(e)) : Q
       );
     };
-  })()), F;
+  })()), N;
 }
-var oe;
-function ce() {
-  return oe || (oe = 1, process.env.NODE_ENV === "production" ? $.exports = ie() : $.exports = ae()), $.exports;
+var ee;
+function ie() {
+  return ee || (ee = 1, process.env.NODE_ENV === "production" ? D.exports = se() : D.exports = ae()), D.exports;
 }
-var ue = ce();
-class le extends EventTarget {
+var ce = ie();
+const fe = ({
+  formConfig: i,
+  formPageUrl: r,
+  formId: n,
+  iframeWidth: s = "100%",
+  iframeHeight: a = "100%",
+  scale: c = 100,
+  instanceId: p,
+  onFormEvent: w
+}) => {
+  const h = !!(i && r), R = n ?? i?.formId ?? p ?? "preview", S = V.useRef(null), g = V.useRef(null), y = J(!1), I = J(() => {
+  }), f = J({});
+  P(() => {
+    if (!w) return;
+    w({
+      onSubmit: (d) => {
+        f.current.onSubmit = d;
+      },
+      onShow: (d) => {
+        f.current.onShow = d;
+      },
+      onClose: (d) => {
+        f.current.onClose = d;
+      },
+      onSectionChange: (d) => {
+        f.current.onSectionChange = d;
+      },
+      onQuestionAnswered: (d) => {
+        f.current.onQuestionAnswered = d;
+      },
+      onError: (d) => {
+        f.current.onError = d;
+      }
+    });
+  }, [w]);
+  const A = H(() => {
+    if (!g.current?.contentWindow || !i) return;
+    const u = { formId: R, ...i };
+    g.current.contentWindow.postMessage(
+      { type: "sdk:formConfig", data: u },
+      "*"
+    );
+  }, [i, R]);
+  I.current = A, P(() => {
+    !h || !y.current || I.current();
+  }, [h, i, A]);
+  const x = H(
+    (u, d) => {
+      const k = d / 100;
+      u.style.border = "none", k === 1 ? (u.style.width = "100%", u.style.height = "100%", u.style.transform = "", u.style.transformOrigin = "") : (u.style.width = `${100 / k}%`, u.style.height = `${100 / k}%`, u.style.transformOrigin = "0 0", u.style.transform = `scale(${k})`);
+    },
+    []
+  );
+  return P(() => {
+    !h || !g.current || x(g.current, c);
+  }, [h, i, r, c, x]), P(() => {
+    if (!h || !S.current || !i || !r) return;
+    const u = document.createElement("div");
+    u.style.width = "100%", u.style.height = "100%", u.style.overflow = "hidden";
+    const d = document.createElement("iframe"), k = new URL(r, window.location.origin);
+    k.searchParams.set("formId", R), d.src = k.toString(), d.title = "Encatch form", x(d, c), g.current = d, u.appendChild(d), S.current.appendChild(u);
+    const F = (M) => {
+      const E = M.data;
+      if (!E || typeof E != "object" || !E.type) return;
+      let O = E.type, T = E.formId, o = E.data;
+      switch (O.startsWith("encatch:") && (O = O.replace("encatch:", ""), T = E.payload?.feedbackConfigurationId, o = E.payload), O) {
+        case "form:ready":
+          y.current = !0, I.current();
+          break;
+        case "form:close":
+          f.current.onClose?.({ timestamp: Date.now() });
+          break;
+        case "form:complete":
+          f.current.onClose?.({ timestamp: Date.now() });
+          break;
+        case "form:submit":
+          o && f.current.onSubmit && f.current.onSubmit({
+            feedbackConfigurationId: o.feedbackConfigurationId,
+            feedbackIdentifier: o.feedbackIdentifier,
+            response: o.response,
+            isPartialSubmit: o.isPartialSubmit,
+            timestamp: Date.now()
+          });
+          break;
+        case "form:show":
+          o && f.current.onShow && f.current.onShow({
+            feedbackConfigurationId: o.feedbackConfigurationId,
+            feedbackIdentifier: o.feedbackIdentifier,
+            timestamp: Date.now()
+          });
+          break;
+        case "form:started":
+          o && f.current.onShow && f.current.onShow({
+            feedbackConfigurationId: o.feedbackConfigurationId,
+            feedbackIdentifier: o.feedbackIdentifier,
+            timestamp: Date.now()
+          });
+          break;
+        case "form:section:change":
+          o && f.current.onSectionChange && f.current.onSectionChange({
+            feedbackConfigurationId: o.feedbackConfigurationId ?? T ?? "",
+            sectionIndex: o.sectionIndex,
+            sectionId: o.sectionId,
+            timestamp: Date.now()
+          });
+          break;
+        case "form:question:answered":
+          o && f.current.onQuestionAnswered && f.current.onQuestionAnswered({
+            feedbackConfigurationId: o.feedbackConfigurationId ?? T ?? "",
+            questionId: o.questionId,
+            questionType: o.questionType,
+            answer: o.answer,
+            timestamp: Date.now()
+          });
+          break;
+        case "form:error":
+          o && f.current.onError && f.current.onError({
+            feedbackConfigurationId: o.feedbackConfigurationId ?? T ?? "",
+            questionId: o.questionId,
+            error: o.error ?? "Unknown error",
+            timestamp: Date.now()
+          });
+          break;
+      }
+    };
+    return window.addEventListener("message", F), () => {
+      window.removeEventListener("message", F), y.current = !1, u.parentNode && u.parentNode.removeChild(u), g.current = null;
+    };
+  }, [h, r, R]), /* @__PURE__ */ ce.jsx(
+    "div",
+    {
+      ref: S,
+      title: "encatchPreview1",
+      style: h ? {
+        width: s ?? "100%",
+        height: a ?? "100%"
+      } : void 0
+    }
+  );
+};
+class ue extends EventTarget {
   subscriptions = /* @__PURE__ */ new Map();
   targetOrigin = "*";
   /**
@@ -297,42 +437,42 @@ class le extends EventTarget {
   /**
    * Publish an event to all matching subscribers
    */
-  publish(r, n, u) {
+  publish(r, n, s) {
     typeof window < "u" && window.dispatchEvent(
       new CustomEvent(r, {
         detail: n,
         bubbles: !0
       })
-    ), u?.usePostMessage !== !1 && this.sendPostMessage(r, n);
+    ), s?.usePostMessage !== !1 && this.sendPostMessage(r, n);
   }
   /**
    * Subscribe to form events with optional form ID filtering
    */
-  subscribe(r, n, u) {
-    const c = Symbol("subscription"), f = {
+  subscribe(r, n, s) {
+    const a = Symbol("subscription"), c = {
       eventType: r,
       handler: n,
-      filter: u?.formId,
-      id: c,
-      once: u?.once
+      filter: s?.formId,
+      id: a,
+      once: s?.once
     };
-    this.subscriptions.has(r) || this.subscriptions.set(r, []), this.subscriptions.get(r).push(f);
-    const w = (d) => {
-      const R = d, h = this.getFormIdFromPayload(R.detail);
-      this.matchesFilter(h, u?.formId) && (n(R.detail), u?.once && typeof window < "u" && window.removeEventListener(r, w));
+    this.subscriptions.has(r) || this.subscriptions.set(r, []), this.subscriptions.get(r).push(c);
+    const p = (w) => {
+      const h = w, R = this.getFormIdFromPayload(h.detail);
+      this.matchesFilter(R, s?.formId) && (n(h.detail), s?.once && typeof window < "u" && window.removeEventListener(r, p));
     };
-    return typeof window < "u" && window.addEventListener(r, w), () => {
-      this.unsubscribe(c), typeof window < "u" && window.removeEventListener(r, w);
+    return typeof window < "u" && window.addEventListener(r, p), () => {
+      this.unsubscribe(a), typeof window < "u" && window.removeEventListener(r, p);
     };
   }
   /**
    * Unsubscribe by subscription ID
    */
   unsubscribe(r) {
-    for (const [n, u] of this.subscriptions.entries()) {
-      const c = u.findIndex((f) => f.id === r);
-      if (c !== -1) {
-        u.splice(c, 1), u.length === 0 && this.subscriptions.delete(n);
+    for (const [n, s] of this.subscriptions.entries()) {
+      const a = s.findIndex((c) => c.id === r);
+      if (a !== -1) {
+        s.splice(a, 1), s.length === 0 && this.subscriptions.delete(n);
         break;
       }
     }
@@ -341,7 +481,7 @@ class le extends EventTarget {
    * Subscribe to all form events with optional filtering
    */
   subscribeAll(r, n) {
-    const u = [
+    const s = [
       "form:show",
       "form:started",
       "form:submit",
@@ -349,23 +489,23 @@ class le extends EventTarget {
       "form:section:change",
       "form:question:answered",
       "form:error"
-    ], c = [];
-    return u.forEach((f) => {
-      const w = this.subscribe(
-        f,
-        (d) => r(f, d),
+    ], a = [];
+    return s.forEach((c) => {
+      const p = this.subscribe(
+        c,
+        (w) => r(c, w),
         n
       );
-      c.push(w);
+      a.push(p);
     }), () => {
-      c.forEach((f) => f());
+      a.forEach((c) => c());
     };
   }
   /**
    * Get active subscriptions count (for debugging)
    */
   getSubscriptionCount(r) {
-    return r ? this.subscriptions.get(r)?.length || 0 : Array.from(this.subscriptions.values()).reduce((n, u) => n + u.length, 0);
+    return r ? this.subscriptions.get(r)?.length || 0 : Array.from(this.subscriptions.values()).reduce((n, s) => n + s.length, 0);
   }
   /**
    * Clear all subscriptions for an event type (or all events)
@@ -374,241 +514,32 @@ class le extends EventTarget {
     r ? this.subscriptions.delete(r) : this.subscriptions.clear();
   }
   sendPostMessage(r, n) {
-    const u = {
+    const s = {
       type: `encatch:${r}`,
       payload: n,
       source: "encatch-form-engine"
     };
-    window.parent && window.parent !== window && window.parent.postMessage(u, this.targetOrigin), document.querySelectorAll("iframe").forEach((c) => {
-      c.contentWindow && c.contentWindow.postMessage(u, this.targetOrigin);
+    window.parent && window.parent !== window && window.parent.postMessage(s, this.targetOrigin), document.querySelectorAll("iframe").forEach((a) => {
+      a.contentWindow && a.contentWindow.postMessage(s, this.targetOrigin);
     }), typeof window.ReactNativeWebView < "u" && window.ReactNativeWebView.postMessage(JSON.stringify({
       action: r.replace("form:", ""),
       data: JSON.stringify(n)
     }));
   }
 }
-const _ = new le(), de = ({
-  formData: o,
-  formConfig: r,
-  formPageUrl: n,
-  formId: u,
-  cssLink: c,
-  scale: f = 100,
-  persistMode: w = "none",
-  instanceId: d,
-  onFormEvent: R
-}) => {
-  const h = !!(r && n), C = u ?? r?.formId ?? d ?? "preview", [x, T] = ee(!1), [q, J] = ee(!0), g = U.useRef(null), A = U.useRef(
-    null
-  ), k = U.useRef(null), j = B(!1), N = B(() => {
-  }), i = B({});
-  y(() => {
-    if (!R) return;
-    R({
-      onSubmit: (b) => {
-        i.current.onSubmit = b;
-      },
-      onShow: (b) => {
-        i.current.onShow = b;
-      },
-      onClose: (b) => {
-        i.current.onClose = b;
-      },
-      onSectionChange: (b) => {
-        i.current.onSectionChange = b;
-      },
-      onQuestionAnswered: (b) => {
-        i.current.onQuestionAnswered = b;
-      },
-      onError: (b) => {
-        i.current.onError = b;
-      }
-    });
-  }, [R]);
-  const L = re(() => {
-    if (!k.current?.contentWindow || !r) return;
-    const t = { formId: C, ...r };
-    k.current.contentWindow.postMessage(
-      { type: "sdk:formConfig", data: t },
-      "*"
-    );
-  }, [r, C]);
-  N.current = L, y(() => {
-    !h || !j.current || N.current();
-  }, [h, r, L]), y(() => {
-    if (!h || !g.current) return;
-    const t = document.createElement("iframe"), b = new URL(n, window.location.origin);
-    b.searchParams.set("formId", C), t.src = b.toString(), t.title = "Encatch form", t.style.width = "100%", t.style.height = "100%", t.style.border = "none", k.current = t, g.current.appendChild(t);
-    const W = (V) => {
-      const E = V.data;
-      if (!E || typeof E != "object" || !E.type) return;
-      let I = E.type, P = E.formId, a = E.data;
-      switch (I.startsWith("encatch:") && (I = I.replace("encatch:", ""), P = E.payload?.feedbackConfigurationId, a = E.payload), I) {
-        case "form:ready":
-          j.current = !0, N.current();
-          break;
-        case "form:close":
-          i.current.onClose?.({ timestamp: Date.now() });
-          break;
-        case "form:complete":
-          i.current.onClose?.({ timestamp: Date.now() });
-          break;
-        case "form:submit":
-          a && i.current.onSubmit && i.current.onSubmit({
-            feedbackConfigurationId: a.feedbackConfigurationId,
-            feedbackIdentifier: a.feedbackIdentifier,
-            response: a.response,
-            isPartialSubmit: a.isPartialSubmit,
-            timestamp: Date.now()
-          });
-          break;
-        case "form:show":
-          a && i.current.onShow && i.current.onShow({
-            feedbackConfigurationId: a.feedbackConfigurationId,
-            feedbackIdentifier: a.feedbackIdentifier,
-            timestamp: Date.now()
-          });
-          break;
-        case "form:started":
-          a && i.current.onShow && i.current.onShow({
-            feedbackConfigurationId: a.feedbackConfigurationId,
-            feedbackIdentifier: a.feedbackIdentifier,
-            timestamp: Date.now()
-          });
-          break;
-        case "form:section:change":
-          a && i.current.onSectionChange && i.current.onSectionChange({
-            feedbackConfigurationId: a.feedbackConfigurationId ?? P ?? "",
-            sectionIndex: a.sectionIndex,
-            sectionId: a.sectionId,
-            timestamp: Date.now()
-          });
-          break;
-        case "form:question:answered":
-          a && i.current.onQuestionAnswered && i.current.onQuestionAnswered({
-            feedbackConfigurationId: a.feedbackConfigurationId ?? P ?? "",
-            questionId: a.questionId,
-            questionType: a.questionType,
-            answer: a.answer,
-            timestamp: Date.now()
-          });
-          break;
-        case "form:error":
-          a && i.current.onError && i.current.onError({
-            feedbackConfigurationId: a.feedbackConfigurationId ?? P ?? "",
-            questionId: a.questionId,
-            error: a.error ?? "Unknown error",
-            timestamp: Date.now()
-          });
-          break;
-      }
-    };
-    return window.addEventListener("message", W), () => {
-      if (window.removeEventListener("message", W), j.current = !1, g.current && k.current)
-        try {
-          g.current.removeChild(k.current);
-        } catch {
-        }
-      k.current = null;
-    };
-  }, [h, n, C]), y(() => {
-    if (h || !d) return;
-    const t = [];
-    return i.current.onSubmit && t.push(
-      _.subscribe(
-        "form:submit",
-        i.current.onSubmit,
-        { formId: d }
-      )
-    ), i.current.onShow && t.push(
-      _.subscribe(
-        "form:show",
-        i.current.onShow,
-        { formId: d }
-      )
-    ), i.current.onClose && t.push(
-      _.subscribe(
-        "form:close",
-        i.current.onClose,
-        { formId: d }
-      )
-    ), i.current.onSectionChange && t.push(
-      _.subscribe(
-        "form:section:change",
-        i.current.onSectionChange,
-        { formId: d }
-      )
-    ), i.current.onQuestionAnswered && t.push(
-      _.subscribe(
-        "form:question:answered",
-        i.current.onQuestionAnswered,
-        { formId: d }
-      )
-    ), i.current.onError && t.push(
-      _.subscribe(
-        "form:error",
-        i.current.onError,
-        { formId: d }
-      )
-    ), () => t.forEach((b) => b());
-  }, [h, d]), y(() => {
-    if (h) {
-      T(!1);
-      return;
-    }
-    try {
-      if (!o) {
-        console.warn("[EncatchPreview] formData is not defined (inline mode)");
-        return;
-      }
-      T(!0);
-    } catch (t) {
-      console.error("[EncatchPreview] Error during data validation:", t);
-    }
-  }, [h, o]);
-  const Y = re(() => {
-    o?.onClose && o.onClose(), J(!1);
-  }, [o?.onClose]);
-  return y(() => {
-    if (h || !x || !g.current || !o) return;
-    const t = document.createElement("encatch-app");
-    return t.theme = o.theme, t.currentMode = o.currentMode, t.currentLanguage = o.currentLanguage, t.questions = o.questions, t.questionLanguages = o.questionLanguages, t.otherConfigurationProperties = o.otherConfigurationProperties, t.welcomeScreenProperties = o.welcomeScreenProperties, t.endScreenProperties = o.endScreenProperties, t.translations = o.translations, t.sections = o.sections, t.themeSettings = o.themeSettings, t.onClose = Y, t.onSectionChange = o.onSectionChange, t.apiKey = o.apiKey, t.hostUrl = o.hostUrl, t.feedbackConfigId = o.feedbackConfigId, t.identifier = o.identifier, c && (t.cssLink = c), t.scale = f, t.persistMode = w, d && (t.instanceId = d), A.current = t, g.current.appendChild(t), () => {
-      if (g.current && A.current)
-        try {
-          g.current.removeChild(A.current);
-        } catch {
-        }
-      A.current = null;
-    };
-  }, [
-    h,
-    x,
-    o,
-    c,
-    f,
-    Y,
-    w,
-    d
-  ]), q ? /* @__PURE__ */ ue.jsx(
-    "div",
-    {
-      ref: g,
-      style: h ? { width: "100%", height: "100%", minHeight: 400 } : void 0
-    }
-  ) : null;
-};
-function be(o, r, n) {
-  y(() => _.subscribe(
-    o,
+const re = new ue();
+function de(i, r, n) {
+  P(() => re.subscribe(
+    i,
     r,
     n
-  ), [o, n?.formId, r]);
+  ), [i, n?.formId, r]);
 }
-function me(o, r) {
-  y(() => _.subscribeAll(o, r), [r?.formId, o]);
+function me(i, r) {
+  P(() => re.subscribeAll(i, r), [r?.formId, i]);
 }
 export {
-  de as EncatchPreview,
-  be as useEncatchFormEvent,
+  fe as EncatchPreview,
+  de as useEncatchFormEvent,
   me as useEncatchFormEventAll
 };

package/dist/index.umd.js

@@ -1,4 +1,4 @@
-(function(S,f){typeof exports=="object"&&typeof module<"u"?f(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],f):(S=typeof globalThis<"u"?globalThis:S||self,f(S.WsReact={},S.React))})(this,(function(S,f){"use strict";var L={exports:{}},x={};/**
+(function(k,m){typeof exports=="object"&&typeof module<"u"?m(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],m):(k=typeof globalThis<"u"?globalThis:k||self,m(k.WsReact={},k.React))})(this,(function(k,m){"use strict";var M={exports:{}},x={};/**
  * @license React
  * react-jsx-runtime.production.js
  *
@@ -6,7 +6,7 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- */var B;function ne(){if(B)return x;B=1;var o=Symbol.for("react.transitional.element"),r=Symbol.for("react.fragment");function t(a,c,d){var E=null;if(d!==void 0&&(E=""+d),c.key!==void 0&&(E=""+c.key),"key"in c){d={};for(var b in c)b!=="key"&&(d[b]=c[b])}else d=c;return c=d.ref,{$$typeof:o,type:a,key:E,ref:c!==void 0?c:null,props:d}}return x.Fragment=r,x.jsx=t,x.jsxs=t,x}var N={};/**
+ */var V;function ee(){if(V)return x;V=1;var i=Symbol.for("react.transitional.element"),r=Symbol.for("react.fragment");function n(s,a,c){var w=null;if(c!==void 0&&(w=""+c),a.key!==void 0&&(w=""+a.key),"key"in a){c={};for(var h in a)h!=="key"&&(c[h]=a[h])}else c=a;return a=c.ref,{$$typeof:i,type:s,key:w,ref:a!==void 0?a:null,props:c}}return x.Fragment=r,x.jsx=n,x.jsxs=n,x}var N={};/**
  * @license React
  * react-jsx-runtime.development.js
  *
@@ -14,9 +14,9 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- */var X;function te(){return X||(X=1,process.env.NODE_ENV!=="production"&&(function(){function o(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===V?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case g:return"Fragment";case _:return"Profiler";case A:return"StrictMode";case W:return"Suspense";case $:return"SuspenseList";case U:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case J:return"Portal";case q:return(e.displayName||"Context")+".Provider";case F:return(e._context.displayName||"Context")+".Consumer";case i:var s=e.render;return e=e.displayName,e||(e=s.displayName||s.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case n:return s=e.displayName||null,s!==null?s:o(e.type)||"Memo";case m:s=e._payload,e=e._init;try{return o(e(s))}catch{}}return null}function r(e){return""+e}function t(e){try{r(e);var s=!1}catch{s=!0}if(s){s=console;var l=s.error,p=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return l.call(s,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",p),r(e)}}function a(e){if(e===g)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===m)return"<...>";try{var s=o(e);return s?"<"+s+">":"<...>"}catch{return"<...>"}}function c(){var e=v.A;return e===null?null:e.getOwner()}function d(){return Error("react-stack-top-frame")}function E(e){if(P.call(e,"key")){var s=Object.getOwnPropertyDescriptor(e,"key").get;if(s&&s.isReactWarning)return!1}return e.key!==void 0}function b(e,s){function l(){D||(D=!0,console.error("%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://react.dev/link/special-props)",s))}l.isReactWarning=!0,Object.defineProperty(e,"key",{get:l,configurable:!0})}function R(){var e=o(this.type);return Z[e]||(Z[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function w(e,s,l,p,T,k,z,Q){return l=k.ref,e={$$typeof:Y,type:e,key:s,props:k,_owner:T},(l!==void 0?l:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:R}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:z}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:Q}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function C(e,s,l,p,T,k,z,Q){var h=s.children;if(h!==void 0)if(p)if(O(h)){for(p=0;p<h.length;p++)M(h[p]);Object.freeze&&Object.freeze(h)}else console.error("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 M(h);if(P.call(s,"key")){h=o(e);var j=Object.keys(s).filter(function(fe){return fe!=="key"});p=0<j.length?"{key: someKey, "+j.join(": ..., ")+": ...}":"{key: someKey}",re[h+p]||(j=0<j.length?"{"+j.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+ */var U;function re(){return U||(U=1,process.env.NODE_ENV!=="production"&&(function(){function i(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===ce?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case C:return"Fragment";case u:return"Profiler";case F:return"StrictMode";case Y:return"Suspense";case v:return"SuspenseList";case o:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case l:return"Portal";case R:return(e.displayName||"Context")+".Provider";case d:return(e._context.displayName||"Context")+".Consumer";case D:var t=e.render;return e=e.displayName,e||(e=t.displayName||t.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case P:return t=e.displayName||null,t!==null?t:i(e.type)||"Memo";case I:t=e._payload,e=e._init;try{return i(e(t))}catch{}}return null}function r(e){return""+e}function n(e){try{r(e);var t=!1}catch{t=!0}if(t){t=console;var f=t.error,b=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return f.call(t,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",b),r(e)}}function s(e){if(e===C)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===I)return"<...>";try{var t=i(e);return t?"<"+t+">":"<...>"}catch{return"<...>"}}function a(){var e=W.A;return e===null?null:e.getOwner()}function c(){return Error("react-stack-top-frame")}function w(e){if(B.call(e,"key")){var t=Object.getOwnPropertyDescriptor(e,"key").get;if(t&&t.isReactWarning)return!1}return e.key!==void 0}function h(e,t){function f(){Q||(Q=!0,console.error("%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://react.dev/link/special-props)",t))}f.isReactWarning=!0,Object.defineProperty(e,"key",{get:f,configurable:!0})}function E(){var e=i(this.type);return X[e]||(X[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function T(e,t,f,b,S,g,q,L){return f=g.ref,e={$$typeof:O,type:e,key:t,props:g,_owner:S},(f!==void 0?f:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:E}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:q}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:L}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function A(e,t,f,b,S,g,q,L){var p=t.children;if(p!==void 0)if(b)if(ue(p)){for(b=0;b<p.length;b++)y(p[b]);Object.freeze&&Object.freeze(p)}else console.error("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 y(p);if(B.call(t,"key")){p=i(e);var j=Object.keys(t).filter(function(fe){return fe!=="key"});b=0<j.length?"{key: someKey, "+j.join(": ..., ")+": ...}":"{key: someKey}",K[p+b]||(j=0<j.length?"{"+j.join(": ..., ")+": ...}":"{}",console.error(`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} />`,p,h,j,h),re[h+p]=!0)}if(h=null,l!==void 0&&(t(l),h=""+l),E(s)&&(t(s.key),h=""+s.key),"key"in s){l={};for(var G in s)G!=="key"&&(l[G]=s[G])}else l=s;return h&&b(l,typeof e=="function"?e.displayName||e.name||"Unknown":e),w(e,h,k,T,c(),l,z,Q)}function M(e){typeof e=="object"&&e!==null&&e.$$typeof===Y&&e._store&&(e._store.validated=1)}var I=f,Y=Symbol.for("react.transitional.element"),J=Symbol.for("react.portal"),g=Symbol.for("react.fragment"),A=Symbol.for("react.strict_mode"),_=Symbol.for("react.profiler"),F=Symbol.for("react.consumer"),q=Symbol.for("react.context"),i=Symbol.for("react.forward_ref"),W=Symbol.for("react.suspense"),$=Symbol.for("react.suspense_list"),n=Symbol.for("react.memo"),m=Symbol.for("react.lazy"),U=Symbol.for("react.activity"),V=Symbol.for("react.client.reference"),v=I.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,P=Object.prototype.hasOwnProperty,O=Array.isArray,u=console.createTask?console.createTask:function(){return null};I={react_stack_bottom_frame:function(e){return e()}};var D,Z={},K=I.react_stack_bottom_frame.bind(I,d)(),ee=u(a(d)),re={};N.Fragment=g,N.jsx=function(e,s,l,p,T){var k=1e4>v.recentlyCreatedOwnerStacks++;return C(e,s,l,!1,p,T,k?Error("react-stack-top-frame"):K,k?u(a(e)):ee)},N.jsxs=function(e,s,l,p,T){var k=1e4>v.recentlyCreatedOwnerStacks++;return C(e,s,l,!0,p,T,k?Error("react-stack-top-frame"):K,k?u(a(e)):ee)}})()),N}var H;function oe(){return H||(H=1,process.env.NODE_ENV==="production"?L.exports=ne():L.exports=te()),L.exports}var se=oe();class ie extends EventTarget{subscriptions=new Map;targetOrigin="*";matchesFilter(r,t){return!t||t==="*"||t===null||t===void 0?!0:typeof t=="string"?r===t:Array.isArray(t)?t.includes(r||""):typeof t=="function"?t(r||""):!1}getFormIdFromPayload(r){return r?.feedbackConfigurationId}publish(r,t,a){typeof window<"u"&&window.dispatchEvent(new CustomEvent(r,{detail:t,bubbles:!0})),a?.usePostMessage!==!1&&this.sendPostMessage(r,t)}subscribe(r,t,a){const c=Symbol("subscription"),d={eventType:r,handler:t,filter:a?.formId,id:c,once:a?.once};this.subscriptions.has(r)||this.subscriptions.set(r,[]),this.subscriptions.get(r).push(d);const E=b=>{const R=b,w=this.getFormIdFromPayload(R.detail);this.matchesFilter(w,a?.formId)&&(t(R.detail),a?.once&&typeof window<"u"&&window.removeEventListener(r,E))};return typeof window<"u"&&window.addEventListener(r,E),()=>{this.unsubscribe(c),typeof window<"u"&&window.removeEventListener(r,E)}}unsubscribe(r){for(const[t,a]of this.subscriptions.entries()){const c=a.findIndex(d=>d.id===r);if(c!==-1){a.splice(c,1),a.length===0&&this.subscriptions.delete(t);break}}}subscribeAll(r,t){const a=["form:show","form:started","form:submit","form:close","form:section:change","form:question:answered","form:error"],c=[];return a.forEach(d=>{const E=this.subscribe(d,b=>r(d,b),t);c.push(E)}),()=>{c.forEach(d=>d())}}getSubscriptionCount(r){return r?this.subscriptions.get(r)?.length||0:Array.from(this.subscriptions.values()).reduce((t,a)=>t+a.length,0)}clearSubscriptions(r){r?this.subscriptions.delete(r):this.subscriptions.clear()}sendPostMessage(r,t){const a={type:`encatch:${r}`,payload:t,source:"encatch-form-engine"};window.parent&&window.parent!==window&&window.parent.postMessage(a,this.targetOrigin),document.querySelectorAll("iframe").forEach(c=>{c.contentWindow&&c.contentWindow.postMessage(a,this.targetOrigin)}),typeof window.ReactNativeWebView<"u"&&window.ReactNativeWebView.postMessage(JSON.stringify({action:r.replace("form:",""),data:JSON.stringify(t)}))}}const y=new ie,ue=({formData:o,formConfig:r,formPageUrl:t,formId:a,cssLink:c,scale:d=100,persistMode:E="none",instanceId:b,onFormEvent:R})=>{const w=!!(r&&t),C=a??r?.formId??b??"preview",[M,I]=f.useState(!1),[Y,J]=f.useState(!0),g=f.useRef(null),A=f.useRef(null),_=f.useRef(null),F=f.useRef(!1),q=f.useRef(()=>{}),i=f.useRef({});f.useEffect(()=>{if(!R)return;R({onSubmit:m=>{i.current.onSubmit=m},onShow:m=>{i.current.onShow=m},onClose:m=>{i.current.onClose=m},onSectionChange:m=>{i.current.onSectionChange=m},onQuestionAnswered:m=>{i.current.onQuestionAnswered=m},onError:m=>{i.current.onError=m}})},[R]);const W=f.useCallback(()=>{if(!_.current?.contentWindow||!r)return;const n={formId:C,...r};_.current.contentWindow.postMessage({type:"sdk:formConfig",data:n},"*")},[r,C]);q.current=W,f.useEffect(()=>{!w||!F.current||q.current()},[w,r,W]),f.useEffect(()=>{if(!w||!g.current)return;const n=document.createElement("iframe"),m=new URL(t,window.location.origin);m.searchParams.set("formId",C),n.src=m.toString(),n.title="Encatch form",n.style.width="100%",n.style.height="100%",n.style.border="none",_.current=n,g.current.appendChild(n);const U=V=>{const v=V.data;if(!v||typeof v!="object"||!v.type)return;let P=v.type,O=v.formId,u=v.data;switch(P.startsWith("encatch:")&&(P=P.replace("encatch:",""),O=v.payload?.feedbackConfigurationId,u=v.payload),P){case"form:ready":F.current=!0,q.current();break;case"form:close":i.current.onClose?.({timestamp:Date.now()});break;case"form:complete":i.current.onClose?.({timestamp:Date.now()});break;case"form:submit":u&&i.current.onSubmit&&i.current.onSubmit({feedbackConfigurationId:u.feedbackConfigurationId,feedbackIdentifier:u.feedbackIdentifier,response:u.response,isPartialSubmit:u.isPartialSubmit,timestamp:Date.now()});break;case"form:show":u&&i.current.onShow&&i.current.onShow({feedbackConfigurationId:u.feedbackConfigurationId,feedbackIdentifier:u.feedbackIdentifier,timestamp:Date.now()});break;case"form:started":u&&i.current.onShow&&i.current.onShow({feedbackConfigurationId:u.feedbackConfigurationId,feedbackIdentifier:u.feedbackIdentifier,timestamp:Date.now()});break;case"form:section:change":u&&i.current.onSectionChange&&i.current.onSectionChange({feedbackConfigurationId:u.feedbackConfigurationId??O??"",sectionIndex:u.sectionIndex,sectionId:u.sectionId,timestamp:Date.now()});break;case"form:question:answered":u&&i.current.onQuestionAnswered&&i.current.onQuestionAnswered({feedbackConfigurationId:u.feedbackConfigurationId??O??"",questionId:u.questionId,questionType:u.questionType,answer:u.answer,timestamp:Date.now()});break;case"form:error":u&&i.current.onError&&i.current.onError({feedbackConfigurationId:u.feedbackConfigurationId??O??"",questionId:u.questionId,error:u.error??"Unknown error",timestamp:Date.now()});break}};return window.addEventListener("message",U),()=>{if(window.removeEventListener("message",U),F.current=!1,g.current&&_.current)try{g.current.removeChild(_.current)}catch{}_.current=null}},[w,t,C]),f.useEffect(()=>{if(w||!b)return;const n=[];return i.current.onSubmit&&n.push(y.subscribe("form:submit",i.current.onSubmit,{formId:b})),i.current.onShow&&n.push(y.subscribe("form:show",i.current.onShow,{formId:b})),i.current.onClose&&n.push(y.subscribe("form:close",i.current.onClose,{formId:b})),i.current.onSectionChange&&n.push(y.subscribe("form:section:change",i.current.onSectionChange,{formId:b})),i.current.onQuestionAnswered&&n.push(y.subscribe("form:question:answered",i.current.onQuestionAnswered,{formId:b})),i.current.onError&&n.push(y.subscribe("form:error",i.current.onError,{formId:b})),()=>n.forEach(m=>m())},[w,b]),f.useEffect(()=>{if(w){I(!1);return}try{if(!o){console.warn("[EncatchPreview] formData is not defined (inline mode)");return}I(!0)}catch(n){console.error("[EncatchPreview] Error during data validation:",n)}},[w,o]);const $=f.useCallback(()=>{o?.onClose&&o.onClose(),J(!1)},[o?.onClose]);return f.useEffect(()=>{if(w||!M||!g.current||!o)return;const n=document.createElement("encatch-app");return n.theme=o.theme,n.currentMode=o.currentMode,n.currentLanguage=o.currentLanguage,n.questions=o.questions,n.questionLanguages=o.questionLanguages,n.otherConfigurationProperties=o.otherConfigurationProperties,n.welcomeScreenProperties=o.welcomeScreenProperties,n.endScreenProperties=o.endScreenProperties,n.translations=o.translations,n.sections=o.sections,n.themeSettings=o.themeSettings,n.onClose=$,n.onSectionChange=o.onSectionChange,n.apiKey=o.apiKey,n.hostUrl=o.hostUrl,n.feedbackConfigId=o.feedbackConfigId,n.identifier=o.identifier,c&&(n.cssLink=c),n.scale=d,n.persistMode=E,b&&(n.instanceId=b),A.current=n,g.current.appendChild(n),()=>{if(g.current&&A.current)try{g.current.removeChild(A.current)}catch{}A.current=null}},[w,M,o,c,d,$,E,b]),Y?se.jsx("div",{ref:g,style:w?{width:"100%",height:"100%",minHeight:400}:void 0}):null};function ce(o,r,t){f.useEffect(()=>y.subscribe(o,r,t),[o,t?.formId,r])}function ae(o,r){f.useEffect(()=>y.subscribeAll(o,r),[r?.formId,o])}S.EncatchPreview=ue,S.useEncatchFormEvent=ce,S.useEncatchFormEventAll=ae,Object.defineProperty(S,Symbol.toStringTag,{value:"Module"})}));
+  <%s key={someKey} {...props} />`,b,p,j,p),K[p+b]=!0)}if(p=null,f!==void 0&&(n(f),p=""+f),w(t)&&(n(t.key),p=""+t.key),"key"in t){f={};for(var J in t)J!=="key"&&(f[J]=t[J])}else f=t;return p&&h(f,typeof e=="function"?e.displayName||e.name||"Unknown":e),T(e,p,g,S,a(),f,q,L)}function y(e){typeof e=="object"&&e!==null&&e.$$typeof===O&&e._store&&(e._store.validated=1)}var _=m,O=Symbol.for("react.transitional.element"),l=Symbol.for("react.portal"),C=Symbol.for("react.fragment"),F=Symbol.for("react.strict_mode"),u=Symbol.for("react.profiler"),d=Symbol.for("react.consumer"),R=Symbol.for("react.context"),D=Symbol.for("react.forward_ref"),Y=Symbol.for("react.suspense"),v=Symbol.for("react.suspense_list"),P=Symbol.for("react.memo"),I=Symbol.for("react.lazy"),o=Symbol.for("react.activity"),ce=Symbol.for("react.client.reference"),W=_.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,B=Object.prototype.hasOwnProperty,ue=Array.isArray,$=console.createTask?console.createTask:function(){return null};_={react_stack_bottom_frame:function(e){return e()}};var Q,X={},H=_.react_stack_bottom_frame.bind(_,c)(),Z=$(s(c)),K={};N.Fragment=C,N.jsx=function(e,t,f,b,S){var g=1e4>W.recentlyCreatedOwnerStacks++;return A(e,t,f,!1,b,S,g?Error("react-stack-top-frame"):H,g?$(s(e)):Z)},N.jsxs=function(e,t,f,b,S){var g=1e4>W.recentlyCreatedOwnerStacks++;return A(e,t,f,!0,b,S,g?Error("react-stack-top-frame"):H,g?$(s(e)):Z)}})()),N}var z;function te(){return z||(z=1,process.env.NODE_ENV==="production"?M.exports=ee():M.exports=re()),M.exports}var ne=te();const oe=({formConfig:i,formPageUrl:r,formId:n,iframeWidth:s="100%",iframeHeight:a="100%",scale:c=100,instanceId:w,onFormEvent:h})=>{const E=!!(i&&r),T=n??i?.formId??w??"preview",A=m.useRef(null),y=m.useRef(null),_=m.useRef(!1),O=m.useRef(()=>{}),l=m.useRef({});m.useEffect(()=>{if(!h)return;h({onSubmit:d=>{l.current.onSubmit=d},onShow:d=>{l.current.onShow=d},onClose:d=>{l.current.onClose=d},onSectionChange:d=>{l.current.onSectionChange=d},onQuestionAnswered:d=>{l.current.onQuestionAnswered=d},onError:d=>{l.current.onError=d}})},[h]);const C=m.useCallback(()=>{if(!y.current?.contentWindow||!i)return;const u={formId:T,...i};y.current.contentWindow.postMessage({type:"sdk:formConfig",data:u},"*")},[i,T]);O.current=C,m.useEffect(()=>{!E||!_.current||O.current()},[E,i,C]);const F=m.useCallback((u,d)=>{const R=d/100;u.style.border="none",R===1?(u.style.width="100%",u.style.height="100%",u.style.transform="",u.style.transformOrigin=""):(u.style.width=`${100/R}%`,u.style.height=`${100/R}%`,u.style.transformOrigin="0 0",u.style.transform=`scale(${R})`)},[]);return m.useEffect(()=>{!E||!y.current||F(y.current,c)},[E,i,r,c,F]),m.useEffect(()=>{if(!E||!A.current||!i||!r)return;const u=document.createElement("div");u.style.width="100%",u.style.height="100%",u.style.overflow="hidden";const d=document.createElement("iframe"),R=new URL(r,window.location.origin);R.searchParams.set("formId",T),d.src=R.toString(),d.title="Encatch form",F(d,c),y.current=d,u.appendChild(d),A.current.appendChild(u);const D=Y=>{const v=Y.data;if(!v||typeof v!="object"||!v.type)return;let P=v.type,I=v.formId,o=v.data;switch(P.startsWith("encatch:")&&(P=P.replace("encatch:",""),I=v.payload?.feedbackConfigurationId,o=v.payload),P){case"form:ready":_.current=!0,O.current();break;case"form:close":l.current.onClose?.({timestamp:Date.now()});break;case"form:complete":l.current.onClose?.({timestamp:Date.now()});break;case"form:submit":o&&l.current.onSubmit&&l.current.onSubmit({feedbackConfigurationId:o.feedbackConfigurationId,feedbackIdentifier:o.feedbackIdentifier,response:o.response,isPartialSubmit:o.isPartialSubmit,timestamp:Date.now()});break;case"form:show":o&&l.current.onShow&&l.current.onShow({feedbackConfigurationId:o.feedbackConfigurationId,feedbackIdentifier:o.feedbackIdentifier,timestamp:Date.now()});break;case"form:started":o&&l.current.onShow&&l.current.onShow({feedbackConfigurationId:o.feedbackConfigurationId,feedbackIdentifier:o.feedbackIdentifier,timestamp:Date.now()});break;case"form:section:change":o&&l.current.onSectionChange&&l.current.onSectionChange({feedbackConfigurationId:o.feedbackConfigurationId??I??"",sectionIndex:o.sectionIndex,sectionId:o.sectionId,timestamp:Date.now()});break;case"form:question:answered":o&&l.current.onQuestionAnswered&&l.current.onQuestionAnswered({feedbackConfigurationId:o.feedbackConfigurationId??I??"",questionId:o.questionId,questionType:o.questionType,answer:o.answer,timestamp:Date.now()});break;case"form:error":o&&l.current.onError&&l.current.onError({feedbackConfigurationId:o.feedbackConfigurationId??I??"",questionId:o.questionId,error:o.error??"Unknown error",timestamp:Date.now()});break}};return window.addEventListener("message",D),()=>{window.removeEventListener("message",D),_.current=!1,u.parentNode&&u.parentNode.removeChild(u),y.current=null}},[E,r,T]),ne.jsx("div",{ref:A,title:"encatchPreview1",style:E?{width:s??"100%",height:a??"100%"}:void 0})};class se extends EventTarget{subscriptions=new Map;targetOrigin="*";matchesFilter(r,n){return!n||n==="*"||n===null||n===void 0?!0:typeof n=="string"?r===n:Array.isArray(n)?n.includes(r||""):typeof n=="function"?n(r||""):!1}getFormIdFromPayload(r){return r?.feedbackConfigurationId}publish(r,n,s){typeof window<"u"&&window.dispatchEvent(new CustomEvent(r,{detail:n,bubbles:!0})),s?.usePostMessage!==!1&&this.sendPostMessage(r,n)}subscribe(r,n,s){const a=Symbol("subscription"),c={eventType:r,handler:n,filter:s?.formId,id:a,once:s?.once};this.subscriptions.has(r)||this.subscriptions.set(r,[]),this.subscriptions.get(r).push(c);const w=h=>{const E=h,T=this.getFormIdFromPayload(E.detail);this.matchesFilter(T,s?.formId)&&(n(E.detail),s?.once&&typeof window<"u"&&window.removeEventListener(r,w))};return typeof window<"u"&&window.addEventListener(r,w),()=>{this.unsubscribe(a),typeof window<"u"&&window.removeEventListener(r,w)}}unsubscribe(r){for(const[n,s]of this.subscriptions.entries()){const a=s.findIndex(c=>c.id===r);if(a!==-1){s.splice(a,1),s.length===0&&this.subscriptions.delete(n);break}}}subscribeAll(r,n){const s=["form:show","form:started","form:submit","form:close","form:section:change","form:question:answered","form:error"],a=[];return s.forEach(c=>{const w=this.subscribe(c,h=>r(c,h),n);a.push(w)}),()=>{a.forEach(c=>c())}}getSubscriptionCount(r){return r?this.subscriptions.get(r)?.length||0:Array.from(this.subscriptions.values()).reduce((n,s)=>n+s.length,0)}clearSubscriptions(r){r?this.subscriptions.delete(r):this.subscriptions.clear()}sendPostMessage(r,n){const s={type:`encatch:${r}`,payload:n,source:"encatch-form-engine"};window.parent&&window.parent!==window&&window.parent.postMessage(s,this.targetOrigin),document.querySelectorAll("iframe").forEach(a=>{a.contentWindow&&a.contentWindow.postMessage(s,this.targetOrigin)}),typeof window.ReactNativeWebView<"u"&&window.ReactNativeWebView.postMessage(JSON.stringify({action:r.replace("form:",""),data:JSON.stringify(n)}))}}const G=new se;function ae(i,r,n){m.useEffect(()=>G.subscribe(i,r,n),[i,n?.formId,r])}function ie(i,r){m.useEffect(()=>G.subscribeAll(i,r),[r?.formId,i])}k.EncatchPreview=oe,k.useEncatchFormEvent=ae,k.useEncatchFormEventAll=ie,Object.defineProperty(k,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@encatch/ws-react",
-  "version": "0.0.50-beta.3",
+  "version": "0.0.50-beta.5",
   "type": "module",
   "main": "./dist/index.umd.js",
   "module": "./dist/index.es.js",