fix: miscellaneous slot bugs

packages/visual-editor/src/components/atoms/image.tsx

@@ -103,10 +103,15 @@ export type ImgSizesByBreakpoint = {
 /**
  * Creates an img sizes attribute based on the default Tailwind breakpoints.
  * Replaces `maxWidth` with the current page section max width from the theme.
+ * Replaces `width` with the width parameter.
  * @param sizes - the width of the image at different breakpoints
+ * @param width - the current width prop of the image
  * @returns a string for the sizes attribute of an img tag
  */
-export const imgSizesHelper = (sizes: ImgSizesByBreakpoint): string => {
+export const imgSizesHelper = (
+  sizes: ImgSizesByBreakpoint,
+  width?: string
+): string => {
   const streamDocument = useDocument();
 
   let maxWidth = undefined;
@@ -145,7 +150,9 @@ export const imgSizesHelper = (sizes: ImgSizesByBreakpoint): string => {
   const updatedBreakpointSizes = Object.fromEntries(
     Object.entries(sizes).map(([key, value]) => [
       key,
-      value.replace("maxWidth", maxWidth || "1440px"),
+      value
+        .replace("maxWidth", maxWidth || "1440px")
+        .replace("width", width || 640 + "px"),
     ])
   );
 

packages/visual-editor/src/components/contentBlocks/image/Image.tsx

@@ -79,9 +79,9 @@ const ImageWrapperComponent: PuckComponent<ImageWrapperProps> = (props) => {
     className,
     puck,
     sizes = {
-      base: styles.width ? `min(100vw, ${styles.width}px)` : "100vw",
+      base: styles.width ? `min(100vw, width)` : "100vw",
       md: styles.width
-        ? `min(${styles.width}px, calc((maxWidth - 32px) / 2))`
+        ? `min(width, calc((maxWidth - 32px) / 2))`
         : "maxWidth / 2",
     },
     hideWidthProp,
@@ -96,7 +96,7 @@ const ImageWrapperComponent: PuckComponent<ImageWrapperProps> = (props) => {
     return puck.isEditing ? <div className="h-[200px] w-full" /> : <></>;
   }
 
-  const transformedSizes = imgSizesHelper(sizes);
+  const transformedSizes = imgSizesHelper(sizes, `${styles.width}px`);
 
   return (
     <EntityField

packages/visual-editor/src/components/migrations/0027_promo_section_slots.ts

@@ -151,6 +151,11 @@ export const promoSectionSlots: Migration = {
                                 },
                         }
                       : undefined,
+                    sizes: {
+                      base: "calc(100vw - 32px)",
+                      md: "min(width, 450px)",
+                      lg: "width",
+                    },
                   } satisfies ImageWrapperProps,
                 },
               ],
@@ -182,6 +187,7 @@ export const promoSectionSlots: Migration = {
                       },
                     }
                   : undefined,
+                eventName: "cta",
               } satisfies CTAWrapperProps,
             },
           ],

packages/visual-editor/src/components/migrations/0028_slotify_hero_section.ts

@@ -140,6 +140,7 @@ export const heroSectionSlots: Migration = {
                       constantValueOverride.primaryCta ?? false,
                   },
                 },
+                eventName: "primaryCta",
                 styles: { variant: primaryCTA },
               },
             },
@@ -164,6 +165,7 @@ export const heroSectionSlots: Migration = {
                       constantValueOverride.secondaryCta ?? false,
                   },
                 },
+                eventName: "secondaryCta",
                 styles: { variant: secondaryCTA },
               },
             },

packages/visual-editor/src/components/pageSections/EventSection/EventCard.tsx

