@ssgoi/core 6.6.1 → 6.6.3

package/README.md

@@ -42,11 +42,12 @@ npm install @ssgoi/react
 
 ### Add Transitions in 30 Seconds
 
-#### 1. Wrap your app
+#### 1. Wrap your React app
 
 ```tsx
 import { Ssgoi } from "@ssgoi/react";
 import { fade } from "@ssgoi/react/view-transitions";
+import { SsgoiTransitionBoundary } from "./ssgoi-transition-boundary";
 
 const config = {
   transitions: [fade({ paths: ["/", "/about"] })],
@@ -54,20 +55,25 @@ const config = {
 
 export default function App() {
   return (
-    <Ssgoi config={config}>
-      {/* relative + z-0: the outgoing page is cloned with position:absolute */}
-      <div className="relative z-0">{/* Your app */}</div>
-    </Ssgoi>
+    <div className="relative z-0 min-h-dvh bg-white">
+      {/* Layout shell above: positioned ancestor + stacking context for the OUT clone. */}
+      <Ssgoi config={config}>
+        {/* Routed content marker. Layout positioning belongs to the outer wrapper. */}
+        <SsgoiTransitionBoundary className="min-h-full bg-white">
+          {/* Your app */}
+        </SsgoiTransitionBoundary>
+      </Ssgoi>
+    </div>
   );
 }
 ```
 
-#### 2. Mark your pages
+#### 2. Keep React pages unmarked
 
 ```tsx
 export default function HomePage() {
   return (
-    <main data-ssgoi-transition="/">
+    <main>
       <h1>Welcome</h1>
       {/* Page content */}
     </main>
@@ -75,6 +81,51 @@ export default function HomePage() {
 }
 ```
 
+For React adapters, create one router-specific `SsgoiTransitionBoundary` utility
+in your layout. It reads the current pathname internally, sets the transition
+boundary key, and uses that pathname as a logical page id matched by config such
+as `/products/*`. Use `/products/**` when the parent path itself should match
+too.
+
+Next.js implementation:
+
+```tsx
+"use client";
+
+import { type ElementType, type ReactNode } from "react";
+import { usePathname } from "next/navigation";
+
+export function SsgoiTransitionBoundary({
+  children,
+  as,
+  className,
+}: {
+  children: ReactNode;
+  as?: ElementType;
+  className?: string;
+}) {
+  const pathname = usePathname();
+  const Component = as ?? "div";
+
+  return (
+    <Component
+      key={pathname}
+      data-ssgoi-transition={pathname}
+      className={className}
+    >
+      {children}
+    </Component>
+  );
+}
+```
+
+React Router and TanStack Router use the same component body with their own
+pathname hook.
+
+For SvelteKit, Nuxt/Vue, Solid, and Angular, mark each routed page boundary
+directly with `data-ssgoi-transition` instead of using a layout-level utility.
+The value can be a hard-coded logical id; it only has to match your config.
+
 **That's it!** Your configured pages now transition smoothly with a fade effect.
 
 ## Advanced Transitions
@@ -161,9 +212,15 @@ For mount/unmount of individual elements (not whole pages):
 
 ## Layout Requirements
 
-The element wrapping `<Ssgoi>` needs `position: relative` and `z-index: 0`.
+The outer element wrapping the SSGOI provider / `<Ssgoi>` needs
+`position: relative` and `z-index: 0`.
 
