@stacknav/core 0.3.1 → 0.4.0

package/dist/ios-transition.d.ts

@@ -1,61 +0,0 @@
-import { type Easing } from './animate.ts';
-import type { Transition } from './navigation-stack.ts';
-export interface IOSTransitionOptions {
-    /** 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.
-     */
-    ease: Easing;
-    /** fraction of the width the lower page travels */
-    parallax: number;
-    dimColor: string;
-    /** lower-page overlay opacity at p = 1 (≈0.35 suits dark UIs) */
-    dimMax: number;
-    /** box-shadow on the incoming page */
-    shadow: string;
-    /** ms bounds for finishing an interactive pop */
-    settleMin: number;
-    settleMax: number;
-    /** 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;
-    /** multiplies every duration, for slow motion and tests */
-    timeScale: number;
-}
-/** The CSS custom property behind each option. */
-export declare const IOS_TRANSITION_CSS_VARS: Readonly<Record<keyof IOSTransitionOptions, string>>;
-export interface IOSTransition extends Transition {
-    /** The JS options: the defaults with the caller's merged in. Mutable at runtime. */
-    readonly options: IOSTransitionOptions;
-    /** The values currently in force: `options` with the CSS variables applied over them. */
-    readonly resolved: Readonly<IOSTransitionOptions>;
-    /**
-     * 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
-     * after changing `options` or the variables mid-animation.
-     */
-    refresh(el?: Element | null): void;
-}
-/**
- * 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.
- *
- * 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.
- *
- * 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 +0,0 @@
-{"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,CAuG9F"}

package/dist/ios-transition.js.map

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

package/src/edge-pan-gesture.ts

@@ -1,190 +0,0 @@
-import type { InteractivePopHandle, 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;
-}
-
-interface Drag {
-  id: number;
-  target: EventTarget & { setPointerCapture?(id: number): void };
-  x0: number;
-  y0: number;
-  /** +1 when back is a drag to the right, -1 when the container reads right-to-left */
-  dir: number;
-  handle: InteractivePopHandle | null;
-  p: number;
-  samples: Array<[number, number]>;
-}
-
-/**
- * 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: Partial<EdgePanGestureOptions> = {}): EdgePanGesture {
-  const o: EdgePanGestureOptions = {
-    edgeWidth: 28,
-    anywhere: false,
-    startSlop: 6,
-    verticalCancelSlop: 10,
-    completeThreshold: 0.5,
-    completeVelocity: 500,
-    cancelVelocity: -500,
-    velocitySamples: 6,
-    ...options,
-  };
-
-  let stack: NavigationStack;
-  let strip: HTMLElement | null = 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 = (): number => {
-    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: Drag | null = null;
-  let suppressClick = false;
-  let offs: Array<() => void> = [];
-
-  const onDown = (ev: PointerEvent) => {
-    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 as Drag['target'], x0: ev.clientX, y0: ev.clientY, dir: direction(), handle: null, p: 1, samples: [[ev.clientX, performance.now()]] };
-  };
-
-  const onMove = (ev: PointerEvent) => {
-    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: PointerEvent) => {
-    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: Event) => {
-    if (suppressClick) {
-      ev.stopPropagation();
-      ev.preventDefault();
-    }
-  };
-
-  const EVENTS: Record<string, (ev: PointerEvent) => void> = { pointerdown: onDown, pointermove: onMove, pointerup: onUp, pointercancel: onUp };
-  const listen = (el: HTMLElement) => Object.entries(EVENTS).forEach(([k, f]) => el.addEventListener(k, f as EventListener));
-  const unlisten = (el: HTMLElement) => Object.entries(EVENTS).forEach(([k, f]) => el.removeEventListener(k, f as EventListener));
-
-  /**
-   * 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: EdgePanGesture = {
-    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'] as const).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;
-}