@oxyhq/bloom 0.50.2 → 0.51.0

package/src/toast/Toaster.tsx

@@ -0,0 +1,259 @@
+/**
+ * Derived from sonner-native v0.26.4 — src/toaster.tsx
+ * (MIT © Gunnar Torfi Steinarsson). See the top-level NOTICE.
+ *
+ * Subscribes to the store, resolves the outlet configuration once, groups rows by
+ * position and renders each group through `Positioner` inside the platform
+ * `ToastHost`.
+ *
+ * W5 — ONE `AppState` subscription for the whole stack. Upstream subscribes per
+ * row, so N toasts meant N `visibilitychange` listeners all doing the same work;
+ * the store already exposes stack-wide `pauseAllTimers`/`resumeAllTimers`.
+ *
+ * `react-native-screens` is not imported here either — the platform wrapper is
+ * `ToastHost`'s concern (D6).
+ */
+import * as React from 'react';
+
+import { toastDefaults } from './constants';
+import { DynamicToastContext, ToastContext } from './context';
+import { getOrderedToastIds } from './position-utils';
+import { Positioner } from './Positioner';
+import { ToastHost } from './ToastHost';
+import { ToastRow } from './ToastRow';
+import { toastStore } from './toast-store';
+import type {
+  DynamicToastContextType,
+  StableToastContextType,
+  ToasterProps,
+  ToastPosition,
+  ToastProps,
+} from './types';
+import { useAppStateChange } from './use-app-state';
+
+const ALL_POSITIONS: ToastPosition[] = [
+  'top-center',
+  'bottom-center',
+  'center',
+];
+
+// Stable identities so the context memos below do not invalidate every render.
+const EMPTY_TOAST_OPTIONS: NonNullable<ToasterProps['toastOptions']> = {};
+const EMPTY_ICONS: NonNullable<ToasterProps['icons']> = {};
+const EMPTY_ANIMATION: NonNullable<ToasterProps['animation']> = {};
+
+/**
+ * A top-anchored stack grows downward from the newest toast, so its rows render
+ * in reverse order.
+ */
+function orderToastsFromPosition(
+  toasts: ToastProps[],
+  position: ToastPosition,
+): ToastProps[] {
+  return position === 'top-center' ? toasts.slice().reverse() : toasts;
+}
+
+export const Toaster: React.FC<ToasterProps> = ({
+  ToasterOverlayWrapper,
+  ToastWrapper,
+  duration = toastDefaults.duration,
+  position = toastDefaults.position,
+  offset = toastDefaults.offset,
+  visibleToasts = toastDefaults.visibleToasts,
+  swipeToDismissDirection = toastDefaults.swipeToDismissDirection,
+  closeButton = toastDefaults.closeButton,
+  gap = toastDefaults.gap,
+  theme = toastDefaults.theme,
+  invert = toastDefaults.invert,
+  richColors = toastDefaults.richColors,
+  enableStacking = toastDefaults.enableStacking,
+  autoWiggleOnUpdate = toastDefaults.autoWiggleOnUpdate,
+  pauseWhenPageIsHidden = toastDefaults.pauseWhenPageIsHidden,
+  allowFontScaling = toastDefaults.allowFontScaling,
+  maxFontSizeMultiplier,
+  toastOptions = EMPTY_TOAST_OPTIONS,
+  icons = EMPTY_ICONS,
+  animation = EMPTY_ANIMATION,
+  unstyled,
+  positionerStyle,
+  style,
+  styles: styleOverrides,
+}) => {
+  const { toasts, shouldShowOverlay, toastHeights, isExpanded } =
+    React.useSyncExternalStore(
+      toastStore.subscribe,
+      toastStore.getSnapshot,
+      toastStore.getSnapshot,
+    );
+
+  // Runs even while idle: the store must know the outlet's limits BEFORE the
+  // first toast arrives, or that toast is resolved against the bare defaults.
+  React.useEffect(() => {
+    toastStore.setConfig({
+      autoWiggleOnUpdate,
+      visibleToasts,
+      duration,
+      pauseWhenPageIsHidden,
+    });
+  }, [autoWiggleOnUpdate, visibleToasts, duration, pauseWhenPageIsHidden]);
+
+  const onBackground = React.useCallback(() => {
+    if (pauseWhenPageIsHidden) {
+      toastStore.pauseAllTimers();
+    }
+  }, [pauseWhenPageIsHidden]);
+
+  const onForeground = React.useCallback(() => {
+    if (pauseWhenPageIsHidden) {
+      toastStore.resumeAllTimers();
+    }
+  }, [pauseWhenPageIsHidden]);
+
+  useAppStateChange({ onBackground, onForeground });
+
+  const stableValue: StableToastContextType = React.useMemo(
+    () => ({
+      duration,
+      position,
+      offset,
+      visibleToasts,
+      swipeToDismissDirection,
+      closeButton,
+      gap,
+      theme,
+      invert,
+      richColors,
+      enableStacking,
+      autoWiggleOnUpdate,
+      pauseWhenPageIsHidden,
+      allowFontScaling,
+      maxFontSizeMultiplier,
+      toastOptions,
+      icons,
+      animation,
+      unstyled: unstyled ?? toastOptions.unstyled ?? toastDefaults.unstyled,
+    }),
+    [
+      duration,
+      position,
+      offset,
+      visibleToasts,
+      swipeToDismissDirection,
+      closeButton,
+      gap,
+      theme,
+      invert,
+      richColors,
+      enableStacking,
+      autoWiggleOnUpdate,
+      pauseWhenPageIsHidden,
+      allowFontScaling,
+      maxFontSizeMultiplier,
+      toastOptions,
+      icons,
+      animation,
+      unstyled,
+    ],
+  );
+
+  const dynamicValue: DynamicToastContextType = React.useMemo(
+    () => ({
+      toastHeights,
+      isExpanded,
+      expand: toastStore.expand,
+      collapse: toastStore.collapse,
+      toggleExpand: toastStore.toggleExpand,
+    }),
+    [toastHeights, isExpanded],
+  );
+
+  /**
+   * Rows grouped by their EFFECTIVE position, which for a toast with no explicit
+   * `position` is the outlet's configured one — the same resolution `ToastRow`
+   * itself does (`positionProp ?? positionCtx`).
+   *
+   * It must NOT be "whichever group happens to come first". Grouping a
+   * position-less row by index put it in the top-center group the moment any
+   * top-center toast existed, because `ALL_POSITIONS` starts with `top-center`:
+   * a plain `toast('Saved')` then rendered against the top inset (visible only as
+   * a sliver above the screen edge), and an already-placed one JUMPED there when a
+   * top-center toast arrived.
+   *
+   * The configured position is always kept, even with no rows in it, so
+   * position-less rows always have a home. Each group is ordered by its OWN
+   * position: a top-anchored stack renders in reverse, and applying the outlet's
+   * ordering to every group reversed the wrong ones.
+   */
+  const toastsByPosition = React.useMemo(() => {
+    const groups = new Map<ToastPosition, ToastProps[]>();
+    for (const candidate of ALL_POSITIONS) {
+      const group = toasts.filter(
+        (toast) => (toast.position ?? position) === candidate,
+      );
+      if (candidate === position || group.length > 0) {
+        groups.set(candidate, orderToastsFromPosition(group, candidate));
+      }
+    }
+    return groups;
+  }, [toasts, position]);
+
+  const onDismiss = React.useCallback((id: string | number) => {
+    toastStore.dismissToast(id, 'onDismiss');
+  }, []);
+
+  // Nothing to host while idle. `shouldShowOverlay` stays true for the length of
+  // the exit animation after the last dismissal, so this never cuts one short.
+  if (!shouldShowOverlay) {
+    return null;
+  }
+
+  return (
+    <ToastHost ToasterOverlayWrapper={ToasterOverlayWrapper}>
+      <ToastContext.Provider value={stableValue}>
+        <DynamicToastContext.Provider value={dynamicValue}>
+          {Array.from(toastsByPosition, ([currentPosition, toastsForPosition]) => {
+            const orderedToastIds = getOrderedToastIds(
+              toastsForPosition,
+              currentPosition,
+              enableStacking,
+            );
+
+            return (
+              <Positioner
+                key={currentPosition}
+                position={currentPosition}
+                style={positionerStyle}
+              >
+                {toastsForPosition.map((toast, index) => {
+                  const row = (
+                    <ToastRow
+                      key={toast.id}
+                      {...toast}
+                      style={toast.style ?? style}
+                      styles={toast.styles ?? styleOverrides}
+                      index={index}
+                      numberOfToasts={toastsForPosition.length}
+                      orderedToastIds={orderedToastIds}
+                      onDismiss={onDismiss}
+                      ref={toastStore.getToastRef(toast.id)}
+                    />
+                  );
+
+                  return ToastWrapper ? (
+                    <ToastWrapper key={toast.id} toastId={toast.id}>
+                      {row}
+                    </ToastWrapper>
+                  ) : (
+                    row
+                  );
+                })}
+              </Positioner>
+            );
+          })}
+        </DynamicToastContext.Provider>
+      </ToastContext.Provider>
+    </ToastHost>
+  );
+};
+
+Toaster.displayName = 'Toaster';

