@webstudio-is/sdk-components-animation 0.224.0 → 0.226.0

package/lib/components.js

@@ -1,10 +1,83 @@
-import { AnimateChildren as r } from "./animate-children.js";
-import { AnimateText as i } from "./animate-text.js";
-import { StaggerAnimation as n } from "./stagger-animation.js";
-import { VideoAnimation as x } from "./video-animation.js";
-export {
-  r as AnimateChildren,
-  i as AnimateText,
-  n as StaggerAnimation,
-  x as VideoAnimation
-};
+//! SPDX-License-Identifier: LicenseRef-Webstudio,Inc-Proprietary
+"use strict";import{jsxs as _,Fragment as Q,jsx as C}from"react/jsx-runtime";import{useSyncExternalStore as ze,use as X,useEffect as P,useState as I,useRef as O,useLayoutEffect as ye,forwardRef as R,useId as G,useContext as U,Children as J,createElement as Be,Suspense as De,useMemo as Je,isValidElement as Ye,cloneElement as Ke}from"react";import{camelCase as Qe}from"change-case";import{ErrorBoundary as Xe}from"react-error-boundary";import{toValue as V}from"@webstudio-is/css-engine/runtime";import{animationCanPlayOnCanvasProperty as Ge}from"@webstudio-is/sdk/runtime";import{ReactSdkContext as Z}from"@webstudio-is/react-sdk/runtime";import{shallowEqual as ee}from"shallow-equal";import{atom as we,computed as Ue}from"nanostores";const Ze=({fallback:e,children:n})=>ze(()=>()=>{},()=>!1,()=>!0)?e:n;let z=null,be;const et=async()=>{var e;if(typeof ViewTimeline>"u")return!0;const n=/134\.0\.0\.0/;if(!navigator.userAgent.match(n))return!1;let t=null;if(navigator.userAgentData)try{const s=(e=(await navigator.userAgentData.getHighEntropyValues(["fullVersionList"])).fullVersionList)==null?void 0:e.find(a=>a.brand==="Google Chrome"||a.brand==="Chromium");t=s?.version||null}catch(s){console.warn("Could not fetch full version:",s)}if(t===null)return!0;const i=t.split(".").map(s=>parseInt(s,10)),r=[134,0,6998,0],o=[134,0,6998,164];for(let s=0;s<i.length;s++)if(i[s]<r[s]||i[s]>o[s])return!1;return!0},tt=e=>z!==null?z:e?(z=import("./index-DhGZj8eD.js"),z):(z=Promise.resolve(),z),xe=et();xe.then(e=>{be=e,typeof window<"u"&&(window.__ws__tmp_isPolyfillRequired=e)});const nt=()=>{const e=X(xe);X(tt(e)),P(()=>{if(!e||/^((?!chrome|android).)*safari/i.test(navigator.userAgent))return;const n=new AbortController;return window.addEventListener("unload",()=>{},{signal:n.signal}),()=>{n.abort()}},[e])},rt=()=>new Promise(e=>setTimeout(e,1e3)),ot=()=>{const[e]=I(rt);X(e)},it=["%","px","cm","mm","q","in","pt","pc","em","rem","ex","rex","cap","rcap","ch","rch","lh","rlh","vw","svw","lvw","dvw","vh","svh","lvh","dvh","vi","svi","lvi","dvi","vb","svb","lvb","dvb","vmin","svmin","lvmin","dvmin","vmax","svmax","lvmax","dvmax"],te=e=>e.replace(/[^a-zA-Z0-9-_]/g,"_"),st=(e,n={})=>{const{value:t,unit:i}=e,{rootFontSize:r=typeof window<"u"&&parseFloat(getComputedStyle(document.documentElement).fontSize)||16,elementFontSize:o=r,viewportWidth:s=typeof window<"u"?window.innerWidth:0,viewportHeight:a=typeof window<"u"?window.innerHeight:0}=n;switch(i){case"cm":return t*37.8;case"mm":return t*3.78;case"q":return t*.945;case"in":return t*96;case"pt":return t*(96/72);case"pc":return t*16;case"rem":return t*r;case"rex":case"rcap":case"rch":case"rlh":{const c={rex:.5,rcap:.7,rch:.5,rlh:1.2};return t*r*c[i]}case"em":return t*o;case"ex":return t*o*.5;case"cap":return t*o*.7;case"ch":return t*o*.5;case"lh":return t*o*1.2;case"vw":case"svw":case"lvw":case"dvw":return t*s/100;case"vh":case"svh":case"lvh":case"dvh":return t*a/100;case"vi":case"svi":case"lvi":case"dvi":return t*s/100;case"vb":case"svb":case"lvb":case"dvb":return t*a/100;case"vmin":case"svmin":case"lvmin":case"dvmin":return t*Math.min(s,a)/100;case"vmax":case"svmax":case"lvmax":case"dvmax":return t*Math.max(s,a)/100;default:throw new Error(`Unsupported unit: ${i}`)}},at=e=>it.includes(e),le=(e,n={})=>{if(!be)return e;if(e.type==="unit"){const{unit:t,value:i}=e;return t==="px"||t==="%"?e:{type:"unit",value:st({unit:t,value:i},n),unit:"px"}}return{type:"unparsed",value:e.value.toLowerCase().replace(/(\d+(?:\.\d+)?)([a-z%]+)/gi,(t,i,r)=>{if(!at(r))return`${i}${r}`;const o=le({type:"unit",value:parseFloat(i),unit:r},n);return o.type!=="unit"?`${i}${r}`:`${o.value}${o.unit}`})}},ne=(e,n)=>{const t=(r,o)=>{let s=0,a=o;for(;a<r.length;){if(r[a]==="(")s++;else if(r[a]===")"&&(s--,s===0))break;a++}return{content:r.slice(o+4,a),end:a}},i=r=>{let o="",s=0;for(;s<r.length;)if(r.startsWith("sibling-index(",s)||r.startsWith("sibling-count(",s)){let a=s+14;for(;a<r.length&&r[a]!==")";)a++;o+=n(`${r.slice(s,s+14)})`),s=a+1}else if(r.startsWith("var(",s)){const{content:a,end:c}=t(r,s),u=[];let m="",l=0;for(let h=0;h<a.length;h++){const g=a[h];g==="("?l++:g===")"&&l--,g===","&&l===0?(u.push(m.trim()),m=""):m+=g}m&&u.push(m.trim());const f=u[0],d=u[1];let v=n(f);v===void 0&&d&&(v=i(d)),o+=v!==void 0?v:`var(--error-not-found${f??"-empty"})`,s=c+1}else o+=r[s],s++;return o};return i(e)},lt=(e,n=" ")=>{const t=[];let i="",r=0;const o=e.trim();for(let s=0;s<o.length;s++){const a=o[s];a==="("?r++:a===")"&&r--,a===n&&r===0?(t.push(i.trim()),i=""):i+=a}return i&&t.push(i.trim()),t.filter(Boolean)},ce=1e4,Se=e=>{if(e.length===0)return[];const n=e.map(i=>i.offset!=null?i.offset*ce:void 0);if(n.length===1&&n[0]==null)return[1];n[0]==null&&(n[0]=0),n.at(-1)==null&&(n[n.length-1]=1*ce);let t=0;for(let i=1;i<n.length-1;){if(n[i]!=null){t=i,i++;continue}if(n[i]==null){const r=n.findIndex((s,a)=>a>=i&&s!=null),o=(n[r]-n[t])/(r-t);for(let s=t+1;s<r;s++)n[s]=n[s-1]+o;t=r,i=r+1}}return n.map(i=>i/ce)},ct=e=>{const n=Se(e);if(n.length===0)return;let t={};for(let i=0;i<n.length;i++)if(n[i]===0){const r=e[i];t={...t,...r.styles}}if(Object.keys(t).length!==0)return t};function Y(e,n){let t=e.parentElement;for(;t!=null;){if(n(t))return t;t=t.parentElement}}function ut(e,n){let t=e;for(;t!=null;){if(n(t))return t;t=t.parentElement}}function dt(e){switch(getComputedStyle(e).display){case"block":case"inline-block":case"list-item":case"table":case"table-caption":case"flow-root":case"flex":case"grid":return!0}return!1}function $e(e){const n=getComputedStyle(e);return n.transform!=="none"||n.perspective!=="none"||n.willChange==="transform"||n.willChange==="perspective"||n.filter!=="none"||n.willChange==="filter"||n.backdropFilter!=="none"}function mt(e){return getComputedStyle(e).position!=="static"?!0:$e(e)}function ft(e){switch(getComputedStyle(e).position){case"static":case"relative":case"sticky":return Y(e,dt);case"absolute":return Y(e,mt);case"fixed":return Y(e,$e)}}function pt(e){if(!(!e||!e.isConnected))for(;e=ft(e);){if(document.scrollingElement===e)return e;const n=getComputedStyle(e),t=["auto","scroll","hidden"];if(t.includes(n.overflowX)||t.includes(n.overflowY))return e===document.body&&document.scrollingElement!==null&&getComputedStyle(document.scrollingElement).overflow==="visible"?document.scrollingElement:e}}function ht(e,n){switch(e){case"root":return document.scrollingElement;case"nearest":return pt(n);case"self":return n;default:throw new TypeError("Invalid ScrollTimeline Source Type.")}}const re=(e,n)=>{if(e==="closest"){const t=Y(n,i=>{const r=getComputedStyle(i),o=["auto","scroll","hidden"];return o.includes(r.overflowX)||o.includes(r.overflowY)});return t===document.body&&document.scrollingElement!==null&&getComputedStyle(document.scrollingElement).overflow==="visible"?document.scrollingElement:t}return ht(e,n)??void 0},ue=e=>{const n=ut(e,t=>getComputedStyle(t).position==="sticky");return n?.parentElement??e},Ee=(e,n)=>{const t=Y(n,i=>{const r=getComputedStyle(i);if(r.getPropertyValue("view-timeline-name")===e)return!0;if(r.getPropertyValue("--view-timeline-name").trim()===e){const o=i.parentElement;if(o===null||getComputedStyle(o).getPropertyValue("--view-timeline-name").trim()!==e)return!0}return!1});if(t!==void 0)return ue(t)},Ce="animation-ws-debug";let gt=0;const B=`${Ce}-infobox`,vt=({selector:e,getContent:n})=>{const t=O(n);return ye(()=>{t.current=n},[n]),P(()=>{const i=`infobox-container-${Ce}`;let r=document.getElementById(i);if(!r){r=document.createElement("div"),r.id=i,r.style.display="contents";const l=document.createElement("style");l.textContent=`
+       .${B} {
+          color: white;
+          background-color: oklch(0.268 0.007 34.298 / 0.9);
+
+          border-radius: 8px;
+          padding: 10px;
+          font-size: 1em;
+          margin: 0.5em;
+          white-space: pre-wrap;
+          font-family: monospace;
+          z-index: 9999;
+          pointer-events: none;
+        }
+
+        /* Performance */
+        .${B} {
+          contain: content;
+        }
+
+        .${B} {
+          position: fixed;
+          position-area: top;
+          position-try-fallbacks: bottom;
+        }
+
+        /* Hide if browser is unsupported */
+        .${B} {
+          display: none;
+        }
+
+        @supports (anchor-name: --myAnchor) {
+          .${B} { display: block; }
+        }
+      `,r.appendChild(l),document.body.appendChild(r)}const o=new Map,s=new IntersectionObserver(l=>{for(const f of l){const d=f.boundingClientRect;o.set(f.target,{x:d.x,width:d.width})}}),a=l=>{const f=o.get(l);if(f===void 0)return{x:0,y:0};const d=l.getBoundingClientRect();return{x:d.x-f.x+d.width/2-f.width/2,y:0}},c=l=>{if(!(l instanceof HTMLElement))return()=>{};s.observe(l);const f=`--anchor-ws-${gt++}`,d=l.style.getPropertyValue("anchor-name");l.style.setProperty("anchor-name",f);const v=document.createElement("div");v.className=B,v.style.setProperty("position-anchor",f),r.appendChild(v);const h=()=>{const{x:E,y:$}=a(l),y=t.current(l);y!==v.textContent&&(v.textContent=y),v.style.setProperty("transform",`translate(${E}px, ${$}px)`),g=requestAnimationFrame(h)};let g=requestAnimationFrame(h);return()=>{cancelAnimationFrame(g),v.remove(),l.style.setProperty("anchor-name",d??"")}},u=document.querySelectorAll(e),m=[];for(const l of u)m.push(c(l));return()=>{m.forEach(l=>l()),s.disconnect()}},[e]),null},oe="data-ws-subject-for",yt=e=>({[oe]:e}),Ae=e=>`[${oe}="${e}"]`,wt=e=>e.hasAttribute(oe),bt=e=>e.getAttribute(oe)??"-",xt=e=>e.id.endsWith("-sample"),Me="data-ws-no-initial-animation",Te={[Me]:""},St=(e,n)=>{const t=Math.pow(10,n);return Math.round(e*t)/t},$t=(e,n,t,i)=>{const r=e.map(l=>l!==void 0?St(l,i):void 0),o=r.join(",");if(t.has(o))return t.get(o);const s=new Map,a=n.getAnimations(),c=new Set;for(let l=0;l<a.length;l++){const f=a[l],d=r[l];if(d===void 0){s.set(l,f.effect),f.effect=null;continue}f.currentTime=1e3*d;const v=f.effect;if(v instanceof KeyframeEffect){const h=v.getKeyframes().flatMap(g=>Object.keys(g));for(const g of h)["offset","easing","composite","computedOffset"].includes(g)||c.add(g)}}const u=getComputedStyle(n),m={};for(const l of c)m[l]=u.getPropertyValue(l);for(const[l,f]of s){const d=a[l];d!==void 0&&(d.effect=f)}return t.set(o,m),m},Et=e=>{const[n]=I(()=>{const r=new Map;for(const o of e){if(o.minWidth!==void 0){r.set(o.id,window.matchMedia(`(min-width: ${o.minWidth}px)`));continue}if(o.maxWidth!==void 0){r.set(o.id,window.matchMedia(`(max-width: ${o.maxWidth}px)`));continue}r.set(o.id,window.matchMedia("(min-width: 0px)"))}return r}),[t,i]=I(()=>[...n].map(([r,o])=>o.matches?r:void 0).filter(r=>r!==void 0));return P(()=>{const r=new AbortController;let o;const s=()=>{i(a=>{const c=[...n].map(([u,m])=>m.matches?u:void 0).filter(u=>u!==void 0);return ee(a,c)?a:c})};for(const[a,c]of n)c.addEventListener("change",()=>{cancelAnimationFrame(o),o=requestAnimationFrame(s)},{signal:r.signal});return s(),()=>{cancelAnimationFrame(o),r.abort()}},[n]),t},Ct=e=>n=>{let t;if(n===void 0)return t;const i=new Map(n);for(const r of e)t=i.get(r)??t;return t},Le=e=>{const n=new Set,t=(i,r="")=>{if(i)for(const o of i)if(o instanceof CSSStyleRule){const s=o.selectorText,a=o.style;for(let c=0;c<a.length;c++){const u=a.item(c);if(u.startsWith("--")){const m=[r,s,u,a.getPropertyValue(u).trim()].filter(Boolean).join(":::");n.add(m)}}t(o.cssRules,[r,s].filter(Boolean).join(":::"))}else if(o instanceof CSSConditionRule){const s=[r,o.conditionText].filter(Boolean).join(":::");t(o.cssRules,s)}else o instanceof CSSLayerBlockRule&&t(o.cssRules,[r,o.name].filter(Boolean).join(":::"))};try{const i=e.sheet;i&&t(i.cssRules)}catch(i){return console.error("Failed to access or parse CSS rules. This might be due to browser limitations, CSS errors, or security restrictions (for cross-origin stylesheets).",i),new Set}return n},At=()=>{const[e]=I(()=>new Promise(n=>{requestAnimationFrame(()=>{n(!0)})}));X(e)},de=new WeakMap,Mt=({subject:e,axis:n,inset:t})=>{if(!e)return new ViewTimeline({subject:e,axis:n,inset:t});const i=`${n}-${t}`;de.has(e)||de.set(e,new Map);const r=de.get(e);if(r.has(i))return r.get(i);const o=new ViewTimeline({subject:e,axis:n,inset:t});return r.set(i,o),o},ie=new WeakSet,Tt=e=>ie.has(e)?()=>{}:(ie.add(e),()=>{ie.delete(e)}),Lt=e=>ie.has(e),K="data-ws-animate-id",ke=e=>`[${K}="${e}"]`,me=(e,n=!1,t=5)=>{const i=n?`:not(:is([${K}], [${Me}]))`:`:not(:is([${K}]))`,r=[ke(e),i],o=[];for(let s=0;s<t;++s)o.push(r.join(" > ")),r.splice(1,0,`[${K}]`);return o.join(", ")},kt=(e,n)=>e.flatMap(t=>n.map(i=>[t,i])),Pe=([e,n],t,i,r)=>{const o=getComputedStyle(t),s=parseFloat(o.fontSize);let a={...n};a.type==="var"&&(a={type:"unparsed",value:V(a)}),a.type==="unparsed"&&(a.value=ne(V(a),u=>u==="--index"?`${i}`:u==="--total"?`${r}`:u==="sibling-index()"?`${i}`:u==="sibling-count()"?`${r}`:o.getPropertyValue(u)));const c=V(le(a,{elementFontSize:s}));if(!CSS.supports("margin-top",c))switch(console.warn(`Invalid range value "${c}"`),e){case"start":return"0%";case"end":return"100%";default:return e}switch(e){case"start":return`calc(0% + ${c})`;case"end":return`calc(100% - ${c})`;case"contain":case"cover":case"entry":case"exit":case"entry-crossing":case"exit-crossing":return`${e} calc(0% + ${c})`}},je=(e,n,t,i,r)=>{const o=getComputedStyle(t),s=parseFloat(o.fontSize);let a={...e};if(a.type==="keyword"){let u=o.getPropertyValue("view-timeline-inset");if(u===""&&(u=o.getPropertyValue("--view-timeline-inset")),u==="")return e.value;const m=lt(u);a={type:"unparsed",value:n==="start"?m[0]:m[1]??m[0]}}a.type==="unparsed"&&(a.value=ne(a.value,u=>u==="--index"?`${i}`:u==="--total"?`${r}`:o.getPropertyValue(u)));const c=V(le(a,{elementFontSize:s}));return CSS.supports("margin-top",c)?c:(console.warn(`Invalid inset value "${c}"`),"0%")},Pt=(e,n,t,i,r)=>{switch(e.type){case"scroll":{const o=re(e.source??"root",n);if(o===void 0){console.error("Source is not found ",e.source);return}return new ScrollTimeline({source:o,axis:e.axis??"block"})}case"view":{const o=e.subject?Ee(e.subject,n):ue(r.get(n.id)??n);if(o==null){console.error("Subject is not found ",e.subject);return}const s=je(e.insetStart??{type:"keyword",value:"auto"},"start",n,t,i),a=je(e.insetEnd??{type:"keyword",value:"auto"},"end",n,t,i);return Mt({subject:o,axis:e.axis??"block",inset:`${s} ${a}`})}}},jt=e=>{if(e===void 0)return 1;const n=Number.parseFloat(e);return Number.isNaN(n)?1:e.endsWith("ms")?n:e.endsWith("s")?n*1e3:n},Ft=(e,n,t)=>`${n}-=#=-${e}-=#=-${t}`,It=e=>e.split("-=#=-")[0],Nt=new Set(["STYLE","SCRIPT","LINK","META","TITLE"]),se=(e,n)=>(...t)=>{try{return e.animate(...t)}catch(i){n(i);return}},Ot=({id:e,action:n,breakpoints:t,isCanvas:i,onError:r})=>{const o=Et(t),s=Je(()=>Ct(o),[o]);ye(()=>{if(!window.matchMedia("(prefers-reduced-motion: no-preference)").matches)return;const a=me(e),c=document.querySelectorAll(a);if(c.length===0)return;const u=(n.type,kt(Array.from(c),n.animations)).length,m=new AbortController,l=[];l.push(()=>{m.abort()});let f=0;const d=new Map,v=h=>d.has(h.id);for(const h of c)if(h instanceof HTMLElement&&!Nt.has(h.tagName)){if(wt(h)){d.set(bt(h),h);continue}for(const g of n.animations){if(s(g.enabled)===!1)continue;const E=Pt(n,h,f,u,d);if(E===void 0)return;const $=getComputedStyle(h);let y=g.timing.easing?ne(g.timing.easing,k=>$.getPropertyValue(k)):"linear";y=CSS.supports("animation-timing-function",y)?y:"linear";const S={easing:y,fill:g.timing.fill},w=g.timing.rangeStart?Pe(g.timing.rangeStart,h,f,u):void 0;let p=g.timing.rangeEnd?Pe(g.timing.rangeEnd,h,f,u):void 0;const x=g.keyframes.map(k=>{const N={offset:k.offset};for(const[j,F]of Object.entries(k.styles)){if(j.startsWith("--")){const q=getComputedStyle(h).getPropertyValue(j)||"0";try{"registerProperty"in CSS&&CSS.registerProperty({syntax:["<number> | <number>+ | <number>#","<angle> | <angle>+ | <angle>#","<color> | <color>+ | <color>#","<length> | <length>+ | <length>#","<integer> | <integer>+ | <integer>#","<percentage> | <percentage>+ | <percentage>#","<length-percentage> | <length-percentage>+ | <length-percentage>#","<resolution> | <string> | <time> | <custom-ident> | <image>","<transform-function> | <transform-list> | <url>"].join(" | "),inherits:!0,initialValue:q,name:j})}catch(H){H instanceof DOMException&&H.name==="InvalidModificationError"||console.error(`Property registration error property="${j}" value="${q}"`,H)}N[j]=V(F);continue}N[Qe(j)]=V(F)}return N});let b;const M=g.timing.duration===void 0?void 0:jt(ne(V(g.timing.duration),k=>$.getPropertyValue(k))),A={...S};let T=x;const L=Ft(e,`${g.name??"-"}`,f);if(M!==void 0)if(p=w,i)A.fill==="both"&&(A.fill="backwards"),A.fill==="forwards"&&(A.fill="none");else{A.fill==="backwards"&&(A.fill="both"),A.fill==="none"&&(A.fill="forwards");const k=Se(x),N=x.filter((j,F)=>k[F]===0);T=[...N.map(j=>({...j,offset:0})),...N.map(j=>({...j,offset:1}))]}const W=M!==void 0?k=>{k.addEventListener("finish",()=>{i||k.cancel();const N=se(h,r)(x,{...S,duration:M,id:L});if(l.push(()=>{N?.cancel()}),!i)return;const j=n.type==="scroll"?document.scrollingElement:n.type==="view"&&n.subject?Ee(n.subject,h):ue(d.get(h.id)??h);if(j==null)return;const F=re("nearest",j);if(F==null)return;const q=F===document.scrollingElement?document:F,H=n.axis??"block",pe=H==="block"||H==="y";let he=pe?F.scrollTop:F.scrollLeft;const ge=()=>{const ve=pe?F.scrollTop:F.scrollLeft;ve<he&&(N?.cancel(),q.removeEventListener("scroll",ge)),he=ve};q.addEventListener("scroll",ge,{signal:m.signal,passive:!0})},{signal:m.signal})}:()=>{};v(h)?(b=se(h,r)([],{...A,timeline:E,rangeStart:w,rangeEnd:p,duration:1,id:L}),M!==void 0&&b!==void 0&&l.push(Tt(b)),b!==void 0&&W(b)):xt(h)?(b=se(h,r)(x,{easing:"linear",fill:"both",duration:1e3,id:L}),b?.pause()):(b=se(h,r)(T,{...A,timeline:E,rangeStart:w,rangeEnd:p,duration:1,id:L}),b&&W(b),f++),l.push(()=>{b?.cancel()})}}return()=>{l.forEach(h=>h())}},[n,e,i,s,r])},Fe=({id:e,action:n})=>{const t=me(e,!0),i=n.animations.filter(a=>a.timing.fill==="backwards"||a.timing.fill==="both");let r="";const o=`${t} { animation: none; }`,s=new Map;for(const a of i){const c=ct(a.keyframes);if(c!==void 0)for(const[u,m]of Object.entries(c))s.set(u,V(m))}return r=`
+    ${r}
+
+    @keyframes ws-scroll-animation-${e} {
+      from {
+        ${[...s.entries()].map(([a,c])=>`${a}:${c};`).join(`
+`)}
+      }
+    }
+
+    @media (prefers-reduced-motion: no-preference) {
+      ${t} {
+        animation-name: ws-scroll-animation-${e};
+        animation-fill-mode: backwards;
+        animation-play-state: paused;
+        animation-duration: 1ms;
+      }
+    }
+    `,_(Q,{children:[C("style",{dangerouslySetInnerHTML:{__html:r}}),C("noscript",{children:C("style",{dangerouslySetInnerHTML:{__html:o}})})]})},Wt=e=>{const n=e.getAnimations().map(r=>{var o;return{id:r.id,name:It(r.id),progress:(o=r.effect)==null?void 0:o.getComputedTiming().progress}}),t=[...new Map(n.map(({id:r,name:o,progress:s})=>s==null?[r,`${o}: idle`]:[r,`${o}: ${(s*100).toFixed(1)}%`])).values()];if(t.length===0)return"";const i=Math.max(...t.map(r=>r.length));return t.map(r=>{const o=r.lastIndexOf(" ");if(o===-1)return r.padEnd(i);const s=r.substring(0,o),a=r.substring(o+1),c=i-r.length;return`${s}${" ".repeat(c+1)}${a}`}).join(`
+`)},Vt=R(({debug:e=!1,children:n,action:t,[Ge]:i,...r},o)=>{const s=G(),a=te(s),[c,u]=I(0),[m,l]=I(0),f=O(t?.isPinned),{renderer:d,breakpoints:v,onError:h}=U(Z),g=O(v);P(()=>{const p=new AbortController;return document.addEventListener("visibilitychange",()=>{document.visibilityState==="visible"&&u(x=>x+1)},{signal:p.signal,once:!0}),()=>{p.abort()}},[]),P(()=>{if(d!=="canvas")return;const p=document.querySelector('style[data-webstudio="user-styles"]');if(p===null){console.error('Style element with attribute `data-webstudio="user-styles"` not found');return}if(!(p instanceof HTMLStyleElement))return;let x=Le(p);const b=new MutationObserver(()=>{const M=Le(p);M.symmetricDifference(x).size!==0&&(u(A=>A+1),x=M)});return b.observe(p,{childList:!0,subtree:!0,characterData:!0}),()=>{b.disconnect()}},[a,d]),P(()=>{if(d===void 0)return;const p=new AbortController;return window.addEventListener("resize",()=>{u(x=>x+1)},{signal:p.signal}),()=>{p.abort()}},[a,d]),P(()=>{t?.isPinned!==f.current&&(f.current=t?.isPinned,t!=null&&t.isPinned&&(l(p=>p+1),u(p=>p+1)))},[t?.isPinned]),P(()=>{d!==void 0&&g.current===v&&(g.current=v,u(p=>p+1))},[v,d]),P(()=>{const p=ke(a),x=document.querySelector(p);if(x===null){console.error(`Element with selector ${p} not found`);return}const b=new MutationObserver(M=>{const A=new Set;M.forEach(T=>{T.type==="childList"&&(T.addedNodes.forEach(L=>{L instanceof HTMLElement&&L.tagName==="STYLE"||L instanceof HTMLElement&&L.tagName==="NOSCRIPT"||A.add(L)}),T.removedNodes.forEach(L=>{A.delete(L)}))}),A.size>0&&u(T=>T+1)});return b.observe(x,{childList:!0,subtree:!1}),x.parentElement!==null&&b.observe(x.parentElement,{childList:!0,subtree:!1}),()=>{b.disconnect()}},[a,m]);const E=d==="canvas",$=E?(t?.isPinned??!1)||(i??!1):!0,y=d===void 0?!1:t?.debug??!1,S=d==="canvas"&&J.count(n)===0,w=S?"Add the instances you want to animate.":n;return _(Q,{children:[t&&$&&C(Ze,{fallback:C(Fe,{id:a,action:t,reason:"Client Only"}),children:_(De,{fallback:C(Fe,{id:a,action:t,reason:"Suspense"}),children:[_(Xe,{fallback:null,onError:p=>{console.error("Polyfill loading error",p)},children:[C(nt,{}),e&&C(ot,{}),d==="canvas"&&C(At,{})]}),C(Ot,{id:a,action:t,breakpoints:v,isCanvas:E,onError:h},`${c}`),y&&C(vt,{selector:me(a),getContent:Wt},`${c}-debug`)]})}),Be("div",{ref:o,[K]:a,...r,style:S?void 0:{display:"contents"},key:m},w)]})}),Ie=(e,n,t)=>{const i=[],r=[];let o;const s=()=>{const m=r.every(Boolean);m!==o&&(e(m),o=m)};let a=n,c=re("nearest",a);const u=[];for(;c;){const m=i.length;r.push(!1);const l=c===document.scrollingElement?document:c,f=new IntersectionObserver(d=>{d.forEach(v=>{r[m]=v.isIntersecting}),s()},{root:l,rootMargin:t});f.observe(a),i.push(f),u.push(()=>{f.unobserve(a),f.disconnect()}),a=c,c=re("nearest",a)}return()=>{u.forEach(m=>{m()})}},qt=e=>{let n;const t=()=>{e(),n=requestAnimationFrame(t)};return n=requestAnimationFrame(t),()=>{cancelAnimationFrame(n)}},Rt=String.raw,fe=R(({children:e,...n},t)=>{const i=O(null),r=O(null),o=G(),s=te(o),a=`${s}-sample`,[c]=I(()=>new Map),[u]=I(()=>Rt`
+        #${s} {
+          position: fixed;
+          visibility: hidden;
+          pointer-events: none;
+          top: -10000px;
+          right: 10000px;
+          contain: strict;
+        }
+
+        #${a} {
+          position: fixed;
+          visibility: hidden;
+          pointer-events: none;
+          top: -9000px;
+          right: 9000px;
+          willchange: translate, scale, opacity;
+          contain: strict;
+        }
+      `),[m]=I(()=>(d,v)=>r.current?$t(d,r.current,c,v):{}),[l]=I(()=>we([])),[f]=I(()=>we(!1));return P(()=>{const d=document.querySelector(Ae(s));if(d===null)return;let v=[],h=[],g=[];const E=()=>{if(!i.current||!r.current)return;const S=i.current.getAnimations(),w=!ee(v,S);v=S;const p=S.map(T=>T.playState),x=!ee(g,p);g=p,w&&c.clear();const b=r.current.getAnimations(),M=b?.map(T=>{var L,W;const k=S.findLast(({id:q})=>q===T.id);if(k===void 0)return;const N=(L=k.effect)==null?void 0:L.getTiming().fill,j=k.playState,F=(W=k.effect)==null?void 0:W.getComputedTiming().progress;return j==="running"&&(N==="backwards"||N==="both")&&F===null||Lt(k)?0:F??void 0})??void 0,A=!ee(h,M);h=M,(w||A||x)&&l.set(M)};E();let $=()=>{};const y=Ie(S=>{$(),S&&($=qt(E))},d,`${Math.round(Math.max(window.innerWidth/2,window.innerHeight/2))}px`);return()=>{y(),$()}},[l,s,c]),P(()=>{const d=document.querySelector(Ae(s));if(d===null)return;const v=Ie(h=>{f.set(h)},d,"0px");return()=>{v()}},[f,s]),_(Q,{children:[C("div",{ref:t,...yt(s),...n,children:e(l,f,m)}),C("style",{dangerouslySetInnerHTML:{__html:u}}),C("div",{id:s,ref:i,inert:"true",...Te}),C("div",{id:a,ref:r,inert:"true",...Te})]})}),Ht=e=>e*e,_t=e=>e*e*e,zt=e=>e*e*e*e,Bt=e=>1-(1-e)*(1-e),Dt=e=>1-Math.pow(1-e,3),Jt=e=>1-Math.pow(1-e,4),Yt=e=>e<.5?2*e*e:1-2*(1-e)*(1-e),Kt=e=>3*e*e-2*e*e*e,Qt=e=>e<.5?8*e*e*e*e:1-8*Math.pow(1-e,4),Xt=e=>e,Ne={linear:Xt,easeIn:Ht,easeInCubic:_t,easeInQuart:zt,easeOut:Bt,easeOutCubic:Dt,easeOutQuart:Jt,ease:Yt,easeInOutCubic:Kt,easeInOutQuart:Qt},D="data-ws-text-animate",Oe="data-ws-text-non-animate",Gt=(e,n)=>{let t=0;const i=document.createNodeIterator(e,NodeFilter.SHOW_TEXT,{acceptNode:s=>{var a;return(a=s.parentElement)!=null&&a.hasAttribute(D)?NodeFilter.FILTER_REJECT:NodeFilter.FILTER_ACCEPT}}),r=[],o=[];for(let s=i.nextNode();s!==null;s=i.nextNode())r.push(s);for(const s of r){const a=s.nodeValue;if(a===null||a.trim().length===0)continue;const c=a.split(n),u=document.createDocumentFragment();for(const f of c){const d=document.createElement("span");typeof n=="string"||f.match(n)===null?d.setAttribute(D,`${t++}`):d.setAttribute(Oe,""),d.textContent=f,u.appendChild(d)}if(!(s instanceof CharacterData)){console.warn("textNode is not an instance of CharacterData");continue}const m=s.parentElement,l=s.nextSibling;o.push(()=>{m!==null&&(l?m.insertBefore(s,l):m.appendChild(s))}),s.replaceWith(u)}return[e.querySelectorAll(`span[${D}]`),()=>{for(const s of e.querySelectorAll(`span[${D}], span[${Oe}]`))s.remove();for(const s of o)s()}]},Ut=(e,n,t,i)=>{if(t===0)return i<n?0:1;const r=(i-(n-t))/t;return r<=0?0:r>=1?1:e(r)},Zt=(e,n,t)=>Math.min(Math.max(e,n),t),We="data-ws-animate-text-id",ae=e=>`[${We}="${e}"]`,en=(e,n)=>e.map(t=>t!==void 0?t*n:void 0),tn=R(({$progress:e,slidingWindow:n,easing:t,splitBy:i,getStylesAt:r,onRender:o,children:s,progressPrecision:a=3,...c},u)=>{n=Math.max(0,n);const m=G(),l=te(m),f=O(),d=O([]),v=O(r);v.current=r;const[h,g]=I(0),[E]=I(()=>`
+    ${ae(l)} span[${D}] {
+      display: inline-block;
+      will-change: translate, scale, opacity;
+    }
+
+    ${ae(l)} *:has(> span[${D}]) {
+      white-space-collapse: preserve;
+    }
+  `);return P(()=>{const $=document.querySelector(ae(l));if(!$)return;const[y,S]=Gt($,i);return f.current=y,d.current=[],S},[l,i,h]),P(()=>{const $=document.querySelector(ae(l));if(!$)return;const y=new MutationObserver(S=>{const w=new Set;let p=!1;S.forEach(x=>{x.type==="childList"&&(x.addedNodes.forEach(b=>{if(b instanceof HTMLElement&&b.isContentEditable){p=!0;return}w.add(b)}),x.removedNodes.forEach(b=>{if(w.has(b)){w.delete(b);return}w.add(b)}))}),!p&&w.size>0&&g(x=>x+1)});return y.observe($,{childList:!0,subtree:!0}),()=>{y.disconnect()}},[l,h]),P(()=>e.subscribe($=>{const y=f.current;if(y===void 0||y.length===0)return;const S=[];for(let w=0;w<y.length;w++){const p=y[w];if($.length===0){if(d.current[w]===void 0)continue;p.style.cssText="",d.current[w]=void 0;continue}const x=y.length+n-1,b=en($,x),M=Ne[t],A=b.map(W=>W===void 0?void 0:1-Ut(M,Zt(W,0,x),n,w)),T=v.current(A,a),L=JSON.stringify(T);d.current[w]!==L&&(S.push([p,T]),d.current[w]=L)}for(const[w,p]of S){w.style.cssText="";for(const[x,b]of Object.entries(p))w.style.setProperty(x,b)}o?.()}),[l,e,n,t,o,a,h]),_(Q,{children:[C("style",{dangerouslySetInnerHTML:{__html:E}}),C("div",{ref:u,[We]:l,...c,style:{display:"contents"},children:s},h)]})}),nn={char:"",space:/( )/,'symbol "#"':/#/,'symbol "~"':/~/},Ve=R(({charWindow:e=5,easing:n="linear",splitBy:t="char",children:i,...r},o)=>{const{renderer:s}=U(Z),a=s==="canvas"&&J.count(i)===0?"Add content, and all text inside will be animated.":i;return C(fe,{ref:o,...r,children:(c,u,m)=>C(tn,{$progress:c,getStylesAt:m,slidingWindow:e,easing:n,splitBy:nn[t],children:a})})}),rn="AnimateText";Ve.displayName=rn;const on=(e,n,t,i)=>{if(t===0)return i<n?0:1;const r=(i-(n-t))/t;return r<=0?0:r>=1?1:e(r)},sn=(e,n,t)=>Math.min(Math.max(e,n),t),qe="data-ws-staggering-animation-id",Re=e=>`[${qe}="${e}"]`,an=(e,n)=>e.map(t=>t!==void 0?t*n:void 0),ln=R(({$progress:e,slidingWindow:n,easing:t,getStylesAt:i,onRender:r,children:o,progressPrecision:s=3,...a},c)=>{n=Math.max(0,n);const u=G(),m=te(u),l=O(),f=O([]),d=O(i);d.current=i;const[v,h]=I(0);return P(()=>{const g=document.querySelector(Re(m));if(!g)return;const E=Array.from(g.children).filter($=>$ instanceof HTMLElement);l.current=E,f.current=[]},[m,v]),P(()=>{const g=document.querySelector(Re(m));if(!g)return;const E=new MutationObserver($=>{const y=new Set;let S=!1;$.forEach(w=>{w.type==="childList"&&(w.addedNodes.forEach(p=>{if(p instanceof HTMLElement&&p.isContentEditable){S=!0;return}y.add(p)}),w.removedNodes.forEach(p=>{if(y.has(p)){y.delete(p);return}y.add(p)}))}),!S&&y.size>0&&h(w=>w+1)});return E.observe(g,{childList:!0,subtree:!1}),()=>{E.disconnect()}},[m,v]),P(()=>e.subscribe(g=>{const E=l.current;if(E===void 0||E.length===0)return;const $=[];for(let y=0;y<E.length;y++){const S=E[y];if(g.length===0){if(f.current[y]===void 0)continue;S.style.cssText="",f.current[y]=void 0;continue}const w=E.length+n-1,p=an(g,w),x=Ne[t],b=p.map(T=>T===void 0?void 0:1-on(x,sn(T,0,w),n,y)),M=d.current(b,s),A=JSON.stringify(M);f.current[y]!==A&&($.push([S,M]),f.current[y]=A)}for(const[y,S]of $){y.style.cssText="";for(const[w,p]of Object.entries(S))y.style.setProperty(w,p)}r?.()}),[m,e,n,t,r,s,v]),C("div",{ref:c,[qe]:m,...a,style:{display:"contents"},children:o},v)}),He=R(({charWindow:e=1,easing:n="linear",children:t,...i},r)=>{const{renderer:o}=U(Z),s=o==="canvas"&&J.count(t)===0?"Add children.":t;return C(fe,{ref:r,...i,children:(a,c,u)=>C(ln,{$progress:a,getStylesAt:u,slidingWindow:e,easing:n,children:s})})}),cn="StaggerAnimation";He.displayName=cn;const un=({$progress:e,$visible:n,$timeline:t,children:i})=>{const[r]=I(()=>Ue([e],o=>o[0]));return J.map(i,o=>Ye(o)?Ke(o,{$progress:r,$visible:n,$timeline:t}):o)},dn=()=>R(({children:e,timeline:n,...t},i)=>{const{renderer:r}=U(Z),o=r==="canvas"&&J.count(e)===0?"Add children.":e;return C(fe,{ref:i,...t,children:(s,a)=>C(un,{$progress:s,$timeline:n,$visible:a,children:o})})}),_e=dn(),mn="VideoAnimation";_e.displayName=mn;export{Vt as AnimateChildren,Ve as AnimateText,He as StaggerAnimation,_e as VideoAnimation};

package/lib/hooks.js

@@ -1,5 +1,2 @@
-import { hooksAnimateChildren as o } from "./animate-children.js";
-const t = [o];
-export {
-  t as hooks
-};
+//! SPDX-License-Identifier: LicenseRef-Webstudio,Inc-Proprietary
+"use strict";import{jsx as r}from"react/jsx-runtime";import{forwardRef as c}from"react";import{animationCanPlayOnCanvasProperty as o}from"@webstudio-is/sdk/runtime";const m=c(({debug:a=!1,action:t,...s},i)=>r("div",{ref:i,style:{display:"contents"},...s})),n="AnimateChildren";m.displayName=n;const e="@webstudio-is/sdk-components-animation",p={onNavigatorUnselect:(a,t)=>{t.instancePath.length>0&&t.instancePath[0].component===`${e}:${n}`&&a.setMemoryProp(t.instancePath[0],o,void 0)},onNavigatorSelect:(a,t)=>{t.instancePath.length>0&&t.instancePath[0].component===`${e}:${n}`&&a.setMemoryProp(t.instancePath[0],o,!0)}},P=[p];export{P as hooks};

package/lib/index-DhGZj8eD.js

@@ -0,0 +1,2 @@
+//! SPDX-License-Identifier: LicenseRef-Webstudio,Inc-Proprietary
+"use strict";var vn=Object.defineProperty,wn=(t,e,n)=>e in t?vn(t,e,{enumerable:!0,configurable:!0,writable:!0,value:n}):t[e]=n,d=(t,e,n)=>wn(t,typeof e!="symbol"?e+"":e,n);class p{}class be extends p{constructor(e){super(),d(this,"value"),this.value=e}}class ye extends p{constructor(e){super(),d(this,"value"),this.value=e}}class xn extends p{constructor(e){super(),d(this,"value"),this.value=e}}class Cn extends p{constructor(e,n="unrestricted"){super(),d(this,"type"),d(this,"value"),this.value=e,this.type=n}}class bn extends p{constructor(e){super(),d(this,"value"),this.value=e}}class kn extends p{}class Pn extends p{constructor(e){super(),d(this,"value"),this.value=e}}class ue extends p{}class x extends p{constructor(e){super(),d(this,"value"),this.value=e}}class G extends p{constructor(e,n="integer"){super(),d(this,"value"),d(this,"type"),this.value=e,this.type=n}}class oe extends p{constructor(e){super(),d(this,"value"),this.value=e}}class _ extends p{constructor(e,n,i){super(),d(this,"value"),d(this,"type"),d(this,"unit"),this.value=e,this.type=n,this.unit=i}}class X extends p{}class En extends p{}class Rn extends p{}class Mn extends p{}class An extends p{}class Xe extends p{}class ke extends p{}class Ke extends p{}class b extends p{}class K extends p{}class Pe extends p{}class Qe extends p{}class Vn{constructor(e){d(this,"input"),d(this,"index",0),this.input=e}consume(){const e=this.input.codePointAt(this.index);return typeof e<"u"&&(this.index+=String.fromCodePoint(e).length),e}reconsume(e){typeof e<"u"&&(this.index-=String.fromCodePoint(e).length)}peek(){const e=[];let n=this.index;for(let i=0;i<3&&n<this.input.length;i++){const r=this.input.codePointAt(n);e.push(r),n+=String.fromCodePoint(r).length}return e}}function Ee(t){return t===10}function M(t){return Ee(t)||t===8192||t===32}function w(t){return t>=48&&t<=57}function De(t){return w(t)||t>=65&&t<=70||t>=97&&t<=102}function Un(t){return t>=65&&t<=90}function In(t){return t>=97&&t<=122}function Nn(t){return Un(t)||In(t)}function On(t){return t>=128}function ee(t){return Nn(t)||On(t)||t===95}function Ye(t){return ee(t)||w(t)||t===45}function Dn(t){return t>=0&&t<=8||t===11||t>=14&&t<=31||t===127}function O(t,e){return t===92&&!Ee(e)}function Z(t,e,n){return t===45?ee(e)||e===45||O(e,n):ee(t)?!0:t===92?O(t,e):!1}function ce(t,e,n){return t===43||t===45?w(e)||e===46&&w(n):w(t===46?e:t)}function ae(t){const e=t.consume();if(De(e)){let n=[e];for(;De(...t.peek())&&n.length<5;)n.push(t.consume());M(...t.peek())&&t.consume();const i=parseInt(String.fromCodePoint(...n),16);return i===0||i>1114111?65533:i}else return typeof e>"u"?65533:e}function ze(t,e){const n=new bn("");for(;;){const i=t.consume();if(i===e||typeof i>"u")return n;if(i===10)return t.reconsume(i),new kn;if(i===92){const r=t.peek()[0];typeof r>"u"||(Ee(r)?t.consume():n.value+=String.fromCodePoint(ae(t)))}else n.value+=String.fromCodePoint(i)}}function ne(t){let e="";for(;;){const n=t.consume();if(Ye(n))e+=String.fromCodePoint(n);else if(O(...t.peek()))e+=String.fromCodePoint(ae(t));else return t.reconsume(n),e}}function zn(t){let e="integer",n="";for([43,45].includes(t.peek()[0])&&(n+=String.fromCodePoint(t.consume()));w(...t.peek());)n+=String.fromCodePoint(t.consume());if(t.peek()[0]===46&&w(t.peek()[1]))for(n+=String.fromCodePoint(t.consume(),t.consume()),e="number";w(...t.peek());)n+=String.fromCodePoint(t.consume());return[69,101].includes(t.peek()[0])&&([45,43].includes(t.peek()[1])&&w(t.peek()[2])?(n+=String.fromCodePoint(t.consume(),t.consume(),t.consume()),e="number"):w(t.peek()[1])&&(n+=String.fromCodePoint(t.consume(),t.consume()),e="number")),{value:parseFloat(n),type:e}}function J(t){let e=zn(t);return Z(...t.peek())?new _(e.value,e.type,ne(t)):t.peek()[0]===37?(t.consume(),new oe(e.value)):new G(e.value,e.type)}function fe(t){for(;;){const e=t.consume();if(e===41||typeof e>"u")return;O(...t.peek())&&ae(t)}}function Ln(t){const e=new Pn("");for(;M(...t.peek());)t.consume();for(;;){const n=t.consume();if(n===41||typeof n>"u")return e;if(M(n)){for(;M(...t.peek());)t.consume();return t.peek()[0]===41||typeof t.peek()[0]>"u"?(t.consume(),e):(fe(t),new ue)}else{if([34,39,40].includes(n)||Dn(n))return fe(t),new ue;if(n===92)if(O(...t.peek()))e.value+=ae(t);else return fe(t),new ue;else e.value+=String.fromCodePoint(n)}}}function me(t){const e=ne(t);if(e.match(/url/i)&&t.peek()[0]===40){for(t.consume();M(t.peek()[0])&&M(t.peek()[1]);)t.consume();return[34,39].includes(t.peek()[0])||M(t.peek()[0])&&[34,39].includes(t.peek()[1])?new ye(e):Ln(t)}else return t.peek()[0]===40?(t.consume(),new ye(e)):new be(e)}function Wn(t){const e=t.consume(),n=t.peek();if(M(e)){for(;M(...t.peek());)t.consume();return new X}else{if(e===34)return ze(t,e);if(e===35)if(Ye(n[0])||O(...n)){const i=new Cn;return Z(...n)&&(i.type="id"),i.value=ne(t),i}else return new x(String.fromCodePoint(e));else return e===39?ze(t,e):e===40?new b:e===41?new K:e===43?ce(...n)?(t.reconsume(e),J(t)):new x(String.fromCodePoint(e)):e===44?new Xe:e===45?ce(...t.peek())?(t.reconsume(e),J(t)):t.peek()[0]===45&&t.peek()[1]===62?(t.consume(),t.consume(),new Rn):Z(...t.peek())?(t.reconsume(e),me(t)):new x(String.fromCodePoint(e)):e===46?ce(...t.peek())?(t.reconsume(e),J(t)):new x(String.fromCodePoint(e)):e===58?new Mn:e===59?new An:e===60?n[0]===33&&n[1]===45&&n[2]===45?(t.consume(),t.consume(),t.consume(),new En):new x(String.fromCodePoint(e)):e===64?Z(...n)?new xn(ne(t)):new x(String.fromCodePoint(e)):e===91?new ke:e===92?O(...n)?(t.reconsume(e),me(t)):new x(String.fromCodePoint(e)):e===93?new Ke:e===123?new Pe:e===125?new Qe:w(e)?(t.reconsume(e),J(t)):ee(e)?(t.reconsume(e),me(t)):typeof e>"u"?void 0:new x(String.fromCodePoint(e))}}function Hn(t){const e=new Vn(t),n=[];for(;;){const i=Wn(e);if(typeof i>"u")return n;n.push(i)}}const jn=new Set(["px","deg","s","hz","dppx","number","fr"]);function pe(t){return jn.has(t.toLowerCase())}function Re(t){if(["x","y"].includes(t))return t;if(t==="block")t="y";else if(t==="inline")t="x";else throw new TypeError(`Invalid axis \u201C${t}\u201D`);return t}function Me(t){const e=[];let n=0;function i(){let o=0;const s=n;for(;n<t.length;){const a=t.slice(n,n+1);if(/\s/.test(a)&&o===0)break;if(a==="(")o+=1;else if(a===")"&&(o-=1,o===0)){n++;break}n++}return t.slice(s,n)}function r(){for(;/\s/.test(t.slice(n,n+1));)n++}for(;n<t.length;){const o=t.slice(n,n+1);/\s/.test(o)?r():e.push(i())}return e}function Le(t,e){return t.reduce((n,i)=>(n.has(i[e])?n.get(i[e]).push(i):n.set(i[e],[i]),n),new Map)}function We(t,e){const n=[],i=[];for(const r of t)e(r)?n.push(r):i.push(r);return[n,i]}function v(t,e={}){function n(r){return Array.from(r).map(o=>v(o,e))}if(t instanceof CSSUnitValue){if(t.unit==="percent"&&e.percentageReference){const o=t.value/100*e.percentageReference.value,s=e.percentageReference.unit;return new CSSUnitValue(o,s)}const r=t.toSum();if(r&&r.values.length===1&&(t=r.values[0]),t instanceof CSSUnitValue&&t.unit==="em"&&e.fontSize&&(t=new CSSUnitValue(t.value*e.fontSize.value,e.fontSize.unit)),t instanceof CSSKeywordValue){if(t.value==="e")return new CSSUnitValue(Math.E,"number");if(t.value==="pi")return new CSSUnitValue(Math.PI,"number")}return t}if(!t.operator)return t;switch(t.operator){case"sum":t=new CSSMathSum(...n(t.values));break;case"product":t=new CSSMathProduct(...n(t.values));break;case"negate":t=new CSSMathNegate(v(t.value,e));break;case"clamp":t=new CSSMathClamp(v(t.lower,e),v(t.value,e),v(t.upper,e));break;case"invert":t=new CSSMathInvert(v(t.value,e));break;case"min":t=new CSSMathMin(...n(t.values));break;case"max":t=new CSSMathMax(...n(t.values));break}if(t instanceof CSSMathMin||t instanceof CSSMathMax){const r=Array.from(t.values);if(r.every(o=>o instanceof CSSUnitValue&&o.unit!=="percent"&&pe(o.unit)&&o.unit===r[0].unit)){const o=Math[t.operator].apply(Math,r.map(({value:s})=>s));return new CSSUnitValue(o,r[0].unit)}}if(t instanceof CSSMathMin||t instanceof CSSMathMax){const r=Array.from(t.values),[o,s]=We(r,l=>l instanceof CSSUnitValue&&l.unit!=="percent"),a=Array.from(Le(o,"unit").values());if(a.some(l=>l.length>0)){const l=a.map(u=>{const f=Math[t.operator].apply(Math,u.map(({value:m})=>m));return new CSSUnitValue(f,u[0].unit)});t instanceof CSSMathMin?t=new CSSMathMin(...l,...s):t=new CSSMathMax(...l,...s)}return r.length===1?r[0]:t}if(t instanceof CSSMathNegate)return t.value instanceof CSSUnitValue?new CSSUnitValue(0-t.value.value,t.value.unit):t.value instanceof CSSMathNegate?t.value.value:t;if(t instanceof CSSMathInvert)return t.value instanceof CSSMathInvert?t.value.value:t;if(t instanceof CSSMathSum){let r=function(s){const a=s.filter(f=>f instanceof CSSUnitValue),l=s.filter(f=>!(f instanceof CSSUnitValue)),u=Array.from(Le(a,"unit").entries()).map(([f,m])=>{const g=m.reduce((D,{value:j})=>D+j,0);return new CSSUnitValue(g,f)});return[...l,...u]};var i=r;let o=[];for(const s of t.values)s instanceof CSSMathSum?o.push(...s.values):o.push(s);return o=r(o),o.length===1?o[0]:new CSSMathSum(...o)}if(t instanceof CSSMathProduct){let r=[];for(const a of t.values)a instanceof CSSMathProduct?r.push(...a.values):r.push(a);const[o,s]=We(r,a=>a instanceof CSSUnitValue&&a.unit==="number");if(o.length>1){const a=o.reduce((l,{value:u})=>l*u,1);r=[new CSSUnitValue(a,"number"),...s]}if(r.length===2){let a,l;for(const u of r)u instanceof CSSUnitValue&&u.unit==="number"?a=u:u instanceof CSSMathSum&&[...u.values].every(f=>f instanceof CSSUnitValue)&&(l=u);if(a&&l)return new CSSMathSum(...[...l.values].map(u=>new CSSUnitValue(u.value*a.value,u.unit)))}if(r.every(a=>a instanceof CSSUnitValue&&pe(a.unit)||a instanceof CSSMathInvert&&a.value instanceof CSSUnitValue&&pe(a.value.unit))){const a=new CSSMathProduct(...r).toSum();if(a&&a.values.length===1)return a.values[0]}return new CSSMathProduct(...r)}return t}const T=null,Je=["percent","length","angle","time","frequency","resolution","flex"],A={fontRelativeLengths:{units:new Set(["em","rem","ex","rex","cap","rcap","ch","rch","ic","ric","lh","rlh"])},viewportRelativeLengths:{units:new Set(["vw","lvw","svw","dvw","vh","lvh","svh","dvh","vi","lvi","svi","dvi","vb","lvb","svb","dvb","vmin","lvmin","svmin","dvmin","vmax","lvmax","svmax","dvmax"])},absoluteLengths:{units:new Set(["cm","mm","Q","in","pt","pc","px"]),compatible:!0,canonicalUnit:"px",ratios:{cm:96/2.54,mm:96/2.54/10,Q:96/2.54/40,in:96,pc:96/6,pt:96/72,px:1}},angle:{units:new Set(["deg","grad","rad","turn"]),compatible:!0,canonicalUnit:"deg",ratios:{deg:1,grad:360/400,rad:180/Math.PI,turn:360}},time:{units:new Set(["s","ms"]),compatible:!0,canonicalUnit:"s",ratios:{s:1,ms:1/1e3}},frequency:{units:new Set(["hz","khz"]),compatible:!0,canonicalUnit:"hz",ratios:{hz:1,khz:1e3}},resolution:{units:new Set(["dpi","dpcm","dppx"]),compatible:!0,canonicalUnit:"dppx",ratios:{dpi:1/96,dpcm:2.54/96,dppx:1}}},Ze=new Map;for(const t of Object.values(A))if(t.compatible)for(const e of t.units)Ze.set(e,t);function Te(t){return Ze.get(t)}function Bn(t,e){const n={...t};for(const i of Object.keys(e))n[i]?n[i]+=e[i]:n[i]=e[i];return n}function Ae(t){return t==="number"?{}:t==="percent"?{percent:1}:A.absoluteLengths.units.has(t)||A.fontRelativeLengths.units.has(t)||A.viewportRelativeLengths.units.has(t)?{length:1}:A.angle.units.has(t)?{angle:1}:A.time.units.has(t)?{time:1}:A.frequency.units.has(t)?{frequency:1}:A.resolution.units.has(t)?{resolution:1}:t==="fr"?{flex:1}:T}function te(t){if(t instanceof CSSUnitValue){let{unit:e,value:n}=t;const i=Te(t.unit);return i&&e!==i.canonicalUnit&&(n*=i.ratios[e],e=i.canonicalUnit),e==="number"?[[n,{}]]:[[n,{[e]:1}]]}else if(t instanceof CSSMathInvert){if(!(t.value instanceof CSSUnitValue))throw new Error("Not implemented");const e=te(t.value);if(e===T||e.length>1)return T;const n=e[0],i={};for(const[r,o]of Object.entries(n[1]))i[r]=-1*o;return e[0]=[1/n[0],i],e}else if(t instanceof CSSMathProduct){let e=[[1,{}]];for(const n of t.values){const i=te(n),r=[];if(i===T)return T;for(const o of e)for(const s of i)r.push([o[0]*s[0],Bn(o[1],s[1])]);e=r}return e}else throw new Error("Not implemented")}function Fn(t,e){if(Ae(e)===T)throw new SyntaxError("The string did not match the expected pattern.");const n=te(t);if(!n)throw new TypeError;if(n.length>1)throw new TypeError("Sum has more than one item");const i=qn(en(n[0]),e);if(i===T)throw new TypeError;return i}function en(t){const[e,n]=t,i=Object.entries(n);if(i.length>1)return T;if(i.length===0)return new CSSUnitValue(e,"number");const r=i[0];return r[1]!==1?T:new CSSUnitValue(e,r[0])}function qn(t,e){const n=t.unit,i=t.value,r=Te(n),o=Te(e);return!o||r!==o?T:new CSSUnitValue(i*o.ratios[n]/o.ratios[e],e)}function He(t,...e){if(e&&e.length)throw new Error("Not implemented");const n=te(t).map(i=>en(i));if(n.some(i=>i===T))throw new TypeError("Type error");return new CSSMathSum(...n)}function $n(t){const e={};for(const n of Je)e[n]=-1*t[n];return e}function Gn(t,e){if(t.percentHint&&e.percentHint&&t.percentHint!==e.percentHint)return T;const n={...t,percentHint:t.percentHint??e.percentHint};for(const i of Je)e[i]&&(n[i]??(n[i]=0),n[i]+=e[i]);return n}class H{constructor(e,n){d(this,"name"),d(this,"values"),this.name=e,this.values=n}}class Ve{constructor(e,n){d(this,"value"),d(this,"associatedToken"),this.value=e,this.associatedToken=n}}function _n(t){if(Array.isArray(t))return t;if(typeof t=="string")return Hn(t);throw new TypeError(`Invalid input type ${typeof t}`)}function Xn(t,e){const n=new H(t.value,[]);for(;;){const i=e.shift();if(i instanceof K||typeof i>"u")return n;e.unshift(i),n.values.push(Ue(e))}}function Kn(t,e){let n;if(e instanceof Pe)n=Qe;else if(e instanceof b)n=K;else if(e instanceof ke)n=Ke;else return;const i=new Ve([],e);for(;;){const r=t.shift();if(r instanceof n||typeof r>"u")return i;t.unshift(r),i.value.push(Ue(t))}}function Ue(t){const e=t.shift();return e instanceof Pe||e instanceof ke||e instanceof b?Kn(t,e):e instanceof ye?Xn(e,t):e}function Qn(t){const e=_n(t);for(;e[0]instanceof X;)e.shift();if(typeof e[0]>"u")return null;const n=Ue(e);for(;e[0]instanceof X;)e.shift();return typeof e[0]>"u"?n:null}function je(t){if(t instanceof b||t instanceof K)return 6;if(t instanceof x)switch(t.value){case"*":return 4;case"/":return 4;case"+":return 2;case"-":return 2}}function B(t){return t[t.length-1]}function he(t,e,n){const i=["+","-"].includes(t.value)?"ADDITION":"MULTIPLICATION",r=e.type===i?e.values:[e],o=n.type===i?n.values:[n];return t.value==="-"?o[0]={type:"NEGATE",value:o[0]}:t.value==="/"&&(o[0]={type:"INVERT",value:o[0]}),{type:i,values:[...r,...o]}}function Yn(t){const e=[],n=[];for(;t.length;){const i=t.shift();if(i instanceof G||i instanceof _||i instanceof oe||i instanceof H||i instanceof Ve||i instanceof be)n.push(i);else if(i instanceof x&&["*","/","+","-"].includes(i.value)){for(;e.length&&!(B(e)instanceof b)&&je(B(e))>je(i);){const r=e.pop(),o=n.pop(),s=n.pop();n.push(he(r,s,o))}e.push(i)}else if(i instanceof b)e.push(i);else if(i instanceof K){if(!e.length)return null;for(;!(B(e)instanceof b);){const r=e.pop(),o=n.pop(),s=n.pop();n.push(he(r,s,o))}if(!(B(e)instanceof b))return null;e.pop()}else if(!(i instanceof X))return null}for(;e.length;){if(B(e)instanceof b)return null;const i=e.pop(),r=n.pop(),o=n.pop();n.push(he(i,o,r))}return n[0]}function F(t){if(t.type==="ADDITION")return new CSSMathSum(...t.values.map(e=>F(e)));if(t.type==="MULTIPLICATION")return new CSSMathProduct(...t.values.map(e=>F(e)));if(t.type==="NEGATE")return new CSSMathNegate(F(t.value));if(t.type==="INVERT")return new CSSMathInvert(F(t.value));if(t instanceof Ve)return Ie(new H("calc",t.value));if(t instanceof be){if(t.value==="e")return new CSSUnitValue(Math.E,"number");if(t.value==="pi")return new CSSUnitValue(Math.PI,"number");throw new SyntaxError("Invalid math expression")}else return nn(t)}function Ie(t){if(t.name==="min"||t.name==="max"){const r=t.values.filter(o=>!(o instanceof X||o instanceof Xe)).map(o=>v(Ie(new H("calc",o))));return t.name==="min"?new CSSMathMin(...r):new CSSMathMax(...r)}if(t.name!=="calc")return null;const e=Yn([...t.values]),n=F(e);let i;try{i=v(n)}catch{new CSSStyleSheet().insertRule("error",0)}return i instanceof CSSUnitValue?new CSSMathSum(i):i}function nn(t){if(t instanceof H&&["calc","min","max","clamp"].includes(t.name))return Ie(t);if(t instanceof G&&t.value===0&&!t.unit)return new CSSUnitValue(0,"px");if(t instanceof G)return new CSSUnitValue(t.value,"number");if(t instanceof oe)return new CSSUnitValue(t.value,"percent");if(t instanceof _)return new CSSUnitValue(t.value,t.unit)}function Jn(t){const e=Qn(t);return e===null&&new CSSStyleSheet().insertRule("error",0),e instanceof G||e instanceof oe||e instanceof _||e instanceof H||new CSSStyleSheet().insertRule("error",0),e instanceof _&&Ae(e.unit)===null&&new CSSStyleSheet().insertRule("error",0),nn(e)}function Zn(){let t=new WeakMap;function e(a){switch(a){case"percent":return"%";case"number":return"";default:return a.toLowerCase()}}function n(a){return typeof a=="number"?new CSSUnitValue(a,"number"):a}function i(a){const l=[];for(let u=0;u<a.length;u++)l[u]=n(a[u]);return l}class r{static parse(l){return l instanceof r?l:v(Jn(l),{})}}class o extends r{constructor(l,u,f,m){super(),t.set(this,{values:i(l),operator:u,name:f||u,delimiter:m||", "})}get operator(){return t.get(this).operator}get values(){return t.get(this).values}toString(){const l=t.get(this);return`${l.name}(${l.values.join(l.delimiter)})`}}const s={CSSNumericValue:r,CSSMathValue:o,CSSUnitValue:class extends r{constructor(a,l){super(),t.set(this,{value:a,unit:l})}get value(){return t.get(this).value}set value(a){t.get(this).value=a}get unit(){return t.get(this).unit}to(a){return Fn(this,a)}toSum(...a){return He(this,...a)}type(){const a=t.get(this);return Ae(a.unit)}toString(){const a=t.get(this);return`${a.value}${e(a.unit)}`}},CSSKeywordValue:class{constructor(a){this.value=a}toString(){return this.value.toString()}},CSSMathSum:class extends o{constructor(a){super(arguments,"sum","calc"," + ")}},CSSMathProduct:class extends o{constructor(a){super(arguments,"product","calc"," * ")}toSum(...a){return He(this,...a)}type(){return t.get(this).values.map(a=>a.type()).reduce(Gn)}},CSSMathNegate:class extends o{constructor(a){super([arguments[0]],"negate","-")}get value(){return t.get(this).values[0]}type(){return this.value.type()}},CSSMathInvert:class extends o{constructor(a){super([1,arguments[0]],"invert","calc"," / ")}get value(){return t.get(this).values[1]}type(){const a=t.get(this);return $n(a.values[1].type())}},CSSMathMax:class extends o{constructor(){super(arguments,"max")}},CSSMathMin:class extends o{constructor(){super(arguments,"min")}}};if(!window.CSS&&!Reflect.defineProperty(window,"CSS",{value:{}}))throw Error("Error installing CSSOM support");window.CSSUnitValue||["number","percent","em","ex","px","cm","mm","in","pt","pc","Q","vw","vh","vmin","vmax","rems","ch","deg","rad","grad","turn","ms","s","Hz","kHz","dppx","dpi","dpcm","fr"].forEach(a=>{if(!Reflect.defineProperty(CSS,a,{value:l=>new CSSUnitValue(l,a)}))throw Error(`Error installing CSS.${a}`)});for(let[a,l]of Object.entries(s))if(!(a in window)&&!Reflect.defineProperty(window,a,{value:l}))throw Error(`Error installing CSSOM support for ${a}`)}Zn();const Be="block";let S=new WeakMap,R=new WeakMap;const ve=["entry","exit","cover","contain","entry-crossing","exit-crossing"];function Fe(t){return t===document.scrollingElement?document:t}function N(t){let e=S.get(t).animations;if(e.length===0)return;let n=t.currentTime;for(let i=0;i<e.length;i++)e[i].tickAnimation(n)}function tn(t,e){if(!t)return null;const n=R.get(t).sourceMeasurements;let i=n.scrollTop;return Re(e)==="x"&&(i=Math.abs(n.scrollLeft)),i}function et(t,e){const n=R.get(t).sourceMeasurements;if(e==="block"?e="y":e==="inline"&&(e="x"),e==="y")return n.scrollHeight-n.clientHeight;if(e==="x")return n.scrollWidth-n.clientWidth}function Ne(t,e){const n=v(t,e);if(n instanceof CSSUnitValue){if(n.unit==="px")return n.value;throw TypeError("Unhandled unit type "+n.unit)}else throw TypeError("Unsupported value type: "+typeof t)}function nt(t){if(!(t instanceof Q)){tt(t);return}const e=t.subject;if(!e){z(t,null);return}if(getComputedStyle(e).display=="none"){z(t,null);return}const n=an(e);z(t,n)}function tt(t){const e=S.get(t);if(!e.anonymousSource)return;const n=rt(e.anonymousSource,e.anonymousTarget);z(t,n)}function qe(t){return["block","inline","x","y"].includes(t)}function it(t){let e=0,n;return()=>{const i=Date.now();return i-e<5||(n=t(),e=i),n}}function rn(t){const e=getComputedStyle(t),n=t.clientHeight,i=it(()=>document.scrollingElement===t?window.innerHeight:n);return{scrollLeft:t.scrollLeft,scrollTop:t.scrollTop,scrollWidth:t.scrollWidth,scrollHeight:t.scrollHeight,clientWidth:t.clientWidth,get clientHeight(){return i()},writingMode:e.writingMode,direction:e.direction,scrollPaddingTop:e.scrollPaddingTop,scrollPaddingBottom:e.scrollPaddingBottom,scrollPaddingLeft:e.scrollPaddingLeft,scrollPaddingRight:e.scrollPaddingRight}}const $e=new WeakMap;function sn(t,e){if(!t||!e)return;let n=0,i=0,r=e;const o=t.offsetParent;for(;r&&r!=o;)i+=r.offsetLeft,n+=r.offsetTop,r=r.offsetParent;i-=t.offsetLeft+t.clientLeft,n-=t.offsetTop+t.clientTop;let s=$e.get(e);return s||(s=getComputedStyle(e).fontSize,$e.set(e,s)),{top:n,left:i,offsetWidth:e.offsetWidth,offsetHeight:e.offsetHeight,fontSize:s}}function ie(t){let e=R.get(t);e.sourceMeasurements=rn(t);for(const n of e.timelineRefs){const i=n.deref();if(i instanceof Q){const r=S.get(i);r.subjectMeasurements=sn(t,i.subject)}}e.updateScheduled||(setTimeout(()=>{for(const n of e.timelineRefs){const i=n.deref();i&&N(i)}e.updateScheduled=!1}),e.updateScheduled=!0)}function z(t,e){const n=S.get(t),i=n.source;if(i!=e){if(i){const r=R.get(i);if(r){r.timelineRefs.delete(t);const o=Array.from(r.timelineRefs).filter(s=>typeof s.deref()>"u");for(const s of o)r.timelineRefs.delete(s);r.timelineRefs.size===0&&(r.disconnect(),R.delete(i))}}if(n.source=e,e){let r=R.get(e);if(!r){r={timelineRefs:new Set,sourceMeasurements:rn(e)},R.set(e,r);const o=new ResizeObserver(l=>{for(const u of l)ie(n.source)});o.observe(e);for(const l of e.children)o.observe(l);const s=new MutationObserver(l=>{for(const u of l)ie(u.target)});s.observe(e,{attributes:!0,attributeFilter:["style","class"]});const a=()=>{r.sourceMeasurements.scrollLeft=e.scrollLeft,r.sourceMeasurements.scrollTop=e.scrollTop;for(const l of r.timelineRefs){const u=l.deref();u&&N(u)}};Fe(e).addEventListener("scroll",a),r.disconnect=()=>{o.disconnect(),s.disconnect(),Fe(e).removeEventListener("scroll",a)}}r.timelineRefs.add(new WeakRef(t))}}}function de(t,e){let n=S.get(t).animations;for(let i=0;i<n.length;i++)n[i].animation==e&&n.splice(i,1)}function we(t,e,n){let i=S.get(t).animations;for(let r=0;r<i.length;r++)if(i[r].animation==e)return;i.push({animation:e,tickAnimation:n}),queueMicrotask(()=>{N(t)})}class y{constructor(e){S.set(this,{source:null,axis:Be,anonymousSource:e?e.anonymousSource:null,anonymousTarget:e?e.anonymousTarget:null,subject:null,inset:null,animations:[],subjectMeasurements:null});const n=e&&e.source!==void 0?e.source:document.scrollingElement;if(z(this,n),e&&e.axis!==void 0&&e.axis!=Be){if(!qe(e.axis))throw TypeError("Invalid axis");S.get(this).axis=e.axis}N(this)}set source(e){z(this,e),N(this)}get source(){return S.get(this).source}set axis(e){if(!qe(e))throw TypeError("Invalid axis");S.get(this).axis=e,N(this)}get axis(){return S.get(this).axis}get duration(){return CSS.percent(100)}get phase(){const e=this.source;if(!e)return"inactive";if(e===document.scrollingElement)return"active";let n=getComputedStyle(e);return n.display=="none"||e!=document.scrollingElement&&(n.overflow=="visible"||n.overflow=="clip")?"inactive":"active"}get currentTime(){const e=this.source;if(!e||!e.isConnected||this.phase=="inactive")return null;const n=getComputedStyle(e);if(n.display==="inline"||n.display==="none")return null;const i=this.axis,r=tn(e,i),o=et(e,i);return o>0?CSS.percent(100*r/o):CSS.percent(100)}get __polyfill(){return!0}}function ge(t,e){let n=t.parentElement;for(;n!=null;){if(e(n))return n;n=n.parentElement}}function rt(t,e){switch(t){case"root":return document.scrollingElement;case"nearest":return an(e);case"self":return e;default:throw new TypeError("Invalid ScrollTimeline Source Type.")}}function st(t){switch(getComputedStyle(t).display){case"block":case"inline-block":case"list-item":case"table":case"table-caption":case"flow-root":case"flex":case"grid":return!0}return!1}function on(t){const e=getComputedStyle(t);return e.transform!="none"||e.perspective!="none"||e.willChange=="transform"||e.willChange=="perspective"||e.filter!="none"||e.willChange=="filter"||e.backdropFilter!="none"}function ot(t){return getComputedStyle(t).position!="static"?!0:on(t)}function at(t){switch(getComputedStyle(t).position){case"static":case"relative":case"sticky":return ge(t,st);case"absolute":return ge(t,ot);case"fixed":return ge(t,on)}}function an(t){if(!(!t||!t.isConnected)){for(;t=at(t);){const e=getComputedStyle(t),n=["auto","scroll","hidden"];if(n.includes(e.overflowX)||n.includes(e.overflowY))return t===document.body&&document.scrollingElement!==null&&getComputedStyle(document.scrollingElement).overflow==="visible"?document.scrollingElement:t}return document.scrollingElement}}function q(t,e){const n=S.get(t),i=n.subjectMeasurements,r=R.get(n.source).sourceMeasurements;return t.phase==="inactive"||!(t instanceof Q)?null:lt(e,r,i,n.axis,n.inset)}function lt(t,e,n,i,r){const o=e.direction=="rtl"||e.writingMode=="vertical-rl";let s,a,l={fontSize:n.fontSize};Re(i)==="x"?(s=n.offsetWidth,a=n.left,l.scrollPadding=[e.scrollPaddingLeft,e.scrollPaddingRight],o&&(a+=e.scrollWidth-e.clientWidth,l.scrollPadding=[e.scrollPaddingRight,e.scrollPaddingLeft]),l.containerSize=e.clientWidth):(s=n.offsetHeight,a=n.top,l.scrollPadding=[e.scrollPaddingTop,e.scrollPaddingBottom],l.containerSize=e.clientHeight);const u=ct(r,l),f=a-l.containerSize+u.end,m=a+s-u.start,g=f+s,D=m-s,j=Math.min(g,D),Y=Math.max(g,D);let V,U;const Mt=l.containerSize-u.start-u.end,Et=s>Mt;switch(t){case"cover":V=f,U=m;break;case"contain":V=j,U=Y;break;case"entry":V=f,U=j;break;case"exit":V=Y,U=m;break;case"entry-crossing":V=f,U=Et?Y:j;break;case"exit-crossing":V=Et?j:Y,U=m;break}return{start:V,end:U}}function ut(t){const e={start:0,end:0};if(!t)return e;let n;if(typeof t=="string"?n=Me(t).map(i=>{if(i==="auto")return"auto";try{return CSSNumericValue.parse(i)}catch{throw TypeError(`Could not parse inset "${t}"`)}}):Array.isArray(t)?n=t:n=[t],n.length===0||n.length>2)throw TypeError("Invalid inset");for(const i of n){if(i==="auto")continue;const r=i.type();if(!(r.length===1||r.percent===1))throw TypeError("Invalid inset")}return{start:n[0],end:n[1]??n[0]}}function ct(t,e){const n={start:0,end:0};if(!t)return n;const[i,r]=[t.start,t.end].map((o,s)=>o==="auto"?e.scrollPadding[s]==="auto"?0:parseFloat(e.scrollPadding[s]):Ne(o,{percentageReference:CSS.px(e.containerSize),fontSize:CSS.px(parseFloat(e.fontSize))}));return{start:i,end:r}}function ln(t,e){if(t instanceof Q){const{rangeName:n,offset:i}=e,r=q(t,n),o=q(t,"cover");return ft(r,i,o,t.subject)}if(t instanceof y){const{axis:n,source:i}=t,{sourceMeasurements:r}=R.get(i);let o;return Re(n)==="x"?o=r.scrollWidth-r.clientWidth:o=r.scrollHeight-r.clientHeight,Ne(e,{percentageReference:CSS.px(o)})/o}unsupportedTimeline(t)}function ft(t,e,n,i){if(!t||!n)return 0;let r=getComputedStyle(i);const o={percentageReference:CSS.px(t.end-t.start),fontSize:CSS.px(parseFloat(r.fontSize))};return(Ne(e,o)+t.start-n.start)/(n.end-n.start)}let Q=class extends y{constructor(t){super(t);const e=S.get(this);e.subject=t&&t.subject?t.subject:void 0,t&&t.inset&&(e.inset=ut(t.inset)),e.subject&&(new ResizeObserver(()=>{ie(e.source)}).observe(e.subject),new MutationObserver(()=>{ie(e.source)}).observe(e.subject,{attributes:!0,attributeFilter:["class","style"]})),nt(this),e.subjectMeasurements=sn(e.source,e.subject),N(this)}get source(){return S.get(this).source}set source(t){throw new Error("Cannot set the source of a view timeline")}get subject(){return S.get(this).subject}get axis(){return S.get(this).axis}get currentTime(){const t=tn(this.source,this.axis);if(t==null)return null;const e=q(this,"cover");if(!e)return null;const n=(t-e.start)/(e.end-e.start);return CSS.percent(100*n)}get startOffset(){return CSS.px(q(this,"cover").start)}get endOffset(){return CSS.px(q(this,"cover").end)}};const mt=document.getAnimations,pt=window.Element.prototype.getAnimations,ht=window.Element.prototype.animate,Ge=window.Animation;class L{constructor(){this.state="pending",this.nativeResolve=this.nativeReject=null,this.promise=new Promise((e,n)=>{this.nativeResolve=e,this.nativeReject=n})}resolve(e){this.state="resolved",this.nativeResolve(e)}reject(e){this.state="rejected",this.promise.catch(()=>{}),this.nativeReject(e)}}function $(t){t.readyPromise=new L,requestAnimationFrame(()=>{var e;(((e=t.timeline)==null?void 0:e.currentTime)??null)!==null&&(re(t),t.pendingTask==="play"&&(t.startTime!==null||t.holdTime!==null)?cn(t):t.pendingTask==="pause"&&fn(t))})}function un(){return new DOMException("The user aborted a request","AbortError")}function I(t,e){if(e===null)return e;if(typeof e!="number")throw new DOMException(`Unexpected value: ${e}.  Cannot convert to CssNumberish`,"InvalidStateError");const n=t.rangeDuration??100,i=P(t),r=i?n*e/i:0;return CSS.percent(r)}function h(t,e){if(t.timeline){if(e===null)return e;if(e.unit==="percent"){const n=t.rangeDuration??100,i=P(t);return e.value*i/n}throw new DOMException("CSSNumericValue must be a percentage for progress based animations.","NotSupportedError")}else{if(e==null||typeof e=="number")return e;const n=e.to("ms");if(n)return n.value;throw new DOMException("CSSNumericValue must be either a number or a time value for time based animations.","InvalidStateError")}}function dt(t){const e=t.proxy.effect.getTiming();return t.normalizedTiming||e}function cn(t){const e=h(t,t.timeline.currentTime);if(t.holdTime!=null)C(t),t.animation.playbackRate==0?t.startTime=e:(t.startTime=e-t.holdTime/t.animation.playbackRate,t.holdTime=null);else if(t.startTime!==null&&t.pendingPlaybackRate!==null){const n=(e-t.startTime)*t.animation.playbackRate;C(t);const i=t.animation.playbackRate;i==0?(t.holdTime=null,t.startTime=e):t.startTime=e-n/i}t.readyPromise&&t.readyPromise.state=="pending"&&t.readyPromise.resolve(t.proxy),k(t,!1,!1),E(t),t.pendingTask=null}function fn(t){const e=h(t,t.timeline.currentTime);t.startTime!=null&&t.holdTime==null&&(t.holdTime=(e-t.startTime)*t.animation.playbackRate),C(t),t.startTime=null,t.readyPromise.resolve(t.proxy),k(t,!1,!1),E(t),t.pendingTask=null}function _e(t){if(!t.finishedPromise||t.finishedPromise.state!="pending"||t.proxy.playState!="finished")return;t.finishedPromise.resolve(t.proxy),t.animation.pause();const e=new CustomEvent("finish",{detail:{currentTime:t.proxy.currentTime,timelineTime:t.proxy.timeline.currentTime}});Object.defineProperty(e,"currentTime",{get:function(){return this.detail.currentTime}}),Object.defineProperty(e,"timelineTime",{get:function(){return this.detail.timelineTime}}),requestAnimationFrame(()=>{queueMicrotask(()=>{t.animation.dispatchEvent(e)})})}function W(t){return t.pendingPlaybackRate!==null?t.pendingPlaybackRate:t.animation.playbackRate}function C(t){t.pendingPlaybackRate!==null&&(t.animation.playbackRate=t.pendingPlaybackRate,t.pendingPlaybackRate=null)}function gt(t,e){if(e==null&&t.currentTime!==null)throw new TypeError;e=h(t,e),t.autoAlignStartTime=!1,t.holdTime!==null||t.startTime===null||t.timeline.phase==="inactive"||t.animation.playbackRate===0?t.holdTime=e:t.startTime=h(t,t.timeline.currentTime)-e/t.animation.playbackRate,t.timeline.phase==="inactive"&&(t.startTime=null),t.previousCurrentTime=null}function mn(t){if(!t.timeline)return null;const e=h(t,t.timeline.currentTime);if(e===null||t.startTime===null)return null;let n=(e-t.startTime)*t.animation.playbackRate;return n==-0&&(n=0),n}function St(t,e){if(!t.timeline)return null;const n=h(t,t.timeline.currentTime);return n==null?null:n-e/t.animation.playbackRate}function k(t,e,n){if(!t.timeline)return;let i=e?h(t,t.proxy.currentTime):mn(t);if(i&&t.startTime!=null&&!t.proxy.pending){const r=W(t),o=P(t);let s=t.previousCurrentTime;r>0&&i>=o&&t.previousCurrentTime!=null?((s===null||s<o)&&(s=o),t.holdTime=e?i:s):r<0&&i<=0?((s==null||s>0)&&(s=0),t.holdTime=e?i:s):r!=0&&(e&&t.holdTime!==null&&(t.startTime=St(t,t.holdTime)),t.holdTime=null)}E(t),t.previousCurrentTime=h(t,t.proxy.currentTime),t.proxy.playState=="finished"?(t.finishedPromise||(t.finishedPromise=new L),t.finishedPromise.state=="pending"&&(n?_e(t):Promise.resolve().then(()=>{_e(t)}))):(t.finishedPromise&&t.finishedPromise.state=="resolved"&&(t.finishedPromise=new L),t.animation.playState!="paused"&&t.animation.pause())}function P(t){const e=dt(t),n=e.delay+e.endDelay+e.iterations*e.duration;return Math.max(0,n)}function E(t){if(t.timeline)if(t.startTime!==null){const e=t.timeline.currentTime;if(e==null)return;const n=h(t,e);xe(t,(n-t.startTime)*t.animation.playbackRate)}else t.holdTime!==null&&xe(t,t.holdTime)}function xe(t,e){const n=t.timeline,i=t.animation.playbackRate,r=n.currentTime&&n.currentTime.value==(i<0?0:100)?i<0?.001:-.001:0;t.animation.currentTime=e+r}function yt(t){t.pendingTask&&(t.pendingTask=null,C(t),t.readyPromise.reject(un()),$(t),t.readyPromise.resolve(t.proxy))}function Se(t,e){if(!t.timeline)return;const n=t.proxy.playState=="paused"&&t.proxy.pending;let i=!1,r=h(t,t.proxy.currentTime);W(t)==0&&r==null&&(t.holdTime=0),r==null&&(t.autoAlignStartTime=!0),(t.proxy.playState==="finished"||n)&&(t.holdTime=null,t.startTime=null,t.autoAlignStartTime=!0),t.holdTime&&(t.startTime=null),t.pendingTask&&(t.pendingTask=null,i=!0),!(t.holdTime===null&&!t.autoAlignStartTime&&!n&&t.pendingPlaybackRate===null)&&(t.readyPromise&&!i&&(t.readyPromise=null),E(t),t.readyPromise||$(t),t.pendingTask="play",we(t.timeline,t.animation,Ce.bind(t.proxy)),k(t,!1,!1))}function Ce(t){const e=c.get(this);if(!e)return;if(t==null){e.proxy.playState!=="paused"&&e.animation.playState!="idle"&&e.animation.cancel();return}re(e),e.pendingTask&&requestAnimationFrame(()=>{e.pendingTask==="play"&&(e.startTime!==null||e.holdTime!==null)?cn(e):e.pendingTask==="pause"&&fn(e)});const n=this.playState;if(n=="running"||n=="finished"){const i=h(e,t);xe(e,(i-h(e,this.startTime))*this.playbackRate),k(e,!1,!1)}}function pn(t){t.specifiedTiming=null}function Tt(t){const e=t.animation.effect,n=e.updateTiming,i={get:function(l,u){const f=l[u];return typeof f=="function"?f.bind(e):f},set:function(l,u,f){return l[u]=f,!0}},r={apply:function(l){e.getTiming();const u=l.apply(e);if(t.timeline){const f=t.duration??100;u.localTime=I(t,u.localTime),u.endTime=I(t,u.endTime),u.activeDuration=I(t,u.activeDuration);const m=P(t),g=u.iterations?(m-u.delay-u.endDelay)/u.iterations:0;u.duration=m?CSS.percent(f*g/m):CSS.percent(0),t.timeline.currentTime===void 0&&(u.localTime=null)}return u}},o={apply:function(l,u){if(t.specifiedTiming)return t.specifiedTiming;t.specifiedTiming=l.apply(e);let f=Object.assign({},t.specifiedTiming),m;if(f.duration===1/0)throw TypeError("Effect duration cannot be Infinity when used with Scroll Timelines");return(f.duration===null||f.duration==="auto"||t.autoDurationEffect)&&t.timeline&&(t.autoDurationEffect=!0,f.delay=0,f.endDelay=0,m=f.iterations?1e5:0,f.duration=f.iterations?(m-f.delay-f.endDelay)/f.iterations:0,f.duration<0&&(f.duration=0,f.endDelay=m-f.delay),n.apply(e,[f])),t.normalizedTiming=f,t.specifiedTiming}},s={apply:function(l,u,f){if(!(!f||!f.length)){if(t.timeline&&f[0]){const m=f[0],g=m.duration;if(g===1/0)throw TypeError("Effect duration cannot be Infinity when used with Scroll Timelines");if(m.iterations===1/0)throw TypeError("Effect iterations cannot be Infinity when used with Scroll Timelines");typeof g<"u"&&g!=="auto"&&(t.autoDurationEffect=null)}t.specifiedTiming&&l.apply(e,[t.specifiedTiming]),l.apply(e,f),pn(t)}}},a=new Proxy(e,i);return a.getComputedTiming=new Proxy(e.getComputedTiming,r),a.getTiming=new Proxy(e.getTiming,o),a.updateTiming=new Proxy(e.updateTiming,s),a}function vt(t){if(!t.animationRange)return 0;const e=t.animationRange.start==="normal"?dn(t.timeline):t.animationRange.start;return ln(t.timeline,e)}function wt(t){if(!t.animationRange)return 0;const e=t.animationRange.end==="normal"?gn(t.timeline):t.animationRange.end;return 1-ln(t.timeline,e)}let c=new WeakMap;window.addEventListener("pagehide",t=>{c=new WeakMap},!1);let hn=new WeakMap;function re(t){if(!t.autoAlignStartTime||!t.timeline||!t.timeline.currentTime||t.proxy.playState==="idle"||t.proxy.playState==="paused"&&t.holdTime!==null)return;const e=t.rangeDuration;let n,i;try{n=CSS.percent(vt(t)*100)}catch(o){n=CSS.percent(0),t.animationRange.start="normal",console.warn("Exception when calculating start offset",o)}try{i=CSS.percent((1-wt(t))*100)}catch(o){i=CSS.percent(100),t.animationRange.end="normal",console.warn("Exception when calculating end offset",o)}t.rangeDuration=i.value-n.value||1e-4;const r=W(t);t.startTime=h(t,r>=0?n:i),t.holdTime=null,t.rangeDuration!==e&&pn(t)}function le(t){throw new Error("Unsupported timeline class")}function dn(t){if(t instanceof ViewTimeline)return{rangeName:"cover",offset:CSS.percent(0)};if(t instanceof y)return CSS.percent(0);le()}function gn(t){if(t instanceof ViewTimeline)return{rangeName:"cover",offset:CSS.percent(100)};if(t instanceof y)return CSS.percent(100);le()}function xt(t,e){if(!e)return{start:"normal",end:"normal"};const n={start:dn(t),end:gn(t)};if(t instanceof ViewTimeline){const i=Me(e),r=[],o=[];if(i.forEach(s=>{if(ve.includes(s))r.push(s);else try{o.push(CSSNumericValue.parse(s))}catch{throw TypeError(`Could not parse range "${e}"`)}}),r.length>2||o.length>2||o.length==1)throw TypeError("Invalid time range or unsupported time range format.");return r.length&&(n.start.rangeName=r[0],n.end.rangeName=r.length>1?r[1]:r[0]),o.length>1&&(n.start.offset=o[0],n.end.offset=o[1]),n}if(t instanceof y){const i=e.split(" ");if(i.length!=2)throw TypeError("Invalid time range or unsupported time range format.");return n.start=CSSNumericValue.parse(i[0]),n.end=CSSNumericValue.parse(i[1]),n}le()}function se(t,e,n){if(!e||e==="normal")return"normal";if(t instanceof ViewTimeline){let i="cover",r=n==="start"?CSS.percent(0):CSS.percent(100);if(e instanceof Object)e.rangeName!==void 0&&(i=e.rangeName),e.offset!==void 0&&(r=e.offset);else{const o=Me(e);o.length===1?ve.includes(o[0])?i=o[0]:r=v(CSSNumericValue.parse(o[0]),{}):o.length===2&&(i=o[0],r=v(CSSNumericValue.parse(o[1]),{}))}if(!ve.includes(i))throw TypeError("Invalid range name");return{rangeName:i,offset:r}}if(t instanceof y)return CSSNumericValue.parse(e);le()}class Sn{constructor(e,n,i={}){const r=n instanceof y,o=r?void 0:n,s=e instanceof Ge?e:new Ge(e,o);hn.set(s,this),c.set(this,{animation:s,timeline:r?n:void 0,playState:r?"idle":null,readyPromise:null,finishedPromise:null,startTime:null,holdTime:null,rangeDuration:null,previousCurrentTime:null,autoAlignStartTime:!1,pendingPlaybackRate:null,pendingTask:null,specifiedTiming:null,normalizedTiming:null,effect:null,animationRange:r?xt(n,i["animation-range"]):null,proxy:this})}get effect(){const e=c.get(this);return e.timeline?(e.effect||(e.effect=Tt(e)),e.effect):e.animation.effect}set effect(e){const n=c.get(this);n.animation.effect=e,n.effect=null,n.autoDurationEffect=null}get timeline(){const e=c.get(this);return e.timeline||e.animation.timeline}set timeline(e){const n=c.get(this),i=this.timeline;if(i==e)return;const r=this.playState,o=this.currentTime;let s=P(n),a;o===null?a=null:s===0?a=0:a=h(n,o)/s;const l=i instanceof y,u=e instanceof y,f=this.pending;if(l&&de(n.timeline,n.animation),u){n.timeline=e,C(n),n.autoAlignStartTime=!0,n.startTime=null,n.holdTime=null,(r==="running"||r==="finished")&&((!n.readyPromise||n.readyPromise.state==="resolved")&&$(n),n.pendingTask="play",we(n.timeline,n.animation,Ce.bind(this))),r==="paused"&&a!==null&&(n.holdTime=a*s),f&&((!n.readyPromise||n.readyPromise.state=="resolved")&&$(n),r=="paused"?n.pendingTask="pause":n.pendingTask="play"),n.startTime!==null&&(n.holdTime=null),k(n,!1,!1);return}if(n.animation.timeline==e){if(de(n.timeline,n.animation),n.timeline=null,l)switch(o!==null&&(n.animation.currentTime=a*P(n)),r){case"paused":n.animation.pause();break;case"running":case"finished":n.animation.play()}}else throw TypeError("Unsupported timeline: "+e)}get startTime(){const e=c.get(this);return e.timeline?I(e,e.startTime):e.animation.startTime}set startTime(e){const n=c.get(this);if(e=h(n,e),!n.timeline){n.animation.startTime=e;return}n.autoAlignStartTime=!1,h(n,n.timeline.currentTime)==null&&n.startTime!=null&&(n.holdTime=null,E(n));const i=h(n,this.currentTime);C(n),n.startTime=e,n.startTime!==null&&n.animation.playbackRate!=0?n.holdTime=null:n.holdTime=i,n.pendingTask&&(n.pendingTask=null,n.readyPromise.resolve(this)),k(n,!0,!1),E(n)}get currentTime(){const e=c.get(this);return e.timeline?e.holdTime!=null?I(e,e.holdTime):I(e,mn(e)):e.animation.currentTime}set currentTime(e){const n=c.get(this);if(!n.timeline){n.animation.currentTime=e;return}gt(n,e),n.pendingTask=="pause"&&(n.holdTime=h(n,e),C(n),n.startTime=null,n.pendingTask=null,n.readyPromise.resolve(this)),k(n,!0,!1)}get playbackRate(){return c.get(this).animation.playbackRate}set playbackRate(e){const n=c.get(this);if(!n.timeline){n.animation.playbackRate=e;return}n.pendingPlaybackRate=null;const i=this.currentTime;n.animation.playbackRate=e,i!==null&&(this.currentTime=i)}get playState(){const e=c.get(this);if(!e.timeline)return e.animation.playState;const n=h(e,this.currentTime);return n===null&&e.startTime===null&&e.pendingTask==null?"idle":e.pendingTask=="pause"||e.startTime===null&&e.pendingTask!="play"?"paused":n!=null&&(e.animation.playbackRate>0&&n>=P(e)||e.animation.playbackRate<0&&n<=0)?"finished":"running"}get rangeStart(){var e;return((e=c.get(this).animationRange)==null?void 0:e.start)??"normal"}set rangeStart(e){const n=c.get(this);if(!n.timeline)return n.animation.rangeStart=e;if(n.timeline instanceof y){const i=n.animationRange;i.start=se(n.timeline,e,"start"),re(n),E(n)}}get rangeEnd(){var e;return((e=c.get(this).animationRange)==null?void 0:e.end)??"normal"}set rangeEnd(e){const n=c.get(this);if(!n.timeline)return n.animation.rangeEnd=e;if(n.timeline instanceof y){const i=n.animationRange;i.end=se(n.timeline,e,"end"),re(n),E(n)}}get replaceState(){return c.get(this).animation.pending}get pending(){const e=c.get(this);return e.timeline?!!e.readyPromise&&e.readyPromise.state=="pending":e.animation.pending}finish(){const e=c.get(this);if(!e.timeline){e.animation.finish();return}const n=W(e),i=P(e);if(n==0)throw new DOMException("Cannot finish Animation with a playbackRate of 0.","InvalidStateError");if(n>0&&i==1/0)throw new DOMException("Cannot finish Animation with an infinite target effect end.","InvalidStateError");C(e);const r=n<0?0:i;this.currentTime=I(e,r);const o=h(e,e.timeline.currentTime);e.startTime===null&&o!==null&&(e.startTime=o-r/e.animation.playbackRate),e.pendingTask=="pause"&&e.startTime!==null&&(e.holdTime=null,e.pendingTask=null,e.readyPromise.resolve(this)),e.pendingTask=="play"&&e.startTime!==null&&(e.pendingTask=null,e.readyPromise.resolve(this)),k(e,!0,!0)}play(){const e=c.get(this);if(!e.timeline){e.animation.play();return}Se(e)}pause(){const e=c.get(this);if(!e.timeline){e.animation.pause();return}this.playState!="paused"&&(e.animation.currentTime===null&&(e.autoAlignStartTime=!0),e.pendingTask=="play"?e.pendingTask=null:e.readyPromise=null,e.readyPromise||$(e),e.pendingTask="pause",we(e.timeline,e.animation,Ce.bind(e.proxy)))}reverse(){const e=c.get(this),n=W(e),i=h(e,this.currentTime),r=P(e)==1/0,o=n!=0&&(n<0||i>0||!r);if(!e.timeline||!o){o&&(e.pendingPlaybackRate=-W(e)),e.animation.reverse();return}if(e.timeline.phase=="inactive")throw new DOMException("Cannot reverse an animation with no active timeline","InvalidStateError");this.updatePlaybackRate(-n),Se(e)}updatePlaybackRate(e){const n=c.get(this);if(n.pendingPlaybackRate=e,!n.timeline){n.animation.updatePlaybackRate(e);return}const i=this.playState;if(!(n.readyPromise&&n.readyPromise.state=="pending"))switch(i){case"idle":case"paused":C(n);break;case"finished":const r=h(n,n.timeline.currentTime),o=r!==null?(r-n.startTime)*n.animation.playbackRate:null;e==0?n.startTime=r:n.startTime=r!=null&&o!=null?(r-o)/e:null,C(n),k(n,!1,!1),E(n);break;default:Se(n)}}persist(){c.get(this).animation.persist()}get id(){return c.get(this).animation.id}set id(e){c.get(this).animation.id=e}cancel(){const e=c.get(this);if(!e.timeline){e.animation.cancel();return}this.playState!="idle"&&(yt(e),e.finishedPromise&&e.finishedPromise.state=="pending"&&e.finishedPromise.reject(un()),e.finishedPromise=new L,e.animation.cancel()),e.startTime=null,e.holdTime=null,de(e.timeline,e.animation)}get onfinish(){return c.get(this).animation.onfinish}set onfinish(e){c.get(this).animation.onfinish=e}get oncancel(){return c.get(this).animation.oncancel}set oncancel(e){c.get(this).animation.oncancel=e}get onremove(){return c.get(this).animation.onremove}set onremove(e){c.get(this).animation.onremove=e}get finished(){const e=c.get(this);return e.timeline?(e.finishedPromise||(e.finishedPromise=new L),e.finishedPromise.promise):e.animation.finished}get ready(){const e=c.get(this);return e.timeline?(e.readyPromise||(e.readyPromise=new L,e.readyPromise.resolve(this)),e.readyPromise.promise):e.animation.ready}addEventListener(e,n,i){c.get(this).animation.addEventListener(e,n,i)}removeEventListener(e,n,i){c.get(this).animation.removeEventListener(e,n,i)}dispatchEvent(e){c.get(this).animation.dispatchEvent(e)}}function Ct(t,e){const n=e.timeline;n instanceof y&&delete e.timeline;const i=ht.apply(this,[t,e]),r=new Sn(i,n);if(n instanceof y){i.pause();const o=c.get(r);o.animationRange={start:se(n,e.rangeStart,"start"),end:se(n,e.rangeEnd,"end")},r.play()}return r}function yn(t){for(let e=0;e<t.length;++e){let n=hn.get(t[e]);n&&(t[e]=n)}return t}function bt(t){let e=pt.apply(this,[t]);return yn(e)}function kt(t){let e=mt.apply(this,[t]);return yn(e)}function Pt(){if(!Reflect.defineProperty(window,"ScrollTimeline",{value:y}))throw Error("Error installing ScrollTimeline polyfill: could not attach ScrollTimeline to window");if(!Reflect.defineProperty(window,"ViewTimeline",{value:Q}))throw Error("Error installing ViewTimeline polyfill: could not attach ViewTimeline to window");if(!Reflect.defineProperty(Element.prototype,"animate",{value:Ct}))throw Error("Error installing ScrollTimeline polyfill: could not attach WAAPI's animate to DOM Element");if(!Reflect.defineProperty(window,"Animation",{value:Sn}))throw Error("Error installing Animation constructor.");if(!Reflect.defineProperty(Element.prototype,"getAnimations",{value:bt}))throw Error("Error installing ScrollTimeline polyfill: could not attach WAAPI's getAnimations to DOM Element");if(!Reflect.defineProperty(document,"getAnimations",{value:kt}))throw Error("Error installing ScrollTimeline polyfill: could not attach WAAPI's getAnimations to document")}Pt();

package/lib/metas.js

@@ -1,10 +1,8 @@
-import { meta as a } from "./animate-children.ws.js";
-import { meta as o } from "./animate-text.ws.js";
-import { meta as i } from "./stagger-animation.ws.js";
-import { meta as x } from "./video-animation.ws.js";
-export {
-  a as AnimateChildren,
-  o as AnimateText,
-  i as StaggerAnimation,
-  x as VideoAnimation
-};
+//! SPDX-License-Identifier: LicenseRef-Webstudio,Inc-Proprietary
+"use strict";import{AnimationGroupIcon as o,TextAnimationIcon as a,StaggerAnimationIcon as s,PlayIcon as r}from"@webstudio-is/icons/svg";import{div as e}from"@webstudio-is/sdk/normalize.css";const l=n=>new Proxy({},{get(w,t){return`${n}${t}`}}),i=l("@webstudio-is/sdk-components-animation:"),c={category:"animations",description:"Animation Group component is designed to animate its children.",icon:o,order:0,label:"Animation Group",contentModel:{category:"instance",children:["instance",i.AnimateText,i.StaggerAnimation,i.VideoAnimation]},initialProps:["action"],props:{action:{required:!1,control:"animationAction",type:"animationAction",description:"Animation Action"}}},d={className:{required:!1,control:"text",type:"string",description:"Classes to which the element belongs"},easing:{description:"Easing function applied within the sliding window.",required:!1,control:"select",type:"string",defaultValue:"linear",options:["linear","easeIn","easeInCubic","easeInQuart","easeOut","easeOutCubic","easeOutQuart","ease","easeInOutCubic","easeInOutQuart"]},slidingWindow:{description:`Size of the sliding window for the animation:
+- 0: Typewriter effect (no animation).
+- (0..1]: Animates one part of the text at a time.
+- (1..n]: Animates multiple parts of the text within the sliding window.`,required:!1,control:"number",type:"number",defaultValue:5},splitBy:{description:"Defines how the text is split for animation (e.g., by character, space, or symbol).",required:!1,control:"select",type:"string",defaultValue:"char",options:["char","space",'symbol "#"','symbol "~"']}},p={category:"animations",description:"Text animation allows you to split text by char or by word to animate it.",icon:a,order:1,label:"Text Animation",contentModel:{category:"none",children:["instance"]},presetStyle:{div:e},initialProps:["slidingWindow","easing","splitBy"],props:d},m={className:{required:!1,control:"text",type:"string",description:"Classes to which the element belongs"},easing:{description:"Easing function applied within the sliding window.",required:!1,control:"select",type:"string",defaultValue:"linear",options:["linear","easeIn","easeInCubic","easeInQuart","easeOut","easeOutCubic","easeOutQuart","ease","easeInOutCubic","easeInOutQuart"]},slidingWindow:{description:`Size of the sliding window for the animation:
+- 0: Typewriter effect (no animation).
+- (0..1]: Animates one child at a time.
+- (1..n]: Animates multiple children within the sliding window.`,required:!1,control:"number",type:"number",defaultValue:1}},u={category:"animations",description:"Stagger animation allows you to animate children elements with a sliding window.",icon:s,order:4,label:"Stagger Animation",contentModel:{category:"none",children:["instance"]},presetStyle:{div:e},initialProps:["slidingWindow","easing"],props:m},g={timeline:{required:!1,control:"boolean",type:"boolean"}},h={icon:r,label:"Video Animation",contentModel:{category:"none",children:["instance"]},presetStyle:{div:e},props:g,initialProps:["timeline"]};export{c as AnimateChildren,p as AnimateText,u as StaggerAnimation,h as VideoAnimation};

package/lib/templates.js

@@ -1,4 +1,2 @@
-import { meta as e } from "./video-animation.template.js";
-export {
-  e as VideoAnimation
-};
+//! SPDX-License-Identifier: LicenseRef-Webstudio,Inc-Proprietary
+"use strict";import{jsx as o}from"react/jsx-runtime";import{createProxy as i,$ as n}from"@webstudio-is/template";const a=i("@webstudio-is/sdk-components-animation:"),t={category:"animations",description:"Video Animation",order:2,template:o(a.VideoAnimation,{children:o(n.Video,{preload:"auto",autoPlay:!0,muted:!0,playsInline:!0,crossOrigin:"anonymous"})})};export{t as VideoAnimation};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/sdk-components-animation",
-  "version": "0.224.0",
+  "version": "0.226.0",
   "description": "Webstudio components for animation",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -44,10 +44,10 @@
     "nanostores": "^0.11.3",
     "react-error-boundary": "^5.0.0",
     "shallow-equal": "^3.1.0",
-    "@webstudio-is/css-engine": "0.224.0",
-    "@webstudio-is/icons": "0.224.0",
-    "@webstudio-is/react-sdk": "0.224.0",
-    "@webstudio-is/sdk": "0.224.0"
+    "@webstudio-is/css-engine": "0.226.0",
+    "@webstudio-is/icons": "0.226.0",
+    "@webstudio-is/sdk": "0.226.0",
+    "@webstudio-is/react-sdk": "0.226.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.70",
@@ -62,14 +62,14 @@
     "zod": "^3.24.2",
     "@webstudio-is/css-data": "0.0.0",
     "@webstudio-is/design-system": "0.0.0",
+    "@webstudio-is/sdk-cli": "^0.94.0",
+    "@webstudio-is/template": "0.226.0",
     "@webstudio-is/generate-arg-types": "0.0.0",
-    "@webstudio-is/sdk-components-react": "0.224.0",
-    "@webstudio-is/template": "0.224.0",
-    "@webstudio-is/tsconfig": "1.0.7",
-    "@webstudio-is/sdk-cli": "^0.94.0"
+    "@webstudio-is/sdk-components-react": "0.226.0",
+    "@webstudio-is/tsconfig": "1.0.7"
   },
   "scripts": {
-    "build": "vite build --config ../../vite.sdk-components.config.ts",
+    "build": "vite build && esbuild './lib/*' --outdir=./lib --minify --allow-overwrite --banner:js='//! SPDX-License-Identifier: LicenseRef-Webstudio,Inc-Proprietary'",
     "build:args": "NODE_OPTIONS=--conditions=webstudio generate-arg-types './src/*.tsx !./src/*.stories.tsx !./src/*.ws.ts !./src/*.template.tsx !./src/*.test.{ts,tsx}' -e asChild -e modal -e defaultOpen -e defaultChecked && prettier --write \"**/*.props.ts\"",
     "build:stories": "webstudio-sdk generate-stories && prettier --write \"src/__generated__/*.stories.tsx\"",
     "dts": "tsc --project tsconfig.dts.json",

package/lib/__generated__/animate-text.props.js

@@ -1,48 +0,0 @@
-const e = {
-  className: {
-    required: !1,
-    control: "text",
-    type: "string",
-    description: "Classes to which the element belongs"
-  },
-  easing: {
-    description: "Easing function applied within the sliding window.",
-    required: !1,
-    control: "select",
-    type: "string",
-    defaultValue: "linear",
-    options: [
-      "linear",
-      "easeIn",
-      "easeInCubic",
-      "easeInQuart",
-      "easeOut",
-      "easeOutCubic",
-      "easeOutQuart",
-      "ease",
-      "easeInOutCubic",
-      "easeInOutQuart"
-    ]
-  },
-  slidingWindow: {
-    description: `Size of the sliding window for the animation:
-- 0: Typewriter effect (no animation).
-- (0..1]: Animates one part of the text at a time.
-- (1..n]: Animates multiple parts of the text within the sliding window.`,
-    required: !1,
-    control: "number",
-    type: "number",
-    defaultValue: 5
-  },
-  splitBy: {
-    description: "Defines how the text is split for animation (e.g., by character, space, or symbol).",
-    required: !1,
-    control: "select",
-    type: "string",
-    defaultValue: "char",
-    options: ["char", "space", 'symbol "#"', 'symbol "~"']
-  }
-};
-export {
-  e as props
-};

package/lib/__generated__/stagger-animation.props.js

@@ -1,40 +0,0 @@
-const e = {
-  className: {
-    required: !1,
-    control: "text",
-    type: "string",
-    description: "Classes to which the element belongs"
-  },
-  easing: {
-    description: "Easing function applied within the sliding window.",
-    required: !1,
-    control: "select",
-    type: "string",
-    defaultValue: "linear",
-    options: [
-      "linear",
-      "easeIn",
-      "easeInCubic",
-      "easeInQuart",
-      "easeOut",
-      "easeOutCubic",
-      "easeOutQuart",
-      "ease",
-      "easeInOutCubic",
-      "easeInOutQuart"
-    ]
-  },
-  slidingWindow: {
-    description: `Size of the sliding window for the animation:
-- 0: Typewriter effect (no animation).
-- (0..1]: Animates one child at a time.
-- (1..n]: Animates multiple children within the sliding window.`,
-    required: !1,
-    control: "number",
-    type: "number",
-    defaultValue: 1
-  }
-};
-export {
-  e as props
-};

package/lib/__generated__/video-animation.props.js

@@ -1,6 +0,0 @@
-const e = {
-  timeline: { required: !1, control: "boolean", type: "boolean" }
-};
-export {
-  e as props
-};

package/lib/animate-children.js

@@ -1,27 +0,0 @@
-import { jsx as r } from "react/jsx-runtime";
-import { forwardRef as m } from "react";
-import { animationCanPlayOnCanvasProperty as o } from "@webstudio-is/sdk/runtime";
-const c = m(
-  ({ debug: t = !1, action: n, ...i }, s) => /* @__PURE__ */ r("div", { ref: s, style: { display: "contents" }, ...i })
-), a = "AnimateChildren";
-c.displayName = a;
-const e = "@webstudio-is/sdk-components-animation", h = {
-  onNavigatorUnselect: (t, n) => {
-    n.instancePath.length > 0 && n.instancePath[0].component === `${e}:${a}` && t.setMemoryProp(
-      n.instancePath[0],
-      o,
-      void 0
-    );
-  },
-  onNavigatorSelect: (t, n) => {
-    n.instancePath.length > 0 && n.instancePath[0].component === `${e}:${a}` && t.setMemoryProp(
-      n.instancePath[0],
-      o,
-      !0
-    );
-  }
-};
-export {
-  c as AnimateChildren,
-  h as hooksAnimateChildren
-};

package/lib/animate-children.ws.js

@@ -1,30 +0,0 @@
-import { AnimationGroupIcon as n } from "@webstudio-is/icons/svg";
-import { animation as i } from "./shared/meta.js";
-const a = {
-  category: "animations",
-  description: "Animation Group component is designed to animate its children.",
-  icon: n,
-  order: 0,
-  label: "Animation Group",
-  contentModel: {
-    category: "instance",
-    children: [
-      "instance",
-      i.AnimateText,
-      i.StaggerAnimation,
-      i.VideoAnimation
-    ]
-  },
-  initialProps: ["action"],
-  props: {
-    action: {
-      required: !1,
-      control: "animationAction",
-      type: "animationAction",
-      description: "Animation Action"
-    }
-  }
-};
-export {
-  a as meta
-};

package/lib/animate-text.js

@@ -1,9 +0,0 @@
-import { jsx as r } from "react/jsx-runtime";
-import { forwardRef as t } from "react";
-const a = t(
-  ({ slidingWindow: o = 5, easing: m = "linear", splitBy: s = "char", ...i }, e) => /* @__PURE__ */ r("div", { ref: e, ...i })
-), n = "AnimateText";
-a.displayName = n;
-export {
-  a as AnimateText
-};

package/lib/animate-text.ws.js

@@ -1,20 +0,0 @@
-import { TextAnimationIcon as o } from "@webstudio-is/icons/svg";
-import { div as t } from "@webstudio-is/sdk/normalize.css";
-import { props as i } from "./__generated__/animate-text.props.js";
-const a = {
-  category: "animations",
-  description: "Text animation allows you to split text by char or by word to animate it.",
-  icon: o,
-  order: 1,
-  label: "Text Animation",
-  contentModel: {
-    category: "none",
-    children: ["instance"]
-  },
-  presetStyle: { div: t },
-  initialProps: ["slidingWindow", "easing", "splitBy"],
-  props: i
-};
-export {
-  a as meta
-};

package/lib/shared/create-progress-animation.js

@@ -1,6 +0,0 @@
-import { jsx as t } from "react/jsx-runtime";
-import { forwardRef as e } from "react";
-const f = () => e((r, o) => /* @__PURE__ */ t("div", { ref: o, ...r }));
-export {
-  f as createProgressAnimation
-};

package/lib/shared/meta.js

@@ -1,13 +0,0 @@
-const n = (t) => new Proxy(
-  {},
-  {
-    get(o, e) {
-      return `${t}${e}`;
-    }
-  }
-), r = n(
-  "@webstudio-is/sdk-components-animation:"
-);
-export {
-  r as animation
-};

package/lib/shared/proxy.js

@@ -1,5 +0,0 @@
-import { createProxy as o } from "@webstudio-is/template";
-const i = o("@webstudio-is/sdk-components-animation:");
-export {
-  i as animation
-};

package/lib/stagger-animation.js

@@ -1,7 +0,0 @@
-import { jsx as a } from "react/jsx-runtime";
-import { forwardRef as n } from "react";
-const o = n(({ slidingWindow: e = 1, easing: m = "linear", ...i }, r) => /* @__PURE__ */ a("div", { ref: r, ...i })), t = "StaggerAnimation";
-o.displayName = t;
-export {
-  o as StaggerAnimation
-};

package/lib/stagger-animation.ws.js

@@ -1,20 +0,0 @@
-import { StaggerAnimationIcon as i } from "@webstudio-is/icons/svg";
-import { div as n } from "@webstudio-is/sdk/normalize.css";
-import { props as o } from "./__generated__/stagger-animation.props.js";
-const r = {
-  category: "animations",
-  description: "Stagger animation allows you to animate children elements with a sliding window.",
-  icon: i,
-  order: 4,
-  label: "Stagger Animation",
-  contentModel: {
-    category: "none",
-    children: ["instance"]
-  },
-  presetStyle: { div: n },
-  initialProps: ["slidingWindow", "easing"],
-  props: o
-};
-export {
-  r as meta
-};