@gem-sdk/pages 1.23.0-staging.31 → 1.23.0-staging.322

package/dist/cjs/components/builder/Toolbox.js

@@ -12,24 +12,23 @@ var genFonts = require('../../libs/helpers/gen-fonts.js');
 var shopifyCdnWithGoogleFonts = require('../../libs/shopify-cdn-with-google-fonts.js');
 
 const globalStyleId = 'global-style';
-const globalFontId = 'google-font-builder';
-const fontElementSettingClassName = 'google-font-element';
 const Toolbox = ()=>{
     const matchMutate = core.useMatchMutate();
     const provider = core.useShopStore((s)=>s.provider);
     const changeStorefrontInfo = core.useShopStore((s)=>s.changeStorefrontInfo);
+    const setDynamicProduct = core.usePageStore((s)=>s.setDynamicProduct);
+    const setDynamicCollection = core.usePageStore((s)=>s.setDynamicCollection);
     const initState = core.useBuilderPreviewStore((s)=>s.initState);
     const state = core.useBuilderPreviewStore((s)=>s.state);
     const initNormalizeState = core.useBuilderPreviewStore((s)=>s.forceChangeState);
     const forceChangeItemProp = core.useBuilderPreviewStore((s)=>s.forceChangeItemProp);
     const changeItemPropByKey = core.useBuilderPreviewStore((s)=>s.changeItemPropByKey);
-    const setDynamicProduct = core.useBuilderPreviewStore((s)=>s.setDynamicProduct);
-    const setDynamicCollection = core.useBuilderPreviewStore((s)=>s.setDynamicCollection);
     const addItem = core.useBuilderPreviewStore((s)=>s.addItem);
     const moveItem = core.useBuilderPreviewStore((s)=>s.moveItem);
     const removeItem = core.useBuilderPreviewStore((s)=>s.removeItem);
     const addSection = core.useSectionStore((s)=>s.addSection);
     const changeSwatches = core.useShopStore((s)=>s.changeSwatches);
+    const updateItemName = core.useBuilderPreviewStore((s)=>s.updateItemName);
     const changeLayoutSettings = core.useShopStore((s)=>s.changeLayoutSettings);
     const changeCreateThemeSectionCount = core.useShopStore((s)=>s.changeCreateThemeSectionCount);
     const changeShopPlan = core.useShopStore((s)=>s.changeShopPlan);
@@ -37,11 +36,62 @@ const Toolbox = ()=>{
     const fonts = react.useMemo(()=>genFonts.getFontsFromDataBuilder(state), [
         state
     ]);
-    const customFontUrl = react.useMemo(()=>{
-        return googleFonts.createFontUrl(fonts);
-    }, [
-        fonts
-    ]);
+    const setFontsToHead = (className, fonts)=>{
+        // clear fonts
+        if (!fonts?.length) {
+            const googleFonts = document.querySelectorAll(`.${className}`);
+            googleFonts.forEach((googleFont)=>{
+                googleFont.remove();
+            });
+            return;
+        }
+        // clear fonts not use
+        const googleFonts$1 = document.querySelectorAll(`.${className}`);
+        googleFonts$1.forEach((googleFont)=>{
+            const fontName = googleFont.getAttribute('data-font');
+            const variantName = googleFont.getAttribute('data-font-variant');
+            if (!fontName || !variantName) {
+                googleFont.remove();
+            } else {
+                const isUse = fonts.find((font)=>font.family == fontName && font.variants.includes(variantName));
+                if (!isUse) {
+                    googleFont.remove();
+                }
+            }
+        });
+        // append new fonts
+        for (const font of fonts){
+            if (font.type !== 'custom') {
+                if (font.variants?.length) {
+                    for (const variant of font.variants){
+                        const cloneFont = JSON.parse(JSON.stringify(font));
+                        cloneFont.variants = [
+                            variant
+                        ]; // set single variant. Fix error reload font when change href other variant
+                        const fontName = cloneFont.family;
+                        const variantName = variant;
+                        const url = googleFonts.createFontUrl([
+                            cloneFont
+                        ]);
+                        if (url) {
+                            const googleFont = document.querySelector(`.${className}[data-font="${fontName}"][data-font-variant="${variantName}"]`);
+                            if (googleFont) {
+                                continue;
+                            } else {
+                                const link = document.createElement('link');
+                                link.className = className;
+                                link.dataset.font = fontName;
+                                link.dataset.fontVariant = variantName;
+                                link.href = url;
+                                link.rel = 'stylesheet';
+                                document.head.appendChild(link);
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    };
     // Revalidate all query with key match query/
     const onRevalidateQuery = react.useCallback(()=>{
         matchMutate(/query\//, {
@@ -77,22 +127,8 @@ const Toolbox = ()=>{
                     }
                     return item;
                 });
-                const fontUrl = googleFonts.createFontUrl(font);
                 const globalStyle = document.getElementById(globalStyleId);
-                const googleFont = document.getElementById(globalFontId);
-                if (fontUrl) {
-                    if (googleFont) {
-                        if (googleFont.getAttribute('href') !== fontUrl) {
-                            googleFont.setAttribute('href', fontUrl);
-                        }
-                    } else {
-                        const link = document.createElement('link');
-                        link.id = globalFontId;
-                        link.href = fontUrl;
-                        link.rel = 'stylesheet';
-                        document.head.appendChild(link);
-                    }
-                }
+                setFontsToHead('google-font-builder', font);
                 if (globalStyle) {
                     globalStyle.innerHTML = themeStyle;
                 } else {
@@ -226,52 +262,54 @@ const Toolbox = ()=>{
         changeLayoutSettings
     ]);
     const onUpdateCreateThemeSectionCount = react.useCallback((e)=>{
-        const detail = e.detail;
-        if (!detail) return;
-        changeCreateThemeSectionCount(detail);
+        const count = e.detail;
+        if (!count) return;
+        changeCreateThemeSectionCount(count);
     }, [
         changeCreateThemeSectionCount
     ]);
     const onUpdateShopPlan = react.useCallback((e)=>{
-        const detail = e.detail;
-        if (!detail) return;
-        changeShopPlan(detail);
+        const shopPlan = e.detail;
+        if (!shopPlan) return;
+        changeShopPlan(shopPlan);
     }, [
         changeShopPlan
     ]);
     const onUpdateDynamicProduct = react.useCallback((e)=>{
-        const detail = e.detail;
-        if (!detail) return;
-        setDynamicProduct(detail);
+        const product = e.detail;
+        if (!product) return;
+        setDynamicProduct(product);
     }, [
         setDynamicProduct
     ]);
     const onUpdateDynamicCollection = react.useCallback((e)=>{
-        const detail = e.detail;
-        if (!detail) return;
-        setDynamicCollection(detail);
+        const collection = e.detail;
+        if (!collection) return;
+        setDynamicCollection(collection);
     }, [
         setDynamicCollection
     ]);
     react.useEffect(()=>{
-        if (customFontUrl) {
-            const fontId = 'google-font';
-            const googleFont = document.querySelector(`.${fontElementSettingClassName}[data-font="${fontId}"]`);
-            if (googleFont) {
-                if (googleFont.getAttribute('href') !== customFontUrl) {
-                    googleFont.setAttribute('href', customFontUrl);
-                }
-            } else {
-                const link = document.createElement('link');
-                link.className = fontElementSettingClassName;
-                link.dataset.font = fontId;
-                link.href = customFontUrl;
-                link.rel = 'stylesheet';
-                document.head.appendChild(link);
-            }
+        if (fonts) {
+            setFontsToHead('google-font-element', fonts);
+        }
+    }, [
+        fonts
+    ]);
+    const onUpdateItemName = react.useCallback((e)=>{
+        const detail = e.detail;
+        if (detail.uid) {
+            updateItemName(detail.uid, detail.name || '');
         }
     }, [
-        customFontUrl
+        updateItemName
+    ]);
+    react.useEffect(()=>{
+        if (fonts) {
+            setFontsToHead('google-font-element', fonts);
+        }
+    }, [
+        fonts
     ]);
     react.useEffect(()=>{
         window.addEventListener('update-shop-info', onChangeShopInfo);
@@ -289,6 +327,7 @@ const Toolbox = ()=>{
         window.addEventListener('update-shop-plan', onUpdateShopPlan);
         window.addEventListener('set-dynamic-product', onUpdateDynamicProduct);
         window.addEventListener('set-dynamic-collection', onUpdateDynamicCollection);
+        window.addEventListener('update-item-name', onUpdateItemName);
         return ()=>{
             window.removeEventListener('update-shop-info', onChangeShopInfo);
             window.removeEventListener('revalidate-query', onRevalidateQuery);
@@ -304,6 +343,7 @@ const Toolbox = ()=>{
             window.removeEventListener('update-shop-plan', onUpdateShopPlan);
             window.removeEventListener('set-dynamic-product', onUpdateDynamicProduct);
             window.removeEventListener('set-dynamic-collection', onUpdateDynamicCollection);
+            window.removeEventListener('update-item-name', onUpdateItemName);
         };
     }, [
         onAddEntity,
@@ -320,7 +360,8 @@ const Toolbox = ()=>{
         onChangeLayoutSettingData,
         onUpdateCreateThemeSectionCount,
         onUpdateDynamicProduct,
-        onUpdateDynamicCollection
+        onUpdateDynamicCollection,
+        onUpdateItemName
     ]);
     return /*#__PURE__*/ jsxRuntime.jsx("div", {
         className: "toolbox"

package/dist/cjs/components/builder/toolbar/Onboarding.js

@@ -0,0 +1,110 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+
+const Onboarding = ({ enable, position, onCloseOnboarding })=>{
+    const closeOnboarding = ()=>{
+        onCloseOnboarding();
+    };
+    const videoSrc = 'https://ucarecdn.com/de5fd2eb-4525-45a7-ad13-53960dac225e/';
+    const Video = ()=>{
+        return /*#__PURE__*/ jsxRuntime.jsxs("video", {
+            width: "100%",
+            className: "w-full",
+            loop: true,
+            muted: true,
+            autoPlay: true,
+            playsInline: true,
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsx("source", {
+                    src: videoSrc,
+                    type: "video/mp4"
+                }),
+                "Sorry, your browser doesn‘t support embedded videos."
+            ]
+        });
+    };
+    const MemoVideo = /*#__PURE__*/ react.memo(Video);
+    return /*#__PURE__*/ jsxRuntime.jsx("div", {
+        "data-toolbar-onboarding": true,
+        "data-toolbar-onboarding-position": position,
+        children: enable && /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsx("span", {
+                    "data-icon": true,
+                    "data-position": position,
+                    children: position === 'bottom' ? /*#__PURE__*/ jsxRuntime.jsx("svg", {
+                        width: "8",
+                        height: "4",
+                        viewBox: "0 0 8 4",
+                        fill: "none",
+                        xmlns: "http://www.w3.org/2000/svg",
+                        children: /*#__PURE__*/ jsxRuntime.jsx("path", {
+                            d: "M-1.74846e-07 4L4 -1.74846e-07L8 4L-1.74846e-07 4Z",
+                            fill: "white"
+                        })
+                    }) : /*#__PURE__*/ jsxRuntime.jsx("svg", {
+                        width: "8",
+                        height: "4",
+                        viewBox: "0 0 8 4",
+                        fill: "none",
+                        xmlns: "http://www.w3.org/2000/svg",
+                        children: /*#__PURE__*/ jsxRuntime.jsx("path", {
+                            d: "M8 3.33818e-07L4 4L4.76995e-08 7.15256e-07L8 3.33818e-07Z",
+                            fill: "white"
+                        })
+                    })
+                }),
+                /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                    "data-onboarding-wrapper": true,
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx("button", {
+                            "data-close": true,
+                            type: "button",
+                            onClick: closeOnboarding,
+                            children: /*#__PURE__*/ jsxRuntime.jsxs("svg", {
+                                width: "32",
+                                height: "32",
+                                viewBox: "0 0 32 32",
+                                fill: "none",
+                                xmlns: "http://www.w3.org/2000/svg",
+                                children: [
+                                    /*#__PURE__*/ jsxRuntime.jsx("path", {
+                                        fillRule: "evenodd",
+                                        clipRule: "evenodd",
+                                        d: "M10.6464 10.6464C10.8417 10.4512 11.1583 10.4512 11.3536 10.6464L21.3536 20.6464C21.5488 20.8417 21.5488 21.1583 21.3536 21.3536C21.1583 21.5488 20.8417 21.5488 20.6464 21.3536L10.6464 11.3536C10.4512 11.1583 10.4512 10.8417 10.6464 10.6464Z",
+                                        fill: "#212121"
+                                    }),
+                                    /*#__PURE__*/ jsxRuntime.jsx("path", {
+                                        fillRule: "evenodd",
+                                        clipRule: "evenodd",
+                                        d: "M21.3536 10.6464C21.5488 10.8417 21.5488 11.1583 21.3536 11.3536L11.3536 21.3536C11.1583 21.5488 10.8417 21.5488 10.6464 21.3536C10.4512 21.1583 10.4512 20.8417 10.6464 20.6464L20.6464 10.6464C20.8417 10.4512 21.1583 10.4512 21.3536 10.6464Z",
+                                        fill: "#212121"
+                                    })
+                                ]
+                            })
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(MemoVideo, {}),
+                        /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                            "data-content": true,
+                            children: [
+                                /*#__PURE__*/ jsxRuntime.jsx("h3", {
+                                    children: "New way to select parent element"
+                                }),
+                                /*#__PURE__*/ jsxRuntime.jsx("p", {
+                                    children: "Select parent from here in case you can‘t find yours at times."
+                                })
+                            ]
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+};
+var Onboarding$1 = /*#__PURE__*/ react.memo(Onboarding);
+
+exports.default = Onboarding$1;

package/dist/cjs/components/image-to-layout/AddSectionImageToLayout.js

@@ -37,11 +37,6 @@ const AddSectionImageToLayout = ({ editorImageToLayout })=>{
     const totalSection = core.useBuilderPreviewStore((state)=>state.state.ROOT.childrens?.length);
     const [link, setLink] = react.useState('');
     const [isInput, setIsInput] = react.useState(false);
-    const onClick = (index)=>{
-        if (index === 1) {
-            setIsInput(true);
-        }
-    };
     react.useEffect(()=>{
         if (!isInput || totalSection === 0) {
             setLink('');
@@ -82,11 +77,10 @@ const AddSectionImageToLayout = ({ editorImageToLayout })=>{
                     className: "absolute top-[-12px] bg-white px-[8px] text-[14px] font-normal text-[#9E9E9E]",
                     children: "Add section"
                 }),
-                ACTIONS_DATA.map((action, index)=>{
+                ACTIONS_DATA.map((action)=>{
                     return /*#__PURE__*/ jsxRuntime.jsxs("div", {
                         className: `relative mx-1 h-[60px] w-[172px] cursor-pointer flex-col items-center justify-center rounded-[3px] bg-[#F4F4F4] hover:bg-black/10 ${isInput ? 'hidden' : 'flex'}`,
                         id: action.id,
-                        onClick: ()=>onClick(index),
                         "aria-hidden": true,
                         children: [
                             /*#__PURE__*/ jsxRuntime.jsxs("div", {

package/dist/cjs/libs/api/get-home-page-props-v2.js

@@ -35,7 +35,8 @@ const getHomePagePropsV2 = (fetcher, shopifyFetcher)=>async ()=>{
                 throw new Error(`No data builder found for Home page`);
             }
             const homeTemplate = normalize.parseBuilderTemplateV2(dataBuilder);
-            const [fontStyle, fallback] = await Promise.all([
+            const [elementFontStyle, fontStyle, fallback] = await Promise.all([
+                googleFonts.getFontStyleFromPageTemplate(homeTemplate),
                 googleFonts.getFontFromGlobalStyle(dataBuilder?.pageStyle?.data),
                 getFallback.getFallbackV2(fetcher, homeTemplate)
             ]);
@@ -115,6 +116,7 @@ const getHomePagePropsV2 = (fetcher, shopifyFetcher)=>async ()=>{
             return parseJson.serializableJson({
                 themeStyle: genCss.genCSS(dataBuilder?.pageStyle?.data, mobileOnly),
                 fontStyle,
+                elementFontStyle,
                 builderData: homeTemplate,
                 swr: {
                     fallback

package/dist/cjs/libs/api/get-static-page-props-preview.js

@@ -38,7 +38,8 @@ const getStaticPagePropsPreview = (fetcher, shopifyFetcher)=>async (slug)=>{
                 throw new Error(`No data builder found for slug: /preview/${slug}`);
             }
             const pageTemplate = normalize.parseBuilderTemplateV2(dataBuilder);
-            const [fontStyle, fallback] = await Promise.all([
+            const [elementFontStyle, fontStyle, fallback] = await Promise.all([
+                googleFonts.getFontStyleFromPageTemplate(pageTemplate),
                 googleFonts.getFontFromGlobalStyle(dataBuilder?.pageStyle?.data),
                 getFallback.getFallbackV2(fetcher, pageTemplate)
             ]);
@@ -120,6 +121,7 @@ const getStaticPagePropsPreview = (fetcher, shopifyFetcher)=>async (slug)=>{
             return parseJson.serializableJson({
                 themeStyle: genCss.genCSS(dataBuilder?.pageStyle?.data, mobileOnly),
                 fontStyle,
+                elementFontStyle,
                 builderData: pageTemplate,
                 pageType,
                 moneyFormat: shopMeta?.shop.moneyFormat ?? null,

package/dist/cjs/libs/google-fonts.js

@@ -9,7 +9,12 @@ async function getFontForUA(url, UA) {
         headers: {
             'User-Agent': UA
         }
-    }).then((res)=>res.text());
+    }).then((res)=>{
+        if (res.status === 200) {
+            return res.text();
+        }
+        return '';
+    });
 }
 const composeFonts = (fonts)=>{
     const uniqFonts = fonts.filter((font, index, arr)=>{

package/dist/cjs/libs/helpers/gen-fonts.js

@@ -19,7 +19,12 @@ const getFontFromGroupSetting = (fonts, groupSetting)=>{
             const value = groupSetting[attr];
             if (value) {
                 const customFontFamily = value.custom?.fontFamily;
-                const customFontVariants = value.custom?.fontVariants;
+                let customFontVariants = value.custom?.fontVariants;
+                if (!customFontVariants?.length) {
+                    customFontVariants = [
+                        value.custom?.fontWeight
+                    ];
+                }
                 if (customFontFamily && customFontVariants?.length) {
                     const variants = customFontVariants.map((item)=>{
                         switch(item){
@@ -36,11 +41,17 @@ const getFontFromGroupSetting = (fonts, groupSetting)=>{
                             if (isFontFamily) {
                                 isFontFamily.variants.push(customFontWeight);
                             } else {
+                                const fontVariants = [
+                                    customFontWeight
+                                ];
+                                if (customFontWeight !== '700') {
+                                    if (variants.includes('700')) {
+                                        fontVariants.push('700'); // Auto add 700 for bold in editor inline
+                                    }
+                                }
                                 fonts.push({
                                     family: customFontFamily,
-                                    variants: [
-                                        customFontWeight
-                                    ],
+                                    variants: fontVariants,
                                     subsets: [],
                                     type: 'google'
                                 });

package/dist/cjs/pages/builder.js

@@ -14,7 +14,7 @@ var ImageToLayout = require('../components/image-to-layout/ImageToLayout.js');
 var AddSectionImageToLayout = require('../components/image-to-layout/AddSectionImageToLayout.js');
 var Toolbar = require('../components/builder/Toolbar.js');
 
-const BuilderPage = ({ components, seo, themeStyle, fontStyle, sectionData, pageType, editorImageToLayout, isThemeSectionEditor })=>{
+const BuilderPage = ({ components, seo, themeStyle, fontStyle, sectionData, pageType, editorImageToLayout, isThemeSectionEditor, hiddenToolbar })=>{
     const [loadSuccess, setLoadSuccess] = react.useState(false);
     const initState = react.useMemo(()=>({
             ROOT: {
@@ -50,48 +50,50 @@ const BuilderPage = ({ components, seo, themeStyle, fontStyle, sectionData, page
                     })
                 ]
             }),
-            /*#__PURE__*/ jsxRuntime.jsx(core.BuilderComponentProvider, {
-                components: components,
-                children: /*#__PURE__*/ jsxRuntime.jsx(core.SectionProvider, {
-                    data: sectionData,
-                    children: /*#__PURE__*/ jsxRuntime.jsxs(core.BuilderPreviewProvider, {
-                        state: initState,
-                        isThemeSectionEditor: isThemeSectionEditor,
-                        children: [
-                            /*#__PURE__*/ jsxRuntime.jsx(Toolbox.default, {}),
-                            /*#__PURE__*/ jsxRuntime.jsx(Toolbar.default, {}),
-                            /*#__PURE__*/ jsxRuntime.jsx(PopupManager.default, {}),
-                            loadSuccess && /*#__PURE__*/ jsxRuntime.jsxs("div", {
-                                className: "builder z-1 relative",
-                                children: [
-                                    isThemeSectionEditor ? /*#__PURE__*/ jsxRuntime.jsx("div", {
-                                        className: "h-[40px] bg-[#f4f4f4]"
-                                    }) : /*#__PURE__*/ jsxRuntime.jsx(Header.default, {}),
-                                    /*#__PURE__*/ jsxRuntime.jsx("div", {
-                                        id: "storefront",
-                                        className: isThemeSectionEditor ? 'theme-section-editor' : '',
-                                        children: pageType === 'GP_COLLECTION' ? /*#__PURE__*/ jsxRuntime.jsx(CollectionGlobalProvider.default, {
-                                            children: /*#__PURE__*/ jsxRuntime.jsx(core.RenderPreview, {
+            /*#__PURE__*/ jsxRuntime.jsx(core.PageProvider, {
+                children: /*#__PURE__*/ jsxRuntime.jsx(core.BuilderComponentProvider, {
+                    components: components,
+                    children: /*#__PURE__*/ jsxRuntime.jsx(core.SectionProvider, {
+                        data: sectionData,
+                        children: /*#__PURE__*/ jsxRuntime.jsxs(core.BuilderPreviewProvider, {
+                            state: initState,
+                            isThemeSectionEditor: isThemeSectionEditor,
+                            children: [
+                                /*#__PURE__*/ jsxRuntime.jsx(Toolbox.default, {}),
+                                !hiddenToolbar && /*#__PURE__*/ jsxRuntime.jsx(Toolbar.default, {}),
+                                /*#__PURE__*/ jsxRuntime.jsx(PopupManager.default, {}),
+                                loadSuccess && /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                                    className: "builder z-1 relative",
+                                    children: [
+                                        !hiddenToolbar && (isThemeSectionEditor ? /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                            className: "h-[40px] bg-[#f4f4f4]"
+                                        }) : /*#__PURE__*/ jsxRuntime.jsx(Header.default, {})),
+                                        /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                            id: "storefront",
+                                            className: isThemeSectionEditor ? 'theme-section-editor' : '',
+                                            children: pageType === 'GP_COLLECTION' ? /*#__PURE__*/ jsxRuntime.jsx(CollectionGlobalProvider.default, {
+                                                children: /*#__PURE__*/ jsxRuntime.jsx(core.RenderPreview, {
+                                                    uid: "ROOT"
+                                                })
+                                            }) : /*#__PURE__*/ jsxRuntime.jsx(core.RenderPreview, {
                                                 uid: "ROOT"
                                             })
-                                        }) : /*#__PURE__*/ jsxRuntime.jsx(core.RenderPreview, {
-                                            uid: "ROOT"
-                                        })
-                                    }),
-                                    /*#__PURE__*/ jsxRuntime.jsx(ImageToLayout.default, {
-                                        editorImageToLayout: editorImageToLayout || false
-                                    }),
-                                    /*#__PURE__*/ jsxRuntime.jsx(AddSectionImageToLayout.default, {
-                                        editorImageToLayout: editorImageToLayout || false
-                                    }),
-                                    /*#__PURE__*/ jsxRuntime.jsx("div", {
-                                        id: "visual-content"
-                                    }),
-                                    !isThemeSectionEditor && /*#__PURE__*/ jsxRuntime.jsx(Footer.default, {})
-                                ]
-                            })
-                        ]
-                    }, "preview")
+                                        }),
+                                        /*#__PURE__*/ jsxRuntime.jsx(ImageToLayout.default, {
+                                            editorImageToLayout: editorImageToLayout || false
+                                        }),
+                                        /*#__PURE__*/ jsxRuntime.jsx(AddSectionImageToLayout.default, {
+                                            editorImageToLayout: editorImageToLayout || false
+                                        }),
+                                        /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                            id: "visual-content"
+                                        }),
+                                        !isThemeSectionEditor && !hiddenToolbar && /*#__PURE__*/ jsxRuntime.jsx(Footer.default, {})
+                                    ]
+                                })
+                            ]
+                        }, "preview")
+                    })
                 })
             })
         ]

package/dist/cjs/pages/collection-detail.js

@@ -40,16 +40,18 @@ const CollectionDetailPage = ({ seo, components, builderData, sectionData, theme
                     })
                 ]
             }),
-            /*#__PURE__*/ jsxRuntime.jsx(core.BuilderComponentProvider, {
-                components: components,
-                children: /*#__PURE__*/ jsxRuntime.jsx(core.SectionProvider, {
-                    data: sectionData,
-                    children: /*#__PURE__*/ jsxRuntime.jsx(CollectionProvider, {
-                        collection: collection,
-                        children: builderData && /*#__PURE__*/ jsxRuntime.jsx(core.BuilderProvider, {
-                            state: builderData,
-                            children: /*#__PURE__*/ jsxRuntime.jsx(core.Render, {
-                                uid: "ROOT"
+            /*#__PURE__*/ jsxRuntime.jsx(core.PageProvider, {
+                children: /*#__PURE__*/ jsxRuntime.jsx(core.BuilderComponentProvider, {
+                    components: components,
+                    children: /*#__PURE__*/ jsxRuntime.jsx(core.SectionProvider, {
+                        data: sectionData,
+                        children: /*#__PURE__*/ jsxRuntime.jsx(CollectionProvider, {
+                            collection: collection,
+                            children: builderData && /*#__PURE__*/ jsxRuntime.jsx(core.BuilderProvider, {
+                                state: builderData,
+                                children: /*#__PURE__*/ jsxRuntime.jsx(core.Render, {
+                                    uid: "ROOT"
+                                })
                             })
                         })
                     })

package/dist/cjs/pages/product-detail.js

@@ -40,23 +40,25 @@ const ProductDetailPage = ({ themeStyle, fontStyle, seo, product, components, bu
                     })
                 ]
             }),
-            /*#__PURE__*/ jsxRuntime.jsx(core.BuilderComponentProvider, {
-                components: components,
-                children: /*#__PURE__*/ jsxRuntime.jsx(core.SectionProvider, {
-                    data: sectionData,
-                    children: /*#__PURE__*/ jsxRuntime.jsxs(ProductProvider, {
-                        product: product,
-                        children: [
-                            builderData && /*#__PURE__*/ jsxRuntime.jsx(core.BuilderProvider, {
-                                state: builderData,
-                                children: /*#__PURE__*/ jsxRuntime.jsx(core.Render, {
-                                    uid: "ROOT"
+            /*#__PURE__*/ jsxRuntime.jsx(core.PageProvider, {
+                children: /*#__PURE__*/ jsxRuntime.jsx(core.BuilderComponentProvider, {
+                    components: components,
+                    children: /*#__PURE__*/ jsxRuntime.jsx(core.SectionProvider, {
+                        data: sectionData,
+                        children: /*#__PURE__*/ jsxRuntime.jsxs(ProductProvider, {
+                            product: product,
+                            children: [
+                                builderData && /*#__PURE__*/ jsxRuntime.jsx(core.BuilderProvider, {
+                                    state: builderData,
+                                    children: /*#__PURE__*/ jsxRuntime.jsx(core.Render, {
+                                        uid: "ROOT"
+                                    })
+                                }),
+                                /*#__PURE__*/ jsxRuntime.jsx(core.AddOn, {
+                                    name: "sticky-add-to-cart"
                                 })
-                            }),
-                            /*#__PURE__*/ jsxRuntime.jsx(core.AddOn, {
-                                name: "sticky-add-to-cart"
-                            })
-                        ]
+                            ]
+                        })
                     })
                 })
             })