@gem-sdk/core 2.0.0-dev.1256 → 2.0.0-dev.1258

package/dist/cjs/components/ComponentWrapper.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),react=require("react"),composeAdvanceStyle=require("../helpers/compose-advance-style.js"),constant=require("./constant.js"),RenderCustomCode=require("./RenderCustomCode.js"),ComponentAnimation=require("./ComponentAnimation.js"),useRenderMode=require("../hooks/useRenderMode.js");const ComponentWrapper=({children:e,pageType:t,...n})=>{let{isPreviewSharePageMode:s}=useRenderMode.useRenderMode();if("section"===n.type)return null;let r=composeAdvanceStyle.composeAdvanceStyle(n.advanced,n.tag,t),i=n.advanced,d=()=>{let e={};return n.advanced?.displayInitInteraction!==void 0&&(e={"display-init":n.advanced?.displayInitInteraction===!1?"hide":"show","gp-interaction-wrapper":""}),e};return constant.disableWrap.includes(n.tag)&&react.isValidElement(e)?jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[s&&jsxRuntime.jsx(ComponentAnimation.default,{...n}),jsxRuntime.jsx(RenderCustomCode.default,{uid:n.uid,advanced:i}),jsxRuntime.jsx(e.type,{className:i?.cssClass,...e.props,style:r,advanced:i,builderAttrs:{...e.props.builderAttrs,...d()}})]}):jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[s&&jsxRuntime.jsx(ComponentAnimation.default,{...n}),jsxRuntime.jsx(RenderCustomCode.default,{uid:n.uid,advanced:i}),jsxRuntime.jsx("div",{style:r,...d(),className:`${n.uid} ${i?.cssClass}`,children:e})]})};exports.default=ComponentWrapper;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),react=require("react"),composeAdvanceStyle=require("../helpers/compose-advance-style.js"),constant=require("./constant.js"),RenderCustomCode=require("./RenderCustomCode.js"),useRenderMode=require("../hooks/useRenderMode.js"),AnimationWrapper=require("./animation/AnimationWrapper.js");const ComponentWrapper=({children:e,pageType:t,...s})=>{let{isPreviewSharePageMode:n}=useRenderMode.useRenderMode();if("section"===s.type)return null;let r=composeAdvanceStyle.composeAdvanceStyle(s.advanced,s.tag,t),a=s.advanced,{animation:d}=a??{},i=d?.desktop?.enabled||d?.tablet?.enabled||d?.mobile?.enabled,o=()=>{let e={};return s.advanced?.displayInitInteraction!==void 0&&(e={"display-init":s.advanced?.displayInitInteraction===!1?"hide":"show","gp-interaction-wrapper":""}),e},u=jsxRuntime.jsx("div",{style:r,className:`${s.uid} ${a?.cssClass}`,...o(),children:e});return constant.disableWrap.includes(s.tag)&&react.isValidElement(e)&&(u=jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(RenderCustomCode.default,{uid:s.uid,advanced:a}),jsxRuntime.jsx(e.type,{className:a?.cssClass,...e.props,style:r,advanced:a,builderAttrs:{...e.props.builderAttrs,...o()}})]})),i&&n&&(u=jsxRuntime.jsx(AnimationWrapper.default,{settings:d,tag:s.tag??"",children:u})),jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(RenderCustomCode.default,{uid:s.uid,advanced:a}),u]})};exports.default=ComponentWrapper;

package/dist/cjs/components/animation/AnimationWrapper.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var jsxRuntime=require("react/jsx-runtime"),useLivePageAnimation=require("../../hooks/animation/useLivePageAnimation.js"),react=require("react"),makeStyle=require("../../helpers/make-style.js");const AnimationWrapper=({children:e,settings:t,tag:i})=>{let n=react.useRef(null),a=(e,t)=>e?.triggerConfig?.[t]?.animation??"none",r=e=>{if("desktop"===e);else if("tablet"===e)return t?.tablet??t?.desktop;else if("mobile"===e)return t?.mobile??t?.tablet??t?.desktop;return t?.desktop},s=e=>r(e)?.enabled&&!["shake","none"].includes(a(r(e),"appear"))?"hidden":"visible",o={desktop:s("desktop"),tablet:s("tablet"),mobile:s("mobile")};return useLivePageAnimation.useLivePageAnimation(n,t,i),jsxRuntime.jsx("div",{ref:n,style:{...makeStyle.makeStyleResponsive("v",o),display:"contents"},children:e})};exports.default=AnimationWrapper;

