@gem-sdk/pages 3.0.0-pre-production.0 → 3.0.0

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

@@ -1,494 +1,2 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-var core = require('@gem-sdk/core');
-var react = require('react');
-var getStorefrontApi = require('../../libs/get-storefront-api.js');
-var googleFonts = require('../../libs/google-fonts.js');
-var genCss = require('../../libs/helpers/gen-css.js');
-var genFonts = require('../../libs/helpers/gen-fonts.js');
-var shopifyCdnWithGoogleFonts = require('../../libs/shopify-cdn-with-google-fonts.js');
-var libsStore = require('../../store/libs-store.js');
-var checkOptionFont = require('../../libs/helpers/check-option-font.js');
-
-const globalStyleId = 'global-style';
-const Toolbox = ()=>{
-    const matchMutate = core.useMatchMutate();
-    const provider = core.useShopStore((s)=>s.provider);
-    const changeStorefrontInfo = core.useShopStore((s)=>s.changeStorefrontInfo);
-    const setDynamicProduct = core.usePageStore((s)=>s.setDynamicProduct);
-    const setPostPurchaseProductOffers = core.usePageStore((s)=>s.setPostPurchaseProductOffers);
-    const setDynamicDiscountOffer = core.usePageStore((s)=>s.setDynamicDiscountOffer);
-    const setSalePageProductId = core.usePageStore((s)=>s.setSalePageProductId);
-    const setDynamicCollection = core.usePageStore((s)=>s.setDynamicCollection);
-    const initState = core.useBuilderPreviewStore((s)=>s.initState);
-    const state = core.useBuilderPreviewStore((s)=>s.state);
-    const initNormalizeState = core.useBuilderPreviewStore((s)=>s.forceChangeState);
-    const forceChangeItemProp = core.useBuilderPreviewStore((s)=>s.forceChangeItemProp);
-    const changeItemPropByKey = core.useBuilderPreviewStore((s)=>s.changeItemPropByKey);
-    const addItem = core.useBuilderPreviewStore((s)=>s.addItem);
-    const moveItem = core.useBuilderPreviewStore((s)=>s.moveItem);
-    const removeItem = core.useBuilderPreviewStore((s)=>s.removeItem);
-    const addSection = core.useSectionStore((s)=>s.addSection);
-    const changeSwatches = core.useShopStore((s)=>s.changeSwatches);
-    const updateItemName = core.useBuilderPreviewStore((s)=>s.updateItemName);
-    const updateItemAttribute = core.useBuilderPreviewStore((s)=>s.updateItemAttribute);
-    const changeLayoutSettings = core.useShopStore((s)=>s.changeLayoutSettings);
-    const changeCreateThemeSectionCount = core.useShopStore((s)=>s.changeCreateThemeSectionCount);
-    const changeShopPlan = core.useShopStore((s)=>s.changeShopPlan);
-    const changeFontType = libsStore.libsStore((s)=>s.changeFontType);
-    const fontType = libsStore.libsStore((s)=>s.fontType);
-    const clearModal = core.useModalStore((s)=>s.clearModal);
-    const changeLimitCreateThemeSection = core.useShopStore((s)=>s.changeLimitCreateThemeSection);
-    const setInteractionIsSelectOnPage = core.usePageStore((s)=>s.setInteractionIsSelectOnPage);
-    const setInteractionItem = core.usePageStore((s)=>s.setInteractionItem);
-    const setInteractionSelectType = core.usePageStore((s)=>s.setInteractionSelectType);
-    const setInteractionSettingType = core.usePageStore((s)=>s.setInteractionSettingType);
-    const setSidebarMode = core.usePageStore((s)=>s.setSidebarMode);
-    const fonts = react.useMemo(()=>genFonts.getFontsFromDataBuilder(state), [
-        state
-    ]);
-    const setFontsToHead = (className, fonts)=>{
-        // clear fonts
-        if (!fonts?.length) {
-            const googleFonts = document.querySelectorAll(`.${className}`);
-            googleFonts.forEach((googleFont)=>{
-                googleFont.remove();
-            });
-            return;
-        }
-        // clear fonts not use
-        const googleFonts$1 = document.querySelectorAll(`.${className}`);
-        googleFonts$1.forEach((googleFont)=>{
-            const fontName = googleFont.getAttribute('data-font');
-            const variantName = googleFont.getAttribute('data-font-variant');
-            if (!fontName || !variantName) {
-                googleFont.remove();
-            } else {
-                const isUse = fonts.find((font)=>font.family == fontName && font.variants.includes(variantName));
-                if (!isUse) {
-                    googleFont.remove();
-                }
-            }
-        });
-        // append new fonts
-        for (const font of fonts){
-            if ([
-                'bunny',
-                'google'
-            ].includes(font.type) && checkOptionFont.checkNotInOptionFont(font.family, fontType)) {
-                continue;
-            }
-            if (font.type !== 'custom') {
-                if (font.variants?.length) {
-                    for (const variant of font.variants){
-                        const cloneFont = JSON.parse(JSON.stringify(font));
-                        cloneFont.variants = [
-                            variant
-                        ]; // set single variant. Fix error reload font when change href other variant
-                        const fontName = cloneFont.family;
-                        const variantName = variant;
-                        const url = googleFonts.createFontUrl([
-                            cloneFont
-                        ], undefined, fontType);
-                        if (url) {
-                            const googleFont = document.querySelector(`.${className}[data-font="${fontName}"][data-font-variant="${variantName}"]`);
-                            if (googleFont) {
-                                continue;
-                            } else {
-                                const link = document.createElement('link');
-                                link.className = className;
-                                link.dataset.font = fontName;
-                                link.dataset.fontVariant = variantName;
-                                link.href = url;
-                                link.rel = 'stylesheet';
-                                document.head.appendChild(link);
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    };
-    // Revalidate all query with key match query/
-    const onRevalidateQuery = react.useCallback(()=>{
-        matchMutate(/query\//, {
-            revalidate: true
-        });
-    }, [
-        matchMutate
-    ]);
-    // Update shop info
-    const onChangeShopInfo = react.useCallback((e)=>{
-        const detail = e.detail;
-        changeStorefrontInfo({
-            url: detail.shopHandle ? getStorefrontApi.getStorefrontApi(detail.shopHandle, provider) : undefined,
-            token: detail.shopToken
-        });
-    }, [
-        changeStorefrontInfo,
-        provider
-    ]);
-    const onChangeGlobalStyle = react.useCallback((e)=>{
-        const detail = e.detail;
-        try {
-            if (detail.data) {
-                const themeStyle = genCss.genCSS(detail.data, detail.mobileOnly);
-                const font = Object.entries(detail.data?.font).map(([, value])=>{
-                    return value;
-                }).map((item)=>{
-                    if (item.type == 'custom') {
-                        const isGoogleFont = shopifyCdnWithGoogleFonts.shopifyCdnWithGoogleFonts.find((ggFont)=>ggFont.family == item.family);
-                        if (isGoogleFont) {
-                            return isGoogleFont;
-                        }
-                    }
-                    return item;
-                });
-                const globalStyle = document.getElementById(globalStyleId);
-                setFontsToHead('google-font-builder', font);
-                if (globalStyle) {
-                    globalStyle.innerHTML = themeStyle;
-                } else {
-                    const style = document.createElement('style');
-                    style.id = globalStyleId;
-                    style.innerHTML = themeStyle;
-                    document.head.appendChild(style);
-                }
-            }
-        } catch  {
-        //
-        }
-    }, []);
-    // Init builder data
-    const onInitBuilder = react.useCallback((e)=>{
-        clearModal();
-        try {
-            const detail = e.detail;
-            if (detail.data) {
-                if (detail.type === 'flat') {
-                    initNormalizeState(detail.data);
-                } else {
-                    initState(detail.data);
-                }
-            }
-        } catch  {
-        //
-        }
-    }, [
-        initNormalizeState,
-        initState,
-        clearModal
-    ]);
-    // Add new entity
-    const onAddEntity = react.useCallback((e)=>{
-        try {
-            const detail = e.detail;
-            if (detail.entity) {
-                addItem({
-                    data: detail.entity,
-                    id: detail.id,
-                    position: detail.position,
-                    type: detail.type ?? 'component'
-                });
-                if (detail?.type === 'section' && !Array.isArray(detail.entity)) {
-                    addSection(detail.entity.uid, detail.entity);
-                }
-            }
-        } catch  {
-        //
-        }
-    }, [
-        addItem,
-        addSection
-    ]);
-    // Update props of entity
-    const onUpdateEntityProp = react.useCallback((e)=>{
-        try {
-            const detail = e.detail;
-            if (detail.uid && detail.propName) {
-                changeItemPropByKey({
-                    id: detail.uid,
-                    key: detail.propName,
-                    data: detail.propValue,
-                    group: detail.group
-                });
-            }
-        } catch  {
-        //
-        }
-    }, [
-        changeItemPropByKey
-    ]);
-    // Update props of entity
-    const onForceUpdateEntityProps = react.useCallback((e)=>{
-        try {
-            const detail = e.detail;
-            if (detail.uid) {
-                forceChangeItemProp(detail.uid, detail.data, detail.group);
-            }
-        } catch  {
-        //
-        }
-    }, [
-        forceChangeItemProp
-    ]);
-    // Move entity
-    const onMoveEntity = react.useCallback((e)=>{
-        try {
-            const detail = e.detail;
-            if (detail.to && detail.uid) {
-                moveItem(detail.uid, detail.to, Number(detail.position) ?? 0);
-            }
-        } catch  {
-        //
-        }
-    }, [
-        moveItem
-    ]);
-    // Remove entity
-    const onRemoveEntity = react.useCallback((e)=>{
-        try {
-            const detail = e.detail;
-            if (detail.uid) {
-                removeItem(detail.uid);
-            }
-        } catch  {
-        //
-        }
-    }, [
-        removeItem
-    ]);
-    // Change Swatches Data
-    const onChangeSwatchesData = react.useCallback((e)=>{
-        const detail = e.detail;
-        try {
-            if (detail.data) {
-                changeSwatches(detail.data);
-            }
-        } catch  {
-        //
-        }
-    }, [
-        changeSwatches
-    ]);
-    const onChangeLayoutSettingData = react.useCallback((e)=>{
-        const detail = e.detail;
-        if (!detail) return;
-        changeLayoutSettings(detail);
-    }, [
-        changeLayoutSettings
-    ]);
-    const onUpdateCreateThemeSectionCount = react.useCallback((e)=>{
-        const count = e.detail;
-        if (!count) return;
-        changeCreateThemeSectionCount(count);
-    }, [
-        changeCreateThemeSectionCount
-    ]);
-    const onUpdateShopPlan = react.useCallback((e)=>{
-        const shopPlan = e.detail;
-        if (!shopPlan) return;
-        changeShopPlan(shopPlan);
-    }, [
-        changeShopPlan
-    ]);
-    const onUpdateFontType = react.useCallback((e)=>{
-        const fontType = e.detail;
-        if (!fontType) return;
-        changeFontType(fontType);
-    }, [
-        changeFontType
-    ]);
-    const onUpdateDynamicProduct = react.useCallback((e)=>{
-        const product = e.detail;
-        if (!product) return;
-        setDynamicProduct(product);
-    }, [
-        setDynamicProduct
-    ]);
-    const onUpdateDynamicCollection = react.useCallback((e)=>{
-        const collection = e.detail;
-        if (!collection) return;
-        setDynamicCollection(collection);
-    }, [
-        setDynamicCollection
-    ]);
-    react.useEffect(()=>{
-        if (fonts) {
-            setFontsToHead('google-font-element', fonts);
-        }
-    }, [
-        fonts
-    ]);
-    const onUpdateItemName = react.useCallback((e)=>{
-        const detail = e.detail;
-        if (detail.uid) {
-            updateItemName(detail.uid, detail.name || '');
-        }
-    }, [
-        updateItemName
-    ]);
-    const onUpdateItemAttribute = react.useCallback((e)=>{
-        const detail = e.detail;
-        if (detail.uid) {
-            updateItemAttribute(detail.uid, detail.value || '', detail.attr || '');
-        }
-    }, [
-        updateItemAttribute
-    ]);
-    const onUpdateProductOffers = react.useCallback((e)=>{
-        const productOffers = e.detail;
-        if (!productOffers?.length) return;
-        setPostPurchaseProductOffers(productOffers);
-    }, [
-        setPostPurchaseProductOffers
-    ]);
-    const onUpdateDynamicDiscountOffer = react.useCallback((e)=>{
-        const dynamicDiscountOffer = e.detail;
-        if (!dynamicDiscountOffer) return;
-        setDynamicDiscountOffer(dynamicDiscountOffer);
-    }, [
-        setDynamicDiscountOffer
-    ]);
-    const onUpdateSalePageProductId = react.useCallback((e)=>{
-        const id = e.detail;
-        if (!id) return;
-        setSalePageProductId(id);
-    }, [
-        setSalePageProductId
-    ]);
-    const onLimitCreateThemeSection = react.useCallback((e)=>{
-        const data = e.detail;
-        if (!data) return;
-        changeLimitCreateThemeSection(data);
-    }, [
-        changeLimitCreateThemeSection
-    ]);
-    const onUpdateInteractionIsSelectOnPage = react.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,
-        setInteractionSettingType
-    ]);
-    const onUpdateInteractionSettingType = react.useCallback((e)=>{
-        const settingType = e.detail.settingType;
-        setInteractionSettingType(settingType);
-    }, [
-        setInteractionSettingType
-    ]);
-    const onChangeSidebarMode = react.useCallback((e)=>{
-        const mode = e.detail.mode;
-        console.log(mode);
-        setSidebarMode(mode);
-    }, [
-        setSidebarMode
-    ]);
-    const onUpdateInteractionItem = react.useCallback((e)=>{
-        const interactionItem = e.detail;
-        setInteractionItem(interactionItem);
-    }, [
-        setInteractionItem
-    ]);
-    react.useEffect(()=>{
-        if (fonts) {
-            setFontsToHead('google-font-element', fonts);
-        }
-    }, [
-        fonts
-    ]);
-    react.useEffect(()=>{
-        window.addEventListener('update-shop-info', onChangeShopInfo);
-        window.addEventListener('revalidate-query', onRevalidateQuery);
-        window.addEventListener('init-builder', onInitBuilder);
-        window.addEventListener('add-entity', onAddEntity);
-        window.addEventListener('remove-entity', onRemoveEntity);
-        window.addEventListener('move-entity', onMoveEntity);
-        window.addEventListener('force-update-entity-props', onForceUpdateEntityProps);
-        window.addEventListener('update-entity-prop', onUpdateEntityProp);
-        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);
-        window.addEventListener('update-item-name', onUpdateItemName);
-        window.addEventListener('update-item-attribute', onUpdateItemAttribute);
-        window.addEventListener('set-product-offer', onUpdateProductOffers);
-        window.addEventListener('set-dynamic-discount-offer', onUpdateDynamicDiscountOffer);
-        window.addEventListener('update-sale-page-product-id', onUpdateSalePageProductId);
-        window.addEventListener('limit-create-theme-section', onLimitCreateThemeSection);
-        window.addEventListener('update-interaction-is-select-on-page', onUpdateInteractionIsSelectOnPage);
-        window.addEventListener('update-interaction-item', onUpdateInteractionItem);
-        window.addEventListener('update-interaction-setting-type', onUpdateInteractionSettingType);
-        window.addEventListener('change-sidebar-mode', onChangeSidebarMode);
-        window.addEventListener('update-font-type', onUpdateFontType);
-        return ()=>{
-            window.removeEventListener('update-shop-info', onChangeShopInfo);
-            window.removeEventListener('revalidate-query', onRevalidateQuery);
-            window.removeEventListener('init-builder', onInitBuilder);
-            window.removeEventListener('add-entity', onAddEntity);
-            window.removeEventListener('remove-entity', onRemoveEntity);
-            window.removeEventListener('move-entity', onMoveEntity);
-            window.removeEventListener('update-entity-prop', onUpdateEntityProp);
-            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);
-            window.removeEventListener('update-item-name', onUpdateItemName);
-            window.removeEventListener('update-item-attribute', onUpdateItemAttribute);
-            window.removeEventListener('set-product-offer', onUpdateProductOffers);
-            window.removeEventListener('update-sale-page-product-id', onUpdateSalePageProductId);
-            window.removeEventListener('limit-create-theme-section', onLimitCreateThemeSection);
-            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,
-        onUpdateShopPlan,
-        onForceUpdateEntityProps,
-        onUpdateEntityProp,
-        onInitBuilder,
-        onMoveEntity,
-        onRemoveEntity,
-        onChangeGlobalStyle,
-        onChangeSwatchesData,
-        onRevalidateQuery,
-        onChangeShopInfo,
-        onChangeLayoutSettingData,
-        onUpdateCreateThemeSectionCount,
-        onUpdateDynamicProduct,
-        onUpdateDynamicCollection,
-        onUpdateItemName,
-        onUpdateItemAttribute,
-        onUpdateProductOffers,
-        onUpdateSalePageProductId,
-        onLimitCreateThemeSection,
-        onUpdateInteractionItem,
-        onUpdateInteractionIsSelectOnPage,
-        onUpdateInteractionSettingType,
-        onUpdateFontType,
-        onChangeSidebarMode,
-        onUpdateDynamicDiscountOffer
-    ]);
-    return /*#__PURE__*/ jsxRuntime.jsx("div", {
-        className: "toolbox"
-    });
-};
-var Toolbox$1 = /*#__PURE__*/ react.memo(Toolbox);
-
-exports.default = Toolbox$1;
+'use client';
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),core=require("@gem-sdk/core"),react=require("react"),getStorefrontApi=require("../../libs/get-storefront-api.js"),googleFonts=require("../../libs/google-fonts.js"),genCss=require("../../libs/helpers/gen-css.js"),genFonts=require("../../libs/helpers/gen-fonts.js"),shopifyCdnWithGoogleFonts=require("../../libs/shopify-cdn-with-google-fonts.js"),libsStore=require("../../store/libs-store.js"),checkOptionFont=require("../../libs/helpers/check-option-font.js");const globalStyleId="global-style",Toolbox=()=>{let e=core.useMatchMutate(),t=core.useShopStore(e=>e.provider),o=core.useShopStore(e=>e.changeStorefrontInfo),r=core.usePageStore(e=>e.setDynamicProduct),a=core.usePageStore(e=>e.setPostPurchaseProductOffers),n=core.usePageStore(e=>e.setDynamicDiscountOffer),i=core.usePageStore(e=>e.setSalePageProductId),d=core.usePageStore(e=>e.setDynamicCollection),l=core.useBuilderPreviewStore(e=>e.initState),s=core.useBuilderPreviewStore(e=>e.state),c=core.useBuilderPreviewStore(e=>e.forceChangeState),u=core.useBuilderPreviewStore(e=>e.forceChangeItemProp),p=core.useBuilderPreviewStore(e=>e.changeItemPropByKey),w=core.useBuilderPreviewStore(e=>e.addItem),v=core.useBuilderPreviewStore(e=>e.moveItem),m=core.useBuilderPreviewStore(e=>e.removeItem),g=core.useSectionStore(e=>e.addSection),y=core.useShopStore(e=>e.changeSwatches),f=core.useBuilderPreviewStore(e=>e.updateItemName),h=core.useBuilderPreviewStore(e=>e.updateItemAttribute),S=core.useShopStore(e=>e.changeLayoutSettings),b=core.useShopStore(e=>e.changeCreateThemeSectionCount),E=core.useShopStore(e=>e.changeShopPlan),L=core.useShopStore(e=>e.updatePriceWithCurrency),C=libsStore.libsStore(e=>e.changeFontType),k=libsStore.libsStore(e=>e.fontType),P=core.useModalStore(e=>e.clearModal),I=core.useShopStore(e=>e.changeLimitCreateThemeSection),q=core.usePageStore(e=>e.setInteractionIsSelectOnPage),T=core.usePageStore(e=>e.setInteractionItem),F=core.usePageStore(e=>e.setInteractionSelectType),j=core.usePageStore(e=>e.setInteractionSettingType),B=core.usePageStore(e=>e.setSidebarMode),x=react.useMemo(()=>genFonts.getFontsFromDataBuilder(s),[s]),O=(e,t)=>{if(!t?.length){let t=document.querySelectorAll(`.${e}`);t.forEach(e=>{e.remove()});return}let o=document.querySelectorAll(`.${e}`);for(let r of(o.forEach(e=>{let o=e.getAttribute("data-font"),r=e.getAttribute("data-font-variant");if(o&&r){let a=t.find(e=>e.family==o&&e.variants.includes(r));a||e.remove()}else e.remove()}),t))if(!(["bunny","google"].includes(r.type)&&checkOptionFont.checkNotInOptionFont(r.family,k))&&"custom"!==r.type&&r.variants?.length)for(let t of r.variants){let o=JSON.parse(JSON.stringify(r));o.variants=[t];let a=o.family,n=googleFonts.createFontUrl([o],void 0,k);if(n){let o=document.querySelector(`.${e}[data-font="${a}"][data-font-variant="${t}"]`);if(o)continue;{let o=document.createElement("link");o.className=e,o.dataset.font=a,o.dataset.fontVariant=t,o.href=n,o.rel="stylesheet",document.head.appendChild(o)}}}},A=react.useCallback(()=>{e(/query\//,{revalidate:!0})},[e]),M=react.useCallback(e=>{let r=e.detail;o({url:r.shopHandle?getStorefrontApi.getStorefrontApi(r.shopHandle,t):void 0,token:r.shopToken})},[o,t]),N=react.useCallback(e=>{let t=e.detail;try{if(t.data){let e=genCss.genCSS(t.data,t.mobileOnly),o=Object.entries(t.data?.font).map(([,e])=>e).map(e=>{if("custom"==e.type){let t=shopifyCdnWithGoogleFonts.shopifyCdnWithGoogleFonts.find(t=>t.family==e.family);if(t)return t}return e}),r=document.getElementById(globalStyleId);if(O("google-font-builder",o),r)r.innerHTML=e;else{let t=document.createElement("style");t.id=globalStyleId,t.innerHTML=e,document.head.appendChild(t)}}}catch{}},[]),$=react.useCallback(e=>{P();try{let t=e.detail;t.data&&("flat"===t.type?c(t.data):l(t.data))}catch{}},[c,l,P]),D=react.useCallback(e=>{try{let t=e.detail;t.entity&&(w({data:t.entity,id:t.id,position:t.position,type:t.type??"component"}),t?.type!=="section"||Array.isArray(t.entity)||g(t.entity.uid,t.entity))}catch{}},[w,g]),H=react.useCallback(e=>{try{let t=e.detail;t.uid&&t.propName&&p({id:t.uid,key:t.propName,data:t.propValue,group:t.group})}catch{}},[p]),W=react.useCallback(e=>{try{let t=e.detail;t.uid&&u(t.uid,t.data,t.group)}catch{}},[u]),G=react.useCallback(e=>{try{let t=e.detail;t.to&&t.uid&&v(t.uid,t.to,Number(t.position)??0)}catch{}},[v]),J=react.useCallback(e=>{try{let t=e.detail;t.uid&&m(t.uid)}catch{}},[m]),R=react.useCallback(e=>{let t=e.detail;try{t.data&&y(t.data)}catch{}},[y]),V=react.useCallback(e=>{let t=e.detail;t&&S(t)},[S]),_=react.useCallback(e=>{let t=e.detail;t&&b(t)},[b]),K=react.useCallback(e=>{let t=e.detail;t&&E(t)},[E]),U=react.useCallback(e=>{let t=e.detail;t&&L(t)},[L]),z=react.useCallback(e=>{let t=e.detail;t&&C(t)},[C]),Q=react.useCallback(e=>{let t=e.detail;t&&r(t)},[r]),X=react.useCallback(e=>{let t=e.detail;t&&d(t)},[d]);react.useEffect(()=>{x&&O("google-font-element",x)},[x]);let Y=react.useCallback(e=>{let t=e.detail;t.uid&&f(t.uid,t.name||"")},[f]),Z=react.useCallback(e=>{let t=e.detail;t.uid&&h(t.uid,t.value||"",t.attr||"")},[h]),ee=react.useCallback(e=>{let t=e.detail;t?.length&&a(t)},[a]),et=react.useCallback(e=>{let t=e.detail;t&&n(t)},[n]),eo=react.useCallback(e=>{let t=e.detail;t&&i(t)},[i]),er=react.useCallback(e=>{let t=e.detail;t&&I(t)},[I]),ea=react.useCallback(e=>{let t=e.detail.value,o=e.detail.mode,r=e.detail.settingType;q(t),F(o),j(r)},[q,F,j]),en=react.useCallback(e=>{let t=e.detail.settingType;j(t)},[j]),ei=react.useCallback(e=>{let t=e.detail.mode;console.log(t),B(t)},[B]),ed=react.useCallback(e=>{let t=e.detail;T(t)},[T]);return react.useEffect(()=>{x&&O("google-font-element",x)},[x]),react.useEffect(()=>(window.addEventListener("update-shop-info",M),window.addEventListener("revalidate-query",A),window.addEventListener("init-builder",$),window.addEventListener("add-entity",D),window.addEventListener("remove-entity",J),window.addEventListener("move-entity",G),window.addEventListener("force-update-entity-props",W),window.addEventListener("update-entity-prop",H),window.addEventListener("set-global-style",N),window.addEventListener("update-global-swatches-data",R),window.addEventListener("on-off-header-footer",V),window.addEventListener("update-create-theme-section-count",_),window.addEventListener("update-shop-plan",K),window.addEventListener("set-dynamic-product",Q),window.addEventListener("set-dynamic-collection",X),window.addEventListener("update-item-name",Y),window.addEventListener("update-item-attribute",Z),window.addEventListener("set-product-offer",ee),window.addEventListener("set-dynamic-discount-offer",et),window.addEventListener("update-sale-page-product-id",eo),window.addEventListener("limit-create-theme-section",er),window.addEventListener("update-interaction-is-select-on-page",ea),window.addEventListener("update-interaction-item",ed),window.addEventListener("update-interaction-setting-type",en),window.addEventListener("change-sidebar-mode",ei),window.addEventListener("update-font-type",z),window.addEventListener("update-price-with-currency",U),()=>{window.removeEventListener("update-shop-info",M),window.removeEventListener("revalidate-query",A),window.removeEventListener("init-builder",$),window.removeEventListener("add-entity",D),window.removeEventListener("remove-entity",J),window.removeEventListener("move-entity",G),window.removeEventListener("update-entity-prop",H),window.removeEventListener("set-global-style",N),window.removeEventListener("update-global-swatches-data",R),window.removeEventListener("on-off-header-footer",V),window.removeEventListener("update-create-theme-section-count",_),window.removeEventListener("update-shop-plan",K),window.removeEventListener("update-price-with-currency",U),window.removeEventListener("set-dynamic-product",Q),window.removeEventListener("set-dynamic-collection",X),window.removeEventListener("update-item-name",Y),window.removeEventListener("update-item-attribute",Z),window.removeEventListener("set-product-offer",ee),window.removeEventListener("update-sale-page-product-id",eo),window.removeEventListener("limit-create-theme-section",er),window.removeEventListener("update-interaction-is-select-on-page",ea),window.removeEventListener("update-interaction-item",ed),window.removeEventListener("update-interaction-setting-type",en),window.removeEventListener("update-font-type",z)}),[D,K,W,H,$,G,J,N,R,A,M,V,_,Q,X,Y,Z,ee,eo,er,ed,ea,en,z,ei,et,U]),jsxRuntime.jsx("div",{className:"toolbox"})};var Toolbox$1=react.memo(Toolbox);exports.default=Toolbox$1;

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

@@ -1,56 +1 @@
-'use strict';
-
-const devices = [
-    {
-        id: 'iphone-13-mini',
-        name: 'iPhone 13 Mini',
-        width: 375
-    },
-    {
-        id: 'iphone-13-pro',
-        name: 'iPhone 13 Pro',
-        width: 390
-    },
-    {
-        id: 'iphone-11-pro-max',
-        name: 'iPhone 11 Pro Max',
-        width: 414
-    },
-    {
-        id: 'iphone-15-pro-max',
-        name: 'iPhone 15 Pro Max',
-        width: 430
-    },
-    {
-        id: 'pixel-7',
-        name: 'Pixel 7',
-        width: 412
-    },
-    {
-        id: 'galaxy-s8-plus',
-        name: 'Galaxy S8+',
-        width: 360
-    },
-    {
-        id: 'galaxy-s20-ultra',
-        name: 'Galaxy S20 Ultra',
-        width: 412
-    },
-    {
-        id: 'ipad-mini',
-        name: 'iPad Mini',
-        width: 768
-    },
-    {
-        id: 'ipad-air',
-        name: 'iPad Air',
-        width: 820
-    },
-    {
-        id: 'ipad-pro',
-        name: 'iPad Pro',
-        width: 1024
-    }
-];
-
-exports.devices = devices;
+"use strict";const devices=[{id:"iphone-13-mini",name:"iPhone 13 Mini",width:375},{id:"iphone-13-pro",name:"iPhone 13 Pro",width:390},{id:"iphone-11-pro-max",name:"iPhone 11 Pro Max",width:414},{id:"iphone-15-pro-max",name:"iPhone 15 Pro Max",width:430},{id:"pixel-7",name:"Pixel 7",width:412},{id:"galaxy-s8-plus",name:"Galaxy S8+",width:360},{id:"galaxy-s20-ultra",name:"Galaxy S20 Ultra",width:412},{id:"ipad-mini",name:"iPad Mini",width:768},{id:"ipad-air",name:"iPad Air",width:820},{id:"ipad-pro",name:"iPad Pro",width:1024}];exports.devices=devices;

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

@@ -1,7 +1 @@
-'use strict';
-
-const TOOLBAR_HOVER_HEIGHT = 24;
-const TOOLBAR_ACTIVE_HEIGHT = 32;
-
-exports.TOOLBAR_ACTIVE_HEIGHT = TOOLBAR_ACTIVE_HEIGHT;
-exports.TOOLBAR_HOVER_HEIGHT = TOOLBAR_HOVER_HEIGHT;
+"use strict";const TOOLBAR_HOVER_HEIGHT=24,TOOLBAR_ACTIVE_HEIGHT=32;exports.TOOLBAR_ACTIVE_HEIGHT=32,exports.TOOLBAR_HOVER_HEIGHT=24;

package/dist/cjs/components/builder/toolbar/utils/findDOMClosest.js

@@ -1,41 +1 @@
-'use strict';
-
-const findDOMClosest = ($target, selectors)=>{
-    const closestElements = {
-        $childrenSlot: null,
-        $productFeatureImg: null,
-        $section: null,
-        $component: null,
-        $disableIframeClick: null,
-        $stickyMinimize: null,
-        $toolbar: null,
-        $gpText: null,
-        $imageDetection: null,
-        $popupTriggerButton: null
-    };
-    let currentElement = $target;
-    while(currentElement){
-        // Check for stop conditions
-        if (currentElement.matches('[data-uid="ROOT"], .builder, #storefront')) {
-            break;
-        }
-        // Check if currentElement matches any of the selectors
-        for (const [key, selector] of Object.entries(selectors)){
-            if (!closestElements[key] && currentElement.matches(selector)) {
-                closestElements[key] = currentElement;
-            }
-        }
-        // If all closest elements are found, break the loop
-        if (Object.values(closestElements).every((el)=>el !== null)) {
-            break;
-        }
-        // Move up to the parent element
-        currentElement = currentElement.parentElement;
-    }
-    // Reset ram
-    currentElement = null;
-    // Return
-    return closestElements;
-};
-
-exports.findDOMClosest = findDOMClosest;
+"use strict";const findDOMClosest=(l,e)=>{let t={$childrenSlot:null,$productFeatureImg:null,$section:null,$component:null,$disableIframeClick:null,$stickyMinimize:null,$toolbar:null,$gpText:null,$imageDetection:null,$popupTriggerButton:null},n=l;for(;n&&!n.matches('[data-uid="ROOT"], .builder, #storefront');){for(let[l,u]of Object.entries(e))!t[l]&&n.matches(u)&&(t[l]=n);if(Object.values(t).every(l=>null!==l))break;n=n.parentElement}return n=null,t};exports.findDOMClosest=findDOMClosest;

package/dist/cjs/components/builder/toolbar/utils/findOverflowParent.js

@@ -1,20 +1 @@
-'use strict';
-
-var isOverToolbarPosition = require('./isOverToolbarPosition.js');
-var isSection = require('./isSection.js');
-var notVisible = require('./notVisible.js');
-
-const findOverflowParent = (element, initEl)=>{
-    const thisEl = element;
-    const origEl = initEl || thisEl;
-    if (!thisEl) return;
-    if (isSection.isSection(thisEl)) return;
-    if (notVisible.notVisible(thisEl) && isOverToolbarPosition.isOverToolbarPosition(initEl, thisEl)) return thisEl;
-    if (thisEl.parentElement) {
-        return findOverflowParent(thisEl.parentElement, origEl);
-    } else {
-        return;
-    }
-};
-
-exports.findOverflowParent = findOverflowParent;
+"use strict";var isOverToolbarPosition=require("./isOverToolbarPosition.js"),isSection=require("./isSection.js"),notVisible=require("./notVisible.js");const findOverflowParent=(i,e)=>{let o=e||i;if(i&&!isSection.isSection(i))return notVisible.notVisible(i)&&isOverToolbarPosition.isOverToolbarPosition(e,i)?i:i.parentElement?findOverflowParent(i.parentElement,o):void 0};exports.findOverflowParent=findOverflowParent;

package/dist/cjs/components/builder/toolbar/utils/getChildrenByAttrSelector.js

@@ -1,18 +1 @@
-'use strict';
-
-const getChildrenByAttrSelector = ($el, attrSelector)=>{
-    const childLen = $el.children.length;
-    if (childLen) {
-        for(let i = 0; i < childLen; i++){
-            const children = $el.children[i];
-            if (children) {
-                const is = children.getAttribute(attrSelector);
-                if (is) {
-                    return children;
-                }
-            }
-        }
-    }
-};
-
-exports.getChildrenByAttrSelector = getChildrenByAttrSelector;
+"use strict";const getChildrenByAttrSelector=(t,e)=>{let r=t.children.length;if(r)for(let l=0;l<r;l++){let r=t.children[l];if(r){let t=r.getAttribute(e);if(t)return r}}};exports.getChildrenByAttrSelector=getChildrenByAttrSelector;