@stacknav/core 0.2.0 → 0.3.0

package/README.md

@@ -11,6 +11,9 @@ styling stay the app's own; the engine only moves them.
 - **Scroll and state are preserved.** Pages beneath the top stay mounted and
   hidden. Only `transform` is written, so scroll offsets, form state and focus
   survive.
+- **CSS runs the animation.** The engine writes where the pages should end up
+  and hands the browser that phase's duration and curve; the frames in between
+  are the compositor's, not the main thread's.
 - **Direction resolution** for router-driven apps: composable strategies decide
   push / pop / replace.
 - **Browser back** for apps without a router, through an optional history
@@ -19,8 +22,8 @@ styling stay the app's own; the engine only moves them.
 - **Tunable from CSS.** Duration, curve, parallax, dim and shadow are custom
   properties on the container, so a media query or theme class can retune the
   animation without touching the app's JS.
-- **Custom chrome.** Subscribe to `progress` events and drive a fixed header or
-  tab bar from the same `p`.
+- **Custom chrome.** Move a header or a tab bar in step with the pages from CSS,
+  or subscribe to `progress` events and drive it from the same `p`.
 - No dependencies. Plain ES modules with type declarations.
 
 ## Use
@@ -45,6 +48,18 @@ The container needs a height; it becomes `position: relative; overflow: hidden`.
 Each page is an element you create. The stack gives it
 `position: absolute; inset: 0; overflow-y: auto` and manages its visibility.
 
+## How it moves
+
+The engine does not animate anything. For each phase it writes two custom properties on the container — `--sn-t` and `--sn-e`, the duration and curve in force — and then writes where the pages should end up. CSS does the rest:
+
+| Phase | `--sn-t` | What is written |
+| --- | --- | --- |
+| push / pop | the transition's `duration` | the far endpoint, once |
+| a finger on the screen | `0s` | the current `p`, per pointer move |
+| the release | `settle()`'s duration | the endpoint it is settling to, once |
+
+So a 500 ms push costs about a dozen style writes in total rather than one per page per frame, the travel is a percentage of the page (no layout is ever measured), and `transform` and `opacity` stay on the compositor — a busy main thread no longer stutters the transition. `prefers-reduced-motion` is a media query in the stylesheet, so it wins even over a duration the engine wrote.
+
 ## API
 
 ### `createIOSStack({ container, transition?, gesture? })`
@@ -164,7 +179,13 @@ variable name.
 A transition is just
 `{ duration, ease, settle(), begin?(), apply(lower, upper, p), end?() }`, so you
 can write a different one (a fade, a vertical sheet) and pass it to
-`new NavigationStack({ container, transition })`. `cssVars()` and the
+`new NavigationStack({ container, transition })`. `apply` is a declarative
+write, not a frame: the stack calls it once at each end of a phase and lets CSS
+interpolate between them, so keep it to `transform` and `opacity` and the
+browser keeps it off the main thread. `ease` is sampled to report `progress`,
+but its `css` property is what drives the pixels — `cubicBezier()` and
+`parseEasing()` set one, and a bare `(t) => number` of your own does not, so
+such a curve runs `linear` on screen unless you give it a `css` property too. `cssVars()` and the
 `parseTime` / `parseNumber` / `parseRatio` / `parseEasing` helpers are exported
 so a custom transition can read variables the same way. Each returns `undefined`
 rather than `NaN` for anything it cannot parse, so `?? yourDefault` is all the
@@ -184,6 +205,12 @@ handling a value needs.
 
 Call `gesture.refresh()` after changing options at runtime.
 
+The leading edge is whichever edge the container reads from, so in a
+right-to-left container the strip sits on the right and back is a drag to the
+left. The recognizer and the transition both take that from `--sn-dir`, which
+the stylesheet sets under `:dir(rtl)`, falling back to the container's computed
+`direction`; set `--sn-dir: -1` yourself to flip both without an RTL document.
+
 ### `attachBrowserHistory(stack, { key = "snDepth", animateHistoryPop, onForward })`
 
 For apps without a router. Mirrors stack depth into `history.state`. Returns a
@@ -191,14 +218,29 @@ detach function. `animateHistoryPop` defaults to `false` on iOS browsers and
 `true` elsewhere. Forward navigation has no page to show, so by default it
 bounces back; pass `onForward(targetDepth)` to re-push something instead.
 
+### Your own chrome
+
+A header or tab bar that should move with the pages can read the same state the engine gives CSS — `--sn-t` and `--sn-e` on the container, and the `sn-page-upper` / `sn-page-lower` classes on the two pages taking part — and it will run on the compositor alongside them:
+
+```css
+.my-header { transition: opacity var(--sn-t) var(--sn-e); }
+```
+
+For chrome that needs the number itself, `progress` still fires with `(lower, upper, p)`. It now costs a frame loop, so the engine only runs one while something is subscribed.
+
 ### Styles
 
-`injectStyles()` inserts the engine's four rules once. `STACKNAV_CSS` is the same
+`injectStyles()` inserts the engine's rules once. `STACKNAV_CSS` is the same
 CSS as a string, minified because it rides along in your JS bundle, and
-`@stacknav/core/stacknav.css` is the same CSS as a readable file. It covers
-layout only and declares no custom properties: the tuning variables above are
-listed in a comment in the file rather than set, so that leaving one out means
-"use the default".
+`@stacknav/core/stacknav.css` is the same CSS as a readable file.
+
+It covers layout and the motion itself — the `transition` rules the pages run
+on — and declares none of the tuning variables above: they are listed in a
+comment in the file rather than set, so that leaving one out means "use the
+default". While a phase is in flight the engine writes two properties of its own
+on the container, `--sn-t` and `--sn-e`, and marks the two pages taking part
+`sn-page-upper` and `sn-page-lower`. Anything of yours that should move with
+them can transition off the same four.
 
 ## Footprint
 
@@ -206,12 +248,12 @@ Plain ES modules, no dependencies, no work at module load: a bundler keeps only
 
 | You import | Costs |
 | --- | --- |
-| `createIOSStack` (stack, iOS look, swipe back) | ~4.1 kB |
-| `NavigationStack` with your own transition | ~2.0 kB |
+| `createIOSStack` (stack, iOS look, swipe back) | ~4.5 kB |
+| `NavigationStack` with your own transition | ~2.4 kB |
 | the direction strategies | ~0.6 kB |
-| `attachBrowserHistory` | ~0.4 kB |
-| `injectStyles` | ~0.3 kB |
-| everything | ~5.4 kB |
+| `attachBrowserHistory` | ~0.5 kB |
+| `injectStyles` | ~0.5 kB |
+| everything | ~5.9 kB |
 
 ## Develop
 
