@astryxdesign/core 0.7.7 → 0.7.8-canary.0b39b51

package/src/hooks/useScrollLock.ts

@@ -4,46 +4,49 @@
 
 /**
  * @file useScrollLock.ts
- * @input Uses React useEffect
- * @output Exports useScrollLock hook for locking body scroll
- * @position Core hook; used by Dialog to prevent background scrolling
- *
- * Locks body scroll when active by pinning the body with position:fixed.
- * This is needed because overscroll-behavior:contain doesn't work on iOS Safari.
+ * @input React useEffect, rootScrollStyles, gestures/pageHold with the pan
+ *   decision, and the scrollbar gutter hold
+ * @output useScrollLock, which locks page scroll behind a modal
+ * @position Core hook; used by Dialog, BottomSheet, Drawer, Lightbox and
+ *   MobileNav
  *
  * SYNC: When modified, update:
  * - /packages/core/src/hooks/index.ts
  * - /packages/core/src/hooks/scrollbarGutter.ts
+ * - /packages/core/src/hooks/rootScrollStyles.ts
+ * - /packages/core/src/gestures/pageHold.ts (holdPageScroll)
+ * - /packages/core/src/hooks/useScrollLockImports.test.ts
  */
 
 import {useEffect} from 'react';
+import {claimRootScrollStyle, reportScrollLock} from './rootScrollStyles';
+import {holdPageScroll} from '../gestures/pageHold';
+import {isPageZoomedIn, isPanAbsorbedBeforePage} from './scrollLockTouchGuard';
 import {holdScrollbarGutter, type ScrollbarGutterHold} from './scrollbarGutter';
 
