Repository navigation
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
meta-cla
Bot
added
the
CLA Signed
|
AI review status for this pull request.
|
![astracat-bot[bot]](https://avatars.githubusercontent.com/in/4796231?s=60&v=4){kind=small}
There was a problem hiding this comment.
Approval is on hold for maintainer spec direction: the pull-away stretch and its uncapped 0.55× rule have no governing spec yet, and the draft spec:AST-094 added here also proposes updating current records such as architecture:theme-tokens. A maintainer needs to provide or approve the governing spec for the stretch and settle those record updates, which an engineering owner can do by commenting /approve-spec 1df23fe27e1046cabaec0f6a172be9b3af133ccd (you can do this yourself if you are an engineering owner). Separately from that decision, please address:
- A stretched card flicked back toward its edge is dismissed (
packages/core/src/Toast/toastSwipe.ts:40), although the docs, the changeset and the test attoastSwipe.test.ts:78say it always springs back. - The diff still carries the 19 predecessor pull requests (#8052–#8121): land them first and rebase so this one carries only its own commit.
packages/core/src/gestures/README.md:338documents autils/touchPresentation.tsmodule that does not exist,.changeset/toast-swipe-follows-banner.md:5describes a velocity projection the code does not use, and thelintjob ran out of memory on this head.
[Automated review]
| * faster (UIKit's estimator keeps a stopped finger's last speed). | ||
| */ | ||
| export function isDismissRelease(offset: number, velocity: number): boolean { | ||
| return offset >= toast.dismissOffset || velocity >= toast.flickVelocity; |
There was a problem hiding this comment.
A card stretched away from the edge still dismisses here when the finger flicks back toward the edge at 105 px/s or more: a top toast pulled 40 px down (card 14.3 px past rest) and flicked 20 px back up in 32 ms calls onHide('manual'). The doc comment above, useToastGesture.ts:28-30, the changeset and the test name all say a release there always springs back. Either gate the speed on the card being at or past rest (offset >= toast.dismissOffset || (offset >= 0 && velocity >= toast.flickVelocity)) or, if the banner dismisses in this case, correct those texts.
| }, | ||
| ); | ||
|
|
||
| it('springs a card stretched away from the edge back, however it is released', () => { |
There was a problem hiding this comment.
This only tries velocities −400 and 0, so it passes while a flick back toward the edge (a positive velocity at a negative offset) dismisses. Adding expect(isDismissRelease(followOffset(-80), toast.flickVelocity)).toBe(false) makes the test prove what its name says.
| ## 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, TOUCH_QUERY, COMPACT_QUERY, COMPACT_TOUCH_QUERY, useTouchPresentation(), readTouchPresentation() and useMotionPresentation() do not exist at this head, and no test enforces the query spelling. Please drop this section or point it at what ships.
| '@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.
The release does not project the travel with the velocity: isDismissRelease compares the card's offset with 15.7 px and the finger's speed toward the edge with 105 px/s (toastSwipe.ts:39-41). The changelog should describe those two thresholds.
| 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 |
There was a problem hiding this comment.
spec:AST-090 is not in the repository at this head, so this proposed amendment (and the one at line 235) points at no record. Cite it once it lands, or drop the reference.
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
1df23fe to
92bf839
Compare
There was a problem hiding this comment.
Approval is on hold for an engineering owner's spec decision: the pull-away stretch and its linear, uncapped 0.55× rule have no governing spec, and the draft spec:AST-094 this diff adds is unapproved. Any engineering owner, including you as the author if you are one, records that decision by commenting /approve-spec 92bf839c864b3da7f6bd8020cdf37d3f58bf9ae3, or asks for the stretch to wait until AST-094 is current on main. Separately from that decision, please address:
- A stretched card moved back toward its edge at 105 px/s or more before the lift is dismissed (
packages/core/src/Toast/toastSwipe.ts:40), although the description, the doc comments and the test attoastSwipe.test.ts:80say it always springs back. - The stacked theme API adds a
platformadaptation condition thatspec:AST-012FR2 keeps closed and--motion-*theme variables outside the token vocabulary, andastryx docs motiondescribes sheet, menu and navigation motion that no component plays yet. - The diff still carries the predecessor pull requests (#8052–#8121): land them first and rebase so this one carries only its own commit; the gestures README also documents a
utils/touchPresentation.tsthat does not exist.
[Automated review]
| * 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 adds a field to the adaptation condition vocabulary that spec:AST-012 FR2 keeps closed ("Future environment fields require explicit additions to this closed vocabulary"), and nothing in this pull request amends FR2. It belongs with #8257 once an owner amends that requirement, not in this diff.
| content: [ | ||
| { | ||
| type: 'prose', | ||
| text: 'On a touch screen, sheets, alerts, menus, navigation and scrolling play the springs, durations and curves measured from iOS. Each value is a motion role named by its table path, such as `springs.sheetPresent` or `timing.curves.easeInOut`. A theme retunes a role through `motion.springs`, `motion.durations` or `motion.curves`, at its root or in an adaptation rule; a role it leaves alone keeps its measured default.', |
There was a problem hiding this comment.
At this head the only component that imports the motion layer is Toast, and the only role it plays is toast.settle. No sheet, alert, menu, navigation or scroll component plays these values yet, so a theme that retunes springs.sheetPresent or springs.navigationPush as the example below does sees no change. Describe what ships, or land this page with the components that read those roles.
| * spring, a duration (a key ending in `Ms`, in milliseconds) or a curve (four | ||
| * cubic-bézier control points). It is named by its table path, for example | ||
| * `springs.sheetDetent`, `timing.curves.easeInOut` or `sheet.present`, and | ||
| * carried by one CSS custom property, `--motion-` followed by the path in |
There was a problem hiding this comment.
The --motion-* variables a theme writes originate here and in the motion tables, while architecture:theme-tokens INV1 says "A core token name and its default originate in tokens.stylex.ts; projections do not introduce names." The draft spec:AST-094 FR4 in this same diff also says touch physics are not themable. One of them has to change, under an owner ruling, before this API lands.
92bf839 to
e17fbc1
Compare
There was a problem hiding this comment.
Approval is on hold for an engineering owner's spec decision: the pull-away stretch and its linear, uncapped 0.55× rule have no governing spec, and the draft spec:AST-094 this diff adds is unapproved. Any engineering owner, including you as the author if you are one, records that decision by commenting /approve-spec <full head SHA>, or asks for the stretch to wait until AST-094 is current on main. Separately from that decision, please address:
- A stretched card moved back toward its edge at 105 px/s or more before the lift is still dismissed (
packages/core/src/Toast/toastSwipe.ts:43), although the description, the doc comments and the test name attoastSwipe.test.ts:86say it always springs back. - Under Reduce Motion the release still springs and every iOS dismissal still slides (
useToastBannerSwipe.ts:103, asserted by the new browser test), which the current reduced-motion design record rules out: a transition a touch release starts cross-fades in 200 ms or less. - The stack's compact-touch resolver hard-codes 744 px (
utils/touchPresentation.ts:75-79) where currentspec:AST-012FR9 uses the theme'smdpoint or a height below 500, and the iOS swipe adds about 24 KB gzip of touch-only JavaScript to every Toast import without lazy loading or a stated justification. - The diff still carries the predecessor pull requests (#8052–#8121), including theme API that contradicts
spec:AST-012FR2 andarchitecture:theme-tokensINV1: land them first and rebase 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.
reducedMotion: 'keep' makes the stretched card's spring-back (:205-209) and every iOS retract (:246-256) travel under Reduce Motion. The current reduced-motion design record asks a transition started by a touch release to change opacity only and finish within 200 ms, with a leaving element fading out where it is (DR2), and rules out keeping springs (DR4); spec:AST-057 FR5 already does this for a swiped row. Under reduced motion, bring the released card to rest with no travel and a short cross-fade, and fade a dismissed card out in place.
| expect(await ownSwipe(card)).toEqual({y: 0, scale: 1, opacity: 1}); | ||
| }); | ||
|
|
||
| test('under Reduce Motion a turn-back still stretches the card and springs it back', async ({ |
There was a problem hiding this comment.
This test asserts the spring under Reduce Motion (50 ms after the lift the card is still more than 70% out), the behavior the current reduced-motion design record forbids for a transition a touch release starts. Once the release cross-fades, assert an opacity-only animation of 200 ms or less instead.
|
|
||
| /** Both: presentations such as a sheet in place of a popover. */ | ||
| export const COMPACT_TOUCH_QUERY = | ||
| '(width < 744px) and (pointer: coarse), (height < 500px) and (pointer: coarse)'; |
There was a problem hiding this comment.
Current spec:AST-012 FR9 makes a screen compact "while its viewport width is below the effective md point (FR1) or its viewport height is below 500", names the web touch presentation resolver, and says it keeps no size numbers of its own; md is 768 unless a theme overrides it. With 744 here, a coarse-pointer screen 744 to 767 px wide, such as an iPad mini in portrait, gets the popover where FR9 gives it the sheet. Derive the width edge from the theme's effective md point and update touchPresentation.test.ts:328 and the changeset.
| import {themeProps} from '../utils/themeProps'; | ||
| import {useTouchIdiom} from '../utils/touchPresentation'; | ||
| import {useTranslator} from '../i18n'; | ||
| import {useToastBannerSwipe} from './useToastBannerSwipe'; |
There was a problem hiding this comment.
This static import carries the iOS swipe's gesture system and animator into every Toast import: about 24 KB gzip bundled with React external, for code that runs only in the iOS touch idiom. Current architecture:component-style-authoring INV6 flags touch-only work over 2 KB gzip and asks for a lazy load when a coarse pointer needs it, or a stated justification.
e17fbc1 to
4880102
Compare
github-actions
Bot
added
the
needs:design-review
There was a problem hiding this comment.
Approval is on hold for an engineering owner's spec decision: the turn-back stretch and its linear, uncapped 0.55× rule have no governing spec, and the draft spec:AST-094 this diff adds is unapproved. Any engineering owner, including you as the author if you are one, records that decision by commenting /approve-spec <full head SHA> on this pull request, or asks for the stretch to wait until AST-094 is current on main. Separately from that decision, please address:
- Every Toast import grows by about 26 KB gzip because
Toast.tsx:55imports the touch layer statically, with no lazy load or stated justification, while the changeset says that code is not loaded with a fine pointer. - The stacked theme API (the
platformadaptation condition and the--motion-*roles) contradictsspec:AST-012FR2 andarchitecture:theme-tokensINV1, andastryx docs motionand a changeset describe roles that no component plays or that do not exist. - The diff still carries #8121 and its predecessors: land them first and rebase so this pull request carries only its own commit.
[Automated review]
| '@astryxdesign/cli': patch | ||
| --- | ||
|
|
||
| [fix] Under a finger (a coarse primary pointer, on every touch device, iOS and Android alike), 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, 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; anything else springs the card back. However a toast is dismissed (a swipe, the close button, the timeout), the card leaves as the banner does: it slides past its edge from where it is, without fading, and then the toast is dismissed. The swipe no longer fades or shrinks the card. While the card springs back or leaves, touches pass through to the page. A theme retunes the spring-back and the exit through the `toast.settle`, `toast.exitMs` and `toast.exitCurve` motion roles, which `astryx docs motion` now lists. With a fine pointer the swipe and exit stay as they were, and the swipe's code is not loaded. Under reduced motion nothing slides, springs or drifts: on a touch screen the toast fades in place, and with a mouse or keyboard it changes at once. |
There was a problem hiding this comment.
This says the swipe's code is not loaded with a fine pointer, but Toast.tsx:55 imports useToastBannerSwipe statically, so every Toast import carries the gesture system and the animator whatever the pointer: 42,409 bytes gzip on main, 68,338 at this head (one esbuild bundle of packages/core/src/Toast/index.ts, bare imports external). architecture:component-style-authoring INV6 asks for a lazy load under a coarse pointer or a stated justification; either load it lazily, or drop this sentence and justify the cost.
| '@astryxdesign/cli': patch | ||
| --- | ||
|
|
||
| [feat] Themes can retune touch motion. `defineTheme({motion})` takes `springs`, `durations` and `curves` keyed by motion role, the table path of a value touch presentations play (`springs.sheetPresent`, `timing.reducedMotionCrossFadeMs`), at the root or in an adaptation rule. A role the theme leaves out keeps its measured default, and the duration scale (`fast`, `medium`, `ratio`) is optional when a theme sets only roles. Adaptation rules gain a `platform` condition, `ios` or `other`. `astryx docs motion` lists every motion role with its CSS variable and default, and the theme authoring guide and template describe the new fields. |
There was a problem hiding this comment.
timing.reducedMotionCrossFadeMs is not a role at this head: motion/uikit/timing.ts:158 excludes it, as design:reduced-motion DR4 requires (no theme value may lengthen the Reduce Motion fade). Name a role a theme can set and something plays, such as toast.settle.
| @@ -247,9 +255,15 @@ export interface DefineThemeInput { | |||
| * // Snappy: { fast: 100, medium: 250, ratio: 0.75 } | |||
| * // Default: { fast: 175, medium: 410, slow: 975, ratio: 0.75 } | |||
| * // Cinematic: { fast: 200, medium: 500, slow: 1200, ratio: 0.7 } | |||
| * | |||
| * // A softer sheet and a slower reduced-motion fade: | |||
There was a problem hiding this comment.
navigation.transitionMs is not the Reduce Motion fade (that length is excluded from the roles), and no component reads it at this head, so this example retunes nothing. Show a role that has a consumer, or keep the example until a navigation component plays it.
| is right. Behaviour reads | ||
| `useTouchPresentation()` (SSR-safe), a decision taken once reads | ||
| `readTouchPresentation()`, and a component with no interaction to infer | ||
| from reads `useMotionPresentation()`: UIKit timings under a finger, theme |
There was a problem hiding this comment.
useMotionPresentation() does not exist at this head; the rest of this section now matches utils/touchPresentation.ts. Drop the sentence or point it at what ships.
4880102 to
76837dd
Compare
76837dd to
20a270a
Compare
There was a problem hiding this comment.
Approval is on hold for an engineering owner's spec decision: the turn-back stretch, its linear and uncapped 0.55× rule, and the draft spec:AST-094 requirements this diff adds have no current authority. Any engineering owner, including you as the author if you are one, records that decision by commenting /approve-spec <full head SHA> on this pull request, or says the stretch should wait until AST-094 is current on main. Separately from that decision, please address:
- Every Toast import grows by about 28 KB gzip because
Toast.tsx:55imports the touch layer statically, while the changeset says that code is not loaded with a fine pointer; load it lazily or justify the cost. - The theme motion roles contradict
architecture:theme-tokensINV1 and the draft's own FR4; the theme template documents aplatformaxis that no longer exists, and the template and motion docs retune roles no component plays. - A flick that rests more than 40 ms before the lift now springs back, although
toastSwipe.tsand the Toast table describe UIKit's filter keeping the last speed; the code also citesspec:AST-100,spec:AST-090and an AST-094 OQ4 that do not exist. - The diff still carries #8121 and its predecessors (37,915 authored lines): land them first and rebase so this pull request carries only its own commit.
[Automated review]
| import {useTouchPresentation} from '../utils/touchPresentation'; | ||
| import {reducedMotionFadeConsts} from '../motion/reducedMotion.stylex'; | ||
| import {useTranslator} from '../i18n'; | ||
| import {useToastBannerSwipe} from './useToastBannerSwipe'; |
There was a problem hiding this comment.
This static import brings the gesture host, arena, recognizers and compositor animator into every Toast import: one esbuild bundle of Toast/index.ts goes from 34,861 to 63,342 bytes gzip (npm packages external). That code runs only under a coarse pointer, so architecture:component-style-authoring INV6 asks for a lazy load or a stated justification, and .changeset/toast-swipe-follows-banner.md currently says the swipe's code is not loaded with a fine pointer.
| * Whether a release dismisses: the card is at least `toast.dismissOffset` | ||
| * out, or it is at or past rest toward the edge and the finger was moving | ||
| * toward the edge at `toast.flickVelocity` or faster (UIKit's estimator keeps | ||
| * a stopped finger's last speed). A card stretched away from the edge always |
There was a problem hiding this comment.
At this head the pan's release velocity is not UIKit's 'keeps a stopped finger's last speed': VelocityTracker reads 0 when the contact was still for more than 40 ms before the lift (gestures/VelocityTracker.ts:124-128). A short flick that rests 40 to 150 ms before lifting now springs back, while the banner measurement in motion/uikit/toast.ts:92-96 dismisses it. Either keep the iOS blend for this pan or update this comment, the table's source note and draft FR17.
| * carried by one CSS custom property, `--motion-` followed by the path in | ||
| * kebab case (`--motion-springs-sheet-detent`). A theme writes that property |
There was a problem hiding this comment.
These --motion-<path> names and their defaults originate in the motion tables, while architecture:theme-tokens INV1 says "A core token name and its default originate in tokens.stylex.ts; projections do not introduce names." The draft spec:AST-094 FR4 in this diff also says touch motion is not themable. This needs an owner-amended INV1 before it ships, or it should leave this pull request.
| * `from` includes its point; `below` excludes it. The other supported axes | ||
| * are primary-pointer precision, contrast preference, and motion preference. | ||
| * are primary-pointer precision, contrast preference, motion preference, and | ||
| * platform (`ios` for the browsers of iPhone and iPad, `other` for the rest). |
There was a problem hiding this comment.
themeAdaptations.ts accepts no platform field at this head (the condition was removed in this stack), so this sentence documents an axis a theme cannot use.
| @@ -177,6 +190,13 @@ const STATIC_EXPORTS = { | |||
| types: './dist/utils/interactionOverlay.stylex.d.ts', | |||
| default: './dist/utils/interactionOverlay.stylex.js', | |||
| }, | |||
| // Proposed; pending owner review (spec:AST-094 OQ4): the Reduce Motion | |||
There was a problem hiding this comment.
The draft spec:AST-094 has only OQ1 and OQ2, so this cites an open question that does not exist; and since ./motion/reducedMotion.stylex is not under an /experimental subpath, spec:AST-017 FR21 does not exempt it from the stable promise.
| and MUST keep advancing at display rate through a main-thread block. It MUST | ||
| NOT animate layout properties, and MUST NOT step a frame from script when the | ||
| compositor can run the curve. | ||
| - **FR6 — Motion is interruptible.** A finger MUST be able to catch any |
There was a problem hiding this comment.
The Toast this pull request ships lets touches pass through a card that is settling back or leaving (useToastBannerSwipe.ts:56-57, :167-177), so FR6 as written does not describe it. One of the two needs to change before an owner approves this record.
20a270a to
2dbdfd6
Compare
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.
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 waits on an engineering owner's decision: no current spec states the turn-back stretch or its uncapped 0.55 ratio (spec:AST-094 FR3 asks a drag past an edge to resist with a rubber band, and FR2 wants a dated owner decision to go beyond the 70 pt the banner was measured to), and this head also rewrites the current component:Toast record (FR4, FR5 and the new Presentation concept). Any engineering owner, including you as the author if you are one, can record that decision by commenting /approve-spec <full head SHA> on this pull request, or by saying which part should wait. Whatever is decided, these need fixing:
- Make FR4 in
packages/core/src/Toast/Toast.spec.mdmatch the code: it still says a fast flick toward the edge dismisses, whiletoastSwipe.ts:54keeps a stretched card, and it never mentions the stretch. - Land or drop the 17 open pull requests this branch carries (32,062 authored lines, of which this change is 215), then update the branch from
main. - Back “on every touch device” in
.changeset/toast-swipe-pull-away.mdwith real-device Mobile Safari and Chrome for Android evidence, or narrow the wording to a swipe that already holds the touch.
[Automated review]
| | 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 says a release dismisses when the finger lifts moving toward the edge at toast.flickVelocity or faster, but at this head isDismissRelease keeps a card stretched away from the edge on that flick (toastSwipe.ts:54), and the card follows a turn-back away from the edge (toastSwipe.ts:29-35), which FR4 never mentions. Please state the stretch and the at-or-past-rest flick condition here at the head owners approve, or drop the stretch.
| if (past <= 0) { | ||
| return 0; | ||
| } | ||
| return Math.sign(fingerTravel) * toast.followRatio * past; |
There was a problem hiding this comment.
This keeps the 0.55 follow linear with no bound, past the 70 pt the banner was measured to (motion/uikit/toast.ts:63-65): a 300 px reversal holds the card about 157 px below rest. spec:AST-094 FR3 asks a drag past an edge to resist with UIKit's rubber band, and FR2 lets an owner decision depart from a measurement only by naming its date and that measurement, so this waits on an engineering owner's decision.
| '@astryxdesign/core': patch | ||
| --- | ||
|
|
||
| [fix] Under a finger (a coarse primary pointer, on every touch device), a Toast swipe that turns back away from the toast's edge now stretches the card the same way, at about half the finger's travel past the first 14 px, and springs it back on release, as iOS notification banners do; a release there never dismisses, however fast the finger flicks back toward the edge. Before, once the swipe had the touch, such a drag moved neither the card nor the page. With a fine pointer nothing changes. |
There was a problem hiding this comment.
“On every touch device” is broader than the evidence: the description's Mobile Safari simulator run of this stroke shows the browser taking the touch at 10 pt and the card never moving, and spec:AST-094 Platform support asks for real-device evidence for iOS Safari and Android Chrome claims. Please add that evidence or narrow the wording to a swipe that already holds the touch.
260694b to
fc370d4
Compare
…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 waits on an engineering owner's decision: no current spec states the turn-back stretch or its uncapped 0.55 ratio (spec:AST-094 FR3 asks a drag past an edge to resist with a rubber band, and FR2 wants a dated owner decision to go beyond the 70 pt the banner was measured to), and this branch also rewrites the current component:Toast record (FR4, FR5 and the new Presentation concept with adaptive as the default). Any engineering owner, including you as the author if you are one, can record that decision by commenting /approve-spec <full head SHA> on this pull request, or say which part should wait. Whatever is decided, these need fixing:
- Narrow “on every touch device” in
.changeset/toast-swipe-pull-away.mdand the Toast usage text to a swipe that already holds the touch, or back it with real-device Mobile Safari and Chrome for Android evidence, since the only Mobile Safari recording of this stroke shows the card never moving. - Make FR4 match the code and state the turn-back stretch: it still says a fast flick toward the edge dismisses while
toastSwipe.tskeeps a stretched card, and the record now lives atdocs/specs/components/Toast/Toast.spec.mdonmain. - Rebuild the branch on
mainso it carries only this change and #8121's remaining delta: it brings 32,062 authored lines from 16 other pull requests, 8 of which have merged in their own form and 6 of which were closed, and it conflicts withmainin 90 files.
[Automated review]
| '@astryxdesign/core': patch | ||
| --- | ||
|
|
||
| [fix] Under a finger (a coarse primary pointer, on every touch device), a Toast swipe that turns back away from the toast's edge now stretches the card the same way, at about half the finger's travel past the first 14 px, and springs it back on release, as iOS notification banners do; a release there never dismisses, however fast the finger flicks back toward the edge. Before, once the swipe had the touch, such a drag moved neither the card nor the page. With a fine pointer nothing changes. |
There was a problem hiding this comment.
“On every touch device” is broader than the evidence: the description's only Mobile Safari recording of this stroke shows the browser taking the touch at the pan's 10 pt start, so the card never moves, and the stretch is shown only in Chromium and Playwright WebKit with no page scroll. spec:AST-094 Platform support asks for real-device evidence for iOS Safari and Android Chrome claims. Suggest “once the swipe has taken the touch” without “on every touch device”, or add that evidence. The same sentence is in Toast.doc.mjs:141.
| | 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 says a notification-presentation release dismisses when the finger lifts moving toward the edge at toast.flickVelocity, and describes the follow only toward the edge. At this head isDismissRelease keeps a card stretched past rest on exactly that flick (toastSwipe.ts:54) and followOffset follows a reversal (toastSwipe.ts:29-35). State the turn-back stretch and the at-or-past-rest flick condition here, in the record at its new path on main (docs/specs/components/Toast/Toast.spec.md).
| * How far the banner moves per pixel the finger travels past `followFrom`, | ||
| * toward the edge or away from it (away, the banner stretches and springs | ||
| * back; past ~75 pt it would open its expanded view, which a toast does | ||
| * not have). |
There was a problem hiding this comment.
Non-blocking (comment style): one 40-word sentence with three topics. Suggest: “How far the banner moves per pixel of finger travel past followFrom, either way. Away from the edge it stretches and springs back. Past about 75 pt the banner opens an expanded view; a toast has none.”
Depends on #8121 (and its predecessors). Review only this PR's change: vjeux/astryx@2b59f30...260694b
Primary intent
Under a finger, a toast swipe that turns back away from the edge now stretches the card and springs it back, like iOS notification banners; that drag was dead.
User or maintainer impact
Each path: a named test, and a clip where marked. Recorded on the iOS 26.2 simulator.
A drag starting away from the edge, or turning back within 10 pt, stays the page's; fine pointers: unchanged.
Problem and solution fit
On the iOS 26.2 simulator the banner's pull-down tracks at 0.55 × (travel − 14) (60 pt: 25.3; 70 pt: 31.3) and springs back; past ~75 pt it opens an expanded view a toast lacks, so the card keeps the ratio. One function becomes symmetric (
followOffset); such a release springs back. No new values.Authority
spec:AST-094: one touch rule (FR13), measured values (FR1, from feat(Toast): the swipe follows iOS notification banners under a finger #8121); a release moving back springs back (FR37) from its velocity (FR38).design:reduced-motion: the cross-fade.Owner decisions (proposed; pending owner review):
Change and evidence
toastSwipe.ts:followOffsetfollows either way; a stretched card's release never dismisses.Scope
Size: +190 / −25 (tests 144). Toast's import (the CI's measurement): JS 93,254 → 93,267 B gzip; no CSS change.
Testing
pnpm exec vitest run packages/core/src/Toast/ packages/core/src/motion/: 830 pass (29 files), with no unhandled error (vitest exits 0); the turn-back tests (a turn-back after the swipe began at 10 pt) fail on feat(Toast): the swipe follows iOS notification banners under a finger #8121's head, and the flick-back ones (a card pulled 40 px down, flicked 20 px back up in 30 ms, springs back;isDismissRelease(followOffset(-80), flickVelocity)is false) fail on the previous head. A drag that turns back short of rest and lifts moving back springs back (feat(Toast): the swipe follows iOS notification banners under a finger #8121'sspec:AST-094FR37 test).pnpm test:interaction ToastSwipe: Chromium 26/26; WebKit (the harness container script) 21 passed, 5 skips (3 Chromium-only; 2 Chromium pen tests). Real touch with a coarse pointer, no engine emulation and no native scroll.pnpm build, the Storybook build,pnpm typecheckandCI=true pnpm lint(0 errors): 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.