package/dist/cjs/hooks/animation/animations.js

@@ -0,0 +1,2 @@
+'use client';
+"use strict";const EASING={ease:"cubic-bezier(0.46,0.03,0.52,0.96)","ease-in":"cubic-bezier(0.55,0.08,0.68,0.53)","ease-out":"cubic-bezier(0.46,0.03,0.52,0.96)",linear:"linear"},animations=()=>{let t=t=>{let r=JSON.parse(JSON.stringify(t)),e=["delay","speed","scale","intensity"];return e.forEach(t=>{if(!r?.[t])return;if("scale"===t){if(!r?.zoomDirection)throw TypeError("zoomDirection not found on zoom preset");let[e,a]=r?.scale?.in??[1,1],[n,o]=r?.scale?.out??[1,1];r[t]={in:[Number(e)/100,Number(a)/100],out:[Number(n)/100,Number(o)/100]};return}let e=Number(r?.[t]);if("delay"===t?r[t]=1e3*e:r[t]=e,!isFinite(e))throw TypeError(`${t} must be a number`)}),r},r=(r,e)=>{let n=t(e),{direction:s,distance:l}=n,p=["left","right"].includes(s??"")?"X":"Y",u=["left","down"].includes(s??"")?"-":"",f=o(r),m=[{display:f,opacity:0,transform:`translate${p}(${u}${l??50}%)`},{display:f,opacity:i(r),transform:`translate${p}(0)`}];return c(r,m,{...a(n,500),fill:"forwards"})},e=(r,e)=>{let n=t(e),o=[{opacity:0},{opacity:i(r)}];return c(r,o,{...a(n,500)})},a=(t,r)=>{let e=t=>t?1.5/t*1e3:r,{loop:a,delay:n,speed:o,easing:i}=t??{},s=e(o),l=n??0,c=a?s+l:s;return{iterations:a?1/0:1,duration:c,delay:l,easing:EASING[i??"linear"]}},n=(r,e)=>{let n=t(e),{scale:s,zoomDirection:l,isFade:p}=n,[u,f]=s.in,[m,y]=s.out,d=o(r),b=i(r),$=[{display:d,transform:`scale(${u}, ${u})`,opacity:p?0:1},{display:d,transform:`scale(${f??1.2}, ${f??1.2})`,opacity:b}],w=[{display:d,transform:`scale(${m}, ${m})`,opacity:p?0:1},{display:d,transform:`scale(${y??.8}, ${y??.8})`,opacity:b}],x="in"===l?$:w;return c(r,x,{...a(n,700),fill:"forwards"})},o=t=>{let r="inline"===window.getComputedStyle(t,null).getPropertyValue("display");return r?"block":void 0},i=t=>window.getComputedStyle(t,null).getPropertyValue("opacity"),s=(t,r,e)=>{if(!r)return t;let a=r/e,n=[...t].pop();return[...t,{...n,offset:1-a}]},l=(r,e)=>{let n=t(e),{intensity:s}=n??{},l=o(r),p=i(r),u=[{transform:"translate3d(0, 0, 0)",opacity:p,display:l}],f=[{transform:"translate3d(4px, 0, 0)",opacity:p,display:l},{transform:"translate3d(-4px, 0, 0)",opacity:p,display:l},{transform:"translate3d(4px, 0, 0)",opacity:p,display:l}],m=[];Array.from(Array(s??1).keys()).forEach(()=>{m=[...m,...f]});let y=[{transform:"translate3d(-1px, 0, 0)",opacity:p,display:l},{transform:"translate3d(2px, 0, 0)",opacity:p,display:l},{transform:"translate3d(-4px, 0, 0)",opacity:p,display:l},...m,{transform:"translate3d(-4px, 0, 0)",opacity:p,display:l},{transform:"translate3d(2px, 0, 0)",opacity:p,display:l},{transform:"translate3d(-1px, 0, 0)",opacity:p,display:l}];return c(r,s?y:u,{...a(n??{},820)})},c=(t,r,e)=>{let a=new KeyframeEffect(t,e.iterations&&1===e.iterations?r:s(r,e?.delay??0,e?.duration??0),{...e});return new Animation(a,document.timeline)};return{zoom:n,shake:l,fade:e,slide:r}};exports.animations=animations;

