@mks2508/waapi-animation-primitives 0.2.0 → 0.3.1

package/dist/index.js

@@ -46,7 +46,7 @@ ${Object.entries(F.highContrast).map(([e,t])=>`    ${e}: ${t};`).join(`
 `)}
   }
 }
-`.trim(),z=`waapi-animation-primitives-vars`;let B=!1;const V=()=>{if(typeof document>`u`||B)return;if(document.getElementById(z)){B=!0;return}let e=document.createElement(`style`);e.id=z,e.textContent=R(),document.head.appendChild(e),B=!0},H=()=>{if(typeof document>`u`)return;let e=document.getElementById(z);e&&(e.remove(),B=!1)},U=()=>{H(),V()};typeof document<`u`&&(document.readyState===`loading`?document.addEventListener(`DOMContentLoaded`,V):V());function ee(e,t){let n=t?.locale||`en-US`,r={style:t?.style||`decimal`,minimumFractionDigits:t?.minimumFractionDigits,maximumFractionDigits:t?.maximumFractionDigits,useGrouping:t?.useGrouping??!0};t?.style===`currency`&&t?.currency&&(r.currency=t.currency);let i=new Intl.NumberFormat(n,r).formatToParts(e),a=[],o=0;i.forEach(e=>{e.type===`integer`&&(o+=e.value.length)});let s=o,c=0,l=0;return i.forEach((e,t)=>{if(e.type===`integer`)for(let t of e.value)a.push({char:t,key:`int-${s}`,isDigit:!0,position:s}),s--;else if(e.type===`fraction`)for(let t of e.value)c++,a.push({char:t,key:`frac-${c}`,isDigit:!0,position:-c});else e.type===`decimal`?a.push({char:e.value,key:`decimal`,isDigit:!1,position:0}):e.type===`group`?(l++,a.push({char:e.value,key:`group-${l}`,isDigit:!1,position:0})):e.type===`currency`?a.push({char:e.value,key:`currency-${t}`,isDigit:!1,position:0}):e.type===`percentSign`?a.push({char:e.value,key:`percent`,isDigit:!1,position:0}):a.push({char:e.value,key:`symbol-${t}`,isDigit:!1,position:0})}),a}function W({value:e,duration:t=700,fontSize:n=`3rem`,fontWeight:r=`700`,color:i=`#000`,digitHeight:a=60,stagger:o=30,motionBlur:s=!0,format:l,trend:u=0,animationConfig:p}){let m=d(()=>{if(p){let{overshoot:e=1,stiffness:t=1,mass:n=1}=p,r=.34*t,i=1+.56*e,a=.64/n;return`cubic-bezier(${Math.min(r,1).toFixed(2)}, ${Math.min(i,2).toFixed(2)}, ${Math.min(a,1).toFixed(2)}, 1)`}return`cubic-bezier(0.34, 1.56, 0.64, 1)`},[p]),g=d(()=>ee(e,l),[e,l]),_=f(new Set),v=f(!0),y=d(()=>{if(v.current)return new Set;let e=new Set;return g.forEach(t=>{_.current.has(t.key)||e.add(t.key)}),e},[g]);c(()=>{v.current=!1,_.current=new Set(g.map(e=>e.key))},[g]);let b=e=>(Math.abs(e)-1)*o;return h(`div`,{style:{display:`inline-flex`,alignItems:`center`,fontSize:n,fontWeight:r,color:i,fontVariantNumeric:`tabular-nums`,fontFamily:`system-ui, -apple-system, sans-serif`,overflow:`hidden`},children:g.map(e=>{let n=y.has(e.key);return e.isDigit?h(ne,{digit:Number.parseInt(e.char),duration:t,digitHeight:a,delay:b(e.position),motionBlur:s,easing:m,isEntering:n,trend:u},e.key):h(te,{char:e.char,isEntering:n,duration:t,easing:m},e.key)})})}function te({char:e,isEntering:t,duration:n,easing:r}){let i=f(null),a=f(!1);return u(()=>{!i.current||!t||a.current||(a.current=!0,i.current.animate([{opacity:0,transform:`scale(0.8)`},{opacity:1,transform:`scale(1)`}],{duration:n*.3,easing:r,fill:`forwards`}))},[t,n,r]),h(`span`,{ref:i,style:{display:`inline-block`,whiteSpace:`pre`,opacity:t?0:1},children:e})}function ne({digit:e,duration:t,digitHeight:n,delay:r,motionBlur:i,easing:a,isEntering:o,trend:s}){let l=f(null),p=f(null),_=f(null),v=f(`blur-${Math.random().toString(36).slice(2,9)}`).current,y=f(null),b=f(e),x=f(!1),S=d(()=>{let e=[];for(let t=-1;t<=1;t++)for(let t=0;t<=9;t++)e.push(t);return e},[]);u(()=>{if(!x.current){x.current=!0;let t=-(e+10)*n;y.current=t,b.current=e,l.current&&(l.current.style.transform=`translateY(${t}px)`)}},[e,n]),u(()=>{!p.current||!o||p.current.animate([{opacity:0,transform:`scale(0.5) translateY(-20px)`},{opacity:1,transform:`scale(1) translateY(0)`}],{duration:t*.4,easing:a,fill:`forwards`})},[o,t,a]),c(()=>{b.current=e,x.current&&(e===(y.current===null?e:((Math.round(-y.current/n)-10)%10+10)%10)&&y.current!==null||C(e))},[e,n]);let C=e=>{if(!l.current||!p.current)return;if(_.current){let e=getComputedStyle(l.current);y.current=new DOMMatrix(e.transform).m42,_.current.cancel(),_.current=null,l.current.style.transform=`translateY(${y.current}px)`}let o=y.current===null?e+10:-y.current/n,c=((Math.round(o)-10)%10+10)%10;if(e===c&&y.current!==null){let t=-(e+10)*n;if(l.current){let e=_.current;e&&e.cancel(),l.current.style.transform=`translateY(${t}px)`}y.current=t;return}let u;s===1?u=e>=c?e-c:10-c+e:s===-1?u=e<=c?e-c:e-c-10:(u=e-c,u>5?u-=10:u<-5&&(u+=10));let d=y.current??-(c+10)*n,f=d-u*n,m=document.getElementById(v)?.querySelector(`feGaussianBlur`);if(i&&m){let e=Math.min(Math.abs(u)*1.2,6);m.setAttribute(`stdDeviation`,`0,${e}`),p.current.style.filter=`url(#${v})`}let h=l.current.animate([{transform:`translateY(${d}px)`},{transform:`translateY(${f}px)`}],{duration:t,delay:r,easing:a,fill:`forwards`});_.current=h,h.onfinish=()=>{let t=-(e+10)*n;l.current&&(h.cancel(),l.current.style.transform=`translateY(${t}px)`),y.current=t,p.current&&(p.current.style.filter=`none`),m&&m.setAttribute(`stdDeviation`,`0,0`),_.current=null,b.current!==e&&requestAnimationFrame(()=>{C(b.current)})},h.oncancel=()=>{_.current=null}};return g(m,{children:[h(`svg`,{style:{position:`absolute`,width:0,height:0},"aria-hidden":`true`,children:h(`defs`,{children:h(`filter`,{id:v,children:h(`feGaussianBlur`,{in:`SourceGraphic`,stdDeviation:`0,0`})})})}),h(`div`,{ref:p,style:{position:`relative`,height:`${n}px`,overflow:`hidden`,width:`0.65em`,textAlign:`center`,opacity:o?0:1},children:h(`div`,{ref:l,style:{position:`absolute`,left:0,right:0,willChange:`transform`},children:S.map((e,t)=>h(`div`,{style:{height:`${n}px`,display:`flex`,alignItems:`center`,justifyContent:`center`},children:e},t))})})]})}const re=r(null),G=()=>{let e=s(re);if(!e)throw Error(`useDebug must be used within DebugProvider`);return e},ie=({children:e})=>{let[t,n]=p([]),[r,i]=p(!0),[a,s]=p(!1),l=f(r),u=f([]),m=f(null);f([]);let g=f(!1);l.current=r,g.current=a;let _=o(()=>{if(u.current.length===0)return;let e=[...u.current];u.current=[],m.current=null,n(t=>[...t,...e])},[]);c(()=>()=>{m.current!==null&&(cancelAnimationFrame(m.current),u.current.length>0&&(n(e=>[...e,...u.current]),u.current=[]))},[]);let v=o(e=>{},[_]),y=o(()=>{},[]),b=o(()=>{},[]),x=o(()=>{},[]),S=o(()=>{},[]),C=o(()=>{},[]),w=o(()=>[],[]),T=o(()=>{},[_]),E=o(()=>``,[t]),D=o(()=>``,[t]),O=d(()=>({events:[],isEnabled:!1,isCollecting:!1,enableDebug:b,disableDebug:x,toggleDebug:S,logEvent:v,clearEvents:y,getEventLog:D,exportToCSV:E,startCollecting:C,stopCollecting:w,flushEvents:T}),[t,r,a,b,x,S,v,y,D,E,C,w,T]);return h(re.Provider,{value:O,children:e})};function K(e){let t=getComputedStyle(e);return{opacity:t.opacity,transform:t.transform,filter:t.filter,width:t.width,height:t.height,marginRight:t.marginRight,marginLeft:t.marginLeft,position:t.position,visibility:t.visibility,pointerEvents:t.pointerEvents}}function ae(e){let t=K(e);return{opacity:t.opacity,transform:t.transform===`none`?`none`:t.transform,filter:t.filter===`none`?`none`:t.filter,width:t.width,marginRight:t.marginRight,position:t.position}}function q(e){let t=e.getBoundingClientRect();return{x:Math.round(t.x*100)/100,y:Math.round(t.y*100)/100,width:Math.round(t.width*100)/100,height:Math.round(t.height*100)/100,top:Math.round(t.top*100)/100,left:Math.round(t.left*100)/100,right:Math.round(t.right*100)/100,bottom:Math.round(t.bottom*100)/100}}function oe(e){let t=q(e);return{x:t.x,y:t.y,w:t.width,h:t.height}}function se(e,t){return{deltaX:Math.round((e.left-t.left)*100)/100,deltaY:Math.round((e.top-t.top)*100)/100,deltaWidth:Math.round((e.width-t.width)*100)/100,deltaHeight:Math.round((e.height-t.height)*100)/100}}function ce(e,t){let n=K(t);return Object.entries(e).map(([e,t])=>{let r=n[e]||``;return{property:e,expected:t,actual:r,matches:le(e,t)===le(e,r)}})}function le(e,t){if(!t)return``;if(e===`opacity`)return parseFloat(t).toString();if(e===`transform`){if(t===`none`)return`none`;let e=t.match(/matrix\(([^)]+)\)/);if(e&&e[1]){let t=e[1].split(`,`).map(e=>parseFloat(e.trim())),n=t[4],r=t[5];if(n!==void 0&&r!==void 0)return`translate(${Math.round(n)}px, ${Math.round(r)}px)`}return t}if(e===`width`||e===`height`||e.includes(`margin`)){let e=parseFloat(t);if(!isNaN(e))return`${Math.round(e)}px`}if(e===`filter`){if(t===`none`)return`none`;let e=t.match(/blur\(([^)]+)\)/);if(e&&e[1]){let t=parseFloat(e[1]);return`blur(${Math.round(t)}px)`}}return t}function J(e){let t=performance.now();return{start:t,expectedDuration:e,end:()=>{let n=performance.now(),r=n-t,i=r-e;return{startTime:Math.round(t*100)/100,endTime:Math.round(n*100)/100,expectedDuration:e,actualDuration:Math.round(r*100)/100,deviation:Math.round(i*100)/100,deviationPercent:Math.round(i/e*1e4)/100}}}}function ue(e){let t=e.deviation>=0?`+`:``,n=Math.abs(e.deviation)<10?`✅`:`⚠️`;return`Expected: ${e.expectedDuration}ms | Actual: ${e.actualDuration}ms | Deviation: ${t}${e.deviation}ms ${n}`}function de(e){let t=e.effect?.getTiming?.();return{id:e.id,playState:e.playState,currentTime:e.currentTime,playbackRate:e.playbackRate,pending:e.pending,duration:t?.duration,easing:t?.easing,fill:t?.fill}}function fe(e){return e.getAnimations().map(de)}const Y=new class{constructor(){this.activeAnimations=new Map,this.timeline=[],this.completedAnimations=[],this.sessionStartTime=0}startSession(){}getRelativeTime(){return Math.round((performance.now()-this.sessionStartTime)*100)/100}startAnimation(e,t,n,r){}endAnimation(e){}detectOverlaps(e){let t=[];return this.activeAnimations.forEach((n,r)=>{r!==e&&t.push(`${n.type}:${n.elementId}`)}),t}getOverlaps(){return[]}getTimeline(){return[]}getActiveCount(){return 0}getActiveAnimations(){return[]}getCompletedAnimations(){return[]}getSummary(){return{totalAnimations:0,totalDuration:0,overlaps:[],timeline:[],activeAnimations:[]}}getTimelineForVisualization(){return[]}},X=({text:e,mode:t=`word`,direction:n=`vertical`,staggerDelay:r=w.STAGGER_DELAY,duration:i=w.DURATION_ENTER,easing:a=w.EASING_ENTER,blur:o=!0,widthAnimation:s=!1,initial:l=`initial`,exit:d,className:m=``,style:g})=>{let _=f(null),v=f(null),{logEvent:y}=G(),b=f(null),x=f(null),S=f(!1),[C,T]=p(l!==`initial`);c(()=>{l===`initial`&&!S.current&&(S.current=!0,requestAnimationFrame(()=>{T(!0)}))},[l]);let E=d===`exit`?`exit`:C?`animate`:`initial`,D=t===`character`?e.split(``):[e],O=i+(D.length-1)*r;c(()=>{if(E===`animate`&&_.current){let c=_.current;b.current=J(O),x.current=`enter-${e.slice(0,10)}-${Date.now()}`,Y.startAnimation(x.current,`enter`,e,O);let l=q(c);y({type:`text-enter-start`,source:`SlidingText`,message:`Enter animation starting for: "${e}"`,timing:{startTime:b.current.start,expectedDuration:O},position:{element:e,x:l.x,y:l.y,width:l.width,height:l.height},animation:{name:`enter`,phase:`start`,easing:a,fill:`forwards`},data:{text:e,charCount:D.length,mode:t,direction:n,staggerDelay:r,duration:i,totalDuration:O,blur:o,widthAnimation:s}});let u=setTimeout(()=>{if(b.current&&x.current&&_.current){let t=b.current.end();Y.endAnimation(x.current);let n=q(_.current);y({type:`text-enter-complete`,source:`SlidingText`,message:`Enter animation complete for: "${e}"`,timing:{startTime:t.startTime,endTime:t.endTime,expectedDuration:t.expectedDuration,actualDuration:t.actualDuration,deviation:t.deviation,deviationPercent:t.deviationPercent},position:{element:e,x:n.x,y:n.y,width:n.width,height:n.height},animation:{name:`enter`,phase:`complete`,progress:1,easing:a,fill:`forwards`},data:{text:e,deviationStatus:Math.abs(t.deviation)<10?`OK`:`WARNING`}})}},O+50);return()=>clearTimeout(u)}},[E,e,t,n,r,i,a,o,s,O,D.length,y]),u(()=>{if(!s||!_.current||!v.current)return;let e=_.current,t=v.current;if(E===`initial`)e.style.width=`0px`;else if(E===`animate`)if(CSS.supports(`interpolate-size`,`allow-keywords`))e.style.width=`auto`,e.style.transition=`width ${i}ms ${a}`;else{let n=t.scrollWidth;e.style.width=`${n}px`,e.style.transition=`width ${i}ms ${a}`;let r=setTimeout(()=>{e.style.width=`auto`},i);return()=>clearTimeout(r)}else if(E===`exit`){let t=e.getBoundingClientRect().width;e.style.width=`${t}px`,e.getBoundingClientRect(),e.style.width=`0px`,e.style.transition=`width ${w.DURATION_EXIT}ms ${w.EASING_EXIT}`}},[E,s,i,a,e]);let k=e=>{let t=e*r,s=E===`exit`,c=s?w.DURATION_EXIT:i,l=s?w.EASING_EXIT:a;return{transition:`
+`.trim(),z=`waapi-animation-primitives-vars`;let B=!1;const V=()=>{if(typeof document>`u`||B)return;if(document.getElementById(z)){B=!0;return}let e=document.createElement(`style`);e.id=z,e.textContent=R(),document.head.appendChild(e),B=!0},H=()=>{if(typeof document>`u`)return;let e=document.getElementById(z);e&&(e.remove(),B=!1)},U=()=>{H(),V()};typeof document<`u`&&(document.readyState===`loading`?document.addEventListener(`DOMContentLoaded`,V):V());function ee(e,t){let n=t?.locale||`en-US`,r={style:t?.style||`decimal`,minimumFractionDigits:t?.minimumFractionDigits,maximumFractionDigits:t?.maximumFractionDigits,useGrouping:t?.useGrouping??!0};t?.style===`currency`&&t?.currency&&(r.currency=t.currency);let i=new Intl.NumberFormat(n,r).formatToParts(e),a=[],o=0;i.forEach(e=>{e.type===`integer`&&(o+=e.value.length)});let s=o,c=0,l=0;return i.forEach((e,t)=>{if(e.type===`integer`)for(let t of e.value)a.push({char:t,key:`int-${s}`,isDigit:!0,position:s}),s--;else if(e.type===`fraction`)for(let t of e.value)c++,a.push({char:t,key:`frac-${c}`,isDigit:!0,position:-c});else e.type===`decimal`?a.push({char:e.value,key:`decimal`,isDigit:!1,position:0}):e.type===`group`?(l++,a.push({char:e.value,key:`group-${l}`,isDigit:!1,position:0})):e.type===`currency`?a.push({char:e.value,key:`currency-${t}`,isDigit:!1,position:0}):e.type===`percentSign`?a.push({char:e.value,key:`percent`,isDigit:!1,position:0}):a.push({char:e.value,key:`symbol-${t}`,isDigit:!1,position:0})}),a}function W({value:e,duration:t=700,fontSize:n=`3rem`,fontWeight:r=`700`,color:i=`#000`,digitHeight:a=60,stagger:o=30,motionBlur:s=!0,format:l,trend:u=0,animationConfig:p}){let m=d(()=>{if(p){let{overshoot:e=1,stiffness:t=1,mass:n=1}=p,r=.34*t,i=1+.56*e,a=.64/n;return`cubic-bezier(${Math.min(r,1).toFixed(2)}, ${Math.min(i,2).toFixed(2)}, ${Math.min(a,1).toFixed(2)}, 1)`}return`cubic-bezier(0.34, 1.56, 0.64, 1)`},[p]),g=d(()=>ee(e,l),[e,l]),_=f(new Set),v=f(!0),y=d(()=>{if(v.current)return new Set;let e=new Set;return g.forEach(t=>{_.current.has(t.key)||e.add(t.key)}),e},[g]);c(()=>{v.current=!1,_.current=new Set(g.map(e=>e.key))},[g]);let b=e=>(Math.abs(e)-1)*o;return h(`div`,{style:{display:`inline-flex`,alignItems:`center`,fontSize:n,fontWeight:r,color:i,fontVariantNumeric:`tabular-nums`,fontFamily:`system-ui, -apple-system, sans-serif`,overflow:`hidden`},children:g.map(e=>{let n=y.has(e.key);return e.isDigit?h(ne,{digit:Number.parseInt(e.char),duration:t,digitHeight:a,delay:b(e.position),motionBlur:s,easing:m,isEntering:n,trend:u},e.key):h(te,{char:e.char,isEntering:n,duration:t,easing:m},e.key)})})}function te({char:e,isEntering:t,duration:n,easing:r}){let i=f(null),a=f(!1);return u(()=>{!i.current||!t||a.current||(a.current=!0,i.current.animate([{opacity:0,transform:`scale(0.8)`},{opacity:1,transform:`scale(1)`}],{duration:n*.3,easing:r,fill:`forwards`}))},[t,n,r]),h(`span`,{ref:i,style:{display:`inline-block`,whiteSpace:`pre`,opacity:t?0:1},children:e})}function ne({digit:e,duration:t,digitHeight:n,delay:r,motionBlur:i,easing:a,isEntering:o,trend:s}){let l=f(null),p=f(null),_=f(null),v=f(`blur-${Math.random().toString(36).slice(2,9)}`).current,y=f(null),b=f(e),x=f(!1),S=d(()=>{let e=[];for(let t=-1;t<=1;t++)for(let t=0;t<=9;t++)e.push(t);return e},[]);u(()=>{if(!x.current){x.current=!0;let t=-(e+10)*n;y.current=t,b.current=e,l.current&&(l.current.style.transform=`translateY(${t}px)`)}},[e,n]),u(()=>{!p.current||!o||p.current.animate([{opacity:0,transform:`scale(0.5) translateY(-20px)`},{opacity:1,transform:`scale(1) translateY(0)`}],{duration:t*.4,easing:a,fill:`forwards`})},[o,t,a]),c(()=>{b.current=e,x.current&&(e===(y.current===null?e:((Math.round(-y.current/n)-10)%10+10)%10)&&y.current!==null||C(e))},[e,n]);let C=e=>{if(!l.current||!p.current)return;if(_.current){let e=getComputedStyle(l.current);y.current=new DOMMatrix(e.transform).m42,_.current.cancel(),_.current=null,l.current.style.transform=`translateY(${y.current}px)`}let o=y.current===null?e+10:-y.current/n,c=((Math.round(o)-10)%10+10)%10;if(e===c&&y.current!==null){let t=-(e+10)*n;if(l.current){let e=_.current;e&&e.cancel(),l.current.style.transform=`translateY(${t}px)`}y.current=t;return}let u;s===1?u=e>=c?e-c:10-c+e:s===-1?u=e<=c?e-c:e-c-10:(u=e-c,u>5?u-=10:u<-5&&(u+=10));let d=y.current??-(c+10)*n,f=d-u*n,m=document.getElementById(v)?.querySelector(`feGaussianBlur`);if(i&&m){let e=Math.min(Math.abs(u)*1.2,6);m.setAttribute(`stdDeviation`,`0,${e}`),p.current.style.filter=`url(#${v})`}let h=l.current.animate([{transform:`translateY(${d}px)`},{transform:`translateY(${f}px)`}],{duration:t,delay:r,easing:a,fill:`forwards`});_.current=h,h.onfinish=()=>{let t=-(e+10)*n;l.current&&(h.cancel(),l.current.style.transform=`translateY(${t}px)`),y.current=t,p.current&&(p.current.style.filter=`none`),m&&m.setAttribute(`stdDeviation`,`0,0`),_.current=null,b.current!==e&&requestAnimationFrame(()=>{C(b.current)})},h.oncancel=()=>{_.current=null}};return g(m,{children:[h(`svg`,{style:{position:`absolute`,width:0,height:0},"aria-hidden":`true`,children:h(`defs`,{children:h(`filter`,{id:v,children:h(`feGaussianBlur`,{in:`SourceGraphic`,stdDeviation:`0,0`})})})}),h(`div`,{ref:p,style:{position:`relative`,height:`${n}px`,overflow:`hidden`,width:`0.65em`,textAlign:`center`,opacity:o?0:1},children:h(`div`,{ref:l,style:{position:`absolute`,left:0,right:0,willChange:`transform`},children:S.map((e,t)=>h(`div`,{style:{height:`${n}px`,display:`flex`,alignItems:`center`,justifyContent:`center`},children:e},t))})})]})}r(null);const re={events:[],isEnabled:!1,isCollecting:!1,enableDebug:()=>{},disableDebug:()=>{},toggleDebug:()=>{},logEvent:()=>{},clearEvents:()=>{},getEventLog:()=>``,exportToCSV:()=>``,startCollecting:()=>{},stopCollecting:()=>[],flushEvents:()=>{}},G=()=>re,ie=({children:e})=>h(m,{children:e});function K(e){let t=getComputedStyle(e);return{opacity:t.opacity,transform:t.transform,filter:t.filter,width:t.width,height:t.height,marginRight:t.marginRight,marginLeft:t.marginLeft,position:t.position,visibility:t.visibility,pointerEvents:t.pointerEvents}}function ae(e){let t=K(e);return{opacity:t.opacity,transform:t.transform===`none`?`none`:t.transform,filter:t.filter===`none`?`none`:t.filter,width:t.width,marginRight:t.marginRight,position:t.position}}function q(e){let t=e.getBoundingClientRect();return{x:Math.round(t.x*100)/100,y:Math.round(t.y*100)/100,width:Math.round(t.width*100)/100,height:Math.round(t.height*100)/100,top:Math.round(t.top*100)/100,left:Math.round(t.left*100)/100,right:Math.round(t.right*100)/100,bottom:Math.round(t.bottom*100)/100}}function oe(e){let t=q(e);return{x:t.x,y:t.y,w:t.width,h:t.height}}function se(e,t){return{deltaX:Math.round((e.left-t.left)*100)/100,deltaY:Math.round((e.top-t.top)*100)/100,deltaWidth:Math.round((e.width-t.width)*100)/100,deltaHeight:Math.round((e.height-t.height)*100)/100}}function ce(e,t){let n=K(t);return Object.entries(e).map(([e,t])=>{let r=n[e]||``;return{property:e,expected:t,actual:r,matches:le(e,t)===le(e,r)}})}function le(e,t){if(!t)return``;if(e===`opacity`)return parseFloat(t).toString();if(e===`transform`){if(t===`none`)return`none`;let e=t.match(/matrix\(([^)]+)\)/);if(e&&e[1]){let t=e[1].split(`,`).map(e=>parseFloat(e.trim())),n=t[4],r=t[5];if(n!==void 0&&r!==void 0)return`translate(${Math.round(n)}px, ${Math.round(r)}px)`}return t}if(e===`width`||e===`height`||e.includes(`margin`)){let e=parseFloat(t);if(!isNaN(e))return`${Math.round(e)}px`}if(e===`filter`){if(t===`none`)return`none`;let e=t.match(/blur\(([^)]+)\)/);if(e&&e[1]){let t=parseFloat(e[1]);return`blur(${Math.round(t)}px)`}}return t}function J(e){let t=performance.now();return{start:t,expectedDuration:e,end:()=>{let n=performance.now(),r=n-t,i=r-e;return{startTime:Math.round(t*100)/100,endTime:Math.round(n*100)/100,expectedDuration:e,actualDuration:Math.round(r*100)/100,deviation:Math.round(i*100)/100,deviationPercent:Math.round(i/e*1e4)/100}}}}function ue(e){let t=e.deviation>=0?`+`:``,n=Math.abs(e.deviation)<10?`✅`:`⚠️`;return`Expected: ${e.expectedDuration}ms | Actual: ${e.actualDuration}ms | Deviation: ${t}${e.deviation}ms ${n}`}function de(e){let t=e.effect?.getTiming?.();return{id:e.id,playState:e.playState,currentTime:e.currentTime,playbackRate:e.playbackRate,pending:e.pending,duration:t?.duration,easing:t?.easing,fill:t?.fill}}function fe(e){return e.getAnimations().map(de)}const Y=new class{constructor(){this.activeAnimations=new Map,this.timeline=[],this.completedAnimations=[],this.sessionStartTime=0}startSession(){}getRelativeTime(){return Math.round((performance.now()-this.sessionStartTime)*100)/100}startAnimation(e,t,n,r){}endAnimation(e){}detectOverlaps(e){let t=[];return this.activeAnimations.forEach((n,r)=>{r!==e&&t.push(`${n.type}:${n.elementId}`)}),t}getOverlaps(){return[]}getTimeline(){return[]}getActiveCount(){return 0}getActiveAnimations(){return[]}getCompletedAnimations(){return[]}getSummary(){return{totalAnimations:0,totalDuration:0,overlaps:[],timeline:[],activeAnimations:[]}}getTimelineForVisualization(){return[]}},X=({text:e,mode:t=`word`,direction:n=`vertical`,staggerDelay:r=w.STAGGER_DELAY,duration:i=w.DURATION_ENTER,easing:a=w.EASING_ENTER,blur:o=!0,widthAnimation:s=!1,initial:l=`initial`,exit:d,className:m=``,style:g})=>{let _=f(null),v=f(null),{logEvent:y}=G(),b=f(null),x=f(null),S=f(!1),[C,T]=p(l!==`initial`);c(()=>{l===`initial`&&!S.current&&(S.current=!0,requestAnimationFrame(()=>{T(!0)}))},[l]);let E=d===`exit`?`exit`:C?`animate`:`initial`,D=t===`character`?e.split(``):[e],O=i+(D.length-1)*r;c(()=>{if(E===`animate`&&_.current){let c=_.current;b.current=J(O),x.current=`enter-${e.slice(0,10)}-${Date.now()}`,Y.startAnimation(x.current,`enter`,e,O);let l=q(c);y({type:`text-enter-start`,source:`SlidingText`,message:`Enter animation starting for: "${e}"`,timing:{startTime:b.current.start,expectedDuration:O},position:{element:e,x:l.x,y:l.y,width:l.width,height:l.height},animation:{name:`enter`,phase:`start`,easing:a,fill:`forwards`},data:{text:e,charCount:D.length,mode:t,direction:n,staggerDelay:r,duration:i,totalDuration:O,blur:o,widthAnimation:s}});let u=setTimeout(()=>{if(b.current&&x.current&&_.current){let t=b.current.end();Y.endAnimation(x.current);let n=q(_.current);y({type:`text-enter-complete`,source:`SlidingText`,message:`Enter animation complete for: "${e}"`,timing:{startTime:t.startTime,endTime:t.endTime,expectedDuration:t.expectedDuration,actualDuration:t.actualDuration,deviation:t.deviation,deviationPercent:t.deviationPercent},position:{element:e,x:n.x,y:n.y,width:n.width,height:n.height},animation:{name:`enter`,phase:`complete`,progress:1,easing:a,fill:`forwards`},data:{text:e,deviationStatus:Math.abs(t.deviation)<10?`OK`:`WARNING`}})}},O+50);return()=>clearTimeout(u)}},[E,e,t,n,r,i,a,o,s,O,D.length,y]),u(()=>{if(!s||!_.current||!v.current)return;let e=_.current,t=v.current;if(E===`initial`)e.style.width=`0px`;else if(E===`animate`)if(CSS.supports(`interpolate-size`,`allow-keywords`))e.style.width=`auto`,e.style.transition=`width ${i}ms ${a}`;else{let n=t.scrollWidth;e.style.width=`${n}px`,e.style.transition=`width ${i}ms ${a}`;let r=setTimeout(()=>{e.style.width=`auto`},i);return()=>clearTimeout(r)}else if(E===`exit`){let t=e.getBoundingClientRect().width;e.style.width=`${t}px`,e.getBoundingClientRect(),e.style.width=`0px`,e.style.transition=`width ${w.DURATION_EXIT}ms ${w.EASING_EXIT}`}},[E,s,i,a,e]);let k=e=>{let t=e*r,s=E===`exit`,c=s?w.DURATION_EXIT:i,l=s?w.EASING_EXIT:a;return{transition:`
                 opacity ${c}ms ${l} ${t}ms,
                 transform ${c}ms ${l} ${t}ms,
                 filter ${c}ms ${l} ${t}ms