Repository navigation
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
AI review status for this pull request.
|
meta-cla
Bot
added
the
CLA Signed
![astracat-bot[bot]](https://avatars.githubusercontent.com/in/4796231?s=60&v=4){kind=small}
There was a problem hiding this comment.
Approval waits on an engineering owner deciding the iOS-banner swipe model for Toast, which no current spec covers. That means the 14 px dead zone and 0.55x follow, dismissal at 15.7 px or 105 px/s, no fade while dragging, the 0.5 s spring-back that also runs under Reduce Motion, pass-through while settling, a second finger that no longer cancels the swipe (blocking pinch-zoom for that gesture), and whether draft AST-094 may narrow the current theme-tokens and interaction-modality records. An engineering owner records that decision by commenting /approve-spec 19dd8fd3117aaf92e2b5a65473cea3d8a26160ef, and the author, as an engineering owner, may do so. These fixes are needed either way:
- Rebase onto the merged stack (#8052 through #8047) so this PR carries only its Toast commit instead of 24,617 authored lines.
- Remove or complete the "Touch presentation" section of
packages/core/src/gestures/README.md, which documents autils/touchPresentation.tsmodule and test that do not exist. - Correct the stale references (
sources.test.ts,uikit/switch.ts,uikit/contextMenu.ts, "decides at 8" and the changeset's "projected with its velocity") and update AST-057's description ofuseToastGesture.
[Automated review]
| ## Touch presentation | ||
|
|
||
| Whether a component presents itself the touch (UIKit) way is answered once, | ||
| in `../utils/touchPresentation.ts`: |
There was a problem hiding this comment.
This section documents ../utils/touchPresentation.ts (TOUCH_QUERY, COMPACT_QUERY, COMPACT_TOUCH_QUERY, useTouchPresentation(), readTouchPresentation(), useMotionPresentation()) and a test that enforces the query spelling, but none of them exists at this head. Drop the section until the resolver lands, or land the module and its test with it.
| scrolling therefore decides at 10 px or less (the toast's swipe decides at | ||
| 8). |
There was a problem hiding this comment.
The toast's swipe begins at 5 px (toast.beginDistance in motion/uikit/toast.ts:43), not 8.
| * Every leaf carries one or more `@source` (apple-docs | wwdc | webkit | | ||
| * measured | GUESS); webkit and GUESS values also carry the `@measure` task | ||
| * that will confirm or replace them (motion/README.md lists them all). | ||
| * sources.test.ts enforces both. |
There was a problem hiding this comment.
sources.test.ts does not exist; the @source check lives in uikit/uikit.test.ts. scroll.ts:14 and timing.ts:14 say the same.
| '@astryxdesign/core': patch | ||
| --- | ||
|
|
||
| [fix] A Toast's swipe now follows iOS notification banners. The card stays still for the first 14 px of finger travel and then follows at 0.55 of the finger, with no jump. On release, the finger's travel projected with its velocity decides: a quick flick dismisses even when it barely moved the card, and a release short of dismissing springs the card back. A dismissed card leaves from where the finger left it and never moves back toward rest. The swipe no longer fades or shrinks the card. While the card springs back, touches pass through to the page. |
There was a problem hiding this comment.
This says "the finger's travel projected with its velocity decides", but isDismissRelease is two independent thresholds (15.7 px out, or 105 px/s) with no projection.
PR Analysis Report📚 Storybook Preview🧪 Sandbox PreviewModified ComponentsToast (@astryxdesign/core) · View in Storybook
Component Size
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.
|
| Component | JavaScript | CSS |
|---|---|---|
| core/LayerProvider | +27.5KB |
+140B |
| core/Toast | +27.2KB |
+92B |
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 | 34.6KB | 34.6KB | +87B |
Accessibility Audit
Status: No accessibility violations detected.
Visual Regression
55 of 502 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
19dd8fd to
33dbb83
Compare
There was a problem hiding this comment.
Approval waits on an engineering owner deciding the iOS-banner swipe model for Toast, which no current spec covers: the 14 px dead zone and 0.55x follow, dismissal at 15.7 px or 105 px/s, no fade while dragging, the 0.5 s spring-back that also runs under Reduce Motion, pass-through while settling, a second finger that no longer cancels the swipe (blocking pinch-zoom for that gesture), and whether draft AST-094 may amend the current theme-tokens, interaction-modality, user-states, buttons and AST-025 records. An engineering owner records that decision by commenting /approve-spec 33dbb831a6124c75f70c487a8513dc376bd0f3fc, and the author, as an engineering owner, may do so. These fixes are needed either way:
- Rebase onto the merged stack (#8052 through #8047) so this PR carries only its Toast commit instead of 26,022 authored lines.
- Remove or complete the "Touch presentation" section of
packages/core/src/gestures/README.md, which documents autils/touchPresentation.tsmodule and test that do not exist. - Correct the stale references ("decides at 8",
sources.test.ts,uikit/switch.ts,uikit/contextMenu.tsand the changeset's "projected with its velocity") and update AST-057's description ofuseToastGesture.
[Automated review]
33dbb83 to
4cf3606
Compare
There was a problem hiding this comment.
Approval waits on an engineering owner deciding the iOS-banner swipe model for Toast, which no current spec covers: the 14 px dead zone and 0.55x follow, dismissal at 15.7 px or 105 px/s, no fade while dragging, the 0.5 s spring-back that also runs under Reduce Motion, pass-through while settling, a second finger that no longer cancels a claimed swipe (blocking pinch-zoom for that gesture), and whether draft AST-094's requirements may become current. An engineering owner records that decision by commenting /approve-spec 4cf3606b4068909001bebf752e9188469dedfc21 on this pull request, and the author may do so if they are an engineering owner. These fixes are needed either way:
- Rebase onto the merged stack (#8052 through #8047) so this PR carries only its Toast commit instead of 28,637 authored lines.
- Take the theme motion roles and the
platformadaptation condition out of this PR, or havearchitecture:theme-tokensINV1 andspec:AST-012FR2 amended first, since draft AST-094 FR4 also says touch motion is not themable. - Return a standalone
Toastto rest after a swipe dismissal, because today it stays where the finger left it when its owner keeps it mounted. - Remove or complete the gestures README's "Touch presentation" section, which documents a
touchPresentationmodule that does not exist, and fix the stale references noted inline.
[Automated review]
| isDismissRelease(session.offset, fingerVelocity) | ||
| ) { | ||
| onSwipeExit?.(); | ||
| dismiss(); |
There was a problem hiding this comment.
After a swipe dismissal the card keeps its last translate. Inside ToastViewport the exit plays from there, but a standalone Toast whose owner keeps it mounted after onDismiss stays where the finger left it: 25.3 px after a 60 px drag in the Narrow layout reference story. Base cleared the drag first for exactly this case. Return the card to rest when no onSwipeExit is given, and add a test on the standalone Toast.
| * is everything else. Pair `ios` with `pointer: 'coarse'` for a touch | ||
| * profile, such as touch motion tuned per platform. | ||
| */ | ||
| platform?: 'ios' | 'other'; |
There was a problem hiding this comment.
platform is a new adaptation condition, but spec:AST-012 FR2 keeps the when vocabulary closed: "Future environment fields require explicit additions to this closed vocabulary." Drop it from this PR, or have that record amended first.
| `motion role "${id}" must be a dotted table path such as "sheet.present"`, | ||
| ); | ||
| } | ||
| return `--motion-${id |
There was a problem hiding this comment.
These --motion-<role> names come from table paths rather than tokens.stylex.ts, but architecture:theme-tokens INV1 says a core token name and its default originate there. Draft AST-094 FR4 and DEC-1 in this same PR also say touch motion is not themable.
| ## Touch presentation | ||
|
|
||
| Whether a component presents itself the touch (UIKit) way is answered once, | ||
| in `../utils/touchPresentation.ts`: |
There was a problem hiding this comment.
../utils/touchPresentation.ts, the three queries, the three hooks and the test this section describes do not exist at this head. Drop the section until the resolver lands, or land the module and its test with it.
| `touchmove` from 8 px keeps the page still for the whole gesture. Under | ||
| `pan-y` it scrolls only drags steeper than about 2:1 to 3:1, once the | ||
| vertical travel reaches about 10 px. A pan that competes with native | ||
| scrolling therefore decides at 10 px or less (the toast's swipe decides at |
There was a problem hiding this comment.
The toast's swipe claims at 5 px (EARLY_CLAIM_DISTANCE) and begins at 10, as the Early claim paragraph above says, not at 8.
| * Every leaf carries one or more `@source` (apple-docs | wwdc | webkit | | ||
| * measured | GUESS); webkit and GUESS values also carry the `@measure` task | ||
| * that will confirm or replace them (motion/README.md lists them all). | ||
| * sources.test.ts enforces both. |
There was a problem hiding this comment.
sources.test.ts does not exist; the @source check is in uikit/uikit.test.ts. scroll.ts:14 and timing.ts:14 say the same.
4cf3606 to
e32f223
Compare
There was a problem hiding this comment.
Approval waits on an engineering owner deciding whether Toast should adopt the iOS notification-banner swipe and retract exit proposed in draft AST-094: an engineering owner records that decision by commenting /approve-spec e32f22318deea384b1b53adadc7088efaa781e9d on this pull request, and the author may do so if they are an engineering owner. Whatever that decision, these changes are needed:
- Under Reduce Motion, cross-fade the iOS spring-back and retract in 200 ms or less instead of keeping their travel, as the current reduced-motion design record requires.
- Clear the dismissal latch so a directly rendered
Toastthat stays mounted does not end off-screen and unresponsive on iOS. - Load the touch-only gesture and motion code lazily or justify it (Toast's import grows by about 25 KB gzip), and derive the compact edge from the theme's
mdpoint instead of 744 px. - Land the predecessor pull requests first so this one carries only its own commit.
[Automated review]
| ) => boolean; | ||
| } | ||
|
|
||
| const RELEASE_OPTIONS = {reducedMotion: 'keep'} as const; |
There was a problem hiding this comment.
These options keep the spring-back (:206) and the 160 ms slide-out (:253) under Reduce Motion. The current reduced-motion design record (DR2, DR4) asks for an opacity-only cross-fade of 200 ms or less when a finger's release starts a transition, and says a component's own motion settings do not override it, so both calls need a short cross-fade instead of 'keep'.
| if (isDismissingRef.current) { | ||
| return; | ||
| } | ||
| isDismissingRef.current = true; |
There was a problem hiding this comment.
This latch, like retractingRef in useToastBannerSwipe.ts:255, is never cleared. A Toast rendered directly whose owner keeps it mounted ends at its retract target off-screen (844 px down in the Narrow layout reference story with the iOS idiom emulated), with its buttons still focusable, and later dismissals do nothing; clearing both and returning the card to rest when the toast is still mounted after onDismiss would fix it.
| }; | ||
| // A dismissal from outside (the viewport, an app's `dismiss()`) retracts | ||
| // the card too. | ||
| useIsomorphicLayoutEffect(() => { |
There was a problem hiding this comment.
This layout effect starts the retract in reaction to isExiting, and the retract calls onRetract, which sets the viewport's isRetracting state. The react-component-runtime architecture (INV2, INV3) asks for that work in the handler that caused it, or an effect comment naming the external system it synchronizes.
| export const TOUCH_QUERY = '(pointer: coarse)'; | ||
|
|
||
| /** The viewport is compact: layout behaviours. */ | ||
| export const COMPACT_QUERY = '(width < 744px), (height < 500px)'; |
There was a problem hiding this comment.
AST-012 FR9 (current) makes a screen compact while its width is below the theme's md point (768 by default) or its height is below 500, and says no resolver keeps size numbers of its own. With 744px, a coarse-pointer viewport 744 to 767 px wide keeps the popover where FR9 gives the sheet.
|
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. |
|
Agreed: one implementation.
|
e32f223 to
a0dfe79
Compare
github-actions
Bot
added
the
needs:design-review
vjeux
changed the title
… 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.
Toast.spec.md records what this branch ships: the `presentation` concept (`adaptive` by default, `toast`, `notification`), the notification swipe in FR4 and its retract in FR5, the released default it changes under a finger, and the current-state bullets and gap text the notification presentation closes (a release moving back springs back, the settle starts at the release velocity, and reduced motion fades on a touch screen). The toast presentation keeps its listed gaps: net travel, a theme-timed settle, a second touch that cancels, and no projection.
There was a problem hiding this comment.
Approval is on hold until an engineering owner decides whether this head's rewrite of the current Toast record should stand: it makes the iOS notification banner Toast's default under a finger and adds presentation, while departing from spec:AST-094 FR36 (projected travel decides a release), FR6 (a finger can catch the card mid-flight) and FR4 (motion roles for the exit). An engineering owner records that decision by commenting /approve-spec 2b59f303464fe99168ff61de9ba8dc56a01f95b2 on this pull request, and the author may do so as an engineering owner; amending AST-094 on main settles it too. Whatever the decision, these changes are needed:
- Land the predecessor pull requests, or rebase so this one carries only its Toast commits (31,897 authored lines today).
- Add real-device recordings for the Mobile Safari and Chrome for Android claims, which AST-094's platform-support section requires.
- Make the proposed FR4 state one release rule, pass
touchReleaseonly for a touch release, name the three new Effects inuseToastBannerSwipe.ts, and reword the three stale test comments.
[Automated review]
| if (velocity < 0) { | ||
| return false; | ||
| } | ||
| return offset >= toast.dismissOffset || velocity >= toast.flickVelocity; |
There was a problem hiding this comment.
This two-threshold rule decides the release in place of spec:AST-094 FR36's projected travel against a commit point. It waits on the engineering owner's decision asked on this pull request; the proposed record's FR4 should then state this one rule, as an exception to FR36 if that is the decision.
| const current = optionsRef.current; | ||
| if ( | ||
| root == null || | ||
| settlingRef.current != null || |
There was a problem hiding this comment.
Refusing touches while the card settles or retracts departs from spec:AST-094 FR6, "A finger MUST be able to catch any animation mid-flight at the value on screen"; this is part of the owner decision on hold.
| /** The card's speed toward its edge at a dismissing release (px/s). */ | ||
| const releaseVelocityRef = useRef(0); | ||
| const optionsRef = useRef(options); | ||
| useIsomorphicLayoutEffect(() => { |
There was a problem hiding this comment.
This Effect, and the ones at lines 205 and 209, need a comment naming what they synchronize (architecture:react-component-runtime INV3), for example // Syncs the options ref with the newest render.
| const handle = animator.animate( | ||
| {y: 0}, | ||
| {spring: SETTLE_SPRING, velocity: {y: velocity * direction}}, | ||
| {crossfadeAs: 'entrance', touchRelease: true}, |
There was a problem hiding this comment.
Every release passes touchRelease: true, so with presentation="notification" a pen released where the primary pointer is fine cross-fades under Reduce Motion, where spec:AST-094 FR43 and design:reduced-motion DR3 change it at once. Passing touchRelease only for a touch pointer, here and for the retract (line 293), would conform.
| | FR1 | A card carries `toast` with `type` and shows `body` and, on its first line, `endContent` then a dismiss Button named by `@astryx.toast.dismiss`; long body text wraps below. `renderContent` replaces that layout, receives `body`, `endContent`, `type`, timing, and a `dismiss` function, and gets no injected dismiss control. | Current source and tests | | ||
| | FR2 | With auto-hide on (the default for `info`, off for `error`), the card dismisses with reason `auto` after `autoHideDuration` ms. The timer pauses while the pointer is over the card, focus is inside it, a touch or pen gesture is active, or the window is blurred, and resumes with the remaining time (at least 1 s). Implementation gaps: the pause is one flag, so any pause condition ending resumes the timer while another still holds, and a toast raised while the window is already blurred starts its timer (Current-state impact). | Current source and tests | | ||
| | FR3 | The dismiss button, a swipe, a `dismiss` call, or the returned dismiss function dismiss with reason `manual`; `onHide` fires at most once, when the toast is dismissed, even when dismissed twice during its exit. Implementation gap: a toast dismissed before it first renders, through its returned dismiss function in the handler that showed it, never reports `onHide` and lingers in a provider-hosted viewport; with no provider above the caller, a dismissal called before the fallback viewport mounts does nothing, so the toast shows and stays unless it auto-hides (Current-state impact). A toast replaced through `uniqueID` is not dismissed and reports no `onHide`. | Current source and tests | | ||
| | FR4 | A drag toward the position's block edge, from any pointer (`spec:AST-094` FR43), decides once, at release, per `spec:AST-094` FR36–FR37: projected travel past the commit point dismisses, and a release moving back toward the start cancels. In the notification presentation the card stays still for the first `toast.followFrom` px of travel and then follows at `toast.followRatio` of the finger, and a release dismisses when the card is `toast.dismissOffset` out or the finger lifts moving toward the edge at `toast.flickVelocity` or faster, the notification banner's measured values; in the toast presentation the card follows the finger 1:1. A short drag snaps back; horizontal intent or a gesture starting on an interactive descendant does not dismiss; a second touch before the swipe begins leaves the page its pinch, and one after it begins leaves it going (`spec:AST-094` FR10). Native page scrolling continues until touch intent matches the dismiss edge. In the default layout the visible dismiss button stays as a non-gesture alternative; custom content supplies its own. Implementation gaps: the toast presentation dismisses on net travel past a distance threshold or a flick, even after the finger moves back, and a second touch cancels its swipe; neither presentation projects travel; and only touch and pen drags are recognized, not a mouse (Current-state impact). | Current source and tests | |
There was a problem hiding this comment.
FR4 now states two release rules: projected travel (the FR36 sentence) and, for the notification presentation, toast.dismissOffset or toast.flickVelocity, while the gaps say neither presentation projects travel. Once the owner rules, keep one rule, with the thresholds as a recorded exception to FR36 if that is the decision.
2b59f30 to
bbb4d74
Compare
# Conflicts: # packages/core/src/Toast/__tests__/ToastSwipe.interaction.browser.spec.ts # packages/core/src/Toast/toastSwipe.test.ts # packages/core/src/Toast/toastSwipe.ts
…r, and every pointer swipes
Toast takes `presentation` ('adaptive' by default, 'toast', 'notification').
Under a finger the swipe and the exit follow the iOS notification banner
(values and sources in motion/uikit/toast.ts): the card follows past a
first distance at a ratio, a release decides on the card's offset or the
finger's speed at the lift, a release moving back springs back, a drag that
turns back stretches the card and springs it back, and every dismissal
retracts the card past its edge. Toast's own swipe (a fine pointer, or
`presentation="toast"`) runs on the shared pan for every pointer, a finger,
a pen and a mouse, with a flick at any travel read from the shared release
filter at the lift. Toast.spec.md records the Presentation concept, FR4,
FR5 and the gaps that remain.
One solution from four pull requests: meta#8121 (the banner swipe and
`presentation`), meta#8144 (the turn-back stretch), meta#8678 (every pointer on the
shared pan) and meta#8047 (a flick at any height). Left out, since no spec
decides them yet: the wheel and trackpad swipe, and the text-selection hold
during a mouse or pen drag.
…r, and every pointer swipes
Toast takes `presentation` ('adaptive' by default, 'toast', 'notification').
Under a finger the swipe and the exit follow the iOS notification banner
(values and sources in motion/uikit/toast.ts): the card follows past a
first distance at a ratio, a release decides on the card's offset or the
finger's speed at the lift, a release moving back springs back, a drag that
turns back stretches the card and springs it back, and every dismissal
retracts the card past its edge. Toast's own swipe (a fine pointer, or
`presentation="toast"`) runs on the shared pan for every pointer, a finger,
a pen and a mouse, with a flick at any travel read from the shared release
filter at the lift. Toast.spec.md records the Presentation concept, FR4,
FR5 and the gaps that remain.
One solution from four pull requests: meta#8121 (the banner swipe and
`presentation`), meta#8144 (the turn-back stretch), meta#8678 (every pointer on the
shared pan) and meta#8047 (a flick at any height). Left out, since no spec
decides them yet: the wheel and trackpad swipe, and the text-selection hold
during a mouse or pen drag.
…r, and every pointer swipes
Toast takes `presentation` ('adaptive' by default, 'toast', 'notification').
Under a finger the swipe and the exit follow the iOS notification banner
(values and sources in motion/uikit/toast.ts): the card follows past a
first distance at a ratio, a release decides on the card's offset or the
finger's speed at the lift, a release moving back springs back, a drag that
turns back stretches the card and springs it back, and every dismissal
retracts the card past its edge. Toast's own swipe (a fine pointer, or
`presentation="toast"`) runs on the shared pan for every pointer, a finger,
a pen and a mouse, with a flick at any travel read from the shared release
filter at the lift. Toast.spec.md records the Presentation concept, FR4,
FR5 and the gaps that remain.
One solution from four pull requests: meta#8121 (the banner swipe and
`presentation`), meta#8144 (the turn-back stretch), meta#8678 (every pointer on the
shared pan) and meta#8047 (a flick at any height). Left out, since no spec
decides them yet: the wheel and trackpad swipe, and the text-selection hold
during a mouse or pen drag.
…r, and every pointer swipes
Toast takes `presentation` ('adaptive' by default, 'toast', 'notification').
Under a finger the swipe and the exit follow the iOS notification banner
(values and sources in motion/uikit/toast.ts): the card follows past a
first distance at a ratio, a release decides on the card's offset or the
finger's speed at the lift, a release moving back springs back, a drag that
turns back stretches the card and springs it back, and every dismissal
retracts the card past its edge. Toast's own swipe (a fine pointer, or
`presentation="toast"`) runs on the shared pan for every pointer, a finger,
a pen and a mouse, with a flick at any travel read from the shared release
filter at the lift. Toast.spec.md records the Presentation concept, FR4,
FR5 and the gaps that remain.
One solution from four pull requests: meta#8121 (the banner swipe and
`presentation`), meta#8144 (the turn-back stretch), meta#8678 (every pointer on the
shared pan) and meta#8047 (a flick at any height). Left out, since no spec
decides them yet: the wheel and trackpad swipe, and the text-selection hold
during a mouse or pen drag.
…r, and every pointer swipes
Toast takes `presentation` ('adaptive' by default, 'toast', 'notification').
Under a finger the swipe and the exit follow the iOS notification banner
(values and sources in motion/uikit/toast.ts): the card follows past a
first distance at a ratio, a release decides on the card's offset or the
finger's speed at the lift, a release moving back springs back, a drag that
turns back stretches the card and springs it back, and every dismissal
retracts the card past its edge. Toast's own swipe (a fine pointer, or
`presentation="toast"`) runs on the shared pan for every pointer, a finger,
a pen and a mouse, with a flick at any travel read from the shared release
filter at the lift. Toast.spec.md records the Presentation concept, FR4,
FR5 and the gaps that remain.
One solution from four pull requests: meta#8121 (the banner swipe and
`presentation`), meta#8144 (the turn-back stretch), meta#8678 (every pointer on the
shared pan) and meta#8047 (a flick at any height). Left out, since no spec
decides them yet: the wheel and trackpad swipe, and the text-selection hold
during a mouse or pen drag.
github-actions
Bot
added
the
needs:spec-owner-review
There was a problem hiding this comment.
Approval is on hold until an engineering owner decides whether Toast should follow the iOS notification banner by default under a finger. The current Toast record keeps Toast's own swipe and fade with a projected-travel release, so a maintainer needs to update that record and settle four points: the banner as the touch default, its two-threshold release (against spec:AST-094 FR36), touches passing through a settling card (FR6), and the exit's fixed 160 ms timing (FR4); the new presentation prop's 'adaptive' default, which changes released touch behavior, is part of the same decision. An engineering owner records it by commenting /approve-spec <full head SHA> on the rebased head, and the author may do so as an engineering owner.
Whatever the decision, these changes are needed:
- Rebase onto
mainso this pull request carries only its Toast change: it conflicts withmainin 90 files, and the gesture, motion and click-guard work it carries (31,897 authored lines in all) has since landed there in newer versions. - Move the Toast record edit onto
docs/specs/components/Toast/Toast.spec.md, wheremainnow keeps the record, and make its FR4 state one release rule instead of both projected travel and the two thresholds. - Make
toast-swipe-follows-banner.mdmatch what phone browsers do: your own recordings show Chrome for Android taking both a slow drag and a quick flick off the card, and Mobile Safari a slow drag. - Add real-device recordings for the Mobile Safari and Chrome for Android claims, which
spec:AST-094's platform-support section requires. - Pass
touchReleaseonly for a touch release, so a pen's release under Reduce Motion changes at once where the pointer is fine (design:reduced-motionDR3). - Name what the three new Effects in
useToastBannerSwipe.tssynchronize, and reword the three test comments that still describe an iOS-only model.
[Automated review]
| '@astryxdesign/core': patch | ||
| --- | ||
|
|
||
| [feat] Toast takes `presentation`, on `ToastViewport` (every toast it shows) and on `Toast`: `'adaptive'` (the default), `'toast'` or `'notification'`. Under `'adaptive'`, a toast under a finger (a coarse primary pointer, on every touch device, iOS and Android alike) now follows iOS notification banners, as `'notification'` does on every device. The card stays still for the first 14 px of finger travel and then follows at 0.55 of the finger, with no jump. On release, a quick flick toward the edge dismisses even when it barely moved the card, as does a drag that leaves the card far enough out; a release moving back toward rest, or anything else, springs the card back. However a toast is dismissed (a swipe, the close button, the timeout, the app's dismiss), the card leaves as the banner does: it slides past its edge from where it is, continuing a flick's speed, without fading, and its row closes after it. While the card springs back or leaves, touches pass through to the page. Previously a toast under a finger followed Toast's own swipe, the card moving with the finger as it faded and shrank, and faded out when dismissed: `presentation="toast"` keeps that on every device. With a fine pointer the swipe and exit look as they did; a flick now reads the speed at the lift from the shared release filter instead of the drag's average, so a slow drag ending in a quick throw dismisses and a pen that rests before it lifts does not flick. Under reduced motion nothing slides, springs or drifts: on a touch screen the toast fades in place before its row closes, and with a mouse or keyboard it changes at once. |
There was a problem hiding this comment.
This promises the banner swipe "on every touch device, iOS and Android alike", including that "a quick flick toward the edge dismisses". Your recordings in the PR thread show Chrome for Android taking both a slow 60 px drag and a 20 px flick off the card (the card never moves), and Mobile Safari taking a slow drag. Please describe what those browsers do, or change the claim once the 10 pt claim is decided.
| const handle = animator.animate( | ||
| {y: 0}, | ||
| {spring: SETTLE_SPRING, velocity: {y: velocity * direction}}, | ||
| {crossfadeAs: 'entrance', touchRelease: true}, |
There was a problem hiding this comment.
Every release passes touchRelease: true, including a pen's. With presentation="notification" on a mouse-driven device, a pen's spring-back (and the retract at line 293) then cross-fades for up to 200 ms under Reduce Motion, where design:reduced-motion DR2 covers only the release of a touch drag and DR3 asks a fine-pointer transition to complete immediately. Passing touchRelease only when the releasing pointer is a touch would fix it.
| /** The card's speed toward its edge at a dismissing release (px/s). */ | ||
| const releaseVelocityRef = useRef(0); | ||
| const optionsRef = useRef(options); | ||
| useIsomorphicLayoutEffect(() => { |
There was a problem hiding this comment.
This Effect, and the ones at lines 205 and 209, need a comment naming what they synchronize (architecture:react-component-runtime INV3), as the gesture hooks do, for example // Syncs the pan's direction with the toast's edge.
| | FR1 | A card carries `toast` with `type` and shows `body` and, on its first line, `endContent` then a dismiss Button named by `@astryx.toast.dismiss`; long body text wraps below. `renderContent` replaces that layout, receives `body`, `endContent`, `type`, timing, and a `dismiss` function, and gets no injected dismiss control. | Current source and tests | | ||
| | FR2 | With auto-hide on (the default for `info`, off for `error`), the card dismisses with reason `auto` after `autoHideDuration` ms. The timer pauses while the pointer is over the card, focus is inside it, a touch or pen gesture is active, or the window is blurred, and resumes with the remaining time (at least 1 s). Implementation gaps: the pause is one flag, so any pause condition ending resumes the timer while another still holds, and a toast raised while the window is already blurred starts its timer (Current-state impact). | Current source and tests | | ||
| | FR3 | The dismiss button, a swipe, a `dismiss` call, or the returned dismiss function dismiss with reason `manual`; `onHide` fires at most once, when the toast is dismissed, even when dismissed twice during its exit. Implementation gap: a toast dismissed before it first renders, through its returned dismiss function in the handler that showed it, never reports `onHide` and lingers in a provider-hosted viewport; with no provider above the caller, a dismissal called before the fallback viewport mounts does nothing, so the toast shows and stays unless it auto-hides (Current-state impact). A toast replaced through `uniqueID` is not dismissed and reports no `onHide`. | Current source and tests | | ||
| | FR4 | A drag toward the position's block edge, from any pointer (`spec:AST-094` FR43), decides once, at release, per `spec:AST-094` FR36–FR37: projected travel past the commit point dismisses, and a release moving back toward the start cancels. In the notification presentation the card stays still for the first `toast.followFrom` px of travel and then follows at `toast.followRatio` of the finger, and a release dismisses when the card is `toast.dismissOffset` out or the finger lifts moving toward the edge at `toast.flickVelocity` or faster, the notification banner's measured values; in the toast presentation the card follows the finger 1:1. A short drag snaps back; horizontal intent or a gesture starting on an interactive descendant does not dismiss; a second touch before the swipe begins leaves the page its pinch, and one after it begins leaves it going (`spec:AST-094` FR10). Native page scrolling continues until touch intent matches the dismiss edge. In the default layout the visible dismiss button stays as a non-gesture alternative; custom content supplies its own. Implementation gaps: the toast presentation dismisses on net travel past a distance threshold or a flick, even after the finger moves back, and a second touch cancels its swipe; neither presentation projects travel; and only touch and pen drags are recognized, not a mouse (Current-state impact). | Current source and tests | |
There was a problem hiding this comment.
FR4 now states two release rules: projected travel past the commit point (the spec:AST-094 FR36 sentence) and, for the notification presentation, toast.dismissOffset or toast.flickVelocity, while the gap list says neither presentation projects travel. Once the owner rules, state one rule, with the thresholds as a recorded FR36 exception if that is the decision. Note also that main now keeps this record at docs/specs/components/Toast/Toast.spec.md.
| }); | ||
| }); | ||
|
|
||
| // Everywhere but iOS (Android, other touch screens, a pen on a laptop), |
There was a problem hiding this comment.
This comment, and the one at line 2256, describe the earlier iOS-only model; under presentation="adaptive" an Android finger gets the banner swipe too. Worth rewording.
| * passes through; a second finger keeps the swipe (screencast frames for | ||
| * the video); the settle keeps advancing through a blocked main thread and | ||
| * does no Layout or Paint; storyboards of the drag, the settle and the exit. | ||
| * With a fine pointer the swipe's code never loads, a mouse drag leaves the |
There was a problem hiding this comment.
Toast.tsx imports useToastBannerSwipe statically, so the swipe's code does load with a fine pointer; only the recognizer stays unattached. Worth rewording.
Depends on #8360 (and its predecessors) and #8047. Review only this PR's change: vjeux/astryx@78d7e64...296e1fa and the commits vjeux@9f8a9d4, vjeux@ac46115 and vjeux@2b59f30 (the other commits merge #8360, #8320, #8076 and #8047)
Primary intent
Under a finger (a coarse pointer, any touch device), Toast's swipe and exit follow the iOS notification banner;
presentationpicks today's toast or the banner everywhere.User or maintainer impact
Each path: a test and a clip (Mobile Safari unless marked). Recorded on the iOS 26.2 simulator and the Android emulator.
main): a 9 px jump after 8 px; fade 0.79, scale 0.989"toast"row closes after the fadepresentation="toast"keeps today's swipe and fade everywhere,"notification"the banner; mouse unchanged (tested).Problem and solution fit
Today's swipe is hand-tuned (first clip); the values are 60 fps iOS 26.2 banner recordings;
axisRatiois a guess.Authority
spec:AST-094FR13, FR1, FR4 (the settle issprings.settle), FR7, FR17, FR24, FR25, FR37, FR38 (public-component-apiINV16,spec:AST-017DEC-23).design:reduced-motion; AST-100's release filter (spec:AST-017FR59).Owner decisions (proposed):
presentation, a public API addition, and the banner model (no fade or scale, pass-through while settling);Toast.spec.mdrecords both.Change
toastSwipe.ts: the math, tested on recordings.useToastBannerSwipe.ts, the touch module: panToast.swipe, follow, settle,retract.useToastGesture(fine pointer): the shared tracker at the lift.presentationonToastandToastViewport; a banner row closes after its retract.Toast.spec.md: the Presentation concept, the notification swipe (FR4) and retract (FR5), the changed default, and the bullets and gaps it closes.Scope
Size: +4,286 / −94 (tests 3,345). Toast's import (the CI's measurement): JS 63,513 → 93,254 B gzip; CSS 10,128 → 10,220 B gzip.
Testing
pnpm exec vitest run packages/core/src/Toast/ packages/core/src/motion/: 826 pass (29 files), with no unhandled error (vitest exits 0); the stack's top head (feat(Toast): every pointer swipes a toast, on the shared gesture host (spec:AST-094 FR43) #8678) passes the full core suite and the node project. jsdom: under a finger (a coarse-pointer stub), the banner suite, including the touch taken from the browser at the pan's 10 pt start and not at 9, a release moving back toward rest that springs back however far out the card is (spec:AST-094FR37), the retract before a release's, the close button's, the timeout's and the app's dismissal, and a standaloneToastits owner keeps coming back to rest; an app's dismiss holds the row open until the retract ends;presentation="toast"keeps Toast's own swipe and fade under a finger,"notification"the notification banner with a fine pointer; a second finger anywhere keeps a moving swipe (FR10) and fails one that has not begun, so the page can pinch; with a fine pointer (each case checks the pointer is not coarse), Toast's own swipe and immediate close, and a flick read from the shared velocity tracker at the lift (a slow 47 px drag ending in a 2.3 px/ms throw dismisses; after a 41 ms rest it springs back, AST-100 FR2). Unit: the release rule cancels a release moving back (FR37); the retract starts at the card's release velocity, and a flick faster than its curve carries the card out sooner (FR38); the settle issprings.settle, Toast registers no motion role, a--motion-…variable changes nothing, and a bundle of the touch module carries no other spring row (INV6).pnpm test:interaction ToastSwipe: Chromium 24/24; WebKit (the harness container script) 19 passed, 5 skips (3 Chromium-only; the 2 pen tests, which drive Chromium input). Real touch with a coarse pointer on both engines, no engine emulation and no native scroll; the retract is sampled against its curve after a resting release, a flick (starting at the flick's speed, FR38), the close button and the timeout; after the app's dismiss the row keeps its height while the card is on screen; withpresentation="toast"under Reduce Motion the card fades out over several frames before its row closes (DR2; fails on the previous head). Under Reduce Motion the release, the close button and the app's dismiss animate opacity only and finish within 200 ms, and the entrance fades in place. With a fine pointer a mouse drag leaves the card alone, the card gets no layer, and the close button keeps Toast's fade; a real pen (Chromium) flicks on the speed at the lift and not after a 41 ms rest. The long-task check is Chromium's: the harness's log refuses to answer in WebKit, which has no Long Tasks API.pnpm build, the Storybook build,pnpm typecheck,CI=true pnpm lint(0 errors; the one warning in Toast's files ismain's) andpnpm check:knowledge: clean. A merge-tree withmain(90da4a7) is clean (rc 0). The touch-module bundle test's "is absent from the root entry" red (scripts/touch-support-bundle.test.mjs, frommain's refactor(core): one shared touch module that components import directly, reached by Lab through internal/touch #8465) is the one test(core): a touch component's import carries its gesture code, and nothing else does #8671 resolves.Writing rubric results
R1 narration: the Presentation concept, FR4, FR5, the compatibility lines, and three current-state bullets state what the system does, in the present tense; none found.
R2 research: none in the record; the banner's measured values stay with their sources in
motion/uikit/toast.ts, named by key.R3 evidence: the FR4–FR5 verification row names test files, not changes; no basis cell changed.
R4 rejected alternatives: none.
R5 change references: none.
R6 open questions: none; the record keeps "None".