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

package/README.md

@@ -1,5 +1,6 @@
 # @encatch/ws-react
 
+
 React wrapper for Encatch web form engine. This package provides React components and hooks to easily integrate Encatch forms into your React applications with full event handling capabilities.
 
 ## Purpose

package/dist/EncatchPreview.d.ts

@@ -1,6 +1,6 @@
 import { AppProps, Section } from "@encatch/schema";
 import React from "react";
-import type { OnFormEventHandler } from "./types";
+import type { EncatchFormConfig, OnFormEventHandler } from "./types";
 declare module "react" {
     namespace JSX {
         interface IntrinsicElements {
@@ -30,26 +30,34 @@ declare module "react" {
         }
     }
 }
+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 {
-    formData: {
-        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;
-    };
+    /** Required for inline mode (same-document rendering). Omit when using formConfig + formPageUrl. */
+    formData?: EncatchPreviewFormData;
+    /** Full form config for iframe mode. Use with formPageUrl. */
+    formConfig?: EncatchFormConfig;
+    /** URL of the iframe form page (e.g. shareable origin + /encatch-preview-form). Use with formConfig. */
+    formPageUrl?: string;
+    /** Optional form id for iframe URL query and message payloads. Defaults to formConfig.formId or "preview". */
+    formId?: string;
     cssLink?: string;
     scale?: number;
     persistMode?: "retain" | "reset" | "none";

package/dist/iframe-messages.d.ts

@@ -0,0 +1,32 @@
+/**
+ * PostMessage types for EncatchPreview iframe communication.
+ * Keeps message type strings and payload shapes consistent between
+ * EncatchPreview (parent) and the iframe form page.
+ */
+/** Message types sent from parent (EncatchPreview) to iframe */
+export type SDKMessageType = "sdk:formConfig" | "sdk:theme" | "sdk:locale" | "sdk:resetData" | "sdk:prefillResponses";
+/** Message types sent from iframe to parent */
+export type FormMessageType = "form:ready" | "form:submit" | "form:complete" | "form:close" | "form:error" | "form:resize" | "form:closeButton" | "form:themeData";
+/** Event-publisher messages (prefixed with encatch:) from iframe to parent */
+export type EncatchFormEventType = "encatch:form:show" | "encatch:form:started" | "encatch:form:section:change" | "encatch:form:question:answered";
+export interface SDKMessage {
+    type: SDKMessageType;
+    data?: Record<string, unknown>;
+}
+export interface FormMessage {
+    type: FormMessageType | EncatchFormEventType;
+    formId?: string;
+    data?: Record<string, unknown>;
+    payload?: Record<string, unknown>;
+}
+/** Normalize encatch:* message type to form:* for handler switch */
+export declare function normalizeMessageType(type: string, data: {
+    type: string;
+    formId?: string;
+    data?: Record<string, unknown>;
+    payload?: Record<string, unknown>;
+}): {
+    messageType: string;
+    formId: string | undefined;
+    payload: Record<string, unknown> | undefined;
+};

package/dist/index.d.ts

@@ -1,4 +1,4 @@
 export { EncatchPreview } from "./EncatchPreview";
 export { useEncatchFormEvent, useEncatchFormEventAll } from "./useEncatchFormEvent";
 export type { FormEventType, FormEventPayload, SubscriptionOptions, FormIdFilter, } from "./useEncatchFormEvent";
-export type { FormEventBuilder, OnFormEventHandler, OnSubmitCallback, OnShowCallback, OnCloseCallback, OnSectionChangeCallback, OnQuestionAnsweredCallback, OnErrorCallback, } from "./types";
+export type { EncatchFormConfig, EncatchPreviewIframeModeProps, FormEventBuilder, OnFormEventHandler, OnSubmitCallback, OnShowCallback, OnCloseCallback, OnSectionChangeCallback, OnQuestionAnsweredCallback, OnErrorCallback, } from "./types";

package/dist/index.es.js

@@ -1,5 +1,5 @@
-import I, { useState as U, useRef as oe, useEffect as S, useCallback as se } from "react";
-var A = { exports: {} }, P = {};
+import U, { useState as ee, useRef as B, useEffect as y, useCallback as re } from "react";
+var $ = { exports: {} }, M = {};
 /**
  * @license React
  * react-jsx-runtime.production.js
@@ -9,29 +9,29 @@ var A = { exports: {} }, P = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var J;
+var te;
 function ie() {
-  if (J) return P;
-  J = 1;
+  if (te) return M;
+  te = 1;
   var o = Symbol.for("react.transitional.element"), r = Symbol.for("react.fragment");
-  function t(u, s, c) {
-    var m = null;
-    if (c !== void 0 && (m = "" + c), s.key !== void 0 && (m = "" + s.key), "key" in s) {
-      c = {};
-      for (var p in s)
-        p !== "key" && (c[p] = s[p]);
-    } else c = s;
-    return s = c.ref, {
+  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: m,
-      ref: s !== void 0 ? s : null,
-      props: c
+      key: w,
+      ref: c !== void 0 ? c : null,
+      props: f
     };
   }
-  return P.Fragment = r, P.jsx = t, P.jsxs = t, P;
+  return M.Fragment = r, M.jsx = n, M.jsxs = n, M;
 }
-var k = {};
+var F = {};
 /**
  * @license React
  * react-jsx-runtime.development.js
@@ -41,47 +41,47 @@ var k = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var V;
-function ue() {
-  return V || (V = 1, process.env.NODE_ENV !== "production" && (function() {
+var ne;
+function ae() {
+  return ne || (ne = 1, process.env.NODE_ENV !== "production" && (function() {
     function o(e) {
       if (e == null) return null;
       if (typeof e == "function")
-        return e.$$typeof === re ? null : e.displayName || e.name || null;
+        return e.$$typeof === V ? null : e.displayName || e.name || null;
       if (typeof e == "string") return e;
       switch (e) {
-        case f:
+        case g:
           return "Fragment";
-        case Q:
+        case k:
           return "Profiler";
-        case G:
+        case A:
           return "StrictMode";
-        case Z:
+        case L:
           return "Suspense";
-        case K:
+        case Y:
           return "SuspenseList";
-        case ee:
+        case W:
           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 i:
+          case J:
             return "Portal";
-          case B:
+          case N:
             return (e.displayName || "Context") + ".Provider";
-          case X:
+          case j:
             return (e._context.displayName || "Context") + ".Consumer";
-          case H:
-            var n = e.render;
-            return e = e.displayName, e || (e = n.displayName || n.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
-          case D:
-            return n = e.displayName || null, n !== null ? n : o(e.type) || "Memo";
-          case M:
-            n = e._payload, e = e._init;
+          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;
             try {
-              return o(e(n));
+              return o(e(s));
             } catch {
             }
         }
@@ -90,53 +90,53 @@ function ue() {
     function r(e) {
       return "" + e;
     }
-    function t(e) {
+    function n(e) {
       try {
         r(e);
-        var n = !1;
+        var s = !1;
       } catch {
-        n = !0;
+        s = !0;
       }
-      if (n) {
-        n = console;
-        var l = n.error, d = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+      if (s) {
+        s = console;
+        var l = s.error, m = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
         return l.call(
-          n,
+          s,
           "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
-          d
+          m
         ), r(e);
       }
     }
     function u(e) {
-      if (e === f) return "<>";
-      if (typeof e == "object" && e !== null && e.$$typeof === M)
+      if (e === g) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === b)
         return "<...>";
       try {
-        var n = o(e);
-        return n ? "<" + n + ">" : "<...>";
+        var s = o(e);
+        return s ? "<" + s + ">" : "<...>";
       } catch {
         return "<...>";
       }
     }
-    function s() {
-      var e = C.A;
+    function c() {
+      var e = E.A;
       return e === null ? null : e.getOwner();
     }
-    function c() {
+    function f() {
       return Error("react-stack-top-frame");
     }
-    function m(e) {
-      if (F.call(e, "key")) {
-        var n = Object.getOwnPropertyDescriptor(e, "key").get;
-        if (n && n.isReactWarning) return !1;
+    function w(e) {
+      if (I.call(e, "key")) {
+        var s = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (s && s.isReactWarning) return !1;
       }
       return e.key !== void 0;
     }
-    function p(e, n) {
+    function d(e, s) {
       function l() {
-        Y || (Y = !0, console.error(
+        X || (X = !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)",
-          n
+          s
         ));
       }
       l.isReactWarning = !0, Object.defineProperty(e, "key", {
@@ -146,17 +146,17 @@ function ue() {
     }
     function R() {
       var e = o(this.type);
-      return L[e] || (L[e] = !0, console.error(
+      return H[e] || (H[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, n, l, d, w, h, x, j) {
-      return l = h.ref, e = {
-        $$typeof: y,
+    function h(e, s, l, m, S, v, z, Q) {
+      return l = v.ref, e = {
+        $$typeof: q,
         type: e,
-        key: n,
-        props: h,
-        _owner: w
+        key: s,
+        props: v,
+        _owner: S
       }, (l !== void 0 ? l : null) !== null ? Object.defineProperty(e, "ref", {
         enumerable: !1,
         get: R
@@ -174,119 +174,119 @@ function ue() {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: x
+        value: z
       }), Object.defineProperty(e, "_debugTask", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: j
+        value: Q
       }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
     }
-    function E(e, n, l, d, w, h, x, j) {
-      var b = n.children;
-      if (b !== void 0)
-        if (d)
-          if (te(b)) {
-            for (d = 0; d < b.length; d++)
-              v(b[d]);
-            Object.freeze && Object.freeze(b);
+    function C(e, s, l, m, S, v, z, Q) {
+      var p = s.children;
+      if (p !== void 0)
+        if (m)
+          if (P(p)) {
+            for (m = 0; m < p.length; m++)
+              x(p[m]);
+            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 v(b);
-      if (F.call(n, "key")) {
-        b = o(e);
-        var _ = Object.keys(n).filter(function(ne) {
-          return ne !== "key";
+        else x(p);
+      if (I.call(s, "key")) {
+        p = o(e);
+        var O = Object.keys(s).filter(function(se) {
+          return se !== "key";
         });
-        d = 0 < _.length ? "{key: someKey, " + _.join(": ..., ") + ": ...}" : "{key: someKey}", q[b + d] || (_ = 0 < _.length ? "{" + _.join(": ..., ") + ": ...}" : "{}", console.error(
+        m = 0 < O.length ? "{key: someKey, " + O.join(": ..., ") + ": ...}" : "{key: someKey}", K[p + m] || (O = 0 < O.length ? "{" + O.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} />`,
-          d,
-          b,
-          _,
-          b
-        ), q[b + d] = !0);
+          m,
+          p,
+          O,
+          p
+        ), K[p + m] = !0);
       }
-      if (b = null, l !== void 0 && (t(l), b = "" + l), m(n) && (t(n.key), b = "" + n.key), "key" in n) {
+      if (p = null, l !== void 0 && (n(l), p = "" + l), w(s) && (n(s.key), p = "" + s.key), "key" in s) {
         l = {};
-        for (var N in n)
-          N !== "key" && (l[N] = n[N]);
-      } else l = n;
-      return b && p(
+        for (var G in s)
+          G !== "key" && (l[G] = s[G]);
+      } else l = s;
+      return p && d(
         l,
         typeof e == "function" ? e.displayName || e.name || "Unknown" : e
-      ), T(
+      ), h(
         e,
-        b,
-        h,
-        w,
-        s(),
+        p,
+        v,
+        S,
+        c(),
         l,
-        x,
-        j
+        z,
+        Q
       );
     }
-    function v(e) {
-      typeof e == "object" && e !== null && e.$$typeof === y && e._store && (e._store.validated = 1);
+    function x(e) {
+      typeof e == "object" && e !== null && e.$$typeof === q && e._store && (e._store.validated = 1);
     }
-    var a = I, y = Symbol.for("react.transitional.element"), i = Symbol.for("react.portal"), f = Symbol.for("react.fragment"), G = Symbol.for("react.strict_mode"), Q = Symbol.for("react.profiler"), X = Symbol.for("react.consumer"), B = Symbol.for("react.context"), H = Symbol.for("react.forward_ref"), Z = Symbol.for("react.suspense"), K = Symbol.for("react.suspense_list"), D = Symbol.for("react.memo"), M = Symbol.for("react.lazy"), ee = Symbol.for("react.activity"), re = Symbol.for("react.client.reference"), C = a.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, F = Object.prototype.hasOwnProperty, te = Array.isArray, O = console.createTask ? console.createTask : function() {
+    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() {
       return null;
     };
-    a = {
+    T = {
       react_stack_bottom_frame: function(e) {
         return e();
       }
     };
-    var Y, L = {}, W = a.react_stack_bottom_frame.bind(
-      a,
-      c
-    )(), $ = O(u(c)), q = {};
-    k.Fragment = f, k.jsx = function(e, n, l, d, w) {
-      var h = 1e4 > C.recentlyCreatedOwnerStacks++;
-      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(
         e,
-        n,
+        s,
         l,
         !1,
-        d,
-        w,
-        h ? Error("react-stack-top-frame") : W,
-        h ? O(u(e)) : $
+        m,
+        S,
+        v ? Error("react-stack-top-frame") : D,
+        v ? a(u(e)) : Z
       );
-    }, k.jsxs = function(e, n, l, d, w) {
-      var h = 1e4 > C.recentlyCreatedOwnerStacks++;
-      return E(
+    }, F.jsxs = function(e, s, l, m, S) {
+      var v = 1e4 > E.recentlyCreatedOwnerStacks++;
+      return C(
         e,
-        n,
+        s,
         l,
         !0,
-        d,
-        w,
-        h ? Error("react-stack-top-frame") : W,
-        h ? O(u(e)) : $
+        m,
+        S,
+        v ? Error("react-stack-top-frame") : D,
+        v ? a(u(e)) : Z
       );
     };
-  })()), k;
+  })()), F;
 }
-var z;
+var oe;
 function ce() {
-  return z || (z = 1, process.env.NODE_ENV === "production" ? A.exports = ie() : A.exports = ue()), A.exports;
+  return oe || (oe = 1, process.env.NODE_ENV === "production" ? $.exports = ie() : $.exports = ae()), $.exports;
 }
-var ae = ce();
+var ue = ce();
 class le extends EventTarget {
   subscriptions = /* @__PURE__ */ new Map();
   targetOrigin = "*";
   /**
    * Check if a form ID matches the filter
    */
-  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;
+  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;
   }
   /**
    * Get form ID from payload
@@ -297,42 +297,42 @@ class le extends EventTarget {
   /**
    * Publish an event to all matching subscribers
    */
-  publish(r, t, u) {
+  publish(r, n, u) {
     typeof window < "u" && window.dispatchEvent(
       new CustomEvent(r, {
-        detail: t,
+        detail: n,
         bubbles: !0
       })
-    ), u?.usePostMessage !== !1 && this.sendPostMessage(r, t);
+    ), u?.usePostMessage !== !1 && this.sendPostMessage(r, n);
   }
   /**
    * Subscribe to form events with optional form ID filtering
    */
-  subscribe(r, t, u) {
-    const s = Symbol("subscription"), c = {
+  subscribe(r, n, u) {
+    const c = Symbol("subscription"), f = {
       eventType: r,
-      handler: t,
+      handler: n,
       filter: u?.formId,
-      id: s,
+      id: c,
       once: u?.once
     };
-    this.subscriptions.has(r) || this.subscriptions.set(r, []), this.subscriptions.get(r).push(c);
-    const m = (p) => {
-      const R = p, T = this.getFormIdFromPayload(R.detail);
-      this.matchesFilter(T, u?.formId) && (t(R.detail), u?.once && typeof window < "u" && window.removeEventListener(r, m));
+    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));
     };
-    return typeof window < "u" && window.addEventListener(r, m), () => {
-      this.unsubscribe(s), typeof window < "u" && window.removeEventListener(r, m);
+    return typeof window < "u" && window.addEventListener(r, w), () => {
+      this.unsubscribe(c), typeof window < "u" && window.removeEventListener(r, w);
     };
   }
   /**
    * Unsubscribe by subscription ID
    */
   unsubscribe(r) {
-    for (const [t, u] of this.subscriptions.entries()) {
-      const s = u.findIndex((c) => c.id === r);
-      if (s !== -1) {
-        u.splice(s, 1), u.length === 0 && this.subscriptions.delete(t);
+    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);
         break;
       }
     }
@@ -340,7 +340,7 @@ class le extends EventTarget {
   /**
    * Subscribe to all form events with optional filtering
    */
-  subscribeAll(r, t) {
+  subscribeAll(r, n) {
     const u = [
       "form:show",
       "form:started",
@@ -349,23 +349,23 @@ class le extends EventTarget {
       "form:section:change",
       "form:question:answered",
       "form:error"
-    ], s = [];
-    return u.forEach((c) => {
-      const m = this.subscribe(
-        c,
-        (p) => r(c, p),
-        t
+    ], c = [];
+    return u.forEach((f) => {
+      const w = this.subscribe(
+        f,
+        (d) => r(f, d),
+        n
       );
-      s.push(m);
+      c.push(w);
     }), () => {
-      s.forEach((c) => c());
+      c.forEach((f) => f());
     };
   }
   /**
    * Get active subscriptions count (for debugging)
    */
   getSubscriptionCount(r) {
-    return r ? this.subscriptions.get(r)?.length || 0 : Array.from(this.subscriptions.values()).reduce((t, u) => t + u.length, 0);
+    return r ? this.subscriptions.get(r)?.length || 0 : Array.from(this.subscriptions.values()).reduce((n, u) => n + u.length, 0);
   }
   /**
    * Clear all subscriptions for an event type (or all events)
@@ -373,127 +373,239 @@ class le extends EventTarget {
   clearSubscriptions(r) {
     r ? this.subscriptions.delete(r) : this.subscriptions.clear();
   }
-  sendPostMessage(r, t) {
+  sendPostMessage(r, n) {
     const u = {
       type: `encatch:${r}`,
-      payload: t,
+      payload: n,
       source: "encatch-form-engine"
     };
-    window.parent && window.parent !== window && window.parent.postMessage(u, this.targetOrigin), document.querySelectorAll("iframe").forEach((s) => {
-      s.contentWindow && s.contentWindow.postMessage(u, this.targetOrigin);
+    window.parent && window.parent !== window && window.parent.postMessage(u, this.targetOrigin), document.querySelectorAll("iframe").forEach((c) => {
+      c.contentWindow && c.contentWindow.postMessage(u, this.targetOrigin);
     }), typeof window.ReactNativeWebView < "u" && window.ReactNativeWebView.postMessage(JSON.stringify({
       action: r.replace("form:", ""),
-      data: JSON.stringify(t)
+      data: JSON.stringify(n)
     }));
   }
 }
-const g = new le(), de = ({
+const _ = new le(), de = ({
   formData: o,
-  cssLink: r,
-  scale: t = 100,
-  persistMode: u = "none",
-  instanceId: s,
-  onFormEvent: c
+  formConfig: r,
+  formPageUrl: n,
+  formId: u,
+  cssLink: c,
+  scale: f = 100,
+  persistMode: w = "none",
+  instanceId: d,
+  onFormEvent: R
 }) => {
-  const [m, p] = U(!1), [R, T] = U(!0), E = I.useRef(null), v = I.useRef(
+  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
-  ), a = oe({});
-  S(() => {
-    if (!c) return;
-    c({
-      onSubmit: (f) => {
-        a.current.onSubmit = f;
+  ), k = U.useRef(null), j = B(!1), N = B(() => {
+  }), i = B({});
+  y(() => {
+    if (!R) return;
+    R({
+      onSubmit: (b) => {
+        i.current.onSubmit = b;
       },
-      onShow: (f) => {
-        a.current.onShow = f;
+      onShow: (b) => {
+        i.current.onShow = b;
       },
-      onClose: (f) => {
-        a.current.onClose = f;
+      onClose: (b) => {
+        i.current.onClose = b;
       },
-      onSectionChange: (f) => {
-        a.current.onSectionChange = f;
+      onSectionChange: (b) => {
+        i.current.onSectionChange = b;
       },
-      onQuestionAnswered: (f) => {
-        a.current.onQuestionAnswered = f;
+      onQuestionAnswered: (b) => {
+        i.current.onQuestionAnswered = b;
       },
-      onError: (f) => {
-        a.current.onError = f;
+      onError: (b) => {
+        i.current.onError = b;
       }
     });
-  }, [c]), S(() => {
-    if (!s) return;
-    const i = [];
-    return a.current.onSubmit && i.push(
-      g.subscribe(
+  }, [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",
-        a.current.onSubmit,
-        { formId: s }
+        i.current.onSubmit,
+        { formId: d }
       )
-    ), a.current.onShow && i.push(
-      g.subscribe(
+    ), i.current.onShow && t.push(
+      _.subscribe(
         "form:show",
-        a.current.onShow,
-        { formId: s }
+        i.current.onShow,
+        { formId: d }
       )
-    ), a.current.onClose && i.push(
-      g.subscribe(
+    ), i.current.onClose && t.push(
+      _.subscribe(
         "form:close",
-        a.current.onClose,
-        { formId: s }
+        i.current.onClose,
+        { formId: d }
       )
-    ), a.current.onSectionChange && i.push(
-      g.subscribe(
+    ), i.current.onSectionChange && t.push(
+      _.subscribe(
         "form:section:change",
-        a.current.onSectionChange,
-        { formId: s }
+        i.current.onSectionChange,
+        { formId: d }
       )
-    ), a.current.onQuestionAnswered && i.push(
-      g.subscribe(
+    ), i.current.onQuestionAnswered && t.push(
+      _.subscribe(
         "form:question:answered",
-        a.current.onQuestionAnswered,
-        { formId: s }
+        i.current.onQuestionAnswered,
+        { formId: d }
       )
-    ), a.current.onError && i.push(
-      g.subscribe(
+    ), i.current.onError && t.push(
+      _.subscribe(
         "form:error",
-        a.current.onError,
-        { formId: s }
+        i.current.onError,
+        { formId: d }
       )
-    ), () => {
-      i.forEach((f) => f());
-    };
-  }, [s]), S(() => {
-    (() => {
-      try {
-        return o ? !0 : (console.warn("[EncatchPreview] formData is not defined"), !1);
-      } catch (f) {
-        return console.error("[EncatchPreview] Error during data validation:", f), !1;
-      }
-    })() ? p(!0) : console.warn(
-      "[EncatchPreview] Data validation failed, retrying in 100ms..."
-    );
-  }, [o]);
-  const y = se(() => {
-    o.onClose && o.onClose(), T(!1);
-  }, [o.onClose]);
-  return S(() => {
-    if (!m || !E.current)
+    ), () => t.forEach((b) => b());
+  }, [h, d]), y(() => {
+    if (h) {
+      T(!1);
       return;
-    const i = document.createElement("encatch-app");
-    return i.theme = o.theme, i.currentMode = o.currentMode, i.currentLanguage = o.currentLanguage, i.questions = o.questions, i.questionLanguages = o.questionLanguages, i.otherConfigurationProperties = o.otherConfigurationProperties, i.welcomeScreenProperties = o.welcomeScreenProperties, i.endScreenProperties = o.endScreenProperties, i.translations = o.translations, i.sections = o.sections, i.themeSettings = o.themeSettings, i.onClose = y, i.onSectionChange = o.onSectionChange, i.apiKey = o.apiKey, i.hostUrl = o.hostUrl, i.feedbackConfigId = o.feedbackConfigId, i.identifier = o.identifier, r && (i.cssLink = r), i.scale = t, i.persistMode = u, s && (i.instanceId = s), v.current = i, E.current.appendChild(i), () => {
-      E.current && v.current && E.current.removeChild(v.current), v.current = null;
+    }
+    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;
     };
-  }, [m, o, r, t, y, u, s]), R ? /* @__PURE__ */ ae.jsx("div", { ref: E }) : 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, t) {
-  S(() => g.subscribe(
+function be(o, r, n) {
+  y(() => _.subscribe(
     o,
     r,
-    t
-  ), [o, t?.formId, r]);
+    n
+  ), [o, n?.formId, r]);
 }
 function me(o, r) {
-  S(() => g.subscribeAll(o, r), [r?.formId, o]);
+  y(() => _.subscribeAll(o, r), [r?.formId, o]);
 }
 export {
   de as EncatchPreview,

package/dist/index.umd.js

@@ -1,4 +1,4 @@
-(function(w,d){typeof exports=="object"&&typeof module<"u"?d(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],d):(w=typeof globalThis<"u"?globalThis:w||self,d(w.WsReact={},w.React))})(this,(function(w,d){"use strict";var C={exports:{}},y={};/**
+(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={};/**
  * @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 M;function z(){if(M)return y;M=1;var o=Symbol.for("react.transitional.element"),r=Symbol.for("react.fragment");function t(u,s,c){var E=null;if(c!==void 0&&(E=""+c),s.key!==void 0&&(E=""+s.key),"key"in s){c={};for(var h in s)h!=="key"&&(c[h]=s[h])}else c=s;return s=c.ref,{$$typeof:o,type:u,key:E,ref:s!==void 0?s:null,props:c}}return y.Fragment=r,y.jsx=t,y.jsxs=t,y}var P={};/**
+ */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={};/**
  * @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 F;function G(){return F||(F=1,process.env.NODE_ENV!=="production"&&(function(){function o(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 f:return"Fragment";case ee:return"Profiler";case D:return"StrictMode";case oe:return"Suspense";case se:return"SuspenseList";case ue: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 i:return"Portal";case te:return(e.displayName||"Context")+".Provider";case re:return(e._context.displayName||"Context")+".Consumer";case ne:var n=e.render;return e=e.displayName,e||(e=n.displayName||n.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case ie:return n=e.displayName||null,n!==null?n:o(e.type)||"Memo";case L:n=e._payload,e=e._init;try{return o(e(n))}catch{}}return null}function r(e){return""+e}function t(e){try{r(e);var n=!1}catch{n=!0}if(n){n=console;var l=n.error,b=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return l.call(n,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",b),r(e)}}function u(e){if(e===f)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===L)return"<...>";try{var n=o(e);return n?"<"+n+">":"<...>"}catch{return"<...>"}}function s(){var e=O.A;return e===null?null:e.getOwner()}function c(){return Error("react-stack-top-frame")}function E(e){if(W.call(e,"key")){var n=Object.getOwnPropertyDescriptor(e,"key").get;if(n&&n.isReactWarning)return!1}return e.key!==void 0}function h(e,n){function l(){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)",n))}l.isReactWarning=!0,Object.defineProperty(e,"key",{get:l,configurable:!0})}function R(){var e=o(this.type);return $[e]||($[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 A(e,n,l,b,S,p,x,N){return l=p.ref,e={$$typeof:k,type:e,key:n,props:p,_owner:S},(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:x}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:N}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function g(e,n,l,b,S,p,x,N){var m=n.children;if(m!==void 0)if(b)if(ae(m)){for(b=0;b<m.length;b++)_(m[b]);Object.freeze&&Object.freeze(m)}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);if(W.call(n,"key")){m=o(e);var T=Object.keys(n).filter(function(le){return le!=="key"});b=0<T.length?"{key: someKey, "+T.join(": ..., ")+": ...}":"{key: someKey}",V[m+b]||(T=0<T.length?"{"+T.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+ */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:
   let props = %s;
   <%s {...props} />
 React keys must be passed directly to JSX without using spread:
   let props = %s;
-  <%s key={someKey} {...props} />`,b,m,T,m),V[m+b]=!0)}if(m=null,l!==void 0&&(t(l),m=""+l),E(n)&&(t(n.key),m=""+n.key),"key"in n){l={};for(var I in n)I!=="key"&&(l[I]=n[I])}else l=n;return m&&h(l,typeof e=="function"?e.displayName||e.name||"Unknown":e),A(e,m,p,S,s(),l,x,N)}function _(e){typeof e=="object"&&e!==null&&e.$$typeof===k&&e._store&&(e._store.validated=1)}var a=d,k=Symbol.for("react.transitional.element"),i=Symbol.for("react.portal"),f=Symbol.for("react.fragment"),D=Symbol.for("react.strict_mode"),ee=Symbol.for("react.profiler"),re=Symbol.for("react.consumer"),te=Symbol.for("react.context"),ne=Symbol.for("react.forward_ref"),oe=Symbol.for("react.suspense"),se=Symbol.for("react.suspense_list"),ie=Symbol.for("react.memo"),L=Symbol.for("react.lazy"),ue=Symbol.for("react.activity"),ce=Symbol.for("react.client.reference"),O=a.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,W=Object.prototype.hasOwnProperty,ae=Array.isArray,j=console.createTask?console.createTask:function(){return null};a={react_stack_bottom_frame:function(e){return e()}};var q,$={},U=a.react_stack_bottom_frame.bind(a,c)(),J=j(u(c)),V={};P.Fragment=f,P.jsx=function(e,n,l,b,S){var p=1e4>O.recentlyCreatedOwnerStacks++;return g(e,n,l,!1,b,S,p?Error("react-stack-top-frame"):U,p?j(u(e)):J)},P.jsxs=function(e,n,l,b,S){var p=1e4>O.recentlyCreatedOwnerStacks++;return g(e,n,l,!0,b,S,p?Error("react-stack-top-frame"):U,p?j(u(e)):J)}})()),P}var Y;function Q(){return Y||(Y=1,process.env.NODE_ENV==="production"?C.exports=z():C.exports=G()),C.exports}var X=Q();class B 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,u){typeof window<"u"&&window.dispatchEvent(new CustomEvent(r,{detail:t,bubbles:!0})),u?.usePostMessage!==!1&&this.sendPostMessage(r,t)}subscribe(r,t,u){const s=Symbol("subscription"),c={eventType:r,handler:t,filter:u?.formId,id:s,once:u?.once};this.subscriptions.has(r)||this.subscriptions.set(r,[]),this.subscriptions.get(r).push(c);const E=h=>{const R=h,A=this.getFormIdFromPayload(R.detail);this.matchesFilter(A,u?.formId)&&(t(R.detail),u?.once&&typeof window<"u"&&window.removeEventListener(r,E))};return typeof window<"u"&&window.addEventListener(r,E),()=>{this.unsubscribe(s),typeof window<"u"&&window.removeEventListener(r,E)}}unsubscribe(r){for(const[t,u]of this.subscriptions.entries()){const s=u.findIndex(c=>c.id===r);if(s!==-1){u.splice(s,1),u.length===0&&this.subscriptions.delete(t);break}}}subscribeAll(r,t){const u=["form:show","form:started","form:submit","form:close","form:section:change","form:question:answered","form:error"],s=[];return u.forEach(c=>{const E=this.subscribe(c,h=>r(c,h),t);s.push(E)}),()=>{s.forEach(c=>c())}}getSubscriptionCount(r){return r?this.subscriptions.get(r)?.length||0:Array.from(this.subscriptions.values()).reduce((t,u)=>t+u.length,0)}clearSubscriptions(r){r?this.subscriptions.delete(r):this.subscriptions.clear()}sendPostMessage(r,t){const u={type:`encatch:${r}`,payload:t,source:"encatch-form-engine"};window.parent&&window.parent!==window&&window.parent.postMessage(u,this.targetOrigin),document.querySelectorAll("iframe").forEach(s=>{s.contentWindow&&s.contentWindow.postMessage(u,this.targetOrigin)}),typeof window.ReactNativeWebView<"u"&&window.ReactNativeWebView.postMessage(JSON.stringify({action:r.replace("form:",""),data:JSON.stringify(t)}))}}const v=new B,H=({formData:o,cssLink:r,scale:t=100,persistMode:u="none",instanceId:s,onFormEvent:c})=>{const[E,h]=d.useState(!1),[R,A]=d.useState(!0),g=d.useRef(null),_=d.useRef(null),a=d.useRef({});d.useEffect(()=>{if(!c)return;c({onSubmit:f=>{a.current.onSubmit=f},onShow:f=>{a.current.onShow=f},onClose:f=>{a.current.onClose=f},onSectionChange:f=>{a.current.onSectionChange=f},onQuestionAnswered:f=>{a.current.onQuestionAnswered=f},onError:f=>{a.current.onError=f}})},[c]),d.useEffect(()=>{if(!s)return;const i=[];return a.current.onSubmit&&i.push(v.subscribe("form:submit",a.current.onSubmit,{formId:s})),a.current.onShow&&i.push(v.subscribe("form:show",a.current.onShow,{formId:s})),a.current.onClose&&i.push(v.subscribe("form:close",a.current.onClose,{formId:s})),a.current.onSectionChange&&i.push(v.subscribe("form:section:change",a.current.onSectionChange,{formId:s})),a.current.onQuestionAnswered&&i.push(v.subscribe("form:question:answered",a.current.onQuestionAnswered,{formId:s})),a.current.onError&&i.push(v.subscribe("form:error",a.current.onError,{formId:s})),()=>{i.forEach(f=>f())}},[s]),d.useEffect(()=>{(()=>{try{return o?!0:(console.warn("[EncatchPreview] formData is not defined"),!1)}catch(f){return console.error("[EncatchPreview] Error during data validation:",f),!1}})()?h(!0):console.warn("[EncatchPreview] Data validation failed, retrying in 100ms...")},[o]);const k=d.useCallback(()=>{o.onClose&&o.onClose(),A(!1)},[o.onClose]);return d.useEffect(()=>{if(!E||!g.current)return;const i=document.createElement("encatch-app");return i.theme=o.theme,i.currentMode=o.currentMode,i.currentLanguage=o.currentLanguage,i.questions=o.questions,i.questionLanguages=o.questionLanguages,i.otherConfigurationProperties=o.otherConfigurationProperties,i.welcomeScreenProperties=o.welcomeScreenProperties,i.endScreenProperties=o.endScreenProperties,i.translations=o.translations,i.sections=o.sections,i.themeSettings=o.themeSettings,i.onClose=k,i.onSectionChange=o.onSectionChange,i.apiKey=o.apiKey,i.hostUrl=o.hostUrl,i.feedbackConfigId=o.feedbackConfigId,i.identifier=o.identifier,r&&(i.cssLink=r),i.scale=t,i.persistMode=u,s&&(i.instanceId=s),_.current=i,g.current.appendChild(i),()=>{g.current&&_.current&&g.current.removeChild(_.current),_.current=null}},[E,o,r,t,k,u,s]),R?X.jsx("div",{ref:g}):null};function Z(o,r,t){d.useEffect(()=>v.subscribe(o,r,t),[o,t?.formId,r])}function K(o,r){d.useEffect(()=>v.subscribeAll(o,r),[r?.formId,o])}w.EncatchPreview=H,w.useEncatchFormEvent=Z,w.useEncatchFormEventAll=K,Object.defineProperty(w,Symbol.toStringTag,{value:"Module"})}));
+  <%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"})}));

package/dist/types.d.ts

@@ -1,4 +1,45 @@
 import type { FormEventPayload } from '@encatch/event-publisher';
+/**
+ * Full form configuration object used when rendering the form in an iframe (EncatchPreview iframe mode).
+ * Matches the payload shape expected by the shareable iframe form page (sdk:formConfig).
+ * EncatchPreview sends this via postMessage when formPageUrl is provided.
+ */
+export interface EncatchFormConfig {
+    formId?: string;
+    questionnaireFields?: {
+        questions?: Record<string, unknown>;
+        sections?: unknown[];
+        selectedLanguages?: Array<{
+            value: string;
+            label: string;
+            isFixed?: boolean;
+        }>;
+        translations?: Record<string, unknown>;
+    };
+    appearanceProperties?: {
+        themes?: {
+            light?: {
+                theme?: string;
+            };
+            dark?: {
+                theme?: string;
+            };
+        };
+        featureSettings?: {
+            closeButton?: boolean;
+            shareableMode?: string;
+        };
+    };
+    welcomeScreenProperties?: unknown;
+    endScreenProperties?: unknown;
+    otherConfigurationProperties?: unknown;
+    feedbackConfigurationId?: string;
+    feedbackIdentifier?: string;
+    formConfiguration?: {
+        formTitle?: string;
+    };
+    [key: string]: unknown;
+}
 /**
  * Callback function for form submit events
  */
@@ -85,3 +126,13 @@ export interface FormEventBuilder {
  * Function type for the onFormEvent prop
  */
 export type OnFormEventHandler = (formEvent: FormEventBuilder) => void;
+/**
+ * Props for EncatchPreview when used in iframe mode.
+ * Pass formConfig and formPageUrl to render the form inside an iframe;
+ * formPageUrl should point at the shareable encatch-preview-form route (e.g. origin + /encatch-preview-form).
+ */
+export interface EncatchPreviewIframeModeProps {
+    formConfig: EncatchFormConfig;
+    formPageUrl: string;
+    formId?: string;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@encatch/ws-react",
-  "version": "0.0.50-beta.0",
+  "version": "0.0.50-beta.3",
   "type": "module",
   "main": "./dist/index.umd.js",
   "module": "./dist/index.es.js",
@@ -20,7 +20,7 @@
     "react-dom": "^19.1.1"
   },
   "dependencies": {
-    "@encatch/schema": "1.0.0-beta.0",
+    "@encatch/schema": "1.0.0",
     "@encatch/event-publisher": "1.0.0-beta.1"
   },
   "devDependencies": {