@ssgoi/core 6.6.0 → 6.6.2

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"] })],
@@ -55,19 +56,20 @@ 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>
+      <SsgoiTransitionBoundary className="relative z-0 min-h-dvh bg-white">
+        {/* Your app */}
+      </SsgoiTransitionBoundary>
     </Ssgoi>
   );
 }
 ```
 
-#### 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 +77,50 @@ 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

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