@flemo/core 1.1.2 → 1.2.0

package/dist/history/store.d.ts

@@ -12,6 +12,7 @@ interface HistoryStore {
     addHistory: (history: History) => void;
     replaceHistory: (index: number) => void;
     popHistory: (index: number) => void;
+    popHistories: (count: number) => void;
 }
 declare const useHistoryStore: import('zustand').UseBoundStore<import('zustand').StoreApi<HistoryStore>>;
 export default useHistoryStore;

package/dist/index.mjs

@@ -68,7 +68,7 @@ class Q {
     return new Promise((a, r) => {
       this.taskQueue = this.taskQueue.then(async () => {
         try {
-          const { control: o, validate: c, rollback: l, dependencies: u = [], delay: d } = e, m = new AbortController(), i = {
+          const { control: o, validate: c, rollback: l, dependencies: u = [], delay: d } = e, p = new AbortController(), i = {
             id: s,
             execute: t,
             timestamp: Date.now(),
@@ -79,7 +79,7 @@ class Q {
             validate: c,
             rollback: l,
             control: o,
-            abortController: m
+            abortController: p
           };
           this.tasks.set(i.id, i), this.pendingTaskQueue.length > 0 && (this.pendingTaskQueue.push(i), await this.waitForPendingTasks(), this.pendingTaskQueue = this.pendingTaskQueue.filter((P) => P.id !== i.id));
           try {
@@ -95,7 +95,7 @@ class Q {
               if (i.validate && !await i.validate())
                 throw i.status = "FAILED", new Error("FAILED");
               d && d > 0 && await new Promise((f) => setTimeout(f, d));
-              const p = await i.execute(i.abortController);
+              const h = await i.execute(i.abortController);
               if (i.abortController.signal.aborted) {
                 i.status = "COMPLETED", await this.onTaskStatusChange(i.id, "COMPLETED"), a({
                   success: !0,
@@ -109,32 +109,32 @@ class Q {
               if (e.control) {
                 const f = e.control;
                 if (f.delay && f.delay > 0 && await new Promise((y) => setTimeout(y, f.delay)), f.manual) {
-                  i.status = "MANUAL_PENDING", i.manualResolver = { resolve: a, reject: r, result: p }, this.pendingTaskQueue.push(i), await this.onTaskStatusChange(i.id, "MANUAL_PENDING");
+                  i.status = "MANUAL_PENDING", i.manualResolver = { resolve: a, reject: r, result: h }, this.pendingTaskQueue.push(i), await this.onTaskStatusChange(i.id, "MANUAL_PENDING");
                   return;
                 }
                 if (f.signal) {
-                  i.status = "SIGNAL_PENDING", i.manualResolver = { resolve: a, reject: r, result: p }, this.signalListeners.has(f.signal) || this.signalListeners.set(f.signal, /* @__PURE__ */ new Set()), this.signalListeners.get(f.signal).add(i.id), this.pendingTaskQueue.push(i), await this.onTaskStatusChange(i.id, "SIGNAL_PENDING");
+                  i.status = "SIGNAL_PENDING", i.manualResolver = { resolve: a, reject: r, result: h }, this.signalListeners.has(f.signal) || this.signalListeners.set(f.signal, /* @__PURE__ */ new Set()), this.signalListeners.get(f.signal).add(i.id), this.pendingTaskQueue.push(i), await this.onTaskStatusChange(i.id, "SIGNAL_PENDING");
                   return;
                 }
                 if (f.condition && !await f.condition()) {
-                  i.status = "MANUAL_PENDING", i.manualResolver = { resolve: a, reject: r, result: p }, this.pendingTaskQueue.push(i), await this.onTaskStatusChange(i.id, "MANUAL_PENDING");
+                  i.status = "MANUAL_PENDING", i.manualResolver = { resolve: a, reject: r, result: h }, this.pendingTaskQueue.push(i), await this.onTaskStatusChange(i.id, "MANUAL_PENDING");
                   return;
                 }
               }
               i.status = "COMPLETED", await this.onTaskStatusChange(i.id, "COMPLETED"), a({
                 success: !0,
-                result: p,
+                result: h,
                 taskId: i.id,
                 timestamp: Date.now(),
                 instanceId: this.instanceId
               });
-            } catch (p) {
+            } catch (h) {
               if (i.status = "FAILED", i.rollback)
                 try {
                   await i.rollback(), i.status = "ROLLEDBACK";
                 } catch {
                 }
-              throw await this.onTaskStatusChange(i.id, i.status), p;
+              throw await this.onTaskStatusChange(i.id, i.status), h;
             } finally {
               this.releaseLock(i.id);
             }
@@ -187,7 +187,20 @@ const yt = new Q(), Pt = w((n) => ({
   popHistory: (t) => n((e) => ({
     index: e.index - 1,
     histories: e.histories.filter((s, a) => a !== t)
-  }))
+  })),
+  // Drop `count` entries sitting directly below the current top, keeping the
+  // top itself. Used by pop(n) to remove the screens it skips over in the same
+  // synchronous block that starts the transition — so they never paint — while
+  // the leaving top stays mounted to drive and resolve the animation.
+  popHistories: (t) => {
+    t <= 0 || n((e) => {
+      const s = e.index;
+      return {
+        index: e.index - t,
+        histories: e.histories.filter((a, r) => r < s - t || r >= s)
+      };
+    });
+  }
 })), gt = w((n) => ({
   status: "IDLE",
   transitionTaskId: null,
@@ -241,7 +254,7 @@ function kt({
   popOnExit: l,
   completedOnExit: u,
   completedOnEnter: d,
-  options: m
+  options: p
 }) {
   return {
     name: n,
@@ -258,7 +271,7 @@ function kt({
       "COMPLETED-false": u,
       "COMPLETED-true": d
     },
-    ...m
+    ...p
   };
 }
 const X = (n, t, e) => {
@@ -299,7 +312,7 @@ const X = (n, t, e) => {
   },
   exit: {
     value: {
-      x: -100
+      x: "-30%"
     },
     options: {
       duration: 0.7,
@@ -332,7 +345,7 @@ const X = (n, t, e) => {
       ), e(
         a,
         {
-          x: -100 + l
+          x: `${-30 + l * 0.3}%`
         },
         {
           duration: 0
@@ -355,7 +368,7 @@ const X = (n, t, e) => {
         e(
           a,
           {
-            x: u ? 0 : -100
+            x: u ? 0 : "-30%"
           },
           {
             duration: 0.3,
@@ -420,7 +433,7 @@ const X = (n, t, e) => {
     swipeDirection: "y",
     onSwipeStart: async () => !0,
     onSwipe: (n, t, { animate: e, currentScreen: s, onProgress: a }) => {
-      const { offset: r } = t, o = r.y, c = Math.max(0, Math.min(56, o)), l = z(c, [0, 56], [1, 0.96]), u = Math.max(0, o - 56), d = Math.min(1, u / 160), m = Math.sqrt(d) * 12, i = Math.max(0, c + m), h = Math.min(56, i);
+      const { offset: r } = t, o = r.y, c = Math.max(0, Math.min(56, o)), l = z(c, [0, 56], [1, 0.96]), u = Math.max(0, o - 56), d = Math.min(1, u / 160), p = Math.sqrt(d) * 12, i = Math.max(0, c + p), m = Math.min(56, i);
       return a?.(!0, 100), e(
         s,
         {
@@ -430,7 +443,7 @@ const X = (n, t, e) => {
         {
           duration: 0
         }
-      ), h;
+      ), m;
     },
     onSwipeEnd: async (n, t, { animate: e, currentScreen: s, prevScreen: a, onStart: r }) => {
       const { offset: o, velocity: c } = t, u = o.y > 56 || c.y > 20;
@@ -465,7 +478,8 @@ const X = (n, t, e) => {
   },
   idle: {
     value: {
-      y: 0
+      y: 0,
+      opacity: 1
     },
     options: {
       duration: 0
@@ -491,7 +505,8 @@ const X = (n, t, e) => {
   },
   exit: {
     value: {
-      y: -56
+      y: -56,
+      opacity: 0
     },
     options: {
       duration: 0.35,
@@ -500,7 +515,8 @@ const X = (n, t, e) => {
   },
   exitBack: {
     value: {
-      y: 0
+      y: 0,
+      opacity: 1
     },
     options: {
       duration: 0.25,
@@ -511,8 +527,8 @@ const X = (n, t, e) => {
     swipeDirection: "y",
     onSwipeStart: async () => !0,
     onSwipe: (n, t, { animate: e, currentScreen: s, prevScreen: a, onProgress: r }) => {
-      const { offset: o } = t, c = o.y, l = Math.max(0, Math.min(56, c)), u = Math.max(0, c - 56), d = Math.min(1, u / 160), m = Math.sqrt(d) * 12, i = Math.max(0, l + m), h = Math.min(56, i);
-      return r?.(!0, h), e(
+      const { offset: o } = t, c = o.y, l = Math.max(0, Math.min(56, c)), u = Math.max(0, c - 56), d = Math.min(1, u / 160), p = Math.sqrt(d) * 12, i = Math.max(0, l + p), m = Math.min(56, i);
+      return r?.(!0, m), e(
         s,
         {
           y: i
@@ -523,10 +539,11 @@ const X = (n, t, e) => {
       ), e(
         a,
         {
-          y: -56 + h
+          y: -56 + m,
+          opacity: m / 56
         },
         { duration: 0 }
-      ), h;
+      ), m;
     },
     onSwipeEnd: async (n, t, { animate: e, currentScreen: s, prevScreen: a, onStart: r }) => {
       const { offset: o, velocity: c } = t, u = o.y > 56 || c.y > 20;
@@ -544,7 +561,8 @@ const X = (n, t, e) => {
         e(
           a,
           {
-            y: u ? 0 : -56
+            y: u ? 0 : -56,
+            opacity: u ? 1 : 0
           },
           {
             duration: u ? 0.22 : 0.24,
@@ -634,7 +652,7 @@ function Lt({
   popOnExit: l,
   completedOnEnter: u,
   completedOnExit: d,
-  options: m
+  options: p
 }) {
   return {
     name: n,
@@ -651,7 +669,7 @@ function Lt({
       "COMPLETED-false": d,
       "COMPLETED-true": u
     },
-    ...m
+    ...p
   };
 }
 const I = "rgba(0, 0, 0, 0.3)", q = K({
@@ -671,17 +689,22 @@ const I = "rgba(0, 0, 0, 0.3)", q = K({
   },
   // Visible dim — applied when this screen is the one going behind / sitting
   // behind a new active screen (PUSHING-false / REPLACING-false / COMPLETED-false).
-  // Duration + easing track cupertino's enter/exit so the dim arrives in
-  // lockstep with the underlying screen slide and there's no
-  // animation-vs-hold-by-fill window for the rest-rule handoff to race against.
+  // Duration matches cupertino's enter so the dim resolves in lockstep with the
+  // underlying screen slide (and there's no animation-vs-hold-by-fill window for
+  // the rest-rule handoff to race against — that's a function of duration + fill,
+  // not the curve). Easing is intentionally left at the default: this animates
+  // `opacity` (a luminance channel), not position, so cupertino's positional
+  // decelerate curve would front-load the darkening into an abrupt step with a
+  // long invisible tail. The default ease spreads the perceived dim evenly across
+  // the duration, matching this decorator's linear-perceived-ramp design (see the
+  // DIM_COLOR note above).
   enter: {
     value: {
       opacity: 1,
       backgroundColor: I
     },
     options: {
-      duration: 0.7,
-      ease: [0.32, 0.72, 0, 1]
+      duration: 0.7
     }
   },
   // POPPING-false target: the previously-behind screen is returning to active.
@@ -694,8 +717,7 @@ const I = "rgba(0, 0, 0, 0.3)", q = K({
       backgroundColor: I
     },
     options: {
-      duration: 0.6,
-      ease: [0.32, 0.72, 0, 1]
+      duration: 0.6
     }
   },
   options: {
@@ -861,9 +883,9 @@ const I = "rgba(0, 0, 0, 0.3)", q = K({
 }, ct = (n, t) => {
   const [e, s] = t.split("-");
   return `[data-flemo-bar][data-flemo-bar-transition="${n}"][data-flemo-bar-status="${e}"][data-flemo-bar-active="${s}"][data-flemo-bar-riding="true"]`;
-}, ut = (n, t, e) => `flemo-${n}-${J(t)}-${e}`, C = (n, t, e, s, a, r) => {
-  const o = g(s), c = g(a.value), l = H(a.options), u = U(a.options), d = it(a.options?.ease), m = r(t, e), i = n === "screen" ? `${m},
-${ct(t, e)}` : m;
+}, ut = (n, t, e) => `flemo-${n}-${J(t)}-${e}`, x = (n, t, e, s, a, r) => {
+  const o = g(s), c = g(a.value), l = H(a.options), u = U(a.options), d = it(a.options?.ease), p = r(t, e), i = n === "screen" ? `${p},
+${ct(t, e)}` : p;
   if (c.length === 0 && o.length === 0)
     return "";
   if (l <= 0 && u <= 0)
@@ -871,8 +893,8 @@ ${ct(t, e)}` : m;
 ${E(c)}
   animation: none;
 }`;
-  const h = ut(n, t, e), P = [
-    `@keyframes ${h} {`,
+  const m = ut(n, t, e), P = [
+    `@keyframes ${m} {`,
     "  from {",
     E(o).replace(/^/gm, "  "),
     "  }",
@@ -881,8 +903,8 @@ ${E(c)}
     "  }",
     "}"
   ].join(`
-`), p = [
-    `${h}`,
+`), h = [
+    `${m}`,
     `${l}s`,
     d,
     u > 0 ? `${u}s` : null,
@@ -891,13 +913,13 @@ ${E(c)}
     /* @__PURE__ */ new Set([...o.map((N) => N.property), ...c.map((N) => N.property)])
   ), y = f.length > 0 ? `  will-change: ${f.join(", ")};
 ` : "", S = e.split("-")[0], Y = `${i} {
-  animation: ${p};
+  animation: ${h};
 ${y}${S === "PUSHING" || S === "REPLACING" ? `  contain: layout;
   pointer-events: none;
 ` : ""}}`;
   return `${P}
 ${Y}`;
-}, x = (n, t, e, s) => {
+}, C = (n, t, e, s) => {
   const a = g(s.value);
   return a.length === 0 ? "" : `${n(t, e)} {
 ${E(a)}
@@ -909,12 +931,12 @@ ${E(a)}
     for (const r of O) {
       const o = s.variants[r], c = k[r];
       if (c === "self") {
-        e.push(x(A, a, r, o));
+        e.push(C(A, a, r, o));
         continue;
       }
       const l = c === "initial" ? s.initial : s.variants[c].value;
       e.push(
-        C("screen", a, r, l, o, A)
+        x("screen", a, r, l, o, A)
       );
     }
   }
@@ -923,12 +945,12 @@ ${E(a)}
     for (const r of W) {
       const o = s.variants[r], c = k[r];
       if (c === "self") {
-        e.push(x(M, a, r, o));
+        e.push(C(M, a, r, o));
         continue;
       }
       const l = c === "initial" ? s.initial : s.variants[c].value;
       e.push(
-        C(
+        x(
           "decorator",
           a,
           r,
@@ -960,7 +982,7 @@ function Mt(n, t, e) {
   const s = lt(n, t), a = B(s)(t), r = new URLSearchParams(e), o = Object.fromEntries(r.entries());
   return a ? { ...a.params, ...o } : {};
 }
-function Ct(n, t) {
+function xt(n, t) {
   const {
     direction: e = "x",
     markerSelector: s = "[data-swipe-at-edge]",
@@ -1010,7 +1032,7 @@ export {
   F as cupertino,
   Dt as decoratorMap,
   it as easingToCss,
-  Ct as findScrollable,
+  xt as findScrollable,
   lt as getMatchedPathPattern,
   Mt as getParams,
   At as isServer,

package/dist/transition/__tests__/swipe.test.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flemo/core",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "description": "Framework-agnostic primitives for flemo: history, navigation, transitions, task manager.",
   "main": "./dist/index.mjs",
   "module": "./dist/index.mjs",