@creopse/react 0.0.11 → 0.0.13

package/dist/index.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
-const index = require("./index-C3UpNpqk.cjs");
+const content = require("./content-WeAhwlM_.cjs");
 require("@inertiajs/react");
 const reactDom = require("react-dom");
 function _interopNamespaceDefault(e) {
@@ -424,7 +424,7 @@ const AsyncImg = ({
 };
 const Image = (props) => {
   const { src, alt = "", width, height, title, loading, style, size = "original", sync = false } = props;
-  const { getImage } = index.useHelper();
+  const { getImage } = content.useHelper();
   const filteredProps = {
     alt,
     width,
@@ -454,9 +454,9 @@ function addUniqueItem(arr, item) {
     arr.push(item);
 }
 function removeItem(arr, item) {
-  const index2 = arr.indexOf(item);
-  if (index2 > -1)
-    arr.splice(index2, 1);
+  const index = arr.indexOf(item);
+  if (index > -1)
+    arr.splice(index, 1);
 }
 const clamp = (min, max, v) => {
   if (v > max)
@@ -1535,8 +1535,8 @@ const isNotNull$1 = (value) => value !== null;
 function getFinalKeyframe$1(keyframes2, { repeat, repeatType = "loop" }, finalKeyframe, speed = 1) {
   const resolvedKeyframes = keyframes2.filter(isNotNull$1);
   const useFirstKeyframe = speed < 0 || repeat && repeatType !== "loop" && repeat % 2 === 1;
-  const index2 = useFirstKeyframe ? 0 : resolvedKeyframes.length - 1;
-  return !index2 || finalKeyframe === void 0 ? resolvedKeyframes[index2] : finalKeyframe;
+  const index = useFirstKeyframe ? 0 : resolvedKeyframes.length - 1;
+  return !index || finalKeyframe === void 0 ? resolvedKeyframes[index] : finalKeyframe;
 }
 const transitionTypeMap = {
   decay: inertia,
@@ -3921,8 +3921,8 @@ function makeLatestValues(props, context, presenceContext, scrapeMotionValues) {
         for (const key in target) {
           let valueTarget = target[key];
           if (Array.isArray(valueTarget)) {
-            const index2 = isInitialAnimationBlocked ? valueTarget.length - 1 : 0;
-            valueTarget = valueTarget[index2];
+            const index = isInitialAnimationBlocked ? valueTarget.length - 1 : 0;
+            valueTarget = valueTarget[index];
           }
           if (valueTarget !== null) {
             values[key] = valueTarget;
@@ -4875,8 +4875,8 @@ function getOptimisedAppearId(visualElement) {
 const isNotNull = (value) => value !== null;
 function getFinalKeyframe(keyframes2, { repeat, repeatType = "loop" }, finalKeyframe) {
   const resolvedKeyframes = keyframes2.filter(isNotNull);
-  const index2 = repeat && repeatType !== "loop" && repeat % 2 === 1 ? 0 : resolvedKeyframes.length - 1;
-  return resolvedKeyframes[index2];
+  const index = repeat && repeatType !== "loop" && repeat % 2 === 1 ? 0 : resolvedKeyframes.length - 1;
+  return resolvedKeyframes[index];
 }
 const underDampedSpring = {
   type: "spring",
@@ -8087,24 +8087,131 @@ const StickyTop = ({
     }
   );
 };
-const RootContainer = ({
-  page,
-  sections = [],
-  components = {}
-}) => {
+const byteToHex = [];
+for (let i = 0; i < 256; ++i) {
+  byteToHex.push((i + 256).toString(16).slice(1));
+}
+function unsafeStringify(arr, offset = 0) {
+  return (byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + "-" + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + "-" + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + "-" + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + "-" + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]]).toLowerCase();
+}
+let getRandomValues;
+const rnds8 = new Uint8Array(16);
+function rng() {
+  if (!getRandomValues) {
+    if (typeof crypto === "undefined" || !crypto.getRandomValues) {
+      throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");
+    }
+    getRandomValues = crypto.getRandomValues.bind(crypto);
+  }
+  return getRandomValues(rnds8);
+}
+const randomUUID = typeof crypto !== "undefined" && crypto.randomUUID && crypto.randomUUID.bind(crypto);
+const native = { randomUUID };
+function _v4(options, buf, offset) {
+  options = options || {};
+  const rnds = options.random ?? options.rng?.() ?? rng();
+  if (rnds.length < 16) {
+    throw new Error("Random bytes length must be >= 16");
+  }
+  rnds[6] = rnds[6] & 15 | 64;
+  rnds[8] = rnds[8] & 63 | 128;
+  return unsafeStringify(rnds);
+}
+function v4(options, buf, offset) {
+  if (native.randomUUID && true && !options) {
+    return native.randomUUID();
+  }
+  return _v4(options);
+}
+const useSetup = () => {
+  const getComponents = React.useCallback(
+    (resolveSections) => {
+      const components = {};
+      if (!resolveSections) {
+        throw new Error("[@creopse/react] resolveSections is required");
+      }
+      const files = resolveSections();
+      for (const [key, value] of Object.entries(files)) {
+        const componentName = key.replace(/^\.\/(.*)\.\w+$/, "$1");
+        const parts = componentName.split("/");
+        const name = parts[parts.length - 1]?.split(".")[0];
+        components[name] = value.default;
+      }
+      return components;
+    },
+    []
+  );
+  const getSectionsInOrder = React.useCallback(
+    (props) => {
+      const sections = props.pageData?.sections;
+      const sectionsOrder = props.pageData?.sectionsOrder;
+      const sectionsOrdered = [];
+      if (Array.isArray(sections) && Array.isArray(sectionsOrder)) {
+        for (const section of sectionsOrder) {
+          if (section) {
+            const item = sections.find(
+              (value) => `${value.slug}__${value.pivot?.linkId}` === section
+            );
+            if (item) {
+              sectionsOrdered.push(item);
+            }
+          }
+        }
+      }
+      return sectionsOrdered.length ? sectionsOrdered : sections || [];
+    },
+    []
+  );
+  const getFinalPageSections = React.useCallback(
+    (props) => {
+      const sections = getSectionsInOrder(props);
+      const sectionsDisabled = props.pageData?.sectionsDisabled;
+      return sections.filter((section) => {
+        return !sectionsDisabled?.includes(
+          `${section.slug}__${section.pivot?.linkId}`
+        );
+      });
+    },
+    [getSectionsInOrder]
+  );
+  return {
+    getComponents,
+    getSectionsInOrder,
+    getFinalPageSections
+  };
+};
+const RootContainer = () => {
+  const { page } = content.useContent();
+  const props = content.useProps();
+  const manager = React.useContext(content.PropsContext);
+  const resolveSections = React.useContext(content.ResolveSectionsContext);
+  const { getComponents, getFinalPageSections } = useSetup();
+  const [sections, setSections] = React.useState(
+    () => getFinalPageSections(props)
+  );
+  const [components] = React.useState(() => getComponents(resolveSections));
+  const [sectionsWrapperKey, setSectionsWrapperKey] = React.useState(v4());
+  const [sectionKeys, setSectionKeys] = React.useState({});
+  const sectionsStateRef = React.useRef({});
+  const pagePropsCopyRef = React.useRef(content.cloneDeep(props));
+  React.useEffect(() => {
+    const keys = {};
+    sections.forEach((section) => {
+      keys[`${section.slug}__${section.pivot?.linkId}-key`] = v4();
+    });
+    setSectionKeys(keys);
+  }, [sections]);
   React.useEffect(() => {
-    const timeout = setTimeout(() => {
-      const sectionData = page.props?.sectionData;
+    const timer = setTimeout(() => {
+      const sectionData = page.props.sectionData;
       if (sectionData && sections.find(
         (section) => section.slug === sectionData.slug && section.pivot?.linkId === sectionData.pivot?.linkId
       )) {
-        index.slideToId(`${sectionData.slug}__${sectionData.pivot?.linkId}-container`);
+        content.slideToId(`${sectionData.slug}__${sectionData.pivot?.linkId}-container`);
       }
     }, 1e3);
-    return () => clearTimeout(timeout);
-  }, [page, sections]);
-  const sectionsStateRef = React.useRef({});
-  const sectionsRef = React.useRef(sections);
+    return () => clearTimeout(timer);
+  }, [page.props.sectionData, sections]);
   React.useEffect(() => {
     const deselectAllSections = () => {
       Object.keys(sectionsStateRef.current).forEach((key) => {
@@ -8118,16 +8225,16 @@ const RootContainer = ({
     };
     const handleMessage = (event) => {
       switch (event.data?.type) {
-        case index.EditorMessageType.RELOAD:
+        case content.EditorMessageType.RELOAD:
           sessionStorage.setItem("shouldNotifyReload", "1");
           sessionStorage.setItem("replyOrigin", event.origin);
           window.location.reload();
           break;
-        case index.EditorMessageType.ENABLE_EDITION_MODE: {
+        case content.EditorMessageType.ENABLE_EDITION_MODE: {
           const primaryColor = event.data?.primaryColor ?? "blue";
           sessionStorage.setItem("replyOrigin", event.origin);
           sessionStorage.setItem("primaryColor", primaryColor);
-          sectionsRef.current?.forEach((section) => {
+          sections?.forEach((section) => {
             if (section.slug && section.pivot?.linkId) {
               const sectionElementId = `${section.slug}__${section.pivot?.linkId}-container`;
               const sectionElement = document.getElementById(sectionElementId);
@@ -8145,7 +8252,7 @@ const RootContainer = ({
                   this.style.boxShadow = `0 0 10px ${primaryColor}`;
                   window.parent.postMessage(
                     {
-                      type: index.EditorMessageType.SELECT_PREVIEW_SECTION,
+                      type: content.EditorMessageType.SELECT_PREVIEW_SECTION,
                       slug: section.slug,
                       linkId: section.pivot?.linkId
                     },
@@ -8160,15 +8267,15 @@ const RootContainer = ({
           });
           break;
         }
-        case index.EditorMessageType.DESELECT_ALL_SECTIONS:
+        case content.EditorMessageType.DESELECT_ALL_SECTIONS:
           deselectAllSections();
           break;
-        case index.EditorMessageType.SELECT_SIDEBAR_SECTION: {
+        case content.EditorMessageType.SELECT_SIDEBAR_SECTION: {
           setTimeout(() => {
-            if (sectionsRef.current?.find(
+            if (sections.find(
               (section) => section.slug === event.data?.slug && section.pivot?.linkId === event.data?.linkId
             )) {
-              index.slideToId(`${event.data?.slug}__${event.data?.linkId}-container`);
+              content.slideToId(`${event.data?.slug}__${event.data?.linkId}-container`);
             }
           }, 1e3);
           const elementId = `${event.data?.slug}__${event.data?.linkId}-container`;
@@ -8182,23 +8289,72 @@ const RootContainer = ({
           }
           break;
         }
-        case index.EditorMessageType.SEND_BASE_SECTION_SETTINGS:
-          break;
-        case index.EditorMessageType.SEND_BASE_SECTION_DATA:
-          break;
-        case index.EditorMessageType.SEND_SECTION_SETTINGS:
+        case content.EditorMessageType.SEND_BASE_SECTION_SETTINGS:
+        case content.EditorMessageType.SEND_SECTION_SETTINGS: {
+          const sectionIndex = pagePropsCopyRef.current.pageData?.sections?.findIndex(
+            (section) => section.slug === event.data?.slug && section.pivot?.linkId === event.data?.linkId
+          );
+          if (typeof sectionIndex !== "number" || sectionIndex === -1) {
+            return;
+          }
+          if (pagePropsCopyRef.current.pageData?.sections && pagePropsCopyRef.current.pageData?.sections[sectionIndex].pivot?.settings) {
+            pagePropsCopyRef.current.pageData.sections[sectionIndex].pivot.settings = event.data?.settings;
+            manager?.sync(pagePropsCopyRef.current);
+            setSectionKeys((prev) => ({
+              ...prev,
+              [`${event.data?.slug}__${event.data?.linkId}-key`]: v4()
+            }));
+          }
           break;
-        case index.EditorMessageType.SEND_SECTION_DATA:
+        }
+        case content.EditorMessageType.SEND_BASE_SECTION_DATA:
+        case content.EditorMessageType.SEND_SECTION_DATA: {
+          const sectionIndex = pagePropsCopyRef.current.pageData?.sections?.findIndex(
+            (section) => section.slug === event.data?.slug && section.pivot?.linkId === event.data?.linkId
+          );
+          if (typeof sectionIndex !== "number" || sectionIndex === -1) {
+            return;
+          }
+          if (pagePropsCopyRef.current.pageData?.sections && pagePropsCopyRef.current.pageData?.sections[sectionIndex].pivot?.data) {
+            pagePropsCopyRef.current.pageData.sections[sectionIndex].pivot.data = event.data?.data;
+            manager?.sync(pagePropsCopyRef.current);
+            setSectionKeys((prev) => ({
+              ...prev,
+              [`${event.data?.slug}__${event.data?.linkId}-key`]: v4()
+            }));
+          }
           break;
-        case index.EditorMessageType.SEND_PAGE_SECTIONS:
+        }
+        case content.EditorMessageType.SEND_PAGE_SECTIONS: {
+          if (!pagePropsCopyRef.current.pageData) return;
+          pagePropsCopyRef.current.pageData.sectionsOrder = event.data?.sectionsOrder;
+          pagePropsCopyRef.current.pageData.sectionsDisabled = event.data?.sectionsDisabled;
+          const currentSections = content.cloneDeep(
+            pagePropsCopyRef.current.pageData.sections || []
+          );
+          pagePropsCopyRef.current.pageData.sections = event.data?.sectionsList || [];
+          currentSections.forEach((currentSection) => {
+            const sectionIndex = pagePropsCopyRef.current.pageData?.sections?.findIndex(
+              (newSection) => newSection.slug === currentSection?.slug && newSection.pivot?.linkId === currentSection.pivot?.linkId
+            );
+            if (typeof sectionIndex === "number" && sectionIndex > -1 && pagePropsCopyRef.current.pageData?.sections?.[sectionIndex].pivot) {
+              pagePropsCopyRef.current.pageData.sections[sectionIndex].pivot.data = currentSection.pivot?.data;
+              pagePropsCopyRef.current.pageData.sections[sectionIndex].pivot.settings = currentSection.pivot?.settings;
+            }
+          });
+          manager?.sync(pagePropsCopyRef.current);
+          const newProps = manager?.getState().props;
+          setSections(getFinalPageSections(newProps));
+          setSectionsWrapperKey(v4());
           break;
+        }
       }
     };
     window.addEventListener("message", handleMessage);
     if (sessionStorage.getItem("shouldNotifyReload") === "1") {
       const origin = sessionStorage.getItem("replyOrigin") || "*";
       window.parent.postMessage(
-        { type: index.EditorMessageType.RELOAD_COMPLETE },
+        { type: content.EditorMessageType.RELOAD_COMPLETE },
         origin
       );
       sessionStorage.removeItem("shouldNotifyReload");
@@ -8207,15 +8363,19 @@ const RootContainer = ({
     return () => {
       window.removeEventListener("message", handleMessage);
     };
-  }, []);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: sections.map((section, i) => {
+  }, [sections, manager, getFinalPageSections]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { all: "unset" }, children: sections.map((section) => {
     const Component = components[section.name];
-    if (!Component) return null;
+    const key = sectionKeys[`${section.slug}__${section.pivot?.linkId}-key`];
+    if (!Component) {
+      console.warn(`[@creopse/react] Component not found: ${section.name}`);
+      return null;
+    }
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       "section",
       {
         id: `${section.slug}__${section.pivot?.linkId}-container`,
-        className: "reset-styles",
+        style: { all: "unset" },
         children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           Component,
           {
@@ -8233,9 +8393,9 @@ const RootContainer = ({
           }
         )
       },
-      `section-${i}`
+      key
     );
-  }) });
+  }) }, sectionsWrapperKey);
 };
 function CreopseProvider({ children, options }) {
   if (!options?.initialProps) {
@@ -8258,7 +8418,7 @@ function CreopseProvider({ children, options }) {
       console.warn("[@creopse/react] No router - props won't sync");
     }
   }, [options.router, manager]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(index.RouterContext.Provider, { value: options.router || null, children: /* @__PURE__ */ jsxRuntimeExports.jsx(index.ConfigContext.Provider, { value: options.config, children: /* @__PURE__ */ jsxRuntimeExports.jsx(index.ResolveSectionsContext.Provider, { value: options.resolveSections, children: /* @__PURE__ */ jsxRuntimeExports.jsx(index.PropsContext.Provider, { value: manager, children }) }) }) });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(content.RouterContext.Provider, { value: options.router || null, children: /* @__PURE__ */ jsxRuntimeExports.jsx(content.ConfigContext.Provider, { value: options.config, children: /* @__PURE__ */ jsxRuntimeExports.jsx(content.ResolveSectionsContext.Provider, { value: options.resolveSections, children: /* @__PURE__ */ jsxRuntimeExports.jsx(content.PropsContext.Provider, { value: manager, children }) }) }) });
 }
 exports.AsyncImg = AsyncImg;
 exports.CreopseProvider = CreopseProvider;

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import * as React from "react";
 import React__default, { useState, useEffect, createContext, useRef, useLayoutEffect, useId, useContext, useInsertionEffect, useMemo, useCallback, Children, isValidElement, Fragment, createElement, forwardRef, Component } from "react";
-import { u as useHelper, s as slideToId, E as EditorMessageType, R as RouterContext, C as ConfigContext, a as ResolveSectionsContext, P as PropsContext } from "./index-B7GqfDTJ.js";
+import { u as useHelper, a as useContent, b as useProps, P as PropsContext, R as ResolveSectionsContext, c as cloneDeep, s as slideToId, E as EditorMessageType, d as RouterContext, C as ConfigContext } from "./content-CM9eJ2st.js";
 import "@inertiajs/react";
 import { createPortal } from "react-dom";
 var jsxRuntime = { exports: {} };
@@ -8069,24 +8069,131 @@ const StickyTop = ({
     }
   );
 };
-const RootContainer = ({
-  page,
-  sections = [],
-  components = {}
-}) => {
+const byteToHex = [];
+for (let i = 0; i < 256; ++i) {
+  byteToHex.push((i + 256).toString(16).slice(1));
+}
+function unsafeStringify(arr, offset = 0) {
+  return (byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + "-" + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + "-" + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + "-" + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + "-" + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]]).toLowerCase();
+}
+let getRandomValues;
+const rnds8 = new Uint8Array(16);
+function rng() {
+  if (!getRandomValues) {
+    if (typeof crypto === "undefined" || !crypto.getRandomValues) {
+      throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");
+    }
+    getRandomValues = crypto.getRandomValues.bind(crypto);
+  }
+  return getRandomValues(rnds8);
+}
+const randomUUID = typeof crypto !== "undefined" && crypto.randomUUID && crypto.randomUUID.bind(crypto);
+const native = { randomUUID };
+function _v4(options, buf, offset) {
+  options = options || {};
+  const rnds = options.random ?? options.rng?.() ?? rng();
+  if (rnds.length < 16) {
+    throw new Error("Random bytes length must be >= 16");
+  }
+  rnds[6] = rnds[6] & 15 | 64;
+  rnds[8] = rnds[8] & 63 | 128;
+  return unsafeStringify(rnds);
+}
+function v4(options, buf, offset) {
+  if (native.randomUUID && true && !options) {
+    return native.randomUUID();
+  }
+  return _v4(options);
+}
+const useSetup = () => {
+  const getComponents = useCallback(
+    (resolveSections) => {
+      const components = {};
+      if (!resolveSections) {
+        throw new Error("[@creopse/react] resolveSections is required");
+      }
+      const files = resolveSections();
+      for (const [key, value] of Object.entries(files)) {
+        const componentName = key.replace(/^\.\/(.*)\.\w+$/, "$1");
+        const parts = componentName.split("/");
+        const name = parts[parts.length - 1]?.split(".")[0];
+        components[name] = value.default;
+      }
+      return components;
+    },
+    []
+  );
+  const getSectionsInOrder = useCallback(
+    (props) => {
+      const sections = props.pageData?.sections;
+      const sectionsOrder = props.pageData?.sectionsOrder;
+      const sectionsOrdered = [];
+      if (Array.isArray(sections) && Array.isArray(sectionsOrder)) {
+        for (const section of sectionsOrder) {
+          if (section) {
+            const item = sections.find(
+              (value) => `${value.slug}__${value.pivot?.linkId}` === section
+            );
+            if (item) {
+              sectionsOrdered.push(item);
+            }
+          }
+        }
+      }
+      return sectionsOrdered.length ? sectionsOrdered : sections || [];
+    },
+    []
+  );
+  const getFinalPageSections = useCallback(
+    (props) => {
+      const sections = getSectionsInOrder(props);
+      const sectionsDisabled = props.pageData?.sectionsDisabled;
+      return sections.filter((section) => {
+        return !sectionsDisabled?.includes(
+          `${section.slug}__${section.pivot?.linkId}`
+        );
+      });
+    },
+    [getSectionsInOrder]
+  );
+  return {
+    getComponents,
+    getSectionsInOrder,
+    getFinalPageSections
+  };
+};
+const RootContainer = () => {
+  const { page } = useContent();
+  const props = useProps();
+  const manager = useContext(PropsContext);
+  const resolveSections = useContext(ResolveSectionsContext);
+  const { getComponents, getFinalPageSections } = useSetup();
+  const [sections, setSections] = useState(
+    () => getFinalPageSections(props)
+  );
+  const [components] = useState(() => getComponents(resolveSections));
+  const [sectionsWrapperKey, setSectionsWrapperKey] = useState(v4());
+  const [sectionKeys, setSectionKeys] = useState({});
+  const sectionsStateRef = useRef({});
+  const pagePropsCopyRef = useRef(cloneDeep(props));
+  useEffect(() => {
+    const keys = {};
+    sections.forEach((section) => {
+      keys[`${section.slug}__${section.pivot?.linkId}-key`] = v4();
+    });
+    setSectionKeys(keys);
+  }, [sections]);
   useEffect(() => {
-    const timeout = setTimeout(() => {
-      const sectionData = page.props?.sectionData;
+    const timer = setTimeout(() => {
+      const sectionData = page.props.sectionData;
       if (sectionData && sections.find(
         (section) => section.slug === sectionData.slug && section.pivot?.linkId === sectionData.pivot?.linkId
       )) {
         slideToId(`${sectionData.slug}__${sectionData.pivot?.linkId}-container`);
       }
     }, 1e3);
-    return () => clearTimeout(timeout);
-  }, [page, sections]);
-  const sectionsStateRef = useRef({});
-  const sectionsRef = useRef(sections);
+    return () => clearTimeout(timer);
+  }, [page.props.sectionData, sections]);
   useEffect(() => {
     const deselectAllSections = () => {
       Object.keys(sectionsStateRef.current).forEach((key) => {
@@ -8109,7 +8216,7 @@ const RootContainer = ({
           const primaryColor = event.data?.primaryColor ?? "blue";
           sessionStorage.setItem("replyOrigin", event.origin);
           sessionStorage.setItem("primaryColor", primaryColor);
-          sectionsRef.current?.forEach((section) => {
+          sections?.forEach((section) => {
             if (section.slug && section.pivot?.linkId) {
               const sectionElementId = `${section.slug}__${section.pivot?.linkId}-container`;
               const sectionElement = document.getElementById(sectionElementId);
@@ -8147,7 +8254,7 @@ const RootContainer = ({
           break;
         case EditorMessageType.SELECT_SIDEBAR_SECTION: {
           setTimeout(() => {
-            if (sectionsRef.current?.find(
+            if (sections.find(
               (section) => section.slug === event.data?.slug && section.pivot?.linkId === event.data?.linkId
             )) {
               slideToId(`${event.data?.slug}__${event.data?.linkId}-container`);
@@ -8165,15 +8272,64 @@ const RootContainer = ({
           break;
         }
         case EditorMessageType.SEND_BASE_SECTION_SETTINGS:
+        case EditorMessageType.SEND_SECTION_SETTINGS: {
+          const sectionIndex = pagePropsCopyRef.current.pageData?.sections?.findIndex(
+            (section) => section.slug === event.data?.slug && section.pivot?.linkId === event.data?.linkId
+          );
+          if (typeof sectionIndex !== "number" || sectionIndex === -1) {
+            return;
+          }
+          if (pagePropsCopyRef.current.pageData?.sections && pagePropsCopyRef.current.pageData?.sections[sectionIndex].pivot?.settings) {
+            pagePropsCopyRef.current.pageData.sections[sectionIndex].pivot.settings = event.data?.settings;
+            manager?.sync(pagePropsCopyRef.current);
+            setSectionKeys((prev) => ({
+              ...prev,
+              [`${event.data?.slug}__${event.data?.linkId}-key`]: v4()
+            }));
+          }
           break;
+        }
         case EditorMessageType.SEND_BASE_SECTION_DATA:
+        case EditorMessageType.SEND_SECTION_DATA: {
+          const sectionIndex = pagePropsCopyRef.current.pageData?.sections?.findIndex(
+            (section) => section.slug === event.data?.slug && section.pivot?.linkId === event.data?.linkId
+          );
+          if (typeof sectionIndex !== "number" || sectionIndex === -1) {
+            return;
+          }
+          if (pagePropsCopyRef.current.pageData?.sections && pagePropsCopyRef.current.pageData?.sections[sectionIndex].pivot?.data) {
+            pagePropsCopyRef.current.pageData.sections[sectionIndex].pivot.data = event.data?.data;
+            manager?.sync(pagePropsCopyRef.current);
+            setSectionKeys((prev) => ({
+              ...prev,
+              [`${event.data?.slug}__${event.data?.linkId}-key`]: v4()
+            }));
+          }
           break;
-        case EditorMessageType.SEND_SECTION_SETTINGS:
-          break;
-        case EditorMessageType.SEND_SECTION_DATA:
-          break;
-        case EditorMessageType.SEND_PAGE_SECTIONS:
+        }
+        case EditorMessageType.SEND_PAGE_SECTIONS: {
+          if (!pagePropsCopyRef.current.pageData) return;
+          pagePropsCopyRef.current.pageData.sectionsOrder = event.data?.sectionsOrder;
+          pagePropsCopyRef.current.pageData.sectionsDisabled = event.data?.sectionsDisabled;
+          const currentSections = cloneDeep(
+            pagePropsCopyRef.current.pageData.sections || []
+          );
+          pagePropsCopyRef.current.pageData.sections = event.data?.sectionsList || [];
+          currentSections.forEach((currentSection) => {
+            const sectionIndex = pagePropsCopyRef.current.pageData?.sections?.findIndex(
+              (newSection) => newSection.slug === currentSection?.slug && newSection.pivot?.linkId === currentSection.pivot?.linkId
+            );
+            if (typeof sectionIndex === "number" && sectionIndex > -1 && pagePropsCopyRef.current.pageData?.sections?.[sectionIndex].pivot) {
+              pagePropsCopyRef.current.pageData.sections[sectionIndex].pivot.data = currentSection.pivot?.data;
+              pagePropsCopyRef.current.pageData.sections[sectionIndex].pivot.settings = currentSection.pivot?.settings;
+            }
+          });
+          manager?.sync(pagePropsCopyRef.current);
+          const newProps = manager?.getState().props;
+          setSections(getFinalPageSections(newProps));
+          setSectionsWrapperKey(v4());
           break;
+        }
       }
     };
     window.addEventListener("message", handleMessage);
@@ -8189,15 +8345,19 @@ const RootContainer = ({
     return () => {
       window.removeEventListener("message", handleMessage);
     };
-  }, []);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: sections.map((section, i) => {
+  }, [sections, manager, getFinalPageSections]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { all: "unset" }, children: sections.map((section) => {
     const Component2 = components[section.name];
-    if (!Component2) return null;
+    const key = sectionKeys[`${section.slug}__${section.pivot?.linkId}-key`];
+    if (!Component2) {
+      console.warn(`[@creopse/react] Component not found: ${section.name}`);
+      return null;
+    }
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       "section",
       {
         id: `${section.slug}__${section.pivot?.linkId}-container`,
-        className: "reset-styles",
+        style: { all: "unset" },
         children: /* @__PURE__ */ jsxRuntimeExports.jsx(
           Component2,
           {
@@ -8215,9 +8375,9 @@ const RootContainer = ({
           }
         )
       },
-      `section-${i}`
+      key
     );
-  }) });
+  }) }, sectionsWrapperKey);
 };
 function CreopseProvider({ children, options }) {
   if (!options?.initialProps) {