@ssgoi/core 6.2.0 → 6.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +1 -1
- package/dist/index.js +10 -2
- package/dist/transitions/fade/index.d.ts +2 -5
- package/dist/transitions/fade/index.d.ts.map +1 -1
- package/dist/transitions/fade/types.d.ts +2 -8
- package/dist/transitions/fade/types.d.ts.map +1 -1
- package/dist/transitions/zoom/provider/blur.d.ts.map +1 -1
- package/dist/transitions/zoom/provider/static.d.ts.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -32,4 +32,4 @@
|
|
|
32
32
|
${t.left+t.width}px ${t.top}px,
|
|
33
33
|
${t.left+t.width}px ${t.top+t.height}px,
|
|
34
34
|
${t.left}px ${t.top+t.height}px
|
|
35
|
-
)`}function nt(e,t,n,s,o){const i=n/1e3;return new h.WebAnimation({element:e,integrator:new Xt({durationSec:i}),lowerBound:0,upperBound:1,style:r=>s(Xe(t,r)),onComplete:o})}const Be=(e={})=>{var o;const t=((o=e.border)==null?void 0:o.color)??We,n=He,s=e.physics;return{prepare:({from:i,to:r,context:c})=>{const l=k(c,"from"),a=k(c,"to"),p=Y(document.body,c.positionedParent),f=Ve(t,{...l,top:p.top});for(const m of["topLeft","topRight","bottomLeft","bottomRight"])c.positionedParent.appendChild(f[m]);return i.then(m=>{St(m,l),xt(m,l),m.style.transform=`translateY(${-l.top}px)`}),r.then(m=>{St(m,a),xt(m,a),m.style.transform=`translateY(${-a.top+a.height}px) scale(${n})`}),{borders:f,fromRect:l,toRect:a}},animation:({from:i,to:r,context:c,borders:l,fromRect:a,toRect:p})=>{const f=wt({rect:a,scale:n,direction:"out",override:s}),m=wt({rect:p,scale:n,direction:"in",override:s}),u=nt(i,f.snapshots,f.totalDuration,w=>({transform:`translateY(${w.translateY}px) scale(${w.scale})`}),()=>{i.style.clipPath="",i.style.transformOrigin=""}),d=nt(r,m.snapshots,m.totalDuration,w=>({transform:`translateY(${w.translateY}px) scale(${w.scale})`}),()=>{r.style.clipPath="",r.style.transformOrigin="",r.style.transform=""}),y=Ne.map(([w,E],C)=>{const O=["topLeft","topRight","bottomLeft","bottomRight"][C];return nt(l[O],f.snapshots,f.totalDuration,v=>{const D=(a.width-a.width*v.scale)/2*.7*w,_=(a.height-a.height*v.scale)/2*.7*E;return{transform:`translate(${D}px, ${_}px)`}})}),g=new h.MultiAnimation([u,d,...y],{mode:"parallel"}),S=g.onComplete;return g.onComplete=()=>{S==null||S();const w=c.positionedParent;for(const E of["topLeft","topRight","bottomLeft","bottomRight"]){const C=l[E];C.parentElement===w&&w.removeChild(C)}},g}}};function Re(e){const{paths:t,options:n}=e,s=(n==null?void 0:n.borderColor)!==void 0?{border:{color:n.borderColor}}:void 0;return T(t,()=>Be(s))}const $t="data-hero-enter-key",Et="data-hero-exit-key",st="data-hero-key";class qe{prepare(t){t.from.then(n=>{n.style.opacity="0"})}}const Ze=()=>new qe;class je{contribute(t){const{from:n,to:s,physics:o,onComplete:i}=t,r=n.style.opacity,c=s.style.opacity,l=n.style.willChange,a=s.style.willChange;return s.style.opacity="0",n.style.willChange="opacity",s.style.willChange="opacity",i(()=>{n.style.opacity=r,s.style.opacity=c,n.style.willChange=l,s.style.willChange=a}),[new h.WebAnimation({element:n,integrator:b.from(o),style:(p,f)=>({opacity:f})}),new h.WebAnimation({element:s,integrator:b.from(o),style:p=>({opacity:p})})]}}const Ke=()=>new je,Ge={static:Ze,fade:Ke},Je={spring:{stiffness:300,damping:30}},Qe=700,tn="data-hero-aspect-ratio";function en(e){if(!e)return null;if(e.includes("/")){const[n,s]=e.split("/"),o=parseFloat(n??""),i=parseFloat(s??"");return!Number.isFinite(o)||!Number.isFinite(i)||i===0?null:o/i}const t=parseFloat(e);return Number.isFinite(t)&&t>0?t:null}function V(e,t){const n=Y(e,t),s=en(t.getAttribute(tn));if(s===null)return{visible:n,bbox:n,letterbox:{top:0,right:0,bottom:0,left:0}};const o=n.width/n.height;let i,r;o>s?(r=n.height,i=r*s):(i=n.width,r=i/s);const c=(n.width-i)/2,l=(n.height-r)/2;return{visible:{left:n.left+c,top:n.top+l,width:i,height:r},bbox:n,letterbox:{top:l,right:c,bottom:l,left:c}}}function z(e,t){const n=new Map,s=e.querySelectorAll(`[${t}]`);for(const o of Array.from(s)){const i=o.getAttribute(t);i&&(n.has(i)||n.set(i,o))}return n}function nn(e,t){const n=[],s=z(t,$t),o=z(e,Et);for(const[c,l]of s){const a=o.get(c);a&&n.push({key:c,fromEl:a,toEl:l})}const i=z(e,$t),r=z(t,Et);for(const[c,l]of i){const a=r.get(c);a&&n.push({key:c,fromEl:l,toEl:a})}return n}function sn(e,t){const n=[],s=Array.from(t.querySelectorAll(`[${st}]`));for(const o of s){const i=o.getAttribute(st);if(!i)continue;const r=e.querySelector(`[${st}="${i}"]`);r&&n.push({key:i,fromEl:r,toEl:o})}return n}function on(e,t){const n=nn(e,t);return n.length>0?n:sn(e,t)}let rn=class{contribute(t){const{from:n,to:s,resolved:o,physics:i,scrollOffset:r,maxDistance:c,onComplete:l}=t,a=[];for(const{fromEl:p,toEl:f}of o.pairs){const m=V(n,p),u=V(s,f),d=m.visible,y=u.visible,g=u.bbox,S=u.letterbox,w=Math.max(d.width/y.width,d.height/y.height),E=d.left+d.width/2,C=d.top+d.height/2,O=g.left+g.width/2,v=g.top+g.height/2,D=E-O-r.x,_=C-v-r.y;if(Math.abs(_)>c)continue;const M=d.width/w,H=d.height/w,x=Math.max(0,(y.width-M)/2),L=Math.max(0,(y.height-H)/2),W=f.style.transform,B=f.style.position,R=f.style.transformOrigin,q=f.style.clipPath,A=f.style.zIndex,Z=f.style.willChange;f.style.position="relative",f.style.transformOrigin="center center",f.style.zIndex="1000",f.style.willChange="transform, clip-path",l(()=>{f.style.transform=W,f.style.position=B,f.style.transformOrigin=R,f.style.clipPath=q,f.style.zIndex=A,f.style.willChange=Z}),a.push(new h.WebAnimation({element:f,integrator:b.from(i),style:(j,P)=>{const K=P*D,G=P*_,J=j+P*w,Q=S.top+P*L,Dt=S.right+P*x,Lt=S.bottom+P*L,Ft=S.left+P*x;return{transform:`translate(${K}px, ${G}px) scale(${J})`,clipPath:`inset(${Q}px ${Dt}px ${Lt}px ${Ft}px)`}}}))}return a}};class an{contribute(t){const{resolved:n,physics:s,positionedParent:o,maxDistance:i,onComplete:r}=t,c=[];for(const{fromEl:l,toEl:a}of n.pairs){const p=V(o,l),f=V(o,a),m=p.visible,u=f.visible,d=f.bbox,y=f.letterbox;if(m.width===0||m.height===0||u.width===0||u.height===0)continue;const g=Math.max(m.width/u.width,m.height/u.height),S=m.left+m.width/2,w=m.top+m.height/2,E=d.left+d.width/2,C=d.top+d.height/2,O=S-E,v=w-C;if(Math.abs(v)>i)continue;const D=m.width/g,_=m.height/g,M=Math.max(0,(u.width-D)/2),H=Math.max(0,(u.height-_)/2),x=a.cloneNode(!0);x.style.position="absolute",x.style.left=`${d.left}px`,x.style.top=`${d.top}px`,x.style.width=`${d.width}px`,x.style.height=`${d.height}px`,x.style.margin="0",x.style.transformOrigin="center center",x.style.zIndex="1000",x.style.willChange="transform, clip-path",x.style.pointerEvents="none",x.style.maxWidth="none",x.style.maxHeight="none";const L=(q,A)=>{const Z=A*O,j=A*v,P=q+A*g,K=y.top+A*H,G=y.right+A*M,J=y.bottom+A*H,Q=y.left+A*M;return{transform:`translate(${Z}px, ${j}px) scale(${P})`,clipPath:`inset(${K}px ${G}px ${J}px ${Q}px)`}},W=L(0,1);x.style.transform=W.transform,x.style.clipPath=W.clipPath,o.appendChild(x);const B=l.style.opacity,R=a.style.opacity;l.style.opacity="0",a.style.opacity="0",r(()=>{l.style.opacity=B,a.style.opacity=R,x.parentElement&&x.parentElement.removeChild(x)}),c.push(new h.WebAnimation({element:x,integrator:b.from(s),style:L}))}return c}}const ln={static:()=>new rn,fade:()=>new an};function cn(e){return[ln[e.type](),Ge[e.type]()]}const pn=e=>{const t=cn(e),n=Je,s=Qe;return{prepare:o=>{var c;const i=Promise.all([o.from,o.to]).then(([l,a])=>({pairs:on(l,a)})),r={from:o.from,to:o.to,resolved:i};for(const l of t)(c=l.prepare)==null||c.call(l,r);return i.then(l=>({resolved:l}))},animation:({from:o,to:i,context:r,resolved:c})=>{if(c.pairs.length===0)return new h.MultiAnimation([],{mode:"parallel"});const l=[],a=d=>{l.push(d)},p={from:o,to:i,resolved:c,physics:n,scrollOffset:r.scrollOffset,positionedParent:r.positionedParent,maxDistance:s,onComplete:a},f=[];for(const d of t)d.contribute&&f.push(...d.contribute(p));if(f.length===0)return new h.MultiAnimation([],{mode:"parallel"});const m=new h.MultiAnimation(f,{mode:"parallel"}),u=m.onComplete;return m.onComplete=()=>{u==null||u();for(const d of l)try{d()}catch(y){console.error("[hero] cleanup error",y)}},m}}};function fn(e){const{paths:t}=e,n=e.type??"static";return e.variant,T(t,()=>pn({type:n}))}const dn={spring:{stiffness:50,damping:30}},mn={spring:{stiffness:80,damping:25}},hn=(e={})=>{const t=e.physics??dn,n=e.initialRotation??45,s=e.initialScale??.01,o=e.rotationTriggerPoint??.8;return{prepare:({from:i,to:r,context:c})=>(i.then(l=>{l.style.opacity="1"}),r.then(l=>{const a=k(c,"to"),p=Math.min(a.width,a.height)*.4;l.style.setProperty("--max-border-radius",`${p}px`),l.style.setProperty("--border-radius-scale","1"),l.style.willChange="transform",l.style.backfaceVisibility="hidden";const f=a.left+a.width/2,m=a.top+a.height/2;l.style.transformOrigin=`${f}px ${m}px`,l.style.position="fixed",l.style.top=`${a.top}px`,l.style.left=`${a.left}px`,l.style.width=`${a.width}px`,l.style.height=`${a.height}px`,l.style.zIndex="1000",l.style.overflow="hidden",l.style.transform=`rotate(${n}deg) scale(${s}) translateZ(0)`,l.style.borderRadius="calc(var(--max-border-radius) * var(--border-radius-scale))",l.style.opacity="1"}),{}),animation:({from:i,to:r})=>{const c=new h.WebAnimation({element:i,integrator:b.from(mn),style:(a,p)=>({opacity:p})}),l=new h.WebAnimation({element:r,integrator:b.from(t),style:a=>{let p;if(a<=.05)p=s;else if(a<=o){const d=(a-.05)/(o-.05),y=Math.pow(d,9);p=s+(.8-s)*y}else{const d=(a-o)/(1-o);p=.8+.2*(1-Math.pow(1-d,3))}const f=.7;let m;if(a<=f)m=n;else{const d=(a-f)/(1-f),y=1-Math.pow(1-d,2);m=n*(1-y)}let u;if(a<=f)u=1;else{const d=(a-f)/(1-f);u=1-Math.pow(d,.5)}return{transform:`rotate(${m.toFixed(2)}deg) scale(${p.toFixed(4)}) translateZ(0)`,"--border-radius-scale":u.toFixed(4)}},onComplete:()=>{r.style.willChange="",r.style.backfaceVisibility="",r.style.removeProperty("--max-border-radius"),r.style.removeProperty("--border-radius-scale"),r.style.transform="",r.style.transformOrigin="",r.style.position="",r.style.zIndex="",r.style.top="",r.style.left="",r.style.width="",r.style.height="",r.style.overflow="",r.style.borderRadius=""}});return new h.MultiAnimation([c,l],{mode:"parallel"})}}};function yn(e){const{paths:t}=e;return T(t,()=>hn())}const un={spring:{stiffness:100,damping:30}},gn=(e={})=>{const t=e.physics??un;return{prepare:({from:n,to:s})=>(n.then(o=>{o.style.transformOrigin="center center",o.style.willChange="transform, opacity"}),s.then(o=>{o.style.opacity="0",o.style.transform="rotate(-180deg)",o.style.transformOrigin="center center",o.style.willChange="transform, opacity"}),{}),animation:({from:n,to:s})=>{const o=new h.WebAnimation({element:n,integrator:b.from(t),style:r=>({transform:`rotate(${r*180}deg)`,opacity:r<.5?1:0})}),i=new h.WebAnimation({element:s,integrator:b.from(t),style:(r,c)=>({transform:`rotate(${-c*180}deg)`,opacity:r>.5?1:0}),onComplete:()=>{s.style.willChange="auto",s.style.transform="",s.style.transformOrigin="",s.style.opacity=""}});return new h.MultiAnimation([o,i],{mode:"parallel"})}}};function bn(e){const{paths:t}=e;return T(t,()=>gn())}const wn={spring:{stiffness:20,damping:8,doubleSpring:1,restDelta:.001,restSpeed:.001}},Ct=(e={})=>{const t=e.direction??"up",n=e.physics??wn,s=t==="up";return{prepare:({from:o,to:i})=>(o.then(r=>{r.style.zIndex=s?"-1":"1",r.style.willChange="transform",r.style.backfaceVisibility="hidden",r.style.contain="layout paint",r.style.pointerEvents="none"}),i.then(r=>{r.style.willChange="transform",r.style.backfaceVisibility="hidden",r.style.contain="layout paint"}),{}),animation:({from:o,to:i})=>{const r=o.offsetHeight,c=i.offsetHeight,l=window.innerHeight,a=Math.max(Math.min(r,c),l),p=new h.WebAnimation({element:o,integrator:b.from(n),style:m=>({transform:`translate3d(0, ${s?-a*m:a*m}px, 0)`})}),f=new h.WebAnimation({element:i,integrator:b.from(n),style:(m,u)=>({transform:`translate3d(0, ${s?u*a:u*-a}px, 0)`}),onComplete:()=>{i.style.willChange="auto",i.style.backfaceVisibility="",i.style.contain="",i.style.transform=""}});return new h.MultiAnimation([p,f],{mode:"parallel"})}}};function Sn(e){const{paths:t,type:n="directional"}=e;return n==="non-directional"?T(t,()=>Ct({direction:"up"})):lt(t,{forward:"up",backward:"down"},s=>Ct({direction:s}))}const xn={spring:{stiffness:200,damping:24}},$n={inertia:{acceleration:25,resistance:1.2}},ot=.2;function En(){return{enterPhysics:xn,exitPhysics:$n,background:{willChange:"transform, opacity",enterStyle:(e,t)=>({transform:`scale(${1-ot*e})`,opacity:t}),exitStyle:e=>({transform:`scale(${1-ot+ot*e})`,opacity:e})}}}const Cn={spring:{stiffness:300,damping:30}},An={inertia:{acceleration:70,resistance:1.2}};function Pn(){return{enterPhysics:Cn,exitPhysics:An,background:{willChange:"",enterStyle:()=>({}),exitStyle:()=>({})}}}const Tn={static:Pn(),"background-scale":En()},vn="static",_n="transform",In=(e={})=>{const t=e.direction??"enter",n=Tn[e.type??vn],s=t==="enter"?n.enterPhysics:n.exitPhysics,o=n.background,i=o.willChange!=="";return{prepare:({from:r,to:c})=>{const l=t==="enter"?c:r,a=t==="enter"?r:c;return l.then(p=>{p.style.willChange=_n,p.style.backfaceVisibility="hidden",p.style.contain="layout paint",t==="exit"&&(p.style.pointerEvents="none",p.style.zIndex="100")}),a.then(p=>{i&&(p.style.willChange=o.willChange,p.style.backfaceVisibility="hidden",p.style.contain="layout paint"),t==="enter"&&(p.style.pointerEvents="none",p.style.zIndex="-1")}),{}},animation:({from:r,to:c,context:l})=>{const a=t==="enter"?c:r,p=t==="enter"?r:c,f=k(l,t==="enter"?"to":"from");a.style.clipPath=`inset(${f.top}px 0 calc(100% - ${f.top+f.height}px) 0)`;const m=t==="enter"?(E,C)=>({transform:`translate3d(0, ${C*f.height}px, 0)`}):E=>({transform:`translate3d(0, ${E*f.height}px, 0)`}),u=new h.WebAnimation({element:a,integrator:b.from(s),style:m,onComplete:()=>{a.style.willChange="auto",a.style.backfaceVisibility="",a.style.contain="",a.style.clipPath="",a.style.transform=""}});if(!i)return new h.MultiAnimation([u],{mode:"parallel"});const d=k(l,t==="enter"?"from":"to"),y=d.left+d.width/2,g=d.top+d.height/2;p.style.clipPath=`inset(${d.top}px 0 calc(100% - ${d.top+d.height}px) 0)`,p.style.transformOrigin=`${y}px ${g}px`;const S=t==="enter"?(E,C)=>o.enterStyle(E,C):E=>o.exitStyle(E),w=new h.WebAnimation({element:p,integrator:b.from(s),style:S,onComplete:t==="exit"?()=>{p.style.willChange="auto",p.style.backfaceVisibility="",p.style.contain="",p.style.clipPath="",p.style.transformOrigin=""}:void 0});return new h.MultiAnimation([u,w],{mode:"parallel"})}}};function On(e){return e==="scale"||e==="background-scale"?"background-scale":"static"}function Dn(e){const{enter:t,exit:n}=e,s=e.type,o=On(s);return _t({enter:t,exit:n},i=>In({direction:i,type:o}))}const Ln={spring:{stiffness:170,damping:22,doubleSpring:.8}},Fn=(e={})=>{const t=e.direction??"left",n=e.physics??Ln,s=t==="left";return{prepare:({from:o,to:i})=>(o.then(r=>{r.style.willChange="transform",r.style.backfaceVisibility="hidden",r.style.contain="layout paint",r.style.pointerEvents="none"}),i.then(r=>{const c=s?100:-100;r.style.transform=`translate3d(${c}%, 0, 0)`,r.style.willChange="transform",r.style.backfaceVisibility="hidden",r.style.contain="layout paint"}),{}),animation:({from:o,to:i})=>{const r=new h.WebAnimation({element:o,integrator:b.from(n),style:l=>({transform:`translate3d(${s?-100*l:100*l}%, 0, 0)`})}),c=new h.WebAnimation({element:i,integrator:b.from(n),style:(l,a)=>({transform:`translate3d(${s?a*100:a*-100}%, 0, 0)`}),onComplete:()=>{i.style.willChange="auto",i.style.backfaceVisibility="",i.style.contain="",i.style.transform=""}});return new h.MultiAnimation([r,c],{mode:"parallel"})}}};function Yn(e){const{paths:t}=e;return lt(t,{forward:"left",backward:"right"},n=>Fn({direction:n}))}const kn={spring:{stiffness:17,damping:6}},it=20,X=800,Mn=(e={})=>{const t=e.physics??kn;return{prepare:({from:n,to:s})=>(n.then(o=>{o.style.willChange="transform",o.style.backfaceVisibility="hidden",o.style.contain="layout paint",o.style.pointerEvents="none",o.style.transform=`perspective(${X}px) rotateY(0deg) translate3d(0%, 0, 0)`}),s.then(o=>{o.style.willChange="transform",o.style.backfaceVisibility="hidden",o.style.contain="layout paint",o.style.transform=`perspective(${X}px) rotateY(${it}deg) translate3d(-100%, 0, 0)`}),{}),animation:({from:n,to:s})=>{const o=new h.WebAnimation({element:n,integrator:b.from(t),style:r=>{const c=-r*it,l=r*100;return{transform:`perspective(${X}px) rotateY(${c}deg) translate3d(${l}%, 0, 0)`}}}),i=new h.WebAnimation({element:s,integrator:b.from(t),style:(r,c)=>{const l=c*it,a=-c*100;return{transform:`perspective(${X}px) rotateY(${l}deg) translate3d(${a}%, 0, 0)`}},onComplete:()=>{s.style.transform="",s.style.willChange="auto",s.style.backfaceVisibility="",s.style.contain=""}});return new h.MultiAnimation([o,i],{mode:"sequence"})}}};function Hn(e){const{paths:t}=e;return T(t,()=>Mn())}function Wn({enterRect:e,exitRect:t,pageRect:n,scrollOffset:s,enterRadius:o,exitRadius:i}){const r=t.left-e.left+(t.width-e.width)/2-s.x,c=t.top-e.top+(t.height-e.height)/2-s.y,l=t.width/e.width,a=t.height/e.height,p=e.top/n.height*100,f=(n.width-(e.left+e.width))/n.width*100,m=(n.height-(e.top+e.height))/n.height*100,u=e.left/n.width*100;return{transformOrigin:`${e.left+e.width/2}px ${e.top+e.height/2}px`,animate:d=>{const y=1-d,g=1+(l-1)*y,S=1+(a-1)*y,E=(i*y+o*(1-y))/((g+S)/2);return{clipPath:`inset(${p*y}% ${f*y}% ${m*y}% ${u*y}% round ${E}px)`,transform:`translate(${r*y}px, ${c*y}px) scale(${g}, ${S})`}}}}function Un({enterRect:e,exitRect:t,pageRect:n,scrollOffset:s,enterRadius:o,exitRadius:i}){const r=t.left-e.left+(t.width-e.width)/2+s.x,c=t.top-e.top+(t.height-e.height)/2+s.y,l=t.width/e.width,a=t.height/e.height,p=e.top/n.height*100,f=(n.width-(e.left+e.width))/n.width*100,m=(n.height-(e.top+e.height))/n.height*100,u=e.left/n.width*100;return{transformOrigin:`${e.left+e.width/2}px ${e.top+e.height/2}px`,animate:d=>{const y=1-d,g=1+(l-1)*y,S=1+(a-1)*y,E=(o*(1-y)+i*y)/((g+S)/2);return{clipPath:`inset(${p*y}% ${f*y}% ${m*y}% ${u*y}% round ${E}px)`,transform:`translate(${r*y-s.x}px, ${c*y}px) scale(${g}, ${S})`}}}}const zn={spring:{stiffness:200,damping:24}},It=.12,Xn=18;function Nn(){return{transformOrigin:"50% 50%",animate:e=>{const t=1-e;return{transform:`scale(${1-It*t})`}}}}function Vn(){return{transformOrigin:"50% 50%",animate:e=>{const t=1-e;return{transform:`scale(${1-It*t})`}}}}const rt={willChange:"backdrop-filter",initialStyle:{position:"absolute",inset:"0",pointerEvents:"none",zIndex:"1",backdropFilter:"blur(0px)",WebkitBackdropFilter:"blur(0px)"},style:(e,t)=>{const n=e==="enter"?t:1-t,s=`blur(${Xn*n}px)`;return{backdropFilter:s,WebkitBackdropFilter:s}}};class Bn{constructor(){$(this,"physics",zn)}contribute(t){const{from:n,to:s,resolved:o,physics:i}=t,r=o.mode==="enter",c=r?n:s,l=r?Nn():Vn();return l&&(c.style.transformOrigin=l.transformOrigin),[new h.WebAnimation({element:c,integrator:b.from(i),style:r?(a,p)=>l.animate(p):a=>l.animate(a)})]}}class Rn{prepare(t){const n=t.createElement("zoom-overlay");return Object.assign(n.style,rt.initialStyle),n.style.willChange=rt.willChange,t.context.positionedParent.appendChild(n),{overlay:n}}contribute(t){const n=t.extras.overlay;return n?[new h.WebAnimation({element:n,integrator:b.from(t.physics),style:s=>rt.style(t.resolved.mode,s)})]:[]}}const qn={spring:{stiffness:340,damping:30,doubleSpring:1}};function Zn({enterRect:e,exitRect:t,scrollOffset:n}){const s=e.left-t.left+(e.width-t.width)/2+n.x,o=e.top-t.top+(e.height-t.height)/2+n.y,i=e.width/t.width,r=e.height/t.height,c=Math.max(i,r);return{transformOrigin:`${t.left+t.width/2}px ${t.top+t.height/2}px`,animate:l=>{const a=1-l;return{transform:`translate(${s*a-n.x}px, ${o*a}px) scale(${1+(c-1)*a})`,opacity:`${1-a}`}}}}function jn({enterRect:e,exitRect:t,scrollOffset:n}){const s=e.left-t.left+(e.width-t.width)/2-n.x,o=e.top-t.top+(e.height-t.height)/2-n.y,i=e.width/t.width,r=e.height/t.height,c=Math.max(i,r);return{transformOrigin:`${t.left+t.width/2}px ${t.top+t.height/2}px`,animate:l=>{const a=1-l;return{transform:`translate(${s*a}px, ${o*a}px) scale(${1+(c-1)*a})`,opacity:`${l}`}}}}class Kn{constructor(){$(this,"physics",qn)}contribute(t){const{from:n,to:s,resolved:o,input:i,physics:r}=t,c=o.mode==="enter",l=c?n:s,a=c?Zn(i):jn(i);return a&&(l.style.transformOrigin=a.transformOrigin),[new h.WebAnimation({element:l,integrator:b.from(r),style:c?(p,f)=>a.animate(f):p=>a.animate(p)})]}}const Gn={spring:{stiffness:420,damping:34}};class Jn{constructor(){$(this,"physics",Gn)}contribute(t){return[]}}const Qn={expand:()=>new Kn,static:()=>new Jn,blur:()=>new Bn};function ts(e){return Qn[e]()}const at="data-zoom-enter-key",At="data-zoom-exit-key",es="data-zoom-radius";function Pt(e){const t=e.getAttribute(es);if(!t)return 0;const n=parseFloat(t);return Number.isFinite(n)&&n>0?n:0}function ns(e,t){const n=[];let s=t;for(;s&&s!==e;){const o=s.parentElement;if(!o)break;for(const i of Array.from(o.children))i!==s&&i instanceof HTMLElement&&n.push(i);s=o}return n}function Tt(e){const t=e.querySelectorAll(`[${at}]`);return t.length!==1?null:t[0]}function vt(e,t){const n=e.querySelectorAll(`[${At}]`);for(const s of n)if(s.getAttribute(At)===t)return s;return null}function ss(e,t){const n=Tt(e),s=Tt(t);if(!n&&s){const o=s.getAttribute(at);if(!o)return null;const i=vt(e,o);return i?{mode:"enter",enterEl:s,exitEl:i}:null}if(n&&!s){const o=n.getAttribute(at);if(!o)return null;const i=vt(t,o);return i?{mode:"exit",enterEl:n,exitEl:i}:null}return null}function os(e,t,n,s){return{enterRect:Y(e.mode==="enter"?n:t,e.enterEl),exitRect:Y(e.mode==="enter"?t:n,e.exitEl),pageRect:e.mode==="enter"?n.getBoundingClientRect():t.getBoundingClientRect(),scrollOffset:s,enterRadius:Pt(e.enterEl),exitRadius:Pt(e.exitEl)}}class is{prepare(t){t.from.then(n=>{n.style.willChange="transform, clip-path, opacity",n.style.backfaceVisibility="hidden",n.style.contain="layout paint"})}contribute(t){const{from:n,to:s,resolved:o,input:i,physics:r,onComplete:c}=t,l=o.mode==="enter",a=l?Wn(i):Un(i),p=l?s:n,f=l?"t":"u";a&&(p.style.transformOrigin=a.transformOrigin);const m=p.style.zIndex;return p.style.zIndex="2",c(()=>{p.style.willChange="auto",p.style.backfaceVisibility="",p.style.transformOrigin="",p.style.contain="",p.style.zIndex=m}),[new h.WebAnimation({element:p,integrator:b.from(r),style:f==="t"?u=>a.animate(u):(u,d)=>a.animate(d)})]}}class rs{contribute(t){const{resolved:n,physics:s,from:o,to:i,onComplete:r}=t,c=n.mode==="enter"?i:o,l=ns(c,n.enterEl);if(l.length===0)return[];const a=l.map(p=>p.style.opacity);if(n.mode==="enter")for(const p of l)p.style.opacity="0";return r(()=>{for(let p=0;p<l.length;p++){const f=l[p];f&&(f.style.opacity=a[p]??"")}}),l.map(p=>new h.WebAnimation({element:p,integrator:b.from(s),style:(f,m)=>({opacity:n.mode==="enter"?f:m})}))}}class Ot{contribute(){return[]}}const as={default:()=>new Ot,fade:()=>new rs};function ls(e){return as[e]()}class cs extends Ot{}function ps(e){const t=ts(e.type);return{strategies:[new is,t,ls(e.variant),new cs,...e.type==="blur"?[new Rn]:[]],physics:t.physics}}const fs=e=>{const{strategies:t,physics:n}=ps(e);return{prepare:s=>{const o={from:s.from,to:s.to,context:{positionedParent:s.context.positionedParent},createElement:s.createElement},i={};for(const r of t){if(!r.prepare)continue;const c=r.prepare(o);c&&Object.assign(i,c)}return i},animation:({from:s,to:o,context:i,...r})=>{const c=ss(s,o);if(!c)return new h.MultiAnimation([],{mode:"parallel"});const l=os(c,s,o,i.scrollOffset),a=[],f={from:s,to:o,resolved:c,input:l,physics:n,extras:r,onComplete:d=>{a.push(d)}},m=[];for(const d of t)d.contribute&&m.push(...d.contribute(f));const u=m[0];if(u){const d=u.onComplete;u.onComplete=()=>{d==null||d();for(const y of a)try{y()}catch(g){console.error("[zoom] cleanup error",g)}}}return new h.MultiAnimation(m,{mode:"parallel"})}}};function ds(e){const t=e.type??"static",n=e.variant??(e.fade?"fade":"default");return{type:t,variant:n}}function ms(e){const t=ds(e);return T(e.paths,()=>fs(t))}exports.Animation=h.Animation;exports.MultiAnimation=h.MultiAnimation;exports.WebAnimation=h.WebAnimation;exports.axis=ue;exports.blind=$e;exports.drill=Le;exports.fade=Me;exports.film=Re;exports.hero=fn;exports.jaemin=yn;exports.rotate=bn;exports.scroll=Sn;exports.sheet=Dn;exports.slide=Yn;exports.strip=Hn;exports.zoom=ms;
|
|
35
|
+
)`}function nt(e,t,n,s,o){const i=n/1e3;return new h.WebAnimation({element:e,integrator:new Xt({durationSec:i}),lowerBound:0,upperBound:1,style:r=>s(Xe(t,r)),onComplete:o})}const Be=(e={})=>{var o;const t=((o=e.border)==null?void 0:o.color)??We,n=He,s=e.physics;return{prepare:({from:i,to:r,context:c})=>{const l=k(c,"from"),a=k(c,"to"),p=Y(document.body,c.positionedParent),f=Ve(t,{...l,top:p.top});for(const m of["topLeft","topRight","bottomLeft","bottomRight"])c.positionedParent.appendChild(f[m]);return i.then(m=>{St(m,l),xt(m,l),m.style.transform=`translateY(${-l.top}px)`}),r.then(m=>{St(m,a),xt(m,a),m.style.transform=`translateY(${-a.top+a.height}px) scale(${n})`}),{borders:f,fromRect:l,toRect:a}},animation:({from:i,to:r,context:c,borders:l,fromRect:a,toRect:p})=>{const f=wt({rect:a,scale:n,direction:"out",override:s}),m=wt({rect:p,scale:n,direction:"in",override:s}),u=nt(i,f.snapshots,f.totalDuration,w=>({transform:`translateY(${w.translateY}px) scale(${w.scale})`}),()=>{i.style.clipPath="",i.style.transformOrigin=""}),d=nt(r,m.snapshots,m.totalDuration,w=>({transform:`translateY(${w.translateY}px) scale(${w.scale})`}),()=>{r.style.clipPath="",r.style.transformOrigin="",r.style.transform=""}),y=Ne.map(([w,E],C)=>{const O=["topLeft","topRight","bottomLeft","bottomRight"][C];return nt(l[O],f.snapshots,f.totalDuration,v=>{const D=(a.width-a.width*v.scale)/2*.7*w,_=(a.height-a.height*v.scale)/2*.7*E;return{transform:`translate(${D}px, ${_}px)`}})}),g=new h.MultiAnimation([u,d,...y],{mode:"parallel"}),S=g.onComplete;return g.onComplete=()=>{S==null||S();const w=c.positionedParent;for(const E of["topLeft","topRight","bottomLeft","bottomRight"]){const C=l[E];C.parentElement===w&&w.removeChild(C)}},g}}};function Re(e){const{paths:t,options:n}=e,s=(n==null?void 0:n.borderColor)!==void 0?{border:{color:n.borderColor}}:void 0;return T(t,()=>Be(s))}const $t="data-hero-enter-key",Et="data-hero-exit-key",st="data-hero-key";class qe{prepare(t){t.from.then(n=>{n.style.opacity="0"})}}const Ze=()=>new qe;class je{contribute(t){const{from:n,to:s,physics:o,onComplete:i}=t,r=n.style.opacity,c=s.style.opacity,l=n.style.willChange,a=s.style.willChange;return s.style.opacity="0",n.style.willChange="opacity",s.style.willChange="opacity",i(()=>{n.style.opacity=r,s.style.opacity=c,n.style.willChange=l,s.style.willChange=a}),[new h.WebAnimation({element:n,integrator:b.from(o),style:(p,f)=>({opacity:f})}),new h.WebAnimation({element:s,integrator:b.from(o),style:p=>({opacity:p})})]}}const Ke=()=>new je,Ge={static:Ze,fade:Ke},Je={spring:{stiffness:300,damping:30}},Qe=700,tn="data-hero-aspect-ratio";function en(e){if(!e)return null;if(e.includes("/")){const[n,s]=e.split("/"),o=parseFloat(n??""),i=parseFloat(s??"");return!Number.isFinite(o)||!Number.isFinite(i)||i===0?null:o/i}const t=parseFloat(e);return Number.isFinite(t)&&t>0?t:null}function V(e,t){const n=Y(e,t),s=en(t.getAttribute(tn));if(s===null)return{visible:n,bbox:n,letterbox:{top:0,right:0,bottom:0,left:0}};const o=n.width/n.height;let i,r;o>s?(r=n.height,i=r*s):(i=n.width,r=i/s);const c=(n.width-i)/2,l=(n.height-r)/2;return{visible:{left:n.left+c,top:n.top+l,width:i,height:r},bbox:n,letterbox:{top:l,right:c,bottom:l,left:c}}}function z(e,t){const n=new Map,s=e.querySelectorAll(`[${t}]`);for(const o of Array.from(s)){const i=o.getAttribute(t);i&&(n.has(i)||n.set(i,o))}return n}function nn(e,t){const n=[],s=z(t,$t),o=z(e,Et);for(const[c,l]of s){const a=o.get(c);a&&n.push({key:c,fromEl:a,toEl:l})}const i=z(e,$t),r=z(t,Et);for(const[c,l]of i){const a=r.get(c);a&&n.push({key:c,fromEl:l,toEl:a})}return n}function sn(e,t){const n=[],s=Array.from(t.querySelectorAll(`[${st}]`));for(const o of s){const i=o.getAttribute(st);if(!i)continue;const r=e.querySelector(`[${st}="${i}"]`);r&&n.push({key:i,fromEl:r,toEl:o})}return n}function on(e,t){const n=nn(e,t);return n.length>0?n:sn(e,t)}let rn=class{contribute(t){const{from:n,to:s,resolved:o,physics:i,scrollOffset:r,maxDistance:c,onComplete:l}=t,a=[];for(const{fromEl:p,toEl:f}of o.pairs){const m=V(n,p),u=V(s,f),d=m.visible,y=u.visible,g=u.bbox,S=u.letterbox,w=Math.max(d.width/y.width,d.height/y.height),E=d.left+d.width/2,C=d.top+d.height/2,O=g.left+g.width/2,v=g.top+g.height/2,D=E-O-r.x,_=C-v-r.y;if(Math.abs(_)>c)continue;const M=d.width/w,H=d.height/w,x=Math.max(0,(y.width-M)/2),L=Math.max(0,(y.height-H)/2),W=f.style.transform,B=f.style.position,R=f.style.transformOrigin,q=f.style.clipPath,A=f.style.zIndex,Z=f.style.willChange;f.style.position="relative",f.style.transformOrigin="center center",f.style.zIndex="1000",f.style.willChange="transform, clip-path",l(()=>{f.style.transform=W,f.style.position=B,f.style.transformOrigin=R,f.style.clipPath=q,f.style.zIndex=A,f.style.willChange=Z}),a.push(new h.WebAnimation({element:f,integrator:b.from(i),style:(j,P)=>{const K=P*D,G=P*_,J=j+P*w,Q=S.top+P*L,Dt=S.right+P*x,Lt=S.bottom+P*L,Ft=S.left+P*x;return{transform:`translate(${K}px, ${G}px) scale(${J})`,clipPath:`inset(${Q}px ${Dt}px ${Lt}px ${Ft}px)`}}}))}return a}};class an{contribute(t){const{resolved:n,physics:s,positionedParent:o,maxDistance:i,onComplete:r}=t,c=[];for(const{fromEl:l,toEl:a}of n.pairs){const p=V(o,l),f=V(o,a),m=p.visible,u=f.visible,d=f.bbox,y=f.letterbox;if(m.width===0||m.height===0||u.width===0||u.height===0)continue;const g=Math.max(m.width/u.width,m.height/u.height),S=m.left+m.width/2,w=m.top+m.height/2,E=d.left+d.width/2,C=d.top+d.height/2,O=S-E,v=w-C;if(Math.abs(v)>i)continue;const D=m.width/g,_=m.height/g,M=Math.max(0,(u.width-D)/2),H=Math.max(0,(u.height-_)/2),x=a.cloneNode(!0);x.style.position="absolute",x.style.left=`${d.left}px`,x.style.top=`${d.top}px`,x.style.width=`${d.width}px`,x.style.height=`${d.height}px`,x.style.margin="0",x.style.transformOrigin="center center",x.style.zIndex="1000",x.style.willChange="transform, clip-path",x.style.pointerEvents="none",x.style.maxWidth="none",x.style.maxHeight="none";const L=(q,A)=>{const Z=A*O,j=A*v,P=q+A*g,K=y.top+A*H,G=y.right+A*M,J=y.bottom+A*H,Q=y.left+A*M;return{transform:`translate(${Z}px, ${j}px) scale(${P})`,clipPath:`inset(${K}px ${G}px ${J}px ${Q}px)`}},W=L(0,1);x.style.transform=W.transform,x.style.clipPath=W.clipPath,o.appendChild(x);const B=l.style.opacity,R=a.style.opacity;l.style.opacity="0",a.style.opacity="0",r(()=>{l.style.opacity=B,a.style.opacity=R,x.parentElement&&x.parentElement.removeChild(x)}),c.push(new h.WebAnimation({element:x,integrator:b.from(s),style:L}))}return c}}const ln={static:()=>new rn,fade:()=>new an};function cn(e){return[ln[e.type](),Ge[e.type]()]}const pn=e=>{const t=cn(e),n=Je,s=Qe;return{prepare:o=>{var c;const i=Promise.all([o.from,o.to]).then(([l,a])=>({pairs:on(l,a)})),r={from:o.from,to:o.to,resolved:i};for(const l of t)(c=l.prepare)==null||c.call(l,r);return i.then(l=>({resolved:l}))},animation:({from:o,to:i,context:r,resolved:c})=>{if(c.pairs.length===0)return new h.MultiAnimation([],{mode:"parallel"});const l=[],a=d=>{l.push(d)},p={from:o,to:i,resolved:c,physics:n,scrollOffset:r.scrollOffset,positionedParent:r.positionedParent,maxDistance:s,onComplete:a},f=[];for(const d of t)d.contribute&&f.push(...d.contribute(p));if(f.length===0)return new h.MultiAnimation([],{mode:"parallel"});const m=new h.MultiAnimation(f,{mode:"parallel"}),u=m.onComplete;return m.onComplete=()=>{u==null||u();for(const d of l)try{d()}catch(y){console.error("[hero] cleanup error",y)}},m}}};function fn(e){const{paths:t}=e,n=e.type??"static";return e.variant,T(t,()=>pn({type:n}))}const dn={spring:{stiffness:50,damping:30}},mn={spring:{stiffness:80,damping:25}},hn=(e={})=>{const t=e.physics??dn,n=e.initialRotation??45,s=e.initialScale??.01,o=e.rotationTriggerPoint??.8;return{prepare:({from:i,to:r,context:c})=>(i.then(l=>{l.style.opacity="1"}),r.then(l=>{const a=k(c,"to"),p=Math.min(a.width,a.height)*.4;l.style.setProperty("--max-border-radius",`${p}px`),l.style.setProperty("--border-radius-scale","1"),l.style.willChange="transform",l.style.backfaceVisibility="hidden";const f=a.left+a.width/2,m=a.top+a.height/2;l.style.transformOrigin=`${f}px ${m}px`,l.style.position="fixed",l.style.top=`${a.top}px`,l.style.left=`${a.left}px`,l.style.width=`${a.width}px`,l.style.height=`${a.height}px`,l.style.zIndex="1000",l.style.overflow="hidden",l.style.transform=`rotate(${n}deg) scale(${s}) translateZ(0)`,l.style.borderRadius="calc(var(--max-border-radius) * var(--border-radius-scale))",l.style.opacity="1"}),{}),animation:({from:i,to:r})=>{const c=new h.WebAnimation({element:i,integrator:b.from(mn),style:(a,p)=>({opacity:p})}),l=new h.WebAnimation({element:r,integrator:b.from(t),style:a=>{let p;if(a<=.05)p=s;else if(a<=o){const d=(a-.05)/(o-.05),y=Math.pow(d,9);p=s+(.8-s)*y}else{const d=(a-o)/(1-o);p=.8+.2*(1-Math.pow(1-d,3))}const f=.7;let m;if(a<=f)m=n;else{const d=(a-f)/(1-f),y=1-Math.pow(1-d,2);m=n*(1-y)}let u;if(a<=f)u=1;else{const d=(a-f)/(1-f);u=1-Math.pow(d,.5)}return{transform:`rotate(${m.toFixed(2)}deg) scale(${p.toFixed(4)}) translateZ(0)`,"--border-radius-scale":u.toFixed(4)}},onComplete:()=>{r.style.willChange="",r.style.backfaceVisibility="",r.style.removeProperty("--max-border-radius"),r.style.removeProperty("--border-radius-scale"),r.style.transform="",r.style.transformOrigin="",r.style.position="",r.style.zIndex="",r.style.top="",r.style.left="",r.style.width="",r.style.height="",r.style.overflow="",r.style.borderRadius=""}});return new h.MultiAnimation([c,l],{mode:"parallel"})}}};function yn(e){const{paths:t}=e;return T(t,()=>hn())}const un={spring:{stiffness:100,damping:30}},gn=(e={})=>{const t=e.physics??un;return{prepare:({from:n,to:s})=>(n.then(o=>{o.style.transformOrigin="center center",o.style.willChange="transform, opacity"}),s.then(o=>{o.style.opacity="0",o.style.transform="rotate(-180deg)",o.style.transformOrigin="center center",o.style.willChange="transform, opacity"}),{}),animation:({from:n,to:s})=>{const o=new h.WebAnimation({element:n,integrator:b.from(t),style:r=>({transform:`rotate(${r*180}deg)`,opacity:r<.5?1:0})}),i=new h.WebAnimation({element:s,integrator:b.from(t),style:(r,c)=>({transform:`rotate(${-c*180}deg)`,opacity:r>.5?1:0}),onComplete:()=>{s.style.willChange="auto",s.style.transform="",s.style.transformOrigin="",s.style.opacity=""}});return new h.MultiAnimation([o,i],{mode:"parallel"})}}};function bn(e){const{paths:t}=e;return T(t,()=>gn())}const wn={spring:{stiffness:20,damping:8,doubleSpring:1,restDelta:.001,restSpeed:.001}},Ct=(e={})=>{const t=e.direction??"up",n=e.physics??wn,s=t==="up";return{prepare:({from:o,to:i})=>(o.then(r=>{r.style.zIndex=s?"-1":"1",r.style.willChange="transform",r.style.backfaceVisibility="hidden",r.style.contain="layout paint",r.style.pointerEvents="none"}),i.then(r=>{r.style.willChange="transform",r.style.backfaceVisibility="hidden",r.style.contain="layout paint"}),{}),animation:({from:o,to:i})=>{const r=o.offsetHeight,c=i.offsetHeight,l=window.innerHeight,a=Math.max(Math.min(r,c),l),p=new h.WebAnimation({element:o,integrator:b.from(n),style:m=>({transform:`translate3d(0, ${s?-a*m:a*m}px, 0)`})}),f=new h.WebAnimation({element:i,integrator:b.from(n),style:(m,u)=>({transform:`translate3d(0, ${s?u*a:u*-a}px, 0)`}),onComplete:()=>{i.style.willChange="auto",i.style.backfaceVisibility="",i.style.contain="",i.style.transform=""}});return new h.MultiAnimation([p,f],{mode:"parallel"})}}};function Sn(e){const{paths:t,type:n="directional"}=e;return n==="non-directional"?T(t,()=>Ct({direction:"up"})):lt(t,{forward:"up",backward:"down"},s=>Ct({direction:s}))}const xn={spring:{stiffness:200,damping:24}},$n={inertia:{acceleration:25,resistance:1.2}},ot=.2;function En(){return{enterPhysics:xn,exitPhysics:$n,background:{willChange:"transform, opacity",enterStyle:(e,t)=>({transform:`scale(${1-ot*e})`,opacity:t}),exitStyle:e=>({transform:`scale(${1-ot+ot*e})`,opacity:e})}}}const Cn={spring:{stiffness:300,damping:30}},An={inertia:{acceleration:70,resistance:1.2}};function Pn(){return{enterPhysics:Cn,exitPhysics:An,background:{willChange:"",enterStyle:()=>({}),exitStyle:()=>({})}}}const Tn={static:Pn(),"background-scale":En()},vn="static",_n="transform",In=(e={})=>{const t=e.direction??"enter",n=Tn[e.type??vn],s=t==="enter"?n.enterPhysics:n.exitPhysics,o=n.background,i=o.willChange!=="";return{prepare:({from:r,to:c})=>{const l=t==="enter"?c:r,a=t==="enter"?r:c;return l.then(p=>{p.style.willChange=_n,p.style.backfaceVisibility="hidden",p.style.contain="layout paint",t==="exit"&&(p.style.pointerEvents="none",p.style.zIndex="100")}),a.then(p=>{i&&(p.style.willChange=o.willChange,p.style.backfaceVisibility="hidden",p.style.contain="layout paint"),t==="enter"&&(p.style.pointerEvents="none",p.style.zIndex="-1")}),{}},animation:({from:r,to:c,context:l})=>{const a=t==="enter"?c:r,p=t==="enter"?r:c,f=k(l,t==="enter"?"to":"from");a.style.clipPath=`inset(${f.top}px 0 calc(100% - ${f.top+f.height}px) 0)`;const m=t==="enter"?(E,C)=>({transform:`translate3d(0, ${C*f.height}px, 0)`}):E=>({transform:`translate3d(0, ${E*f.height}px, 0)`}),u=new h.WebAnimation({element:a,integrator:b.from(s),style:m,onComplete:()=>{a.style.willChange="auto",a.style.backfaceVisibility="",a.style.contain="",a.style.clipPath="",a.style.transform=""}});if(!i)return new h.MultiAnimation([u],{mode:"parallel"});const d=k(l,t==="enter"?"from":"to"),y=d.left+d.width/2,g=d.top+d.height/2;p.style.clipPath=`inset(${d.top}px 0 calc(100% - ${d.top+d.height}px) 0)`,p.style.transformOrigin=`${y}px ${g}px`;const S=t==="enter"?(E,C)=>o.enterStyle(E,C):E=>o.exitStyle(E),w=new h.WebAnimation({element:p,integrator:b.from(s),style:S,onComplete:t==="exit"?()=>{p.style.willChange="auto",p.style.backfaceVisibility="",p.style.contain="",p.style.clipPath="",p.style.transformOrigin=""}:void 0});return new h.MultiAnimation([u,w],{mode:"parallel"})}}};function On(e){return e==="scale"||e==="background-scale"?"background-scale":"static"}function Dn(e){const{enter:t,exit:n}=e,s=e.type,o=On(s);return _t({enter:t,exit:n},i=>In({direction:i,type:o}))}const Ln={spring:{stiffness:170,damping:22,doubleSpring:.8}},Fn=(e={})=>{const t=e.direction??"left",n=e.physics??Ln,s=t==="left";return{prepare:({from:o,to:i})=>(o.then(r=>{r.style.willChange="transform",r.style.backfaceVisibility="hidden",r.style.contain="layout paint",r.style.pointerEvents="none"}),i.then(r=>{const c=s?100:-100;r.style.transform=`translate3d(${c}%, 0, 0)`,r.style.willChange="transform",r.style.backfaceVisibility="hidden",r.style.contain="layout paint"}),{}),animation:({from:o,to:i})=>{const r=new h.WebAnimation({element:o,integrator:b.from(n),style:l=>({transform:`translate3d(${s?-100*l:100*l}%, 0, 0)`})}),c=new h.WebAnimation({element:i,integrator:b.from(n),style:(l,a)=>({transform:`translate3d(${s?a*100:a*-100}%, 0, 0)`}),onComplete:()=>{i.style.willChange="auto",i.style.backfaceVisibility="",i.style.contain="",i.style.transform=""}});return new h.MultiAnimation([r,c],{mode:"parallel"})}}};function Yn(e){const{paths:t}=e;return lt(t,{forward:"left",backward:"right"},n=>Fn({direction:n}))}const kn={spring:{stiffness:17,damping:6}},it=20,X=800,Mn=(e={})=>{const t=e.physics??kn;return{prepare:({from:n,to:s})=>(n.then(o=>{o.style.willChange="transform",o.style.backfaceVisibility="hidden",o.style.contain="layout paint",o.style.pointerEvents="none",o.style.transform=`perspective(${X}px) rotateY(0deg) translate3d(0%, 0, 0)`}),s.then(o=>{o.style.willChange="transform",o.style.backfaceVisibility="hidden",o.style.contain="layout paint",o.style.transform=`perspective(${X}px) rotateY(${it}deg) translate3d(-100%, 0, 0)`}),{}),animation:({from:n,to:s})=>{const o=new h.WebAnimation({element:n,integrator:b.from(t),style:r=>{const c=-r*it,l=r*100;return{transform:`perspective(${X}px) rotateY(${c}deg) translate3d(${l}%, 0, 0)`}}}),i=new h.WebAnimation({element:s,integrator:b.from(t),style:(r,c)=>{const l=c*it,a=-c*100;return{transform:`perspective(${X}px) rotateY(${l}deg) translate3d(${a}%, 0, 0)`}},onComplete:()=>{s.style.transform="",s.style.willChange="auto",s.style.backfaceVisibility="",s.style.contain=""}});return new h.MultiAnimation([o,i],{mode:"sequence"})}}};function Hn(e){const{paths:t}=e;return T(t,()=>Mn())}function Wn({enterRect:e,exitRect:t,pageRect:n,scrollOffset:s,enterRadius:o,exitRadius:i}){const r=t.left-e.left+(t.width-e.width)/2-s.x,c=t.top-e.top+(t.height-e.height)/2-s.y,l=t.width/e.width,a=t.height/e.height,p=e.top/n.height*100,f=(n.width-(e.left+e.width))/n.width*100,m=(n.height-(e.top+e.height))/n.height*100,u=e.left/n.width*100;return{transformOrigin:`${e.left+e.width/2}px ${e.top+e.height/2}px`,animate:d=>{const y=1-d,g=1+(l-1)*y,S=1+(a-1)*y,E=(i*y+o*(1-y))/((g+S)/2);return{clipPath:`inset(${p*y}% ${f*y}% ${m*y}% ${u*y}% round ${E}px)`,transform:`translate(${r*y}px, ${c*y}px) scale(${g}, ${S})`}}}}function Un({enterRect:e,exitRect:t,pageRect:n,scrollOffset:s,enterRadius:o,exitRadius:i}){const r=t.left-e.left+(t.width-e.width)/2+s.x,c=t.top-e.top+(t.height-e.height)/2+s.y,l=t.width/e.width,a=t.height/e.height,p=e.top/n.height*100,f=(n.width-(e.left+e.width))/n.width*100,m=(n.height-(e.top+e.height))/n.height*100,u=e.left/n.width*100;return{transformOrigin:`${e.left+e.width/2}px ${e.top+e.height/2}px`,animate:d=>{const y=1-d,g=1+(l-1)*y,S=1+(a-1)*y,E=(o*(1-y)+i*y)/((g+S)/2);return{clipPath:`inset(${p*y}% ${f*y}% ${m*y}% ${u*y}% round ${E}px)`,transform:`translate(${r*y-s.x}px, ${c*y}px) scale(${g}, ${S})`}}}}const zn={spring:{stiffness:430,damping:33,doubleSpring:1}},It=.12,Xn=18;function Nn(){return{transformOrigin:"50% 50%",animate:e=>{const t=1-e;return{transform:`scale(${1-It*t})`}}}}function Vn(){return{transformOrigin:"50% 50%",animate:e=>{const t=1-e;return{transform:`scale(${1-It*t})`}}}}const rt={willChange:"backdrop-filter",initialStyle:{position:"absolute",inset:"0",pointerEvents:"none",zIndex:"1",backdropFilter:"blur(0px)",WebkitBackdropFilter:"blur(0px)"},style:(e,t)=>{const n=e==="enter"?t:1-t,s=`blur(${Xn*n}px)`;return{backdropFilter:s,WebkitBackdropFilter:s}}};class Bn{constructor(){$(this,"physics",zn)}contribute(t){const{from:n,to:s,resolved:o,physics:i}=t,r=o.mode==="enter",c=r?n:s,l=r?Nn():Vn();return l&&(c.style.transformOrigin=l.transformOrigin),[new h.WebAnimation({element:c,integrator:b.from(i),style:r?(a,p)=>l.animate(p):a=>l.animate(a)})]}}class Rn{prepare(t){const n=t.createElement("zoom-overlay");return Object.assign(n.style,rt.initialStyle),n.style.willChange=rt.willChange,t.context.positionedParent.appendChild(n),{overlay:n}}contribute(t){const n=t.extras.overlay;return n?[new h.WebAnimation({element:n,integrator:b.from(t.physics),style:s=>rt.style(t.resolved.mode,s)})]:[]}}const qn={spring:{stiffness:340,damping:30,doubleSpring:1}};function Zn({enterRect:e,exitRect:t,scrollOffset:n}){const s=e.left-t.left+(e.width-t.width)/2+n.x,o=e.top-t.top+(e.height-t.height)/2+n.y,i=e.width/t.width,r=e.height/t.height,c=Math.max(i,r);return{transformOrigin:`${t.left+t.width/2}px ${t.top+t.height/2}px`,animate:l=>{const a=1-l;return{transform:`translate(${s*a-n.x}px, ${o*a}px) scale(${1+(c-1)*a})`,opacity:`${1-a}`}}}}function jn({enterRect:e,exitRect:t,scrollOffset:n}){const s=e.left-t.left+(e.width-t.width)/2-n.x,o=e.top-t.top+(e.height-t.height)/2-n.y,i=e.width/t.width,r=e.height/t.height,c=Math.max(i,r);return{transformOrigin:`${t.left+t.width/2}px ${t.top+t.height/2}px`,animate:l=>{const a=1-l;return{transform:`translate(${s*a}px, ${o*a}px) scale(${1+(c-1)*a})`,opacity:`${l}`}}}}class Kn{constructor(){$(this,"physics",qn)}contribute(t){const{from:n,to:s,resolved:o,input:i,physics:r}=t,c=o.mode==="enter",l=c?n:s,a=c?Zn(i):jn(i);return a&&(l.style.transformOrigin=a.transformOrigin),[new h.WebAnimation({element:l,integrator:b.from(r),style:c?(p,f)=>a.animate(f):p=>a.animate(p)})]}}const Gn={spring:{stiffness:530,damping:34,doubleSpring:1}};class Jn{constructor(){$(this,"physics",Gn)}contribute(t){return[]}}const Qn={expand:()=>new Kn,static:()=>new Jn,blur:()=>new Bn};function ts(e){return Qn[e]()}const at="data-zoom-enter-key",At="data-zoom-exit-key",es="data-zoom-radius";function Pt(e){const t=e.getAttribute(es);if(!t)return 0;const n=parseFloat(t);return Number.isFinite(n)&&n>0?n:0}function ns(e,t){const n=[];let s=t;for(;s&&s!==e;){const o=s.parentElement;if(!o)break;for(const i of Array.from(o.children))i!==s&&i instanceof HTMLElement&&n.push(i);s=o}return n}function Tt(e){const t=e.querySelectorAll(`[${at}]`);return t.length!==1?null:t[0]}function vt(e,t){const n=e.querySelectorAll(`[${At}]`);for(const s of n)if(s.getAttribute(At)===t)return s;return null}function ss(e,t){const n=Tt(e),s=Tt(t);if(!n&&s){const o=s.getAttribute(at);if(!o)return null;const i=vt(e,o);return i?{mode:"enter",enterEl:s,exitEl:i}:null}if(n&&!s){const o=n.getAttribute(at);if(!o)return null;const i=vt(t,o);return i?{mode:"exit",enterEl:n,exitEl:i}:null}return null}function os(e,t,n,s){return{enterRect:Y(e.mode==="enter"?n:t,e.enterEl),exitRect:Y(e.mode==="enter"?t:n,e.exitEl),pageRect:e.mode==="enter"?n.getBoundingClientRect():t.getBoundingClientRect(),scrollOffset:s,enterRadius:Pt(e.enterEl),exitRadius:Pt(e.exitEl)}}class is{prepare(t){t.from.then(n=>{n.style.willChange="transform, clip-path, opacity",n.style.backfaceVisibility="hidden",n.style.contain="layout paint"})}contribute(t){const{from:n,to:s,resolved:o,input:i,physics:r,onComplete:c}=t,l=o.mode==="enter",a=l?Wn(i):Un(i),p=l?s:n,f=l?"t":"u";a&&(p.style.transformOrigin=a.transformOrigin);const m=p.style.zIndex;return p.style.zIndex="2",c(()=>{p.style.willChange="auto",p.style.backfaceVisibility="",p.style.transformOrigin="",p.style.contain="",p.style.zIndex=m}),[new h.WebAnimation({element:p,integrator:b.from(r),style:f==="t"?u=>a.animate(u):(u,d)=>a.animate(d)})]}}class rs{contribute(t){const{resolved:n,physics:s,from:o,to:i,onComplete:r}=t,c=n.mode==="enter"?i:o,l=ns(c,n.enterEl);if(l.length===0)return[];const a=l.map(p=>p.style.opacity);if(n.mode==="enter")for(const p of l)p.style.opacity="0";return r(()=>{for(let p=0;p<l.length;p++){const f=l[p];f&&(f.style.opacity=a[p]??"")}}),l.map(p=>new h.WebAnimation({element:p,integrator:b.from(s),style:(f,m)=>({opacity:n.mode==="enter"?f:m})}))}}class Ot{contribute(){return[]}}const as={default:()=>new Ot,fade:()=>new rs};function ls(e){return as[e]()}class cs extends Ot{}function ps(e){const t=ts(e.type);return{strategies:[new is,t,ls(e.variant),new cs,...e.type==="blur"?[new Rn]:[]],physics:t.physics}}const fs=e=>{const{strategies:t,physics:n}=ps(e);return{prepare:s=>{const o={from:s.from,to:s.to,context:{positionedParent:s.context.positionedParent},createElement:s.createElement},i={};for(const r of t){if(!r.prepare)continue;const c=r.prepare(o);c&&Object.assign(i,c)}return i},animation:({from:s,to:o,context:i,...r})=>{const c=ss(s,o);if(!c)return new h.MultiAnimation([],{mode:"parallel"});const l=os(c,s,o,i.scrollOffset),a=[],f={from:s,to:o,resolved:c,input:l,physics:n,extras:r,onComplete:d=>{a.push(d)}},m=[];for(const d of t)d.contribute&&m.push(...d.contribute(f));const u=m[0];if(u){const d=u.onComplete;u.onComplete=()=>{d==null||d();for(const y of a)try{y()}catch(g){console.error("[zoom] cleanup error",g)}}}return new h.MultiAnimation(m,{mode:"parallel"})}}};function ds(e){const t=e.type??"static",n=e.variant??(e.fade?"fade":"default");return{type:t,variant:n}}function ms(e){const t=ds(e);return T(e.paths,()=>fs(t))}exports.Animation=h.Animation;exports.MultiAnimation=h.MultiAnimation;exports.WebAnimation=h.WebAnimation;exports.axis=ue;exports.blind=$e;exports.drill=Le;exports.fade=Me;exports.film=Re;exports.hero=fn;exports.jaemin=yn;exports.rotate=bn;exports.scroll=Sn;exports.sheet=Dn;exports.slide=Yn;exports.strip=Hn;exports.zoom=ms;
|
package/dist/index.js
CHANGED
|
@@ -1679,7 +1679,11 @@ function Dn({
|
|
|
1679
1679
|
};
|
|
1680
1680
|
}
|
|
1681
1681
|
const Fn = {
|
|
1682
|
-
spring: {
|
|
1682
|
+
spring: {
|
|
1683
|
+
stiffness: 430,
|
|
1684
|
+
damping: 33,
|
|
1685
|
+
doubleSpring: 1
|
|
1686
|
+
}
|
|
1683
1687
|
}, Ft = 0.12, Ln = 18;
|
|
1684
1688
|
function Yn() {
|
|
1685
1689
|
return {
|
|
@@ -1808,7 +1812,11 @@ class Nn {
|
|
|
1808
1812
|
}
|
|
1809
1813
|
}
|
|
1810
1814
|
const Vn = {
|
|
1811
|
-
spring: {
|
|
1815
|
+
spring: {
|
|
1816
|
+
stiffness: 530,
|
|
1817
|
+
damping: 34,
|
|
1818
|
+
doubleSpring: 1
|
|
1819
|
+
}
|
|
1812
1820
|
};
|
|
1813
1821
|
class Bn {
|
|
1814
1822
|
constructor() {
|
|
@@ -3,11 +3,8 @@ import { PresetConfig } from '../utils';
|
|
|
3
3
|
import { FadeOptions, FadeType, FadeVariant } from './types';
|
|
4
4
|
export type { FadeOptions, FadeType, FadeVariant } from './types';
|
|
5
5
|
/**
|
|
6
|
-
* Fade preset configuration.
|
|
7
|
-
*
|
|
8
|
-
* Default `type` is `"fade-through"` (sequential fade-out → fade-in).
|
|
9
|
-
* The `"cross-fade"` type and `"smooth"` variant are tracked on the TODO
|
|
10
|
-
* board and intentionally not part of the public type yet.
|
|
6
|
+
* Fade preset configuration. Default `type` is `"fade-through"` —
|
|
7
|
+
* sequential fade-out → fade-in.
|
|
11
8
|
*/
|
|
12
9
|
export type FadeConfig = PresetConfig<{
|
|
13
10
|
paths: readonly string[];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/transitions/fade/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,QAAQ,CAAC;AAClD,OAAO,EAAkC,KAAK,YAAY,EAAE,MAAM,UAAU,CAAC;AAE7E,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAElE,YAAY,EAAE,WAAW,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAElE
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/transitions/fade/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,QAAQ,CAAC;AAClD,OAAO,EAAkC,KAAK,YAAY,EAAE,MAAM,UAAU,CAAC;AAE7E,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAElE,YAAY,EAAE,WAAW,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAElE;;;GAGG;AACH,MAAM,MAAM,UAAU,GAAG,YAAY,CACnC;IAAE,KAAK,EAAE,SAAS,MAAM,EAAE,CAAA;CAAE,EAC5B,QAAQ,EACR,WAAW,EACX,WAAW,CACZ,CAAC;AAEF,wBAAgB,IAAI,CAAC,MAAM,EAAE,UAAU,GAAG,mBAAmB,EAAE,CAG9D"}
|
|
@@ -1,12 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Public option shapes for the fade preset.
|
|
3
|
-
*
|
|
4
|
-
* Default `type` is `"fade-through"` — the current sequential
|
|
5
|
-
* fade-out → fade-in behavior.
|
|
6
|
-
*
|
|
7
|
-
* Not yet exposed (tracked separately on the TODO board):
|
|
8
|
-
* - `type: "cross-fade"` (simultaneous fade)
|
|
9
|
-
* - `variant: "smooth"`
|
|
2
|
+
* Public option shapes for the fade preset. Default `type` is
|
|
3
|
+
* `"fade-through"` — the sequential fade-out → fade-in behavior.
|
|
10
4
|
*/
|
|
11
5
|
export type FadeType = "fade-through";
|
|
12
6
|
export type FadeVariant = "default";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/transitions/fade/types.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/lib/transitions/fade/types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,MAAM,QAAQ,GAAG,cAAc,CAAC;AAEtC,MAAM,MAAM,WAAW,GAAG,SAAS,CAAC;AAEpC,MAAM,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"blur.d.ts","sourceRoot":"","sources":["../../../../src/lib/transitions/zoom/provider/blur.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAC7C,OAAO,KAAK,EAEV,iBAAiB,EACjB,UAAU,EAEV,cAAc,EACd,YAAY,EACZ,YAAY,EACb,MAAM,UAAU,CAAC;AAClB,OAAO,
|
|
1
|
+
{"version":3,"file":"blur.d.ts","sourceRoot":"","sources":["../../../../src/lib/transitions/zoom/provider/blur.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAC7C,OAAO,KAAK,EAEV,iBAAiB,EACjB,UAAU,EAEV,cAAc,EACd,YAAY,EACZ,YAAY,EACb,MAAM,UAAU,CAAC;AAClB,OAAO,EACL,SAAS,EAGV,MAAM,oBAAoB,CAAC;AAG5B,eAAO,MAAM,YAAY,EAAE,cAM1B,CAAC;AAmEF,qBAAa,sBAAuB,YAAW,YAAY;IACzD,QAAQ,CAAC,OAAO,iBAAgB;IAEhC,UAAU,CAAC,GAAG,EAAE,iBAAiB,GAAG,SAAS,EAAE;CAkBhD;AAQD,qBAAa,eAAgB,YAAW,YAAY;IAClD,OAAO,CAAC,GAAG,EAAE,cAAc,GAAG,OAAO,CAAC,UAAU,CAAC;IAQjD,UAAU,CAAC,GAAG,EAAE,iBAAiB,GAAG,SAAS,EAAE;CAWhD;AAMD,wBAAgB,kBAAkB,IAAI,YAAY,CASjD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"static.d.ts","sourceRoot":"","sources":["../../../../src/lib/transitions/zoom/provider/static.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAC7C,OAAO,KAAK,EAEV,iBAAiB,EACjB,YAAY,EACZ,YAAY,EACb,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAG/C,eAAO,MAAM,cAAc,EAAE,
|
|
1
|
+
{"version":3,"file":"static.d.ts","sourceRoot":"","sources":["../../../../src/lib/transitions/zoom/provider/static.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAC7C,OAAO,KAAK,EAEV,iBAAiB,EACjB,YAAY,EACZ,YAAY,EACb,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAG/C,eAAO,MAAM,cAAc,EAAE,cAM5B,CAAC;AAgBF,qBAAa,wBAAyB,YAAW,YAAY;IAC3D,QAAQ,CAAC,OAAO,iBAAkB;IAElC,UAAU,CAAC,IAAI,EAAE,iBAAiB,GAAG,SAAS,EAAE;CAGjD;AAMD,wBAAgB,oBAAoB,IAAI,YAAY,CAQnD"}
|