feat(List): the reorder works for every pointer (spec:AST-094 FR43) by vjeux · Pull Request #8683 · meta/astryx

vjeux · 2026-10-27T12:29:07Z

Depends on #8140, and carries #8665 and #8666 (the every-pointer gesture host and its pen test driver). Review only this PR's change, its one commit: vjeux/astryx@8d0e69a...df13e2c

Why

People reorder with whatever they hold: a finger on a laptop's touch screen, a pen, or a mouse. The List reorder's touch hold worked only where the main pointer is a finger, and a pen always had to hold first, even on a desktop.

What led to it

This is part of the UIKit-parity program, which makes Astryx's components behave like their iOS counterparts on touch screens. spec:AST-094 FR43, now merged, makes gestures work for every pointer, and has a mouse, trackpad or pen start a reorder by dragging the handle without a hold. Here:

The touch hold works on any device. Until a press, it costs one passive listener.
On a desktop, a pen drags at once, like a mouse.
On a phone, a flick on the handle still scrolls, and a pen holds first, like a finger.
Only a primary click drags. A right click or a pen's barrel button opens the row's menu.

Options and tradeoffs

The handle's touch-action could be none everywhere, manipulation everywhere, or depend on the main pointer. none breaks the phone's flick-to-scroll; manipulation lets a pen pan the page instead of dragging.

Why this choice

It depends on the main pointer: none on a desktop, so a pen stroke can't become a pan, and manipulation on a phone, so a flick still scrolls. Wheel autoscroll, mouse press feedback and removing the row-menu stopgap stay in their own PRs.

How to check it

In Storybook Core/List:

Reorderable, on a laptop with a touch screen: hold a grip with a finger, then drag. The row moves.
With a pen on a desktop, drag a grip. The row moves at once, and the page doesn't scroll.
Reorder From Your UI: right-click a grip. The menu opens, and nothing is dragged.

I ran the browser and unit tests for each step, and all pass; each one failed first. WebKit skips the pen cases, since its driver has no pen. Two reds come from elsewhere: touch-support-bundle, which #8671 fixes, and pr-rtl, main's newer RTL test from 0472c4e.

Evidence

The List reorder's browser tests.

Stack (merge in this order): … → #8139 → #8337 → #8140 → #8665 → this.

…ter stays the touch hit layer Under a finger, an interactive row's `::after` is its invisible hit layer (List FR10, listRow.stylex.ts). The surface a row an update slides across others rides on was the same pseudo-element, so the two merged: the hit layer took the surface's colour and its `pointer-events: none`. The surface is now an inset shadow across the row's padding box, which paints in the same place (over the row's background, under the press layer and the content, inside the divider) with no pseudo-element. The proof reads the shadow's colour instead of the layer's.

…eta#8061 9adbe2d, meta#8072 9800eb5) into the gesture watcher The README's touch-action table takes meta#8061's edge-pan rows beside this PR's watcher row.

…es its recognizers, and the group keeps answering afterwards Under a fine pointer the host is not installed, so usesTouchEvents keeps its initial true, and a group press's own touch pointermove and pointerup went down the touch-pairing path and returned: the finger's moves and lift never reached the group, its contact stayed in the arena, and the group answered no press after it, a mouse's included. The group press now feeds its own events through the pointer path for every pointer type. Test (failing first): under a fine pointer a finger tap on a group recognizes, and a mouse tap afterwards does too.

… are all passive spec:AST-094 FR20: a watcher registers only passive listeners, but a watcher-only page still got the host's cancelable document touchend and its contextmenu and window click listeners. The document touchend is now passive until an enabled claimer (a recognizer that claims touches, or a consumer) is attached, and the contextmenu and click listeners are on only then, swapped as attachments change. The new test (a lone watcher leaves no cancelable document or window listener; a claiming pan brings the three) fails on the previous head.

…r watchers) into the host line The host keeps this PR's isRtlElement and its fingers held before a recognizer begins (a kept press, a scroll-edge pan), beside meta#8061's view size and meta#8309's pointer-events finger lookup. meta#8589's claimer check counts only participants active on this pointer (isActive, isConsumerActive), and a group press's click listener now stays while a claimer keeps it installed. The browser spec keeps the fine-pointer describe beside the FR18-FR22 real-touch states.

…'s passive-only watcher listeners) into the arena fixes The host-owner changeset keeps this PR's own listeners for the scroll lock and finger-scroll watch, and adds meta#8336's scroll-edge hold.

A List row's target is its pressable root (Item's `li`), not the control inside it: that inner button, link or checkbox is only the label column, inside the row's padding. Without the root among the interactive elements, a row's watch measures the next row through that inner control, 10 px away instead of 2, and both 36 px rows grow 4 px into the 2 px gap, overlapping by 6 px. With it, each takes 1 px and the two areas meet in the gap.

…h the pressable-root line offered there) into the touch row heights change

…tree expansion change

…list updates change

…inter reaches its recognizers) as a dependency

…s the diagonal pocket and lets keyboard clicks through - The live watch read neighbours within 22 px only, but two small targets reach each other from up to 44 px apart: two 8 px dots 24 px apart kept 18 px of growth toward each other. It reads within the minimum size now. - A wide target and a tall one, diagonally, could each stay short of the other's half of the gap on one axis yet meet at full growth (32 x 32 beside 40 x 24: 4 x 4 px). A neighbour now also counts when the two full areas meet. - The one-shot click swallower lets a keyboard or assistive-technology activation (detail 0) through, and a cancelled touch (pointercancel) disarms it, so a touch the browser took for a scroll leaves nothing armed. - A second watch of an element starts as visible as the first, so it hears its insets. Each fix has a test that fails on the previous head.

… under a fine pointer) as a dependency

…tion group's finger under a fine pointer) into the gesture watcher

Main's meta#8521 is its head 25b468c squashed, which this pull request already carries: every file it touches is byte-identical to 25b468c. In the two files that conflicted (the motion README and animator.ts), the resolution is this side's version, main's merged meta#8521 with this pull request's later work on top. Nothing of main is dropped.

…ted start

… control's label included The guard ended on its click, a cancelled touch, or the next press on the control itself; a tap on the control's own label lands outside it, so a touch that ended with neither a click nor a cancel could leave the label's click to the input swallowed. While armed, the guard now also listens for the next pointerdown anywhere in the document. The test's label-tap case fails on the previous head.

A List row's target is its pressable root (Item's `li`), not the control inside it: that inner button, link or checkbox is only the label column, inside the row's padding. Without the root among the interactive elements, a row's watch measures the next row through that inner control, 10 px away instead of 2, and both 36 px rows grow 4 px into the 2 px gap, overlapping by 6 px. With it, each takes 1 px and the two areas meet in the gap.

…ta#8521) into meta#8270 # Conflicts: # packages/core/src/gestures/__tests__/GestureHost.test.ts

…her meta#8072 5c59af1) into meta#8293

…g) into meta#8293 # Conflicts: # packages/core/src/motion/animator.ts

The note's reword joined its next sentence onto one long line; it now wraps like the rest of the file. No code change.

Rows move by transform (an update's slide, a swipe, edit mode's slide), and the shared touch hit area measures them as they stand in one frame: during a removal it re-measured a frame into the motion and wrote fractional insets, a layout and a paint in the middle of a compositor-only motion. A measurement that arrives while the row's list has a finite animation running or held is now dropped, and once those animations end the row is watched afresh, so its insets are taken at rest.

…w press release change

…inst a fine pointer astracat's 13:21Z review: the finger-target case capped every hint button, Done included, below 44 px, which neither shows that no control grows for a finger (spec:AST-094 FR42) nor allows a button that is larger by itself. It now opens the same hint where the primary pointer is fine and requires each button to add the same space around what it shows (its glyph, or its text's width and line) under both pointers; the theme's type scale may set larger text for a coarse pointer, which the comparison leaves out. The invisible hit layer still only grows, up to 44 px or the button's own size. Failing-first: with a coarse-only 2 px of block padding on the buttons, the old cap passed and this case fails (Move up adds 4 px of height).

…e touch target size from the theme) under the reorder values

meta#8139's base

…#8139's base

c3c119a) under the List reorder

… under the reorder mode hint

