@astryxdesign/core 0.7.8 → 0.7.9-canary.0200dfe

package/src/utils/interactionOverlay.stylex.ts

@@ -9,7 +9,8 @@
  * @input StyleX and the semantic interaction-overlay color tokens
  * @output Reusable background-color and background-image state styles, the
  *   touch press's registered strength variable (`pressVars`) and its clocks
- *   (`pressConsts`)
+ *   (`pressConsts`). The list row's compositor press layer and its clocks
+ *   are internal (privateAttributes/press.stylex.ts, utils/rowPressLayer.stylex.ts)
  * @position Internal styling utility for interactive core surfaces
  *
  * SYNC: When modified, update pressFeedback.ts, pressGesture.ts (the fade
@@ -41,7 +42,7 @@
 // background image, so a composer's color transition cannot fade the onset
 // in. `on` sets the strength to 1 on the first frame. `fading` animates it
 // from 1 to 0, not to the hover strength, because a finger has no hover. The
-// theme's motion tempo scales the release clock (AST-108).
+// release plays the theme's exit motion tokens, which follow its tempo.
 //
 // The release is an animation, not a transition. Composers own their
 // `transition-*` longhands, and StyleX is last-wins per property. A
@@ -54,7 +55,8 @@
 // `animation-*` on the element that composes them. The touch arms own both.
 
 import * as stylex from '@stylexjs/stylex';
-import {colorVars} from '../theme/tokens.stylex';
+import {reducedMotionFadeConsts} from '../motion/reducedMotion.stylex';
+import {colorVars, durationVars, easeVars} from '../theme/tokens.stylex';
 
 /**
  * The touch press's strength on the surface the controller painted, 0 to 1.
@@ -72,26 +74,22 @@ export const pressVars = stylex.defineVars({
 });
 
 /**
- * The touch press's clocks that both the stylesheet and the controller read.
- *
- * `defineConsts`, so the one number is inlined here at build time and is the
- * controller's constant at run time (`PRESS_FADE_MS` in pressGesture.ts):
- * the release animation and the controller's clock cannot drift apart. When
- * that clock runs out, the controller waits for a release animation that a
- * busy main thread started late, then removes the attribute.
+ * The touch press's measured release clock, kept as a reference value. Press
+ * releases now play the theme's `--duration-exit`.
  */
 export const pressConsts = stylex.defineConsts({
-  /** How long the release takes, in ms. UIKit's deselect clock. */
+  /** UIKit's deselect clock, in ms: the measured reference value. */
   releaseMs: 200,
 });
 
 /**
- * The release's clock as CSS, scaled by the theme's `--_astryx-motion-tempo`
- * up to 1.5, its maximum. The controller's timer reads the same property.
+ * The release's clock: the theme's exit duration. The token already
+ * follows the theme's tempo. The controller's timer reads the
+ * same property.
  */
-const PRESS_RELEASE_DURATION = `calc(${pressConsts.releaseMs}ms * min(var(--_astryx-motion-tempo, 1), 1.5))`;
-/** The same clock under Reduce Motion: a tempo may shorten it, never lengthen it. */
-const PRESS_RELEASE_DURATION_REDUCED = `min(${pressConsts.releaseMs}ms, calc(${pressConsts.releaseMs}ms * var(--_astryx-motion-tempo, 1)))`;
+const PRESS_RELEASE_DURATION = durationVars['--duration-exit'];
+/** The same clock under Reduce Motion, no longer than the Reduce Motion fade. */
+const PRESS_RELEASE_DURATION_REDUCED = `min(${durationVars['--duration-exit']}, ${reducedMotionFadeConsts.duration})`;
 
 const ENABLED = ':where(:not(:disabled,[aria-disabled="true"]))';
 const HOVER_HOVER = '@media (hover: hover)';
@@ -144,13 +142,12 @@ const pressRelease = stylex.keyframes({
 });
 
 /**
- * The release's curve: a gentle ease-out that spends the whole clock fading
- * (strength ≈ 0.2 at the midpoint), which is what a deselect crossfade reads
- * as. Not the system's `--ease-standard`: that curve is for things that move,
- * and is so front-loaded (strength 0.05 at the midpoint) that the release
- * would read as half its clock.
+ * The release's curve: the theme's exit easing. The list row's layer
+ * (privateAttributes/press.stylex.ts) and Switch's press layers use the same
+ * token; interactionOverlay.cell.test.ts and Switch.test.tsx fail if they
+ * differ.
  */
-const RELEASE_EASE = 'cubic-bezier(0, 0, 0.2, 1)';
+const RELEASE_EASE = easeVars['--ease-exit'];
 
 /**
  * The touch press's strength and its release, on the element the controller

package/src/utils/plainDate.ts

@@ -9,6 +9,11 @@
 
 import type {ISODateString, PlainDate} from './dateTypes';
 import type {Locale} from '../i18n/types';
+import {
+  formatCalendarDate,
+  isCalendarSystem,
+  type CalendarSystem,
+} from './calendarSystem';
 import {firstCharacter} from './characters';
 import {standaloneMonthCapitalLanguages} from './standaloneMonthCapitals.generated';
 
@@ -295,6 +300,52 @@ export function plainDateIsInRange(
   return compare(pd, range[0]) >= 0 && compare(pd, range[1]) <= 0;
 }
 
+export interface NearestAcceptedDateOptions {
+  min?: PlainDate | null;
+  max?: PlainDate | null;
+  /** Rejects a date inside the bounds, such as a date constraint. */
+  isDateDisabled?: (date: PlainDate) => boolean;
+  /** How many days to search on each side of the clamped date. */
+  searchDays?: number;
+}
+
+/**
+ * The date nearest to `target` that a field accepts. It clamps `target` into
+ * [`min`, `max`], then searches outward one day at a time, inside the bounds,
+ * for a date that `isDateDisabled` allows. On a tie the later date wins. When
+ * no date inside the search window is allowed, it returns the clamped date.
+ */
+export function nearestAcceptedDate(
+  target: PlainDate,
+  {min, max, isDateDisabled, searchDays = 366}: NearestAcceptedDateOptions,
+): PlainDate {
+  let clamped = target;
+  if (min != null && compare(clamped, min) < 0) {
+    clamped = min;
+  }
+  if (max != null && compare(clamped, max) > 0) {
+    clamped = max;
+  }
+  if (isDateDisabled == null || !isDateDisabled(clamped)) {
+    return clamped;
+  }
+  const isAccepted = (date: PlainDate) =>
+    (min == null || compare(date, min) >= 0) &&
+    (max == null || compare(date, max) <= 0) &&
+    !isDateDisabled(date);
+  for (let offset = 1; offset <= searchDays; offset += 1) {
+    const later = plainDateAddDays(clamped, offset);
+    if (isAccepted(later)) {
+      return later;
+    }
+    const earlier = plainDateAddDays(clamped, -offset);
+    if (isAccepted(earlier)) {
+      return earlier;
+    }
+  }
+  return clamped;
+}
+
 export function plainDateSetFirstOfMonth(pd: PlainDate): PlainDate {
   return {year: pd.year, month: pd.month, day: 1};
 }
