svg-scroll-draw 1.2.0 → 1.4.0

package/dist/react/index.mjs

@@ -1,3 +1,3 @@
-import {useState,useRef,useEffect}from'react';import {jsx}from'react/jsx-runtime';function _e({bounces:e=3,decay:r=.5}={}){let n=Math.max(1,Math.round(e)),s=Math.max(.01,Math.min(.99,r)),a=Math.sqrt(s),u=0,f=[];for(let i=0;i<n;i++){let m=Math.pow(a,i);f.push(m),u+=m;}let y=[0],b=0;for(let i=0;i<n;i++)b+=f[i]/u,y.push(b);return i=>{if(i<=0)return 0;if(i>=1)return 1;for(let m=0;m<n;m++)if(i<=y[m+1]){let E=(i-y[m])/(y[m+1]-y[m]);if(m===0)return E*(2-E);let w=1-Math.pow(s,m);return w+(1-w)*(2*E-1)*(2*E-1)}return 1}}function je({amplitude:e=1,period:r=.4}={}){let n=Math.max(1,e),s=Math.max(.1,r),a=n<=1?s/4:s/(2*Math.PI)*Math.asin(1/n);return u=>u<=0?0:u>=1?1:n*Math.pow(2,-10*u)*Math.sin((u-a)*(2*Math.PI)/s)+1}var oe={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:_e(),elastic:je()};function ie(e="top bottom"){let r=e.trim();if(/^\d+(\.\d+)?%$/.test(r))return {element:"top",viewport:r};let[n="top",s="bottom"]=r.split(/\s+/).filter(Boolean);return {element:n,viewport:s}}function Fe(e,r,n,s){switch(s){case "top":return e+n;case "center":return e+n+r/2;case "bottom":return e+n+r;default:return e+n}}function Ne(e,r){if(/^\d+(\.\d+)?%$/.test(e))return r*(parseFloat(e)/100);switch(e){case "top":return 0;case "center":return r/2;case "bottom":return r;default:return r}}function Ae(e){let r=e.tagName.toLowerCase();if(r==="rect"){let n=parseFloat(e.getAttribute("width")??"0"),s=parseFloat(e.getAttribute("height")??"0");return 2*(n+s)}if(r==="circle"){let n=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*n}return e.getTotalLength()}function Ye(e,r,n){return Math.min(n,Math.max(r,e))}function q(e,r,n,s){return n===r?0:Ye((e-r)/(n-r)*s,0,1)}function me(e,r,n,s,a){let u=Fe(e.top,e.height,r,s.element)-Ne(s.viewport,n),f=Fe(e.top,e.height,r,a.element)-Ne(a.viewport,n);return {tStart:u,tEnd:f}}function ze(e){let r=/^#([a-f\d])([a-f\d])([a-f\d])$/i.exec(e);if(r)return [parseInt(r[1]+r[1],16),parseInt(r[2]+r[2],16),parseInt(r[3]+r[3],16)];let n=/^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);if(n)return [parseInt(n[1],16),parseInt(n[2],16),parseInt(n[3],16)];let s=/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i.exec(e);return s?[parseInt(s[1]),parseInt(s[2]),parseInt(s[3])]:null}function ke(e,r,n){let s=ze(e),a=ze(r);return !s||!a?e:`rgb(${Math.round(s[0]+(a[0]-s[0])*n)},${Math.round(s[1]+(a[1]-s[1])*n)},${Math.round(s[2]+(a[2]-s[2])*n)})`}function We(e,r){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,r);}var He={linear:"linear","ease-in":"ease-in","ease-out":"ease-out","ease-in-out":"ease-in-out"},Je=0;function Ke(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}function Qe(e){let r=e.getAttribute("stroke"),n=e.getAttribute("fill");!r||r==="none"?We("Element has no stroke \u2014 path will not be visible.",e):n&&n!=="none"&&n!=="transparent"&&We("Element has a fill \u2014 it may obscure the stroke animation.",e);}function Ze(e,r,n){let s=document.createElement("div");s.setAttribute("data-svg-scroll-draw-debug",""),s.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 a(){let u=n==="x"?window.scrollX:window.scrollY,f=e-u,y=r-u,b=n==="x";s.innerHTML=`
-      <div style="position:absolute;${b?`left:${f}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${f}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;${b?`left:${y}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${y}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(s),window.addEventListener("scroll",a,{passive:true}),a(),s}function qe(e,r,n){let s=(r.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),a=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,u=>{let f=parseFloat(u),y=s[a++]??f;return String(+(f+(y-f)*n).toFixed(4))})}function Ve(e,r={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};let n=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:s="path, polyline, line, polygon, rect, circle",speed:a=1,fade:u=false,easing:f="linear",trigger:y={},stagger:b=0,direction:i="forward",once:m=false,debug:E=false,axis:w="y",scrollContainer:ae,autoReverse:j=false,delay:re=0,strokeColor:A,strokeWidth:$,fillOpacity:D,waypoints:ne,velocityScale:Y=false,threshold:pe=0,rootMargin:de="0px",repeat:z=0,repeatDelay:J=0,morphTo:g,clip:k,native:le=true,onProgress:K,onStart:V,onComplete:W}=r,Q=k===true?"left":typeof k=="string"?k:false,ye=typeof f=="function"?f:oe[f]??oe.linear,Pe=ie(y.start??"top bottom"),De=ie(y.end??"bottom top"),T=typeof ae=="string"?document.querySelector(ae):ae??null,G=Array.isArray(A)?A[0]:null,L=Array.isArray(A)?A[1]:typeof A=="string"?A:null,C=Array.isArray($)?$[0]:null,I=Array.isArray($)?$[1]:typeof $=="number"?$:null,O=Array.isArray(D)?D[0]:null,R=Array.isArray(D)?D[1]:typeof D=="number"?D:null;function se(t){let o=t*100;switch(Q){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 M=Q?[]:Array.from(e.querySelectorAll(s)),x=[],B=[],U=0,X=0,H=false,Z=false,_=0,ge=false,F=-1,he=-1,ee=false,be=0,ue=0,we,$e=null,ve=new Set,Ee=-1,Le=performance.now();function ce(){return T?w==="x"?T.scrollLeft:T.scrollTop:w==="x"?window.scrollX:window.scrollY}function Ce(){return T?w==="x"?T.clientWidth:T.clientHeight:w==="x"?window.innerWidth:window.innerHeight}function Ie(){let t=e.getBoundingClientRect(),o,c,v;if(T){let P=T.getBoundingClientRect();o=w==="x"?t.left-P.left+T.scrollLeft:t.top-P.top+T.scrollTop,c=w==="x"?t.width:t.height,v=ce();}else o=w==="x"?t.left:t.top,c=w==="x"?t.width:t.height,v=ce();let te=me({top:o,height:c},v,Ce(),Pe,De);U=te.tStart,X=te.tEnd,E&&process.env.NODE_ENV!=="production"&&($e?.remove(),$e=Ze(U,X,w));}function Be(t,o){if(e.style.setProperty("--scroll-draw-progress",String(t)),Q){let c=o==="reverse"?1-t:t;e.style.clipPath=se(c);return}M.forEach((c,v)=>{c.style.strokeDashoffset=o==="reverse"?`${x[v]*t}`:`${x[v]*(1-t)}`,u&&(c.style.opacity=o==="reverse"?`${1-t}`:`${t}`),G&&L?c.style.stroke=ke(G,L,t):L&&(c.style.stroke=L),C!==null&&I!==null?c.style.strokeWidth=`${C+(I-C)*t}`:I!==null&&(c.style.strokeWidth=`${I}`),O!==null&&R!==null?c.style.fillOpacity=`${O+(R-O)*t}`:R!==null&&(c.style.fillOpacity=`${R}`),g&&c.tagName.toLowerCase()==="path"&&B[v]&&c.setAttribute("d",qe(B[v],g,t));});}function Oe(){if(e.style.setProperty("--scroll-draw-progress","0"),Q){e.style.clipPath=se(0);return}M.forEach((t,o)=>{t.style.strokeDasharray=`${x[o]}`,t.style.strokeDashoffset=i==="reverse"?"0":`${x[o]}`,u?t.style.opacity=i==="reverse"?"1":"0":t.style.opacity="",G&&(t.style.stroke=G),C!==null&&(t.style.strokeWidth=`${C}`),O!==null&&(t.style.fillOpacity=`${O}`),g&&t.tagName.toLowerCase()==="path"&&B[o]&&t.setAttribute("d",B[o]);});}if(M.forEach(t=>{Qe(t);let o=Ae(t);x.push(o),t.tagName.toLowerCase()==="path"?B.push(t.getAttribute("d")??""):B.push(""),n?(t.style.strokeDasharray=`${o}`,t.style.strokeDashoffset=i==="reverse"?`${o}`:"0",u&&(t.style.opacity="1"),L&&(t.style.stroke=L),I!==null&&(t.style.strokeWidth=`${I}`),R!==null&&(t.style.fillOpacity=`${R}`),g&&t.tagName.toLowerCase()==="path"&&t.setAttribute("d",g)):(t.style.strokeDasharray=`${o}`,t.style.strokeDashoffset=i==="reverse"?"0":`${o}`,u?t.style.opacity=i==="reverse"?"1":"0":t.style.opacity="",G&&(t.style.stroke=G),C!==null&&(t.style.strokeWidth=`${C}`),O!==null&&(t.style.fillOpacity=`${O}`));}),Q){if(n)return e.style.clipPath=se(1),W?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=se(0);}else if(n)return W?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};function Ue(){return !(le===false||!Ke()||!M.length||typeof f!="string"||!(f in He)||Q||w!=="y"||T||a!==1||b!==0||m||j||Y!==false||g||ne||z||re>0||K||V||W||A!=null||$!=null||D!=null||(y.start??"top bottom").trim()!=="top bottom"||(y.end??"bottom top").trim()!=="bottom top")}function Xe(){let t=`svg-scroll-draw-${++Je}`,o=i==="reverse"?"0":"var(--ssd-len)",c=i==="reverse"?"var(--ssd-len)":"0",v=`stroke-dashoffset:${o};`,te=`stroke-dashoffset:${c};`;u&&(v+=`opacity:${i==="reverse"?1:0};`,te+=`opacity:${i==="reverse"?0:1};`);let P=document.createElement("style");P.setAttribute("data-svg-scroll-draw",""),P.textContent=`@keyframes ${t}{from{${v}}to{${te}}}.${t}{animation-name:${t};animation-duration:auto;animation-timing-function:${He[f]};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(P);function l(d,N){d.style.setProperty("--ssd-len",String(x[N])),d.style.strokeDasharray=`${x[N]}`,d.style.strokeDashoffset="",d.style.opacity="",d.style.animationPlayState="",d.classList.add(t);}M.forEach(l);let p=false,S=-1;function h(){if(S>=0)return S;let d=e.getBoundingClientRect(),{tStart:N,tEnd:fe}=me({top:d.top,height:d.height},ce(),Ce(),Pe,De);return ye(q(ce(),N,fe,a))}return {destroy(){M.forEach(d=>{d.classList.remove(t),d.style.removeProperty("--ssd-len"),d.style.animationPlayState="";}),P.remove();},replay(){p=false,S=-1,M.forEach(l);},pause(){p=true,M.forEach(d=>{d.style.animationPlayState="paused";});},resume(){p&&(p=false,M.forEach(d=>{d.style.animationPlayState="running";}));},seek(d){let N=Math.min(1,Math.max(0,d));S=N,p=true,M.forEach((fe,Re)=>{fe.classList.remove(t),fe.style.strokeDashoffset=i==="reverse"?`${x[Re]*N}`:`${x[Re]*(1-N)}`,u&&(fe.style.opacity=i==="reverse"?`${1-N}`:`${N}`);});},getProgress(){return h()}}}if(Ue())return Xe();Ie();function xe(){if(!ge||ee)return;let t=performance.now(),o=ce(),c=a;if(Y!==false){let l=t-Le,p=l>0?Math.abs(o-(Ee<0?o:Ee))/l:0;c=a*Math.max(.2,1+p*(typeof Y=="number"?Y:1)*.04);}Ee=o,Le=t;let v=j?he===-1||o>=he?"forward":"reverse":i;he=o;let te=X-U,P=true;if(Q){let l=ye(q(o,U,X,c));m&&!j&&(F=Math.max(F,l),l=F),be=l,e.style.setProperty("--scroll-draw-progress",String(l));let p=v==="reverse"?1-l:l;e.style.clipPath=se(p),K?.(l),!Z&&q(o,U,X,c)>0&&(Z=true,V?.()),l>=1&&!H?(H=true,W?.(),ue<(z==="infinite"?1/0:z??0)&&(ue++,we=setTimeout(()=>{F=-1,Z=false,H=false,e.style.clipPath=se(0);},J))):l<1&&!m&&(H=false),_=requestAnimationFrame(xe);return}if(M.forEach((l,p)=>{let S=p*b*te,h=ye(q(o,U+S,X+S,c));m&&!j&&(F=Math.max(F,h),h=F),be=h,l.style.strokeDashoffset=v==="reverse"?`${x[p]*h}`:`${x[p]*(1-h)}`,u&&(l.style.opacity=v==="reverse"?`${1-h}`:`${h}`),G&&L?l.style.stroke=ke(G,L,h):L&&(l.style.stroke=L),C!==null&&I!==null?l.style.strokeWidth=`${C+(I-C)*h}`:I!==null&&(l.style.strokeWidth=`${I}`),O!==null&&R!==null?l.style.fillOpacity=`${O+(R-O)*h}`:R!==null&&(l.style.fillOpacity=`${R}`),g&&l.tagName.toLowerCase()==="path"&&B[p]&&l.setAttribute("d",qe(B[p],g,h)),p===0&&(K?.(h),e.style.setProperty("--scroll-draw-progress",String(h))),h<1&&(P=false);}),ne){let l=ye(q(o,U,X,c));for(let p in ne){let S=parseFloat(p);l>=S&&!ve.has(S)&&(ve.add(S),ne[p]?.());}}!Z&&q(o,U,X,c)>0&&(Z=true,V?.()),P&&!H?(H=true,W?.(),ue<(z==="infinite"?1/0:z??0)&&(ue++,we=setTimeout(()=>{F=-1,Z=false,H=false,ve.clear(),Oe();},J))):!P&&!m&&(H=false),_=requestAnimationFrame(xe);}let Te=new IntersectionObserver(t=>{t.forEach(o=>{ge=o.isIntersecting,ge&&!ee?_=requestAnimationFrame(xe):cancelAnimationFrame(_);});},{root:T??null,threshold:pe,rootMargin:de}),Me;function Se(){clearTimeout(Me),Me=setTimeout(()=>{M.forEach((t,o)=>{x[o]=Ae(t),t.style.strokeDasharray=`${x[o]}`;}),Ie();},150);}return window.addEventListener("resize",Se),window.addEventListener("orientationchange",Se),re>0?setTimeout(()=>Te.observe(e),re):Te.observe(e),{destroy(){cancelAnimationFrame(_),clearTimeout(we),Te.disconnect(),window.removeEventListener("resize",Se),window.removeEventListener("orientationchange",Se),clearTimeout(Me),$e?.remove();},replay(){F=-1,he=-1,Ee=-1,Z=false,H=false,ue=0,ee=false,ve.clear(),clearTimeout(we),Oe();},pause(){ee=true,cancelAnimationFrame(_);},resume(){ee&&(ee=false,ge&&(_=requestAnimationFrame(xe)));},seek(t){let o=Math.min(1,Math.max(0,t));be=o,F=o,ee=true,cancelAnimationFrame(_),Be(o,i);},getProgress(){return be}}}function rt(e,r={}){let[n,s]=useState(0),a=useRef(r);a.current=r;let u=useRef(-1);return useEffect(()=>{if(typeof window>"u")return;if(window.matchMedia("(prefers-reduced-motion: reduce)").matches){s(1);return}let f=typeof e=="string"?document.querySelector(e):e.current;if(!f)return;let y=f,{axis:b="y",scrollContainer:i,trigger:m={}}=a.current,E=typeof i=="string"?document.querySelector(i):i??null,w=ie(m.start??"top bottom"),ae=ie(m.end??"bottom top"),j=0,re=0,A=false,$=0;function D(){return E?b==="x"?E.scrollLeft:E.scrollTop:b==="x"?window.scrollX:window.scrollY}function ne(){return E?b==="x"?E.clientWidth:E.clientHeight:b==="x"?window.innerWidth:window.innerHeight}function Y(){let g=y.getBoundingClientRect(),k=D(),le=b==="x"?g.left:g.top,K=b==="x"?g.width:g.height,V=me({top:le,height:K},k,ne(),w,ae);j=V.tStart,re=V.tEnd;}function pe(){if(!A)return;let{speed:g=1,easing:k="linear",once:le=false}=a.current,K=typeof k=="function"?k:oe[k]??oe.linear,V=q(D(),j,re,g),W=K(V);le&&(u.current=Math.max(u.current,W),W=u.current),s(W),$=requestAnimationFrame(pe);}let de=new IntersectionObserver(g=>{g.forEach(k=>{A=k.isIntersecting,A?$=requestAnimationFrame(pe):cancelAnimationFrame($);});},{root:E??null,threshold:0});Y(),de.observe(y);let z;function J(){clearTimeout(z),z=setTimeout(Y,150);}return window.addEventListener("resize",J),window.addEventListener("orientationchange",J),()=>{cancelAnimationFrame($),clearTimeout(z),de.disconnect(),window.removeEventListener("resize",J),window.removeEventListener("orientationchange",J);}},[]),n}function yt({children:e,className:r,style:n,...s}){let a=useRef(null);return useEffect(()=>{if(!a.current)return;let u=Ve(a.current,s);return ()=>u.destroy()},[]),jsx("div",{ref:a,className:r,style:n,children:e})}export{yt as ScrollDraw,rt as useScrollDrawProgress};
+import {useState,useRef,useEffect}from'react';import {jsx}from'react/jsx-runtime';function Qe({bounces:e=3,decay:r=.5}={}){let s=Math.max(1,Math.round(e)),o=Math.max(.01,Math.min(.99,r)),c=Math.sqrt(o),f=0,g=[];for(let a=0;a<s;a++){let y=Math.pow(c,a);g.push(y),f+=y;}let v=[0],x=0;for(let a=0;a<s;a++)x+=g[a]/f,v.push(x);return a=>{if(a<=0)return 0;if(a>=1)return 1;for(let y=0;y<s;y++)if(a<=v[y+1]){let k=(a-v[y])/(v[y+1]-v[y]);if(y===0)return k*(2-k);let T=1-Math.pow(o,y);return T+(1-T)*(2*k-1)*(2*k-1)}return 1}}function Ze({amplitude:e=1,period:r=.4}={}){let s=Math.max(1,e),o=Math.max(.1,r),c=s<=1?o/4:o/(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)/o)+1}var de={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:Qe(),elastic:Ze()};function ye(e="top bottom"){let r=e.trim();if(/^\d+(\.\d+)?%$/.test(r))return {element:"top",viewport:r};let[s="top",o="bottom"]=r.split(/\s+/).filter(Boolean);return {element:s,viewport:o}}function qe(e,r,s,o){switch(o){case "top":return e+s;case "center":return e+s+r/2;case "bottom":return e+s+r;default:return e+s}}function Ve(e,r){if(/^\d+(\.\d+)?%$/.test(e))return r*(parseFloat(e)/100);switch(e){case "top":return 0;case "center":return r/2;case "bottom":return r;default:return r}}function Le(e){let r=e.tagName.toLowerCase();if(r==="rect"){let s=parseFloat(e.getAttribute("width")??"0"),o=parseFloat(e.getAttribute("height")??"0");return 2*(s+o)}if(r==="circle"){let s=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*s}return e.getTotalLength()}function et(e,r,s){return Math.min(s,Math.max(r,e))}function K(e,r,s,o){return s===r?0:et((e-r)/(s-r)*o,0,1)}function xe(e,r,s,o,c){let f=qe(e.top,e.height,r,o.element)-Ve(o.viewport,s),g=qe(e.top,e.height,r,c.element)-Ve(c.viewport,s);return {tStart:f,tEnd:g}}function Ge(e){let r=/^#([a-f\d])([a-f\d])([a-f\d])$/i.exec(e);if(r)return [parseInt(r[1]+r[1],16),parseInt(r[2]+r[2],16),parseInt(r[3]+r[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 o=/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i.exec(e);return o?[parseInt(o[1]),parseInt(o[2]),parseInt(o[3])]:null}function De(e,r,s){let o=Ge(e),c=Ge(r);return !o||!c?e:`rgb(${Math.round(o[0]+(c[0]-o[0])*s)},${Math.round(o[1]+(c[1]-o[1])*s)},${Math.round(o[2]+(c[2]-o[2])*s)})`}function Be(e,r){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,r);}var Ue={linear:"linear","ease-in":"ease-in","ease-out":"ease-out","ease-in-out":"ease-in-out"},tt=0;function rt(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}function nt(e){let r=e.getAttribute("stroke"),s=e.getAttribute("fill");!r||r==="none"?Be("Element has no stroke \u2014 path will not be visible.",e):s&&s!=="none"&&s!=="transparent"&&Be("Element has a fill \u2014 it may obscure the stroke animation.",e);}function st(e,r,s){let o=document.createElement("div");o.setAttribute("data-svg-scroll-draw-debug",""),o.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,g=e-f,v=r-f,x=s==="x";o.innerHTML=`
+      <div style="position:absolute;${x?`left:${g}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${g}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;${x?`left:${v}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${v}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(o),window.addEventListener("scroll",c,{passive:true}),c(),o}function Re(e,r,s){let o=(r.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),c=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,f=>{let g=parseFloat(f),v=o[c++]??g;return String(+(g+(v-g)*s).toFixed(4))})}function Xe(e,r={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};let s=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:o="path, polyline, line, polygon, rect, circle",speed:c=1,fade:f=false,easing:g="linear",trigger:v={},stagger:x=0,direction:a="forward",once:y=false,debug:k=false,axis:T="y",scrollContainer:ge,autoReverse:oe=false,delay:Q=0,strokeColor:H,strokeWidth:N,fillOpacity:G,waypoints:j,velocityScale:ie=false,threshold:he=0,rootMargin:be="0px",repeat:W=0,repeatDelay:Z=0,morphTo:b,clip:q,autoplay:we=false,duration:ve=1e3,native:fe=true,onProgress:Y,onStart:$e,onComplete:me}=r,ee=q===true?"left":typeof q=="string"?q:false,ae=typeof g=="function"?g:de[g]??de.linear,Oe=ye(v.start??"top bottom"),Ne=ye(v.end??"bottom top"),I=typeof ge=="string"?document.querySelector(ge):ge??null,B=Array.isArray(H)?H[0]:null,P=Array.isArray(H)?H[1]:typeof H=="string"?H:null,R=Array.isArray(N)?N[0]:null,L=Array.isArray(N)?N[1]:typeof N=="number"?N:null,O=Array.isArray(G)?G[0]:null,D=Array.isArray(G)?G[1]:typeof G=="number"?G:null;function le(t){let n=t*100;switch(ee){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 M=ee?[]:Array.from(e.querySelectorAll(o)),$=[],U=[],te=0,re=0,A=false,V=false,S=0,Se=false,X=-1,Te=-1,C=false,ue=0,J=0,ne,Ce=null,se=new Set,Me=-1,ze=performance.now();function Ee(){return I?T==="x"?I.scrollLeft:I.scrollTop:T==="x"?window.scrollX:window.scrollY}function He(){return I?T==="x"?I.clientWidth:I.clientHeight:T==="x"?window.innerWidth:window.innerHeight}function We(){let t=e.getBoundingClientRect(),n,u,w;if(I){let F=I.getBoundingClientRect();n=T==="x"?t.left-F.left+I.scrollLeft:t.top-F.top+I.scrollTop,u=T==="x"?t.width:t.height,w=Ee();}else n=T==="x"?t.left:t.top,u=T==="x"?t.width:t.height,w=Ee();let z=xe({top:n,height:u},w,He(),Oe,Ne);te=z.tStart,re=z.tEnd,k&&process.env.NODE_ENV!=="production"&&(Ce?.remove(),Ce=st(te,re,T));}function je(t,n){if(e.style.setProperty("--scroll-draw-progress",String(t)),ee){let u=n==="reverse"?1-t:t;e.style.clipPath=le(u);return}M.forEach((u,w)=>{u.style.strokeDashoffset=n==="reverse"?`${$[w]*t}`:`${$[w]*(1-t)}`,f&&(u.style.opacity=n==="reverse"?`${1-t}`:`${t}`),B&&P?u.style.stroke=De(B,P,t):P&&(u.style.stroke=P),R!==null&&L!==null?u.style.strokeWidth=`${R+(L-R)*t}`:L!==null&&(u.style.strokeWidth=`${L}`),O!==null&&D!==null?u.style.fillOpacity=`${O+(D-O)*t}`:D!==null&&(u.style.fillOpacity=`${D}`),b&&u.tagName.toLowerCase()==="path"&&U[w]&&u.setAttribute("d",Re(U[w],b,t));});}function Ae(){if(e.style.setProperty("--scroll-draw-progress","0"),ee){e.style.clipPath=le(0);return}M.forEach((t,n)=>{t.style.strokeDasharray=`${$[n]}`,t.style.strokeDashoffset=a==="reverse"?"0":`${$[n]}`,f?t.style.opacity=a==="reverse"?"1":"0":t.style.opacity="",B&&(t.style.stroke=B),R!==null&&(t.style.strokeWidth=`${R}`),O!==null&&(t.style.fillOpacity=`${O}`),b&&t.tagName.toLowerCase()==="path"&&U[n]&&t.setAttribute("d",U[n]);});}if(M.forEach(t=>{nt(t);let n=Le(t);$.push(n),t.tagName.toLowerCase()==="path"?U.push(t.getAttribute("d")??""):U.push(""),s?(t.style.strokeDasharray=`${n}`,t.style.strokeDashoffset=a==="reverse"?`${n}`:"0",f&&(t.style.opacity="1"),P&&(t.style.stroke=P),L!==null&&(t.style.strokeWidth=`${L}`),D!==null&&(t.style.fillOpacity=`${D}`),b&&t.tagName.toLowerCase()==="path"&&t.setAttribute("d",b)):(t.style.strokeDasharray=`${n}`,t.style.strokeDashoffset=a==="reverse"?"0":`${n}`,f?t.style.opacity=a==="reverse"?"1":"0":t.style.opacity="",B&&(t.style.stroke=B),R!==null&&(t.style.strokeWidth=`${R}`),O!==null&&(t.style.fillOpacity=`${O}`));}),ee){if(s)return e.style.clipPath=le(1),me?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=le(0);}else if(s)return me?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};function Ye(){return !(fe===false||!rt()||!M.length||typeof g!="string"||!(g in Ue)||ee||T!=="y"||I||c!==1||x!==0||y||oe||ie!==false||b||j||W||Q>0||Y||$e||me||H!=null||N!=null||G!=null||(v.start??"top bottom").trim()!=="top bottom"||(v.end??"bottom top").trim()!=="bottom top")}function Je(){let t=`svg-scroll-draw-${++tt}`,n=a==="reverse"?"0":"var(--ssd-len)",u=a==="reverse"?"var(--ssd-len)":"0",w=`stroke-dashoffset:${n};`,z=`stroke-dashoffset:${u};`;f&&(w+=`opacity:${a==="reverse"?1:0};`,z+=`opacity:${a==="reverse"?0:1};`);let F=document.createElement("style");F.setAttribute("data-svg-scroll-draw",""),F.textContent=`@keyframes ${t}{from{${w}}to{${z}}}.${t}{animation-name:${t};animation-duration:auto;animation-timing-function:${Ue[g]};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(F);function l(i,p){i.style.setProperty("--ssd-len",String($[p])),i.style.strokeDasharray=`${$[p]}`,i.style.strokeDashoffset="",i.style.opacity="",i.style.animationPlayState="",i.classList.add(t);}M.forEach(l);let d=false,E=-1;function m(){if(E>=0)return E;let i=e.getBoundingClientRect(),{tStart:p,tEnd:h}=xe({top:i.top,height:i.height},Ee(),He(),Oe,Ne);return ae(K(Ee(),p,h,c))}return {destroy(){M.forEach(i=>{i.classList.remove(t),i.style.removeProperty("--ssd-len"),i.style.animationPlayState="";}),F.remove();},replay(){d=false,E=-1,M.forEach(l);},pause(){d=true,M.forEach(i=>{i.style.animationPlayState="paused";});},resume(){d&&(d=false,M.forEach(i=>{i.style.animationPlayState="running";}));},seek(i){let p=Math.min(1,Math.max(0,i));E=p,d=true,M.forEach((h,ce)=>{h.classList.remove(t),h.style.strokeDashoffset=a==="reverse"?`${$[ce]*p}`:`${$[ce]*(1-p)}`,f&&(h.style.opacity=a==="reverse"?`${1-p}`:`${p}`);});},getProgress(){return m()}}}if(Ye())return Je();function Ke(){let t=Math.max(1,ve),n=0,u=0;function w(m){let i=true;if(ee){let p=Math.min(1,Math.max(0,m/t)),h=ae(p);ue=h,e.style.setProperty("--scroll-draw-progress",String(h)),e.style.clipPath=le(a==="reverse"?1-h:h),Y?.(h),p<1&&(i=false);}else M.forEach((p,h)=>{let ce=h*x*t,pe=Math.min(1,Math.max(0,(m-ce)/t)),_=ae(pe);p.style.strokeDashoffset=a==="reverse"?`${$[h]*_}`:`${$[h]*(1-_)}`,f&&(p.style.opacity=a==="reverse"?`${1-_}`:`${_}`),B&&P?p.style.stroke=De(B,P,_):P&&(p.style.stroke=P),R!==null&&L!==null?p.style.strokeWidth=`${R+(L-R)*_}`:L!==null&&(p.style.strokeWidth=`${L}`),O!==null&&D!==null?p.style.fillOpacity=`${O+(D-O)*_}`:D!==null&&(p.style.fillOpacity=`${D}`),b&&p.tagName.toLowerCase()==="path"&&U[h]&&p.setAttribute("d",Re(U[h],b,_)),h===0&&(Y?.(_),e.style.setProperty("--scroll-draw-progress",String(_))),pe<1&&(i=false);});if(j){let p=Math.min(1,Math.max(0,m/t)),h=ae(p);for(let ce in j){let pe=parseFloat(ce);h>=pe&&!se.has(pe)&&(se.add(pe),j[ce]?.());}}return i}function z(m){if(C)return;let i=m-n;V||(V=true,$e?.());let p=w(i);if(p&&!A){A=true,w(t*(1+Math.max(0,M.length-1)*x)),me?.(),J<(W==="infinite"?1/0:W??0)&&(J++,ne=setTimeout(()=>{n=performance.now(),V=false,A=false,se.clear(),Ae(),S=requestAnimationFrame(z);},Z));return}p||(S=requestAnimationFrame(z));}function F(){cancelAnimationFrame(S),clearTimeout(ne),n=performance.now(),u=0,C=false,V=false,A=false,J=0,se.clear(),Ae(),S=requestAnimationFrame(z);}let l=new IntersectionObserver(m=>{m.forEach(i=>{i.isIntersecting&&!(y&&A)?F():!i.isIntersecting&&!y&&!A&&(cancelAnimationFrame(S),clearTimeout(ne),n=null);});},{root:I??null,threshold:he,rootMargin:be}),d;function E(){clearTimeout(d),d=setTimeout(()=>{M.forEach((m,i)=>{$[i]=Le(m),m.style.strokeDasharray=`${$[i]}`;});},150);}return window.addEventListener("resize",E),window.addEventListener("orientationchange",E),Q>0?setTimeout(()=>l.observe(e),Q):l.observe(e),{destroy(){cancelAnimationFrame(S),clearTimeout(ne),l.disconnect(),window.removeEventListener("resize",E),window.removeEventListener("orientationchange",E),clearTimeout(d);},replay(){J=0,F();},pause(){C||(C=true,u=performance.now()-n,cancelAnimationFrame(S));},resume(){C&&(C=false,n=performance.now()-u,S=requestAnimationFrame(z));},seek(m){let i=Math.min(1,Math.max(0,m));ue=i,C=true,u=i*t,n=performance.now()-u,cancelAnimationFrame(S),w(u);},getProgress(){return ue}}}if(we)return Ke();We();function ke(){if(!Se||C)return;let t=performance.now(),n=Ee(),u=c;if(ie!==false){let l=t-ze,d=l>0?Math.abs(n-(Me<0?n:Me))/l:0;u=c*Math.max(.2,1+d*(typeof ie=="number"?ie:1)*.04);}Me=n,ze=t;let w=oe?Te===-1||n>=Te?"forward":"reverse":a;Te=n;let z=re-te,F=true;if(ee){let l=ae(K(n,te,re,u));y&&!oe&&(X=Math.max(X,l),l=X),ue=l,e.style.setProperty("--scroll-draw-progress",String(l));let d=w==="reverse"?1-l:l;e.style.clipPath=le(d),Y?.(l),!V&&K(n,te,re,u)>0&&(V=true,$e?.()),l>=1&&!A?(A=true,me?.(),J<(W==="infinite"?1/0:W??0)&&(J++,ne=setTimeout(()=>{X=-1,V=false,A=false,e.style.clipPath=le(0);},Z))):l<1&&!y&&(A=false),S=requestAnimationFrame(ke);return}if(M.forEach((l,d)=>{let E=d*x*z,m=ae(K(n,te+E,re+E,u));y&&!oe&&(X=Math.max(X,m),m=X),ue=m,l.style.strokeDashoffset=w==="reverse"?`${$[d]*m}`:`${$[d]*(1-m)}`,f&&(l.style.opacity=w==="reverse"?`${1-m}`:`${m}`),B&&P?l.style.stroke=De(B,P,m):P&&(l.style.stroke=P),R!==null&&L!==null?l.style.strokeWidth=`${R+(L-R)*m}`:L!==null&&(l.style.strokeWidth=`${L}`),O!==null&&D!==null?l.style.fillOpacity=`${O+(D-O)*m}`:D!==null&&(l.style.fillOpacity=`${D}`),b&&l.tagName.toLowerCase()==="path"&&U[d]&&l.setAttribute("d",Re(U[d],b,m)),d===0&&(Y?.(m),e.style.setProperty("--scroll-draw-progress",String(m))),m<1&&(F=false);}),j){let l=ae(K(n,te,re,u));for(let d in j){let E=parseFloat(d);l>=E&&!se.has(E)&&(se.add(E),j[d]?.());}}!V&&K(n,te,re,u)>0&&(V=true,$e?.()),F&&!A?(A=true,me?.(),J<(W==="infinite"?1/0:W??0)&&(J++,ne=setTimeout(()=>{X=-1,V=false,A=false,se.clear(),Ae();},Z))):!F&&!y&&(A=false),S=requestAnimationFrame(ke);}let Fe=new IntersectionObserver(t=>{t.forEach(n=>{Se=n.isIntersecting,Se&&!C?S=requestAnimationFrame(ke):cancelAnimationFrame(S);});},{root:I??null,threshold:he,rootMargin:be}),Ie;function Pe(){clearTimeout(Ie),Ie=setTimeout(()=>{M.forEach((t,n)=>{$[n]=Le(t),t.style.strokeDasharray=`${$[n]}`;}),We();},150);}return window.addEventListener("resize",Pe),window.addEventListener("orientationchange",Pe),Q>0?setTimeout(()=>Fe.observe(e),Q):Fe.observe(e),{destroy(){cancelAnimationFrame(S),clearTimeout(ne),Fe.disconnect(),window.removeEventListener("resize",Pe),window.removeEventListener("orientationchange",Pe),clearTimeout(Ie),Ce?.remove();},replay(){X=-1,Te=-1,Me=-1,V=false,A=false,J=0,C=false,se.clear(),clearTimeout(ne),Ae();},pause(){C=true,cancelAnimationFrame(S);},resume(){C&&(C=false,Se&&(S=requestAnimationFrame(ke)));},seek(t){let n=Math.min(1,Math.max(0,t));ue=n,X=n,C=true,cancelAnimationFrame(S),je(n,a);},getProgress(){return ue}}}function at(e,r={}){let[s,o]=useState(0),c=useRef(r);c.current=r;let f=useRef(-1);return useEffect(()=>{if(typeof window>"u")return;if(window.matchMedia("(prefers-reduced-motion: reduce)").matches){o(1);return}let g=typeof e=="string"?document.querySelector(e):e.current;if(!g)return;let v=g,{axis:x="y",scrollContainer:a,trigger:y={}}=c.current,k=typeof a=="string"?document.querySelector(a):a??null,T=ye(y.start??"top bottom"),ge=ye(y.end??"bottom top"),oe=0,Q=0,H=false,N=0;function G(){return k?x==="x"?k.scrollLeft:k.scrollTop:x==="x"?window.scrollX:window.scrollY}function j(){return k?x==="x"?k.clientWidth:k.clientHeight:x==="x"?window.innerWidth:window.innerHeight}function ie(){let b=v.getBoundingClientRect(),q=G(),we=x==="x"?b.left:b.top,ve=x==="x"?b.width:b.height,fe=xe({top:we,height:ve},q,j(),T,ge);oe=fe.tStart,Q=fe.tEnd;}function he(){if(!H)return;let{speed:b=1,easing:q="linear",once:we=false}=c.current,ve=typeof q=="function"?q:de[q]??de.linear,fe=K(G(),oe,Q,b),Y=ve(fe);we&&(f.current=Math.max(f.current,Y),Y=f.current),o(Y),N=requestAnimationFrame(he);}let be=new IntersectionObserver(b=>{b.forEach(q=>{H=q.isIntersecting,H?N=requestAnimationFrame(he):cancelAnimationFrame(N);});},{root:k??null,threshold:0});ie(),be.observe(v);let W;function Z(){clearTimeout(W),W=setTimeout(ie,150);}return window.addEventListener("resize",Z),window.addEventListener("orientationchange",Z),()=>{cancelAnimationFrame(N),clearTimeout(W),be.disconnect(),window.removeEventListener("resize",Z),window.removeEventListener("orientationchange",Z);}},[]),s}function vt({children:e,className:r,style:s,...o}){let c=useRef(null);return useEffect(()=>{if(!c.current)return;let f=Xe(c.current,o);return ()=>f.destroy()},[]),jsx("div",{ref:c,className:r,style:s,children:e})}export{vt as ScrollDraw,at as useScrollDrawProgress};

package/dist/solid/index.cjs

@@ -1,3 +1,3 @@
-'use strict';var solidJs=require('solid-js');function je({bounces:e=3,decay:r=.5}={}){let n=Math.max(1,Math.round(e)),o=Math.max(.01,Math.min(.99,r)),f=Math.sqrt(o),u=0,p=[];for(let a=0;a<n;a++){let d=Math.pow(f,a);p.push(d),u+=d;}let h=[0],I=0;for(let a=0;a<n;a++)I+=p[a]/u,h.push(I);return a=>{if(a<=0)return 0;if(a>=1)return 1;for(let d=0;d<n;d++)if(a<=h[d+1]){let U=(a-h[d])/(h[d+1]-h[d]);if(d===0)return U*(2-U);let b=1-Math.pow(o,d);return b+(1-b)*(2*U-1)*(2*U-1)}return 1}}function Je({amplitude:e=1,period:r=.4}={}){let n=Math.max(1,e),o=Math.max(.1,r),f=n<=1?o/4:o/(2*Math.PI)*Math.asin(1/n);return u=>u<=0?0:u>=1?1:n*Math.pow(2,-10*u)*Math.sin((u-f)*(2*Math.PI)/o)+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:je(),elastic:Je()};function Ee(e="top bottom"){let r=e.trim();if(/^\d+(\.\d+)?%$/.test(r))return {element:"top",viewport:r};let[n="top",o="bottom"]=r.split(/\s+/).filter(Boolean);return {element:n,viewport:o}}function Oe(e,r,n,o){switch(o){case "top":return e+n;case "center":return e+n+r/2;case "bottom":return e+n+r;default:return e+n}}function Fe(e,r){if(/^\d+(\.\d+)?%$/.test(e))return r*(parseFloat(e)/100);switch(e){case "top":return 0;case "center":return r/2;case "bottom":return r;default:return r}}function xe(e){let r=e.tagName.toLowerCase();if(r==="rect"){let n=parseFloat(e.getAttribute("width")??"0"),o=parseFloat(e.getAttribute("height")??"0");return 2*(n+o)}if(r==="circle"){let n=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*n}return e.getTotalLength()}function Ke(e,r,n){return Math.min(n,Math.max(r,e))}function X(e,r,n,o){return n===r?0:Ke((e-r)/(n-r)*o,0,1)}function $e(e,r,n,o,f){let u=Oe(e.top,e.height,r,o.element)-Fe(o.viewport,n),p=Oe(e.top,e.height,r,f.element)-Fe(f.viewport,n);return {tStart:u,tEnd:p}}function Ne(e){let r=/^#([a-f\d])([a-f\d])([a-f\d])$/i.exec(e);if(r)return [parseInt(r[1]+r[1],16),parseInt(r[2]+r[2],16),parseInt(r[3]+r[3],16)];let n=/^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);if(n)return [parseInt(n[1],16),parseInt(n[2],16),parseInt(n[3],16)];let o=/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i.exec(e);return o?[parseInt(o[1]),parseInt(o[2]),parseInt(o[3])]:null}function Se(e,r,n){let o=Ne(e),f=Ne(r);return !o||!f?e:`rgb(${Math.round(o[0]+(f[0]-o[0])*n)},${Math.round(o[1]+(f[1]-o[1])*n)},${Math.round(o[2]+(f[2]-o[2])*n)})`}function He(e,r){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,r);}var Re={linear:"linear","ease-in":"ease-in","ease-out":"ease-out","ease-in-out":"ease-in-out"},Qe=0;function Ye(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}function Ze(e){let r=e.getAttribute("stroke"),n=e.getAttribute("fill");!r||r==="none"?He("Element has no stroke \u2014 path will not be visible.",e):n&&n!=="none"&&n!=="transparent"&&He("Element has a fill \u2014 it may obscure the stroke animation.",e);}function et(e,r,n){let o=document.createElement("div");o.setAttribute("data-svg-scroll-draw-debug",""),o.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 f(){let u=n==="x"?window.scrollX:window.scrollY,p=e-u,h=r-u,I=n==="x";o.innerHTML=`
-      <div style="position:absolute;${I?`left:${p}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${p}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;${I?`left:${h}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${h}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(o),window.addEventListener("scroll",f,{passive:true}),f(),o}function We(e,r,n){let o=(r.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),f=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,u=>{let p=parseFloat(u),h=o[f++]??p;return String(+(p+(h-p)*n).toFixed(4))})}function Me(e,r={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};let n=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:o="path, polyline, line, polygon, rect, circle",speed:f=1,fade:u=false,easing:p="linear",trigger:h={},stagger:I=0,direction:a="forward",once:d=false,debug:U=false,axis:b="y",scrollContainer:me,autoReverse:ee=false,delay:pe=0,strokeColor:W,strokeWidth:V,fillOpacity:G,waypoints:te,velocityScale:re=false,threshold:ze=0,rootMargin:qe="0px",repeat:J=0,repeatDelay:ke=0,morphTo:C,clip:de,native:Be=true,onProgress:ye,onStart:he,onComplete:K}=r,z=de===true?"left":typeof de=="string"?de:false,ne=typeof p=="function"?p:ve[p]??ve.linear,Te=Ee(h.start??"top bottom"),Ae=Ee(h.end??"bottom top"),E=typeof me=="string"?document.querySelector(me):me??null,O=Array.isArray(W)?W[0]:null,S=Array.isArray(W)?W[1]:typeof W=="string"?W:null,M=Array.isArray(V)?V[0]:null,k=Array.isArray(V)?V[1]:typeof V=="number"?V:null,T=Array.isArray(G)?G[0]:null,A=Array.isArray(G)?G[1]:typeof G=="number"?G:null;function j(t){let s=t*100;switch(z){case "right":return `inset(0 0 0 ${100-s}%)`;case "top":return `inset(0 0 ${100-s}% 0)`;case "bottom":return `inset(${100-s}% 0 0 0)`;case "center":return `circle(${t*150}% at 50% 50%)`;default:return `inset(0 ${100-s}% 0 0)`}}let x=z?[]:Array.from(e.querySelectorAll(o)),w=[],F=[],N=0,H=0,P=false,q=false,R=0,se=false,L=-1,oe=-1,B=false,ie=0,Q=0,ae,ge=null,le=new Set,ue=-1,Le=performance.now();function Y(){return E?b==="x"?E.scrollLeft:E.scrollTop:b==="x"?window.scrollX:window.scrollY}function De(){return E?b==="x"?E.clientWidth:E.clientHeight:b==="x"?window.innerWidth:window.innerHeight}function Pe(){let t=e.getBoundingClientRect(),s,l,g;if(E){let $=E.getBoundingClientRect();s=b==="x"?t.left-$.left+E.scrollLeft:t.top-$.top+E.scrollTop,l=b==="x"?t.width:t.height,g=Y();}else s=b==="x"?t.left:t.top,l=b==="x"?t.width:t.height,g=Y();let _=$e({top:s,height:l},g,De(),Te,Ae);N=_.tStart,H=_.tEnd,U&&process.env.NODE_ENV!=="production"&&(ge?.remove(),ge=et(N,H,b));}function _e(t,s){if(e.style.setProperty("--scroll-draw-progress",String(t)),z){let l=s==="reverse"?1-t:t;e.style.clipPath=j(l);return}x.forEach((l,g)=>{l.style.strokeDashoffset=s==="reverse"?`${w[g]*t}`:`${w[g]*(1-t)}`,u&&(l.style.opacity=s==="reverse"?`${1-t}`:`${t}`),O&&S?l.style.stroke=Se(O,S,t):S&&(l.style.stroke=S),M!==null&&k!==null?l.style.strokeWidth=`${M+(k-M)*t}`:k!==null&&(l.style.strokeWidth=`${k}`),T!==null&&A!==null?l.style.fillOpacity=`${T+(A-T)*t}`:A!==null&&(l.style.fillOpacity=`${A}`),C&&l.tagName.toLowerCase()==="path"&&F[g]&&l.setAttribute("d",We(F[g],C,t));});}function Ie(){if(e.style.setProperty("--scroll-draw-progress","0"),z){e.style.clipPath=j(0);return}x.forEach((t,s)=>{t.style.strokeDasharray=`${w[s]}`,t.style.strokeDashoffset=a==="reverse"?"0":`${w[s]}`,u?t.style.opacity=a==="reverse"?"1":"0":t.style.opacity="",O&&(t.style.stroke=O),M!==null&&(t.style.strokeWidth=`${M}`),T!==null&&(t.style.fillOpacity=`${T}`),C&&t.tagName.toLowerCase()==="path"&&F[s]&&t.setAttribute("d",F[s]);});}if(x.forEach(t=>{Ze(t);let s=xe(t);w.push(s),t.tagName.toLowerCase()==="path"?F.push(t.getAttribute("d")??""):F.push(""),n?(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=a==="reverse"?`${s}`:"0",u&&(t.style.opacity="1"),S&&(t.style.stroke=S),k!==null&&(t.style.strokeWidth=`${k}`),A!==null&&(t.style.fillOpacity=`${A}`),C&&t.tagName.toLowerCase()==="path"&&t.setAttribute("d",C)):(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=a==="reverse"?"0":`${s}`,u?t.style.opacity=a==="reverse"?"1":"0":t.style.opacity="",O&&(t.style.stroke=O),M!==null&&(t.style.strokeWidth=`${M}`),T!==null&&(t.style.fillOpacity=`${T}`));}),z){if(n)return e.style.clipPath=j(1),K?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=j(0);}else if(n)return K?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};function Xe(){return !(Be===false||!Ye()||!x.length||typeof p!="string"||!(p in Re)||z||b!=="y"||E||f!==1||I!==0||d||ee||re!==false||C||te||J||pe>0||ye||he||K||W!=null||V!=null||G!=null||(h.start??"top bottom").trim()!=="top bottom"||(h.end??"bottom top").trim()!=="bottom top")}function Ue(){let t=`svg-scroll-draw-${++Qe}`,s=a==="reverse"?"0":"var(--ssd-len)",l=a==="reverse"?"var(--ssd-len)":"0",g=`stroke-dashoffset:${s};`,_=`stroke-dashoffset:${l};`;u&&(g+=`opacity:${a==="reverse"?1:0};`,_+=`opacity:${a==="reverse"?0:1};`);let $=document.createElement("style");$.setAttribute("data-svg-scroll-draw",""),$.textContent=`@keyframes ${t}{from{${g}}to{${_}}}.${t}{animation-name:${t};animation-duration:auto;animation-timing-function:${Re[p]};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild($);function i(m,D){m.style.setProperty("--ssd-len",String(w[D])),m.style.strokeDasharray=`${w[D]}`,m.style.strokeDashoffset="",m.style.opacity="",m.style.animationPlayState="",m.classList.add(t);}x.forEach(i);let c=false,v=-1;function y(){if(v>=0)return v;let m=e.getBoundingClientRect(),{tStart:D,tEnd:Z}=$e({top:m.top,height:m.height},Y(),De(),Te,Ae);return ne(X(Y(),D,Z,f))}return {destroy(){x.forEach(m=>{m.classList.remove(t),m.style.removeProperty("--ssd-len"),m.style.animationPlayState="";}),$.remove();},replay(){c=false,v=-1,x.forEach(i);},pause(){c=true,x.forEach(m=>{m.style.animationPlayState="paused";});},resume(){c&&(c=false,x.forEach(m=>{m.style.animationPlayState="running";}));},seek(m){let D=Math.min(1,Math.max(0,m));v=D,c=true,x.forEach((Z,Ce)=>{Z.classList.remove(t),Z.style.strokeDashoffset=a==="reverse"?`${w[Ce]*D}`:`${w[Ce]*(1-D)}`,u&&(Z.style.opacity=a==="reverse"?`${1-D}`:`${D}`);});},getProgress(){return y()}}}if(Xe())return Ue();Pe();function fe(){if(!se||B)return;let t=performance.now(),s=Y(),l=f;if(re!==false){let i=t-Le,c=i>0?Math.abs(s-(ue<0?s:ue))/i:0;l=f*Math.max(.2,1+c*(typeof re=="number"?re:1)*.04);}ue=s,Le=t;let g=ee?oe===-1||s>=oe?"forward":"reverse":a;oe=s;let _=H-N,$=true;if(z){let i=ne(X(s,N,H,l));d&&!ee&&(L=Math.max(L,i),i=L),ie=i,e.style.setProperty("--scroll-draw-progress",String(i));let c=g==="reverse"?1-i:i;e.style.clipPath=j(c),ye?.(i),!q&&X(s,N,H,l)>0&&(q=true,he?.()),i>=1&&!P?(P=true,K?.(),Q<(J==="infinite"?1/0:J??0)&&(Q++,ae=setTimeout(()=>{L=-1,q=false,P=false,e.style.clipPath=j(0);},ke))):i<1&&!d&&(P=false),R=requestAnimationFrame(fe);return}if(x.forEach((i,c)=>{let v=c*I*_,y=ne(X(s,N+v,H+v,l));d&&!ee&&(L=Math.max(L,y),y=L),ie=y,i.style.strokeDashoffset=g==="reverse"?`${w[c]*y}`:`${w[c]*(1-y)}`,u&&(i.style.opacity=g==="reverse"?`${1-y}`:`${y}`),O&&S?i.style.stroke=Se(O,S,y):S&&(i.style.stroke=S),M!==null&&k!==null?i.style.strokeWidth=`${M+(k-M)*y}`:k!==null&&(i.style.strokeWidth=`${k}`),T!==null&&A!==null?i.style.fillOpacity=`${T+(A-T)*y}`:A!==null&&(i.style.fillOpacity=`${A}`),C&&i.tagName.toLowerCase()==="path"&&F[c]&&i.setAttribute("d",We(F[c],C,y)),c===0&&(ye?.(y),e.style.setProperty("--scroll-draw-progress",String(y))),y<1&&($=false);}),te){let i=ne(X(s,N,H,l));for(let c in te){let v=parseFloat(c);i>=v&&!le.has(v)&&(le.add(v),te[c]?.());}}!q&&X(s,N,H,l)>0&&(q=true,he?.()),$&&!P?(P=true,K?.(),Q<(J==="infinite"?1/0:J??0)&&(Q++,ae=setTimeout(()=>{L=-1,q=false,P=false,le.clear(),Ie();},ke))):!$&&!d&&(P=false),R=requestAnimationFrame(fe);}let be=new IntersectionObserver(t=>{t.forEach(s=>{se=s.isIntersecting,se&&!B?R=requestAnimationFrame(fe):cancelAnimationFrame(R);});},{root:E??null,threshold:ze,rootMargin:qe}),we;function ce(){clearTimeout(we),we=setTimeout(()=>{x.forEach((t,s)=>{w[s]=xe(t),t.style.strokeDasharray=`${w[s]}`;}),Pe();},150);}return window.addEventListener("resize",ce),window.addEventListener("orientationchange",ce),pe>0?setTimeout(()=>be.observe(e),pe):be.observe(e),{destroy(){cancelAnimationFrame(R),clearTimeout(ae),be.disconnect(),window.removeEventListener("resize",ce),window.removeEventListener("orientationchange",ce),clearTimeout(we),ge?.remove();},replay(){L=-1,oe=-1,ue=-1,q=false,P=false,Q=0,B=false,le.clear(),clearTimeout(ae),Ie();},pause(){B=true,cancelAnimationFrame(R);},resume(){B&&(B=false,se&&(R=requestAnimationFrame(fe)));},seek(t){let s=Math.min(1,Math.max(0,t));ie=s,L=s,B=true,cancelAnimationFrame(R),_e(s,a);},getProgress(){return ie}}}function it(e={}){let r,n;return solidJs.onMount(()=>{r&&(n=Me(r,e));}),solidJs.onCleanup(()=>{n?.destroy();}),o=>{r=o;}}function at(e={}){let r,n;return solidJs.onMount(()=>{r&&(n=Me(r,e));}),solidJs.onCleanup(()=>{n?.destroy(),n=void 0;}),{ref:o=>{r=o;},getInstance:()=>n}}exports.createScrollDraw=at;exports.useScrollDraw=it;
+'use strict';var solidJs=require('solid-js');function Ze({bounces:e=3,decay:r=.5}={}){let n=Math.max(1,Math.round(e)),o=Math.max(.01,Math.min(.99,r)),d=Math.sqrt(o),m=0,b=[];for(let u=0;u<n;u++){let h=Math.pow(d,u);b.push(h),m+=h;}let $=[0],R=0;for(let u=0;u<n;u++)R+=b[u]/m,$.push(R);return u=>{if(u<=0)return 0;if(u>=1)return 1;for(let h=0;h<n;h++)if(u<=$[h+1]){let se=(u-$[h])/($[h+1]-$[h]);if(h===0)return se*(2-se);let D=1-Math.pow(o,h);return D+(1-D)*(2*se-1)*(2*se-1)}return 1}}function et({amplitude:e=1,period:r=.4}={}){let n=Math.max(1,e),o=Math.max(.1,r),d=n<=1?o/4:o/(2*Math.PI)*Math.asin(1/n);return m=>m<=0?0:m>=1?1:n*Math.pow(2,-10*m)*Math.sin((m-d)*(2*Math.PI)/o)+1}var Ae={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:Ze(),elastic:et()};function ke(e="top bottom"){let r=e.trim();if(/^\d+(\.\d+)?%$/.test(r))return {element:"top",viewport:r};let[n="top",o="bottom"]=r.split(/\s+/).filter(Boolean);return {element:n,viewport:o}}function We(e,r,n,o){switch(o){case "top":return e+n;case "center":return e+n+r/2;case "bottom":return e+n+r;default:return e+n}}function ze(e,r){if(/^\d+(\.\d+)?%$/.test(e))return r*(parseFloat(e)/100);switch(e){case "top":return 0;case "center":return r/2;case "bottom":return r;default:return r}}function we(e){let r=e.tagName.toLowerCase();if(r==="rect"){let n=parseFloat(e.getAttribute("width")??"0"),o=parseFloat(e.getAttribute("height")??"0");return 2*(n+o)}if(r==="circle"){let n=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*n}return e.getTotalLength()}function tt(e,r,n){return Math.min(n,Math.max(r,e))}function ne(e,r,n,o){return n===r?0:tt((e-r)/(n-r)*o,0,1)}function Le(e,r,n,o,d){let m=We(e.top,e.height,r,o.element)-ze(o.viewport,n),b=We(e.top,e.height,r,d.element)-ze(d.viewport,n);return {tStart:m,tEnd:b}}function qe(e){let r=/^#([a-f\d])([a-f\d])([a-f\d])$/i.exec(e);if(r)return [parseInt(r[1]+r[1],16),parseInt(r[2]+r[2],16),parseInt(r[3]+r[3],16)];let n=/^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);if(n)return [parseInt(n[1],16),parseInt(n[2],16),parseInt(n[3],16)];let o=/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i.exec(e);return o?[parseInt(o[1]),parseInt(o[2]),parseInt(o[3])]:null}function ve(e,r,n){let o=qe(e),d=qe(r);return !o||!d?e:`rgb(${Math.round(o[0]+(d[0]-o[0])*n)},${Math.round(o[1]+(d[1]-o[1])*n)},${Math.round(o[2]+(d[2]-o[2])*n)})`}function Ve(e,r){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,r);}var Ge={linear:"linear","ease-in":"ease-in","ease-out":"ease-out","ease-in-out":"ease-in-out"},rt=0;function nt(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}function st(e){let r=e.getAttribute("stroke"),n=e.getAttribute("fill");!r||r==="none"?Ve("Element has no stroke \u2014 path will not be visible.",e):n&&n!=="none"&&n!=="transparent"&&Ve("Element has a fill \u2014 it may obscure the stroke animation.",e);}function ot(e,r,n){let o=document.createElement("div");o.setAttribute("data-svg-scroll-draw-debug",""),o.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 d(){let m=n==="x"?window.scrollX:window.scrollY,b=e-m,$=r-m,R=n==="x";o.innerHTML=`
+      <div style="position:absolute;${R?`left:${b}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${b}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;${R?`left:${$}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${$}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(o),window.addEventListener("scroll",d,{passive:true}),d(),o}function De(e,r,n){let o=(r.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),d=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,m=>{let b=parseFloat(m),$=o[d++]??b;return String(+(b+($-b)*n).toFixed(4))})}function Pe(e,r={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};let n=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:o="path, polyline, line, polygon, rect, circle",speed:d=1,fade:m=false,easing:b="linear",trigger:$={},stagger:R=0,direction:u="forward",once:h=false,debug:se=false,axis:D="y",scrollContainer:Ee,autoReverse:fe=false,delay:ae=0,strokeColor:j,strokeWidth:J,fillOpacity:K,waypoints:Q,velocityScale:ce=false,threshold:Ie=0,rootMargin:Fe="0px",repeat:Y=0,repeatDelay:$e=0,morphTo:H,clip:xe,autoplay:Xe=false,duration:Ue=1e3,native:je=true,onProgress:le,onStart:me,onComplete:oe}=r,G=xe===true?"left":typeof xe=="string"?xe:false,Z=typeof b=="function"?b:Ae[b]??Ae.linear,Ce=ke($.start??"top bottom"),Oe=ke($.end??"bottom top"),P=typeof Ee=="string"?document.querySelector(Ee):Ee??null,N=Array.isArray(j)?j[0]:null,S=Array.isArray(j)?j[1]:typeof j=="string"?j:null,I=Array.isArray(J)?J[0]:null,T=Array.isArray(J)?J[1]:typeof J=="number"?J:null,F=Array.isArray(K)?K[0]:null,A=Array.isArray(K)?K[1]:typeof K=="number"?K:null;function ee(t){let s=t*100;switch(G){case "right":return `inset(0 0 0 ${100-s}%)`;case "top":return `inset(0 0 ${100-s}% 0)`;case "bottom":return `inset(${100-s}% 0 0 0)`;case "center":return `circle(${t*150}% at 50% 50%)`;default:return `inset(0 ${100-s}% 0 0)`}}let x=G?[]:Array.from(e.querySelectorAll(o)),v=[],W=[],B=0,_=0,M=false,O=false,E=0,pe=false,z=-1,de=-1,k=false,te=0,V=0,X,Me=null,U=new Set,ye=-1,Re=performance.now();function ue(){return P?D==="x"?P.scrollLeft:P.scrollTop:D==="x"?window.scrollX:window.scrollY}function He(){return P?D==="x"?P.clientWidth:P.clientHeight:D==="x"?window.innerWidth:window.innerHeight}function Ne(){let t=e.getBoundingClientRect(),s,l,g;if(P){let L=P.getBoundingClientRect();s=D==="x"?t.left-L.left+P.scrollLeft:t.top-L.top+P.scrollTop,l=D==="x"?t.width:t.height,g=ue();}else s=D==="x"?t.left:t.top,l=D==="x"?t.width:t.height,g=ue();let C=Le({top:s,height:l},g,He(),Ce,Oe);B=C.tStart,_=C.tEnd,se&&process.env.NODE_ENV!=="production"&&(Me?.remove(),Me=ot(B,_,D));}function Je(t,s){if(e.style.setProperty("--scroll-draw-progress",String(t)),G){let l=s==="reverse"?1-t:t;e.style.clipPath=ee(l);return}x.forEach((l,g)=>{l.style.strokeDashoffset=s==="reverse"?`${v[g]*t}`:`${v[g]*(1-t)}`,m&&(l.style.opacity=s==="reverse"?`${1-t}`:`${t}`),N&&S?l.style.stroke=ve(N,S,t):S&&(l.style.stroke=S),I!==null&&T!==null?l.style.strokeWidth=`${I+(T-I)*t}`:T!==null&&(l.style.strokeWidth=`${T}`),F!==null&&A!==null?l.style.fillOpacity=`${F+(A-F)*t}`:A!==null&&(l.style.fillOpacity=`${A}`),H&&l.tagName.toLowerCase()==="path"&&W[g]&&l.setAttribute("d",De(W[g],H,t));});}function he(){if(e.style.setProperty("--scroll-draw-progress","0"),G){e.style.clipPath=ee(0);return}x.forEach((t,s)=>{t.style.strokeDasharray=`${v[s]}`,t.style.strokeDashoffset=u==="reverse"?"0":`${v[s]}`,m?t.style.opacity=u==="reverse"?"1":"0":t.style.opacity="",N&&(t.style.stroke=N),I!==null&&(t.style.strokeWidth=`${I}`),F!==null&&(t.style.fillOpacity=`${F}`),H&&t.tagName.toLowerCase()==="path"&&W[s]&&t.setAttribute("d",W[s]);});}if(x.forEach(t=>{st(t);let s=we(t);v.push(s),t.tagName.toLowerCase()==="path"?W.push(t.getAttribute("d")??""):W.push(""),n?(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=u==="reverse"?`${s}`:"0",m&&(t.style.opacity="1"),S&&(t.style.stroke=S),T!==null&&(t.style.strokeWidth=`${T}`),A!==null&&(t.style.fillOpacity=`${A}`),H&&t.tagName.toLowerCase()==="path"&&t.setAttribute("d",H)):(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=u==="reverse"?"0":`${s}`,m?t.style.opacity=u==="reverse"?"1":"0":t.style.opacity="",N&&(t.style.stroke=N),I!==null&&(t.style.strokeWidth=`${I}`),F!==null&&(t.style.fillOpacity=`${F}`));}),G){if(n)return e.style.clipPath=ee(1),oe?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=ee(0);}else if(n)return oe?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};function Ke(){return !(je===false||!nt()||!x.length||typeof b!="string"||!(b in Ge)||G||D!=="y"||P||d!==1||R!==0||h||fe||ce!==false||H||Q||Y||ae>0||le||me||oe||j!=null||J!=null||K!=null||($.start??"top bottom").trim()!=="top bottom"||($.end??"bottom top").trim()!=="bottom top")}function Qe(){let t=`svg-scroll-draw-${++rt}`,s=u==="reverse"?"0":"var(--ssd-len)",l=u==="reverse"?"var(--ssd-len)":"0",g=`stroke-dashoffset:${s};`,C=`stroke-dashoffset:${l};`;m&&(g+=`opacity:${u==="reverse"?1:0};`,C+=`opacity:${u==="reverse"?0:1};`);let L=document.createElement("style");L.setAttribute("data-svg-scroll-draw",""),L.textContent=`@keyframes ${t}{from{${g}}to{${C}}}.${t}{animation-name:${t};animation-duration:auto;animation-timing-function:${Ge[b]};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(L);function a(i,c){i.style.setProperty("--ssd-len",String(v[c])),i.style.strokeDasharray=`${v[c]}`,i.style.strokeDashoffset="",i.style.opacity="",i.style.animationPlayState="",i.classList.add(t);}x.forEach(a);let p=false,w=-1;function f(){if(w>=0)return w;let i=e.getBoundingClientRect(),{tStart:c,tEnd:y}=Le({top:i.top,height:i.height},ue(),He(),Ce,Oe);return Z(ne(ue(),c,y,d))}return {destroy(){x.forEach(i=>{i.classList.remove(t),i.style.removeProperty("--ssd-len"),i.style.animationPlayState="";}),L.remove();},replay(){p=false,w=-1,x.forEach(a);},pause(){p=true,x.forEach(i=>{i.style.animationPlayState="paused";});},resume(){p&&(p=false,x.forEach(i=>{i.style.animationPlayState="running";}));},seek(i){let c=Math.min(1,Math.max(0,i));w=c,p=true,x.forEach((y,re)=>{y.classList.remove(t),y.style.strokeDashoffset=u==="reverse"?`${v[re]*c}`:`${v[re]*(1-c)}`,m&&(y.style.opacity=u==="reverse"?`${1-c}`:`${c}`);});},getProgress(){return f()}}}if(Ke())return Qe();function Ye(){let t=Math.max(1,Ue),s=0,l=0;function g(f){let i=true;if(G){let c=Math.min(1,Math.max(0,f/t)),y=Z(c);te=y,e.style.setProperty("--scroll-draw-progress",String(y)),e.style.clipPath=ee(u==="reverse"?1-y:y),le?.(y),c<1&&(i=false);}else x.forEach((c,y)=>{let re=y*R*t,ie=Math.min(1,Math.max(0,(f-re)/t)),q=Z(ie);c.style.strokeDashoffset=u==="reverse"?`${v[y]*q}`:`${v[y]*(1-q)}`,m&&(c.style.opacity=u==="reverse"?`${1-q}`:`${q}`),N&&S?c.style.stroke=ve(N,S,q):S&&(c.style.stroke=S),I!==null&&T!==null?c.style.strokeWidth=`${I+(T-I)*q}`:T!==null&&(c.style.strokeWidth=`${T}`),F!==null&&A!==null?c.style.fillOpacity=`${F+(A-F)*q}`:A!==null&&(c.style.fillOpacity=`${A}`),H&&c.tagName.toLowerCase()==="path"&&W[y]&&c.setAttribute("d",De(W[y],H,q)),y===0&&(le?.(q),e.style.setProperty("--scroll-draw-progress",String(q))),ie<1&&(i=false);});if(Q){let c=Math.min(1,Math.max(0,f/t)),y=Z(c);for(let re in Q){let ie=parseFloat(re);y>=ie&&!U.has(ie)&&(U.add(ie),Q[re]?.());}}return i}function C(f){if(k)return;let i=f-s;O||(O=true,me?.());let c=g(i);if(c&&!M){M=true,g(t*(1+Math.max(0,x.length-1)*R)),oe?.(),V<(Y==="infinite"?1/0:Y??0)&&(V++,X=setTimeout(()=>{s=performance.now(),O=false,M=false,U.clear(),he(),E=requestAnimationFrame(C);},$e));return}c||(E=requestAnimationFrame(C));}function L(){cancelAnimationFrame(E),clearTimeout(X),s=performance.now(),l=0,k=false,O=false,M=false,V=0,U.clear(),he(),E=requestAnimationFrame(C);}let a=new IntersectionObserver(f=>{f.forEach(i=>{i.isIntersecting&&!(h&&M)?L():!i.isIntersecting&&!h&&!M&&(cancelAnimationFrame(E),clearTimeout(X),s=null);});},{root:P??null,threshold:Ie,rootMargin:Fe}),p;function w(){clearTimeout(p),p=setTimeout(()=>{x.forEach((f,i)=>{v[i]=we(f),f.style.strokeDasharray=`${v[i]}`;});},150);}return window.addEventListener("resize",w),window.addEventListener("orientationchange",w),ae>0?setTimeout(()=>a.observe(e),ae):a.observe(e),{destroy(){cancelAnimationFrame(E),clearTimeout(X),a.disconnect(),window.removeEventListener("resize",w),window.removeEventListener("orientationchange",w),clearTimeout(p);},replay(){V=0,L();},pause(){k||(k=true,l=performance.now()-s,cancelAnimationFrame(E));},resume(){k&&(k=false,s=performance.now()-l,E=requestAnimationFrame(C));},seek(f){let i=Math.min(1,Math.max(0,f));te=i,k=true,l=i*t,s=performance.now()-l,cancelAnimationFrame(E),g(l);},getProgress(){return te}}}if(Xe)return Ye();Ne();function ge(){if(!pe||k)return;let t=performance.now(),s=ue(),l=d;if(ce!==false){let a=t-Re,p=a>0?Math.abs(s-(ye<0?s:ye))/a:0;l=d*Math.max(.2,1+p*(typeof ce=="number"?ce:1)*.04);}ye=s,Re=t;let g=fe?de===-1||s>=de?"forward":"reverse":u;de=s;let C=_-B,L=true;if(G){let a=Z(ne(s,B,_,l));h&&!fe&&(z=Math.max(z,a),a=z),te=a,e.style.setProperty("--scroll-draw-progress",String(a));let p=g==="reverse"?1-a:a;e.style.clipPath=ee(p),le?.(a),!O&&ne(s,B,_,l)>0&&(O=true,me?.()),a>=1&&!M?(M=true,oe?.(),V<(Y==="infinite"?1/0:Y??0)&&(V++,X=setTimeout(()=>{z=-1,O=false,M=false,e.style.clipPath=ee(0);},$e))):a<1&&!h&&(M=false),E=requestAnimationFrame(ge);return}if(x.forEach((a,p)=>{let w=p*R*C,f=Z(ne(s,B+w,_+w,l));h&&!fe&&(z=Math.max(z,f),f=z),te=f,a.style.strokeDashoffset=g==="reverse"?`${v[p]*f}`:`${v[p]*(1-f)}`,m&&(a.style.opacity=g==="reverse"?`${1-f}`:`${f}`),N&&S?a.style.stroke=ve(N,S,f):S&&(a.style.stroke=S),I!==null&&T!==null?a.style.strokeWidth=`${I+(T-I)*f}`:T!==null&&(a.style.strokeWidth=`${T}`),F!==null&&A!==null?a.style.fillOpacity=`${F+(A-F)*f}`:A!==null&&(a.style.fillOpacity=`${A}`),H&&a.tagName.toLowerCase()==="path"&&W[p]&&a.setAttribute("d",De(W[p],H,f)),p===0&&(le?.(f),e.style.setProperty("--scroll-draw-progress",String(f))),f<1&&(L=false);}),Q){let a=Z(ne(s,B,_,l));for(let p in Q){let w=parseFloat(p);a>=w&&!U.has(w)&&(U.add(w),Q[p]?.());}}!O&&ne(s,B,_,l)>0&&(O=true,me?.()),L&&!M?(M=true,oe?.(),V<(Y==="infinite"?1/0:Y??0)&&(V++,X=setTimeout(()=>{z=-1,O=false,M=false,U.clear(),he();},$e))):!L&&!h&&(M=false),E=requestAnimationFrame(ge);}let Se=new IntersectionObserver(t=>{t.forEach(s=>{pe=s.isIntersecting,pe&&!k?E=requestAnimationFrame(ge):cancelAnimationFrame(E);});},{root:P??null,threshold:Ie,rootMargin:Fe}),Te;function be(){clearTimeout(Te),Te=setTimeout(()=>{x.forEach((t,s)=>{v[s]=we(t),t.style.strokeDasharray=`${v[s]}`;}),Ne();},150);}return window.addEventListener("resize",be),window.addEventListener("orientationchange",be),ae>0?setTimeout(()=>Se.observe(e),ae):Se.observe(e),{destroy(){cancelAnimationFrame(E),clearTimeout(X),Se.disconnect(),window.removeEventListener("resize",be),window.removeEventListener("orientationchange",be),clearTimeout(Te),Me?.remove();},replay(){z=-1,de=-1,ye=-1,O=false,M=false,V=0,k=false,U.clear(),clearTimeout(X),he();},pause(){k=true,cancelAnimationFrame(E);},resume(){k&&(k=false,pe&&(E=requestAnimationFrame(ge)));},seek(t){let s=Math.min(1,Math.max(0,t));te=s,z=s,k=true,cancelAnimationFrame(E),Je(s,u);},getProgress(){return te}}}function ct(e={}){let r,n;return solidJs.onMount(()=>{r&&(n=Pe(r,e));}),solidJs.onCleanup(()=>{n?.destroy();}),o=>{r=o;}}function mt(e={}){let r,n;return solidJs.onMount(()=>{r&&(n=Pe(r,e));}),solidJs.onCleanup(()=>{n?.destroy(),n=void 0;}),{ref:o=>{r=o;},getInstance:()=>n}}exports.createScrollDraw=mt;exports.useScrollDraw=ct;

package/dist/solid/index.d.mts

@@ -60,6 +60,25 @@ interface ScrollDrawOptions {
     onProgress?: (alpha: number) => void;
     onStart?: () => void;
     onComplete?: () => void;
+    /**
+     * Trigger the animation when the element enters the viewport instead of
+     * tying it to scroll position. The draw runs over `duration` milliseconds,
+     * replaying each time the element re-enters the viewport (use `once: true`
+     * to play only the first time).
+     *
+     * All visual options work in autoplay mode — `easing`, `stagger`, `fade`,
+     * `strokeColor`, `strokeWidth`, `fillOpacity`, `clip`, `morphTo`, `waypoints`,
+     * `repeat`, `repeatDelay`, `onStart`, `onComplete`, `onProgress`, etc.
+     *
+     * The full instance API (`pause`, `resume`, `seek`, `replay`, `getProgress`)
+     * also works — `seek(0.5)` pauses at 50% of the duration.
+     */
+    autoplay?: boolean;
+    /**
+     * Duration of the autoplay animation in milliseconds. Only used when
+     * `autoplay: true`. Default `1000`.
+     */
+    duration?: number;
     /**
      * Use the browser's native CSS scroll-driven animation
      * (`animation-timeline: view()`) when the configuration is simple enough and

package/dist/solid/index.d.ts

@@ -60,6 +60,25 @@ interface ScrollDrawOptions {
     onProgress?: (alpha: number) => void;
     onStart?: () => void;
     onComplete?: () => void;
+    /**
+     * Trigger the animation when the element enters the viewport instead of
+     * tying it to scroll position. The draw runs over `duration` milliseconds,
+     * replaying each time the element re-enters the viewport (use `once: true`
+     * to play only the first time).
+     *
+     * All visual options work in autoplay mode — `easing`, `stagger`, `fade`,
+     * `strokeColor`, `strokeWidth`, `fillOpacity`, `clip`, `morphTo`, `waypoints`,
+     * `repeat`, `repeatDelay`, `onStart`, `onComplete`, `onProgress`, etc.
+     *
+     * The full instance API (`pause`, `resume`, `seek`, `replay`, `getProgress`)
+     * also works — `seek(0.5)` pauses at 50% of the duration.
+     */
+    autoplay?: boolean;
+    /**
+     * Duration of the autoplay animation in milliseconds. Only used when
+     * `autoplay: true`. Default `1000`.
+     */
+    duration?: number;
     /**
      * Use the browser's native CSS scroll-driven animation
      * (`animation-timeline: view()`) when the configuration is simple enough and

package/dist/solid/index.mjs

@@ -1,3 +1,3 @@
-import {onMount,onCleanup}from'solid-js';function je({bounces:e=3,decay:r=.5}={}){let n=Math.max(1,Math.round(e)),o=Math.max(.01,Math.min(.99,r)),f=Math.sqrt(o),u=0,p=[];for(let a=0;a<n;a++){let d=Math.pow(f,a);p.push(d),u+=d;}let h=[0],I=0;for(let a=0;a<n;a++)I+=p[a]/u,h.push(I);return a=>{if(a<=0)return 0;if(a>=1)return 1;for(let d=0;d<n;d++)if(a<=h[d+1]){let U=(a-h[d])/(h[d+1]-h[d]);if(d===0)return U*(2-U);let b=1-Math.pow(o,d);return b+(1-b)*(2*U-1)*(2*U-1)}return 1}}function Je({amplitude:e=1,period:r=.4}={}){let n=Math.max(1,e),o=Math.max(.1,r),f=n<=1?o/4:o/(2*Math.PI)*Math.asin(1/n);return u=>u<=0?0:u>=1?1:n*Math.pow(2,-10*u)*Math.sin((u-f)*(2*Math.PI)/o)+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:je(),elastic:Je()};function Ee(e="top bottom"){let r=e.trim();if(/^\d+(\.\d+)?%$/.test(r))return {element:"top",viewport:r};let[n="top",o="bottom"]=r.split(/\s+/).filter(Boolean);return {element:n,viewport:o}}function Oe(e,r,n,o){switch(o){case "top":return e+n;case "center":return e+n+r/2;case "bottom":return e+n+r;default:return e+n}}function Fe(e,r){if(/^\d+(\.\d+)?%$/.test(e))return r*(parseFloat(e)/100);switch(e){case "top":return 0;case "center":return r/2;case "bottom":return r;default:return r}}function xe(e){let r=e.tagName.toLowerCase();if(r==="rect"){let n=parseFloat(e.getAttribute("width")??"0"),o=parseFloat(e.getAttribute("height")??"0");return 2*(n+o)}if(r==="circle"){let n=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*n}return e.getTotalLength()}function Ke(e,r,n){return Math.min(n,Math.max(r,e))}function X(e,r,n,o){return n===r?0:Ke((e-r)/(n-r)*o,0,1)}function $e(e,r,n,o,f){let u=Oe(e.top,e.height,r,o.element)-Fe(o.viewport,n),p=Oe(e.top,e.height,r,f.element)-Fe(f.viewport,n);return {tStart:u,tEnd:p}}function Ne(e){let r=/^#([a-f\d])([a-f\d])([a-f\d])$/i.exec(e);if(r)return [parseInt(r[1]+r[1],16),parseInt(r[2]+r[2],16),parseInt(r[3]+r[3],16)];let n=/^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);if(n)return [parseInt(n[1],16),parseInt(n[2],16),parseInt(n[3],16)];let o=/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i.exec(e);return o?[parseInt(o[1]),parseInt(o[2]),parseInt(o[3])]:null}function Se(e,r,n){let o=Ne(e),f=Ne(r);return !o||!f?e:`rgb(${Math.round(o[0]+(f[0]-o[0])*n)},${Math.round(o[1]+(f[1]-o[1])*n)},${Math.round(o[2]+(f[2]-o[2])*n)})`}function He(e,r){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,r);}var Re={linear:"linear","ease-in":"ease-in","ease-out":"ease-out","ease-in-out":"ease-in-out"},Qe=0;function Ye(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}function Ze(e){let r=e.getAttribute("stroke"),n=e.getAttribute("fill");!r||r==="none"?He("Element has no stroke \u2014 path will not be visible.",e):n&&n!=="none"&&n!=="transparent"&&He("Element has a fill \u2014 it may obscure the stroke animation.",e);}function et(e,r,n){let o=document.createElement("div");o.setAttribute("data-svg-scroll-draw-debug",""),o.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 f(){let u=n==="x"?window.scrollX:window.scrollY,p=e-u,h=r-u,I=n==="x";o.innerHTML=`
-      <div style="position:absolute;${I?`left:${p}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${p}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;${I?`left:${h}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${h}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(o),window.addEventListener("scroll",f,{passive:true}),f(),o}function We(e,r,n){let o=(r.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),f=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,u=>{let p=parseFloat(u),h=o[f++]??p;return String(+(p+(h-p)*n).toFixed(4))})}function Me(e,r={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};let n=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:o="path, polyline, line, polygon, rect, circle",speed:f=1,fade:u=false,easing:p="linear",trigger:h={},stagger:I=0,direction:a="forward",once:d=false,debug:U=false,axis:b="y",scrollContainer:me,autoReverse:ee=false,delay:pe=0,strokeColor:W,strokeWidth:V,fillOpacity:G,waypoints:te,velocityScale:re=false,threshold:ze=0,rootMargin:qe="0px",repeat:J=0,repeatDelay:ke=0,morphTo:C,clip:de,native:Be=true,onProgress:ye,onStart:he,onComplete:K}=r,z=de===true?"left":typeof de=="string"?de:false,ne=typeof p=="function"?p:ve[p]??ve.linear,Te=Ee(h.start??"top bottom"),Ae=Ee(h.end??"bottom top"),E=typeof me=="string"?document.querySelector(me):me??null,O=Array.isArray(W)?W[0]:null,S=Array.isArray(W)?W[1]:typeof W=="string"?W:null,M=Array.isArray(V)?V[0]:null,k=Array.isArray(V)?V[1]:typeof V=="number"?V:null,T=Array.isArray(G)?G[0]:null,A=Array.isArray(G)?G[1]:typeof G=="number"?G:null;function j(t){let s=t*100;switch(z){case "right":return `inset(0 0 0 ${100-s}%)`;case "top":return `inset(0 0 ${100-s}% 0)`;case "bottom":return `inset(${100-s}% 0 0 0)`;case "center":return `circle(${t*150}% at 50% 50%)`;default:return `inset(0 ${100-s}% 0 0)`}}let x=z?[]:Array.from(e.querySelectorAll(o)),w=[],F=[],N=0,H=0,P=false,q=false,R=0,se=false,L=-1,oe=-1,B=false,ie=0,Q=0,ae,ge=null,le=new Set,ue=-1,Le=performance.now();function Y(){return E?b==="x"?E.scrollLeft:E.scrollTop:b==="x"?window.scrollX:window.scrollY}function De(){return E?b==="x"?E.clientWidth:E.clientHeight:b==="x"?window.innerWidth:window.innerHeight}function Pe(){let t=e.getBoundingClientRect(),s,l,g;if(E){let $=E.getBoundingClientRect();s=b==="x"?t.left-$.left+E.scrollLeft:t.top-$.top+E.scrollTop,l=b==="x"?t.width:t.height,g=Y();}else s=b==="x"?t.left:t.top,l=b==="x"?t.width:t.height,g=Y();let _=$e({top:s,height:l},g,De(),Te,Ae);N=_.tStart,H=_.tEnd,U&&process.env.NODE_ENV!=="production"&&(ge?.remove(),ge=et(N,H,b));}function _e(t,s){if(e.style.setProperty("--scroll-draw-progress",String(t)),z){let l=s==="reverse"?1-t:t;e.style.clipPath=j(l);return}x.forEach((l,g)=>{l.style.strokeDashoffset=s==="reverse"?`${w[g]*t}`:`${w[g]*(1-t)}`,u&&(l.style.opacity=s==="reverse"?`${1-t}`:`${t}`),O&&S?l.style.stroke=Se(O,S,t):S&&(l.style.stroke=S),M!==null&&k!==null?l.style.strokeWidth=`${M+(k-M)*t}`:k!==null&&(l.style.strokeWidth=`${k}`),T!==null&&A!==null?l.style.fillOpacity=`${T+(A-T)*t}`:A!==null&&(l.style.fillOpacity=`${A}`),C&&l.tagName.toLowerCase()==="path"&&F[g]&&l.setAttribute("d",We(F[g],C,t));});}function Ie(){if(e.style.setProperty("--scroll-draw-progress","0"),z){e.style.clipPath=j(0);return}x.forEach((t,s)=>{t.style.strokeDasharray=`${w[s]}`,t.style.strokeDashoffset=a==="reverse"?"0":`${w[s]}`,u?t.style.opacity=a==="reverse"?"1":"0":t.style.opacity="",O&&(t.style.stroke=O),M!==null&&(t.style.strokeWidth=`${M}`),T!==null&&(t.style.fillOpacity=`${T}`),C&&t.tagName.toLowerCase()==="path"&&F[s]&&t.setAttribute("d",F[s]);});}if(x.forEach(t=>{Ze(t);let s=xe(t);w.push(s),t.tagName.toLowerCase()==="path"?F.push(t.getAttribute("d")??""):F.push(""),n?(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=a==="reverse"?`${s}`:"0",u&&(t.style.opacity="1"),S&&(t.style.stroke=S),k!==null&&(t.style.strokeWidth=`${k}`),A!==null&&(t.style.fillOpacity=`${A}`),C&&t.tagName.toLowerCase()==="path"&&t.setAttribute("d",C)):(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=a==="reverse"?"0":`${s}`,u?t.style.opacity=a==="reverse"?"1":"0":t.style.opacity="",O&&(t.style.stroke=O),M!==null&&(t.style.strokeWidth=`${M}`),T!==null&&(t.style.fillOpacity=`${T}`));}),z){if(n)return e.style.clipPath=j(1),K?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=j(0);}else if(n)return K?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};function Xe(){return !(Be===false||!Ye()||!x.length||typeof p!="string"||!(p in Re)||z||b!=="y"||E||f!==1||I!==0||d||ee||re!==false||C||te||J||pe>0||ye||he||K||W!=null||V!=null||G!=null||(h.start??"top bottom").trim()!=="top bottom"||(h.end??"bottom top").trim()!=="bottom top")}function Ue(){let t=`svg-scroll-draw-${++Qe}`,s=a==="reverse"?"0":"var(--ssd-len)",l=a==="reverse"?"var(--ssd-len)":"0",g=`stroke-dashoffset:${s};`,_=`stroke-dashoffset:${l};`;u&&(g+=`opacity:${a==="reverse"?1:0};`,_+=`opacity:${a==="reverse"?0:1};`);let $=document.createElement("style");$.setAttribute("data-svg-scroll-draw",""),$.textContent=`@keyframes ${t}{from{${g}}to{${_}}}.${t}{animation-name:${t};animation-duration:auto;animation-timing-function:${Re[p]};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild($);function i(m,D){m.style.setProperty("--ssd-len",String(w[D])),m.style.strokeDasharray=`${w[D]}`,m.style.strokeDashoffset="",m.style.opacity="",m.style.animationPlayState="",m.classList.add(t);}x.forEach(i);let c=false,v=-1;function y(){if(v>=0)return v;let m=e.getBoundingClientRect(),{tStart:D,tEnd:Z}=$e({top:m.top,height:m.height},Y(),De(),Te,Ae);return ne(X(Y(),D,Z,f))}return {destroy(){x.forEach(m=>{m.classList.remove(t),m.style.removeProperty("--ssd-len"),m.style.animationPlayState="";}),$.remove();},replay(){c=false,v=-1,x.forEach(i);},pause(){c=true,x.forEach(m=>{m.style.animationPlayState="paused";});},resume(){c&&(c=false,x.forEach(m=>{m.style.animationPlayState="running";}));},seek(m){let D=Math.min(1,Math.max(0,m));v=D,c=true,x.forEach((Z,Ce)=>{Z.classList.remove(t),Z.style.strokeDashoffset=a==="reverse"?`${w[Ce]*D}`:`${w[Ce]*(1-D)}`,u&&(Z.style.opacity=a==="reverse"?`${1-D}`:`${D}`);});},getProgress(){return y()}}}if(Xe())return Ue();Pe();function fe(){if(!se||B)return;let t=performance.now(),s=Y(),l=f;if(re!==false){let i=t-Le,c=i>0?Math.abs(s-(ue<0?s:ue))/i:0;l=f*Math.max(.2,1+c*(typeof re=="number"?re:1)*.04);}ue=s,Le=t;let g=ee?oe===-1||s>=oe?"forward":"reverse":a;oe=s;let _=H-N,$=true;if(z){let i=ne(X(s,N,H,l));d&&!ee&&(L=Math.max(L,i),i=L),ie=i,e.style.setProperty("--scroll-draw-progress",String(i));let c=g==="reverse"?1-i:i;e.style.clipPath=j(c),ye?.(i),!q&&X(s,N,H,l)>0&&(q=true,he?.()),i>=1&&!P?(P=true,K?.(),Q<(J==="infinite"?1/0:J??0)&&(Q++,ae=setTimeout(()=>{L=-1,q=false,P=false,e.style.clipPath=j(0);},ke))):i<1&&!d&&(P=false),R=requestAnimationFrame(fe);return}if(x.forEach((i,c)=>{let v=c*I*_,y=ne(X(s,N+v,H+v,l));d&&!ee&&(L=Math.max(L,y),y=L),ie=y,i.style.strokeDashoffset=g==="reverse"?`${w[c]*y}`:`${w[c]*(1-y)}`,u&&(i.style.opacity=g==="reverse"?`${1-y}`:`${y}`),O&&S?i.style.stroke=Se(O,S,y):S&&(i.style.stroke=S),M!==null&&k!==null?i.style.strokeWidth=`${M+(k-M)*y}`:k!==null&&(i.style.strokeWidth=`${k}`),T!==null&&A!==null?i.style.fillOpacity=`${T+(A-T)*y}`:A!==null&&(i.style.fillOpacity=`${A}`),C&&i.tagName.toLowerCase()==="path"&&F[c]&&i.setAttribute("d",We(F[c],C,y)),c===0&&(ye?.(y),e.style.setProperty("--scroll-draw-progress",String(y))),y<1&&($=false);}),te){let i=ne(X(s,N,H,l));for(let c in te){let v=parseFloat(c);i>=v&&!le.has(v)&&(le.add(v),te[c]?.());}}!q&&X(s,N,H,l)>0&&(q=true,he?.()),$&&!P?(P=true,K?.(),Q<(J==="infinite"?1/0:J??0)&&(Q++,ae=setTimeout(()=>{L=-1,q=false,P=false,le.clear(),Ie();},ke))):!$&&!d&&(P=false),R=requestAnimationFrame(fe);}let be=new IntersectionObserver(t=>{t.forEach(s=>{se=s.isIntersecting,se&&!B?R=requestAnimationFrame(fe):cancelAnimationFrame(R);});},{root:E??null,threshold:ze,rootMargin:qe}),we;function ce(){clearTimeout(we),we=setTimeout(()=>{x.forEach((t,s)=>{w[s]=xe(t),t.style.strokeDasharray=`${w[s]}`;}),Pe();},150);}return window.addEventListener("resize",ce),window.addEventListener("orientationchange",ce),pe>0?setTimeout(()=>be.observe(e),pe):be.observe(e),{destroy(){cancelAnimationFrame(R),clearTimeout(ae),be.disconnect(),window.removeEventListener("resize",ce),window.removeEventListener("orientationchange",ce),clearTimeout(we),ge?.remove();},replay(){L=-1,oe=-1,ue=-1,q=false,P=false,Q=0,B=false,le.clear(),clearTimeout(ae),Ie();},pause(){B=true,cancelAnimationFrame(R);},resume(){B&&(B=false,se&&(R=requestAnimationFrame(fe)));},seek(t){let s=Math.min(1,Math.max(0,t));ie=s,L=s,B=true,cancelAnimationFrame(R),_e(s,a);},getProgress(){return ie}}}function it(e={}){let r,n;return onMount(()=>{r&&(n=Me(r,e));}),onCleanup(()=>{n?.destroy();}),o=>{r=o;}}function at(e={}){let r,n;return onMount(()=>{r&&(n=Me(r,e));}),onCleanup(()=>{n?.destroy(),n=void 0;}),{ref:o=>{r=o;},getInstance:()=>n}}export{at as createScrollDraw,it as useScrollDraw};
+import {onMount,onCleanup}from'solid-js';function Ze({bounces:e=3,decay:r=.5}={}){let n=Math.max(1,Math.round(e)),o=Math.max(.01,Math.min(.99,r)),d=Math.sqrt(o),m=0,b=[];for(let u=0;u<n;u++){let h=Math.pow(d,u);b.push(h),m+=h;}let $=[0],R=0;for(let u=0;u<n;u++)R+=b[u]/m,$.push(R);return u=>{if(u<=0)return 0;if(u>=1)return 1;for(let h=0;h<n;h++)if(u<=$[h+1]){let se=(u-$[h])/($[h+1]-$[h]);if(h===0)return se*(2-se);let D=1-Math.pow(o,h);return D+(1-D)*(2*se-1)*(2*se-1)}return 1}}function et({amplitude:e=1,period:r=.4}={}){let n=Math.max(1,e),o=Math.max(.1,r),d=n<=1?o/4:o/(2*Math.PI)*Math.asin(1/n);return m=>m<=0?0:m>=1?1:n*Math.pow(2,-10*m)*Math.sin((m-d)*(2*Math.PI)/o)+1}var Ae={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:Ze(),elastic:et()};function ke(e="top bottom"){let r=e.trim();if(/^\d+(\.\d+)?%$/.test(r))return {element:"top",viewport:r};let[n="top",o="bottom"]=r.split(/\s+/).filter(Boolean);return {element:n,viewport:o}}function We(e,r,n,o){switch(o){case "top":return e+n;case "center":return e+n+r/2;case "bottom":return e+n+r;default:return e+n}}function ze(e,r){if(/^\d+(\.\d+)?%$/.test(e))return r*(parseFloat(e)/100);switch(e){case "top":return 0;case "center":return r/2;case "bottom":return r;default:return r}}function we(e){let r=e.tagName.toLowerCase();if(r==="rect"){let n=parseFloat(e.getAttribute("width")??"0"),o=parseFloat(e.getAttribute("height")??"0");return 2*(n+o)}if(r==="circle"){let n=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*n}return e.getTotalLength()}function tt(e,r,n){return Math.min(n,Math.max(r,e))}function ne(e,r,n,o){return n===r?0:tt((e-r)/(n-r)*o,0,1)}function Le(e,r,n,o,d){let m=We(e.top,e.height,r,o.element)-ze(o.viewport,n),b=We(e.top,e.height,r,d.element)-ze(d.viewport,n);return {tStart:m,tEnd:b}}function qe(e){let r=/^#([a-f\d])([a-f\d])([a-f\d])$/i.exec(e);if(r)return [parseInt(r[1]+r[1],16),parseInt(r[2]+r[2],16),parseInt(r[3]+r[3],16)];let n=/^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);if(n)return [parseInt(n[1],16),parseInt(n[2],16),parseInt(n[3],16)];let o=/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i.exec(e);return o?[parseInt(o[1]),parseInt(o[2]),parseInt(o[3])]:null}function ve(e,r,n){let o=qe(e),d=qe(r);return !o||!d?e:`rgb(${Math.round(o[0]+(d[0]-o[0])*n)},${Math.round(o[1]+(d[1]-o[1])*n)},${Math.round(o[2]+(d[2]-o[2])*n)})`}function Ve(e,r){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,r);}var Ge={linear:"linear","ease-in":"ease-in","ease-out":"ease-out","ease-in-out":"ease-in-out"},rt=0;function nt(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}function st(e){let r=e.getAttribute("stroke"),n=e.getAttribute("fill");!r||r==="none"?Ve("Element has no stroke \u2014 path will not be visible.",e):n&&n!=="none"&&n!=="transparent"&&Ve("Element has a fill \u2014 it may obscure the stroke animation.",e);}function ot(e,r,n){let o=document.createElement("div");o.setAttribute("data-svg-scroll-draw-debug",""),o.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 d(){let m=n==="x"?window.scrollX:window.scrollY,b=e-m,$=r-m,R=n==="x";o.innerHTML=`
+      <div style="position:absolute;${R?`left:${b}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${b}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;${R?`left:${$}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${$}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(o),window.addEventListener("scroll",d,{passive:true}),d(),o}function De(e,r,n){let o=(r.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),d=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,m=>{let b=parseFloat(m),$=o[d++]??b;return String(+(b+($-b)*n).toFixed(4))})}function Pe(e,r={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};let n=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:o="path, polyline, line, polygon, rect, circle",speed:d=1,fade:m=false,easing:b="linear",trigger:$={},stagger:R=0,direction:u="forward",once:h=false,debug:se=false,axis:D="y",scrollContainer:Ee,autoReverse:fe=false,delay:ae=0,strokeColor:j,strokeWidth:J,fillOpacity:K,waypoints:Q,velocityScale:ce=false,threshold:Ie=0,rootMargin:Fe="0px",repeat:Y=0,repeatDelay:$e=0,morphTo:H,clip:xe,autoplay:Xe=false,duration:Ue=1e3,native:je=true,onProgress:le,onStart:me,onComplete:oe}=r,G=xe===true?"left":typeof xe=="string"?xe:false,Z=typeof b=="function"?b:Ae[b]??Ae.linear,Ce=ke($.start??"top bottom"),Oe=ke($.end??"bottom top"),P=typeof Ee=="string"?document.querySelector(Ee):Ee??null,N=Array.isArray(j)?j[0]:null,S=Array.isArray(j)?j[1]:typeof j=="string"?j:null,I=Array.isArray(J)?J[0]:null,T=Array.isArray(J)?J[1]:typeof J=="number"?J:null,F=Array.isArray(K)?K[0]:null,A=Array.isArray(K)?K[1]:typeof K=="number"?K:null;function ee(t){let s=t*100;switch(G){case "right":return `inset(0 0 0 ${100-s}%)`;case "top":return `inset(0 0 ${100-s}% 0)`;case "bottom":return `inset(${100-s}% 0 0 0)`;case "center":return `circle(${t*150}% at 50% 50%)`;default:return `inset(0 ${100-s}% 0 0)`}}let x=G?[]:Array.from(e.querySelectorAll(o)),v=[],W=[],B=0,_=0,M=false,O=false,E=0,pe=false,z=-1,de=-1,k=false,te=0,V=0,X,Me=null,U=new Set,ye=-1,Re=performance.now();function ue(){return P?D==="x"?P.scrollLeft:P.scrollTop:D==="x"?window.scrollX:window.scrollY}function He(){return P?D==="x"?P.clientWidth:P.clientHeight:D==="x"?window.innerWidth:window.innerHeight}function Ne(){let t=e.getBoundingClientRect(),s,l,g;if(P){let L=P.getBoundingClientRect();s=D==="x"?t.left-L.left+P.scrollLeft:t.top-L.top+P.scrollTop,l=D==="x"?t.width:t.height,g=ue();}else s=D==="x"?t.left:t.top,l=D==="x"?t.width:t.height,g=ue();let C=Le({top:s,height:l},g,He(),Ce,Oe);B=C.tStart,_=C.tEnd,se&&process.env.NODE_ENV!=="production"&&(Me?.remove(),Me=ot(B,_,D));}function Je(t,s){if(e.style.setProperty("--scroll-draw-progress",String(t)),G){let l=s==="reverse"?1-t:t;e.style.clipPath=ee(l);return}x.forEach((l,g)=>{l.style.strokeDashoffset=s==="reverse"?`${v[g]*t}`:`${v[g]*(1-t)}`,m&&(l.style.opacity=s==="reverse"?`${1-t}`:`${t}`),N&&S?l.style.stroke=ve(N,S,t):S&&(l.style.stroke=S),I!==null&&T!==null?l.style.strokeWidth=`${I+(T-I)*t}`:T!==null&&(l.style.strokeWidth=`${T}`),F!==null&&A!==null?l.style.fillOpacity=`${F+(A-F)*t}`:A!==null&&(l.style.fillOpacity=`${A}`),H&&l.tagName.toLowerCase()==="path"&&W[g]&&l.setAttribute("d",De(W[g],H,t));});}function he(){if(e.style.setProperty("--scroll-draw-progress","0"),G){e.style.clipPath=ee(0);return}x.forEach((t,s)=>{t.style.strokeDasharray=`${v[s]}`,t.style.strokeDashoffset=u==="reverse"?"0":`${v[s]}`,m?t.style.opacity=u==="reverse"?"1":"0":t.style.opacity="",N&&(t.style.stroke=N),I!==null&&(t.style.strokeWidth=`${I}`),F!==null&&(t.style.fillOpacity=`${F}`),H&&t.tagName.toLowerCase()==="path"&&W[s]&&t.setAttribute("d",W[s]);});}if(x.forEach(t=>{st(t);let s=we(t);v.push(s),t.tagName.toLowerCase()==="path"?W.push(t.getAttribute("d")??""):W.push(""),n?(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=u==="reverse"?`${s}`:"0",m&&(t.style.opacity="1"),S&&(t.style.stroke=S),T!==null&&(t.style.strokeWidth=`${T}`),A!==null&&(t.style.fillOpacity=`${A}`),H&&t.tagName.toLowerCase()==="path"&&t.setAttribute("d",H)):(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=u==="reverse"?"0":`${s}`,m?t.style.opacity=u==="reverse"?"1":"0":t.style.opacity="",N&&(t.style.stroke=N),I!==null&&(t.style.strokeWidth=`${I}`),F!==null&&(t.style.fillOpacity=`${F}`));}),G){if(n)return e.style.clipPath=ee(1),oe?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=ee(0);}else if(n)return oe?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};function Ke(){return !(je===false||!nt()||!x.length||typeof b!="string"||!(b in Ge)||G||D!=="y"||P||d!==1||R!==0||h||fe||ce!==false||H||Q||Y||ae>0||le||me||oe||j!=null||J!=null||K!=null||($.start??"top bottom").trim()!=="top bottom"||($.end??"bottom top").trim()!=="bottom top")}function Qe(){let t=`svg-scroll-draw-${++rt}`,s=u==="reverse"?"0":"var(--ssd-len)",l=u==="reverse"?"var(--ssd-len)":"0",g=`stroke-dashoffset:${s};`,C=`stroke-dashoffset:${l};`;m&&(g+=`opacity:${u==="reverse"?1:0};`,C+=`opacity:${u==="reverse"?0:1};`);let L=document.createElement("style");L.setAttribute("data-svg-scroll-draw",""),L.textContent=`@keyframes ${t}{from{${g}}to{${C}}}.${t}{animation-name:${t};animation-duration:auto;animation-timing-function:${Ge[b]};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(L);function a(i,c){i.style.setProperty("--ssd-len",String(v[c])),i.style.strokeDasharray=`${v[c]}`,i.style.strokeDashoffset="",i.style.opacity="",i.style.animationPlayState="",i.classList.add(t);}x.forEach(a);let p=false,w=-1;function f(){if(w>=0)return w;let i=e.getBoundingClientRect(),{tStart:c,tEnd:y}=Le({top:i.top,height:i.height},ue(),He(),Ce,Oe);return Z(ne(ue(),c,y,d))}return {destroy(){x.forEach(i=>{i.classList.remove(t),i.style.removeProperty("--ssd-len"),i.style.animationPlayState="";}),L.remove();},replay(){p=false,w=-1,x.forEach(a);},pause(){p=true,x.forEach(i=>{i.style.animationPlayState="paused";});},resume(){p&&(p=false,x.forEach(i=>{i.style.animationPlayState="running";}));},seek(i){let c=Math.min(1,Math.max(0,i));w=c,p=true,x.forEach((y,re)=>{y.classList.remove(t),y.style.strokeDashoffset=u==="reverse"?`${v[re]*c}`:`${v[re]*(1-c)}`,m&&(y.style.opacity=u==="reverse"?`${1-c}`:`${c}`);});},getProgress(){return f()}}}if(Ke())return Qe();function Ye(){let t=Math.max(1,Ue),s=0,l=0;function g(f){let i=true;if(G){let c=Math.min(1,Math.max(0,f/t)),y=Z(c);te=y,e.style.setProperty("--scroll-draw-progress",String(y)),e.style.clipPath=ee(u==="reverse"?1-y:y),le?.(y),c<1&&(i=false);}else x.forEach((c,y)=>{let re=y*R*t,ie=Math.min(1,Math.max(0,(f-re)/t)),q=Z(ie);c.style.strokeDashoffset=u==="reverse"?`${v[y]*q}`:`${v[y]*(1-q)}`,m&&(c.style.opacity=u==="reverse"?`${1-q}`:`${q}`),N&&S?c.style.stroke=ve(N,S,q):S&&(c.style.stroke=S),I!==null&&T!==null?c.style.strokeWidth=`${I+(T-I)*q}`:T!==null&&(c.style.strokeWidth=`${T}`),F!==null&&A!==null?c.style.fillOpacity=`${F+(A-F)*q}`:A!==null&&(c.style.fillOpacity=`${A}`),H&&c.tagName.toLowerCase()==="path"&&W[y]&&c.setAttribute("d",De(W[y],H,q)),y===0&&(le?.(q),e.style.setProperty("--scroll-draw-progress",String(q))),ie<1&&(i=false);});if(Q){let c=Math.min(1,Math.max(0,f/t)),y=Z(c);for(let re in Q){let ie=parseFloat(re);y>=ie&&!U.has(ie)&&(U.add(ie),Q[re]?.());}}return i}function C(f){if(k)return;let i=f-s;O||(O=true,me?.());let c=g(i);if(c&&!M){M=true,g(t*(1+Math.max(0,x.length-1)*R)),oe?.(),V<(Y==="infinite"?1/0:Y??0)&&(V++,X=setTimeout(()=>{s=performance.now(),O=false,M=false,U.clear(),he(),E=requestAnimationFrame(C);},$e));return}c||(E=requestAnimationFrame(C));}function L(){cancelAnimationFrame(E),clearTimeout(X),s=performance.now(),l=0,k=false,O=false,M=false,V=0,U.clear(),he(),E=requestAnimationFrame(C);}let a=new IntersectionObserver(f=>{f.forEach(i=>{i.isIntersecting&&!(h&&M)?L():!i.isIntersecting&&!h&&!M&&(cancelAnimationFrame(E),clearTimeout(X),s=null);});},{root:P??null,threshold:Ie,rootMargin:Fe}),p;function w(){clearTimeout(p),p=setTimeout(()=>{x.forEach((f,i)=>{v[i]=we(f),f.style.strokeDasharray=`${v[i]}`;});},150);}return window.addEventListener("resize",w),window.addEventListener("orientationchange",w),ae>0?setTimeout(()=>a.observe(e),ae):a.observe(e),{destroy(){cancelAnimationFrame(E),clearTimeout(X),a.disconnect(),window.removeEventListener("resize",w),window.removeEventListener("orientationchange",w),clearTimeout(p);},replay(){V=0,L();},pause(){k||(k=true,l=performance.now()-s,cancelAnimationFrame(E));},resume(){k&&(k=false,s=performance.now()-l,E=requestAnimationFrame(C));},seek(f){let i=Math.min(1,Math.max(0,f));te=i,k=true,l=i*t,s=performance.now()-l,cancelAnimationFrame(E),g(l);},getProgress(){return te}}}if(Xe)return Ye();Ne();function ge(){if(!pe||k)return;let t=performance.now(),s=ue(),l=d;if(ce!==false){let a=t-Re,p=a>0?Math.abs(s-(ye<0?s:ye))/a:0;l=d*Math.max(.2,1+p*(typeof ce=="number"?ce:1)*.04);}ye=s,Re=t;let g=fe?de===-1||s>=de?"forward":"reverse":u;de=s;let C=_-B,L=true;if(G){let a=Z(ne(s,B,_,l));h&&!fe&&(z=Math.max(z,a),a=z),te=a,e.style.setProperty("--scroll-draw-progress",String(a));let p=g==="reverse"?1-a:a;e.style.clipPath=ee(p),le?.(a),!O&&ne(s,B,_,l)>0&&(O=true,me?.()),a>=1&&!M?(M=true,oe?.(),V<(Y==="infinite"?1/0:Y??0)&&(V++,X=setTimeout(()=>{z=-1,O=false,M=false,e.style.clipPath=ee(0);},$e))):a<1&&!h&&(M=false),E=requestAnimationFrame(ge);return}if(x.forEach((a,p)=>{let w=p*R*C,f=Z(ne(s,B+w,_+w,l));h&&!fe&&(z=Math.max(z,f),f=z),te=f,a.style.strokeDashoffset=g==="reverse"?`${v[p]*f}`:`${v[p]*(1-f)}`,m&&(a.style.opacity=g==="reverse"?`${1-f}`:`${f}`),N&&S?a.style.stroke=ve(N,S,f):S&&(a.style.stroke=S),I!==null&&T!==null?a.style.strokeWidth=`${I+(T-I)*f}`:T!==null&&(a.style.strokeWidth=`${T}`),F!==null&&A!==null?a.style.fillOpacity=`${F+(A-F)*f}`:A!==null&&(a.style.fillOpacity=`${A}`),H&&a.tagName.toLowerCase()==="path"&&W[p]&&a.setAttribute("d",De(W[p],H,f)),p===0&&(le?.(f),e.style.setProperty("--scroll-draw-progress",String(f))),f<1&&(L=false);}),Q){let a=Z(ne(s,B,_,l));for(let p in Q){let w=parseFloat(p);a>=w&&!U.has(w)&&(U.add(w),Q[p]?.());}}!O&&ne(s,B,_,l)>0&&(O=true,me?.()),L&&!M?(M=true,oe?.(),V<(Y==="infinite"?1/0:Y??0)&&(V++,X=setTimeout(()=>{z=-1,O=false,M=false,U.clear(),he();},$e))):!L&&!h&&(M=false),E=requestAnimationFrame(ge);}let Se=new IntersectionObserver(t=>{t.forEach(s=>{pe=s.isIntersecting,pe&&!k?E=requestAnimationFrame(ge):cancelAnimationFrame(E);});},{root:P??null,threshold:Ie,rootMargin:Fe}),Te;function be(){clearTimeout(Te),Te=setTimeout(()=>{x.forEach((t,s)=>{v[s]=we(t),t.style.strokeDasharray=`${v[s]}`;}),Ne();},150);}return window.addEventListener("resize",be),window.addEventListener("orientationchange",be),ae>0?setTimeout(()=>Se.observe(e),ae):Se.observe(e),{destroy(){cancelAnimationFrame(E),clearTimeout(X),Se.disconnect(),window.removeEventListener("resize",be),window.removeEventListener("orientationchange",be),clearTimeout(Te),Me?.remove();},replay(){z=-1,de=-1,ye=-1,O=false,M=false,V=0,k=false,U.clear(),clearTimeout(X),he();},pause(){k=true,cancelAnimationFrame(E);},resume(){k&&(k=false,pe&&(E=requestAnimationFrame(ge)));},seek(t){let s=Math.min(1,Math.max(0,t));te=s,z=s,k=true,cancelAnimationFrame(E),Je(s,u);},getProgress(){return te}}}function ct(e={}){let r,n;return onMount(()=>{r&&(n=Pe(r,e));}),onCleanup(()=>{n?.destroy();}),o=>{r=o;}}function mt(e={}){let r,n;return onMount(()=>{r&&(n=Pe(r,e));}),onCleanup(()=>{n?.destroy(),n=void 0;}),{ref:o=>{r=o;},getInstance:()=>n}}export{mt as createScrollDraw,ct as useScrollDraw};

package/dist/svelte/index.cjs

@@ -1,3 +1,3 @@
-'use strict';function Xe({bounces:e=3,decay:r=.5}={}){let n=Math.max(1,Math.round(e)),o=Math.max(.01,Math.min(.99,r)),c=Math.sqrt(o),u=0,p=[];for(let a=0;a<n;a++){let d=Math.pow(c,a);p.push(d),u+=d;}let h=[0],I=0;for(let a=0;a<n;a++)I+=p[a]/u,h.push(I);return a=>{if(a<=0)return 0;if(a>=1)return 1;for(let d=0;d<n;d++)if(a<=h[d+1]){let U=(a-h[d])/(h[d+1]-h[d]);if(d===0)return U*(2-U);let b=1-Math.pow(o,d);return b+(1-b)*(2*U-1)*(2*U-1)}return 1}}function Ue({amplitude:e=1,period:r=.4}={}){let n=Math.max(1,e),o=Math.max(.1,r),c=n<=1?o/4:o/(2*Math.PI)*Math.asin(1/n);return u=>u<=0?0:u>=1?1:n*Math.pow(2,-10*u)*Math.sin((u-c)*(2*Math.PI)/o)+1}var xe={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:Xe(),elastic:Ue()};function Ee(e="top bottom"){let r=e.trim();if(/^\d+(\.\d+)?%$/.test(r))return {element:"top",viewport:r};let[n="top",o="bottom"]=r.split(/\s+/).filter(Boolean);return {element:n,viewport:o}}function Oe(e,r,n,o){switch(o){case "top":return e+n;case "center":return e+n+r/2;case "bottom":return e+n+r;default:return e+n}}function Fe(e,r){if(/^\d+(\.\d+)?%$/.test(e))return r*(parseFloat(e)/100);switch(e){case "top":return 0;case "center":return r/2;case "bottom":return r;default:return r}}function $e(e){let r=e.tagName.toLowerCase();if(r==="rect"){let n=parseFloat(e.getAttribute("width")??"0"),o=parseFloat(e.getAttribute("height")??"0");return 2*(n+o)}if(r==="circle"){let n=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*n}return e.getTotalLength()}function je(e,r,n){return Math.min(n,Math.max(r,e))}function X(e,r,n,o){return n===r?0:je((e-r)/(n-r)*o,0,1)}function Se(e,r,n,o,c){let u=Oe(e.top,e.height,r,o.element)-Fe(o.viewport,n),p=Oe(e.top,e.height,r,c.element)-Fe(c.viewport,n);return {tStart:u,tEnd:p}}function Ne(e){let r=/^#([a-f\d])([a-f\d])([a-f\d])$/i.exec(e);if(r)return [parseInt(r[1]+r[1],16),parseInt(r[2]+r[2],16),parseInt(r[3]+r[3],16)];let n=/^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);if(n)return [parseInt(n[1],16),parseInt(n[2],16),parseInt(n[3],16)];let o=/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i.exec(e);return o?[parseInt(o[1]),parseInt(o[2]),parseInt(o[3])]:null}function Me(e,r,n){let o=Ne(e),c=Ne(r);return !o||!c?e:`rgb(${Math.round(o[0]+(c[0]-o[0])*n)},${Math.round(o[1]+(c[1]-o[1])*n)},${Math.round(o[2]+(c[2]-o[2])*n)})`}function Re(e,r){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,r);}var He={linear:"linear","ease-in":"ease-in","ease-out":"ease-out","ease-in-out":"ease-in-out"},Je=0;function Ke(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}function Qe(e){let r=e.getAttribute("stroke"),n=e.getAttribute("fill");!r||r==="none"?Re("Element has no stroke \u2014 path will not be visible.",e):n&&n!=="none"&&n!=="transparent"&&Re("Element has a fill \u2014 it may obscure the stroke animation.",e);}function Ye(e,r,n){let o=document.createElement("div");o.setAttribute("data-svg-scroll-draw-debug",""),o.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 u=n==="x"?window.scrollX:window.scrollY,p=e-u,h=r-u,I=n==="x";o.innerHTML=`
-      <div style="position:absolute;${I?`left:${p}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${p}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;${I?`left:${h}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${h}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(o),window.addEventListener("scroll",c,{passive:true}),c(),o}function We(e,r,n){let o=(r.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),c=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,u=>{let p=parseFloat(u),h=o[c++]??p;return String(+(p+(h-p)*n).toFixed(4))})}function me(e,r={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};let n=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:o="path, polyline, line, polygon, rect, circle",speed:c=1,fade:u=false,easing:p="linear",trigger:h={},stagger:I=0,direction:a="forward",once:d=false,debug:U=false,axis:b="y",scrollContainer:pe,autoReverse:ee=false,delay:de=0,strokeColor:W,strokeWidth:V,fillOpacity:G,waypoints:te,velocityScale:re=false,threshold:Ve=0,rootMargin:Ge="0px",repeat:J=0,repeatDelay:ke=0,morphTo:C,clip:ye,native:ze=true,onProgress:he,onStart:ge,onComplete:K}=r,z=ye===true?"left":typeof ye=="string"?ye:false,ne=typeof p=="function"?p:xe[p]??xe.linear,Te=Ee(h.start??"top bottom"),Ae=Ee(h.end??"bottom top"),x=typeof pe=="string"?document.querySelector(pe):pe??null,O=Array.isArray(W)?W[0]:null,S=Array.isArray(W)?W[1]:typeof W=="string"?W:null,M=Array.isArray(V)?V[0]:null,k=Array.isArray(V)?V[1]:typeof V=="number"?V:null,T=Array.isArray(G)?G[0]:null,A=Array.isArray(G)?G[1]:typeof G=="number"?G:null;function j(t){let s=t*100;switch(z){case "right":return `inset(0 0 0 ${100-s}%)`;case "top":return `inset(0 0 ${100-s}% 0)`;case "bottom":return `inset(${100-s}% 0 0 0)`;case "center":return `circle(${t*150}% at 50% 50%)`;default:return `inset(0 ${100-s}% 0 0)`}}let E=z?[]:Array.from(e.querySelectorAll(o)),w=[],F=[],N=0,R=0,P=false,q=false,H=0,se=false,D=-1,oe=-1,B=false,ie=0,Q=0,ae,be=null,le=new Set,ue=-1,De=performance.now();function Y(){return x?b==="x"?x.scrollLeft:x.scrollTop:b==="x"?window.scrollX:window.scrollY}function Le(){return x?b==="x"?x.clientWidth:x.clientHeight:b==="x"?window.innerWidth:window.innerHeight}function Pe(){let t=e.getBoundingClientRect(),s,l,g;if(x){let $=x.getBoundingClientRect();s=b==="x"?t.left-$.left+x.scrollLeft:t.top-$.top+x.scrollTop,l=b==="x"?t.width:t.height,g=Y();}else s=b==="x"?t.left:t.top,l=b==="x"?t.width:t.height,g=Y();let _=Se({top:s,height:l},g,Le(),Te,Ae);N=_.tStart,R=_.tEnd,U&&process.env.NODE_ENV!=="production"&&(be?.remove(),be=Ye(N,R,b));}function qe(t,s){if(e.style.setProperty("--scroll-draw-progress",String(t)),z){let l=s==="reverse"?1-t:t;e.style.clipPath=j(l);return}E.forEach((l,g)=>{l.style.strokeDashoffset=s==="reverse"?`${w[g]*t}`:`${w[g]*(1-t)}`,u&&(l.style.opacity=s==="reverse"?`${1-t}`:`${t}`),O&&S?l.style.stroke=Me(O,S,t):S&&(l.style.stroke=S),M!==null&&k!==null?l.style.strokeWidth=`${M+(k-M)*t}`:k!==null&&(l.style.strokeWidth=`${k}`),T!==null&&A!==null?l.style.fillOpacity=`${T+(A-T)*t}`:A!==null&&(l.style.fillOpacity=`${A}`),C&&l.tagName.toLowerCase()==="path"&&F[g]&&l.setAttribute("d",We(F[g],C,t));});}function Ie(){if(e.style.setProperty("--scroll-draw-progress","0"),z){e.style.clipPath=j(0);return}E.forEach((t,s)=>{t.style.strokeDasharray=`${w[s]}`,t.style.strokeDashoffset=a==="reverse"?"0":`${w[s]}`,u?t.style.opacity=a==="reverse"?"1":"0":t.style.opacity="",O&&(t.style.stroke=O),M!==null&&(t.style.strokeWidth=`${M}`),T!==null&&(t.style.fillOpacity=`${T}`),C&&t.tagName.toLowerCase()==="path"&&F[s]&&t.setAttribute("d",F[s]);});}if(E.forEach(t=>{Qe(t);let s=$e(t);w.push(s),t.tagName.toLowerCase()==="path"?F.push(t.getAttribute("d")??""):F.push(""),n?(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=a==="reverse"?`${s}`:"0",u&&(t.style.opacity="1"),S&&(t.style.stroke=S),k!==null&&(t.style.strokeWidth=`${k}`),A!==null&&(t.style.fillOpacity=`${A}`),C&&t.tagName.toLowerCase()==="path"&&t.setAttribute("d",C)):(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=a==="reverse"?"0":`${s}`,u?t.style.opacity=a==="reverse"?"1":"0":t.style.opacity="",O&&(t.style.stroke=O),M!==null&&(t.style.strokeWidth=`${M}`),T!==null&&(t.style.fillOpacity=`${T}`));}),z){if(n)return e.style.clipPath=j(1),K?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=j(0);}else if(n)return K?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};function Be(){return !(ze===false||!Ke()||!E.length||typeof p!="string"||!(p in He)||z||b!=="y"||x||c!==1||I!==0||d||ee||re!==false||C||te||J||de>0||he||ge||K||W!=null||V!=null||G!=null||(h.start??"top bottom").trim()!=="top bottom"||(h.end??"bottom top").trim()!=="bottom top")}function _e(){let t=`svg-scroll-draw-${++Je}`,s=a==="reverse"?"0":"var(--ssd-len)",l=a==="reverse"?"var(--ssd-len)":"0",g=`stroke-dashoffset:${s};`,_=`stroke-dashoffset:${l};`;u&&(g+=`opacity:${a==="reverse"?1:0};`,_+=`opacity:${a==="reverse"?0:1};`);let $=document.createElement("style");$.setAttribute("data-svg-scroll-draw",""),$.textContent=`@keyframes ${t}{from{${g}}to{${_}}}.${t}{animation-name:${t};animation-duration:auto;animation-timing-function:${He[p]};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild($);function i(m,L){m.style.setProperty("--ssd-len",String(w[L])),m.style.strokeDasharray=`${w[L]}`,m.style.strokeDashoffset="",m.style.opacity="",m.style.animationPlayState="",m.classList.add(t);}E.forEach(i);let f=false,v=-1;function y(){if(v>=0)return v;let m=e.getBoundingClientRect(),{tStart:L,tEnd:Z}=Se({top:m.top,height:m.height},Y(),Le(),Te,Ae);return ne(X(Y(),L,Z,c))}return {destroy(){E.forEach(m=>{m.classList.remove(t),m.style.removeProperty("--ssd-len"),m.style.animationPlayState="";}),$.remove();},replay(){f=false,v=-1,E.forEach(i);},pause(){f=true,E.forEach(m=>{m.style.animationPlayState="paused";});},resume(){f&&(f=false,E.forEach(m=>{m.style.animationPlayState="running";}));},seek(m){let L=Math.min(1,Math.max(0,m));v=L,f=true,E.forEach((Z,Ce)=>{Z.classList.remove(t),Z.style.strokeDashoffset=a==="reverse"?`${w[Ce]*L}`:`${w[Ce]*(1-L)}`,u&&(Z.style.opacity=a==="reverse"?`${1-L}`:`${L}`);});},getProgress(){return y()}}}if(Be())return _e();Pe();function ce(){if(!se||B)return;let t=performance.now(),s=Y(),l=c;if(re!==false){let i=t-De,f=i>0?Math.abs(s-(ue<0?s:ue))/i:0;l=c*Math.max(.2,1+f*(typeof re=="number"?re:1)*.04);}ue=s,De=t;let g=ee?oe===-1||s>=oe?"forward":"reverse":a;oe=s;let _=R-N,$=true;if(z){let i=ne(X(s,N,R,l));d&&!ee&&(D=Math.max(D,i),i=D),ie=i,e.style.setProperty("--scroll-draw-progress",String(i));let f=g==="reverse"?1-i:i;e.style.clipPath=j(f),he?.(i),!q&&X(s,N,R,l)>0&&(q=true,ge?.()),i>=1&&!P?(P=true,K?.(),Q<(J==="infinite"?1/0:J??0)&&(Q++,ae=setTimeout(()=>{D=-1,q=false,P=false,e.style.clipPath=j(0);},ke))):i<1&&!d&&(P=false),H=requestAnimationFrame(ce);return}if(E.forEach((i,f)=>{let v=f*I*_,y=ne(X(s,N+v,R+v,l));d&&!ee&&(D=Math.max(D,y),y=D),ie=y,i.style.strokeDashoffset=g==="reverse"?`${w[f]*y}`:`${w[f]*(1-y)}`,u&&(i.style.opacity=g==="reverse"?`${1-y}`:`${y}`),O&&S?i.style.stroke=Me(O,S,y):S&&(i.style.stroke=S),M!==null&&k!==null?i.style.strokeWidth=`${M+(k-M)*y}`:k!==null&&(i.style.strokeWidth=`${k}`),T!==null&&A!==null?i.style.fillOpacity=`${T+(A-T)*y}`:A!==null&&(i.style.fillOpacity=`${A}`),C&&i.tagName.toLowerCase()==="path"&&F[f]&&i.setAttribute("d",We(F[f],C,y)),f===0&&(he?.(y),e.style.setProperty("--scroll-draw-progress",String(y))),y<1&&($=false);}),te){let i=ne(X(s,N,R,l));for(let f in te){let v=parseFloat(f);i>=v&&!le.has(v)&&(le.add(v),te[f]?.());}}!q&&X(s,N,R,l)>0&&(q=true,ge?.()),$&&!P?(P=true,K?.(),Q<(J==="infinite"?1/0:J??0)&&(Q++,ae=setTimeout(()=>{D=-1,q=false,P=false,le.clear(),Ie();},ke))):!$&&!d&&(P=false),H=requestAnimationFrame(ce);}let we=new IntersectionObserver(t=>{t.forEach(s=>{se=s.isIntersecting,se&&!B?H=requestAnimationFrame(ce):cancelAnimationFrame(H);});},{root:x??null,threshold:Ve,rootMargin:Ge}),ve;function fe(){clearTimeout(ve),ve=setTimeout(()=>{E.forEach((t,s)=>{w[s]=$e(t),t.style.strokeDasharray=`${w[s]}`;}),Pe();},150);}return window.addEventListener("resize",fe),window.addEventListener("orientationchange",fe),de>0?setTimeout(()=>we.observe(e),de):we.observe(e),{destroy(){cancelAnimationFrame(H),clearTimeout(ae),we.disconnect(),window.removeEventListener("resize",fe),window.removeEventListener("orientationchange",fe),clearTimeout(ve),be?.remove();},replay(){D=-1,oe=-1,ue=-1,q=false,P=false,Q=0,B=false,le.clear(),clearTimeout(ae),Ie();},pause(){B=true,cancelAnimationFrame(H);},resume(){B&&(B=false,se&&(H=requestAnimationFrame(ce)));},seek(t){let s=Math.min(1,Math.max(0,t));ie=s,D=s,B=true,cancelAnimationFrame(H),qe(s,a);},getProgress(){return ie}}}function nt(e,r={}){let n=me(e,r);return {update(o){n.destroy(),n=me(e,o);},destroy(){n.destroy();}}}function st(e={}){let r=null;function n(o){return r=me(o,e),{destroy(){r?.destroy(),r=null;}}}return {action:n,getInstance:()=>r}}exports.createScrollDraw=st;exports.scrollDraw=nt;
+'use strict';function Qe({bounces:e=3,decay:r=.5}={}){let n=Math.max(1,Math.round(e)),o=Math.max(.01,Math.min(.99,r)),d=Math.sqrt(o),m=0,b=[];for(let u=0;u<n;u++){let h=Math.pow(d,u);b.push(h),m+=h;}let $=[0],R=0;for(let u=0;u<n;u++)R+=b[u]/m,$.push(R);return u=>{if(u<=0)return 0;if(u>=1)return 1;for(let h=0;h<n;h++)if(u<=$[h+1]){let se=(u-$[h])/($[h+1]-$[h]);if(h===0)return se*(2-se);let D=1-Math.pow(o,h);return D+(1-D)*(2*se-1)*(2*se-1)}return 1}}function Ye({amplitude:e=1,period:r=.4}={}){let n=Math.max(1,e),o=Math.max(.1,r),d=n<=1?o/4:o/(2*Math.PI)*Math.asin(1/n);return m=>m<=0?0:m>=1?1:n*Math.pow(2,-10*m)*Math.sin((m-d)*(2*Math.PI)/o)+1}var ke={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:Qe(),elastic:Ye()};function Le(e="top bottom"){let r=e.trim();if(/^\d+(\.\d+)?%$/.test(r))return {element:"top",viewport:r};let[n="top",o="bottom"]=r.split(/\s+/).filter(Boolean);return {element:n,viewport:o}}function We(e,r,n,o){switch(o){case "top":return e+n;case "center":return e+n+r/2;case "bottom":return e+n+r;default:return e+n}}function ze(e,r){if(/^\d+(\.\d+)?%$/.test(e))return r*(parseFloat(e)/100);switch(e){case "top":return 0;case "center":return r/2;case "bottom":return r;default:return r}}function we(e){let r=e.tagName.toLowerCase();if(r==="rect"){let n=parseFloat(e.getAttribute("width")??"0"),o=parseFloat(e.getAttribute("height")??"0");return 2*(n+o)}if(r==="circle"){let n=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*n}return e.getTotalLength()}function Ze(e,r,n){return Math.min(n,Math.max(r,e))}function ne(e,r,n,o){return n===r?0:Ze((e-r)/(n-r)*o,0,1)}function De(e,r,n,o,d){let m=We(e.top,e.height,r,o.element)-ze(o.viewport,n),b=We(e.top,e.height,r,d.element)-ze(d.viewport,n);return {tStart:m,tEnd:b}}function qe(e){let r=/^#([a-f\d])([a-f\d])([a-f\d])$/i.exec(e);if(r)return [parseInt(r[1]+r[1],16),parseInt(r[2]+r[2],16),parseInt(r[3]+r[3],16)];let n=/^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);if(n)return [parseInt(n[1],16),parseInt(n[2],16),parseInt(n[3],16)];let o=/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i.exec(e);return o?[parseInt(o[1]),parseInt(o[2]),parseInt(o[3])]:null}function ve(e,r,n){let o=qe(e),d=qe(r);return !o||!d?e:`rgb(${Math.round(o[0]+(d[0]-o[0])*n)},${Math.round(o[1]+(d[1]-o[1])*n)},${Math.round(o[2]+(d[2]-o[2])*n)})`}function Ve(e,r){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,r);}var Ge={linear:"linear","ease-in":"ease-in","ease-out":"ease-out","ease-in-out":"ease-in-out"},et=0;function tt(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}function rt(e){let r=e.getAttribute("stroke"),n=e.getAttribute("fill");!r||r==="none"?Ve("Element has no stroke \u2014 path will not be visible.",e):n&&n!=="none"&&n!=="transparent"&&Ve("Element has a fill \u2014 it may obscure the stroke animation.",e);}function nt(e,r,n){let o=document.createElement("div");o.setAttribute("data-svg-scroll-draw-debug",""),o.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 d(){let m=n==="x"?window.scrollX:window.scrollY,b=e-m,$=r-m,R=n==="x";o.innerHTML=`
+      <div style="position:absolute;${R?`left:${b}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${b}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;${R?`left:${$}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${$}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(o),window.addEventListener("scroll",d,{passive:true}),d(),o}function Pe(e,r,n){let o=(r.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),d=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,m=>{let b=parseFloat(m),$=o[d++]??b;return String(+(b+($-b)*n).toFixed(4))})}function Ee(e,r={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};let n=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:o="path, polyline, line, polygon, rect, circle",speed:d=1,fade:m=false,easing:b="linear",trigger:$={},stagger:R=0,direction:u="forward",once:h=false,debug:se=false,axis:D="y",scrollContainer:$e,autoReverse:ce=false,delay:ae=0,strokeColor:j,strokeWidth:J,fillOpacity:K,waypoints:Q,velocityScale:fe=false,threshold:Ie=0,rootMargin:Fe="0px",repeat:Y=0,repeatDelay:xe=0,morphTo:N,clip:Me,autoplay:Be=false,duration:_e=1e3,native:Xe=true,onProgress:le,onStart:me,onComplete:oe}=r,G=Me===true?"left":typeof Me=="string"?Me:false,Z=typeof b=="function"?b:ke[b]??ke.linear,Oe=Le($.start??"top bottom"),Ce=Le($.end??"bottom top"),P=typeof $e=="string"?document.querySelector($e):$e??null,H=Array.isArray(j)?j[0]:null,S=Array.isArray(j)?j[1]:typeof j=="string"?j:null,I=Array.isArray(J)?J[0]:null,T=Array.isArray(J)?J[1]:typeof J=="number"?J:null,F=Array.isArray(K)?K[0]:null,A=Array.isArray(K)?K[1]:typeof K=="number"?K:null;function ee(t){let s=t*100;switch(G){case "right":return `inset(0 0 0 ${100-s}%)`;case "top":return `inset(0 0 ${100-s}% 0)`;case "bottom":return `inset(${100-s}% 0 0 0)`;case "center":return `circle(${t*150}% at 50% 50%)`;default:return `inset(0 ${100-s}% 0 0)`}}let x=G?[]:Array.from(e.querySelectorAll(o)),v=[],W=[],B=0,_=0,M=false,C=false,E=0,pe=false,z=-1,de=-1,k=false,te=0,V=0,X,Se=null,U=new Set,ye=-1,Re=performance.now();function ue(){return P?D==="x"?P.scrollLeft:P.scrollTop:D==="x"?window.scrollX:window.scrollY}function Ne(){return P?D==="x"?P.clientWidth:P.clientHeight:D==="x"?window.innerWidth:window.innerHeight}function He(){let t=e.getBoundingClientRect(),s,l,g;if(P){let L=P.getBoundingClientRect();s=D==="x"?t.left-L.left+P.scrollLeft:t.top-L.top+P.scrollTop,l=D==="x"?t.width:t.height,g=ue();}else s=D==="x"?t.left:t.top,l=D==="x"?t.width:t.height,g=ue();let O=De({top:s,height:l},g,Ne(),Oe,Ce);B=O.tStart,_=O.tEnd,se&&process.env.NODE_ENV!=="production"&&(Se?.remove(),Se=nt(B,_,D));}function Ue(t,s){if(e.style.setProperty("--scroll-draw-progress",String(t)),G){let l=s==="reverse"?1-t:t;e.style.clipPath=ee(l);return}x.forEach((l,g)=>{l.style.strokeDashoffset=s==="reverse"?`${v[g]*t}`:`${v[g]*(1-t)}`,m&&(l.style.opacity=s==="reverse"?`${1-t}`:`${t}`),H&&S?l.style.stroke=ve(H,S,t):S&&(l.style.stroke=S),I!==null&&T!==null?l.style.strokeWidth=`${I+(T-I)*t}`:T!==null&&(l.style.strokeWidth=`${T}`),F!==null&&A!==null?l.style.fillOpacity=`${F+(A-F)*t}`:A!==null&&(l.style.fillOpacity=`${A}`),N&&l.tagName.toLowerCase()==="path"&&W[g]&&l.setAttribute("d",Pe(W[g],N,t));});}function he(){if(e.style.setProperty("--scroll-draw-progress","0"),G){e.style.clipPath=ee(0);return}x.forEach((t,s)=>{t.style.strokeDasharray=`${v[s]}`,t.style.strokeDashoffset=u==="reverse"?"0":`${v[s]}`,m?t.style.opacity=u==="reverse"?"1":"0":t.style.opacity="",H&&(t.style.stroke=H),I!==null&&(t.style.strokeWidth=`${I}`),F!==null&&(t.style.fillOpacity=`${F}`),N&&t.tagName.toLowerCase()==="path"&&W[s]&&t.setAttribute("d",W[s]);});}if(x.forEach(t=>{rt(t);let s=we(t);v.push(s),t.tagName.toLowerCase()==="path"?W.push(t.getAttribute("d")??""):W.push(""),n?(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=u==="reverse"?`${s}`:"0",m&&(t.style.opacity="1"),S&&(t.style.stroke=S),T!==null&&(t.style.strokeWidth=`${T}`),A!==null&&(t.style.fillOpacity=`${A}`),N&&t.tagName.toLowerCase()==="path"&&t.setAttribute("d",N)):(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=u==="reverse"?"0":`${s}`,m?t.style.opacity=u==="reverse"?"1":"0":t.style.opacity="",H&&(t.style.stroke=H),I!==null&&(t.style.strokeWidth=`${I}`),F!==null&&(t.style.fillOpacity=`${F}`));}),G){if(n)return e.style.clipPath=ee(1),oe?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=ee(0);}else if(n)return oe?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};function je(){return !(Xe===false||!tt()||!x.length||typeof b!="string"||!(b in Ge)||G||D!=="y"||P||d!==1||R!==0||h||ce||fe!==false||N||Q||Y||ae>0||le||me||oe||j!=null||J!=null||K!=null||($.start??"top bottom").trim()!=="top bottom"||($.end??"bottom top").trim()!=="bottom top")}function Je(){let t=`svg-scroll-draw-${++et}`,s=u==="reverse"?"0":"var(--ssd-len)",l=u==="reverse"?"var(--ssd-len)":"0",g=`stroke-dashoffset:${s};`,O=`stroke-dashoffset:${l};`;m&&(g+=`opacity:${u==="reverse"?1:0};`,O+=`opacity:${u==="reverse"?0:1};`);let L=document.createElement("style");L.setAttribute("data-svg-scroll-draw",""),L.textContent=`@keyframes ${t}{from{${g}}to{${O}}}.${t}{animation-name:${t};animation-duration:auto;animation-timing-function:${Ge[b]};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(L);function a(i,f){i.style.setProperty("--ssd-len",String(v[f])),i.style.strokeDasharray=`${v[f]}`,i.style.strokeDashoffset="",i.style.opacity="",i.style.animationPlayState="",i.classList.add(t);}x.forEach(a);let p=false,w=-1;function c(){if(w>=0)return w;let i=e.getBoundingClientRect(),{tStart:f,tEnd:y}=De({top:i.top,height:i.height},ue(),Ne(),Oe,Ce);return Z(ne(ue(),f,y,d))}return {destroy(){x.forEach(i=>{i.classList.remove(t),i.style.removeProperty("--ssd-len"),i.style.animationPlayState="";}),L.remove();},replay(){p=false,w=-1,x.forEach(a);},pause(){p=true,x.forEach(i=>{i.style.animationPlayState="paused";});},resume(){p&&(p=false,x.forEach(i=>{i.style.animationPlayState="running";}));},seek(i){let f=Math.min(1,Math.max(0,i));w=f,p=true,x.forEach((y,re)=>{y.classList.remove(t),y.style.strokeDashoffset=u==="reverse"?`${v[re]*f}`:`${v[re]*(1-f)}`,m&&(y.style.opacity=u==="reverse"?`${1-f}`:`${f}`);});},getProgress(){return c()}}}if(je())return Je();function Ke(){let t=Math.max(1,_e),s=0,l=0;function g(c){let i=true;if(G){let f=Math.min(1,Math.max(0,c/t)),y=Z(f);te=y,e.style.setProperty("--scroll-draw-progress",String(y)),e.style.clipPath=ee(u==="reverse"?1-y:y),le?.(y),f<1&&(i=false);}else x.forEach((f,y)=>{let re=y*R*t,ie=Math.min(1,Math.max(0,(c-re)/t)),q=Z(ie);f.style.strokeDashoffset=u==="reverse"?`${v[y]*q}`:`${v[y]*(1-q)}`,m&&(f.style.opacity=u==="reverse"?`${1-q}`:`${q}`),H&&S?f.style.stroke=ve(H,S,q):S&&(f.style.stroke=S),I!==null&&T!==null?f.style.strokeWidth=`${I+(T-I)*q}`:T!==null&&(f.style.strokeWidth=`${T}`),F!==null&&A!==null?f.style.fillOpacity=`${F+(A-F)*q}`:A!==null&&(f.style.fillOpacity=`${A}`),N&&f.tagName.toLowerCase()==="path"&&W[y]&&f.setAttribute("d",Pe(W[y],N,q)),y===0&&(le?.(q),e.style.setProperty("--scroll-draw-progress",String(q))),ie<1&&(i=false);});if(Q){let f=Math.min(1,Math.max(0,c/t)),y=Z(f);for(let re in Q){let ie=parseFloat(re);y>=ie&&!U.has(ie)&&(U.add(ie),Q[re]?.());}}return i}function O(c){if(k)return;let i=c-s;C||(C=true,me?.());let f=g(i);if(f&&!M){M=true,g(t*(1+Math.max(0,x.length-1)*R)),oe?.(),V<(Y==="infinite"?1/0:Y??0)&&(V++,X=setTimeout(()=>{s=performance.now(),C=false,M=false,U.clear(),he(),E=requestAnimationFrame(O);},xe));return}f||(E=requestAnimationFrame(O));}function L(){cancelAnimationFrame(E),clearTimeout(X),s=performance.now(),l=0,k=false,C=false,M=false,V=0,U.clear(),he(),E=requestAnimationFrame(O);}let a=new IntersectionObserver(c=>{c.forEach(i=>{i.isIntersecting&&!(h&&M)?L():!i.isIntersecting&&!h&&!M&&(cancelAnimationFrame(E),clearTimeout(X),s=null);});},{root:P??null,threshold:Ie,rootMargin:Fe}),p;function w(){clearTimeout(p),p=setTimeout(()=>{x.forEach((c,i)=>{v[i]=we(c),c.style.strokeDasharray=`${v[i]}`;});},150);}return window.addEventListener("resize",w),window.addEventListener("orientationchange",w),ae>0?setTimeout(()=>a.observe(e),ae):a.observe(e),{destroy(){cancelAnimationFrame(E),clearTimeout(X),a.disconnect(),window.removeEventListener("resize",w),window.removeEventListener("orientationchange",w),clearTimeout(p);},replay(){V=0,L();},pause(){k||(k=true,l=performance.now()-s,cancelAnimationFrame(E));},resume(){k&&(k=false,s=performance.now()-l,E=requestAnimationFrame(O));},seek(c){let i=Math.min(1,Math.max(0,c));te=i,k=true,l=i*t,s=performance.now()-l,cancelAnimationFrame(E),g(l);},getProgress(){return te}}}if(Be)return Ke();He();function ge(){if(!pe||k)return;let t=performance.now(),s=ue(),l=d;if(fe!==false){let a=t-Re,p=a>0?Math.abs(s-(ye<0?s:ye))/a:0;l=d*Math.max(.2,1+p*(typeof fe=="number"?fe:1)*.04);}ye=s,Re=t;let g=ce?de===-1||s>=de?"forward":"reverse":u;de=s;let O=_-B,L=true;if(G){let a=Z(ne(s,B,_,l));h&&!ce&&(z=Math.max(z,a),a=z),te=a,e.style.setProperty("--scroll-draw-progress",String(a));let p=g==="reverse"?1-a:a;e.style.clipPath=ee(p),le?.(a),!C&&ne(s,B,_,l)>0&&(C=true,me?.()),a>=1&&!M?(M=true,oe?.(),V<(Y==="infinite"?1/0:Y??0)&&(V++,X=setTimeout(()=>{z=-1,C=false,M=false,e.style.clipPath=ee(0);},xe))):a<1&&!h&&(M=false),E=requestAnimationFrame(ge);return}if(x.forEach((a,p)=>{let w=p*R*O,c=Z(ne(s,B+w,_+w,l));h&&!ce&&(z=Math.max(z,c),c=z),te=c,a.style.strokeDashoffset=g==="reverse"?`${v[p]*c}`:`${v[p]*(1-c)}`,m&&(a.style.opacity=g==="reverse"?`${1-c}`:`${c}`),H&&S?a.style.stroke=ve(H,S,c):S&&(a.style.stroke=S),I!==null&&T!==null?a.style.strokeWidth=`${I+(T-I)*c}`:T!==null&&(a.style.strokeWidth=`${T}`),F!==null&&A!==null?a.style.fillOpacity=`${F+(A-F)*c}`:A!==null&&(a.style.fillOpacity=`${A}`),N&&a.tagName.toLowerCase()==="path"&&W[p]&&a.setAttribute("d",Pe(W[p],N,c)),p===0&&(le?.(c),e.style.setProperty("--scroll-draw-progress",String(c))),c<1&&(L=false);}),Q){let a=Z(ne(s,B,_,l));for(let p in Q){let w=parseFloat(p);a>=w&&!U.has(w)&&(U.add(w),Q[p]?.());}}!C&&ne(s,B,_,l)>0&&(C=true,me?.()),L&&!M?(M=true,oe?.(),V<(Y==="infinite"?1/0:Y??0)&&(V++,X=setTimeout(()=>{z=-1,C=false,M=false,U.clear(),he();},xe))):!L&&!h&&(M=false),E=requestAnimationFrame(ge);}let Te=new IntersectionObserver(t=>{t.forEach(s=>{pe=s.isIntersecting,pe&&!k?E=requestAnimationFrame(ge):cancelAnimationFrame(E);});},{root:P??null,threshold:Ie,rootMargin:Fe}),Ae;function be(){clearTimeout(Ae),Ae=setTimeout(()=>{x.forEach((t,s)=>{v[s]=we(t),t.style.strokeDasharray=`${v[s]}`;}),He();},150);}return window.addEventListener("resize",be),window.addEventListener("orientationchange",be),ae>0?setTimeout(()=>Te.observe(e),ae):Te.observe(e),{destroy(){cancelAnimationFrame(E),clearTimeout(X),Te.disconnect(),window.removeEventListener("resize",be),window.removeEventListener("orientationchange",be),clearTimeout(Ae),Se?.remove();},replay(){z=-1,de=-1,ye=-1,C=false,M=false,V=0,k=false,U.clear(),clearTimeout(X),he();},pause(){k=true,cancelAnimationFrame(E);},resume(){k&&(k=false,pe&&(E=requestAnimationFrame(ge)));},seek(t){let s=Math.min(1,Math.max(0,t));te=s,z=s,k=true,cancelAnimationFrame(E),Ue(s,u);},getProgress(){return te}}}function lt(e,r={}){let n=Ee(e,r);return {update(o){n.destroy(),n=Ee(e,o);},destroy(){n.destroy();}}}function ut(e={}){let r=null;function n(o){return r=Ee(o,e),{destroy(){r?.destroy(),r=null;}}}return {action:n,getInstance:()=>r}}exports.createScrollDraw=ut;exports.scrollDraw=lt;

package/dist/svelte/index.d.mts

@@ -60,6 +60,25 @@ interface ScrollDrawOptions {
     onProgress?: (alpha: number) => void;
     onStart?: () => void;
     onComplete?: () => void;
+    /**
+     * Trigger the animation when the element enters the viewport instead of
+     * tying it to scroll position. The draw runs over `duration` milliseconds,
+     * replaying each time the element re-enters the viewport (use `once: true`
+     * to play only the first time).
+     *
+     * All visual options work in autoplay mode — `easing`, `stagger`, `fade`,
+     * `strokeColor`, `strokeWidth`, `fillOpacity`, `clip`, `morphTo`, `waypoints`,
+     * `repeat`, `repeatDelay`, `onStart`, `onComplete`, `onProgress`, etc.
+     *
+     * The full instance API (`pause`, `resume`, `seek`, `replay`, `getProgress`)
+     * also works — `seek(0.5)` pauses at 50% of the duration.
+     */
+    autoplay?: boolean;
+    /**
+     * Duration of the autoplay animation in milliseconds. Only used when
+     * `autoplay: true`. Default `1000`.
+     */
+    duration?: number;
     /**
      * Use the browser's native CSS scroll-driven animation
      * (`animation-timeline: view()`) when the configuration is simple enough and

package/dist/svelte/index.d.ts

@@ -60,6 +60,25 @@ interface ScrollDrawOptions {
     onProgress?: (alpha: number) => void;
     onStart?: () => void;
     onComplete?: () => void;
+    /**
+     * Trigger the animation when the element enters the viewport instead of
+     * tying it to scroll position. The draw runs over `duration` milliseconds,
+     * replaying each time the element re-enters the viewport (use `once: true`
+     * to play only the first time).
+     *
+     * All visual options work in autoplay mode — `easing`, `stagger`, `fade`,
+     * `strokeColor`, `strokeWidth`, `fillOpacity`, `clip`, `morphTo`, `waypoints`,
+     * `repeat`, `repeatDelay`, `onStart`, `onComplete`, `onProgress`, etc.
+     *
+     * The full instance API (`pause`, `resume`, `seek`, `replay`, `getProgress`)
+     * also works — `seek(0.5)` pauses at 50% of the duration.
+     */
+    autoplay?: boolean;
+    /**
+     * Duration of the autoplay animation in milliseconds. Only used when
+     * `autoplay: true`. Default `1000`.
+     */
+    duration?: number;
     /**
      * Use the browser's native CSS scroll-driven animation
      * (`animation-timeline: view()`) when the configuration is simple enough and

package/dist/svelte/index.mjs

@@ -1,3 +1,3 @@
-function Xe({bounces:e=3,decay:r=.5}={}){let n=Math.max(1,Math.round(e)),o=Math.max(.01,Math.min(.99,r)),c=Math.sqrt(o),u=0,p=[];for(let a=0;a<n;a++){let d=Math.pow(c,a);p.push(d),u+=d;}let h=[0],I=0;for(let a=0;a<n;a++)I+=p[a]/u,h.push(I);return a=>{if(a<=0)return 0;if(a>=1)return 1;for(let d=0;d<n;d++)if(a<=h[d+1]){let U=(a-h[d])/(h[d+1]-h[d]);if(d===0)return U*(2-U);let b=1-Math.pow(o,d);return b+(1-b)*(2*U-1)*(2*U-1)}return 1}}function Ue({amplitude:e=1,period:r=.4}={}){let n=Math.max(1,e),o=Math.max(.1,r),c=n<=1?o/4:o/(2*Math.PI)*Math.asin(1/n);return u=>u<=0?0:u>=1?1:n*Math.pow(2,-10*u)*Math.sin((u-c)*(2*Math.PI)/o)+1}var xe={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:Xe(),elastic:Ue()};function Ee(e="top bottom"){let r=e.trim();if(/^\d+(\.\d+)?%$/.test(r))return {element:"top",viewport:r};let[n="top",o="bottom"]=r.split(/\s+/).filter(Boolean);return {element:n,viewport:o}}function Oe(e,r,n,o){switch(o){case "top":return e+n;case "center":return e+n+r/2;case "bottom":return e+n+r;default:return e+n}}function Fe(e,r){if(/^\d+(\.\d+)?%$/.test(e))return r*(parseFloat(e)/100);switch(e){case "top":return 0;case "center":return r/2;case "bottom":return r;default:return r}}function $e(e){let r=e.tagName.toLowerCase();if(r==="rect"){let n=parseFloat(e.getAttribute("width")??"0"),o=parseFloat(e.getAttribute("height")??"0");return 2*(n+o)}if(r==="circle"){let n=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*n}return e.getTotalLength()}function je(e,r,n){return Math.min(n,Math.max(r,e))}function X(e,r,n,o){return n===r?0:je((e-r)/(n-r)*o,0,1)}function Se(e,r,n,o,c){let u=Oe(e.top,e.height,r,o.element)-Fe(o.viewport,n),p=Oe(e.top,e.height,r,c.element)-Fe(c.viewport,n);return {tStart:u,tEnd:p}}function Ne(e){let r=/^#([a-f\d])([a-f\d])([a-f\d])$/i.exec(e);if(r)return [parseInt(r[1]+r[1],16),parseInt(r[2]+r[2],16),parseInt(r[3]+r[3],16)];let n=/^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);if(n)return [parseInt(n[1],16),parseInt(n[2],16),parseInt(n[3],16)];let o=/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i.exec(e);return o?[parseInt(o[1]),parseInt(o[2]),parseInt(o[3])]:null}function Me(e,r,n){let o=Ne(e),c=Ne(r);return !o||!c?e:`rgb(${Math.round(o[0]+(c[0]-o[0])*n)},${Math.round(o[1]+(c[1]-o[1])*n)},${Math.round(o[2]+(c[2]-o[2])*n)})`}function Re(e,r){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,r);}var He={linear:"linear","ease-in":"ease-in","ease-out":"ease-out","ease-in-out":"ease-in-out"},Je=0;function Ke(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}function Qe(e){let r=e.getAttribute("stroke"),n=e.getAttribute("fill");!r||r==="none"?Re("Element has no stroke \u2014 path will not be visible.",e):n&&n!=="none"&&n!=="transparent"&&Re("Element has a fill \u2014 it may obscure the stroke animation.",e);}function Ye(e,r,n){let o=document.createElement("div");o.setAttribute("data-svg-scroll-draw-debug",""),o.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 u=n==="x"?window.scrollX:window.scrollY,p=e-u,h=r-u,I=n==="x";o.innerHTML=`
-      <div style="position:absolute;${I?`left:${p}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${p}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;${I?`left:${h}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${h}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(o),window.addEventListener("scroll",c,{passive:true}),c(),o}function We(e,r,n){let o=(r.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),c=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,u=>{let p=parseFloat(u),h=o[c++]??p;return String(+(p+(h-p)*n).toFixed(4))})}function me(e,r={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};let n=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:o="path, polyline, line, polygon, rect, circle",speed:c=1,fade:u=false,easing:p="linear",trigger:h={},stagger:I=0,direction:a="forward",once:d=false,debug:U=false,axis:b="y",scrollContainer:pe,autoReverse:ee=false,delay:de=0,strokeColor:W,strokeWidth:V,fillOpacity:G,waypoints:te,velocityScale:re=false,threshold:Ve=0,rootMargin:Ge="0px",repeat:J=0,repeatDelay:ke=0,morphTo:C,clip:ye,native:ze=true,onProgress:he,onStart:ge,onComplete:K}=r,z=ye===true?"left":typeof ye=="string"?ye:false,ne=typeof p=="function"?p:xe[p]??xe.linear,Te=Ee(h.start??"top bottom"),Ae=Ee(h.end??"bottom top"),x=typeof pe=="string"?document.querySelector(pe):pe??null,O=Array.isArray(W)?W[0]:null,S=Array.isArray(W)?W[1]:typeof W=="string"?W:null,M=Array.isArray(V)?V[0]:null,k=Array.isArray(V)?V[1]:typeof V=="number"?V:null,T=Array.isArray(G)?G[0]:null,A=Array.isArray(G)?G[1]:typeof G=="number"?G:null;function j(t){let s=t*100;switch(z){case "right":return `inset(0 0 0 ${100-s}%)`;case "top":return `inset(0 0 ${100-s}% 0)`;case "bottom":return `inset(${100-s}% 0 0 0)`;case "center":return `circle(${t*150}% at 50% 50%)`;default:return `inset(0 ${100-s}% 0 0)`}}let E=z?[]:Array.from(e.querySelectorAll(o)),w=[],F=[],N=0,R=0,P=false,q=false,H=0,se=false,D=-1,oe=-1,B=false,ie=0,Q=0,ae,be=null,le=new Set,ue=-1,De=performance.now();function Y(){return x?b==="x"?x.scrollLeft:x.scrollTop:b==="x"?window.scrollX:window.scrollY}function Le(){return x?b==="x"?x.clientWidth:x.clientHeight:b==="x"?window.innerWidth:window.innerHeight}function Pe(){let t=e.getBoundingClientRect(),s,l,g;if(x){let $=x.getBoundingClientRect();s=b==="x"?t.left-$.left+x.scrollLeft:t.top-$.top+x.scrollTop,l=b==="x"?t.width:t.height,g=Y();}else s=b==="x"?t.left:t.top,l=b==="x"?t.width:t.height,g=Y();let _=Se({top:s,height:l},g,Le(),Te,Ae);N=_.tStart,R=_.tEnd,U&&process.env.NODE_ENV!=="production"&&(be?.remove(),be=Ye(N,R,b));}function qe(t,s){if(e.style.setProperty("--scroll-draw-progress",String(t)),z){let l=s==="reverse"?1-t:t;e.style.clipPath=j(l);return}E.forEach((l,g)=>{l.style.strokeDashoffset=s==="reverse"?`${w[g]*t}`:`${w[g]*(1-t)}`,u&&(l.style.opacity=s==="reverse"?`${1-t}`:`${t}`),O&&S?l.style.stroke=Me(O,S,t):S&&(l.style.stroke=S),M!==null&&k!==null?l.style.strokeWidth=`${M+(k-M)*t}`:k!==null&&(l.style.strokeWidth=`${k}`),T!==null&&A!==null?l.style.fillOpacity=`${T+(A-T)*t}`:A!==null&&(l.style.fillOpacity=`${A}`),C&&l.tagName.toLowerCase()==="path"&&F[g]&&l.setAttribute("d",We(F[g],C,t));});}function Ie(){if(e.style.setProperty("--scroll-draw-progress","0"),z){e.style.clipPath=j(0);return}E.forEach((t,s)=>{t.style.strokeDasharray=`${w[s]}`,t.style.strokeDashoffset=a==="reverse"?"0":`${w[s]}`,u?t.style.opacity=a==="reverse"?"1":"0":t.style.opacity="",O&&(t.style.stroke=O),M!==null&&(t.style.strokeWidth=`${M}`),T!==null&&(t.style.fillOpacity=`${T}`),C&&t.tagName.toLowerCase()==="path"&&F[s]&&t.setAttribute("d",F[s]);});}if(E.forEach(t=>{Qe(t);let s=$e(t);w.push(s),t.tagName.toLowerCase()==="path"?F.push(t.getAttribute("d")??""):F.push(""),n?(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=a==="reverse"?`${s}`:"0",u&&(t.style.opacity="1"),S&&(t.style.stroke=S),k!==null&&(t.style.strokeWidth=`${k}`),A!==null&&(t.style.fillOpacity=`${A}`),C&&t.tagName.toLowerCase()==="path"&&t.setAttribute("d",C)):(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=a==="reverse"?"0":`${s}`,u?t.style.opacity=a==="reverse"?"1":"0":t.style.opacity="",O&&(t.style.stroke=O),M!==null&&(t.style.strokeWidth=`${M}`),T!==null&&(t.style.fillOpacity=`${T}`));}),z){if(n)return e.style.clipPath=j(1),K?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=j(0);}else if(n)return K?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};function Be(){return !(ze===false||!Ke()||!E.length||typeof p!="string"||!(p in He)||z||b!=="y"||x||c!==1||I!==0||d||ee||re!==false||C||te||J||de>0||he||ge||K||W!=null||V!=null||G!=null||(h.start??"top bottom").trim()!=="top bottom"||(h.end??"bottom top").trim()!=="bottom top")}function _e(){let t=`svg-scroll-draw-${++Je}`,s=a==="reverse"?"0":"var(--ssd-len)",l=a==="reverse"?"var(--ssd-len)":"0",g=`stroke-dashoffset:${s};`,_=`stroke-dashoffset:${l};`;u&&(g+=`opacity:${a==="reverse"?1:0};`,_+=`opacity:${a==="reverse"?0:1};`);let $=document.createElement("style");$.setAttribute("data-svg-scroll-draw",""),$.textContent=`@keyframes ${t}{from{${g}}to{${_}}}.${t}{animation-name:${t};animation-duration:auto;animation-timing-function:${He[p]};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild($);function i(m,L){m.style.setProperty("--ssd-len",String(w[L])),m.style.strokeDasharray=`${w[L]}`,m.style.strokeDashoffset="",m.style.opacity="",m.style.animationPlayState="",m.classList.add(t);}E.forEach(i);let f=false,v=-1;function y(){if(v>=0)return v;let m=e.getBoundingClientRect(),{tStart:L,tEnd:Z}=Se({top:m.top,height:m.height},Y(),Le(),Te,Ae);return ne(X(Y(),L,Z,c))}return {destroy(){E.forEach(m=>{m.classList.remove(t),m.style.removeProperty("--ssd-len"),m.style.animationPlayState="";}),$.remove();},replay(){f=false,v=-1,E.forEach(i);},pause(){f=true,E.forEach(m=>{m.style.animationPlayState="paused";});},resume(){f&&(f=false,E.forEach(m=>{m.style.animationPlayState="running";}));},seek(m){let L=Math.min(1,Math.max(0,m));v=L,f=true,E.forEach((Z,Ce)=>{Z.classList.remove(t),Z.style.strokeDashoffset=a==="reverse"?`${w[Ce]*L}`:`${w[Ce]*(1-L)}`,u&&(Z.style.opacity=a==="reverse"?`${1-L}`:`${L}`);});},getProgress(){return y()}}}if(Be())return _e();Pe();function ce(){if(!se||B)return;let t=performance.now(),s=Y(),l=c;if(re!==false){let i=t-De,f=i>0?Math.abs(s-(ue<0?s:ue))/i:0;l=c*Math.max(.2,1+f*(typeof re=="number"?re:1)*.04);}ue=s,De=t;let g=ee?oe===-1||s>=oe?"forward":"reverse":a;oe=s;let _=R-N,$=true;if(z){let i=ne(X(s,N,R,l));d&&!ee&&(D=Math.max(D,i),i=D),ie=i,e.style.setProperty("--scroll-draw-progress",String(i));let f=g==="reverse"?1-i:i;e.style.clipPath=j(f),he?.(i),!q&&X(s,N,R,l)>0&&(q=true,ge?.()),i>=1&&!P?(P=true,K?.(),Q<(J==="infinite"?1/0:J??0)&&(Q++,ae=setTimeout(()=>{D=-1,q=false,P=false,e.style.clipPath=j(0);},ke))):i<1&&!d&&(P=false),H=requestAnimationFrame(ce);return}if(E.forEach((i,f)=>{let v=f*I*_,y=ne(X(s,N+v,R+v,l));d&&!ee&&(D=Math.max(D,y),y=D),ie=y,i.style.strokeDashoffset=g==="reverse"?`${w[f]*y}`:`${w[f]*(1-y)}`,u&&(i.style.opacity=g==="reverse"?`${1-y}`:`${y}`),O&&S?i.style.stroke=Me(O,S,y):S&&(i.style.stroke=S),M!==null&&k!==null?i.style.strokeWidth=`${M+(k-M)*y}`:k!==null&&(i.style.strokeWidth=`${k}`),T!==null&&A!==null?i.style.fillOpacity=`${T+(A-T)*y}`:A!==null&&(i.style.fillOpacity=`${A}`),C&&i.tagName.toLowerCase()==="path"&&F[f]&&i.setAttribute("d",We(F[f],C,y)),f===0&&(he?.(y),e.style.setProperty("--scroll-draw-progress",String(y))),y<1&&($=false);}),te){let i=ne(X(s,N,R,l));for(let f in te){let v=parseFloat(f);i>=v&&!le.has(v)&&(le.add(v),te[f]?.());}}!q&&X(s,N,R,l)>0&&(q=true,ge?.()),$&&!P?(P=true,K?.(),Q<(J==="infinite"?1/0:J??0)&&(Q++,ae=setTimeout(()=>{D=-1,q=false,P=false,le.clear(),Ie();},ke))):!$&&!d&&(P=false),H=requestAnimationFrame(ce);}let we=new IntersectionObserver(t=>{t.forEach(s=>{se=s.isIntersecting,se&&!B?H=requestAnimationFrame(ce):cancelAnimationFrame(H);});},{root:x??null,threshold:Ve,rootMargin:Ge}),ve;function fe(){clearTimeout(ve),ve=setTimeout(()=>{E.forEach((t,s)=>{w[s]=$e(t),t.style.strokeDasharray=`${w[s]}`;}),Pe();},150);}return window.addEventListener("resize",fe),window.addEventListener("orientationchange",fe),de>0?setTimeout(()=>we.observe(e),de):we.observe(e),{destroy(){cancelAnimationFrame(H),clearTimeout(ae),we.disconnect(),window.removeEventListener("resize",fe),window.removeEventListener("orientationchange",fe),clearTimeout(ve),be?.remove();},replay(){D=-1,oe=-1,ue=-1,q=false,P=false,Q=0,B=false,le.clear(),clearTimeout(ae),Ie();},pause(){B=true,cancelAnimationFrame(H);},resume(){B&&(B=false,se&&(H=requestAnimationFrame(ce)));},seek(t){let s=Math.min(1,Math.max(0,t));ie=s,D=s,B=true,cancelAnimationFrame(H),qe(s,a);},getProgress(){return ie}}}function nt(e,r={}){let n=me(e,r);return {update(o){n.destroy(),n=me(e,o);},destroy(){n.destroy();}}}function st(e={}){let r=null;function n(o){return r=me(o,e),{destroy(){r?.destroy(),r=null;}}}return {action:n,getInstance:()=>r}}export{st as createScrollDraw,nt as scrollDraw};
+function Qe({bounces:e=3,decay:r=.5}={}){let n=Math.max(1,Math.round(e)),o=Math.max(.01,Math.min(.99,r)),d=Math.sqrt(o),m=0,b=[];for(let u=0;u<n;u++){let h=Math.pow(d,u);b.push(h),m+=h;}let $=[0],R=0;for(let u=0;u<n;u++)R+=b[u]/m,$.push(R);return u=>{if(u<=0)return 0;if(u>=1)return 1;for(let h=0;h<n;h++)if(u<=$[h+1]){let se=(u-$[h])/($[h+1]-$[h]);if(h===0)return se*(2-se);let D=1-Math.pow(o,h);return D+(1-D)*(2*se-1)*(2*se-1)}return 1}}function Ye({amplitude:e=1,period:r=.4}={}){let n=Math.max(1,e),o=Math.max(.1,r),d=n<=1?o/4:o/(2*Math.PI)*Math.asin(1/n);return m=>m<=0?0:m>=1?1:n*Math.pow(2,-10*m)*Math.sin((m-d)*(2*Math.PI)/o)+1}var ke={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:Qe(),elastic:Ye()};function Le(e="top bottom"){let r=e.trim();if(/^\d+(\.\d+)?%$/.test(r))return {element:"top",viewport:r};let[n="top",o="bottom"]=r.split(/\s+/).filter(Boolean);return {element:n,viewport:o}}function We(e,r,n,o){switch(o){case "top":return e+n;case "center":return e+n+r/2;case "bottom":return e+n+r;default:return e+n}}function ze(e,r){if(/^\d+(\.\d+)?%$/.test(e))return r*(parseFloat(e)/100);switch(e){case "top":return 0;case "center":return r/2;case "bottom":return r;default:return r}}function we(e){let r=e.tagName.toLowerCase();if(r==="rect"){let n=parseFloat(e.getAttribute("width")??"0"),o=parseFloat(e.getAttribute("height")??"0");return 2*(n+o)}if(r==="circle"){let n=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*n}return e.getTotalLength()}function Ze(e,r,n){return Math.min(n,Math.max(r,e))}function ne(e,r,n,o){return n===r?0:Ze((e-r)/(n-r)*o,0,1)}function De(e,r,n,o,d){let m=We(e.top,e.height,r,o.element)-ze(o.viewport,n),b=We(e.top,e.height,r,d.element)-ze(d.viewport,n);return {tStart:m,tEnd:b}}function qe(e){let r=/^#([a-f\d])([a-f\d])([a-f\d])$/i.exec(e);if(r)return [parseInt(r[1]+r[1],16),parseInt(r[2]+r[2],16),parseInt(r[3]+r[3],16)];let n=/^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);if(n)return [parseInt(n[1],16),parseInt(n[2],16),parseInt(n[3],16)];let o=/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i.exec(e);return o?[parseInt(o[1]),parseInt(o[2]),parseInt(o[3])]:null}function ve(e,r,n){let o=qe(e),d=qe(r);return !o||!d?e:`rgb(${Math.round(o[0]+(d[0]-o[0])*n)},${Math.round(o[1]+(d[1]-o[1])*n)},${Math.round(o[2]+(d[2]-o[2])*n)})`}function Ve(e,r){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,r);}var Ge={linear:"linear","ease-in":"ease-in","ease-out":"ease-out","ease-in-out":"ease-in-out"},et=0;function tt(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}function rt(e){let r=e.getAttribute("stroke"),n=e.getAttribute("fill");!r||r==="none"?Ve("Element has no stroke \u2014 path will not be visible.",e):n&&n!=="none"&&n!=="transparent"&&Ve("Element has a fill \u2014 it may obscure the stroke animation.",e);}function nt(e,r,n){let o=document.createElement("div");o.setAttribute("data-svg-scroll-draw-debug",""),o.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 d(){let m=n==="x"?window.scrollX:window.scrollY,b=e-m,$=r-m,R=n==="x";o.innerHTML=`
+      <div style="position:absolute;${R?`left:${b}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${b}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;${R?`left:${$}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${$}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(o),window.addEventListener("scroll",d,{passive:true}),d(),o}function Pe(e,r,n){let o=(r.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),d=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,m=>{let b=parseFloat(m),$=o[d++]??b;return String(+(b+($-b)*n).toFixed(4))})}function Ee(e,r={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};let n=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:o="path, polyline, line, polygon, rect, circle",speed:d=1,fade:m=false,easing:b="linear",trigger:$={},stagger:R=0,direction:u="forward",once:h=false,debug:se=false,axis:D="y",scrollContainer:$e,autoReverse:ce=false,delay:ae=0,strokeColor:j,strokeWidth:J,fillOpacity:K,waypoints:Q,velocityScale:fe=false,threshold:Ie=0,rootMargin:Fe="0px",repeat:Y=0,repeatDelay:xe=0,morphTo:N,clip:Me,autoplay:Be=false,duration:_e=1e3,native:Xe=true,onProgress:le,onStart:me,onComplete:oe}=r,G=Me===true?"left":typeof Me=="string"?Me:false,Z=typeof b=="function"?b:ke[b]??ke.linear,Oe=Le($.start??"top bottom"),Ce=Le($.end??"bottom top"),P=typeof $e=="string"?document.querySelector($e):$e??null,H=Array.isArray(j)?j[0]:null,S=Array.isArray(j)?j[1]:typeof j=="string"?j:null,I=Array.isArray(J)?J[0]:null,T=Array.isArray(J)?J[1]:typeof J=="number"?J:null,F=Array.isArray(K)?K[0]:null,A=Array.isArray(K)?K[1]:typeof K=="number"?K:null;function ee(t){let s=t*100;switch(G){case "right":return `inset(0 0 0 ${100-s}%)`;case "top":return `inset(0 0 ${100-s}% 0)`;case "bottom":return `inset(${100-s}% 0 0 0)`;case "center":return `circle(${t*150}% at 50% 50%)`;default:return `inset(0 ${100-s}% 0 0)`}}let x=G?[]:Array.from(e.querySelectorAll(o)),v=[],W=[],B=0,_=0,M=false,C=false,E=0,pe=false,z=-1,de=-1,k=false,te=0,V=0,X,Se=null,U=new Set,ye=-1,Re=performance.now();function ue(){return P?D==="x"?P.scrollLeft:P.scrollTop:D==="x"?window.scrollX:window.scrollY}function Ne(){return P?D==="x"?P.clientWidth:P.clientHeight:D==="x"?window.innerWidth:window.innerHeight}function He(){let t=e.getBoundingClientRect(),s,l,g;if(P){let L=P.getBoundingClientRect();s=D==="x"?t.left-L.left+P.scrollLeft:t.top-L.top+P.scrollTop,l=D==="x"?t.width:t.height,g=ue();}else s=D==="x"?t.left:t.top,l=D==="x"?t.width:t.height,g=ue();let O=De({top:s,height:l},g,Ne(),Oe,Ce);B=O.tStart,_=O.tEnd,se&&process.env.NODE_ENV!=="production"&&(Se?.remove(),Se=nt(B,_,D));}function Ue(t,s){if(e.style.setProperty("--scroll-draw-progress",String(t)),G){let l=s==="reverse"?1-t:t;e.style.clipPath=ee(l);return}x.forEach((l,g)=>{l.style.strokeDashoffset=s==="reverse"?`${v[g]*t}`:`${v[g]*(1-t)}`,m&&(l.style.opacity=s==="reverse"?`${1-t}`:`${t}`),H&&S?l.style.stroke=ve(H,S,t):S&&(l.style.stroke=S),I!==null&&T!==null?l.style.strokeWidth=`${I+(T-I)*t}`:T!==null&&(l.style.strokeWidth=`${T}`),F!==null&&A!==null?l.style.fillOpacity=`${F+(A-F)*t}`:A!==null&&(l.style.fillOpacity=`${A}`),N&&l.tagName.toLowerCase()==="path"&&W[g]&&l.setAttribute("d",Pe(W[g],N,t));});}function he(){if(e.style.setProperty("--scroll-draw-progress","0"),G){e.style.clipPath=ee(0);return}x.forEach((t,s)=>{t.style.strokeDasharray=`${v[s]}`,t.style.strokeDashoffset=u==="reverse"?"0":`${v[s]}`,m?t.style.opacity=u==="reverse"?"1":"0":t.style.opacity="",H&&(t.style.stroke=H),I!==null&&(t.style.strokeWidth=`${I}`),F!==null&&(t.style.fillOpacity=`${F}`),N&&t.tagName.toLowerCase()==="path"&&W[s]&&t.setAttribute("d",W[s]);});}if(x.forEach(t=>{rt(t);let s=we(t);v.push(s),t.tagName.toLowerCase()==="path"?W.push(t.getAttribute("d")??""):W.push(""),n?(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=u==="reverse"?`${s}`:"0",m&&(t.style.opacity="1"),S&&(t.style.stroke=S),T!==null&&(t.style.strokeWidth=`${T}`),A!==null&&(t.style.fillOpacity=`${A}`),N&&t.tagName.toLowerCase()==="path"&&t.setAttribute("d",N)):(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=u==="reverse"?"0":`${s}`,m?t.style.opacity=u==="reverse"?"1":"0":t.style.opacity="",H&&(t.style.stroke=H),I!==null&&(t.style.strokeWidth=`${I}`),F!==null&&(t.style.fillOpacity=`${F}`));}),G){if(n)return e.style.clipPath=ee(1),oe?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=ee(0);}else if(n)return oe?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};function je(){return !(Xe===false||!tt()||!x.length||typeof b!="string"||!(b in Ge)||G||D!=="y"||P||d!==1||R!==0||h||ce||fe!==false||N||Q||Y||ae>0||le||me||oe||j!=null||J!=null||K!=null||($.start??"top bottom").trim()!=="top bottom"||($.end??"bottom top").trim()!=="bottom top")}function Je(){let t=`svg-scroll-draw-${++et}`,s=u==="reverse"?"0":"var(--ssd-len)",l=u==="reverse"?"var(--ssd-len)":"0",g=`stroke-dashoffset:${s};`,O=`stroke-dashoffset:${l};`;m&&(g+=`opacity:${u==="reverse"?1:0};`,O+=`opacity:${u==="reverse"?0:1};`);let L=document.createElement("style");L.setAttribute("data-svg-scroll-draw",""),L.textContent=`@keyframes ${t}{from{${g}}to{${O}}}.${t}{animation-name:${t};animation-duration:auto;animation-timing-function:${Ge[b]};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(L);function a(i,f){i.style.setProperty("--ssd-len",String(v[f])),i.style.strokeDasharray=`${v[f]}`,i.style.strokeDashoffset="",i.style.opacity="",i.style.animationPlayState="",i.classList.add(t);}x.forEach(a);let p=false,w=-1;function c(){if(w>=0)return w;let i=e.getBoundingClientRect(),{tStart:f,tEnd:y}=De({top:i.top,height:i.height},ue(),Ne(),Oe,Ce);return Z(ne(ue(),f,y,d))}return {destroy(){x.forEach(i=>{i.classList.remove(t),i.style.removeProperty("--ssd-len"),i.style.animationPlayState="";}),L.remove();},replay(){p=false,w=-1,x.forEach(a);},pause(){p=true,x.forEach(i=>{i.style.animationPlayState="paused";});},resume(){p&&(p=false,x.forEach(i=>{i.style.animationPlayState="running";}));},seek(i){let f=Math.min(1,Math.max(0,i));w=f,p=true,x.forEach((y,re)=>{y.classList.remove(t),y.style.strokeDashoffset=u==="reverse"?`${v[re]*f}`:`${v[re]*(1-f)}`,m&&(y.style.opacity=u==="reverse"?`${1-f}`:`${f}`);});},getProgress(){return c()}}}if(je())return Je();function Ke(){let t=Math.max(1,_e),s=0,l=0;function g(c){let i=true;if(G){let f=Math.min(1,Math.max(0,c/t)),y=Z(f);te=y,e.style.setProperty("--scroll-draw-progress",String(y)),e.style.clipPath=ee(u==="reverse"?1-y:y),le?.(y),f<1&&(i=false);}else x.forEach((f,y)=>{let re=y*R*t,ie=Math.min(1,Math.max(0,(c-re)/t)),q=Z(ie);f.style.strokeDashoffset=u==="reverse"?`${v[y]*q}`:`${v[y]*(1-q)}`,m&&(f.style.opacity=u==="reverse"?`${1-q}`:`${q}`),H&&S?f.style.stroke=ve(H,S,q):S&&(f.style.stroke=S),I!==null&&T!==null?f.style.strokeWidth=`${I+(T-I)*q}`:T!==null&&(f.style.strokeWidth=`${T}`),F!==null&&A!==null?f.style.fillOpacity=`${F+(A-F)*q}`:A!==null&&(f.style.fillOpacity=`${A}`),N&&f.tagName.toLowerCase()==="path"&&W[y]&&f.setAttribute("d",Pe(W[y],N,q)),y===0&&(le?.(q),e.style.setProperty("--scroll-draw-progress",String(q))),ie<1&&(i=false);});if(Q){let f=Math.min(1,Math.max(0,c/t)),y=Z(f);for(let re in Q){let ie=parseFloat(re);y>=ie&&!U.has(ie)&&(U.add(ie),Q[re]?.());}}return i}function O(c){if(k)return;let i=c-s;C||(C=true,me?.());let f=g(i);if(f&&!M){M=true,g(t*(1+Math.max(0,x.length-1)*R)),oe?.(),V<(Y==="infinite"?1/0:Y??0)&&(V++,X=setTimeout(()=>{s=performance.now(),C=false,M=false,U.clear(),he(),E=requestAnimationFrame(O);},xe));return}f||(E=requestAnimationFrame(O));}function L(){cancelAnimationFrame(E),clearTimeout(X),s=performance.now(),l=0,k=false,C=false,M=false,V=0,U.clear(),he(),E=requestAnimationFrame(O);}let a=new IntersectionObserver(c=>{c.forEach(i=>{i.isIntersecting&&!(h&&M)?L():!i.isIntersecting&&!h&&!M&&(cancelAnimationFrame(E),clearTimeout(X),s=null);});},{root:P??null,threshold:Ie,rootMargin:Fe}),p;function w(){clearTimeout(p),p=setTimeout(()=>{x.forEach((c,i)=>{v[i]=we(c),c.style.strokeDasharray=`${v[i]}`;});},150);}return window.addEventListener("resize",w),window.addEventListener("orientationchange",w),ae>0?setTimeout(()=>a.observe(e),ae):a.observe(e),{destroy(){cancelAnimationFrame(E),clearTimeout(X),a.disconnect(),window.removeEventListener("resize",w),window.removeEventListener("orientationchange",w),clearTimeout(p);},replay(){V=0,L();},pause(){k||(k=true,l=performance.now()-s,cancelAnimationFrame(E));},resume(){k&&(k=false,s=performance.now()-l,E=requestAnimationFrame(O));},seek(c){let i=Math.min(1,Math.max(0,c));te=i,k=true,l=i*t,s=performance.now()-l,cancelAnimationFrame(E),g(l);},getProgress(){return te}}}if(Be)return Ke();He();function ge(){if(!pe||k)return;let t=performance.now(),s=ue(),l=d;if(fe!==false){let a=t-Re,p=a>0?Math.abs(s-(ye<0?s:ye))/a:0;l=d*Math.max(.2,1+p*(typeof fe=="number"?fe:1)*.04);}ye=s,Re=t;let g=ce?de===-1||s>=de?"forward":"reverse":u;de=s;let O=_-B,L=true;if(G){let a=Z(ne(s,B,_,l));h&&!ce&&(z=Math.max(z,a),a=z),te=a,e.style.setProperty("--scroll-draw-progress",String(a));let p=g==="reverse"?1-a:a;e.style.clipPath=ee(p),le?.(a),!C&&ne(s,B,_,l)>0&&(C=true,me?.()),a>=1&&!M?(M=true,oe?.(),V<(Y==="infinite"?1/0:Y??0)&&(V++,X=setTimeout(()=>{z=-1,C=false,M=false,e.style.clipPath=ee(0);},xe))):a<1&&!h&&(M=false),E=requestAnimationFrame(ge);return}if(x.forEach((a,p)=>{let w=p*R*O,c=Z(ne(s,B+w,_+w,l));h&&!ce&&(z=Math.max(z,c),c=z),te=c,a.style.strokeDashoffset=g==="reverse"?`${v[p]*c}`:`${v[p]*(1-c)}`,m&&(a.style.opacity=g==="reverse"?`${1-c}`:`${c}`),H&&S?a.style.stroke=ve(H,S,c):S&&(a.style.stroke=S),I!==null&&T!==null?a.style.strokeWidth=`${I+(T-I)*c}`:T!==null&&(a.style.strokeWidth=`${T}`),F!==null&&A!==null?a.style.fillOpacity=`${F+(A-F)*c}`:A!==null&&(a.style.fillOpacity=`${A}`),N&&a.tagName.toLowerCase()==="path"&&W[p]&&a.setAttribute("d",Pe(W[p],N,c)),p===0&&(le?.(c),e.style.setProperty("--scroll-draw-progress",String(c))),c<1&&(L=false);}),Q){let a=Z(ne(s,B,_,l));for(let p in Q){let w=parseFloat(p);a>=w&&!U.has(w)&&(U.add(w),Q[p]?.());}}!C&&ne(s,B,_,l)>0&&(C=true,me?.()),L&&!M?(M=true,oe?.(),V<(Y==="infinite"?1/0:Y??0)&&(V++,X=setTimeout(()=>{z=-1,C=false,M=false,U.clear(),he();},xe))):!L&&!h&&(M=false),E=requestAnimationFrame(ge);}let Te=new IntersectionObserver(t=>{t.forEach(s=>{pe=s.isIntersecting,pe&&!k?E=requestAnimationFrame(ge):cancelAnimationFrame(E);});},{root:P??null,threshold:Ie,rootMargin:Fe}),Ae;function be(){clearTimeout(Ae),Ae=setTimeout(()=>{x.forEach((t,s)=>{v[s]=we(t),t.style.strokeDasharray=`${v[s]}`;}),He();},150);}return window.addEventListener("resize",be),window.addEventListener("orientationchange",be),ae>0?setTimeout(()=>Te.observe(e),ae):Te.observe(e),{destroy(){cancelAnimationFrame(E),clearTimeout(X),Te.disconnect(),window.removeEventListener("resize",be),window.removeEventListener("orientationchange",be),clearTimeout(Ae),Se?.remove();},replay(){z=-1,de=-1,ye=-1,C=false,M=false,V=0,k=false,U.clear(),clearTimeout(X),he();},pause(){k=true,cancelAnimationFrame(E);},resume(){k&&(k=false,pe&&(E=requestAnimationFrame(ge)));},seek(t){let s=Math.min(1,Math.max(0,t));te=s,z=s,k=true,cancelAnimationFrame(E),Ue(s,u);},getProgress(){return te}}}function lt(e,r={}){let n=Ee(e,r);return {update(o){n.destroy(),n=Ee(e,o);},destroy(){n.destroy();}}}function ut(e={}){let r=null;function n(o){return r=Ee(o,e),{destroy(){r?.destroy(),r=null;}}}return {action:n,getInstance:()=>r}}export{ut as createScrollDraw,lt as scrollDraw};