package/src/toast/animations.ts

@@ -0,0 +1,313 @@
+/**
+ * Derived from sonner-native v0.26.4 — src/animations.ts, src/animation-utils.ts
+ * and src/easings.ts (MIT © Gunnar Torfi Steinarsson). See the top-level NOTICE.
+ *
+ * W1 — THE EXIT DEFAULT IS A `Keyframe` INSTANCE, NOT A WORKLET BUILDER.
+ *
+ * Upstream returns a custom `EntryExitAnimationFunction` for both directions. On
+ * web that produces NO animation at all: reanimated's web layout-animation
+ * manager looks the builder up by preset name, finds none, logs a warning per
+ * toast and falls through to `makeElementVisible`, so a toast simply appears and
+ * disappears. A `ReanimatedKeyframe` compiles to a real CSS `@keyframes` rule on
+ * web and to the same interpolation on native, so one definition covers both
+ * platforms — which is what the exit default below is.
+ *
+ * ON WEB THE ENTER IS NOT A LAYOUT ANIMATION — NEVER HAND IT TO `entering`
+ * THERE. This is the fix for a blocker where a second toast landed exactly on top
+ * of the first, and it MUST NOT be undone by "simplifying" the web enter back
+ * into a `Keyframe`:
+ *
+ *   reanimated's web ENTERING path calls `setElementAnimation(element, config,
+ *   true)`, whose third argument is `shouldSavePosition`. For any animation name
+ *   that is not one of its own predefined presets — which is every `Keyframe`,
+ *   since those mint a fresh `REA-ENTERING-n` rule — it also schedules
+ *   `scheduleAnimationCleanup(name, duration, cb)`, and that callback runs
+ *   `setElementPosition(element, snapshot)`: `position: absolute`, an explicit
+ *   `top`/`left`/`width`/`height` and `transform: ''`, taken from a snapshot
+ *   captured when the enter animation ENDED. The timeout is `duration * 5`, so at
+ *   Bloom's 300ms enter the row is frozen in VIEWPORT coordinates 1500ms after it
+ *   appeared, and its parent collapses to `height: 0`. A row that moves inside
+ *   that window — i.e. any row that is still on screen when the next toast
+ *   arrives — has its stack translate exactly cancelled and redraws on top of the
+ *   newcomer. It is completely silent: no error, no warning.
+ *
+ * So on web the enter is driven imperatively instead: `ToastRow` seeds a shared
+ * value at 0 and animates it to 1 (`useAnimatedTarget`'s `from`), interpolating
+ * opacity and `ENTER_TRANSLATE_Y` to the same distances and curve the `Keyframe`
+ * uses, without touching reanimated's web layout-animation machinery.
+ *
+ * NATIVE KEEPS THE `Keyframe` ON `entering`. `ENTER_DRIVER` below is the ONE
+ * switch: there is no `setElementPosition` on native — that whole pin is a web-DOM
+ * behaviour — so native pays nothing for the web bug, and driving the enter
+ * imperatively there instead regressed it hard (a `bottom-center` toast stopped
+ * painting altogether). Native runs the device-verified layout-animation path and
+ * never starts a mount-time `withTiming` for the enter at all.
+ *
+ * The EXIT goes through `exiting` on BOTH platforms, which is safe: reanimated
+ * pins the throwaway dummy clone it animates (`shouldSavePosition` is false for
+ * the real element), and it is what keeps a dismissed row mounted long enough to
+ * animate.
+ *
+ * Consumer-supplied *predefined* builders (`FadeIn`, `SlideInUp`) keep working on
+ * both platforms for both enter and exit, and always go through `entering` /
+ * `exiting`. A consumer's own custom worklet builder still animates on native and
+ * is silently ignored on web, and a consumer's custom `Keyframe` passed as
+ * `animation.enter` will hit the pin described above on web — both are reanimated
+ * limitations Bloom cannot bridge.
+ *
+ * Exit instances are cached per animation shape because building one is not free
+ * and, more importantly, because `Keyframe.parseDefinitions()` MUTATES the
+ * definition object it was constructed with (it rewrites `from`/`to` into
+ * `0`/`100` and deletes them). Each cached instance therefore owns its own
+ * definition object; sharing one definition across two instances would make the
+ * second throw "Please provide 0 or 'from' keyframe". Re-parsing a single
+ * instance is idempotent, so one instance is safely shared by every row of the
+ * same shape.
+ */
+import { Platform } from 'react-native';
+import {
+  Easing,
+  Keyframe,
+  useReducedMotion,
+  type ReanimatedKeyframe,
+} from 'react-native-reanimated';
+
+import { ENTERING_ANIMATION_DURATION, toastDefaults } from './constants';
+import { useToastContext } from './context';
+import type {
+  ToastAnimation,
+  ToastEntryExitAnimation,
+  ToastPosition,
+} from './types';
+
+/**
+ * `Easing.bezier()` (not `bezierFn`) returns an easing *factory*, which is what
+ * `Keyframe` accepts on both platforms — reanimated's dev-only worklet assertion
+ * short-circuits on the `.factory` property, so these pass without the worklets
+ * babel plugin too.
+ */
+const EASE_OUT_QUART = Easing.bezier(0.165, 0.84, 0.44, 1);
+const EASE_IN_OUT_CUBIC = Easing.bezier(0.645, 0.045, 0.355, 1);
+
+export type ToastEnterDriver = 'imperative' | 'layoutAnimation';
+
+/**
+ * THE one platform switch in the toast engine: which mechanism plays Bloom's
+ * DEFAULT enter animation. See the header for why the two platforms cannot share
+ * one mechanism.
+ */
+export const TOAST_ENTER_DRIVER: ToastEnterDriver =
+  Platform.OS === 'web' ? 'imperative' : 'layoutAnimation';
+
+/** Worklet-callable easing for `withTiming` inside mappers and layout transitions. */
+export const easeOutQuartFn = Easing.bezierFn(0.165, 0.84, 0.44, 1);
+export const easeInOutCircFn = Easing.bezierFn(0.785, 0.135, 0.15, 0.86);
+
+/** How far a row travels on the way in, per position. */
+const ENTER_TRANSLATE_Y: Record<ToastPosition, number> = {
+  'top-center': -20,
+  'bottom-center': 50,
+  center: 50,
+};
+
+/** A lone row leaves the screen entirely; a stacked one only slides by `stackGap`. */
+const EXIT_TRANSLATE_Y_SINGLE = 150;
+
+/**
+ * Bounded so an animated `gap` cannot grow the cache without limit. The natural
+ * key space is 3 enter shapes + 3 positions x hidden x single x one stackGap = 15
+ * entries, so this leaves room for a few gap values while staying O(1) memory.
+ */
+export const MAX_CACHED_ANIMATIONS = 32;
+
+const animationCache = new Map<string, ReanimatedKeyframe>();
+
+function cachedAnimation(
+  key: string,
+  build: () => ReanimatedKeyframe,
+): ReanimatedKeyframe {
+  const hit = animationCache.get(key);
+  if (hit) {
+    return hit;
+  }
+
+  if (animationCache.size >= MAX_CACHED_ANIMATIONS) {
+    // Map iterates in insertion order, so this evicts the least recently added.
+    const oldest = animationCache.keys().next();
+    if (!oldest.done) {
+      animationCache.delete(oldest.value);
+    }
+  }
+
+  const built = build();
+  animationCache.set(key, built);
+  return built;
+}
+
+/** Exported so the bounded-growth invariant above is testable. */
+export function toastAnimationCacheSize(): number {
+  return animationCache.size;
+}
+
+/** Native only — on web the same shape is played imperatively by `ToastRow`. */
+export function getToastEnterAnimation(
+  position: ToastPosition,
+): ReanimatedKeyframe {
+  return cachedAnimation(
+    `enter|${position}`,
+    () =>
+      new Keyframe({
+        from: {
+          opacity: 0,
+          transform: [{ translateY: ENTER_TRANSLATE_Y[position] }],
+        },
+        to: {
+          opacity: 1,
+          transform: [{ translateY: 0 }],
+          easing: EASE_OUT_QUART,
+        },
+      }).duration(ENTERING_ANIMATION_DURATION),
+  );
+}
+
+export function getToastExitAnimation({
+  position,
+  isHiddenByLimit,
+  isSingle,
+  stackGap,
+}: {
+  position: ToastPosition;
+  isHiddenByLimit: boolean;
+  isSingle: boolean;
+  stackGap: number;
+}): ReanimatedKeyframe {
+  return cachedAnimation(
+    `exit|${position}|${isHiddenByLimit}|${isSingle}|${stackGap}`,
+    () => {
+      // A row culled by `visibleToasts` is buried under the stack; sliding it
+      // would look wrong, so it only fades.
+      if (isHiddenByLimit) {
+        return new Keyframe({
+          from: { opacity: 1 },
+          to: { opacity: 0, easing: EASE_IN_OUT_CUBIC },
+        }).duration(ENTERING_ANIMATION_DURATION);
+      }
+
+      const distance = isSingle ? EXIT_TRANSLATE_Y_SINGLE : stackGap;
+      const translateY = position === 'top-center' ? -distance : distance;
+
+      return (
+        new Keyframe({
+          from: { opacity: 1, transform: [{ translateY: 0 }] },
+          to: { opacity: 0, transform: [{ translateY }], easing: EASE_IN_OUT_CUBIC },
+        })
+          // Matches the store's overlay teardown delay, which is also
+          // ENTERING_ANIMATION_DURATION — a longer exit would be cut off.
+          .duration(ENTERING_ANIMATION_DURATION)
+      );
+    },
+  );
+}
+
+type ResolvedAnimation = Exclude<ToastEntryExitAnimation, 'default'>;
+
+export type ResolvedEnterAnimation = {
+  entering: ResolvedAnimation | undefined;
+  enterTranslateY: number | undefined;
+};
+
+/**
+ * Pure so the platform split is testable without a renderer.
+ *
+ * INVARIANT: exactly ONE of `entering` / `enterTranslateY` is ever set. Both
+ * would play the enter twice; neither would leave the row with no enter animation
+ * at all and — on the imperative path — parked at `opacity: 0`, one full
+ * `enterTranslateY` away from its slot. A consumer override always wins and always
+ * goes through `entering`, on both platforms.
+ */
+export function resolveToastEnterAnimation({
+  position,
+  enterOverride,
+  driver,
+}: {
+  position: ToastPosition;
+  enterOverride: ToastEntryExitAnimation | undefined;
+  driver: ToastEnterDriver;
+}): ResolvedEnterAnimation {
+  if (enterOverride !== undefined && enterOverride !== 'default') {
+    return { entering: enterOverride, enterTranslateY: undefined };
+  }
+  return driver === 'imperative'
+    ? { entering: undefined, enterTranslateY: ENTER_TRANSLATE_Y[position] }
+    : { entering: getToastEnterAnimation(position), enterTranslateY: undefined };
+}
+
+/** Per-toast animation wins over the outlet's; `'default'` opts back in to Bloom's. */
+export const resolveAnimationField = (
+  toastValue: ToastEntryExitAnimation | undefined,
+  toasterValue: ToastEntryExitAnimation | undefined,
+  defaultValue: ResolvedAnimation,
+): ResolvedAnimation => {
+  const resolved = toastValue !== undefined ? toastValue : toasterValue;
+  if (resolved === undefined || resolved === 'default') {
+    return defaultValue;
+  }
+  return resolved;
+};
+
+export const useToastLayoutAnimations = (
+  positionProp: ToastPosition | undefined,
+  animationProp: ToastAnimation | undefined,
+  isHiddenByLimit: boolean,
+  numberOfToasts: number,
+): {
+  entering: ResolvedAnimation | undefined;
+  exiting: ResolvedAnimation | undefined;
+  /**
+   * How far `ToastRow`'s imperative enter travels, or `undefined` when nothing
+   * should be driven imperatively — because `entering` is playing the enter
+   * instead (native, or a consumer override on either platform), or because
+   * reduced motion is on and there is no enter animation at all.
+   */
+  enterTranslateY: number | undefined;
+} => {
+  const {
+    position: positionCtx,
+    gap,
+    animation: animationCtx,
+  } = useToastContext();
+  const position = positionProp ?? positionCtx;
+  const stackGap = gap ?? toastDefaults.stackGap;
+  const reducedMotion = useReducedMotion();
+
+  if (reducedMotion) {
+    return { entering: undefined, exiting: undefined, enterTranslateY: undefined };
+  }
+
+  const defaultExiting = getToastExitAnimation({
+    position,
+    isHiddenByLimit,
+    isSingle: numberOfToasts <= 1,
+    stackGap,
+  });
+
+  return {
+    ...resolveToastEnterAnimation({
+      position,
+      enterOverride:
+        animationProp?.enter !== undefined
+          ? animationProp.enter
+          : animationCtx?.enter,
+      driver: TOAST_ENTER_DRIVER,
+    }),
+    // An overflow-culled row always uses Bloom's fade: a consumer's custom exit
+    // would animate a row the user cannot even see.
+    exiting: isHiddenByLimit
+      ? defaultExiting
+      : resolveAnimationField(
+          animationProp?.exit,
+          animationCtx?.exit,
+          defaultExiting,
+        ),
+  };
+};

