@react-motion-router/core 2.0.0-beta.sha-7a69b61 → 2.0.0-beta.sha-01914d6

package/build/ScreenTransitionLayer.d.ts

@@ -5,6 +5,7 @@ import { ScreenChild } from './common/types';
 import { NavigationBase } from './NavigationBase';
 import { ScreenBase } from './ScreenBase';
 interface ScreenTransitionLayerProps {
+    id: string;
     children: ScreenChild | ScreenChild[];
     navigation: NavigationBase;
     hasUAVisualTransition: boolean;

package/build/ScreenTransitionProvider.d.ts

@@ -11,7 +11,7 @@ interface ScreenTransitionProviderProps {
     focused: boolean;
 }
 interface ScreenTransitionProviderState {
-    zIndex: React.CSSProperties["zIndex"];
+    zIndex: React.CSSProperties['zIndex'];
 }
 export declare class ScreenTransitionProvider extends Component<ScreenTransitionProviderProps, ScreenTransitionProviderState> {
     readonly ref: import('react').RefObject<HTMLElement>;
@@ -25,7 +25,7 @@ export declare class ScreenTransitionProvider extends Component<ScreenTransition
     componentDidMount(): void;
     componentWillUnmount(): void;
     get animationEffect(): AnimationEffect | null;
-    setZIndex(zIndex: React.CSSProperties["zIndex"]): Promise<void>;
+    setZIndex(zIndex: React.CSSProperties['zIndex']): Promise<void>;
     render(): JSX.Element;
 }
 export {};

package/build/SharedElementTransitionLayer.d.ts

@@ -6,7 +6,7 @@ import { ParallelEffect } from '../../web-animations-extension/build';
 import { SharedElement } from './SharedElement';
 interface SharedElementTransitionLayerProps {
     navigation: NavigationBase;
-    direction: "forwards" | "backwards";
+    direction: 'forwards' | 'backwards';
 }
 interface SharedElementTransitionLayerState {
 }

package/build/common/types.d.ts

@@ -6,6 +6,7 @@ export type ScreenChild<E extends ScreenBase = ScreenBase> = E extends ScreenBas
 export interface AnimationEffectFactoryProps<R extends HTMLElement = HTMLElement> {
     ref: R | null;
     index: number;
+    screens: string[];
     exiting: boolean;
     timeline: AnimationTimeline | null;
     playbackRate: number;
@@ -24,8 +25,8 @@ export interface LazyExoticComponent<T extends React.ComponentType<any>> extends
         default: T;
     };
 }
