@gem-sdk/pages 1.14.0-dev.501 → 1.14.0-dev.528

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react=require("react");const 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},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},Toolbar=()=>{let t=react.useRef(null),e=react.useRef(!1),r=react.useRef(),o=react.useRef(!1),a=react.useRef(!1),i=({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")},n=react.useCallback(({$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 n=getChildrenByAttrSelector(t,"data-toolbar"),l=getChildrenByAttrSelector(t,"data-outline"),d=getChildrenByAttrSelector(t,"data-toolbar-add-top"),u=getChildrenByAttrSelector(t,"data-toolbar-add-bottom"),c=getChildrenByAttrSelector(t,"data-column"),s=getChildrenByAttrSelector(t,"data-theme-section-status");o&&s&&s.setAttribute("data-theme-section-status-active","true"),n&&(n.removeAttribute("style"),a||n.setAttribute("data-toolbar-hover","true"),r&&n.setAttribute("data-toolbar-hover-focus","true"),i({$toolbar:n,$component:t,state:"hover"})),l&&(l.setAttribute("data-outline-hover","true"),a&&l.setAttribute("data-outline-parent-hover","true"),o&&l.setAttribute("data-outline-overlay-theme-section","true"),r&&l.setAttribute("data-outline-hover-focus","true")),d&&!a&&d.setAttribute("data-toolbar-add-hover","true"),u&&!a&&u.setAttribute("data-toolbar-add-hover","true"),c&&c.setAttribute("data-column-visible","true")},[]),l=react.useCallback(({$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&&n({$component:t,isParent:!0});d({$component:t,$parents:r})}},[n]),d=({$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++}}}}},u=react.useCallback(()=>{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))})},[]),c=react.useCallback(()=>{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))}),u()},[u]),s=react.useCallback(()=>{t.current=null;let e=["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"],o=document.querySelectorAll(e.map(t=>`[${t}]`).join(","));o&&e.forEach(t=>{o.forEach(e=>e.removeAttribute(t))}),f(!1),r.current&&r.current.disconnect()},[]),b=(t,e)=>{let o=t.parentNode;o&&(r.current&&r.current.disconnect(),r.current=new MutationObserver(o=>{for(let a of o)a.removedNodes.forEach(o=>{o===t&&(r.current&&r.current.disconnect(),e())})}),r.current.observe(o,{childList:!0}))},v=react.useCallback(({$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 t=o.querySelector("[data-spacing-margin-bottom-bg]")||null,r=o.querySelector("[data-spacing-margin-bottom-drag]")||null;if(t&&r){let a=e.marginBottom;t.style.height=a,r.style.top=a,o.setAttribute("data-spacing-margin-bottom-active","true")}}},[]),m=react.useCallback(async({componentUid:e,productId:r,timeAwait:o=500,forceReActive:a})=>{if(!e)return;let n=await waitForElementToExist(`${r?`[data-product-id="${r}"] `:""}[data-uid="${e}"]`,o);if(!n||!a&&e==t.current?.componentUid&&r==t.current?.productId)return;(a||e===t.current?.componentUid)&&r===t.current?.productId||s();let l=getChildrenByAttrSelector(n,"data-toolbar"),d=getChildrenByAttrSelector(n,"data-outline"),u=getChildrenByAttrSelector(n,"data-toolbar-add-top"),f=getChildrenByAttrSelector(n,"data-toolbar-add-bottom"),h=getChildrenByAttrSelector(n,"data-column");if(l&&(t.current={componentUid:e,productId:r},l.removeAttribute("style"),l.setAttribute("data-toolbar-active","true"),i({$toolbar:l,$component:n,state:"active"})),d&&d.setAttribute("data-outline-active","true"),u&&u.setAttribute("data-toolbar-add-active","true"),f&&f.setAttribute("data-toolbar-add-active","true"),h&&h.setAttribute("data-column-force-visible","true"),r){let t=document.querySelectorAll(`[data-uid="${e}"]`);t?.length&&t.forEach(t=>{let e=getChildrenByAttrSelector(t,"data-outline");e&&e.setAttribute("data-outline-active","true")})}v({$component:n}),c(),b(n,()=>{m({componentUid:e,productId:r,timeAwait:2e3,forceReActive:!0})})},[s,c,v]),f=async e=>{if(e){if(t.current?.componentUid){let r=t.current?.componentUid,o=t.current?.productId,a=await waitForElementToExist(`${o?`[data-product-id="${o}"] `:""}[data-uid="${r}"]`,500);if(a){let t=getChildrenByAttrSelector(a,"data-toolbar"),r=getChildrenByAttrSelector(a,"data-outline"),o=getChildrenByAttrSelector(a,"data-spacing");t&&e&&t.setAttribute("data-toolbar-editor-inline-focus","true"),r&&e&&r.setAttribute("data-outline-editor-inline-focus","true"),o&&e&&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"))})}},h=react.useCallback(e=>{let r=e.closest("[data-theme-section]"),o=r?.getAttribute("data-uid"),a=r&&o===t.current?.componentUid;if(!a)return;let i=getChildrenByAttrSelector(r,"data-theme-section-status");i&&i.setAttribute("data-theme-section-status-active","true")},[]),g=async({value:e})=>{if(!e)return;let r=await waitForElementToExist(`${t.current?.productId?`[data-product-id="${t.current?.productId}"] `:""}[data-uid="${t.current?.componentUid}"]`,500);if(r){let e=r?.querySelectorAll("[data-toolbar-parent]");if(e.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 e=>{let r=e.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=t.current?.productId||"");let n=new CustomEvent("editor:toolbar:force-active-component",{bubbles:!0,detail:{componentUid:r,productId:i}});o(e),window.dispatchEvent(n)};e.forEach(t=>{t.addEventListener("mouseover",()=>r(t)),t.addEventListener("mouseout",()=>o(t)),t.addEventListener("click",()=>a(t))})}}},p=react.useCallback(r=>{if(e.current||o.current||a.current)return;let i=r.target;if(!i||"function"!=typeof i.closest){u();return}let d=i.closest("[data-toolbar-hover]");if(d)return;let s=i.closest("[data-toolbar-wrap]"),b=s?.getAttribute("data-uid");if(!s||!b||"ROOT"==b){c();return}let v=getChildrenByAttrSelector(s,"data-toolbar"),m=getChildrenByAttrSelector(s,"data-outline");if(m&&m.removeAttribute("data-outline-overlay"),!b||"ROOT"==b||v?.getAttribute("data-toolbar-hover-focus"))return;if(v?.getAttribute("data-toolbar-hover-focus")||c(),h(i),b==t.current?.componentUid){if(t.current.productId){let e=s.closest("[data-product-id]");if(e){let r=e.getAttribute("data-product-id");if(r==t.current.productId)return}}let e=i.closest("[data-theme-section]");if(!e)return;n({$component:e,focus:!0,isThemeSection:!0})}let f=i.closest("[data-theme-section]");f?n({$component:f,focus:!0,isThemeSection:!0}):(n({$component:s,componentUid:b,focus:!0}),l({$component:s,componentUid:b}))},[h,c,n,l,u,t]),A=react.useCallback(t=>{if(e.current)return;let r=t.detail;r?.componentUid?m({componentUid:r.componentUid,productId:r.productId}):s()},[m,s,e]),y=react.useCallback(()=>{c()},[c]),w=react.useCallback(t=>{let r=t.detail;r.value&&(c(),s()),e.current=r.value},[c,s]),E=react.useCallback(t=>{let e=t.detail;e.value?f(!0):f(!1)},[]),C=react.useCallback(t=>{if(e.current)return;let r=t.detail;g({value:r?.value||!1})},[]),S=react.useCallback(t=>{let e=t.detail;e?.value?(c(),o.current=!0):o.current=!1},[c]),B=react.useCallback(t=>{let e=t.detail;e?.value?(c(),a.current=!0):a.current=!1},[c]);return react.useEffect(()=>(document.addEventListener("mousemove",p),window.addEventListener("editor:active-component",A),window.addEventListener("editor:focus-outside-preview",y),window.addEventListener("editor:is-dragging",w),window.addEventListener("editor:is-editing-text-editor",E),window.addEventListener("editor:toolbar:show-parents",C),window.addEventListener("editor:toolbar:resize-spacing",S),window.addEventListener("editor:toolbar:resize-column",B),()=>{document.removeEventListener("mousemove",p),window.removeEventListener("editor:active-component",A),window.removeEventListener("editor:is-dragging",y),window.removeEventListener("editor:is-dragging",w),window.removeEventListener("editor:is-editing-text-editor",E),window.removeEventListener("editor:toolbar:show-parents",C),window.removeEventListener("editor:toolbar:resize-spacing",S),window.removeEventListener("editor:toolbar:resize-column",B)}),[p,A,y,w,E,C,S,B]),null};var Toolbar$1=react.memo(Toolbar);exports.default=Toolbar$1;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),react=require("react"),Onboarding=require("./toolbar/Onboarding.js");const 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},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},Toolbar=()=>{let t=react.useRef(null),e=react.useRef(!1),r=react.useRef(),o=react.useRef(!1),a=react.useRef(!1),[i,n]=react.useState(!1),[l,d]=react.useState(0),[u,c]=react.useState("bottom"),s=react.useRef(null),b=({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")},v=react.useCallback(({$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"),b({$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")},[]),m=react.useCallback(({$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&&v({$component:t,isParent:!0});f({$component:t,$parents:r})}},[v]),f=({$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++}}}}},g=react.useCallback(()=>{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))})},[]),p=react.useCallback(()=>{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))}),g()},[g]),h=react.useCallback(()=>{if(s.current&&clearTimeout(s.current),l>0){let t=new CustomEvent("editor:toolbar:close-onboarding",{bubbles:!0,detail:{close:"close Onboarding"}});window.dispatchEvent(t),n(!1)}},[l]),A=react.useCallback(()=>{t.current=null;let e=["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"],o=document.querySelectorAll(e.map(t=>`[${t}]`).join(","));o&&e.forEach(t=>{o.forEach(e=>e.removeAttribute(t))}),S(!1),r.current&&r.current.disconnect(),h()},[h]),y=(t,e)=>{let o=t.parentNode;o&&(r.current&&r.current.disconnect(),r.current=new MutationObserver(o=>{for(let a of o)a.removedNodes.forEach(o=>{o===t&&(r.current&&r.current.disconnect(),e())})}),r.current.observe(o,{childList:!0}))},w=react.useCallback(({$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 t=o.querySelector("[data-spacing-margin-bottom-bg]")||null,r=o.querySelector("[data-spacing-margin-bottom-drag]")||null;if(t&&r){let a=e.marginBottom;t.style.height=a,r.style.top=a,o.setAttribute("data-spacing-margin-bottom-active","true")}}},[]),C=react.useCallback(({$component:t})=>{if(!t||isSection(t)||isPopup(t)||isSticky(t))return;let e=getChildrenByAttrSelector(t,"data-toolbar");if(e){let t=document.querySelector("[data-toolbar-onboarding]");0==l?setTimeout(()=>{let r=e.getBoundingClientRect(),o=r.top||0,a=t?.getBoundingClientRect(),i=a?.height||0,n=parent.document.querySelector(".iframe"),l=n?.contentWindow,u=l?.scrollY||0,s=n?.clientHeight||0;if(o+i>s){let e=r.top+u-i-8;t?.setAttribute("style",`top: ${e}px;left: ${r.left}px;`),c("top")}else{let e=r.top+u+r.height+8;t?.setAttribute("style",`top: ${e}px;left: ${r.left}px;`),c("bottom")}d(t=>t+1),t?.setAttribute("data-onboarding-active","true")},250):(h(),t?.removeAttribute("data-onboarding-active"))}},[l,h]),E=react.useCallback(async({componentUid:e,productId:r,timeAwait:o=500,forceReActive:a})=>{if(!e)return;let i=await waitForElementToExist(`${r?`[data-product-id="${r}"] `:""}[data-uid="${e}"]`,o);if(!i||!a&&e==t.current?.componentUid&&r==t.current?.productId)return;(a||e===t.current?.componentUid)&&r===t.current?.productId||A();let n=getChildrenByAttrSelector(i,"data-toolbar"),l=getChildrenByAttrSelector(i,"data-outline"),d=getChildrenByAttrSelector(i,"data-toolbar-add-top"),u=getChildrenByAttrSelector(i,"data-toolbar-add-bottom"),c=getChildrenByAttrSelector(i,"data-column");if(n&&(t.current={componentUid:e,productId:r},n.removeAttribute("style"),n.setAttribute("data-toolbar-active","true"),b({$toolbar:n,$component:i,state:"active"})),l&&l.setAttribute("data-outline-active","true"),d&&d.setAttribute("data-toolbar-add-active","true"),u&&u.setAttribute("data-toolbar-add-active","true"),c&&c.setAttribute("data-column-force-visible","true"),r){let t=document.querySelectorAll(`[data-uid="${e}"]`);t?.length&&t.forEach(t=>{let e=getChildrenByAttrSelector(t,"data-outline");e&&e.setAttribute("data-outline-active","true")})}w({$component:i}),s.current&&clearTimeout(s.current),s.current=setTimeout(()=>{C({$component:i})},5e3),p(),y(i,()=>{E({componentUid:e,productId:r,timeAwait:2e3,forceReActive:!0})})},[A,p,w,C]),S=async e=>{if(e){if(t.current?.componentUid){let r=t.current?.componentUid,o=t.current?.productId,a=await waitForElementToExist(`${o?`[data-product-id="${o}"] `:""}[data-uid="${r}"]`,500);if(a){let t=getChildrenByAttrSelector(a,"data-toolbar"),r=getChildrenByAttrSelector(a,"data-outline"),o=getChildrenByAttrSelector(a,"data-spacing");t&&e&&t.setAttribute("data-toolbar-editor-inline-focus","true"),r&&e&&r.setAttribute("data-outline-editor-inline-focus","true"),o&&e&&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"))})}},B=react.useCallback(e=>{let r=e.closest("[data-theme-section]"),o=r?.getAttribute("data-uid"),a=r&&o===t.current?.componentUid;if(!a)return;let i=getChildrenByAttrSelector(r,"data-theme-section-status");i&&i.setAttribute("data-theme-section-status-active","true")},[]),$=async({value:e})=>{if(!e)return;let r=await waitForElementToExist(`${t.current?.productId?`[data-product-id="${t.current?.productId}"] `:""}[data-uid="${t.current?.componentUid}"]`,500);if(r){let e=r?.querySelectorAll("[data-toolbar-parent]");if(e.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 e=>{let r=e.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=t.current?.productId||"");let n=new CustomEvent("editor:toolbar:force-active-component",{bubbles:!0,detail:{componentUid:r,productId:i}});o(e),window.dispatchEvent(n)};e.forEach(t=>{t.addEventListener("mouseover",()=>r(t)),t.addEventListener("mouseout",()=>o(t)),t.addEventListener("click",()=>a(t))})}}},O=react.useCallback(r=>{if(e.current||o.current||a.current)return;let i=r.target;if(!i||"function"!=typeof i.closest){g();return}let n=i.closest("[data-toolbar-hover]");if(n)return;let l=i.closest("[data-toolbar-wrap]"),d=l?.getAttribute("data-uid");if(!l||!d||"ROOT"==d){p();return}let u=getChildrenByAttrSelector(l,"data-toolbar"),c=getChildrenByAttrSelector(l,"data-outline");if(c&&c.removeAttribute("data-outline-overlay"),!d||"ROOT"==d||u?.getAttribute("data-toolbar-hover-focus"))return;if(u?.getAttribute("data-toolbar-hover-focus")||p(),B(i),d==t.current?.componentUid){if(t.current.productId){let e=l.closest("[data-product-id]");if(e){let r=e.getAttribute("data-product-id");if(r==t.current.productId)return}}let e=i.closest("[data-theme-section]");if(!e)return;v({$component:e,focus:!0,isThemeSection:!0})}let s=i.closest("[data-theme-section]");s?v({$component:s,focus:!0,isThemeSection:!0}):(v({$component:l,componentUid:d,focus:!0}),m({$component:l,componentUid:d}))},[B,p,v,m,g,t]),T=react.useCallback(t=>{if(e.current)return;let r=t.detail;r?.componentUid?E({componentUid:r.componentUid,productId:r.productId}):A()},[E,A,e]),k=react.useCallback(()=>{p()},[p]),L=react.useCallback(t=>{let r=t.detail;r.value&&(p(),A()),e.current=r.value},[p,A]),R=react.useCallback(t=>{let e=t.detail;e.value?S(!0):S(!1)},[]),q=react.useCallback(t=>{if(e.current)return;let r=t.detail;$({value:r?.value||!1})},[]),x=react.useCallback(t=>{let e=t.detail;e?.value?(p(),o.current=!0):o.current=!1},[p]),I=react.useCallback(t=>{let e=t.detail;e?.value?(p(),a.current=!0):a.current=!1},[p]),P=(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")))})},U=react.useCallback(t=>{if(e.current)return;let r=t.detail;r?.componentUid&&P(r?.componentUid,r?.type)},[e]),j=react.useCallback(t=>{let e=t.detail;e?.isNewUser&&n(!0)},[]);return react.useEffect(()=>(document.addEventListener("mousemove",O),window.addEventListener("editor:active-component",T),window.addEventListener("editor:focus-outside-preview",k),window.addEventListener("editor:is-dragging",L),window.addEventListener("editor:is-editing-text-editor",R),window.addEventListener("editor:toolbar:show-parents",q),window.addEventListener("editor:toolbar:resize-spacing",x),window.addEventListener("editor:toolbar:resize-column",I),window.addEventListener("editor:hover-component",U),window.addEventListener("editor:toolbar-onboarding",j),()=>{document.removeEventListener("mousemove",O),window.removeEventListener("editor:active-component",T),window.removeEventListener("editor:is-dragging",k),window.removeEventListener("editor:is-dragging",L),window.removeEventListener("editor:is-editing-text-editor",R),window.removeEventListener("editor:toolbar:show-parents",q),window.removeEventListener("editor:toolbar:resize-spacing",x),window.removeEventListener("editor:toolbar:resize-column",I),window.removeEventListener("editor:hover-component",U),window.removeEventListener("editor:toolbar-onboarding",j)}),[O,T,k,L,R,q,x,I,U,j]),i&&jsxRuntime.jsx(Onboarding.default,{enable:!0,position:u,onCloseOnboarding:h})};var Toolbar$1=react.memo(Toolbar);exports.default=Toolbar$1;

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),react=require("react");const Onboarding=({enable:e,position:t,onCloseOnboarding:i})=>{let n=()=>{i()},s=()=>jsxRuntime.jsxs("video",{width:"100%",className:"w-full",loop:!0,muted:!0,autoPlay:!0,playsInline:!0,children:[jsxRuntime.jsx("source",{src:"https://ucarecdn.com/de5fd2eb-4525-45a7-ad13-53960dac225e/",type:"video/mp4"}),"Sorry, your browser doesn‘t support embedded videos."]});return jsxRuntime.jsx("div",{"data-toolbar-onboarding":!0,"data-toolbar-onboarding-position":t,children:e&&jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("span",{"data-icon":!0,"data-position":t,children:"bottom"===t?jsxRuntime.jsx("svg",{width:"8",height:"4",viewBox:"0 0 8 4",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:jsxRuntime.jsx("path",{d:"M-1.74846e-07 4L4 -1.74846e-07L8 4L-1.74846e-07 4Z",fill:"white"})}):jsxRuntime.jsx("svg",{width:"8",height:"4",viewBox:"0 0 8 4",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:jsxRuntime.jsx("path",{d:"M8 3.33818e-07L4 4L4.76995e-08 7.15256e-07L8 3.33818e-07Z",fill:"white"})})}),jsxRuntime.jsxs("div",{"data-onboarding-wrapper":!0,children:[jsxRuntime.jsx("button",{"data-close":!0,type:"button",onClick:n,children:jsxRuntime.jsxs("svg",{width:"32",height:"32",viewBox:"0 0 32 32",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[jsxRuntime.jsx("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M10.6464 10.6464C10.8417 10.4512 11.1583 10.4512 11.3536 10.6464L21.3536 20.6464C21.5488 20.8417 21.5488 21.1583 21.3536 21.3536C21.1583 21.5488 20.8417 21.5488 20.6464 21.3536L10.6464 11.3536C10.4512 11.1583 10.4512 10.8417 10.6464 10.6464Z",fill:"#212121"}),jsxRuntime.jsx("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M21.3536 10.6464C21.5488 10.8417 21.5488 11.1583 21.3536 11.3536L11.3536 21.3536C11.1583 21.5488 10.8417 21.5488 10.6464 21.3536C10.4512 21.1583 10.4512 20.8417 10.6464 20.6464L20.6464 10.6464C20.8417 10.4512 21.1583 10.4512 21.3536 10.6464Z",fill:"#212121"})]})}),jsxRuntime.jsx(s,{}),jsxRuntime.jsxs("div",{"data-content":!0,children:[jsxRuntime.jsx("h3",{children:"New way to select parent element"}),jsxRuntime.jsx("p",{children:"Select parent from here in case you can‘t find yours at times."})]})]})]})})};var Onboarding$1=react.memo(Onboarding);exports.default=Onboarding$1;

