@oxyhq/bloom 0.52.0 → 0.52.1

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,
 });
 

package/lib/commonjs/tab-bar/use-reserved-space.js

@@ -1,50 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useTabBarReservedSpace = useTabBarReservedSpace;
-var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
-var _shared = require("./shared.js");
-/**
- * How much room a screen must leave at the bottom for the floating bar.
- *
- * The bar is `position: absolute` over the content, so nothing reserves space
- * for it automatically — every scrollable screen under a tab layout has to pad
- * 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 keeps from 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.
- */
-
-/**
- * The vertical space the tab bar occupies above the bottom of the window, in
- * px. Use it directly as the bottom padding (or bottom offset) of anything that
- * would otherwise sit under the bar:
- *
- * ```tsx
- * const reserved = useTabBarReservedSpace();
- *
- * <Animated.ScrollView contentContainerStyle={{ paddingBottom: reserved }} />
- * <Fab style={{ position: 'absolute', right: 16, bottom: reserved + 12 }} />
- * ```
- *
- * The value ALREADY INCLUDES the bottom safe-area inset — the bar folds the
- * inset into its own bottom gap, so it is measured from the true window edge,
- * not from the safe area. Never write `reserved + insets.bottom`: that counts
- * the home indicator twice and strands a visible band of dead space under every
- * list (a 76px bar reserving 110px on an iOS device or PWA). It is the whole
- * number; nothing needs adding to it.
- *
- * It is the EXPANDED height, deliberately. The bar minimizes while scrolling
- * down and re-expands on the way up, so reserving the minimized height would
- * hide the end of a list the moment the user scrolled back to it.
- */
-function useTabBarReservedSpace() {
-  const insets = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
-  return (0, _shared.tabBarBottomGap)(insets.bottom) + _shared.EXPANDED_HEIGHT;
-}
-//# sourceMappingURL=use-reserved-space.js.map

package/lib/commonjs/tab-bar/use-reserved-space.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_reactNativeSafeAreaContext","require","_shared","useTabBarReservedSpace","insets","useSafeAreaInsets","tabBarBottomGap","bottom","EXPANDED_HEIGHT"],"sourceRoot":"../../../src","sources":["tab-bar/use-reserved-space.ts"],"mappings":";;;;;;AAaA,IAAAA,2BAAA,GAAAC,OAAA;AAEA,IAAAC,OAAA,GAAAD,OAAA;AAfA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAKA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASE,sBAAsBA,CAAA,EAAW;EAC/C,MAAMC,MAAM,GAAG,IAAAC,6CAAiB,EAAC,CAAC;EAClC,OAAO,IAAAC,uBAAe,EAACF,MAAM,CAACG,MAAM,CAAC,GAAGC,uBAAe;AACzD","ignoreList":[]}

package/lib/module/tab-bar/use-reserved-space.js

@@ -1,46 +0,0 @@
-"use strict";
-
-/**
- * How much room a screen must leave at the bottom for the floating bar.
- *
- * The bar is `position: absolute` over the content, so nothing reserves space
- * for it automatically — every scrollable screen under a tab layout has to pad
- * 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 keeps from 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.js";
-
-/**
- * The vertical space the tab bar occupies above the bottom of the window, in
- * px. Use it directly as the bottom padding (or bottom offset) of anything that
- * would otherwise sit under the bar:
- *
- * ```tsx
- * const reserved = useTabBarReservedSpace();
- *
- * <Animated.ScrollView contentContainerStyle={{ paddingBottom: reserved }} />
- * <Fab style={{ position: 'absolute', right: 16, bottom: reserved + 12 }} />
- * ```
- *
- * The value ALREADY INCLUDES the bottom safe-area inset — the bar folds the
- * inset into its own bottom gap, so it is measured from the true window edge,
- * not from the safe area. Never write `reserved + insets.bottom`: that counts
- * the home indicator twice and strands a visible band of dead space under every
- * list (a 76px bar reserving 110px on an iOS device or PWA). It is the whole
- * number; nothing needs adding to it.
- *
- * It is the EXPANDED height, deliberately. The bar minimizes while scrolling
- * down and re-expands on the way up, so reserving the minimized height would
- * hide the end of a list the moment the user scrolled back to it.
- */
-export function useTabBarReservedSpace() {
-  const insets = useSafeAreaInsets();
-  return tabBarBottomGap(insets.bottom) + EXPANDED_HEIGHT;
-}
-//# sourceMappingURL=use-reserved-space.js.map

