@stacknav/core 0.3.0 → 0.4.0

package/README.md

@@ -1,13 +1,18 @@
 # @stacknav/core
 
-An iOS push/pop navigation transition for any web app. Pages, headers and
-styling stay the app's own; the engine only moves them.
-
-- **Push / pop** with the UIKit curve, parallax and dim on the page beneath, and
-  a shadow on the leading edge of the incoming page.
-- **Interactive pop**: drag from the leading edge (or from anywhere, if
-  configured) and the page follows the pointer. Release past half the width or
-  with a flick to complete; a flick back cancels.
+A native push/pop navigation transition for any web app: the iOS one, or
+Android's own on an Android browser. Pages, headers and styling stay the
+app's own; the engine only moves them.
+
+- **Push / pop** the way the platform does it. On iOS: the UIKit curve, parallax
+  and dim on the page beneath, and a shadow on the leading edge of the incoming
+  page. On Android: the framework's activity transition, a short slide of both
+  pages with a fade, on its own interpolator. The platform is detected from the
+  browser and falls back to iOS; either look can be forced.
+- **Interactive pop**: `beginInteractivePop()` sets the transition from a number
+  you supply, so a pointer of your own can drag the page and release into a
+  settle. The library ships no recognizer: in a browser tab the browser owns the
+  edge (see [Swipe-back policy](#swipe-back-policy)).
 - **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.
@@ -31,10 +36,10 @@ styling stay the app's own; the engine only moves them.
 ```html
 <div id="app"></div>
 <script type="module">
-  import { createIOSStack, attachBrowserHistory, injectStyles } from '@stacknav/core';
+  import { createNativeStack, attachBrowserHistory, injectStyles } from '@stacknav/core';
 
   injectStyles(); // or <link rel="stylesheet" href="@stacknav/core/stacknav.css">
-  const nav = createIOSStack({ container: document.getElementById('app') });
+  const nav = createNativeStack({ container: document.getElementById('app') });
   await nav.push(homePage(), { animated: false });
   attachBrowserHistory(nav);
 
@@ -62,11 +67,45 @@ So a 500 ms push costs about a dozen style writes in total rather than one per p
 
 ## API
 
-### `createIOSStack({ container, transition?, gesture? })`
+### Swipe-back policy
 
-Builds a `NavigationStack` with the iOS transition and the edge-pan gesture
-attached. `transition` and `gesture` are option objects for the two factories
-below. The gesture is exposed as `stack.gesture`; `stack.destroy()` detaches it.
+```js
+const stack = createNativeStack({ container, swipeBack: 'browser' });
+stack.setSwipeBack('disabled'); // request browser swipe suppression
+stack.setSwipeBack('browser');  // release our suppression request (the default)
+console.log(stack.swipeBack);
+```
+
+`SwipeBackMode` is `'browser' | 'disabled'` and is exported as a type. Mode changes
+preserve the stack and history. Destroying the stack releases its policy.
+Destruction is terminal: queued and subsequent navigation promises reject with
+`AbortError`, so callers should handle cancellation when tearing down a stack.
+
+**There is no gesture recognizer here, on purpose.** Browser suppression uses
+`overscroll-behavior-x: contain` on the document root, which Safari ignores for
+its edge swipe ([WebKit #240183](https://bugs.webkit.org/show_bug.cgi?id=240183)).
+In a browser tab the browser keeps the edge whatever we ask for, so a recognizer
+of ours next to it reads as two backs at once. An app that owns the edge -- an
+installed PWA, a native webview -- can drive [`beginInteractivePop()`](#navigationstack)
+from its own pointer handling instead, which is the same API the recognizer used.
+
+**Migration:** `swipeBack: 'custom'`, the `gesture` option and `createEdgePanGesture()`
+were removed. `'custom'` now throws; `'disabled'` keeps the suppression half of it.
+
+Suppression is **best effort and document-wide**. OS gestures may still navigate.
+Back/Forward buttons and keyboard navigation continue to work. Multiple stacks
+share suppression; `browser` releases only that stack's request. The original
+inline value and priority are restored when the last request ends, unless the
+application has replaced our declaration in the meantime.
+See [CSS overscroll behavior](https://drafts.csswg.org/css-overscroll/).
+Page retention and transition effects work in every mode.
+
+### `createNativeStack({ container, transition?, swipeBack? })`
+
+Builds a `NavigationStack` with the platform's native transition. Set
+`swipeBack: 'disabled'` to request browser swipe suppression; the default is
+`browser`. `transition` is the option object for the factory below.
+`stack.destroy()` releases the policy.
 
 ### `NavigationStack`
 
@@ -80,7 +119,7 @@ below. The gesture is exposed as `stack.gesture`; `stack.destroy()` detaches it.
 | `present(el, direction, opts)` | `push`, `pop` (via `popWith`) or `replace`, for callers that already resolved the direction. |
 | `remove(el)` | Drops a page wherever it sits, no animation. |
 | `reset(elements)` | Replaces the whole stack, no animation. |
-| `beginInteractivePop()` | Returns `{ update(p), finish({ complete, velocity }) }` or `null`. Used by the gesture, and usable by a custom recognizer. |
+| `beginInteractivePop()` | Returns `{ update(p), finish({ complete, velocity }) }` or `null`. Drive it from your own pointer handling: `update(p)` while the finger is down, `finish({ complete, velocity })` on release. Pops it emits carry `source: 'gesture'`. |
 | `depth`, `top`, `entries`, `busy`, `canPop()`, `entryOf(el \| key)` | State. |
 | `on(event, fn)` | Events: `push`, `pop`, `replace`, `reset`, `transitionstart`, `progress`, `transitionend`. Returns an unsubscribe function. |
 | `destroy()` | Unmounts everything. |
@@ -114,22 +153,44 @@ A strategy is
 numbers or unrelated siblings mean (default `replace`). `segmentsOf(url)` splits
 a path into `segments`.
 
-### `createIOSTransition(options)`
-
-| Option | CSS variable | Default | Description |
-| --- | --- | --- | --- |
-| `duration` | `--sn-duration` | `500` | ms for a programmatic push/pop |
-| `ease` | `--sn-easing` | `cubic-bezier(0.32, 0.72, 0, 1)` | the curve push/pop runs on |
-| `parallax` | `--sn-parallax` | `0.3` | fraction of the width the lower page travels |
-| `dimColor`, `dimMax` | `--sn-dim-color`, `--sn-dim-max` | `"#000"`, `0.1` | overlay on the lower page at full open (`0.35` suits dark UIs) |
-| `shadow` | `--sn-shadow` | `-3px 0 14px rgba(0,0,0,0.16)` | box-shadow on the incoming page |
-| `settleMin`, `settleMax` | `--sn-settle-min`, `--sn-settle-max` | `120`, `400` | ms bounds when finishing an interactive pop |
-| `settleEase` | `--sn-settle-easing` | `cubic-bezier(0.2, 0.8, 0.2, 1)` | the curve a released swipe finishes on |
-| `settleVelocityFloor` | `--sn-settle-velocity-floor` | `900` | px/s assumed when the pointer was slower |
-| `timeScale` | `--sn-time-scale` | `1` | multiplies every duration (slow motion, tests) |
+### `createNativeTransition(options)`
+
+| Option | CSS variable | iOS | Android | Description |
+| --- | --- | --- | --- | --- |
+| `platform` | | `'auto'` | | `'ios'`, `'android'`, or `'auto'` to ask the browser (see below) |
+| `duration` | `--sn-duration` | `500` | `450` | ms for a programmatic push/pop |
+| `ease` | `--sn-easing` | `cubic-bezier(0.32, 0.72, 0, 1)` | `fast_out_extra_slow_in` as `linear()` | the curve push/pop runs on |
+| `travel` | `--sn-travel` | `1` | `0.25` | fraction of the width the upper page travels |
+| `parallax` | `--sn-parallax` | `0.3` | `0.25` | fraction of the width the lower page travels |
+| `fade` | `--sn-fade` | `1` | `0` | opacity of the upper page when closed (`1` = no fade) |
+| `dimColor`, `dimMax` | `--sn-dim-color`, `--sn-dim-max` | `"#000"`, `0.1` | `"#000"`, `0` | overlay on the lower page at full open (`0.35` suits dark UIs) |
+| `shadow` | `--sn-shadow` | `-3px 0 14px rgba(0,0,0,0.16)` | `none` | box-shadow on the incoming page |
+| `settleMin`, `settleMax` | `--sn-settle-min`, `--sn-settle-max` | `120`, `400` | same | ms bounds when finishing an interactive pop |
+| `settleEase` | `--sn-settle-easing` | `cubic-bezier(0.2, 0.8, 0.2, 1)` | `cubic-bezier(0, 0, 0, 1)` | the curve a released pop finishes on |
+| `settleVelocityFloor` | `--sn-settle-velocity-floor` | `900` | same | px/s assumed when the pointer was slower |
+| `timeScale` | `--sn-time-scale` | `1` | same | multiplies every duration (slow motion, tests) |
 
 `prefers-reduced-motion` sets every duration to 0.
 
+#### Platforms
+
+The two columns are the two presets, `nativeTransitionPreset('ios' | 'android')`.
+They are what each system animates: UIKit's navigation push, and the Android
+framework's activity open/close (`activity_open_enter.xml` and friends since
+Android 13: both pages slide 96 dp, about a quarter of a phone, over 450 ms on
+`fast_out_extra_slow_in`, while the incoming page fades in). The Android curve
+is a path of two cubics, so it reaches CSS as `linear()`; a browser without
+`linear()` (Chrome < 113, Safari < 17.2, Firefox < 112) runs `ease` instead.
+
+`platform: 'auto'`, the default, calls `detectPlatform()`: `android` when the
+browser says it is one (client hints first, then the user agent), otherwise
+`ios`, which is also what a desktop browser gets. `isIOSBrowser()` and
+`isAndroidBrowser()` are exported too. The choice is made once, when the
+transition is created; an option you pass wins over the preset, and a CSS
+variable wins over both, so `{ platform: 'android', duration: 300 }` is the
+Android look at your speed. `transition.options.platform` and
+`transition.resolved.platform` tell you which one is in force.
+
 #### Tuning from CSS
 
 Every option is also a custom property, read off the container when a transition
@@ -138,7 +199,7 @@ the container, under a theme class, or inside a media query.
 
 ```css
 :root {
-  --sn-duration: 340ms;              /* snappier than iOS */
+  --sn-duration: 340ms;              /* snappier than either platform */
   --sn-easing: cubic-bezier(0.4, 0, 0.2, 1);
 }
 .theme-flat {
@@ -154,8 +215,9 @@ the container, under a theme class, or inside a media query.
 Durations accept `ms`, `s` or a bare number of milliseconds. Fractions accept
 `0.3` or `30%`. Easings accept `linear`, `ease`, `ease-in`, `ease-out`,
 `ease-in-out`, `cubic-bezier(…)` with x coordinates within `[0, 1]` as CSS
-requires, or `ios` / `ios-settle` for the two defaults. The `step` and `linear()`
-timing functions are not supported.
+requires, `linear(…)` with percentage stops, or `ios`, `ios-settle`, `android`
+and `android-settle` for the presets' curves. The `steps()` timing function is
+not supported.
 
 Precedence:
 
@@ -173,7 +235,7 @@ Precedence:
 Values are re-read at the start of every transition, which covers media queries
 and class changes. `transition.refresh()` re-reads them on demand, for example
 after changing `transition.options` mid-animation. `transition.resolved` is what
-is currently in force, and `IOS_TRANSITION_CSS_VARS` maps each option to its
+is currently in force, and `NATIVE_TRANSITION_CSS_VARS` maps each option to its
 variable name.
 
 A transition is just
@@ -183,7 +245,7 @@ can write a different one (a fade, a vertical sheet) and pass it to
 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
+but its `css` property is what drives the pixels — `cubicBezier()`, `linearEasing()` 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
@@ -191,26 +253,6 @@ 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
 handling a value needs.
 
-### `createEdgePanGesture(options)`
-
-| Option | Default | Description |
-| --- | --- | --- |
-| `edgeWidth` | `28` | px strip on the leading edge that starts the gesture |
-| `anywhere` | `false` | recognize the drag from anywhere on the page |
-| `startSlop` | `6` | px of horizontal travel before the drag begins |
-| `verticalCancelSlop` | `10` | px of vertical travel that hands the touch to scrolling |
-| `completeThreshold` | `0.5` | fraction of the width that completes on a slow release |
-| `completeVelocity` | `500` | px/s toward the trailing edge that completes regardless |
-| `cancelVelocity` | `-500` | px/s back toward the leading edge that cancels regardless |
-
-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
@@ -242,23 +284,29 @@ 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.
 
+Reading direction is a CSS question, not a JS one: the stylesheet sets
+`--sn-dir: -1` on a right-to-left container and the transform the engine writes
+is signed by it, so back is a drag to the left there. Pointer handling of your
+own should read the same variable, so it and the transition cannot disagree
+about which edge is the back edge.
+
 ## Footprint
 
 Plain ES modules, no dependencies, no work at module load: a bundler keeps only what you import, whether or not it honours the package's `sideEffects` flag (the tests bundle each entry point with that flag switched off and check what survives). Minified and gzipped, as measured by `pnpm size`:
 
 | You import | Costs |
 | --- | --- |
-| `createIOSStack` (stack, iOS look, swipe back) | ~4.5 kB |
-| `NavigationStack` with your own transition | ~2.4 kB |
+| `createNativeStack` (stack, native look, swipe policy) | ~5.1 kB |
+| `NavigationStack` with your own transition | ~2.2 kB |
 | the direction strategies | ~0.6 kB |
 | `attachBrowserHistory` | ~0.5 kB |
 | `injectStyles` | ~0.5 kB |
-| everything | ~5.9 kB |
+| everything | ~6.5 kB |
 
 ## Develop
 
 ```sh
-pnpm test         # node:test with a 68-line DOM stub, no browser; includes the tree-shaking checks
+pnpm test         # node:test with a small DOM stub, no browser; includes the tree-shaking checks
 pnpm build        # tsc → dist/, plus dist/stacknav.css
 pnpm size         # what each entry point costs, minified + gzipped (after a build)
 ```
@@ -268,10 +316,27 @@ src/
   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: the endpoints, the settle timing, the variables
-  edge-pan-gesture.ts   pointer-event recognizer that drives the interactive pop
+  native-transition.ts  the look: the presets, the endpoints, the settle timing, the variables
+  platform.ts           which platform the browser is, for the default preset
   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, motion included, and injectStyles()
-  index.ts              exports + createIOSStack()
+  index.ts              exports + createNativeStack()
 ```
+
+### Animation implementation notes
+
+Timed transforms and opacity run as CSS transitions. Pointer handling, velocity
+sampling, distance-dependent settle timing, and completion promises remain in
+JavaScript. A `progress` subscriber also needs a JavaScript frame loop; omit
+that subscription when CSS can drive your page chrome.
+
+The browser resolves `--sn-dim-color` and `--sn-shadow` directly, so theme changes
+to these variables take effect during a transition without `refresh()`. The JS
+options remain their fallbacks. `resolved` remains a snapshot taken by
+`begin()` or `refresh()`; numeric options still use that snapshot, including
+support for percentage ratios and bare millisecond values.
+
+The iOS look writes only `transform`; the Android look writes `opacity` on the
+upper page as well, and clears it when the transition ends, so a page keeps
+whatever opacity of its own it had.

package/dist/animate.d.ts

@@ -9,10 +9,19 @@ export interface Easing {
     readonly css?: string;
 }
 export declare function cubicBezier(x1: number, y1: number, x2: number, y2: number): Easing;
+/**
+ * Straight lines through `points` (`[x, y]` pairs, x from 0 to 1 and never
+ * decreasing), the curve CSS `linear()` draws. Spelled for CSS the same way
+ * unless `css` says otherwise. A browser without `linear()` (Chrome < 113,
+ * Safari < 17.2, Firefox < 112) runs its default `ease` instead.
+ */
+export declare function linearEasing(points: ReadonlyArray<readonly [number, number]>, css?: string): Easing;
 export declare const easings: {
     linear: Easing;
     ios: Easing;
     easeOut: Easing;
+    android: Easing;
+    androidSettle: Easing;
 };
 /** How an easing should be spelled for CSS. A curve with no spelling runs linearly. */
 export declare const cssEasing: (ease: Easing | undefined) => string;
@@ -31,8 +40,8 @@ export type CancellableTween = Promise<void> & {
 /**
  * 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`.
+ * `promise.cancel()` stops it early and resolves the promise. 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.
@@ -55,5 +64,14 @@ export declare function commitStyles(el: HTMLElement): void;
  * animation running on a page without stalling the stack.
  */
 export declare function animationsFinished(els: Array<HTMLElement | null | undefined>, properties?: readonly string[]): Promise<void>;
+/** `matchMedia`, and false where there is none: a server, a test. */
+export declare const matchesMedia: (query: string) => boolean;
 export declare const prefersReducedMotion: () => boolean;
+/**
+ * Whether the primary pointer is coarse: a phone or a tablet, not a mouse. The
+ * test to reach for when a behaviour is meant for handhelds only. It is a media
+ * query, so it answers again after the device changes — a tablet docked to a
+ * trackpad stops being touch-primary.
+ */
+export declare const isTouchPrimary: () => 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":"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"}
+{"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,CA8BlF;AAKD;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,MAAM,EAAE,aAAa,CAAC,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CASnG;AAED,eAAO,MAAM,OAAO,EAAE;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAC;IAAC,aAAa,EAAE,MAAM,CAAA;CAiB3G,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;AAGH,wBAAgB,KAAK,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,QAAQ,EAAE,IAAe,EAAE,QAAQ,EAAE,EAAE,YAAY,GAAG,gBAAgB,CA+BvG;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,qEAAqE;AACrE,eAAO,MAAM,YAAY,GAAI,OAAO,MAAM,KAAG,OACkB,CAAC;AAEhE,eAAO,MAAM,oBAAoB,QAAO,OAA2D,CAAC;AAEpG;;;;;GAKG;AACH,eAAO,MAAM,cAAc,QAAO,OAA4C,CAAC"}

package/dist/animate.js

@@ -4,34 +4,81 @@
 // 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);
+    // The coefficients are constant for the lifetime of a curve.
+    const ax = 1 - 3 * x2 + 3 * x1, bx = 3 * x2 - 6 * x1, cx = 3 * x1;
+    const ay = 1 - 3 * y2 + 3 * y1, by = 3 * y2 - 6 * y1, cy = 3 * y1;
+    const sampleX = (t) => ((ax * t + bx) * t + cx) * t;
+    const sampleY = (t) => ((ay * t + by) * t + cy) * t;
     const f = (x) => {
         if (x <= 0)
             return 0;
         if (x >= 1)
             return 1;
         let t = x;
+        // Newton converges quickly for ordinary curves. Flat slopes can send it
+        // outside [0, 1], so fall back to a bounded search when it fails.
         for (let i = 0; i < 8; i++) {
-            const s = slope(t, x1, x2);
-            if (s === 0)
+            const error = sampleX(t) - x;
+            if (Math.abs(error) < 1e-8)
+                return sampleY(t);
+            const slope = (3 * ax * t + 2 * bx) * t + cx;
+            if (Math.abs(slope) < 1e-8)
                 break;
-            t -= (calc(t, x1, x2) - x) / s;
+            const next = t - error / slope;
+            if (next < 0 || next > 1)
+                break;
+            t = next;
+        }
+        let lo = 0, hi = 1;
+        for (let i = 0; i < 30; i++) {
+            t = (lo + hi) / 2;
+            if (sampleX(t) < x)
+                lo = t;
+            else
+                hi = t;
         }
-        return calc(t, y1, y2);
+        return sampleY(t);
     };
     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.
+/**
+ * Straight lines through `points` (`[x, y]` pairs, x from 0 to 1 and never
+ * decreasing), the curve CSS `linear()` draws. Spelled for CSS the same way
+ * unless `css` says otherwise. A browser without `linear()` (Chrome < 113,
+ * Safari < 17.2, Firefox < 112) runs its default `ease` instead.
+ */
+export function linearEasing(points, css) {
+    const f = (t) => {
+        if (t <= points[0][0])
+            return points[0][1];
+        let i = 1;
+        while (i < points.length - 1 && points[i][0] < t)
+            i++;
+        const [x0, y0] = points[i - 1], [x1, y1] = points[i];
+        return x1 > x0 ? y0 + (y1 - y0) * Math.min(1, (t - x0) / (x1 - x0)) : y1;
+    };
+    return Object.assign(f, { css: css ?? `linear(${points.map(([x, y]) => `${y} ${x * 100}%`).join(', ')})` });
+}
 export const easings = {
     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),
+    // AOSP's `fast_out_extra_slow_in`, the interpolator behind activity open and
+    // close since Android 13 (frameworks/base, core/res/res/interpolator). It is
+    // a path of two cubics, `M0,0 C0.05,0 0.133,0.06 0.167,0.4 C0.208,0.82 0.25,1
+    // 1,1`, which one `cubic-bezier()` cannot bend into; these stops follow it
+    // to within 0.006 and are what CSS gets.
+    android: /*#__PURE__*/ linearEasing([
+        [0, 0], [0.03125, 0.008], [0.0625, 0.033], [0.09375, 0.08], [0.125, 0.162], [0.140625, 0.225], [0.15625, 0.313],
+        [0.1640625, 0.375], [0.171875, 0.451], [0.1796875, 0.517], [0.1875, 0.571], [0.203125, 0.649], [0.21875, 0.702],
+        [0.25, 0.773], [0.28125, 0.819], [0.3125, 0.853], [0.375, 0.899], [0.5, 0.951], [0.625, 0.977], [0.75, 0.991], [1, 1],
+    ]),
+    // The "standard decelerate" Android's predictive-back guidelines ask for
+    // when a released gesture runs out.
+    androidSettle: /*#__PURE__*/ cubicBezier(0, 0, 0, 1),
 };
 /** How an easing should be spelled for CSS. A curve with no spelling runs linearly. */
 export const cssEasing = (ease) => ease?.css ?? 'linear';
@@ -40,16 +87,20 @@ 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`.
+ * `promise.cancel()` stops it early and resolves the promise. 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 }) {
+// The default is spelled out rather than taken from `easings`, so a bundle that
+// only needs the tween does not carry the curves.
+export function tween({ from, to, duration, ease = (t) => t, onUpdate }) {
     let raf = 0;
     let done = false;
+    let finish;
     const promise = new Promise((resolve) => {
+        finish = resolve;
         if (duration <= 0) {
             onUpdate(to);
             done = true;
@@ -61,6 +112,8 @@ export function tween({ from, to, duration, ease = easings.linear, onUpdate }) {
                 return;
             const k = Math.min(1, (now - t0) / duration);
             onUpdate(from + (to - from) * ease(k));
+            if (done)
+                return;
             if (k < 1)
                 raf = requestAnimationFrame(step);
             else {
@@ -73,6 +126,7 @@ export function tween({ from, to, duration, ease = easings.linear, onUpdate }) {
     promise.cancel = () => {
         done = true;
         cancelAnimationFrame(raf);
+        finish();
     };
     return promise;
 }
@@ -107,5 +161,14 @@ export function animationsFinished(els, properties = ['transform', 'opacity']) {
     }
     return running.length ? Promise.all(running).then(() => { }) : Promise.resolve();
 }
-export const prefersReducedMotion = () => typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;
+/** `matchMedia`, and false where there is none: a server, a test. */
+export const matchesMedia = (query) => typeof matchMedia === 'function' && matchMedia(query).matches;
+export const prefersReducedMotion = () => matchesMedia('(prefers-reduced-motion: reduce)');
+/**
+ * Whether the primary pointer is coarse: a phone or a tablet, not a mouse. The
+ * test to reach for when a behaviour is meant for handhelds only. It is a media
+ * query, so it answers again after the device changes — a tablet docked to a
+ * trackpad stops being touch-primary.
+ */
+export const isTouchPrimary = () => matchesMedia('(pointer: coarse)');
 //# 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/css-vars.d.ts

@@ -14,9 +14,9 @@ export declare function parseNumber(v: string | undefined): number | undefined;
 /** A fraction. `0.3` and `30%` are equivalent. */
 export declare function parseRatio(v: string | undefined): number | undefined;
 /**
- * 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.
+ * 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 declare function parseEasing(v: string | undefined): Easing | undefined;
 //# sourceMappingURL=css-vars.d.ts.map

package/dist/css-vars.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"css-vars.d.ts","sourceRoot":"","sources":["../src/css-vars.ts"],"names":[],"mappings":"AASA,OAAO,EAAwB,KAAK,MAAM,EAAE,MAAM,cAAc,CAAC;AAEjE,gFAAgF;AAChF,MAAM,MAAM,YAAY,GAAG,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC;AAEhE;;;;;GAKG;AACH,wBAAgB,OAAO,CAAC,EAAE,EAAE,OAAO,GAAG,IAAI,GAAG,SAAS,GAAG,YAAY,CAOpE;AAID,yDAAyD;AACzD,wBAAgB,SAAS,CAAC,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAInE;AAED,wBAAgB,WAAW,CAAC,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAGrE;AAED,kDAAkD;AAClD,wBAAgB,UAAU,CAAC,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAMpE;AAuBD;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAYrE"}
+{"version":3,"file":"css-vars.d.ts","sourceRoot":"","sources":["../src/css-vars.ts"],"names":[],"mappings":"AASA,OAAO,EAAsC,KAAK,MAAM,EAAE,MAAM,cAAc,CAAC;AAE/E,gFAAgF;AAChF,MAAM,MAAM,YAAY,GAAG,CAAC,IAAI,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC;AAEhE;;;;;GAKG;AACH,wBAAgB,OAAO,CAAC,EAAE,EAAE,OAAO,GAAG,IAAI,GAAG,SAAS,GAAG,YAAY,CAOpE;AAID,yDAAyD;AACzD,wBAAgB,SAAS,CAAC,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAInE;AAED,wBAAgB,WAAW,CAAC,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAGrE;AAED,kDAAkD;AAClD,wBAAgB,UAAU,CAAC,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAMpE;AA4DD;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAcrE"}

package/dist/css-vars.js

@@ -6,7 +6,7 @@
 // Every parser returns undefined for anything it does not understand, never
 // NaN, so an unreadable value falls through to its JS option instead of
 // producing an invalid transform.
-import { cubicBezier, easings } from "./animate.js";
+import { cubicBezier, easings, linearEasing } from "./animate.js";
 /**
  * Returns a reader over `el`'s computed custom properties. Custom properties
  * inherit, so a variable set on `:root` or any ancestor is visible here. When
@@ -62,11 +62,51 @@ const easingKeywordsOf = () => (easingKeywords ??= Object.assign(Object.create(n
     '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) {
+    const xs = [], ys = [];
+    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;
+    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]]), `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) {
     if (v === undefined)
@@ -75,6 +115,9 @@ export function parseEasing(v) {
     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;