@encatch/ws-react 0.0.50-beta.1 → 0.0.50-beta.10

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
@@ -34,40 +35,34 @@ 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"
+        scale={100}
+        formId="unique-form-id"
+        onFormEvent={(formEvent) => {
+          formEvent.onSubmit((data) => console.log('Submitted', data));
+        }}
+      />
+    </div>
   );
 }
 ```
@@ -76,12 +71,12 @@ 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. |
+| `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
 
@@ -125,8 +120,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}
     />
@@ -169,7 +164,7 @@ function MyComponent() {
 - `form:show` - Form shown/displayed event
 - `form:close` - Form closed event
 - `form:section:change` - Section navigation event
-- `form:question:answered` - Question answered event
+- `form:answered` - Question answered event
 - `form:error` - Error event
 
 ### useEncatchFormEventAll
@@ -253,14 +248,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,58 +1,14 @@
-import { AppProps, Section } from "@encatch/schema";
 import React from "react";
-import type { 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;
-            };
-        }
-    }
-}
+import type { EncatchFormConfig, OnFormEventHandler } from "./types";
 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;
-    };
-    cssLink?: string;
+    /** 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). 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;
+    /** Visual scale of the iframe content (e.g. 1–100). Passed to the iframe in config and applied inside the form; no transform on the iframe. Default 100. */
     scale?: number;