-interface ScrollLockSnapshot {
-  scrollX: number;
-  scrollY: number;
-  overflow: string;
-  position: string;
-  top: string;
-  left: string;
-  right: string;
+// iOS Safari scrolls an `overflow: hidden` page under a finger.
+// So the lock also cancels each one-finger pan that would reach the page. The
+// scroll offset never changes, so unlock restores nothing, and iOS Safari's
+// toolbar keeps its state.
+
+interface ActiveLock {
+  releaseRootStyle: () => void;
+  releasePageHold: () => void;
   gutter: ScrollbarGutterHold;
 }
 
 let lockCount = 0;
-let originalBodyState: ScrollLockSnapshot | null = null;
+let activeLock: ActiveLock | null = null;
 
 /**
- * Locks body scroll when `isLocked` is true.
- *
- * Pins the body with `position: fixed` to prevent background scrolling,
- * which is necessary for iOS Safari where `overscroll-behavior: contain`
- * does not prevent body scroll behind modals. Restores scroll position
- * on unlock.
+ * Locks page scroll while `isLocked` is true.
  *
- * Pinning also hides the document's scrollbar, so the gutter that scrollbar
- * occupied is held open for the duration of the lock — without it the page
- * reflows sideways by ~15px the moment an overlay opens.
+ * The page keeps its scroll offset, so nothing jumps on lock or unlock. Where
+ * the primary pointer is coarse (phones and tablets), the lock cancels a
+ * one-finger pan that would reach the page.
+ * Pans that a scroller in the overlay takes, and two-finger zoom, go through.
+ * The gutter of a classic scrollbar stays open, so the page does not shift
+ * sideways.
  *
  * @example
  * ```
@@ -51,59 +54,53 @@ let originalBodyState: ScrollLockSnapshot | null = null;
  * ```
  */
 export function useScrollLock(isLocked: boolean): void {
+  // Syncs the document's scroll lock with `isLocked`. A count of holders keeps
+  // the page locked until the last one releases.
   useEffect(() => {
     if (!isLocked) {
       return;
     }
 
-    const {body} = document;
-
     if (lockCount === 0) {
-      const scrollX = window.scrollX;
-      const scrollY = window.scrollY;
-
-      // Taken before the pinning styles below hide the scrollbar.
-      const gutter = holdScrollbarGutter(body);
-
-      originalBodyState = {
-        scrollX,
-        scrollY,
-        overflow: body.style.overflow,
-        position: body.style.position,
-        top: body.style.top,
-        left: body.style.left,
-        right: body.style.right,
-        gutter,
-      };
-
-      body.style.overflow = 'hidden';
-      body.style.position = 'fixed';
-      body.style.top = `-${scrollY}px`;
-      body.style.left = '0';
-      body.style.right = '0';
-
+      // The hold measures before the lock writes a style, so the lock forces no
+      // layout of its own. `settle` writes the gutter with the styles below.
+      const gutter = holdScrollbarGutter(document.documentElement);
+      // `overscroll-behavior-y: none` also keeps the browser's own
+      // pull-to-refresh (Chrome on Android) from reloading the page behind
+      // the overlay.
+      const releaseRootStyle = claimRootScrollStyle({
+        overflow: 'hidden',
+        overscrollBehaviorY: 'none',
+      });
+      // The hold asks the gesture host only if one exists, so the lock does
+      // not bring the host into every overlay's import.
+      const releasePageHold = holdPageScroll(
+        document,
+        // A drag on a pinch-zoomed page pans the zoomed view: it goes
+        // through, so a zoomed-in reader can move around the overlay.
+        (origin, dx, dy) =>
+          !isPageZoomedIn(document) && !isPanAbsorbedBeforePage(origin, dx, dy),
+      );
       gutter.settle();
+      activeLock = {releaseRootStyle, releasePageHold, gutter};
     }
 
     lockCount += 1;
+    reportScrollLock(1);
 
     return () => {
       lockCount -= 1;
+      reportScrollLock(-1);
 
-      if (lockCount !== 0 || originalBodyState == null) {
+      if (lockCount !== 0 || activeLock == null) {
         return;
       }
 
-      const state = originalBodyState;
-      originalBodyState = null;
-
-      body.style.overflow = state.overflow;
-      body.style.position = state.position;
-      body.style.top = state.top;
-      body.style.left = state.left;
-      body.style.right = state.right;
-      state.gutter.release();
-      window.scrollTo(state.scrollX, state.scrollY);
+      const lock = activeLock;
+      activeLock = null;
+      lock.releasePageHold();
+      lock.releaseRootStyle();
+      lock.gutter.release();
     };
   }, [isLocked]);
 }

package/src/hooks/useScrollableArea.ts

@@ -216,6 +216,8 @@ export function useScrollableArea({
   const getComposedViewportRef = useStableComposedRef(viewportRef);
   const getComposedContentRef = useStableComposedRef(contentRef);
 
+  // Syncs the scroll geometry with the viewport and content nodes. It measures
+  // them, then follows resize, scroll, transition and font events.
   useIsomorphicLayoutEffect(() => {
     if (viewport == null || content == null) {
       return;
@@ -430,6 +432,8 @@ export function useScrollableArea({
   // commit. A loss waits for the next frame.
   const previousOverflowRef = useRef<LogicalOverflowGeometry>(INITIAL_OVERFLOW);
   const previousMappingRef = useRef<LogicalAxisMapping>(INITIAL_MAPPING);
+  // Measures the layout again when overflow starts or the writing-mode mapping
+  // changes. A new scrollbar gutter changes the geometry.
   useIsomorphicLayoutEffect(() => {
     const previous = previousOverflowRef.current;
     const hasGainedOverflow =

package/src/hooks/useStreamingText.ts

@@ -178,6 +178,8 @@ export function useStreamingText(
     '(prefers-reduced-motion: reduce)',
   );
 
+  // Syncs the revealed text with an animation-frame clock while the text
+  // streams.
   useEffect(() => {
     if (!isStreaming || speed === 'instant' || prefersReducedMotion) {
       return;

package/src/i18n/generated-english/PowerSearch/PowerSearchBottomSheet.generated.ts

@@ -0,0 +1,43 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @generated by scripts/generate-i18n-runtime.mjs from packages/core/locales/en.json,
+ * holding the English for the catalog keys named in packages/core/src/PowerSearch/PowerSearchBottomSheet.tsx.
+ * Do not edit by hand. Run `pnpm generate:i18n-runtime` instead.
+ */
+
+const english: Readonly<Record<string, string>> = {
+  "@astryx.powersearch.allFiltersRemoved": "All filters removed",
+  "@astryx.powersearch.editableFiltersRemoved": "Editable filters removed",
+  "@astryx.powersearch.editor.apply": "Apply",
+  "@astryx.powersearch.editor.cancel": "Cancel",
+  "@astryx.powersearch.editor.operator": "Operator",
+  "@astryx.powersearch.sheet.addFilter": "Add filter",
+  "@astryx.powersearch.sheet.clearAll": "Clear all",
+  "@astryx.powersearch.sheet.clearAllCancel": "Keep filters",
+  "@astryx.powersearch.sheet.clearAllConfirm": "Clear filters",
+  "@astryx.powersearch.sheet.clearAllDescription": "This removes all editable filters from this search.",
+  "@astryx.powersearch.sheet.clearAllTitle": "Clear all filters?",
+  "@astryx.powersearch.sheet.done": "Done",
+  "@astryx.powersearch.sheet.editableFiltersClearedWithCount": "Editable filters removed. {resultCount}",
+  "@astryx.powersearch.sheet.fieldOperator": "{field} {operator}",
+  "@astryx.powersearch.sheet.filterUnavailable": "This filter is no longer available",
+  "@astryx.powersearch.sheet.filtersClearedWithCount": "All filters removed. {resultCount}",
+  "@astryx.powersearch.sheet.filtersTitle": "Filters",
+  "@astryx.powersearch.sheet.labelValue": "{label} {value}",
+  "@astryx.powersearch.sheet.noFilters": "No filters applied",
+  "@astryx.powersearch.sheet.noFiltersDescription": "Add a filter to narrow your results and find what you need faster.",
+  "@astryx.powersearch.sheet.noMatchingFields": "No filters match your search",
+  "@astryx.powersearch.sheet.noResults": "No results found",
+  "@astryx.powersearch.sheet.removeFilter": "Remove {field} filter",
+  "@astryx.powersearch.sheet.search": "Search",
+  "@astryx.powersearch.sheet.searchFields": "Search filters",
+  "@astryx.powersearch.sheet.searchFieldsPlaceholder": "Search filters…",
+  "@astryx.powersearch.sheet.searchResults": "Search results",
+  "@astryx.powersearch.sheet.tryDifferentSearch": "Try a different search.",
+  "@astryx.powersearch.sheet.ungroupedFields": "General",
+  "@astryx.tokenizer.tokenAdded": "Added {label}",
+  "@astryx.tokenizer.tokenRemoved": "Removed {label}"
+};
+
+export default english;

package/src/i18n/generated-english/PowerSearch/PowerSearchValueEditor.generated.ts

@@ -7,6 +7,12 @@
  */
 
 const english: Readonly<Record<string, string>> = {
+  "@astryx.powersearch.sheet.relativeDaysAgo": "{count, number} {count, plural, one {day} other {days}} ago",
+  "@astryx.powersearch.sheet.relativeDaysFromNow": "{count, number} {count, plural, one {day} other {days}} from now",
+  "@astryx.powersearch.sheet.relativeMonthsAgo": "{count, number} {count, plural, one {month} other {months}} ago",
+  "@astryx.powersearch.sheet.relativeMonthsFromNow": "{count, number} {count, plural, one {month} other {months}} from now",
+  "@astryx.powersearch.sheet.relativeWeeksAgo": "{count, number} {count, plural, one {week} other {weeks}} ago",
+  "@astryx.powersearch.sheet.relativeWeeksFromNow": "{count, number} {count, plural, one {week} other {weeks}} from now",
   "@astryx.powersearch.valueEditor.addValuesPlaceholder": "Add values…",
   "@astryx.powersearch.valueEditor.date": "Date",
   "@astryx.powersearch.valueEditor.dateRange": "date range",

package/src/i18n/generated-english/PowerSearch/formatTokenValue.generated.ts

@@ -0,0 +1,15 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @generated by scripts/generate-i18n-runtime.mjs from packages/core/locales/en.json,
+ * holding the English for the catalog keys named in packages/core/src/PowerSearch/formatTokenValue.ts.
+ * Do not edit by hand. Run `pnpm generate:i18n-runtime` instead.
+ */
+
+const english: Readonly<Record<string, string>> = {
+  "@astryx.powersearch.valueEditor.dateRange": "date range",
+  "@astryx.powersearch.valueEditor.filtersCount": "{count, number} {count, plural, one {filter} other {filters}}",
+  "@astryx.powersearch.valueEditor.itemsCount": "{count, number} {count, plural, one {item} other {items}}"
+};
+
+export default english;

package/src/i18n/generated-locales/en.generated.ts

@@ -78,6 +78,47 @@ const runtimeCatalog: Readonly<Record<string, string>> = {
     '{count, number} {count, plural, one {filter} other {filters}}',
   '@astryx.powersearch.resultCount':
     '{count, number} {count, plural, one {result} other {results}}',
+  '@astryx.powersearch.sheet.filtersTitle': 'Filters',
+  '@astryx.powersearch.sheet.addFilter': 'Add filter',
+  '@astryx.powersearch.sheet.noFilters': 'No filters applied',
+  '@astryx.powersearch.sheet.noFiltersDescription':
+    'Add a filter to narrow your results and find what you need faster.',
+  '@astryx.powersearch.sheet.clearAll': 'Clear all',
+  '@astryx.powersearch.sheet.clearAllTitle': 'Clear all filters?',
+  '@astryx.powersearch.sheet.clearAllDescription':
+    'This removes all editable filters from this search.',
+  '@astryx.powersearch.sheet.clearAllConfirm': 'Clear filters',
+  '@astryx.powersearch.sheet.clearAllCancel': 'Keep filters',
+  '@astryx.powersearch.sheet.done': 'Done',
+  '@astryx.powersearch.sheet.search': 'Search',
+  '@astryx.powersearch.sheet.searchResults': 'Search results',
+  '@astryx.powersearch.sheet.searchFields': 'Search filters',
+  '@astryx.powersearch.sheet.searchFieldsPlaceholder': 'Search filters…',
+  '@astryx.powersearch.sheet.ungroupedFields': 'General',
+  '@astryx.powersearch.sheet.noMatchingFields': 'No filters match your search',
+  '@astryx.powersearch.sheet.tryDifferentSearch': 'Try a different search.',
+  '@astryx.powersearch.sheet.noResults': 'No results found',
+  '@astryx.powersearch.sheet.filterUnavailable':
+    'This filter is no longer available',
+  '@astryx.powersearch.sheet.removeFilter': 'Remove {field} filter',
+  '@astryx.powersearch.sheet.relativeDaysAgo':
+    '{count, number} {count, plural, one {day} other {days}} ago',
+  '@astryx.powersearch.sheet.relativeDaysFromNow':
+    '{count, number} {count, plural, one {day} other {days}} from now',
+  '@astryx.powersearch.sheet.relativeWeeksAgo':
+    '{count, number} {count, plural, one {week} other {weeks}} ago',
+  '@astryx.powersearch.sheet.relativeWeeksFromNow':
+    '{count, number} {count, plural, one {week} other {weeks}} from now',
+  '@astryx.powersearch.sheet.relativeMonthsAgo':
+    '{count, number} {count, plural, one {month} other {months}} ago',
+  '@astryx.powersearch.sheet.relativeMonthsFromNow':
+    '{count, number} {count, plural, one {month} other {months}} from now',
+  '@astryx.powersearch.sheet.fieldOperator': '{field} {operator}',
+  '@astryx.powersearch.sheet.labelValue': '{label} {value}',
+  '@astryx.powersearch.sheet.filtersClearedWithCount':
+    'All filters removed. {resultCount}',
+  '@astryx.powersearch.sheet.editableFiltersClearedWithCount':
+    'Editable filters removed. {resultCount}',
   '@astryx.alertDialog.cancel': 'Cancel',
   '@astryx.appShell.mobileNavigation': 'Mobile navigation',
   '@astryx.appShell.skipToContent': 'Skip to content',

package/src/i18n/generated-locales/pseudo.generated.ts

@@ -80,6 +80,48 @@ const runtimeCatalog: Readonly<Record<string, string>> = {
     '⟦{count, number} {count, plural, one {filter} other {filters}}⟧',
   '@astryx.powersearch.resultCount':
     '⟦{count, number} {count, plural, one {result} other {results}}⟧',
+  '@astryx.powersearch.sheet.filtersTitle': '⟦Ƒíłţéřš⟧',
+  '@astryx.powersearch.sheet.addFilter': '⟦Àðð ƒíłţéř⟧',
+  '@astryx.powersearch.sheet.noFilters': '⟦Ñó ƒíłţéřš àþþłíéð⟧',
+  '@astryx.powersearch.sheet.noFiltersDescription':
+    '⟦Àðð à ƒíłţéř ţó ñàřřóŵ ýóúř řéšúłţš àñð ƒíñð ŵĥàţ ýóú ñééð ƒàšţéř.⟧',
+  '@astryx.powersearch.sheet.clearAll': '⟦Çłéàř àłł⟧',
+  '@astryx.powersearch.sheet.clearAllTitle': '⟦Çłéàř àłł ƒíłţéřš?⟧',
+  '@astryx.powersearch.sheet.clearAllDescription':
+    '⟦Ţĥíš řéɱóṽéš àłł éðíţàƀłé ƒíłţéřš ƒřóɱ ţĥíš šéàřçĥ.⟧',
+  '@astryx.powersearch.sheet.clearAllConfirm': '⟦Çłéàř ƒíłţéřš⟧',
+  '@astryx.powersearch.sheet.clearAllCancel': '⟦Ķééþ ƒíłţéřš⟧',
+  '@astryx.powersearch.sheet.done': '⟦Ðóñé⟧',
+  '@astryx.powersearch.sheet.search': '⟦Šéàřçĥ⟧',
+  '@astryx.powersearch.sheet.searchResults': '⟦Šéàřçĥ řéšúłţš⟧',
+  '@astryx.powersearch.sheet.searchFields': '⟦Šéàřçĥ ƒíłţéřš⟧',
+  '@astryx.powersearch.sheet.searchFieldsPlaceholder': '⟦Šéàřçĥ ƒíłţéřš…⟧',
+  '@astryx.powersearch.sheet.ungroupedFields': '⟦Ĝéñéřàł⟧',
+  '@astryx.powersearch.sheet.noMatchingFields':
+    '⟦Ñó ƒíłţéřš ɱàţçĥ ýóúř šéàřçĥ⟧',
+  '@astryx.powersearch.sheet.tryDifferentSearch': '⟦Ţřý à ð탃éřéñţ šéàřçĥ.⟧',
+  '@astryx.powersearch.sheet.noResults': '⟦Ñó řéšúłţš ƒóúñð⟧',
+  '@astryx.powersearch.sheet.filterUnavailable':
+    '⟦Ţĥíš ƒíłţéř íš ñó łóñĝéř àṽàíłàƀłé⟧',
+  '@astryx.powersearch.sheet.removeFilter': '⟦Řéɱóṽé {field} ƒíłţéř⟧',
+  '@astryx.powersearch.sheet.relativeDaysAgo':
+    '⟦{count, number} {count, plural, one {day} other {days}} àĝó⟧',
+  '@astryx.powersearch.sheet.relativeDaysFromNow':
+    '⟦{count, number} {count, plural, one {day} other {days}} ƒřóɱ ñóŵ⟧',
+  '@astryx.powersearch.sheet.relativeWeeksAgo':
+    '⟦{count, number} {count, plural, one {week} other {weeks}} àĝó⟧',
+  '@astryx.powersearch.sheet.relativeWeeksFromNow':
+    '⟦{count, number} {count, plural, one {week} other {weeks}} ƒřóɱ ñóŵ⟧',
+  '@astryx.powersearch.sheet.relativeMonthsAgo':
+    '⟦{count, number} {count, plural, one {month} other {months}} àĝó⟧',
+  '@astryx.powersearch.sheet.relativeMonthsFromNow':
+    '⟦{count, number} {count, plural, one {month} other {months}} ƒřóɱ ñóŵ⟧',
+  '@astryx.powersearch.sheet.fieldOperator': '⟦{field} {operator}⟧',
+  '@astryx.powersearch.sheet.labelValue': '⟦{label} {value}⟧',
+  '@astryx.powersearch.sheet.filtersClearedWithCount':
+    '⟦Àłł ƒíłţéřš řéɱóṽéð. {resultCount}⟧',
+  '@astryx.powersearch.sheet.editableFiltersClearedWithCount':
+    '⟦Éðíţàƀłé ƒíłţéřš řéɱóṽéð. {resultCount}⟧',
   '@astryx.alertDialog.cancel': '⟦Çàñçéł⟧',
   '@astryx.appShell.mobileNavigation': '⟦Ṁóƀíłé ñàṽíĝàţíóñ⟧',
   '@astryx.appShell.skipToContent': '⟦Šķíþ ţó çóñţéñţ⟧',

package/src/index.ts

@@ -173,6 +173,19 @@ export * from './Outline';
 // Overflow list
 export * from './OverflowList';
 
+// Animating one element: from the package root only, since one API has one
+// entry. Its hook ships from './hooks'.
+export {
+  createAnimator,
+  type Animator,
+  type AnimatorAnimateOptions,
+  type AnimatorChannel,
+  type AnimatorDecayVelocity,
+  type AnimatorHandle,
+  type AnimatorSnapshot,
+  type AnimatorValues,
+} from './animator/createAnimator';
+
 // Hooks
 export * from './hooks';
 

package/src/internal/indicatorPress.stylex.ts

@@ -0,0 +1,24 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file indicatorPress.stylex.ts
+ * @input Uses StyleX
+ * @output Exports `indicatorPressScope`, the marker of a first-party
+ *   indicator that paints its own press
+ * @position Internal entry for Astryx's own replacement indicators;
+ *   CheckboxInput reads it
+ */
+
+import * as stylex from '@stylexjs/stylex';
+
+/**
+ * Marks a first-party replacement indicator that paints its own press, for
+ * a shape that CheckboxInput's rounded-square press layer would tint past,
+ * such as a circle. CheckboxInput leaves that layer off over an indicator
+ * with this marker.
+ *
+ * @internal Not public API: the touch press reaches the indicator through a
+ * private property.
+ */
+export const indicatorPressScope: ReturnType<typeof stylex.defineMarker> =
+  stylex.defineMarker();

package/src/internal/selectable-card.ts

@@ -0,0 +1,21 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+/**
+ * @file selectable-card.ts
+ * @input SelectableCard's internal input context, the Field input styling
+ *   rule and the aria id joiner
+ * @output `@astryxdesign/core/internal/selectable-card`:
+ *   SelectableCardInputContext, useFieldInputStyling and joinAriaIDs,
+ *   re-exported by name
+ *   for Lab's SelectableCardGroup
+ * @position An internal entry reserved for Astryx's own packages:
+ *   undocumented, outside the public API and its compatibility promise,
+ *   versioned in lockstep with Core, and allowed only in Core and Lab by the
+ *   `@astryx/no-core-internal-import` lint rule. Core components import the
+ *   same modules by relative path. Named re-exports only.
+ *
+ * SYNC: When modified, update scripts/sync-exports.js.
+ */
+export {SelectableCardInputContext} from '../SelectableCard/selectableCardInput';
+export type {SelectableCardInput} from '../SelectableCard/selectableCardInput';
+export {useFieldInputStyling} from '../Field/fieldParts';
+export {joinAriaIDs} from '../utils/inputAria';

package/src/internal/sheetDraft.ts

@@ -4,8 +4,8 @@
  * @input A sheet's selection at open, its draft, and the last edit made
  * @output SheetDraftChange, hasSameSelection, nameSheetDraftChange — the
  *   rules a touch sheet's Save and dismissal share
- * @position Core-internal, shared by the Tokenizer sheet and the Lab sheets
- *   through `internal/touch-sheet`; not a public export
+ * @position Core-internal. The Tokenizer sheet uses it, and PowerSearch's
+ *   list-value step renders that sheet. Not a public export.
  *
  * A touch sheet edits a draft and reports it once, on Save, with one change:
  * the last edit that still holds, else the nearest net add or remove. A

package/src/motion/MEASUREMENTS.md

@@ -286,3 +286,21 @@ fades in, with Prefer Cross-Fade Transitions on or off.
 | M-CM4 | Reduce Motion press feedback    | Probe app with Reduce Motion on: long press, then dismiss                                                                   | press feedback, lift and dismiss animations under Reduce Motion                                                                                                                           | A, B   |
 | M-CM5 | Commit haptic stand-in          | An Android device: `navigator.vibrate` patterns against the platform's HapticFeedbackConstants for the context-click moment | the pattern that matches; not a UIKit parity value (as M-G18)                                                                                                                             | H      |
 | M-CM6 | Press thresholds                | Probe app: repeated long presses at random vsync phases                                                                     | from touch receipt and from the HID timestamp, the tick before and the tick at the press observer's began and at the click commit; the intersection pins the 150 ms and 400 ms thresholds | C      |
+
+## Picker (UIPickerView)
+
+Values the Wheel reads from its own table (`uikit/picker.ts`).
+
+The recordings are of a 402 × 216 pt UIPickerView with two columns of 24 and
+60 rows. It runs in an instrumented host app on the iOS 26.2 simulator
+(iPhone 17 Pro), driven by real HID touches. They hold per-frame offsets, the
+table views' and cells' layers, the delegate calls and the haptics.
+
+Done (UIKit lab, iOS 26.2 simulator, Oct 23 2026; in the picker's table): the
+row pitch, the picker's height, the rubber band's dimension, the coast's stop
+speed, the velocity floor, the snap at rest, the tap spin and the selection
+tick. Measured and kept by the gesture system instead: the
+scroll view coasts with 0.25 × the pan's velocity plus 0.75 × its value one
+event earlier (four HID releases; `velocity.scrollReleaseWeight`, which a
+pan's `scrollVelocity()` reads). On UIKit, Reduce Motion with Prefer Cross-Fade changes
+nothing on a picker; the Wheel follows design:reduced-motion instead.

package/src/motion/README.md

@@ -19,9 +19,11 @@ roles through `resolveMotion`.
 | `uikit/scroll.ts`                                | UIScrollView: deceleration rates, rubber band, bounce-back spring, `delaysContentTouches`, scroll to top.                                                            |
 | `uikit/timing.ts`                                | Non-spring clocks and curves: press highlight, Core Animation's named curves, keyboard, Reduced Motion cross-fade.                                                   |
 | `uikit/paging.ts`                                | A paging UIScrollView: the integrator that settles a release on its page, the page rule, the catch, `setContentOffset(animated:)`.                                   |
+| `uikit/alert.ts`                                 | UIAlertController: how a finger is tracked across the actions (highlight onset and bounds).                                                                          |
 | `uikit/navigation.ts`                            | UINavigationController: push velocity, parallax, dimming, transition clock, interactive pop finish rule.                                                             |
 | `uikit/progressBar.ts`                           | UIProgressView's fill: the whole-track duration and curve, its minimum length and empty alpha; the reduced-motion pulse (three roles).                               |
 | `uikit/gestures.ts`                              | Gesture recognizer thresholds, the velocity filter and haptic stand-ins, as `{value, unit}` entries (sources in JSDoc).                                              |
+| `uikit/picker.ts`                                | UIPickerView: row pitch, height and rubber band, velocity floor, the coast's stop speed, snap at rest, tap spin, tick.                                               |
 | `uikit/segmented.ts`                             | UISegmentedControl: the selection indicator's spring; under Reduce Motion the animator's cross-fade replaces it.                                                     |
 | `uikit/switch.ts`                                | UISwitch on iOS 26.2: geometry, the lift, settle, travel and tracking springs, the flip distance, the track colour.                                                  |
 | `roles.ts`                                       | The internal motion roles: the springs, durations and curves `spec:AST-094` FR4 names, registered by the shared tables, and a role's CSS form read back.             |
@@ -37,6 +39,7 @@ roles through `resolveMotion`.
 | `resolveSnapPoint.ts`                            | Release policy: the snap point a release lands on (flick, back-out cancel, step limit), on `selectSnapPoint`. Internal.                                              |
 | `bezier.ts`                                      | Cubic-bézier timing functions (Core Animation's named curves).                                                                                                       |
 | `animator.ts`                                    | Compositor animator: springs, coasts and any closed-form curve compiled to Web Animations, read back analytically.                                                   |
+| `progress.ts`                                    | A spring's progress, one curve mapped from another (companions, clamped ranges), the velocity that continues a motion.                                               |
 | `presentation.ts`                                | Where each moving element is drawn relative to where the engine hit-tests it, reported by the animator while translate runs; read by the gesture host at touch-down. |
 | `reducedMotionPlan.ts`                           | The animator's Reduce Motion planner: what one call becomes, a cross-fade whose travel lands while transparent or at once.                                           |
 | `__tests__/animator.interaction.browser.spec.ts` | Browser proofs on the interaction harness (Chromium and WebKit): busy main thread, end state through a block, no Layout / Paint, seeked curves, a dialog's backdrop. |
@@ -64,7 +67,7 @@ the timings that decide who gets a touch are not roles.
 ## Animator
 
 ```
-import {createAnimator} from '../motion/animator';
+import {createMotionAnimator} from '../motion/animator';
 import {coast} from '../motion/coast';
 import {solveSpringTowardRamp, toSpring} from '../motion/spring';
 import {resolveMotion} from '../motion/resolveMotion';
@@ -73,7 +76,7 @@ import {registerSpringsTable, springs} from '../motion/uikit';
 // Once, so the springs are registered as their roles:
 registerSpringsTable();
 
-const animator = createAnimator(sheet);
+const animator = createMotionAnimator(sheet);
 // The animator plays a motion role (spec:AST-094 FR4), its table value, as the
 // per-role tables stay internal (DEC-15); math on a spring reads the role with
 // resolveMotion.
@@ -138,8 +141,10 @@ await handle.finished; // true if it ran to the end, false if interrupted
   presented call's second frame) runs on over two frames, the start moves to
   the call's first read after it, with every call of that task. Everything
   the call starts shares that start
-  (`handle.started`); a retarget keeps an explicit one, and `{at}` puts
-  several animators on one clock. `{start: 'commit'}` lets the browser date
+  (`handle.started`); a retarget of a curve that still moves keeps an
+  explicit one, while one on a tail that already shows as at rest (within two
+  sample tolerances of its target, and slower than one a frame) counts as a
+  call from rest. `{at}` puts several animators on one clock. `{start: 'commit'}` lets the browser date
   a retarget too; `{start: 'presented'}` waits two frames, until the
   element at rest has been presented. `handle.curve(property)` is the curve
   a call plays, for a companion to follow. `{additive: true}` retargets the
@@ -168,7 +173,7 @@ await handle.finished; // true if it ran to the end, false if interrupted
 - `animatorFor(element)` returns the one animator for an element, so code
   that animates it from several places (a swipe on x, a removal on y)
   composes in one `translate` track.
-- `createAnimator(dialog, {pseudoElement: '::backdrop'})` drives a
+- `createMotionAnimator(dialog, {pseudoElement: '::backdrop'})` drives a
   pseudo-element; with no inline style to hold it, a static filling animation
   holds its end value until the next animation replaces it, while the
   pseudo-element exists. A dialog's `::backdrop` is made again each time the

package/src/motion/animatedLayout.ts

@@ -89,8 +89,10 @@ import {
   wrapText,
 } from './transientCopy';
 import {isSpring} from './roleValue';
-import {solveSpring, toSpring, type SpringDescription} from './spring';
+import {progressCurve} from './progress';
+import type {SpringDescription} from './spring';
 import {registerSpringsTable, SETTLE_SPRING} from './uikit/springs';
+import {themeReducesMotion} from '../privateAttributes/reducedMotion.stylex';
 import {reducedMotionCrossFade} from './uikit/timing';
 
 /** The shared motion role (`spec:AST-105` FR4). */
@@ -142,17 +144,20 @@ function settleSpring(): SpringDescription {
 }
 
 function springProgress(description: SpringDescription): SpringProgress {
-  const curve = solveSpring(toSpring(description), {from: 1, to: 0});
-  const durationMs = Math.max(1, curve.settleTime(0.001) * 1000);
+  const curve = progressCurve(description, {epsilon: 0.001});
+  const durationMs = Math.max(1, curve.duration * 1000);
   return {
     durationMs,
-    remaining: t => (t >= durationMs ? 0 : curve.value(t / 1000)),
+    remaining: t => (t >= durationMs ? 0 : 1 - curve.at(t / 1000)),
   };
 }
 
 /** The motion a change in `area` plays now. */
 function layoutMotion(area: Element): LayoutMotion {
-  if (matches(area, '(prefers-reduced-motion: reduce)')) {
+  if (
+    matches(area, '(prefers-reduced-motion: reduce)') ||
+    themeReducesMotion(area)
+  ) {
     if (!matches(area, '(pointer: coarse)')) {
       return {kind: 'instant'};
     }