package/dist/cjs/libs/google-fonts.js

@@ -1 +1 @@
-"use strict";var genFonts=require("./helpers/gen-fonts.js");const CHROME_UA="Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.61 Safari/537.36",IE_UA="Mozilla/5.0 (Windows NT 10.0; Trident/7.0; rv:11.0) like Gecko";async function getFontForUA(e,t){return fetch(e,{headers:{"User-Agent":t}}).then(e=>e.text())}const composeFonts=e=>{let t=e.filter((e,t,o)=>t===o.findIndex(t=>t.family===e.family));return t.map(t=>{let o=e.filter(e=>e.family===t.family).reduce((e,t)=>[...e,...t.variants],[]).filter((e,t,o)=>t===o.findIndex(t=>t===e));return{...t,variants:o}})},createFontUrl=(e,t)=>{let o=e.filter(e=>"google"===e.type||!e.type);if(!o.length)return;let n=new URLSearchParams,r=t?.display||"swap",a=o.filter((e,t,o)=>t===o.findIndex(t=>t.family===e.family)),l=composeFonts(a).map(e=>`${e.family.replace(/ /g,"+")}:${e.variants.join(",")}`).join("|");return n.append("family",l),n.append("display",r),t?.subset&&n.append("subset",t.subset),t?.effect&&n.append("effect",t.effect),`https://fonts.googleapis.com/css?${decodeURIComponent(n.toString())}`};async function getFonts(e,t,o){let n=createFontUrl(e,t);if(!n)return"";try{let[e,t]=await Promise.all([getFontForUA(n,"Mozilla/5.0 (Windows NT 10.0; Trident/7.0; rv:11.0) like Gecko"),getFontForUA(n,"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.61 Safari/537.36")]),r=e+t;if(o){let e=new TextEncoder,t=r?e.encode(r).length:0;if(Math.ceil(t/1024)>=o)return`@import url('${n}');`}return r}catch(e){return""}}const getFontFromGlobalStyle=(e,t)=>{if(!e)return"";try{let o=JSON.parse(e),n=o?.font??{},r=Object.entries(n).map(([,e])=>e);return getFonts(r,void 0,t)}catch{return""}};async function getFontStyleFromPageTemplate(e){let t=e.map(e=>getFonts(genFonts.getFontsFromDataBuilder(e.data)));return await Promise.all(t)}exports.composeFonts=composeFonts,exports.createFontUrl=createFontUrl,exports.getFontFromGlobalStyle=getFontFromGlobalStyle,exports.getFontStyleFromPageTemplate=getFontStyleFromPageTemplate,exports.getFonts=getFonts;
+"use strict";var genFonts=require("./helpers/gen-fonts.js");const CHROME_UA="Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.61 Safari/537.36",IE_UA="Mozilla/5.0 (Windows NT 10.0; Trident/7.0; rv:11.0) like Gecko";async function getFontForUA(e,t){return fetch(e,{headers:{"User-Agent":t}}).then(e=>200===e.status?e.text():"")}const composeFonts=e=>{let t=e.filter((e,t,o)=>t===o.findIndex(t=>t.family===e.family));return t.map(t=>{let o=e.filter(e=>e.family===t.family).reduce((e,t)=>[...e,...t.variants],[]).filter((e,t,o)=>t===o.findIndex(t=>t===e));return{...t,variants:o}})},createFontUrl=(e,t)=>{let o=e.filter(e=>"google"===e.type||!e.type);if(!o.length)return;let n=new URLSearchParams,r=t?.display||"swap",a=o.filter((e,t,o)=>t===o.findIndex(t=>t.family===e.family)),l=composeFonts(a).map(e=>`${e.family.replace(/ /g,"+")}:${e.variants.join(",")}`).join("|");return n.append("family",l),n.append("display",r),t?.subset&&n.append("subset",t.subset),t?.effect&&n.append("effect",t.effect),`https://fonts.googleapis.com/css?${decodeURIComponent(n.toString())}`};async function getFonts(e,t,o){let n=createFontUrl(e,t);if(!n)return"";try{let[e,t]=await Promise.all([getFontForUA(n,"Mozilla/5.0 (Windows NT 10.0; Trident/7.0; rv:11.0) like Gecko"),getFontForUA(n,"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.61 Safari/537.36")]),r=e+t;if(o){let e=new TextEncoder,t=r?e.encode(r).length:0;if(Math.ceil(t/1024)>=o)return`@import url('${n}');`}return r}catch(e){return""}}const getFontFromGlobalStyle=(e,t)=>{if(!e)return"";try{let o=JSON.parse(e),n=o?.font??{},r=Object.entries(n).map(([,e])=>e);return getFonts(r,void 0,t)}catch{return""}};async function getFontStyleFromPageTemplate(e){let t=e.map(e=>getFonts(genFonts.getFontsFromDataBuilder(e.data)));return await Promise.all(t)}exports.composeFonts=composeFonts,exports.createFontUrl=createFontUrl,exports.getFontFromGlobalStyle=getFontFromGlobalStyle,exports.getFontStyleFromPageTemplate=getFontStyleFromPageTemplate,exports.getFonts=getFonts;

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

