@stacknav/core 0.3.0 → 0.4.0

package/src/css-vars.ts

@@ -7,7 +7,7 @@
 // NaN, so an unreadable value falls through to its JS option instead of
 // producing an invalid transform.
 
-import { cubicBezier, easings, type Easing } from './animate.ts';
+import { cubicBezier, easings, linearEasing, type Easing } from './animate.ts';
 
 /** Looks a custom property up on an element; `undefined` when it is not set. */
 export type CSSVarReader = (name: string) => string | undefined;
@@ -69,18 +69,57 @@ const easingKeywordsOf = (): Record<string, Easing> =>
     'ease-in-out': cubicBezier(0.42, 0, 0.58, 1),
     ios: easings.ios,
     'ios-settle': easings.easeOut,
+    android: easings.android,
+    'android-settle': easings.androidSettle,
   }));
 
 /**
- * A timing keyword or `cubic-bezier(x1, y1, x2, y2)`. The x coordinates must be
- * within [0, 1], as CSS requires. Outside that range the curve is not a
- * function of time and the solver would not converge.
+ * `linear(y [x%] [x%], …)` as CSS defines it: a stop without a position sits
+ * evenly between its positioned neighbours, the first and last default to 0%
+ * and 100%, positions never go backwards, and two positions make two stops.
+ */
+function parseLinear(body: string): Easing | undefined {
+  const xs: Array<number | undefined> = [], ys: number[] = [];
+  for (const stop of body.split(',')) {
+    const [y, ...positions] = stop.trim().split(/\s+/);
+    const yn = parseNumber(y);
+    if (yn === undefined || positions.length > 2) return undefined;
+    for (const pos of positions.length ? positions : [undefined]) {
+      const xn = pos === undefined ? undefined : pos.endsWith('%') ? parseNumber(pos.slice(0, -1)) : NaN;
+      if (Number.isNaN(xn)) return undefined;
+      xs.push(xn === undefined ? undefined : xn / 100);
+      ys.push(yn);
+    }
+  }
+  if (ys.length < 2) return undefined;
+  xs[0] ??= 0;
+  xs[xs.length - 1] ??= 1;
+  for (let i = 1; i < xs.length; i++) {
+    if (xs[i] !== undefined) continue;
+    let j = i;
+    while (xs[j] === undefined) j++;
+    for (let k = i; k < j; k++) xs[k] = xs[i - 1]! + ((xs[j]! - xs[i - 1]!) * (k - i + 1)) / (j - i + 1);
+  }
+  const x = xs as number[];
+  for (let i = 1; i < x.length; i++) x[i] = Math.max(x[i], x[i - 1]);
+  return linearEasing(
+    x.map((xi, i) => [xi, ys[i]] as const),
+    `linear(${body.trim()})`,
+  );
+}
+
+/**
+ * A timing keyword, `cubic-bezier(x1, y1, x2, y2)` or `linear(…)`. The bezier's
+ * x coordinates must be within [0, 1], as CSS requires. Outside that range the
+ * curve is not a function of time and the solver would not converge.
  */
 export function parseEasing(v: string | undefined): Easing | undefined {
   if (v === undefined) return undefined;
   const s = v.trim().toLowerCase();
   const keyword = easingKeywordsOf()[s];
   if (keyword) return keyword;
+  const l = /^linear\(([^)]*)\)$/.exec(s);
+  if (l) return parseLinear(l[1]);
   const m = /^cubic-bezier\(([^)]*)\)$/.exec(s);
   if (!m) return undefined;
   const n = m[1].split(',').map((part) => parseNumber(part));

package/src/history-adapter.ts

@@ -1,4 +1,5 @@
 import type { NavigationStack } from './navigation-stack.ts';
