@oxy.so/bloom 2.12.3 → 3.0.0

package/src/label/Label.tsx

@@ -40,8 +40,10 @@ const LabelComponent = function Label({
 }: LabelProps) {
   const palette = useTextFieldPalette();
 
+  // `null` is DISTINCT from omitted: omitted falls back to the control's id,
+  // `null` says the label names a group and points at nothing.
   const webProps: Record<string, unknown> =
-    IS_WEB ? { htmlFor: htmlFor ?? nativeID } : {};
+    IS_WEB ? { htmlFor: htmlFor === null ? undefined : (htmlFor ?? nativeID) } : {};
 
   return (
     <Text

package/src/label/types.ts

@@ -11,8 +11,14 @@ export interface LabelProps {
   /**
    * Web-only convenience: the `id` of the form control this label is for.
    * Defaults to `nativeID` when omitted. Ignored on native.
+   *
+   * `null` means there is NO single control to point at — a label naming a
+   * GROUP of them, which is `Field`'s `multiple` case. Without a way to say
+   * that, the `nativeID` fallback makes the label its own target: a
+   * `<label for>` pointing at the label, which focuses nothing and which
+   * nothing reports.
    */
-  htmlFor?: string;
+  htmlFor?: string | null;
   /**
    * Render a required marker (an asterisk in the theme's negative color)
    * after the label text. Defaults to `false`.

package/src/layout/bottom-edge.tsx

@@ -67,57 +67,9 @@ import {
   type PropsWithChildren,
 } from 'react';
 
-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.
-   */
-  getInset: () => number;
-  claim: (id: string, height: number) => void;
-  release: (id: string) => void;
-}
-
-function createBottomEdgeStore(): BottomEdgeStore {
-  const claims = new Map<string, number>();
-  const listeners = new Set<() => void>();
-  let inset = 0;
-
-  const recompute = () => {
-    let next = 0;
-    for (const height of claims.values()) {
-      if (height > next) next = height;
-    }
-    // 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();
-  };
+import { createEdgeStore, NO_INSET, NO_SUBSCRIPTION, type EdgeStore } from './edge-store';
 
-  return {
-    subscribe(onChange) {
-      listeners.add(onChange);
-      return () => {
-        listeners.delete(onChange);
-      };
-    },
-    getInset: () => inset,
-    claim(id, height) {
-      if (claims.get(id) === height) return;
-      claims.set(id, height);
-      recompute();
-    },
-    release(id) {
-      if (!claims.delete(id)) return;
-      recompute();
-    },
-  };
-}
-
-const BottomEdgeContext = createContext<BottomEdgeStore | null>(null);
+const BottomEdgeContext = createContext<EdgeStore | null>(null);
 
 /**
  * Wrap the app once — `BloomProvider` already does. Rendering a second one
@@ -126,17 +78,12 @@ const BottomEdgeContext = createContext<BottomEdgeStore | null>(null);
  * the tab bar the modal is covering.
  */
 export function BottomEdgeProvider({ children }: PropsWithChildren) {
-  const [store] = useState(createBottomEdgeStore);
+  const [store] = useState(createEdgeStore);
   return <BottomEdgeContext.Provider value={store}>{children}</BottomEdgeContext.Provider>;
 }
 
 BottomEdgeProvider.displayName = 'BottomEdgeProvider';
 
-// Stable module-scope identities for the no-provider path. Fresh closures here
-// would resubscribe `useSyncExternalStore` on every render.
-const NO_SUBSCRIPTION = () => () => {};
-const NO_INSET = () => 0;
-
 /**
  * How much of the bottom edge is already occupied, in px.
  *

package/src/layout/edge-store.ts

@@ -0,0 +1,69 @@
+/**
+ * The claim REGISTRY behind `bottom-edge` and `top-edge`, written once.
+ *
+ * `bottom-edge.tsx` carried this store inline while it was the only edge with
+ * claimants. A floating page header is the second — it parks at the TOP edge
+ * and the content under it has the same question the FAB had about the tab bar:
+ * how much of the edge is already taken. The two registries are the same object
+ * with a different context, so the object moved here rather than being written
+ * out twice; the reasoning that decided its shape (why MAX rather than sum, why
+ * an external store, why the collapse is NOT published through it) stays in
+ * `bottom-edge.tsx`, which is where a reader looking for it will be.
+ */
+
+export interface EdgeStore {
+  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.
+   */
+  getInset: () => number;
+  claim: (id: string, height: number) => void;
+  release: (id: string) => void;
+}
+
+export function createEdgeStore(): EdgeStore {
+  const claims = new Map<string, number>();
+  const listeners = new Set<() => void>();
+  let inset = 0;
+
+  const recompute = () => {
+    let next = 0;
+    for (const height of claims.values()) {
+      if (height > next) next = height;
+    }
+    // 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();
+  };
+
+  return {
+    subscribe(onChange) {
+      listeners.add(onChange);
+      return () => {
+        listeners.delete(onChange);
+      };
+    },
+    getInset: () => inset,
+    claim(id, height) {
+      if (claims.get(id) === height) return;
+      claims.set(id, height);
+      recompute();
+    },
+    release(id) {
+      if (!claims.delete(id)) return;
+      recompute();
+    },
+  };
+}
+
+/**
+ * Stable module-scope identities for the no-provider path. Fresh closures here
+ * would resubscribe `useSyncExternalStore` on every render.
+ */
+export const NO_SUBSCRIPTION = () => () => {};
+export const NO_INSET = () => 0;

package/src/layout/index.ts

@@ -1,8 +1,13 @@
 /**
- * Window-edge geometry, shared by every floating surface.
+ * Window-edge geometry and screen-scope coordination, shared by every floating
+ * surface and every piece of scroll-linked chrome.
  *
- * `edge` answers "how far from the edge"; `bottom-edge` answers "what is already
- * parked there". A surface that floats at the bottom needs both.
+ * `edge` answers "how far from the edge"; `bottom-edge` and `top-edge` answer
+ * "what is already parked there"; `scroll-offset` answers "which scroller am I
+ * following". A surface that floats at an edge needs the first two; chrome that
+ * reacts to scrolling needs the third.
  */
 export { EDGE_GAP, windowEdgeGap } from './edge';
 export { BottomEdgeProvider, useBottomEdgeInset, useClaimBottomEdge } from './bottom-edge';
+export { TopEdgeProvider, useClaimTopEdge, useTopEdgeInset } from './top-edge';
+export { ScrollOffsetProvider, useScrollOffset } from './scroll-offset';

package/src/layout/scroll-offset.ts

@@ -0,0 +1,76 @@
+/**
+ * WHICH SCROLLER the chrome around a screen is following.
+ *
+ * ## The problem it answers
+ *
+ * Every piece of scroll-linked chrome Bloom draws — a header's separator, its
+ * shadow, the scrim under its islands — is a function of one number: how far
+ * one scroll container has moved. The container is the screen's, and the chrome
+ * is usually not inside it, so the number has to travel.
+ *
+ * Until now it travelled as a prop, and the default when the prop was omitted
+ * was `window.scrollY` on web and "nothing moves" on native. That default is
+ * right for exactly one layout — a web page whose document IS the scroller —
+ * and silently wrong for the two that a Bloom app usually has: a desktop panel
+ * that scrolls inside a fixed shell, and any native screen at all. The failure
+ * has no error in it. The header simply never reacts, which reads as a header
+ * that was designed not to.
+ *
+ * ## The rule
+ *
+ * A screen has exactly ONE scroll owner, and the owner publishes its offset
+ * here. Chrome reads it. Neither imports the other, so an app composes them in
+ * any arrangement — a header above a list, a header overlaying a list, two
+ * panels side by side each with its own header and its own scroller — and the
+ * right header still follows the right list, because the provider's position in
+ * the tree is what pairs them.
+ *
+ * ```tsx
+ * const scrollY = useSharedValue(0);
+ * const onScroll = useAnimatedScrollHandler(
+ *   { onScroll: (e) => { scrollY.value = e.contentOffset.y; } },
+ *   [scrollY],
+ * );
+ *
+ * <ScrollOffsetProvider value={scrollY}>
+ *   <PageHeader title="Inbox" />
+ *   <Animated.ScrollView onScroll={onScroll} scrollEventThrottle={16}>…</Animated.ScrollView>
+ * </ScrollOffsetProvider>
+ * ```
+ *
+ * ## Why a SharedValue and not state
+ *
+ * The same reason `layout/bottom-edge.tsx` refuses to publish the tab bar's
+ * collapse: a scroll offset changes on every frame, and a React re-render per
+ * frame is not a performance detail here, it is the whole cost of the feature.
+ * A `SharedValue` crosses this context ONCE, at mount — the object identity
+ * never changes — and every subsequent frame reaches the chrome on the UI
+ * thread through `useAnimatedStyle`, with no render at all.
+ *
+ * That is also why the context holds the shared VALUE rather than a number: a
+ * context whose value changed per frame would re-render every consumer per
+ * frame, which is exactly what this exists to avoid.
+ */
+import { createContext, useContext } from 'react';
+import type { SharedValue } from 'react-native-reanimated';
+
+const ScrollOffsetContext = createContext<SharedValue<number> | null>(null);
+ScrollOffsetContext.displayName = 'BloomScrollOffsetContext';
+
+/**
+ * Publish this subtree's scroll offset. `value` is a `SharedValue<number>` the
+ * scroll owner writes from its own animated handler.
+ */
+export const ScrollOffsetProvider = ScrollOffsetContext.Provider;
+
+/**
+ * The nearest published scroll offset, or `null` when nothing published one.
+ *
+ * `null` rather than a zero shared value, because the two mean different things
+ * to the chrome reading it: a published zero is "the scroller is at the top",
+ * and `null` is "no one told me", which is the case where a web header may
+ * still fall back to the document's own scroll.
+ */
+export function useScrollOffset(): SharedValue<number> | null {
+  return useContext(ScrollOffsetContext);
+}

package/src/layout/top-edge.tsx

@@ -0,0 +1,109 @@
+/**
+ * The top edge's OCCUPANCY — the mirror of `bottom-edge.tsx`, for chrome that
+ * parks at the TOP of a screen.
+ *
+ * ## Why a floating header needs it and a bar header does not
+ *
+ * A header that participates in layout answers this question by existing: the
+ * content starts where the header ends, because the header is a sibling above
+ * it in a column. A header that OVERLAYS content — the floating presentation,
+ * where the page scrolls under translucent islands — occupies no layout space
+ * at all, and the first item of the content lands underneath it.
+ *
+ * Somebody has to pad that content, and there are only three candidates. The
+ * app can hardcode a number, which is what every fleet header made its
+ * consumers do and which goes wrong the moment a subtitle, a safe-area inset or
+ * a larger font changes the height. The header can pad the content, which it
+ * cannot do — it does not own it, and often is not even its ancestor. Or the
+ * header can declare what it occupies and the content can read it. That is this
+ * registry, and it is the same object the bottom edge already uses
+ * (`edge-store.ts`), so a reader who knows one knows the other.
+ *
+ * ## The height is MEASURED, not computed
+ *
+ * `PageHeader` claims what `onLayout` reports, not a constant plus the insets.
+ * The two disagree in every case the constant was written to survive — a
+ * two-line title under an enlarged font, a subtitle that wraps in a long
+ * translation, a notch — and the failure of a computed height is silent: the
+ * content starts a few points under the islands and looks like a design
+ * decision.
+ *
+ * One consequence, stated rather than hidden: a claim registers in an EFFECT,
+ * so a reader mounted in the same commit sees `0` on its first render and the
+ * claimed number on the next. For a scroll container's `paddingTop` that is one
+ * frame of content sitting too high, before any scroll has happened.
+ *
+ * `PageHeader` narrows that frame rather than closing it: it claims its own
+ * resting height (the safe-area inset plus the 56pt bar) from the first commit
+ * and replaces it with the measured height once `onLayout` reports, so the one
+ * bad frame is off by whatever a subtitle or an enlarged font adds rather than
+ * by the whole header.
+ */
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useId,
+  useState,
+  useSyncExternalStore,
+  type PropsWithChildren,
+} from 'react';
+
+import { createEdgeStore, NO_INSET, NO_SUBSCRIPTION, type EdgeStore } from './edge-store';
+
+const TopEdgeContext = createContext<EdgeStore | null>(null);
+
+/**
+ * Wrap the app once — `BloomProvider` already does. A nested provider scopes a
+ * subtree to its own claims, which is what a full-screen modal with its own
+ * header wants: the content inside it must clear the MODAL's header, not the
+ * screen's.
+ */
+export function TopEdgeProvider({ children }: PropsWithChildren) {
+  const [store] = useState(createEdgeStore);
+  return <TopEdgeContext.Provider value={store}>{children}</TopEdgeContext.Provider>;
+}
+
+TopEdgeProvider.displayName = 'TopEdgeProvider';
+
+/**
+ * How much of the top edge is already occupied, in px — the padding a scroll
+ * container needs so its first item is not born under the chrome.
+ *
+ * ```tsx
+ * <ScrollView contentContainerStyle={{ paddingTop: useTopEdgeInset() }}>
+ * ```
+ *
+ * `0` outside a provider, and `0` on the first render even inside one — a claim
+ * registers in an effect. See the module comment for what that costs and how
+ * `PageHeader` narrows it.
+ */
+export function useTopEdgeInset(): number {
+  const store = useContext(TopEdgeContext);
+  return useSyncExternalStore(
+    store?.subscribe ?? NO_SUBSCRIPTION,
+    store?.getInset ?? NO_INSET,
+    store?.getInset ?? NO_INSET,
+  );
+}
+
+/**
+ * Claim `height` px of the top edge for as long as the caller is mounted.
+ *
+ * Claiming does not move the claimant — it declares the space it already
+ * occupies so that everything reading `useTopEdgeInset()` starts below it. Pass
+ * the FULL footprint: the chrome's measured height including any safe-area
+ * padding it applied itself.
+ *
+ * A no-op outside a provider, so the chrome stays usable standalone.
+ */
+export function useClaimTopEdge(height: number): void {
+  const store = useContext(TopEdgeContext);
+  const id = useId();
+
+  useEffect(() => {
+    if (!store) return;
+    store.claim(id, height);
+    return () => store.release(id);
+  }, [store, id, height]);
+}

package/src/message-bubble/MessageBubble.tsx

@@ -84,6 +84,15 @@ import type { MessageBubbleProps } from './types';
  *
  * Rich media is `media`, a slot: this family owns the shell, the text and the
  * metadata and never the image decoder.
+ *
+ * THE SLOT HAS TWO FITS, and the bubble cannot tell them apart by looking.
+ * `mediaFit="bleed"` (the default) cancels the bubble's padding so a photo runs
+ * to the radius. `mediaFit="inset"` keeps it, for a block that carries no
+ * padding of its own — `PollMessage`, `LocationMessage`, `ContactMessage` are
+ * all typography, and bled they clip a question against the top edge, cut an
+ * address off at the bottom and put an avatar on the left one. The fit also
+ * decides the meta: the overlaid pill is the default over a BLED media-only
+ * bubble only, because over an inset block it lands on a line of text.
  */
 
 /** How long the jump flash stays up before it fades. */
@@ -96,6 +105,7 @@ function MessageBubbleComponent({
   text,
   children,
   media,
+  mediaFit = 'bleed',
   metaOverlay,
   tail = false,
   senderName,
@@ -221,7 +231,8 @@ function MessageBubbleComponent({
   const fill = failed ? mixColor(side.fill, paint.failed, theme.isDark ? 0.3 : 0.22) : side.fill;
   const showTail = tail && hasTail(position);
   const mediaOnly = media !== undefined && text === undefined && children === undefined && !deleted;
-  const overlayMeta = metaOverlay ?? mediaOnly;
+  const bleed = mediaFit === 'bleed';
+  const overlayMeta = metaOverlay ?? (mediaOnly && bleed);
   const hasMeta =
     !deleted &&
     (time !== undefined ||
@@ -287,10 +298,13 @@ function MessageBubbleComponent({
       {media === undefined || deleted ? null : (
         <View
           style={{
-            marginTop: forwardedFrom === undefined && senderName === undefined && replyTo === undefined ? -BUBBLE_PADDING_Y : 0,
-            marginLeft: -BUBBLE_PADDING_X,
-            marginRight: -BUBBLE_PADDING_X,
-            marginBottom: mediaOnly ? -BUBBLE_PADDING_Y : 2,
+            marginTop:
+              bleed && forwardedFrom === undefined && senderName === undefined && replyTo === undefined
+                ? -BUBBLE_PADDING_Y
+                : 0,
+            marginLeft: bleed ? -BUBBLE_PADDING_X : 0,
+            marginRight: bleed ? -BUBBLE_PADDING_X : 0,
+            marginBottom: bleed ? (mediaOnly ? -BUBBLE_PADDING_Y : 2) : 0,
             overflow: 'hidden',
           }}
         >

package/src/message-bubble/index.ts

@@ -31,6 +31,7 @@ export type {
   MessageListEntry,
   MessageListItem,
   MessageListProps,
+  MessageMediaFit,
   MessagePosition,
   MessageReaction,
   MessageReplyPreview,

package/src/message-bubble/types.ts

@@ -13,6 +13,21 @@ export type MessageDirection = 'incoming' | 'outgoing';
  */
 export type MessagePosition = 'single' | 'first' | 'middle' | 'last';
 
+/**
+ * How the `media` slot is fitted inside the bubble.
+ *
+ *   bleed   the bubble's padding is CANCELLED and the block runs to the radius
+ *           — a photo, a video, an album, a sticker: something with its own
+ *           edge, which an inset would frame twice
+ *   inset   the block keeps the bubble's padding — a poll, a place, a contact
+ *           card: typography with no padding of its own, which bled means a
+ *           question clipped against the top edge and an avatar on the left one
+ *
+ * It also decides where the meta row lands by default: over a bled block on a
+ * translucent pill, under an inset one where it cannot cover a line of text.
+ */
+export type MessageMediaFit = 'bleed' | 'inset';
+
 /** A text span the bubble hands back to the caller to render. */
 export type MessageEntityType = 'link' | 'mention' | 'hashtag';
 
@@ -76,15 +91,23 @@ export interface MessageBubbleProps {
   /** Arbitrary bubble content, in place of `text`. */
   children?: ReactNode;
   /**
-   * The rich-media slot — an image, a voice note, a file row. It is rendered
-   * ABOVE the text, edge to edge inside the bubble's radius; the bubble adds no
-   * padding around it.
+   * The rich-media slot — an image, a voice note, a file row, a poll. It is
+   * rendered ABOVE the text; `mediaFit` decides whether it bleeds to the
+   * bubble's radius or keeps its padding.
    */
   media?: ReactNode;
+  /**
+   * How `media` is fitted. Default `'bleed'` — today's photo. Pass `'inset'`
+   * for a block that draws no padding of its own (`PollMessage`,
+   * `LocationMessage`, `ContactMessage`). See {@link MessageMediaFit}.
+   */
+  mediaFit?: MessageMediaFit;
   /**
    * Floats the meta row over the media on a translucent pill instead of
-   * tucking it after the text. Defaults to true when there is `media` and no
-   * text or children.
+   * tucking it after the text. Defaults to true on a BLED media-only bubble,
+   * and false on an inset one — an inset block's last line is text, and a pill
+   * over "0 votes" or over an address is the same defect twice. Set it either
+   * way to override.
    */
   metaOverlay?: boolean;
   /** Draws the notch on the small corner. Off by default. */

package/src/page-header/EdgeScrim.tsx

@@ -0,0 +1,118 @@
+import React, { memo } from 'react';
+import { StyleSheet } from 'react-native';
+import Svg, { Defs, LinearGradient, Rect, Stop } from 'react-native-svg';
+
+import { useSvgIdPrefix } from '../styles/svg-id';
+
+/**
+ * The floating header's EDGE EFFECT: the page colour at the top, fading to
+ * nothing below the islands.
+ *
+ * ── WHY IT IS A GRADIENT AND NOT A BLUR ─────────────────────────────────────
+ *
+ * It is the thing that lets a title sit on a photograph and still be read, and
+ * it has exactly one job: no horizontal line anywhere. A translucent rectangle
+ * — even a blurred one — ends at its own bottom edge, and that edge is a line
+ * across the screen whether or not it is drawn. Apple's scroll edge effect is
+ * described the same way: it protects legibility at the edge and must not read
+ * as a slab over the content.
+ *
+ * It is NOT a blur of varying intensity, and saying so matters because the two
+ * are easy to conflate and only one of them is here. `backdrop-filter` and
+ * `expo-blur` both take a single radius for the whole surface; a falloff would
+ * need the ten stacked layers `progressive-blur` uses, which is a real cost for
+ * a strip this size. This is an opacity ramp of one flat colour, and that is
+ * all it claims to be.
+ *
+ * ── THE STOPS ───────────────────────────────────────────────────────────────
+ *
+ * Four of them, shaped as an ease-out rather than a straight line. A LINEAR
+ * ramp of opacity is perceptually not linear: it holds too much colour through
+ * the middle and then falls off visibly in the last fifth, which puts a soft
+ * but findable band across the content. Weighting the fall earlier spends the
+ * gradient's height where the eye is looking — the region behind the title —
+ * and arrives at zero gently.
+ *
+ * `TAIL_RATIO` extends the ramp BELOW the header's own box. The header is as
+ * tall as its islands plus its padding; the fade needs room after that, or it
+ * finishes at the same place the layout does, which is the line again.
+ *
+ * ── `stopOpacity`, NOT AN `rgba()` STOP ─────────────────────────────────────
+ *
+ * `react-native-svg` parses `stopColor` for its RGB and DISCARDS the alpha
+ * channel, so an `rgba(…, 0.4)` stop renders at FULL strength on native and
+ * correctly on web. That is the exact defect documented on `GLASS_SHEEN` in
+ * `theme/glass-colors.ts`, where it painted an Android pane as an achromatic
+ * white-to-black wipe while every gate stayed green. The colour and the opacity
+ * travel here in separate props for the same reason.
+ *
+ * ── `width="100%"` IS NOT REDUNDANT ─────────────────────────────────────────
+ *
+ * An `<svg>` is a REPLACED element. With `width: auto` its used width is its
+ * INTRINSIC width, and an SVG with no intrinsic size falls back to CSS's
+ * default 300 x 150 — so `position: absolute; left: 0; right: 0` does NOT
+ * stretch it: `right` is over-constrained and dropped. Measured in Chrome
+ * before this prop existed: a 760px-wide header painted a 300 x 150 block of
+ * scrim with a hard vertical edge down the middle of the screen, over content
+ * that was otherwise untouched.
+ *
+ * Native is unaffected — react-native-svg lays its host view out with flexbox
+ * there — which is exactly why the omission survives review: it is correct on
+ * the platform most of this library is tested on. Gate:
+ * `src/__tests__/svg-absolute-fill-size.test.ts`.
+ *
+ * ── THE GRADIENT ID ─────────────────────────────────────────────────────────
+ *
+ * From `useSvgIdPrefix`, which is `useId` with React's punctuation stripped.
+ * Two headers on one page (a split view) must not resolve each other's
+ * `url(#…)`, and a module-scope counter — which is what `GlassSurface` uses,
+ * and which is right for a native-only surface — increments in a different
+ * order on the server than during hydration, so an SSR'd page would reference a
+ * gradient that is not there.
+ */
+
+/** How far past the header's own height the fade continues, as a ratio of it. */
+export const SCRIM_TAIL_RATIO = 0.55;
+
+/**
+ * Offset down the ramp -> how much of the page colour survives there.
+ *
+ * Read as: solid behind the title, nine tenths gone by three quarters of the
+ * way down, nothing at the bottom.
+ */
+export const SCRIM_STOPS = [
+  { offset: 0, opacity: 1 },
+  { offset: 0.42, opacity: 0.86 },
+  { offset: 0.72, opacity: 0.38 },
+  { offset: 1, opacity: 0 },
+] as const;
+
+export interface EdgeScrimProps {
+  /** The page colour the ramp starts from — opaque, alpha travels separately. */
+  color: string;
+  testID?: string;
+}
+
+const EdgeScrimComponent: React.FC<EdgeScrimProps> = ({ color, testID }) => {
+  const id = `${useSvgIdPrefix('bloom-page-header-scrim')}gradient`;
+  return (
+    <Svg width="100%" height="100%" style={StyleSheet.absoluteFill} testID={testID}>
+      <Defs>
+        <LinearGradient id={id} x1="0" y1="0" x2="0" y2="1">
+          {SCRIM_STOPS.map((stop) => (
+            <Stop
+              key={stop.offset}
+              offset={String(stop.offset)}
+              stopColor={color}
+              stopOpacity={stop.opacity}
+            />
+          ))}
+        </LinearGradient>
+      </Defs>
+      <Rect x="0" y="0" width="100%" height="100%" fill={`url(#${id})`} />
+    </Svg>
+  );
+};
+
+export const EdgeScrim = memo(EdgeScrimComponent);
+EdgeScrim.displayName = 'PageHeaderEdgeScrim';