svg-scroll-draw 0.6.2 → 1.0.0

package/dist/react/index.cjs

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

package/dist/react/index.d.mts

@@ -33,7 +33,11 @@ interface ScrollDrawOptions {
     /**
      * Reveal the container using CSS clip-path instead of stroke-dashoffset.
      * Works on any content — SVG, images, text, divs.
-     * `true` defaults to `'left'`. Values: `'left' | 'right' | 'top' | 'bottom' | 'center'`.
+     *
+     * Pass a direction string to control which edge the reveal starts from,
+     * or `true` as shorthand for `'left'`.
+     *
+     * Values: `'left' | 'right' | 'top' | 'bottom' | 'center'`
      */
     clip?: boolean | 'left' | 'right' | 'top' | 'bottom' | 'center';
     /** Fire callbacks at specific progress thresholds (0–1). Resets on replay(). */
@@ -48,7 +52,13 @@ interface ScrollDrawOptions {
     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. */
+    /**
+     * Target path `d` attribute to morph toward as the animation progresses.
+     * Paths must have compatible command structures (same number of numeric tokens).
+     *
+     * Only applies to `<path>` elements — silently no-ops on `<rect>`, `<circle>`,
+     * `<line>`, and other SVG shape elements.
+     */
     morphTo?: string;
     onProgress?: (alpha: number) => void;
     onStart?: () => void;

package/dist/react/index.d.ts

@@ -33,7 +33,11 @@ interface ScrollDrawOptions {
     /**
      * Reveal the container using CSS clip-path instead of stroke-dashoffset.
      * Works on any content — SVG, images, text, divs.
-     * `true` defaults to `'left'`. Values: `'left' | 'right' | 'top' | 'bottom' | 'center'`.
+     *
+     * Pass a direction string to control which edge the reveal starts from,
+     * or `true` as shorthand for `'left'`.
+     *
+     * Values: `'left' | 'right' | 'top' | 'bottom' | 'center'`
      */
     clip?: boolean | 'left' | 'right' | 'top' | 'bottom' | 'center';
     /** Fire callbacks at specific progress thresholds (0–1). Resets on replay(). */
@@ -48,7 +52,13 @@ interface ScrollDrawOptions {
     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. */
+    /**
+     * Target path `d` attribute to morph toward as the animation progresses.
+     * Paths must have compatible command structures (same number of numeric tokens).
+     *
+     * Only applies to `<path>` elements — silently no-ops on `<rect>`, `<circle>`,
+     * `<line>`, and other SVG shape elements.
+     */
     morphTo?: string;
     onProgress?: (alpha: number) => void;
     onStart?: () => void;

package/dist/react/index.mjs

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

package/dist/solid/index.cjs

@@ -1,3 +1,3 @@
-'use strict';var solidJs=require('solid-js');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",o="bottom"]=r.split(/\s+/).filter(Boolean);return {element:n,viewport:o}}function Te(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 ke(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 Ve(e,r,n){return Math.min(n,Math.max(r,e))}function z(e,r,n,o){return n===r?0:Ve((e-r)/(n-r)*o,0,1)}function Me(e,r,n,o,a){let f=Te(e.top,e.height,r,o.element)-ke(o.viewport,n),p=Te(e.top,e.height,r,a.element)-ke(a.viewport,n);return {tStart:f,tEnd:p}}function Se(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=Se(e),a=Se(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 De(e,r){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,r);}function ze(e){let r=e.getAttribute("stroke"),n=e.getAttribute("fill");!r||r==="none"?De("Element has no stroke \u2014 path will not be visible.",e):n&&n!=="none"&&n!=="transparent"&&De("Element has a fill \u2014 it may obscure the stroke animation.",e);}function Ge(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=`
+'use strict';var solidJs=require('solid-js');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",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 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"),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 Ve(e,r,n){return Math.min(n,Math.max(r,e))}function z(e,r,n,o){return n===r?0:Ve((e-r)/(n-r)*o,0,1)}function Me(e,r,n,o,a){let f=Ae(e.top,e.height,r,o.element)-Se(o.viewport,n),p=Ae(e.top,e.height,r,a.element)-Se(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 Le(e,r){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,r);}function ze(e){let r=e.getAttribute("stroke"),n=e.getAttribute("fill");!r||r==="none"?Le("Element has no stroke \u2014 path will not be visible.",e):n&&n!=="none"&&n!=="transparent"&&Le("Element has a fill \u2014 it may obscure the stroke animation.",e);}function Ge(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,D=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 Le(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 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:a=1,fade:f=false,easing:p="linear",trigger:L={},stagger:B=0,direction:I="forward",once:X=false,debug:Ce=false,axis:x="y",scrollContainer:ne,autoReverse:se=false,delay:be=0,strokeColor:P,strokeWidth:N,fillOpacity:R,waypoints:oe,velocityScale:ie=false,threshold:Fe=0,rootMargin:Pe="0px",repeat:_=0,repeatDelay:we=0,morphTo:O,clip:le,onProgress:ve,onStart:xe,onComplete:j}=r,H=le===true?"left":typeof le=="string"?le:false,ae=typeof p=="function"?p:me[p]??me.linear,Ne=de(L.start??"top bottom"),Re=de(L.end??"bottom top"),d=typeof ne=="string"?document.querySelector(ne):ne??null,A=Array.isArray(P)?P[0]:null,y=Array.isArray(P)?P[1]:typeof P=="string"?P: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,C=false,M=0,J=false,v=-1,K=-1,F=false,Q=0,q=0,U,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 He(){return d?x==="x"?d.clientWidth:d.clientHeight:x==="x"?window.innerWidth:window.innerHeight}function $e(){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=ce();}else s=x==="x"?t.left:t.top,l=x==="x"?t.width:t.height,m=ce();let re=Me({top:s,height:l},m,He(),Ne,Re);k=re.tStart,S=re.tEnd,Ce&&process.env.NODE_ENV!=="production"&&(ue?.remove(),ue=Ge(k,S,x));}function We(t,s){if(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}`),O&&l.tagName.toLowerCase()==="path"&&T[m]&&l.setAttribute("d",Le(T[m],O,t));});}function Ae(){if(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}`),O&&t.tagName.toLowerCase()==="path"&&T[s]&&t.setAttribute("d",T[s]);});}if(G.forEach(t=>{ze(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}`),O&&t.tagName.toLowerCase()==="path"&&t.setAttribute("d",O)):(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};$e();function ee(){if(!J||F)return;let t=performance.now(),s=ce(),l=a;if(ie!==false){let i=t-Ee,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,Ee=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;let u=m==="reverse"?1-i:i;e.style.clipPath=W(u),ve?.(i),!C&&z(s,k,S,l)>0&&(C=true,xe?.()),i>=1&&!$?($=true,j?.(),q<(_==="infinite"?1/0:_??0)&&(q++,U=setTimeout(()=>{v=-1,C=false,$=false,e.style.clipPath=W(0);},we))):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}`),O&&i.tagName.toLowerCase()==="path"&&T[u]&&i.setAttribute("d",Le(T[u],O,c)),u===0&&ve?.(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]?.());}}!C&&z(s,k,S,l)>0&&(C=true,xe?.()),V&&!$?($=true,j?.(),q<(_==="infinite"?1/0:_??0)&&(q++,U=setTimeout(()=>{v=-1,C=false,$=false,Y.clear(),Ae();},we))):!V&&!X&&($=false),M=requestAnimationFrame(ee);}let fe=new IntersectionObserver(t=>{t.forEach(s=>{J=s.isIntersecting,J&&!F?M=requestAnimationFrame(ee):cancelAnimationFrame(M);});},{root:d??null,threshold:Fe,rootMargin:Pe}),pe;function te(){clearTimeout(pe),pe=setTimeout(()=>{G.forEach((t,s)=>{E[s]=ye(t),t.style.strokeDasharray=`${E[s]}`;}),$e();},150);}return window.addEventListener("resize",te),window.addEventListener("orientationchange",te),be>0?setTimeout(()=>fe.observe(e),be):fe.observe(e),{destroy(){cancelAnimationFrame(M),clearTimeout(U),fe.disconnect(),window.removeEventListener("resize",te),window.removeEventListener("orientationchange",te),clearTimeout(pe),ue?.remove();},replay(){v=-1,K=-1,Z=-1,C=false,$=false,q=0,F=false,Y.clear(),clearTimeout(U),Ae();},pause(){F=true,cancelAnimationFrame(M);},resume(){F&&(F=false,J&&(M=requestAnimationFrame(ee)));},seek(t){let s=Math.min(1,Math.max(0,t));Q=s,v=s,F=true,cancelAnimationFrame(M),We(s,I);},getProgress(){return Q}}}function Je(e={}){let r,n;return solidJs.onMount(()=>{r&&(n=he(r,e));}),solidJs.onCleanup(()=>{n?.destroy();}),o=>{r=o;}}function Ke(e={}){let r,n;return solidJs.onMount(()=>{r&&(n=he(r,e));}),solidJs.onCleanup(()=>{n?.destroy(),n=void 0;}),{ref:o=>{r=o;},getInstance:()=>n}}exports.createScrollDraw=Ke;exports.useScrollDraw=Je;
+      <div style="position:absolute;${B?`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",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),D=o[a++]??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:a=1,fade:f=false,easing:p="linear",trigger:D={},stagger:B=0,direction:I="forward",once:X=false,debug:Oe=false,axis:x="y",scrollContainer:ne,autoReverse:se=false,delay:be=0,strokeColor:F,strokeWidth:H,fillOpacity:N,waypoints:oe,velocityScale:ie=false,threshold:Ce=0,rootMargin:Fe="0px",repeat:_=0,repeatDelay:we=0,morphTo:P,clip:le,onProgress:ve,onStart:xe,onComplete:j}=r,R=le===true?"left":typeof le=="string"?le:false,ae=typeof p=="function"?p:me[p]??me.linear,He=de(D.start??"top bottom"),Ne=de(D.end??"bottom top"),d=typeof ne=="string"?document.querySelector(ne):ne??null,T=Array.isArray(F)?F[0]:null,y=Array.isArray(F)?F[1]:typeof F=="string"?F:null,g=Array.isArray(H)?H[0]:null,h=Array.isArray(H)?H[1]:typeof H=="number"?H:null,b=Array.isArray(N)?N[0]:null,w=Array.isArray(N)?N[1]:typeof N=="number"?N: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)),E=[],A=[],S=0,k=0,$=false,O=false,M=0,J=false,v=-1,K=-1,C=false,Q=0,q=0,U,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 Re(){return d?x==="x"?d.clientWidth:d.clientHeight:x==="x"?window.innerWidth:window.innerHeight}function $e(){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=ce();}else s=x==="x"?t.left:t.top,l=x==="x"?t.width:t.height,m=ce();let re=Me({top:s,height:l},m,Re(),He,Ne);S=re.tStart,k=re.tEnd,Oe&&process.env.NODE_ENV!=="production"&&(ue?.remove(),ue=Ge(S,k,x));}function We(t,s){if(e.style.setProperty("--scroll-draw-progress",String(t)),R){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}`),T&&y?l.style.stroke=ge(T,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"&&A[m]&&l.setAttribute("d",De(A[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=`${E[s]}`,t.style.strokeDashoffset=I==="reverse"?"0":`${E[s]}`,f?t.style.opacity=I==="reverse"?"1":"0":t.style.opacity="",T&&(t.style.stroke=T),g!==null&&(t.style.strokeWidth=`${g}`),b!==null&&(t.style.fillOpacity=`${b}`),P&&t.tagName.toLowerCase()==="path"&&A[s]&&t.setAttribute("d",A[s]);});}if(G.forEach(t=>{ze(t);let s=ye(t);E.push(s),t.tagName.toLowerCase()==="path"?A.push(t.getAttribute("d")??""):A.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="",T&&(t.style.stroke=T),g!==null&&(t.style.strokeWidth=`${g}`),b!==null&&(t.style.fillOpacity=`${b}`));}),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};$e();function ee(){if(!J||C)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 m=se?K===-1||s>=K?"forward":"reverse":I;K=s;let re=k-S,V=true;if(R){let i=ae(z(s,S,k,l));X&&!se&&(v=Math.max(v,i),i=v),Q=i,e.style.setProperty("--scroll-draw-progress",String(i));let c=m==="reverse"?1-i:i;e.style.clipPath=W(c),ve?.(i),!O&&z(s,S,k,l)>0&&(O=true,xe?.()),i>=1&&!$?($=true,j?.(),q<(_==="infinite"?1/0:_??0)&&(q++,U=setTimeout(()=>{v=-1,O=false,$=false,e.style.clipPath=W(0);},we))):i<1&&!X&&($=false),M=requestAnimationFrame(ee);return}if(G.forEach((i,c)=>{let L=c*B*re,u=ae(z(s,S+L,k+L,l));X&&!se&&(v=Math.max(v,u),u=v),Q=u,i.style.strokeDashoffset=m==="reverse"?`${E[c]*u}`:`${E[c]*(1-u)}`,f&&(i.style.opacity=m==="reverse"?`${1-u}`:`${u}`),T&&y?i.style.stroke=ge(T,y,u):y&&(i.style.stroke=y),g!==null&&h!==null?i.style.strokeWidth=`${g+(h-g)*u}`:h!==null&&(i.style.strokeWidth=`${h}`),b!==null&&w!==null?i.style.fillOpacity=`${b+(w-b)*u}`:w!==null&&(i.style.fillOpacity=`${w}`),P&&i.tagName.toLowerCase()==="path"&&A[c]&&i.setAttribute("d",De(A[c],P,u)),c===0&&(ve?.(u),e.style.setProperty("--scroll-draw-progress",String(u))),u<1&&(V=false);}),oe){let i=ae(z(s,S,k,l));for(let c in oe){let L=parseFloat(c);i>=L&&!Y.has(L)&&(Y.add(L),oe[c]?.());}}!O&&z(s,S,k,l)>0&&(O=true,xe?.()),V&&!$?($=true,j?.(),q<(_==="infinite"?1/0:_??0)&&(q++,U=setTimeout(()=>{v=-1,O=false,$=false,Y.clear(),Te();},we))):!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:Ce,rootMargin:Fe}),pe;function te(){clearTimeout(pe),pe=setTimeout(()=>{G.forEach((t,s)=>{E[s]=ye(t),t.style.strokeDasharray=`${E[s]}`;}),$e();},150);}return window.addEventListener("resize",te),window.addEventListener("orientationchange",te),be>0?setTimeout(()=>fe.observe(e),be):fe.observe(e),{destroy(){cancelAnimationFrame(M),clearTimeout(U),fe.disconnect(),window.removeEventListener("resize",te),window.removeEventListener("orientationchange",te),clearTimeout(pe),ue?.remove();},replay(){v=-1,K=-1,Z=-1,O=false,$=false,q=0,C=false,Y.clear(),clearTimeout(U),Te();},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),We(s,I);},getProgress(){return Q}}}function Je(e={}){let r,n;return solidJs.onMount(()=>{r&&(n=he(r,e));}),solidJs.onCleanup(()=>{n?.destroy();}),o=>{r=o;}}function Ke(e={}){let r,n;return solidJs.onMount(()=>{r&&(n=he(r,e));}),solidJs.onCleanup(()=>{n?.destroy(),n=void 0;}),{ref:o=>{r=o;},getInstance:()=>n}}exports.createScrollDraw=Ke;exports.useScrollDraw=Je;

package/dist/solid/index.d.mts

@@ -30,7 +30,11 @@ interface ScrollDrawOptions {
     /**
      * Reveal the container using CSS clip-path instead of stroke-dashoffset.
      * Works on any content — SVG, images, text, divs.
-     * `true` defaults to `'left'`. Values: `'left' | 'right' | 'top' | 'bottom' | 'center'`.
+     *
+     * Pass a direction string to control which edge the reveal starts from,
+     * or `true` as shorthand for `'left'`.
+     *
+     * Values: `'left' | 'right' | 'top' | 'bottom' | 'center'`
      */
     clip?: boolean | 'left' | 'right' | 'top' | 'bottom' | 'center';
     /** Fire callbacks at specific progress thresholds (0–1). Resets on replay(). */
@@ -45,7 +49,13 @@ interface ScrollDrawOptions {
     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. */
+    /**
+     * Target path `d` attribute to morph toward as the animation progresses.
+     * Paths must have compatible command structures (same number of numeric tokens).
+     *
+     * Only applies to `<path>` elements — silently no-ops on `<rect>`, `<circle>`,
+     * `<line>`, and other SVG shape elements.
+     */
     morphTo?: string;
     onProgress?: (alpha: number) => void;
     onStart?: () => void;

package/dist/solid/index.d.ts

@@ -30,7 +30,11 @@ interface ScrollDrawOptions {
     /**
      * Reveal the container using CSS clip-path instead of stroke-dashoffset.
      * Works on any content — SVG, images, text, divs.
-     * `true` defaults to `'left'`. Values: `'left' | 'right' | 'top' | 'bottom' | 'center'`.
+     *
+     * Pass a direction string to control which edge the reveal starts from,
+     * or `true` as shorthand for `'left'`.
+     *
+     * Values: `'left' | 'right' | 'top' | 'bottom' | 'center'`
      */
     clip?: boolean | 'left' | 'right' | 'top' | 'bottom' | 'center';
     /** Fire callbacks at specific progress thresholds (0–1). Resets on replay(). */
@@ -45,7 +49,13 @@ interface ScrollDrawOptions {
     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. */
+    /**
+     * Target path `d` attribute to morph toward as the animation progresses.
+     * Paths must have compatible command structures (same number of numeric tokens).
+     *
+     * Only applies to `<path>` elements — silently no-ops on `<rect>`, `<circle>`,
+     * `<line>`, and other SVG shape elements.
+     */
     morphTo?: string;
     onProgress?: (alpha: number) => void;
     onStart?: () => void;

package/dist/solid/index.mjs

@@ -1,3 +1,3 @@
-import {onMount,onCleanup}from'solid-js';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",o="bottom"]=r.split(/\s+/).filter(Boolean);return {element:n,viewport:o}}function Te(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 ke(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 Ve(e,r,n){return Math.min(n,Math.max(r,e))}function z(e,r,n,o){return n===r?0:Ve((e-r)/(n-r)*o,0,1)}function Me(e,r,n,o,a){let f=Te(e.top,e.height,r,o.element)-ke(o.viewport,n),p=Te(e.top,e.height,r,a.element)-ke(a.viewport,n);return {tStart:f,tEnd:p}}function Se(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=Se(e),a=Se(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 De(e,r){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,r);}function ze(e){let r=e.getAttribute("stroke"),n=e.getAttribute("fill");!r||r==="none"?De("Element has no stroke \u2014 path will not be visible.",e):n&&n!=="none"&&n!=="transparent"&&De("Element has a fill \u2014 it may obscure the stroke animation.",e);}function Ge(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=`
+import {onMount,onCleanup}from'solid-js';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",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 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"),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 Ve(e,r,n){return Math.min(n,Math.max(r,e))}function z(e,r,n,o){return n===r?0:Ve((e-r)/(n-r)*o,0,1)}function Me(e,r,n,o,a){let f=Ae(e.top,e.height,r,o.element)-Se(o.viewport,n),p=Ae(e.top,e.height,r,a.element)-Se(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 Le(e,r){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,r);}function ze(e){let r=e.getAttribute("stroke"),n=e.getAttribute("fill");!r||r==="none"?Le("Element has no stroke \u2014 path will not be visible.",e):n&&n!=="none"&&n!=="transparent"&&Le("Element has a fill \u2014 it may obscure the stroke animation.",e);}function Ge(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,D=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 Le(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 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:a=1,fade:f=false,easing:p="linear",trigger:L={},stagger:B=0,direction:I="forward",once:X=false,debug:Ce=false,axis:x="y",scrollContainer:ne,autoReverse:se=false,delay:be=0,strokeColor:P,strokeWidth:N,fillOpacity:R,waypoints:oe,velocityScale:ie=false,threshold:Fe=0,rootMargin:Pe="0px",repeat:_=0,repeatDelay:we=0,morphTo:O,clip:le,onProgress:ve,onStart:xe,onComplete:j}=r,H=le===true?"left":typeof le=="string"?le:false,ae=typeof p=="function"?p:me[p]??me.linear,Ne=de(L.start??"top bottom"),Re=de(L.end??"bottom top"),d=typeof ne=="string"?document.querySelector(ne):ne??null,A=Array.isArray(P)?P[0]:null,y=Array.isArray(P)?P[1]:typeof P=="string"?P: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,C=false,M=0,J=false,v=-1,K=-1,F=false,Q=0,q=0,U,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 He(){return d?x==="x"?d.clientWidth:d.clientHeight:x==="x"?window.innerWidth:window.innerHeight}function $e(){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=ce();}else s=x==="x"?t.left:t.top,l=x==="x"?t.width:t.height,m=ce();let re=Me({top:s,height:l},m,He(),Ne,Re);k=re.tStart,S=re.tEnd,Ce&&process.env.NODE_ENV!=="production"&&(ue?.remove(),ue=Ge(k,S,x));}function We(t,s){if(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}`),O&&l.tagName.toLowerCase()==="path"&&T[m]&&l.setAttribute("d",Le(T[m],O,t));});}function Ae(){if(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}`),O&&t.tagName.toLowerCase()==="path"&&T[s]&&t.setAttribute("d",T[s]);});}if(G.forEach(t=>{ze(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}`),O&&t.tagName.toLowerCase()==="path"&&t.setAttribute("d",O)):(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};$e();function ee(){if(!J||F)return;let t=performance.now(),s=ce(),l=a;if(ie!==false){let i=t-Ee,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,Ee=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;let u=m==="reverse"?1-i:i;e.style.clipPath=W(u),ve?.(i),!C&&z(s,k,S,l)>0&&(C=true,xe?.()),i>=1&&!$?($=true,j?.(),q<(_==="infinite"?1/0:_??0)&&(q++,U=setTimeout(()=>{v=-1,C=false,$=false,e.style.clipPath=W(0);},we))):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}`),O&&i.tagName.toLowerCase()==="path"&&T[u]&&i.setAttribute("d",Le(T[u],O,c)),u===0&&ve?.(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]?.());}}!C&&z(s,k,S,l)>0&&(C=true,xe?.()),V&&!$?($=true,j?.(),q<(_==="infinite"?1/0:_??0)&&(q++,U=setTimeout(()=>{v=-1,C=false,$=false,Y.clear(),Ae();},we))):!V&&!X&&($=false),M=requestAnimationFrame(ee);}let fe=new IntersectionObserver(t=>{t.forEach(s=>{J=s.isIntersecting,J&&!F?M=requestAnimationFrame(ee):cancelAnimationFrame(M);});},{root:d??null,threshold:Fe,rootMargin:Pe}),pe;function te(){clearTimeout(pe),pe=setTimeout(()=>{G.forEach((t,s)=>{E[s]=ye(t),t.style.strokeDasharray=`${E[s]}`;}),$e();},150);}return window.addEventListener("resize",te),window.addEventListener("orientationchange",te),be>0?setTimeout(()=>fe.observe(e),be):fe.observe(e),{destroy(){cancelAnimationFrame(M),clearTimeout(U),fe.disconnect(),window.removeEventListener("resize",te),window.removeEventListener("orientationchange",te),clearTimeout(pe),ue?.remove();},replay(){v=-1,K=-1,Z=-1,C=false,$=false,q=0,F=false,Y.clear(),clearTimeout(U),Ae();},pause(){F=true,cancelAnimationFrame(M);},resume(){F&&(F=false,J&&(M=requestAnimationFrame(ee)));},seek(t){let s=Math.min(1,Math.max(0,t));Q=s,v=s,F=true,cancelAnimationFrame(M),We(s,I);},getProgress(){return Q}}}function Je(e={}){let r,n;return onMount(()=>{r&&(n=he(r,e));}),onCleanup(()=>{n?.destroy();}),o=>{r=o;}}function Ke(e={}){let r,n;return onMount(()=>{r&&(n=he(r,e));}),onCleanup(()=>{n?.destroy(),n=void 0;}),{ref:o=>{r=o;},getInstance:()=>n}}export{Ke as createScrollDraw,Je as useScrollDraw};
+      <div style="position:absolute;${B?`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",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),D=o[a++]??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:a=1,fade:f=false,easing:p="linear",trigger:D={},stagger:B=0,direction:I="forward",once:X=false,debug:Oe=false,axis:x="y",scrollContainer:ne,autoReverse:se=false,delay:be=0,strokeColor:F,strokeWidth:H,fillOpacity:N,waypoints:oe,velocityScale:ie=false,threshold:Ce=0,rootMargin:Fe="0px",repeat:_=0,repeatDelay:we=0,morphTo:P,clip:le,onProgress:ve,onStart:xe,onComplete:j}=r,R=le===true?"left":typeof le=="string"?le:false,ae=typeof p=="function"?p:me[p]??me.linear,He=de(D.start??"top bottom"),Ne=de(D.end??"bottom top"),d=typeof ne=="string"?document.querySelector(ne):ne??null,T=Array.isArray(F)?F[0]:null,y=Array.isArray(F)?F[1]:typeof F=="string"?F:null,g=Array.isArray(H)?H[0]:null,h=Array.isArray(H)?H[1]:typeof H=="number"?H:null,b=Array.isArray(N)?N[0]:null,w=Array.isArray(N)?N[1]:typeof N=="number"?N: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)),E=[],A=[],S=0,k=0,$=false,O=false,M=0,J=false,v=-1,K=-1,C=false,Q=0,q=0,U,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 Re(){return d?x==="x"?d.clientWidth:d.clientHeight:x==="x"?window.innerWidth:window.innerHeight}function $e(){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=ce();}else s=x==="x"?t.left:t.top,l=x==="x"?t.width:t.height,m=ce();let re=Me({top:s,height:l},m,Re(),He,Ne);S=re.tStart,k=re.tEnd,Oe&&process.env.NODE_ENV!=="production"&&(ue?.remove(),ue=Ge(S,k,x));}function We(t,s){if(e.style.setProperty("--scroll-draw-progress",String(t)),R){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}`),T&&y?l.style.stroke=ge(T,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"&&A[m]&&l.setAttribute("d",De(A[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=`${E[s]}`,t.style.strokeDashoffset=I==="reverse"?"0":`${E[s]}`,f?t.style.opacity=I==="reverse"?"1":"0":t.style.opacity="",T&&(t.style.stroke=T),g!==null&&(t.style.strokeWidth=`${g}`),b!==null&&(t.style.fillOpacity=`${b}`),P&&t.tagName.toLowerCase()==="path"&&A[s]&&t.setAttribute("d",A[s]);});}if(G.forEach(t=>{ze(t);let s=ye(t);E.push(s),t.tagName.toLowerCase()==="path"?A.push(t.getAttribute("d")??""):A.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="",T&&(t.style.stroke=T),g!==null&&(t.style.strokeWidth=`${g}`),b!==null&&(t.style.fillOpacity=`${b}`));}),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};$e();function ee(){if(!J||C)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 m=se?K===-1||s>=K?"forward":"reverse":I;K=s;let re=k-S,V=true;if(R){let i=ae(z(s,S,k,l));X&&!se&&(v=Math.max(v,i),i=v),Q=i,e.style.setProperty("--scroll-draw-progress",String(i));let c=m==="reverse"?1-i:i;e.style.clipPath=W(c),ve?.(i),!O&&z(s,S,k,l)>0&&(O=true,xe?.()),i>=1&&!$?($=true,j?.(),q<(_==="infinite"?1/0:_??0)&&(q++,U=setTimeout(()=>{v=-1,O=false,$=false,e.style.clipPath=W(0);},we))):i<1&&!X&&($=false),M=requestAnimationFrame(ee);return}if(G.forEach((i,c)=>{let L=c*B*re,u=ae(z(s,S+L,k+L,l));X&&!se&&(v=Math.max(v,u),u=v),Q=u,i.style.strokeDashoffset=m==="reverse"?`${E[c]*u}`:`${E[c]*(1-u)}`,f&&(i.style.opacity=m==="reverse"?`${1-u}`:`${u}`),T&&y?i.style.stroke=ge(T,y,u):y&&(i.style.stroke=y),g!==null&&h!==null?i.style.strokeWidth=`${g+(h-g)*u}`:h!==null&&(i.style.strokeWidth=`${h}`),b!==null&&w!==null?i.style.fillOpacity=`${b+(w-b)*u}`:w!==null&&(i.style.fillOpacity=`${w}`),P&&i.tagName.toLowerCase()==="path"&&A[c]&&i.setAttribute("d",De(A[c],P,u)),c===0&&(ve?.(u),e.style.setProperty("--scroll-draw-progress",String(u))),u<1&&(V=false);}),oe){let i=ae(z(s,S,k,l));for(let c in oe){let L=parseFloat(c);i>=L&&!Y.has(L)&&(Y.add(L),oe[c]?.());}}!O&&z(s,S,k,l)>0&&(O=true,xe?.()),V&&!$?($=true,j?.(),q<(_==="infinite"?1/0:_??0)&&(q++,U=setTimeout(()=>{v=-1,O=false,$=false,Y.clear(),Te();},we))):!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:Ce,rootMargin:Fe}),pe;function te(){clearTimeout(pe),pe=setTimeout(()=>{G.forEach((t,s)=>{E[s]=ye(t),t.style.strokeDasharray=`${E[s]}`;}),$e();},150);}return window.addEventListener("resize",te),window.addEventListener("orientationchange",te),be>0?setTimeout(()=>fe.observe(e),be):fe.observe(e),{destroy(){cancelAnimationFrame(M),clearTimeout(U),fe.disconnect(),window.removeEventListener("resize",te),window.removeEventListener("orientationchange",te),clearTimeout(pe),ue?.remove();},replay(){v=-1,K=-1,Z=-1,O=false,$=false,q=0,C=false,Y.clear(),clearTimeout(U),Te();},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),We(s,I);},getProgress(){return Q}}}function Je(e={}){let r,n;return onMount(()=>{r&&(n=he(r,e));}),onCleanup(()=>{n?.destroy();}),o=>{r=o;}}function Ke(e={}){let r,n;return onMount(()=>{r&&(n=he(r,e));}),onCleanup(()=>{n?.destroy(),n=void 0;}),{ref:o=>{r=o;},getInstance:()=>n}}export{Ke as createScrollDraw,Je as useScrollDraw};

package/dist/svelte/index.cjs

@@ -1,3 +1,3 @@
-'use strict';var de={linear:e=>e,"ease-in":e=>e*e,"ease-out":e=>e*(2-e),"ease-in-out":e=>e<.5?2*e*e:-1+(4-2*e)*e,spring:e=>1-Math.cos(e*Math.PI*2.5)*Math.pow(1-e,2.2)};function ye(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 Te(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 ke(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 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 H(e,r,n,o){return n===r?0:We((e-r)/(n-r)*o,0,1)}function De(e,r,n,o,a){let f=Te(e.top,e.height,r,o.element)-ke(o.viewport,n),p=Te(e.top,e.height,r,a.element)-ke(a.viewport,n);return {tStart:f,tEnd:p}}function Se(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 he(e,r,n){let o=Se(e),a=Se(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=`
+'use strict';var de={linear:e=>e,"ease-in":e=>e*e,"ease-out":e=>e*(2-e),"ease-in-out":e=>e<.5?2*e*e:-1+(4-2*e)*e,spring:e=>1-Math.cos(e*Math.PI*2.5)*Math.pow(1-e,2.2)};function ye(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 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 ge(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 Re(e,r,n){return Math.min(n,Math.max(r,e))}function z(e,r,n,o){return n===r?0:Re((e-r)/(n-r)*o,0,1)}function Me(e,r,n,o,a){let f=Ae(e.top,e.height,r,o.element)-Se(o.viewport,n),p=Ae(e.top,e.height,r,a.element)-Se(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 he(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 De(e,r){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,r);}function We(e){let r=e.getAttribute("stroke"),n=e.getAttribute("fill");!r||r==="none"?De("Element has no stroke \u2014 path will not be visible.",e):n&&n!=="none"&&n!=="transparent"&&De("Element has a fill \u2014 it may obscure the stroke animation.",e);}function Ve(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 Le(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 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: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:se,autoReverse:oe=false,delay:be=0,strokeColor:C,strokeWidth:N,fillOpacity:R,waypoints:ie,velocityScale:le=false,threshold:Oe=0,rootMargin:Fe="0px",repeat:_=0,repeatDelay:we=0,morphTo:O,clip:ae,onProgress:ve,onStart:xe,onComplete:j}=r,W=ae===true?"left":typeof ae=="string"?ae:false,ce=typeof p=="function"?p:de[p]??de.linear,Pe=ye(L.start??"top bottom"),Ce=ye(L.end??"bottom top"),d=typeof se=="string"?document.querySelector(se):se??null,A=Array.isArray(C)?C[0]:null,y=Array.isArray(C)?C[1]:typeof C=="string"?C: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 V(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 G=W?[]:Array.from(e.querySelectorAll(o)),E=[],T=[],k=0,S=0,$=false,F=false,D=0,J=false,v=-1,K=-1,P=false,Q=0,q=0,U,ue=null,Y=new Set,Z=-1,Ee=performance.now();function fe(){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 $e(){let t=e.getBoundingClientRect(),s,l,m;if(d){let z=d.getBoundingClientRect();s=x==="x"?t.left-z.left+d.scrollLeft:t.top-z.top+d.scrollTop,l=x==="x"?t.width:t.height,m=fe();}else s=x==="x"?t.left:t.top,l=x==="x"?t.width:t.height,m=fe();let re=De({top:s,height:l},m,Ne(),Pe,Ce);k=re.tStart,S=re.tEnd,Ie&&process.env.NODE_ENV!=="production"&&(ue?.remove(),ue=ze(k,S,x));}function Re(t,s){if(W){let l=s==="reverse"?1-t:t;e.style.clipPath=V(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=he(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}`),O&&l.tagName.toLowerCase()==="path"&&T[m]&&l.setAttribute("d",Le(T[m],O,t));});}function Ae(){if(W){e.style.clipPath=V(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}`),O&&t.tagName.toLowerCase()==="path"&&T[s]&&t.setAttribute("d",T[s]);});}if(G.forEach(t=>{Ve(t);let s=ge(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}`),O&&t.tagName.toLowerCase()==="path"&&t.setAttribute("d",O)):(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}`));}),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||P)return;let t=performance.now(),s=fe(),l=a;if(le!==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 le=="number"?le:1)*.04);}Z=s,Ee=t;let m=oe?K===-1||s>=K?"forward":"reverse":I;K=s;let re=S-k,z=true;if(W){let i=ce(H(s,k,S,l));X&&!oe&&(v=Math.max(v,i),i=v),Q=i;let c=m==="reverse"?1-i:i;e.style.clipPath=V(c),ve?.(i),!F&&H(s,k,S,l)>0&&(F=true,xe?.()),i>=1&&!$?($=true,j?.(),q<(_==="infinite"?1/0:_??0)&&(q++,U=setTimeout(()=>{v=-1,F=false,$=false,e.style.clipPath=V(0);},we))):i<1&&!X&&($=false),D=requestAnimationFrame(ee);return}if(G.forEach((i,c)=>{let M=c*B*re,u=ce(H(s,k+M,S+M,l));X&&!oe&&(v=Math.max(v,u),u=v),Q=u,i.style.strokeDashoffset=m==="reverse"?`${E[c]*u}`:`${E[c]*(1-u)}`,f&&(i.style.opacity=m==="reverse"?`${1-u}`:`${u}`),A&&y?i.style.stroke=he(A,y,u):y&&(i.style.stroke=y),g!==null&&h!==null?i.style.strokeWidth=`${g+(h-g)*u}`:h!==null&&(i.style.strokeWidth=`${h}`),b!==null&&w!==null?i.style.fillOpacity=`${b+(w-b)*u}`:w!==null&&(i.style.fillOpacity=`${w}`),O&&i.tagName.toLowerCase()==="path"&&T[c]&&i.setAttribute("d",Le(T[c],O,u)),c===0&&ve?.(u),u<1&&(z=false);}),ie){let i=ce(H(s,k,S,l));for(let c in ie){let M=parseFloat(c);i>=M&&!Y.has(M)&&(Y.add(M),ie[c]?.());}}!F&&H(s,k,S,l)>0&&(F=true,xe?.()),z&&!$?($=true,j?.(),q<(_==="infinite"?1/0:_??0)&&(q++,U=setTimeout(()=>{v=-1,F=false,$=false,Y.clear(),Ae();},we))):!z&&!X&&($=false),D=requestAnimationFrame(ee);}let pe=new IntersectionObserver(t=>{t.forEach(s=>{J=s.isIntersecting,J&&!P?D=requestAnimationFrame(ee):cancelAnimationFrame(D);});},{root:d??null,threshold:Oe,rootMargin:Fe}),me;function te(){clearTimeout(me),me=setTimeout(()=>{G.forEach((t,s)=>{E[s]=ge(t),t.style.strokeDasharray=`${E[s]}`;}),$e();},150);}return window.addEventListener("resize",te),window.addEventListener("orientationchange",te),be>0?setTimeout(()=>pe.observe(e),be):pe.observe(e),{destroy(){cancelAnimationFrame(D),clearTimeout(U),pe.disconnect(),window.removeEventListener("resize",te),window.removeEventListener("orientationchange",te),clearTimeout(me),ue?.remove();},replay(){v=-1,K=-1,Z=-1,F=false,$=false,q=0,P=false,Y.clear(),clearTimeout(U),Ae();},pause(){P=true,cancelAnimationFrame(D);},resume(){P&&(P=false,J&&(D=requestAnimationFrame(ee)));},seek(t){let s=Math.min(1,Math.max(0,t));Q=s,v=s,P=true,cancelAnimationFrame(D),Re(s,I);},getProgress(){return Q}}}function Xe(e,r={}){let n=ne(e,r);return {update(o){n.destroy(),n=ne(e,o);},destroy(){n.destroy();}}}function _e(e={}){let r=null;function n(o){return r=ne(o,e),{destroy(){r?.destroy(),r=null;}}}return {action:n,getInstance:()=>r}}exports.createScrollDraw=_e;exports.scrollDraw=Xe;
+      <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 Le(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 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: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:se,autoReverse:oe=false,delay:be=0,strokeColor:C,strokeWidth:N,fillOpacity:H,waypoints:ie,velocityScale:le=false,threshold:Pe=0,rootMargin:Oe="0px",repeat:_=0,repeatDelay:we=0,morphTo:P,clip:ae,onProgress:ve,onStart:xe,onComplete:j}=r,R=ae===true?"left":typeof ae=="string"?ae:false,ce=typeof p=="function"?p:de[p]??de.linear,Fe=ye(L.start??"top bottom"),Ce=ye(L.end??"bottom top"),d=typeof se=="string"?document.querySelector(se):se??null,T=Array.isArray(C)?C[0]:null,y=Array.isArray(C)?C[1]:typeof C=="string"?C:null,g=Array.isArray(N)?N[0]:null,h=Array.isArray(N)?N[1]:typeof N=="number"?N:null,b=Array.isArray(H)?H[0]:null,w=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)),E=[],A=[],S=0,k=0,$=false,O=false,M=0,J=false,v=-1,K=-1,F=false,Q=0,q=0,U,ue=null,Y=new Set,Z=-1,Ee=performance.now();function fe(){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 $e(){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=fe();}else s=x==="x"?t.left:t.top,l=x==="x"?t.width:t.height,m=fe();let re=Me({top:s,height:l},m,Ne(),Fe,Ce);S=re.tStart,k=re.tEnd,Ie&&process.env.NODE_ENV!=="production"&&(ue?.remove(),ue=Ve(S,k,x));}function He(t,s){if(e.style.setProperty("--scroll-draw-progress",String(t)),R){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}`),T&&y?l.style.stroke=he(T,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"&&A[m]&&l.setAttribute("d",Le(A[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=`${E[s]}`,t.style.strokeDashoffset=I==="reverse"?"0":`${E[s]}`,f?t.style.opacity=I==="reverse"?"1":"0":t.style.opacity="",T&&(t.style.stroke=T),g!==null&&(t.style.strokeWidth=`${g}`),b!==null&&(t.style.fillOpacity=`${b}`),P&&t.tagName.toLowerCase()==="path"&&A[s]&&t.setAttribute("d",A[s]);});}if(G.forEach(t=>{We(t);let s=ge(t);E.push(s),t.tagName.toLowerCase()==="path"?A.push(t.getAttribute("d")??""):A.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="",T&&(t.style.stroke=T),g!==null&&(t.style.strokeWidth=`${g}`),b!==null&&(t.style.fillOpacity=`${b}`));}),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};$e();function ee(){if(!J||F)return;let t=performance.now(),s=fe(),l=a;if(le!==false){let i=t-Ee,u=i>0?Math.abs(s-(Z<0?s:Z))/i:0;l=a*Math.max(.2,1+u*(typeof le=="number"?le:1)*.04);}Z=s,Ee=t;let m=oe?K===-1||s>=K?"forward":"reverse":I;K=s;let re=k-S,V=true;if(R){let i=ce(z(s,S,k,l));X&&!oe&&(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),ve?.(i),!O&&z(s,S,k,l)>0&&(O=true,xe?.()),i>=1&&!$?($=true,j?.(),q<(_==="infinite"?1/0:_??0)&&(q++,U=setTimeout(()=>{v=-1,O=false,$=false,e.style.clipPath=W(0);},we))):i<1&&!X&&($=false),M=requestAnimationFrame(ee);return}if(G.forEach((i,u)=>{let D=u*B*re,c=ce(z(s,S+D,k+D,l));X&&!oe&&(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}`),T&&y?i.style.stroke=he(T,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"&&A[u]&&i.setAttribute("d",Le(A[u],P,c)),u===0&&(ve?.(c),e.style.setProperty("--scroll-draw-progress",String(c))),c<1&&(V=false);}),ie){let i=ce(z(s,S,k,l));for(let u in ie){let D=parseFloat(u);i>=D&&!Y.has(D)&&(Y.add(D),ie[u]?.());}}!O&&z(s,S,k,l)>0&&(O=true,xe?.()),V&&!$?($=true,j?.(),q<(_==="infinite"?1/0:_??0)&&(q++,U=setTimeout(()=>{v=-1,O=false,$=false,Y.clear(),Te();},we))):!V&&!X&&($=false),M=requestAnimationFrame(ee);}let pe=new IntersectionObserver(t=>{t.forEach(s=>{J=s.isIntersecting,J&&!F?M=requestAnimationFrame(ee):cancelAnimationFrame(M);});},{root:d??null,threshold:Pe,rootMargin:Oe}),me;function te(){clearTimeout(me),me=setTimeout(()=>{G.forEach((t,s)=>{E[s]=ge(t),t.style.strokeDasharray=`${E[s]}`;}),$e();},150);}return window.addEventListener("resize",te),window.addEventListener("orientationchange",te),be>0?setTimeout(()=>pe.observe(e),be):pe.observe(e),{destroy(){cancelAnimationFrame(M),clearTimeout(U),pe.disconnect(),window.removeEventListener("resize",te),window.removeEventListener("orientationchange",te),clearTimeout(me),ue?.remove();},replay(){v=-1,K=-1,Z=-1,O=false,$=false,q=0,F=false,Y.clear(),clearTimeout(U),Te();},pause(){F=true,cancelAnimationFrame(M);},resume(){F&&(F=false,J&&(M=requestAnimationFrame(ee)));},seek(t){let s=Math.min(1,Math.max(0,t));Q=s,v=s,F=true,cancelAnimationFrame(M),He(s,I);},getProgress(){return Q}}}function Xe(e,r={}){let n=ne(e,r);return {update(o){n.destroy(),n=ne(e,o);},destroy(){n.destroy();}}}function _e(e={}){let r=null;function n(o){return r=ne(o,e),{destroy(){r?.destroy(),r=null;}}}return {action:n,getInstance:()=>r}}exports.createScrollDraw=_e;exports.scrollDraw=Xe;

package/dist/svelte/index.d.mts

@@ -30,7 +30,11 @@ interface ScrollDrawOptions {
     /**
      * Reveal the container using CSS clip-path instead of stroke-dashoffset.
      * Works on any content — SVG, images, text, divs.
-     * `true` defaults to `'left'`. Values: `'left' | 'right' | 'top' | 'bottom' | 'center'`.
+     *
+     * Pass a direction string to control which edge the reveal starts from,
+     * or `true` as shorthand for `'left'`.
+     *
+     * Values: `'left' | 'right' | 'top' | 'bottom' | 'center'`
      */
     clip?: boolean | 'left' | 'right' | 'top' | 'bottom' | 'center';
     /** Fire callbacks at specific progress thresholds (0–1). Resets on replay(). */
@@ -45,7 +49,13 @@ interface ScrollDrawOptions {
     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. */
+    /**
+     * Target path `d` attribute to morph toward as the animation progresses.
+     * Paths must have compatible command structures (same number of numeric tokens).
+     *
+     * Only applies to `<path>` elements — silently no-ops on `<rect>`, `<circle>`,
+     * `<line>`, and other SVG shape elements.
+     */
     morphTo?: string;
     onProgress?: (alpha: number) => void;
     onStart?: () => void;

package/dist/svelte/index.d.ts

@@ -30,7 +30,11 @@ interface ScrollDrawOptions {
     /**
      * Reveal the container using CSS clip-path instead of stroke-dashoffset.
      * Works on any content — SVG, images, text, divs.
-     * `true` defaults to `'left'`. Values: `'left' | 'right' | 'top' | 'bottom' | 'center'`.
+     *
+     * Pass a direction string to control which edge the reveal starts from,
+     * or `true` as shorthand for `'left'`.
+     *
+     * Values: `'left' | 'right' | 'top' | 'bottom' | 'center'`
      */
     clip?: boolean | 'left' | 'right' | 'top' | 'bottom' | 'center';
     /** Fire callbacks at specific progress thresholds (0–1). Resets on replay(). */
@@ -45,7 +49,13 @@ interface ScrollDrawOptions {
     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. */
+    /**
+     * Target path `d` attribute to morph toward as the animation progresses.
+     * Paths must have compatible command structures (same number of numeric tokens).
+     *
+     * Only applies to `<path>` elements — silently no-ops on `<rect>`, `<circle>`,
+     * `<line>`, and other SVG shape elements.
+     */
     morphTo?: string;
     onProgress?: (alpha: number) => void;
     onStart?: () => void;