@gem-sdk/pages 1.36.6 → 2.0.0-dev.832

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

@@ -1,879 +1 @@
-import { jsx } from 'react/jsx-runtime';
-import { memo, useRef, useState, useCallback, useEffect } from 'react';
-import Onboarding from './toolbar/Onboarding.js';
-
-const TOOLBAR_HOVER_HEIGHT = 24;
-const TOOLBAR_ACTIVE_HEIGHT = 32;
-const isPopup = (el)=>{
-    const tag = el.getAttribute('data-component-tag');
-    return tag === 'Dialog';
-};
-const isSticky = (el)=>{
-    const tag = el.getAttribute('data-component-tag');
-    return tag === 'Sticky';
-};
-const Toolbar = ()=>{
-    const currentComponentActive = useRef(null);
-    const isDragging = useRef(false);
-    const stopWatchReRenderComponent = useRef();
-    const isResizeSpacing = useRef(false);
-    const [isOnboarding, setIsOnboarding] = useState(false);
-    const [countShowOnboarding, setCountShowOnboarding] = useState(0);
-    const [onboardingPosition, setOnboardingPosition] = useState('bottom');
-    const timeoutRef = useRef(null);
-    const timeoutOnboarding = 5000;
-    /* Functions */ const changePositionToolbar = ({ state, $toolbar, $component })=>{
-        const $parentOverflow = findOverflowParent($component, $toolbar);
-        const rect = $toolbar.getBoundingClientRect();
-        const rectComponent = $component.getBoundingClientRect();
-        const windowWidth = window.innerWidth;
-        if ($parentOverflow) {
-            if (rectComponent?.height <= 60) {
-                $toolbar.setAttribute(`data-toolbar-${state}-revert`, 'true');
-            } else {
-                $toolbar.setAttribute(`data-toolbar-${state}-inside`, 'true');
-            }
-            // fix toolbar overflow right side
-            if (rectComponent.left + rect.width > windowWidth) {
-                $toolbar.setAttribute(`data-toolbar-${state}-overflow`, 'true');
-            }
-        } else {
-            if (rect.top < TOOLBAR_ACTIVE_HEIGHT + 1) {
-                if (rectComponent?.height <= 60) {
-                    $toolbar.setAttribute(`data-toolbar-${state}-revert`, 'true');
-                } else {
-                    $toolbar.setAttribute(`data-toolbar-${state}-inside`, 'true');
-                }
-            }
-            // fix toolbar overflow right side
-            if (rectComponent.left + rect.width > windowWidth) {
-                $toolbar.setAttribute(`data-toolbar-${state}-overflow`, 'true');
-            }
-        }
-        // fix Popup overflow right position
-        const popupEl = $component?.closest('[aria-label="Dialog body"]');
-        if (popupEl) {
-            const rectPopupEl = popupEl.getBoundingClientRect();
-            const popupElRightPosition = rectPopupEl.left + rectPopupEl.width - 20;
-            if (rectComponent.left + rect.width > popupElRightPosition) {
-                $toolbar.setAttribute(`data-toolbar-${state}-overflow`, 'true');
-            }
-        }
-    };
-    const setHoverComponent = useCallback(({ $component, componentUid, focus, isThemeSection, isParent })=>{
-        if (!$component && !componentUid) return;
-        if (!$component) {
-            const $c = document.querySelector(`[data-uid="${componentUid}"]`);
-            if (!$c) return;
-            $component = $c;
-        }
-        if (!componentUid) {
-            const cUid = $component.getAttribute('data-uid');
-            if (!cUid) return;
-            componentUid = cUid;
-        }
-        const $toolbar = getChildrenByAttrSelector($component, 'data-toolbar');
-        const $outline = getChildrenByAttrSelector($component, 'data-outline');
-        const $btnAddTop = getChildrenByAttrSelector($component, 'data-toolbar-add-top');
-        const $btnAddBottom = getChildrenByAttrSelector($component, 'data-toolbar-add-bottom');
-        const $themeSectionStatus = getChildrenByAttrSelector($component, 'data-theme-section-status');
-        if (isThemeSection && $themeSectionStatus) {
-            $themeSectionStatus.setAttribute('data-theme-section-status-active', 'true');
-        }
-        if ($toolbar) {
-            $toolbar.removeAttribute('style');
-            if (!isParent) {
-                $toolbar.setAttribute('data-toolbar-hover', 'true');
-            }
-            if (focus) {
-                $toolbar.setAttribute('data-toolbar-hover-focus', 'true');
-            }
-            changePositionToolbar({
-                $toolbar,
-                $component,
-                state: 'hover'
-            });
-        }
-        if ($outline) {
-            $outline.setAttribute('data-outline-hover', 'true');
-            if (isParent) {
-                $outline.setAttribute('data-outline-parent-hover', 'true');
-            }
-            if (isThemeSection) {
-                $outline.setAttribute('data-outline-overlay-theme-section', 'true');
-            }
-            if (focus) {
-                $outline.setAttribute('data-outline-hover-focus', 'true');
-            }
-        }
-        if ($btnAddTop) {
-            if (!isParent) {
-                $btnAddTop.setAttribute('data-toolbar-add-hover', 'true');
-            }
-        }
-        if ($btnAddBottom) {
-            if (!isParent) {
-                $btnAddBottom.setAttribute('data-toolbar-add-hover', 'true');
-            }
-        }
-    }, []);
-    const setHoverComponentParents = useCallback(({ $component, componentUid })=>{
-        if (!$component) {
-            const $c = document.querySelector(`[data-uid="${componentUid}"]`);
-            if (!$c) return;
-            $component = $c;
-        }
-        const $parents = getDOMElementParents($component, '[data-uid][data-component-type="component"]:not([data-component-no-setting])', 1);
-        if ($parents.length) {
-            for (const $parent of $parents){
-                if ($parent) {
-                    setHoverComponent({
-                        $component: $parent,
-                        isParent: true
-                    });
-                }
-            }
-            changePositionToolbarParents({
-                $component,
-                $parents
-            });
-        }
-    }, [
-        setHoverComponent
-    ]);
-    const changePositionToolbarParents = ({ $component, $parents })=>{
-        if (!$component) return;
-        if (!$parents?.length) return;
-        const $currentToolbar = getChildrenByAttrSelector($component, 'data-toolbar-hover-focus');
-        if ($currentToolbar) {
-            const currentRect = $currentToolbar.getBoundingClientRect();
-            const isRevert = $currentToolbar.getAttribute('data-toolbar-hover-revert') ? true : false;
-            const isInside = $currentToolbar.getAttribute('data-toolbar-hover-inside') ? true : false;
-            let index = 1;
-            for (const $parent of $parents){
-                if ($parent) {
-                    const tag = $parent.getAttribute('data-component-tag');
-                    if (tag === 'Section') continue;
-                    const $toolbar = getChildrenByAttrSelector($parent, 'data-toolbar-hover');
-                    if ($toolbar) {
-                        // Ignore with toolbar active
-                        const isActive = $toolbar.getAttribute('data-toolbar-active');
-                        if (isActive) continue;
-                        // Start calc
-                        const parentRect = $toolbar.getBoundingClientRect();
-                        const checkRevert = isRevert || isInside;
-                        if (isOverParent({
-                            current: currentRect,
-                            parent: parentRect,
-                            index,
-                            revert: checkRevert
-                        })) {
-                            const parentStyle = getComputedStyle($toolbar);
-                            // parentStyle.top
-                            const diffTop = currentRect.top - parentRect.top;
-                            const diffLeft = currentRect.left - parentRect.left;
-                            let newTop = parseFloat(parentStyle.top) + diffTop - (TOOLBAR_HOVER_HEIGHT - 1) * index; // -1 border bottom
-                            if (checkRevert) {
-                                newTop = parseFloat(parentStyle.top) - diffTop + (TOOLBAR_HOVER_HEIGHT - 1) * index; // -1 border bottom
-                            }
-                            const newLeft = parseFloat(parentStyle.left) + diffLeft;
-                            $toolbar.setAttribute('style', `top: ${newTop}px;left: ${newLeft}px;`);
-                            index++;
-                        }
-                    }
-                }
-            }
-        }
-    };
-    const removeHoverOverlayComponent = useCallback(()=>{
-        const clearAttrs = [
-            'data-outline-overlay',
-            'data-outline-overlay-theme-section',
-            'data-theme-section-status-active'
-        ];
-        const $elms = document.querySelectorAll(clearAttrs.map((attr)=>`[${attr}]`).join(','));
-        if ($elms) {
-            clearAttrs.forEach((attr)=>{
-                $elms.forEach(($el)=>$el.removeAttribute(attr));
-            });
-        }
-    }, []);
-    const removeHoverComponent = useCallback(()=>{
-        const clearAttrs = [
-            'data-toolbar-hover-focus',
-            'data-toolbar-hover',
-            'data-outline-hover-focus',
-            'data-toolbar-hover-revert',
-            'data-toolbar-hover-inside',
-            'data-outline-hover',
-            'data-toolbar-add-hover',
-            'data-outline-parent-hover',
-            'data-toolbar-hover-overflow'
-        ];
-        const $elms = document.querySelectorAll(clearAttrs.map((attr)=>`[${attr}]`).join(','));
-        if ($elms) {
-            clearAttrs.forEach((attr)=>{
-                $elms.forEach(($el)=>$el.removeAttribute(attr));
-            });
-        }
-        removeHoverOverlayComponent();
-    }, [
-        removeHoverOverlayComponent
-    ]);
-    const onCloseOnboarding = useCallback(()=>{
-        timeoutRef.current && clearTimeout(timeoutRef.current);
-        if (countShowOnboarding > 0) {
-            const eventCreate = new CustomEvent('editor:toolbar:close-onboarding', {
-                bubbles: true,
-                detail: {
-                    close: 'close Onboarding'
-                }
-            });
-            window.dispatchEvent(eventCreate);
-            setIsOnboarding(false);
-        }
-    }, [
-        countShowOnboarding
-    ]);
-    const removeActiveComponent = useCallback(()=>{
-        currentComponentActive.current = null;
-        const clearAttrs = [
-            'data-toolbar-active',
-            'data-outline-active',
-            'data-toolbar-add-active',
-            'data-toolbar-active-revert',
-            'data-toolbar-active-inside',
-            'data-spacing-margin-bottom-active',
-            'data-toolbar-force-hover',
-            'data-outline-force-hover',
-            'data-toolbar-active-overflow'
-        ];
-        const $elms = document.querySelectorAll(clearAttrs.map((attr)=>`[${attr}]`).join(','));
-        if ($elms) {
-            clearAttrs.forEach((attr)=>{
-                $elms.forEach(($el)=>$el.removeAttribute(attr));
-            });
-        }
-        setFocusTextEditor(false);
-        if (stopWatchReRenderComponent.current) stopWatchReRenderComponent.current();
-        onCloseOnboarding();
-    }, [
-        onCloseOnboarding
-    ]);
-    const watchComponentReRender = ($el, callback)=>{
-        // editor:component:render
-        const onComponentReRender = (e)=>{
-            const detail = e.detail;
-            if (detail?.componentUid == currentComponentActive.current?.componentUid) {
-                callback();
-            }
-        };
-        window.removeEventListener('editor:component:render', onComponentReRender);
-        window.addEventListener('editor:component:render', onComponentReRender);
-        const $images = $el.querySelectorAll('img');
-        if ($images?.length) {
-            $images.forEach(($img)=>{
-                $img.addEventListener('load', ()=>{
-                    callback();
-                });
-            });
-        }
-        stopWatchReRenderComponent.current = ()=>{
-            window.removeEventListener('editor:component:render', onComponentReRender);
-        };
-    };
-    const setActiveComponentSpacing = useCallback(({ $component })=>{
-        if (!$component) return;
-        const style = getComputedStyle($component);
-        const $spacing = getChildrenByAttrSelector($component, 'data-spacing');
-        const $marginBottom = ($spacing?.querySelector('[data-spacing-margin-bottom]')) || null;
-        if ($marginBottom) {
-            const $bg = $marginBottom.querySelector('[data-spacing-margin-bottom-bg]') || null;
-            const $drag = $marginBottom.querySelector('[data-spacing-margin-bottom-drag]') || null;
-            if ($bg && $drag) {
-                const value = style.marginBottom;
-                $bg.style.height = value;
-                $drag.style.top = value;
-                $marginBottom.setAttribute('data-spacing-margin-bottom-active', 'true');
-            }
-        }
-    }, []);
-    const calculateOnboardingPosition = ()=>{
-        const toolbar = document.querySelector('[data-toolbar-active]');
-        const toolbarOnboading = document.querySelector('[data-toolbar-onboarding]');
-        if (toolbar && toolbarOnboading) {
-            toolbarOnboading?.removeAttribute('data-onboarding-active');
-            setTimeout(()=>{
-                const rect = toolbar.getBoundingClientRect();
-                const rectTop = rect.top || 0;
-                const rectOnboading = toolbarOnboading?.getBoundingClientRect();
-                const onboardingHeight = rectOnboading?.height || 0;
-                const $iframe = parent.document.querySelector('.iframe');
-                const $iframeWin = $iframe?.contentWindow;
-                const iframeWinScrollY = $iframeWin?.scrollY || 0;
-                const iframeHeight = $iframe?.clientHeight || 0;
-                if (rectTop + onboardingHeight > iframeHeight) {
-                    const oboardingTop = rect.top + iframeWinScrollY - onboardingHeight - 8;
-                    toolbarOnboading?.setAttribute('style', `top: ${oboardingTop}px;left: ${rect.left}px;`);
-                    setOnboardingPosition('top');
-                    if ($iframeWin && oboardingTop < rect.top + iframeWinScrollY) {
-                        setTimeout(()=>{
-                            const toTop = oboardingTop - 20;
-                            $iframeWin.scrollTo({
-                                top: toTop,
-                                behavior: 'smooth'
-                            });
-                        }, 200);
-                    }
-                } else {
-                    const oboardingTop = rect.top + iframeWinScrollY + rect.height + 8;
-                    toolbarOnboading?.setAttribute('style', `top: ${oboardingTop}px;left: ${rect.left}px;`);
-                    setOnboardingPosition('bottom');
-                }
-                setCountShowOnboarding((countShowOnboarding)=>countShowOnboarding + 1);
-                toolbarOnboading?.setAttribute('data-onboarding-active', 'true');
-            }, 100);
-        }
-    };
-    const setToolbarOnboarding = useCallback(({ $component })=>{
-        if (!$component) return;
-        if (isSection($component) || isPopup($component) || isSticky($component)) return;
-        const toolbarOnboading = document.querySelector('[data-toolbar-onboarding]');
-        // only show one time
-        if (countShowOnboarding == 0) {
-            calculateOnboardingPosition();
-        } else {
-            onCloseOnboarding();
-            toolbarOnboading?.removeAttribute('data-onboarding-active');
-        }
-    }, [
-        countShowOnboarding,
-        onCloseOnboarding
-    ]);
-    const setActiveComponent = useCallback(async ({ componentUid, productId, timeAwait = 500, forceReActive })=>{
-        if (!componentUid) return;
-        let $component = await waitForElementToExist(`${productId ? `[data-product-id="${productId}"] ` : ''}[data-uid="${componentUid}"]`, timeAwait);
-        // check element fetch data: product, product list
-        if (!$component) {
-            const isLoading = document.querySelector(`.gp-loading-placeholder`);
-            if (!isLoading) {
-                return;
-            }
-            if (isLoading) {
-                // await element onload
-                $component = await waitForElementToExist(`${productId ? `[data-product-id="${productId}"] ` : ''}[data-uid="${componentUid}"]`, 15000);
-            }
-        }
-        if (!$component) {
-            return;
-        }
-        if (!forceReActive && componentUid == currentComponentActive.current?.componentUid && productId == currentComponentActive.current?.productId) return;
-        if (componentUid !== currentComponentActive.current?.componentUid || productId !== currentComponentActive.current?.productId || forceReActive) removeActiveComponent();
-        const $toolbar = getChildrenByAttrSelector($component, 'data-toolbar');
-        const $outline = getChildrenByAttrSelector($component, 'data-outline');
-        const $btnAddTop = getChildrenByAttrSelector($component, 'data-toolbar-add-top');
-        const $btnAddBottom = getChildrenByAttrSelector($component, 'data-toolbar-add-bottom');
-        if ($toolbar) {
-            currentComponentActive.current = {
-                componentUid,
-                productId
-            };
-            $toolbar.removeAttribute('style');
-            $toolbar.setAttribute('data-toolbar-active', 'true');
-            changePositionToolbar({
-                $toolbar,
-                $component,
-                state: 'active'
-            });
-        }
-        if ($outline) {
-            $outline.setAttribute('data-outline-active', 'true');
-        }
-        if ($btnAddTop) {
-            $btnAddTop.setAttribute('data-toolbar-add-active', 'true');
-        }
-        if ($btnAddBottom) {
-            $btnAddBottom.setAttribute('data-toolbar-add-active', 'true');
-        }
-        // Active same element in product list
-        if (productId) {
-            const $relatedElements = document.querySelectorAll(`[data-uid="${componentUid}"]`);
-            if ($relatedElements?.length) {
-                $relatedElements.forEach(($relatedElement)=>{
-                    const $outline = getChildrenByAttrSelector($relatedElement, 'data-outline');
-                    if ($outline) {
-                        $outline.setAttribute('data-outline-active', 'true');
-                    }
-                });
-            }
-        }
-        setActiveComponentSpacing({
-            $component
-        });
-        timeoutRef.current && clearTimeout(timeoutRef.current);
-        timeoutRef.current = setTimeout(()=>{
-            if ($component) {
-                setToolbarOnboarding({
-                    $component
-                });
-            }
-        }, timeoutOnboarding);
-        removeHoverComponent();
-        // Reactive when component re-render
-        watchComponentReRender($component, ()=>{
-            setActiveComponent({
-                componentUid,
-                productId,
-                timeAwait: 2000,
-                forceReActive: true
-            });
-        });
-    }, [
-        removeActiveComponent,
-        removeHoverComponent,
-        setActiveComponentSpacing,
-        setToolbarOnboarding
-    ]);
-    const setFocusTextEditor = async (value)=>{
-        if (!value) {
-            const $components = document.querySelectorAll('[data-outline-editor-inline-focus],[data-toolbar-editor-inline-focus],[data-spacing-hidden]');
-            if ($components.length) {
-                $components.forEach(($component)=>{
-                    if ($component) {
-                        $component.removeAttribute('data-toolbar-editor-inline-focus');
-                        $component.removeAttribute('data-outline-editor-inline-focus');
-                        $component.removeAttribute('data-spacing-hidden');
-                    }
-                });
-            }
-        } else {
-            if (currentComponentActive.current?.componentUid) {
-                const componentUid = currentComponentActive.current?.componentUid;
-                const productId = currentComponentActive.current?.productId;
-                const $component = await waitForElementToExist(`${productId ? `[data-product-id="${productId}"] ` : ''}[data-uid="${componentUid}"]`, 500);
-                if ($component) {
-                    const $toolbar = getChildrenByAttrSelector($component, 'data-toolbar');
-                    const $outline = getChildrenByAttrSelector($component, 'data-outline');
-                    const $spacing = getChildrenByAttrSelector($component, 'data-spacing');
-                    if ($toolbar) {
-                        if (value) {
-                            $toolbar.setAttribute('data-toolbar-editor-inline-focus', 'true');
-                        }
-                    }
-                    if ($outline) {
-                        if (value) {
-                            $outline.setAttribute('data-outline-editor-inline-focus', 'true');
-                        }
-                    }
-                    if ($spacing) {
-                        if (value) {
-                            $spacing.setAttribute('data-spacing-hidden', 'true');
-                        }
-                    }
-                }
-            }
-        }
-    };
-    const hoverActiveThemeSection = useCallback(($target)=>{
-        const $themeSection = $target.closest('[data-theme-section]');
-        const $themeSectionUid = $themeSection?.getAttribute('data-uid');
-        const isActiveThemeSection = $themeSection && $themeSectionUid === currentComponentActive.current?.componentUid;
-        if (!isActiveThemeSection) return;
-        const $themeSectionStatus = getChildrenByAttrSelector($themeSection, 'data-theme-section-status');
-        if ($themeSectionStatus) {
-            $themeSectionStatus.setAttribute('data-theme-section-status-active', 'true');
-        }
-    }, []);
-    const setShowParents = async ({ value })=>{
-        if (!value) {
-            return;
-        }
-        const $component = await waitForElementToExist(`${currentComponentActive.current?.productId ? `[data-product-id="${currentComponentActive.current?.productId}"] ` : ''}[data-uid="${currentComponentActive.current?.componentUid}"]`, 500);
-        if ($component) {
-            const $parents = $component?.querySelectorAll('[data-toolbar-parent]');
-            if ($parents.length) {
-                const onHover = ($parent)=>{
-                    const uid = $parent.getAttribute('data-parent-uid');
-                    if (!uid) return;
-                    const $parentComponents = document.querySelectorAll(`[data-uid="${uid}"]`);
-                    if ($parentComponents.length) {
-                        $parentComponents.forEach(($parentComponent)=>{
-                            const $outline = getChildrenByAttrSelector($parentComponent, 'data-outline');
-                            if ($outline) {
-                                $outline.setAttribute('data-outline-force-hover', 'true');
-                                $outline.setAttribute('data-outline-force-overlay', 'true');
-                            }
-                        });
-                    }
-                };
-                const outHover = ($parent)=>{
-                    const uid = $parent.getAttribute('data-parent-uid');
-                    if (!uid) return;
-                    const $parentComponents = document.querySelectorAll(`[data-uid="${uid}"]`);
-                    if ($parentComponents.length) {
-                        $parentComponents.forEach(($parentComponent)=>{
-                            const $outline = getChildrenByAttrSelector($parentComponent, 'data-outline');
-                            if ($outline) {
-                                $outline.removeAttribute('data-outline-force-hover');
-                                $outline.removeAttribute('data-outline-force-overlay');
-                            }
-                        });
-                    }
-                };
-                const onClick = async ($parent)=>{
-                    const uid = $parent.getAttribute('data-parent-uid');
-                    if (!uid) return;
-                    const isElementInsideProduct = async ()=>{
-                        const $component = await waitForElementToExist(`[data-uid="${uid}"]`, 500);
-                        const $product = $component?.closest('[data-product-id]');
-                        const productId = $product?.getAttribute('data-product-id') || '';
-                        return productId ? true : false;
-                    };
-                    let productId = '';
-                    if (await isElementInsideProduct()) {
-                        productId = currentComponentActive.current?.productId || '';
-                    }
-                    const event = new CustomEvent('editor:toolbar:force-active-component', {
-                        bubbles: true,
-                        detail: {
-                            componentUid: uid,
-                            productId: productId
-                        }
-                    });
-                    outHover($parent);
-                    window.dispatchEvent(event);
-                };
-                $parents.forEach(($parent)=>{
-                    $parent.addEventListener('mouseover', ()=>onHover($parent));
-                    $parent.addEventListener('mouseout', ()=>outHover($parent));
-                    $parent.addEventListener('click', ()=>onClick($parent));
-                });
-            }
-        }
-    };
-    /* Event listener */ const onMouseMove = useCallback((e)=>{
-        if (isDragging.current) return;
-        if (isResizeSpacing.current) return;
-        const $target = e.target;
-        if (!$target || typeof $target.closest !== 'function') {
-            removeHoverOverlayComponent();
-            return;
-        }
-        const $toolbarHover = $target.closest('[data-toolbar-hover]');
-        if ($toolbarHover) {
-            // Disable feature overlay when hover to toolbar parents
-            return;
-        // removeHoverOverlayComponent(); // remove overlay old
-        // // Hover to toolbar is focus
-        // if ($toolbarHover?.getAttribute('data-toolbar-hover-focus')) return;
-        // const $component = $target.closest('[data-toolbar-wrap]');
-        // if (!$component) return;
-        // const $outline = getChildrenByAttrSelector($component, 'data-outline');
-        // if (!$outline) return;
-        // const isThemeSection = $component.getAttribute('data-theme-section');
-        // const outlineOverlay = isThemeSection
-        //   ? 'data-outline-overlay-theme-section'
-        //   : 'data-outline-overlay';
-        // $outline.setAttribute(outlineOverlay, 'true');
-        }
-        // Hover to other component
-        const $component = $target.closest('[data-toolbar-wrap]');
-        const componentUid = $component?.getAttribute('data-uid');
-        if (!$component || !componentUid || componentUid == 'ROOT') {
-            removeHoverComponent();
-            return;
-        }
-        const $toolbar = getChildrenByAttrSelector($component, 'data-toolbar');
-        const $outline = getChildrenByAttrSelector($component, 'data-outline');
-        if ($outline) $outline.removeAttribute('data-outline-overlay');
-        if (!componentUid) return;
-        if (componentUid == 'ROOT') return;
-        if ($toolbar?.getAttribute('data-toolbar-hover-focus')) return;
-        if (!$toolbar?.getAttribute('data-toolbar-hover-focus')) removeHoverComponent();
-        hoverActiveThemeSection($target);
-        // Disable event when hover active component
-        if (componentUid == currentComponentActive.current?.componentUid) {
-            if (currentComponentActive.current.productId) {
-                const $product = $component.closest(`[data-product-id]`);
-                if ($product) {
-                    const productId = $product.getAttribute('data-product-id');
-                    if (productId == currentComponentActive.current.productId) {
-                        removeHoverComponent();
-                        return;
-                    }
-                }
-            }
-            const $themeSection = $target.closest('[data-theme-section]');
-            if ($themeSection) {
-                setHoverComponent({
-                    $component: $themeSection,
-                    focus: true,
-                    isThemeSection: true
-                });
-            } else {
-                return;
-            }
-        }
-        const $themeSection = $target.closest('[data-theme-section]');
-        if ($themeSection) {
-            setHoverComponent({
-                $component: $themeSection,
-                focus: true,
-                isThemeSection: true
-            });
-        } else {
-            setHoverComponent({
-                $component,
-                componentUid,
-                focus: true
-            });
-            setHoverComponentParents({
-                $component,
-                componentUid
-            });
-        }
-    }, [
-        hoverActiveThemeSection,
-        removeHoverComponent,
-        setHoverComponent,
-        setHoverComponentParents,
-        removeHoverOverlayComponent,
-        currentComponentActive
-    ]);
-    const onActiveComponent = useCallback((e)=>{
-        if (isDragging.current) return;
-        const detail = e.detail;
-        if (detail?.componentUid) {
-            setActiveComponent({
-                componentUid: detail.componentUid,
-                productId: detail.productId
-            });
-        } else {
-            removeActiveComponent();
-        }
-    }, [
-        setActiveComponent,
-        removeActiveComponent,
-        isDragging
-    ]);
-    const onFocusOutsidePreview = useCallback(()=>{
-        removeHoverComponent();
-    }, [
-        removeHoverComponent
-    ]);
-    const onIsDragging = useCallback((e)=>{
-        const detail = e.detail;
-        if (detail.value) {
-            removeHoverComponent();
-            removeActiveComponent();
-        }
-        isDragging.current = detail.value;
-    }, [
-        removeHoverComponent,
-        removeActiveComponent
-    ]);
-    const onIsEditingTextEditor = useCallback((e)=>{
-        const detail = e.detail;
-        if (detail.value) {
-            setFocusTextEditor(true);
-        } else {
-            setFocusTextEditor(false);
-        }
-    }, []);
-    const onShowParents = useCallback((e)=>{
-        if (isDragging.current) return;
-        const detail = e.detail;
-        setShowParents({
-            value: detail?.value || false
-        });
-    }, []);
-    const onResizeSpacing = useCallback((e)=>{
-        const detail = e.detail;
-        if (detail?.value) {
-            removeHoverComponent();
-            isResizeSpacing.current = true;
-        } else {
-            isResizeSpacing.current = false;
-        }
-    }, [
-        removeHoverComponent
-    ]);
-    const setHoverParentComponent = (uid, type)=>{
-        if (!uid) return;
-        const $parentComponents = document.querySelectorAll(`[data-uid="${uid}"]`);
-        if ($parentComponents.length) {
-            $parentComponents.forEach(($parentComponent)=>{
-                const $outline = getChildrenByAttrSelector($parentComponent, 'data-outline');
-                if ($outline) {
-                    if (type === 'in') {
-                        $outline.setAttribute('data-outline-force-hover', 'true');
-                        $outline.setAttribute('data-outline-force-overlay', 'true');
-                    } else {
-                        $outline.removeAttribute('data-outline-force-hover');
-                        $outline.removeAttribute('data-outline-force-overlay');
-                    }
-                }
-            });
-        }
-    };
-    const onHoverComponent = useCallback((e)=>{
-        if (isDragging.current) return;
-        const detail = e.detail;
-        if (detail?.componentUid) {
-            setHoverParentComponent(detail?.componentUid, detail?.type);
-        }
-    }, [
-        isDragging
-    ]);
-    const onToolbarOnboarding = useCallback((e)=>{
-        const detail = e.detail;
-        if (detail?.isNewUser) {
-            setIsOnboarding(true);
-        }
-    }, []);
-    const onWindowResize = useCallback(()=>{
-        if (isOnboarding) {
-            calculateOnboardingPosition();
-        }
-    }, [
-        isOnboarding
-    ]);
-    /* Register event */ useEffect(()=>{
-        document.addEventListener('mousemove', onMouseMove);
-        window.addEventListener('editor:active-component', onActiveComponent);
-        window.addEventListener('editor:focus-outside-preview', onFocusOutsidePreview);
-        window.addEventListener('editor:is-dragging', onIsDragging);
-        window.addEventListener('editor:is-editing-text-editor', onIsEditingTextEditor);
-        window.addEventListener('editor:toolbar:show-parents', onShowParents);
-        window.addEventListener('editor:toolbar:resize-spacing', onResizeSpacing);
-        window.addEventListener('editor:hover-component', onHoverComponent);
-        window.addEventListener('editor:toolbar-onboarding', onToolbarOnboarding);
-        window.addEventListener('resize', onWindowResize);
-        return ()=>{
-            document.removeEventListener('mousemove', onMouseMove);
-            window.removeEventListener('editor:active-component', onActiveComponent);
-            window.removeEventListener('editor:is-dragging', onFocusOutsidePreview);
-            window.removeEventListener('editor:is-dragging', onIsDragging);
-            window.removeEventListener('editor:is-editing-text-editor', onIsEditingTextEditor);
-            window.removeEventListener('editor:toolbar:show-parents', onShowParents);
-            window.removeEventListener('editor:toolbar:resize-spacing', onResizeSpacing);
-            window.removeEventListener('editor:hover-component', onHoverComponent);
-            window.removeEventListener('editor:toolbar-onboarding', onToolbarOnboarding);
-            window.removeEventListener('resize', onWindowResize);
-        };
-    }, [
-        onMouseMove,
-        onActiveComponent,
-        onFocusOutsidePreview,
-        onIsDragging,
-        onIsEditingTextEditor,
-        onShowParents,
-        onResizeSpacing,
-        onHoverComponent,
-        onToolbarOnboarding,
-        onWindowResize
-    ]);
-    return isOnboarding && /*#__PURE__*/ jsx(Onboarding, {
-        enable: true,
-        position: onboardingPosition,
-        onCloseOnboarding: onCloseOnboarding
-    });
-};
-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;
-};
-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;
-                }
-            }
-        }
-    }
-};
-const isOverParent = ({ current, parent: parent1, index, revert })=>{
-    for(let i = 0; i < index; i++){
-        let is = current.top - (TOOLBAR_HOVER_HEIGHT - 1) * i >= parent1.top && current.top - (TOOLBAR_HOVER_HEIGHT - 1) * i <= parent1.top + parent1.height || current.top - (TOOLBAR_HOVER_HEIGHT - 1) * i >= parent1.top + parent1.height && current.top - (TOOLBAR_HOVER_HEIGHT - 1) * i <= parent1.top;
-        if (revert) {
-            is = current.bottom + (TOOLBAR_HOVER_HEIGHT - 1) * i >= parent1.bottom && current.bottom + (TOOLBAR_HOVER_HEIGHT - 1) * i <= parent1.bottom - parent1.height || current.bottom + (TOOLBAR_HOVER_HEIGHT - 1) * i >= parent1.bottom - parent1.height && current.bottom + (TOOLBAR_HOVER_HEIGHT - 1) * i <= parent1.bottom;
-        }
-        if (is) return true;
-    }
-    return false;
-};
-const waitForElementToExist = (selector, timeout = 200)=>{
-    return new Promise((resolve)=>{
-        const intervalID = setInterval(()=>{
-            const el = document.querySelector(selector);
-            if (el) {
-                clearInterval(intervalID);
-                clearTimeout(timeoutID);
-                resolve(el);
-            }
-        }, 50);
-        const timeoutID = setTimeout(()=>{
-            clearInterval(intervalID);
-            clearTimeout(timeoutID);
-            resolve(null);
-        }, timeout);
-    });
-};
-const notVisible = (el)=>{
-    const overflow = getComputedStyle(el).overflow;
-    return overflow !== 'visible';
-};
-const isSection = (el)=>{
-    const tag = el.getAttribute('data-component-tag');
-    return tag === 'Section';
-};
-const isOverToolbarPosition = (el, parent1)=>{
-    const rect = el.getBoundingClientRect();
-    const rectP = parent1.getBoundingClientRect();
-    // 32px = toolbar active height
-    return rect.top - rectP.top < TOOLBAR_ACTIVE_HEIGHT + 1;
-};
-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;
-    }
-};
-var Toolbar$1 = /*#__PURE__*/ memo(Toolbar);
-
-export { Toolbar$1 as default };
+import{jsx as t}from"react/jsx-runtime";import{memo as e,useRef as r,useState as o,useCallback as a,useEffect as i}from"react";import n from"./toolbar/Onboarding.js";import{usePageType as l}from"@gem-sdk/core";let TOOLBAR_HOVER_HEIGHT=24,TOOLBAR_ACTIVE_HEIGHT=32,getDOMElementParents=(t,e,r)=>{let o=[];for(;t;)if(t=t.parentElement??void 0){if("BODY"===t.tagName||"ROOT"===t.getAttribute("data-uid"))break;if(e){if(t.matches(e)&&(o.push(t),r&&o.length==r))return o;continue}if(o.push(t),r&&o.length==r)break}return o},getChildrenByAttrSelector=(t,e)=>{let r=t.children.length;if(r)for(let o=0;o<r;o++){let r=t.children[o];if(r){let t=r.getAttribute(e);if(t)return r}}},isOverParent=({current:t,parent:e,index:r,revert:o})=>{for(let a=0;a<r;a++){let r=t.top-23*a>=e.top&&t.top-23*a<=e.top+e.height||t.top-23*a>=e.top+e.height&&t.top-23*a<=e.top;if(o&&(r=t.bottom+23*a>=e.bottom&&t.bottom+23*a<=e.bottom-e.height||t.bottom+23*a>=e.bottom-e.height&&t.bottom+23*a<=e.bottom),r)return!0}return!1},waitForElementToExist=(t,e=200)=>new Promise(r=>{let o=setInterval(()=>{let e=document.querySelector(t);e&&(clearInterval(o),clearTimeout(a),r(e))},50),a=setTimeout(()=>{clearInterval(o),clearTimeout(a),r(null)},e)}),notVisible=t=>{let e=getComputedStyle(t).overflow;return"visible"!==e},isSection=t=>{let e=t.getAttribute("data-component-tag");return"Section"===e},isLayoutElement=t=>{let e=t.getAttribute("data-component-tag");return"Row"===e||"Product"===e},isPopup=t=>{let e=t.getAttribute("data-component-tag");return"Dialog"===e},isSticky=t=>{let e=t.getAttribute("data-component-tag");return"Sticky"===e},isOverToolbarPosition=(t,e)=>{let r=t.getBoundingClientRect(),o=e.getBoundingClientRect();return r.top-o.top<33},findOverflowParent=(t,e)=>{let r=e||t;if(t&&!isSection(t))return notVisible(t)&&isOverToolbarPosition(e,t)?t:t.parentElement?findOverflowParent(t.parentElement,r):void 0},COMPONENTS_TAG_NOT_LOAD_IMAGES=["PostPurchaseProductImages"],Toolbar=()=>{let e=r(null),d=r(!1),u=r(),c=r(!1),s=r(!1),[b,m]=o(!1),[v,g]=o(0),[f,p]=o("bottom"),h=r(null),A=l(),w=({state:t,$toolbar:e,$component:r})=>{let o=findOverflowParent(r,e),a=e.getBoundingClientRect(),i=r.getBoundingClientRect(),n=window.innerWidth;o?i?.height<=60?e.setAttribute(`data-toolbar-${t}-revert`,"true"):e.setAttribute(`data-toolbar-${t}-inside`,"true"):a.top<33&&(i?.height<=60?e.setAttribute(`data-toolbar-${t}-revert`,"true"):e.setAttribute(`data-toolbar-${t}-inside`,"true")),i.left+a.width>n&&e.setAttribute(`data-toolbar-${t}-overflow`,"true");let l=r?.closest('[aria-label="Dialog body"]');if(l){let r=l.getBoundingClientRect(),o=r.left+r.width-20;i.left+a.width>o&&e.setAttribute(`data-toolbar-${t}-overflow`,"true")}},y=a(({$component:t,componentUid:e,focus:r,isThemeSection:o,isParent:a})=>{if(!t&&!e)return;if(!t){let r=document.querySelector(`[data-uid="${e}"]`);if(!r)return;t=r}if(!e){let r=t.getAttribute("data-uid");if(!r)return;e=r}let i=getChildrenByAttrSelector(t,"data-toolbar"),n=getChildrenByAttrSelector(t,"data-outline"),l=getChildrenByAttrSelector(t,"data-toolbar-add-top"),d=getChildrenByAttrSelector(t,"data-toolbar-add-bottom"),u=getChildrenByAttrSelector(t,"data-column"),c=getChildrenByAttrSelector(t,"data-theme-section-status");o&&c&&c.setAttribute("data-theme-section-status-active","true"),i&&(i.removeAttribute("style"),a||i.setAttribute("data-toolbar-hover","true"),r&&i.setAttribute("data-toolbar-hover-focus","true"),w({$toolbar:i,$component:t,state:"hover"})),n&&(n.setAttribute("data-outline-hover","true"),a&&n.setAttribute("data-outline-parent-hover","true"),o&&n.setAttribute("data-outline-overlay-theme-section","true"),r&&n.setAttribute("data-outline-hover-focus","true")),l&&!a&&l.setAttribute("data-toolbar-add-hover","true"),d&&!a&&d.setAttribute("data-toolbar-add-hover","true"),u&&u.setAttribute("data-column-visible","true")},[]),E=a(({$component:t,componentUid:e})=>{if(!t){let r=document.querySelector(`[data-uid="${e}"]`);if(!r)return;t=r}let r=getDOMElementParents(t,'[data-uid][data-component-type="component"]:not([data-component-no-setting])',1);if(r.length){for(let t of r)t&&y({$component:t,isParent:!0});S({$component:t,$parents:r})}},[y]),S=({$component:t,$parents:e})=>{if(!t||!e?.length)return;let r=getChildrenByAttrSelector(t,"data-toolbar-hover-focus");if(r){let t=r.getBoundingClientRect(),o=!!r.getAttribute("data-toolbar-hover-revert"),a=!!r.getAttribute("data-toolbar-hover-inside"),i=1;for(let r of e)if(r){let e=r.getAttribute("data-component-tag");if("Section"===e)continue;let n=getChildrenByAttrSelector(r,"data-toolbar-hover");if(n){let e=n.getAttribute("data-toolbar-active");if(e)continue;let r=n.getBoundingClientRect(),l=o||a;if(isOverParent({current:t,parent:r,index:i,revert:l})){let e=getComputedStyle(n),o=t.top-r.top,a=t.left-r.left,d=parseFloat(e.top)+o-23*i;l&&(d=parseFloat(e.top)-o+23*i);let u=parseFloat(e.left)+a;n.setAttribute("style",`top: ${d}px;left: ${u}px;`),i++}}}}},C=a(()=>{let t=["data-outline-overlay","data-outline-overlay-theme-section","data-theme-section-status-active"],e=document.querySelectorAll(t.map(t=>`[${t}]`).join(","));e&&t.forEach(t=>{e.forEach(e=>e.removeAttribute(t))})},[]),$=a(()=>{let t=["data-toolbar-hover-focus","data-toolbar-hover","data-outline-hover-focus","data-toolbar-hover-revert","data-toolbar-hover-inside","data-outline-hover","data-toolbar-add-hover","data-column-visible","data-outline-parent-hover","data-toolbar-hover-overflow"],e=document.querySelectorAll(t.map(t=>`[${t}]`).join(","));e&&t.forEach(t=>{e.forEach(e=>e.removeAttribute(t))}),C()},[C]),B=a(()=>{if(h.current&&clearTimeout(h.current),v>0){let t=new CustomEvent("editor:toolbar:close-onboarding",{bubbles:!0,detail:{close:"close Onboarding"}});window.dispatchEvent(t),m(!1)}},[v]),T=a(()=>{e.current=null;let t=["data-toolbar-active","data-outline-active","data-toolbar-add-active","data-toolbar-active-revert","data-toolbar-active-inside","data-spacing-margin-bottom-active","data-toolbar-force-hover","data-outline-force-hover","data-column-force-visible","data-toolbar-active-overflow"],r=document.querySelectorAll(t.map(t=>`[${t}]`).join(","));r&&t.forEach(t=>{r.forEach(e=>e.removeAttribute(t))}),R(!1),u.current&&u.current(),B()},[B]),L=(t,r)=>{let o=t=>{let o=t.detail;o?.componentUid==e.current?.componentUid&&r()};window.removeEventListener("editor:component:render",o),window.addEventListener("editor:component:render",o);let a=t.getAttribute("data-component-tag");if(a&&!COMPONENTS_TAG_NOT_LOAD_IMAGES.includes(a)){let e=t.querySelectorAll("img");e?.length&&e.forEach(t=>{t.addEventListener("load",()=>{r()})})}u.current=()=>{window.removeEventListener("editor:component:render",o)}},O=a(({$component:t})=>{if(!t)return;let e=getComputedStyle(t),r=getChildrenByAttrSelector(t,"data-spacing"),o=r?.querySelector("[data-spacing-margin-bottom]")||null;if(o){let r=o.querySelector("[data-spacing-margin-bottom-bg]")||null,a=o.querySelector("[data-spacing-margin-bottom-drag]")||null;if(r&&a){let i=e.marginBottom;if(0>parseFloat(i)&&(i="0"),r.style.height=i,a.style.top=i,o.setAttribute("data-spacing-margin-bottom-active","true"),isLayoutElement(t))r.style.left="0";else{let t=e.paddingLeft,o=`-${t}`,i=`translate(${o}, -100%)`;r.style.left=o,a.style.transform=i}}}},[]),P=()=>{let t=document.querySelector("[data-toolbar-active]"),e=document.querySelector("[data-toolbar-onboarding]");t&&e&&(e?.removeAttribute("data-onboarding-active"),setTimeout(()=>{let r=t.getBoundingClientRect(),o=r.top||0,a=e?.getBoundingClientRect(),i=a?.height||0,n=parent.document.querySelector(".iframe"),l=n?.contentWindow,d=l?.scrollY||0,u=n?.clientHeight||0;if(o+i>u){let t=r.top+d-i-8;e?.setAttribute("style",`top: ${t}px;left: ${r.left}px;`),p("top"),l&&t<r.top+d&&setTimeout(()=>{let e=t-20;l.scrollTo({top:e,behavior:"smooth"})},200)}else{let t=r.top+d+r.height+8;e?.setAttribute("style",`top: ${t}px;left: ${r.left}px;`),p("bottom")}g(t=>t+1),e?.setAttribute("data-onboarding-active","true")},100))},q=a(({$component:t})=>{if(!t||isSection(t)||isPopup(t)||isSticky(t))return;let e=document.querySelector("[data-toolbar-onboarding]");0==v?P():(B(),e?.removeAttribute("data-onboarding-active"))},[v,B]),I=a(async({componentUid:t,productId:r,timeAwait:o=500,forceReActive:a})=>{if(!t)return;let i=`${r&&"POST_PURCHASE"!==A?`[data-product-id="${r}"][data-uid="${t}"], [data-product-id="${r}"] [data-uid="${t}"]`:`[data-uid="${t}"]`}`,n=await waitForElementToExist(i,o);if(!n||!a&&t==e.current?.componentUid&&r==e.current?.productId)return;(a||t===e.current?.componentUid)&&r===e.current?.productId||T();let l=getChildrenByAttrSelector(n,"data-toolbar"),d=getChildrenByAttrSelector(n,"data-outline"),u=getChildrenByAttrSelector(n,"data-toolbar-add-top"),c=getChildrenByAttrSelector(n,"data-toolbar-add-bottom"),s=getChildrenByAttrSelector(n,"data-column");if(l&&(e.current={componentUid:t,productId:r},l.removeAttribute("style"),l.setAttribute("data-toolbar-active","true"),w({$toolbar:l,$component:n,state:"active"})),d&&d.setAttribute("data-outline-active","true"),u&&u.setAttribute("data-toolbar-add-active","true"),c&&c.setAttribute("data-toolbar-add-active","true"),s&&s.setAttribute("data-column-force-visible","true"),r){let e=document.querySelectorAll(`[data-uid="${t}"]`);e?.length&&e.forEach(t=>{let e=getChildrenByAttrSelector(t,"data-outline");e&&e.setAttribute("data-outline-active","true")})}O({$component:n}),h.current&&clearTimeout(h.current),h.current=setTimeout(()=>{q({$component:n})},5e3),$(),L(n,()=>{I({componentUid:t,productId:r,timeAwait:2e3,forceReActive:!0})})},[T,$,O,q,A]),R=async t=>{if(t){if(e.current?.componentUid){let r=e.current?.componentUid,o=e.current?.productId,a=await waitForElementToExist(`${o?`[data-product-id="${o}"] `:""}[data-uid="${r}"]`,500);if(a){let e=getChildrenByAttrSelector(a,"data-toolbar"),r=getChildrenByAttrSelector(a,"data-outline"),o=getChildrenByAttrSelector(a,"data-spacing");e&&t&&e.setAttribute("data-toolbar-editor-inline-focus","true"),r&&t&&r.setAttribute("data-outline-editor-inline-focus","true"),o&&t&&o.setAttribute("data-spacing-hidden","true")}}}else{let t=document.querySelectorAll("[data-outline-editor-inline-focus],[data-toolbar-editor-inline-focus],[data-spacing-hidden]");t.length&&t.forEach(t=>{t&&(t.removeAttribute("data-toolbar-editor-inline-focus"),t.removeAttribute("data-outline-editor-inline-focus"),t.removeAttribute("data-spacing-hidden"))})}},U=a(t=>{let r=t.closest("[data-theme-section]"),o=r?.getAttribute("data-uid"),a=r&&o===e.current?.componentUid;if(!a)return;let i=getChildrenByAttrSelector(r,"data-theme-section-status");i&&i.setAttribute("data-theme-section-status-active","true")},[]),x=async({value:t})=>{if(!t)return;let r=await waitForElementToExist(`${e.current?.productId?`[data-product-id="${e.current?.productId}"] `:""}[data-uid="${e.current?.componentUid}"]`,500);if(r){let t=r?.querySelectorAll("[data-toolbar-parent]");if(t.length){let r=t=>{let e=t.getAttribute("data-parent-uid");if(!e)return;let r=document.querySelectorAll(`[data-uid="${e}"]`);r.length&&r.forEach(t=>{let e=getChildrenByAttrSelector(t,"data-outline");e&&(e.setAttribute("data-outline-force-hover","true"),e.setAttribute("data-outline-force-overlay","true"))})},o=t=>{let e=t.getAttribute("data-parent-uid");if(!e)return;let r=document.querySelectorAll(`[data-uid="${e}"]`);r.length&&r.forEach(t=>{let e=getChildrenByAttrSelector(t,"data-outline");e&&(e.removeAttribute("data-outline-force-hover"),e.removeAttribute("data-outline-force-overlay"))})},a=async t=>{let r=t.getAttribute("data-parent-uid");if(!r)return;let a=async()=>{let t=await waitForElementToExist(`[data-uid="${r}"]`,500),e=t?.closest("[data-product-id]"),o=e?.getAttribute("data-product-id")||"";return!!o},i="";await a()&&(i=e.current?.productId||"");let n=new CustomEvent("editor:toolbar:force-active-component",{bubbles:!0,detail:{componentUid:r,productId:i}});o(t),window.dispatchEvent(n)};t.forEach(t=>{t.addEventListener("mouseover",()=>r(t)),t.addEventListener("mouseout",()=>o(t)),t.addEventListener("click",()=>a(t))})}}},_=a(t=>{if(d.current||c.current||s.current)return;let r=t.target;if(!r||"function"!=typeof r.closest){C();return}let o=r.closest("[data-toolbar-hover]");if(o)return;let a=r.closest("[data-toolbar-wrap]"),i=a?.getAttribute("data-uid");if(!a||!i||"ROOT"==i){$();return}let n=getChildrenByAttrSelector(a,"data-toolbar"),l=getChildrenByAttrSelector(a,"data-outline");if(l&&l.removeAttribute("data-outline-overlay"),!i||"ROOT"==i||n?.getAttribute("data-toolbar-hover-focus"))return;if(n?.getAttribute("data-toolbar-hover-focus")||$(),U(r),i==e.current?.componentUid){if(e.current.productId){let t=a.closest("[data-product-id]");if(t){let r=t.getAttribute("data-product-id");if(r==e.current.productId)return}}let t=r.closest("[data-theme-section]");if(!t)return;y({$component:t,focus:!0,isThemeSection:!0})}let u=r.closest("[data-theme-section]");u?y({$component:u,focus:!0,isThemeSection:!0}):(y({$component:a,componentUid:i,focus:!0}),E({$component:a,componentUid:i}))},[U,$,y,E,C,e]),F=a(t=>{if(d.current)return;let e=t.detail;e?.componentUid?I({componentUid:e.componentUid,productId:e.productId}):T()},[I,T,d]),N=a(()=>{$()},[$]),k=a(t=>{let e=t.detail;e.value&&($(),T()),d.current=e.value},[$,T]),D=a(t=>{let e=t.detail;e.value?R(!0):R(!1)},[]),H=a(t=>{if(d.current)return;let e=t.detail;x({value:e?.value||!1})},[]),z=a(t=>{let e=t.detail;e?.value?($(),c.current=!0):c.current=!1},[$]),G=a(t=>{let e=t.detail;e?.value?($(),s.current=!0):s.current=!1},[$]),M=(t,e)=>{if(!t)return;let r=document.querySelectorAll(`[data-uid="${t}"]`);r.length&&r.forEach(t=>{let r=getChildrenByAttrSelector(t,"data-outline");r&&("in"===e?(r.setAttribute("data-outline-force-hover","true"),r.setAttribute("data-outline-force-overlay","true")):(r.removeAttribute("data-outline-force-hover"),r.removeAttribute("data-outline-force-overlay")))})},j=a(t=>{if(d.current)return;let e=t.detail;e?.componentUid&&M(e?.componentUid,e?.type)},[d]),V=a(t=>{let e=t.detail;e?.isNewUser&&m(!0)},[]),W=a(()=>{b&&P()},[b]);return i(()=>(document.addEventListener("mousemove",_),window.addEventListener("editor:active-component",F),window.addEventListener("editor:focus-outside-preview",N),window.addEventListener("editor:is-dragging",k),window.addEventListener("editor:is-editing-text-editor",D),window.addEventListener("editor:toolbar:show-parents",H),window.addEventListener("editor:toolbar:resize-spacing",z),window.addEventListener("editor:toolbar:resize-column",G),window.addEventListener("editor:hover-component",j),window.addEventListener("editor:toolbar-onboarding",V),window.addEventListener("resize",W),()=>{document.removeEventListener("mousemove",_),window.removeEventListener("editor:active-component",F),window.removeEventListener("editor:is-dragging",N),window.removeEventListener("editor:is-dragging",k),window.removeEventListener("editor:is-editing-text-editor",D),window.removeEventListener("editor:toolbar:show-parents",H),window.removeEventListener("editor:toolbar:resize-spacing",z),window.removeEventListener("editor:toolbar:resize-column",G),window.removeEventListener("editor:hover-component",j),window.removeEventListener("editor:toolbar-onboarding",V),window.removeEventListener("resize",W)}),[_,F,N,k,D,H,z,G,j,V,W]),b&&t(n,{enable:!0,position:f,onCloseOnboarding:B})};var Toolbar$1=e(Toolbar);export{Toolbar$1 as default};