@mks2508/waapi-animation-primitives 0.5.0 → 0.5.1

package/dist/index.cjs

@@ -556,7 +556,7 @@ ${Object.entries(O.highContrast).map(([e,t])=>`    ${e}: ${t};`).join(`
                 opacity ${c}ms ${l} ${t}ms,
                 transform ${c}ms ${l} ${t}ms,
                 filter ${c}ms ${l} ${t}ms
-            `,"--blur-amount":o?`${_.BLUR_AMOUNT}px`:`0px`,"--offset":n===`vertical`?`${_.OFFSET_VERTICAL}px`:`${_.OFFSET_HORIZONTAL}px`}};return(0,l.jsx)(`div`,{ref:m,className:`waapi-sliding-text-container ${f}`,style:p,children:(0,l.jsx)(`div`,{ref:h,className:`waapi-sliding-text-content waapi-direction-${n}`,children:w.map((e,t)=>(0,l.jsx)(`span`,{className:`waapi-sliding-text-token ${C===`initial`?`enter-from`:C===`animate`?`enter-to`:`exit-active`}`,style:E(t),children:e},t))})})},ge=e=>{let{logEvent:t}=W(),n=(0,c.useRef)(t);(0,c.useEffect)(()=>{n.current=t},[t]);let r=(0,c.useRef)(e);(0,c.useEffect)(()=>{r.current=e},[e]);let i=(0,c.useRef)(new Map),a=(0,c.useRef)(new Map),o=(0,c.useRef)({animatingIds:new Set,positions:new Map,separatorStates:new Map}),s=(0,c.useRef)(new Map),l=(0,c.useCallback)((e,t)=>{t?i.current.set(e,t):i.current.delete(e)},[]),u=(0,c.useCallback)(e=>{let t=new Map;return i.current.forEach((n,r)=>{if(!e.has(r)){let e=n.getBoundingClientRect();e.width>0&&e.height>0&&t.set(r,e)}}),o.current.positions=t,t},[]),d=(0,c.useCallback)(e=>{let t=s.current.get(e);t&&(t.forEach(e=>e.cancel()),s.current.delete(e))},[]),g=(0,c.useCallback)((e,t)=>{o.current.separatorStates.has(e)||o.current.separatorStates.set(e,{tokenId:e,isVisible:!0,isAnimating:!1,animationPhase:`idle`}),t?a.current.set(e,t):a.current.delete(e)},[]),_=(0,c.useCallback)(e=>o.current.separatorStates.get(e),[]),v=(0,c.useCallback)(async e=>{let t=a.current.get(e),i=o.current.separatorStates.get(e);if(!t){if(i){n.current({type:`separator-animation-state-only`,source:`useWAAPIAnimations.startSeparatorAnimation`,message:`Separator state exists but no DOM element for token: ${e} - marking as completed`,data:{tokenId:e,reason:`state-no-element`}}),i.animationPhase=`completed`,i.isVisible=!1;return}n.current({type:`separator-animation-skipped`,source:`useWAAPIAnimations.startSeparatorAnimation`,message:`No separator element found for token: ${e} - skipping animation`,data:{tokenId:e,reason:`no-separator-element`}});return}let s=r.current.exitDuration||f.EXIT_DURATION,c=r.current.exitEasing||h.EASE_IN_CUBIC,l={tokenId:e,isVisible:!0,isAnimating:!0,animationPhase:`exit-coordinated`,startTime:performance.now(),expectedEndTime:performance.now()+s};o.current.separatorStates.set(e,l);let u=`separator-${e}-${Date.now()}`;J.startAnimation(u,`separator-exit`,e,s),n.current({type:`separator-animation-start`,source:`useWAAPIAnimations.startSeparatorAnimation`,message:`Separator animation starting for token: ${e}`,timing:{startTime:l.startTime||Date.now(),expectedDuration:s},data:{tokenId:e,duration:s}}),t.classList.add(`exit-coordinated`);let d=t.animate([{opacity:1,transform:`translateY(0) scale(1)`},{opacity:0,transform:`translateY(${p.OFFSET_Y_EXIT}px) scale(${p.SCALE_EXIT})`}],{duration:s,easing:c,fill:`forwards`});try{await d.finished}catch{return}l.animationPhase=`completed`,l.isVisible=!1,t.classList.add(`exit-completed`),J.endAnimation(u),n.current({type:`separator-animation-complete`,source:`useWAAPIAnimations.startSeparatorAnimation`,message:`Separator animation complete for token: ${e}`,data:{tokenId:e,duration:s}})},[]),y=(0,c.useCallback)(e=>{Array.from(o.current.separatorStates.keys()).forEach(t=>{e.has(t)||(o.current.separatorStates.delete(t),n.current({type:`separator-state-cleanup`,source:`useWAAPIAnimations.cleanupSeparatorStates`,message:`Removed separator state for non-existent token: ${t}`,data:{tokenId:t}}))})},[]),b=(0,c.useCallback)(async(e,t)=>{let a=i.current.get(e);if(!a||o.current.animatingIds.has(e))return;o.current.animatingIds.add(e),u(new Set([e])),new Set([e,...t||[]]).forEach(e=>{v(e)});let c=r.current.exitDuration||f.EXIT_DURATION,l=r.current.exitEasing||h.EASE_IN_CUBIC,d=r.current.flipDuration||f.FLIP_DURATION,g=p.OFFSET_Y_EXIT,_=p.SCALE_EXIT,y=m.BLUR_EXIT,b=f.EXIT_STAGGER,x=a.getBoundingClientRect(),S=getComputedStyle(a),C=parseFloat(S.marginRight)||0,w=q(c),T=q(c+d),E=G(a),D=K(a),O=`exit-${e}-${Date.now()}`;J.startAnimation(O,`exit-fade`,e,c);let k=`width-${e}-${Date.now()}`;J.startAnimation(k,`width-collapse`,e,c),n.current({type:`animation-start-detailed`,source:`useWAAPIAnimations.startExit`,message:`Exit animation starting for: ${e}`,timing:{startTime:w.start,expectedDuration:c},styles:Object.entries(E).map(([e,t])=>({property:e,expected:t,actual:t,matches:!0})),position:{element:e,x:D.x,y:D.y,width:D.width,height:D.height},animation:{name:`exit`,phase:`start`,easing:l,fill:`forwards`},data:{id:e,capturedPositions:o.current.positions.size,wrapperWidth:x.width,marginRight:C,expectedFinalStyles:{opacity:`0`,transform:`translateY(${g}px) scale(${_})`,filter:`blur(${y}px)`,width:`0px`,marginRight:`0px`}}});let A=[],j=[],M=!1,N=a.querySelectorAll(`.sliding-text-token`);if(N.length>0)N.forEach((e,t)=>{let n=t*b,r=e.animate([{opacity:1,transform:`translateY(0) scale(1)`,filter:`blur(0px)`},{opacity:0,transform:`translateY(${g}px) scale(${_})`,filter:`blur(${y}px)`}],{duration:c,easing:l,delay:n,fill:`forwards`});A.push(r)});else{let e=a.animate([{opacity:1,transform:`translateY(0) scale(1)`},{opacity:0,transform:`translateY(${g}px) scale(${_})`}],{duration:c,easing:l,fill:`forwards`});A.push(e)}a.style.overflow=`hidden`;let P=a.animate([{width:`${x.width}px`,marginRight:`${C}px`},{width:`0px`,marginRight:`0px`}],{duration:c,easing:l,fill:`forwards`});A.push(P),s.current.set(e,A);let F=c*f.FLIP_DELAY_PERCENT,I=()=>{if(!M){if(M=!0,a.style.position=`absolute`,a.style.opacity=`0`,a.style.pointerEvents=`none`,Array.from(i.current.entries()).filter(([t])=>t!==e).length===0){n.current({type:`flip-skipped`,source:`useWAAPIAnimations.startExit`,message:`No remaining elements to FLIP - skipping animation`,data:{id:e}});return}i.current.forEach((t,r)=>{if(r===e)return;let i=o.current.positions.get(r);if(!i)return;let a=t.getBoundingClientRect(),s=i.left-a.left,c=i.top-a.top;if(Math.abs(s)<1&&Math.abs(c)<1)return;let l=`flip-${r}-${Date.now()}`;J.startAnimation(l,`flip`,r,d),n.current({type:`flip-animation`,source:`useWAAPIAnimations.startExit`,message:`FLIP animation for: ${r}`,timing:{startTime:performance.now(),expectedDuration:d},position:{element:r,x:a.left,y:a.top,width:a.width,height:a.height,delta:{x:s,y:c}},animation:{name:`flip`,phase:`start`,easing:h.SPRING_GENTLE,fill:`none`},data:{id:r,deltaX:Math.round(s*100)/100,deltaY:Math.round(c*100)/100,prevPosition:{x:i.left,y:i.top,width:i.width,height:i.height},newPosition:{x:a.left,y:a.top,width:a.width,height:a.height}}});let u=t.animate([{transform:`translate3d(${s}px, ${c}px, 0)`},{transform:`translate3d(0, 0, 0)`}],{duration:d,easing:h.SPRING_GENTLE});u.onfinish=()=>{J.endAnimation(l),n.current({type:`flip-animation-complete`,source:`useWAAPIAnimations.startExit`,message:`FLIP complete for: ${r}`,animation:{name:`flip`,phase:`complete`,progress:1},data:{id:r}})},j.push(u)})}},L=setTimeout(I,F);try{let t=A.filter(e=>e!==P),r=P.finished;await Promise.all(t.map(e=>e.finished));let i=w.end();n.current({type:`exit-fade-complete`,source:`useWAAPIAnimations.startExit`,message:`Exit fade complete for: ${e}`,timing:{startTime:i.startTime,endTime:i.endTime,expectedDuration:i.expectedDuration,actualDuration:i.actualDuration,deviation:i.deviation,deviationPercent:i.deviationPercent},animation:{name:`exit-fade`,phase:`complete`,progress:1,easing:l},data:{id:e}}),I(),await Promise.all([...j.map(e=>e.finished.catch(()=>{})),r])}catch{clearTimeout(L),o.current.animatingIds.delete(e);return}J.endAnimation(O),J.endAnimation(k);let R=T.end(),z=K(a),B=ue({opacity:`0`,width:`0px`,marginRight:`0px`},a);n.current({type:`orchestration-complete`,source:`useWAAPIAnimations.startExit`,message:`Orchestration complete for: ${e}`,timing:{startTime:R.startTime,endTime:R.endTime,expectedDuration:R.expectedDuration,actualDuration:R.actualDuration,deviation:R.deviation,deviationPercent:R.deviationPercent},styles:B,position:{element:e,x:z.x,y:z.y,width:z.width,height:z.height},animation:{name:`orchestration`,phase:`complete`,progress:1,easing:l,fill:`forwards`},data:{id:e,choreographySummary:J.getSummary(),deviationStatus:Math.abs(R.deviation)<100?`OK`:`WARNING`,styleMatchCount:B.filter(e=>e.matches).length,styleMismatchCount:B.filter(e=>!e.matches).length}}),n.current({type:`animation-timing`,source:`useWAAPIAnimations.startExit`,message:`Orchestration timing for: ${e}`,timing:{startTime:R.startTime,endTime:R.endTime,expectedDuration:R.expectedDuration,actualDuration:R.actualDuration,deviation:R.deviation,deviationPercent:R.deviationPercent},animation:{name:`orchestration`,phase:`complete`},data:{id:e,status:Math.abs(R.deviation)<100?`✅ ON TIME`:`⚠️ SLOW`}}),o.current.animatingIds.delete(e),s.current.delete(e),i.current.delete(e),r.current.onComplete(e)},[u]),x=(0,c.useCallback)(e=>e?o.current.animatingIds.has(e):o.current.animatingIds.size>0,[]);return(0,c.useEffect)(()=>()=>{s.current.forEach(e=>{e.forEach(e=>e.cancel())}),s.current.clear()},[]),{registerElement:l,startExit:b,isAnimating:x,cancelAnimations:d,registerSeparator:g,getSeparatorState:_,startSeparatorAnimation:v,cleanupSeparatorStates:y}},_e=({tokens:e,placeholder:t=`No tokens`,maxVisible:n,textAnimationMode:r=`character`,textDirection:i=`vertical`,textStaggerDelay:a=15,separator:o=`, `,enableWidthAnimation:s=!1,className:u=``,tokenClassName:d=``,placeholderClassName:f=``,separatorClassName:p=``})=>{let{logEvent:m}=W(),h=(0,c.useRef)(!0),g=(0,c.useRef)(m);(0,c.useEffect)(()=>{g.current=m},[m]),(0,c.useEffect)(()=>(h.current=!0,g.current({type:`render`,source:`AnimatedTokens.mount`,message:`AnimatedTokens mounted`,data:{tokenCount:e.length}}),()=>{g.current({type:`component-unmounted`,source:`AnimatedTokens.unmount`,message:`AnimatedTokens UNMOUNTING`,data:{timestamp:Date.now()}}),h.current=!1}),[]);let[v,b]=(0,c.useState)(e),x=(0,c.useRef)(new Set),{registerElement:S,startExit:C,isAnimating:w,registerSeparator:T,getSeparatorState:E,cleanupSeparatorStates:D}=ge({onComplete:(0,c.useCallback)(e=>{h.current&&(g.current({type:`token-dom-remove`,source:`AnimatedTokens.onComplete`,message:`Token removed from DOM: ${e}`,data:{id:e}}),x.current.delete(e),b(t=>t.filter(t=>t.id!==e)))},[])}),O=(0,c.useRef)(C),k=(0,c.useRef)(E),A=(0,c.useRef)(D);(0,c.useEffect)(()=>{O.current=C,k.current=E,A.current=D},[C,E,D]);let j=v.filter(e=>!x.current.has(e.id)||!w(e.id)),M=n?v.slice(0,n):v,N=n?Math.max(0,j.length-n):0,P=(e,t)=>{if(t>=M.length-1)return!1;let n=k.current?.(e);if(!n)return!0;switch(n.animationPhase){case`idle`:case`exit-coordinated`:case`flip-coordinated`:return!0;case`completed`:return!1;default:return!0}};(0,c.useEffect)(()=>{let t=new Set(e.map(e=>e.id)),r=new Set(v.map(e=>e.id)),i=new Set(M.map(e=>e.id));A.current?.(i);let a=v.filter(e=>!t.has(e.id)&&!x.current.has(e.id)),o=e.filter(e=>!r.has(e.id));if(!(a.length===0&&o.length===0)&&(g.current({type:`render`,source:`AnimatedTokens.useEffect`,message:`Token sync`,data:{currentTokens:e.map(e=>e.id),displayTokens:v.map(e=>e.id),removed:a.map(e=>e.id),added:o.map(e=>e.id),animating:Array.from(x.current)}}),a.forEach(e=>{let t=v.findIndex(t=>t.id===e.id);if(n!==void 0&&t>=n)g.current({type:`overflow-token-remove`,source:`AnimatedTokens.useEffect`,message:`Removing overflow token without animation`,data:{id:e.id}}),b(t=>t.filter(t=>t.id!==e.id));else{let t=[],r=v.slice(0,n),i=r.findIndex(t=>t.id===e.id),a=i<r.length-1;if(i===r.length-1&&i>0){let e=r[i-1];e&&t.push(e.id)}g.current({type:`token-remove`,source:`AnimatedTokens.useEffect`,message:`Token marked for exit: ${e.text}`,data:{id:e.id,text:e.text,additionalSeparators:t,shouldAnimateOwnSeparator:a,wasLastVisible:i===r.length-1}}),x.current.add(e.id);let o=a?[e.id,...t]:t;O.current(e.id,o)}}),o.length>0)){o.forEach(e=>{g.current({type:`token-add`,source:`AnimatedTokens.useEffect`,message:`New token detected: ${e.text}`,data:{id:e.id,text:e.text}})}),o.forEach(t=>{let r=e.findIndex(e=>e.id===t.id);(n?r<Math.min(n,e.length)-1:r<e.length-1)&&T(t.id,null)});let r=v.filter(e=>!t.has(e.id)),i=[...e];r.forEach(e=>{let t=v.findIndex(t=>t.id===e.id);t!==-1&&t<=i.length&&i.splice(t,0,e)}),JSON.stringify(i.map(e=>e.id))!==JSON.stringify(v.map(e=>e.id))&&b(i)}},[e,n]);let F=(0,c.useRef)(0),I=N>0&&F.current===0,L=N===0&&F.current>0;(0,c.useEffect)(()=>{F.current=N},[N]);let R=v.length===0&&!w()&&!!t;return(0,l.jsxs)(`div`,{className:`waapi-animated-tokens-container ${u}`,children:[R&&(0,l.jsx)(Y,{text:t,mode:y.placeholder.mode,direction:y.placeholder.direction,blur:y.placeholder.blur,duration:y.placeholder.duration,initial:`initial`,animate:`animate`,className:`waapi-token-placeholder ${f}`},`placeholder`),M.map((e,t)=>{let n=x.current.has(e.id),c=P(e.id,t);return(0,l.jsxs)(`div`,{className:`waapi-token-wrapper ${d} ${n?`exit-active`:``}`,ref:t=>S(e.id,t),children:[(0,l.jsx)(Y,{text:e.text,mode:n?`none`:r,direction:i,staggerDelay:a,duration:_.DURATION_ENTER,blur:y.newToken.blur,widthAnimation:!n&&s,initial:n?!1:`initial`,animate:`animate`}),c&&(0,l.jsx)(`span`,{className:`waapi-token-separator ${p}`,ref:t=>T(e.id,t),children:o})]},e.id)}),(N>0||L)&&(0,l.jsxs)(`div`,{className:`waapi-token-overflow ${d} ${I?`entering`:``} ${L?`exiting`:``}`,ref:e=>S(`overflow-counter`,e),children:[M.length>0&&(0,l.jsx)(`span`,{className:`waapi-token-separator ${p}`,children:o}),(0,l.jsx)(`span`,{className:`waapi-token-separator ${p}`,children:`+`}),(0,l.jsx)(U,{value:N,duration:_.DURATION_ENTER,fontSize:`inherit`,fontWeight:`inherit`,color:`inherit`}),(0,l.jsx)(Y,{text:` more`,mode:r,direction:i,staggerDelay:a,duration:L?_.DURATION_EXIT:_.DURATION_ENTER,blur:y.newToken.blur,initial:I?`initial`:!1,animate:`animate`})]})]})};function ve(e){let t=(0,c.useRef)(new Map),n=(0,c.useRef)(e);return(0,c.useEffect)(()=>{n.current=e},[e]),{register:(0,c.useCallback)((e,r)=>{r?(t.current.set(e,r),n.current?.onRegister?.(e,r)):t.current.has(e)&&(t.current.delete(e),n.current?.onUnregister?.(e))},[]),unregister:(0,c.useCallback)(e=>{t.current.has(e)&&(t.current.delete(e),n.current?.onUnregister?.(e))},[]),get:(0,c.useCallback)(e=>t.current.get(e),[]),getAll:(0,c.useCallback)(()=>new Map(t.current),[]),has:(0,c.useCallback)(e=>t.current.has(e),[]),clear:(0,c.useCallback)(()=>{let e=Array.from(t.current.keys());t.current.clear(),e.forEach(e=>n.current?.onUnregister?.(e))},[]),get size(){return t.current.size}}}const ye=f.MIN_DELTA_PX;function be(e,t){let n=(0,c.useRef)(new Map),r=t?.minDeltaPx??ye;return{capture:(0,c.useCallback)(t=>{let r=new Map;return e().forEach((e,n)=>{if(t?.has(n))return;let i=e.getBoundingClientRect();i.width>0&&i.height>0&&r.set(n,i)}),n.current=r,r},[e]),getPosition:(0,c.useCallback)(e=>n.current.get(e),[]),calculateDeltas:(0,c.useCallback)((e,t)=>{let n=new Map;return t.forEach((t,i)=>{let a=e.get(i);if(!a)return;let o=a.left-t.left,s=a.top-t.top,c=a.width-t.width,l=a.height-t.height,u=Math.abs(o)>=r||Math.abs(s)>=r||Math.abs(c)>=r||Math.abs(l)>=r;n.set(i,{id:i,deltaX:o,deltaY:s,deltaWidth:c,deltaHeight:l,isSignificant:u})}),n},[r]),getLastCapture:(0,c.useCallback)(()=>new Map(n.current),[]),clear:(0,c.useCallback)(()=>{n.current.clear()},[])}}const xe=f.FLIP_DURATION,Se=h.SPRING_GENTLE;function Ce(){let e=(0,c.useRef)(new Map),t=(0,c.useRef)(new Set),n=(0,c.useCallback)((n,r,i)=>{let a=i?.duration??xe,o=i?.easing??Se;e.current.has(r.id)&&e.current.get(r.id)?.cancel(),t.current.add(r.id),i?.onStart?.(r.id);let s=n.animate([{transform:`translate3d(${r.deltaX}px, ${r.deltaY}px, 0)`},{transform:`translate3d(0, 0, 0)`}],{duration:a,easing:o});return e.current.set(r.id,s),s.onfinish=()=>{t.current.delete(r.id),e.current.delete(r.id),i?.onComplete?.(r.id)},s.oncancel=()=>{t.current.delete(r.id),e.current.delete(r.id)},s},[]),r=(0,c.useCallback)(async(e,t,r)=>{let i=[];t.forEach((t,a)=>{if(!t.isSignificant)return;let o=e.get(a);if(!o)return;let s=n(o,t,r);i.push(s)}),i.length!==0&&await Promise.all(i.map(e=>e.finished.catch(()=>{})))},[n]),i=(0,c.useCallback)(n=>{let r=e.current.get(n);r&&(r.cancel(),e.current.delete(n),t.current.delete(n))},[]),a=(0,c.useCallback)(()=>{e.current.forEach(e=>e.cancel()),e.current.clear(),t.current.clear()},[]),o=(0,c.useCallback)(e=>e?t.current.has(e):t.current.size>0,[]);(0,c.useEffect)(()=>()=>{a()},[a]);let s=(0,c.useRef)({animate:n,animateAll:r,cancel:i,cancelAll:a,isAnimating:o});return s.current.animate=n,s.current.animateAll=r,s.current.cancel=i,s.current.cancelAll=a,s.current.isAnimating=o,s.current}function we(e){let t=(0,c.useRef)(e);(0,c.useEffect)(()=>{t.current=e},[e]);let{logEvent:n}=W(),r=(0,c.useRef)(n);(0,c.useEffect)(()=>{r.current=n},[n]);let i=(0,c.useRef)({animatingIds:new Set,positions:new Map,activeAnimations:new Map}),a=ve(),o=be(a.getAll,{minDeltaPx:e?.minDeltaPx??f.MIN_DELTA_PX}),s=Ce(),l=e?.exitDuration??f.EXIT_DURATION,u=e?.flipDuration??f.FLIP_DURATION,d=e?.exitEasing??h.EASE_IN_CUBIC,g=(0,c.useCallback)(e=>{let t=i.current.activeAnimations.get(e);t&&(t.forEach(e=>e.cancel()),i.current.activeAnimations.delete(e)),i.current.animatingIds.delete(e),s.cancel(e)},[s]),_=(0,c.useCallback)(()=>{i.current.activeAnimations.forEach(e=>{e.forEach(e=>e.cancel())}),i.current.activeAnimations.clear(),i.current.animatingIds.clear(),s.cancelAll()},[s]),v=e?.flipBehavior??`all`,y=e?.exitPositionStrategy??`absolute-fixed`,b=(0,c.useCallback)(async(e,n)=>{let r=a.get(e);if(!r||i.current.animatingIds.has(e))return;i.current.animatingIds.add(e);let o=n?.duration??l,s=n?.easing??d,c=a.getAll(),g=new Map,_=r.getBoundingClientRect();g.set(e,_),c.forEach((t,n)=>{if(n!==e){let e=t.getBoundingClientRect();e.width>0&&e.height>0&&g.set(n,e)}});let b=r.parentElement;r.dataset.reorderState=`exiting`,y===`absolute-fixed`&&(r.dataset.exitPosition=`absolute`);let x=b?.getBoundingClientRect()||{left:0,top:0},S=_.left-x.left,C=_.top-x.top;y===`absolute-fixed`&&(r.style.position=`absolute`,r.style.left=`${S}px`,r.style.top=`${C}px`,r.style.width=`${_.width}px`,r.style.height=`${_.height}px`,r.style.margin=`0`);let w=b?.getBoundingClientRect()||{left:0,top:0},T=w.left-x.left,E=w.top-x.top;(Math.abs(T)>.5||Math.abs(E)>.5)&&(r.style.transform=`translate(${-T}px, ${-E}px)`);let D=new Map;c.forEach((t,n)=>{if(n!==e){let e=t.getBoundingClientRect();e.width>0&&e.height>0&&D.set(n,e)}});let O=[];if(v!==`none`){let t=[];if(v===`all`)t=[...D.keys()];else if(v===`siblings-after`){let n=Array.from(c.entries());n.sort((e,t)=>{let n=e[1],r=t[1];return n.compareDocumentPosition(r)&Node.DOCUMENT_POSITION_FOLLOWING?-1:1});let r=n.map(([e])=>e),i=r.indexOf(e);i!==-1&&(t=r.slice(i+1).filter(e=>D.has(e)))}t.forEach(e=>{let t=g.get(e),n=D.get(e);if(!t||!n)return;let r=t.left-n.left,i=t.top-n.top;if(Math.abs(r)>1||Math.abs(i)>1){let t=c.get(e);if(t){t.dataset.reorderState=`flipping`,t.style.transform=`translate(${r}px, ${i}px)`;let e=t.animate([{transform:`translate(${r}px, ${i}px)`},{transform:`none`}],{duration:u,easing:h.MATERIAL_DECELERATE,fill:`forwards`});O.push(e),e.finished.then(()=>{t.style.transform=``,t.dataset.reorderState=`idle`}).catch(()=>{t.style.transform=``,t.dataset.reorderState=`idle`})}}})}let k=[],A=r.querySelectorAll(`.sliding-text-token`);if(A.length>0)A.forEach((e,t)=>{let n=t*f.EXIT_STAGGER,r=e.animate([{opacity:1,transform:`translateY(0) scale(1)`,filter:`blur(0px)`},{opacity:0,transform:`translateY(${p.OFFSET_Y_EXIT}px) scale(${p.SCALE_EXIT})`,filter:`blur(${m.BLUR_EXIT}px)`}],{duration:o,easing:s,delay:n,fill:`forwards`});k.push(r)});else{let e=r.animate([{opacity:1,transform:`scale(1)`},{opacity:0,transform:`scale(${p.SCALE_EXIT})`}],{duration:o,easing:s,fill:`forwards`});k.push(e)}i.current.activeAnimations.set(e,[...k,...O]);try{await Promise.all([...k.map(e=>e.finished),...O.map(e=>e.finished)])}catch{i.current.animatingIds.delete(e),i.current.activeAnimations.delete(e);return}i.current.animatingIds.delete(e),i.current.activeAnimations.delete(e),r.dataset.reorderState=`completed`,y===`absolute-fixed`&&(r.style.removeProperty(`position`),r.style.removeProperty(`left`),r.style.removeProperty(`top`),r.style.removeProperty(`width`),r.style.removeProperty(`height`),r.style.removeProperty(`margin`)),delete r.dataset.exitPosition,a.unregister(e),n?.onComplete?.(),t.current?.onExitComplete?.(e)},[a,l,d,u,v,y]),x=(0,c.useCallback)(async(e,n)=>{let r=a.get(e);if(!r)return;r.dataset.reorderState||(r.dataset.reorderState=`entering`);let i=t.current?.enterDuration??f.ENTER_DURATION,o=t.current?.enterEasing??h.MATERIAL_DECELERATE,s=n?.duration??i,c=n?.easing??o,l=n?.stagger??f.ENTER_STAGGER,u=r.querySelectorAll(`.sliding-text-token`),d=[],p={opacity:0,transform:`translateY(-8px) scale(0.95)`},g={opacity:1,transform:`none`};if(u.length>0)u.forEach((e,t)=>{let n=t*l;e.dataset.reorderIndex=String(t);let r=e.animate([{...p,filter:`blur(${m.BLUR_ENTER}px)`},{...g,filter:`blur(0px)`}],{duration:s,easing:c,delay:n,fill:`forwards`});d.push(r)});else{let e=r.animate([p,g],{duration:s,easing:c,fill:`forwards`});d.push(e)}try{await Promise.all(d.map(e=>e.finished))}catch{r.dataset.reorderState=`idle`;return}r.dataset.reorderState=`idle`,n?.onComplete?.(),t.current?.onEnterComplete?.(e)},[a]),S=(0,c.useCallback)(e=>e?i.current.animatingIds.has(e):i.current.animatingIds.size>0,[]),C=(0,c.useCallback)(e=>o.capture(e),[o]);return(0,c.useEffect)(()=>()=>{_()},[_]),{registry:a,positions:o,flip:s,registerElement:a.register,startExit:b,startEnter:x,isAnimating:S,cancelAnimation:g,cancelAllAnimations:_,capturePositions:C}}function X(e){let{logEvent:t}=W(),n=(0,c.useRef)(t);(0,c.useEffect)(()=>{n.current=t},[t]);let r=we({enterDuration:e?.enterDuration,exitDuration:e?.exitDuration,flipDuration:e?.flipDuration,enterEasing:e?.enterEasing,exitEasing:e?.exitEasing,flipEasing:e?.flipEasing,flipBehavior:e?.flipBehavior,onExitComplete:e?.onComplete});return(0,c.useEffect)(()=>()=>{},[]),{...r,registerElement:r.registerElement,startItemExit:r.startExit,startItemEnter:r.startEnter}}function Te(e,t={}){let{autoAnimate:n=!0,stagger:r,enterDuration:i,exitDuration:a,flipDuration:o,enterEasing:s,exitEasing:l,flipEasing:u}=t,{logEvent:d}=W(),f=(0,c.useRef)(d);(0,c.useEffect)(()=>{f.current=d},[d]);let p=(0,c.useRef)(t);(0,c.useEffect)(()=>{p.current=t},[t]);let m=(0,c.useRef)(new Set),h=(0,c.useRef)(new Set),g=(0,c.useRef)(new Set),_=(0,c.useCallback)((e,t)=>r?typeof r==`number`?r*e:(r[t]??0)*e:0,[r]),v=X({enterDuration:i,exitDuration:a,flipDuration:o,enterEasing:s,exitEasing:l,flipEasing:u,onComplete:(0,c.useCallback)(e=>{m.current.delete(e),p.current.onAnimationComplete?.(e)},[])}),y=(0,c.useMemo)(()=>{let t=new Set;return c.Children.forEach(e,e=>{(0,c.isValidElement)(e)&&e.key!=null&&t.add(String(e.key))}),t},[e]);(0,c.useLayoutEffect)(()=>{let e=g.current,t=[];y.forEach(n=>{!e.has(n)&&!h.current.has(n)&&t.push(n)}),t.length>0&&t.forEach((e,t)=>{let n=_(t,`enter`),r=()=>{h.current.add(e),p.current.onItemEnter?.(e),requestAnimationFrame(()=>{v.startItemEnter(e).then(()=>{h.current.delete(e)})})};n>0?setTimeout(r,n):r()}),g.current=new Set(y)},[y,n,v,_]);let b=(0,c.useCallback)(e=>{m.current.has(e)||v.registry.has(e)&&(m.current.add(e),p.current.onItemExit?.(e),v.startItemExit(e))},[v]),x=(0,c.useCallback)(e=>m.current.has(e),[]),S=(0,c.useCallback)(e=>h.current.has(e),[]),C=(0,c.useCallback)(()=>Array.from(m.current),[]),w=(0,c.useCallback)(()=>Array.from(h.current),[]),T=(0,c.useMemo)(()=>{let t=[];return c.Children.forEach(e,e=>{if(!(0,c.isValidElement)(e)){t.push(e);return}let n=e.key==null?null:String(e.key);n!=null&&m.current.has(n)?t.push((0,c.cloneElement)(e,{"data-reorder-state":`exiting`})):t.push(e)}),t},[e]);return(0,c.useEffect)(()=>()=>{},[]),{presentChildren:T,triggerExit:b,isExiting:x,isEntering:S,exitingIds:C(),enteringIds:w(),reorder:v}}function Ee(e,t){if(e!==void 0)return typeof e==`number`?e:e[t]}const De={auto:{position:`relative`},horizontal:{display:`flex`,flexDirection:`row`,flexWrap:`wrap`,alignItems:`center`,position:`relative`},"inline-horizontal":{display:`inline-flex`,flexDirection:`row`,flexWrap:`nowrap`,alignItems:`center`,position:`relative`},vertical:{display:`flex`,flexDirection:`column`,position:`relative`},grid:{display:`grid`,gridTemplateColumns:`repeat(auto-fill, minmax(100px, 1fr))`,gap:`8px`,position:`relative`}},Z=(0,c.forwardRef)(({children:e,autoAnimate:t=!0,stagger:n,duration:r,layout:i=`auto`,className:a=``,flipBehavior:o,exitPositionStrategy:s,onItemExit:u,onItemEnter:d},f)=>{let{logEvent:p}=W(),m=(0,c.useRef)(p);(0,c.useEffect)(()=>{m.current=p},[p]);let h=(0,c.useRef)(u),g=(0,c.useRef)(d);(0,c.useEffect)(()=>{h.current=u,g.current=d},[u,d]);let _=(0,c.useCallback)(e=>{C(t=>t.filter(t=>t.key!==e))},[]),v=X({enterDuration:Ee(r,`enter`),exitDuration:Ee(r,`exit`),flipBehavior:o,exitPositionStrategy:s,onComplete:_});(0,c.useImperativeHandle)(f,()=>({startItemExit:v.startItemExit,startItemEnter:v.startItemEnter,isAnimating:v.isAnimating}),[v.startItemExit,v.startItemEnter,v.isAnimating]);let y=(0,c.useRef)(v.startItemExit),b=(0,c.useRef)(v.startItemEnter);(0,c.useEffect)(()=>{y.current=v.startItemExit,b.current=v.startItemEnter},[v.startItemExit,v.startItemEnter]);let x=(0,c.useMemo)(()=>{let t=[];return c.Children.forEach(e,e=>{(0,c.isValidElement)(e)&&e.key!=null&&t.push({key:String(e.key),element:e})}),t},[e]),[S,C]=(0,c.useState)(x),w=(0,c.useRef)(new Set),T=(0,c.useCallback)((e,t)=>n?typeof n==`number`?n*e:(n[t]??0)*e:0,[n]);(0,c.useEffect)(()=>{let e=new Set(x.map(e=>e.key)),t=new Set(S.map(e=>e.key)),n=S.filter(t=>!e.has(t.key)&&!w.current.has(t.key)),r=x.filter(e=>!t.has(e.key));if(n.length===0&&r.length===0){x.some(e=>{let t=S.find(t=>t.key===e.key);return t&&t.element!==e.element})&&C(e=>e.map(e=>w.current.has(e.key)?e:x.find(t=>t.key===e.key)??e));return}if(n.forEach((e,t)=>{let n=T(t,`exit`);w.current.add(e.key);let r=()=>{h.current?.(e.key),y.current(e.key).finally(()=>{w.current.delete(e.key)})};n>0?setTimeout(r,n):r()}),r.length>0){let t=S.filter(t=>!e.has(t.key)),n=[...x];t.forEach(e=>{let t=S.findIndex(t=>t.key===e.key);t!==-1&&t<=n.length&&n.splice(t,0,e)}),C(n),r.forEach((e,t)=>{let n=T(t,`enter`),r=()=>{g.current?.(e.key)};n>0?setTimeout(r,n):r()})}},[x,S,T]);let E=(0,c.useMemo)(()=>{let e=new Set(x.map(e=>e.key));return S.map(({key:t,element:n})=>{let r=!!e.has(t),i=w.current.has(t);return(0,c.cloneElement)(n,{ref:e=>{e?(v.registerElement(t,e),!e.dataset.reorderState&&r&&!i&&(e.dataset.reorderState=`entering`,b.current(t))):v.registerElement(t,null);let a=n.ref;typeof a==`function`?a(e):a&&typeof a==`object`&&(a.current=e)},"data-reorder-id":t})})},[S,x,v.registerElement]);return(0,l.jsx)(`div`,{className:`waapi-reorder-container reorder ${i===`auto`?``:`reorder--${i}`} ${a}`,style:De[i],children:E})});Z.displayName=`Reorder`;const Oe=()=>typeof navigator<`u`&&navigator.language?navigator.language:`en`;function ke(e,t={}){let{locale:n,type:r=`conjunction`,style:i=`long`,separator:a,hasOverflow:o}=t;return(0,c.useMemo)(()=>{if(e.length===0)return[];if(a!==void 0){let t=[];return e.forEach((n,r)=>{t.push({type:`element`,value:n,index:r}),r<e.length-1&&t.push({type:`literal`,value:a,index:r})}),t}let t=n??Oe();try{let n=new Intl.ListFormat(t,{type:r,style:i}),a=o&&e.length>1?[...e,``]:e,s=n.formatToParts(a),c=o?s.slice(0,-2):s,l=0;return c.map(e=>e.type===`element`?{type:`element`,value:e.value,index:l++}:{type:`literal`,value:e.value,index:Math.max(0,l-1)})}catch{let t=[];return e.forEach((n,r)=>{t.push({type:`element`,value:n,index:r}),r<e.length-1&&t.push({type:`literal`,value:`, `,index:r})}),t}},[e,n,r,i,a,o])}const Ae=({tokens:e,placeholder:t=`No tokens`,maxVisible:n,textAnimationMode:r=`character`,textDirection:i=`vertical`,textStaggerDelay:a=15,locale:o,listType:s=`conjunction`,listStyle:u=`long`,separator:d,enableWidthAnimation:m=!1,inline:g=!1,className:v=``,tokenClassName:b=``,placeholderClassName:x=``,separatorClassName:S=``,overflowLabel:C=` more`,showOverflowSeparator:w=!0})=>{let{logEvent:T}=W(),E=(0,c.useRef)(T);(0,c.useEffect)(()=>{E.current=T},[T]);let D=(0,c.useRef)(new Set),O=(0,c.useRef)(new Map),k=(0,c.useRef)(new Map),A=(0,c.useMemo)(()=>n?e.slice(0,n):e,[e,n]),j=(0,c.useMemo)(()=>n?Math.max(0,e.length-n):0,[e.length,n]),M=ke(A.map(e=>e.text),{locale:o,type:s,style:u,separator:d,hasOverflow:j>0}),N=(0,c.useRef)(0),P=j>0&&N.current===0,F=j===0&&N.current>0;(0,c.useEffect)(()=>{N.current=j},[j]);let I=(0,c.useCallback)((e,t)=>{if(t>=A.length-1)return!1;let n=O.current.get(e);if(!n)return!0;switch(n.animationPhase){case`idle`:case`exit-coordinated`:case`flip-coordinated`:return!0;case`completed`:return!1;default:return!0}},[A.length]);(0,c.useEffect)(()=>{let e=new Set(A.map(e=>e.id)),t=O.current;for(let n of t.keys())e.has(n)||O.current.delete(n);A.forEach((e,t)=>{t<A.length-1&&!O.current.has(e.id)&&O.current.set(e.id,{animationPhase:`idle`})})},[A]);let L=(0,c.useCallback)(e=>{let t=k.current.get(e);t&&(O.current.set(e,{animationPhase:`exit-coordinated`}),t.dataset.separatorState=`exiting`,t.animate([{opacity:1,transform:`translateY(0) scale(1)`},{opacity:0,transform:`translateY(${p.OFFSET_Y_EXIT}px) scale(${p.SCALE_EXIT})`}],{duration:f.EXIT_DURATION,easing:h.EASE_IN_CUBIC,fill:`forwards`}).finished.then(()=>{O.current.set(e,{animationPhase:`completed`}),t.dataset.separatorState=`completed`}).catch(()=>{O.current.delete(e)}))},[]),R=(0,c.useCallback)(e=>{D.current.add(e);let t=[],n=A.findIndex(t=>t.id===e);if(n===A.length-1&&n>0){let e=A[n-1];e&&t.push(e.id)}L(e),t.forEach(e=>L(e)),E.current({type:`token-remove`,source:`TextFlow`,message:`Token exiting: ${e}`,data:{id:e,additionalSeparators:t}})},[A,L]),z=(0,c.useCallback)(e=>{E.current({type:`token-add`,source:`TextFlow`,message:`Token entering: ${e}`,data:{id:e}})},[]),B=e.length===0&&!!t,V=(0,c.useMemo)(()=>M.map((e,t)=>{if(e.type===`element`){let t=A[e.index];if(!t)return null;let n=D.current.has(t.id);return(0,l.jsx)(`span`,{className:`waapi-token-wrapper ${b}`,"data-reorder-id":t.id,children:(0,l.jsx)(Y,{text:t.text,mode:n?`none`:r,direction:i,staggerDelay:a,duration:_.DURATION_ENTER,blur:y.newToken.blur,widthAnimation:!n&&m,initial:n?!1:`initial`,animate:`animate`})},t.id)}let n=A[e.index];if(!n)return null;let o=A.findIndex(e=>e.id===n.id);return I(n.id,o)?(0,l.jsx)(`span`,{ref:e=>{e?k.current.set(n.id,e):k.current.delete(n.id)},className:`waapi-token-separator ${S}`,"data-separator-state":O.current.get(n.id)?.animationPhase??`idle`,children:e.value},`sep-${n.id}`):null}).filter(Boolean),[M,A,b,r,i,a,m,S,I]),H=(0,c.useMemo)(()=>j===0&&!F?null:(0,l.jsxs)(`div`,{"data-reorder-id":`overflow-counter`,className:`waapi-token-overflow ${b} ${P?`entering`:``} ${F?`exiting`:``}`,children:[(0,l.jsx)(`span`,{className:`waapi-token-separator ${S}`,children:`+`}),(0,l.jsx)(U,{value:j,duration:_.DURATION_ENTER,fontSize:`inherit`,fontWeight:`inherit`,color:`inherit`}),C&&(0,l.jsx)(Y,{text:C,mode:r,direction:i,staggerDelay:a,duration:F?_.DURATION_EXIT:_.DURATION_ENTER,blur:y.newToken.blur,initial:P?`initial`:!1,animate:`animate`})]},`overflow-counter`),[j,P,F,b,S,r,i,a,C]);return(0,l.jsxs)(`div`,{role:`text`,className:`waapi-animated-tokens-container waapi-v2 ${g?`waapi-animated-tokens-container--inline`:``} ${v}`,children:[B&&(0,l.jsx)(Y,{text:t,mode:y.placeholder.mode,direction:y.placeholder.direction,blur:y.placeholder.blur,duration:y.placeholder.duration,initial:`initial`,animate:`animate`,className:`waapi-token-placeholder ${x}`},`placeholder`),(0,l.jsxs)(Z,{layout:g?`inline-horizontal`:`horizontal`,onItemExit:R,onItemEnter:z,children:[V,H]})]})},Q=(0,c.createContext)(null);function je(){let e=(0,c.useContext)(Q);if(!e)throw Error(`useMorphContext must be used within a <Morph> component. Wrap your morphable components with <Morph>.`);return e}const Me=f.FLIP_DURATION,Ne=h.EASE_OUT_CUBIC;function Pe(e){let[t,n]=(0,c.useState)(!1),r=(0,c.useRef)([]),i=(0,c.useRef)(e);(0,c.useEffect)(()=>{i.current=e},[e]);let a=(0,c.useCallback)(()=>{r.current.forEach(e=>e.cancel()),r.current=[],n(!1)},[]),o=(0,c.useCallback)(async(e,o)=>{t&&a(),n(!0);let s=i.current?.duration??Me,c=i.current?.easing??Ne,l=e.getBoundingClientRect(),u=o.getBoundingClientRect(),d=l.left-u.left,f=l.top-u.top,p=l.width/u.width,m=l.height/u.height,h=getComputedStyle(e).borderRadius,g=getComputedStyle(o).borderRadius,_=i.current?.clipPathStart||$(h,l),v=i.current?.clipPathEnd||$(g,u),y={position:e.style.position,opacity:e.style.opacity,pointerEvents:e.style.pointerEvents},b={position:o.style.position,opacity:o.style.opacity,transform:o.style.transform,clipPath:o.style.clipPath};e.style.position=`absolute`,e.style.pointerEvents=`none`,o.style.position=`relative`,o.style.transform=`translate(${d}px, ${f}px) scale(${p}, ${m})`,o.style.clipPath=_,o.style.opacity=`0`;let x=e.animate([{opacity:1},{opacity:0}],{duration:s*.5,easing:c,fill:`forwards`}),S=o.animate([{opacity:0},{opacity:1}],{duration:s*.5,delay:s*.25,easing:c,fill:`forwards`}),C=o.animate([{transform:`translate(${d}px, ${f}px) scale(${p}, ${m})`,clipPath:_},{transform:`translate(0, 0) scale(1, 1)`,clipPath:v}],{duration:s,easing:c,fill:`forwards`});r.current=[x,S,C];try{await Promise.all([x.finished,S.finished,C.finished])}catch{Object.assign(e.style,y),Object.assign(o.style,b),n(!1);return}Object.assign(e.style,y),o.style.transform=``,o.style.clipPath=``,o.style.opacity=`1`,r.current=[],n(!1)},[t,a]);return(0,c.useEffect)(()=>()=>{a()},[a]),{isMorphing:t,morph:o,cancel:a}}function $(e,t){let n=parseFloat(e)||0;return`inset(0 round ${n/t.width*100}% ${n/t.height*100}%)`}const Fe=f.FLIP_DURATION,Ie=h.MATERIAL_STANDARD;function Le(e){let[t,n]=(0,c.useState)(!1),r=(0,c.useRef)(null),i=(0,c.useRef)(e),a=i.current?.duration??Fe,o=i.current?.easing??Ie,s=(0,c.useCallback)(()=>{r.current&&(r.current.style.transition=`grid-template-rows ${a}ms ${o}`)},[a,o]),l=(0,c.useCallback)(()=>{s(),r.current&&(r.current.style.gridTemplateRows=`1fr`),n(!0)},[s]),u=(0,c.useCallback)(()=>{s(),r.current&&(r.current.style.gridTemplateRows=`0fr`),n(!1)},[s]);return{isExpanded:t,expand:l,collapse:u,toggle:(0,c.useCallback)(()=>{t?u():l()},[t,l,u]),containerRef:r}}function Re(e){let t=(0,c.useRef)(e),n=(0,c.useRef)(e?.types||[]),r=(0,c.useMemo)(()=>typeof document>`u`?!1:`startViewTransition`in document,[]),i=(0,c.useCallback)(e=>{n.current=e},[]);return{isSupported:r,startTransition:(0,c.useCallback)(async e=>{if(!document.startViewTransition){await e();return}let n=t.current?.name,r=(()=>{if(n){let e=document.createElement(`style`);return e.id=`view-transition-${n}`,e.textContent=`
+            `,"--blur-amount":o?`${_.BLUR_AMOUNT}px`:`0px`,"--offset":n===`vertical`?`${_.OFFSET_VERTICAL}px`:`${_.OFFSET_HORIZONTAL}px`}};return(0,l.jsx)(`div`,{ref:m,className:`waapi-sliding-text-container ${f}`,style:p,children:(0,l.jsx)(`div`,{ref:h,className:`waapi-sliding-text-content waapi-direction-${n}`,children:w.map((e,t)=>(0,l.jsx)(`span`,{className:`waapi-sliding-text-token ${C===`initial`?`enter-from`:C===`animate`?`enter-to`:`exit-active`}`,style:E(t),children:e},t))})})},ge=e=>{let{logEvent:t}=W(),n=(0,c.useRef)(t);(0,c.useEffect)(()=>{n.current=t},[t]);let r=(0,c.useRef)(e);(0,c.useEffect)(()=>{r.current=e},[e]);let i=(0,c.useRef)(new Map),a=(0,c.useRef)(new Map),o=(0,c.useRef)({animatingIds:new Set,positions:new Map,separatorStates:new Map}),s=(0,c.useRef)(new Map),l=(0,c.useCallback)((e,t)=>{t?i.current.set(e,t):i.current.delete(e)},[]),u=(0,c.useCallback)(e=>{let t=new Map;return i.current.forEach((n,r)=>{if(!e.has(r)){let e=n.getBoundingClientRect();e.width>0&&e.height>0&&t.set(r,e)}}),o.current.positions=t,t},[]),d=(0,c.useCallback)(e=>{let t=s.current.get(e);t&&(t.forEach(e=>e.cancel()),s.current.delete(e))},[]),g=(0,c.useCallback)((e,t)=>{o.current.separatorStates.has(e)||o.current.separatorStates.set(e,{tokenId:e,isVisible:!0,isAnimating:!1,animationPhase:`idle`}),t?a.current.set(e,t):a.current.delete(e)},[]),_=(0,c.useCallback)(e=>o.current.separatorStates.get(e),[]),v=(0,c.useCallback)(async e=>{let t=a.current.get(e),i=o.current.separatorStates.get(e);if(!t){if(i){n.current({type:`separator-animation-state-only`,source:`useWAAPIAnimations.startSeparatorAnimation`,message:`Separator state exists but no DOM element for token: ${e} - marking as completed`,data:{tokenId:e,reason:`state-no-element`}}),i.animationPhase=`completed`,i.isVisible=!1;return}n.current({type:`separator-animation-skipped`,source:`useWAAPIAnimations.startSeparatorAnimation`,message:`No separator element found for token: ${e} - skipping animation`,data:{tokenId:e,reason:`no-separator-element`}});return}let s=r.current.exitDuration||f.EXIT_DURATION,c=r.current.exitEasing||h.EASE_IN_CUBIC,l={tokenId:e,isVisible:!0,isAnimating:!0,animationPhase:`exit-coordinated`,startTime:performance.now(),expectedEndTime:performance.now()+s};o.current.separatorStates.set(e,l);let u=`separator-${e}-${Date.now()}`;J.startAnimation(u,`separator-exit`,e,s),n.current({type:`separator-animation-start`,source:`useWAAPIAnimations.startSeparatorAnimation`,message:`Separator animation starting for token: ${e}`,timing:{startTime:l.startTime||Date.now(),expectedDuration:s},data:{tokenId:e,duration:s}}),t.classList.add(`exit-coordinated`);let d=t.animate([{opacity:1,transform:`translateY(0) scale(1)`},{opacity:0,transform:`translateY(${p.OFFSET_Y_EXIT}px) scale(${p.SCALE_EXIT})`}],{duration:s,easing:c,fill:`forwards`});try{await d.finished}catch{return}l.animationPhase=`completed`,l.isVisible=!1,t.classList.add(`exit-completed`),J.endAnimation(u),n.current({type:`separator-animation-complete`,source:`useWAAPIAnimations.startSeparatorAnimation`,message:`Separator animation complete for token: ${e}`,data:{tokenId:e,duration:s}})},[]),y=(0,c.useCallback)(e=>{Array.from(o.current.separatorStates.keys()).forEach(t=>{e.has(t)||(o.current.separatorStates.delete(t),n.current({type:`separator-state-cleanup`,source:`useWAAPIAnimations.cleanupSeparatorStates`,message:`Removed separator state for non-existent token: ${t}`,data:{tokenId:t}}))})},[]),b=(0,c.useCallback)(async(e,t)=>{let a=i.current.get(e);if(!a||o.current.animatingIds.has(e))return;o.current.animatingIds.add(e),u(new Set([e])),new Set([e,...t||[]]).forEach(e=>{v(e)});let c=r.current.exitDuration||f.EXIT_DURATION,l=r.current.exitEasing||h.EASE_IN_CUBIC,d=r.current.flipDuration||f.FLIP_DURATION,g=p.OFFSET_Y_EXIT,_=p.SCALE_EXIT,y=m.BLUR_EXIT,b=f.EXIT_STAGGER,x=a.getBoundingClientRect(),S=getComputedStyle(a),C=parseFloat(S.marginRight)||0,w=q(c),T=q(c+d),E=G(a),D=K(a),O=`exit-${e}-${Date.now()}`;J.startAnimation(O,`exit-fade`,e,c);let k=`width-${e}-${Date.now()}`;J.startAnimation(k,`width-collapse`,e,c),n.current({type:`animation-start-detailed`,source:`useWAAPIAnimations.startExit`,message:`Exit animation starting for: ${e}`,timing:{startTime:w.start,expectedDuration:c},styles:Object.entries(E).map(([e,t])=>({property:e,expected:t,actual:t,matches:!0})),position:{element:e,x:D.x,y:D.y,width:D.width,height:D.height},animation:{name:`exit`,phase:`start`,easing:l,fill:`forwards`},data:{id:e,capturedPositions:o.current.positions.size,wrapperWidth:x.width,marginRight:C,expectedFinalStyles:{opacity:`0`,transform:`translateY(${g}px) scale(${_})`,filter:`blur(${y}px)`,width:`0px`,marginRight:`0px`}}});let A=[],j=[],M=!1,N=a.querySelectorAll(`.sliding-text-token`);if(N.length>0)N.forEach((e,t)=>{let n=t*b,r=e.animate([{opacity:1,transform:`translateY(0) scale(1)`,filter:`blur(0px)`},{opacity:0,transform:`translateY(${g}px) scale(${_})`,filter:`blur(${y}px)`}],{duration:c,easing:l,delay:n,fill:`forwards`});A.push(r)});else{let e=a.animate([{opacity:1,transform:`translateY(0) scale(1)`},{opacity:0,transform:`translateY(${g}px) scale(${_})`}],{duration:c,easing:l,fill:`forwards`});A.push(e)}a.style.overflow=`hidden`;let P=a.animate([{width:`${x.width}px`,marginRight:`${C}px`},{width:`0px`,marginRight:`0px`}],{duration:c,easing:l,fill:`forwards`});A.push(P),s.current.set(e,A);let F=c*f.FLIP_DELAY_PERCENT,I=()=>{if(!M){if(M=!0,a.style.position=`absolute`,a.style.opacity=`0`,a.style.pointerEvents=`none`,Array.from(i.current.entries()).filter(([t])=>t!==e).length===0){n.current({type:`flip-skipped`,source:`useWAAPIAnimations.startExit`,message:`No remaining elements to FLIP - skipping animation`,data:{id:e}});return}i.current.forEach((t,r)=>{if(r===e)return;let i=o.current.positions.get(r);if(!i)return;let a=t.getBoundingClientRect(),s=i.left-a.left,c=i.top-a.top;if(Math.abs(s)<1&&Math.abs(c)<1)return;let l=`flip-${r}-${Date.now()}`;J.startAnimation(l,`flip`,r,d),n.current({type:`flip-animation`,source:`useWAAPIAnimations.startExit`,message:`FLIP animation for: ${r}`,timing:{startTime:performance.now(),expectedDuration:d},position:{element:r,x:a.left,y:a.top,width:a.width,height:a.height,delta:{x:s,y:c}},animation:{name:`flip`,phase:`start`,easing:h.SPRING_GENTLE,fill:`none`},data:{id:r,deltaX:Math.round(s*100)/100,deltaY:Math.round(c*100)/100,prevPosition:{x:i.left,y:i.top,width:i.width,height:i.height},newPosition:{x:a.left,y:a.top,width:a.width,height:a.height}}});let u=t.animate([{transform:`translate3d(${s}px, ${c}px, 0)`},{transform:`translate3d(0, 0, 0)`}],{duration:d,easing:h.SPRING_GENTLE});u.onfinish=()=>{J.endAnimation(l),n.current({type:`flip-animation-complete`,source:`useWAAPIAnimations.startExit`,message:`FLIP complete for: ${r}`,animation:{name:`flip`,phase:`complete`,progress:1},data:{id:r}})},j.push(u)})}},L=setTimeout(I,F);try{let t=A.filter(e=>e!==P),r=P.finished;await Promise.all(t.map(e=>e.finished));let i=w.end();n.current({type:`exit-fade-complete`,source:`useWAAPIAnimations.startExit`,message:`Exit fade complete for: ${e}`,timing:{startTime:i.startTime,endTime:i.endTime,expectedDuration:i.expectedDuration,actualDuration:i.actualDuration,deviation:i.deviation,deviationPercent:i.deviationPercent},animation:{name:`exit-fade`,phase:`complete`,progress:1,easing:l},data:{id:e}}),I(),await Promise.all([...j.map(e=>e.finished.catch(()=>{})),r])}catch{clearTimeout(L),o.current.animatingIds.delete(e);return}J.endAnimation(O),J.endAnimation(k);let R=T.end(),z=K(a),B=ue({opacity:`0`,width:`0px`,marginRight:`0px`},a);n.current({type:`orchestration-complete`,source:`useWAAPIAnimations.startExit`,message:`Orchestration complete for: ${e}`,timing:{startTime:R.startTime,endTime:R.endTime,expectedDuration:R.expectedDuration,actualDuration:R.actualDuration,deviation:R.deviation,deviationPercent:R.deviationPercent},styles:B,position:{element:e,x:z.x,y:z.y,width:z.width,height:z.height},animation:{name:`orchestration`,phase:`complete`,progress:1,easing:l,fill:`forwards`},data:{id:e,choreographySummary:J.getSummary(),deviationStatus:Math.abs(R.deviation)<100?`OK`:`WARNING`,styleMatchCount:B.filter(e=>e.matches).length,styleMismatchCount:B.filter(e=>!e.matches).length}}),n.current({type:`animation-timing`,source:`useWAAPIAnimations.startExit`,message:`Orchestration timing for: ${e}`,timing:{startTime:R.startTime,endTime:R.endTime,expectedDuration:R.expectedDuration,actualDuration:R.actualDuration,deviation:R.deviation,deviationPercent:R.deviationPercent},animation:{name:`orchestration`,phase:`complete`},data:{id:e,status:Math.abs(R.deviation)<100?`✅ ON TIME`:`⚠️ SLOW`}}),o.current.animatingIds.delete(e),s.current.delete(e),i.current.delete(e),r.current.onComplete(e)},[u]),x=(0,c.useCallback)(e=>e?o.current.animatingIds.has(e):o.current.animatingIds.size>0,[]);return(0,c.useEffect)(()=>()=>{s.current.forEach(e=>{e.forEach(e=>e.cancel())}),s.current.clear()},[]),{registerElement:l,startExit:b,isAnimating:x,cancelAnimations:d,registerSeparator:g,getSeparatorState:_,startSeparatorAnimation:v,cleanupSeparatorStates:y}},_e=({tokens:e,placeholder:t=`No tokens`,maxVisible:n,textAnimationMode:r=`character`,textDirection:i=`vertical`,textStaggerDelay:a=15,separator:o=`, `,enableWidthAnimation:s=!1,className:u=``,tokenClassName:d=``,placeholderClassName:f=``,separatorClassName:p=``})=>{let{logEvent:m}=W(),h=(0,c.useRef)(!0),g=(0,c.useRef)(m);(0,c.useEffect)(()=>{g.current=m},[m]),(0,c.useEffect)(()=>(h.current=!0,g.current({type:`render`,source:`AnimatedTokens.mount`,message:`AnimatedTokens mounted`,data:{tokenCount:e.length}}),()=>{g.current({type:`component-unmounted`,source:`AnimatedTokens.unmount`,message:`AnimatedTokens UNMOUNTING`,data:{timestamp:Date.now()}}),h.current=!1}),[]);let[v,b]=(0,c.useState)(e),x=(0,c.useRef)(new Set),{registerElement:S,startExit:C,isAnimating:w,registerSeparator:T,getSeparatorState:E,cleanupSeparatorStates:D}=ge({onComplete:(0,c.useCallback)(e=>{h.current&&(g.current({type:`token-dom-remove`,source:`AnimatedTokens.onComplete`,message:`Token removed from DOM: ${e}`,data:{id:e}}),x.current.delete(e),b(t=>t.filter(t=>t.id!==e)))},[])}),O=(0,c.useRef)(C),k=(0,c.useRef)(E),A=(0,c.useRef)(D);(0,c.useEffect)(()=>{O.current=C,k.current=E,A.current=D},[C,E,D]);let j=v.filter(e=>!x.current.has(e.id)||!w(e.id)),M=n?v.slice(0,n):v,N=n?Math.max(0,j.length-n):0,P=(e,t)=>{if(t>=M.length-1)return!1;let n=k.current?.(e);if(!n)return!0;switch(n.animationPhase){case`idle`:case`exit-coordinated`:case`flip-coordinated`:return!0;case`completed`:return!1;default:return!0}};(0,c.useEffect)(()=>{let t=new Set(e.map(e=>e.id)),r=new Set(v.map(e=>e.id)),i=new Set(M.map(e=>e.id));A.current?.(i);let a=v.filter(e=>!t.has(e.id)&&!x.current.has(e.id)),o=e.filter(e=>!r.has(e.id));if(!(a.length===0&&o.length===0)&&(g.current({type:`render`,source:`AnimatedTokens.useEffect`,message:`Token sync`,data:{currentTokens:e.map(e=>e.id),displayTokens:v.map(e=>e.id),removed:a.map(e=>e.id),added:o.map(e=>e.id),animating:Array.from(x.current)}}),a.forEach(e=>{let t=v.findIndex(t=>t.id===e.id);if(n!==void 0&&t>=n)g.current({type:`overflow-token-remove`,source:`AnimatedTokens.useEffect`,message:`Removing overflow token without animation`,data:{id:e.id}}),b(t=>t.filter(t=>t.id!==e.id));else{let t=[],r=v.slice(0,n),i=r.findIndex(t=>t.id===e.id),a=i<r.length-1;if(i===r.length-1&&i>0){let e=r[i-1];e&&t.push(e.id)}g.current({type:`token-remove`,source:`AnimatedTokens.useEffect`,message:`Token marked for exit: ${e.text}`,data:{id:e.id,text:e.text,additionalSeparators:t,shouldAnimateOwnSeparator:a,wasLastVisible:i===r.length-1}}),x.current.add(e.id);let o=a?[e.id,...t]:t;O.current(e.id,o)}}),o.length>0)){o.forEach(e=>{g.current({type:`token-add`,source:`AnimatedTokens.useEffect`,message:`New token detected: ${e.text}`,data:{id:e.id,text:e.text}})}),o.forEach(t=>{let r=e.findIndex(e=>e.id===t.id);(n?r<Math.min(n,e.length)-1:r<e.length-1)&&T(t.id,null)});let r=v.filter(e=>!t.has(e.id)),i=[...e];r.forEach(e=>{let t=v.findIndex(t=>t.id===e.id);t!==-1&&t<=i.length&&i.splice(t,0,e)}),JSON.stringify(i.map(e=>e.id))!==JSON.stringify(v.map(e=>e.id))&&b(i)}},[e,n]);let F=(0,c.useRef)(0),I=N>0&&F.current===0,L=N===0&&F.current>0;(0,c.useEffect)(()=>{F.current=N},[N]);let R=v.length===0&&!w()&&!!t;return(0,l.jsxs)(`div`,{className:`waapi-animated-tokens-container ${u}`,children:[R&&(0,l.jsx)(Y,{text:t,mode:y.placeholder.mode,direction:y.placeholder.direction,blur:y.placeholder.blur,duration:y.placeholder.duration,initial:`initial`,animate:`animate`,className:`waapi-token-placeholder ${f}`},`placeholder`),M.map((e,t)=>{let n=x.current.has(e.id),c=P(e.id,t);return(0,l.jsxs)(`div`,{className:`waapi-token-wrapper ${d} ${n?`exit-active`:``}`,ref:t=>S(e.id,t),children:[(0,l.jsx)(Y,{text:e.text,mode:n?`none`:r,direction:i,staggerDelay:a,duration:_.DURATION_ENTER,blur:y.newToken.blur,widthAnimation:!n&&s,initial:n?!1:`initial`,animate:`animate`}),c&&(0,l.jsx)(`span`,{className:`waapi-token-separator ${p}`,ref:t=>T(e.id,t),children:o})]},e.id)}),(N>0||L)&&(0,l.jsxs)(`div`,{className:`waapi-token-overflow ${d} ${I?`entering`:``} ${L?`exiting`:``}`,ref:e=>S(`overflow-counter`,e),children:[M.length>0&&(0,l.jsx)(`span`,{className:`waapi-token-separator ${p}`,children:o}),(0,l.jsx)(`span`,{className:`waapi-token-separator ${p}`,children:`+`}),(0,l.jsx)(U,{value:N,duration:_.DURATION_ENTER,fontSize:`inherit`,fontWeight:`inherit`,color:`inherit`}),(0,l.jsx)(Y,{text:` more`,mode:r,direction:i,staggerDelay:a,duration:L?_.DURATION_EXIT:_.DURATION_ENTER,blur:y.newToken.blur,initial:I?`initial`:!1,animate:`animate`})]})]})};function ve(e){let t=(0,c.useRef)(new Map),n=(0,c.useRef)(e);return(0,c.useEffect)(()=>{n.current=e},[e]),{register:(0,c.useCallback)((e,r)=>{r?(t.current.set(e,r),n.current?.onRegister?.(e,r)):t.current.has(e)&&(t.current.delete(e),n.current?.onUnregister?.(e))},[]),unregister:(0,c.useCallback)(e=>{t.current.has(e)&&(t.current.delete(e),n.current?.onUnregister?.(e))},[]),get:(0,c.useCallback)(e=>t.current.get(e),[]),getAll:(0,c.useCallback)(()=>new Map(t.current),[]),has:(0,c.useCallback)(e=>t.current.has(e),[]),clear:(0,c.useCallback)(()=>{let e=Array.from(t.current.keys());t.current.clear(),e.forEach(e=>n.current?.onUnregister?.(e))},[]),get size(){return t.current.size}}}const ye=f.MIN_DELTA_PX;function be(e,t){let n=(0,c.useRef)(new Map),r=t?.minDeltaPx??ye;return{capture:(0,c.useCallback)(t=>{let r=new Map;return e().forEach((e,n)=>{if(t?.has(n))return;let i=e.getBoundingClientRect();i.width>0&&i.height>0&&r.set(n,i)}),n.current=r,r},[e]),getPosition:(0,c.useCallback)(e=>n.current.get(e),[]),calculateDeltas:(0,c.useCallback)((e,t)=>{let n=new Map;return t.forEach((t,i)=>{let a=e.get(i);if(!a)return;let o=a.left-t.left,s=a.top-t.top,c=a.width-t.width,l=a.height-t.height,u=Math.abs(o)>=r||Math.abs(s)>=r||Math.abs(c)>=r||Math.abs(l)>=r;n.set(i,{id:i,deltaX:o,deltaY:s,deltaWidth:c,deltaHeight:l,isSignificant:u})}),n},[r]),getLastCapture:(0,c.useCallback)(()=>new Map(n.current),[]),clear:(0,c.useCallback)(()=>{n.current.clear()},[])}}const xe=f.FLIP_DURATION,Se=h.SPRING_GENTLE;function Ce(){let e=(0,c.useRef)(new Map),t=(0,c.useRef)(new Set),n=(0,c.useCallback)((n,r,i)=>{let a=i?.duration??xe,o=i?.easing??Se;e.current.has(r.id)&&e.current.get(r.id)?.cancel(),t.current.add(r.id),i?.onStart?.(r.id);let s=n.animate([{transform:`translate3d(${r.deltaX}px, ${r.deltaY}px, 0)`},{transform:`translate3d(0, 0, 0)`}],{duration:a,easing:o});return e.current.set(r.id,s),s.onfinish=()=>{t.current.delete(r.id),e.current.delete(r.id),i?.onComplete?.(r.id)},s.oncancel=()=>{t.current.delete(r.id),e.current.delete(r.id)},s},[]),r=(0,c.useCallback)(async(e,t,r)=>{let i=[];t.forEach((t,a)=>{if(!t.isSignificant)return;let o=e.get(a);if(!o)return;let s=n(o,t,r);i.push(s)}),i.length!==0&&await Promise.all(i.map(e=>e.finished.catch(()=>{})))},[n]),i=(0,c.useCallback)(n=>{let r=e.current.get(n);r&&(r.cancel(),e.current.delete(n),t.current.delete(n))},[]),a=(0,c.useCallback)(()=>{e.current.forEach(e=>e.cancel()),e.current.clear(),t.current.clear()},[]),o=(0,c.useCallback)(e=>e?t.current.has(e):t.current.size>0,[]);(0,c.useEffect)(()=>()=>{a()},[a]);let s=(0,c.useRef)({animate:n,animateAll:r,cancel:i,cancelAll:a,isAnimating:o});return s.current.animate=n,s.current.animateAll=r,s.current.cancel=i,s.current.cancelAll=a,s.current.isAnimating=o,s.current}function we(e){let t=(0,c.useRef)(e);(0,c.useEffect)(()=>{t.current=e},[e]);let{logEvent:n}=W(),r=(0,c.useRef)(n);(0,c.useEffect)(()=>{r.current=n},[n]);let i=(0,c.useRef)({animatingIds:new Set,positions:new Map,activeAnimations:new Map}),a=ve(),o=be(a.getAll,{minDeltaPx:e?.minDeltaPx??f.MIN_DELTA_PX}),s=Ce(),l=e?.exitDuration??f.EXIT_DURATION,u=e?.flipDuration??f.FLIP_DURATION,d=e?.exitEasing??h.EASE_IN_CUBIC,g=(0,c.useCallback)(e=>{let t=i.current.activeAnimations.get(e);t&&(t.forEach(e=>e.cancel()),i.current.activeAnimations.delete(e)),i.current.animatingIds.delete(e),s.cancel(e)},[s]),_=(0,c.useCallback)(()=>{i.current.activeAnimations.forEach(e=>{e.forEach(e=>e.cancel())}),i.current.activeAnimations.clear(),i.current.animatingIds.clear(),s.cancelAll()},[s]),v=e?.flipBehavior??`all`,y=e?.exitPositionStrategy??`absolute-fixed`,b=(0,c.useCallback)(async(e,n)=>{let r=a.get(e);if(!r||i.current.animatingIds.has(e))return;i.current.animatingIds.add(e);let o=n?.duration??l,s=n?.easing??d,c=a.getAll(),g=new Map,_=r.getBoundingClientRect();g.set(e,_),c.forEach((t,n)=>{if(n!==e){let e=t.getBoundingClientRect();e.width>0&&e.height>0&&g.set(n,e)}});let b=r.parentElement;r.dataset.reorderState=`exiting`,y===`absolute-fixed`&&(r.dataset.exitPosition=`absolute`);let x=b?.getBoundingClientRect()||{left:0,top:0},S=_.left-x.left,C=_.top-x.top;y===`absolute-fixed`&&(r.style.position=`absolute`,r.style.left=`${S}px`,r.style.top=`${C}px`,r.style.width=`${_.width}px`,r.style.height=`${_.height}px`,r.style.margin=`0`);let w=b?.getBoundingClientRect()||{left:0,top:0},T=w.left-x.left,E=w.top-x.top;(Math.abs(T)>.5||Math.abs(E)>.5)&&(r.style.transform=`translate(${-T}px, ${-E}px)`);let D=new Map;c.forEach((t,n)=>{if(n!==e){let e=t.getBoundingClientRect();e.width>0&&e.height>0&&D.set(n,e)}});let O=[];if(v!==`none`){let t=[];if(v===`all`)t=[...D.keys()];else if(v===`siblings-after`){let n=Array.from(c.entries());n.sort((e,t)=>{let n=e[1],r=t[1];return n.compareDocumentPosition(r)&Node.DOCUMENT_POSITION_FOLLOWING?-1:1});let r=n.map(([e])=>e),i=r.indexOf(e);i!==-1&&(t=r.slice(i+1).filter(e=>D.has(e)))}t.forEach(e=>{let t=g.get(e),n=D.get(e);if(!t||!n)return;let r=t.left-n.left,i=t.top-n.top;if(Math.abs(r)>1||Math.abs(i)>1){let t=c.get(e);if(t){t.dataset.reorderState=`flipping`,t.style.transform=`translate(${r}px, ${i}px)`;let e=t.animate([{transform:`translate(${r}px, ${i}px)`},{transform:`none`}],{duration:u,easing:h.MATERIAL_DECELERATE,fill:`forwards`});O.push(e),e.finished.then(()=>{t.style.transform=``,t.dataset.reorderState=`idle`}).catch(()=>{t.style.transform=``,t.dataset.reorderState=`idle`})}}})}let k=[],A=r.querySelectorAll(`.sliding-text-token`);if(A.length>0)A.forEach((e,t)=>{let n=t*f.EXIT_STAGGER,r=e.animate([{opacity:1,transform:`translateY(0) scale(1)`,filter:`blur(0px)`},{opacity:0,transform:`translateY(${p.OFFSET_Y_EXIT}px) scale(${p.SCALE_EXIT})`,filter:`blur(${m.BLUR_EXIT}px)`}],{duration:o,easing:s,delay:n,fill:`forwards`});k.push(r)});else{let e=r.animate([{opacity:1,transform:`scale(1)`},{opacity:0,transform:`scale(${p.SCALE_EXIT})`}],{duration:o,easing:s,fill:`forwards`});k.push(e)}i.current.activeAnimations.set(e,[...k,...O]);try{await Promise.all([...k.map(e=>e.finished),...O.map(e=>e.finished)])}catch{i.current.animatingIds.delete(e),i.current.activeAnimations.delete(e);return}i.current.animatingIds.delete(e),i.current.activeAnimations.delete(e),r.dataset.reorderState=`completed`,y===`absolute-fixed`&&(r.style.removeProperty(`position`),r.style.removeProperty(`left`),r.style.removeProperty(`top`),r.style.removeProperty(`width`),r.style.removeProperty(`height`),r.style.removeProperty(`margin`)),delete r.dataset.exitPosition,a.unregister(e),n?.onComplete?.(),t.current?.onExitComplete?.(e)},[a,l,d,u,v,y]),x=(0,c.useCallback)(async(e,n)=>{let r=a.get(e);if(!r)return;r.dataset.reorderState||(r.dataset.reorderState=`entering`);let i=t.current?.enterDuration??f.ENTER_DURATION,o=t.current?.enterEasing??h.MATERIAL_DECELERATE,s=n?.duration??i,c=n?.easing??o,l=n?.stagger??f.ENTER_STAGGER,u=r.querySelectorAll(`.sliding-text-token`),d=[],p={opacity:0,transform:`translateY(-8px) scale(0.95)`},g={opacity:1,transform:`none`};if(u.length>0)u.forEach((e,t)=>{let n=t*l;e.dataset.reorderIndex=String(t);let r=e.animate([{...p,filter:`blur(${m.BLUR_ENTER}px)`},{...g,filter:`blur(0px)`}],{duration:s,easing:c,delay:n,fill:`forwards`});d.push(r)});else{let e=r.animate([p,g],{duration:s,easing:c,fill:`forwards`});d.push(e)}try{await Promise.all(d.map(e=>e.finished))}catch{r.dataset.reorderState=`idle`;return}r.dataset.reorderState=`idle`,n?.onComplete?.(),t.current?.onEnterComplete?.(e)},[a]),S=(0,c.useCallback)(e=>e?i.current.animatingIds.has(e):i.current.animatingIds.size>0,[]),C=(0,c.useCallback)(e=>o.capture(e),[o]);return(0,c.useEffect)(()=>()=>{_()},[_]),{registry:a,positions:o,flip:s,registerElement:a.register,startExit:b,startEnter:x,isAnimating:S,cancelAnimation:g,cancelAllAnimations:_,capturePositions:C}}function X(e){let{logEvent:t}=W(),n=(0,c.useRef)(t);(0,c.useEffect)(()=>{n.current=t},[t]);let r=we({enterDuration:e?.enterDuration,exitDuration:e?.exitDuration,flipDuration:e?.flipDuration,enterEasing:e?.enterEasing,exitEasing:e?.exitEasing,flipEasing:e?.flipEasing,flipBehavior:e?.flipBehavior,onExitComplete:e?.onComplete});return(0,c.useEffect)(()=>()=>{},[]),{...r,registerElement:r.registerElement,startItemExit:r.startExit,startItemEnter:r.startEnter}}function Te(e,t={}){let{autoAnimate:n=!0,stagger:r,enterDuration:i,exitDuration:a,flipDuration:o,enterEasing:s,exitEasing:l,flipEasing:u}=t,{logEvent:d}=W(),f=(0,c.useRef)(d);(0,c.useEffect)(()=>{f.current=d},[d]);let p=(0,c.useRef)(t);(0,c.useEffect)(()=>{p.current=t},[t]);let m=(0,c.useRef)(new Set),h=(0,c.useRef)(new Set),g=(0,c.useRef)(new Set),_=(0,c.useCallback)((e,t)=>r?typeof r==`number`?r*e:(r[t]??0)*e:0,[r]),v=X({enterDuration:i,exitDuration:a,flipDuration:o,enterEasing:s,exitEasing:l,flipEasing:u,onComplete:(0,c.useCallback)(e=>{m.current.delete(e),p.current.onAnimationComplete?.(e)},[])}),y=(0,c.useMemo)(()=>{let t=new Set;return c.Children.forEach(e,e=>{(0,c.isValidElement)(e)&&e.key!=null&&t.add(String(e.key))}),t},[e]);(0,c.useLayoutEffect)(()=>{let e=g.current,t=[];y.forEach(n=>{!e.has(n)&&!h.current.has(n)&&t.push(n)}),t.length>0&&t.forEach((e,t)=>{let n=_(t,`enter`),r=()=>{h.current.add(e),p.current.onItemEnter?.(e),requestAnimationFrame(()=>{v.startItemEnter(e).then(()=>{h.current.delete(e)})})};n>0?setTimeout(r,n):r()}),g.current=new Set(y)},[y,n,v,_]);let b=(0,c.useCallback)(e=>{m.current.has(e)||v.registry.has(e)&&(m.current.add(e),p.current.onItemExit?.(e),v.startItemExit(e))},[v]),x=(0,c.useCallback)(e=>m.current.has(e),[]),S=(0,c.useCallback)(e=>h.current.has(e),[]),C=(0,c.useCallback)(()=>Array.from(m.current),[]),w=(0,c.useCallback)(()=>Array.from(h.current),[]),T=(0,c.useMemo)(()=>{let t=[];return c.Children.forEach(e,e=>{if(!(0,c.isValidElement)(e)){t.push(e);return}let n=e.key==null?null:String(e.key);n!=null&&m.current.has(n)?t.push((0,c.cloneElement)(e,{"data-reorder-state":`exiting`})):t.push(e)}),t},[e]);return(0,c.useEffect)(()=>()=>{},[]),{presentChildren:T,triggerExit:b,isExiting:x,isEntering:S,exitingIds:C(),enteringIds:w(),reorder:v}}function Ee(e,t){if(e!==void 0)return typeof e==`number`?e:e[t]}const De={auto:{position:`relative`},horizontal:{display:`flex`,flexDirection:`row`,flexWrap:`wrap`,alignItems:`center`,position:`relative`},"inline-horizontal":{display:`inline-flex`,flexDirection:`row`,flexWrap:`nowrap`,alignItems:`center`,position:`relative`},vertical:{display:`flex`,flexDirection:`column`,position:`relative`},grid:{display:`grid`,gridTemplateColumns:`repeat(auto-fill, minmax(100px, 1fr))`,gap:`8px`,position:`relative`}},Z=(0,c.forwardRef)(({children:e,autoAnimate:t=!0,stagger:n,duration:r,layout:i=`auto`,className:a=``,flipBehavior:o,exitPositionStrategy:s,onItemExit:u,onItemEnter:d},f)=>{let{logEvent:p}=W(),m=(0,c.useRef)(p);(0,c.useEffect)(()=>{m.current=p},[p]);let h=(0,c.useRef)(u),g=(0,c.useRef)(d);(0,c.useEffect)(()=>{h.current=u,g.current=d},[u,d]);let _=(0,c.useCallback)(e=>{C(t=>t.filter(t=>t.key!==e))},[]),v=X({enterDuration:Ee(r,`enter`),exitDuration:Ee(r,`exit`),flipBehavior:o,exitPositionStrategy:s,onComplete:_});(0,c.useImperativeHandle)(f,()=>({startItemExit:v.startItemExit,startItemEnter:v.startItemEnter,isAnimating:v.isAnimating}),[v.startItemExit,v.startItemEnter,v.isAnimating]);let y=(0,c.useRef)(v.startItemExit),b=(0,c.useRef)(v.startItemEnter);(0,c.useEffect)(()=>{y.current=v.startItemExit,b.current=v.startItemEnter},[v.startItemExit,v.startItemEnter]);let x=(0,c.useMemo)(()=>{let t=[];return c.Children.forEach(e,e=>{(0,c.isValidElement)(e)&&e.key!=null&&t.push({key:String(e.key),element:e})}),t},[e]),[S,C]=(0,c.useState)(x),w=(0,c.useRef)(new Set),T=(0,c.useCallback)((e,t)=>n?typeof n==`number`?n*e:(n[t]??0)*e:0,[n]);(0,c.useEffect)(()=>{let e=new Set(x.map(e=>e.key)),t=new Set(S.map(e=>e.key)),n=S.filter(t=>!e.has(t.key)&&!w.current.has(t.key)),r=x.filter(e=>!t.has(e.key));if(n.length===0&&r.length===0){x.some(e=>{let t=S.find(t=>t.key===e.key);return t&&t.element!==e.element})&&C(e=>e.map(e=>w.current.has(e.key)?e:x.find(t=>t.key===e.key)??e));return}if(n.forEach((e,t)=>{let n=T(t,`exit`);w.current.add(e.key);let r=()=>{h.current?.(e.key),y.current(e.key).finally(()=>{w.current.delete(e.key)})};n>0?setTimeout(r,n):r()}),r.length>0){let t=S.filter(t=>!e.has(t.key)),n=[...x];t.forEach(e=>{let t=S.findIndex(t=>t.key===e.key);t!==-1&&t<=n.length&&n.splice(t,0,e)}),C(n),r.forEach((e,t)=>{let n=T(t,`enter`),r=()=>{g.current?.(e.key)};n>0?setTimeout(r,n):r()})}},[x,S,T]);let E=(0,c.useMemo)(()=>{let e=new Set(x.map(e=>e.key));return S.map(({key:t,element:n})=>{let r=!!e.has(t),i=w.current.has(t);return(0,c.cloneElement)(n,{ref:e=>{e?(v.registerElement(t,e),!e.dataset.reorderState&&r&&!i&&(e.dataset.reorderState=`entering`,b.current(t))):v.registerElement(t,null);let a=n.ref;typeof a==`function`?a(e):a&&typeof a==`object`&&(a.current=e)},"data-reorder-id":t})})},[S,x,v.registerElement]);return(0,l.jsx)(`div`,{className:`waapi-reorder-container reorder ${i===`auto`?``:`reorder--${i}`} ${a}`,style:De[i],children:E})});Z.displayName=`Reorder`;const Oe=()=>typeof navigator<`u`&&navigator.language?navigator.language:`en`;function ke(e,t={}){let{locale:n,type:r=`conjunction`,style:i=`long`,separator:a,hasOverflow:o}=t;return(0,c.useMemo)(()=>{if(e.length===0)return[];if(a!==void 0){let t=[];return e.forEach((n,r)=>{t.push({type:`element`,value:n,index:r}),r<e.length-1&&t.push({type:`literal`,value:a,index:r})}),t}let t=n??Oe();try{let n=new Intl.ListFormat(t,{type:r,style:i}),a=o&&e.length>1?[...e,``]:e,s=n.formatToParts(a),c=o?s.slice(0,-2):s,l=0;return c.map(e=>e.type===`element`?{type:`element`,value:e.value,index:l++}:{type:`literal`,value:e.value,index:Math.max(0,l-1)})}catch{let t=[];return e.forEach((n,r)=>{t.push({type:`element`,value:n,index:r}),r<e.length-1&&t.push({type:`literal`,value:`, `,index:r})}),t}},[e,n,r,i,a,o])}const Ae=({tokens:e,placeholder:t=`No tokens`,maxVisible:n,textAnimationMode:r=`character`,textDirection:i=`vertical`,textStaggerDelay:a=15,locale:o,listType:s=`conjunction`,listStyle:u=`long`,separator:d,enableWidthAnimation:m=!1,inline:g=!1,className:v=``,tokenClassName:b=``,placeholderClassName:x=``,separatorClassName:S=``,overflowLabel:C=` more`,showOverflowSeparator:w=!0})=>{let{logEvent:T}=W(),E=(0,c.useRef)(T);(0,c.useEffect)(()=>{E.current=T},[T]);let D=(0,c.useRef)(new Set),O=(0,c.useRef)(new Map),k=(0,c.useRef)(new Map),A=(0,c.useMemo)(()=>n?e.slice(0,n):e,[e,n]),j=(0,c.useMemo)(()=>n?Math.max(0,e.length-n):0,[e.length,n]),M=ke(A.map(e=>e.text),{locale:o,type:s,style:u,separator:d,hasOverflow:j>0}),N=(0,c.useRef)(0),P=j>0&&N.current===0,F=j===0&&N.current>0;(0,c.useEffect)(()=>{N.current=j},[j]);let I=(0,c.useCallback)((e,t)=>{if(t>=A.length-1)return!1;let n=O.current.get(e);if(!n)return!0;switch(n.animationPhase){case`idle`:case`exit-coordinated`:case`flip-coordinated`:return!0;case`completed`:return!1;default:return!0}},[A.length]);(0,c.useEffect)(()=>{let e=new Set(A.map(e=>e.id)),t=O.current;for(let n of t.keys())e.has(n)||O.current.delete(n);A.forEach((e,t)=>{t<A.length-1&&!O.current.has(e.id)&&O.current.set(e.id,{animationPhase:`idle`})})},[A]);let L=(0,c.useCallback)(e=>{let t=k.current.get(e);t&&(O.current.set(e,{animationPhase:`exit-coordinated`}),t.dataset.separatorState=`exiting`,t.animate([{opacity:1,transform:`translateY(0) scale(1)`},{opacity:0,transform:`translateY(${p.OFFSET_Y_EXIT}px) scale(${p.SCALE_EXIT})`}],{duration:f.EXIT_DURATION,easing:h.EASE_IN_CUBIC,fill:`forwards`}).finished.then(()=>{O.current.set(e,{animationPhase:`completed`}),t.dataset.separatorState=`completed`}).catch(()=>{O.current.delete(e)}))},[]),R=(0,c.useCallback)(e=>{D.current.add(e);let t=[],n=A.findIndex(t=>t.id===e);if(n===A.length-1&&n>0){let e=A[n-1];e&&t.push(e.id)}L(e),t.forEach(e=>L(e)),E.current({type:`token-remove`,source:`TextFlow`,message:`Token exiting: ${e}`,data:{id:e,additionalSeparators:t}})},[A,L]),z=(0,c.useCallback)(e=>{E.current({type:`token-add`,source:`TextFlow`,message:`Token entering: ${e}`,data:{id:e}})},[]),B=e.length===0&&!!t,V=(0,c.useMemo)(()=>M.map((e,t)=>{if(e.type===`element`){let t=A[e.index];if(!t)return null;let n=D.current.has(t.id);return(0,l.jsx)(`span`,{className:`waapi-token-wrapper ${b}`,"data-reorder-id":t.id,children:(0,l.jsx)(Y,{text:t.text,mode:n?`none`:r,direction:i,staggerDelay:a,duration:_.DURATION_ENTER,blur:y.newToken.blur,widthAnimation:!n&&m,initial:n?!1:`initial`,animate:`animate`})},t.id)}let n=A[e.index];if(!n)return null;let o=A.findIndex(e=>e.id===n.id);return I(n.id,o)?(0,l.jsx)(`span`,{ref:e=>{e?k.current.set(n.id,e):k.current.delete(n.id)},className:`waapi-token-separator ${S}`,"data-separator-state":O.current.get(n.id)?.animationPhase??`idle`,children:e.value},`sep-${n.id}`):null}).filter(Boolean),[M,A,b,r,i,a,m,S,I]),H=(0,c.useMemo)(()=>j===0?null:(0,l.jsxs)(`div`,{"data-reorder-id":`overflow-counter`,className:`waapi-token-overflow ${b} ${P?`entering`:``} ${F?`exiting`:``}`,children:[(0,l.jsx)(`span`,{className:`waapi-token-separator ${S}`,children:`+`}),(0,l.jsx)(U,{value:j,duration:_.DURATION_ENTER,fontSize:`inherit`,fontWeight:`inherit`,color:`inherit`}),C&&(0,l.jsx)(Y,{text:C,mode:r,direction:i,staggerDelay:a,duration:F?_.DURATION_EXIT:_.DURATION_ENTER,blur:y.newToken.blur,initial:P?`initial`:!1,animate:`animate`})]},`overflow-counter`),[j,P,F,b,S,r,i,a,C]);return(0,l.jsxs)(`div`,{role:`text`,className:`waapi-animated-tokens-container waapi-v2 ${g?`waapi-animated-tokens-container--inline`:``} ${v}`,children:[B&&(0,l.jsx)(Y,{text:t,mode:y.placeholder.mode,direction:y.placeholder.direction,blur:y.placeholder.blur,duration:y.placeholder.duration,initial:`initial`,animate:`animate`,className:`waapi-token-placeholder ${x}`},`placeholder`),(0,l.jsxs)(Z,{layout:g?`inline-horizontal`:`horizontal`,onItemExit:R,onItemEnter:z,children:[V,H]})]})},Q=(0,c.createContext)(null);function je(){let e=(0,c.useContext)(Q);if(!e)throw Error(`useMorphContext must be used within a <Morph> component. Wrap your morphable components with <Morph>.`);return e}const Me=f.FLIP_DURATION,Ne=h.EASE_OUT_CUBIC;function Pe(e){let[t,n]=(0,c.useState)(!1),r=(0,c.useRef)([]),i=(0,c.useRef)(e);(0,c.useEffect)(()=>{i.current=e},[e]);let a=(0,c.useCallback)(()=>{r.current.forEach(e=>e.cancel()),r.current=[],n(!1)},[]),o=(0,c.useCallback)(async(e,o)=>{t&&a(),n(!0);let s=i.current?.duration??Me,c=i.current?.easing??Ne,l=e.getBoundingClientRect(),u=o.getBoundingClientRect(),d=l.left-u.left,f=l.top-u.top,p=l.width/u.width,m=l.height/u.height,h=getComputedStyle(e).borderRadius,g=getComputedStyle(o).borderRadius,_=i.current?.clipPathStart||$(h,l),v=i.current?.clipPathEnd||$(g,u),y={position:e.style.position,opacity:e.style.opacity,pointerEvents:e.style.pointerEvents},b={position:o.style.position,opacity:o.style.opacity,transform:o.style.transform,clipPath:o.style.clipPath};e.style.position=`absolute`,e.style.pointerEvents=`none`,o.style.position=`relative`,o.style.transform=`translate(${d}px, ${f}px) scale(${p}, ${m})`,o.style.clipPath=_,o.style.opacity=`0`;let x=e.animate([{opacity:1},{opacity:0}],{duration:s*.5,easing:c,fill:`forwards`}),S=o.animate([{opacity:0},{opacity:1}],{duration:s*.5,delay:s*.25,easing:c,fill:`forwards`}),C=o.animate([{transform:`translate(${d}px, ${f}px) scale(${p}, ${m})`,clipPath:_},{transform:`translate(0, 0) scale(1, 1)`,clipPath:v}],{duration:s,easing:c,fill:`forwards`});r.current=[x,S,C];try{await Promise.all([x.finished,S.finished,C.finished])}catch{Object.assign(e.style,y),Object.assign(o.style,b),n(!1);return}Object.assign(e.style,y),o.style.transform=``,o.style.clipPath=``,o.style.opacity=`1`,r.current=[],n(!1)},[t,a]);return(0,c.useEffect)(()=>()=>{a()},[a]),{isMorphing:t,morph:o,cancel:a}}function $(e,t){let n=parseFloat(e)||0;return`inset(0 round ${n/t.width*100}% ${n/t.height*100}%)`}const Fe=f.FLIP_DURATION,Ie=h.MATERIAL_STANDARD;function Le(e){let[t,n]=(0,c.useState)(!1),r=(0,c.useRef)(null),i=(0,c.useRef)(e),a=i.current?.duration??Fe,o=i.current?.easing??Ie,s=(0,c.useCallback)(()=>{r.current&&(r.current.style.transition=`grid-template-rows ${a}ms ${o}`)},[a,o]),l=(0,c.useCallback)(()=>{s(),r.current&&(r.current.style.gridTemplateRows=`1fr`),n(!0)},[s]),u=(0,c.useCallback)(()=>{s(),r.current&&(r.current.style.gridTemplateRows=`0fr`),n(!1)},[s]);return{isExpanded:t,expand:l,collapse:u,toggle:(0,c.useCallback)(()=>{t?u():l()},[t,l,u]),containerRef:r}}function Re(e){let t=(0,c.useRef)(e),n=(0,c.useRef)(e?.types||[]),r=(0,c.useMemo)(()=>typeof document>`u`?!1:`startViewTransition`in document,[]),i=(0,c.useCallback)(e=>{n.current=e},[]);return{isSupported:r,startTransition:(0,c.useCallback)(async e=>{if(!document.startViewTransition){await e();return}let n=t.current?.name,r=(()=>{if(n){let e=document.createElement(`style`);return e.id=`view-transition-${n}`,e.textContent=`
           ::view-transition-old(${n}),
           ::view-transition-new(${n}) {
             animation-duration: 300ms;