@flemo/react 1.1.0 → 1.2.0

package/dist/index.mjs

@@ -1,38 +1,38 @@
 import { jsx as k, jsxs as Bt, Fragment as ye } from "react/jsx-runtime";
 import xt, { useEffect as wt, createContext as _t, useContext as jt, useReducer as we, Children as oe, useInsertionEffect as ge, useRef as N, useImperativeHandle as Se, useState as bt, useLayoutEffect as mt } from "react";
-import { consumeSelfInducedPop as ve, TaskManger as V, useNavigateStore as J, useHistoryStore as G, getMatchedPathPattern as Ee, transitionMap as ut, decoratorMap as yt, isServer as Ut, compileTransitionStyles as Pe, useTransitionStore as Yt, getParams as Te, markSelfInducedPop as Ft, targetToDecls as xe, easingToCss as be, variantHasAnimation as Ie, animationName as Re, findScrollable as Jt, collectAnimatedProperties as De } from "@flemo/core";
+import { consumeSelfInducedPop as ve, TaskManger as V, useNavigateStore as J, useHistoryStore as G, getMatchedPathPattern as Ee, transitionMap as ut, decoratorMap as yt, isServer as Ut, compileTransitionStyles as Te, useTransitionStore as Yt, getParams as Pe, markSelfInducedPop as Ft, targetToDecls as xe, easingToCss as be, variantHasAnimation as Ie, animationName as Re, findScrollable as Jt, collectAnimatedProperties as De } from "@flemo/core";
 import { createDecorator as rn, createRawDecorator as on, createRawTransition as sn, createTransition as an } from "@flemo/core";
 function Le() {
   return wt(() => {
     const n = async (e) => {
       if (ve())
         return;
-      const r = e.state?.id, a = V.generateTaskId();
+      const r = e.state?.id, c = V.generateTaskId();
       (await V.addTask(
-        async (c) => {
-          const i = e.state?.index, s = e.state?.status, w = e.state?.params, P = e.state?.transitionName, f = e.state?.layoutId, { setStatus: T, setTransitionTaskId: p } = J.getState(), { index: I, addHistory: L, popHistory: H } = G.getState(), R = i < I, U = s === "PUSHING" && i > I, C = s === "REPLACING" && i > I, A = window.location.pathname;
-          if (!R && !U && !C) {
-            c.abort();
+        async (a) => {
+          const i = e.state?.index, s = e.state?.status, w = e.state?.params, T = e.state?.transitionName, p = e.state?.layoutId, { setStatus: P, setTransitionTaskId: f } = J.getState(), { index: L, addHistory: R, popHistory: A } = G.getState(), b = i < L, U = s === "PUSHING" && i > L, M = s === "REPLACING" && i > L, $ = window.location.pathname;
+          if (!b && !U && !M) {
+            a.abort();
             return;
           }
-          return p(a), R ? T("POPPING") : U ? (T("PUSHING"), L({
+          return f(c), b ? P("POPPING") : U ? (P("PUSHING"), R({
             id: r,
-            pathname: A,
+            pathname: $,
             params: w,
-            transitionName: P,
-            layoutId: f
-          })) : C && (T("REPLACING"), L({
+            transitionName: T,
+            layoutId: p
+          })) : M && (P("REPLACING"), R({
             id: r,
-            pathname: A,
+            pathname: $,
             params: w,
-            transitionName: P,
-            layoutId: f
+            transitionName: T,
+            layoutId: p
           })), async () => {
-            R && H(i + 1), T("COMPLETED");
+            b && A(i + 1), P("COMPLETED");
           };
         },
         {
-          id: a,
+          id: c,
           control: {
             manual: !0
           }
@@ -47,8 +47,8 @@ function Le() {
 var F = {}, Qt;
 function Ne() {
   if (Qt) return F;
-  Qt = 1, Object.defineProperty(F, "__esModule", { value: !0 }), F.PathError = F.TokenData = void 0, F.parse = f, F.compile = T, F.match = L, F.pathToRegexp = H, F.stringify = X;
-  const n = "/", e = (o) => o, r = /^[$_\p{ID_Start}]$/u, a = /^[$\u200c\u200d\p{ID_Continue}]$/u, c = /^[$_\p{ID_Start}][$\u200c\u200d\p{ID_Continue}]*$/u;
+  Qt = 1, Object.defineProperty(F, "__esModule", { value: !0 }), F.PathError = F.TokenData = void 0, F.parse = p, F.compile = P, F.match = R, F.pathToRegexp = A, F.stringify = X;
+  const n = "/", e = (o) => o, r = /^[$_\p{ID_Start}]$/u, c = /^[$\u200c\u200d\p{ID_Continue}]$/u, a = /^[$_\p{ID_Start}][$\u200c\u200d\p{ID_Continue}]*$/u;
   function i(o) {
     return o.replace(/[{}()\[\]+?!:*\\]/g, "\\$&");
   }
@@ -61,14 +61,14 @@ function Ne() {
     }
   }
   F.TokenData = w;
-  class P extends TypeError {
+  class T extends TypeError {
     constructor(u, y) {
       let l = u;
       y && (l += `: ${y}`), l += "; visit https://git.new/pathToRegexpError for info", super(l), this.originalPath = y;
     }
   }
-  F.PathError = P;
-  function f(o, u = {}) {
+  F.PathError = T;
+  function p(o, u = {}) {
     const { encodePath: y = e } = u, l = [...o];
     let d = 0;
     function g(m) {
@@ -81,22 +81,22 @@ function Ne() {
         }), S = "");
       }
       for (; d < l.length; ) {
-        const b = l[d++];
-        if (b === m)
+        const I = l[d++];
+        if (I === m)
           return D(), x;
-        if (b === "\\") {
+        if (I === "\\") {
           if (d === l.length)
-            throw new P(`Unexpected end after \\ at index ${d}`, o);
+            throw new T(`Unexpected end after \\ at index ${d}`, o);
           S += l[d++];
           continue;
         }
-        if (b === ":" || b === "*") {
-          const Y = b === ":" ? "param" : "wildcard";
+        if (I === ":" || I === "*") {
+          const Y = I === ":" ? "param" : "wildcard";
           let v = "";
           if (r.test(l[d]))
             do
               v += l[d++];
-            while (a.test(l[d]));
+            while (c.test(l[d]));
           else if (l[d] === '"') {
             let B = d;
             for (; d < l.length; ) {
@@ -107,32 +107,32 @@ function Ne() {
               l[d] === "\\" && d++, v += l[d];
             }
             if (B)
-              throw new P(`Unterminated quote at index ${B}`, o);
+              throw new T(`Unterminated quote at index ${B}`, o);
           }
           if (!v)
-            throw new P(`Missing parameter name at index ${d}`, o);
+            throw new T(`Missing parameter name at index ${d}`, o);
           D(), x.push({ type: Y, name: v });
           continue;
         }
-        if (b === "{") {
+        if (I === "{") {
           D(), x.push({
             type: "group",
             tokens: g("}")
           });
           continue;
         }
-        if (b === "}" || b === "(" || b === ")" || b === "[" || b === "]" || b === "+" || b === "?" || b === "!")
-          throw new P(`Unexpected ${b} at index ${d - 1}`, o);
-        S += b;
+        if (I === "}" || I === "(" || I === ")" || I === "[" || I === "]" || I === "+" || I === "?" || I === "!")
+          throw new T(`Unexpected ${I} at index ${d - 1}`, o);
+        S += I;
       }
       if (m)
-        throw new P(`Unexpected end at index ${d}, expected ${m}`, o);
+        throw new T(`Unexpected end at index ${d}, expected ${m}`, o);
       return D(), x;
     }
     return new w(g(""), o);
   }
-  function T(o, u = {}) {
-    const { encode: y = encodeURIComponent, delimiter: l = n } = u, d = typeof o == "object" ? o : f(o, u), g = p(d.tokens, l, y);
+  function P(o, u = {}) {
+    const { encode: y = encodeURIComponent, delimiter: l = n } = u, d = typeof o == "object" ? o : p(o, u), g = f(d.tokens, l, y);
     return function(x = {}) {
       const S = [], D = g(x, S);
       if (S.length)
@@ -140,8 +140,8 @@ function Ne() {
       return D;
     };
   }
-  function p(o, u, y) {
-    const l = o.map((d) => I(d, u, y));
+  function f(o, u, y) {
+    const l = o.map((d) => L(d, u, y));
     return (d, g) => {
       let m = "";
       for (const x of l)
@@ -149,11 +149,11 @@ function Ne() {
       return m;
     };
   }
-  function I(o, u, y) {
+  function L(o, u, y) {
     if (o.type === "text")
       return () => o.value;
     if (o.type === "group") {
-      const d = p(o.tokens, u, y);
+      const d = f(o.tokens, u, y);
       return (g, m) => {
         const x = m.length, S = d(g, m);
         return m.length === x ? S : (m.length = x, "");
@@ -182,23 +182,23 @@ function Ne() {
       return l(m);
     };
   }
-  function L(o, u = {}) {
-    const { decode: y = decodeURIComponent, delimiter: l = n } = u, { regexp: d, keys: g } = H(o, u), m = g.map((x) => y === !1 ? e : x.type === "param" ? y : (S) => S.split(l).map(y));
+  function R(o, u = {}) {
+    const { decode: y = decodeURIComponent, delimiter: l = n } = u, { regexp: d, keys: g } = A(o, u), m = g.map((x) => y === !1 ? e : x.type === "param" ? y : (S) => S.split(l).map(y));
     return function(S) {
       const D = d.exec(S);
       if (!D)
         return !1;
-      const b = D[0], Y = /* @__PURE__ */ Object.create(null);
+      const I = D[0], Y = /* @__PURE__ */ Object.create(null);
       for (let v = 1; v < D.length; v++) {
         if (D[v] === void 0)
           continue;
         const B = g[v - 1], j = m[v - 1];
         Y[B.name] = j(D[v]);
       }
-      return { path: b, params: Y };
+      return { path: I, params: Y };
     };
   }
-  function H(o, u = {}) {
+  function A(o, u = {}) {
     const { delimiter: y = n, end: l = !0, sensitive: d = !1, trailing: g = !0 } = u, m = [];
     let x = "", S = 0;
     function D(Y) {
@@ -207,23 +207,23 @@ function Ne() {
           D(B);
         return;
       }
-      const v = typeof Y == "object" ? Y : f(Y, u);
-      R(v.tokens, 0, [], (B) => {
+      const v = typeof Y == "object" ? Y : p(Y, u);
+      b(v.tokens, 0, [], (B) => {
         if (S >= 256)
-          throw new P("Too many path combinations", v.originalPath);
+          throw new T("Too many path combinations", v.originalPath);
         S > 0 && (x += "|"), x += U(B, y, m, v.originalPath), S++;
       });
     }
     D(o);
-    let b = `^(?:${x})`;
-    return g && (b += "(?:" + s(y) + "$)?"), b += l ? "$" : "(?=" + s(y) + "|$)", { regexp: new RegExp(b, d ? "" : "i"), keys: m };
+    let I = `^(?:${x})`;
+    return g && (I += "(?:" + s(y) + "$)?"), I += l ? "$" : "(?=" + s(y) + "|$)", { regexp: new RegExp(I, d ? "" : "i"), keys: m };
   }
-  function R(o, u, y, l) {
+  function b(o, u, y, l) {
     for (; u < o.length; ) {
       const d = o[u++];
       if (d.type === "group") {
         const g = y.length;
-        R(d.tokens, 0, y, (m) => R(o, u, m, l)), y.length = g;
+        b(d.tokens, 0, y, (m) => b(o, u, m, l)), y.length = g;
         continue;
       }
       y.push(d);
@@ -232,7 +232,7 @@ function Ne() {
   }
   function U(o, u, y, l) {
     let d = "", g = "", m = "", x = 0, S = 0, D = 0;
-    function b(v, B) {
+    function I(v, B) {
       for (; v < o.length; ) {
         const j = o[v++];
         if (j.type === B)
@@ -260,18 +260,18 @@ function Ne() {
       }
       if (v.type === "param" || v.type === "wildcard") {
         if (x && !g)
-          throw new P(`Missing text before "${v.name}" ${v.type}`, l);
-        v.type === "param" ? (d += S & 2 ? `(${C(u, g)}+)` : b(D, "wildcard") ? `(${C(u, Y(D))}+)` : S & 1 ? `(${C(u, g)}+|${s(g)})` : `(${C(u, "")}+)`, S |= x = 1) : (d += S & 2 ? `(${C(g, "")}+)` : m ? `(${C(m, "")}+|${C(u, "")}+)` : "([^]+)", m = "", S |= x = 2), y.push(v), g = "";
+          throw new T(`Missing text before "${v.name}" ${v.type}`, l);
+        v.type === "param" ? (d += S & 2 ? `(${M(u, g)}+)` : I(D, "wildcard") ? `(${M(u, Y(D))}+)` : S & 1 ? `(${M(u, g)}+|${s(g)})` : `(${M(u, "")}+)`, S |= x = 1) : (d += S & 2 ? `(${M(g, "")}+)` : m ? `(${M(m, "")}+|${M(u, "")}+)` : "([^]+)", m = "", S |= x = 2), y.push(v), g = "";
         continue;
       }
       throw new TypeError(`Unknown token type: ${v.type}`);
     }
     return d;
   }
-  function C(o, u) {
-    return u.length > o.length ? C(u, o) : (o === u && (u = ""), u.length > 1 ? `(?:(?!${s(o)}|${s(u)})[^])` : o.length > 1 ? `(?:(?!${s(o)})[^${s(u)}])` : `[^${s(o + u)}]`);
+  function M(o, u) {
+    return u.length > o.length ? M(u, o) : (o === u && (u = ""), u.length > 1 ? `(?:(?!${s(o)}|${s(u)})[^])` : o.length > 1 ? `(?:(?!${s(o)})[^${s(u)}])` : `[^${s(o + u)}]`);
   }
-  function A(o, u) {
+  function $(o, u) {
     let y = "";
     for (; u < o.length; ) {
       const l = o[u++];
@@ -280,7 +280,7 @@ function Ne() {
         continue;
       }
       if (l.type === "group") {
-        y += "{" + A(l.tokens, 0) + "}";
+        y += "{" + $(l.tokens, 0) + "}";
         continue;
       }
       if (l.type === "param") {
@@ -296,10 +296,10 @@ function Ne() {
     return y;
   }
   function X(o) {
-    return A(o.tokens, 0);
+    return $(o.tokens, 0);
   }
   function O(o, u) {
-    return !c.test(o) || u?.type === "text" && a.test(u.value[0]) ? JSON.stringify(o) : o;
+    return !a.test(o) || u?.type === "text" && c.test(u.value[0]) ? JSON.stringify(o) : o;
   }
   return F;
 }
@@ -326,53 +326,53 @@ function ke(n, e) {
   return e.type === "SET" ? e.params : n;
 }
 function Ae({ children: n }) {
-  const { isActive: e, params: r } = gt(), [a, c] = we(ke, r);
+  const { isActive: e, params: r } = gt(), [c, a] = we(ke, r);
   return wt(() => {
     const i = async (s) => {
       s.state?.step && await V.addTask(async () => {
-        c({ type: "SET", params: s.state?.params || {} });
+        a({ type: "SET", params: s.state?.params || {} });
       });
     };
     return e && window.addEventListener("popstate", i), () => {
       window.removeEventListener("popstate", i);
     };
-  }, [e, c]), /* @__PURE__ */ k(ae.Provider, { value: c, children: /* @__PURE__ */ k(se.Provider, { value: a, children: n }) });
+  }, [e, a]), /* @__PURE__ */ k(ae.Provider, { value: a, children: /* @__PURE__ */ k(se.Provider, { value: c, children: n }) });
 }
 function $e({ children: n }) {
-  const e = G((a) => a.index), r = G((a) => a.histories);
+  const e = G((c) => c.index), r = G((c) => c.histories);
   return r.map(
-    (a) => oe.toArray(n).filter(
-      (c) => It.pathToRegexp(c.props.path).regexp.test(
-        a.pathname
+    (c) => oe.toArray(n).filter(
+      (a) => It.pathToRegexp(a.props.path).regexp.test(
+        c.pathname
       )
     )
-  ).map(([a], c) => /* @__PURE__ */ k(
+  ).map(([c], a) => /* @__PURE__ */ k(
     ie.Provider,
     {
       value: {
-        id: r[c].id,
-        isActive: c === e,
-        isRoot: c === 0,
-        isPrev: c < e - 1,
-        zIndex: c,
-        pathname: r[c].pathname,
-        params: r[c].params,
+        id: r[a].id,
+        isActive: a === e,
+        isRoot: a === 0,
+        isPrev: a < e - 1,
+        zIndex: a,
+        pathname: r[a].pathname,
+        params: r[a].params,
         transitionName: r[e].transitionName,
         prevTransitionName: r[e - 1]?.transitionName,
-        layoutId: r[c].layoutId,
+        layoutId: r[a].layoutId,
         routePath: Ee(
-          a.props.path,
-          r[c].pathname
+          c.props.path,
+          r[a].pathname
         )
       },
-      children: /* @__PURE__ */ k(Ae, { children: a })
+      children: /* @__PURE__ */ k(Ae, { children: c })
     },
-    r[c].id
+    r[a].id
   ));
 }
 const Zt = "data-flemo", te = () => {
   if (Ut()) return;
-  const n = Pe(ut.values(), yt.values());
+  const n = Te(ut.values(), yt.values());
   let e = document.head.querySelector(`style[${Zt}]`);
   e || (e = document.createElement("style"), e.setAttribute(Zt, ""), document.head.appendChild(e)), e.textContent !== n && (e.textContent = n);
 };
@@ -392,8 +392,8 @@ function Ke({
   children: n,
   initPath: e = "/",
   defaultTransitionName: r = "cupertino",
-  transitions: a = Me,
-  decorators: c = He
+  transitions: c = Me,
+  decorators: a = He
 }) {
   const i = Ut() ? e || "/" : window.location.pathname, s = Ut() ? i.split("?")[1] || "" : window.location.search;
   return Yt.setState({
@@ -404,7 +404,7 @@ function Ke({
       {
         id: "root",
         pathname: i,
-        params: Te(
+        params: Pe(
           oe.toArray(n).map((w) => w.props.path).flat(),
           i,
           s
@@ -413,7 +413,7 @@ function Ke({
         layoutId: null
       }
     ]
-  }), Ce(a, c), wt(() => {
+  }), Ce(c, a), wt(() => {
     window.history.state?.index || window.history.replaceState(
       {
         id: "root",
@@ -435,132 +435,132 @@ function We({ element: n }) {
   return n;
 }
 function Rt(n, e) {
-  const r = e ?? {}, a = It.compile(n), c = Object.fromEntries(
-    Object.entries(r).map(([p, I]) => [p, String(I)])
-  ), i = a(c), w = (typeof n == "string" ? It.parse(n) : n).tokens.filter((p) => p.type === "param").map((p) => p.name), P = Object.fromEntries(
-    Object.entries(r).filter(([p]) => !w.includes(p))
-  ), f = new URLSearchParams(P).toString();
-  return { pathname: `${i}${f ? `?${f}` : ""}`, toPathname: i };
+  const r = e ?? {}, c = It.compile(n), a = Object.fromEntries(
+    Object.entries(r).map(([f, L]) => [f, String(L)])
+  ), i = c(a), w = (typeof n == "string" ? It.parse(n) : n).tokens.filter((f) => f.type === "param").map((f) => f.name), T = Object.fromEntries(
+    Object.entries(r).filter(([f]) => !w.includes(f))
+  ), p = new URLSearchParams(T).toString();
+  return { pathname: `${i}${p ? `?${p}` : ""}`, toPathname: i };
 }
 const Mt = (n, e, r) => {
-  const { regexp: a } = It.pathToRegexp(n);
-  for (let c = e - 1; c >= 0; c--)
-    if (a.test(r[c].pathname))
-      return e - c;
+  const { regexp: c } = It.pathToRegexp(n);
+  for (let a = e - 1; a >= 0; a--)
+    if (c.test(r[a].pathname))
+      return e - a;
   return -1;
 }, Ht = (n, e) => typeof n == "number" && Number.isFinite(n) ? Math.max(0, Math.trunc(n)) : e, Ot = async (n, e) => {
   let r;
-  const a = new Promise((s) => {
+  const c = new Promise((s) => {
     r = () => s(!0), window.addEventListener("popstate", r, { once: !0 });
-  }), c = new Promise((s) => setTimeout(() => s(!1), 200));
-  if (Ft(), window.history.go(-n), !await Promise.race([a, c])) {
+  }), a = new Promise((s) => setTimeout(() => s(!1), 200));
+  if (Ft(), window.history.go(-n), !await Promise.race([c, a])) {
     window.removeEventListener("popstate", r);
     return;
   }
   e();
 };
 function Je() {
-  const n = async (c, i, s) => {
+  const n = async (a, i, s) => {
     const { status: w } = J.getState();
     if (w !== "COMPLETED" && w !== "IDLE")
       return;
-    const P = Yt.getState().defaultTransitionName, { transitionName: f = P, layoutId: T = null } = s ?? {}, p = V.generateTaskId();
+    const T = Yt.getState().defaultTransitionName, { transitionName: p = T, layoutId: P = null } = s ?? {}, f = V.generateTaskId();
     (await V.addTask(
       async () => {
-        const { index: I, histories: L, addHistory: H, popHistories: R } = G.getState(), U = (() => {
+        const { index: L, histories: R, addHistory: A, popHistories: b } = G.getState(), U = (() => {
           if (s?.until != null) {
-            const u = Mt(s.until, I, L);
+            const u = Mt(s.until, L, R);
             return u < 0 ? 0 : u;
           }
-          return Math.min(Ht(s?.skip, 0), Math.max(0, I));
-        })(), { setStatus: C, setTransitionTaskId: A } = J.getState();
-        C("PUSHING"), A(p);
-        const { pathname: X, toPathname: O } = Rt(c, i ?? {}), o = {
-          id: p,
+          return Math.min(Ht(s?.skip, 0), Math.max(0, L));
+        })(), { setStatus: M, setTransitionTaskId: $ } = J.getState();
+        M("PUSHING"), $(f);
+        const { pathname: X, toPathname: O } = Rt(a, i ?? {}), o = {
+          id: f,
           pathname: O,
           params: i ?? {},
-          transitionName: f,
-          layoutId: T
+          transitionName: p,
+          layoutId: P
         };
         return U === 0 ? (window.history.pushState(
-          { id: p, index: I + 1, status: "PUSHING", params: i, transitionName: f, layoutId: T },
+          { id: f, index: L + 1, status: "PUSHING", params: i, transitionName: p, layoutId: P },
           "",
           X
-        ), H(o), () => {
-          C("COMPLETED");
-        }) : (H(o), await Ot(U, () => {
+        ), A(o), () => {
+          M("COMPLETED");
+        }) : (A(o), await Ot(U, () => {
           window.history.pushState(
             {
-              id: p,
+              id: f,
               index: G.getState().index - U,
               status: "PUSHING",
               params: i,
-              transitionName: f,
-              layoutId: T
+              transitionName: p,
+              layoutId: P
             },
             "",
             X
           );
         }), async () => {
-          R(U), C("COMPLETED");
+          b(U), M("COMPLETED");
         });
       },
       {
-        id: p,
+        id: f,
         control: {
           manual: !0
         }
       }
     )).result?.();
-  }, e = async (c, i, s) => {
+  }, e = async (a, i, s) => {
     const { status: w } = J.getState();
     if (w !== "COMPLETED" && w !== "IDLE")
       return;
-    const P = Yt.getState().defaultTransitionName, { transitionName: f = P, layoutId: T = null } = s ?? {}, p = V.generateTaskId();
+    const T = Yt.getState().defaultTransitionName, { transitionName: p = T, layoutId: P = null } = s ?? {}, f = V.generateTaskId();
     (await V.addTask(
-      async (I) => {
-        const { index: L, histories: H, addHistory: R, replaceHistory: U, popHistories: C } = G.getState(), A = (() => {
+      async (L) => {
+        const { index: R, histories: A, addHistory: b, replaceHistory: U, popHistories: M } = G.getState(), $ = (() => {
           if (s?.until != null) {
-            const l = Mt(s.until, L, H);
+            const l = Mt(s.until, R, A);
             return l < 0 ? 0 : l + 1;
           }
-          return Math.min(Ht(s?.skip, 0) + 1, L + 1);
+          return Math.min(Ht(s?.skip, 0) + 1, R + 1);
         })();
-        if (A <= 0) {
-          I.abort();
+        if ($ <= 0) {
+          L.abort();
           return;
         }
         const { setStatus: X, setTransitionTaskId: O } = J.getState();
-        X("REPLACING"), O(p);
-        const { pathname: o, toPathname: u } = Rt(c, i ?? {}), y = {
-          id: p,
+        X("REPLACING"), O(f);
+        const { pathname: o, toPathname: u } = Rt(a, i ?? {}), y = {
+          id: f,
           pathname: u,
           params: i ?? {},
-          transitionName: f,
-          layoutId: T
+          transitionName: p,
+          layoutId: P
         };
-        return A === 1 ? (window.history.replaceState(
-          { id: p, index: L, status: "REPLACING", params: i, transitionName: f, layoutId: T },
+        return $ === 1 ? (window.history.replaceState(
+          { id: f, index: R, status: "REPLACING", params: i, transitionName: p, layoutId: P },
           "",
           o
-        ), R(y), async () => {
-          U(L), X("COMPLETED");
-        }) : (C(A - 1), R(y), A <= L ? await Ot(A, () => {
+        ), b(y), async () => {
+          U(R), X("COMPLETED");
+        }) : (M($ - 1), b(y), $ <= R ? await Ot($, () => {
           window.history.pushState(
             {
-              id: p,
+              id: f,
               index: G.getState().index - 1,
               status: "REPLACING",
               params: i,
-              transitionName: f,
-              layoutId: T
+              transitionName: p,
+              layoutId: P
             },
             "",
             o
           );
-        }) : await Ot(L, () => {
+        }) : await Ot(R, () => {
           window.history.replaceState(
-            { id: p, index: 0, status: "REPLACING", params: i, transitionName: f, layoutId: T },
+            { id: f, index: 0, status: "REPLACING", params: i, transitionName: p, layoutId: P },
             "",
             o
           );
@@ -569,33 +569,33 @@ function Je() {
         });
       },
       {
-        id: p,
+        id: f,
         control: {
           manual: !0
         }
       }
     )).result?.();
-  }, r = async (c) => {
-    const i = V.generateTaskId();
+  }, r = async (a, i) => {
+    const s = V.generateTaskId();
     (await V.addTask(
-      async (s) => {
-        const { index: w, histories: P, popHistory: f, popHistories: T } = G.getState();
-        if (w <= 0) {
-          s.abort();
+      async (w) => {
+        const { index: T, histories: p, popHistory: P, popHistories: f, setTransitionName: L } = G.getState();
+        if (T <= 0) {
+          w.abort();
           return;
         }
-        const p = Math.min(c(w, P), w);
-        if (p <= 0) {
-          s.abort();
+        const R = Math.min(a(T, p), T);
+        if (R <= 0) {
+          w.abort();
           return;
         }
-        const { setStatus: I, setTransitionTaskId: L } = J.getState();
-        return I("POPPING"), L(i), T(p - 1), Ft(), p === 1 ? window.history.back() : window.history.go(-p), async () => {
-          f(G.getState().index), I("COMPLETED");
+        const { setStatus: A, setTransitionTaskId: b } = J.getState();
+        return i && L(T, i), A("POPPING"), b(s), f(R - 1), Ft(), R === 1 ? window.history.back() : window.history.go(-R), async () => {
+          P(G.getState().index), A("COMPLETED");
         };
       },
       {
-        id: i,
+        id: s,
         control: {
           manual: !0
         }
@@ -605,15 +605,15 @@ function Je() {
   return {
     push: n,
     replace: e,
-    pop: async (c) => {
+    pop: async (a) => {
       await r((i, s) => {
-        if (c?.until != null) {
-          const P = Mt(c.until, i, s);
-          return P < 0 ? 0 : P;
+        if (a?.until != null) {
+          const T = Mt(a.until, i, s);
+          return T < 0 ? 0 : T;
         }
-        const w = Ht(c?.skip, 1);
+        const w = Ht(a?.skip, 1);
         return w <= 0 ? 0 : Math.min(w, i);
-      });
+      }, a?.transitionName);
     }
   };
 }
@@ -659,31 +659,31 @@ function Qe() {
       const i = V.generateTaskId();
       (await V.addTask(
         async (s) => {
-          const w = new Promise((H) => {
+          const w = new Promise((A) => {
             window.addEventListener(
               "popstate",
-              (R) => H(R.state),
+              (b) => A(b.state),
               { once: !0 }
             );
-          }), P = new Promise(
-            (H) => setTimeout(() => H(void 0), 200)
+          }), T = new Promise(
+            (A) => setTimeout(() => A(void 0), 200)
           );
           Ft(), window.history.back();
-          const f = await Promise.race([
+          const p = await Promise.race([
             w,
-            P
+            T
           ]);
-          if (!f) {
+          if (!p) {
             s.abort();
             return;
           }
-          if (f.step) {
-            e({ type: "SET", params: f.params ?? {} }), s.abort();
+          if (p.step) {
+            e({ type: "SET", params: p.params ?? {} }), s.abort();
             return;
           }
-          const { setStatus: T, setTransitionTaskId: p } = J.getState(), { index: I, popHistory: L } = G.getState();
-          return T("POPPING"), p(i), async () => {
-            L(I), T("COMPLETED");
+          const { setStatus: P, setTransitionTaskId: f } = J.getState(), { index: L, popHistory: R } = G.getState();
+          return P("POPPING"), f(i), async () => {
+            R(L), P("COMPLETED");
           };
         },
         {
@@ -712,17 +712,17 @@ function Oe({ freeze: n, children: e }) {
   );
 }
 function Ge({ ref: n, style: e, ...r }) {
-  const { isActive: a, transitionName: c } = gt(), i = N(null);
+  const { isActive: c, transitionName: a } = gt(), i = N(null);
   Se(n, () => i.current);
-  const s = J((T) => T.status), w = ut.get(c) ?? ut.get("none"), { decoratorName: P } = w, f = yt.get(P);
-  return f ? /* @__PURE__ */ k(
+  const s = J((P) => P.status), w = ut.get(a) ?? ut.get("none"), { decoratorName: T } = w, p = yt.get(T);
+  return p ? /* @__PURE__ */ k(
     "div",
     {
       ref: i,
       "data-flemo-decorator": !0,
-      "data-flemo-decorator-name": f.name,
+      "data-flemo-decorator-name": p.name,
       "data-flemo-status": s,
-      "data-flemo-active": a ? "true" : "false",
+      "data-flemo-active": c ? "true" : "false",
       style: {
         position: "absolute",
         top: 0,
@@ -739,13 +739,13 @@ function Ge({ ref: n, style: e, ...r }) {
 }
 const ee = (n) => {
   let e;
-  const r = /* @__PURE__ */ new Set(), a = (f, T) => {
-    const p = typeof f == "function" ? f(e) : f;
-    if (!Object.is(p, e)) {
-      const I = e;
-      e = T ?? (typeof p != "object" || p === null) ? p : Object.assign({}, e, p), r.forEach((L) => L(e, I));
+  const r = /* @__PURE__ */ new Set(), c = (p, P) => {
+    const f = typeof p == "function" ? p(e) : p;
+    if (!Object.is(f, e)) {
+      const L = e;
+      e = P ?? (typeof f != "object" || f === null) ? f : Object.assign({}, e, f), r.forEach((R) => R(e, L));
     }
-  }, c = () => e, w = { setState: a, getState: c, getInitialState: () => P, subscribe: (f) => (r.add(f), () => r.delete(f)) }, P = e = n(a, c, w);
+  }, a = () => e, w = { setState: c, getState: a, getInitialState: () => T, subscribe: (p) => (r.add(p), () => r.delete(p)) }, T = e = n(c, a, w);
   return w;
 }, Be = ((n) => n ? ee(n) : ee), Ue = (n) => n;
 function Ye(n, e = Ue) {
@@ -757,7 +757,7 @@ function Ye(n, e = Ue) {
   return xt.useDebugValue(r), r;
 }
 const ne = (n) => {
-  const e = Be(n), r = (a) => Ye(e, a);
+  const e = Be(n), r = (c) => Ye(e, c);
   return Object.assign(r, e), r;
 }, Ve = ((n) => n ? ne(n) : ne), Z = Ve((n) => ({
   dragStatus: "IDLE",
@@ -765,27 +765,27 @@ const ne = (n) => {
   sharedBars: {},
   setDragStatus: (e) => n({ dragStatus: e }),
   setReplaceTransitionStatus: (e) => n({ replaceTransitionStatus: e }),
-  registerSharedBars: (e, r) => n((a) => ({ sharedBars: { ...a.sharedBars, [e]: r } })),
+  registerSharedBars: (e, r) => n((c) => ({ sharedBars: { ...c.sharedBars, [e]: r } })),
   unregisterSharedBars: (e) => n((r) => {
-    const a = { ...r.sharedBars };
-    return delete a[e], { sharedBars: a };
+    const c = { ...r.sharedBars };
+    return delete c[e], { sharedBars: c };
   })
 }));
 let Gt = 0;
 function _e() {
-  const [n, e] = bt(0), [r, a] = bt(0);
+  const [n, e] = bt(0), [r, c] = bt(0);
   return wt(() => {
-    let c = 0;
+    let a = 0;
     const i = () => {
-      cancelAnimationFrame(c), c = requestAnimationFrame(() => {
+      cancelAnimationFrame(a), a = requestAnimationFrame(() => {
         let s = document.documentElement.scrollHeight - (window.visualViewport?.height || 0);
         s = s < 0 ? 0 : s;
         let w = s - Gt;
-        w = w < 0 ? 0 : w, Gt || (Gt = s), a(w), e(s);
+        w = w < 0 ? 0 : w, Gt || (Gt = s), c(w), e(s);
       });
     };
     return window.visualViewport?.addEventListener("resize", i), window.visualViewport?.addEventListener("scroll", i), () => {
-      cancelAnimationFrame(c), window.visualViewport?.removeEventListener("resize", i), window.visualViewport?.removeEventListener("scroll", i);
+      cancelAnimationFrame(a), window.visualViewport?.removeEventListener("resize", i), window.visualViewport?.removeEventListener("scroll", i);
     };
   }, []), { viewportScrollHeight: n, changedViewportScrollHeight: r };
 }
@@ -796,54 +796,54 @@ const je = (n) => typeof HTMLElement < "u" && n instanceof HTMLElement, Vt = /*
   n.style.transition = "";
   const r = Vt.get(n);
   if (r && r.size > 0) {
-    for (const a of r)
-      n.style.removeProperty(a);
+    for (const c of r)
+      n.style.removeProperty(c);
     r.clear();
     return;
   }
   n.style.removeProperty("transform"), n.style.removeProperty("opacity");
 }, dt = (n, e, r = {}) => {
   if (!je(n)) return Promise.resolve();
-  const a = n, c = xe(e);
-  if (c.length === 0) return Promise.resolve();
+  const c = n, a = xe(e);
+  if (a.length === 0) return Promise.resolve();
   const i = typeof r.duration == "number" ? r.duration : 0, s = typeof r.delay == "number" && r.delay > 0 ? r.delay : 0, w = be(r.ease);
   if (i <= 0 && s <= 0) {
-    a.style.transition = "none";
-    for (const f of c)
-      a.style.setProperty(f.property, f.value), re(a, f.property);
+    c.style.transition = "none";
+    for (const p of a)
+      c.style.setProperty(p.property, p.value), re(c, p.property);
     return Promise.resolve();
   }
-  const P = c.map((f) => `${f.property} ${i}s ${w} ${s}s`).join(", ");
-  a.style.transition = P, a.offsetWidth;
-  for (const f of c)
-    a.style.setProperty(f.property, f.value), re(a, f.property);
-  return new Promise((f) => {
-    let T = !1;
-    const p = () => {
-      T || (T = !0, a.removeEventListener("transitionend", I), f());
-    }, I = (L) => {
-      L.target === a && p();
+  const T = a.map((p) => `${p.property} ${i}s ${w} ${s}s`).join(", ");
+  c.style.transition = T, c.offsetWidth;
+  for (const p of a)
+    c.style.setProperty(p.property, p.value), re(c, p.property);
+  return new Promise((p) => {
+    let P = !1;
+    const f = () => {
+      P || (P = !0, c.removeEventListener("transitionend", L), p());
+    }, L = (R) => {
+      R.target === c && f();
     };
-    a.addEventListener("transitionend", I), setTimeout(p, (i + s) * 1e3 + 60);
+    c.addEventListener("transitionend", L), setTimeout(f, (i + s) * 1e3 + 60);
   });
 }, pt = J, ht = "data-flemo-skip-animation";
 function Fe({
   children: n,
   statusBarHeight: e,
   statusBarColor: r,
-  systemNavigationBarHeight: a,
-  systemNavigationBarColor: c,
+  systemNavigationBarHeight: c,
+  systemNavigationBarColor: a,
   sharedAppBar: i,
   sharedNavigationBar: s,
   appBar: w,
-  navigationBar: P,
-  hideStatusBar: f,
-  hideSystemNavigationBar: T,
-  backgroundColor: p = "white",
-  contentScrollable: I = !0,
-  ...L
+  navigationBar: T,
+  hideStatusBar: p,
+  hideSystemNavigationBar: P,
+  backgroundColor: f = "white",
+  contentScrollable: L = !0,
+  ...R
 }) {
-  const { id: H, isActive: R, isRoot: U, zIndex: C, transitionName: A, prevTransitionName: X } = gt(), O = pt((t) => t.status), o = Z((t) => t.dragStatus), u = Z.getState().setDragStatus, y = Z.getState().setReplaceTransitionStatus, l = G((t) => t.index), d = ut.get(A) ?? ut.get("none"), { initial: g, swipeDirection: m, decoratorName: x } = d, S = yt.get(x), { viewportScrollHeight: D } = _e(), b = D > 0, [Y, v] = bt(0), [B, j] = bt(0), Xt = N(null), _ = N(null), tt = N(null), K = N(null), lt = N(null), Q = N({
+  const { id: A, isActive: b, isRoot: U, zIndex: M, transitionName: $, prevTransitionName: X } = gt(), O = pt((t) => t.status), o = Z((t) => t.dragStatus), u = Z.getState().setDragStatus, y = Z.getState().setReplaceTransitionStatus, l = G((t) => t.index), d = ut.get($) ?? ut.get("none"), { initial: g, swipeDirection: m, decoratorName: x } = d, S = yt.get(x), { viewportScrollHeight: D } = _e(), I = D > 0, [Y, v] = bt(0), [B, j] = bt(0), Xt = N(null), _ = N(null), tt = N(null), K = N(null), lt = N(null), Q = N({
     current: [],
     prev: []
   }), et = N(!1), ft = N(!1), ot = N(!1), ce = N(0), Dt = N({ x: 0, y: 0 }), St = N({ x: 0, y: 0 }), Lt = N(0), Nt = N({ x: 0, y: 0 }), nt = N({
@@ -861,32 +861,32 @@ function Fe({
       velocity: Nt.current
     };
   }, ue = (t) => {
-    const h = t.timeStamp, E = Math.max(1, h - Lt.current), M = St.current;
+    const h = t.timeStamp, E = Math.max(1, h - Lt.current), H = St.current;
     Nt.current = {
-      x: (t.clientX - M.x) / E * 1e3,
-      y: (t.clientY - M.y) / E * 1e3
+      x: (t.clientX - H.x) / E * 1e3,
+      y: (t.clientY - H.y) / E * 1e3
     }, St.current = { x: t.clientX, y: t.clientY }, Lt.current = h;
   }, Ct = (t, h, E) => {
-    const M = dt(t, h, E);
+    const H = dt(t, h, E);
     if (t === _.current)
-      for (const $ of Q.current.current)
-        dt($, h, E);
+      for (const C of Q.current.current)
+        dt(C, h, E);
     else if (t === tt.current)
-      for (const $ of Q.current.prev)
-        dt($, h, E);
-    return M;
+      for (const C of Q.current.prev)
+        dt(C, h, E);
+    return H;
   }, le = (t) => {
-    const h = R ? G.getState().histories[l - 1]?.id : G.getState().histories[l]?.id, E = h ? Z.getState().sharedBars[h] : void 0, M = [], $ = st.current, ct = at.current;
-    $ && Et && !E?.appBar && M.push($), ct && Pt && !E?.navigationBar && M.push(ct);
+    const h = b ? G.getState().histories[l - 1]?.id : G.getState().histories[l]?.id, E = h ? Z.getState().sharedBars[h] : void 0, H = [], C = st.current, ct = at.current;
+    C && Et && !E?.appBar && H.push(C), ct && Tt && !E?.navigationBar && H.push(ct);
     const q = [];
     if (t) {
       const rt = t.querySelector('[data-flemo-bar="app"]'), Wt = t.querySelector('[data-flemo-bar="nav"]');
-      rt && !Et && q.push(rt), Wt && !Pt && q.push(Wt);
+      rt && !Et && q.push(rt), Wt && !Tt && q.push(Wt);
     }
-    Q.current = { current: M, prev: q };
-    const Tt = De(d).join(", ");
-    for (const rt of M) rt.style.willChange = Tt;
-    for (const rt of q) rt.style.willChange = Tt;
+    Q.current = { current: H, prev: q };
+    const Pt = De(d).join(", ");
+    for (const rt of H) rt.style.willChange = Pt;
+    for (const rt of q) rt.style.willChange = Pt;
   }, qt = () => {
     for (const t of Q.current.current)
       z(t), t.style.removeProperty("will-change");
@@ -903,7 +903,7 @@ function Fe({
       animate: Ct,
       currentScreen: h,
       prevScreen: tt.current,
-      onStart: ($) => S?.onSwipeStart?.($, {
+      onStart: (C) => S?.onSwipeStart?.(C, {
         animate: dt,
         currentDecorator: K.current,
         prevDecorator: lt.current
@@ -930,22 +930,22 @@ function Fe({
       animate: Ct,
       currentScreen: _.current,
       prevScreen: tt.current,
-      onStart: ($) => S?.onSwipeEnd?.($, {
+      onStart: (C) => S?.onSwipeEnd?.(C, {
         animate: dt,
         currentDecorator: K.current,
         prevDecorator: lt.current
       })
     })) {
       _.current?.setAttribute(ht, "true"), K.current?.setAttribute(ht, "true");
-      for (const $ of Q.current.current)
-        $.style.removeProperty("will-change");
-      for (const $ of Q.current.prev)
-        z($), $.style.removeProperty("will-change");
+      for (const C of Q.current.current)
+        C.style.removeProperty("will-change");
+      for (const C of Q.current.prev)
+        z(C), C.style.removeProperty("will-change");
       Q.current = { current: [], prev: [] }, window.history.back();
     } else
       z(_.current), tt.current && z(tt.current), K.current && z(K.current), lt.current && z(lt.current), qt(), u("IDLE");
   }, fe = (t) => {
-    if (!(!U && R && O === "COMPLETED" && o === "IDLE" && !!m && D < 10))
+    if (!(!U && b && O === "COMPLETED" && o === "IDLE" && !!m && D < 10))
       return;
     nt.current = Jt(t.target, {
       direction: "x",
@@ -964,11 +964,11 @@ function Fe({
     const h = !nt.current.element && !it.current.element;
     if (et.current && h) {
       et.current = !1, ft.current = !0;
-      const E = t.clientY - At.current, M = t.clientX - kt.current;
-      (m === "y" && E > 0 || m === "x" && M > 0) && vt(t.nativeEvent);
+      const E = t.clientY - At.current, H = t.clientX - kt.current;
+      (m === "y" && E > 0 || m === "x" && H > 0) && vt(t.nativeEvent);
     } else if (et.current && !h) {
-      const E = t.clientX - kt.current, M = t.clientY - At.current, $ = it.current.element && it.current.element.scrollTop <= 0, ct = nt.current.element && nt.current.element.scrollLeft <= 0 && nt.current.hasMarker;
-      (m === "y" && ($ || nt.current.element) && M > 0 && Math.abs(E) < 2 || m === "x" && (ct || it.current.element) && E > 0 && Math.abs(M) < 2) && (et.current = !1, ft.current = !0, vt(t.nativeEvent));
+      const E = t.clientX - kt.current, H = t.clientY - At.current, C = it.current.element && it.current.element.scrollTop <= 0, ct = nt.current.element && nt.current.element.scrollLeft <= 0 && nt.current.hasMarker;
+      (m === "y" && (C || nt.current.element) && H > 0 && Math.abs(E) < 2 || m === "x" && (ct || it.current.element) && E > 0 && Math.abs(H) < 2) && (et.current = !1, ft.current = !0, vt(t.nativeEvent));
     }
   }, zt = (t) => {
     et.current = !1, ft.current = !1, ot.current && pe(t.nativeEvent);
@@ -985,8 +985,8 @@ function Fe({
       t.removeEventListener("touchmove", h);
     };
   }, []), mt(() => {
-    if (!R) {
-      O === "REPLACING" && X !== A && y("PENDING");
+    if (!b) {
+      O === "REPLACING" && X !== $ && y("PENDING");
       return;
     }
     if (O === "COMPLETED") {
@@ -1004,7 +1004,7 @@ function Fe({
       queueMicrotask(h);
       return;
     }
-    const ct = Re("screen", A, E), q = (W) => {
+    const ct = Re("screen", $, E), q = (W) => {
       W.target === t && W.animationName === ct && (t.removeEventListener("animationend", q), h());
     };
     return t.addEventListener("animationend", q), () => {
@@ -1012,10 +1012,10 @@ function Fe({
     };
   }, [
     O,
-    R,
-    H,
-    X,
+    b,
     A,
+    X,
+    $,
     d,
     u,
     y
@@ -1047,12 +1047,12 @@ function Fe({
     };
   }, [s]), mt(() => {
     const { registerSharedBars: t, unregisterSharedBars: h } = Z.getState();
-    return t(H, {
+    return t(A, {
       appBar: !!i,
       navigationBar: !!s
-    }), () => h(H);
-  }, [H, i, s]);
-  const Kt = R || C === l - 1, Et = !!i, Pt = !!s;
+    }), () => h(A);
+  }, [A, i, s]);
+  const Kt = b || M === l - 1, Et = !!i, Tt = !!s;
   mt(() => {
     const t = st.current, h = at.current;
     if (!t && !h) return;
@@ -1061,17 +1061,17 @@ function Fe({
         t?.removeAttribute("data-flemo-bar-riding"), h?.removeAttribute("data-flemo-bar-riding");
         return;
       }
-      const q = R ? G.getState().histories[l - 1]?.id : G.getState().histories[l]?.id, W = q ? Z.getState().sharedBars[q] : void 0, Tt = Et && !W?.appBar, rt = Pt && !W?.navigationBar;
-      t && t.setAttribute("data-flemo-bar-riding", Tt ? "true" : "false"), h && h.setAttribute("data-flemo-bar-riding", rt ? "true" : "false");
+      const q = b ? G.getState().histories[l - 1]?.id : G.getState().histories[l]?.id, W = q ? Z.getState().sharedBars[q] : void 0, Pt = Et && !W?.appBar, rt = Tt && !W?.navigationBar;
+      t && t.setAttribute("data-flemo-bar-riding", Pt ? "true" : "false"), h && h.setAttribute("data-flemo-bar-riding", rt ? "true" : "false");
     };
     E();
-    const M = Z.subscribe(E), $ = pt.subscribe(E);
+    const H = Z.subscribe(E), C = pt.subscribe(E);
     return () => {
-      M(), $(), t?.removeAttribute("data-flemo-bar-riding"), h?.removeAttribute("data-flemo-bar-riding");
+      H(), C(), t?.removeAttribute("data-flemo-bar-riding"), h?.removeAttribute("data-flemo-bar-riding");
     };
-  }, [Kt, R, l, Et, Pt]);
+  }, [Kt, b, l, Et, Tt]);
   const he = (() => {
-    if (!R) return {};
+    if (!b) return {};
     if (O !== "PUSHING" && O !== "REPLACING") return {};
     const t = {};
     return typeof g.x == "number" && (t.transform = `translateX(${g.x}px)`), typeof g.x == "string" && (t.transform = `translateX(${g.x})`), typeof g.y == "number" && (t.transform = `translateY(${g.y}px)`), typeof g.y == "string" && (t.transform = `translateY(${g.y})`), typeof g.opacity == "number" && (t.opacity = `${g.opacity}`), t;
@@ -1115,27 +1115,27 @@ function Fe({
           "div",
           {
             ref: _,
-            ...L,
+            ...R,
             onPointerDown: fe,
             onPointerMove: me,
             onPointerUp: zt,
             onPointerCancel: zt,
             "data-flemo-screen": !0,
-            "data-flemo-transition": A,
+            "data-flemo-transition": $,
             "data-flemo-status": O,
-            "data-flemo-active": R ? "true" : "false",
+            "data-flemo-active": b ? "true" : "false",
             style: {
               display: "flex",
               flexDirection: "column",
               height: "100%",
-              backgroundColor: p,
-              overflowY: I ? void 0 : "auto",
+              backgroundColor: f,
+              overflowY: L ? void 0 : "auto",
               touchAction: m === "x" ? "pan-y" : m === "y" ? "pan-x" : "auto",
               ...he,
-              ...L.style
+              ...R.style
             },
             children: [
-              !f && e && /* @__PURE__ */ k("div", { style: { minHeight: e }, children: /* @__PURE__ */ k(
+              !p && e && /* @__PURE__ */ k("div", { style: { minHeight: e }, children: /* @__PURE__ */ k(
                 "div",
                 {
                   style: {
@@ -1164,28 +1164,28 @@ function Fe({
                     display: "flex",
                     flexDirection: "column",
                     flexGrow: 1,
-                    overflowY: I ? "auto" : void 0
+                    overflowY: L ? "auto" : void 0
                   },
                   children: n
                 }
               ),
-              P,
+              T,
               s && /* @__PURE__ */ k(
                 "div",
                 {
                   style: {
-                    display: b ? "none" : void 0,
+                    display: I ? "none" : void 0,
                     width: "100%",
                     minHeight: B
                   }
                 }
               ),
-              !T && a && /* @__PURE__ */ k(
+              !P && c && /* @__PURE__ */ k(
                 "div",
                 {
                   style: {
-                    display: b ? "none" : void 0,
-                    minHeight: a
+                    display: I ? "none" : void 0,
+                    minHeight: c
                   },
                   children: /* @__PURE__ */ k(
                     "div",
@@ -1194,8 +1194,8 @@ function Fe({
                         position: "fixed",
                         bottom: 0,
                         width: "100%",
-                        minHeight: a,
-                        backgroundColor: c
+                        minHeight: c,
+                        backgroundColor: a
                       }
                     }
                   )
@@ -1209,12 +1209,12 @@ function Fe({
           {
             ref: st,
             "data-flemo-bar": "app",
-            "data-flemo-bar-transition": A,
+            "data-flemo-bar-transition": $,
             "data-flemo-bar-status": O,
-            "data-flemo-bar-active": R ? "true" : "false",
+            "data-flemo-bar-active": b ? "true" : "false",
             style: {
               position: "fixed",
-              top: f ? 0 : e,
+              top: p ? 0 : e,
               left: 0,
               width: "100%",
               zIndex: 1
@@ -1227,13 +1227,13 @@ function Fe({
           {
             ref: at,
             "data-flemo-bar": "nav",
-            "data-flemo-bar-transition": A,
+            "data-flemo-bar-transition": $,
             "data-flemo-bar-status": O,
-            "data-flemo-bar-active": R ? "true" : "false",
+            "data-flemo-bar-active": b ? "true" : "false",
             style: {
-              display: b ? "none" : void 0,
+              display: I ? "none" : void 0,
               position: "fixed",
-              bottom: T ? 0 : a,
+              bottom: P ? 0 : c,
               left: 0,
               width: "100%",
               zIndex: 1
@@ -1261,8 +1261,8 @@ function Fe({
   );
 }
 function tn({ children: n, ...e }) {
-  const { isActive: r, isPrev: a, zIndex: c } = gt(), i = G((p) => p.index), s = J((p) => p.status), w = Z((p) => p.dragStatus), P = Z((p) => p.replaceTransitionStatus), T = !r && (s === "COMPLETED" && w === "IDLE") || a && i - 2 <= c && P === "IDLE" || a && i - 2 > c;
-  return /* @__PURE__ */ k(Oe, { freeze: T, children: /* @__PURE__ */ k(Fe, { ...e, children: n }) });
+  const { isActive: r, isPrev: c, zIndex: a } = gt(), i = G((f) => f.index), s = J((f) => f.status), w = Z((f) => f.dragStatus), T = Z((f) => f.replaceTransitionStatus), P = !r && (s === "COMPLETED" && w === "IDLE") || c && i - 2 <= a && T === "IDLE" || c && i - 2 > a;
+  return /* @__PURE__ */ k(Oe, { freeze: P, children: /* @__PURE__ */ k(Fe, { ...e, children: n }) });
 }
 export {
   We as Route,

package/dist/navigate/useNavigate.d.ts

@@ -13,6 +13,8 @@ export default function useNavigate(): {
         layoutId?: string | number;
         transitionName?: TransitionName;
     }) => Promise<void>;
-    pop: (options?: DistanceOptions) => Promise<void>;
+    pop: (options?: DistanceOptions & {
+        transitionName?: TransitionName;
+    }) => Promise<void>;
 };
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flemo/react",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "React bindings for flemo — Router, Route, Screen, and the screen-transition runtime.",
   "main": "./dist/index.mjs",
   "module": "./dist/index.mjs",
@@ -36,7 +36,7 @@
   "dependencies": {
     "path-to-regexp": "^8.2.0",
     "zustand": "^5.0.11",
-    "@flemo/core": "1.2.0"
+    "@flemo/core": "1.3.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",
@@ -54,8 +54,8 @@
     "vite": "^7.1.5",
     "vite-plugin-dts": "^4.5.4",
     "vitest": "^2.1.8",
-    "@flemo/tsconfig": "0.0.0",
-    "@flemo/eslint-config": "0.0.0"
+    "@flemo/eslint-config": "0.0.0",
+    "@flemo/tsconfig": "0.0.0"
   },
   "peerDependencies": {
     "react": "^19.2.0",