-    persistMode?: "retain" | "reset" | "none";
     instanceId?: string;
     /**
      * Callback function that receives a FormEventBuilder to register event handlers

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: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 q, { useRef as $, useEffect as O, useCallback as X } from "react";
+var j = { exports: {} }, A = {};
 /**
  * @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;
-function ie() {
-  if (J) return P;
-  J = 1;
-  var o = Symbol.for("react.transitional.element"), r = Symbol.for("react.fragment");
-  function t(u, s, c) {
+var H;
+function ae() {
+  if (H) return A;
+  H = 1;
+  var l = Symbol.for("react.transitional.element"), r = Symbol.for("react.fragment");
+  function n(a, 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]);
+      for (var w in s)
+        w !== "key" && (c[w] = s[w]);
     } else c = s;
     return s = c.ref, {
-      $$typeof: o,
-      type: u,
+      $$typeof: l,
+      type: a,
       key: m,
       ref: s !== void 0 ? s : null,
       props: c
     };
   }
-  return P.Fragment = r, P.jsx = t, P.jsxs = t, P;
+  return A.Fragment = r, A.jsx = n, A.jsxs = n, A;
 }
-var k = {};
+var C = {};
 /**
  * @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() {
-    function o(e) {
+var Z;
+function se() {
+  return Z || (Z = 1, process.env.NODE_ENV !== "production" && (function() {
+    function l(e) {
       if (e == null) return null;
       if (typeof e == "function")
-        return e.$$typeof === re ? 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 f:
           return "Fragment";
-        case Q:
+        case P:
           return "Profiler";
-        case G:
+        case d:
           return "StrictMode";
-        case Z:
+        case _:
           return "Suspense";
-        case K:
+        case T:
           return "SuspenseList";
-        case ee:
+        case re:
           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 N:
             return "Portal";
-          case B:
+          case F:
             return (e.displayName || "Context") + ".Provider";
-          case X:
+          case x:
             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 E:
+            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 : l(e.type) || "Memo";
+          case J:
+            t = e._payload, e = e._init;
             try {
-              return o(e(n));
+              return l(e(t));
             } catch {
             }
         }
@@ -90,76 +90,76 @@ function ue() {
     function r(e) {
       return "" + e;
     }
-    function t(e) {
+    function n(e) {
       try {
         r(e);
-        var n = !1;
+        var t = !1;
       } catch {
-        n = !0;
+        t = !0;
       }
-      if (n) {
-        n = console;
-        var l = n.error, d = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
-        return l.call(
-          n,
+      if (t) {
+        t = console;
+        var u = t.error, b = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return u.call(
+          t,
           "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
-          d
+          b
         ), r(e);
       }
     }
-    function u(e) {
+    function a(e) {
       if (e === f) return "<>";
-      if (typeof e == "object" && e !== null && e.$$typeof === M)
+      if (typeof e == "object" && e !== null && e.$$typeof === J)
         return "<...>";
       try {
-        var n = o(e);
-        return n ? "<" + n + ">" : "<...>";
+        var t = l(e);
+        return t ? "<" + t + ">" : "<...>";
       } catch {
         return "<...>";
       }
     }
     function s() {
-      var e = C.A;
+      var e = D.A;
       return e === null ? null : e.getOwner();
     }
     function c() {
       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;
+      if (U.call(e, "key")) {
+        var t = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (t && t.isReactWarning) return !1;
       }
       return e.key !== void 0;
     }
-    function p(e, n) {
-      function l() {
-        Y || (Y = !0, console.error(
+    function w(e, t) {
+      function u() {
+        V || (V = !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
+          t
         ));
       }
-      l.isReactWarning = !0, Object.defineProperty(e, "key", {
-        get: l,
+      u.isReactWarning = !0, Object.defineProperty(e, "key", {
+        get: u,
         configurable: !0
       });
     }
-    function R() {
-      var e = o(this.type);
-      return L[e] || (L[e] = !0, console.error(
+    function v() {
+      var e = l(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 T(e, n, l, d, w, h, x, j) {
-      return l = h.ref, e = {
-        $$typeof: y,
+    function h(e, t, u, b, k, g, Y, W) {
+      return u = g.ref, e = {
+        $$typeof: I,
         type: e,
-        key: n,
-        props: h,
-        _owner: w
-      }, (l !== void 0 ? l : null) !== null ? Object.defineProperty(e, "ref", {
+        key: t,
+        props: g,
+        _owner: k
+      }, (u !== void 0 ? u : null) !== null ? Object.defineProperty(e, "ref", {
         enumerable: !1,
-        get: R
+        get: v
       }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
         configurable: !1,
         enumerable: !1,
@@ -174,119 +174,254 @@ function ue() {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: x
+        value: Y
       }), Object.defineProperty(e, "_debugTask", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: j
+        value: W
       }), 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 R(e, t, u, b, k, g, Y, W) {
+      var p = t.children;
+      if (p !== void 0)
+        if (b)
+          if (ne(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 v(b);
-      if (F.call(n, "key")) {
-        b = o(e);
-        var _ = Object.keys(n).filter(function(ne) {
-          return ne !== "key";
+        else y(p);
+      if (U.call(t, "key")) {
+        p = l(e);
+        var S = Object.keys(t).filter(function(oe) {
+          return oe !== "key";
         });
-        d = 0 < _.length ? "{key: someKey, " + _.join(": ..., ") + ": ...}" : "{key: someKey}", q[b + d] || (_ = 0 < _.length ? "{" + _.join(": ..., ") + ": ...}" : "{}", console.error(
+        b = 0 < S.length ? "{key: someKey, " + S.join(": ..., ") + ": ...}" : "{key: someKey}", Q[p + b] || (S = 0 < S.length ? "{" + S.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);
+          p,
+          S,
+          p
+        ), Q[p + b] = !0);
       }
-      if (b = null, l !== void 0 && (t(l), b = "" + l), m(n) && (t(n.key), b = "" + n.key), "key" in n) {
-        l = {};
-        for (var N in n)
-          N !== "key" && (l[N] = n[N]);
-      } else l = n;
-      return b && p(
-        l,
+      if (p = null, u !== void 0 && (n(u), p = "" + u), m(t) && (n(t.key), p = "" + t.key), "key" in t) {
+        u = {};
+        for (var L in t)
+          L !== "key" && (u[L] = t[L]);
+      } else u = t;
+      return p && w(
+        u,
         typeof e == "function" ? e.displayName || e.name || "Unknown" : e
-      ), T(
+      ), h(
         e,
-        b,
-        h,
-        w,
+        p,
+        g,
+        k,
         s(),
-        l,
-        x,
-        j
+        u,
+        Y,
+        W
       );
     }
-    function v(e) {
-      typeof e == "object" && e !== null && e.$$typeof === y && e._store && (e._store.validated = 1);
+    function y(e) {
+      typeof e == "object" && e !== null && e.$$typeof === I && 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 i = q, I = Symbol.for("react.transitional.element"), N = Symbol.for("react.portal"), f = Symbol.for("react.fragment"), d = Symbol.for("react.strict_mode"), P = Symbol.for("react.profiler"), x = Symbol.for("react.consumer"), F = Symbol.for("react.context"), E = Symbol.for("react.forward_ref"), _ = Symbol.for("react.suspense"), T = Symbol.for("react.suspense_list"), o = Symbol.for("react.memo"), J = Symbol.for("react.lazy"), re = Symbol.for("react.activity"), te = Symbol.for("react.client.reference"), D = i.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, U = Object.prototype.hasOwnProperty, ne = Array.isArray, M = console.createTask ? console.createTask : function() {
       return null;
     };
-    a = {
+    i = {
       react_stack_bottom_frame: function(e) {
         return e();
       }
     };
-    var Y, L = {}, W = a.react_stack_bottom_frame.bind(
-      a,
+    var V, z = {}, G = i.react_stack_bottom_frame.bind(
+      i,
       c
-    )(), $ = O(u(c)), q = {};
-    k.Fragment = f, k.jsx = function(e, n, l, d, w) {
-      var h = 1e4 > C.recentlyCreatedOwnerStacks++;
-      return E(
+    )(), B = M(a(c)), Q = {};
+    C.Fragment = f, C.jsx = function(e, t, u, b, k) {
+      var g = 1e4 > D.recentlyCreatedOwnerStacks++;
+      return R(
         e,
-        n,
-        l,
+        t,
+        u,
         !1,
-        d,
-        w,
-        h ? Error("react-stack-top-frame") : W,
-        h ? O(u(e)) : $
+        b,
+        k,
+        g ? Error("react-stack-top-frame") : G,
+        g ? M(a(e)) : B
       );
-    }, k.jsxs = function(e, n, l, d, w) {
-      var h = 1e4 > C.recentlyCreatedOwnerStacks++;
-      return E(
+    }, C.jsxs = function(e, t, u, b, k) {
+      var g = 1e4 > D.recentlyCreatedOwnerStacks++;
+      return R(
         e,
-        n,
-        l,
+        t,
+        u,
         !0,
-        d,
-        w,
-        h ? Error("react-stack-top-frame") : W,
-        h ? O(u(e)) : $
+        b,
+        k,
+        g ? Error("react-stack-top-frame") : G,
+        g ? M(a(e)) : B
       );
     };
-  })()), k;
+  })()), C;
 }
-var z;
-function ce() {
-  return z || (z = 1, process.env.NODE_ENV === "production" ? A.exports = ie() : A.exports = ue()), A.exports;
+var K;
+function ie() {
+  return K || (K = 1, process.env.NODE_ENV === "production" ? j.exports = ae() : j.exports = se()), j.exports;
 }
-var ae = ce();
-class le extends EventTarget {
+var ce = ie();
+const fe = ({
+  formConfig: l,
+  formPageUrl: r,
+  formId: n,
+  scale: a = 100,
+  instanceId: s,
+  onFormEvent: c
+}) => {
+  const m = !!(l && r), w = n ?? l?.formId ?? s ?? "preview", v = q.useRef(null), h = q.useRef(null), R = $(!1), y = $(() => {
+  }), i = $({});
+  O(() => {
+    if (!c) return;
+    c({
+      onSubmit: (d) => {
+        i.current.onSubmit = d;
+      },
+      onShow: (d) => {
+        i.current.onShow = d;
+      },
+      onClose: (d) => {
+        i.current.onClose = d;
+      },
+      onSectionChange: (d) => {
+        i.current.onSectionChange = d;
+      },
+      onQuestionAnswered: (d) => {
+        i.current.onQuestionAnswered = d;
+      },
+      onError: (d) => {
+        i.current.onError = d;
+      }
+    });
+  }, [c]);
+  const I = X(() => {
+    if (!h.current?.contentWindow || !l) return;
+    const f = { formId: w, scale: a, ...l };
+    h.current.contentWindow.postMessage(
+      { type: "sdk:formConfig", data: f },
+      "*"
+    );
+  }, [l, w, a]);
+  y.current = I, O(() => {
+    !m || !R.current || y.current();
+  }, [m, l, I]);
+  const N = X((f) => {
+    f.style.border = "none", f.style.width = "100%", f.style.height = "100%";
+  }, []);
+  return O(() => {
+    if (!m || !v.current || !l || !r) return;
+    const f = document.createElement("div");
+    f.style.width = "100%", f.style.height = "100%", f.style.display = "flex", f.style.flexDirection = "column", f.style.justifyContent = "flex-end", f.style.overflow = "auto";
+    const d = document.createElement("iframe"), P = new URL(r, window.location.origin);
+    P.searchParams.set("formId", w), d.src = P.toString(), d.title = "Encatch form", N(d), h.current = d, f.appendChild(d), v.current.appendChild(f);
+    const x = (F) => {
+      const E = F.data;
+      if (!E || typeof E != "object" || !E.type) return;
+      let _ = E.type, T = E.formId, o = E.data;
+      switch (_.startsWith("encatch:") && (_ = _.replace("encatch:", ""), T = E.payload?.feedbackConfigurationId, o = E.payload), _) {
+        case "form:resize":
+          h.current && o && typeof o.height == "number" && (h.current.style.height = `${o.height}px`);
+          break;
+        case "form:ready":
+          R.current = !0, y.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":
+          o && i.current.onSubmit && i.current.onSubmit({
+            feedbackConfigurationId: o.feedbackConfigurationId,
+            feedbackIdentifier: o.feedbackIdentifier,
+            response: o.response,
+            isPartialSubmit: o.isPartialSubmit,
+            timestamp: Date.now()
+          });
+          break;
+        case "form:show":
+          o && i.current.onShow && i.current.onShow({
+            feedbackConfigurationId: o.feedbackConfigurationId,
+            feedbackIdentifier: o.feedbackIdentifier,
+            timestamp: Date.now()
+          });
+          break;
+        case "form:started":
+          o && i.current.onShow && i.current.onShow({
+            feedbackConfigurationId: o.feedbackConfigurationId,
+            feedbackIdentifier: o.feedbackIdentifier,
+            timestamp: Date.now()
+          });
+          break;
+        case "form:section:change":
+          o && i.current.onSectionChange && i.current.onSectionChange({
+            feedbackConfigurationId: o.feedbackConfigurationId ?? T ?? "",
+            sectionIndex: o.sectionIndex,
+            sectionId: o.sectionId,
+            timestamp: Date.now()
+          });
+          break;
+        case "form:answered":
+          o && i.current.onQuestionAnswered && i.current.onQuestionAnswered({
+            feedbackConfigurationId: o.feedbackConfigurationId ?? T ?? "",
+            questionId: o.questionId,
+            questionType: o.questionType,
+            answer: o.answer,
+            timestamp: Date.now()
+          });
+          break;
+        case "form:error":
+          o && i.current.onError && i.current.onError({
+            feedbackConfigurationId: o.feedbackConfigurationId ?? T ?? "",
+            questionId: o.questionId,
+            error: o.error ?? "Unknown error",
+            timestamp: Date.now()
+          });
+          break;
+      }
+    };
+    return window.addEventListener("message", x), () => {
+      window.removeEventListener("message", x), R.current = !1, f.parentNode && f.parentNode.removeChild(f), h.current = null;
+    };
+  }, [m, r, w]), /* @__PURE__ */ ce.jsx(
+    "div",
+    {
+      ref: v,
+      title: "encatchPreview1",
+      style: m ? {
+        width: "100%",
+        height: "100%"
+      } : void 0
+    }
+  );
+};
+class ue 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,29 +432,29 @@ class le extends EventTarget {
   /**
    * Publish an event to all matching subscribers
    */
-  publish(r, t, u) {
+  publish(r, n, a) {
     typeof window < "u" && window.dispatchEvent(
       new CustomEvent(r, {
-        detail: t,
+        detail: n,
         bubbles: !0
       })
-    ), u?.usePostMessage !== !1 && this.sendPostMessage(r, t);
+    ), a?.usePostMessage !== !1 && this.sendPostMessage(r, n);
   }
   /**
    * Subscribe to form events with optional form ID filtering
    */
-  subscribe(r, t, u) {
+  subscribe(r, n, a) {
     const s = Symbol("subscription"), c = {
       eventType: r,
-      handler: t,
-      filter: u?.formId,
+      handler: n,
+      filter: a?.formId,
       id: s,
-      once: u?.once
+      once: a?.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));
+    const m = (w) => {
+      const v = w, h = this.getFormIdFromPayload(v.detail);
+      this.matchesFilter(h, a?.formId) && (n(v.detail), a?.once && typeof window < "u" && window.removeEventListener(r, m));
     };
     return typeof window < "u" && window.addEventListener(r, m), () => {
       this.unsubscribe(s), typeof window < "u" && window.removeEventListener(r, m);
@@ -329,10 +464,10 @@ class le extends EventTarget {
    * Unsubscribe by subscription ID
    */
   unsubscribe(r) {
-    for (const [t, u] of this.subscriptions.entries()) {
-      const s = u.findIndex((c) => c.id === r);
+    for (const [n, a] of this.subscriptions.entries()) {
+      const s = a.findIndex((c) => c.id === r);
       if (s !== -1) {
-        u.splice(s, 1), u.length === 0 && this.subscriptions.delete(t);
+        a.splice(s, 1), a.length === 0 && this.subscriptions.delete(n);
         break;
       }
     }
@@ -340,21 +475,21 @@ class le extends EventTarget {
   /**
    * Subscribe to all form events with optional filtering
    */
-  subscribeAll(r, t) {
-    const u = [
+  subscribeAll(r, n) {
+    const a = [
       "form:show",
       "form:started",
       "form:submit",
       "form:close",
       "form:section:change",
-      "form:question:answered",
+      "form:answered",
       "form:error"
     ], s = [];
-    return u.forEach((c) => {
+    return a.forEach((c) => {
       const m = this.subscribe(
         c,
-        (p) => r(c, p),
-        t
+        (w) => r(c, w),
+        n
       );
       s.push(m);
     }), () => {
@@ -365,7 +500,7 @@ class le extends EventTarget {
    * 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, a) => n + a.length, 0);
   }
   /**
    * Clear all subscriptions for an event type (or all events)
@@ -373,130 +508,33 @@ class le extends EventTarget {
   clearSubscriptions(r) {
     r ? this.subscriptions.delete(r) : this.subscriptions.clear();
   }
-  sendPostMessage(r, t) {
-    const u = {
+  sendPostMessage(r, n) {
+    const a = {
       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(a, this.targetOrigin), document.querySelectorAll("iframe").forEach((s) => {
+      s.contentWindow && s.contentWindow.postMessage(a, 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 = ({
-  formData: o,
-  cssLink: r,
-  scale: t = 100,
-  persistMode: u = "none",
-  instanceId: s,
-  onFormEvent: c
-}) => {
-  const [m, p] = U(!1), [R, T] = U(!0), E = I.useRef(null), v = I.useRef(
-    null
-  ), a = oe({});
-  S(() => {
-    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]), S(() => {
-    if (!s) return;
-    const i = [];
-    return a.current.onSubmit && i.push(
-      g.subscribe(
-        "form:submit",
-        a.current.onSubmit,
-        { formId: s }
-      )
-    ), a.current.onShow && i.push(
-      g.subscribe(
-        "form:show",
-        a.current.onShow,
-        { formId: s }
-      )
-    ), a.current.onClose && i.push(
-      g.subscribe(
-        "form:close",
-        a.current.onClose,
-        { formId: s }
-      )
-    ), a.current.onSectionChange && i.push(
-      g.subscribe(
-        "form:section:change",
-        a.current.onSectionChange,
-        { formId: s }
-      )
-    ), a.current.onQuestionAnswered && i.push(
-      g.subscribe(
-        "form:question:answered",
-        a.current.onQuestionAnswered,
-        { formId: s }
-      )
-    ), a.current.onError && i.push(
-      g.subscribe(
-        "form:error",
-        a.current.onError,
-        { formId: s }
-      )
-    ), () => {
-      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)
-      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;
-    };
-  }, [m, o, r, t, y, u, s]), R ? /* @__PURE__ */ ae.jsx("div", { ref: E }) : null;
-};
-function be(o, r, t) {
-  S(() => g.subscribe(
-    o,
+const ee = new ue();
+function de(l, r, n) {
+  O(() => ee.subscribe(
+    l,
     r,
-    t
-  ), [o, t?.formId, r]);
+    n
+  ), [l, n?.formId, r]);
 }
-function me(o, r) {
-  S(() => g.subscribeAll(o, r), [r?.formId, o]);
+function me(l, r) {
+  O(() => ee.subscribeAll(l, r), [r?.formId, l]);
 }
 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(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(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 x={exports:{}},C={};/**
  * @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 q;function K(){if(q)return C;q=1;var f=Symbol.for("react.transitional.element"),r=Symbol.for("react.fragment");function n(s,a,c){var b=null;if(c!==void 0&&(b=""+c),a.key!==void 0&&(b=""+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:f,type:s,key:b,ref:a!==void 0?a:null,props:c}}return C.Fragment=r,C.jsx=n,C.jsxs=n,C}var O={};/**
  * @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 J;function ee(){return J||(J=1,process.env.NODE_ENV!=="production"&&(function(){function f(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 l:return"Fragment";case j:return"Profiler";case d:return"StrictMode";case S:return"Suspense";case I:return"SuspenseList";case ie: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 F:return"Portal";case D:return(e.displayName||"Context")+".Provider";case N:return(e._context.displayName||"Context")+".Consumer";case v: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:f(e.type)||"Memo";case z:t=e._payload,e=e._init;try{return f(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 u=t.error,p=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return u.call(t,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",p),r(e)}}function s(e){if(e===l)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===z)return"<...>";try{var t=f(e);return t?"<"+t+">":"<...>"}catch{return"<...>"}}function a(){var e=M.A;return e===null?null:e.getOwner()}function c(){return Error("react-stack-top-frame")}function b(e){if(G.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 u(){B||(B=!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))}u.isReactWarning=!0,Object.defineProperty(e,"key",{get:u,configurable:!0})}function y(){var e=f(this.type);return Q[e]||(Q[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 E(e,t,u,p,R,g,W,L){return u=g.ref,e={$$typeof:P,type:e,key:t,props:g,_owner:R},(u!==void 0?u:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:y}):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:W}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:L}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function _(e,t,u,p,R,g,W,L){var w=t.children;if(w!==void 0)if(p)if(ue(w)){for(p=0;p<w.length;p++)T(w[p]);Object.freeze&&Object.freeze(w)}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 T(w);if(G.call(t,"key")){w=f(e);var A=Object.keys(t).filter(function(fe){return fe!=="key"});p=0<A.length?"{key: someKey, "+A.join(": ..., ")+": ...}":"{key: someKey}",Z[w+p]||(A=0<A.length?"{"+A.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,w,A,w),Z[w+p]=!0)}if(w=null,u!==void 0&&(n(u),w=""+u),b(t)&&(n(t.key),w=""+t.key),"key"in t){u={};for(var $ in t)$!=="key"&&(u[$]=t[$])}else u=t;return w&&h(u,typeof e=="function"?e.displayName||e.name||"Unknown":e),E(e,w,g,R,a(),u,W,L)}function T(e){typeof e=="object"&&e!==null&&e.$$typeof===P&&e._store&&(e._store.validated=1)}var i=m,P=Symbol.for("react.transitional.element"),F=Symbol.for("react.portal"),l=Symbol.for("react.fragment"),d=Symbol.for("react.strict_mode"),j=Symbol.for("react.profiler"),N=Symbol.for("react.consumer"),D=Symbol.for("react.context"),v=Symbol.for("react.forward_ref"),S=Symbol.for("react.suspense"),I=Symbol.for("react.suspense_list"),o=Symbol.for("react.memo"),z=Symbol.for("react.lazy"),ie=Symbol.for("react.activity"),ce=Symbol.for("react.client.reference"),M=i.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,G=Object.prototype.hasOwnProperty,ue=Array.isArray,Y=console.createTask?console.createTask:function(){return null};i={react_stack_bottom_frame:function(e){return e()}};var B,Q={},X=i.react_stack_bottom_frame.bind(i,c)(),H=Y(s(c)),Z={};O.Fragment=l,O.jsx=function(e,t,u,p,R){var g=1e4>M.recentlyCreatedOwnerStacks++;return _(e,t,u,!1,p,R,g?Error("react-stack-top-frame"):X,g?Y(s(e)):H)},O.jsxs=function(e,t,u,p,R){var g=1e4>M.recentlyCreatedOwnerStacks++;return _(e,t,u,!0,p,R,g?Error("react-stack-top-frame"):X,g?Y(s(e)):H)}})()),O}var U;function re(){return U||(U=1,process.env.NODE_ENV==="production"?x.exports=K():x.exports=ee()),x.exports}var te=re();const ne=({formConfig:f,formPageUrl:r,formId:n,scale:s=100,instanceId:a,onFormEvent:c})=>{const b=!!(f&&r),h=n??f?.formId??a??"preview",y=m.useRef(null),E=m.useRef(null),_=m.useRef(!1),T=m.useRef(()=>{}),i=m.useRef({});m.useEffect(()=>{if(!c)return;c({onSubmit:d=>{i.current.onSubmit=d},onShow:d=>{i.current.onShow=d},onClose:d=>{i.current.onClose=d},onSectionChange:d=>{i.current.onSectionChange=d},onQuestionAnswered:d=>{i.current.onQuestionAnswered=d},onError:d=>{i.current.onError=d}})},[c]);const P=m.useCallback(()=>{if(!E.current?.contentWindow||!f)return;const l={formId:h,scale:s,...f};E.current.contentWindow.postMessage({type:"sdk:formConfig",data:l},"*")},[f,h,s]);T.current=P,m.useEffect(()=>{!b||!_.current||T.current()},[b,f,P]);const F=m.useCallback(l=>{l.style.border="none",l.style.width="100%",l.style.height="100%"},[]);return m.useEffect(()=>{if(!b||!y.current||!f||!r)return;const l=document.createElement("div");l.style.width="100%",l.style.height="100%",l.style.display="flex",l.style.flexDirection="column",l.style.justifyContent="flex-end",l.style.overflow="auto";const d=document.createElement("iframe"),j=new URL(r,window.location.origin);j.searchParams.set("formId",h),d.src=j.toString(),d.title="Encatch form",F(d),E.current=d,l.appendChild(d),y.current.appendChild(l);const N=D=>{const v=D.data;if(!v||typeof v!="object"||!v.type)return;let S=v.type,I=v.formId,o=v.data;switch(S.startsWith("encatch:")&&(S=S.replace("encatch:",""),I=v.payload?.feedbackConfigurationId,o=v.payload),S){case"form:resize":E.current&&o&&typeof o.height=="number"&&(E.current.style.height=`${o.height}px`);break;case"form:ready":_.current=!0,T.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":o&&i.current.onSubmit&&i.current.onSubmit({feedbackConfigurationId:o.feedbackConfigurationId,feedbackIdentifier:o.feedbackIdentifier,response:o.response,isPartialSubmit:o.isPartialSubmit,timestamp:Date.now()});break;case"form:show":o&&i.current.onShow&&i.current.onShow({feedbackConfigurationId:o.feedbackConfigurationId,feedbackIdentifier:o.feedbackIdentifier,timestamp:Date.now()});break;case"form:started":o&&i.current.onShow&&i.current.onShow({feedbackConfigurationId:o.feedbackConfigurationId,feedbackIdentifier:o.feedbackIdentifier,timestamp:Date.now()});break;case"form:section:change":o&&i.current.onSectionChange&&i.current.onSectionChange({feedbackConfigurationId:o.feedbackConfigurationId??I??"",sectionIndex:o.sectionIndex,sectionId:o.sectionId,timestamp:Date.now()});break;case"form:answered":o&&i.current.onQuestionAnswered&&i.current.onQuestionAnswered({feedbackConfigurationId:o.feedbackConfigurationId??I??"",questionId:o.questionId,questionType:o.questionType,answer:o.answer,timestamp:Date.now()});break;case"form:error":o&&i.current.onError&&i.current.onError({feedbackConfigurationId:o.feedbackConfigurationId??I??"",questionId:o.questionId,error:o.error??"Unknown error",timestamp:Date.now()});break}};return window.addEventListener("message",N),()=>{window.removeEventListener("message",N),_.current=!1,l.parentNode&&l.parentNode.removeChild(l),E.current=null}},[b,r,h]),te.jsx("div",{ref:y,title:"encatchPreview1",style:b?{width:"100%",height:"100%"}:void 0})};class oe 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 b=h=>{const y=h,E=this.getFormIdFromPayload(y.detail);this.matchesFilter(E,s?.formId)&&(n(y.detail),s?.once&&typeof window<"u"&&window.removeEventListener(r,b))};return typeof window<"u"&&window.addEventListener(r,b),()=>{this.unsubscribe(a),typeof window<"u"&&window.removeEventListener(r,b)}}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:answered","form:error"],a=[];return s.forEach(c=>{const b=this.subscribe(c,h=>r(c,h),n);a.push(b)}),()=>{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 V=new oe;function se(f,r,n){m.useEffect(()=>V.subscribe(f,r,n),[f,n?.formId,r])}function ae(f,r){m.useEffect(()=>V.subscribeAll(f,r),[r?.formId,f])}k.EncatchPreview=ne,k.useEncatchFormEvent=se,k.useEncatchFormEventAll=ae,Object.defineProperty(k,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
  */
@@ -18,7 +59,7 @@ export type OnSectionChangeCallback = (payload: FormEventPayload['form:section:c
 /**
  * Callback function for question answered events
  */
-export type OnQuestionAnsweredCallback = (payload: FormEventPayload['form:question:answered']) => void;
+export type OnQuestionAnsweredCallback = (payload: FormEventPayload['form:answered']) => void;
 /**
  * Callback function for form error 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.1",
+  "version": "0.0.50-beta.10",
   "type": "module",
   "main": "./dist/index.umd.js",
   "module": "./dist/index.es.js",
@@ -20,8 +20,8 @@
     "react-dom": "^19.1.1"
   },
   "dependencies": {
-    "@encatch/schema": "1.0.0-beta.1",
-    "@encatch/event-publisher": "1.0.0-beta.1"
+    "@encatch/schema": "1.0.0",
+    "@encatch/event-publisher": "1.0.0-beta.2"
   },
   "devDependencies": {
     "@eslint/js": "^9.36.0",