@oxyhq/bloom 0.51.1 → 0.52.1

package/src/tab-bar/glyph.tsx

@@ -2,8 +2,8 @@
  * Ported from expo-glass-tabs v0.1.1 — src/glass-tab-bar.tsx
  * (MIT © 2026 David Mokos). See the top-level NOTICE.
  *
- * NEUTRAL default variant of a tab glyph: renders the item's own `icon` node,
- * tinted for this crossfade layer.
+ * NEUTRAL default variant of a tab glyph: renders the item's own `icon` node —
+ * or its `activeIcon` on the active layer — tinted for this crossfade layer.
  *
  * `item.icon` is the primary icon API for the whole family — a Bloom icon
  * element, exactly like `TabsTrigger` and `FrostedIconButton` take. `sfSymbol`
@@ -17,13 +17,17 @@ import { View } from 'react-native';
 import { applyIconColor } from '../frosted-icon-button/shared';
 import type { TabBarGlyphProps } from './shared';
 
-export function TabBarGlyph({ item, tint, size }: TabBarGlyphProps) {
+export function TabBarGlyph({ item, tint, size, active }: TabBarGlyphProps) {
   // The tint is injected as the icon's `fill` FALLBACK — an icon that sets its
   // own `fill` (a brand mark, say) keeps it, so the crossfade layers simply
   // render it twice at full opacity and it never flickers.
+  //
+  // `activeIcon` is what makes the crossfade able to swap NODES: an icon set
+  // whose selected state is a different SHAPE (outline → filled) cannot be
+  // expressed by tinting one node two ways. Absent, the layer renders `icon`.
   return (
     <View style={{ height: size, alignItems: 'center', justifyContent: 'center' }}>
-      {applyIconColor(item.icon, tint)}
+      {applyIconColor(active ? (item.activeIcon ?? item.icon) : item.icon, tint)}
     </View>
   );
 }

package/src/tab-bar/index.ts

@@ -29,4 +29,5 @@ export {
   useTabBarMinimized,
 } from './minimize-context';
 export type { MinimizeState } from './minimize-context';
+export { useTabBarFootprint } from './use-footprint';
 export type { TabBarButtonProps, TabBarItem, TabBarProps, TabBarTheme } from './types';

package/src/tab-bar/index.web.tsx

@@ -31,4 +31,5 @@ export {
   useTabBarMinimized,
 } from './minimize-context';
 export type { MinimizeState } from './minimize-context';
+export { useTabBarFootprint } from './use-footprint';
 export type { TabBarButtonProps, TabBarItem, TabBarProps, TabBarTheme } from './types';

package/src/tab-bar/shared.ts

@@ -51,6 +51,27 @@ export const BLUR_BLEED = 44;
 /** Label type size. Small by design — the icon carries the meaning. */
 export const LABEL_FONT_SIZE = 9.5;
 
+/**
+ * How much of the bottom safe-area inset the bar's own gap absorbs. The pill
+ * already floats clear of the content, so sitting the FULL inset below it
+ * strands it in the middle of the screen on a home-indicator device.
+ */
+const SAFE_AREA_ABSORBED = 16;
+/** Gap floor, for a device (or a browser) reporting no bottom inset at all. */
+const MIN_BOTTOM_GAP = 12;
+
+/**
+ * Vertical gap between the bottom of the pill and the bottom of the window.
+ *
+ * The safe-area inset is folded in HERE, which is why anything accounting for
+ * the bar in its own layout must go through `useTabBarFootprint` (which derives
+ * its number from this same function) rather than adding `insets.bottom` to a
+ * hardcoded height — that double-counts the inset.
+ */
+export function tabBarBottomGap(bottomInset: number): number {
+  return Math.max(bottomInset - SAFE_AREA_ABSORBED, MIN_BOTTOM_GAP);
+}
+
 /**
  * Slide spring: interruptible by design — rapid tab-hopping retargets with
  * preserved velocity. Slight under-damping gives the pill a tiny settle, safe
@@ -58,6 +79,15 @@ export const LABEL_FONT_SIZE = 9.5;
  */
 export const SLIDE_SPRING = { duration: 420, dampingRatio: 0.82 };
 
+/**
+ * How long a press must be held before `onIndexLongPress` fires.
+ *
+ * Comfortably above the tap gesture's own 400ms ceiling: the two can never both
+ * be candidates at the same instant, so arming the long press cannot cost the
+ * bar a tap. Matches the platform long-press feel (iOS ~0.5s).
+ */
+export const LONG_PRESS_MIN_DURATION = 500;
+
 // ---------------------------------------------------------------------------
 //  Theme
 // ---------------------------------------------------------------------------
@@ -156,4 +186,12 @@ export interface TabBarGlyphProps {
   tint: string;
   /** Rendered icon size in px ({@link ICON_SIZE}). */
   size: number;
+  /**
+   * Which crossfade layer this is: `false` for the inactive one underneath,
+   * `true` for the one fading in on top. The active layer renders
+   * `item.activeIcon` when the item has one, so a set that expresses selection
+   * by shape (outline → filled) crossfades between two different nodes rather
+   * than between two tints of the same node.
+   */
+  active: boolean;
 }

package/src/tab-bar/surface.web.tsx

@@ -19,9 +19,10 @@
  * Browsers without `backdrop-filter` simply skip it and are left with the
  * translucent tint — a graceful degradation that needs no `@supports` rule.
  */
-import { StyleSheet, type ViewStyle } from 'react-native';
+import { StyleSheet } from 'react-native';
 import Animated from 'react-native-reanimated';
 
+import type { WebCssStyle } from '../styles/web-view-style';
 import type { TabBarSurfaceProps } from './shared';
 
 /**
@@ -35,10 +36,10 @@ const GLASS_FILTER = `blur(${GLASS_BLUR_PX}px) saturate(180%)`;
 
 // Web-only CSS, unknown to React Native's `ViewStyle`. Both spellings are set:
 // Safari still needs the prefixed property for `backdrop-filter`.
-const glassFilterStyle = {
+const glassFilterStyle: WebCssStyle = {
   backdropFilter: GLASS_FILTER,
   WebkitBackdropFilter: GLASS_FILTER,
-} as ViewStyle;
+};
 
 export function TabBarSurface({ theme, style }: TabBarSurfaceProps) {
   return (

package/src/tab-bar/types.ts

@@ -26,9 +26,31 @@ export type TabBarItem = {
    * type. This is the primary icon API — same convention as `Tabs`/`TabsTrigger`
    * and `FrostedIconButton`. The bar renders it TWICE (an inactive layer with the
    * active layer crossfading on top), injecting the layer's tint as the icon's
-   * `fill` unless the element already sets one.
+   * `fill` unless the element already sets one. See {@link TabBarItem.activeIcon}
+   * for a set whose selected state is a different shape rather than a tint.
    */
   icon: ReactNode;
+  /**
+   * Optional second node rendered by the ACTIVE crossfade layer instead of
+   * `icon`; without it that layer renders `icon` again, which is the original
+   * behaviour.
+   *
+   * For icon sets that express selection by SHAPE rather than by tint — an
+   * outline glyph that becomes a filled one, with a different path — a tint
+   * crossfade cannot say what the set says, because both layers would draw the
+   * same shape in two colors. Supplying the filled variant here makes the
+   * existing crossfade swap NODES, so the outline dissolves into the fill.
+   *
+   * It is also the escape hatch for an icon that ignores the injected tint: the
+   * bar tints a glyph by cloning it with a `fill` prop (see `applyIconColor`),
+   * so an icon set that paints from a `color` prop instead never lights up, with
+   * no error. Pre-color both nodes yourself and the crossfade still works.
+   *
+   * On iOS an item carrying `sfSymbol` renders the symbol on both layers and
+   * ignores this — a symbol is tinted natively, so the tint crossfade is the
+   * right expression there.
+   */
+  activeIcon?: ReactNode;
   /**
    * Optional SF Symbol name, used INSTEAD of `icon` on iOS only. A pure
    * enhancement handled solely in `glyph.native.tsx`; the neutral and web
@@ -63,6 +85,20 @@ export type TabBarProps = ViewProps & {
    * or by keyboard/assistive-technology activation of a `TabBarButton`.
    */
   onIndexChange?: (index: number) => void;
+  /**
+   * Called with the index under the finger when a tab is pressed and HELD.
+   *
+   * This is the only way to reach a long press on the bar: its gesture detector
+   * consumes the touches (that is what makes scrubbing possible), so a button's
+   * own `onLongPress` never fires for a real finger. The gesture is added to the
+   * bar's gesture race only when this prop is supplied — holding still for half
+   * a second on a bar without it keeps behaving exactly as before, and can still
+   * start a scrub.
+   *
+   * Long-pressing does NOT move the highlight or select the tab; it is a
+   * secondary action (an account switcher on the profile tab, say).
+   */
+  onIndexLongPress?: (index: number) => void;
   /** Partial override of the theme resolved from Bloom's color tokens. */
   theme?: Partial<TabBarTheme>;
   /**

package/src/tab-bar/use-footprint.ts

@@ -0,0 +1,50 @@
+/**
+ * How much room the floating bar physically takes at the bottom of the window.
+ *
+ * The bar is `position: absolute` over the content, so nothing accounts for it
+ * automatically — every screen under a tab layout has to keep its own content
+ * out from under the pill. That number is built from the bar's private geometry
+ * (its expanded height and the gap it holds off the window's bottom edge),
+ * which is exactly why it is exported as a hook: hardcoding it in an app
+ * silently drifts the moment the bar changes by a pixel.
+ *
+ * Platform-neutral, like the rest of the family — `react-native-safe-area-context`
+ * is already a required Bloom peer and is what the bar itself measures with.
+ */
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { EXPANDED_HEIGHT, tabBarBottomGap } from './shared';
+
+/**
+ * The vertical space the tab bar OCCUPIES above the bottom of the window, in
+ * px: its own height plus its own bottom offset, and nothing else.
+ *
+ * It is deliberately the raw footprint, with no clearance folded in. Clearance
+ * is a consumer decision and it differs per call site — a scroll view wants the
+ * footprint plus a breathing gap so the last row clears the pill, while a
+ * floating action button anchored by `bottom` already supplies its own gap and
+ * wants the footprint bare. Baking a margin in here would place that FAB too
+ * high and make one word mean two things inside a single file. Add your own:
+ *
+ * ```tsx
+ * const footprint = useTabBarFootprint();
+ *
+ * <Animated.ScrollView contentContainerStyle={{ paddingBottom: footprint + 12 }} />
+ * <Fab style={{ position: 'absolute', right: 16, bottom: footprint }} />
+ * ```
+ *
+ * The value ALREADY INCLUDES the bottom safe-area inset — the bar folds the
+ * inset into its own gap, so this is measured from the true window edge, not
+ * from the safe area. Never write `footprint + insets.bottom`: that counts the
+ * home indicator twice and strands a visible band of dead space under every
+ * list (114px accounted for a 76px bar on an iOS device or PWA). Whatever you
+ * add on top is your own clearance — never the inset a second time.
+ *
+ * It is the EXPANDED height, deliberately. The bar minimizes while scrolling
+ * down and re-expands on the way up, so measuring the minimized height would
+ * hide the end of a list the moment the user scrolled back to it.
+ */
+export function useTabBarFootprint(): number {
+  const insets = useSafeAreaInsets();
+  return tabBarBottomGap(insets.bottom) + EXPANDED_HEIGHT;
+}

package/src/toast/ToastRow.tsx

@@ -55,6 +55,7 @@ import {
   CLOSE_BUTTON_HIT_AREA,
   ENTERING_ANIMATION_DURATION,
   STACKING_ANIMATION_DURATION,
+  TOAST_MAX_ROW_WIDTH,
   toastDefaults,
 } from './constants';
 import { useDynamicToastContext, useToastContext } from './context';
@@ -224,6 +225,8 @@ export const ToastRow = React.forwardRef<ToastRef, ToastRowProps>(
     });
 
     const { width: screenWidth } = useWindowDimensions();