astracat's 13:19Z review: the browser proofs read only the order a drop leaves, and the story's moveKey is idempotent, so an onReorder called twice for one drop passed them, while spec:AST-103 FR3 asks for one call per drag and none for a cancelled one. The List stories count the moves their onReorder reports on the list (data-moves); the touch drop and the mouse drop each add exactly one, and a cancelled drag adds none. Failing-first: with the engine reporting each drop twice, the touch and mouse drop proofs failed (expected 1, received 2); the cancel proof passed, as it should.

…c381 and meta#8336 c3c119a through meta#8139's base) under the List reorder's browser proofs

… with X1's web input drivers (ad7aa98) under the List reorder's FR43 follow-up

…r-target proof; meta#8106 781c381 below it) under the List reorder's FR43 follow-up

github-actions · 2026-10-27T14:33:38Z

PR Analysis Report

Current run: The current CI run concluded cancelled. Current analysis is unavailable.

View Storybook for this PR · View Sandbox for this PR

_{Generated by PR Enrichment workflow | View current CI run}

astracat-bot

This needs an engineering owner's decision before it can be approved: List's every-pointer reorder cites spec:AST-094 FR43, which is not on main yet (it is proposed in #8646), while the current FR19 attaches no recognizer where the primary pointer is fine. An engineering owner needs to identify the governing spec for this behavior, including whether a finger's flick may stop on the handle on touchscreen laptops where spec:AST-103 FR3 says it still scrolls, and records the decision by commenting /approve-spec af760b20424a59f6bb7ea2b326ab1f6741ad1aa9 on this pull request; the author, as an engineering owner, may do so. Independently of that decision:

The diff against main carries the whole stack (261 files, about 47,800 lines), so land #8139, #8337, #8140, #8665 and #8666 first and rebase until this pull request shows only its own commit.
ListReorderHandle.tsx sets touch-action: none under a fine pointer, which drops the pinch-zoom spec:AST-094 FR18 keeps, while pinch-zoom would still stop a pen's pan.
List's docs and release note (List.tsx, List.doc.mjs, createReorderable.doc.mjs, .changeset/list-reorderable.md) still say a flick on the handle scrolls and do not mention pens.

[Automated review]

astracat-bot · 2026-10-27T14:56:22Z

+  // A pen drags at once where the primary pointer is fine, as a mouse does,
+  // since the handle allows it no pan there; where it is coarse, the handle
+  // keeps the page's pan, so a pen holds as a finger does (an iPad Pencil's
+  // touches are claimable; spec:AST-094 FR43, FR18).
+  useIsomorphicLayoutEffect(
+    () => controller.attachMouse(!isTouch),
+    [controller, isTouch],
+  );


This effect changed (it now depends on isTouch and admits pens), and its comment explains pens but names no external system. architecture:react-component-runtime INV3 asks a new or changed Effect to name what it synchronizes: here the list's pointer listeners that attachMouse adds and its returned detach removes.

astracat-bot · 2026-10-27T14:56:22Z

+'@astryxdesign/core': patch
+---
+
+[feat] `createReorderable({onReorder, isReorderable})` makes a collection's reorder behavior, and `List` takes it as `reorderable`: each `ListItem` with an `itemKey` gets a reorder handle at its end, and each committed move calls `onReorder({key, to})` once, with the row's key and its index after the move. On a touch screen a finger held still on a handle picks up its row the way an iOS table's reorder control does (a flick on it still scrolls): the row stays in its place, dimmed, while a copy of it follows the finger and an accent line marks where it would land; the other rows stay still, the page scrolls near the edges, and on release the rows rearrange, gliding to their new places. A mouse drags a handle at once with the same copy and line, and rows take their places without motion; a cancelled drag puts everything back at once. Without a drag, a click, Space or Enter on a handle turns on reorder mode for its row: each arrow key moves it a place at once, announced with its place and neighbours, and Escape or another activation ends the mode, keeping the moves. The object's `start(key)` enters the same mode from the app's own UI, such as a row's context menu. A List without `reorderable` loads none of the reorder code.


The description relies on this release note, but with the own commit a flick on the handle no longer scrolls on a touchscreen laptop, and a pen drags at once there and holds where the primary pointer is coarse; this note still says "a flick on it still scrolls" and names only a mouse's immediate drag.

cixzhang · 2026-10-28T03:24:57Z

Posted by Cindy's agent on her behalf: closed and reopened only to restart this PR's CI on the current workflow after tonight's queue-wide cancel; nothing in the PR changed.

… hold A divided List row keeps its dividers while it is pressed, as it does today, and Core keeps no selection hold: products show a row kept selected through ListItem's isSelected. This removes the touch press's divider hiding (its ListItem styles, docs, changeset, tests and browser proofs) and the selection hold (selectionHold.ts, its held press state in the shared press code, its internal deselect constants, the row focus-return lines, story, changeset and proofs). The shared test helpers, the press-coverage guard and the press release's own clock stay. Co-authored-by: Christopher Chedeau <vjeuxx@gmail.com>

…tion hold) as a dependency Co-authored-by: Christopher Chedeau <vjeuxx@gmail.com>