@@ -223,13 +265,13 @@ pnpm size         # what each entry point costs, minified + gzipped (after a bui
 
 ```
 src/
-  animate.ts            cubic-bezier solver, cancellable tween, easings
+  animate.ts            curves CSS and JS can both read, the tween, the waits
   css-vars.ts           reading and parsing the engine's custom properties
   navigation-stack.ts   the stack: mounting, ordering, transition lifecycle, queueing
-  ios-transition.ts     the look: slide, parallax, dim, shadow, settle timing
+  ios-transition.ts     the look: the endpoints, the settle timing, the variables
   edge-pan-gesture.ts   pointer-event recognizer that drives the interactive pop
   direction.ts          push / pop / replace strategies and the resolver
   history-adapter.ts    history.state mirroring for apps without a router
-  styles.ts             the CSS the engine needs, and injectStyles()
+  styles.ts             the CSS the engine needs, motion included, and injectStyles()
   index.ts              exports + createIOSStack()
 ```

package/dist/animate.d.ts

@@ -1,10 +1,23 @@
-export type Easing = (t: number) => number;
+/**
+ * An easing curve. Callable, so the engine can sample it; `css` is the same
+ * curve spelled for `transition-timing-function`, which is what actually
+ * drives the pixels. A plain `(t) => number` is still a valid easing, it just
+ * falls back to `linear` on the CSS side.
+ */
+export interface Easing {
+    (t: number): number;
+    readonly css?: string;
+}
 export declare function cubicBezier(x1: number, y1: number, x2: number, y2: number): Easing;
 export declare const easings: {
     linear: Easing;
     ios: Easing;
     easeOut: Easing;
 };
