@webstudio-is/sdk-components-animation 0.274.4 → 0.275.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/README.md
CHANGED
|
@@ -1,4 +1,9 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Animation Components for Webstudio
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
Animation components provide Webstudio-native building blocks for scroll, view, text, stagger, and video animations.
|
|
4
|
+
|
|
5
|
+
## Component Registry Metadata
|
|
6
|
+
|
|
7
|
+
Webstudio animation component discovery uses the shared Webstudio registry format: a shadcn-compatible registry item shape with Webstudio-specific metadata stored in `meta`. The superset metadata describes animation composition, props, content models, templates, insertion rules, and Builder/MCP guidance.
|
|
8
|
+
|
|
9
|
+
This package is not published as an installable shadcn registry yet; the shape is used internally by Builder and MCP discovery.
|
package/lib/components.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
//! SPDX-License-Identifier: LicenseRef-Webstudio,Inc-Proprietary
|
|
2
|
-
"use strict";import{jsxs as
|
|
3
|
-
.${
|
|
2
|
+
"use strict";import{jsxs as z,Fragment as G,jsx as M}from"react/jsx-runtime";import{useSyncExternalStore as Ke,use as Z,useEffect as L,useState as j,useRef as O,useLayoutEffect as be,forwardRef as H,useId as ee,useContext as te,Children as Q,createElement as Qe,Suspense as Ye,useMemo as Je,isValidElement as Xe,cloneElement as Ge}from"react";import{camelCase as Ze}from"change-case";import{ErrorBoundary as et}from"react-error-boundary";import{toValue as V}from"@webstudio-is/css-engine/runtime";import{animationCanPlayOnCanvasProperty as tt}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 nt}from"nanostores";const rt=({fallback:e,children:n})=>Ke(()=>()=>{},()=>!1,()=>!0)?e:n;let B=null,$e;const it=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},ot=e=>B!==null?B:e?(B=import("./index-DhGZj8eD.js"),B):(B=Promise.resolve(),B),xe=it();xe.then(e=>{$e=e,typeof window<"u"&&(window.__ws__tmp_isPolyfillRequired=e)});const st=()=>{const e=Z(xe);Z(ot(e)),L(()=>{if(!e||/^((?!chrome|android).)*safari/i.test(navigator.userAgent))return;const n=new AbortController;return window.addEventListener("unload",()=>{},{signal:n.signal}),()=>{n.abort()}},[e])},at=()=>new Promise(e=>setTimeout(e,1e3)),lt=()=>{const[e]=j(at);Z(e)},ct=["%","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,"_"),ut=(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}`)}},dt=e=>ct.includes(e),ue=(e,n={})=>{if(!$e)return e;if(e.type==="unit"){const{unit:t,value:o}=e;return t==="px"||t==="%"?e:{type:"unit",value:ut({unit:t,value:o},n),unit:"px"}}return{type:"unparsed",value:e.value.toLowerCase().replace(/(\d+(?:\.\d+)?)([a-z%]+)/gi,(t,o,r)=>{if(!dt(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}`})}},Y=(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 y=n(f);y===void 0&&d&&(y=o(d)),i+=y!==void 0?y:`var(--error-not-found${f??"-empty"})`,s=c+1}else i+=r[s],s++;return i};return o(e)},mt=(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)},ft=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 J(e,n){let t=e.parentElement;for(;t!=null;){if(n(t))return t;t=t.parentElement}}function pt(e,n){let t=e;for(;t!=null;){if(n(t))return t;t=t.parentElement}}function ht(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 vt(e){switch(getComputedStyle(e).position){case"static":case"relative":case"sticky":return J(e,ht);case"absolute":return J(e,gt);case"fixed":return J(e,Ce)}}function yt(e){if(!(!e||!e.isConnected))for(;e=vt(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 wt(e,n){switch(e){case"root":return document.scrollingElement;case"nearest":return yt(n);case"self":return n;default:throw new TypeError("Invalid ScrollTimeline Source Type.")}}const oe=(e,n)=>{if(e==="closest"){const t=J(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 wt(e,n)??void 0},me=e=>{const n=pt(e,t=>getComputedStyle(t).position==="sticky");return n?.parentElement??e},Me=(e,n)=>{const t=J(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)},Ae="animation-ws-debug";let bt=0;const D=`${Ae}-infobox`,St=({selector:e,getContent:n})=>{const t=O(n);return be(()=>{t.current=n},[n]),L(()=>{const o=`infobox-container-${Ae}`;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
|
+
.${D} {
|
|
4
4
|
color: white;
|
|
5
5
|
background-color: oklch(0.268 0.007 34.298 / 0.9);
|
|
6
6
|
|
|
@@ -15,25 +15,25 @@
|
|
|
15
15
|
}
|
|
16
16
|
|
|
17
17
|
/* Performance */
|
|
18
|
-
.${
|
|
18
|
+
.${D} {
|
|
19
19
|
contain: content;
|
|
20
20
|
}
|
|
21
21
|
|
|
22
|
-
.${
|
|
22
|
+
.${D} {
|
|
23
23
|
position: fixed;
|
|
24
24
|
position-area: top;
|
|
25
25
|
position-try-fallbacks: bottom;
|
|
26
26
|
}
|
|
27
27
|
|
|
28
28
|
/* Hide if browser is unsupported */
|
|
29
|
-
.${
|
|
29
|
+
.${D} {
|
|
30
30
|
display: none;
|
|
31
31
|
}
|
|
32
32
|
|
|
33
33
|
@supports (anchor-name: --myAnchor) {
|
|
34
|
-
.${
|
|
34
|
+
.${D} { display: block; }
|
|
35
35
|
}
|
|
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 y=document.createElement("div");y.className=B,y.style.setProperty("position-anchor",f),r.appendChild(y);const h=()=>{const{x:M,y:$}=a(l),x=t.current(l);x!==y.textContent&&(y.textContent=x),y.style.setProperty("transform",`translate(${M}px, ${$}px)`),g=requestAnimationFrame(h)};let g=requestAnimationFrame(h);return()=>{cancelAnimationFrame(g),y.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}"]`,$t=e=>e.hasAttribute(se),xt=e=>e.getAttribute(se)??"-",Et=e=>e.id.endsWith("-sample"),Pe="data-ws-no-initial-animation",ke={[Pe]:""},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 y=f.effect;if(y instanceof KeyframeEffect){const h=y.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]=j(()=>{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]=j(()=>[...n].map(([r,i])=>i.matches?r:void 0).filter(r=>r!==void 0));return P(()=>{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},Le=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},Pt=()=>{const[e]=j(()=>new Promise(n=>{requestAnimationFrame(()=>{n(!0)})}));Z(e)},fe=new WeakMap,kt=({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,Lt=e=>ae.has(e)?()=>{}:(ae.add(e),()=>{ae.delete(e)}),Ft=e=>ae.has(e),X="data-ws-animate-id",Fe=e=>`[${X}="${e}"]`,pe=(e,n=!1,t=5)=>{const o=n?`:not(:is([${X}], [${Pe}]))`:`:not(:is([${X}]))`,r=[Fe(e),o],i=[];for(let s=0;s<t;++s)i.push(r.join(" > ")),r.splice(1,0,`[${X}]`);return i.join(", ")},jt=(e,n)=>e.flatMap(t=>n.map(o=>[t,o])),je=([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=J(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})`}},Ie=(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=J(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%")},It=(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=Ie(e.insetStart??{type:"keyword",value:"auto"},"start",n,t,o),a=Ie(e.insetEnd??{type:"keyword",value:"auto"},"end",n,t,o);return kt({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=Je(()=>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,jt(Array.from(c),n.animations)).length,m=new AbortController,l=[];l.push(()=>{m.abort()});let f=0;const d=new Map,y=h=>d.has(h.id);for(const h of c)if(h instanceof HTMLElement&&!Vt.has(h.tagName)){if($t(h)){d.set(xt(h),h);continue}for(const g of n.animations){if(s(g.enabled)===!1)continue;const M=It(n,h,f,u,d);if(M===void 0)return;const $=getComputedStyle(h);let x=g.timing.easing?J(g.timing.easing,F=>$.getPropertyValue(F)):"linear";x=CSS.supports("animation-timing-function",x)?x:"linear";const S={easing:x,fill:g.timing.fill},b=g.timing.rangeStart?je(g.timing.rangeStart,h,f,u):void 0;let p=g.timing.rangeEnd?je(g.timing.rangeEnd,h,f,u):void 0;const w=g.keyframes.map(F=>{const I={offset:F.offset};for(const[k,N]of Object.entries(F.styles)){if(k.startsWith("--")){const K=getComputedStyle(h).getPropertyValue(k)||"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:K,name:k})}catch(H){H instanceof DOMException&&H.name==="InvalidModificationError"||console.error(`Property registration error property="${k}" value="${K}"`,H)}I[k]=W(N);continue}I[Ge(k)]=W(N)}return I});let v;const C=g.timing.duration===void 0?void 0:Ne(J(W(g.timing.duration),F=>$.getPropertyValue(F))),L=g.timing.delay===void 0?void 0:Ne(J(W(g.timing.delay),F=>$.getPropertyValue(F))),T=g.timing.iterations===void 0?void 0:g.timing.iterations==="infinite"?1/0:g.timing.iterations,E={...S,delay:L};let q=w;const V=Nt(e,`${g.name??"-"}`,f);if(C!==void 0)if(p=b,o)E.fill==="both"&&(E.fill="backwards"),E.fill==="forwards"&&(E.fill="none");else{E.fill==="backwards"&&(E.fill="both"),E.fill==="none"&&(E.fill="forwards");const F=Ee(w),I=w.filter((k,N)=>F[N]===0);q=[...I.map(k=>({...k,offset:0})),...I.map(k=>({...k,offset:1}))]}const U=C!==void 0?F=>{F.addEventListener("finish",()=>{o||F.cancel();const I=le(h,r)(w,{...S,duration:C,delay:L,iterations:T,id:V});if(l.push(()=>{I?.cancel()}),!o)return;const k=n.type==="scroll"?document.scrollingElement:n.type==="view"&&n.subject?Ae(n.subject,h):me(d.get(h.id)??h);if(k==null)return;const N=oe("nearest",k);if(N==null)return;const K=N===document.scrollingElement?document:N,H=n.axis??"block",ge=H==="block"||H==="y";let ve=ge?N.scrollTop:N.scrollLeft;const ye=()=>{const we=ge?N.scrollTop:N.scrollLeft;we<ve&&(I?.cancel(),K.removeEventListener("scroll",ye)),ve=we};K.addEventListener("scroll",ye,{signal:m.signal,passive:!0})},{signal:m.signal})}:()=>{};y(h)?(v=le(h,r)([],{...E,timeline:M,rangeStart:b,rangeEnd:p,duration:1,id:V}),C!==void 0&&v!==void 0&&l.push(Lt(v)),v!==void 0&&U(v)):Et(h)?(v=le(h,r)(w,{easing:"linear",fill:"both",duration:1e3,id:V}),v?.pause()):(v=le(h,r)(q,{...E,timeline:M,rangeStart:b,rangeEnd:p,duration:1,id:V}),v&&U(v),f++),l.push(()=>{v?.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=`
|
|
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-${bt++}`,d=l.style.getPropertyValue("anchor-name");l.style.setProperty("anchor-name",f);const y=document.createElement("div");y.className=D,y.style.setProperty("position-anchor",f),r.appendChild(y);const h=()=>{const{x:A,y:$}=a(l),x=t.current(l);x!==y.textContent&&(y.textContent=x),y.style.setProperty("transform",`translate(${A}px, ${$}px)`),g=requestAnimationFrame(h)};let g=requestAnimationFrame(h);return()=>{cancelAnimationFrame(g),y.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",$t=e=>({[se]:e}),Te=e=>`[${se}="${e}"]`,xt=e=>e.hasAttribute(se),Et=e=>e.getAttribute(se)??"-",Ct=e=>e.id.endsWith("-sample"),Pe="data-ws-no-initial-animation",Le={[Pe]:""},Mt=(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?Mt(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 y=f.effect;if(y instanceof KeyframeEffect){const h=y.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},Tt=e=>{const[n]=j(()=>{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]=j(()=>[...n].map(([r,i])=>i.matches?r:void 0).filter(r=>r!==void 0));return L(()=>{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},Pt=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},ke=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},Lt=()=>{const[e]=j(()=>new Promise(n=>{requestAnimationFrame(()=>{n(!0)})}));Z(e)},fe=new WeakMap,kt=({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,Nt=e=>ae.has(e)?()=>{}:(ae.add(e),()=>{ae.delete(e)}),Ne=e=>ae.has(e),X="data-ws-animate-id",Fe=e=>`[${X}="${e}"]`,pe=(e,n=!1,t=5)=>{const o=n?`:not(:is([${X}], [${Pe}]))`:`:not(:is([${X}]))`,r=[Fe(e),o],i=[];for(let s=0;s<t;++s)i.push(r.join(" > ")),r.splice(1,0,`[${X}]`);return i.join(", ")},Ft=(e,n)=>e.flatMap(t=>n.map(o=>[t,o])),je=([e,n],t,o,r)=>{const i=getComputedStyle(t),s=parseFloat(i.fontSize);let a={...n};a.type==="var"&&(a={type:"unparsed",value:V(a)}),a.type==="unparsed"&&(a.value=Y(V(a),u=>u==="--index"?`${o}`:u==="--total"?`${r}`:u==="sibling-index()"?`${o}`:u==="sibling-count()"?`${r}`:i.getPropertyValue(u)));const c=V(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})`}},Ie=(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=mt(u);a={type:"unparsed",value:n==="start"?m[0]:m[1]??m[0]}}a.type==="unparsed"&&(a.value=Y(a.value,u=>u==="--index"?`${o}`:u==="--total"?`${r}`:i.getPropertyValue(u)));const c=V(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?Me(e.subject,n):me(r.get(n.id)??n);if(i==null){console.error("Subject is not found ",e.subject);return}const s=Ie(e.insetStart??{type:"keyword",value:"auto"},"start",n,t,o),a=Ie(e.insetEnd??{type:"keyword",value:"auto"},"end",n,t,o);return kt({subject:i,axis:e.axis??"block",inset:`${s} ${a}`})}}},Oe=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},It=(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=Tt(t),s=Je(()=>Pt(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,y=h=>d.has(h.id);for(const h of c)if(h instanceof HTMLElement&&!Vt.has(h.tagName)){if(xt(h)){d.set(Et(h),h);continue}for(const g of n.animations){if(s(g.enabled)===!1)continue;const A=jt(n,h,f,u,d);if(A===void 0)return;const $=getComputedStyle(h);let x=g.timing.easing?Y(g.timing.easing,k=>$.getPropertyValue(k)):"linear";x=CSS.supports("animation-timing-function",x)?x:"linear";const S={easing:x,fill:g.timing.fill},b=g.timing.rangeStart?je(g.timing.rangeStart,h,f,u):void 0;let p=g.timing.rangeEnd?je(g.timing.rangeEnd,h,f,u):void 0;const w=g.keyframes.map(k=>{const I={offset:k.offset};for(const[P,N]of Object.entries(k.styles)){if(P.startsWith("--")){const K=getComputedStyle(h).getPropertyValue(P)||"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:K,name:P})}catch(_){_ instanceof DOMException&&_.name==="InvalidModificationError"||console.error(`Property registration error property="${P}" value="${K}"`,_)}I[P]=V(N);continue}I[Ze(P)]=V(N)}return I});let v;const C=g.timing.duration===void 0?void 0:Oe(Y(V(g.timing.duration),k=>$.getPropertyValue(k))),F=g.timing.delay===void 0?void 0:Oe(Y(V(g.timing.delay),k=>$.getPropertyValue(k))),T=g.timing.iterations===void 0?void 0:g.timing.iterations==="infinite"?1/0:g.timing.iterations,E={...S,delay:F};let W=w;const R=It(e,`${g.name??"-"}`,f);if(C!==void 0)if(p=b,o)E.fill==="both"&&(E.fill="backwards"),E.fill==="forwards"&&(E.fill="none");else{E.fill==="backwards"&&(E.fill="both"),E.fill==="none"&&(E.fill="forwards");const k=Ee(w),I=w.filter((P,N)=>k[N]===0);W=[...I.map(P=>({...P,offset:0})),...I.map(P=>({...P,offset:1}))]}const q=C!==void 0?k=>{k.addEventListener("finish",()=>{o||k.cancel();const I=le(h,r)(w,{...S,duration:C,delay:F,iterations:T,id:R});if(l.push(()=>{I?.cancel()}),!o)return;const P=n.type==="scroll"?document.scrollingElement:n.type==="view"&&n.subject?Me(n.subject,h):me(d.get(h.id)??h);if(P==null)return;const N=oe("nearest",P);if(N==null)return;const K=N===document.scrollingElement?document:N,_=n.axis??"block",ge=_==="block"||_==="y";let ve=ge?N.scrollTop:N.scrollLeft;const ye=()=>{const we=ge?N.scrollTop:N.scrollLeft;we<ve&&(I?.cancel(),K.removeEventListener("scroll",ye)),ve=we};K.addEventListener("scroll",ye,{signal:m.signal,passive:!0})},{signal:m.signal})}:()=>{};y(h)?(v=le(h,r)([],{...E,timeline:A,rangeStart:b,rangeEnd:p,duration:1,id:R}),C!==void 0&&v!==void 0&&l.push(Nt(v)),v!==void 0&&q(v)):Ct(h)?(v=le(h,r)(w,{easing:"linear",fill:"both",duration:1e3,id:R}),v?.pause()):(v=le(h,r)(W,{...E,timeline:A,rangeStart:b,rangeEnd:p,duration:1,id:R}),v&&q(v),f++),l.push(()=>{v?.cancel()})}}return()=>{l.forEach(h=>h())}},[n,e,o,s,r])},Ve=({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=ft(a.keyframes);if(c!==void 0)for(const[u,m]of Object.entries(c))s.set(u,V(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
|
-
`)},Rt=
|
|
54
|
+
`,z(G,{children:[M("style",{dangerouslySetInnerHTML:{__html:r}}),M("noscript",{children:M("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=H(({debug:e=!1,children:n,action:t,[tt]:o,...r},i)=>{const s=ee(),a=ie(s),[c,u]=j(0),[m,l]=j(0),f=O(t?.isPinned),{renderer:d,breakpoints:y,onError:h}=te(ne),g=O(y);L(()=>{const p=new AbortController;return document.addEventListener("visibilitychange",()=>{document.visibilityState==="visible"&&u(w=>w+1)},{signal:p.signal,once:!0}),()=>{p.abort()}},[]),L(()=>{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 w=ke(p);const v=new MutationObserver(()=>{const C=ke(p);C.symmetricDifference(w).size!==0&&(u(F=>F+1),w=C)});return v.observe(p,{childList:!0,subtree:!0,characterData:!0}),()=>{v.disconnect()}},[a,d]),L(()=>{if(d===void 0)return;const p=new AbortController;return window.addEventListener("resize",()=>{u(w=>w+1)},{signal:p.signal}),()=>{p.abort()}},[a,d]),L(()=>{t?.isPinned!==f.current&&(f.current=t?.isPinned,t!=null&&t.isPinned&&(l(p=>p+1),u(p=>p+1)))},[t?.isPinned]),L(()=>{d!==void 0&&g.current===y&&(g.current=y,u(p=>p+1))},[y,d]),L(()=>{const p=Fe(a),w=document.querySelector(p);if(w===null){console.error(`Element with selector ${p} not found`);return}const v=new MutationObserver(C=>{const F=new Set;C.forEach(T=>{T.type==="childList"&&(T.addedNodes.forEach(E=>{E instanceof HTMLElement&&E.tagName==="STYLE"||E instanceof HTMLElement&&E.tagName==="NOSCRIPT"||F.add(E)}),T.removedNodes.forEach(E=>{F.delete(E)}))}),F.size>0&&u(T=>T+1)});return v.observe(w,{childList:!0,subtree:!1}),d!==void 0&&w.parentElement!==null&&v.observe(w.parentElement,{childList:!0,subtree:!1}),()=>{v.disconnect()}},[a,m,d]);const A=d==="canvas",$=A?(t?.isPinned??!1)||(o??!1):!0,x=d===void 0?!1:t?.debug??!1,S=d==="canvas"&&Q.count(n)===0,b=S?"Add the instances you want to animate.":n;return z(G,{children:[t&&$&&M(rt,{fallback:M(Ve,{id:a,action:t,reason:"Client Only"}),children:z(Ye,{fallback:M(Ve,{id:a,action:t,reason:"Suspense"}),children:[z(et,{fallback:null,onError:p=>{console.error("Polyfill loading error",p)},children:[M(st,{}),e&&M(lt,{}),d==="canvas"&&M(Lt,{})]}),M(Wt,{id:a,action:t,breakpoints:y,isCanvas:A,onError:h},`${c}`),x&&M(St,{selector:pe(a),getContent:qt},`${c}-debug`)]})}),Qe("div",{ref:i,[X]:a,...r,style:S?void 0:{display:"contents"},key:m},b)]})}),We=(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(y=>{r[m]=y.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()})}},Ht=e=>{let n;const t=()=>{e(),n=requestAnimationFrame(t)};return n=requestAnimationFrame(t),()=>{cancelAnimationFrame(n)}},_t=String.raw,he=H(({children:e,...n},t)=>{const o=O(null),r=O(null),i=ee(),s=ie(i),a=`${s}-sample`,[c]=j(()=>new Map),[u]=j(()=>_t`
|
|
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]=j(()=>(d,y)=>r.current?At(d,r.current,c,y):{}),[l]=j(()=>Se([])),[f]=j(()=>Se(!1));return
|
|
75
|
-
${ce(l)} span[${
|
|
74
|
+
`),[m]=j(()=>(d,y)=>r.current?At(d,r.current,c,y):{}),[l]=j(()=>Se([])),[f]=j(()=>Se(!1));return L(()=>{const d=document.querySelector(Te(s));if(d===null)return;let y=[],h=[],g=[];const A=()=>{if(!o.current||!r.current)return;const S=o.current.getAnimations(),b=!re(y,S);y=S;const p=S.map(T=>T.playState),w=!re(g,p);g=p,b&&c.clear();const v=r.current.getAnimations(),C=v?.map(T=>{var E,W;const R=S.filter(({id:N})=>N===T.id),q=R.findLast(N=>Ne(N)===!1)??R.at(-1);if(q===void 0)return;const k=(E=q.effect)==null?void 0:E.getTiming().fill,I=q.playState,P=(W=q.effect)==null?void 0:W.getComputedTiming().progress;return I==="running"&&(k==="backwards"||k==="both")&&P===null?0:Ne(q)?I==="running"?0:void 0:P??void 0})??void 0,F=!re(h,C);h=C,(b||F||w)&&l.set(C)};A();let $=()=>{};const x=We(S=>{$(),S&&($=Ht(A))},d,`${Math.round(Math.max(window.innerWidth/2,window.innerHeight/2))}px`);return()=>{x(),$()}},[l,s,c]),L(()=>{const d=document.querySelector(Te(s));if(d===null)return;const y=We(h=>{f.set(h)},d,"0px");return()=>{y()}},[f,s]),z(G,{children:[M("div",{ref:t,...$t(s),...n,children:e(l,f,m)}),M("style",{dangerouslySetInnerHTML:{__html:u}}),M("div",{id:s,ref:o,inert:"true",...Le}),M("div",{id:a,ref:r,inert:"true",...Le})]})}),zt=e=>e*e,Bt=e=>e*e*e,Dt=e=>e*e*e*e,Ut=e=>1-(1-e)*(1-e),Kt=e=>1-Math.pow(1-e,3),Qt=e=>1-Math.pow(1-e,4),Yt=e=>e<.5?2*e*e:1-2*(1-e)*(1-e),Jt=e=>3*e*e-2*e*e*e,Xt=e=>e<.5?8*e*e*e*e:1-8*Math.pow(1-e,4),Gt=e=>e,qe={linear:Gt,easeIn:zt,easeInCubic:Bt,easeInQuart:Dt,easeOut:Ut,easeOutCubic:Kt,easeOutQuart:Qt,ease:Yt,easeInOutCubic:Jt,easeInOutQuart:Xt},U="data-ws-text-animate",Re="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(U)?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(U,`${t++}`):d.setAttribute(Re,""),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[${U}]`),()=>{for(const s of e.querySelectorAll(`span[${U}], span[${Re}]`))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),He="data-ws-animate-text-id",ce=e=>`[${He}="${e}"]`,nn=(e,n)=>e.map(t=>t!==void 0?t*n:void 0),rn=H(({$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([]),y=O(r);y.current=r;const[h,g]=j(0),[A]=j(()=>`
|
|
75
|
+
${ce(l)} span[${U}] {
|
|
76
76
|
display: inline-block;
|
|
77
77
|
will-change: translate, scale, opacity;
|
|
78
78
|
}
|
|
79
79
|
|
|
80
|
-
${ce(l)} *:has(> span[${
|
|
80
|
+
${ce(l)} *:has(> span[${U}]) {
|
|
81
81
|
white-space-collapse: preserve;
|
|
82
82
|
}
|
|
83
|
-
`);return
|
|
83
|
+
`);return L(()=>{const $=document.querySelector(ce(l));if(!$)return;const[x,S]=Zt($,o);return f.current=x,d.current=[],S},[l,o,h]),L(()=>{const $=document.querySelector(ce(l));if(!$)return;const x=new MutationObserver(S=>{const b=new Set;let p=!1;S.forEach(w=>{w.type==="childList"&&(w.addedNodes.forEach(v=>{if(v instanceof HTMLElement&&v.isContentEditable){p=!0;return}b.add(v)}),w.removedNodes.forEach(v=>{if(b.has(v)){b.delete(v);return}b.add(v)}))}),!p&&b.size>0&&g(w=>w+1)});return x.observe($,{childList:!0,subtree:!0}),()=>{x.disconnect()}},[l,h]),L(()=>e.subscribe($=>{const x=f.current;if(x===void 0||x.length===0)return;const S=[];for(let b=0;b<x.length;b++){const p=x[b];if($.length===0){if(d.current[b]===void 0)continue;p.style.cssText="",d.current[b]=void 0;continue}const w=x.length+n-1,v=nn($,w),C=qe[t],F=v.map(W=>W===void 0?void 0:1-en(C,tn(W,0,w),n,b)),T=y.current(F,a),E=JSON.stringify(T);d.current[b]!==E&&(S.push([p,T]),d.current[b]=E)}for(const[b,p]of S){b.style.cssText="";for(const[w,v]of Object.entries(p))b.style.setProperty(w,v)}i?.()}),[l,e,n,t,i,a,h]),z(G,{children:[M("style",{dangerouslySetInnerHTML:{__html:A}}),M("div",{ref:u,[He]:l,...c,style:{display:"contents"},children:s},h)]})}),on={char:"",space:/( )/,'symbol "#"':/#/,'symbol "~"':/~/},_e=H(({charWindow:e=5,easing:n="linear",splitBy:t="char",children:o,...r},i)=>{const{renderer:s}=te(ne),a=s==="canvas"&&Q.count(o)===0?"Add content, and all text inside will be animated.":o;return M(he,{ref:i,...r,children:(c,u,m)=>M(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),ze="data-ws-staggering-animation-id",Be=e=>`[${ze}="${e}"]`,cn=(e,n)=>e.map(t=>t!==void 0?t*n:void 0),un=H(({$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[y,h]=j(0),g=O([]);return L(()=>{const A=document.querySelector(Be(m));if(!A)return;const $=Array.from(A.children).filter(x=>x instanceof HTMLElement);l.current=$,f.current=[]},[m,y]),L(()=>{const A=document.querySelector(Be(m));if(!A)return;const $=100,x=1e3;if((()=>{const b=Date.now();for(g.current.push(b);g.current.length>0&&g.current[0]<b-x;)g.current.shift();return g.current.length>$?(console.error(`[StaggerAnimation] Update loop detected: ${g.current.length} Updates in ${x}ms. This usually indicates a component (like Radix UI) is continuously modifying the DOM.`),!0):!1})())return;const S=new MutationObserver(b=>{const p=new Set;let w=!1;b.forEach(v=>{v.type==="childList"&&(v.addedNodes.forEach(C=>{if(C instanceof HTMLElement&&C.isContentEditable){w=!0;return}p.add(C)}),v.removedNodes.forEach(C=>{if(p.has(C)){p.delete(C);return}p.add(C)}))}),!w&&p.size>0&&h(v=>v+1)});return S.observe(A,{childList:!0,subtree:!1}),()=>{S.disconnect()}},[m,y]),L(()=>e.subscribe(A=>{const $=l.current;if($===void 0||$.length===0)return;const x=[];for(let S=0;S<$.length;S++){const b=$[S];if(A.length===0){if(f.current[S]===void 0)continue;b.style.cssText="",f.current[S]=void 0;continue}const p=$.length+n-1,w=cn(A,p),v=qe[t],C=w.map(E=>E===void 0?void 0:1-an(v,ln(E,0,p),n,S)),F=d.current(C,s),T=JSON.stringify(F);f.current[S]!==T&&(x.push([b,F]),f.current[S]=T)}for(const[S,b]of x){S.style.cssText="";for(const[p,w]of Object.entries(b))S.style.setProperty(p,w)}r?.()}),[m,e,n,t,r,s,y]),M("div",{ref:c,[ze]:m,...a,style:{display:"contents"},children:i},y)}),De=H(({charWindow:e=1,easing:n="linear",children:t,...o},r)=>{const{renderer:i}=te(ne),s=i==="canvas"&&Q.count(t)===0?"Add children.":t;return M(he,{ref:r,...o,children:(a,c,u)=>M(un,{$progress:a,getStylesAt:u,slidingWindow:e,easing:n,children:s})})}),dn="StaggerAnimation";De.displayName=dn;const mn=({$progress:e,$visible:n,$timeline:t,children:o})=>{const[r]=j(()=>nt([e],i=>i[0]));return Q.map(o,i=>Xe(i)?Ge(i,{$progress:r,$visible:n,$timeline:t}):i)},fn=()=>H(({children:e,timeline:n,...t},o)=>{const{renderer:r}=te(ne),i=r==="canvas"&&Q.count(e)===0?"Add children.":e;return M(he,{ref:o,...t,children:(s,a)=>M(mn,{$progress:s,$timeline:n,$visible:a,children:i})})}),Ue=fn(),pn="VideoAnimation";Ue.displayName=pn;export{Rt as AnimateChildren,_e as AnimateText,De as StaggerAnimation,Ue as VideoAnimation};
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
+
import { type ComponentPropsWithoutRef } from "react";
|
|
1
2
|
type ProgressAnimationProps<T extends Record<string, unknown> = {}> = {
|
|
2
3
|
children: React.ReactNode;
|
|
3
|
-
} & T;
|
|
4
|
+
} & ComponentPropsWithoutRef<"div"> & T;
|
|
4
5
|
export declare const createProgressAnimation: <T extends Record<string, unknown>>() => import("react").ForwardRefExoticComponent<import("react").PropsWithoutRef<ProgressAnimationProps<T>> & import("react").RefAttributes<HTMLDivElement>>;
|
|
5
6
|
export {};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export declare const VideoAnimation: import("react").ForwardRefExoticComponent<{
|
|
2
2
|
children: React.ReactNode;
|
|
3
|
-
} & {
|
|
3
|
+
} & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
|
|
4
4
|
timeline?: boolean;
|
|
5
5
|
} & import("react").RefAttributes<HTMLDivElement>>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@webstudio-is/sdk-components-animation",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.275.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/
|
|
48
|
-
"@webstudio-is/
|
|
49
|
-
"@webstudio-is/
|
|
50
|
-
"@webstudio-is/sdk": "0.
|
|
47
|
+
"@webstudio-is/css-engine": "0.275.0",
|
|
48
|
+
"@webstudio-is/icons": "0.275.0",
|
|
49
|
+
"@webstudio-is/react-sdk": "0.275.0",
|
|
50
|
+
"@webstudio-is/sdk": "0.275.0"
|
|
51
51
|
},
|
|
52
52
|
"devDependencies": {
|
|
53
53
|
"@types/react": "^18.2.70",
|
|
@@ -59,19 +59,19 @@
|
|
|
59
59
|
"react-dom": "18.3.0-canary-14898b6a9-20240318",
|
|
60
60
|
"type-fest": "^4.37.0",
|
|
61
61
|
"vitest": "^3.1.2",
|
|
62
|
-
"zod": "^
|
|
63
|
-
"@webstudio-is/css-data": "0.
|
|
64
|
-
"@webstudio-is/design-system": "0.0.0",
|
|
62
|
+
"zod": "^4.4.3",
|
|
63
|
+
"@webstudio-is/css-data": "0.275.0",
|
|
65
64
|
"@webstudio-is/generate-arg-types": "0.0.0",
|
|
66
65
|
"@webstudio-is/sdk-cli": "^0.94.0",
|
|
67
|
-
"@webstudio-is/sdk-components-react": "0.
|
|
68
|
-
"@webstudio-is/template": "0.
|
|
66
|
+
"@webstudio-is/sdk-components-react": "0.275.0",
|
|
67
|
+
"@webstudio-is/template": "0.275.0",
|
|
68
|
+
"@webstudio-is/design-system": "0.0.0",
|
|
69
69
|
"@webstudio-is/tsconfig": "1.0.7"
|
|
70
70
|
},
|
|
71
71
|
"scripts": {
|
|
72
72
|
"build": "vite build && esbuild './lib/*' --outdir=./lib --minify --allow-overwrite --banner:js='//! SPDX-License-Identifier: LicenseRef-Webstudio,Inc-Proprietary'",
|
|
73
73
|
"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\"",
|
|
74
|
-
"build:stories": "webstudio
|
|
74
|
+
"build:stories": "tsx --conditions=webstudio src/generate-stories.ts && prettier --write \"src/__generated__/*.stories.tsx\"",
|
|
75
75
|
"dts": "tsc --project tsconfig.dts.json",
|
|
76
76
|
"typecheck": "tsgo --noEmit -p tsconfig.typecheck.json",
|
|
77
77
|
"test": "vitest run",
|