package/dist/cjs/hooks/animation/useApplyAnimation.js

@@ -1,2 +1,2 @@
 'use client';
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react=require("react"),useAnimations=require("../useAnimations.js"),useAnimationTarget=require("./useAnimationTarget.js"),useAnimationConfig=require("./useAnimationConfig.js"),useAnimationActions=require("./useAnimationActions.js"),useAnimationPreview=require("./useAnimationPreview.js");require("../../types/builder.js"),require("../../types/custom.js");var animations=require("../../types/animations.js"),_const=require("../../helpers/const.js"),useRenderMode=require("../useRenderMode.js");const useApplyAnimation=({props:e})=>{let{uid:i}=e,{isPreviewSharePageMode:n}=useRenderMode.useRenderMode(),t=useAnimations.useAnimations(),{initListOfTargets:s,targetObjects:r,setToolbarActive:a}=useAnimationTarget.useAnimationTarget(e),{isEnabledAnimation:o,getAnimationConfig:u}=useAnimationConfig.useAnimationConfig(e),{setAnimation:m,cancelAnimation:A,playAnimation:c,setAnimationOnFinish:d}=useAnimationActions.useAnimationActions(),p=()=>{e.tag===_const.DIALOG&&(s(),v()),c()},{previewAnimation:l}=useAnimationPreview.useAnimationPreview({props:e,playAnimation:p,cancelAnimation:A,setAnimationOnFinish:d,setToolbarActive:a}),f=react.useCallback(({target:e,setting:i,type:n,reverse:s})=>t[n](e,i,s),[t]),v=react.useCallback(()=>{let{type:e,setting:i,reverse:n}=u();if(!e||e===animations.AnimationType.None||!r.current.length){A();return}let t=r.current.map(t=>f({type:e,setting:i,target:t.target,reverse:n}));A(),m(t)},[u,r,A,m,f]);react.useEffect(()=>(o?(s(),v()):A(),()=>{A()}),[i,v,A,o,s]),react.useEffect(()=>(window.addEventListener("preview-animation",l),()=>{window.removeEventListener("preview-animation",l)}),[l]),react.useEffect(()=>(window.addEventListener("init-animation-target",s),()=>{window.removeEventListener("init-animation-target",s)}),[s]),react.useEffect(()=>{n&&c()},[n,c])};exports.default=useApplyAnimation;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var react=require("react"),useAnimations=require("../useAnimations.js"),useAnimationTarget=require("./useAnimationTarget.js"),useAnimationConfig=require("./useAnimationConfig.js"),useAnimationActions=require("./useAnimationActions.js"),useAnimationPreview=require("./useAnimationPreview.js");require("../../types/builder.js"),require("../../types/custom.js");var animations=require("../../types/animations.js"),_const=require("../../helpers/const.js");const useApplyAnimation=({props:e})=>{let{uid:i}=e,n=useAnimations.useAnimations(),{initListOfTargets:t,targetObjects:a,setToolbarActive:s}=useAnimationTarget.useAnimationTarget(e),{isEnabledAnimation:r,getAnimationConfig:o}=useAnimationConfig.useAnimationConfig(e),{setAnimation:u,cancelAnimation:m,playAnimation:A,setAnimationOnFinish:c}=useAnimationActions.useAnimationActions(),p=()=>{e.tag===_const.DIALOG&&(t(),g()),A()},{previewAnimation:l}=useAnimationPreview.useAnimationPreview({props:e,playAnimation:p,cancelAnimation:m,setAnimationOnFinish:c,setToolbarActive:s}),v=react.useCallback(({target:e,setting:i,type:t,reverse:a})=>n[t](e,i,a),[n]),g=react.useCallback(()=>{let{type:e,setting:i,reverse:n}=o();if(!e||e===animations.AnimationType.None||!a.current.length){m();return}let t=a.current.map(t=>v({type:e,setting:i,target:t.target,reverse:n}));m(),u(t)},[o,a,m,u,v]);react.useEffect(()=>(r?(t(),g()):m(),()=>{m()}),[i,g,m,r,t]),react.useEffect(()=>(window.addEventListener("preview-animation",l),()=>{window.removeEventListener("preview-animation",l)}),[l]),react.useEffect(()=>(window.addEventListener("init-animation-target",t),()=>{window.removeEventListener("init-animation-target",t)}),[t])};exports.default=useApplyAnimation;