+    // The row is `width: '100%'` up to the cap, so this is its real width.
+    const rowWidth = Math.min(screenWidth, TOAST_MAX_ROW_WIDTH);
 
     const stackScaleX = useAnimatedTarget(
       calculateStackScaleX({
@@ -233,7 +236,7 @@ export const ToastRow = React.forwardRef<ToastRef, ToastRowProps>(
         position,
         isExpanded,
         stackGap,
-        screenWidth,
+        rowWidth,
       }),
       { duration: STACKING_ANIMATION_DURATION, easing: easeOutQuartFn },
     );
@@ -356,7 +359,9 @@ export const ToastRow = React.forwardRef<ToastRef, ToastRowProps>(
         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.
-          if (x > screenWidth - CLOSE_BUTTON_HIT_AREA) {
+          // `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);
             }
@@ -370,7 +375,7 @@ export const ToastRow = React.forwardRef<ToastRef, ToastRowProps>(
         enableStacking,
         numberOfToasts,
         position,
-        screenWidth,
+        rowWidth,
         isExpanded,
         closeButton,
         dismissible,

package/src/toast/ToastSwipeHandler.tsx

@@ -2,12 +2,18 @@
  * Derived from sonner-native v0.26.4 — src/gestures.tsx
  * (MIT © Gunnar Torfi Steinarsson). See the top-level NOTICE.
  *
- * W2 — the animated style reads `translate`, `direction`, `position`,
- * `windowWidth` and `isAndroid`; ALL of them are in the dependency array. On web
- * without the worklets babel plugin reanimated re-runs the mapper on its deps
- * rather than on auto-tracked reads, so a missing dep freezes the swipe transform
- * at its first frame (upstream omits `position` and `isAndroid`, so a toast that
- * changes position mid-life swipes the wrong way).
+ * W2 — the animated style reads `translate`, `direction`, `position`, `rowWidth`
+ * and `isAndroid`; ALL of them are in the dependency array. On web without the
+ * worklets babel plugin reanimated re-runs the mapper on its deps rather than on
+ * auto-tracked reads, so a missing dep freezes the swipe transform at its first
+ * frame (upstream omits `position` and `isAndroid`, so a toast that changes
+ * position mid-life swipes the wrong way).
+ *
+ * W12 — this wrapper is THE row box, so it is where `TOAST_MAX_ROW_WIDTH` caps
+ * and centres the toast. Capping here rather than on `ToastContent`'s card
+ * covers `toast.custom` JSX and `unstyled` rows too, which never reach that
+ * card. Every distance the gesture measures is a fraction of the capped
+ * `rowWidth`, not of the window — see the constant.
  */
 import * as React from 'react';
 import {
@@ -28,10 +34,11 @@ import Animated, {
 } from 'react-native-reanimated';
 
 import { easeInOutCircFn } from './animations';
+import { TOAST_MAX_ROW_WIDTH } from './constants';
 import { useToastContext } from './context';
 import type { ToastPosition, ToastProps } from './types';
 
-/** Fraction of the screen a horizontal swipe must cross to dismiss. */
+/** Fraction of the row a horizontal swipe must cross to dismiss. */
 const HORIZONTAL_DISMISS_FRACTION = 0.25;
 /** Below this the gesture reads as a tap, so the row springs back. */
 const TAP_SLOP = 16;
@@ -66,6 +73,8 @@ export const ToastSwipeHandler: React.FC<
   onPress,
 }) => {
   const { width: windowWidth } = useWindowDimensions();
+  // The row is `width: '100%'` up to the cap, so this is its real width.
+  const rowWidth = Math.min(windowWidth, TOAST_MAX_ROW_WIDTH);
   const translate = useSharedValue(0);
   const { swipeToDismissDirection: direction, position: positionCtx } =
     useToastContext();
@@ -137,7 +146,7 @@ export const ToastSwipeHandler: React.FC<
       if (direction === 'left') {
         if (Math.abs(translate.value) < TAP_SLOP) {
           springBack();
-        } else if (translate.value < -windowWidth * HORIZONTAL_DISMISS_FRACTION) {
+        } else if (translate.value < -rowWidth * HORIZONTAL_DISMISS_FRACTION) {
           dismiss();
         } else {
           springBack();
@@ -175,11 +184,11 @@ export const ToastSwipeHandler: React.FC<
         ? 1
         : interpolate(
             translate.value,
-            [0, direction === 'left' ? -windowWidth : -VERTICAL_FADE_DISTANCE],
+            [0, direction === 'left' ? -rowWidth : -VERTICAL_FADE_DISTANCE],
             [1, 0],
           ),
     };
-  }, [direction, translate, windowWidth, position, isAndroid]);
+  }, [direction, translate, rowWidth, position, isAndroid]);
 
   return (
     <GestureDetector gesture={Gesture.Race(tap, pan)}>
@@ -187,7 +196,7 @@ export const ToastSwipeHandler: React.FC<
         style={[
           animatedStyle,
           unstyled ? undefined : styles.centered,
-          styles.fullWidth,
+          styles.rowBox,
           style,
         ]}
         // W9 — on web `LinearTransition`'s easing degrades to CSS `ease` because
@@ -205,7 +214,16 @@ export const ToastSwipeHandler: React.FC<
 
 const styles = StyleSheet.create({
   centered: { justifyContent: 'center' },
-  fullWidth: { width: '100%' },
+  /**
+   * `alignSelf` is load-bearing: the parent anchor stretches its children, but a
+   * child with a definite cross size (`width: '100%'` capped by `maxWidth`) is
+   * not stretched — it would sit against the left edge without this.
+   */
+  rowBox: {
+    width: '100%',
+    maxWidth: TOAST_MAX_ROW_WIDTH,
+    alignSelf: 'center',
+  },
 });
 
 /**

package/src/toast/constants.ts

@@ -6,6 +6,7 @@
  * `toast-store.ts` never has to import a Reanimated-dependent module: the store
  * stays pure JS and its suite needs zero React Native mocks.
  */
+import { space } from '../styles/tokens';
 import type {
   AutoWiggle,
   ToastPosition,
@@ -21,6 +22,33 @@ export const OUTSIDE_PRESS_PADDING = 20;
 /** However deep a stack gets, a buried row never narrows past this scale. */
 export const MIN_STACK_SCALE_X = 0.8;
 
+/**
+ * W12 — HOW WIDE A TOAST ROW IS ALLOWED TO GET.
+ *
+ * sonner-native has no cap: the row is `width: '100%'` and the card inside it is
+ * inset by `marginHorizontal: space.lg`, so the card is always
+ * screen-width-minus-32. That is correct for the platform it was written for and
+ * wrong everywhere else — on a 1280px desktop viewport it produces a ~1248px
+ * card, which reads as a page banner rather than a toast. sonner (web) instead
+ * fixes the card at `--width: 356px`.
+ *
+ * The cap therefore sizes the ROW BOX, which carries the card's two `space.lg`
+ * gutters, so the visible card lands on sonner's 356px on any viewport wide
+ * enough to reach it. `maxWidth` needs no platform fork because it degrades by
+ * itself: below a 388px viewport the row is still screen-width and the card is
+ * still screen-width-minus-32, exactly as before, so phone portrait — the case
+ * the mobile sizing was right for — is untouched. Above it (desktop, tablet,
+ * phone landscape) the row caps and centres.
+ *
+ * `ToastSwipeHandler`'s dismiss threshold and `calculateStackScaleX`'s depth cue
+ * are fractions of this row width, NOT of the window: at 1280px a
+ * window-relative threshold would demand a 320px drag from a 388px card, and a
+ * window-relative squeeze would shrink a buried row by 4px instead of 16px.
+ * A consumer who overrides the cap through `toastOptions.toastContainerStyle`
+ * moves the card only; both of those keep measuring against this default.
+ */
+export const TOAST_MAX_ROW_WIDTH = 356 + space.lg * 2;
+
 /** Enter animation length; also the auto-close timer's head start and the overlay teardown delay. */
 export const ENTERING_ANIMATION_DURATION = 300;
 export const STACKING_ANIMATION_DURATION = 600;

package/src/toast/position-utils.ts

@@ -34,7 +34,12 @@ export const getOrderedToastIds = (
  *
  * Scale rather than width: changing the real width would rewrap the text. Returns
  * 1 (no squeeze) for a single row, an expanded stack, stacking turned off, or
- * before the window width is known.
+ * before the row width is known.
+ *
+ * `rowWidth` is the row's OWN width, not the window's. Upstream can use the
+ * screen width because its row is always full-bleed; Bloom's is capped at
+ * `TOAST_MAX_ROW_WIDTH`, and dividing a fixed `stackGap` inset by a 1280px window
+ * would shrink a buried row by 4 visible pixels instead of the intended 16.
  */
 export const calculateStackScaleX = ({
   index,
@@ -43,7 +48,7 @@ export const calculateStackScaleX = ({
   position,
   isExpanded,
   stackGap,
-  screenWidth,
+  rowWidth,
 }: {
   index: number;
   numberOfToasts: number;
@@ -51,16 +56,16 @@ export const calculateStackScaleX = ({
   position: ToastPosition;
   isExpanded: boolean;
   stackGap: number;
-  screenWidth: number;
+  rowWidth: number;
 }): number => {
-  if (!enableStacking || numberOfToasts <= 1 || isExpanded || screenWidth <= 0) {
+  if (!enableStacking || numberOfToasts <= 1 || isExpanded || rowWidth <= 0) {
     return 1;
   }
 
   const distanceFromFront =
     position === 'top-center' ? index : numberOfToasts - index - 1;
   const narrowAmount = stackGap * distanceFromFront * 2;
-  return Math.max(MIN_STACK_SCALE_X, 1 - narrowAmount / screenWidth);
+  return Math.max(MIN_STACK_SCALE_X, 1 - narrowAmount / rowWidth);
 };
 
 const heightOf = (

package/src/zoomable-image-gallery/ZoomableImageGallery.tsx

@@ -36,7 +36,7 @@ import {
   ArrowOutOfBox_Stroke2_Corner0_Rounded,
 } from '../icons';
 import { Z_INDEX } from '../styles/z-index';
-import { WEB_POSITION_FIXED } from '../styles/web-view-style';
+import { WEB_POSITION_FIXED, type WebCssStyle } from '../styles/web-view-style';
 import {
   getAspectRatio,
   fetchAspectRatio,
@@ -76,14 +76,15 @@ const AnimatedImage = Animated.createAnimatedComponent(Image);
 
 // Web-only interaction hints (no-ops on native): the zoom surfaces are
 // tap-to-dismiss (`cursor: pointer`) and must not select text or drag the
-// image. `Platform.select` keeps them off native; the `as ViewStyle` cast
-// mirrors Bloom's other web-only style casts (e.g. Dialog.web's `animation`).
-const webPointerStyle = Platform.select({
-  web: { userSelect: 'none', cursor: 'pointer' } as ViewStyle,
-  default: undefined,
-});
+// image. `Platform.select` keeps them off native. `cursor` is a real
+// `ViewStyle` key on RN 0.83; `userSelect` is declared on `TextStyle` only,
+// which is what `WebCssStyle` covers.
+const WEB_POINTER: WebCssStyle = { userSelect: 'none', cursor: 'pointer' };
+const WEB_USER_SELECT_NONE: WebCssStyle = { userSelect: 'none' };
+
+const webPointerStyle = Platform.select({ web: WEB_POINTER, default: undefined });
 const webUserSelectNoneStyle = Platform.select({
-  web: { userSelect: 'none' } as ViewStyle,
+  web: WEB_USER_SELECT_NONE,
   default: undefined,
 });