@oxyhq/bloom 1.12.0 → 1.13.0

package/src/fab/Fab.tsx

@@ -1,4 +1,4 @@
-import React, { memo, useEffect, useMemo, useRef, type ComponentType } from 'react';
+import React, { memo, useMemo, type ComponentType } from 'react';
 import {
   Animated,
   Pressable,
@@ -11,7 +11,7 @@ import {
 } from 'react-native';
 import { styled } from 'react-native-css';
 
-import { useBottomEdgeCollapsed, useBottomEdgeInset } from '../layout/bottom-edge';
+import { useBottomEdgeInset } from '../layout/bottom-edge';
 import { useTheme } from '../theme/use-theme';
 import { animation, borderRadius } from '../styles/tokens';
 import { bloomShadowStyle } from '../design-tokens/shadows';
@@ -57,23 +57,6 @@ function resolveSize(size: FabSize | number): ResolvedSize {
   return SIZE_CONFIG[size];
 }
 
-/**
- * How long the FAB takes to leave when the bottom edge collapses.
- *
- * A DURATION, not a spring matched to the tab bar's — because the FAB is not
- * trying to stay level with the bar any more. It tried: an earlier version rode
- * the bar down by the 14px it shrank, and on a device the two visibly did not
- * move together. The bar animates on the UI thread while this component learns
- * about the collapse through `runOnJS` plus two React renders, so it starts one
- * to three frames late — worst exactly while scrolling, which is the only time
- * it happens. No spring config fixes a variable start delay.
- *
- * Fading is what makes that latency invisible: there is no spatial relationship
- * left to violate, so nothing betrays the few frames. Slightly quicker than the
- * bar's 380ms minimize, so the FAB is gone before the eye goes looking for it.
- */
-const COLLAPSE_FADE_MS = 200;
-
 const DEFAULT_OFFSET = 16;
 const DEFAULT_Z_INDEX = 50;
 const HIT_SLOP = { top: 8, bottom: 8, left: 8, right: 8 } as const;
@@ -90,10 +73,6 @@ const HIT_SLOP = { top: 8, bottom: 8, left: 8, right: 8 } as const;
  * lands above a floating tab bar instead of behind it. A z-index cannot fix that
  * pairing: the bar's host is the last sibling of the app shell and paints over
  * every descendant, so the FAB has to be somewhere else, not merely on top.
- *
- * It is the RESERVED inset, so this stays a static layout value — it does not
- * shrink when the bar collapses. The FAB fades out instead of chasing the bar
- * down; see `COLLAPSE_FADE_MS` for why chasing it does not work.
  */
 function placementStyle(
   placement: FabPlacement,
@@ -139,13 +118,10 @@ function placementStyle(
  */
 type FabPressableProps = Pick<
   PressableProps,
-  | 'accessibilityElementsHidden'
   | 'accessibilityHint'
   | 'accessibilityLabel'
   | 'accessibilityRole'
   | 'accessibilityState'
-  | 'importantForAccessibility'
-  | 'pointerEvents'
   | 'children'
   | 'className'
   | 'disabled'
@@ -182,35 +158,11 @@ const FabComponent: React.FC<FabProps> = ({
   zIndex = DEFAULT_Z_INDEX,
 }) => {
   const bottomEdgeInset = useBottomEdgeInset();
-  // The FAB belongs to the chrome: when the chrome retracts, so does it.
-  const bottomEdgeCollapsed = useBottomEdgeCollapsed();
   const theme = useTheme();
   const sizeConfig = useMemo(() => resolveSize(size), [size]);
   const isExtended = label != null && label.length > 0;
   const content = icon ?? children;
 
-  // Only a FAB anchored to the BOTTOM edge is affected by the bottom edge
-  // collapsing; a top-placed or consumer-placed one is not.
-  const hidesOnCollapse = placement === 'bottom-right' || placement === 'bottom-left';
-  const hidden = hidesOnCollapse && bottomEdgeCollapsed;
-  const fade = useRef(new Animated.Value(1)).current;
-
-  // An effect because RN's Animated has no declarative form — starting an
-  // animation is imperative by construction. `opacity` is native-drivable, so
-  // once started this never touches the JS thread again, which matters: it runs
-  // while the user is mid-scroll.
-  // The disabled dim rides on the SAME value rather than a second static
-  // `opacity` in the style array: two opacity entries would mean the later one
-  // silently wins, so a disabled FAB would either not dim or not fade.
-  const restingOpacity = disabled ? 0.5 : 1;
-  useEffect(() => {
-    Animated.timing(fade, {
-      toValue: hidden ? 0 : restingOpacity,
-      duration: COLLAPSE_FADE_MS,
-      useNativeDriver: true,
-    }).start();
-  }, [hidden, restingOpacity, fade]);
-
   const { scaleAnim, onPressIn, onPressOut } = usePressAnimation(
     disabled ? undefined : animation.pressScale,
   );
@@ -277,7 +229,7 @@ const FabComponent: React.FC<FabProps> = ({
         placementStyle(placement, offset, bottomEdgeInset),
         { zIndex },
         containerStyle,
-        { opacity: fade },
+        disabled && { opacity: 0.5 },
         pressed && !disabled && { backgroundColor: pressedBackground },
         // Before the caller's `style`, so `style` keeps winning the whole array
         // the way it always has (and the way the web fork spreads it last). The
@@ -287,12 +239,7 @@ const FabComponent: React.FC<FabProps> = ({
         { transform: [{ scale: scaleAnim }] },
         style,
       ]}
-      // A FAB that has faded out must not be pressable or reachable — an
-      // invisible target that still takes a tap is worse than a visible one.
-      pointerEvents={hidden ? 'none' : 'auto'}
-      accessibilityElementsHidden={hidden}
-      importantForAccessibility={hidden ? 'no-hide-descendants' : 'auto'}
-      onPress={disabled || hidden ? undefined : onPress}
+      onPress={disabled ? undefined : onPress}
       onPressIn={handlePressIn}
       onPressOut={handlePressOut}
       disabled={disabled}

package/src/fab/Fab.web.tsx

@@ -7,7 +7,7 @@ import React, {
   type MouseEvent,
 } from 'react';
 
-import { useBottomEdgeCollapsed, useBottomEdgeInset } from '../layout/bottom-edge';
+import { useBottomEdgeInset } from '../layout/bottom-edge';
 import { useTheme } from '../theme/use-theme';
 import { animation, borderRadius } from '../styles/tokens';
 import { pressedSurface } from '../theme/press-colors';
@@ -83,11 +83,8 @@ const BLOOM_FAB_CSS = interactiveWebCss({
     box-shadow: var(--bloom-fab-shadow);
     font-family: inherit;
   `,
-  // `opacity` carries two things: the disabled dim and the collapse fade. 200ms
-  // is the collapse's number — the dim is imperceptibly slower for it, and one
-  // property cannot hold two durations.
   transition:
-    'opacity 200ms ease, transform 120ms ease, box-shadow 160ms ease, background-color 120ms ease',
+    'opacity 120ms ease, transform 120ms ease, box-shadow 160ms ease, background-color 120ms ease',
   // A FAB lifts on hover rather than dimming: it floats over the content, so a
   // deeper shadow is the affordance an opacity dip cannot express.
   hover: { declarations: 'box-shadow: var(--bloom-fab-shadow-hover);' },
@@ -132,16 +129,6 @@ const BLOOM_FAB_CSS = interactiveWebCss({
  * behind it. A z-index cannot fix that pairing: the bar's host is the last
  * sibling of the app shell and paints over every descendant, so the FAB has to be
  * somewhere else, not merely on top.
- *
- * It is the LIVE inset here, and `bottom` is transitioned — where the native fork
- * follows a collapsing bar with an Animated TRANSFORM instead. The forks differ
- * because the constraint does. Native must stay off the JS thread mid-scroll, so
- * the follow has to be a native-driver transform. On web a transform cannot carry
- * it: `:active` already sets `transform: scale(...)` from the shared
- * `interactive-web-css` rule, and an inline transform would beat that stylesheet
- * rule and eat the press scale — and one property cannot hold the press's 120ms
- * and the collapse's 380ms at once. `bottom` is a separate property with its own
- * duration, and it moves twice per scroll gesture rather than per frame.
  */
 function placementStyle(
   placement: FabPlacement,
@@ -211,13 +198,6 @@ const FabWebComponent: React.FC<FabProps> = ({
 }) => {
   useInteractiveWebCss(STYLE_ID, BLOOM_FAB_CSS);
   const bottomEdgeInset = useBottomEdgeInset();
-  // The FAB belongs to the chrome: when the chrome retracts, so does it. Only a
-  // BOTTOM-anchored FAB is affected by the bottom edge collapsing.
-  const bottomEdgeCollapsed = useBottomEdgeCollapsed();
-  // A faded-out FAB must not be tabbable, clickable or announced — an invisible
-  // target that still takes a click is worse than a visible one.
-  const hidden =
-    bottomEdgeCollapsed && (placement === 'bottom-right' || placement === 'bottom-left');
   const theme = useTheme();
   const reactId = useId();
   const resolvedId = id ?? `bloom-fab-${reactId}`;
@@ -254,13 +234,6 @@ const FabWebComponent: React.FC<FabProps> = ({
       ['--bloom-fab-press-scale' as string]: animation.pressScale,
       ...placementStyle(placement, offset, bottomEdgeInset),
     };
-    // Only while HIDDEN, so the `:disabled { opacity }` rule still owns the
-    // dim the rest of the time — an inline opacity would beat that stylesheet
-    // rule unconditionally and a disabled FAB would stop dimming.
-    if (hidden) {
-      base.opacity = 0;
-      base.pointerEvents = 'none';
-    }
     if (isExtended) {
       const pad = sizeConfig.diameter <= 44 ? 14 : 20;
       base.paddingLeft = pad;
@@ -314,8 +287,6 @@ const FabWebComponent: React.FC<FabProps> = ({
       onClick={handleClick}
       disabled={disabled}
       aria-disabled={disabled || undefined}
-      aria-hidden={hidden || undefined}
-      tabIndex={hidden ? -1 : undefined}
       aria-label={ariaLabel}
       title={title ?? accessibilityHint}
       data-testid={testID}

package/src/layout/bottom-edge.tsx

@@ -27,32 +27,27 @@
  * edge, so two surfaces at that edge overlap rather than stack; the tallest is
  * what a new surface has to clear. Summing would strand it at twice the height.
  *
- * ## A size and a state, because they travel differently
- *
- * A surface that collapses — the tab bar minimizes 58 -> 44 on scroll — publishes
- * two things, and only one of them is a measurement:
- *
- *   - RESERVED (`useBottomEdgeInset`) never shrinks while the claimant is
- *     mounted. It is what must be kept permanently free: a list's bottom
- *     padding, a toast stack's offset. Shrinking it on collapse would jitter a
- *     list's content size on every scroll and jump a toast 14px mid-display,
- *     because the bar re-expands the instant the user scrolls back up.
- *   - COLLAPSED (`useBottomEdgeCollapsed`) is a boolean, deliberately, and this
- *     is the part that was learned the hard way. It first shipped as a live
- *     PIXEL height so a FAB could ride down with the bar — and it felt broken on
- *     a device. The bar animates on the UI thread; a React consumer learns about
- *     the change through `runOnJS` plus two render passes, so its motion STARTS
- *     one to three frames late, worst exactly while scrolling because that is
- *     when the JS thread is busiest. No spring config fixes a variable start
- *     delay.
- *
- * Two things moving together betray that lag; a state change does not. A reader
- * that FADES on this boolean has no spatial relationship to violate, so the same
- * few frames of latency are imperceptible. That is why the channel is a state and
- * not a geometry: it is the shape of signal that survives the trip to the JS
- * thread. Anything that genuinely must track the collapse per-frame has to read
- * the tab bar's own shared value on the UI thread instead — React state is the
- * wrong transport for it, at any width.
+ * ## What does NOT belong here: the collapse
+ *
+ * The tab bar minimizes 58 -> 44 on scroll, and this registry twice tried to
+ * publish that so a FAB could react — first as a live pixel height (1.11.0), then
+ * as a boolean (1.12.0). Both felt wrong on a device, for the same reason, and
+ * the reason is structural rather than a matter of tuning:
+ *
+ *   the bar animates on the UI thread, while anything reading it from here
+ *   arrives via `runOnJS` plus two React render passes.
+ *
+ * So a consumer's reaction STARTS one to three frames after the bar's, and the
+ * delay is variable — worst exactly while scrolling, because that is when the JS
+ * thread is busiest. Fading instead of moving does not hide it either: the eye
+ * still sees two pieces of chrome change at different moments.
+ *
+ * A collapse is MOTION, and motion that must stay in lock-step with a
+ * reanimated animation has to travel as a shared value on the UI thread. React
+ * state is the wrong transport at any width, so it is not offered here at all.
+ * The app owns that signal — Mention drives its header, its bar and its FAB from
+ * one `SharedValue` through `useAnimatedStyle` — and this registry stays what it
+ * is good at: GEOMETRY. Where things are, not when they move.
  *
  * ## Why an external store
  *
@@ -72,50 +67,33 @@ import {
   type PropsWithChildren,
 } from 'react';
 
-interface Claim {
-  /** What the surface keeps permanently free, collapsed or not. */
-  reserved: number;
-  /** Whether it is currently in its collapsed state. */
-  collapsed: boolean;
-}
-
 interface BottomEdgeStore {
   subscribe: (onChange: () => void) => () => void;
   /**
-   * The cached totals. Each returns the SAME number until a claim actually
-   * changes it — `useSyncExternalStore` re-renders forever if the snapshot is
-   * recomputed per call, and a reader of one channel must not re-render when
-   * only the other moved.
+   * The cached total. Returns the SAME number until a claim actually changes it
+   * — `useSyncExternalStore` re-renders forever if the snapshot is recomputed
+   * per call.
    */
-  getReserved: () => number;
-  getCollapsed: () => boolean;
-  claim: (id: string, reserved: number, collapsed: boolean) => void;
+  getInset: () => number;
+  claim: (id: string, height: number) => void;
   release: (id: string) => void;
 }
 
 function createBottomEdgeStore(): BottomEdgeStore {
-  const claims = new Map<string, Claim>();
+  const claims = new Map<string, number>();
   const listeners = new Set<() => void>();
-  let reserved = 0;
-  let collapsed = false;
+  let inset = 0;
 
   const recompute = () => {
-    let nextReserved = 0;
-    // ANY claimant collapsing collapses the edge. With the one floating bar this
-    // is written for the two readings coincide; where they would not, "something
-    // at this edge just retracted" is still the signal a reader wants, and it is
-    // the safe direction — a FAB that fades when it did not strictly have to
-    // beats one that stays put over a bar that left.
-    let nextCollapsed = false;
-    for (const claim of claims.values()) {
-      if (claim.reserved > nextReserved) nextReserved = claim.reserved;
-      if (claim.collapsed) nextCollapsed = true;
+    let next = 0;
+    for (const height of claims.values()) {
+      if (height > next) next = height;
     }
-    // Bail before notifying: a re-registration at an unchanged footprint (every
-    // render of a claimant that did not move) must not re-render every reader.
-    if (nextReserved === reserved && nextCollapsed === collapsed) return;
-    reserved = nextReserved;
-    collapsed = nextCollapsed;
+    // Bail before notifying: a re-registration at an unchanged height (every
+    // render of a claimant whose footprint did not move) must not re-render
+    // every reader.
+    if (next === inset) return;
+    inset = next;
     for (const listener of listeners) listener();
   };
 
@@ -126,12 +104,10 @@ function createBottomEdgeStore(): BottomEdgeStore {
         listeners.delete(onChange);
       };
     },
-    getReserved: () => reserved,
-    getCollapsed: () => collapsed,
-    claim(id, nextReserved, nextCollapsed) {
-      const existing = claims.get(id);
-      if (existing?.reserved === nextReserved && existing.collapsed === nextCollapsed) return;
-      claims.set(id, { reserved: nextReserved, collapsed: nextCollapsed });
+    getInset: () => inset,
+    claim(id, height) {
+      if (claims.get(id) === height) return;
+      claims.set(id, height);
       recompute();
     },
     release(id) {
@@ -160,18 +136,15 @@ BottomEdgeProvider.displayName = 'BottomEdgeProvider';
 // would resubscribe `useSyncExternalStore` on every render.
 const NO_SUBSCRIPTION = () => () => {};
 const NO_INSET = () => 0;
-const NO_COLLAPSE = () => false;
 
 /**
- * How much of the bottom edge is permanently RESERVED, in px.
+ * How much of the bottom edge is already occupied, in px.
  *
- * Never shrinks while its claimant is mounted, so it is the number for anything
- * that must not move as the user scrolls — a list's bottom padding, a toast
- * stack's offset:
+ * Add it to whatever offset the surface would otherwise use:
  *
  * ```tsx
- * const reserved = useBottomEdgeInset();
- * <FlatList contentContainerStyle={{ paddingBottom: reserved + 12 }} />
+ * const occupied = useBottomEdgeInset();
+ * <View style={{ position: 'absolute', bottom: windowEdgeGap(insets.bottom) + occupied }} />
  * ```
  *
  * `0` outside a provider, and `0` on the first commit even inside one — a claim
@@ -183,56 +156,29 @@ export function useBottomEdgeInset(): number {
   const store = useContext(BottomEdgeContext);
   return useSyncExternalStore(
     store?.subscribe ?? NO_SUBSCRIPTION,
-    store?.getReserved ?? NO_INSET,
-    store?.getReserved ?? NO_INSET,
-  );
-}
-
-/**
- * Whether the surface owning the bottom edge is currently COLLAPSED — the tab
- * bar minimized on scroll.
- *
- * A boolean rather than a live height, on purpose: see the note at the top of
- * this file. A reader should FADE or otherwise change state on it, never try to
- * stay geometrically locked to the collapsing surface — that lock is what a
- * React-state channel cannot deliver, because the surface animates on the UI
- * thread and this arrives one to three frames later.
- *
- * ```tsx
- * const collapsed = useBottomEdgeCollapsed();
- * // fade out; do not chase the bar's new top edge
- * ```
- *
- * `false` outside a provider.
- */
-export function useBottomEdgeCollapsed(): boolean {
-  const store = useContext(BottomEdgeContext);
-  return useSyncExternalStore(
-    store?.subscribe ?? NO_SUBSCRIPTION,
-    store?.getCollapsed ?? NO_COLLAPSE,
-    store?.getCollapsed ?? NO_COLLAPSE,
+    store?.getInset ?? NO_INSET,
+    store?.getInset ?? NO_INSET,
   );
 }
 
 /**
- * Claim the bottom edge for as long as the caller is mounted.
+ * Claim `height` px of the bottom edge for as long as the caller is mounted.
  *
  * The claimant owns its own placement — claiming does not move it. It declares
- * the space it occupies so that everything reading the edge stays off it. Pass
- * the FULL footprint (the surface's height plus the gap it holds off the window
- * edge), which is the same number the surface positions itself with, and keep it
- * at the surface's FULL size even while collapsed: `reserved` is what must stay
- * permanently free, and the collapse is reported separately by `collapsed`.
+ * the space it occupies so that everything reading `useBottomEdgeInset()` stays
+ * off it. Pass the FULL footprint (the surface's height plus the gap it holds
+ * off the window edge), which is the same number the surface positions itself
+ * with.
  *
  * A no-op outside a provider, so a surface stays usable standalone.
  */
-export function useClaimBottomEdge(reserved: number, collapsed = false): void {
+export function useClaimBottomEdge(height: number): void {
   const store = useContext(BottomEdgeContext);
   const id = useId();
 
   useEffect(() => {
     if (!store) return;
-    store.claim(id, reserved, collapsed);
+    store.claim(id, height);
     return () => store.release(id);
-  }, [store, id, reserved, collapsed]);
+  }, [store, id, height]);
 }

package/src/layout/index.ts

@@ -5,9 +5,4 @@
  * parked there". A surface that floats at the bottom needs both.
  */
 export { EDGE_GAP, windowEdgeGap } from './edge';
-export {
-  BottomEdgeProvider,
-  useBottomEdgeInset,
-  useBottomEdgeCollapsed,
-  useClaimBottomEdge,
-} from './bottom-edge';
+export { BottomEdgeProvider, useBottomEdgeInset, useClaimBottomEdge } from './bottom-edge';

package/src/tab-bar/TabBarBase.tsx

@@ -20,7 +20,6 @@ import {
   useContext,
   useEffect,
   useMemo,
-  useState,
   type ComponentType,
 } from 'react';
 import { Pressable, StyleSheet, useWindowDimensions, View, type ViewStyle } from 'react-native';
@@ -30,7 +29,6 @@ import Animated, {
   interpolate,
   interpolateColor,
   runOnJS,
-  useAnimatedReaction,
   useAnimatedStyle,
   useSharedValue,
   withSpring,
@@ -424,33 +422,13 @@ function TabBarBody({
   // its own layout can never drift from where the bar actually sits.
   const bottomOffset = windowEdgeGap(insets.bottom);
 
-  // Whether the bar has settled into its minimized size, as REACT state.
-  //
-  // Reacting on `target` rather than on `progress` is what keeps this cheap:
-  // `target` is the binary 0/1 the minimize spring is heading for, so this fires
-  // twice per scroll gesture instead of once per frame. Crossing `progress > 0.5`
-  // would work too and would cost the same, but it would report the change
-  // halfway through the animation rather than when it was decided.
-  const [isMinimized, setIsMinimized] = useState(false);
-  useAnimatedReaction(
-    () => minimized.target.value,
-    (target, previous) => {
-      if (target !== previous) runOnJS(setIsMinimized)(target === 1);
-    },
-    [minimized],
-  );
-
   // Publish what the bar occupies so anything else at this edge stacks above it
-  // rather than behind it. Same numbers `useTabBarFootprint` reports, derived
-  // from the same geometry, so a consumer reading either can never disagree with
-  // where the bar actually sits.
-  //
-  // RESERVED stays the EXPANDED height even while minimized: the bar re-expands
-  // the moment the user scrolls back up, so anything that permanently reserves
-  // space (a list's bottom padding, a toast) must keep room for the full pill or
-  // it would jitter on every scroll. The collapse travels as its own STATE — see
-  // `layout/bottom-edge` for why it is a boolean and not the live height.
-  useClaimBottomEdge(bottomOffset + EXPANDED_HEIGHT, isMinimized);
+  // rather than behind it. Same number `useTabBarFootprint` reports, derived from
+  // the same two values, so a consumer reading either can never disagree with
+  // where the bar actually sits. The EXPANDED height on purpose: the bar
+  // minimizes on scroll and re-expands, so claiming the minimized height would
+  // drop a FAB onto the pill the moment the user scrolled back up.
+  useClaimBottomEdge(bottomOffset + EXPANDED_HEIGHT);
 
   // How centring and the animated inset compose: centring is STATIC and belongs
   // to the wrap, the inset stays ANIMATED on the pill inside it. The wrap is