svg-scroll-draw 2.9.0 → 2.10.0

package/dist/web-component/index.cjs

@@ -1,3 +1,3 @@
-'use strict';function at({bounces:e=3,decay:s=.5}={}){let r=Math.max(1,Math.round(e)),i=Math.max(.01,Math.min(.99,s)),m=Math.sqrt(i),p=0,E=[];for(let y=0;y<r;y++){let $=Math.pow(m,y);E.push($),p+=$;}let b=[0],M=0;for(let y=0;y<r;y++)M+=E[y]/p,b.push(M);return y=>{if(y<=0)return 0;if(y>=1)return 1;for(let $=0;$<r;$++)if(y<=b[$+1]){let G=(y-b[$])/(b[$+1]-b[$]);if($===0)return G*(2-G);let h=1-Math.pow(i,$);return h+(1-h)*(2*G-1)*(2*G-1)}return 1}}function lt({amplitude:e=1,period:s=.4}={}){let r=Math.max(1,e),i=Math.max(.1,s),m=r<=1?i/4:i/(2*Math.PI)*Math.asin(1/r);return p=>p<=0?0:p>=1?1:r*Math.pow(2,-10*p)*Math.sin((p-m)*(2*Math.PI)/i)+1}var Le={linear:e=>e,"ease-in":e=>e*e,"ease-out":e=>e*(2-e),"ease-in-out":e=>e<.5?2*e*e:-1+(4-2*e)*e,spring:e=>1-Math.cos(e*Math.PI*2.5)*Math.pow(1-e,2.2),bounce:at(),elastic:lt()};function De(e="top bottom"){let s=e.trim();if(/^\d+(\.\d+)?%$/.test(s))return {element:"top",viewport:s};let[r="top",i="bottom"]=s.split(/\s+/).filter(Boolean);return {element:r,viewport:i}}function Xe(e,s,r,i){switch(i){case "top":return e+r;case "center":return e+r+s/2;case "bottom":return e+r+s;default:return e+r}}function Ue(e,s){if(/^\d+(\.\d+)?%$/.test(e))return s*(parseFloat(e)/100);switch(e){case "top":return 0;case "center":return s/2;case "bottom":return s;default:return s}}function $e(e){let s=e.tagName.toLowerCase();if(s==="rect"){let r=parseFloat(e.getAttribute("width")??"0"),i=parseFloat(e.getAttribute("height")??"0");return 2*(r+i)}if(s==="circle"){let r=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*r}return e.getTotalLength()}function ut(e,s,r){return Math.min(r,Math.max(s,e))}function ie(e,s,r,i){return r===s?0:ut((e-s)/(r-s)*i,0,1)}function Ie(e,s,r,i,m){let p=Xe(e.top,e.height,s,i.element)-Ue(i.viewport,r),E=Xe(e.top,e.height,s,m.element)-Ue(m.viewport,r);return {tStart:p,tEnd:E}}function je(e){let s=/^#([a-f\d])([a-f\d])([a-f\d])$/i.exec(e);if(s)return [parseInt(s[1]+s[1],16),parseInt(s[2]+s[2],16),parseInt(s[3]+s[3],16)];let r=/^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);if(r)return [parseInt(r[1],16),parseInt(r[2],16),parseInt(r[3],16)];let i=/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i.exec(e);return i?[parseInt(i[1]),parseInt(i[2]),parseInt(i[3])]:null}function xe(e,s,r){let i=je(e),m=je(s);return !i||!m?e:`rgb(${Math.round(i[0]+(m[0]-i[0])*r)},${Math.round(i[1]+(m[1]-i[1])*r)},${Math.round(i[2]+(m[2]-i[2])*r)})`}var Je={sketch:{easing:"ease-in",stagger:.1,speed:.9,fade:false},reveal:{easing:"ease-out",fade:true,speed:1.2,once:true},typewriter:{easing:"linear",stagger:.05,speed:1.5},cinematic:{easing:"ease-in-out",fade:true,speed:.75},spring:{easing:"spring",speed:1.1}};function Ke(e,s){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,s);}var Qe={linear:"linear","ease-in":"ease-in","ease-out":"ease-out","ease-in-out":"ease-in-out"},ct=0;function ft(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}function mt(e){let s=e.getAttribute("stroke"),r=e.getAttribute("fill");!s||s==="none"?Ke("Element has no stroke \u2014 path will not be visible.",e):r&&r!=="none"&&r!=="transparent"&&Ke("Element has a fill \u2014 it may obscure the stroke animation.",e);}function pt(e,s,r){let i=document.createElement("div");i.setAttribute("data-svg-scroll-draw-debug",""),i.style.cssText="position:fixed;pointer-events:none;z-index:9999;font-family:monospace;font-size:11px;top:0;left:0;right:0;bottom:0;";function m(){let p=r==="x"?window.scrollX:window.scrollY,E=e-p,b=s-p,M=r==="x";i.innerHTML=`
-      <div style="position:absolute;${M?`left:${E}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${E}px;left:0;right:0;border-top:2px dashed #22c55e;`}padding:2px 6px;color:#22c55e;background:rgba(0,0,0,.6)">\u25B6 start</div>
-      <div style="position:absolute;${M?`left:${b}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${b}px;left:0;right:0;border-top:2px dashed #ef4444;`}padding:2px 6px;color:#ef4444;background:rgba(0,0,0,.6)">\u25A0 end</div>`;}return document.body.appendChild(i),window.addEventListener("scroll",m,{passive:true}),m(),i}function Fe(e,s,r){let i=(s.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),m=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,p=>{let E=parseFloat(p),b=i[m++]??E;return String(+(E+(b-E)*r).toFixed(4))})}function Ye(e,s={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};let{preset:r,...i}=s,m=r?{...Je[r],...i}:i,p=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:E="path, polyline, line, polygon, rect, circle",speed:b=1,fade:M=false,easing:y="linear",trigger:$={},stagger:G=0,direction:h="forward",once:K=false,debug:Ze=false,axis:R="y",scrollContainer:Ae,autoReverse:pe=false,delay:ce=0,strokeColor:Q,strokeWidth:Y,fillOpacity:Z,waypoints:ee,velocityScale:de=false,threshold:Ce=0,rootMargin:Ne="0px",repeat:te=0,repeatDelay:Me=0,morphTo:H,clip:Se,autoplay:et=false,duration:tt=1e3,native:rt=true,onProgress:fe,onStart:ye,onComplete:ae,onEnter:Re,onLeave:He,onEnterBack:We,onLeaveBack:ze}=m,X=Se===true?"left":typeof Se=="string"?Se:false,re=typeof y=="function"?y:Le[y]??Le.linear,qe=De($.start??"top bottom"),Ve=De($.end??"bottom top"),I=typeof Ae=="string"?document.querySelector(Ae):Ae??null,W=Array.isArray(Q)?Q[0]:null,S=Array.isArray(Q)?Q[1]:typeof Q=="string"?Q:null,F=Array.isArray(Y)?Y[0]:null,k=Array.isArray(Y)?Y[1]:typeof Y=="number"?Y:null,O=Array.isArray(Z)?Z[0]:null,T=Array.isArray(Z)?Z[1]:typeof Z=="number"?Z:null;function ne(t){let n=t*100;switch(X){case "right":return `inset(0 0 0 ${100-n}%)`;case "top":return `inset(0 0 ${100-n}% 0)`;case "bottom":return `inset(${100-n}% 0 0 0)`;case "center":return `circle(${t*150}% at 50% 50%)`;default:return `inset(0 ${100-n}% 0 0)`}}let x=X?[]:Array.from(e.querySelectorAll(E)),w=[],z=[],B=0,U=0,A=false,N=false,v=0,he=false,q=-1,ge=-1,P=false,se=0,_=0,j,ke=null,J=new Set,be=-1,Ge=performance.now(),le=NaN;function me(){return I?R==="x"?I.scrollLeft:I.scrollTop:R==="x"?window.scrollX:window.scrollY}function Be(){return I?R==="x"?I.clientWidth:I.clientHeight:R==="x"?window.innerWidth:window.innerHeight}function _e(){let t=e.getBoundingClientRect(),n,l,g;if(I){let D=I.getBoundingClientRect();n=R==="x"?t.left-D.left+I.scrollLeft:t.top-D.top+I.scrollTop,l=R==="x"?t.width:t.height,g=me();}else n=R==="x"?t.left:t.top,l=R==="x"?t.width:t.height,g=me();let L=Ie({top:n,height:l},g,Be(),qe,Ve);B=L.tStart,U=L.tEnd,Ze&&process.env.NODE_ENV!=="production"&&(ke?.remove(),ke=pt(B,U,R));}function nt(t,n){if(e.style.setProperty("--scroll-draw-progress",String(t)),X){let l=n==="reverse"?1-t:t;e.style.clipPath=ne(l);return}x.forEach((l,g)=>{l.style.strokeDashoffset=n==="reverse"?`${w[g]*t}`:`${w[g]*(1-t)}`,M&&(l.style.opacity=n==="reverse"?`${1-t}`:`${t}`),W&&S?l.style.stroke=xe(W,S,t):S&&(l.style.stroke=S),F!==null&&k!==null?l.style.strokeWidth=`${F+(k-F)*t}`:k!==null&&(l.style.strokeWidth=`${k}`),O!==null&&T!==null?l.style.fillOpacity=`${O+(T-O)*t}`:T!==null&&(l.style.fillOpacity=`${T}`),H&&l.tagName.toLowerCase()==="path"&&z[g]&&l.setAttribute("d",Fe(z[g],H,t));});}function we(){if(e.style.setProperty("--scroll-draw-progress","0"),X){e.style.clipPath=ne(0);return}x.forEach((t,n)=>{t.style.strokeDasharray=`${w[n]}`,t.style.strokeDashoffset=h==="reverse"?"0":`${w[n]}`,M?t.style.opacity=h==="reverse"?"1":"0":t.style.opacity="",W&&(t.style.stroke=W),F!==null&&(t.style.strokeWidth=`${F}`),O!==null&&(t.style.fillOpacity=`${O}`),H&&t.tagName.toLowerCase()==="path"&&z[n]&&t.setAttribute("d",z[n]);});}if(x.forEach(t=>{mt(t);let n=$e(t);w.push(n),t.tagName.toLowerCase()==="path"?z.push(t.getAttribute("d")??""):z.push(""),p?(t.style.strokeDasharray=`${n}`,t.style.strokeDashoffset=h==="reverse"?`${n}`:"0",M&&(t.style.opacity="1"),S&&(t.style.stroke=S),k!==null&&(t.style.strokeWidth=`${k}`),T!==null&&(t.style.fillOpacity=`${T}`),H&&t.tagName.toLowerCase()==="path"&&t.setAttribute("d",H)):(t.style.strokeDasharray=`${n}`,t.style.strokeDashoffset=h==="reverse"?"0":`${n}`,M?t.style.opacity=h==="reverse"?"1":"0":t.style.opacity="",W&&(t.style.stroke=W),F!==null&&(t.style.strokeWidth=`${F}`),O!==null&&(t.style.fillOpacity=`${O}`));}),X){if(p)return e.style.clipPath=ne(1),ae?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=ne(0);}else if(p)return ae?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};function st(){return !(rt===false||!ft()||!x.length||typeof y!="string"||!(y in Qe)||X||R!=="y"||I||b!==1||G!==0||K||pe||de!==false||H||ee||te||ce>0||fe||ye||ae||Re||He||We||ze||Q!=null||Y!=null||Z!=null||($.start??"top bottom").trim()!=="top bottom"||($.end??"bottom top").trim()!=="bottom top")}function ot(){let t=`svg-scroll-draw-${++ct}`,n=h==="reverse"?"0":"var(--ssd-len)",l=h==="reverse"?"var(--ssd-len)":"0",g=`stroke-dashoffset:${n};`,L=`stroke-dashoffset:${l};`;M&&(g+=`opacity:${h==="reverse"?1:0};`,L+=`opacity:${h==="reverse"?0:1};`);let D=document.createElement("style");D.setAttribute("data-svg-scroll-draw",""),D.textContent=`@keyframes ${t}{from{${g}}to{${L}}}.${t}{animation-name:${t};animation-duration:auto;animation-timing-function:${Qe[y]};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(D);function C(o,u){o.style.setProperty("--ssd-len",String(w[u])),o.style.strokeDasharray=`${w[u]}`,o.style.strokeDashoffset="",o.style.opacity="",o.style.animationPlayState="",o.classList.add(t);}x.forEach(C);let a=false,c=-1;function f(){if(c>=0)return c;let o=e.getBoundingClientRect(),{tStart:u,tEnd:d}=Ie({top:o.top,height:o.height},me(),Be(),qe,Ve);return re(ie(me(),u,d,b))}return {destroy(){x.forEach(o=>{o.classList.remove(t),o.style.removeProperty("--ssd-len"),o.style.animationPlayState="";}),D.remove();},replay(){a=false,c=-1,x.forEach(C);},pause(){a=true,x.forEach(o=>{o.style.animationPlayState="paused";});},resume(){a&&(a=false,x.forEach(o=>{o.style.animationPlayState="running";}));},seek(o){let u=Math.min(1,Math.max(0,o));c=u,a=true,x.forEach((d,oe)=>{d.classList.remove(t),d.style.strokeDashoffset=h==="reverse"?`${w[oe]*u}`:`${w[oe]*(1-u)}`,M&&(d.style.opacity=h==="reverse"?`${1-u}`:`${u}`);});},getProgress(){return f()}}}if(st())return ot();function it(){let t=Math.max(1,tt),n=0,l=0;function g(f){let o=true;if(X){let u=Math.min(1,Math.max(0,f/t)),d=re(u);se=d,e.style.setProperty("--scroll-draw-progress",String(d)),e.style.clipPath=ne(h==="reverse"?1-d:d),fe?.(d),u<1&&(o=false);}else x.forEach((u,d)=>{let oe=d*G*t,ue=Math.min(1,Math.max(0,(f-oe)/t)),V=re(ue);u.style.strokeDashoffset=h==="reverse"?`${w[d]*V}`:`${w[d]*(1-V)}`,M&&(u.style.opacity=h==="reverse"?`${1-V}`:`${V}`),W&&S?u.style.stroke=xe(W,S,V):S&&(u.style.stroke=S),F!==null&&k!==null?u.style.strokeWidth=`${F+(k-F)*V}`:k!==null&&(u.style.strokeWidth=`${k}`),O!==null&&T!==null?u.style.fillOpacity=`${O+(T-O)*V}`:T!==null&&(u.style.fillOpacity=`${T}`),H&&u.tagName.toLowerCase()==="path"&&z[d]&&u.setAttribute("d",Fe(z[d],H,V)),d===0&&(fe?.(V),e.style.setProperty("--scroll-draw-progress",String(V))),ue<1&&(o=false);});if(ee){let u=Math.min(1,Math.max(0,f/t)),d=re(u);for(let oe in ee){let ue=parseFloat(oe);d>=ue&&!J.has(ue)&&(J.add(ue),ee[oe]?.());}}return o}function L(f){if(P)return;let o=f-n;N||(N=true,ye?.());let u=g(o);if(u&&!A){A=true,g(t*(1+Math.max(0,x.length-1)*G)),ae?.(),_<(te==="infinite"?1/0:te??0)&&(_++,j=setTimeout(()=>{n=performance.now(),N=false,A=false,J.clear(),we(),v=requestAnimationFrame(L);},Me));return}u||(v=requestAnimationFrame(L));}function D(){cancelAnimationFrame(v),clearTimeout(j),n=performance.now(),l=0,P=false,N=false,A=false,_=0,J.clear(),we(),v=requestAnimationFrame(L);}let C=new IntersectionObserver(f=>{f.forEach(o=>{o.isIntersecting&&!(K&&A)?D():!o.isIntersecting&&!K&&!A&&(cancelAnimationFrame(v),clearTimeout(j),n=null);});},{root:I??null,threshold:Ce,rootMargin:Ne}),a;function c(){clearTimeout(a),a=setTimeout(()=>{x.forEach((f,o)=>{w[o]=$e(f),f.style.strokeDasharray=`${w[o]}`;});},150);}return window.addEventListener("resize",c),window.addEventListener("orientationchange",c),ce>0?setTimeout(()=>C.observe(e),ce):C.observe(e),{destroy(){cancelAnimationFrame(v),clearTimeout(j),C.disconnect(),window.removeEventListener("resize",c),window.removeEventListener("orientationchange",c),clearTimeout(a);},replay(){_=0,D();},pause(){P||(P=true,l=performance.now()-n,cancelAnimationFrame(v));},resume(){P&&(P=false,n=performance.now()-l,v=requestAnimationFrame(L));},seek(f){let o=Math.min(1,Math.max(0,f));se=o,P=true,l=o*t,n=performance.now()-l,cancelAnimationFrame(v),g(l);},getProgress(){return se}}}if(et)return it();_e();function ve(){if(!he||P)return;let t=performance.now(),n=me(),l=b;if(de!==false){let a=t-Ge,c=a>0?Math.abs(n-(be<0?n:be))/a:0;l=b*Math.max(.2,1+c*(typeof de=="number"?de:1)*.04);}be=n,Ge=t;let g=pe?ge===-1||n>=ge?"forward":"reverse":h;ge=n;let L=U-B,D=true,C=L===0?0:(n-B)/L;if(isNaN(le)||(le<=0&&C>0?Re?.():le>0&&C<=0&&ze?.(),le<1&&C>=1?He?.():le>=1&&C<1&&We?.()),le=C,X){let a=re(ie(n,B,U,l));K&&!pe&&(q=Math.max(q,a),a=q),se=a,e.style.setProperty("--scroll-draw-progress",String(a));let c=g==="reverse"?1-a:a;e.style.clipPath=ne(c),fe?.(a),!N&&ie(n,B,U,l)>0&&(N=true,ye?.()),a>=1&&!A?(A=true,ae?.(),_<(te==="infinite"?1/0:te??0)&&(_++,j=setTimeout(()=>{q=-1,N=false,A=false,e.style.clipPath=ne(0);},Me))):a<1&&!K&&(A=false),v=requestAnimationFrame(ve);return}if(x.forEach((a,c)=>{let f=c*G*L,o=re(ie(n,B+f,U+f,l));K&&!pe&&(q=Math.max(q,o),o=q),se=o,a.style.strokeDashoffset=g==="reverse"?`${w[c]*o}`:`${w[c]*(1-o)}`,M&&(a.style.opacity=g==="reverse"?`${1-o}`:`${o}`),W&&S?a.style.stroke=xe(W,S,o):S&&(a.style.stroke=S),F!==null&&k!==null?a.style.strokeWidth=`${F+(k-F)*o}`:k!==null&&(a.style.strokeWidth=`${k}`),O!==null&&T!==null?a.style.fillOpacity=`${O+(T-O)*o}`:T!==null&&(a.style.fillOpacity=`${T}`),H&&a.tagName.toLowerCase()==="path"&&z[c]&&a.setAttribute("d",Fe(z[c],H,o)),c===0&&(fe?.(o),e.style.setProperty("--scroll-draw-progress",String(o))),o<1&&(D=false);}),ee){let a=re(ie(n,B,U,l));for(let c in ee){let f=parseFloat(c);a>=f&&!J.has(f)&&(J.add(f),ee[c]?.());}}!N&&ie(n,B,U,l)>0&&(N=true,ye?.()),D&&!A?(A=true,ae?.(),_<(te==="infinite"?1/0:te??0)&&(_++,j=setTimeout(()=>{q=-1,N=false,A=false,J.clear(),we();},Me))):!D&&!K&&(A=false),v=requestAnimationFrame(ve);}let Te=new IntersectionObserver(t=>{t.forEach(n=>{he=n.isIntersecting,he&&!P?v=requestAnimationFrame(ve):cancelAnimationFrame(v);});},{root:I??null,threshold:Ce,rootMargin:Ne}),Pe;function Ee(){clearTimeout(Pe),Pe=setTimeout(()=>{x.forEach((t,n)=>{w[n]=$e(t),t.style.strokeDasharray=`${w[n]}`;}),_e();},150);}return window.addEventListener("resize",Ee),window.addEventListener("orientationchange",Ee),ce>0?setTimeout(()=>Te.observe(e),ce):Te.observe(e),{destroy(){cancelAnimationFrame(v),clearTimeout(j),Te.disconnect(),window.removeEventListener("resize",Ee),window.removeEventListener("orientationchange",Ee),clearTimeout(Pe),ke?.remove();},replay(){q=-1,ge=-1,be=-1,N=false,A=false,_=0,P=false,J.clear(),clearTimeout(j),we();},pause(){P=true,cancelAnimationFrame(v);},resume(){P&&(P=false,he&&(v=requestAnimationFrame(ve)));},seek(t){let n=Math.min(1,Math.max(0,t));se=n,q=n,P=true,cancelAnimationFrame(v),nt(n,h);},getProgress(){return se}}}var Oe=class extends HTMLElement{constructor(){super(...arguments);this.instance=null;}connectedCallback(){let r={},i=this.getAttribute("speed"),m=this.getAttribute("easing"),p=this.getAttribute("stagger"),E=this.getAttribute("direction"),b=this.getAttribute("selector");i&&(r.speed=parseFloat(i)),m&&(r.easing=m),p&&(r.stagger=parseFloat(p)),E&&(r.direction=E),b&&(r.selector=b),this.hasAttribute("fade")&&(r.fade=this.getAttribute("fade")!=="false"),this.instance=Ye(this,r);}disconnectedCallback(){this.instance?.destroy(),this.instance=null;}};typeof customElements<"u"&&!customElements.get("scroll-draw")&&customElements.define("scroll-draw",Oe);
+'use strict';function Et({bounces:e=3,decay:n=.5}={}){let s=Math.max(1,Math.round(e)),r=Math.max(.01,Math.min(.99,n)),c=Math.sqrt(r),f=0,y=[];for(let v=0;v<s;v++){let $=Math.pow(c,v);y.push($),f+=$;}let w=[0],E=0;for(let v=0;v<s;v++)E+=y[v]/f,w.push(E);return v=>{if(v<=0)return 0;if(v>=1)return 1;for(let $=0;$<s;$++)if(v<=w[$+1]){let B=(v-w[$])/(w[$+1]-w[$]);if($===0)return B*(2-B);let g=1-Math.pow(r,$);return g+(1-g)*(2*B-1)*(2*B-1)}return 1}}function St({amplitude:e=1,period:n=.4}={}){let s=Math.max(1,e),r=Math.max(.1,n),c=s<=1?r/4:r/(2*Math.PI)*Math.asin(1/s);return f=>f<=0?0:f>=1?1:s*Math.pow(2,-10*f)*Math.sin((f-c)*(2*Math.PI)/r)+1}var ve={linear:e=>e,"ease-in":e=>e*e,"ease-out":e=>e*(2-e),"ease-in-out":e=>e<.5?2*e*e:-1+(4-2*e)*e,spring:e=>1-Math.cos(e*Math.PI*2.5)*Math.pow(1-e,2.2),bounce:Et(),elastic:St()};function Ve(e="top bottom"){let n=e.trim();if(/^\d+(\.\d+)?%$/.test(n))return {element:"top",viewport:n};let[s="top",r="bottom"]=n.split(/\s+/).filter(Boolean);return {element:s,viewport:r}}function nt(e,n,s,r){switch(r){case "top":return e+s;case "center":return e+s+n/2;case "bottom":return e+s+n;default:return e+s}}function st(e,n){if(/^\d+(\.\d+)?%$/.test(e))return n*(parseFloat(e)/100);switch(e){case "top":return 0;case "center":return n/2;case "bottom":return n;default:return n}}function pe(e){let n=e.tagName.toLowerCase();if(n==="rect"){let s=parseFloat(e.getAttribute("width")??"0"),r=parseFloat(e.getAttribute("height")??"0");return 2*(s+r)}if(n==="circle"){let s=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*s}return e.getTotalLength()}function $t(e,n,s){return Math.min(s,Math.max(n,e))}function ue(e,n,s,r){return s===n?0:$t((e-n)/(s-n)*r,0,1)}function it(e,n,s){let r=e.getBoundingClientRect(),c=s==="x"?r.width:r.height;return n?{top:s==="x"?r.left-n.getBoundingClientRect().left+n.scrollLeft:r.top-n.getBoundingClientRect().top+n.scrollTop,height:c,scroll:0}:{top:s==="x"?r.left:r.top,height:c,scroll:s==="x"?window.scrollX:window.scrollY}}function ze(e,n,s,r,c){let f=nt(e.top,e.height,n,r.element)-st(r.viewport,s),y=nt(e.top,e.height,n,c.element)-st(c.viewport,s);return {tStart:f,tEnd:y}}function ot(e){let n=/^#([a-f\d])([a-f\d])([a-f\d])$/i.exec(e);if(n)return [parseInt(n[1]+n[1],16),parseInt(n[2]+n[2],16),parseInt(n[3]+n[3],16)];let s=/^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);if(s)return [parseInt(s[1],16),parseInt(s[2],16),parseInt(s[3],16)];let r=/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i.exec(e);return r?[parseInt(r[1]),parseInt(r[2]),parseInt(r[3])]:null}function De(e,n,s){let r=ot(e),c=ot(n);return !r||!c?e:`rgb(${Math.round(r[0]+(c[0]-r[0])*s)},${Math.round(r[1]+(c[1]-r[1])*s)},${Math.round(r[2]+(c[2]-r[2])*s)})`}var at={sketch:{easing:"ease-in",stagger:.1,speed:.9,fade:false},reveal:{easing:"ease-out",fade:true,speed:1.2,once:true},typewriter:{easing:"linear",stagger:.05,speed:1.5},cinematic:{easing:"ease-in-out",fade:true,speed:.75},spring:{easing:"spring",speed:1.1}};var Pe=typeof __SVG_SCROLL_DRAW_DEV__<"u"?__SVG_SCROLL_DRAW_DEV__:typeof process<"u"&&typeof process.env<"u"&&process.env.NODE_ENV!=="production";function de(e,...n){Pe&&console.warn(`[svg-scroll-draw] ${e}`,...n);}var xt="cubic-bezier(0.333333, 0, 0.666667, 0.333333)",Tt="cubic-bezier(0.333333, 0.666667, 0.666667, 1)",lt=33;function At(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timing-function: linear(0, 1)")}function Mt(e){let n=[];for(let s=0;s<lt;s++){let r=s/(lt-1);n.push(String(Math.round(e(r)*1e5)/1e5));}return `linear(${n.join(",")})`}function ut(e){switch(e){case "linear":return "linear";case "ease-in":return xt;case "ease-out":return Tt;case "ease-in-out":return At()?Mt(ve["ease-in-out"]):null;default:return null}}var kt=0;function Lt(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")&&CSS.supports("view-timeline-name: --x")}function Dt(e){let n=e.getAttribute("stroke"),s=e.getAttribute("fill");!n||n==="none"?de("Element has no stroke \u2014 path will not be visible.",e):s&&s!=="none"&&s!=="transparent"&&de("Element has a fill \u2014 it may obscure the stroke animation.",e);}function Pt(e,n,s){let r=document.createElement("div");r.setAttribute("data-svg-scroll-draw-debug",""),r.style.cssText="position:fixed;pointer-events:none;z-index:9999;font-family:monospace;font-size:11px;top:0;left:0;right:0;bottom:0;";function c(){let f=s==="x"?window.scrollX:window.scrollY,y=e-f,w=n-f,E=s==="x";r.innerHTML=`
+      <div style="position:absolute;${E?`left:${y}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${y}px;left:0;right:0;border-top:2px dashed #22c55e;`}padding:2px 6px;color:#22c55e;background:rgba(0,0,0,.6)">\u25B6 start</div>
+      <div style="position:absolute;${E?`left:${w}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${w}px;left:0;right:0;border-top:2px dashed #ef4444;`}padding:2px 6px;color:#ef4444;background:rgba(0,0,0,.6)">\u25A0 end</div>`;}return document.body.appendChild(r),window.addEventListener("scroll",c,{passive:true}),c(),{el:r,destroy(){window.removeEventListener("scroll",c),r.remove();}}}var ct=/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,ft=/[MmLlHhVvCcSsQqTtAaZz]/g;function Ct(e,n,s){if(!Pe)return;let r=(e.match(ft)??[]).join("").toUpperCase(),c=(n.match(ft)??[]).join("").toUpperCase(),f=(e.match(ct)??[]).length,y=(n.match(ct)??[]).length;if(r!==c){de(`morphTo: command sequence differs (${r||"\u2205"} \u2192 ${c||"\u2205"}). Interpolation is coordinate-for-coordinate, so the result will not reach the target shape. Redraw both paths with the same commands.`,s);return}f!==y&&de(`morphTo: coordinate count differs (${f} \u2192 ${y}). Extra coordinates are ignored and missing ones hold their start value, so the result will not reach the target shape.`,s);}function He(e,n,s){let r=(n.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),c=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,f=>{let y=parseFloat(f),w=r[c++]??y;return String(+(y+(w-y)*s).toFixed(4))})}function mt(e,n={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};let{preset:s,...r}=n,c=s?{...at[s],...r}:r,f=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:y="path, polyline, line, polygon, rect, circle",speed:w=1,fade:E=false,easing:v="linear",trigger:$={},stagger:B=0,direction:g="forward",once:ee=false,debug:pt=false,axis:te="y",scrollContainer:Ce,autoReverse:Ee=false,delay:he=0,strokeColor:re,strokeWidth:ne,fillOpacity:se,waypoints:oe,velocityScale:ye=false,threshold:We=0,rootMargin:qe="0px",repeat:ie=0,repeatDelay:Oe=0,morphTo:R,clip:Ie,autoplay:dt=false,duration:ht=1e3,native:yt=true,onProgress:ge,onStart:Se,onComplete:ce,onEnter:Ge,onLeave:Be,onEnterBack:Ue,onLeaveBack:je}=c,X=Ie===true?"left":typeof Ie=="string"?Ie:false,ae=typeof v=="function"?v:ve[v]??ve.linear,Qe=Ve($.start??"top bottom"),Xe=Ve($.end??"bottom top"),z=typeof Ce=="string"?document.querySelector(Ce):Ce??null,H=Array.isArray(re)?re[0]:null,L=Array.isArray(re)?re[1]:typeof re=="string"?re:null,O=Array.isArray(ne)?ne[0]:null,D=Array.isArray(ne)?ne[1]:typeof ne=="number"?ne:null,I=Array.isArray(se)?se[0]:null,P=Array.isArray(se)?se[1]:typeof se=="number"?se:null;function le(t){let o=t*100;switch(X){case "right":return `inset(0 0 0 ${100-o}%)`;case "top":return `inset(0 0 ${100-o}% 0)`;case "bottom":return `inset(${100-o}% 0 0 0)`;case "center":return `circle(${t*150}% at 50% 50%)`;default:return `inset(0 ${100-o}% 0 0)`}}let S=X?[]:Array.from(e.querySelectorAll(y)),p=[],F=[],U=0,Y=0,A=false,_=false,M=0,fe=false,W=-1,$e=-1,k=false,q=0,j=0,Z,Re=null;function Ye(){Re?.destroy(),Re=null;}let J=new Set,Ze=NaN,K=true,xe=-1,Je=performance.now(),me=NaN;function Fe(){return z?te==="x"?z.scrollLeft:z.scrollTop:te==="x"?window.scrollX:window.scrollY}function Ke(){return z?te==="x"?z.clientWidth:z.clientHeight:te==="x"?window.innerWidth:window.innerHeight}function et(){let t=it(e,z,te),o=ze(t,t.scroll,Ke(),Qe,Xe);U=o.tStart,Y=o.tEnd,pt&&Pe&&(Ye(),Re=Pt(U,Y,te));}function gt(t,o){if(e.style.setProperty("--scroll-draw-progress",String(t)),X){let l=o==="reverse"?1-t:t;e.style.clipPath=le(l);return}S.forEach((l,x)=>{l.style.strokeDashoffset=o==="reverse"?`${p[x]*t}`:`${p[x]*(1-t)}`,E&&(l.style.opacity=o==="reverse"?`${1-t}`:`${t}`),H&&L?l.style.stroke=De(H,L,t):L&&(l.style.stroke=L),O!==null&&D!==null?l.style.strokeWidth=`${O+(D-O)*t}`:D!==null&&(l.style.strokeWidth=`${D}`),I!==null&&P!==null?l.style.fillOpacity=`${I+(P-I)*t}`:P!==null&&(l.style.fillOpacity=`${P}`),R&&l.tagName.toLowerCase()==="path"&&F[x]&&l.setAttribute("d",He(F[x],R,t));});}function Te(){if(e.style.setProperty("--scroll-draw-progress","0"),X){e.style.clipPath=le(0);return}S.forEach((t,o)=>{t.style.strokeDasharray=`${p[o]}`,t.style.strokeDashoffset=g==="reverse"?"0":`${p[o]}`,E?t.style.opacity=g==="reverse"?"1":"0":t.style.opacity="",H&&(t.style.stroke=H),O!==null&&(t.style.strokeWidth=`${O}`),I!==null&&(t.style.fillOpacity=`${I}`),R&&t.tagName.toLowerCase()==="path"&&F[o]&&t.setAttribute("d",F[o]);});}if(S.forEach(t=>{Dt(t);let o=pe(t);p.push(o);let l=t.tagName.toLowerCase()==="path";l?F.push(t.getAttribute("d")??""):F.push(""),R&&(l?Ct(F[F.length-1],R,t):de(`morphTo only applies to <path> elements \u2014 ignored on <${t.tagName}>.`,t)),f?(t.style.strokeDasharray=`${o}`,t.style.strokeDashoffset=g==="reverse"?`${o}`:"0",E&&(t.style.opacity="1"),L&&(t.style.stroke=L),D!==null&&(t.style.strokeWidth=`${D}`),P!==null&&(t.style.fillOpacity=`${P}`),R&&t.tagName.toLowerCase()==="path"&&t.setAttribute("d",R)):(t.style.strokeDasharray=`${o}`,t.style.strokeDashoffset=g==="reverse"?"0":`${o}`,E?t.style.opacity=g==="reverse"?"1":"0":t.style.opacity="",H&&(t.style.stroke=H),O!==null&&(t.style.strokeWidth=`${O}`),I!==null&&(t.style.fillOpacity=`${I}`));}),X){if(f)return e.style.clipPath=le(1),ce?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=le(0);}else if(f)return ce?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};let tt=typeof v=="string"?ut(v):null;function bt(){return !(yt===false||!Lt()||!S.length||!tt||X||te!=="y"||z||w!==1||B!==0||ee||Ee||ye!==false||R||oe||ie||he>0||ge||Se||ce||Ge||Be||Ue||je||re!=null||ne!=null||se!=null||($.start??"top bottom").trim()!=="top bottom"||($.end??"bottom top").trim()!=="bottom top")}function wt(){let t=++kt,o=`svg-scroll-draw-${t}`,l=`svg-scroll-draw-host-${t}`,x=`--svg-scroll-draw-${t}`,Q=g==="reverse"?"0":"var(--ssd-len)",G=g==="reverse"?"var(--ssd-len)":"0",V=`stroke-dashoffset:${Q};`,u=`stroke-dashoffset:${G};`;E&&(V+=`opacity:${g==="reverse"?1:0};`,u+=`opacity:${g==="reverse"?0:1};`);let m=document.createElement("style");m.setAttribute("data-svg-scroll-draw",""),m.textContent=`@keyframes ${o}{from{${V}}to{${u}}}.${l}{view-timeline-name:${x};view-timeline-axis:block;}.${o}{animation-name:${o};animation-duration:auto;animation-timing-function:${tt};animation-fill-mode:both;animation-timeline:${x};animation-range:cover 0% cover 100%;}`,document.head.appendChild(m),e.classList.add(l);function T(i,b){i.style.setProperty("--ssd-len",String(p[b])),i.style.strokeDasharray=`${p[b]}`,i.style.strokeDashoffset="",i.style.opacity="",i.style.animationPlayState="",i.classList.add(o);}S.forEach(T);let a=false,d=-1;function h(){if(d>=0)return d;let i=e.getBoundingClientRect(),{tStart:b,tEnd:N}=ze({top:i.top,height:i.height},Fe(),Ke(),Qe,Xe);return ae(ue(Fe(),b,N,w))}return {destroy(){e.classList.remove(l),S.forEach(i=>{i.classList.remove(o),i.style.removeProperty("--ssd-len"),i.style.animationPlayState="";}),m.remove();},replay(){a=false,d=-1,S.forEach(T);},pause(){a=true,S.forEach(i=>{i.style.animationPlayState="paused";});},resume(){a&&(a=false,S.forEach(i=>{i.style.animationPlayState="running";}));},seek(i){let b=Math.min(1,Math.max(0,i));d=b,a=true,S.forEach((N,C)=>{N.classList.remove(o),N.style.strokeDashoffset=g==="reverse"?`${p[C]*b}`:`${p[C]*(1-b)}`,E&&(N.style.opacity=g==="reverse"?`${1-b}`:`${b}`);});},getProgress(){return h()},refresh(){S.forEach((i,b)=>{p[b]=pe(i),i.style.setProperty("--ssd-len",String(p[b])),i.style.strokeDasharray=`${p[b]}`;});}}}if(bt())return wt();function vt(){let t=Math.max(1,ht),o=0,l=0,x=false;function Q(a){let d=true;if(X){let h=Math.min(1,Math.max(0,a/t)),i=ae(h);q=i,e.style.setProperty("--scroll-draw-progress",String(i)),e.style.clipPath=le(g==="reverse"?1-i:i),ge?.(i),h<1&&(d=false);}else S.forEach((h,i)=>{let b=i*B*t,N=Math.min(1,Math.max(0,(a-b)/t)),C=ae(N);h.style.strokeDashoffset=g==="reverse"?`${p[i]*C}`:`${p[i]*(1-C)}`,E&&(h.style.opacity=g==="reverse"?`${1-C}`:`${C}`),H&&L?h.style.stroke=De(H,L,C):L&&(h.style.stroke=L),O!==null&&D!==null?h.style.strokeWidth=`${O+(D-O)*C}`:D!==null&&(h.style.strokeWidth=`${D}`),I!==null&&P!==null?h.style.fillOpacity=`${I+(P-I)*C}`:P!==null&&(h.style.fillOpacity=`${P}`),R&&h.tagName.toLowerCase()==="path"&&F[i]&&h.setAttribute("d",He(F[i],R,C)),i===0&&(q=C,ge?.(C),e.style.setProperty("--scroll-draw-progress",String(C))),N<1&&(d=false);});if(oe){let h=Math.min(1,Math.max(0,a/t)),i=ae(h);for(let b in oe){let N=parseFloat(b);i>=N&&!J.has(N)&&(J.add(N),oe[b]?.());}}return d}function G(a){if(k)return;let d=a-o;_||(_=true,Se?.());let h=Q(d);if(h&&!A){A=true,Q(t*(1+Math.max(0,S.length-1)*B)),ce?.(),j<(ie==="infinite"?1/0:ie??0)&&(j++,Z=setTimeout(()=>{o=performance.now(),_=false,A=false,J.clear(),Te(),M=requestAnimationFrame(G);},Oe));return}h||(M=requestAnimationFrame(G));}function V(){cancelAnimationFrame(M),clearTimeout(Z),o=performance.now(),l=0,k=false,_=false,A=false,j=0,x=true,q=0,J.clear(),Te(),M=requestAnimationFrame(G);}let u=new IntersectionObserver(a=>{a.forEach(d=>{d.isIntersecting&&!(ee&&A)?V():!d.isIntersecting&&!ee&&!A&&(cancelAnimationFrame(M),clearTimeout(Z),x=false);});},{root:z??null,threshold:We,rootMargin:qe}),m;function T(){clearTimeout(m),m=setTimeout(()=>{S.forEach((a,d)=>{p[d]=pe(a),a.style.strokeDasharray=`${p[d]}`;});},150);}return window.addEventListener("resize",T),window.addEventListener("orientationchange",T),he>0?setTimeout(()=>u.observe(e),he):u.observe(e),{destroy(){cancelAnimationFrame(M),clearTimeout(Z),u.disconnect(),window.removeEventListener("resize",T),window.removeEventListener("orientationchange",T),clearTimeout(m);},replay(){j=0,V();},pause(){k||!x||(k=true,l=performance.now()-o,cancelAnimationFrame(M));},resume(){k&&(k=false,x=true,o=performance.now()-l,M=requestAnimationFrame(G));},seek(a){let d=Math.min(1,Math.max(0,a));q=d,k=true,l=d*t,o=performance.now()-l,cancelAnimationFrame(M),Q(l);},getProgress(){return q},refresh(){clearTimeout(m),S.forEach((a,d)=>{p[d]=pe(a),a.style.strokeDasharray=`${p[d]}`;});}}}if(dt)return vt();et();function Ae(){if(!fe||k)return;let t=performance.now(),o=Fe();if(!K&&ye===false&&o===Ze){M=requestAnimationFrame(Ae);return}K=false,Ze=o;let l=w;if(ye!==false){let u=t-Je,m=u>0?Math.abs(o-(xe<0?o:xe))/u:0;l=w*Math.max(.2,1+m*(typeof ye=="number"?ye:1)*.04);}xe=o,Je=t;let x=Ee?$e===-1||o>=$e?"forward":"reverse":g;$e=o;let Q=Y-U,G=true,V=Q===0?0:(o-U)/Q;if(isNaN(me)||(me<=0&&V>0?Ge?.():me>0&&V<=0&&je?.(),me<1&&V>=1?Be?.():me>=1&&V<1&&Ue?.()),me=V,X){let u=ae(ue(o,U,Y,l));ee&&!Ee&&(W=Math.max(W,u),u=W),q=u,e.style.setProperty("--scroll-draw-progress",String(u));let m=x==="reverse"?1-u:u;e.style.clipPath=le(m),ge?.(u),!_&&ue(o,U,Y,l)>0&&(_=true,Se?.()),u>=1&&!A?(A=true,ce?.(),j<(ie==="infinite"?1/0:ie??0)&&(j++,Z=setTimeout(()=>{W=-1,_=false,A=false,e.style.clipPath=le(0);},Oe))):u<1&&!ee&&(A=false),M=requestAnimationFrame(Ae);return}if(S.forEach((u,m)=>{let T=m*B*Q,a=ae(ue(o,U+T,Y+T,l));ee&&!Ee&&(W=Math.max(W,a),a=W),q=a,u.style.strokeDashoffset=x==="reverse"?`${p[m]*a}`:`${p[m]*(1-a)}`,E&&(u.style.opacity=x==="reverse"?`${1-a}`:`${a}`),H&&L?u.style.stroke=De(H,L,a):L&&(u.style.stroke=L),O!==null&&D!==null?u.style.strokeWidth=`${O+(D-O)*a}`:D!==null&&(u.style.strokeWidth=`${D}`),I!==null&&P!==null?u.style.fillOpacity=`${I+(P-I)*a}`:P!==null&&(u.style.fillOpacity=`${P}`),R&&u.tagName.toLowerCase()==="path"&&F[m]&&u.setAttribute("d",He(F[m],R,a)),m===0&&(ge?.(a),e.style.setProperty("--scroll-draw-progress",String(a))),a<1&&(G=false);}),oe){let u=ae(ue(o,U,Y,l));for(let m in oe){let T=parseFloat(m);u>=T&&!J.has(T)&&(J.add(T),oe[m]?.());}}!_&&ue(o,U,Y,l)>0&&(_=true,Se?.()),G&&!A?(A=true,ce?.(),j<(ie==="infinite"?1/0:ie??0)&&(j++,Z=setTimeout(()=>{W=-1,_=false,A=false,J.clear(),Te(),K=true;},Oe))):!G&&!ee&&(A=false),M=requestAnimationFrame(Ae);}let Ne=false;function Me(){Ne||(Ne=true,M=requestAnimationFrame(function(){Ae();}));}function ke(){Ne=false,cancelAnimationFrame(M);}let _e=new IntersectionObserver(t=>{t.forEach(o=>{fe=o.isIntersecting,fe&&!k?(K=true,Me()):ke();});},{root:z??null,threshold:We,rootMargin:qe});function rt(){S.forEach((t,o)=>{p[o]=pe(t),t.style.strokeDasharray=`${p[o]}`;}),et(),K=true;}let Le;function be(){clearTimeout(Le),Le=setTimeout(rt,150);}window.addEventListener("resize",be),window.addEventListener("orientationchange",be);let we;return typeof ResizeObserver<"u"&&(we=new ResizeObserver(()=>be()),we.observe(document.body),we.observe(document.documentElement),we.observe(e)),he>0?setTimeout(()=>_e.observe(e),he):_e.observe(e),{destroy(){cancelAnimationFrame(M),clearTimeout(Z),ke(),_e.disconnect(),we?.disconnect(),window.removeEventListener("resize",be),window.removeEventListener("orientationchange",be),clearTimeout(Le),Ye();},replay(){W=-1,$e=-1,xe=-1,_=false,A=false,j=0,k=false,q=0,J.clear(),clearTimeout(Z),Te(),K=true,fe&&Me();},pause(){k=true,ke();},resume(){k&&(k=false,K=true,fe&&Me());},seek(t){let o=Math.min(1,Math.max(0,t));q=o,W=o,k=true,ke(),gt(o,g),K=true;},getProgress(){return q},refresh(){clearTimeout(Le),rt(),fe&&!k&&Me();}}}if(typeof HTMLElement<"u"&&typeof customElements<"u"&&!customElements.get("scroll-draw")){class e extends HTMLElement{constructor(){super(...arguments);this.instance=null;}connectedCallback(){let r={},c=this.getAttribute("speed"),f=this.getAttribute("easing"),y=this.getAttribute("stagger"),w=this.getAttribute("direction"),E=this.getAttribute("selector");c&&(r.speed=parseFloat(c)),f&&(r.easing=f),y&&(r.stagger=parseFloat(y)),w&&(r.direction=w),E&&(r.selector=E),this.hasAttribute("fade")&&(r.fade=this.getAttribute("fade")!=="false"),this.instance=mt(this,r);}disconnectedCallback(){this.instance?.destroy(),this.instance=null;}}customElements.define("scroll-draw",e);}

package/dist/web-component/index.mjs

@@ -1,3 +1,3 @@
-function at({bounces:e=3,decay:s=.5}={}){let r=Math.max(1,Math.round(e)),i=Math.max(.01,Math.min(.99,s)),m=Math.sqrt(i),p=0,E=[];for(let y=0;y<r;y++){let $=Math.pow(m,y);E.push($),p+=$;}let b=[0],M=0;for(let y=0;y<r;y++)M+=E[y]/p,b.push(M);return y=>{if(y<=0)return 0;if(y>=1)return 1;for(let $=0;$<r;$++)if(y<=b[$+1]){let G=(y-b[$])/(b[$+1]-b[$]);if($===0)return G*(2-G);let h=1-Math.pow(i,$);return h+(1-h)*(2*G-1)*(2*G-1)}return 1}}function lt({amplitude:e=1,period:s=.4}={}){let r=Math.max(1,e),i=Math.max(.1,s),m=r<=1?i/4:i/(2*Math.PI)*Math.asin(1/r);return p=>p<=0?0:p>=1?1:r*Math.pow(2,-10*p)*Math.sin((p-m)*(2*Math.PI)/i)+1}var Le={linear:e=>e,"ease-in":e=>e*e,"ease-out":e=>e*(2-e),"ease-in-out":e=>e<.5?2*e*e:-1+(4-2*e)*e,spring:e=>1-Math.cos(e*Math.PI*2.5)*Math.pow(1-e,2.2),bounce:at(),elastic:lt()};function De(e="top bottom"){let s=e.trim();if(/^\d+(\.\d+)?%$/.test(s))return {element:"top",viewport:s};let[r="top",i="bottom"]=s.split(/\s+/).filter(Boolean);return {element:r,viewport:i}}function Xe(e,s,r,i){switch(i){case "top":return e+r;case "center":return e+r+s/2;case "bottom":return e+r+s;default:return e+r}}function Ue(e,s){if(/^\d+(\.\d+)?%$/.test(e))return s*(parseFloat(e)/100);switch(e){case "top":return 0;case "center":return s/2;case "bottom":return s;default:return s}}function $e(e){let s=e.tagName.toLowerCase();if(s==="rect"){let r=parseFloat(e.getAttribute("width")??"0"),i=parseFloat(e.getAttribute("height")??"0");return 2*(r+i)}if(s==="circle"){let r=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*r}return e.getTotalLength()}function ut(e,s,r){return Math.min(r,Math.max(s,e))}function ie(e,s,r,i){return r===s?0:ut((e-s)/(r-s)*i,0,1)}function Ie(e,s,r,i,m){let p=Xe(e.top,e.height,s,i.element)-Ue(i.viewport,r),E=Xe(e.top,e.height,s,m.element)-Ue(m.viewport,r);return {tStart:p,tEnd:E}}function je(e){let s=/^#([a-f\d])([a-f\d])([a-f\d])$/i.exec(e);if(s)return [parseInt(s[1]+s[1],16),parseInt(s[2]+s[2],16),parseInt(s[3]+s[3],16)];let r=/^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);if(r)return [parseInt(r[1],16),parseInt(r[2],16),parseInt(r[3],16)];let i=/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i.exec(e);return i?[parseInt(i[1]),parseInt(i[2]),parseInt(i[3])]:null}function xe(e,s,r){let i=je(e),m=je(s);return !i||!m?e:`rgb(${Math.round(i[0]+(m[0]-i[0])*r)},${Math.round(i[1]+(m[1]-i[1])*r)},${Math.round(i[2]+(m[2]-i[2])*r)})`}var Je={sketch:{easing:"ease-in",stagger:.1,speed:.9,fade:false},reveal:{easing:"ease-out",fade:true,speed:1.2,once:true},typewriter:{easing:"linear",stagger:.05,speed:1.5},cinematic:{easing:"ease-in-out",fade:true,speed:.75},spring:{easing:"spring",speed:1.1}};function Ke(e,s){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,s);}var Qe={linear:"linear","ease-in":"ease-in","ease-out":"ease-out","ease-in-out":"ease-in-out"},ct=0;function ft(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}function mt(e){let s=e.getAttribute("stroke"),r=e.getAttribute("fill");!s||s==="none"?Ke("Element has no stroke \u2014 path will not be visible.",e):r&&r!=="none"&&r!=="transparent"&&Ke("Element has a fill \u2014 it may obscure the stroke animation.",e);}function pt(e,s,r){let i=document.createElement("div");i.setAttribute("data-svg-scroll-draw-debug",""),i.style.cssText="position:fixed;pointer-events:none;z-index:9999;font-family:monospace;font-size:11px;top:0;left:0;right:0;bottom:0;";function m(){let p=r==="x"?window.scrollX:window.scrollY,E=e-p,b=s-p,M=r==="x";i.innerHTML=`
-      <div style="position:absolute;${M?`left:${E}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${E}px;left:0;right:0;border-top:2px dashed #22c55e;`}padding:2px 6px;color:#22c55e;background:rgba(0,0,0,.6)">\u25B6 start</div>
-      <div style="position:absolute;${M?`left:${b}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${b}px;left:0;right:0;border-top:2px dashed #ef4444;`}padding:2px 6px;color:#ef4444;background:rgba(0,0,0,.6)">\u25A0 end</div>`;}return document.body.appendChild(i),window.addEventListener("scroll",m,{passive:true}),m(),i}function Fe(e,s,r){let i=(s.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),m=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,p=>{let E=parseFloat(p),b=i[m++]??E;return String(+(E+(b-E)*r).toFixed(4))})}function Ye(e,s={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};let{preset:r,...i}=s,m=r?{...Je[r],...i}:i,p=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:E="path, polyline, line, polygon, rect, circle",speed:b=1,fade:M=false,easing:y="linear",trigger:$={},stagger:G=0,direction:h="forward",once:K=false,debug:Ze=false,axis:R="y",scrollContainer:Ae,autoReverse:pe=false,delay:ce=0,strokeColor:Q,strokeWidth:Y,fillOpacity:Z,waypoints:ee,velocityScale:de=false,threshold:Ce=0,rootMargin:Ne="0px",repeat:te=0,repeatDelay:Me=0,morphTo:H,clip:Se,autoplay:et=false,duration:tt=1e3,native:rt=true,onProgress:fe,onStart:ye,onComplete:ae,onEnter:Re,onLeave:He,onEnterBack:We,onLeaveBack:ze}=m,X=Se===true?"left":typeof Se=="string"?Se:false,re=typeof y=="function"?y:Le[y]??Le.linear,qe=De($.start??"top bottom"),Ve=De($.end??"bottom top"),I=typeof Ae=="string"?document.querySelector(Ae):Ae??null,W=Array.isArray(Q)?Q[0]:null,S=Array.isArray(Q)?Q[1]:typeof Q=="string"?Q:null,F=Array.isArray(Y)?Y[0]:null,k=Array.isArray(Y)?Y[1]:typeof Y=="number"?Y:null,O=Array.isArray(Z)?Z[0]:null,T=Array.isArray(Z)?Z[1]:typeof Z=="number"?Z:null;function ne(t){let n=t*100;switch(X){case "right":return `inset(0 0 0 ${100-n}%)`;case "top":return `inset(0 0 ${100-n}% 0)`;case "bottom":return `inset(${100-n}% 0 0 0)`;case "center":return `circle(${t*150}% at 50% 50%)`;default:return `inset(0 ${100-n}% 0 0)`}}let x=X?[]:Array.from(e.querySelectorAll(E)),w=[],z=[],B=0,U=0,A=false,N=false,v=0,he=false,q=-1,ge=-1,P=false,se=0,_=0,j,ke=null,J=new Set,be=-1,Ge=performance.now(),le=NaN;function me(){return I?R==="x"?I.scrollLeft:I.scrollTop:R==="x"?window.scrollX:window.scrollY}function Be(){return I?R==="x"?I.clientWidth:I.clientHeight:R==="x"?window.innerWidth:window.innerHeight}function _e(){let t=e.getBoundingClientRect(),n,l,g;if(I){let D=I.getBoundingClientRect();n=R==="x"?t.left-D.left+I.scrollLeft:t.top-D.top+I.scrollTop,l=R==="x"?t.width:t.height,g=me();}else n=R==="x"?t.left:t.top,l=R==="x"?t.width:t.height,g=me();let L=Ie({top:n,height:l},g,Be(),qe,Ve);B=L.tStart,U=L.tEnd,Ze&&process.env.NODE_ENV!=="production"&&(ke?.remove(),ke=pt(B,U,R));}function nt(t,n){if(e.style.setProperty("--scroll-draw-progress",String(t)),X){let l=n==="reverse"?1-t:t;e.style.clipPath=ne(l);return}x.forEach((l,g)=>{l.style.strokeDashoffset=n==="reverse"?`${w[g]*t}`:`${w[g]*(1-t)}`,M&&(l.style.opacity=n==="reverse"?`${1-t}`:`${t}`),W&&S?l.style.stroke=xe(W,S,t):S&&(l.style.stroke=S),F!==null&&k!==null?l.style.strokeWidth=`${F+(k-F)*t}`:k!==null&&(l.style.strokeWidth=`${k}`),O!==null&&T!==null?l.style.fillOpacity=`${O+(T-O)*t}`:T!==null&&(l.style.fillOpacity=`${T}`),H&&l.tagName.toLowerCase()==="path"&&z[g]&&l.setAttribute("d",Fe(z[g],H,t));});}function we(){if(e.style.setProperty("--scroll-draw-progress","0"),X){e.style.clipPath=ne(0);return}x.forEach((t,n)=>{t.style.strokeDasharray=`${w[n]}`,t.style.strokeDashoffset=h==="reverse"?"0":`${w[n]}`,M?t.style.opacity=h==="reverse"?"1":"0":t.style.opacity="",W&&(t.style.stroke=W),F!==null&&(t.style.strokeWidth=`${F}`),O!==null&&(t.style.fillOpacity=`${O}`),H&&t.tagName.toLowerCase()==="path"&&z[n]&&t.setAttribute("d",z[n]);});}if(x.forEach(t=>{mt(t);let n=$e(t);w.push(n),t.tagName.toLowerCase()==="path"?z.push(t.getAttribute("d")??""):z.push(""),p?(t.style.strokeDasharray=`${n}`,t.style.strokeDashoffset=h==="reverse"?`${n}`:"0",M&&(t.style.opacity="1"),S&&(t.style.stroke=S),k!==null&&(t.style.strokeWidth=`${k}`),T!==null&&(t.style.fillOpacity=`${T}`),H&&t.tagName.toLowerCase()==="path"&&t.setAttribute("d",H)):(t.style.strokeDasharray=`${n}`,t.style.strokeDashoffset=h==="reverse"?"0":`${n}`,M?t.style.opacity=h==="reverse"?"1":"0":t.style.opacity="",W&&(t.style.stroke=W),F!==null&&(t.style.strokeWidth=`${F}`),O!==null&&(t.style.fillOpacity=`${O}`));}),X){if(p)return e.style.clipPath=ne(1),ae?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=ne(0);}else if(p)return ae?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};function st(){return !(rt===false||!ft()||!x.length||typeof y!="string"||!(y in Qe)||X||R!=="y"||I||b!==1||G!==0||K||pe||de!==false||H||ee||te||ce>0||fe||ye||ae||Re||He||We||ze||Q!=null||Y!=null||Z!=null||($.start??"top bottom").trim()!=="top bottom"||($.end??"bottom top").trim()!=="bottom top")}function ot(){let t=`svg-scroll-draw-${++ct}`,n=h==="reverse"?"0":"var(--ssd-len)",l=h==="reverse"?"var(--ssd-len)":"0",g=`stroke-dashoffset:${n};`,L=`stroke-dashoffset:${l};`;M&&(g+=`opacity:${h==="reverse"?1:0};`,L+=`opacity:${h==="reverse"?0:1};`);let D=document.createElement("style");D.setAttribute("data-svg-scroll-draw",""),D.textContent=`@keyframes ${t}{from{${g}}to{${L}}}.${t}{animation-name:${t};animation-duration:auto;animation-timing-function:${Qe[y]};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(D);function C(o,u){o.style.setProperty("--ssd-len",String(w[u])),o.style.strokeDasharray=`${w[u]}`,o.style.strokeDashoffset="",o.style.opacity="",o.style.animationPlayState="",o.classList.add(t);}x.forEach(C);let a=false,c=-1;function f(){if(c>=0)return c;let o=e.getBoundingClientRect(),{tStart:u,tEnd:d}=Ie({top:o.top,height:o.height},me(),Be(),qe,Ve);return re(ie(me(),u,d,b))}return {destroy(){x.forEach(o=>{o.classList.remove(t),o.style.removeProperty("--ssd-len"),o.style.animationPlayState="";}),D.remove();},replay(){a=false,c=-1,x.forEach(C);},pause(){a=true,x.forEach(o=>{o.style.animationPlayState="paused";});},resume(){a&&(a=false,x.forEach(o=>{o.style.animationPlayState="running";}));},seek(o){let u=Math.min(1,Math.max(0,o));c=u,a=true,x.forEach((d,oe)=>{d.classList.remove(t),d.style.strokeDashoffset=h==="reverse"?`${w[oe]*u}`:`${w[oe]*(1-u)}`,M&&(d.style.opacity=h==="reverse"?`${1-u}`:`${u}`);});},getProgress(){return f()}}}if(st())return ot();function it(){let t=Math.max(1,tt),n=0,l=0;function g(f){let o=true;if(X){let u=Math.min(1,Math.max(0,f/t)),d=re(u);se=d,e.style.setProperty("--scroll-draw-progress",String(d)),e.style.clipPath=ne(h==="reverse"?1-d:d),fe?.(d),u<1&&(o=false);}else x.forEach((u,d)=>{let oe=d*G*t,ue=Math.min(1,Math.max(0,(f-oe)/t)),V=re(ue);u.style.strokeDashoffset=h==="reverse"?`${w[d]*V}`:`${w[d]*(1-V)}`,M&&(u.style.opacity=h==="reverse"?`${1-V}`:`${V}`),W&&S?u.style.stroke=xe(W,S,V):S&&(u.style.stroke=S),F!==null&&k!==null?u.style.strokeWidth=`${F+(k-F)*V}`:k!==null&&(u.style.strokeWidth=`${k}`),O!==null&&T!==null?u.style.fillOpacity=`${O+(T-O)*V}`:T!==null&&(u.style.fillOpacity=`${T}`),H&&u.tagName.toLowerCase()==="path"&&z[d]&&u.setAttribute("d",Fe(z[d],H,V)),d===0&&(fe?.(V),e.style.setProperty("--scroll-draw-progress",String(V))),ue<1&&(o=false);});if(ee){let u=Math.min(1,Math.max(0,f/t)),d=re(u);for(let oe in ee){let ue=parseFloat(oe);d>=ue&&!J.has(ue)&&(J.add(ue),ee[oe]?.());}}return o}function L(f){if(P)return;let o=f-n;N||(N=true,ye?.());let u=g(o);if(u&&!A){A=true,g(t*(1+Math.max(0,x.length-1)*G)),ae?.(),_<(te==="infinite"?1/0:te??0)&&(_++,j=setTimeout(()=>{n=performance.now(),N=false,A=false,J.clear(),we(),v=requestAnimationFrame(L);},Me));return}u||(v=requestAnimationFrame(L));}function D(){cancelAnimationFrame(v),clearTimeout(j),n=performance.now(),l=0,P=false,N=false,A=false,_=0,J.clear(),we(),v=requestAnimationFrame(L);}let C=new IntersectionObserver(f=>{f.forEach(o=>{o.isIntersecting&&!(K&&A)?D():!o.isIntersecting&&!K&&!A&&(cancelAnimationFrame(v),clearTimeout(j),n=null);});},{root:I??null,threshold:Ce,rootMargin:Ne}),a;function c(){clearTimeout(a),a=setTimeout(()=>{x.forEach((f,o)=>{w[o]=$e(f),f.style.strokeDasharray=`${w[o]}`;});},150);}return window.addEventListener("resize",c),window.addEventListener("orientationchange",c),ce>0?setTimeout(()=>C.observe(e),ce):C.observe(e),{destroy(){cancelAnimationFrame(v),clearTimeout(j),C.disconnect(),window.removeEventListener("resize",c),window.removeEventListener("orientationchange",c),clearTimeout(a);},replay(){_=0,D();},pause(){P||(P=true,l=performance.now()-n,cancelAnimationFrame(v));},resume(){P&&(P=false,n=performance.now()-l,v=requestAnimationFrame(L));},seek(f){let o=Math.min(1,Math.max(0,f));se=o,P=true,l=o*t,n=performance.now()-l,cancelAnimationFrame(v),g(l);},getProgress(){return se}}}if(et)return it();_e();function ve(){if(!he||P)return;let t=performance.now(),n=me(),l=b;if(de!==false){let a=t-Ge,c=a>0?Math.abs(n-(be<0?n:be))/a:0;l=b*Math.max(.2,1+c*(typeof de=="number"?de:1)*.04);}be=n,Ge=t;let g=pe?ge===-1||n>=ge?"forward":"reverse":h;ge=n;let L=U-B,D=true,C=L===0?0:(n-B)/L;if(isNaN(le)||(le<=0&&C>0?Re?.():le>0&&C<=0&&ze?.(),le<1&&C>=1?He?.():le>=1&&C<1&&We?.()),le=C,X){let a=re(ie(n,B,U,l));K&&!pe&&(q=Math.max(q,a),a=q),se=a,e.style.setProperty("--scroll-draw-progress",String(a));let c=g==="reverse"?1-a:a;e.style.clipPath=ne(c),fe?.(a),!N&&ie(n,B,U,l)>0&&(N=true,ye?.()),a>=1&&!A?(A=true,ae?.(),_<(te==="infinite"?1/0:te??0)&&(_++,j=setTimeout(()=>{q=-1,N=false,A=false,e.style.clipPath=ne(0);},Me))):a<1&&!K&&(A=false),v=requestAnimationFrame(ve);return}if(x.forEach((a,c)=>{let f=c*G*L,o=re(ie(n,B+f,U+f,l));K&&!pe&&(q=Math.max(q,o),o=q),se=o,a.style.strokeDashoffset=g==="reverse"?`${w[c]*o}`:`${w[c]*(1-o)}`,M&&(a.style.opacity=g==="reverse"?`${1-o}`:`${o}`),W&&S?a.style.stroke=xe(W,S,o):S&&(a.style.stroke=S),F!==null&&k!==null?a.style.strokeWidth=`${F+(k-F)*o}`:k!==null&&(a.style.strokeWidth=`${k}`),O!==null&&T!==null?a.style.fillOpacity=`${O+(T-O)*o}`:T!==null&&(a.style.fillOpacity=`${T}`),H&&a.tagName.toLowerCase()==="path"&&z[c]&&a.setAttribute("d",Fe(z[c],H,o)),c===0&&(fe?.(o),e.style.setProperty("--scroll-draw-progress",String(o))),o<1&&(D=false);}),ee){let a=re(ie(n,B,U,l));for(let c in ee){let f=parseFloat(c);a>=f&&!J.has(f)&&(J.add(f),ee[c]?.());}}!N&&ie(n,B,U,l)>0&&(N=true,ye?.()),D&&!A?(A=true,ae?.(),_<(te==="infinite"?1/0:te??0)&&(_++,j=setTimeout(()=>{q=-1,N=false,A=false,J.clear(),we();},Me))):!D&&!K&&(A=false),v=requestAnimationFrame(ve);}let Te=new IntersectionObserver(t=>{t.forEach(n=>{he=n.isIntersecting,he&&!P?v=requestAnimationFrame(ve):cancelAnimationFrame(v);});},{root:I??null,threshold:Ce,rootMargin:Ne}),Pe;function Ee(){clearTimeout(Pe),Pe=setTimeout(()=>{x.forEach((t,n)=>{w[n]=$e(t),t.style.strokeDasharray=`${w[n]}`;}),_e();},150);}return window.addEventListener("resize",Ee),window.addEventListener("orientationchange",Ee),ce>0?setTimeout(()=>Te.observe(e),ce):Te.observe(e),{destroy(){cancelAnimationFrame(v),clearTimeout(j),Te.disconnect(),window.removeEventListener("resize",Ee),window.removeEventListener("orientationchange",Ee),clearTimeout(Pe),ke?.remove();},replay(){q=-1,ge=-1,be=-1,N=false,A=false,_=0,P=false,J.clear(),clearTimeout(j),we();},pause(){P=true,cancelAnimationFrame(v);},resume(){P&&(P=false,he&&(v=requestAnimationFrame(ve)));},seek(t){let n=Math.min(1,Math.max(0,t));se=n,q=n,P=true,cancelAnimationFrame(v),nt(n,h);},getProgress(){return se}}}var Oe=class extends HTMLElement{constructor(){super(...arguments);this.instance=null;}connectedCallback(){let r={},i=this.getAttribute("speed"),m=this.getAttribute("easing"),p=this.getAttribute("stagger"),E=this.getAttribute("direction"),b=this.getAttribute("selector");i&&(r.speed=parseFloat(i)),m&&(r.easing=m),p&&(r.stagger=parseFloat(p)),E&&(r.direction=E),b&&(r.selector=b),this.hasAttribute("fade")&&(r.fade=this.getAttribute("fade")!=="false"),this.instance=Ye(this,r);}disconnectedCallback(){this.instance?.destroy(),this.instance=null;}};typeof customElements<"u"&&!customElements.get("scroll-draw")&&customElements.define("scroll-draw",Oe);
+function Et({bounces:e=3,decay:n=.5}={}){let s=Math.max(1,Math.round(e)),r=Math.max(.01,Math.min(.99,n)),c=Math.sqrt(r),f=0,y=[];for(let v=0;v<s;v++){let $=Math.pow(c,v);y.push($),f+=$;}let w=[0],E=0;for(let v=0;v<s;v++)E+=y[v]/f,w.push(E);return v=>{if(v<=0)return 0;if(v>=1)return 1;for(let $=0;$<s;$++)if(v<=w[$+1]){let B=(v-w[$])/(w[$+1]-w[$]);if($===0)return B*(2-B);let g=1-Math.pow(r,$);return g+(1-g)*(2*B-1)*(2*B-1)}return 1}}function St({amplitude:e=1,period:n=.4}={}){let s=Math.max(1,e),r=Math.max(.1,n),c=s<=1?r/4:r/(2*Math.PI)*Math.asin(1/s);return f=>f<=0?0:f>=1?1:s*Math.pow(2,-10*f)*Math.sin((f-c)*(2*Math.PI)/r)+1}var ve={linear:e=>e,"ease-in":e=>e*e,"ease-out":e=>e*(2-e),"ease-in-out":e=>e<.5?2*e*e:-1+(4-2*e)*e,spring:e=>1-Math.cos(e*Math.PI*2.5)*Math.pow(1-e,2.2),bounce:Et(),elastic:St()};function Ve(e="top bottom"){let n=e.trim();if(/^\d+(\.\d+)?%$/.test(n))return {element:"top",viewport:n};let[s="top",r="bottom"]=n.split(/\s+/).filter(Boolean);return {element:s,viewport:r}}function nt(e,n,s,r){switch(r){case "top":return e+s;case "center":return e+s+n/2;case "bottom":return e+s+n;default:return e+s}}function st(e,n){if(/^\d+(\.\d+)?%$/.test(e))return n*(parseFloat(e)/100);switch(e){case "top":return 0;case "center":return n/2;case "bottom":return n;default:return n}}function pe(e){let n=e.tagName.toLowerCase();if(n==="rect"){let s=parseFloat(e.getAttribute("width")??"0"),r=parseFloat(e.getAttribute("height")??"0");return 2*(s+r)}if(n==="circle"){let s=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*s}return e.getTotalLength()}function $t(e,n,s){return Math.min(s,Math.max(n,e))}function ue(e,n,s,r){return s===n?0:$t((e-n)/(s-n)*r,0,1)}function it(e,n,s){let r=e.getBoundingClientRect(),c=s==="x"?r.width:r.height;return n?{top:s==="x"?r.left-n.getBoundingClientRect().left+n.scrollLeft:r.top-n.getBoundingClientRect().top+n.scrollTop,height:c,scroll:0}:{top:s==="x"?r.left:r.top,height:c,scroll:s==="x"?window.scrollX:window.scrollY}}function ze(e,n,s,r,c){let f=nt(e.top,e.height,n,r.element)-st(r.viewport,s),y=nt(e.top,e.height,n,c.element)-st(c.viewport,s);return {tStart:f,tEnd:y}}function ot(e){let n=/^#([a-f\d])([a-f\d])([a-f\d])$/i.exec(e);if(n)return [parseInt(n[1]+n[1],16),parseInt(n[2]+n[2],16),parseInt(n[3]+n[3],16)];let s=/^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);if(s)return [parseInt(s[1],16),parseInt(s[2],16),parseInt(s[3],16)];let r=/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i.exec(e);return r?[parseInt(r[1]),parseInt(r[2]),parseInt(r[3])]:null}function De(e,n,s){let r=ot(e),c=ot(n);return !r||!c?e:`rgb(${Math.round(r[0]+(c[0]-r[0])*s)},${Math.round(r[1]+(c[1]-r[1])*s)},${Math.round(r[2]+(c[2]-r[2])*s)})`}var at={sketch:{easing:"ease-in",stagger:.1,speed:.9,fade:false},reveal:{easing:"ease-out",fade:true,speed:1.2,once:true},typewriter:{easing:"linear",stagger:.05,speed:1.5},cinematic:{easing:"ease-in-out",fade:true,speed:.75},spring:{easing:"spring",speed:1.1}};var Pe=typeof __SVG_SCROLL_DRAW_DEV__<"u"?__SVG_SCROLL_DRAW_DEV__:typeof process<"u"&&typeof process.env<"u"&&process.env.NODE_ENV!=="production";function de(e,...n){Pe&&console.warn(`[svg-scroll-draw] ${e}`,...n);}var xt="cubic-bezier(0.333333, 0, 0.666667, 0.333333)",Tt="cubic-bezier(0.333333, 0.666667, 0.666667, 1)",lt=33;function At(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timing-function: linear(0, 1)")}function Mt(e){let n=[];for(let s=0;s<lt;s++){let r=s/(lt-1);n.push(String(Math.round(e(r)*1e5)/1e5));}return `linear(${n.join(",")})`}function ut(e){switch(e){case "linear":return "linear";case "ease-in":return xt;case "ease-out":return Tt;case "ease-in-out":return At()?Mt(ve["ease-in-out"]):null;default:return null}}var kt=0;function Lt(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")&&CSS.supports("view-timeline-name: --x")}function Dt(e){let n=e.getAttribute("stroke"),s=e.getAttribute("fill");!n||n==="none"?de("Element has no stroke \u2014 path will not be visible.",e):s&&s!=="none"&&s!=="transparent"&&de("Element has a fill \u2014 it may obscure the stroke animation.",e);}function Pt(e,n,s){let r=document.createElement("div");r.setAttribute("data-svg-scroll-draw-debug",""),r.style.cssText="position:fixed;pointer-events:none;z-index:9999;font-family:monospace;font-size:11px;top:0;left:0;right:0;bottom:0;";function c(){let f=s==="x"?window.scrollX:window.scrollY,y=e-f,w=n-f,E=s==="x";r.innerHTML=`
+      <div style="position:absolute;${E?`left:${y}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${y}px;left:0;right:0;border-top:2px dashed #22c55e;`}padding:2px 6px;color:#22c55e;background:rgba(0,0,0,.6)">\u25B6 start</div>
+      <div style="position:absolute;${E?`left:${w}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${w}px;left:0;right:0;border-top:2px dashed #ef4444;`}padding:2px 6px;color:#ef4444;background:rgba(0,0,0,.6)">\u25A0 end</div>`;}return document.body.appendChild(r),window.addEventListener("scroll",c,{passive:true}),c(),{el:r,destroy(){window.removeEventListener("scroll",c),r.remove();}}}var ct=/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,ft=/[MmLlHhVvCcSsQqTtAaZz]/g;function Ct(e,n,s){if(!Pe)return;let r=(e.match(ft)??[]).join("").toUpperCase(),c=(n.match(ft)??[]).join("").toUpperCase(),f=(e.match(ct)??[]).length,y=(n.match(ct)??[]).length;if(r!==c){de(`morphTo: command sequence differs (${r||"\u2205"} \u2192 ${c||"\u2205"}). Interpolation is coordinate-for-coordinate, so the result will not reach the target shape. Redraw both paths with the same commands.`,s);return}f!==y&&de(`morphTo: coordinate count differs (${f} \u2192 ${y}). Extra coordinates are ignored and missing ones hold their start value, so the result will not reach the target shape.`,s);}function He(e,n,s){let r=(n.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),c=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,f=>{let y=parseFloat(f),w=r[c++]??y;return String(+(y+(w-y)*s).toFixed(4))})}function mt(e,n={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};let{preset:s,...r}=n,c=s?{...at[s],...r}:r,f=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:y="path, polyline, line, polygon, rect, circle",speed:w=1,fade:E=false,easing:v="linear",trigger:$={},stagger:B=0,direction:g="forward",once:ee=false,debug:pt=false,axis:te="y",scrollContainer:Ce,autoReverse:Ee=false,delay:he=0,strokeColor:re,strokeWidth:ne,fillOpacity:se,waypoints:oe,velocityScale:ye=false,threshold:We=0,rootMargin:qe="0px",repeat:ie=0,repeatDelay:Oe=0,morphTo:R,clip:Ie,autoplay:dt=false,duration:ht=1e3,native:yt=true,onProgress:ge,onStart:Se,onComplete:ce,onEnter:Ge,onLeave:Be,onEnterBack:Ue,onLeaveBack:je}=c,X=Ie===true?"left":typeof Ie=="string"?Ie:false,ae=typeof v=="function"?v:ve[v]??ve.linear,Qe=Ve($.start??"top bottom"),Xe=Ve($.end??"bottom top"),z=typeof Ce=="string"?document.querySelector(Ce):Ce??null,H=Array.isArray(re)?re[0]:null,L=Array.isArray(re)?re[1]:typeof re=="string"?re:null,O=Array.isArray(ne)?ne[0]:null,D=Array.isArray(ne)?ne[1]:typeof ne=="number"?ne:null,I=Array.isArray(se)?se[0]:null,P=Array.isArray(se)?se[1]:typeof se=="number"?se:null;function le(t){let o=t*100;switch(X){case "right":return `inset(0 0 0 ${100-o}%)`;case "top":return `inset(0 0 ${100-o}% 0)`;case "bottom":return `inset(${100-o}% 0 0 0)`;case "center":return `circle(${t*150}% at 50% 50%)`;default:return `inset(0 ${100-o}% 0 0)`}}let S=X?[]:Array.from(e.querySelectorAll(y)),p=[],F=[],U=0,Y=0,A=false,_=false,M=0,fe=false,W=-1,$e=-1,k=false,q=0,j=0,Z,Re=null;function Ye(){Re?.destroy(),Re=null;}let J=new Set,Ze=NaN,K=true,xe=-1,Je=performance.now(),me=NaN;function Fe(){return z?te==="x"?z.scrollLeft:z.scrollTop:te==="x"?window.scrollX:window.scrollY}function Ke(){return z?te==="x"?z.clientWidth:z.clientHeight:te==="x"?window.innerWidth:window.innerHeight}function et(){let t=it(e,z,te),o=ze(t,t.scroll,Ke(),Qe,Xe);U=o.tStart,Y=o.tEnd,pt&&Pe&&(Ye(),Re=Pt(U,Y,te));}function gt(t,o){if(e.style.setProperty("--scroll-draw-progress",String(t)),X){let l=o==="reverse"?1-t:t;e.style.clipPath=le(l);return}S.forEach((l,x)=>{l.style.strokeDashoffset=o==="reverse"?`${p[x]*t}`:`${p[x]*(1-t)}`,E&&(l.style.opacity=o==="reverse"?`${1-t}`:`${t}`),H&&L?l.style.stroke=De(H,L,t):L&&(l.style.stroke=L),O!==null&&D!==null?l.style.strokeWidth=`${O+(D-O)*t}`:D!==null&&(l.style.strokeWidth=`${D}`),I!==null&&P!==null?l.style.fillOpacity=`${I+(P-I)*t}`:P!==null&&(l.style.fillOpacity=`${P}`),R&&l.tagName.toLowerCase()==="path"&&F[x]&&l.setAttribute("d",He(F[x],R,t));});}function Te(){if(e.style.setProperty("--scroll-draw-progress","0"),X){e.style.clipPath=le(0);return}S.forEach((t,o)=>{t.style.strokeDasharray=`${p[o]}`,t.style.strokeDashoffset=g==="reverse"?"0":`${p[o]}`,E?t.style.opacity=g==="reverse"?"1":"0":t.style.opacity="",H&&(t.style.stroke=H),O!==null&&(t.style.strokeWidth=`${O}`),I!==null&&(t.style.fillOpacity=`${I}`),R&&t.tagName.toLowerCase()==="path"&&F[o]&&t.setAttribute("d",F[o]);});}if(S.forEach(t=>{Dt(t);let o=pe(t);p.push(o);let l=t.tagName.toLowerCase()==="path";l?F.push(t.getAttribute("d")??""):F.push(""),R&&(l?Ct(F[F.length-1],R,t):de(`morphTo only applies to <path> elements \u2014 ignored on <${t.tagName}>.`,t)),f?(t.style.strokeDasharray=`${o}`,t.style.strokeDashoffset=g==="reverse"?`${o}`:"0",E&&(t.style.opacity="1"),L&&(t.style.stroke=L),D!==null&&(t.style.strokeWidth=`${D}`),P!==null&&(t.style.fillOpacity=`${P}`),R&&t.tagName.toLowerCase()==="path"&&t.setAttribute("d",R)):(t.style.strokeDasharray=`${o}`,t.style.strokeDashoffset=g==="reverse"?"0":`${o}`,E?t.style.opacity=g==="reverse"?"1":"0":t.style.opacity="",H&&(t.style.stroke=H),O!==null&&(t.style.strokeWidth=`${O}`),I!==null&&(t.style.fillOpacity=`${I}`));}),X){if(f)return e.style.clipPath=le(1),ce?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=le(0);}else if(f)return ce?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};let tt=typeof v=="string"?ut(v):null;function bt(){return !(yt===false||!Lt()||!S.length||!tt||X||te!=="y"||z||w!==1||B!==0||ee||Ee||ye!==false||R||oe||ie||he>0||ge||Se||ce||Ge||Be||Ue||je||re!=null||ne!=null||se!=null||($.start??"top bottom").trim()!=="top bottom"||($.end??"bottom top").trim()!=="bottom top")}function wt(){let t=++kt,o=`svg-scroll-draw-${t}`,l=`svg-scroll-draw-host-${t}`,x=`--svg-scroll-draw-${t}`,Q=g==="reverse"?"0":"var(--ssd-len)",G=g==="reverse"?"var(--ssd-len)":"0",V=`stroke-dashoffset:${Q};`,u=`stroke-dashoffset:${G};`;E&&(V+=`opacity:${g==="reverse"?1:0};`,u+=`opacity:${g==="reverse"?0:1};`);let m=document.createElement("style");m.setAttribute("data-svg-scroll-draw",""),m.textContent=`@keyframes ${o}{from{${V}}to{${u}}}.${l}{view-timeline-name:${x};view-timeline-axis:block;}.${o}{animation-name:${o};animation-duration:auto;animation-timing-function:${tt};animation-fill-mode:both;animation-timeline:${x};animation-range:cover 0% cover 100%;}`,document.head.appendChild(m),e.classList.add(l);function T(i,b){i.style.setProperty("--ssd-len",String(p[b])),i.style.strokeDasharray=`${p[b]}`,i.style.strokeDashoffset="",i.style.opacity="",i.style.animationPlayState="",i.classList.add(o);}S.forEach(T);let a=false,d=-1;function h(){if(d>=0)return d;let i=e.getBoundingClientRect(),{tStart:b,tEnd:N}=ze({top:i.top,height:i.height},Fe(),Ke(),Qe,Xe);return ae(ue(Fe(),b,N,w))}return {destroy(){e.classList.remove(l),S.forEach(i=>{i.classList.remove(o),i.style.removeProperty("--ssd-len"),i.style.animationPlayState="";}),m.remove();},replay(){a=false,d=-1,S.forEach(T);},pause(){a=true,S.forEach(i=>{i.style.animationPlayState="paused";});},resume(){a&&(a=false,S.forEach(i=>{i.style.animationPlayState="running";}));},seek(i){let b=Math.min(1,Math.max(0,i));d=b,a=true,S.forEach((N,C)=>{N.classList.remove(o),N.style.strokeDashoffset=g==="reverse"?`${p[C]*b}`:`${p[C]*(1-b)}`,E&&(N.style.opacity=g==="reverse"?`${1-b}`:`${b}`);});},getProgress(){return h()},refresh(){S.forEach((i,b)=>{p[b]=pe(i),i.style.setProperty("--ssd-len",String(p[b])),i.style.strokeDasharray=`${p[b]}`;});}}}if(bt())return wt();function vt(){let t=Math.max(1,ht),o=0,l=0,x=false;function Q(a){let d=true;if(X){let h=Math.min(1,Math.max(0,a/t)),i=ae(h);q=i,e.style.setProperty("--scroll-draw-progress",String(i)),e.style.clipPath=le(g==="reverse"?1-i:i),ge?.(i),h<1&&(d=false);}else S.forEach((h,i)=>{let b=i*B*t,N=Math.min(1,Math.max(0,(a-b)/t)),C=ae(N);h.style.strokeDashoffset=g==="reverse"?`${p[i]*C}`:`${p[i]*(1-C)}`,E&&(h.style.opacity=g==="reverse"?`${1-C}`:`${C}`),H&&L?h.style.stroke=De(H,L,C):L&&(h.style.stroke=L),O!==null&&D!==null?h.style.strokeWidth=`${O+(D-O)*C}`:D!==null&&(h.style.strokeWidth=`${D}`),I!==null&&P!==null?h.style.fillOpacity=`${I+(P-I)*C}`:P!==null&&(h.style.fillOpacity=`${P}`),R&&h.tagName.toLowerCase()==="path"&&F[i]&&h.setAttribute("d",He(F[i],R,C)),i===0&&(q=C,ge?.(C),e.style.setProperty("--scroll-draw-progress",String(C))),N<1&&(d=false);});if(oe){let h=Math.min(1,Math.max(0,a/t)),i=ae(h);for(let b in oe){let N=parseFloat(b);i>=N&&!J.has(N)&&(J.add(N),oe[b]?.());}}return d}function G(a){if(k)return;let d=a-o;_||(_=true,Se?.());let h=Q(d);if(h&&!A){A=true,Q(t*(1+Math.max(0,S.length-1)*B)),ce?.(),j<(ie==="infinite"?1/0:ie??0)&&(j++,Z=setTimeout(()=>{o=performance.now(),_=false,A=false,J.clear(),Te(),M=requestAnimationFrame(G);},Oe));return}h||(M=requestAnimationFrame(G));}function V(){cancelAnimationFrame(M),clearTimeout(Z),o=performance.now(),l=0,k=false,_=false,A=false,j=0,x=true,q=0,J.clear(),Te(),M=requestAnimationFrame(G);}let u=new IntersectionObserver(a=>{a.forEach(d=>{d.isIntersecting&&!(ee&&A)?V():!d.isIntersecting&&!ee&&!A&&(cancelAnimationFrame(M),clearTimeout(Z),x=false);});},{root:z??null,threshold:We,rootMargin:qe}),m;function T(){clearTimeout(m),m=setTimeout(()=>{S.forEach((a,d)=>{p[d]=pe(a),a.style.strokeDasharray=`${p[d]}`;});},150);}return window.addEventListener("resize",T),window.addEventListener("orientationchange",T),he>0?setTimeout(()=>u.observe(e),he):u.observe(e),{destroy(){cancelAnimationFrame(M),clearTimeout(Z),u.disconnect(),window.removeEventListener("resize",T),window.removeEventListener("orientationchange",T),clearTimeout(m);},replay(){j=0,V();},pause(){k||!x||(k=true,l=performance.now()-o,cancelAnimationFrame(M));},resume(){k&&(k=false,x=true,o=performance.now()-l,M=requestAnimationFrame(G));},seek(a){let d=Math.min(1,Math.max(0,a));q=d,k=true,l=d*t,o=performance.now()-l,cancelAnimationFrame(M),Q(l);},getProgress(){return q},refresh(){clearTimeout(m),S.forEach((a,d)=>{p[d]=pe(a),a.style.strokeDasharray=`${p[d]}`;});}}}if(dt)return vt();et();function Ae(){if(!fe||k)return;let t=performance.now(),o=Fe();if(!K&&ye===false&&o===Ze){M=requestAnimationFrame(Ae);return}K=false,Ze=o;let l=w;if(ye!==false){let u=t-Je,m=u>0?Math.abs(o-(xe<0?o:xe))/u:0;l=w*Math.max(.2,1+m*(typeof ye=="number"?ye:1)*.04);}xe=o,Je=t;let x=Ee?$e===-1||o>=$e?"forward":"reverse":g;$e=o;let Q=Y-U,G=true,V=Q===0?0:(o-U)/Q;if(isNaN(me)||(me<=0&&V>0?Ge?.():me>0&&V<=0&&je?.(),me<1&&V>=1?Be?.():me>=1&&V<1&&Ue?.()),me=V,X){let u=ae(ue(o,U,Y,l));ee&&!Ee&&(W=Math.max(W,u),u=W),q=u,e.style.setProperty("--scroll-draw-progress",String(u));let m=x==="reverse"?1-u:u;e.style.clipPath=le(m),ge?.(u),!_&&ue(o,U,Y,l)>0&&(_=true,Se?.()),u>=1&&!A?(A=true,ce?.(),j<(ie==="infinite"?1/0:ie??0)&&(j++,Z=setTimeout(()=>{W=-1,_=false,A=false,e.style.clipPath=le(0);},Oe))):u<1&&!ee&&(A=false),M=requestAnimationFrame(Ae);return}if(S.forEach((u,m)=>{let T=m*B*Q,a=ae(ue(o,U+T,Y+T,l));ee&&!Ee&&(W=Math.max(W,a),a=W),q=a,u.style.strokeDashoffset=x==="reverse"?`${p[m]*a}`:`${p[m]*(1-a)}`,E&&(u.style.opacity=x==="reverse"?`${1-a}`:`${a}`),H&&L?u.style.stroke=De(H,L,a):L&&(u.style.stroke=L),O!==null&&D!==null?u.style.strokeWidth=`${O+(D-O)*a}`:D!==null&&(u.style.strokeWidth=`${D}`),I!==null&&P!==null?u.style.fillOpacity=`${I+(P-I)*a}`:P!==null&&(u.style.fillOpacity=`${P}`),R&&u.tagName.toLowerCase()==="path"&&F[m]&&u.setAttribute("d",He(F[m],R,a)),m===0&&(ge?.(a),e.style.setProperty("--scroll-draw-progress",String(a))),a<1&&(G=false);}),oe){let u=ae(ue(o,U,Y,l));for(let m in oe){let T=parseFloat(m);u>=T&&!J.has(T)&&(J.add(T),oe[m]?.());}}!_&&ue(o,U,Y,l)>0&&(_=true,Se?.()),G&&!A?(A=true,ce?.(),j<(ie==="infinite"?1/0:ie??0)&&(j++,Z=setTimeout(()=>{W=-1,_=false,A=false,J.clear(),Te(),K=true;},Oe))):!G&&!ee&&(A=false),M=requestAnimationFrame(Ae);}let Ne=false;function Me(){Ne||(Ne=true,M=requestAnimationFrame(function(){Ae();}));}function ke(){Ne=false,cancelAnimationFrame(M);}let _e=new IntersectionObserver(t=>{t.forEach(o=>{fe=o.isIntersecting,fe&&!k?(K=true,Me()):ke();});},{root:z??null,threshold:We,rootMargin:qe});function rt(){S.forEach((t,o)=>{p[o]=pe(t),t.style.strokeDasharray=`${p[o]}`;}),et(),K=true;}let Le;function be(){clearTimeout(Le),Le=setTimeout(rt,150);}window.addEventListener("resize",be),window.addEventListener("orientationchange",be);let we;return typeof ResizeObserver<"u"&&(we=new ResizeObserver(()=>be()),we.observe(document.body),we.observe(document.documentElement),we.observe(e)),he>0?setTimeout(()=>_e.observe(e),he):_e.observe(e),{destroy(){cancelAnimationFrame(M),clearTimeout(Z),ke(),_e.disconnect(),we?.disconnect(),window.removeEventListener("resize",be),window.removeEventListener("orientationchange",be),clearTimeout(Le),Ye();},replay(){W=-1,$e=-1,xe=-1,_=false,A=false,j=0,k=false,q=0,J.clear(),clearTimeout(Z),Te(),K=true,fe&&Me();},pause(){k=true,ke();},resume(){k&&(k=false,K=true,fe&&Me());},seek(t){let o=Math.min(1,Math.max(0,t));q=o,W=o,k=true,ke(),gt(o,g),K=true;},getProgress(){return q},refresh(){clearTimeout(Le),rt(),fe&&!k&&Me();}}}if(typeof HTMLElement<"u"&&typeof customElements<"u"&&!customElements.get("scroll-draw")){class e extends HTMLElement{constructor(){super(...arguments);this.instance=null;}connectedCallback(){let r={},c=this.getAttribute("speed"),f=this.getAttribute("easing"),y=this.getAttribute("stagger"),w=this.getAttribute("direction"),E=this.getAttribute("selector");c&&(r.speed=parseFloat(c)),f&&(r.easing=f),y&&(r.stagger=parseFloat(y)),w&&(r.direction=w),E&&(r.selector=E),this.hasAttribute("fade")&&(r.fade=this.getAttribute("fade")!=="false"),this.instance=mt(this,r);}disconnectedCallback(){this.instance?.destroy(),this.instance=null;}}customElements.define("scroll-draw",e);}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "svg-scroll-draw",
-  "version": "2.9.0",
-  "description": "Scroll-driven SVG path drawing animation library — zero dependencies, ~4.4 KB gzipped, works with React, Vue, and vanilla JS",
+  "version": "2.10.0",
+  "description": "Scroll-driven animation for the web \u2014 draw SVG paths, reveal elements, pin sections, scrub video. Zero dependencies, native CSS fast path, works with React, Vue, Svelte, Solid, Angular, Astro and vanilla JS",
   "keywords": [
     "svg",
     "scroll",
@@ -176,13 +176,21 @@
   "scripts": {
     "build": "tsup",
     "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "prepare": "npm run build",
+    "size": "node scripts/size.mjs",
+    "size:check": "node scripts/size.mjs --check",
     "test": "vitest run",
     "test:watch": "vitest",
     "test:coverage": "vitest run --coverage",
-    "prepublishOnly": "npm run build && npm run test"
+    "prepublishOnly": "npm run typecheck && npm run build && npm run test && npm run size:check",
+    "test:e2e": "playwright test --config e2e/playwright.config.ts",
+    "test:e2e:ui": "playwright test --config e2e/playwright.config.ts --ui"
   },
   "devDependencies": {
+    "@playwright/test": "^1.62.1",
     "@types/react": "^18.0.0",
+    "esbuild": "^0.27.7",
     "@vitest/coverage-v8": "^2.0.0",
     "jsdom": "^25.0.0",
     "solid-js": "^1.9.13",
@@ -191,10 +199,19 @@
     "vitest": "^2.0.0",
     "vue": "^3.5.34"
   },
+  "sideEffects": [
+    "./dist/web-component/*",
+    "./dist/cdn/*",
+    "./src/web-component/*",
+    "./src/cdn.ts"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
   "peerDependencies": {
     "react": ">=17",
-    "vue": ">=3",
-    "solid-js": ">=1"
+    "solid-js": ">=1",
+    "vue": ">=3"
   },
   "peerDependenciesMeta": {
     "react": {