svg-scroll-draw 2.9.0 → 2.10.1

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

@@ -1,3 +1,3 @@
-"use strict";var SvgScrollDraw=(()=>{var Ke=Object.defineProperty;var Mt=Object.getOwnPropertyDescriptor;var kt=Object.getOwnPropertyNames;var Pt=Object.prototype.hasOwnProperty;var Ct=(e,r)=>{for(var t in r)Ke(e,t,{get:r[t],enumerable:!0})},Lt=(e,r,t,n)=>{if(r&&typeof r=="object"||typeof r=="function")for(let a of kt(r))!Pt.call(e,a)&&a!==t&&Ke(e,a,{get:()=>r[a],enumerable:!(n=Mt(r,a))||n.enumerable});return e};var It=e=>Lt(Ke({},"__esModule",{value:!0}),e);var Yt={};Ct(Yt,{Cinematic:()=>Ye,PRESETS:()=>Be,createBounce:()=>Qe,createElastic:()=>et,createSpring:()=>mt,scrollAnimate:()=>wt,scrollCounter:()=>Et,scrollDraw:()=>Xt,scrollParallax:()=>vt});function mt({tension:e=2.5,friction:r=2.2}={}){return t=>1-Math.cos(t*Math.PI*e)*Math.pow(1-t,r)}function Qe({bounces:e=3,decay:r=.5}={}){let t=Math.max(1,Math.round(e)),n=Math.max(.01,Math.min(.99,r)),a=Math.sqrt(n),i=0,d=[];for(let p=0;p<t;p++){let x=Math.pow(a,p);d.push(x),i+=x}let m=[0],c=0;for(let p=0;p<t;p++)c+=d[p]/i,m.push(c);return p=>{if(p<=0)return 0;if(p>=1)return 1;for(let x=0;x<t;x++)if(p<=m[x+1]){let F=(p-m[x])/(m[x+1]-m[x]);if(x===0)return F*(2-F);let E=1-Math.pow(n,x);return E+(1-E)*(2*F-1)*(2*F-1)}return 1}}function et({amplitude:e=1,period:r=.4}={}){let t=Math.max(1,e),n=Math.max(.1,r),a=t<=1?n/4:n/(2*Math.PI)*Math.asin(1/t);return i=>i<=0?0:i>=1?1:t*Math.pow(2,-10*i)*Math.sin((i-a)*(2*Math.PI)/n)+1}var te={linear:e=>e,"ease-in":e=>e*e,"ease-out":e=>e*(2-e),"ease-in-out":e=>e<.5?2*e*e:-1+(4-2*e)*e,spring:e=>1-Math.cos(e*Math.PI*2.5)*Math.pow(1-e,2.2),bounce:Qe(),elastic:et()};function be(e="top bottom"){let r=e.trim();if(/^\d+(\.\d+)?%$/.test(r))return{element:"top",viewport:r};let[t="top",n="bottom"]=r.split(/\s+/).filter(Boolean);return{element:t,viewport:n}}function lt(e,r,t,n){switch(n){case"top":return e+t;case"center":return e+t+r/2;case"bottom":return e+t+r;default:return e+t}}function ct(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 Ve(e){let r=e.tagName.toLowerCase();if(r==="rect"){let t=parseFloat(e.getAttribute("width")??"0"),n=parseFloat(e.getAttribute("height")??"0");return 2*(t+n)}if(r==="circle"){let t=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*t}return e.getTotalLength()}function Dt(e,r,t){return Math.min(t,Math.max(r,e))}function re(e,r,t,n){return t===r?0:Dt((e-r)/(t-r)*n,0,1)}function xe(e,r,t,n,a){let i=lt(e.top,e.height,r,n.element)-ct(n.viewport,t),d=lt(e.top,e.height,r,a.element)-ct(a.viewport,t);return{tStart:i,tEnd:d}}function ut(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 t=/^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);if(t)return[parseInt(t[1],16),parseInt(t[2],16),parseInt(t[3],16)];let n=/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i.exec(e);return n?[parseInt(n[1]),parseInt(n[2]),parseInt(n[3])]:null}function Le(e,r,t){let n=ut(e),a=ut(r);return!n||!a?e:`rgb(${Math.round(n[0]+(a[0]-n[0])*t)},${Math.round(n[1]+(a[1]-n[1])*t)},${Math.round(n[2]+(a[2]-n[2])*t)})`}var Be={sketch:{easing:"ease-in",stagger:.1,speed:.9,fade:!1},reveal:{easing:"ease-out",fade:!0,speed:1.2,once:!0},typewriter:{easing:"linear",stagger:.05,speed:1.5},cinematic:{easing:"ease-in-out",fade:!0,speed:.75},spring:{easing:"spring",speed:1.1}};function ft(e,r){process.env.NODE_ENV!=="production"&&console.warn(`[svg-scroll-draw] ${e}`,r)}var pt={linear:"linear","ease-in":"ease-in","ease-out":"ease-out","ease-in-out":"ease-in-out"},Ot=0;function Ft(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}function Nt(e){let r=e.getAttribute("stroke"),t=e.getAttribute("fill");!r||r==="none"?ft("Element has no stroke \u2014 path will not be visible.",e):t&&t!=="none"&&t!=="transparent"&&ft("Element has a fill \u2014 it may obscure the stroke animation.",e)}function Rt(e,r,t){let n=document.createElement("div");n.setAttribute("data-svg-scroll-draw-debug",""),n.style.cssText="position:fixed;pointer-events:none;z-index:9999;font-family:monospace;font-size:11px;top:0;left:0;right:0;bottom:0;";function a(){let i=t==="x"?window.scrollX:window.scrollY,d=e-i,m=r-i,c=t==="x";n.innerHTML=`
-      <div style="position:absolute;${c?`left:${d}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${d}px;left:0;right:0;border-top:2px dashed #22c55e;`}padding:2px 6px;color:#22c55e;background:rgba(0,0,0,.6)">\u25B6 start</div>
-      <div style="position:absolute;${c?`left:${m}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${m}px;left:0;right:0;border-top:2px dashed #ef4444;`}padding:2px 6px;color:#ef4444;background:rgba(0,0,0,.6)">\u25A0 end</div>`}return document.body.appendChild(n),window.addEventListener("scroll",a,{passive:!0}),a(),n}function tt(e,r,t){let n=(r.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),a=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,i=>{let d=parseFloat(i),m=n[a++]??d;return String(+(d+(m-d)*t).toFixed(4))})}function We(e,r={}){if(typeof window>"u")return{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};let{preset:t,...n}=r,a=t?{...Be[t],...n}:n,i=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:d="path, polyline, line, polygon, rect, circle",speed:m=1,fade:c=!1,easing:p="linear",trigger:x={},stagger:F=0,direction:E="forward",once:W=!1,debug:ge=!1,axis:S="y",scrollContainer:M,autoReverse:g=!1,delay:A=0,strokeColor:b,strokeWidth:R,fillOpacity:z,waypoints:T,velocityScale:H=!1,threshold:ye=0,rootMargin:we="0px",repeat:ae=0,repeatDelay:ve=0,morphTo:k,clip:U,autoplay:se=!1,duration:ce=1e3,native:Z=!0,onProgress:y,onStart:N,onComplete:le,onEnter:ue,onLeave:Me,onEnterBack:Ie,onLeaveBack:ke}=a,me=U===!0?"left":typeof U=="string"?U:!1,fe=typeof p=="function"?p:te[p]??te.linear,Ae=be(x.start??"top bottom"),Oe=be(x.end??"bottom top"),_=typeof M=="string"?document.querySelector(M):M??null,ne=Array.isArray(b)?b[0]:null,V=Array.isArray(b)?b[1]:typeof b=="string"?b:null,B=Array.isArray(R)?R[0]:null,s=Array.isArray(R)?R[1]:typeof R=="number"?R:null,f=Array.isArray(z)?z[0]:null,P=Array.isArray(z)?z[1]:typeof z=="number"?z:null;function G(o){let l=o*100;switch(me){case"right":return`inset(0 0 0 ${100-l}%)`;case"top":return`inset(0 0 ${100-l}% 0)`;case"bottom":return`inset(${100-l}% 0 0 0)`;case"center":return`circle(${o*150}% at 50% 50%)`;default:return`inset(0 ${100-l}% 0 0)`}}let $=me?[]:Array.from(e.querySelectorAll(d)),D=[],C=[],Y=0,J=0,j=!1,oe=!1,X=0,Fe=!1,pe=-1,Ne=-1,K=!1,Te=0,he=0,Ee,Ue=null,Se=new Set,Re=-1,st=performance.now(),Pe=NaN;function De(){return _?S==="x"?_.scrollLeft:_.scrollTop:S==="x"?window.scrollX:window.scrollY}function it(){return _?S==="x"?_.clientWidth:_.clientHeight:S==="x"?window.innerWidth:window.innerHeight}function at(){let o=e.getBoundingClientRect(),l,w,q;if(_){let ee=_.getBoundingClientRect();l=S==="x"?o.left-ee.left+_.scrollLeft:o.top-ee.top+_.scrollTop,w=S==="x"?o.width:o.height,q=De()}else l=S==="x"?o.left:o.top,w=S==="x"?o.width:o.height,q=De();let Q=xe({top:l,height:w},q,it(),Ae,Oe);Y=Q.tStart,J=Q.tEnd,ge&&process.env.NODE_ENV!=="production"&&(Ue?.remove(),Ue=Rt(Y,J,S))}function xt(o,l){if(e.style.setProperty("--scroll-draw-progress",String(o)),me){let w=l==="reverse"?1-o:o;e.style.clipPath=G(w);return}$.forEach((w,q)=>{w.style.strokeDashoffset=l==="reverse"?`${D[q]*o}`:`${D[q]*(1-o)}`,c&&(w.style.opacity=l==="reverse"?`${1-o}`:`${o}`),ne&&V?w.style.stroke=Le(ne,V,o):V&&(w.style.stroke=V),B!==null&&s!==null?w.style.strokeWidth=`${B+(s-B)*o}`:s!==null&&(w.style.strokeWidth=`${s}`),f!==null&&P!==null?w.style.fillOpacity=`${f+(P-f)*o}`:P!==null&&(w.style.fillOpacity=`${P}`),k&&w.tagName.toLowerCase()==="path"&&C[q]&&w.setAttribute("d",tt(C[q],k,o))})}function He(){if(e.style.setProperty("--scroll-draw-progress","0"),me){e.style.clipPath=G(0);return}$.forEach((o,l)=>{o.style.strokeDasharray=`${D[l]}`,o.style.strokeDashoffset=E==="reverse"?"0":`${D[l]}`,c?o.style.opacity=E==="reverse"?"1":"0":o.style.opacity="",ne&&(o.style.stroke=ne),B!==null&&(o.style.strokeWidth=`${B}`),f!==null&&(o.style.fillOpacity=`${f}`),k&&o.tagName.toLowerCase()==="path"&&C[l]&&o.setAttribute("d",C[l])})}if($.forEach(o=>{Nt(o);let l=Ve(o);D.push(l),o.tagName.toLowerCase()==="path"?C.push(o.getAttribute("d")??""):C.push(""),i?(o.style.strokeDasharray=`${l}`,o.style.strokeDashoffset=E==="reverse"?`${l}`:"0",c&&(o.style.opacity="1"),V&&(o.style.stroke=V),s!==null&&(o.style.strokeWidth=`${s}`),P!==null&&(o.style.fillOpacity=`${P}`),k&&o.tagName.toLowerCase()==="path"&&o.setAttribute("d",k)):(o.style.strokeDasharray=`${l}`,o.style.strokeDashoffset=E==="reverse"?"0":`${l}`,c?o.style.opacity=E==="reverse"?"1":"0":o.style.opacity="",ne&&(o.style.stroke=ne),B!==null&&(o.style.strokeWidth=`${B}`),f!==null&&(o.style.fillOpacity=`${f}`))}),me){if(i)return e.style.clipPath=G(1),le?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=G(0)}else if(i)return le?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};function At(){return!(Z===!1||!Ft()||!$.length||typeof p!="string"||!(p in pt)||me||S!=="y"||_||m!==1||F!==0||W||g||H!==!1||k||T||ae||A>0||y||N||le||ue||Me||Ie||ke||b!=null||R!=null||z!=null||(x.start??"top bottom").trim()!=="top bottom"||(x.end??"bottom top").trim()!=="bottom top")}function Tt(){let o=`svg-scroll-draw-${++Ot}`,l=E==="reverse"?"0":"var(--ssd-len)",w=E==="reverse"?"var(--ssd-len)":"0",q=`stroke-dashoffset:${l};`,Q=`stroke-dashoffset:${w};`;c&&(q+=`opacity:${E==="reverse"?1:0};`,Q+=`opacity:${E==="reverse"?0:1};`);let ee=document.createElement("style");ee.setAttribute("data-svg-scroll-draw",""),ee.textContent=`@keyframes ${o}{from{${q}}to{${Q}}}.${o}{animation-name:${o};animation-duration:auto;animation-timing-function:${pt[p]};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(ee);function ie(u,v){u.style.setProperty("--ssd-len",String(D[v])),u.style.strokeDasharray=`${D[v]}`,u.style.strokeDashoffset="",u.style.opacity="",u.style.animationPlayState="",u.classList.add(o)}$.forEach(ie);let h=!1,L=-1;function I(){if(L>=0)return L;let u=e.getBoundingClientRect(),{tStart:v,tEnd:O}=xe({top:u.top,height:u.height},De(),it(),Ae,Oe);return fe(re(De(),v,O,m))}return{destroy(){$.forEach(u=>{u.classList.remove(o),u.style.removeProperty("--ssd-len"),u.style.animationPlayState=""}),ee.remove()},replay(){h=!1,L=-1,$.forEach(ie)},pause(){h=!0,$.forEach(u=>{u.style.animationPlayState="paused"})},resume(){h&&(h=!1,$.forEach(u=>{u.style.animationPlayState="running"}))},seek(u){let v=Math.min(1,Math.max(0,u));L=v,h=!0,$.forEach((O,$e)=>{O.classList.remove(o),O.style.strokeDashoffset=E==="reverse"?`${D[$e]*v}`:`${D[$e]*(1-v)}`,c&&(O.style.opacity=E==="reverse"?`${1-v}`:`${v}`)})},getProgress(){return I()}}}if(At())return Tt();function $t(){let o=Math.max(1,ce),l=0,w=0;function q(I){let u=!0;if(me){let v=Math.min(1,Math.max(0,I/o)),O=fe(v);Te=O,e.style.setProperty("--scroll-draw-progress",String(O)),e.style.clipPath=G(E==="reverse"?1-O:O),y?.(O),v<1&&(u=!1)}else $.forEach((v,O)=>{let $e=O*F*o,Ce=Math.min(1,Math.max(0,(I-$e)/o)),de=fe(Ce);v.style.strokeDashoffset=E==="reverse"?`${D[O]*de}`:`${D[O]*(1-de)}`,c&&(v.style.opacity=E==="reverse"?`${1-de}`:`${de}`),ne&&V?v.style.stroke=Le(ne,V,de):V&&(v.style.stroke=V),B!==null&&s!==null?v.style.strokeWidth=`${B+(s-B)*de}`:s!==null&&(v.style.strokeWidth=`${s}`),f!==null&&P!==null?v.style.fillOpacity=`${f+(P-f)*de}`:P!==null&&(v.style.fillOpacity=`${P}`),k&&v.tagName.toLowerCase()==="path"&&C[O]&&v.setAttribute("d",tt(C[O],k,de)),O===0&&(y?.(de),e.style.setProperty("--scroll-draw-progress",String(de))),Ce<1&&(u=!1)});if(T){let v=Math.min(1,Math.max(0,I/o)),O=fe(v);for(let $e in T){let Ce=parseFloat($e);O>=Ce&&!Se.has(Ce)&&(Se.add(Ce),T[$e]?.())}}return u}function Q(I){if(K)return;let u=I-l;oe||(oe=!0,N?.());let v=q(u);if(v&&!j){j=!0,q(o*(1+Math.max(0,$.length-1)*F)),le?.(),he<(ae==="infinite"?1/0:ae??0)&&(he++,Ee=setTimeout(()=>{l=performance.now(),oe=!1,j=!1,Se.clear(),He(),X=requestAnimationFrame(Q)},ve));return}v||(X=requestAnimationFrame(Q))}function ee(){cancelAnimationFrame(X),clearTimeout(Ee),l=performance.now(),w=0,K=!1,oe=!1,j=!1,he=0,Se.clear(),He(),X=requestAnimationFrame(Q)}let ie=new IntersectionObserver(I=>{I.forEach(u=>{u.isIntersecting&&!(W&&j)?ee():!u.isIntersecting&&!W&&!j&&(cancelAnimationFrame(X),clearTimeout(Ee),l=null)})},{root:_??null,threshold:ye,rootMargin:we}),h;function L(){clearTimeout(h),h=setTimeout(()=>{$.forEach((I,u)=>{D[u]=Ve(I),I.style.strokeDasharray=`${D[u]}`})},150)}return window.addEventListener("resize",L),window.addEventListener("orientationchange",L),A>0?setTimeout(()=>ie.observe(e),A):ie.observe(e),{destroy(){cancelAnimationFrame(X),clearTimeout(Ee),ie.disconnect(),window.removeEventListener("resize",L),window.removeEventListener("orientationchange",L),clearTimeout(h)},replay(){he=0,ee()},pause(){K||(K=!0,w=performance.now()-l,cancelAnimationFrame(X))},resume(){K&&(K=!1,l=performance.now()-w,X=requestAnimationFrame(Q))},seek(I){let u=Math.min(1,Math.max(0,I));Te=u,K=!0,w=u*o,l=performance.now()-w,cancelAnimationFrame(X),q(w)},getProgress(){return Te}}}if(se)return $t();at();function qe(){if(!Fe||K)return;let o=performance.now(),l=De(),w=m;if(H!==!1){let h=o-st,L=h>0?Math.abs(l-(Re<0?l:Re))/h:0;w=m*Math.max(.2,1+L*(typeof H=="number"?H:1)*.04)}Re=l,st=o;let q=g?Ne===-1||l>=Ne?"forward":"reverse":E;Ne=l;let Q=J-Y,ee=!0,ie=Q===0?0:(l-Y)/Q;if(isNaN(Pe)||(Pe<=0&&ie>0?ue?.():Pe>0&&ie<=0&&ke?.(),Pe<1&&ie>=1?Me?.():Pe>=1&&ie<1&&Ie?.()),Pe=ie,me){let h=fe(re(l,Y,J,w));W&&!g&&(pe=Math.max(pe,h),h=pe),Te=h,e.style.setProperty("--scroll-draw-progress",String(h));let L=q==="reverse"?1-h:h;e.style.clipPath=G(L),y?.(h),!oe&&re(l,Y,J,w)>0&&(oe=!0,N?.()),h>=1&&!j?(j=!0,le?.(),he<(ae==="infinite"?1/0:ae??0)&&(he++,Ee=setTimeout(()=>{pe=-1,oe=!1,j=!1,e.style.clipPath=G(0)},ve))):h<1&&!W&&(j=!1),X=requestAnimationFrame(qe);return}if($.forEach((h,L)=>{let I=L*F*Q,u=fe(re(l,Y+I,J+I,w));W&&!g&&(pe=Math.max(pe,u),u=pe),Te=u,h.style.strokeDashoffset=q==="reverse"?`${D[L]*u}`:`${D[L]*(1-u)}`,c&&(h.style.opacity=q==="reverse"?`${1-u}`:`${u}`),ne&&V?h.style.stroke=Le(ne,V,u):V&&(h.style.stroke=V),B!==null&&s!==null?h.style.strokeWidth=`${B+(s-B)*u}`:s!==null&&(h.style.strokeWidth=`${s}`),f!==null&&P!==null?h.style.fillOpacity=`${f+(P-f)*u}`:P!==null&&(h.style.fillOpacity=`${P}`),k&&h.tagName.toLowerCase()==="path"&&C[L]&&h.setAttribute("d",tt(C[L],k,u)),L===0&&(y?.(u),e.style.setProperty("--scroll-draw-progress",String(u))),u<1&&(ee=!1)}),T){let h=fe(re(l,Y,J,w));for(let L in T){let I=parseFloat(L);h>=I&&!Se.has(I)&&(Se.add(I),T[L]?.())}}!oe&&re(l,Y,J,w)>0&&(oe=!0,N?.()),ee&&!j?(j=!0,le?.(),he<(ae==="infinite"?1/0:ae??0)&&(he++,Ee=setTimeout(()=>{pe=-1,oe=!1,j=!1,Se.clear(),He()},ve))):!ee&&!W&&(j=!1),X=requestAnimationFrame(qe)}let Ze=new IntersectionObserver(o=>{o.forEach(l=>{Fe=l.isIntersecting,Fe&&!K?X=requestAnimationFrame(qe):cancelAnimationFrame(X)})},{root:_??null,threshold:ye,rootMargin:we}),Je;function ze(){clearTimeout(Je),Je=setTimeout(()=>{$.forEach((o,l)=>{D[l]=Ve(o),o.style.strokeDasharray=`${D[l]}`}),at()},150)}return window.addEventListener("resize",ze),window.addEventListener("orientationchange",ze),A>0?setTimeout(()=>Ze.observe(e),A):Ze.observe(e),{destroy(){cancelAnimationFrame(X),clearTimeout(Ee),Ze.disconnect(),window.removeEventListener("resize",ze),window.removeEventListener("orientationchange",ze),clearTimeout(Je),Ue?.remove()},replay(){pe=-1,Ne=-1,Re=-1,oe=!1,j=!1,he=0,K=!1,Se.clear(),clearTimeout(Ee),He()},pause(){K=!0,cancelAnimationFrame(X)},resume(){K&&(K=!1,Fe&&(X=requestAnimationFrame(qe)))},seek(o){let l=Math.min(1,Math.max(0,o));Te=l,pe=l,K=!0,cancelAnimationFrame(X),xt(l,E)},getProgress(){return Te}}}var dt=new Map;function _e(e,r){dt.set(e,r)}function Ge(e){dt.delete(e)}function Ht(e){return e.startsWith("#")||e.startsWith("rgb")||e.startsWith("hsl")}function gt(e){let r=[],t=/([\w]+)\(([^)]*)\)/g,n;for(;(n=t.exec(e))!==null;){let a=[],i=[],d=n[2].trim();if(d)for(let m of d.split(/[\s,]+/)){let c=m.match(/^([-+]?[\d.eE]+)(.*)$/);a.push(c?parseFloat(c[1]):0),i.push(c?c[2]:"")}r.push({fn:n[1],nums:a,units:i})}return r}function qt(e,r,t){let n=gt(e),a=gt(r);return n.length===0||n.length!==a.length?t<1?e:r:n.map((i,d)=>{let m=a[d];return i.fn!==m.fn||i.nums.length!==m.nums.length?t<1?`${i.fn}(${i.nums.map((c,p)=>`${c}${i.units[p]}`).join(", ")})`:`${m.fn}(${m.nums.map((c,p)=>`${c}${m.units[p]}`).join(", ")})`:`${i.fn}(${i.nums.map((c,p)=>`${c+(m.nums[p]-c)*t}${i.units[p]}`).join(", ")})`}).join(" ")}function yt(e,r,t){if(typeof e=="number"&&typeof r=="number")return String(e+(r-e)*t);let n=String(e),a=String(r);if(Ht(n))return Le(n,a,t);if(n.includes("("))return qt(n,a,t);let i=n.match(/^([-+]?[\d.]+)(.*)$/),d=a.match(/^([-+]?[\d.]+)(.*)$/);if(i&&d){let m=parseFloat(i[1]),c=parseFloat(d[1]);return`${m+(c-m)*t}${i[2]||d[2]}`}return t<1?n:a}function zt(e){return e.replace(/([A-Z])/g,r=>`-${r.toLowerCase()}`)}var ht={linear:"linear","ease-in":"ease-in","ease-out":"ease-out","ease-in-out":"ease-in-out"},Vt=new Set(["opacity","transform","background-color","color","filter","scale","translate","rotate"]),Bt=0;function Wt(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}function bt(e,r){let t={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};if(typeof window>"u")return t;let{props:n,trigger:a={},easing:i="ease-out",speed:d=1,once:m=!1,axis:c="y",scrollContainer:p,native:x=!0,velocityScale:F=!1,onProgress:E,onComplete:W,onEnter:ge,onLeave:S,onEnterBack:M,onLeaveBack:g}=r,A=window.matchMedia("(prefers-reduced-motion: reduce)").matches,b=typeof i=="function"?i:te[i]??te["ease-out"],R=be(a.start??"top bottom"),z=be(a.end??"bottom top"),T=typeof p=="string"?document.querySelector(p):p??null,H=Object.entries(n).map(([s,f])=>({prop:zt(s),from:Array.isArray(f)?f[0]:"",to:Array.isArray(f)?f[1]:f}));function ye(){let s=window.getComputedStyle(e);for(let f of H)f.from===""&&(f.from=s.getPropertyValue(f.prop).trim()||"0")}function we(){for(let s of H)e.style.setProperty(s.prop,String(s.to))}if(A)return we(),W?.(),t;ye();function ae(){if(!x||!Wt()||typeof i!="string"||!(i in ht)||c!=="y"||T||m||d!==1||E||W||ge||S||M||g||F!==!1||(a.start??"top bottom").trim()!=="top bottom"||(a.end??"bottom top").trim()!=="bottom top")return!1;for(let s of H)if(!Vt.has(s.prop))return!1;return!0}function ve(){let s=`ssd-a-${++Bt}`,f=H.map(C=>`${C.prop}:${C.from}`).join(";"),P=H.map(C=>`${C.prop}:${C.to}`).join(";"),G=document.createElement("style");G.setAttribute("data-ssd-animate",""),G.textContent=`@keyframes ${s}{from{${f}}to{${P}}}.${s}{animation-name:${s};animation-duration:auto;animation-timing-function:${ht[i]};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(G),e.classList.add(s);let $=()=>c==="x"?window.scrollX:window.scrollY,D=()=>c==="x"?window.innerWidth:window.innerHeight;return{destroy(){e.classList.remove(s),G.remove()},replay(){e.classList.remove(s),e.offsetWidth,e.classList.add(s)},pause(){e.style.animationPlayState="paused"},resume(){e.style.animationPlayState=""},seek(C){let Y=Math.min(1,Math.max(0,C));e.classList.remove(s);for(let J of H)e.style.setProperty(J.prop,yt(J.from,J.to,Y))},getProgress(){let C=e.getBoundingClientRect(),Y=$(),J=D(),{tStart:j,tEnd:oe}=xe({top:C.top,height:C.height},Y,J,R,z);return b(re(Y,j,oe,d))}}}if(ae())return ve();let k=0,U=0,se=0,ce=!1,Z=!1,y=-1,N=0,le=!1,ue=NaN,Me=-1,Ie=0,ke=()=>T?c==="x"?T.scrollLeft:T.scrollTop:c==="x"?window.scrollX:window.scrollY,me=()=>T?c==="x"?T.clientWidth:T.clientHeight:c==="x"?window.innerWidth:window.innerHeight;function fe(){let s=e.getBoundingClientRect(),f,P;if(T){let $=T.getBoundingClientRect();f=c==="x"?s.left-$.left+T.scrollLeft:s.top-$.top+T.scrollTop,P=c==="x"?s.width:s.height}else f=c==="x"?s.left:s.top,P=c==="x"?s.width:s.height;let G=xe({top:f,height:P},ke(),me(),R,z);k=G.tStart,U=G.tEnd}function Ae(s){e.style.setProperty("--scroll-draw-progress",String(s));for(let f of H)e.style.setProperty(f.prop,yt(f.from,f.to,s));E?.(s)}function Oe(s){if(isNaN(ue)){ue=s;return}ue<=0&&s>0?ge?.():ue>0&&s<=0&&g?.(),ue<1&&s>=1?S?.():ue>=1&&s<1&&M?.(),ue=s}function _(){if(!ce||Z)return;let s=performance.now(),f=ke(),P=d;if(F!==!1){let D=s-Ie,C=D>0?Math.abs(f-(Me<0?f:Me))/D:0;P=d*Math.max(.2,1+C*(typeof F=="number"?F:1)*.04)}Me=f,Ie=s;let G=U===k?0:(f-k)/(U-k);Oe(G);let $=b(re(f,k,U,P));m&&(y=Math.max(y,$),$=y),N=$,Ae($),$>=1&&!le?(le=!0,W?.()):$<1&&!m&&(le=!1),se=requestAnimationFrame(_)}fe();{let s=b(re(ke(),k,U,d));m&&s>0&&(y=s),N=s,Ae(s)}let ne=new IntersectionObserver(s=>{s.forEach(f=>{ce=f.isIntersecting,ce&&!Z?se=requestAnimationFrame(_):cancelAnimationFrame(se)})},{root:T??null}),V;function B(){clearTimeout(V),V=setTimeout(fe,150)}return window.addEventListener("resize",B),window.addEventListener("orientationchange",B),ne.observe(e),_e(e,{type:"animate",getProgress:()=>N,getTrigger:()=>({tStart:k,tEnd:U})}),{destroy(){cancelAnimationFrame(se),ne.disconnect(),window.removeEventListener("resize",B),window.removeEventListener("orientationchange",B),clearTimeout(V),Ge(e)},replay(){y=-1,le=!1,N=0,Z=!1,Ae(0)},pause(){Z=!0,cancelAnimationFrame(se)},resume(){Z&&(Z=!1,ce&&(se=requestAnimationFrame(_)))},seek(s){let f=Math.min(1,Math.max(0,s));N=f,y=f,Z=!0,cancelAnimationFrame(se),Ae(f)},getProgress(){return N}}}var je={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function wt(e,r){if(typeof window>"u")return je;let t=typeof e=="string"?document.querySelector(e):e;return t?bt(t,r):(process.env.NODE_ENV!=="production"&&console.warn("[svg-scroll-draw] scrollAnimate: element not found:",e),je)}function vt(e,r={}){if(typeof window>"u")return je;let t=typeof e=="string"?document.querySelector(e):e;if(!t)return process.env.NODE_ENV!=="production"&&console.warn("[svg-scroll-draw] scrollParallax: element not found:",e),je;let{speed:n=.3,axis:a="y",easing:i="linear",trigger:d,onProgress:m}=r,c=t.getBoundingClientRect(),p=a==="x"?c.width:c.height,x=n*p;return bt(t,{props:a==="x"?{transform:["translateX(0px)",`translateX(${-x}px)`]}:{transform:["translateY(0px)",`translateY(${-x}px)`]},trigger:d??{start:"top bottom",end:"bottom top"},easing:i,native:!1,onProgress:m})}var rt={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function Et(e,r){if(typeof window>"u")return rt;let t=typeof e=="string"?document.querySelector(e):e;if(!t)return process.env.NODE_ENV!=="production"&&console.warn("[svg-scroll-draw] scrollCounter: element not found:",e),rt;let n=t,{from:a=0,to:i,format:d,easing:m="ease-out",trigger:c={},once:p=!0,decimals:x,onComplete:F}=r,E=x!==void 0?y=>y.toFixed(x):d??(y=>String(Math.round(y))),W=typeof m=="function"?m:te[m]??te["ease-out"],ge=be(c.start??"top 80%"),S=be(c.end??"top 20%");if(window.matchMedia("(prefers-reduced-motion: reduce)").matches)return n.textContent=E(i),F?.(),rt;n.textContent=E(a);let g=0,A=0,b=0,R=!1,z=!1,T=-1,H=0,ye=!1,we=()=>window.scrollY,ae=()=>window.innerHeight;function ve(){let y=n.getBoundingClientRect(),N=xe({top:y.top,height:y.height},we(),ae(),ge,S);g=N.tStart,A=N.tEnd}function k(y){n.textContent=E(a+(i-a)*y),n.style.setProperty("--scroll-draw-progress",String(y))}function U(){if(!R||z)return;let y=W(re(we(),g,A,1));p&&(T=Math.max(T,y),y=T),H=y,k(y),y>=1&&!ye?(ye=!0,F?.()):y<1&&!p&&(ye=!1),b=requestAnimationFrame(U)}ve();{let y=W(re(we(),g,A,1));p&&y>0&&(T=y),H=y,k(y)}let se=new IntersectionObserver(y=>{y.forEach(N=>{R=N.isIntersecting,R&&!z?b=requestAnimationFrame(U):cancelAnimationFrame(b)})}),ce;function Z(){clearTimeout(ce),ce=setTimeout(ve,150)}return window.addEventListener("resize",Z),window.addEventListener("orientationchange",Z),se.observe(n),_e(n,{type:"counter",getProgress:()=>H,getTrigger:()=>({tStart:g,tEnd:A})}),{destroy(){cancelAnimationFrame(b),se.disconnect(),window.removeEventListener("resize",Z),window.removeEventListener("orientationchange",Z),clearTimeout(ce),Ge(n)},replay(){T=-1,ye=!1,H=0,z=!1,k(0)},pause(){z=!0,cancelAnimationFrame(b)},resume(){z&&(z=!1,R&&(b=requestAnimationFrame(U)))},seek(y){let N=Math.min(1,Math.max(0,y));H=N,T=N,z=!0,cancelAnimationFrame(b),k(N)},getProgress(){return H}}}var St="http://www.w3.org/2000/svg",_t="cinematic-photo",nt=e=>e<0?0:e>1?1:e;function Xe(e){let r=parseFloat(e);return Number.isFinite(r)?nt(r/100):0}function Gt(e){return te[e]??te.linear}var jt={destroy:()=>{},getProgress:()=>0},Ye=class{constructor(r){if(typeof document>"u"){this.mount=null;return}this.mount=typeof r.wrapper=="string"?document.querySelector(r.wrapper):r.wrapper,!this.mount&&process.env.NODE_ENV!=="production"&&console.warn("[svg-scroll-draw] Cinematic: wrapper not found:",r.wrapper)}loadStory(r){let t=this.mount;if(typeof window>"u"||!t)return jt;t.style.position="relative",t.style.height=r.totalHeight,t.style.display="block";let n=document.createElement("div");n.setAttribute("data-cinematic-stage",""),n.style.cssText="position:sticky;top:0;height:100vh;width:100%;overflow:hidden;display:block;",t.appendChild(n);let a=[];for(let S of r.scenes){if(S.background){let g=document.createElement("img");g.id=_t,g.src=S.background,g.alt="",g.style.cssText="position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;pointer-events:none;",n.appendChild(g)}let M=S.animations.filter(g=>g.type==="draw");if(M.length){let g=document.createElementNS(St,"svg");g.setAttribute("viewBox",`0 0 ${r.canvas.width} ${r.canvas.height}`),g.setAttribute("preserveAspectRatio","xMidYMid meet"),g.style.cssText="position:absolute;inset:0;width:100%;height:100%;overflow:visible;",n.appendChild(g);for(let A of M){let b=document.createElementNS(St,"path");b.id=A.target.replace(/^#/,""),b.setAttribute("d",A.d),b.setAttribute("fill","none"),b.setAttribute("stroke",A.stroke),b.setAttribute("stroke-width",String(A.strokeWidth)),b.setAttribute("stroke-linecap","round"),b.setAttribute("stroke-linejoin","round");let R=A.length||b.getTotalLength?.()||0;b.style.strokeDasharray=String(R),b.style.strokeDashoffset=String(R),g.appendChild(b),a.push({kind:"draw",el:b,start:Xe(A.start),end:Xe(A.end),ease:Gt(A.easing),length:R})}}for(let g of S.animations){if(g.type!=="fade")continue;let A=n.querySelector(g.target)??document.querySelector(g.target);A&&(A.style.opacity=String(g.from),a.push({kind:"fade",el:A,start:Xe(g.start),end:Xe(g.end),ease:te["ease-in-out"]??te.linear,from:g.from,to:g.to}))}}let i=0,d=()=>{let S=t.offsetHeight-window.innerHeight;return S<=0?t.getBoundingClientRect().top<=0?1:0:nt(-t.getBoundingClientRect().top/S)},m=S=>{for(let M of a){let g=M.end-M.start,A=g<=0?S>=M.end?1:0:nt((S-M.start)/g),b=M.ease(A);M.kind==="draw"?M.el.style.strokeDashoffset=String(M.length*(1-b)):M.el.style.opacity=String(M.from+(M.to-M.from)*b)}};if(window.matchMedia("(prefers-reduced-motion: reduce)").matches)return m(1),{destroy:()=>{},getProgress:()=>1};let c=0,p=!1,x=!1,F=()=>{i=d(),m(i),p&&(c=requestAnimationFrame(F))},E=()=>{p||(p=!0,c=requestAnimationFrame(F))},W=()=>{p=!1,cancelAnimationFrame(c)},ge=new IntersectionObserver(S=>{for(let M of S)x=M.isIntersecting,x?E():W()},{threshold:0});return ge.observe(n),i=d(),m(i),{destroy(){W(),ge.disconnect()},getProgress:()=>i}}};function Xt(e,r){let t={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};if(typeof window>"u")return t;let n=typeof e=="string"?document.querySelector(e):e;return n?We(n,r):(console.warn("[svg-scroll-draw] Container not found:",e),t)}var ot=class extends HTMLElement{constructor(){super(...arguments);this.instance=null}connectedCallback(){let t={},n=this.getAttribute("speed"),a=this.getAttribute("easing"),i=this.getAttribute("stagger"),d=this.getAttribute("direction"),m=this.getAttribute("selector");n&&(t.speed=parseFloat(n)),a&&(t.easing=a),i&&(t.stagger=parseFloat(i)),d&&(t.direction=d),m&&(t.selector=m),this.hasAttribute("fade")&&(t.fade=this.getAttribute("fade")!=="false"),this.instance=We(this,t)}disconnectedCallback(){this.instance?.destroy(),this.instance=null}};typeof customElements<"u"&&!customElements.get("scroll-draw")&&customElements.define("scroll-draw",ot);return It(Yt);})();
+"use strict";var SvgScrollDraw=(()=>{var lt=Object.defineProperty;var Bt=Object.getOwnPropertyDescriptor;var Gt=Object.getOwnPropertyNames;var jt=Object.prototype.hasOwnProperty;var Yt=(e,t)=>{for(var r in t)lt(e,r,{get:t[r],enumerable:!0})},Ut=(e,t,r,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of Gt(t))!jt.call(e,i)&&i!==r&&lt(e,i,{get:()=>t[i],enumerable:!(n=Bt(t,i))||n.enumerable});return e};var Xt=e=>Ut(lt({},"__esModule",{value:!0}),e);var yr={};Yt(yr,{Cinematic:()=>rt,PRESETS:()=>Ze,createBounce:()=>ct,createElastic:()=>ut,createSpring:()=>At,scrollAnimate:()=>Ft,scrollCounter:()=>Ht,scrollDraw:()=>gr,scrollParallax:()=>Nt});function At({tension:e=2.5,friction:t=2.2}={}){return r=>1-Math.cos(r*Math.PI*e)*Math.pow(1-r,t)}function ct({bounces:e=3,decay:t=.5}={}){let r=Math.max(1,Math.round(e)),n=Math.max(.01,Math.min(.99,t)),i=Math.sqrt(n),a=0,f=[];for(let p=0;p<r;p++){let x=Math.pow(i,p);f.push(x),a+=x}let m=[0],c=0;for(let p=0;p<r;p++)c+=f[p]/a,m.push(c);return p=>{if(p<=0)return 0;if(p>=1)return 1;for(let x=0;x<r;x++)if(p<=m[x+1]){let I=(p-m[x])/(m[x+1]-m[x]);if(x===0)return I*(2-I);let A=1-Math.pow(n,x);return A+(1-A)*(2*I-1)*(2*I-1)}return 1}}function ut({amplitude:e=1,period:t=.4}={}){let r=Math.max(1,e),n=Math.max(.1,t),i=r<=1?n/4:n/(2*Math.PI)*Math.asin(1/r);return a=>a<=0?0:a>=1?1:r*Math.pow(2,-10*a)*Math.sin((a-i)*(2*Math.PI)/n)+1}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),bounce:ct(),elastic:ut()};function $e(e="top bottom"){let t=e.trim();if(/^\d+(\.\d+)?%$/.test(t))return{element:"top",viewport:t};let[r="top",n="bottom"]=t.split(/\s+/).filter(Boolean);return{element:r,viewport:n}}function Et(e,t,r,n){switch(n){case"top":return e+r;case"center":return e+r+t/2;case"bottom":return e+r+t;default:return e+r}}function xt(e,t){if(/^\d+(\.\d+)?%$/.test(e))return t*(parseFloat(e)/100);switch(e){case"top":return 0;case"center":return t/2;case"bottom":return t;default:return t}}function Ve(e){let t=e.tagName.toLowerCase();if(t==="rect"){let r=parseFloat(e.getAttribute("width")??"0"),n=parseFloat(e.getAttribute("height")??"0");return 2*(r+n)}if(t==="circle"){let r=parseFloat(e.getAttribute("r")??"0");return 2*Math.PI*r}return e.getTotalLength()}function Qt(e,t,r){return Math.min(r,Math.max(t,e))}function le(e,t,r,n){return r===t?0:Qt((e-t)/(r-t)*n,0,1)}function Qe(e,t,r){let n=e.getBoundingClientRect(),i=r==="x"?n.width:n.height;return t?{top:r==="x"?n.left-t.getBoundingClientRect().left+t.scrollLeft:n.top-t.getBoundingClientRect().top+t.scrollTop,height:i,scroll:0}:{top:r==="x"?n.left:n.top,height:i,scroll:r==="x"?window.scrollX:window.scrollY}}function Fe(e,t,r,n,i){let a=Et(e.top,e.height,t,n.element)-xt(n.viewport,r),f=Et(e.top,e.height,t,i.element)-xt(i.viewport,r);return{tStart:a,tEnd:f}}function Tt(e){let t=/^#([a-f\d])([a-f\d])([a-f\d])$/i.exec(e);if(t)return[parseInt(t[1]+t[1],16),parseInt(t[2]+t[2],16),parseInt(t[3]+t[3],16)];let r=/^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);if(r)return[parseInt(r[1],16),parseInt(r[2],16),parseInt(r[3],16)];let n=/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/i.exec(e);return n?[parseInt(n[1]),parseInt(n[2]),parseInt(n[3])]:null}function ze(e,t,r){let n=Tt(e),i=Tt(t);return!n||!i?e:`rgb(${Math.round(n[0]+(i[0]-n[0])*r)},${Math.round(n[1]+(i[1]-n[1])*r)},${Math.round(n[2]+(i[2]-n[2])*r)})`}var Ze={sketch:{easing:"ease-in",stagger:.1,speed:.9,fade:!1},reveal:{easing:"ease-out",fade:!0,speed:1.2,once:!0},typewriter:{easing:"linear",stagger:.05,speed:1.5},cinematic:{easing:"ease-in-out",fade:!0,speed:.75},spring:{easing:"spring",speed:1.1}};function K(e,...t){}var Zt="cubic-bezier(0.333333, 0, 0.666667, 0.333333)",Kt="cubic-bezier(0.333333, 0.666667, 0.666667, 1)",$t=33;function Jt(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timing-function: linear(0, 1)")}function er(e){let t=[];for(let r=0;r<$t;r++){let n=r/($t-1);t.push(String(Math.round(e(n)*1e5)/1e5))}return`linear(${t.join(",")})`}function Ke(e){switch(e){case"linear":return"linear";case"ease-in":return Zt;case"ease-out":return Kt;case"ease-in-out":return Jt()?er(Z["ease-in-out"]):null;default:return null}}var Mt=Symbol.for("svg-scroll-draw.registry");function Pt(){let e=globalThis;return e[Mt]||(e[Mt]=new Map)}function Me(e,t){Pt().set(e,t)}function Pe(e){Pt().delete(e)}var tr=0;function rr(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")&&CSS.supports("view-timeline-name: --x")}function nr(e){let t=e.getAttribute("stroke"),r=e.getAttribute("fill");!t||t==="none"?K("Element has no stroke \u2014 path will not be visible.",e):r&&r!=="none"&&r!=="transparent"&&K("Element has a fill \u2014 it may obscure the stroke animation.",e)}function or(e,t,r){let n=document.createElement("div");n.setAttribute("data-svg-scroll-draw-debug",""),n.style.cssText="position:fixed;pointer-events:none;z-index:9999;font-family:monospace;font-size:11px;top:0;left:0;right:0;bottom:0;";function i(){let a=r==="x"?window.scrollX:window.scrollY,f=e-a,m=t-a,c=r==="x";n.innerHTML=`
+      <div style="position:absolute;${c?`left:${f}px;top:0;bottom:0;border-left:2px dashed #22c55e;`:`top:${f}px;left:0;right:0;border-top:2px dashed #22c55e;`}padding:2px 6px;color:#22c55e;background:rgba(0,0,0,.6)">\u25B6 start</div>
+      <div style="position:absolute;${c?`left:${m}px;top:0;bottom:0;border-left:2px dashed #ef4444;`:`top:${m}px;left:0;right:0;border-top:2px dashed #ef4444;`}padding:2px 6px;color:#ef4444;background:rgba(0,0,0,.6)">\u25A0 end</div>`}return document.body.appendChild(n),window.addEventListener("scroll",i,{passive:!0}),i(),{el:n,destroy(){window.removeEventListener("scroll",i),n.remove()}}}var kt=/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,Lt=/[MmLlHhVvCcSsQqTtAaZz]/g;function sr(e,t,r){if(!!1)return;let n=(e.match(Lt)??[]).join("").toUpperCase(),i=(t.match(Lt)??[]).join("").toUpperCase(),a=(e.match(kt)??[]).length,f=(t.match(kt)??[]).length;if(n!==i){K(`morphTo: command sequence differs (${n||"\u2205"} \u2192 ${i||"\u2205"}). Interpolation is coordinate-for-coordinate, so the result will not reach the target shape. Redraw both paths with the same commands.`,r);return}a!==f&&K(`morphTo: coordinate count differs (${a} \u2192 ${f}). Extra coordinates are ignored and missing ones hold their start value, so the result will not reach the target shape.`,r)}function mt(e,t,r){let n=(t.match(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g)??[]).map(Number),i=0;return e.replace(/[-+]?(?:\d*\.)?\d+(?:[eE][-+]?\d+)?/g,a=>{let f=parseFloat(a),m=n[i++]??f;return String(+(f+(m-f)*r).toFixed(4))})}function Je(e,t={}){if(typeof window>"u")return{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};let{preset:r,...n}=t,i=r?{...Ze[r],...n}:n,a=window.matchMedia("(prefers-reduced-motion: reduce)").matches,{selector:f="path, polyline, line, polygon, rect, circle",speed:m=1,fade:c=!1,easing:p="linear",trigger:x={},stagger:I=0,direction:A="forward",once:J=!1,debug:Ee=!1,axis:S="y",scrollContainer:$,autoReverse:g=!1,delay:E=0,strokeColor:b,strokeWidth:z,fillOpacity:F,waypoints:B,velocityScale:ee=!1,threshold:ge=0,rootMargin:j="0px",repeat:q=0,repeatDelay:ke=0,morphTo:N,clip:ye,autoplay:Le=!1,duration:Ce=1e3,native:De=!0,onProgress:w,onStart:P,onComplete:ne,onEnter:he,onLeave:Ne,onEnterBack:be,onLeaveBack:xe}=i,te=ye===!0?"left":typeof ye=="string"?ye:!1,me=typeof p=="function"?p:Z[p]??Z.linear,we=$e(x.start??"top bottom"),He=$e(x.end??"bottom top"),ce=typeof $=="string"?document.querySelector($):$??null,ue=Array.isArray(b)?b[0]:null,Y=Array.isArray(b)?b[1]:typeof b=="string"?b:null,U=Array.isArray(z)?z[0]:null,H=Array.isArray(z)?z[1]:typeof z=="number"?z:null,re=Array.isArray(F)?F[0]:null,W=Array.isArray(F)?F[1]:typeof F=="number"?F:null;function ve(o){let l=o*100;switch(te){case"right":return`inset(0 0 0 ${100-l}%)`;case"top":return`inset(0 0 ${100-l}% 0)`;case"bottom":return`inset(${100-l}% 0 0 0)`;case"center":return`circle(${o*150}% at 50% 50%)`;default:return`inset(0 ${100-l}% 0 0)`}}let C=te?[]:Array.from(e.querySelectorAll(f)),T=[],s=[],u=0,oe=0,k=!1,D=!1,O=0,pe=!1,se=-1,G=-1,_=!1,ie=0,Te=0,Ie,nt=null;function dt(){nt?.destroy(),nt=null}let Oe=new Set,gt=NaN,Re=!0,Be=-1,yt=performance.now(),_e=NaN;function ot(){return ce?S==="x"?ce.scrollLeft:ce.scrollTop:S==="x"?window.scrollX:window.scrollY}function ht(){return ce?S==="x"?ce.clientWidth:ce.clientHeight:S==="x"?window.innerWidth:window.innerHeight}function bt(){let o=Qe(e,ce,S);return Fe(o,o.scroll,ht(),we,He)}function wt(){({tStart:u,tEnd:oe}=bt()),Ee&&!1&&(dt(),nt=or(u,oe,S))}function st(o,l=bt){Me(e,{type:"draw",getProgress:()=>o.getProgress(),getTrigger:l});let h=o.destroy;return o.destroy=()=>{h.call(o),Pe(e)},o}function Vt(o,l){if(e.style.setProperty("--scroll-draw-progress",String(o)),te){let h=l==="reverse"?1-o:o;e.style.clipPath=ve(h);return}C.forEach((h,X)=>{h.style.strokeDashoffset=l==="reverse"?`${T[X]*o}`:`${T[X]*(1-o)}`,c&&(h.style.opacity=l==="reverse"?`${1-o}`:`${o}`),ue&&Y?h.style.stroke=ze(ue,Y,o):Y&&(h.style.stroke=Y),U!==null&&H!==null?h.style.strokeWidth=`${U+(H-U)*o}`:H!==null&&(h.style.strokeWidth=`${H}`),re!==null&&W!==null?h.style.fillOpacity=`${re+(W-re)*o}`:W!==null&&(h.style.fillOpacity=`${W}`),N&&h.tagName.toLowerCase()==="path"&&s[X]&&h.setAttribute("d",mt(s[X],N,o))})}function Ge(){if(e.style.setProperty("--scroll-draw-progress","0"),te){e.style.clipPath=ve(0);return}C.forEach((o,l)=>{o.style.strokeDasharray=`${T[l]}`,o.style.strokeDashoffset=A==="reverse"?"0":`${T[l]}`,c?o.style.opacity=A==="reverse"?"1":"0":o.style.opacity="",ue&&(o.style.stroke=ue),U!==null&&(o.style.strokeWidth=`${U}`),re!==null&&(o.style.fillOpacity=`${re}`),N&&o.tagName.toLowerCase()==="path"&&s[l]&&o.setAttribute("d",s[l])})}if(C.forEach(o=>{nr(o);let l=Ve(o);T.push(l);let h=o.tagName.toLowerCase()==="path";h?s.push(o.getAttribute("d")??""):s.push(""),N&&(h?sr(s[s.length-1],N,o):K(`morphTo only applies to <path> elements \u2014 ignored on <${o.tagName}>.`,o)),a?(o.style.strokeDasharray=`${l}`,o.style.strokeDashoffset=A==="reverse"?`${l}`:"0",c&&(o.style.opacity="1"),Y&&(o.style.stroke=Y),H!==null&&(o.style.strokeWidth=`${H}`),W!==null&&(o.style.fillOpacity=`${W}`),N&&o.tagName.toLowerCase()==="path"&&o.setAttribute("d",N)):(o.style.strokeDasharray=`${l}`,o.style.strokeDashoffset=A==="reverse"?"0":`${l}`,c?o.style.opacity=A==="reverse"?"1":"0":o.style.opacity="",ue&&(o.style.stroke=ue),U!==null&&(o.style.strokeWidth=`${U}`),re!==null&&(o.style.fillOpacity=`${re}`))}),te){if(a)return e.style.clipPath=ve(1),ne?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};e.style.clipPath=ve(0)}else if(a)return ne?.(),{destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>1};let vt=typeof p=="string"?Ke(p):null;function zt(){return!(De===!1||!rr()||!C.length||!vt||te||S!=="y"||ce||m!==1||I!==0||J||g||ee!==!1||N||B||q||E>0||w||P||ne||he||Ne||be||xe||b!=null||z!=null||F!=null||(x.start??"top bottom").trim()!=="top bottom"||(x.end??"bottom top").trim()!=="bottom top")}function qt(){let o=++tr,l=`svg-scroll-draw-${o}`,h=`svg-scroll-draw-host-${o}`,X=`--svg-scroll-draw-${o}`,Ae=A==="reverse"?"0":"var(--ssd-len)",Se=A==="reverse"?"var(--ssd-len)":"0",de=`stroke-dashoffset:${Ae};`,v=`stroke-dashoffset:${Se};`;c&&(de+=`opacity:${A==="reverse"?1:0};`,v+=`opacity:${A==="reverse"?0:1};`);let M=document.createElement("style");M.setAttribute("data-svg-scroll-draw",""),M.textContent=`@keyframes ${l}{from{${de}}to{${v}}}.${h}{view-timeline-name:${X};view-timeline-axis:block;}.${l}{animation-name:${l};animation-duration:auto;animation-timing-function:${vt};animation-fill-mode:both;animation-timeline:${X};animation-range:cover 0% cover 100%;}`,document.head.appendChild(M),e.classList.add(h);function Q(d,V){d.style.setProperty("--ssd-len",String(T[V])),d.style.strokeDasharray=`${T[V]}`,d.style.strokeDashoffset="",d.style.opacity="",d.style.animationPlayState="",d.classList.add(l)}C.forEach(Q);let y=!1,L=-1;function R(){if(L>=0)return L;let d=e.getBoundingClientRect(),{tStart:V,tEnd:fe}=Fe({top:d.top,height:d.height},ot(),ht(),we,He);return me(le(ot(),V,fe,m))}return{destroy(){e.classList.remove(h),C.forEach(d=>{d.classList.remove(l),d.style.removeProperty("--ssd-len"),d.style.animationPlayState=""}),M.remove()},replay(){y=!1,L=-1,C.forEach(Q)},pause(){y=!0,C.forEach(d=>{d.style.animationPlayState="paused"})},resume(){y&&(y=!1,C.forEach(d=>{d.style.animationPlayState="running"}))},seek(d){let V=Math.min(1,Math.max(0,d));L=V,y=!0,C.forEach((fe,ae)=>{fe.classList.remove(l),fe.style.strokeDashoffset=A==="reverse"?`${T[ae]*V}`:`${T[ae]*(1-V)}`,c&&(fe.style.opacity=A==="reverse"?`${1-V}`:`${V}`)})},getProgress(){return R()},refresh(){C.forEach((d,V)=>{T[V]=Ve(d),d.style.setProperty("--ssd-len",String(T[V])),d.style.strokeDasharray=`${T[V]}`})}}}if(zt())return st(qt());function Wt(){let o=Math.max(1,Ce),l=0,h=0,X=!1;function Ae(y){let L=!0;if(te){let R=Math.min(1,Math.max(0,y/o)),d=me(R);ie=d,e.style.setProperty("--scroll-draw-progress",String(d)),e.style.clipPath=ve(A==="reverse"?1-d:d),w?.(d),R<1&&(L=!1)}else C.forEach((R,d)=>{let V=d*I*o,fe=Math.min(1,Math.max(0,(y-V)/o)),ae=me(fe);R.style.strokeDashoffset=A==="reverse"?`${T[d]*ae}`:`${T[d]*(1-ae)}`,c&&(R.style.opacity=A==="reverse"?`${1-ae}`:`${ae}`),ue&&Y?R.style.stroke=ze(ue,Y,ae):Y&&(R.style.stroke=Y),U!==null&&H!==null?R.style.strokeWidth=`${U+(H-U)*ae}`:H!==null&&(R.style.strokeWidth=`${H}`),re!==null&&W!==null?R.style.fillOpacity=`${re+(W-re)*ae}`:W!==null&&(R.style.fillOpacity=`${W}`),N&&R.tagName.toLowerCase()==="path"&&s[d]&&R.setAttribute("d",mt(s[d],N,ae)),d===0&&(ie=ae,w?.(ae),e.style.setProperty("--scroll-draw-progress",String(ae))),fe<1&&(L=!1)});if(B){let R=Math.min(1,Math.max(0,y/o)),d=me(R);for(let V in B){let fe=parseFloat(V);d>=fe&&!Oe.has(fe)&&(Oe.add(fe),B[V]?.())}}return L}function Se(y){if(_)return;let L=y-l;D||(D=!0,P?.());let R=Ae(L);if(R&&!k){k=!0,Ae(o*(1+Math.max(0,C.length-1)*I)),ne?.(),Te<(q==="infinite"?1/0:q??0)&&(Te++,Ie=setTimeout(()=>{l=performance.now(),D=!1,k=!1,Oe.clear(),Ge(),O=requestAnimationFrame(Se)},ke));return}R||(O=requestAnimationFrame(Se))}function de(){cancelAnimationFrame(O),clearTimeout(Ie),l=performance.now(),h=0,_=!1,D=!1,k=!1,Te=0,X=!0,ie=0,Oe.clear(),Ge(),O=requestAnimationFrame(Se)}let v=new IntersectionObserver(y=>{y.forEach(L=>{L.isIntersecting&&!(J&&k)?de():!L.isIntersecting&&!J&&!k&&(cancelAnimationFrame(O),clearTimeout(Ie),X=!1)})},{root:ce??null,threshold:ge,rootMargin:j}),M;function Q(){clearTimeout(M),M=setTimeout(()=>{C.forEach((y,L)=>{T[L]=Ve(y),y.style.strokeDasharray=`${T[L]}`})},150)}return window.addEventListener("resize",Q),window.addEventListener("orientationchange",Q),E>0?setTimeout(()=>v.observe(e),E):v.observe(e),{destroy(){cancelAnimationFrame(O),clearTimeout(Ie),v.disconnect(),window.removeEventListener("resize",Q),window.removeEventListener("orientationchange",Q),clearTimeout(M)},replay(){Te=0,de()},pause(){_||!X||(_=!0,h=performance.now()-l,cancelAnimationFrame(O))},resume(){_&&(_=!1,X=!0,l=performance.now()-h,O=requestAnimationFrame(Se))},seek(y){let L=Math.min(1,Math.max(0,y));ie=L,_=!0,h=L*o,l=performance.now()-h,cancelAnimationFrame(O),Ae(h)},getProgress(){return ie},refresh(){clearTimeout(M),C.forEach((y,L)=>{T[L]=Ve(y),y.style.strokeDasharray=`${T[L]}`})}}}if(Le)return st(Wt());wt();function je(){if(!pe||_)return;let o=performance.now(),l=ot();if(!Re&&ee===!1&&l===gt){O=requestAnimationFrame(je);return}Re=!1,gt=l;let h=m;if(ee!==!1){let v=o-yt,M=v>0?Math.abs(l-(Be<0?l:Be))/v:0;h=m*Math.max(.2,1+M*(typeof ee=="number"?ee:1)*.04)}Be=l,yt=o;let X=g?G===-1||l>=G?"forward":"reverse":A;G=l;let Ae=oe-u,Se=!0,de=Ae===0?0:(l-u)/Ae;if(isNaN(_e)||(_e<=0&&de>0?he?.():_e>0&&de<=0&&xe?.(),_e<1&&de>=1?Ne?.():_e>=1&&de<1&&be?.()),_e=de,te){let v=me(le(l,u,oe,h));J&&!g&&(se=Math.max(se,v),v=se),ie=v,e.style.setProperty("--scroll-draw-progress",String(v));let M=X==="reverse"?1-v:v;e.style.clipPath=ve(M),w?.(v),!D&&le(l,u,oe,h)>0&&(D=!0,P?.()),v>=1&&!k?(k=!0,ne?.(),Te<(q==="infinite"?1/0:q??0)&&(Te++,Ie=setTimeout(()=>{se=-1,D=!1,k=!1,e.style.clipPath=ve(0)},ke))):v<1&&!J&&(k=!1),O=requestAnimationFrame(je);return}if(C.forEach((v,M)=>{let Q=M*I*Ae,y=me(le(l,u+Q,oe+Q,h));J&&!g&&(se=Math.max(se,y),y=se),ie=y,v.style.strokeDashoffset=X==="reverse"?`${T[M]*y}`:`${T[M]*(1-y)}`,c&&(v.style.opacity=X==="reverse"?`${1-y}`:`${y}`),ue&&Y?v.style.stroke=ze(ue,Y,y):Y&&(v.style.stroke=Y),U!==null&&H!==null?v.style.strokeWidth=`${U+(H-U)*y}`:H!==null&&(v.style.strokeWidth=`${H}`),re!==null&&W!==null?v.style.fillOpacity=`${re+(W-re)*y}`:W!==null&&(v.style.fillOpacity=`${W}`),N&&v.tagName.toLowerCase()==="path"&&s[M]&&v.setAttribute("d",mt(s[M],N,y)),M===0&&(w?.(y),e.style.setProperty("--scroll-draw-progress",String(y))),y<1&&(Se=!1)}),B){let v=me(le(l,u,oe,h));for(let M in B){let Q=parseFloat(M);v>=Q&&!Oe.has(Q)&&(Oe.add(Q),B[M]?.())}}!D&&le(l,u,oe,h)>0&&(D=!0,P?.()),Se&&!k?(k=!0,ne?.(),Te<(q==="infinite"?1/0:q??0)&&(Te++,Ie=setTimeout(()=>{se=-1,D=!1,k=!1,Oe.clear(),Ge(),Re=!0},ke))):!Se&&!J&&(k=!1),O=requestAnimationFrame(je)}let it=!1;function Ye(){it||(it=!0,O=requestAnimationFrame(function(){je()}))}function Ue(){it=!1,cancelAnimationFrame(O)}let at=new IntersectionObserver(o=>{o.forEach(l=>{pe=l.isIntersecting,pe&&!_?(Re=!0,Ye()):Ue()})},{root:ce??null,threshold:ge,rootMargin:j});function St(){C.forEach((o,l)=>{T[l]=Ve(o),o.style.strokeDasharray=`${T[l]}`}),wt(),Re=!0}let Xe;function qe(){clearTimeout(Xe),Xe=setTimeout(St,150)}window.addEventListener("resize",qe),window.addEventListener("orientationchange",qe);let We;return typeof ResizeObserver<"u"&&(We=new ResizeObserver(()=>qe()),We.observe(document.body),We.observe(document.documentElement),We.observe(e)),E>0?setTimeout(()=>at.observe(e),E):at.observe(e),st({destroy(){cancelAnimationFrame(O),clearTimeout(Ie),Ue(),at.disconnect(),We?.disconnect(),window.removeEventListener("resize",qe),window.removeEventListener("orientationchange",qe),clearTimeout(Xe),dt()},replay(){se=-1,G=-1,Be=-1,D=!1,k=!1,Te=0,_=!1,ie=0,Oe.clear(),clearTimeout(Ie),Ge(),Re=!0,pe&&Ye()},pause(){_=!0,Ue()},resume(){_&&(_=!1,Re=!0,pe&&Ye())},seek(o){let l=Math.min(1,Math.max(0,o));ie=l,se=l,_=!0,Ue(),Vt(l,A),Re=!0},getProgress(){return ie},refresh(){clearTimeout(Xe),St(),pe&&!_&&Ye()}},()=>({tStart:u,tEnd:oe}))}function ir(e){return e.startsWith("#")||e.startsWith("rgb")||e.startsWith("hsl")}function Dt(e){let t=[],r=/([\w]+)\(([^)]*)\)/g,n;for(;(n=r.exec(e))!==null;){let i=[],a=[],f=n[2].trim();if(f)for(let m of f.split(/[\s,]+/)){let c=m.match(/^([-+]?[\d.eE]+)(.*)$/);i.push(c?parseFloat(c[1]):0),a.push(c?c[2]:"")}t.push({fn:n[1],nums:i,units:a})}return t}function ar(e,t,r){let n=Dt(e),i=Dt(t);return n.length===0||n.length!==i.length?r<1?e:t:n.map((a,f)=>{let m=i[f];return a.fn!==m.fn||a.nums.length!==m.nums.length?r<1?`${a.fn}(${a.nums.map((c,p)=>`${c}${a.units[p]}`).join(", ")})`:`${m.fn}(${m.nums.map((c,p)=>`${c}${m.units[p]}`).join(", ")})`:`${a.fn}(${a.nums.map((c,p)=>`${c+(m.nums[p]-c)*r}${a.units[p]}`).join(", ")})`}).join(" ")}function It(e,t,r){if(typeof e=="number"&&typeof t=="number")return String(e+(t-e)*r);let n=String(e),i=String(t);if(ir(n))return ze(n,i,r);if(n.includes("("))return ar(n,i,r);let a=n.match(/^([-+]?[\d.]+)(.*)$/),f=i.match(/^([-+]?[\d.]+)(.*)$/);if(a&&f){let m=parseFloat(a[1]),c=parseFloat(f[1]);return`${m+(c-m)*r}${a[2]||f[2]}`}return r<1?n:i}function lr(e){return e.replace(/([A-Z])/g,t=>`-${t.toLowerCase()}`)}var cr=new Set(["opacity","transform","background-color","color","filter","scale","translate","rotate"]),ur=0,Ot="--scroll-draw-progress";function mr(){return typeof CSS<"u"&&typeof CSS.supports=="function"&&CSS.supports("animation-timeline: view()")}function Rt(e,t){let r={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};if(typeof window>"u")return r;let{props:n,trigger:i={},easing:a="ease-out",speed:f=1,once:m=!1,axis:c="y",scrollContainer:p,native:x=!0,velocityScale:I=!1,respectReducedMotion:A=!0,triggerElement:J,onProgress:Ee,onComplete:S,onEnter:$,onLeave:g,onEnterBack:E,onLeaveBack:b}=t,z=A&&window.matchMedia("(prefers-reduced-motion: reduce)").matches,F=typeof a=="function"?a:Z[a]??Z["ease-out"],B=$e(i.start??"top bottom"),ee=$e(i.end??"bottom top"),ge=J??e,j=typeof p=="string"?document.querySelector(p):p??null,q=Object.entries(n).map(([s,u])=>({prop:lr(s),from:Array.isArray(u)?u[0]:"",to:Array.isArray(u)?u[1]:u}));function ke(){let s=window.getComputedStyle(e);for(let u of q)u.from===""&&(u.from=s.getPropertyValue(u.prop).trim()||"0")}function N(){for(let s of q)e.style.setProperty(s.prop,String(s.to))}let ye=new Map;for(let s of[...q.map(u=>u.prop),Ot])ye.set(s,e.style.getPropertyValue(s));function Le(){for(let[s,u]of ye)u?e.style.setProperty(s,u):e.style.removeProperty(s)}if(z)return N(),S?.(),{...r,destroy:Le,getProgress:()=>1};ke();let Ce=typeof a=="string"?Ke(a):null;function De(){if(!x||!mr()||!Ce||c!=="y"||j||ge!==e||m||f!==1||Ee||S||$||g||E||b||I!==!1||(i.start??"top bottom").trim()!=="top bottom"||(i.end??"bottom top").trim()!=="bottom top")return!1;for(let s of q)if(!cr.has(s.prop))return!1;return!0}function w(){let s=`ssd-a-${++ur}`,u=q.map(G=>`${G.prop}:${G.from}`).join(";"),oe=q.map(G=>`${G.prop}:${G.to}`).join(";"),k=document.createElement("style");k.setAttribute("data-ssd-animate",""),k.textContent=`@keyframes ${s}{from{${u}}to{${oe}}}.${s}{animation-name:${s};animation-duration:auto;animation-timing-function:${Ce};animation-fill-mode:both;animation-timeline:view();animation-range:cover 0% cover 100%;}`,document.head.appendChild(k),e.classList.add(s);let D=()=>c==="x"?window.scrollX:window.scrollY,O=()=>c==="x"?window.innerWidth:window.innerHeight,pe=()=>{let G=e.getBoundingClientRect();return Fe({top:G.top,height:G.height},D(),O(),B,ee)};Me(e,{type:"animate",getProgress:()=>se.getProgress(),getTrigger:pe});let se={destroy(){e.classList.remove(s),k.remove(),e.style.animationPlayState="",Le(),Pe(e)},replay(){e.classList.remove(s),e.offsetWidth,e.classList.add(s)},pause(){e.style.animationPlayState="paused"},resume(){e.style.animationPlayState=""},seek(G){let _=Math.min(1,Math.max(0,G));e.classList.remove(s);for(let ie of q)e.style.setProperty(ie.prop,It(ie.from,ie.to,_))},getProgress(){let{tStart:G,tEnd:_}=pe();return F(le(D(),G,_,f))}};return se}if(De())return w();let P=0,ne=0,he=0,Ne=!1,be=!1,xe=-1,te=0,me=!1,we=NaN,He=-1,ce=0,ue=()=>j?c==="x"?j.scrollLeft:j.scrollTop:c==="x"?window.scrollX:window.scrollY,Y=()=>j?c==="x"?j.clientWidth:j.clientHeight:c==="x"?window.innerWidth:window.innerHeight;function U(){let s=Qe(ge,j,c),u=Fe(s,s.scroll,Y(),B,ee);P=u.tStart,ne=u.tEnd}function H(s){e.style.setProperty(Ot,String(s));for(let u of q)e.style.setProperty(u.prop,It(u.from,u.to,s));Ee?.(s)}function re(s){if(isNaN(we)){we=s;return}we<=0&&s>0?$?.():we>0&&s<=0&&b?.(),we<1&&s>=1?g?.():we>=1&&s<1&&E?.(),we=s}function W(){if(!Ne||be)return;let s=performance.now(),u=ue(),oe=f;if(I!==!1){let O=s-ce,pe=O>0?Math.abs(u-(He<0?u:He))/O:0;oe=f*Math.max(.2,1+pe*(typeof I=="number"?I:1)*.04)}He=u,ce=s;let k=ne===P?0:(u-P)/(ne-P);re(k);let D=F(le(u,P,ne,oe));m&&(xe=Math.max(xe,D),D=xe),te=D,H(D),D>=1&&!me?(me=!0,S?.()):D<1&&!m&&(me=!1),he=requestAnimationFrame(W)}U(),ne===P&&K("scrollAnimate: the trigger window has zero length (start and end resolve to the same scroll position), so this element will never animate. If the target is inside a position:sticky stage, measure the trigger from the container that holds the scroll room via `triggerElement`.",e);{let s=F(le(ue(),P,ne,f));m&&s>0&&(xe=s),te=s,H(s)}let ve=new IntersectionObserver(s=>{s.forEach(u=>{Ne=u.isIntersecting,Ne&&!be?he=requestAnimationFrame(W):cancelAnimationFrame(he)})},{root:j??null}),C;function T(){clearTimeout(C),C=setTimeout(U,150)}return window.addEventListener("resize",T),window.addEventListener("orientationchange",T),ve.observe(e),Me(e,{type:"animate",getProgress:()=>te,getTrigger:()=>({tStart:P,tEnd:ne})}),{destroy(){cancelAnimationFrame(he),ve.disconnect(),window.removeEventListener("resize",T),window.removeEventListener("orientationchange",T),clearTimeout(C),Le(),Pe(e)},replay(){xe=-1,me=!1,te=0,be=!1,H(0)},pause(){be=!0,cancelAnimationFrame(he)},resume(){be&&(be=!1,Ne&&(he=requestAnimationFrame(W)))},seek(s){let u=Math.min(1,Math.max(0,s));te=u,xe=u,be=!0,cancelAnimationFrame(he),H(u)},getProgress(){return te}}}var et={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function Ft(e,t){if(typeof window>"u")return et;let r=typeof e=="string"?document.querySelector(e):e;return r?Rt(r,t):(K("scrollAnimate: element not found:",e),et)}function Nt(e,t={}){if(typeof window>"u")return et;let r=typeof e=="string"?document.querySelector(e):e;if(!r)return K("scrollParallax: element not found:",e),et;let{speed:n=.3,axis:i="y",easing:a="linear",trigger:f,onProgress:m}=t,c=r.getBoundingClientRect(),p=i==="x"?c.width:c.height,x=n*p;return Rt(r,{props:i==="x"?{transform:["translateX(0px)",`translateX(${-x}px)`]}:{transform:["translateY(0px)",`translateY(${-x}px)`]},trigger:f??{start:"top bottom",end:"bottom top"},easing:a,native:!1,onProgress:m})}var ft={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};function Ht(e,t){if(typeof window>"u")return ft;let r=typeof e=="string"?document.querySelector(e):e;if(!r)return K("scrollCounter: element not found:",e),ft;let n=r,{from:i=0,to:a,format:f,easing:m="ease-out",trigger:c={},once:p=!0,decimals:x,onComplete:I}=t,A=x!==void 0?w=>w.toFixed(x):f??(w=>String(Math.round(w))),J=typeof m=="function"?m:Z[m]??Z["ease-out"],Ee=$e(c.start??"top 80%"),S=$e(c.end??"top 20%");if(window.matchMedia("(prefers-reduced-motion: reduce)").matches)return n.textContent=A(a),I?.(),ft;let g=0,E=0,b=0,z=!1,F=!1,B=-1,ee=0,ge=!1,j=()=>window.scrollY,q=()=>window.innerHeight;function ke(){let w=n.getBoundingClientRect(),P=Fe({top:w.top,height:w.height},j(),q(),Ee,S);g=P.tStart,E=P.tEnd}function N(w){n.textContent=A(i+(a-i)*w),n.style.setProperty("--scroll-draw-progress",String(w))}function ye(){if(!z||F)return;let w=J(le(j(),g,E,1));p&&(B=Math.max(B,w),w=B),ee=w,N(w),w>=1&&!ge?(ge=!0,I?.()):w<1&&!p&&(ge=!1),b=requestAnimationFrame(ye)}ke();{let w=J(le(j(),g,E,1));p&&w>0&&(B=w),ee=w,N(w)}let Le=new IntersectionObserver(w=>{w.forEach(P=>{z=P.isIntersecting,z&&!F?b=requestAnimationFrame(ye):cancelAnimationFrame(b)})}),Ce;function De(){clearTimeout(Ce),Ce=setTimeout(ke,150)}return window.addEventListener("resize",De),window.addEventListener("orientationchange",De),Le.observe(n),Me(n,{type:"counter",getProgress:()=>ee,getTrigger:()=>({tStart:g,tEnd:E})}),{destroy(){cancelAnimationFrame(b),Le.disconnect(),window.removeEventListener("resize",De),window.removeEventListener("orientationchange",De),clearTimeout(Ce),Pe(n)},replay(){B=-1,ge=!1,ee=0,F=!1,N(0)},pause(){F=!0,cancelAnimationFrame(b)},resume(){F&&(F=!1,z&&(b=requestAnimationFrame(ye)))},seek(w){let P=Math.min(1,Math.max(0,w));ee=P,B=P,F=!0,cancelAnimationFrame(b),N(P)},getProgress(){return ee}}}var _t="http://www.w3.org/2000/svg",fr="cinematic-photo",pt=e=>e<0?0:e>1?1:e;function tt(e){let t=parseFloat(e);return Number.isFinite(t)?pt(t/100):0}function pr(e){return Z[e]??Z.linear}var dr={destroy:()=>{},getProgress:()=>0},rt=class{constructor(t){if(typeof document>"u"){this.mount=null;return}this.mount=typeof t.wrapper=="string"?document.querySelector(t.wrapper):t.wrapper,this.mount||K("Cinematic: wrapper not found:",t.wrapper)}loadStory(t){let r=this.mount;if(typeof window>"u"||!r)return dr;r.style.position="relative",r.style.height=t.totalHeight,r.style.display="block";let n=document.createElement("div");n.setAttribute("data-cinematic-stage",""),n.style.cssText="position:sticky;top:0;height:100vh;width:100%;overflow:hidden;display:block;",r.appendChild(n);let i=[];for(let S of t.scenes){if(S.background){let g=document.createElement("img");g.id=fr,g.src=S.background,g.alt="",g.style.cssText="position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;pointer-events:none;",n.appendChild(g)}let $=S.animations.filter(g=>g.type==="draw");if($.length){let g=document.createElementNS(_t,"svg");g.setAttribute("viewBox",`0 0 ${t.canvas.width} ${t.canvas.height}`),g.setAttribute("preserveAspectRatio","xMidYMid meet"),g.style.cssText="position:absolute;inset:0;width:100%;height:100%;overflow:visible;",n.appendChild(g);for(let E of $){let b=document.createElementNS(_t,"path");b.id=E.target.replace(/^#/,""),b.setAttribute("d",E.d),b.setAttribute("fill","none"),b.setAttribute("stroke",E.stroke),b.setAttribute("stroke-width",String(E.strokeWidth)),b.setAttribute("stroke-linecap","round"),b.setAttribute("stroke-linejoin","round");let z=E.length||b.getTotalLength?.()||0;b.style.strokeDasharray=String(z),b.style.strokeDashoffset=String(z),g.appendChild(b),i.push({kind:"draw",el:b,start:tt(E.start),end:tt(E.end),ease:pr(E.easing),length:z})}}for(let g of S.animations){if(g.type!=="fade")continue;let E=n.querySelector(g.target)??document.querySelector(g.target);E&&(E.style.opacity=String(g.from),i.push({kind:"fade",el:E,start:tt(g.start),end:tt(g.end),ease:Z["ease-in-out"]??Z.linear,from:g.from,to:g.to}))}}let a=0,f=()=>{let S=r.offsetHeight-window.innerHeight;return S<=0?r.getBoundingClientRect().top<=0?1:0:pt(-r.getBoundingClientRect().top/S)},m=S=>{for(let $ of i){let g=$.end-$.start,E=g<=0?S>=$.end?1:0:pt((S-$.start)/g),b=$.ease(E);$.kind==="draw"?$.el.style.strokeDashoffset=String($.length*(1-b)):$.el.style.opacity=String($.from+($.to-$.from)*b)}};if(window.matchMedia("(prefers-reduced-motion: reduce)").matches)return m(1),{destroy:()=>{},getProgress:()=>1};let c=0,p=!1,x=!1,I=()=>{a=f(),m(a),p&&(c=requestAnimationFrame(I))},A=()=>{p||(p=!0,c=requestAnimationFrame(I))},J=()=>{p=!1,cancelAnimationFrame(c)},Ee=new IntersectionObserver(S=>{for(let $ of S)x=$.isIntersecting,x?A():J()},{threshold:0});return Ee.observe(n),a=f(),m(a),Me(r,{type:"draw",getProgress:()=>a,getTrigger:()=>{let S=r.getBoundingClientRect().top+window.scrollY;return{tStart:S,tEnd:S+Math.max(0,r.offsetHeight-window.innerHeight)}}}),{destroy(){J(),Ee.disconnect(),Pe(r)},getProgress:()=>a}}};function gr(e,t){let r={destroy:()=>{},replay:()=>{},pause:()=>{},resume:()=>{},seek:()=>{},getProgress:()=>0};if(typeof window>"u")return r;let n=typeof e=="string"?document.querySelector(e):e;return n?Je(n,t):(K("Container not found:",e),r)}if(typeof HTMLElement<"u"&&typeof customElements<"u"&&!customElements.get("scroll-draw")){class e extends HTMLElement{constructor(){super(...arguments);this.instance=null}connectedCallback(){let n={},i=this.getAttribute("speed"),a=this.getAttribute("easing"),f=this.getAttribute("stagger"),m=this.getAttribute("direction"),c=this.getAttribute("selector");i&&(n.speed=parseFloat(i)),a&&(n.easing=a),f&&(n.stagger=parseFloat(f)),m&&(n.direction=m),c&&(n.selector=c),this.hasAttribute("fade")&&(n.fade=this.getAttribute("fade")!=="false"),this.instance=Je(this,n)}disconnectedCallback(){this.instance?.destroy(),this.instance=null}}customElements.define("scroll-draw",e)}return Xt(yr);})();

package/dist/cinematic/index.cjs

@@ -1,2 +1,2 @@
-'use strict';function I({bounces:e=3,decay:o=.5}={}){let s=Math.max(1,Math.round(e)),a=Math.max(.01,Math.min(.99,o)),d=Math.sqrt(a),m=0,h=[];for(let n=0;n<s;n++){let u=Math.pow(d,n);h.push(u),m+=u;}let l=[0],b=0;for(let n=0;n<s;n++)b+=h[n]/m,l.push(b);return n=>{if(n<=0)return 0;if(n>=1)return 1;for(let u=0;u<s;u++)if(n<=l[u+1]){let f=(n-l[u])/(l[u+1]-l[u]);if(u===0)return f*(2-f);let w=1-Math.pow(a,u);return w+(1-w)*(2*f-1)*(2*f-1)}return 1}}function k({amplitude:e=1,period:o=.4}={}){let s=Math.max(1,e),a=Math.max(.1,o),d=s<=1?a/4:a/(2*Math.PI)*Math.asin(1/s);return m=>m<=0?0:m>=1?1:s*Math.pow(2,-10*m)*Math.sin((m-d)*(2*Math.PI)/a)+1}var g={linear:e=>e,"ease-in":e=>e*e,"ease-out":e=>e*(2-e),"ease-in-out":e=>e<.5?2*e*e:-1+(4-2*e)*e,spring:e=>1-Math.cos(e*Math.PI*2.5)*Math.pow(1-e,2.2),bounce:I(),elastic:k()};var A="http://www.w3.org/2000/svg",T="cinematic-photo",S=e=>e<0?0:e>1?1:e;function y(e){let o=parseFloat(e);return Number.isFinite(o)?S(o/100):0}function P(e){return g[e]??g.linear}var C={destroy:()=>{},getProgress:()=>0},E=class{constructor(o){if(typeof document>"u"){this.mount=null;return}this.mount=typeof o.wrapper=="string"?document.querySelector(o.wrapper):o.wrapper,!this.mount&&process.env.NODE_ENV!=="production"&&console.warn("[svg-scroll-draw] Cinematic: wrapper not found:",o.wrapper);}loadStory(o){let s=this.mount;if(typeof window>"u"||!s)return C;s.style.position="relative",s.style.height=o.totalHeight,s.style.display="block";let a=document.createElement("div");a.setAttribute("data-cinematic-stage",""),a.style.cssText="position:sticky;top:0;height:100vh;width:100%;overflow:hidden;display:block;",s.appendChild(a);let d=[];for(let p of o.scenes){if(p.background){let t=document.createElement("img");t.id=T,t.src=p.background,t.alt="",t.style.cssText="position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;pointer-events:none;",a.appendChild(t);}let r=p.animations.filter(t=>t.type==="draw");if(r.length){let t=document.createElementNS(A,"svg");t.setAttribute("viewBox",`0 0 ${o.canvas.width} ${o.canvas.height}`),t.setAttribute("preserveAspectRatio","xMidYMid meet"),t.style.cssText="position:absolute;inset:0;width:100%;height:100%;overflow:visible;",a.appendChild(t);for(let c of r){let i=document.createElementNS(A,"path");i.id=c.target.replace(/^#/,""),i.setAttribute("d",c.d),i.setAttribute("fill","none"),i.setAttribute("stroke",c.stroke),i.setAttribute("stroke-width",String(c.strokeWidth)),i.setAttribute("stroke-linecap","round"),i.setAttribute("stroke-linejoin","round");let M=c.length||i.getTotalLength?.()||0;i.style.strokeDasharray=String(M),i.style.strokeDashoffset=String(M),t.appendChild(i),d.push({kind:"draw",el:i,start:y(c.start),end:y(c.end),ease:P(c.easing),length:M});}}for(let t of p.animations){if(t.type!=="fade")continue;let c=a.querySelector(t.target)??document.querySelector(t.target);c&&(c.style.opacity=String(t.from),d.push({kind:"fade",el:c,start:y(t.start),end:y(t.end),ease:g["ease-in-out"]??g.linear,from:t.from,to:t.to}));}}let m=0,h=()=>{let p=s.offsetHeight-window.innerHeight;return p<=0?s.getBoundingClientRect().top<=0?1:0:S(-s.getBoundingClientRect().top/p)},l=p=>{for(let r of d){let t=r.end-r.start,c=t<=0?p>=r.end?1:0:S((p-r.start)/t),i=r.ease(c);r.kind==="draw"?r.el.style.strokeDashoffset=String(r.length*(1-i)):r.el.style.opacity=String(r.from+(r.to-r.from)*i);}};if(window.matchMedia("(prefers-reduced-motion: reduce)").matches)return l(1),{destroy:()=>{},getProgress:()=>1};let b=0,n=false,u=false,f=()=>{m=h(),l(m),n&&(b=requestAnimationFrame(f));},w=()=>{n||(n=true,b=requestAnimationFrame(f));},x=()=>{n=false,cancelAnimationFrame(b);},v=new IntersectionObserver(p=>{for(let r of p)u=r.isIntersecting,u?w():x();},{threshold:0});return v.observe(a),m=h(),l(m),{destroy(){x(),v.disconnect();},getProgress:()=>m}}};
-exports.Cinematic=E;
+'use strict';function C({bounces:e=3,decay:n=.5}={}){let r=Math.max(1,Math.round(e)),u=Math.max(.01,Math.min(.99,n)),d=Math.sqrt(u),c=0,b=[];for(let o=0;o<r;o++){let m=Math.pow(d,o);b.push(m),c+=m;}let l=[0],f=0;for(let o=0;o<r;o++)f+=b[o]/c,l.push(f);return o=>{if(o<=0)return 0;if(o>=1)return 1;for(let m=0;m<r;m++)if(o<=l[m+1]){let g=(o-l[m])/(l[m+1]-l[m]);if(m===0)return g*(2-g);let y=1-Math.pow(u,m);return y+(1-y)*(2*g-1)*(2*g-1)}return 1}}function L({amplitude:e=1,period:n=.4}={}){let r=Math.max(1,e),u=Math.max(.1,n),d=r<=1?u/4:u/(2*Math.PI)*Math.asin(1/r);return c=>c<=0?0:c>=1?1:r*Math.pow(2,-10*c)*Math.sin((c-d)*(2*Math.PI)/u)+1}var h={linear:e=>e,"ease-in":e=>e*e,"ease-out":e=>e*(2-e),"ease-in-out":e=>e<.5?2*e*e:-1+(4-2*e)*e,spring:e=>1-Math.cos(e*Math.PI*2.5)*Math.pow(1-e,2.2),bounce:C(),elastic:L()};var P=typeof __SVG_SCROLL_DRAW_DEV__<"u"?__SVG_SCROLL_DRAW_DEV__:typeof process<"u"&&typeof process.env<"u"&&process.env.NODE_ENV!=="production";function v(e,...n){P&&console.warn(`[svg-scroll-draw] ${e}`,...n);}var A=Symbol.for("svg-scroll-draw.registry");function _(){let e=globalThis;return e[A]||(e[A]=new Map)}function I(e,n){_().set(e,n);}function R(e){_().delete(e);}var k="http://www.w3.org/2000/svg",D="cinematic-photo",x=e=>e<0?0:e>1?1:e;function w(e){let n=parseFloat(e);return Number.isFinite(n)?x(n/100):0}function V(e){return h[e]??h.linear}var F={destroy:()=>{},getProgress:()=>0},T=class{constructor(n){if(typeof document>"u"){this.mount=null;return}this.mount=typeof n.wrapper=="string"?document.querySelector(n.wrapper):n.wrapper,this.mount||v("Cinematic: wrapper not found:",n.wrapper);}loadStory(n){let r=this.mount;if(typeof window>"u"||!r)return F;r.style.position="relative",r.style.height=n.totalHeight,r.style.display="block";let u=document.createElement("div");u.setAttribute("data-cinematic-stage",""),u.style.cssText="position:sticky;top:0;height:100vh;width:100%;overflow:hidden;display:block;",r.appendChild(u);let d=[];for(let s of n.scenes){if(s.background){let t=document.createElement("img");t.id=D,t.src=s.background,t.alt="",t.style.cssText="position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;pointer-events:none;",u.appendChild(t);}let i=s.animations.filter(t=>t.type==="draw");if(i.length){let t=document.createElementNS(k,"svg");t.setAttribute("viewBox",`0 0 ${n.canvas.width} ${n.canvas.height}`),t.setAttribute("preserveAspectRatio","xMidYMid meet"),t.style.cssText="position:absolute;inset:0;width:100%;height:100%;overflow:visible;",u.appendChild(t);for(let p of i){let a=document.createElementNS(k,"path");a.id=p.target.replace(/^#/,""),a.setAttribute("d",p.d),a.setAttribute("fill","none"),a.setAttribute("stroke",p.stroke),a.setAttribute("stroke-width",String(p.strokeWidth)),a.setAttribute("stroke-linecap","round"),a.setAttribute("stroke-linejoin","round");let S=p.length||a.getTotalLength?.()||0;a.style.strokeDasharray=String(S),a.style.strokeDashoffset=String(S),t.appendChild(a),d.push({kind:"draw",el:a,start:w(p.start),end:w(p.end),ease:V(p.easing),length:S});}}for(let t of s.animations){if(t.type!=="fade")continue;let p=u.querySelector(t.target)??document.querySelector(t.target);p&&(p.style.opacity=String(t.from),d.push({kind:"fade",el:p,start:w(t.start),end:w(t.end),ease:h["ease-in-out"]??h.linear,from:t.from,to:t.to}));}}let c=0,b=()=>{let s=r.offsetHeight-window.innerHeight;return s<=0?r.getBoundingClientRect().top<=0?1:0:x(-r.getBoundingClientRect().top/s)},l=s=>{for(let i of d){let t=i.end-i.start,p=t<=0?s>=i.end?1:0:x((s-i.start)/t),a=i.ease(p);i.kind==="draw"?i.el.style.strokeDashoffset=String(i.length*(1-a)):i.el.style.opacity=String(i.from+(i.to-i.from)*a);}};if(window.matchMedia("(prefers-reduced-motion: reduce)").matches)return l(1),{destroy:()=>{},getProgress:()=>1};let f=0,o=false,m=false,g=()=>{c=b(),l(c),o&&(f=requestAnimationFrame(g));},y=()=>{o||(o=true,f=requestAnimationFrame(g));},E=()=>{o=false,cancelAnimationFrame(f);},M=new IntersectionObserver(s=>{for(let i of s)m=i.isIntersecting,m?y():E();},{threshold:0});return M.observe(u),c=b(),l(c),I(r,{type:"draw",getProgress:()=>c,getTrigger:()=>{let s=r.getBoundingClientRect().top+window.scrollY;return {tStart:s,tEnd:s+Math.max(0,r.offsetHeight-window.innerHeight)}}}),{destroy(){E(),M.disconnect(),R(r);},getProgress:()=>c}}};
+exports.Cinematic=T;

package/dist/cinematic/index.mjs

@@ -1,2 +1,2 @@
-function I({bounces:e=3,decay:o=.5}={}){let s=Math.max(1,Math.round(e)),a=Math.max(.01,Math.min(.99,o)),d=Math.sqrt(a),m=0,h=[];for(let n=0;n<s;n++){let u=Math.pow(d,n);h.push(u),m+=u;}let l=[0],b=0;for(let n=0;n<s;n++)b+=h[n]/m,l.push(b);return n=>{if(n<=0)return 0;if(n>=1)return 1;for(let u=0;u<s;u++)if(n<=l[u+1]){let f=(n-l[u])/(l[u+1]-l[u]);if(u===0)return f*(2-f);let w=1-Math.pow(a,u);return w+(1-w)*(2*f-1)*(2*f-1)}return 1}}function k({amplitude:e=1,period:o=.4}={}){let s=Math.max(1,e),a=Math.max(.1,o),d=s<=1?a/4:a/(2*Math.PI)*Math.asin(1/s);return m=>m<=0?0:m>=1?1:s*Math.pow(2,-10*m)*Math.sin((m-d)*(2*Math.PI)/a)+1}var g={linear:e=>e,"ease-in":e=>e*e,"ease-out":e=>e*(2-e),"ease-in-out":e=>e<.5?2*e*e:-1+(4-2*e)*e,spring:e=>1-Math.cos(e*Math.PI*2.5)*Math.pow(1-e,2.2),bounce:I(),elastic:k()};var A="http://www.w3.org/2000/svg",T="cinematic-photo",S=e=>e<0?0:e>1?1:e;function y(e){let o=parseFloat(e);return Number.isFinite(o)?S(o/100):0}function P(e){return g[e]??g.linear}var C={destroy:()=>{},getProgress:()=>0},E=class{constructor(o){if(typeof document>"u"){this.mount=null;return}this.mount=typeof o.wrapper=="string"?document.querySelector(o.wrapper):o.wrapper,!this.mount&&process.env.NODE_ENV!=="production"&&console.warn("[svg-scroll-draw] Cinematic: wrapper not found:",o.wrapper);}loadStory(o){let s=this.mount;if(typeof window>"u"||!s)return C;s.style.position="relative",s.style.height=o.totalHeight,s.style.display="block";let a=document.createElement("div");a.setAttribute("data-cinematic-stage",""),a.style.cssText="position:sticky;top:0;height:100vh;width:100%;overflow:hidden;display:block;",s.appendChild(a);let d=[];for(let p of o.scenes){if(p.background){let t=document.createElement("img");t.id=T,t.src=p.background,t.alt="",t.style.cssText="position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;pointer-events:none;",a.appendChild(t);}let r=p.animations.filter(t=>t.type==="draw");if(r.length){let t=document.createElementNS(A,"svg");t.setAttribute("viewBox",`0 0 ${o.canvas.width} ${o.canvas.height}`),t.setAttribute("preserveAspectRatio","xMidYMid meet"),t.style.cssText="position:absolute;inset:0;width:100%;height:100%;overflow:visible;",a.appendChild(t);for(let c of r){let i=document.createElementNS(A,"path");i.id=c.target.replace(/^#/,""),i.setAttribute("d",c.d),i.setAttribute("fill","none"),i.setAttribute("stroke",c.stroke),i.setAttribute("stroke-width",String(c.strokeWidth)),i.setAttribute("stroke-linecap","round"),i.setAttribute("stroke-linejoin","round");let M=c.length||i.getTotalLength?.()||0;i.style.strokeDasharray=String(M),i.style.strokeDashoffset=String(M),t.appendChild(i),d.push({kind:"draw",el:i,start:y(c.start),end:y(c.end),ease:P(c.easing),length:M});}}for(let t of p.animations){if(t.type!=="fade")continue;let c=a.querySelector(t.target)??document.querySelector(t.target);c&&(c.style.opacity=String(t.from),d.push({kind:"fade",el:c,start:y(t.start),end:y(t.end),ease:g["ease-in-out"]??g.linear,from:t.from,to:t.to}));}}let m=0,h=()=>{let p=s.offsetHeight-window.innerHeight;return p<=0?s.getBoundingClientRect().top<=0?1:0:S(-s.getBoundingClientRect().top/p)},l=p=>{for(let r of d){let t=r.end-r.start,c=t<=0?p>=r.end?1:0:S((p-r.start)/t),i=r.ease(c);r.kind==="draw"?r.el.style.strokeDashoffset=String(r.length*(1-i)):r.el.style.opacity=String(r.from+(r.to-r.from)*i);}};if(window.matchMedia("(prefers-reduced-motion: reduce)").matches)return l(1),{destroy:()=>{},getProgress:()=>1};let b=0,n=false,u=false,f=()=>{m=h(),l(m),n&&(b=requestAnimationFrame(f));},w=()=>{n||(n=true,b=requestAnimationFrame(f));},x=()=>{n=false,cancelAnimationFrame(b);},v=new IntersectionObserver(p=>{for(let r of p)u=r.isIntersecting,u?w():x();},{threshold:0});return v.observe(a),m=h(),l(m),{destroy(){x(),v.disconnect();},getProgress:()=>m}}};
-export{E as Cinematic};
+function C({bounces:e=3,decay:n=.5}={}){let r=Math.max(1,Math.round(e)),u=Math.max(.01,Math.min(.99,n)),d=Math.sqrt(u),c=0,b=[];for(let o=0;o<r;o++){let m=Math.pow(d,o);b.push(m),c+=m;}let l=[0],f=0;for(let o=0;o<r;o++)f+=b[o]/c,l.push(f);return o=>{if(o<=0)return 0;if(o>=1)return 1;for(let m=0;m<r;m++)if(o<=l[m+1]){let g=(o-l[m])/(l[m+1]-l[m]);if(m===0)return g*(2-g);let y=1-Math.pow(u,m);return y+(1-y)*(2*g-1)*(2*g-1)}return 1}}function L({amplitude:e=1,period:n=.4}={}){let r=Math.max(1,e),u=Math.max(.1,n),d=r<=1?u/4:u/(2*Math.PI)*Math.asin(1/r);return c=>c<=0?0:c>=1?1:r*Math.pow(2,-10*c)*Math.sin((c-d)*(2*Math.PI)/u)+1}var h={linear:e=>e,"ease-in":e=>e*e,"ease-out":e=>e*(2-e),"ease-in-out":e=>e<.5?2*e*e:-1+(4-2*e)*e,spring:e=>1-Math.cos(e*Math.PI*2.5)*Math.pow(1-e,2.2),bounce:C(),elastic:L()};var P=typeof __SVG_SCROLL_DRAW_DEV__<"u"?__SVG_SCROLL_DRAW_DEV__:typeof process<"u"&&typeof process.env<"u"&&process.env.NODE_ENV!=="production";function v(e,...n){P&&console.warn(`[svg-scroll-draw] ${e}`,...n);}var A=Symbol.for("svg-scroll-draw.registry");function _(){let e=globalThis;return e[A]||(e[A]=new Map)}function I(e,n){_().set(e,n);}function R(e){_().delete(e);}var k="http://www.w3.org/2000/svg",D="cinematic-photo",x=e=>e<0?0:e>1?1:e;function w(e){let n=parseFloat(e);return Number.isFinite(n)?x(n/100):0}function V(e){return h[e]??h.linear}var F={destroy:()=>{},getProgress:()=>0},T=class{constructor(n){if(typeof document>"u"){this.mount=null;return}this.mount=typeof n.wrapper=="string"?document.querySelector(n.wrapper):n.wrapper,this.mount||v("Cinematic: wrapper not found:",n.wrapper);}loadStory(n){let r=this.mount;if(typeof window>"u"||!r)return F;r.style.position="relative",r.style.height=n.totalHeight,r.style.display="block";let u=document.createElement("div");u.setAttribute("data-cinematic-stage",""),u.style.cssText="position:sticky;top:0;height:100vh;width:100%;overflow:hidden;display:block;",r.appendChild(u);let d=[];for(let s of n.scenes){if(s.background){let t=document.createElement("img");t.id=D,t.src=s.background,t.alt="",t.style.cssText="position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;pointer-events:none;",u.appendChild(t);}let i=s.animations.filter(t=>t.type==="draw");if(i.length){let t=document.createElementNS(k,"svg");t.setAttribute("viewBox",`0 0 ${n.canvas.width} ${n.canvas.height}`),t.setAttribute("preserveAspectRatio","xMidYMid meet"),t.style.cssText="position:absolute;inset:0;width:100%;height:100%;overflow:visible;",u.appendChild(t);for(let p of i){let a=document.createElementNS(k,"path");a.id=p.target.replace(/^#/,""),a.setAttribute("d",p.d),a.setAttribute("fill","none"),a.setAttribute("stroke",p.stroke),a.setAttribute("stroke-width",String(p.strokeWidth)),a.setAttribute("stroke-linecap","round"),a.setAttribute("stroke-linejoin","round");let S=p.length||a.getTotalLength?.()||0;a.style.strokeDasharray=String(S),a.style.strokeDashoffset=String(S),t.appendChild(a),d.push({kind:"draw",el:a,start:w(p.start),end:w(p.end),ease:V(p.easing),length:S});}}for(let t of s.animations){if(t.type!=="fade")continue;let p=u.querySelector(t.target)??document.querySelector(t.target);p&&(p.style.opacity=String(t.from),d.push({kind:"fade",el:p,start:w(t.start),end:w(t.end),ease:h["ease-in-out"]??h.linear,from:t.from,to:t.to}));}}let c=0,b=()=>{let s=r.offsetHeight-window.innerHeight;return s<=0?r.getBoundingClientRect().top<=0?1:0:x(-r.getBoundingClientRect().top/s)},l=s=>{for(let i of d){let t=i.end-i.start,p=t<=0?s>=i.end?1:0:x((s-i.start)/t),a=i.ease(p);i.kind==="draw"?i.el.style.strokeDashoffset=String(i.length*(1-a)):i.el.style.opacity=String(i.from+(i.to-i.from)*a);}};if(window.matchMedia("(prefers-reduced-motion: reduce)").matches)return l(1),{destroy:()=>{},getProgress:()=>1};let f=0,o=false,m=false,g=()=>{c=b(),l(c),o&&(f=requestAnimationFrame(g));},y=()=>{o||(o=true,f=requestAnimationFrame(g));},E=()=>{o=false,cancelAnimationFrame(f);},M=new IntersectionObserver(s=>{for(let i of s)m=i.isIntersecting,m?y():E();},{threshold:0});return M.observe(u),c=b(),l(c),I(r,{type:"draw",getProgress:()=>c,getTrigger:()=>{let s=r.getBoundingClientRect().top+window.scrollY;return {tStart:s,tEnd:s+Math.max(0,r.offsetHeight-window.innerHeight)}}}),{destroy(){E(),M.disconnect(),R(r);},getProgress:()=>c}}};
+export{T as Cinematic};

package/dist/cli/init.js

@@ -27,41 +27,30 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var readline = __toESM(require("readline"));
 var fs = __toESM(require("fs"));
 var path = __toESM(require("path"));
-var RESET = "\x1B[0m";
-var BOLD = "\x1B[1m";
-var DIM = "\x1B[2m";
-var PINK = "\x1B[35m";
-var GREEN = "\x1B[32m";
-var CYAN = "\x1B[36m";
-var rl = readline.createInterface({ input: process.stdin, output: process.stdout });
-function ask(question, fallback) {
-  return new Promise(
-    (resolve) => rl.question(`  ${CYAN}?${RESET} ${question} ${DIM}(${fallback})${RESET} `, (ans) => {
-      resolve(ans.trim() || fallback);
-    })
-  );
-}
-function pick(question, options, fallback) {
-  const opts = options.map((o, i) => `${DIM}${i + 1})${RESET} ${o}`).join("  ");
-  return new Promise(
-    (resolve) => rl.question(`  ${CYAN}?${RESET} ${question}
-     ${opts}
-     ${DIM}(${fallback})${RESET} `, (ans) => {
-      const idx = parseInt(ans) - 1;
-      resolve(idx >= 0 && idx < options.length ? options[idx] : fallback);
-    })
-  );
+
+// src/cli/generators.ts
+var SAMPLE_SVG_JSX = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100">
+        <path
+          d="M10 50 C 40 10, 80 10, 100 50 S 160 90, 190 50"
+          stroke="currentColor"
+          strokeWidth="2.5"
+          strokeLinecap="round"
+          fill="none"
+        />
+      </svg>`;
+var SAMPLE_SVG_HTML = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100">
+      <path
+        d="M10 50 C 40 10, 80 10, 100 50 S 160 90, 190 50"
+        stroke="currentColor"
+        stroke-width="2.5"
+        stroke-linecap="round"
+        fill="none"
+      />
+    </svg>`;
+function optionsBody({ easing, preset }) {
+  return preset !== "none" ? `preset: '${preset}'` : `easing: '${easing}', fade: true, once: true`;
 }
-var SAMPLE_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100">
-    <path
-      d="M10 50 C 40 10, 80 10, 100 50 S 160 90, 190 50"
-      stroke="currentColor"
-      strokeWidth="2.5"
-      strokeLinecap="round"
-      fill="none"
-    />
-  </svg>`;
-function genReact(selector, easing, preset) {
+var genReact = ({ easing, preset }) => {
   const presetProp = preset !== "none" ? `
       preset="${preset}"` : "";
   const easingProp = preset !== "none" ? "" : `
@@ -75,68 +64,59 @@ export function AnimatedSVG() {
       fade
       once
     >
-      ${SAMPLE_SVG}
+      ${SAMPLE_SVG_JSX}
     </ScrollDraw>
   );
 }
 `;
-}
-function genVue(selector, easing, preset) {
-  const opts = preset !== "none" ? `preset: '${preset}'` : `easing: '${easing}', fade: true, once: true`;
-  return `<script setup>
+};
+var genVue = (opts) => `<script setup>
 import { useScrollDraw } from 'svg-scroll-draw/vue';
 
 const { ref } = useScrollDraw({
-  ${opts},
+  ${optionsBody(opts)},
 });
 </script>
 
 <template>
   <div :ref="ref">
-    ${SAMPLE_SVG}
+    ${SAMPLE_SVG_HTML}
   </div>
 </template>
 `;
-}
-function genSvelte(selector, easing, preset) {
-  const opts = preset !== "none" ? `{ preset: '${preset}' }` : `{ easing: '${easing}', fade: true, once: true }`;
-  return `<script>
+var genSvelte = (opts) => `<script>
   import { scrollDraw } from 'svg-scroll-draw/svelte';
 </script>
 
-<div use:scrollDraw={${opts}}>
-  ${SAMPLE_SVG}
+<div use:scrollDraw={{ ${optionsBody(opts)} }}>
+  ${SAMPLE_SVG_HTML}
 </div>
 `;
-}
-function genSolid(selector, easing, preset) {
-  const opts = preset !== "none" ? `preset: '${preset}'` : `easing: '${easing}', fade: true, once: true`;
-  return `import { createScrollDraw } from 'svg-scroll-draw/solid';
+var genSolid = (opts) => `import { createScrollDraw } from 'svg-scroll-draw/solid';
 
 export function AnimatedSVG() {
   const { ref } = createScrollDraw({
-    ${opts},
+    ${optionsBody(opts)},
   });
 
   return (
     <div ref={ref}>
-      ${SAMPLE_SVG}
+      ${SAMPLE_SVG_JSX}
     </div>
   );
 }
 `;
-}
-function genVanilla(selector, easing, preset) {
-  const opts = preset !== "none" ? `preset: '${preset}'` : `easing: '${easing}',
+var genVanilla = (opts) => {
+  const body = opts.preset !== "none" ? `preset: '${opts.preset}'` : `easing: '${opts.easing}',
   fade: true,
   once: true`;
   return `import { scrollDraw } from 'svg-scroll-draw';
 
-scrollDraw('${selector}', {
-  ${opts},
+scrollDraw('${opts.selector}', {
+  ${body},
 });
 `;
-}
+};
 var GENERATORS = {
   react: genReact,
   vue: genVue,
@@ -151,59 +131,82 @@ var FILE_NAMES = {
   solid: "ScrollDraw.tsx",
   vanilla: "scroll-draw.js"
 };
+var FRAMEWORKS = Object.keys(GENERATORS);
+var PRESETS = ["none", "sketch", "reveal", "typewriter", "cinematic", "spring"];
+var EASINGS = ["ease-out", "ease-in", "ease-in-out", "linear", "spring", "bounce"];
+function needsSelector(framework) {
+  return framework === "vanilla";
+}
+
+// src/cli/init.ts
+var RESET = "\x1B[0m";
+var BOLD = "\x1B[1m";
+var DIM = "\x1B[2m";
+var PINK = "\x1B[35m";
+var GREEN = "\x1B[32m";
+var CYAN = "\x1B[36m";
+function ask(rl, question, fallback) {
+  return new Promise(
+    (resolve) => rl.question(`  ${CYAN}?${RESET} ${question} ${DIM}(${fallback})${RESET} `, (ans) => {
+      resolve(ans.trim() || fallback);
+    })
+  );
+}
+function pick(rl, question, options, fallback) {
+  const opts = options.map((o, i) => `${DIM}${i + 1})${RESET} ${o}`).join("  ");
+  return new Promise(
+    (resolve) => rl.question(`  ${CYAN}?${RESET} ${question}
+     ${opts}
+     ${DIM}(${fallback})${RESET} `, (ans) => {
+      const idx = parseInt(ans) - 1;
+      resolve(idx >= 0 && idx < options.length ? options[idx] : fallback);
+    })
+  );
+}
 async function main() {
-  console.log(`
+  const rl = readline.createInterface({ input: process.stdin, output: process.stdout });
+  try {
+    console.log(`
  ${BOLD}${PINK}svg-scroll-draw${RESET} ${DIM}init${RESET}
 `);
-  console.log(` ${DIM}Generates a starter file for your framework.${RESET}
+    console.log(` ${DIM}Generates a starter file for your framework.${RESET}
 `);
-  const framework = await pick(
-    "Framework?",
-    ["react", "vue", "svelte", "solid", "vanilla"],
-    "react"
-  );
-  const preset = await pick(
-    "Preset?",
-    ["none", "sketch", "reveal", "typewriter", "cinematic", "spring"],
-    "none"
-  );
-  let easing = "ease-out";
-  if (preset === "none") {
-    easing = await pick(
-      "Easing?",
-      ["ease-out", "ease-in", "ease-in-out", "linear", "spring", "bounce"],
-      "ease-out"
-    );
-  }
-  const selector = await ask("CSS selector for your SVG container?", "#my-svg");
-  const outFile = FILE_NAMES[framework] ?? "scroll-draw.js";
-  const outPath = path.join(process.cwd(), outFile);
-  if (fs.existsSync(outPath)) {
-    const overwrite = await ask(`${outFile} already exists. Overwrite?`, "y");
-    if (overwrite.toLowerCase() !== "y") {
-      console.log(`
+    const framework = await pick(rl, "Framework?", FRAMEWORKS, "react");
+    const preset = await pick(rl, "Preset?", PRESETS, "none");
+    let easing = "ease-out";
+    if (preset === "none") {
+      easing = await pick(rl, "Easing?", EASINGS, "ease-out");
+    }
+    const selector = needsSelector(framework) ? await ask(rl, "CSS selector for your SVG container?", "#my-svg") : "#my-svg";
+    const outFile = FILE_NAMES[framework] ?? "scroll-draw.js";
+    const outPath = path.join(process.cwd(), outFile);
+    if (fs.existsSync(outPath)) {
+      const overwrite = await ask(rl, `${outFile} already exists. Overwrite?`, "y");
+      if (overwrite.toLowerCase() !== "y") {
+        console.log(`
  ${DIM}Aborted.${RESET}
 `);
-      rl.close();
-      return;
+        return;
+      }
     }
-  }
-  const code = GENERATORS[framework]?.(selector, easing, preset) ?? "";
-  fs.writeFileSync(outPath, code, "utf8");
-  console.log(`
+    const code = GENERATORS[framework]?.({ selector, easing, preset }) ?? "";
+    fs.writeFileSync(outPath, code, "utf8");
+    console.log(`
  ${GREEN}\u2713${RESET} ${BOLD}${outFile}${RESET} created.
 `);
-  console.log(` ${DIM}Next steps:${RESET}`);
-  console.log(`   npm i svg-scroll-draw`);
-  if (framework === "vanilla") {
-    console.log(`   Add your SVG to the DOM and call scrollDraw('${selector}', ...)`);
-  } else {
-    console.log(`   Import ${outFile.replace(/\.\w+$/, "")} and drop it into your page.`);
-  }
-  console.log(`
+    console.log(` ${DIM}Next steps:${RESET}`);
+    console.log(`   npm i svg-scroll-draw`);
+    if (framework === "vanilla") {
+      console.log(`   Add your SVG to the DOM and call scrollDraw('${selector}', ...)`);
+    } else {
+      console.log(`   Import ${outFile.replace(/\.\w+$/, "")} and drop it into your page.`);
+    }
+    console.log(`
    ${DIM}Docs: https://svg-scroll-draw.vercel.app/docs${RESET}
 `);
-  rl.close();
+  } finally {
+    rl.close();
+  }
 }
 main().catch((e) => {
   console.error(e);

package/dist/devtools/index.cjs

@@ -1 +1 @@
-'use strict';var C=new Map;function x(){return C}var v={draw:"#60a5fa",animate:"#4ade80",counter:"#fbbf24",video:"#c084fc",text:"#fb923c",pin:"#f43f5e",snap:"#22d3ee"},n=null,o=null,b=0,p=false,m=null;function L(){o?.remove(),o=document.createElement("div"),o.setAttribute("data-ssd-devtools-overlay",""),o.style.cssText="position:fixed;pointer-events:none;z-index:99998;inset:0;overflow:hidden;",document.body.appendChild(o);}function $(){if(!o)return;o.innerHTML="";let e=window.scrollY,l=window.innerHeight;for(let[,t]of x()){let{tStart:i,tEnd:r}=t.getTrigger(),d=v[t.type]??"#60a5fa",f=i-e,s=r-e;if(s<-100||f>l+100)continue;let c=(u,y)=>{let a=document.createElement("div");a.style.cssText=`position:absolute;left:0;right:0;top:${u}px;height:2px;background:${d};opacity:0.85;`;let g=document.createElement("span");return g.textContent=y,g.style.cssText=`position:absolute;right:8px;top:-18px;font:bold 9px/1 monospace;color:#fff;background:${d};padding:2px 5px;border-radius:3px;white-space:nowrap;`,a.appendChild(g),a};o.appendChild(c(f,`\u25B6 ${t.type}:start`)),o.appendChild(c(s,`\u25A0 ${t.type}:end`));}}function M(){n?.remove(),n=document.createElement("div"),n.setAttribute("data-ssd-devtools-panel",""),n.style.cssText="position:fixed;bottom:12px;right:12px;z-index:99999;background:rgba(10,10,10,0.92);color:#e8e8e3;border-radius:10px;border:1px solid #333;font:12px/1.5 monospace;padding:10px 14px;min-width:220px;max-width:280px;pointer-events:none;backdrop-filter:blur(4px);";let e=document.createElement("div");e.style.cssText="font-weight:bold;font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:#888;margin-bottom:8px;",e.textContent="\u26A1 svg-scroll-draw devtools",n.appendChild(e),document.body.appendChild(n);}function k(){if(!n)return;for(;n.children.length>1;)n.removeChild(n.lastChild);let e=x();if(e.size===0){let t=document.createElement("div");t.style.cssText="color:#555;font-size:11px;",t.textContent="No active instances.",n.appendChild(t);return}for(let[t,i]of e){let r=i.getProgress(),d=v[i.type]??"#60a5fa",f=t.id?`#${t.id}`:t.className?`.${t.className.split(" ")[0]}`:i.type,s=document.createElement("div");s.style.cssText="margin-bottom:6px;";let c=document.createElement("div");c.style.cssText=`font-size:10px;color:${d};margin-bottom:2px;`,c.textContent=`${i.type} ${f}`;let u=document.createElement("div");u.style.cssText="height:6px;background:#222;border-radius:3px;overflow:hidden;";let y=document.createElement("div");y.style.cssText=`height:100%;width:${Math.round(r*100)}%;background:${d};border-radius:3px;transition:width 0.1s;`,u.appendChild(y),s.appendChild(c),s.appendChild(u);let a=document.createElement("div");a.style.cssText="font-size:9px;color:#555;text-align:right;margin-top:1px;",a.textContent=`${Math.round(r*100)}%`,s.appendChild(a),n.appendChild(s);}}function h(){$(),k(),b=requestAnimationFrame(h);}function E(){process.env.NODE_ENV!=="production"&&(p||(p=true,L(),M(),b=requestAnimationFrame(h),m=e=>{(e.metaKey||e.ctrlKey)&&e.shiftKey&&e.key.toLowerCase()==="s"&&(e.preventDefault(),w());},window.addEventListener("keydown",m)));}function T(){p&&(p=false,cancelAnimationFrame(b),n?.remove(),n=null,o?.remove(),o=null,m&&(window.removeEventListener("keydown",m),m=null));}function w(){p?T():E();}function H(e){if(!p)return;let l=typeof e=="string"?document.querySelector(e):e;if(!l)return;let t=x().get(l);if(!t)return;let i=v[t.type]??"#60a5fa",r=l,d=r.style.outline;r.style.outline=`2px solid ${i}`,r.style.outlineOffset="2px",setTimeout(()=>{r.style.outline=d,r.style.outlineOffset="";},2e3);}var _={enable:E,disable:T,toggle:w,highlight:H};exports.devtools=_;
+'use strict';var E=Symbol.for("svg-scroll-draw.registry");function L(){let e=globalThis;return e[E]||(e[E]=new Map)}function g(){return L()}var h=typeof __SVG_SCROLL_DRAW_DEV__<"u"?__SVG_SCROLL_DRAW_DEV__:typeof process<"u"&&typeof process.env<"u"&&process.env.NODE_ENV!=="production";var v={draw:"#60a5fa",animate:"#4ade80",counter:"#fbbf24",video:"#c084fc",text:"#fb923c",pin:"#f43f5e",snap:"#22d3ee"},n=null,o=null,b=0,p=false,m=null;function R(){o?.remove(),o=document.createElement("div"),o.setAttribute("data-ssd-devtools-overlay",""),o.style.cssText="position:fixed;pointer-events:none;z-index:99998;inset:0;overflow:hidden;",document.body.appendChild(o);}function M(){if(!o)return;o.innerHTML="";let e=window.scrollY,l=window.innerHeight;for(let[,t]of g()){let{tStart:i,tEnd:r}=t.getTrigger(),d=v[t.type]??"#60a5fa",f=i-e,s=r-e;if(s<-100||f>l+100)continue;let c=(u,y)=>{let a=document.createElement("div");a.style.cssText=`position:absolute;left:0;right:0;top:${u}px;height:2px;background:${d};opacity:0.85;`;let x=document.createElement("span");return x.textContent=y,x.style.cssText=`position:absolute;right:8px;top:-18px;font:bold 9px/1 monospace;color:#fff;background:${d};padding:2px 5px;border-radius:3px;white-space:nowrap;`,a.appendChild(x),a};o.appendChild(c(f,`\u25B6 ${t.type}:start`)),o.appendChild(c(s,`\u25A0 ${t.type}:end`));}}function $(){n?.remove(),n=document.createElement("div"),n.setAttribute("data-ssd-devtools-panel",""),n.style.cssText="position:fixed;bottom:12px;right:12px;z-index:99999;background:rgba(10,10,10,0.92);color:#e8e8e3;border-radius:10px;border:1px solid #333;font:12px/1.5 monospace;padding:10px 14px;min-width:220px;max-width:280px;pointer-events:none;backdrop-filter:blur(4px);";let e=document.createElement("div");e.style.cssText="font-weight:bold;font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:#888;margin-bottom:8px;",e.textContent="\u26A1 svg-scroll-draw devtools",n.appendChild(e),document.body.appendChild(n);}function S(){if(!n)return;for(;n.children.length>1;)n.removeChild(n.lastChild);let e=g();if(e.size===0){let t=document.createElement("div");t.style.cssText="color:#555;font-size:11px;",t.textContent="No active instances.",n.appendChild(t);return}for(let[t,i]of e){let r=i.getProgress(),d=v[i.type]??"#60a5fa",f=t.id?`#${t.id}`:t.className?`.${t.className.split(" ")[0]}`:i.type,s=document.createElement("div");s.style.cssText="margin-bottom:6px;";let c=document.createElement("div");c.style.cssText=`font-size:10px;color:${d};margin-bottom:2px;`,c.textContent=`${i.type} ${f}`;let u=document.createElement("div");u.style.cssText="height:6px;background:#222;border-radius:3px;overflow:hidden;";let y=document.createElement("div");y.style.cssText=`height:100%;width:${Math.round(r*100)}%;background:${d};border-radius:3px;transition:width 0.1s;`,u.appendChild(y),s.appendChild(c),s.appendChild(u);let a=document.createElement("div");a.style.cssText="font-size:9px;color:#555;text-align:right;margin-top:1px;",a.textContent=`${Math.round(r*100)}%`,s.appendChild(a),n.appendChild(s);}}function w(){M(),S(),b=requestAnimationFrame(w);}function T(){h&&(p||(p=true,R(),$(),b=requestAnimationFrame(w),m=e=>{(e.metaKey||e.ctrlKey)&&e.shiftKey&&e.key.toLowerCase()==="s"&&(e.preventDefault(),C());},window.addEventListener("keydown",m)));}function _(){p&&(p=false,cancelAnimationFrame(b),n?.remove(),n=null,o?.remove(),o=null,m&&(window.removeEventListener("keydown",m),m=null));}function C(){p?_():T();}function k(e){if(!p)return;let l=typeof e=="string"?document.querySelector(e):e;if(!l)return;let t=g().get(l);if(!t)return;let i=v[t.type]??"#60a5fa",r=l,d=r.style.outline;r.style.outline=`2px solid ${i}`,r.style.outlineOffset="2px",setTimeout(()=>{r.style.outline=d,r.style.outlineOffset="";},2e3);}var A={enable:T,disable:_,toggle:C,highlight:k};exports.devtools=A;

package/dist/devtools/index.mjs

@@ -1 +1 @@
-var C=new Map;function x(){return C}var v={draw:"#60a5fa",animate:"#4ade80",counter:"#fbbf24",video:"#c084fc",text:"#fb923c",pin:"#f43f5e",snap:"#22d3ee"},n=null,o=null,b=0,p=false,m=null;function L(){o?.remove(),o=document.createElement("div"),o.setAttribute("data-ssd-devtools-overlay",""),o.style.cssText="position:fixed;pointer-events:none;z-index:99998;inset:0;overflow:hidden;",document.body.appendChild(o);}function $(){if(!o)return;o.innerHTML="";let e=window.scrollY,l=window.innerHeight;for(let[,t]of x()){let{tStart:i,tEnd:r}=t.getTrigger(),d=v[t.type]??"#60a5fa",f=i-e,s=r-e;if(s<-100||f>l+100)continue;let c=(u,y)=>{let a=document.createElement("div");a.style.cssText=`position:absolute;left:0;right:0;top:${u}px;height:2px;background:${d};opacity:0.85;`;let g=document.createElement("span");return g.textContent=y,g.style.cssText=`position:absolute;right:8px;top:-18px;font:bold 9px/1 monospace;color:#fff;background:${d};padding:2px 5px;border-radius:3px;white-space:nowrap;`,a.appendChild(g),a};o.appendChild(c(f,`\u25B6 ${t.type}:start`)),o.appendChild(c(s,`\u25A0 ${t.type}:end`));}}function M(){n?.remove(),n=document.createElement("div"),n.setAttribute("data-ssd-devtools-panel",""),n.style.cssText="position:fixed;bottom:12px;right:12px;z-index:99999;background:rgba(10,10,10,0.92);color:#e8e8e3;border-radius:10px;border:1px solid #333;font:12px/1.5 monospace;padding:10px 14px;min-width:220px;max-width:280px;pointer-events:none;backdrop-filter:blur(4px);";let e=document.createElement("div");e.style.cssText="font-weight:bold;font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:#888;margin-bottom:8px;",e.textContent="\u26A1 svg-scroll-draw devtools",n.appendChild(e),document.body.appendChild(n);}function k(){if(!n)return;for(;n.children.length>1;)n.removeChild(n.lastChild);let e=x();if(e.size===0){let t=document.createElement("div");t.style.cssText="color:#555;font-size:11px;",t.textContent="No active instances.",n.appendChild(t);return}for(let[t,i]of e){let r=i.getProgress(),d=v[i.type]??"#60a5fa",f=t.id?`#${t.id}`:t.className?`.${t.className.split(" ")[0]}`:i.type,s=document.createElement("div");s.style.cssText="margin-bottom:6px;";let c=document.createElement("div");c.style.cssText=`font-size:10px;color:${d};margin-bottom:2px;`,c.textContent=`${i.type} ${f}`;let u=document.createElement("div");u.style.cssText="height:6px;background:#222;border-radius:3px;overflow:hidden;";let y=document.createElement("div");y.style.cssText=`height:100%;width:${Math.round(r*100)}%;background:${d};border-radius:3px;transition:width 0.1s;`,u.appendChild(y),s.appendChild(c),s.appendChild(u);let a=document.createElement("div");a.style.cssText="font-size:9px;color:#555;text-align:right;margin-top:1px;",a.textContent=`${Math.round(r*100)}%`,s.appendChild(a),n.appendChild(s);}}function h(){$(),k(),b=requestAnimationFrame(h);}function E(){process.env.NODE_ENV!=="production"&&(p||(p=true,L(),M(),b=requestAnimationFrame(h),m=e=>{(e.metaKey||e.ctrlKey)&&e.shiftKey&&e.key.toLowerCase()==="s"&&(e.preventDefault(),w());},window.addEventListener("keydown",m)));}function T(){p&&(p=false,cancelAnimationFrame(b),n?.remove(),n=null,o?.remove(),o=null,m&&(window.removeEventListener("keydown",m),m=null));}function w(){p?T():E();}function H(e){if(!p)return;let l=typeof e=="string"?document.querySelector(e):e;if(!l)return;let t=x().get(l);if(!t)return;let i=v[t.type]??"#60a5fa",r=l,d=r.style.outline;r.style.outline=`2px solid ${i}`,r.style.outlineOffset="2px",setTimeout(()=>{r.style.outline=d,r.style.outlineOffset="";},2e3);}var _={enable:E,disable:T,toggle:w,highlight:H};export{_ as devtools};
+var E=Symbol.for("svg-scroll-draw.registry");function L(){let e=globalThis;return e[E]||(e[E]=new Map)}function g(){return L()}var h=typeof __SVG_SCROLL_DRAW_DEV__<"u"?__SVG_SCROLL_DRAW_DEV__:typeof process<"u"&&typeof process.env<"u"&&process.env.NODE_ENV!=="production";var v={draw:"#60a5fa",animate:"#4ade80",counter:"#fbbf24",video:"#c084fc",text:"#fb923c",pin:"#f43f5e",snap:"#22d3ee"},n=null,o=null,b=0,p=false,m=null;function R(){o?.remove(),o=document.createElement("div"),o.setAttribute("data-ssd-devtools-overlay",""),o.style.cssText="position:fixed;pointer-events:none;z-index:99998;inset:0;overflow:hidden;",document.body.appendChild(o);}function M(){if(!o)return;o.innerHTML="";let e=window.scrollY,l=window.innerHeight;for(let[,t]of g()){let{tStart:i,tEnd:r}=t.getTrigger(),d=v[t.type]??"#60a5fa",f=i-e,s=r-e;if(s<-100||f>l+100)continue;let c=(u,y)=>{let a=document.createElement("div");a.style.cssText=`position:absolute;left:0;right:0;top:${u}px;height:2px;background:${d};opacity:0.85;`;let x=document.createElement("span");return x.textContent=y,x.style.cssText=`position:absolute;right:8px;top:-18px;font:bold 9px/1 monospace;color:#fff;background:${d};padding:2px 5px;border-radius:3px;white-space:nowrap;`,a.appendChild(x),a};o.appendChild(c(f,`\u25B6 ${t.type}:start`)),o.appendChild(c(s,`\u25A0 ${t.type}:end`));}}function $(){n?.remove(),n=document.createElement("div"),n.setAttribute("data-ssd-devtools-panel",""),n.style.cssText="position:fixed;bottom:12px;right:12px;z-index:99999;background:rgba(10,10,10,0.92);color:#e8e8e3;border-radius:10px;border:1px solid #333;font:12px/1.5 monospace;padding:10px 14px;min-width:220px;max-width:280px;pointer-events:none;backdrop-filter:blur(4px);";let e=document.createElement("div");e.style.cssText="font-weight:bold;font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:#888;margin-bottom:8px;",e.textContent="\u26A1 svg-scroll-draw devtools",n.appendChild(e),document.body.appendChild(n);}function S(){if(!n)return;for(;n.children.length>1;)n.removeChild(n.lastChild);let e=g();if(e.size===0){let t=document.createElement("div");t.style.cssText="color:#555;font-size:11px;",t.textContent="No active instances.",n.appendChild(t);return}for(let[t,i]of e){let r=i.getProgress(),d=v[i.type]??"#60a5fa",f=t.id?`#${t.id}`:t.className?`.${t.className.split(" ")[0]}`:i.type,s=document.createElement("div");s.style.cssText="margin-bottom:6px;";let c=document.createElement("div");c.style.cssText=`font-size:10px;color:${d};margin-bottom:2px;`,c.textContent=`${i.type} ${f}`;let u=document.createElement("div");u.style.cssText="height:6px;background:#222;border-radius:3px;overflow:hidden;";let y=document.createElement("div");y.style.cssText=`height:100%;width:${Math.round(r*100)}%;background:${d};border-radius:3px;transition:width 0.1s;`,u.appendChild(y),s.appendChild(c),s.appendChild(u);let a=document.createElement("div");a.style.cssText="font-size:9px;color:#555;text-align:right;margin-top:1px;",a.textContent=`${Math.round(r*100)}%`,s.appendChild(a),n.appendChild(s);}}function w(){M(),S(),b=requestAnimationFrame(w);}function T(){h&&(p||(p=true,R(),$(),b=requestAnimationFrame(w),m=e=>{(e.metaKey||e.ctrlKey)&&e.shiftKey&&e.key.toLowerCase()==="s"&&(e.preventDefault(),C());},window.addEventListener("keydown",m)));}function _(){p&&(p=false,cancelAnimationFrame(b),n?.remove(),n=null,o?.remove(),o=null,m&&(window.removeEventListener("keydown",m),m=null));}function C(){p?_():T();}function k(e){if(!p)return;let l=typeof e=="string"?document.querySelector(e):e;if(!l)return;let t=g().get(l);if(!t)return;let i=v[t.type]??"#60a5fa",r=l,d=r.style.outline;r.style.outline=`2px solid ${i}`,r.style.outlineOffset="2px",setTimeout(()=>{r.style.outline=d,r.style.outlineOffset="";},2e3);}var A={enable:T,disable:_,toggle:C,highlight:k};export{A as devtools};