@gem-sdk/pages 1.23.0-staging.27 → 1.23.0-staging.270

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

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { useMatchMutate, useShopStore, useBuilderPreviewStore, useSectionStore, useModalStore } from '@gem-sdk/core';
+import { useMatchMutate, useShopStore, usePageStore, useBuilderPreviewStore, useSectionStore, useModalStore } from '@gem-sdk/core';
 import { memo, useMemo, useCallback, useEffect } from 'react';
 import { getStorefrontApi } from '../../libs/get-storefront-api.js';
 import { createFontUrl } from '../../libs/google-fonts.js';
@@ -8,24 +8,23 @@ import { getFontsFromDataBuilder } from '../../libs/helpers/gen-fonts.js';
 import { shopifyCdnWithGoogleFonts } from '../../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 = useMatchMutate();
     const provider = useShopStore((s)=>s.provider);
     const changeStorefrontInfo = useShopStore((s)=>s.changeStorefrontInfo);
+    const setDynamicProduct = usePageStore((s)=>s.setDynamicProduct);
+    const setDynamicCollection = usePageStore((s)=>s.setDynamicCollection);
     const initState = useBuilderPreviewStore((s)=>s.initState);
     const state = useBuilderPreviewStore((s)=>s.state);
     const initNormalizeState = useBuilderPreviewStore((s)=>s.forceChangeState);
     const forceChangeItemProp = useBuilderPreviewStore((s)=>s.forceChangeItemProp);
     const changeItemPropByKey = useBuilderPreviewStore((s)=>s.changeItemPropByKey);
-    const setDynamicProduct = useBuilderPreviewStore((s)=>s.setDynamicProduct);
-    const setDynamicCollection = useBuilderPreviewStore((s)=>s.setDynamicCollection);
     const addItem = useBuilderPreviewStore((s)=>s.addItem);
     const moveItem = useBuilderPreviewStore((s)=>s.moveItem);
     const removeItem = useBuilderPreviewStore((s)=>s.removeItem);
     const addSection = useSectionStore((s)=>s.addSection);
     const changeSwatches = useShopStore((s)=>s.changeSwatches);
+    const updateItemName = useBuilderPreviewStore((s)=>s.updateItemName);
     const changeLayoutSettings = useShopStore((s)=>s.changeLayoutSettings);
     const changeCreateThemeSectionCount = useShopStore((s)=>s.changeCreateThemeSectionCount);
     const changeShopPlan = useShopStore((s)=>s.changeShopPlan);
