Skip to content

feat(SegmentedControl): under a finger on every touch screen, the control tracks the touch - #8127

Draft
vjeux wants to merge 1793 commits into
meta:mainfrom
vjeux:uikit/c05-segmented-press
Draft

vjeux wants to merge 1793 commits into
meta:mainfrom
vjeux:uikit/c05-segmented-press

Conversation

@vjeux

@vjeux vjeux commented Oct 24, 2026 •

Copy link
Copy Markdown
Contributor

Depends on #8094. Review only this PR's change: vjeux/astryx@7cecbcc...93c2301

User need

Astryx is making its core components behave like UIKit under a finger (spec:AST-094). On a phone, dragging across a SegmentedControl does nothing, and holding a segment selects its text. On iOS you slide the selected segment and let go on the one you want.

Problem and solution fit

  • Press (the record owner's decisions): the selected segment shows nothing; another shows the shared pressed overlay; nothing dims.
  • Drag from the selected segment: the highlight and the selected label's color follow the finger, up to 11 pt past the ends.
  • Release: the nearest segment is chosen through its click (onChange once; onClick can veto); a drag that starts elsewhere chooses where it lifts. Letting go off the control chooses nothing.
  • Vertical drags still scroll; Reduce Motion cross-fades at release.

Current specification

component:SegmentedControl FR3, spec:AST-020 FR9 and DEC-5 (a slide-off cancels); spec:AST-094 FR11; the named exception of family:action-groups. Touch rows: the record owner's draft #8596, whose FR10 reads "the lift commits the segment nearest the finger".

Public delta and caller burden

No API change and no new theme state. Gaps: no pressed lift until the owner's theme role exists; no UIKit stretch.

Design and alternatives

  • Chosen: the shared press and action-group trackers, with a pan that claims the finger only once it moves sideways, so scrolls starting on the control still work.
  • Rejected: claiming the touch at press (it blocks those scrolls); committing at each boundary (onChange would repeat; UIKit commits once); swapping label weights mid-drag (bold labels are wider, so segments would shift).

Evidence

Before 1 of 2, #8094 (this PR's base), iOS 26.2 simulator in Mobile Safari, a red dot where the finger touches: P1 a hold selects the label's text, P2 to P5 drags do nothing
Before 2 of 2: P6 and P8 a vertical drag scrolls, P7 and P10 a tap slides, P11 a right-to-left drag does nothing
After 1 of 2: P1 holding the selected segment shows nothing; P2 a drag carries the highlight with the finger, the label color following, and the release selects; P3 40% of the way stays, 60% moves; P4 it stops just past the end, and letting go out there chooses nothing (the highlight slides back); P5 a drag that starts on List shows List's pressed overlay without dimming, and the release selects Table
After 2 of 2: P6 and P8 a vertical drag scrolls the page; P7 a tap slides; P9 Reduce Motion cross-fades at the release; P10 a 600 ms busy main thread (the page's frame counter stops, the slide does not); P11 a right-to-left drag
Android 15 emulator, Chromium 158, before (#8094): a hold selects the label's text, a drag does nothing, a tap slides
Android after: holding the selected segment shows nothing, a drag carries the highlight and the release selects, a tap slides, and with Remove animations on the release cross-fades
Chromium storyboard: hold, drag, let go; nothing lifts while held, the highlight follows the finger, and no label changes weight until the release

Scope

  • One capability is added.
  • Unrelated fixes, cleanup, and policy changes were removed or split.
  • Consumer docs, focused tests, and migration evidence ship with the feature.
  • Public text and artifacts contain no internal Meta context.
  • Size: 4,293 lines, 14 files (2,329 tests); the SegmentedControl import 54.0 → 77.1 KB gzip (+23.0 KB; size report); CSS +19 B gzip.

Testing

  1. Open the "Default" story with touch (a phone, or a browser's device mode). Press Grid and slide to Table: the highlight follows; letting go selects Table.
  2. Press List and slide to Table: List shows the pressed overlay; letting go selects Table.
  3. Press Grid, slide off the control past Table, and let go: Grid stays selected.
  4. Swipe up from the control: the page scrolls; nothing is selected.
  5. Hold Grid still: no text gets selected.
  6. With a mouse, a click still selects.

Automated, passing: pnpm test:interaction SegmentedControl.interaction (real touch, Chromium and WebKit) also checks the 40%/60% release point, a lift off the control, a back-and-forth on a boundary and right-to-left; unit tests cover the logic. Recorded on the iOS 26.2 simulator and the Android emulator. Known red: touch-support-bundle "is absent from the root entry" (#8671).

@vercel

vercel Bot commented Oct 24, 2026 •

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated
astryx Ready Ready Preview Oct 30, 2026 12:09am UTC

Request Review

@astracat-bot

astracat-bot Bot commented Oct 24, 2026 •

Copy link
Copy Markdown

AI review status for this pull request.

Review status Updated
❓ Needs maintainer input (for maintainers only) Oct 30, 2026, 12:33 AM UTC

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

github-actions Bot commented Oct 24, 2026 •

Copy link
Copy Markdown
Contributor

PR Analysis Report

📚 Storybook Preview

View Storybook for this PR

🧪 Sandbox Preview

View Sandbox for this PR

Component Size

Component Import before Import after Delta CSS before CSS after Delta
core/AlertDialog 57.3KB 57.6KB +290B 12.5KB 12.5KB 0B
core/AppShell 66.8KB 67.0KB +261B 11.8KB 11.8KB 0B
core/AvatarGroupOverflow 40.3KB 40.6KB +302B 6.4KB 6.4KB 0B
core/Banner 48.5KB 48.8KB +289B 10.1KB 10.1KB 0B
core/BaseTypeahead 55.0KB 55.2KB +273B 10.1KB 10.1KB 0B
core/BreadcrumbItem 67.3KB 67.6KB +266B 11.2KB 11.2KB 0B
core/Button 43.7KB 43.9KB +274B 9.3KB 9.3KB 0B
core/Calendar 55.6KB 55.9KB +260B 10.2KB 10.2KB 0B
core/Carousel 50.9KB 51.1KB +265B 10.3KB 10.3KB 0B
core/ChatComposer 61.3KB 61.6KB +257B 11.0KB 11.0KB 0B
core/ChatComposerInput 56.2KB 56.4KB +256B 10.2KB 10.2KB 0B
core/ChatComposerTokenElement 56.2KB 56.4KB +260B 10.2KB 10.2KB 0B
core/ChatDictationButton 47.2KB 47.4KB +275B 9.6KB 9.6KB 0B
core/ChatLayout 49.5KB 49.8KB +303B 10.1KB 10.1KB 0B
core/ChatLayoutScrollButton 47.0KB 47.3KB +278B 9.7KB 9.7KB 0B
core/ChatSendButton 46.4KB 46.7KB +277B 9.3KB 9.3KB 0B
core/CheckboxInput 50.5KB 50.8KB +264B 9.5KB 9.5KB 0B
core/CheckboxListItem 54.7KB 54.9KB +275B 10.6KB 10.6KB 0B
core/ClickableCard 12.8KB 13.1KB +289B 6.9KB 6.9KB 0B
core/CodeBlock 61.2KB 61.4KB +272B 10.8KB 10.8KB 0B
core/Collapsible 18.7KB 19.0KB +262B 4.4KB 4.4KB 0B
core/CommandPalette 51.5KB 51.8KB +269B 12.0KB 12.0KB 0B
core/CommandPaletteItem 8.4KB 8.7KB +280B 3.5KB 3.5KB 0B
core/ComplexSelector 56.5KB 56.8KB +286B 10.8KB 10.8KB 0B
core/ContextMenu 75.3KB 75.6KB +281B 14.8KB 14.8KB 0B
core/ContextMenuItem 53.5KB 53.8KB +259B 9.8KB 9.8KB 0B
core/DateInput 100.2KB 100.5KB +288B 14.9KB 14.9KB 0B
core/DateRangeInput 70.1KB 70.4KB +277B 11.4KB 11.4KB 0B
core/DateTimeInput 110.4KB 144.2KB +33.8KB ⚠️ 15.4KB 16.6KB +1.3KB ⚠️
core/DialogHeader 49.5KB 49.8KB +295B 10.0KB 10.0KB 0B
core/DrawerHeader 49.6KB 49.8KB +261B 11.4KB 11.4KB 0B
core/DropdownMenu 73.4KB 73.7KB +280B 15.0KB 15.0KB 0B
core/DropdownMenuCheckboxItem 16.4KB 16.6KB +276B 5.7KB 5.7KB 0B
core/DropdownMenuItem 15.6KB 15.9KB +268B 5.3KB 5.3KB 0B
core/DropdownMenuRadioItem 16.4KB 16.7KB +275B 5.7KB 5.7KB 0B
core/DropdownMenuSubMenu 58.7KB 59.0KB +263B 9.7KB 9.7KB 0B
core/FileInput 54.8KB 55.0KB +267B 10.5KB 10.5KB 0B
core/IconButton 43.7KB 44.0KB +279B 9.3KB 9.3KB 0B
core/Item 11.4KB 11.6KB +273B 4.7KB 4.7KB 0B
core/LayerProvider 64.0KB 64.3KB +269B 10.3KB 10.3KB 0B
core/Lightbox 51.9KB 52.1KB +254B 10.0KB 10.0KB 0B
core/Link 44.1KB 44.4KB +274B 7.7KB 7.7KB 0B
core/ListItem 54.1KB 54.4KB +253B 10.6KB 10.6KB 0B
core/Markdown 145.2KB 145.5KB +268B 17.8KB 17.8KB 0B
core/MobileNav 51.7KB 51.9KB +240B 10.2KB 10.2KB 0B
core/MobileNavToggle 46.9KB 47.1KB +270B 9.6KB 9.6KB 0B
core/MoreMenu 73.7KB 74.0KB +284B 15.0KB 15.0KB 0B
core/MultiSelector 73.6KB 73.9KB +295B 14.8KB 14.8KB 0B
core/NumberInput 56.4KB 56.7KB +307B 10.9KB 10.9KB 0B
core/Outline 29.0KB 29.3KB +286B 4.0KB 4.0KB 0B
core/Pagination 85.5KB 85.7KB +263B 15.5KB 15.5KB 0B
core/Popover 50.3KB 50.5KB +278B 12.2KB 12.2KB 0B
core/PowerSearch 166.6KB 166.9KB +304B 20.1KB 20.1KB 0B
core/RadioListItem 52.8KB 53.1KB +276B 9.8KB 9.8KB 0B
core/SegmentedControl 39.1KB 72.0KB +32.8KB ⚠️ 6.3KB 7.7KB +1.3KB ⚠️
core/SegmentedControlItem 8.6KB 8.9KB +329B 3.9KB 3.9KB +11B
core/SelectableCard 12.8KB 13.1KB +294B 7.1KB 7.1KB 0B
core/Selector 77.0KB 77.3KB +277B 15.2KB 15.2KB 0B
core/SelectorOption 14.7KB 15.0KB +262B 5.2KB 5.2KB 0B
core/SideNav 64.6KB 64.9KB +249B 10.7KB 10.7KB 0B
core/SideNavCollapseButton 47.3KB 47.5KB +266B 9.6KB 9.6KB 0B
core/SideNavHeading 59.2KB 59.4KB +273B 10.4KB 10.4KB 0B
core/SideNavItem 55.3KB 55.5KB +258B 10.3KB 10.3KB 0B
core/Step 33.0KB 33.3KB +274B 5.5KB 5.5KB 0B
core/Stepper 48.1KB 48.3KB +270B 9.7KB 9.7KB 0B
core/Switch 49.0KB 49.3KB +279B 9.5KB 9.5KB 0B
core/Tab 9.7KB 10.0KB +294B 4.1KB 4.1KB 0B
core/TabMenu 55.9KB 56.2KB +261B 10.2KB 10.2KB 0B
core/Table 84.7KB 84.9KB +259B 15.6KB 15.6KB 0B
core/TableCell 76.5KB 76.7KB +280B 15.3KB 15.3KB 0B
core/TableHeaderCell 76.1KB 76.3KB +261B 15.0KB 15.0KB 0B
core/TableSelectionToolbar 52.8KB 53.1KB +277B 11.3KB 11.3KB 0B
core/TextInput 54.2KB 54.5KB +265B 10.6KB 10.6KB 0B
core/Thumbnail 51.4KB 51.6KB +271B 11.1KB 11.1KB 0B
core/TimeInput 87.5KB 87.7KB +220B 13.9KB 13.9KB 0B
core/Timestamp 27.9KB 27.9KB -1B 9.7KB 9.7KB 0B
core/Toast 60.6KB 60.8KB +270B 9.9KB 9.9KB 0B
core/ToggleButton 44.5KB 44.8KB +245B 9.4KB 9.4KB 0B
core/Token 30.2KB 30.4KB +268B 4.6KB 4.6KB 0B
core/Tokenizer 69.3KB 69.6KB +257B 16.7KB 16.7KB 0B
core/TopNav 52.5KB 52.8KB +257B 10.5KB 10.5KB 0B
core/TopNavHeading 58.6KB 58.9KB +284B 10.2KB 10.2KB 0B
core/TopNavItem 9.0KB 9.3KB +283B 3.8KB 3.8KB 0B
core/TopNavMegaMenu 55.0KB 55.3KB +271B 11.0KB 11.0KB 0B
core/TopNavMegaMenuItem 9.1KB 9.4KB +281B 4.1KB 4.1KB 0B
core/TopNavMenu 58.3KB 58.5KB +265B 10.3KB 10.3KB 0B
core/TreeList 40.4KB 40.6KB +273B 4.8KB 4.8KB 0B
core/Typeahead 62.2KB 62.4KB +275B 11.4KB 11.4KB 0B
lab/ChatEmojiPicker N/A 66.0KB N/A N/A 773B N/A
lab/ChatReactionBar N/A 66.6KB N/A N/A 1.1KB N/A
lab/CommentComposer N/A 95.0KB N/A N/A 1.9KB N/A
lab/CommentPin N/A 48.2KB N/A N/A 1.2KB N/A
lab/CommentThread N/A 217.0KB N/A N/A 2.4KB N/A
lab/Comments N/A 221.6KB N/A N/A 2.5KB N/A
lab/DiffViewer N/A 46.4KB N/A N/A 2.1KB N/A
lab/EmojiPicker N/A 63.8KB N/A N/A 722B N/A
lab/ListInput N/A 76.1KB N/A N/A 1.6KB N/A
lab/MobilePowerSearch N/A 147.5KB N/A N/A 1.4KB N/A
lab/MobileTokenizer N/A 93.0KB N/A N/A 809B N/A
lab/Schedule N/A 60.7KB N/A N/A 3.9KB N/A
lab/TourStep N/A 55.9KB N/A N/A 590B N/A
lab/TransferList N/A 67.7KB N/A N/A 1.7KB N/A
lab/TransferListSelector N/A 73.3KB N/A N/A 1.9KB N/A
richtext/RichTextEditor N/A 271.7KB N/A N/A 2.6KB N/A
richtext/RichTextEditorToolbar N/A 213.3KB N/A N/A 454B N/A
richtext/RichTextView N/A 252.1KB N/A N/A 2.3KB N/A

Sizes are gzip. Import counts the JavaScript the import loads eagerly; CSS counts the package stylesheet rules referenced by the modules it can load from its own package, lazily loaded ones included.

⚠️ Touch-only size budget

These components grew past the touch-only budget (2 KB gzip JavaScript or 1 KB gzip CSS per component). If the growth runs only on a coarse pointer, load its JavaScript lazily so the import does not carry it, or justify the cost in the pull request description; CSS stays in the package stylesheet, so justify it.

Component JavaScript CSS
core/DateTimeInput +33.8KB ⚠️ +1.3KB ⚠️
core/SegmentedControl +32.8KB ⚠️ +1.3KB ⚠️

Bundle Size Summary

Gzip figures measure each package's entry file, not the code an import pulls in.

Package Entry (ESM) Entry gzip before Entry gzip after Delta
@astryxdesign/core 4.9KB 1.2KB 1.2KB 0B
Package stylesheet Gzip before Gzip after Delta
@astryxdesign/core 35.4KB 36.5KB +1.1KB

Accessibility Audit

Status: No accessibility violations detected.

Visual Regression

55 of 504 shot(s) changed.

A change here is a question, not a failure: check whether the after is the
picture you intended. Record that review on the PR. Baseline maintenance is an
explicit dispatch of CI; this report never rewrites the baseline or adds a release gate.

component story theme mode pixels
Selector Indicator Space Bottom Sheet Narrow End RTL neutral light 753,933
Selector Indicator Space Bottom Sheet Wide Start neutral light 740,072
RichTextEditor Markdown parity: side by side probe dark 558,840
RichTextEditor Markdown parity: side by side probe light 540,756
Chat Full AI Chat probe light 230,823
Chat Full AI Chat probe dark 229,805
AppShell With Mobile Nav probe light 217,010
AppShell With Mobile Nav probe dark 216,960
Collapsible Dividers probe dark 66,445
Collapsible Dividers probe light 66,445
AppShell Playground neutral dark 65,198
AppShell Playground neutral light 63,788
Chat Default neutral dark 36,304
Chat Default neutral light 35,767
Chat Empty State probe light 23,531
Chat Empty State probe dark 22,622
ChatAutoScroll Scroll Behavior Comparison neutral dark 15,378
ChatAutoScroll Scroll Behavior Comparison neutral light 14,107
Chat With Attachments probe light 13,406
Chat With Attachments probe dark 11,232

and 35 more.


Generated by PR Enrichment workflow | Storybook | Sandbox | View full report

@astracat-bot astracat-bot Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Approval waits on an owner decision about the touch direction: holding the selected SegmentedControl segment lifts it, which contradicts design:user-states DR3; touch selection (commit at the lift, drag-to-select, the swallowed click) has no governing spec while the SegmentedControl record is draft; and spec:AST-094 is an unapproved draft. An engineering owner records that decision by commenting /approve-spec c14c96eff25bef007ad09b5d6a2b2ea06b86a760 on this pull request, and the author may do so as an engineering owner.

  • A finger tap must still run a SegmentedControlItem onClick and honour its preventDefault(), with touch tests for both.
  • The stacked pull requests should land or be retargeted so this diff is only the SegmentedControl commit.

[Automated review]

isTouchPresentation && !isDisabled,
next => {
if (next !== value) {
onChange(next);

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A touch commit lands here directly, so a SegmentedControlItem onClick never runs for a finger tap and its preventDefault() no longer vetoes the selection (the host swallows the touch's click). Routing the commit through the destination item's click path keeps the released order and cancellation; a touch test with an onClick, with and without preventDefault(), would cover it.

selected,
);
}
this.committed = value;

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If a controlled parent declines this value, the lens has already landed on it and committed stays set: the surface jumps back when the motion settles, and a later app-driven change to the same value skips its slide. Sliding back and clearing committed when the value does not come back would avoid both.

@astracat-bot astracat-bot Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Approval waits on a spec-owner decision about SegmentedControl's touch direction: holding the selected segment lifts it, which contradicts design:user-states DR3 (unchanged by this pull request); touch selection (commit at the lift, drag-to-select, the swallowed click) has no governing spec while the SegmentedControl record is draft; and spec:AST-094 is an unapproved draft. An engineering owner records that decision by commenting /approve-spec 69ea10e3e8f500a7a877dcca5efb418bb840b5fd on this pull request, and the author may do so as an engineering owner; DR3 itself still needs its touch amendment. Whatever the decision, these need changes:

  • A finger tap must still run a SegmentedControlItem onClick and honour its preventDefault(), with touch tests for both.
  • The stacked pull requests should land or be retargeted so this diff is only the SegmentedControl commit.
  • A touch commit the parent declines should slide back instead of landing and then jumping back.

[Automated review]

@astracat-bot astracat-bot Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Approval waits on a spec decision: the touch presentation lifts the held selected segment, which design:user-states DR3 currently forbids, selects at the end of a touch with no current spec, and rests on the unapproved draft spec:AST-094, so an engineering owner needs to update DR3 for this intentional change and approve or reject the draft's requirements. An engineering owner records that decision by amending DR3 and the SegmentedControl record on main, or by commenting /approve-spec <full head SHA> on this pull request; the author may do so if they are an engineering owner. Independently of that decision, please make touch selection honour SegmentedControlItem's onClick preventDefault() and fire onChange once per tap, split the 28,134 authored lines into the harness, gesture, motion and SegmentedControl pieces, and move the adaptive query change into its own pull request. [Automated review]

@vjeux
vjeux force-pushed the uikit/c05-segmented-press branch from 09642a2 to eaaff0b Compare October 24, 2026 18:23
@vjeux vjeux changed the title feat(SegmentedControl): under a finger the control tracks the touch like UISegmentedControl feat(SegmentedControl): on iOS the control tracks a finger like UISegmentedControl Oct 24, 2026
@vjeux
vjeux force-pushed the uikit/c05-segmented-press branch from eaaff0b to f4f1a44 Compare October 24, 2026 19:05

@astracat-bot astracat-bot Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Approval waits on an engineering owner deciding the touch direction this pull request proposes: the draft spec:AST-094 requirements, SegmentedControl lifting the held selected segment (a departure from the current user-states DR3), themable touch motion with a new platform theme condition, and the two experimental subpaths. An engineering owner records that decision by commenting /approve-spec <full head SHA> on this pull request, and the author may do so if they are an engineering owner. Whatever the decision, these need fixing:

  • Touch selection calls onChange at touchend, so an item onClick that calls preventDefault() no longer cancels it, and a declined value fires onChange twice (useSegmentedTouchTracking.ts, useSegmentedSelectionMotion.ts).
  • FR7 of the draft spec cites spec:AST-090, which does not exist.
  • The adaptive query change, the stable segment width and the interaction harness are separate from the touch presentation, and at about 33,500 authored lines the change needs splitting into reviewable pull requests.

[Automated review]

isTouchPresentation && !isDisabled,
next => {
if (next !== value) {
onChange(next);

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Under the iOS touch presentation this calls onChange at touchend, before the item's consumer-first onClick (SegmentedControlItem.tsx L248–253) can call preventDefault(), and a drag-selection raises no click, so a consumer veto no longer cancels selection (public-component-api INV7). Commit through the same cancellable path, or skip the commit when the item's click handler prevents default, and add a touch test that vetoes.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed in cc32269: the lift now commits through the destination segment's own click, so its onClick runs first and preventDefault() keeps the selection, for a tap and a drag alike. The browser's click for that touch is swallowed, so the click path runs once. Interaction tests cover a vetoed tap, a vetoed drag, and onClick running exactly once for each.

selected,
);
}
this.committed = value;

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

committed is set before the parent adopts the value. If a controlled parent declines it, the lens stays on the declined segment until settle(), the tap's click calls ctx.onChange a second time, and a later change to that value takes the early return at L486 and skips its slide. Clear committed when the value is not adopted and swallow the click after a gesture commit.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed in cc32269: a commit that is not adopted (vetoed, or kept by a controlled parent) slides the lens back to the selection and clears committed, so the next change to that value slides. The touch's own click is swallowed, so a declined value gets one onChange. A unit test covers the decline and the later slide; the interaction tests cover the vetoed tap and drag.

follows.
- **FR7 — Exits animate as UIKit's do.** A touch presentation MUST play the
exit its UIKit counterpart plays. **Proposed; pending owner review:** this
departs from the draft `spec:AST-090` FR1 (exits off by default) and FR10

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

spec:AST-090 exists neither on main nor at this head, so FR7's departure (and the current-state impact at L234–236) cannot be checked; cite the record that holds FR1 and FR10, or state them here.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

AST-094 comes from #8052, which this branch carries unchanged. The fix belongs in that pull request; this branch picks it up when it restacks.

@vjeux

vjeux commented Oct 24, 2026

Copy link
Copy Markdown
Contributor Author

On the size: this branch is a stack. It is main with merges of the pull requests it depends on (#8094 and its predecessors; #8270 for the gesture host's text-selection lock), each under its own review, and the touch-tracking commits on top. The description's first line names the commits to review here. As the predecessors land, the diff shrinks to those commits alone. The touch-presentation query, the interaction harness and the stable segment width are already their own pull requests (#8062, #8067, #8087).

@astracat-bot astracat-bot Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Approval waits on an engineering owner deciding the touch direction this pull request proposes: under a finger on iOS, SegmentedControl lifts the held selection and dims a pressed segment instead of painting the pressed overlay, which departs from the current design:user-states DR3 and DR1, and it rests on the unapproved draft spec:AST-094 together with themable touch motion, a new platform theme condition and two experimental subpaths that have no current authority. An engineering owner records that decision by amending those records on main or by commenting /approve-spec <full head SHA> on this pull request, and the author may do so if they are an engineering owner. Whatever the decision, these need fixing:

  • A finger tap selects an item whose onClick calls preventDefault(), and a value the parent declines fires onChange twice (useSegmentedTouchTracking.ts, useSegmentedSelectionMotion.ts).
  • Under Reduce Motion the selection scales from 0.88, while design:reduced-motion allows only an opacity change within 200 ms that no theme can lengthen.
  • The compact edge is a fixed 744 px, while spec:AST-012 FR9 uses the theme's md point (768 by default).
  • At 34,428 authored lines the stack should land in its separate pull requests, and draft FR7 cites a spec:AST-090 that does not exist.

[Automated review]

isPressingRef.current = false;
const value = motion.release(touch.x);
if (value != null) {
onCommit(value);

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This commits through onChange at touchend, before the item's consumer-first onClick runs, so an item onClick that calls preventDefault() no longer cancels a finger selection (and a drag-release raises no click at all). On this head a tap on such an item called onChange('table') under the iOS gate and nothing on the Android path. Letting the tap's click perform the commit, and giving a drag-release the same cancellation, would keep the released contract; a touch test with a vetoing onClick would cover it.

selected,
);
}
this.committed = value;

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

committed is set before the parent adopts the value. When a controlled parent declines it, the tap's click calls ctx.onChange a second time (reproduced: table,table for one tap), the lens lands on the declined segment and jumps back at settle(), and a later programmatic change to that value takes the touch-commit branch at L570–588 and skips its slide. Swallowing the tap's click after the lift commits, and clearing committed and sliding back when the value does not come back, would avoid all three.

this.animator.play(
{
opacity: timedCurve(0, 1, fadeMs, curve),
scaleX: timedCurve(from, 1, fadeMs, curve),

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Under Reduce Motion this scales the lens from 0.88 to 1 (sampled at 0.929 after 67 ms) on a clock a theme can lengthen through segmentedControl.reducedMotion.fadeMs. design:reduced-motion on main allows only an opacity change of 200 ms or less under a coarse pointer (DR1, DR2) and no theme value that lengthens it (DR4), so the substitution should fade opacity alone.

export const TOUCH_QUERY = '(pointer: coarse)';

/** The viewport is compact: layout behaviours. */
export const COMPACT_QUERY = '(width < 744px), (height < 500px)';

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

spec:AST-012 FR9 and architecture:public-component-api INV17 on main define compact as width below the theme's effective md point (768 by default) or height below 500, with no numbers of a component's own. With 744 px here, a coarse-pointer viewport 744–767 px wide gets the popover where FR9 gives the sheet, and a theme that moves md is ignored; reading the edge from the theme and testing 767/768 would conform.

follows.
- **FR7 — Exits animate as UIKit's do.** A touch presentation MUST play the
exit its UIKit counterpart plays. **Proposed; pending owner review:** this
departs from the draft `spec:AST-090` FR1 (exits off by default) and FR10

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

spec:AST-090 exists neither on main nor at this head, so the departure FR7 asks an owner to approve (and the current-state impact at L235) cannot be checked; cite the record that holds those FR1 and FR10, or state them here.

@astracat-bot astracat-bot Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Approval waits on an engineering owner deciding the touch direction this pull request proposes: under a finger on iOS, SegmentedControl lifts the held selection and dims a pressed segment instead of painting the pressed overlay, which departs from the current design:user-states DR3 and DR1, and it rests on the unapproved draft spec:AST-094 together with themable touch motion, a new platform theme condition and two experimental subpaths that have no current authority. An engineering owner records that decision by amending those records on main or by commenting /approve-spec <full head SHA> on this pull request, and the author may do so if they are an engineering owner. The onClick veto and the double onChange are fixed on this head; whatever the decision, these still need fixing:

  • Under Reduce Motion the selection scales from 0.88, while design:reduced-motion allows only an opacity change within 200 ms that no theme can lengthen.
  • A parent that adopts the value after one frame, such as URL or server state, sees the lens turn back before it slides to the new segment.
  • The compact edge is a fixed 744 px, while spec:AST-012 FR9 uses the theme's md point (768 by default), which main now exports.
  • At 34,655 authored lines the stack should land in its separate pull requests, and draft FR7 cites a spec:AST-090 that does not exist.

[Automated review]

Comment on lines +1113 to +1122
this.animator.set({x: 0, scaleX: from, scaleY: from, opacity: 0});
this.track(
this.animator.play(
{
opacity: timedCurve(0, 1, fadeMs, curve),
scaleX: timedCurve(from, 1, fadeMs, curve),
scaleY: timedCurve(from, 1, fadeMs, curve),
},
// This is the Reduce Motion substitution itself: play it as given.
{reducedMotion: 'keep'},

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Under Reduce Motion this scales the lens from 0.88 to 1 while it fades in (sampled on this head: 0.88, 0.929, 0.985, 1 over about 180 ms), and every reduced-motion path goes through it. design:reduced-motion on main forbids scaling (DR1) and allows only an opacity change of 200 ms or less on a touch screen (DR2), with no theme value that lengthens it (DR4), so the substitution should fade opacity alone on a fixed clock.

Comment on lines +128 to +132
requestAnimationFrame(() => {
if (segment.getAttribute('aria-checked') !== 'true') {
motion.decline(track, value);
}
});

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

One frame is too short to tell a refusal from a parent that adopts the value asynchronously (router or server state, a transition). With a parent that adopts 200 ms after onChange, the lens heads for Table, turns back toward Grid, and only then slides to Table. Declining at once only when the dispatched click was cancelled (dispatchEvent on a cancelable click returns false), and otherwise waiting for the next value change or a longer window, would avoid the bounce.

export const TOUCH_QUERY = '(pointer: coarse)';

/** The viewport is compact: layout behaviours. */
export const COMPACT_QUERY = '(width < 744px), (height < 500px)';

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

spec:AST-012 FR9 and architecture:public-component-api INV17 on main define compact as width below the theme's effective md point (768 by default) or height below 500, with no numbers of a component's own, and main now exports that definition (compactDefinition). With 744 px here, a coarse-pointer viewport 744–767 px wide gets the popover where FR9 gives the sheet, and a theme that moves md is ignored.

@cixzhang

Copy link
Copy Markdown
Contributor

Posted by Cindy's agent on her behalf.

Parts of this PR re-implement behavior that already exists, or is being specified, as a shared part of core. Converging keeps one implementation per behavior:

This is about where the behavior lives, not about the PR's intent.

cixzhang and others added 29 commits October 28, 2026 11:02
# Conflicts:
#	internal/interaction-harness/README.md
#	internal/interaction-harness/src/busy.test.ts
#	internal/interaction-harness/src/busy.ts
#	internal/interaction-harness/src/frames.ts
#	internal/interaction-harness/src/harness.interaction.browser.spec.ts
#	packages/core/src/utils/pressFeedback.ts
…bute

From the review of meta#8076: the README said paintPress in
utils/pressFeedback.ts is the one writer of data-astryx-press, but the
action-group tracker on main (meta#8346) writes its groups' presses itself.
The sentence now says what holds at this head.
meta#8076's new head carries main 70ea859 with meta#8073's writer of the press
attribute on main's press controller, and its README names both writers.
utils/pressFeedback.ts keeps that controller with this line's own changes
on it: the pointer, drag, scroll and visibility listeners through the
shared input stream (meta#8356) and touchcancel only while the primary pointer
is coarse (meta#8270); the key path stays at the window's bubble phase, so a
Space press the page cancels paints nothing. usePressTracker stays in its
own module, one tracker for a component's life (meta#8315), so meta#8073's
rebuilt-tracker hook and its test are not taken. The harness files are
meta#8076's.
…s, and the action-group tracker writes its own

The header and writePress called it the one writer of the press attribute,
but main's action-group tracker writes its groups' presses itself. They now
say what holds, as meta#8076's gestures README does.
…he press attribute

The release note said every press painter writes data-astryx-press
through one internal writer, but the action-group tracker
(hooks/actionGroupTracker.ts) writes its groups' presses itself, as the
gestures README and utils/pressFeedback.ts already say. The note now says
paintPress writes every press it tracks and the action-group tracker
writes its own.
…llowance under every primary pointer

The useMenuPress record's FR9 puts the trigger's held finger under
spec:AST-094 FR29 under every primary pointer (FR43), so a finger on a
touchscreen laptop may drift 13 pt before the open, as on a phone. The
trigger read (pointer: coarse) as its press started and took the long
press's 10 px where the pointer was fine. Three cases fail until it does
not: a 12 pt drift opens under a fine pointer too, a (12, 12) settle
opens there, and nothing reads a pointer query, the trigger's press
included.
…lowance under every primary pointer

The useMenuPress record's FR9 governs the trigger's held finger by
spec:AST-094 FR29 under every primary pointer (FR43). The trigger now
hands the long press FR29's 13 px drift allowance whatever the primary
pointer, so it no longer reads (pointer: coarse) as its press starts, and
the menus drop their coarsePointer import. ContextMenu keeps the long
press's own allowable movement. The changeset says the same.
Strict ESLint reported six unused bindings in files this pull request
carries: the host's HAPTIC_SWITCH_ATTRIBUTE import, two unused imports
in the pan's tests (scrollProbe, ScreenEdgePanGestureRecognizer), the
swipe test's drift, the presented-hit-testing test's gestures, and a
GestureHost test's before, which now asserts what it was read for: a
second finger's moves leave the pan where it was.
…eal angular speed

The release velocity of a rotation whose listener sets rotation = 0 on
each change, at 2 degrees every 16 ms, read 4.363 rad/s against the
2.182 rad/s of the same stream without a re-base: the test asserted only
more than 1.5. It now asserts the 2.18 rad/s (spec:AST-100 FR2), and
fails.
The rotation's velocity tracker samples the raw unwrapped angle, which
setting rotation does not move, so the setter's shift of the samples read
each re-base as extra turn and doubled the release velocity of a
listener that re-bases on every change. The setter no longer touches the
tracker.
…mates while it runs

The proof read the element's animations 230 ms in, after the dip had
ended, and asserted only that every animated key is opacity, which an
empty list passes: with the cross-fade removed from the plan (the move
still landing), the proof still passed. It now reads the keyframe keys
right after the call starts and asserts they include opacity and nothing
else; the same mutant fails it. Chromium and WebKit pass. (F1's in-flight
read from c648034.)
…roller, and its claimed moves are cancelled under pointer events

Two comparisons stop at the shadow boundary, each failing a case:
- once the host's listener on a recognizer's inner node has seen the
  finger, isFingerDownIn reads it as outside a light-DOM scroller around
  that root, so a scroll under it is not the finger's (FR20);
- under inputMode 'pointer-events', a claimed pan on a shadow host
  cancels none of its finger's moves over the inner content, since the
  finger's target is the inner node and its touches reach the host
  retargeted (FR19).
…the flat tree

isFingerDownIn and the pointer-events finger match compare with
containsAlongFlatTree, as the scroll watch already does: a finger on
content inside an open shadow root is down in the scroller around that
root, and its touches, retargeted to the shadow host, match its pointer
finger, so a claimed pan cancels its moves there (spec:AST-094 FR19,
FR20).
…achments asks, and only then

The host let the last attachment decide whether an element is an action
group (useGestureRecognizer always passes the option), and never
recomputed it at a detach: a plain attachment after the group's turned
the group off, and a group's attachment released left a recognizer that
never asked taking presses under a fine pointer. Fails until the host
counts the attachments that ask.
…ents asks

The host counts the attachments that pass actionGroup: true and keeps the
element a group while one remains, recomputed at each detach. An
attachment that passes false, as useGestureRecognizer does by default,
no longer turns a group off, and a group's last asking attachment taking
its leave ends the group.
… that content

The presented hit test takes the document's elementFromPoint, which
answers a shadow host for anything inside its open root, and compares
with Node.contains, which stops at the boundary: a recognizer on a
control inside a moving sheet's shadow root gets no finger, and the tap's
click goes to the host. Fails until the hit test descends into open roots
and compares along the flat tree.
Where a moving element is drawn away from its layout box, the host
hit-tests what is drawn under the finger with the document's
elementFromPoint, which answers a shadow host for anything inside its
open root. The hit test now descends through each open root's own
elementFromPoint and compares with the movers along the flat tree, so a
recognizer on a control inside a moving sheet's shadow root gets its
finger and the tap clicks that control.
…nt lets go

The host's touch-action rules sit in an adopted sheet or a style element
per document or shadow root, and were never removed, so a page whose
last recognizer detached kept them, against spec:AST-094 FR24 (nothing
touch-related remains after the last instance unmounts). Fails until a
root's rules go with its last marked element.
…th its last marked element

The touch-action writer records which elements it marked in each
document or shadow root, and when the last one is unmarked (its last
recognizer detached) it removes that root's adopted sheet or style
element, so nothing touch-related remains after the last instance
unmounts (spec:AST-094 FR24). A later mark writes the rules again; an
element marked in another root first lets go of the old one.
… the inline style it reads

- The motion registry, the host's engine gate and the README name the
  presented hit test as an engine workaround (spec:AST-013 FR6) with its
  review condition (re-measure on each iOS release; remove it once iOS
  WebKit hit-tests a compositor-moved element where it is drawn) and its
  regression fixture.
- While a curve runs the animator holds the value it starts from inline,
  so presentation.ts and the README no longer say the inline style holds
  the end.
…core/internal/touch

Core ships the internal entry @astryxdesign/core/internal/touch, which
re-exports the gesture primitives for Astryx's own packages, and the
Lab-import guard fails a Lab import of core outside core's exports
(architecture:react-component-runtime INV13). The README and the barrel's
header named internal workspace imports and said nothing here is
exported; they now name that entry.
…ill needs the element, and the listeners that cancel

The release note, the stream's header, the host's comment and the README
said the stream is one passive listener per event type and that a
document-capture stopPropagation no longer starves the recognizers. Such a
stop never hid a listener on the same node, and some subscriptions cancel.
They now say what changed: an app's window-capture stopPropagation, or a
document-capture stopImmediatePropagation registered before core, no
longer hides a touch; a recognizer that must claim still needs the touch to
reach its element; the gesture host's touchend, click and contextmenu
cancel while a claimer is attached and the page hold's touchmove while it
holds; and the stream stays ahead of an app's window-capture listener only
until a type's listener is re-added. The README's list of blocking
touchmove listeners gains the claimed touch's target and the document
while a claiming element moves.
…default it moves

The {stylexOptions} form of astryxStylex now passes StyleX
treeshakeCompensation: true unless the caller sets it. spec:AST-017 FR3
asks the release note to name the old and new default and the option
that restores the old one; it now does.
…er and for the two stops the input stream fixes

- A still finger with sub-pixel jitter over a scroll view keeps its tap
  and scrolls nothing (spec:AST-094 FR18–FR22).
- A tap is still recognized under an app's window-capture
  stopPropagation, and under a document-capture
  stopImmediatePropagation registered before core's: the recognizers hear
  touches on the window's capture phase.
Chromium and WebKit pass.
…s once

Where nothing that claims is attached, the host's touchend listener is
passive and cannot cancel the engine's own click after a retargeted tap
clicks what is drawn. The shared click guard swallows that late click
whatever is attached; this case pins it, as asked on meta#8293.
…esture host's subscriptions

The gesture host subscribes no click: the one cancelling click subscriber
is the click guard's, added at a window's first arm and kept. The release
note, the stream's header and the gestures README listed click with the
host's touchend and contextmenu; they now name the guard's own.
…er in the page

The marker lasts only while the finger is down. In WebKit the test's reads
and the touch commands share one channel, so a poll from the test missed
it; a MutationObserver records each change with the paint at that moment.

@astracat-bot astracat-bot Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Approval waits on an engineering owner's decision about SegmentedControl's touch presentation. The current SegmentedControl record on main defines none. The drag's script-click commit departs from spec:AST-094 FR11, where SegmentedControl is the named exception of family:action-groups. The carried copy of the selected surface departs from design:user-states DR3, and the new segmented.selectionSpring row edits the current FR4 table. An engineering owner records the decision by amending those records on main and commenting /approve-spec <full head SHA> on this pull request, and the author may do so as an engineering owner.

Whatever is decided, these changes are still needed:

  • Remove the tap's 300 ms script click() and its window listeners in useSegmentedTouchTracking.ts, so that only the browser's click activates a tap (AST-094 FR11).
  • Make scripts/touch-support-bundle.test.mjs pass in this pull request; "is absent from the root entry" fails at this head.
  • Justify SegmentedControl's own touch-only JavaScript and CSS cost against main, as architecture:component-style-authoring INV6 requires.
  • Land the stacked gesture, motion, harness, press-feedback, menu and build layers through their own pull requests, and drop the recognizers and hooks nothing uses (33,668 authored lines today).

[Automated review]

Comment on lines +133 to +140
const timer = view.setTimeout(() => {
if (isDone) {
return;
}
view.removeEventListener('click', grab, true);
finish(clickAndReport(segment));
swallowLateClick(segment);
}, BROWSER_CLICK_WAIT_MS);

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A tap whose browser click never arrives is selected here by segment.click() after 300 ms, and swallowLateClick (L167–190) then keeps four window capture listeners until the next press or key, even after the control unmounts. spec:AST-094 FR11 keeps a control's activation as the browser's click. Dropping the fallback lets the browser's click alone activate a tap.

Comment on lines +272 to +286
function hideSurface(segment: HTMLElement): void {
if (!ownSurface.has(segment)) {
ownSurface.set(
segment,
HIDDEN_SURFACE.map(([property]) => [
property,
segment.style.getPropertyValue(property),
segment.style.getPropertyPriority(property),
]),
);
}
for (const [property, value] of HIDDEN_SURFACE) {
segment.style.setProperty(property, value, 'important');
}
}

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A drag from the selected segment hides that segment's own surface with inline !important and carries a copy, while design:user-states DR3 keeps the selected item's raised surface unchanged during a hold. This departure waits on an engineering owner's decision.

| `springs.menuClose` | damping ratio 0.85, response 0.35 s | measured: UIMenu closing, iOS 26.2 simulator, 2026-10-23 |
| `springs.subMenuOpen` | damping ratio 0.85, response 0.4 s | measured: UIKit's own spring for UIMenu's sub-menu opening, iOS 26.2 simulator, 2026-10-24 |
| `springs.subMenuBack` | damping ratio 1, response 0.4 s | measured: UIKit's own spring for UIMenu's sub-menu header back, iOS 26.2 simulator, 2026-10-24 |
| `segmented.selectionSpring` | response 0.4 s, damping ratio 0.85 | measured: UISegmentedControl's selection slide, iOS 26.2 simulator, 2026-10-23 |

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This adds a SegmentedControl role to the current FR4 table. FR4 and DEC-5 route a component's measured roles through the generated motion role table from the component's own record, and component:SegmentedControl names none. The row needs an engineering owner's exact-head /approve-spec, or the role should join through the component's record.

This branch was successfully deployed

1 active deployment
Preview — 93c23012 Deployed Oct 30, 2026 by vercel[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA Signed This label is managed by the Meta Open Source bot. needs:design-review Affects visuals — Design should review needs:spec-owner-review Current knowledge records await owner approval

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants