@mks2508/waapi-animation-primitives 0.3.0 → 0.4.0

package/dist/index.js

@@ -46,15 +46,268 @@ ${Object.entries(F.highContrast).map(([e,t])=>`    ${e}: ${t};`).join(`
 `)}
   }
 }
-`.trim(),z=`waapi-animation-primitives-vars`;let B=!1;const V=()=>{if(typeof document>`u`||B)return;if(document.getElementById(z)){B=!0;return}let e=document.createElement(`style`);e.id=z,e.textContent=R(),document.head.appendChild(e),B=!0},H=()=>{if(typeof document>`u`)return;let e=document.getElementById(z);e&&(e.remove(),B=!1)},U=()=>{H(),V()};typeof document<`u`&&(document.readyState===`loading`?document.addEventListener(`DOMContentLoaded`,V):V());function ee(e,t){let n=t?.locale||`en-US`,r={style:t?.style||`decimal`,minimumFractionDigits:t?.minimumFractionDigits,maximumFractionDigits:t?.maximumFractionDigits,useGrouping:t?.useGrouping??!0};t?.style===`currency`&&t?.currency&&(r.currency=t.currency);let i=new Intl.NumberFormat(n,r).formatToParts(e),a=[],o=0;i.forEach(e=>{e.type===`integer`&&(o+=e.value.length)});let s=o,c=0,l=0;return i.forEach((e,t)=>{if(e.type===`integer`)for(let t of e.value)a.push({char:t,key:`int-${s}`,isDigit:!0,position:s}),s--;else if(e.type===`fraction`)for(let t of e.value)c++,a.push({char:t,key:`frac-${c}`,isDigit:!0,position:-c});else e.type===`decimal`?a.push({char:e.value,key:`decimal`,isDigit:!1,position:0}):e.type===`group`?(l++,a.push({char:e.value,key:`group-${l}`,isDigit:!1,position:0})):e.type===`currency`?a.push({char:e.value,key:`currency-${t}`,isDigit:!1,position:0}):e.type===`percentSign`?a.push({char:e.value,key:`percent`,isDigit:!1,position:0}):a.push({char:e.value,key:`symbol-${t}`,isDigit:!1,position:0})}),a}function W({value:e,duration:t=700,fontSize:n=`3rem`,fontWeight:r=`700`,color:i=`#000`,digitHeight:a=60,stagger:o=30,motionBlur:s=!0,format:l,trend:u=0,animationConfig:p}){let m=d(()=>{if(p){let{overshoot:e=1,stiffness:t=1,mass:n=1}=p,r=.34*t,i=1+.56*e,a=.64/n;return`cubic-bezier(${Math.min(r,1).toFixed(2)}, ${Math.min(i,2).toFixed(2)}, ${Math.min(a,1).toFixed(2)}, 1)`}return`cubic-bezier(0.34, 1.56, 0.64, 1)`},[p]),g=d(()=>ee(e,l),[e,l]),_=f(new Set),v=f(!0),y=d(()=>{if(v.current)return new Set;let e=new Set;return g.forEach(t=>{_.current.has(t.key)||e.add(t.key)}),e},[g]);c(()=>{v.current=!1,_.current=new Set(g.map(e=>e.key))},[g]);let b=e=>(Math.abs(e)-1)*o;return h(`div`,{style:{display:`inline-flex`,alignItems:`center`,fontSize:n,fontWeight:r,color:i,fontVariantNumeric:`tabular-nums`,fontFamily:`system-ui, -apple-system, sans-serif`,overflow:`hidden`},children:g.map(e=>{let n=y.has(e.key);return e.isDigit?h(ne,{digit:Number.parseInt(e.char),duration:t,digitHeight:a,delay:b(e.position),motionBlur:s,easing:m,isEntering:n,trend:u},e.key):h(te,{char:e.char,isEntering:n,duration:t,easing:m},e.key)})})}function te({char:e,isEntering:t,duration:n,easing:r}){let i=f(null),a=f(!1);return u(()=>{!i.current||!t||a.current||(a.current=!0,i.current.animate([{opacity:0,transform:`scale(0.8)`},{opacity:1,transform:`scale(1)`}],{duration:n*.3,easing:r,fill:`forwards`}))},[t,n,r]),h(`span`,{ref:i,style:{display:`inline-block`,whiteSpace:`pre`,opacity:t?0:1},children:e})}function ne({digit:e,duration:t,digitHeight:n,delay:r,motionBlur:i,easing:a,isEntering:o,trend:s}){let l=f(null),p=f(null),_=f(null),v=f(`blur-${Math.random().toString(36).slice(2,9)}`).current,y=f(null),b=f(e),x=f(!1),S=d(()=>{let e=[];for(let t=-1;t<=1;t++)for(let t=0;t<=9;t++)e.push(t);return e},[]);u(()=>{if(!x.current){x.current=!0;let t=-(e+10)*n;y.current=t,b.current=e,l.current&&(l.current.style.transform=`translateY(${t}px)`)}},[e,n]),u(()=>{!p.current||!o||p.current.animate([{opacity:0,transform:`scale(0.5) translateY(-20px)`},{opacity:1,transform:`scale(1) translateY(0)`}],{duration:t*.4,easing:a,fill:`forwards`})},[o,t,a]),c(()=>{b.current=e,x.current&&(e===(y.current===null?e:((Math.round(-y.current/n)-10)%10+10)%10)&&y.current!==null||C(e))},[e,n]);let C=e=>{if(!l.current||!p.current)return;if(_.current){let e=getComputedStyle(l.current);y.current=new DOMMatrix(e.transform).m42,_.current.cancel(),_.current=null,l.current.style.transform=`translateY(${y.current}px)`}let o=y.current===null?e+10:-y.current/n,c=((Math.round(o)-10)%10+10)%10;if(e===c&&y.current!==null){let t=-(e+10)*n;if(l.current){let e=_.current;e&&e.cancel(),l.current.style.transform=`translateY(${t}px)`}y.current=t;return}let u;s===1?u=e>=c?e-c:10-c+e:s===-1?u=e<=c?e-c:e-c-10:(u=e-c,u>5?u-=10:u<-5&&(u+=10));let d=y.current??-(c+10)*n,f=d-u*n,m=document.getElementById(v)?.querySelector(`feGaussianBlur`);if(i&&m){let e=Math.min(Math.abs(u)*1.2,6);m.setAttribute(`stdDeviation`,`0,${e}`),p.current.style.filter=`url(#${v})`}let h=l.current.animate([{transform:`translateY(${d}px)`},{transform:`translateY(${f}px)`}],{duration:t,delay:r,easing:a,fill:`forwards`});_.current=h,h.onfinish=()=>{let t=-(e+10)*n;l.current&&(h.cancel(),l.current.style.transform=`translateY(${t}px)`),y.current=t,p.current&&(p.current.style.filter=`none`),m&&m.setAttribute(`stdDeviation`,`0,0`),_.current=null,b.current!==e&&requestAnimationFrame(()=>{C(b.current)})},h.oncancel=()=>{_.current=null}};return g(m,{children:[h(`svg`,{style:{position:`absolute`,width:0,height:0},"aria-hidden":`true`,children:h(`defs`,{children:h(`filter`,{id:v,children:h(`feGaussianBlur`,{in:`SourceGraphic`,stdDeviation:`0,0`})})})}),h(`div`,{ref:p,style:{position:`relative`,height:`${n}px`,overflow:`hidden`,width:`0.65em`,textAlign:`center`,opacity:o?0:1},children:h(`div`,{ref:l,style:{position:`absolute`,left:0,right:0,willChange:`transform`},children:S.map((e,t)=>h(`div`,{style:{height:`${n}px`,display:`flex`,alignItems:`center`,justifyContent:`center`},children:e},t))})})]})}const re=r(null),G=()=>{let e=s(re);if(!e)throw Error(`useDebug must be used within DebugProvider`);return e},ie=({children:e})=>{let[t,n]=p([]),[r,i]=p(!0),[a,s]=p(!1),l=f(r),u=f([]),m=f(null);f([]);let g=f(!1);l.current=r,g.current=a;let _=o(()=>{if(u.current.length===0)return;let e=[...u.current];u.current=[],m.current=null,n(t=>[...t,...e])},[]);c(()=>()=>{m.current!==null&&(cancelAnimationFrame(m.current),u.current.length>0&&(n(e=>[...e,...u.current]),u.current=[]))},[]);let v=o(e=>{},[_]),y=o(()=>{},[]),b=o(()=>{},[]),x=o(()=>{},[]),S=o(()=>{},[]),C=o(()=>{},[]),w=o(()=>[],[]),T=o(()=>{},[_]),E=o(()=>``,[t]),D=o(()=>``,[t]),O=d(()=>({events:[],isEnabled:!1,isCollecting:!1,enableDebug:b,disableDebug:x,toggleDebug:S,logEvent:v,clearEvents:y,getEventLog:D,exportToCSV:E,startCollecting:C,stopCollecting:w,flushEvents:T}),[t,r,a,b,x,S,v,y,D,E,C,w,T]);return h(re.Provider,{value:O,children:e})};function K(e){let t=getComputedStyle(e);return{opacity:t.opacity,transform:t.transform,filter:t.filter,width:t.width,height:t.height,marginRight:t.marginRight,marginLeft:t.marginLeft,position:t.position,visibility:t.visibility,pointerEvents:t.pointerEvents}}function ae(e){let t=K(e);return{opacity:t.opacity,transform:t.transform===`none`?`none`:t.transform,filter:t.filter===`none`?`none`:t.filter,width:t.width,marginRight:t.marginRight,position:t.position}}function q(e){let t=e.getBoundingClientRect();return{x:Math.round(t.x*100)/100,y:Math.round(t.y*100)/100,width:Math.round(t.width*100)/100,height:Math.round(t.height*100)/100,top:Math.round(t.top*100)/100,left:Math.round(t.left*100)/100,right:Math.round(t.right*100)/100,bottom:Math.round(t.bottom*100)/100}}function oe(e){let t=q(e);return{x:t.x,y:t.y,w:t.width,h:t.height}}function se(e,t){return{deltaX:Math.round((e.left-t.left)*100)/100,deltaY:Math.round((e.top-t.top)*100)/100,deltaWidth:Math.round((e.width-t.width)*100)/100,deltaHeight:Math.round((e.height-t.height)*100)/100}}function ce(e,t){let n=K(t);return Object.entries(e).map(([e,t])=>{let r=n[e]||``;return{property:e,expected:t,actual:r,matches:le(e,t)===le(e,r)}})}function le(e,t){if(!t)return``;if(e===`opacity`)return parseFloat(t).toString();if(e===`transform`){if(t===`none`)return`none`;let e=t.match(/matrix\(([^)]+)\)/);if(e&&e[1]){let t=e[1].split(`,`).map(e=>parseFloat(e.trim())),n=t[4],r=t[5];if(n!==void 0&&r!==void 0)return`translate(${Math.round(n)}px, ${Math.round(r)}px)`}return t}if(e===`width`||e===`height`||e.includes(`margin`)){let e=parseFloat(t);if(!isNaN(e))return`${Math.round(e)}px`}if(e===`filter`){if(t===`none`)return`none`;let e=t.match(/blur\(([^)]+)\)/);if(e&&e[1]){let t=parseFloat(e[1]);return`blur(${Math.round(t)}px)`}}return t}function J(e){let t=performance.now();return{start:t,expectedDuration:e,end:()=>{let n=performance.now(),r=n-t,i=r-e;return{startTime:Math.round(t*100)/100,endTime:Math.round(n*100)/100,expectedDuration:e,actualDuration:Math.round(r*100)/100,deviation:Math.round(i*100)/100,deviationPercent:Math.round(i/e*1e4)/100}}}}function ue(e){let t=e.deviation>=0?`+`:``,n=Math.abs(e.deviation)<10?`✅`:`⚠️`;return`Expected: ${e.expectedDuration}ms | Actual: ${e.actualDuration}ms | Deviation: ${t}${e.deviation}ms ${n}`}function de(e){let t=e.effect?.getTiming?.();return{id:e.id,playState:e.playState,currentTime:e.currentTime,playbackRate:e.playbackRate,pending:e.pending,duration:t?.duration,easing:t?.easing,fill:t?.fill}}function fe(e){return e.getAnimations().map(de)}const Y=new class{constructor(){this.activeAnimations=new Map,this.timeline=[],this.completedAnimations=[],this.sessionStartTime=0}startSession(){}getRelativeTime(){return Math.round((performance.now()-this.sessionStartTime)*100)/100}startAnimation(e,t,n,r){}endAnimation(e){}detectOverlaps(e){let t=[];return this.activeAnimations.forEach((n,r)=>{r!==e&&t.push(`${n.type}:${n.elementId}`)}),t}getOverlaps(){return[]}getTimeline(){return[]}getActiveCount(){return 0}getActiveAnimations(){return[]}getCompletedAnimations(){return[]}getSummary(){return{totalAnimations:0,totalDuration:0,overlaps:[],timeline:[],activeAnimations:[]}}getTimelineForVisualization(){return[]}},X=({text:e,mode:t=`word`,direction:n=`vertical`,staggerDelay:r=w.STAGGER_DELAY,duration:i=w.DURATION_ENTER,easing:a=w.EASING_ENTER,blur:o=!0,widthAnimation:s=!1,initial:l=`initial`,exit:d,className:m=``,style:g})=>{let _=f(null),v=f(null),{logEvent:y}=G(),b=f(null),x=f(null),S=f(!1),[C,T]=p(l!==`initial`);c(()=>{l===`initial`&&!S.current&&(S.current=!0,requestAnimationFrame(()=>{T(!0)}))},[l]);let E=d===`exit`?`exit`:C?`animate`:`initial`,D=t===`character`?e.split(``):[e],O=i+(D.length-1)*r;c(()=>{if(E===`animate`&&_.current){let c=_.current;b.current=J(O),x.current=`enter-${e.slice(0,10)}-${Date.now()}`,Y.startAnimation(x.current,`enter`,e,O);let l=q(c);y({type:`text-enter-start`,source:`SlidingText`,message:`Enter animation starting for: "${e}"`,timing:{startTime:b.current.start,expectedDuration:O},position:{element:e,x:l.x,y:l.y,width:l.width,height:l.height},animation:{name:`enter`,phase:`start`,easing:a,fill:`forwards`},data:{text:e,charCount:D.length,mode:t,direction:n,staggerDelay:r,duration:i,totalDuration:O,blur:o,widthAnimation:s}});let u=setTimeout(()=>{if(b.current&&x.current&&_.current){let t=b.current.end();Y.endAnimation(x.current);let n=q(_.current);y({type:`text-enter-complete`,source:`SlidingText`,message:`Enter animation complete for: "${e}"`,timing:{startTime:t.startTime,endTime:t.endTime,expectedDuration:t.expectedDuration,actualDuration:t.actualDuration,deviation:t.deviation,deviationPercent:t.deviationPercent},position:{element:e,x:n.x,y:n.y,width:n.width,height:n.height},animation:{name:`enter`,phase:`complete`,progress:1,easing:a,fill:`forwards`},data:{text:e,deviationStatus:Math.abs(t.deviation)<10?`OK`:`WARNING`}})}},O+50);return()=>clearTimeout(u)}},[E,e,t,n,r,i,a,o,s,O,D.length,y]),u(()=>{if(!s||!_.current||!v.current)return;let e=_.current,t=v.current;if(E===`initial`)e.style.width=`0px`;else if(E===`animate`)if(CSS.supports(`interpolate-size`,`allow-keywords`))e.style.width=`auto`,e.style.transition=`width ${i}ms ${a}`;else{let n=t.scrollWidth;e.style.width=`${n}px`,e.style.transition=`width ${i}ms ${a}`;let r=setTimeout(()=>{e.style.width=`auto`},i);return()=>clearTimeout(r)}else if(E===`exit`){let t=e.getBoundingClientRect().width;e.style.width=`${t}px`,e.getBoundingClientRect(),e.style.width=`0px`,e.style.transition=`width ${w.DURATION_EXIT}ms ${w.EASING_EXIT}`}},[E,s,i,a,e]);let k=e=>{let t=e*r,s=E===`exit`,c=s?w.DURATION_EXIT:i,l=s?w.EASING_EXIT:a;return{transition:`
+`.trim(),z=`waapi-animation-primitives-vars`,B=`waapi-animation-primitives-structural`;let V=!1,H=!1;const U=()=>{if(typeof document>`u`||V)return;if(document.getElementById(z)){V=!0;return}let e=document.createElement(`style`);e.id=z,e.textContent=R(),document.head.appendChild(e),V=!0},W=()=>{if(typeof document>`u`||H)return;if(document.getElementById(B)){H=!0;return}let e=document.createElement(`style`);e.id=B,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),H=!0},G=()=>{U(),W()},K=()=>{if(typeof document>`u`)return;let e=document.getElementById(z);e&&(e.remove(),V=!1)},ee=()=>{if(typeof document>`u`)return;let e=document.getElementById(B);e&&(e.remove(),H=!1)},te=()=>{K(),ee()},ne=()=>{K(),U()},re=()=>{te(),G()};if(typeof document<`u`){let e=()=>{G()};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 q({value:e,duration:t=700,fontSize:n=`3rem`,fontWeight:r=`700`,color:i=`#000`,digitHeight:a=60,stagger:o=30,motionBlur:s=!0,format:l,trend:u=0,animationConfig:p}){let m=d(()=>{if(p){let{overshoot:e=1,stiffness:t=1,mass:n=1}=p,r=.34*t,i=1+.56*e,a=.64/n;return`cubic-bezier(${Math.min(r,1).toFixed(2)}, ${Math.min(i,2).toFixed(2)}, ${Math.min(a,1).toFixed(2)}, 1)`}return`cubic-bezier(0.34, 1.56, 0.64, 1)`},[p]),g=d(()=>ie(e,l),[e,l]),_=f(new Set),v=f(!0),y=d(()=>{if(v.current)return new Set;let e=new Set;return g.forEach(t=>{_.current.has(t.key)||e.add(t.key)}),e},[g]);c(()=>{v.current=!1,_.current=new Set(g.map(e=>e.key))},[g]);let b=e=>(Math.abs(e)-1)*o;return h(`div`,{style:{display:`inline-flex`,alignItems:`center`,fontSize:n,fontWeight:r,color:i,fontVariantNumeric:`tabular-nums`,fontFamily:`system-ui, -apple-system, sans-serif`,overflow:`hidden`},children:g.map(e=>{let n=y.has(e.key);return e.isDigit?h(oe,{digit:Number.parseInt(e.char),duration:t,digitHeight:a,delay:b(e.position),motionBlur:s,easing:m,isEntering:n,trend:u},e.key):h(ae,{char:e.char,isEntering:n,duration:t,easing:m},e.key)})})}function ae({char:e,isEntering:t,duration:n,easing:r}){let i=f(null),a=f(!1);return u(()=>{!i.current||!t||a.current||(a.current=!0,i.current.animate([{opacity:0,transform:`scale(0.8)`},{opacity:1,transform:`scale(1)`}],{duration:n*.3,easing:r,fill:`forwards`}))},[t,n,r]),h(`span`,{ref:i,style:{display:`inline-block`,whiteSpace:`pre`,opacity:t?0:1},children:e})}function oe({digit:e,duration:t,digitHeight:n,delay:r,motionBlur:i,easing:a,isEntering:o,trend:s}){let l=f(null),p=f(null),_=f(null),v=f(`blur-${Math.random().toString(36).slice(2,9)}`).current,y=f(null),b=f(e),x=f(!1),S=d(()=>{let e=[];for(let t=-1;t<=1;t++)for(let t=0;t<=9;t++)e.push(t);return e},[]);u(()=>{if(!x.current){x.current=!0;let t=-(e+10)*n;y.current=t,b.current=e,l.current&&(l.current.style.transform=`translateY(${t}px)`)}},[e,n]),u(()=>{!p.current||!o||p.current.animate([{opacity:0,transform:`scale(0.5) translateY(-20px)`},{opacity:1,transform:`scale(1) translateY(0)`}],{duration:t*.4,easing:a,fill:`forwards`})},[o,t,a]),c(()=>{b.current=e,x.current&&(e===(y.current===null?e:((Math.round(-y.current/n)-10)%10+10)%10)&&y.current!==null||C(e))},[e,n]);let C=e=>{if(!l.current||!p.current)return;if(_.current){let e=getComputedStyle(l.current);y.current=new DOMMatrix(e.transform).m42,_.current.cancel(),_.current=null,l.current.style.transform=`translateY(${y.current}px)`}let o=y.current===null?e+10:-y.current/n,c=((Math.round(o)-10)%10+10)%10;if(e===c&&y.current!==null){let t=-(e+10)*n;if(l.current){let e=_.current;e&&e.cancel(),l.current.style.transform=`translateY(${t}px)`}y.current=t;return}let u;s===1?u=e>=c?e-c:10-c+e:s===-1?u=e<=c?e-c:e-c-10:(u=e-c,u>5?u-=10:u<-5&&(u+=10));let d=y.current??-(c+10)*n,f=d-u*n,m=document.getElementById(v)?.querySelector(`feGaussianBlur`);if(i&&m){let e=Math.min(Math.abs(u)*1.2,6);m.setAttribute(`stdDeviation`,`0,${e}`),p.current.style.filter=`url(#${v})`}let h=l.current.animate([{transform:`translateY(${d}px)`},{transform:`translateY(${f}px)`}],{duration:t,delay:r,easing:a,fill:`forwards`});_.current=h,h.onfinish=()=>{let t=-(e+10)*n;l.current&&(h.cancel(),l.current.style.transform=`translateY(${t}px)`),y.current=t,p.current&&(p.current.style.filter=`none`),m&&m.setAttribute(`stdDeviation`,`0,0`),_.current=null,b.current!==e&&requestAnimationFrame(()=>{C(b.current)})},h.oncancel=()=>{_.current=null}};return g(m,{children:[h(`svg`,{style:{position:`absolute`,width:0,height:0},"aria-hidden":`true`,children:h(`defs`,{children:h(`filter`,{id:v,children:h(`feGaussianBlur`,{in:`SourceGraphic`,stdDeviation:`0,0`})})})}),h(`div`,{ref:p,style:{position:`relative`,height:`${n}px`,overflow:`hidden`,width:`0.65em`,textAlign:`center`,opacity:o?0:1},children:h(`div`,{ref:l,style:{position:`absolute`,left:0,right:0,willChange:`transform`},children:S.map((e,t)=>h(`div`,{style:{height:`${n}px`,display:`flex`,alignItems:`center`,justifyContent:`center`},children:e},t))})})]})}r(null);const se={events:[],isEnabled:!1,isCollecting:!1,enableDebug:()=>{},disableDebug:()=>{},toggleDebug:()=>{},logEvent:()=>{},clearEvents:()=>{},getEventLog:()=>``,exportToCSV:()=>``,startCollecting:()=>{},stopCollecting:()=>[],flushEvents:()=>{}},J=()=>se,ce=({children:e})=>h(m,{children:e});function Y(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=Y(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 X(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=X(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 fe(e,t){let n=Y(t);return Object.entries(e).map(([e,t])=>{let r=n[e]||``;return{property:e,expected:t,actual:r,matches:pe(e,t)===pe(e,r)}})}function pe(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 Z(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 me(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 he(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 ge(e){return e.getAnimations().map(he)}const Q=new class{constructor(){this.activeAnimations=new Map,this.timeline=[],this.completedAnimations=[],this.sessionStartTime=0}startSession(){}getRelativeTime(){return Math.round((performance.now()-this.sessionStartTime)*100)/100}startAnimation(e,t,n,r){}endAnimation(e){}detectOverlaps(e){let t=[];return this.activeAnimations.forEach((n,r)=>{r!==e&&t.push(`${n.type}:${n.elementId}`)}),t}getOverlaps(){return[]}getTimeline(){return[]}getActiveCount(){return 0}getActiveAnimations(){return[]}getCompletedAnimations(){return[]}getSummary(){return{totalAnimations:0,totalDuration:0,overlaps:[],timeline:[],activeAnimations:[]}}getTimelineForVisualization(){return[]}},$=({text:e,mode:t=`word`,direction:n=`vertical`,staggerDelay:r=w.STAGGER_DELAY,duration:i=w.DURATION_ENTER,easing:a=w.EASING_ENTER,blur:o=!0,widthAnimation:s=!1,initial:l=`initial`,exit:d,className:m=``,style:g})=>{let _=f(null),v=f(null),{logEvent:y}=J(),b=f(null),x=f(null),S=f(!1),[C,T]=p(l!==`initial`);c(()=>{l===`initial`&&!S.current&&(S.current=!0,requestAnimationFrame(()=>{T(!0)}))},[l]);let E=d===`exit`?`exit`:C?`animate`:`initial`,D=t===`character`?e.split(``):[e],O=i+(D.length-1)*r;c(()=>{if(E===`animate`&&_.current){let c=_.current;b.current=Z(O),x.current=`enter-${e.slice(0,10)}-${Date.now()}`,Q.startAnimation(x.current,`enter`,e,O);let l=X(c);y({type:`text-enter-start`,source:`SlidingText`,message:`Enter animation starting for: "${e}"`,timing:{startTime:b.current.start,expectedDuration:O},position:{element:e,x:l.x,y:l.y,width:l.width,height:l.height},animation:{name:`enter`,phase:`start`,easing:a,fill:`forwards`},data:{text:e,charCount:D.length,mode:t,direction:n,staggerDelay:r,duration:i,totalDuration:O,blur:o,widthAnimation:s}});let u=setTimeout(()=>{if(b.current&&x.current&&_.current){let t=b.current.end();Q.endAnimation(x.current);let n=X(_.current);y({type:`text-enter-complete`,source:`SlidingText`,message:`Enter animation complete for: "${e}"`,timing:{startTime:t.startTime,endTime:t.endTime,expectedDuration:t.expectedDuration,actualDuration:t.actualDuration,deviation:t.deviation,deviationPercent:t.deviationPercent},position:{element:e,x:n.x,y:n.y,width:n.width,height:n.height},animation:{name:`enter`,phase:`complete`,progress:1,easing:a,fill:`forwards`},data:{text:e,deviationStatus:Math.abs(t.deviation)<10?`OK`:`WARNING`}})}},O+50);return()=>clearTimeout(u)}},[E,e,t,n,r,i,a,o,s,O,D.length,y]),u(()=>{if(!s||!_.current||!v.current)return;let e=_.current,t=v.current;if(E===`initial`)e.style.width=`0px`;else if(E===`animate`)if(CSS.supports(`interpolate-size`,`allow-keywords`))e.style.width=`auto`,e.style.transition=`width ${i}ms ${a}`;else{let n=t.scrollWidth;e.style.width=`${n}px`,e.style.transition=`width ${i}ms ${a}`;let r=setTimeout(()=>{e.style.width=`auto`},i);return()=>clearTimeout(r)}else if(E===`exit`){let t=e.getBoundingClientRect().width;e.style.width=`${t}px`,e.getBoundingClientRect(),e.style.width=`0px`,e.style.transition=`width ${w.DURATION_EXIT}ms ${w.EASING_EXIT}`}},[E,s,i,a,e]);let k=e=>{let t=e*r,s=E===`exit`,c=s?w.DURATION_EXIT:i,l=s?w.EASING_EXIT:a;return{transition:`
                 opacity ${c}ms ${l} ${t}ms,
                 transform ${c}ms ${l} ${t}ms,
                 filter ${c}ms ${l} ${t}ms