package/dist/cjs/hooks/animation/useLivePageAnimation.js

@@ -0,0 +1,2 @@
+'use client';
+"use strict";var react=require("react"),animations=require("./animations.js");const TAGS_SELECTOR={Button:".gp-button-base",ProductButton:".gp-button-base",Sticky:"gp-sticky",Dialog:"div[role=dialog]",Icon:"div div",ProductTag:"div div div"},useLivePageAnimation=(e,r,t)=>{let n=animations.animations(),[u,c]=react.useState(!1),a=react.useRef(void 0),i=react.useRef(void 0),o=react.useRef(null),l=react.useRef("none"),s=react.useRef("none"),b=react.useRef(null),d=react.useRef(null),p=react.useRef(null),f=react.useRef("animation-wrapper-"),m=react.useCallback(e=>{b.current&&(b.current.playbackRate=e??1,b.current.play())},[b]),v=react.useCallback(e=>{d.current&&(d.current.playbackRate=e??1,d.current.play())},[d]),g=react.useCallback(()=>{e.current&&(e.current.style.opacity="1"),o.current&&(o.current.style.opacity="1")},[e]),k=react.useCallback(()=>{e.current&&(e.current.style.opacity="1"),o.current&&(o.current.style.opacity="0")},[e]),C=react.useCallback(e=>{e&&e.stopPropagation(),"shake"!==l.current&&k(),b.current&&(d.current?.cancel(),m(),b.current.finished.then(()=>{o.current&&g()}),o.current&&a?.current?.unobserve(o.current))},[k,m,g]),y=react.useCallback(()=>{g(),b.current&&b.current.cancel()},[g,b]),R=react.useCallback(e=>{e&&e.stopPropagation(),d.current&&(y(),v())},[d,y,v]),h=react.useCallback(()=>{if(d.current){if("zoom"===s.current){if(v(-1),!u)return;d.current.finished.then(()=>{clearTimeout(i.current),i.current=setTimeout(()=>{C()},100)});return}d.current.cancel(),u&&C()}},[v,u,C]),E=react.useCallback(()=>{if("desktop"===p.current);else if("tablet"===p.current)return r?.tablet??r?.desktop;else if("mobile"===p.current)return r?.mobile??r?.tablet??r?.desktop;return r?.desktop},[r?.desktop,r?.mobile,r?.tablet]),S=(e,r)=>e?.triggerConfig?.[r]?.animation??"none",L=react.useCallback(e=>{if("none"===l.current)return;let r=e?.triggerConfig?.appear?.setting?.[l.current];c(r.loop),b.current=n?.[l.current]?.(o.current,r)},[n]),T=react.useCallback(e=>{if("none"===s.current)return;let r=e?.triggerConfig?.hover?.setting?.[s.current];d.current=n?.[s.current]?.(o.current,r)},[n]),P=react.useCallback(()=>{b.current&&(b.current=null,o.current&&a.current?.unobserve(o.current)),d&&(d.current=null,o.current&&(o.current.removeEventListener("mouseenter",R),o.current.removeEventListener("mouseleave",h)))},[h,R]),A=react.useCallback(e=>{if(P(),o.current){if(!e?.enabled){g();return}l.current=S(e,"appear"),s.current=S(e,"hover"),"none"===l.current&&g(),"none"!==s.current&&"desktop"===p.current&&(T(e),o.current.addEventListener("mouseenter",R),o.current.addEventListener("mouseleave",h)),"none"!==l.current?(L(e),a.current=new IntersectionObserver(e=>{e.forEach(e=>{e.intersectionRatio>.1&&C()})},{root:null,rootMargin:"0px",threshold:[.1]}),a.current.observe(o.current)):g()}},[h,L,T,C,R,g,P]),q=react.useCallback(()=>{let e=document.querySelector("html");if(!o.current||!e)return;let r=new ResizeObserver(([e])=>{let r;let t=e?.target.getBoundingClientRect().width??0;r=t>=1024?"desktop":t>=768?"tablet":"mobile",p.current!==r&&(p.current=r,A(E()))});return r.observe(e),()=>r.disconnect()},[E,A]);return react.useEffect(()=>{setTimeout(()=>{if(!r||!e.current)return;f.current=`animation-wrapper-${Math.random().toString(36).substr(2,5)}`,e.current.setAttribute("data-animationid",f.current);let n=document.body.querySelector("#storefront");return n&&(o.current=n.querySelector(`[data-animationid='${f.current}'] ${TAGS_SELECTOR?.[t]??"div"}`)),q()},100)},[q,r,t,e]),{initAnimation:A}};exports.useLivePageAnimation=useLivePageAnimation;