The previous merge left List.tsx's hasDividers JSDoc unresolved and the List stories empty. This restores the stories (without the selection hold demo) and the plain hasDividers line. Co-authored-by: Christopher Chedeau <vjeuxx@gmail.com>

…tion hold) as a dependency Co-authored-by: Christopher Chedeau <vjeuxx@gmail.com>

astracat-bot

This needs an engineering owner's decision before it can be approved: with spec:AST-094 FR43 now on main the every-pointer reorder has its spec, but on a touchscreen laptop the handle's touch-action: none gives a pen its drag without a hold by stopping a finger's flick from the handle, while spec:AST-103 FR3 asks for both. An engineering owner records which wins: commenting /approve-spec 85a30f173854866a1a0735180e5b75fb32f16c8d on this pull request keeps the pen's drag as written, and otherwise the handle has to keep the flick; the author may record it as an engineering owner. Independently of that decision:

The diff against main carries at least 18 other open pull requests (252 files, about 45,600 lines) and no longer merges cleanly (TreeList), so land the stack and rebase until only this pull request's own commit remains.
ListReorderHandle.tsx drops the pinch-zoom spec:AST-094 FR18 keeps; pinch-zoom in place of none would still stop a pen's pan.
The carried hasAnimatedChanges should be the animatedLayout handle List.spec.md FR12 specifies, and List's docs and release note still say a flick on the handle scrolls.

[Automated review]

astracat-bot · 2026-10-28T04:55:47Z

+   * Off by default; with a mouse nothing moves.
+   * @default false
+   */
+  hasAnimatedChanges?: boolean;


Current List.spec.md FR12 says "List MUST take an animatedLayout handle (spec:AST-105 FR1)", and AST-105 FR5 has the glide apply "under every pointer, a mouse included". This boolean animates only under a finger and sits beside the useAnimatedLayout hook main already exports, so a caller who adopts it holds an API the record does not have. Taking FR12's animatedLayout handle instead keeps one public shape.

astracat-bot · 2026-10-28T04:55:47Z

    if (target.closest('button, a, input, select, textarea')) {
      return;
    }
+    if (onClick == null && href != null && !isLinkRoot) {


This forwards any click in a link row's box to its anchor, under every pointer, so a mouse click in a ListItem row's padding, which did nothing before, now navigates (the new Item.test.tsx case asserts it with a plain click). List.spec.md FR10 grows the target only under a coarse pointer and says "A fine pointer keeps today's hit target". Forwarding only from the coarse-pointer hit area would keep a mouse's target as it was.

astracat-bot · 2026-10-28T04:55:47Z

+   * development). On an object passed to two collections, it starts the
+   * mode in the one mounted last.
+   */
+  start(key: TKey): void;


start is the object's only method, and the options carry only onReorder and isReorderable. Current spec:AST-103 FR4b says "The object exposes attach(container, {items})", and FR1 gives the options "an optional positions()"; FR6 makes the object stable from its first release, which this pull request is.

meta#8360's gesture host With meta#8106 on meta#8360's foundation, the gesture host takes a finger from pointer events where it can: mounting two reorderable lists on a touch screen now puts a pointerdown listener on the document, and no touch listener until a press. The test asked for touch listeners only, so it found none (expected 0 to be greater than 0). It now counts touch and pointer listeners, as meta#8683's version of it already does, and still requires every one of them to go when the lists unmount.

