@astryxdesign/core 0.7.6-canary.fdabeba → 0.7.6

package/src/motion/animator.ts

@@ -59,7 +59,11 @@
  * commit: a main-thread block before that frame delays the motion instead of
  * skipping into it. Everything the call starts, and every
  * call from rest in the same task, starts at that one time, which
- * `handle.started` reports. A call that continues motion on
+ * `handle.started` reports. Where the compositor starts it and the page
+ * learns that start only a frame or more later (Chromium), the call starts
+ * at the frame that commits it, the start the compositor takes, so a
+ * retarget or a rebase before then continues from the frame on screen. A
+ * call that continues motion on
  * screen (a retarget, a catch) keeps an explicit start at the call time, or
  * `options.at` to line several animators up, so the new curve continues
  * from the frame on screen. Keyframes are sampled from the call's start, so
@@ -177,6 +181,7 @@
 
 import {cubicBezier} from './bezier';
 import {solveSpring, toSpring, type SpringDescription} from './spring';
+import {registerPresentedOffset, type PresentedSource} from './presentation';
 import {resolveMotion} from './resolveMotion';
 import {
   reducedMotionCrossFade,
@@ -504,6 +509,12 @@ interface StartGroup {
    * browser's, whatever it says (startAfterBlock).
    */
   framed?: boolean;
+  /**
+   * Made in an animation-frame callback of an animator's own (a presented
+   * call's second frame): the browser commits its animations in that frame,
+   * so the frame after it is not the one that starts them.
+   */
+  madeInFrame?: boolean;
   /** The task it was made in, with every call made in that task. */
   task?: TaskMark;
   /** A later call in the same task that took over its curves. */
@@ -663,6 +674,9 @@ interface TaskMark {
 /** The task the current calls from rest are made in, until it ends. */
 let openTask: TaskMark | null = null;
 
+/** How many of the animators' animation-frame callbacks are running now. */
+let frameDepth = 0;
+
 /** The mark of the running task, opened by its first call from rest. */
 function markTask(time: number, clock: () => number): TaskMark {
   if (openTask == null) {
@@ -719,6 +733,9 @@ export const PROMOTION_LINGER_MS = 500;
 
 type Channel = 'translate' | 'rotate' | 'scale' | 'opacity';
 
+/** The custom property whose writes make WebKit resolve a moving element. */
+const RESOLVE_PROPERTY = '--astryx-presented';
+
 const CHANNELS: Record<Channel, ReadonlyArray<MotionProperty>> = {
   translate: ['x', 'y'],
   rotate: ['rotate'],
@@ -909,13 +926,28 @@ export function createAnimator(
   options: AnimatorOptions = {},
 ): Animator {
   const now = options.now ?? defaultNow;
-  const requestFrame =
+  const frameSource =
     options.requestFrame ??
     (typeof requestAnimationFrame === 'function'
       ? (callback: () => void) => {
           requestAnimationFrame(() => callback());
         }
       : null);
+  // Every frame callback of an animator's counts itself, so a call made in
+  // one knows its animations commit in that frame.
+  const requestFrame =
+    frameSource == null
+      ? null
+      : (callback: () => void) => {
+          frameSource(() => {
+            frameDepth += 1;
+            try {
+              callback();
+            } finally {
+              frameDepth -= 1;
+            }
+          });
+        };
   const pseudoElement = options.pseudoElement;
   // Reduced Motion reads the person's settings and nothing else: no option
   // overrides them (design:reduced-motion DR4).
@@ -929,6 +961,14 @@ export function createAnimator(
   const running = new Map<Channel, Animation>();
   /** Drops a finished, still-filling animation once the main thread runs. */
   const retireTimers = new Map<Channel, ReturnType<typeof setTimeout>>();
+  /**
+   * Animations whose retire looks again at the next frame (scheduleRetire):
+   * each its own, so one still waiting for a replaced animation does not
+   * stand in for the next.
+   */
+  const retireFrames = new Set<Animation>();
+  /** The timer that starts those looks a frame before a curve's end. */
+  const retireLooks = new Map<Channel, ReturnType<typeof setTimeout>>();
   const touched = new Set<Channel>();
   /**
    * The stylesheet's opacity a Reduce Motion dip borrowed because no call
@@ -960,6 +1000,16 @@ export function createAnimator(
   };
   /** The call being committed, when it starts from rest. */
   let callGroup: StartGroup | null = null;
+  /** The element reported to presentation.ts while translate moves. */
+  let presented: Element | null = null;
+  /**
+   * The translate the engine hit-tests the element at while the compositor
+   * moves it: where the animation started, or where a `resolve` left it.
+   */
+  let hitTested = {x: 0, y: 0};
+  /** Counts the style writes that make WebKit resolve the element again. */
+  let resolutions = 0;
+  let unpresent: (() => void) | null = null;
   /** Channels promoted to the element's compositing layer (will-change). */
   const promoted = new Set<Channel>();
   /** The element's own inline will-change, restored when promotion ends. */
@@ -1058,6 +1108,62 @@ export function createAnimator(
   const finalValue = (property: MotionProperty): number =>
     segments.get(property)?.target ?? resting[property];
 
+  /**
+   * Where translate is drawn relative to where the translate animation
+   * started, read live when a touch lands. iOS WebKit keeps the transform it
+   * resolved when the animation went to the compositor (iOS 26.2: the
+   * element's rect and its hit tests stay at the start for the whole curve,
+   * while the computed style is live), until the animation is retired. A
+   * segment whose start still waits for the browser's commit has painted
+   * nothing of its curve yet.
+   */
+  const drawnTranslate = (property: MotionProperty, time: number) => {
+    const segment = segments.get(property);
+    return segment?.group != null && !segment.group.resolved
+      ? segment.at(0)
+      : valueAt(property, time);
+  };
+
+  const presentedSource: PresentedSource = {
+    offset: (time = now()) => {
+      syncPending();
+      return {
+        x: drawnTranslate('x', time) - hitTested.x,
+        y: drawnTranslate('y', time) - hitTested.y,
+      };
+    },
+    resolve: () => {
+      if (target == null) {
+        return;
+      }
+      syncPending();
+      const time = now();
+      // Any style write makes WebKit resolve the element's transform again,
+      // to the value drawn now, where it then stays (iOS 26.2: in the same
+      // task); a custom property changes nothing else.
+      resolutions += 1;
+      target.style.setProperty(RESOLVE_PROPERTY, String(resolutions));
+      hitTested = {x: drawnTranslate('x', time), y: drawnTranslate('y', time)};
+    },
+  };
+
+  /** Reports the element while its translate moves (not a pseudo-element's). */
+  const present = (isMoving: boolean) => {
+    const element = isMoving && pseudoElement == null ? target : null;
+    if (element === presented) {
+      return;
+    }
+    unpresent?.();
+    unpresent = null;
+    if (presented instanceof HTMLElement) {
+      presented.style.removeProperty(RESOLVE_PROPERTY);
+    }
+    presented = element;
+    if (element != null) {
+      unpresent = registerPresentedOffset(element, presentedSource);
+    }
+  };
+
   const writeInline = (
     channel: Channel,
     value: (property: MotionProperty) => number,
@@ -1151,6 +1257,8 @@ export function createAnimator(
     running.delete(channel);
     clearTimeout(retireTimers.get(channel));
     retireTimers.delete(channel);
+    clearTimeout(retireLooks.get(channel));
+    retireLooks.delete(channel);
     // An element's inline style takes the value on screen below, so its old
     // animation can go first. A pseudo-element has none: its old animation
     // keeps holding the value until the new one exists (same task, no frame in
@@ -1168,6 +1276,16 @@ export function createAnimator(
       }
     }
     const moving = properties.filter(p => segments.has(p));
+    if (channel === 'translate') {
+      // The animation built below starts from the value at `time` (its first
+      // keyframe); a rebase or a retarget builds a new one, so a new start.
+      hitTested = {x: valueAt('x', time), y: valueAt('y', time)};
+      present(
+        moving.length > 0 &&
+          target != null &&
+          typeof target.animate === 'function',
+      );
+    }
     if (
       moving.length === 0 ||
       target == null ||
@@ -1341,27 +1459,65 @@ export function createAnimator(
     end: number,
   ) => {
     clearTimeout(retireTimers.get(channel));
-    const retire = () => {
-      retireTimers.delete(channel);
+    retireTimers.delete(channel);
+    clearTimeout(retireLooks.get(channel));
+    retireLooks.delete(channel);
+    // Looks for the end in the next frame, before it paints: the frame whose
+    // time reaches the curve's end retires it there, where a timer could land
+    // between two frames under load and leave it on the element a frame or two
+    // past its curve. The timers stay, for a page that draws no frames (a
+    // hidden tab).
+    const lookAtFrame = () => {
+      if (requestFrame == null || retireFrames.has(animation)) {
+        return;
+      }
+      retireFrames.add(animation);
+      requestFrame(() => {
+        retireFrames.delete(animation);
+        retire(true);
+      });
+    };
+    // `atFrame`: a look from a frame callback, which leaves a pending timer
+    // where it is.
+    const retire = (atFrame = false) => {
+      if (!atFrame) {
+        retireTimers.delete(channel);
+      }
       if (running.get(channel) !== animation) {
         return;
       }
       // Paused or sought (a sampler holding it): retire when its own time
       // reaches the curve's end, never from the wall clock.
       const remaining = remainingCurve(animation);
+      if (atFrame && remaining == null) {
+        // Its time cannot be read: the timer decides.
+        return;
+      }
       if (remaining != null && remaining > 0) {
-        retireTimers.set(
-          channel,
-          setTimeout(
-            retire,
-            animation.playState === 'paused'
-              ? RETIRE_RECHECK_MS
-              : Math.max(remaining, END_RECHECK_MS),
-          ),
-        );
+        const paused = animation.playState === 'paused';
+        // A frame look keeps looking while up to two frames remain: the frame
+        // it ran in can be dated before the timer that started the looks was
+        // due, and the frame after it is the one that reaches the end.
+        if (!paused && remaining <= (atFrame ? 2 : 1) * END_RECHECK_MS) {
+          lookAtFrame();
+        }
+        if (!retireTimers.has(channel)) {
+          retireTimers.set(
+            channel,
+            setTimeout(
+              retire,
+              paused ? RETIRE_RECHECK_MS : Math.max(remaining, END_RECHECK_MS),
+            ),
+          );
+        }
         return;
       }
+      clearTimeout(retireTimers.get(channel));
+      retireTimers.delete(channel);
       running.delete(channel);
+      if (channel === 'translate') {
+        present(false);
+      }
       // A pseudo-element holds its resting value, unless the stylesheet
       // takes it back now (a borrowed dip that has ended).
       const handsBack =
@@ -1395,6 +1551,20 @@ export function createAnimator(
       flushReleases();
     };
     retireTimers.set(channel, setTimeout(retire, Math.max(0, end - now())));
+    if (requestFrame != null) {
+      // Frames start looking a frame before the end, so the frame that
+      // reaches it retires it even when the timer above runs late.
+      retireLooks.set(
+        channel,
+        setTimeout(
+          () => {
+            retireLooks.delete(channel);
+            lookAtFrame();
+          },
+          Math.max(0, end - now() - END_RECHECK_MS),
+        ),
+      );
+    }
   };
 
   /** The element's own (stylesheet) opacity, read once when a dip starts. */
@@ -1921,6 +2091,7 @@ export function createAnimator(
     // call's is its second frame's callback, wherever in its frame the call
     // was made.
     group.task = markTask(now(), now);
+    group.madeInFrame = frameDepth > 0;
     queueMicrotask(() => {
       group.fresh = false;
     });
@@ -1940,6 +2111,30 @@ export function createAnimator(
     requestFrame?.(() => {
       syncGroup(group);
       group.framed = true;
+      // Chromium's compositor starts a composited animation when the frame
+      // that commits it reaches it, and tells the page that start a frame or
+      // more later (longer under load). Until then the call would read as
+      // not started while the screen moves it, and a retarget or a rebase
+      // would replay its curve from the start. A call made in a task, still
+      // waiting in the first frame after it, starts now, which the compositor
+      // then takes as its start: the time this frame runs, not its timestamp,
+      // which after a block is the frame time from before the block. Only
+      // when this frame is the one that commits it: not for a call made in a
+      // frame callback, whose frame committed it already, nor when a block
+      // ran between the call and this frame (more than LATE_START_MS), after
+      // which this frame cannot tell a call made in a task from one a page's
+      // own frame callback made; those keep the browser's start.
+      if (
+        !group.resolved &&
+        group.madeInFrame !== true &&
+        now() - (group.task?.first ?? group.provisional) <= LATE_START_MS &&
+        group.animations.some(
+          animation =>
+            animation.startTime == null && animation.playState === 'running',
+        )
+      ) {
+        resolveGroup(group, now());
+      }
     });
     ready.then(
       () => syncGroup(group),
@@ -2882,6 +3077,7 @@ export function createAnimator(
         return;
       }
       flushDeferred();
+      present(false);
       if (next == null) {
         // Unmount, unless a node replaces this one in the same task (React's
         // replacement order: attach(null), then the new node): nothing is
@@ -2916,6 +3112,11 @@ export function createAnimator(
                 clearTimeout(timer);
               }
               retireTimers.clear();
+              for (const timer of retireLooks.values()) {
+                clearTimeout(timer);
+              }
+              retireLooks.clear();
+              retireFrames.clear();
               demote();
               // demote() asks for a fresh will-change read of the node it
               // demotes; a detached node gets none.
@@ -2965,6 +3166,11 @@ export function createAnimator(
         clearTimeout(timer);
       }
       retireTimers.clear();
+      for (const timer of retireLooks.values()) {
+        clearTimeout(timer);
+      }
+      retireLooks.clear();
+      retireFrames.clear();
       if (isOpacityBorrowed) {
         // A running borrowed dip (or an exit by role returning to the
         // stylesheet) stays in the model through any attach, so a pending
@@ -3569,6 +3775,12 @@ export function createAnimator(
         clearTimeout(timer);
       }
       retireTimers.clear();
+      present(false);
+      for (const timer of retireLooks.values()) {
+        clearTimeout(timer);
+      }
+      retireLooks.clear();
+      retireFrames.clear();
       handBackBorrow();
       demote();
       cancelSheetWillChangeRead();

package/src/motion/presentation.ts

@@ -0,0 +1,149 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file presentation.ts
+ * @input Animators reporting, while a translate runs on the compositor, how
+ *   far their element is drawn from where the engine hit-tests it, and how
+ *   to make the engine hit-test it where it is drawn
+ * @output Exports registerPresentedOffset, presentedElements,
+ *   presentedOffsetOf, resolvePresented and watchPresentedElements: the
+ *   registry the gesture host reads at touch-down to send a touch to what is
+ *   drawn, and follows to keep a drag on a moving element blocking
+ * @position Motion foundation (DOM, no React). Written by animator.ts, read
+ *   by gestures/GestureHost.ts; internal to core
+ *
+ * iOS WebKit hit-tests an element that a Web Animations transform moves on
+ * the compositor where the animation STARTED: it keeps the transform it
+ * resolved when the animation went to the compositor, so event targets,
+ * `elementFromPoint` and `getBoundingClientRect` stay there for the whole
+ * curve, while the inline style holds the value the curve starts from (the
+ * animator writes it there while the curve runs) and the computed style is
+ * live (iOS 26.2, measured). A style write on the element makes it
+ * resolve the transform again, to the value drawn at that moment, and it
+ * stays there. UIKit keeps an interruptible animation hit-testable where it
+ * is drawn (UIViewPropertyAnimator), so the host corrects for it from this
+ * registry.
+ *
+ * Translation only: a scale or a rotation (a zoom transition, a lifted
+ * preview) is still hit at its untransformed box.
+ *
+ * An engine workaround (`spec:AST-013` FR6). Review condition: re-measure on
+ * each iOS release, and remove this registry and the host's correction once
+ * iOS WebKit hit-tests a compositor-moved element where it is drawn.
+ * Regression fixture: gestures/__tests__/presentedHitTesting.test.ts.
+ */
+
+import {parentAcrossShadow} from '../utils/flatTree';
+
+/** How far an element is drawn from where the engine hit-tests it, CSS px. */
+export interface PresentedOffset {
+  readonly x: number;
+  readonly y: number;
+}
+
+/** What an animator reports for an element it is moving. */
+export interface PresentedSource {
+  /**
+   * The element's offset at `time` (ms on the `performance.now()` clock,
+   * now by default), read live (the motion keeps going): a past time says
+   * where it was drawn then, against where the engine hit-tests it now.
+   */
+  offset(time?: number): PresentedOffset;
+  /**
+   * Makes the engine hit-test the element where it is drawn now (one style
+   * write); the offset restarts from there.
+   */
+  resolve(): void;
+}
+
+const ZERO: PresentedOffset = {x: 0, y: 0};
+
+const sources = new Map<Element, PresentedSource>();
+const watchers = new Set<() => void>();
+
+/** Tell every watcher the reported elements changed; one's throw stops none. */
+function notifyWatchers(): void {
+  for (const watcher of [...watchers]) {
+    try {
+      watcher();
+    } catch (error) {
+      queueMicrotask(() => {
+        throw error;
+      });
+    }
+  }
+}
+
+/**
+ * Call `listener` each time an element starts or stops being reported.
+ * Returns the function that stops it.
+ */
+export function watchPresentedElements(listener: () => void): () => void {
+  watchers.add(listener);
+  return () => {
+    watchers.delete(listener);
+  };
+}
+
+/**
+ * Report an element drawn away from where the engine hit-tests it. Returns
+ * the function that removes the report.
+ */
+export function registerPresentedOffset(
+  element: Element,
+  source: PresentedSource,
+): () => void {
+  sources.set(element, source);
+  notifyWatchers();
+  return () => {
+    if (sources.get(element) === source) {
+      sources.delete(element);
+      notifyWatchers();
+    }
+  };
+}
+
+/** The elements reported now. */
+export function presentedElements(): ReadonlyArray<Element> {
+  return sources.size === 0 ? [] : [...sources.keys()];
+}
+
+/**
+ * How far `element` is drawn from where the engine hit-tests it: its own
+ * offset plus those of its moving ancestors along the flat tree (through a
+ * slot to the panel it is drawn in, and across shadow roots), now or at
+ * `time` (ms on the `performance.now()` clock).
+ */
+export function presentedOffsetOf(
+  element: Element,
+  time?: number,
+): PresentedOffset {
+  if (sources.size === 0) {
+    return ZERO;
+  }
+  let x = 0;
+  let y = 0;
+  for (
+    let node: Node | null = element;
+    node != null;
+    node = parentAcrossShadow(node)
+  ) {
+    const source = node instanceof Element ? sources.get(node) : undefined;
+    if (source != null) {
+      const offset = source.offset(time);
+      x += offset.x;
+      y += offset.y;
+    }
+  }
+  return {x, y};
+}
+
+/**
+ * Makes the engine hit-test each of `elements` where it is drawn now; the
+ * next hit test (an `elementFromPoint`) flushes the writes.
+ */
+export function resolvePresented(elements: Iterable<Element>): void {
+  for (const element of elements) {
+    sources.get(element)?.resolve();
+  }
+}

package/src/motion/uikit/gestures.ts

@@ -41,6 +41,10 @@
  */
 
 import {DELAYS_CONTENT_TOUCHES_MS} from './scroll';
+import {
+  LONG_PRESS_ALLOWABLE_MOVEMENT_PX,
+  LONG_PRESS_DURATION_MS,
+} from './longPress';
 
 export type GestureConstantUnit =
   'px' | 'ms' | 'px/s' | 'rad' | 'ratio' | 'count';
@@ -96,7 +100,7 @@ export const UIKIT_LONG_PRESS = {
    * @source measured: UIKit lab, iOS 26.2 simulator, ivar reads confirmed
    *   with HID touches, Oct 23 2026: _minimumPressDuration 0.5
    */
-  minimumPressDuration: {value: 500, unit: 'ms'},
+  minimumPressDuration: {value: LONG_PRESS_DURATION_MS, unit: 'ms'},
   /**
    * UILongPressGestureRecognizer.allowableMovement default, a distance.
    * @source apple-docs
@@ -104,7 +108,7 @@ export const UIKIT_LONG_PRESS = {
    * @source measured: UIKit lab, iOS 26.2 simulator, ivar reads confirmed
    *   with HID touches, Oct 23 2026: a (7, 7) drift begins, (7.2, 7.2) fails
    */
-  allowableMovement: {value: 10, unit: 'px'},
+  allowableMovement: {value: LONG_PRESS_ALLOWABLE_MOVEMENT_PX, unit: 'px'},
 } as const satisfies Record<string, GestureConstant>;
 
 export const UIKIT_PAN = {
@@ -283,15 +287,19 @@ export const UIKIT_VELOCITY = {
   stillness: {value: 40, unit: 'ms'},
 } as const satisfies Record<string, GestureConstant>;
 
+/**
+ * The stray-click window, kept for importers written before the click guard
+ * owned it: `CLICK_GUARD_WINDOW_MS` (utils/clickGuard.ts) bounds the stray
+ * click, and `UIKIT_GESTURES` leaves this out.
+ * @deprecated Read `CLICK_GUARD_WINDOW_MS`.
+ */
 export const UIKIT_CLICK = {
   /**
-   * Longest the system waits for the browser's click after a touch it
-   * swallows. iOS and Chromium deliver it right after `touchend`; this only
-   * bounds a click that never comes.
-   * @source GUESS — A safety bound, not a UIKit number.
+   * Longest a guard waits for the browser's click after a touch it swallowed.
+   * @source GUESS — A safety bound, not a UIKit number; the click guard's own.
    * @measure M-G17
    */
-  strayClickWindow: {value: 1000, unit: 'ms'},
+  strayClickWindow: {value: 400, unit: 'ms'},
 } as const satisfies Record<string, GestureConstant>;
 
 /**
@@ -311,7 +319,6 @@ export const UIKIT_GESTURES = {
   control: UIKIT_CONTROL,
   press: UIKIT_PRESS,
   velocity: UIKIT_VELOCITY,
-  click: UIKIT_CLICK,
 } as const;
 
 /**

package/src/motion/uikit/index.ts

@@ -48,6 +48,7 @@ export {
   BANNER_SPRING,
   CONTEXT_MENU_DISMISS_SPRING,
   CONTEXT_MENU_LIFT_SPRING,
+  CONTEXT_MENU_MORPH_SPRING,
   DIRECT_CHANGE_SPRING,
   EMPHASIS_SPRING,
   FINGER_TRACKING_SPRING,

package/src/motion/uikit/longPress.ts

@@ -0,0 +1,29 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file longPress.ts
+ * @input Nothing
+ * @output Exports LONG_PRESS_DURATION_MS and LONG_PRESS_ALLOWABLE_MOVEMENT_PX
+ * @position The one source of the long-press numbers. The constants table's
+ *   `longPress` entries (gestures.ts, which carry the sources) take their
+ *   values from here, and so do `useLongPress` and `useMenuPress`, which
+ *   import only this module: a menu does not pay for the whole gestures
+ *   table.
+ *
+ * SYNC: When modified, update longPress.test.ts.
+ */
+
+/**
+ * How long a finger rests before a long press begins, in ms:
+ * `UILongPressGestureRecognizer.minimumPressDuration` (see
+ * `UIKIT_GESTURES.longPress.minimumPressDuration` for the source).
+ */
+export const LONG_PRESS_DURATION_MS = 500;
+
+/**
+ * How far the finger may travel from where it landed before a pending long
+ * press fails, in px, as a distance:
+ * `UILongPressGestureRecognizer.allowableMovement` (see
+ * `UIKIT_GESTURES.longPress.allowableMovement` for the source).
+ */
+export const LONG_PRESS_ALLOWABLE_MOVEMENT_PX = 10;

package/src/motion/uikit/springs.ts

@@ -353,6 +353,21 @@ export const CONTEXT_MENU_DISMISS_SPRING = {
   dampingRatio: 0.85,
 } as const;
 
+/**
+ * Context menu: the menu's entrance beside the lifted preview and the preview
+ * shadow's rise and fade (the preview's growth and the backdrop's fade take
+ * the lift spring above).
+ * @source measured: UIKit lab (injected host app), iOS 26.2 simulator,
+ *   iPhone 17 Pro, per-frame morph and platter layers, Oct 23 2026: the menu
+ *   content's opacity, blur and scale, the morph container's centre and the
+ *   preview shadow's opacity each fit (0.30, 0.80), rms ≤ 0.001; the issued
+ *   UIViewSpringAnimationBehaviorSettings are (0.8, 0.3)
+ */
+export const CONTEXT_MENU_MORPH_SPRING = {
+  response: 0.3,
+  dampingRatio: 0.8,
+} as const;
+
 /**
  * What UIKit plays for a menu with Reduce Motion on: critically damped,
  * slower, no overshoot. A reference reading of UIKit only, never played:
@@ -472,6 +487,7 @@ export const springs = {
   subMenuBack: SUB_MENU_BACK_SPRING,
   contextMenuLift: CONTEXT_MENU_LIFT_SPRING,
   contextMenuDismiss: CONTEXT_MENU_DISMISS_SPRING,
+  contextMenuMorph: CONTEXT_MENU_MORPH_SPRING,
   menuReducedMotion: MENU_REDUCED_MOTION_SPRING,
   switchThumbMove: SWITCH_THUMB_MOVE_SPRING,
   switchThumbStretch: SWITCH_THUMB_STRETCH_SPRING,
@@ -497,6 +513,9 @@ const SPRING_ROLES = {
   menuClose: MENU_CLOSE_SPRING,
   subMenuOpen: SUB_MENU_OPEN_SPRING,
   subMenuBack: SUB_MENU_BACK_SPRING,
+  contextMenuLift: CONTEXT_MENU_LIFT_SPRING,
+  contextMenuDismiss: CONTEXT_MENU_DISMISS_SPRING,
+  contextMenuMorph: CONTEXT_MENU_MORPH_SPRING,
 };
 
 /**