-            `,"--blur-amount":o?`${w.BLUR_AMOUNT}px`:`0px`,"--offset":n===`vertical`?`${w.OFFSET_VERTICAL}px`:`${w.OFFSET_HORIZONTAL}px`}};return h(`div`,{ref:_,className:`waapi-sliding-text-container ${m}`,style:g,children:h(`div`,{ref:v,className:`waapi-sliding-text-content waapi-direction-${n}`,children:D.map((e,t)=>h(`span`,{className:`waapi-sliding-text-token ${E===`initial`?`enter-from`:E===`animate`?`enter-to`:`exit-active`}`,style:k(t),children:e},t))})})},pe=e=>{let{logEvent:t}=G(),n=f(t);c(()=>{n.current=t},[t]);let r=f(e);c(()=>{r.current=e},[e]);let i=f(new Map),a=f(new Map),s=f({animatingIds:new Set,positions:new Map,separatorStates:new Map}),l=f(new Map),u=o((e,t)=>{t?i.current.set(e,t):i.current.delete(e)},[]),d=o(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)}}),s.current.positions=t,t},[]),p=o(e=>{let t=l.current.get(e);t&&(t.forEach(e=>e.cancel()),l.current.delete(e))},[]),m=o((e,t)=>{s.current.separatorStates.has(e)||s.current.separatorStates.set(e,{tokenId:e,isVisible:!0,isAnimating:!1,animationPhase:`idle`}),t?a.current.set(e,t):a.current.delete(e)},[]),h=o(e=>s.current.separatorStates.get(e),[]),g=o(async e=>{let t=a.current.get(e),i=s.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 o=r.current.exitDuration||y.EXIT_DURATION,c=r.current.exitEasing||S.EASE_IN_CUBIC,l={tokenId:e,isVisible:!0,isAnimating:!0,animationPhase:`exit-coordinated`,startTime:performance.now(),expectedEndTime:performance.now()+o};s.current.separatorStates.set(e,l);let u=`separator-${e}-${Date.now()}`;Y.startAnimation(u,`separator-exit`,e,o),n.current({type:`separator-animation-start`,source:`useWAAPIAnimations.startSeparatorAnimation`,message:`Separator animation starting for token: ${e}`,timing:{startTime:l.startTime||Date.now(),expectedDuration:o},data:{tokenId:e,duration:o}}),t.classList.add(`exit-coordinated`);let d=t.animate([{opacity:1,transform:`translateY(0) scale(1)`},{opacity:0,transform:`translateY(${b.OFFSET_Y_EXIT}px) scale(${b.SCALE_EXIT})`}],{duration:o,easing:c,fill:`forwards`});try{await d.finished}catch{return}l.animationPhase=`completed`,l.isVisible=!1,t.classList.add(`exit-completed`),Y.endAnimation(u),n.current({type:`separator-animation-complete`,source:`useWAAPIAnimations.startSeparatorAnimation`,message:`Separator animation complete for token: ${e}`,data:{tokenId:e,duration:o}})},[]),_=o(e=>{Array.from(s.current.separatorStates.keys()).forEach(t=>{e.has(t)||(s.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}}))})},[]),v=o(async(e,t)=>{let a=i.current.get(e);if(!a||s.current.animatingIds.has(e))return;s.current.animatingIds.add(e),d(new Set([e])),new Set([e,...t||[]]).forEach(e=>{g(e)});let o=r.current.exitDuration||y.EXIT_DURATION,c=r.current.exitEasing||S.EASE_IN_CUBIC,u=r.current.flipDuration||y.FLIP_DURATION,f=b.OFFSET_Y_EXIT,p=b.SCALE_EXIT,m=x.BLUR_EXIT,h=y.EXIT_STAGGER,_=a.getBoundingClientRect(),v=getComputedStyle(a),C=parseFloat(v.marginRight)||0,w=J(o),T=J(o+u),E=K(a),D=q(a),O=`exit-${e}-${Date.now()}`;Y.startAnimation(O,`exit-fade`,e,o);let k=`width-${e}-${Date.now()}`;Y.startAnimation(k,`width-collapse`,e,o),n.current({type:`animation-start-detailed`,source:`useWAAPIAnimations.startExit`,message:`Exit animation starting for: ${e}`,timing:{startTime:w.start,expectedDuration:o},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:c,fill:`forwards`},data:{id:e,capturedPositions:s.current.positions.size,wrapperWidth:_.width,marginRight:C,expectedFinalStyles:{opacity:`0`,transform:`translateY(${f}px) scale(${p})`,filter:`blur(${m}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*h,r=e.animate([{opacity:1,transform:`translateY(0) scale(1)`,filter:`blur(0px)`},{opacity:0,transform:`translateY(${f}px) scale(${p})`,filter:`blur(${m}px)`}],{duration:o,easing:c,delay:n,fill:`forwards`});A.push(r)});else{let e=a.animate([{opacity:1,transform:`translateY(0) scale(1)`},{opacity:0,transform:`translateY(${f}px) scale(${p})`}],{duration:o,easing:c,fill:`forwards`});A.push(e)}a.style.overflow=`hidden`;let P=a.animate([{width:`${_.width}px`,marginRight:`${C}px`},{width:`0px`,marginRight:`0px`}],{duration:o,easing:c,fill:`forwards`});A.push(P),l.current.set(e,A);let F=o*y.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=s.current.positions.get(r);if(!i)return;let a=t.getBoundingClientRect(),o=i.left-a.left,c=i.top-a.top;if(Math.abs(o)<1&&Math.abs(c)<1)return;let l=`flip-${r}-${Date.now()}`;Y.startAnimation(l,`flip`,r,u),n.current({type:`flip-animation`,source:`useWAAPIAnimations.startExit`,message:`FLIP animation for: ${r}`,timing:{startTime:performance.now(),expectedDuration:u},position:{element:r,x:a.left,y:a.top,width:a.width,height:a.height,delta:{x:o,y:c}},animation:{name:`flip`,phase:`start`,easing:S.SPRING_GENTLE,fill:`none`},data:{id:r,deltaX:Math.round(o*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 d=t.animate([{transform:`translate3d(${o}px, ${c}px, 0)`},{transform:`translate3d(0, 0, 0)`}],{duration:u,easing:S.SPRING_GENTLE});d.onfinish=()=>{Y.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(d)})}},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:c},data:{id:e}}),I(),await Promise.all([...j.map(e=>e.finished.catch(()=>{})),r])}catch{clearTimeout(L),s.current.animatingIds.delete(e);return}Y.endAnimation(O),Y.endAnimation(k);let R=T.end(),z=q(a),B=ce({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:c,fill:`forwards`},data:{id:e,choreographySummary:Y.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`}}),s.current.animatingIds.delete(e),l.current.delete(e),i.current.delete(e),r.current.onComplete(e)},[d]),C=o(e=>e?s.current.animatingIds.has(e):s.current.animatingIds.size>0,[]);return c(()=>()=>{l.current.forEach(e=>{e.forEach(e=>e.cancel())}),l.current.clear()},[]),{registerElement:u,startExit:v,isAnimating:C,cancelAnimations:p,registerSeparator:m,getSeparatorState:h,startSeparatorAnimation:g,cleanupSeparatorStates:_}},me=({tokens:e,placeholder:t=`No tokens`,maxVisible:n,textAnimationMode:r=`character`,textDirection:i=`vertical`,textStaggerDelay:a=15,separator:s=`, `,enableWidthAnimation:l=!1,className:u=``,tokenClassName:d=``,placeholderClassName:m=``,separatorClassName:_=``})=>{let{logEvent:v}=G(),y=f(!0),b=f(v);c(()=>{b.current=v},[v]),c(()=>(y.current=!0,b.current({type:`render`,source:`AnimatedTokens.mount`,message:`AnimatedTokens mounted`,data:{tokenCount:e.length}}),()=>{b.current({type:`component-unmounted`,source:`AnimatedTokens.unmount`,message:`AnimatedTokens UNMOUNTING`,data:{timestamp:Date.now()}}),y.current=!1}),[]);let[x,S]=p(e),C=f(new Set),{registerElement:T,startExit:D,isAnimating:O,registerSeparator:k,getSeparatorState:A,cleanupSeparatorStates:j}=pe({onComplete:o(e=>{y.current&&(b.current({type:`token-dom-remove`,source:`AnimatedTokens.onComplete`,message:`Token removed from DOM: ${e}`,data:{id:e}}),C.current.delete(e),S(t=>t.filter(t=>t.id!==e)))},[])}),M=f(D),N=f(A),P=f(j);c(()=>{M.current=D,N.current=A,P.current=j},[D,A,j]);let F=x.filter(e=>!C.current.has(e.id)||!O(e.id)),I=n?x.slice(0,n):x,L=n?Math.max(0,F.length-n):0,R=(e,t)=>{if(t>=I.length-1)return!1;let n=N.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}};c(()=>{let t=new Set(e.map(e=>e.id)),r=new Set(x.map(e=>e.id)),i=new Set(I.map(e=>e.id));P.current?.(i);let a=x.filter(e=>!t.has(e.id)&&!C.current.has(e.id)),o=e.filter(e=>!r.has(e.id));if(!(a.length===0&&o.length===0)&&(b.current({type:`render`,source:`AnimatedTokens.useEffect`,message:`Token sync`,data:{currentTokens:e.map(e=>e.id),displayTokens:x.map(e=>e.id),removed:a.map(e=>e.id),added:o.map(e=>e.id),animating:Array.from(C.current)}}),a.forEach(e=>{let t=x.findIndex(t=>t.id===e.id);if(n!==void 0&&t>=n)b.current({type:`overflow-token-remove`,source:`AnimatedTokens.useEffect`,message:`Removing overflow token without animation`,data:{id:e.id}}),S(t=>t.filter(t=>t.id!==e.id));else{let t=[],r=x.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)}b.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}}),C.current.add(e.id);let o=a?[e.id,...t]:t;M.current(e.id,o)}}),o.length>0)){o.forEach(e=>{b.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)&&k(t.id,null)});let r=x.filter(e=>!t.has(e.id)),i=[...e];r.forEach(e=>{let t=x.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(x.map(e=>e.id))&&S(i)}},[e,n]);let z=f(0),B=L>0&&z.current===0,V=L===0&&z.current>0;c(()=>{z.current=L},[L]);let H=x.length===0&&!O()&&!!t;return g(`div`,{className:`waapi-animated-tokens-container ${u}`,children:[H&&h(X,{text:t,mode:E.placeholder.mode,direction:E.placeholder.direction,blur:E.placeholder.blur,duration:E.placeholder.duration,initial:`initial`,animate:`animate`,className:`waapi-token-placeholder ${m}`},`placeholder`),I.map((e,t)=>{let n=C.current.has(e.id),o=R(e.id,t);return g(`div`,{className:`waapi-token-wrapper ${d} ${n?`exit-active`:``}`,ref:t=>T(e.id,t),children:[h(X,{text:e.text,mode:n?`none`:r,direction:i,staggerDelay:a,duration:w.DURATION_ENTER,blur:E.newToken.blur,widthAnimation:!n&&l,initial:n?!1:`initial`,animate:`animate`}),o&&h(`span`,{className:`waapi-token-separator ${_}`,ref:t=>k(e.id,t),children:s})]},e.id)}),(L>0||V)&&g(`div`,{className:`waapi-token-overflow ${d} ${B?`entering`:``} ${V?`exiting`:``}`,ref:e=>T(`overflow-counter`,e),children:[I.length>0&&h(`span`,{className:`waapi-token-separator ${_}`,children:s}),h(`span`,{className:`waapi-token-separator ${_}`,children:`+`}),h(W,{value:L,duration:w.DURATION_ENTER,fontSize:`inherit`,fontWeight:`inherit`,color:`inherit`}),h(X,{text:` more`,mode:r,direction:i,staggerDelay:a,duration:V?w.DURATION_EXIT:w.DURATION_ENTER,blur:E.newToken.blur,initial:B?`initial`:!1,animate:`animate`})]})]})};function he(e){let t=f(new Map),n=f(e);return c(()=>{n.current=e},[e]),{register:o((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:o(e=>{t.current.has(e)&&(t.current.delete(e),n.current?.onUnregister?.(e))},[]),get:o(e=>t.current.get(e),[]),getAll:o(()=>new Map(t.current),[]),has:o(e=>t.current.has(e),[]),clear:o(()=>{let e=Array.from(t.current.keys());t.current.clear(),e.forEach(e=>n.current?.onUnregister?.(e))},[]),get size(){return t.current.size}}}const ge=y.MIN_DELTA_PX;function _e(e,t){let n=f(new Map),r=t?.minDeltaPx??ge;return{capture:o(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:o(e=>n.current.get(e),[]),calculateDeltas:o((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:o(()=>new Map(n.current),[]),clear:o(()=>{n.current.clear()},[])}}const ve=y.FLIP_DURATION,ye=S.SPRING_GENTLE;function be(){let e=f(new Map),t=f(new Set),n=o((n,r,i)=>{let a=i?.duration??ve,o=i?.easing??ye;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=o(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=o(n=>{let r=e.current.get(n);r&&(r.cancel(),e.current.delete(n),t.current.delete(n))},[]),a=o(()=>{e.current.forEach(e=>e.cancel()),e.current.clear(),t.current.clear()},[]),s=o(e=>e?t.current.has(e):t.current.size>0,[]);c(()=>()=>{a()},[a]);let l=f({animate:n,animateAll:r,cancel:i,cancelAll:a,isAnimating:s});return l.current.animate=n,l.current.animateAll=r,l.current.cancel=i,l.current.cancelAll=a,l.current.isAnimating=s,l.current}function xe(e){let t=f(e);c(()=>{t.current=e},[e]);let{logEvent:n}=G(),r=f(n);c(()=>{r.current=n},[n]);let i=f({animatingIds:new Set,positions:new Map,activeAnimations:new Map}),a=he(),s=_e(a.getAll,{minDeltaPx:e?.minDeltaPx??y.MIN_DELTA_PX}),l=be(),u=e?.exitDuration??y.EXIT_DURATION,d=e?.flipDuration??y.FLIP_DURATION,p=e?.exitEasing??S.EASE_IN_CUBIC,m=o(e=>{let t=i.current.activeAnimations.get(e);t&&(t.forEach(e=>e.cancel()),i.current.activeAnimations.delete(e)),i.current.animatingIds.delete(e),l.cancel(e)},[l]),h=o(()=>{i.current.activeAnimations.forEach(e=>{e.forEach(e=>e.cancel())}),i.current.activeAnimations.clear(),i.current.animatingIds.clear(),l.cancelAll()},[l]),g=e?.flipBehavior??`all`,_=e?.exitPositionStrategy??`absolute-fixed`,v=o(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??u,s=n?.easing??p,c=a.getAll(),l=new Map,f=r.getBoundingClientRect();l.set(e,f),c.forEach((t,n)=>{if(n!==e){let e=t.getBoundingClientRect();e.width>0&&e.height>0&&l.set(n,e)}});let m=r.parentElement;r.dataset.reorderState=`exiting`,_===`absolute-fixed`&&(r.dataset.exitPosition=`absolute`);let h=m?.getBoundingClientRect()||{left:0,top:0},v=f.left-h.left,C=f.top-h.top;_===`absolute-fixed`&&(r.style.position=`absolute`,r.style.left=`${v}px`,r.style.top=`${C}px`,r.style.width=`${f.width}px`,r.style.height=`${f.height}px`,r.style.margin=`0`);let w=m?.getBoundingClientRect()||{left:0,top:0},T=w.left-h.left,E=w.top-h.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(g!==`none`){let t=[];if(g===`all`)t=[...D.keys()];else if(g===`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=l.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:d,easing:S.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*y.EXIT_STAGGER,r=e.animate([{opacity:1,transform:`translateY(0) scale(1)`,filter:`blur(0px)`},{opacity:0,transform:`translateY(${b.OFFSET_Y_EXIT}px) scale(${b.SCALE_EXIT})`,filter:`blur(${x.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(${b.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`,_===`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,u,p,d,g,_]),C=o(async(e,n)=>{let r=a.get(e);if(!r)return;r.dataset.reorderState||(r.dataset.reorderState=`entering`);let i=t.current?.enterDuration??y.ENTER_DURATION,o=t.current?.enterEasing??S.MATERIAL_DECELERATE,s=n?.duration??i,c=n?.easing??o,l=n?.stagger??y.ENTER_STAGGER,u=r.querySelectorAll(`.sliding-text-token`),d=[],f={opacity:0,transform:`translateY(-8px) scale(0.95)`},p={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([{...f,filter:`blur(${x.BLUR_ENTER}px)`},{...p,filter:`blur(0px)`}],{duration:s,easing:c,delay:n,fill:`forwards`});d.push(r)});else{let e=r.animate([f,p],{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]),w=o(e=>e?i.current.animatingIds.has(e):i.current.animatingIds.size>0,[]),T=o(e=>s.capture(e),[s]);return c(()=>()=>{h()},[h]),{registry:a,positions:s,flip:l,registerElement:a.register,startExit:v,startEnter:C,isAnimating:w,cancelAnimation:m,cancelAllAnimations:h,capturePositions:T}}function Z(e){let{logEvent:t}=G(),n=f(t);c(()=>{n.current=t},[t]);let r=xe({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 c(()=>()=>{},[]),{...r,registerElement:r.registerElement,startItemExit:r.startExit,startItemEnter:r.startEnter}}function Se(e,r={}){let{autoAnimate:i=!0,stagger:s,enterDuration:l,exitDuration:p,flipDuration:m,enterEasing:h,exitEasing:g,flipEasing:_}=r,{logEvent:v}=G(),y=f(v);c(()=>{y.current=v},[v]);let b=f(r);c(()=>{b.current=r},[r]);let x=f(new Set),S=f(new Set),C=f(new Set),w=o((e,t)=>s?typeof s==`number`?s*e:(s[t]??0)*e:0,[s]),T=Z({enterDuration:l,exitDuration:p,flipDuration:m,enterEasing:h,exitEasing:g,flipEasing:_,onComplete:o(e=>{x.current.delete(e),b.current.onAnimationComplete?.(e)},[])}),E=d(()=>{let n=new Set;return t.forEach(e,e=>{a(e)&&e.key!=null&&n.add(String(e.key))}),n},[e]);u(()=>{let e=C.current,t=[];E.forEach(n=>{!e.has(n)&&!S.current.has(n)&&t.push(n)}),t.length>0&&t.forEach((e,t)=>{let n=w(t,`enter`),r=()=>{S.current.add(e),b.current.onItemEnter?.(e),requestAnimationFrame(()=>{T.startItemEnter(e).then(()=>{S.current.delete(e)})})};n>0?setTimeout(r,n):r()}),C.current=new Set(E)},[E,i,T,w]);let D=o(e=>{x.current.has(e)||T.registry.has(e)&&(x.current.add(e),b.current.onItemExit?.(e),T.startItemExit(e))},[T]),O=o(e=>x.current.has(e),[]),k=o(e=>S.current.has(e),[]),A=o(()=>Array.from(x.current),[]),j=o(()=>Array.from(S.current),[]),M=d(()=>{let r=[];return t.forEach(e,e=>{if(!a(e)){r.push(e);return}let t=e.key==null?null:String(e.key);t!=null&&x.current.has(t)?r.push(n(e,{"data-reorder-state":`exiting`})):r.push(e)}),r},[e]);return c(()=>()=>{},[]),{presentChildren:M,triggerExit:D,isExiting:O,isEntering:k,exitingIds:A(),enteringIds:j(),reorder:T}}function Ce(e,t){if(e!==void 0)return typeof e==`number`?e:e[t]}const we={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`}},Q=i(({children:e,autoAnimate:r=!0,stagger:i,duration:s,layout:u=`auto`,className:m=``,flipBehavior:g,exitPositionStrategy:_,onItemExit:v,onItemEnter:y},b)=>{let{logEvent:x}=G(),S=f(x);c(()=>{S.current=x},[x]);let C=f(v),w=f(y);c(()=>{C.current=v,w.current=y},[v,y]);let T=o(e=>{j(t=>t.filter(t=>t.key!==e))},[]),E=Z({enterDuration:Ce(s,`enter`),exitDuration:Ce(s,`exit`),flipBehavior:g,exitPositionStrategy:_,onComplete:T});l(b,()=>({startItemExit:E.startItemExit,startItemEnter:E.startItemEnter,isAnimating:E.isAnimating}),[E.startItemExit,E.startItemEnter,E.isAnimating]);let D=f(E.startItemExit),O=f(E.startItemEnter);c(()=>{D.current=E.startItemExit,O.current=E.startItemEnter},[E.startItemExit,E.startItemEnter]);let k=d(()=>{let n=[];return t.forEach(e,e=>{a(e)&&e.key!=null&&n.push({key:String(e.key),element:e})}),n},[e]),[A,j]=p(k),M=f(new Set),N=o((e,t)=>i?typeof i==`number`?i*e:(i[t]??0)*e:0,[i]);c(()=>{let e=new Set(k.map(e=>e.key)),t=new Set(A.map(e=>e.key)),n=A.filter(t=>!e.has(t.key)&&!M.current.has(t.key)),r=k.filter(e=>!t.has(e.key));if(n.length===0&&r.length===0){k.some(e=>{let t=A.find(t=>t.key===e.key);return t&&t.element!==e.element})&&j(e=>e.map(e=>M.current.has(e.key)?e:k.find(t=>t.key===e.key)??e));return}if(n.forEach((e,t)=>{let n=N(t,`exit`);M.current.add(e.key);let r=()=>{C.current?.(e.key),D.current(e.key).finally(()=>{M.current.delete(e.key)})};n>0?setTimeout(r,n):r()}),r.length>0){let t=A.filter(t=>!e.has(t.key)),n=[...k];t.forEach(e=>{let t=A.findIndex(t=>t.key===e.key);t!==-1&&t<=n.length&&n.splice(t,0,e)}),j(n),r.forEach((e,t)=>{let n=N(t,`enter`),r=()=>{w.current?.(e.key)};n>0?setTimeout(r,n):r()})}},[k,A,N]);let P=d(()=>{let e=new Set(k.map(e=>e.key));return A.map(({key:t,element:r})=>{let i=!!e.has(t),a=M.current.has(t);return n(r,{ref:e=>{e?(E.registerElement(t,e),!e.dataset.reorderState&&i&&!a&&(e.dataset.reorderState=`entering`,O.current(t))):E.registerElement(t,null);let n=r.ref;typeof n==`function`?n(e):n&&typeof n==`object`&&(n.current=e)},"data-reorder-id":t})})},[A,k,E.registerElement]);return h(`div`,{className:`waapi-reorder-container reorder ${u===`auto`?``:`reorder--${u}`} ${m}`,style:we[u],children:P})});Q.displayName=`Reorder`;const Te=()=>typeof navigator<`u`&&navigator.language?navigator.language:`en`;function Ee(e,t={}){let{locale:n,type:r=`conjunction`,style:i=`long`,separator:a}=t;return d(()=>{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??Te();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 De=({tokens:e,placeholder:t=`No tokens`,maxVisible:n,textAnimationMode:r=`character`,textDirection:i=`vertical`,textStaggerDelay:a=15,locale:s,listType:l=`conjunction`,listStyle:u=`long`,separator:p,enableWidthAnimation:m=!1,className:_=``,tokenClassName:v=``,placeholderClassName:x=``,separatorClassName:C=``})=>{let{logEvent:T}=G(),D=f(T);c(()=>{D.current=T},[T]);let O=f(new Set),k=f(new Map),A=f(new Map),j=d(()=>n?e.slice(0,n):e,[e,n]),M=d(()=>n?Math.max(0,e.length-n):0,[e.length,n]),N=Ee(j.map(e=>e.text),{locale:s,type:l,style:u,separator:p}),P=f(0),F=M>0&&P.current===0,I=M===0&&P.current>0;c(()=>{P.current=M},[M]);let L=o((e,t)=>{if(t>=j.length-1)return!1;let n=k.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}},[j.length]);c(()=>{let e=new Set(j.map(e=>e.id)),t=k.current;for(let n of t.keys())e.has(n)||k.current.delete(n);j.forEach((e,t)=>{t<j.length-1&&!k.current.has(e.id)&&k.current.set(e.id,{animationPhase:`idle`})})},[j]);let R=o(e=>{let t=A.current.get(e);t&&(k.current.set(e,{animationPhase:`exit-coordinated`}),t.dataset.separatorState=`exiting`,t.animate([{opacity:1,transform:`translateY(0) scale(1)`},{opacity:0,transform:`translateY(${b.OFFSET_Y_EXIT}px) scale(${b.SCALE_EXIT})`}],{duration:y.EXIT_DURATION,easing:S.EASE_IN_CUBIC,fill:`forwards`}).finished.then(()=>{k.current.set(e,{animationPhase:`completed`}),t.dataset.separatorState=`completed`}).catch(()=>{k.current.delete(e)}))},[]),z=o(e=>{O.current.add(e);let t=[],n=j.findIndex(t=>t.id===e);if(n===j.length-1&&n>0){let e=j[n-1];e&&t.push(e.id)}R(e),t.forEach(e=>R(e)),D.current({type:`token-remove`,source:`AnimatedTokensV2`,message:`Token exiting: ${e}`,data:{id:e,additionalSeparators:t}})},[j,R]),B=o(e=>{D.current({type:`token-add`,source:`AnimatedTokensV2`,message:`Token entering: ${e}`,data:{id:e}})},[]),V=e.length===0&&!!t,H=d(()=>N.map((e,t)=>{if(e.type===`element`){let t=j[e.index];if(!t)return null;let n=O.current.has(t.id);return h(`span`,{className:`waapi-token-wrapper ${v}`,"data-reorder-id":t.id,children:h(X,{text:t.text,mode:n?`none`:r,direction:i,staggerDelay:a,duration:w.DURATION_ENTER,blur:E.newToken.blur,widthAnimation:!n&&m,initial:n?!1:`initial`,animate:`animate`})},t.id)}let n=j[e.index];if(!n)return null;let o=j.findIndex(e=>e.id===n.id);return L(n.id,o)?h(`span`,{ref:e=>{e?A.current.set(n.id,e):A.current.delete(n.id)},className:`waapi-token-separator ${C}`,"data-separator-state":k.current.get(n.id)?.animationPhase??`idle`,children:e.value},`sep-${n.id}-${t}`):null}).filter(Boolean),[N,j,v,r,i,a,m,C,L]),U=d(()=>p===void 0?[...N].reverse().find(e=>e.type===`literal`)?.value??`, `:p,[N,p]),ee=d(()=>M===0&&!I?null:g(`div`,{"data-reorder-id":`overflow-counter`,className:`waapi-token-overflow ${v} ${F?`entering`:``} ${I?`exiting`:``}`,children:[j.length>0&&h(`span`,{className:`waapi-token-separator ${C}`,children:U}),h(`span`,{className:`waapi-token-separator ${C}`,children:`+`}),h(W,{value:M,duration:w.DURATION_ENTER,fontSize:`inherit`,fontWeight:`inherit`,color:`inherit`}),h(X,{text:` more`,mode:r,direction:i,staggerDelay:a,duration:I?w.DURATION_EXIT:w.DURATION_ENTER,blur:E.newToken.blur,initial:F?`initial`:!1,animate:`animate`})]},`overflow-counter`),[M,F,I,v,j.length,U,C,r,i,a]);return g(`div`,{role:`text`,className:`waapi-animated-tokens-container waapi-v2 ${_}`,children:[V&&h(X,{text:t,mode:E.placeholder.mode,direction:E.placeholder.direction,blur:E.placeholder.blur,duration:E.placeholder.duration,initial:`initial`,animate:`animate`,className:`waapi-token-placeholder ${x}`},`placeholder`),g(Q,{layout:`horizontal`,onItemExit:z,onItemEnter:B,children:[H,ee]})]})},$=r(null);function Oe(){let e=s($);if(!e)throw Error(`useMorphContext must be used within a <Morph> component. Wrap your morphable components with <Morph>.`);return e}const ke=y.FLIP_DURATION,Ae=S.EASE_OUT_CUBIC;function je(e){let[t,n]=p(!1),r=f([]),i=f(e);c(()=>{i.current=e},[e]);let a=o(()=>{r.current.forEach(e=>e.cancel()),r.current=[],n(!1)},[]),s=o(async(e,o)=>{t&&a(),n(!0);let s=i.current?.duration??ke,c=i.current?.easing??Ae,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||Me(h,l),v=i.current?.clipPathEnd||Me(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 c(()=>()=>{a()},[a]),{isMorphing:t,morph:s,cancel:a}}function Me(e,t){let n=parseFloat(e)||0;return`inset(0 round ${n/t.width*100}% ${n/t.height*100}%)`}const Ne=y.FLIP_DURATION,Pe=S.MATERIAL_STANDARD;function Fe(e){let[t,n]=p(!1),r=f(null),i=f(e),a=i.current?.duration??Ne,s=i.current?.easing??Pe,c=o(()=>{r.current&&(r.current.style.transition=`grid-template-rows ${a}ms ${s}`)},[a,s]),l=o(()=>{c(),r.current&&(r.current.style.gridTemplateRows=`1fr`),n(!0)},[c]),u=o(()=>{c(),r.current&&(r.current.style.gridTemplateRows=`0fr`),n(!1)},[c]);return{isExpanded:t,expand:l,collapse:u,toggle:o(()=>{t?u():l()},[t,l,u]),containerRef:r}}function Ie(e){let t=f(e),n=f(e?.types||[]),r=d(()=>typeof document>`u`?!1:`startViewTransition`in document,[]),i=o(e=>{n.current=e},[]);return{isSupported:r,startTransition:o(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?`${w.BLUR_AMOUNT}px`:`0px`,"--offset":n===`vertical`?`${w.OFFSET_VERTICAL}px`:`${w.OFFSET_HORIZONTAL}px`}};return h(`div`,{ref:_,className:`waapi-sliding-text-container ${m}`,style:g,children:h(`div`,{ref:v,className:`waapi-sliding-text-content waapi-direction-${n}`,children:D.map((e,t)=>h(`span`,{className:`waapi-sliding-text-token ${E===`initial`?`enter-from`:E===`animate`?`enter-to`:`exit-active`}`,style:k(t),children:e},t))})})},_e=e=>{let{logEvent:t}=J(),n=f(t);c(()=>{n.current=t},[t]);let r=f(e);c(()=>{r.current=e},[e]);let i=f(new Map),a=f(new Map),s=f({animatingIds:new Set,positions:new Map,separatorStates:new Map}),l=f(new Map),u=o((e,t)=>{t?i.current.set(e,t):i.current.delete(e)},[]),d=o(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)}}),s.current.positions=t,t},[]),p=o(e=>{let t=l.current.get(e);t&&(t.forEach(e=>e.cancel()),l.current.delete(e))},[]),m=o((e,t)=>{s.current.separatorStates.has(e)||s.current.separatorStates.set(e,{tokenId:e,isVisible:!0,isAnimating:!1,animationPhase:`idle`}),t?a.current.set(e,t):a.current.delete(e)},[]),h=o(e=>s.current.separatorStates.get(e),[]),g=o(async e=>{let t=a.current.get(e),i=s.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 o=r.current.exitDuration||y.EXIT_DURATION,c=r.current.exitEasing||S.EASE_IN_CUBIC,l={tokenId:e,isVisible:!0,isAnimating:!0,animationPhase:`exit-coordinated`,startTime:performance.now(),expectedEndTime:performance.now()+o};s.current.separatorStates.set(e,l);let u=`separator-${e}-${Date.now()}`;Q.startAnimation(u,`separator-exit`,e,o),n.current({type:`separator-animation-start`,source:`useWAAPIAnimations.startSeparatorAnimation`,message:`Separator animation starting for token: ${e}`,timing:{startTime:l.startTime||Date.now(),expectedDuration:o},data:{tokenId:e,duration:o}}),t.classList.add(`exit-coordinated`);let d=t.animate([{opacity:1,transform:`translateY(0) scale(1)`},{opacity:0,transform:`translateY(${b.OFFSET_Y_EXIT}px) scale(${b.SCALE_EXIT})`}],{duration:o,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:o}})},[]),_=o(e=>{Array.from(s.current.separatorStates.keys()).forEach(t=>{e.has(t)||(s.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}}))})},[]),v=o(async(e,t)=>{let a=i.current.get(e);if(!a||s.current.animatingIds.has(e))return;s.current.animatingIds.add(e),d(new Set([e])),new Set([e,...t||[]]).forEach(e=>{g(e)});let o=r.current.exitDuration||y.EXIT_DURATION,c=r.current.exitEasing||S.EASE_IN_CUBIC,u=r.current.flipDuration||y.FLIP_DURATION,f=b.OFFSET_Y_EXIT,p=b.SCALE_EXIT,m=x.BLUR_EXIT,h=y.EXIT_STAGGER,_=a.getBoundingClientRect(),v=getComputedStyle(a),C=parseFloat(v.marginRight)||0,w=Z(o),T=Z(o+u),E=Y(a),D=X(a),O=`exit-${e}-${Date.now()}`;Q.startAnimation(O,`exit-fade`,e,o);let k=`width-${e}-${Date.now()}`;Q.startAnimation(k,`width-collapse`,e,o),n.current({type:`animation-start-detailed`,source:`useWAAPIAnimations.startExit`,message:`Exit animation starting for: ${e}`,timing:{startTime:w.start,expectedDuration:o},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:c,fill:`forwards`},data:{id:e,capturedPositions:s.current.positions.size,wrapperWidth:_.width,marginRight:C,expectedFinalStyles:{opacity:`0`,transform:`translateY(${f}px) scale(${p})`,filter:`blur(${m}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*h,r=e.animate([{opacity:1,transform:`translateY(0) scale(1)`,filter:`blur(0px)`},{opacity:0,transform:`translateY(${f}px) scale(${p})`,filter:`blur(${m}px)`}],{duration:o,easing:c,delay:n,fill:`forwards`});A.push(r)});else{let e=a.animate([{opacity:1,transform:`translateY(0) scale(1)`},{opacity:0,transform:`translateY(${f}px) scale(${p})`}],{duration:o,easing:c,fill:`forwards`});A.push(e)}a.style.overflow=`hidden`;let P=a.animate([{width:`${_.width}px`,marginRight:`${C}px`},{width:`0px`,marginRight:`0px`}],{duration:o,easing:c,fill:`forwards`});A.push(P),l.current.set(e,A);let F=o*y.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=s.current.positions.get(r);if(!i)return;let a=t.getBoundingClientRect(),o=i.left-a.left,c=i.top-a.top;if(Math.abs(o)<1&&Math.abs(c)<1)return;let l=`flip-${r}-${Date.now()}`;Q.startAnimation(l,`flip`,r,u),n.current({type:`flip-animation`,source:`useWAAPIAnimations.startExit`,message:`FLIP animation for: ${r}`,timing:{startTime:performance.now(),expectedDuration:u},position:{element:r,x:a.left,y:a.top,width:a.width,height:a.height,delta:{x:o,y:c}},animation:{name:`flip`,phase:`start`,easing:S.SPRING_GENTLE,fill:`none`},data:{id:r,deltaX:Math.round(o*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 d=t.animate([{transform:`translate3d(${o}px, ${c}px, 0)`},{transform:`translate3d(0, 0, 0)`}],{duration:u,easing:S.SPRING_GENTLE});d.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(d)})}},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:c},data:{id:e}}),I(),await Promise.all([...j.map(e=>e.finished.catch(()=>{})),r])}catch{clearTimeout(L),s.current.animatingIds.delete(e);return}Q.endAnimation(O),Q.endAnimation(k);let R=T.end(),z=X(a),B=fe({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:c,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`}}),s.current.animatingIds.delete(e),l.current.delete(e),i.current.delete(e),r.current.onComplete(e)},[d]),C=o(e=>e?s.current.animatingIds.has(e):s.current.animatingIds.size>0,[]);return c(()=>()=>{l.current.forEach(e=>{e.forEach(e=>e.cancel())}),l.current.clear()},[]),{registerElement:u,startExit:v,isAnimating:C,cancelAnimations:p,registerSeparator:m,getSeparatorState:h,startSeparatorAnimation:g,cleanupSeparatorStates:_}},ve=({tokens:e,placeholder:t=`No tokens`,maxVisible:n,textAnimationMode:r=`character`,textDirection:i=`vertical`,textStaggerDelay:a=15,separator:s=`, `,enableWidthAnimation:l=!1,className:u=``,tokenClassName:d=``,placeholderClassName:m=``,separatorClassName:_=``})=>{let{logEvent:v}=J(),y=f(!0),b=f(v);c(()=>{b.current=v},[v]),c(()=>(y.current=!0,b.current({type:`render`,source:`AnimatedTokens.mount`,message:`AnimatedTokens mounted`,data:{tokenCount:e.length}}),()=>{b.current({type:`component-unmounted`,source:`AnimatedTokens.unmount`,message:`AnimatedTokens UNMOUNTING`,data:{timestamp:Date.now()}}),y.current=!1}),[]);let[x,S]=p(e),C=f(new Set),{registerElement:T,startExit:D,isAnimating:O,registerSeparator:k,getSeparatorState:A,cleanupSeparatorStates:j}=_e({onComplete:o(e=>{y.current&&(b.current({type:`token-dom-remove`,source:`AnimatedTokens.onComplete`,message:`Token removed from DOM: ${e}`,data:{id:e}}),C.current.delete(e),S(t=>t.filter(t=>t.id!==e)))},[])}),M=f(D),N=f(A),P=f(j);c(()=>{M.current=D,N.current=A,P.current=j},[D,A,j]);let F=x.filter(e=>!C.current.has(e.id)||!O(e.id)),I=n?x.slice(0,n):x,L=n?Math.max(0,F.length-n):0,R=(e,t)=>{if(t>=I.length-1)return!1;let n=N.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}};c(()=>{let t=new Set(e.map(e=>e.id)),r=new Set(x.map(e=>e.id)),i=new Set(I.map(e=>e.id));P.current?.(i);let a=x.filter(e=>!t.has(e.id)&&!C.current.has(e.id)),o=e.filter(e=>!r.has(e.id));if(!(a.length===0&&o.length===0)&&(b.current({type:`render`,source:`AnimatedTokens.useEffect`,message:`Token sync`,data:{currentTokens:e.map(e=>e.id),displayTokens:x.map(e=>e.id),removed:a.map(e=>e.id),added:o.map(e=>e.id),animating:Array.from(C.current)}}),a.forEach(e=>{let t=x.findIndex(t=>t.id===e.id);if(n!==void 0&&t>=n)b.current({type:`overflow-token-remove`,source:`AnimatedTokens.useEffect`,message:`Removing overflow token without animation`,data:{id:e.id}}),S(t=>t.filter(t=>t.id!==e.id));else{let t=[],r=x.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)}b.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}}),C.current.add(e.id);let o=a?[e.id,...t]:t;M.current(e.id,o)}}),o.length>0)){o.forEach(e=>{b.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)&&k(t.id,null)});let r=x.filter(e=>!t.has(e.id)),i=[...e];r.forEach(e=>{let t=x.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(x.map(e=>e.id))&&S(i)}},[e,n]);let z=f(0),B=L>0&&z.current===0,V=L===0&&z.current>0;c(()=>{z.current=L},[L]);let H=x.length===0&&!O()&&!!t;return g(`div`,{className:`waapi-animated-tokens-container ${u}`,children:[H&&h($,{text:t,mode:E.placeholder.mode,direction:E.placeholder.direction,blur:E.placeholder.blur,duration:E.placeholder.duration,initial:`initial`,animate:`animate`,className:`waapi-token-placeholder ${m}`},`placeholder`),I.map((e,t)=>{let n=C.current.has(e.id),o=R(e.id,t);return g(`div`,{className:`waapi-token-wrapper ${d} ${n?`exit-active`:``}`,ref:t=>T(e.id,t),children:[h($,{text:e.text,mode:n?`none`:r,direction:i,staggerDelay:a,duration:w.DURATION_ENTER,blur:E.newToken.blur,widthAnimation:!n&&l,initial:n?!1:`initial`,animate:`animate`}),o&&h(`span`,{className:`waapi-token-separator ${_}`,ref:t=>k(e.id,t),children:s})]},e.id)}),(L>0||V)&&g(`div`,{className:`waapi-token-overflow ${d} ${B?`entering`:``} ${V?`exiting`:``}`,ref:e=>T(`overflow-counter`,e),children:[I.length>0&&h(`span`,{className:`waapi-token-separator ${_}`,children:s}),h(`span`,{className:`waapi-token-separator ${_}`,children:`+`}),h(q,{value:L,duration:w.DURATION_ENTER,fontSize:`inherit`,fontWeight:`inherit`,color:`inherit`}),h($,{text:` more`,mode:r,direction:i,staggerDelay:a,duration:V?w.DURATION_EXIT:w.DURATION_ENTER,blur:E.newToken.blur,initial:B?`initial`:!1,animate:`animate`})]})]})};function ye(e){let t=f(new Map),n=f(e);return c(()=>{n.current=e},[e]),{register:o((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:o(e=>{t.current.has(e)&&(t.current.delete(e),n.current?.onUnregister?.(e))},[]),get:o(e=>t.current.get(e),[]),getAll:o(()=>new Map(t.current),[]),has:o(e=>t.current.has(e),[]),clear:o(()=>{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=y.MIN_DELTA_PX;function xe(e,t){let n=f(new Map),r=t?.minDeltaPx??be;return{capture:o(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:o(e=>n.current.get(e),[]),calculateDeltas:o((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:o(()=>new Map(n.current),[]),clear:o(()=>{n.current.clear()},[])}}const Se=y.FLIP_DURATION,Ce=S.SPRING_GENTLE;function we(){let e=f(new Map),t=f(new Set),n=o((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=o(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=o(n=>{let r=e.current.get(n);r&&(r.cancel(),e.current.delete(n),t.current.delete(n))},[]),a=o(()=>{e.current.forEach(e=>e.cancel()),e.current.clear(),t.current.clear()},[]),s=o(e=>e?t.current.has(e):t.current.size>0,[]);c(()=>()=>{a()},[a]);let l=f({animate:n,animateAll:r,cancel:i,cancelAll:a,isAnimating:s});return l.current.animate=n,l.current.animateAll=r,l.current.cancel=i,l.current.cancelAll=a,l.current.isAnimating=s,l.current}function Te(e){let t=f(e);c(()=>{t.current=e},[e]);let{logEvent:n}=J(),r=f(n);c(()=>{r.current=n},[n]);let i=f({animatingIds:new Set,positions:new Map,activeAnimations:new Map}),a=ye(),s=xe(a.getAll,{minDeltaPx:e?.minDeltaPx??y.MIN_DELTA_PX}),l=we(),u=e?.exitDuration??y.EXIT_DURATION,d=e?.flipDuration??y.FLIP_DURATION,p=e?.exitEasing??S.EASE_IN_CUBIC,m=o(e=>{let t=i.current.activeAnimations.get(e);t&&(t.forEach(e=>e.cancel()),i.current.activeAnimations.delete(e)),i.current.animatingIds.delete(e),l.cancel(e)},[l]),h=o(()=>{i.current.activeAnimations.forEach(e=>{e.forEach(e=>e.cancel())}),i.current.activeAnimations.clear(),i.current.animatingIds.clear(),l.cancelAll()},[l]),g=e?.flipBehavior??`all`,_=e?.exitPositionStrategy??`absolute-fixed`,v=o(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??u,s=n?.easing??p,c=a.getAll(),l=new Map,f=r.getBoundingClientRect();l.set(e,f),c.forEach((t,n)=>{if(n!==e){let e=t.getBoundingClientRect();e.width>0&&e.height>0&&l.set(n,e)}});let m=r.parentElement;r.dataset.reorderState=`exiting`,_===`absolute-fixed`&&(r.dataset.exitPosition=`absolute`);let h=m?.getBoundingClientRect()||{left:0,top:0},v=f.left-h.left,C=f.top-h.top;_===`absolute-fixed`&&(r.style.position=`absolute`,r.style.left=`${v}px`,r.style.top=`${C}px`,r.style.width=`${f.width}px`,r.style.height=`${f.height}px`,r.style.margin=`0`);let w=m?.getBoundingClientRect()||{left:0,top:0},T=w.left-h.left,E=w.top-h.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(g!==`none`){let t=[];if(g===`all`)t=[...D.keys()];else if(g===`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=l.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:d,easing:S.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*y.EXIT_STAGGER,r=e.animate([{opacity:1,transform:`translateY(0) scale(1)`,filter:`blur(0px)`},{opacity:0,transform:`translateY(${b.OFFSET_Y_EXIT}px) scale(${b.SCALE_EXIT})`,filter:`blur(${x.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(${b.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`,_===`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,u,p,d,g,_]),C=o(async(e,n)=>{let r=a.get(e);if(!r)return;r.dataset.reorderState||(r.dataset.reorderState=`entering`);let i=t.current?.enterDuration??y.ENTER_DURATION,o=t.current?.enterEasing??S.MATERIAL_DECELERATE,s=n?.duration??i,c=n?.easing??o,l=n?.stagger??y.ENTER_STAGGER,u=r.querySelectorAll(`.sliding-text-token`),d=[],f={opacity:0,transform:`translateY(-8px) scale(0.95)`},p={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([{...f,filter:`blur(${x.BLUR_ENTER}px)`},{...p,filter:`blur(0px)`}],{duration:s,easing:c,delay:n,fill:`forwards`});d.push(r)});else{let e=r.animate([f,p],{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]),w=o(e=>e?i.current.animatingIds.has(e):i.current.animatingIds.size>0,[]),T=o(e=>s.capture(e),[s]);return c(()=>()=>{h()},[h]),{registry:a,positions:s,flip:l,registerElement:a.register,startExit:v,startEnter:C,isAnimating:w,cancelAnimation:m,cancelAllAnimations:h,capturePositions:T}}function Ee(e){let{logEvent:t}=J(),n=f(t);c(()=>{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 c(()=>()=>{},[]),{...r,registerElement:r.registerElement,startItemExit:r.startExit,startItemEnter:r.startEnter}}function De(e,r={}){let{autoAnimate:i=!0,stagger:s,enterDuration:l,exitDuration:p,flipDuration:m,enterEasing:h,exitEasing:g,flipEasing:_}=r,{logEvent:v}=J(),y=f(v);c(()=>{y.current=v},[v]);let b=f(r);c(()=>{b.current=r},[r]);let x=f(new Set),S=f(new Set),C=f(new Set),w=o((e,t)=>s?typeof s==`number`?s*e:(s[t]??0)*e:0,[s]),T=Ee({enterDuration:l,exitDuration:p,flipDuration:m,enterEasing:h,exitEasing:g,flipEasing:_,onComplete:o(e=>{x.current.delete(e),b.current.onAnimationComplete?.(e)},[])}),E=d(()=>{let n=new Set;return t.forEach(e,e=>{a(e)&&e.key!=null&&n.add(String(e.key))}),n},[e]);u(()=>{let e=C.current,t=[];E.forEach(n=>{!e.has(n)&&!S.current.has(n)&&t.push(n)}),t.length>0&&t.forEach((e,t)=>{let n=w(t,`enter`),r=()=>{S.current.add(e),b.current.onItemEnter?.(e),requestAnimationFrame(()=>{T.startItemEnter(e).then(()=>{S.current.delete(e)})})};n>0?setTimeout(r,n):r()}),C.current=new Set(E)},[E,i,T,w]);let D=o(e=>{x.current.has(e)||T.registry.has(e)&&(x.current.add(e),b.current.onItemExit?.(e),T.startItemExit(e))},[T]),O=o(e=>x.current.has(e),[]),k=o(e=>S.current.has(e),[]),A=o(()=>Array.from(x.current),[]),j=o(()=>Array.from(S.current),[]),M=d(()=>{let r=[];return t.forEach(e,e=>{if(!a(e)){r.push(e);return}let t=e.key==null?null:String(e.key);t!=null&&x.current.has(t)?r.push(n(e,{"data-reorder-state":`exiting`})):r.push(e)}),r},[e]);return c(()=>()=>{},[]),{presentChildren:M,triggerExit:D,isExiting:O,isEntering:k,exitingIds:A(),enteringIds:j(),reorder:T}}function Oe(e,t){if(e!==void 0)return typeof e==`number`?e:e[t]}const ke={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`}},Ae=i(({children:e,autoAnimate:r=!0,stagger:i,duration:s,layout:u=`auto`,className:m=``,flipBehavior:g,exitPositionStrategy:_,onItemExit:v,onItemEnter:y},b)=>{let{logEvent:x}=J(),S=f(x);c(()=>{S.current=x},[x]);let C=f(v),w=f(y);c(()=>{C.current=v,w.current=y},[v,y]);let T=o(e=>{j(t=>t.filter(t=>t.key!==e))},[]),E=Ee({enterDuration:Oe(s,`enter`),exitDuration:Oe(s,`exit`),flipBehavior:g,exitPositionStrategy:_,onComplete:T});l(b,()=>({startItemExit:E.startItemExit,startItemEnter:E.startItemEnter,isAnimating:E.isAnimating}),[E.startItemExit,E.startItemEnter,E.isAnimating]);let D=f(E.startItemExit),O=f(E.startItemEnter);c(()=>{D.current=E.startItemExit,O.current=E.startItemEnter},[E.startItemExit,E.startItemEnter]);let k=d(()=>{let n=[];return t.forEach(e,e=>{a(e)&&e.key!=null&&n.push({key:String(e.key),element:e})}),n},[e]),[A,j]=p(k),M=f(new Set),N=o((e,t)=>i?typeof i==`number`?i*e:(i[t]??0)*e:0,[i]);c(()=>{let e=new Set(k.map(e=>e.key)),t=new Set(A.map(e=>e.key)),n=A.filter(t=>!e.has(t.key)&&!M.current.has(t.key)),r=k.filter(e=>!t.has(e.key));if(n.length===0&&r.length===0){k.some(e=>{let t=A.find(t=>t.key===e.key);return t&&t.element!==e.element})&&j(e=>e.map(e=>M.current.has(e.key)?e:k.find(t=>t.key===e.key)??e));return}if(n.forEach((e,t)=>{let n=N(t,`exit`);M.current.add(e.key);let r=()=>{C.current?.(e.key),D.current(e.key).finally(()=>{M.current.delete(e.key)})};n>0?setTimeout(r,n):r()}),r.length>0){let t=A.filter(t=>!e.has(t.key)),n=[...k];t.forEach(e=>{let t=A.findIndex(t=>t.key===e.key);t!==-1&&t<=n.length&&n.splice(t,0,e)}),j(n),r.forEach((e,t)=>{let n=N(t,`enter`),r=()=>{w.current?.(e.key)};n>0?setTimeout(r,n):r()})}},[k,A,N]);let P=d(()=>{let e=new Set(k.map(e=>e.key));return A.map(({key:t,element:r})=>{let i=!!e.has(t),a=M.current.has(t);return n(r,{ref:e=>{e?(E.registerElement(t,e),!e.dataset.reorderState&&i&&!a&&(e.dataset.reorderState=`entering`,O.current(t))):E.registerElement(t,null);let n=r.ref;typeof n==`function`?n(e):n&&typeof n==`object`&&(n.current=e)},"data-reorder-id":t})})},[A,k,E.registerElement]);return h(`div`,{className:`waapi-reorder-container reorder ${u===`auto`?``:`reorder--${u}`} ${m}`,style:ke[u],children:P})});Ae.displayName=`Reorder`;const je=()=>typeof navigator<`u`&&navigator.language?navigator.language:`en`;function Me(e,t={}){let{locale:n,type:r=`conjunction`,style:i=`long`,separator:a}=t;return d(()=>{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??je();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 Ne=({tokens:e,placeholder:t=`No tokens`,maxVisible:n,textAnimationMode:r=`character`,textDirection:i=`vertical`,textStaggerDelay:a=15,locale:s,listType:l=`conjunction`,listStyle:u=`long`,separator:p,enableWidthAnimation:m=!1,className:_=``,tokenClassName:v=``,placeholderClassName:x=``,separatorClassName:C=``})=>{let{logEvent:T}=J(),D=f(T);c(()=>{D.current=T},[T]);let O=f(new Set),k=f(new Map),A=f(new Map),j=d(()=>n?e.slice(0,n):e,[e,n]),M=d(()=>n?Math.max(0,e.length-n):0,[e.length,n]),N=Me(j.map(e=>e.text),{locale:s,type:l,style:u,separator:p}),P=f(0),F=M>0&&P.current===0,I=M===0&&P.current>0;c(()=>{P.current=M},[M]);let L=o((e,t)=>{if(t>=j.length-1)return!1;let n=k.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}},[j.length]);c(()=>{let e=new Set(j.map(e=>e.id)),t=k.current;for(let n of t.keys())e.has(n)||k.current.delete(n);j.forEach((e,t)=>{t<j.length-1&&!k.current.has(e.id)&&k.current.set(e.id,{animationPhase:`idle`})})},[j]);let R=o(e=>{let t=A.current.get(e);t&&(k.current.set(e,{animationPhase:`exit-coordinated`}),t.dataset.separatorState=`exiting`,t.animate([{opacity:1,transform:`translateY(0) scale(1)`},{opacity:0,transform:`translateY(${b.OFFSET_Y_EXIT}px) scale(${b.SCALE_EXIT})`}],{duration:y.EXIT_DURATION,easing:S.EASE_IN_CUBIC,fill:`forwards`}).finished.then(()=>{k.current.set(e,{animationPhase:`completed`}),t.dataset.separatorState=`completed`}).catch(()=>{k.current.delete(e)}))},[]),z=o(e=>{O.current.add(e);let t=[],n=j.findIndex(t=>t.id===e);if(n===j.length-1&&n>0){let e=j[n-1];e&&t.push(e.id)}R(e),t.forEach(e=>R(e)),D.current({type:`token-remove`,source:`AnimatedTokensV2`,message:`Token exiting: ${e}`,data:{id:e,additionalSeparators:t}})},[j,R]),B=o(e=>{D.current({type:`token-add`,source:`AnimatedTokensV2`,message:`Token entering: ${e}`,data:{id:e}})},[]),V=e.length===0&&!!t,H=d(()=>N.map((e,t)=>{if(e.type===`element`){let t=j[e.index];if(!t)return null;let n=O.current.has(t.id);return h(`span`,{className:`waapi-token-wrapper ${v}`,"data-reorder-id":t.id,children:h($,{text:t.text,mode:n?`none`:r,direction:i,staggerDelay:a,duration:w.DURATION_ENTER,blur:E.newToken.blur,widthAnimation:!n&&m,initial:n?!1:`initial`,animate:`animate`})},t.id)}let n=j[e.index];if(!n)return null;let o=j.findIndex(e=>e.id===n.id);return L(n.id,o)?h(`span`,{ref:e=>{e?A.current.set(n.id,e):A.current.delete(n.id)},className:`waapi-token-separator ${C}`,"data-separator-state":k.current.get(n.id)?.animationPhase??`idle`,children:e.value},`sep-${n.id}-${t}`):null}).filter(Boolean),[N,j,v,r,i,a,m,C,L]),U=d(()=>p===void 0?[...N].reverse().find(e=>e.type===`literal`)?.value??`, `:p,[N,p]),W=d(()=>M===0&&!I?null:g(`div`,{"data-reorder-id":`overflow-counter`,className:`waapi-token-overflow ${v} ${F?`entering`:``} ${I?`exiting`:``}`,children:[j.length>0&&h(`span`,{className:`waapi-token-separator ${C}`,children:U}),h(`span`,{className:`waapi-token-separator ${C}`,children:`+`}),h(q,{value:M,duration:w.DURATION_ENTER,fontSize:`inherit`,fontWeight:`inherit`,color:`inherit`}),h($,{text:` more`,mode:r,direction:i,staggerDelay:a,duration:I?w.DURATION_EXIT:w.DURATION_ENTER,blur:E.newToken.blur,initial:F?`initial`:!1,animate:`animate`})]},`overflow-counter`),[M,F,I,v,j.length,U,C,r,i,a]);return g(`div`,{role:`text`,className:`waapi-animated-tokens-container waapi-v2 ${_}`,children:[V&&h($,{text:t,mode:E.placeholder.mode,direction:E.placeholder.direction,blur:E.placeholder.blur,duration:E.placeholder.duration,initial:`initial`,animate:`animate`,className:`waapi-token-placeholder ${x}`},`placeholder`),g(Ae,{layout:`horizontal`,onItemExit:z,onItemEnter:B,children:[H,W]})]})},Pe=r(null);function Fe(){let e=s(Pe);if(!e)throw Error(`useMorphContext must be used within a <Morph> component. Wrap your morphable components with <Morph>.`);return e}const Ie=y.FLIP_DURATION,Le=S.EASE_OUT_CUBIC;function Re(e){let[t,n]=p(!1),r=f([]),i=f(e);c(()=>{i.current=e},[e]);let a=o(()=>{r.current.forEach(e=>e.cancel()),r.current=[],n(!1)},[]),s=o(async(e,o)=>{t&&a(),n(!0);let s=i.current?.duration??Ie,c=i.current?.easing??Le,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||ze(h,l),v=i.current?.clipPathEnd||ze(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 c(()=>()=>{a()},[a]),{isMorphing:t,morph:s,cancel:a}}function ze(e,t){let n=parseFloat(e)||0;return`inset(0 round ${n/t.width*100}% ${n/t.height*100}%)`}const Be=y.FLIP_DURATION,Ve=S.MATERIAL_STANDARD;function He(e){let[t,n]=p(!1),r=f(null),i=f(e),a=i.current?.duration??Be,s=i.current?.easing??Ve,c=o(()=>{r.current&&(r.current.style.transition=`grid-template-rows ${a}ms ${s}`)},[a,s]),l=o(()=>{c(),r.current&&(r.current.style.gridTemplateRows=`1fr`),n(!0)},[c]),u=o(()=>{c(),r.current&&(r.current.style.gridTemplateRows=`0fr`),n(!1)},[c]);return{isExpanded:t,expand:l,collapse:u,toggle:o(()=>{t?u():l()},[t,l,u]),containerRef:r}}function Ue(e){let t=f(e),n=f(e?.types||[]),r=d(()=>typeof document>`u`?!1:`startViewTransition`in document,[]),i=o(e=>{n.current=e},[]);return{isSupported:r,startTransition:o(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 Le(e){let t=e?.technique??`flip-clip-path`,n=f(e);c(()=>{n.current=e},[e]);let r=je({duration:e?.duration,easing:e?.easing}),i=Fe({duration:e?.duration,easing:e?.easing}),a=Ie(),s=r.isMorphing,l=o(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]),u=o(()=>{r.cancel()},[r]);return{isMorphing:s,technique:t,isViewTransitionsSupported:a.isSupported,morph:l,cancel:u,flipClipPath:r,cssGrid:i,viewTransitions:a}}function Re({children:e,technique:t=`flip-clip-path`,duration:n,easing:r,className:i=``,onMorphStart:a,onMorphEnd:o}){let s=Le({technique:t,duration:n,easing:r,onMorphStart:a,onMorphEnd:o}),c=d(()=>({morph:s}),[s]);return h($.Provider,{value:c,children:h(`div`,{className:`morph-container ${i}`,children:e})})}const ze=P,Be=(e,t)=>{let n={...P.token};return e===`enter-from`?(Object.assign(n,P.enterFrom),t===`vertical`?Object.assign(n,P.verticalEnterFrom):Object.assign(n,P.horizontalEnterFrom)):e===`enter-to`?Object.assign(n,P.enterTo):e===`exit-active`&&(Object.assign(n,P.exitActive),t===`vertical`?Object.assign(n,P.verticalExitActive):Object.assign(n,P.horizontalExitActive)),n},Ve=()=>{let e=I();return{...P.container,...e}},He=N,Ue=()=>{let e=I();return{...N.container,...e}};export{T as ANIMATION_CONFIGS,w as ANIMATION_DEFAULTS,me as AnimatedTokens,De as AnimatedTokensV2,De as TextFlow,k as CSS_VAR_NAMES,A as CSS_VAR_VALUES,ie as DebugProvider,S as EASINGS,x as EFFECTS,Re as Morph,$ as MorphContext,E as PRESETS,C as RESPONSIVE_CONFIGS,Q as Reorder,W as SlidingNumber,X as SlidingText,y as TIMING,b as TRANSFORMS,N as animatedTokensBaseStyles,He as animatedTokensStyles,se as calculatePositionDelta,de as captureAnimationInfo,K as captureComputedStyles,fe as captureElementAnimations,q as capturePosition,oe as capturePositionForLog,ae as captureStylesForLog,Y as choreographyTracker,ce as compareStyles,J as createAnimationTimer,j as cssVar,ue as formatTimingResult,L as generateCSSVariables,R as generateResponsiveCSS,Ue as getResponsiveAnimatedTokensStyle,_ as getResponsiveDuration,Ve as getResponsiveSlidingTextStyle,v as getResponsiveStagger,I as getResponsiveTokenStyles,Be as getSlidingTextTokenStyle,V as injectCSSVariables,U as reinjectCSSVariables,H as removeCSSVariables,F as responsiveOverrides,P as slidingTextBaseStyles,ze as slidingTextStyles,xe as useAnimationOrchestrator,Fe as useCSSGridMorph,G as useDebug,he as useElementRegistry,be as useFLIPAnimation,je as useFLIPClipPath,Ee as useListFormat,Le as useMorph,Oe as useMorphContext,_e as usePositionCapture,Z as useReorder,Se as useReorderPresence,Ie as useViewTransitions,pe as useWAAPIAnimations};
+        `,document.head.appendChild(e),()=>{e.remove()}}return()=>{}})();try{await document.startViewTransition(e).finished}finally{r()}},[]),setTypes:i}}function We(e){let t=e?.technique??`flip-clip-path`,n=f(e);c(()=>{n.current=e},[e]);let r=Re({duration:e?.duration,easing:e?.easing}),i=He({duration:e?.duration,easing:e?.easing}),a=Ue(),s=r.isMorphing,l=o(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]),u=o(()=>{r.cancel()},[r]);return{isMorphing:s,technique:t,isViewTransitionsSupported:a.isSupported,morph:l,cancel:u,flipClipPath:r,cssGrid:i,viewTransitions:a}}function Ge({children:e,technique:t=`flip-clip-path`,duration:n,easing:r,className:i=``,onMorphStart:a,onMorphEnd:o}){let s=We({technique:t,duration:n,easing:r,onMorphStart:a,onMorphEnd:o}),c=d(()=>({morph:s}),[s]);return h(Pe.Provider,{value:c,children:h(`div`,{className:`morph-container ${i}`,children:e})})}const Ke=P,qe=(e,t)=>{let n={...P.token};return e===`enter-from`?(Object.assign(n,P.enterFrom),t===`vertical`?Object.assign(n,P.verticalEnterFrom):Object.assign(n,P.horizontalEnterFrom)):e===`enter-to`?Object.assign(n,P.enterTo):e===`exit-active`&&(Object.assign(n,P.exitActive),t===`vertical`?Object.assign(n,P.verticalExitActive):Object.assign(n,P.horizontalExitActive)),n},Je=()=>{let e=I();return{...P.container,...e}},Ye=N,Xe=()=>{let e=I();return{...N.container,...e}};export{T as ANIMATION_CONFIGS,w as ANIMATION_DEFAULTS,ve as AnimatedTokens,Ne as AnimatedTokensV2,Ne as TextFlow,k as CSS_VAR_NAMES,A as CSS_VAR_VALUES,ce as DebugProvider,S as EASINGS,x as EFFECTS,Ge as Morph,Pe as MorphContext,E as PRESETS,C as RESPONSIVE_CONFIGS,Ae as Reorder,q as SlidingNumber,$ as SlidingText,y as TIMING,b as TRANSFORMS,N as animatedTokensBaseStyles,Ye as animatedTokensStyles,de as calculatePositionDelta,he as captureAnimationInfo,Y as captureComputedStyles,ge as captureElementAnimations,X as capturePosition,ue as capturePositionForLog,le as captureStylesForLog,Q as choreographyTracker,fe as compareStyles,Z as createAnimationTimer,j as cssVar,me as formatTimingResult,L as generateCSSVariables,R as generateResponsiveCSS,Xe as getResponsiveAnimatedTokensStyle,_ as getResponsiveDuration,Je as getResponsiveSlidingTextStyle,v as getResponsiveStagger,I as getResponsiveTokenStyles,qe as getSlidingTextTokenStyle,G as injectAllCSS,U as injectCSSVariables,W as injectStructuralCSS,re as reinjectAllCSS,ne as reinjectCSSVariables,te as removeAllCSS,K as removeCSSVariables,ee as removeStructuralCSS,F as responsiveOverrides,P as slidingTextBaseStyles,Ke as slidingTextStyles,Te as useAnimationOrchestrator,He as useCSSGridMorph,J as useDebug,ye as useElementRegistry,we as useFLIPAnimation,Re as useFLIPClipPath,Me as useListFormat,We as useMorph,Fe as useMorphContext,xe as usePositionCapture,Ee as useReorder,De as useReorderPresence,Ue as useViewTransitions,_e as useWAAPIAnimations};
 //# sourceMappingURL=index.js.map