@@ -33,11 +32,62 @@ const Toolbox = ()=>{
     const fonts = useMemo(()=>getFontsFromDataBuilder(state), [
         state
     ]);
-    const customFontUrl = useMemo(()=>{
-        return 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 = document.querySelectorAll(`.${className}`);
+        googleFonts.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 = 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 = useCallback(()=>{
         matchMutate(/query\//, {
@@ -73,22 +123,8 @@ const Toolbox = ()=>{
                     }
                     return item;
                 });
-                const fontUrl = 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 {
@@ -222,52 +258,54 @@ const Toolbox = ()=>{
         changeLayoutSettings
     ]);
     const onUpdateCreateThemeSectionCount = useCallback((e)=>{
-        const detail = e.detail;
-        if (!detail) return;
-        changeCreateThemeSectionCount(detail);
+        const count = e.detail;
+        if (!count) return;
+        changeCreateThemeSectionCount(count);
     }, [
         changeCreateThemeSectionCount
     ]);
     const onUpdateShopPlan = useCallback((e)=>{
-        const detail = e.detail;
-        if (!detail) return;
-        changeShopPlan(detail);
+        const shopPlan = e.detail;
+        if (!shopPlan) return;
+        changeShopPlan(shopPlan);
     }, [
         changeShopPlan
     ]);
     const onUpdateDynamicProduct = useCallback((e)=>{
-        const detail = e.detail;
-        if (!detail) return;
-        setDynamicProduct(detail);
+        const product = e.detail;
+        if (!product) return;
+        setDynamicProduct(product);
     }, [
         setDynamicProduct
     ]);
     const onUpdateDynamicCollection = useCallback((e)=>{
-        const detail = e.detail;
-        if (!detail) return;
-        setDynamicCollection(detail);
+        const collection = e.detail;
+        if (!collection) return;
+        setDynamicCollection(collection);
     }, [
         setDynamicCollection
     ]);
     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 = useCallback((e)=>{
+        const detail = e.detail;
+        if (detail.uid) {
+            updateItemName(detail.uid, detail.name || '');
         }
     }, [
-        customFontUrl
+        updateItemName
+    ]);
+    useEffect(()=>{
+        if (fonts) {
+            setFontsToHead('google-font-element', fonts);
+        }
+    }, [
+        fonts
     ]);
     useEffect(()=>{
         window.addEventListener('update-shop-info', onChangeShopInfo);
@@ -285,6 +323,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);
@@ -300,6 +339,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,
@@ -316,7 +356,8 @@ const Toolbox = ()=>{
         onChangeLayoutSettingData,
         onUpdateCreateThemeSectionCount,
         onUpdateDynamicProduct,
-        onUpdateDynamicCollection
+        onUpdateDynamicCollection,
+        onUpdateItemName
     ]);
     return /*#__PURE__*/ jsx("div", {
         className: "toolbox"

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

@@ -0,0 +1,106 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { memo } from 'react';
+
+const Onboarding = ({ enable, position, onCloseOnboarding })=>{
+    const closeOnboarding = ()=>{
+        onCloseOnboarding();
+    };
+    const videoSrc = 'https://ucarecdn.com/de5fd2eb-4525-45a7-ad13-53960dac225e/';
+    const Video = ()=>{
+        return /*#__PURE__*/ jsxs("video", {
+            width: "100%",
+            className: "w-full",
+            loop: true,
+            muted: true,
+            autoPlay: true,
+            playsInline: true,
+            children: [
+                /*#__PURE__*/ jsx("source", {
+                    src: videoSrc,
+                    type: "video/mp4"
+                }),
+                "Sorry, your browser doesn‘t support embedded videos."
+            ]
+        });
+    };
+    const MemoVideo = /*#__PURE__*/ memo(Video);
+    return /*#__PURE__*/ jsx("div", {
+        "data-toolbar-onboarding": true,
+        "data-toolbar-onboarding-position": position,
+        children: enable && /*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                /*#__PURE__*/ jsx("span", {
+                    "data-icon": true,
+                    "data-position": position,
+                    children: position === 'bottom' ? /*#__PURE__*/ jsx("svg", {
+                        width: "8",
+                        height: "4",
+                        viewBox: "0 0 8 4",
+                        fill: "none",
+                        xmlns: "http://www.w3.org/2000/svg",
+                        children: /*#__PURE__*/ jsx("path", {
+                            d: "M-1.74846e-07 4L4 -1.74846e-07L8 4L-1.74846e-07 4Z",
+                            fill: "white"
+                        })
+                    }) : /*#__PURE__*/ jsx("svg", {
+                        width: "8",
+                        height: "4",
+                        viewBox: "0 0 8 4",
+                        fill: "none",
+                        xmlns: "http://www.w3.org/2000/svg",
+                        children: /*#__PURE__*/ jsx("path", {
+                            d: "M8 3.33818e-07L4 4L4.76995e-08 7.15256e-07L8 3.33818e-07Z",
+                            fill: "white"
+                        })
+                    })
+                }),
+                /*#__PURE__*/ jsxs("div", {
+                    "data-onboarding-wrapper": true,
+                    children: [
+                        /*#__PURE__*/ jsx("button", {
+                            "data-close": true,
+                            type: "button",
+                            onClick: closeOnboarding,
+                            children: /*#__PURE__*/ jsxs("svg", {
+                                width: "32",
+                                height: "32",
+                                viewBox: "0 0 32 32",
+                                fill: "none",
+                                xmlns: "http://www.w3.org/2000/svg",
+                                children: [
+                                    /*#__PURE__*/ 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__*/ 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__*/ jsx(MemoVideo, {}),
+                        /*#__PURE__*/ jsxs("div", {
+                            "data-content": true,
+                            children: [
+                                /*#__PURE__*/ jsx("h3", {
+                                    children: "New way to select parent element"
+                                }),
+                                /*#__PURE__*/ jsx("p", {
+                                    children: "Select parent from here in case you can‘t find yours at times."
+                                })
+                            ]
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+};
+var Onboarding$1 = /*#__PURE__*/ memo(Onboarding);
+
+export { Onboarding$1 as default };

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

@@ -33,11 +33,6 @@ const AddSectionImageToLayout = ({ editorImageToLayout })=>{
     const totalSection = useBuilderPreviewStore((state)=>state.state.ROOT.childrens?.length);
     const [link, setLink] = useState('');
     const [isInput, setIsInput] = useState(false);
-    const onClick = (index)=>{
-        if (index === 1) {
-            setIsInput(true);
-        }
-    };
     useEffect(()=>{
         if (!isInput || totalSection === 0) {
             setLink('');
@@ -78,11 +73,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__*/ 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__*/ jsxs("div", {

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

@@ -1,6 +1,6 @@
 import { PublishedThemePagesDocument, StorePropertyDocument } from '@gem-sdk/core';
 import { ShopMetaDocument } from '@gem-sdk/adapter-shopify';
-import { getFontFromGlobalStyle } from '../google-fonts.js';
+import { getFontStyleFromPageTemplate, getFontFromGlobalStyle } from '../google-fonts.js';
 import { genCSS } from '../helpers/gen-css.js';
 import { generateManifest } from '../helpers/generate-manifres.js';
 import { getFallbackV2 } from '../helpers/get-fallback.js';
@@ -33,7 +33,8 @@ const getHomePagePropsV2 = (fetcher, shopifyFetcher)=>async ()=>{
                 throw new Error(`No data builder found for Home page`);
             }
             const homeTemplate = parseBuilderTemplateV2(dataBuilder);
-            const [fontStyle, fallback] = await Promise.all([
+            const [elementFontStyle, fontStyle, fallback] = await Promise.all([
+                getFontStyleFromPageTemplate(homeTemplate),
                 getFontFromGlobalStyle(dataBuilder?.pageStyle?.data),
                 getFallbackV2(fetcher, homeTemplate)
             ]);
@@ -113,6 +114,7 @@ const getHomePagePropsV2 = (fetcher, shopifyFetcher)=>async ()=>{
             return serializableJson({
                 themeStyle: genCSS(dataBuilder?.pageStyle?.data, mobileOnly),
                 fontStyle,
+                elementFontStyle,
                 builderData: homeTemplate,
                 swr: {
                     fallback

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

@@ -1,7 +1,7 @@
 import { PreviewPageDocument, StorePropertyDocument } from '@gem-sdk/core';
 import { ShopMetaDocument } from '@gem-sdk/adapter-shopify';
 import { captureException } from '@sentry/nextjs';
-import { getFontFromGlobalStyle } from '../google-fonts.js';
+import { getFontStyleFromPageTemplate, getFontFromGlobalStyle } from '../google-fonts.js';
 import { genCSS } from '../helpers/gen-css.js';
 import { generateManifest } from '../helpers/generate-manifres.js';
 import { getFallbackV2 } from '../helpers/get-fallback.js';
@@ -36,7 +36,8 @@ const getStaticPagePropsPreview = (fetcher, shopifyFetcher)=>async (slug)=>{
                 throw new Error(`No data builder found for slug: /preview/${slug}`);
             }
             const pageTemplate = parseBuilderTemplateV2(dataBuilder);
-            const [fontStyle, fallback] = await Promise.all([
+            const [elementFontStyle, fontStyle, fallback] = await Promise.all([
+                getFontStyleFromPageTemplate(pageTemplate),
                 getFontFromGlobalStyle(dataBuilder?.pageStyle?.data),
                 getFallbackV2(fetcher, pageTemplate)
             ]);
@@ -118,6 +119,7 @@ const getStaticPagePropsPreview = (fetcher, shopifyFetcher)=>async (slug)=>{
             return serializableJson({
                 themeStyle: genCSS(dataBuilder?.pageStyle?.data, mobileOnly),
                 fontStyle,
+                elementFontStyle,
                 builderData: pageTemplate,
                 pageType,
                 moneyFormat: shopMeta?.shop.moneyFormat ?? null,

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

@@ -7,7 +7,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/esm/libs/helpers/gen-fonts.js

@@ -17,7 +17,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){
@@ -34,11 +39,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/esm/pages/builder.js

@@ -1,5 +1,5 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { BuilderComponentProvider, SectionProvider, BuilderPreviewProvider, RenderPreview } from '@gem-sdk/core';
+import { PageProvider, BuilderComponentProvider, SectionProvider, BuilderPreviewProvider, RenderPreview } from '@gem-sdk/core';
 import { NextSeo } from 'next-seo';
 import Head from 'next/head';
 import { useState, useMemo, useEffect } from 'react';
@@ -12,7 +12,7 @@ import ImageToLayout from '../components/image-to-layout/ImageToLayout.js';
 import AddSectionImageToLayout from '../components/image-to-layout/AddSectionImageToLayout.js';
 import Toolbar from '../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] = useState(false);
     const initState = useMemo(()=>({
             ROOT: {
@@ -48,48 +48,50 @@ const BuilderPage = ({ components, seo, themeStyle, fontStyle, sectionData, page
                     })
                 ]
             }),
-            /*#__PURE__*/ jsx(BuilderComponentProvider, {
-                components: components,
-                children: /*#__PURE__*/ jsx(SectionProvider, {
-                    data: sectionData,
-                    children: /*#__PURE__*/ jsxs(BuilderPreviewProvider, {
-                        state: initState,
-                        isThemeSectionEditor: isThemeSectionEditor,
-                        children: [
-                            /*#__PURE__*/ jsx(Toolbox, {}),
-                            /*#__PURE__*/ jsx(Toolbar, {}),
-                            /*#__PURE__*/ jsx(PopupManager, {}),
-                            loadSuccess && /*#__PURE__*/ jsxs("div", {
-                                className: "builder z-1 relative",
-                                children: [
-                                    isThemeSectionEditor ? /*#__PURE__*/ jsx("div", {
-                                        className: "h-[40px] bg-[#f4f4f4]"
-                                    }) : /*#__PURE__*/ jsx(Header, {}),
-                                    /*#__PURE__*/ jsx("div", {
-                                        id: "storefront",
-                                        className: isThemeSectionEditor ? 'theme-section-editor' : '',
-                                        children: pageType === 'GP_COLLECTION' ? /*#__PURE__*/ jsx(CollectionGlobalProvider, {
-                                            children: /*#__PURE__*/ jsx(RenderPreview, {
+            /*#__PURE__*/ jsx(PageProvider, {
+                children: /*#__PURE__*/ jsx(BuilderComponentProvider, {
+                    components: components,
+                    children: /*#__PURE__*/ jsx(SectionProvider, {
+                        data: sectionData,
+                        children: /*#__PURE__*/ jsxs(BuilderPreviewProvider, {
+                            state: initState,
+                            isThemeSectionEditor: isThemeSectionEditor,
+                            children: [
+                                /*#__PURE__*/ jsx(Toolbox, {}),
+                                !hiddenToolbar && /*#__PURE__*/ jsx(Toolbar, {}),
+                                /*#__PURE__*/ jsx(PopupManager, {}),
+                                loadSuccess && /*#__PURE__*/ jsxs("div", {
+                                    className: "builder z-1 relative",
+                                    children: [
+                                        !hiddenToolbar && (isThemeSectionEditor ? /*#__PURE__*/ jsx("div", {
+                                            className: "h-[40px] bg-[#f4f4f4]"
+                                        }) : /*#__PURE__*/ jsx(Header, {})),
+                                        /*#__PURE__*/ jsx("div", {
+                                            id: "storefront",
+                                            className: isThemeSectionEditor ? 'theme-section-editor' : '',
+                                            children: pageType === 'GP_COLLECTION' ? /*#__PURE__*/ jsx(CollectionGlobalProvider, {
+                                                children: /*#__PURE__*/ jsx(RenderPreview, {
+                                                    uid: "ROOT"
+                                                })
+                                            }) : /*#__PURE__*/ jsx(RenderPreview, {
                                                 uid: "ROOT"
                                             })
-                                        }) : /*#__PURE__*/ jsx(RenderPreview, {
-                                            uid: "ROOT"
-                                        })
-                                    }),
-                                    /*#__PURE__*/ jsx(ImageToLayout, {
-                                        editorImageToLayout: editorImageToLayout || false
-                                    }),
-                                    /*#__PURE__*/ jsx(AddSectionImageToLayout, {
-                                        editorImageToLayout: editorImageToLayout || false
-                                    }),
-                                    /*#__PURE__*/ jsx("div", {
-                                        id: "visual-content"
-                                    }),
-                                    !isThemeSectionEditor && /*#__PURE__*/ jsx(Footer, {})
-                                ]
-                            })
-                        ]
-                    }, "preview")
+                                        }),
+                                        /*#__PURE__*/ jsx(ImageToLayout, {
+                                            editorImageToLayout: editorImageToLayout || false
+                                        }),
+                                        /*#__PURE__*/ jsx(AddSectionImageToLayout, {
+                                            editorImageToLayout: editorImageToLayout || false
+                                        }),
+                                        /*#__PURE__*/ jsx("div", {
+                                            id: "visual-content"
+                                        }),
+                                        !isThemeSectionEditor && !hiddenToolbar && /*#__PURE__*/ jsx(Footer, {})
+                                    ]
+                                })
+                            ]
+                        }, "preview")
+                    })
                 })
             })
         ]

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

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { BuilderComponentProvider, SectionProvider, BuilderProvider, Render } from '@gem-sdk/core';
+import { PageProvider, BuilderComponentProvider, SectionProvider, BuilderProvider, Render } from '@gem-sdk/core';
 import { NextSeo } from 'next-seo';
 import dynamic from 'next/dynamic';
 import Head from 'next/head';
@@ -36,16 +36,18 @@ const CollectionDetailPage = ({ seo, components, builderData, sectionData, theme
                     })
                 ]
             }),
-            /*#__PURE__*/ jsx(BuilderComponentProvider, {
-                components: components,
-                children: /*#__PURE__*/ jsx(SectionProvider, {
-                    data: sectionData,
-                    children: /*#__PURE__*/ jsx(CollectionProvider, {
-                        collection: collection,
-                        children: builderData && /*#__PURE__*/ jsx(BuilderProvider, {
-                            state: builderData,
-                            children: /*#__PURE__*/ jsx(Render, {
-                                uid: "ROOT"
+            /*#__PURE__*/ jsx(PageProvider, {
+                children: /*#__PURE__*/ jsx(BuilderComponentProvider, {
+                    components: components,
+                    children: /*#__PURE__*/ jsx(SectionProvider, {
+                        data: sectionData,
+                        children: /*#__PURE__*/ jsx(CollectionProvider, {
+                            collection: collection,
+                            children: builderData && /*#__PURE__*/ jsx(BuilderProvider, {
+                                state: builderData,
+                                children: /*#__PURE__*/ jsx(Render, {
+                                    uid: "ROOT"
+                                })
                             })
                         })
                     })