@webstudio-is/sdk-components-animation 0.235.0 → 0.237.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/lib/components.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
//! SPDX-License-Identifier: LicenseRef-Webstudio,Inc-Proprietary
|
|
2
|
-
"use strict";import{jsxs as
|
|
2
|
+
"use strict";import{jsxs as H,Fragment as U,jsx as A}from"react/jsx-runtime";import{useSyncExternalStore as Ke,use as Z,useEffect as k,useState as F,useRef as O,useLayoutEffect as be,forwardRef as R,useId as ee,useContext as te,Children as J,createElement as Ye,Suspense as Je,useMemo as Qe,isValidElement as Xe,cloneElement as Ge}from"react";import{camelCase as Ue}from"change-case";import{ErrorBoundary as Ze}from"react-error-boundary";import{toValue as W}from"@webstudio-is/css-engine/runtime";import{animationCanPlayOnCanvasProperty as et}from"@webstudio-is/sdk/runtime";import{ReactSdkContext as ne}from"@webstudio-is/react-sdk/runtime";import{shallowEqual as re}from"shallow-equal";import{atom as Se,computed as tt}from"nanostores";const nt=({fallback:e,children:n})=>Ke(()=>()=>{},()=>!1,()=>!0)?e:n;let z=null,xe;const rt=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 o=t.split(".").map(s=>parseInt(s,10)),r=[134,0,6998,0],i=[134,0,6998,164];for(let s=0;s<o.length;s++)if(o[s]<r[s]||o[s]>i[s])return!1;return!0},it=e=>z!==null?z:e?(z=import("./index-DhGZj8eD.js"),z):(z=Promise.resolve(),z),$e=rt();$e.then(e=>{xe=e,typeof window<"u"&&(window.__ws__tmp_isPolyfillRequired=e)});const ot=()=>{const e=Z($e);Z(it(e)),k(()=>{if(!e||/^((?!chrome|android).)*safari/i.test(navigator.userAgent))return;const n=new AbortController;return window.addEventListener("unload",()=>{},{signal:n.signal}),()=>{n.abort()}},[e])},st=()=>new Promise(e=>setTimeout(e,1e3)),at=()=>{const[e]=F(st);Z(e)},lt=["%","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"],ie=e=>e.replace(/[^a-zA-Z0-9-_]/g,"_"),ct=(e,n={})=>{const{value:t,unit:o}=e,{rootFontSize:r=typeof window<"u"&&parseFloat(getComputedStyle(document.documentElement).fontSize)||16,elementFontSize:i=r,viewportWidth:s=typeof window<"u"?window.innerWidth:0,viewportHeight:a=typeof window<"u"?window.innerHeight:0}=n;switch(o){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[o]}case"em":return t*i;case"ex":return t*i*.5;case"cap":return t*i*.7;case"ch":return t*i*.5;case"lh":return t*i*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: ${o}`)}},ut=e=>lt.includes(e),ue=(e,n={})=>{if(!xe)return e;if(e.type==="unit"){const{unit:t,value:o}=e;return t==="px"||t==="%"?e:{type:"unit",value:ct({unit:t,value:o},n),unit:"px"}}return{type:"unparsed",value:e.value.toLowerCase().replace(/(\d+(?:\.\d+)?)([a-z%]+)/gi,(t,o,r)=>{if(!ut(r))return`${o}${r}`;const i=ue({type:"unit",value:parseFloat(o),unit:r},n);return i.type!=="unit"?`${o}${r}`:`${i.value}${i.unit}`})}},Q=(e,n)=>{const t=(r,i)=>{let s=0,a=i;for(;a<r.length;){if(r[a]==="(")s++;else if(r[a]===")"&&(s--,s===0))break;a++}return{content:r.slice(i+4,a),end:a}},o=r=>{let i="",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++;i+=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=o(d)),i+=v!==void 0?v:`var(--error-not-found${f??"-empty"})`,s=c+1}else i+=r[s],s++;return i};return o(e)},dt=(e,n=" ")=>{const t=[];let o="",r=0;const i=e.trim();for(let s=0;s<i.length;s++){const a=i[s];a==="("?r++:a===")"&&r--,a===n&&r===0?(t.push(o.trim()),o=""):o+=a}return o&&t.push(o.trim()),t.filter(Boolean)},de=1e4,Ee=e=>{if(e.length===0)return[];const n=e.map(o=>o.offset!=null?o.offset*de: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*de);let t=0;for(let o=1;o<n.length-1;){if(n[o]!=null){t=o,o++;continue}if(n[o]==null){const r=n.findIndex((s,a)=>a>=o&&s!=null),i=(n[r]-n[t])/(r-t);for(let s=t+1;s<r;s++)n[s]=n[s-1]+i;t=r,o=r+1}}return n.map(o=>o/de)},mt=e=>{const n=Ee(e);if(n.length===0)return;let t={};for(let o=0;o<n.length;o++)if(n[o]===0){const r=e[o];t={...t,...r.styles}}if(Object.keys(t).length!==0)return t};function X(e,n){let t=e.parentElement;for(;t!=null;){if(n(t))return t;t=t.parentElement}}function ft(e,n){let t=e;for(;t!=null;){if(n(t))return t;t=t.parentElement}}function pt(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 Ce(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 gt(e){return getComputedStyle(e).position!=="static"?!0:Ce(e)}function ht(e){switch(getComputedStyle(e).position){case"static":case"relative":case"sticky":return X(e,pt);case"absolute":return X(e,gt);case"fixed":return X(e,Ce)}}function vt(e){if(!(!e||!e.isConnected))for(;e=ht(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 yt(e,n){switch(e){case"root":return document.scrollingElement;case"nearest":return vt(n);case"self":return n;default:throw new TypeError("Invalid ScrollTimeline Source Type.")}}const oe=(e,n)=>{if(e==="closest"){const t=X(n,o=>{const r=getComputedStyle(o),i=["auto","scroll","hidden"];return i.includes(r.overflowX)||i.includes(r.overflowY)});return t===document.body&&document.scrollingElement!==null&&getComputedStyle(document.scrollingElement).overflow==="visible"?document.scrollingElement:t}return yt(e,n)??void 0},me=e=>{const n=ft(e,t=>getComputedStyle(t).position==="sticky");return n?.parentElement??e},Ae=(e,n)=>{const t=X(n,o=>{const r=getComputedStyle(o);if(r.getPropertyValue("view-timeline-name")===e)return!0;if(r.getPropertyValue("--view-timeline-name").trim()===e){const i=o.parentElement;if(i===null||getComputedStyle(i).getPropertyValue("--view-timeline-name").trim()!==e)return!0}return!1});if(t!==void 0)return me(t)},Me="animation-ws-debug";let wt=0;const B=`${Me}-infobox`,bt=({selector:e,getContent:n})=>{const t=O(n);return be(()=>{t.current=n},[n]),k(()=>{const o=`infobox-container-${Me}`;let r=document.getElementById(o);if(!r){r=document.createElement("div"),r.id=o,r.style.display="contents";const l=document.createElement("style");l.textContent=`
|
|
3
3
|
.${B} {
|
|
4
4
|
color: white;
|
|
5
5
|
background-color: oklch(0.268 0.007 34.298 / 0.9);
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
@supports (anchor-name: --myAnchor) {
|
|
34
34
|
.${B} { display: block; }
|
|
35
35
|
}
|
|
36
|
-
`,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=`
|
|
36
|
+
`,r.appendChild(l),document.body.appendChild(r)}const i=new Map,s=new IntersectionObserver(l=>{for(const f of l){const d=f.boundingClientRect;i.set(f.target,{x:d.x,width:d.width})}}),a=l=>{const f=i.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-${wt++}`,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:x}=a(l),y=t.current(l);y!==v.textContent&&(v.textContent=y),v.style.setProperty("transform",`translate(${E}px, ${x}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},se="data-ws-subject-for",St=e=>({[se]:e}),Te=e=>`[${se}="${e}"]`,xt=e=>e.hasAttribute(se),$t=e=>e.getAttribute(se)??"-",Et=e=>e.id.endsWith("-sample"),ke="data-ws-no-initial-animation",Le={[ke]:""},Ct=(e,n)=>{const t=Math.pow(10,n);return Math.round(e*t)/t},At=(e,n,t,o)=>{const r=e.map(l=>l!==void 0?Ct(l,o):void 0),i=r.join(",");if(t.has(i))return t.get(i);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(i,m),m},Mt=e=>{const[n]=F(()=>{const r=new Map;for(const i of e){if(i.minWidth!==void 0){r.set(i.id,window.matchMedia(`(min-width: ${i.minWidth}px)`));continue}if(i.maxWidth!==void 0){r.set(i.id,window.matchMedia(`(max-width: ${i.maxWidth}px)`));continue}r.set(i.id,window.matchMedia("(min-width: 0px)"))}return r}),[t,o]=F(()=>[...n].map(([r,i])=>i.matches?r:void 0).filter(r=>r!==void 0));return k(()=>{const r=new AbortController;let i;const s=()=>{o(a=>{const c=[...n].map(([u,m])=>m.matches?u:void 0).filter(u=>u!==void 0);return re(a,c)?a:c})};for(const[a,c]of n)c.addEventListener("change",()=>{cancelAnimationFrame(i),i=requestAnimationFrame(s)},{signal:r.signal});return s(),()=>{cancelAnimationFrame(i),r.abort()}},[n]),t},Tt=e=>n=>{let t;if(n===void 0)return t;const o=new Map(n);for(const r of e)t=o.get(r)??t;return t},Pe=e=>{const n=new Set,t=(o,r="")=>{if(o)for(const i of o)if(i instanceof CSSStyleRule){const s=i.selectorText,a=i.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(i.cssRules,[r,s].filter(Boolean).join(":::"))}else if(i instanceof CSSConditionRule){const s=[r,i.conditionText].filter(Boolean).join(":::");t(i.cssRules,s)}else i instanceof CSSLayerBlockRule&&t(i.cssRules,[r,i.name].filter(Boolean).join(":::"))};try{const o=e.sheet;o&&t(o.cssRules)}catch(o){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).",o),new Set}return n},kt=()=>{const[e]=F(()=>new Promise(n=>{requestAnimationFrame(()=>{n(!0)})}));Z(e)},fe=new WeakMap,Lt=({subject:e,axis:n,inset:t})=>{if(!e)return new ViewTimeline({subject:e,axis:n,inset:t});const o=`${n}-${t}`;fe.has(e)||fe.set(e,new Map);const r=fe.get(e);if(r.has(o))return r.get(o);const i=new ViewTimeline({subject:e,axis:n,inset:t});return r.set(o,i),i},ae=new WeakSet,Pt=e=>ae.has(e)?()=>{}:(ae.add(e),()=>{ae.delete(e)}),It=e=>ae.has(e),G="data-ws-animate-id",Ie=e=>`[${G}="${e}"]`,pe=(e,n=!1,t=5)=>{const o=n?`:not(:is([${G}], [${ke}]))`:`:not(:is([${G}]))`,r=[Ie(e),o],i=[];for(let s=0;s<t;++s)i.push(r.join(" > ")),r.splice(1,0,`[${G}]`);return i.join(", ")},Ft=(e,n)=>e.flatMap(t=>n.map(o=>[t,o])),Fe=([e,n],t,o,r)=>{const i=getComputedStyle(t),s=parseFloat(i.fontSize);let a={...n};a.type==="var"&&(a={type:"unparsed",value:W(a)}),a.type==="unparsed"&&(a.value=Q(W(a),u=>u==="--index"?`${o}`:u==="--total"?`${r}`:u==="sibling-index()"?`${o}`:u==="sibling-count()"?`${r}`:i.getPropertyValue(u)));const c=W(ue(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,o,r)=>{const i=getComputedStyle(t),s=parseFloat(i.fontSize);let a={...e};if(a.type==="keyword"){let u=i.getPropertyValue("view-timeline-inset");if(u===""&&(u=i.getPropertyValue("--view-timeline-inset")),u==="")return e.value;const m=dt(u);a={type:"unparsed",value:n==="start"?m[0]:m[1]??m[0]}}a.type==="unparsed"&&(a.value=Q(a.value,u=>u==="--index"?`${o}`:u==="--total"?`${r}`:i.getPropertyValue(u)));const c=W(ue(a,{elementFontSize:s}));return CSS.supports("margin-top",c)?c:(console.warn(`Invalid inset value "${c}"`),"0%")},jt=(e,n,t,o,r)=>{switch(e.type){case"scroll":{const i=oe(e.source??"root",n);if(i===void 0){console.error("Source is not found ",e.source);return}return new ScrollTimeline({source:i,axis:e.axis??"block"})}case"view":{const i=e.subject?Ae(e.subject,n):me(r.get(n.id)??n);if(i==null){console.error("Subject is not found ",e.subject);return}const s=je(e.insetStart??{type:"keyword",value:"auto"},"start",n,t,o),a=je(e.insetEnd??{type:"keyword",value:"auto"},"end",n,t,o);return Lt({subject:i,axis:e.axis??"block",inset:`${s} ${a}`})}}},Ne=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},Nt=(e,n,t)=>`${n}-=#=-${e}-=#=-${t}`,Ot=e=>e.split("-=#=-")[0],Vt=new Set(["STYLE","SCRIPT","LINK","META","TITLE"]),le=(e,n)=>(...t)=>{try{return e.animate(...t)}catch(o){n(o);return}},Wt=({id:e,action:n,breakpoints:t,isCanvas:o,onError:r})=>{const i=Mt(t),s=Qe(()=>Tt(i),[i]);be(()=>{if(!window.matchMedia("(prefers-reduced-motion: no-preference)").matches)return;const a=pe(e),c=document.querySelectorAll(a);if(c.length===0)return;const u=(n.type,Ft(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&&!Vt.has(h.tagName)){if(xt(h)){d.set($t(h),h);continue}for(const g of n.animations){if(s(g.enabled)===!1)continue;const E=jt(n,h,f,u,d);if(E===void 0)return;const x=getComputedStyle(h);let y=g.timing.easing?Q(g.timing.easing,I=>x.getPropertyValue(I)):"linear";y=CSS.supports("animation-timing-function",y)?y:"linear";const $={easing:y,fill:g.timing.fill},w=g.timing.rangeStart?Fe(g.timing.rangeStart,h,f,u):void 0;let p=g.timing.rangeEnd?Fe(g.timing.rangeEnd,h,f,u):void 0;const S=g.keyframes.map(I=>{const j={offset:I.offset};for(const[L,N]of Object.entries(I.styles)){if(L.startsWith("--")){const Y=getComputedStyle(h).getPropertyValue(L)||"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:Y,name:L})}catch(_){_ instanceof DOMException&&_.name==="InvalidModificationError"||console.error(`Property registration error property="${L}" value="${Y}"`,_)}j[L]=W(N);continue}j[Ue(L)]=W(N)}return j});let b;const M=g.timing.duration===void 0?void 0:Ne(Q(W(g.timing.duration),I=>x.getPropertyValue(I))),P=g.timing.delay===void 0?void 0:Ne(Q(W(g.timing.delay),I=>x.getPropertyValue(I))),T=g.timing.iterations===void 0?void 0:g.timing.iterations==="infinite"?1/0:g.timing.iterations,C={...$,delay:P};let q=S;const V=Nt(e,`${g.name??"-"}`,f);if(M!==void 0)if(p=w,o)C.fill==="both"&&(C.fill="backwards"),C.fill==="forwards"&&(C.fill="none");else{C.fill==="backwards"&&(C.fill="both"),C.fill==="none"&&(C.fill="forwards");const I=Ee(S),j=S.filter((L,N)=>I[N]===0);q=[...j.map(L=>({...L,offset:0})),...j.map(L=>({...L,offset:1}))]}const K=M!==void 0?I=>{I.addEventListener("finish",()=>{o||I.cancel();const j=le(h,r)(S,{...$,duration:M,delay:P,iterations:T,id:V});if(l.push(()=>{j?.cancel()}),!o)return;const L=n.type==="scroll"?document.scrollingElement:n.type==="view"&&n.subject?Ae(n.subject,h):me(d.get(h.id)??h);if(L==null)return;const N=oe("nearest",L);if(N==null)return;const Y=N===document.scrollingElement?document:N,_=n.axis??"block",he=_==="block"||_==="y";let ve=he?N.scrollTop:N.scrollLeft;const ye=()=>{const we=he?N.scrollTop:N.scrollLeft;we<ve&&(j?.cancel(),Y.removeEventListener("scroll",ye)),ve=we};Y.addEventListener("scroll",ye,{signal:m.signal,passive:!0})},{signal:m.signal})}:()=>{};v(h)?(b=le(h,r)([],{...C,timeline:E,rangeStart:w,rangeEnd:p,duration:1,id:V}),M!==void 0&&b!==void 0&&l.push(Pt(b)),b!==void 0&&K(b)):Et(h)?(b=le(h,r)(S,{easing:"linear",fill:"both",duration:1e3,id:V}),b?.pause()):(b=le(h,r)(q,{...C,timeline:E,rangeStart:w,rangeEnd:p,duration:1,id:V}),b&&K(b),f++),l.push(()=>{b?.cancel()})}}return()=>{l.forEach(h=>h())}},[n,e,o,s,r])},Oe=({id:e,action:n})=>{const t=pe(e,!0),o=n.animations.filter(a=>a.timing.fill==="backwards"||a.timing.fill==="both");let r="";const i=`${t} { animation: none; }`,s=new Map;for(const a of o){const c=mt(a.keyframes);if(c!==void 0)for(const[u,m]of Object.entries(c))s.set(u,W(m))}return r=`
|
|
37
37
|
${r}
|
|
38
38
|
|
|
39
39
|
@keyframes ws-scroll-animation-${e} {
|
|
@@ -51,8 +51,8 @@
|
|
|
51
51
|
animation-duration: 1ms;
|
|
52
52
|
}
|
|
53
53
|
}
|
|
54
|
-
`,
|
|
55
|
-
`)},
|
|
54
|
+
`,H(U,{children:[A("style",{dangerouslySetInnerHTML:{__html:r}}),A("noscript",{children:A("style",{dangerouslySetInnerHTML:{__html:i}})})]})},qt=e=>{const n=e.getAnimations().map(r=>{var i;return{id:r.id,name:Ot(r.id),progress:(i=r.effect)==null?void 0:i.getComputedTiming().progress}}),t=[...new Map(n.map(({id:r,name:i,progress:s})=>s==null?[r,`${i}: idle`]:[r,`${i}: ${(s*100).toFixed(1)}%`])).values()];if(t.length===0)return"";const o=Math.max(...t.map(r=>r.length));return t.map(r=>{const i=r.lastIndexOf(" ");if(i===-1)return r.padEnd(o);const s=r.substring(0,i),a=r.substring(i+1),c=o-r.length;return`${s}${" ".repeat(c+1)}${a}`}).join(`
|
|
55
|
+
`)},Rt=R(({debug:e=!1,children:n,action:t,[et]:o,...r},i)=>{const s=ee(),a=ie(s),[c,u]=F(0),[m,l]=F(0),f=O(t?.isPinned),{renderer:d,breakpoints:v,onError:h}=te(ne),g=O(v);k(()=>{const p=new AbortController;return document.addEventListener("visibilitychange",()=>{document.visibilityState==="visible"&&u(S=>S+1)},{signal:p.signal,once:!0}),()=>{p.abort()}},[]),k(()=>{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 S=Pe(p);const b=new MutationObserver(()=>{const M=Pe(p);M.symmetricDifference(S).size!==0&&(u(P=>P+1),S=M)});return b.observe(p,{childList:!0,subtree:!0,characterData:!0}),()=>{b.disconnect()}},[a,d]),k(()=>{if(d===void 0)return;const p=new AbortController;return window.addEventListener("resize",()=>{u(S=>S+1)},{signal:p.signal}),()=>{p.abort()}},[a,d]),k(()=>{t?.isPinned!==f.current&&(f.current=t?.isPinned,t!=null&&t.isPinned&&(l(p=>p+1),u(p=>p+1)))},[t?.isPinned]),k(()=>{d!==void 0&&g.current===v&&(g.current=v,u(p=>p+1))},[v,d]),k(()=>{const p=Ie(a),S=document.querySelector(p);if(S===null){console.error(`Element with selector ${p} not found`);return}const b=new MutationObserver(M=>{const P=new Set;M.forEach(T=>{T.type==="childList"&&(T.addedNodes.forEach(C=>{C instanceof HTMLElement&&C.tagName==="STYLE"||C instanceof HTMLElement&&C.tagName==="NOSCRIPT"||P.add(C)}),T.removedNodes.forEach(C=>{P.delete(C)}))}),P.size>0&&u(T=>T+1)});return b.observe(S,{childList:!0,subtree:!1}),S.parentElement!==null&&b.observe(S.parentElement,{childList:!0,subtree:!1}),()=>{b.disconnect()}},[a,m]);const E=d==="canvas",x=E?(t?.isPinned??!1)||(o??!1):!0,y=d===void 0?!1:t?.debug??!1,$=d==="canvas"&&J.count(n)===0,w=$?"Add the instances you want to animate.":n;return H(U,{children:[t&&x&&A(nt,{fallback:A(Oe,{id:a,action:t,reason:"Client Only"}),children:H(Je,{fallback:A(Oe,{id:a,action:t,reason:"Suspense"}),children:[H(Ze,{fallback:null,onError:p=>{console.error("Polyfill loading error",p)},children:[A(ot,{}),e&&A(at,{}),d==="canvas"&&A(kt,{})]}),A(Wt,{id:a,action:t,breakpoints:v,isCanvas:E,onError:h},`${c}`),y&&A(bt,{selector:pe(a),getContent:qt},`${c}-debug`)]})}),Ye("div",{ref:i,[G]:a,...r,style:$?void 0:{display:"contents"},key:m},w)]})}),Ve=(e,n,t)=>{const o=[],r=[];let i;const s=()=>{const m=r.every(Boolean);m!==i&&(e(m),i=m)};let a=n,c=oe("nearest",a);const u=[];for(;c;){const m=o.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),o.push(f),u.push(()=>{f.unobserve(a),f.disconnect()}),a=c,c=oe("nearest",a)}return()=>{u.forEach(m=>{m()})}},_t=e=>{let n;const t=()=>{e(),n=requestAnimationFrame(t)};return n=requestAnimationFrame(t),()=>{cancelAnimationFrame(n)}},Ht=String.raw,ge=R(({children:e,...n},t)=>{const o=O(null),r=O(null),i=ee(),s=ie(i),a=`${s}-sample`,[c]=F(()=>new Map),[u]=F(()=>Ht`
|
|
56
56
|
#${s} {
|
|
57
57
|
position: fixed;
|
|
58
58
|
visibility: hidden;
|
|
@@ -71,13 +71,13 @@
|
|
|
71
71
|
willchange: translate, scale, opacity;
|
|
72
72
|
contain: strict;
|
|
73
73
|
}
|
|
74
|
-
`),[m]=
|
|
75
|
-
${
|
|
74
|
+
`),[m]=F(()=>(d,v)=>r.current?At(d,r.current,c,v):{}),[l]=F(()=>Se([])),[f]=F(()=>Se(!1));return k(()=>{const d=document.querySelector(Te(s));if(d===null)return;let v=[],h=[],g=[];const E=()=>{if(!o.current||!r.current)return;const $=o.current.getAnimations(),w=!re(v,$);v=$;const p=$.map(T=>T.playState),S=!re(g,p);g=p,w&&c.clear();const b=r.current.getAnimations(),M=b?.map(T=>{var C,q;const V=$.findLast(({id:L})=>L===T.id);if(V===void 0)return;const K=(C=V.effect)==null?void 0:C.getTiming().fill,I=V.playState,j=(q=V.effect)==null?void 0:q.getComputedTiming().progress;return I==="running"&&(K==="backwards"||K==="both")&&j===null||It(V)?0:j??void 0})??void 0,P=!re(h,M);h=M,(w||P||S)&&l.set(M)};E();let x=()=>{};const y=Ve($=>{x(),$&&(x=_t(E))},d,`${Math.round(Math.max(window.innerWidth/2,window.innerHeight/2))}px`);return()=>{y(),x()}},[l,s,c]),k(()=>{const d=document.querySelector(Te(s));if(d===null)return;const v=Ve(h=>{f.set(h)},d,"0px");return()=>{v()}},[f,s]),H(U,{children:[A("div",{ref:t,...St(s),...n,children:e(l,f,m)}),A("style",{dangerouslySetInnerHTML:{__html:u}}),A("div",{id:s,ref:o,inert:"true",...Le}),A("div",{id:a,ref:r,inert:"true",...Le})]})}),zt=e=>e*e,Bt=e=>e*e*e,Dt=e=>e*e*e*e,Kt=e=>1-(1-e)*(1-e),Yt=e=>1-Math.pow(1-e,3),Jt=e=>1-Math.pow(1-e,4),Qt=e=>e<.5?2*e*e:1-2*(1-e)*(1-e),Xt=e=>3*e*e-2*e*e*e,Gt=e=>e<.5?8*e*e*e*e:1-8*Math.pow(1-e,4),Ut=e=>e,We={linear:Ut,easeIn:zt,easeInCubic:Bt,easeInQuart:Dt,easeOut:Kt,easeOutCubic:Yt,easeOutQuart:Jt,ease:Qt,easeInOutCubic:Xt,easeInOutQuart:Gt},D="data-ws-text-animate",qe="data-ws-text-non-animate",Zt=(e,n)=>{let t=0;const o=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=[],i=[];for(let s=o.nextNode();s!==null;s=o.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(qe,""),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;i.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[${qe}]`))s.remove();for(const s of i)s()}]},en=(e,n,t,o)=>{if(t===0)return o<n?0:1;const r=(o-(n-t))/t;return r<=0?0:r>=1?1:e(r)},tn=(e,n,t)=>Math.min(Math.max(e,n),t),Re="data-ws-animate-text-id",ce=e=>`[${Re}="${e}"]`,nn=(e,n)=>e.map(t=>t!==void 0?t*n:void 0),rn=R(({$progress:e,slidingWindow:n,easing:t,splitBy:o,getStylesAt:r,onRender:i,children:s,progressPrecision:a=3,...c},u)=>{n=Math.max(0,n);const m=ee(),l=ie(m),f=O(),d=O([]),v=O(r);v.current=r;const[h,g]=F(0),[E]=F(()=>`
|
|
75
|
+
${ce(l)} span[${D}] {
|
|
76
76
|
display: inline-block;
|
|
77
77
|
will-change: translate, scale, opacity;
|
|
78
78
|
}
|
|
79
79
|
|
|
80
|
-
${
|
|
80
|
+
${ce(l)} *:has(> span[${D}]) {
|
|
81
81
|
white-space-collapse: preserve;
|
|
82
82
|
}
|
|
83
|
-
`);return
|
|
83
|
+
`);return k(()=>{const x=document.querySelector(ce(l));if(!x)return;const[y,$]=Zt(x,o);return f.current=y,d.current=[],$},[l,o,h]),k(()=>{const x=document.querySelector(ce(l));if(!x)return;const y=new MutationObserver($=>{const w=new Set;let p=!1;$.forEach(S=>{S.type==="childList"&&(S.addedNodes.forEach(b=>{if(b instanceof HTMLElement&&b.isContentEditable){p=!0;return}w.add(b)}),S.removedNodes.forEach(b=>{if(w.has(b)){w.delete(b);return}w.add(b)}))}),!p&&w.size>0&&g(S=>S+1)});return y.observe(x,{childList:!0,subtree:!0}),()=>{y.disconnect()}},[l,h]),k(()=>e.subscribe(x=>{const y=f.current;if(y===void 0||y.length===0)return;const $=[];for(let w=0;w<y.length;w++){const p=y[w];if(x.length===0){if(d.current[w]===void 0)continue;p.style.cssText="",d.current[w]=void 0;continue}const S=y.length+n-1,b=nn(x,S),M=We[t],P=b.map(q=>q===void 0?void 0:1-en(M,tn(q,0,S),n,w)),T=v.current(P,a),C=JSON.stringify(T);d.current[w]!==C&&($.push([p,T]),d.current[w]=C)}for(const[w,p]of $){w.style.cssText="";for(const[S,b]of Object.entries(p))w.style.setProperty(S,b)}i?.()}),[l,e,n,t,i,a,h]),H(U,{children:[A("style",{dangerouslySetInnerHTML:{__html:E}}),A("div",{ref:u,[Re]:l,...c,style:{display:"contents"},children:s},h)]})}),on={char:"",space:/( )/,'symbol "#"':/#/,'symbol "~"':/~/},_e=R(({charWindow:e=5,easing:n="linear",splitBy:t="char",children:o,...r},i)=>{const{renderer:s}=te(ne),a=s==="canvas"&&J.count(o)===0?"Add content, and all text inside will be animated.":o;return A(ge,{ref:i,...r,children:(c,u,m)=>A(rn,{$progress:c,getStylesAt:m,slidingWindow:e,easing:n,splitBy:on[t],children:a})})}),sn="AnimateText";_e.displayName=sn;const an=(e,n,t,o)=>{if(t===0)return o<n?0:1;const r=(o-(n-t))/t;return r<=0?0:r>=1?1:e(r)},ln=(e,n,t)=>Math.min(Math.max(e,n),t),He="data-ws-staggering-animation-id",ze=e=>`[${He}="${e}"]`,cn=(e,n)=>e.map(t=>t!==void 0?t*n:void 0),un=R(({$progress:e,slidingWindow:n,easing:t,getStylesAt:o,onRender:r,children:i,progressPrecision:s=3,...a},c)=>{n=Math.max(0,n);const u=ee(),m=ie(u),l=O(),f=O([]),d=O(o);d.current=o;const[v,h]=F(0);return k(()=>{const g=document.querySelector(ze(m));if(!g)return;const E=Array.from(g.children).filter(x=>x instanceof HTMLElement);l.current=E,f.current=[]},[m,v]),k(()=>{const g=document.querySelector(ze(m));if(!g)return;const E=new MutationObserver(x=>{const y=new Set;let $=!1;x.forEach(w=>{w.type==="childList"&&(w.addedNodes.forEach(p=>{if(p instanceof HTMLElement&&p.isContentEditable){$=!0;return}y.add(p)}),w.removedNodes.forEach(p=>{if(y.has(p)){y.delete(p);return}y.add(p)}))}),!$&&y.size>0&&h(w=>w+1)});return E.observe(g,{childList:!0,subtree:!1}),()=>{E.disconnect()}},[m,v]),k(()=>e.subscribe(g=>{const E=l.current;if(E===void 0||E.length===0)return;const x=[];for(let y=0;y<E.length;y++){const $=E[y];if(g.length===0){if(f.current[y]===void 0)continue;$.style.cssText="",f.current[y]=void 0;continue}const w=E.length+n-1,p=cn(g,w),S=We[t],b=p.map(T=>T===void 0?void 0:1-an(S,ln(T,0,w),n,y)),M=d.current(b,s),P=JSON.stringify(M);f.current[y]!==P&&(x.push([$,M]),f.current[y]=P)}for(const[y,$]of x){y.style.cssText="";for(const[w,p]of Object.entries($))y.style.setProperty(w,p)}r?.()}),[m,e,n,t,r,s,v]),A("div",{ref:c,[He]:m,...a,style:{display:"contents"},children:i},v)}),Be=R(({charWindow:e=1,easing:n="linear",children:t,...o},r)=>{const{renderer:i}=te(ne),s=i==="canvas"&&J.count(t)===0?"Add children.":t;return A(ge,{ref:r,...o,children:(a,c,u)=>A(un,{$progress:a,getStylesAt:u,slidingWindow:e,easing:n,children:s})})}),dn="StaggerAnimation";Be.displayName=dn;const mn=({$progress:e,$visible:n,$timeline:t,children:o})=>{const[r]=F(()=>tt([e],i=>i[0]));return J.map(o,i=>Xe(i)?Ge(i,{$progress:r,$visible:n,$timeline:t}):i)},fn=()=>R(({children:e,timeline:n,...t},o)=>{const{renderer:r}=te(ne),i=r==="canvas"&&J.count(e)===0?"Add children.":e;return A(ge,{ref:o,...t,children:(s,a)=>A(mn,{$progress:s,$timeline:n,$visible:a,children:i})})}),De=fn(),pn="VideoAnimation";De.displayName=pn;export{Rt as AnimateChildren,_e as AnimateText,Be as StaggerAnimation,De as VideoAnimation};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@webstudio-is/sdk-components-animation",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.237.0",
|
|
4
4
|
"description": "Webstudio components for animation",
|
|
5
5
|
"author": "Webstudio <github@webstudio.is>",
|
|
6
6
|
"homepage": "https://webstudio.is",
|
|
@@ -44,10 +44,10 @@
|
|
|
44
44
|
"nanostores": "^0.11.3",
|
|
45
45
|
"react-error-boundary": "^5.0.0",
|
|
46
46
|
"shallow-equal": "^3.1.0",
|
|
47
|
-
"@webstudio-is/css-engine": "0.
|
|
48
|
-
"@webstudio-is/icons": "0.
|
|
49
|
-
"@webstudio-is/react-sdk": "0.
|
|
50
|
-
"@webstudio-is/sdk": "0.
|
|
47
|
+
"@webstudio-is/css-engine": "0.237.0",
|
|
48
|
+
"@webstudio-is/icons": "0.237.0",
|
|
49
|
+
"@webstudio-is/react-sdk": "0.237.0",
|
|
50
|
+
"@webstudio-is/sdk": "0.237.0"
|
|
51
51
|
},
|
|
52
52
|
"devDependencies": {
|
|
53
53
|
"@types/react": "^18.2.70",
|
|
@@ -60,12 +60,12 @@
|
|
|
60
60
|
"type-fest": "^4.37.0",
|
|
61
61
|
"vitest": "^3.1.2",
|
|
62
62
|
"zod": "^3.24.2",
|
|
63
|
+
"@webstudio-is/css-data": "0.0.0",
|
|
63
64
|
"@webstudio-is/design-system": "0.0.0",
|
|
64
65
|
"@webstudio-is/generate-arg-types": "0.0.0",
|
|
65
66
|
"@webstudio-is/sdk-cli": "^0.94.0",
|
|
66
|
-
"@webstudio-is/
|
|
67
|
-
"@webstudio-is/
|
|
68
|
-
"@webstudio-is/template": "0.235.0",
|
|
67
|
+
"@webstudio-is/template": "0.237.0",
|
|
68
|
+
"@webstudio-is/sdk-components-react": "0.237.0",
|
|
69
69
|
"@webstudio-is/tsconfig": "1.0.7"
|
|
70
70
|
},
|
|
71
71
|
"scripts": {
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
export declare const animation: Record<string, {
|
|
2
|
-
displayName: string;
|
|
3
|
-
} & ((props: Record<string, unknown> & Record<`${string}:expression`, string> & {
|
|
4
|
-
"ws:id"?: string;
|
|
5
|
-
"ws:label"?: string;
|
|
6
|
-
"ws:tag"?: string;
|
|
7
|
-
"ws:style"?: import("@webstudio-is/template").TemplateStyleDecl[];
|
|
8
|
-
"ws:show"?: boolean | {
|
|
9
|
-
chunks: string[];
|
|
10
|
-
variables: Array<import("@webstudio-is/template").Variable | import("@webstudio-is/template").Parameter | import("@webstudio-is/template").ResourceValue>;
|
|
11
|
-
};
|
|
12
|
-
children?: import("react").ReactNode | {
|
|
13
|
-
chunks: string[];
|
|
14
|
-
variables: Array<import("@webstudio-is/template").Variable | import("@webstudio-is/template").Parameter | import("@webstudio-is/template").ResourceValue>;
|
|
15
|
-
} | import("@webstudio-is/template").PlaceholderValue;
|
|
16
|
-
}) => import("react").ReactNode)>;
|
package/lib/types/templates.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { meta as VideoAnimation } from "./video-animation.template";
|