@ssgoi/core 6.3.0 → 6.4.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 +48 -43
- package/dist/index.cjs +1 -1
- package/dist/index.js +1 -1
- package/dist/internal.cjs +1 -1
- package/dist/internal.d.ts +1 -0
- package/dist/internal.d.ts.map +1 -1
- package/dist/internal.js +366 -321
- package/dist/ssgoi-transition/create-ssgoi-transition-context.d.ts.map +1 -1
- package/dist/ssgoi-transition/observe-ssgoi-transitions.d.ts +3 -0
- package/dist/ssgoi-transition/observe-ssgoi-transitions.d.ts.map +1 -0
- package/dist/transitions/axis/index.d.ts +3 -3
- package/dist/transitions/axis/index.d.ts.map +1 -1
- package/dist/transitions/drill/index.d.ts +3 -3
- package/dist/transitions/drill/index.d.ts.map +1 -1
- package/dist/transitions/sheet/index.d.ts +3 -3
- package/dist/transitions/sheet/index.d.ts.map +1 -1
- package/dist/transitions/utils.d.ts +1 -1
- package/dist/transitions/utils.d.ts.map +1 -1
- package/dist/transitions/zoom/transition.d.ts.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -33,31 +33,27 @@ npm install @ssgoi/svelte
|
|
|
33
33
|
#### 1. Wrap your app
|
|
34
34
|
|
|
35
35
|
```tsx
|
|
36
|
-
import { Ssgoi } from
|
|
37
|
-
import { fade } from
|
|
36
|
+
import { Ssgoi } from "@ssgoi/react";
|
|
37
|
+
import { fade } from "@ssgoi/react/view-transitions";
|
|
38
38
|
|
|
39
39
|
export default function App() {
|
|
40
40
|
return (
|
|
41
|
-
<Ssgoi config={{ transitions: fade({ paths: [
|
|
42
|
-
<div style={{ position:
|
|
43
|
-
{/* Your app */}
|
|
44
|
-
</div>
|
|
41
|
+
<Ssgoi config={{ transitions: fade({ paths: ["/", "/about"] }) }}>
|
|
42
|
+
<div style={{ position: "relative" }}>{/* Your app */}</div>
|
|
45
43
|
</Ssgoi>
|
|
46
44
|
);
|
|
47
45
|
}
|
|
48
46
|
```
|
|
49
47
|
|
|
50
|
-
#### 2.
|
|
48
|
+
#### 2. Mark your pages
|
|
51
49
|
|
|
52
50
|
```tsx
|
|
53
|
-
import { SsgoiTransition } from '@ssgoi/react';
|
|
54
|
-
|
|
55
51
|
export default function HomePage() {
|
|
56
52
|
return (
|
|
57
|
-
<
|
|
53
|
+
<main data-ssgoi-transition="/">
|
|
58
54
|
<h1>Welcome</h1>
|
|
59
55
|
{/* Page content */}
|
|
60
|
-
</
|
|
56
|
+
</main>
|
|
61
57
|
);
|
|
62
58
|
}
|
|
63
59
|
```
|
|
@@ -74,15 +70,19 @@ Define different transitions for different routes:
|
|
|
74
70
|
const config = {
|
|
75
71
|
transitions: [
|
|
76
72
|
// Scroll between tabs
|
|
77
|
-
{ from:
|
|
78
|
-
{ from:
|
|
79
|
-
|
|
73
|
+
{ from: "/home", to: "/about", transition: scroll({ direction: "up" }) },
|
|
74
|
+
{ from: "/about", to: "/home", transition: scroll({ direction: "down" }) },
|
|
75
|
+
|
|
80
76
|
// Drill in when entering details
|
|
81
|
-
{
|
|
82
|
-
|
|
77
|
+
{
|
|
78
|
+
from: "/products",
|
|
79
|
+
to: "/products/*",
|
|
80
|
+
transition: drill({ direction: "enter" }),
|
|
81
|
+
},
|
|
82
|
+
|
|
83
83
|
// Pinterest-style image transitions
|
|
84
|
-
{ from:
|
|
85
|
-
]
|
|
84
|
+
{ from: "/gallery", to: "/photo/*", transition: pinterest() },
|
|
85
|
+
],
|
|
86
86
|
};
|
|
87
87
|
```
|
|
88
88
|
|
|
@@ -93,7 +93,7 @@ Automatically create bidirectional transitions:
|
|
|
93
93
|
```tsx
|
|
94
94
|
{
|
|
95
95
|
from: '/home',
|
|
96
|
-
to: '/about',
|
|
96
|
+
to: '/about',
|
|
97
97
|
transition: scroll({ direction: 'up' }),
|
|
98
98
|
symmetric: true // Automatically creates reverse transition
|
|
99
99
|
}
|
|
@@ -104,16 +104,18 @@ Automatically create bidirectional transitions:
|
|
|
104
104
|
Animate specific elements during mount/unmount:
|
|
105
105
|
|
|
106
106
|
```tsx
|
|
107
|
-
import { transition } from
|
|
108
|
-
import { fade, slide } from
|
|
107
|
+
import { transition } from "@ssgoi/react";
|
|
108
|
+
import { fade, slide } from "@ssgoi/react/transitions";
|
|
109
109
|
|
|
110
110
|
function Card() {
|
|
111
111
|
return (
|
|
112
|
-
<div
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
112
|
+
<div
|
|
113
|
+
ref={transition({
|
|
114
|
+
key: "card",
|
|
115
|
+
in: fade(),
|
|
116
|
+
out: slide({ direction: "up" }),
|
|
117
|
+
})}
|
|
118
|
+
>
|
|
117
119
|
<h2>Animated Card</h2>
|
|
118
120
|
</div>
|
|
119
121
|
);
|
|
@@ -123,6 +125,7 @@ function Card() {
|
|
|
123
125
|
## Built-in Transitions
|
|
124
126
|
|
|
125
127
|
### Page Transitions
|
|
128
|
+
|
|
126
129
|
- `fade` - Smooth opacity transition
|
|
127
130
|
- `scroll` - Vertical scrolling (up/down)
|
|
128
131
|
- `drill` - Drill in/out effect (enter/exit)
|
|
@@ -130,6 +133,7 @@ function Card() {
|
|
|
130
133
|
- `pinterest` - Pinterest-style expand effect
|
|
131
134
|
|
|
132
135
|
### Element Transitions
|
|
136
|
+
|
|
133
137
|
- `fade` - Fade in/out
|
|
134
138
|
- `scale` - Scale in/out
|
|
135
139
|
- `slide` - Slide (direction: up/down/left/right)
|
|
@@ -144,17 +148,19 @@ function Card() {
|
|
|
144
148
|
|
|
145
149
|
```tsx
|
|
146
150
|
// app/layout.tsx
|
|
147
|
-
import { Ssgoi } from
|
|
148
|
-
import { scroll } from
|
|
151
|
+
import { Ssgoi } from "@ssgoi/react";
|
|
152
|
+
import { scroll } from "@ssgoi/react/view-transitions";
|
|
149
153
|
|
|
150
154
|
export default function RootLayout({ children }) {
|
|
151
155
|
return (
|
|
152
156
|
<html>
|
|
153
157
|
<body>
|
|
154
|
-
<Ssgoi
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
+
<Ssgoi
|
|
159
|
+
config={{
|
|
160
|
+
transitions: scroll({ paths: ["/", "/about"] }),
|
|
161
|
+
}}
|
|
162
|
+
>
|
|
163
|
+
<div style={{ position: "relative", minHeight: "100vh" }}>
|
|
158
164
|
{children}
|
|
159
165
|
</div>
|
|
160
166
|
</Ssgoi>
|
|
@@ -163,15 +169,8 @@ export default function RootLayout({ children }) {
|
|
|
163
169
|
);
|
|
164
170
|
}
|
|
165
171
|
|
|
166
|
-
// app/page.tsx
|
|
167
|
-
import { SsgoiTransition } from '@ssgoi/react';
|
|
168
|
-
|
|
169
172
|
export default function Page() {
|
|
170
|
-
return
|
|
171
|
-
<SsgoiTransition id="/">
|
|
172
|
-
{/* Your page content */}
|
|
173
|
-
</SsgoiTransition>
|
|
174
|
-
);
|
|
173
|
+
return <main data-ssgoi-transition="/">{/* Your page content */}</main>;
|
|
175
174
|
}
|
|
176
175
|
```
|
|
177
176
|
|
|
@@ -192,23 +191,24 @@ export default function Page() {
|
|
|
192
191
|
|
|
193
192
|
<!-- +page.svelte -->
|
|
194
193
|
<script>
|
|
195
|
-
import { SsgoiTransition } from '@ssgoi/svelte';
|
|
196
194
|
import { page } from '$app/stores';
|
|
197
195
|
</script>
|
|
198
196
|
|
|
199
|
-
<
|
|
197
|
+
<main data-ssgoi-transition={$page.url.pathname}>
|
|
200
198
|
<!-- Your page content -->
|
|
201
|
-
</
|
|
199
|
+
</main>
|
|
202
200
|
```
|
|
203
201
|
|
|
204
202
|
## Why SSGOI?
|
|
205
203
|
|
|
206
204
|
### vs View Transition API
|
|
205
|
+
|
|
207
206
|
- ✅ Works in all browsers, not just Chrome
|
|
208
207
|
- ✅ More animation options with spring physics
|
|
209
208
|
- ✅ Better developer experience
|
|
210
209
|
|
|
211
210
|
### vs Other Animation Libraries
|
|
211
|
+
|
|
212
212
|
- ✅ Built specifically for page transitions
|
|
213
213
|
- ✅ SSR-first design
|
|
214
214
|
- ✅ No router lock-in
|
|
@@ -230,17 +230,21 @@ All powered by a spring physics engine for natural, smooth motion.
|
|
|
230
230
|
Try out SSGOI with our framework-specific demo applications:
|
|
231
231
|
|
|
232
232
|
### React Demo
|
|
233
|
+
|
|
233
234
|
```bash
|
|
234
235
|
pnpm react-demo:dev
|
|
235
236
|
# Opens at http://localhost:3001
|
|
236
237
|
```
|
|
238
|
+
|
|
237
239
|
Explore Next.js App Router integration with various transition effects.
|
|
238
240
|
|
|
239
241
|
### Svelte Demo
|
|
242
|
+
|
|
240
243
|
```bash
|
|
241
244
|
pnpm svelte-demo:dev
|
|
242
245
|
# Opens at http://localhost:5174
|
|
243
246
|
```
|
|
247
|
+
|
|
244
248
|
See SvelteKit integration with smooth page transitions.
|
|
245
249
|
|
|
246
250
|
Visit the `/apps` directory to explore the demo source code and learn how to implement SSGOI in your own projects.
|
|
@@ -248,6 +252,7 @@ Visit the `/apps` directory to explore the demo source code and learn how to imp
|
|
|
248
252
|
## Documentation
|
|
249
253
|
|
|
250
254
|
Visit [https://ssgoi.dev](https://ssgoi.dev) for:
|
|
255
|
+
|
|
251
256
|
- Detailed API reference
|
|
252
257
|
- Interactive examples
|
|
253
258
|
- Framework integration guides
|
package/dist/index.cjs
CHANGED
|
@@ -32,4 +32,4 @@
|
|
|
32
32
|
${t.left+t.width}px ${t.top}px,
|
|
33
33
|
${t.left+t.width}px ${t.top+t.height}px,
|
|
34
34
|
${t.left}px ${t.top+t.height}px
|
|
35
|
-
)`}function X(e,t,n,o,s){const i=n/1e3;return new h.WebAnimation({element:e,integrator:new Ut({durationSec:i}),lowerBound:0,upperBound:1,style:r=>o(Re(t,r)),onComplete:s})}const Ve=(e={})=>{var s;const t=((s=e.border)==null?void 0:s.color)??We,n=He,o=e.physics;return{prepare:({from:i,to:r,context:l})=>{const c=_(l,"from"),a=_(l,"to"),p=O(document.body,l.positionedParent),f=Xe(t,{...c,top:p.top});for(const d of["topLeft","topRight","bottomLeft","bottomRight"])l.positionedParent.appendChild(f[d]);return i.then(d=>{mt(d,c),ht(d,c),d.style.transform=`translateY(${-c.top}px)`}),r.then(d=>{mt(d,a),ht(d,a),d.style.transform=`translateY(${-a.top+a.height}px) scale(${n})`}),{borders:f,fromRect:c,toRect:a}},animation:({from:i,to:r,context:l,borders:c,fromRect:a,toRect:p})=>{const f=dt({rect:a,scale:n,direction:"out",override:o}),d=dt({rect:p,scale:n,direction:"in",override:o}),y=X(i,f.snapshots,f.totalDuration,w=>({transform:`translateY(${w.translateY}px) scale(${w.scale})`}),()=>{i.style.clipPath="",i.style.transformOrigin=""}),m=X(r,d.snapshots,d.totalDuration,w=>({transform:`translateY(${w.translateY}px) scale(${w.scale})`}),()=>{r.style.clipPath="",r.style.transformOrigin="",r.style.transform=""}),u=ze.map(([w,E],x)=>{const T=["topLeft","topRight","bottomLeft","bottomRight"][x];return X(c[T],f.snapshots,f.totalDuration,A=>{const C=(a.width-a.width*A.scale)/2*.7*w,M=(a.height-a.height*A.scale)/2*.7*E;return{transform:`translate(${C}px, ${M}px)`}})}),b=new h.MultiAnimation([y,m,...u],{mode:"parallel"}),$=b.onComplete;return b.onComplete=()=>{$==null||$();const w=l.positionedParent;for(const E of["topLeft","topRight","bottomLeft","bottomRight"]){const x=c[E];x.parentElement===w&&w.removeChild(x)}},b}}};function Be(e){const{paths:t,options:n}=e,o=(n==null?void 0:n.borderColor)!==void 0?{border:{color:n.borderColor}}:void 0;return P(t,()=>Ve(o))}const ut="data-hero-enter-key",yt="data-hero-exit-key",V="data-hero-key";class Ze{prepare(t){t.from.then(n=>{n.style.opacity="0"})}}const qe=()=>new Ze;class je{contribute(t){const{from:n,to:o,physics:s,onComplete:i}=t,r=n.style.opacity,l=o.style.opacity,c=n.style.willChange,a=o.style.willChange;return o.style.opacity="0",n.style.willChange="opacity",o.style.willChange="opacity",i(()=>{n.style.opacity=r,o.style.opacity=l,n.style.willChange=c,o.style.willChange=a}),[new h.WebAnimation({element:n,integrator:g.from(s),style:(p,f)=>({opacity:f})}),new h.WebAnimation({element:o,integrator:g.from(s),style:p=>({opacity:p})})]}}const Ke=()=>new je,Ge={static:qe,fade:Ke},Je={spring:{stiffness:320,damping:30}},Qe=()=>Je,tn={spring:{stiffness:300,damping:30,doubleSpring:1}},en=()=>tn,nn={default:Qe,smooth:en},on=700,sn="data-hero-aspect-ratio",rn="data-hero-radius";function an(e){if(!e)return null;if(e.includes("/")){const[n,o]=e.split("/"),s=parseFloat(n??""),i=parseFloat(o??"");return!Number.isFinite(s)||!Number.isFinite(i)||s<=0||i<=0?null:s/i}const t=parseFloat(e);return Number.isFinite(t)&&t>0?t:null}function gt(e){const t=e.getAttribute(rn);if(!t)return 0;const n=parseFloat(t);return Number.isFinite(n)&&n>0?n:0}function L(e){return e.left+e.width/2}function k(e){return e.top+e.height/2}function ln(e,t){return{top:Math.max(0,t.top-e.top),right:Math.max(0,e.left+e.width-(t.left+t.width)),bottom:Math.max(0,e.top+e.height-(t.top+t.height)),left:Math.max(0,t.left-e.left)}}function cn(e,t,n){const o=e.width/e.height;let s,i;return n==="contain"?o>t?(i=e.height,s=i*t):(s=e.width,i=s/t):o>t?(s=e.width,i=s/t):(i=e.height,s=i*t),{left:e.left+(e.width-s)/2,top:e.top+(e.height-i)/2,width:s,height:i}}function bt(e,t,n){const o=O(e,t),s=an(t.getAttribute(sn));if(s===null)return{bbox:o,content:o,window:o,clipInset:{top:0,right:0,bottom:0,left:0}};const i=cn(o,s,n),r=n==="cover"?o:i;return{bbox:o,content:i,window:r,clipInset:ln(i,r)}}function pn(e,t,n,o){const s=n.width/o,i=n.height/o,r=e.width/2+(L(n)-L(t))/o-s/2,l=e.height/2+(k(n)-k(t))/o-i/2;return{top:Math.max(0,l),right:Math.max(0,e.width-r-s),bottom:Math.max(0,e.height-l-i),left:Math.max(0,r)}}function v(e,t){const n=new Map,o=e.querySelectorAll(`[${t}]`);for(const s of Array.from(o)){const i=s.getAttribute(t);i&&(n.has(i)||n.set(i,s))}return n}function fn(e,t){const n=[],o=v(t,ut),s=v(e,yt);for(const[l,c]of o){const a=s.get(l);a&&n.push({key:l,fromEl:a,toEl:c,fromFit:"cover",toFit:"contain"})}const i=v(e,ut),r=v(t,yt);for(const[l,c]of i){const a=r.get(l);a&&n.push({key:l,fromEl:c,toEl:a,fromFit:"contain",toFit:"cover"})}return n}function dn(e,t){const n=[],o=Array.from(t.querySelectorAll(`[${V}]`));for(const s of o){const i=s.getAttribute(V);if(!i)continue;const r=e.querySelector(`[${V}="${i}"]`);r&&n.push({key:i,fromEl:r,toEl:s,fromFit:"contain",toFit:"contain"})}return n}function mn(e,t){const n=fn(e,t);return n.length>0?n:dn(e,t)}function hn(e,t,n){const{fromEl:o,toEl:s}=t,i=bt(e,o,t.fromFit),r=bt(e,s,t.toFit),l=i.content,c=i.window,a=r.content,p=r.window,f=r.clipInset,d=gt(o),y=gt(s);if(l.width===0||l.height===0||c.width===0||c.height===0||a.width===0||a.height===0||p.width===0||p.height===0)return null;const m=Math.max(l.width/a.width,l.height/a.height),u=L(l),b=k(l),$=L(a),w=k(a),E=u-$,x=b-w;if(Math.abs(x)>n)return null;const T=pn(a,l,c,m);return{toContent:a,hasRadius:d>0||y>0,styleFor:(A,C)=>{const M=C*E,_t=C*x,G=A+C*m,Tt=(d*C+y*A)/G,Dt=T.top*C+f.top*A,It=T.right*C+f.right*A,Ot=T.bottom*C+f.bottom*A,vt=T.left*C+f.left*A;return{transform:`translate(${M}px, ${_t}px) scale(${G})`,clipPath:`inset(${Dt}px ${It}px ${Ot}px ${vt}px round ${Tt}px)`}}}}function un(e,t){e.style.transform=t.transform,e.style.clipPath=t.clipPath}class yn{contribute(t){const{resolved:n,physics:o,positionedParent:s,maxDistance:i,onComplete:r}=t,l=[];for(const c of n.pairs){const{fromEl:a,toEl:p}=c,f=hn(s,c,i);if(!f)continue;const d=p.cloneNode(!0);d.style.position="absolute",d.style.left=`${f.toContent.left}px`,d.style.top=`${f.toContent.top}px`,d.style.width=`${f.toContent.width}px`,d.style.height=`${f.toContent.height}px`,d.style.margin="0",d.style.transformOrigin="center center",d.style.zIndex="1000",d.style.willChange="transform, clip-path",d.style.pointerEvents="none",d.style.maxWidth="none",d.style.maxHeight="none",f.hasRadius&&(d.style.borderRadius="0"),un(d,f.styleFor(0,1)),s.appendChild(d);const y=a.style.opacity,m=p.style.opacity;a.style.opacity="0",p.style.opacity="0",r(()=>{a.style.opacity=y,p.style.opacity=m,d.parentElement&&d.parentElement.removeChild(d)}),l.push(new h.WebAnimation({element:d,integrator:g.from(o),style:f.styleFor}))}return l}}function gn(e){return[new yn,Ge[e.type]()]}const bn=e=>{const t=gn(e),n=nn[e.variant](),o=on;return{prepare:s=>{var l;const i=Promise.all([s.from,s.to]).then(([c,a])=>({pairs:mn(c,a)})),r={from:s.from,to:s.to,resolved:i};for(const c of t)(l=c.prepare)==null||l.call(c,r);return i.then(c=>({resolved:c}))},animation:({from:s,to:i,context:r,resolved:l})=>{if(l.pairs.length===0)return new h.MultiAnimation([],{mode:"parallel"});const c=[],a=m=>{c.push(m)},p={from:s,to:i,resolved:l,physics:n,positionedParent:r.positionedParent,maxDistance:o,onComplete:a},f=[];for(const m of t)m.contribute&&f.push(...m.contribute(p));if(f.length===0)return new h.MultiAnimation([],{mode:"parallel"});const d=new h.MultiAnimation(f,{mode:"parallel"}),y=d.onComplete;return d.onComplete=()=>{y==null||y();for(const m of c)try{m()}catch(u){console.error("[hero] cleanup error",u)}},d}}};function wn(e){const{paths:t}=e,n=e.type??"static",o=e.variant??"default";return P(t,()=>bn({type:n,variant:o}))}const Sn={spring:{stiffness:50,damping:30}},$n={spring:{stiffness:80,damping:25}},En=(e={})=>{const t=e.physics??Sn,n=e.initialRotation??45,o=e.initialScale??.01,s=e.rotationTriggerPoint??.8;return{prepare:({from:i,to:r,context:l})=>(i.then(c=>{c.style.opacity="1"}),r.then(c=>{const a=_(l,"to"),p=Math.min(a.width,a.height)*.4;c.style.setProperty("--max-border-radius",`${p}px`),c.style.setProperty("--border-radius-scale","1"),c.style.willChange="transform",c.style.backfaceVisibility="hidden";const f=a.left+a.width/2,d=a.top+a.height/2;c.style.transformOrigin=`${f}px ${d}px`,c.style.position="fixed",c.style.top=`${a.top}px`,c.style.left=`${a.left}px`,c.style.width=`${a.width}px`,c.style.height=`${a.height}px`,c.style.zIndex="1000",c.style.overflow="hidden",c.style.transform=`rotate(${n}deg) scale(${o}) translateZ(0)`,c.style.borderRadius="calc(var(--max-border-radius) * var(--border-radius-scale))",c.style.opacity="1"}),{}),animation:({from:i,to:r})=>{const l=new h.WebAnimation({element:i,integrator:g.from($n),style:(a,p)=>({opacity:p})}),c=new h.WebAnimation({element:r,integrator:g.from(t),style:a=>{let p;if(a<=.05)p=o;else if(a<=s){const m=(a-.05)/(s-.05),u=Math.pow(m,9);p=o+(.8-o)*u}else{const m=(a-s)/(1-s);p=.8+.2*(1-Math.pow(1-m,3))}const f=.7;let d;if(a<=f)d=n;else{const m=(a-f)/(1-f),u=1-Math.pow(1-m,2);d=n*(1-u)}let y;if(a<=f)y=1;else{const m=(a-f)/(1-f);y=1-Math.pow(m,.5)}return{transform:`rotate(${d.toFixed(2)}deg) scale(${p.toFixed(4)}) translateZ(0)`,"--border-radius-scale":y.toFixed(4)}},onComplete:()=>{r.style.willChange="",r.style.backfaceVisibility="",r.style.removeProperty("--max-border-radius"),r.style.removeProperty("--border-radius-scale"),r.style.transform="",r.style.transformOrigin="",r.style.position="",r.style.zIndex="",r.style.top="",r.style.left="",r.style.width="",r.style.height="",r.style.overflow="",r.style.borderRadius=""}});return new h.MultiAnimation([l,c],{mode:"parallel"})}}};function xn(e){const{paths:t}=e;return P(t,()=>En())}const Cn={spring:{stiffness:100,damping:30}},An=(e={})=>{const t=e.physics??Cn;return{prepare:({from:n,to:o})=>(n.then(s=>{s.style.transformOrigin="center center",s.style.willChange="transform, opacity"}),o.then(s=>{s.style.opacity="0",s.style.transform="rotate(-180deg)",s.style.transformOrigin="center center",s.style.willChange="transform, opacity"}),{}),animation:({from:n,to:o})=>{const s=new h.WebAnimation({element:n,integrator:g.from(t),style:r=>({transform:`rotate(${r*180}deg)`,opacity:r<.5?1:0})}),i=new h.WebAnimation({element:o,integrator:g.from(t),style:(r,l)=>({transform:`rotate(${-l*180}deg)`,opacity:r>.5?1:0}),onComplete:()=>{o.style.willChange="auto",o.style.transform="",o.style.transformOrigin="",o.style.opacity=""}});return new h.MultiAnimation([s,i],{mode:"parallel"})}}};function Pn(e){const{paths:t}=e;return P(t,()=>An())}const _n={spring:{stiffness:20,damping:8,doubleSpring:1,restDelta:.001,restSpeed:.001}},wt=(e={})=>{const t=e.direction??"up",n=e.physics??_n,o=t==="up";return{prepare:({from:s,to:i})=>(s.then(r=>{r.style.zIndex=o?"-1":"1",r.style.willChange="transform",r.style.backfaceVisibility="hidden",r.style.contain="layout paint",r.style.pointerEvents="none"}),i.then(r=>{r.style.willChange="transform",r.style.backfaceVisibility="hidden",r.style.contain="layout paint"}),{}),animation:({from:s,to:i})=>{const r=s.offsetHeight,l=i.offsetHeight,c=window.innerHeight,a=Math.max(Math.min(r,l),c),p=new h.WebAnimation({element:s,integrator:g.from(n),style:d=>({transform:`translate3d(0, ${o?-a*d:a*d}px, 0)`})}),f=new h.WebAnimation({element:i,integrator:g.from(n),style:(d,y)=>({transform:`translate3d(0, ${o?y*a:y*-a}px, 0)`}),onComplete:()=>{i.style.willChange="auto",i.style.backfaceVisibility="",i.style.contain="",i.style.transform=""}});return new h.MultiAnimation([p,f],{mode:"parallel"})}}};function Tn(e){const{paths:t,type:n="directional"}=e;return n==="non-directional"?P(t,()=>wt({direction:"up"})):K(t,{forward:"up",backward:"down"},o=>wt({direction:o}))}const Dn={spring:{stiffness:200,damping:24}},In={inertia:{acceleration:25,resistance:1.2}},B=.2;function On(){return{enterPhysics:Dn,exitPhysics:In,background:{willChange:"transform, opacity",enterStyle:(e,t)=>({transform:`scale(${1-B*e})`,opacity:t}),exitStyle:e=>({transform:`scale(${1-B+B*e})`,opacity:e})}}}const vn={spring:{stiffness:300,damping:30}},Fn={inertia:{acceleration:70,resistance:1.2}};function Yn(){return{enterPhysics:vn,exitPhysics:Fn,background:{willChange:"",enterStyle:()=>({}),exitStyle:()=>({})}}}const Ln={static:Yn(),"background-scale":On()},kn="static",Mn="transform",Hn=(e={})=>{const t=e.direction??"enter",n=Ln[e.type??kn],o=t==="enter"?n.enterPhysics:n.exitPhysics,s=n.background,i=s.willChange!=="";return{prepare:({from:r,to:l})=>{const c=t==="enter"?l:r,a=t==="enter"?r:l;return c.then(p=>{p.style.willChange=Mn,p.style.backfaceVisibility="hidden",p.style.contain="layout paint",t==="exit"&&(p.style.pointerEvents="none",p.style.zIndex="100")}),a.then(p=>{i&&(p.style.willChange=s.willChange,p.style.backfaceVisibility="hidden",p.style.contain="layout paint"),t==="enter"&&(p.style.pointerEvents="none",p.style.zIndex="-1")}),{}},animation:({from:r,to:l,context:c})=>{const a=t==="enter"?l:r,p=t==="enter"?r:l,f=_(c,t==="enter"?"to":"from");a.style.clipPath=`inset(${f.top}px 0 calc(100% - ${f.top+f.height}px) 0)`;const d=t==="enter"?(E,x)=>({transform:`translate3d(0, ${x*f.height}px, 0)`}):E=>({transform:`translate3d(0, ${E*f.height}px, 0)`}),y=new h.WebAnimation({element:a,integrator:g.from(o),style:d,onComplete:()=>{a.style.willChange="auto",a.style.backfaceVisibility="",a.style.contain="",a.style.clipPath="",a.style.transform=""}});if(!i)return new h.MultiAnimation([y],{mode:"parallel"});const m=_(c,t==="enter"?"from":"to"),u=m.left+m.width/2,b=m.top+m.height/2;p.style.clipPath=`inset(${m.top}px 0 calc(100% - ${m.top+m.height}px) 0)`,p.style.transformOrigin=`${u}px ${b}px`;const $=t==="enter"?(E,x)=>s.enterStyle(E,x):E=>s.exitStyle(E),w=new h.WebAnimation({element:p,integrator:g.from(o),style:$,onComplete:t==="exit"?()=>{p.style.willChange="auto",p.style.backfaceVisibility="",p.style.contain="",p.style.clipPath="",p.style.transformOrigin=""}:void 0});return new h.MultiAnimation([y,w],{mode:"parallel"})}}};function Wn(e){return e==="scale"||e==="background-scale"?"background-scale":"static"}function Un(e){const{enter:t,exit:n}=e,o=e.type,s=Wn(o);return Ct({enter:t,exit:n},i=>Hn({direction:i,type:s}))}const Nn={spring:{stiffness:170,damping:22,doubleSpring:.8}},Rn=(e={})=>{const t=e.direction??"left",n=e.physics??Nn,o=t==="left";return{prepare:({from:s,to:i})=>(s.then(r=>{r.style.willChange="transform",r.style.backfaceVisibility="hidden",r.style.contain="layout paint",r.style.pointerEvents="none"}),i.then(r=>{const l=o?100:-100;r.style.transform=`translate3d(${l}%, 0, 0)`,r.style.willChange="transform",r.style.backfaceVisibility="hidden",r.style.contain="layout paint"}),{}),animation:({from:s,to:i})=>{const r=new h.WebAnimation({element:s,integrator:g.from(n),style:c=>({transform:`translate3d(${o?-100*c:100*c}%, 0, 0)`})}),l=new h.WebAnimation({element:i,integrator:g.from(n),style:(c,a)=>({transform:`translate3d(${o?a*100:a*-100}%, 0, 0)`}),onComplete:()=>{i.style.willChange="auto",i.style.backfaceVisibility="",i.style.contain="",i.style.transform=""}});return new h.MultiAnimation([r,l],{mode:"parallel"})}}};function zn(e){const{paths:t}=e;return K(t,{forward:"left",backward:"right"},n=>Rn({direction:n}))}const Xn={spring:{stiffness:17,damping:6}},Z=20,F=800,Vn=(e={})=>{const t=e.physics??Xn;return{prepare:({from:n,to:o})=>(n.then(s=>{s.style.willChange="transform",s.style.backfaceVisibility="hidden",s.style.contain="layout paint",s.style.pointerEvents="none",s.style.transform=`perspective(${F}px) rotateY(0deg) translate3d(0%, 0, 0)`}),o.then(s=>{s.style.willChange="transform",s.style.backfaceVisibility="hidden",s.style.contain="layout paint",s.style.transform=`perspective(${F}px) rotateY(${Z}deg) translate3d(-100%, 0, 0)`}),{}),animation:({from:n,to:o})=>{const s=new h.WebAnimation({element:n,integrator:g.from(t),style:r=>{const l=-r*Z,c=r*100;return{transform:`perspective(${F}px) rotateY(${l}deg) translate3d(${c}%, 0, 0)`}}}),i=new h.WebAnimation({element:o,integrator:g.from(t),style:(r,l)=>{const c=l*Z,a=-l*100;return{transform:`perspective(${F}px) rotateY(${c}deg) translate3d(${a}%, 0, 0)`}},onComplete:()=>{o.style.transform="",o.style.willChange="auto",o.style.backfaceVisibility="",o.style.contain=""}});return new h.MultiAnimation([s,i],{mode:"sequence"})}}};function Bn(e){const{paths:t}=e;return P(t,()=>Vn())}function Zn({enterRect:e,exitRect:t,pageRect:n,scrollOffset:o,enterRadius:s,exitRadius:i}){const r=t.left-e.left+(t.width-e.width)/2-o.x,l=t.top-e.top+(t.height-e.height)/2-o.y,c=t.width/e.width,a=t.height/e.height,p=e.top/n.height*100,f=(n.width-(e.left+e.width))/n.width*100,d=(n.height-(e.top+e.height))/n.height*100,y=e.left/n.width*100;return{transformOrigin:`${e.left+e.width/2}px ${e.top+e.height/2}px`,animate:m=>{const u=1-m,b=1+(c-1)*u,$=1+(a-1)*u,E=(i*u+s*(1-u))/((b+$)/2);return{clipPath:`inset(${p*u}% ${f*u}% ${d*u}% ${y*u}% round ${E}px)`,transform:`translate(${r*u}px, ${l*u}px) scale(${b}, ${$})`}}}}function qn({enterRect:e,exitRect:t,pageRect:n,scrollOffset:o,enterRadius:s,exitRadius:i}){const r=t.left-e.left+(t.width-e.width)/2+o.x,l=t.top-e.top+(t.height-e.height)/2+o.y,c=t.width/e.width,a=t.height/e.height,p=e.top/n.height*100,f=(n.width-(e.left+e.width))/n.width*100,d=(n.height-(e.top+e.height))/n.height*100,y=e.left/n.width*100;return{transformOrigin:`${e.left+e.width/2}px ${e.top+e.height/2}px`,animate:m=>{const u=1-m,b=1+(c-1)*u,$=1+(a-1)*u,E=(s*(1-u)+i*u)/((b+$)/2);return{clipPath:`inset(${p*u}% ${f*u}% ${d*u}% ${y*u}% round ${E}px)`,transform:`translate(${r*u-o.x}px, ${l*u}px) scale(${b}, ${$})`}}}}const jn={spring:{stiffness:430,damping:33,doubleSpring:1}},At=.12,Kn=18;function Gn(){return{transformOrigin:"50% 50%",animate:e=>{const t=1-e;return{transform:`scale(${1-At*t})`}}}}function Jn(){return{transformOrigin:"50% 50%",animate:e=>{const t=1-e;return{transform:`scale(${1-At*t})`}}}}const q={willChange:"backdrop-filter",initialStyle:{position:"absolute",inset:"0",pointerEvents:"none",backdropFilter:"blur(0px)",WebkitBackdropFilter:"blur(0px)"},style:(e,t)=>{const n=e==="enter"?t:1-t,o=`blur(${Kn*n}px)`;return{backdropFilter:o,WebkitBackdropFilter:o}}};class Qn{constructor(){S(this,"physics",jn)}contribute(t){const{from:n,to:o,resolved:s,physics:i}=t,r=s.mode==="enter",l=r?n:o,c=r?Gn():Jn();return c&&(l.style.transformOrigin=c.transformOrigin),[new h.WebAnimation({element:l,integrator:g.from(i),style:r?(a,p)=>c.animate(p):a=>c.animate(a)})]}}class to{prepare(t){const n=t.createElement("zoom-overlay");return Object.assign(n.style,q.initialStyle),n.style.willChange=q.willChange,t.context.positionedParent.appendChild(n),{overlay:n}}contribute(t){const n=t.extras.overlay;return n?(n.style.zIndex=t.resolved.mode==="enter"?"-1":"1",[new h.WebAnimation({element:n,integrator:g.from(t.physics),style:o=>q.style(t.resolved.mode,o)})]):[]}}const eo={spring:{stiffness:430,damping:33,doubleSpring:1}};function no({enterRect:e,exitRect:t,scrollOffset:n}){const o=e.left-t.left+(e.width-t.width)/2+n.x,s=e.top-t.top+(e.height-t.height)/2+n.y,i=e.width/t.width,r=e.height/t.height,l=Math.max(i,r);return{transformOrigin:`${t.left+t.width/2}px ${t.top+t.height/2}px`,animate:c=>{const a=1-c;return{transform:`translate(${o*a-n.x}px, ${s*a}px) scale(${1+(l-1)*a})`}}}}function oo({enterRect:e,exitRect:t,scrollOffset:n}){const o=e.left-t.left+(e.width-t.width)/2-n.x,s=e.top-t.top+(e.height-t.height)/2-n.y,i=e.width/t.width,r=e.height/t.height,l=Math.max(i,r);return{transformOrigin:`${t.left+t.width/2}px ${t.top+t.height/2}px`,animate:c=>{const a=1-c;return{transform:`translate(${o*a}px, ${s*a}px) scale(${1+(l-1)*a})`}}}}class so{constructor(){S(this,"physics",eo)}contribute(t){const{from:n,to:o,resolved:s,input:i,physics:r}=t,l=s.mode==="enter",c=l?n:o,a=l?no(i):oo(i);return a&&(c.style.transformOrigin=a.transformOrigin),[new h.WebAnimation({element:c,integrator:g.from(r),style:l?(p,f)=>a.animate(f):p=>a.animate(p)})]}}const io={spring:{stiffness:530,damping:34,doubleSpring:1}};class ro{constructor(){S(this,"physics",io)}contribute(t){return[]}}const ao={expand:()=>new so,static:()=>new ro,blur:()=>new Qn};function lo(e){return ao[e]()}const j="data-zoom-enter-key",St="data-zoom-exit-key",co="data-zoom-radius";function $t(e){const t=e.getAttribute(co);if(!t)return 0;const n=parseFloat(t);return Number.isFinite(n)&&n>0?n:0}function po(e,t){const n=[];let o=t;for(;o&&o!==e;){const s=o.parentElement;if(!s)break;for(const i of Array.from(s.children))i!==o&&i instanceof HTMLElement&&n.push(i);o=s}return n}function Et(e){const t=e.querySelectorAll(`[${j}]`);return t.length!==1?null:t[0]}function xt(e,t){const n=e.querySelectorAll(`[${St}]`);for(const o of n)if(o.getAttribute(St)===t)return o;return null}function fo(e,t){const n=Et(e),o=Et(t);if(!n&&o){const s=o.getAttribute(j);if(!s)return null;const i=xt(e,s);return i?{mode:"enter",enterEl:o,exitEl:i}:null}if(n&&!o){const s=n.getAttribute(j);if(!s)return null;const i=xt(t,s);return i?{mode:"exit",enterEl:n,exitEl:i}:null}return null}function mo(e,t,n,o){return{enterRect:O(e.mode==="enter"?n:t,e.enterEl),exitRect:O(e.mode==="enter"?t:n,e.exitEl),pageRect:e.mode==="enter"?n.getBoundingClientRect():t.getBoundingClientRect(),scrollOffset:o,enterRadius:$t(e.enterEl),exitRadius:$t(e.exitEl)}}class ho{prepare(t){t.from.then(n=>{n.style.willChange="transform, clip-path, opacity",n.style.backfaceVisibility="hidden",n.style.contain="layout paint"})}contribute(t){const{from:n,to:o,resolved:s,input:i,physics:r,onComplete:l}=t,c=s.mode==="enter",a=c?Zn(i):qn(i),p=c?o:n,f=c?"t":"u";a&&(p.style.transformOrigin=a.transformOrigin);const d=c?"-2":"2",y=n.style.zIndex;return n.style.zIndex=d,l(()=>{p.style.willChange="auto",p.style.backfaceVisibility="",p.style.transformOrigin="",p.style.contain="",n.style.zIndex=y}),[new h.WebAnimation({element:p,integrator:g.from(r),style:f==="t"?m=>a.animate(m):(m,u)=>a.animate(u)})]}}class uo{contribute(t){const{resolved:n,physics:o,from:s,to:i,onComplete:r}=t,l=n.mode==="enter"?i:s,c=po(l,n.enterEl);if(c.length===0)return[];const a=c.map(p=>p.style.opacity);if(n.mode==="enter")for(const p of c)p.style.opacity="0";return r(()=>{for(let p=0;p<c.length;p++){const f=c[p];f&&(f.style.opacity=a[p]??"")}}),c.map(p=>new h.WebAnimation({element:p,integrator:g.from(o),style:(f,d)=>({opacity:n.mode==="enter"?f:d})}))}}class Pt{contribute(){return[]}}const yo={default:()=>new Pt,fade:()=>new uo};function go(e){return yo[e]()}class bo extends Pt{}function wo(e){const t=lo(e.type);return{strategies:[new ho,t,go(e.variant),new bo,...e.type==="blur"?[new to]:[]],physics:t.physics}}const So=e=>{const{strategies:t,physics:n}=wo(e);return{prepare:o=>{const s={from:o.from,to:o.to,context:{positionedParent:o.context.positionedParent},createElement:o.createElement},i={};for(const r of t){if(!r.prepare)continue;const l=r.prepare(s);l&&Object.assign(i,l)}return i},animation:({from:o,to:s,context:i,...r})=>{const l=fo(o,s);if(!l)return new h.MultiAnimation([],{mode:"parallel"});const c=mo(l,o,s,i.scrollOffset),a=[],f={from:o,to:s,resolved:l,input:c,physics:n,extras:r,onComplete:m=>{a.push(m)}},d=[];for(const m of t)m.contribute&&d.push(...m.contribute(f));const y=d[0];if(y){const m=y.onComplete;y.onComplete=()=>{m==null||m();for(const u of a)try{u()}catch(b){console.error("[zoom] cleanup error",b)}}}return new h.MultiAnimation(d,{mode:"parallel"})}}};function $o(e){const t=e.type??"static",n=e.variant??(e.fade?"fade":"default");return{type:t,variant:n}}function Eo(e){const t=$o(e);return P(e.paths,()=>So(t))}exports.Animation=h.Animation;exports.MultiAnimation=h.MultiAnimation;exports.WebAnimation=h.WebAnimation;exports.axis=ye;exports.blind=Ee;exports.drill=Fe;exports.fade=Me;exports.film=Be;exports.hero=wn;exports.jaemin=xn;exports.rotate=Pn;exports.scroll=Tn;exports.sheet=Un;exports.slide=zn;exports.strip=Bn;exports.zoom=Eo;
|
|
35
|
+
)`}function X(e,t,n,o,s){const i=n/1e3;return new h.WebAnimation({element:e,integrator:new Ut({durationSec:i}),lowerBound:0,upperBound:1,style:r=>o(Re(t,r)),onComplete:s})}const Ve=(e={})=>{var s;const t=((s=e.border)==null?void 0:s.color)??We,n=He,o=e.physics;return{prepare:({from:i,to:r,context:l})=>{const c=_(l,"from"),a=_(l,"to"),p=O(document.body,l.positionedParent),f=Xe(t,{...c,top:p.top});for(const d of["topLeft","topRight","bottomLeft","bottomRight"])l.positionedParent.appendChild(f[d]);return i.then(d=>{mt(d,c),ht(d,c),d.style.transform=`translateY(${-c.top}px)`}),r.then(d=>{mt(d,a),ht(d,a),d.style.transform=`translateY(${-a.top+a.height}px) scale(${n})`}),{borders:f,fromRect:c,toRect:a}},animation:({from:i,to:r,context:l,borders:c,fromRect:a,toRect:p})=>{const f=dt({rect:a,scale:n,direction:"out",override:o}),d=dt({rect:p,scale:n,direction:"in",override:o}),y=X(i,f.snapshots,f.totalDuration,w=>({transform:`translateY(${w.translateY}px) scale(${w.scale})`}),()=>{i.style.clipPath="",i.style.transformOrigin=""}),m=X(r,d.snapshots,d.totalDuration,w=>({transform:`translateY(${w.translateY}px) scale(${w.scale})`}),()=>{r.style.clipPath="",r.style.transformOrigin="",r.style.transform=""}),u=ze.map(([w,E],x)=>{const T=["topLeft","topRight","bottomLeft","bottomRight"][x];return X(c[T],f.snapshots,f.totalDuration,A=>{const C=(a.width-a.width*A.scale)/2*.7*w,M=(a.height-a.height*A.scale)/2*.7*E;return{transform:`translate(${C}px, ${M}px)`}})}),b=new h.MultiAnimation([y,m,...u],{mode:"parallel"}),$=b.onComplete;return b.onComplete=()=>{$==null||$();const w=l.positionedParent;for(const E of["topLeft","topRight","bottomLeft","bottomRight"]){const x=c[E];x.parentElement===w&&w.removeChild(x)}},b}}};function Be(e){const{paths:t,options:n}=e,o=(n==null?void 0:n.borderColor)!==void 0?{border:{color:n.borderColor}}:void 0;return P(t,()=>Ve(o))}const ut="data-hero-enter-key",yt="data-hero-exit-key",V="data-hero-key";class Ze{prepare(t){t.from.then(n=>{n.style.opacity="0"})}}const qe=()=>new Ze;class je{contribute(t){const{from:n,to:o,physics:s,onComplete:i}=t,r=n.style.opacity,l=o.style.opacity,c=n.style.willChange,a=o.style.willChange;return o.style.opacity="0",n.style.willChange="opacity",o.style.willChange="opacity",i(()=>{n.style.opacity=r,o.style.opacity=l,n.style.willChange=c,o.style.willChange=a}),[new h.WebAnimation({element:n,integrator:g.from(s),style:(p,f)=>({opacity:f})}),new h.WebAnimation({element:o,integrator:g.from(s),style:p=>({opacity:p})})]}}const Ke=()=>new je,Ge={static:qe,fade:Ke},Je={spring:{stiffness:320,damping:30}},Qe=()=>Je,tn={spring:{stiffness:300,damping:30,doubleSpring:1}},en=()=>tn,nn={default:Qe,smooth:en},on=700,sn="data-hero-aspect-ratio",rn="data-hero-radius";function an(e){if(!e)return null;if(e.includes("/")){const[n,o]=e.split("/"),s=parseFloat(n??""),i=parseFloat(o??"");return!Number.isFinite(s)||!Number.isFinite(i)||s<=0||i<=0?null:s/i}const t=parseFloat(e);return Number.isFinite(t)&&t>0?t:null}function gt(e){const t=e.getAttribute(rn);if(!t)return 0;const n=parseFloat(t);return Number.isFinite(n)&&n>0?n:0}function L(e){return e.left+e.width/2}function k(e){return e.top+e.height/2}function ln(e,t){return{top:Math.max(0,t.top-e.top),right:Math.max(0,e.left+e.width-(t.left+t.width)),bottom:Math.max(0,e.top+e.height-(t.top+t.height)),left:Math.max(0,t.left-e.left)}}function cn(e,t,n){const o=e.width/e.height;let s,i;return n==="contain"?o>t?(i=e.height,s=i*t):(s=e.width,i=s/t):o>t?(s=e.width,i=s/t):(i=e.height,s=i*t),{left:e.left+(e.width-s)/2,top:e.top+(e.height-i)/2,width:s,height:i}}function bt(e,t,n){const o=O(e,t),s=an(t.getAttribute(sn));if(s===null)return{bbox:o,content:o,window:o,clipInset:{top:0,right:0,bottom:0,left:0}};const i=cn(o,s,n),r=n==="cover"?o:i;return{bbox:o,content:i,window:r,clipInset:ln(i,r)}}function pn(e,t,n,o){const s=n.width/o,i=n.height/o,r=e.width/2+(L(n)-L(t))/o-s/2,l=e.height/2+(k(n)-k(t))/o-i/2;return{top:Math.max(0,l),right:Math.max(0,e.width-r-s),bottom:Math.max(0,e.height-l-i),left:Math.max(0,r)}}function v(e,t){const n=new Map,o=e.querySelectorAll(`[${t}]`);for(const s of Array.from(o)){const i=s.getAttribute(t);i&&(n.has(i)||n.set(i,s))}return n}function fn(e,t){const n=[],o=v(t,ut),s=v(e,yt);for(const[l,c]of o){const a=s.get(l);a&&n.push({key:l,fromEl:a,toEl:c,fromFit:"cover",toFit:"contain"})}const i=v(e,ut),r=v(t,yt);for(const[l,c]of i){const a=r.get(l);a&&n.push({key:l,fromEl:c,toEl:a,fromFit:"contain",toFit:"cover"})}return n}function dn(e,t){const n=[],o=Array.from(t.querySelectorAll(`[${V}]`));for(const s of o){const i=s.getAttribute(V);if(!i)continue;const r=e.querySelector(`[${V}="${i}"]`);r&&n.push({key:i,fromEl:r,toEl:s,fromFit:"contain",toFit:"contain"})}return n}function mn(e,t){const n=fn(e,t);return n.length>0?n:dn(e,t)}function hn(e,t,n){const{fromEl:o,toEl:s}=t,i=bt(e,o,t.fromFit),r=bt(e,s,t.toFit),l=i.content,c=i.window,a=r.content,p=r.window,f=r.clipInset,d=gt(o),y=gt(s);if(l.width===0||l.height===0||c.width===0||c.height===0||a.width===0||a.height===0||p.width===0||p.height===0)return null;const m=Math.max(l.width/a.width,l.height/a.height),u=L(l),b=k(l),$=L(a),w=k(a),E=u-$,x=b-w;if(Math.abs(x)>n)return null;const T=pn(a,l,c,m);return{toContent:a,hasRadius:d>0||y>0,styleFor:(A,C)=>{const M=C*E,_t=C*x,G=A+C*m,Tt=(d*C+y*A)/G,Dt=T.top*C+f.top*A,It=T.right*C+f.right*A,Ot=T.bottom*C+f.bottom*A,vt=T.left*C+f.left*A;return{transform:`translate(${M}px, ${_t}px) scale(${G})`,clipPath:`inset(${Dt}px ${It}px ${Ot}px ${vt}px round ${Tt}px)`}}}}function un(e,t){e.style.transform=t.transform,e.style.clipPath=t.clipPath}class yn{contribute(t){const{resolved:n,physics:o,positionedParent:s,maxDistance:i,onComplete:r}=t,l=[];for(const c of n.pairs){const{fromEl:a,toEl:p}=c,f=hn(s,c,i);if(!f)continue;const d=p.cloneNode(!0);d.style.position="absolute",d.style.left=`${f.toContent.left}px`,d.style.top=`${f.toContent.top}px`,d.style.width=`${f.toContent.width}px`,d.style.height=`${f.toContent.height}px`,d.style.margin="0",d.style.transformOrigin="center center",d.style.zIndex="1000",d.style.willChange="transform, clip-path",d.style.pointerEvents="none",d.style.maxWidth="none",d.style.maxHeight="none",f.hasRadius&&(d.style.borderRadius="0"),un(d,f.styleFor(0,1)),s.appendChild(d);const y=a.style.opacity,m=p.style.opacity;a.style.opacity="0",p.style.opacity="0",r(()=>{a.style.opacity=y,p.style.opacity=m,d.parentElement&&d.parentElement.removeChild(d)}),l.push(new h.WebAnimation({element:d,integrator:g.from(o),style:f.styleFor}))}return l}}function gn(e){return[new yn,Ge[e.type]()]}const bn=e=>{const t=gn(e),n=nn[e.variant](),o=on;return{prepare:s=>{var l;const i=Promise.all([s.from,s.to]).then(([c,a])=>({pairs:mn(c,a)})),r={from:s.from,to:s.to,resolved:i};for(const c of t)(l=c.prepare)==null||l.call(c,r);return i.then(c=>({resolved:c}))},animation:({from:s,to:i,context:r,resolved:l})=>{if(l.pairs.length===0)return new h.MultiAnimation([],{mode:"parallel"});const c=[],a=m=>{c.push(m)},p={from:s,to:i,resolved:l,physics:n,positionedParent:r.positionedParent,maxDistance:o,onComplete:a},f=[];for(const m of t)m.contribute&&f.push(...m.contribute(p));if(f.length===0)return new h.MultiAnimation([],{mode:"parallel"});const d=new h.MultiAnimation(f,{mode:"parallel"}),y=d.onComplete;return d.onComplete=()=>{y==null||y();for(const m of c)try{m()}catch(u){console.error("[hero] cleanup error",u)}},d}}};function wn(e){const{paths:t}=e,n=e.type??"static",o=e.variant??"default";return P(t,()=>bn({type:n,variant:o}))}const Sn={spring:{stiffness:50,damping:30}},$n={spring:{stiffness:80,damping:25}},En=(e={})=>{const t=e.physics??Sn,n=e.initialRotation??45,o=e.initialScale??.01,s=e.rotationTriggerPoint??.8;return{prepare:({from:i,to:r,context:l})=>(i.then(c=>{c.style.opacity="1"}),r.then(c=>{const a=_(l,"to"),p=Math.min(a.width,a.height)*.4;c.style.setProperty("--max-border-radius",`${p}px`),c.style.setProperty("--border-radius-scale","1"),c.style.willChange="transform",c.style.backfaceVisibility="hidden";const f=a.left+a.width/2,d=a.top+a.height/2;c.style.transformOrigin=`${f}px ${d}px`,c.style.position="fixed",c.style.top=`${a.top}px`,c.style.left=`${a.left}px`,c.style.width=`${a.width}px`,c.style.height=`${a.height}px`,c.style.zIndex="1000",c.style.overflow="hidden",c.style.transform=`rotate(${n}deg) scale(${o}) translateZ(0)`,c.style.borderRadius="calc(var(--max-border-radius) * var(--border-radius-scale))",c.style.opacity="1"}),{}),animation:({from:i,to:r})=>{const l=new h.WebAnimation({element:i,integrator:g.from($n),style:(a,p)=>({opacity:p})}),c=new h.WebAnimation({element:r,integrator:g.from(t),style:a=>{let p;if(a<=.05)p=o;else if(a<=s){const m=(a-.05)/(s-.05),u=Math.pow(m,9);p=o+(.8-o)*u}else{const m=(a-s)/(1-s);p=.8+.2*(1-Math.pow(1-m,3))}const f=.7;let d;if(a<=f)d=n;else{const m=(a-f)/(1-f),u=1-Math.pow(1-m,2);d=n*(1-u)}let y;if(a<=f)y=1;else{const m=(a-f)/(1-f);y=1-Math.pow(m,.5)}return{transform:`rotate(${d.toFixed(2)}deg) scale(${p.toFixed(4)}) translateZ(0)`,"--border-radius-scale":y.toFixed(4)}},onComplete:()=>{r.style.willChange="",r.style.backfaceVisibility="",r.style.removeProperty("--max-border-radius"),r.style.removeProperty("--border-radius-scale"),r.style.transform="",r.style.transformOrigin="",r.style.position="",r.style.zIndex="",r.style.top="",r.style.left="",r.style.width="",r.style.height="",r.style.overflow="",r.style.borderRadius=""}});return new h.MultiAnimation([l,c],{mode:"parallel"})}}};function xn(e){const{paths:t}=e;return P(t,()=>En())}const Cn={spring:{stiffness:100,damping:30}},An=(e={})=>{const t=e.physics??Cn;return{prepare:({from:n,to:o})=>(n.then(s=>{s.style.transformOrigin="center center",s.style.willChange="transform, opacity"}),o.then(s=>{s.style.opacity="0",s.style.transform="rotate(-180deg)",s.style.transformOrigin="center center",s.style.willChange="transform, opacity"}),{}),animation:({from:n,to:o})=>{const s=new h.WebAnimation({element:n,integrator:g.from(t),style:r=>({transform:`rotate(${r*180}deg)`,opacity:r<.5?1:0})}),i=new h.WebAnimation({element:o,integrator:g.from(t),style:(r,l)=>({transform:`rotate(${-l*180}deg)`,opacity:r>.5?1:0}),onComplete:()=>{o.style.willChange="auto",o.style.transform="",o.style.transformOrigin="",o.style.opacity=""}});return new h.MultiAnimation([s,i],{mode:"parallel"})}}};function Pn(e){const{paths:t}=e;return P(t,()=>An())}const _n={spring:{stiffness:20,damping:8,doubleSpring:1,restDelta:.001,restSpeed:.001}},wt=(e={})=>{const t=e.direction??"up",n=e.physics??_n,o=t==="up";return{prepare:({from:s,to:i})=>(s.then(r=>{r.style.zIndex=o?"-1":"1",r.style.willChange="transform",r.style.backfaceVisibility="hidden",r.style.contain="layout paint",r.style.pointerEvents="none"}),i.then(r=>{r.style.willChange="transform",r.style.backfaceVisibility="hidden",r.style.contain="layout paint"}),{}),animation:({from:s,to:i})=>{const r=s.offsetHeight,l=i.offsetHeight,c=window.innerHeight,a=Math.max(Math.min(r,l),c),p=new h.WebAnimation({element:s,integrator:g.from(n),style:d=>({transform:`translate3d(0, ${o?-a*d:a*d}px, 0)`})}),f=new h.WebAnimation({element:i,integrator:g.from(n),style:(d,y)=>({transform:`translate3d(0, ${o?y*a:y*-a}px, 0)`}),onComplete:()=>{i.style.willChange="auto",i.style.backfaceVisibility="",i.style.contain="",i.style.transform=""}});return new h.MultiAnimation([p,f],{mode:"parallel"})}}};function Tn(e){const{paths:t,type:n="directional"}=e;return n==="non-directional"?P(t,()=>wt({direction:"up"})):K(t,{forward:"up",backward:"down"},o=>wt({direction:o}))}const Dn={spring:{stiffness:200,damping:24}},In={inertia:{acceleration:25,resistance:1.2}},B=.2;function On(){return{enterPhysics:Dn,exitPhysics:In,background:{willChange:"transform, opacity",enterStyle:(e,t)=>({transform:`scale(${1-B*e})`,opacity:t}),exitStyle:e=>({transform:`scale(${1-B+B*e})`,opacity:e})}}}const vn={spring:{stiffness:300,damping:30}},Fn={inertia:{acceleration:30,resistance:1}};function Yn(){return{enterPhysics:vn,exitPhysics:Fn,background:{willChange:"",enterStyle:()=>({}),exitStyle:()=>({})}}}const Ln={static:Yn(),"background-scale":On()},kn="static",Mn="transform",Hn=(e={})=>{const t=e.direction??"enter",n=Ln[e.type??kn],o=t==="enter"?n.enterPhysics:n.exitPhysics,s=n.background,i=s.willChange!=="";return{prepare:({from:r,to:l})=>{const c=t==="enter"?l:r,a=t==="enter"?r:l;return c.then(p=>{p.style.willChange=Mn,p.style.backfaceVisibility="hidden",p.style.contain="layout paint",t==="exit"&&(p.style.pointerEvents="none",p.style.zIndex="100")}),a.then(p=>{i&&(p.style.willChange=s.willChange,p.style.backfaceVisibility="hidden",p.style.contain="layout paint"),t==="enter"&&(p.style.pointerEvents="none",p.style.zIndex="-1")}),{}},animation:({from:r,to:l,context:c})=>{const a=t==="enter"?l:r,p=t==="enter"?r:l,f=_(c,t==="enter"?"to":"from");a.style.clipPath=`inset(${f.top}px 0 calc(100% - ${f.top+f.height}px) 0)`;const d=t==="enter"?(E,x)=>({transform:`translate3d(0, ${x*f.height}px, 0)`}):E=>({transform:`translate3d(0, ${E*f.height}px, 0)`}),y=new h.WebAnimation({element:a,integrator:g.from(o),style:d,onComplete:()=>{a.style.willChange="auto",a.style.backfaceVisibility="",a.style.contain="",a.style.clipPath="",a.style.transform=""}});if(!i)return new h.MultiAnimation([y],{mode:"parallel"});const m=_(c,t==="enter"?"from":"to"),u=m.left+m.width/2,b=m.top+m.height/2;p.style.clipPath=`inset(${m.top}px 0 calc(100% - ${m.top+m.height}px) 0)`,p.style.transformOrigin=`${u}px ${b}px`;const $=t==="enter"?(E,x)=>s.enterStyle(E,x):E=>s.exitStyle(E),w=new h.WebAnimation({element:p,integrator:g.from(o),style:$,onComplete:t==="exit"?()=>{p.style.willChange="auto",p.style.backfaceVisibility="",p.style.contain="",p.style.clipPath="",p.style.transformOrigin=""}:void 0});return new h.MultiAnimation([y,w],{mode:"parallel"})}}};function Wn(e){return e==="scale"||e==="background-scale"?"background-scale":"static"}function Un(e){const{enter:t,exit:n}=e,o=e.type,s=Wn(o);return Ct({enter:t,exit:n},i=>Hn({direction:i,type:s}))}const Nn={spring:{stiffness:170,damping:22,doubleSpring:.8}},Rn=(e={})=>{const t=e.direction??"left",n=e.physics??Nn,o=t==="left";return{prepare:({from:s,to:i})=>(s.then(r=>{r.style.willChange="transform",r.style.backfaceVisibility="hidden",r.style.contain="layout paint",r.style.pointerEvents="none"}),i.then(r=>{const l=o?100:-100;r.style.transform=`translate3d(${l}%, 0, 0)`,r.style.willChange="transform",r.style.backfaceVisibility="hidden",r.style.contain="layout paint"}),{}),animation:({from:s,to:i})=>{const r=new h.WebAnimation({element:s,integrator:g.from(n),style:c=>({transform:`translate3d(${o?-100*c:100*c}%, 0, 0)`})}),l=new h.WebAnimation({element:i,integrator:g.from(n),style:(c,a)=>({transform:`translate3d(${o?a*100:a*-100}%, 0, 0)`}),onComplete:()=>{i.style.willChange="auto",i.style.backfaceVisibility="",i.style.contain="",i.style.transform=""}});return new h.MultiAnimation([r,l],{mode:"parallel"})}}};function zn(e){const{paths:t}=e;return K(t,{forward:"left",backward:"right"},n=>Rn({direction:n}))}const Xn={spring:{stiffness:17,damping:6}},Z=20,F=800,Vn=(e={})=>{const t=e.physics??Xn;return{prepare:({from:n,to:o})=>(n.then(s=>{s.style.willChange="transform",s.style.backfaceVisibility="hidden",s.style.contain="layout paint",s.style.pointerEvents="none",s.style.transform=`perspective(${F}px) rotateY(0deg) translate3d(0%, 0, 0)`}),o.then(s=>{s.style.willChange="transform",s.style.backfaceVisibility="hidden",s.style.contain="layout paint",s.style.transform=`perspective(${F}px) rotateY(${Z}deg) translate3d(-100%, 0, 0)`}),{}),animation:({from:n,to:o})=>{const s=new h.WebAnimation({element:n,integrator:g.from(t),style:r=>{const l=-r*Z,c=r*100;return{transform:`perspective(${F}px) rotateY(${l}deg) translate3d(${c}%, 0, 0)`}}}),i=new h.WebAnimation({element:o,integrator:g.from(t),style:(r,l)=>{const c=l*Z,a=-l*100;return{transform:`perspective(${F}px) rotateY(${c}deg) translate3d(${a}%, 0, 0)`}},onComplete:()=>{o.style.transform="",o.style.willChange="auto",o.style.backfaceVisibility="",o.style.contain=""}});return new h.MultiAnimation([s,i],{mode:"sequence"})}}};function Bn(e){const{paths:t}=e;return P(t,()=>Vn())}function Zn({enterRect:e,exitRect:t,pageRect:n,scrollOffset:o,enterRadius:s,exitRadius:i}){const r=t.left-e.left+(t.width-e.width)/2-o.x,l=t.top-e.top+(t.height-e.height)/2-o.y,c=t.width/e.width,a=t.height/e.height,p=e.top/n.height*100,f=(n.width-(e.left+e.width))/n.width*100,d=(n.height-(e.top+e.height))/n.height*100,y=e.left/n.width*100;return{transformOrigin:`${e.left+e.width/2}px ${e.top+e.height/2}px`,animate:m=>{const u=1-m,b=1+(c-1)*u,$=1+(a-1)*u,E=(i*u+s*(1-u))/((b+$)/2);return{clipPath:`inset(${p*u}% ${f*u}% ${d*u}% ${y*u}% round ${E}px)`,transform:`translate(${r*u}px, ${l*u}px) scale(${b}, ${$})`}}}}function qn({enterRect:e,exitRect:t,pageRect:n,scrollOffset:o,enterRadius:s,exitRadius:i}){const r=t.left-e.left+(t.width-e.width)/2+o.x,l=t.top-e.top+(t.height-e.height)/2+o.y,c=t.width/e.width,a=t.height/e.height,p=e.top/n.height*100,f=(n.width-(e.left+e.width))/n.width*100,d=(n.height-(e.top+e.height))/n.height*100,y=e.left/n.width*100;return{transformOrigin:`${e.left+e.width/2}px ${e.top+e.height/2}px`,animate:m=>{const u=1-m,b=1+(c-1)*u,$=1+(a-1)*u,E=(s*(1-u)+i*u)/((b+$)/2);return{clipPath:`inset(${p*u}% ${f*u}% ${d*u}% ${y*u}% round ${E}px)`,transform:`translate(${r*u-o.x}px, ${l*u}px) scale(${b}, ${$})`}}}}const jn={spring:{stiffness:430,damping:33,doubleSpring:1}},At=.12,Kn=18;function Gn(){return{transformOrigin:"50% 50%",animate:e=>{const t=1-e;return{transform:`scale(${1-At*t})`}}}}function Jn(){return{transformOrigin:"50% 50%",animate:e=>{const t=1-e;return{transform:`scale(${1-At*t})`}}}}const q={willChange:"backdrop-filter",initialStyle:{position:"absolute",inset:"0",pointerEvents:"none",backdropFilter:"blur(0px)",WebkitBackdropFilter:"blur(0px)"},style:(e,t)=>{const n=e==="enter"?t:1-t,o=`blur(${Kn*n}px)`;return{backdropFilter:o,WebkitBackdropFilter:o}}};class Qn{constructor(){S(this,"physics",jn)}contribute(t){const{from:n,to:o,resolved:s,physics:i}=t,r=s.mode==="enter",l=r?n:o,c=r?Gn():Jn();return c&&(l.style.transformOrigin=c.transformOrigin),[new h.WebAnimation({element:l,integrator:g.from(i),style:r?(a,p)=>c.animate(p):a=>c.animate(a)})]}}class to{prepare(t){const n=t.createElement("zoom-overlay");return Object.assign(n.style,q.initialStyle),n.style.willChange=q.willChange,t.context.positionedParent.appendChild(n),{overlay:n}}contribute(t){const n=t.extras.overlay;return n?(n.style.zIndex=t.resolved.mode==="enter"?"-1":"1",[new h.WebAnimation({element:n,integrator:g.from(t.physics),style:o=>q.style(t.resolved.mode,o)})]):[]}}const eo={spring:{stiffness:430,damping:33,doubleSpring:1}};function no({enterRect:e,exitRect:t,scrollOffset:n}){const o=e.left-t.left+(e.width-t.width)/2+n.x,s=e.top-t.top+(e.height-t.height)/2+n.y,i=e.width/t.width,r=e.height/t.height,l=Math.max(i,r);return{transformOrigin:`${t.left+t.width/2}px ${t.top+t.height/2}px`,animate:c=>{const a=1-c;return{transform:`translate(${o*a-n.x}px, ${s*a}px) scale(${1+(l-1)*a})`}}}}function oo({enterRect:e,exitRect:t,scrollOffset:n}){const o=e.left-t.left+(e.width-t.width)/2-n.x,s=e.top-t.top+(e.height-t.height)/2-n.y,i=e.width/t.width,r=e.height/t.height,l=Math.max(i,r);return{transformOrigin:`${t.left+t.width/2}px ${t.top+t.height/2}px`,animate:c=>{const a=1-c;return{transform:`translate(${o*a}px, ${s*a}px) scale(${1+(l-1)*a})`}}}}class so{constructor(){S(this,"physics",eo)}contribute(t){const{from:n,to:o,resolved:s,input:i,physics:r}=t,l=s.mode==="enter",c=l?n:o,a=l?no(i):oo(i);return a&&(c.style.transformOrigin=a.transformOrigin),[new h.WebAnimation({element:c,integrator:g.from(r),style:l?(p,f)=>a.animate(f):p=>a.animate(p)})]}}const io={spring:{stiffness:530,damping:34,doubleSpring:1}};class ro{constructor(){S(this,"physics",io)}contribute(t){return[]}}const ao={expand:()=>new so,static:()=>new ro,blur:()=>new Qn};function lo(e){return ao[e]()}const j="data-zoom-enter-key",St="data-zoom-exit-key",co="data-zoom-radius";function $t(e){const t=e.getAttribute(co);if(!t)return 0;const n=parseFloat(t);return Number.isFinite(n)&&n>0?n:0}function po(e,t){const n=[];let o=t;for(;o&&o!==e;){const s=o.parentElement;if(!s)break;for(const i of Array.from(s.children))i!==o&&i instanceof HTMLElement&&n.push(i);o=s}return n}function Et(e){const t=e.querySelectorAll(`[${j}]`);return t.length!==1?null:t[0]}function xt(e,t){const n=e.querySelectorAll(`[${St}]`);for(const o of n)if(o.getAttribute(St)===t)return o;return null}function fo(e,t){const n=Et(e),o=Et(t);if(!n&&o){const s=o.getAttribute(j);if(!s)return null;const i=xt(e,s);return i?{mode:"enter",enterEl:o,exitEl:i}:null}if(n&&!o){const s=n.getAttribute(j);if(!s)return null;const i=xt(t,s);return i?{mode:"exit",enterEl:n,exitEl:i}:null}return null}function mo(e,t,n,o){return{enterRect:O(e.mode==="enter"?n:t,e.enterEl),exitRect:O(e.mode==="enter"?t:n,e.exitEl),pageRect:e.mode==="enter"?n.getBoundingClientRect():t.getBoundingClientRect(),scrollOffset:o,enterRadius:$t(e.enterEl),exitRadius:$t(e.exitEl)}}class ho{prepare(t){t.from.then(n=>{n.style.willChange="transform, clip-path, opacity",n.style.backfaceVisibility="hidden",n.style.contain="layout paint"})}contribute(t){const{from:n,to:o,resolved:s,input:i,physics:r,onComplete:l}=t,c=s.mode==="enter",a=c?Zn(i):qn(i),p=c?o:n,f=c?"t":"u";a&&(p.style.transformOrigin=a.transformOrigin);const d=c?"-2":"2",y=n.style.zIndex;return n.style.zIndex=d,l(()=>{p.style.willChange="auto",p.style.backfaceVisibility="",p.style.transformOrigin="",p.style.contain="",n.style.zIndex=y}),[new h.WebAnimation({element:p,integrator:g.from(r),style:f==="t"?m=>a.animate(m):(m,u)=>a.animate(u)})]}}class uo{contribute(t){const{resolved:n,physics:o,from:s,to:i,onComplete:r}=t,l=n.mode==="enter"?i:s,c=po(l,n.enterEl);if(c.length===0)return[];const a=c.map(p=>p.style.opacity);if(n.mode==="enter")for(const p of c)p.style.opacity="0";return r(()=>{for(let p=0;p<c.length;p++){const f=c[p];f&&(f.style.opacity=a[p]??"")}}),c.map(p=>new h.WebAnimation({element:p,integrator:g.from(o),style:(f,d)=>({opacity:n.mode==="enter"?f:d})}))}}class Pt{contribute(){return[]}}const yo={default:()=>new Pt,fade:()=>new uo};function go(e){return yo[e]()}class bo extends Pt{}function wo(e){const t=lo(e.type);return{strategies:[new ho,t,go(e.variant),new bo,...e.type==="blur"?[new to]:[]],physics:t.physics}}const So=e=>{const{strategies:t,physics:n}=wo(e);return{prepare:o=>{const s={from:o.from,to:o.to,context:{positionedParent:o.context.positionedParent},createElement:o.createElement},i={};for(const r of t){if(!r.prepare)continue;const l=r.prepare(s);l&&Object.assign(i,l)}return i},animation:({from:o,to:s,context:i,...r})=>{const l=fo(o,s);if(!l)return new h.MultiAnimation([],{mode:"parallel"});const c=mo(l,o,s,i.scrollOffset),a=[],f={from:o,to:s,resolved:l,input:c,physics:n,extras:r,onComplete:m=>{a.push(m)}},d=[];for(const m of t)m.contribute&&d.push(...m.contribute(f));const y=d[0];if(y){const m=y.onComplete;y.onComplete=()=>{m==null||m();for(const u of a)try{u()}catch(b){console.error("[zoom] cleanup error",b)}}}return new h.MultiAnimation(d,{mode:"parallel"})}}};function $o(e){const t=e.type??"static",n=e.variant??(e.fade?"fade":"default");return{type:t,variant:n}}function Eo(e){const t=$o(e);return P(e.paths,()=>So(t))}exports.Animation=h.Animation;exports.MultiAnimation=h.MultiAnimation;exports.WebAnimation=h.WebAnimation;exports.axis=ye;exports.blind=Ee;exports.drill=Fe;exports.fade=Me;exports.film=Be;exports.hero=wn;exports.jaemin=xn;exports.rotate=Pn;exports.scroll=Tn;exports.sheet=Un;exports.slide=zn;exports.strip=Bn;exports.zoom=Eo;
|
package/dist/index.js
CHANGED
package/dist/internal.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var ut=Object.defineProperty;var ft=(t,n,e)=>n in t?ut(t,n,{enumerable:!0,configurable:!0,writable:!0,value:e}):t[n]=e;var W=(t,n,e)=>ft(t,typeof n!="symbol"?n+"":n,e);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const H=require("./multi-animation-Dw2JTJI2.cjs");class st extends H.Animation{constructor(){super(...arguments);W(this,"child",null);W(this,"_state","idle");W(this,"_settled",!1);W(this,"listeners",new Set)}attach(e){const o=this.child;if(this.child=e,this._settled=!1,o){const m=o.getPose();o.complete(),e.matchInto(m)}e.playbackRate=this.playbackRate;const c=e.onComplete;e.onComplete=()=>{c==null||c(),this.child===e&&(this.child=null,this._state="idle",this._settled=!0),this.notify()};const d=e.onUpdate;e.onUpdate=m=>{var S;d==null||d(m),(S=this.onUpdate)==null||S.call(this,m),this.notify()},this._state==="paused"?e.pause():this._state==="reversing"?e.reverse():(this._state="playing",e.play()),this.notify()}play(){var e;this._state="playing",this._settled=!1,(e=this.child)==null||e.play(),this.notify()}reverse(){var e;this._state="reversing",this._settled=!1,(e=this.child)==null||e.reverse(),this.notify()}pause(){var e;this._state="paused",(e=this.child)==null||e.pause(),this.notify()}complete(){var e;(e=this.child)==null||e.complete(),this.notify()}get isAnimating(){var e;return((e=this.child)==null?void 0:e.isAnimating)??!1}get isPaused(){return this._state==="paused"}get isComplete(){return this._settled&&!this.child}get isReversing(){var e;return((e=this.child)==null?void 0:e.isReversing)??this._state==="reversing"}get progress(){var e;return((e=this.child)==null?void 0:e.progress)??0}findTimeForProgress(e){var o;return((o=this.child)==null?void 0:o.findTimeForProgress(e))??null}get playbackRate(){return super.playbackRate}set playbackRate(e){super.playbackRate=e,this.child&&(this.child.playbackRate=e),this.notify()}getPose(){var e;return((e=this.child)==null?void 0:e.getPose())??[]}getTimeline(){var e;return((e=this.child)==null?void 0:e.getTimeline())??[]}matchInto(e){var o;(o=this.child)==null||o.matchInto(e)}get activeChild(){return this.child}subscribe(e){return this.listeners.add(e),()=>{this.listeners.delete(e)}}notify(){for(const e of this.listeners)e()}}const dt=(t,n)=>{var e;t.style.position="absolute",t.style.width="100%",t.style.top=`${-1*(((e=n==null?void 0:n.scrollOffset)==null?void 0:e.y)??0)}px`,t.style.left="0"},Q=new Set(["auto","scroll","overlay"]),mt=t=>{let n=t.parentElement;for(;n&&n!==document.body;){const e=window.getComputedStyle(n);if(Q.has(e.overflowY)||Q.has(e.overflowX))return n;n=n.parentElement}return document.documentElement},ht=t=>{let n=t.parentElement;for(;n&&n!==document.body;){const e=window.getComputedStyle(n).position;if(e==="relative"||e==="absolute"||e==="fixed"||e==="sticky")return n;n=n.parentElement}return document.body};function gt(t){const n=Object.keys(t);return Promise.all(n.map(e=>t[e])).then(e=>{const o={};return n.forEach((c,d)=>{o[c]=e[d]}),o})}function yt(t){const n=t.filter(e=>e.symmetric).map(e=>({from:e.to,to:e.from,transition:e.transition}));return[...t,...n]}function F(t,n){if(n==="*")return!0;if(n.endsWith("/*")){const e=n.slice(0,-1);return t.startsWith(e)&&t.length>e.length}return t===n}function pt(t,n,e){for(const o of e)if(F(t,o.from)&&F(n,o.to))return o.transition;for(const o of e)if((o.from==="*"||F(t,o.from))&&(o.to==="*"||F(n,o.to)))return o.transition;return null}const vt=768,Et=10,wt=10;function St(t={}){const{preserveScroll:n=i=>i}=t,e=typeof n=="function"?n:()=>n;let o=null,c=!1,d=!1;const m=()=>{const i=(o==null?void 0:o.clientWidth)??0,l=i>0?i:typeof window<"u"?window.innerWidth:0;return l>0&&l<vt},S=()=>(d||(c=m(),d=!0),c),y=i=>{var v;const l=e(S());if(l===!1)return{preserves:!1,shared:!1,storageKey:`path:${i}`};if(l===!0)return{preserves:!0,shared:!1,storageKey:`path:${i}`};const g=((v=l.exclude)==null?void 0:v.some(r=>F(i,r)))??!1,p=!g&&!!l.key;return{preserves:!g,shared:p,storageKey:p?`shared:${l.key}`:`path:${i}`}},x=i=>y(i).preserves;let R=null;const h=new Map;let T=null,A=!1,O=0;const I=()=>{o&&T&&!A&&h.set(y(T).storageKey,{x:o.scrollLeft,y:o.scrollTop})},L=i=>{if(!o)return;const l=y(i);if(l.preserves&&l.shared&&!h.has(l.storageKey))return;const g=l.preserves&&h.has(l.storageKey)?h.get(l.storageKey):{x:0,y:0};let p=0;const v=()=>{if(!o)return;o.scrollTo({top:g.y,left:g.x}),!(Math.abs(o.scrollTop-g.y)<1&&Math.abs(o.scrollLeft-g.x)<1)&&p<Et&&(p++,requestAnimationFrame(v))};requestAnimationFrame(v)};return{initializeContext:(i,l)=>{A=!0;const g=++O;R=i,o||(o=mt(i),c=m(),d=!0,typeof ResizeObserver<"u"&&new ResizeObserver(()=>{c=m()}).observe(o),(o===document.documentElement?window:o).addEventListener("scroll",I,{passive:!0})),T=l,L(l);let p=0;const v=()=>{g===O&&(p++,p>=wt?A=!1:requestAnimationFrame(v))};requestAnimationFrame(v)},calculateScrollOffset:(i,l)=>{const g=i?y(i).storageKey:null,p=g&&h.has(g)?h.get(g):{x:0,y:0},v=l?y(l):null,r=v!=null&&v.preserves?v.storageKey:null,s=r&&h.has(r)?h.get(r):{x:0,y:0};return{x:-s.x+p.x,y:-s.y+p.y}},evictScrollPosition:i=>{h.delete(y(i).storageKey)},shouldPreserve:x,getScrollContainer:()=>o,getPositionedParentElement:()=>R?ht(R):document.body,getScrollPosition:i=>{const l=i?y(i).storageKey:null;return l&&h.has(l)?h.get(l):{x:0,y:0}}}}const tt=30,et=8,nt=1.2,ot=30,bt=600;function Tt(){let t=null,n=!1,e=!1,o=null,c=null,d=!1;const m=(a,u)=>{for(let f=0;f<a.length;f++){const E=a.item(f);if(E&&E.identifier===u)return E}return null},S=()=>{o!==null&&(clearTimeout(o),o=null)},y=()=>{c!==null&&(clearTimeout(c),c=null)},x=()=>{n=!0,e=!0,S(),y(),o=setTimeout(()=>{n=!1,e=!1,o=null},bt)},R=a=>{if(a.touches.length!==1){t=null;return}const u=a.touches.item(0);if(!u){t=null;return}const f=window.innerWidth,E=u.clientX<=tt,P=u.clientX>=f-tt;if(!E&&!P){t=null;return}t={identifier:u.identifier,startX:u.clientX,startY:u.clientY,fromLeftEdge:E,moved:!1}},h=a=>{if(!t)return;if(a.touches.length!==1){t=null;return}const u=m(a.touches,t.identifier);if(!u){t=null;return}const f=u.clientX-t.startX,E=u.clientY-t.startY,P=Math.abs(f),i=Math.abs(E);if(i>et&&i>P*nt){t=null;return}const l=t.fromLeftEdge?f>0:f<0;P>et&&P>i*nt&&l&&(t.moved=!0)},T=a=>{if(!t)return;const u=m(a.changedTouches,t.identifier);if(!u){t=null;return}const f=u.clientX-t.startX,E=t.fromLeftEdge?f>0:f<0;if(t.moved&&E&&Math.abs(f)>=ot){x(),t=null;return}t.moved&&Math.abs(f)>=ot&&x(),t=null},A=()=>{t&&(t.moved&&x(),t=null)};return{initialize:()=>{if(typeof window>"u"||d)return;d=!0;const a={passive:!0,capture:!0};window.addEventListener("touchstart",R,a),window.addEventListener("touchmove",h,a),window.addEventListener("touchend",T,a),window.addEventListener("touchcancel",A,a)},destroy:()=>{if(typeof window>"u"||!d)return;d=!1;const a={capture:!0};window.removeEventListener("touchstart",R,a),window.removeEventListener("touchmove",h,a),window.removeEventListener("touchend",T,a),window.removeEventListener("touchcancel",A,a),S(),y(),t=null,n=!1,e=!1},isSwipeBack:()=>{const a=n||e;return a&&S(),a},onPageEnter:()=>{n=!1,S(),y(),c=setTimeout(()=>{e=!1,c=null},0)}}}function Pt(){let t=null;function n(){var o,c;t&&((o=t.outResolve)==null||o.call(t,null),(c=t.inResolve)==null||c.call(t,null),t=null)}function e(){if(t!=null&&t.from&&(t!=null&&t.to)&&(t!=null&&t.outResolve)&&(t!=null&&t.inResolve)){if(t.from===t.to){n();return}const o={from:t.from,to:t.to};t.outResolve(o),t.inResolve(o),t=null}}return{trigger(o,c){var m;c==="out"&&(t==null?void 0:t.to)===o&&!t.from&&((m=t.inResolve)==null||m.call(t,null),t={}),t&&(c==="out"&&t.from&&t.from!==o||c==="in"&&t.to&&t.to!==o)&&n(),t||(t={}),c==="out"?t.from=o:t.to=o},get(o){return new Promise(c=>{t||(t={}),o==="out"?t.outResolve=c:t.inResolve=c,e()})}}}const X=new Map;let z=null,rt=!1;function it(t){if(t instanceof HTMLElement&&X.has(t)){const n=X.get(t);X.delete(t),queueMicrotask(n)}for(const n of Array.from(t.childNodes))it(n)}function Rt(){if(rt||typeof document>"u")return;rt=!0,z=new MutationObserver(n=>{for(const e of n)for(const o of Array.from(e.removedNodes))it(o)});const t=()=>{z==null||z.observe(document.body,{childList:!0,subtree:!0})};document.body?t():document.addEventListener("DOMContentLoaded",t,{once:!0})}function At(t,n){return Rt(),X.set(t,n),()=>{X.delete(t)}}function xt(t){return Array.isArray(t)}function lt(t){const n=[];for(const e of t)xt(e)?n.push(...lt(e)):n.push(e);return n}function Lt(t,n={}){const{transitions:e=[],middleware:o=(r,s)=>({from:r,to:s}),preserveScroll:c=r=>r}=t,d=n.host??new st,m=Pt(),S=yt(lt(e)),y=Tt();y.initialize();const{initializeContext:x,calculateScrollOffset:R,evictScrollPosition:h,shouldPreserve:T,getScrollContainer:A,getPositionedParentElement:O,getScrollPosition:I}=St({preserveScroll:c});let L=null,k=null;const a=new WeakMap,u=r=>{a.set(r,{parent:r.parentElement,nextSibling:r.nextElementSibling})},f=r=>{const s=a.get(r);return s||{parent:r.parentElement,nextSibling:r.nextElementSibling}},E=(r,s,b,w,B)=>{const K=w.element,D=B.element,{parent:M,nextSibling:C}=w.parent?{parent:w.parent,nextSibling:w.nextSibling}:f(K),_=K.cloneNode(!0),q={scrollOffset:R(s,b),from:{scroll:I(s)},to:{scroll:I(b)},get scrollingElement(){return A()||document.documentElement},get positionedParent(){return O()}};dt(_,q),T(s)||h(s);const j=Promise.resolve(_),Z=Promise.resolve(D),J=[],ct={from:j,to:Z,context:q,createElement:((Y,$="div")=>{const N=document.createElement($);return N.setAttribute("data-ssgoi-id",Y),J.push(N),N})},at=Promise.resolve(r.prepare?r.prepare(ct):{});gt({from:j,to:Z,extras:at}).then(({from:Y,to:$,extras:N})=>{M&&(C&&M.contains(C)?M.insertBefore(_,C):M.appendChild(_));const G=r.animation({from:Y,to:$,context:q,...N}),U=G.onComplete;G.onComplete=()=>{U==null||U(),_.parentElement&&_.parentElement.removeChild(_);for(const V of J)V.parentElement&&V.parentElement.removeChild(V)},d.attach(G)})},P=(r,s)=>{const b=y.isSwipeBack();m.trigger(r,s),m.get(s).then(w=>{if(s==="in"&&y.onPageEnter(),!w)return;if(b){s==="out"&&w.from&&!T(w.from)&&h(w.from),L=null,k=null;return}if(s!=="in")return;const{from:B,to:K}=o(w.from,w.to),D=pt(B,K,S),M=L,C=k;L=null,k=null,!(!D||!M||!C)&&E(D,B,K,M,C)})},i=(r,s)=>{const b=f(r);L={element:r,parent:b.parent,nextSibling:b.nextSibling};const w=r.getAttribute("data-ssgoi-transition")??s;P(w,"out")},l=new WeakSet,g=(r,s)=>{l.has(s)||(l.add(s),u(s),x(s,r),k={element:s,parent:s.parentElement,nextSibling:s.nextElementSibling},P(r,"in"),At(s,()=>i(s,r)))},p=new Map;return{register:g,refFor:r=>{let s=p.get(r);return s||(s=b=>{b&&g(r,b)},p.set(r,s)),s}}}exports.Animation=H.Animation;exports.MultiAnimation=H.MultiAnimation;exports.WebAnimation=H.WebAnimation;exports.HostAnimation=st;exports.createSggoiTransitionContext=Lt;
|
|
1
|
+
"use strict";var mt=Object.defineProperty;var ht=(t,n,e)=>n in t?mt(t,n,{enumerable:!0,configurable:!0,writable:!0,value:e}):t[n]=e;var F=(t,n,e)=>ht(t,typeof n!="symbol"?n+"":n,e);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const z=require("./multi-animation-Dw2JTJI2.cjs");class lt extends z.Animation{constructor(){super(...arguments);F(this,"child",null);F(this,"_state","idle");F(this,"_settled",!1);F(this,"listeners",new Set)}attach(e){const o=this.child;if(this.child=e,this._settled=!1,o){const l=o.getPose();o.complete(),e.matchInto(l)}e.playbackRate=this.playbackRate;const i=e.onComplete;e.onComplete=()=>{i==null||i(),this.child===e&&(this.child=null,this._state="idle",this._settled=!0),this.notify()};const f=e.onUpdate;e.onUpdate=l=>{var d;f==null||f(l),(d=this.onUpdate)==null||d.call(this,l),this.notify()},this._state==="paused"?e.pause():this._state==="reversing"?e.reverse():(this._state="playing",e.play()),this.notify()}play(){var e;this._state="playing",this._settled=!1,(e=this.child)==null||e.play(),this.notify()}reverse(){var e;this._state="reversing",this._settled=!1,(e=this.child)==null||e.reverse(),this.notify()}pause(){var e;this._state="paused",(e=this.child)==null||e.pause(),this.notify()}complete(){var e;(e=this.child)==null||e.complete(),this.notify()}get isAnimating(){var e;return((e=this.child)==null?void 0:e.isAnimating)??!1}get isPaused(){return this._state==="paused"}get isComplete(){return this._settled&&!this.child}get isReversing(){var e;return((e=this.child)==null?void 0:e.isReversing)??this._state==="reversing"}get progress(){var e;return((e=this.child)==null?void 0:e.progress)??0}findTimeForProgress(e){var o;return((o=this.child)==null?void 0:o.findTimeForProgress(e))??null}get playbackRate(){return super.playbackRate}set playbackRate(e){super.playbackRate=e,this.child&&(this.child.playbackRate=e),this.notify()}getPose(){var e;return((e=this.child)==null?void 0:e.getPose())??[]}getTimeline(){var e;return((e=this.child)==null?void 0:e.getTimeline())??[]}matchInto(e){var o;(o=this.child)==null||o.matchInto(e)}get activeChild(){return this.child}subscribe(e){return this.listeners.add(e),()=>{this.listeners.delete(e)}}notify(){for(const e of this.listeners)e()}}const gt=(t,n)=>{var e;t.style.position="absolute",t.style.width="100%",t.style.top=`${-1*(((e=n==null?void 0:n.scrollOffset)==null?void 0:e.y)??0)}px`,t.style.left="0"},tt=new Set(["auto","scroll","overlay"]),yt=t=>{let n=t.parentElement;for(;n&&n!==document.body;){const e=window.getComputedStyle(n);if(tt.has(e.overflowY)||tt.has(e.overflowX))return n;n=n.parentElement}return document.documentElement},vt=t=>{let n=t.parentElement;for(;n&&n!==document.body;){const e=window.getComputedStyle(n).position;if(e==="relative"||e==="absolute"||e==="fixed"||e==="sticky")return n;n=n.parentElement}return document.body};function pt(t){const n=Object.keys(t);return Promise.all(n.map(e=>t[e])).then(e=>{const o={};return n.forEach((i,f)=>{o[i]=e[f]}),o})}function Et(t){const n=t.filter(e=>e.symmetric).map(e=>({from:e.to,to:e.from,transition:e.transition}));return[...t,...n]}function W(t,n){if(n==="*")return!0;if(n.endsWith("/*")){const e=n.slice(0,-1);return t.startsWith(e)&&t.length>e.length}return t===n}function Tt(t,n,e){for(const o of e)if(W(t,o.from)&&W(n,o.to))return o.transition;for(const o of e)if((o.from==="*"||W(t,o.from))&&(o.to==="*"||W(n,o.to)))return o.transition;return null}const bt=768,St=10,wt=10;function Rt(t={}){const{preserveScroll:n=c=>c}=t,e=typeof n=="function"?n:()=>n;let o=null,i=!1,f=!1;const l=()=>{const c=(o==null?void 0:o.clientWidth)??0,a=c>0?c:typeof window<"u"?window.innerWidth:0;return a>0&&a<bt},d=()=>(f||(i=l(),f=!0),i),g=c=>{var E;const a=e(d());if(a===!1)return{preserves:!1,shared:!1,storageKey:`path:${c}`};if(a===!0)return{preserves:!0,shared:!1,storageKey:`path:${c}`};const v=((E=a.exclude)==null?void 0:E.some(r=>W(c,r)))??!1,p=!v&&!!a.key;return{preserves:!v,shared:p,storageKey:p?`shared:${a.key}`:`path:${c}`}},L=c=>g(c).preserves;let A=null;const y=new Map;let w=null,O=!1,k=0;const I=()=>{o&&w&&!O&&y.set(g(w).storageKey,{x:o.scrollLeft,y:o.scrollTop})},M=c=>{if(!o)return;const a=g(c);if(a.preserves&&a.shared&&!y.has(a.storageKey))return;const v=a.preserves&&y.has(a.storageKey)?y.get(a.storageKey):{x:0,y:0};let p=0;const E=()=>{if(!o)return;o.scrollTo({top:v.y,left:v.x}),!(Math.abs(o.scrollTop-v.y)<1&&Math.abs(o.scrollLeft-v.x)<1)&&p<St&&(p++,requestAnimationFrame(E))};requestAnimationFrame(E)};return{initializeContext:(c,a)=>{O=!0;const v=++k;A=c,o||(o=yt(c),i=l(),f=!0,typeof ResizeObserver<"u"&&new ResizeObserver(()=>{i=l()}).observe(o),(o===document.documentElement?window:o).addEventListener("scroll",I,{passive:!0})),w=a,M(a);let p=0;const E=()=>{v===k&&(p++,p>=wt?O=!1:requestAnimationFrame(E))};requestAnimationFrame(E)},calculateScrollOffset:(c,a)=>{const v=c?g(c).storageKey:null,p=v&&y.has(v)?y.get(v):{x:0,y:0},E=a?g(a):null,r=E!=null&&E.preserves?E.storageKey:null,s=r&&y.has(r)?y.get(r):{x:0,y:0};return{x:-s.x+p.x,y:-s.y+p.y}},evictScrollPosition:c=>{y.delete(g(c).storageKey)},shouldPreserve:L,getScrollContainer:()=>o,getPositionedParentElement:()=>A?vt(A):document.body,getScrollPosition:c=>{const a=c?g(c).storageKey:null;return a&&y.has(a)?y.get(a):{x:0,y:0}}}}const et=30,nt=8,ot=1.2,rt=30,At=600;function Ot(){let t=null,n=!1,e=!1,o=null,i=null,f=!1;const l=(u,m)=>{for(let h=0;h<u.length;h++){const T=u.item(h);if(T&&T.identifier===m)return T}return null},d=()=>{o!==null&&(clearTimeout(o),o=null)},g=()=>{i!==null&&(clearTimeout(i),i=null)},L=()=>{n=!0,e=!0,d(),g(),o=setTimeout(()=>{n=!1,e=!1,o=null},At)},A=u=>{if(u.touches.length!==1){t=null;return}const m=u.touches.item(0);if(!m){t=null;return}const h=window.innerWidth,T=m.clientX<=et,R=m.clientX>=h-et;if(!T&&!R){t=null;return}t={identifier:m.identifier,startX:m.clientX,startY:m.clientY,fromLeftEdge:T,moved:!1}},y=u=>{if(!t)return;if(u.touches.length!==1){t=null;return}const m=l(u.touches,t.identifier);if(!m){t=null;return}const h=m.clientX-t.startX,T=m.clientY-t.startY,R=Math.abs(h),c=Math.abs(T);if(c>nt&&c>R*ot){t=null;return}const a=t.fromLeftEdge?h>0:h<0;R>nt&&R>c*ot&&a&&(t.moved=!0)},w=u=>{if(!t)return;const m=l(u.changedTouches,t.identifier);if(!m){t=null;return}const h=m.clientX-t.startX,T=t.fromLeftEdge?h>0:h<0;if(t.moved&&T&&Math.abs(h)>=rt){L(),t=null;return}t.moved&&Math.abs(h)>=rt&&L(),t=null},O=()=>{t&&(t.moved&&L(),t=null)};return{initialize:()=>{if(typeof window>"u"||f)return;f=!0;const u={passive:!0,capture:!0};window.addEventListener("touchstart",A,u),window.addEventListener("touchmove",y,u),window.addEventListener("touchend",w,u),window.addEventListener("touchcancel",O,u)},destroy:()=>{if(typeof window>"u"||!f)return;f=!1;const u={capture:!0};window.removeEventListener("touchstart",A,u),window.removeEventListener("touchmove",y,u),window.removeEventListener("touchend",w,u),window.removeEventListener("touchcancel",O,u),d(),g(),t=null,n=!1,e=!1},isSwipeBack:()=>{const u=n||e;return u&&d(),u},onPageEnter:()=>{n=!1,d(),g(),i=setTimeout(()=>{e=!1,i=null},0)}}}function Pt(){let t=null;function n(){var o,i;t&&((o=t.outResolve)==null||o.call(t,null),(i=t.inResolve)==null||i.call(t,null),t=null)}function e(){if(t!=null&&t.from&&(t!=null&&t.to)&&(t!=null&&t.outResolve)&&(t!=null&&t.inResolve)){if(t.from===t.to){n();return}const o={from:t.from,to:t.to};t.outResolve(o),t.inResolve(o),t=null}}return{trigger(o,i){var l;i==="out"&&(t==null?void 0:t.to)===o&&!t.from&&((l=t.inResolve)==null||l.call(t,null),t={}),t&&(i==="out"&&t.from&&t.from!==o||i==="in"&&t.to&&t.to!==o)&&n(),t||(t={}),i==="out"?t.from=o:t.to=o},get(o){return new Promise(i=>{t||(t={}),o==="out"?t.outResolve=i:t.inResolve=i,e()})}}}const B=new Map;let H=null,st=!1;function ct(t){if(t instanceof HTMLElement&&B.has(t)){const n=B.get(t);B.delete(t),queueMicrotask(n)}for(const n of Array.from(t.childNodes))ct(n)}function Lt(){if(st||typeof document>"u")return;st=!0,H=new MutationObserver(n=>{for(const e of n)for(const o of Array.from(e.removedNodes))ct(o)});const t=()=>{H==null||H.observe(document.body,{childList:!0,subtree:!0})};document.body?t():document.addEventListener("DOMContentLoaded",t,{once:!0})}function Mt(t,n){return Lt(),B.set(t,n),()=>{B.delete(t)}}function _t(t){return Array.isArray(t)}function at(t){const n=[];for(const e of t)_t(e)?n.push(...at(e)):n.push(e);return n}function xt(t,n={}){const{transitions:e=[],middleware:o=(r,s)=>({from:r,to:s}),preserveScroll:i=r=>r}=t,f=n.host??new lt,l=Pt(),d=Et(at(e)),g=Ot();g.initialize();const{initializeContext:L,calculateScrollOffset:A,evictScrollPosition:y,shouldPreserve:w,getScrollContainer:O,getPositionedParentElement:k,getScrollPosition:I}=Rt({preserveScroll:i});let M=null,x=null;const u=new WeakMap,m=r=>{u.set(r,{parent:r.parentElement,nextSibling:r.nextElementSibling})},h=r=>{const s=u.get(r);return s||{parent:r.parentElement,nextSibling:r.nextElementSibling}},T=(r,s,S,b,D)=>{const N=b.element,X=D.element,{parent:_,nextSibling:C}=b.parent?{parent:b.parent,nextSibling:b.nextSibling}:h(N),P=N.cloneNode(!0);P.setAttribute("data-ssgoi-clone","");const q={scrollOffset:A(s,S),from:{scroll:I(s)},to:{scroll:I(S)},get scrollingElement(){return O()||document.documentElement},get positionedParent(){return k()}};gt(P,q),w(s)||y(s);const Z=Promise.resolve(P),J=Promise.resolve(X),Q=[],ft={from:Z,to:J,context:q,createElement:(($,U="div")=>{const K=document.createElement(U);return K.setAttribute("data-ssgoi-id",$),Q.push(K),K})},dt=Promise.resolve(r.prepare?r.prepare(ft):{});pt({from:Z,to:J,extras:dt}).then(({from:$,to:U,extras:K})=>{_&&(C&&_.contains(C)?_.insertBefore(P,C):_.appendChild(P));const Y=r.animation({from:$,to:U,context:q,...K}),G=Y.onComplete;Y.onComplete=()=>{G==null||G(),P.parentElement&&P.parentElement.removeChild(P);for(const V of Q)V.parentElement&&V.parentElement.removeChild(V)},f.attach(Y)})},R=(r,s)=>{const S=g.isSwipeBack();l.trigger(r,s),l.get(s).then(b=>{if(s==="in"&&g.onPageEnter(),!b)return;if(S){s==="out"&&b.from&&!w(b.from)&&y(b.from),M=null,x=null;return}if(s!=="in")return;const{from:D,to:N}=o(b.from,b.to),X=Tt(D,N,d),_=M,C=x;M=null,x=null,!(!X||!_||!C)&&T(X,D,N,_,C)})},c=(r,s)=>{const S=h(r);M={element:r,parent:S.parent,nextSibling:S.nextSibling};const b=r.getAttribute("data-ssgoi-transition")??s;R(b,"out")},a=new WeakSet,v=(r,s)=>{a.has(s)||(a.add(s),m(s),L(s,r),x={element:s,parent:s.parentElement,nextSibling:s.nextElementSibling},R(r,"in"),Mt(s,()=>c(s,r)))},p=new Map;return{register:v,refFor:r=>{let s=p.get(r);return s||(s=S=>{S&&v(r,S)},p.set(r,s)),s}}}const ut="data-ssgoi-root",Ct=`[${ut}]`,j="data-ssgoi-transition",it=`[${j}]`,kt="[data-ssgoi-clone]";function It(){return typeof MutationObserver<"u"&&typeof HTMLElement<"u"&&typeof Node<"u"}function Nt(t){return t.nodeType===Node.ELEMENT_NODE}function Kt(t){return t instanceof HTMLElement}function Ft(t,n){if(!It())return()=>{};t.setAttribute(ut,"");const e=l=>l.closest(Ct)===t,o=l=>{if(!Kt(l)||!e(l)||l.closest(kt))return;const d=l.getAttribute(j);d!==null&&n.register(d,l)},i=l=>{if(Nt(l)){l.matches(it)&&o(l);for(const d of l.querySelectorAll(it))o(d)}},f=new MutationObserver(l=>{for(const d of l){if(d.type==="attributes"){o(d.target);continue}for(const g of d.addedNodes)i(g)}});return f.observe(t,{childList:!0,subtree:!0,attributes:!0,attributeFilter:[j]}),i(t),()=>f.disconnect()}exports.Animation=z.Animation;exports.MultiAnimation=z.MultiAnimation;exports.WebAnimation=z.WebAnimation;exports.HostAnimation=lt;exports.createSggoiTransitionContext=xt;exports.observeSsgoiTransitions=Ft;
|
package/dist/internal.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
export { createSggoiTransitionContext } from './ssgoi-transition/create-ssgoi-transition-context';
|
|
2
|
+
export { observeSsgoiTransitions } from './ssgoi-transition/observe-ssgoi-transitions';
|
|
2
3
|
export { Animation, WebAnimation, MultiAnimation, HostAnimation, } from './animation';
|
|
3
4
|
export type { SsgoiConfig, SsgoiContext, SsgoiPathTransition, SsgoiPathTransitionInput, TransitionConfig, PrepareArgs, AnimationFactoryArgs, CreateElement, SsgoiTransitionContext, Pose, Timeline, } from './types/index.ts';
|
|
4
5
|
//# sourceMappingURL=internal.d.ts.map
|
package/dist/internal.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../src/lib/internal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,4BAA4B,EAAE,MAAM,oDAAoD,CAAC;AAClG,OAAO,EACL,SAAS,EACT,YAAY,EACZ,cAAc,EACd,aAAa,GACd,MAAM,aAAa,CAAC;AACrB,YAAY,EACV,WAAW,EACX,YAAY,EACZ,mBAAmB,EACnB,wBAAwB,EACxB,gBAAgB,EAChB,WAAW,EACX,oBAAoB,EACpB,aAAa,EACb,sBAAsB,EACtB,IAAI,EACJ,QAAQ,GACT,MAAM,QAAQ,CAAC"}
|
|
1
|
+
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../src/lib/internal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,4BAA4B,EAAE,MAAM,oDAAoD,CAAC;AAClG,OAAO,EAAE,uBAAuB,EAAE,MAAM,8CAA8C,CAAC;AACvF,OAAO,EACL,SAAS,EACT,YAAY,EACZ,cAAc,EACd,aAAa,GACd,MAAM,aAAa,CAAC;AACrB,YAAY,EACV,WAAW,EACX,YAAY,EACZ,mBAAmB,EACnB,wBAAwB,EACxB,gBAAgB,EAChB,WAAW,EACX,oBAAoB,EACpB,aAAa,EACb,sBAAsB,EACtB,IAAI,EACJ,QAAQ,GACT,MAAM,QAAQ,CAAC"}
|