dune-react 0.0.22 → 0.0.23

package/dist/components/puck-block/footer-sections/contact-links-footer/contact-links-footer.js

@@ -34,7 +34,8 @@ const ContactLinksFooter = (props) => {
   ] }) });
 };
 const ContactLinksFooterDefaults = {
-  logo: { url: "#", src: "https://d22po4pjz3o32e.cloudfront.net/logo-image.svg", alt: "Logo image" },
+  __metadata: { type: "footer" },
+  logo: { url: "#", src: "https://file.springbrand.ai/web_assets/template-logo.svg", alt: "Logo image" },
   heading: "",
   description: "",
   buttons: [],
@@ -44,12 +45,12 @@ const ContactLinksFooterDefaults = {
   button: { label: "" },
   termsAndConditions: "",
   address: { label: "Address:", value: "Level 1, 12 Sample St, Sydney NSW 2000" },
-  contact: { label: "Contact:", phone: "1800 123 4567", email: "info@relume.io" },
+  contact: { label: "Contact:", phone: "1800 123 4567", email: "info@example.com" },
   columnLinks: [
     { links: [{ title: "Link One", url: "#" }, { title: "Link Two", url: "#" }, { title: "Link Three", url: "#" }] },
     { links: [{ title: "Link Four", url: "#" }, { title: "Link Five", url: "#" }, { title: "Link Six", url: "#" }] }
   ],
-  footerText: "© 2024 Relume. All rights reserved.",
+  footerText: "© 2024 Company. All rights reserved.",
   footerLinks: [{ title: "Privacy Policy", url: "#" }, { title: "Terms of Service", url: "#" }],
   socialMediaLinks: [],
   companyImages: [],

package/dist/components/puck-block/footer-sections/contact-links-footer/index.d.ts

@@ -13,6 +13,92 @@ declare const conf: {
                 };
             };
         };
+        address: {
+            type: string;
+            label: string;
+            objectFields: {
+                label: {
+                    type: string;
+                    label: string;
+                };
+                value: {
+                    type: string;
+                    label: string;
+                };
+            };
+        };
+        columnLinks: {
+            type: string;
+            label: string;
+            getItemSummary: (_item: unknown, index?: number) => string;
+            arrayFields: {
+                links: {
+                    type: string;
+                    label: string;
+                    getItemSummary: (item: {
+                        title?: string;
+                    }, index?: number) => string;
+                    arrayFields: {
+                        title: {
+                            type: string;
+                            label: string;
+                        };
+                        url: {
+                            type: string;
+                            label: string;
+                        };
+                    };
+                };
+            };
+        };
+        contact: {
+            type: string;
+            label: string;
+            objectFields: {
+                label: {
+                    type: string;
+                    label: string;
+                };
+                phone: {
+                    type: string;
+                    label: string;
+                };
+                email: {
+                    type: string;
+                    label: string;
+                };
+            };
+        };
+        footerLinks: {
+            type: string;
+            label: string;
+            getItemSummary: (item: {
+                title?: string;
+            }, index?: number) => string;
+            arrayFields: {
+                title: {
+                    type: string;
+                    label: string;
+                };
+                url: {
+                    type: string;
+                    label: string;
+                };
+            };
+        };
+        socialMediaLinks: {
+            type: string;
+            label: string;
+            getItemSummary: (item: {
+                url?: string;
+            }, index?: number) => string;
+            arrayFields: {
+                url: {
+                    type: string;
+                    label: string;
+                };
+            };
+        };
         footerText: {
             type: string;
         };

package/dist/components/puck-block/footer-sections/contact-links-footer/index.js

@@ -2,7 +2,7 @@ import { ContactLinksFooter, ContactLinksFooterDefaults } from "./contact-links-
 import { imageField } from "../../../puck-core/core/props/media.js";
 import { footerStyleFields } from "../props.js";
 import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