package/lib/module/tab-bar/use-reserved-space.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["useSafeAreaInsets","EXPANDED_HEIGHT","tabBarBottomGap","useTabBarReservedSpace","insets","bottom"],"sourceRoot":"../../../src","sources":["tab-bar/use-reserved-space.ts"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASA,iBAAiB,QAAQ,gCAAgC;AAElE,SAASC,eAAe,EAAEC,eAAe,QAAQ,aAAU;;AAE3D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,sBAAsBA,CAAA,EAAW;EAC/C,MAAMC,MAAM,GAAGJ,iBAAiB,CAAC,CAAC;EAClC,OAAOE,eAAe,CAACE,MAAM,CAACC,MAAM,CAAC,GAAGJ,eAAe;AACzD","ignoreList":[]}

package/lib/typescript/commonjs/tab-bar/use-reserved-space.d.ts

@@ -1,25 +0,0 @@
-/**
- * The vertical space the tab bar occupies above the bottom of the window, in
- * px. Use it directly as the bottom padding (or bottom offset) of anything that
- * would otherwise sit under the bar:
- *
- * ```tsx
- * const reserved = useTabBarReservedSpace();
- *
- * <Animated.ScrollView contentContainerStyle={{ paddingBottom: reserved }} />
- * <Fab style={{ position: 'absolute', right: 16, bottom: reserved + 12 }} />
- * ```
- *
- * The value ALREADY INCLUDES the bottom safe-area inset — the bar folds the
- * inset into its own bottom gap, so it is measured from the true window edge,
- * not from the safe area. Never write `reserved + insets.bottom`: that counts
- * the home indicator twice and strands a visible band of dead space under every
- * list (a 76px bar reserving 110px on an iOS device or PWA). It is the whole
- * number; nothing needs adding to it.
- *
- * It is the EXPANDED height, deliberately. The bar minimizes while scrolling
- * down and re-expands on the way up, so reserving the minimized height would
- * hide the end of a list the moment the user scrolled back to it.
- */
-export declare function useTabBarReservedSpace(): number;
-//# sourceMappingURL=use-reserved-space.d.ts.map

package/lib/typescript/commonjs/tab-bar/use-reserved-space.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-reserved-space.d.ts","sourceRoot":"","sources":["../../../../src/tab-bar/use-reserved-space.ts"],"names":[],"mappings":"AAiBA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,sBAAsB,IAAI,MAAM,CAG/C"}

package/lib/typescript/module/tab-bar/use-reserved-space.d.ts

@@ -1,25 +0,0 @@
-/**
- * The vertical space the tab bar occupies above the bottom of the window, in
- * px. Use it directly as the bottom padding (or bottom offset) of anything that
- * would otherwise sit under the bar:
- *
- * ```tsx
- * const reserved = useTabBarReservedSpace();
- *
- * <Animated.ScrollView contentContainerStyle={{ paddingBottom: reserved }} />
- * <Fab style={{ position: 'absolute', right: 16, bottom: reserved + 12 }} />
- * ```
- *
- * The value ALREADY INCLUDES the bottom safe-area inset — the bar folds the
- * inset into its own bottom gap, so it is measured from the true window edge,
- * not from the safe area. Never write `reserved + insets.bottom`: that counts
- * the home indicator twice and strands a visible band of dead space under every
- * list (a 76px bar reserving 110px on an iOS device or PWA). It is the whole
- * number; nothing needs adding to it.
- *
- * It is the EXPANDED height, deliberately. The bar minimizes while scrolling
- * down and re-expands on the way up, so reserving the minimized height would
- * hide the end of a list the moment the user scrolled back to it.
- */
-export declare function useTabBarReservedSpace(): number;
-//# sourceMappingURL=use-reserved-space.d.ts.map

package/lib/typescript/module/tab-bar/use-reserved-space.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-reserved-space.d.ts","sourceRoot":"","sources":["../../../../src/tab-bar/use-reserved-space.ts"],"names":[],"mappings":"AAiBA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,sBAAsB,IAAI,MAAM,CAG/C"}

package/src/__tests__/TabBarReservedSpace.test.tsx

@@ -1,150 +0,0 @@
-import React from 'react';
-import type { ReactTestInstance } from 'react-test-renderer';
-import { render } from '@testing-library/react-native';
-
-import { BloomThemeProvider } from '../theme/BloomThemeProvider';
-import { TabBar, TabBarButton, useTabBarReservedSpace } from '../tab-bar';
-import type { TabBarItem } from '../tab-bar/types';
-
-/**
- * `useTabBarReservedSpace()` — the number a screen pads its content by so a
- * list does not end underneath the floating bar.
- *
- * The bar is absolutely positioned, so nothing reserves that space
- * automatically, and the geometry it is built from (expanded height, bottom
- * gap) is private. Without the hook a consumer hardcodes both — which drifts
- * silently the first time the bar changes by a pixel — and, worse, tends to add
- * `insets.bottom` on top, because that is what reserving space for bottom
- * chrome normally requires. The bar already folds the inset into its own gap,
- * so that double-counts the home indicator.
- *
- * The suite therefore asserts three separate things: the absolute pixel values
- * (so a change to the constants must be deliberate), the inset relationship (so
- * the double-count can never creep back in), and equality with the bar's own
- * rendered geometry (so the hook cannot drift from where the bar actually sits).
- */
-
-// Mutated per test; must be `mock`-prefixed for the hoisted factory.
-const mockInsets = { top: 0, right: 0, bottom: 0, left: 0 };
-
-jest.mock('react-native-safe-area-context', () => ({
-  ...jest.requireActual('react-native-safe-area-context'),
-  useSafeAreaInsets: () => mockInsets,
-}));
-
-const ITEMS: TabBarItem[] = [
-  { name: 'home', label: 'Home', icon: null },
-  { name: 'search', label: 'Search', icon: null },
-];
-
-/** A device with a home indicator (iPhone-class bottom inset). */
-const HOME_INDICATOR_INSET = 34;
-
-function ReservedProbe({ onValue }: { onValue: (space: number) => void }) {
-  onValue(useTabBarReservedSpace());
-  return null;
-}
-
-function withTheme(ui: React.ReactElement) {
-  return (
-    <BloomThemeProvider mode="light" colorPreset="teal">
-      {ui}
-    </BloomThemeProvider>
-  );
-}
-
-/** The space the hook reserves on a device whose bottom inset is `inset`. */
-function reservedFor(inset: number): number {
-  mockInsets.bottom = inset;
-  let space: number | undefined;
-  render(withTheme(<ReservedProbe onValue={(value) => (space = value)} />));
-  if (space === undefined) throw new Error('ReservedProbe never ran');
-  return space;
-}
-
-function flattenStyle(style: unknown): Record<string, unknown> {
-  const out: Record<string, unknown> = {};
-  const visit = (value: unknown): void => {
-    if (Array.isArray(value)) value.forEach(visit);
-    else if (value && typeof value === 'object') Object.assign(out, value);
-  };
-  visit(style);
-  return out;
-}
-
-/**
- * The flattened style of every styled node in the tree.
- *
- * Restricted to HOST nodes: the RN mock renders each component as a composite
- * wrapping a host element of the same name, and both carry the same `style`, so
- * counting all of them would double every match.
- */
-function styledNodes(root: ReactTestInstance): Record<string, unknown>[] {
-  return root
-    .findAll((node) => typeof node.type === 'string' && node.props?.style !== undefined)
-    .map((node) => flattenStyle(node.props.style));
-}
-
-describe('useTabBarReservedSpace', () => {
-  beforeEach(() => {
-    mockInsets.bottom = 0;
-  });
-
-  it('reserves the bar plus its gap where there is no bottom inset', () => {
-    // 58pt bar + the 12pt floor the gap never goes below.
-    expect(reservedFor(0)).toBe(70);
-  });
-
-  it('reserves more on a device with a home indicator', () => {
-    expect(reservedFor(HOME_INDICATOR_INSET)).toBe(76);
-  });
-
-  it('already includes the inset — adding insets.bottom would double-count it', () => {
-    // The bar absorbs 16pt of the inset into its own gap, so the space grows by
-    // the REMAINDER, never by the whole inset. A consumer writing
-    // `reserved + insets.bottom` would reserve 110pt for a 76pt bar.
-    const grown = reservedFor(HOME_INDICATOR_INSET) - reservedFor(0);
-    expect(grown).toBe(6);
-    expect(grown).toBeLessThan(HOME_INDICATOR_INSET);
-  });
-
-  it('does not shrink below the floor for a small inset', () => {
-    // An inset under what the gap absorbs must not pull the bar down toward the
-    // window edge — the gap is clamped, and the reserved space with it.
-    expect(reservedFor(8)).toBe(reservedFor(0));
-  });
-
-  it('equals the space the rendered bar actually occupies', () => {
-    // The invariant that makes the hook worth exporting: its number is the bar's
-    // own geometry (the gap it holds off the window edge plus its expanded
-    // height), not a second copy that can drift.
-    mockInsets.bottom = HOME_INDICATOR_INSET;
-    let reserved: number | undefined;
-    const { UNSAFE_root } = render(
-      withTheme(
-        <>
-          <ReservedProbe onValue={(value) => (reserved = value)} />
-          <TabBar activeIndex={0}>
-            {ITEMS.map((item, index) => (
-              <TabBarButton key={item.name} item={item} index={index} />
-            ))}
-          </TabBar>
-        </>,
-      ),
-    );
-
-    const styles = styledNodes(UNSAFE_root);
-    // The wrapper holding the pill off the bottom edge — the only node with a
-    // bottom margin.
-    const gaps = styles.filter((style) => typeof style.marginBottom === 'number');
-    expect(gaps).toHaveLength(1);
-    // The pill itself: the animated capsule sizes BOTH its height and its
-    // horizontal inset, which nothing else in the bar does.
-    const pills = styles.filter(
-      (style) => typeof style.height === 'number' && typeof style.marginHorizontal === 'number',
-    );
-    expect(pills).toHaveLength(1);
-
-    expect(reserved).toBe(Number(gaps[0]?.marginBottom) + Number(pills[0]?.height));
-  });
-});