@@ -374,8 +425,13 @@ export const DATE_FORMAT_MONTH_YEAR: Intl.DateTimeFormatOptions = {
 export function plainDateFormatStandaloneMonthYear(
   pd: PlainDate,
   locale: Locale,
+  calendar: Intl.DateTimeFormatOptions['calendar'] = 'gregory',
 ): string {
-  const label = plainDateFormat(pd, DATE_FORMAT_MONTH_YEAR, locale);
+  const label = plainDateFormat(
+    pd,
+    {...DATE_FORMAT_MONTH_YEAR, calendar},
+    locale,
+  );
   let language: string;
   try {
     language = new Intl.Locale(locale).language;
@@ -450,35 +506,63 @@ export const DATE_FORMAT_SHORT_WITH_YEAR: Intl.DateTimeFormatOptions = {
  * when `options.calendar` is omitted. The explicit option remains supported for
  * compatibility with the public `Intl.DateTimeFormatOptions` signature; it is a
  * display-only escape hatch and does not change PlainDate arithmetic, parsing,
- * serialization, or any Astryx component's calendar semantics.
+ * serialization, or any Astryx component's calendar semantics. Another
+ * calendar names the month and day that Calendar shows in it.
  */
 export function plainDateFormat(
   pd: PlainDate,
   options: Intl.DateTimeFormatOptions,
   locale: Locale = 'en',
 ): string {
+  const calendar = options.calendar ?? 'gregory';
+  if (calendar !== 'gregory' && isCalendarSystem(calendar)) {
+    return formatCalendarDate(calendar, pd, options, locale);
+  }
+  const [format, date] = plainDateFormatInput(pd, options, locale);
+  return format.format(date);
+}
+
+/**
+ * The parts of `plainDateFormat`'s output, from the same formatter and date.
+ * Internal: not re-exported from `utils/index.ts`.
+ */
+export function plainDateFormatToParts(
+  pd: PlainDate,
+  options: Intl.DateTimeFormatOptions,
+  locale: Locale,
+): Intl.DateTimeFormatPart[] {
+  const [format, date] = plainDateFormatInput(pd, options, locale);
+  return format.formatToParts(date);
+}
+
+function plainDateFormatInput(
+  pd: PlainDate,
+  options: Intl.DateTimeFormatOptions,
+  locale: Locale,
+): [Intl.DateTimeFormat, Date | number] {
   const calendar = options.calendar ?? 'gregory';
   if (options.timeZone != null) {
-    return dateTimeFormatFor(locale, {...options, calendar}).format(
+    return [
+      dateTimeFormatFor(locale, {...options, calendar}),
       plainDateToDate(pd),
-    );
+    ];
   }
   if (TIME_OF_DAY_FIELDS.some(field => options[field] != null)) {
     // A zone name or a time of day reads local midnight in the zone current
     // at the call. A cached formatter would keep the zone it was built in,
     // so this one is built for the call.
-    return new Intl.DateTimeFormat(locale, {...options, calendar}).format(
+    return [
+      new Intl.DateTimeFormat(locale, {...options, calendar}),
       plainDateToDate(pd),
-    );
+    ];
   }
   // Date fields alone: UTC midnight formatted in UTC, so neither the cached
   // formatter nor the date depends on the host's zone, which can change while
   // a page is open.
-  return dateTimeFormatFor(locale, {
-    ...options,
-    calendar,
-    timeZone: 'UTC',
-  }).format(utcTime(pd.year, pd.month - 1, pd.day));
+  return [
+    dateTimeFormatFor(locale, {...options, calendar, timeZone: 'UTC'}),
+    utcTime(pd.year, pd.month - 1, pd.day),
+  ];
 }
 
 /** Options that print a time of day or a zone, which a PlainDate lacks. */
@@ -518,6 +602,20 @@ export function dateTimeFormatFor(
   return format;
 }
 
+/**
+ * @internal `dateTimeFormatFor`, except that without `options.timeZone` it
+ * builds a formatter for the call. A cached formatter keeps the host zone it
+ * was built in.
+ */
+export function dateTimeFormatAtCall(
+  locale: Locale,
+  options: Intl.DateTimeFormatOptions,
+): Intl.DateTimeFormat {
+  return options.timeZone === undefined
+    ? new Intl.DateTimeFormat(locale, options)
+    : dateTimeFormatFor(locale, options);
+}
+
 /**
  * The locale's name for the "week of year" date field ("week", "Woche", "週"),
  * from CLDR through `Intl.DisplayNames`. Calendar names its week-number
@@ -543,23 +641,29 @@ export function plainDateWeekFieldName(locale: Locale = 'en'): string {
   return 'week';
 }
 
-const dayNumberFormats = new Map<Locale, Intl.NumberFormat>();
+const dayNumberFormats = new Map<string, Intl.NumberFormat>();
 
 /**
  * A day of the month or a week number in the locale's own digits: `15` in
- * English, `۱۵` in Persian, `١٥` in Egyptian Arabic. Only the digits follow the
- * locale. The number stays the Gregorian day or ISO week that it names, so no
- * other calendar applies, and no grouping separator or unit word is added.
+ * English, `۱۵` in Persian, `١٥` in Egyptian Arabic. A `numberingSystem`
+ * replaces the locale's digits. Only the digits change. The number stays the
+ * value that it is given, so no calendar applies, and no grouping separator or
+ * unit word is added.
  * Internal: not re-exported from `utils/index.ts`.
  */
 export function plainDateFormatDayNumber(
   value: number,
   locale: Locale,
+  numberingSystem?: string,
 ): string {
-  let format = dayNumberFormats.get(locale);
+  const key = `${locale}|${numberingSystem ?? ''}`;
+  let format = dayNumberFormats.get(key);
   if (format == null) {
-    format = new Intl.NumberFormat(locale, {useGrouping: false});
-    dayNumberFormats.set(locale, format);
+    format = new Intl.NumberFormat(locale, {
+      useGrouping: false,
+      numberingSystem,
+    });
+    dayNumberFormats.set(key, format);
   }
   return format.format(value);
 }
@@ -605,14 +709,21 @@ export const SHARED_DATE_FORMAT_OPTIONS: Record<
  * members. The shared entry point DateInput uses for the named-format path;
  * Timestamp maps the same members onto {@link SHARED_DATE_FORMAT_OPTIONS} in
  * its own `formatTimestamp` switch (its input is a `Date`, not a `PlainDate`).
+ * The locale-aware members write the date in `calendar`, which defaults to
+ * Gregorian. `system_date` stays the Gregorian ISO date in every calendar.
  */
 export function formatSharedDate(
   pd: PlainDate,
   format: SharedDateFormat,
   locale: Locale = 'en',
+  calendar: CalendarSystem = 'gregory',
 ): string {
   if (format === 'system_date') {
     return plainDateToISO(pd);
   }
-  return plainDateFormat(pd, SHARED_DATE_FORMAT_OPTIONS[format], locale);
+  return plainDateFormat(
+    pd,
+    {...SHARED_DATE_FORMAT_OPTIONS[format], calendar},
+    locale,
+  );
 }

package/src/utils/pressFeedback.ts

@@ -3,10 +3,10 @@
 /**
  * @file pressFeedback.ts
  * @input The press state machine (pressGesture.ts), the menu-press and
- *   press-group markers and the document's pointer, keyboard, scroll and
+ *   press-group markers, the scroll-view test (scrollView.ts) and the document's pointer, keyboard, scroll and
  *   visibility events
  * @output PRESSABLE_ATTRIBUTE, PRESSED_ATTRIBUTE, pressableProps,
- *   pressFadeMs and installPressFeedback
+ *   pressFadeMs, installPressFeedback and cancelPress
  * @position The DOM half of the touch press model. usePressFeedback installs
  *   it, and the CSS arms live in interactionOverlay.stylex.ts.
  *
@@ -23,9 +23,13 @@
 // Where the primary pointer is fine, the controller ignores the mouse and the
 // keyboard, and CSS `:active` keeps their press. Under a coarse primary
 // pointer the CSS drops `:active`, so the controller paints every press. A
-// finger's press paints after the delay. A mouse, trackpad or Space press
-// paints at once. The controller reads the same query as the stylesheet, so
-// they agree.
+// mouse, trackpad or Space press paints at once. The controller reads the
+// same query as the stylesheet, so they agree.
+//
+// A finger waits only inside a scroller. Outside one, a surface highlights in
+// the frame the finger lands, as a UIControl does. Inside one, it waits the
+// content-touch delay, because the touch can become a scroll. Rows follow the
+// same rule.
 //
 // A surface's hold does nothing, so it keeps the browser's long-press text
 // selection (AST-094). Only an element whose hold does something suppresses
@@ -43,7 +47,10 @@ import {
   pressGestureStep,
 } from './pressGesture';
 import {isCoarsePointer, watchCoarsePointer} from './coarsePointer';
+import {reducedMotionFadeConsts} from '../motion/reducedMotion.stylex';
+import {parseMotionRoleValue} from '../motion/roles';
 import {subscribeInput} from './inputStream';
+import {isInsideScrollView} from './scrollView';
 import {TOUCH_QUERY} from './touchPresentation';
 import {holdsPressThroughDrag} from '../privateAttributes/pressHoldsDrag.stylex';
 import {isTrackedByGroup} from '../privateAttributes/pressGroupItem.stylex';
@@ -151,19 +158,24 @@ const TIMER_MS: Record<NonNullable<PressStep['timer']>, number> = {
 
 /**
  * The release fade's clock on `element`, read once, at the release, from the
- * property its stylesheet reads: the theme's `--_astryx-motion-tempo`. Under
- * Reduce Motion a tempo may shorten the fade, never lengthen it past 200 ms.
+ * token its stylesheet reads: the theme's `--duration-exit`. Without a
+ * readable value it is the token's default. Under Reduce Motion it is no
+ * longer than the Reduce Motion fade, as in the stylesheet.
  */
 export function pressFadeMs(element: Element): number {
-  const style = getComputedStyle(element);
-  const value = style.getPropertyValue('--_astryx-motion-tempo').trim();
-  const read = value === '' ? Number.NaN : Number(value);
-  const tempo = Number.isFinite(read) && read > 0 ? read : 1;
-  const scaled = PRESS_FADE_MS * tempo;
+  const exit =
+    parseMotionRoleValue(
+      'duration',
+      getComputedStyle(element).getPropertyValue('--duration-exit'),
+    ) ?? PRESS_FADE_MS;
   const reduced =
     typeof window.matchMedia === 'function' &&
     window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-  return reduced ? Math.min(scaled, PRESS_FADE_MS) : scaled;
+  const bound = parseMotionRoleValue(
+    'duration',
+    reducedMotionFadeConsts.duration,
+  );
+  return reduced && bound != null ? Math.min(exit, bound) : exit;
 }
 
 /**
@@ -247,7 +259,11 @@ function paintElement(element: HTMLElement, paint: PressPaint): void {
     element.removeAttribute(PRESSED_ATTRIBUTE);
     return;
   }
-  element.setAttribute(PRESSED_ATTRIBUTE, paint);
+  // A step that keeps the paint writes nothing, so the element sees one
+  // change per paint.
+  if (element.getAttribute(PRESSED_ATTRIBUTE) !== paint) {
+    element.setAttribute(PRESSED_ATTRIBUTE, paint);
+  }
 }
 
 function clearTimer(slot: Slot): void {
@@ -381,6 +397,21 @@ function finish(slot: Slot): void {
   }
 }
 
+/**
+ * Ends the press the controller follows on `element`, and its paint, at once.
+ * A clickable container calls it when a press starts on an interactive
+ * element inside it: that press does not activate the container, so the
+ * container shows no press.
+ */
+export function cancelPress(element: Element): void {
+  if (finger.live?.element === element) {
+    finish(finger);
+  }
+  if (button.live?.element === element) {
+    finish(button);
+  }
+}
+
 /** A new press on an element owns its paint: the other slot's gesture there ends. */
 function takeOver(other: Slot, element: HTMLElement): void {
   if (other.live?.element === element) {
@@ -521,6 +552,7 @@ function onPointerDown(event: PointerEvent): void {
       kind: 'down',
       x: event.clientX,
       y: event.clientY,
+      delayed: isInsideScrollView(element),
     }),
   );
 }

package/src/utils/pressGesture.ts

@@ -21,10 +21,15 @@
 // primary pointer, so a mouse, trackpad or Space press on such a device comes
 // here as `buttonDown`: painted at once and faded on release.
 //
+// Only a finger inside a scroller waits. The controller tells the machine
+// which touch waits (`down`'s `delayed`), and a touch that does not wait goes
+// straight to `pressed`. After that the machine is the same.
+//
 // The constants were measured against native apps. The machine knows nothing
 // of the DOM, so {@link pressGestureStep}'s cases are the state diagram.
 
-import {pressConsts} from './interactionOverlay.stylex';
+import {resolveTokenReferences} from '../theme/tokenReferences';
+import {durationDefaults} from '../theme/tokens.stylex';
 
 /**
  * How long a finger must stay put before the surface believes it.
@@ -59,14 +64,16 @@ export const PRESS_SLOP_PX = 10;
 export const PRESS_FLASH_MS = 100;
 
 /**
- * How long the paint takes to leave after a release: UIKit's deselect
- * crossfade. The one number, shared with the stylesheet: the release
- * animation in interactionOverlay.stylex.ts runs on the same constant, so the
- * controller's release clock and the fade cannot drift apart. When the clock
- * runs out, the controller waits for a release animation that still runs,
- * then removes the attribute.
+ * How long the paint takes to leave after a release when no theme sets
+ * `--duration-exit`: that token's default. The release plays the theme's
+ * exit motion tokens, so the controller reads the token on
+ * the pressed element (`pressFadeMs` in pressFeedback.ts) and falls back to
+ * this. When the clock runs out, the controller waits for a release
+ * animation that still runs, then removes the attribute.
  */
-export const PRESS_FADE_MS: number = pressConsts.releaseMs;
+export const PRESS_FADE_MS: number = Number.parseFloat(
+  resolveTokenReferences(durationDefaults)['--duration-exit'],
+);
 
 /**
  * How recently a scroller must have moved for a touch on it to be a BRAKE
@@ -105,7 +112,17 @@ export interface PressGesture {
 }
 
 export type PressEvent =
-  | {kind: 'down'; x: number; y: number}
+  | {
+      kind: 'down';
+      x: number;
+      y: number;
+      /**
+       * Whether this touch waits {@link PRESS_ONSET_MS} before it paints:
+       * a surface inside a scroller. Defaults to
+       * `true`.
+       */
+      delayed?: boolean;
+    }
   /**
    * A mouse button or the Space key went down on the surface. The
    * controller sends this only where the stylesheet has dropped `:active`
@@ -167,6 +184,15 @@ export function pressGestureStep(
   event: PressEvent,
 ): PressStep {
   if (event.kind === 'down') {
+    // A surface with no scroller above it: nothing can turn this touch into a
+    // scroll, so it paints in the frame it lands, as a UIControl highlights.
+    if (event.delayed === false) {
+      return {
+        gesture: {originX: event.x, originY: event.y, phase: 'pressed'},
+        paint: 'on',
+        timer: null,
+      };
+    }
     // A new touch always starts armed and painting nothing, whatever the last
     // gesture ended as. This is the only way out of `dead`.
     return {

package/src/utils/scrollView.ts

@@ -0,0 +1,135 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file scrollView.ts
+ * @input An element and its computed styles
+ * @output Exports parseTouchAction, rootOverflow, SCROLLABLE_OVERFLOW and
+ *   isInsideScrollView: whether a touch on the element lands inside a box the
+ *   browser can scroll
+ * @position The one definition of "inside a scroll view", shared by the
+ *   press feedback controller (utils/pressFeedback.ts) and the gesture
+ *   core's native-scroll probe (gestures/nativeScroll.ts), so Core's main
+ *   entry can ask it without the gesture core
+ */
+
+import {parentAcrossShadow} from './flatTree';
+
+/** Overflow values that let a box scroll. */
+export const SCROLLABLE_OVERFLOW: ReadonlySet<string> = new Set([
+  'auto',
+  'scroll',
+  'overlay',
+]);
+
+/** How far a box must overflow, in px, before it counts as scrolling. */
+const OVERFLOW_TOLERANCE_PX = 1;
+
+export interface AllowedPans {
+  readonly x: boolean;
+  readonly y: boolean;
+}
+
+/** Which pans a `touch-action` value lets the browser perform. */
+export function parseTouchAction(value: string): AllowedPans {
+  const tokens = value.trim().split(/\s+/);
+  if (tokens.includes('auto') || tokens.includes('manipulation')) {
+    return {x: true, y: true};
+  }
+  if (tokens.includes('none')) {
+    return {x: false, y: false};
+  }
+  return {
+    x: tokens.some(
+      token =>
+        token === 'pan-x' || token === 'pan-left' || token === 'pan-right',
+    ),
+    y: tokens.some(
+      token => token === 'pan-y' || token === 'pan-up' || token === 'pan-down',
+    ),
+  };
+}
+
+/**
+ * The viewport's overflow on an axis. It scrolls unless the root or the body
+ * clips it, as a scroll lock does with `overflow: hidden`.
+ */
+export function rootOverflow(doc: Document, axis: 'x' | 'y'): string {
+  const view = doc.defaultView;
+  if (view == null) {
+    return 'hidden';
+  }
+  for (const element of [doc.documentElement, doc.body]) {
+    if (element == null) {
+      continue;
+    }
+    const style = view.getComputedStyle(element);
+    const value = axis === 'x' ? style.overflowX : style.overflowY;
+    if (value === 'hidden' || value === 'clip') {
+      return 'hidden';
+    }
+  }
+  return 'auto';
+}
+
+function overflows(element: Element, axis: 'x' | 'y'): boolean {
+  return axis === 'y'
+    ? element.scrollHeight - element.clientHeight > OVERFLOW_TOLERANCE_PX
+    : element.scrollWidth - element.clientWidth > OVERFLOW_TOLERANCE_PX;
+}
+
+/**
+ * Whether a touch on `element` lands inside a scroll view, UIKit's question
+ * for a touch: a box above it, the page included, overflows on an axis it
+ * scrolls, and `touch-action` on the way up leaves that axis to the browser.
+ * A `position: fixed` box ends the walk, because it does not move with any
+ * scroller above it. A wheel scrolls whatever `touch-action` says, so a
+ * wheel's question passes `readsTouchAction: false`.
+ */
+export function isInsideScrollView(
+  element: Element,
+  {readsTouchAction = true}: {readsTouchAction?: boolean} = {},
+): boolean {
+  const doc = element.ownerDocument;
+  const view = doc.defaultView;
+  if (view == null) {
+    return false;
+  }
+  const root = doc.scrollingElement ?? doc.documentElement;
+  let panX = true;
+  let panY = true;
+  for (let node: Node | null = element; node != null;) {
+    if (node instanceof Element) {
+      const style = view.getComputedStyle(node);
+      if (readsTouchAction) {
+        const pans = parseTouchAction(style.touchAction || 'auto');
+        panX &&= pans.x;
+        panY &&= pans.y;
+      }
+      if (node === root || node === doc.documentElement) {
+        break;
+      }
+      if (
+        (panY &&
+          SCROLLABLE_OVERFLOW.has(style.overflowY) &&
+          overflows(node, 'y')) ||
+        (panX &&
+          SCROLLABLE_OVERFLOW.has(style.overflowX) &&
+          overflows(node, 'x'))
+      ) {
+        return true;
+      }
+      if (style.position === 'fixed') {
+        return false;
+      }
+    }
+    node = parentAcrossShadow(node);
+  }
+  return (
+    (panY &&
+      SCROLLABLE_OVERFLOW.has(rootOverflow(doc, 'y')) &&
+      overflows(root, 'y')) ||
+    (panX &&
+      SCROLLABLE_OVERFLOW.has(rootOverflow(doc, 'x')) &&
+      overflows(root, 'x'))
+  );
+}

package/src/utils/selectionLock.ts

@@ -28,7 +28,11 @@
 //
 // A mouse never takes the lock, so its released behavior stays (AST-017).
 
-import {containsAlongFlatTree, parentAcrossShadow} from './flatTree';
+import {
+  containsAlongFlatTree,
+  deepActiveElement,
+  parentAcrossShadow,
+} from './flatTree';
 import {subscribeInput} from './inputStream';
 import {isIosWebKit} from './touchQueries';
 
@@ -616,15 +620,6 @@ function openShadowRootsOf(target: EventTarget | null): ShadowRoot[] {
   return roots;
 }
 
-/** The focused element, inside open shadow roots too. */
-function deepActiveElement(doc: Document | null): Element | null {
-  let active = doc?.activeElement ?? null;
-  while (active?.shadowRoot?.activeElement != null) {
-    active = active.shadowRoot.activeElement;
-  }
-  return active;
-}
-
 /**
  * The selection-lock styles on `set`, refcounted per element; idempotent
  * release.