package/dist/esm/components/ComponentWrapper.js

@@ -1 +1 @@
-import{jsxs as e,Fragment as t,jsx as r}from"react/jsx-runtime";import{isValidElement as n}from"react";import{composeAdvanceStyle as o}from"../helpers/compose-advance-style.js";import{disableWrap as a}from"./constant.js";import i from"./RenderCustomCode.js";import s from"./ComponentAnimation.js";import{useRenderMode as d}from"../hooks/useRenderMode.js";let ComponentWrapper=({children:p,pageType:c,...l})=>{let{isPreviewSharePageMode:m}=d();if("section"===l.type)return null;let u=o(l.advanced,l.tag,c),f=l.advanced,v=()=>{let e={};return l.advanced?.displayInitInteraction!==void 0&&(e={"display-init":l.advanced?.displayInitInteraction===!1?"hide":"show","gp-interaction-wrapper":""}),e};return a.includes(l.tag)&&n(p)?e(t,{children:[m&&r(s,{...l}),r(i,{uid:l.uid,advanced:f}),r(p.type,{className:f?.cssClass,...p.props,style:u,advanced:f,builderAttrs:{...p.props.builderAttrs,...v()}})]}):e(t,{children:[m&&r(s,{...l}),r(i,{uid:l.uid,advanced:f}),r("div",{style:u,...v(),className:`${l.uid} ${f?.cssClass}`,children:p})]})};export{ComponentWrapper as default};
+import{jsxs as e,Fragment as t,jsx as r}from"react/jsx-runtime";import{isValidElement as a}from"react";import{composeAdvanceStyle as n}from"../helpers/compose-advance-style.js";import{disableWrap as i}from"./constant.js";import d from"./RenderCustomCode.js";import{useRenderMode as s}from"../hooks/useRenderMode.js";import o from"./animation/AnimationWrapper.js";let ComponentWrapper=({children:p,pageType:l,...c})=>{let{isPreviewSharePageMode:m}=s();if("section"===c.type)return null;let u=n(c.advanced,c.tag,l),f=c.advanced,{animation:v}=f??{},h=v?.desktop?.enabled||v?.tablet?.enabled||v?.mobile?.enabled,b=()=>{let e={};return c.advanced?.displayInitInteraction!==void 0&&(e={"display-init":c.advanced?.displayInitInteraction===!1?"hide":"show","gp-interaction-wrapper":""}),e},y=r("div",{style:u,className:`${c.uid} ${f?.cssClass}`,...b(),children:p});return i.includes(c.tag)&&a(p)&&(y=e(t,{children:[r(d,{uid:c.uid,advanced:f}),r(p.type,{className:f?.cssClass,...p.props,style:u,advanced:f,builderAttrs:{...p.props.builderAttrs,...b()}})]})),h&&m&&(y=r(o,{settings:v,tag:c.tag??"",children:y})),e(t,{children:[r(d,{uid:c.uid,advanced:f}),y]})};export{ComponentWrapper as default};

package/dist/esm/components/animation/AnimationWrapper.js

@@ -0,0 +1 @@
+import{jsx as e}from"react/jsx-runtime";import{useLivePageAnimation as t}from"../../hooks/animation/useLivePageAnimation.js";import{useRef as i}from"react";import{makeStyleResponsive as o}from"../../helpers/make-style.js";let AnimationWrapper=({children:r,settings:n,tag:a})=>{let l=i(null),s=(e,t)=>e?.triggerConfig?.[t]?.animation??"none",m=e=>{if("desktop"===e);else if("tablet"===e)return n?.tablet??n?.desktop;else if("mobile"===e)return n?.mobile??n?.tablet??n?.desktop;return n?.desktop},p=e=>m(e)?.enabled&&!["shake","none"].includes(s(m(e),"appear"))?"hidden":"visible",d={desktop:p("desktop"),tablet:p("tablet"),mobile:p("mobile")};return t(l,n,a),e("div",{ref:l,style:{...o("v",d),display:"contents"},children:r})};export{AnimationWrapper as default};