@@ -1 +1 @@
-import{memo as t,useRef as e,useCallback as r,useEffect as o}from"react";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},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},Toolbar=()=>{let t=e(null),a=e(!1),i=e(),n=e(!1),l=e(!1),d=({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")},u=r(({$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"),u=getChildrenByAttrSelector(t,"data-toolbar-add-bottom"),c=getChildrenByAttrSelector(t,"data-column"),s=getChildrenByAttrSelector(t,"data-theme-section-status");o&&s&&s.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"),d({$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"),u&&!a&&u.setAttribute("data-toolbar-add-hover","true"),c&&c.setAttribute("data-column-visible","true")},[]),c=r(({$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&&u({$component:t,isParent:!0});s({$component:t,$parents:r})}},[u]),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++}}}}},b=r(()=>{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))})},[]),v=r(()=>{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))}),b()},[b]),m=r(()=>{t.current=null;let e=["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(e.map(t=>`[${t}]`).join(","));r&&e.forEach(t=>{r.forEach(e=>e.removeAttribute(t))}),p(!1),i.current&&i.current.disconnect()},[]),f=(t,e)=>{let r=t.parentNode;r&&(i.current&&i.current.disconnect(),i.current=new MutationObserver(r=>{for(let o of r)o.removedNodes.forEach(r=>{r===t&&(i.current&&i.current.disconnect(),e())})}),i.current.observe(r,{childList:!0}))},h=r(({$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 t=o.querySelector("[data-spacing-margin-bottom-bg]")||null,r=o.querySelector("[data-spacing-margin-bottom-drag]")||null;if(t&&r){let a=e.marginBottom;t.style.height=a,r.style.top=a,o.setAttribute("data-spacing-margin-bottom-active","true")}}},[]),g=r(async({componentUid:e,productId:r,timeAwait:o=500,forceReActive:a})=>{if(!e)return;let i=await waitForElementToExist(`${r?`[data-product-id="${r}"] `:""}[data-uid="${e}"]`,o);if(!i||!a&&e==t.current?.componentUid&&r==t.current?.productId)return;(a||e===t.current?.componentUid)&&r===t.current?.productId||m();let n=getChildrenByAttrSelector(i,"data-toolbar"),l=getChildrenByAttrSelector(i,"data-outline"),u=getChildrenByAttrSelector(i,"data-toolbar-add-top"),c=getChildrenByAttrSelector(i,"data-toolbar-add-bottom"),s=getChildrenByAttrSelector(i,"data-column");if(n&&(t.current={componentUid:e,productId:r},n.removeAttribute("style"),n.setAttribute("data-toolbar-active","true"),d({$toolbar:n,$component:i,state:"active"})),l&&l.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 t=document.querySelectorAll(`[data-uid="${e}"]`);t?.length&&t.forEach(t=>{let e=getChildrenByAttrSelector(t,"data-outline");e&&e.setAttribute("data-outline-active","true")})}h({$component:i}),v(),f(i,()=>{g({componentUid:e,productId:r,timeAwait:2e3,forceReActive:!0})})},[m,v,h]),p=async e=>{if(e){if(t.current?.componentUid){let r=t.current?.componentUid,o=t.current?.productId,a=await waitForElementToExist(`${o?`[data-product-id="${o}"] `:""}[data-uid="${r}"]`,500);if(a){let t=getChildrenByAttrSelector(a,"data-toolbar"),r=getChildrenByAttrSelector(a,"data-outline"),o=getChildrenByAttrSelector(a,"data-spacing");t&&e&&t.setAttribute("data-toolbar-editor-inline-focus","true"),r&&e&&r.setAttribute("data-outline-editor-inline-focus","true"),o&&e&&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"))})}},A=r(e=>{let r=e.closest("[data-theme-section]"),o=r?.getAttribute("data-uid"),a=r&&o===t.current?.componentUid;if(!a)return;let i=getChildrenByAttrSelector(r,"data-theme-section-status");i&&i.setAttribute("data-theme-section-status-active","true")},[]),y=async({value:e})=>{if(!e)return;let r=await waitForElementToExist(`${t.current?.productId?`[data-product-id="${t.current?.productId}"] `:""}[data-uid="${t.current?.componentUid}"]`,500);if(r){let e=r?.querySelectorAll("[data-toolbar-parent]");if(e.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 e=>{let r=e.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=t.current?.productId||"");let n=new CustomEvent("editor:toolbar:force-active-component",{bubbles:!0,detail:{componentUid:r,productId:i}});o(e),window.dispatchEvent(n)};e.forEach(t=>{t.addEventListener("mouseover",()=>r(t)),t.addEventListener("mouseout",()=>o(t)),t.addEventListener("click",()=>a(t))})}}},w=r(e=>{if(a.current||n.current||l.current)return;let r=e.target;if(!r||"function"!=typeof r.closest){b();return}let o=r.closest("[data-toolbar-hover]");if(o)return;let i=r.closest("[data-toolbar-wrap]"),d=i?.getAttribute("data-uid");if(!i||!d||"ROOT"==d){v();return}let s=getChildrenByAttrSelector(i,"data-toolbar"),m=getChildrenByAttrSelector(i,"data-outline");if(m&&m.removeAttribute("data-outline-overlay"),!d||"ROOT"==d||s?.getAttribute("data-toolbar-hover-focus"))return;if(s?.getAttribute("data-toolbar-hover-focus")||v(),A(r),d==t.current?.componentUid){if(t.current.productId){let e=i.closest("[data-product-id]");if(e){let r=e.getAttribute("data-product-id");if(r==t.current.productId)return}}let e=r.closest("[data-theme-section]");if(!e)return;u({$component:e,focus:!0,isThemeSection:!0})}let f=r.closest("[data-theme-section]");f?u({$component:f,focus:!0,isThemeSection:!0}):(u({$component:i,componentUid:d,focus:!0}),c({$component:i,componentUid:d}))},[A,v,u,c,b,t]),E=r(t=>{if(a.current)return;let e=t.detail;e?.componentUid?g({componentUid:e.componentUid,productId:e.productId}):m()},[g,m,a]),S=r(()=>{v()},[v]),C=r(t=>{let e=t.detail;e.value&&(v(),m()),a.current=e.value},[v,m]),B=r(t=>{let e=t.detail;e.value?p(!0):p(!1)},[]),$=r(t=>{if(a.current)return;let e=t.detail;y({value:e?.value||!1})},[]),T=r(t=>{let e=t.detail;e?.value?(v(),n.current=!0):n.current=!1},[v]),L=r(t=>{let e=t.detail;e?.value?(v(),l.current=!0):l.current=!1},[v]);return o(()=>(document.addEventListener("mousemove",w),window.addEventListener("editor:active-component",E),window.addEventListener("editor:focus-outside-preview",S),window.addEventListener("editor:is-dragging",C),window.addEventListener("editor:is-editing-text-editor",B),window.addEventListener("editor:toolbar:show-parents",$),window.addEventListener("editor:toolbar:resize-spacing",T),window.addEventListener("editor:toolbar:resize-column",L),()=>{document.removeEventListener("mousemove",w),window.removeEventListener("editor:active-component",E),window.removeEventListener("editor:is-dragging",S),window.removeEventListener("editor:is-dragging",C),window.removeEventListener("editor:is-editing-text-editor",B),window.removeEventListener("editor:toolbar:show-parents",$),window.removeEventListener("editor:toolbar:resize-spacing",T),window.removeEventListener("editor:toolbar:resize-column",L)}),[w,E,S,C,B,$,T,L]),null};var Toolbar$1=t(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";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},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},Toolbar=()=>{let e=r(null),l=r(!1),d=r(),u=r(!1),c=r(!1),[s,b]=o(!1),[v,m]=o(0),[f,g]=o("bottom"),p=r(null),h=({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")},A=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"),h({$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")},[]),y=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&&A({$component:t,isParent:!0});w({$component:t,$parents:r})}},[A]),w=({$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++}}}}},E=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))})},[]),S=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))}),E()},[E]),C=a(()=>{if(p.current&&clearTimeout(p.current),v>0){let t=new CustomEvent("editor:toolbar:close-onboarding",{bubbles:!0,detail:{close:"close Onboarding"}});window.dispatchEvent(t),b(!1)}},[v]),B=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))}),q(!1),d.current&&d.current.disconnect(),C()},[C]),$=(t,e)=>{let r=t.parentNode;r&&(d.current&&d.current.disconnect(),d.current=new MutationObserver(r=>{for(let o of r)o.removedNodes.forEach(r=>{r===t&&(d.current&&d.current.disconnect(),e())})}),d.current.observe(r,{childList:!0}))},T=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 t=o.querySelector("[data-spacing-margin-bottom-bg]")||null,r=o.querySelector("[data-spacing-margin-bottom-drag]")||null;if(t&&r){let a=e.marginBottom;t.style.height=a,r.style.top=a,o.setAttribute("data-spacing-margin-bottom-active","true")}}},[]),L=a(({$component:t})=>{if(!t||isSection(t)||isPopup(t)||isSticky(t))return;let e=getChildrenByAttrSelector(t,"data-toolbar");if(e){let t=document.querySelector("[data-toolbar-onboarding]");0==v?setTimeout(()=>{let r=e.getBoundingClientRect(),o=r.top||0,a=t?.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 e=r.top+d-i-8;t?.setAttribute("style",`top: ${e}px;left: ${r.left}px;`),g("top")}else{let e=r.top+d+r.height+8;t?.setAttribute("style",`top: ${e}px;left: ${r.left}px;`),g("bottom")}m(t=>t+1),t?.setAttribute("data-onboarding-active","true")},250):(C(),t?.removeAttribute("data-onboarding-active"))}},[v,C]),O=a(async({componentUid:t,productId:r,timeAwait:o=500,forceReActive:a})=>{if(!t)return;let i=await waitForElementToExist(`${r?`[data-product-id="${r}"] `:""}[data-uid="${t}"]`,o);if(!i||!a&&t==e.current?.componentUid&&r==e.current?.productId)return;(a||t===e.current?.componentUid)&&r===e.current?.productId||B();let n=getChildrenByAttrSelector(i,"data-toolbar"),l=getChildrenByAttrSelector(i,"data-outline"),d=getChildrenByAttrSelector(i,"data-toolbar-add-top"),u=getChildrenByAttrSelector(i,"data-toolbar-add-bottom"),c=getChildrenByAttrSelector(i,"data-column");if(n&&(e.current={componentUid:t,productId:r},n.removeAttribute("style"),n.setAttribute("data-toolbar-active","true"),h({$toolbar:n,$component:i,state:"active"})),l&&l.setAttribute("data-outline-active","true"),d&&d.setAttribute("data-toolbar-add-active","true"),u&&u.setAttribute("data-toolbar-add-active","true"),c&&c.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")})}T({$component:i}),p.current&&clearTimeout(p.current),p.current=setTimeout(()=>{L({$component:i})},5e3),S(),$(i,()=>{O({componentUid:t,productId:r,timeAwait:2e3,forceReActive:!0})})},[B,S,T,L]),q=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"))})}},I=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))})}}},R=a(t=>{if(l.current||u.current||c.current)return;let r=t.target;if(!r||"function"!=typeof r.closest){E();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){S();return}let n=getChildrenByAttrSelector(a,"data-toolbar"),d=getChildrenByAttrSelector(a,"data-outline");if(d&&d.removeAttribute("data-outline-overlay"),!i||"ROOT"==i||n?.getAttribute("data-toolbar-hover-focus"))return;if(n?.getAttribute("data-toolbar-hover-focus")||S(),I(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;A({$component:t,focus:!0,isThemeSection:!0})}let s=r.closest("[data-theme-section]");s?A({$component:s,focus:!0,isThemeSection:!0}):(A({$component:a,componentUid:i,focus:!0}),y({$component:a,componentUid:i}))},[I,S,A,y,E,e]),U=a(t=>{if(l.current)return;let e=t.detail;e?.componentUid?O({componentUid:e.componentUid,productId:e.productId}):B()},[O,B,l]),P=a(()=>{S()},[S]),F=a(t=>{let e=t.detail;e.value&&(S(),B()),l.current=e.value},[S,B]),k=a(t=>{let e=t.detail;e.value?q(!0):q(!1)},[]),H=a(t=>{if(l.current)return;let e=t.detail;x({value:e?.value||!1})},[]),j=a(t=>{let e=t.detail;e?.value?(S(),u.current=!0):u.current=!1},[S]),z=a(t=>{let e=t.detail;e?.value?(S(),c.current=!0):c.current=!1},[S]),D=(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")))})},N=a(t=>{if(l.current)return;let e=t.detail;e?.componentUid&&D(e?.componentUid,e?.type)},[l]),V=a(t=>{let e=t.detail;e?.isNewUser&&b(!0)},[]);return i(()=>(document.addEventListener("mousemove",R),window.addEventListener("editor:active-component",U),window.addEventListener("editor:focus-outside-preview",P),window.addEventListener("editor:is-dragging",F),window.addEventListener("editor:is-editing-text-editor",k),window.addEventListener("editor:toolbar:show-parents",H),window.addEventListener("editor:toolbar:resize-spacing",j),window.addEventListener("editor:toolbar:resize-column",z),window.addEventListener("editor:hover-component",N),window.addEventListener("editor:toolbar-onboarding",V),()=>{document.removeEventListener("mousemove",R),window.removeEventListener("editor:active-component",U),window.removeEventListener("editor:is-dragging",P),window.removeEventListener("editor:is-dragging",F),window.removeEventListener("editor:is-editing-text-editor",k),window.removeEventListener("editor:toolbar:show-parents",H),window.removeEventListener("editor:toolbar:resize-spacing",j),window.removeEventListener("editor:toolbar:resize-column",z),window.removeEventListener("editor:hover-component",N),window.removeEventListener("editor:toolbar-onboarding",V)}),[R,U,P,F,k,H,j,z,N,V]),s&&t(n,{enable:!0,position:f,onCloseOnboarding:C})};var Toolbar$1=e(Toolbar);export{Toolbar$1 as default};

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

@@ -0,0 +1 @@
+import{jsx as e,jsxs as t,Fragment as i}from"react/jsx-runtime";import{memo as o}from"react";let Onboarding=({enable:o,position:d,onCloseOnboarding:n})=>{let l=()=>{n()},r=()=>t("video",{width:"100%",className:"w-full",loop:!0,muted:!0,autoPlay:!0,playsInline:!0,children:[e("source",{src:"https://ucarecdn.com/de5fd2eb-4525-45a7-ad13-53960dac225e/",type:"video/mp4"}),"Sorry, your browser doesn‘t support embedded videos."]});return e("div",{"data-toolbar-onboarding":!0,"data-toolbar-onboarding-position":d,children:o&&t(i,{children:[e("span",{"data-icon":!0,"data-position":d,children:"bottom"===d?e("svg",{width:"8",height:"4",viewBox:"0 0 8 4",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M-1.74846e-07 4L4 -1.74846e-07L8 4L-1.74846e-07 4Z",fill:"white"})}):e("svg",{width:"8",height:"4",viewBox:"0 0 8 4",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e("path",{d:"M8 3.33818e-07L4 4L4.76995e-08 7.15256e-07L8 3.33818e-07Z",fill:"white"})})}),t("div",{"data-onboarding-wrapper":!0,children:[e("button",{"data-close":!0,type:"button",onClick:l,children:t("svg",{width:"32",height:"32",viewBox:"0 0 32 32",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[e("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M10.6464 10.6464C10.8417 10.4512 11.1583 10.4512 11.3536 10.6464L21.3536 20.6464C21.5488 20.8417 21.5488 21.1583 21.3536 21.3536C21.1583 21.5488 20.8417 21.5488 20.6464 21.3536L10.6464 11.3536C10.4512 11.1583 10.4512 10.8417 10.6464 10.6464Z",fill:"#212121"}),e("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M21.3536 10.6464C21.5488 10.8417 21.5488 11.1583 21.3536 11.3536L11.3536 21.3536C11.1583 21.5488 10.8417 21.5488 10.6464 21.3536C10.4512 21.1583 10.4512 20.8417 10.6464 20.6464L20.6464 10.6464C20.8417 10.4512 21.1583 10.4512 21.3536 10.6464Z",fill:"#212121"})]})}),e(r,{}),t("div",{"data-content":!0,children:[e("h3",{children:"New way to select parent element"}),e("p",{children:"Select parent from here in case you can‘t find yours at times."})]})]})]})})};var Onboarding$1=o(Onboarding);export{Onboarding$1 as default};

package/dist/esm/libs/google-fonts.js

@@ -1 +1 @@
-import{getFontsFromDataBuilder as e}from"./helpers/gen-fonts.js";let CHROME_UA="Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.61 Safari/537.36",IE_UA="Mozilla/5.0 (Windows NT 10.0; Trident/7.0; rv:11.0) like Gecko";async function getFontForUA(e,t){return fetch(e,{headers:{"User-Agent":t}}).then(e=>e.text())}let composeFonts=e=>{let t=e.filter((e,t,n)=>t===n.findIndex(t=>t.family===e.family));return t.map(t=>{let n=e.filter(e=>e.family===t.family).reduce((e,t)=>[...e,...t.variants],[]).filter((e,t,n)=>t===n.findIndex(t=>t===e));return{...t,variants:n}})},createFontUrl=(e,t)=>{let n=e.filter(e=>"google"===e.type||!e.type);if(!n.length)return;let r=new URLSearchParams,o=t?.display||"swap",l=n.filter((e,t,n)=>t===n.findIndex(t=>t.family===e.family)),a=composeFonts(l).map(e=>`${e.family.replace(/ /g,"+")}:${e.variants.join(",")}`).join("|");return r.append("family",a),r.append("display",o),t?.subset&&r.append("subset",t.subset),t?.effect&&r.append("effect",t.effect),`https://fonts.googleapis.com/css?${decodeURIComponent(r.toString())}`};async function getFonts(e,t,n){let r=createFontUrl(e,t);if(!r)return"";try{let[e,t]=await Promise.all([getFontForUA(r,"Mozilla/5.0 (Windows NT 10.0; Trident/7.0; rv:11.0) like Gecko"),getFontForUA(r,"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.61 Safari/537.36")]),o=e+t;if(n){let e=new TextEncoder,t=o?e.encode(o).length:0;if(Math.ceil(t/1024)>=n)return`@import url('${r}');`}return o}catch(e){return""}}let getFontFromGlobalStyle=(e,t)=>{if(!e)return"";try{let n=JSON.parse(e),r=n?.font??{},o=Object.entries(r).map(([,e])=>e);return getFonts(o,void 0,t)}catch{return""}};async function getFontStyleFromPageTemplate(t){let n=t.map(t=>getFonts(e(t.data)));return await Promise.all(n)}export{composeFonts,createFontUrl,getFontFromGlobalStyle,getFontStyleFromPageTemplate,getFonts};
+import{getFontsFromDataBuilder as e}from"./helpers/gen-fonts.js";let CHROME_UA="Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.61 Safari/537.36",IE_UA="Mozilla/5.0 (Windows NT 10.0; Trident/7.0; rv:11.0) like Gecko";async function getFontForUA(e,t){return fetch(e,{headers:{"User-Agent":t}}).then(e=>200===e.status?e.text():"")}let composeFonts=e=>{let t=e.filter((e,t,n)=>t===n.findIndex(t=>t.family===e.family));return t.map(t=>{let n=e.filter(e=>e.family===t.family).reduce((e,t)=>[...e,...t.variants],[]).filter((e,t,n)=>t===n.findIndex(t=>t===e));return{...t,variants:n}})},createFontUrl=(e,t)=>{let n=e.filter(e=>"google"===e.type||!e.type);if(!n.length)return;let r=new URLSearchParams,o=t?.display||"swap",l=n.filter((e,t,n)=>t===n.findIndex(t=>t.family===e.family)),a=composeFonts(l).map(e=>`${e.family.replace(/ /g,"+")}:${e.variants.join(",")}`).join("|");return r.append("family",a),r.append("display",o),t?.subset&&r.append("subset",t.subset),t?.effect&&r.append("effect",t.effect),`https://fonts.googleapis.com/css?${decodeURIComponent(r.toString())}`};async function getFonts(e,t,n){let r=createFontUrl(e,t);if(!r)return"";try{let[e,t]=await Promise.all([getFontForUA(r,"Mozilla/5.0 (Windows NT 10.0; Trident/7.0; rv:11.0) like Gecko"),getFontForUA(r,"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.61 Safari/537.36")]),o=e+t;if(n){let e=new TextEncoder,t=o?e.encode(o).length:0;if(Math.ceil(t/1024)>=n)return`@import url('${r}');`}return o}catch(e){return""}}let getFontFromGlobalStyle=(e,t)=>{if(!e)return"";try{let n=JSON.parse(e),r=n?.font??{},o=Object.entries(r).map(([,e])=>e);return getFonts(o,void 0,t)}catch{return""}};async function getFontStyleFromPageTemplate(t){let n=t.map(t=>getFonts(e(t.data)));return await Promise.all(n)}export{composeFonts,createFontUrl,getFontFromGlobalStyle,getFontStyleFromPageTemplate,getFonts};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gem-sdk/pages",
-  "version": "1.14.0-dev.501",
+  "version": "1.14.0-dev.528",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",
@@ -25,7 +25,7 @@
     "next-seo": "^6.0.0"
   },
   "devDependencies": {
-    "@gem-sdk/core": "1.14.0-dev.501",
+    "@gem-sdk/core": "1.14.0-dev.527",
     "@gem-sdk/plugin-cookie-bar": "1.14.0-dev.284",
     "@gem-sdk/plugin-quick-view": "1.14.0-dev.284",
     "@gem-sdk/plugin-sticky-add-to-cart": "1.14.0-dev.284"