@react-motion-router/core 2.0.0-beta.sha-c19f37e → 2.0.0-beta.sha-9a4805f

package/build/index.js

@@ -1,9 +1,9 @@
-import { jsx as T, jsxs as ee, Fragment as ye } from "react/jsx-runtime";
-import Lt, { createContext as gt, Component as at, createRef as z, Suspense as xt, isValidElement as ne, cloneElement as ie, lazy as we, Children as Xt, useContext as ft, useDebugValue as Ee, useSyncExternalStore as re, useRef as Ft, useEffect as se, useCallback as be } from "react";
-const ae = gt(null);
-class Je extends at {
-  ref = z();
-  static contextType = ae;
+import { jsx as R, jsxs as ee, Fragment as ye } from "react/jsx-runtime";
+import we, { createContext as mt, Component as vt, createRef as Y, useContext as at, useImperativeHandle as ne, Suspense as xt, isValidElement as ie, cloneElement as se, lazy as Ee, Children as Xt, useDebugValue as be, useSyncExternalStore as re, useRef as Vt, useEffect as ae, useCallback as Te } from "react";
+const oe = mt(null);
+class Qe extends vt {
+  ref = Y();
+  static contextType = oe;
   componentDidMount() {
     this.scene.addNode(this);
   }
@@ -44,7 +44,7 @@ class Je extends at {
     this.ref.current && (this.ref.current.style.visibility = "visible");
   }
   render() {
-    return /* @__PURE__ */ T(
+    return /* @__PURE__ */ R(
       "div",
       {
         ref: this.ref,
@@ -55,65 +55,35 @@ class Je extends at {
     );
   }
 }
-const Kt = gt(null), Qe = 2147483647, tn = 100, en = 0, nn = 0, rn = 1, oe = -1, O = 0, J = 1, sn = 0;
-class Te extends at {
-  ref = z();
-  static contextType = Kt;
-  index = O;
-  exiting = !1;
-  state = {
-    zIndex: "unset"
-  };
-  onroutertransitionend() {
-    this.ref.current && (this.ref.current.style.willChange = "auto", this.ref.current.style.pointerEvents = "auto");
-  }
-  onroutertransitionstart() {
-    this.ref.current && (this.ref.current.style.willChange = "transform, opacity", this.ref.current.style.pointerEvents = "none");
-  }
-  componentDidMount() {
-    this.props.navigation.addEventListener("routertransitionstart", this), this.props.navigation.addEventListener("routertransitionend", this), this.props.navigation.addEventListener("routertransitioncancel", this);
-  }
-  componentWillUnmount() {
-    this.props.navigation.removeEventListener("routertransitionstart", this), this.props.navigation.removeEventListener("routertransitionend", this), this.props.navigation.removeEventListener("routertransitioncancel", this);
-  }
-  get animationEffect() {
-    const t = this.props.animation, { animation: e, direction: n, hasUAVisualTransition: r } = this.context, { timeline: a, playbackRate: o } = e, { index: l, exiting: f, ref: d } = this, m = this.context.screens.map((S) => S.current?.name);
-    return t?.({
-      ref: d.current,
-      index: l,
-      screens: m,
-      exiting: f,
-      timeline: a,
-      direction: n,
-      playbackRate: o,
-      hasUAVisualTransition: r
-    }) ?? null;
-  }
-  setZIndex(t) {
-    return new Promise((e) => this.setState({ zIndex: t }, e));
-  }
-  render() {
-    const t = this.props.renderAs, e = this.props.focused ? void 0 : "";
-    return /* @__PURE__ */ T(
-      t,
-      {
-        id: this.props.id,
-        className: "screen-transition-provider",
-        ref: this.ref,
-        inert: e,
-        style: {
-          gridArea: "1 / 1",
-          width: "100%",
-          height: "100%",
-          transformOrigin: "center center",
-          zIndex: this.state.zIndex
-        },
-        children: this.props.children
+const Kt = mt(null), tn = 2147483647, en = 100, nn = 0, sn = 0, rn = 1, le = -1, O = 0, J = 1, an = 0;
+function Re(i) {
+  const t = at(Kt);
+  return ne(
+    i.ref,
+    () => ({
+      index: O,
+      exiting: !1,
+      get screenElementRef() {
+        return i.screenElementRef;
+      },
+      get animationEffect() {
+        const e = i.animation, { animation: n, direction: s, hasUAVisualTransition: a } = t, { timeline: o, playbackRate: l } = n, { index: f, exiting: d, screenElementRef: m } = this, { viewTransitionName: T } = i, E = t.screens.map((K) => K.current?.name);
+        return e?.({
+          ref: m.current,
+          index: f,
+          screens: E,
+          exiting: d,
+          timeline: o,
+          direction: s,
+          playbackRate: l,
+          viewTransitionName: T,
+          hasUAVisualTransition: a
+        }) ?? null;
       }
-    );
-  }
+    })
+  ), i.children;
 }
-const le = gt(null), vt = gt(null), ce = gt(null);
+const ce = mt(null), gt = mt(null), ue = mt(null);
 class Se {
   id;
   nodes = /* @__PURE__ */ new Map();
@@ -149,17 +119,15 @@ class Se {
     return !this.nodes.size;
   }
 }
-class Re extends at {
+class ke extends vt {
   sharedElementScene;
-  #t = z();
-  ref = z();
+  #t = Y();
   nestedRouterData;
-  static contextType = vt;
+  static contextType = gt;
   state = {
     focused: !1,
     config: {},
-    params: {},
-    elementType: "div"
+    params: {}
   };
   constructor(t, e) {
     super(t), this.sharedElementScene = new Se(
@@ -169,6 +137,10 @@ class Re extends at {
       parentRouter: e
     };
   }
+  handleEvent(t) {
+    const e = `on${t.type}`;
+    this[e]?.(t);
+  }
   setParams(t) {
     this.setState(({ params: e }) => ({ params: { ...e, ...t } }));
   }
@@ -179,7 +151,7 @@ class Re extends at {
     return this.state.focused;
   }
   get name() {
-    return this.props.name ? this.props.name.toLowerCase().replace(/[^\w-]/g, "-").replace(/-+/g, "-").replace(/^-|-$/g, "") : B(this.props.component) ? this.props.component.module?.default.name.toLowerCase() : this.props.component.name.toLowerCase();
+    return this.props.name ? this.props.name.toLowerCase().replace(/[^\w-]/g, "-").replace(/-+/g, "-").replace(/^-|-$/g, "") : q(this.props.component) ? this.props.component.module?.default.name.toLowerCase() : this.props.component.name.toLowerCase();
   }
   blur() {
     return new Promise((t) => {
@@ -192,9 +164,9 @@ class Re extends at {
     });
   }
   async load(t) {
-    const e = this.props.component, n = this.props.config?.header?.component, r = this.props.config?.footer?.component;
+    const e = this.props.component, n = this.props.config?.header?.component, s = this.props.config?.footer?.component;
     let a;
-    B(e) ? a = await e.load() : a = { default: e }, B(n) && await n.load(), B(r) && await r.load();
+    q(e) ? a = await e.load() : a = { default: e }, q(n) && await n.load(), q(s) && await s.load();
     const o = this.context.navigation, l = this.routeProp, f = !1;
     return await this.props.config?.onLoad?.({ navigation: o, route: l, signal: t, preloading: f }), a;
   }
@@ -237,123 +209,106 @@ class Re extends at {
     return this.#t;
   }
   render() {
-    const t = this.context.navigation, e = this.routeProp, n = this.props.component, r = e.config.header?.component, a = e.config.footer?.component;
-    return /* @__PURE__ */ T(
-      Te,
+    const t = this.context.navigation, e = this.routeProp, n = this.props.component, s = e.config.header?.component, a = e.config.footer?.component;
+    return /* @__PURE__ */ R(
+      Re,
       {
         ref: this.#t,
-        renderAs: this.state.elementType,
-        id: `${this.context.id}-${this.name}-transition-provider`,
+        screenElementRef: this.ref,
+        viewTransitionName: this.viewTransitionName,
         animation: e.config.animation,
-        navigation: t,
-        focused: this.state.focused,
-        children: /* @__PURE__ */ T(
-          "div",
-          {
-            id: `${this.context.id}-${this.name}`,
-            ref: this.ref,
-            className: "screen",
-            style: {
-              height: "100%",
-              width: "100%",
-              display: "flex",
-              flexDirection: "column",
-              pointerEvents: "inherit"
-            },
-            children: /* @__PURE__ */ T(ae.Provider, { value: this.sharedElementScene, children: /* @__PURE__ */ T(ce.Provider, { value: e, children: /* @__PURE__ */ ee(le.Provider, { value: this.nestedRouterData, children: [
-              /* @__PURE__ */ T(xt, { fallback: /* @__PURE__ */ T(
-                _,
-                {
-                  component: e.config.header?.fallback,
-                  route: e,
-                  navigation: t
-                }
-              ), children: /* @__PURE__ */ T(
-                _,
-                {
-                  component: r,
-                  route: e,
-                  navigation: t
-                }
-              ) }),
-              /* @__PURE__ */ T(xt, { fallback: /* @__PURE__ */ T(
-                _,
+        children: /* @__PURE__ */ R(oe.Provider, { value: this.sharedElementScene, children: /* @__PURE__ */ R(ue.Provider, { value: e, children: /* @__PURE__ */ ee(ce.Provider, { value: this.nestedRouterData, children: [
+          /* @__PURE__ */ R(xt, { fallback: /* @__PURE__ */ R(
+            Z,
+            {
+              component: e.config.header?.fallback,
+              route: e,
+              navigation: t
+            }
+          ), children: /* @__PURE__ */ R(
+            Z,
+            {
+              component: s,
+              route: e,
+              navigation: t
+            }
+          ) }),
+          /* @__PURE__ */ R(xt, { fallback: /* @__PURE__ */ R(
+            Z,
+            {
+              component: this.props.fallback,
+              route: e,
+              navigation: t
+            }
+          ), children: /* @__PURE__ */ R(
+            Z,
+            {
+              component: n,
+              route: e,
+              navigation: t
+            }
+          ) }),
+          /* @__PURE__ */ R(
+            xt,
+            {
+              fallback: /* @__PURE__ */ R(
+                Z,
                 {
-                  component: this.props.fallback,
+                  component: e.config.footer?.fallback,
                   route: e,
                   navigation: t
                 }
-              ), children: /* @__PURE__ */ T(
-                _,
+              ),
+              children: /* @__PURE__ */ R(
+                Z,
                 {
-                  component: n,
+                  component: a,
                   route: e,
                   navigation: t
                 }
-              ) }),
-              /* @__PURE__ */ T(
-                xt,
-                {
-                  fallback: /* @__PURE__ */ T(
-                    _,
-                    {
-                      component: e.config.footer?.fallback,
-                      route: e,
-                      navigation: t
-                    }
-                  ),
-                  children: /* @__PURE__ */ T(
-                    _,
-                    {
-                      component: a,
-                      route: e,
-                      navigation: t
-                    }
-                  )
-                }
               )
-            ] }) }) })
-          }
-        )
+            }
+          )
+        ] }) }) })
       }
     );
   }
 }
-function _({ component: i, route: t, navigation: e }) {
-  B(i) && i.module?.default && (i = i.module.default);
+function Z({ component: i, route: t, navigation: e }) {
+  q(i) && i.module?.default && (i = i.module.default);
   const n = i ?? null;
-  return typeof n == "function" || he(n) ? /* @__PURE__ */ T(
+  return typeof n == "function" || he(n) ? /* @__PURE__ */ R(
     n,
     {
       navigation: e,
       route: t
     }
-  ) : ne(n) ? ie(n, {
+  ) : ie(n) ? se(n, {
     navigation: e,
     route: t
-  }) : /* @__PURE__ */ T(ye, { children: n });
+  }) : /* @__PURE__ */ R(ye, { children: n });
 }
-function ke(i) {
-  return ne(i) ? Object.getPrototypeOf(i.type) === Re : !1;
+function xe(i) {
+  return ie(i) ? Object.getPrototypeOf(i.type) === ke : !1;
 }
 function he(i) {
   return typeof i == "object" && i !== null && i.$$typeof === Symbol.for("react.lazy");
 }
-function B(i) {
+function q(i) {
   return he(i) && "load" in i;
 }
-function xe(i) {
+function Ce(i) {
   return "style" in i && i.style instanceof CSSStyleDeclaration;
 }
-var Ce = Object.defineProperty, Le = (i, t, e) => t in i ? Ce(i, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[t] = e, F = (i, t, e) => (Le(i, typeof t != "symbol" ? t + "" : t, e), e), Bt = (i, t, e) => {
+var Le = Object.defineProperty, Me = (i, t, e) => t in i ? Le(i, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[t] = e, V = (i, t, e) => (Me(i, typeof t != "symbol" ? t + "" : t, e), e), Bt = (i, t, e) => {
   if (!t.has(i))
     throw TypeError("Cannot " + e);
-}, s = (i, t, e) => (Bt(i, t, "read from private field"), e ? e.call(i) : t.get(i)), v = (i, t, e) => {
+}, r = (i, t, e) => (Bt(i, t, "read from private field"), e ? e.call(i) : t.get(i)), g = (i, t, e) => {
   if (t.has(i))
     throw TypeError("Cannot add the same private member more than once");
   t instanceof WeakSet ? t.add(i) : t.set(i, e);
-}, c = (i, t, e, n) => (Bt(i, t, "write to private field"), n ? n.call(i, e) : t.set(i, e), e), g = (i, t, e) => (Bt(i, t, "access private method"), e);
-const pt = {
+}, c = (i, t, e, n) => (Bt(i, t, "write to private field"), n ? n.call(i, e) : t.set(i, e), e), v = (i, t, e) => (Bt(i, t, "access private method"), e);
+const ft = {
   delay: 0,
   direction: "normal",
   duration: "auto",
@@ -362,19 +317,19 @@ const pt = {
   fill: "auto",
   iterationStart: 0,
   iterations: 1
-}, qt = 1e3, Me = window.Animation, yt = window.KeyframeEffect;
+}, qt = 1e3, Pe = window.Animation, yt = window.KeyframeEffect;
 function Yt(i) {
   return Array.isArray(i);
 }
-function Y(i) {
+function _(i) {
   return typeof i == "object" && i === null;
 }
-function h(i, t) {
-  return Y(i) || typeof i == "number" ? i : (t || ([t] = Object.keys(i.type())), i.to(t).value);
+function u(i, t) {
+  return _(i) || typeof i == "number" ? i : (t || ([t] = Object.keys(i.type())), i.to(t).value);
 }
-function Pe(i, t = pt) {
-  let { duration: e = "auto", iterations: n = 1, playbackRate: r = 1 } = t;
-  if (Y(i))
+function De(i, t = ft) {
+  let { duration: e = "auto", iterations: n = 1, playbackRate: s = 1 } = t;
+  if (_(i))
     return i;
   if (typeof i == "number" || i.type().percent === void 0)
     throw new DOMException(
@@ -387,7 +342,7 @@ function Pe(i, t = pt) {
     e = e.to("ms").value;
   else if (typeof e == "string")
     throw new TypeError("Unknown effect duration keyword.");
-  const { delay: a = 0, endDelay: o = 0 } = t, l = e / n * n / Math.abs(r), f = a + l + o;
+  const { delay: a = 0, endDelay: o = 0 } = t, l = e / n * n / Math.abs(s), f = a + l + o;
   return ot(
     i.to("percent").value,
     [0, 100],
@@ -395,7 +350,7 @@ function Pe(i, t = pt) {
   );
 }
 function kt(i) {
-  if (Y(i) || typeof i == "number")
+  if (_(i) || typeof i == "number")
     return i;
   if (i.type().time !== void 0)
     throw new DOMException(
@@ -404,78 +359,78 @@ function kt(i) {
     );
   return i.to("ms").value;
 }
-function Zt(i, t) {
-  const e = t.length - 1, n = Math.floor(i * e), r = t[n], a = t[Math.min(n + 1, e)], o = i * e - n;
-  return r + o * (a - r);
+function _t(i, t) {
+  const e = t.length - 1, n = Math.floor(i * e), s = t[n], a = t[Math.min(n + 1, e)], o = i * e - n;
+  return s + o * (a - s);
 }
-function De(i, t, e) {
-  let n = 0, r = 0;
+function Ne(i, t, e) {
+  let n = 0, s = 0;
   for (const [a, o] of Object.entries(i)) {
     const { min: l, max: f } = t, d = e[a] ?? 1, m = (o - l[a]) / (f[a] - l[a]) * d;
-    n += m, r += d;
+    n += m, s += d;
   }
-  return n / r;
+  return n / s;
 }
 function ot(i, t, e, n = {}) {
-  let r;
+  let s;
   if (typeof i == "number" && Yt(t)) {
     const o = { x: t[0] }, l = { x: t[1] };
     t = { min: o, max: l }, i = { x: i };
   } else
     throw new TypeError("Input and input range must have the same dimensions.");
-  if (r = De(i, t, n), r = Ne(r, 0, 1), Yt(e))
-    return Zt(r, e);
+  if (s = Ne(i, t, n), s = Ue(s, 0, 1), Yt(e))
+    return _t(s, e);
   const a = {};
   for (const o of Object.keys(e.min)) {
     const l = e.min[o], f = e.max[o], d = [l, f];
-    a[o] = Zt(r, d);
+    a[o] = _t(s, d);
   }
   return a;
 }
-function Ne(i, t, e) {
+function Ue(i, t, e) {
   return i < t ? t : e && i > e ? e : i;
 }
-function zt(i) {
+function Ht(i) {
   let {
     duration: t = "auto",
     iterations: e = 1,
     playbackRate: n = 1,
-    delay: r = 0,
+    delay: s = 0,
     endDelay: a = 0,
     localTime: o = null,
     progress: l = null
   } = i;
   const f = new CSSUnitValue(100, "percent");
   if (t === "auto")
-    t = qt, r = 0, a = 0;
+    t = qt, s = 0, a = 0;
   else if (t instanceof CSSNumericValue)
     t = t.to("ms").value;
   else if (typeof t == "string")
     throw TypeError("Unknown effect duration keyword.");
-  const d = t / e, m = d * e / Math.abs(n), S = r + m + a;
-  t = new CSSUnitValue(d / S * 100, "percent");
+  const d = t / e, m = d * e / Math.abs(n), T = s + m + a;
+  t = new CSSUnitValue(d / T * 100, "percent");
   const E = CSS.percent(t.to("percent").value * e / Math.abs(n));
-  return o !== null && (l = h(o, "percent") / f.value), {
+  return o !== null && (l = u(o, "percent") / f.value), {
     ...i,
     progress: l,
     activeDuration: E,
     duration: t,
     iterations: e,
-    delay: r,
+    delay: s,
     endDelay: a,
     endTime: f
   };
 }
-function ue(i, t) {
-  let { activeDuration: e = 0, localTime: n = null, endTime: r = 1 / 0, delay: a = 0 } = i;
-  if (r = h(r), e = h(e), n = h(n), n == null || n === void 0)
+function de(i, t) {
+  let { activeDuration: e = 0, localTime: n = null, endTime: s = 1 / 0, delay: a = 0 } = i;
+  if (s = u(s), e = u(e), n = u(n), n == null || n === void 0)
     return "idle";
-  const o = Math.max(Math.min(a, r), 0), l = Math.max(Math.min(a + e, r), 0);
+  const o = Math.max(Math.min(a, s), 0), l = Math.max(Math.min(a + e, s), 0);
   return n < o || t === "backwards" && n === o ? "before" : n > l || t === "forwards" && n === l ? "after" : "active";
 }
-function Ue(i, t) {
-  let { localTime: e = null, delay: n = 0, activeDuration: r = 0, fill: a } = i;
-  if (r = h(r), e = h(e), e == null || e === void 0)
+function Ae(i, t) {
+  let { localTime: e = null, delay: n = 0, activeDuration: s = 0, fill: a } = i;
+  if (s = u(s), e = u(e), e == null || e === void 0)
     return null;
   switch (t) {
     case "before":
@@ -483,68 +438,68 @@ function Ue(i, t) {
     case "active":
       return e - n;
     case "after":
-      return a === "forwards" || a === "both" ? Math.max(Math.min(e - n, r), 0) : null;
+      return a === "forwards" || a === "both" ? Math.max(Math.min(e - n, s), 0) : null;
     default:
       return null;
   }
 }
-function Ae(i, t, e) {
-  const { duration: n = 0, iterations: r = 1, iterationStart: a = 0 } = i;
+function We(i, t, e) {
+  const { duration: n = 0, iterations: s = 1, iterationStart: a = 0 } = i;
   if (typeof n != "number")
     throw new TypeError("Duration cannot be unresolved");
   let o = 0;
-  return n === 0 ? t === "before" ? o = 0 : o = r : o = e / kt(n), o + a;
+  return n === 0 ? t === "before" ? o = 0 : o = s : o = e / kt(n), o + a;
 }
 function Ie(i, t, e, n) {
-  const { iterations: r = 1, iterationStart: a = 0, activeDuration: o = 0 } = i;
-  if (Y(e))
+  const { iterations: s = 1, iterationStart: a = 0, activeDuration: o = 0 } = i;
+  if (_(e))
     return null;
   let l = 0;
-  return e === 1 / 0 && (l = a % 1), l === 0 && (t === "active" || t === "after") && o === n && r !== 0 && (l = 1), l;
+  return e === 1 / 0 && (l = a % 1), l === 0 && (t === "active" || t === "after") && o === n && s !== 0 && (l = 1), l;
 }
-function de(i, t) {
-  const { iterations: e = 1 } = i, n = Ue(i, t);
-  if (Y(n))
+function fe(i, t) {
+  const { iterations: e = 1 } = i, n = Ae(i, t);
+  if (_(n))
     return null;
   if (t === "after" && e === 1 / 0)
     return 1 / 0;
-  const r = Ae(i, t, n);
-  return Ie(i, t, r, n) === 1 ? Math.floor(r) - 1 : Math.floor(r);
+  const s = We(i, t, n);
+  return Ie(i, t, s, n) === 1 ? Math.floor(s) - 1 : Math.floor(s);
 }
-class We extends Event {
+class $e extends Event {
   constructor(t) {
-    super("update", { bubbles: !1, cancelable: !1, composed: !1 }), F(this, "currentTime"), this.currentTime = t;
+    super("update", { bubbles: !1, cancelable: !1, composed: !1 }), V(this, "currentTime"), this.currentTime = t;
   }
 }
 var U, Q;
 class b extends EventTarget {
   constructor(t = { type: "swipe", axis: "x", rangeStart: 0, rangeEnd: window.screen.availWidth, source: document.body }) {
-    super(), v(this, U, void 0), v(this, Q, void 0), t.source.addEventListener(t.type, this.onGesture.bind(this)), c(this, Q, CSS.percent(0)), c(this, U, t);
+    super(), g(this, U, void 0), g(this, Q, void 0), t.source.addEventListener(t.type, this.onGesture.bind(this)), c(this, Q, CSS.percent(0)), c(this, U, t);
   }
   onGesture(t) {
-    const e = s(this, U).source.getBoundingClientRect();
+    const e = r(this, U).source.getBoundingClientRect();
     let n = 0;
-    const r = {
+    const s = {
       x: t.x - e.left,
       y: t.y - e.top
     };
-    switch (s(this, U).type) {
+    switch (r(this, U).type) {
       case "swipe": {
-        const { rangeStart: a, rangeEnd: o } = s(this, U), l = s(this, U).axis;
+        const { rangeStart: a, rangeEnd: o } = r(this, U), l = r(this, U).axis;
         n = ot(
-          r[l],
-          [h(a, "px"), h(o, "px")],
+          s[l],
+          [u(a, "px"), u(o, "px")],
           [0, 100]
         );
         break;
       }
       case "pan": {
-        const { rangeStart: a, rangeEnd: o } = s(this, U), { x: l, y: f } = r;
+        const { rangeStart: a, rangeEnd: o } = r(this, U), { x: l, y: f } = s;
         n = ot(
           { x: l, y: f },
           {
-            min: { x: h(a.x, "px"), y: h(a.y, "px") },
-            max: { x: h(o.x, "px"), y: h(o.y, "px") }
+            min: { x: u(a.x, "px"), y: u(a.y, "px") },
+            max: { x: u(o.x, "px"), y: u(o.y, "px") }
           },
           [0, 100],
           { x: 1, y: 1 }
@@ -552,25 +507,25 @@ class b extends EventTarget {
         break;
       }
       case "pinch": {
-        const { rangeStart: a, rangeEnd: o } = s(this, U), { scale: l } = t;
+        const { rangeStart: a, rangeEnd: o } = r(this, U), { scale: l } = t;
         n = ot(
           l,
-          [h(a, ""), h(o, "")],
+          [u(a, ""), u(o, "")],
           // figure out which unit
           [0, 100]
         );
         break;
       }
       case "rotate": {
-        const { rangeStart: a, rangeEnd: o } = s(this, U), { rotation: l } = t;
+        const { rangeStart: a, rangeEnd: o } = r(this, U), { rotation: l } = t;
         n = ot(
           l,
-          [h(a, "deg"), h(o, "deg")],
+          [u(a, "deg"), u(o, "deg")],
           [0, 100]
         );
       }
     }
-    c(this, Q, CSS.percent(n)), this.dispatchEvent(new We(s(this, Q)));
+    c(this, Q, CSS.percent(n)), this.dispatchEvent(new $e(r(this, Q)));
   }
   addEventListener(t, e, n) {
     super.addEventListener(t, e, n);
@@ -579,7 +534,7 @@ class b extends EventTarget {
     super.removeEventListener(t, e, n);
   }
   get currentTime() {
-    return s(this, Q);
+    return r(this, Q);
   }
   get phase() {
     return "active";
@@ -590,10 +545,10 @@ const N = /* @__PURE__ */ new WeakMap();
 var lt;
 class wt extends yt {
   constructor(t, e = null) {
-    super(t), v(this, lt, null), c(this, lt, e);
+    super(t), g(this, lt, null), c(this, lt, e);
   }
   get parent() {
-    return s(this, lt);
+    return r(this, lt);
   }
   getTiming() {
     var t;
@@ -614,7 +569,7 @@ class wt extends yt {
         throw TypeError("Effect duration cannot be Infinity for non-monotonic timelines.");
       if (e.iterations === 1 / 0)
         throw TypeError("Effect iterations cannot be Infinity for non-monotonic timelines.");
-      return zt(e);
+      return Ht(e);
     }
     return e;
   }
@@ -626,10 +581,10 @@ class wt extends yt {
       duration: n.duration instanceof CSSNumericValue ? n.duration.to("ms").value : n.duration,
       ...t
     };
-    let r = s(this, lt);
-    for (; r; ) {
-      const a = r.getTiming();
-      t != null && t.delay && (t.delay += a.delay ?? 0), t != null && t.endDelay && (t.endDelay += a.endDelay ?? 0), t != null && t.iterationStart && (t.iterationStart += a.iterationStart ?? 0), t != null && t.iterations && (t.iterations *= a.iterations ?? 1), t != null && t.playbackRate && (t.playbackRate *= a.playbackRate ?? 1), a.duration && typeof a.duration != "string" && t?.duration === "auto" && (t.duration = h(a.duration, "ms")), r = r.parent;
+    let s = r(this, lt);
+    for (; s; ) {
+      const a = s.getTiming();
+      t != null && t.delay && (t.delay += a.delay ?? 0), t != null && t.endDelay && (t.endDelay += a.endDelay ?? 0), t != null && t.iterationStart && (t.iterationStart += a.iterationStart ?? 0), t != null && t.iterations && (t.iterations *= a.iterations ?? 1), t != null && t.playbackRate && (t.playbackRate *= a.playbackRate ?? 1), a.duration && typeof a.duration != "string" && t?.duration === "auto" && (t.duration = u(a.duration, "ms")), s = s.parent;
     }
     if (((e = N.get(this)) == null ? void 0 : e.timeline) instanceof b) {
       if (t?.duration === 1 / 0)
@@ -642,15 +597,15 @@ class wt extends yt {
 }
 lt = /* @__PURE__ */ new WeakMap();
 var A, tt;
-const $e = class Et {
+const Oe = class Et {
   constructor(t) {
-    v(this, A, []), v(this, tt, null), c(this, A, t.map((e) => (e instanceof Et ? c(e, tt, this) : e instanceof yt && (e = new wt(e, this)), e)));
+    g(this, A, []), g(this, tt, null), c(this, A, t.map((e) => (e instanceof Et ? c(e, tt, this) : e instanceof yt && (e = new wt(e, this)), e)));
   }
   get parent() {
-    return s(this, tt);
+    return r(this, tt);
   }
   get children() {
-    const t = s(this, A);
+    const t = r(this, A);
     return {
       length: t.length,
       item(e) {
@@ -659,30 +614,30 @@ const $e = class Et {
     };
   }
   get firstChild() {
-    return s(this, A).at(0) ?? null;
+    return r(this, A).at(0) ?? null;
   }
   get lastChild() {
-    return s(this, A).at(-1) ?? null;
+    return r(this, A).at(-1) ?? null;
   }
   clone() {
     return structuredClone(this);
   }
   append(...t) {
     t.forEach((e) => {
-      s(this, A).includes(e) || (e instanceof Et ? c(e, tt, this) : e instanceof yt && (e = new wt(e, this)), s(this, A).push(e));
+      r(this, A).includes(e) || (e instanceof Et ? c(e, tt, this) : e instanceof yt && (e = new wt(e, this)), r(this, A).push(e));
     });
   }
   prepend(...t) {
     t.forEach((e) => {
-      s(this, A).includes(e) || (e instanceof Et ? c(e, tt, this) : e instanceof yt && (e = new wt(e, this)), s(this, A).unshift(e));
+      r(this, A).includes(e) || (e instanceof Et ? c(e, tt, this) : e instanceof yt && (e = new wt(e, this)), r(this, A).unshift(e));
     });
   }
 };
 A = /* @__PURE__ */ new WeakMap(), tt = /* @__PURE__ */ new WeakMap();
-let Ht = $e;
-class st {
+let zt = Oe;
+class rt {
   constructor() {
-    F(this, "promise"), F(this, "state"), F(this, "nativeResolve"), F(this, "nativeReject"), this.state = "pending", this.nativeResolve = this.nativeReject = null, this.promise = new Promise((t, e) => {
+    V(this, "promise"), V(this, "state"), V(this, "nativeResolve"), V(this, "nativeReject"), this.state = "pending", this.nativeResolve = this.nativeReject = null, this.promise = new Promise((t, e) => {
       this.nativeResolve = t, this.nativeReject = e;
     });
   }
@@ -696,11 +651,11 @@ class st {
     }), (e = this.nativeReject) == null || e.call(this, t);
   }
 }
-var et, Mt, fe;
-class Oe extends Ht {
-  constructor(t, e = pt) {
-    super(t), v(this, Mt), v(this, et, void 0), c(this, et, {
-      ...pt,
+var et, Lt, pe;
+class je extends zt {
+  constructor(t, e = ft) {
+    super(t), g(this, Lt), g(this, et, void 0), c(this, et, {
+      ...ft,
       ...e
     });
   }
@@ -711,12 +666,12 @@ class Oe extends Ht {
     super.append(...t), t.forEach((e) => e.updateTiming());
   }
   getTiming() {
-    return s(this, et);
+    return r(this, et);
   }
   getComputedTiming() {
     var t, e;
-    const n = this.getTiming(), r = { ...n }, { delay: a = 0 } = ((t = this.children.item(0)) == null ? void 0 : t.getComputedTiming()) ?? {}, { endDelay: o = 0, endTime: l = 0 } = ((e = this.children.item(this.children.length - 1)) == null ? void 0 : e.getComputedTiming()) ?? {};
-    n.delay = n.delay ? n.delay + a : a, n.endDelay = n.endDelay ? n.endDelay + o : o, r.endTime = l;
+    const n = this.getTiming(), s = { ...n }, { delay: a = 0 } = ((t = this.children.item(0)) == null ? void 0 : t.getComputedTiming()) ?? {}, { endDelay: o = 0, endTime: l = 0 } = ((e = this.children.item(this.children.length - 1)) == null ? void 0 : e.getComputedTiming()) ?? {};
+    n.delay = n.delay ? n.delay + a : a, n.endDelay = n.endDelay ? n.endDelay + o : o, s.endTime = l;
     for (let C = 0; C < this.children.length; C++) {
       const L = this.children.item(C);
       if (!L)
@@ -725,17 +680,17 @@ class Oe extends Ht {
         duration: M = "auto",
         activeDuration: Gt = 0
       } = L.getComputedTiming();
-      r.activeDuration = r.activeDuration ? h(r.activeDuration, "ms") + h(Gt, "ms") : Gt, n.duration = n.duration instanceof CSSNumericValue ? n.duration.to("ms").value : n.duration, M = M instanceof CSSNumericValue ? M.to("ms").value : M, typeof M != "string" && (n.duration === "auto" ? n.duration = h(M, "ms") : typeof n.duration != "string" && (n.duration = n.duration ? n.duration + M : M));
+      s.activeDuration = s.activeDuration ? u(s.activeDuration, "ms") + u(Gt, "ms") : Gt, n.duration = n.duration instanceof CSSNumericValue ? n.duration.to("ms").value : n.duration, M = M instanceof CSSNumericValue ? M.to("ms").value : M, typeof M != "string" && (n.duration === "auto" ? n.duration = u(M, "ms") : typeof n.duration != "string" && (n.duration = n.duration ? n.duration + M : M));
     }
-    const { timeline: f, startTime: d, currentTime: m } = N.get(this) ?? {}, S = f instanceof b ? "percent" : "ms";
-    let { duration: E = 0, iterations: Z = 1 } = r;
+    const { timeline: f, startTime: d, currentTime: m } = N.get(this) ?? {}, T = f instanceof b ? "percent" : "ms";
+    let { duration: E = 0, iterations: K = 1 } = s;
     if (E === "auto" && (E = 0), typeof E == "string")
       throw new TypeError("Unknown effect duration keyword.");
-    return r.duration = E, r.activeDuration = kt(E) * Z, r.startTime = d ?? void 0, r.localTime = m, r.currentIteration = de(r, ue(r, s(this, Mt, fe))), f instanceof b ? zt(r) : (f instanceof DocumentTimeline && (r.progress = m && h(m, S) / h(l, S)), r);
+    return s.duration = E, s.activeDuration = kt(E) * K, s.startTime = d ?? void 0, s.localTime = m, s.currentIteration = fe(s, de(s, r(this, Lt, pe))), f instanceof b ? Ht(s) : (f instanceof DocumentTimeline && (s.progress = m && u(m, T) / u(l, T)), s);
   }
   updateTiming(t) {
     c(this, et, {
-      ...s(this, et),
+      ...r(this, et),
       ...t
     });
     for (let e = 0; e < this.children.length; e++) {
@@ -744,28 +699,28 @@ class Oe extends Ht {
     }
   }
 }
-et = /* @__PURE__ */ new WeakMap(), Mt = /* @__PURE__ */ new WeakSet(), fe = function() {
+et = /* @__PURE__ */ new WeakMap(), Lt = /* @__PURE__ */ new WeakSet(), pe = function() {
   const { playbackRate: i = 1 } = N.get(this) ?? {};
   return i < 0 ? "backwards" : "forwards";
 };
-var p, x, dt, w, R, P, u, y, k, G, V, ct, I, bt, Pt, nt, ht, H, it, Dt, _t, Nt, Jt, Ut, Qt, q, X, ut, Tt, At, W, j, D, $, St, It, Wt;
-const pe = class extends EventTarget {
+var p, x, dt, w, S, P, h, y, k, G, j, ct, W, bt, Mt, nt, ut, z, it, Pt, Zt, Dt, Jt, Nt, Qt, H, X, ht, Tt, Ut, I, F, D, $, Rt, At, Wt;
+const me = class extends EventTarget {
   constructor(t, e) {
-    super(), v(this, bt), v(this, nt), v(this, H), v(this, Dt), v(this, Nt), v(this, Ut), v(this, q), v(this, Tt), v(this, W), v(this, D), F(this, "id", ""), F(this, "oncancel", null), F(this, "onfinish", null), F(this, "onremove", null), v(this, p, void 0), v(this, x, void 0), v(this, dt, "active"), v(this, w, {
+    super(), g(this, bt), g(this, nt), g(this, z), g(this, Pt), g(this, Dt), g(this, Nt), g(this, H), g(this, Tt), g(this, I), g(this, D), V(this, "id", ""), V(this, "oncancel", null), V(this, "onfinish", null), V(this, "onremove", null), g(this, p, void 0), g(this, x, void 0), g(this, dt, "active"), g(this, w, {
       task: null,
       playbackRate: null
-    }), v(this, R, new st()), v(this, P, new st()), v(this, u, null), v(this, y, null), v(this, k, []), v(this, G, null), v(this, V, !1), v(this, ct, 0), v(this, I, 1), v(this, ut, () => {
-      g(this, q, X).call(this);
-    }), v(this, St, () => {
+    }), g(this, S, new rt()), g(this, P, new rt()), g(this, h, null), g(this, y, null), g(this, k, []), g(this, G, null), g(this, j, !1), g(this, ct, 0), g(this, W, 1), g(this, ht, () => {
+      v(this, H, X).call(this);
+    }), g(this, Rt, () => {
       var n;
-      if (s(this, P).state !== "pending" || this.playState !== "finished")
+      if (r(this, P).state !== "pending" || this.playState !== "finished")
         return;
-      s(this, P).resolve(this);
-      const r = this.currentTime, a = (n = this.timeline) == null ? void 0 : n.currentTime, o = new AnimationPlaybackEvent(
+      r(this, P).resolve(this);
+      const s = this.currentTime, a = (n = this.timeline) == null ? void 0 : n.currentTime, o = new AnimationPlaybackEvent(
         "finish",
         {
           get currentTime() {
-            return r;
+            return s;
           },
           get timelineTime() {
             return a;
@@ -776,8 +731,8 @@ const pe = class extends EventTarget {
         var l;
         this.dispatchEvent(o), (l = this.onfinish) == null || l.call(this, o);
       });
-    }), v(this, It, () => {
-      var n, r;
+    }), g(this, At, () => {
+      var n, s;
       const a = this.currentTime, o = (n = this.timeline) == null ? void 0 : n.currentTime, l = new AnimationPlaybackEvent(
         "cancel",
         {
@@ -789,21 +744,21 @@ const pe = class extends EventTarget {
           }
         }
       );
-      this.dispatchEvent(l), (r = this.oncancel) == null || r.call(this, l);
-    }), v(this, Wt, () => {
+      this.dispatchEvent(l), (s = this.oncancel) == null || s.call(this, l);
+    }), g(this, Wt, () => {
       var n;
-      const r = new Event("remove");
-      this.dispatchEvent(r), (n = this.onremove) == null || n.call(this, r);
-    }), s(this, R).resolve(this), c(this, x, t ?? null), c(this, p, e ?? document.timeline), s(this, x) && N.set(s(this, x), this), g(this, Tt, At).call(this), e instanceof b && e.addEventListener("update", s(this, ut));
+      const s = new Event("remove");
+      this.dispatchEvent(s), (n = this.onremove) == null || n.call(this, s);
+    }), r(this, S).resolve(this), c(this, x, t ?? null), c(this, p, e ?? document.timeline), r(this, x) && N.set(r(this, x), this), v(this, Tt, Ut).call(this), e instanceof b && e.addEventListener("update", r(this, ht));
   }
   reverse() {
     var t;
-    const { endTime: e = 0 } = ((t = s(this, x)) == null ? void 0 : t.getComputedTiming()) ?? {}, n = s(this, w).playbackRate ?? s(this, I), r = h(this.currentTime), a = e === 1 / 0, o = n !== 0 && (n < 0 || r && r > 0 || !a);
-    if (!s(this, p) || !o) {
-      o && (s(this, w).playbackRate = -n);
+    const { endTime: e = 0 } = ((t = r(this, x)) == null ? void 0 : t.getComputedTiming()) ?? {}, n = r(this, w).playbackRate ?? r(this, W), s = u(this.currentTime), a = e === 1 / 0, o = n !== 0 && (n < 0 || s && s > 0 || !a);
+    if (!r(this, p) || !o) {
+      o && (r(this, w).playbackRate = -n);
       return;
     }
-    if (s(this, p).currentTime === null)
+    if (r(this, p).currentTime === null)
       throw new DOMException(
         "Cannot reverse an animation with no active timeline",
         "InvalidStateError"
@@ -812,56 +767,56 @@ const pe = class extends EventTarget {
   }
   play() {
     const t = this.playState === "paused" && this.pending, e = this.currentTime;
-    (s(this, w).playbackRate ?? this.playbackRate) === 0 && e === null && c(this, y, 0), e === null && c(this, V, !0), (this.playState === "finished" || t) && (c(this, u, null), c(this, y, null), c(this, V, !0)), s(this, y) && c(this, u, null), s(this, w).task && (s(this, w).task = null), !(s(this, u) !== null && s(this, y) === null && !t && s(this, w).playbackRate === null) && (g(this, q, X).call(this), g(this, nt, ht).call(this), s(this, w).task = "play", g(this, W, j).call(this, !1));
+    (r(this, w).playbackRate ?? this.playbackRate) === 0 && e === null && c(this, y, 0), e === null && c(this, j, !0), (this.playState === "finished" || t) && (c(this, h, null), c(this, y, null), c(this, j, !0)), r(this, y) && c(this, h, null), r(this, w).task && (r(this, w).task = null), !(r(this, h) !== null && r(this, y) === null && !t && r(this, w).playbackRate === null) && (v(this, H, X).call(this), v(this, nt, ut).call(this), r(this, w).task = "play", v(this, I, F).call(this, !1));
   }
   pause() {
-    this.playState !== "paused" && (this.currentTime === null && c(this, V, !0), s(this, w).task && (s(this, w).task = null), g(this, nt, ht).call(this), s(this, w).task = "pause");
+    this.playState !== "paused" && (this.currentTime === null && c(this, j, !0), r(this, w).task && (r(this, w).task = null), v(this, nt, ut).call(this), r(this, w).task = "pause");
   }
   persist() {
-    s(this, k).forEach((t) => t.persist()), c(this, dt, "persisted");
+    r(this, k).forEach((t) => t.persist()), c(this, dt, "persisted");
   }
   finish() {
     var t;
-    const { endTime: e = 0 } = ((t = this.effect) == null ? void 0 : t.getComputedTiming()) ?? {}, n = s(this, w).playbackRate ?? s(this, I);
+    const { endTime: e = 0 } = ((t = this.effect) == null ? void 0 : t.getComputedTiming()) ?? {}, n = r(this, w).playbackRate ?? r(this, W);
     if (n === 0 || n > 0 && e === 1 / 0)
       throw new DOMException("InvalidStateError");
-    g(this, D, $).call(this);
-    let r;
-    if (n > 0 ? r = e : r = 0, g(this, bt, Pt).call(this, r), this.startTime === null && s(this, p) !== null && s(this, p).currentTime !== null && r !== null) {
-      const a = s(this, p) instanceof b ? "percent" : "ms";
-      r = h(r, a);
-      const o = h(s(this, p).currentTime, a);
-      c(this, u, o - r / n);
+    v(this, D, $).call(this);
+    let s;
+    if (n > 0 ? s = e : s = 0, v(this, bt, Mt).call(this, s), this.startTime === null && r(this, p) !== null && r(this, p).currentTime !== null && s !== null) {
+      const a = r(this, p) instanceof b ? "percent" : "ms";
+      s = u(s, a);
+      const o = u(r(this, p).currentTime, a);
+      c(this, h, o - s / n);
     }
-    s(this, w).task === "pause" && s(this, u) !== null && (c(this, y, null), g(this, H, it).call(this), s(this, R).resolve(this)), s(this, w).task === "play" && s(this, u) !== null && (g(this, H, it).call(this), s(this, R).resolve(this)), g(this, W, j).call(this, !0), s(this, k).forEach((a) => a.finish());
+    r(this, w).task === "pause" && r(this, h) !== null && (c(this, y, null), v(this, z, it).call(this), r(this, S).resolve(this)), r(this, w).task === "play" && r(this, h) !== null && (v(this, z, it).call(this), r(this, S).resolve(this)), v(this, I, F).call(this, !0), r(this, k).forEach((a) => a.finish());
   }
   commitStyles() {
-    s(this, k).forEach((t) => {
+    r(this, k).forEach((t) => {
       t.effect instanceof wt && (t.effect.target === null || t.effect.pseudoElement !== null) || t.commitStyles();
     });
   }
   cancel() {
-    this.playState !== "idle" && (g(this, D, $).call(this), s(this, R).reject(new DOMException("The user aborted a request", "AbortError")), g(this, H, it).call(this), c(this, R, new st()), s(this, P).state === "pending" && s(this, P).reject(new DOMException("The user aborted a request", "AbortError")), c(this, P, new st()), s(this, k).forEach((t) => t.cancel())), c(this, u, null), c(this, y, null);
+    this.playState !== "idle" && (v(this, D, $).call(this), r(this, S).reject(new DOMException("The user aborted a request", "AbortError")), v(this, z, it).call(this), c(this, S, new rt()), r(this, P).state === "pending" && r(this, P).reject(new DOMException("The user aborted a request", "AbortError")), c(this, P, new rt()), r(this, k).forEach((t) => t.cancel())), c(this, h, null), c(this, y, null);
   }
   updatePlaybackRate(t) {
     var e;
-    s(this, w).playbackRate = t;
+    r(this, w).playbackRate = t;
     const n = this.playState;
-    if (s(this, R).state !== "pending")
+    if (r(this, S).state !== "pending")
       switch (n) {
         case "idle":
         case "paused":
-          g(this, D, $).call(this);
+          v(this, D, $).call(this);
           break;
         case "finished": {
-          const r = s(this, p) instanceof b ? "percent" : "ms", a = ((e = s(this, p)) == null ? void 0 : e.currentTime) ?? null;
+          const s = r(this, p) instanceof b ? "percent" : "ms", a = ((e = r(this, p)) == null ? void 0 : e.currentTime) ?? null;
           if (t === 0)
-            c(this, u, h(a, r));
+            c(this, h, u(a, s));
           else if (a !== null) {
             let o = null;
-            o = (h(a, r) - (s(this, u) ?? 0)) * this.playbackRate, s(this, u) !== null && o !== null && c(this, u, (h(a, r) - o) / t);
+            o = (u(a, s) - (r(this, h) ?? 0)) * this.playbackRate, r(this, h) !== null && o !== null && c(this, h, (u(a, s) - o) / t);
           }
-          g(this, D, $).call(this), g(this, W, j).call(this, !1), g(this, q, X).call(this);
+          v(this, D, $).call(this), v(this, I, F).call(this, !1), v(this, H, X).call(this);
           break;
         }
         default:
@@ -875,210 +830,210 @@ const pe = class extends EventTarget {
     super.removeEventListener(t, e, n);
   }
   set playbackRate(t) {
-    c(this, I, t), s(this, k).forEach((e) => {
+    c(this, W, t), r(this, k).forEach((e) => {
       e.playbackRate *= t;
     });
   }
   set startTime(t) {
-    c(this, u, h(t)), s(this, k).forEach((e) => e.startTime = t);
+    c(this, h, u(t)), r(this, k).forEach((e) => e.startTime = t);
   }
   set currentTime(t) {
     var e;
-    const n = s(this, p) instanceof b ? "percent" : "ms", r = h(((e = s(this, p)) == null ? void 0 : e.currentTime) ?? null, n);
-    if (Y(t) && !Y(r))
+    const n = r(this, p) instanceof b ? "percent" : "ms", s = u(((e = r(this, p)) == null ? void 0 : e.currentTime) ?? null, n);
+    if (_(t) && !_(s))
       throw new TypeError("currentTime may not be changed from resolved to unresolved.");
-    c(this, V, !1), s(this, y) !== null || s(this, u) === null || r === null || this.playbackRate === 0 ? c(this, y, h(t, n)) : c(this, u, r - h(t, n) / this.playbackRate), (s(this, p) === null || r === null) && c(this, u, null), c(this, G, null), g(this, bt, Pt).call(this, t), s(this, w).task === "pause" && (c(this, y, h(t, n)), g(this, D, $).call(this), c(this, u, null), g(this, H, it).call(this), s(this, R).resolve(this)), g(this, W, j).call(this, !0);
+    c(this, j, !1), r(this, y) !== null || r(this, h) === null || s === null || this.playbackRate === 0 ? c(this, y, u(t, n)) : c(this, h, s - u(t, n) / this.playbackRate), (r(this, p) === null || s === null) && c(this, h, null), c(this, G, null), v(this, bt, Mt).call(this, t), r(this, w).task === "pause" && (c(this, y, u(t, n)), v(this, D, $).call(this), c(this, h, null), v(this, z, it).call(this), r(this, S).resolve(this)), v(this, I, F).call(this, !0);
   }
   set timeline(t) {
     var e, n;
-    const r = this.timeline;
-    if (r === t)
+    const s = this.timeline;
+    if (s === t)
       return;
-    s(this, p) instanceof b && s(this, p).removeEventListener("update", s(this, ut));
-    const a = this.playState, o = r instanceof b ? "percent" : "ms", l = h(this.currentTime, o), { progress: f = null, endTime: d = 0 } = ((e = s(this, x)) == null ? void 0 : e.getComputedTiming()) ?? {}, m = h(d, o), S = r instanceof b, E = t instanceof b, Z = t instanceof DocumentTimeline, C = this.pending;
+    r(this, p) instanceof b && r(this, p).removeEventListener("update", r(this, ht));
+    const a = this.playState, o = s instanceof b ? "percent" : "ms", l = u(this.currentTime, o), { progress: f = null, endTime: d = 0 } = ((e = r(this, x)) == null ? void 0 : e.getComputedTiming()) ?? {}, m = u(d, o), T = s instanceof b, E = t instanceof b, K = t instanceof DocumentTimeline, C = this.pending;
     if (E)
-      c(this, p, t), t.addEventListener("update", s(this, ut)), g(this, D, $).call(this), c(this, V, !0), c(this, u, null), c(this, y, null), (a === "running" || a === "finished") && ((!s(this, R) || s(this, R).state === "resolved") && g(this, nt, ht).call(this), s(this, w).task = "play", s(this, k).forEach((L) => L.pause())), a === "paused" && f !== null && c(this, y, f * m), C && ((!s(this, R) || s(this, R).state === "resolved") && g(this, nt, ht).call(this), a === "paused" ? s(this, w).task = "pause" : s(this, w).task = "play"), s(this, u) !== null && c(this, y, null), g(this, W, j).call(this, !1);
-    else if (Z) {
-      if (c(this, p, t), S) {
+      c(this, p, t), t.addEventListener("update", r(this, ht)), v(this, D, $).call(this), c(this, j, !0), c(this, h, null), c(this, y, null), (a === "running" || a === "finished") && ((!r(this, S) || r(this, S).state === "resolved") && v(this, nt, ut).call(this), r(this, w).task = "play", r(this, k).forEach((L) => L.pause())), a === "paused" && f !== null && c(this, y, f * m), C && ((!r(this, S) || r(this, S).state === "resolved") && v(this, nt, ut).call(this), a === "paused" ? r(this, w).task = "pause" : r(this, w).task = "play"), r(this, h) !== null && c(this, y, null), v(this, I, F).call(this, !1);
+    else if (K) {
+      if (c(this, p, t), T) {
         if (l !== null && f !== null) {
-          const { endTime: L = 0 } = ((n = s(this, x)) == null ? void 0 : n.getComputedTiming()) ?? {}, M = h(L, "ms");
+          const { endTime: L = 0 } = ((n = r(this, x)) == null ? void 0 : n.getComputedTiming()) ?? {}, M = u(L, "ms");
           this.currentTime = f * M;
         }
         switch (a) {
           case "paused":
-            s(this, k).forEach((L) => L.pause());
+            r(this, k).forEach((L) => L.pause());
             break;
           case "running":
           case "finished":
-            s(this, k).forEach((L) => L.play());
+            r(this, k).forEach((L) => L.play());
         }
       }
     } else
       throw TypeError("Unsupported timeline: " + t);
   }
   set effect(t) {
-    if (t !== s(this, x)) {
-      if (this.pending && g(this, H, it).call(this), s(this, x) && N.delete(s(this, x)), t) {
+    if (t !== r(this, x)) {
+      if (this.pending && v(this, z, it).call(this), r(this, x) && N.delete(r(this, x)), t) {
         const e = N.get(t);
         e && (e.effect = null), N.set(t, this);
       }
-      c(this, x, t), g(this, Tt, At).call(this), g(this, W, j).call(this, !1);
+      c(this, x, t), v(this, Tt, Ut).call(this), v(this, I, F).call(this, !1);
     }
   }
   get ready() {
-    return s(this, R).promise;
+    return r(this, S).promise;
   }
   get finished() {
-    return s(this, P).promise;
+    return r(this, P).promise;
   }
   get playState() {
     var t;
     let { endTime: e = 0 } = ((t = this.effect) == null ? void 0 : t.getComputedTiming()) ?? {};
-    const n = s(this, p) instanceof b ? "percent" : "ms", r = h(this.startTime, n), a = h(this.currentTime, n);
-    return e = h(e, n), a === null && r === null && s(this, w).task === null ? "idle" : s(this, w).task === "pause" || r === null && s(this, w).task !== "play" ? "paused" : a !== null && (s(this, I) > 0 && a >= e || s(this, I) < 0 && a <= 0) ? "finished" : "running";
+    const n = r(this, p) instanceof b ? "percent" : "ms", s = u(this.startTime, n), a = u(this.currentTime, n);
+    return e = u(e, n), a === null && s === null && r(this, w).task === null ? "idle" : r(this, w).task === "pause" || s === null && r(this, w).task !== "play" ? "paused" : a !== null && (r(this, W) > 0 && a >= e || r(this, W) < 0 && a <= 0) ? "finished" : "running";
   }
   get playbackRate() {
-    return s(this, I);
+    return r(this, W);
   }
   get replaceState() {
-    return s(this, dt);
+    return r(this, dt);
   }
   get pending() {
-    return s(this, R).state === "pending";
+    return r(this, S).state === "pending";
   }
   get currentTime() {
     var t;
     const e = ((t = this.timeline) == null ? void 0 : t.currentTime) ?? null;
-    if (s(this, y)) {
+    if (r(this, y)) {
       if (typeof e == "number")
-        return s(this, y);
-      const a = s(this, p) instanceof b ? "percent" : "ms";
-      return new CSSUnitValue(s(this, y), a);
+        return r(this, y);
+      const a = r(this, p) instanceof b ? "percent" : "ms";
+      return new CSSUnitValue(r(this, y), a);
     }
-    if (e === null || s(this, u) === null)
+    if (e === null || r(this, h) === null)
       return null;
-    const n = s(this, p) instanceof b ? "percent" : "ms";
-    let r = (h(e, n) - s(this, u)) * this.playbackRate;
-    return r === -0 && (r = 0), typeof e == "number" ? r : new CSSUnitValue(r, n);
+    const n = r(this, p) instanceof b ? "percent" : "ms";
+    let s = (u(e, n) - r(this, h)) * this.playbackRate;
+    return s === -0 && (s = 0), typeof e == "number" ? s : new CSSUnitValue(s, n);
   }
   get startTime() {
     var t;
-    if (s(this, u) === null)
+    if (r(this, h) === null)
       return null;
     if (typeof (((t = this.timeline) == null ? void 0 : t.currentTime) ?? null) == "number")
-      return s(this, u);
-    const e = s(this, p) instanceof b ? "percent" : "ms";
-    return new CSSUnitValue(s(this, u), e);
+      return r(this, h);
+    const e = r(this, p) instanceof b ? "percent" : "ms";
+    return new CSSUnitValue(r(this, h), e);
   }
   get timeline() {
-    return s(this, p);
+    return r(this, p);
   }
   get effect() {
-    return s(this, x);
+    return r(this, x);
   }
 };
-p = /* @__PURE__ */ new WeakMap(), x = /* @__PURE__ */ new WeakMap(), dt = /* @__PURE__ */ new WeakMap(), w = /* @__PURE__ */ new WeakMap(), R = /* @__PURE__ */ new WeakMap(), P = /* @__PURE__ */ new WeakMap(), u = /* @__PURE__ */ new WeakMap(), y = /* @__PURE__ */ new WeakMap(), k = /* @__PURE__ */ new WeakMap(), G = /* @__PURE__ */ new WeakMap(), V = /* @__PURE__ */ new WeakMap(), ct = /* @__PURE__ */ new WeakMap(), I = /* @__PURE__ */ new WeakMap(), bt = /* @__PURE__ */ new WeakSet(), Pt = function(i) {
+p = /* @__PURE__ */ new WeakMap(), x = /* @__PURE__ */ new WeakMap(), dt = /* @__PURE__ */ new WeakMap(), w = /* @__PURE__ */ new WeakMap(), S = /* @__PURE__ */ new WeakMap(), P = /* @__PURE__ */ new WeakMap(), h = /* @__PURE__ */ new WeakMap(), y = /* @__PURE__ */ new WeakMap(), k = /* @__PURE__ */ new WeakMap(), G = /* @__PURE__ */ new WeakMap(), j = /* @__PURE__ */ new WeakMap(), ct = /* @__PURE__ */ new WeakMap(), W = /* @__PURE__ */ new WeakMap(), bt = /* @__PURE__ */ new WeakSet(), Mt = function(i) {
   var t;
-  const e = h(((t = s(this, p)) == null ? void 0 : t.currentTime) ?? null);
+  const e = u(((t = r(this, p)) == null ? void 0 : t.currentTime) ?? null);
   if (i === null && e !== null)
     throw new TypeError();
-  i === null || e === null || (i = h(i), c(this, V, !1), s(this, y) !== null || s(this, u) === null || s(this, p) instanceof b && s(this, p).phase === "inactive" || s(this, I) === 0 ? c(this, y, i) : c(this, u, e - i / s(this, I)), s(this, p) instanceof b && s(this, p).phase === "inactive" && c(this, u, null), c(this, G, null));
-}, nt = /* @__PURE__ */ new WeakSet(), ht = function() {
-  s(this, R).state !== "pending" && c(this, R, new st()), cancelAnimationFrame(s(this, ct)), c(this, ct, requestAnimationFrame(() => {
+  i === null || e === null || (i = u(i), c(this, j, !1), r(this, y) !== null || r(this, h) === null || r(this, p) instanceof b && r(this, p).phase === "inactive" || r(this, W) === 0 ? c(this, y, i) : c(this, h, e - i / r(this, W)), r(this, p) instanceof b && r(this, p).phase === "inactive" && c(this, h, null), c(this, G, null));
+}, nt = /* @__PURE__ */ new WeakSet(), ut = function() {
+  r(this, S).state !== "pending" && c(this, S, new rt()), cancelAnimationFrame(r(this, ct)), c(this, ct, requestAnimationFrame(() => {
     var i;
-    (((i = s(this, p)) == null ? void 0 : i.currentTime) ?? null) !== null && (g(this, Ut, Qt).call(this), s(this, w).task === "play" && (s(this, u) !== null || s(this, y) !== null) ? g(this, Dt, _t).call(this) : s(this, w).task === "pause" && g(this, Nt, Jt).call(this), Promise.all(s(this, k).map((t) => t.finished)).then(s(this, St)), Promise.all(s(this, k).map((t) => new Promise((e) => t.onremove = e))).then(s(this, Wt)), Promise.all(s(this, k).map((t) => new Promise((e) => t.oncancel = e))).then(s(this, It)).then(() => c(this, dt, "removed")));
+    (((i = r(this, p)) == null ? void 0 : i.currentTime) ?? null) !== null && (v(this, Nt, Qt).call(this), r(this, w).task === "play" && (r(this, h) !== null || r(this, y) !== null) ? v(this, Pt, Zt).call(this) : r(this, w).task === "pause" && v(this, Dt, Jt).call(this), Promise.all(r(this, k).map((t) => t.finished)).then(r(this, Rt)), Promise.all(r(this, k).map((t) => new Promise((e) => t.onremove = e))).then(r(this, Wt)), Promise.all(r(this, k).map((t) => new Promise((e) => t.oncancel = e))).then(r(this, At)).then(() => c(this, dt, "removed")));
   }));
-}, H = /* @__PURE__ */ new WeakSet(), it = function() {
-  cancelAnimationFrame(s(this, ct)), s(this, w).task = null;
-}, Dt = /* @__PURE__ */ new WeakSet(), _t = function() {
+}, z = /* @__PURE__ */ new WeakSet(), it = function() {
+  cancelAnimationFrame(r(this, ct)), r(this, w).task = null;
+}, Pt = /* @__PURE__ */ new WeakSet(), Zt = function() {
   var i;
   const t = ((i = this.timeline) == null ? void 0 : i.currentTime) ?? null;
   if (t === null)
     return;
-  const e = s(this, p) instanceof b ? "percent" : "ms";
-  if (s(this, y) !== null)
-    g(this, D, $).call(this), this.playbackRate === 0 ? c(this, u, h(t, e)) : (c(this, u, h(t, e) - s(this, y) / this.playbackRate), c(this, y, null));
-  else if (s(this, u) !== null && s(this, w).playbackRate !== null) {
-    const n = (h(t, e) - s(this, u)) * this.playbackRate;
-    g(this, D, $).call(this);
-    const r = this.playbackRate;
-    r === 0 ? (c(this, y, null), c(this, u, h(t, e))) : c(this, u, h(t, e) - n / r);
-  }
-  s(this, R).state === "pending" && s(this, R).resolve(this), g(this, W, j).call(this, !1), g(this, q, X).call(this), s(this, w).task = null, this.timeline instanceof DocumentTimeline && s(this, k).forEach((n) => n.play());
-}, Nt = /* @__PURE__ */ new WeakSet(), Jt = function() {
+  const e = r(this, p) instanceof b ? "percent" : "ms";
+  if (r(this, y) !== null)
+    v(this, D, $).call(this), this.playbackRate === 0 ? c(this, h, u(t, e)) : (c(this, h, u(t, e) - r(this, y) / this.playbackRate), c(this, y, null));
+  else if (r(this, h) !== null && r(this, w).playbackRate !== null) {
+    const n = (u(t, e) - r(this, h)) * this.playbackRate;
+    v(this, D, $).call(this);
+    const s = this.playbackRate;
+    s === 0 ? (c(this, y, null), c(this, h, u(t, e))) : c(this, h, u(t, e) - n / s);
+  }
+  r(this, S).state === "pending" && r(this, S).resolve(this), v(this, I, F).call(this, !1), v(this, H, X).call(this), r(this, w).task = null, this.timeline instanceof DocumentTimeline && r(this, k).forEach((n) => n.play());
+}, Dt = /* @__PURE__ */ new WeakSet(), Jt = function() {
   var i;
   const t = ((i = this.timeline) == null ? void 0 : i.currentTime) ?? null;
   if (t === null)
     return;
-  const e = s(this, p) instanceof b ? "percent" : "ms", n = t;
-  s(this, u) !== null && s(this, y) === null && c(this, y, (h(n, e) - s(this, u)) * this.playbackRate), g(this, D, $).call(this), c(this, u, null), s(this, R).resolve(this), g(this, W, j).call(this, !1), g(this, q, X).call(this), s(this, w).task = null, s(this, k).forEach((r) => r.pause());
-}, Ut = /* @__PURE__ */ new WeakSet(), Qt = function() {
-  if (s(this, V) && !(!s(this, p) || !s(this, p).currentTime) && !(this.playState === "idle" || this.playState === "paused" && s(this, y) !== null)) {
-    if (s(this, p) instanceof b) {
-      const i = s(this, w).playbackRate ?? this.playbackRate;
-      c(this, u, i >= 0 ? 0 : 100);
+  const e = r(this, p) instanceof b ? "percent" : "ms", n = t;
+  r(this, h) !== null && r(this, y) === null && c(this, y, (u(n, e) - r(this, h)) * this.playbackRate), v(this, D, $).call(this), c(this, h, null), r(this, S).resolve(this), v(this, I, F).call(this, !1), v(this, H, X).call(this), r(this, w).task = null, r(this, k).forEach((s) => s.pause());
+}, Nt = /* @__PURE__ */ new WeakSet(), Qt = function() {
+  if (r(this, j) && !(!r(this, p) || !r(this, p).currentTime) && !(this.playState === "idle" || this.playState === "paused" && r(this, y) !== null)) {
+    if (r(this, p) instanceof b) {
+      const i = r(this, w).playbackRate ?? this.playbackRate;
+      c(this, h, i >= 0 ? 0 : 100);
     } else
-      c(this, u, h(s(this, p).currentTime, "ms"));
+      c(this, h, u(r(this, p).currentTime, "ms"));
     c(this, y, null);
   }
-}, q = /* @__PURE__ */ new WeakSet(), X = function() {
+}, H = /* @__PURE__ */ new WeakSet(), X = function() {
   var i;
-  const t = ((i = s(this, p)) == null ? void 0 : i.currentTime) ?? null;
+  const t = ((i = r(this, p)) == null ? void 0 : i.currentTime) ?? null;
   if (t === null)
     return;
-  const e = s(this, x), n = s(this, p) instanceof b ? Pe(t, e?.getTiming()) : kt(t);
-  let r = null;
-  if (s(this, u) !== null) {
-    const a = h(t, "percent") === (this.playbackRate < 0 ? 0 : 100) ? this.playbackRate < 0 ? 1e-3 : -1e-3 : 0;
-    r = (n - s(this, u)) * this.playbackRate, r += a;
-  } else if (s(this, y) !== null)
-    r = s(this, y);
+  const e = r(this, x), n = r(this, p) instanceof b ? De(t, e?.getTiming()) : kt(t);
+  let s = null;
+  if (r(this, h) !== null) {
+    const a = u(t, "percent") === (this.playbackRate < 0 ? 0 : 100) ? this.playbackRate < 0 ? 1e-3 : -1e-3 : 0;
+    s = (n - r(this, h)) * this.playbackRate, s += a;
+  } else if (r(this, y) !== null)
+    s = r(this, y);
   else
     return;
-  s(this, k).forEach((a) => a.currentTime = r);
-}, ut = /* @__PURE__ */ new WeakMap(), Tt = /* @__PURE__ */ new WeakSet(), At = function() {
+  r(this, k).forEach((a) => a.currentTime = s);
+}, ht = /* @__PURE__ */ new WeakMap(), Tt = /* @__PURE__ */ new WeakSet(), Ut = function() {
   var i;
-  const t = s(this, x), e = [];
-  if (t instanceof Ht)
+  const t = r(this, x), e = [];
+  if (t instanceof zt)
     for (let n = 0; n < t.children.length; n++) {
-      const r = new pe(t.children.item(n));
-      if (t instanceof Oe && n > 0) {
+      const s = new me(t.children.item(n));
+      if (t instanceof je && n > 0) {
         const { endTime: a = null } = ((i = e[n - 1].effect) == null ? void 0 : i.getComputedTiming()) ?? {};
-        r.startTime = h(a, "ms");
+        s.startTime = u(a, "ms");
       }
-      e.push(r);
+      e.push(s);
     }
   else {
-    const n = s(this, p) instanceof b ? document.timeline : s(this, p);
-    e.push(new Me(t, n));
+    const n = r(this, p) instanceof b ? document.timeline : r(this, p);
+    e.push(new Pe(t, n));
   }
   c(this, k, e);
-}, W = /* @__PURE__ */ new WeakSet(), j = function(i) {
+}, I = /* @__PURE__ */ new WeakSet(), F = function(i) {
   var t, e;
-  const n = ((t = s(this, p)) == null ? void 0 : t.currentTime) ?? null, r = s(this, p) instanceof b ? "percent" : "ms", a = h(this.currentTime, r);
-  if (a && s(this, u) !== null && !this.pending) {
-    let { delay: o = 0, endDelay: l = 0, iterations: f = 1, duration: d = "auto" } = ((e = s(this, x)) == null ? void 0 : e.getTiming()) ?? {};
-    const m = s(this, w).playbackRate ?? this.playbackRate;
+  const n = ((t = r(this, p)) == null ? void 0 : t.currentTime) ?? null, s = r(this, p) instanceof b ? "percent" : "ms", a = u(this.currentTime, s);
+  if (a && r(this, h) !== null && !this.pending) {
+    let { delay: o = 0, endDelay: l = 0, iterations: f = 1, duration: d = "auto" } = ((e = r(this, x)) == null ? void 0 : e.getTiming()) ?? {};
+    const m = r(this, w).playbackRate ?? this.playbackRate;
     if (d === "auto")
-      d = s(this, p) instanceof b ? qt : 0;
+      d = r(this, p) instanceof b ? qt : 0;
     else if (d instanceof CSSNumericValue)
       d = d.to("ms").value;
     else if (typeof d == "string")
       throw new TypeError("Unknown effect duration keyword.");
-    const S = o + d * f + l;
-    let E = h(s(this, G), r);
-    m > 0 && a >= S && s(this, G) !== null ? ((E === null || E < S) && (E = S), c(this, y, i ? a : E)) : m < 0 && a <= 0 ? ((E === null || E > 0) && (E = 0), c(this, y, i ? a : E)) : m !== 0 && (i && s(this, y) !== null && (n !== null ? c(this, u, h(n, r) - s(this, y) / m) : c(this, u, null)), c(this, y, null));
+    const T = o + d * f + l;
+    let E = u(r(this, G), s);
+    m > 0 && a >= T && r(this, G) !== null ? ((E === null || E < T) && (E = T), c(this, y, i ? a : E)) : m < 0 && a <= 0 ? ((E === null || E > 0) && (E = 0), c(this, y, i ? a : E)) : m !== 0 && (i && r(this, y) !== null && (n !== null ? c(this, h, u(n, s) - r(this, y) / m) : c(this, h, null)), c(this, y, null));
   }
-  g(this, q, X).call(this), c(this, G, this.currentTime), this.playState === "finished" ? s(this, P).state === "pending" && s(this, St).call(this) : s(this, P).state === "resolved" && c(this, P, new st());
+  v(this, H, X).call(this), c(this, G, this.currentTime), this.playState === "finished" ? r(this, P).state === "pending" && r(this, Rt).call(this) : r(this, P).state === "resolved" && c(this, P, new rt());
 }, D = /* @__PURE__ */ new WeakSet(), $ = function() {
-  s(this, w).playbackRate && (this.playbackRate = s(this, w).playbackRate), s(this, w).playbackRate = null;
-}, St = /* @__PURE__ */ new WeakMap(), It = /* @__PURE__ */ new WeakMap(), Wt = /* @__PURE__ */ new WeakMap();
-let Ve = pe;
-var rt, $t, me;
-class Ot extends Ht {
-  constructor(t, e = pt) {
-    super(t), v(this, $t), v(this, rt, void 0), c(this, rt, {
-      ...pt,
+  r(this, w).playbackRate && (this.playbackRate = r(this, w).playbackRate), r(this, w).playbackRate = null;
+}, Rt = /* @__PURE__ */ new WeakMap(), At = /* @__PURE__ */ new WeakMap(), Wt = /* @__PURE__ */ new WeakMap();
+let Fe = me;
+var st, It, ve;
+class $t extends zt {
+  constructor(t, e = ft) {
+    super(t), g(this, It), g(this, st, void 0), c(this, st, {
+      ...ft,
       ...e
     }), t.forEach((n) => n.updateTiming());
   }
@@ -1089,32 +1044,32 @@ class Ot extends Ht {
     super.append(...t), t.forEach((e) => e.updateTiming());
   }
   getTiming() {
-    return s(this, rt);
+    return r(this, st);
   }
   getComputedTiming() {
     const t = this.getTiming(), e = { ...t };
     for (let m = 0; m < this.children.length; m++) {
-      const S = this.children.item(m);
-      if (!S)
+      const T = this.children.item(m);
+      if (!T)
         continue;
       let {
         delay: E = 0,
-        endDelay: Z = 0,
+        endDelay: K = 0,
         duration: C = "auto",
         activeDuration: L = 0,
         endTime: M = 0
-      } = S.getComputedTiming();
-      t.delay = t.delay ? Math.min(t.delay, E) : E, t.endDelay = t.endDelay ? Math.max(t.endDelay, Z) : Z, e.endTime = e.endTime ? Math.max(h(e.endTime, "ms"), h(M, "ms")) : M, e.activeDuration = e.activeDuration ? Math.max(h(e.activeDuration, "ms"), h(L, "ms")) : L, t.duration = t.duration instanceof CSSNumericValue ? t.duration.to("ms").value : t.duration, C = C instanceof CSSNumericValue ? C.to("ms").value : C, typeof C != "string" && (t.duration === "auto" ? t.duration = h(C, "ms") : typeof t.duration != "string" && (t.duration = t.duration ? Math.max(t.duration, C) : C));
+      } = T.getComputedTiming();
+      t.delay = t.delay ? Math.min(t.delay, E) : E, t.endDelay = t.endDelay ? Math.max(t.endDelay, K) : K, e.endTime = e.endTime ? Math.max(u(e.endTime, "ms"), u(M, "ms")) : M, e.activeDuration = e.activeDuration ? Math.max(u(e.activeDuration, "ms"), u(L, "ms")) : L, t.duration = t.duration instanceof CSSNumericValue ? t.duration.to("ms").value : t.duration, C = C instanceof CSSNumericValue ? C.to("ms").value : C, typeof C != "string" && (t.duration === "auto" ? t.duration = u(C, "ms") : typeof t.duration != "string" && (t.duration = t.duration ? Math.max(t.duration, C) : C));
     }
-    const { timeline: n, startTime: r, currentTime: a } = N.get(this) ?? {}, o = n instanceof b ? "percent" : "ms";
+    const { timeline: n, startTime: s, currentTime: a } = N.get(this) ?? {}, o = n instanceof b ? "percent" : "ms";
     let { duration: l = 0, iterations: f = 1, endTime: d = 0 } = e;
     if (l === "auto" && (l = 0), typeof l == "string")
       throw new TypeError("Unknown effect duration keyword.");
-    return e.duration = l, e.activeDuration = kt(l) * f, e.startTime = r ?? void 0, e.localTime = a, e.currentIteration = de(e, ue(e, s(this, $t, me))), n instanceof b ? zt(e) : (n instanceof DocumentTimeline && (e.progress = a && h(a, o) / h(d, o)), e);
+    return e.duration = l, e.activeDuration = kt(l) * f, e.startTime = s ?? void 0, e.localTime = a, e.currentIteration = fe(e, de(e, r(this, It, ve))), n instanceof b ? Ht(e) : (n instanceof DocumentTimeline && (e.progress = a && u(a, o) / u(d, o)), e);
   }
   updateTiming(t) {
-    c(this, rt, {
-      ...s(this, rt),
+    c(this, st, {
+      ...r(this, st),
       ...t
     });
     for (let e = 0; e < this.children.length; e++) {
@@ -1123,16 +1078,16 @@ class Ot extends Ht {
     }
   }
 }
-rt = /* @__PURE__ */ new WeakMap(), $t = /* @__PURE__ */ new WeakSet(), me = function() {
+st = /* @__PURE__ */ new WeakMap(), It = /* @__PURE__ */ new WeakSet(), ve = function() {
   const { playbackRate: i = 1 } = N.get(this) ?? {};
   return i < 0 ? "backwards" : "forwards";
 };
-function Vt(i, t) {
+function Ot(i, t) {
   i.endsWith("*") || (i += "**");
   const e = window.location.origin, n = new URLPattern(i, e).exec(t, e);
   if (!n)
     return null;
-  const a = Object.keys(n.pathname.groups).filter((o) => !isNaN(Number(o))).map((o) => n.pathname.groups[o]).filter((o) => o !== void 0).at(oe) ?? "";
+  const a = Object.keys(n.pathname.groups).filter((o) => !isNaN(Number(o))).map((o) => n.pathname.groups[o]).filter((o) => o !== void 0).at(le) ?? "";
   return new URL(
     t.replace(a, ""),
     window.location.origin
@@ -1140,40 +1095,40 @@ function Vt(i, t) {
 }
 function te(i, t, e = `${window.location.origin}/`, n = !0) {
   n || (i = i.toLowerCase(), t = t.toLowerCase());
-  const r = Vt(e, t)?.href;
-  if (!r)
+  const s = Ot(e, t)?.href;
+  if (!s)
     return null;
   const a = new URLPattern({
-    baseURL: r,
+    baseURL: s,
     pathname: i
-  }).exec({ pathname: t, baseURL: r }), o = a?.pathname.groups ?? {};
+  }).exec({ pathname: t, baseURL: s }), o = a?.pathname.groups ?? {};
   return a ? {
     params: o,
     caseSensitive: n
   } : null;
 }
-function je(i, t = window) {
+function Ve(i, t = window) {
   return new Promise((e) => {
     queueMicrotask(() => e(
       t.dispatchEvent(i)
     ));
   });
 }
-function on(i) {
-  const t = we(i);
+function ln(i) {
+  const t = Ee(i);
   return t.load = async () => (t.module ??= await i(), t.module), t;
 }
-function ln() {
+function cn() {
   return !!window.navigation;
 }
-function cn() {
+function un() {
   return !!globalThis.URLPattern;
 }
 async function hn() {
   const { URLPattern: i } = await import("urlpattern-polyfill");
   globalThis.URLPattern = i;
 }
-async function un() {
+async function dn() {
   const { applyPolyfill: i } = await import("@virtualstate/navigation");
   i({
     history: !0,
@@ -1183,25 +1138,25 @@ async function un() {
     persistState: !0
   });
 }
-async function Fe(i) {
+async function Ke(i) {
   const t = [];
   for (const e of i)
     t.push(await e);
   return t;
 }
-function Ke(i) {
+function Be(i) {
   return i.replace(/-([a-z])/g, (t) => t[1].toUpperCase());
 }
-function dn(i, t) {
-  return ie(i, t);
+function fn(i, t) {
+  return se(i, t);
 }
-function Be(i, t) {
+function qe(i, t) {
   const e = { ...i };
   for (const n of t)
     delete e[n];
   return e;
 }
-function qe(i) {
+function He(i, t) {
   return Object.create(
     EventTarget.prototype,
     {
@@ -1224,7 +1179,7 @@ function qe(i) {
         configurable: !1
       },
       index: {
-        value: i.index,
+        value: t ?? i.index,
         enumerable: !0,
         writable: !1,
         configurable: !1
@@ -1250,8 +1205,8 @@ function qe(i) {
     }
   );
 }
-class ze extends at {
-  ref = z();
+class ze extends vt {
+  ref = Y();
   #t = null;
   #e = null;
   state = {
@@ -1270,24 +1225,24 @@ class ze extends at {
     return this.#e;
   }
   getKeyframeProperties(t, e) {
-    const n = {}, r = window.getComputedStyle(t);
+    const n = {}, s = window.getComputedStyle(t);
     for (const a of e) {
       let o;
-      a === "offset" ? o = "cssOffset" : a === "float" ? o = "cssFloat" : o = Ke(a), n[o] = r.getPropertyValue(a);
+      a === "offset" ? o = "cssOffset" : a === "float" ? o = "cssFloat" : o = Be(a), n[o] = s.getPropertyValue(a);
     }
     return n;
   }
   copyStyles(t, e, n) {
-    if (!xe(t))
+    if (!Ce(t))
       return;
-    const r = window.getComputedStyle(t);
+    const s = window.getComputedStyle(t);
     for (const a of n) {
-      const o = r.getPropertyValue(a), l = r.getPropertyPriority(a);
+      const o = s.getPropertyValue(a), l = s.getPropertyPriority(a);
       e.style.setProperty(a, o, l);
     }
   }
   getAnimationEffect(t, e) {
-    const n = new Array(), r = {
+    const n = new Array(), s = {
       fill: "both",
       duration: "auto",
       easing: "ease"
@@ -1301,7 +1256,7 @@ class ze extends at {
               { transform: o, opacity: 1 },
               { transform: l, opacity: 0 }
             ],
-            r
+            s
           )
         ), n.push(
           new KeyframeEffect(
@@ -1310,7 +1265,7 @@ class ze extends at {
               { transform: o },
               { transform: l }
             ],
-            r
+            s
           )
         );
         break;
@@ -1323,7 +1278,7 @@ class ze extends at {
               { opacity: 0, offset: 0.5 },
               { transform: l, opacity: 0 }
             ],
-            r
+            s
           )
         ), n.push(
           new KeyframeEffect(
@@ -1333,7 +1288,7 @@ class ze extends at {
               { opacity: 0, offset: 0.5 },
               { transform: l, opacity: 1 }
             ],
-            r
+            s
           )
         );
         break;
@@ -1345,7 +1300,7 @@ class ze extends at {
               { transform: o, opacity: 1 },
               { transform: l, opacity: 0 }
             ],
-            r
+            s
           )
         ), n.push(
           new KeyframeEffect(
@@ -1354,7 +1309,7 @@ class ze extends at {
               { transform: o },
               { transform: l }
             ],
-            r
+            s
           )
         );
         break;
@@ -1378,13 +1333,13 @@ class ze extends at {
                 height: `${e.rect.height}px`
               }
             ],
-            r
+            s
           )
         );
         break;
       }
     }
-    return new Ot(n);
+    return new $t(n);
   }
   get animationEffect() {
     const t = this.outgoingScreen?.current?.sharedElementScene, e = this.incomingScreen?.current?.sharedElementScene;
@@ -1392,15 +1347,15 @@ class ze extends at {
       return null;
     t.previousScene = null, e.previousScene = t;
     const n = new Array();
-    for (const [r, a] of Array.from(e.nodes.entries())) {
-      const o = a.getBoundingClientRect(), l = t.nodes.get(r);
+    for (const [s, a] of Array.from(e.nodes.entries())) {
+      const o = a.getBoundingClientRect(), l = t.nodes.get(s);
       if (!l?.canTransition || !a.canTransition)
         continue;
       const f = l.getBoundingClientRect(), d = a.clone(), m = l.clone();
       if (!m || !d)
         continue;
-      const S = Array.from(/* @__PURE__ */ new Set([...l.styles, ...a.styles]));
-      a.transitionType !== "morph" ? (m.id = `${r}-start`, m.style.position = "absolute", m.style.gridArea = "1 / 1", m.style.margin = "0", this.copyStyles(l.ref.current?.firstElementChild, m, S), this.copyStyles(a.ref.current?.firstElementChild, d, S), m.style.width = `${f.width}px`, m.style.height = `${f.height}px`, d.style.width = `${o.width}px`, d.style.height = `${o.height}px`, this.ref.current?.prepend(m)) : (this.copyStyles(l.ref.current?.firstElementChild, d, S), d.style.width = `${f.width}px`, d.style.height = `${f.height}px`), d.id = `${r}${a.transitionType === "morph" ? "" : "-end"}`, d.style.position = "absolute", d.style.gridArea = "1 / 1", d.style.margin = "0", this.ref.current?.prepend(d), l.hide(), a.hide();
+      const T = Array.from(/* @__PURE__ */ new Set([...l.styles, ...a.styles]));
+      a.transitionType !== "morph" ? (m.id = `${s}-start`, m.style.position = "absolute", m.style.gridArea = "1 / 1", m.style.margin = "0", this.copyStyles(l.ref.current?.firstElementChild, m, T), this.copyStyles(a.ref.current?.firstElementChild, d, T), m.style.width = `${f.width}px`, m.style.height = `${f.height}px`, d.style.width = `${o.width}px`, d.style.height = `${o.height}px`, this.ref.current?.prepend(m)) : (this.copyStyles(l.ref.current?.firstElementChild, d, T), d.style.width = `${f.width}px`, d.style.height = `${f.height}px`), d.id = `${s}${a.transitionType === "morph" ? "" : "-end"}`, d.style.position = "absolute", d.style.gridArea = "1 / 1", d.style.margin = "0", this.ref.current?.prepend(d), l.hide(), a.hide();
       const E = async () => {
         this.props.direction === "forwards" ? a.unhide() : l.unhide(), d.remove(), m.remove();
       };
@@ -1409,10 +1364,10 @@ class ze extends at {
         { instance: a, clone: d, rect: o }
       ));
     }
-    return new Ot(n);
+    return new $t(n);
   }
   render() {
-    return /* @__PURE__ */ T("dialog", { className: "shared-element-layer", ref: this.ref, style: {
+    return /* @__PURE__ */ R("dialog", { className: "shared-element-layer", ref: this.ref, style: {
       maxWidth: "unset",
       maxHeight: "unset",
       width: "100vw",
@@ -1422,15 +1377,15 @@ class ze extends at {
       border: "none",
       backgroundColor: "transparent",
       isolation: "isolate"
-    }, children: /* @__PURE__ */ T("style", { children: `
+    }, children: /* @__PURE__ */ R("style", { children: `
             .shared-element-layer::backdrop {display: none}
             .shared-element-layer[open] {display:grid}
           ` }) });
   }
 }
-class He extends at {
-  sharedElementTransitionLayer = z();
-  animation = new Ve();
+class Ge extends vt {
+  sharedElementTransitionLayer = Y();
+  animation = new Fe();
   #t = "normal";
   #e = [];
   state = {
@@ -1463,8 +1418,8 @@ class He extends at {
     return this.props.hasUAVisualTransition;
   }
   transition() {
-    const t = new Ot(
-      this.screens.map((r) => r.current?.transitionProvider?.current?.animationEffect ?? null).filter((r) => r !== null)
+    const t = new $t(
+      this.screens.map((s) => s.current?.transitionProvider?.current?.animationEffect ?? null).filter((s) => s !== null)
     ), e = this.sharedElementTransitionLayer.current?.animationEffect, n = t.getComputedTiming().duration;
     return e && (e.updateTiming({
       duration: n instanceof CSSNumericValue ? n.to("ms").value : n
@@ -1477,7 +1432,7 @@ class He extends at {
   }
   render() {
     return /* @__PURE__ */ ee(Kt.Provider, { value: this, children: [
-      /* @__PURE__ */ T(
+      /* @__PURE__ */ R(
         ze,
         {
           ref: this.sharedElementTransitionLayer,
@@ -1485,24 +1440,11 @@ class He extends at {
           direction: this.animation.playbackRate > 0 ? "forwards" : "backwards"
         }
       ),
-      /* @__PURE__ */ T(
-        "div",
-        {
-          className: this.props.id,
-          style: {
-            width: "100%",
-            height: "100%",
-            display: "grid",
-            contain: "layout",
-            isolation: "isolate"
-          },
-          children: this.props.children
-        }
-      )
+      this.props.children
     ] });
   }
 }
-class Ge {
+class Xe {
   promise;
   state;
   #t;
@@ -1520,20 +1462,20 @@ class Ge {
     }), this.#e?.(t);
   }
 }
-class ge extends Event {
+class jt extends Event {
   #t;
   #e = !1;
-  #r = !0;
-  #n = !1;
-  #d = null;
+  #s = !0;
+  #r = !1;
+  #n = null;
   #f = null;
-  #l;
-  #s;
-  #c = new AbortController();
+  #c;
+  #a;
+  #u = new AbortController();
   #h = !1;
   #i = [];
-  #a = null;
-  #u = new Ge();
+  #o = null;
+  #d = new Xe();
   hasUAVisualTransition = !1;
   constructor(t, e) {
     super("navigate", { cancelable: !1, bubbles: !1, composed: !1 }), this.#t = t;
@@ -1542,7 +1484,7 @@ class ge extends Event {
     } = e ?? {};
     if (!n)
       throw new Error("Destination is null");
-    this.#l = {
+    this.#c = {
       getState() {
         return n.getState();
       },
@@ -1551,32 +1493,32 @@ class ge extends Event {
       index: n.index,
       id: n.id,
       sameDocument: !0
-    }, this.#s = this.#c.signal, window.navigation.addEventListener(
+    }, this.#a = this.#u.signal, window.navigation.addEventListener(
       "navigate",
-      this.#o,
-      { signal: this.#s }
+      this.#l,
+      { signal: this.#a }
     );
   }
-  #o = (t) => {
-    t !== this ? this.#c.abort() : this.#i.length || window.navigation.removeEventListener("navigate", this.#o);
+  #l = (t) => {
+    t !== this ? this.#u.abort() : this.#i.length || window.navigation.removeEventListener("navigate", this.#l);
   };
   intercept(t) {
     if (this.#h)
       throw new DOMException("Failed to execute 'intercept' on 'NavigateEvent': intercept() may only be called while the navigate event is being dispatched.");
     const e = t?.handler?.();
-    e && this.#i.push(e), this.#i.length === J && Fe(this.#i).then(() => {
-      this.#h = !0, window.removeEventListener("navigate", this.#o), this.#u.resolve();
+    e && this.#i.push(e), this.#i.length === J && Ke(this.#i).then(() => {
+      this.#h = !0, window.removeEventListener("navigate", this.#l), this.#d.resolve();
     });
   }
   scroll() {
     throw new Error("Method not implemented.");
   }
   get transition() {
-    return this.#a || (this.#a = {
-      finished: this.#u.promise,
+    return this.#o || (this.#o = {
+      finished: this.#d.promise,
       from: window.navigation.currentEntry,
       navigationType: this.#t
-    }), this.#a;
+    }), this.#o;
   }
   get navigationType() {
     return this.#t;
@@ -1585,34 +1527,35 @@ class ge extends Event {
     return this.#e;
   }
   get canIntercept() {
-    return this.#r;
+    return this.#s;
   }
   get hashChange() {
-    return this.#n;
+    return this.#r;
   }
   get formData() {
-    return this.#d;
+    return this.#n;
   }
   get downloadRequest() {
     return this.#f;
   }
   get destination() {
-    return this.#l;
+    return this.#c;
   }
   get signal() {
-    return this.#s;
+    return this.#a;
   }
 }
-class Rt extends at {
-  ref = z();
-  screenTransitionLayer = z();
+class St extends vt {
+  // TODO: move this out of RouterBase and leave only an abstract declaration
+  ref = Y();
+  screenTransitionLayer = Y();
   parent = null;
   #t = null;
   loadDispatched = !1;
-  hasUAVisualTransition = !1;
+  #e = null;
   parentScreen = null;
   static rootRouterRef = null;
-  static contextType = le;
+  static contextType = ce;
   constructor(t, e) {
     super(t), this.parentScreen = e?.parentScreen ?? null, this.parent = e?.parentRouter ?? null;
   }
@@ -1623,15 +1566,18 @@ class Rt extends at {
     if (this.parent)
       this.parent.child = this;
     else {
-      const t = Rt.rootRouterRef?.deref();
+      const t = St.rootRouterRef?.deref();
       if (this !== t && t?.mounted)
         throw new Error("It looks like you have two navigators at the same level. Try simplifying your navigation structure by using a nested router instead.");
-      Rt.rootRouterRef = new WeakRef(this), window.navigation.addEventListener(
+      St.rootRouterRef = new WeakRef(this), window.navigation.addEventListener(
         "navigate",
         this
       );
     }
-    this.#e(), this.loadDispatched || (window.navigation.dispatchEvent(new ge("load")), this.loadDispatched = !0);
+    if (this.#s(), !this.loadDispatched) {
+      const t = this.parent?.activeEvent?.destination;
+      this.#e = new jt("load", { destination: t }), window.navigation.dispatchEvent(this.#e), this.loadDispatched = !0;
+    }
   }
   componentWillUnmount() {
     this.#r(), this.isRoot && window.navigation.removeEventListener(
@@ -1639,13 +1585,19 @@ class Rt extends at {
       this
     );
   }
+  interceptHandler = () => {
+    let t;
+    return this.#e instanceof jt ? t = this.#e.transition : t = window.navigation.transition, t?.finished.finally(() => this.#e = null), Promise.resolve();
+  };
   onnavigate(t) {
     const n = [...this.#n()].findLast(
-      (r) => r.canIntercept(t)
+      (s) => s.canIntercept(t)
     );
-    n && (n.intercept(t), this.hasUAVisualTransition = t.hasUAVisualTransition);
+    n && (this.#e = t, n.intercept(t), t.defaultPrevented ? this.#e = null : t.intercept({
+      handler: this.interceptHandler
+    }));
   }
-  #e() {
+  #s() {
     this.constructor.events.forEach((e) => {
       this.ref.current?.addEventListener(e, this);
     });
@@ -1655,21 +1607,21 @@ class Rt extends at {
       this.ref.current?.removeEventListener(e, this);
     });
   }
-  *#n(t = Rt.rootRouterRef?.deref() ?? null) {
+  *#n(t = St.rootRouterRef?.deref() ?? null) {
     let e = t;
     for (; e; )
       yield e, e = e.child;
   }
   getRouterById(t, e) {
-    return [...this.#n(e)].find((r) => r.id === t) ?? null;
+    return [...this.#n(e)].find((s) => s.id === t) ?? null;
   }
   dispatchEvent(t) {
     const e = this.ref.current ?? void 0;
-    return je(t, e);
+    return Ve(t, e);
   }
   addEventListener(t, e, n) {
-    const r = this.ref.current;
-    return r ? (r.addEventListener(t, e, n), () => r.removeEventListener(t, e, n)) : () => {
+    const s = this.ref.current;
+    return s ? (s.addEventListener(t, e, n), () => s.removeEventListener(t, e, n)) : () => {
     };
   }
   removeEventListener(t, e, n) {
@@ -1681,7 +1633,7 @@ class Rt extends at {
   }
   screenChildFromPathname(t) {
     for (const e of Xt.toArray(this.props.children)) {
-      if (!ke(e))
+      if (!xe(e))
         continue;
       const n = te(
         e.props.path,
@@ -1699,11 +1651,17 @@ class Rt extends at {
   }
   preloadScreen(t) {
     const e = t.props.config, n = [];
-    return B(t.props.component) && n.push(t.props.component.load()), B(e?.header?.component) && n.push(e?.header?.component.load()), B(e?.footer?.component) && n.push(e?.footer?.component.load()), Promise.all(n).then(() => {
+    return q(t.props.component) && n.push(t.props.component.load()), q(e?.header?.component) && n.push(e?.header?.component.load()), q(e?.footer?.component) && n.push(e?.footer?.component.load()), Promise.all(n).then(() => {
     });
   }
   includesRoute(t, e = window.location.origin) {
-    return this.pathPatterns.some(({ pattern: n, caseSensitive: r }) => te(n, t, e, r));
+    return this.pathPatterns.some(({ pattern: n, caseSensitive: s }) => te(n, t, e, s));
+  }
+  get activeEvent() {
+    return this.#e;
+  }
+  get hasUAVisualTransition() {
+    return !!this.#e?.hasUAVisualTransition;
   }
   get id() {
     if (this.props.id)
@@ -1716,19 +1674,19 @@ class Rt extends at {
   }
   get baseURL() {
     const t = this.isRoot ? window.location.pathname : this.parentScreen.resolvedPathname, e = this.baseURLPattern.pathname;
-    return Vt(e, t);
+    return Ot(e, t);
   }
   get baseURLPattern() {
     let t = window.location.origin + "/", e = this.props.config?.basePath;
     if (e || (this.isRoot ? e = "/" : e = "."), this.parent && this.parentScreen) {
       const {
         resolvedPathname: n = window.location.pathname,
-        path: r
+        path: s
       } = this.parentScreen, a = this.parent.baseURL?.href, o = new URLPattern({
         baseURL: a,
-        pathname: r
+        pathname: s
       });
-      t = Vt(
+      t = Ot(
         o.pathname,
         n
       ).href;
@@ -1755,28 +1713,18 @@ class Rt extends at {
   }
   render() {
     if (this.navigation)
-      return /* @__PURE__ */ T(
-        "div",
+      return /* @__PURE__ */ R(gt.Provider, { value: this, children: /* @__PURE__ */ R(
+        Ge,
         {
-          id: this.id,
-          className: "react-motion-router",
-          style: { width: "100%", height: "100%" },
-          ref: this.ref,
-          children: /* @__PURE__ */ T(vt.Provider, { value: this, children: /* @__PURE__ */ T(
-            He,
-            {
-              id: `${this.id}-transition-layer`,
-              ref: this.screenTransitionLayer,
-              navigation: this.navigation,
-              hasUAVisualTransition: this.hasUAVisualTransition,
-              children: this.screens
-            }
-          ) })
+          ref: this.screenTransitionLayer,
+          navigation: this.navigation,
+          hasUAVisualTransition: this.hasUAVisualTransition,
+          children: this.screens
         }
-      );
+      ) });
   }
 }
-class Xe {
+class Ye {
   #t = /* @__PURE__ */ new Map();
   mutationObserver;
   constructor() {
@@ -1800,12 +1748,12 @@ class Xe {
     const e = this.formatMetaKey(t), n = this.#t.get(e);
     if (!n)
       return;
-    let r;
-    return n.includes(",") && n.includes("=") ? r = n.split(/,\s*/).map((a) => a.split("=")) : r = n, r;
+    let s;
+    return n.includes(",") && n.includes("=") ? s = n.split(/,\s*/).map((a) => a.split("=")) : s = n, s;
   }
   set(t, e) {
-    const n = this.formatMetaKey(t), r = this.formatMetaContent(e);
-    this.#t.set(n, r), typeof t == "string" && (t = ["name", t]), this.updateMetaElement(t, r);
+    const n = this.formatMetaKey(t), s = this.formatMetaContent(e);
+    this.#t.set(n, s), typeof t == "string" && (t = ["name", t]), this.updateMetaElement(t, s);
   }
   has(t) {
     const e = this.formatMetaKey(t);
@@ -1837,10 +1785,10 @@ class Xe {
         return;
       e.removedNodes.forEach((n) => {
         if (n.nodeName === "META") {
-          const r = Array.from(n.attributes).find((l) => l.nodeName !== "content");
-          if (!r || !r.value)
+          const s = Array.from(n.attributes).find((l) => l.nodeName !== "content");
+          if (!s || !s.value)
             return;
-          const a = [r.nodeName, r.value], o = this.formatMetaKey(a);
+          const a = [s.nodeName, s.value], o = this.formatMetaKey(a);
           this.#t.has(o) && this.#t.delete(o);
         }
       }), e.addedNodes.forEach((n) => {
@@ -1852,7 +1800,7 @@ class Xe {
     const e = Array.from(t.attributes).find((o) => o.nodeName !== "content"), n = Array.from(t.attributes).find((o) => o.nodeName === "content");
     if (!e || !e.value)
       return;
-    const r = [e.nodeName, e.value], a = this.formatMetaKey(r);
+    const s = [e.nodeName, e.value], a = this.formatMetaKey(s);
     this.#t.set(a, n?.value);
   }
   formatMetaKey(t) {
@@ -1860,8 +1808,8 @@ class Xe {
     if (typeof t == "string")
       e = `name="${t}"`;
     else {
-      const [n, r] = t;
-      e = `${n}="${r}"`;
+      const [n, s] = t;
+      e = `${n}="${s}"`;
     }
     return e;
   }
@@ -1872,13 +1820,13 @@ class Xe {
     return typeof t == "string" ? e = t : e = t.map((n) => n.join("=")).join(", "), e;
   }
   updateMetaElement(t, e) {
-    const n = document.querySelector(`meta[${this.formatMetaKey(t)}]`) || document.createElement("meta"), [r, a] = t;
-    n.setAttribute(r, a), e ? n.setAttribute("content", e) : n.removeAttribute("content"), n.parentElement || document.head.appendChild(n);
+    const n = document.querySelector(`meta[${this.formatMetaKey(t)}]`) || document.createElement("meta"), [s, a] = t;
+    n.setAttribute(s, a), e ? n.setAttribute("content", e) : n.removeAttribute("content"), n.parentElement || document.head.appendChild(n);
   }
 }
-class jt {
+class Ft {
   static rootNavigatorRef = null;
-  metaData = new Xe();
+  metaData = new Ye();
   addEventListener;
   removeEventListener;
   dispatchEvent;
@@ -1888,22 +1836,22 @@ class jt {
   baseURLPattern;
   getNavigatorById;
   constructor(t) {
-    const e = jt.rootNavigatorRef?.deref();
-    (!e || !e.isInDocument) && (jt.rootNavigatorRef = new WeakRef(this)), this.addEventListener = t.addEventListener, this.removeEventListener = t.removeEventListener, this.dispatchEvent = t.dispatchEvent, this.parent = t.parent, this.routerId = t.routerId, this.baseURL = t.baseURL, this.baseURLPattern = t.baseURLPattern, this.getNavigatorById = t.getNavigatorById;
+    const e = Ft.rootNavigatorRef?.deref();
+    (!e || !e.isInDocument) && (Ft.rootNavigatorRef = new WeakRef(this)), this.addEventListener = t.addEventListener, this.removeEventListener = t.removeEventListener, this.dispatchEvent = t.dispatchEvent, this.parent = t.parent, this.routerId = t.routerId, this.baseURL = t.baseURL, this.baseURLPattern = t.baseURLPattern, this.getNavigatorById = t.getNavigatorById;
   }
   preload(t, e) {
-    const n = new URL(t, this.baseURL).href, r = {
+    const n = new URL(t, this.baseURL).href, s = {
       getState() {
         return e;
       },
-      index: oe,
+      index: le,
       sameDocument: !0,
       url: n,
       id: null,
       key: null
-    }, a = new ge("preload", { destination: r });
+    }, a = new jt("preload", { destination: s });
     window.navigation.dispatchEvent(a);
-    const o = qe(r);
+    const o = He(s);
     return {
       finished: a.transition.finished.then(() => o),
       committed: Promise.resolve(o)
@@ -1913,25 +1861,25 @@ class jt {
     return !!document.getElementById(`${this.routerId}`);
   }
 }
-function fn() {
-  const i = ft(vt);
+function pn() {
+  const i = at(gt);
   if (i)
     return i.navigation;
   throw new Error("Router is null. You may be trying to call useNavigation outside a Router.");
 }
-function pn() {
-  return ft(vt);
-}
 function mn() {
-  Ee("Motion");
-  const i = ft(vt), e = ft(Kt).animation, n = 1;
+  return at(gt);
+}
+function vn() {
+  be("Motion");
+  const i = at(gt), e = at(Kt).animation, n = 1;
   return re(
-    (r) => {
+    (s) => {
       const a = async () => {
         do
           await new Promise((o) => {
             requestAnimationFrame(o);
-          }), r();
+          }), s();
         while (e.playState === "running");
       };
       return i.addEventListener("routertransitionstart", a), () => {
@@ -1939,54 +1887,54 @@ function mn() {
       };
     },
     () => {
-      const { progress: r } = e?.effect?.getComputedTiming() ?? {};
-      return r ?? n;
+      const { progress: s } = e?.effect?.getComputedTiming() ?? {};
+      return s ?? n;
     }
   );
 }
-function Ye() {
-  const i = ft(ce);
+function _e() {
+  const i = at(ue);
   if (i)
     return i;
   throw new Error("Router is null. You may be trying to call useRoute outside a Router.");
 }
 function gn(i, t) {
-  const e = Ye(), n = t instanceof Function ? t() : t, r = Ft(e);
-  se(() => {
-    r.current = e;
+  const e = _e(), n = t instanceof Function ? t() : t, s = Vt(e);
+  ae(() => {
+    s.current = e;
   }, [e]);
-  const a = be((l) => {
-    const { params: f, setParams: d } = r.current;
+  const a = Te((l) => {
+    const { params: f, setParams: d } = s.current;
     l instanceof Function && (l = l(f[i] ?? n)), d({ [i]: l });
   }, [n, i]);
   return [e.params[i] ?? n, a];
 }
-const mt = "--rerender";
-function vn() {
+const pt = "--rerender";
+function yn() {
   return re(
     (i) => (globalThis.addEventListener(
-      mt,
+      pt,
       i,
       { once: !0 }
     ), () => {
-      globalThis.removeEventListener(mt, i);
+      globalThis.removeEventListener(pt, i);
     }),
     () => document.timeline.currentTime
   );
 }
-function yn(i) {
-  const t = Ft(i);
-  t.current = i, se(() => {
+function wn(i) {
+  const t = Vt(i);
+  t.current = i, ae(() => {
     const e = t.current;
-    return globalThis.addEventListener(mt, e), () => {
-      globalThis.removeEventListener(mt, e);
+    return globalThis.addEventListener(pt, e), () => {
+      globalThis.removeEventListener(pt, e);
     };
   });
 }
-function wn() {
-  globalThis.dispatchEvent(new Event(mt));
+function En() {
+  globalThis.dispatchEvent(new Event(pt));
 }
-function En(i, t) {
+function bn(i, t) {
   return Object.create(EventTarget.prototype, {
     id: {
       value: crypto.randomUUID(),
@@ -2033,11 +1981,11 @@ function En(i, t) {
     }
   });
 }
-function bn() {
+function Tn() {
   if (!window.navigation)
     throw new Error("window.navigation is not available in this environment");
 }
-async function Tn() {
+async function Rn() {
   await new Promise((i) => {
     window.navigation.addEventListener(
       "navigatesuccess",
@@ -2046,47 +1994,47 @@ async function Tn() {
     );
   });
 }
-async function Ct(i) {
-  await window.navigation.navigate(i).finished;
+async function Ct(i, t) {
+  await window.navigation.navigate(i, { history: t }).finished;
 }
 async function Sn(i) {
   await window.navigation.traverseTo(i).finished;
 }
-async function Rn() {
+async function kn() {
   const i = window.navigation.entries()[0];
   await window.navigation.traverseTo(i.key).finished;
 }
-async function kn() {
+async function xn() {
   await Ct("/one"), await Ct("/two"), await Ct("/three");
 }
-const ve = (i) => {
+const ge = (i) => {
   i.intercept({
     handler() {
       return Promise.resolve();
     }
   });
 };
-async function xn() {
-  window.navigation.addEventListener("navigate", ve);
-}
 async function Cn() {
-  window.navigation.removeEventListener("navigate", ve);
+  window.navigation.addEventListener("navigate", ge);
 }
-class K extends Lt.Component {
+async function Ln() {
+  window.navigation.removeEventListener("navigate", ge);
+}
+class B extends we.Component {
   constructor(t) {
     super(t), this.state = {
       href: this.href
     };
   }
-  anchorRef = Lt.createRef();
+  anchorRef = Y();
   static directionFromRel(t) {
     return t?.split(" ").findLast((e) => e === "next" || e === "prev") ?? "prev";
   }
-  static findClosestEntryByHref(t, e, n, r) {
-    if (!Array.isArray(n) || r < O || r >= n.length || n.length === J)
+  static findClosestEntryByHref(t, e, n, s) {
+    if (!Array.isArray(n) || s < O || s >= n.length || n.length === J)
       return;
-    let a = r - J, o = r + J;
-    const l = K.directionFromRel(e);
+    let a = s - J, o = s + J;
+    const l = B.directionFromRel(e);
     for (l === "next" && (a = O), l === "prev" && (o = n.length); a >= O || o < n.length; ) {
       if (a >= O && n[a]?.url === t)
         return n[a];
@@ -2096,7 +2044,7 @@ class K extends Lt.Component {
     }
   }
   static findClosestEntry(t, e, n) {
-    switch (K.directionFromRel(t)) {
+    switch (B.directionFromRel(t)) {
       case "prev":
         return e[n - J];
       case "next":
@@ -2104,64 +2052,45 @@ class K extends Lt.Component {
     }
   }
   componentDidMount() {
-    window.navigation?.addEventListener("navigatesuccess", this.onNavigate);
+    window.navigation?.addEventListener("navigatesuccess", this), this.anchorRef.current?.addEventListener("click", this);
   }
   componentWillUnmount() {
-    window.navigation?.removeEventListener("navigatesuccess", this.onNavigate);
+    window.navigation?.removeEventListener("navigatesuccess", this), this.anchorRef.current?.removeEventListener("click", this);
+  }
+  handleEvent(t) {
+    const e = `on${t.type}`;
+    this[e]?.(t);
   }
-  onNavigate = () => {
+  onnavigatesuccess() {
     const { href: t } = this;
     this.setState({ href: t });
-  };
-  get href() {
-    const { href: t, traverse: e, reload: n, historyEntryKey: r, rel: a } = this.props;
-    if (t === void 0 && e) {
-      let o;
-      return r ? o = window.navigation?.entries().find((l) => l.key === r) : a && (t ? o = K.findClosestEntryByHref(
-        t,
-        a,
-        window.navigation.entries(),
-        window.navigation.currentEntry?.index ?? O
-      ) : o = K.findClosestEntry(
-        a,
-        window.navigation.entries(),
-        window.navigation.currentEntry?.index ?? O
-      )), o?.url;
-    } else if (n)
-      return ".";
-    return t;
-  }
-  get search() {
-    return this.props.search ? this.props.search.startsWith("?") ? this.props.search : `?${this.props.search}` : "";
   }
-  handleClick = (t) => {
-    if (this.props.onClick?.(t), t.defaultPrevented)
-      return;
+  onclick(t) {
     t.preventDefault();
     const e = window.navigation, {
       rel: n,
-      historyEntryKey: r,
+      historyEntryKey: s,
       reload: a,
       replace: o,
       traverse: l,
       navigateInfo: f,
       navigateState: d
     } = this.props, m = this.anchorRef.current?.href;
-    if (r) {
-      e.traverseTo(r, { info: f });
+    if (s) {
+      e.traverseTo(s, { info: f });
       return;
     }
     if (l) {
-      const S = e.entries();
+      const T = e.entries();
       let E;
-      if (m ? E = K.findClosestEntryByHref(
+      if (m ? E = B.findClosestEntryByHref(
         m,
         n,
-        S,
+        T,
         e.currentEntry?.index ?? O
-      ) : E = K.findClosestEntry(
+      ) : E = B.findClosestEntry(
         n,
-        S,
+        T,
         e.currentEntry?.index ?? O
       ), E) {
         e.traverseTo(E.key, { info: f });
@@ -2177,12 +2106,33 @@ class K extends Lt.Component {
       return;
     }
     m && e.navigate(m, { info: f, state: d });
-  };
+  }
+  get href() {
+    const { href: t, traverse: e, reload: n, historyEntryKey: s, rel: a } = this.props;
+    if (t === void 0 && e) {
+      let o;
+      return s ? o = window.navigation?.entries().find((l) => l.key === s) : t ? o = B.findClosestEntryByHref(
+        t,
+        a,
+        window.navigation.entries(),
+        window.navigation.currentEntry?.index ?? O
+      ) : o = B.findClosestEntry(
+        a,
+        window.navigation.entries(),
+        window.navigation.currentEntry?.index ?? O
+      ), o?.url;
+    } else if (n)
+      return ".";
+    return t;
+  }
+  get search() {
+    return this.props.search ? this.props.search.startsWith("?") ? this.props.search : `?${this.props.search}` : "";
+  }
   render() {
     const {
       rel: t,
       children: e
-    } = this.props, { href: n } = this.state, { search: r } = this, a = Be(this.props, [
+    } = this.props, { href: n } = this.state, { search: s } = this, a = qe(this.props, [
       "historyEntryKey",
       "navigateInfo",
       "navigateState",
@@ -2190,80 +2140,79 @@ class K extends Lt.Component {
       "replace",
       "traverse"
     ]);
-    return /* @__PURE__ */ T(
+    return /* @__PURE__ */ R(
       "a",
       {
         ...a,
         ref: this.anchorRef,
-        href: n ? `${n}${r}` : void 0,
+        href: n ? `${n}${s}` : void 0,
         rel: t,
-        onClick: this.handleClick,
         children: e
       }
     );
   }
 }
-function Ln({ ref: i, ...t }) {
-  const e = Ft(null);
-  return Lt.useImperativeHandle(
+function Mn({ ref: i, ...t }) {
+  const e = Vt(null);
+  return ne(
     i,
     () => e.current?.anchorRef.current ?? null
-  ), /* @__PURE__ */ T(K, { ref: e, ...t });
+  ), /* @__PURE__ */ R(B, { ref: e, ...t });
 }
 export {
-  Ln as Anchor,
-  K as AnchorBase,
-  sn as EMPTY_COLLECTION_LENGTH,
+  Mn as Anchor,
+  B as AnchorBase,
+  an as EMPTY_COLLECTION_LENGTH,
   O as FIRST_INDEX,
-  oe as LAST_INDEX,
-  ge as LoadEvent,
+  le as LAST_INDEX,
+  jt as LoadEvent,
   rn as MAX_NORM_PROGRESS,
-  tn as MAX_PROGRESS,
-  Qe as MAX_Z_INDEX,
-  nn as MIN_NORM_PROGRESS,
-  en as MIN_PROGRESS,
-  jt as NavigationBase,
-  le as NestedRouterContext,
-  Fe as PromiseAllSequential,
-  Ge as PromiseWrapper,
-  ce as RoutePropContext,
-  Rt as RouterBase,
-  vt as RouterContext,
+  en as MAX_PROGRESS,
+  tn as MAX_Z_INDEX,
+  sn as MIN_NORM_PROGRESS,
+  nn as MIN_PROGRESS,
+  Ft as NavigationBase,
+  ce as NestedRouterContext,
+  Ke as PromiseAllSequential,
+  Xe as PromiseWrapper,
+  ue as RoutePropContext,
+  St as RouterBase,
+  gt as RouterContext,
   J as SINGLE_ELEMENT_LENGTH,
-  Re as ScreenBase,
-  Je as SharedElement,
-  bn as assertNavigationAvailable,
-  dn as cloneAndInject,
-  En as createHistoryEntry,
-  je as dispatchEvent,
-  qe as historyEntryFromDestination,
-  xn as installInterceptor,
-  B as isLazyExoticComponent,
+  ke as ScreenBase,
+  Qe as SharedElement,
+  Tn as assertNavigationAvailable,
+  fn as cloneAndInject,
+  bn as createHistoryEntry,
+  Ve as dispatchEvent,
+  He as historyEntryFromDestination,
+  Cn as installInterceptor,
+  q as isLazyExoticComponent,
   he as isNativeLazyExoticComponent,
-  ln as isNavigationSupported,
-  xe as isStylableElement,
-  cn as isURLPatternSupported,
-  ke as isValidScreenChild,
-  on as lazy,
+  cn as isNavigationSupported,
+  Ce as isStylableElement,
+  un as isURLPatternSupported,
+  xe as isValidScreenChild,
+  ln as lazy,
   te as matchRoute,
   Ct as navTo,
-  Be as omit,
-  un as polyfillNavigation,
+  qe as omit,
+  dn as polyfillNavigation,
   hn as polyfillURLPattern,
-  Vt as resolveBaseURLFromPattern,
-  kn as seedHistory,
-  Ke as toCamelCase,
+  Ot as resolveBaseURLFromPattern,
+  xn as seedHistory,
+  Be as toCamelCase,
   Sn as traverseTo,
-  Rn as traverseToStart,
-  wn as triggerRerender,
-  Cn as uninstallInterceptor,
-  mn as useMotion,
-  fn as useNavigationBase,
+  kn as traverseToStart,
+  En as triggerRerender,
+  Ln as uninstallInterceptor,
+  vn as useMotion,
+  pn as useNavigationBase,
   gn as useParamsBase,
-  vn as useRerender,
-  yn as useRerenderCallback,
-  Ye as useRouteBase,
-  pn as useRouterBase,
-  Tn as waitForNavigateSuccess
+  yn as useRerender,
+  wn as useRerenderCallback,
+  _e as useRouteBase,
+  mn as useRouterBase,
+  Rn as waitForNavigateSuccess
 };
 //# sourceMappingURL=index.js.map