package/dist/esm/hooks/animation/animations.js

@@ -0,0 +1,2 @@
+'use client';
+let EASING={ease:"cubic-bezier(0.46,0.03,0.52,0.96)","ease-in":"cubic-bezier(0.55,0.08,0.68,0.53)","ease-out":"cubic-bezier(0.46,0.03,0.52,0.96)",linear:"linear"},animations=()=>{let t=t=>{let e=JSON.parse(JSON.stringify(t)),r=["delay","speed","scale","intensity"];return r.forEach(t=>{if(!e?.[t])return;if("scale"===t){if(!e?.zoomDirection)throw TypeError("zoomDirection not found on zoom preset");let[r,a]=e?.scale?.in??[1,1],[n,o]=e?.scale?.out??[1,1];e[t]={in:[Number(r)/100,Number(a)/100],out:[Number(n)/100,Number(o)/100]};return}let r=Number(e?.[t]);if("delay"===t?e[t]=1e3*r:e[t]=r,!isFinite(r))throw TypeError(`${t} must be a number`)}),e},e=(e,r)=>{let n=t(r),{direction:l,distance:s}=n,p=["left","right"].includes(l??"")?"X":"Y",u=["left","down"].includes(l??"")?"-":"",f=o(e),y=[{display:f,opacity:0,transform:`translate${p}(${u}${s??50}%)`},{display:f,opacity:i(e),transform:`translate${p}(0)`}];return c(e,y,{...a(n,500),fill:"forwards"})},r=(e,r)=>{let n=t(r),o=[{opacity:0},{opacity:i(e)}];return c(e,o,{...a(n,500)})},a=(t,e)=>{let r=t=>t?1.5/t*1e3:e,{loop:a,delay:n,speed:o,easing:i}=t??{},l=r(o),s=n??0,c=a?l+s:l;return{iterations:a?1/0:1,duration:c,delay:s,easing:EASING[i??"linear"]}},n=(e,r)=>{let n=t(r),{scale:l,zoomDirection:s,isFade:p}=n,[u,f]=l.in,[y,m]=l.out,d=o(e),b=i(e),$=[{display:d,transform:`scale(${u}, ${u})`,opacity:p?0:1},{display:d,transform:`scale(${f??1.2}, ${f??1.2})`,opacity:b}],w=[{display:d,transform:`scale(${y}, ${y})`,opacity:p?0:1},{display:d,transform:`scale(${m??.8}, ${m??.8})`,opacity:b}],x="in"===s?$:w;return c(e,x,{...a(n,700),fill:"forwards"})},o=t=>{let e="inline"===window.getComputedStyle(t,null).getPropertyValue("display");return e?"block":void 0},i=t=>window.getComputedStyle(t,null).getPropertyValue("opacity"),l=(t,e,r)=>{if(!e)return t;let a=e/r,n=[...t].pop();return[...t,{...n,offset:1-a}]},s=(e,r)=>{let n=t(r),{intensity:l}=n??{},s=o(e),p=i(e),u=[{transform:"translate3d(0, 0, 0)",opacity:p,display:s}],f=[{transform:"translate3d(4px, 0, 0)",opacity:p,display:s},{transform:"translate3d(-4px, 0, 0)",opacity:p,display:s},{transform:"translate3d(4px, 0, 0)",opacity:p,display:s}],y=[];Array.from(Array(l??1).keys()).forEach(()=>{y=[...y,...f]});let m=[{transform:"translate3d(-1px, 0, 0)",opacity:p,display:s},{transform:"translate3d(2px, 0, 0)",opacity:p,display:s},{transform:"translate3d(-4px, 0, 0)",opacity:p,display:s},...y,{transform:"translate3d(-4px, 0, 0)",opacity:p,display:s},{transform:"translate3d(2px, 0, 0)",opacity:p,display:s},{transform:"translate3d(-1px, 0, 0)",opacity:p,display:s}];return c(e,l?m:u,{...a(n??{},820)})},c=(t,e,r)=>{let a=new KeyframeEffect(t,r.iterations&&1===r.iterations?e:l(e,r?.delay??0,r?.duration??0),{...r});return new Animation(a,document.timeline)};return{zoom:n,shake:s,fade:r,slide:e}};export{animations};

