@flemo/react 1.5.5 → 1.5.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/dist/index.mjs +213 -208
  2. package/package.json +2 -2
package/dist/index.mjs CHANGED
@@ -1,21 +1,21 @@
1
1
  import e, { Activity as t, Children as n, createContext as r, isValidElement as i, useContext as a, useEffect as o, useId as s, useImperativeHandle as c, useInsertionEffect as l, useLayoutEffect as u, useReducer as d, useRef as f, useState as p } from "react";
2
- import { animHoldKey as ee, appendParamsQuery as m, buildRoutePath as h, computeBarRiding as g, computeScreenFreeze as _, consumeSelfInducedPop as v, createBrowserHistoryDriver as y, createBrowserHistoryDriver as b, createDecorator as x, createHistoryStore as S, createHistorySync as C, createNavigateStore as w, createNavigationController as T, createPartTransition as E, createRawDecorator as D, createRawPartTransition as O, createRawTransition as k, createRouterScope as te, createScreenSelector as ne, createScreenStore as A, createStepController as j, createSwipeController as re, createTransition as M, createTransitionEngine as ie, createTransitionStore as ae, decoratorMap as oe, eagerlyDecodeImages as se, ensureWindowHistoryState as ce, enteringInitialStyle as le, getMatchedPathPattern as ue, isOpaqueColor as de, isServer as N, markSelfInducedPop as fe, matchesPathname as pe, observeBarHeight as me, observeViewportScrollHeight as he, partTransitionMap as ge, readStepParams as P, registerTransitionDefinitions as F, resolveTransition as _e, scheduleAnimHoldRelease as ve, subscribeStepParamsRestore as I } from "@flemo/core";
3
- import { jsx as L, jsxs as ye } from "react/jsx-runtime";
4
- import { createPortal as be } from "react-dom";
2
+ import { animHoldKey as ee, appendParamsQuery as m, buildRoutePath as h, computeBarRiding as g, computeScreenFreeze as _, consumeSelfInducedPop as v, createBrowserHistoryDriver as y, createBrowserHistoryDriver as b, createDecorator as x, createHistoryStore as te, createHistorySync as S, createNavigateStore as C, createNavigationController as w, createPartTransition as T, createRawDecorator as E, createRawPartTransition as D, createRawTransition as O, createRouterScope as ne, createScreenSelector as k, createScreenStore as A, createStepController as j, createSwipeController as M, createTransition as N, createTransitionEngine as re, createTransitionStore as ie, decoratorMap as ae, eagerlyDecodeImages as oe, ensureWindowHistoryState as se, enteringInitialStyle as ce, getMatchedPathPattern as le, isOpaqueColor as ue, isServer as de, markSelfInducedPop as P, matchesPathname as fe, observeBarHeight as pe, observeViewportScrollHeight as me, partTransitionMap as he, readStepParams as F, registerTransitionDefinitions as I, resolveTransition as ge, scheduleAnimHoldRelease as _e, subscribeStepParamsRestore as L } from "@flemo/core";
3
+ import { jsx as R, jsxs as ve } from "react/jsx-runtime";
4
+ import { createPortal as ye } from "react-dom";
5
5
  //#region src/stores/StoreContext.ts
6
- var R = r(null);
6
+ var z = r(null);
7
7
  //#endregion
8
8
  //#region src/stores/useStores.ts
