@oxyhq/bloom 1.10.0 → 1.11.0

package/src/fab/Fab.web.tsx

@@ -7,7 +7,7 @@ import React, {
   type MouseEvent,
 } from 'react';
 
-import { useBottomEdgeInset } from '../layout/bottom-edge';
+import { useBottomEdgeLiveInset } from '../layout/bottom-edge';
 import { useTheme } from '../theme/use-theme';
 import { animation, borderRadius } from '../styles/tokens';
 import { pressedSurface } from '../theme/press-colors';
@@ -83,8 +83,11 @@ const BLOOM_FAB_CSS = interactiveWebCss({
     box-shadow: var(--bloom-fab-shadow);
     font-family: inherit;
   `,
+  // `bottom` is the collapse follow (see `placementStyle`) and is deliberately
+  // the slow one: it tracks the tab bar's 380ms minimize spring, while every
+  // other property here is interaction feedback and wants to feel instant.
   transition:
-    'opacity 120ms 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, bottom 380ms 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);' },
@@ -129,6 +132,16 @@ 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,
@@ -197,7 +210,9 @@ const FabWebComponent: React.FC<FabProps> = ({
   type = 'button',
 }) => {
   useInteractiveWebCss(STYLE_ID, BLOOM_FAB_CSS);
-  const bottomEdgeInset = useBottomEdgeInset();
+  // LIVE, not reserved: the FAB sits ON the edge, so it rides down with a
+  // minimizing tab bar rather than leaving a 14px hole above it.
+  const bottomEdgeLive = useBottomEdgeLiveInset();
   const theme = useTheme();
   const reactId = useId();
   const resolvedId = id ?? `bloom-fab-${reactId}`;
@@ -232,7 +247,7 @@ const FabWebComponent: React.FC<FabProps> = ({
         variantColors.foreground,
       ),
       ['--bloom-fab-press-scale' as string]: animation.pressScale,
-      ...placementStyle(placement, offset, bottomEdgeInset),
+      ...placementStyle(placement, offset, bottomEdgeLive),
     };
     if (isExtended) {
       const pad = sizeConfig.diameter <= 44 ? 14 : 20;

package/src/layout/bottom-edge.tsx

@@ -27,6 +27,21 @@
  * 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.
  *
+ * ## Two numbers, because there are two questions
+ *
+ * A surface that collapses — the tab bar minimizes 58 -> 44 on scroll — occupies
+ * less than it reserves. Readers want different halves of that:
+ *
+ *   - 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. Tracking the collapse here would jitter a
+ *     list's content size on every scroll and jump a toast 14px mid-display.
+ *   - LIVE (`useBottomEdgeLiveInset`) follows the collapse. It is what a surface
+ *     SITTING ON the edge wants, so it rides down with the bar instead of
+ *     leaving a hole.
+ *
+ * A claimant that never collapses passes one number and both answers agree.
+ *
  * ## Why an external store
  *
  * The claim set is mutable state living outside React. Reading it in a memoized
@@ -45,33 +60,46 @@ import {
   type PropsWithChildren,
 } from 'react';
 
+interface Claim {
+  /** What the surface keeps permanently free, collapsed or not. */
+  reserved: number;
+  /** What it occupies right now. */
+  current: number;
+}
+
 interface BottomEdgeStore {
   subscribe: (onChange: () => void) => () => void;
   /**
-   * The cached total. Returns the SAME number until a claim actually changes it
-   * — `useSyncExternalStore` re-renders forever if the snapshot is recomputed
-   * per call.
+   * 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.
    */
-  getInset: () => number;
-  claim: (id: string, height: number) => void;
+  getReserved: () => number;
+  getLive: () => number;
+  claim: (id: string, reserved: number, current: number) => void;
   release: (id: string) => void;
 }
 
 function createBottomEdgeStore(): BottomEdgeStore {
-  const claims = new Map<string, number>();
+  const claims = new Map<string, Claim>();
   const listeners = new Set<() => void>();
-  let inset = 0;
+  let reserved = 0;
+  let live = 0;
 
   const recompute = () => {
-    let next = 0;
-    for (const height of claims.values()) {
-      if (height > next) next = height;
+    let nextReserved = 0;
+    let nextLive = 0;
+    for (const claim of claims.values()) {
+      if (claim.reserved > nextReserved) nextReserved = claim.reserved;
+      if (claim.current > nextLive) nextLive = claim.current;
     }
-    // Bail before notifying: a re-registration at an unchanged height (every
+    // Bail before notifying: a re-registration at unchanged heights (every
     // render of a claimant whose footprint did not move) must not re-render
     // every reader.
-    if (next === inset) return;
-    inset = next;
+    if (nextReserved === reserved && nextLive === live) return;
+    reserved = nextReserved;
+    live = nextLive;
     for (const listener of listeners) listener();
   };
 
@@ -82,10 +110,12 @@ function createBottomEdgeStore(): BottomEdgeStore {
         listeners.delete(onChange);
       };
     },
-    getInset: () => inset,
-    claim(id, height) {
-      if (claims.get(id) === height) return;
-      claims.set(id, height);
+    getReserved: () => reserved,
+    getLive: () => live,
+    claim(id, nextReserved, nextCurrent) {
+      const existing = claims.get(id);
+      if (existing?.reserved === nextReserved && existing.current === nextCurrent) return;
+      claims.set(id, { reserved: nextReserved, current: nextCurrent });
       recompute();
     },
     release(id) {
@@ -116,13 +146,15 @@ const NO_SUBSCRIPTION = () => () => {};
 const NO_INSET = () => 0;
 
 /**
- * How much of the bottom edge is already occupied, in px.
+ * How much of the bottom edge is permanently RESERVED, in px.
  *
- * Add it to whatever offset the surface would otherwise use:
+ * 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:
  *
  * ```tsx
- * const occupied = useBottomEdgeInset();
- * <View style={{ position: 'absolute', bottom: windowEdgeGap(insets.bottom) + occupied }} />
+ * const reserved = useBottomEdgeInset();
+ * <FlatList contentContainerStyle={{ paddingBottom: reserved + 12 }} />
  * ```
  *
  * `0` outside a provider, and `0` on the first commit even inside one — a claim
@@ -134,29 +166,54 @@ export function useBottomEdgeInset(): number {
   const store = useContext(BottomEdgeContext);
   return useSyncExternalStore(
     store?.subscribe ?? NO_SUBSCRIPTION,
-    store?.getInset ?? NO_INSET,
-    store?.getInset ?? NO_INSET,
+    store?.getReserved ?? NO_INSET,
+    store?.getReserved ?? NO_INSET,
+  );
+}
+
+/**
+ * How much of the bottom edge is occupied RIGHT NOW, in px — the same number as
+ * {@link useBottomEdgeInset} for a surface that does not collapse, and smaller
+ * while one does.
+ *
+ * This is what a surface sitting ON the edge wants, so it rides down with a
+ * minimizing tab bar rather than leaving a hole above it. It changes when the
+ * collapse STATE changes, not per frame: a claimant reports its settled
+ * footprint and the reader animates the difference itself, which keeps the
+ * motion on whatever animation system that reader already uses instead of
+ * forcing a shared one through React state.
+ */
+export function useBottomEdgeLiveInset(): number {
+  const store = useContext(BottomEdgeContext);
+  return useSyncExternalStore(
+    store?.subscribe ?? NO_SUBSCRIPTION,
+    store?.getLive ?? NO_INSET,
+    store?.getLive ?? NO_INSET,
   );
 }
 
 /**
- * Claim `height` px of the bottom edge for as long as the caller is mounted.
+ * Claim 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 `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.
+ * 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.
+ *
+ * `current` is what the surface occupies right now; it defaults to `reserved`,
+ * which is correct for anything that does not collapse. A surface that shrinks
+ * on scroll passes its live footprint as `current` and keeps `reserved` at its
+ * full size — see the two channels above for why both are needed.
  *
  * A no-op outside a provider, so a surface stays usable standalone.
  */
-export function useClaimBottomEdge(height: number): void {
+export function useClaimBottomEdge(reserved: number, current: number = reserved): void {
   const store = useContext(BottomEdgeContext);
   const id = useId();
 
   useEffect(() => {
     if (!store) return;
-    store.claim(id, height);
+    store.claim(id, reserved, current);
     return () => store.release(id);
-  }, [store, id, height]);
+  }, [store, id, reserved, current]);
 }

package/src/layout/index.ts

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

package/src/tab-bar/TabBarBase.tsx

@@ -20,6 +20,7 @@ import {
   useContext,
   useEffect,
   useMemo,
+  useState,
   type ComponentType,
 } from 'react';
 import { Pressable, StyleSheet, useWindowDimensions, View, type ViewStyle } from 'react-native';
@@ -29,6 +30,7 @@ import Animated, {
   interpolate,
   interpolateColor,
   runOnJS,
+  useAnimatedReaction,
   useAnimatedStyle,
   useSharedValue,
   withSpring,
@@ -422,13 +424,36 @@ 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 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);
+  // 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: 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. LIVE follows the minimize, so a surface sitting ON the edge
+  // rides down with the bar instead of leaving a 14px hole above it.
+  useClaimBottomEdge(
+    bottomOffset + EXPANDED_HEIGHT,
+    bottomOffset + (isMinimized ? MINIMIZED_HEIGHT : 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

package/src/theme/color-scope/ColorScope.web.tsx

@@ -35,13 +35,21 @@ export interface BloomColorScopeProps {
 }
 
 /**
- * On web, the single `asChild` child is frequently a react-native-web
- * component (e.g. RN `<View>`) whose `style` prop is a *style array* (or a
- * numeric registered-style id), not a plain `React.CSSProperties` object.
- * react-native-web flattens nested style arrays, so the cloned child must
- * receive an array — spreading an array into an object literal would copy its
- * numeric indices as keys and crash RNW when it commits them to the DOM
- * (`Failed to set an indexed property [0] on 'CSSStyleDeclaration'`).
+ * On web, the single `asChild` child can be either kind of element, and the two
+ * kinds want different `style` shapes:
+ *
+ *  - A react-native-web component (RN `<View>`, `<Pressable>`) may already
+ *    carry a style ARRAY or a numeric registered-style id. Spreading that into
+ *    an object literal copies its numeric indices as keys, and RNW then commits
+ *    `0`, `1`, … to the DOM. RNW flattens arrays, so it gets an array.
+ *  - Anything that ends on a DOM element — an `<a>`, a router `<Link>`, any
+ *    component that forwards `style` to its host node — hands the prop straight
+ *    to React DOM, which walks the own keys of whatever it is given. An array
+ *    there throws `Failed to set an indexed property [0] on
+ *    'CSSStyleDeclaration'` during commit, blanking the tree.
+ *
+ * So the array form is used only when the child's own style is already
+ * RN-shaped; every other child gets a plain object, which both runtimes accept.
  */
 type WebStyle =
   | React.CSSProperties
@@ -96,13 +104,15 @@ export function BloomColorScope({
         'BloomColorScope with `asChild` requires a single React element child that accepts a `style` prop.',
       );
     }
-    // Merge as a style ARRAY (the RNW-safe form): scope vars first, then the
-    // caller's `style`, then the child's own `style` last so its explicit
-    // styles win. react-native-web flattens nested arrays correctly; spreading
-    // the child's style (which is often an RN style array or numeric id) into an
-    // object literal would copy numeric indices as keys and crash RNW.
+    // Scope vars first, then the caller's `style`, then the child's own so its
+    // explicit styles win. The shape follows the child: an array only when the
+    // child's style is already RN-shaped (see the note above), an object
+    // otherwise — an array reaching a DOM node throws on commit.
     const childStyle = child.props.style;
-    const mergedStyle: WebStyle = [varsStyle, style, childStyle];
+    const childIsRnStyled = Array.isArray(childStyle) || typeof childStyle === 'number';
+    const mergedStyle: WebStyle = childIsRnStyled
+      ? [varsStyle, style, childStyle]
+      : { ...varsStyle, ...style, ...(childStyle || undefined) };
     content = cloneElement(child, { style: mergedStyle });
   } else {
     // A plain DOM `<div>` does NOT accept style arrays — only the cloned child