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

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

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

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

@@ -0,0 +1,54 @@
+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
+    }
+];
+
+export { devices };

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

@@ -0,0 +1,4 @@
+const TOOLBAR_HOVER_HEIGHT = 24;
+const TOOLBAR_ACTIVE_HEIGHT = 32;
+
+export { TOOLBAR_ACTIVE_HEIGHT, TOOLBAR_HOVER_HEIGHT };

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

@@ -0,0 +1,39 @@
+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;
+};
+
+export { findDOMClosest };

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

@@ -0,0 +1,18 @@
+import { isOverToolbarPosition } from './isOverToolbarPosition.js';
+import { isSection } from './isSection.js';
+import { notVisible } from './notVisible.js';
+
+const findOverflowParent = (element, initEl)=>{
+    const thisEl = element;
+    const origEl = initEl || thisEl;
+    if (!thisEl) return;
+    if (isSection(thisEl)) return;
+    if (notVisible(thisEl) && isOverToolbarPosition(initEl, thisEl)) return thisEl;
+    if (thisEl.parentElement) {
+        return findOverflowParent(thisEl.parentElement, origEl);
+    } else {
+        return;
+    }
+};
+
+export { findOverflowParent };

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

@@ -0,0 +1,16 @@
+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;
+                }
+            }
+        }
+    }
+};
+
+export { getChildrenByAttrSelector };

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

@@ -0,0 +1,30 @@
+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;
+};
+
+export { getDOMElementParents };

package/dist/esm/components/builder/toolbar/utils/isOverParent.js

@@ -0,0 +1,14 @@
+import { TOOLBAR_HOVER_HEIGHT } from '../const.js';
+
+const isOverParent = ({ current, parent, index, revert })=>{
+    for(let i = 0; i < index; i++){
+        let is = current.top - (TOOLBAR_HOVER_HEIGHT - 1) * i >= parent.top && current.top - (TOOLBAR_HOVER_HEIGHT - 1) * i <= parent.top + parent.height || current.top - (TOOLBAR_HOVER_HEIGHT - 1) * i >= parent.top + parent.height && current.top - (TOOLBAR_HOVER_HEIGHT - 1) * i <= parent.top;
+        if (revert) {
+            is = current.bottom + (TOOLBAR_HOVER_HEIGHT - 1) * i >= parent.bottom && current.bottom + (TOOLBAR_HOVER_HEIGHT - 1) * i <= parent.bottom - parent.height || current.bottom + (TOOLBAR_HOVER_HEIGHT - 1) * i >= parent.bottom - parent.height && current.bottom + (TOOLBAR_HOVER_HEIGHT - 1) * i <= parent.bottom;
+        }
+        if (is) return true;
+    }
+    return false;
+};
+
+export { isOverParent };

package/dist/esm/components/builder/toolbar/utils/isOverToolbarPosition.js

@@ -0,0 +1,10 @@
+import { TOOLBAR_ACTIVE_HEIGHT } from '../const.js';
+
+const isOverToolbarPosition = (el, parent)=>{
+    const rect = el.getBoundingClientRect();
+    const rectP = parent.getBoundingClientRect();
+    // 32px = toolbar active height
+    return rect.top - rectP.top < TOOLBAR_ACTIVE_HEIGHT + 1;
+};
+
+export { isOverToolbarPosition };