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

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

package/dist/EncatchPreview.d.ts

@@ -1,58 +1,18 @@
-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;
+    /** Iframe container width as a percentage string (e.g. "100%", "80%"). Default "100%". */
+    iframeWidth?: string;
+    /** Iframe container height as a percentage string (e.g. "100%", "80%"). Default "100%". */
+    iframeHeight?: string;
+    /** Visual scale of the iframe content, 1–100. Applied via CSS transform. Default 100. */
     scale?: number;
-    persistMode?: "retain" | "reset" | "none";
     instanceId?: string;
     /**
      * Callback function that receives a FormEventBuilder to register event handlers

package/dist/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 V, { useRef as J, useEffect as P, useCallback as H } from "react";
+var D = { exports: {} }, j = {};
 /**
  * @license React
  * react-jsx-runtime.production.js
@@ -9,29 +9,29 @@ var 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 m = null;
-    if (c !== void 0 && (m = "" + c), s.key !== void 0 && (m = "" + s.key), "key" in s) {
+var Z;
+function se() {
+  if (Z) return j;
+  Z = 1;
+  var i = Symbol.for("react.transitional.element"), r = Symbol.for("react.fragment");
+  function n(s, a, c) {
+    var p = null;
+    if (c !== void 0 && (p = "" + c), a.key !== void 0 && (p = "" + a.key), "key" in a) {
       c = {};
-      for (var p in s)
-        p !== "key" && (c[p] = s[p]);
-    } else c = s;
-    return s = c.ref, {
-      $$typeof: o,
-      type: u,
-      key: m,
-      ref: s !== void 0 ? s : null,
+      for (var w in a)
+        w !== "key" && (c[w] = a[w]);
+    } else c = a;
+    return a = c.ref, {
+      $$typeof: i,
+      type: s,
+      key: p,
+      ref: a !== void 0 ? a : null,
       props: c
     };
   }
-  return P.Fragment = r, P.jsx = t, P.jsxs = t, P;
+  return j.Fragment = r, j.jsx = n, j.jsxs = n, j;
 }
-var k = {};
+var N = {};
 /**
  * @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 K;
+function ae() {
+  return K || (K = 1, process.env.NODE_ENV !== "production" && (function() {
+    function i(e) {
       if (e == null) return null;
       if (typeof e == "function")
-        return e.$$typeof === 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:
+        case A:
           return "Fragment";
-        case Q:
+        case u:
           return "Profiler";
-        case G:
+        case x:
           return "StrictMode";
-        case Z:
+        case M:
           return "Suspense";
-        case K:
+        case E:
           return "SuspenseList";
-        case ee:
+        case o:
           return "Activity";
       }
       if (typeof e == "object")
         switch (typeof e.tag == "number" && console.error(
           "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
         ), e.$$typeof) {
-          case i:
+          case f:
             return "Portal";
-          case B:
+          case k:
             return (e.displayName || "Context") + ".Provider";
-          case X:
+          case d:
             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 F:
+            var t = e.render;
+            return e = e.displayName, e || (e = t.displayName || t.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
+          case O:
+            return t = e.displayName || null, t !== null ? t : i(e.type) || "Memo";
+          case T:
+            t = e._payload, e = e._init;
             try {
-              return o(e(n));
+              return i(e(t));
             } 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 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";
+      if (t) {
+        t = console;
+        var l = t.error, m = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
         return l.call(
-          n,
+          t,
           "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)
+    function s(e) {
+      if (e === A) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === T)
         return "<...>";
       try {
-        var n = o(e);
-        return n ? "<" + n + ">" : "<...>";
+        var t = i(e);
+        return t ? "<" + t + ">" : "<...>";
       } catch {
         return "<...>";
       }
     }
-    function s() {
-      var e = C.A;
+    function a() {
+      var e = Y.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;
+    function p(e) {
+      if (U.call(e, "key")) {
+        var t = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (t && t.isReactWarning) return !1;
       }
       return e.key !== void 0;
     }
-    function p(e, n) {
+    function w(e, t) {
       function l() {
-        Y || (Y = !0, console.error(
+        z || (z = !0, console.error(
           "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
-          n
+          t
         ));
       }
       l.isReactWarning = !0, Object.defineProperty(e, "key", {
@@ -144,22 +144,22 @@ function ue() {
         configurable: !0
       });
     }
-    function R() {
-      var e = o(this.type);
-      return L[e] || (L[e] = !0, console.error(
+    function h() {
+      var e = i(this.type);
+      return G[e] || (G[e] = !0, console.error(
         "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
       )), e = this.props.ref, e !== void 0 ? e : null;
     }
-    function T(e, n, l, d, w, h, x, j) {
-      return l = h.ref, e = {
-        $$typeof: y,
+    function R(e, t, l, m, _, g, $, L) {
+      return l = g.ref, e = {
+        $$typeof: I,
         type: e,
-        key: n,
-        props: h,
-        _owner: w
+        key: t,
+        props: g,
+        _owner: _
       }, (l !== void 0 ? l : null) !== null ? Object.defineProperty(e, "ref", {
         enumerable: !1,
-        get: R
+        get: h
       }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
         configurable: !1,
         enumerable: !1,
@@ -174,119 +174,260 @@ function ue() {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: x
+        value: $
       }), Object.defineProperty(e, "_debugTask", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: j
+        value: L
       }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
     }
-    function E(e, n, l, d, w, h, x, j) {
-      var b = n.children;
+    function S(e, t, l, m, _, g, $, L) {
+      var b = t.children;
       if (b !== void 0)
-        if (d)
-          if (te(b)) {
-            for (d = 0; d < b.length; d++)
-              v(b[d]);
+        if (m)
+          if (ne(b)) {
+            for (m = 0; m < b.length; m++)
+              v(b[m]);
             Object.freeze && Object.freeze(b);
           } else
             console.error(
               "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
             );
         else v(b);
-      if (F.call(n, "key")) {
-        b = o(e);
-        var _ = Object.keys(n).filter(function(ne) {
-          return ne !== "key";
+      if (U.call(t, "key")) {
+        b = i(e);
+        var C = 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(
+        m = 0 < C.length ? "{key: someKey, " + C.join(": ..., ") + ": ...}" : "{key: someKey}", X[b + m] || (C = 0 < C.length ? "{" + C.join(": ..., ") + ": ...}" : "{}", console.error(
           `A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
 React keys must be passed directly to JSX without using spread:
   let props = %s;
   <%s key={someKey} {...props} />`,
-          d,
+          m,
           b,
-          _,
+          C,
           b
-        ), q[b + d] = !0);
+        ), X[b + m] = !0);
       }
-      if (b = null, l !== void 0 && (t(l), b = "" + l), m(n) && (t(n.key), b = "" + n.key), "key" in n) {
+      if (b = null, l !== void 0 && (n(l), b = "" + l), p(t) && (n(t.key), b = "" + t.key), "key" in t) {
         l = {};
-        for (var N in n)
-          N !== "key" && (l[N] = n[N]);
-      } else l = n;
-      return b && p(
+        for (var q in t)
+          q !== "key" && (l[q] = t[q]);
+      } else l = t;
+      return b && w(
         l,
         typeof e == "function" ? e.displayName || e.name || "Unknown" : e
-      ), T(
+      ), R(
         e,
         b,
-        h,
-        w,
-        s(),
+        g,
+        _,
+        a(),
         l,
-        x,
-        j
+        $,
+        L
       );
     }
     function v(e) {
-      typeof e == "object" && e !== null && e.$$typeof === y && e._store && (e._store.validated = 1);
+      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 y = V, I = Symbol.for("react.transitional.element"), f = Symbol.for("react.portal"), A = Symbol.for("react.fragment"), x = Symbol.for("react.strict_mode"), u = Symbol.for("react.profiler"), d = Symbol.for("react.consumer"), k = Symbol.for("react.context"), F = Symbol.for("react.forward_ref"), M = Symbol.for("react.suspense"), E = Symbol.for("react.suspense_list"), O = Symbol.for("react.memo"), T = Symbol.for("react.lazy"), o = Symbol.for("react.activity"), te = Symbol.for("react.client.reference"), Y = y.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, U = Object.prototype.hasOwnProperty, ne = Array.isArray, W = console.createTask ? console.createTask : function() {
       return null;
     };
-    a = {
+    y = {
       react_stack_bottom_frame: function(e) {
         return e();
       }
     };
-    var Y, L = {}, W = a.react_stack_bottom_frame.bind(
-      a,
+    var z, G = {}, B = y.react_stack_bottom_frame.bind(
+      y,
       c
-    )(), $ = O(u(c)), q = {};
-    k.Fragment = f, k.jsx = function(e, n, l, d, w) {
-      var h = 1e4 > C.recentlyCreatedOwnerStacks++;
-      return E(
+    )(), Q = W(s(c)), X = {};
+    N.Fragment = A, N.jsx = function(e, t, l, m, _) {
+      var g = 1e4 > Y.recentlyCreatedOwnerStacks++;
+      return S(
         e,
-        n,
+        t,
         l,
         !1,
-        d,
-        w,
-        h ? Error("react-stack-top-frame") : W,
-        h ? O(u(e)) : $
+        m,
+        _,
+        g ? Error("react-stack-top-frame") : B,
+        g ? W(s(e)) : Q
       );
-    }, k.jsxs = function(e, n, l, d, w) {
-      var h = 1e4 > C.recentlyCreatedOwnerStacks++;
-      return E(
+    }, N.jsxs = function(e, t, l, m, _) {
+      var g = 1e4 > Y.recentlyCreatedOwnerStacks++;
+      return S(
         e,
-        n,
+        t,
         l,
         !0,
-        d,
-        w,
-        h ? Error("react-stack-top-frame") : W,
-        h ? O(u(e)) : $
+        m,
+        _,
+        g ? Error("react-stack-top-frame") : B,
+        g ? W(s(e)) : Q
       );
     };
-  })()), k;
+  })()), N;
 }
-var z;
-function ce() {
-  return z || (z = 1, process.env.NODE_ENV === "production" ? A.exports = ie() : A.exports = ue()), A.exports;
+var ee;
+function ie() {
+  return ee || (ee = 1, process.env.NODE_ENV === "production" ? D.exports = se() : D.exports = ae()), D.exports;
 }
-var ae = ce();
-class le extends EventTarget {
+var ce = ie();
+const fe = ({
+  formConfig: i,
+  formPageUrl: r,
+  formId: n,
+  iframeWidth: s = "100%",
+  iframeHeight: a = "100%",
+  scale: c = 100,
+  instanceId: p,
+  onFormEvent: w
+}) => {
+  const h = !!(i && r), R = n ?? i?.formId ?? p ?? "preview", S = V.useRef(null), v = V.useRef(null), y = J(!1), I = J(() => {
+  }), f = J({});
+  P(() => {
+    if (!w) return;
+    w({
+      onSubmit: (d) => {
+        f.current.onSubmit = d;
+      },
+      onShow: (d) => {
+        f.current.onShow = d;
+      },
+      onClose: (d) => {
+        f.current.onClose = d;
+      },
+      onSectionChange: (d) => {
+        f.current.onSectionChange = d;
+      },
+      onQuestionAnswered: (d) => {
+        f.current.onQuestionAnswered = d;
+      },
+      onError: (d) => {
+        f.current.onError = d;
+      }
+    });
+  }, [w]);
+  const A = H(() => {
+    if (!v.current?.contentWindow || !i) return;
+    const u = { formId: R, ...i };
+    v.current.contentWindow.postMessage(
+      { type: "sdk:formConfig", data: u },
+      "*"
+    );
+  }, [i, R]);
+  I.current = A, P(() => {
+    !h || !y.current || I.current();
+  }, [h, i, A]);
+  const x = H(
+    (u, d) => {
+      const k = d / 100;
+      u.style.border = "none", k === 1 ? (u.style.width = "100%", u.style.height = "100%", u.style.transform = "", u.style.transformOrigin = "") : (u.style.width = `${100 / k}%`, u.style.height = `${100 / k}%`, u.style.transformOrigin = "0 0", u.style.transform = `scale(${k})`);
+    },
+    []
+  );
+  return P(() => {
+    !h || !v.current || x(v.current, c);
+  }, [h, i, r, c, x]), P(() => {
+    if (!h || !S.current || !i || !r) return;
+    const u = document.createElement("div");
+    u.style.width = "100%", u.style.height = "100%", u.style.overflow = "hidden";
+    const d = document.createElement("iframe"), k = new URL(r, window.location.origin);
+    k.searchParams.set("formId", R), d.src = k.toString(), d.title = "Encatch form", x(d, c), v.current = d, u.appendChild(d), S.current.appendChild(u);
+    const F = (M) => {
+      const E = M.data;
+      if (!E || typeof E != "object" || !E.type) return;
+      let O = E.type, T = E.formId, o = E.data;
+      switch (O.startsWith("encatch:") && (O = O.replace("encatch:", ""), T = E.payload?.feedbackConfigurationId, o = E.payload), O) {
+        case "form:ready":
+          y.current = !0, I.current();
+          break;
+        case "form:close":
+          f.current.onClose?.({ timestamp: Date.now() });
+          break;
+        case "form:complete":
+          f.current.onClose?.({ timestamp: Date.now() });
+          break;
+        case "form:submit":
+          o && f.current.onSubmit && f.current.onSubmit({
+            feedbackConfigurationId: o.feedbackConfigurationId,
+            feedbackIdentifier: o.feedbackIdentifier,
+            response: o.response,
+            isPartialSubmit: o.isPartialSubmit,
+            timestamp: Date.now()
+          });
+          break;
+        case "form:show":
+          o && f.current.onShow && f.current.onShow({
+            feedbackConfigurationId: o.feedbackConfigurationId,
+            feedbackIdentifier: o.feedbackIdentifier,
+            timestamp: Date.now()
+          });
+          break;
+        case "form:started":
+          o && f.current.onShow && f.current.onShow({
+            feedbackConfigurationId: o.feedbackConfigurationId,
+            feedbackIdentifier: o.feedbackIdentifier,
+            timestamp: Date.now()
+          });
+          break;
+        case "form:section:change":
+          o && f.current.onSectionChange && f.current.onSectionChange({
+            feedbackConfigurationId: o.feedbackConfigurationId ?? T ?? "",
+            sectionIndex: o.sectionIndex,
+            sectionId: o.sectionId,
+            timestamp: Date.now()
+          });
+          break;
+        case "form:question:answered":
+          o && f.current.onQuestionAnswered && f.current.onQuestionAnswered({
+            feedbackConfigurationId: o.feedbackConfigurationId ?? T ?? "",
+            questionId: o.questionId,
+            questionType: o.questionType,
+            answer: o.answer,
+            timestamp: Date.now()
+          });
+          break;
+        case "form:error":
+          o && f.current.onError && f.current.onError({
+            feedbackConfigurationId: o.feedbackConfigurationId ?? T ?? "",
+            questionId: o.questionId,
+            error: o.error ?? "Unknown error",
+            timestamp: Date.now()
+          });
+          break;
+      }
+    };
+    return window.addEventListener("message", F), () => {
+      window.removeEventListener("message", F), y.current = !1, u.parentNode && u.parentNode.removeChild(u), v.current = null;
+    };
+  }, [h, r, R]), /* @__PURE__ */ ce.jsx(
+    "div",
+    {
+      ref: S,
+      title: "encatchPreview1",
+      style: h ? {
+        width: s ?? "100%",
+        height: a ?? "100%",
+        minHeight: 400
+      } : 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,42 +438,42 @@ class le extends EventTarget {
   /**
    * Publish an event to all matching subscribers
    */
-  publish(r, t, u) {
+  publish(r, n, s) {
     typeof window < "u" && window.dispatchEvent(
       new CustomEvent(r, {
-        detail: t,
+        detail: n,
         bubbles: !0
       })
-    ), u?.usePostMessage !== !1 && this.sendPostMessage(r, t);
+    ), s?.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, s) {
+    const a = Symbol("subscription"), c = {
       eventType: r,
-      handler: t,
-      filter: u?.formId,
-      id: s,
-      once: u?.once
+      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 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 p = (w) => {
+      const h = w, R = this.getFormIdFromPayload(h.detail);
+      this.matchesFilter(R, s?.formId) && (n(h.detail), s?.once && typeof window < "u" && window.removeEventListener(r, p));
     };
-    return typeof window < "u" && window.addEventListener(r, m), () => {
-      this.unsubscribe(s), typeof window < "u" && window.removeEventListener(r, m);
+    return typeof window < "u" && window.addEventListener(r, p), () => {
+      this.unsubscribe(a), typeof window < "u" && window.removeEventListener(r, p);
     };
   }
   /**
    * Unsubscribe by subscription ID
    */
   unsubscribe(r) {
-    for (const [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, 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;
       }
     }
@@ -340,8 +481,8 @@ class le extends EventTarget {
   /**
    * Subscribe to all form events with optional filtering
    */
-  subscribeAll(r, t) {
-    const u = [
+  subscribeAll(r, n) {
+    const s = [
       "form:show",
       "form:started",
       "form:submit",
@@ -349,23 +490,23 @@ class le extends EventTarget {
       "form:section:change",
       "form:question:answered",
       "form:error"
-    ], s = [];
-    return u.forEach((c) => {
-      const m = this.subscribe(
+    ], a = [];
+    return s.forEach((c) => {
+      const p = this.subscribe(
         c,
-        (p) => r(c, p),
-        t
+        (w) => r(c, w),
+        n
       );
-      s.push(m);
+      a.push(p);
     }), () => {
-      s.forEach((c) => c());
+      a.forEach((c) => c());
     };
   }
   /**
    * Get active subscriptions count (for debugging)
    */
   getSubscriptionCount(r) {
-    return r ? this.subscriptions.get(r)?.length || 0 : Array.from(this.subscriptions.values()).reduce((t, u) => t + u.length, 0);
+    return r ? this.subscriptions.get(r)?.length || 0 : Array.from(this.subscriptions.values()).reduce((n, s) => n + s.length, 0);
   }
   /**
    * Clear all subscriptions for an event type (or all events)
@@ -373,130 +514,33 @@ class le extends EventTarget {
   clearSubscriptions(r) {
     r ? this.subscriptions.delete(r) : this.subscriptions.clear();
   }
-  sendPostMessage(r, t) {
-    const u = {
+  sendPostMessage(r, n) {
+    const s = {
       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(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(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 re = new ue();
+function de(i, r, n) {
+  P(() => re.subscribe(
+    i,
     r,
-    t
-  ), [o, t?.formId, r]);
+    n
+  ), [i, n?.formId, r]);
 }
-function me(o, r) {
-  S(() => g.subscribeAll(o, r), [r?.formId, o]);
+function me(i, r) {
+  P(() => re.subscribeAll(i, r), [r?.formId, i]);
 }
 export {
-  de as EncatchPreview,
-  be as useEncatchFormEvent,
+  fe as EncatchPreview,
+  de as useEncatchFormEvent,
   me as useEncatchFormEventAll
 };

package/dist/index.umd.js

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

package/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.1",
+  "version": "0.0.50-beta.4",
   "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.1",
+    "@encatch/schema": "1.0.0",
     "@encatch/event-publisher": "1.0.0-beta.1"
   },
   "devDependencies": {