@oxyhq/bloom 0.50.2 → 0.51.0

package/src/toast/types.ts

@@ -1,10 +1,306 @@
-export type ToastType = 'default' | 'success' | 'error' | 'warning' | 'info';
+/**
+ * Derived from sonner-native v0.26.4 — src/types.ts
+ * (MIT © Gunnar Torfi Steinarsson), absorbed into Bloom's own toast API.
+ * See the top-level NOTICE for full attribution.
+ */
+import type React from 'react';
+import type { TextStyle, ViewProps, ViewStyle } from 'react-native';
+import type {
+  BaseAnimationBuilder,
+  EntryExitAnimationFunction,
+  ReanimatedKeyframe,
+} from 'react-native-reanimated';
 
-export interface BaseToastOptions {
+export type ToastPosition = 'top-center' | 'bottom-center' | 'center';
+
+export type ToastSwipeDirection = 'left' | 'up';
+
+/**
+ * Engine-internal variant. The PUBLIC knob is `ToastOptions['type']`; the single
+ * translation between the two lives in `toast-fns.ts`. `undefined` means "no
+ * variant" — a plain `toast('Saved')` renders with neutral surface colors.
+ */
+export type ToastVariant = 'success' | 'error' | 'warning' | 'info' | 'loading';
+
+/** Public variant knob. `'default'` maps to an ABSENT `ToastVariant`. */
+export type ToastType =
+  | 'default'
+  | 'success'
+  | 'error'
+  | 'warning'
+  | 'info'
+  | 'loading';
+
+/**
+ * Light/dark is owned by `BloomThemeProvider`/`BloomColorScope`, so this is
+ * accepted and documented as a no-op rather than dropped from the surface.
+ */
+export type ToastTheme = 'light' | 'dark' | 'system';
+
+export type AutoWiggle = 'never' | 'toast-change' | 'always';
+
+export type ToastAction = {
+  label: string;
+  onClick: () => void;
+};
+
+export type ToastStyles = {
+  toastContainer?: ViewStyle;
+  toast?: ViewStyle;
+  toastContent?: ViewStyle;
+  textContainer?: ViewStyle;
+  title?: TextStyle;
+  description?: TextStyle;
+  buttons?: ViewStyle;
+  closeButton?: ViewStyle;
+  closeButtonIcon?: ViewStyle;
+};
+
+export type ToastEntryExitAnimation =
+  | EntryExitAnimationFunction
+  | BaseAnimationBuilder
+  | typeof BaseAnimationBuilder
+  | ReanimatedKeyframe
+  | 'default';
+
+export type ToastAnimation = {
+  enter?: ToastEntryExitAnimation;
+  exit?: ToastEntryExitAnimation;
+};
+
+export type PromiseStyles = {
+  loading?: ToastStyles;
+  success?: ToastStyles;
+  error?: ToastStyles;
+};
+
+/**
+ * The store's view of a pending promise toast. Non-generic on purpose: `promise`
+ * already resolves to the SUCCESS TITLE because `toast.promise` maps the caller's
+ * promise through their `success` formatter at the boundary. That is what lets
+ * the store await it without casting an `unknown` result back to the caller's
+ * type (upstream keeps `success` here and casts).
+ */
+export type PromiseOptions = {
+  promise: Promise<string>;
+  loading: string;
+  error: ((error: unknown) => string) | string;
+  styles?: PromiseStyles;
+};
+
+type StyleProps = {
+  unstyled?: boolean;
+  style?: ViewStyle;
+  styles?: ToastStyles;
+  backgroundComponent?: React.ReactNode;
+};
+
+export type ToastProps = StyleProps & {
+  id: string | number;
+  index: number;
+  title: string;
+  /** Optional so a variant-less toast stays variant-less. See `ToastVariant`. */
+  variant?: ToastVariant;
+  numberOfToasts: number;
+  orderedToastIds: Array<string | number>;
+  jsx?: React.ReactNode;
+  description?: string;
+  invert?: boolean;
+  important?: boolean;
   duration?: number;
+  position?: ToastPosition;
+  animation?: ToastAnimation;
   dismissible?: boolean;
-  type?: ToastType;
-  onDismiss?: () => void;
+  icon?: React.ReactNode;
+  action?: ToastAction | React.ReactNode;
+  cancel?: ToastAction | React.ReactNode;
+  close?: React.ReactNode;
+  closeButton?: boolean;
+  richColors?: boolean;
+  onDismiss?: (id: string | number) => void;
+  onAutoClose?: (id: string | number) => void;
+  promiseOptions?: PromiseOptions;
+  actionButtonStyle?: ViewStyle;
+  actionButtonTextStyle?: TextStyle;
+  cancelButtonStyle?: ViewStyle;
+  cancelButtonTextStyle?: TextStyle;
   onPress?: () => void;
-  onAutoClose?: () => void;
+  allowFontScaling?: boolean;
+  maxFontSizeMultiplier?: number;
+};
+
+export type ToastRef = {
+  wiggle: () => void;
+};
+
+/** Everything a caller may pass alongside the toast content. */
+export type ToastOptions = Omit<
+  ToastProps,
+  | 'id'
+  | 'index'
+  | 'title'
+  | 'jsx'
+  | 'variant'
+  | 'numberOfToasts'
+  | 'orderedToastIds'
+  | 'promiseOptions'
+> & {
+  id?: string | number;
+  type?: ToastType;
+};
+
+export type PromiseToastOptions<T> = Omit<ToastOptions, 'type'> & {
+  loading: string;
+  success: (result: T) => string;
+  error: ((error: unknown) => string) | string;
+  styles?: PromiseStyles;
+};
+
+export interface ToastFn {
+  (content: React.ReactNode, options?: ToastOptions): string | number;
+  success: (content: React.ReactNode, options?: Omit<ToastOptions, 'type'>) => string | number;
+  error: (content: React.ReactNode, options?: Omit<ToastOptions, 'type'>) => string | number;
+  warning: (content: React.ReactNode, options?: Omit<ToastOptions, 'type'>) => string | number;
+  info: (content: React.ReactNode, options?: Omit<ToastOptions, 'type'>) => string | number;
+  loading: (content: React.ReactNode, options?: Omit<ToastOptions, 'type'>) => string | number;
+  custom: (jsx: React.ReactElement, options?: Omit<ToastOptions, 'type'>) => string | number;
+  promise: <T>(promise: Promise<T>, options: PromiseToastOptions<T>) => string | number;
+  dismiss: (id?: string | number) => string | number | undefined;
+  wiggle: (id: string | number) => void;
+}
+
+export type ToasterProps = Omit<StyleProps, 'style'> & {
+  duration?: number;
+  /** No-op — light/dark comes from `BloomThemeProvider`. */
+  theme?: ToastTheme;
+  visibleToasts?: number;
+  position?: ToastPosition;
+  closeButton?: boolean;
+  offset?: number;
+  autoWiggleOnUpdate?: AutoWiggle;
+  style?: ViewStyle;
+  positionerStyle?: ViewStyle;
+  /** No-op — use `BloomColorScope` to recolour a subtree. */
+  invert?: boolean;
+  allowFontScaling?: boolean;
+  maxFontSizeMultiplier?: number;
+  toastOptions?: {
+    actionButtonStyle?: ViewStyle;
+    actionButtonTextStyle?: TextStyle;
+    cancelButtonStyle?: ViewStyle;
+    cancelButtonTextStyle?: TextStyle;
+    titleStyle?: TextStyle;
+    descriptionStyle?: TextStyle;
+    style?: ViewStyle;
+    unstyled?: boolean;
+    toastContainerStyle?: ViewStyle;
+    toastContentStyle?: ViewStyle;
+    buttonsStyle?: ViewStyle;
+    closeButtonStyle?: ViewStyle;
+    closeButtonIconStyle?: ViewStyle;
+    textContainerStyle?: ViewStyle;
+    backgroundComponent?: React.ReactNode;
+    success?: ViewStyle;
+    error?: ViewStyle;
+    warning?: ViewStyle;
+    info?: ViewStyle;
+    loading?: ViewStyle;
+  };
+  gap?: number;
+  loadingIcon?: React.ReactNode;
+  richColors?: boolean;
+  icons?: {
+    success?: React.ReactNode;
+    error?: React.ReactNode;
+    warning?: React.ReactNode;
+    info?: React.ReactNode;
+    loading?: React.ReactNode;
+  };
+  swipeToDismissDirection?: ToastSwipeDirection;
+  pauseWhenPageIsHidden?: boolean;
+  enableStacking?: boolean;
+  animation?: ToastAnimation;
+  ToasterOverlayWrapper?: React.ComponentType<{ children: React.ReactNode }>;
+  ToastWrapper?: React.ComponentType<
+    ViewProps & {
+      children: React.ReactNode;
+      toastId: string | number;
+    }
+  >;
+};
+
+export type ToastHostProps = {
+  children: React.ReactNode;
+  ToasterOverlayWrapper?: React.ComponentType<{ children: React.ReactNode }>;
+};
+
+/** The subset of `ToasterProps` the store needs to resolve a new toast. */
+export type ToastStoreConfig = {
+  autoWiggleOnUpdate?: AutoWiggle;
+  visibleToasts?: number;
+  duration?: number;
+  pauseWhenPageIsHidden?: boolean;
+};
+
+export type ToastStoreState = {
+  toasts: ToastProps[];
+  toastsById: Map<string | number, ToastProps>;
+  toastsCounter: number;
+  toastRefs: Record<string | number, React.RefObject<ToastRef | null>>;
+  shouldShowOverlay: boolean;
+  /**
+   * INVARIANT: replaced, never mutated in place. Row offsets are recomputed in
+   * React from this object, so an in-place write would not re-render. Pinned by
+   * `toast-store.test.ts`.
+   */
+  toastHeights: Record<string | number, number>;
+  isExpanded: boolean;
+};
+
+export type StableToastContextType = Required<
+  Pick<
+    ToasterProps,
+    | 'duration'
+    | 'swipeToDismissDirection'
+    | 'closeButton'
+    | 'position'
+    | 'invert'
+    | 'icons'
+    | 'offset'
+    | 'pauseWhenPageIsHidden'
+    | 'gap'
+    | 'theme'
+    | 'toastOptions'
+    | 'autoWiggleOnUpdate'
+    | 'richColors'
+    | 'unstyled'
+    | 'enableStacking'
+    | 'visibleToasts'
+    | 'allowFontScaling'
+  >
+> & {
+  animation: ToastAnimation;
+  maxFontSizeMultiplier?: number;
+};
+
+export type DynamicToastContextType = {
+  toastHeights: Record<string | number, number>;
+  isExpanded: boolean;
+  expand: () => void;
+  collapse: () => void;
+  toggleExpand: () => void;
+};
+
+export function isToastAction(
+  action: ToastAction | React.ReactNode,
+): action is ToastAction {
+  if (typeof action !== 'object' || action === null) {
+    return false;
+  }
+  return (
+    'label' in action &&
+    'onClick' in action &&
+    typeof action.label === 'string' &&
+    typeof action.onClick === 'function'
+  );
 }

package/src/toast/use-animated-target.ts

@@ -0,0 +1,61 @@
+/**
+ * Bloom-original — drives a shared value toward a plain-JS target.
+ *
+ * WHY THIS IS IMPERATIVE, AND MUST STAY THAT WAY.
+ *
+ * The obvious shape is `useDerivedValue(() => withTiming(target))`, which is what
+ * sonner-native does for both the stack offset and the stack scale. Returning an
+ * animation from a mapper does not tick on WEB (`~/Oxy/AGENTS.md`, reanimated web
+ * failure mode A): the value jumps to or freezes at a static frame, so the stack
+ * lands on the right numbers without ever animating. The pattern that works on
+ * every platform is to assign the animation from JS — `sv.value = withTiming(…)`
+ * — and to let `useAnimatedStyle` only READ shared values.
+ *
+ * A `useAnimatedReaction` keyed on the target would also fire (without the
+ * worklets plugin its inputs come from its own deps array, so keying it on a JS
+ * value works where keying it on a shared value would not), but a layout effect
+ * needs no reanimated machinery at all to be correct, so it is the smaller bet.
+ * It runs before paint, so a target change never shows a stale frame first.
+ * Precedent for the imperative drive: `bottom-sheet/BottomSheetBase.tsx`.
+ *
+ * By default the first render is seeded rather than animated: a row must appear
+ * AT its position, not fly in from zero. Pass `from` when the FIRST render is
+ * itself the animation — the value is then seeded at `from` and animated to
+ * `target` on mount. That is how the enter animation is driven; see the
+ * "Bloom owns the enter animation" note in `animations.ts`.
+ */
+import { useLayoutEffect, useRef } from 'react';
+import {
+  useSharedValue,
+  withTiming,
+  type EasingFunctionFactory,
+  type SharedValue,
+} from 'react-native-reanimated';
+
+export function useAnimatedTarget(
+  target: number,
+  {
+    duration,
+    easing,
+    from,
+  }: {
+    duration: number;
+    easing: EasingFunctionFactory | ((value: number) => number);
+    from?: number;
+  },
+): SharedValue<number> {
+  const value = useSharedValue(from ?? target);
+  const isSeeded = useRef(false);
+
+  useLayoutEffect(() => {
+    if (!isSeeded.current) {
+      isSeeded.current = true;
+      if (from === undefined) {
+        return;
+      }
+    }
+    value.value = withTiming(target, { duration, easing });
+  }, [target, value, duration, easing, from]);
+
+  return value;
+}

package/src/toast/use-app-state.ts

@@ -0,0 +1,77 @@
+/**
+ * Derived from sonner-native v0.26.4 — src/use-app-state.ts
+ * (MIT © Gunnar Torfi Steinarsson). See the top-level NOTICE.
+ *
+ * Owns the whole "did the app go away" concern in one place so callers never
+ * have to guard the platform themselves (W4). Two upstream problems are fixed
+ * here rather than at the call sites:
+ *
+ *   1. `AppState.addEventListener` is unavailable when react-native-web runs
+ *      without a document (SSR / prerender / a non-DOM test environment), where
+ *      RN reports `AppState.isAvailable === false`. Upstream subscribes
+ *      unconditionally and then calls `subscription.remove()` on unmount, which
+ *      throws a `TypeError` there. The absence of a subscription is a documented
+ *      environment fact, not an error to catch and swallow — so this checks the
+ *      flag the platform provides and returns a no-op unsubscribe.
+ *   2. Upstream treats every non-`active` transition as "backgrounded", so
+ *      `background` → `inactive` fires `onBackground` a second time and re-pauses
+ *      an already-paused timer. This compares active-ness on both sides of the
+ *      transition and reports only real edges.
+ */
+import { useEffect, useRef } from 'react';
+import { AppState, type AppStateStatus } from 'react-native';
+
+const NOOP = () => {};
+
+const isActive = (status: AppStateStatus) => status === 'active';
+
+/**
+ * Subscribe to app-state changes.
+ *
+ * @returns an unsubscribe function — a no-op when the platform provides no
+ *   `AppState` subscription.
+ */
+export function subscribeToAppState(
+  onChange: (status: AppStateStatus) => void,
+): () => void {
+  if (!AppState.isAvailable) {
+    return NOOP;
+  }
+
+  const subscription = AppState.addEventListener('change', onChange);
+  return () => {
+    subscription.remove();
+  };
+}
+
+/**
+ * Call `onBackground` when the app leaves the foreground and `onForeground` when
+ * it comes back — once per edge, never on a transition between two inactive
+ * states.
+ */
+export function useAppStateChange({
+  onBackground,
+  onForeground,
+}: {
+  onBackground: () => void;
+  onForeground: () => void;
+}) {
+  const previousStatus = useRef<AppStateStatus>(AppState.currentState);
+
+  useEffect(() => {
+    return subscribeToAppState((nextStatus) => {
+      const wasActive = isActive(previousStatus.current);
+      previousStatus.current = nextStatus;
+
+      if (isActive(nextStatus)) {
+        if (!wasActive) {
+          onForeground();
+        }
+        return;
+      }
+      if (wasActive) {
+        onBackground();
+      }
+    });
+  }, [onBackground, onForeground]);
+}

package/src/toast/use-toast-colors.ts

@@ -0,0 +1,133 @@
+/**
+ * Replaces sonner-native v0.26.4's `src/use-colors.ts` + `src/use-default-styles.ts`
+ * (MIT © Gunnar Torfi Steinarsson — see the top-level NOTICE) and absorbs the
+ * colour logic from Bloom's previous `Toast.tsx`.
+ *
+ * Upstream ships two hardcoded light/dark palettes and picks between them from
+ * `useColorScheme()`. Bloom has exactly one source of colour — `useTheme()` from
+ * `BloomThemeProvider` — so the palettes are gone and `ToasterProps.theme` /
+ * `invert` are documented no-ops (light/dark and per-subtree recolouring are
+ * `BloomThemeProvider` / `BloomColorScope` concerns).
+ *
+ * THE SURFACE IS ALWAYS NEUTRAL — `backgroundSecondary` with the `border`, `text`
+ * and `textSecondary` roles, for every variant, with `richColors` on or off. The
+ * variant only ever colours the leading ICON, and `richColors` only ever widens
+ * that to the border and title as well. Exactly like sonner.
+ *
+ * NOTHING HERE MAY REACH FOR A BRAND TOKEN. `success` / `error` / `warning` /
+ * `info` are STATUS colours; `primarySubtle` / `negativeSubtle` are BRAND pairs.
+ * Mixing the families is what made `toast.success('Saved')` render as a
+ * brand-purple card, and what made a success icon flip from green to purple when
+ * `richColors` was switched on. `richColors` means "show the status colour more
+ * prominently", never "switch to the brand palette".
+ *
+ * Genuinely tinted status SURFACES would need a `successSubtle` / `errorSubtle` /
+ * `warningSubtle` / `infoSubtle` token family — a theme addition, not something to
+ * fake here from a brand pair or a derived alpha.
+ *
+ * An ABSENT variant is a first-class case: a plain `toast('Saved')` renders the
+ * neutral surface with no variant icon at all. It must never fall back to `info`.
+ */
+import { useMemo } from 'react';
+
+import { useTheme } from '../theme/use-theme';
+import type { ThemeColors } from '../theme/types';
+import type { ToastVariant } from './types';
+
+export type ToastActionColors = {
+  background: string;
+  text: string;
+  pressedBackground: string;
+  pressedText: string;
+};
+
+export type ToastColors = {
+  surface: string;
+  border: string;
+  title: string;
+  description: string;
+  icon: string;
+  closeButton: string;
+  action: ToastActionColors;
+  cancelText: string;
+};
+
+/**
+ * The variant's STATUS colour, or `undefined` for the variants that have none.
+ * `loading` and an absent variant are deliberately in the second group: they carry
+ * no status meaning, so `richColors` has nothing to make more prominent and both
+ * stay fully neutral.
+ */
+function statusColor(
+  variant: ToastVariant | undefined,
+  colors: ThemeColors,
+): string | undefined {
+  switch (variant) {
+    case 'success':
+      return colors.success;
+    case 'error':
+      return colors.error;
+    case 'warning':
+      return colors.warning;
+    case 'info':
+      return colors.info;
+    case 'loading':
+    case undefined:
+      return undefined;
+  }
+}
+
+/**
+ * `richColors` widens the status colour from the icon alone to the border and
+ * title as well. It does NOT tint the surface, and it does not touch the
+ * description, close button or action colours — those stay neutral so the row
+ * still reads as a toast rather than a status banner.
+ */
+function resolveColors({
+  variant,
+  richColors,
+  colors,
+}: {
+  variant: ToastVariant | undefined;
+  richColors: boolean;
+  colors: ThemeColors;
+}): ToastColors {
+  const status = statusColor(variant, colors);
+
+  // The whole surface, for EVERY variant and both values of `richColors`. Because
+  // the action colours live here, they can never pick up a variant tint either.
+  const neutral: ToastColors = {
+    surface: colors.backgroundSecondary,
+    border: colors.border,
+    title: colors.text,
+    description: colors.textSecondary,
+    icon: status ?? colors.textSecondary,
+    closeButton: colors.textSecondary,
+    action: {
+      background: colors.backgroundTertiary,
+      text: colors.textSecondary,
+      pressedBackground: colors.contrast50,
+      pressedText: colors.text,
+    },
+    cancelText: colors.textSecondary,
+  };
+
+  if (!richColors || status === undefined) {
+    return neutral;
+  }
+  return { ...neutral, border: status, title: status };
+}
+
+export function useToastColors({
+  variant,
+  richColors,
+}: {
+  variant: ToastVariant | undefined;
+  richColors: boolean;
+}): ToastColors {
+  const { colors } = useTheme();
+  return useMemo(
+    () => resolveColors({ variant, richColors, colors }),
+    [variant, richColors, colors],
+  );
+}

package/src/toast/use-toast-position.ts

@@ -0,0 +1,46 @@
+/**
+ * Derived from sonner-native v0.26.4 — src/use-toast-position.ts
+ * (MIT © Gunnar Torfi Steinarsson). See the top-level NOTICE.
+ *
+ * Upstream computes the row's offset inside a `useDerivedValue` worklet and
+ * returns `withTiming(...)` from it, which does not animate on web. Bloom computes
+ * the target in plain JS — `calculateToastPosition` is pure and unit-tested — and
+ * hands it to `useAnimatedTarget`, which drives the shared value imperatively. See
+ * that file for the full reasoning.
+ *
+ * Two dependency traps disappear with the worklet:
+ *
+ *  - No memo and no dependency array. The target is a NUMBER, and
+ *    `useAnimatedTarget` keys its effect on that number, so recomputing a pure
+ *    O(visibleToasts) sum on every render costs nothing and cannot go stale.
+ *    Upstream needs a deps array (including a joined `orderedToastIds` key) purely
+ *    because a mapper has no other way to know when to re-run.
+ *  - No `toastHeightsVersion`. The store creates a new `toastHeights` OBJECT on
+ *    every mutation, and React re-renders on that; the manual version counter only
+ *    existed because a mapper cannot observe a plain object. The invariant that
+ *    replaces it is ordinary React — the store must never mutate `toastHeights` in
+ *    place — pinned by `toast-store.test.ts`.
+ */
+import type { SharedValue } from 'react-native-reanimated';
+
+import { easeOutQuartFn } from './animations';
+import { STACKING_ANIMATION_DURATION } from './constants';
+import { calculateToastPosition } from './position-utils';
+import type { ToastPosition } from './types';
+import { useAnimatedTarget } from './use-animated-target';
+
+export const useToastPosition = (params: {
+  index: number;
+  numberOfToasts: number;
+  enableStacking: boolean;
+  position: ToastPosition;
+  allToastHeights: Record<string | number, number>;
+  gap: number;
+  orderedToastIds: Array<string | number>;
+  isExpanded: boolean;
+  stackGap: number;
+}): SharedValue<number> =>
+  useAnimatedTarget(calculateToastPosition(params), {
+    duration: STACKING_ANIMATION_DURATION,
+    easing: easeOutQuartFn,
+  });

package/src/tooltip/index.web.tsx

@@ -4,6 +4,7 @@ import { Pressable, StyleSheet, View } from 'react-native';
 import { useTheme } from '../theme/use-theme';
 import { atoms as a, flatten } from '../styles';
 import { Z_INDEX } from '../styles/z-index';
+import { WEB_POSITION_FIXED } from '../styles/web-view-style';
 import {
   ARROW_SIZE,
   BUBBLE_MAX_WIDTH,
@@ -150,7 +151,7 @@ export const TooltipTextBubble = createTextBubble(TooltipContent);
 
 const webStyles = StyleSheet.create({
   backdrop: {
-    position: 'fixed' as 'absolute',
+    position: WEB_POSITION_FIXED,
     top: 0,
     left: 0,
     right: 0,