dune-react 0.0.22 → 0.0.24

package/dist/components/puck-block/hero-sections/inline-image-hero/inline-image-hero.js

@@ -3,51 +3,82 @@ import { CompoundButton } from "../../../puck-base/button.js";
 import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
 import { cn } from "../../../../utils/css-utils.js";
 const InlineImageHero = (props) => {
-  const { headers = [], description, buttons = [], styles: rawStyles } = {
+  const {
+    headers = [],
+    description,
+    buttons = [],
+    styles: rawStyles
+  } = {
     ...InlineImageHeroDefaults,
     ...props
   };
-  const { className: sectionClassName, style: sectionStyle, css, textAlign } = rawStyles ?? {};
+  const {
+    className: sectionClassName,
+    style: sectionStyle,
+    css,
+    textAlign
+  } = rawStyles ?? {};
   const isCenter = textAlign === "center";
-  return /* @__PURE__ */ jsx(SectionWrapper, { className: cn("relative px-[5%] py-8 md:py-12 lg:py-14", sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsxs(
-    "div",
+  return /* @__PURE__ */ jsx(
+    SectionWrapper,
     {
-      className: `container max-w-xl overflow-hidden${isCenter ? " text-center" : ""}`,
-      children: [
-        /* @__PURE__ */ jsx("h1", { className: "mb-5 text-3xl font-bold leading-[1.2] sm:text-6xl md:mb-6 md:text-9xl lg:text-[5rem]", children: headers.map((header, index) => /* @__PURE__ */ jsx("span", { children: header.bgUrl ? /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: "bg-contain bg-no-repeat pr-16 [background-position-x:100%] [background-position-y:center] sm:pr-[5.75rem] md:pr-[7.5rem] lg:pr-[11.5rem]",
-            style: {
-              backgroundImage: `url('${header.bgUrl}')`
-            },
-            children: header.heading
-          }
-        ) : " " + header.heading + " " }, index)) }),
-        /* @__PURE__ */ jsx("p", { className: "md:text-md", children: description }),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: `mt-6 flex${isCenter ? " items-center justify-center" : ""} gap-x-4 md:mt-8`,
-            children: buttons.map((button, index) => /* @__PURE__ */ jsx(CompoundButton, { label: button.label, variant: button.variant, size: button.size, action: button.action, icon: button.icon }, index))
-          }
-        )
-      ]
+      className: cn(
+        "relative px-[5%] py-8 md:py-12 lg:py-14",
+        sectionClassName
+      ),
+      style: sectionStyle,
+      css,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: `container max-w-xl overflow-hidden${isCenter ? " text-center" : ""}`,
+          children: [
+            /* @__PURE__ */ jsx("h1", { className: "mb-5 text-3xl font-bold leading-[1.2] sm:text-6xl md:mb-6 md:text-9xl lg:text-[5rem]", children: headers.map((header, index) => /* @__PURE__ */ jsx("span", { children: header.bgUrl ? /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "bg-no-repeat pr-16 [background-position-x:100%] [background-position-y:center] [background-size:auto_80%] sm:pr-[5.75rem] md:pr-[7.5rem] lg:pr-[11.5rem]",
+                style: {
+                  backgroundImage: `url('${header.bgUrl}')`
+                },
+                children: header.heading
+              }
+            ) : " " + header.heading + " " }, index)) }),
+            /* @__PURE__ */ jsx("p", { className: "md:text-md", children: description }),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: `mt-6 flex${isCenter ? " items-center justify-center" : ""} gap-x-4 md:mt-8`,
+                children: buttons.map((button, index) => /* @__PURE__ */ jsx(
+                  CompoundButton,
+                  {
+                    label: button.label,
+                    variant: button.variant,
+                    size: button.size,
+                    action: button.action,
+                    icon: button.icon
+                  },
+                  index
+                ))
+              }
+            )
+          ]
+        }
+      )
     }
