@mks2508/waapi-animation-primitives 0.6.1 → 0.6.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +14 -14
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +0 -26
- package/dist/index.css.map +1 -1
- package/dist/index.d.cts +1 -91
- package/dist/index.d.cts.map +1 -1
- package/dist/index.d.ts +1 -91
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +14 -14
- package/dist/index.js.map +1 -1
- package/package.json +69 -69
package/dist/index.cjs
CHANGED
|
@@ -1,52 +1,52 @@
|
|
|
1
1
|
require('./index.css');
|
|
2
|
-
var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,a)=>(a=n==null?{}:e(i(n)),o(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));let c=require(`react`);c=s(c);
|
|
2
|
+
var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,a)=>(a=n==null?{}:e(i(n)),o(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));let c=require(`react`);c=s(c);const l=e=>typeof window>`u`?e:window.matchMedia(`(prefers-reduced-motion: reduce)`).matches?0:window.innerWidth<768?Math.round(e*.6):e,u=e=>typeof window>`u`?e:window.matchMedia(`(prefers-reduced-motion: reduce)`).matches?0:window.innerWidth<768?Math.round(e*.5):e,d={ENTER_DURATION:200,EXIT_DURATION:180,COLLAPSE_DURATION:200,FLIP_DURATION:300,ENTER_STAGGER:15,EXIT_STAGGER:0,COLLAPSE_DELAY:30,FLIP_DELAY_PERCENT:.25,MIN_DELTA_PX:1},f={OFFSET_Y_ENTER:8,OFFSET_Y_EXIT:-8,OFFSET_X:16,SCALE_ENTER:.85,SCALE_EXIT:.85,ROTATE_EXIT:0},p={BLUR_ENTER:4,BLUR_EXIT:2},m={MATERIAL_DECELERATE:`cubic-bezier(0, 0, 0.2, 1)`,MATERIAL_ACCELERATE:`cubic-bezier(0.4, 0, 1, 1)`,MATERIAL_STANDARD:`cubic-bezier(0.4, 0, 0.2, 1)`,EASE_REORDER:`cubic-bezier(0.215, 0.61, 0.355, 1)`,EASE_OUT_CUBIC:`cubic-bezier(0.33, 1, 0.68, 1)`,EASE_IN_CUBIC:`cubic-bezier(0.32, 0, 0.67, 0)`,EASE_IN_OUT:`cubic-bezier(0.42, 0, 0.58, 1)`,EASE_OUT_EXPO:`cubic-bezier(0.16, 1, 0.3, 1)`,EASE_FLIP:`cubic-bezier(0.2, 0, 0.2, 1)`,SPRING_GENTLE:`linear(0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017 19.4%, 1.067, 1.099 24.3%, 1.108 26%, 1.100, 1.078 30.1%, 1.049 32.5%, 0.994 37.3%, 0.981 40.2%, 0.974 43.4%, 0.975 50.2%, 0.997 62.5%, 1.001 74.7%, 1)`,SPRING_SNAPPY:`linear(0, 0.006, 0.024 2%, 0.096 4.2%, 0.397 9.3%, 0.861 15.8%, 1.002 18.7%, 1.093 21.4%, 1.143 24%, 1.156, 1.149 28.3%, 1.115 31.5%, 1.022 40%, 0.988 47.1%, 0.984 55.1%, 0.998 72.3%, 1.001 85.4%, 1)`},h={tokenEnter:{get duration(){return l(d.ENTER_DURATION)},get stagger(){return u(d.ENTER_STAGGER)},easing:m.MATERIAL_DECELERATE,blur:p.BLUR_ENTER,offsetY:f.OFFSET_Y_ENTER,scale:f.SCALE_ENTER},tokenExit:{get duration(){return l(d.EXIT_DURATION)},get stagger(){return u(d.EXIT_STAGGER)},easing:m.MATERIAL_ACCELERATE,blur:p.BLUR_EXIT,offsetY:f.OFFSET_Y_EXIT,scale:f.SCALE_EXIT},collapse:{get duration(){return l(d.COLLAPSE_DURATION)},delay:d.COLLAPSE_DELAY,easing:m.MATERIAL_STANDARD},flip:{get duration(){return l(d.FLIP_DURATION)},delayPercent:d.FLIP_DELAY_PERCENT,easing:m.EASE_REORDER}},g={DURATION_ENTER:d.ENTER_DURATION,DURATION_EXIT:d.EXIT_DURATION,DURATION_FLIP:d.FLIP_DURATION,STAGGER_DELAY:d.ENTER_STAGGER,OFFSET_VERTICAL:f.OFFSET_Y_ENTER,OFFSET_HORIZONTAL:f.OFFSET_X,BLUR_AMOUNT:p.BLUR_ENTER,EASING_ENTER:m.EASE_OUT_CUBIC,EASING_EXIT:m.EASE_IN_CUBIC,EASING_FLIP:m.SPRING_GENTLE,SPRING_EASING:m.SPRING_GENTLE},_={tokenEnter:{duration:d.ENTER_DURATION,stagger:d.ENTER_STAGGER,easing:m.MATERIAL_DECELERATE,blur:p.BLUR_ENTER,offsetY:f.OFFSET_Y_ENTER,scale:f.SCALE_ENTER},tokenExit:{duration:d.EXIT_DURATION,stagger:d.EXIT_STAGGER,easing:m.MATERIAL_ACCELERATE,blur:p.BLUR_EXIT,offsetY:f.OFFSET_Y_EXIT,scale:f.SCALE_EXIT},collapse:{duration:d.COLLAPSE_DURATION,delay:d.COLLAPSE_DELAY,easing:m.MATERIAL_STANDARD},flip:{duration:d.FLIP_DURATION,delayPercent:d.FLIP_DELAY_PERCENT,easing:m.EASE_REORDER}},v={newToken:{mode:`character`,direction:`vertical`,staggerDelay:15,blur:!0,widthAnimation:!0,duration:200,initial:`initial`},existingToken:{mode:`none`,blur:!1,widthAnimation:!1,initial:!1},placeholder:{mode:`word`,direction:`vertical`,blur:!0,widthAnimation:!1,duration:150},separator:{duration:100,widthAnimation:!0}},y=[{name:`--waapi-duration-exit`,syntax:`<time>`,inherits:!0,initialValue:`${d.EXIT_DURATION}ms`},{name:`--waapi-duration-enter`,syntax:`<time>`,inherits:!0,initialValue:`${d.ENTER_DURATION}ms`},{name:`--waapi-duration-flip`,syntax:`<time>`,inherits:!0,initialValue:`${d.FLIP_DURATION}ms`},{name:`--waapi-duration-collapse`,syntax:`<time>`,inherits:!0,initialValue:`${d.COLLAPSE_DURATION}ms`},{name:`--waapi-stagger-enter`,syntax:`<time>`,inherits:!0,initialValue:`${d.ENTER_STAGGER}ms`},{name:`--waapi-stagger-exit`,syntax:`<time>`,inherits:!0,initialValue:`${d.EXIT_STAGGER}ms`},{name:`--waapi-offset-y-enter`,syntax:`<length>`,inherits:!0,initialValue:`${f.OFFSET_Y_ENTER}px`},{name:`--waapi-offset-y-exit`,syntax:`<length>`,inherits:!0,initialValue:`${f.OFFSET_Y_EXIT}px`},{name:`--waapi-offset-x`,syntax:`<length>`,inherits:!0,initialValue:`${f.OFFSET_X}px`},{name:`--waapi-scale-exit`,syntax:`<number>`,inherits:!0,initialValue:`${f.SCALE_EXIT}`},{name:`--waapi-scale-enter`,syntax:`<number>`,inherits:!0,initialValue:`${f.SCALE_ENTER}`},{name:`--waapi-blur-enter`,syntax:`<length>`,inherits:!0,initialValue:`${p.BLUR_ENTER}px`},{name:`--waapi-blur-exit`,syntax:`<length>`,inherits:!0,initialValue:`${p.BLUR_EXIT}px`},{name:`--waapi-stagger-index`,syntax:`<integer>`,inherits:!1,initialValue:`0`}],b=()=>y.map(e=>`@property ${e.name} {
|
|
3
3
|
syntax: '${e.syntax}';
|
|
4
4
|
inherits: ${e.inherits};
|
|
5
5
|
initial-value: ${e.initialValue};
|
|
6
6
|
}`).join(`
|
|
7
7
|
|
|
8
|
-
`),
|
|
9
|
-
`)}\n}`,
|
|
8
|
+
`),x={durationEnter:`--waapi-duration-enter`,durationExit:`--waapi-duration-exit`,durationCollapse:`--waapi-duration-collapse`,durationFlip:`--waapi-duration-flip`,staggerEnter:`--waapi-stagger-enter`,staggerExit:`--waapi-stagger-exit`,offsetYEnter:`--waapi-offset-y-enter`,offsetYExit:`--waapi-offset-y-exit`,offsetX:`--waapi-offset-x`,scaleExit:`--waapi-scale-exit`,blurEnter:`--waapi-blur-enter`,blurExit:`--waapi-blur-exit`,easeEnter:`--waapi-ease-enter`,easeExit:`--waapi-ease-exit`,easeCollapse:`--waapi-ease-collapse`,easeFlip:`--waapi-ease-flip`,separatorDuration:`--waapi-separator-duration`,separatorDelay:`--waapi-separator-delay`,separatorEasing:`--waapi-separator-easing`},S={[x.durationEnter]:`${d.ENTER_DURATION}ms`,[x.durationExit]:`${d.EXIT_DURATION}ms`,[x.durationCollapse]:`${d.COLLAPSE_DURATION}ms`,[x.durationFlip]:`${d.FLIP_DURATION}ms`,[x.staggerEnter]:`${d.ENTER_STAGGER}ms`,[x.staggerExit]:`${d.EXIT_STAGGER}ms`,[x.offsetYEnter]:`${f.OFFSET_Y_ENTER}px`,[x.offsetYExit]:`${f.OFFSET_Y_EXIT}px`,[x.offsetX]:`${f.OFFSET_X}px`,[x.scaleExit]:`${f.SCALE_EXIT}`,[x.blurEnter]:`${p.BLUR_ENTER}px`,[x.blurExit]:`${p.BLUR_EXIT}px`,[x.easeEnter]:m.EASE_OUT_CUBIC,[x.easeExit]:m.EASE_IN_CUBIC,[x.easeCollapse]:m.EASE_IN_OUT,[x.easeFlip]:m.EASE_FLIP,[x.separatorDuration]:`${d.FLIP_DURATION}ms`,[x.separatorDelay]:`${Math.round(d.EXIT_DURATION*d.FLIP_DELAY_PERCENT)}ms`,[x.separatorEasing]:m.EASE_FLIP},C=e=>`var(${e})`,w={...S},T={container:{...w,display:`flex`,flexWrap:`wrap`,alignItems:`center`,gap:0},placeholder:{color:`var(--muted-foreground)`,fontStyle:`italic`},tokenWrapper:{display:`inline-flex`,alignItems:`center`},tokenWrapperExitCompleted:{position:`absolute`,opacity:0,pointerEvents:`none`},separator:{display:`inline`,whiteSpace:`pre`,marginLeft:`0.25em`,willChange:`transform, opacity`},separatorExitCoordinated:{opacity:0,transform:`translateY(-8px) scale(${f.SCALE_EXIT})`},separatorExitCompleted:{opacity:0,position:`absolute`,pointerEvents:`none`,width:0,overflow:`hidden`},overflow:{display:`inline-flex`,alignItems:`center`,whiteSpace:`nowrap`}},E={container:{...w,display:`inline-flex`,overflow:`hidden`,verticalAlign:`bottom`,willChange:`width`},content:{display:`inline-flex`,whiteSpace:`pre`},token:{display:`inline-block`,willChange:`transform, opacity, filter`,backfaceVisibility:`hidden`,fontWeight:500},enterFrom:{opacity:0,filter:`blur(${C(x.blurEnter)})`},enterTo:{opacity:1,transform:`translate(0, 0)`,filter:`blur(0)`},exitActive:{opacity:0,filter:`blur(${C(x.blurExit)})`},verticalEnterFrom:{transform:`translateY(${C(x.offsetYEnter)})`},verticalExitActive:{transform:`translateY(${C(x.offsetYExit)})`},horizontalEnterFrom:{transform:`translateX(${C(x.offsetX)})`},horizontalExitActive:{transform:`translateX(calc(${C(x.offsetX)} * -1))`}},D={mobile:{[x.durationEnter]:`120ms`,[x.durationExit]:`100ms`,[x.durationCollapse]:`120ms`,[x.durationFlip]:`180ms`,[x.staggerEnter]:`8ms`,[x.blurEnter]:`2px`,[x.blurExit]:`1px`,[x.offsetYEnter]:`4px`,[x.offsetYExit]:`-4px`},smallMobile:{[x.durationEnter]:`80ms`,[x.durationExit]:`60ms`,[x.durationFlip]:`120ms`,[x.staggerEnter]:`4ms`,[x.blurEnter]:`1px`,[x.blurExit]:`0px`,[x.offsetYEnter]:`2px`,[x.offsetYExit]:`-2px`},reducedMotion:{[x.durationEnter]:`0ms`,[x.durationExit]:`0ms`,[x.durationCollapse]:`0ms`,[x.durationFlip]:`0ms`,[x.staggerEnter]:`0ms`,[x.staggerExit]:`0ms`,[x.blurEnter]:`0px`,[x.blurExit]:`0px`,[x.offsetYEnter]:`0px`,[x.offsetYExit]:`0px`,[x.scaleExit]:`1`},highContrast:{[x.blurEnter]:`0px`,[x.blurExit]:`0px`}},O=()=>{if(typeof window>`u`)return S;if(window.matchMedia(`(prefers-reduced-motion: reduce)`).matches)return{...S,...D.reducedMotion};if(window.matchMedia(`(prefers-contrast: high)`).matches)return{...S,...D.highContrast};let e=window.innerWidth;return e<=480?{...S,...D.smallMobile}:e<=768?{...S,...D.mobile}:S},k=()=>`:root {\n${Object.entries(S).map(([e,t])=>` ${e}: ${t};`).join(`
|
|
9
|
+
`)}\n}`,A=()=>`
|
|
10
10
|
/* ============================================
|
|
11
11
|
@property DEFINITIONS (Modern CSS 2024)
|
|
12
12
|
Enables typed, animatable CSS custom properties
|
|
13
13
|
Baseline: July 2024 - All major browsers
|
|
14
14
|
============================================ */
|
|
15
|
-
${
|
|
15
|
+
${b()}
|
|
16
16
|
|
|
17
17
|
/* ============================================
|
|
18
18
|
CSS VARIABLES (derived from animationUtils.ts SSOT)
|
|
19
19
|
============================================ */
|
|
20
|
-
${
|
|
20
|
+
${k()}
|
|
21
21
|
|
|
22
22
|
@media (max-width: 768px) {
|
|
23
23
|
:root {
|
|
24
|
-
${Object.entries(
|
|
24
|
+
${Object.entries(D.mobile).map(([e,t])=>` ${e}: ${t};`).join(`
|
|
25
25
|
`)}
|
|
26
26
|
}
|
|
27
27
|
}
|
|
28
28
|
|
|
29
29
|
@media (max-width: 480px) {
|
|
30
30
|
:root {
|
|
31
|
-
${Object.entries(
|
|
31
|
+
${Object.entries(D.smallMobile).map(([e,t])=>` ${e}: ${t};`).join(`
|
|
32
32
|
`)}
|
|
33
33
|
}
|
|
34
34
|
}
|
|
35
35
|
|
|
36
36
|
@media (prefers-reduced-motion: reduce) {
|
|
37
37
|
:root {
|
|
38
|
-
${Object.entries(
|
|
38
|
+
${Object.entries(D.reducedMotion).map(([e,t])=>` ${e}: ${t};`).join(`
|
|
39
39
|
`)}
|
|
40
40
|
}
|
|
41
41
|
}
|
|
42
42
|
|
|
43
43
|
@media (prefers-contrast: high) {
|
|
44
44
|
:root {
|
|
45
|
-
${Object.entries(
|
|
45
|
+
${Object.entries(D.highContrast).map(([e,t])=>` ${e}: ${t};`).join(`
|
|
46
46
|
`)}
|
|
47
47
|
}
|
|
48
48
|
}
|
|
49
|
-
`.trim(),
|
|
49
|
+
`.trim(),j=`waapi-animation-primitives-vars`,M=`waapi-animation-primitives-structural`;let N=!1,P=!1;const F=`
|
|
50
50
|
/* ============================================
|
|
51
51
|
WAAPI Animation Primitives - Structural CSS
|
|
52
52
|
============================================ */
|
|
@@ -299,7 +299,7 @@ ${Object.entries(k.highContrast).map(([e,t])=>` ${e}: ${t};`).join(`
|
|
|
299
299
|
height: auto !important;
|
|
300
300
|
}
|
|
301
301
|
}
|
|
302
|
-
`,
|
|
302
|
+
`,I=()=>{if(typeof document>`u`||N)return;if(document.getElementById(j)){N=!0;return}let e=document.createElement(`style`);e.id=j,e.textContent=A(),document.head.appendChild(e),N=!0},L=()=>{if(typeof document>`u`||P)return;if(document.getElementById(M)){P=!0;return}let e=document.createElement(`style`);e.id=M,e.textContent=`
|
|
303
303
|
/* ============================================
|
|
304
304
|
WAAPI Animation Primitives - Structural CSS
|
|
305
305
|
============================================ */
|
|
@@ -552,15 +552,15 @@ ${Object.entries(k.highContrast).map(([e,t])=>` ${e}: ${t};`).join(`
|
|
|
552
552
|
height: auto !important;
|
|
553
553
|
}
|
|
554
554
|
}
|
|
555
|
-
`,document.head.appendChild(e),I=!0},B=()=>{R(),z()},V=()=>{if(typeof document>`u`)return;let e=document.getElementById(N);e&&(e.remove(),F=!1)},H=()=>{if(typeof document>`u`)return;let e=document.getElementById(P);e&&(e.remove(),I=!1)},U=()=>{V(),H()},ee=()=>{V(),R()},te=()=>{U(),B()};if(typeof document<`u`){let e=()=>{B()};document.readyState===`loading`?document.addEventListener(`DOMContentLoaded`,e):e()}function ne(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:u,trend:d=0,animationConfig:f}){let p=(0,c.useMemo)(()=>{if(f){let{overshoot:e=1,stiffness:t=1,mass:n=1}=f,r=.34*t,i=1+.56*e,a=.64/n;return`cubic-bezier(${Math.min(r,1).toFixed(2)}, ${Math.min(i,2).toFixed(2)}, ${Math.min(a,1).toFixed(2)}, 1)`}return`cubic-bezier(0.34, 1.56, 0.64, 1)`},[f]),m=(0,c.useMemo)(()=>ne(e,u),[e,u]),h=(0,c.useRef)(new Set),g=(0,c.useRef)(!0),_=(0,c.useMemo)(()=>{if(g.current)return new Set;let e=new Set;return m.forEach(t=>{h.current.has(t.key)||e.add(t.key)}),e},[m]);(0,c.useEffect)(()=>{g.current=!1,h.current=new Set(m.map(e=>e.key))},[m]);let v=e=>(Math.abs(e)-1)*o;return(0,l.jsx)(`div`,{style:{display:`inline-flex`,alignItems:`center`,fontSize:n,fontWeight:r,color:i,fontVariantNumeric:`tabular-nums`,fontFamily:`system-ui, -apple-system, sans-serif`,overflow:`hidden`},children:m.map(e=>{let n=_.has(e.key);return e.isDigit?(0,l.jsx)(ie,{digit:Number.parseInt(e.char),duration:t,digitHeight:a,delay:v(e.position),motionBlur:s,easing:p,isEntering:n,trend:d},e.key):(0,l.jsx)(re,{char:e.char,isEntering:n,duration:t,easing:p},e.key)})})}function re({char:e,isEntering:t,duration:n,easing:r}){let i=(0,c.useRef)(null),a=(0,c.useRef)(!1);return(0,c.useLayoutEffect)(()=>{!i.current||!t||a.current||(a.current=!0,i.current.animate([{opacity:0,transform:`scale(0.8)`},{opacity:1,transform:`scale(1)`}],{duration:n*.3,easing:r,fill:`forwards`}))},[t,n,r]),(0,l.jsx)(`span`,{ref:i,style:{display:`inline-block`,whiteSpace:`pre`,opacity:t?0:1},children:e})}function ie({digit:e,duration:t,digitHeight:n,delay:r,motionBlur:i,easing:a,isEntering:o,trend:s}){let u=(0,c.useRef)(null),d=(0,c.useRef)(null),f=(0,c.useRef)(null),p=(0,c.useRef)(`blur-${Math.random().toString(36).slice(2,9)}`).current,m=(0,c.useRef)(null),h=(0,c.useRef)(e),g=(0,c.useRef)(!1),_=(0,c.useMemo)(()=>{let e=[];for(let t=-1;t<=1;t++)for(let t=0;t<=9;t++)e.push(t);return e},[]);(0,c.useLayoutEffect)(()=>{if(!g.current){g.current=!0;let t=-(e+10)*n;m.current=t,h.current=e,u.current&&(u.current.style.transform=`translateY(${t}px)`)}},[e,n]),(0,c.useLayoutEffect)(()=>{!d.current||!o||d.current.animate([{opacity:0,transform:`scale(0.5) translateY(-20px)`},{opacity:1,transform:`scale(1) translateY(0)`}],{duration:t*.4,easing:a,fill:`forwards`})},[o,t,a]),(0,c.useEffect)(()=>{h.current=e,g.current&&(e===(m.current===null?e:((Math.round(-m.current/n)-10)%10+10)%10)&&m.current!==null||v(e))},[e,n]);let v=e=>{if(!u.current||!d.current)return;if(f.current){let e=getComputedStyle(u.current);m.current=new DOMMatrix(e.transform).m42,f.current.cancel(),f.current=null,u.current.style.transform=`translateY(${m.current}px)`}let o=m.current===null?e+10:-m.current/n,c=((Math.round(o)-10)%10+10)%10;if(e===c&&m.current!==null){let t=-(e+10)*n;if(u.current){let e=f.current;e&&e.cancel(),u.current.style.transform=`translateY(${t}px)`}m.current=t;return}let l;s===1?l=e>=c?e-c:10-c+e:s===-1?l=e<=c?e-c:e-c-10:(l=e-c,l>5?l-=10:l<-5&&(l+=10));let g=m.current??-(c+10)*n,_=g-l*n,y=document.getElementById(p)?.querySelector(`feGaussianBlur`);if(i&&y){let e=Math.min(Math.abs(l)*1.2,6);y.setAttribute(`stdDeviation`,`0,${e}`),d.current.style.filter=`url(#${p})`}let b=u.current.animate([{transform:`translateY(${g}px)`},{transform:`translateY(${_}px)`}],{duration:t,delay:r,easing:a,fill:`forwards`});f.current=b,b.onfinish=()=>{let t=-(e+10)*n;u.current&&(b.cancel(),u.current.style.transform=`translateY(${t}px)`),m.current=t,d.current&&(d.current.style.filter=`none`),y&&y.setAttribute(`stdDeviation`,`0,0`),f.current=null,h.current!==e&&requestAnimationFrame(()=>{v(h.current)})},b.oncancel=()=>{f.current=null}};return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(`svg`,{style:{position:`absolute`,width:0,height:0},"aria-hidden":`true`,children:(0,l.jsx)(`defs`,{children:(0,l.jsx)(`filter`,{id:p,children:(0,l.jsx)(`feGaussianBlur`,{in:`SourceGraphic`,stdDeviation:`0,0`})})})}),(0,l.jsx)(`div`,{ref:d,style:{position:`relative`,height:`${n}px`,overflow:`hidden`,width:`0.65em`,textAlign:`center`,opacity:o?0:1},children:(0,l.jsx)(`div`,{ref:u,style:{position:`absolute`,left:0,right:0,willChange:`transform`},children:_.map((e,t)=>(0,l.jsx)(`div`,{style:{height:`${n}px`,display:`flex`,alignItems:`center`,justifyContent:`center`},children:e},t))})})]})}(0,c.createContext)(null);const ae={events:[],isEnabled:!1,isCollecting:!1,enableDebug:()=>{},disableDebug:()=>{},toggleDebug:()=>{},logEvent:()=>{},clearEvents:()=>{},getEventLog:()=>``,exportToCSV:()=>``,startCollecting:()=>{},stopCollecting:()=>[],flushEvents:()=>{}},G=()=>ae,oe=({children:e})=>(0,l.jsx)(l.Fragment,{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 se(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 ce(e){let t=q(e);return{x:t.x,y:t.y,w:t.width,h:t.height}}function le(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 ue(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:de(e,t)===de(e,r)}})}function de(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 fe(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 pe(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 me(e){return e.getAnimations().map(pe)}var he=class{constructor(){this.activeAnimations=new Map,this.timeline=[],this.completedAnimations=[],this.sessionStartTime=0}startSession(){}getRelativeTime(){return Math.round((performance.now()-this.sessionStartTime)*100)/100}startAnimation(e,t,n,r){}endAnimation(e){}detectOverlaps(e){let t=[];return this.activeAnimations.forEach((n,r)=>{r!==e&&t.push(`${n.type}:${n.elementId}`)}),t}getOverlaps(){return[]}getTimeline(){return[]}getActiveCount(){return 0}getActiveAnimations(){return[]}getCompletedAnimations(){return[]}getSummary(){return{totalAnimations:0,totalDuration:0,overlaps:[],timeline:[],activeAnimations:[]}}getTimelineForVisualization(){return[]}};const Y=new he,X=({text:e,mode:t=`word`,direction:n=`vertical`,staggerDelay:r=_.STAGGER_DELAY,duration:i=_.DURATION_ENTER,easing:a=_.EASING_ENTER,blur:o=!0,widthAnimation:s=!1,initial:u=`initial`,exit:d,className:f=``,style:p})=>{let m=(0,c.useRef)(null),h=(0,c.useRef)(null),{logEvent:g}=G(),v=(0,c.useRef)(null),y=(0,c.useRef)(null),b=(0,c.useRef)(!1),[x,S]=(0,c.useState)(u!==`initial`);(0,c.useEffect)(()=>{u===`initial`&&!b.current&&(b.current=!0,requestAnimationFrame(()=>{S(!0)}))},[u]);let C=d===`exit`?`exit`:x?`animate`:`initial`,w=t===`character`?e.split(``):[e],T=i+(w.length-1)*r;(0,c.useEffect)(()=>{if(C===`animate`&&m.current){let c=m.current;v.current=J(T),y.current=`enter-${e.slice(0,10)}-${Date.now()}`,Y.startAnimation(y.current,`enter`,e,T);let l=q(c);g({type:`text-enter-start`,source:`SlidingText`,message:`Enter animation starting for: "${e}"`,timing:{startTime:v.current.start,expectedDuration:T},position:{element:e,x:l.x,y:l.y,width:l.width,height:l.height},animation:{name:`enter`,phase:`start`,easing:a,fill:`forwards`},data:{text:e,charCount:w.length,mode:t,direction:n,staggerDelay:r,duration:i,totalDuration:T,blur:o,widthAnimation:s}});let u=setTimeout(()=>{if(v.current&&y.current&&m.current){let t=v.current.end();Y.endAnimation(y.current);let n=q(m.current);g({type:`text-enter-complete`,source:`SlidingText`,message:`Enter animation complete for: "${e}"`,timing:{startTime:t.startTime,endTime:t.endTime,expectedDuration:t.expectedDuration,actualDuration:t.actualDuration,deviation:t.deviation,deviationPercent:t.deviationPercent},position:{element:e,x:n.x,y:n.y,width:n.width,height:n.height},animation:{name:`enter`,phase:`complete`,progress:1,easing:a,fill:`forwards`},data:{text:e,deviationStatus:Math.abs(t.deviation)<10?`OK`:`WARNING`}})}},T+50);return()=>clearTimeout(u)}},[C,e,t,n,r,i,a,o,s,T,w.length,g]),(0,c.useLayoutEffect)(()=>{if(!s||!m.current||!h.current)return;let e=m.current,t=h.current;if(C===`initial`)e.style.width=`0px`;else if(C===`animate`)if(CSS.supports(`interpolate-size`,`allow-keywords`))e.style.width=`auto`,e.style.transition=`width ${i}ms ${a}`;else{let n=t.scrollWidth;e.style.width=`${n}px`,e.style.transition=`width ${i}ms ${a}`;let r=setTimeout(()=>{e.style.width=`auto`},i);return()=>clearTimeout(r)}else if(C===`exit`){let t=e.getBoundingClientRect().width;e.style.width=`${t}px`,e.getBoundingClientRect(),e.style.width=`0px`,e.style.transition=`width ${_.DURATION_EXIT}ms ${_.EASING_EXIT}`}},[C,s,i,a,e]);let E=e=>{let t=e*r,s=C===`exit`,c=s?_.DURATION_EXIT:i,l=s?_.EASING_EXIT:a;return{transition:`
|
|
555
|
+
`,document.head.appendChild(e),P=!0},R=()=>{I(),L()},z=()=>{if(typeof document>`u`)return;let e=document.getElementById(j);e&&(e.remove(),N=!1)},B=()=>{if(typeof document>`u`)return;let e=document.getElementById(M);e&&(e.remove(),P=!1)},ee=()=>{z(),B()},te=()=>{z(),I()},ne=()=>{ee(),R()};if(typeof document<`u`){let e=()=>{R()};document.readyState===`loading`?document.addEventListener(`DOMContentLoaded`,e):e()}function re(e,t){let n=t?.locale||`en-US`,r={style:t?.style||`decimal`,minimumFractionDigits:t?.minimumFractionDigits,maximumFractionDigits:t?.maximumFractionDigits,useGrouping:t?.useGrouping??!0};t?.style===`currency`&&t?.currency&&(r.currency=t.currency);let i=new Intl.NumberFormat(n,r).formatToParts(e),a=[],o=0;i.forEach(e=>{e.type===`integer`&&(o+=e.value.length)});let s=o,c=0,l=0;return i.forEach((e,t)=>{if(e.type===`integer`)for(let t of e.value)a.push({char:t,key:`int-${s}`,isDigit:!0,position:s}),s--;else if(e.type===`fraction`)for(let t of e.value)c++,a.push({char:t,key:`frac-${c}`,isDigit:!0,position:-c});else e.type===`decimal`?a.push({char:e.value,key:`decimal`,isDigit:!1,position:0}):e.type===`group`?(l++,a.push({char:e.value,key:`group-${l}`,isDigit:!1,position:0})):e.type===`currency`?a.push({char:e.value,key:`currency-${t}`,isDigit:!1,position:0}):e.type===`percentSign`?a.push({char:e.value,key:`percent`,isDigit:!1,position:0}):a.push({char:e.value,key:`symbol-${t}`,isDigit:!1,position:0})}),a}function V({value:e,duration:t=700,fontSize:n=`3rem`,fontWeight:r=`700`,color:i=`#000`,digitHeight:a=60,stagger:o=30,motionBlur:s=!0,format:l,trend:u=0,animationConfig:d}){let f=(0,c.useMemo)(()=>{if(d){let{overshoot:e=1,stiffness:t=1,mass:n=1}=d,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)`},[d]),p=(0,c.useMemo)(()=>re(e,l),[e,l]),m=(0,c.useRef)(new Set),h=(0,c.useRef)(!0),g=(0,c.useMemo)(()=>{if(h.current)return new Set;let e=new Set;return p.forEach(t=>{m.current.has(t.key)||e.add(t.key)}),e},[p]);(0,c.useEffect)(()=>{h.current=!1,m.current=new Set(p.map(e=>e.key))},[p]);let _=e=>(Math.abs(e)-1)*o;return React.createElement(`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`}},p.map(e=>{let n=g.has(e.key);return e.isDigit?React.createElement(ae,{key:e.key,digit:Number.parseInt(e.char),duration:t,digitHeight:a,delay:_(e.position),motionBlur:s,easing:f,isEntering:n,trend:u}):React.createElement(ie,{key:e.key,char:e.char,isEntering:n,duration:t,easing:f})}))}function ie({char:e,isEntering:t,duration:n,easing:r}){let i=(0,c.useRef)(null),a=(0,c.useRef)(!1);return(0,c.useLayoutEffect)(()=>{!i.current||!t||a.current||(a.current=!0,i.current.animate([{opacity:0,transform:`scale(0.8)`},{opacity:1,transform:`scale(1)`}],{duration:n*.3,easing:r,fill:`forwards`}))},[t,n,r]),React.createElement(`span`,{ref:i,style:{display:`inline-block`,whiteSpace:`pre`,opacity:t?0:1}},e)}function ae({digit:e,duration:t,digitHeight:n,delay:r,motionBlur:i,easing:a,isEntering:o,trend:s}){let l=(0,c.useRef)(null),u=(0,c.useRef)(null),d=(0,c.useRef)(null),f=(0,c.useRef)(`blur-${Math.random().toString(36).slice(2,9)}`).current,p=(0,c.useRef)(null),m=(0,c.useRef)(e),h=(0,c.useRef)(!1),g=(0,c.useMemo)(()=>{let e=[];for(let t=-1;t<=1;t++)for(let t=0;t<=9;t++)e.push(t);return e},[]);(0,c.useLayoutEffect)(()=>{if(!h.current){h.current=!0;let t=-(e+10)*n;p.current=t,m.current=e,l.current&&(l.current.style.transform=`translateY(${t}px)`)}},[e,n]),(0,c.useLayoutEffect)(()=>{!u.current||!o||u.current.animate([{opacity:0,transform:`scale(0.5) translateY(-20px)`},{opacity:1,transform:`scale(1) translateY(0)`}],{duration:t*.4,easing:a,fill:`forwards`})},[o,t,a]),(0,c.useEffect)(()=>{m.current=e,h.current&&(e===(p.current===null?e:((Math.round(-p.current/n)-10)%10+10)%10)&&p.current!==null||_(e))},[e,n]);let _=e=>{if(!l.current||!u.current)return;if(d.current){let e=getComputedStyle(l.current);p.current=new DOMMatrix(e.transform).m42,d.current.cancel(),d.current=null,l.current.style.transform=`translateY(${p.current}px)`}let o=p.current===null?e+10:-p.current/n,c=((Math.round(o)-10)%10+10)%10;if(e===c&&p.current!==null){let t=-(e+10)*n;if(l.current){let e=d.current;e&&e.cancel(),l.current.style.transform=`translateY(${t}px)`}p.current=t;return}let h;s===1?h=e>=c?e-c:10-c+e:s===-1?h=e<=c?e-c:e-c-10:(h=e-c,h>5?h-=10:h<-5&&(h+=10));let g=p.current??-(c+10)*n,v=g-h*n,y=document.getElementById(f)?.querySelector(`feGaussianBlur`);if(i&&y){let e=Math.min(Math.abs(h)*1.2,6);y.setAttribute(`stdDeviation`,`0,${e}`),u.current.style.filter=`url(#${f})`}let b=l.current.animate([{transform:`translateY(${g}px)`},{transform:`translateY(${v}px)`}],{duration:t,delay:r,easing:a,fill:`forwards`});d.current=b,b.onfinish=()=>{let t=-(e+10)*n;l.current&&(b.cancel(),l.current.style.transform=`translateY(${t}px)`),p.current=t,u.current&&(u.current.style.filter=`none`),y&&y.setAttribute(`stdDeviation`,`0,0`),d.current=null,m.current!==e&&requestAnimationFrame(()=>{_(m.current)})},b.oncancel=()=>{d.current=null}};return React.createElement(React.Fragment,null,React.createElement(`svg`,{style:{position:`absolute`,width:0,height:0},"aria-hidden":`true`},React.createElement(`defs`,null,React.createElement(`filter`,{id:f},React.createElement(`feGaussianBlur`,{in:`SourceGraphic`,stdDeviation:`0,0`})))),React.createElement(`div`,{ref:u,style:{position:`relative`,height:`${n}px`,overflow:`hidden`,width:`0.65em`,textAlign:`center`,opacity:o?0:1}},React.createElement(`div`,{ref:l,style:{position:`absolute`,left:0,right:0,willChange:`transform`}},g.map((e,t)=>React.createElement(`div`,{key:t,style:{height:`${n}px`,display:`flex`,alignItems:`center`,justifyContent:`center`}},e)))))}(0,c.createContext)(null);const oe={events:[],isEnabled:!1,isCollecting:!1,enableDebug:()=>{},disableDebug:()=>{},toggleDebug:()=>{},logEvent:()=>{},clearEvents:()=>{},getEventLog:()=>``,exportToCSV:()=>``,startCollecting:()=>{},stopCollecting:()=>[],flushEvents:()=>{}},H=()=>oe,se=({children:e})=>c.default.createElement(c.default.Fragment,null,e);function U(e){let t=getComputedStyle(e);return{opacity:t.opacity,transform:t.transform,filter:t.filter,width:t.width,height:t.height,marginRight:t.marginRight,marginLeft:t.marginLeft,position:t.position,visibility:t.visibility,pointerEvents:t.pointerEvents}}function ce(e){let t=U(e);return{opacity:t.opacity,transform:t.transform===`none`?`none`:t.transform,filter:t.filter===`none`?`none`:t.filter,width:t.width,marginRight:t.marginRight,position:t.position}}function W(e){let t=e.getBoundingClientRect();return{x:Math.round(t.x*100)/100,y:Math.round(t.y*100)/100,width:Math.round(t.width*100)/100,height:Math.round(t.height*100)/100,top:Math.round(t.top*100)/100,left:Math.round(t.left*100)/100,right:Math.round(t.right*100)/100,bottom:Math.round(t.bottom*100)/100}}function le(e){let t=W(e);return{x:t.x,y:t.y,w:t.width,h:t.height}}function ue(e,t){return{deltaX:Math.round((e.left-t.left)*100)/100,deltaY:Math.round((e.top-t.top)*100)/100,deltaWidth:Math.round((e.width-t.width)*100)/100,deltaHeight:Math.round((e.height-t.height)*100)/100}}function G(e,t){let n=U(t);return Object.entries(e).map(([e,t])=>{let r=n[e]||``;return{property:e,expected:t,actual:r,matches:K(e,t)===K(e,r)}})}function K(e,t){if(!t)return``;if(e===`opacity`)return parseFloat(t).toString();if(e===`transform`){if(t===`none`)return`none`;let e=t.match(/matrix\(([^)]+)\)/);if(e&&e[1]){let t=e[1].split(`,`).map(e=>parseFloat(e.trim())),n=t[4],r=t[5];if(n!==void 0&&r!==void 0)return`translate(${Math.round(n)}px, ${Math.round(r)}px)`}return t}if(e===`width`||e===`height`||e.includes(`margin`)){let e=parseFloat(t);if(!isNaN(e))return`${Math.round(e)}px`}if(e===`filter`){if(t===`none`)return`none`;let e=t.match(/blur\(([^)]+)\)/);if(e&&e[1]){let t=parseFloat(e[1]);return`blur(${Math.round(t)}px)`}}return t}function q(e){let t=performance.now();return{start:t,expectedDuration:e,end:()=>{let n=performance.now(),r=n-t,i=r-e;return{startTime:Math.round(t*100)/100,endTime:Math.round(n*100)/100,expectedDuration:e,actualDuration:Math.round(r*100)/100,deviation:Math.round(i*100)/100,deviationPercent:Math.round(i/e*1e4)/100}}}}function de(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 J(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(J)}var pe=class{constructor(){this.activeAnimations=new Map,this.timeline=[],this.completedAnimations=[],this.sessionStartTime=0}startSession(){}getRelativeTime(){return Math.round((performance.now()-this.sessionStartTime)*100)/100}startAnimation(e,t,n,r){}endAnimation(e){}detectOverlaps(e){let t=[];return this.activeAnimations.forEach((n,r)=>{r!==e&&t.push(`${n.type}:${n.elementId}`)}),t}getOverlaps(){return[]}getTimeline(){return[]}getActiveCount(){return 0}getActiveAnimations(){return[]}getCompletedAnimations(){return[]}getSummary(){return{totalAnimations:0,totalDuration:0,overlaps:[],timeline:[],activeAnimations:[]}}getTimelineForVisualization(){return[]}};const Y=new pe,X=({text:e,mode:t=`word`,direction:n=`vertical`,staggerDelay:r=g.STAGGER_DELAY,duration:i=g.DURATION_ENTER,easing:a=g.EASING_ENTER,blur:o=!0,widthAnimation:s=!1,initial:l=`initial`,exit:u,className:d=``,style:f})=>{let p=(0,c.useRef)(null),m=(0,c.useRef)(null),{logEvent:h}=H(),_=(0,c.useRef)(null),v=(0,c.useRef)(null),y=(0,c.useRef)(!1),[b,x]=(0,c.useState)(l!==`initial`);(0,c.useEffect)(()=>{l===`initial`&&!y.current&&(y.current=!0,requestAnimationFrame(()=>{x(!0)}))},[l]);let S=u===`exit`?`exit`:b?`animate`:`initial`,C=t===`character`?e.split(``):[e],w=i+(C.length-1)*r;(0,c.useEffect)(()=>{if(S===`animate`&&p.current){let c=p.current;_.current=q(w),v.current=`enter-${e.slice(0,10)}-${Date.now()}`,Y.startAnimation(v.current,`enter`,e,w);let l=W(c);h({type:`text-enter-start`,source:`SlidingText`,message:`Enter animation starting for: "${e}"`,timing:{startTime:_.current.start,expectedDuration:w},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:C.length,mode:t,direction:n,staggerDelay:r,duration:i,totalDuration:w,blur:o,widthAnimation:s}});let u=setTimeout(()=>{if(_.current&&v.current&&p.current){let t=_.current.end();Y.endAnimation(v.current);let n=W(p.current);h({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`}})}},w+50);return()=>clearTimeout(u)}},[S,e,t,n,r,i,a,o,s,w,C.length,h]),(0,c.useLayoutEffect)(()=>{if(!s||!p.current||!m.current)return;let e=p.current,t=m.current;if(S===`initial`)e.style.width=`0px`;else if(S===`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(S===`exit`){let t=e.getBoundingClientRect().width;e.style.width=`${t}px`,e.getBoundingClientRect(),e.style.width=`0px`,e.style.transition=`width ${g.DURATION_EXIT}ms ${g.EASING_EXIT}`}},[S,s,i,a,e]);let T=e=>{let t=e*r,s=S===`exit`,c=s?g.DURATION_EXIT:i,l=s?g.EASING_EXIT:a;return{transition:`
|
|
556
556
|
opacity ${c}ms ${l} ${t}ms,
|
|
557
557
|
transform ${c}ms ${l} ${t}ms,
|
|
558
558
|
filter ${c}ms ${l} ${t}ms
|
|
559
|
-
`,"--blur-amount":o?`${_.BLUR_AMOUNT}px`:`0px`,"--offset":n===`vertical`?`${_.OFFSET_VERTICAL}px`:`${_.OFFSET_HORIZONTAL}px`}};return(0,l.jsx)(`div`,{ref:m,className:`waapi-sliding-text-container ${f}`,style:p,children:(0,l.jsx)(`div`,{ref:h,className:`waapi-sliding-text-content waapi-direction-${n}`,children:w.map((e,t)=>(0,l.jsx)(`span`,{className:`waapi-sliding-text-token ${C===`initial`?`enter-from`:C===`animate`?`enter-to`:`exit-active`}`,style:E(t),children:e},t))})})},ge=e=>{let{logEvent:t}=G(),n=(0,c.useRef)(t);(0,c.useEffect)(()=>{n.current=t},[t]);let r=(0,c.useRef)(e);(0,c.useEffect)(()=>{r.current=e},[e]);let i=(0,c.useRef)(new Map),a=(0,c.useRef)(new Map),o=(0,c.useRef)({animatingIds:new Set,positions:new Map,separatorStates:new Map}),s=(0,c.useRef)(new Map),l=(0,c.useCallback)((e,t)=>{t?i.current.set(e,t):i.current.delete(e)},[]),u=(0,c.useCallback)(e=>{let t=new Map;return i.current.forEach((n,r)=>{if(!e.has(r)){let e=n.getBoundingClientRect();e.width>0&&e.height>0&&t.set(r,e)}}),o.current.positions=t,t},[]),d=(0,c.useCallback)(e=>{let t=s.current.get(e);t&&(t.forEach(e=>e.cancel()),s.current.delete(e))},[]),g=(0,c.useCallback)((e,t)=>{o.current.separatorStates.has(e)||o.current.separatorStates.set(e,{tokenId:e,isVisible:!0,isAnimating:!1,animationPhase:`idle`}),t?a.current.set(e,t):a.current.delete(e)},[]),_=(0,c.useCallback)(e=>o.current.separatorStates.get(e),[]),v=(0,c.useCallback)(async e=>{let t=a.current.get(e),i=o.current.separatorStates.get(e);if(!t){if(i){n.current({type:`separator-animation-state-only`,source:`useWAAPIAnimations.startSeparatorAnimation`,message:`Separator state exists but no DOM element for token: ${e} - marking as completed`,data:{tokenId:e,reason:`state-no-element`}}),i.animationPhase=`completed`,i.isVisible=!1;return}n.current({type:`separator-animation-skipped`,source:`useWAAPIAnimations.startSeparatorAnimation`,message:`No separator element found for token: ${e} - skipping animation`,data:{tokenId:e,reason:`no-separator-element`}});return}let s=r.current.exitDuration||f.EXIT_DURATION,c=r.current.exitEasing||h.EASE_IN_CUBIC,l={tokenId:e,isVisible:!0,isAnimating:!0,animationPhase:`exit-coordinated`,startTime:performance.now(),expectedEndTime:performance.now()+s};o.current.separatorStates.set(e,l);let u=`separator-${e}-${Date.now()}`;Y.startAnimation(u,`separator-exit`,e,s),n.current({type:`separator-animation-start`,source:`useWAAPIAnimations.startSeparatorAnimation`,message:`Separator animation starting for token: ${e}`,timing:{startTime:l.startTime||Date.now(),expectedDuration:s},data:{tokenId:e,duration:s}}),t.classList.add(`exit-coordinated`);let d=t.animate([{opacity:1,transform:`translateY(0) scale(1)`},{opacity:0,transform:`translateY(${p.OFFSET_Y_EXIT}px) scale(${p.SCALE_EXIT})`}],{duration:s,easing:c,fill:`forwards`});try{await d.finished}catch{return}l.animationPhase=`completed`,l.isVisible=!1,t.classList.add(`exit-completed`),Y.endAnimation(u),n.current({type:`separator-animation-complete`,source:`useWAAPIAnimations.startSeparatorAnimation`,message:`Separator animation complete for token: ${e}`,data:{tokenId:e,duration:s}})},[]),y=(0,c.useCallback)(e=>{Array.from(o.current.separatorStates.keys()).forEach(t=>{e.has(t)||(o.current.separatorStates.delete(t),n.current({type:`separator-state-cleanup`,source:`useWAAPIAnimations.cleanupSeparatorStates`,message:`Removed separator state for non-existent token: ${t}`,data:{tokenId:t}}))})},[]),b=(0,c.useCallback)(async(e,t)=>{let a=i.current.get(e);if(!a||o.current.animatingIds.has(e))return;o.current.animatingIds.add(e),u(new Set([e])),new Set([e,...t||[]]).forEach(e=>{v(e)});let c=r.current.exitDuration||f.EXIT_DURATION,l=r.current.exitEasing||h.EASE_IN_CUBIC,d=r.current.flipDuration||f.FLIP_DURATION,g=p.OFFSET_Y_EXIT,_=p.SCALE_EXIT,y=m.BLUR_EXIT,b=f.EXIT_STAGGER,x=a.getBoundingClientRect(),S=getComputedStyle(a),C=parseFloat(S.marginRight)||0,w=J(c),T=J(c+d),E=K(a),D=q(a),O=`exit-${e}-${Date.now()}`;Y.startAnimation(O,`exit-fade`,e,c);let k=`width-${e}-${Date.now()}`;Y.startAnimation(k,`width-collapse`,e,c),n.current({type:`animation-start-detailed`,source:`useWAAPIAnimations.startExit`,message:`Exit animation starting for: ${e}`,timing:{startTime:w.start,expectedDuration:c},styles:Object.entries(E).map(([e,t])=>({property:e,expected:t,actual:t,matches:!0})),position:{element:e,x:D.x,y:D.y,width:D.width,height:D.height},animation:{name:`exit`,phase:`start`,easing:l,fill:`forwards`},data:{id:e,capturedPositions:o.current.positions.size,wrapperWidth:x.width,marginRight:C,expectedFinalStyles:{opacity:`0`,transform:`translateY(${g}px) scale(${_})`,filter:`blur(${y}px)`,width:`0px`,marginRight:`0px`}}});let A=[],j=[],M=!1,N=a.querySelectorAll(`.sliding-text-token`);if(N.length>0)N.forEach((e,t)=>{let n=t*b,r=e.animate([{opacity:1,transform:`translateY(0) scale(1)`,filter:`blur(0px)`},{opacity:0,transform:`translateY(${g}px) scale(${_})`,filter:`blur(${y}px)`}],{duration:c,easing:l,delay:n,fill:`forwards`});A.push(r)});else{let e=a.animate([{opacity:1,transform:`translateY(0) scale(1)`},{opacity:0,transform:`translateY(${g}px) scale(${_})`}],{duration:c,easing:l,fill:`forwards`});A.push(e)}a.style.overflow=`hidden`;let P=a.animate([{width:`${x.width}px`,marginRight:`${C}px`},{width:`0px`,marginRight:`0px`}],{duration:c,easing:l,fill:`forwards`});A.push(P),s.current.set(e,A);let F=c*f.FLIP_DELAY_PERCENT,I=()=>{if(!M){if(M=!0,a.style.position=`absolute`,a.style.opacity=`0`,a.style.pointerEvents=`none`,Array.from(i.current.entries()).filter(([t])=>t!==e).length===0){n.current({type:`flip-skipped`,source:`useWAAPIAnimations.startExit`,message:`No remaining elements to FLIP - skipping animation`,data:{id:e}});return}i.current.forEach((t,r)=>{if(r===e)return;let i=o.current.positions.get(r);if(!i)return;let a=t.getBoundingClientRect(),s=i.left-a.left,c=i.top-a.top;if(Math.abs(s)<1&&Math.abs(c)<1)return;let l=`flip-${r}-${Date.now()}`;Y.startAnimation(l,`flip`,r,d),n.current({type:`flip-animation`,source:`useWAAPIAnimations.startExit`,message:`FLIP animation for: ${r}`,timing:{startTime:performance.now(),expectedDuration:d},position:{element:r,x:a.left,y:a.top,width:a.width,height:a.height,delta:{x:s,y:c}},animation:{name:`flip`,phase:`start`,easing:h.SPRING_GENTLE,fill:`none`},data:{id:r,deltaX:Math.round(s*100)/100,deltaY:Math.round(c*100)/100,prevPosition:{x:i.left,y:i.top,width:i.width,height:i.height},newPosition:{x:a.left,y:a.top,width:a.width,height:a.height}}});let u=t.animate([{transform:`translate3d(${s}px, ${c}px, 0)`},{transform:`translate3d(0, 0, 0)`}],{duration:d,easing:h.SPRING_GENTLE});u.onfinish=()=>{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(u)})}},L=setTimeout(I,F);try{let t=A.filter(e=>e!==P),r=P.finished;await Promise.all(t.map(e=>e.finished));let i=w.end();n.current({type:`exit-fade-complete`,source:`useWAAPIAnimations.startExit`,message:`Exit fade complete for: ${e}`,timing:{startTime:i.startTime,endTime:i.endTime,expectedDuration:i.expectedDuration,actualDuration:i.actualDuration,deviation:i.deviation,deviationPercent:i.deviationPercent},animation:{name:`exit-fade`,phase:`complete`,progress:1,easing:l},data:{id:e}}),I(),await Promise.all([...j.map(e=>e.finished.catch(()=>{})),r])}catch{clearTimeout(L),o.current.animatingIds.delete(e);return}Y.endAnimation(O),Y.endAnimation(k);let R=T.end(),z=q(a),B=ue({opacity:`0`,width:`0px`,marginRight:`0px`},a);n.current({type:`orchestration-complete`,source:`useWAAPIAnimations.startExit`,message:`Orchestration complete for: ${e}`,timing:{startTime:R.startTime,endTime:R.endTime,expectedDuration:R.expectedDuration,actualDuration:R.actualDuration,deviation:R.deviation,deviationPercent:R.deviationPercent},styles:B,position:{element:e,x:z.x,y:z.y,width:z.width,height:z.height},animation:{name:`orchestration`,phase:`complete`,progress:1,easing:l,fill:`forwards`},data:{id:e,choreographySummary: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`}}),o.current.animatingIds.delete(e),s.current.delete(e),i.current.delete(e),r.current.onComplete(e)},[u]),x=(0,c.useCallback)(e=>e?o.current.animatingIds.has(e):o.current.animatingIds.size>0,[]);return(0,c.useEffect)(()=>()=>{s.current.forEach(e=>{e.forEach(e=>e.cancel())}),s.current.clear()},[]),{registerElement:l,startExit:b,isAnimating:x,cancelAnimations:d,registerSeparator:g,getSeparatorState:_,startSeparatorAnimation:v,cleanupSeparatorStates:y}},_e=({tokens:e,placeholder:t=`No tokens`,maxVisible:n,textAnimationMode:r=`character`,textDirection:i=`vertical`,textStaggerDelay:a=15,separator:o=`, `,enableWidthAnimation:s=!1,className:u=``,tokenClassName:d=``,placeholderClassName:f=``,separatorClassName:p=``})=>{let{logEvent:m}=G(),h=(0,c.useRef)(!0),g=(0,c.useRef)(m);(0,c.useEffect)(()=>{g.current=m},[m]),(0,c.useEffect)(()=>(h.current=!0,g.current({type:`render`,source:`AnimatedTokens.mount`,message:`AnimatedTokens mounted`,data:{tokenCount:e.length}}),()=>{g.current({type:`component-unmounted`,source:`AnimatedTokens.unmount`,message:`AnimatedTokens UNMOUNTING`,data:{timestamp:Date.now()}}),h.current=!1}),[]);let[v,y]=(0,c.useState)(e),x=(0,c.useRef)(new Set),{registerElement:S,startExit:C,isAnimating:w,registerSeparator:T,getSeparatorState:E,cleanupSeparatorStates:D}=ge({onComplete:(0,c.useCallback)(e=>{h.current&&(g.current({type:`token-dom-remove`,source:`AnimatedTokens.onComplete`,message:`Token removed from DOM: ${e}`,data:{id:e}}),x.current.delete(e),y(t=>t.filter(t=>t.id!==e)))},[])}),O=(0,c.useRef)(C),k=(0,c.useRef)(E),A=(0,c.useRef)(D);(0,c.useEffect)(()=>{O.current=C,k.current=E,A.current=D},[C,E,D]);let j=v.filter(e=>!x.current.has(e.id)||!w(e.id)),M=n?v.slice(0,n):v,N=n?Math.max(0,j.length-n):0,P=(e,t)=>{if(t>=M.length-1)return!1;let n=k.current?.(e);if(!n)return!0;switch(n.animationPhase){case`idle`:case`exit-coordinated`:case`flip-coordinated`:return!0;case`completed`:return!1;default:return!0}};(0,c.useEffect)(()=>{let t=new Set(e.map(e=>e.id)),r=new Set(v.map(e=>e.id)),i=new Set(M.map(e=>e.id));A.current?.(i);let a=v.filter(e=>!t.has(e.id)&&!x.current.has(e.id)),o=e.filter(e=>!r.has(e.id));if(!(a.length===0&&o.length===0)&&(g.current({type:`render`,source:`AnimatedTokens.useEffect`,message:`Token sync`,data:{currentTokens:e.map(e=>e.id),displayTokens:v.map(e=>e.id),removed:a.map(e=>e.id),added:o.map(e=>e.id),animating:Array.from(x.current)}}),a.forEach(e=>{let t=v.findIndex(t=>t.id===e.id);if(n!==void 0&&t>=n)g.current({type:`overflow-token-remove`,source:`AnimatedTokens.useEffect`,message:`Removing overflow token without animation`,data:{id:e.id}}),y(t=>t.filter(t=>t.id!==e.id));else{let t=[],r=v.slice(0,n),i=r.findIndex(t=>t.id===e.id),a=i<r.length-1;if(i===r.length-1&&i>0){let e=r[i-1];e&&t.push(e.id)}g.current({type:`token-remove`,source:`AnimatedTokens.useEffect`,message:`Token marked for exit: ${e.text}`,data:{id:e.id,text:e.text,additionalSeparators:t,shouldAnimateOwnSeparator:a,wasLastVisible:i===r.length-1}}),x.current.add(e.id);let o=a?[e.id,...t]:t;O.current(e.id,o)}}),o.length>0)){o.forEach(e=>{g.current({type:`token-add`,source:`AnimatedTokens.useEffect`,message:`New token detected: ${e.text}`,data:{id:e.id,text:e.text}})}),o.forEach(t=>{let r=e.findIndex(e=>e.id===t.id);(n?r<Math.min(n,e.length)-1:r<e.length-1)&&T(t.id,null)});let r=v.filter(e=>!t.has(e.id)),i=[...e];r.forEach(e=>{let t=v.findIndex(t=>t.id===e.id);t!==-1&&t<=i.length&&i.splice(t,0,e)}),JSON.stringify(i.map(e=>e.id))!==JSON.stringify(v.map(e=>e.id))&&y(i)}},[e,n]);let F=(0,c.useRef)(0),I=N>0&&F.current===0,L=N===0&&F.current>0;(0,c.useEffect)(()=>{F.current=N},[N]);let R=v.length===0&&!w()&&!!t;return(0,l.jsxs)(`div`,{className:`waapi-animated-tokens-container ${u}`,children:[R&&(0,l.jsx)(X,{text:t,mode:b.placeholder.mode,direction:b.placeholder.direction,blur:b.placeholder.blur,duration:b.placeholder.duration,initial:`initial`,animate:`animate`,className:`waapi-token-placeholder ${f}`},`placeholder`),M.map((e,t)=>{let n=x.current.has(e.id),c=P(e.id,t);return(0,l.jsxs)(`div`,{className:`waapi-token-wrapper ${d} ${n?`exit-active`:``}`,ref:t=>S(e.id,t),children:[(0,l.jsx)(X,{text:e.text,mode:n?`none`:r,direction:i,staggerDelay:a,duration:_.DURATION_ENTER,blur:b.newToken.blur,widthAnimation:!n&&s,initial:n?!1:`initial`,animate:`animate`}),c&&(0,l.jsx)(`span`,{className:`waapi-token-separator ${p}`,ref:t=>T(e.id,t),children:o})]},e.id)}),(N>0||L)&&(0,l.jsxs)(`div`,{className:`waapi-token-overflow ${d} ${I?`entering`:``} ${L?`exiting`:``}`,ref:e=>S(`overflow-counter`,e),children:[M.length>0&&(0,l.jsx)(`span`,{className:`waapi-token-separator ${p}`,children:o}),(0,l.jsx)(`span`,{className:`waapi-token-separator ${p}`,children:`+`}),(0,l.jsx)(W,{value:N,duration:_.DURATION_ENTER,fontSize:`inherit`,fontWeight:`inherit`,color:`inherit`}),(0,l.jsx)(X,{text:` more`,mode:r,direction:i,staggerDelay:a,duration:L?_.DURATION_EXIT:_.DURATION_ENTER,blur:b.newToken.blur,initial:I?`initial`:!1,animate:`animate`})]})]})};function ve(e){let t=(0,c.useRef)(new Map),n=(0,c.useRef)(e);return(0,c.useEffect)(()=>{n.current=e},[e]),{register:(0,c.useCallback)((e,r)=>{r?(t.current.set(e,r),n.current?.onRegister?.(e,r)):t.current.has(e)&&(t.current.delete(e),n.current?.onUnregister?.(e))},[]),unregister:(0,c.useCallback)(e=>{t.current.has(e)&&(t.current.delete(e),n.current?.onUnregister?.(e))},[]),get:(0,c.useCallback)(e=>t.current.get(e),[]),getAll:(0,c.useCallback)(()=>new Map(t.current),[]),has:(0,c.useCallback)(e=>t.current.has(e),[]),clear:(0,c.useCallback)(()=>{let e=Array.from(t.current.keys());t.current.clear(),e.forEach(e=>n.current?.onUnregister?.(e))},[]),get size(){return t.current.size}}}const ye=f.MIN_DELTA_PX;function be(e,t){let n=(0,c.useRef)(new Map),r=t?.minDeltaPx??ye;return{capture:(0,c.useCallback)(t=>{let r=new Map;return e().forEach((e,n)=>{if(t?.has(n))return;let i=e.getBoundingClientRect();i.width>0&&i.height>0&&r.set(n,i)}),n.current=r,r},[e]),getPosition:(0,c.useCallback)(e=>n.current.get(e),[]),calculateDeltas:(0,c.useCallback)((e,t)=>{let n=new Map;return t.forEach((t,i)=>{let a=e.get(i);if(!a)return;let o=a.left-t.left,s=a.top-t.top,c=a.width-t.width,l=a.height-t.height,u=Math.abs(o)>=r||Math.abs(s)>=r||Math.abs(c)>=r||Math.abs(l)>=r;n.set(i,{id:i,deltaX:o,deltaY:s,deltaWidth:c,deltaHeight:l,isSignificant:u})}),n},[r]),getLastCapture:(0,c.useCallback)(()=>new Map(n.current),[]),clear:(0,c.useCallback)(()=>{n.current.clear()},[])}}const xe=f.FLIP_DURATION,Se=h.SPRING_GENTLE;function Ce(){let e=(0,c.useRef)(new Map),t=(0,c.useRef)(new Set),n=(0,c.useCallback)((n,r,i)=>{let a=i?.duration??xe,o=i?.easing??Se;e.current.has(r.id)&&e.current.get(r.id)?.cancel(),t.current.add(r.id),i?.onStart?.(r.id);let s=n.animate([{transform:`translate3d(${r.deltaX}px, ${r.deltaY}px, 0)`},{transform:`translate3d(0, 0, 0)`}],{duration:a,easing:o});return e.current.set(r.id,s),s.onfinish=()=>{t.current.delete(r.id),e.current.delete(r.id),i?.onComplete?.(r.id)},s.oncancel=()=>{t.current.delete(r.id),e.current.delete(r.id)},s},[]),r=(0,c.useCallback)(async(e,t,r)=>{let i=[];t.forEach((t,a)=>{if(!t.isSignificant)return;let o=e.get(a);if(!o)return;let s=n(o,t,r);i.push(s)}),i.length!==0&&await Promise.all(i.map(e=>e.finished.catch(()=>{})))},[n]),i=(0,c.useCallback)(n=>{let r=e.current.get(n);r&&(r.cancel(),e.current.delete(n),t.current.delete(n))},[]),a=(0,c.useCallback)(()=>{e.current.forEach(e=>e.cancel()),e.current.clear(),t.current.clear()},[]),o=(0,c.useCallback)(e=>e?t.current.has(e):t.current.size>0,[]);(0,c.useEffect)(()=>()=>{a()},[a]);let s=(0,c.useRef)({animate:n,animateAll:r,cancel:i,cancelAll:a,isAnimating:o});return s.current.animate=n,s.current.animateAll=r,s.current.cancel=i,s.current.cancelAll=a,s.current.isAnimating=o,s.current}function we(e){let t=(0,c.useRef)(e);(0,c.useEffect)(()=>{t.current=e},[e]);let{logEvent:n}=G(),r=(0,c.useRef)(n);(0,c.useEffect)(()=>{r.current=n},[n]);let i=(0,c.useRef)({animatingIds:new Set,positions:new Map,activeAnimations:new Map}),a=ve(),o=be(a.getAll,{minDeltaPx:e?.minDeltaPx??f.MIN_DELTA_PX}),s=Ce(),l=e?.exitDuration??f.EXIT_DURATION,u=e?.flipDuration??f.FLIP_DURATION,d=e?.exitEasing??h.EASE_IN_CUBIC,g=(0,c.useCallback)(e=>{let t=i.current.activeAnimations.get(e);t&&(t.forEach(e=>e.cancel()),i.current.activeAnimations.delete(e)),i.current.animatingIds.delete(e),s.cancel(e)},[s]),_=(0,c.useCallback)(()=>{i.current.activeAnimations.forEach(e=>{e.forEach(e=>e.cancel())}),i.current.activeAnimations.clear(),i.current.animatingIds.clear(),s.cancelAll()},[s]),v=e?.flipBehavior??`all`,y=e?.exitPositionStrategy??`absolute-fixed`,b=(0,c.useCallback)(async(e,n)=>{let r=a.get(e);if(!r||i.current.animatingIds.has(e))return;i.current.animatingIds.add(e);let o=n?.duration??l,s=n?.easing??d,c=a.getAll(),g=new Map,_=r.getBoundingClientRect();g.set(e,_),c.forEach((t,n)=>{if(n!==e){let e=t.getBoundingClientRect();e.width>0&&e.height>0&&g.set(n,e)}});let b=r.parentElement;r.dataset.reorderState=`exiting`,y===`absolute-fixed`&&(r.dataset.exitPosition=`absolute`);let x=b?.getBoundingClientRect()||{left:0,top:0},S=_.left-x.left,C=_.top-x.top;y===`absolute-fixed`&&(r.style.position=`absolute`,r.style.left=`${S}px`,r.style.top=`${C}px`,r.style.width=`${_.width}px`,r.style.height=`${_.height}px`,r.style.margin=`0`);let w=b?.getBoundingClientRect()||{left:0,top:0},T=w.left-x.left,E=w.top-x.top;(Math.abs(T)>.5||Math.abs(E)>.5)&&(r.style.transform=`translate(${-T}px, ${-E}px)`);let D=new Map;c.forEach((t,n)=>{if(n!==e){let e=t.getBoundingClientRect();e.width>0&&e.height>0&&D.set(n,e)}});let O=[];if(v!==`none`){let t=[];if(v===`all`)t=[...D.keys()];else if(v===`siblings-after`){let n=Array.from(c.entries());n.sort((e,t)=>{let n=e[1],r=t[1];return n.compareDocumentPosition(r)&Node.DOCUMENT_POSITION_FOLLOWING?-1:1});let r=n.map(([e])=>e),i=r.indexOf(e);i!==-1&&(t=r.slice(i+1).filter(e=>D.has(e)))}t.forEach(e=>{let t=g.get(e),n=D.get(e);if(!t||!n)return;let r=t.left-n.left,i=t.top-n.top;if(Math.abs(r)>1||Math.abs(i)>1){let t=c.get(e);if(t){t.dataset.reorderState=`flipping`,t.style.transform=`translate(${r}px, ${i}px)`;let e=t.animate([{transform:`translate(${r}px, ${i}px)`},{transform:`none`}],{duration:u,easing:h.MATERIAL_DECELERATE,fill:`forwards`});O.push(e),e.finished.then(()=>{t.style.transform=``,t.dataset.reorderState=`idle`}).catch(()=>{t.style.transform=``,t.dataset.reorderState=`idle`})}}})}let k=[],A=r.querySelectorAll(`.sliding-text-token`);if(A.length>0)A.forEach((e,t)=>{let n=t*f.EXIT_STAGGER,r=e.animate([{opacity:1,transform:`translateY(0) scale(1)`,filter:`blur(0px)`},{opacity:0,transform:`translateY(${p.OFFSET_Y_EXIT}px) scale(${p.SCALE_EXIT})`,filter:`blur(${m.BLUR_EXIT}px)`}],{duration:o,easing:s,delay:n,fill:`forwards`});k.push(r)});else{let e=r.animate([{opacity:1,transform:`scale(1)`},{opacity:0,transform:`scale(${p.SCALE_EXIT})`}],{duration:o,easing:s,fill:`forwards`});k.push(e)}i.current.activeAnimations.set(e,[...k,...O]);try{await Promise.all([...k.map(e=>e.finished),...O.map(e=>e.finished)])}catch{i.current.animatingIds.delete(e),i.current.activeAnimations.delete(e);return}i.current.animatingIds.delete(e),i.current.activeAnimations.delete(e),r.dataset.reorderState=`completed`,y===`absolute-fixed`&&(r.style.removeProperty(`position`),r.style.removeProperty(`left`),r.style.removeProperty(`top`),r.style.removeProperty(`width`),r.style.removeProperty(`height`),r.style.removeProperty(`margin`)),delete r.dataset.exitPosition,a.unregister(e),n?.onComplete?.(),t.current?.onExitComplete?.(e)},[a,l,d,u,v,y]),x=(0,c.useCallback)(async(e,n)=>{let r=a.get(e);if(!r)return;r.dataset.reorderState||(r.dataset.reorderState=`entering`);let i=t.current?.enterDuration??f.ENTER_DURATION,o=t.current?.enterEasing??h.MATERIAL_DECELERATE,s=n?.duration??i,c=n?.easing??o,l=n?.stagger??f.ENTER_STAGGER,u=r.querySelectorAll(`.sliding-text-token`),d=[],p={opacity:0,transform:`translateY(-8px) scale(0.95)`},g={opacity:1,transform:`none`};if(u.length>0)u.forEach((e,t)=>{let n=t*l;e.dataset.reorderIndex=String(t);let r=e.animate([{...p,filter:`blur(${m.BLUR_ENTER}px)`},{...g,filter:`blur(0px)`}],{duration:s,easing:c,delay:n,fill:`forwards`});d.push(r)});else{let e=r.animate([p,g],{duration:s,easing:c,fill:`forwards`});d.push(e)}try{await Promise.all(d.map(e=>e.finished))}catch{r.dataset.reorderState=`idle`;return}r.dataset.reorderState=`idle`,n?.onComplete?.(),t.current?.onEnterComplete?.(e)},[a]),S=(0,c.useCallback)(e=>e?i.current.animatingIds.has(e):i.current.animatingIds.size>0,[]),C=(0,c.useCallback)(e=>o.capture(e),[o]);return(0,c.useEffect)(()=>()=>{_()},[_]),{registry:a,positions:o,flip:s,registerElement:a.register,startExit:b,startEnter:x,isAnimating:S,cancelAnimation:g,cancelAllAnimations:_,capturePositions:C}}function Z(e){let{logEvent:t}=G(),n=(0,c.useRef)(t);(0,c.useEffect)(()=>{n.current=t},[t]);let r=we({enterDuration:e?.enterDuration,exitDuration:e?.exitDuration,flipDuration:e?.flipDuration,enterEasing:e?.enterEasing,exitEasing:e?.exitEasing,flipEasing:e?.flipEasing,flipBehavior:e?.flipBehavior,onExitComplete:e?.onComplete});return(0,c.useEffect)(()=>()=>{},[]),{...r,registerElement:r.registerElement,startItemExit:r.startExit,startItemEnter:r.startEnter}}function Te(e,t={}){let{autoAnimate:n=!0,stagger:r,enterDuration:i,exitDuration:a,flipDuration:o,enterEasing:s,exitEasing:l,flipEasing:u}=t,{logEvent:d}=G(),f=(0,c.useRef)(d);(0,c.useEffect)(()=>{f.current=d},[d]);let p=(0,c.useRef)(t);(0,c.useEffect)(()=>{p.current=t},[t]);let m=(0,c.useRef)(new Set),h=(0,c.useRef)(new Set),g=(0,c.useRef)(new Set),_=(0,c.useCallback)((e,t)=>r?typeof r==`number`?r*e:(r[t]??0)*e:0,[r]),v=Z({enterDuration:i,exitDuration:a,flipDuration:o,enterEasing:s,exitEasing:l,flipEasing:u,onComplete:(0,c.useCallback)(e=>{m.current.delete(e),p.current.onAnimationComplete?.(e)},[])}),y=(0,c.useMemo)(()=>{let t=new Set;return c.Children.forEach(e,e=>{(0,c.isValidElement)(e)&&e.key!=null&&t.add(String(e.key))}),t},[e]);(0,c.useLayoutEffect)(()=>{let e=g.current,t=[];y.forEach(n=>{!e.has(n)&&!h.current.has(n)&&t.push(n)}),t.length>0&&t.forEach((e,t)=>{let n=_(t,`enter`),r=()=>{h.current.add(e),p.current.onItemEnter?.(e),requestAnimationFrame(()=>{v.startItemEnter(e).then(()=>{h.current.delete(e)})})};n>0?setTimeout(r,n):r()}),g.current=new Set(y)},[y,n,v,_]);let b=(0,c.useCallback)(e=>{m.current.has(e)||v.registry.has(e)&&(m.current.add(e),p.current.onItemExit?.(e),v.startItemExit(e))},[v]),x=(0,c.useCallback)(e=>m.current.has(e),[]),S=(0,c.useCallback)(e=>h.current.has(e),[]),C=(0,c.useCallback)(()=>Array.from(m.current),[]),w=(0,c.useCallback)(()=>Array.from(h.current),[]),T=(0,c.useMemo)(()=>{let t=[];return c.Children.forEach(e,e=>{if(!(0,c.isValidElement)(e)){t.push(e);return}let n=e.key==null?null:String(e.key);n!=null&&m.current.has(n)?t.push((0,c.cloneElement)(e,{"data-reorder-state":`exiting`})):t.push(e)}),t},[e]);return(0,c.useEffect)(()=>()=>{},[]),{presentChildren:T,triggerExit:b,isExiting:x,isEntering:S,exitingIds:C(),enteringIds:w(),reorder:v}}function Ee(e,t){if(e!==void 0)return typeof e==`number`?e:e[t]}const De={auto:{position:`relative`},horizontal:{display:`flex`,flexDirection:`row`,flexWrap:`wrap`,alignItems:`center`,position:`relative`},"inline-horizontal":{display:`inline-flex`,flexDirection:`row`,flexWrap:`nowrap`,alignItems:`center`,position:`relative`},vertical:{display:`flex`,flexDirection:`column`,position:`relative`},grid:{display:`grid`,gridTemplateColumns:`repeat(auto-fill, minmax(100px, 1fr))`,gap:`8px`,position:`relative`}},Q=(0,c.forwardRef)(({children:e,autoAnimate:t=!0,stagger:n,duration:r,layout:i=`auto`,className:a=``,flipBehavior:o,exitPositionStrategy:s,onItemExit:u,onItemEnter:d},f)=>{let{logEvent:p}=G(),m=(0,c.useRef)(p);(0,c.useEffect)(()=>{m.current=p},[p]);let h=(0,c.useRef)(u),g=(0,c.useRef)(d);(0,c.useEffect)(()=>{h.current=u,g.current=d},[u,d]);let _=(0,c.useCallback)(e=>{C(t=>t.filter(t=>t.key!==e))},[]),v=Z({enterDuration:Ee(r,`enter`),exitDuration:Ee(r,`exit`),flipBehavior:o,exitPositionStrategy:s,onComplete:_});(0,c.useImperativeHandle)(f,()=>({startItemExit:v.startItemExit,startItemEnter:v.startItemEnter,isAnimating:v.isAnimating}),[v.startItemExit,v.startItemEnter,v.isAnimating]);let y=(0,c.useRef)(v.startItemExit),b=(0,c.useRef)(v.startItemEnter);(0,c.useEffect)(()=>{y.current=v.startItemExit,b.current=v.startItemEnter},[v.startItemExit,v.startItemEnter]);let x=(0,c.useMemo)(()=>{let t=[];return c.Children.forEach(e,e=>{(0,c.isValidElement)(e)&&e.key!=null&&t.push({key:String(e.key),element:e})}),t},[e]),[S,C]=(0,c.useState)(x),w=(0,c.useRef)(new Set),T=(0,c.useCallback)((e,t)=>n?typeof n==`number`?n*e:(n[t]??0)*e:0,[n]);(0,c.useEffect)(()=>{let e=new Set(x.map(e=>e.key)),t=new Set(S.map(e=>e.key)),n=S.filter(t=>!e.has(t.key)&&!w.current.has(t.key)),r=x.filter(e=>!t.has(e.key));if(n.length===0&&r.length===0){x.some(e=>{let t=S.find(t=>t.key===e.key);return t&&t.element!==e.element})&&C(e=>e.map(e=>w.current.has(e.key)?e:x.find(t=>t.key===e.key)??e));return}if(n.forEach((e,t)=>{let n=T(t,`exit`);w.current.add(e.key);let r=()=>{h.current?.(e.key),y.current(e.key).finally(()=>{w.current.delete(e.key)})};n>0?setTimeout(r,n):r()}),r.length>0){let t=S.filter(t=>!e.has(t.key)),n=[...x];t.forEach(e=>{let t=S.findIndex(t=>t.key===e.key);t!==-1&&t<=n.length&&n.splice(t,0,e)}),C(n),r.forEach((e,t)=>{let n=T(t,`enter`),r=()=>{g.current?.(e.key)};n>0?setTimeout(r,n):r()})}},[x,S,T]);let E=(0,c.useMemo)(()=>{let e=new Set(x.map(e=>e.key));return S.map(({key:t,element:n})=>{let r=!!e.has(t),i=w.current.has(t);return(0,c.cloneElement)(n,{ref:e=>{e?(v.registerElement(t,e),!e.dataset.reorderState&&r&&!i&&(e.dataset.reorderState=`entering`,b.current(t))):v.registerElement(t,null);let a=n.ref;typeof a==`function`?a(e):a&&typeof a==`object`&&(a.current=e)},"data-reorder-id":t})})},[S,x,v.registerElement]);return(0,l.jsx)(`div`,{className:`waapi-reorder-container reorder ${i===`auto`?``:`reorder--${i}`} ${a}`,style:De[i],children:E})});Q.displayName=`Reorder`;const Oe=()=>typeof navigator<`u`&&navigator.language?navigator.language:`en`;function ke(e,t={}){let{locale:n,type:r=`conjunction`,style:i=`long`,separator:a,hasOverflow:o}=t;return(0,c.useMemo)(()=>{if(e.length===0)return[];if(a!==void 0){let t=[];return e.forEach((n,r)=>{t.push({type:`element`,value:n,index:r}),r<e.length-1&&t.push({type:`literal`,value:a,index:r})}),t}let t=n??Oe();try{let n=new Intl.ListFormat(t,{type:r,style:i}),a=o&&e.length>1?[...e,``]:e,s=n.formatToParts(a),c=o?s.slice(0,-2):s,l=0;return c.map(e=>e.type===`element`?{type:`element`,value:e.value,index:l++}:{type:`literal`,value:e.value,index:Math.max(0,l-1)})}catch{let t=[];return e.forEach((n,r)=>{t.push({type:`element`,value:n,index:r}),r<e.length-1&&t.push({type:`literal`,value:`, `,index:r})}),t}},[e,n,r,i,a,o])}function Ae(e,t,n,r,i){let{minTokens:a,tokenGap:o,overflowIndicatorMinWidth:s}=r;if(i===0||t.length===0)return{maxVisible:0,fallbackToEllipsis:!1};let c=Math.max(n,s),l=y.SAFETY_MARGIN,u=e-c-l;if(u<(t[0]??r.estimatedTokenWidth))return{maxVisible:Math.max(a,1),fallbackToEllipsis:!0};let d=0,f=0;for(let e=0;e<t.length;e++){let n=t[e]+(e>0?o:0);if(d+n<=u)d+=n,f++;else break}return f>=i?{maxVisible:i,fallbackToEllipsis:!1}:{maxVisible:Math.max(f,a),fallbackToEllipsis:f<a}}function je({tokens:e,maxVisibleProp:t,inline:n,truncation:r}){let i=(0,c.useMemo)(()=>({mode:r?.mode??(t===void 0?`none`:`fixed`),estimatedTokenWidth:r?.estimatedTokenWidth??y.ESTIMATED_TOKEN_WIDTH,overflowIndicatorMinWidth:r?.overflowIndicatorMinWidth??y.OVERFLOW_INDICATOR_MIN_WIDTH,minTokens:r?.minTokens??y.MIN_TOKENS,tokenGap:r?.tokenGap??y.TOKEN_GAP,resizeDebounce:r?.resizeDebounce??y.RESIZE_DEBOUNCE}),[r,t]),a=i.mode===`responsive`&&n,o=(0,c.useRef)(null),s=(0,c.useRef)(null),l=(0,c.useRef)(new Map),[u,d]=(0,c.useState)(()=>t===void 0?e.length:t),[f,p]=(0,c.useState)(!1),m=(0,c.useCallback)(()=>{if(!a||!o.current)return;let n=o.current.getBoundingClientRect().width,r=i.overflowIndicatorMinWidth;if(s.current){let e=s.current.getBoundingClientRect().width;r=Math.max(e,i.overflowIndicatorMinWidth)}let c=Ae(n,e.map(e=>{let t=l.current.get(e.id);return t?t.getBoundingClientRect().width:i.estimatedTokenWidth}),r,i,e.length);d(t===void 0?c.maxVisible:Math.min(c.maxVisible,t)),p(c.fallbackToEllipsis)},[a,e,t,i]);return(0,c.useEffect)(()=>{if(!a||typeof ResizeObserver>`u`)return;let e=null,t=new ResizeObserver(()=>{e&&clearTimeout(e),e=setTimeout(m,i.resizeDebounce)});return o.current&&t.observe(o.current),()=>{e&&clearTimeout(e),t.disconnect()}},[a,m,i.resizeDebounce]),(0,c.useEffect)(()=>{a&&requestAnimationFrame(m)},[a,e,m]),{containerRef:o,overflowRef:s,tokenRefs:l,calculatedMaxVisible:a?u:t??e.length,isResponsive:a,fallbackToEllipsis:a?f:!1}}const Me=({text:e,transition:t,duration:n,className:r})=>{let i=(0,c.useRef)(e),[a,o]=(0,c.useState)(e),[s,u]=(0,c.useState)(!1),d=(0,c.useRef)(null);return(0,c.useLayoutEffect)(()=>()=>{d.current&&clearTimeout(d.current)},[]),(0,c.useLayoutEffect)(()=>{i.current!==e&&(t===`none`?(o(e),i.current=e):(d.current&&clearTimeout(d.current),u(!0),d.current=setTimeout(()=>{o(e),i.current=e,d.current=setTimeout(()=>{u(!1)},n/2)},n/2)))},[e,t,n]),t===`none`?(0,l.jsx)(`span`,{className:r,children:e}):t===`fade`?(0,l.jsx)(`span`,{className:r,style:{display:`inline`,whiteSpace:`pre`,opacity:s?.4:1,transition:`opacity ${n/2}ms ease-in-out`},children:a}):(0,l.jsx)(X,{text:a,mode:`word`,direction:`vertical`,duration:n,blur:!1,className:r},a)},Ne={listType:`conjunction`,listStyle:`long`,transition:`none`,duration:200},Pe={prefix:`+`,label:` more`,showSeparator:!0},Fe={mode:`character`,direction:`vertical`,stagger:15,duration:_.DURATION_ENTER,blur:!0,widthAnimation:!1},Ie=({tokens:e,placeholder:t=`No tokens`,maxVisible:n,separator:r,overflow:i,animation:a,inline:o=!1,truncation:s,className:u=``,tokenClassName:d=``,placeholderClassName:m=``})=>{let g={...Ne,...r},v={...Pe,...i},y={...Fe,...a},{containerRef:x,overflowRef:S,tokenRefs:C,calculatedMaxVisible:w,isResponsive:T,fallbackToEllipsis:E}=je({tokens:e,maxVisibleProp:n,inline:o,truncation:s}),{logEvent:D}=G(),O=(0,c.useRef)(D);(0,c.useEffect)(()=>{O.current=D},[D]);let k=(0,c.useRef)(new Set),A=(0,c.useRef)(new Map),j=(0,c.useRef)(new Map),M=(0,c.useMemo)(()=>w&&w<e.length?e.slice(0,w):e,[e,w]),N=(0,c.useMemo)(()=>w&&w<e.length?Math.max(0,e.length-w):0,[e.length,w]),P=ke(M.map(e=>e.text),{locale:g.locale,type:g.listType,style:g.listStyle,separator:g.value,hasOverflow:N>0}),F=(0,c.useRef)(0),I=N>0&&F.current===0,L=N===0&&F.current>0;(0,c.useEffect)(()=>{F.current=N},[N]);let R=(0,c.useCallback)((e,t)=>{if(t>=M.length-1)return!1;let n=A.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}},[M.length]);(0,c.useEffect)(()=>{let e=new Set(M.map(e=>e.id));for(let t of A.current.keys())e.has(t)||A.current.delete(t);M.forEach((e,t)=>{if(t<M.length-1){let t=A.current.get(e.id);(!t||t.animationPhase===`completed`)&&A.current.set(e.id,{animationPhase:`idle`})}else A.current.delete(e.id)})},[M]);let z=(0,c.useCallback)(e=>{let t=j.current.get(e);t&&(A.current.set(e,{animationPhase:`exit-coordinated`}),t.dataset.separatorState=`exiting`,t.animate([{opacity:1,transform:`translateY(0) scale(1)`},{opacity:0,transform:`translateY(${p.OFFSET_Y_EXIT}px) scale(${p.SCALE_EXIT})`}],{duration:f.EXIT_DURATION,easing:h.EASE_IN_CUBIC,fill:`forwards`}).finished.then(()=>{A.current.set(e,{animationPhase:`completed`}),t.dataset.separatorState=`completed`}).catch(()=>{A.current.delete(e)}))},[]),B=(0,c.useCallback)(e=>{k.current.add(e);let t=[],n=M.findIndex(t=>t.id===e);if(n===M.length-1&&n>0){let e=M[n-1];e&&t.push(e.id)}z(e),t.forEach(e=>z(e)),O.current({type:`token-remove`,source:`TextFlow`,message:`Token exiting: ${e}`,data:{id:e,additionalSeparators:t}})},[M,z]),V=(0,c.useCallback)(e=>{O.current({type:`token-add`,source:`TextFlow`,message:`Token entering: ${e}`,data:{id:e}})},[]),H=e.length===0&&!!t,U=(0,c.useMemo)(()=>P.map((e,t)=>{if(e.type===`element`){let t=M[e.index];if(!t)return null;let n=k.current.has(t.id);return(0,l.jsx)(`span`,{ref:e=>{e?C.current.set(t.id,e):C.current.delete(t.id)},className:`waapi-token-wrapper ${d}`,"data-reorder-id":t.id,children:(0,l.jsx)(X,{text:t.text,mode:n?`none`:y.mode,direction:y.direction,staggerDelay:y.stagger,duration:y.duration,blur:y.blur?b.newToken.blur:!1,widthAnimation:!n&&y.widthAnimation,initial:n?!1:`initial`,animate:`animate`})},t.id)}let n=M[e.index];if(!n)return null;let r=e.index;if(!R(n.id,r))return null;let i=`sep-${n.id}`;return(0,l.jsx)(`span`,{ref:e=>{e?j.current.set(n.id,e):j.current.delete(n.id)},className:`waapi-token-separator ${g.className??``}`,"data-separator-state":A.current.get(n.id)?.animationPhase??`idle`,children:(0,l.jsx)(Me,{text:e.value,transition:g.transition,duration:g.duration})},i)}).filter(Boolean),[P,M,d,y,g,R]),ee=(0,c.useMemo)(()=>N===0?null:(0,l.jsxs)(`div`,{"data-reorder-id":`overflow-counter`,className:`waapi-token-overflow ${v.className??``} ${I?`entering`:``} ${L?`exiting`:``}`,children:[v.showSeparator&&v.separator&&(0,l.jsx)(`span`,{className:`waapi-token-separator ${g.className??``}`,children:v.separator}),v.prefix!==``&&(0,l.jsx)(`span`,{className:`waapi-token-separator ${g.className??``}`,children:v.prefix}),(0,l.jsx)(W,{value:N,duration:y.duration,fontSize:`inherit`,fontWeight:`inherit`,color:`inherit`}),v.label&&v.label!==``&&(0,l.jsx)(X,{text:v.label,mode:y.mode,direction:y.direction,staggerDelay:y.stagger,duration:L?_.DURATION_EXIT:y.duration,blur:y.blur?b.newToken.blur:!1,initial:I?`initial`:!1,animate:`animate`})]},`overflow-counter`),[N,I,L,v,g.className,y]);return(0,l.jsxs)(`div`,{ref:x,role:`text`,className:`waapi-animated-tokens-container waapi-v2 ${o?`waapi-animated-tokens-container--inline`:``} ${E?`waapi-animated-tokens-container--ellipsis`:``} ${u}`,children:[T&&N>0&&(0,l.jsxs)(`div`,{ref:S,className:`waapi-overflow-measure`,"aria-hidden":`true`,children:[v.prefix,e.length-w,v.label]}),H&&(0,l.jsx)(X,{text:t,mode:b.placeholder.mode,direction:b.placeholder.direction,blur:b.placeholder.blur,duration:b.placeholder.duration,initial:`initial`,animate:`animate`,className:`waapi-token-placeholder ${m}`},`placeholder`),(0,l.jsxs)(Q,{layout:o?`inline-horizontal`:`horizontal`,onItemExit:B,onItemEnter:V,children:[U,ee]})]})},$=(0,c.createContext)(null);function Le(){let e=(0,c.useContext)($);if(!e)throw Error(`useMorphContext must be used within a <Morph> component. Wrap your morphable components with <Morph>.`);return e}const Re=f.FLIP_DURATION,ze=h.EASE_OUT_CUBIC;function Be(e){let[t,n]=(0,c.useState)(!1),r=(0,c.useRef)([]),i=(0,c.useRef)(e);(0,c.useEffect)(()=>{i.current=e},[e]);let a=(0,c.useCallback)(()=>{r.current.forEach(e=>e.cancel()),r.current=[],n(!1)},[]),o=(0,c.useCallback)(async(e,o)=>{t&&a(),n(!0);let s=i.current?.duration??Re,c=i.current?.easing??ze,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||Ve(h,l),v=i.current?.clipPathEnd||Ve(g,u),y={position:e.style.position,opacity:e.style.opacity,pointerEvents:e.style.pointerEvents},b={position:o.style.position,opacity:o.style.opacity,transform:o.style.transform,clipPath:o.style.clipPath};e.style.position=`absolute`,e.style.pointerEvents=`none`,o.style.position=`relative`,o.style.transform=`translate(${d}px, ${f}px) scale(${p}, ${m})`,o.style.clipPath=_,o.style.opacity=`0`;let x=e.animate([{opacity:1},{opacity:0}],{duration:s*.5,easing:c,fill:`forwards`}),S=o.animate([{opacity:0},{opacity:1}],{duration:s*.5,delay:s*.25,easing:c,fill:`forwards`}),C=o.animate([{transform:`translate(${d}px, ${f}px) scale(${p}, ${m})`,clipPath:_},{transform:`translate(0, 0) scale(1, 1)`,clipPath:v}],{duration:s,easing:c,fill:`forwards`});r.current=[x,S,C];try{await Promise.all([x.finished,S.finished,C.finished])}catch{Object.assign(e.style,y),Object.assign(o.style,b),n(!1);return}Object.assign(e.style,y),o.style.transform=``,o.style.clipPath=``,o.style.opacity=`1`,r.current=[],n(!1)},[t,a]);return(0,c.useEffect)(()=>()=>{a()},[a]),{isMorphing:t,morph:o,cancel:a}}function Ve(e,t){let n=parseFloat(e)||0;return`inset(0 round ${n/t.width*100}% ${n/t.height*100}%)`}const He=f.FLIP_DURATION,Ue=h.MATERIAL_STANDARD;function We(e){let[t,n]=(0,c.useState)(!1),r=(0,c.useRef)(null),i=(0,c.useRef)(e),a=i.current?.duration??He,o=i.current?.easing??Ue,s=(0,c.useCallback)(()=>{r.current&&(r.current.style.transition=`grid-template-rows ${a}ms ${o}`)},[a,o]),l=(0,c.useCallback)(()=>{s(),r.current&&(r.current.style.gridTemplateRows=`1fr`),n(!0)},[s]),u=(0,c.useCallback)(()=>{s(),r.current&&(r.current.style.gridTemplateRows=`0fr`),n(!1)},[s]);return{isExpanded:t,expand:l,collapse:u,toggle:(0,c.useCallback)(()=>{t?u():l()},[t,l,u]),containerRef:r}}function Ge(e){let t=(0,c.useRef)(e),n=(0,c.useRef)(e?.types||[]),r=(0,c.useMemo)(()=>typeof document>`u`?!1:`startViewTransition`in document,[]),i=(0,c.useCallback)(e=>{n.current=e},[]);return{isSupported:r,startTransition:(0,c.useCallback)(async e=>{if(!document.startViewTransition){await e();return}let n=t.current?.name,r=(()=>{if(n){let e=document.createElement(`style`);return e.id=`view-transition-${n}`,e.textContent=`
|
|
559
|
+
`,"--blur-amount":o?`${g.BLUR_AMOUNT}px`:`0px`,"--offset":n===`vertical`?`${g.OFFSET_VERTICAL}px`:`${g.OFFSET_HORIZONTAL}px`}};return c.default.createElement(`div`,{ref:p,className:`waapi-sliding-text-container ${d}`,style:f},c.default.createElement(`div`,{ref:m,className:`waapi-sliding-text-content waapi-direction-${n}`},C.map((e,t)=>c.default.createElement(`span`,{key:t,className:`waapi-sliding-text-token ${S===`initial`?`enter-from`:S===`animate`?`enter-to`:`exit-active`}`,style:T(t)},e))))},me=e=>{let{logEvent:t}=H(),n=(0,c.useRef)(t);(0,c.useEffect)(()=>{n.current=t},[t]);let r=(0,c.useRef)(e);(0,c.useEffect)(()=>{r.current=e},[e]);let i=(0,c.useRef)(new Map),a=(0,c.useRef)(new Map),o=(0,c.useRef)({animatingIds:new Set,positions:new Map,separatorStates:new Map}),s=(0,c.useRef)(new Map),l=(0,c.useCallback)((e,t)=>{t?i.current.set(e,t):i.current.delete(e)},[]),u=(0,c.useCallback)(e=>{let t=new Map;return i.current.forEach((n,r)=>{if(!e.has(r)){let e=n.getBoundingClientRect();e.width>0&&e.height>0&&t.set(r,e)}}),o.current.positions=t,t},[]),h=(0,c.useCallback)(e=>{let t=s.current.get(e);t&&(t.forEach(e=>e.cancel()),s.current.delete(e))},[]),g=(0,c.useCallback)((e,t)=>{o.current.separatorStates.has(e)||o.current.separatorStates.set(e,{tokenId:e,isVisible:!0,isAnimating:!1,animationPhase:`idle`}),t?a.current.set(e,t):a.current.delete(e)},[]),_=(0,c.useCallback)(e=>o.current.separatorStates.get(e),[]),v=(0,c.useCallback)(async e=>{let t=a.current.get(e),i=o.current.separatorStates.get(e);if(!t){if(i){n.current({type:`separator-animation-state-only`,source:`useWAAPIAnimations.startSeparatorAnimation`,message:`Separator state exists but no DOM element for token: ${e} - marking as completed`,data:{tokenId:e,reason:`state-no-element`}}),i.animationPhase=`completed`,i.isVisible=!1;return}n.current({type:`separator-animation-skipped`,source:`useWAAPIAnimations.startSeparatorAnimation`,message:`No separator element found for token: ${e} - skipping animation`,data:{tokenId:e,reason:`no-separator-element`}});return}let s=r.current.exitDuration||d.EXIT_DURATION,c=r.current.exitEasing||m.EASE_IN_CUBIC,l={tokenId:e,isVisible:!0,isAnimating:!0,animationPhase:`exit-coordinated`,startTime:performance.now(),expectedEndTime:performance.now()+s};o.current.separatorStates.set(e,l);let u=`separator-${e}-${Date.now()}`;Y.startAnimation(u,`separator-exit`,e,s),n.current({type:`separator-animation-start`,source:`useWAAPIAnimations.startSeparatorAnimation`,message:`Separator animation starting for token: ${e}`,timing:{startTime:l.startTime||Date.now(),expectedDuration:s},data:{tokenId:e,duration:s}}),t.classList.add(`exit-coordinated`);let p=t.animate([{opacity:1,transform:`translateY(0) scale(1)`},{opacity:0,transform:`translateY(${f.OFFSET_Y_EXIT}px) scale(${f.SCALE_EXIT})`}],{duration:s,easing:c,fill:`forwards`});try{await p.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:s}})},[]),y=(0,c.useCallback)(e=>{Array.from(o.current.separatorStates.keys()).forEach(t=>{e.has(t)||(o.current.separatorStates.delete(t),n.current({type:`separator-state-cleanup`,source:`useWAAPIAnimations.cleanupSeparatorStates`,message:`Removed separator state for non-existent token: ${t}`,data:{tokenId:t}}))})},[]),b=(0,c.useCallback)(async(e,t)=>{let a=i.current.get(e);if(!a||o.current.animatingIds.has(e))return;o.current.animatingIds.add(e),u(new Set([e])),new Set([e,...t||[]]).forEach(e=>{v(e)});let c=r.current.exitDuration||d.EXIT_DURATION,l=r.current.exitEasing||m.EASE_IN_CUBIC,h=r.current.flipDuration||d.FLIP_DURATION,g=f.OFFSET_Y_EXIT,_=f.SCALE_EXIT,y=p.BLUR_EXIT,b=d.EXIT_STAGGER,x=a.getBoundingClientRect(),S=getComputedStyle(a),C=parseFloat(S.marginRight)||0,w=q(c),T=q(c+h),E=U(a),D=W(a),O=`exit-${e}-${Date.now()}`;Y.startAnimation(O,`exit-fade`,e,c);let k=`width-${e}-${Date.now()}`;Y.startAnimation(k,`width-collapse`,e,c),n.current({type:`animation-start-detailed`,source:`useWAAPIAnimations.startExit`,message:`Exit animation starting for: ${e}`,timing:{startTime:w.start,expectedDuration:c},styles:Object.entries(E).map(([e,t])=>({property:e,expected:t,actual:t,matches:!0})),position:{element:e,x:D.x,y:D.y,width:D.width,height:D.height},animation:{name:`exit`,phase:`start`,easing:l,fill:`forwards`},data:{id:e,capturedPositions:o.current.positions.size,wrapperWidth:x.width,marginRight:C,expectedFinalStyles:{opacity:`0`,transform:`translateY(${g}px) scale(${_})`,filter:`blur(${y}px)`,width:`0px`,marginRight:`0px`}}});let A=[],j=[],M=!1,N=a.querySelectorAll(`.sliding-text-token`);if(N.length>0)N.forEach((e,t)=>{let n=t*b,r=e.animate([{opacity:1,transform:`translateY(0) scale(1)`,filter:`blur(0px)`},{opacity:0,transform:`translateY(${g}px) scale(${_})`,filter:`blur(${y}px)`}],{duration:c,easing:l,delay:n,fill:`forwards`});A.push(r)});else{let e=a.animate([{opacity:1,transform:`translateY(0) scale(1)`},{opacity:0,transform:`translateY(${g}px) scale(${_})`}],{duration:c,easing:l,fill:`forwards`});A.push(e)}a.style.overflow=`hidden`;let P=a.animate([{width:`${x.width}px`,marginRight:`${C}px`},{width:`0px`,marginRight:`0px`}],{duration:c,easing:l,fill:`forwards`});A.push(P),s.current.set(e,A);let F=c*d.FLIP_DELAY_PERCENT,I=()=>{if(!M){if(M=!0,a.style.position=`absolute`,a.style.opacity=`0`,a.style.pointerEvents=`none`,Array.from(i.current.entries()).filter(([t])=>t!==e).length===0){n.current({type:`flip-skipped`,source:`useWAAPIAnimations.startExit`,message:`No remaining elements to FLIP - skipping animation`,data:{id:e}});return}i.current.forEach((t,r)=>{if(r===e)return;let i=o.current.positions.get(r);if(!i)return;let a=t.getBoundingClientRect(),s=i.left-a.left,c=i.top-a.top;if(Math.abs(s)<1&&Math.abs(c)<1)return;let l=`flip-${r}-${Date.now()}`;Y.startAnimation(l,`flip`,r,h),n.current({type:`flip-animation`,source:`useWAAPIAnimations.startExit`,message:`FLIP animation for: ${r}`,timing:{startTime:performance.now(),expectedDuration:h},position:{element:r,x:a.left,y:a.top,width:a.width,height:a.height,delta:{x:s,y:c}},animation:{name:`flip`,phase:`start`,easing:m.SPRING_GENTLE,fill:`none`},data:{id:r,deltaX:Math.round(s*100)/100,deltaY:Math.round(c*100)/100,prevPosition:{x:i.left,y:i.top,width:i.width,height:i.height},newPosition:{x:a.left,y:a.top,width:a.width,height:a.height}}});let u=t.animate([{transform:`translate3d(${s}px, ${c}px, 0)`},{transform:`translate3d(0, 0, 0)`}],{duration:h,easing:m.SPRING_GENTLE});u.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(u)})}},L=setTimeout(I,F);try{let t=A.filter(e=>e!==P),r=P.finished;await Promise.all(t.map(e=>e.finished));let i=w.end();n.current({type:`exit-fade-complete`,source:`useWAAPIAnimations.startExit`,message:`Exit fade complete for: ${e}`,timing:{startTime:i.startTime,endTime:i.endTime,expectedDuration:i.expectedDuration,actualDuration:i.actualDuration,deviation:i.deviation,deviationPercent:i.deviationPercent},animation:{name:`exit-fade`,phase:`complete`,progress:1,easing:l},data:{id:e}}),I(),await Promise.all([...j.map(e=>e.finished.catch(()=>{})),r])}catch{clearTimeout(L),o.current.animatingIds.delete(e);return}Y.endAnimation(O),Y.endAnimation(k);let R=T.end(),z=W(a),B=G({opacity:`0`,width:`0px`,marginRight:`0px`},a);n.current({type:`orchestration-complete`,source:`useWAAPIAnimations.startExit`,message:`Orchestration complete for: ${e}`,timing:{startTime:R.startTime,endTime:R.endTime,expectedDuration:R.expectedDuration,actualDuration:R.actualDuration,deviation:R.deviation,deviationPercent:R.deviationPercent},styles:B,position:{element:e,x:z.x,y:z.y,width:z.width,height:z.height},animation:{name:`orchestration`,phase:`complete`,progress:1,easing:l,fill:`forwards`},data:{id:e,choreographySummary: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`}}),o.current.animatingIds.delete(e),s.current.delete(e),i.current.delete(e),r.current.onComplete(e)},[u]),x=(0,c.useCallback)(e=>e?o.current.animatingIds.has(e):o.current.animatingIds.size>0,[]);return(0,c.useEffect)(()=>()=>{s.current.forEach(e=>{e.forEach(e=>e.cancel())}),s.current.clear()},[]),{registerElement:l,startExit:b,isAnimating:x,cancelAnimations:h,registerSeparator:g,getSeparatorState:_,startSeparatorAnimation:v,cleanupSeparatorStates:y}},he=({tokens:e,placeholder:t=`No tokens`,maxVisible:n,textAnimationMode:r=`character`,textDirection:i=`vertical`,textStaggerDelay:a=15,separator:o=`, `,enableWidthAnimation:s=!1,className:l=``,tokenClassName:u=``,placeholderClassName:d=``,separatorClassName:f=``})=>{let{logEvent:p}=H(),m=(0,c.useRef)(!0),h=(0,c.useRef)(p);(0,c.useEffect)(()=>{h.current=p},[p]),(0,c.useEffect)(()=>(m.current=!0,h.current({type:`render`,source:`AnimatedTokens.mount`,message:`AnimatedTokens mounted`,data:{tokenCount:e.length}}),()=>{h.current({type:`component-unmounted`,source:`AnimatedTokens.unmount`,message:`AnimatedTokens UNMOUNTING`,data:{timestamp:Date.now()}}),m.current=!1}),[]);let[_,y]=(0,c.useState)(e),b=(0,c.useRef)(new Set),{registerElement:x,startExit:S,isAnimating:C,registerSeparator:w,getSeparatorState:T,cleanupSeparatorStates:E}=me({onComplete:(0,c.useCallback)(e=>{m.current&&(h.current({type:`token-dom-remove`,source:`AnimatedTokens.onComplete`,message:`Token removed from DOM: ${e}`,data:{id:e}}),b.current.delete(e),y(t=>t.filter(t=>t.id!==e)))},[])}),D=(0,c.useRef)(S),O=(0,c.useRef)(T),k=(0,c.useRef)(E);(0,c.useEffect)(()=>{D.current=S,O.current=T,k.current=E},[S,T,E]);let A=_.filter(e=>!b.current.has(e.id)||!C(e.id)),j=n?_.slice(0,n):_,M=n?Math.max(0,A.length-n):0,N=(e,t)=>{if(t>=j.length-1)return!1;let n=O.current?.(e);if(!n)return!0;switch(n.animationPhase){case`idle`:case`exit-coordinated`:case`flip-coordinated`:return!0;case`completed`:return!1;default:return!0}};(0,c.useEffect)(()=>{let t=new Set(e.map(e=>e.id)),r=new Set(_.map(e=>e.id)),i=new Set(j.map(e=>e.id));k.current?.(i);let a=_.filter(e=>!t.has(e.id)&&!b.current.has(e.id)),o=e.filter(e=>!r.has(e.id));if(!(a.length===0&&o.length===0)&&(h.current({type:`render`,source:`AnimatedTokens.useEffect`,message:`Token sync`,data:{currentTokens:e.map(e=>e.id),displayTokens:_.map(e=>e.id),removed:a.map(e=>e.id),added:o.map(e=>e.id),animating:Array.from(b.current)}}),a.forEach(e=>{let t=_.findIndex(t=>t.id===e.id);if(n!==void 0&&t>=n)h.current({type:`overflow-token-remove`,source:`AnimatedTokens.useEffect`,message:`Removing overflow token without animation`,data:{id:e.id}}),y(t=>t.filter(t=>t.id!==e.id));else{let t=[],r=_.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)}h.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}}),b.current.add(e.id);let o=a?[e.id,...t]:t;D.current(e.id,o)}}),o.length>0)){o.forEach(e=>{h.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)&&w(t.id,null)});let r=_.filter(e=>!t.has(e.id)),i=[...e];r.forEach(e=>{let t=_.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(_.map(e=>e.id))&&y(i)}},[e,n]);let P=(0,c.useRef)(0),F=M>0&&P.current===0,I=M===0&&P.current>0;(0,c.useEffect)(()=>{P.current=M},[M]);let L=_.length===0&&!C()&&!!t;return c.default.createElement(`div`,{className:`waapi-animated-tokens-container ${l}`},L&&c.default.createElement(X,{key:`placeholder`,text:t,mode:v.placeholder.mode,direction:v.placeholder.direction,blur:v.placeholder.blur,duration:v.placeholder.duration,initial:`initial`,animate:`animate`,className:`waapi-token-placeholder ${d}`}),j.map((e,t)=>{let n=b.current.has(e.id),l=N(e.id,t);return c.default.createElement(`div`,{key:e.id,className:`waapi-token-wrapper ${u} ${n?`exit-active`:``}`,ref:t=>x(e.id,t)},c.default.createElement(X,{text:e.text,mode:n?`none`:r,direction:i,staggerDelay:a,duration:g.DURATION_ENTER,blur:v.newToken.blur,widthAnimation:!n&&s,initial:n?!1:`initial`,animate:`animate`}),l&&c.default.createElement(`span`,{className:`waapi-token-separator ${f}`,ref:t=>w(e.id,t)},o))}),(M>0||I)&&c.default.createElement(`div`,{className:`waapi-token-overflow ${u} ${F?`entering`:``} ${I?`exiting`:``}`,ref:e=>x(`overflow-counter`,e)},j.length>0&&c.default.createElement(`span`,{className:`waapi-token-separator ${f}`},o),c.default.createElement(`span`,{className:`waapi-token-separator ${f}`},`+`),c.default.createElement(V,{value:M,duration:g.DURATION_ENTER,fontSize:`inherit`,fontWeight:`inherit`,color:`inherit`}),c.default.createElement(X,{text:` more`,mode:r,direction:i,staggerDelay:a,duration:I?g.DURATION_EXIT:g.DURATION_ENTER,blur:v.newToken.blur,initial:F?`initial`:!1,animate:`animate`})))};function ge(e){let t=(0,c.useRef)(new Map),n=(0,c.useRef)(e);return(0,c.useEffect)(()=>{n.current=e},[e]),{register:(0,c.useCallback)((e,r)=>{r?(t.current.set(e,r),n.current?.onRegister?.(e,r)):t.current.has(e)&&(t.current.delete(e),n.current?.onUnregister?.(e))},[]),unregister:(0,c.useCallback)(e=>{t.current.has(e)&&(t.current.delete(e),n.current?.onUnregister?.(e))},[]),get:(0,c.useCallback)(e=>t.current.get(e),[]),getAll:(0,c.useCallback)(()=>new Map(t.current),[]),has:(0,c.useCallback)(e=>t.current.has(e),[]),clear:(0,c.useCallback)(()=>{let e=Array.from(t.current.keys());t.current.clear(),e.forEach(e=>n.current?.onUnregister?.(e))},[]),get size(){return t.current.size}}}const _e=d.MIN_DELTA_PX;function ve(e,t){let n=(0,c.useRef)(new Map),r=t?.minDeltaPx??_e;return{capture:(0,c.useCallback)(t=>{let r=new Map;return e().forEach((e,n)=>{if(t?.has(n))return;let i=e.getBoundingClientRect();i.width>0&&i.height>0&&r.set(n,i)}),n.current=r,r},[e]),getPosition:(0,c.useCallback)(e=>n.current.get(e),[]),calculateDeltas:(0,c.useCallback)((e,t)=>{let n=new Map;return t.forEach((t,i)=>{let a=e.get(i);if(!a)return;let o=a.left-t.left,s=a.top-t.top,c=a.width-t.width,l=a.height-t.height,u=Math.abs(o)>=r||Math.abs(s)>=r||Math.abs(c)>=r||Math.abs(l)>=r;n.set(i,{id:i,deltaX:o,deltaY:s,deltaWidth:c,deltaHeight:l,isSignificant:u})}),n},[r]),getLastCapture:(0,c.useCallback)(()=>new Map(n.current),[]),clear:(0,c.useCallback)(()=>{n.current.clear()},[])}}const ye=d.FLIP_DURATION,be=m.SPRING_GENTLE;function xe(){let e=(0,c.useRef)(new Map),t=(0,c.useRef)(new Set),n=(0,c.useCallback)((n,r,i)=>{let a=i?.duration??ye,o=i?.easing??be;e.current.has(r.id)&&e.current.get(r.id)?.cancel(),t.current.add(r.id),i?.onStart?.(r.id);let s=n.animate([{transform:`translate3d(${r.deltaX}px, ${r.deltaY}px, 0)`},{transform:`translate3d(0, 0, 0)`}],{duration:a,easing:o});return e.current.set(r.id,s),s.onfinish=()=>{t.current.delete(r.id),e.current.delete(r.id),i?.onComplete?.(r.id)},s.oncancel=()=>{t.current.delete(r.id),e.current.delete(r.id)},s},[]),r=(0,c.useCallback)(async(e,t,r)=>{let i=[];t.forEach((t,a)=>{if(!t.isSignificant)return;let o=e.get(a);if(!o)return;let s=n(o,t,r);i.push(s)}),i.length!==0&&await Promise.all(i.map(e=>e.finished.catch(()=>{})))},[n]),i=(0,c.useCallback)(n=>{let r=e.current.get(n);r&&(r.cancel(),e.current.delete(n),t.current.delete(n))},[]),a=(0,c.useCallback)(()=>{e.current.forEach(e=>e.cancel()),e.current.clear(),t.current.clear()},[]),o=(0,c.useCallback)(e=>e?t.current.has(e):t.current.size>0,[]);(0,c.useEffect)(()=>()=>{a()},[a]);let s=(0,c.useRef)({animate:n,animateAll:r,cancel:i,cancelAll:a,isAnimating:o});return s.current.animate=n,s.current.animateAll=r,s.current.cancel=i,s.current.cancelAll=a,s.current.isAnimating=o,s.current}function Se(e){let t=(0,c.useRef)(e);(0,c.useEffect)(()=>{t.current=e},[e]);let{logEvent:n}=H(),r=(0,c.useRef)(n);(0,c.useEffect)(()=>{r.current=n},[n]);let i=(0,c.useRef)({animatingIds:new Set,positions:new Map,activeAnimations:new Map}),a=ge(),o=ve(a.getAll,{minDeltaPx:e?.minDeltaPx??d.MIN_DELTA_PX}),s=xe(),l=e?.exitDuration??d.EXIT_DURATION,u=e?.flipDuration??d.FLIP_DURATION,h=e?.exitEasing??m.EASE_IN_CUBIC,g=(0,c.useCallback)(e=>{let t=i.current.activeAnimations.get(e);t&&(t.forEach(e=>e.cancel()),i.current.activeAnimations.delete(e)),i.current.animatingIds.delete(e),s.cancel(e)},[s]),_=(0,c.useCallback)(()=>{i.current.activeAnimations.forEach(e=>{e.forEach(e=>e.cancel())}),i.current.activeAnimations.clear(),i.current.animatingIds.clear(),s.cancelAll()},[s]),v=e?.flipBehavior??`all`,y=e?.exitPositionStrategy??`absolute-fixed`,b=(0,c.useCallback)(async(e,n)=>{let r=a.get(e);if(!r||i.current.animatingIds.has(e))return;i.current.animatingIds.add(e);let o=n?.duration??l,s=n?.easing??h,c=a.getAll(),g=new Map,_=r.getBoundingClientRect();g.set(e,_),c.forEach((t,n)=>{if(n!==e){let e=t.getBoundingClientRect();e.width>0&&e.height>0&&g.set(n,e)}});let b=r.parentElement;r.dataset.reorderState=`exiting`,y===`absolute-fixed`&&(r.dataset.exitPosition=`absolute`);let x=b?.getBoundingClientRect()||{left:0,top:0},S=_.left-x.left,C=_.top-x.top;y===`absolute-fixed`&&(r.style.position=`absolute`,r.style.left=`${S}px`,r.style.top=`${C}px`,r.style.width=`${_.width}px`,r.style.height=`${_.height}px`,r.style.margin=`0`);let w=b?.getBoundingClientRect()||{left:0,top:0},T=w.left-x.left,E=w.top-x.top;(Math.abs(T)>.5||Math.abs(E)>.5)&&(r.style.transform=`translate(${-T}px, ${-E}px)`);let D=new Map;c.forEach((t,n)=>{if(n!==e){let e=t.getBoundingClientRect();e.width>0&&e.height>0&&D.set(n,e)}});let O=[];if(v!==`none`){let t=[];if(v===`all`)t=[...D.keys()];else if(v===`siblings-after`){let n=Array.from(c.entries());n.sort((e,t)=>{let n=e[1],r=t[1];return n.compareDocumentPosition(r)&Node.DOCUMENT_POSITION_FOLLOWING?-1:1});let r=n.map(([e])=>e),i=r.indexOf(e);i!==-1&&(t=r.slice(i+1).filter(e=>D.has(e)))}t.forEach(e=>{let t=g.get(e),n=D.get(e);if(!t||!n)return;let r=t.left-n.left,i=t.top-n.top;if(Math.abs(r)>1||Math.abs(i)>1){let t=c.get(e);if(t){t.dataset.reorderState=`flipping`,t.style.transform=`translate(${r}px, ${i}px)`;let e=t.animate([{transform:`translate(${r}px, ${i}px)`},{transform:`none`}],{duration:u,easing:m.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*d.EXIT_STAGGER,r=e.animate([{opacity:1,transform:`translateY(0) scale(1)`,filter:`blur(0px)`},{opacity:0,transform:`translateY(${f.OFFSET_Y_EXIT}px) scale(${f.SCALE_EXIT})`,filter:`blur(${p.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(${f.SCALE_EXIT})`}],{duration:o,easing:s,fill:`forwards`});k.push(e)}i.current.activeAnimations.set(e,[...k,...O]);try{await Promise.all([...k.map(e=>e.finished),...O.map(e=>e.finished)])}catch{i.current.animatingIds.delete(e),i.current.activeAnimations.delete(e);return}i.current.animatingIds.delete(e),i.current.activeAnimations.delete(e),r.dataset.reorderState=`completed`,y===`absolute-fixed`&&(r.style.removeProperty(`position`),r.style.removeProperty(`left`),r.style.removeProperty(`top`),r.style.removeProperty(`width`),r.style.removeProperty(`height`),r.style.removeProperty(`margin`)),delete r.dataset.exitPosition,a.unregister(e),n?.onComplete?.(),t.current?.onExitComplete?.(e)},[a,l,h,u,v,y]),x=(0,c.useCallback)(async(e,n)=>{let r=a.get(e);if(!r)return;r.dataset.reorderState||(r.dataset.reorderState=`entering`);let i=t.current?.enterDuration??d.ENTER_DURATION,o=t.current?.enterEasing??m.MATERIAL_DECELERATE,s=n?.duration??i,c=n?.easing??o,l=n?.stagger??d.ENTER_STAGGER,u=r.querySelectorAll(`.sliding-text-token`),f=[],h={opacity:0,transform:`translateY(-8px) scale(0.95)`},g={opacity:1,transform:`none`};if(u.length>0)u.forEach((e,t)=>{let n=t*l;e.dataset.reorderIndex=String(t);let r=e.animate([{...h,filter:`blur(${p.BLUR_ENTER}px)`},{...g,filter:`blur(0px)`}],{duration:s,easing:c,delay:n,fill:`forwards`});f.push(r)});else{let e=r.animate([h,g],{duration:s,easing:c,fill:`forwards`});f.push(e)}try{await Promise.all(f.map(e=>e.finished))}catch{r.dataset.reorderState=`idle`;return}r.dataset.reorderState=`idle`,n?.onComplete?.(),t.current?.onEnterComplete?.(e)},[a]),S=(0,c.useCallback)(e=>e?i.current.animatingIds.has(e):i.current.animatingIds.size>0,[]),C=(0,c.useCallback)(e=>o.capture(e),[o]);return(0,c.useEffect)(()=>()=>{_()},[_]),{registry:a,positions:o,flip:s,registerElement:a.register,startExit:b,startEnter:x,isAnimating:S,cancelAnimation:g,cancelAllAnimations:_,capturePositions:C}}function Z(e){let{logEvent:t}=H(),n=(0,c.useRef)(t);(0,c.useEffect)(()=>{n.current=t},[t]);let r=Se({enterDuration:e?.enterDuration,exitDuration:e?.exitDuration,flipDuration:e?.flipDuration,enterEasing:e?.enterEasing,exitEasing:e?.exitEasing,flipEasing:e?.flipEasing,flipBehavior:e?.flipBehavior,onExitComplete:e?.onComplete});return(0,c.useEffect)(()=>()=>{},[]),{...r,registerElement:r.registerElement,startItemExit:r.startExit,startItemEnter:r.startEnter}}function Ce(e,t={}){let{autoAnimate:n=!0,stagger:r,enterDuration:i,exitDuration:a,flipDuration:o,enterEasing:s,exitEasing:l,flipEasing:u}=t,{logEvent:d}=H(),f=(0,c.useRef)(d);(0,c.useEffect)(()=>{f.current=d},[d]);let p=(0,c.useRef)(t);(0,c.useEffect)(()=>{p.current=t},[t]);let m=(0,c.useRef)(new Set),h=(0,c.useRef)(new Set),g=(0,c.useRef)(new Set),_=(0,c.useCallback)((e,t)=>r?typeof r==`number`?r*e:(r[t]??0)*e:0,[r]),v=Z({enterDuration:i,exitDuration:a,flipDuration:o,enterEasing:s,exitEasing:l,flipEasing:u,onComplete:(0,c.useCallback)(e=>{m.current.delete(e),p.current.onAnimationComplete?.(e)},[])}),y=(0,c.useMemo)(()=>{let t=new Set;return c.Children.forEach(e,e=>{(0,c.isValidElement)(e)&&e.key!=null&&t.add(String(e.key))}),t},[e]);(0,c.useLayoutEffect)(()=>{let e=g.current,t=[];y.forEach(n=>{!e.has(n)&&!h.current.has(n)&&t.push(n)}),t.length>0&&t.forEach((e,t)=>{let n=_(t,`enter`),r=()=>{h.current.add(e),p.current.onItemEnter?.(e),requestAnimationFrame(()=>{v.startItemEnter(e).then(()=>{h.current.delete(e)})})};n>0?setTimeout(r,n):r()}),g.current=new Set(y)},[y,n,v,_]);let b=(0,c.useCallback)(e=>{m.current.has(e)||v.registry.has(e)&&(m.current.add(e),p.current.onItemExit?.(e),v.startItemExit(e))},[v]),x=(0,c.useCallback)(e=>m.current.has(e),[]),S=(0,c.useCallback)(e=>h.current.has(e),[]),C=(0,c.useCallback)(()=>Array.from(m.current),[]),w=(0,c.useCallback)(()=>Array.from(h.current),[]),T=(0,c.useMemo)(()=>{let t=[];return c.Children.forEach(e,e=>{if(!(0,c.isValidElement)(e)){t.push(e);return}let n=e.key==null?null:String(e.key);n!=null&&m.current.has(n)?t.push((0,c.cloneElement)(e,{"data-reorder-state":`exiting`})):t.push(e)}),t},[e]);return(0,c.useEffect)(()=>()=>{},[]),{presentChildren:T,triggerExit:b,isExiting:x,isEntering:S,exitingIds:C(),enteringIds:w(),reorder:v}}function we(e,t){if(e!==void 0)return typeof e==`number`?e:e[t]}const Te={auto:{position:`relative`},horizontal:{display:`flex`,flexDirection:`row`,flexWrap:`wrap`,alignItems:`center`,position:`relative`},"inline-horizontal":{display:`inline-flex`,flexDirection:`row`,flexWrap:`nowrap`,alignItems:`center`,position:`relative`},vertical:{display:`flex`,flexDirection:`column`,position:`relative`},grid:{display:`grid`,gridTemplateColumns:`repeat(auto-fill, minmax(100px, 1fr))`,gap:`8px`,position:`relative`}},Q=(0,c.forwardRef)(({children:e,autoAnimate:t=!0,stagger:n,duration:r,layout:i=`auto`,className:a=``,flipBehavior:o,exitPositionStrategy:s,onItemExit:l,onItemEnter:u},d)=>{let{logEvent:f}=H(),p=(0,c.useRef)(f);(0,c.useEffect)(()=>{p.current=f},[f]);let m=(0,c.useRef)(l),h=(0,c.useRef)(u);(0,c.useEffect)(()=>{m.current=l,h.current=u},[l,u]);let g=(0,c.useCallback)(e=>{S(t=>t.filter(t=>t.key!==e))},[]),_=Z({enterDuration:we(r,`enter`),exitDuration:we(r,`exit`),flipBehavior:o,exitPositionStrategy:s,onComplete:g});(0,c.useImperativeHandle)(d,()=>({startItemExit:_.startItemExit,startItemEnter:_.startItemEnter,isAnimating:_.isAnimating}),[_.startItemExit,_.startItemEnter,_.isAnimating]);let v=(0,c.useRef)(_.startItemExit),y=(0,c.useRef)(_.startItemEnter);(0,c.useEffect)(()=>{v.current=_.startItemExit,y.current=_.startItemEnter},[_.startItemExit,_.startItemEnter]);let b=(0,c.useMemo)(()=>{let t=[];return c.Children.forEach(e,e=>{(0,c.isValidElement)(e)&&e.key!=null&&t.push({key:String(e.key),element:e})}),t},[e]),[x,S]=(0,c.useState)(b),C=(0,c.useRef)(new Set),w=(0,c.useCallback)((e,t)=>n?typeof n==`number`?n*e:(n[t]??0)*e:0,[n]);(0,c.useEffect)(()=>{let e=new Set(b.map(e=>e.key)),t=new Set(x.map(e=>e.key)),n=x.filter(t=>!e.has(t.key)&&!C.current.has(t.key)),r=b.filter(e=>!t.has(e.key));if(n.length===0&&r.length===0){b.some(e=>{let t=x.find(t=>t.key===e.key);return t&&t.element!==e.element})&&S(e=>e.map(e=>C.current.has(e.key)?e:b.find(t=>t.key===e.key)??e));return}if(n.forEach((e,t)=>{let n=w(t,`exit`);C.current.add(e.key);let r=()=>{m.current?.(e.key),v.current(e.key).finally(()=>{C.current.delete(e.key)})};n>0?setTimeout(r,n):r()}),r.length>0){let t=x.filter(t=>!e.has(t.key)),n=[...b];t.forEach(e=>{let t=x.findIndex(t=>t.key===e.key);t!==-1&&t<=n.length&&n.splice(t,0,e)}),S(n),r.forEach((e,t)=>{let n=w(t,`enter`),r=()=>{h.current?.(e.key)};n>0?setTimeout(r,n):r()})}},[b,x,w]);let T=(0,c.useMemo)(()=>{let e=new Set(b.map(e=>e.key));return x.map(({key:t,element:n})=>{let r=!!e.has(t),i=C.current.has(t);return(0,c.cloneElement)(n,{ref:e=>{e?(_.registerElement(t,e),!e.dataset.reorderState&&r&&!i&&(e.dataset.reorderState=`entering`,y.current(t))):_.registerElement(t,null);let a=n.ref;typeof a==`function`?a(e):a&&typeof a==`object`&&(a.current=e)},"data-reorder-id":t})})},[x,b,_.registerElement]),E=i===`auto`?``:`reorder--${i}`;return c.default.createElement(`div`,{className:`waapi-reorder-container reorder ${E} ${a}`,style:Te[i]},T)});Q.displayName=`Reorder`;const Ee=()=>typeof navigator<`u`&&navigator.language?navigator.language:`en`;function De(e,t={}){let{locale:n,type:r=`conjunction`,style:i=`long`,separator:a,hasOverflow:o}=t;return(0,c.useMemo)(()=>{if(e.length===0)return[];if(a!==void 0){let t=[];return e.forEach((n,r)=>{t.push({type:`element`,value:n,index:r}),r<e.length-1&&t.push({type:`literal`,value:a,index:r})}),t}let t=n??Ee();try{let n=new Intl.ListFormat(t,{type:r,style:i}),a=o&&e.length>1?[...e,``]:e,s=n.formatToParts(a),c=o?s.slice(0,-2):s,l=0;return c.map(e=>e.type===`element`?{type:`element`,value:e.value,index:l++}:{type:`literal`,value:e.value,index:Math.max(0,l-1)})}catch{let t=[];return e.forEach((n,r)=>{t.push({type:`element`,value:n,index:r}),r<e.length-1&&t.push({type:`literal`,value:`, `,index:r})}),t}},[e,n,r,i,a,o])}const Oe=({text:e,transition:t,duration:n,className:r})=>{let i=(0,c.useRef)(e),[a,o]=(0,c.useState)(e),[s,l]=(0,c.useState)(!1),u=(0,c.useRef)(null);return(0,c.useLayoutEffect)(()=>()=>{u.current&&clearTimeout(u.current)},[]),(0,c.useLayoutEffect)(()=>{i.current!==e&&(t===`none`?(o(e),i.current=e):(u.current&&clearTimeout(u.current),l(!0),u.current=setTimeout(()=>{o(e),i.current=e,u.current=setTimeout(()=>{l(!1)},n/2)},n/2)))},[e,t,n]),t===`none`?React.createElement(`span`,{className:r},e):t===`fade`?React.createElement(`span`,{className:r,style:{display:`inline`,whiteSpace:`pre`,opacity:s?.4:1,transition:`opacity ${n/2}ms ease-in-out`}},a):React.createElement(X,{key:a,text:a,mode:`word`,direction:`vertical`,duration:n,blur:!1,className:r})},ke={listType:`conjunction`,listStyle:`long`,transition:`none`,duration:200},Ae={prefix:`+`,label:` more`,showSeparator:!0},je={mode:`character`,direction:`vertical`,stagger:15,duration:g.DURATION_ENTER,blur:!0,widthAnimation:!1},Me=({tokens:e,placeholder:t=`No tokens`,maxVisible:n,separator:r,overflow:i,animation:a,inline:o=!1,className:s=``,tokenClassName:l=``,placeholderClassName:u=``})=>{let p={...ke,...r},h={...Ae,...i},_={...je,...a},{logEvent:y}=H(),b=(0,c.useRef)(y);(0,c.useEffect)(()=>{b.current=y},[y]);let x=(0,c.useRef)(new Set),S=(0,c.useRef)(new Map),C=(0,c.useRef)(new Map),w=(0,c.useMemo)(()=>n?e.slice(0,n):e,[e,n]),T=(0,c.useMemo)(()=>n?Math.max(0,e.length-n):0,[e.length,n]),E=De(w.map(e=>e.text),{locale:p.locale,type:p.listType,style:p.listStyle,separator:p.value,hasOverflow:T>0}),D=(0,c.useRef)(0),O=T>0&&D.current===0,k=T===0&&D.current>0;(0,c.useEffect)(()=>{D.current=T},[T]);let A=(0,c.useCallback)((e,t)=>{if(t>=w.length-1)return!1;let n=S.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}},[w.length]);(0,c.useEffect)(()=>{let e=new Set(w.map(e=>e.id));for(let t of S.current.keys())e.has(t)||S.current.delete(t);w.forEach((e,t)=>{if(t<w.length-1){let t=S.current.get(e.id);(!t||t.animationPhase===`completed`)&&S.current.set(e.id,{animationPhase:`idle`})}else S.current.delete(e.id)})},[w]);let j=(0,c.useCallback)(e=>{let t=C.current.get(e);t&&(S.current.set(e,{animationPhase:`exit-coordinated`}),t.dataset.separatorState=`exiting`,t.animate([{opacity:1,transform:`translateY(0) scale(1)`},{opacity:0,transform:`translateY(${f.OFFSET_Y_EXIT}px) scale(${f.SCALE_EXIT})`}],{duration:d.EXIT_DURATION,easing:m.EASE_IN_CUBIC,fill:`forwards`}).finished.then(()=>{S.current.set(e,{animationPhase:`completed`}),t.dataset.separatorState=`completed`}).catch(()=>{S.current.delete(e)}))},[]),M=(0,c.useCallback)(e=>{x.current.add(e);let t=[],n=w.findIndex(t=>t.id===e);if(n===w.length-1&&n>0){let e=w[n-1];e&&t.push(e.id)}j(e),t.forEach(e=>j(e)),b.current({type:`token-remove`,source:`TextFlow`,message:`Token exiting: ${e}`,data:{id:e,additionalSeparators:t}})},[w,j]),N=(0,c.useCallback)(e=>{b.current({type:`token-add`,source:`TextFlow`,message:`Token entering: ${e}`,data:{id:e}})},[]),P=e.length===0&&!!t,F=(0,c.useMemo)(()=>E.map((e,t)=>{if(e.type===`element`){let t=w[e.index];if(!t)return null;let n=x.current.has(t.id);return React.createElement(`span`,{key:t.id,className:`waapi-token-wrapper ${l}`,"data-reorder-id":t.id},React.createElement(X,{text:t.text,mode:n?`none`:_.mode,direction:_.direction,staggerDelay:_.stagger,duration:_.duration,blur:_.blur?v.newToken.blur:!1,widthAnimation:!n&&_.widthAnimation,initial:n?!1:`initial`,animate:`animate`}))}let n=w[e.index];if(!n)return null;let r=e.index;if(!A(n.id,r))return null;let i=`sep-${n.id}`;return React.createElement(`span`,{key:i,ref:e=>{e?C.current.set(n.id,e):C.current.delete(n.id)},className:`waapi-token-separator ${p.className??``}`,"data-separator-state":S.current.get(n.id)?.animationPhase??`idle`},React.createElement(Oe,{text:e.value,transition:p.transition,duration:p.duration}))}).filter(Boolean),[E,w,l,_,p,A]),I=(0,c.useMemo)(()=>T===0?null:React.createElement(`div`,{key:`overflow-counter`,"data-reorder-id":`overflow-counter`,className:`waapi-token-overflow ${h.className??``} ${O?`entering`:``} ${k?`exiting`:``}`},h.showSeparator&&h.separator&&React.createElement(`span`,{className:`waapi-token-separator ${p.className??``}`},h.separator),h.prefix!==``&&React.createElement(`span`,{className:`waapi-token-separator ${p.className??``}`},h.prefix),React.createElement(V,{value:T,duration:_.duration,fontSize:`inherit`,fontWeight:`inherit`,color:`inherit`}),h.label&&h.label!==``&&React.createElement(X,{text:h.label,mode:_.mode,direction:_.direction,staggerDelay:_.stagger,duration:k?g.DURATION_EXIT:_.duration,blur:_.blur?v.newToken.blur:!1,initial:O?`initial`:!1,animate:`animate`})),[T,O,k,h,p.className,_]);return React.createElement(`div`,{role:`text`,className:`waapi-animated-tokens-container waapi-v2 ${o?`waapi-animated-tokens-container--inline`:``} ${s}`},P&&React.createElement(X,{key:`placeholder`,text:t,mode:v.placeholder.mode,direction:v.placeholder.direction,blur:v.placeholder.blur,duration:v.placeholder.duration,initial:`initial`,animate:`animate`,className:`waapi-token-placeholder ${u}`}),React.createElement(Q,{layout:o?`inline-horizontal`:`horizontal`,onItemExit:M,onItemEnter:N},F,I))},$=(0,c.createContext)(null);function Ne(){let e=(0,c.useContext)($);if(!e)throw Error(`useMorphContext must be used within a <Morph> component. Wrap your morphable components with <Morph>.`);return e}const Pe=d.FLIP_DURATION,Fe=m.EASE_OUT_CUBIC;function Ie(e){let[t,n]=(0,c.useState)(!1),r=(0,c.useRef)([]),i=(0,c.useRef)(e);(0,c.useEffect)(()=>{i.current=e},[e]);let a=(0,c.useCallback)(()=>{r.current.forEach(e=>e.cancel()),r.current=[],n(!1)},[]),o=(0,c.useCallback)(async(e,o)=>{t&&a(),n(!0);let s=i.current?.duration??Pe,c=i.current?.easing??Fe,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||Le(h,l),v=i.current?.clipPathEnd||Le(g,u),y={position:e.style.position,opacity:e.style.opacity,pointerEvents:e.style.pointerEvents},b={position:o.style.position,opacity:o.style.opacity,transform:o.style.transform,clipPath:o.style.clipPath};e.style.position=`absolute`,e.style.pointerEvents=`none`,o.style.position=`relative`,o.style.transform=`translate(${d}px, ${f}px) scale(${p}, ${m})`,o.style.clipPath=_,o.style.opacity=`0`;let x=e.animate([{opacity:1},{opacity:0}],{duration:s*.5,easing:c,fill:`forwards`}),S=o.animate([{opacity:0},{opacity:1}],{duration:s*.5,delay:s*.25,easing:c,fill:`forwards`}),C=o.animate([{transform:`translate(${d}px, ${f}px) scale(${p}, ${m})`,clipPath:_},{transform:`translate(0, 0) scale(1, 1)`,clipPath:v}],{duration:s,easing:c,fill:`forwards`});r.current=[x,S,C];try{await Promise.all([x.finished,S.finished,C.finished])}catch{Object.assign(e.style,y),Object.assign(o.style,b),n(!1);return}Object.assign(e.style,y),o.style.transform=``,o.style.clipPath=``,o.style.opacity=`1`,r.current=[],n(!1)},[t,a]);return(0,c.useEffect)(()=>()=>{a()},[a]),{isMorphing:t,morph:o,cancel:a}}function Le(e,t){let n=parseFloat(e)||0;return`inset(0 round ${n/t.width*100}% ${n/t.height*100}%)`}const Re=d.FLIP_DURATION,ze=m.MATERIAL_STANDARD;function Be(e){let[t,n]=(0,c.useState)(!1),r=(0,c.useRef)(null),i=(0,c.useRef)(e),a=i.current?.duration??Re,o=i.current?.easing??ze,s=(0,c.useCallback)(()=>{r.current&&(r.current.style.transition=`grid-template-rows ${a}ms ${o}`)},[a,o]),l=(0,c.useCallback)(()=>{s(),r.current&&(r.current.style.gridTemplateRows=`1fr`),n(!0)},[s]),u=(0,c.useCallback)(()=>{s(),r.current&&(r.current.style.gridTemplateRows=`0fr`),n(!1)},[s]);return{isExpanded:t,expand:l,collapse:u,toggle:(0,c.useCallback)(()=>{t?u():l()},[t,l,u]),containerRef:r}}function Ve(e){let t=(0,c.useRef)(e),n=(0,c.useRef)(e?.types||[]),r=(0,c.useMemo)(()=>typeof document>`u`?!1:`startViewTransition`in document,[]),i=(0,c.useCallback)(e=>{n.current=e},[]);return{isSupported:r,startTransition:(0,c.useCallback)(async e=>{if(!document.startViewTransition){await e();return}let n=t.current?.name,r=(()=>{if(n){let e=document.createElement(`style`);return e.id=`view-transition-${n}`,e.textContent=`
|
|
560
560
|
::view-transition-old(${n}),
|
|
561
561
|
::view-transition-new(${n}) {
|
|
562
562
|
animation-duration: 300ms;
|
|
563
563
|
animation-timing-function: ease-out;
|
|
564
564
|
}
|
|
565
|
-
`,document.head.appendChild(e),()=>{e.remove()}}return()=>{}})();try{await document.startViewTransition(e).finished}finally{r()}},[]),setTypes:i}}function
|
|
565
|
+
`,document.head.appendChild(e),()=>{e.remove()}}return()=>{}})();try{await document.startViewTransition(e).finished}finally{r()}},[]),setTypes:i}}function He(e){let t=e?.technique??`flip-clip-path`,n=(0,c.useRef)(e);(0,c.useEffect)(()=>{n.current=e},[e]);let r=Ie({duration:e?.duration,easing:e?.easing}),i=Be({duration:e?.duration,easing:e?.easing}),a=Ve(),o=r.isMorphing,s=(0,c.useCallback)(async(e,t)=>{switch(n.current?.onMorphStart?.(),n.current?.technique??`flip-clip-path`){case`flip-clip-path`:await r.morph(e,t);break;case`view-transitions`:a.isSupported?await a.startTransition(()=>{e.style.opacity=`0`,t.style.opacity=`1`}):await r.morph(e,t);break;case`css-grid`:i.toggle();break}n.current?.onMorphEnd?.()},[r,a,i]),l=(0,c.useCallback)(()=>{r.cancel()},[r]);return{isMorphing:o,technique:t,isViewTransitionsSupported:a.isSupported,morph:s,cancel:l,flipClipPath:r,cssGrid:i,viewTransitions:a}}function Ue({children:e,technique:t=`flip-clip-path`,duration:n,easing:r,className:i=``,onMorphStart:a,onMorphEnd:o}){let s=He({technique:t,duration:n,easing:r,onMorphStart:a,onMorphEnd:o}),l=(0,c.useMemo)(()=>({morph:s}),[s]);return React.createElement($.Provider,{value:l},React.createElement(`div`,{className:`morph-container ${i}`},e))}const We=E,Ge=(e,t)=>{let n={...E.token};return e===`enter-from`?(Object.assign(n,E.enterFrom),t===`vertical`?Object.assign(n,E.verticalEnterFrom):Object.assign(n,E.horizontalEnterFrom)):e===`enter-to`?Object.assign(n,E.enterTo):e===`exit-active`&&(Object.assign(n,E.exitActive),t===`vertical`?Object.assign(n,E.verticalExitActive):Object.assign(n,E.horizontalExitActive)),n},Ke=()=>{let e=O();return{...E.container,...e}},qe=T,Je=()=>{let e=O();return{...T.container,...e}};exports.ANIMATION_CONFIGS=_,exports.ANIMATION_DEFAULTS=g,exports.AnimatedTokens=he,exports.AnimatedTokensV2=Me,exports.TextFlow=Me,exports.CSS_VAR_NAMES=x,exports.CSS_VAR_VALUES=S,exports.DebugProvider=se,exports.EASINGS=m,exports.EFFECTS=p,exports.Morph=Ue,exports.MorphContext=$,exports.PRESETS=v,exports.RESPONSIVE_CONFIGS=h,exports.Reorder=Q,exports.SlidingNumber=V,exports.SlidingText=X,exports.TIMING=d,exports.TRANSFORMS=f,exports.animatedTokensBaseStyles=T,exports.animatedTokensStyles=qe,exports.calculatePositionDelta=ue,exports.captureAnimationInfo=J,exports.captureComputedStyles=U,exports.captureElementAnimations=fe,exports.capturePosition=W,exports.capturePositionForLog=le,exports.captureStylesForLog=ce,exports.choreographyTracker=Y,exports.compareStyles=G,exports.createAnimationTimer=q,exports.cssVar=C,exports.formatTimingResult=de,exports.generateCSSVariables=k,exports.generateResponsiveCSS=A,exports.getResponsiveAnimatedTokensStyle=Je,exports.getResponsiveDuration=l,exports.getResponsiveSlidingTextStyle=Ke,exports.getResponsiveStagger=u,exports.getResponsiveTokenStyles=O,exports.getSlidingTextTokenStyle=Ge,exports.injectAllCSS=R,exports.injectCSSVariables=I,exports.injectStructuralCSS=L,exports.reinjectAllCSS=ne,exports.reinjectCSSVariables=te,exports.removeAllCSS=ee,exports.removeCSSVariables=z,exports.removeStructuralCSS=B,exports.responsiveOverrides=D,exports.slidingTextBaseStyles=E,exports.slidingTextStyles=We,exports.useAnimationOrchestrator=Se,exports.useCSSGridMorph=Be,exports.useDebug=H,exports.useElementRegistry=ge,exports.useFLIPAnimation=xe,exports.useFLIPClipPath=Ie,exports.useListFormat=De,exports.useMorph=He,exports.useMorphContext=Ne,exports.usePositionCapture=ve,exports.useReorder=Z,exports.useReorderPresence=Ce,exports.useViewTransitions=Ve,exports.useWAAPIAnimations=me;
|
|
566
566
|
//# sourceMappingURL=index.cjs.map
|