@flemo/react 1.0.2 → 1.0.3

package/README.md

@@ -28,9 +28,9 @@ dependency. Apps that only need transition compilers or the navigation queue can
 
 ## Documentation
 
-See [flemo-web.vercel.app](https://flemo-web.vercel.app) for the full guide — getting started,
+See [flemo.dev](https://flemo.dev) for the full guide — getting started,
 transitions, shared-element morphs, gestures, and the complete API reference. A live playground is
-at [flemo-web.vercel.app/playground](https://flemo-web.vercel.app/playground).
+at [flemo.dev/playground](https://flemo.dev/playground).
 
 ## License
 

package/dist/index.mjs

@@ -1,21 +1,21 @@
 import { jsx as N, jsxs as Ht, Fragment as fe } from "react/jsx-runtime";
-import Pt, { useEffect as lt, createContext as Gt, useContext as Yt, useReducer as me, Children as te, useInsertionEffect as he, useRef as L, useImperativeHandle as ye, useState as bt, useLayoutEffect as xt } from "react";
-import { consumeSelfInducedPop as ge, TaskManger as G, useNavigateStore as K, useHistoryStore as O, getMatchedPathPattern as we, transitionMap as it, decoratorMap as ft, isServer as Mt, compileTransitionStyles as Se, useTransitionStore as Ot, getParams as ve, markSelfInducedPop as ee, targetToDecls as Te, easingToCss as Ee, variantHasAnimation as Pe, animationName as xe, findScrollable as qt, collectAnimatedProperties as be } from "@flemo/core";
+import Pt, { useEffect as dt, createContext as Gt, useContext as Yt, useReducer as me, Children as te, useInsertionEffect as ye, useRef as L, useImperativeHandle as he, useState as bt, useLayoutEffect as xt } from "react";
+import { consumeSelfInducedPop as ge, TaskManger as G, useNavigateStore as W, useHistoryStore as O, getMatchedPathPattern as we, transitionMap as ct, decoratorMap as yt, isServer as Mt, compileTransitionStyles as Se, useTransitionStore as Ot, getParams as ve, markSelfInducedPop as ee, targetToDecls as Te, easingToCss as Ee, variantHasAnimation as Pe, animationName as xe, findScrollable as qt, collectAnimatedProperties as be } from "@flemo/core";
 import { createDecorator as tn, createRawDecorator as en, createRawTransition as nn, createTransition as rn } from "@flemo/core";
 function Ie() {
-  return lt(() => {
+  return dt(() => {
     const n = async (e) => {
       if (ge())
         return;
       const r = e.state?.id, a = G.generateTaskId();
       (await G.addTask(
         async (u) => {
-          const i = e.state?.index, s = e.state?.status, T = e.state?.params, E = e.state?.transitionName, m = e.state?.layoutId, { setStatus: x, setTransitionTaskId: y } = K.getState(), { index: R, addHistory: $, popHistory: C } = O.getState(), D = i < R, F = s === "PUSHING" && i > R, M = s === "REPLACING" && i > R, Y = window.location.pathname;
-          if (!D && !F && !M) {
+          const i = e.state?.index, s = e.state?.status, T = e.state?.params, E = e.state?.transitionName, m = e.state?.layoutId, { setStatus: x, setTransitionTaskId: h } = W.getState(), { index: R, addHistory: $, popHistory: C } = O.getState(), D = i < R, q = s === "PUSHING" && i > R, M = s === "REPLACING" && i > R, Y = window.location.pathname;
+          if (!D && !q && !M) {
             u.abort();
             return;
           }
-          return y(a), D ? x("POPPING") : F ? (x("PUSHING"), $({
+          return h(a), D ? x("POPPING") : q ? (x("PUSHING"), $({
             id: r,
             pathname: Y,
             params: T,
@@ -47,7 +47,7 @@ function Ie() {
 var j = {}, zt;
 function Re() {
   if (zt) return j;
-  zt = 1, Object.defineProperty(j, "__esModule", { value: !0 }), j.PathError = j.TokenData = void 0, j.parse = m, j.compile = x, j.match = $, j.pathToRegexp = C, j.stringify = ht;
+  zt = 1, Object.defineProperty(j, "__esModule", { value: !0 }), j.PathError = j.TokenData = void 0, j.parse = m, j.compile = x, j.match = $, j.pathToRegexp = C, j.stringify = gt;
   const n = "/", e = (o) => o, r = /^[$_\p{ID_Start}]$/u, a = /^[$\u200c\u200d\p{ID_Continue}]$/u, u = /^[$_\p{ID_Start}][$\u200c\u200d\p{ID_Continue}]*$/u;
   function i(o) {
     return o.replace(/[{}()\[\]+?!:*\\]/g, "\\$&");
@@ -56,55 +56,55 @@ function Re() {
     return o.replace(/[.+*?^${}()[\]|/\\]/g, "\\$&");
   }
   class T {
-    constructor(c, h) {
-      this.tokens = c, this.originalPath = h;
+    constructor(c, y) {
+      this.tokens = c, this.originalPath = y;
     }
   }
   j.TokenData = T;
   class E extends TypeError {
-    constructor(c, h) {
-      let d = c;
-      h && (d += `: ${h}`), d += "; visit https://git.new/pathToRegexpError for info", super(d), this.originalPath = h;
+    constructor(c, y) {
+      let p = c;
+      y && (p += `: ${y}`), p += "; visit https://git.new/pathToRegexpError for info", super(p), this.originalPath = y;
     }
   }
   j.PathError = E;
   function m(o, c = {}) {
-    const { encodePath: h = e } = c, d = [...o];
+    const { encodePath: y = e } = c, p = [...o];
     let l = 0;
-    function g(p) {
+    function g(d) {
       const P = [];
       let w = "";
       function I() {
         w && (P.push({
           type: "text",
-          value: h(w)
+          value: y(w)
         }), w = "");
       }
-      for (; l < d.length; ) {
-        const b = d[l++];
-        if (b === p)
+      for (; l < p.length; ) {
+        const b = p[l++];
+        if (b === d)
           return I(), P;
         if (b === "\\") {
-          if (l === d.length)
+          if (l === p.length)
             throw new E(`Unexpected end after \\ at index ${l}`, o);
-          w += d[l++];
+          w += p[l++];
           continue;
         }
         if (b === ":" || b === "*") {
           const U = b === ":" ? "param" : "wildcard";
           let S = "";
-          if (r.test(d[l]))
+          if (r.test(p[l]))
             do
-              S += d[l++];
-            while (a.test(d[l]));
-          else if (d[l] === '"') {
+              S += p[l++];
+            while (a.test(p[l]));
+          else if (p[l] === '"') {
             let H = l;
-            for (; l < d.length; ) {
-              if (d[++l] === '"') {
+            for (; l < p.length; ) {
+              if (p[++l] === '"') {
                 l++, H = 0;
                 break;
               }
-              d[l] === "\\" && l++, S += d[l];
+              p[l] === "\\" && l++, S += p[l];
             }
             if (H)
               throw new E(`Unterminated quote at index ${H}`, o);
@@ -125,14 +125,14 @@ function Re() {
           throw new E(`Unexpected ${b} at index ${l - 1}`, o);
         w += b;
       }
-      if (p)
-        throw new E(`Unexpected end at index ${l}, expected ${p}`, o);
+      if (d)
+        throw new E(`Unexpected end at index ${l}, expected ${d}`, o);
       return I(), P;
     }
     return new T(g(""), o);
   }
   function x(o, c = {}) {
-    const { encode: h = encodeURIComponent, delimiter: d = n } = c, l = typeof o == "object" ? o : m(o, c), g = y(l.tokens, d, h);
+    const { encode: y = encodeURIComponent, delimiter: p = n } = c, l = typeof o == "object" ? o : m(o, c), g = h(l.tokens, p, y);
     return function(P = {}) {
       const w = [], I = g(P, w);
       if (w.length)
@@ -140,50 +140,50 @@ function Re() {
       return I;
     };
   }
-  function y(o, c, h) {
-    const d = o.map((l) => R(l, c, h));
+  function h(o, c, y) {
+    const p = o.map((l) => R(l, c, y));
     return (l, g) => {
-      let p = "";
-      for (const P of d)
-        p += P(l, g);
-      return p;
+      let d = "";
+      for (const P of p)
+        d += P(l, g);
+      return d;
     };
   }
-  function R(o, c, h) {
+  function R(o, c, y) {
     if (o.type === "text")
       return () => o.value;
     if (o.type === "group") {
-      const l = y(o.tokens, c, h);
-      return (g, p) => {
-        const P = p.length, w = l(g, p);
-        return p.length === P ? w : (p.length = P, "");
+      const l = h(o.tokens, c, y);
+      return (g, d) => {
+        const P = d.length, w = l(g, d);
+        return d.length === P ? w : (d.length = P, "");
       };
     }
-    const d = h || e;
-    return o.type === "wildcard" && h !== !1 ? (l, g) => {
-      const p = l[o.name];
-      if (p == null)
+    const p = y || e;
+    return o.type === "wildcard" && y !== !1 ? (l, g) => {
+      const d = l[o.name];
+      if (d == null)
         return g.push(o.name), "";
-      if (!Array.isArray(p) || p.length === 0)
+      if (!Array.isArray(d) || d.length === 0)
         throw new TypeError(`Expected "${o.name}" to be a non-empty array`);
       let P = "";
-      for (let w = 0; w < p.length; w++) {
-        if (typeof p[w] != "string")
+      for (let w = 0; w < d.length; w++) {
+        if (typeof d[w] != "string")
           throw new TypeError(`Expected "${o.name}/${w}" to be a string`);
-        w > 0 && (P += c), P += d(p[w]);
+        w > 0 && (P += c), P += p(d[w]);
       }
       return P;
     } : (l, g) => {
-      const p = l[o.name];
-      if (p == null)
+      const d = l[o.name];
+      if (d == null)
         return g.push(o.name), "";
-      if (typeof p != "string")
+      if (typeof d != "string")
         throw new TypeError(`Expected "${o.name}" to be a string`);
-      return d(p);
+      return p(d);
     };
   }
   function $(o, c = {}) {
-    const { decode: h = decodeURIComponent, delimiter: d = n } = c, { regexp: l, keys: g } = C(o, c), p = g.map((P) => h === !1 ? e : P.type === "param" ? h : (w) => w.split(d).map(h));
+    const { decode: y = decodeURIComponent, delimiter: p = n } = c, { regexp: l, keys: g } = C(o, c), d = g.map((P) => y === !1 ? e : P.type === "param" ? y : (w) => w.split(p).map(y));
     return function(w) {
       const I = l.exec(w);
       if (!I)
@@ -192,14 +192,14 @@ function Re() {
       for (let S = 1; S < I.length; S++) {
         if (I[S] === void 0)
           continue;
-        const H = g[S - 1], _ = p[S - 1];
+        const H = g[S - 1], _ = d[S - 1];
         U[H.name] = _(I[S]);
       }
       return { path: b, params: U };
     };
   }
   function C(o, c = {}) {
-    const { delimiter: h = n, end: d = !0, sensitive: l = !1, trailing: g = !0 } = c, p = [];
+    const { delimiter: y = n, end: p = !0, sensitive: l = !1, trailing: g = !0 } = c, d = [];
     let P = "", w = 0;
     function I(U) {
       if (Array.isArray(U)) {
@@ -211,27 +211,27 @@ function Re() {
       D(S.tokens, 0, [], (H) => {
         if (w >= 256)
           throw new E("Too many path combinations", S.originalPath);
-        w > 0 && (P += "|"), P += F(H, h, p, S.originalPath), w++;
+        w > 0 && (P += "|"), P += q(H, y, d, S.originalPath), w++;
       });
     }
     I(o);
     let b = `^(?:${P})`;
-    return g && (b += "(?:" + s(h) + "$)?"), b += d ? "$" : "(?=" + s(h) + "|$)", { regexp: new RegExp(b, l ? "" : "i"), keys: p };
+    return g && (b += "(?:" + s(y) + "$)?"), b += p ? "$" : "(?=" + s(y) + "|$)", { regexp: new RegExp(b, l ? "" : "i"), keys: d };
   }
-  function D(o, c, h, d) {
+  function D(o, c, y, p) {
     for (; c < o.length; ) {
       const l = o[c++];
       if (l.type === "group") {
-        const g = h.length;
-        D(l.tokens, 0, h, (p) => D(o, c, p, d)), h.length = g;
+        const g = y.length;
+        D(l.tokens, 0, y, (d) => D(o, c, d, p)), y.length = g;
         continue;
       }
-      h.push(l);
+      y.push(l);
     }
-    d(h);
+    p(y);
   }
-  function F(o, c, h, d) {
-    let l = "", g = "", p = "", P = 0, w = 0, I = 0;
+  function q(o, c, y, p) {
+    let l = "", g = "", d = "", P = 0, w = 0, I = 0;
     function b(S, H) {
       for (; S < o.length; ) {
         const _ = o[S++];
@@ -255,13 +255,13 @@ function Re() {
     for (; I < o.length; ) {
       const S = o[I++];
       if (S.type === "text") {
-        l += s(S.value), g += S.value, P === 2 && (p += S.value), S.value.includes(c) && (w = 0);
+        l += s(S.value), g += S.value, P === 2 && (d += S.value), S.value.includes(c) && (w = 0);
         continue;
       }
       if (S.type === "param" || S.type === "wildcard") {
         if (P && !g)
-          throw new E(`Missing text before "${S.name}" ${S.type}`, d);
-        S.type === "param" ? (l += w & 2 ? `(${M(c, g)}+)` : b(I, "wildcard") ? `(${M(c, U(I))}+)` : w & 1 ? `(${M(c, g)}+|${s(g)})` : `(${M(c, "")}+)`, w |= P = 1) : (l += w & 2 ? `(${M(g, "")}+)` : p ? `(${M(p, "")}+|${M(c, "")}+)` : "([^]+)", p = "", w |= P = 2), h.push(S), g = "";
+          throw new E(`Missing text before "${S.name}" ${S.type}`, p);
+        S.type === "param" ? (l += w & 2 ? `(${M(c, g)}+)` : b(I, "wildcard") ? `(${M(c, U(I))}+)` : w & 1 ? `(${M(c, g)}+|${s(g)})` : `(${M(c, "")}+)`, w |= P = 1) : (l += w & 2 ? `(${M(g, "")}+)` : d ? `(${M(d, "")}+|${M(c, "")}+)` : "([^]+)", d = "", w |= P = 2), y.push(S), g = "";
         continue;
       }
       throw new TypeError(`Unknown token type: ${S.type}`);
@@ -272,30 +272,30 @@ function Re() {
     return c.length > o.length ? M(c, o) : (o === c && (c = ""), c.length > 1 ? `(?:(?!${s(o)}|${s(c)})[^])` : o.length > 1 ? `(?:(?!${s(o)})[^${s(c)}])` : `[^${s(o + c)}]`);
   }
   function Y(o, c) {
-    let h = "";
+    let y = "";
     for (; c < o.length; ) {
-      const d = o[c++];
-      if (d.type === "text") {
-        h += i(d.value);
+      const p = o[c++];
+      if (p.type === "text") {
+        y += i(p.value);
         continue;
       }
-      if (d.type === "group") {
-        h += "{" + Y(d.tokens, 0) + "}";
+      if (p.type === "group") {
+        y += "{" + Y(p.tokens, 0) + "}";
         continue;
       }
-      if (d.type === "param") {
-        h += ":" + B(d.name, o[c]);
+      if (p.type === "param") {
+        y += ":" + B(p.name, o[c]);
         continue;
       }
-      if (d.type === "wildcard") {
-        h += "*" + B(d.name, o[c]);
+      if (p.type === "wildcard") {
+        y += "*" + B(p.name, o[c]);
         continue;
       }
-      throw new TypeError(`Unknown token type: ${d.type}`);
+      throw new TypeError(`Unknown token type: ${p.type}`);
     }
-    return h;
+    return y;
   }
-  function ht(o) {
+  function gt(o) {
     return Y(o.tokens, 0);
   }
   function B(o, c) {
@@ -317,7 +317,7 @@ const ne = Gt({
   layoutId: null,
   routePath: ""
 });
-function mt() {
+function ht() {
   return Yt(ne);
 }
 const re = Gt({}), oe = Gt(() => {
@@ -326,8 +326,8 @@ function De(n, e) {
   return e.type === "SET" ? e.params : n;
 }
 function Le({ children: n }) {
-  const { isActive: e, params: r } = mt(), [a, u] = me(De, r);
-  return lt(() => {
+  const { isActive: e, params: r } = ht(), [a, u] = me(De, r);
+  return dt(() => {
     const i = async (s) => {
       s.state?.step && await G.addTask(async () => {
         u({ type: "SET", params: s.state?.params || {} });
@@ -372,17 +372,17 @@ function Ne({ children: n }) {
 }
 const Kt = "data-flemo", Wt = () => {
   if (Mt()) return;
-  const n = Se(it.values(), ft.values());
+  const n = Se(ct.values(), yt.values());
   let e = document.head.querySelector(`style[${Kt}]`);
   e || (e = document.createElement("style"), e.setAttribute(Kt, ""), document.head.appendChild(e)), e.textContent !== n && (e.textContent = n);
 };
 function $e(n, e) {
-  he(() => {
-    for (const r of n) it.set(r.name, r);
-    for (const r of e) ft.set(r.name, r);
+  ye(() => {
+    for (const r of n) ct.set(r.name, r);
+    for (const r of e) yt.set(r.name, r);
     return Wt(), () => {
-      for (const r of n) it.delete(r.name);
-      for (const r of e) ft.delete(r.name);
+      for (const r of n) ct.delete(r.name);
+      for (const r of e) yt.delete(r.name);
       Wt();
     };
   }, [n, e]);
@@ -413,7 +413,7 @@ function Fe({
         layoutId: null
       }
     ]
-  }), $e(a, u), lt(() => {
+  }), $e(a, u), dt(() => {
     window.history.state?.index || window.history.replaceState(
       {
         id: "root",
@@ -436,24 +436,24 @@ function qe({ element: n }) {
 }
 function It(n, e) {
   const r = e ?? {}, a = Bt.compile(n), u = Object.fromEntries(
-    Object.entries(r).map(([y, R]) => [y, String(R)])
-  ), i = a(u), T = (typeof n == "string" ? Bt.parse(n) : n).tokens.filter((y) => y.type === "param").map((y) => y.name), E = Object.fromEntries(
-    Object.entries(r).filter(([y]) => !T.includes(y))
+    Object.entries(r).map(([h, R]) => [h, String(R)])
+  ), i = a(u), T = (typeof n == "string" ? Bt.parse(n) : n).tokens.filter((h) => h.type === "param").map((h) => h.name), E = Object.fromEntries(
+    Object.entries(r).filter(([h]) => !T.includes(h))
   ), m = new URLSearchParams(E).toString();
   return { pathname: `${i}${m ? `?${m}` : ""}`, toPathname: i };
 }
 function ze() {
   return {
     push: async (a, u, i) => {
-      const { status: s } = K.getState();
+      const { status: s } = W.getState();
       if (s !== "COMPLETED" && s !== "IDLE")
         return;
-      const { index: T, addHistory: E } = O.getState(), m = Ot.getState().defaultTransitionName, { transitionName: x = m, layoutId: y = null } = i ?? {}, R = G.generateTaskId();
+      const { index: T, addHistory: E } = O.getState(), m = Ot.getState().defaultTransitionName, { transitionName: x = m, layoutId: h = null } = i ?? {}, R = G.generateTaskId();
       (await G.addTask(
         async () => {
-          const { setStatus: $, setTransitionTaskId: C } = K.getState();
+          const { setStatus: $, setTransitionTaskId: C } = W.getState();
           $("PUSHING"), C(R);
-          const { pathname: D, toPathname: F } = It(a, u ?? {});
+          const { pathname: D, toPathname: q } = It(a, u ?? {});
           return window.history.pushState(
             {
               id: R,
@@ -461,16 +461,16 @@ function ze() {
               status: "PUSHING",
               params: u,
               transitionName: x,
-              layoutId: y
+              layoutId: h
             },
             "",
             D
           ), E({
             id: R,
-            pathname: F,
+            pathname: q,
             params: u ?? {},
             transitionName: x,
-            layoutId: y
+            layoutId: h
           }), () => {
             $("COMPLETED");
           };
@@ -484,31 +484,31 @@ function ze() {
       )).result?.();
     },
     replace: async (a, u, i) => {
-      const { status: s } = K.getState();
+      const { status: s } = W.getState();
       if (s !== "COMPLETED" && s !== "IDLE")
         return;
-      const { index: T, addHistory: E } = O.getState(), m = O.getState().replaceHistory, x = Ot.getState().defaultTransitionName, { transitionName: y = x, layoutId: R = null } = i ?? {}, $ = G.generateTaskId();
+      const { index: T, addHistory: E } = O.getState(), m = O.getState().replaceHistory, x = Ot.getState().defaultTransitionName, { transitionName: h = x, layoutId: R = null } = i ?? {}, $ = G.generateTaskId();
       (await G.addTask(
         async () => {
-          const { setStatus: C, setTransitionTaskId: D } = K.getState();
+          const { setStatus: C, setTransitionTaskId: D } = W.getState();
           C("REPLACING"), D($);
-          const { pathname: F, toPathname: M } = It(a, u ?? {});
+          const { pathname: q, toPathname: M } = It(a, u ?? {});
           return window.history.replaceState(
             {
               id: $,
               index: T,
               status: "REPLACING",
               params: u,
-              transitionName: y,
+              transitionName: h,
               layoutId: R
             },
             "",
-            F
+            q
           ), E({
             id: $,
             pathname: M,
             params: u ?? {},
-            transitionName: y,
+            transitionName: h,
             layoutId: R
           }), async () => {
             m(T), C("COMPLETED");
@@ -531,7 +531,7 @@ function ze() {
             u.abort();
             return;
           }
-          const { setStatus: T, setTransitionTaskId: E } = K.getState();
+          const { setStatus: T, setTransitionTaskId: E } = W.getState();
           return T("POPPING"), E(a), ee(), window.history.back(), async () => {
             s(i), T("COMPLETED");
           };
@@ -547,7 +547,7 @@ function ze() {
   };
 }
 function Ke() {
-  const { routePath: n } = mt(), e = Yt(oe);
+  const { routePath: n } = ht(), e = Yt(oe);
   return {
     pushStep: async (i) => {
       (await G.addTask(async () => {
@@ -610,8 +610,8 @@ function Ke() {
             e({ type: "SET", params: m.params ?? {} }), s.abort();
             return;
           }
-          const { setStatus: x, setTransitionTaskId: y } = K.getState(), { index: R, popHistory: $ } = O.getState();
-          return x("POPPING"), y(i), async () => {
+          const { setStatus: x, setTransitionTaskId: h } = W.getState(), { index: R, popHistory: $ } = O.getState();
+          return x("POPPING"), h(i), async () => {
             $(R), x("COMPLETED");
           };
         },
@@ -641,9 +641,9 @@ function Ce({ freeze: n, children: e }) {
   );
 }
 function He({ ref: n, style: e, ...r }) {
-  const { isActive: a, transitionName: u } = mt(), i = L(null);
-  ye(n, () => i.current);
-  const s = K((x) => x.status), T = it.get(u) ?? it.get("none"), { decoratorName: E } = T, m = ft.get(E);
+  const { isActive: a, transitionName: u } = ht(), i = L(null);
+  he(n, () => i.current);
+  const s = W((x) => x.status), T = ct.get(u) ?? ct.get("none"), { decoratorName: E } = T, m = yt.get(E);
   return m ? /* @__PURE__ */ N(
     "div",
     {
@@ -669,10 +669,10 @@ function He({ ref: n, style: e, ...r }) {
 const Jt = (n) => {
   let e;
   const r = /* @__PURE__ */ new Set(), a = (m, x) => {
-    const y = typeof m == "function" ? m(e) : m;
-    if (!Object.is(y, e)) {
+    const h = typeof m == "function" ? m(e) : m;
+    if (!Object.is(h, e)) {
       const R = e;
-      e = x ?? (typeof y != "object" || y === null) ? y : Object.assign({}, e, y), r.forEach(($) => $(e, R));
+      e = x ?? (typeof h != "object" || h === null) ? h : Object.assign({}, e, h), r.forEach(($) => $(e, R));
     }
   }, u = () => e, T = { setState: a, getState: u, getInitialState: () => E, subscribe: (m) => (r.add(m), () => r.delete(m)) }, E = e = n(a, u, T);
   return T;
@@ -703,7 +703,7 @@ const Qt = (n) => {
 let Ct = 0;
 function Ge() {
   const [n, e] = bt(0), [r, a] = bt(0);
-  return lt(() => {
+  return dt(() => {
     let u = 0;
     const i = () => {
       cancelAnimationFrame(u), u = requestAnimationFrame(() => {
@@ -721,7 +721,7 @@ function Ge() {
 const Ye = (n) => typeof HTMLElement < "u" && n instanceof HTMLElement, Ut = /* @__PURE__ */ new WeakMap(), Zt = (n, e) => {
   let r = Ut.get(n);
   r || (r = /* @__PURE__ */ new Set(), Ut.set(n, r)), r.add(e);
-}, J = (n, e) => {
+}, F = (n, e) => {
   n.style.transition = "";
   const r = Ut.get(n);
   if (r && r.size > 0) {
@@ -731,7 +731,7 @@ const Ye = (n) => typeof HTMLElement < "u" && n instanceof HTMLElement, Ut = /*
     return;
   }
   n.style.removeProperty("transform"), n.style.removeProperty("opacity");
-}, ct = (n, e, r = {}) => {
+}, lt = (n, e, r = {}) => {
   if (!Ye(n)) return Promise.resolve();
   const a = n, u = Te(e);
   if (u.length === 0) return Promise.resolve();
@@ -748,14 +748,14 @@ const Ye = (n) => typeof HTMLElement < "u" && n instanceof HTMLElement, Ut = /*
     a.style.setProperty(m.property, m.value), Zt(a, m.property);
   return new Promise((m) => {
     let x = !1;
-    const y = () => {
+    const h = () => {
       x || (x = !0, a.removeEventListener("transitionend", R), m());
     }, R = ($) => {
-      $.target === a && y();
+      $.target === a && h();
     };
-    a.addEventListener("transitionend", R), setTimeout(y, (i + s) * 1e3 + 60);
+    a.addEventListener("transitionend", R), setTimeout(h, (i + s) * 1e3 + 60);
   });
-}, ut = K, pt = "data-flemo-skip-animation";
+}, pt = W, mt = "data-flemo-skip-animation";
 function Ve({
   children: n,
   statusBarHeight: e,
@@ -768,18 +768,18 @@ function Ve({
   navigationBar: E,
   hideStatusBar: m,
   hideSystemNavigationBar: x,
-  backgroundColor: y = "white",
+  backgroundColor: h = "white",
   contentScrollable: R = !0,
   ...$
 }) {
-  const { id: C, isActive: D, isRoot: F, zIndex: M, transitionName: Y, prevTransitionName: ht } = mt(), B = ut((t) => t.status), o = Q((t) => t.dragStatus), c = Q.getState().setDragStatus, h = Q.getState().setReplaceTransitionStatus, d = O((t) => t.index), l = it.get(Y) ?? it.get("none"), { initial: g, swipeDirection: p, decoratorName: P } = l, w = ft.get(P), { viewportScrollHeight: I } = Ge(), b = I > 0, [U, S] = bt(0), [H, _] = bt(0), Vt = L(null), V = L(null), Z = L(null), q = L(null), st = L(null), W = L({
+  const { id: C, isActive: D, isRoot: q, zIndex: M, transitionName: Y, prevTransitionName: gt } = ht(), B = pt((t) => t.status), o = Q((t) => t.dragStatus), c = Q.getState().setDragStatus, y = Q.getState().setReplaceTransitionStatus, p = O((t) => t.index), l = ct.get(Y) ?? ct.get("none"), { initial: g, swipeDirection: d, decoratorName: P } = l, w = yt.get(P), { viewportScrollHeight: I } = Ge(), b = I > 0, [U, S] = bt(0), [H, _] = bt(0), Vt = L(null), V = L(null), Z = L(null), z = L(null), ut = L(null), J = L({
     current: [],
     prev: []
-  }), tt = L(!1), dt = L(!1), rt = L(!1), ae = L(0), Rt = L({ x: 0, y: 0 }), yt = L({ x: 0, y: 0 }), Dt = L(0), Lt = L({ x: 0, y: 0 }), et = L({
+  }), tt = L(!1), ft = L(!1), rt = L(!1), ae = L(0), Rt = L({ x: 0, y: 0 }), wt = L({ x: 0, y: 0 }), Dt = L(0), Lt = L({ x: 0, y: 0 }), et = L({
     element: null,
     hasMarker: !1
-  }), ot = L({ element: null, hasMarker: !1 }), Nt = L(0), $t = L(0), gt = L(null), wt = L(null), At = (t) => {
-    const f = yt.current;
+  }), ot = L({ element: null, hasMarker: !1 }), Nt = L(0), $t = L(0), at = L(null), it = L(null), At = (t) => {
+    const f = wt.current;
     return {
       point: { x: t.clientX, y: t.clientY },
       offset: {
@@ -790,67 +790,67 @@ function Ve({
       velocity: Lt.current
     };
   }, ie = (t) => {
-    const f = t.timeStamp, v = Math.max(1, f - Dt.current), k = yt.current;
+    const f = t.timeStamp, v = Math.max(1, f - Dt.current), k = wt.current;
     Lt.current = {
       x: (t.clientX - k.x) / v * 1e3,
       y: (t.clientY - k.y) / v * 1e3
-    }, yt.current = { x: t.clientX, y: t.clientY }, Dt.current = f;
+    }, wt.current = { x: t.clientX, y: t.clientY }, Dt.current = f;
   }, kt = (t, f, v) => {
-    const k = ct(t, f, v);
+    const k = lt(t, f, v);
     if (t === V.current)
-      for (const A of W.current.current)
-        ct(A, f, v);
+      for (const A of J.current.current)
+        lt(A, f, v);
     else if (t === Z.current)
-      for (const A of W.current.prev)
-        ct(A, f, v);
+      for (const A of J.current.prev)
+        lt(A, f, v);
     return k;
   }, se = (t) => {
-    const f = D ? O.getState().histories[d - 1]?.id : O.getState().histories[d]?.id, v = f ? Q.getState().sharedBars[f] : void 0, k = [], A = gt.current, at = wt.current;
-    A && vt && !v?.appBar && k.push(A), at && Tt && !v?.navigationBar && k.push(at);
+    const f = D ? O.getState().histories[p - 1]?.id : O.getState().histories[p]?.id, v = f ? Q.getState().sharedBars[f] : void 0, k = [], A = at.current, st = it.current;
+    A && vt && !v?.appBar && k.push(A), st && Tt && !v?.navigationBar && k.push(st);
     const X = [];
     if (t) {
       const nt = t.querySelector('[data-flemo-bar="app"]'), Ft = t.querySelector('[data-flemo-bar="nav"]');
       nt && !vt && X.push(nt), Ft && !Tt && X.push(Ft);
     }
-    W.current = { current: k, prev: X };
+    J.current = { current: k, prev: X };
     const Et = be(l).join(", ");
     for (const nt of k) nt.style.willChange = Et;
     for (const nt of X) nt.style.willChange = Et;
   }, _t = () => {
-    for (const t of W.current.current)
-      J(t), t.style.removeProperty("will-change");
-    for (const t of W.current.prev)
-      J(t), t.style.removeProperty("will-change");
-    W.current = { current: [], prev: [] };
+    for (const t of J.current.current)
+      F(t), t.style.removeProperty("will-change");
+    for (const t of J.current.prev)
+      F(t), t.style.removeProperty("will-change");
+    J.current = { current: [], prev: [] };
   }, St = async (t) => {
-    if (!p || I > 10) return;
+    if (!d || I > 10) return;
     const f = V.current;
     if (!f) return;
     const v = Vt.current?.parentElement?.previousElementSibling;
-    if (Z.current = v?.querySelector("[data-flemo-screen]") ?? null, st.current = v?.querySelector("[data-flemo-decorator]") ?? null, !Z.current) return;
-    rt.current = !0, ae.current = t.timeStamp, Rt.current = { x: t.clientX, y: t.clientY }, yt.current = { x: t.clientX, y: t.clientY }, Dt.current = t.timeStamp, Lt.current = { x: 0, y: 0 }, f.setPointerCapture(t.pointerId), se(v), await l?.onSwipeStart(t, At(t), {
+    if (Z.current = v?.querySelector("[data-flemo-screen]") ?? null, ut.current = v?.querySelector("[data-flemo-decorator]") ?? null, !Z.current) return;
+    rt.current = !0, ae.current = t.timeStamp, Rt.current = { x: t.clientX, y: t.clientY }, wt.current = { x: t.clientX, y: t.clientY }, Dt.current = t.timeStamp, Lt.current = { x: 0, y: 0 }, f.setPointerCapture(t.pointerId), se(v), await l?.onSwipeStart(t, At(t), {
       animate: kt,
       currentScreen: f,
       prevScreen: Z.current,
       onStart: (A) => w?.onSwipeStart?.(A, {
-        animate: ct,
-        currentDecorator: q.current,
-        prevDecorator: st.current
+        animate: lt,
+        currentDecorator: z.current,
+        prevDecorator: ut.current
       })
     }) ? c("PENDING") : (c("IDLE"), rt.current = !1, _t());
   }, ce = (t) => {
-    !p || !rt.current || I > 10 || (ie(t), l.onSwipe(t, At(t), {
+    !d || !rt.current || I > 10 || (ie(t), l.onSwipe(t, At(t), {
       animate: kt,
       currentScreen: V.current,
       prevScreen: Z.current,
       onProgress: (f, v) => w?.onSwipe?.(f, v, {
-        animate: ct,
-        currentDecorator: q.current,
-        prevDecorator: st.current
+        animate: lt,
+        currentDecorator: z.current,
+        prevDecorator: ut.current
       })
     }));
   }, ue = async (t) => {
-    if (!p || !rt.current) return;
+    if (!d || !rt.current) return;
     rt.current = !1;
     const f = V.current;
     f && f.hasPointerCapture(t.pointerId) && f.releasePointerCapture(t.pointerId);
@@ -860,21 +860,21 @@ function Ve({
       currentScreen: V.current,
       prevScreen: Z.current,
       onStart: (A) => w?.onSwipeEnd?.(A, {
-        animate: ct,
-        currentDecorator: q.current,
-        prevDecorator: st.current
+        animate: lt,
+        currentDecorator: z.current,
+        prevDecorator: ut.current
       })
     })) {
-      V.current?.setAttribute(pt, "true"), q.current?.setAttribute(pt, "true");
-      for (const A of W.current.current)
+      V.current?.setAttribute(mt, "true"), z.current?.setAttribute(mt, "true");
+      for (const A of J.current.current)
         A.style.removeProperty("will-change");
-      for (const A of W.current.prev)
-        J(A), A.style.removeProperty("will-change");
-      W.current = { current: [], prev: [] }, window.history.back();
+      for (const A of J.current.prev)
+        F(A), A.style.removeProperty("will-change");
+      J.current = { current: [], prev: [] }, window.history.back();
     } else
-      J(V.current), Z.current && J(Z.current), q.current && J(q.current), st.current && J(st.current), _t(), c("IDLE");
+      F(V.current), Z.current && F(Z.current), z.current && F(z.current), ut.current && F(ut.current), _t(), c("IDLE");
   }, le = (t) => {
-    if (!(!F && D && B === "COMPLETED" && o === "IDLE" && !!p && I < 10))
+    if (!(!q && D && B === "COMPLETED" && o === "IDLE" && !!d && I < 10))
       return;
     et.current = qt(t.target, {
       direction: "x",
@@ -883,7 +883,7 @@ function Ve({
       direction: "y",
       verifyByScroll: !0
     }), Nt.current = t.clientX, $t.current = t.clientY, (!et.current.element && !ot.current.element || et.current.element || ot.current.element) && (tt.current = !0);
-  }, de = (t) => {
+  }, pe = (t) => {
     if (I > 10)
       return;
     if (rt.current) {
@@ -892,49 +892,49 @@ function Ve({
     }
     const f = !et.current.element && !ot.current.element;
     if (tt.current && f) {
-      tt.current = !1, dt.current = !0;
+      tt.current = !1, ft.current = !0;
       const v = t.clientY - $t.current, k = t.clientX - Nt.current;
-      (p === "y" && v > 0 || p === "x" && k > 0) && St(t.nativeEvent);
+      (d === "y" && v > 0 || d === "x" && k > 0) && St(t.nativeEvent);
     } else if (tt.current && !f) {
-      const v = t.clientX - Nt.current, k = t.clientY - $t.current, A = ot.current.element && ot.current.element.scrollTop <= 0, at = et.current.element && et.current.element.scrollLeft <= 0 && et.current.hasMarker;
-      (p === "y" && (A || et.current.element) && k > 0 && Math.abs(v) < 2 || p === "x" && (at || ot.current.element) && v > 0 && Math.abs(k) < 2) && (tt.current = !1, dt.current = !0, St(t.nativeEvent));
+      const v = t.clientX - Nt.current, k = t.clientY - $t.current, A = ot.current.element && ot.current.element.scrollTop <= 0, st = et.current.element && et.current.element.scrollLeft <= 0 && et.current.hasMarker;
+      (d === "y" && (A || et.current.element) && k > 0 && Math.abs(v) < 2 || d === "x" && (st || ot.current.element) && v > 0 && Math.abs(k) < 2) && (tt.current = !1, ft.current = !0, St(t.nativeEvent));
     }
   }, jt = (t) => {
-    tt.current = !1, dt.current = !1, rt.current && ue(t.nativeEvent);
+    tt.current = !1, ft.current = !1, rt.current && ue(t.nativeEvent);
   };
-  lt(() => {
+  dt(() => {
     const t = V.current;
     if (!t) return;
     const f = (v) => {
-      dt.current && v.preventDefault(), v.target?.dataset.swipeAtEdgeBar === "true" && v.preventDefault();
+      ft.current && v.preventDefault(), v.target?.dataset.swipeAtEdgeBar === "true" && v.preventDefault();
     };
     return t.addEventListener("touchmove", f, {
       passive: !1
     }), () => {
       t.removeEventListener("touchmove", f);
     };
-  }, []), lt(() => {
+  }, []), dt(() => {
     if (!D) {
-      B === "REPLACING" && ht !== Y && h("PENDING");
+      B === "REPLACING" && gt !== Y && y("PENDING");
       return;
     }
     if (B === "COMPLETED") {
-      c("IDLE"), h("IDLE"), V.current && (J(V.current), V.current.removeAttribute(pt)), q.current && (J(q.current), q.current.removeAttribute(pt));
+      c("IDLE"), y("IDLE"), V.current && (F(V.current), V.current.removeAttribute(mt)), z.current && (F(z.current), z.current.removeAttribute(mt)), at.current && (F(at.current), at.current.style.removeProperty("will-change")), it.current && (F(it.current), it.current.style.removeProperty("will-change"));
       return;
     }
     if (B === "IDLE") return;
     const t = V.current;
     if (!t) return;
     const f = () => {
-      const z = ut.getState().transitionTaskId;
-      z && G.resolveTask(z);
+      const K = pt.getState().transitionTaskId;
+      K && G.resolveTask(K);
     }, v = `${B}-true`;
-    if (!(!(t.getAttribute(pt) === "true") && Pe(l, v))) {
+    if (!(!(t.getAttribute(mt) === "true") && Pe(l, v))) {
       queueMicrotask(f);
       return;
     }
-    const at = xe("screen", Y, v), X = (z) => {
-      z.target === t && z.animationName === at && (t.removeEventListener("animationend", X), f());
+    const st = xe("screen", Y, v), X = (K) => {
+      K.target === t && K.animationName === st && (t.removeEventListener("animationend", X), f());
     };
     return t.addEventListener("animationend", X), () => {
       t.removeEventListener("animationend", X);
@@ -943,13 +943,13 @@ function Ve({
     B,
     D,
     C,
-    ht,
+    gt,
     Y,
     l,
     c,
-    h
+    y
   ]), xt(() => {
-    const t = gt.current;
+    const t = at.current;
     if (!t) {
       S(0);
       return;
@@ -962,7 +962,7 @@ function Ve({
       f.disconnect();
     };
   }, [i]), xt(() => {
-    const t = wt.current;
+    const t = it.current;
     if (!t) {
       _(0);
       return;
@@ -981,25 +981,25 @@ function Ve({
       navigationBar: !!s
     }), () => f(C);
   }, [C, i, s]);
-  const Xt = D || M === d - 1, vt = !!i, Tt = !!s;
+  const Xt = D || M === p - 1, vt = !!i, Tt = !!s;
   xt(() => {
-    const t = gt.current, f = wt.current;
+    const t = at.current, f = it.current;
     if (!t && !f) return;
     const v = () => {
-      if (!(ut.getState().status === "PUSHING" || ut.getState().status === "POPPING" || ut.getState().status === "REPLACING") || !Xt) {
+      if (!(pt.getState().status === "PUSHING" || pt.getState().status === "POPPING" || pt.getState().status === "REPLACING") || !Xt) {
         t?.removeAttribute("data-flemo-bar-riding"), f?.removeAttribute("data-flemo-bar-riding");
         return;
       }
-      const X = D ? O.getState().histories[d - 1]?.id : O.getState().histories[d]?.id, z = X ? Q.getState().sharedBars[X] : void 0, Et = vt && !z?.appBar, nt = Tt && !z?.navigationBar;
+      const X = D ? O.getState().histories[p - 1]?.id : O.getState().histories[p]?.id, K = X ? Q.getState().sharedBars[X] : void 0, Et = vt && !K?.appBar, nt = Tt && !K?.navigationBar;
       t && t.setAttribute("data-flemo-bar-riding", Et ? "true" : "false"), f && f.setAttribute("data-flemo-bar-riding", nt ? "true" : "false");
     };
     v();
-    const k = Q.subscribe(v), A = ut.subscribe(v);
+    const k = Q.subscribe(v), A = pt.subscribe(v);
     return () => {
       k(), A(), t?.removeAttribute("data-flemo-bar-riding"), f?.removeAttribute("data-flemo-bar-riding");
     };
-  }, [Xt, D, d, vt, Tt]);
-  const pe = (() => {
+  }, [Xt, D, p, vt, Tt]);
+  const de = (() => {
     if (!D) return {};
     if (B !== "PUSHING" && B !== "REPLACING") return {};
     const t = {};
@@ -1046,7 +1046,7 @@ function Ve({
             ref: V,
             ...$,
             onPointerDown: le,
-            onPointerMove: de,
+            onPointerMove: pe,
             onPointerUp: jt,
             onPointerCancel: jt,
             "data-flemo-screen": !0,
@@ -1057,10 +1057,10 @@ function Ve({
               display: "flex",
               flexDirection: "column",
               height: "100%",
-              backgroundColor: y,
+              backgroundColor: h,
               overflowY: R ? void 0 : "auto",
-              touchAction: p === "x" ? "pan-y" : p === "y" ? "pan-x" : "auto",
-              ...pe,
+              touchAction: d === "x" ? "pan-y" : d === "y" ? "pan-x" : "auto",
+              ...de,
               ...$.style
             },
             children: [
@@ -1136,7 +1136,7 @@ function Ve({
         i && /* @__PURE__ */ N(
           "div",
           {
-            ref: gt,
+            ref: at,
             "data-flemo-bar": "app",
             "data-flemo-bar-transition": Y,
             "data-flemo-bar-status": B,
@@ -1154,7 +1154,7 @@ function Ve({
         s && /* @__PURE__ */ N(
           "div",
           {
-            ref: wt,
+            ref: it,
             "data-flemo-bar": "nav",
             "data-flemo-bar-transition": Y,
             "data-flemo-bar-status": B,
@@ -1170,7 +1170,7 @@ function Ve({
             children: s
           }
         ),
-        w && /* @__PURE__ */ N(He, { ref: q }),
+        w && /* @__PURE__ */ N(He, { ref: z }),
         /* @__PURE__ */ N(
           "div",
           {
@@ -1190,7 +1190,7 @@ function Ve({
   );
 }
 function Je({ children: n, ...e }) {
-  const { isActive: r, isPrev: a, zIndex: u } = mt(), i = O((y) => y.index), s = K((y) => y.status), T = Q((y) => y.dragStatus), E = Q((y) => y.replaceTransitionStatus), x = !r && (s === "COMPLETED" && T === "IDLE") || a && i - 2 <= u && E === "IDLE" || a && i - 2 > u;
+  const { isActive: r, isPrev: a, zIndex: u } = ht(), i = O((h) => h.index), s = W((h) => h.status), T = Q((h) => h.dragStatus), E = Q((h) => h.replaceTransitionStatus), x = !r && (s === "COMPLETED" && T === "IDLE") || a && i - 2 <= u && E === "IDLE" || a && i - 2 > u;
   return /* @__PURE__ */ N(Ce, { freeze: x, children: /* @__PURE__ */ N(Ve, { ...e, children: n }) });
 }
 export {
@@ -1207,7 +1207,7 @@ export {
   rn as createTransition,
   ze as useNavigate,
   We as useParams,
-  mt as useScreen,
+  ht as useScreen,
   Q as useScreenStore,
   Ke as useStep,
   Ge as useViewportScrollHeight

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flemo/react",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "React bindings for flemo — Router, Route, Screen, and the screen-transition runtime.",
   "main": "./dist/index.mjs",
   "module": "./dist/index.mjs",
@@ -31,12 +31,12 @@
     "url": "https://github.com/kimjh96/flemo/issues",
     "email": "kimjhs@kakao.com"
   },
-  "homepage": "https://flemo-web.vercel.app",
+  "homepage": "https://flemo.dev",
   "license": "MIT",
   "dependencies": {
     "path-to-regexp": "^8.2.0",
     "zustand": "^5.0.11",
-    "@flemo/core": "1.0.1"
+    "@flemo/core": "1.0.2"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",
@@ -45,6 +45,7 @@
     "@types/react": "^19.2.0",
     "@types/react-dom": "^19.2.0",
     "@vitejs/plugin-react-swc": "^4.0.1",
+    "@vitest/coverage-v8": "^2.1.8",
     "eslint": "^9.33.0",
     "jsdom": "^25.0.1",
     "react": "^19.2.0",
@@ -70,6 +71,7 @@
     "lint": "eslint \"**/*.{js,mjs,ts,jsx,tsx,mts}\"",
     "typecheck": "tsc --noEmit",
     "test": "vitest run",
+    "test:coverage": "vitest run --coverage",
     "test:watch": "vitest",
     "clean": "rm -rf dist .turbo"
   }