-const conf = { fields: { logo: imageField, footerText: { type: "text" }, styles: { type: "object", label: "Styles", objectFields: { bordered: footerStyleFields.bordered, hasCompanyImage: footerStyleFields.hasCompanyImage, ...sectionWrapperFields } } }, defaultProps: ContactLinksFooterDefaults, render: ContactLinksFooter };
+const conf = { fields: { logo: imageField, address: { type: "object", label: "Address", objectFields: { label: { type: "text", label: "Label" }, value: { type: "text", label: "Value" } } }, columnLinks: { type: "array", label: "Link Columns", getItemSummary: (_item, index = 0) => `Column ${index + 1}`, arrayFields: { links: { type: "array", label: "Links", getItemSummary: (item, index = 0) => item.title || `Link ${index + 1}`, arrayFields: { title: { type: "text", label: "Title" }, url: { type: "text", label: "URL" } } } } }, contact: { type: "object", label: "Contact", objectFields: { label: { type: "text", label: "Label" }, phone: { type: "text", label: "Phone" }, email: { type: "text", label: "Email" } } }, footerLinks: { type: "array", label: "Footer Links", getItemSummary: (item, index = 0) => item.title || `Link ${index + 1}`, arrayFields: { title: { type: "text", label: "Title" }, url: { type: "text", label: "URL" } } }, socialMediaLinks: { type: "array", label: "Social Links", getItemSummary: (item, index = 0) => item.url || `Social ${index + 1}`, arrayFields: { url: { type: "text", label: "URL" } } }, footerText: { type: "text" }, styles: { type: "object", label: "Styles", objectFields: { bordered: footerStyleFields.bordered, hasCompanyImage: footerStyleFields.hasCompanyImage, ...sectionWrapperFields } } }, defaultProps: ContactLinksFooterDefaults, render: ContactLinksFooter };
 export {
   ContactLinksFooter,
   ContactLinksFooterDefaults,

package/dist/components/puck-block/footer-sections/cta-links-footer/cta-links-footer.js

@@ -25,7 +25,8 @@ const CtaLinksFooter = (props) => {
   ] }) });
 };
 const CtaLinksFooterDefaults = {
-  logo: { url: "#", src: "https://d22po4pjz3o32e.cloudfront.net/logo-image.svg", alt: "Logo image" },
+  __metadata: { type: "footer" },
+  logo: { url: "#", src: "https://file.springbrand.ai/web_assets/template-logo.svg", alt: "Logo image" },
   heading: "Medium length footer heading goes here",
   description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
   buttons: [{ label: "Button" }, { label: "Button", variant: "secondary" }],
@@ -38,7 +39,7 @@ const CtaLinksFooterDefaults = {
     { links: [{ title: "Link One", url: "#" }, { title: "Link Two", url: "#" }, { title: "Link Three", url: "#" }] },
     { links: [{ title: "Link Four", url: "#" }, { title: "Link Five", url: "#" }, { title: "Link Six", url: "#" }] }
   ],
-  footerText: "© 2024 Relume. All rights reserved.",
+  footerText: "© 2024 Company. All rights reserved.",
   footerLinks: [],
   socialMediaLinks: [],
   address: { label: "", value: "" },

package/dist/components/puck-block/footer-sections/cta-links-footer/index.d.ts

@@ -100,6 +100,43 @@ declare const conf: {
                 readonly instructions: "Buttons must use the same size";
             };
         };
+        columnLinks: {
+            type: string;
+            label: string;
+            getItemSummary: (_item: unknown, index?: number) => string;
+            arrayFields: {
+                links: {
+                    type: string;
+                    label: string;
+                    getItemSummary: (item: {
+                        title?: string;
+                    }, index?: number) => string;
+                    arrayFields: {
+                        title: {
+                            type: string;
+                            label: string;
+                        };
+                        url: {
+                            type: string;
+                            label: string;
+                        };
+                    };
+                };
+            };
+        };
+        socialMediaLinks: {
+            type: string;
+            label: string;
+            getItemSummary: (item: {
+                url?: string;
+            }, index?: number) => string;
+            arrayFields: {
+                url: {
+                    type: string;
+                    label: string;
+                };
+            };
+        };
         footerText: {
             type: string;
         };