-When a page leaves, SSGOI clones it back into the DOM with `position: absolute` so it can animate out while the new page animates in. Without a positioned, stacking-context ancestor the clone jumps to the wrong place or falls behind the background. Add `overflow-x-clip` too if you use horizontal transitions (`slide`, `drill`).
+When a page leaves, SSGOI clones it back into the DOM with `position: absolute`
+so it can animate out while the new page animates in. Without a positioned,
+stacking-context ancestor the clone jumps to the wrong place or falls behind the
+background. Add `overflow-x-clip` too if you use horizontal transitions
+(`slide`, `drill`). Keep these layout classes on the outer wrapper, not on the
+route boundary marker.
 
 ```tsx
 <div className="relative z-0 overflow-x-clip">

package/dist/internal.cjs

@@ -1 +1 @@
-"use strict";var Ot=Object.defineProperty;var _t=(t,s,e)=>s in t?Ot(t,s,{enumerable:!0,configurable:!0,writable:!0,value:e}):t[s]=e;var F=(t,s,e)=>_t(t,typeof s!="symbol"?s+"":s,e);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const J=require("./multi-animation-uzEnQnrG.cjs");class St extends J.Animation{constructor(){super(...arguments);F(this,"child",null);F(this,"_state","idle");F(this,"_settled",!1);F(this,"listeners",new Set)}attach(e){const n=this.child;if(this.child=e,this._settled=!1,n){const a=n.getPose();n.complete(),e.matchInto(a)}e.playbackRate=this.playbackRate;const l=e.onComplete;e.onComplete=()=>{l==null||l(),this.child===e&&(this.child=null,this._state="idle",this._settled=!0),this.notify()};const p=e.onUpdate;e.onUpdate=a=>{var g;p==null||p(a),(g=this.onUpdate)==null||g.call(this,a),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 n;return((n=this.child)==null?void 0:n.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 n;(n=this.child)==null||n.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 kt=(t,s)=>{var e;t.style.position="absolute",t.style.width="100%",t.style.top=`${-1*(((e=s==null?void 0:s.scrollOffset)==null?void 0:e.y)??0)}px`,t.style.left="0"},yt=new Set(["auto","scroll","overlay"]),Dt=t=>{let s=t.parentElement;for(;s&&s!==document.body;){const e=window.getComputedStyle(s);if(yt.has(e.overflowY)||yt.has(e.overflowX))return s;s=s.parentElement}return document.documentElement},Nt=t=>{let s=t.parentElement;for(;s&&s!==document.body;){const e=window.getComputedStyle(s).position;if(e==="relative"||e==="absolute"||e==="fixed"||e==="sticky")return s;s=s.parentElement}return document.body};function Ht(t){const s=Object.keys(t);return Promise.all(s.map(e=>t[e])).then(e=>{const n={};return s.forEach((l,p)=>{n[l]=e[p]}),n})}function It(t){const s=t.filter(e=>e.symmetric).map(e=>({from:e.to,to:e.from,transition:e.transition}));return[...t,...s]}function K(t,s){if(s==="*")return!0;if(s.endsWith("/*")){const e=s.slice(0,-1);return t.startsWith(e)&&t.length>e.length}return t===s}function Wt(t,s,e){for(const n of e)if(K(t,n.from)&&K(s,n.to))return n.transition;for(const n of e)if((n.from==="*"||K(t,n.from))&&(n.to==="*"||K(s,n.to)))return n.transition;return null}const Ft=768,Kt=10,Bt=10;function Xt(t={}){const{preserveScroll:s=u=>u}=t,e=typeof s=="function"?s:()=>s;let n=null,l=!1,p=!1;const a=()=>{const u=(n==null?void 0:n.clientWidth)??0,c=u>0?u:typeof window<"u"?window.innerWidth:0;return c>0&&c<Ft},g=()=>(p||(l=a(),p=!0),l),v=u=>{var E;const c=e(g());if(c===!1)return{preserves:!1,shared:!1,storageKey:`path:${u}`};if(c===!0)return{preserves:!0,shared:!1,storageKey:`path:${u}`};const m=((E=c.exclude)==null?void 0:E.some(T=>K(u,T)))??!1,w=!m&&!!c.key;return{preserves:!m,shared:w,storageKey:w?`shared:${c.key}`:`path:${u}`}},C=u=>v(u).preserves;let x=null;const b=new Map;let M=null,L=!1,H=0;const I=()=>{n&&M&&!L&&b.set(v(M).storageKey,{x:n.scrollLeft,y:n.scrollTop})},z=u=>{if(!n)return;const c=v(u);if(c.preserves&&c.shared&&!b.has(c.storageKey))return;const m=c.preserves&&b.has(c.storageKey)?b.get(c.storageKey):{x:0,y:0};let w=0;const E=()=>{if(!n)return;n.scrollTo({top:m.y,left:m.x}),!(Math.abs(n.scrollTop-m.y)<1&&Math.abs(n.scrollLeft-m.x)<1)&&w<Kt&&(w++,requestAnimationFrame(E))};requestAnimationFrame(E)};return{initializeContext:(u,c)=>{L=!0;const m=++H;x=u,n||(n=Dt(u),l=a(),p=!0,typeof ResizeObserver<"u"&&new ResizeObserver(()=>{l=a()}).observe(n),(n===document.documentElement?window:n).addEventListener("scroll",I,{passive:!0})),M=c,z(c);let w=0;const E=()=>{m===H&&(w++,w>=Bt?L=!1:requestAnimationFrame(E))};requestAnimationFrame(E)},calculateScrollOffset:(u,c)=>{const m=u?v(u).storageKey:null,w=m&&b.has(m)?b.get(m):{x:0,y:0},E=c?v(c):null,T=E!=null&&E.preserves?E.storageKey:null,N=T&&b.has(T)?b.get(T):{x:0,y:0};return{x:-N.x+w.x,y:-N.y+w.y}},evictScrollPosition:u=>{b.delete(v(u).storageKey)},shouldPreserve:C,getScrollContainer:()=>n,getPositionedParentElement:()=>x?Nt(x):document.body,getScrollPosition:u=>{const c=u?v(u).storageKey:null;return c&&b.has(c)?b.get(c):{x:0,y:0}},getIsMobile:g}}const pt=30,gt=8,mt=1.2,vt=30,zt=600;function $t(){let t=null,s=!1,e=!1,n=null,l=null,p=!1;const a=(d,f)=>{for(let h=0;h<d.length;h++){const S=d.item(h);if(S&&S.identifier===f)return S}return null},g=()=>{n!==null&&(clearTimeout(n),n=null)},v=()=>{l!==null&&(clearTimeout(l),l=null)},C=()=>{s=!0,e=!0,g(),v(),n=setTimeout(()=>{s=!1,e=!1,n=null},zt)},x=d=>{if(d.touches.length!==1){t=null;return}const f=d.touches.item(0);if(!f){t=null;return}const h=window.innerWidth,S=f.clientX<=pt,O=f.clientX>=h-pt;if(!S&&!O){t=null;return}t={identifier:f.identifier,startX:f.clientX,startY:f.clientY,fromLeftEdge:S,moved:!1}},b=d=>{if(!t)return;if(d.touches.length!==1){t=null;return}const f=a(d.touches,t.identifier);if(!f){t=null;return}const h=f.clientX-t.startX,S=f.clientY-t.startY,O=Math.abs(h),u=Math.abs(S);if(u>gt&&u>O*mt){t=null;return}const c=t.fromLeftEdge?h>0:h<0;O>gt&&O>u*mt&&c&&(t.moved=!0)},M=d=>{if(!t)return;const f=a(d.changedTouches,t.identifier);if(!f){t=null;return}const h=f.clientX-t.startX,S=t.fromLeftEdge?h>0:h<0;if(t.moved&&S&&Math.abs(h)>=vt){C(),t=null;return}t.moved&&Math.abs(h)>=vt&&C(),t=null},L=()=>{t&&(t.moved&&C(),t=null)};return{initialize:()=>{if(typeof window>"u"||p)return;p=!0;const d={passive:!0,capture:!0};window.addEventListener("touchstart",x,d),window.addEventListener("touchmove",b,d),window.addEventListener("touchend",M,d),window.addEventListener("touchcancel",L,d)},destroy:()=>{if(typeof window>"u"||!p)return;p=!1;const d={capture:!0};window.removeEventListener("touchstart",x,d),window.removeEventListener("touchmove",b,d),window.removeEventListener("touchend",M,d),window.removeEventListener("touchcancel",L,d),g(),v(),t=null,s=!1,e=!1},isSwipeBack:()=>{const d=s||e;return d&&g(),d},onPageEnter:()=>{s=!1,g(),v(),l=setTimeout(()=>{e=!1,l=null},0)}}}function qt(){let t=null;function s(){var n,l;t&&((n=t.outResolve)==null||n.call(t,null),(l=t.inResolve)==null||l.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){s();return}const n={from:t.from,to:t.to};t.outResolve(n),t.inResolve(n),t=null}}return{trigger(n,l){var a;l==="out"&&(t==null?void 0:t.to)===n&&!t.from&&((a=t.inResolve)==null||a.call(t,null),t={}),t&&(l==="out"&&t.from&&t.from!==n||l==="in"&&t.to&&t.to!==n)&&s(),t||(t={}),l==="out"?t.from=n:t.to=n},get(n){return new Promise(l=>{t||(t={}),n==="out"?t.outResolve=l:t.inResolve=l,e()})}}}const X=new Map;let G=null,bt=!1;function wt(t,s){if(t instanceof HTMLElement&&X.has(t)&&!t.isConnected){const e=X.get(t);X.delete(t),queueMicrotask(()=>e(s))}for(const e of Array.from(t.childNodes))wt(e,s)}function Vt(){if(bt||typeof document>"u")return;bt=!0,G=new MutationObserver(s=>{for(const e of s){const n={parent:e.target,nextSibling:e.nextSibling};for(const l of Array.from(e.removedNodes))wt(l,n)}});const t=()=>{G==null||G.observe(document.body,{childList:!0,subtree:!0})};document.body?t():document.addEventListener("DOMContentLoaded",t,{once:!0})}function Ut(t,s){return Vt(),X.set(t,s),()=>{X.delete(t)}}const rt=new WeakMap;let j=null;const Z="none !important";function B(t){const s=t.style.getPropertyValue("display");return t.style.getPropertyPriority("display")?`${s} !important`:s}function Yt(){return j||(j=new MutationObserver(t=>{for(const s of t){const e=s.target,n=rt.get(e);if(!n)continue;const l=B(e);l!==n.accounted&&(n.accounted=l,l===Z?(n.reactHidden=!0,n.onHide()):l!=="none"&&n.reactHidden&&(n.reactHidden=!1,n.onShow()))}}),j)}function Gt(t,s){const e=B(t),n={accounted:e,reactHidden:e===Z,onHide:s.onHide,onShow:s.onShow};return rt.set(t,n),Yt().observe(t,{attributes:!0,attributeFilter:["style"]}),{get isHidden(){return B(t)===Z},setDisplay(l,p=!1){l===null?t.style.removeProperty("display"):t.style.setProperty("display",l,p?"important":""),n.accounted=B(t)},sync(){n.accounted=B(t),n.reactHidden=n.accounted===Z},stop(){rt.delete(t)}}}function jt(t){return Array.isArray(t)}function Tt(t){const s=[];for(const e of t)jt(e)?s.push(...Tt(e)):s.push(e);return s}function Zt(t,s={}){const{transitions:e=[],middleware:n=(o,i)=>({from:o,to:i}),preserveScroll:l=o=>o}=t,p=s.host??new St,a=qt(),g=typeof e=="function"?e:()=>e,v=$t();v.initialize();const{initializeContext:C,calculateScrollOffset:x,evictScrollPosition:b,shouldPreserve:M,getScrollContainer:L,getPositionedParentElement:H,getScrollPosition:I,getIsMobile:z}=Xt({preserveScroll:l}),$=new Map,d=()=>{const o=z();let i=$.get(o);return i||(i=It(Tt(g({isMobile:o}))),$.set(o,i)),i};let f=null,h=null;const S=new WeakMap,O=o=>{S.set(o,{parent:o.parentNode,nextSibling:o.nextSibling})},u=o=>{const i=S.get(o);return i||{parent:o.parentNode,nextSibling:o.nextSibling}},c=new WeakMap,m=new WeakMap;let w=0;const E=o=>{const i=typeof getComputedStyle<"u"?getComputedStyle(o).display:"";return i&&i!=="none"?i:"block"},T=(o,i)=>{i.visibleDisplay=o.style.getPropertyValue("display"),i.computedDisplay=E(o)},N=(o,i)=>{if(m.get(o)!==i)return;m.delete(o);const r=c.get(o);r&&(r.savedCss!==null&&(o.style.cssText=r.savedCss,r.savedCss=null),r.intent==="hidden"?r.vis.setDisplay("none",!0):r.visibleDisplay?(r.vis.setDisplay(r.visibleDisplay,!1),T(o,r)):(r.vis.setDisplay(null),T(o,r)))},Rt=(o,i,r,y,P)=>{const R=y.element,_=P.element,k=(y.mode??"unmount")==="hidden",{parent:V,nextSibling:tt}=y.parent?{parent:y.parent,nextSibling:y.nextSibling}:u(R),U=x(i,r),et={scrollOffset:U,from:{scroll:I(i)},to:{scroll:I(r)},get scrollingElement(){return L()||document.documentElement},get positionedParent(){return H()}};let A;if(k){A=R,A.style.top=`${-1*((U==null?void 0:U.y)??0)}px`;const D=c.get(_);D&&D.savedCss===null&&(D.savedCss=_.style.cssText)}else A=R,kt(A,et);M(i)||b(i);const Y=k?++w:0;k&&(m.set(_,Y),m.set(R,Y));const dt=Promise.resolve(A),ft=Promise.resolve(_),ht=[],xt={from:dt,to:ft,context:et,createElement:((D,nt="div")=>{const W=document.createElement(nt);return W.setAttribute("data-ssgoi-id",D),ht.push(W),W})},Lt=Promise.resolve(o.prepare?o.prepare(xt):{});Ht({from:dt,to:ft,extras:Lt}).then(({from:D,to:nt,extras:W})=>{!k&&V&&(tt&&V.contains(tt)?V.insertBefore(A,tt):V.appendChild(A));const st=o.animation({from:D,to:nt,context:et,...W}),ot=st.onComplete;st.onComplete=()=>{ot==null||ot(),k?(N(R,Y),N(_,Y)):A.parentNode&&A.parentNode.removeChild(A);for(const it of ht)it.parentNode&&it.parentNode.removeChild(it)},p.attach(st)})},q=(o,i)=>{const r=v.isSwipeBack();a.trigger(o,i),a.get(i).then(y=>{if(i==="in"&&v.onPageEnter(),!y)return;if(r){i==="out"&&y.from&&!M(y.from)&&b(y.from),f=null,h=null;return}if(i!=="in")return;const{from:P,to:R}=n(y.from,y.to),_=Wt(P,R,d()),Q=f,k=h;f=null,h=null,!(!_||!Q||!k)&&Rt(_,P,R,Q,k)})},At=(o,i)=>{const r=c.get(o);if(!r)return;const y=r.intent==="hidden";if(r.intent="hidden",r.savedCss===null&&(r.savedCss=o.style.cssText),r.vis.setDisplay(r.computedDisplay||"block",!0),o.style.position="absolute",o.style.width="100%",o.style.left="0",y)return;const P=u(o);f={element:o,parent:P.parent,nextSibling:P.nextSibling,mode:"hidden"};const R=o.getAttribute("data-ssgoi-transition")??i;q(R,"out")},Mt=(o,i)=>{const r=c.get(o);if(!r||r.intent==="visible")return;r.intent="visible",T(o,r),r.savedCss!==null&&(o.style.cssText=r.savedCss,r.visibleDisplay?r.vis.setDisplay(r.visibleDisplay,!1):r.vis.setDisplay(null)),C(o,i),h={element:o,parent:o.parentElement,nextSibling:o.nextElementSibling};const y=o.getAttribute("data-ssgoi-transition")??i;q(y,"in")},Ct=(o,i,r)=>{const y=c.get(o);if(y&&(y.vis.stop(),c.delete(o),m.delete(o),y.intent==="hidden")){(f==null?void 0:f.element)===o&&(f=null),(h==null?void 0:h.element)===o&&(h=null);return}const P=r??u(o);f={element:o,parent:P.parent,nextSibling:P.nextSibling,mode:"unmount"};const R=o.getAttribute("data-ssgoi-transition")??i;q(R,"out")},ct=new WeakSet,at=(o,i)=>{if(ct.has(i))return;ct.add(i),O(i);const r=Gt(i,{onHide:()=>At(i,o),onShow:()=>Mt(i,o)}),y={vis:r,savedCss:null,intent:r.isHidden?"hidden":"visible",visibleDisplay:"",computedDisplay:"block"};c.set(i,y),r.isHidden||(T(i,y),C(i,o),h={element:i,parent:i.parentElement,nextSibling:i.nextElementSibling},q(o,"in")),Ut(i,P=>Ct(i,o,P))},ut=new Map;return{register:at,refFor:o=>{let i=ut.get(o);return i||(i=r=>{r&&at(o,r)},ut.set(o,i)),i}}}const Pt="data-ssgoi-root",Jt=`[${Pt}]`,lt="data-ssgoi-transition",Et=`[${lt}]`,Qt="[data-ssgoi-clone]";function te(){return typeof MutationObserver<"u"&&typeof HTMLElement<"u"&&typeof Node<"u"}function ee(t){return t.nodeType===Node.ELEMENT_NODE}function ne(t){return t instanceof HTMLElement}function se(t,s){if(!te())return()=>{};t.setAttribute(Pt,"");const e=a=>a.closest(Jt)===t,n=a=>{if(!ne(a)||!e(a)||a.closest(Qt))return;const g=a.getAttribute(lt);g!==null&&s.register(g,a)},l=a=>{if(ee(a)){a.matches(Et)&&n(a);for(const g of a.querySelectorAll(Et))n(g)}},p=new MutationObserver(a=>{for(const g of a){if(g.type==="attributes"){n(g.target);continue}for(const v of g.addedNodes)l(v)}});return p.observe(t,{childList:!0,subtree:!0,attributes:!0,attributeFilter:[lt]}),l(t),()=>p.disconnect()}exports.Animation=J.Animation;exports.MultiAnimation=J.MultiAnimation;exports.WebAnimation=J.WebAnimation;exports.HostAnimation=St;exports.createSggoiTransitionContext=Zt;exports.observeSsgoiTransitions=se;
+"use strict";var It=Object.defineProperty;var Ht=(t,n,e)=>n in t?It(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 Q=require("./multi-animation-uzEnQnrG.cjs");class Mt extends Q.Animation{constructor(){super(...arguments);F(this,"child",null);F(this,"_state","idle");F(this,"_settled",!1);F(this,"listeners",new Set)}attach(e){const s=this.child;if(this.child=e,this._settled=!1,s){const l=s.getPose();s.complete(),e.matchInto(l)}e.playbackRate=this.playbackRate;const o=e.onComplete;e.onComplete=()=>{o==null||o(),this.child===e&&(this.child=null,this._state="idle",this._settled=!0),this.notify()};const a=e.onUpdate;e.onUpdate=l=>{var u;a==null||a(l),(u=this.onUpdate)==null||u.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 s;return((s=this.child)==null?void 0:s.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 s;(s=this.child)==null||s.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 Wt=(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"},vt=new Set(["auto","scroll","overlay"]),zt=t=>{let n=t.parentElement;for(;n&&n!==document.body;){const e=window.getComputedStyle(n);if(vt.has(e.overflowY)||vt.has(e.overflowX))return n;n=n.parentElement}return document.documentElement},Bt=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 Ft(t){const n=Object.keys(t);return Promise.all(n.map(e=>t[e])).then(e=>{const s={};return n.forEach((o,a)=>{s[o]=e[a]}),s})}function Kt(t){const n=t.filter(e=>e.symmetric).map(e=>({from:e.to,to:e.from,transition:e.transition}));return[...t,...n]}const Xt=1e6,bt=100,$t=10;function qt(t){const n=t.trim(),e=n.indexOf("#"),s=n.indexOf("?"),o=[e,s].filter(a=>a>=0).reduce((a,l)=>Math.min(a,l),n.length);return n.slice(0,o)}function ut(t){const n=qt(t);try{if(/^[a-zA-Z][a-zA-Z\d+\-.]*:/.test(n))return ut(new URL(n).pathname)}catch{}const s=(n.startsWith("/")?n:`/${n}`).replace(/\/+/g,"/");return(s.length>1?s.replace(/\/+$/g,""):s)||"/"}function Ut(t){const n=t.trim();return n==="*"?"*":ut(n)}function rt(t){return t==="/"?[]:t.slice(1).split("/")}function Vt(t){return t.startsWith(":")||t.startsWith("[")&&t.endsWith("]")||t.startsWith("{")&&t.endsWith("}")}function ct(t,n){const e=ut(t),s=Ut(n);if(s==="*")return{matched:!0,specificity:0};if(e===s)return{matched:!0,specificity:Xt+rt(s).length*bt};const o=rt(e),a=rt(s);let l=0;for(let u=0;u<a.length;u++){const g=a[u],b=o[u],_=u===a.length-1;if(g===void 0)return{matched:!1,specificity:0};if((g==="*"||g==="**")&&_)return{matched:g==="**"?o.length>=u:o.length>u,specificity:l};if(b===void 0)return{matched:!1,specificity:0};if(g==="*"||Vt(g)){l+=$t;continue}if(g!==b)return{matched:!1,specificity:0};l+=bt}return{matched:o.length===a.length,specificity:l}}function Gt(t,n){return ct(t,n).matched}function Yt(t,n,e){let s;for(const o of e){const a=ct(t,o.from);if(!a.matched)continue;const l=ct(n,o.to);if(!l.matched)continue;const u=a.specificity+l.specificity;(!s||u>s.specificity)&&(s={transition:o.transition,specificity:u})}return(s==null?void 0:s.transition)??null}const Zt=768,jt=10,Qt=10;function Jt(t={}){const{preserveScroll:n=f=>f,resolvePath:e=f=>f}=t,s=typeof n=="function"?n:()=>n;let o=null,a=!1,l=!1;const u=()=>{const f=(o==null?void 0:o.clientWidth)??0,d=f>0?f:typeof window<"u"?window.innerWidth:0;return d>0&&d<Zt},g=()=>(l||(a=u(),l=!0),a),b=f=>{var R;const d=e(f),y=s(g());if(y===!1)return{preserves:!1,shared:!1,storageKey:`path:${d}`};if(y===!0)return{preserves:!0,shared:!1,storageKey:`path:${d}`};const E=((R=y.exclude)==null?void 0:R.some(C=>Gt(d,C)))??!1,P=!E&&!!y.key;return{preserves:!E,shared:P,storageKey:P?`shared:${y.key}`:`path:${d}`}},_=f=>b(f).preserves;let O=null;const T=new Map;let L=null,k=!1,W=0;const $=()=>{o&&L&&!k&&T.set(b(L).storageKey,{x:o.scrollLeft,y:o.scrollTop})},z=f=>{if(!o)return;const d=b(f);if(d.preserves&&d.shared&&!T.has(d.storageKey))return;const y=d.preserves&&T.has(d.storageKey)?T.get(d.storageKey):{x:0,y:0};let E=0;const P=()=>{if(!o)return;o.scrollTo({top:y.y,left:y.x}),!(Math.abs(o.scrollTop-y.y)<1&&Math.abs(o.scrollLeft-y.x)<1)&&E<jt&&(E++,requestAnimationFrame(P))};requestAnimationFrame(P)};return{initializeContext:(f,d)=>{k=!0;const y=++W;O=f,o||(o=zt(f),a=u(),l=!0,typeof ResizeObserver<"u"&&new ResizeObserver(()=>{a=u()}).observe(o),(o===document.documentElement?window:o).addEventListener("scroll",$,{passive:!0})),L=d,z(d);let E=0;const P=()=>{y===W&&(E++,E>=Qt?k=!1:requestAnimationFrame(P))};requestAnimationFrame(P)},calculateScrollOffset:(f,d)=>{const y=f?b(f).storageKey:null,E=y&&T.has(y)?T.get(y):{x:0,y:0},P=d?b(d):null,R=P!=null&&P.preserves?P.storageKey:null,C=R&&T.has(R)?T.get(R):{x:0,y:0};return{x:-C.x+E.x,y:-C.y+E.y}},evictScrollPosition:f=>{T.delete(b(f).storageKey)},shouldPreserve:_,getScrollContainer:()=>o,getPositionedParentElement:()=>O?Bt(O):document.body,getScrollPosition:f=>{const d=f?b(f).storageKey:null;return d&&T.has(d)?T.get(d):{x:0,y:0}},getIsMobile:g}}const St=30,Et=8,Tt=1.2,wt=30,te=600;function ee(){let t=null,n=!1,e=!1,s=null,o=null,a=!1;const l=(h,v)=>{for(let S=0;S<h.length;S++){const m=h.item(S);if(m&&m.identifier===v)return m}return null},u=()=>{s!==null&&(clearTimeout(s),s=null)},g=()=>{o!==null&&(clearTimeout(o),o=null)},b=()=>{n=!0,e=!0,u(),g(),s=setTimeout(()=>{n=!1,e=!1,s=null},te)},_=h=>{if(h.touches.length!==1){t=null;return}const v=h.touches.item(0);if(!v){t=null;return}const S=window.innerWidth,m=v.clientX<=St,w=v.clientX>=S-St;if(!m&&!w){t=null;return}t={identifier:v.identifier,startX:v.clientX,startY:v.clientY,fromLeftEdge:m,moved:!1}},O=h=>{if(!t)return;if(h.touches.length!==1){t=null;return}const v=l(h.touches,t.identifier);if(!v){t=null;return}const S=v.clientX-t.startX,m=v.clientY-t.startY,w=Math.abs(S),I=Math.abs(m);if(I>Et&&I>w*Tt){t=null;return}const f=t.fromLeftEdge?S>0:S<0;w>Et&&w>I*Tt&&f&&(t.moved=!0)},T=h=>{if(!t)return;const v=l(h.changedTouches,t.identifier);if(!v){t=null;return}const S=v.clientX-t.startX,m=t.fromLeftEdge?S>0:S<0;if(t.moved&&m&&Math.abs(S)>=wt){b(),t=null;return}t.moved&&Math.abs(S)>=wt&&b(),t=null},L=()=>{t&&(t.moved&&b(),t=null)};return{initialize:()=>{if(typeof window>"u"||a)return;a=!0;const h={passive:!0,capture:!0};window.addEventListener("touchstart",_,h),window.addEventListener("touchmove",O,h),window.addEventListener("touchend",T,h),window.addEventListener("touchcancel",L,h)},destroy:()=>{if(typeof window>"u"||!a)return;a=!1;const h={capture:!0};window.removeEventListener("touchstart",_,h),window.removeEventListener("touchmove",O,h),window.removeEventListener("touchend",T,h),window.removeEventListener("touchcancel",L,h),u(),g(),t=null,n=!1,e=!1},isSwipeBack:()=>{const h=n||e;return h&&u(),h},onPageEnter:()=>{n=!1,u(),g(),o=setTimeout(()=>{e=!1,o=null},0)}}}function ne(){let t=null;function n(){var s,o;t&&((s=t.outResolve)==null||s.call(t,null),(o=t.inResolve)==null||o.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 s={from:t.from,to:t.to};t.outResolve(s),t.inResolve(s),t=null}}return{trigger(s,o){var l;o==="out"&&(t==null?void 0:t.to)===s&&!t.from&&((l=t.inResolve)==null||l.call(t,null),t={}),t&&(o==="out"&&t.from&&t.from!==s||o==="in"&&t.to&&t.to!==s)&&n(),t||(t={}),o==="out"?t.from=s:t.to=s},get(s){return new Promise(o=>{t||(t={}),s==="out"?t.outResolve=o:t.inResolve=o,e()})}}}const X=new Map;let Y=null,Pt=!1;function Rt(t,n){if(t instanceof HTMLElement&&X.has(t)&&!t.isConnected){const e=X.get(t);X.delete(t),queueMicrotask(()=>e(n))}for(const e of Array.from(t.childNodes))Rt(e,n)}function se(){if(Pt||typeof document>"u")return;Pt=!0,Y=new MutationObserver(n=>{for(const e of n){const s={parent:e.target,nextSibling:e.nextSibling};for(const o of Array.from(e.removedNodes))Rt(o,s)}});const t=()=>{Y==null||Y.observe(document.body,{childList:!0,subtree:!0})};document.body?t():document.addEventListener("DOMContentLoaded",t,{once:!0})}function ie(t,n){return se(),X.set(t,n),()=>{X.delete(t)}}const lt=new WeakMap;let Z=null;const j="none !important";function K(t){const n=t.style.getPropertyValue("display");return t.style.getPropertyPriority("display")?`${n} !important`:n}function oe(){return Z||(Z=new MutationObserver(t=>{for(const n of t){const e=n.target,s=lt.get(e);if(!s)continue;const o=K(e);o!==s.accounted&&(s.accounted=o,o===j?(s.reactHidden=!0,s.onHide()):o!=="none"&&s.reactHidden&&(s.reactHidden=!1,s.onShow()))}}),Z)}function re(t,n){const e=K(t),s={accounted:e,reactHidden:e===j,onHide:n.onHide,onShow:n.onShow};return lt.set(t,s),oe().observe(t,{attributes:!0,attributeFilter:["style"]}),{get isHidden(){return K(t)===j},setDisplay(o,a=!1){o===null?t.style.removeProperty("display"):t.style.setProperty("display",o,a?"important":""),s.accounted=K(t)},sync(){s.accounted=K(t),s.reactHidden=s.accounted===j},stop(){lt.delete(t)}}}function ce(t){return Array.isArray(t)}function Ct(t){const n=[];for(const e of t)ce(e)?n.push(...Ct(e)):n.push(e);return n}function le(t,n={}){const{transitions:e=[],middleware:s=(i,r)=>({from:i,to:r}),preserveScroll:o=i=>i}=t,a=n.host??new Mt,l=ne(),u=typeof e=="function"?e:()=>e,g=ee();g.initialize();const b=new Map,_=i=>{let r=b.get(i);return r===void 0&&(r=s(i,i).from,b.set(i,r)),r},{initializeContext:O,calculateScrollOffset:T,evictScrollPosition:L,shouldPreserve:k,getScrollContainer:W,getPositionedParentElement:$,getScrollPosition:z,getIsMobile:h}=Jt({preserveScroll:o,resolvePath:_}),v=new Map,S=()=>{const i=h();let r=v.get(i);return r||(r=Kt(Ct(u({isMobile:i}))),v.set(i,r)),r};let m=null,w=null;const I=new WeakMap,f=i=>{I.set(i,{parent:i.parentNode,nextSibling:i.nextSibling})},d=i=>{const r=I.get(i);return r||{parent:i.parentNode,nextSibling:i.nextSibling}},y=new WeakMap,E=new WeakMap;let P=0;const R=i=>{const r=typeof getComputedStyle<"u"?getComputedStyle(i).display:"";return r&&r!=="none"?r:"block"},C=(i,r)=>{r.visibleDisplay=i.style.getPropertyValue("display"),r.computedDisplay=R(i)},dt=(i,r)=>{if(E.get(i)!==r)return;E.delete(i);const c=y.get(i);c&&(c.savedCss!==null&&(i.style.cssText=c.savedCss,c.savedCss=null),c.intent==="hidden"?c.vis.setDisplay("none",!0):c.visibleDisplay?(c.vis.setDisplay(c.visibleDisplay,!1),C(i,c)):(c.vis.setDisplay(null),C(i,c)))},Ot=(i,r,c,p,A)=>{const M=p.element,D=A.element,N=(p.mode??"unmount")==="hidden",{parent:U,nextSibling:tt}=p.parent?{parent:p.parent,nextSibling:p.nextSibling}:d(M),V=T(r,c),et={scrollOffset:V,from:{scroll:z(r)},to:{scroll:z(c)},get scrollingElement(){return W()||document.documentElement},get positionedParent(){return $()}};let x;if(N){x=M,x.style.top=`${-1*((V==null?void 0:V.y)??0)}px`;const H=y.get(D);H&&H.savedCss===null&&(H.savedCss=D.style.cssText)}else x=M,Wt(x,et);k(r)||L(r);const G=N?++P:0;N&&(E.set(D,G),E.set(M,G));const yt=Promise.resolve(x),mt=Promise.resolve(D),gt=[],Nt={from:yt,to:mt,context:et,createElement:((H,nt="div")=>{const B=document.createElement(nt);return B.setAttribute("data-ssgoi-id",H),gt.push(B),B})},kt=Promise.resolve(i.prepare?i.prepare(Nt):{});Ft({from:yt,to:mt,extras:kt}).then(({from:H,to:nt,extras:B})=>{!N&&U&&(tt&&U.contains(tt)?U.insertBefore(x,tt):U.appendChild(x));const st=i.animation({from:H,to:nt,context:et,...B}),it=st.onComplete;st.onComplete=()=>{it==null||it(),N?(dt(M,G),dt(D,G)):x.parentNode&&x.parentNode.removeChild(x);for(const ot of gt)ot.parentNode&&ot.parentNode.removeChild(ot)},a.attach(st)})},q=(i,r)=>{const c=g.isSwipeBack();l.trigger(i,r),l.get(r).then(p=>{if(r==="in"&&g.onPageEnter(),!p)return;if(c){r==="out"&&p.from&&!k(p.from)&&L(p.from),m=null,w=null;return}if(r!=="in")return;const{from:A,to:M}=s(p.from,p.to),D=Yt(A,M,S()),J=m,N=w;m=null,w=null,!(!D||!J||!N)&&Ot(D,p.from,p.to,J,N)})},Lt=(i,r)=>{const c=y.get(i);if(!c)return;const p=c.intent==="hidden";if(c.intent="hidden",c.savedCss===null&&(c.savedCss=i.style.cssText),c.vis.setDisplay(c.computedDisplay||"block",!0),i.style.position="absolute",i.style.width="100%",i.style.left="0",p)return;const A=d(i);m={element:i,parent:A.parent,nextSibling:A.nextSibling,mode:"hidden"};const M=i.getAttribute("data-ssgoi-transition")??r;q(M,"out")},_t=(i,r)=>{const c=y.get(i);if(!c||c.intent==="visible")return;c.intent="visible",C(i,c),c.savedCss!==null&&(i.style.cssText=c.savedCss,c.visibleDisplay?c.vis.setDisplay(c.visibleDisplay,!1):c.vis.setDisplay(null)),O(i,r),w={element:i,parent:i.parentElement,nextSibling:i.nextElementSibling};const p=i.getAttribute("data-ssgoi-transition")??r;q(p,"in")},Dt=(i,r,c)=>{const p=y.get(i);if(p&&(p.vis.stop(),y.delete(i),E.delete(i),p.intent==="hidden")){(m==null?void 0:m.element)===i&&(m=null),(w==null?void 0:w.element)===i&&(w=null);return}const A=c??d(i);m={element:i,parent:A.parent,nextSibling:A.nextSibling,mode:"unmount"};const M=i.getAttribute("data-ssgoi-transition")??r;q(M,"out")},ft=new WeakSet,ht=(i,r)=>{if(ft.has(r))return;ft.add(r),f(r);const c=re(r,{onHide:()=>Lt(r,i),onShow:()=>_t(r,i)}),p={vis:c,savedCss:null,intent:c.isHidden?"hidden":"visible",visibleDisplay:"",computedDisplay:"block"};y.set(r,p),c.isHidden||(C(r,p),O(r,i),w={element:r,parent:r.parentElement,nextSibling:r.nextElementSibling},q(i,"in")),ie(r,A=>Dt(r,i,A))},pt=new Map;return{register:ht,refFor:i=>{let r=pt.get(i);return r||(r=c=>{c&&ht(i,c)},pt.set(i,r)),r}}}const xt="data-ssgoi-root",ae=`[${xt}]`,at="data-ssgoi-transition",At=`[${at}]`,ue="[data-ssgoi-clone]";function de(){return typeof MutationObserver<"u"&&typeof HTMLElement<"u"&&typeof Node<"u"}function fe(t){return t.nodeType===Node.ELEMENT_NODE}function he(t){return t instanceof HTMLElement}function pe(t,n){if(!de())return()=>{};t.setAttribute(xt,"");const e=l=>l.closest(ae)===t,s=l=>{if(!he(l)||!e(l)||l.closest(ue))return;const u=l.getAttribute(at);u!==null&&n.register(u,l)},o=l=>{if(fe(l)){l.matches(At)&&s(l);for(const u of l.querySelectorAll(At))s(u)}},a=new MutationObserver(l=>{for(const u of l){if(u.type==="attributes"){s(u.target);continue}for(const g of u.addedNodes)o(g)}});return a.observe(t,{childList:!0,subtree:!0,attributes:!0,attributeFilter:[at]}),o(t),()=>a.disconnect()}exports.Animation=Q.Animation;exports.MultiAnimation=Q.MultiAnimation;exports.WebAnimation=Q.WebAnimation;exports.HostAnimation=Mt;exports.createSggoiTransitionContext=le;exports.observeSsgoiTransitions=pe;