svg-scroll-draw 0.5.0 → 0.6.0

package/dist/angular/index.cjs

@@ -1,3 +1,3 @@
-'use strict';var X={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 _(e="top bottom"){let t=e.trim();if(/^\d+(\.\d+)?%$/.test(t))return {element:"top",viewport:t};let[n="top",o="bottom"]=t.split(/\s+/).filter(Boolean);return {element:n,viewport:o}}function te(e,t,n,o){switch(o){case "top":return e+n;case "center":return e+n+t/2;case "bottom":return e+n+t;default:return e+n}}function re(e,t){if(/^\d+(\.\d+)?%$/.test(e))return t*(parseFloat(e)/100);switch(e){case "top":return 0;case "center":return t/2;case "bottom":return t;default:return t}}function j(e){let t=e.tagName.toLowerCase();if(t==="rect"){let n=parseFloat(e.getAttribute("width")??"0"),o=parseFloat(e.getAttribute("height")??"0");return 2*(n+o)}if(t==="circle"){let n=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*n}return e.getTotalLength()}function ye(e,t,n){return Math.min(n,Math.max(t,e))}function z(e,t,n,o){return n===t?0:ye((e-t)/(n-t)*o,0,1)}function oe(e,t,n,o,i){let p=te(e.top,e.height,t,o.element)-re(o.viewport,n),d=te(e.top,e.height,t,i.element)-re(i.viewport,n);return {tStart:p,tEnd:d}}function ne(e){let t=/^#([a-f\d])([a-f\d])([a-f\d])$/i.exec(e);if(t)return [parseInt(t[1]+t[1],16),parseInt(t[2]+t[2],16),parseInt(t[3]+t[3],16)];let n=/^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);if(n)return [parseInt(n[1],16),parseInt(n[2],16),parseInt(n[3],16)];let o=/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i.exec(e);return o?[parseInt(o[1]),parseInt(o[2]),parseInt(o[3])]:null}function se(e,t,n){let o=ne(e),i=ne(t);return !o||!i?e:`rgb(${Math.round(o[0]+(i[0]-o[0])*n)},${Math.round(o[1]+(i[1]-o[1])*n)},${Math.round(o[2]+(i[2]-o[2])*n)})`}function ie(e,t){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,t);}function be(e){let t=e.getAttribute("stroke"),n=e.getAttribute("fill");!t||t==="none"?ie("Element has no stroke \u2014 path will not be visible.",e):n&&n!=="none"&&n!=="transparent"&&ie("Element has a fill \u2014 it may obscure the stroke animation.",e);}function ge(e,t,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 i(){let p=n==="x"?window.scrollX:window.scrollY,d=e-p,A=t-p,T=n==="x";o.innerHTML=`
-      <div style="position:absolute;${T?`left:${d}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${d}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;${T?`left:${A}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${A}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",i,{passive:true}),i(),o}function le(e,t={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{}};let n=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:o="path, polyline, line, polygon, rect, circle",speed:i=1,fade:p=false,easing:d="linear",trigger:A={},stagger:T=0,direction:b="forward",once:J=false,debug:ce=false,axis:f="y",scrollContainer:W,autoReverse:K=false,delay:Q=0,strokeColor:g,strokeWidth:w,waypoints:G,onProgress:ue,onStart:pe,onComplete:U}=t,Y=typeof d=="function"?d:X[d]??X.linear,fe=_(A.start??"top bottom"),de=_(A.end??"bottom top"),l=typeof W=="string"?document.querySelector(W):W??null,v=Array.isArray(g)?g[0]:null,x=Array.isArray(g)?g[1]:typeof g=="string"?g:null,m=Array.isArray(w)?w[0]:null,E=Array.isArray(w)?w[1]:typeof w=="number"?w:null,I=Array.from(e.querySelectorAll(o)),h=[],$=0,k=0,L=false,V=false,M=0,N=false,F=-1,C=-1,P=null,R=new Set;function q(){return l?f==="x"?l.scrollLeft:l.scrollTop:f==="x"?window.scrollX:window.scrollY}function me(){return l?f==="x"?l.clientWidth:l.clientHeight:f==="x"?window.innerWidth:window.innerHeight}function Z(){let r=e.getBoundingClientRect(),s,D,y;if(l){let c=l.getBoundingClientRect();s=f==="x"?r.left-c.left+l.scrollLeft:r.top-c.top+l.scrollTop,D=f==="x"?r.width:r.height,y=q();}else s=f==="x"?r.left:r.top,D=f==="x"?r.width:r.height,y=q();let a=oe({top:s,height:D},y,me(),fe,de);$=a.tStart,k=a.tEnd,ce&&process.env.NODE_ENV!=="production"&&(P?.remove(),P=ge($,k,f));}function he(){I.forEach((r,s)=>{r.style.strokeDasharray=`${h[s]}`,r.style.strokeDashoffset=b==="reverse"?"0":`${h[s]}`,p?r.style.opacity=b==="reverse"?"1":"0":r.style.opacity="",v&&(r.style.stroke=v),m!==null&&(r.style.strokeWidth=`${m}`);});}if(I.forEach(r=>{be(r);let s=j(r);h.push(s),n?(r.style.strokeDasharray=`${s}`,r.style.strokeDashoffset=b==="reverse"?`${s}`:"0",p&&(r.style.opacity="1"),x&&(r.style.stroke=x),E!==null&&(r.style.strokeWidth=`${E}`)):(r.style.strokeDasharray=`${s}`,r.style.strokeDashoffset=b==="reverse"?"0":`${s}`,p?r.style.opacity=b==="reverse"?"1":"0":r.style.opacity="",v&&(r.style.stroke=v),m!==null&&(r.style.strokeWidth=`${m}`));}),n)return U?.(),{destroy:()=>{},replay:()=>{}};Z();function ee(){if(!N)return;let r=q(),s=K?C===-1||r>=C?"forward":"reverse":b;C=r;let D=k-$,y=true;if(I.forEach((a,c)=>{let S=c*T*D,u=Y(z(r,$+S,k+S,i));J&&!K&&(F=Math.max(F,u),u=F),a.style.strokeDashoffset=s==="reverse"?`${h[c]*u}`:`${h[c]*(1-u)}`,p&&(a.style.opacity=s==="reverse"?`${1-u}`:`${u}`),v&&x?a.style.stroke=se(v,x,u):x&&(a.style.stroke=x),m!==null&&E!==null?a.style.strokeWidth=`${m+(E-m)*u}`:E!==null&&(a.style.strokeWidth=`${E}`),c===0&&ue?.(u),u<1&&(y=false);}),G){let a=Y(z(r,$,k,i));for(let c in G){let S=parseFloat(c);a>=S&&!R.has(S)&&(R.add(S),G[c]?.());}}!V&&z(r,$,k,i)>0&&(V=true,pe?.()),y&&!L?(L=true,U?.()):!y&&!J&&(L=false),M=requestAnimationFrame(ee);}let B=new IntersectionObserver(r=>{r.forEach(s=>{N=s.isIntersecting,N?M=requestAnimationFrame(ee):cancelAnimationFrame(M);});},{root:l??null}),H;function O(){clearTimeout(H),H=setTimeout(()=>{I.forEach((r,s)=>{h[s]=j(r),r.style.strokeDasharray=`${h[s]}`;}),Z();},150);}return window.addEventListener("resize",O),window.addEventListener("orientationchange",O),Q>0?setTimeout(()=>B.observe(e),Q):B.observe(e),{destroy(){cancelAnimationFrame(M),B.disconnect(),window.removeEventListener("resize",O),window.removeEventListener("orientationchange",O),clearTimeout(H),P?.remove();},replay(){F=-1,C=-1,V=false,L=false,R.clear(),he();}}}var ae=class{constructor(){this.instance=null;}init(t,n={}){return this.destroy(),this.instance=le(t,n),this}replay(){return this.instance?.replay(),this}destroy(){return this.instance?.destroy(),this.instance=null,this}};exports.ScrollDrawRef=ae;
+'use strict';var re={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 ne(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 he(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 ge(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 oe(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 Fe(e,r,n){return Math.min(n,Math.max(r,e))}function H(e,r,n,s){return n===r?0:Fe((e-r)/(n-r)*s,0,1)}function be(e,r,n,s,a){let c=he(e.top,e.height,r,s.element)-ge(s.viewport,n),u=he(e.top,e.height,r,a.element)-ge(a.viewport,n);return {tStart:c,tEnd:u}}function ye(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=ye(e),a=ye(r);return !s||!a?e:`rgb(${Math.round(s[0]+(a[0]-s[0])*n)},${Math.round(s[1]+(a[1]-s[1])*n)},${Math.round(s[2]+(a[2]-s[2])*n)})`}function we(e,r){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,r);}function Ne(e){let r=e.getAttribute("stroke"),n=e.getAttribute("fill");!r||r==="none"?we("Element has no stroke \u2014 path will not be visible.",e):n&&n!=="none"&&n!=="transparent"&&we("Element has a fill \u2014 it may obscure the stroke animation.",e);}function Pe(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 c=n==="x"?window.scrollX:window.scrollY,u=e-c,E=r-c,W=n==="x";s.innerHTML=`
+      <div style="position:absolute;${W?`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;${W?`left:${E}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${E}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 ve(e,r,n){let s=(r.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),a=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,c=>{let u=parseFloat(c),E=s[a++]??u;return String(+(u+(E-u)*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:c=false,easing:u="linear",trigger:E={},stagger:W=0,direction:k="forward",once:ie=false,debug:ke=false,axis:b="y",scrollContainer:X,autoReverse:ae=false,delay:le=0,strokeColor:D,strokeWidth:I,waypoints:_,velocityScale:j=false,threshold:$e=0,rootMargin:Ae="0px",repeat:ce=0,repeatDelay:Se=0,morphTo:$,onProgress:Te,onStart:De,onComplete:ue}=r,fe=typeof u=="function"?u:re[u]??re.linear,Ie=ne(E.start??"top bottom"),Le=ne(E.end??"bottom top"),p=typeof X=="string"?document.querySelector(X):X??null,v=Array.isArray(D)?D[0]:null,h=Array.isArray(D)?D[1]:typeof D=="string"?D:null,g=Array.isArray(I)?I[0]:null,y=Array.isArray(I)?I[1]:typeof I=="number"?I:null,N=Array.from(e.querySelectorAll(s)),w=[],x=[],L=0,M=0,P=false,O=false,A=0,V=false,C=-1,z=-1,S=false,J=0,K=0,Q,U=null,R=new Set,G=-1,pe=performance.now();function Y(){return p?b==="x"?p.scrollLeft:p.scrollTop:b==="x"?window.scrollX:window.scrollY}function Me(){return p?b==="x"?p.clientWidth:p.clientHeight:b==="x"?window.innerWidth:window.innerHeight}function me(){let t=e.getBoundingClientRect(),o,i,m;if(p){let F=p.getBoundingClientRect();o=b==="x"?t.left-F.left+p.scrollLeft:t.top-F.top+p.scrollTop,i=b==="x"?t.width:t.height,m=Y();}else o=b==="x"?t.left:t.top,i=b==="x"?t.width:t.height,m=Y();let B=be({top:o,height:i},m,Me(),Ie,Le);L=B.tStart,M=B.tEnd,ke&&process.env.NODE_ENV!=="production"&&(U?.remove(),U=Pe(L,M,b));}function Ce(t,o){N.forEach((i,m)=>{i.style.strokeDashoffset=o==="reverse"?`${w[m]*t}`:`${w[m]*(1-t)}`,c&&(i.style.opacity=o==="reverse"?`${1-t}`:`${t}`),v&&h?i.style.stroke=se(v,h,t):h&&(i.style.stroke=h),g!==null&&y!==null?i.style.strokeWidth=`${g+(y-g)*t}`:y!==null&&(i.style.strokeWidth=`${y}`),$&&i.tagName.toLowerCase()==="path"&&x[m]&&i.setAttribute("d",ve(x[m],$,t));});}function de(){N.forEach((t,o)=>{t.style.strokeDasharray=`${w[o]}`,t.style.strokeDashoffset=k==="reverse"?"0":`${w[o]}`,c?t.style.opacity=k==="reverse"?"1":"0":t.style.opacity="",v&&(t.style.stroke=v),g!==null&&(t.style.strokeWidth=`${g}`),$&&t.tagName.toLowerCase()==="path"&&x[o]&&t.setAttribute("d",x[o]);});}if(N.forEach(t=>{Ne(t);let o=oe(t);w.push(o),t.tagName.toLowerCase()==="path"?x.push(t.getAttribute("d")??""):x.push(""),n?(t.style.strokeDasharray=`${o}`,t.style.strokeDashoffset=k==="reverse"?`${o}`:"0",c&&(t.style.opacity="1"),h&&(t.style.stroke=h),y!==null&&(t.style.strokeWidth=`${y}`),$&&t.tagName.toLowerCase()==="path"&&t.setAttribute("d",$)):(t.style.strokeDasharray=`${o}`,t.style.strokeDashoffset=k==="reverse"?"0":`${o}`,c?t.style.opacity=k==="reverse"?"1":"0":t.style.opacity="",v&&(t.style.stroke=v),g!==null&&(t.style.strokeWidth=`${g}`));}),n)return ue?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};me();function Z(){if(!V||S)return;let t=performance.now(),o=Y(),i=a;if(j!==false){let l=t-pe,d=l>0?Math.abs(o-(G<0?o:G))/l:0;i=a*Math.max(.2,1+d*(typeof j=="number"?j:1)*.04);}G=o,pe=t;let m=ae?z===-1||o>=z?"forward":"reverse":k;z=o;let B=M-L,F=true;if(N.forEach((l,d)=>{let T=d*W*B,f=fe(H(o,L+T,M+T,i));ie&&!ae&&(C=Math.max(C,f),f=C),J=f,l.style.strokeDashoffset=m==="reverse"?`${w[d]*f}`:`${w[d]*(1-f)}`,c&&(l.style.opacity=m==="reverse"?`${1-f}`:`${f}`),v&&h?l.style.stroke=se(v,h,f):h&&(l.style.stroke=h),g!==null&&y!==null?l.style.strokeWidth=`${g+(y-g)*f}`:y!==null&&(l.style.strokeWidth=`${y}`),$&&l.tagName.toLowerCase()==="path"&&x[d]&&l.setAttribute("d",ve(x[d],$,f)),d===0&&Te?.(f),f<1&&(F=false);}),_){let l=fe(H(o,L,M,i));for(let d in _){let T=parseFloat(d);l>=T&&!R.has(T)&&(R.add(T),_[d]?.());}}!O&&H(o,L,M,i)>0&&(O=true,De?.()),F&&!P?(P=true,ue?.(),K<(ce==="infinite"?1/0:ce??0)&&(K++,Q=setTimeout(()=>{C=-1,O=false,P=false,R.clear(),de();},Se))):!F&&!ie&&(P=false),A=requestAnimationFrame(Z);}let ee=new IntersectionObserver(t=>{t.forEach(o=>{V=o.isIntersecting,V&&!S?A=requestAnimationFrame(Z):cancelAnimationFrame(A);});},{root:p??null,threshold:$e,rootMargin:Ae}),te;function q(){clearTimeout(te),te=setTimeout(()=>{N.forEach((t,o)=>{w[o]=oe(t),t.style.strokeDasharray=`${w[o]}`;}),me();},150);}return window.addEventListener("resize",q),window.addEventListener("orientationchange",q),le>0?setTimeout(()=>ee.observe(e),le):ee.observe(e),{destroy(){cancelAnimationFrame(A),clearTimeout(Q),ee.disconnect(),window.removeEventListener("resize",q),window.removeEventListener("orientationchange",q),clearTimeout(te),U?.remove();},replay(){C=-1,z=-1,G=-1,O=false,P=false,K=0,S=false,R.clear(),clearTimeout(Q),de();},pause(){S=true,cancelAnimationFrame(A);},resume(){S&&(S=false,V&&(A=requestAnimationFrame(Z)));},seek(t){let o=Math.min(1,Math.max(0,t));J=o,C=o,S=true,cancelAnimationFrame(A),Ce(o,k);},getProgress(){return J}}}var Ee=class{constructor(){this.instance=null;}init(r,n={}){return this.destroy(),this.instance=xe(r,n),this}replay(){return this.instance?.replay(),this}destroy(){return this.instance?.destroy(),this.instance=null,this}};exports.ScrollDrawRef=Ee;

package/dist/angular/index.d.mts

@@ -19,7 +19,7 @@ interface ScrollDrawOptions {
     scrollContainer?: string | Element;
     /** Automatically reverse the animation when the user scrolls back up. */
     autoReverse?: boolean;
-    /** Delay in milliseconds before the engine starts observing (useful for page-load sequences). */
+    /** Delay in milliseconds before the engine starts observing. */
     delay?: number;
     /** Animate stroke color. Single string = static override. Tuple = interpolate from → to. */
     strokeColor?: string | [string, string];
@@ -27,6 +27,18 @@ interface ScrollDrawOptions {
     strokeWidth?: number | [number, number];
     /** Fire callbacks at specific progress thresholds (0–1). Resets on replay(). */
     waypoints?: Record<number, () => void>;
+    /** Scale animation speed by scroll velocity — faster scrolling = faster draw. Pass a number to control sensitivity (default 1). */
+    velocityScale?: boolean | number;
+    /** IntersectionObserver threshold (0–1). Default 0. */
+    threshold?: number;
+    /** IntersectionObserver rootMargin. Default "0px". */
+    rootMargin?: string;
+    /** Repeat the animation N times after completion. Use 'infinite' to loop forever. */
+    repeat?: number | 'infinite';
+    /** Milliseconds to wait between repeats. Default 0. */
+    repeatDelay?: number;
+    /** Target path `d` attribute to morph toward as the animation progresses. Paths must have compatible structures. */
+    morphTo?: string;
     onProgress?: (alpha: number) => void;
     onStart?: () => void;
     onComplete?: () => void;
@@ -35,6 +47,14 @@ interface ScrollDrawInstance {
     destroy: () => void;
     /** Reset and replay the animation from the beginning. */
     replay: () => void;
+    /** Pause the animation at the current progress. */
+    pause: () => void;
+    /** Resume a paused animation. */
+    resume: () => void;
+    /** Jump to a specific progress value (0–1) and pause. */
+    seek: (progress: number) => void;
+    /** Returns current draw progress (0–1). */
+    getProgress: () => number;
 }
 
 /**

package/dist/angular/index.d.ts

@@ -19,7 +19,7 @@ interface ScrollDrawOptions {
     scrollContainer?: string | Element;
     /** Automatically reverse the animation when the user scrolls back up. */
     autoReverse?: boolean;
-    /** Delay in milliseconds before the engine starts observing (useful for page-load sequences). */
+    /** Delay in milliseconds before the engine starts observing. */
     delay?: number;
     /** Animate stroke color. Single string = static override. Tuple = interpolate from → to. */
     strokeColor?: string | [string, string];
@@ -27,6 +27,18 @@ interface ScrollDrawOptions {
     strokeWidth?: number | [number, number];
     /** Fire callbacks at specific progress thresholds (0–1). Resets on replay(). */
     waypoints?: Record<number, () => void>;
+    /** Scale animation speed by scroll velocity — faster scrolling = faster draw. Pass a number to control sensitivity (default 1). */
+    velocityScale?: boolean | number;
+    /** IntersectionObserver threshold (0–1). Default 0. */
+    threshold?: number;
+    /** IntersectionObserver rootMargin. Default "0px". */
+    rootMargin?: string;
+    /** Repeat the animation N times after completion. Use 'infinite' to loop forever. */
+    repeat?: number | 'infinite';
+    /** Milliseconds to wait between repeats. Default 0. */
+    repeatDelay?: number;
+    /** Target path `d` attribute to morph toward as the animation progresses. Paths must have compatible structures. */
+    morphTo?: string;
     onProgress?: (alpha: number) => void;
     onStart?: () => void;
     onComplete?: () => void;
@@ -35,6 +47,14 @@ interface ScrollDrawInstance {
     destroy: () => void;
     /** Reset and replay the animation from the beginning. */
     replay: () => void;
+    /** Pause the animation at the current progress. */
+    pause: () => void;
+    /** Resume a paused animation. */
+    resume: () => void;
+    /** Jump to a specific progress value (0–1) and pause. */
+    seek: (progress: number) => void;
+    /** Returns current draw progress (0–1). */
+    getProgress: () => number;
 }
 
 /**

package/dist/angular/index.mjs

@@ -1,3 +1,3 @@
-var X={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 _(e="top bottom"){let t=e.trim();if(/^\d+(\.\d+)?%$/.test(t))return {element:"top",viewport:t};let[n="top",o="bottom"]=t.split(/\s+/).filter(Boolean);return {element:n,viewport:o}}function te(e,t,n,o){switch(o){case "top":return e+n;case "center":return e+n+t/2;case "bottom":return e+n+t;default:return e+n}}function re(e,t){if(/^\d+(\.\d+)?%$/.test(e))return t*(parseFloat(e)/100);switch(e){case "top":return 0;case "center":return t/2;case "bottom":return t;default:return t}}function j(e){let t=e.tagName.toLowerCase();if(t==="rect"){let n=parseFloat(e.getAttribute("width")??"0"),o=parseFloat(e.getAttribute("height")??"0");return 2*(n+o)}if(t==="circle"){let n=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*n}return e.getTotalLength()}function ye(e,t,n){return Math.min(n,Math.max(t,e))}function z(e,t,n,o){return n===t?0:ye((e-t)/(n-t)*o,0,1)}function oe(e,t,n,o,i){let p=te(e.top,e.height,t,o.element)-re(o.viewport,n),d=te(e.top,e.height,t,i.element)-re(i.viewport,n);return {tStart:p,tEnd:d}}function ne(e){let t=/^#([a-f\d])([a-f\d])([a-f\d])$/i.exec(e);if(t)return [parseInt(t[1]+t[1],16),parseInt(t[2]+t[2],16),parseInt(t[3]+t[3],16)];let n=/^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);if(n)return [parseInt(n[1],16),parseInt(n[2],16),parseInt(n[3],16)];let o=/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i.exec(e);return o?[parseInt(o[1]),parseInt(o[2]),parseInt(o[3])]:null}function se(e,t,n){let o=ne(e),i=ne(t);return !o||!i?e:`rgb(${Math.round(o[0]+(i[0]-o[0])*n)},${Math.round(o[1]+(i[1]-o[1])*n)},${Math.round(o[2]+(i[2]-o[2])*n)})`}function ie(e,t){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,t);}function be(e){let t=e.getAttribute("stroke"),n=e.getAttribute("fill");!t||t==="none"?ie("Element has no stroke \u2014 path will not be visible.",e):n&&n!=="none"&&n!=="transparent"&&ie("Element has a fill \u2014 it may obscure the stroke animation.",e);}function ge(e,t,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 i(){let p=n==="x"?window.scrollX:window.scrollY,d=e-p,A=t-p,T=n==="x";o.innerHTML=`
-      <div style="position:absolute;${T?`left:${d}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${d}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;${T?`left:${A}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${A}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",i,{passive:true}),i(),o}function le(e,t={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{}};let n=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:o="path, polyline, line, polygon, rect, circle",speed:i=1,fade:p=false,easing:d="linear",trigger:A={},stagger:T=0,direction:b="forward",once:J=false,debug:ce=false,axis:f="y",scrollContainer:W,autoReverse:K=false,delay:Q=0,strokeColor:g,strokeWidth:w,waypoints:G,onProgress:ue,onStart:pe,onComplete:U}=t,Y=typeof d=="function"?d:X[d]??X.linear,fe=_(A.start??"top bottom"),de=_(A.end??"bottom top"),l=typeof W=="string"?document.querySelector(W):W??null,v=Array.isArray(g)?g[0]:null,x=Array.isArray(g)?g[1]:typeof g=="string"?g:null,m=Array.isArray(w)?w[0]:null,E=Array.isArray(w)?w[1]:typeof w=="number"?w:null,I=Array.from(e.querySelectorAll(o)),h=[],$=0,k=0,L=false,V=false,M=0,N=false,F=-1,C=-1,P=null,R=new Set;function q(){return l?f==="x"?l.scrollLeft:l.scrollTop:f==="x"?window.scrollX:window.scrollY}function me(){return l?f==="x"?l.clientWidth:l.clientHeight:f==="x"?window.innerWidth:window.innerHeight}function Z(){let r=e.getBoundingClientRect(),s,D,y;if(l){let c=l.getBoundingClientRect();s=f==="x"?r.left-c.left+l.scrollLeft:r.top-c.top+l.scrollTop,D=f==="x"?r.width:r.height,y=q();}else s=f==="x"?r.left:r.top,D=f==="x"?r.width:r.height,y=q();let a=oe({top:s,height:D},y,me(),fe,de);$=a.tStart,k=a.tEnd,ce&&process.env.NODE_ENV!=="production"&&(P?.remove(),P=ge($,k,f));}function he(){I.forEach((r,s)=>{r.style.strokeDasharray=`${h[s]}`,r.style.strokeDashoffset=b==="reverse"?"0":`${h[s]}`,p?r.style.opacity=b==="reverse"?"1":"0":r.style.opacity="",v&&(r.style.stroke=v),m!==null&&(r.style.strokeWidth=`${m}`);});}if(I.forEach(r=>{be(r);let s=j(r);h.push(s),n?(r.style.strokeDasharray=`${s}`,r.style.strokeDashoffset=b==="reverse"?`${s}`:"0",p&&(r.style.opacity="1"),x&&(r.style.stroke=x),E!==null&&(r.style.strokeWidth=`${E}`)):(r.style.strokeDasharray=`${s}`,r.style.strokeDashoffset=b==="reverse"?"0":`${s}`,p?r.style.opacity=b==="reverse"?"1":"0":r.style.opacity="",v&&(r.style.stroke=v),m!==null&&(r.style.strokeWidth=`${m}`));}),n)return U?.(),{destroy:()=>{},replay:()=>{}};Z();function ee(){if(!N)return;let r=q(),s=K?C===-1||r>=C?"forward":"reverse":b;C=r;let D=k-$,y=true;if(I.forEach((a,c)=>{let S=c*T*D,u=Y(z(r,$+S,k+S,i));J&&!K&&(F=Math.max(F,u),u=F),a.style.strokeDashoffset=s==="reverse"?`${h[c]*u}`:`${h[c]*(1-u)}`,p&&(a.style.opacity=s==="reverse"?`${1-u}`:`${u}`),v&&x?a.style.stroke=se(v,x,u):x&&(a.style.stroke=x),m!==null&&E!==null?a.style.strokeWidth=`${m+(E-m)*u}`:E!==null&&(a.style.strokeWidth=`${E}`),c===0&&ue?.(u),u<1&&(y=false);}),G){let a=Y(z(r,$,k,i));for(let c in G){let S=parseFloat(c);a>=S&&!R.has(S)&&(R.add(S),G[c]?.());}}!V&&z(r,$,k,i)>0&&(V=true,pe?.()),y&&!L?(L=true,U?.()):!y&&!J&&(L=false),M=requestAnimationFrame(ee);}let B=new IntersectionObserver(r=>{r.forEach(s=>{N=s.isIntersecting,N?M=requestAnimationFrame(ee):cancelAnimationFrame(M);});},{root:l??null}),H;function O(){clearTimeout(H),H=setTimeout(()=>{I.forEach((r,s)=>{h[s]=j(r),r.style.strokeDasharray=`${h[s]}`;}),Z();},150);}return window.addEventListener("resize",O),window.addEventListener("orientationchange",O),Q>0?setTimeout(()=>B.observe(e),Q):B.observe(e),{destroy(){cancelAnimationFrame(M),B.disconnect(),window.removeEventListener("resize",O),window.removeEventListener("orientationchange",O),clearTimeout(H),P?.remove();},replay(){F=-1,C=-1,V=false,L=false,R.clear(),he();}}}var ae=class{constructor(){this.instance=null;}init(t,n={}){return this.destroy(),this.instance=le(t,n),this}replay(){return this.instance?.replay(),this}destroy(){return this.instance?.destroy(),this.instance=null,this}};export{ae as ScrollDrawRef};
+var re={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 ne(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 he(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 ge(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 oe(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 Fe(e,r,n){return Math.min(n,Math.max(r,e))}function H(e,r,n,s){return n===r?0:Fe((e-r)/(n-r)*s,0,1)}function be(e,r,n,s,a){let c=he(e.top,e.height,r,s.element)-ge(s.viewport,n),u=he(e.top,e.height,r,a.element)-ge(a.viewport,n);return {tStart:c,tEnd:u}}function ye(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=ye(e),a=ye(r);return !s||!a?e:`rgb(${Math.round(s[0]+(a[0]-s[0])*n)},${Math.round(s[1]+(a[1]-s[1])*n)},${Math.round(s[2]+(a[2]-s[2])*n)})`}function we(e,r){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,r);}function Ne(e){let r=e.getAttribute("stroke"),n=e.getAttribute("fill");!r||r==="none"?we("Element has no stroke \u2014 path will not be visible.",e):n&&n!=="none"&&n!=="transparent"&&we("Element has a fill \u2014 it may obscure the stroke animation.",e);}function Pe(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 c=n==="x"?window.scrollX:window.scrollY,u=e-c,E=r-c,W=n==="x";s.innerHTML=`
+      <div style="position:absolute;${W?`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;${W?`left:${E}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${E}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 ve(e,r,n){let s=(r.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),a=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,c=>{let u=parseFloat(c),E=s[a++]??u;return String(+(u+(E-u)*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:c=false,easing:u="linear",trigger:E={},stagger:W=0,direction:k="forward",once:ie=false,debug:ke=false,axis:b="y",scrollContainer:X,autoReverse:ae=false,delay:le=0,strokeColor:D,strokeWidth:I,waypoints:_,velocityScale:j=false,threshold:$e=0,rootMargin:Ae="0px",repeat:ce=0,repeatDelay:Se=0,morphTo:$,onProgress:Te,onStart:De,onComplete:ue}=r,fe=typeof u=="function"?u:re[u]??re.linear,Ie=ne(E.start??"top bottom"),Le=ne(E.end??"bottom top"),p=typeof X=="string"?document.querySelector(X):X??null,v=Array.isArray(D)?D[0]:null,h=Array.isArray(D)?D[1]:typeof D=="string"?D:null,g=Array.isArray(I)?I[0]:null,y=Array.isArray(I)?I[1]:typeof I=="number"?I:null,N=Array.from(e.querySelectorAll(s)),w=[],x=[],L=0,M=0,P=false,O=false,A=0,V=false,C=-1,z=-1,S=false,J=0,K=0,Q,U=null,R=new Set,G=-1,pe=performance.now();function Y(){return p?b==="x"?p.scrollLeft:p.scrollTop:b==="x"?window.scrollX:window.scrollY}function Me(){return p?b==="x"?p.clientWidth:p.clientHeight:b==="x"?window.innerWidth:window.innerHeight}function me(){let t=e.getBoundingClientRect(),o,i,m;if(p){let F=p.getBoundingClientRect();o=b==="x"?t.left-F.left+p.scrollLeft:t.top-F.top+p.scrollTop,i=b==="x"?t.width:t.height,m=Y();}else o=b==="x"?t.left:t.top,i=b==="x"?t.width:t.height,m=Y();let B=be({top:o,height:i},m,Me(),Ie,Le);L=B.tStart,M=B.tEnd,ke&&process.env.NODE_ENV!=="production"&&(U?.remove(),U=Pe(L,M,b));}function Ce(t,o){N.forEach((i,m)=>{i.style.strokeDashoffset=o==="reverse"?`${w[m]*t}`:`${w[m]*(1-t)}`,c&&(i.style.opacity=o==="reverse"?`${1-t}`:`${t}`),v&&h?i.style.stroke=se(v,h,t):h&&(i.style.stroke=h),g!==null&&y!==null?i.style.strokeWidth=`${g+(y-g)*t}`:y!==null&&(i.style.strokeWidth=`${y}`),$&&i.tagName.toLowerCase()==="path"&&x[m]&&i.setAttribute("d",ve(x[m],$,t));});}function de(){N.forEach((t,o)=>{t.style.strokeDasharray=`${w[o]}`,t.style.strokeDashoffset=k==="reverse"?"0":`${w[o]}`,c?t.style.opacity=k==="reverse"?"1":"0":t.style.opacity="",v&&(t.style.stroke=v),g!==null&&(t.style.strokeWidth=`${g}`),$&&t.tagName.toLowerCase()==="path"&&x[o]&&t.setAttribute("d",x[o]);});}if(N.forEach(t=>{Ne(t);let o=oe(t);w.push(o),t.tagName.toLowerCase()==="path"?x.push(t.getAttribute("d")??""):x.push(""),n?(t.style.strokeDasharray=`${o}`,t.style.strokeDashoffset=k==="reverse"?`${o}`:"0",c&&(t.style.opacity="1"),h&&(t.style.stroke=h),y!==null&&(t.style.strokeWidth=`${y}`),$&&t.tagName.toLowerCase()==="path"&&t.setAttribute("d",$)):(t.style.strokeDasharray=`${o}`,t.style.strokeDashoffset=k==="reverse"?"0":`${o}`,c?t.style.opacity=k==="reverse"?"1":"0":t.style.opacity="",v&&(t.style.stroke=v),g!==null&&(t.style.strokeWidth=`${g}`));}),n)return ue?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};me();function Z(){if(!V||S)return;let t=performance.now(),o=Y(),i=a;if(j!==false){let l=t-pe,d=l>0?Math.abs(o-(G<0?o:G))/l:0;i=a*Math.max(.2,1+d*(typeof j=="number"?j:1)*.04);}G=o,pe=t;let m=ae?z===-1||o>=z?"forward":"reverse":k;z=o;let B=M-L,F=true;if(N.forEach((l,d)=>{let T=d*W*B,f=fe(H(o,L+T,M+T,i));ie&&!ae&&(C=Math.max(C,f),f=C),J=f,l.style.strokeDashoffset=m==="reverse"?`${w[d]*f}`:`${w[d]*(1-f)}`,c&&(l.style.opacity=m==="reverse"?`${1-f}`:`${f}`),v&&h?l.style.stroke=se(v,h,f):h&&(l.style.stroke=h),g!==null&&y!==null?l.style.strokeWidth=`${g+(y-g)*f}`:y!==null&&(l.style.strokeWidth=`${y}`),$&&l.tagName.toLowerCase()==="path"&&x[d]&&l.setAttribute("d",ve(x[d],$,f)),d===0&&Te?.(f),f<1&&(F=false);}),_){let l=fe(H(o,L,M,i));for(let d in _){let T=parseFloat(d);l>=T&&!R.has(T)&&(R.add(T),_[d]?.());}}!O&&H(o,L,M,i)>0&&(O=true,De?.()),F&&!P?(P=true,ue?.(),K<(ce==="infinite"?1/0:ce??0)&&(K++,Q=setTimeout(()=>{C=-1,O=false,P=false,R.clear(),de();},Se))):!F&&!ie&&(P=false),A=requestAnimationFrame(Z);}let ee=new IntersectionObserver(t=>{t.forEach(o=>{V=o.isIntersecting,V&&!S?A=requestAnimationFrame(Z):cancelAnimationFrame(A);});},{root:p??null,threshold:$e,rootMargin:Ae}),te;function q(){clearTimeout(te),te=setTimeout(()=>{N.forEach((t,o)=>{w[o]=oe(t),t.style.strokeDasharray=`${w[o]}`;}),me();},150);}return window.addEventListener("resize",q),window.addEventListener("orientationchange",q),le>0?setTimeout(()=>ee.observe(e),le):ee.observe(e),{destroy(){cancelAnimationFrame(A),clearTimeout(Q),ee.disconnect(),window.removeEventListener("resize",q),window.removeEventListener("orientationchange",q),clearTimeout(te),U?.remove();},replay(){C=-1,z=-1,G=-1,O=false,P=false,K=0,S=false,R.clear(),clearTimeout(Q),de();},pause(){S=true,cancelAnimationFrame(A);},resume(){S&&(S=false,V&&(A=requestAnimationFrame(Z)));},seek(t){let o=Math.min(1,Math.max(0,t));J=o,C=o,S=true,cancelAnimationFrame(A),Ce(o,k);},getProgress(){return J}}}var Ee=class{constructor(){this.instance=null;}init(r,n={}){return this.destroy(),this.instance=xe(r,n),this}replay(){return this.instance?.replay(),this}destroy(){return this.instance?.destroy(),this.instance=null,this}};export{Ee as ScrollDrawRef};

package/dist/astro/index.cjs

@@ -0,0 +1,3 @@
+'use strict';var ne={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 oe(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 ge(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 he(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 Ce(e,r,n){return Math.min(n,Math.max(r,e))}function H(e,r,n,o){return n===r?0:Ce((e-r)/(n-r)*o,0,1)}function we(e,r,n,o,a){let c=ge(e.top,e.height,r,o.element)-he(o.viewport,n),u=ge(e.top,e.height,r,a.element)-he(a.viewport,n);return {tStart:c,tEnd:u}}function be(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 ie(e,r,n){let o=be(e),a=be(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);}function Fe(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 Ne(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 c=n==="x"?window.scrollX:window.scrollY,u=e-c,E=r-c,P=n==="x";o.innerHTML=`
+      <div style="position:absolute;${P?`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;${P?`left:${E}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${E}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 xe(e,r,n){let o=(r.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),a=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,c=>{let u=parseFloat(c),E=o[a++]??u;return String(+(u+(E-u)*n).toFixed(4))})}function X(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:c=false,easing:u="linear",trigger:E={},stagger:P=0,direction:S="forward",once:ae=false,debug:Ee=false,axis:b="y",scrollContainer:_,autoReverse:le=false,delay:ce=0,strokeColor:T,strokeWidth:I,waypoints:J,velocityScale:j=false,threshold:Se=0,rootMargin:De="0px",repeat:ue=0,repeatDelay:ke=0,morphTo:D,onProgress:Ae,onStart:$e,onComplete:fe}=r,pe=typeof u=="function"?u:ne[u]??ne.linear,Te=oe(E.start??"top bottom"),Ie=oe(E.end??"bottom top"),p=typeof _=="string"?document.querySelector(_):_??null,v=Array.isArray(T)?T[0]:null,y=Array.isArray(T)?T[1]:typeof T=="string"?T:null,g=Array.isArray(I)?I[0]:null,h=Array.isArray(I)?I[1]:typeof I=="number"?I:null,N=Array.from(e.querySelectorAll(o)),w=[],x=[],L=0,M=0,O=false,W=false,k=0,R=false,C=-1,V=-1,A=false,K=0,Q=0,U,Y=null,z=new Set,G=-1,me=performance.now();function Z(){return p?b==="x"?p.scrollLeft:p.scrollTop:b==="x"?window.scrollX:window.scrollY}function Le(){return p?b==="x"?p.clientWidth:p.clientHeight:b==="x"?window.innerWidth:window.innerHeight}function de(){let t=e.getBoundingClientRect(),s,i,m;if(p){let F=p.getBoundingClientRect();s=b==="x"?t.left-F.left+p.scrollLeft:t.top-F.top+p.scrollTop,i=b==="x"?t.width:t.height,m=Z();}else s=b==="x"?t.left:t.top,i=b==="x"?t.width:t.height,m=Z();let B=we({top:s,height:i},m,Le(),Te,Ie);L=B.tStart,M=B.tEnd,Ee&&process.env.NODE_ENV!=="production"&&(Y?.remove(),Y=Ne(L,M,b));}function Me(t,s){N.forEach((i,m)=>{i.style.strokeDashoffset=s==="reverse"?`${w[m]*t}`:`${w[m]*(1-t)}`,c&&(i.style.opacity=s==="reverse"?`${1-t}`:`${t}`),v&&y?i.style.stroke=ie(v,y,t):y&&(i.style.stroke=y),g!==null&&h!==null?i.style.strokeWidth=`${g+(h-g)*t}`:h!==null&&(i.style.strokeWidth=`${h}`),D&&i.tagName.toLowerCase()==="path"&&x[m]&&i.setAttribute("d",xe(x[m],D,t));});}function ye(){N.forEach((t,s)=>{t.style.strokeDasharray=`${w[s]}`,t.style.strokeDashoffset=S==="reverse"?"0":`${w[s]}`,c?t.style.opacity=S==="reverse"?"1":"0":t.style.opacity="",v&&(t.style.stroke=v),g!==null&&(t.style.strokeWidth=`${g}`),D&&t.tagName.toLowerCase()==="path"&&x[s]&&t.setAttribute("d",x[s]);});}if(N.forEach(t=>{Fe(t);let s=se(t);w.push(s),t.tagName.toLowerCase()==="path"?x.push(t.getAttribute("d")??""):x.push(""),n?(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=S==="reverse"?`${s}`:"0",c&&(t.style.opacity="1"),y&&(t.style.stroke=y),h!==null&&(t.style.strokeWidth=`${h}`),D&&t.tagName.toLowerCase()==="path"&&t.setAttribute("d",D)):(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=S==="reverse"?"0":`${s}`,c?t.style.opacity=S==="reverse"?"1":"0":t.style.opacity="",v&&(t.style.stroke=v),g!==null&&(t.style.strokeWidth=`${g}`));}),n)return fe?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};de();function ee(){if(!R||A)return;let t=performance.now(),s=Z(),i=a;if(j!==false){let l=t-me,d=l>0?Math.abs(s-(G<0?s:G))/l:0;i=a*Math.max(.2,1+d*(typeof j=="number"?j:1)*.04);}G=s,me=t;let m=le?V===-1||s>=V?"forward":"reverse":S;V=s;let B=M-L,F=true;if(N.forEach((l,d)=>{let $=d*P*B,f=pe(H(s,L+$,M+$,i));ae&&!le&&(C=Math.max(C,f),f=C),K=f,l.style.strokeDashoffset=m==="reverse"?`${w[d]*f}`:`${w[d]*(1-f)}`,c&&(l.style.opacity=m==="reverse"?`${1-f}`:`${f}`),v&&y?l.style.stroke=ie(v,y,f):y&&(l.style.stroke=y),g!==null&&h!==null?l.style.strokeWidth=`${g+(h-g)*f}`:h!==null&&(l.style.strokeWidth=`${h}`),D&&l.tagName.toLowerCase()==="path"&&x[d]&&l.setAttribute("d",xe(x[d],D,f)),d===0&&Ae?.(f),f<1&&(F=false);}),J){let l=pe(H(s,L,M,i));for(let d in J){let $=parseFloat(d);l>=$&&!z.has($)&&(z.add($),J[d]?.());}}!W&&H(s,L,M,i)>0&&(W=true,$e?.()),F&&!O?(O=true,fe?.(),Q<(ue==="infinite"?1/0:ue??0)&&(Q++,U=setTimeout(()=>{C=-1,W=false,O=false,z.clear(),ye();},ke))):!F&&!ae&&(O=false),k=requestAnimationFrame(ee);}let te=new IntersectionObserver(t=>{t.forEach(s=>{R=s.isIntersecting,R&&!A?k=requestAnimationFrame(ee):cancelAnimationFrame(k);});},{root:p??null,threshold:Se,rootMargin:De}),re;function q(){clearTimeout(re),re=setTimeout(()=>{N.forEach((t,s)=>{w[s]=se(t),t.style.strokeDasharray=`${w[s]}`;}),de();},150);}return window.addEventListener("resize",q),window.addEventListener("orientationchange",q),ce>0?setTimeout(()=>te.observe(e),ce):te.observe(e),{destroy(){cancelAnimationFrame(k),clearTimeout(U),te.disconnect(),window.removeEventListener("resize",q),window.removeEventListener("orientationchange",q),clearTimeout(re),Y?.remove();},replay(){C=-1,V=-1,G=-1,W=false,O=false,Q=0,A=false,z.clear(),clearTimeout(U),ye();},pause(){A=true,cancelAnimationFrame(k);},resume(){A&&(A=false,R&&(k=requestAnimationFrame(ee)));},seek(t){let s=Math.min(1,Math.max(0,t));K=s,C=s,A=true,cancelAnimationFrame(k),Me(s,S);},getProgress(){return K}}}function Oe(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?X(o,r):(console.warn("[svg-scroll-draw] Container not found:",e),n)}function qe(e=document){return Array.from(e.querySelectorAll("[data-scroll-draw]")).map(r=>{let n={};try{let o=r.dataset.scrollDrawOptions??r.dataset.scrollDrawoptions??"";o&&(n=JSON.parse(o));}catch{}return X(r,n)})}exports.initScrollDraw=qe;exports.scrollDraw=Oe;

package/dist/astro/index.d.mts

@@ -0,0 +1,79 @@
+type EasingName = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring';
+interface TriggerConfig {
+    start?: string;
+    end?: string;
+}
+interface ScrollDrawOptions {
+    selector?: string;
+    speed?: number;
+    fade?: boolean;
+    easing?: EasingName | ((t: number) => number);
+    trigger?: TriggerConfig;
+    stagger?: number;
+    direction?: 'forward' | 'reverse';
+    once?: boolean;
+    debug?: boolean;
+    /** Scroll axis to track. 'y' (default) for vertical, 'x' for horizontal. */
+    axis?: 'x' | 'y';
+    /** CSS selector or Element for a custom scroll container (default: window). */
+    scrollContainer?: string | Element;
+    /** Automatically reverse the animation when the user scrolls back up. */
+    autoReverse?: boolean;
+    /** Delay in milliseconds before the engine starts observing. */
+    delay?: number;
+    /** Animate stroke color. Single string = static override. Tuple = interpolate from → to. */
+    strokeColor?: string | [string, string];
+    /** Animate stroke width. Single number = static override. Tuple = interpolate from → to. */
+    strokeWidth?: number | [number, number];
+    /** Fire callbacks at specific progress thresholds (0–1). Resets on replay(). */
+    waypoints?: Record<number, () => void>;
+    /** Scale animation speed by scroll velocity — faster scrolling = faster draw. Pass a number to control sensitivity (default 1). */
+    velocityScale?: boolean | number;
+    /** IntersectionObserver threshold (0–1). Default 0. */
+    threshold?: number;
+    /** IntersectionObserver rootMargin. Default "0px". */
+    rootMargin?: string;
+    /** Repeat the animation N times after completion. Use 'infinite' to loop forever. */
+    repeat?: number | 'infinite';
+    /** Milliseconds to wait between repeats. Default 0. */
+    repeatDelay?: number;
+    /** Target path `d` attribute to morph toward as the animation progresses. Paths must have compatible structures. */
+    morphTo?: string;
+    onProgress?: (alpha: number) => void;
+    onStart?: () => void;
+    onComplete?: () => void;
+}
+interface ScrollDrawInstance {
+    destroy: () => void;
+    /** Reset and replay the animation from the beginning. */
+    replay: () => void;
+    /** Pause the animation at the current progress. */
+    pause: () => void;
+    /** Resume a paused animation. */
+    resume: () => void;
+    /** Jump to a specific progress value (0–1) and pause. */
+    seek: (progress: number) => void;
+    /** Returns current draw progress (0–1). */
+    getProgress: () => number;
+}
+
+declare function scrollDraw(target: string | Element, options?: ScrollDrawOptions): ScrollDrawInstance;
+
+/**
+ * Auto-initialises all elements with a [data-scroll-draw] attribute on the page.
+ * Options are read from the data-scroll-draw-options JSON attribute.
+ *
+ * @example
+ * // In your Astro component:
+ * <div data-scroll-draw data-scroll-draw-options='{"easing":"ease-out","fade":true}'>
+ *   <svg>...</svg>
+ * </div>
+ *
+ * <script>
+ *   import { initScrollDraw } from 'svg-scroll-draw/astro';
+ *   initScrollDraw();
+ * </script>
+ */
+declare function initScrollDraw(root?: Element | Document): ScrollDrawInstance[];
+
+export { type ScrollDrawInstance, type ScrollDrawOptions, initScrollDraw, scrollDraw };

package/dist/astro/index.d.ts

@@ -0,0 +1,79 @@
+type EasingName = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring';
+interface TriggerConfig {
+    start?: string;
+    end?: string;
+}
+interface ScrollDrawOptions {
+    selector?: string;
+    speed?: number;
+    fade?: boolean;
+    easing?: EasingName | ((t: number) => number);
+    trigger?: TriggerConfig;
+    stagger?: number;
+    direction?: 'forward' | 'reverse';
+    once?: boolean;
+    debug?: boolean;
+    /** Scroll axis to track. 'y' (default) for vertical, 'x' for horizontal. */
+    axis?: 'x' | 'y';
+    /** CSS selector or Element for a custom scroll container (default: window). */
+    scrollContainer?: string | Element;
+    /** Automatically reverse the animation when the user scrolls back up. */
+    autoReverse?: boolean;
+    /** Delay in milliseconds before the engine starts observing. */
+    delay?: number;
+    /** Animate stroke color. Single string = static override. Tuple = interpolate from → to. */
+    strokeColor?: string | [string, string];
+    /** Animate stroke width. Single number = static override. Tuple = interpolate from → to. */
+    strokeWidth?: number | [number, number];
+    /** Fire callbacks at specific progress thresholds (0–1). Resets on replay(). */
+    waypoints?: Record<number, () => void>;
+    /** Scale animation speed by scroll velocity — faster scrolling = faster draw. Pass a number to control sensitivity (default 1). */
+    velocityScale?: boolean | number;
+    /** IntersectionObserver threshold (0–1). Default 0. */
+    threshold?: number;
+    /** IntersectionObserver rootMargin. Default "0px". */
+    rootMargin?: string;
+    /** Repeat the animation N times after completion. Use 'infinite' to loop forever. */
+    repeat?: number | 'infinite';
+    /** Milliseconds to wait between repeats. Default 0. */
+    repeatDelay?: number;
+    /** Target path `d` attribute to morph toward as the animation progresses. Paths must have compatible structures. */
+    morphTo?: string;
+    onProgress?: (alpha: number) => void;
+    onStart?: () => void;
+    onComplete?: () => void;
+}
+interface ScrollDrawInstance {
+    destroy: () => void;
+    /** Reset and replay the animation from the beginning. */
+    replay: () => void;
+    /** Pause the animation at the current progress. */
+    pause: () => void;
+    /** Resume a paused animation. */
+    resume: () => void;
+    /** Jump to a specific progress value (0–1) and pause. */
+    seek: (progress: number) => void;
+    /** Returns current draw progress (0–1). */
+    getProgress: () => number;
+}
+
+declare function scrollDraw(target: string | Element, options?: ScrollDrawOptions): ScrollDrawInstance;
+
+/**
+ * Auto-initialises all elements with a [data-scroll-draw] attribute on the page.
+ * Options are read from the data-scroll-draw-options JSON attribute.
+ *
+ * @example
+ * // In your Astro component:
+ * <div data-scroll-draw data-scroll-draw-options='{"easing":"ease-out","fade":true}'>
+ *   <svg>...</svg>
+ * </div>
+ *
+ * <script>
+ *   import { initScrollDraw } from 'svg-scroll-draw/astro';
+ *   initScrollDraw();
+ * </script>
+ */
+declare function initScrollDraw(root?: Element | Document): ScrollDrawInstance[];
+
+export { type ScrollDrawInstance, type ScrollDrawOptions, initScrollDraw, scrollDraw };

package/dist/astro/index.mjs

@@ -0,0 +1,3 @@
+var ne={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 oe(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 ge(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 he(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 Ce(e,r,n){return Math.min(n,Math.max(r,e))}function H(e,r,n,o){return n===r?0:Ce((e-r)/(n-r)*o,0,1)}function we(e,r,n,o,a){let c=ge(e.top,e.height,r,o.element)-he(o.viewport,n),u=ge(e.top,e.height,r,a.element)-he(a.viewport,n);return {tStart:c,tEnd:u}}function be(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 ie(e,r,n){let o=be(e),a=be(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);}function Fe(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 Ne(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 c=n==="x"?window.scrollX:window.scrollY,u=e-c,E=r-c,P=n==="x";o.innerHTML=`
+      <div style="position:absolute;${P?`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;${P?`left:${E}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${E}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 xe(e,r,n){let o=(r.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),a=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,c=>{let u=parseFloat(c),E=o[a++]??u;return String(+(u+(E-u)*n).toFixed(4))})}function X(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:c=false,easing:u="linear",trigger:E={},stagger:P=0,direction:S="forward",once:ae=false,debug:Ee=false,axis:b="y",scrollContainer:_,autoReverse:le=false,delay:ce=0,strokeColor:T,strokeWidth:I,waypoints:J,velocityScale:j=false,threshold:Se=0,rootMargin:De="0px",repeat:ue=0,repeatDelay:ke=0,morphTo:D,onProgress:Ae,onStart:$e,onComplete:fe}=r,pe=typeof u=="function"?u:ne[u]??ne.linear,Te=oe(E.start??"top bottom"),Ie=oe(E.end??"bottom top"),p=typeof _=="string"?document.querySelector(_):_??null,v=Array.isArray(T)?T[0]:null,y=Array.isArray(T)?T[1]:typeof T=="string"?T:null,g=Array.isArray(I)?I[0]:null,h=Array.isArray(I)?I[1]:typeof I=="number"?I:null,N=Array.from(e.querySelectorAll(o)),w=[],x=[],L=0,M=0,O=false,W=false,k=0,R=false,C=-1,V=-1,A=false,K=0,Q=0,U,Y=null,z=new Set,G=-1,me=performance.now();function Z(){return p?b==="x"?p.scrollLeft:p.scrollTop:b==="x"?window.scrollX:window.scrollY}function Le(){return p?b==="x"?p.clientWidth:p.clientHeight:b==="x"?window.innerWidth:window.innerHeight}function de(){let t=e.getBoundingClientRect(),s,i,m;if(p){let F=p.getBoundingClientRect();s=b==="x"?t.left-F.left+p.scrollLeft:t.top-F.top+p.scrollTop,i=b==="x"?t.width:t.height,m=Z();}else s=b==="x"?t.left:t.top,i=b==="x"?t.width:t.height,m=Z();let B=we({top:s,height:i},m,Le(),Te,Ie);L=B.tStart,M=B.tEnd,Ee&&process.env.NODE_ENV!=="production"&&(Y?.remove(),Y=Ne(L,M,b));}function Me(t,s){N.forEach((i,m)=>{i.style.strokeDashoffset=s==="reverse"?`${w[m]*t}`:`${w[m]*(1-t)}`,c&&(i.style.opacity=s==="reverse"?`${1-t}`:`${t}`),v&&y?i.style.stroke=ie(v,y,t):y&&(i.style.stroke=y),g!==null&&h!==null?i.style.strokeWidth=`${g+(h-g)*t}`:h!==null&&(i.style.strokeWidth=`${h}`),D&&i.tagName.toLowerCase()==="path"&&x[m]&&i.setAttribute("d",xe(x[m],D,t));});}function ye(){N.forEach((t,s)=>{t.style.strokeDasharray=`${w[s]}`,t.style.strokeDashoffset=S==="reverse"?"0":`${w[s]}`,c?t.style.opacity=S==="reverse"?"1":"0":t.style.opacity="",v&&(t.style.stroke=v),g!==null&&(t.style.strokeWidth=`${g}`),D&&t.tagName.toLowerCase()==="path"&&x[s]&&t.setAttribute("d",x[s]);});}if(N.forEach(t=>{Fe(t);let s=se(t);w.push(s),t.tagName.toLowerCase()==="path"?x.push(t.getAttribute("d")??""):x.push(""),n?(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=S==="reverse"?`${s}`:"0",c&&(t.style.opacity="1"),y&&(t.style.stroke=y),h!==null&&(t.style.strokeWidth=`${h}`),D&&t.tagName.toLowerCase()==="path"&&t.setAttribute("d",D)):(t.style.strokeDasharray=`${s}`,t.style.strokeDashoffset=S==="reverse"?"0":`${s}`,c?t.style.opacity=S==="reverse"?"1":"0":t.style.opacity="",v&&(t.style.stroke=v),g!==null&&(t.style.strokeWidth=`${g}`));}),n)return fe?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};de();function ee(){if(!R||A)return;let t=performance.now(),s=Z(),i=a;if(j!==false){let l=t-me,d=l>0?Math.abs(s-(G<0?s:G))/l:0;i=a*Math.max(.2,1+d*(typeof j=="number"?j:1)*.04);}G=s,me=t;let m=le?V===-1||s>=V?"forward":"reverse":S;V=s;let B=M-L,F=true;if(N.forEach((l,d)=>{let $=d*P*B,f=pe(H(s,L+$,M+$,i));ae&&!le&&(C=Math.max(C,f),f=C),K=f,l.style.strokeDashoffset=m==="reverse"?`${w[d]*f}`:`${w[d]*(1-f)}`,c&&(l.style.opacity=m==="reverse"?`${1-f}`:`${f}`),v&&y?l.style.stroke=ie(v,y,f):y&&(l.style.stroke=y),g!==null&&h!==null?l.style.strokeWidth=`${g+(h-g)*f}`:h!==null&&(l.style.strokeWidth=`${h}`),D&&l.tagName.toLowerCase()==="path"&&x[d]&&l.setAttribute("d",xe(x[d],D,f)),d===0&&Ae?.(f),f<1&&(F=false);}),J){let l=pe(H(s,L,M,i));for(let d in J){let $=parseFloat(d);l>=$&&!z.has($)&&(z.add($),J[d]?.());}}!W&&H(s,L,M,i)>0&&(W=true,$e?.()),F&&!O?(O=true,fe?.(),Q<(ue==="infinite"?1/0:ue??0)&&(Q++,U=setTimeout(()=>{C=-1,W=false,O=false,z.clear(),ye();},ke))):!F&&!ae&&(O=false),k=requestAnimationFrame(ee);}let te=new IntersectionObserver(t=>{t.forEach(s=>{R=s.isIntersecting,R&&!A?k=requestAnimationFrame(ee):cancelAnimationFrame(k);});},{root:p??null,threshold:Se,rootMargin:De}),re;function q(){clearTimeout(re),re=setTimeout(()=>{N.forEach((t,s)=>{w[s]=se(t),t.style.strokeDasharray=`${w[s]}`;}),de();},150);}return window.addEventListener("resize",q),window.addEventListener("orientationchange",q),ce>0?setTimeout(()=>te.observe(e),ce):te.observe(e),{destroy(){cancelAnimationFrame(k),clearTimeout(U),te.disconnect(),window.removeEventListener("resize",q),window.removeEventListener("orientationchange",q),clearTimeout(re),Y?.remove();},replay(){C=-1,V=-1,G=-1,W=false,O=false,Q=0,A=false,z.clear(),clearTimeout(U),ye();},pause(){A=true,cancelAnimationFrame(k);},resume(){A&&(A=false,R&&(k=requestAnimationFrame(ee)));},seek(t){let s=Math.min(1,Math.max(0,t));K=s,C=s,A=true,cancelAnimationFrame(k),Me(s,S);},getProgress(){return K}}}function Oe(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?X(o,r):(console.warn("[svg-scroll-draw] Container not found:",e),n)}function qe(e=document){return Array.from(e.querySelectorAll("[data-scroll-draw]")).map(r=>{let n={};try{let o=r.dataset.scrollDrawOptions??r.dataset.scrollDrawoptions??"";o&&(n=JSON.parse(o));}catch{}return X(r,n)})}export{qe as initScrollDraw,Oe as scrollDraw};

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

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

package/dist/group/index.cjs

@@ -0,0 +1,3 @@
+'use strict';var re={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 ne(e="top bottom"){let t=e.trim();if(/^\d+(\.\d+)?%$/.test(t))return {element:"top",viewport:t};let[o="top",r="bottom"]=t.split(/\s+/).filter(Boolean);return {element:o,viewport:r}}function ye(e,t,o,r){switch(r){case "top":return e+o;case "center":return e+o+t/2;case "bottom":return e+o+t;default:return e+o}}function he(e,t){if(/^\d+(\.\d+)?%$/.test(e))return t*(parseFloat(e)/100);switch(e){case "top":return 0;case "center":return t/2;case "bottom":return t;default:return t}}function oe(e){let t=e.tagName.toLowerCase();if(t==="rect"){let o=parseFloat(e.getAttribute("width")??"0"),r=parseFloat(e.getAttribute("height")??"0");return 2*(o+r)}if(t==="circle"){let o=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*o}return e.getTotalLength()}function Fe(e,t,o){return Math.min(o,Math.max(t,e))}function X(e,t,o,r){return o===t?0:Fe((e-t)/(o-t)*r,0,1)}function we(e,t,o,r,i){let u=ye(e.top,e.height,t,r.element)-he(r.viewport,o),a=ye(e.top,e.height,t,i.element)-he(i.viewport,o);return {tStart:u,tEnd:a}}function be(e){let t=/^#([a-f\d])([a-f\d])([a-f\d])$/i.exec(e);if(t)return [parseInt(t[1]+t[1],16),parseInt(t[2]+t[2],16),parseInt(t[3]+t[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 r=/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i.exec(e);return r?[parseInt(r[1]),parseInt(r[2]),parseInt(r[3])]:null}function se(e,t,o){let r=be(e),i=be(t);return !r||!i?e:`rgb(${Math.round(r[0]+(i[0]-r[0])*o)},${Math.round(r[1]+(i[1]-r[1])*o)},${Math.round(r[2]+(i[2]-r[2])*o)})`}function ve(e,t){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,t);}function Pe(e){let t=e.getAttribute("stroke"),o=e.getAttribute("fill");!t||t==="none"?ve("Element has no stroke \u2014 path will not be visible.",e):o&&o!=="none"&&o!=="transparent"&&ve("Element has a fill \u2014 it may obscure the stroke animation.",e);}function Ne(e,t,o){let r=document.createElement("div");r.setAttribute("data-svg-scroll-draw-debug",""),r.style.cssText="position:fixed;pointer-events:none;z-index:9999;font-family:monospace;font-size:11px;top:0;left:0;right:0;bottom:0;";function i(){let u=o==="x"?window.scrollX:window.scrollY,a=e-u,x=t-u,O=o==="x";r.innerHTML=`
+      <div style="position:absolute;${O?`left:${a}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${a}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;${O?`left:${x}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${x}px;left:0;right:0;border-top:2px dashed #ef4444;`}padding:2px 6px;color:#ef4444;background:rgba(0,0,0,.6)">\u25A0 end</div>`;}return document.body.appendChild(r),window.addEventListener("scroll",i,{passive:true}),i(),r}function Ee(e,t,o){let r=(t.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),i=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,u=>{let a=parseFloat(u),x=r[i++]??a;return String(+(a+(x-a)*o).toFixed(4))})}function ie(e,t={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};let o=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:r="path, polyline, line, polygon, rect, circle",speed:i=1,fade:u=false,easing:a="linear",trigger:x={},stagger:O=0,direction:k="forward",once:ae=false,debug:ke=false,axis:b="y",scrollContainer:_,autoReverse:le=false,delay:ue=0,strokeColor:T,strokeWidth:I,waypoints:H,velocityScale:j=false,threshold:Ae=0,rootMargin:$e="0px",repeat:ce=0,repeatDelay:Se=0,morphTo:A,onProgress:De,onStart:Te,onComplete:fe}=t,pe=typeof a=="function"?a:re[a]??re.linear,Ie=ne(x.start??"top bottom"),Ce=ne(x.end??"bottom top"),p=typeof _=="string"?document.querySelector(_):_??null,v=Array.isArray(T)?T[0]:null,g=Array.isArray(T)?T[1]:typeof T=="string"?T:null,y=Array.isArray(I)?I[0]:null,h=Array.isArray(I)?I[1]:typeof I=="number"?I:null,P=Array.from(e.querySelectorAll(r)),w=[],E=[],C=0,L=0,N=false,W=false,$=0,R=false,M=-1,V=-1,S=false,J=0,K=0,Q,U=null,z=new Set,G=-1,me=performance.now();function Y(){return p?b==="x"?p.scrollLeft:p.scrollTop:b==="x"?window.scrollX:window.scrollY}function Le(){return p?b==="x"?p.clientWidth:p.clientHeight:b==="x"?window.innerWidth:window.innerHeight}function de(){let n=e.getBoundingClientRect(),s,l,m;if(p){let F=p.getBoundingClientRect();s=b==="x"?n.left-F.left+p.scrollLeft:n.top-F.top+p.scrollTop,l=b==="x"?n.width:n.height,m=Y();}else s=b==="x"?n.left:n.top,l=b==="x"?n.width:n.height,m=Y();let B=we({top:s,height:l},m,Le(),Ie,Ce);C=B.tStart,L=B.tEnd,ke&&process.env.NODE_ENV!=="production"&&(U?.remove(),U=Ne(C,L,b));}function Me(n,s){P.forEach((l,m)=>{l.style.strokeDashoffset=s==="reverse"?`${w[m]*n}`:`${w[m]*(1-n)}`,u&&(l.style.opacity=s==="reverse"?`${1-n}`:`${n}`),v&&g?l.style.stroke=se(v,g,n):g&&(l.style.stroke=g),y!==null&&h!==null?l.style.strokeWidth=`${y+(h-y)*n}`:h!==null&&(l.style.strokeWidth=`${h}`),A&&l.tagName.toLowerCase()==="path"&&E[m]&&l.setAttribute("d",Ee(E[m],A,n));});}function ge(){P.forEach((n,s)=>{n.style.strokeDasharray=`${w[s]}`,n.style.strokeDashoffset=k==="reverse"?"0":`${w[s]}`,u?n.style.opacity=k==="reverse"?"1":"0":n.style.opacity="",v&&(n.style.stroke=v),y!==null&&(n.style.strokeWidth=`${y}`),A&&n.tagName.toLowerCase()==="path"&&E[s]&&n.setAttribute("d",E[s]);});}if(P.forEach(n=>{Pe(n);let s=oe(n);w.push(s),n.tagName.toLowerCase()==="path"?E.push(n.getAttribute("d")??""):E.push(""),o?(n.style.strokeDasharray=`${s}`,n.style.strokeDashoffset=k==="reverse"?`${s}`:"0",u&&(n.style.opacity="1"),g&&(n.style.stroke=g),h!==null&&(n.style.strokeWidth=`${h}`),A&&n.tagName.toLowerCase()==="path"&&n.setAttribute("d",A)):(n.style.strokeDasharray=`${s}`,n.style.strokeDashoffset=k==="reverse"?"0":`${s}`,u?n.style.opacity=k==="reverse"?"1":"0":n.style.opacity="",v&&(n.style.stroke=v),y!==null&&(n.style.strokeWidth=`${y}`));}),o)return fe?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};de();function Z(){if(!R||S)return;let n=performance.now(),s=Y(),l=i;if(j!==false){let c=n-me,d=c>0?Math.abs(s-(G<0?s:G))/c:0;l=i*Math.max(.2,1+d*(typeof j=="number"?j:1)*.04);}G=s,me=n;let m=le?V===-1||s>=V?"forward":"reverse":k;V=s;let B=L-C,F=true;if(P.forEach((c,d)=>{let D=d*O*B,f=pe(X(s,C+D,L+D,l));ae&&!le&&(M=Math.max(M,f),f=M),J=f,c.style.strokeDashoffset=m==="reverse"?`${w[d]*f}`:`${w[d]*(1-f)}`,u&&(c.style.opacity=m==="reverse"?`${1-f}`:`${f}`),v&&g?c.style.stroke=se(v,g,f):g&&(c.style.stroke=g),y!==null&&h!==null?c.style.strokeWidth=`${y+(h-y)*f}`:h!==null&&(c.style.strokeWidth=`${h}`),A&&c.tagName.toLowerCase()==="path"&&E[d]&&c.setAttribute("d",Ee(E[d],A,f)),d===0&&De?.(f),f<1&&(F=false);}),H){let c=pe(X(s,C,L,l));for(let d in H){let D=parseFloat(d);c>=D&&!z.has(D)&&(z.add(D),H[d]?.());}}!W&&X(s,C,L,l)>0&&(W=true,Te?.()),F&&!N?(N=true,fe?.(),K<(ce==="infinite"?1/0:ce??0)&&(K++,Q=setTimeout(()=>{M=-1,W=false,N=false,z.clear(),ge();},Se))):!F&&!ae&&(N=false),$=requestAnimationFrame(Z);}let ee=new IntersectionObserver(n=>{n.forEach(s=>{R=s.isIntersecting,R&&!S?$=requestAnimationFrame(Z):cancelAnimationFrame($);});},{root:p??null,threshold:Ae,rootMargin:$e}),te;function q(){clearTimeout(te),te=setTimeout(()=>{P.forEach((n,s)=>{w[s]=oe(n),n.style.strokeDasharray=`${w[s]}`;}),de();},150);}return window.addEventListener("resize",q),window.addEventListener("orientationchange",q),ue>0?setTimeout(()=>ee.observe(e),ue):ee.observe(e),{destroy(){cancelAnimationFrame($),clearTimeout(Q),ee.disconnect(),window.removeEventListener("resize",q),window.removeEventListener("orientationchange",q),clearTimeout(te),U?.remove();},replay(){M=-1,V=-1,G=-1,W=false,N=false,K=0,S=false,z.clear(),clearTimeout(Q),ge();},pause(){S=true,cancelAnimationFrame($);},resume(){S&&(S=false,R&&($=requestAnimationFrame(Z)));},seek(n){let s=Math.min(1,Math.max(0,n));J=s,M=s,S=true,cancelAnimationFrame($),Me(s,k);},getProgress(){return J}}}function xe(e){return e.map(t=>typeof t=="string"?document.querySelector(t):t).filter(t=>t!==null)}function ze(e,t={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};let o=xe(e).map(r=>ie(r,t));return {destroy(){o.forEach(r=>r.destroy());},replay(){o.forEach(r=>r.replay());},pause(){o.forEach(r=>r.pause());},resume(){o.forEach(r=>r.resume());},seek(r){o.forEach(i=>i.seek(r));},getProgress(){return o[0]?.getProgress()??0}}}function Ge(e,t={}){if(typeof window>"u")return {destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};let o=xe(e),r=new Array(o.length).fill(null),i=0;function u(a){a>=o.length||(r[a]=ie(o[a],{...t,onComplete:()=>{t.onComplete?.(),u(a+1);}}));}return u(0),{destroy(){r.forEach(a=>a?.destroy()),r.fill(null);},replay(){r.forEach(a=>a?.destroy()),r.fill(null),i=0,u(0);},pause(){r[i]?.pause();},resume(){r[i]?.resume();},seek(a){r[i]?.seek(a);},getProgress(){return r[i]?.getProgress()??0}}}exports.scrollDrawGroup=ze;exports.scrollDrawSequence=Ge;