@gem-sdk/pages 2.0.0-dev.890 → 2.0.0-staging.118

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

@@ -1 +1,485 @@
-"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");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.setSalePageProductId),i=core.usePageStore(e=>e.setDynamicCollection),d=core.useBuilderPreviewStore(e=>e.initState),l=core.useBuilderPreviewStore(e=>e.state),s=core.useBuilderPreviewStore(e=>e.forceChangeState),c=core.useBuilderPreviewStore(e=>e.forceChangeItemProp),u=core.useBuilderPreviewStore(e=>e.changeItemPropByKey),p=core.useBuilderPreviewStore(e=>e.addItem),v=core.useBuilderPreviewStore(e=>e.moveItem),w=core.useBuilderPreviewStore(e=>e.removeItem),m=core.useSectionStore(e=>e.addSection),f=core.useShopStore(e=>e.changeSwatches),y=core.useBuilderPreviewStore(e=>e.updateItemName),g=core.useBuilderPreviewStore(e=>e.updateItemAttribute),h=core.useShopStore(e=>e.changeLayoutSettings),S=core.useShopStore(e=>e.changeCreateThemeSectionCount),b=core.useShopStore(e=>e.changeShopPlan),E=core.useModalStore(e=>e.clearModal),L=react.useMemo(()=>genFonts.getFontsFromDataBuilder(l),[l]),C=(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("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]);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)}}}},k=react.useCallback(()=>{e(/query\//,{revalidate:!0})},[e]),P=react.useCallback(e=>{let r=e.detail;o({url:r.shopHandle?getStorefrontApi.getStorefrontApi(r.shopHandle,t):void 0,token:r.shopToken})},[o,t]),q=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(C("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{}},[]),B=react.useCallback(e=>{E();try{let t=e.detail;t.data&&("flat"===t.type?s(t.data):d(t.data))}catch{}},[s,d,E]),I=react.useCallback(e=>{try{let t=e.detail;t.entity&&(p({data:t.entity,id:t.id,position:t.position,type:t.type??"component"}),t?.type!=="section"||Array.isArray(t.entity)||m(t.entity.uid,t.entity))}catch{}},[p,m]),j=react.useCallback(e=>{try{let t=e.detail;t.uid&&t.propName&&u({id:t.uid,key:t.propName,data:t.propValue,group:t.group})}catch{}},[u]),x=react.useCallback(e=>{try{let t=e.detail;t.uid&&c(t.uid,t.data,t.group)}catch{}},[c]),A=react.useCallback(e=>{try{let t=e.detail;t.to&&t.uid&&v(t.uid,t.to,Number(t.position)??0)}catch{}},[v]),F=react.useCallback(e=>{try{let t=e.detail;t.uid&&w(t.uid)}catch{}},[w]),M=react.useCallback(e=>{let t=e.detail;try{t.data&&f(t.data)}catch{}},[f]),N=react.useCallback(e=>{let t=e.detail;t&&h(t)},[h]),T=react.useCallback(e=>{let t=e.detail;t&&S(t)},[S]),$=react.useCallback(e=>{let t=e.detail;t&&b(t)},[b]),O=react.useCallback(e=>{let t=e.detail;t&&r(t)},[r]),H=react.useCallback(e=>{let t=e.detail;t&&i(t)},[i]);react.useEffect(()=>{L&&C("google-font-element",L)},[L]);let D=react.useCallback(e=>{let t=e.detail;t.uid&&y(t.uid,t.name||"")},[y]),G=react.useCallback(e=>{let t=e.detail;t.uid&&g(t.uid,t.value||"",t.attr||"")},[g]),W=react.useCallback(e=>{let t=e.detail;t?.length&&a(t)},[a]),J=react.useCallback(e=>{let t=e.detail;t&&n(t)},[n]);return react.useEffect(()=>{L&&C("google-font-element",L)},[L]),react.useEffect(()=>(window.addEventListener("update-shop-info",P),window.addEventListener("revalidate-query",k),window.addEventListener("init-builder",B),window.addEventListener("add-entity",I),window.addEventListener("remove-entity",F),window.addEventListener("move-entity",A),window.addEventListener("force-update-entity-props",x),window.addEventListener("update-entity-prop",j),window.addEventListener("set-global-style",q),window.addEventListener("update-global-swatches-data",M),window.addEventListener("on-off-header-footer",N),window.addEventListener("update-create-theme-section-count",T),window.addEventListener("update-shop-plan",$),window.addEventListener("set-dynamic-product",O),window.addEventListener("set-dynamic-collection",H),window.addEventListener("update-item-name",D),window.addEventListener("update-item-attribute",G),window.addEventListener("set-product-offer",W),window.addEventListener("update-sale-page-product-id",J),()=>{window.removeEventListener("update-shop-info",P),window.removeEventListener("revalidate-query",k),window.removeEventListener("init-builder",B),window.removeEventListener("add-entity",I),window.removeEventListener("remove-entity",F),window.removeEventListener("move-entity",A),window.removeEventListener("update-entity-prop",j),window.removeEventListener("set-global-style",q),window.removeEventListener("update-global-swatches-data",M),window.removeEventListener("on-off-header-footer",N),window.removeEventListener("update-create-theme-section-count",T),window.removeEventListener("update-shop-plan",$),window.removeEventListener("set-dynamic-product",O),window.removeEventListener("set-dynamic-collection",H),window.removeEventListener("update-item-name",D),window.removeEventListener("update-item-attribute",G),window.removeEventListener("set-product-offer",W),window.removeEventListener("update-sale-page-product-id",J)}),[I,$,x,j,B,A,F,q,M,k,P,N,T,O,H,D,G,W,J]),jsxRuntime.jsx("div",{className:"toolbox"})};var Toolbox$1=react.memo(Toolbox);exports.default=Toolbox$1;
+'use client';
+'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 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 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('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
+    ]);
+    return /*#__PURE__*/ jsxRuntime.jsx("div", {
+        className: "toolbox"
+    });
+};
+var Toolbox$1 = /*#__PURE__*/ react.memo(Toolbox);
+
+exports.default = Toolbox$1;

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

@@ -0,0 +1,56 @@
+'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

@@ -0,0 +1,7 @@
+'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;

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

@@ -0,0 +1,41 @@
+'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;

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

@@ -0,0 +1,20 @@
+'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;

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

@@ -0,0 +1,18 @@
+'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;

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

@@ -0,0 +1,32 @@
+'use strict';
+
+const getDOMElementParents = ($el, selector, limit)=>{
+    // Set up a parent array
+    const parents = [];
+    // Push each parent $elms to the array
+    while($el){
+        $el = $el.parentElement ?? undefined;
+        if ($el) {
+            if ($el.tagName === 'BODY' || $el.getAttribute('data-uid') === 'ROOT') {
+                break;
+            }
+            if (selector) {
+                if ($el.matches(selector)) {
+                    parents.push($el);
+                    if (limit && parents.length == limit) {
+                        return parents;
+                    }
+                }
+                continue;
+            }
+            parents.push($el);
+            if (limit && parents.length == limit) {
+                return parents;
+            }
+        }
+    }
+    // Return our parent array
+    return parents;
+};
+
+exports.getDOMElementParents = getDOMElementParents;