@mks2508/waapi-animation-primitives 0.3.0 → 0.4.0

package/dist/index.cjs

@@ -46,15 +46,521 @@ ${Object.entries(O.highContrast).map(([e,t])=>`    ${e}: ${t};`).join(`
 `)}
   }
 }
-`.trim(),M=`waapi-animation-primitives-vars`;let N=!1;const P=()=>{if(typeof document>`u`||N)return;if(document.getElementById(M)){N=!0;return}let e=document.createElement(`style`);e.id=M,e.textContent=j(),document.head.appendChild(e),N=!0},F=()=>{if(typeof document>`u`)return;let e=document.getElementById(M);e&&(e.remove(),N=!1)},I=()=>{F(),P()};typeof document<`u`&&(document.readyState===`loading`?document.addEventListener(`DOMContentLoaded`,P):P());function L(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 R({value:e,duration:t=700,fontSize:n=`3rem`,fontWeight:r=`700`,color:i=`#000`,digitHeight:a=60,stagger:o=30,motionBlur:s=!0,format:u,trend:d=0,animationConfig:f}){let p=(0,c.useMemo)(()=>{if(f){let{overshoot:e=1,stiffness:t=1,mass:n=1}=f,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)`},[f]),m=(0,c.useMemo)(()=>L(e,u),[e,u]),h=(0,c.useRef)(new Set),g=(0,c.useRef)(!0),_=(0,c.useMemo)(()=>{if(g.current)return new Set;let e=new Set;return m.forEach(t=>{h.current.has(t.key)||e.add(t.key)}),e},[m]);(0,c.useEffect)(()=>{g.current=!1,h.current=new Set(m.map(e=>e.key))},[m]);let v=e=>(Math.abs(e)-1)*o;return(0,l.jsx)(`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:m.map(e=>{let n=_.has(e.key);return e.isDigit?(0,l.jsx)(B,{digit:Number.parseInt(e.char),duration:t,digitHeight:a,delay:v(e.position),motionBlur:s,easing:p,isEntering:n,trend:d},e.key):(0,l.jsx)(z,{char:e.char,isEntering:n,duration:t,easing:p},e.key)})})}function z({char:e,isEntering:t,duration:n,easing:r}){let i=(0,c.useRef)(null),a=(0,c.useRef)(!1);return(0,c.useLayoutEffect)(()=>{!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]),(0,l.jsx)(`span`,{ref:i,style:{display:`inline-block`,whiteSpace:`pre`,opacity:t?0:1},children:e})}function B({digit:e,duration:t,digitHeight:n,delay:r,motionBlur:i,easing:a,isEntering:o,trend:s}){let u=(0,c.useRef)(null),d=(0,c.useRef)(null),f=(0,c.useRef)(null),p=(0,c.useRef)(`blur-${Math.random().toString(36).slice(2,9)}`).current,m=(0,c.useRef)(null),h=(0,c.useRef)(e),g=(0,c.useRef)(!1),_=(0,c.useMemo)(()=>{let e=[];for(let t=-1;t<=1;t++)for(let t=0;t<=9;t++)e.push(t);return e},[]);(0,c.useLayoutEffect)(()=>{if(!g.current){g.current=!0;let t=-(e+10)*n;m.current=t,h.current=e,u.current&&(u.current.style.transform=`translateY(${t}px)`)}},[e,n]),(0,c.useLayoutEffect)(()=>{!d.current||!o||d.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]),(0,c.useEffect)(()=>{h.current=e,g.current&&(e===(m.current===null?e:((Math.round(-m.current/n)-10)%10+10)%10)&&m.current!==null||v(e))},[e,n]);let v=e=>{if(!u.current||!d.current)return;if(f.current){let e=getComputedStyle(u.current);m.current=new DOMMatrix(e.transform).m42,f.current.cancel(),f.current=null,u.current.style.transform=`translateY(${m.current}px)`}let o=m.current===null?e+10:-m.current/n,c=((Math.round(o)-10)%10+10)%10;if(e===c&&m.current!==null){let t=-(e+10)*n;if(u.current){let e=f.current;e&&e.cancel(),u.current.style.transform=`translateY(${t}px)`}m.current=t;return}let l;s===1?l=e>=c?e-c:10-c+e:s===-1?l=e<=c?e-c:e-c-10:(l=e-c,l>5?l-=10:l<-5&&(l+=10));let g=m.current??-(c+10)*n,_=g-l*n,y=document.getElementById(p)?.querySelector(`feGaussianBlur`);if(i&&y){let e=Math.min(Math.abs(l)*1.2,6);y.setAttribute(`stdDeviation`,`0,${e}`),d.current.style.filter=`url(#${p})`}let b=u.current.animate([{transform:`translateY(${g}px)`},{transform:`translateY(${_}px)`}],{duration:t,delay:r,easing:a,fill:`forwards`});f.current=b,b.onfinish=()=>{let t=-(e+10)*n;u.current&&(b.cancel(),u.current.style.transform=`translateY(${t}px)`),m.current=t,d.current&&(d.current.style.filter=`none`),y&&y.setAttribute(`stdDeviation`,`0,0`),f.current=null,h.current!==e&&requestAnimationFrame(()=>{v(h.current)})},b.oncancel=()=>{f.current=null}};return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(`svg`,{style:{position:`absolute`,width:0,height:0},"aria-hidden":`true`,children:(0,l.jsx)(`defs`,{children:(0,l.jsx)(`filter`,{id:p,children:(0,l.jsx)(`feGaussianBlur`,{in:`SourceGraphic`,stdDeviation:`0,0`})})})}),(0,l.jsx)(`div`,{ref:d,style:{position:`relative`,height:`${n}px`,overflow:`hidden`,width:`0.65em`,textAlign:`center`,opacity:o?0:1},children:(0,l.jsx)(`div`,{ref:u,style:{position:`absolute`,left:0,right:0,willChange:`transform`},children:_.map((e,t)=>(0,l.jsx)(`div`,{style:{height:`${n}px`,display:`flex`,alignItems:`center`,justifyContent:`center`},children:e},t))})})]})}const V=(0,c.createContext)(null),H=()=>{let e=(0,c.useContext)(V);if(!e)throw Error(`useDebug must be used within DebugProvider`);return e},ee=({children:e})=>{let[t,n]=(0,c.useState)([]),[r,i]=(0,c.useState)(!0),[a,o]=(0,c.useState)(!1),s=(0,c.useRef)(r),u=(0,c.useRef)([]),d=(0,c.useRef)(null);(0,c.useRef)([]);let f=(0,c.useRef)(!1);s.current=r,f.current=a;let p=(0,c.useCallback)(()=>{if(u.current.length===0)return;let e=[...u.current];u.current=[],d.current=null,n(t=>[...t,...e])},[]);(0,c.useEffect)(()=>()=>{d.current!==null&&(cancelAnimationFrame(d.current),u.current.length>0&&(n(e=>[...e,...u.current]),u.current=[]))},[]);let m=(0,c.useCallback)(e=>{},[p]),h=(0,c.useCallback)(()=>{},[]),g=(0,c.useCallback)(()=>{},[]),_=(0,c.useCallback)(()=>{},[]),v=(0,c.useCallback)(()=>{},[]),y=(0,c.useCallback)(()=>{},[]),b=(0,c.useCallback)(()=>[],[]),x=(0,c.useCallback)(()=>{},[p]),S=(0,c.useCallback)(()=>``,[t]),C=(0,c.useCallback)(()=>``,[t]),w=(0,c.useMemo)(()=>({events:[],isEnabled:!1,isCollecting:!1,enableDebug:g,disableDebug:_,toggleDebug:v,logEvent:m,clearEvents:h,getEventLog:C,exportToCSV:S,startCollecting:y,stopCollecting:b,flushEvents:x}),[t,r,a,g,_,v,m,h,C,S,y,b,x]);return(0,l.jsx)(V.Provider,{value:w,children:e})};function U(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 te(e){let t=U(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 W(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 ne(e){let t=W(e);return{x:t.x,y:t.y,w:t.width,h:t.height}}function re(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 G(e,t){let n=U(t);return Object.entries(e).map(([e,t])=>{let r=n[e]||``;return{property:e,expected:t,actual:r,matches:K(e,t)===K(e,r)}})}function K(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 q(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 ie(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 ae(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 oe(e){return e.getAnimations().map(ae)}var se=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[]}};const J=new se,Y=({text:e,mode:t=`word`,direction:n=`vertical`,staggerDelay:r=_.STAGGER_DELAY,duration:i=_.DURATION_ENTER,easing:a=_.EASING_ENTER,blur:o=!0,widthAnimation:s=!1,initial:u=`initial`,exit:d,className:f=``,style:p})=>{let m=(0,c.useRef)(null),h=(0,c.useRef)(null),{logEvent:g}=H(),v=(0,c.useRef)(null),y=(0,c.useRef)(null),b=(0,c.useRef)(!1),[x,S]=(0,c.useState)(u!==`initial`);(0,c.useEffect)(()=>{u===`initial`&&!b.current&&(b.current=!0,requestAnimationFrame(()=>{S(!0)}))},[u]);let C=d===`exit`?`exit`:x?`animate`:`initial`,w=t===`character`?e.split(``):[e],T=i+(w.length-1)*r;(0,c.useEffect)(()=>{if(C===`animate`&&m.current){let c=m.current;v.current=q(T),y.current=`enter-${e.slice(0,10)}-${Date.now()}`,J.startAnimation(y.current,`enter`,e,T);let l=W(c);g({type:`text-enter-start`,source:`SlidingText`,message:`Enter animation starting for: "${e}"`,timing:{startTime:v.current.start,expectedDuration:T},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:w.length,mode:t,direction:n,staggerDelay:r,duration:i,totalDuration:T,blur:o,widthAnimation:s}});let u=setTimeout(()=>{if(v.current&&y.current&&m.current){let t=v.current.end();J.endAnimation(y.current);let n=W(m.current);g({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`}})}},T+50);return()=>clearTimeout(u)}},[C,e,t,n,r,i,a,o,s,T,w.length,g]),(0,c.useLayoutEffect)(()=>{if(!s||!m.current||!h.current)return;let e=m.current,t=h.current;if(C===`initial`)e.style.width=`0px`;else if(C===`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(C===`exit`){let t=e.getBoundingClientRect().width;e.style.width=`${t}px`,e.getBoundingClientRect(),e.style.width=`0px`,e.style.transition=`width ${_.DURATION_EXIT}ms ${_.EASING_EXIT}`}},[C,s,i,a,e]);let E=e=>{let t=e*r,s=C===`exit`,c=s?_.DURATION_EXIT:i,l=s?_.EASING_EXIT:a;return{transition:`
+`.trim(),M=`waapi-animation-primitives-vars`,N=`waapi-animation-primitives-structural`;let P=!1,F=!1;const I=`
+/* ============================================
+   WAAPI Animation Primitives - Structural CSS
+   ============================================ */
+
+/* ===========================================
+   REORDER CONTAINER
+   =========================================== */
+.waapi-reorder-container {
+  position: relative;
+}
+
+/* ===========================================
+   REORDER ITEM - Estado Base
+   =========================================== */
+[data-reorder-state] {
+  position: relative;
+  will-change: transform, opacity;
+}
+
+[data-reorder-state="idle"] {
+  opacity: 1;
+  transform: none;
+  will-change: auto;
+}
+
+[data-reorder-state="entering"] {
+  opacity: 0;
+  transform: translateY(-8px) scale(0.95);
+}
+
+[data-reorder-state="exiting"] {
+  pointer-events: none;
+}
+
+[data-reorder-state="exiting"][data-exit-position="absolute"] {
+  position: absolute;
+}
+
+[data-reorder-state="exiting"][data-exit-position="in-place"] {
+  position: relative;
+}
+
+[data-reorder-state="completed"] {
+  position: absolute !important;
+  opacity: 0 !important;
+  pointer-events: none !important;
+  visibility: hidden;
+  width: 0;
+  height: 0;
+  overflow: hidden;
+}
+
+/* ===========================================
+   SEPARATOR STATES
+   =========================================== */
+[data-separator-state] {
+  display: inline;
+  white-space: pre;
+  will-change: transform, opacity;
+}
+
+[data-separator-state="idle"] {}
+
+[data-separator-state="exiting"] {
+  pointer-events: none;
+}
+
+[data-separator-state="completed"] {
+  opacity: 0;
+  position: absolute;
+  pointer-events: none;
+  width: 0;
+  overflow: hidden;
+}
+
+/* ===========================================
+   STAGGER INDEX (Progressive Enhancement)
+   =========================================== */
+@supports (animation-delay: calc(sibling-index() * 1ms)) {
+  [data-reorder-state="entering"] {
+    --waapi-stagger-index: sibling-index();
+  }
+}
+
+/* ===========================================
+   LEGACY CLASS SUPPORT
+   =========================================== */
+.waapi-token-wrapper {
+  display: inline-flex;
+  align-items: center;
+}
+
+.waapi-token-wrapper.exit-completed,
+.waapi-token-wrapper[data-reorder-state="completed"] {
+  position: absolute !important;
+  opacity: 0 !important;
+  pointer-events: none !important;
+}
+
+.waapi-token-separator {
+  display: inline !important;
+  white-space: pre;
+  margin-left: 0.25em;
+  will-change: transform, opacity;
+}
+
+.waapi-token-separator.flip-active {
+  will-change: transform;
+}
+
+.waapi-token-separator.exit-completed {
+  opacity: 0;
+  position: absolute;
+  pointer-events: none;
+  width: 0;
+  overflow: hidden;
+}
+
+.waapi-token-overflow {
+  display: inline-flex;
+  align-items: center;
+  white-space: nowrap;
+}
+
+.waapi-sliding-text-container {
+  display: inline-flex;
+  overflow: hidden;
+  vertical-align: bottom;
+  will-change: width;
+}
+
+.waapi-sliding-text-content {
+  display: inline-flex;
+  white-space: pre;
+}
+
+.waapi-sliding-text-token {
+  display: inline-block;
+  will-change: transform, opacity, filter;
+  backface-visibility: hidden;
+  font-weight: 500;
+}
+
+.waapi-sliding-text-token.enter-from {
+  opacity: 0;
+  filter: blur(var(--waapi-blur-enter));
+}
+
+.waapi-sliding-text-token.enter-to {
+  opacity: 1;
+  transform: translate(0, 0);
+  filter: blur(0);
+}
+
+.waapi-sliding-text-token.exit-active {
+  opacity: 0;
+  filter: blur(var(--waapi-blur-exit));
+}
+
+.waapi-direction-vertical .waapi-sliding-text-token.enter-from {
+  transform: translateY(var(--waapi-offset-y-enter));
+}
+
+.waapi-direction-vertical .waapi-sliding-text-token.exit-active {
+  transform: translateY(var(--waapi-offset-y-exit));
+}
+
+.waapi-direction-horizontal .waapi-sliding-text-token.enter-from {
+  transform: translateX(var(--waapi-offset-x, 12px));
+}
+
+.waapi-direction-horizontal .waapi-sliding-text-token.exit-active {
+  transform: translateX(calc(var(--waapi-offset-x, 12px) * -1));
+}
+
+.waapi-animated-tokens-container {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0;
+}
+
+.waapi-token-placeholder {
+  color: var(--muted-foreground, #888) !important;
+  font-style: italic;
+}
+
+/* ===========================================
+   ACCESSIBILITY - Reduced Motion
+   =========================================== */
+@media (prefers-reduced-motion: reduce) {
+  [data-reorder-state],
+  [data-separator-state],
+  .waapi-token-separator,
+  .waapi-sliding-text-token,
+  .waapi-token-wrapper {
+    will-change: auto;
+    transition: none !important;
+    animation: none !important;
+  }
+}
+
+/* ===========================================
+   ACCESSIBILITY - High Contrast
+   =========================================== */
+@media (prefers-contrast: high) {
+  .waapi-sliding-text-token.enter-from,
+  .waapi-sliding-text-token.exit-active {
+    filter: none;
+  }
+}
+
+/* ===========================================
+   MOBILE - Performance Optimization
+   =========================================== */
+@media (max-width: 768px) {
+  .waapi-token-wrapper,
+  [data-reorder-state] {
+    transform: translateZ(0);
+    backface-visibility: hidden;
+    perspective: 1000px;
+  }
+}
+
+/* ===========================================
+   PRINT - Disable animations, show content
+   =========================================== */
+@media print {
+  .waapi-animated-tokens-container,
+  .waapi-sliding-text-container,
+  .waapi-token-separator,
+  .waapi-token-wrapper,
+  [data-reorder-state],
+  [data-separator-state] {
+    transition: none !important;
+    animation: none !important;
+    transform: none !important;
+    opacity: 1 !important;
+  }
+
+  .waapi-token-separator.exit-completed,
+  .waapi-token-wrapper.exit-completed,
+  [data-reorder-state="completed"],
+  [data-separator-state="completed"] {
+    position: static !important;
+    opacity: 1 !important;
+    pointer-events: auto !important;
+    visibility: visible !important;
+    width: auto !important;
+    height: auto !important;
+  }
+}
+`,L=()=>{if(typeof document>`u`||P)return;if(document.getElementById(M)){P=!0;return}let e=document.createElement(`style`);e.id=M,e.textContent=j(),document.head.appendChild(e),P=!0},R=()=>{if(typeof document>`u`||F)return;if(document.getElementById(N)){F=!0;return}let e=document.createElement(`style`);e.id=N,e.textContent=`
+/* ============================================
+   WAAPI Animation Primitives - Structural CSS
+   ============================================ */
+
+/* ===========================================
+   REORDER CONTAINER
+   =========================================== */
+.waapi-reorder-container {
+  position: relative;
+}
+
+/* ===========================================
+   REORDER ITEM - Estado Base
+   =========================================== */
+[data-reorder-state] {
+  position: relative;
+  will-change: transform, opacity;
+}
+
+[data-reorder-state="idle"] {
+  opacity: 1;
+  transform: none;
+  will-change: auto;
+}
+
+[data-reorder-state="entering"] {
+  opacity: 0;
+  transform: translateY(-8px) scale(0.95);
+}
+
+[data-reorder-state="exiting"] {
+  pointer-events: none;
+}
+
+[data-reorder-state="exiting"][data-exit-position="absolute"] {
+  position: absolute;
+}
+
+[data-reorder-state="exiting"][data-exit-position="in-place"] {
+  position: relative;
+}
+
+[data-reorder-state="completed"] {
+  position: absolute !important;
+  opacity: 0 !important;
+  pointer-events: none !important;
+  visibility: hidden;
+  width: 0;
+  height: 0;
+  overflow: hidden;
+}
+
+/* ===========================================
+   SEPARATOR STATES
+   =========================================== */
+[data-separator-state] {
+  display: inline;
+  white-space: pre;
+  will-change: transform, opacity;
+}
+
+[data-separator-state="idle"] {}
+
+[data-separator-state="exiting"] {
+  pointer-events: none;
+}
+
+[data-separator-state="completed"] {
+  opacity: 0;
+  position: absolute;
+  pointer-events: none;
+  width: 0;
+  overflow: hidden;
+}
+
+/* ===========================================
+   STAGGER INDEX (Progressive Enhancement)
+   =========================================== */
+@supports (animation-delay: calc(sibling-index() * 1ms)) {
+  [data-reorder-state="entering"] {
+    --waapi-stagger-index: sibling-index();
+  }
+}
+
+/* ===========================================
+   LEGACY CLASS SUPPORT
+   =========================================== */
+.waapi-token-wrapper {
+  display: inline-flex;
+  align-items: center;
+}
+
+.waapi-token-wrapper.exit-completed,
+.waapi-token-wrapper[data-reorder-state="completed"] {
+  position: absolute !important;
+  opacity: 0 !important;
+  pointer-events: none !important;
+}
+
+.waapi-token-separator {
+  display: inline !important;
+  white-space: pre;
+  margin-left: 0.25em;
+  will-change: transform, opacity;
+}
+
+.waapi-token-separator.flip-active {
+  will-change: transform;
+}
+
+.waapi-token-separator.exit-completed {
+  opacity: 0;
+  position: absolute;
+  pointer-events: none;
+  width: 0;
+  overflow: hidden;
+}
+
+.waapi-token-overflow {
+  display: inline-flex;
+  align-items: center;
+  white-space: nowrap;
+}
+
+.waapi-sliding-text-container {
+  display: inline-flex;
+  overflow: hidden;
+  vertical-align: bottom;
+  will-change: width;
+}
+
+.waapi-sliding-text-content {
+  display: inline-flex;
+  white-space: pre;
+}
+
+.waapi-sliding-text-token {
+  display: inline-block;
+  will-change: transform, opacity, filter;
+  backface-visibility: hidden;
+  font-weight: 500;
+}
+
+.waapi-sliding-text-token.enter-from {
+  opacity: 0;
+  filter: blur(var(--waapi-blur-enter));
+}
+
+.waapi-sliding-text-token.enter-to {
+  opacity: 1;
+  transform: translate(0, 0);
+  filter: blur(0);
+}
+
+.waapi-sliding-text-token.exit-active {
+  opacity: 0;
+  filter: blur(var(--waapi-blur-exit));
+}
+
+.waapi-direction-vertical .waapi-sliding-text-token.enter-from {
+  transform: translateY(var(--waapi-offset-y-enter));
+}
+
+.waapi-direction-vertical .waapi-sliding-text-token.exit-active {
+  transform: translateY(var(--waapi-offset-y-exit));
+}
+
+.waapi-direction-horizontal .waapi-sliding-text-token.enter-from {
+  transform: translateX(var(--waapi-offset-x, 12px));
+}
+
+.waapi-direction-horizontal .waapi-sliding-text-token.exit-active {
+  transform: translateX(calc(var(--waapi-offset-x, 12px) * -1));
+}
+
+.waapi-animated-tokens-container {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0;
+}
+
+.waapi-token-placeholder {
+  color: var(--muted-foreground, #888) !important;
+  font-style: italic;
+}
+
+/* ===========================================
+   ACCESSIBILITY - Reduced Motion
+   =========================================== */
+@media (prefers-reduced-motion: reduce) {
+  [data-reorder-state],
+  [data-separator-state],
+  .waapi-token-separator,
+  .waapi-sliding-text-token,
+  .waapi-token-wrapper {
+    will-change: auto;
+    transition: none !important;
+    animation: none !important;
+  }
+}
+
+/* ===========================================
+   ACCESSIBILITY - High Contrast
+   =========================================== */
+@media (prefers-contrast: high) {
+  .waapi-sliding-text-token.enter-from,
+  .waapi-sliding-text-token.exit-active {
+    filter: none;
+  }
+}
+
+/* ===========================================
+   MOBILE - Performance Optimization
+   =========================================== */
+@media (max-width: 768px) {
+  .waapi-token-wrapper,
+  [data-reorder-state] {
+    transform: translateZ(0);
+    backface-visibility: hidden;
+    perspective: 1000px;
+  }
+}
+
+/* ===========================================
+   PRINT - Disable animations, show content
+   =========================================== */
+@media print {
+  .waapi-animated-tokens-container,
+  .waapi-sliding-text-container,
+  .waapi-token-separator,
+  .waapi-token-wrapper,
+  [data-reorder-state],
+  [data-separator-state] {
+    transition: none !important;
+    animation: none !important;
+    transform: none !important;
+    opacity: 1 !important;
+  }
+
+  .waapi-token-separator.exit-completed,
+  .waapi-token-wrapper.exit-completed,
+  [data-reorder-state="completed"],
+  [data-separator-state="completed"] {
+    position: static !important;
+    opacity: 1 !important;
+    pointer-events: auto !important;
+    visibility: visible !important;
+    width: auto !important;
+    height: auto !important;
+  }
+}
+`,document.head.appendChild(e),F=!0},z=()=>{L(),R()},B=()=>{if(typeof document>`u`)return;let e=document.getElementById(M);e&&(e.remove(),P=!1)},ee=()=>{if(typeof document>`u`)return;let e=document.getElementById(N);e&&(e.remove(),F=!1)},te=()=>{B(),ee()},ne=()=>{B(),L()},re=()=>{te(),z()};if(typeof document<`u`){let e=()=>{z()};document.readyState===`loading`?document.addEventListener(`DOMContentLoaded`,e):e()}function ie(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 V({value:e,duration:t=700,fontSize:n=`3rem`,fontWeight:r=`700`,color:i=`#000`,digitHeight:a=60,stagger:o=30,motionBlur:s=!0,format:u,trend:d=0,animationConfig:f}){let p=(0,c.useMemo)(()=>{if(f){let{overshoot:e=1,stiffness:t=1,mass:n=1}=f,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)`},[f]),m=(0,c.useMemo)(()=>ie(e,u),[e,u]),h=(0,c.useRef)(new Set),g=(0,c.useRef)(!0),_=(0,c.useMemo)(()=>{if(g.current)return new Set;let e=new Set;return m.forEach(t=>{h.current.has(t.key)||e.add(t.key)}),e},[m]);(0,c.useEffect)(()=>{g.current=!1,h.current=new Set(m.map(e=>e.key))},[m]);let v=e=>(Math.abs(e)-1)*o;return(0,l.jsx)(`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:m.map(e=>{let n=_.has(e.key);return e.isDigit?(0,l.jsx)(oe,{digit:Number.parseInt(e.char),duration:t,digitHeight:a,delay:v(e.position),motionBlur:s,easing:p,isEntering:n,trend:d},e.key):(0,l.jsx)(ae,{char:e.char,isEntering:n,duration:t,easing:p},e.key)})})}function ae({char:e,isEntering:t,duration:n,easing:r}){let i=(0,c.useRef)(null),a=(0,c.useRef)(!1);return(0,c.useLayoutEffect)(()=>{!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]),(0,l.jsx)(`span`,{ref:i,style:{display:`inline-block`,whiteSpace:`pre`,opacity:t?0:1},children:e})}function oe({digit:e,duration:t,digitHeight:n,delay:r,motionBlur:i,easing:a,isEntering:o,trend:s}){let u=(0,c.useRef)(null),d=(0,c.useRef)(null),f=(0,c.useRef)(null),p=(0,c.useRef)(`blur-${Math.random().toString(36).slice(2,9)}`).current,m=(0,c.useRef)(null),h=(0,c.useRef)(e),g=(0,c.useRef)(!1),_=(0,c.useMemo)(()=>{let e=[];for(let t=-1;t<=1;t++)for(let t=0;t<=9;t++)e.push(t);return e},[]);(0,c.useLayoutEffect)(()=>{if(!g.current){g.current=!0;let t=-(e+10)*n;m.current=t,h.current=e,u.current&&(u.current.style.transform=`translateY(${t}px)`)}},[e,n]),(0,c.useLayoutEffect)(()=>{!d.current||!o||d.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]),(0,c.useEffect)(()=>{h.current=e,g.current&&(e===(m.current===null?e:((Math.round(-m.current/n)-10)%10+10)%10)&&m.current!==null||v(e))},[e,n]);let v=e=>{if(!u.current||!d.current)return;if(f.current){let e=getComputedStyle(u.current);m.current=new DOMMatrix(e.transform).m42,f.current.cancel(),f.current=null,u.current.style.transform=`translateY(${m.current}px)`}let o=m.current===null?e+10:-m.current/n,c=((Math.round(o)-10)%10+10)%10;if(e===c&&m.current!==null){let t=-(e+10)*n;if(u.current){let e=f.current;e&&e.cancel(),u.current.style.transform=`translateY(${t}px)`}m.current=t;return}let l;s===1?l=e>=c?e-c:10-c+e:s===-1?l=e<=c?e-c:e-c-10:(l=e-c,l>5?l-=10:l<-5&&(l+=10));let g=m.current??-(c+10)*n,_=g-l*n,y=document.getElementById(p)?.querySelector(`feGaussianBlur`);if(i&&y){let e=Math.min(Math.abs(l)*1.2,6);y.setAttribute(`stdDeviation`,`0,${e}`),d.current.style.filter=`url(#${p})`}let b=u.current.animate([{transform:`translateY(${g}px)`},{transform:`translateY(${_}px)`}],{duration:t,delay:r,easing:a,fill:`forwards`});f.current=b,b.onfinish=()=>{let t=-(e+10)*n;u.current&&(b.cancel(),u.current.style.transform=`translateY(${t}px)`),m.current=t,d.current&&(d.current.style.filter=`none`),y&&y.setAttribute(`stdDeviation`,`0,0`),f.current=null,h.current!==e&&requestAnimationFrame(()=>{v(h.current)})},b.oncancel=()=>{f.current=null}};return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(`svg`,{style:{position:`absolute`,width:0,height:0},"aria-hidden":`true`,children:(0,l.jsx)(`defs`,{children:(0,l.jsx)(`filter`,{id:p,children:(0,l.jsx)(`feGaussianBlur`,{in:`SourceGraphic`,stdDeviation:`0,0`})})})}),(0,l.jsx)(`div`,{ref:d,style:{position:`relative`,height:`${n}px`,overflow:`hidden`,width:`0.65em`,textAlign:`center`,opacity:o?0:1},children:(0,l.jsx)(`div`,{ref:u,style:{position:`absolute`,left:0,right:0,willChange:`transform`},children:_.map((e,t)=>(0,l.jsx)(`div`,{style:{height:`${n}px`,display:`flex`,alignItems:`center`,justifyContent:`center`},children:e},t))})})]})}(0,c.createContext)(null);const se={events:[],isEnabled:!1,isCollecting:!1,enableDebug:()=>{},disableDebug:()=>{},toggleDebug:()=>{},logEvent:()=>{},clearEvents:()=>{},getEventLog:()=>``,exportToCSV:()=>``,startCollecting:()=>{},stopCollecting:()=>[],flushEvents:()=>{}},H=()=>se,ce=({children:e})=>(0,l.jsx)(l.Fragment,{children:e});function U(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 le(e){let t=U(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 W(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 ue(e){let t=W(e);return{x:t.x,y:t.y,w:t.width,h:t.height}}function de(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 G(e,t){let n=U(t);return Object.entries(e).map(([e,t])=>{let r=n[e]||``;return{property:e,expected:t,actual:r,matches:fe(e,t)===fe(e,r)}})}function fe(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 K(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 pe(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 me(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 he(e){return e.getAnimations().map(me)}var ge=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[]}};const q=new ge,J=({text:e,mode:t=`word`,direction:n=`vertical`,staggerDelay:r=_.STAGGER_DELAY,duration:i=_.DURATION_ENTER,easing:a=_.EASING_ENTER,blur:o=!0,widthAnimation:s=!1,initial:u=`initial`,exit:d,className:f=``,style:p})=>{let m=(0,c.useRef)(null),h=(0,c.useRef)(null),{logEvent:g}=H(),v=(0,c.useRef)(null),y=(0,c.useRef)(null),b=(0,c.useRef)(!1),[x,S]=(0,c.useState)(u!==`initial`);(0,c.useEffect)(()=>{u===`initial`&&!b.current&&(b.current=!0,requestAnimationFrame(()=>{S(!0)}))},[u]);let C=d===`exit`?`exit`:x?`animate`:`initial`,w=t===`character`?e.split(``):[e],T=i+(w.length-1)*r;(0,c.useEffect)(()=>{if(C===`animate`&&m.current){let c=m.current;v.current=K(T),y.current=`enter-${e.slice(0,10)}-${Date.now()}`,q.startAnimation(y.current,`enter`,e,T);let l=W(c);g({type:`text-enter-start`,source:`SlidingText`,message:`Enter animation starting for: "${e}"`,timing:{startTime:v.current.start,expectedDuration:T},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:w.length,mode:t,direction:n,staggerDelay:r,duration:i,totalDuration:T,blur:o,widthAnimation:s}});let u=setTimeout(()=>{if(v.current&&y.current&&m.current){let t=v.current.end();q.endAnimation(y.current);let n=W(m.current);g({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`}})}},T+50);return()=>clearTimeout(u)}},[C,e,t,n,r,i,a,o,s,T,w.length,g]),(0,c.useLayoutEffect)(()=>{if(!s||!m.current||!h.current)return;let e=m.current,t=h.current;if(C===`initial`)e.style.width=`0px`;else if(C===`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(C===`exit`){let t=e.getBoundingClientRect().width;e.style.width=`${t}px`,e.getBoundingClientRect(),e.style.width=`0px`,e.style.transition=`width ${_.DURATION_EXIT}ms ${_.EASING_EXIT}`}},[C,s,i,a,e]);let E=e=>{let t=e*r,s=C===`exit`,c=s?_.DURATION_EXIT:i,l=s?_.EASING_EXIT:a;return{transition:`
                 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))})})},ce=e=>{let{logEvent:t}=H(),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=U(a),D=W(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=W(a),B=G({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}},le=({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}=H(),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}=ce({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 z=v.length===0&&!w()&&!!t;return(0,l.jsxs)(`div`,{className:`waapi-animated-tokens-container ${u}`,children:[z&&(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)(R,{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 ue(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 de=f.MIN_DELTA_PX;function fe(e,t){let n=(0,c.useRef)(new Map),r=t?.minDeltaPx??de;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 pe=f.FLIP_DURATION,me=h.SPRING_GENTLE;function he(){let e=(0,c.useRef)(new Map),t=(0,c.useRef)(new Set),n=(0,c.useCallback)((n,r,i)=>{let a=i?.duration??pe,o=i?.easing??me;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 ge(e){let t=(0,c.useRef)(e);(0,c.useEffect)(()=>{t.current=e},[e]);let{logEvent:n}=H(),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=ue(),o=fe(a.getAll,{minDeltaPx:e?.minDeltaPx??f.MIN_DELTA_PX}),s=he(),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}=H(),n=(0,c.useRef)(t);(0,c.useEffect)(()=>{n.current=t},[t]);let r=ge({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 _e(e,t={}){let{autoAnimate:n=!0,stagger:r,enterDuration:i,exitDuration:a,flipDuration:o,enterEasing:s,exitEasing:l,flipEasing:u}=t,{logEvent:d}=H(),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 ve(e,t){if(e!==void 0)return typeof e==`number`?e:e[t]}const ye={auto:{position:`relative`},horizontal:{display:`flex`,flexDirection:`row`,flexWrap:`wrap`,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}=H(),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:ve(r,`enter`),exitDuration:ve(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:ye[i],children:E})});Z.displayName=`Reorder`;const be=()=>typeof navigator<`u`&&navigator.language?navigator.language:`en`;function xe(e,t={}){let{locale:n,type:r=`conjunction`,style:i=`long`,separator:a}=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??be();try{let n=new Intl.ListFormat(t,{type:r,style:i}).formatToParts(e),a=0;return n.map(e=>e.type===`element`?{type:`element`,value:e.value,index:a++}:{type:`literal`,value:e.value,index:Math.max(0,a-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])}const Se=({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,className:g=``,tokenClassName:v=``,placeholderClassName:b=``,separatorClassName:x=``})=>{let{logEvent:S}=H(),C=(0,c.useRef)(S);(0,c.useEffect)(()=>{C.current=S},[S]);let w=(0,c.useRef)(new Set),T=(0,c.useRef)(new Map),E=(0,c.useRef)(new Map),D=(0,c.useMemo)(()=>n?e.slice(0,n):e,[e,n]),O=(0,c.useMemo)(()=>n?Math.max(0,e.length-n):0,[e.length,n]),k=xe(D.map(e=>e.text),{locale:o,type:s,style:u,separator:d}),A=(0,c.useRef)(0),j=O>0&&A.current===0,M=O===0&&A.current>0;(0,c.useEffect)(()=>{A.current=O},[O]);let N=(0,c.useCallback)((e,t)=>{if(t>=D.length-1)return!1;let n=T.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}},[D.length]);(0,c.useEffect)(()=>{let e=new Set(D.map(e=>e.id)),t=T.current;for(let n of t.keys())e.has(n)||T.current.delete(n);D.forEach((e,t)=>{t<D.length-1&&!T.current.has(e.id)&&T.current.set(e.id,{animationPhase:`idle`})})},[D]);let P=(0,c.useCallback)(e=>{let t=E.current.get(e);t&&(T.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(()=>{T.current.set(e,{animationPhase:`completed`}),t.dataset.separatorState=`completed`}).catch(()=>{T.current.delete(e)}))},[]),F=(0,c.useCallback)(e=>{w.current.add(e);let t=[],n=D.findIndex(t=>t.id===e);if(n===D.length-1&&n>0){let e=D[n-1];e&&t.push(e.id)}P(e),t.forEach(e=>P(e)),C.current({type:`token-remove`,source:`AnimatedTokensV2`,message:`Token exiting: ${e}`,data:{id:e,additionalSeparators:t}})},[D,P]),I=(0,c.useCallback)(e=>{C.current({type:`token-add`,source:`AnimatedTokensV2`,message:`Token entering: ${e}`,data:{id:e}})},[]),L=e.length===0&&!!t,z=(0,c.useMemo)(()=>k.map((e,t)=>{if(e.type===`element`){let t=D[e.index];if(!t)return null;let n=w.current.has(t.id);return(0,l.jsx)(`span`,{className:`waapi-token-wrapper ${v}`,"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=D[e.index];if(!n)return null;let o=D.findIndex(e=>e.id===n.id);return N(n.id,o)?(0,l.jsx)(`span`,{ref:e=>{e?E.current.set(n.id,e):E.current.delete(n.id)},className:`waapi-token-separator ${x}`,"data-separator-state":T.current.get(n.id)?.animationPhase??`idle`,children:e.value},`sep-${n.id}-${t}`):null}).filter(Boolean),[k,D,v,r,i,a,m,x,N]),B=(0,c.useMemo)(()=>d===void 0?[...k].reverse().find(e=>e.type===`literal`)?.value??`, `:d,[k,d]),V=(0,c.useMemo)(()=>O===0&&!M?null:(0,l.jsxs)(`div`,{"data-reorder-id":`overflow-counter`,className:`waapi-token-overflow ${v} ${j?`entering`:``} ${M?`exiting`:``}`,children:[D.length>0&&(0,l.jsx)(`span`,{className:`waapi-token-separator ${x}`,children:B}),(0,l.jsx)(`span`,{className:`waapi-token-separator ${x}`,children:`+`}),(0,l.jsx)(R,{value:O,duration:_.DURATION_ENTER,fontSize:`inherit`,fontWeight:`inherit`,color:`inherit`}),(0,l.jsx)(Y,{text:` more`,mode:r,direction:i,staggerDelay:a,duration:M?_.DURATION_EXIT:_.DURATION_ENTER,blur:y.newToken.blur,initial:j?`initial`:!1,animate:`animate`})]},`overflow-counter`),[O,j,M,v,D.length,B,x,r,i,a]);return(0,l.jsxs)(`div`,{role:`text`,className:`waapi-animated-tokens-container waapi-v2 ${g}`,children:[L&&(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 ${b}`},`placeholder`),(0,l.jsxs)(Z,{layout:`horizontal`,onItemExit:F,onItemEnter:I,children:[z,V]})]})},Q=(0,c.createContext)(null);function Ce(){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 we=f.FLIP_DURATION,Te=h.EASE_OUT_CUBIC;function Ee(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??we,c=i.current?.easing??Te,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||De(h,l),v=i.current?.clipPathEnd||De(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 De(e,t){let n=parseFloat(e)||0;return`inset(0 round ${n/t.width*100}% ${n/t.height*100}%)`}const Oe=f.FLIP_DURATION,ke=h.MATERIAL_STANDARD;function Ae(e){let[t,n]=(0,c.useState)(!1),r=(0,c.useRef)(null),i=(0,c.useRef)(e),a=i.current?.duration??Oe,o=i.current?.easing??ke,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 je(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))})})},_e=e=>{let{logEvent:t}=H(),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()}`;q.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`),q.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=K(c),T=K(c+d),E=U(a),D=W(a),O=`exit-${e}-${Date.now()}`;q.startAnimation(O,`exit-fade`,e,c);let k=`width-${e}-${Date.now()}`;q.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()}`;q.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=()=>{q.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}q.endAnimation(O),q.endAnimation(k);let R=T.end(),z=W(a),B=G({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:q.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}},ve=({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}=H(),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}=_e({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)(J,{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)(J,{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)(V,{value:N,duration:_.DURATION_ENTER,fontSize:`inherit`,fontWeight:`inherit`,color:`inherit`}),(0,l.jsx)(J,{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 ye(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 be=f.MIN_DELTA_PX;function xe(e,t){let n=(0,c.useRef)(new Map),r=t?.minDeltaPx??be;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 Se=f.FLIP_DURATION,Ce=h.SPRING_GENTLE;function we(){let e=(0,c.useRef)(new Map),t=(0,c.useRef)(new Set),n=(0,c.useCallback)((n,r,i)=>{let a=i?.duration??Se,o=i?.easing??Ce;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 Te(e){let t=(0,c.useRef)(e);(0,c.useEffect)(()=>{t.current=e},[e]);let{logEvent:n}=H(),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=ye(),o=xe(a.getAll,{minDeltaPx:e?.minDeltaPx??f.MIN_DELTA_PX}),s=we(),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 Y(e){let{logEvent:t}=H(),n=(0,c.useRef)(t);(0,c.useEffect)(()=>{n.current=t},[t]);let r=Te({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 Ee(e,t={}){let{autoAnimate:n=!0,stagger:r,enterDuration:i,exitDuration:a,flipDuration:o,enterEasing:s,exitEasing:l,flipEasing:u}=t,{logEvent:d}=H(),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=Y({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 De(e,t){if(e!==void 0)return typeof e==`number`?e:e[t]}const Oe={auto:{position:`relative`},horizontal:{display:`flex`,flexDirection:`row`,flexWrap:`wrap`,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`}},X=(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}=H(),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=Y({enterDuration:De(r,`enter`),exitDuration:De(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:Oe[i],children:E})});X.displayName=`Reorder`;const ke=()=>typeof navigator<`u`&&navigator.language?navigator.language:`en`;function Ae(e,t={}){let{locale:n,type:r=`conjunction`,style:i=`long`,separator:a}=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??ke();try{let n=new Intl.ListFormat(t,{type:r,style:i}).formatToParts(e),a=0;return n.map(e=>e.type===`element`?{type:`element`,value:e.value,index:a++}:{type:`literal`,value:e.value,index:Math.max(0,a-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])}const je=({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,className:g=``,tokenClassName:v=``,placeholderClassName:b=``,separatorClassName:x=``})=>{let{logEvent:S}=H(),C=(0,c.useRef)(S);(0,c.useEffect)(()=>{C.current=S},[S]);let w=(0,c.useRef)(new Set),T=(0,c.useRef)(new Map),E=(0,c.useRef)(new Map),D=(0,c.useMemo)(()=>n?e.slice(0,n):e,[e,n]),O=(0,c.useMemo)(()=>n?Math.max(0,e.length-n):0,[e.length,n]),k=Ae(D.map(e=>e.text),{locale:o,type:s,style:u,separator:d}),A=(0,c.useRef)(0),j=O>0&&A.current===0,M=O===0&&A.current>0;(0,c.useEffect)(()=>{A.current=O},[O]);let N=(0,c.useCallback)((e,t)=>{if(t>=D.length-1)return!1;let n=T.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}},[D.length]);(0,c.useEffect)(()=>{let e=new Set(D.map(e=>e.id)),t=T.current;for(let n of t.keys())e.has(n)||T.current.delete(n);D.forEach((e,t)=>{t<D.length-1&&!T.current.has(e.id)&&T.current.set(e.id,{animationPhase:`idle`})})},[D]);let P=(0,c.useCallback)(e=>{let t=E.current.get(e);t&&(T.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(()=>{T.current.set(e,{animationPhase:`completed`}),t.dataset.separatorState=`completed`}).catch(()=>{T.current.delete(e)}))},[]),F=(0,c.useCallback)(e=>{w.current.add(e);let t=[],n=D.findIndex(t=>t.id===e);if(n===D.length-1&&n>0){let e=D[n-1];e&&t.push(e.id)}P(e),t.forEach(e=>P(e)),C.current({type:`token-remove`,source:`AnimatedTokensV2`,message:`Token exiting: ${e}`,data:{id:e,additionalSeparators:t}})},[D,P]),I=(0,c.useCallback)(e=>{C.current({type:`token-add`,source:`AnimatedTokensV2`,message:`Token entering: ${e}`,data:{id:e}})},[]),L=e.length===0&&!!t,R=(0,c.useMemo)(()=>k.map((e,t)=>{if(e.type===`element`){let t=D[e.index];if(!t)return null;let n=w.current.has(t.id);return(0,l.jsx)(`span`,{className:`waapi-token-wrapper ${v}`,"data-reorder-id":t.id,children:(0,l.jsx)(J,{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=D[e.index];if(!n)return null;let o=D.findIndex(e=>e.id===n.id);return N(n.id,o)?(0,l.jsx)(`span`,{ref:e=>{e?E.current.set(n.id,e):E.current.delete(n.id)},className:`waapi-token-separator ${x}`,"data-separator-state":T.current.get(n.id)?.animationPhase??`idle`,children:e.value},`sep-${n.id}-${t}`):null}).filter(Boolean),[k,D,v,r,i,a,m,x,N]),z=(0,c.useMemo)(()=>d===void 0?[...k].reverse().find(e=>e.type===`literal`)?.value??`, `:d,[k,d]),B=(0,c.useMemo)(()=>O===0&&!M?null:(0,l.jsxs)(`div`,{"data-reorder-id":`overflow-counter`,className:`waapi-token-overflow ${v} ${j?`entering`:``} ${M?`exiting`:``}`,children:[D.length>0&&(0,l.jsx)(`span`,{className:`waapi-token-separator ${x}`,children:z}),(0,l.jsx)(`span`,{className:`waapi-token-separator ${x}`,children:`+`}),(0,l.jsx)(V,{value:O,duration:_.DURATION_ENTER,fontSize:`inherit`,fontWeight:`inherit`,color:`inherit`}),(0,l.jsx)(J,{text:` more`,mode:r,direction:i,staggerDelay:a,duration:M?_.DURATION_EXIT:_.DURATION_ENTER,blur:y.newToken.blur,initial:j?`initial`:!1,animate:`animate`})]},`overflow-counter`),[O,j,M,v,D.length,z,x,r,i,a]);return(0,l.jsxs)(`div`,{role:`text`,className:`waapi-animated-tokens-container waapi-v2 ${g}`,children:[L&&(0,l.jsx)(J,{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 ${b}`},`placeholder`),(0,l.jsxs)(X,{layout:`horizontal`,onItemExit:F,onItemEnter:I,children:[R,B]})]})},Z=(0,c.createContext)(null);function Me(){let e=(0,c.useContext)(Z);if(!e)throw Error(`useMorphContext must be used within a <Morph> component. Wrap your morphable components with <Morph>.`);return e}const Ne=f.FLIP_DURATION,Pe=h.EASE_OUT_CUBIC;function Fe(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??Ne,c=i.current?.easing??Pe,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||Q(h,l),v=i.current?.clipPathEnd||Q(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 Q(e,t){let n=parseFloat(e)||0;return`inset(0 round ${n/t.width*100}% ${n/t.height*100}%)`}const Ie=f.FLIP_DURATION,Le=h.MATERIAL_STANDARD;function Re(e){let[t,n]=(0,c.useState)(!1),r=(0,c.useRef)(null),i=(0,c.useRef)(e),a=i.current?.duration??Ie,o=i.current?.easing??Le,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 ze(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;
             animation-timing-function: ease-out;
           }
-        `,document.head.appendChild(e),()=>{e.remove()}}return()=>{}})();try{await document.startViewTransition(e).finished}finally{r()}},[]),setTypes:i}}function $(e){let t=e?.technique??`flip-clip-path`,n=(0,c.useRef)(e);(0,c.useEffect)(()=>{n.current=e},[e]);let r=Ee({duration:e?.duration,easing:e?.easing}),i=Ae({duration:e?.duration,easing:e?.easing}),a=je(),o=r.isMorphing,s=(0,c.useCallback)(async(e,t)=>{switch(n.current?.onMorphStart?.(),n.current?.technique??`flip-clip-path`){case`flip-clip-path`:await r.morph(e,t);break;case`view-transitions`:a.isSupported?await a.startTransition(()=>{e.style.opacity=`0`,t.style.opacity=`1`}):await r.morph(e,t);break;case`css-grid`:i.toggle();break}n.current?.onMorphEnd?.()},[r,a,i]),l=(0,c.useCallback)(()=>{r.cancel()},[r]);return{isMorphing:o,technique:t,isViewTransitionsSupported:a.isSupported,morph:s,cancel:l,flipClipPath:r,cssGrid:i,viewTransitions:a}}function Me({children:e,technique:t=`flip-clip-path`,duration:n,easing:r,className:i=``,onMorphStart:a,onMorphEnd:o}){let s=$({technique:t,duration:n,easing:r,onMorphStart:a,onMorphEnd:o}),u=(0,c.useMemo)(()=>({morph:s}),[s]);return(0,l.jsx)(Q.Provider,{value:u,children:(0,l.jsx)(`div`,{className:`morph-container ${i}`,children:e})})}const Ne=D,Pe=(e,t)=>{let n={...D.token};return e===`enter-from`?(Object.assign(n,D.enterFrom),t===`vertical`?Object.assign(n,D.verticalEnterFrom):Object.assign(n,D.horizontalEnterFrom)):e===`enter-to`?Object.assign(n,D.enterTo):e===`exit-active`&&(Object.assign(n,D.exitActive),t===`vertical`?Object.assign(n,D.verticalExitActive):Object.assign(n,D.horizontalExitActive)),n},Fe=()=>{let e=k();return{...D.container,...e}},Ie=E,Le=()=>{let e=k();return{...E.container,...e}};exports.ANIMATION_CONFIGS=v,exports.ANIMATION_DEFAULTS=_,exports.AnimatedTokens=le,exports.AnimatedTokensV2=Se,exports.TextFlow=Se,exports.CSS_VAR_NAMES=S,exports.CSS_VAR_VALUES=C,exports.DebugProvider=ee,exports.EASINGS=h,exports.EFFECTS=m,exports.Morph=Me,exports.MorphContext=Q,exports.PRESETS=y,exports.RESPONSIVE_CONFIGS=g,exports.Reorder=Z,exports.SlidingNumber=R,exports.SlidingText=Y,exports.TIMING=f,exports.TRANSFORMS=p,exports.animatedTokensBaseStyles=E,exports.animatedTokensStyles=Ie,exports.calculatePositionDelta=re,exports.captureAnimationInfo=ae,exports.captureComputedStyles=U,exports.captureElementAnimations=oe,exports.capturePosition=W,exports.capturePositionForLog=ne,exports.captureStylesForLog=te,exports.choreographyTracker=J,exports.compareStyles=G,exports.createAnimationTimer=q,exports.cssVar=w,exports.formatTimingResult=ie,exports.generateCSSVariables=A,exports.generateResponsiveCSS=j,exports.getResponsiveAnimatedTokensStyle=Le,exports.getResponsiveDuration=u,exports.getResponsiveSlidingTextStyle=Fe,exports.getResponsiveStagger=d,exports.getResponsiveTokenStyles=k,exports.getSlidingTextTokenStyle=Pe,exports.injectCSSVariables=P,exports.reinjectCSSVariables=I,exports.removeCSSVariables=F,exports.responsiveOverrides=O,exports.slidingTextBaseStyles=D,exports.slidingTextStyles=Ne,exports.useAnimationOrchestrator=ge,exports.useCSSGridMorph=Ae,exports.useDebug=H,exports.useElementRegistry=ue,exports.useFLIPAnimation=he,exports.useFLIPClipPath=Ee,exports.useListFormat=xe,exports.useMorph=$,exports.useMorphContext=Ce,exports.usePositionCapture=fe,exports.useReorder=X,exports.useReorderPresence=_e,exports.useViewTransitions=je,exports.useWAAPIAnimations=ce;
+        `,document.head.appendChild(e),()=>{e.remove()}}return()=>{}})();try{await document.startViewTransition(e).finished}finally{r()}},[]),setTypes:i}}function $(e){let t=e?.technique??`flip-clip-path`,n=(0,c.useRef)(e);(0,c.useEffect)(()=>{n.current=e},[e]);let r=Fe({duration:e?.duration,easing:e?.easing}),i=Re({duration:e?.duration,easing:e?.easing}),a=ze(),o=r.isMorphing,s=(0,c.useCallback)(async(e,t)=>{switch(n.current?.onMorphStart?.(),n.current?.technique??`flip-clip-path`){case`flip-clip-path`:await r.morph(e,t);break;case`view-transitions`:a.isSupported?await a.startTransition(()=>{e.style.opacity=`0`,t.style.opacity=`1`}):await r.morph(e,t);break;case`css-grid`:i.toggle();break}n.current?.onMorphEnd?.()},[r,a,i]),l=(0,c.useCallback)(()=>{r.cancel()},[r]);return{isMorphing:o,technique:t,isViewTransitionsSupported:a.isSupported,morph:s,cancel:l,flipClipPath:r,cssGrid:i,viewTransitions:a}}function Be({children:e,technique:t=`flip-clip-path`,duration:n,easing:r,className:i=``,onMorphStart:a,onMorphEnd:o}){let s=$({technique:t,duration:n,easing:r,onMorphStart:a,onMorphEnd:o}),u=(0,c.useMemo)(()=>({morph:s}),[s]);return(0,l.jsx)(Z.Provider,{value:u,children:(0,l.jsx)(`div`,{className:`morph-container ${i}`,children:e})})}const Ve=D,He=(e,t)=>{let n={...D.token};return e===`enter-from`?(Object.assign(n,D.enterFrom),t===`vertical`?Object.assign(n,D.verticalEnterFrom):Object.assign(n,D.horizontalEnterFrom)):e===`enter-to`?Object.assign(n,D.enterTo):e===`exit-active`&&(Object.assign(n,D.exitActive),t===`vertical`?Object.assign(n,D.verticalExitActive):Object.assign(n,D.horizontalExitActive)),n},Ue=()=>{let e=k();return{...D.container,...e}},We=E,Ge=()=>{let e=k();return{...E.container,...e}};exports.ANIMATION_CONFIGS=v,exports.ANIMATION_DEFAULTS=_,exports.AnimatedTokens=ve,exports.AnimatedTokensV2=je,exports.TextFlow=je,exports.CSS_VAR_NAMES=S,exports.CSS_VAR_VALUES=C,exports.DebugProvider=ce,exports.EASINGS=h,exports.EFFECTS=m,exports.Morph=Be,exports.MorphContext=Z,exports.PRESETS=y,exports.RESPONSIVE_CONFIGS=g,exports.Reorder=X,exports.SlidingNumber=V,exports.SlidingText=J,exports.TIMING=f,exports.TRANSFORMS=p,exports.animatedTokensBaseStyles=E,exports.animatedTokensStyles=We,exports.calculatePositionDelta=de,exports.captureAnimationInfo=me,exports.captureComputedStyles=U,exports.captureElementAnimations=he,exports.capturePosition=W,exports.capturePositionForLog=ue,exports.captureStylesForLog=le,exports.choreographyTracker=q,exports.compareStyles=G,exports.createAnimationTimer=K,exports.cssVar=w,exports.formatTimingResult=pe,exports.generateCSSVariables=A,exports.generateResponsiveCSS=j,exports.getResponsiveAnimatedTokensStyle=Ge,exports.getResponsiveDuration=u,exports.getResponsiveSlidingTextStyle=Ue,exports.getResponsiveStagger=d,exports.getResponsiveTokenStyles=k,exports.getSlidingTextTokenStyle=He,exports.injectAllCSS=z,exports.injectCSSVariables=L,exports.injectStructuralCSS=R,exports.reinjectAllCSS=re,exports.reinjectCSSVariables=ne,exports.removeAllCSS=te,exports.removeCSSVariables=B,exports.removeStructuralCSS=ee,exports.responsiveOverrides=O,exports.slidingTextBaseStyles=D,exports.slidingTextStyles=Ve,exports.useAnimationOrchestrator=Te,exports.useCSSGridMorph=Re,exports.useDebug=H,exports.useElementRegistry=ye,exports.useFLIPAnimation=we,exports.useFLIPClipPath=Fe,exports.useListFormat=Ae,exports.useMorph=$,exports.useMorphContext=Me,exports.usePositionCapture=xe,exports.useReorder=Y,exports.useReorderPresence=Ee,exports.useViewTransitions=ze,exports.useWAAPIAnimations=_e;
 //# sourceMappingURL=index.cjs.map