@gem-sdk/pages 1.22.31-staging.1 → 1.23.0-moon.57

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,12 +8,12 @@ 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);
@@ -25,15 +25,68 @@ const Toolbox = ()=>{
     const addSection = useSectionStore((s)=>s.addSection);
     const changeSwatches = useShopStore((s)=>s.changeSwatches);
     const changeLayoutSettings = useShopStore((s)=>s.changeLayoutSettings);
+    const changeCreateThemeSectionCount = useShopStore((s)=>s.changeCreateThemeSectionCount);
+    const changeShopPlan = useShopStore((s)=>s.changeShopPlan);
     const clearModal = useModalStore((s)=>s.clearModal);
     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 == 'google') {
+                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\//, {
@@ -69,22 +122,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 {
@@ -217,25 +256,40 @@ const Toolbox = ()=>{
     }, [
         changeLayoutSettings
     ]);
+    const onUpdateCreateThemeSectionCount = useCallback((e)=>{
+        const count = e.detail;
+        if (!count) return;
+        changeCreateThemeSectionCount(count);
+    }, [
+        changeCreateThemeSectionCount
+    ]);
+    const onUpdateShopPlan = useCallback((e)=>{
+        const shopPlan = e.detail;
+        if (!shopPlan) return;
+        changeShopPlan(shopPlan);
+    }, [
+        changeShopPlan
+    ]);
+    const onUpdateDynamicProduct = useCallback((e)=>{
+        const product = e.detail;
+        if (!product) return;
+        setDynamicProduct(product);
+    }, [
+        setDynamicProduct
+    ]);
+    const onUpdateDynamicCollection = useCallback((e)=>{
+        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);
         }
     }, [
-        customFontUrl
+        fonts
     ]);
     useEffect(()=>{
         window.addEventListener('update-shop-info', onChangeShopInfo);
@@ -249,6 +303,10 @@ const Toolbox = ()=>{
         window.addEventListener('set-global-style', onChangeGlobalStyle);
         window.addEventListener('update-global-swatches-data', onChangeSwatchesData);
         window.addEventListener('on-off-header-footer', onChangeLayoutSettingData);
+        window.addEventListener('update-create-theme-section-count', onUpdateCreateThemeSectionCount);
+        window.addEventListener('update-shop-plan', onUpdateShopPlan);
+        window.addEventListener('set-dynamic-product', onUpdateDynamicProduct);
+        window.addEventListener('set-dynamic-collection', onUpdateDynamicCollection);
         return ()=>{
             window.removeEventListener('update-shop-info', onChangeShopInfo);
             window.removeEventListener('revalidate-query', onRevalidateQuery);
@@ -260,9 +318,14 @@ const Toolbox = ()=>{
             window.removeEventListener('set-global-style', onChangeGlobalStyle);
             window.removeEventListener('update-global-swatches-data', onChangeSwatchesData);
             window.removeEventListener('on-off-header-footer', onChangeLayoutSettingData);
+            window.removeEventListener('update-create-theme-section-count', onUpdateCreateThemeSectionCount);
+            window.removeEventListener('update-shop-plan', onUpdateShopPlan);
+            window.removeEventListener('set-dynamic-product', onUpdateDynamicProduct);
+            window.removeEventListener('set-dynamic-collection', onUpdateDynamicCollection);
         };
     }, [
         onAddEntity,
+        onUpdateShopPlan,
         onForceUpdateEntityProps,
         onUpdateEntityProp,
         onInitBuilder,
@@ -272,7 +335,10 @@ const Toolbox = ()=>{
         onChangeSwatchesData,
         onRevalidateQuery,
         onChangeShopInfo,
-        onChangeLayoutSettingData
+        onChangeLayoutSettingData,
+        onUpdateCreateThemeSectionCount,
+        onUpdateDynamicProduct,
+        onUpdateDynamicCollection
     ]);
     return /*#__PURE__*/ jsx("div", {
         className: "toolbox"

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/helpers/gen-fonts.js

@@ -34,11 +34,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';
@@ -10,8 +10,9 @@ import CollectionGlobalProvider from './CollectionGlobalProvider.js';
 import PopupManager from '../components/builder/PopupManager.js';
 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 })=>{
+const BuilderPage = ({ components, seo, themeStyle, fontStyle, sectionData, pageType, editorImageToLayout, isThemeSectionEditor })=>{
     const [loadSuccess, setLoadSuccess] = useState(false);
     const initState = useMemo(()=>({
             ROOT: {
@@ -47,43 +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,
-                        children: [
-                            /*#__PURE__*/ jsx(Toolbox, {}),
-                            /*#__PURE__*/ jsx(PopupManager, {}),
-                            loadSuccess && /*#__PURE__*/ jsxs("div", {
-                                className: "builder z-1 relative",
-                                children: [
-                                    /*#__PURE__*/ jsx(Header, {}),
-                                    /*#__PURE__*/ jsx("div", {
-                                        id: "storefront",
-                                        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, {}),
+                                /*#__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, {
+                                                    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"
-                                    }),
-                                    /*#__PURE__*/ jsx(Footer, {})
-                                ]
-                            })
-                        ]
-                    }, "preview")
+                                        }),
+                                        /*#__PURE__*/ jsx(ImageToLayout, {
+                                            editorImageToLayout: editorImageToLayout || false
+                                        }),
+                                        /*#__PURE__*/ jsx(AddSectionImageToLayout, {
+                                            editorImageToLayout: editorImageToLayout || false
+                                        }),
+                                        /*#__PURE__*/ jsx("div", {
+                                            id: "visual-content"
+                                        }),
+                                        !isThemeSectionEditor && /*#__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"
+                                })
                             })
                         })
                     })

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

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { BuilderComponentProvider, SectionProvider, BuilderProvider, Render, AddOn } from '@gem-sdk/core';
+import { PageProvider, BuilderComponentProvider, SectionProvider, BuilderProvider, Render, AddOn } from '@gem-sdk/core';
 import { NextSeo } from 'next-seo';
 import dynamic from 'next/dynamic';
 import Head from 'next/head';
@@ -36,23 +36,25 @@ const ProductDetailPage = ({ themeStyle, fontStyle, seo, product, components, bu
                     })
                 ]
             }),
-            /*#__PURE__*/ jsx(BuilderComponentProvider, {
-                components: components,
-                children: /*#__PURE__*/ jsx(SectionProvider, {
-                    data: sectionData,
-                    children: /*#__PURE__*/ jsxs(ProductProvider, {
-                        product: product,
-                        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__*/ jsxs(ProductProvider, {
+                            product: product,
+                            children: [
+                                builderData && /*#__PURE__*/ jsx(BuilderProvider, {
+                                    state: builderData,
+                                    children: /*#__PURE__*/ jsx(Render, {
+                                        uid: "ROOT"
+                                    })
+                                }),
+                                /*#__PURE__*/ jsx(AddOn, {
+                                    name: "sticky-add-to-cart"
                                 })
-                            }),
-                            /*#__PURE__*/ jsx(AddOn, {
-                                name: "sticky-add-to-cart"
-                            })
-                        ]
+                            ]
+                        })
                     })
                 })
             })

package/dist/esm/pages/static-v2.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 Head from 'next/head';
 import { useRouter } from 'next/router';
@@ -59,18 +59,20 @@ const StaticPageV2 = ({ components, builderData, sectionData, seo, themeStyle, f
                         }, fontStyle))
                 ]
             }),