vjeux and others added 30 commits October 26, 2026 19:51

Merge meta#8315 (8ae6540: meta#8309 c3375f6 with meta#8076 a3e07d8, m…

36a1037

…eta#8061 9adbe2d, meta#8072 9800eb5) into the gesture watcher The README's touch-action table takes meta#8061's edge-pan rows beside this PR's watcher row.

Merge facebook#8336 (facebook#8315 8ae6540; vjeux's scroll-edge hold; f…

08305ad

…'s passive-only watcher listeners) into the arena fixes The host-owner changeset keeps this PR's own listeners for the scroll lock and finger-scroll watch, and adds meta#8336's scroll-edge hold.

Merge the shared touch hit area's new head (meta#8635 at 6029361, wit…

17af5e8

…h the pressable-root line offered there) into the touch row heights change

Merge the touch hit area change (with meta#8635 at 6029361) into the …

758e5e2

…tree expansion change

Merge the tree expansion change (with meta#8635 at 6029361) into the …

89680e5

…list updates change

Merge 5c59af1 (facebook#8072: a finger on an action group under a fin…

2d4b4bd

…inter reaches its recognizers) as a dependency

Merge meta#8309 (2d4b4bd: meta#8072 5c59af1, an action group's finger…

10abed5

… under a fine pointer) as a dependency

Merge meta#8315 (10abed5: meta#8309 2d4b4bd, meta#8072 5c59af1: an ac…

cef87ea

…tion group's finger under a fine pointer) into the gesture watcher

Merge facebook#8589 (facebook#8315 10abed5) into the host line

b8d7f4c

Merge facebook#8336 (facebook#8315 10abed5) into the arena fixes

71b9578

Merge meta#8076 (cba0ad9: main with meta#8521 merged) into the presen…

f5ac3e8

…ted start

Merge meta#8076 (cba0ad9: a3e07d8's edge-zone measuring, main with me…

050fb02

…ta#8521) into meta#8270 # Conflicts: # packages/core/src/gestures/__tests__/GestureHost.test.ts

Merge meta#8270 (meta#8076 cba0ad9) into meta#8309

13b556b

Merge meta#8309 (meta#8076 cba0ad9) into meta#8315

8b5e539

Merge meta#8315 (meta#8076 cba0ad9) into meta#8336

bbacf83

Merge meta#8336 (meta#8076 cba0ad9) into meta#8320

303e507

Merge meta#8320 (meta#8076 cba0ad9: a3e07d8 and main with meta#8521; …

d8efc9a

…her meta#8072 5c59af1) into meta#8293

Merge meta#8340 (f5ac3e8: no frame shows where a touch motion is goin…

4f11c60

…g) into meta#8293 # Conflicts: # packages/core/src/motion/animator.ts

docs(core): drawnTranslate's note wraps at the file's width again

0c9d2fb

The note's reword joined its next sentence onto one long line; it now wraps like the rest of the file. No code change.

Merge meta#8076 (cba0ad9: main through meta#8521's merge) into the ro…

8766c55

…w press release change

vjeux added 10 commits October 27, 2026 06:37

Merge the list stack's re-fold (meta#8106 781c381: FR42 citations, th…

26a8bca

…e touch target size from the theme) under the reorder values

Merge F2's shadow-root and wheel-latch cascade (meta#8336 c3c119a) into

f86f682

meta#8139's base

Merge the reorder values (meta#8138 with meta#8106 781c381) into meta…

fba78a3

…#8139's base

Merge meta#8139's base (meta#8138 with meta#8106 781c381; F2's meta#8336

9e84c6c

c3c119a) under the List reorder

Merge meta#8139 (its base with meta#8106 781c381 and meta#8336 c3c119a)…

21babff

… under the reorder mode hint

Merge meta#8337 (the hint buttons' finger-target proof; meta#8106 781…

a23519f

…c381 and meta#8336 c3c119a through meta#8139's base) under the List reorder's browser proofs

Merge F2's every-pointer host (meta#8665 c2cd3ba, on meta#8336 c3c119a)…

438b128

… with X1's web input drivers (ad7aa98) under the List reorder's FR43 follow-up

