svg-scroll-draw 1.0.0 → 1.1.0

package/dist/cdn/svg-scroll-draw.global.js

@@ -1,3 +1,3 @@
-"use strict";var SvgScrollDraw=(()=>{var de=Object.defineProperty;var ze=Object.getOwnPropertyDescriptor;var Ge=Object.getOwnPropertyNames;var qe=Object.prototype.hasOwnProperty;var Be=(e,r)=>{for(var n in r)de(e,n,{get:r[n],enumerable:!0})},Xe=(e,r,n,o)=>{if(r&&typeof r=="object"||typeof r=="function")for(let l of Ge(r))!qe.call(e,l)&&l!==n&&de(e,l,{get:()=>r[l],enumerable:!(o=ze(r,l))||o.enumerable});return e};var _e=e=>Xe(de({},"__esModule",{value:!0}),e);var Ue={};Be(Ue,{createSpring:()=>Le,scrollDraw:()=>Qe});var ye={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)};function Le({tension:e=2.5,friction:r=2.2}={}){return n=>1-Math.cos(n*Math.PI*e)*Math.pow(1-n,r)}function ge(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 ke(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 De(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 he(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 z(e,r,n,o){return n===r?0:je((e-r)/(n-r)*o,0,1)}function Ie(e,r,n,o,l){let c=ke(e.top,e.height,r,o.element)-De(o.viewport,n),u=ke(e.top,e.height,r,l.element)-De(l.viewport,n);return{tStart:c,tEnd:u}}function Me(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 be(e,r,n){let o=Me(e),l=Me(r);return!o||!l?e:`rgb(${Math.round(o[0]+(l[0]-o[0])*n)},${Math.round(o[1]+(l[1]-o[1])*n)},${Math.round(o[2]+(l[2]-o[2])*n)})`}function Pe(e,r){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,r)}function Je(e){let r=e.getAttribute("stroke"),n=e.getAttribute("fill");!r||r==="none"?Pe("Element has no stroke \u2014 path will not be visible.",e):n&&n!=="none"&&n!=="transparent"&&Pe("Element has a fill \u2014 it may obscure the stroke animation.",e)}function Ke(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 l(){let c=n==="x"?window.scrollX:window.scrollY,u=e-c,y=r-c,B=n==="x";o.innerHTML=`
-      <div style="position:absolute;${B?`left:${u}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${u}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(o),window.addEventListener("scroll",l,{passive:!0}),l(),o}function Oe(e,r,n){let o=(r.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),l=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,c=>{let u=parseFloat(c),y=o[l++]??u;return String(+(u+(y-u)*n).toFixed(4))})}function ne(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:l=1,fade:c=!1,easing:u="linear",trigger:y={},stagger:B=0,direction:I="forward",once:X=!1,debug:Ce=!1,axis:E="y",scrollContainer:se,autoReverse:oe=!1,delay:ve=0,strokeColor:F,strokeWidth:N,fillOpacity:H,waypoints:ie,velocityScale:le=!1,threshold:Fe=0,rootMargin:Ne="0px",repeat:_=0,repeatDelay:xe=0,morphTo:P,clip:ae,onProgress:Ee,onStart:$e,onComplete:j}=r,R=ae===!0?"left":typeof ae=="string"?ae:!1,ce=typeof u=="function"?u:ye[u]??ye.linear,He=ge(y.start??"top bottom"),Re=ge(y.end??"bottom top"),d=typeof se=="string"?document.querySelector(se):se??null,S=Array.isArray(F)?F[0]:null,g=Array.isArray(F)?F[1]:typeof F=="string"?F:null,h=Array.isArray(N)?N[0]:null,b=Array.isArray(N)?N[1]:typeof N=="number"?N:null,w=Array.isArray(H)?H[0]:null,v=Array.isArray(H)?H[1]:typeof H=="number"?H:null;function W(t){let s=t*100;switch(R){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 G=R?[]:Array.from(e.querySelectorAll(o)),$=[],T=[],k=0,D=0,A=!1,O=!1,M=0,J=!1,x=-1,K=-1,C=!1,Q=0,q=0,U,ue=null,Y=new Set,Z=-1,Ae=performance.now();function fe(){return d?E==="x"?d.scrollLeft:d.scrollTop:E==="x"?window.scrollX:window.scrollY}function We(){return d?E==="x"?d.clientWidth:d.clientHeight:E==="x"?window.innerWidth:window.innerHeight}function Se(){let t=e.getBoundingClientRect(),s,a,m;if(d){let V=d.getBoundingClientRect();s=E==="x"?t.left-V.left+d.scrollLeft:t.top-V.top+d.scrollTop,a=E==="x"?t.width:t.height,m=fe()}else s=E==="x"?t.left:t.top,a=E==="x"?t.width:t.height,m=fe();let re=Ie({top:s,height:a},m,We(),He,Re);k=re.tStart,D=re.tEnd,Ce&&process.env.NODE_ENV!=="production"&&(ue?.remove(),ue=Ke(k,D,E))}function Ve(t,s){if(e.style.setProperty("--scroll-draw-progress",String(t)),R){let a=s==="reverse"?1-t:t;e.style.clipPath=W(a);return}G.forEach((a,m)=>{a.style.strokeDashoffset=s==="reverse"?`${$[m]*t}`:`${$[m]*(1-t)}`,c&&(a.style.opacity=s==="reverse"?`${1-t}`:`${t}`),S&&g?a.style.stroke=be(S,g,t):g&&(a.style.stroke=g),h!==null&&b!==null?a.style.strokeWidth=`${h+(b-h)*t}`:b!==null&&(a.style.strokeWidth=`${b}`),w!==null&&v!==null?a.style.fillOpacity=`${w+(v-w)*t}`:v!==null&&(a.style.fillOpacity=`${v}`),P&&a.tagName.toLowerCase()==="path"&&T[m]&&a.setAttribute("d",Oe(T[m],P,t))})}function Te(){if(e.style.setProperty("--scroll-draw-progress","0"),R){e.style.clipPath=W(0);return}G.forEach((t,s)=>{t.style.strokeDasharray=`${$[s]}`,t.style.strokeDashoffset=I==="reverse"?"0":`${$[s]}`,c?t.style.opacity=I==="reverse"?"1":"0":t.style.opacity="",S&&(t.style.stroke=S),h!==null&&(t.style.strokeWidth=`${h}`),w!==null&&(t.style.fillOpacity=`${w}`),P&&t.tagName.toLowerCase()==="path"&&T[s]&&t.setAttribute("d",T[s])})}if(G.forEach(t=>{Je(t);let s=he(t);$.push(s),t.tagName.toLowerCase()==="path"?T.push(t.getAttribute("d")??""):T.push(""),n?(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=I==="reverse"?`${s}`:"0",c&&(t.style.opacity="1"),g&&(t.style.stroke=g),b!==null&&(t.style.strokeWidth=`${b}`),v!==null&&(t.style.fillOpacity=`${v}`),P&&t.tagName.toLowerCase()==="path"&&t.setAttribute("d",P)):(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=I==="reverse"?"0":`${s}`,c?t.style.opacity=I==="reverse"?"1":"0":t.style.opacity="",S&&(t.style.stroke=S),h!==null&&(t.style.strokeWidth=`${h}`),w!==null&&(t.style.fillOpacity=`${w}`))}),R){if(n)return e.style.clipPath=W(1),j?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=W(0)}else if(n)return j?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};Se();function ee(){if(!J||C)return;let t=performance.now(),s=fe(),a=l;if(le!==!1){let i=t-Ae,p=i>0?Math.abs(s-(Z<0?s:Z))/i:0;a=l*Math.max(.2,1+p*(typeof le=="number"?le:1)*.04)}Z=s,Ae=t;let m=oe?K===-1||s>=K?"forward":"reverse":I;K=s;let re=D-k,V=!0;if(R){let i=ce(z(s,k,D,a));X&&!oe&&(x=Math.max(x,i),i=x),Q=i,e.style.setProperty("--scroll-draw-progress",String(i));let p=m==="reverse"?1-i:i;e.style.clipPath=W(p),Ee?.(i),!O&&z(s,k,D,a)>0&&(O=!0,$e?.()),i>=1&&!A?(A=!0,j?.(),q<(_==="infinite"?1/0:_??0)&&(q++,U=setTimeout(()=>{x=-1,O=!1,A=!1,e.style.clipPath=W(0)},xe))):i<1&&!X&&(A=!1),M=requestAnimationFrame(ee);return}if(G.forEach((i,p)=>{let L=p*B*re,f=ce(z(s,k+L,D+L,a));X&&!oe&&(x=Math.max(x,f),f=x),Q=f,i.style.strokeDashoffset=m==="reverse"?`${$[p]*f}`:`${$[p]*(1-f)}`,c&&(i.style.opacity=m==="reverse"?`${1-f}`:`${f}`),S&&g?i.style.stroke=be(S,g,f):g&&(i.style.stroke=g),h!==null&&b!==null?i.style.strokeWidth=`${h+(b-h)*f}`:b!==null&&(i.style.strokeWidth=`${b}`),w!==null&&v!==null?i.style.fillOpacity=`${w+(v-w)*f}`:v!==null&&(i.style.fillOpacity=`${v}`),P&&i.tagName.toLowerCase()==="path"&&T[p]&&i.setAttribute("d",Oe(T[p],P,f)),p===0&&(Ee?.(f),e.style.setProperty("--scroll-draw-progress",String(f))),f<1&&(V=!1)}),ie){let i=ce(z(s,k,D,a));for(let p in ie){let L=parseFloat(p);i>=L&&!Y.has(L)&&(Y.add(L),ie[p]?.())}}!O&&z(s,k,D,a)>0&&(O=!0,$e?.()),V&&!A?(A=!0,j?.(),q<(_==="infinite"?1/0:_??0)&&(q++,U=setTimeout(()=>{x=-1,O=!1,A=!1,Y.clear(),Te()},xe))):!V&&!X&&(A=!1),M=requestAnimationFrame(ee)}let pe=new IntersectionObserver(t=>{t.forEach(s=>{J=s.isIntersecting,J&&!C?M=requestAnimationFrame(ee):cancelAnimationFrame(M)})},{root:d??null,threshold:Fe,rootMargin:Ne}),me;function te(){clearTimeout(me),me=setTimeout(()=>{G.forEach((t,s)=>{$[s]=he(t),t.style.strokeDasharray=`${$[s]}`}),Se()},150)}return window.addEventListener("resize",te),window.addEventListener("orientationchange",te),ve>0?setTimeout(()=>pe.observe(e),ve):pe.observe(e),{destroy(){cancelAnimationFrame(M),clearTimeout(U),pe.disconnect(),window.removeEventListener("resize",te),window.removeEventListener("orientationchange",te),clearTimeout(me),ue?.remove()},replay(){x=-1,K=-1,Z=-1,O=!1,A=!1,q=0,C=!1,Y.clear(),clearTimeout(U),Te()},pause(){C=!0,cancelAnimationFrame(M)},resume(){C&&(C=!1,J&&(M=requestAnimationFrame(ee)))},seek(t){let s=Math.min(1,Math.max(0,t));Q=s,x=s,C=!0,cancelAnimationFrame(M),Ve(s,I)},getProgress(){return Q}}}function Qe(e,r){let n={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};if(typeof window>"u")return n;let o=typeof e=="string"?document.querySelector(e):e;return o?ne(o,r):(console.warn("[svg-scroll-draw] Container not found:",e),n)}var we=class extends HTMLElement{constructor(){super(...arguments);this.instance=null}connectedCallback(){let n={},o=this.getAttribute("speed"),l=this.getAttribute("easing"),c=this.getAttribute("stagger"),u=this.getAttribute("direction"),y=this.getAttribute("selector");o&&(n.speed=parseFloat(o)),l&&(n.easing=l),c&&(n.stagger=parseFloat(c)),u&&(n.direction=u),y&&(n.selector=y),this.hasAttribute("fade")&&(n.fade=this.getAttribute("fade")!=="false"),this.instance=ne(this,n)}disconnectedCallback(){this.instance?.destroy(),this.instance=null}};typeof customElements<"u"&&!customElements.get("scroll-draw")&&customElements.define("scroll-draw",we);return _e(Ue);})();
+"use strict";var SvgScrollDraw=(()=>{var ve=Object.defineProperty;var Je=Object.getOwnPropertyDescriptor;var Ke=Object.getOwnPropertyNames;var Qe=Object.prototype.hasOwnProperty;var Ye=(e,r)=>{for(var n in r)ve(e,n,{get:r[n],enumerable:!0})},Ze=(e,r,n,o)=>{if(r&&typeof r=="object"||typeof r=="function")for(let a of Ke(r))!Qe.call(e,a)&&a!==n&&ve(e,a,{get:()=>r[a],enumerable:!(o=Je(r,a))||o.enumerable});return e};var et=e=>Ze(ve({},"__esModule",{value:!0}),e);var at={};Ye(at,{createSpring:()=>He,scrollDraw:()=>it});var Ee={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)};function He({tension:e=2.5,friction:r=2.2}={}){return n=>1-Math.cos(n*Math.PI*e)*Math.pow(1-n,r)}function $e(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 Fe(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 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 Se(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 B(e,r,n,o){return n===r?0:tt((e-r)/(n-r)*o,0,1)}function xe(e,r,n,o,a){let p=Fe(e.top,e.height,r,o.element)-Ne(o.viewport,n),f=Fe(e.top,e.height,r,a.element)-Ne(a.viewport,n);return{tStart:p,tEnd:f}}function Re(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 Ae(e,r,n){let o=Re(e),a=Re(r);return!o||!a?e:`rgb(${Math.round(o[0]+(a[0]-o[0])*n)},${Math.round(o[1]+(a[1]-o[1])*n)},${Math.round(o[2]+(a[2]-o[2])*n)})`}function Ve(e,r){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,r)}var We={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 a(){let p=n==="x"?window.scrollX:window.scrollY,f=e-p,b=r-p,X=n==="x";o.innerHTML=`
+      <div style="position:absolute;${X?`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;${X?`left:${b}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${b}px;left:0;right:0;border-top:2px dashed #ef4444;`}padding:2px 6px;color:#ef4444;background:rgba(0,0,0,.6)">\u25A0 end</div>`}return document.body.appendChild(o),window.addEventListener("scroll",a,{passive:!0}),a(),o}function Ge(e,r,n){let o=(r.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),a=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,p=>{let f=parseFloat(p),b=o[a++]??f;return String(+(f+(b-f)*n).toFixed(4))})}function fe(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:a=1,fade:p=!1,easing:f="linear",trigger:b={},stagger:X=0,direction:y="forward",once:U=!1,debug:ze=!1,axis:$="y",scrollContainer:pe,autoReverse:Z=!1,delay:me=0,strokeColor:R,strokeWidth:H,fillOpacity:V,waypoints:ee,velocityScale:te=!1,threshold:qe=0,rootMargin:Be="0px",repeat:j=0,repeatDelay:Te=0,morphTo:P,clip:de,native:_e=!0,onProgress:ye,onStart:ge,onComplete:J}=r,W=de===!0?"left":typeof de=="string"?de:!1,re=typeof f=="function"?f:Ee[f]??Ee.linear,De=$e(b.start??"top bottom"),Me=$e(b.end??"bottom top"),w=typeof pe=="string"?document.querySelector(pe):pe??null,I=Array.isArray(R)?R[0]:null,S=Array.isArray(R)?R[1]:typeof R=="string"?R:null,x=Array.isArray(H)?H[0]:null,A=Array.isArray(H)?H[1]:typeof H=="number"?H:null,k=Array.isArray(V)?V[0]:null,T=Array.isArray(V)?V[1]:typeof V=="number"?V:null;function _(t){let s=t*100;switch(W){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 v=W?[]:Array.from(e.querySelectorAll(o)),g=[],C=[],O=0,F=0,L=!1,G=!1,N=0,ne=!1,D=-1,se=-1,z=!1,oe=0,K=0,ie,he=null,ae=new Set,le=-1,Le=performance.now();function Q(){return w?$==="x"?w.scrollLeft:w.scrollTop:$==="x"?window.scrollX:window.scrollY}function Pe(){return w?$==="x"?w.clientWidth:w.clientHeight:$==="x"?window.innerWidth:window.innerHeight}function Ie(){let t=e.getBoundingClientRect(),s,l,d;if(w){let E=w.getBoundingClientRect();s=$==="x"?t.left-E.left+w.scrollLeft:t.top-E.top+w.scrollTop,l=$==="x"?t.width:t.height,d=Q()}else s=$==="x"?t.left:t.top,l=$==="x"?t.width:t.height,d=Q();let q=xe({top:s,height:l},d,Pe(),De,Me);O=q.tStart,F=q.tEnd,ze&&process.env.NODE_ENV!=="production"&&(he?.remove(),he=ot(O,F,$))}function Xe(t,s){if(e.style.setProperty("--scroll-draw-progress",String(t)),W){let l=s==="reverse"?1-t:t;e.style.clipPath=_(l);return}v.forEach((l,d)=>{l.style.strokeDashoffset=s==="reverse"?`${g[d]*t}`:`${g[d]*(1-t)}`,p&&(l.style.opacity=s==="reverse"?`${1-t}`:`${t}`),I&&S?l.style.stroke=Ae(I,S,t):S&&(l.style.stroke=S),x!==null&&A!==null?l.style.strokeWidth=`${x+(A-x)*t}`:A!==null&&(l.style.strokeWidth=`${A}`),k!==null&&T!==null?l.style.fillOpacity=`${k+(T-k)*t}`:T!==null&&(l.style.fillOpacity=`${T}`),P&&l.tagName.toLowerCase()==="path"&&C[d]&&l.setAttribute("d",Ge(C[d],P,t))})}function Ce(){if(e.style.setProperty("--scroll-draw-progress","0"),W){e.style.clipPath=_(0);return}v.forEach((t,s)=>{t.style.strokeDasharray=`${g[s]}`,t.style.strokeDashoffset=y==="reverse"?"0":`${g[s]}`,p?t.style.opacity=y==="reverse"?"1":"0":t.style.opacity="",I&&(t.style.stroke=I),x!==null&&(t.style.strokeWidth=`${x}`),k!==null&&(t.style.fillOpacity=`${k}`),P&&t.tagName.toLowerCase()==="path"&&C[s]&&t.setAttribute("d",C[s])})}if(v.forEach(t=>{st(t);let s=Se(t);g.push(s),t.tagName.toLowerCase()==="path"?C.push(t.getAttribute("d")??""):C.push(""),n?(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=y==="reverse"?`${s}`:"0",p&&(t.style.opacity="1"),S&&(t.style.stroke=S),A!==null&&(t.style.strokeWidth=`${A}`),T!==null&&(t.style.fillOpacity=`${T}`),P&&t.tagName.toLowerCase()==="path"&&t.setAttribute("d",P)):(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=y==="reverse"?"0":`${s}`,p?t.style.opacity=y==="reverse"?"1":"0":t.style.opacity="",I&&(t.style.stroke=I),x!==null&&(t.style.strokeWidth=`${x}`),k!==null&&(t.style.fillOpacity=`${k}`))}),W){if(n)return e.style.clipPath=_(1),J?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=_(0)}else if(n)return J?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};function Ue(){return!(_e===!1||!nt()||!v.length||typeof f!="string"||!(f in We)||W||$!=="y"||w||a!==1||X!==0||U||Z||te!==!1||P||ee||j||me>0||ye||ge||J||R!=null||H!=null||V!=null||(b.start??"top bottom").trim()!=="top bottom"||(b.end??"bottom top").trim()!=="bottom top")}function je(){let t=`svg-scroll-draw-${++rt}`,s=y==="reverse"?"0":"var(--ssd-len)",l=y==="reverse"?"var(--ssd-len)":"0",d=`stroke-dashoffset:${s};`,q=`stroke-dashoffset:${l};`;p&&(d+=`opacity:${y==="reverse"?1:0};`,q+=`opacity:${y==="reverse"?0:1};`);let E=document.createElement("style");E.setAttribute("data-svg-scroll-draw",""),E.textContent=`@keyframes ${t}{from{${d}}to{${q}}}.${t}{animation-name:${t};animation-duration:auto;animation-timing-function:${We[f]};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(E);function i(u,M){u.style.setProperty("--ssd-len",String(g[M])),u.style.strokeDasharray=`${g[M]}`,u.style.strokeDashoffset="",u.style.opacity="",u.style.animationPlayState="",u.classList.add(t)}v.forEach(i);let c=!1,h=-1;function m(){if(h>=0)return h;let u=e.getBoundingClientRect(),{tStart:M,tEnd:Y}=xe({top:u.top,height:u.height},Q(),Pe(),De,Me);return re(B(Q(),M,Y,a))}return{destroy(){v.forEach(u=>{u.classList.remove(t),u.style.removeProperty("--ssd-len"),u.style.animationPlayState=""}),E.remove()},replay(){c=!1,h=-1,v.forEach(i)},pause(){c=!0,v.forEach(u=>{u.style.animationPlayState="paused"})},resume(){c&&(c=!1,v.forEach(u=>{u.style.animationPlayState="running"}))},seek(u){let M=Math.min(1,Math.max(0,u));h=M,c=!0,v.forEach((Y,Oe)=>{Y.classList.remove(t),Y.style.strokeDashoffset=y==="reverse"?`${g[Oe]*M}`:`${g[Oe]*(1-M)}`,p&&(Y.style.opacity=y==="reverse"?`${1-M}`:`${M}`)})},getProgress(){return m()}}}if(Ue())return je();Ie();function ce(){if(!ne||z)return;let t=performance.now(),s=Q(),l=a;if(te!==!1){let i=t-Le,c=i>0?Math.abs(s-(le<0?s:le))/i:0;l=a*Math.max(.2,1+c*(typeof te=="number"?te:1)*.04)}le=s,Le=t;let d=Z?se===-1||s>=se?"forward":"reverse":y;se=s;let q=F-O,E=!0;if(W){let i=re(B(s,O,F,l));U&&!Z&&(D=Math.max(D,i),i=D),oe=i,e.style.setProperty("--scroll-draw-progress",String(i));let c=d==="reverse"?1-i:i;e.style.clipPath=_(c),ye?.(i),!G&&B(s,O,F,l)>0&&(G=!0,ge?.()),i>=1&&!L?(L=!0,J?.(),K<(j==="infinite"?1/0:j??0)&&(K++,ie=setTimeout(()=>{D=-1,G=!1,L=!1,e.style.clipPath=_(0)},Te))):i<1&&!U&&(L=!1),N=requestAnimationFrame(ce);return}if(v.forEach((i,c)=>{let h=c*X*q,m=re(B(s,O+h,F+h,l));U&&!Z&&(D=Math.max(D,m),m=D),oe=m,i.style.strokeDashoffset=d==="reverse"?`${g[c]*m}`:`${g[c]*(1-m)}`,p&&(i.style.opacity=d==="reverse"?`${1-m}`:`${m}`),I&&S?i.style.stroke=Ae(I,S,m):S&&(i.style.stroke=S),x!==null&&A!==null?i.style.strokeWidth=`${x+(A-x)*m}`:A!==null&&(i.style.strokeWidth=`${A}`),k!==null&&T!==null?i.style.fillOpacity=`${k+(T-k)*m}`:T!==null&&(i.style.fillOpacity=`${T}`),P&&i.tagName.toLowerCase()==="path"&&C[c]&&i.setAttribute("d",Ge(C[c],P,m)),c===0&&(ye?.(m),e.style.setProperty("--scroll-draw-progress",String(m))),m<1&&(E=!1)}),ee){let i=re(B(s,O,F,l));for(let c in ee){let h=parseFloat(c);i>=h&&!ae.has(h)&&(ae.add(h),ee[c]?.())}}!G&&B(s,O,F,l)>0&&(G=!0,ge?.()),E&&!L?(L=!0,J?.(),K<(j==="infinite"?1/0:j??0)&&(K++,ie=setTimeout(()=>{D=-1,G=!1,L=!1,ae.clear(),Ce()},Te))):!E&&!U&&(L=!1),N=requestAnimationFrame(ce)}let be=new IntersectionObserver(t=>{t.forEach(s=>{ne=s.isIntersecting,ne&&!z?N=requestAnimationFrame(ce):cancelAnimationFrame(N)})},{root:w??null,threshold:qe,rootMargin:Be}),we;function ue(){clearTimeout(we),we=setTimeout(()=>{v.forEach((t,s)=>{g[s]=Se(t),t.style.strokeDasharray=`${g[s]}`}),Ie()},150)}return window.addEventListener("resize",ue),window.addEventListener("orientationchange",ue),me>0?setTimeout(()=>be.observe(e),me):be.observe(e),{destroy(){cancelAnimationFrame(N),clearTimeout(ie),be.disconnect(),window.removeEventListener("resize",ue),window.removeEventListener("orientationchange",ue),clearTimeout(we),he?.remove()},replay(){D=-1,se=-1,le=-1,G=!1,L=!1,K=0,z=!1,ae.clear(),clearTimeout(ie),Ce()},pause(){z=!0,cancelAnimationFrame(N)},resume(){z&&(z=!1,ne&&(N=requestAnimationFrame(ce)))},seek(t){let s=Math.min(1,Math.max(0,t));oe=s,D=s,z=!0,cancelAnimationFrame(N),Xe(s,y)},getProgress(){return oe}}}function it(e,r){let n={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};if(typeof window>"u")return n;let o=typeof e=="string"?document.querySelector(e):e;return o?fe(o,r):(console.warn("[svg-scroll-draw] Container not found:",e),n)}var ke=class extends HTMLElement{constructor(){super(...arguments);this.instance=null}connectedCallback(){let n={},o=this.getAttribute("speed"),a=this.getAttribute("easing"),p=this.getAttribute("stagger"),f=this.getAttribute("direction"),b=this.getAttribute("selector");o&&(n.speed=parseFloat(o)),a&&(n.easing=a),p&&(n.stagger=parseFloat(p)),f&&(n.direction=f),b&&(n.selector=b),this.hasAttribute("fade")&&(n.fade=this.getAttribute("fade")!=="false"),this.instance=fe(this,n)}disconnectedCallback(){this.instance?.destroy(),this.instance=null}};typeof customElements<"u"&&!customElements.get("scroll-draw")&&customElements.define("scroll-draw",ke);return et(at);})();

package/dist/group/index.cjs

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

package/dist/group/index.d.mts

@@ -60,6 +60,20 @@ interface ScrollDrawOptions {
     onProgress?: (alpha: number) => void;
     onStart?: () => void;
     onComplete?: () => void;
+    /**
+     * Use the browser's native CSS scroll-driven animation
+     * (`animation-timeline: view()`) when the configuration is simple enough and
+     * the browser supports it. This runs the draw entirely on the compositor —
+     * zero per-frame JavaScript, zero scroll/resize listeners.
+     *
+     * Falls back to the JS engine automatically when unsupported or when the
+     * config uses a feature native CSS can't express (callbacks, stagger, morph,
+     * velocity scaling, custom triggers, `once`, custom easing functions, etc.).
+     *
+     * - `undefined` / `true` (default): use native when eligible.
+     * - `false`: always use the JS engine.
+     */
+    native?: boolean;
 }
 interface ScrollDrawInstance {
     destroy: () => void;

package/dist/group/index.d.ts

@@ -60,6 +60,20 @@ interface ScrollDrawOptions {
     onProgress?: (alpha: number) => void;
     onStart?: () => void;
     onComplete?: () => void;
+    /**
+     * Use the browser's native CSS scroll-driven animation
+     * (`animation-timeline: view()`) when the configuration is simple enough and
+     * the browser supports it. This runs the draw entirely on the compositor —
+     * zero per-frame JavaScript, zero scroll/resize listeners.
+     *
+     * Falls back to the JS engine automatically when unsupported or when the
+     * config uses a feature native CSS can't express (callbacks, stagger, morph,
+     * velocity scaling, custom triggers, `once`, custom easing functions, etc.).
+     *
+     * - `undefined` / `true` (default): use native when eligible.
+     * - `false`: always use the JS engine.
+     */
+    native?: boolean;
 }
 interface ScrollDrawInstance {
     destroy: () => void;

package/dist/group/index.mjs

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

package/dist/index.cjs

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

package/dist/index.d.mts

@@ -60,6 +60,20 @@ interface ScrollDrawOptions {
     onProgress?: (alpha: number) => void;
     onStart?: () => void;
     onComplete?: () => void;
+    /**
+     * Use the browser's native CSS scroll-driven animation
+     * (`animation-timeline: view()`) when the configuration is simple enough and
+     * the browser supports it. This runs the draw entirely on the compositor —
+     * zero per-frame JavaScript, zero scroll/resize listeners.
+     *
+     * Falls back to the JS engine automatically when unsupported or when the
+     * config uses a feature native CSS can't express (callbacks, stagger, morph,
+     * velocity scaling, custom triggers, `once`, custom easing functions, etc.).
+     *
+     * - `undefined` / `true` (default): use native when eligible.
+     * - `false`: always use the JS engine.
+     */
+    native?: boolean;
 }
 interface ScrollDrawInstance {
     destroy: () => void;

package/dist/index.d.ts

@@ -60,6 +60,20 @@ interface ScrollDrawOptions {
     onProgress?: (alpha: number) => void;
     onStart?: () => void;
     onComplete?: () => void;
+    /**
+     * Use the browser's native CSS scroll-driven animation
+     * (`animation-timeline: view()`) when the configuration is simple enough and
+     * the browser supports it. This runs the draw entirely on the compositor —
+     * zero per-frame JavaScript, zero scroll/resize listeners.
+     *
+     * Falls back to the JS engine automatically when unsupported or when the
+     * config uses a feature native CSS can't express (callbacks, stagger, morph,
+     * velocity scaling, custom triggers, `once`, custom easing functions, etc.).
+     *
+     * - `undefined` / `true` (default): use native when eligible.
+     * - `false`: always use the JS engine.
+     */
+    native?: boolean;
 }
 interface ScrollDrawInstance {
     destroy: () => void;

package/dist/index.mjs

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

package/dist/nuxt/index.cjs

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