fix: state/history bugs

packages/visual-editor/src/components/pageSections/HeroSection.tsx

@@ -546,18 +546,6 @@ export const HeroSection: ComponentConfig<{ props: HeroSectionProps }> = {
           "mx-auto max-w-full md:max-w-[350px] lg:max-w-[calc(min(calc(100vw-1.5rem),var(--maxWidth-pageSection-contentWidth))-350px)] rounded-image-borderRadius"
         );
         break;
-      case "spotlight":
-        data = setDeep(
-          data,
-          "props.slots.GeomodifierSlot[0].props.styles.align",
-          "center"
-        );
-        data = setDeep(
-          data,
-          "props.slots.BusinessNameSlot[0].props.styles.align",
-          "center"
-        );
-        break;
     }
 
     const streamDocument = params.metadata?.streamDocument;

packages/visual-editor/src/components/pageSections/InsightSection/InsightCard.tsx

@@ -319,16 +319,7 @@ const InsightCardComponent: PuckComponent<InsightCardProps> = (props) => {
         },
       },
     });
-  }, [
-    sharedCardProps,
-    styles.backgroundColor,
-    slotStyles,
-    props.puck.isEditing,
-    getPuck,
-    props.id,
-    slotsData,
-    props,
-  ]);
+  }, [sharedCardProps]);
 
   // When the card's shared props or the card's slots' shared props change, update the context
   React.useEffect(() => {

packages/visual-editor/src/internal/components/InternalLayoutEditor.tsx

@@ -32,6 +32,7 @@ import { cn } from "../../utils/cn.ts";
 import { removeDuplicateImageActionBars } from "../utils/removeDuplicateImageActionBars.ts";
 import { useDocument } from "../../hooks/useDocument.tsx";
 import { fieldsOverride } from "../puck/components/FieldsOverride.tsx";
+import { isDeepEqual } from "../../utils/deepEqual.ts";
 
 const devLogger = new DevLogger();
 const usePuck = createUsePuck();
@@ -268,10 +269,22 @@ export const InternalLayoutEditor = ({
 
       React.useEffect(() => {
         const resolveData = async () => {
+          devLogger.logFunc("reloadDataOnDocumentChange");
           const { appState, config, dispatch } = getPuck();
+
           const resolvedData = await resolveAllData(appState.data, config, {
             streamDocument,
           });
+
+          devLogger.logData("RESOLVED_LAYOUT_DATA", resolvedData);
+
+          if (isDeepEqual(appState.data, resolvedData)) {
+            devLogger.log(
+              "reloadDataOnDocumentChange - no layout changes detected"
+            );
+            return;
+          }
+
           dispatch({ type: "setData", data: resolvedData });
         };
 
@@ -473,6 +486,30 @@ export const InternalLayoutEditor = ({
                     // oxlint-disable-next-line no-unused-vars
                     const { id: _, parentData: __, ...rest } = item.props;
 
+                    // CardsWrappers need to have their children's ids preserved in the constantValue array
+                    if (item.type.includes("CardsWrapper")) {
+                      if (
+                        "data" in rest &&
+                        "constantValue" in rest.data &&
+                        "slots" in rest &&
+                        "CardSlot" in rest.slots
+                      ) {
+                        const constantValue = rest.data.constantValue;
+                        if (
+                          Array.isArray(constantValue) &&
+                          constantValue.every(
+                            (cv: unknown) =>
+                              typeof cv === "object" && cv && "id" in cv
+                          )
+                        ) {
+                          constantValue.forEach((cv, i) => {
+                            cv.id =
+                              rest?.slots?.CardSlot[i]?.props?.id || cv.id;
+                          });
+                        }
+                      }
+                    }
+
                     return {
                       ...item,
                       props: { ...rest, id },
@@ -482,6 +519,7 @@ export const InternalLayoutEditor = ({
                 // preserve the selected component's id and type
                 newData.props.id = selectedComponent.props.id;
 
+                devLogger.logData("PASTED_DATA", newData);
                 dispatch({
                   type: "replace",
                   destinationZone: appState.ui.itemSelector.zone,

packages/visual-editor/src/internal/puck/components/LayoutHeader.tsx

@@ -20,8 +20,10 @@ import {
   pt,
 } from "../../../utils/i18n/platform.ts";
 import { useDocument } from "../../../hooks/useDocument.tsx";
+import { DevLogger } from "../../../utils/devLogger.ts";
 
 const usePuck = createUsePuck();
+const devLogger = new DevLogger();
 
 type LayoutHeaderProps = {
   templateMetadata: TemplateMetadata;
@@ -161,6 +163,7 @@ export const LayoutHeader = (props: LayoutHeaderProps) => {
                   streamDocument
                 );
 
+                devLogger.logData("PASTED_DATA", migratedPastedData);
                 dispatch({
                   type: "setData",
                   data: migratedPastedData,

packages/visual-editor/src/utils/devLogger.ts

@@ -4,6 +4,8 @@ export type DevLoggerPrefix =
   | "LAYOUT_SAVE_STATE"
   | "THEME_SAVE_STATE"
   | "LAYOUT_DATA"
+  | "RESOLVED_LAYOUT_DATA"
+  | "PASTED_DATA"
   | "THEME_DATA"
   | "THEME_HISTORIES"
   | "DOCUMENT"