@gem-sdk/pages 1.53.0-dev.0 → 1.53.0-dev.139

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

@@ -0,0 +1,24 @@
+import { jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { usePageStore, RenderPreview } from '@gem-sdk/core';
+import CollectionGlobalProvider from '../../pages/CollectionGlobalProvider.js';
+
+const Body = ({ pageType, isThemeSectionEditor })=>{
+    const interactionData = usePageStore((s)=>s.interactionData);
+    const isInteractionSelectModeClass = useMemo(()=>interactionData?.isSelectOnPage ? 'interaction-select-mode' : '', [
+        interactionData?.isSelectOnPage
+    ]);
+    return /*#__PURE__*/ jsx("div", {
+        id: "storefront",
+        className: `${isThemeSectionEditor ? 'theme-section-editor' : ''} ${pageType === 'POST_PURCHASE' ? 'post-purchase-page' : ''} ${isInteractionSelectModeClass}`,
+        children: pageType === 'GP_COLLECTION' ? /*#__PURE__*/ jsx(CollectionGlobalProvider, {
+            children: /*#__PURE__*/ jsx(RenderPreview, {
+                uid: "ROOT"
+            })
+        }) : /*#__PURE__*/ jsx(RenderPreview, {
+            uid: "ROOT"
+        })
+    });
+};
+
+export { Body as default };

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

@@ -21,7 +21,6 @@ const Header = (props)=>{
     const isSelectOnPage = usePageStore((s)=>s.interactionData?.isSelectOnPage);
     const activeHeader = layoutSetting?.showHeader || isOriginTemplate;
     const headerColor = activeHeader ? HEADER_ON_COLOR : HEADER_OFF_COLOR;
-    console.log('isSelectOnPage', isSelectOnPage);
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
             /*#__PURE__*/ jsx(Devices, {}),

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

@@ -1,61 +1,182 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { usePageStore, useInteraction } from '@gem-sdk/core';
+import { useSelectModeInteraction } from '../../libs/hooks/useSelectModeInteraction.js';
+import { useState, useRef, useCallback, useEffect, useMemo } from 'react';
 
 const InteractionSelectOnPageHeader = ()=>{
     const selectType = usePageStore((s)=>s.interactionData?.selectType);
+    const settingType = usePageStore((s)=>s.interactionData?.settingType);
     const setInteractionSelectType = usePageStore((s)=>s.setInteractionSelectType);
     const { closeSelectOnPage } = useInteraction();
+    const { changeSelectMode } = useSelectModeInteraction();
+    const [hoverOption, setHoverOption] = useState(null);
+    const [openDropdown, setOpenDropdown] = useState(false);
+    const popupRef = useRef(null);
+    const handleSetInteraction = (type)=>{
+        setOpenDropdown(false);
+        setInteractionSelectType(type);
+        changeSelectMode(type);
+        if (type == 'PAGE') closeSelectOnPage();
+    };
+    const handleClickOutside = useCallback((event)=>{
+        if (!openDropdown) return;
+        if (popupRef.current && !popupRef.current.contains(event.target)) {
+            setOpenDropdown(false);
+        }
+    }, [
+        openDropdown
+    ]);
+    useEffect(()=>{
+        document.addEventListener('mousedown', handleClickOutside);
+        return ()=>{
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [
+        handleClickOutside
+    ]);
+    const isShowOverlay = useMemo(()=>{
+        return hoverOption !== 'ELEMENT' && (selectType === 'PAGE' || selectType === 'ELEMENT' && hoverOption === 'PAGE');
+    }, [
+        hoverOption,
+        selectType
+    ]);
+    const title = useMemo(()=>{
+        const type = selectType === 'ELEMENT' ? 'an element' : 'entire page';
+        if (settingType === 'TRIGGER') return `Start with triggering  ${type}`;
+        return `Set ${selectType === 'ELEMENT' ? 'an element' : 'entire page'} as target`;
+    }, [
+        selectType,
+        settingType
+    ]);
+    const renderIconCheckSvg = ()=>{
+        return /*#__PURE__*/ jsx("div", {
+            className: "gp-w-[21px]",
+            children: /*#__PURE__*/ jsx("svg", {
+                width: "21",
+                height: "20",
+                viewBox: "0 0 21 20",
+                fill: "none",
+                xmlns: "http://www.w3.org/2000/svg",
+                children: /*#__PURE__*/ jsx("path", {
+                    "fill-rule": "evenodd",
+                    "clip-rule": "evenodd",
+                    d: "M16.3415 5.1766C16.5528 5.41207 16.5528 5.79383 16.3415 6.0293L8.45016 14.8234C8.34869 14.9365 8.21107 15 8.06757 15C7.92408 15 7.78645 14.9365 7.68499 14.8234L4.65846 11.4505C4.44717 11.215 4.44718 10.8333 4.65848 10.5978C4.86978 10.3623 5.21236 10.3623 5.42365 10.5978L8.06759 13.5443L15.5764 5.1766C15.7877 4.94113 16.1302 4.94113 16.3415 5.1766Z",
+                    fill: "#00C853"
+                })
+            })
+        });
+    };
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
-            /*#__PURE__*/ jsxs("header", {
-                className: "gp-flex gp-justify-between gp-items-center gp-h-10 gp-fixed gp-top-0 gp-left-0 gp-w-full gp-z-100 gp-bg-black gp-text-white",
-                children: [
-                    /*#__PURE__*/ jsx("div", {
-                        className: "gp-ml-4 gp-text-xs gp-mt-1",
-                        children: "Select mode enabled"
-                    }),
-                    /*#__PURE__*/ jsxs("section", {
-                        className: "gp-flex gp-bg-[#3C67FF]/[0.15] gp-items-center gp-h-full gp-rounded-b-lg gp-pt-1 gp-gap-1",
-                        children: [
-                            /*#__PURE__*/ jsx("button", {
-                                "data-interaction-mode": "element",
-                                onClick: ()=>setInteractionSelectType('element'),
-                                className: `gp-h-full gp-w-[444px] gp-items-center gp-justify-center gp-bg-[#333333] gp-text-[12px] gp-leading-5 gp-font-medium  gp-flex gp-rounded-t-[8px] ${selectType === 'element' ? 'gp-bg-[#3C67FF] gp-text-[#F9F9F9]' : 'gp-text-[#AAAAAA]'}`,
-                                style: {
-                                    cursor: "url('https://cdn.shopify.com/s/files/1/0858/3168/0279/files/gempages_502328832959710176-45eb24ff-a9ee-48ac-af8b-eac35e11918d.png?v=1724038301'), auto"
-                                },
-                                children: "Choose an element on page"
-                            }),
-                            /*#__PURE__*/ jsx("button", {
-                                "data-interaction-mode": "page",
-                                onClick: ()=>setInteractionSelectType('page'),
-                                className: `gp-h-full gp-w-[444px] gp-items-center gp-justify-center gp-bg-[#333333] gp-text-[12px] gp-leading-5 gp-font-medium  gp-flex gp-rounded-t-[8px] ${selectType === 'page' ? 'gp-bg-[#3C67FF] gp-text-[#F9F9F9]' : 'gp-text-[#AAAAAA]'}`,
-                                style: {
-                                    cursor: "url('https://cdn.shopify.com/s/files/1/0858/3168/0279/files/gempages_502328832959710176-45eb24ff-a9ee-48ac-af8b-eac35e11918d.png?v=1724038301'), auto"
-                                },
-                                children: "Use entire page"
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ jsx("button", {
-                        onClick: closeSelectOnPage,
-                        className: "gp-h-10 gp-w-10 gp-flex gp-items-center gp-justify-center gp-rounded-bl-lg",
-                        children: /*#__PURE__*/ jsx("svg", {
-                            width: "12",
-                            height: "12",
-                            viewBox: "0 0 12 12",
-                            fill: "none",
-                            xmlns: "http://www.w3.org/2000/svg",
-                            children: /*#__PURE__*/ jsx("path", {
-                                d: "M9.96967 11.0303C10.2626 11.3232 10.7374 11.3232 11.0303 11.0303C11.3232 10.7374 11.3232 10.2626 11.0303 9.96967L7.06066 6L11.0303 2.03033C11.3232 1.73744 11.3232 1.26256 11.0303 0.96967C10.7374 0.676777 10.2626 0.676777 9.96967 0.96967L6 4.93934L2.03033 0.96967C1.73744 0.676777 1.26256 0.676777 0.96967 0.96967C0.676777 1.26256 0.676777 1.73744 0.96967 2.03033L4.93934 6L0.96967 9.96967C0.676777 10.2626 0.676777 10.7374 0.96967 11.0303C1.26256 11.3232 1.73744 11.3232 2.03033 11.0303L6 7.06066L9.96967 11.0303Z",
-                                fill: "#F9F9F9"
-                            })
+            /*#__PURE__*/ jsx("header", {
+                className: "gp-flex gp-text-[12px] gp-justify-center gp-items-center gp-h-10 gp-fixed gp-top-0 gp-left-0 gp-w-full gp-z-[1000] gp-bg-[#151515] gp-text-white interaction-select-mode-header",
+                children: /*#__PURE__*/ jsxs("section", {
+                    className: "gp-flex gp-bg-[#151515]/[0.15] gp-items-center gp-h-full gp-rounded-b-lg gp-pt-1 gp-gap-2",
+                    children: [
+                        /*#__PURE__*/ jsxs("div", {
+                            className: "gp-relative",
+                            children: [
+                                /*#__PURE__*/ jsxs("button", {
+                                    className: `gp-h-full gp-w-[280px] gp-gap-2 gp-py-2 gp-px-4 gp-items-center gp-justify-center gp-leading-5 gp-font-medium  gp-flex gp-rounded-b-[8px] gp-bg-[#3C67FF] gp-text-[#F9F9F9]`,
+                                    onClick: ()=>setOpenDropdown((prev)=>!prev),
+                                    children: [
+                                        /*#__PURE__*/ jsx("p", {
+                                            className: "gp-grow",
+                                            children: title
+                                        }),
+                                        /*#__PURE__*/ jsx("div", {
+                                            className: "gp-w-[21px]",
+                                            children: /*#__PURE__*/ jsx("svg", {
+                                                width: "16",
+                                                height: "16",
+                                                viewBox: "0 0 16 16",
+                                                fill: "currentColor",
+                                                xmlns: "http://www.w3.org/2000/svg",
+                                                children: /*#__PURE__*/ jsx("path", {
+                                                    "fill-rule": "evenodd",
+                                                    "clip-rule": "evenodd",
+                                                    d: "M4.13017 6.11716C4.30374 5.96095 4.58515 5.96095 4.75871 6.11716L8 9.03431L11.2413 6.11716C11.4149 5.96095 11.6963 5.96095 11.8698 6.11716C12.0434 6.27337 12.0434 6.52663 11.8698 6.68284L8.31427 9.88284C8.1407 10.0391 7.8593 10.0391 7.68573 9.88284L4.13017 6.68284C3.95661 6.52663 3.95661 6.27337 4.13017 6.11716Z",
+                                                    fill: "currentColor"
+                                                })
+                                            })
+                                        })
+                                    ]
+                                }),
+                                openDropdown && /*#__PURE__*/ jsxs("div", {
+                                    ref: popupRef,
+                                    className: "gp-p-2 gp-flex gp-flex-col gp-absolute gp-top-[calc(100%_+_4px)] gp-w-[280px] gp-bg-[#151515] gp-rounded-xl gp-text-white",
+                                    children: [
+                                        /*#__PURE__*/ jsxs("div", {
+                                            className: "gp-p-2 gp-flex gp-gap-2 gp-cursor-pointer hover:gp-bg-[#3b3b3b] gp-rounded-lg",
+                                            "aria-hidden": true,
+                                            onClick: ()=>handleSetInteraction('ELEMENT'),
+                                            onMouseOver: ()=>setHoverOption('ELEMENT'),
+                                            onFocus: ()=>setHoverOption('ELEMENT'),
+                                            onMouseLeave: ()=>setHoverOption(null),
+                                            children: [
+                                                selectType === 'ELEMENT' ? renderIconCheckSvg() : /*#__PURE__*/ jsx("div", {
+                                                    className: "gp-w-[21px]",
+                                                    children: /*#__PURE__*/ jsx("svg", {
+                                                        width: "18",
+                                                        height: "18",
+                                                        viewBox: "0 0 18 18",
+                                                        fill: "none",
+                                                        xmlns: "http://www.w3.org/2000/svg",
+                                                        children: /*#__PURE__*/ jsx("path", {
+                                                            "fill-rule": "evenodd",
+                                                            "clip-rule": "evenodd",
+                                                            d: "M8.99983 0.351562C9.34501 0.351562 9.62483 0.631385 9.62483 0.976562V2.15278C12.923 2.45 15.5496 5.07654 15.8468 8.37476H17.0233C17.3684 8.37476 17.6483 8.65458 17.6483 8.99976C17.6483 9.34493 17.3684 9.62476 17.0233 9.62476H15.8468C15.5496 12.923 12.923 15.5495 9.62483 15.8467V17.0232C9.62483 17.3683 9.34501 17.6482 8.99983 17.6482C8.65465 17.6482 8.37483 17.3683 8.37483 17.0232V15.8467C5.07662 15.5495 2.45007 12.923 2.15286 9.62476H0.976562C0.631385 9.62476 0.351562 9.34493 0.351562 8.99976C0.351562 8.65458 0.631385 8.37476 0.976562 8.37476H2.15286C2.45007 5.07654 5.07662 2.45 8.37483 2.15278V0.976562C8.37483 0.631385 8.65465 0.351562 8.99983 0.351562ZM3.40916 9.62476H5.97656C6.32174 9.62476 6.60156 9.34493 6.60156 8.99976C6.60156 8.65458 6.32174 8.37476 5.97656 8.37476H3.40916C3.69738 5.7675 5.76757 3.6973 8.37483 3.40909V5.97656C8.37483 6.32174 8.65465 6.60156 8.99983 6.60156C9.34501 6.60156 9.62483 6.32174 9.62483 5.97656V3.40909C12.2321 3.6973 14.3023 5.7675 14.5905 8.37476H12.0233C11.6781 8.37476 11.3983 8.65458 11.3983 8.99976C11.3983 9.34493 11.6781 9.62476 12.0233 9.62476H14.5905C14.3023 12.232 12.2321 14.3022 9.62483 14.5904V12.0232C9.62483 11.678 9.34501 11.3982 8.99983 11.3982C8.65465 11.3982 8.37483 11.678 8.37483 12.0232V14.5904C5.76757 14.3022 3.69738 12.232 3.40916 9.62476Z",
+                                                            fill: "#AAAAAA"
+                                                        })
+                                                    })
+                                                }),
+                                                /*#__PURE__*/ jsx("p", {
+                                                    className: "gp-h-[21px]",
+                                                    children: "An element"
+                                                })
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ jsxs("div", {
+                                            className: "gp-p-2 gp-flex gp-gap-2 gp-cursor-pointer hover:gp-bg-[#3b3b3b] gp-rounded-lg",
+                                            onClick: ()=>handleSetInteraction('PAGE'),
+                                            onMouseOver: ()=>setHoverOption('PAGE'),
+                                            onFocus: ()=>setHoverOption('PAGE'),
+                                            onMouseLeave: ()=>setHoverOption(null),
+                                            "aria-hidden": true,
+                                            children: [
+                                                selectType === 'PAGE' ? renderIconCheckSvg() : /*#__PURE__*/ jsx("svg", {
+                                                    width: "21",
+                                                    height: "20",
+                                                    viewBox: "0 0 21 20",
+                                                    fill: "none",
+                                                    xmlns: "http://www.w3.org/2000/svg",
+                                                    children: /*#__PURE__*/ jsx("path", {
+                                                        "fill-rule": "evenodd",
+                                                        "clip-rule": "evenodd",
+                                                        d: "M7.25 4.5C6.55964 4.5 6 5.05964 6 5.75V14.25C6 14.9404 6.55964 15.5 7.25 15.5H13.75C14.4404 15.5 15 14.9404 15 14.25V9.5H11.75C10.7835 9.5 10 8.7165 10 7.75V4.5H7.25ZM11.5 5.56066L13.9393 8H11.75C11.6119 8 11.5 7.88807 11.5 7.75V5.56066ZM4.5 5.75C4.5 4.23122 5.73122 3 7.25 3H10.75C10.9489 3 11.1397 3.07902 11.2803 3.21967L16.2803 8.21967C16.421 8.36032 16.5 8.55109 16.5 8.75V14.25C16.5 15.7688 15.2688 17 13.75 17H7.25C5.73122 17 4.5 15.7688 4.5 14.25V5.75Z",
+                                                        fill: "#AAAAAA"
+                                                    })
+                                                }),
+                                                /*#__PURE__*/ jsx("p", {
+                                                    className: "gp-h-[21px]",
+                                                    children: "Entire page"
+                                                })
+                                            ]
+                                        })
+                                    ]
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ jsx("button", {
+                            className: "",
+                            onClick: closeSelectOnPage,
+                            children: "Cancel"
                         })
-                    })
-                ]
+                    ]
+                })
             }),
             /*#__PURE__*/ jsx("div", {
-                className: `gp-w-full gp-fixed gp-top-0 gp-left-0 gp-border-[#3C67FF]  gp-border-[4px] gp-mt-[40px] ${selectType === 'page' ? 'gp-z-90 gp-bg-[#3c67ff]/[0.25]' : ''}`,
+                className: `gp-w-full gp-fixed gp-top-0 gp-left-0 gp-mt-[40px] gp-z-[999]  ${isShowOverlay ? 'gp-z-[999]  gp-bg-[#3c67ff]/[0.25]' : 'gp-pointer-events-none'}`,
                 style: {
                     height: 'calc(100% - 40px)'
                 }

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

@@ -29,7 +29,7 @@ const PopupManager = ()=>{
         onSetActiveModal
     ]);
     return /*#__PURE__*/ jsx("div", {
-        className: "gp-pointer-events-none gp-fixed gp-inset-y-0 gp-right-0 gp-z-10 gp-flex gp-w-10 gp-flex-col gp-items-center gp-justify-center gp-gap-1 gp-overflow-y-auto gp-overflow-x-hidden gp-text-sm",
+        className: "gp-popup-trigger-button gp-pointer-events-none gp-fixed gp-inset-y-0 gp-right-0 gp-z-10 gp-flex gp-w-10 gp-flex-col gp-items-center gp-justify-center gp-gap-1 gp-overflow-y-auto gp-overflow-x-hidden gp-text-sm",
         children: popups?.map((item)=>{
             const display = item?.advanced?.d;
             return /*#__PURE__*/ jsx("div", {

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

@@ -6,6 +6,8 @@ import { createFontUrl } from '../../libs/google-fonts.js';
 import { genCSS } from '../../libs/helpers/gen-css.js';
 import { getFontsFromDataBuilder } from '../../libs/helpers/gen-fonts.js';
 import { shopifyCdnWithGoogleFonts } from '../../libs/shopify-cdn-with-google-fonts.js';
+import { libsStore } from '../../store/libs-store.js';
+import { checkNotInOptionFont } from '../../libs/helpers/check-option-font.js';
 
 const globalStyleId = 'global-style';
 const Toolbox = ()=>{
@@ -31,10 +33,13 @@ const Toolbox = ()=>{
     const changeLayoutSettings = useShopStore((s)=>s.changeLayoutSettings);
     const changeCreateThemeSectionCount = useShopStore((s)=>s.changeCreateThemeSectionCount);
     const changeShopPlan = useShopStore((s)=>s.changeShopPlan);
+    const changeFontType = libsStore((s)=>s.changeFontType);
+    const fontType = libsStore((s)=>s.fontType);
     const clearModal = useModalStore((s)=>s.clearModal);
     const setInteractionIsSelectOnPage = usePageStore((s)=>s.setInteractionIsSelectOnPage);
     const setInteractionItem = usePageStore((s)=>s.setInteractionItem);
     const setInteractionSelectType = usePageStore((s)=>s.setInteractionSelectType);
+    const setInteractionSettingType = usePageStore((s)=>s.setInteractionSettingType);
     const fonts = useMemo(()=>getFontsFromDataBuilder(state), [
         state
     ]);
@@ -63,6 +68,12 @@ const Toolbox = ()=>{
         });
         // append new fonts
         for (const font of fonts){
+            if ([
+                'bunny',
+                'google'
+            ].includes(font.type) && checkNotInOptionFont(font.family, fontType)) {
+                return;
+            }
             if (font.type !== 'custom') {
                 if (font.variants?.length) {
                     for (const variant of font.variants){
@@ -74,7 +85,7 @@ const Toolbox = ()=>{
                         const variantName = variant;
                         const url = createFontUrl([
                             cloneFont
-                        ]);
+                        ], undefined, fontType);
                         if (url) {
                             const googleFont = document.querySelector(`.${className}[data-font="${fontName}"][data-font-variant="${variantName}"]`);
                             if (googleFont) {
@@ -277,6 +288,13 @@ const Toolbox = ()=>{
     }, [
         changeShopPlan
     ]);
+    const onUpdateFontType = useCallback((e)=>{
+        const fontType = e.detail;
+        if (!fontType) return;
+        changeFontType(fontType);
+    }, [
+        changeFontType
+    ]);
     const onUpdateDynamicProduct = useCallback((e)=>{
         const product = e.detail;
         if (!product) return;
@@ -331,11 +349,20 @@ const Toolbox = ()=>{
     const onUpdateInteractionIsSelectOnPage = useCallback((e)=>{
         const isSelectOnPage = e.detail.value;
         const mode = e.detail.mode;
+        const settingType = e.detail.settingType;
         setInteractionIsSelectOnPage(isSelectOnPage);
         setInteractionSelectType(mode);
+        setInteractionSettingType(settingType);
     }, [
         setInteractionIsSelectOnPage,
-        setInteractionSelectType
+        setInteractionSelectType,
+        setInteractionSettingType
+    ]);
+    const onUpdateInteractionSettingType = useCallback((e)=>{
+        const settingType = e.detail.settingType;
+        setInteractionSettingType(settingType);
+    }, [
+        setInteractionSettingType
     ]);
     const onUpdateInteractionItem = useCallback((e)=>{
         const interactionItem = e.detail;
@@ -372,6 +399,8 @@ const Toolbox = ()=>{
         window.addEventListener('update-sale-page-product-id', onUpdateSalePageProductId);
         window.addEventListener('update-interaction-is-select-on-page', onUpdateInteractionIsSelectOnPage);
         window.addEventListener('update-interaction-item', onUpdateInteractionItem);
+        window.addEventListener('update-interaction-setting-type', onUpdateInteractionSettingType);
+        window.addEventListener('update-font-type', onUpdateFontType);
         return ()=>{
             window.removeEventListener('update-shop-info', onChangeShopInfo);
             window.removeEventListener('revalidate-query', onRevalidateQuery);
@@ -393,6 +422,8 @@ const Toolbox = ()=>{
             window.removeEventListener('update-sale-page-product-id', onUpdateSalePageProductId);
             window.removeEventListener('update-interaction-is-select-on-page', onUpdateInteractionIsSelectOnPage);
             window.removeEventListener('update-interaction-item', onUpdateInteractionItem);
+            window.removeEventListener('update-interaction-setting-type', onUpdateInteractionSettingType);
+            window.removeEventListener('update-font-type', onUpdateFontType);
         };
     }, [
         onAddEntity,
@@ -415,7 +446,9 @@ const Toolbox = ()=>{
         onUpdateProductOffers,
         onUpdateSalePageProductId,
         onUpdateInteractionItem,
-        onUpdateInteractionIsSelectOnPage
+        onUpdateInteractionIsSelectOnPage,
+        onUpdateInteractionSettingType,
+        onUpdateFontType
     ]);
     return /*#__PURE__*/ jsx("div", {
         className: "toolbox"

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

@@ -1,4 +1,4 @@
-import { PublishedThemePagesDocument, StorePropertyDocument } from '@gem-sdk/core';
+import { PublishedThemePagesDocument, StorePropertyDocument, PublishedShopMetasDocument } from '@gem-sdk/core';
 import { ShopMetaDocument } from '@gem-sdk/adapter-shopify';
 import { getFontStyleFromPageTemplate, getFontFromGlobalStyle } from '../google-fonts.js';
 import { genCSS } from '../helpers/gen-css.js';
@@ -16,7 +16,7 @@ const getStaticPagePropsV2 = (fetcher, shopifyFetcher)=>async (slug)=>{
                 slug,
                 slugType: pageType
             };
-            const [theme, storeProperty, shopifyMeta] = await Promise.allSettled([
+            const [theme, storeProperty, shopifyMeta, publishedShopMetas] = await Promise.allSettled([
                 fetcher([
                     PublishedThemePagesDocument,
                     variables
@@ -26,11 +26,21 @@ const getStaticPagePropsV2 = (fetcher, shopifyFetcher)=>async (slug)=>{
                 ]),
                 shopifyFetcher([
                     ShopMetaDocument
+                ]),
+                fetcher([
+                    PublishedShopMetasDocument,
+                    {
+                        keys: [
+                            'source_font'
+                        ]
+                    }
                 ])
             ]);
             if (theme.status === 'rejected') {
                 throw new Error(theme.reason?.[0]);
             }
+            const publishedShopMetaValue = publishedShopMetas.status === 'fulfilled' ? publishedShopMetas.value : undefined;
+            const sourceFont = publishedShopMetaValue?.publishedShopMetas?.find((item)=>item?.key === 'source_font');
             const dataBuilder = theme.value.publishedThemePages?.[0];
             const themePageCustomFonts = theme.value?.publishedThemePages?.[0]?.themePageCustomFonts;
             if (!dataBuilder) {
@@ -38,8 +48,8 @@ const getStaticPagePropsV2 = (fetcher, shopifyFetcher)=>async (slug)=>{
             }
             const pageTemplate = parseBuilderTemplateV2(dataBuilder);
             const [elementFontStyle, fontStyle, fallback, customFonts] = await Promise.all([
-                getFontStyleFromPageTemplate(pageTemplate),
-                getFontFromGlobalStyle(dataBuilder?.pageStyle?.data),
+                getFontStyleFromPageTemplate(pageTemplate, sourceFont?.value),
+                getFontFromGlobalStyle(dataBuilder?.pageStyle?.data, sourceFont?.value),
                 getFallbackV2(fetcher, pageTemplate),
                 getCustomFonts(themePageCustomFonts)
             ]);

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

@@ -1,3 +1,4 @@
+import { checkNotInOptionFont } from './helpers/check-option-font.js';
 import { getFontsFromDataBuilder } from './helpers/gen-fonts.js';
 
 const CHROME_UA = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.61 Safari/537.36';
@@ -33,12 +34,17 @@ const composeFonts = (fonts)=>{
         };
     });
 };
-const createFontUrl = (fonts, option)=>{
-    const googleFonts = fonts.filter((font)=>font.type === 'google' || !font.type);
-    if (!googleFonts.length) return;
+const createFontUrl = (fonts, option, fontType)=>{
+    const mainFonts = fonts.filter((font)=>{
+        return !([
+            'bunny',
+            'google'
+        ].includes(font.type) && checkNotInOptionFont(font.family, fontType || 'google')) && (font.type === 'google' || font.type === 'bunny' || !font.type);
+    });
+    if (!mainFonts.length) return;
     const params = new URLSearchParams();
     const display = option?.display || 'swap';
-    const uniqFonts = googleFonts.filter((font, index, arr)=>{
+    const uniqFonts = mainFonts.filter((font, index, arr)=>{
         return index === arr.findIndex((t)=>t.family === font.family);
     });
     const family = composeFonts(uniqFonts).map((font)=>{
@@ -52,13 +58,16 @@ const createFontUrl = (fonts, option)=>{
     if (option?.effect) {
         params.append('effect', option.effect);
     }
-    return `https://fonts.googleapis.com/css?${decodeURIComponent(params.toString())}`;
+    const bunnyFontUrl = `https://fonts.bunny.net/css?family=${family}`;
+    const googleFontUrl = `https://fonts.googleapis.com/css?${decodeURIComponent(params.toString())}`;
+    return fontType === 'bunny' ? bunnyFontUrl : googleFontUrl;
 };
-async function getFonts(fonts, option, isImportFontByUrl = true) {
+// eslint-disable-next-line max-params
+async function getFonts(fonts, option, isImportFontByUrl = true, fontType) {
     /**
    * The order of IE -> Chrome is important, other wise chrome starts loading woff1.
    * CSS cascading 🤷‍♂️.
-   */ const url = createFontUrl(fonts, option);
+   */ const url = createFontUrl(fonts, option, fontType);
     if (!url) return '';
     try {
         if (isImportFontByUrl) return `@import url('${url}');`;
@@ -80,7 +89,7 @@ async function getFonts(fonts, option, isImportFontByUrl = true) {
         return '';
     }
 }
-const getFontFromGlobalStyle = (data)=>{
+const getFontFromGlobalStyle = (data, sourceFont)=>{
     if (!data) return '';
     try {
         const globalStyle = JSON.parse(data);
@@ -88,14 +97,14 @@ const getFontFromGlobalStyle = (data)=>{
         const fonts = Object.entries(fontData).map(([, value])=>{
             return value;
         });
-        return getFonts(fonts);
+        return getFonts(fonts, undefined, undefined, sourceFont);
     } catch  {
         return '';
     }
 };
-async function getFontStyleFromPageTemplate(pageTemplate) {
+async function getFontStyleFromPageTemplate(pageTemplate, sourceFont) {
     const fontStyle = pageTemplate.map((sectionData)=>{
-        return getFonts(getFontsFromDataBuilder(sectionData.data));
+        return getFonts(getFontsFromDataBuilder(sectionData.data), undefined, undefined, sourceFont);
     });
     return await Promise.all(fontStyle);
 }

package/dist/esm/libs/helpers/check-option-font.js

@@ -0,0 +1,63 @@
+const listFontsNotInBunny = [
+    'Anton SC',
+    'Arsenal SC',
+    'Baskervville SC',
+    'Beiruti',
+    'Bodoni Moda SC',
+    'Bona Nova SC',
+    'Bungee Tint',
+    'Edu AU VIC WA NT Hand',
+    'Fustat',
+    'Ga Maamli',
+    'Kalnia Glaze',
+    'Maname',
+    'Matemasie',
+    'Material Icons',
+    'Material Icons Outlined',
+    'Material Icons Round',
+    'Material Icons Sharp',
+    'Material Icons Two Tone',
+    'Material Symbols Outlined',
+    'Material Symbols Rounded',
+    'Material Symbols Sharp',
+    'Moderustic',
+    'New Amsterdam',
+    'Playwrite AR',
+    'Playwrite AT',
+    'Playwrite BE VLG',
+    'Playwrite BE WAL',
+    'Playwrite CL',
+    'Playwrite CU',
+    'Playwrite CZ',
+    'Playwrite DK Loopet',
+    'Playwrite DK Uloopet',
+    'Playwrite HR',
+    'Playwrite HR Lijeva',
+    'Playwrite HU',
+    'Playwrite PE',
+    'SUSE',
+    'Sankofa Display',
+    'Wittgenstein',
+    'Zain'
+];
+const listFontsNotInGoogle = [
+    'Arima Madurai',
+    'Coda Caption',
+    'Fredoka One',
+    'Gentium Book Basic',
+    'Kantumruy',
+    'Merienda One',
+    'Source Sans Pro',
+    'Source Serif Pro',
+    'Briem Hand',
+    'Pushster'
+];
+const objectFont = {
+    bunny: listFontsNotInBunny,
+    google: listFontsNotInGoogle
+};
+const checkNotInOptionFont = (currentfont, type)=>{
+    return objectFont?.[type]?.includes(currentfont);
+};
+
+export { checkNotInOptionFont };

package/dist/esm/libs/hooks/useSelectModeInteraction.js

@@ -0,0 +1,14 @@
+const useSelectModeInteraction = ()=>{
+    const changeSelectMode = (mode)=>{
+        const event = new CustomEvent('editor:interaction:change-select-mode', {
+            bubbles: true,
+            detail: mode
+        });
+        window.dispatchEvent(event);
+    };
+    return {
+        changeSelectMode
+    };
+};
+
+export { useSelectModeInteraction };

package/dist/esm/pages/builder.js

@@ -1,17 +1,17 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { PageProvider, BuilderComponentProvider, SectionProvider, BuilderPreviewProvider, RenderPreview } from '@gem-sdk/core';
+import { PageProvider, BuilderComponentProvider, SectionProvider, BuilderPreviewProvider } from '@gem-sdk/core';
 import { NextSeo } from 'next-seo';
 import Head from 'next/head';
 import { useState, useMemo, useEffect } from 'react';
 import Toolbox from '../components/builder/Toolbox.js';
 import Header from '../components/builder/Header.js';
 import Footer from '../components/builder/Footer.js';
-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';
 import Devices from '../components/builder/SwitchView.js';
+import Body from '../components/builder/Body.js';
 
 const BuilderPage = ({ components, seo, themeStyle, fontStyle, sectionData, pageType, editorImageToLayout, isThemeSectionEditor, hiddenToolbar, pageName, isOriginTemplate })=>{
     const [loadSuccess, setLoadSuccess] = useState(false);
@@ -75,16 +75,9 @@ const BuilderPage = ({ components, seo, themeStyle, fontStyle, sectionData, page
                                             pageType: pageType,
                                             isOriginTemplate: isOriginTemplate
                                         })),
-                                        /*#__PURE__*/ jsx("div", {
-                                            id: "storefront",
-                                            className: `${isThemeSectionEditor ? 'theme-section-editor' : ''} ${pageType === 'POST_PURCHASE' ? 'post-purchase-page' : ''}`,
-                                            children: pageType === 'GP_COLLECTION' ? /*#__PURE__*/ jsx(CollectionGlobalProvider, {
-                                                children: /*#__PURE__*/ jsx(RenderPreview, {
-                                                    uid: "ROOT"
-                                                })
-                                            }) : /*#__PURE__*/ jsx(RenderPreview, {
-                                                uid: "ROOT"
-                                            })
+                                        /*#__PURE__*/ jsx(Body, {
+                                            pageType: pageType,
+                                            isThemeSectionEditor: isThemeSectionEditor
                                         }),
                                         /*#__PURE__*/ jsx(ImageToLayout, {
                                             editorImageToLayout: editorImageToLayout || false

package/dist/esm/store/libs-store.js

@@ -0,0 +1,12 @@
+import { create } from 'zustand';
+
+const libsStore = create((set)=>({
+        fontType: 'google',
+        changeFontType: (fontType)=>{
+            set({
+                fontType
+            });
+        }
+    }));
+
+export { libsStore };