+import { isIOSBrowser } from './platform.ts';
 
 export interface BrowserHistoryOptions {
   /** the `history.state` property that carries the depth */
@@ -45,8 +46,3 @@ export function attachBrowserHistory(stack: NavigationStack, { key = 'snDepth',
     window.removeEventListener('popstate', onPopState);
   };
 }
-
-export function isIOSBrowser(): boolean {
-  if (typeof navigator === 'undefined') return false;
-  return /iP(hone|ad|od)/.test(navigator.platform) || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);
-}

package/src/index.ts

@@ -1,3 +1,4 @@
+export type { SwipeBackMode } from './swipe-back.ts';
 export { NavigationStack } from './navigation-stack.ts';
 export type {
   StackEntry,
@@ -16,15 +17,15 @@ export type {
   TransitionEvent,
   ProgressEvent,
 } from './navigation-stack.ts';
-export { createIOSTransition, IOS_TRANSITION_CSS_VARS } from './ios-transition.ts';
-export type { IOSTransition, IOSTransitionOptions } from './ios-transition.ts';
+export { createNativeTransition, nativeTransitionPreset, NATIVE_TRANSITION_CSS_VARS } from './native-transition.ts';
+export type { NativeTransition, NativeTransitionOptions, NativeTransitionPreset } from './native-transition.ts';
 export { cssVars, parseTime, parseNumber, parseRatio, parseEasing } from './css-vars.ts';
 export type { CSSVarReader } from './css-vars.ts';
-export { createEdgePanGesture } from './edge-pan-gesture.ts';
-export type { EdgePanGesture, EdgePanGestureOptions } from './edge-pan-gesture.ts';
-export { attachBrowserHistory, isIOSBrowser } from './history-adapter.ts';
+export { attachBrowserHistory } from './history-adapter.ts';
 export type { BrowserHistoryOptions } from './history-adapter.ts';
-export { cubicBezier, easings, cssEasing, cssDuration, tween, commitStyles, animationsFinished, prefersReducedMotion } from './animate.ts';
+export { detectPlatform, isIOSBrowser, isAndroidBrowser } from './platform.ts';
+export type { Platform } from './platform.ts';
+export { cubicBezier, linearEasing, easings, cssEasing, cssDuration, tween, commitStyles, animationsFinished, prefersReducedMotion, matchesMedia, isTouchPrimary } from './animate.ts';
 export type { Easing, TweenOptions, CancellableTween } from './animate.ts';
 export {
   resolveDirection,
@@ -52,34 +53,58 @@ export type {
 export { STACKNAV_CSS, STACKNAV_STYLE_ID, injectStyles } from './styles.ts';
 
 import { NavigationStack } from './navigation-stack.ts';
-import { createIOSTransition, type IOSTransition, type IOSTransitionOptions } from './ios-transition.ts';
-import { createEdgePanGesture, type EdgePanGesture, type EdgePanGestureOptions } from './edge-pan-gesture.ts';
+import { createNativeTransition, type NativeTransition, type NativeTransitionOptions } from './native-transition.ts';
 
-export interface IOSStackOptions {
+import { suppressBrowserSwipe, type SwipeBackMode } from './swipe-back.ts';
+
+export interface NativeStackOptions {
   container: HTMLElement;
-  transition?: Partial<IOSTransitionOptions>;
-  gesture?: Partial<EdgePanGestureOptions>;
+  transition?: Partial<NativeTransitionOptions>;
+  /** Default browser. Disabled requests document-wide browser swipe suppression. */
+  swipeBack?: SwipeBackMode;
 }
 
-export interface IOSStack extends NavigationStack {
-  transition: IOSTransition;
-  gesture: EdgePanGesture;
+export interface NativeStack extends NavigationStack {
+  transition: NativeTransition;
+  readonly swipeBack: SwipeBackMode;
+  /** Changes the policy without replacing pages or changing browser history. */
+  setSwipeBack(mode: SwipeBackMode): void;
 }
 
 /**
- * Wires the three pieces together in one call: a stack in `container`, the iOS
- * transition, and the edge-pan gesture. The gesture is exposed as
- * `stack.gesture`, and destroying the stack detaches it.
+ * Wires the two pieces together in one call: a stack in `container` and the
+ * platform's native transition. The browser keeps the back gesture unless
+ * `disabled` asks for suppression; destroying releases that request.
+ *
+ * There is no gesture recognizer here on purpose. In a browser tab the browser
+ * already owns the edge and will not give it up, so a second recognizer reads
+ * as two backs at once. Apps that own the edge -- an installed PWA, a native
+ * webview -- can drive `beginInteractivePop()` from their own pointer handling.
  */
-export function createIOSStack({ container, transition = {}, gesture = {} }: IOSStackOptions): IOSStack {
-  const t = createIOSTransition(transition);
-  const g = createEdgePanGesture(gesture);
-  const stack = new NavigationStack({ container, transition: t }) as IOSStack;
-  g.attach(stack);
-  stack.gesture = g;
+export function createNativeStack({ container, transition = {}, swipeBack = 'browser' }: NativeStackOptions): NativeStack {
+  const t = createNativeTransition(transition);
+  const stack = new NavigationStack({ container, transition: t }) as NativeStack;
+  let mode: SwipeBackMode | undefined;
+  let release: (() => void) | undefined;
+  let destroyed = false;
+  Object.defineProperty(stack, 'swipeBack', { get: () => mode });
+  stack.setSwipeBack = (next) => {
+    if (destroyed || next === mode) return;
+    if (next !== 'browser' && next !== 'disabled') throw new TypeError('Invalid swipeBack mode');
+    if (next === 'browser') {
+      release?.();
+      release = undefined;
+    } else {
+      release ??= suppressBrowserSwipe(container);
+    }
+    mode = next;
+  };
+  stack.setSwipeBack(swipeBack);
   const destroy = stack.destroy.bind(stack);
   stack.destroy = () => {
-    g.detach();
+    destroyed = true;
+    release?.();
+    release = undefined;
     destroy();
   };
   return stack;

package/src/{ios-transition.ts → native-transition.ts}

@@ -1,20 +1,33 @@
 import { easings, prefersReducedMotion, type Easing } from './animate.ts';
 import { cssVars, parseEasing, parseNumber, parseRatio, parseTime } from './css-vars.ts';
 import type { SettleInput, StackEntry, Transition } from './navigation-stack.ts';
+import { detectPlatform, type Platform } from './platform.ts';
 
-export interface IOSTransitionOptions {
+export interface NativeTransitionOptions {
+  /**
+   * Whose push/pop to imitate. `auto` (the default) asks the browser and
+   * falls back to `ios`. It picks the defaults for everything below; an
+   * option given explicitly wins over the platform's, as a CSS variable wins
+   * over both.
+   */
+  platform: Platform | 'auto';
   /** ms, programmatic push/pop */
   duration: number;
   /**
    * 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.
+   * one CSS can spell: everything `cubicBezier()`, `bezierPath()` 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 upper page travels (1 = from off-screen; Android slides a short way and fades) */
+  travel: number;
   /** fraction of the width the lower page travels */
   parallax: number;
+  /** opacity of the upper page when fully closed (1 = no fade) */
+  fade: number;
   dimColor: string;
   /** lower-page overlay opacity at p = 1 (≈0.35 suits dark UIs) */
   dimMax: number;
@@ -31,11 +44,33 @@ export interface IOSTransitionOptions {
   timeScale: number;
 }
 
+/** Every option except the platform, which is decided once and has no CSS variable. */
+export type NativeTransitionPreset = Readonly<Omit<NativeTransitionOptions, 'platform'>>;
+
+/**
+ * Each platform's own push/pop, as its system animates it.
+ *
+ * - `ios`: UIKit's navigation push. The upper page slides the full width with
+ *   a shadow on its leading edge, the lower page parallaxes 30% and dims.
+ * - `android`: the framework's activity open/close since Android 13
+ *   (`activity_open_enter.xml` and friends): both pages slide 96 dp, about a
+ *   quarter of a phone, over 450 ms on `fast_out_extra_slow_in`, and the
+ *   upper page fades through the first part of it. No shadow, no dim.
+ */
+export function nativeTransitionPreset(platform: Platform): NativeTransitionPreset {
+  const shared = { settleMin: 120, settleMax: 400, settleVelocityFloor: 900, timeScale: 1, dimColor: '#000' };
+  return platform === 'android'
+    ? { ...shared, duration: 450, ease: easings.android, travel: 0.25, parallax: 0.25, fade: 0, dimMax: 0, shadow: 'none', settleEase: easings.androidSettle }
+    : { ...shared, duration: 500, ease: easings.ios, travel: 1, parallax: 0.3, fade: 1, dimMax: 0.1, shadow: '-3px 0 14px rgba(0,0,0,0.16)', settleEase: easings.easeOut };
+}
+
 /** The CSS custom property behind each option. */
-export const IOS_TRANSITION_CSS_VARS: Readonly<Record<keyof IOSTransitionOptions, string>> = /*#__PURE__*/ Object.freeze({
+export const NATIVE_TRANSITION_CSS_VARS: Readonly<Record<keyof NativeTransitionPreset, string>> = /*#__PURE__*/ Object.freeze({
   duration: '--sn-duration',
   ease: '--sn-easing',
+  travel: '--sn-travel',
   parallax: '--sn-parallax',
+  fade: '--sn-fade',
   dimColor: '--sn-dim-color',
   dimMax: '--sn-dim-max',
   shadow: '--sn-shadow',
@@ -46,11 +81,11 @@ export const IOS_TRANSITION_CSS_VARS: Readonly<Record<keyof IOSTransitionOptions
   timeScale: '--sn-time-scale',
 });
 
-export interface IOSTransition extends Transition {
-  /** The JS options: the defaults with the caller's merged in. Mutable at runtime. */
-  readonly options: IOSTransitionOptions;
+export interface NativeTransition extends Transition {
+  /** The JS options: the platform's preset with the caller's merged in. `platform` is the one chosen. Mutable at runtime. */
+  readonly options: NativeTransitionOptions & { platform: Platform };
   /** The values currently in force: `options` with the CSS variables applied over them. */
-  readonly resolved: Readonly<IOSTransitionOptions>;
+  readonly resolved: Readonly<NativeTransitionOptions & { platform: Platform }>;
   /**
    * Re-reads the CSS variables, from `el` or from the container of the last
    * transition. Called at the start of every transition. Call it directly
@@ -60,47 +95,40 @@ export interface IOSTransition extends Transition {
 }
 
 /**
- * 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
- * toward the leading edge and dims. Every value is a function of one number, p.
+ * The platform's navigation transition: the upper page slides in from the
+ * trailing edge while the lower page parallaxes toward the leading edge. On
+ * iOS the upper page travels the full width under a shadow and the lower page
+ * dims; on Android both travel a short way and the upper page fades. Every
+ * value is a function of one number, p.
  *
  * Every option is also a CSS custom property on the container (see
- * `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.
+ * `NATIVE_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: Partial<IOSTransitionOptions> = {}): IOSTransition {
-  const o: IOSTransitionOptions = {
-    duration: 500,
-    ease: easings.ios,
-    parallax: 0.3,
-    dimColor: '#000',
-    dimMax: 0.1,
-    shadow: '-3px 0 14px rgba(0,0,0,0.16)',
-    settleMin: 120,
-    settleMax: 400,
-    settleEase: easings.easeOut,
-    settleVelocityFloor: 900,
-    timeScale: 1,
-    ...options,
-  };
+export function createNativeTransition(options: Partial<NativeTransitionOptions> = {}): NativeTransition {
+  const platform = !options.platform || options.platform === 'auto' ? detectPlatform() : options.platform;
+  const o: NativeTransitionOptions & { platform: Platform } = { ...nativeTransitionPreset(platform), ...options, platform };
 
   let root: Element | null = null;
-  let r: IOSTransitionOptions = { ...o };
+  let r: NativeTransitionOptions & { platform: Platform } = { ...o };
 
   const refresh = (el?: Element | null): void => {
     if (el !== undefined) root = el;
     const read = cssVars(root);
-    const v = IOS_TRANSITION_CSS_VARS;
+    const v = NATIVE_TRANSITION_CSS_VARS;
     r = {
+      platform: o.platform,
       duration: parseTime(read(v.duration)) ?? o.duration,
       ease: parseEasing(read(v.ease)) ?? o.ease,
+      travel: parseRatio(read(v.travel)) ?? o.travel,
       parallax: parseRatio(read(v.parallax)) ?? o.parallax,
+      fade: parseRatio(read(v.fade)) ?? o.fade,
       dimColor: read(v.dimColor) ?? o.dimColor,
       dimMax: parseRatio(read(v.dimMax)) ?? o.dimMax,
       shadow: read(v.shadow) ?? o.shadow,
@@ -110,10 +138,11 @@ export function createIOSTransition(options: Partial<IOSTransitionOptions> = {})
       settleVelocityFloor: parseNumber(read(v.settleVelocityFloor)) ?? o.settleVelocityFloor,
       timeScale: parseNumber(read(v.timeScale)) ?? o.timeScale,
     };
+    if (dim?.parentElement) dim.style.setProperty('--sn-dim-fallback', o.dimColor);
   };
 
   // One overlay, moved to whichever page is underneath. Everything about it
-  // except its colour and its opacity is a rule in the stylesheet.
+  // except its opacity is a rule in the stylesheet; JS supplies the fallback colour.
   let dim: HTMLElement | null = null;
   const dimOf = (lower: StackEntry): HTMLElement => {
     if (!dim) {
@@ -121,7 +150,7 @@ export function createIOSTransition(options: Partial<IOSTransitionOptions> = {})
       dim.className = 'sn-dim';
       dim.setAttribute('aria-hidden', 'true');
     }
-    dim.style.background = r.dimColor;
+    dim.style.setProperty('--sn-dim-fallback', o.dimColor);
     if (dim.parentElement !== lower.el) lower.el.append(dim);
     return dim;
   };
@@ -133,7 +162,7 @@ export function createIOSTransition(options: Partial<IOSTransitionOptions> = {})
 
   return {
     options: o,
-    get resolved(): Readonly<IOSTransitionOptions> {
+    get resolved(): Readonly<NativeTransitionOptions & { platform: Platform }> {
       return r;
     },
     refresh,
@@ -153,7 +182,7 @@ export function createIOSTransition(options: Partial<IOSTransitionOptions> = {})
 
     begin(lower, upper) {
       refresh(upper.el.parentElement);
-      upper.el.style.boxShadow = r.shadow;
+      upper.el.style.boxShadow = `var(--sn-shadow, ${o.shadow})`;
       if (lower) dimOf(lower);
     },
     /**
@@ -163,15 +192,19 @@ export function createIOSTransition(options: Partial<IOSTransitionOptions> = {})
      * page, so a resize mid-transition stays honest.
      */
     apply(lower, upper, p) {
-      upper.el.style.transform = shift(1 - p);
+      upper.el.style.transform = shift((1 - p) * r.travel);
+      // Only a look that fades writes opacity: a property that is not written
+      // starts no transition, and a page's own opacity is left alone.
+      if (r.fade < 1) upper.el.style.opacity = String(round(r.fade + (1 - r.fade) * p));
       if (lower) {
         lower.el.style.transform = shift(-p * r.parallax);
-        dimOf(lower).style.opacity = String(p * r.dimMax);
+        dim!.style.opacity = String(p * r.dimMax);
       }
     },
     end(lower, upper) {
       upper.el.style.boxShadow = '';
       upper.el.style.transform = '';
+      upper.el.style.opacity = '';
       if (lower) lower.el.style.transform = '';
       dim?.remove();
     },

package/src/navigation-stack.ts

@@ -92,7 +92,9 @@ export class NavigationStack {
   readonly pageClass: string;
   entries: StackEntry[] = [];
   busy = false;
-  private _queue: Array<() => void> = [];
+  private _destroyed = false;
+  private _activeTransition: { lower: StackEntry | null; upper: StackEntry } | null = null;
+  private _queue: Array<{ run: () => void; cancel: () => void }> = [];
   private _listeners = new Map<string, Set<Listener<unknown>>>();
 
   constructor({ container, transition, pageClass = 'sn-page' }: NavigationStackOptions) {
@@ -130,6 +132,7 @@ export class NavigationStack {
     };
   }
   private _emit<K extends keyof StackEvents>(event: K, detail: StackEvents[K]): void {
+    if (this._destroyed) return;
     const set = this._listeners.get(event);
     if (set) set.forEach((fn) => fn(detail));
   }
@@ -251,13 +254,16 @@ export class NavigationStack {
     this._begin(lower, upper, 'interactive');
     return {
       update: (v) => {
+        if (this._destroyed) return;
         p = Math.min(1, Math.max(0, v));
         this._apply(lower, upper, p);
       },
       finish: async ({ complete, velocity = 0 }) => {
+        if (this._destroyed) return;
         const remainingPx = (complete ? p : 1 - p) * this.width();
         const { duration, ease } = this.transition.settle({ remainingPx, velocity });
         await this._animate(lower, upper, p, complete ? 0 : 1, duration, ease);
+        if (this._destroyed) return;
         this._end(lower, upper, 'interactive');
         if (complete) {
           this.entries.pop();
@@ -271,7 +277,20 @@ export class NavigationStack {
     };
   }
 
+  /** Terminal: queued and subsequent navigation reject with AbortError. */
   destroy(): void {
+    if (this._destroyed) return;
+    this._destroyed = true;
+    this._listeners.clear();
+    for (const task of this._queue.splice(0)) task.cancel();
+    this.busy = false;
+    const active = this._activeTransition;
+    this._activeTransition = null;
+    if (active) {
+      this.transition.end?.(active.lower, active.upper);
+      // During a pop the outgoing page has already left entries.
+      if (!this.entries.includes(active.upper)) this._unmount(active.upper);
+    }
     while (this.entries.length) this._unmount(this.entries.pop()!);
     this.container.classList.remove('sn-container', 'sn-busy');
     this.container.style.removeProperty('--sn-t');
@@ -280,6 +299,7 @@ export class NavigationStack {
 
   // -------------------------------------------------------------- internals
   private _setBusy(v: boolean): void {
+    if (this._destroyed) return;
     this.busy = v;
     this.container.classList.toggle('sn-busy', v);
   }
@@ -287,6 +307,8 @@ export class NavigationStack {
   /** Serializes operations: while a transition runs, later calls wait their turn. */
   private _run<R>(fn: () => Promise<R>): Promise<R> {
     return new Promise<R>((resolve, reject) => {
+      const cancel = () => reject(new DOMException('NavigationStack has been destroyed', 'AbortError'));
+      if (this._destroyed) return cancel();
       const task = async () => {
         this._setBusy(true);
         try {
@@ -298,12 +320,12 @@ export class NavigationStack {
           this._drain();
         }
       };
-      if (this.busy) this._queue.push(task);
+      if (this.busy) this._queue.push({ run: task, cancel });
       else task();
     });
   }
   private _drain(): void {
-    if (!this.busy && this._queue.length) this._queue.shift()!();
+    if (!this._destroyed && !this.busy && this._queue.length) this._queue.shift()!.run();
   }
 
   private async _popRevealing(depth: number, animated: boolean, source: NavigationSource): Promise<StackEntry> {
@@ -312,6 +334,7 @@ export class NavigationStack {
     while (this.entries.length > depth) removed.push(this._unmount(this.entries.pop()!)); // intermediate pages: removed without animation
     const lower = this.top;
     await this._transition(lower, upper, 1, 0, animated, 'pop');
+    if (this._destroyed) return upper;
     removed.push(this._unmount(upper));
     this._settle();
     this._emit('pop', { entry: upper, removed, entries: this.entries.slice(), source });
@@ -344,26 +367,26 @@ export class NavigationStack {
    * `prefers-reduced-motion` reduces every phase to.
    */
   private _timing(duration: number, ease?: Easing): void {
+    if (this._destroyed) return;
     this.container.style.setProperty('--sn-t', cssDuration(duration));
     this.container.style.setProperty('--sn-e', cssEasing(ease));
   }
 
   private _begin(lower: StackEntry | null, upper: StackEntry, kind: TransitionKind): void {
+    this._activeTransition = { lower, upper };
     this._timing(0);
     lower?.el.classList.add('sn-page-visible', 'sn-page-lower');
     upper.el.classList.add('sn-page-visible', 'sn-page-upper');
     this.transition.begin?.(lower, upper);
     this._emit('transitionstart', { lower, upper, kind });
   }
-  /** Writes the state at p without announcing it: the ticker reports the way there. */
-  private _write(lower: StackEntry | null, upper: StackEntry, p: number): void {
-    this.transition.apply(lower, upper, p);
-  }
   private _apply(lower: StackEntry | null, upper: StackEntry, p: number): void {
-    this._write(lower, upper, p);
+    this.transition.apply(lower, upper, p);
     this._emit('progress', { lower, upper, p });
   }
   private _end(lower: StackEntry | null, upper: StackEntry, kind: TransitionKind): void {
+    if (this._destroyed) return;
+    this._activeTransition = null;
     this._timing(0);
     upper.el.classList.remove('sn-page-upper');
     lower?.el.classList.remove('sn-page-lower');
@@ -377,10 +400,10 @@ export class NavigationStack {
    * then wait to be told they arrived. No frame of it is ours.
    */
   private async _animate(lower: StackEntry | null, upper: StackEntry, from: number, to: number, duration: number, ease: Easing): Promise<void> {
-    if (duration <= 0) return this._apply(lower, upper, to);
+    if (duration <= 0 || from === to) return this._apply(lower, upper, to);
     commitStyles(upper.el);
     this._timing(duration, ease);
-    this._write(lower, upper, to);
+    this.transition.apply(lower, upper, to);
     const ticker = this._ticker(lower, upper, from, to, duration, ease);
     await animationsFinished([upper.el, lower?.el]);
     ticker?.cancel();

package/src/platform.ts

@@ -0,0 +1,23 @@
+// Which native platform the page is running on, so the transition can follow
+// that platform's own push/pop. Nothing here is certain: user agents lie, and
+// desktop browsers are neither. iOS is the default when nothing is recognized,
+// because that is the look most web apps expect from a stack transition.
+
+export type Platform = 'ios' | 'android';
+
+export function isIOSBrowser(): boolean {
+  if (typeof navigator === 'undefined') return false;
+  return /iP(hone|ad|od)/.test(navigator.platform) || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);
+}
+
+export function isAndroidBrowser(): boolean {
+  if (typeof navigator === 'undefined') return false;
+  const hints = (navigator as { userAgentData?: { platform?: string } }).userAgentData;
+  if (hints?.platform) return hints.platform === 'Android';
+  return /\bAndroid\b/.test(navigator.userAgent ?? '');
+}
+
+/** `android` on an Android browser, otherwise `ios`. */
+export function detectPlatform(): Platform {
+  return !isIOSBrowser() && isAndroidBrowser() ? 'android' : 'ios';
+}

package/src/styles.ts

@@ -1,7 +1,7 @@
 /**
  * The only styles the engine needs. These cover layout and the motion itself,
  * not appearance: the look lives in the transition and is tuned through the
- * `--sn-*` custom properties (see `IOS_TRANSITION_CSS_VARS` and the README).
+ * `--sn-*` custom properties (see `NATIVE_TRANSITION_CSS_VARS` and the README).
  * Those properties are documented but deliberately not declared, because
  * leaving one unset is what makes its JS default apply.
  *
@@ -20,8 +20,7 @@
  * - `.sn-container:dir(rtl)`: reading direction is a CSS question, so the
  *   transform the engine writes is signed by `--sn-dir` rather than by JS.
  * - `.sn-page`: absolutely fills the container and is its own scroll container.
- *   `touch-action: pan-y` keeps vertical scrolling native while horizontal
- *   drags reach the gesture; `visibility: hidden` keeps pages beneath the top
+ *   `visibility: hidden` keeps pages beneath the top
  *   mounted (scroll position, form state) but out of sight and out of the
  *   accessibility tree. The identity transform is the resting state, and the
  *   containing block the dim overlay is positioned against.
@@ -30,28 +29,27 @@
  *   transition in flight. Only these transition, and only these are promoted,
  *   so a deep stack costs nothing at rest. Both `transform` and `opacity` are
  *   listed, so a transition of your own can fade a page as well as move it and
- *   still be run by the browser; the iOS look only ever changes `transform`,
- *   and a property that does not change starts no transition.
- * - `.sn-dim`: the overlay the lower page dims behind. Its colour and its
- *   opacity are written by the transition; everything else is here.
- * - `.sn-edge`: the strip the swipe-back gesture listens on. `inset-inline-start`
- *   puts it on the leading edge in either reading direction; its width is the
- *   gesture's `edgeWidth` option, and whether it is shown at all follows from
- *   the container's classes.
+ *   still be run by the browser; the iOS look only ever changes `transform`
+ *   (the Android look fades as well), and a property that does not change
+ *   starts no transition.
+ * - `.sn-dim`: the overlay the lower page dims behind. CSS resolves its colour;
+ *   the transition supplies a fallback colour and writes its opacity.
  * - `.sn-busy`: no clicks land on a page that is mid-transition, and a drag
  *   does not select the text under it.
+ * - `prefers-reduced-motion`: forces the phase duration to zero in CSS. The
+ *   `!important` is intentional: it must override the inline `--sn-t` written
+ *   by the engine, including when the preference changes during a transition.
  */
 export const STACKNAV_CSS =
   '.sn-container{position:relative;overflow:hidden}' +
   '.sn-container:dir(rtl){--sn-dir:-1}' +
-  '.sn-page{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;touch-action:pan-y;visibility:hidden;transform:translate3d(0,0,0)}' +
+  '.sn-page{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;visibility:hidden;transform:translate3d(0,0,0)}' +
   '.sn-page-visible{visibility:visible}' +
   '.sn-page-upper,.sn-page-lower{will-change:transform;transition-property:transform,opacity;transition-duration:var(--sn-t,0s);transition-timing-function:var(--sn-e,linear)}' +
-  '.sn-dim{position:fixed;inset:0;z-index:2147483647;pointer-events:none;opacity:0;transition:opacity var(--sn-t,0s) var(--sn-e,linear)}' +
-  '.sn-edge{position:absolute;inset-block:0;inset-inline-start:0;z-index:10;touch-action:none}' +
-  '.sn-container:not(.sn-can-pop) .sn-edge,.sn-container.sn-anywhere .sn-edge{display:none}' +
+  '.sn-dim{position:fixed;inset:0;z-index:2147483647;pointer-events:none;background:var(--sn-dim-color,var(--sn-dim-fallback,#000));opacity:0;transition:opacity var(--sn-t,0s) var(--sn-e,linear)}' +
   '.sn-busy{user-select:none;-webkit-user-select:none}' +
-  '.sn-busy .sn-page{pointer-events:none}';
+  '.sn-busy .sn-page{pointer-events:none}' +
+  '@media(prefers-reduced-motion:reduce){.sn-container{--sn-t:0s!important}}';
 
 export const STACKNAV_STYLE_ID = 'stacknav-styles';