@mks2508/waapi-animation-primitives 0.1.0 → 0.2.0

package/README.md

@@ -6,6 +6,8 @@ React animation components using the Web Animations API. Zero dependencies beyon
 
 ```bash
 npm install @mks2508/waapi-animation-primitives
+# or
+bun add @mks2508/waapi-animation-primitives
 ```
 
 ## Components
@@ -77,33 +79,173 @@ const tokens = [
 - `textAnimationMode` ('character' | 'word' | 'none') - How text animates
 - `enableWidthAnimation` (boolean, optional) - Animate width changes
 
-## Utilities
+## CSS Variables (Customization)
+
+All animation values are controlled via CSS variables. Override them to customize animations:
+
+```css
+:root {
+  /* Timing */
+  --waapi-duration-enter: 200ms;
+  --waapi-duration-exit: 180ms;
+  --waapi-duration-flip: 300ms;
+  --waapi-stagger-enter: 15ms;
+
+  /* Transforms */
+  --waapi-offset-y-enter: 8px;
+  --waapi-offset-y-exit: -8px;
+  --waapi-offset-x: 16px;
+  --waapi-scale-exit: 0.95;
+
+  /* Effects */
+  --waapi-blur-enter: 4px;
+  --waapi-blur-exit: 2px;
+
+  /* Easings */
+  --waapi-ease-enter: cubic-bezier(0.33, 1, 0.68, 1);
+  --waapi-ease-exit: cubic-bezier(0.32, 0, 0.67, 0);
+  --waapi-ease-flip: cubic-bezier(0.2, 0, 0.2, 1);
+}
+```
+
+### Override per Component
+
+```tsx
+<div style={{ '--waapi-duration-enter': '500ms' }}>
+  <AnimatedTokens tokens={tokens} />
+</div>
+```
+
+### Programmatic Override
+
+```tsx
+import { CSS_VAR_NAMES, cssVar } from '@mks2508/waapi-animation-primitives';
+
+const customStyle = {
+  [CSS_VAR_NAMES.durationEnter]: '500ms',
+  [CSS_VAR_NAMES.blurEnter]: '8px',
+};
+
+<SlidingText text="Hello" style={customStyle} />
+```
+
+## CSS Classes
+
+All components use prefixed CSS classes for styling:
+
+| Class | Component | Description |
+|-------|-----------|-------------|
+| `.waapi-sliding-text-container` | SlidingText | Main container |
+| `.waapi-sliding-text-token` | SlidingText | Individual character/word |
+| `.waapi-animated-tokens-container` | AnimatedTokens | Main container |
+| `.waapi-token-wrapper` | AnimatedTokens | Token wrapper |
+| `.waapi-token-separator` | AnimatedTokens | Separator between tokens |
+| `.waapi-token-placeholder` | AnimatedTokens | Placeholder text |
+
+### State Classes
+
+- `.enter-from` - Initial enter state
+- `.enter-to` - Final enter state
+- `.exit-active` - Exit animation active
+- `.exit-completed` - Element ready for removal
+
+## Architecture (SSOT)
+
+The library uses a Single Source of Truth architecture:
+
+```
+animationUtils.ts (constants: TIMING, EASINGS, etc.)
+       ↓
+cssTokens.ts (generates CSS variables)
+       ↓
+   ┌───┴───┐
+   ↓       ↓
+CSS      Components
+```
 
 ### Animation Constants
 
 ```tsx
 import { TIMING, EASINGS, PRESETS } from '@mks2508/waapi-animation-primitives';
 
-// Predefined timing values
-TIMING.DURATION_ENTER // 200ms
-TIMING.DURATION_EXIT  // 180ms
+TIMING.ENTER_DURATION  // 200
+TIMING.EXIT_DURATION   // 180
+TIMING.FLIP_DURATION   // 300
+
+EASINGS.EASE_OUT_CUBIC // 'cubic-bezier(0.33, 1, 0.68, 1)'
+EASINGS.SPRING_GENTLE  // 'linear(0, 0.009, ...)'
+```
+
+### CSS Tokens System
 
-// Easing functions
-EASINGS.EASE_OUT_CUBIC
+```tsx
+import {
+  CSS_VAR_NAMES,
+  CSS_VAR_VALUES,
+  generateCSSVariables,
+  generateResponsiveCSS,
+} from '@mks2508/waapi-animation-primitives';
 
-// Animation presets
-PRESETS.slideUp
-PRESETS.fadeIn
+// Get CSS variable name with type safety
+CSS_VAR_NAMES.durationEnter // '--waapi-duration-enter'
+
+// Get all default values
+CSS_VAR_VALUES // { '--waapi-duration-enter': '200ms', ... }
+
+// Generate CSS string
+generateCSSVariables() // ':root { --waapi-duration-enter: 200ms; ... }'
+```
+
+## Headless Mode
+
+For complete control, use the style objects directly:
+
+```tsx
+import {
+  slidingTextStyles,
+  animatedTokensStyles,
+  getSlidingTextTokenStyle,
+} from '@mks2508/waapi-animation-primitives';
+
+// Base container styles
+slidingTextStyles.container
+
+// Get token style for specific state
+getSlidingTextTokenStyle('enter-from', 'vertical')
+
+// Responsive styles
+import { getResponsiveTokenStyles } from '@mks2508/waapi-animation-primitives';
+const styles = getResponsiveTokenStyles(); // Auto-detects mobile/reduced-motion
+```
+
+## CSS Injection Control
+
+CSS variables are auto-injected. Control this behavior:
+
+```tsx
+import {
+  injectCSSVariables,
+  removeCSSVariables,
+  reinjectCSSVariables,
+} from '@mks2508/waapi-animation-primitives';
+
+// Manual injection
+injectCSSVariables();
+
+// Remove (for testing/cleanup)
+removeCSSVariables();
+
+// Force re-inject (after dynamic changes)
+reinjectCSSVariables();
 ```
 
-### Debug System
+## Debug System
 
-Development-only debugging tools. Automatically tree-shaken in production builds.
+Development-only debugging tools. Automatically tree-shaken in production.
 
 ```tsx
 import { DebugProvider, useDebug } from '@mks2508/waapi-animation-primitives';
 
-// Wrap your app
 <DebugProvider>
   <YourApp />
 </DebugProvider>
@@ -112,16 +254,8 @@ import { DebugProvider, useDebug } from '@mks2508/waapi-animation-primitives';
 const { events, logEvent, exportToCSV } = useDebug();
 ```
 
-**Debug Features:**
-- Event logging with timestamps
-- Animation timing analysis
-- Style and position capture
-- CSV export for analysis
-
 ### Choreography Tracker
 
-Track animation overlaps and timing.
-
 ```tsx
 import { choreographyTracker } from '@mks2508/waapi-animation-primitives';
 
@@ -131,25 +265,25 @@ choreographyTracker.endAnimation('anim-1');
 const summary = choreographyTracker.getSummary();
 ```
 
-## Build Variants
+## Accessibility
 
-The package supports two build modes:
+The library automatically supports:
+
+- **Reduced Motion**: Respects `prefers-reduced-motion` media query
+- **High Contrast**: Reduces blur effects in high contrast mode
+- **Print**: Disables all animations for printing
+
+## Build Variants
 
 **Production** (default):
 ```bash
-npm run build
+bun run build
 ```
-- 24KB minified
-- All debug code removed
-- Optimized for production
 
 **Debug**:
 ```bash
-npm run build:debug
+bun run build:debug
 ```
-- 31KB minified
-- Full debug instrumentation
-- Event logging enabled
 
 ## Browser Support
 

package/dist/index.cjs

@@ -1,74 +1,60 @@
-'use strict';var react=require('react'),jsxRuntime=require('react/jsx-runtime');function vt(n,t){let e=t?.locale||"en-US",r={style:t?.style||"decimal",minimumFractionDigits:t?.minimumFractionDigits,maximumFractionDigits:t?.maximumFractionDigits,useGrouping:t?.useGrouping??true};t?.style==="currency"&&t?.currency&&(r.currency=t.currency);let s=new Intl.NumberFormat(e,r).formatToParts(n),p=[],h=0;s.forEach(a=>{a.type==="integer"&&(h+=a.value.length);});let g=h,x=0,l=0;return s.forEach((a,d)=>{if(a.type==="integer")for(let f of a.value)p.push({char:f,key:`int-${g}`,isDigit:true,position:g}),g--;else if(a.type==="fraction")for(let f of a.value)x++,p.push({char:f,key:`frac-${x}`,isDigit:true,position:-x});else a.type==="decimal"?p.push({char:a.value,key:"decimal",isDigit:false,position:0}):a.type==="group"?(l++,p.push({char:a.value,key:`group-${l}`,isDigit:false,position:0})):a.type==="currency"?p.push({char:a.value,key:`currency-${d}`,isDigit:false,position:0}):a.type==="percentSign"?p.push({char:a.value,key:"percent",isDigit:false,position:0}):p.push({char:a.value,key:`symbol-${d}`,isDigit:false,position:0});}),p}function rt({value:n,duration:t=700,fontSize:e="3rem",fontWeight:r="700",color:o="#000",digitHeight:s=60,stagger:p=30,motionBlur:h=true,format:g,trend:x=0,animationConfig:l}){let a=react.useMemo(()=>{if(l){let{overshoot:i=1,stiffness:u=1,mass:y=1}=l,m=.34*u,T=1+.56*i,_=.64/y;return `cubic-bezier(${Math.min(m,1).toFixed(2)}, ${Math.min(T,2).toFixed(2)}, ${Math.min(_,1).toFixed(2)}, 1)`}return "cubic-bezier(0.34, 1.56, 0.64, 1)"},[l]),d=react.useMemo(()=>vt(n,g),[n,g]),f=react.useRef(new Set),c=react.useRef(true),A=react.useMemo(()=>{if(c.current)return new Set;let i=new Set;return d.forEach(u=>{f.current.has(u.key)||i.add(u.key);}),i},[d]);react.useEffect(()=>{c.current=false,f.current=new Set(d.map(i=>i.key));},[d]);let D=i=>(Math.abs(i)-1)*p;return jsxRuntime.jsx("div",{style:{display:"inline-flex",alignItems:"center",fontSize:e,fontWeight:r,color:o,fontVariantNumeric:"tabular-nums",fontFamily:"system-ui, -apple-system, sans-serif",overflow:"hidden"},children:d.map(i=>{let u=A.has(i.key);return i.isDigit?jsxRuntime.jsx(_t,{digit:Number.parseInt(i.char),duration:t,digitHeight:s,delay:D(i.position),motionBlur:h,easing:a,isEntering:u,trend:x},i.key):jsxRuntime.jsx(At,{char:i.char,isEntering:u,duration:t,easing:a},i.key)})})}function At({char:n,isEntering:t,duration:e,easing:r}){let o=react.useRef(null),s=react.useRef(false);return react.useLayoutEffect(()=>{!o.current||!t||s.current||(s.current=true,o.current.animate([{opacity:0,transform:"scale(0.8)"},{opacity:1,transform:"scale(1)"}],{duration:e*.3,easing:r,fill:"forwards"}));},[t,e,r]),jsxRuntime.jsx("span",{ref:o,style:{display:"inline-block",whiteSpace:"pre",opacity:t?0:1},children:n})}function _t({digit:n,duration:t,digitHeight:e,delay:r,motionBlur:o,easing:s,isEntering:p,trend:h}){let g=react.useRef(null),x=react.useRef(null),l=react.useRef(null),a=react.useRef(`blur-${Math.random().toString(36).slice(2,9)}`).current,d=react.useRef(null),f=react.useRef(n),c=react.useRef(false),A=react.useMemo(()=>{let i=[];for(let u=-1;u<=1;u++)for(let y=0;y<=9;y++)i.push(y);return i},[]);react.useLayoutEffect(()=>{if(!c.current){c.current=true;let i=-(n+10)*e;d.current=i,f.current=n,g.current&&(g.current.style.transform=`translateY(${i}px)`);}},[n,e]),react.useLayoutEffect(()=>{!x.current||!p||x.current.animate([{opacity:0,transform:"scale(0.5) translateY(-20px)"},{opacity:1,transform:"scale(1) translateY(0)"}],{duration:t*.4,easing:s,fill:"forwards"});},[p,t,s]),react.useEffect(()=>{if(f.current=n,!c.current)return;let i=d.current!==null?((Math.round(-d.current/e)-10)%10+10)%10:n;n===i&&d.current!==null||D(n);},[n,e]);let D=i=>{if(!g.current||!x.current)return;if(l.current){let w=getComputedStyle(g.current),B=new DOMMatrix(w.transform);d.current=B.m42,l.current.cancel(),l.current=null,g.current.style.transform=`translateY(${d.current}px)`;}let u=d.current!==null?-d.current/e:i+10,m=((Math.round(u)-10)%10+10)%10;if(i===m&&d.current!==null){let w=-(i+10)*e;if(g.current){let B=l.current;B&&B.cancel(),g.current.style.transform=`translateY(${w}px)`;}d.current=w;return}let T;h===1?T=i>=m?i-m:10-m+i:h===-1?T=i<=m?i-m:i-m-10:(T=i-m,T>5?T-=10:T<-5&&(T+=10));let _=d.current??-(m+10)*e,E=_-T*e,S=document.getElementById(a)?.querySelector("feGaussianBlur");if(o&&S){let w=Math.min(Math.abs(T)*1.2,6);S.setAttribute("stdDeviation",`0,${w}`),x.current.style.filter=`url(#${a})`;}let U=g.current.animate([{transform:`translateY(${_}px)`},{transform:`translateY(${E}px)`}],{duration:t,delay:r,easing:s,fill:"forwards"});l.current=U,U.onfinish=()=>{let w=-(i+10)*e;g.current&&(U.cancel(),g.current.style.transform=`translateY(${w}px)`),d.current=w,x.current&&(x.current.style.filter="none"),S&&S.setAttribute("stdDeviation","0,0"),l.current=null,f.current!==i&&requestAnimationFrame(()=>{D(f.current);});},U.oncancel=()=>{l.current=null;};};return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("svg",{style:{position:"absolute",width:0,height:0},"aria-hidden":"true",children:jsxRuntime.jsx("defs",{children:jsxRuntime.jsx("filter",{id:a,children:jsxRuntime.jsx("feGaussianBlur",{in:"SourceGraphic",stdDeviation:"0,0"})})})}),jsxRuntime.jsx("div",{ref:x,style:{position:"relative",height:`${e}px`,overflow:"hidden",width:"0.65em",textAlign:"center",opacity:p?0:1},children:jsxRuntime.jsx("div",{ref:g,style:{position:"absolute",left:0,right:0,willChange:"transform"},children:A.map((i,u)=>jsxRuntime.jsx("div",{style:{height:`${e}px`,display:"flex",alignItems:"center",justifyContent:"center"},children:i},u))})})]})}var q=n=>typeof window>"u"?n:window.matchMedia("(prefers-reduced-motion: reduce)").matches?0:window.innerWidth<768?Math.round(n*.6):n,ot=n=>typeof window>"u"?n:window.matchMedia("(prefers-reduced-motion: reduce)").matches?0:window.innerWidth<768?Math.round(n*.5):n,b={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_EXIT:.95,ROTATE_EXIT:0},X={BLUR_ENTER:4,BLUR_EXIT:2},N={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)"},Dt={tokenEnter:{get duration(){return q(b.ENTER_DURATION)},get stagger(){return ot(b.ENTER_STAGGER)},easing:N.EASE_OUT_CUBIC,blur:X.BLUR_ENTER,offsetY:F.OFFSET_Y_ENTER},tokenExit:{get duration(){return q(b.EXIT_DURATION)},get stagger(){return ot(b.EXIT_STAGGER)},easing:N.EASE_IN_CUBIC,blur:X.BLUR_EXIT,offsetY:F.OFFSET_Y_EXIT,scale:F.SCALE_EXIT},collapse:{get duration(){return q(b.COLLAPSE_DURATION)},delay:b.COLLAPSE_DELAY,easing:N.EASE_IN_OUT},flip:{get duration(){return q(b.FLIP_DURATION)},delayPercent:b.FLIP_DELAY_PERCENT,easing:N.SPRING_GENTLE}},I={DURATION_ENTER:b.ENTER_DURATION,DURATION_EXIT:b.EXIT_DURATION,DURATION_FLIP:b.FLIP_DURATION,STAGGER_DELAY:b.ENTER_STAGGER,OFFSET_VERTICAL:F.OFFSET_Y_ENTER,OFFSET_HORIZONTAL:F.OFFSET_X,BLUR_AMOUNT:X.BLUR_ENTER,EASING_ENTER:N.EASE_OUT_CUBIC,EASING_EXIT:N.EASE_IN_CUBIC,EASING_FLIP:N.SPRING_GENTLE,SPRING_EASING:N.SPRING_GENTLE},wt={tokenEnter:{duration:b.ENTER_DURATION,stagger:b.ENTER_STAGGER,easing:N.EASE_OUT_CUBIC,blur:X.BLUR_ENTER,offsetY:F.OFFSET_Y_ENTER},tokenExit:{duration:b.EXIT_DURATION,stagger:b.EXIT_STAGGER,easing:N.EASE_IN_CUBIC,blur:X.BLUR_EXIT,offsetY:F.OFFSET_Y_EXIT,scale:F.SCALE_EXIT},collapse:{duration:b.COLLAPSE_DURATION,delay:b.COLLAPSE_DELAY,easing:N.EASE_IN_OUT},flip:{duration:b.FLIP_DURATION,delayPercent:b.FLIP_DELAY_PERCENT,easing:N.SPRING_GENTLE}},z={newToken:{mode:"character",direction:"vertical",staggerDelay:15,blur:true,widthAnimation:true,duration:200,initial:"initial"},existingToken:{mode:"none",blur:false,widthAnimation:false,initial:false},placeholder:{mode:"word",direction:"vertical",blur:true,widthAnimation:false,duration:150},separator:{duration:100,widthAnimation:true}};var $={container:{"--duration-enter":"200ms","--duration-exit":"200ms","--easing-enter":"cubic-bezier(0.25, 0.46, 0.45, 0.94)","--easing-exit":"cubic-bezier(0.55, 0.06, 0.68, 0.19)","--offset-vertical":"8px","--offset-horizontal":"16px","--blur-amount":"4px",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(var(--blur-amount))"},enterTo:{opacity:1,transform:"translate(0, 0)",filter:"blur(0)"},exitActive:{opacity:0,filter:"blur(var(--blur-amount))"},verticalEnterFrom:{transform:"translateY(var(--offset-vertical))"},verticalExitActive:{transform:"translateY(calc(var(--offset-vertical) * -1))"},horizontalEnterFrom:{transform:"translateX(var(--offset-horizontal))"},horizontalExitActive:{transform:"translateX(calc(var(--offset-horizontal) * -1))"}},at=(n,t)=>{let e={...$.token};return n==="enter-from"?(Object.assign(e,$.enterFrom),t==="vertical"?Object.assign(e,$.verticalEnterFrom):Object.assign(e,$.horizontalEnterFrom)):n==="enter-to"?Object.assign(e,$.enterTo):n==="exit-active"&&(Object.assign(e,$.exitActive),t==="vertical"?Object.assign(e,$.verticalExitActive):Object.assign(e,$.horizontalExitActive)),e};var J=({text:n,mode:t="word",direction:e="vertical",staggerDelay:r=I.STAGGER_DELAY,duration:o=I.DURATION_ENTER,easing:s=I.EASING_ENTER,blur:p=true,widthAnimation:h=false,initial:g="initial",exit:x,className:l="",style:a})=>{let d=react.useRef(null),f=react.useRef(null),c=react.useRef(false),[A,D]=react.useState(g!=="initial");react.useEffect(()=>{g==="initial"&&!c.current&&(c.current=true,requestAnimationFrame(()=>{D(true);}));},[g]);let i=x==="exit"?"exit":A?"animate":"initial",u=t==="character"?n.split(""):[n];react.useLayoutEffect(()=>{if(!h||!d.current||!f.current)return;let m=d.current,T=f.current;if(i==="initial")m.style.width="0px";else if(i==="animate")if(CSS.supports("interpolate-size","allow-keywords"))m.style.width="auto",m.style.transition=`width ${o}ms ${s}`;else {let E=T.scrollWidth;m.style.width=`${E}px`,m.style.transition=`width ${o}ms ${s}`;let S=setTimeout(()=>{m.style.width="auto";},o);return ()=>clearTimeout(S)}else if(i==="exit"){let _=m.getBoundingClientRect().width;m.style.width=`${_}px`,m.getBoundingClientRect(),m.style.width="0px",m.style.transition=`width ${I.DURATION_EXIT}ms ${I.EASING_EXIT}`;}},[i,h,o,s,n]);let y=m=>{let T=m*r,_=i==="exit",E=_?I.DURATION_EXIT:o,S=_?I.EASING_EXIT:s;return {transition:`
-                opacity ${E}ms ${S} ${T}ms,
-                transform ${E}ms ${S} ${T}ms,
-                filter ${E}ms ${S} ${T}ms
-            `,"--blur-amount":p?`${I.BLUR_AMOUNT}px`:"0px","--offset":e==="vertical"?`${I.OFFSET_VERTICAL}px`:`${I.OFFSET_HORIZONTAL}px`}};return jsxRuntime.jsx("div",{ref:d,className:l,style:{...$.container,...a},children:jsxRuntime.jsx("div",{ref:f,style:$.content,children:u.map((m,T)=>jsxRuntime.jsx("span",{style:{...at(i==="initial"?"enter-from":i==="animate"?"enter-to":"exit-active",e),...y(T)},children:m},T))})})};var lt=n=>{let t=react.useRef(n);react.useEffect(()=>{t.current=n;},[n]);let e=react.useRef(new Map),r=react.useRef({animatingIds:new Set,positions:new Map}),o=react.useRef(new Map),s=react.useCallback((l,a)=>{a?e.current.set(l,a):e.current.delete(l);},[]),p=react.useCallback(l=>{let a=new Map;return e.current.forEach((d,f)=>{if(!l.has(f)){let c=d.getBoundingClientRect();c.width>0&&c.height>0&&a.set(f,c);}}),r.current.positions=a,a},[]),h=react.useCallback(l=>{let a=o.current.get(l);a&&(a.forEach(d=>d.cancel()),o.current.delete(l));},[]),g=react.useCallback(async l=>{let a=e.current.get(l);if(!a||r.current.animatingIds.has(l))return;r.current.animatingIds.add(l),p(new Set([l]));let f=t.current.exitDuration||b.EXIT_DURATION,c=t.current.exitEasing||N.EASE_IN_CUBIC,A=t.current.flipDuration||b.FLIP_DURATION,D=F.OFFSET_Y_EXIT,i=F.SCALE_EXIT,u=X.BLUR_EXIT,y=b.EXIT_STAGGER,m=a.getBoundingClientRect(),T=getComputedStyle(a),_=parseFloat(T.marginRight)||0,E=[],S=[],U=false,w=a.querySelectorAll(".sliding-text-token");if(w.length>0)w.forEach((C,v)=>{let M=v*y,O=C.animate([{opacity:1,transform:"translateY(0) scale(1)",filter:"blur(0px)"},{opacity:0,transform:`translateY(${D}px) scale(${i})`,filter:`blur(${u}px)`}],{duration:f,easing:c,delay:M,fill:"forwards"});E.push(O);});else {let C=a.animate([{opacity:1,transform:"translateY(0) scale(1)"},{opacity:0,transform:`translateY(${D}px) scale(${i})`}],{duration:f,easing:c,fill:"forwards"});E.push(C);}a.style.overflow="hidden";let B=a.animate([{width:`${m.width}px`,marginRight:`${_}px`},{width:"0px",marginRight:"0px"}],{duration:f,easing:c,fill:"forwards"});E.push(B),o.current.set(l,E);let R=f*b.FLIP_DELAY_PERCENT,Y=()=>{U||(U=true,a.style.position="absolute",a.style.opacity="0",a.style.pointerEvents="none",e.current.forEach((C,v)=>{if(v===l)return;let M=r.current.positions.get(v);if(!M)return;let O=C.getBoundingClientRect(),G=M.left-O.left,j=M.top-O.top;if(Math.abs(G)<1&&Math.abs(j)<1)return;let St=C.animate([{transform:`translate3d(${G}px, ${j}px, 0)`},{transform:"translate3d(0, 0, 0)"}],{duration:A,easing:N.SPRING_GENTLE});S.push(St);}));},P=setTimeout(Y,R);try{await Promise.all(E.map(C=>C.finished)),Y(),await Promise.all(S.map(C=>C.finished.catch(()=>{})));}catch{clearTimeout(P),r.current.animatingIds.delete(l);return}r.current.animatingIds.delete(l),o.current.delete(l),e.current.delete(l),t.current.onComplete(l);},[p]),x=react.useCallback(l=>l?r.current.animatingIds.has(l):r.current.animatingIds.size>0,[]);return react.useEffect(()=>()=>{o.current.forEach(l=>{l.forEach(a=>a.cancel());}),o.current.clear();},[]),{registerElement:s,startExit:g,isAnimating:x,cancelAnimations:h}};var H={container:{"--duration-enter":"200ms","--duration-exit":"180ms","--duration-collapse":"200ms","--duration-flip":"300ms","--stagger-enter":"15ms","--stagger-exit":"0ms","--offset-y-enter":"8px","--offset-y-exit":"-8px","--scale-exit":"0.95","--blur-enter":"4px","--blur-exit":"2px","--ease-enter":"cubic-bezier(0.33, 1, 0.68, 1)","--ease-exit":"cubic-bezier(0.32, 0, 0.67, 0)","--ease-collapse":"cubic-bezier(0.42, 0, 0.58, 1)","--ease-flip":"cubic-bezier(0.2, 0, 0.2, 1)",display:"flex",flexWrap:"wrap",alignItems:"center",gap:0},placeholder:{color:"var(--muted-foreground)",fontStyle:"italic"},tokenWrapper:{display:"inline-flex",alignItems:"center",marginRight:"4px"},tokenWrapperLast:{marginRight:0},tokenWrapperExitCompleted:{position:"absolute",opacity:0,pointerEvents:"none",marginRight:0},separator:{display:"inline",whiteSpace:"pre",opacity:1,transform:"translateY(0)",willChange:"transform, opacity",transition:`
-      opacity var(--duration-enter) var(--ease-enter),
-      transform var(--duration-enter) var(--ease-enter)
-    `},separatorExitActive:{opacity:0,transform:"translateY(-8px)",transition:`
-      opacity var(--duration-exit) var(--ease-exit),
-      transform var(--duration-exit) var(--ease-exit)
-    `},overflow:{display:"inline-flex",alignItems:"center",marginLeft:"4px",opacity:1,transform:"translateY(0)",willChange:"transform, opacity",transition:`
-      opacity var(--duration-enter) var(--ease-enter),
-      transform var(--duration-enter) var(--ease-enter)
-    `},overflowExiting:{opacity:0,transform:"translateY(-8px)",transition:`
-      opacity var(--duration-exit) var(--ease-exit),
-      transform var(--duration-exit) var(--ease-exit)
-    `}},ut=()=>{if(typeof window>"u")return H.container;let n=window.innerWidth<768,t=window.matchMedia("(prefers-reduced-motion: reduce)").matches,e=window.matchMedia("(prefers-contrast: high)").matches;return t?{...H.container,"--duration-enter":"0ms","--duration-exit":"0ms","--duration-collapse":"0ms","--duration-flip":"0ms","--stagger-enter":"0ms","--stagger-exit":"0ms","--blur-enter":"0px","--blur-exit":"0px","--offset-y-enter":"0px","--offset-y-exit":"0px","--scale-exit":"1"}:e?{...H.container,"--blur-enter":"0px","--blur-exit":"0px"}:n?{...H.container,"--duration-enter":"120ms","--duration-exit":"100ms","--duration-collapse":"120ms","--duration-flip":"180ms","--stagger-enter":"8ms","--blur-enter":"2px","--blur-exit":"1px","--offset-y-enter":"4px","--offset-y-exit":"-4px"}:H.container};var gt="waapi-animation-primitives-styles",Pt=`
-/* AnimatedTokens critical animation styles */
-.token-wrapper {
-    display: inline-flex;
-    align-items: center;
-    margin-right: 4px;
-}
-
-.token-wrapper:last-child {
-    margin-right: 0;
-}
+require('./index.css');
+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);let l=require(`react/jsx-runtime`);const u=e=>typeof window>`u`?e:window.matchMedia(`(prefers-reduced-motion: reduce)`).matches?0:window.innerWidth<768?Math.round(e*.6):e,d=e=>typeof window>`u`?e:window.matchMedia(`(prefers-reduced-motion: reduce)`).matches?0:window.innerWidth<768?Math.round(e*.5):e,f={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},p={OFFSET_Y_ENTER:8,OFFSET_Y_EXIT:-8,OFFSET_X:16,SCALE_ENTER:.85,SCALE_EXIT:.85,ROTATE_EXIT:0},m={BLUR_ENTER:4,BLUR_EXIT:2},h={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)`},g={tokenEnter:{get duration(){return u(f.ENTER_DURATION)},get stagger(){return d(f.ENTER_STAGGER)},easing:h.MATERIAL_DECELERATE,blur:m.BLUR_ENTER,offsetY:p.OFFSET_Y_ENTER,scale:p.SCALE_ENTER},tokenExit:{get duration(){return u(f.EXIT_DURATION)},get stagger(){return d(f.EXIT_STAGGER)},easing:h.MATERIAL_ACCELERATE,blur:m.BLUR_EXIT,offsetY:p.OFFSET_Y_EXIT,scale:p.SCALE_EXIT},collapse:{get duration(){return u(f.COLLAPSE_DURATION)},delay:f.COLLAPSE_DELAY,easing:h.MATERIAL_STANDARD},flip:{get duration(){return u(f.FLIP_DURATION)},delayPercent:f.FLIP_DELAY_PERCENT,easing:h.EASE_REORDER}},_={DURATION_ENTER:f.ENTER_DURATION,DURATION_EXIT:f.EXIT_DURATION,DURATION_FLIP:f.FLIP_DURATION,STAGGER_DELAY:f.ENTER_STAGGER,OFFSET_VERTICAL:p.OFFSET_Y_ENTER,OFFSET_HORIZONTAL:p.OFFSET_X,BLUR_AMOUNT:m.BLUR_ENTER,EASING_ENTER:h.EASE_OUT_CUBIC,EASING_EXIT:h.EASE_IN_CUBIC,EASING_FLIP:h.SPRING_GENTLE,SPRING_EASING:h.SPRING_GENTLE},v={tokenEnter:{duration:f.ENTER_DURATION,stagger:f.ENTER_STAGGER,easing:h.MATERIAL_DECELERATE,blur:m.BLUR_ENTER,offsetY:p.OFFSET_Y_ENTER,scale:p.SCALE_ENTER},tokenExit:{duration:f.EXIT_DURATION,stagger:f.EXIT_STAGGER,easing:h.MATERIAL_ACCELERATE,blur:m.BLUR_EXIT,offsetY:p.OFFSET_Y_EXIT,scale:p.SCALE_EXIT},collapse:{duration:f.COLLAPSE_DURATION,delay:f.COLLAPSE_DELAY,easing:h.MATERIAL_STANDARD},flip:{duration:f.FLIP_DURATION,delayPercent:f.FLIP_DELAY_PERCENT,easing:h.EASE_REORDER}},y={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}},b=[{name:`--waapi-duration-exit`,syntax:`<time>`,inherits:!0,initialValue:`${f.EXIT_DURATION}ms`},{name:`--waapi-duration-enter`,syntax:`<time>`,inherits:!0,initialValue:`${f.ENTER_DURATION}ms`},{name:`--waapi-duration-flip`,syntax:`<time>`,inherits:!0,initialValue:`${f.FLIP_DURATION}ms`},{name:`--waapi-duration-collapse`,syntax:`<time>`,inherits:!0,initialValue:`${f.COLLAPSE_DURATION}ms`},{name:`--waapi-stagger-enter`,syntax:`<time>`,inherits:!0,initialValue:`${f.ENTER_STAGGER}ms`},{name:`--waapi-stagger-exit`,syntax:`<time>`,inherits:!0,initialValue:`${f.EXIT_STAGGER}ms`},{name:`--waapi-offset-y-enter`,syntax:`<length>`,inherits:!0,initialValue:`${p.OFFSET_Y_ENTER}px`},{name:`--waapi-offset-y-exit`,syntax:`<length>`,inherits:!0,initialValue:`${p.OFFSET_Y_EXIT}px`},{name:`--waapi-offset-x`,syntax:`<length>`,inherits:!0,initialValue:`${p.OFFSET_X}px`},{name:`--waapi-scale-exit`,syntax:`<number>`,inherits:!0,initialValue:`${p.SCALE_EXIT}`},{name:`--waapi-scale-enter`,syntax:`<number>`,inherits:!0,initialValue:`${p.SCALE_ENTER}`},{name:`--waapi-blur-enter`,syntax:`<length>`,inherits:!0,initialValue:`${m.BLUR_ENTER}px`},{name:`--waapi-blur-exit`,syntax:`<length>`,inherits:!0,initialValue:`${m.BLUR_EXIT}px`},{name:`--waapi-stagger-index`,syntax:`<integer>`,inherits:!1,initialValue:`0`}],x=()=>b.map(e=>`@property ${e.name} {
+  syntax: '${e.syntax}';
+  inherits: ${e.inherits};
+  initial-value: ${e.initialValue};
+}`).join(`
 
-.token-wrapper.exit-completed {
-    position: absolute !important;
-    opacity: 0 !important;
-    pointer-events: none !important;
-    margin-right: 0;
-}
+`),S={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`},C={[S.durationEnter]:`${f.ENTER_DURATION}ms`,[S.durationExit]:`${f.EXIT_DURATION}ms`,[S.durationCollapse]:`${f.COLLAPSE_DURATION}ms`,[S.durationFlip]:`${f.FLIP_DURATION}ms`,[S.staggerEnter]:`${f.ENTER_STAGGER}ms`,[S.staggerExit]:`${f.EXIT_STAGGER}ms`,[S.offsetYEnter]:`${p.OFFSET_Y_ENTER}px`,[S.offsetYExit]:`${p.OFFSET_Y_EXIT}px`,[S.offsetX]:`${p.OFFSET_X}px`,[S.scaleExit]:`${p.SCALE_EXIT}`,[S.blurEnter]:`${m.BLUR_ENTER}px`,[S.blurExit]:`${m.BLUR_EXIT}px`,[S.easeEnter]:h.EASE_OUT_CUBIC,[S.easeExit]:h.EASE_IN_CUBIC,[S.easeCollapse]:h.EASE_IN_OUT,[S.easeFlip]:h.EASE_FLIP,[S.separatorDuration]:`${f.FLIP_DURATION}ms`,[S.separatorDelay]:`${Math.round(f.EXIT_DURATION*f.FLIP_DELAY_PERCENT)}ms`,[S.separatorEasing]:h.EASE_FLIP},w=e=>`var(${e})`,T={...C},E={container:{...T,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(${p.SCALE_EXIT})`},separatorExitCompleted:{opacity:0,position:`absolute`,pointerEvents:`none`,width:0,overflow:`hidden`},overflow:{display:`inline-flex`,alignItems:`center`,whiteSpace:`nowrap`}},D={container:{...T,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(${w(S.blurEnter)})`},enterTo:{opacity:1,transform:`translate(0, 0)`,filter:`blur(0)`},exitActive:{opacity:0,filter:`blur(${w(S.blurExit)})`},verticalEnterFrom:{transform:`translateY(${w(S.offsetYEnter)})`},verticalExitActive:{transform:`translateY(${w(S.offsetYExit)})`},horizontalEnterFrom:{transform:`translateX(${w(S.offsetX)})`},horizontalExitActive:{transform:`translateX(calc(${w(S.offsetX)} * -1))`}},O={mobile:{[S.durationEnter]:`120ms`,[S.durationExit]:`100ms`,[S.durationCollapse]:`120ms`,[S.durationFlip]:`180ms`,[S.staggerEnter]:`8ms`,[S.blurEnter]:`2px`,[S.blurExit]:`1px`,[S.offsetYEnter]:`4px`,[S.offsetYExit]:`-4px`},smallMobile:{[S.durationEnter]:`80ms`,[S.durationExit]:`60ms`,[S.durationFlip]:`120ms`,[S.staggerEnter]:`4ms`,[S.blurEnter]:`1px`,[S.blurExit]:`0px`,[S.offsetYEnter]:`2px`,[S.offsetYExit]:`-2px`},reducedMotion:{[S.durationEnter]:`0ms`,[S.durationExit]:`0ms`,[S.durationCollapse]:`0ms`,[S.durationFlip]:`0ms`,[S.staggerEnter]:`0ms`,[S.staggerExit]:`0ms`,[S.blurEnter]:`0px`,[S.blurExit]:`0px`,[S.offsetYEnter]:`0px`,[S.offsetYExit]:`0px`,[S.scaleExit]:`1`},highContrast:{[S.blurEnter]:`0px`,[S.blurExit]:`0px`}},k=()=>{if(typeof window>`u`)return C;if(window.matchMedia(`(prefers-reduced-motion: reduce)`).matches)return{...C,...O.reducedMotion};if(window.matchMedia(`(prefers-contrast: high)`).matches)return{...C,...O.highContrast};let e=window.innerWidth;return e<=480?{...C,...O.smallMobile}:e<=768?{...C,...O.mobile}:C},A=()=>`:root {\n${Object.entries(C).map(([e,t])=>`  ${e}: ${t};`).join(`
+`)}\n}`,j=()=>`
+/* ============================================
+   @property DEFINITIONS (Modern CSS 2024)
+   Enables typed, animatable CSS custom properties
+   Baseline: July 2024 - All major browsers
+   ============================================ */
+${x()}
 
-.token-separator {
-    display: inline !important;
-    white-space: pre;
-}
+/* ============================================
+   CSS VARIABLES (derived from animationUtils.ts SSOT)
+   ============================================ */
+${A()}
 
-.token-separator.exit-completed {
-    opacity: 0;
-    position: absolute;
-    pointer-events: none;
+@media (max-width: 768px) {
+  :root {
+${Object.entries(O.mobile).map(([e,t])=>`    ${e}: ${t};`).join(`
+`)}
+  }
 }
 
-.token-overflow {
-    display: inline-flex;
-    align-items: center;
-    margin-left: 4px;
+@media (max-width: 480px) {
+  :root {
+${Object.entries(O.smallMobile).map(([e,t])=>`    ${e}: ${t};`).join(`
+`)}
+  }
 }
 
-/* Reduced motion support */
 @media (prefers-reduced-motion: reduce) {
-    .token-wrapper,
-    .token-overflow,
-    .sliding-text,
-    .sliding-number {
-        animation: none !important;
-        transition: none !important;
-        transform: none !important;
-    }
+  :root {
+${Object.entries(O.reducedMotion).map(([e,t])=>`    ${e}: ${t};`).join(`
+`)}
+  }
 }
 
-/* Mobile optimizations */
-@media (max-width: 767px) {
-    .token-wrapper {
-        transform: translateZ(0);
-        backface-visibility: hidden;
-        perspective: 1000px;
-    }
-}
-`;function ht(){if(typeof document>"u"||document.getElementById(gt))return;let n=document.createElement("style");n.id=gt,n.textContent=Pt,document.head.appendChild(n);}var $t=({tokens:n,placeholder:t="No tokens",maxVisible:e,textAnimationMode:r="character",textDirection:o="vertical",textStaggerDelay:s=15,separator:p=", ",enableWidthAnimation:h=false,className:g="",tokenClassName:x="",placeholderClassName:l="",separatorClassName:a=""})=>{let d=react.useRef(true);react.useEffect(()=>{ht();},[]),react.useEffect(()=>(d.current=true,()=>{d.current=false;}),[]);let[f,c]=react.useState(n),A=react.useRef(new Set),D=react.useCallback(R=>{d.current&&(A.current.delete(R),c(Y=>Y.filter(P=>P.id!==R)));},[]),{registerElement:i,startExit:u,isAnimating:y}=lt({onComplete:D}),m=react.useRef(u);react.useEffect(()=>{m.current=u;},[u]),react.useEffect(()=>{let R=new Set(n.map(v=>v.id)),Y=new Set(f.map(v=>v.id)),P=f.filter(v=>!R.has(v.id)&&!A.current.has(v.id)),C=n.filter(v=>!Y.has(v.id));if(!(P.length===0&&C.length===0)&&(P.forEach(v=>{let M=f.findIndex(G=>G.id===v.id);e!==void 0&&M>=e?c(G=>G.filter(j=>j.id!==v.id)):(A.current.add(v.id),m.current(v.id));}),C.length>0)){let v=f.filter(O=>!R.has(O.id)),M=[...n];v.forEach(O=>{let G=f.findIndex(j=>j.id===O.id);G!==-1&&G<=M.length&&M.splice(G,0,O);}),JSON.stringify(M.map(O=>O.id))!==JSON.stringify(f.map(O=>O.id))&&c(M);}},[n,f,e]);let T=f.filter(R=>!A.current.has(R.id)||!y(R.id)),_=e?f.slice(0,e):f,E=e?Math.max(0,T.length-e):0,S=react.useRef(0),U=E>0&&S.current===0,w=E===0&&S.current>0;react.useEffect(()=>{S.current=E;},[E]);let B=f.length===0&&!y()&&!!t;return jsxRuntime.jsxs("div",{style:ut(),className:g,children:[B&&jsxRuntime.jsx(J,{text:t,mode:z.placeholder.mode,direction:z.placeholder.direction,blur:z.placeholder.blur,duration:z.placeholder.duration,initial:"initial",animate:"animate",className:`token-placeholder ${l}`},"placeholder"),_.map((R,Y)=>{let P=A.current.has(R.id),C=!P&&Y<_.length-1;return jsxRuntime.jsxs("div",{className:`token-wrapper ${x} ${P?"exit-active":""}`,ref:v=>i(R.id,v),children:[jsxRuntime.jsx(J,{text:R.text,mode:P?"none":r,direction:o,staggerDelay:s,duration:I.DURATION_ENTER,blur:z.newToken.blur,widthAnimation:!P&&h,initial:P?false:"initial",animate:"animate"}),C&&jsxRuntime.jsx("span",{className:`token-separator ${a}`,children:p})]},R.id)}),(E>0||w)&&jsxRuntime.jsxs("div",{className:`token-overflow ${x} ${U?"entering":""} ${w?"exiting":""}`,ref:R=>i("overflow-counter",R),children:[jsxRuntime.jsx("span",{className:`token-separator ${a}`,children:"+"}),jsxRuntime.jsx(rt,{value:E,duration:I.DURATION_ENTER,fontSize:"inherit",fontWeight:"inherit",color:"inherit"}),jsxRuntime.jsx(J,{text:" more",mode:r,direction:o,staggerDelay:s,duration:w?I.DURATION_EXIT:I.DURATION_ENTER,blur:z.newToken.blur,initial:U?"initial":false,animate:"animate"})]})]})};var xt=react.createContext(null),Bt=()=>{let n=react.useContext(xt);if(!n)throw new Error("useDebug must be used within DebugProvider");return n},Yt=({children:n})=>{let[t,e]=react.useState([]),[r,o]=react.useState(true),s=react.useRef(r);s.current=r;let p=react.useCallback(c=>{},[]),h=react.useCallback(()=>{},[]),g=react.useCallback(()=>{},[]),x=react.useCallback(()=>{},[]),l=react.useCallback(()=>{},[]),a=react.useCallback(()=>"",[t]),d=react.useCallback(()=>"",[t]),f=react.useMemo(()=>({events:[],isEnabled:false,enableDebug:g,disableDebug:x,toggleDebug:l,logEvent:p,clearEvents:h,getEventLog:d,exportToCSV:a}),[t,r,g,x,l,p,h,d,a]);return jsxRuntime.jsx(xt.Provider,{value:f,children:n})};var nt=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(t,e,r,o){}endAnimation(t){}detectOverlaps(t){let e=[];return this.activeAnimations.forEach((r,o)=>{o!==t&&e.push(`${r.type}:${r.elementId}`);}),e}getOverlaps(){return []}getTimeline(){return []}getActiveCount(){return 0}getActiveAnimations(){return []}getCompletedAnimations(){return []}getSummary(){return {totalAnimations:0,totalDuration:0,overlaps:[],timeline:[],activeAnimations:[]}}getTimelineForVisualization(){return []}},zt=new nt;function pt(n){let t=getComputedStyle(n);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 Wt(n){let t=pt(n);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 Tt(n){let t=n.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 jt(n){let t=Tt(n);return {x:t.x,y:t.y,w:t.width,h:t.height}}function Ht(n,t){return {deltaX:Math.round((n.left-t.left)*100)/100,deltaY:Math.round((n.top-t.top)*100)/100,deltaWidth:Math.round((n.width-t.width)*100)/100,deltaHeight:Math.round((n.height-t.height)*100)/100}}function Vt(n,t){let e=pt(t);return Object.entries(n).map(([r,o])=>{let s=e[r]||"",p=yt(r,o),h=yt(r,s);return {property:r,expected:o,actual:s,matches:p===h}})}function yt(n,t){if(!t)return "";if(n==="opacity")return parseFloat(t).toString();if(n==="transform"){if(t==="none")return "none";let e=t.match(/matrix\(([^)]+)\)/);if(e&&e[1]){let r=e[1].split(",").map(p=>parseFloat(p.trim())),o=r[4],s=r[5];if(o!==void 0&&s!==void 0)return `translate(${Math.round(o)}px, ${Math.round(s)}px)`}return t}if(n==="width"||n==="height"||n.includes("margin")){let e=parseFloat(t);if(!isNaN(e))return `${Math.round(e)}px`}if(n==="filter"){if(t==="none")return "none";let e=t.match(/blur\(([^)]+)\)/);if(e&&e[1]){let r=parseFloat(e[1]);return `blur(${Math.round(r)}px)`}}return t}function qt(n){let t=performance.now();return {start:t,expectedDuration:n,end:()=>{let e=performance.now(),r=e-t,o=r-n;return {startTime:Math.round(t*100)/100,endTime:Math.round(e*100)/100,expectedDuration:n,actualDuration:Math.round(r*100)/100,deviation:Math.round(o*100)/100,deviationPercent:Math.round(o/n*1e4)/100}}}}function Jt(n){let t=n.deviation>=0?"+":"",e=Math.abs(n.deviation)<10?"\u2705":"\u26A0\uFE0F";return `Expected: ${n.expectedDuration}ms | Actual: ${n.actualDuration}ms | Deviation: ${t}${n.deviation}ms ${e}`}function bt(n){let t=n.effect?.getTiming?.();return {id:n.id,playState:n.playState,currentTime:n.currentTime,playbackRate:n.playbackRate,pending:n.pending,duration:t?.duration,easing:t?.easing,fill:t?.fill}}function Zt(n){return n.getAnimations().map(bt)}exports.ANIMATION_CONFIGS=wt;exports.ANIMATION_DEFAULTS=I;exports.AnimatedTokens=$t;exports.ChoreographyTrackerClass=nt;exports.DebugProvider=Yt;exports.EASINGS=N;exports.EFFECTS=X;exports.PRESETS=z;exports.RESPONSIVE_CONFIGS=Dt;exports.SlidingNumber=rt;exports.SlidingText=J;exports.TIMING=b;exports.TRANSFORMS=F;exports.animatedTokensStyles=H;exports.calculatePositionDelta=Ht;exports.captureAnimationInfo=bt;exports.captureComputedStyles=pt;exports.captureElementAnimations=Zt;exports.capturePosition=Tt;exports.capturePositionForLog=jt;exports.captureStylesForLog=Wt;exports.choreographyTracker=zt;exports.compareStyles=Vt;exports.createAnimationTimer=qt;exports.formatTimingResult=Jt;exports.getResponsiveAnimatedTokensStyle=ut;exports.getResponsiveDuration=q;exports.getResponsiveStagger=ot;exports.getSlidingTextTokenStyle=at;exports.slidingTextStyles=$;exports.useDebug=Bt;exports.useWAAPIAnimations=lt;//# sourceMappingURL=index.cjs.map
+@media (prefers-contrast: high) {
+  :root {
+${Object.entries(O.highContrast).map(([e,t])=>`    ${e}: ${t};`).join(`
+`)}
+  }
+}
+`.trim(),M=`waapi-animation-primitives-vars`;let N=!1;const P=()=>{if(typeof document>`u`||N)return;if(document.getElementById(M)){N=!0;return}let e=document.createElement(`style`);e.id=M,e.textContent=j(),document.head.appendChild(e),N=!0},F=()=>{if(typeof document>`u`)return;let e=document.getElementById(M);e&&(e.remove(),N=!1)},I=()=>{F(),P()};typeof document<`u`&&(document.readyState===`loading`?document.addEventListener(`DOMContentLoaded`,P):P());function L(e,t){let n=t?.locale||`en-US`,r={style:t?.style||`decimal`,minimumFractionDigits:t?.minimumFractionDigits,maximumFractionDigits:t?.maximumFractionDigits,useGrouping:t?.useGrouping??!0};t?.style===`currency`&&t?.currency&&(r.currency=t.currency);let i=new Intl.NumberFormat(n,r).formatToParts(e),a=[],o=0;i.forEach(e=>{e.type===`integer`&&(o+=e.value.length)});let s=o,c=0,l=0;return i.forEach((e,t)=>{if(e.type===`integer`)for(let t of e.value)a.push({char:t,key:`int-${s}`,isDigit:!0,position:s}),s--;else if(e.type===`fraction`)for(let t of e.value)c++,a.push({char:t,key:`frac-${c}`,isDigit:!0,position:-c});else e.type===`decimal`?a.push({char:e.value,key:`decimal`,isDigit:!1,position:0}):e.type===`group`?(l++,a.push({char:e.value,key:`group-${l}`,isDigit:!1,position:0})):e.type===`currency`?a.push({char:e.value,key:`currency-${t}`,isDigit:!1,position:0}):e.type===`percentSign`?a.push({char:e.value,key:`percent`,isDigit:!1,position:0}):a.push({char:e.value,key:`symbol-${t}`,isDigit:!1,position:0})}),a}function R({value:e,duration:t=700,fontSize:n=`3rem`,fontWeight:r=`700`,color:i=`#000`,digitHeight:a=60,stagger:o=30,motionBlur:s=!0,format:u,trend:d=0,animationConfig:f}){let p=(0,c.useMemo)(()=>{if(f){let{overshoot:e=1,stiffness:t=1,mass:n=1}=f,r=.34*t,i=1+.56*e,a=.64/n;return`cubic-bezier(${Math.min(r,1).toFixed(2)}, ${Math.min(i,2).toFixed(2)}, ${Math.min(a,1).toFixed(2)}, 1)`}return`cubic-bezier(0.34, 1.56, 0.64, 1)`},[f]),m=(0,c.useMemo)(()=>L(e,u),[e,u]),h=(0,c.useRef)(new Set),g=(0,c.useRef)(!0),_=(0,c.useMemo)(()=>{if(g.current)return new Set;let e=new Set;return m.forEach(t=>{h.current.has(t.key)||e.add(t.key)}),e},[m]);(0,c.useEffect)(()=>{g.current=!1,h.current=new Set(m.map(e=>e.key))},[m]);let v=e=>(Math.abs(e)-1)*o;return(0,l.jsx)(`div`,{style:{display:`inline-flex`,alignItems:`center`,fontSize:n,fontWeight:r,color:i,fontVariantNumeric:`tabular-nums`,fontFamily:`system-ui, -apple-system, sans-serif`,overflow:`hidden`},children:m.map(e=>{let n=_.has(e.key);return e.isDigit?(0,l.jsx)(B,{digit:Number.parseInt(e.char),duration:t,digitHeight:a,delay:v(e.position),motionBlur:s,easing:p,isEntering:n,trend:d},e.key):(0,l.jsx)(z,{char:e.char,isEntering:n,duration:t,easing:p},e.key)})})}function z({char:e,isEntering:t,duration:n,easing:r}){let i=(0,c.useRef)(null),a=(0,c.useRef)(!1);return(0,c.useLayoutEffect)(()=>{!i.current||!t||a.current||(a.current=!0,i.current.animate([{opacity:0,transform:`scale(0.8)`},{opacity:1,transform:`scale(1)`}],{duration:n*.3,easing:r,fill:`forwards`}))},[t,n,r]),(0,l.jsx)(`span`,{ref:i,style:{display:`inline-block`,whiteSpace:`pre`,opacity:t?0:1},children:e})}function B({digit:e,duration:t,digitHeight:n,delay:r,motionBlur:i,easing:a,isEntering:o,trend:s}){let u=(0,c.useRef)(null),d=(0,c.useRef)(null),f=(0,c.useRef)(null),p=(0,c.useRef)(`blur-${Math.random().toString(36).slice(2,9)}`).current,m=(0,c.useRef)(null),h=(0,c.useRef)(e),g=(0,c.useRef)(!1),_=(0,c.useMemo)(()=>{let e=[];for(let t=-1;t<=1;t++)for(let t=0;t<=9;t++)e.push(t);return e},[]);(0,c.useLayoutEffect)(()=>{if(!g.current){g.current=!0;let t=-(e+10)*n;m.current=t,h.current=e,u.current&&(u.current.style.transform=`translateY(${t}px)`)}},[e,n]),(0,c.useLayoutEffect)(()=>{!d.current||!o||d.current.animate([{opacity:0,transform:`scale(0.5) translateY(-20px)`},{opacity:1,transform:`scale(1) translateY(0)`}],{duration:t*.4,easing:a,fill:`forwards`})},[o,t,a]),(0,c.useEffect)(()=>{h.current=e,g.current&&(e===(m.current===null?e:((Math.round(-m.current/n)-10)%10+10)%10)&&m.current!==null||v(e))},[e,n]);let v=e=>{if(!u.current||!d.current)return;if(f.current){let e=getComputedStyle(u.current);m.current=new DOMMatrix(e.transform).m42,f.current.cancel(),f.current=null,u.current.style.transform=`translateY(${m.current}px)`}let o=m.current===null?e+10:-m.current/n,c=((Math.round(o)-10)%10+10)%10;if(e===c&&m.current!==null){let t=-(e+10)*n;if(u.current){let e=f.current;e&&e.cancel(),u.current.style.transform=`translateY(${t}px)`}m.current=t;return}let l;s===1?l=e>=c?e-c:10-c+e:s===-1?l=e<=c?e-c:e-c-10:(l=e-c,l>5?l-=10:l<-5&&(l+=10));let g=m.current??-(c+10)*n,_=g-l*n,y=document.getElementById(p)?.querySelector(`feGaussianBlur`);if(i&&y){let e=Math.min(Math.abs(l)*1.2,6);y.setAttribute(`stdDeviation`,`0,${e}`),d.current.style.filter=`url(#${p})`}let b=u.current.animate([{transform:`translateY(${g}px)`},{transform:`translateY(${_}px)`}],{duration:t,delay:r,easing:a,fill:`forwards`});f.current=b,b.onfinish=()=>{let t=-(e+10)*n;u.current&&(b.cancel(),u.current.style.transform=`translateY(${t}px)`),m.current=t,d.current&&(d.current.style.filter=`none`),y&&y.setAttribute(`stdDeviation`,`0,0`),f.current=null,h.current!==e&&requestAnimationFrame(()=>{v(h.current)})},b.oncancel=()=>{f.current=null}};return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(`svg`,{style:{position:`absolute`,width:0,height:0},"aria-hidden":`true`,children:(0,l.jsx)(`defs`,{children:(0,l.jsx)(`filter`,{id:p,children:(0,l.jsx)(`feGaussianBlur`,{in:`SourceGraphic`,stdDeviation:`0,0`})})})}),(0,l.jsx)(`div`,{ref:d,style:{position:`relative`,height:`${n}px`,overflow:`hidden`,width:`0.65em`,textAlign:`center`,opacity:o?0:1},children:(0,l.jsx)(`div`,{ref:u,style:{position:`absolute`,left:0,right:0,willChange:`transform`},children:_.map((e,t)=>(0,l.jsx)(`div`,{style:{height:`${n}px`,display:`flex`,alignItems:`center`,justifyContent:`center`},children:e},t))})})]})}const V=(0,c.createContext)(null),H=()=>{let e=(0,c.useContext)(V);if(!e)throw Error(`useDebug must be used within DebugProvider`);return e},ee=({children:e})=>{let[t,n]=(0,c.useState)([]),[r,i]=(0,c.useState)(!0),[a,o]=(0,c.useState)(!1),s=(0,c.useRef)(r),u=(0,c.useRef)([]),d=(0,c.useRef)(null);(0,c.useRef)([]);let f=(0,c.useRef)(!1);s.current=r,f.current=a;let p=(0,c.useCallback)(()=>{if(u.current.length===0)return;let e=[...u.current];u.current=[],d.current=null,n(t=>[...t,...e])},[]);(0,c.useEffect)(()=>()=>{d.current!==null&&(cancelAnimationFrame(d.current),u.current.length>0&&(n(e=>[...e,...u.current]),u.current=[]))},[]);let m=(0,c.useCallback)(e=>{},[p]),h=(0,c.useCallback)(()=>{},[]),g=(0,c.useCallback)(()=>{},[]),_=(0,c.useCallback)(()=>{},[]),v=(0,c.useCallback)(()=>{},[]),y=(0,c.useCallback)(()=>{},[]),b=(0,c.useCallback)(()=>[],[]),x=(0,c.useCallback)(()=>{},[p]),S=(0,c.useCallback)(()=>``,[t]),C=(0,c.useCallback)(()=>``,[t]),w=(0,c.useMemo)(()=>({events:[],isEnabled:!1,isCollecting:!1,enableDebug:g,disableDebug:_,toggleDebug:v,logEvent:m,clearEvents:h,getEventLog:C,exportToCSV:S,startCollecting:y,stopCollecting:b,flushEvents:x}),[t,r,a,g,_,v,m,h,C,S,y,b,x]);return(0,l.jsx)(V.Provider,{value:w,children:e})};function U(e){let t=getComputedStyle(e);return{opacity:t.opacity,transform:t.transform,filter:t.filter,width:t.width,height:t.height,marginRight:t.marginRight,marginLeft:t.marginLeft,position:t.position,visibility:t.visibility,pointerEvents:t.pointerEvents}}function te(e){let t=U(e);return{opacity:t.opacity,transform:t.transform===`none`?`none`:t.transform,filter:t.filter===`none`?`none`:t.filter,width:t.width,marginRight:t.marginRight,position:t.position}}function W(e){let t=e.getBoundingClientRect();return{x:Math.round(t.x*100)/100,y:Math.round(t.y*100)/100,width:Math.round(t.width*100)/100,height:Math.round(t.height*100)/100,top:Math.round(t.top*100)/100,left:Math.round(t.left*100)/100,right:Math.round(t.right*100)/100,bottom:Math.round(t.bottom*100)/100}}function ne(e){let t=W(e);return{x:t.x,y:t.y,w:t.width,h:t.height}}function re(e,t){return{deltaX:Math.round((e.left-t.left)*100)/100,deltaY:Math.round((e.top-t.top)*100)/100,deltaWidth:Math.round((e.width-t.width)*100)/100,deltaHeight:Math.round((e.height-t.height)*100)/100}}function G(e,t){let n=U(t);return Object.entries(e).map(([e,t])=>{let r=n[e]||``;return{property:e,expected:t,actual:r,matches:K(e,t)===K(e,r)}})}function K(e,t){if(!t)return``;if(e===`opacity`)return parseFloat(t).toString();if(e===`transform`){if(t===`none`)return`none`;let e=t.match(/matrix\(([^)]+)\)/);if(e&&e[1]){let t=e[1].split(`,`).map(e=>parseFloat(e.trim())),n=t[4],r=t[5];if(n!==void 0&&r!==void 0)return`translate(${Math.round(n)}px, ${Math.round(r)}px)`}return t}if(e===`width`||e===`height`||e.includes(`margin`)){let e=parseFloat(t);if(!isNaN(e))return`${Math.round(e)}px`}if(e===`filter`){if(t===`none`)return`none`;let e=t.match(/blur\(([^)]+)\)/);if(e&&e[1]){let t=parseFloat(e[1]);return`blur(${Math.round(t)}px)`}}return t}function q(e){let t=performance.now();return{start:t,expectedDuration:e,end:()=>{let n=performance.now(),r=n-t,i=r-e;return{startTime:Math.round(t*100)/100,endTime:Math.round(n*100)/100,expectedDuration:e,actualDuration:Math.round(r*100)/100,deviation:Math.round(i*100)/100,deviationPercent:Math.round(i/e*1e4)/100}}}}function ie(e){let t=e.deviation>=0?`+`:``,n=Math.abs(e.deviation)<10?`✅`:`⚠️`;return`Expected: ${e.expectedDuration}ms | Actual: ${e.actualDuration}ms | Deviation: ${t}${e.deviation}ms ${n}`}function ae(e){let t=e.effect?.getTiming?.();return{id:e.id,playState:e.playState,currentTime:e.currentTime,playbackRate:e.playbackRate,pending:e.pending,duration:t?.duration,easing:t?.easing,fill:t?.fill}}function oe(e){return e.getAnimations().map(ae)}var se=class{constructor(){this.activeAnimations=new Map,this.timeline=[],this.completedAnimations=[],this.sessionStartTime=0}startSession(){}getRelativeTime(){return Math.round((performance.now()-this.sessionStartTime)*100)/100}startAnimation(e,t,n,r){}endAnimation(e){}detectOverlaps(e){let t=[];return this.activeAnimations.forEach((n,r)=>{r!==e&&t.push(`${n.type}:${n.elementId}`)}),t}getOverlaps(){return[]}getTimeline(){return[]}getActiveCount(){return 0}getActiveAnimations(){return[]}getCompletedAnimations(){return[]}getSummary(){return{totalAnimations:0,totalDuration:0,overlaps:[],timeline:[],activeAnimations:[]}}getTimelineForVisualization(){return[]}};const J=new se,Y=({text:e,mode:t=`word`,direction:n=`vertical`,staggerDelay:r=_.STAGGER_DELAY,duration:i=_.DURATION_ENTER,easing:a=_.EASING_ENTER,blur:o=!0,widthAnimation:s=!1,initial:u=`initial`,exit:d,className:f=``,style:p})=>{let m=(0,c.useRef)(null),h=(0,c.useRef)(null),{logEvent:g}=H(),v=(0,c.useRef)(null),y=(0,c.useRef)(null),b=(0,c.useRef)(!1),[x,S]=(0,c.useState)(u!==`initial`);(0,c.useEffect)(()=>{u===`initial`&&!b.current&&(b.current=!0,requestAnimationFrame(()=>{S(!0)}))},[u]);let C=d===`exit`?`exit`:x?`animate`:`initial`,w=t===`character`?e.split(``):[e],T=i+(w.length-1)*r;(0,c.useEffect)(()=>{if(C===`animate`&&m.current){let c=m.current;v.current=q(T),y.current=`enter-${e.slice(0,10)}-${Date.now()}`,J.startAnimation(y.current,`enter`,e,T);let l=W(c);g({type:`text-enter-start`,source:`SlidingText`,message:`Enter animation starting for: "${e}"`,timing:{startTime:v.current.start,expectedDuration:T},position:{element:e,x:l.x,y:l.y,width:l.width,height:l.height},animation:{name:`enter`,phase:`start`,easing:a,fill:`forwards`},data:{text:e,charCount:w.length,mode:t,direction:n,staggerDelay:r,duration:i,totalDuration:T,blur:o,widthAnimation:s}});let u=setTimeout(()=>{if(v.current&&y.current&&m.current){let t=v.current.end();J.endAnimation(y.current);let n=W(m.current);g({type:`text-enter-complete`,source:`SlidingText`,message:`Enter animation complete for: "${e}"`,timing:{startTime:t.startTime,endTime:t.endTime,expectedDuration:t.expectedDuration,actualDuration:t.actualDuration,deviation:t.deviation,deviationPercent:t.deviationPercent},position:{element:e,x:n.x,y:n.y,width:n.width,height:n.height},animation:{name:`enter`,phase:`complete`,progress:1,easing:a,fill:`forwards`},data:{text:e,deviationStatus:Math.abs(t.deviation)<10?`OK`:`WARNING`}})}},T+50);return()=>clearTimeout(u)}},[C,e,t,n,r,i,a,o,s,T,w.length,g]),(0,c.useLayoutEffect)(()=>{if(!s||!m.current||!h.current)return;let e=m.current,t=h.current;if(C===`initial`)e.style.width=`0px`;else if(C===`animate`)if(CSS.supports(`interpolate-size`,`allow-keywords`))e.style.width=`auto`,e.style.transition=`width ${i}ms ${a}`;else{let n=t.scrollWidth;e.style.width=`${n}px`,e.style.transition=`width ${i}ms ${a}`;let r=setTimeout(()=>{e.style.width=`auto`},i);return()=>clearTimeout(r)}else if(C===`exit`){let t=e.getBoundingClientRect().width;e.style.width=`${t}px`,e.getBoundingClientRect(),e.style.width=`0px`,e.style.transition=`width ${_.DURATION_EXIT}ms ${_.EASING_EXIT}`}},[C,s,i,a,e]);let E=e=>{let t=e*r,s=C===`exit`,c=s?_.DURATION_EXIT:i,l=s?_.EASING_EXIT:a;return{transition:`
+                opacity ${c}ms ${l} ${t}ms,
+                transform ${c}ms ${l} ${t}ms,
+                filter ${c}ms ${l} ${t}ms
+            `,"--blur-amount":o?`${_.BLUR_AMOUNT}px`:`0px`,"--offset":n===`vertical`?`${_.OFFSET_VERTICAL}px`:`${_.OFFSET_HORIZONTAL}px`}};return(0,l.jsx)(`div`,{ref:m,className:`waapi-sliding-text-container ${f}`,style:p,children:(0,l.jsx)(`div`,{ref:h,className:`waapi-sliding-text-content waapi-direction-${n}`,children:w.map((e,t)=>(0,l.jsx)(`span`,{className:`waapi-sliding-text-token ${C===`initial`?`enter-from`:C===`animate`?`enter-to`:`exit-active`}`,style:E(t),children:e},t))})})},ce=e=>{let{logEvent:t}=H(),n=(0,c.useRef)(t);(0,c.useEffect)(()=>{n.current=t},[t]);let r=(0,c.useRef)(e);(0,c.useEffect)(()=>{r.current=e},[e]);let i=(0,c.useRef)(new Map),a=(0,c.useRef)(new Map),o=(0,c.useRef)({animatingIds:new Set,positions:new Map,separatorStates:new Map}),s=(0,c.useRef)(new Map),l=(0,c.useCallback)((e,t)=>{t?i.current.set(e,t):i.current.delete(e)},[]),u=(0,c.useCallback)(e=>{let t=new Map;return i.current.forEach((n,r)=>{if(!e.has(r)){let e=n.getBoundingClientRect();e.width>0&&e.height>0&&t.set(r,e)}}),o.current.positions=t,t},[]),d=(0,c.useCallback)(e=>{let t=s.current.get(e);t&&(t.forEach(e=>e.cancel()),s.current.delete(e))},[]),g=(0,c.useCallback)((e,t)=>{o.current.separatorStates.has(e)||o.current.separatorStates.set(e,{tokenId:e,isVisible:!0,isAnimating:!1,animationPhase:`idle`}),t?a.current.set(e,t):a.current.delete(e)},[]),_=(0,c.useCallback)(e=>o.current.separatorStates.get(e),[]),v=(0,c.useCallback)(async e=>{let t=a.current.get(e),i=o.current.separatorStates.get(e);if(!t){if(i){n.current({type:`separator-animation-state-only`,source:`useWAAPIAnimations.startSeparatorAnimation`,message:`Separator state exists but no DOM element for token: ${e} - marking as completed`,data:{tokenId:e,reason:`state-no-element`}}),i.animationPhase=`completed`,i.isVisible=!1;return}n.current({type:`separator-animation-skipped`,source:`useWAAPIAnimations.startSeparatorAnimation`,message:`No separator element found for token: ${e} - skipping animation`,data:{tokenId:e,reason:`no-separator-element`}});return}let s=r.current.exitDuration||f.EXIT_DURATION,c=r.current.exitEasing||h.EASE_IN_CUBIC,l={tokenId:e,isVisible:!0,isAnimating:!0,animationPhase:`exit-coordinated`,startTime:performance.now(),expectedEndTime:performance.now()+s};o.current.separatorStates.set(e,l);let u=`separator-${e}-${Date.now()}`;J.startAnimation(u,`separator-exit`,e,s),n.current({type:`separator-animation-start`,source:`useWAAPIAnimations.startSeparatorAnimation`,message:`Separator animation starting for token: ${e}`,timing:{startTime:l.startTime||Date.now(),expectedDuration:s},data:{tokenId:e,duration:s}}),t.classList.add(`exit-coordinated`);let d=t.animate([{opacity:1,transform:`translateY(0) scale(1)`},{opacity:0,transform:`translateY(${p.OFFSET_Y_EXIT}px) scale(${p.SCALE_EXIT})`}],{duration:s,easing:c,fill:`forwards`});try{await d.finished}catch{return}l.animationPhase=`completed`,l.isVisible=!1,t.classList.add(`exit-completed`),J.endAnimation(u),n.current({type:`separator-animation-complete`,source:`useWAAPIAnimations.startSeparatorAnimation`,message:`Separator animation complete for token: ${e}`,data:{tokenId:e,duration:s}})},[]),y=(0,c.useCallback)(e=>{Array.from(o.current.separatorStates.keys()).forEach(t=>{e.has(t)||(o.current.separatorStates.delete(t),n.current({type:`separator-state-cleanup`,source:`useWAAPIAnimations.cleanupSeparatorStates`,message:`Removed separator state for non-existent token: ${t}`,data:{tokenId:t}}))})},[]),b=(0,c.useCallback)(async(e,t)=>{let a=i.current.get(e);if(!a||o.current.animatingIds.has(e))return;o.current.animatingIds.add(e),u(new Set([e])),new Set([e,...t||[]]).forEach(e=>{v(e)});let c=r.current.exitDuration||f.EXIT_DURATION,l=r.current.exitEasing||h.EASE_IN_CUBIC,d=r.current.flipDuration||f.FLIP_DURATION,g=p.OFFSET_Y_EXIT,_=p.SCALE_EXIT,y=m.BLUR_EXIT,b=f.EXIT_STAGGER,x=a.getBoundingClientRect(),S=getComputedStyle(a),C=parseFloat(S.marginRight)||0,w=q(c),T=q(c+d),E=U(a),D=W(a),O=`exit-${e}-${Date.now()}`;J.startAnimation(O,`exit-fade`,e,c);let k=`width-${e}-${Date.now()}`;J.startAnimation(k,`width-collapse`,e,c),n.current({type:`animation-start-detailed`,source:`useWAAPIAnimations.startExit`,message:`Exit animation starting for: ${e}`,timing:{startTime:w.start,expectedDuration:c},styles:Object.entries(E).map(([e,t])=>({property:e,expected:t,actual:t,matches:!0})),position:{element:e,x:D.x,y:D.y,width:D.width,height:D.height},animation:{name:`exit`,phase:`start`,easing:l,fill:`forwards`},data:{id:e,capturedPositions:o.current.positions.size,wrapperWidth:x.width,marginRight:C,expectedFinalStyles:{opacity:`0`,transform:`translateY(${g}px) scale(${_})`,filter:`blur(${y}px)`,width:`0px`,marginRight:`0px`}}});let A=[],j=[],M=!1,N=a.querySelectorAll(`.sliding-text-token`);if(N.length>0)N.forEach((e,t)=>{let n=t*b,r=e.animate([{opacity:1,transform:`translateY(0) scale(1)`,filter:`blur(0px)`},{opacity:0,transform:`translateY(${g}px) scale(${_})`,filter:`blur(${y}px)`}],{duration:c,easing:l,delay:n,fill:`forwards`});A.push(r)});else{let e=a.animate([{opacity:1,transform:`translateY(0) scale(1)`},{opacity:0,transform:`translateY(${g}px) scale(${_})`}],{duration:c,easing:l,fill:`forwards`});A.push(e)}a.style.overflow=`hidden`;let P=a.animate([{width:`${x.width}px`,marginRight:`${C}px`},{width:`0px`,marginRight:`0px`}],{duration:c,easing:l,fill:`forwards`});A.push(P),s.current.set(e,A);let F=c*f.FLIP_DELAY_PERCENT,I=()=>{if(!M){if(M=!0,a.style.position=`absolute`,a.style.opacity=`0`,a.style.pointerEvents=`none`,Array.from(i.current.entries()).filter(([t])=>t!==e).length===0){n.current({type:`flip-skipped`,source:`useWAAPIAnimations.startExit`,message:`No remaining elements to FLIP - skipping animation`,data:{id:e}});return}i.current.forEach((t,r)=>{if(r===e)return;let i=o.current.positions.get(r);if(!i)return;let a=t.getBoundingClientRect(),s=i.left-a.left,c=i.top-a.top;if(Math.abs(s)<1&&Math.abs(c)<1)return;let l=`flip-${r}-${Date.now()}`;J.startAnimation(l,`flip`,r,d),n.current({type:`flip-animation`,source:`useWAAPIAnimations.startExit`,message:`FLIP animation for: ${r}`,timing:{startTime:performance.now(),expectedDuration:d},position:{element:r,x:a.left,y:a.top,width:a.width,height:a.height,delta:{x:s,y:c}},animation:{name:`flip`,phase:`start`,easing:h.SPRING_GENTLE,fill:`none`},data:{id:r,deltaX:Math.round(s*100)/100,deltaY:Math.round(c*100)/100,prevPosition:{x:i.left,y:i.top,width:i.width,height:i.height},newPosition:{x:a.left,y:a.top,width:a.width,height:a.height}}});let u=t.animate([{transform:`translate3d(${s}px, ${c}px, 0)`},{transform:`translate3d(0, 0, 0)`}],{duration:d,easing:h.SPRING_GENTLE});u.onfinish=()=>{J.endAnimation(l),n.current({type:`flip-animation-complete`,source:`useWAAPIAnimations.startExit`,message:`FLIP complete for: ${r}`,animation:{name:`flip`,phase:`complete`,progress:1},data:{id:r}})},j.push(u)})}},L=setTimeout(I,F);try{let t=A.filter(e=>e!==P),r=P.finished;await Promise.all(t.map(e=>e.finished));let i=w.end();n.current({type:`exit-fade-complete`,source:`useWAAPIAnimations.startExit`,message:`Exit fade complete for: ${e}`,timing:{startTime:i.startTime,endTime:i.endTime,expectedDuration:i.expectedDuration,actualDuration:i.actualDuration,deviation:i.deviation,deviationPercent:i.deviationPercent},animation:{name:`exit-fade`,phase:`complete`,progress:1,easing:l},data:{id:e}}),I(),await Promise.all([...j.map(e=>e.finished.catch(()=>{})),r])}catch{clearTimeout(L),o.current.animatingIds.delete(e);return}J.endAnimation(O),J.endAnimation(k);let R=T.end(),z=W(a),B=G({opacity:`0`,width:`0px`,marginRight:`0px`},a);n.current({type:`orchestration-complete`,source:`useWAAPIAnimations.startExit`,message:`Orchestration complete for: ${e}`,timing:{startTime:R.startTime,endTime:R.endTime,expectedDuration:R.expectedDuration,actualDuration:R.actualDuration,deviation:R.deviation,deviationPercent:R.deviationPercent},styles:B,position:{element:e,x:z.x,y:z.y,width:z.width,height:z.height},animation:{name:`orchestration`,phase:`complete`,progress:1,easing:l,fill:`forwards`},data:{id:e,choreographySummary:J.getSummary(),deviationStatus:Math.abs(R.deviation)<100?`OK`:`WARNING`,styleMatchCount:B.filter(e=>e.matches).length,styleMismatchCount:B.filter(e=>!e.matches).length}}),n.current({type:`animation-timing`,source:`useWAAPIAnimations.startExit`,message:`Orchestration timing for: ${e}`,timing:{startTime:R.startTime,endTime:R.endTime,expectedDuration:R.expectedDuration,actualDuration:R.actualDuration,deviation:R.deviation,deviationPercent:R.deviationPercent},animation:{name:`orchestration`,phase:`complete`},data:{id:e,status:Math.abs(R.deviation)<100?`✅ ON TIME`:`⚠️ SLOW`}}),o.current.animatingIds.delete(e),s.current.delete(e),i.current.delete(e),r.current.onComplete(e)},[u]),x=(0,c.useCallback)(e=>e?o.current.animatingIds.has(e):o.current.animatingIds.size>0,[]);return(0,c.useEffect)(()=>()=>{s.current.forEach(e=>{e.forEach(e=>e.cancel())}),s.current.clear()},[]),{registerElement:l,startExit:b,isAnimating:x,cancelAnimations:d,registerSeparator:g,getSeparatorState:_,startSeparatorAnimation:v,cleanupSeparatorStates:y}},le=({tokens:e,placeholder:t=`No tokens`,maxVisible:n,textAnimationMode:r=`character`,textDirection:i=`vertical`,textStaggerDelay:a=15,separator:o=`, `,enableWidthAnimation:s=!1,className:u=``,tokenClassName:d=``,placeholderClassName:f=``,separatorClassName:p=``})=>{let{logEvent:m}=H(),h=(0,c.useRef)(!0),g=(0,c.useRef)(m);(0,c.useEffect)(()=>{g.current=m},[m]),(0,c.useEffect)(()=>(h.current=!0,g.current({type:`render`,source:`AnimatedTokens.mount`,message:`AnimatedTokens mounted`,data:{tokenCount:e.length}}),()=>{g.current({type:`component-unmounted`,source:`AnimatedTokens.unmount`,message:`AnimatedTokens UNMOUNTING`,data:{timestamp:Date.now()}}),h.current=!1}),[]);let[v,b]=(0,c.useState)(e),x=(0,c.useRef)(new Set),{registerElement:S,startExit:C,isAnimating:w,registerSeparator:T,getSeparatorState:E,cleanupSeparatorStates:D}=ce({onComplete:(0,c.useCallback)(e=>{h.current&&(g.current({type:`token-dom-remove`,source:`AnimatedTokens.onComplete`,message:`Token removed from DOM: ${e}`,data:{id:e}}),x.current.delete(e),b(t=>t.filter(t=>t.id!==e)))},[])}),O=(0,c.useRef)(C),k=(0,c.useRef)(E),A=(0,c.useRef)(D);(0,c.useEffect)(()=>{O.current=C,k.current=E,A.current=D},[C,E,D]);let j=v.filter(e=>!x.current.has(e.id)||!w(e.id)),M=n?v.slice(0,n):v,N=n?Math.max(0,j.length-n):0,P=(e,t)=>{if(t>=M.length-1)return!1;let n=k.current?.(e);if(!n)return!0;switch(n.animationPhase){case`idle`:case`exit-coordinated`:case`flip-coordinated`:return!0;case`completed`:return!1;default:return!0}};(0,c.useEffect)(()=>{let t=new Set(e.map(e=>e.id)),r=new Set(v.map(e=>e.id)),i=new Set(M.map(e=>e.id));A.current?.(i);let a=v.filter(e=>!t.has(e.id)&&!x.current.has(e.id)),o=e.filter(e=>!r.has(e.id));if(!(a.length===0&&o.length===0)&&(g.current({type:`render`,source:`AnimatedTokens.useEffect`,message:`Token sync`,data:{currentTokens:e.map(e=>e.id),displayTokens:v.map(e=>e.id),removed:a.map(e=>e.id),added:o.map(e=>e.id),animating:Array.from(x.current)}}),a.forEach(e=>{let t=v.findIndex(t=>t.id===e.id);if(n!==void 0&&t>=n)g.current({type:`overflow-token-remove`,source:`AnimatedTokens.useEffect`,message:`Removing overflow token without animation`,data:{id:e.id}}),b(t=>t.filter(t=>t.id!==e.id));else{let t=[],r=v.slice(0,n),i=r.findIndex(t=>t.id===e.id),a=i<r.length-1;if(i===r.length-1&&i>0){let e=r[i-1];e&&t.push(e.id)}g.current({type:`token-remove`,source:`AnimatedTokens.useEffect`,message:`Token marked for exit: ${e.text}`,data:{id:e.id,text:e.text,additionalSeparators:t,shouldAnimateOwnSeparator:a,wasLastVisible:i===r.length-1}}),x.current.add(e.id);let o=a?[e.id,...t]:t;O.current(e.id,o)}}),o.length>0)){o.forEach(e=>{g.current({type:`token-add`,source:`AnimatedTokens.useEffect`,message:`New token detected: ${e.text}`,data:{id:e.id,text:e.text}})}),o.forEach(t=>{let r=e.findIndex(e=>e.id===t.id);(n?r<Math.min(n,e.length)-1:r<e.length-1)&&T(t.id,null)});let r=v.filter(e=>!t.has(e.id)),i=[...e];r.forEach(e=>{let t=v.findIndex(t=>t.id===e.id);t!==-1&&t<=i.length&&i.splice(t,0,e)}),JSON.stringify(i.map(e=>e.id))!==JSON.stringify(v.map(e=>e.id))&&b(i)}},[e,n]);let F=(0,c.useRef)(0),I=N>0&&F.current===0,L=N===0&&F.current>0;(0,c.useEffect)(()=>{F.current=N},[N]);let z=v.length===0&&!w()&&!!t;return(0,l.jsxs)(`div`,{className:`waapi-animated-tokens-container ${u}`,children:[z&&(0,l.jsx)(Y,{text:t,mode:y.placeholder.mode,direction:y.placeholder.direction,blur:y.placeholder.blur,duration:y.placeholder.duration,initial:`initial`,animate:`animate`,className:`waapi-token-placeholder ${f}`},`placeholder`),M.map((e,t)=>{let n=x.current.has(e.id),c=P(e.id,t);return(0,l.jsxs)(`div`,{className:`waapi-token-wrapper ${d} ${n?`exit-active`:``}`,ref:t=>S(e.id,t),children:[(0,l.jsx)(Y,{text:e.text,mode:n?`none`:r,direction:i,staggerDelay:a,duration:_.DURATION_ENTER,blur:y.newToken.blur,widthAnimation:!n&&s,initial:n?!1:`initial`,animate:`animate`}),c&&(0,l.jsx)(`span`,{className:`waapi-token-separator ${p}`,ref:t=>T(e.id,t),children:o})]},e.id)}),(N>0||L)&&(0,l.jsxs)(`div`,{className:`waapi-token-overflow ${d} ${I?`entering`:``} ${L?`exiting`:``}`,ref:e=>S(`overflow-counter`,e),children:[M.length>0&&(0,l.jsx)(`span`,{className:`waapi-token-separator ${p}`,children:o}),(0,l.jsx)(`span`,{className:`waapi-token-separator ${p}`,children:`+`}),(0,l.jsx)(R,{value:N,duration:_.DURATION_ENTER,fontSize:`inherit`,fontWeight:`inherit`,color:`inherit`}),(0,l.jsx)(Y,{text:` more`,mode:r,direction:i,staggerDelay:a,duration:L?_.DURATION_EXIT:_.DURATION_ENTER,blur:y.newToken.blur,initial:I?`initial`:!1,animate:`animate`})]})]})};function ue(e){let t=(0,c.useRef)(new Map),n=(0,c.useRef)(e);return(0,c.useEffect)(()=>{n.current=e},[e]),{register:(0,c.useCallback)((e,r)=>{r?(t.current.set(e,r),n.current?.onRegister?.(e,r)):t.current.has(e)&&(t.current.delete(e),n.current?.onUnregister?.(e))},[]),unregister:(0,c.useCallback)(e=>{t.current.has(e)&&(t.current.delete(e),n.current?.onUnregister?.(e))},[]),get:(0,c.useCallback)(e=>t.current.get(e),[]),getAll:(0,c.useCallback)(()=>new Map(t.current),[]),has:(0,c.useCallback)(e=>t.current.has(e),[]),clear:(0,c.useCallback)(()=>{let e=Array.from(t.current.keys());t.current.clear(),e.forEach(e=>n.current?.onUnregister?.(e))},[]),get size(){return t.current.size}}}const de=f.MIN_DELTA_PX;function fe(e,t){let n=(0,c.useRef)(new Map),r=t?.minDeltaPx??de;return{capture:(0,c.useCallback)(t=>{let r=new Map;return e().forEach((e,n)=>{if(t?.has(n))return;let i=e.getBoundingClientRect();i.width>0&&i.height>0&&r.set(n,i)}),n.current=r,r},[e]),getPosition:(0,c.useCallback)(e=>n.current.get(e),[]),calculateDeltas:(0,c.useCallback)((e,t)=>{let n=new Map;return t.forEach((t,i)=>{let a=e.get(i);if(!a)return;let o=a.left-t.left,s=a.top-t.top,c=a.width-t.width,l=a.height-t.height,u=Math.abs(o)>=r||Math.abs(s)>=r||Math.abs(c)>=r||Math.abs(l)>=r;n.set(i,{id:i,deltaX:o,deltaY:s,deltaWidth:c,deltaHeight:l,isSignificant:u})}),n},[r]),getLastCapture:(0,c.useCallback)(()=>new Map(n.current),[]),clear:(0,c.useCallback)(()=>{n.current.clear()},[])}}const pe=f.FLIP_DURATION,me=h.SPRING_GENTLE;function he(){let e=(0,c.useRef)(new Map),t=(0,c.useRef)(new Set),n=(0,c.useCallback)((n,r,i)=>{let a=i?.duration??pe,o=i?.easing??me;e.current.has(r.id)&&e.current.get(r.id)?.cancel(),t.current.add(r.id),i?.onStart?.(r.id);let s=n.animate([{transform:`translate3d(${r.deltaX}px, ${r.deltaY}px, 0)`},{transform:`translate3d(0, 0, 0)`}],{duration:a,easing:o});return e.current.set(r.id,s),s.onfinish=()=>{t.current.delete(r.id),e.current.delete(r.id),i?.onComplete?.(r.id)},s.oncancel=()=>{t.current.delete(r.id),e.current.delete(r.id)},s},[]),r=(0,c.useCallback)(async(e,t,r)=>{let i=[];t.forEach((t,a)=>{if(!t.isSignificant)return;let o=e.get(a);if(!o)return;let s=n(o,t,r);i.push(s)}),i.length!==0&&await Promise.all(i.map(e=>e.finished.catch(()=>{})))},[n]),i=(0,c.useCallback)(n=>{let r=e.current.get(n);r&&(r.cancel(),e.current.delete(n),t.current.delete(n))},[]),a=(0,c.useCallback)(()=>{e.current.forEach(e=>e.cancel()),e.current.clear(),t.current.clear()},[]),o=(0,c.useCallback)(e=>e?t.current.has(e):t.current.size>0,[]);(0,c.useEffect)(()=>()=>{a()},[a]);let s=(0,c.useRef)({animate:n,animateAll:r,cancel:i,cancelAll:a,isAnimating:o});return s.current.animate=n,s.current.animateAll=r,s.current.cancel=i,s.current.cancelAll=a,s.current.isAnimating=o,s.current}function ge(e){let t=(0,c.useRef)(e);(0,c.useEffect)(()=>{t.current=e},[e]);let{logEvent:n}=H(),r=(0,c.useRef)(n);(0,c.useEffect)(()=>{r.current=n},[n]);let i=(0,c.useRef)({animatingIds:new Set,positions:new Map,activeAnimations:new Map}),a=ue(),o=fe(a.getAll,{minDeltaPx:e?.minDeltaPx??f.MIN_DELTA_PX}),s=he(),l=e?.exitDuration??f.EXIT_DURATION,u=e?.flipDuration??f.FLIP_DURATION,d=e?.exitEasing??h.EASE_IN_CUBIC,g=(0,c.useCallback)(e=>{let t=i.current.activeAnimations.get(e);t&&(t.forEach(e=>e.cancel()),i.current.activeAnimations.delete(e)),i.current.animatingIds.delete(e),s.cancel(e)},[s]),_=(0,c.useCallback)(()=>{i.current.activeAnimations.forEach(e=>{e.forEach(e=>e.cancel())}),i.current.activeAnimations.clear(),i.current.animatingIds.clear(),s.cancelAll()},[s]),v=e?.flipBehavior??`all`,y=e?.exitPositionStrategy??`absolute-fixed`,b=(0,c.useCallback)(async(e,n)=>{let r=a.get(e);if(!r||i.current.animatingIds.has(e))return;i.current.animatingIds.add(e);let o=n?.duration??l,s=n?.easing??d,c=a.getAll(),g=new Map,_=r.getBoundingClientRect();g.set(e,_),c.forEach((t,n)=>{if(n!==e){let e=t.getBoundingClientRect();e.width>0&&e.height>0&&g.set(n,e)}});let b=r.parentElement;r.dataset.reorderState=`exiting`,y===`absolute-fixed`&&(r.dataset.exitPosition=`absolute`);let x=b?.getBoundingClientRect()||{left:0,top:0},S=_.left-x.left,C=_.top-x.top;y===`absolute-fixed`&&(r.style.position=`absolute`,r.style.left=`${S}px`,r.style.top=`${C}px`,r.style.width=`${_.width}px`,r.style.height=`${_.height}px`,r.style.margin=`0`);let w=b?.getBoundingClientRect()||{left:0,top:0},T=w.left-x.left,E=w.top-x.top;(Math.abs(T)>.5||Math.abs(E)>.5)&&(r.style.transform=`translate(${-T}px, ${-E}px)`);let D=new Map;c.forEach((t,n)=>{if(n!==e){let e=t.getBoundingClientRect();e.width>0&&e.height>0&&D.set(n,e)}});let O=[];if(v!==`none`){let t=[];if(v===`all`)t=[...D.keys()];else if(v===`siblings-after`){let n=Array.from(c.entries());n.sort((e,t)=>{let n=e[1],r=t[1];return n.compareDocumentPosition(r)&Node.DOCUMENT_POSITION_FOLLOWING?-1:1});let r=n.map(([e])=>e),i=r.indexOf(e);i!==-1&&(t=r.slice(i+1).filter(e=>D.has(e)))}t.forEach(e=>{let t=g.get(e),n=D.get(e);if(!t||!n)return;let r=t.left-n.left,i=t.top-n.top;if(Math.abs(r)>1||Math.abs(i)>1){let t=c.get(e);if(t){t.dataset.reorderState=`flipping`,t.style.transform=`translate(${r}px, ${i}px)`;let e=t.animate([{transform:`translate(${r}px, ${i}px)`},{transform:`none`}],{duration:u,easing:h.MATERIAL_DECELERATE,fill:`forwards`});O.push(e),e.finished.then(()=>{t.style.transform=``,t.dataset.reorderState=`idle`}).catch(()=>{t.style.transform=``,t.dataset.reorderState=`idle`})}}})}let k=[],A=r.querySelectorAll(`.sliding-text-token`);if(A.length>0)A.forEach((e,t)=>{let n=t*f.EXIT_STAGGER,r=e.animate([{opacity:1,transform:`translateY(0) scale(1)`,filter:`blur(0px)`},{opacity:0,transform:`translateY(${p.OFFSET_Y_EXIT}px) scale(${p.SCALE_EXIT})`,filter:`blur(${m.BLUR_EXIT}px)`}],{duration:o,easing:s,delay:n,fill:`forwards`});k.push(r)});else{let e=r.animate([{opacity:1,transform:`scale(1)`},{opacity:0,transform:`scale(${p.SCALE_EXIT})`}],{duration:o,easing:s,fill:`forwards`});k.push(e)}i.current.activeAnimations.set(e,[...k,...O]);try{await Promise.all([...k.map(e=>e.finished),...O.map(e=>e.finished)])}catch{i.current.animatingIds.delete(e),i.current.activeAnimations.delete(e);return}i.current.animatingIds.delete(e),i.current.activeAnimations.delete(e),r.dataset.reorderState=`completed`,y===`absolute-fixed`&&(r.style.removeProperty(`position`),r.style.removeProperty(`left`),r.style.removeProperty(`top`),r.style.removeProperty(`width`),r.style.removeProperty(`height`),r.style.removeProperty(`margin`)),delete r.dataset.exitPosition,a.unregister(e),n?.onComplete?.(),t.current?.onExitComplete?.(e)},[a,l,d,u,v,y]),x=(0,c.useCallback)(async(e,n)=>{let r=a.get(e);if(!r)return;r.dataset.reorderState||(r.dataset.reorderState=`entering`);let i=t.current?.enterDuration??f.ENTER_DURATION,o=t.current?.enterEasing??h.MATERIAL_DECELERATE,s=n?.duration??i,c=n?.easing??o,l=n?.stagger??f.ENTER_STAGGER,u=r.querySelectorAll(`.sliding-text-token`),d=[],p={opacity:0,transform:`translateY(-8px) scale(0.95)`},g={opacity:1,transform:`none`};if(u.length>0)u.forEach((e,t)=>{let n=t*l;e.dataset.reorderIndex=String(t);let r=e.animate([{...p,filter:`blur(${m.BLUR_ENTER}px)`},{...g,filter:`blur(0px)`}],{duration:s,easing:c,delay:n,fill:`forwards`});d.push(r)});else{let e=r.animate([p,g],{duration:s,easing:c,fill:`forwards`});d.push(e)}try{await Promise.all(d.map(e=>e.finished))}catch{r.dataset.reorderState=`idle`;return}r.dataset.reorderState=`idle`,n?.onComplete?.(),t.current?.onEnterComplete?.(e)},[a]),S=(0,c.useCallback)(e=>e?i.current.animatingIds.has(e):i.current.animatingIds.size>0,[]),C=(0,c.useCallback)(e=>o.capture(e),[o]);return(0,c.useEffect)(()=>()=>{_()},[_]),{registry:a,positions:o,flip:s,registerElement:a.register,startExit:b,startEnter:x,isAnimating:S,cancelAnimation:g,cancelAllAnimations:_,capturePositions:C}}function X(e){let{logEvent:t}=H(),n=(0,c.useRef)(t);(0,c.useEffect)(()=>{n.current=t},[t]);let r=ge({enterDuration:e?.enterDuration,exitDuration:e?.exitDuration,flipDuration:e?.flipDuration,enterEasing:e?.enterEasing,exitEasing:e?.exitEasing,flipEasing:e?.flipEasing,flipBehavior:e?.flipBehavior,onExitComplete:e?.onComplete});return(0,c.useEffect)(()=>()=>{},[]),{...r,registerElement:r.registerElement,startItemExit:r.startExit,startItemEnter:r.startEnter}}function _e(e,t={}){let{autoAnimate:n=!0,stagger:r,enterDuration:i,exitDuration:a,flipDuration:o,enterEasing:s,exitEasing:l,flipEasing:u}=t,{logEvent:d}=H(),f=(0,c.useRef)(d);(0,c.useEffect)(()=>{f.current=d},[d]);let p=(0,c.useRef)(t);(0,c.useEffect)(()=>{p.current=t},[t]);let m=(0,c.useRef)(new Set),h=(0,c.useRef)(new Set),g=(0,c.useRef)(new Set),_=(0,c.useCallback)((e,t)=>r?typeof r==`number`?r*e:(r[t]??0)*e:0,[r]),v=X({enterDuration:i,exitDuration:a,flipDuration:o,enterEasing:s,exitEasing:l,flipEasing:u,onComplete:(0,c.useCallback)(e=>{m.current.delete(e),p.current.onAnimationComplete?.(e)},[])}),y=(0,c.useMemo)(()=>{let t=new Set;return c.Children.forEach(e,e=>{(0,c.isValidElement)(e)&&e.key!=null&&t.add(String(e.key))}),t},[e]);(0,c.useLayoutEffect)(()=>{let e=g.current,t=[];y.forEach(n=>{!e.has(n)&&!h.current.has(n)&&t.push(n)}),t.length>0&&t.forEach((e,t)=>{let n=_(t,`enter`),r=()=>{h.current.add(e),p.current.onItemEnter?.(e),requestAnimationFrame(()=>{v.startItemEnter(e).then(()=>{h.current.delete(e)})})};n>0?setTimeout(r,n):r()}),g.current=new Set(y)},[y,n,v,_]);let b=(0,c.useCallback)(e=>{m.current.has(e)||v.registry.has(e)&&(m.current.add(e),p.current.onItemExit?.(e),v.startItemExit(e))},[v]),x=(0,c.useCallback)(e=>m.current.has(e),[]),S=(0,c.useCallback)(e=>h.current.has(e),[]),C=(0,c.useCallback)(()=>Array.from(m.current),[]),w=(0,c.useCallback)(()=>Array.from(h.current),[]),T=(0,c.useMemo)(()=>{let t=[];return c.Children.forEach(e,e=>{if(!(0,c.isValidElement)(e)){t.push(e);return}let n=e.key==null?null:String(e.key);n!=null&&m.current.has(n)?t.push((0,c.cloneElement)(e,{"data-reorder-state":`exiting`})):t.push(e)}),t},[e]);return(0,c.useEffect)(()=>()=>{},[]),{presentChildren:T,triggerExit:b,isExiting:x,isEntering:S,exitingIds:C(),enteringIds:w(),reorder:v}}function ve(e,t){if(e!==void 0)return typeof e==`number`?e:e[t]}const ye={auto:{position:`relative`},horizontal:{display:`flex`,flexDirection:`row`,flexWrap:`wrap`,alignItems:`center`,position:`relative`},vertical:{display:`flex`,flexDirection:`column`,position:`relative`},grid:{display:`grid`,gridTemplateColumns:`repeat(auto-fill, minmax(100px, 1fr))`,gap:`8px`,position:`relative`}},Z=(0,c.forwardRef)(({children:e,autoAnimate:t=!0,stagger:n,duration:r,layout:i=`auto`,className:a=``,flipBehavior:o,exitPositionStrategy:s,onItemExit:u,onItemEnter:d},f)=>{let{logEvent:p}=H(),m=(0,c.useRef)(p);(0,c.useEffect)(()=>{m.current=p},[p]);let h=(0,c.useRef)(u),g=(0,c.useRef)(d);(0,c.useEffect)(()=>{h.current=u,g.current=d},[u,d]);let _=(0,c.useCallback)(e=>{C(t=>t.filter(t=>t.key!==e))},[]),v=X({enterDuration:ve(r,`enter`),exitDuration:ve(r,`exit`),flipBehavior:o,exitPositionStrategy:s,onComplete:_});(0,c.useImperativeHandle)(f,()=>({startItemExit:v.startItemExit,startItemEnter:v.startItemEnter,isAnimating:v.isAnimating}),[v.startItemExit,v.startItemEnter,v.isAnimating]);let y=(0,c.useRef)(v.startItemExit),b=(0,c.useRef)(v.startItemEnter);(0,c.useEffect)(()=>{y.current=v.startItemExit,b.current=v.startItemEnter},[v.startItemExit,v.startItemEnter]);let x=(0,c.useMemo)(()=>{let t=[];return c.Children.forEach(e,e=>{(0,c.isValidElement)(e)&&e.key!=null&&t.push({key:String(e.key),element:e})}),t},[e]),[S,C]=(0,c.useState)(x),w=(0,c.useRef)(new Set),T=(0,c.useCallback)((e,t)=>n?typeof n==`number`?n*e:(n[t]??0)*e:0,[n]);(0,c.useEffect)(()=>{let e=new Set(x.map(e=>e.key)),t=new Set(S.map(e=>e.key)),n=S.filter(t=>!e.has(t.key)&&!w.current.has(t.key)),r=x.filter(e=>!t.has(e.key));if(n.length===0&&r.length===0){x.some(e=>{let t=S.find(t=>t.key===e.key);return t&&t.element!==e.element})&&C(e=>e.map(e=>w.current.has(e.key)?e:x.find(t=>t.key===e.key)??e));return}if(n.forEach((e,t)=>{let n=T(t,`exit`);w.current.add(e.key);let r=()=>{h.current?.(e.key),y.current(e.key).finally(()=>{w.current.delete(e.key)})};n>0?setTimeout(r,n):r()}),r.length>0){let t=S.filter(t=>!e.has(t.key)),n=[...x];t.forEach(e=>{let t=S.findIndex(t=>t.key===e.key);t!==-1&&t<=n.length&&n.splice(t,0,e)}),C(n),r.forEach((e,t)=>{let n=T(t,`enter`),r=()=>{g.current?.(e.key)};n>0?setTimeout(r,n):r()})}},[x,S,T]);let E=(0,c.useMemo)(()=>{let e=new Set(x.map(e=>e.key));return S.map(({key:t,element:n})=>{let r=!!e.has(t),i=w.current.has(t);return(0,c.cloneElement)(n,{ref:e=>{e?(v.registerElement(t,e),!e.dataset.reorderState&&r&&!i&&(e.dataset.reorderState=`entering`,b.current(t))):v.registerElement(t,null);let a=n.ref;typeof a==`function`?a(e):a&&typeof a==`object`&&(a.current=e)},"data-reorder-id":t})})},[S,x,v.registerElement]);return(0,l.jsx)(`div`,{className:`waapi-reorder-container reorder ${i===`auto`?``:`reorder--${i}`} ${a}`,style:ye[i],children:E})});Z.displayName=`Reorder`;const be=()=>typeof navigator<`u`&&navigator.language?navigator.language:`en`;function xe(e,t={}){let{locale:n,type:r=`conjunction`,style:i=`long`,separator:a}=t;return(0,c.useMemo)(()=>{if(e.length===0)return[];if(a!==void 0){let t=[];return e.forEach((n,r)=>{t.push({type:`element`,value:n,index:r}),r<e.length-1&&t.push({type:`literal`,value:a,index:r})}),t}let t=n??be();try{let n=new Intl.ListFormat(t,{type:r,style:i}).formatToParts(e),a=0;return n.map(e=>e.type===`element`?{type:`element`,value:e.value,index:a++}:{type:`literal`,value:e.value,index:Math.max(0,a-1)})}catch{let t=[];return e.forEach((n,r)=>{t.push({type:`element`,value:n,index:r}),r<e.length-1&&t.push({type:`literal`,value:`, `,index:r})}),t}},[e,n,r,i,a])}const Se=({tokens:e,placeholder:t=`No tokens`,maxVisible:n,textAnimationMode:r=`character`,textDirection:i=`vertical`,textStaggerDelay:a=15,locale:o,listType:s=`conjunction`,listStyle:u=`long`,separator:d,enableWidthAnimation:m=!1,className:g=``,tokenClassName:v=``,placeholderClassName:b=``,separatorClassName:x=``})=>{let{logEvent:S}=H(),C=(0,c.useRef)(S);(0,c.useEffect)(()=>{C.current=S},[S]);let w=(0,c.useRef)(new Set),T=(0,c.useRef)(new Map),E=(0,c.useRef)(new Map),D=(0,c.useMemo)(()=>n?e.slice(0,n):e,[e,n]),O=(0,c.useMemo)(()=>n?Math.max(0,e.length-n):0,[e.length,n]),k=xe(D.map(e=>e.text),{locale:o,type:s,style:u,separator:d}),A=(0,c.useRef)(0),j=O>0&&A.current===0,M=O===0&&A.current>0;(0,c.useEffect)(()=>{A.current=O},[O]);let N=(0,c.useCallback)((e,t)=>{if(t>=D.length-1)return!1;let n=T.current.get(e);if(!n)return!0;switch(n.animationPhase){case`idle`:case`exit-coordinated`:case`flip-coordinated`:return!0;case`completed`:return!1;default:return!0}},[D.length]);(0,c.useEffect)(()=>{let e=new Set(D.map(e=>e.id)),t=T.current;for(let n of t.keys())e.has(n)||T.current.delete(n);D.forEach((e,t)=>{t<D.length-1&&!T.current.has(e.id)&&T.current.set(e.id,{animationPhase:`idle`})})},[D]);let P=(0,c.useCallback)(e=>{let t=E.current.get(e);t&&(T.current.set(e,{animationPhase:`exit-coordinated`}),t.dataset.separatorState=`exiting`,t.animate([{opacity:1,transform:`translateY(0) scale(1)`},{opacity:0,transform:`translateY(${p.OFFSET_Y_EXIT}px) scale(${p.SCALE_EXIT})`}],{duration:f.EXIT_DURATION,easing:h.EASE_IN_CUBIC,fill:`forwards`}).finished.then(()=>{T.current.set(e,{animationPhase:`completed`}),t.dataset.separatorState=`completed`}).catch(()=>{T.current.delete(e)}))},[]),F=(0,c.useCallback)(e=>{w.current.add(e);let t=[],n=D.findIndex(t=>t.id===e);if(n===D.length-1&&n>0){let e=D[n-1];e&&t.push(e.id)}P(e),t.forEach(e=>P(e)),C.current({type:`token-remove`,source:`AnimatedTokensV2`,message:`Token exiting: ${e}`,data:{id:e,additionalSeparators:t}})},[D,P]),I=(0,c.useCallback)(e=>{C.current({type:`token-add`,source:`AnimatedTokensV2`,message:`Token entering: ${e}`,data:{id:e}})},[]),L=e.length===0&&!!t,z=(0,c.useMemo)(()=>k.map((e,t)=>{if(e.type===`element`){let t=D[e.index];if(!t)return null;let n=w.current.has(t.id);return(0,l.jsx)(`span`,{className:`waapi-token-wrapper ${v}`,"data-reorder-id":t.id,children:(0,l.jsx)(Y,{text:t.text,mode:n?`none`:r,direction:i,staggerDelay:a,duration:_.DURATION_ENTER,blur:y.newToken.blur,widthAnimation:!n&&m,initial:n?!1:`initial`,animate:`animate`})},t.id)}let n=D[e.index];if(!n)return null;let o=D.findIndex(e=>e.id===n.id);return N(n.id,o)?(0,l.jsx)(`span`,{ref:e=>{e?E.current.set(n.id,e):E.current.delete(n.id)},className:`waapi-token-separator ${x}`,"data-separator-state":T.current.get(n.id)?.animationPhase??`idle`,children:e.value},`sep-${n.id}-${t}`):null}).filter(Boolean),[k,D,v,r,i,a,m,x,N]),B=(0,c.useMemo)(()=>d===void 0?[...k].reverse().find(e=>e.type===`literal`)?.value??`, `:d,[k,d]),V=(0,c.useMemo)(()=>O===0&&!M?null:(0,l.jsxs)(`div`,{"data-reorder-id":`overflow-counter`,className:`waapi-token-overflow ${v} ${j?`entering`:``} ${M?`exiting`:``}`,children:[D.length>0&&(0,l.jsx)(`span`,{className:`waapi-token-separator ${x}`,children:B}),(0,l.jsx)(`span`,{className:`waapi-token-separator ${x}`,children:`+`}),(0,l.jsx)(R,{value:O,duration:_.DURATION_ENTER,fontSize:`inherit`,fontWeight:`inherit`,color:`inherit`}),(0,l.jsx)(Y,{text:` more`,mode:r,direction:i,staggerDelay:a,duration:M?_.DURATION_EXIT:_.DURATION_ENTER,blur:y.newToken.blur,initial:j?`initial`:!1,animate:`animate`})]},`overflow-counter`),[O,j,M,v,D.length,B,x,r,i,a]);return(0,l.jsxs)(`div`,{role:`text`,className:`waapi-animated-tokens-container waapi-v2 ${g}`,children:[L&&(0,l.jsx)(Y,{text:t,mode:y.placeholder.mode,direction:y.placeholder.direction,blur:y.placeholder.blur,duration:y.placeholder.duration,initial:`initial`,animate:`animate`,className:`waapi-token-placeholder ${b}`},`placeholder`),(0,l.jsxs)(Z,{layout:`horizontal`,onItemExit:F,onItemEnter:I,children:[z,V]})]})},Q=(0,c.createContext)(null);function Ce(){let e=(0,c.useContext)(Q);if(!e)throw Error(`useMorphContext must be used within a <Morph> component. Wrap your morphable components with <Morph>.`);return e}const we=f.FLIP_DURATION,Te=h.EASE_OUT_CUBIC;function Ee(e){let[t,n]=(0,c.useState)(!1),r=(0,c.useRef)([]),i=(0,c.useRef)(e);(0,c.useEffect)(()=>{i.current=e},[e]);let a=(0,c.useCallback)(()=>{r.current.forEach(e=>e.cancel()),r.current=[],n(!1)},[]),o=(0,c.useCallback)(async(e,o)=>{t&&a(),n(!0);let s=i.current?.duration??we,c=i.current?.easing??Te,l=e.getBoundingClientRect(),u=o.getBoundingClientRect(),d=l.left-u.left,f=l.top-u.top,p=l.width/u.width,m=l.height/u.height,h=getComputedStyle(e).borderRadius,g=getComputedStyle(o).borderRadius,_=i.current?.clipPathStart||De(h,l),v=i.current?.clipPathEnd||De(g,u),y={position:e.style.position,opacity:e.style.opacity,pointerEvents:e.style.pointerEvents},b={position:o.style.position,opacity:o.style.opacity,transform:o.style.transform,clipPath:o.style.clipPath};e.style.position=`absolute`,e.style.pointerEvents=`none`,o.style.position=`relative`,o.style.transform=`translate(${d}px, ${f}px) scale(${p}, ${m})`,o.style.clipPath=_,o.style.opacity=`0`;let x=e.animate([{opacity:1},{opacity:0}],{duration:s*.5,easing:c,fill:`forwards`}),S=o.animate([{opacity:0},{opacity:1}],{duration:s*.5,delay:s*.25,easing:c,fill:`forwards`}),C=o.animate([{transform:`translate(${d}px, ${f}px) scale(${p}, ${m})`,clipPath:_},{transform:`translate(0, 0) scale(1, 1)`,clipPath:v}],{duration:s,easing:c,fill:`forwards`});r.current=[x,S,C];try{await Promise.all([x.finished,S.finished,C.finished])}catch{Object.assign(e.style,y),Object.assign(o.style,b),n(!1);return}Object.assign(e.style,y),o.style.transform=``,o.style.clipPath=``,o.style.opacity=`1`,r.current=[],n(!1)},[t,a]);return(0,c.useEffect)(()=>()=>{a()},[a]),{isMorphing:t,morph:o,cancel:a}}function De(e,t){let n=parseFloat(e)||0;return`inset(0 round ${n/t.width*100}% ${n/t.height*100}%)`}const Oe=f.FLIP_DURATION,ke=h.MATERIAL_STANDARD;function Ae(e){let[t,n]=(0,c.useState)(!1),r=(0,c.useRef)(null),i=(0,c.useRef)(e),a=i.current?.duration??Oe,o=i.current?.easing??ke,s=(0,c.useCallback)(()=>{r.current&&(r.current.style.transition=`grid-template-rows ${a}ms ${o}`)},[a,o]),l=(0,c.useCallback)(()=>{s(),r.current&&(r.current.style.gridTemplateRows=`1fr`),n(!0)},[s]),u=(0,c.useCallback)(()=>{s(),r.current&&(r.current.style.gridTemplateRows=`0fr`),n(!1)},[s]);return{isExpanded:t,expand:l,collapse:u,toggle:(0,c.useCallback)(()=>{t?u():l()},[t,l,u]),containerRef:r}}function je(e){let t=(0,c.useRef)(e),n=(0,c.useRef)(e?.types||[]),r=(0,c.useMemo)(()=>typeof document>`u`?!1:`startViewTransition`in document,[]),i=(0,c.useCallback)(e=>{n.current=e},[]);return{isSupported:r,startTransition:(0,c.useCallback)(async e=>{if(!document.startViewTransition){await e();return}let n=t.current?.name,r=(()=>{if(n){let e=document.createElement(`style`);return e.id=`view-transition-${n}`,e.textContent=`
+          ::view-transition-old(${n}),
+          ::view-transition-new(${n}) {
+            animation-duration: 300ms;
+            animation-timing-function: ease-out;
+          }
+        `,document.head.appendChild(e),()=>{e.remove()}}return()=>{}})();try{await document.startViewTransition(e).finished}finally{r()}},[]),setTypes:i}}function $(e){let t=e?.technique??`flip-clip-path`,n=(0,c.useRef)(e);(0,c.useEffect)(()=>{n.current=e},[e]);let r=Ee({duration:e?.duration,easing:e?.easing}),i=Ae({duration:e?.duration,easing:e?.easing}),a=je(),o=r.isMorphing,s=(0,c.useCallback)(async(e,t)=>{switch(n.current?.onMorphStart?.(),n.current?.technique??`flip-clip-path`){case`flip-clip-path`:await r.morph(e,t);break;case`view-transitions`:a.isSupported?await a.startTransition(()=>{e.style.opacity=`0`,t.style.opacity=`1`}):await r.morph(e,t);break;case`css-grid`:i.toggle();break}n.current?.onMorphEnd?.()},[r,a,i]),l=(0,c.useCallback)(()=>{r.cancel()},[r]);return{isMorphing:o,technique:t,isViewTransitionsSupported:a.isSupported,morph:s,cancel:l,flipClipPath:r,cssGrid:i,viewTransitions:a}}function Me({children:e,technique:t=`flip-clip-path`,duration:n,easing:r,className:i=``,onMorphStart:a,onMorphEnd:o}){let s=$({technique:t,duration:n,easing:r,onMorphStart:a,onMorphEnd:o}),u=(0,c.useMemo)(()=>({morph:s}),[s]);return(0,l.jsx)(Q.Provider,{value:u,children:(0,l.jsx)(`div`,{className:`morph-container ${i}`,children:e})})}const Ne=D,Pe=(e,t)=>{let n={...D.token};return e===`enter-from`?(Object.assign(n,D.enterFrom),t===`vertical`?Object.assign(n,D.verticalEnterFrom):Object.assign(n,D.horizontalEnterFrom)):e===`enter-to`?Object.assign(n,D.enterTo):e===`exit-active`&&(Object.assign(n,D.exitActive),t===`vertical`?Object.assign(n,D.verticalExitActive):Object.assign(n,D.horizontalExitActive)),n},Fe=()=>{let e=k();return{...D.container,...e}},Ie=E,Le=()=>{let e=k();return{...E.container,...e}};exports.ANIMATION_CONFIGS=v,exports.ANIMATION_DEFAULTS=_,exports.AnimatedTokens=le,exports.AnimatedTokensV2=Se,exports.TextFlow=Se,exports.CSS_VAR_NAMES=S,exports.CSS_VAR_VALUES=C,exports.DebugProvider=ee,exports.EASINGS=h,exports.EFFECTS=m,exports.Morph=Me,exports.MorphContext=Q,exports.PRESETS=y,exports.RESPONSIVE_CONFIGS=g,exports.Reorder=Z,exports.SlidingNumber=R,exports.SlidingText=Y,exports.TIMING=f,exports.TRANSFORMS=p,exports.animatedTokensBaseStyles=E,exports.animatedTokensStyles=Ie,exports.calculatePositionDelta=re,exports.captureAnimationInfo=ae,exports.captureComputedStyles=U,exports.captureElementAnimations=oe,exports.capturePosition=W,exports.capturePositionForLog=ne,exports.captureStylesForLog=te,exports.choreographyTracker=J,exports.compareStyles=G,exports.createAnimationTimer=q,exports.cssVar=w,exports.formatTimingResult=ie,exports.generateCSSVariables=A,exports.generateResponsiveCSS=j,exports.getResponsiveAnimatedTokensStyle=Le,exports.getResponsiveDuration=u,exports.getResponsiveSlidingTextStyle=Fe,exports.getResponsiveStagger=d,exports.getResponsiveTokenStyles=k,exports.getSlidingTextTokenStyle=Pe,exports.injectCSSVariables=P,exports.reinjectCSSVariables=I,exports.removeCSSVariables=F,exports.responsiveOverrides=O,exports.slidingTextBaseStyles=D,exports.slidingTextStyles=Ne,exports.useAnimationOrchestrator=ge,exports.useCSSGridMorph=Ae,exports.useDebug=H,exports.useElementRegistry=ue,exports.useFLIPAnimation=he,exports.useFLIPClipPath=Ee,exports.useListFormat=xe,exports.useMorph=$,exports.useMorphContext=Ce,exports.usePositionCapture=fe,exports.useReorder=X,exports.useReorderPresence=_e,exports.useViewTransitions=je,exports.useWAAPIAnimations=ce;
 //# sourceMappingURL=index.cjs.map