@stacknav/core 0.3.1 → 0.4.0

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,
@@ -134,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,
@@ -164,7 +192,10 @@ 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);
         dim!.style.opacity = String(p * r.dimMax);
@@ -173,6 +204,7 @@ export function createIOSTransition(options: Partial<IOSTransitionOptions> = {})
     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,11 +367,13 @@ 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');
@@ -360,6 +385,8 @@ export class NavigationStack {
     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');

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,14 +29,11 @@
  *   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.
+ *   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-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.
  * - `.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
@@ -47,12 +43,10 @@
 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;background:var(--sn-dim-color,var(--sn-dim-fallback,#000));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-busy{user-select:none;-webkit-user-select:none}' +
   '.sn-busy .sn-page{pointer-events:none}' +
   '@media(prefers-reduced-motion:reduce){.sn-container{--sn-t:0s!important}}';

package/src/swipe-back.ts

@@ -0,0 +1,35 @@
+/** Browser suppression is best effort; browser buttons and OS gestures remain available. */
+export type SwipeBackMode = 'browser' | 'disabled';
+
+interface Suppression {
+  count: number;
+  value: string;
+  priority: string;
+}
+
+// Several outlets can share one viewport. Restore it only after the last
+// suppression request is released, including when stacks are destroyed.
+const suppressions = /*#__PURE__*/ new WeakMap<HTMLElement, Suppression>();
+
+export function suppressBrowserSwipe(container: HTMLElement): () => void {
+  const root = container.ownerDocument.documentElement;
+  const property = 'overscroll-behavior-x';
+  let state = suppressions.get(root);
+  if (!state) {
+    state = { count: 0, value: root.style.getPropertyValue(property), priority: root.style.getPropertyPriority(property) };
+    suppressions.set(root, state);
+    root.style.setProperty(property, 'contain', 'important');
+  }
+  state.count++;
+  let released = false;
+  return () => {
+    if (released) return;
+    released = true;
+    if (--state.count) return;
+    suppressions.delete(root);
+    // Do not overwrite a newer declaration installed by the application.
+    if (root.style.getPropertyValue(property) !== 'contain' || root.style.getPropertyPriority(property) !== 'important') return;
+    if (state.value) root.style.setProperty(property, state.value, state.priority);
+    else root.style.removeProperty(property);
+  };
+}

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

@@ -1,36 +0,0 @@
-import type { NavigationStack } from './navigation-stack.ts';
-export interface EdgePanGestureOptions {
-    /** px strip on the leading edge that starts the gesture */
-    edgeWidth: number;
-    /** recognize the drag from anywhere on the page */
-    anywhere: boolean;
-    /** px of horizontal movement before the drag begins */
-    startSlop: number;
-    /** px of vertical movement that hands the touch back to scrolling */
-    verticalCancelSlop: number;
-    /** fraction of the width dragged that completes without velocity */
-    completeThreshold: number;
-    /** px/s toward the trailing edge that completes the pop regardless of distance */
-    completeVelocity: number;
-    /** px/s back toward the leading edge that cancels the pop regardless of distance */
-    cancelVelocity: number;
-    velocitySamples: number;
-}
-export interface EdgePanGesture {
-    readonly options: EdgePanGestureOptions;
-    /** Re-reads options changed at runtime, such as `edgeWidth` and `anywhere`. */
-    refresh(): void;
-    attach(stack: NavigationStack): EdgePanGesture;
-    detach(): void;
-}
-/**
- * Recognizes a horizontal drag from the leading edge and drives the stack's
- * 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 +0,0 @@
-{"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

@@ -1,155 +0,0 @@
-/**
- * Recognizes a horizontal drag from the leading edge and drives the stack's
- * 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 = {
-        edgeWidth: 28,
-        anywhere: false,
-        startSlop: 6,
-        verticalCancelSlop: 10,
-        completeThreshold: 0.5,
-        completeVelocity: 500,
-        cancelVelocity: -500,
-        velocitySamples: 6,
-        ...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 = [];
-    const onDown = (ev) => {
-        if (drag || !stack.canPop())
-            return;
-        if (ev.pointerType === 'mouse' && ev.button !== 0)
-            return;
-        if (!o.anywhere && ev.target !== strip)
-            return;
-        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;
-        // 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)) {
-                drag = null;
-                return;
-            }
-            if (dx < o.startSlop)
-                return;
-            const handle = stack.beginInteractivePop();
-            if (!handle) {
-                drag = null;
-                return;
-            }
-            drag.handle = handle;
-            try {
-                drag.target.setPointerCapture?.(ev.pointerId);
-            }
-            catch {
-                /* capture is best-effort */
-            }
-        }
-        drag.samples.push([ev.clientX, performance.now()]);
-        if (drag.samples.length > o.velocitySamples)
-            drag.samples.shift();
-        drag.p = 1 - Math.min(1, Math.max(0, (dx - o.startSlop) / stack.width()));
-        drag.handle.update(drag.p);
-    };
-    const onUp = (ev) => {
-        if (!drag || ev.pointerId !== drag.id)
-            return;
-        const d = drag;
-        drag = null;
-        if (!d.handle)
-            return;
-        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) * 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.
-        suppressClick = true;
-        setTimeout(() => {
-            suppressClick = false;
-        }, 0);
-        void d.handle.finish({ complete, velocity });
-    };
-    const onClick = (ev) => {
-        if (suppressClick) {
-            ev.stopPropagation();
-            ev.preventDefault();
-        }
-    };
-    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';
-        stack.container.classList.toggle('sn-anywhere', o.anywhere);
-        stack.container.classList.toggle('sn-can-pop', stack.entries.length > 1);
-    };
-    const gesture = {
-        options: o,
-        refresh,
-        attach(s) {
-            stack = s;
-            strip = document.createElement('div');
-            strip.className = 'sn-edge';
-            strip.setAttribute('aria-hidden', 'true');
-            stack.container.append(strip);
-            // Pointer events from the strip bubble here; one listener per event
-            // avoids applying each move and recording its velocity sample twice.
-            listen(stack.container);
-            stack.container.addEventListener('click', onClick, true);
-            offs = ['push', 'pop', 'replace', 'reset'].map((e) => stack.on(e, refresh));
-            refresh();
-            return gesture;
-        },
-        detach() {
-            if (!strip)
-                return;
-            offs.forEach((f) => f());
-            unlisten(stack.container);
-            stack.container.removeEventListener('click', onClick, true);
-            stack.container.classList.remove('sn-anywhere', 'sn-can-pop');
-            strip.remove();
-            strip = null;
-        },
-    };
-    return gesture;
-}
-//# sourceMappingURL=edge-pan-gesture.js.map

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

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