@astryxdesign/core 0.7.8-canary.ffd29c5 → 0.7.8

package/src/motion/MEASUREMENTS.md

@@ -268,6 +268,16 @@ match the probe.
 | M-SH21  | SheetProbe on iPad, iOS 27 `preferredPlacement` each case, RTL                                                         | present                                                                                                                             | placement geometry and motion                                                                                                                           | B, C    |
 | M-SH22  | SheetProbe iOS 26 `preferredTransition = .zoom` from a bar button                                                      | present, dismiss                                                                                                                    | morph geometry per frame                                                                                                                                | A, C    |
 
+## Date picker (UIDatePicker)
+
+Rules the DateInput, DateTimeInput and TimeInput touch sheets follow, in their
+own table (`uikit/datePicker.ts`). The wheels' physics are UIPickerView's: the
+table only names them, and their values belong to the wheel's own table.
+
+Done (UIKit lab, iOS 26.2 simulator, Oct 23 2026; in the date picker's table):
+the month/year wheels changing the date, the AM/PM column following the hour,
+the turn back onto a bound, and the day clamped to the month.
+
 ## Context menu (UIContextMenuInteraction)
 
 Values the context menu reads from its own table, which lands with the

package/src/motion/README.md

@@ -26,6 +26,8 @@ roles through `resolveMotion`.
 | `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.                                                  |
+| `uikit/datePicker.ts`                            | UIDatePicker: the rules it adds to its wheels.                                                                                                                       |
+| `android/keyboard.ts`                            | Android's software keyboard (Chrome with Gboard): its slides' durations and curves (no theme's) and when they start against Chrome's report and a blur.              |
 | `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.             |
 | `roleValue.ts`                                   | A role's CSS form, written: a spring's duration and bounce, a duration in ms, a curve's `cubic-bezier()`.                                                            |
 | `resolveMotion.ts`                               | A role's value: its table value, as the per-role tables stay internal (`spec:AST-094` DEC-15).                                                                       |

package/src/motion/android/index.ts

@@ -0,0 +1,18 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file index.ts
+ * @input The domain files of the Android constants table
+ * @output Re-exports `keyboard`
+ * @position Entry of the Android constants table (motion/android). It is
+ *   internal to core, not exported from the package entry point.
+ *
+ * Where a touch presentation follows something Android draws itself, such as
+ * the software keyboard, its numbers come from here with their sources. The
+ * UIKit table does the same for iOS.
+ *
+ * SYNC: When you add a domain file, re-export it here and list it in
+ * /packages/core/src/motion/README.md.
+ */
+
+export {keyboard} from './keyboard';

package/src/motion/android/keyboard.ts

@@ -0,0 +1,96 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file keyboard.ts
+ * @input None
+ * @output `keyboard`: how the software keyboard moves on Android, in Chrome
+ *   with Gboard, as the page sees it. It holds the slides' durations and
+ *   curves, and when they start against Chrome's report and a blur.
+ * @position The keyboard domain of the Android constants table, read by
+ *   keyboard/keyboardModel.ts. The UIKit table holds iOS's keyboard.
+ *
+ * SYNC: When modified, update /packages/core/src/keyboard/README.md
+ */
+
+// Chrome reports the keyboard once per slide, through the visual viewport,
+// just after the slide starts, never per frame. Content that rides the
+// keyboard plays these curves from the slide's start, so it moves in step
+// with Gboard. They are Gboard's own motion, with no motion role. The system
+// moves the keyboard on them whatever the page does, so any other curve
+// would leave the content out of step.
+//
+// The values come from the Android 15 emulator with Chromium 158 and Gboard.
+// A screen recording at 540 × 1200 gives Gboard's top in every frame, beside
+// a marker the page paints on each report. Every leaf carries one or more
+// `@source`, and android.test.ts enforces it.
+export const keyboard = {
+  /**
+   * How long Gboard takes to slide up, in ms: from its first moved frame to
+   * its resting top.
+   *
+   * @source measured: Chromium 158 with Gboard on Android 15 (API 35
+   *   emulator); 20 shows recorded frame by frame: 250 to 282 ms, 18 of
+   *   them 264 to 268 ms, Oct 25 2026
+   */
+  showMs: 267,
+  /**
+   * The curve of Gboard's slide up, cubic-bézier control points: fast out,
+   * a long settle.
+   *
+   * @source measured: Chromium 158 with Gboard on Android 15 (API 35
+   *   emulator); the same 20 shows fit this curve over `showMs` within
+   *   2.4 px rms, Oct 25 2026
+   */
+  showCurve: [0.1, 0, 0, 1],
+  /**
+   * How long after Gboard starts to slide up Chrome's report of it fires, in
+   * ms. A show rides from the report dated back by this, joining the slide
+   * where it is.
+   *
+   * @source measured: Chromium 158 with Gboard on Android 15 (API 35
+   *   emulator); twelve shows: the first frame the page painted after the
+   *   visual viewport's resize came 14 to 35 ms (median 33) after Gboard's
+   *   first moved frame, less the 8 ms an event takes on average to reach
+   *   the screen, Oct 25 2026
+   */
+  showReportLagMs: 25,
+  /**
+   * How long Gboard takes to slide down out of the page, in ms.
+   *
+   * @source measured: Chromium 158 with Gboard on Android 15 (API 35
+   *   emulator); 21 hides recorded frame by frame, from Gboard's first
+   *   moved frame until it leaves the screen: 148 to 153 ms in 20 of them;
+   *   this length with `hideCurve` fits them within 7.7 px rms,
+   *   Oct 25 2026
+   */
+  hideMs: 167,
+  /**
+   * The curve of Gboard's slide down, cubic-bézier control points: a slow
+   * first frame, then fast.
+   *
+   * @source measured: Chromium 158 with Gboard on Android 15 (API 35
+   *   emulator); the same 21 hides, a free fit over `hideMs`, Oct 25 2026
+   */
+  hideCurve: [0.3, 0.1, 0.2, 0.9],
+  /**
+   * How long after the focused field blurs (to nothing that brings up a
+   * keyboard) Gboard starts to slide down, in ms.
+   *
+   * @source measured: Chromium 158 with Gboard on Android 15 (API 35
+   *   emulator); five scripted blurs with a marker the page paints on the
+   *   blur: Gboard's first moved frame came from a frame before the marker
+   *   to 33 ms after it (median 16), Oct 25 2026
+   */
+  hideAfterBlurMs: 16,
+  /**
+   * How long after Gboard starts to slide down Chrome's report of the hide
+   * fires, in ms, measured on blurs. A hide nothing predicts, such as Back,
+   * reuses it, though Chrome can report Back later in the slide.
+   *
+   * @source measured: Chromium 158 with Gboard on Android 15 (API 35
+   *   emulator); twelve scripted blurs: the visual viewport's resize came
+   *   42 to 52 ms after the blur (median 49), less `hideAfterBlurMs`,
+   *   Oct 25 2026
+   */
+  hideReportLagMs: 33,
+} as const;

package/src/motion/uikit/datePicker.ts

@@ -0,0 +1,60 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file datePicker.ts
+ * @input Nothing; data only
+ * @output Exports `datePicker`: the rules UIDatePicker adds to its wheels. The
+ *   month/year wheels change the date, the AM/PM column follows the hour, a
+ *   column turns back onto a bound, and a day clamps to its month.
+ * @position The date picker domain of the UIKit constants table
+ *   (motion/uikit), for the date and time touch sheets. Every leaf names its
+ *   source, which uikit.test.ts checks.
+ *
+ * SYNC: When modified, update /packages/core/src/motion/MEASUREMENTS.md and
+ * /packages/core/src/motion/README.md.
+ */
+
+export const datePicker = {
+  calendar: {
+    monthYearWheels: {
+      /**
+       * Turning the month or year wheel changes the picker's date, keeping
+       * the day, and fires `valueChanged`.
+       * @source measured: UIKit lab, iOS 26.2 simulator, `.date` `.inline`,
+       *   October 15 → May 15 after the month wheel's fling, with a
+       *   `valueChanged` carrying May 15, Oct 23 2026
+       */
+      changesDate: true,
+    },
+  },
+  wheels: {
+    /**
+     * In 12-hour time the AM/PM column follows the hour. Turning the hour from
+     * 11 to 12 turns the time from AM to PM, and back. From 12 to 1 it keeps
+     * the half of the day.
+     * @source measured: UIKit lab, iOS 26.2 simulator, `.time` `.wheels`,
+     *   en_US: 11:58 AM, hour wheel +1 row → `valueChanged` 12:58 PM; then
+     *   the minute wheel's +4 rows carried the hour from 12 to 1 → 1:02 PM,
+     *   Oct 23 2026
+     */
+    meridiemFollowsHour: true,
+    /**
+     * A column that comes to rest past `minimumDate` or `maximumDate` turns
+     * back onto the bound. Its `valueChanged` already carries the bound. For
+     * example, with bounds 9:00–17:00, the hour of 10:00 dragged to 7 reads
+     * 9:00 at rest. The hour column then turns 64 pt, two rows, back to 9.
+     * @source measured: UIKit lab, iOS 26.2 simulator, `.time` `.wheels`
+     *   with bounds 9:00–17:00 and `minuteInterval` 15, per-frame hour
+     *   offsets after the rest (0.4, 2, 7.4, 16, 26.4, 37.7, 48.3, 56.7,
+     *   62, 64 pt at 33 ms steps) and the `valueChanged` time, Oct 23 2026
+     */
+    restPastBound: 'turnToBound',
+    /**
+     * In `.date` wheels a day the month does not have clamps to the month's
+     * last day (January 30, month +1 → February 28).
+     * @source measured: UIKit lab, iOS 26.2 simulator, `.date` `.wheels`
+     *   with bounds Jun 1 2026 – Mar 15 2027, Oct 23 2026
+     */
+    dayClampsToMonth: true,
+  },
+} as const;

package/src/motion/uikit/index.ts

@@ -5,9 +5,9 @@
  * @input The domain files of the UIKit constants table
  * @output Re-exports `springs` and one constant per spring (`SHEET_PRESENT_SPRING`,
  *   …), `scroll`, `timing`, `navigation`, `picker`, `progressBar`,
- *   `segmentedControl`, the `slider` and switch (`switchControl`) domains, and
- *   the gesture thresholds (one `UIKIT_*` group per recognizer, their union
- *   `UIKIT_GESTURES`, and the haptic tables)
+ *   `segmentedControl`, `datePicker`, `slider` and `switchControl`. It also
+ *   re-exports the gesture thresholds: one `UIKIT_*` group per recognizer,
+ *   their union `UIKIT_GESTURES`, and the haptic tables
  * @position Entry of the UIKit constants table (motion/uikit). Internal to
  *   core: not exported from the package entry point
  *
@@ -39,6 +39,7 @@ export {
   type GestureConstantUnit,
   type HapticFeedbackKind,
 } from './gestures';
+export {datePicker} from './datePicker';
 export {navigation, registerNavigationTable} from './navigation';
 export {picker} from './picker';
 export {progressBar, registerProgressBarTable} from './progressBar';

package/src/utils/interactionOverlay.stylex.ts

@@ -76,8 +76,9 @@ export const pressVars = stylex.defineVars({
  *
  * `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 timer that removes the attribute after it
- * cannot drift apart.
+ * 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.
  */
 export const pressConsts = stylex.defineConsts({
   /** How long the release takes, in ms. UIKit's deselect clock. */

package/src/utils/layoutViewport.ts

@@ -0,0 +1,104 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file layoutViewport.ts
+ * @input A window: its innerHeight and innerWidth, its visual viewport's
+ *   width and scale, and its document's root box
+ * @output layoutViewportHeight, the layout viewport's height in layout px
+ *   less a classic horizontal scrollbar, and __resetLayoutViewportForTest
+ * @position Internal shared measurement, not re-exported from the utils
+ *   entry. The keyboard module, BottomSheet's keyboard obstruction and any
+ *   layout that sizes against the layout viewport read it.
+ */
+
+/**
+ * The layout viewport's height, CSS px, in the units of element rects.
+ *
+ * `innerHeight` is the layout viewport's height in most engines. WebKit
+ * reports `innerHeight` and `innerWidth` in the pinch-zoomed visual
+ * viewport's px instead. At a 1.33 zoom of a 402 × 714 layout viewport,
+ * Safari on iOS 26.2 reports 536 and 302. Element rects and the visual
+ * viewport's height times its scale stay in layout px. So, read as is, a zoom
+ * shrinks the layout viewport by the zoom, and the function scales the height
+ * back.
+ */
+export function layoutViewportHeight(win: Window): number {
+  const viewport = win.visualViewport;
+  const width = viewport?.width ?? 0;
+  if (viewport == null || !(width > 0)) {
+    return win.innerHeight - horizontalScrollbarHeight(win);
+  }
+  const scale = viewport.scale;
+  // Which units `innerWidth` is in tells the two apart without naming an
+  // engine. It is the visual viewport's width where the zoom applies, and
+  // that width times the scale where it does not. `innerWidth` is a whole
+  // number of px against a fractional width, so it never equals either, and
+  // the nearest wins with no tolerance constant. At a scale of 1 the two
+  // widths are equal, so the function takes `innerHeight` as it is. A classic
+  // scrollbar, which `innerWidth` counts, then changes nothing.
+  const fromVisual = Math.abs(win.innerWidth - width);
+  const fromLayout = Math.abs(win.innerWidth - width * scale);
+  const height =
+    fromVisual < fromLayout ? win.innerHeight * scale : win.innerHeight;
+  return height - horizontalScrollbarHeight(win);
+}
+
+/**
+ * The document's classic horizontal scrollbar, CSS px. It is in
+ * `innerHeight` but not in the visual viewport's height. On a desktop page
+ * wider than its window, Chromium's `innerHeight` is 800 for a 785 px visual
+ * viewport. It is the part of `innerHeight` the root's client height leaves
+ * out, up to the thickness of a scrollbar that takes room. Where scrollbars
+ * overlay the content, as on every phone, that thickness is 0. So the room a
+ * hidden toolbar adds to `innerHeight` is never taken for a scrollbar. Chrome
+ * on Android sizes the root to the viewport with its toolbar shown.
+ */
+function horizontalScrollbarHeight(win: Window): number {
+  const root = win.document.documentElement;
+  const gap = win.innerHeight - root.clientHeight;
+  if (!(gap > 0) || root.scrollWidth <= root.clientWidth) {
+    return 0;
+  }
+  return Math.min(gap, scrollbarThickness(win.document));
+}
+
+// The scrollbar thickness each document measured, and the device pixel ratio
+// it measured it at. A browser zoom changes the ratio, and with it how many
+// CSS px a classic scrollbar takes. Measuring writes a probe to the document
+// and forces a layout, so it runs once per document and zoom. Every later
+// measurement stays one layout read.
+let thicknesses = new WeakMap<
+  Document,
+  {devicePixelRatio: number; thickness: number}
+>();
+
+/** How much room a scrollbar takes from a scrolling box: 0 where overlaid. */
+function scrollbarThickness(doc: Document): number {
+  const devicePixelRatio = doc.defaultView?.devicePixelRatio ?? 1;
+  const known = thicknesses.get(doc);
+  if (known != null && known.devicePixelRatio === devicePixelRatio) {
+    return known.thickness;
+  }
+  const thickness = measureScrollbarThickness(doc);
+  thicknesses.set(doc, {devicePixelRatio, thickness});
+  return thickness;
+}
+
+function measureScrollbarThickness(doc: Document): number {
+  const probe = doc.createElement('div');
+  probe.style.position = 'absolute';
+  probe.style.top = '-200px';
+  probe.style.width = '100px';
+  probe.style.height = '100px';
+  probe.style.overflow = 'scroll';
+  probe.style.visibility = 'hidden';
+  (doc.body ?? doc.documentElement).append(probe);
+  const thickness = probe.offsetHeight - probe.clientHeight;
+  probe.remove();
+  return thickness;
+}
+
+/** Forgets every measured scrollbar thickness. Tests only. */
+export function __resetLayoutViewportForTest(): void {
+  thicknesses = new WeakMap();
+}

package/src/utils/pressFeedback.ts

@@ -109,7 +109,8 @@ interface LiveGesture {
    * for a press of the Space key.
    */
   pointerId: number | null;
-  timer: ReturnType<typeof setTimeout> | null;
+  /** Cancels the clock the current phase owes, or the release it waits for. */
+  timer: (() => void) | null;
 }
 
 /**
@@ -165,6 +166,76 @@ export function pressFadeMs(element: Element): number {
   return reduced ? Math.min(scaled, PRESS_FADE_MS) : scaled;
 }
 
+/**
+ * The release animations that still run for `element`'s press. Each is a
+ * finite CSS animation that has not finished. It runs on the element, on its
+ * `::before` or `::after`, or on a descendant whose nearest press owner is
+ * the element, because a component can draw its release on a part inside the
+ * surface. A press owner nested inside plays the release of its own press,
+ * so it never extends this one. The list is empty where the engine has no Web
+ * Animations.
+ */
+function releaseAnimationsOf(element: Element): Animation[] {
+  if (typeof element.getAnimations !== 'function') {
+    return [];
+  }
+  return element.getAnimations({subtree: true}).filter(animation => {
+    // The effect of a CSS animation is a KeyframeEffect. Its target is the
+    // element, also when the animation runs on a pseudo-element.
+    const effect = animation.effect as KeyframeEffect | null;
+    const target = effect?.target ?? null;
+    if (
+      effect == null ||
+      target == null ||
+      !('animationName' in animation) ||
+      (target !== element &&
+        target.closest(`[${PRESSABLE_ATTRIBUTE}]`) !== element)
+    ) {
+      return false;
+    }
+    if (!Number.isFinite(Number(effect.getComputedTiming().endTime))) {
+      return false;
+    }
+    return animation.playState !== 'finished';
+  });
+}
+
+/**
+ * Calls `end` when the release on `element` is over. A busy main thread
+ * delays the first frame of the release animation, and with it the end. So a
+ * clock that starts at the `fading` write can cut the release short. When
+ * `clockMs` runs out, the release waits for each release animation that still
+ * runs or still waits for its first frame. It ends when those finish or are
+ * cancelled, as when the surface is unmounted or restyled. With no release
+ * animation (an instant release, a surface without one, an engine without Web
+ * Animations), the release ends at the clock. Returns a cancel.
+ */
+function endAfterRelease(
+  element: Element,
+  clockMs: number,
+  end: () => void,
+): () => void {
+  let waiting = true;
+  const timer = setTimeout(() => {
+    const running = releaseAnimationsOf(element);
+    if (running.length === 0) {
+      end();
+      return;
+    }
+    void Promise.allSettled(
+      running.map(async animation => animation.finished),
+    ).then(() => {
+      if (waiting) {
+        end();
+      }
+    });
+  }, clockMs);
+  return () => {
+    waiting = false;
+    clearTimeout(timer);
+  };
+}
+
 const TIMER_EVENT = {
   fade: 'fadeEnd',
   flash: 'flashEnd',
@@ -181,7 +252,7 @@ function paintElement(element: HTMLElement, paint: PressPaint): void {
 
 function clearTimer(slot: Slot): void {
   if (slot.live?.timer != null) {
-    clearTimeout(slot.live.timer);
+    slot.live.timer();
     slot.live.timer = null;
   }
 }
@@ -217,25 +288,32 @@ function apply(slot: Slot, step: PressStep): void {
   }
   if (step.timer != null) {
     const kind = step.timer;
-    // A TIMER, never `requestAnimationFrame`: iOS throttles frame callbacks
-    // while a scroll runs, so a frame-based delay would fire late, after the
-    // scroll, and paint a control nobody is pressing any more.
-    live.timer = setTimeout(
-      () => {
-        if (slot.live != null) {
-          slot.live.timer = null;
-        }
-        apply(
-          slot,
-          pressGestureStep(slot.live?.gesture ?? idlePressGesture(), {
-            kind: TIMER_EVENT[kind],
-          }),
-        );
-      },
-      // The release fade follows the theme's tempo (AST-108). The onset delay
-      // and the tap flash do not.
-      kind === 'fade' ? pressFadeMs(live.element) : TIMER_MS[kind],
-    );
+    const fire = () => {
+      if (slot.live != null) {
+        slot.live.timer = null;
+      }
+      apply(
+        slot,
+        pressGestureStep(slot.live?.gesture ?? idlePressGesture(), {
+          kind: TIMER_EVENT[kind],
+        }),
+      );
+    };
+    if (kind === 'fade') {
+      // The release fade follows the theme's tempo (AST-108). It ends when
+      // its animation ends, however late a busy main thread let it start.
+      live.timer = endAfterRelease(
+        live.element,
+        pressFadeMs(live.element),
+        fire,
+      );
+    } else {
+      // A TIMER, never `requestAnimationFrame`: iOS throttles frame callbacks
+      // while a scroll runs, so a frame-based delay would fire late, after the
+      // scroll, and paint a control nobody is pressing any more.
+      const timer = setTimeout(fire, TIMER_MS[kind]);
+      live.timer = () => clearTimeout(timer);
+    }
   }
 }
 

package/src/utils/pressGesture.ts

@@ -62,7 +62,9 @@ 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
- * timer that removes the attribute and the fade cannot drift apart.
+ * 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.
  */
 export const PRESS_FADE_MS: number = pressConsts.releaseMs;
 
@@ -119,7 +121,7 @@ export type PressEvent =
   | {kind: 'onset'}
   /** {@link PRESS_FLASH_MS} elapsed on a too-quick tap. */
   | {kind: 'flashEnd'}
-  /** {@link PRESS_FADE_MS} elapsed; the paint is gone. */
+  /** The release is over: its animation ended, or its clock ran out with none running. */
   | {kind: 'fadeEnd'};
 
 export interface PressStep {

package/src/utils/selectionLock.ts

@@ -116,6 +116,16 @@ export interface DragSelectionReleaseOptions {
   isCancel?: boolean;
 }
 
+/** A drag's selection hold: call it to release the hold. */
+export interface DragSelectionHold {
+  (options?: DragSelectionReleaseOptions): void;
+  /**
+   * Called after the lift's own handlers ran. A selection they made since
+   * the release stays: the hold then puts it back, not the press's.
+   */
+  keepLiftSelection(): void;
+}
+
 /**
  * Refuse a new selection while a mouse or pen drag that a recognizer claimed
  * runs, until the returned function runs. `kept` is the page's selection
@@ -140,9 +150,13 @@ export function lockDragSelection(
   view: Window | null | undefined,
   kept: ReadonlyArray<AbstractRange>,
   onReleased?: () => void,
-): (options?: DragSelectionReleaseOptions) => void {
+): DragSelectionHold {
   const doc = view?.document ?? null;
-  const roots = shadowRootsOfRanges(kept);
+  let keptRanges = kept;
+  let roots = shadowRootsOfRanges(keptRanges);
+  // The selection when the lift released the hold, until the lift's
+  // handlers ran.
+  let atLift: ReadonlyArray<AbstractRange> | null = null;
   const restore = () => {
     const selection = view?.getSelection();
     // The focused field keeps its own selection (a drag never starts in one).
@@ -150,7 +164,7 @@ export function lockDragSelection(
       return;
     }
     const held = heldRanges(selection, roots);
-    if (kept.length === 0) {
+    if (keptRanges.length === 0) {
       if (held.some(range => !range.collapsed)) {
         selection.removeAllRanges();
       }
@@ -158,10 +172,10 @@ export function lockDragSelection(
     }
     // A render can remove what the kept selection held: then there is
     // nothing to put back.
-    if (sameRanges(held, kept) || !kept.every(isValidRange)) {
+    if (sameRanges(held, keptRanges) || !keptRanges.every(isValidRange)) {
       return;
     }
-    selectRanges(selection, kept);
+    selectRanges(selection, keptRanges);
   };
   restore();
   const set = new Set(elements);
@@ -201,9 +215,10 @@ export function lockDragSelection(
       onReleased?.();
     }
   };
-  return ({isCancel = false}: DragSelectionReleaseOptions = {}) => {
+  const release = (({isCancel = false}: DragSelectionReleaseOptions = {}) => {
     if (stage === 'held') {
       stage = 'lifted';
+      atLift = selectionRangesOf(view);
       for (const element of set) {
         element.removeEventListener('selectstart', refuse);
       }
@@ -218,7 +233,26 @@ export function lockDragSelection(
     } else if (stage === 'lifted' && isCancel) {
       releaseDocument();
     }
+  }) as DragSelectionHold;
+  release.keepLiftSelection = () => {
+    if (stage !== 'lifted' || atLift == null) {
+      return;
+    }
+    const before = atLift;
+    atLift = null;
+    const keepIfChanged = () => {
+      const now = selectionRangesOf(view);
+      if (stage !== 'done' && !sameRanges(now, before)) {
+        keptRanges = now;
+        roots = shadowRootsOfRanges(now);
+      }
+    };
+    keepIfChanged();
+    // A click's state update renders in a microtask, and its layout effect
+    // may select then. That still runs before the press's own mouseup.
+    queueMicrotask(keepIfChanged);
   };
+  return release;
 }
 
 /**

package/src/utils/sharedMutationObserver.ts

@@ -8,7 +8,8 @@
  * @output Exports observeMutations (one shared observer per set of options)
  *   and observeContent, its text-and-children form
  * @position Internal utility; consumed by useTruncation, hitArea, AppShell's
- *   main-overflow observer and ModalAnnounceProvider's presentation watch. The mutation counterpart of sharedResizeObserver:
+ *   main-overflow observer, ModalAnnounceProvider's presentation watch and
+ *   CheckboxList's required group. The mutation counterpart of sharedResizeObserver:
  *   one observer for every element observed with the same options, so a
  *   repeated cell, row or region does not create one observer per instance.
  */