@@ -42,6 +42,7 @@ export const defaultEventCardSlotData = (id?: string, index?: number) => ({
         {
           type: "ImageSlot",
           props: {
+            ...(id && { id: `${id}-image` }),
             data: {
               image: {
                 field: "",
@@ -65,6 +66,7 @@ export const defaultEventCardSlotData = (id?: string, index?: number) => ({
         {
           type: "HeadingTextSlot",
           props: {
+            ...(id && { id: `${id}-title` }),
             data: {
               text: {
                 field: "",
@@ -86,6 +88,7 @@ export const defaultEventCardSlotData = (id?: string, index?: number) => ({
         {
           type: "Timestamp",
           props: {
+            ...(id && { id: `${id}-timestamp` }),
             data: {
               date: {
                 field: "",
@@ -109,6 +112,7 @@ export const defaultEventCardSlotData = (id?: string, index?: number) => ({
         {
           type: "BodyTextSlot",
           props: {
+            ...(id && { id: `${id}-description` }),
             data: {
               text: {
                 field: "",
@@ -134,6 +138,7 @@ export const defaultEventCardSlotData = (id?: string, index?: number) => ({
         {
           type: "CTASlot",
           props: {
+            ...(id && { id: `${id}-cta` }),
             data: {
               entityField: {
                 field: "",

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

@@ -442,6 +442,7 @@ export const HeroSection: ComponentConfig<{ props: HeroSectionProps }> = {
                 },
               },
             },
+            eventName: "primaryCta",
             styles: {
               variant: "primary",
             },
@@ -469,6 +470,7 @@ export const HeroSection: ComponentConfig<{ props: HeroSectionProps }> = {
             styles: {
               variant: "secondary",
             },
+            eventName: "secondaryCta",
           } satisfies CTAWrapperProps,
         },
       ],

packages/visual-editor/src/components/pageSections/ProductSection/ProductCard.tsx

@@ -39,6 +39,7 @@ export const defaultProductCardSlotData = (id?: string, index?: number) => {
           {
             type: "ImageSlot",
             props: {
+              ...(id && { id: `${id}-image` }),
               data: {
                 image: {
                   field: "",
@@ -61,6 +62,7 @@ export const defaultProductCardSlotData = (id?: string, index?: number) => {
           {
             type: "HeadingTextSlot",
             props: {
+              ...(id && { id: `${id}-title` }),
               data: {
                 text: {
                   field: "",
@@ -82,6 +84,7 @@ export const defaultProductCardSlotData = (id?: string, index?: number) => {
           {
             type: "BodyTextSlot",
             props: {
+              ...(id && { id: `${id}-category` }),
               data: {
                 text: {
                   field: "",
@@ -102,6 +105,7 @@ export const defaultProductCardSlotData = (id?: string, index?: number) => {
           {
             type: "BodyTextSlot",
             props: {
+              ...(id && { id: `${id}-description` }),
               data: {
                 text: {
                   field: "",
@@ -124,6 +128,7 @@ export const defaultProductCardSlotData = (id?: string, index?: number) => {
           {
             type: "CTASlot",
             props: {
+              ...(id && { id: `${id}-cta` }),
               data: {
                 entityField: {
                   field: "",

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

@@ -6,6 +6,7 @@ import {
   PuckComponent,
   setDeep,
   Slot,
+  SlotComponent,
 } from "@measured/puck";
 import {
   PromoSectionType,
@@ -187,8 +188,8 @@ const PromoMedia = ({
   className: string;
   data: PromoData;
   slots: {
-    VideoSlot: React.ElementType;
-    ImageSlot: React.ElementType;
+    VideoSlot: SlotComponent;
+    ImageSlot: SlotComponent;
   };
 }) => {
   const { t } = useTranslation();
@@ -334,6 +335,11 @@ export const PromoSection: ComponentConfig<{ props: PromoSectionProps }> = {
               aspectRatio: 1.78,
               width: 640,
             },
+            sizes: {
+              base: "calc(100vw - 32px)",
+              md: "min(width, 450px)",
+              lg: "width",
+            },
             className:
               "max-w-full sm:max-w-initial md:max-w-[450px] lg:max-w-none rounded-image-borderRadius w-full",
           } satisfies ImageWrapperProps,
@@ -355,6 +361,7 @@ export const PromoSection: ComponentConfig<{ props: PromoSectionProps }> = {
               },
             },
             styles: { variant: "primary" },
+            eventName: "cta",
           } satisfies CTAWrapperProps,
         },
       ],

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

@@ -1,5 +1,11 @@
 import React from "react";
-import { createUsePuck, Data, useGetPuck, type History } from "@measured/puck";
+import {
+  createUsePuck,
+  Data,
+  resolveAllData,
+  useGetPuck,
+  type History,
+} from "@measured/puck";
 import { RotateCcw, RotateCw } from "lucide-react";
 import { useEffect } from "react";
 import { Separator } from "@radix-ui/react-separator";
@@ -19,6 +25,7 @@ import {
   usePlatformTranslation,
   pt,
 } from "../../../utils/i18n/platform.ts";
+import { useDocument } from "../../../hooks/useDocument.tsx";
 
 const usePuck = createUsePuck();
 
@@ -51,6 +58,7 @@ export const LayoutHeader = (props: LayoutHeaderProps) => {
     React.useState<boolean>(false);
   const { i18n } = usePlatformTranslation();
   const getPuck = useGetPuck();
+  const streamDocument = useDocument();
   const histories = usePuck((s) => s.history.histories);
   const index = usePuck((s) => s.history.index);
   const hasFuture = usePuck((s) => s.history.hasFuture);
@@ -62,6 +70,19 @@ export const LayoutHeader = (props: LayoutHeaderProps) => {
 
   useEffect(translatePuckSidebars, [i18n.language]);
 
+  useEffect(() => {
+    // Resolve all data and slots when the document changes
+    const resolveData = async () => {
+      const { appState, config, dispatch } = getPuck();
+      const resolvedData = await resolveAllData(appState.data, config, {
+        streamDocument,
+      });
+      dispatch({ type: "setData", data: resolvedData });
+    };
+
+    resolveData();
+  }, [streamDocument.id]);
+
   const buttonText = (() => {
     if (templateMetadata.assignment === "ALL") {
       // TODO: translation concatenation