-  ) });
+  );
 };
 const InlineImageHeroDefaults = {
   headers: [
     {
       heading: "Long",
-      bgUrl: "https://picsum.photos/seed/hero-landscape/1200/800"
+      bgUrl: "https://file.springbrand.ai/web_assets/template-logo.svg"
     },
     {
       heading: "heading is what you see here in this"
     },
     {
       heading: "header",
-      bgUrl: "https://picsum.photos/seed/hero-landscape/1200/800"
+      bgUrl: "https://file.springbrand.ai/web_assets/template-logo.svg"
     },
     {
       heading: "section"

package/dist/components/puck-block/hero-sections/mouse-track-hero/component.js

@@ -7,6 +7,7 @@ import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
 import { cn } from "../../../../utils/css-utils.js";
 import { motion, useMotionValue, useSpring, useTransform } from "framer-motion";
 import { useCallback } from "react";
+import { useEditorContext } from "../../../puck-core/core/context/editor-context.js";
 const imagePositions = {
   group1: [
     "bottom-[5%] left-[-8%] z-10 max-w-[18%] sm:bottom-[10%] lg:bottom-auto",
@@ -46,14 +47,27 @@ const getTransformStyles = (smoothMouseX, smoothMouseY, xRange, yRange) => {
   };
 };
 const MouseTrackHero = (props) => {
-  const { heading, description, buttons = [], group1Images = [], group2Images = [], styles } = {
+  const {
+    heading,
+    description,
+    buttons = [],
+    group1Images = [],
+    group2Images = [],
+    styles
+  } = {
     ...MouseTrackHeroDefaults,
     ...props
   };
-  const { className: sectionClassName, style: sectionStyle, css } = styles ?? {};
+  const {
+    className: sectionClassName,
+    style: sectionStyle,
+    css
+  } = styles ?? {};
+  const { isEditor } = useEditorContext();
   const { smoothMouseX, smoothMouseY, handleMouseMove } = useMouseMove();
   const isMobile = useMediaQuery("(max-width: 991px)");
-  const Animate = isMobile ? "div" : motion.div;
+  const disableMotion = isMobile || isEditor;
+  const Animate = disableMotion ? "div" : motion.div;
   const canvasTransform = getTransformStyles(
     smoothMouseX,
     smoothMouseY,
@@ -77,26 +91,53 @@ const MouseTrackHero = (props) => {
     {
       className: "absolute inset-0 flex origin-bottom items-center justify-center",
       style: transformStyles,
-      children: images.map((image, index) => /* @__PURE__ */ jsx("div", { className: `absolute w-full ${positions[index]}`, children: /* @__PURE__ */ jsx(CompoundImage, { src: image.src, alt: image.alt, className: "size-full" }) }, index))
+      children: images.map((image, index) => /* @__PURE__ */ jsx("div", { className: `absolute w-full ${positions[index]}`, children: /* @__PURE__ */ jsx(
+        CompoundImage,
+        {
+          src: image.src,
+          alt: image.alt,
+          className: "size-full"
+        }
+      ) }, index))
     }
   );
   return /* @__PURE__ */ jsxs(
     SectionWrapper,
     {
-      className: cn("relative flex h-svh items-center justify-center overflow-hidden lg:h-screen", sectionClassName),
+      className: cn(
+        "relative flex h-svh items-center justify-center overflow-hidden lg:h-screen",
+        sectionClassName
+      ),
       style: sectionStyle,
       css,
-      onMouseMove: handleMouseMove,
+      onMouseMove: isEditor ? void 0 : handleMouseMove,
       children: [
         /* @__PURE__ */ jsx("div", { className: "px-[5%] py-8 md:py-12 lg:py-14", children: /* @__PURE__ */ jsx("div", { className: "container max-w-lg", children: /* @__PURE__ */ jsxs("div", { className: "relative z-10 text-center", children: [
           /* @__PURE__ */ jsx("h1", { className: "mb-5 text-6xl font-bold md:mb-6 md:text-9xl lg:text-10xl", children: heading }),
           /* @__PURE__ */ jsx("p", { className: "md:text-md", children: description }),
-          /* @__PURE__ */ jsx("div", { className: "mt-6 flex items-center justify-center gap-4 md:mt-8", children: buttons.map((button, index) => /* @__PURE__ */ jsx(CompoundButton, { label: button.label, variant: button.variant, size: button.size, action: button.action, icon: button.icon }, index)) })
+          /* @__PURE__ */ jsx("div", { className: "mt-6 flex items-center justify-center gap-4 md:mt-8", children: buttons.map((button, index) => /* @__PURE__ */ jsx(
+            CompoundButton,
+            {
+              label: button.label,
+              variant: button.variant,
+              size: button.size,
+              action: button.action,
+              icon: button.icon
+            },
+            index
+          )) })
         ] }) }) }),
-        /* @__PURE__ */ jsxs(Animate, { className: "absolute size-full", style: canvasTransform, children: [
-          renderImages(group1Images, imagePositions.group1, group1Transform),
-          renderImages(group2Images, imagePositions.group2, group2Transform)
-        ] })
+        /* @__PURE__ */ jsxs(
+          Animate,
+          {
+            className: "absolute size-full",
+            style: canvasTransform,
+            children: [
+              renderImages(group1Images, imagePositions.group1, group1Transform),
+              renderImages(group2Images, imagePositions.group2, group2Transform)
+            ]
+          }
+        )
       ]
     }
   );
@@ -108,37 +149,37 @@ const MouseTrackHeroDefaults = {
   group1Images: [
     {
       src: "https://picsum.photos/seed/hero-square/1200/1200",
-      alt: "Relume placeholder image 1"
+      alt: "Placeholder image 1"
     },
     {
       src: "https://picsum.photos/seed/hero-square/1200/1200",
-      alt: "Relume placeholder image 2"
+      alt: "Placeholder image 2"
     },
     {
       src: "https://picsum.photos/seed/hero-square/1200/1200",
-      alt: "Relume placeholder image 3"
+      alt: "Placeholder image 3"
     },
     {
       src: "https://picsum.photos/seed/hero-square/1200/1200",
-      alt: "Relume placeholder image 4"
+      alt: "Placeholder image 4"
     }
   ],
   group2Images: [
     {
       src: "https://picsum.photos/seed/hero-landscape/1200/800",
-      alt: "Relume placeholder image 5"
+      alt: "Placeholder image 5"
     },
     {
       src: "https://picsum.photos/seed/hero-square/1200/1200",
-      alt: "Relume placeholder image 6"
+      alt: "Placeholder image 6"
     },
     {
       src: "https://picsum.photos/seed/hero-landscape/1200/800",
-      alt: "Relume placeholder image 7"
+      alt: "Placeholder image 7"
     },
     {
       src: "https://picsum.photos/seed/hero-landscape/1200/800",
-      alt: "Relume placeholder image 8"
+      alt: "Placeholder image 8"
     }
   ]
 };

package/dist/components/puck-block/hero-sections/multi-image-grid-hero/index.d.ts

@@ -143,8 +143,24 @@ declare const conf: {
                     }[];
                 };
                 imageGridRatio: {
-                    readonly type: "text";
+                    readonly type: "select";
                     readonly label: "Image Grid Ratio";
+                    readonly options: readonly [{
+                        readonly label: "3:1 (宽主图 + 窄侧图)";
+                        readonly value: "1fr_0.33fr";
+                    }, {
+                        readonly label: "1:1 (等宽)";
+                        readonly value: "1fr_1fr";
+                    }, {
+                        readonly label: "2:1";
+                        readonly value: "2fr_1fr";
+                    }, {
+                        readonly label: "1:2";
+                        readonly value: "1fr_2fr";
+                    }, {
+                        readonly label: "3:2";
+                        readonly value: "3fr_2fr";
+                    }];
                 };
             };
         };

package/dist/components/puck-block/hero-sections/multi-image-grid-hero/multi-image-grid-hero.js

@@ -68,11 +68,11 @@ const MultiImageGridHeroDefaults = {
   images: [
     {
       src: "https://picsum.photos/seed/hero-landscape/1200/800",
-      alt: "Relume placeholder image 1"
+      alt: "Placeholder image 1"
     },
     {
       src: "https://picsum.photos/seed/hero-square/1200/1200",
-      alt: "Relume placeholder image 2"
+      alt: "Placeholder image 2"
     }
   ],
   styles: {

package/dist/components/puck-block/hero-sections/overlapping-image-hero/overlapping-image-hero.js

@@ -199,15 +199,15 @@ const OverlappingImageHeroDefaults = {
   buttons: [{ label: "Button" }, { label: "Button", variant: "secondary" }],
   firstImage: {
     src: "https://picsum.photos/seed/hero-square/1200/1200",
-    alt: "Relume placeholder image 1"
+    alt: "Placeholder image 1"
   },
   secondImage: {
     src: "https://picsum.photos/seed/hero-portrait/800/1200",
-    alt: "Relume placeholder image 2"
+    alt: "Placeholder image 2"
   },
   thirdImage: {
     src: "https://picsum.photos/seed/hero-dim/1200/800",
-    alt: "Relume placeholder image 3"
+    alt: "Placeholder image 3"
   },
   styles: {
     textPosition: "left",

package/dist/components/puck-block/hero-sections/parallax-images-hero/component.js

@@ -6,6 +6,7 @@ import { CompoundImage } from "../../../puck-base/image.js";
 import { useRef } from "react";
 import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
 import { useScrollContainer } from "../../../../hooks/use-scroll-container.js";
+import { useEditorContext } from "../../../puck-core/core/context/editor-context.js";
 import { cn } from "../../../../utils/css-utils.js";
 const ParallaxImagesHero = (props) => {
   const { heading, description, buttons = [], images = [], styles } = {
@@ -13,6 +14,7 @@ const ParallaxImagesHero = (props) => {
     ...props
   };
   const { className: sectionClassName, style: sectionStyle, css } = styles ?? {};
+  const { isEditor } = useEditorContext();
   const transformRef = useRef(null);
   const [scrollContainerRef] = useScrollContainer(transformRef);
   const { scrollYProgress } = useScroll({
@@ -24,6 +26,16 @@ const ParallaxImagesHero = (props) => {
   });
   const yFirst = useTransform(animatedScrollYProgress, [0, 1], ["0vh", "-87.5vh"]);
   const ySecond = useTransform(animatedScrollYProgress, [0, 1], ["0vh", "-39.6vh"]);
+  if (isEditor) {
+    return /* @__PURE__ */ jsx(SectionWrapper, { ref: transformRef, className: cn("relative px-[5%]", sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsxs("div", { className: "relative overflow-hidden", children: [
+      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 gap-4 py-8", children: images.slice(0, 6).map((image, index) => /* @__PURE__ */ jsx("div", { className: "relative aspect-square", children: /* @__PURE__ */ jsx(CompoundImage, { src: image.src, className: "absolute inset-0 size-full object-cover", alt: image.alt }) }, index)) }),
+      /* @__PURE__ */ jsx("div", { className: "container relative flex max-w-lg items-center py-16 text-center", children: /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("h1", { className: "mb-5 text-6xl font-bold md:mb-6 md:text-9xl lg:text-10xl", children: heading }),
+        /* @__PURE__ */ jsx("p", { className: "relative z-20 md:text-md", children: description }),
+        /* @__PURE__ */ jsx("div", { className: "relative z-20 mt-6 flex items-center justify-center gap-x-4 md:mt-8", children: buttons.map((button, index) => /* @__PURE__ */ jsx(CompoundButton, { label: button.label, variant: button.variant, size: button.size, action: button.action, icon: button.icon }, index)) })
+      ] }) })
+    ] }) });
+  }
   return /* @__PURE__ */ jsx(SectionWrapper, { ref: transformRef, className: cn("relative h-[150vh] px-[5%] md:h-[300vh]", sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsxs("div", { className: "sticky top-0 h-screen overflow-hidden", children: [
     /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 left-0 right-auto top-0 z-10", children: /* @__PURE__ */ jsx(motion.div, { className: "flex flex-col gap-[26vw] pt-[70vh]", style: { y: yFirst }, children: images.slice(0, 4).map((image, index) => /* @__PURE__ */ jsx(
       "div",
@@ -93,27 +105,27 @@ const ParallaxImagesHeroDefaults = {
   images: [
     {
       src: "https://picsum.photos/seed/hero-square/1200/1200",
-      alt: "Relume placeholder image 1"
+      alt: "Placeholder image 1"
     },
     {
       src: "https://picsum.photos/seed/hero-square/1200/1200",
-      alt: "Relume placeholder image 2"
+      alt: "Placeholder image 2"
     },
     {
       src: "https://picsum.photos/seed/hero-square/1200/1200",
-      alt: "Relume placeholder image 3"
+      alt: "Placeholder image 3"
     },
     {
       src: "https://picsum.photos/seed/hero-square/1200/1200",
-      alt: "Relume placeholder image 4"
+      alt: "Placeholder image 4"
     },
     {
       src: "https://picsum.photos/seed/hero-square/1200/1200",
-      alt: "Relume placeholder image 5"
+      alt: "Placeholder image 5"
     },
     {
       src: "https://picsum.photos/seed/hero-square/1200/1200",
-      alt: "Relume placeholder image 6"
+      alt: "Placeholder image 6"
     }
   ]
 };

package/dist/components/puck-block/hero-sections/props.d.ts

@@ -157,8 +157,24 @@ export declare const heroStyleFields: {
         }];
     };
     readonly imageGridRatio: {
-        readonly type: "text";
+        readonly type: "select";
         readonly label: "Image Grid Ratio";
+        readonly options: readonly [{
+            readonly label: "3:1 (宽主图 + 窄侧图)";
+            readonly value: "1fr_0.33fr";
+        }, {
+            readonly label: "1:1 (等宽)";
+            readonly value: "1fr_1fr";
+        }, {
+            readonly label: "2:1";
+            readonly value: "2fr_1fr";
+        }, {
+            readonly label: "1:2";
+            readonly value: "1fr_2fr";
+        }, {
+            readonly label: "3:2";
+            readonly value: "3fr_2fr";
+        }];
     };
     readonly overlapStyle: {
         readonly type: "radio";
@@ -197,8 +213,24 @@ export declare const heroStyleFields: {
         }];
     };
     readonly gridRatio: {
-        readonly type: "text";
+        readonly type: "select";
         readonly label: "Grid Ratio";
+        readonly options: readonly [{
+            readonly label: "25% / 50% / 25%";
+            readonly value: "25%_50%_25%";
+        }, {
+            readonly label: "32% / 36% / 32%";
+            readonly value: "32%_36%_32%";
+        }, {
+            readonly label: "33% / 33% / 33%";
+            readonly value: "33%_34%_33%";
+        }, {
+            readonly label: "20% / 60% / 20%";
+            readonly value: "20%_60%_20%";
+        }, {
+            readonly label: "40% / 30% / 30%";
+            readonly value: "40%_30%_30%";
+        }];
     };
 };
 /** 将 HeroSectionBaseProps 与组件特有字段合并，生成最终 Props */

package/dist/components/puck-block/hero-sections/props.js

@@ -35,8 +35,15 @@ const heroStyleFields = {
     ]
   },
   imageGridRatio: {
-    type: "text",
-    label: "Image Grid Ratio"
+    type: "select",
+    label: "Image Grid Ratio",
+    options: [
+      { label: "3:1 (宽主图 + 窄侧图)", value: "1fr_0.33fr" },
+      { label: "1:1 (等宽)", value: "1fr_1fr" },
+      { label: "2:1", value: "2fr_1fr" },
+      { label: "1:2", value: "1fr_2fr" },
+      { label: "3:2", value: "3fr_2fr" }
+    ]
   },
   overlapStyle: {
     type: "radio",
@@ -64,8 +71,15 @@ const heroStyleFields = {
     ]
   },
   gridRatio: {
-    type: "text",
-    label: "Grid Ratio"
+    type: "select",
+    label: "Grid Ratio",
+    options: [
+      { label: "25% / 50% / 25%", value: "25%_50%_25%" },
+      { label: "32% / 36% / 32%", value: "32%_36%_32%" },
+      { label: "33% / 33% / 33%", value: "33%_34%_33%" },
+      { label: "20% / 60% / 20%", value: "20%_60%_20%" },
+      { label: "40% / 30% / 30%", value: "40%_30%_30%" }
+    ]
   }
 };
 export {

package/dist/components/puck-block/hero-sections/scatter-parallax-hero/component.js

@@ -6,6 +6,7 @@ import { CompoundButton } from "../../../puck-base/button.js";
 import { CompoundImage } from "../../../puck-base/image.js";
 import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
 import { useScrollContainer } from "../../../../hooks/use-scroll-container.js";
+import { useEditorContext } from "../../../puck-core/core/context/editor-context.js";
 import { useScroll, useTransform, motion } from "framer-motion";
 const ScatterParallaxHero = (props) => {
   const { heading, description, buttons = [], images = [], styles } = {
@@ -13,6 +14,7 @@ const ScatterParallaxHero = (props) => {
     ...props
   };
   const { className: sectionClassName, style: sectionStyle, css } = styles ?? {};
+  const { isEditor } = useEditorContext();
   const sectionRef = useRef(null);
   const [scrollContainerRef] = useScrollContainer(sectionRef);
   const { scrollYProgress } = useScroll(
@@ -52,12 +54,12 @@ const ScatterParallaxHero = (props) => {
       /* @__PURE__ */ jsx(
         motion.div,
         {
-          style: containerMotion,
+          style: isEditor ? { y: "0%", scale: 1, opacity: 1 } : containerMotion,
           className: "absolute inset-0 z-10 flex origin-bottom items-end justify-center",
           children: images.map((image, index) => /* @__PURE__ */ jsx(
             motion.div,
             {
-              style: imageMotions[index],
+              style: isEditor ? { x: 0, y: 0 } : imageMotions[index],
               className: cn("absolute w-full max-w-[9rem] sm:max-w-[15rem] lg:max-w-xs", {
                 "left-[-25%] top-[65%] sm:top-[45%] md:left-[-20%] lg:left-[-10%] lg:top-[12%] ": index === 0,
                 "bottom-[5%] left-[-8%] md:left-[5%] lg:bottom-[10%]": index === 1,
@@ -82,23 +84,23 @@ const ScatterParallaxHeroDefaults = {
   images: [
     {
       src: "https://picsum.photos/seed/hero-square/1200/1200",
-      alt: "Relume placeholder image 1"
+      alt: "Placeholder image 1"
     },
     {
       src: "https://picsum.photos/seed/hero-square/1200/1200",
-      alt: "Relume placeholder image 2"
+      alt: "Placeholder image 2"
     },
     {
       src: "https://picsum.photos/seed/hero-square/1200/1200",
-      alt: "Relume placeholder image 3"
+      alt: "Placeholder image 3"
     },
     {
       src: "https://picsum.photos/seed/hero-square/1200/1200",
-      alt: "Relume placeholder image 4"
+      alt: "Placeholder image 4"
     },
     {
       src: "https://picsum.photos/seed/hero-square/1200/1200",
-      alt: "Relume placeholder image 5"
+      alt: "Placeholder image 5"
     }
   ]
 };

package/dist/components/puck-block/hero-sections/scroll-expand-video-hero/component.js

@@ -8,6 +8,7 @@ import { useScroll, useSpring, useTransform, motion } from "framer-motion";
 import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
 import { useScrollContainer } from "../../../../hooks/use-scroll-container.js";
 import { cn } from "../../../../utils/css-utils.js";
+import { useEditorContext } from "../../../puck-core/core/context/editor-context.js";
 import { FaCirclePlay } from "../../../../node_modules/.pnpm/react-icons@5.6.0_react@19.2.4/node_modules/react-icons/fa6/index.js";
 import { CgSpinner } from "../../../../node_modules/.pnpm/react-icons@5.6.0_react@19.2.4/node_modules/react-icons/cg/index.js";
 const ScrollExpandVideoHero = (props) => {
@@ -17,6 +18,7 @@ const ScrollExpandVideoHero = (props) => {
   };
   const image = images == null ? void 0 : images[0];
   const { className: sectionClassName, style: sectionStyle, css } = styles ?? {};
+  const { isEditor } = useEditorContext();
   const [isIframeLoaded, setIsIframeLoaded] = useState(false);
   const transformRef = useRef(null);
   const [scrollContainerRef] = useScrollContainer(transformRef);
@@ -37,11 +39,11 @@ const ScrollExpandVideoHero = (props) => {
     SectionWrapper,
     {
       ref: transformRef,
-      className: cn("relative flex h-[300vh] flex-col items-center", sectionClassName),
+      className: cn("relative flex flex-col items-center", isEditor ? "h-auto" : "h-[300vh]", sectionClassName),
       style: sectionStyle,
       css,
       children: [
-        /* @__PURE__ */ jsx("div", { className: "px-[5%]", children: /* @__PURE__ */ jsx("div", { className: "sticky top-0 z-0 mx-auto flex min-h-[80vh] max-w-lg items-center justify-center py-16 text-center md:py-24 lg:py-28", children: /* @__PURE__ */ jsxs(motion.div, { style: { opacity: fadeOut, scale: scaleDown }, children: [
+        /* @__PURE__ */ jsx("div", { className: "px-[5%]", children: /* @__PURE__ */ jsx("div", { className: cn("z-0 mx-auto flex min-h-[80vh] max-w-lg items-center justify-center py-16 text-center md:py-24 lg:py-28", !isEditor && "sticky top-0"), children: /* @__PURE__ */ jsxs(motion.div, { style: isEditor ? { opacity: 1, scale: 1 } : { opacity: fadeOut, scale: scaleDown }, children: [
           /* @__PURE__ */ jsx("h1", { className: "mb-5 text-6xl font-bold md:mb-6 md:text-9xl lg:text-10xl", children: heading }),
           /* @__PURE__ */ jsx("p", { className: "md:text-md", children: description }),
           /* @__PURE__ */ jsx("div", { className: "mt-6 flex items-center justify-center gap-x-4 md:mt-8", children: buttons.map((button, index) => /* @__PURE__ */ jsx(CompoundButton, { label: button.label, variant: button.variant, size: button.size, action: button.action, icon: button.icon }, index)) })
@@ -49,8 +51,8 @@ const ScrollExpandVideoHero = (props) => {
         /* @__PURE__ */ jsx(
           motion.div,
           {
-            style: { width, height, y },
-            className: "sticky top-[10vh] z-10 mb-[-10vh] flex flex-col justify-start",
+            style: isEditor ? { width: "100%", height: "100vh", y: 0 } : { width, height, y },
+            className: cn("z-10 flex flex-col justify-start", isEditor ? "relative" : "sticky top-[10vh] mb-[-10vh]"),
             children: /* @__PURE__ */ jsxs(Dialog, { children: [
               /* @__PURE__ */ jsx(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsxs("button", { className: "relative flex size-full items-center justify-center", children: [
                 /* @__PURE__ */ jsx(CompoundImage, { src: image.src, alt: image.alt, className: "size-full object-cover" }),
@@ -88,7 +90,7 @@ const ScrollExpandVideoHeroDefaults = {
   video: "https://www.youtube.com/embed/8DKLYsikxTs?si=Ch9W0KrDWWUiCMMW",
   images: [{
     src: "https://picsum.photos/seed/hero-video/1200/800",
-    alt: "Relume placeholder image"
+    alt: "Placeholder image"
   }]
 };
 export {

package/dist/components/puck-block/hero-sections/scroll-zoom-hero/component.js

@@ -6,6 +6,7 @@ import { VideoIframe } from "../../../shadcn/video-iframe.js";
 import { Dialog, DialogTrigger, DialogContent } from "../../../shadcn/dialog.js";
 import { useMediaQuery } from "../../../../hooks/use-media-query.js";
 import { useScrollContainer } from "../../../../hooks/use-scroll-container.js";
+import { useEditorContext } from "../../../puck-core/core/context/editor-context.js";
 import { CompoundButton } from "../../../puck-base/button.js";
 import { CompoundImage } from "../../../puck-base/image.js";
 import { SectionWrapper } from "../../../puck-core/section-wrapper.js";
@@ -30,6 +31,7 @@ const ScrollZoomHero = (props) => {
     css,
     mediaType
   } = rawStyles ?? {};
+  const { isEditor } = useEditorContext();
   const isMobile = useMediaQuery("(max-width: 767px)");
   const sectionRef = useRef(null);
   const [scrollContainerRef] = useScrollContainer(sectionRef);
@@ -71,7 +73,7 @@ const ScrollZoomHero = (props) => {
               role: "button",
               tabIndex: 0,
               className: "relative flex size-full cursor-pointer origin-top-right items-center justify-center",
-              style: { scale: isMobile ? 1 : scaleValue },
+              style: { scale: isMobile || isEditor ? 1 : scaleValue },
               children: [
                 /* @__PURE__ */ jsx(
                   CompoundImage,
@@ -91,7 +93,7 @@ const ScrollZoomHero = (props) => {
           motion.div,
           {
             className: "flex origin-top-right flex-col items-end justify-center md:h-[60vh] lg:h-[80vh] lg:justify-start",
-            style: { scale: isMobile ? 1 : scaleValue },
+            style: { scale: isMobile || isEditor ? 1 : scaleValue },
             children: /* @__PURE__ */ jsx(
               CompoundImage,
               {
@@ -114,7 +116,7 @@ const ScrollZoomHeroDefaults = {
   images: [
     {
       src: "https://picsum.photos/seed/hero-video/1200/800",
-      alt: "Relume placeholder image"
+      alt: "Placeholder image"
     }
   ],
   styles: {

package/dist/components/puck-block/hero-sections/sticky-expand-hero/component.js

@@ -59,7 +59,7 @@ const StickyExpandHeroDefaults = {
   buttons: [{ label: "Button" }, { label: "Button", variant: "secondary" }],
   images: [{
     src: "https://picsum.photos/seed/hero-landscape/1200/800",
-    alt: "Relume placeholder image"
+    alt: "Placeholder image"
   }]
 };
 export {