@oxyhq/bloom 0.54.0 → 0.55.0

package/src/__tests__/toast-stack-hover.test.ts

@@ -0,0 +1,92 @@
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { renderHook } from '@testing-library/react-native';
+
+import {
+  isStackHovered as isStackHoveredNative,
+  useStackHover as useStackHoverNative,
+} from '../toast/use-stack-hover.native';
+import { isStackHovered, useStackHover } from '../toast/use-stack-hover';
+
+/**
+ * The hover trigger's platform split. jest resolves the WEB file by default (as
+ * every non-Metro bundler and a consumer's `tsc` do), so `Toaster.test.tsx` covers
+ * the web behaviour through real rows; this file covers the NATIVE fork, which has
+ * no behaviour to exercise, plus the source properties that keep the split honest.
+ */
+const SRC = join(__dirname, '..');
+const read = (rel: string) => readFileSync(join(SRC, rel), 'utf8');
+const code = (rel: string) =>
+  read(rel)
+    .replace(/\/\*[\s\S]*?\*\//g, '')
+    .replace(/^\s*\/\/.*$/gm, '');
+
+describe('stack hover platform split', () => {
+  it('native hands back no handlers at all, for either stacking value', () => {
+    const stacked = renderHook(() => useStackHoverNative({ enableStacking: true }));
+    const flat = renderHook(() => useStackHoverNative({ enableStacking: false }));
+
+    expect(Object.keys(stacked.result.current)).toEqual([]);
+    expect(Object.keys(flat.result.current)).toEqual([]);
+  });
+
+  it('native returns ONE object identity, so the row box props never churn', () => {
+    const { result, rerender } = renderHook(() =>
+      useStackHoverNative({ enableStacking: true }),
+    );
+    const first = result.current;
+    rerender(undefined);
+
+    expect(result.current).toBe(first);
+  });
+
+  it('nothing ever hovers on native', () => {
+    expect(isStackHoveredNative()).toBe(false);
+  });
+
+  it('web hands back both pointer handlers', () => {
+    const { result } = renderHook(() => useStackHover({ enableStacking: true }));
+
+    expect(typeof result.current.onPointerEnter).toBe('function');
+    expect(typeof result.current.onPointerLeave).toBe('function');
+  });
+
+  it('web is not hovered until a pointer says so', () => {
+    expect(isStackHovered()).toBe(false);
+  });
+
+  it('the native fork carries no hover state, no timer and no store import', () => {
+    const native = code('toast/use-stack-hover.native.ts');
+    // A native bundle must not ship the web file's module-level latch or its
+    // pending-leave timeout, which is the whole reason this is a file split rather
+    // than a `Platform.OS` branch.
+    expect(native).not.toMatch(/setTimeout/);
+    expect(native).not.toMatch(/from '\.\/toast-store'/);
+    expect(native).not.toMatch(/pointerType/);
+  });
+
+  it('the web fork gates on a mouse pointer', () => {
+    const web = code('toast/use-stack-hover.ts');
+    // Touch fires enter before pointerdown and leave after pointerup, so without
+    // this every tap on a touch-capable web device would expand then collapse.
+    expect(web).toMatch(/pointerType === 'mouse'/);
+  });
+
+  it('the web fork drives the store rather than a second expansion mechanism', () => {
+    const web = code('toast/use-stack-hover.ts');
+    expect(web).toMatch(/toastStore\.expand\(\)/);
+    expect(web).toMatch(/toastStore\.collapse\(\)/);
+    // With stacking off there is nothing to expand, so the pointer pauses directly.
+    expect(web).toMatch(/toastStore\.pauseAllTimers\(\)/);
+    expect(web).toMatch(/toastStore\.resumeAllTimers\(\)/);
+    // No parallel state: expansion lives in the store and nowhere else.
+    expect(web).not.toMatch(/useState/);
+    expect(web).not.toMatch(/isExpanded\s*=/);
+  });
+
+  it('the row box is the hover target and the press toggle stands down for it', () => {
+    expect(code('toast/ToastSwipeHandler.tsx')).toMatch(/\{\.\.\.hoverProps\}/);
+    // Hover owns expansion on web; a click must not toggle it shut again.
+    expect(code('toast/ToastRow.tsx')).toMatch(/else if \(!isStackHovered\(\)\)/);
+  });
+});

package/src/__tests__/toast-store.test.ts

@@ -17,6 +17,9 @@ describe('toastStore', () => {
   });
 
   afterEach(() => {
+    // The expansion hold is registered by whoever owns hovering, so a test that
+    // installs one must not leak it into the next.
+    toastStore.setExpansionHold(null);
     toastStore.dismissToast(undefined);
     // Drains the hide-overlay timeout so the next test starts from a clean state.
     jest.runOnlyPendingTimers();
@@ -573,6 +576,14 @@ describe('toastStore', () => {
       expect(toastStore.getSnapshot().isExpanded).toBe(true);
     });
 
+    /**
+     * The auto-collapse rule. A lone row renders identically expanded or collapsed
+     * (`toast-position-utils.test.ts`: "a single row is unmoved by expansion"), while
+     * `isExpanded` keeps every timer paused — so collapsing at one row is invisible
+     * and is the only thing that stops that last toast hanging on screen forever.
+     * The exception is a stack something is HOLDING open, which on web is a pointer
+     * resting on it.
+     */
     it('auto-collapses once only one toast is left', () => {
       const first = toastStore.addToast({ title: 'a' });
       toastStore.addToast({ title: 'b' });
@@ -581,6 +592,67 @@ describe('toastStore', () => {
       toastStore.dismissToast(first, 'onDismiss');
       expect(toastStore.getSnapshot().isExpanded).toBe(false);
     });
+
+    it('resumes the surviving toast on that auto-collapse, so it cannot hang', () => {
+      const first = toastStore.addToast({ title: 'a', duration: 1000 });
+      toastStore.addToast({ title: 'b', duration: 1000 });
+      toastStore.expand();
+
+      toastStore.dismissToast(first, 'onDismiss');
+      jest.advanceTimersByTime(ENTERING_ANIMATION_DURATION + 1000);
+
+      expect(toastStore.getSnapshot().toasts).toHaveLength(0);
+    });
+
+    it('stays expanded while more than one toast is left', () => {
+      const first = toastStore.addToast({ title: 'a' });
+      toastStore.addToast({ title: 'b' });
+      toastStore.addToast({ title: 'c' });
+      toastStore.expand();
+
+      toastStore.dismissToast(first, 'onDismiss');
+      expect(toastStore.getSnapshot().isExpanded).toBe(true);
+    });
+
+    it('does not auto-collapse a stack something is holding open', () => {
+      toastStore.setExpansionHold(() => true);
+      const first = toastStore.addToast({ title: 'a', duration: 1000 });
+      toastStore.addToast({ title: 'b', duration: 1000 });
+      toastStore.expand();
+
+      toastStore.dismissToast(first, 'onDismiss');
+
+      expect(toastStore.getSnapshot().isExpanded).toBe(true);
+      // Still paused: resuming here is what would let a hovered toast expire under
+      // the cursor.
+      jest.advanceTimersByTime(1_000_000);
+      expect(toastStore.getSnapshot().toasts).toHaveLength(1);
+    });
+
+    it('resets an EMPTY stack even while held', () => {
+      // Nothing can hold open a stack that no longer exists, and once the rows
+      // unmount no `pointerleave` ever arrives to release the hold — so this must
+      // not depend on it.
+      toastStore.setExpansionHold(() => true);
+      const only = toastStore.addToast({ title: 'a' });
+      toastStore.expand();
+
+      toastStore.dismissToast(only, 'onDismiss');
+
+      expect(toastStore.getSnapshot().toasts).toHaveLength(0);
+      expect(toastStore.getSnapshot().isExpanded).toBe(false);
+    });
+
+    it('stops consulting a hold once it is cleared', () => {
+      toastStore.setExpansionHold(() => true);
+      toastStore.setExpansionHold(null);
+      const first = toastStore.addToast({ title: 'a' });
+      toastStore.addToast({ title: 'b' });
+      toastStore.expand();
+
+      toastStore.dismissToast(first, 'onDismiss');
+      expect(toastStore.getSnapshot().isExpanded).toBe(false);
+    });
   });
 
   describe('subscription', () => {

package/src/tab-bar/TabBar.stories.tsx

@@ -1,5 +1,5 @@
 import React, { useState, type PropsWithChildren } from 'react';
-import { ScrollView, Text, View } from 'react-native';
+import { Pressable, ScrollView, Text, View } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import Animated from 'react-native-reanimated';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
@@ -177,6 +177,52 @@ function MinimizeScreen() {
   );
 }
 
+/**
+ * Body of {@link NoSelection} — the consumer shape that exposed the bug.
+ *
+ * An index derived from the current route is `-1` on every screen outside the
+ * tab set, and the capsule used to slide one item-width to the LEFT of the first
+ * tab and poke out of the pill. What to watch for, none of which jest can see:
+ * it fades out WHERE IT STANDS rather than travelling off, no glyph or label
+ * stays lit while it is gone, and picking a tab again fades it back in AT that
+ * tab instead of sliding across the bar to reach it. Scrubbing from the
+ * off-tab state arms it under the finger.
+ */
+function NoSelectionScreen() {
+  const { colors } = useTheme();
+  const [activeIndex, setActiveIndex] = useState(0);
+  const offTab = activeIndex < 0;
+  return (
+    <Screen>
+      <ScrollView contentContainerStyle={CONTENT_STYLE}>
+        <Pressable
+          onPress={() => setActiveIndex(offTab ? 0 : -1)}
+          style={{
+            padding: 16,
+            borderRadius: 16,
+            borderWidth: 1,
+            borderColor: colors.border,
+            backgroundColor: colors.backgroundSecondary,
+          }}
+        >
+          <Text style={{ color: colors.text, fontSize: 15, fontWeight: '600' }}>
+            {offTab ? 'Back to the Home tab' : 'Open a screen that is not a tab (index -1)'}
+          </Text>
+        </Pressable>
+        <Feed
+          heading={offTab ? 'Not a tab' : (ITEMS[activeIndex]?.label ?? 'Feed')}
+          caption={
+            offTab
+              ? 'No tab is selected: the highlight has faded out where it stood and nothing is tinted. Tap a tab — it fades back in there rather than sliding across — or drag across the bar to arm it under the finger.'
+              : 'Open the screen above to leave the tab set, the way a post detail or a settings route does.'
+          }
+        />
+      </ScrollView>
+      <ControlledBar activeIndex={activeIndex} onIndexChange={setActiveIndex} />
+    </Screen>
+  );
+}
+
 function ThemeOverrideScreen() {
   const { colors } = useTheme();
   const [activeIndex, setActiveIndex] = useState(1);
@@ -211,6 +257,11 @@ export const MinimizeOnScroll: Story = {
   ),
 };
 
+/** No tab selected (`activeIndex` naming no tab): the highlight fades out in place. */
+export const NoSelection: Story = {
+  render: () => <NoSelectionScreen />,
+};
+
 /** A partial `theme` override on top of the token-derived defaults. */
 export const ThemeOverride: Story = {
   render: () => <ThemeOverrideScreen />,

package/src/tab-bar/TabBarBase.tsx

@@ -32,6 +32,7 @@ import Animated, {
   useAnimatedStyle,
   useSharedValue,
   withSpring,
+  withTiming,
   type SharedValue,
 } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -44,6 +45,7 @@ import {
   BLUR_BLEED,
   EXPANDED_HEIGHT,
   HIGHLIGHT_EXPANDED,
+  HIGHLIGHT_FADE,
   HIGHLIGHT_MINIMIZED,
   ICON_SIZE,
   ITEM_GAP,
@@ -69,6 +71,12 @@ import type { TabBarButtonProps, TabBarProps, TabBarTheme } from './types';
 type BarContextValue = {
   /** Live highlight position, in tab units. Fractional while scrubbing. */
   slideIndex: SharedValue<number>;
+  /**
+   * Highlight visibility, 0–1. Below 1 only when the bar has NO selection (an
+   * `activeIndex` that names no tab). Buttons fold it into their own active
+   * tint so a faded-out capsule leaves no glyph and no label lit.
+   */
+  highlightOpacity: SharedValue<number>;
   /** True while a scrub is in progress — the finger owns the highlight. */
   isDragging: SharedValue<boolean>;
   theme: TabBarTheme;
@@ -107,10 +115,34 @@ function TabBarBody({
   const { width: windowWidth } = useWindowDimensions();
   const minimized = useMinimizeState();
   const progress = minimized.progress;
+  const tabCount = Math.max(Children.count(children), 1);
+
+  // Is a tab selected at all?
+  //
+  // The two states this distinguishes are NOT the same thing, and collapsing
+  // them would silently kill the highlight for every router consumer:
+  //
+  //   - `activeIndex === undefined` is the FOCUS-DRIVEN path. The bar is not
+  //     the writer at all — each `TabBarButton` supplies `isFocused` and drives
+  //     the highlight itself (that is how the adapter keeps it correct through
+  //     deep links and back gestures), so from the bar's side there is always a
+  //     selection and the highlight is always visible.
+  //   - NO SELECTION is `activeIndex` being a number that names no tab:
+  //     negative, past the last tab, or fractional. Every consumer whose route
+  //     set is larger than its tab set produces one — a `usePathname()`-derived
+  //     index is -1 on every screen that is not a tab — and the highlight must
+  //     then be gone rather than parked outside the pill.
+  const hasSelection =
+    activeIndex === undefined ||
+    (Number.isInteger(activeIndex) && activeIndex >= 0 && activeIndex < tabCount);
+
   const slideIndex = useSharedValue(0);
+  // Seeded from the CURRENT state, not from 0: a bar that mounts with a
+  // selection must show its highlight on the first frame exactly as it always
+  // has, and one that mounts without a selection must never flash it.
+  const highlightOpacity = useSharedValue(hasSelection ? 1 : 0);
   const isDragging = useSharedValue(false);
   const lastTicked = useSharedValue(-1);
-  const tabCount = Math.max(Children.count(children), 1);
   const theme = useTabBarTheme(themeOverrides);
   const impact = useHaptics();
 
@@ -160,8 +192,26 @@ function TabBarBody({
     if (activeIndex === undefined) return;
     // While scrubbing the finger owns the highlight; never fight it.
     if (isDragging.value) return;
-    slideIndex.value = withSpring(activeIndex, SLIDE_SPRING);
-  }, [activeIndex, slideIndex, isDragging]);
+    if (!hasSelection) {
+      // Fade out where it stands. `slideIndex` is deliberately left alone: it
+      // is the highlight's POSITION, and there is no position that means
+      // "nowhere" — springing it to a sentinel would drag the capsule across
+      // the bar on its way out, dragging the active tint over every tab it
+      // passed. Visibility is the thing that changed, so visibility is the only
+      // thing that animates.
+      highlightOpacity.value = withTiming(0, HIGHLIGHT_FADE);
+      return;
+    }
+    // Coming back from fully hidden the capsule APPEARS at the new tab instead
+    // of travelling to it: a slide says "the selection moved from here to
+    // there", and while it was invisible there was no "here" — sliding from the
+    // stale index would animate out of a position the user never saw, and would
+    // light up every tab in between on the way. Interrupted mid-fade it is
+    // still on screen, so from there it slides as it always does.
+    slideIndex.value =
+      highlightOpacity.value === 0 ? activeIndex : withSpring(activeIndex, SLIDE_SPRING);
+    highlightOpacity.value = withTiming(1, HIGHLIGHT_FADE);
+  }, [activeIndex, hasSelection, slideIndex, highlightOpacity, isDragging]);
 
   // Scrubbing: the highlight tracks the finger 1:1 while dragging (no spring —
   // it must feel attached), haptic ticks fire on boundary crossings, and
@@ -192,8 +242,17 @@ function TabBarBody({
     const pan = Gesture.Pan()
       .activeOffsetX([-6, 6])
       .failOffsetY([-14, 14])
-      .onStart(() => {
+      .onStart((event) => {
         isDragging.value = true;
+        // Arming from the no-selection state: a hidden capsule has no position
+        // the finger can pick up, so it starts under the finger rather than at
+        // the index it faded out on — which would also make the first boundary
+        // tick fire against a phantom position. Mid-fade it is still visible,
+        // so it keeps the position it is at, exactly as it always has.
+        if (highlightOpacity.value === 0) {
+          slideIndex.value = indexAtX(event.x, progress.value);
+        }
+        highlightOpacity.value = withTiming(1, HIGHLIGHT_FADE);
         lastTicked.value = Math.round(slideIndex.value);
         // Scrubbing is a deliberate bar interaction — surface the labels.
         setMinimized(minimized, 0);
@@ -230,7 +289,11 @@ function TabBarBody({
           return;
         }
         const index = Math.round(indexAtX(event.x, progress.value));
-        slideIndex.value = withSpring(index, SLIDE_SPRING);
+        // Same rule as the controlled path above: appear at the tapped tab when
+        // hidden, slide to it when already on screen.
+        slideIndex.value =
+          highlightOpacity.value === 0 ? index : withSpring(index, SLIDE_SPRING);
+        highlightOpacity.value = withTiming(1, HIGHLIGHT_FADE);
         setMinimized(minimized, 0);
         runOnJS(selectIndex)(index);
       });
@@ -263,6 +326,7 @@ function TabBarBody({
     isDragging,
     lastTicked,
     slideIndex,
+    highlightOpacity,
     minimized,
     progress,
   ]);
@@ -344,9 +408,14 @@ function TabBarBody({
       width: itemWidth,
       borderRadius: height / 2,
       top: (barHeight - height) / 2,
+      // With no selection there is nothing to highlight, and the capsule has to
+      // stop being drawn: `slideIndex` is a position in tab units, so an
+      // out-of-range one is a real place — one item-width to the LEFT of the
+      // first tab, i.e. half outside the pill — not an absence.
+      opacity: highlightOpacity.value,
       transform: [{ translateX: ROW_PAD_H + itemWidth * slideIndex.value }],
     };
-  }, [progress, slideIndex, barOuterWidth, tabCount]);
+  }, [progress, slideIndex, highlightOpacity, barOuterWidth, tabCount]);
 
   // Shared with `useTabBarFootprint`, so a consumer accounting for the bar in
   // its own layout can never drift from where the bar actually sits.
@@ -366,8 +435,8 @@ function TabBarBody({
   const constrainedWrapStyle: ViewStyle | null =
     maxWidth === undefined ? null : { width: barOuterWidth, alignSelf: 'center' };
   const barContext = useMemo(
-    () => ({ slideIndex, isDragging, theme, activeIndex, selectIndex }),
-    [slideIndex, isDragging, theme, activeIndex, selectIndex],
+    () => ({ slideIndex, highlightOpacity, isDragging, theme, activeIndex, selectIndex }),
+    [slideIndex, highlightOpacity, isDragging, theme, activeIndex, selectIndex],
   );
 
   return (
@@ -431,6 +500,7 @@ function TabBarButtonBody({
   const standaloneTheme = useTabBarTheme();
   const theme = bar?.theme ?? standaloneTheme;
   const slideIndex = bar?.slideIndex;
+  const highlightOpacity = bar?.highlightOpacity;
   // The two paths meet here: an explicit `isFocused` (router adapter) wins;
   // otherwise focus comes from the bar's controlled `activeIndex`.
   const focused = isFocused ?? (bar?.activeIndex === index);
@@ -449,29 +519,35 @@ function TabBarButtonBody({
   // Tint follows the sliding highlight, not navigation focus: whatever the pill
   // is over lights up — live while scrubbing, traveling on taps. Without a bar
   // there is nothing to follow, so it falls back to plain focus.
+  //
+  // Scaled by the highlight's own visibility, so a bar with NO selection leaves
+  // nothing lit: distance alone would keep the tab the capsule faded out on
+  // fully tinted, which is the same bug as a stray capsule wearing a different
+  // hat — a tab that looks selected while nothing is.
   // (Deps: see the CRITICAL note in `TabBarBody`.)
-  const activeGlyphStyle = useAnimatedStyle(
-    () => ({
-      opacity: slideIndex ? 1 - Math.min(Math.abs(slideIndex.value - index), 1) : focused ? 1 : 0,
-    }),
-    [slideIndex, index, focused],
-  );
-
-  const labelStyle = useAnimatedStyle(
-    () => ({
-      opacity: interpolate(progress.value, [0, 0.4], [1, 0], Extrapolation.CLAMP),
-      color: slideIndex
-        ? interpolateColor(
-            Math.min(Math.abs(slideIndex.value - index), 1),
-            [0, 1],
-            [theme.activeTint, theme.inactiveTint],
-          )
-        : focused
-          ? theme.activeTint
-          : theme.inactiveTint,
-    }),
-    [progress, slideIndex, index, focused, theme],
-  );
+  const activeGlyphStyle = useAnimatedStyle(() => {
+    if (!slideIndex || !highlightOpacity) return { opacity: focused ? 1 : 0 };
+    const proximity = 1 - Math.min(Math.abs(slideIndex.value - index), 1);
+    return { opacity: highlightOpacity.value * proximity };
+  }, [slideIndex, highlightOpacity, index, focused]);
+
+  const labelStyle = useAnimatedStyle(() => {
+    const opacity = interpolate(progress.value, [0, 0.4], [1, 0], Extrapolation.CLAMP);
+    if (!slideIndex || !highlightOpacity) {
+      return { opacity, color: focused ? theme.activeTint : theme.inactiveTint };
+    }
+    // Same quantity as the glyph crossfade above, so a label can never disagree
+    // with the icon it sits under.
+    const proximity = 1 - Math.min(Math.abs(slideIndex.value - index), 1);
+    return {
+      opacity,
+      color: interpolateColor(
+        highlightOpacity.value * proximity,
+        [0, 1],
+        [theme.inactiveTint, theme.activeTint],
+      ),
+    };
+  }, [progress, slideIndex, highlightOpacity, index, focused, theme]);
 
   // Height is animated EXPLICITLY (not derived from children) so the icon stays
   // perfectly centered every frame — layout-driven sizing lags a frame behind
@@ -499,7 +575,13 @@ function TabBarButtonBody({
       onPress={(event) => {
         // The bar's GestureDetector normally consumes touches; this still fires
         // for assistive-technology activation (VoiceOver) and keyboard focus.
-        if (bar) bar.slideIndex.value = withSpring(index, SLIDE_SPRING);
+        if (bar) {
+          // Appear at the tab when hidden, slide to it when visible — the same
+          // rule the tap gesture and the controlled path follow.
+          bar.slideIndex.value =
+            bar.highlightOpacity.value === 0 ? index : withSpring(index, SLIDE_SPRING);
+          bar.highlightOpacity.value = withTiming(1, HIGHLIGHT_FADE);
+        }
         setMinimized(minimized, 0);
         // Controlled path only. On the focus-driven path the trigger's own
         // `onPress` below performs the navigation, so reporting the selection

package/src/tab-bar/shared.ts

@@ -79,6 +79,18 @@ export function tabBarBottomGap(bottomInset: number): number {
  */
 export const SLIDE_SPRING = { duration: 420, dampingRatio: 0.82 };
 
+/**
+ * Fade for the highlight coming and going when the selection does — an
+ * `activeIndex` that names no tab (see `TabBarProps.activeIndex`).
+ *
+ * A timing, not a spring, and deliberately shorter than {@link SLIDE_SPRING}:
+ * appearing and disappearing is a change of STATE, not a movement, so it must
+ * not read as a second animation racing the slide. The capsule fades where it
+ * stands — moving it out of view instead would drag it the length of the bar on
+ * its way out and sweep the active tint across every tab it passed.
+ */
+export const HIGHLIGHT_FADE = { duration: 160 };
+
 /**
  * How long a press must be held before `onIndexLongPress` fires.
  *

package/src/tab-bar/types.ts

@@ -78,6 +78,18 @@ export type TabBarProps = ViewProps & {
    * highlight and springs it here whenever this changes. Use this when there is
    * no router in play; the router adapter uses the per-button `isFocused` path
    * instead (see {@link TabBarButtonProps.isFocused}) and must NOT pass this.
+   *
+   * An index that names NO tab — negative, past the last tab, or fractional —
+   * means no selection: the highlight fades out where it stands and no tab is
+   * left tinted. Pass one whenever the current screen is not a tab; an index
+   * derived from the route (`TABS.findIndex(…)`) is `-1` on every such screen
+   * and is correct as-is. Returning to a real index fades the highlight back in
+   * AT that tab rather than sliding to it — while it was invisible there was no
+   * position to travel from — and scrubbing still arms it under the finger.
+   *
+   * OMITTING this prop is a different thing entirely and does not hide
+   * anything: that is the focus-driven path, where each button drives the
+   * highlight from its own `isFocused`.
    */
   activeIndex?: number;
   /**

package/src/toast/Toast.stories.tsx

@@ -26,6 +26,14 @@ import type { ToasterProps } from './types';
  * unstacked they must be ~54px apart (46px measured row + 8px gap), collapsed-
  * stack ~8px apart. Equal `y` values mean the rows are drawn on top of each
  * other — the failure this shape exists to catch.
+ *
+ * `Sequential*` gives you BOTH durations for a reason. The `One`/`Two` buttons use
+ * `duration: Infinity` so a row stays put while you inspect it — but that starts no
+ * auto-close timer at all, so nothing driven from those buttons can see the timer
+ * path. `One 3s`/`Two 3s` fire at the outlet's real duration; drive those when the
+ * question is a row's LIFETIME rather than its position. (`Toaster.test.tsx`'s
+ * "sequential toasts at the default duration" block covers the render set there;
+ * only a browser can judge the geometry.)
  */
 const meta: Meta = {
   title: 'Components/Toast',
@@ -249,6 +257,8 @@ function SequentialDemo({ outlet }: { outlet?: ToasterProps }) {
     <Demo outlet={outlet}>
       <Button onPress={() => toast('Row one', { duration: Infinity })}>One</Button>
       <Button onPress={() => toast('Row two', { duration: Infinity })}>Two</Button>
+      <Button onPress={() => toast('Row one')}>One 3s</Button>
+      <Button onPress={() => toast('Row two')}>Two 3s</Button>
     </Demo>
   );
 }

package/src/toast/ToastRow.tsx

@@ -60,6 +60,7 @@ import {
 } from './constants';
 import { useDynamicToastContext, useToastContext } from './context';
 import { calculateStackScaleX } from './position-utils';
+import { isStackHovered } from './use-stack-hover';
 import { useAnimatedTarget } from './use-animated-target';
 import { ToastContent } from './ToastContent';
 import { ToastSwipeHandler } from './ToastSwipeHandler';
@@ -354,18 +355,41 @@ export const ToastRow = React.forwardRef<ToastRef, ToastRowProps>(
       }
     }, [id, isExpanded]);
 
+    /**
+     * INVARIANT: NO TAP ON A STACKED ROW IS INERT. Every one of them dismisses,
+     * expands or collapses.
+     *
+     * The close-button strip dismisses only when a ✕ is actually THERE to aim at,
+     * which is exactly `closeButton && dismissible` — the same condition
+     * `ToastContent` renders it under, and nothing to do with expansion. Anything
+     * else in the strip falls through to the row's own behaviour rather than being
+     * swallowed: on a collapsed stack it expands, on an expanded one it collapses.
+     *
+     * Guarding the strip on `isExpanded` (as this did until now) made two taps do
+     * nothing at all — the whole strip at default config, where `closeButton` is
+     * `false` so the dismiss branch is unreachable, and the VISIBLE ✕ on a
+     * collapsed stack's front row. On Android that second one has no fallback:
+     * the RNGH tap wins the race against `ToastContent`'s nested close Pressable,
+     * so the ✕ never got its own press either.
+     *
+     * `x` is relative to the row, which is CAPPED at `TOAST_MAX_ROW_WIDTH`.
+     * Measuring the strip from the window edge would put it outside the row
+     * entirely on a wide viewport — do not "simplify" this back to `screenWidth`.
+     *
+     * W13 — the expansion TOGGLE stands down while a mouse is hovering the stack,
+     * because hover already owns expansion there (`use-stack-hover`). Without this
+     * a desktop click would collapse the stack under the cursor and resume the
+     * timers hover had just paused. Dismissing is unaffected, `onPress` always
+     * runs, and `isStackHovered()` is always false on native and on any touch web
+     * device — so press remains the only trigger wherever there is no pointer.
+     */
     const onSwipePress = React.useCallback(
       ({ x }: { x: number; y: number }) => {
         if (enableStacking && numberOfToasts > 1 && position !== 'center') {
-          // On Android the RNGH tap wins the race against the nested Pressable,
-          // so a press in the close-button strip has to dismiss explicitly.
-          // `x` is relative to the row, which is capped — measuring the strip
-          // from the window edge would put it outside the row on a wide viewport.
-          if (x > rowWidth - CLOSE_BUTTON_HIT_AREA) {
-            if (isExpanded && closeButton && dismissible) {
-              onDismiss(id);
-            }
-          } else {
+          const inCloseStrip = x > rowWidth - CLOSE_BUTTON_HIT_AREA;
+          if (inCloseStrip && closeButton && dismissible) {
+            onDismiss(id);
+          } else if (!isStackHovered()) {
             toggleExpand();
           }
         }
@@ -376,7 +400,6 @@ export const ToastRow = React.forwardRef<ToastRef, ToastRowProps>(
         numberOfToasts,
         position,
         rowWidth,
-        isExpanded,
         closeButton,
         dismissible,
         onDismiss,