Merge meta#8140 (one report per drop in its proofs; meta#8337's finge…

af760b2

…r-target proof; meta#8106 781c381 below it) under the List reorder's FR43 follow-up

vercel Bot deployed to Preview October 27, 2026 14:11

View deployment

meta-cla Bot added the CLA Signed This label is managed by the Meta Open Source bot. label Oct 27, 2026

astracat-bot Bot reviewed Oct 27, 2026

View reviewed changes

vjeux mentioned this pull request Oct 27, 2026

feat(core): createReorderable's positions() and attach() for grids, fans and plain elements (spec:AST-103) #8719

Draft

cixzhang mentioned this pull request Oct 27, 2026

feat(core): createReorderable makes List rows reorderable the way an iOS table does #8139

Draft

cixzhang closed this Oct 28, 2026

cixzhang reopened this Oct 28, 2026

cixzhang and others added 6 commits October 27, 2026 20:51

Merge facebook#8106 (ba48dc6: dividers stay drawn on press; no Core s…

c53752d

…tion hold) as a dependency Co-authored-by: Christopher Chedeau <vjeuxx@gmail.com>

Merge meta#8139 (5612f24: dividers stay drawn on press; no Core selec…

e780650

…tion hold) as a dependency Co-authored-by: Christopher Chedeau <vjeuxx@gmail.com>

Merge meta#8337 (e780650: dividers stay drawn on press; no Core selec…

1c5f465

…tion hold) as a dependency Co-authored-by: Christopher Chedeau <vjeuxx@gmail.com>

Merge meta#8140 (1c5f465: dividers stay drawn on press; no Core selec…

85a30f1

…tion hold) as a dependency Co-authored-by: Christopher Chedeau <vjeuxx@gmail.com>

cixzhang added a commit to vjeux/astryx that referenced this pull request Oct 28, 2026

Merge meta#8683 (85a30f1: dividers stay drawn on press; no Core selec…

4cd3049

…tion hold) as a dependency Co-authored-by: Christopher Chedeau <vjeuxx@gmail.com>

vercel Bot deployed to Preview October 28, 2026 04:38

View deployment

astracat-bot Bot reviewed Oct 28, 2026

View reviewed changes

vjeux marked this pull request as draft October 29, 2026 22:39

Navigation Menu

Repository navigation

feat(List): the reorder works for every pointer (spec:AST-094 FR43) - #8683

feat(List): the reorder works for every pointer (spec:AST-094 FR43)#8683
vjeux wants to merge 1954 commits into
meta:mainfrom
vjeux:uikit/c13-list-reorder-fr43

vjeux commented Oct 27, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Oct 27, 2026

Uh oh!

astracat-bot Bot left a comment

Uh oh!

astracat-bot Bot Oct 27, 2026

Uh oh!

astracat-bot Bot Oct 27, 2026

Uh oh!

cixzhang commented Oct 28, 2026

Uh oh!

astracat-bot Bot left a comment

Uh oh!

astracat-bot Bot Oct 28, 2026

Uh oh!

astracat-bot Bot Oct 28, 2026

Uh oh!

astracat-bot Bot Oct 28, 2026

Uh oh!

This branch was successfully deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

vjeux commented Oct 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Why

What led to it

Options and tradeoffs

Why this choice

How to check it

Evidence

Uh oh!

github-actions Bot commented Oct 27, 2026

PR Analysis Report

Uh oh!

astracat-bot Bot left a comment

Choose a reason for hiding this comment

Uh oh!

astracat-bot Bot Oct 27, 2026

Choose a reason for hiding this comment

Uh oh!

astracat-bot Bot Oct 27, 2026

Choose a reason for hiding this comment

Uh oh!

cixzhang commented Oct 28, 2026

Uh oh!

astracat-bot Bot left a comment

Choose a reason for hiding this comment

Uh oh!

astracat-bot Bot Oct 28, 2026

Choose a reason for hiding this comment

Uh oh!

astracat-bot Bot Oct 28, 2026

Choose a reason for hiding this comment

Uh oh!

astracat-bot Bot Oct 28, 2026

Choose a reason for hiding this comment

Uh oh!

This branch was successfully deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

vjeux commented Oct 27, 2026 •

edited

Loading