9
- function z() {
10
- let e = a(R);
9
+ function B() {
10
+ let e = a(z);
11
11
  if (!e) throw Error("flemo stores are missing. Render inside a <Router>.");
12
12
  return e;
13
13
  }
14
14
  //#endregion
15
15
  //#region src/history/HistoryListener.tsx
16
- function xe() {
17
- let e = z();
18
- return o(() => C({
16
+ function be() {
17
+ let e = B();
18
+ return o(() => S({
19
19
  stores: e,
20
20
  driver: e.driver,
21
21
  consume: e.consume
@@ -23,7 +23,7 @@ function xe() {
23
23
  }
24
24
  //#endregion
25
25
  //#region src/screen/ScreenContext.ts
26
- var B = r({
26
+ var V = r({
27
27
  id: "",
28
28
  isActive: !1,
29
29
  isRoot: !0,
@@ -38,15 +38,15 @@ var B = r({
38
38
  });
39
39
  //#endregion
40
40
  //#region src/screen/useScreen.ts
41
- function V() {
42
- return a(B);
41
+ function H() {
42
+ return a(V);
43
43
  }
44
44
  //#endregion
45
45
  //#region src/screen/ParamsProvider/ParamsContext.ts
46
- var Se = r({}), Ce = r(() => {});
46
+ var xe = r({}), Se = r(() => {});
47
47
  //#endregion
48
48
  //#region src/screen/ParamsProvider/ParamsReducer.ts
49
- function we(e, t) {
49
+ function Ce(e, t) {
50
50
  switch (t.type) {
51
51
  case "SET": return t.params;
52
52
  default: return e;
@@ -54,10 +54,10 @@ function we(e, t) {
54
54
  }
55
55
  //#endregion
56
56
  //#region src/screen/ParamsProvider/ParamsProvider.tsx
57
- function H({ children: e }) {
58
- let { isActive: t, params: n } = V(), { driver: r } = z(), [i, a] = d(we, n);
57
+ function U({ children: e }) {
58
+ let { isActive: t, params: n } = H(), { driver: r } = B(), [i, a] = d(Ce, n);
59
59
  return o(() => {
60
- if (t) return I(r, (e) => a({
60
+ if (t) return L(r, (e) => a({
61
61
  type: "SET",
62
62
  params: e
63
63
  }));
@@ -65,9 +65,9 @@ function H({ children: e }) {
65
65
  t,
66
66
  a,
67
67
  r
68
- ]), /* @__PURE__ */ L(Ce.Provider, {
68
+ ]), /* @__PURE__ */ R(Se.Provider, {
69
69
  value: a,
70
- children: /* @__PURE__ */ L(Se.Provider, {
70
+ children: /* @__PURE__ */ R(xe.Provider, {
71
71
  value: i,
72
72
  children: e
73
73
  })
@@ -75,41 +75,41 @@ function H({ children: e }) {
75
75
  }
76
76
  //#endregion
77
77
  //#region ../../node_modules/.pnpm/zustand@5.0.14_@types+react@19.2.17_react@19.2.7/node_modules/zustand/esm/react.mjs
78
- var U = (e) => e;
79
- function W(t, n = U) {
78
+ var W = (e) => e;
79
+ function G(t, n = W) {
80
80
  let r = e.useSyncExternalStore(t.subscribe, e.useCallback(() => n(t.getState()), [t, n]), e.useCallback(() => n(t.getInitialState()), [t, n]));
81
81
  return e.useDebugValue(r), r;
82
82
  }
83
83
  //#endregion
84
84
  //#region src/stores/useHistoryStore.ts
85
- function G(e) {
86
- return W(z().history, e);
85
+ function K(e) {
86
+ return G(B().history, e);
87
87
  }
88
88
  //#endregion
89
89
  //#region src/renderer/Renderer.tsx
90
- function K({ children: e }) {
91
- let t = G((e) => e.index);
92
- return ne(G((e) => e.histories), t).map((t) => {
93
- let [r] = n.toArray(e).filter((e) => pe(e.props.path, t.pathname));
94
- return /* @__PURE__ */ L(B.Provider, {
90
+ function q({ children: e }) {
91
+ let t = K((e) => e.index);
92
+ return k(K((e) => e.histories), t).map((t) => {
93
+ let [r] = n.toArray(e).filter((e) => fe(e.props.path, t.pathname));
94
+ return /* @__PURE__ */ R(V.Provider, {
95
95
  value: {
96
96
  ...t,
97
- routePath: ue(r.props.path, t.pathname)
97
+ routePath: le(r.props.path, t.pathname)
98
98
  },
99
- children: /* @__PURE__ */ L(H, { children: r })
99
+ children: /* @__PURE__ */ R(U, { children: r })
100
100
  }, t.id);
101
101
  });
102
102
  }
103
103
  //#endregion
104
104
  //#region src/screen/ScreenViewportContext.ts
105
- var q = r({ contained: !1 });
106
- function Te() {
107
- return a(q);
105
+ var J = r({ contained: !1 });
106
+ function we() {
107
+ return a(J);
108
108
  }
109
109
  //#endregion
110
110
  //#region src/transition/styles.ts
111
- function Ee(e, t, n = []) {
112
- l(() => F(e, t, n), [
111
+ function Te(e, t, n = []) {
112
+ l(() => I(e, t, n), [
113
113
  e,
114
114
  t,
115
115
  n
@@ -117,72 +117,76 @@ function Ee(e, t, n = []) {
117
117
  }
118
118
  //#endregion
119
119
  //#region src/RouterDepthContext.ts
120
- var J = r(0), De = { contained: !0 };
121
- function Oe({ children: e, className: t, style: n }) {
122
- return /* @__PURE__ */ L("div", {
120
+ var Y = r(0), Ee = { contained: !0 };
121
+ function De({ children: e, className: t, style: n }) {
122
+ return /* @__PURE__ */ R("div", {
123
123
  className: t,
124
124
  style: {
125
125
  position: "relative",
126
126
  overflow: "hidden",
127
127
  ...n
128
128
  },
129
- children: /* @__PURE__ */ L(q.Provider, {
130
- value: De,
131
- children: /* @__PURE__ */ L(K, { children: e })
129
+ children: /* @__PURE__ */ R(J.Provider, {
130
+ value: Ee,
131
+ children: /* @__PURE__ */ R(q, { children: e })
132
132
  })
133
133
  });
134
134
  }
135
135
  //#endregion
136
136
  //#region src/Router.tsx
137
- function Y(e) {
137
+ function Oe(e) {
138
138
  let t = null;
139
139
  return n.forEach(e, (e) => {
140
140
  if (t || !i(e)) return;
141
- if (e.type === Oe) {
141
+ if (e.type === De) {
142
142
  t = n.toArray(e.props.children).filter(i);
143
143
  return;
144
144
  }
145
145
  let r = e.props.children;
146
146
  if (r) {
147
- let e = Y(r);
147
+ let e = Oe(r);
148
148
  e && (t = e);
149
149
  }
150
150
  }), t;
151
151
  }
152
152
  var ke = [], Ae = [], je = [], X = { contained: !0 };
153
153
  function Me({ children: e, initPath: t = "/", defaultTransitionName: r = "cupertino", transitions: i = ke, decorators: c = Ae, partTransitions: l = je, history: u = "browser", createDriver: d, className: f, style: ee }) {
154
- let m = a(J), h = m > 0, g = u === "memory", _ = s(), v = Y(e), y = v !== null, x = a(R), S = h ? null : x, C = S !== null, w = d ?? b, [T] = p(() => g ? null : w(C ? void 0 : _)), E = !h && !g && !N(), D = E && T ? T.readPathname() : t || "/", O = D.indexOf("?"), k = (O >= 0 ? D.slice(0, O) : D) || "/", ne = E ? window.location.search : O >= 0 ? D.slice(O) : "", [A] = p(() => te({
155
- routePaths: (v ?? n.toArray(e)).map((e) => e.props.path).flat(),
156
- pathname: k,
157
- search: ne,
154
+ let m = a(Y), h = m > 0, g = u === "memory", _ = s(), v = a(V), y = h && v.id ? `_F_${v.id}_` : _, x = Oe(e), te = x !== null, S = a(z), C = h ? null : S, w = C !== null, T = d ?? b, [E] = p(() => g ? null : T(w ? void 0 : y)), D = !h && !g && !de(), O = D && E ? E.readPathname() : t || "/", k = O.indexOf("?"), A = (k >= 0 ? O.slice(0, k) : O) || "/", j = D ? window.location.search : k >= 0 ? O.slice(k) : "", [M] = p(() => ne({
155
+ routePaths: (x ?? n.toArray(e)).map((e) => e.props.path).flat(),
156
+ pathname: A,
157
+ search: j,
158
158
  defaultTransitionName: r,
159
159
  memory: g,
160
- browserDriver: T,
161
- hostedScope: S
160
+ browserDriver: E,
161
+ hostedScope: C
162
162
  }));
163
- A.transition.setState({ defaultTransitionName: r }), Ee(i, c, l), o(() => {
164
- g || N() || (ce(C ? null : _, r, A.history.getState().histories[0]?.params ?? {}), h && !C && T && T.readPathname() !== k && T.replaceState(T.readState(), k));
163
+ M.transition.setState({ defaultTransitionName: r }), o(() => (M.life.alive = !0, () => {
164
+ M.life.alive = !1;
165
+ }), [M]), Te(i, c, l), o(() => {
166
+ if (g || de()) return;
167
+ let e = h && !w && E ? E.readState() == null : !1;
168
+ se(w ? null : y, r, M.history.getState().histories[0]?.params ?? {}), h && !w && E && e && E.readPathname() !== A && E.replaceState(E.readState(), A);
165
169
  }, [
166
170
  g,
167
- C,
171
+ w,
168
172
  h,
169
- _,
170
- k,
173
+ y,
174
+ A,
171
175
  r,
172
- A.history,
173
- T
176
+ M.history,
177
+ E
174
178
  ]);
175
- let j = y ? e : /* @__PURE__ */ L(K, { children: e }), re = /* @__PURE__ */ L(J.Provider, {
179
+ let N = te ? e : /* @__PURE__ */ R(q, { children: e }), re = /* @__PURE__ */ R(Y.Provider, {
176
180
  value: m + 1,
177
- children: /* @__PURE__ */ ye(R.Provider, {
178
- value: A,
179
- children: [!g && /* @__PURE__ */ L(xe, {}), h ? /* @__PURE__ */ L(q.Provider, {
181
+ children: /* @__PURE__ */ ve(z.Provider, {
182
+ value: M,
183
+ children: [!g && /* @__PURE__ */ R(be, {}), h ? /* @__PURE__ */ R(J.Provider, {
180
184
  value: X,
181
- children: j
182
- }) : j]
185
+ children: N
186
+ }) : N]
183
187
  })
184
188
  });
185
- return h ? /* @__PURE__ */ L("div", {
189
+ return h ? /* @__PURE__ */ R("div", {
186
190
  className: f,
187
191
  style: {
188
192
  position: "relative",
@@ -204,7 +208,7 @@ var Pe = r(null);
204
208
  //#region src/screen/Layer.tsx
205
209
  function Fe({ children: e }) {
206
210
  let t = a(Pe);
207
- return t ? be(e, t) : e;
211
+ return t ? ye(e, t) : e;
208
212
  }
209
213
  //#endregion
210
214
  //#region src/utils/buildRoutePath.ts
@@ -214,7 +218,7 @@ function Z(e, t) {
214
218
  //#endregion
215
219
  //#region src/navigate/useNavigate.ts
216
220
  function Ie() {
217
- let e = z(), t = T({
221
+ let e = B(), t = w({
218
222
  stores: e,
219
223
  buildPathname: (e, t) => Z(e, t),
220
224
  driver: e.driver,
@@ -229,14 +233,14 @@ function Ie() {
229
233
  //#endregion
230
234
  //#region src/navigate/usePathname.ts
231
235
  function Le() {
232
- return G((e) => e.histories[e.pendingIndex]?.pathname ?? "/");
236
+ return K((e) => e.histories[e.pendingIndex]?.pathname ?? "/");
233
237
  }
234
238
  //#endregion
235
239
  //#region src/navigate/useStep.ts
236
240
  function Re() {
237
- let { routePath: e } = V(), t = z(), n = a(Ce), { driver: r, markSelfInduced: i } = t, [s, c] = p(null);
241
+ let { routePath: e } = H(), t = B(), n = a(Se), { driver: r, markSelfInduced: i } = t, [s, c] = p(null);
238
242
  o(() => {
239
- if (!e) return c(P(r.readState())), r.subscribe((e) => c(P(e.state)));
243
+ if (!e) return c(F(r.readState())), r.subscribe((e) => c(F(e.state)));
240
244
  }, [e, r]);
241
245
  let l = j({
242
246
  stores: t,
@@ -260,12 +264,12 @@ function Re() {
260
264
  //#endregion
261
265
  //#region src/screen/ParamsProvider/useParams.ts
262
266
  function ze() {
263
- return a(Se);
267
+ return a(xe);
264
268
  }
265
269
  //#endregion
266
270
  //#region src/screen/ScreenFreeze.tsx
267
271
  function Be({ freeze: e, children: n }) {
268
- return /* @__PURE__ */ L(t, {
272
+ return /* @__PURE__ */ R(t, {
269
273
  mode: e ? "hidden" : "visible",
270
274
  children: n
271
275
  });
@@ -273,15 +277,15 @@ function Be({ freeze: e, children: n }) {
273
277
  //#endregion
274
278
  //#region src/stores/useNavigateStore.ts
275
279
  function Q(e) {
276
- return W(z().navigate, e);
280
+ return G(B().navigate, e);
277
281
  }
278
282
  //#endregion
279
283
  //#region src/screen/ScreenDecorator.tsx
280
284
  function Ve({ ref: e, style: t, ...n }) {
281
- let { isActive: r, transitionName: i } = V(), a = f(null);
285
+ let { isActive: r, transitionName: i } = H(), a = f(null);
282
286
  c(e, () => a.current);
283
- let o = Q((e) => e.status), { decoratorName: s } = _e(i), l = oe.get(s);
284
- return l ? /* @__PURE__ */ L("div", {
287
+ let o = Q((e) => e.status), { decoratorName: s } = ge(i), l = ae.get(s);
288
+ return l ? /* @__PURE__ */ R("div", {
285
289
  ref: a,
286
290
  "data-flemo-decorator": !0,
287
291
  "data-flemo-decorator-name": l.name,
@@ -304,7 +308,7 @@ function Ve({ ref: e, style: t, ...n }) {
304
308
  //#region src/screen/useViewportScrollHeight.ts
305
309
  function He() {
306
310
  let [e, t] = p(0), [n, r] = p(0);
307
- return o(() => he((e, n) => {
311
+ return o(() => me((e, n) => {
308
312
  r(n), t(e);
309
313
  }), []), {
310
314
  viewportScrollHeight: e,
@@ -314,110 +318,110 @@ function He() {
314
318
  //#endregion
315
319
  //#region src/stores/useScreenStore.ts
316
320
  function $(e) {
317
- return W(z().screen, e);
321
+ return G(B().screen, e);
318
322
  }
319
323
  //#endregion
320
324
  //#region src/screen/ScreenMotion.tsx
321
325
  function Ue({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigationBarHeight: r, systemNavigationBarColor: i, sharedTopBar: a, sharedBottomBar: s, topBar: c, bottomBar: l, hideStatusBar: d, hideSystemNavigationBar: m, backgroundColor: h = "white", contentScrollable: _ = !0, ...v }) {
322
- let { id: y, isActive: b, isRoot: x, zIndex: S, transitionName: C, prevTransitionName: w } = V(), { contained: T } = Te(), E = T ? "absolute" : "fixed", D = z(), O = Q((e) => e.status), k = $((e) => e.dragStatus), te = D.screen.getState().setDragStatus, ne = D.screen.getState().setReplaceTransitionStatus, A = G((e) => e.index), j = G((e) => e.histories), M = b ? j[A - 1]?.id : j[A]?.id, ae = $((e) => M ? e.sharedBars[M] : void 0), ce = $((e) => M ? e.screenSurfaces[M] : void 0), ue = f(null);
323
- ue.current ||= ie({
324
- getTransitionTaskId: () => D.navigate.getState().transitionTaskId,
325
- setDragStatus: te,
326
- setReplaceTransitionStatus: ne
326
+ let { id: y, isActive: b, isRoot: x, zIndex: te, transitionName: S, prevTransitionName: C } = H(), { contained: w } = we(), T = w ? "absolute" : "fixed", E = B(), D = Q((e) => e.status), O = $((e) => e.dragStatus), ne = E.screen.getState().setDragStatus, k = E.screen.getState().setReplaceTransitionStatus, A = K((e) => e.index), j = K((e) => e.histories), N = b ? j[A - 1]?.id : j[A]?.id, ie = $((e) => N ? e.sharedBars[N] : void 0), se = $((e) => N ? e.screenSurfaces[N] : void 0), le = f(null);
327
+ le.current ||= re({
328
+ getTransitionTaskId: () => E.navigate.getState().transitionTaskId,
329
+ setDragStatus: ne,
330
+ setReplaceTransitionStatus: k
327
331
  });
328
- let N = ue.current, fe = _e(C), { initial: pe, swipeDirection: he, decoratorName: ge } = fe, P = oe.get(ge), { viewportScrollHeight: F } = He(), I = F > 0, [be, R] = p(0), [xe, B] = p(0), [Se, Ce] = p(null), we = f(null), H = f(null), U = f(null), W = f(null), K = f(null), q = f({
329
- transition: fe,
330
- decorator: P,
332
+ let de = le.current, P = ge(S), { initial: fe, swipeDirection: me, decoratorName: he } = P, F = ae.get(he), { viewportScrollHeight: I } = He(), L = I > 0, [ye, z] = p(0), [be, V] = p(0), [xe, Se] = p(null), Ce = f(null), U = f(null), W = f(null), G = f(null), q = f(null), J = f({
333
+ transition: P,
334
+ decorator: F,
331
335
  hasSharedTopBar: !!a,
332
336
  hasSharedBottomBar: !!s,
333
- viewportScrollHeight: F,
337
+ viewportScrollHeight: I,
334
338
  isRoot: x,
335
339
  isActive: b,
336
- status: O,
337
- dragStatus: k,
340
+ status: D,
341
+ dragStatus: O,
338
342
  index: A
339
343
  });
340
- q.current = {
341
- transition: fe,
342
- decorator: P,
344
+ J.current = {
345
+ transition: P,
346
+ decorator: F,
343
347
  hasSharedTopBar: !!a,
344
348
  hasSharedBottomBar: !!s,
345
- viewportScrollHeight: F,
349
+ viewportScrollHeight: I,
346
350
  isRoot: x,
347
351
  isActive: b,
348
- status: O,
349
- dragStatus: k,
352
+ status: D,
353
+ dragStatus: O,
350
354
  index: A
351
355
  };
352
- let Ee = f(null);
353
- Ee.current ||= re({
354
- getTransition: () => q.current.transition,
355
- getDecorator: () => q.current.decorator,
356
+ let Te = f(null);
357
+ Te.current ||= M({
358
+ getTransition: () => J.current.transition,
359
+ getDecorator: () => J.current.decorator,
356
360
  getElements: () => ({
357
- scope: H.current,
358
- screenContainer: we.current,
359
- decorator: U.current,
360
- sharedTopBar: W.current,
361
- sharedBottomBar: K.current
361
+ scope: U.current,
362
+ screenContainer: Ce.current,
363
+ decorator: W.current,
364
+ sharedTopBar: G.current,
365
+ sharedBottomBar: q.current
362
366
  }),
363
- hasSharedTopBar: () => q.current.hasSharedTopBar,
364
- hasSharedBottomBar: () => q.current.hasSharedBottomBar,
365
- getViewportScrollHeight: () => q.current.viewportScrollHeight,
367
+ hasSharedTopBar: () => J.current.hasSharedTopBar,
368
+ hasSharedBottomBar: () => J.current.hasSharedBottomBar,
369
+ getViewportScrollHeight: () => J.current.viewportScrollHeight,
366
370
  isReadyForDrag: () => {
367
- let e = q.current;
371
+ let e = J.current;
368
372
  return !e.isRoot && e.isActive && e.status === "COMPLETED" && e.dragStatus === "IDLE" && !!e.transition.swipeDirection && e.viewportScrollHeight < 10;
369
373
  },
370
374
  getPartnerBars: () => {
371
- let e = q.current, t = D.history.getState().histories, n = e.isActive ? t[e.index - 1]?.id : t[e.index]?.id;
372
- return n ? D.screen.getState().sharedBars[n] : void 0;
375
+ let e = J.current, t = E.history.getState().histories, n = e.isActive ? t[e.index - 1]?.id : t[e.index]?.id;
376
+ return n ? E.screen.getState().sharedBars[n] : void 0;
373
377
  },
374
- setDragStatus: te,
378
+ setDragStatus: ne,
375
379
  back: () => window.history.back()
376
380
  });
377
- let J = Ee.current, De = (e) => J.pointerDown(e.nativeEvent), Oe = (e) => J.pointerMove(e.nativeEvent), Y = (e) => J.pointerUp(e.nativeEvent);
381
+ let Y = Te.current, Ee = (e) => Y.pointerDown(e.nativeEvent), De = (e) => Y.pointerMove(e.nativeEvent), Oe = (e) => Y.pointerUp(e.nativeEvent);
378
382
  o(() => {
379
- se(H.current);
383
+ oe(U.current);
380
384
  }, []), o(() => {
381
- let e = H.current;
385
+ let e = U.current;
382
386
  if (!e) return;
383
387
  let t = (e) => {
384
- J.shouldPreventTouch() && e.preventDefault(), e.target?.dataset.swipeAtEdgeBar === "true" && e.preventDefault();
388
+ Y.shouldPreventTouch() && e.preventDefault(), e.target?.dataset.swipeAtEdgeBar === "true" && e.preventDefault();
385
389
  };
386
390
  return e.addEventListener("touchmove", t, { passive: !1 }), () => {
387
391
  e.removeEventListener("touchmove", t);
388
392
  };
389
- }, [J]), u(() => N.driveScreenLifecycle({
393
+ }, [Y]), u(() => de.driveScreenLifecycle({
390
394
  getElements: () => ({
391
- scope: H.current,
392
- decorator: U.current,
393
- bars: [W.current, K.current]
395
+ scope: U.current,
396
+ decorator: W.current,
397
+ bars: [G.current, q.current]
394
398
  }),
395
- transitionName: C,
396
- prevTransitionName: w,
397
- status: O,
399
+ transitionName: S,
400
+ prevTransitionName: C,
401
+ status: D,
398
402
  isActive: b
399
403
  }), [
400
- N,
401
- O,
404
+ de,
405
+ D,
402
406
  b,
403
- w,
404
- C
407
+ C,
408
+ S
405
409
  ]), u(() => {
406
- let e = W.current;
410
+ let e = G.current;
407
411
  if (!e) {
408
- R(0);
412
+ z(0);
409
413
  return;
410
414
  }
411
- return me(e, R);
415
+ return pe(e, z);
412
416
  }, [a]), u(() => {
413
- let e = K.current;
417
+ let e = q.current;
414
418
  if (!e) {
415
- B(0);
419
+ V(0);
416
420
  return;
417
421
  }
418
- return me(e, B);
422
+ return pe(e, V);
419
423
  }, [s]), u(() => {
420
- let { registerSharedBars: e, unregisterSharedBars: t } = D.screen.getState();
424
+ let { registerSharedBars: e, unregisterSharedBars: t } = E.screen.getState();
421
425
  return e(y, {
422
426
  topBar: !!a,
423
427
  bottomBar: !!s
@@ -426,28 +430,28 @@ function Ue({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
426
430
  y,
427
431
  a,
428
432
  s,
429
- D.screen
433
+ E.screen
430
434
  ]), u(() => {
431
- let e = H.current;
435
+ let e = U.current;
432
436
  if (!e) return;
433
- let { registerScreenSurface: t, unregisterScreenSurface: n } = D.screen.getState();
434
- return t(y, { opaqueBackground: de(getComputedStyle(e).backgroundColor) }), () => n(y);
437
+ let { registerScreenSurface: t, unregisterScreenSurface: n } = E.screen.getState();
438
+ return t(y, { opaqueBackground: ue(getComputedStyle(e).backgroundColor) }), () => n(y);
435
439
  }, [
436
440
  y,
437
441
  h,
438
- O,
439
- D.screen
442
+ D,
443
+ E.screen
440
444
  ]);
441
- let ke = b || S === A - 1, { app: Ae, nav: je } = g({
442
- status: O,
445
+ let ke = b || te === A - 1, { app: Ae, nav: je } = g({
446
+ status: D,
443
447
  isTopOrTopPrev: ke,
444
448
  hasTopBar: !!a,
445
449
  hasNavBar: !!s,
446
- partnerBars: ae
450
+ partnerBars: ie
447
451
  }), X = ee({
448
- status: O,
452
+ status: D,
449
453
  isTopOrTopPrev: ke,
450
- transitionName: C
454
+ transitionName: S
451
455
  }), [Me, Ne] = p({
452
456
  key: X,
453
457
  released: X === null
@@ -456,22 +460,22 @@ function Ue({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
456
460
  key: X,
457
461
  released: X === null
458
462
  });
459
- let Fe = X !== null && Me.key === X && !Me.released, Z = Fe ? !b && ce?.opaqueBackground ? "park" : "true" : "false";
463
+ let Fe = X !== null && Me.key === X && !Me.released, Z = Fe ? !b && se?.opaqueBackground ? "park" : "true" : "false";
460
464
  o(() => {
461
- if (Fe) return ve(() => Ne((e) => e.key === X && !e.released ? {
465
+ if (Fe) return _e(() => Ne((e) => e.key === X && !e.released ? {
462
466
  key: X,
463
467
  released: !0
464
468
  } : e));
465
469
  }, [Fe, X]);
466
- let Ie = le({
467
- initial: pe,
470
+ let Ie = ce({
471
+ initial: fe,
468
472
  isActive: b,
469
- status: O
473
+ status: D
470
474
  });
471
- return /* @__PURE__ */ ye("div", {
472
- ref: we,
475
+ return /* @__PURE__ */ ve("div", {
476
+ ref: Ce,
473
477
  style: {
474
- position: E,
478
+ position: T,
475
479
  top: 0,
476
480
  left: 0,
477
481
  width: "100%",
@@ -483,10 +487,10 @@ function Ue({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
483
487
  overscrollBehavior: "contain"
484
488
  },
485
489
  children: [
486
- /* @__PURE__ */ L("div", {
490
+ /* @__PURE__ */ R("div", {
487
491
  "data-swipe-at-edge-bar": !0,
488
492
  style: {
489
- position: E,
493
+ position: T,
490
494
  top: 0,
491
495
  left: 0,
492
496
  width: 8,
@@ -494,16 +498,16 @@ function Ue({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
494
498
  zIndex: 1
495
499
  }
496
500
  }),
497
- /* @__PURE__ */ ye("div", {
498
- ref: H,
501
+ /* @__PURE__ */ ve("div", {
502
+ ref: U,
499
503
  ...v,
500
- onPointerDown: De,
501
- onPointerMove: Oe,
502
- onPointerUp: Y,
503
- onPointerCancel: Y,
504
+ onPointerDown: Ee,
505
+ onPointerMove: De,
506
+ onPointerUp: Oe,
507
+ onPointerCancel: Oe,
504
508
  "data-flemo-screen": !0,
505
- "data-flemo-transition": C,
506
- "data-flemo-status": O,
509
+ "data-flemo-transition": S,
510
+ "data-flemo-status": D,
507
511
  "data-flemo-active": b ? "true" : "false",
508
512
  "data-flemo-anim-hold": Z,
509
513
  style: {
@@ -512,77 +516,77 @@ function Ue({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
512
516
  height: "100%",
513
517
  backgroundColor: h,
514
518
  overflowY: _ ? void 0 : "auto",
515
- touchAction: he === "x" ? "pan-y" : he === "y" ? "pan-x" : "auto",
519
+ touchAction: me === "x" ? "pan-y" : me === "y" ? "pan-x" : "auto",
516
520
  ...Ie,
517
521
  ...v.style
518
522
  },
519
523
  children: [
520
- !d && t && /* @__PURE__ */ L("div", {
524
+ !d && t && /* @__PURE__ */ R("div", {
521
525
  style: { minHeight: t },
522
- children: /* @__PURE__ */ L("div", { style: {
523
- position: E,
526
+ children: /* @__PURE__ */ R("div", { style: {
527
+ position: T,
524
528
  top: 0,
525
529
  width: "100%",
526
530
  minHeight: t,
527
531
  backgroundColor: n
528
532
  } })
529
533
  }),
530
- a && /* @__PURE__ */ L("div", { style: {
534
+ a && /* @__PURE__ */ R("div", { style: {
531
535
  width: "100%",
532
- minHeight: be
536
+ minHeight: ye
533
537
  } }),
534
538
  c,
535
- /* @__PURE__ */ L("div", {
539
+ /* @__PURE__ */ R("div", {
536
540
  style: {
537
541
  display: "flex",
538
542
  flexDirection: "column",
539
543
  flexGrow: 1,
540
544
  overflowY: _ ? "auto" : void 0,
541
- ...O !== "IDLE" && O !== "COMPLETED" ? {
545
+ ...D !== "IDLE" && D !== "COMPLETED" ? {
542
546
  transform: "translateZ(0)",
543
547
  willChange: "transform"
544
548
  } : null
545
549
  },
546
- children: /* @__PURE__ */ L(Pe.Provider, {
547
- value: Se,
550
+ children: /* @__PURE__ */ R(Pe.Provider, {
551
+ value: xe,
548
552
  children: e
549
553
  })
550
554
  }),
551
555
  l,
552
- s && /* @__PURE__ */ L("div", { style: {
553
- display: I ? "none" : void 0,
556
+ s && /* @__PURE__ */ R("div", { style: {
557
+ display: L ? "none" : void 0,
554
558
  width: "100%",
555
- minHeight: xe
559
+ minHeight: be
556
560
  } }),
557
- !m && r && /* @__PURE__ */ L("div", {
561
+ !m && r && /* @__PURE__ */ R("div", {
558
562
  style: {
559
- display: I ? "none" : void 0,
563
+ display: L ? "none" : void 0,
560
564
  minHeight: r
561
565
  },
562
- children: /* @__PURE__ */ L("div", { style: {
563
- position: E,
566
+ children: /* @__PURE__ */ R("div", { style: {
567
+ position: T,
564
568
  bottom: 0,
565
569
  width: "100%",
566
570
  minHeight: r,
567
571
  backgroundColor: i
568
572
  } })
569
573
  }),
570
- /* @__PURE__ */ L("div", {
571
- ref: Ce,
574
+ /* @__PURE__ */ R("div", {
575
+ ref: Se,
572
576
  "data-flemo-layer-mount": !0
573
577
  })
574
578
  ]
575
579
  }),
576
- a && /* @__PURE__ */ L("div", {
577
- ref: W,
580
+ a && /* @__PURE__ */ R("div", {
581
+ ref: G,
578
582
  "data-flemo-bar": "app",
579
- "data-flemo-bar-transition": C,
580
- "data-flemo-bar-status": O,
583
+ "data-flemo-bar-transition": S,
584
+ "data-flemo-bar-status": D,
581
585
  "data-flemo-bar-active": b ? "true" : "false",
582
586
  "data-flemo-bar-riding": Ae ? "true" : "false",
583
587
  "data-flemo-anim-hold": Z,
584
588
  style: {
585
- position: E,
589
+ position: T,
586
590
  top: d ? 0 : t,
587
591
  left: 0,
588
592
  width: "100%",
@@ -590,17 +594,17 @@ function Ue({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
590
594
  },
591
595
  children: a
592
596
  }),
593
- s && /* @__PURE__ */ L("div", {
594
- ref: K,
597
+ s && /* @__PURE__ */ R("div", {
598
+ ref: q,
595
599
  "data-flemo-bar": "nav",
596
- "data-flemo-bar-transition": C,
597
- "data-flemo-bar-status": O,
600
+ "data-flemo-bar-transition": S,
601
+ "data-flemo-bar-status": D,
598
602
  "data-flemo-bar-active": b ? "true" : "false",
599
603
  "data-flemo-bar-riding": je ? "true" : "false",
600
604
  "data-flemo-anim-hold": Z,
601
605
  style: {
602
- display: I ? "none" : void 0,
603
- position: E,
606
+ display: L ? "none" : void 0,
607
+ position: T,
604
608
  bottom: m ? 0 : r,
605
609
  left: 0,
606
610
  width: "100%",
@@ -608,14 +612,14 @@ function Ue({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
608
612
  },
609
613
  children: s
610
614
  }),
611
- P && /* @__PURE__ */ L(Ve, {
612
- ref: U,
615
+ F && /* @__PURE__ */ R(Ve, {
616
+ ref: W,
613
617
  "data-flemo-anim-hold": Z
614
618
  }),
615
- /* @__PURE__ */ L("div", {
619
+ /* @__PURE__ */ R("div", {
616
620
  "data-swipe-at-edge-bar": !0,
617
621
  style: {
618
- position: E,
622
+ position: T,
619
623
  top: 0,
620
624
  right: 0,
621
625
  width: 8,
@@ -629,18 +633,18 @@ function Ue({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
629
633
  //#endregion
630
634
  //#region src/screen/Screen.tsx
631
635
  function We({ children: e, ...t }) {
632
- let { isActive: n, isPrev: r, zIndex: i } = V();
633
- return /* @__PURE__ */ L(Be, {
636
+ let { isActive: n, isPrev: r, zIndex: i } = H();
637
+ return /* @__PURE__ */ R(Be, {
634
638
  freeze: _({
635
639
  isActive: n,
636
640
  isPrev: r,
637
641
  zIndex: i,
638
- index: G((e) => e.index),
642
+ index: K((e) => e.index),
639
643
  status: Q((e) => e.status),
640
644
  dragStatus: $((e) => e.dragStatus),
641
645
  replaceTransitionStatus: $((e) => e.replaceTransitionStatus)
642
646
  }),
643
- children: /* @__PURE__ */ L(Ue, {
647
+ children: /* @__PURE__ */ R(Ue, {
644
648
  ...t,
645
649
  children: e
646
650
  })
@@ -649,8 +653,8 @@ function We({ children: e, ...t }) {
649
653
  //#endregion
650
654
  //#region src/screen/Part.tsx
651
655
  function Ge({ ref: e, name: t, style: n, children: r, ...i }) {
652
- let { isActive: a } = V();
653
- return /* @__PURE__ */ L("div", {
656
+ let { isActive: a } = H();
657
+ return /* @__PURE__ */ R("div", {
654
658
  ref: e,
655
659
  "data-flemo-part-name": t,
656
660
  "data-flemo-status": Q((e) => e.status),
@@ -664,18 +668,19 @@ function Ge({ ref: e, name: t, style: n, children: r, ...i }) {
664
668
  //#region src/stores/RouterScopeProvider.tsx
665
669
  function Ke({ children: e }) {
666
670
  let [t] = p(() => ({
667
- history: S(),
668
- navigate: w(),
669
- transition: ae(),
671
+ history: te(),
672
+ navigate: C(),
673
+ transition: ie(),
670
674
  screen: A(),
671
675
  driver: b(),
672
- markSelfInduced: fe,
673
- consume: v
676
+ markSelfInduced: P,
677
+ consume: v,
678
+ life: { alive: !0 }
674
679
  }));
675
- return /* @__PURE__ */ L(R.Provider, {
680
+ return /* @__PURE__ */ R(z.Provider, {
676
681
  value: t,
677
682
  children: e
678
683
  });
679
684
  }
680
685
  //#endregion
681
- export { Fe as Layer, Ge as Part, Ne as Route, Me as Router, Ke as RouterScopeProvider, We as Screen, B as ScreenContext, Ve as ScreenDecorator, Be as ScreenFreeze, Ue as ScreenMotion, Oe as Slot, y as createBrowserHistoryDriver, x as createDecorator, E as createPartTransition, D as createRawDecorator, O as createRawPartTransition, k as createRawTransition, M as createTransition, ge as partTransitionMap, G as useHistoryStore, Ie as useNavigate, Q as useNavigateStore, ze as useParams, Le as usePathname, V as useScreen, $ as useScreenStore, Re as useStep, z as useStores, He as useViewportScrollHeight };
686
+ export { Fe as Layer, Ge as Part, Ne as Route, Me as Router, Ke as RouterScopeProvider, We as Screen, V as ScreenContext, Ve as ScreenDecorator, Be as ScreenFreeze, Ue as ScreenMotion, De as Slot, y as createBrowserHistoryDriver, x as createDecorator, T as createPartTransition, E as createRawDecorator, D as createRawPartTransition, O as createRawTransition, N as createTransition, he as partTransitionMap, K as useHistoryStore, Ie as useNavigate, Q as useNavigateStore, ze as useParams, Le as usePathname, H as useScreen, $ as useScreenStore, Re as useStep, B as useStores, He as useViewportScrollHeight };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flemo/react",
3
- "version": "1.5.5",
3
+ "version": "1.5.7",
4
4
  "description": "React bindings for flemo: Router, Route, Screen, and the screen-transition runtime.",
5
5
  "main": "./dist/index.mjs",
6
6
  "module": "./dist/index.mjs",
@@ -36,7 +36,7 @@
36
36
  "dependencies": {
37
37
  "path-to-regexp": "^8.4.2",
38
38
  "zustand": "^5.0.14",
39
- "@flemo/core": "1.10.0"
39
+ "@flemo/core": "1.11.0"
40
40
  },
41
41
  "devDependencies": {
42
42
  "@testing-library/jest-dom": "^6.9.1",