package/src/toast/constants.ts

@@ -0,0 +1,76 @@
+/**
+ * Derived from sonner-native v0.26.4 — src/constants.ts and src/animations.ts
+ * (MIT © Gunnar Torfi Steinarsson). See the top-level NOTICE.
+ *
+ * The two animation durations live HERE rather than in `animations.ts` so
+ * `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 type {
+  AutoWiggle,
+  ToastPosition,
+  ToastSwipeDirection,
+  ToastTheme,
+  ToastVariant,
+} from './types';
+
+/** Fallback row height until a toast has been measured. */
+export const ESTIMATED_TOAST_HEIGHT = 70;
+export const CLOSE_BUTTON_HIT_AREA = 60;
+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;
+
+/** 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;
+
+export const toastDefaults: {
+  duration: number;
+  position: ToastPosition;
+  offset: number;
+  swipeToDismissDirection: ToastSwipeDirection;
+  variant: ToastVariant | undefined;
+  visibleToasts: number;
+  closeButton: boolean;
+  dismissible: boolean;
+  unstyled: boolean;
+  invert: boolean;
+  pauseWhenPageIsHidden: boolean;
+  gap: number;
+  theme: ToastTheme;
+  autoWiggleOnUpdate: AutoWiggle;
+  richColors: boolean;
+  enableStacking: boolean;
+  stackGap: number;
+  allowFontScaling: boolean;
+} = {
+  duration: 3000,
+  position: 'bottom-center',
+  /**
+   * 0 means "derive from the safe-area inset" — `getInsetValues` then yields
+   * `inset + 8`, or 16 when there is no inset. A non-zero default would pin the
+   * stack to a fixed offset and ignore the notch / home indicator entirely.
+   */
+  offset: 0,
+  swipeToDismissDirection: 'left',
+  /**
+   * No default variant: a plain `toast('Saved')` must render neutral. Upstream
+   * defaults this to `'info'`, which silently gives every unqualified toast
+   * info styling.
+   */
+  variant: undefined,
+  visibleToasts: 3,
+  closeButton: false,
+  dismissible: true,
+  unstyled: false,
+  invert: false,
+  pauseWhenPageIsHidden: true,
+  gap: 8,
+  theme: 'system',
+  autoWiggleOnUpdate: 'never',
+  richColors: false,
+  enableStacking: false,
+  stackGap: 8,
+  allowFontScaling: true,
+};