package/dist/components/puck-block/footer-sections/cta-links-footer/index.js

@@ -4,7 +4,7 @@ import { buttonsField } from "../../../puck-core/core/props/interactive.js";
 import { imageField } from "../../../puck-core/core/props/media.js";
 import { footerStyleFields } from "../props.js";
 import { sectionWrapperFields } from "../../../puck-core/section-wrapper.js";
-const conf = { fields: { logo: imageField, heading: headingField, description: descriptionField, buttons: buttonsField, footerText: { type: "text" }, styles: { type: "object", label: "Styles", objectFields: { bordered: footerStyleFields.bordered, ...sectionWrapperFields } } }, defaultProps: CtaLinksFooterDefaults, render: CtaLinksFooter };
+const conf = { fields: { logo: imageField, heading: headingField, description: descriptionField, buttons: buttonsField, columnLinks: { type: "array", label: "Link Columns", getItemSummary: (_item, index = 0) => `Column ${index + 1}`, arrayFields: { links: { type: "array", label: "Links", getItemSummary: (item, index = 0) => item.title || `Link ${index + 1}`, arrayFields: { title: { type: "text", label: "Title" }, url: { type: "text", label: "URL" } } } } }, socialMediaLinks: { type: "array", label: "Social Links", getItemSummary: (item, index = 0) => item.url || `Social ${index + 1}`, arrayFields: { url: { type: "text", label: "URL" } } }, footerText: { type: "text" }, styles: { type: "object", label: "Styles", objectFields: { bordered: footerStyleFields.bordered, ...sectionWrapperFields } } }, defaultProps: CtaLinksFooterDefaults, render: CtaLinksFooter };
 export {
   CtaLinksFooter,
   CtaLinksFooterDefaults,

package/dist/components/puck-block/footer-sections/links-newsletter-footer/index.d.ts

@@ -81,6 +81,60 @@ declare const conf: {
         termsAndConditions: {
             type: string;
         };
+        columnLinks: {
+            type: string;
+            label: string;
+            getItemSummary: (_item: unknown, index?: number) => string;
+            arrayFields: {
+                links: {
+                    type: string;
+                    label: string;
+                    getItemSummary: (item: {
+                        title?: string;
+                    }, index?: number) => string;
+                    arrayFields: {
+                        title: {
+                            type: string;
+                            label: string;
+                        };
+                        url: {
+                            type: string;
+                            label: string;
+                        };
+                    };
+                };
+            };
+        };
+        footerLinks: {
+            type: string;
+            label: string;
+            getItemSummary: (item: {
+                title?: string;
+            }, index?: number) => string;
+            arrayFields: {
+                title: {
+                    type: string;
+                    label: string;
+                };
+                url: {
+                    type: string;
+                    label: string;
+                };
+            };
+        };
+        socialMediaLinks: {
+            type: string;
+            label: string;
+            getItemSummary: (item: {
+                url?: string;
+            }, index?: number) => string;
+            arrayFields: {
+                url: {
+                    type: string;
+                    label: string;
+                };
+            };
+        };
         footerText: {
             type: string;
         };

package/dist/components/puck-block/footer-sections/newsletter-links-footer/index.d.ts

@@ -78,6 +78,47 @@ declare const conf: {
         termsAndConditions: {
             type: string;
         };
+        columnLinks: {
+            type: string;
+            label: string;
+            getItemSummary: (_item: unknown, index?: number) => string;
+            arrayFields: {
+                links: {
+                    type: string;
+                    label: string;
+                    getItemSummary: (item: {
+                        title?: string;
+                    }, index?: number) => string;
+                    arrayFields: {
+                        title: {
+                            type: string;
+                            label: string;
+                        };
+                        url: {
+                            type: string;
+                            label: string;
+                        };
+                    };
+                };
+            };
+        };
+        footerLinks: {
+            type: string;
+            label: string;
+            getItemSummary: (item: {
+                title?: string;
+            }, index?: number) => string;
+            arrayFields: {
+                title: {
+                    type: string;
+                    label: string;
+                };
+                url: {
+                    type: string;
+                    label: string;
+                };
+            };
+        };
         footerText: {
             type: string;
         };

package/dist/components/puck-block/footer-sections/newsletter-top-links-footer/index.d.ts

@@ -81,6 +81,60 @@ declare const conf: {
         termsAndConditions: {
             type: string;
         };
+        columnLinks: {
+            type: string;
+            label: string;
+            getItemSummary: (_item: unknown, index?: number) => string;
+            arrayFields: {
+                links: {
+                    type: string;
+                    label: string;
+                    getItemSummary: (item: {
+                        title?: string;
+                    }, index?: number) => string;
+                    arrayFields: {
+                        title: {
+                            type: string;
+                            label: string;
+                        };
+                        url: {
+                            type: string;
+                            label: string;
+                        };
+                    };
+                };
+            };
+        };
+        footerLinks: {
+            type: string;
+            label: string;
+            getItemSummary: (item: {
+                title?: string;
+            }, index?: number) => string;
+            arrayFields: {
+                title: {
+                    type: string;
+                    label: string;
+                };
+                url: {
+                    type: string;
+                    label: string;
+                };
+            };
+        };
+        socialMediaLinks: {
+            type: string;
+            label: string;
+            getItemSummary: (item: {
+                url?: string;
+            }, index?: number) => string;
+            arrayFields: {
+                url: {
+                    type: string;
+                    label: string;
+                };
+            };
+        };
         footerText: {
             type: string;
         };

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

@@ -57,6 +57,9 @@ export interface FooterSectionBaseProps {
     contact: FooterContact;
     companyImages: BaseImage[];
     styles: FooterSectionStyles;
+    __metadata?: {
+        type: "footer";
+    };
 }
 export declare const footerStyleFields: {
     readonly bordered: {

package/dist/components/puck-block/gallery-sections/fullscreen-portfolio/fullscreen-portfolio.js

@@ -112,7 +112,7 @@ const defaultProject = {
   description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
   image: {
     src: "https://picsum.photos/seed/fullscreen-port/1920/1080",
-    alt: "Relume placeholder image"
+    alt: "Placeholder image"
   },
   url: "#",
   button: { label: "View project", variant: "secondary" }

package/dist/components/puck-block/gallery-sections/interactive-portfolio/interactive-portfolio.js

@@ -159,7 +159,7 @@ const defaultHoverLink = {
   tag: "Tag",
   image: {
     src: "https://picsum.photos/seed/interactive-port/800/800",
-    alt: "Relume placeholder image"
+    alt: "Placeholder image"
   }
 };
 const InteractivePortfolioDefaults = {

package/dist/components/puck-block/gallery-sections/portfolio-cards/portfolio-cards.js

@@ -129,7 +129,7 @@ const defaultProject = {
   description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.",
   image: {
     src: "https://picsum.photos/seed/portfolio-card/1200/800",
-    alt: "Relume placeholder image"
+    alt: "Placeholder image"
   },
   url: "#",
   button: { label: "View project", variant: "link", size: "sm" },

package/dist/components/puck-block/gallery-sections/portfolio-divider/portfolio-divider.js

@@ -96,7 +96,7 @@ const defaultProject = {
   description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.",
   image: {
     src: "https://picsum.photos/seed/portfolio-div/1200/800",
-    alt: "Relume placeholder image"
+    alt: "Placeholder image"
   },
   url: "#",
   button: { label: "View project", variant: "link", size: "sm" },

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

@@ -144,8 +144,18 @@ export declare const galleryStyleFields: {
         }];
     };
     readonly slideBasis: {
-        readonly type: "text";
+        readonly type: "select";
         readonly label: "Slide Basis";
+        readonly options: readonly [{
+            readonly label: "4/5";
+            readonly value: "4/5";
+        }, {
+            readonly label: "45%";
+            readonly value: "45%";
+        }, {
+            readonly label: "30%";
+            readonly value: "30%";
+        }];
     };
     readonly bordered: {
         readonly type: "radio";

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

@@ -64,8 +64,13 @@ const galleryStyleFields = {
     ]
   },
   slideBasis: {
-    type: "text",
-    label: "Slide Basis"
+    type: "select",
+    label: "Slide Basis",
+    options: [
+      { label: "4/5", value: "4/5" },
+      { label: "45%", value: "45%" },
+      { label: "30%", value: "30%" }
+    ]
   },
   bordered: {
     type: "radio",

package/dist/components/puck-block/gallery-sections/scroll-parallax/scroll-parallax.js

@@ -5,6 +5,7 @@ import { useScroll, useTransform, motion } from "framer-motion";
 import { cn } from "../../../../utils/css-utils.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 { CompoundImage } from "../../../puck-base/image.js";
 const ScrollParallax = (props) => {
   const { heading, description, images, styles } = {
@@ -12,6 +13,7 @@ const ScrollParallax = (props) => {
     ...props
   };
   const { className: sectionClassName, style: sectionStyle, css } = styles ?? {};
+  const { isEditor } = useEditorContext();
   const transformRef = useRef(null);
   const [scrollContainerRef] = useScrollContainer(transformRef);
   const { scrollYProgress } = useScroll({
@@ -19,6 +21,22 @@ const ScrollParallax = (props) => {
     ...scrollContainerRef.current ? { container: scrollContainerRef } : {}
   });
   const x = useTransform(scrollYProgress, [0, 1], ["0%", "-100%"]);
+  if (isEditor) {
+    return /* @__PURE__ */ jsxs(SectionWrapper, { ref: transformRef, className: cn(sectionClassName), style: sectionStyle, css, children: [
+      /* @__PURE__ */ jsx("div", { className: "px-[5%] pt-16 md:pt-24 lg:pt-28", children: /* @__PURE__ */ jsxs("div", { className: "container text-center", children: [
+        /* @__PURE__ */ jsx("h2", { className: "rb-5 mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl", children: heading }),
+        /* @__PURE__ */ jsx("p", { className: "md:text-md", children: description })
+      ] }) }),
+      /* @__PURE__ */ jsx("div", { className: "px-[5%] py-12", children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3", children: images.map((image, index) => /* @__PURE__ */ jsx("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsx(
+        CompoundImage,
+        {
+          className: "aspect-video w-full object-cover",
+          src: image.src,
+          alt: image.alt
+        }
+      ) }, index)) }) })
+    ] });
+  }
   return /* @__PURE__ */ jsxs(SectionWrapper, { ref: transformRef, className: cn(sectionClassName), style: sectionStyle, css, children: [
     /* @__PURE__ */ jsx("div", { className: "px-[5%] pt-16 md:pt-24 lg:pt-28", children: /* @__PURE__ */ jsxs("div", { className: "container text-center", children: [
       /* @__PURE__ */ jsx("h2", { className: "rb-5 mb-5 text-5xl font-bold md:mb-6 md:text-7xl lg:text-8xl", children: heading }),

package/dist/components/puck-block/gallery-sections/scroll-parallax-portfolio/scroll-parallax-portfolio.js

@@ -5,6 +5,7 @@ import { useScroll, useTransform, motion, useSpring, easeOut, easeInOut } from "
 import { cn } from "../../../../utils/css-utils.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 { CompoundImage } from "../../../puck-base/image.js";
 const ScrollParallaxPortfolio = (props) => {
   const { projects, styles } = {
@@ -23,6 +24,7 @@ const ThreeImageParallaxVariant = ({
   sectionStyle,
   css
 }) => {
+  const { isEditor } = useEditorContext();
   const transformRef = useRef(null);
   const [scrollContainerRef] = useScrollContainer(transformRef);
   const { scrollYProgress } = useScroll({
@@ -76,23 +78,23 @@ const ThreeImageParallaxVariant = ({
       return /* @__PURE__ */ jsxs(
         "div",
         {
-          className: cn("relative flex h-[500vh] flex-col", {
-            "mt-[-40vh]": index > 0
+          className: cn("relative flex flex-col", isEditor ? "h-auto mb-12" : "h-[500vh]", {
+            "mt-[-40vh]": !isEditor && index > 0
           }),
           children: [
             /* @__PURE__ */ jsx(
               motion.div,
               {
-                className: "sticky top-0 flex h-[150vh] justify-center",
-                style: computedStyles[index].headerStyles,
-                children: /* @__PURE__ */ jsxs("div", { className: "absolute top-[50vh] -z-10 flex w-full max-w-lg flex-col items-center text-center", children: [
+                className: cn("flex justify-center", isEditor ? "relative h-auto py-8" : "sticky top-0 h-[150vh]"),
+                style: isEditor ? { opacity: 1, scale: 1 } : computedStyles[index].headerStyles,
+                children: /* @__PURE__ */ jsxs("div", { className: cn("-z-10 flex w-full max-w-lg flex-col items-center text-center", isEditor ? "relative" : "absolute top-[50vh]"), children: [
                   /* @__PURE__ */ jsx("h3", { className: "text-5xl font-bold md:text-7xl lg:text-8xl", children: project.title }),
                   project.tags && /* @__PURE__ */ jsx("div", { className: "mt-4 flex flex-wrap justify-center gap-2", children: project.tags.map((tag, tagIndex) => /* @__PURE__ */ jsx("li", { className: "flex", children: /* @__PURE__ */ jsx("div", { className: "inline-flex border border-neutral-lightest bg-background-secondary px-2 py-1 text-sm font-semibold text-text-primary", children: tag.label }) }, tagIndex)) })
                 ] })
               }
             ),
-            /* @__PURE__ */ jsxs("div", { className: "sticky top-0 z-10 flex h-screen items-center justify-center overflow-hidden", children: [
-              /* @__PURE__ */ jsx("a", { href: "#", className: "inline-block max-w-full", children: /* @__PURE__ */ jsx("div", { className: "flex h-screen w-full max-w-lg items-center justify-center overflow-hidden", children: /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsxs("div", { className: cn("z-10 flex items-center justify-center overflow-hidden", isEditor ? "relative h-auto" : "sticky top-0 h-screen"), children: [
+              /* @__PURE__ */ jsx("a", { href: "#", className: "inline-block max-w-full", children: /* @__PURE__ */ jsx("div", { className: cn("flex w-full max-w-lg items-center justify-center overflow-hidden", isEditor ? "h-auto" : "h-screen"), children: /* @__PURE__ */ jsx(
                 CompoundImage,
                 {
                   src: ((_a = project.imageCenter) == null ? void 0 : _a.src) ?? project.image.src,
@@ -100,11 +102,11 @@ const ThreeImageParallaxVariant = ({
                   className: "size-full object-contain"
                 }
               ) }) }),
-              /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 left-0 right-auto z-20 hidden h-screen w-full max-w-xxs lg:flex", children: /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx("div", { className: cn("absolute inset-y-0 left-0 right-auto z-20 hidden w-full max-w-xxs lg:flex", isEditor ? "h-auto" : "h-screen"), children: /* @__PURE__ */ jsx(
                 motion.div,
                 {
-                  className: "relative w-full pt-[100vh]",
-                  style: computedStyles[index].imageLeftStyles,
+                  className: cn("relative w-full", isEditor ? "pt-0" : "pt-[100vh]"),
+                  style: isEditor ? { y: 0 } : computedStyles[index].imageLeftStyles,
                   children: /* @__PURE__ */ jsx(
                     CompoundImage,
                     {
@@ -115,11 +117,11 @@ const ThreeImageParallaxVariant = ({
                   )
                 }
               ) }),
-              /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 left-auto right-0 z-20 hidden h-screen w-full max-w-xxs lg:flex", children: /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx("div", { className: cn("absolute inset-y-0 left-auto right-0 z-20 hidden w-full max-w-xxs lg:flex", isEditor ? "h-auto" : "h-screen"), children: /* @__PURE__ */ jsx(
                 motion.div,
                 {
-                  className: "relative w-full pt-[100vh]",
-                  style: computedStyles[index].imageRightStyles,
+                  className: cn("relative w-full", isEditor ? "pt-0" : "pt-[100vh]"),
+                  style: isEditor ? { y: 0 } : computedStyles[index].imageRightStyles,
                   children: /* @__PURE__ */ jsx(
                     CompoundImage,
                     {
@@ -131,13 +133,13 @@ const ThreeImageParallaxVariant = ({
                 }
               ) })
             ] }),
-            /* @__PURE__ */ jsx("div", { className: "absolute inset-0 -z-10 mt-[100vh]" })
+            !isEditor && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 -z-10 mt-[100vh]" })
           ]
         },
         index
       );
     }) }) }),
-    /* @__PURE__ */ jsx("div", { className: "h-screen" })
+    !isEditor && /* @__PURE__ */ jsx("div", { className: "h-screen" })
   ] });
 };
 const ScaleOpacityVariant = ({
@@ -146,13 +148,14 @@ const ScaleOpacityVariant = ({
   sectionStyle,
   css
 }) => {
+  const { isEditor } = useEditorContext();
   const containerRef = useRef(null);
   const [scrollContainerRef] = useScrollContainer(containerRef);
   const { scrollYProgress } = useScroll({
     target: containerRef,
     ...scrollContainerRef.current ? { container: scrollContainerRef } : {}
   });
-  return /* @__PURE__ */ jsx(SectionWrapper, { ref: containerRef, className: cn("relative px-[5%]", sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsx("div", { className: "h-[300vh]", children: /* @__PURE__ */ jsx("div", { className: "sticky top-0 flex h-screen items-center justify-center", children: projects.map((project, index) => {
+  return /* @__PURE__ */ jsx(SectionWrapper, { ref: containerRef, className: cn("relative px-[5%]", sectionClassName), style: sectionStyle, css, children: /* @__PURE__ */ jsx("div", { className: isEditor ? "h-auto" : "h-[300vh]", children: /* @__PURE__ */ jsx("div", { className: cn("flex items-center justify-center", isEditor ? "relative flex-col gap-8 py-12" : "sticky top-0 h-screen"), children: projects.map((project, index) => {
     const segmentSize = 1 / projects.length;
     const start = index * segmentSize;
     const end = start + segmentSize;
@@ -169,8 +172,8 @@ const ScaleOpacityVariant = ({
     return /* @__PURE__ */ jsx(
       motion.div,
       {
-        style: { opacity, scale },
-        className: "absolute inset-0 flex items-center justify-center",
+        style: isEditor ? { opacity: 1, scale: 1 } : { opacity, scale },
+        className: cn("flex items-center justify-center", isEditor ? "relative w-full" : "absolute inset-0"),
         children: /* @__PURE__ */ jsxs("div", { className: "container max-w-4xl border border-border-primary bg-background-primary p-8 md:p-12", children: [
           /* @__PURE__ */ jsx("div", { className: "mb-6", children: /* @__PURE__ */ jsx(
             CompoundImage,
@@ -201,7 +204,7 @@ const defaultProject = {
   description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
   image: {
     src: "https://picsum.photos/seed/scroll-port/1200/800",
-    alt: "Relume placeholder image"
+    alt: "Placeholder image"
   },
   url: "#",
   button: { label: "View project" },
@@ -212,15 +215,15 @@ const defaultProject = {
   ],
   imageCenter: {
     src: "https://picsum.photos/seed/scroll-port-center/800/1000",
-    alt: "Relume placeholder center"
+    alt: "Placeholder center"
   },
   imageLeft: {
     src: "https://picsum.photos/seed/scroll-port-left/400/600",
-    alt: "Relume placeholder left"
+    alt: "Placeholder left"
   },
   imageRight: {
     src: "https://picsum.photos/seed/scroll-port-right/400/600",
-    alt: "Relume placeholder right"
+    alt: "Placeholder right"
   }
 };
 const ScrollParallaxPortfolioDefaults = {