+/** How an easing should be spelled for CSS. A curve with no spelling runs linearly. */
+export declare const cssEasing: (ease: Easing | undefined) => string;
+/** How a duration should be spelled for CSS. */
+export declare const cssDuration: (ms: number) => string;
 export interface TweenOptions {
     from: number;
     to: number;
@@ -20,7 +33,27 @@ export type CancellableTween = Promise<void> & {
  * every frame. Returns a promise that resolves when the tween is done;
  * `promise.cancel()` stops it early. A duration of 0 or less jumps straight
  * to `to`.
+ *
+ * The engine does not use this to move pages, CSS does that. It uses it to
+ * report `progress` to listeners, and only while someone is listening.
  */
 export declare function tween({ from, to, duration, ease, onUpdate }: TweenOptions): CancellableTween;
+/**
+ * Commits the styles written so far, so the *next* write is seen as a change
+ * and starts a CSS transition from here instead of being collapsed into it.
+ * One forced layout per transition, in place of a frame of JavaScript per
+ * frame of animation.
+ */
+export declare function commitStyles(el: HTMLElement): void;
+/**
+ * Resolves once the CSS transitions of `properties` on these elements have
+ * finished. Nothing running resolves immediately: no transition started, a
+ * zero duration, `prefers-reduced-motion`, an element that is not being
+ * rendered. Interrupted animations reject, which counts as finished.
+ *
+ * Only the named properties are waited on, so an app is free to keep its own
+ * animation running on a page without stalling the stack.
+ */
+export declare function animationsFinished(els: Array<HTMLElement | null | undefined>, properties?: readonly string[]): Promise<void>;
 export declare const prefersReducedMotion: () => boolean;
 //# sourceMappingURL=animate.d.ts.map

package/dist/animate.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"animate.d.ts","sourceRoot":"","sources":["../src/animate.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,MAAM,GAAG,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;AAE3C,wBAAgB,WAAW,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAiBlF;AAKD,eAAO,MAAM,OAAO,EAAE;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAInE,CAAC;AAEF,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED,MAAM,MAAM,gBAAgB,GAAG,OAAO,CAAC,IAAI,CAAC,GAAG;IAAE,MAAM,IAAI,IAAI,CAAA;CAAE,CAAC;AAElE;;;;;GAKG;AACH,wBAAgB,KAAK,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,QAAQ,EAAE,IAAqB,EAAE,QAAQ,EAAE,EAAE,YAAY,GAAG,gBAAgB,CA2B7G;AAED,eAAO,MAAM,oBAAoB,QAAO,OACoD,CAAC"}
+{"version":3,"file":"animate.d.ts","sourceRoot":"","sources":["../src/animate.ts"],"names":[],"mappings":"AAMA;;;;;GAKG;AACH,MAAM,WAAW,MAAM;IACrB,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,QAAQ,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,wBAAgB,WAAW,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAkBlF;AAKD,eAAO,MAAM,OAAO,EAAE;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAInE,CAAC;AAEF,uFAAuF;AACvF,eAAO,MAAM,SAAS,GAAI,MAAM,MAAM,GAAG,SAAS,KAAG,MAA+B,CAAC;AAErF,gDAAgD;AAChD,eAAO,MAAM,WAAW,GAAI,IAAI,MAAM,KAAG,MAAqC,CAAC;AAE/E,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED,MAAM,MAAM,gBAAgB,GAAG,OAAO,CAAC,IAAI,CAAC,GAAG;IAAE,MAAM,IAAI,IAAI,CAAA;CAAE,CAAC;AAElE;;;;;;;;GAQG;AACH,wBAAgB,KAAK,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,QAAQ,EAAE,IAAqB,EAAE,QAAQ,EAAE,EAAE,YAAY,GAAG,gBAAgB,CA2B7G;AAED;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,EAAE,EAAE,WAAW,GAAG,IAAI,CAElD;AAED;;;;;;;;GAQG;AACH,wBAAgB,kBAAkB,CAAC,GAAG,EAAE,KAAK,CAAC,WAAW,GAAG,IAAI,GAAG,SAAS,CAAC,EAAE,UAAU,GAAE,SAAS,MAAM,EAA6B,GAAG,OAAO,CAAC,IAAI,CAAC,CAUtJ;AAED,eAAO,MAAM,oBAAoB,QAAO,OACoD,CAAC"}

package/dist/animate.js

@@ -1,12 +1,15 @@
-// A small animation toolkit: a cubic-bezier solver, a cancellable tween, and
-// the easing curves the iOS transition uses.
+// A small animation toolkit. The pages themselves are moved by CSS (see
+// styles.ts), so what is here is the arithmetic CSS cannot do for the engine:
+// a curve it can both hand to CSS and sample in JS, the spellings CSS wants,
+// a cancellable tween used only to report progress, and the two helpers that
+// hand a run over to the browser.
 export function cubicBezier(x1, y1, x2, y2) {
     const A = (a, b) => 1 - 3 * b + 3 * a;
     const B = (a, b) => 3 * b - 6 * a;
     const C = (a) => 3 * a;
     const calc = (t, a, b) => ((A(a, b) * t + B(a, b)) * t + C(a)) * t;
     const slope = (t, a, b) => 3 * A(a, b) * t * t + 2 * B(a, b) * t + C(a);
-    return (x) => {
+    const f = (x) => {
         if (x <= 0)
             return 0;
         if (x >= 1)
@@ -20,20 +23,28 @@ export function cubicBezier(x1, y1, x2, y2) {
         }
         return calc(t, y1, y2);
     };
+    return Object.assign(f, { css: `cubic-bezier(${x1}, ${y1}, ${x2}, ${y2})` });
 }
 // `#__PURE__` marks the module-load calls as droppable, so a bundler that does
 // not honour the package's `sideEffects` flag can still leave this module out
 // when nothing here is imported.
 export const easings = {
-    linear: (t) => t,
+    linear: /*#__PURE__*/ Object.assign((t) => t, { css: 'linear' }),
     ios: /*#__PURE__*/ cubicBezier(0.32, 0.72, 0, 1), // the common approximation of UIKit's navigation curve
     easeOut: /*#__PURE__*/ cubicBezier(0.2, 0.8, 0.2, 1),
 };
+/** How an easing should be spelled for CSS. A curve with no spelling runs linearly. */
+export const cssEasing = (ease) => ease?.css ?? 'linear';
+/** How a duration should be spelled for CSS. */
+export const cssDuration = (ms) => (ms > 0 ? `${ms}ms` : '0s');
 /**
  * Animates a number from `from` to `to` over `duration` ms, calling `onUpdate`
  * every frame. Returns a promise that resolves when the tween is done;
  * `promise.cancel()` stops it early. A duration of 0 or less jumps straight
  * to `to`.
+ *
+ * The engine does not use this to move pages, CSS does that. It uses it to
+ * report `progress` to listeners, and only while someone is listening.
  */
 export function tween({ from, to, duration, ease = easings.linear, onUpdate }) {
     let raf = 0;
@@ -65,5 +76,36 @@ export function tween({ from, to, duration, ease = easings.linear, onUpdate }) {
     };
     return promise;
 }
+/**
+ * Commits the styles written so far, so the *next* write is seen as a change
+ * and starts a CSS transition from here instead of being collapsed into it.
+ * One forced layout per transition, in place of a frame of JavaScript per
+ * frame of animation.
+ */
+export function commitStyles(el) {
+    void el.offsetWidth;
+}
+/**
+ * Resolves once the CSS transitions of `properties` on these elements have
+ * finished. Nothing running resolves immediately: no transition started, a
+ * zero duration, `prefers-reduced-motion`, an element that is not being
+ * rendered. Interrupted animations reject, which counts as finished.
+ *
+ * Only the named properties are waited on, so an app is free to keep its own
+ * animation running on a page without stalling the stack.
+ */
+export function animationsFinished(els, properties = ['transform', 'opacity']) {
+    const running = [];
+    for (const el of els) {
+        if (typeof el?.getAnimations !== 'function')
+            continue;
+        for (const animation of el.getAnimations()) {
+            const property = animation.transitionProperty;
+            if (property && properties.includes(property))
+                running.push(animation.finished.catch(() => { }));
+        }
+    }
+    return running.length ? Promise.all(running).then(() => { }) : Promise.resolve();
+}
 export const prefersReducedMotion = () => typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;
 //# sourceMappingURL=animate.js.map

package/dist/animate.js.map

@@ -1 +1 @@
-{"version":3,"file":"animate.js","sourceRoot":"","sources":["../src/animate.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"animate.js","sourceRoot":"","sources":["../src/animate.ts"],"names":[],"mappings":"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"}

package/dist/edge-pan-gesture.d.ts

@@ -28,6 +28,9 @@ export interface EdgePanGesture {
  * interactive pop from it. Built on pointer events, so it handles both mouse
  * and touch. Vertical movement early in the gesture hands the touch back to
  * native scrolling.
+ *
+ * "Leading" is whichever edge the container reads from, so in a right-to-left
+ * container the strip sits on the right and back is a drag to the left.
  */
 export declare function createEdgePanGesture(options?: Partial<EdgePanGestureOptions>): EdgePanGesture;
 //# sourceMappingURL=edge-pan-gesture.d.ts.map

package/dist/edge-pan-gesture.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"edge-pan-gesture.d.ts","sourceRoot":"","sources":["../src/edge-pan-gesture.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAwB,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAEnF,MAAM,WAAW,qBAAqB;IACpC,2DAA2D;IAC3D,SAAS,EAAE,MAAM,CAAC;IAClB,mDAAmD;IACnD,QAAQ,EAAE,OAAO,CAAC;IAClB,uDAAuD;IACvD,SAAS,EAAE,MAAM,CAAC;IAClB,qEAAqE;IACrE,kBAAkB,EAAE,MAAM,CAAC;IAC3B,oEAAoE;IACpE,iBAAiB,EAAE,MAAM,CAAC;IAC1B,kFAAkF;IAClF,gBAAgB,EAAE,MAAM,CAAC;IACzB,oFAAoF;IACpF,cAAc,EAAE,MAAM,CAAC;IACvB,eAAe,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,OAAO,EAAE,qBAAqB,CAAC;IACxC,+EAA+E;IAC/E,OAAO,IAAI,IAAI,CAAC;IAChB,MAAM,CAAC,KAAK,EAAE,eAAe,GAAG,cAAc,CAAC;IAC/C,MAAM,IAAI,IAAI,CAAC;CAChB;AAYD;;;;;GAKG;AACH,wBAAgB,oBAAoB,CAAC,OAAO,GAAE,OAAO,CAAC,qBAAqB,CAAM,GAAG,cAAc,CAqHjG"}
+{"version":3,"file":"edge-pan-gesture.d.ts","sourceRoot":"","sources":["../src/edge-pan-gesture.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAwB,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAEnF,MAAM,WAAW,qBAAqB;IACpC,2DAA2D;IAC3D,SAAS,EAAE,MAAM,CAAC;IAClB,mDAAmD;IACnD,QAAQ,EAAE,OAAO,CAAC;IAClB,uDAAuD;IACvD,SAAS,EAAE,MAAM,CAAC;IAClB,qEAAqE;IACrE,kBAAkB,EAAE,MAAM,CAAC;IAC3B,oEAAoE;IACpE,iBAAiB,EAAE,MAAM,CAAC;IAC1B,kFAAkF;IAClF,gBAAgB,EAAE,MAAM,CAAC;IACzB,oFAAoF;IACpF,cAAc,EAAE,MAAM,CAAC;IACvB,eAAe,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,OAAO,EAAE,qBAAqB,CAAC;IACxC,+EAA+E;IAC/E,OAAO,IAAI,IAAI,CAAC;IAChB,MAAM,CAAC,KAAK,EAAE,eAAe,GAAG,cAAc,CAAC;IAC/C,MAAM,IAAI,IAAI,CAAC;CAChB;AAcD;;;;;;;;GAQG;AACH,wBAAgB,oBAAoB,CAAC,OAAO,GAAE,OAAO,CAAC,qBAAqB,CAAM,GAAG,cAAc,CA4IjG"}

package/dist/edge-pan-gesture.js

@@ -3,6 +3,9 @@
  * interactive pop from it. Built on pointer events, so it handles both mouse
  * and touch. Vertical movement early in the gesture hands the touch back to
  * native scrolling.
+ *
+ * "Leading" is whichever edge the container reads from, so in a right-to-left
+ * container the strip sits on the right and back is a drag to the left.
  */
 export function createEdgePanGesture(options = {}) {
     const o = {
@@ -18,6 +21,21 @@ export function createEdgePanGesture(options = {}) {
     };
     let stack;
     let strip = null;
+    /**
+     * Which way forward is, read the same way the pages read it: `--sn-dir` when
+     * the stylesheet sets it, the container's reading direction otherwise. Taking
+     * it from one place is what keeps the drag and the transition from disagreeing
+     * about which edge is the back edge.
+     */
+    const direction = () => {
+        const style = typeof getComputedStyle === 'function' ? getComputedStyle(stack.container) : null;
+        const declared = Number(style?.getPropertyValue('--sn-dir'));
+        if (declared < 0)
+            return -1;
+        if (declared > 0)
+            return 1;
+        return style?.direction === 'rtl' ? -1 : 1;
+    };
     let drag = null;
     let suppressClick = false;
     let offs = [];
@@ -28,12 +46,14 @@ export function createEdgePanGesture(options = {}) {
             return;
         if (ev.currentTarget === stack.container && !o.anywhere)
             return;
-        drag = { id: ev.pointerId, target: ev.currentTarget, x0: ev.clientX, y0: ev.clientY, handle: null, p: 1, samples: [[ev.clientX, performance.now()]] };
+        drag = { id: ev.pointerId, target: ev.currentTarget, x0: ev.clientX, y0: ev.clientY, dir: direction(), handle: null, p: 1, samples: [[ev.clientX, performance.now()]] };
     };
     const onMove = (ev) => {
         if (!drag || ev.pointerId !== drag.id)
             return;
-        const dx = ev.clientX - drag.x0;
+        // Signed so that "forward along the drag" is always positive, whichever
+        // edge the container calls leading.
+        const dx = (ev.clientX - drag.x0) * drag.dir;
         const dy = ev.clientY - drag.y0;
         if (!drag.handle) {
             if (Math.abs(dy) > o.verticalCancelSlop && Math.abs(dy) > Math.abs(dx)) {
@@ -71,7 +91,7 @@ export function createEdgePanGesture(options = {}) {
         const s = d.samples;
         const [x1, t1] = s[0];
         const [x2, t2] = s[s.length - 1];
-        const velocity = t2 > t1 ? ((x2 - x1) / (t2 - t1)) * 1000 : 0;
+        const velocity = (t2 > t1 ? ((x2 - x1) / (t2 - t1)) * 1000 : 0) * d.dir;
         const cancelled = ev.type === 'pointercancel';
         const complete = !cancelled && (velocity > o.completeVelocity || (d.p < 1 - o.completeThreshold && velocity > o.cancelVelocity));
         // The click that follows a drag release must not activate whatever is under the pointer.
@@ -90,11 +110,17 @@ export function createEdgePanGesture(options = {}) {
     const EVENTS = { pointerdown: onDown, pointermove: onMove, pointerup: onUp, pointercancel: onUp };
     const listen = (el) => Object.entries(EVENTS).forEach(([k, f]) => el.addEventListener(k, f));
     const unlisten = (el) => Object.entries(EVENTS).forEach(([k, f]) => el.removeEventListener(k, f));
+    /**
+     * Whether the strip is shown at all is a CSS question — the stylesheet hides
+     * it when there is nothing to go back to, or when the whole page is the
+     * target — so this only has to say what is true.
+     */
     const refresh = () => {
         if (!strip)
             return;
         strip.style.width = o.edgeWidth + 'px';
-        strip.style.display = o.anywhere || stack.entries.length < 2 ? 'none' : '';
+        stack.container.classList.toggle('sn-anywhere', o.anywhere);
+        stack.container.classList.toggle('sn-can-pop', stack.entries.length > 1);
     };
     const gesture = {
         options: o,
@@ -102,8 +128,8 @@ export function createEdgePanGesture(options = {}) {
         attach(s) {
             stack = s;
             strip = document.createElement('div');
+            strip.className = 'sn-edge';
             strip.setAttribute('aria-hidden', 'true');
-            Object.assign(strip.style, { position: 'absolute', left: '0', top: '0', bottom: '0', zIndex: '10', touchAction: 'none' });
             stack.container.append(strip);
             listen(strip);
             listen(stack.container);
@@ -119,6 +145,7 @@ export function createEdgePanGesture(options = {}) {
             unlisten(strip);
             unlisten(stack.container);
             stack.container.removeEventListener('click', onClick, true);
+            stack.container.classList.remove('sn-anywhere', 'sn-can-pop');
             strip.remove();
             strip = null;
         },

package/dist/edge-pan-gesture.js.map

@@ -1 +1 @@
-{"version":3,"file":"edge-pan-gesture.js","sourceRoot":"","sources":["../src/edge-pan-gesture.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"edge-pan-gesture.js","sourceRoot":"","sources":["../src/edge-pan-gesture.ts"],"names":[],"mappings":"AAwCA;;;;;;;;GAQG;AACH,MAAM,UAAU,oBAAoB,CAAC,UAA0C,EAAE;IAC/E,MAAM,CAAC,GAA0B;QAC/B,SAAS,EAAE,EAAE;QACb,QAAQ,EAAE,KAAK;QACf,SAAS,EAAE,CAAC;QACZ,kBAAkB,EAAE,EAAE;QACtB,iBAAiB,EAAE,GAAG;QACtB,gBAAgB,EAAE,GAAG;QACrB,cAAc,EAAE,CAAC,GAAG;QACpB,eAAe,EAAE,CAAC;QAClB,GAAG,OAAO;KACX,CAAC;IAEF,IAAI,KAAsB,CAAC;IAC3B,IAAI,KAAK,GAAuB,IAAI,CAAC;IAErC;;;;;OAKG;IACH,MAAM,SAAS,GAAG,GAAW,EAAE;QAC7B,MAAM,KAAK,GAAG,OAAO,gBAAgB,KAAK,UAAU,CAAC,CAAC,CAAC,gBAAgB,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;QAChG,MAAM,QAAQ,GAAG,MAAM,CAAC,KAAK,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC,CAAC;QAC7D,IAAI,QAAQ,GAAG,CAAC;YAAE,OAAO,CAAC,CAAC,CAAC;QAC5B,IAAI,QAAQ,GAAG,CAAC;YAAE,OAAO,CAAC,CAAC;QAC3B,OAAO,KAAK,EAAE,SAAS,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC7C,CAAC,CAAC;IACF,IAAI,IAAI,GAAgB,IAAI,CAAC;IAC7B,IAAI,aAAa,GAAG,KAAK,CAAC;IAC1B,IAAI,IAAI,GAAsB,EAAE,CAAC;IAEjC,MAAM,MAAM,GAAG,CAAC,EAAgB,EAAE,EAAE;QAClC,IAAI,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;YAAE,OAAO;QACpC,IAAI,EAAE,CAAC,WAAW,KAAK,OAAO,IAAI,EAAE,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO;QAC1D,IAAI,EAAE,CAAC,aAAa,KAAK,KAAK,CAAC,SAAS,IAAI,CAAC,CAAC,CAAC,QAAQ;YAAE,OAAO;QAChE,IAAI,GAAG,EAAE,EAAE,EAAE,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,EAAE,CAAC,aAA+B,EAAE,EAAE,EAAE,EAAE,CAAC,OAAO,EAAE,EAAE,EAAE,EAAE,CAAC,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC;IAC5L,CAAC,CAAC;IAEF,MAAM,MAAM,GAAG,CAAC,EAAgB,EAAE,EAAE;QAClC,IAAI,CAAC,IAAI,IAAI,EAAE,CAAC,SAAS,KAAK,IAAI,CAAC,EAAE;YAAE,OAAO;QAC9C,wEAAwE;QACxE,oCAAoC;QACpC,MAAM,EAAE,GAAG,CAAC,EAAE,CAAC,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC;QAC7C,MAAM,EAAE,GAAG,EAAE,CAAC,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC;QAChC,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;YACjB,IAAI,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,kBAAkB,IAAI,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC;gBACvE,IAAI,GAAG,IAAI,CAAC;gBACZ,OAAO;YACT,CAAC;YACD,IAAI,EAAE,GAAG,CAAC,CAAC,SAAS;gBAAE,OAAO;YAC7B,MAAM,MAAM,GAAG,KAAK,CAAC,mBAAmB,EAAE,CAAC;YAC3C,IAAI,CAAC,MAAM,EAAE,CAAC;gBACZ,IAAI,GAAG,IAAI,CAAC;gBACZ,OAAO;YACT,CAAC;YACD,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;YACrB,IAAI,CAAC;gBACH,IAAI,CAAC,MAAM,CAAC,iBAAiB,EAAE,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC;YAChD,CAAC;YAAC,MAAM,CAAC;gBACP,4BAA4B;YAC9B,CAAC;QACH,CAAC;QACD,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC;QACnD,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,eAAe;YAAE,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;QAClE,IAAI,CAAC,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,GAAG,CAAC,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;QAC1E,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAC7B,CAAC,CAAC;IAEF,MAAM,IAAI,GAAG,CAAC,EAAgB,EAAE,EAAE;QAChC,IAAI,CAAC,IAAI,IAAI,EAAE,CAAC,SAAS,KAAK,IAAI,CAAC,EAAE;YAAE,OAAO;QAC9C,MAAM,CAAC,GAAG,IAAI,CAAC;QACf,IAAI,GAAG,IAAI,CAAC;QACZ,IAAI,CAAC,CAAC,CAAC,MAAM;YAAE,OAAO;QACtB,MAAM,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC;QACpB,MAAM,CAAC,EAAE,EAAE,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;QACtB,MAAM,CAAC,EAAE,EAAE,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QACjC,MAAM,QAAQ,GAAG,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,GAAG,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC;QACxE,MAAM,SAAS,GAAG,EAAE,CAAC,IAAI,KAAK,eAAe,CAAC;QAC9C,MAAM,QAAQ,GAAG,CAAC,SAAS,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,gBAAgB,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,iBAAiB,IAAI,QAAQ,GAAG,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC;QACjI,yFAAyF;QACzF,aAAa,GAAG,IAAI,CAAC;QACrB,UAAU,CAAC,GAAG,EAAE;YACd,aAAa,GAAG,KAAK,CAAC;QACxB,CAAC,EAAE,CAAC,CAAC,CAAC;QACN,KAAK,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;IAC/C,CAAC,CAAC;IAEF,MAAM,OAAO,GAAG,CAAC,EAAS,EAAE,EAAE;QAC5B,IAAI,aAAa,EAAE,CAAC;YAClB,EAAE,CAAC,eAAe,EAAE,CAAC;YACrB,EAAE,CAAC,cAAc,EAAE,CAAC;QACtB,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,MAAM,GAA+C,EAAE,WAAW,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC;IAC9I,MAAM,MAAM,GAAG,CAAC,EAAe,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC,EAAE,CAAkB,CAAC,CAAC,CAAC;IAC3H,MAAM,QAAQ,GAAG,CAAC,EAAe,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC,mBAAmB,CAAC,CAAC,EAAE,CAAkB,CAAC,CAAC,CAAC;IAEhI;;;;OAIG;IACH,MAAM,OAAO,GAAG,GAAG,EAAE;QACnB,IAAI,CAAC,KAAK;YAAE,OAAO;QACnB,KAAK,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC,CAAC,SAAS,GAAG,IAAI,CAAC;QACvC,KAAK,CAAC,SAAS,CAAC,SAAS,CAAC,MAAM,CAAC,aAAa,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC;QAC5D,KAAK,CAAC,SAAS,CAAC,SAAS,CAAC,MAAM,CAAC,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;IAC3E,CAAC,CAAC;IAEF,MAAM,OAAO,GAAmB;QAC9B,OAAO,EAAE,CAAC;QACV,OAAO;QACP,MAAM,CAAC,CAAC;YACN,KAAK,GAAG,CAAC,CAAC;YACV,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YACtC,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;YAC5B,KAAK,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;YAC1C,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;YAC9B,MAAM,CAAC,KAAK,CAAC,CAAC;YACd,MAAM,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;YACxB,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,OAAO,EAAE,OAAO,EAAE,IAAI,CAAC,CAAC;YACzD,IAAI,GAAI,CAAC,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,OAAO,CAAW,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC;YACvF,OAAO,EAAE,CAAC;YACV,OAAO,OAAO,CAAC;QACjB,CAAC;QACD,MAAM;YACJ,IAAI,CAAC,KAAK;gBAAE,OAAO;YACnB,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;YACzB,QAAQ,CAAC,KAAK,CAAC,CAAC;YAChB,QAAQ,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;YAC1B,KAAK,CAAC,SAAS,CAAC,mBAAmB,CAAC,OAAO,EAAE,OAAO,EAAE,IAAI,CAAC,CAAC;YAC5D,KAAK,CAAC,SAAS,CAAC,SAAS,CAAC,MAAM,CAAC,aAAa,EAAE,YAAY,CAAC,CAAC;YAC9D,KAAK,CAAC,MAAM,EAAE,CAAC;YACf,KAAK,GAAG,IAAI,CAAC;QACf,CAAC;KACF,CAAC;IACF,OAAO,OAAO,CAAC;AACjB,CAAC"}

package/dist/index.d.ts

@@ -8,7 +8,7 @@ export { createEdgePanGesture } from './edge-pan-gesture.ts';
 export type { EdgePanGesture, EdgePanGestureOptions } from './edge-pan-gesture.ts';
 export { attachBrowserHistory, isIOSBrowser } from './history-adapter.ts';
 export type { BrowserHistoryOptions } from './history-adapter.ts';
-export { cubicBezier, easings, tween, prefersReducedMotion } from './animate.ts';
+export { cubicBezier, easings, cssEasing, cssDuration, tween, commitStyles, animationsFinished, prefersReducedMotion } from './animate.ts';
 export type { Easing, TweenOptions, CancellableTween } from './animate.ts';
 export { resolveDirection, createDirectionResolver, defaultStrategies, fromHint, fromHistory, fromStack, fromLevel, fromTree, always, segmentsOf, } from './direction.ts';
 export type { Direction, DirectionOpinion, DirectionStrategy, DirectionResolver, NavigationContext, NavigationTrigger, RouteRef, LevelOptions, TreeOptions, } from './direction.ts';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,YAAY,EACV,UAAU,EACV,UAAU,EACV,cAAc,EACd,gBAAgB,EAChB,YAAY,EACZ,sBAAsB,EACtB,oBAAoB,EACpB,WAAW,EACX,WAAW,EACX,SAAS,EACT,QAAQ,EACR,YAAY,EACZ,UAAU,EACV,eAAe,EACf,aAAa,GACd,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,mBAAmB,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AACnF,YAAY,EAAE,aAAa,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAC/E,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AACzF,YAAY,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAC7D,YAAY,EAAE,cAAc,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AACnF,OAAO,EAAE,oBAAoB,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAC1E,YAAY,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,KAAK,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AACjF,YAAY,EAAE,MAAM,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAC3E,OAAO,EACL,gBAAgB,EAChB,uBAAuB,EACvB,iBAAiB,EACjB,QAAQ,EACR,WAAW,EACX,SAAS,EACT,SAAS,EACT,QAAQ,EACR,MAAM,EACN,UAAU,GACX,MAAM,gBAAgB,CAAC;AACxB,YAAY,EACV,SAAS,EACT,gBAAgB,EAChB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,QAAQ,EACR,YAAY,EACZ,WAAW,GACZ,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAE5E,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAuB,KAAK,aAAa,EAAE,KAAK,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AACzG,OAAO,EAAwB,KAAK,cAAc,EAAE,KAAK,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAE9G,MAAM,WAAW,eAAe;IAC9B,SAAS,EAAE,WAAW,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC,oBAAoB,CAAC,CAAC;IAC3C,OAAO,CAAC,EAAE,OAAO,CAAC,qBAAqB,CAAC,CAAC;CAC1C;AAED,MAAM,WAAW,QAAS,SAAQ,eAAe;IAC/C,UAAU,EAAE,aAAa,CAAC;IAC1B,OAAO,EAAE,cAAc,CAAC;CACzB;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,EAAE,SAAS,EAAE,UAAe,EAAE,OAAY,EAAE,EAAE,eAAe,GAAG,QAAQ,CAYtG"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,YAAY,EACV,UAAU,EACV,UAAU,EACV,cAAc,EACd,gBAAgB,EAChB,YAAY,EACZ,sBAAsB,EACtB,oBAAoB,EACpB,WAAW,EACX,WAAW,EACX,SAAS,EACT,QAAQ,EACR,YAAY,EACZ,UAAU,EACV,eAAe,EACf,aAAa,GACd,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,mBAAmB,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AACnF,YAAY,EAAE,aAAa,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAC/E,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AACzF,YAAY,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAC7D,YAAY,EAAE,cAAc,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AACnF,OAAO,EAAE,oBAAoB,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAC1E,YAAY,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,KAAK,EAAE,YAAY,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAC3I,YAAY,EAAE,MAAM,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAC3E,OAAO,EACL,gBAAgB,EAChB,uBAAuB,EACvB,iBAAiB,EACjB,QAAQ,EACR,WAAW,EACX,SAAS,EACT,SAAS,EACT,QAAQ,EACR,MAAM,EACN,UAAU,GACX,MAAM,gBAAgB,CAAC;AACxB,YAAY,EACV,SAAS,EACT,gBAAgB,EAChB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,QAAQ,EACR,YAAY,EACZ,WAAW,GACZ,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAE5E,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAuB,KAAK,aAAa,EAAE,KAAK,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AACzG,OAAO,EAAwB,KAAK,cAAc,EAAE,KAAK,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAE9G,MAAM,WAAW,eAAe;IAC9B,SAAS,EAAE,WAAW,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC,oBAAoB,CAAC,CAAC;IAC3C,OAAO,CAAC,EAAE,OAAO,CAAC,qBAAqB,CAAC,CAAC;CAC1C;AAED,MAAM,WAAW,QAAS,SAAQ,eAAe;IAC/C,UAAU,EAAE,aAAa,CAAC;IAC1B,OAAO,EAAE,cAAc,CAAC;CACzB;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,EAAE,SAAS,EAAE,UAAe,EAAE,OAAY,EAAE,EAAE,eAAe,GAAG,QAAQ,CAYtG"}

package/dist/index.js

@@ -3,7 +3,7 @@ export { createIOSTransition, IOS_TRANSITION_CSS_VARS } from "./ios-transition.j
 export { cssVars, parseTime, parseNumber, parseRatio, parseEasing } from "./css-vars.js";
 export { createEdgePanGesture } from "./edge-pan-gesture.js";
 export { attachBrowserHistory, isIOSBrowser } from "./history-adapter.js";
-export { cubicBezier, easings, tween, prefersReducedMotion } from "./animate.js";
+export { cubicBezier, easings, cssEasing, cssDuration, tween, commitStyles, animationsFinished, prefersReducedMotion } from "./animate.js";
 export { resolveDirection, createDirectionResolver, defaultStrategies, fromHint, fromHistory, fromStack, fromLevel, fromTree, always, segmentsOf, } from "./direction.js";
 export { STACKNAV_CSS, STACKNAV_STYLE_ID, injectStyles } from "./styles.js";
 import { NavigationStack } from "./navigation-stack.js";

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAkBxD,OAAO,EAAE,mBAAmB,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AAEnF,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAEzF,OAAO,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAE7D,OAAO,EAAE,oBAAoB,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAE1E,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,KAAK,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAEjF,OAAO,EACL,gBAAgB,EAChB,uBAAuB,EACvB,iBAAiB,EACjB,QAAQ,EACR,WAAW,EACX,SAAS,EACT,SAAS,EACT,QAAQ,EACR,MAAM,EACN,UAAU,GACX,MAAM,gBAAgB,CAAC;AAYxB,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAE5E,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,mBAAmB,EAAiD,MAAM,qBAAqB,CAAC;AACzG,OAAO,EAAE,oBAAoB,EAAmD,MAAM,uBAAuB,CAAC;AAa9G;;;;GAIG;AACH,MAAM,UAAU,cAAc,CAAC,EAAE,SAAS,EAAE,UAAU,GAAG,EAAE,EAAE,OAAO,GAAG,EAAE,EAAmB;IAC1F,MAAM,CAAC,GAAG,mBAAmB,CAAC,UAAU,CAAC,CAAC;IAC1C,MAAM,CAAC,GAAG,oBAAoB,CAAC,OAAO,CAAC,CAAC;IACxC,MAAM,KAAK,GAAG,IAAI,eAAe,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC,EAAE,CAAa,CAAC;IAC5E,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAChB,KAAK,CAAC,OAAO,GAAG,CAAC,CAAC;IAClB,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC1C,KAAK,CAAC,OAAO,GAAG,GAAG,EAAE;QACnB,CAAC,CAAC,MAAM,EAAE,CAAC;QACX,OAAO,EAAE,CAAC;IACZ,CAAC,CAAC;IACF,OAAO,KAAK,CAAC;AACf,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAkBxD,OAAO,EAAE,mBAAmB,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AAEnF,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAEzF,OAAO,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAE7D,OAAO,EAAE,oBAAoB,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAE1E,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,KAAK,EAAE,YAAY,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAE3I,OAAO,EACL,gBAAgB,EAChB,uBAAuB,EACvB,iBAAiB,EACjB,QAAQ,EACR,WAAW,EACX,SAAS,EACT,SAAS,EACT,QAAQ,EACR,MAAM,EACN,UAAU,GACX,MAAM,gBAAgB,CAAC;AAYxB,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAE5E,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,mBAAmB,EAAiD,MAAM,qBAAqB,CAAC;AACzG,OAAO,EAAE,oBAAoB,EAAmD,MAAM,uBAAuB,CAAC;AAa9G;;;;GAIG;AACH,MAAM,UAAU,cAAc,CAAC,EAAE,SAAS,EAAE,UAAU,GAAG,EAAE,EAAE,OAAO,GAAG,EAAE,EAAmB;IAC1F,MAAM,CAAC,GAAG,mBAAmB,CAAC,UAAU,CAAC,CAAC;IAC1C,MAAM,CAAC,GAAG,oBAAoB,CAAC,OAAO,CAAC,CAAC;IACxC,MAAM,KAAK,GAAG,IAAI,eAAe,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC,EAAE,CAAa,CAAC;IAC5E,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAChB,KAAK,CAAC,OAAO,GAAG,CAAC,CAAC;IAClB,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC1C,KAAK,CAAC,OAAO,GAAG,GAAG,EAAE;QACnB,CAAC,CAAC,MAAM,EAAE,CAAC;QACX,OAAO,EAAE,CAAC;IACZ,CAAC,CAAC;IACF,OAAO,KAAK,CAAC;AACf,CAAC"}

package/dist/ios-transition.d.ts

@@ -3,7 +3,13 @@ import type { Transition } from './navigation-stack.ts';
 export interface IOSTransitionOptions {
     /** ms, programmatic push/pop */
     duration: number;
-    /** the curve a programmatic push/pop runs on */
+    /**
+     * the curve a programmatic push/pop runs on. CSS runs it, so it has to be
+     * one CSS can spell: everything `cubicBezier()` and `parseEasing()` build
+     * carries a `css` property. A bare `(t) => number` of your own has none, so
+     * the pages would run `linear` while `progress` reported your curve; give it
+     * a `css` property, or write the whole transition yourself.
+     */
     ease: Easing;
     /** fraction of the width the lower page travels */
     parallax: number;
@@ -15,7 +21,7 @@ export interface IOSTransitionOptions {
     /** ms bounds for finishing an interactive pop */
     settleMin: number;
     settleMax: number;
-    /** the curve the remaining distance of an interactive pop runs on */
+    /** the curve the remaining distance of an interactive pop runs on; see `ease` */
     settleEase: Easing;
     /** px/s assumed when the pointer was slower than this */
     settleVelocityFloor: number;
@@ -45,6 +51,11 @@ export interface IOSTransition extends Transition {
  * `IOS_TRANSITION_CSS_VARS`), read when a transition starts. A variable that
  * is set wins over the JS option, so a stylesheet can slow the animation down
  * or restyle it per theme without the app rebuilding the transition.
+ *
+ * p is only ever written at the ends of a phase. The stack puts that phase's
+ * duration and curve in `--sn-t` / `--sn-e` and CSS interpolates between the
+ * two writes, so the animation costs a handful of style writes rather than one
+ * per page per frame, and runs on the compositor rather than the main thread.
  */
 export declare function createIOSTransition(options?: Partial<IOSTransitionOptions>): IOSTransition;
 //# sourceMappingURL=ios-transition.d.ts.map

package/dist/ios-transition.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ios-transition.d.ts","sourceRoot":"","sources":["../src/ios-transition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiC,KAAK,MAAM,EAAE,MAAM,cAAc,CAAC;AAE1E,OAAO,KAAK,EAA2B,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEjF,MAAM,WAAW,oBAAoB;IACnC,gCAAgC;IAChC,QAAQ,EAAE,MAAM,CAAC;IACjB,gDAAgD;IAChD,IAAI,EAAE,MAAM,CAAC;IACb,mDAAmD;IACnD,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,iEAAiE;IACjE,MAAM,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,MAAM,EAAE,MAAM,CAAC;IACf,iDAAiD;IACjD,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,qEAAqE;IACrE,UAAU,EAAE,MAAM,CAAC;IACnB,yDAAyD;IACzD,mBAAmB,EAAE,MAAM,CAAC;IAC5B,2DAA2D;IAC3D,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,kDAAkD;AAClD,eAAO,MAAM,uBAAuB,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,oBAAoB,EAAE,MAAM,CAAC,CAYvF,CAAC;AAEH,MAAM,WAAW,aAAc,SAAQ,UAAU;IAC/C,oFAAoF;IACpF,QAAQ,CAAC,OAAO,EAAE,oBAAoB,CAAC;IACvC,yFAAyF;IACzF,QAAQ,CAAC,QAAQ,EAAE,QAAQ,CAAC,oBAAoB,CAAC,CAAC;IAClD;;;;OAIG;IACH,OAAO,CAAC,EAAE,CAAC,EAAE,OAAO,GAAG,IAAI,GAAG,IAAI,CAAC;CACpC;AAKD;;;;;;;;;GASG;AACH,wBAAgB,mBAAmB,CAAC,OAAO,GAAE,OAAO,CAAC,oBAAoB,CAAM,GAAG,aAAa,CA8F9F"}
+{"version":3,"file":"ios-transition.d.ts","sourceRoot":"","sources":["../src/ios-transition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiC,KAAK,MAAM,EAAE,MAAM,cAAc,CAAC;AAE1E,OAAO,KAAK,EAA2B,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEjF,MAAM,WAAW,oBAAoB;IACnC,gCAAgC;IAChC,QAAQ,EAAE,MAAM,CAAC;IACjB;;;;;;OAMG;IACH,IAAI,EAAE,MAAM,CAAC;IACb,mDAAmD;IACnD,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,iEAAiE;IACjE,MAAM,EAAE,MAAM,CAAC;IACf,sCAAsC;IACtC,MAAM,EAAE,MAAM,CAAC;IACf,iDAAiD;IACjD,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,iFAAiF;IACjF,UAAU,EAAE,MAAM,CAAC;IACnB,yDAAyD;IACzD,mBAAmB,EAAE,MAAM,CAAC;IAC5B,2DAA2D;IAC3D,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,kDAAkD;AAClD,eAAO,MAAM,uBAAuB,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,oBAAoB,EAAE,MAAM,CAAC,CAYvF,CAAC;AAEH,MAAM,WAAW,aAAc,SAAQ,UAAU;IAC/C,oFAAoF;IACpF,QAAQ,CAAC,OAAO,EAAE,oBAAoB,CAAC;IACvC,yFAAyF;IACzF,QAAQ,CAAC,QAAQ,EAAE,QAAQ,CAAC,oBAAoB,CAAC,CAAC;IAClD;;;;OAIG;IACH,OAAO,CAAC,EAAE,CAAC,EAAE,OAAO,GAAG,IAAI,GAAG,IAAI,CAAC;CACpC;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,mBAAmB,CAAC,OAAO,GAAE,OAAO,CAAC,oBAAoB,CAAM,GAAG,aAAa,CAsG9F"}

package/dist/ios-transition.js

@@ -14,7 +14,6 @@ export const IOS_TRANSITION_CSS_VARS = /*#__PURE__*/ Object.freeze({
     settleVelocityFloor: '--sn-settle-velocity-floor',
     timeScale: '--sn-time-scale',
 });
-const DIM = /*#__PURE__*/ Symbol('dim');
 /**
  * The iOS navigation transition: the upper page slides in from the trailing
  * edge with a shadow on its leading edge, while the lower page parallaxes
@@ -24,6 +23,11 @@ const DIM = /*#__PURE__*/ Symbol('dim');
  * `IOS_TRANSITION_CSS_VARS`), read when a transition starts. A variable that
  * is set wins over the JS option, so a stylesheet can slow the animation down
  * or restyle it per theme without the app rebuilding the transition.
+ *
+ * p is only ever written at the ends of a phase. The stack puts that phase's
+ * duration and curve in `--sn-t` / `--sn-e` and CSS interpolates between the
+ * two writes, so the animation costs a handful of style writes rather than one
+ * per page per frame, and runs on the compositor rather than the main thread.
  */
 export function createIOSTransition(options = {}) {
     const o = {
@@ -61,19 +65,24 @@ export function createIOSTransition(options = {}) {
             timeScale: parseNumber(read(v.timeScale)) ?? o.timeScale,
         };
     };
-    const dimOf = (entry) => {
-        let d = entry[DIM];
-        if (!d) {
-            d = document.createElement('div');
-            d.setAttribute('aria-hidden', 'true');
-            Object.assign(d.style, { position: 'fixed', inset: '0', pointerEvents: 'none', opacity: '0', zIndex: '2147483647' });
-            entry[DIM] = d;
+    // One overlay, moved to whichever page is underneath. Everything about it
+    // except its colour and its opacity is a rule in the stylesheet.
+    let dim = null;
+    const dimOf = (lower) => {
+        if (!dim) {
+            dim = document.createElement('div');
+            dim.className = 'sn-dim';
+            dim.setAttribute('aria-hidden', 'true');
         }
-        d.style.background = r.dimColor;
-        if (d.parentElement !== entry.el)
-            entry.el.append(d);
-        return d;
+        dim.style.background = r.dimColor;
+        if (dim.parentElement !== lower.el)
+            lower.el.append(dim);
+        return dim;
     };
+    /** Four decimals is well past a subpixel, and keeps the style strings short. */
+    const round = (n) => Math.round(n * 1e4) / 1e4 || 0;
+    /** A share of the page's own width, signed by the stylesheet's reading direction. */
+    const shift = (fraction) => `translate3d(calc(${round(fraction * 100)}% * var(--sn-dir,1)),0,0)`;
     return {
         options: o,
         get resolved() {
@@ -99,23 +108,25 @@ export function createIOSTransition(options = {}) {
             if (lower)
                 dimOf(lower);
         },
+        /**
+         * The state at p, written declaratively. Two calls with `--sn-t` set to a
+         * duration make an animation; a call per pointer move with `--sn-t: 0s`
+         * makes a drag. Nothing here measures layout: the travel is a share of the
+         * page, so a resize mid-transition stays honest.
+         */
         apply(lower, upper, p) {
-            const w = upper.el.parentElement?.clientWidth ?? 0;
-            upper.el.style.transform = `translate3d(${(1 - p) * w}px,0,0)`;
+            upper.el.style.transform = shift(1 - p);
             if (lower) {
-                lower.el.style.transform = `translate3d(${-p * r.parallax * w}px,0,0)`;
+                lower.el.style.transform = shift(-p * r.parallax);
                 dimOf(lower).style.opacity = String(p * r.dimMax);
             }
         },
         end(lower, upper) {
             upper.el.style.boxShadow = '';
             upper.el.style.transform = '';
-            if (lower) {
+            if (lower)
                 lower.el.style.transform = '';
-                const d = lower[DIM];
-                if (d)
-                    d.remove();
-            }
+            dim?.remove();
         },
     };
 }