package/src/toast/context.tsx

@@ -0,0 +1,44 @@
+/**
+ * Derived from sonner-native v0.26.4 — src/context.tsx
+ * (MIT © Gunnar Torfi Steinarsson). See the top-level NOTICE.
+ *
+ * Two contexts, split by change frequency: the resolved `Toaster` configuration
+ * (stable for the lifetime of the outlet) and the live stack state (changes on
+ * every measurement). Splitting them keeps a height measurement from
+ * re-rendering every row's config-derived memo.
+ *
+ * Upstream also passes `addToast` through the stable context; Bloom's rows talk
+ * to `toastStore` directly, which is the single authority.
+ */
+import * as React from 'react';
+import type {
+  DynamicToastContextType,
+  StableToastContextType,
+} from './types';
+
+export const ToastContext = React.createContext<StableToastContextType | null>(
+  null,
+);
+ToastContext.displayName = 'BloomToastContext';
+
+export const DynamicToastContext =
+  React.createContext<DynamicToastContextType | null>(null);
+DynamicToastContext.displayName = 'BloomDynamicToastContext';
+
+export const useToastContext = (): StableToastContextType => {
+  const context = React.useContext(ToastContext);
+  if (!context) {
+    throw new Error('useToastContext must be used within a <ToastOutlet>');
+  }
+  return context;
+};
+
+export const useDynamicToastContext = (): DynamicToastContextType => {
+  const context = React.useContext(DynamicToastContext);
+  if (!context) {
+    throw new Error(
+      'useDynamicToastContext must be used within a <ToastOutlet>',
+    );
+  }
+  return context;
+};