@gem-sdk/pages 1.23.0-staging.27 → 1.23.0-staging.270

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

@@ -2,108 +2,69 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
+var Onboarding = require('./toolbar/Onboarding.js');
 
 const TOOLBAR_HOVER_HEIGHT = 24;
-// const TOOLBAR_ACTIVE_HEIGHT = 32;
-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, index)=>{
-    for(let i = 0; i < index; i++){
-        const is = current.top - (TOOLBAR_HOVER_HEIGHT - 1) * i >= parent.top && current.top - (TOOLBAR_HOVER_HEIGHT - 1) * i <= parent.top + parent.height && current.left >= parent.left && current.left <= parent.left + parent.width;
-        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 TOOLBAR_ACTIVE_HEIGHT = 32;
+const isPopup = (el)=>{
     const tag = el.getAttribute('data-component-tag');
-    return tag === 'Section';
-};
-const isOverToolbarPosition = (el, parent)=>{
-    const rect = el.getBoundingClientRect();
-    const rectP = parent.getBoundingClientRect();
-    // 32px = toolbar active height
-    return rect.top - rectP.top < 32 + 5;
+    return tag === 'Dialog';
 };
-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;
-    }
+const isSticky = (el)=>{
+    const tag = el.getAttribute('data-component-tag');
+    return tag === 'Sticky';
 };
 const Toolbar = ()=>{
     const currentComponentActive = react.useRef(null);
     const isDragging = react.useRef(false);
-    const obsActiveComponent = react.useRef();
+    const stopWatchReRenderComponent = react.useRef();
     const isResizeSpacing = react.useRef(false);
-    /* Functions */ const setHoverComponent = react.useCallback(({ $component, componentUid, focus, isThemeSection })=>{
+    const [isOnboarding, setIsOnboarding] = react.useState(false);
+    const [countShowOnboarding, setCountShowOnboarding] = react.useState(0);
+    const [onboardingPosition, setOnboardingPosition] = react.useState('bottom');
+    const timeoutRef = react.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 = react.useCallback(({ $component, componentUid, focus, isThemeSection, isParent })=>{
         if (!$component && !componentUid) return;
         if (!$component) {
             const $c = document.querySelector(`[data-uid="${componentUid}"]`);
@@ -125,17 +86,23 @@ const Toolbar = ()=>{
         }
         if ($toolbar) {
             $toolbar.removeAttribute('style');
-            $toolbar.setAttribute('data-toolbar-hover', 'true');
+            if (!isParent) {
+                $toolbar.setAttribute('data-toolbar-hover', 'true');
+            }
             if (focus) {
                 $toolbar.setAttribute('data-toolbar-hover-focus', 'true');
             }
-            const $parentOverflow = findOverflowParent($component, $toolbar);
-            if ($parentOverflow) {
-                $toolbar.setAttribute('data-toolbar-hover-revert', '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');
             }
@@ -144,10 +111,14 @@ const Toolbar = ()=>{
             }
         }
         if ($btnAddTop) {
-            $btnAddTop.setAttribute('data-toolbar-add-hover', 'true');
+            if (!isParent) {
+                $btnAddTop.setAttribute('data-toolbar-add-hover', 'true');
+            }
         }
         if ($btnAddBottom) {
-            $btnAddBottom.setAttribute('data-toolbar-add-hover', 'true');
+            if (!isParent) {
+                $btnAddBottom.setAttribute('data-toolbar-add-hover', 'true');
+            }
         }
     }, []);
     const setHoverComponentParents = react.useCallback(({ $component, componentUid })=>{
@@ -156,12 +127,13 @@ const Toolbar = ()=>{
             if (!$c) return;
             $component = $c;
         }
-        const $parents = getDOMElementParents($component, '[data-uid][data-component-type="component"]:not([data-component-no-setting])');
+        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
+                        $component: $parent,
+                        isParent: true
                     });
                 }
             }
@@ -179,6 +151,8 @@ const Toolbar = ()=>{
         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) {
@@ -191,14 +165,19 @@ const Toolbar = ()=>{
                         if (isActive) continue;
                         // Start calc
                         const parentRect = $toolbar.getBoundingClientRect();
-                        if (isOverParent(currentRect, parentRect, index)) {
+                        const checkRevert = isRevert || isInside;
+                        if (isOverParent({
+                            current: currentRect,
+                            parent: parentRect,
+                            index,
+                            revert: checkRevert
+                        })) {
                             const parentStyle = getComputedStyle($toolbar);
-                            const isRevert = $toolbar.getAttribute('data-toolbar-hover-revert') ? true : false;
                             // 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 (isRevert) {
+                            if (checkRevert) {
                                 newTop = parseFloat(parentStyle.top) - diffTop + (TOOLBAR_HOVER_HEIGHT - 1) * index; // -1 border bottom
                             }
                             const newLeft = parseFloat(parentStyle.left) + diffLeft;
@@ -229,8 +208,11 @@ const Toolbar = ()=>{
             'data-toolbar-hover',
             'data-outline-hover-focus',
             'data-toolbar-hover-revert',
+            'data-toolbar-hover-inside',
             'data-outline-hover',
-            'data-toolbar-add-hover'
+            'data-toolbar-add-hover',
+            'data-outline-parent-hover',
+            'data-toolbar-hover-overflow'
         ];
         const $elms = document.querySelectorAll(clearAttrs.map((attr)=>`[${attr}]`).join(','));
         if ($elms) {
@@ -242,6 +224,21 @@ const Toolbar = ()=>{
     }, [
         removeHoverOverlayComponent
     ]);
+    const onCloseOnboarding = react.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 = react.useCallback(()=>{
         currentComponentActive.current = null;
         const clearAttrs = [
@@ -249,9 +246,11 @@ const Toolbar = ()=>{
             '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-outline-force-hover',
+            'data-toolbar-active-overflow'
         ];
         const $elms = document.querySelectorAll(clearAttrs.map((attr)=>`[${attr}]`).join(','));
         if ($elms) {
@@ -260,25 +259,32 @@ const Toolbar = ()=>{
             });
         }
         setFocusTextEditor(false);
-        if (obsActiveComponent.current) obsActiveComponent.current.disconnect();
-    }, []);
+        if (stopWatchReRenderComponent.current) stopWatchReRenderComponent.current();
+        onCloseOnboarding();
+    }, [
+        onCloseOnboarding
+    ]);
     const watchComponentReRender = ($el, callback)=>{
-        const parent = $el.parentNode;
-        if (!parent) return;
-        if (obsActiveComponent.current) obsActiveComponent.current.disconnect();
-        obsActiveComponent.current = new MutationObserver((mutations)=>{
-            for (const mutation of mutations){
-                mutation.removedNodes.forEach((el)=>{
-                    if (el === $el) {
-                        if (obsActiveComponent.current) obsActiveComponent.current.disconnect();
-                        callback();
-                    }
-                });
+        // editor:component:render
+        const onComponentReRender = (e)=>{
+            const detail = e.detail;
+            if (detail?.componentUid == currentComponentActive.current?.componentUid) {
+                callback();
             }
-        });
-        obsActiveComponent.current.observe(parent, {
-            childList: true
-        });
+        };
+        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 = react.useCallback(({ $component })=>{
         if (!$component) return;
@@ -289,43 +295,96 @@ const Toolbar = ()=>{
             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;
+                let value = style.marginBottom;
+                if (parseFloat(value) < 0) {
+                    value = '0';
+                }
                 $bg.style.height = value;
                 $drag.style.top = value;
                 $marginBottom.setAttribute('data-spacing-margin-bottom-active', 'true');
+                if (isLayoutElement($component)) {
+                    $bg.style.left = '0';
+                } else {
+                    const paddingLeft = style.paddingLeft;
+                    const leftValue = `-${paddingLeft}`;
+                    const translateCss = `translate(${leftValue}, -100%)`;
+                    $bg.style.left = leftValue;
+                    $drag.style.transform = translateCss;
+                }
             }
         }
     }, []);
-    const setActiveComponentForceHoverSection = ($component, value)=>{
-        const $section = $component.closest('[data-toolbar-wrap][data-component-tag="Section"]');
-        if ($section) {
-            if (value) {
-                const $toolbar = getChildrenByAttrSelector($section, 'data-toolbar');
-                const $outline = getChildrenByAttrSelector($section, 'data-outline');
-                if ($toolbar) {
-                    $toolbar.setAttribute('data-toolbar-force-hover', 'true');
-                }
-                if ($outline) {
-                    $outline.setAttribute('data-outline-force-hover', 'true');
-                }
-            } else {
-                const $toolbar = getChildrenByAttrSelector($section, 'data-toolbar');
-                const $outline = getChildrenByAttrSelector($section, 'data-outline');
-                if ($toolbar) {
-                    $toolbar.removeAttribute('data-toolbar-force-hover');
-                }
-                if ($outline) {
-                    $outline.removeAttribute('data-outline-force-hover');
+    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 = react.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 = react.useCallback(async ({ componentUid, productId, timeAwait = 500, forceReActive })=>{
         if (!componentUid) return;
-        const $component = await waitForElementToExist(`${productId ? `[data-product-id="${productId}"] ` : ''}[data-uid="${componentUid}"]`, timeAwait);
-        if (!$component) 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 (!forceReActive && componentUid !== currentComponentActive.current?.componentUid || productId !== currentComponentActive.current?.productId) removeActiveComponent();
+        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');
@@ -337,10 +396,11 @@ const Toolbar = ()=>{
             };
             $toolbar.removeAttribute('style');
             $toolbar.setAttribute('data-toolbar-active', 'true');
-            const $parentOverflow = findOverflowParent($component, $toolbar);
-            if ($parentOverflow) {
-                $toolbar.setAttribute('data-toolbar-active-revert', 'true');
-            }
+            changePositionToolbar({
+                $toolbar,
+                $component,
+                state: 'active'
+            });
         }
         if ($outline) {
             $outline.setAttribute('data-outline-active', 'true');
@@ -366,7 +426,14 @@ const Toolbar = ()=>{
         setActiveComponentSpacing({
             $component
         });
-        setActiveComponentForceHoverSection($component, true);
+        timeoutRef.current && clearTimeout(timeoutRef.current);
+        timeoutRef.current = setTimeout(()=>{
+            if ($component) {
+                setToolbarOnboarding({
+                    $component
+                });
+            }
+        }, timeoutOnboarding);
         removeHoverComponent();
         // Reactive when component re-render
         watchComponentReRender($component, ()=>{
@@ -380,7 +447,8 @@ const Toolbar = ()=>{
     }, [
         removeActiveComponent,
         removeHoverComponent,
-        setActiveComponentSpacing
+        setActiveComponentSpacing,
+        setToolbarOnboarding
     ]);
     const setFocusTextEditor = async (value)=>{
         if (!value) {
@@ -503,59 +571,53 @@ const Toolbar = ()=>{
         if (isDragging.current) return;
         if (isResizeSpacing.current) return;
         const $target = e.target;
-        if (!$target) {
+        if (!$target || typeof $target.closest !== 'function') {
             removeHoverOverlayComponent();
             return;
         }
         const $toolbarHover = $target.closest('[data-toolbar-hover]');
         if ($toolbarHover) {
-            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');
-        } else {
-            // 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) {
-                            return;
-                        }
+            // 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) {
@@ -565,17 +627,27 @@ const Toolbar = ()=>{
                     isThemeSection: true
                 });
             } else {
-                setHoverComponent({
-                    $component,
-                    componentUid,
-                    focus: true
-                });
-                setHoverComponentParents({
-                    $component,
-                    componentUid
-                });
+                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,
@@ -642,6 +714,46 @@ const Toolbar = ()=>{
     }, [
         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 = react.useCallback((e)=>{
+        if (isDragging.current) return;
+        const detail = e.detail;
+        if (detail?.componentUid) {
+            setHoverParentComponent(detail?.componentUid, detail?.type);
+        }
+    }, [
+        isDragging
+    ]);
+    const onToolbarOnboarding = react.useCallback((e)=>{
+        const detail = e.detail;
+        if (detail?.isNewUser) {
+            setIsOnboarding(true);
+        }
+    }, []);
+    const onWindowResize = react.useCallback(()=>{
+        if (isOnboarding) {
+            calculateOnboardingPosition();
+        }
+    }, [
+        isOnboarding
+    ]);
     /* Register event */ react.useEffect(()=>{
         document.addEventListener('mousemove', onMouseMove);
         window.addEventListener('editor:active-component', onActiveComponent);
@@ -650,6 +762,9 @@ const Toolbar = ()=>{
         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);
@@ -658,6 +773,9 @@ const Toolbar = ()=>{
             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,
@@ -666,9 +784,115 @@ const Toolbar = ()=>{
         onIsDragging,
         onIsEditingTextEditor,
         onShowParents,
-        onResizeSpacing
+        onResizeSpacing,
+        onHoverComponent,
+        onToolbarOnboarding,
+        onWindowResize
     ]);
-    return null;
+    return isOnboarding && /*#__PURE__*/ jsxRuntime.jsx(Onboarding.default, {
+        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 isLayoutElement = (el)=>{
+    const tag = el.getAttribute('data-component-tag');
+    return tag === 'Row' || tag === 'Product';
+};
+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__*/ react.memo(Toolbar);