-export type ScreenState<P extends ScreenBaseProps = ScreenBaseProps> = Map<string, Pick<RoutePropBase<P["config"], PlainObject>, "config" | "params">>;
-export interface RoutePropBase<C extends ScreenBaseProps["config"] = {}, P extends PlainObject = PlainObject> {
+export type ScreenState<P extends ScreenBaseProps = ScreenBaseProps> = Map<string, Pick<RoutePropBase<P['config'], PlainObject>, 'config' | 'params'>>;
+export interface RoutePropBase<C extends ScreenBaseProps['config'] = {}, P extends PlainObject = PlainObject> {
     path: string;
     resolvedPathname?: string;
     config: NonNullable<C>;
@@ -39,12 +40,12 @@ export type PlainObject<T = any> = {
     [key: string]: T;
 };
 export interface RouterBaseEventMap extends HTMLElementEventMap {
-    "transition-start": TransitionStartEvent;
-    "transition-cancel": TransitionCancelEvent;
-    "transition-end": TransitionEndEvent;
-    "motion-progress-start": MotionProgressStartEvent;
-    "motion-progress": MotionProgressEvent;
-    "motion-progress-end": MotionProgressEndEvent;
+    'transition-start': TransitionStartEvent;
+    'transition-cancel': TransitionCancelEvent;
+    'transition-end': TransitionEndEvent;
+    'motion-progress-start': MotionProgressStartEvent;
+    'motion-progress': MotionProgressEvent;
+    'motion-progress-end': MotionProgressEndEvent;
 }
 export type RouterHTMLElement<E extends RouterBaseEventMap, T extends HTMLElement = HTMLDivElement> = T & {
     addEventListener<K extends keyof E>(type: K, listener: (this: T, ev: E[K]) => any, options?: boolean | AddEventListenerOptions): void;
@@ -61,12 +62,12 @@ export interface PathPattern {
     pattern: string;
     caseSensitive: boolean;
 }
-export type AnimationDirection = "normal" | "reverse";
+export type AnimationDirection = 'normal' | 'reverse';
 declare enum SharedElementTransitionTypeEnum {
-    "morph" = 0,
-    "fade-through" = 1,
-    "fade" = 2,
-    "cross-fade" = 3
+    'morph' = 0,
+    'fade-through' = 1,
+    'fade' = 2,
+    'cross-fade' = 3
 }
 export type SharedElementTransitionType = keyof typeof SharedElementTransitionTypeEnum;
 export interface SharedElementNode {
@@ -81,8 +82,8 @@ export type StylableElement = Element & {
     style: CSSStyleDeclaration;
 };
 export declare function isStylableElement(element: any): element is StylableElement;
-export interface LoadNavigationTransition extends Omit<NavigationTransition, "navigationType"> {
-    navigationType: "load";
+export interface LoadNavigationTransition extends Omit<NavigationTransition, 'navigationType'> {
+    navigationType: 'load';
 }
 declare global {
     interface NavigateEvent extends Event {

package/build/index.js

@@ -257,10 +257,11 @@ class be extends st {
     this.props.navigation.removeEventListener("transition-start", this.onAnimationStart), this.props.navigation.removeEventListener("transition-end", this.onAnimationEnd), this.props.navigation.removeEventListener("transition-cancel", this.onAnimationEnd);
   }
   get animationEffect() {
-    const t = this.props.animation, { animation: e, direction: n, hasUAVisualTransition: r } = this.context, { timeline: a, playbackRate: o } = e, { index: l, exiting: m, ref: p } = this;
+    const t = this.props.animation, { animation: e, direction: n, hasUAVisualTransition: r } = this.context, { timeline: a, playbackRate: o } = e, { index: l, exiting: m, ref: p } = this, w = this.context.screens.map((R) => R.current?.name);
     return t?.({
       ref: p.current,
       index: l,
+      screens: w,
       exiting: m,
       timeline: a,
       direction: n,
@@ -574,8 +575,8 @@ function $t(s) {
     t = t.to("ms").value;
   else if (typeof t == "string")
     throw TypeError("Unknown effect duration keyword.");
-  const p = t / e, w = p * e / Math.abs(n), k = r + w + a;
-  t = new CSSUnitValue(p / k * 100, "percent");
+  const p = t / e, w = p * e / Math.abs(n), R = r + w + a;
+  t = new CSSUnitValue(p / R * 100, "percent");
   const T = CSS.percent(t.to("percent").value * e / Math.abs(n));
   return o !== null && (l = h(o, "percent") / m.value), {
     ...s,
@@ -849,11 +850,11 @@ class $e extends Ot {
       } = M.getComputedTiming();
       r.activeDuration = r.activeDuration ? h(r.activeDuration, "ms") + h(Vt, "ms") : Vt, n.duration = n.duration instanceof CSSNumericValue ? n.duration.to("ms").value : n.duration, L = L instanceof CSSNumericValue ? L.to("ms").value : L, typeof L != "string" && (n.duration === "auto" ? n.duration = h(L, "ms") : typeof n.duration != "string" && (n.duration = n.duration ? n.duration + L : L));
     }
-    const { timeline: m, startTime: p, currentTime: w } = A.get(this) ?? {}, k = m instanceof E ? "percent" : "ms";
+    const { timeline: m, startTime: p, currentTime: w } = A.get(this) ?? {}, R = m instanceof E ? "percent" : "ms";
     let { duration: T = 0, iterations: X = 1 } = r;
     if (T === "auto" && (T = 0), typeof T == "string")
       throw new TypeError("Unknown effect duration keyword.");
-    return r.duration = T, r.activeDuration = Et(T) * X, r.startTime = p ?? void 0, r.localTime = w, r.currentIteration = ne(r, ee(r, i(this, St, ie))), m instanceof E ? $t(r) : (m instanceof DocumentTimeline && (r.progress = w && h(w, k) / h(l, k)), r);
+    return r.duration = T, r.activeDuration = Et(T) * X, r.startTime = p ?? void 0, r.localTime = w, r.currentIteration = ne(r, ee(r, i(this, St, ie))), m instanceof E ? $t(r) : (m instanceof DocumentTimeline && (r.progress = w && h(w, R) / h(l, R)), r);
   }
   updateTiming(t) {
     c(this, J, {
@@ -870,13 +871,13 @@ J = /* @__PURE__ */ new WeakMap(), St = /* @__PURE__ */ new WeakSet(), ie = func
   const { playbackRate: s = 1 } = A.get(this) ?? {};
   return s < 0 ? "backwards" : "forwards";
 };
-var d, x, ht, v, S, P, u, y, R, z, O, ot, W, mt, Rt, Q, lt, q, tt, kt, Kt, xt, qt, Ct, zt, B, G, ct, gt, Mt, I, V, D, $, yt, Lt, Pt;
+var d, x, ht, v, S, P, u, y, k, z, O, ot, W, mt, Rt, Q, lt, q, tt, kt, Kt, xt, qt, Ct, zt, B, G, ct, gt, Mt, I, V, D, $, yt, Lt, Pt;
 const se = class extends EventTarget {
   constructor(t, e) {
     super(), g(this, mt), g(this, Q), g(this, q), g(this, kt), g(this, xt), g(this, Ct), g(this, B), g(this, gt), g(this, I), g(this, D), j(this, "id", ""), j(this, "oncancel", null), j(this, "onfinish", null), j(this, "onremove", null), g(this, d, void 0), g(this, x, void 0), g(this, ht, "active"), g(this, v, {
       task: null,
       playbackRate: null
-    }), g(this, S, new nt()), g(this, P, new nt()), g(this, u, null), g(this, y, null), g(this, R, []), g(this, z, null), g(this, O, !1), g(this, ot, 0), g(this, W, 1), g(this, ct, () => {
+    }), g(this, S, new nt()), g(this, P, new nt()), g(this, u, null), g(this, y, null), g(this, k, []), g(this, z, null), g(this, O, !1), g(this, ot, 0), g(this, W, 1), g(this, ct, () => {
       f(this, B, G).call(this);
     }), g(this, yt, () => {
       var n;
@@ -941,7 +942,7 @@ const se = class extends EventTarget {
     this.playState !== "paused" && (this.currentTime === null && c(this, O, !0), i(this, v).task && (i(this, v).task = null), f(this, Q, lt).call(this), i(this, v).task = "pause");
   }
   persist() {
-    i(this, R).forEach((t) => t.persist()), c(this, ht, "persisted");
+    i(this, k).forEach((t) => t.persist()), c(this, ht, "persisted");
   }
   finish() {
     var t;
@@ -956,15 +957,15 @@ const se = class extends EventTarget {
       const o = h(i(this, d).currentTime, a);
       c(this, u, o - r / n);
     }
-    i(this, v).task === "pause" && i(this, u) !== null && (c(this, y, null), f(this, q, tt).call(this), i(this, S).resolve(this)), i(this, v).task === "play" && i(this, u) !== null && (f(this, q, tt).call(this), i(this, S).resolve(this)), f(this, I, V).call(this, !0), i(this, R).forEach((a) => a.finish());
+    i(this, v).task === "pause" && i(this, u) !== null && (c(this, y, null), f(this, q, tt).call(this), i(this, S).resolve(this)), i(this, v).task === "play" && i(this, u) !== null && (f(this, q, tt).call(this), i(this, S).resolve(this)), f(this, I, V).call(this, !0), i(this, k).forEach((a) => a.finish());
   }
   commitStyles() {
-    i(this, R).forEach((t) => {
+    i(this, k).forEach((t) => {
       t.effect instanceof pt && (t.effect.target === null || t.effect.pseudoElement !== null) || t.commitStyles();
     });
   }
   cancel() {
-    this.playState !== "idle" && (f(this, D, $).call(this), i(this, S).reject(new DOMException("The user aborted a request", "AbortError")), f(this, q, tt).call(this), c(this, S, new nt()), i(this, P).state === "pending" && i(this, P).reject(new DOMException("The user aborted a request", "AbortError")), c(this, P, new nt()), i(this, R).forEach((t) => t.cancel())), c(this, u, null), c(this, y, null);
+    this.playState !== "idle" && (f(this, D, $).call(this), i(this, S).reject(new DOMException("The user aborted a request", "AbortError")), f(this, q, tt).call(this), c(this, S, new nt()), i(this, P).state === "pending" && i(this, P).reject(new DOMException("The user aborted a request", "AbortError")), c(this, P, new nt()), i(this, k).forEach((t) => t.cancel())), c(this, u, null), c(this, y, null);
   }
   updatePlaybackRate(t) {
     var e;
@@ -998,12 +999,12 @@ const se = class extends EventTarget {
     super.removeEventListener(t, e, n);
   }
   set playbackRate(t) {
-    c(this, W, t), i(this, R).forEach((e) => {
+    c(this, W, t), i(this, k).forEach((e) => {
       e.playbackRate *= t;
     });
   }
   set startTime(t) {
-    c(this, u, h(t)), i(this, R).forEach((e) => e.startTime = t);
+    c(this, u, h(t)), i(this, k).forEach((e) => e.startTime = t);
   }
   set currentTime(t) {
     var e;
@@ -1018,22 +1019,22 @@ const se = class extends EventTarget {
     if (r === t)
       return;
     i(this, d) instanceof E && i(this, d).removeEventListener("update", i(this, ct));
-    const a = this.playState, o = r instanceof E ? "percent" : "ms", l = h(this.currentTime, o), { progress: m = null, endTime: p = 0 } = ((e = i(this, x)) == null ? void 0 : e.getComputedTiming()) ?? {}, w = h(p, o), k = r instanceof E, T = t instanceof E, X = t instanceof DocumentTimeline, C = this.pending;
+    const a = this.playState, o = r instanceof E ? "percent" : "ms", l = h(this.currentTime, o), { progress: m = null, endTime: p = 0 } = ((e = i(this, x)) == null ? void 0 : e.getComputedTiming()) ?? {}, w = h(p, o), R = r instanceof E, T = t instanceof E, X = t instanceof DocumentTimeline, C = this.pending;
     if (T)
-      c(this, d, t), t.addEventListener("update", i(this, ct)), f(this, D, $).call(this), c(this, O, !0), c(this, u, null), c(this, y, null), (a === "running" || a === "finished") && ((!i(this, S) || i(this, S).state === "resolved") && f(this, Q, lt).call(this), i(this, v).task = "play", i(this, R).forEach((M) => M.pause())), a === "paused" && m !== null && c(this, y, m * w), C && ((!i(this, S) || i(this, S).state === "resolved") && f(this, Q, lt).call(this), a === "paused" ? i(this, v).task = "pause" : i(this, v).task = "play"), i(this, u) !== null && c(this, y, null), f(this, I, V).call(this, !1);
+      c(this, d, t), t.addEventListener("update", i(this, ct)), f(this, D, $).call(this), c(this, O, !0), c(this, u, null), c(this, y, null), (a === "running" || a === "finished") && ((!i(this, S) || i(this, S).state === "resolved") && f(this, Q, lt).call(this), i(this, v).task = "play", i(this, k).forEach((M) => M.pause())), a === "paused" && m !== null && c(this, y, m * w), C && ((!i(this, S) || i(this, S).state === "resolved") && f(this, Q, lt).call(this), a === "paused" ? i(this, v).task = "pause" : i(this, v).task = "play"), i(this, u) !== null && c(this, y, null), f(this, I, V).call(this, !1);
     else if (X) {
-      if (c(this, d, t), k) {
+      if (c(this, d, t), R) {
         if (l !== null && m !== null) {
           const { endTime: M = 0 } = ((n = i(this, x)) == null ? void 0 : n.getComputedTiming()) ?? {}, L = h(M, "ms");
           this.currentTime = m * L;
         }
         switch (a) {
           case "paused":
-            i(this, R).forEach((M) => M.pause());
+            i(this, k).forEach((M) => M.pause());
             break;
           case "running":
           case "finished":
-            i(this, R).forEach((M) => M.play());
+            i(this, k).forEach((M) => M.play());
         }
       }
     } else
@@ -1100,7 +1101,7 @@ const se = class extends EventTarget {
     return i(this, x);
   }
 };
-d = /* @__PURE__ */ new WeakMap(), x = /* @__PURE__ */ new WeakMap(), ht = /* @__PURE__ */ new WeakMap(), v = /* @__PURE__ */ new WeakMap(), S = /* @__PURE__ */ new WeakMap(), P = /* @__PURE__ */ new WeakMap(), u = /* @__PURE__ */ new WeakMap(), y = /* @__PURE__ */ new WeakMap(), R = /* @__PURE__ */ new WeakMap(), z = /* @__PURE__ */ new WeakMap(), O = /* @__PURE__ */ new WeakMap(), ot = /* @__PURE__ */ new WeakMap(), W = /* @__PURE__ */ new WeakMap(), mt = /* @__PURE__ */ new WeakSet(), Rt = function(s) {
+d = /* @__PURE__ */ new WeakMap(), x = /* @__PURE__ */ new WeakMap(), ht = /* @__PURE__ */ new WeakMap(), v = /* @__PURE__ */ new WeakMap(), S = /* @__PURE__ */ new WeakMap(), P = /* @__PURE__ */ new WeakMap(), u = /* @__PURE__ */ new WeakMap(), y = /* @__PURE__ */ new WeakMap(), k = /* @__PURE__ */ new WeakMap(), z = /* @__PURE__ */ new WeakMap(), O = /* @__PURE__ */ new WeakMap(), ot = /* @__PURE__ */ new WeakMap(), W = /* @__PURE__ */ new WeakMap(), mt = /* @__PURE__ */ new WeakSet(), Rt = function(s) {
   var t;
   const e = h(((t = i(this, d)) == null ? void 0 : t.currentTime) ?? null);
   if (s === null && e !== null)
@@ -1109,7 +1110,7 @@ d = /* @__PURE__ */ new WeakMap(), x = /* @__PURE__ */ new WeakMap(), ht = /* @_
 }, Q = /* @__PURE__ */ new WeakSet(), lt = function() {
   i(this, S).state !== "pending" && c(this, S, new nt()), cancelAnimationFrame(i(this, ot)), c(this, ot, requestAnimationFrame(() => {
     var s;
-    (((s = i(this, d)) == null ? void 0 : s.currentTime) ?? null) !== null && (f(this, Ct, zt).call(this), i(this, v).task === "play" && (i(this, u) !== null || i(this, y) !== null) ? f(this, kt, Kt).call(this) : i(this, v).task === "pause" && f(this, xt, qt).call(this), Promise.all(i(this, R).map((t) => t.finished)).then(i(this, yt)), Promise.all(i(this, R).map((t) => new Promise((e) => t.onremove = e))).then(i(this, Pt)), Promise.all(i(this, R).map((t) => new Promise((e) => t.oncancel = e))).then(i(this, Lt)).then(() => c(this, ht, "removed")));
+    (((s = i(this, d)) == null ? void 0 : s.currentTime) ?? null) !== null && (f(this, Ct, zt).call(this), i(this, v).task === "play" && (i(this, u) !== null || i(this, y) !== null) ? f(this, kt, Kt).call(this) : i(this, v).task === "pause" && f(this, xt, qt).call(this), Promise.all(i(this, k).map((t) => t.finished)).then(i(this, yt)), Promise.all(i(this, k).map((t) => new Promise((e) => t.onremove = e))).then(i(this, Pt)), Promise.all(i(this, k).map((t) => new Promise((e) => t.oncancel = e))).then(i(this, Lt)).then(() => c(this, ht, "removed")));
   }));
 }, q = /* @__PURE__ */ new WeakSet(), tt = function() {
   cancelAnimationFrame(i(this, ot)), i(this, v).task = null;
@@ -1127,14 +1128,14 @@ d = /* @__PURE__ */ new WeakMap(), x = /* @__PURE__ */ new WeakMap(), ht = /* @_
     const r = this.playbackRate;
     r === 0 ? (c(this, y, null), c(this, u, h(t, e))) : c(this, u, h(t, e) - n / r);
   }
-  i(this, S).state === "pending" && i(this, S).resolve(this), f(this, I, V).call(this, !1), f(this, B, G).call(this), i(this, v).task = null, this.timeline instanceof DocumentTimeline && i(this, R).forEach((n) => n.play());
+  i(this, S).state === "pending" && i(this, S).resolve(this), f(this, I, V).call(this, !1), f(this, B, G).call(this), i(this, v).task = null, this.timeline instanceof DocumentTimeline && i(this, k).forEach((n) => n.play());
 }, xt = /* @__PURE__ */ new WeakSet(), qt = function() {
   var s;
   const t = ((s = this.timeline) == null ? void 0 : s.currentTime) ?? null;
   if (t === null)
     return;
   const e = i(this, d) instanceof E ? "percent" : "ms", n = t;
-  i(this, u) !== null && i(this, y) === null && c(this, y, (h(n, e) - i(this, u)) * this.playbackRate), f(this, D, $).call(this), c(this, u, null), i(this, S).resolve(this), f(this, I, V).call(this, !1), f(this, B, G).call(this), i(this, v).task = null, i(this, R).forEach((r) => r.pause());
+  i(this, u) !== null && i(this, y) === null && c(this, y, (h(n, e) - i(this, u)) * this.playbackRate), f(this, D, $).call(this), c(this, u, null), i(this, S).resolve(this), f(this, I, V).call(this, !1), f(this, B, G).call(this), i(this, v).task = null, i(this, k).forEach((r) => r.pause());
 }, Ct = /* @__PURE__ */ new WeakSet(), zt = function() {
   if (i(this, O) && !(!i(this, d) || !i(this, d).currentTime) && !(this.playState === "idle" || this.playState === "paused" && i(this, y) !== null)) {
     if (i(this, d) instanceof E) {
@@ -1158,7 +1159,7 @@ d = /* @__PURE__ */ new WeakMap(), x = /* @__PURE__ */ new WeakMap(), ht = /* @_
     r = i(this, y);
   else
     return;
-  i(this, R).forEach((a) => a.currentTime = r);
+  i(this, k).forEach((a) => a.currentTime = r);
 }, ct = /* @__PURE__ */ new WeakMap(), gt = /* @__PURE__ */ new WeakSet(), Mt = function() {
   var s;
   let t = i(this, x);
@@ -1176,7 +1177,7 @@ d = /* @__PURE__ */ new WeakMap(), x = /* @__PURE__ */ new WeakMap(), ht = /* @_
     const n = i(this, d) instanceof E ? document.timeline : i(this, d);
     e.push(new Me(t, n));
   }
-  c(this, R, e);
+  c(this, k, e);
 }, I = /* @__PURE__ */ new WeakSet(), V = function(s) {
   var t, e;
   const n = ((t = i(this, d)) == null ? void 0 : t.currentTime) ?? null, r = i(this, d) instanceof E ? "percent" : "ms";
@@ -1190,9 +1191,9 @@ d = /* @__PURE__ */ new WeakMap(), x = /* @__PURE__ */ new WeakMap(), ht = /* @_
       p = p.to("ms").value;
     else if (typeof p == "string")
       throw new TypeError("Unknown effect duration keyword.");
-    const k = o + p * m + l;
+    const R = o + p * m + l;
     let T = h(i(this, z), r);
-    w > 0 && a >= k && i(this, z) !== null ? ((T === null || T < k) && (T = k), c(this, y, s ? a : T)) : w < 0 && a <= 0 ? ((T === null || T > 0) && (T = 0), c(this, y, s ? a : T)) : w !== 0 && (s && i(this, y) !== null && (n !== null ? c(this, u, h(n, r) - i(this, y) / w) : c(this, u, null)), c(this, y, null));
+    w > 0 && a >= R && i(this, z) !== null ? ((T === null || T < R) && (T = R), c(this, y, s ? a : T)) : w < 0 && a <= 0 ? ((T === null || T > 0) && (T = 0), c(this, y, s ? a : T)) : w !== 0 && (s && i(this, y) !== null && (n !== null ? c(this, u, h(n, r) - i(this, y) / w) : c(this, u, null)), c(this, y, null));
   }
   f(this, B, G).call(this), c(this, z, this.currentTime), this.playState === "finished" ? i(this, P).state === "pending" && i(this, yt).call(this) : i(this, P).state === "resolved" && c(this, P, new nt());
 }, D = /* @__PURE__ */ new WeakSet(), $ = function() {
@@ -1219,8 +1220,8 @@ class At extends Ot {
   getComputedTiming() {
     const t = this.getTiming(), e = { ...t };
     for (let w = 0; w < this.children.length; w++) {
-      const k = this.children.item(w);
-      if (!k)
+      const R = this.children.item(w);
+      if (!R)
         continue;
       let {
         delay: T = 0,
@@ -1228,7 +1229,7 @@ class At extends Ot {
         duration: C = "auto",
         activeDuration: M = 0,
         endTime: L = 0
-      } = k.getComputedTiming();
+      } = R.getComputedTiming();
       t.delay = t.delay ? Math.min(t.delay, T) : T, t.endDelay = t.endDelay ? Math.max(t.endDelay, X) : X, e.endTime = e.endTime ? Math.max(h(e.endTime, "ms"), h(L, "ms")) : L, e.activeDuration = e.activeDuration ? Math.max(h(e.activeDuration, "ms"), h(M, "ms")) : M, 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));
     }
     const { timeline: n, startTime: r, currentTime: a } = A.get(this) ?? {}, o = n instanceof E ? "percent" : "ms";
@@ -1401,8 +1402,8 @@ class Ve extends st {
       const m = l.getBoundingClientRect(), p = a.clone(), w = l.clone();
       if (!w || !p)
         continue;
-      const k = Array.from(/* @__PURE__ */ new Set([...l.styles, ...a.styles]));
-      a.transitionType !== "morph" ? (w.id = `${r}-start`, w.style.position = "absolute", w.style.gridArea = "1 / 1", w.style.margin = "0", this.copyStyles(l.ref.current?.firstElementChild, w, k), this.copyStyles(a.ref.current?.firstElementChild, p, k), w.style.width = `${m.width}px`, w.style.height = `${m.height}px`, p.style.width = `${o.width}px`, p.style.height = `${o.height}px`, this.ref.current?.prepend(w)) : (this.copyStyles(l.ref.current?.firstElementChild, p, k), p.style.width = `${m.width}px`, p.style.height = `${m.height}px`), p.id = `${r}${a.transitionType === "morph" ? "" : "-end"}`, p.style.position = "absolute", p.style.gridArea = "1 / 1", p.style.margin = "0", this.ref.current?.prepend(p), l.hide(), a.hide();
+      const R = Array.from(/* @__PURE__ */ new Set([...l.styles, ...a.styles]));
+      a.transitionType !== "morph" ? (w.id = `${r}-start`, w.style.position = "absolute", w.style.gridArea = "1 / 1", w.style.margin = "0", this.copyStyles(l.ref.current?.firstElementChild, w, R), this.copyStyles(a.ref.current?.firstElementChild, p, R), w.style.width = `${m.width}px`, w.style.height = `${m.height}px`, p.style.width = `${o.width}px`, p.style.height = `${o.height}px`, this.ref.current?.prepend(w)) : (this.copyStyles(l.ref.current?.firstElementChild, p, R), p.style.width = `${m.width}px`, p.style.height = `${m.height}px`), p.id = `${r}${a.transitionType === "morph" ? "" : "-end"}`, p.style.position = "absolute", p.style.gridArea = "1 / 1", p.style.margin = "0", this.ref.current?.prepend(p), l.hide(), a.hide();
       const T = async () => {
         this.props.direction === "forwards" ? a.unhide() : l.unhide(), p.remove(), w.remove();
       };
@@ -1435,7 +1436,7 @@ class je extends st {
   sharedElementTransitionLayer = K();
   animation = new Oe();
   #t = "normal";
-  #e = new Array();
+  #e = [];
   state = {
     gestureNavigating: !1,
     progress: 1
@@ -1496,7 +1497,7 @@ class je extends st {
       /* @__PURE__ */ b(
         "div",
         {
-          className: "screen-transition-layer",
+          className: this.props.id,
           style: {
             width: "100%",
             height: "100%",
@@ -1627,6 +1628,7 @@ class Nt extends st {
           children: /* @__PURE__ */ b(wt.Provider, { value: this, children: /* @__PURE__ */ b(
             je,
             {
+              id: `${this.id}-transition-provider`,
               ref: this.screenTransitionLayer,
               navigation: this.navigation,
               hasUAVisualTransition: this.hasUAVisualTransition,