package/dist/esm/hooks/animation/useApplyAnimation.js

@@ -1,2 +1,2 @@
 'use client';
-import{useCallback as t,useEffect as i}from"react";import{useAnimations as e}from"../useAnimations.js";import{useAnimationTarget as n}from"./useAnimationTarget.js";import{useAnimationConfig as o}from"./useAnimationConfig.js";import{useAnimationActions as r}from"./useAnimationActions.js";import{useAnimationPreview as m}from"./useAnimationPreview.js";import"../../types/builder.js";import"../../types/custom.js";import{AnimationType as s}from"../../types/animations.js";import{DIALOG as a}from"../../helpers/const.js";import{useRenderMode as p}from"../useRenderMode.js";let useApplyAnimation=({props:u})=>{let{uid:d}=u,{isPreviewSharePageMode:f}=p(),l=e(),{initListOfTargets:w,targetObjects:A,setToolbarActive:j}=n(u),{isEnabledAnimation:v,getAnimationConfig:g}=o(u),{setAnimation:c,cancelAnimation:y,playAnimation:E,setAnimationOnFinish:L}=r(),h=()=>{u.tag===a&&(w(),C()),E()},{previewAnimation:b}=m({props:u,playAnimation:h,cancelAnimation:y,setAnimationOnFinish:L,setToolbarActive:j}),x=t(({target:t,setting:i,type:e,reverse:n})=>l[e](t,i,n),[l]),C=t(()=>{let{type:t,setting:i,reverse:e}=g();if(!t||t===s.None||!A.current.length){y();return}let n=A.current.map(n=>x({type:t,setting:i,target:n.target,reverse:e}));y(),c(n)},[g,A,y,c,x]);i(()=>(v?(w(),C()):y(),()=>{y()}),[d,C,y,v,w]),i(()=>(window.addEventListener("preview-animation",b),()=>{window.removeEventListener("preview-animation",b)}),[b]),i(()=>(window.addEventListener("init-animation-target",w),()=>{window.removeEventListener("init-animation-target",w)}),[w]),i(()=>{f&&E()},[f,E])};export{useApplyAnimation as default};
+import{useCallback as t,useEffect as i}from"react";import{useAnimations as e}from"../useAnimations.js";import{useAnimationTarget as n}from"./useAnimationTarget.js";import{useAnimationConfig as o}from"./useAnimationConfig.js";import{useAnimationActions as r}from"./useAnimationActions.js";import{useAnimationPreview as m}from"./useAnimationPreview.js";import"../../types/builder.js";import"../../types/custom.js";import{AnimationType as a}from"../../types/animations.js";import{DIALOG as s}from"../../helpers/const.js";let useApplyAnimation=({props:p})=>{let{uid:u}=p,d=e(),{initListOfTargets:f,targetObjects:l,setToolbarActive:w}=n(p),{isEnabledAnimation:A,getAnimationConfig:j}=o(p),{setAnimation:v,cancelAnimation:g,playAnimation:c,setAnimationOnFinish:y}=r(),E=()=>{p.tag===s&&(f(),b()),c()},{previewAnimation:L}=m({props:p,playAnimation:E,cancelAnimation:g,setAnimationOnFinish:y,setToolbarActive:w}),h=t(({target:t,setting:i,type:e,reverse:n})=>d[e](t,i,n),[d]),b=t(()=>{let{type:t,setting:i,reverse:e}=j();if(!t||t===a.None||!l.current.length){g();return}let n=l.current.map(n=>h({type:t,setting:i,target:n.target,reverse:e}));g(),v(n)},[j,l,g,v,h]);i(()=>(A?(f(),b()):g(),()=>{g()}),[u,b,g,A,f]),i(()=>(window.addEventListener("preview-animation",L),()=>{window.removeEventListener("preview-animation",L)}),[L]),i(()=>(window.addEventListener("init-animation-target",f),()=>{window.removeEventListener("init-animation-target",f)}),[f])};export{useApplyAnimation as default};

package/dist/esm/hooks/animation/useLivePageAnimation.js