-            /*#__PURE__*/ jsx(BuilderComponentProvider, {
-                components: components,
-                children: /*#__PURE__*/ jsx(SectionProvider, {
-                    data: sectionData,
-                    children: builderData?.map((builder)=>/*#__PURE__*/ jsx(BuilderProvider, {
-                            state: builder.data,
-                            lazy: builder.lazy,
-                            priority: builder.priority,
-                            children: /*#__PURE__*/ jsx(Render, {
-                                uid: builder.uid
-                            })
-                        }, builder.uid))
+            /*#__PURE__*/ jsx(PageProvider, {
+                children: /*#__PURE__*/ jsx(BuilderComponentProvider, {
+                    components: components,
+                    children: /*#__PURE__*/ jsx(SectionProvider, {
+                        data: sectionData,
+                        children: builderData?.map((builder)=>/*#__PURE__*/ jsx(BuilderProvider, {
+                                state: builder.data,
+                                lazy: builder.lazy,
+                                priority: builder.priority,
+                                children: /*#__PURE__*/ jsx(Render, {
+                                    uid: builder.uid
+                                })
+                            }, builder.uid))
+                    })
                 })
             })
         ]

package/dist/esm/pages/static.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 Head from 'next/head';
 import { useRouter } from 'next/router';
@@ -48,17 +48,19 @@ const StaticPage = ({ components, builderData, sectionData, seo, themeStyle, fon
                     })
                 ]
             }),
-            /*#__PURE__*/ jsx(BuilderComponentProvider, {
-                components: components,
-                children: /*#__PURE__*/ jsx(SectionProvider, {
-                    data: sectionData,
-                    children: /*#__PURE__*/ jsx(Fragment, {
-                        children: builderData && /*#__PURE__*/ jsx(BuilderProvider, {
-                            state: builderData,
-                            children: /*#__PURE__*/ jsx(Render, {
-                                uid: "ROOT"
-                            })
-                        }, "body")
+            /*#__PURE__*/ jsx(PageProvider, {
+                children: /*#__PURE__*/ jsx(BuilderComponentProvider, {
+                    components: components,
+                    children: /*#__PURE__*/ jsx(SectionProvider, {
+                        data: sectionData,
+                        children: /*#__PURE__*/ jsx(Fragment, {
+                            children: builderData && /*#__PURE__*/ jsx(BuilderProvider, {
+                                state: builderData,
+                                children: /*#__PURE__*/ jsx(Render, {
+                                    uid: "ROOT"
+                                })
+                            }, "body")
+                        })
                     })
                 })
             })

package/dist/types/index.d.ts

@@ -146,6 +146,7 @@ type BuilderPageProps = {
     mode?: RenderMode;
     pageType: ShopType.PublishedThemePageType;
     editorImageToLayout?: boolean;
+    isThemeSectionEditor?: boolean;
 };
 declare const BuilderPage: React.FC<BuilderPageProps>;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gem-sdk/pages",
-  "version": "1.22.31-staging.1",
+  "version": "1.23.0-moon.57",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",
@@ -25,10 +25,10 @@
     "next-seo": "^6.0.0"
   },
   "devDependencies": {
-    "@gem-sdk/core": "1.22.31-staging.1",
-    "@gem-sdk/plugin-cookie-bar": "1.22.31-staging.1",
-    "@gem-sdk/plugin-quick-view": "1.22.31-staging.1",
-    "@gem-sdk/plugin-sticky-add-to-cart": "1.22.31-staging.1"
+    "@gem-sdk/core": "1.23.0-staging.55",
+    "@gem-sdk/plugin-cookie-bar": "1.23.0-staging.26",
+    "@gem-sdk/plugin-quick-view": "1.23.0-staging.26",
+    "@gem-sdk/plugin-sticky-add-to-cart": "1.23.0-staging.26"
   },
   "peerDependencies": {
     "next": ">=13"