dune-react 0.0.21 → 0.0.23

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/mouse-track-hero/index.d.ts

@@ -25,7 +25,7 @@ declare const conf: {
                 readonly action: {
                     type: "custom";
                     label: string;
-                    render: typeof import("../../../puck-core").ActionField;
+                    render: typeof import("../../..").ActionField;
                 };
                 readonly variant: {
                     readonly type: "select";

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

@@ -25,7 +25,7 @@ declare const conf: {
                 readonly action: {
                     type: "custom";
                     label: string;
-                    render: typeof import("../../../puck-core").ActionField;
+                    render: typeof import("../../..").ActionField;
                 };
                 readonly variant: {
                     readonly type: "select";
@@ -112,38 +112,35 @@ declare const conf: {
             type: string;
             label: string;
             objectFields: {
+                className: {
+                    readonly type: "text";
+                    readonly label: "Class Name";
+                    readonly ai: {
+                        readonly instructions: "Additional Tailwind CSS classes to apply to the section wrapper.";
+                    };
+                };
+                style: {
+                    readonly type: "object";
+                    readonly label: "Style";
+                    readonly objectFields: {};
+                    readonly ai: {
+                        readonly instructions: "Inline CSSProperties object for the section wrapper, e.g. { backgroundColor: 'red', minHeight: '100vh' }.";
+                    };
+                };
+                css: {
+                    readonly type: "textarea";
+                    readonly label: "Custom CSS";
+                    readonly ai: {
+                        readonly instructions: "Custom CSS rules. Use & as a placeholder for the section selector.";
+                    };
+                };
                 textLayout: {
                     type: "select";
                     label: string;
-                    options: ({
-                        className: {
-                            readonly type: "text";
-                            readonly label: "Class Name";
-                            readonly ai: {
-                                readonly instructions: "Additional Tailwind CSS classes to apply to the section wrapper.";
-                            };
-                        };
-                        style: {
-                            readonly type: "object";
-                            readonly label: "Style";
-                            readonly objectFields: {};
-                            readonly ai: {
-                                readonly instructions: "Inline CSSProperties object for the section wrapper, e.g. { backgroundColor: 'red', minHeight: '100vh' }.";
-                            };
-                        };
-                        css: {
-                            readonly type: "textarea";
-                            readonly label: "Custom CSS";
-                            readonly ai: {
-                                readonly instructions: "Custom CSS rules. Use & as a placeholder for the section selector.";
-                            };
-                        };
-                        label: string;
-                        value: string;
-                    } | {
+                    options: {
                         label: string;
                         value: string;
-                    })[];
+                    }[];
                 };
                 imageGridRatio: {
                     readonly type: "text";

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

@@ -18,12 +18,13 @@ const conf = {
           type: "select",
           label: "Text Layout",
           options: [
-            { label: "Two Column Top", value: "two-column-top", ...sectionWrapperFields },
+            { label: "Two Column Top", value: "two-column-top" },
             { label: "Left Block", value: "left-block" },
             { label: "Centered", value: "centered" }
           ]
         },
-        imageGridRatio: heroStyleFields.imageGridRatio
+        imageGridRatio: heroStyleFields.imageGridRatio,
+        ...sectionWrapperFields
       }
     }
   },

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/index.d.ts

@@ -25,7 +25,7 @@ declare const conf: {
                 readonly action: {
                     type: "custom";
                     label: string;
-                    render: typeof import("../../../puck-core").ActionField;
+                    render: typeof import("../../..").ActionField;
                 };
                 readonly variant: {
                     readonly type: "select";

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/parallax-images-hero/index.d.ts

@@ -25,7 +25,7 @@ declare const conf: {
                 readonly action: {
                     type: "custom";
                     label: string;
-                    render: typeof import("../../../puck-core").ActionField;
+                    render: typeof import("../../..").ActionField;
                 };
                 readonly variant: {
                     readonly type: "select";

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/scatter-parallax-hero/index.d.ts

@@ -25,7 +25,7 @@ declare const conf: {
                 readonly action: {
                     type: "custom";
                     label: string;
-                    render: typeof import("../../../puck-core").ActionField;
+                    render: typeof import("../../..").ActionField;
                 };
                 readonly variant: {
                     readonly type: "select";

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-expand-video-hero/index.d.ts

@@ -25,7 +25,7 @@ declare const conf: {
                 readonly action: {
                     type: "custom";
                     label: string;
-                    render: typeof import("../../../puck-core").ActionField;
+                    render: typeof import("../../..").ActionField;
                 };
                 readonly variant: {
                     readonly type: "select";