@@ -0,0 +1,2 @@
+'use client';
+import{useState as e,useRef as r,useCallback as t,useEffect as n}from"react";import{animations as u}from"./animations.js";let TAGS_SELECTOR={Button:".gp-button-base",ProductButton:".gp-button-base",Sticky:"gp-sticky",Dialog:"div[role=dialog]",Icon:"div div",ProductTag:"div div div"},useLivePageAnimation=(c,o,i)=>{let a=u(),[l,s]=e(!1),d=r(void 0),p=r(void 0),m=r(null),v=r("none"),g=r("none"),b=r(null),f=r(null),y=r(null),h=r("animation-wrapper-"),k=t(e=>{b.current&&(b.current.playbackRate=e??1,b.current.play())},[b]),E=t(e=>{f.current&&(f.current.playbackRate=e??1,f.current.play())},[f]),S=t(()=>{c.current&&(c.current.style.opacity="1"),m.current&&(m.current.style.opacity="1")},[c]),L=t(()=>{c.current&&(c.current.style.opacity="1"),m.current&&(m.current.style.opacity="0")},[c]),T=t(e=>{e&&e.stopPropagation(),"shake"!==v.current&&L(),b.current&&(f.current?.cancel(),k(),b.current.finished.then(()=>{m.current&&S()}),m.current&&d?.current?.unobserve(m.current))},[L,k,S]),R=t(()=>{S(),b.current&&b.current.cancel()},[S,b]),C=t(e=>{e&&e.stopPropagation(),f.current&&(R(),E())},[f,R,E]),P=t(()=>{if(f.current){if("zoom"===g.current){if(E(-1),!l)return;f.current.finished.then(()=>{clearTimeout(p.current),p.current=setTimeout(()=>{T()},100)});return}f.current.cancel(),l&&T()}},[E,l,T]),w=t(()=>{if("desktop"===y.current);else if("tablet"===y.current)return o?.tablet??o?.desktop;else if("mobile"===y.current)return o?.mobile??o?.tablet??o?.desktop;return o?.desktop},[o?.desktop,o?.mobile,o?.tablet]),A=(e,r)=>e?.triggerConfig?.[r]?.animation??"none",O=t(e=>{if("none"===v.current)return;let r=e?.triggerConfig?.appear?.setting?.[v.current];s(r.loop),b.current=a?.[v.current]?.(m.current,r)},[a]),q=t(e=>{if("none"===g.current)return;let r=e?.triggerConfig?.hover?.setting?.[g.current];f.current=a?.[g.current]?.(m.current,r)},[a]),B=t(()=>{b.current&&(b.current=null,m.current&&d.current?.unobserve(m.current)),f&&(f.current=null,m.current&&(m.current.removeEventListener("mouseenter",C),m.current.removeEventListener("mouseleave",P)))},[P,C]),$=t(e=>{if(B(),m.current){if(!e?.enabled){S();return}v.current=A(e,"appear"),g.current=A(e,"hover"),"none"===v.current&&S(),"none"!==g.current&&"desktop"===y.current&&(q(e),m.current.addEventListener("mouseenter",C),m.current.addEventListener("mouseleave",P)),"none"!==v.current?(O(e),d.current=new IntersectionObserver(e=>{e.forEach(e=>{e.intersectionRatio>.1&&T()})},{root:null,rootMargin:"0px",threshold:[.1]}),d.current.observe(m.current)):S()}},[P,O,q,T,C,S,B]),x=t(()=>{let e=document.querySelector("html");if(!m.current||!e)return;let r=new ResizeObserver(([e])=>{let r;let t=e?.target.getBoundingClientRect().width??0;r=t>=1024?"desktop":t>=768?"tablet":"mobile",y.current!==r&&(y.current=r,$(w()))});return r.observe(e),()=>r.disconnect()},[w,$]);return n(()=>{setTimeout(()=>{if(!o||!c.current)return;h.current=`animation-wrapper-${Math.random().toString(36).substr(2,5)}`,c.current.setAttribute("data-animationid",h.current);let e=document.body.querySelector("#storefront");return e&&(m.current=e.querySelector(`[data-animationid='${h.current}'] ${TAGS_SELECTOR?.[i]??"div"}`)),x()},100)},[x,o,i,c]),{initAnimation:$}};export{useLivePageAnimation};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gem-sdk/core",
-  "version": "2.0.0-dev.1256",
+  "version": "2.0.0-dev.1258",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",