@oxyhq/bloom 0.50.1 → 0.51.0

package/src/context-menu/index.web.tsx

@@ -20,6 +20,8 @@ import { Text } from '../typography';
 import { Portal } from '../portal/index.web';
 import { useInteractionState } from '../hooks/useInteractionState';
 import { createOverlayZIndex } from '../styles/z-index';
+import { WEB_POSITION_FIXED } from '../styles/web-view-style';
+import { bloomShadowStyle } from '../design-tokens/shadows';
 import { ItemCtx, useItemContext } from './context';
 import type {
   ContextMenuContextValue,
@@ -185,7 +187,7 @@ export function ContextMenuContent({ children, style }: ContextMenuContentProps)
               ? theme.colors.backgroundSecondary
               : theme.colors.background,
             borderColor: theme.colors.borderLight,
-            shadowColor: theme.colors.shadow,
+            ...bloomShadowStyle('m'),
           },
           style,
         ]}
@@ -325,7 +327,7 @@ export function ContextMenuDivider() {
 
 const styles = StyleSheet.create({
   backdrop: {
-    position: 'fixed' as 'absolute',
+    position: WEB_POSITION_FIXED,
     top: 0,
     left: 0,
     right: 0,
@@ -335,15 +337,13 @@ const styles = StyleSheet.create({
     pointerEvents: 'auto',
   },
   dropdown: {
-    position: 'fixed' as 'absolute',
+    position: WEB_POSITION_FIXED,
     zIndex: contextMenuZIndex.surface,
     borderRadius: 8,
     padding: 4,
     borderWidth: 1,
     overflow: 'hidden',
-    shadowOpacity: 0.15,
-    shadowRadius: 12,
-    shadowOffset: { width: 0, height: 4 },
+    // Overlay elevation applied at the usage site via `bloomShadowStyle('m')`.
     minWidth: 180,
     maxWidth: 280,
     // Opt back in from the Portal root's `pointer-events: none`.

package/src/dialog/Dialog.tsx

@@ -529,11 +529,13 @@ function SideSheet({
         // stack) paints above it. Layer 0 → offset 0 → unchanged.
         { zIndex: Z_INDEX.fullscreen + Z_INDEX_LAYER_STEP * (layer ?? 0) },
         containerStyle,
+        { pointerEvents: 'box-none' },
       ]}
       {...(containerClassName ? ({ className: containerClassName } as Record<string, string>) : {})}
-      pointerEvents="box-none"
     >
-      <Animated.View style={[sideStyles.backdrop, backdropAnimatedStyle]} pointerEvents="auto">
+      <Animated.View
+        style={[sideStyles.backdrop, backdropAnimatedStyle, { pointerEvents: 'auto' }]}
+      >
         <Pressable
           testID={testID ? `${testID}-backdrop` : DIALOG_SHEET_BACKDROP_TESTID}
           accessibilityRole="button"
@@ -554,13 +556,14 @@ function SideSheet({
         {...(panelClassName ? ({ className: panelClassName } as Record<string, string>) : {})}
         style={[
           sideStyles.panel,
-          { backgroundColor: theme.colors.background, shadowColor: theme.colors.shadow },
+          // `shadowColor` is a valid RN style prop on native (Dialog.tsx is the
+          // native variant); the web `shadow*` deprecation is handled in Dialog.web.tsx.
+          { backgroundColor: theme.colors.background, shadowColor: theme.colors.shadow, pointerEvents: 'auto' },
           panelGeometry,
           panelAnimatedStyle,
           panelStyle,
           style,
         ]}
-        pointerEvents="auto"
       >
         {header ? (
           // Nav-header mode on a side drawer: a static titled bar (the drawer body

package/src/dialog/Dialog.web.tsx

@@ -21,6 +21,8 @@ import { RemoveScrollBar } from 'react-remove-scroll-bar';
 
 import { Portal } from '../portal/index.web';
 import { createOverlayZIndex } from '../styles/z-index';
+import { WEB_POSITION_FIXED } from '../styles/web-view-style';
+import { bloomShadowStyle } from '../design-tokens/shadows';
 import { useTheme } from '../theme/use-theme';
 import { Context, useDialogContext, useDialogControl } from './context';
 import { DialogBody } from './DialogContent';
@@ -303,7 +305,7 @@ function CenterOrSideDialog({
               // `pointer-events: none`, which is set so the idle portal
               // doesn't intercept clicks on the underlying app.
               style={{
-                position: 'fixed' as 'absolute',
+                position: WEB_POSITION_FIXED,
                 top: 0,
                 left: 0,
                 right: 0,
@@ -468,10 +470,9 @@ function DialogPanel({
           backgroundColor: theme.colors.background,
           borderWidth: 1,
           borderColor: theme.isDark ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.1)',
-          shadowColor: '#000',
-          shadowOpacity: theme.isDark ? 0.4 : 0.1,
-          shadowRadius: 30,
-          shadowOffset: { width: 0, height: 4 },
+          // Design-system overlay elevation (`shadow-m`) as a `boxShadow` — RN-Web
+          // deprecated the `shadow*` style props.
+          ...bloomShadowStyle('m'),
           zIndex: surfaceZIndex,
         },
         isClosing
@@ -672,9 +673,8 @@ function SheetSurface({
 
   return (
     <View
-      style={[sheetStyles.root, { zIndex: backdropZIndex }, containerStyle]}
+      style={[sheetStyles.root, { zIndex: backdropZIndex }, containerStyle, { pointerEvents: 'box-none' }]}
       {...(containerClassName ? ({ className: containerClassName } as Record<string, string>) : {})}
-      pointerEvents="box-none"
     >
       <Pressable
         testID={testID ? `${testID}-backdrop` : DIALOG_SHEET_BACKDROP_TESTID}
@@ -704,15 +704,16 @@ function SheetSurface({
           sheetStyles.panel,
           {
             backgroundColor: theme.colors.background,
-            shadowColor: theme.colors.shadow,
             zIndex: surfaceZIndex,
+            pointerEvents: 'auto',
+            // Design-system overlay elevation (`shadow-m`) as a `boxShadow`.
+            ...bloomShadowStyle('m'),
           },
           panelGeometry,
           panelTransition,
           panelStyle,
           style,
         ]}
-        pointerEvents="auto"
       >
         {header ? (
           // Nav-header mode on a side drawer: a static titled bar (the drawer
@@ -790,7 +791,7 @@ function cancelFrame(token: FrameToken): void {
 function DialogBackdrop({ isClosing }: { isClosing: boolean }) {
   const style: ViewStyle[] = [
     {
-      position: 'fixed' as 'absolute',
+      position: WEB_POSITION_FIXED,
       top: 0,
       left: 0,
       right: 0,
@@ -843,7 +844,7 @@ const sheetStyles = {
   // the per-layer `createOverlayZIndex(layer)` in `SheetSurface`, so a side
   // dialog stacked on top of another (surface stack) paints above it.
   root: {
-    position: 'fixed' as 'absolute',
+    position: WEB_POSITION_FIXED,
     top: 0,
     left: 0,
     right: 0,
@@ -860,9 +861,8 @@ const sheetStyles = {
   panel: {
     position: 'absolute',
     overflow: 'hidden',
-    shadowOpacity: 0.18,
-    shadowRadius: 24,
-    shadowOffset: { width: 0, height: 8 },
+    // Elevation is applied at the usage site via `bloomShadowStyle('m')`
+    // (`boxShadow` on web); the deprecated `shadow*` props were removed.
   } as ViewStyle,
 };
 

package/src/dialog/DialogHeader.tsx

@@ -106,6 +106,62 @@ interface HeaderStore {
   subscribe: (listener: () => void) => () => void;
 }
 
+type PrimaryAction = NonNullable<DialogHeaderConfig['primaryAction']>;
+type HeaderAction = NonNullable<DialogHeaderConfig['actions']>[number];
+type HeaderSearch = NonNullable<DialogHeaderConfig['search']>;
+type HeaderSegments = NonNullable<DialogHeaderConfig['segments']>;
+type HeaderProgress = NonNullable<DialogHeaderConfig['progress']>;
+
+function primaryActionEqual(a: PrimaryAction | undefined, b: PrimaryAction | undefined): boolean {
+  if (a === b) return true;
+  if (!a || !b) return false;
+  // `onPress` is a fresh closure each render — its identity never changes what the
+  // button renders, so compare only the render-affecting scalars.
+  return a.label === b.label && !!a.disabled === !!b.disabled && !!a.loading === !!b.loading;
+}
+
+function actionsEqual(a: HeaderAction[] | undefined, b: HeaderAction[] | undefined): boolean {
+  if (a === b) return true;
+  if (!a || !b || a.length !== b.length) return false;
+  for (let i = 0; i < a.length; i += 1) {
+    const x = a[i];
+    const y = b[i];
+    if (!x || !y) return false;
+    // `icon` is a memoized node (compared by identity); `onPress` is ignored.
+    if (
+      x.accessibilityLabel !== y.accessibilityLabel ||
+      !!x.disabled !== !!y.disabled ||
+      x.icon !== y.icon
+    ) {
+      return false;
+    }
+  }
+  return true;
+}
+
+function searchEqual(a: HeaderSearch | undefined, b: HeaderSearch | undefined): boolean {
+  if (a === b) return true;
+  if (!a || !b) return false;
+  return a.value === b.value && a.placeholder === b.placeholder;
+}
+
+function segmentsEqual(a: HeaderSegments | undefined, b: HeaderSegments | undefined): boolean {
+  if (a === b) return true;
+  if (!a || !b || a.value !== b.value || a.items.length !== b.items.length) return false;
+  for (let i = 0; i < a.items.length; i += 1) {
+    const ai = a.items[i];
+    const bi = b.items[i];
+    if (!ai || !bi || ai.key !== bi.key || ai.label !== bi.label) return false;
+  }
+  return true;
+}
+
+function progressEqual(a: HeaderProgress | undefined, b: HeaderProgress | undefined): boolean {
+  if (a === b) return true;
+  if (!a || !b) return false;
+  return a.step === b.step && a.total === b.total;
+}
+
 function configsEqual(a: DialogHeaderConfig | null, b: DialogHeaderConfig | null): boolean {
   if (a === b) return true;
   if (!a || !b) return false;
@@ -116,16 +172,20 @@ function configsEqual(a: DialogHeaderConfig | null, b: DialogHeaderConfig | null
     a.largeTitle === b.largeTitle &&
     a.left === b.left &&
     a.right === b.right &&
-    a.onBack === b.onBack &&
+    // `onBack` legitimately gets a fresh closure each render; its identity never
+    // changes what the header renders, so compare by PRESENCE, never identity —
+    // treating a new ref as "changed" is exactly what drives the update loop.
+    !!a.onBack === !!b.onBack &&
     a.showClose === b.showClose &&
-    // Rich fields — object fields compared by identity (callers memoize them);
-    // `tone` is a plain value.
-    a.primaryAction === b.primaryAction &&
-    a.actions === b.actions &&
-    a.search === b.search &&
-    a.segments === b.segments &&
+    // Rich fields — compared by VALUE (render-affecting scalars only). A caller
+    // passing an inline `primaryAction`/`actions`/… object (a fresh reference
+    // every render) must NOT force a store update: that is React error #185.
     a.tone === b.tone &&
-    a.progress === b.progress
+    primaryActionEqual(a.primaryAction, b.primaryAction) &&
+    actionsEqual(a.actions, b.actions) &&
+    searchEqual(a.search, b.search) &&
+    segmentsEqual(a.segments, b.segments) &&
+    progressEqual(a.progress, b.progress)
   );
 }
 
@@ -474,28 +534,23 @@ export const DialogNavHeader = memo(function DialogNavHeader({
     ) : null);
 
   return (
-    <View
-      pointerEvents="box-none"
-      style={[styles.overlay, style]}
-    >
+    <View style={[styles.overlay, style, { pointerEvents: 'box-none' }]}>
       {/* Opaque (surface bg) at the top → transparent at the bottom, so scrolled
           content fades out under the bar. `onImage` swaps to a dark scrim so the
           chrome reads over media. Pure NativeWind — no SVG dependency. */}
       <View
-        pointerEvents="none"
         className={
           onImage
             ? 'bg-gradient-to-b from-black/60 to-transparent'
             : 'bg-gradient-to-b from-bg to-transparent'
         }
-        style={[StyleSheet.absoluteFill, { height: DIALOG_HEADER_OVERLAY_HEIGHT }]}
+        style={[StyleSheet.absoluteFill, { height: DIALOG_HEADER_OVERLAY_HEIGHT, pointerEvents: 'none' }]}
       />
-      <View pointerEvents="box-none" style={styles.navRow}>
+      <View style={[styles.navRow, { pointerEvents: 'box-none' }]}>
         <View style={styles.side}>{left}</View>
         <Animated.View
-          pointerEvents="none"
           testID="dialog-nav-title"
-          style={[styles.centerTitle, titleStyle]}
+          style={[styles.centerTitle, titleStyle, { pointerEvents: 'none' }]}
         >
           {config.titleContent ?? null}
           {!config.titleContent && config.title ? (

package/src/index.ts

@@ -112,7 +112,10 @@ export type { UserHoverCardProps, UserHoverCardStat } from './user-hover-card';
 export * from './loading';
 export * from './prompt-input';
 export * from './switch';
-export { toast, type Toast } from './toast';
+// `ToastOutlet` is a required app-root mount, like `BloomDialogProvider` and
+// `SurfaceHost`. The full engine surface lives at `@oxyhq/bloom/toast`.
+export { toast, ToastOutlet } from './toast';
+export type { ToastFn, ToastOptions, ToastType } from './toast';
 
 // Typography
 export * as Typography from './typography';

package/src/index.web.ts

@@ -117,7 +117,10 @@ export type { UserHoverCardProps, UserHoverCardStat } from './user-hover-card';
 export * from './loading/index.web';
 export * from './prompt-input';
 export * from './switch';
-export { toast, type Toast } from './toast/index.web';
+// `ToastOutlet` is a required app-root mount, like `BloomDialogProvider` and
+// `SurfaceHost`. The full engine surface lives at `@oxyhq/bloom/toast`.
+export { toast, ToastOutlet } from './toast';
+export type { ToastFn, ToastOptions, ToastType } from './toast';
 
 // Typography
 export * as Typography from './typography';

package/src/menu/index.web.tsx

@@ -17,6 +17,8 @@ import { Text } from '../typography';
 import type { DialogControlProps } from '../dialog/types';
 import { Portal } from '../portal/index.web';
 import { createDropdownZIndex } from '../styles/z-index';
+import { WEB_POSITION_FIXED } from '../styles/web-view-style';
+import { bloomShadowStyle } from '../design-tokens/shadows';
 import {
   MenuContext,
   ItemContext,
@@ -221,7 +223,7 @@ export function MenuContent({
       );
 
       setPosition({
-        position: 'fixed' as 'absolute',
+        position: WEB_POSITION_FIXED,
         top,
         left,
         right: undefined,
@@ -255,7 +257,7 @@ export function MenuContent({
               ? theme.colors.backgroundSecondary
               : theme.colors.background,
             borderColor: theme.colors.borderLight,
-            shadowColor: theme.colors.shadow,
+            ...bloomShadowStyle('m'),
           },
           style,
           styles.portaledDropdown,
@@ -393,9 +395,7 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     overflow: 'hidden',
     zIndex: menuZIndex.surface,
-    shadowOpacity: 0.15,
-    shadowRadius: 12,
-    shadowOffset: { width: 0, height: 4 },
+    // Overlay elevation applied at the usage site via `bloomShadowStyle('m')`.
     minWidth: 180,
   },
   portaledDropdown: {

package/src/popover/index.web.tsx

@@ -12,6 +12,8 @@ import { Pressable, StyleSheet, View } from 'react-native';
 import { useTheme } from '../theme/use-theme';
 import { Portal } from '../portal/index.web';
 import { createOverlayZIndex } from '../styles/z-index';
+import { WEB_POSITION_FIXED } from '../styles/web-view-style';
+import { bloomShadowStyle } from '../design-tokens/shadows';
 import { PopoverContext, usePopoverContext } from './context';
 import type {
   PopoverContentProps,
@@ -288,7 +290,9 @@ export function PopoverContent({
               ? theme.colors.backgroundSecondary
               : theme.colors.background,
             borderColor: theme.colors.borderLight,
-            shadowColor: theme.colors.shadow,
+            // Design-system overlay elevation (`shadow-m`) as a `boxShadow` —
+            // RN-Web deprecated the `shadow*` style props.
+            ...bloomShadowStyle('m'),
             // Hide until measured to avoid a one-frame jump.
             opacity: panelSize ? 1 : 0,
           },
@@ -305,7 +309,7 @@ const styles = StyleSheet.create({
     alignSelf: 'flex-start',
   },
   backdrop: {
-    position: 'fixed' as 'absolute',
+    position: WEB_POSITION_FIXED,
     top: 0,
     left: 0,
     right: 0,
@@ -314,15 +318,13 @@ const styles = StyleSheet.create({
     pointerEvents: 'auto',
   },
   panel: {
-    position: 'fixed' as 'absolute',
+    position: WEB_POSITION_FIXED,
     zIndex: popoverZIndex.surface,
     borderRadius: 12,
     borderWidth: 1,
     paddingVertical: 4,
     overflow: 'hidden',
-    shadowOpacity: 0.15,
-    shadowRadius: 12,
-    shadowOffset: { width: 0, height: 4 },
+    // Elevation applied at the usage site via `bloomShadowStyle('m')` (boxShadow).
     pointerEvents: 'auto',
   },
 });

package/src/portal/index.tsx

@@ -12,6 +12,7 @@ import React, {
 } from 'react';
 import { View, StyleSheet, Platform } from 'react-native';
 import { Z_INDEX } from '../styles/z-index';
+import { WEB_POSITION_FIXED } from '../styles/web-view-style';
 
 type Component = React.ReactElement;
 
@@ -114,8 +115,10 @@ export const Outlet = memo(DefaultPortal.Outlet);
 export const Portal = DefaultPortal.Portal;
 
 const styles = StyleSheet.create({
+  // Applied only from the `Platform.OS === 'web'` branch of `Outlet`, which is
+  // why the web-only `position` value is honest in this universal file.
   portalOutlet: {
-    position: 'fixed' as 'absolute',
+    position: WEB_POSITION_FIXED,
     top: 0,
     left: 0,
     right: 0,

package/src/progressive-blur/index.tsx

@@ -0,0 +1,78 @@
+/**
+ * Ported from expo-glass-tabs v0.1.1 — src/progressive-blur.tsx
+ * (MIT © 2026 David Mokos). See the top-level NOTICE.
+ */
+import { BlurView } from 'expo-blur';
+import { StyleSheet, View } from 'react-native';
+
+import { useTheme } from '../theme/use-theme';
+import { buildTailGradient, LAYER_HEIGHTS } from './shared';
+import type { ProgressiveBlurProps } from './types';
+
+export type { ProgressiveBlurProps } from './types';
+
+/**
+ * Progressive (gradient) blur: strongest at the anchored edge, fading to none.
+ * Drop it behind a floating tab bar or a transparent header so content
+ * dissolves rather than meeting a hard blur line.
+ *
+ * NATIVE implementation. iOS has no public variable-blur API, so this stacks
+ * ten thin `BlurView`s with a tiny per-layer intensity — each layer's edge adds
+ * only an imperceptible step, so the falloff reads as continuous (see
+ * `LAYER_HEIGHTS`). A soft gradient in the theme's page color smooths the tail
+ * and keeps overlaid content legible.
+ *
+ * The web fork replaces the whole stack with one masked `backdrop-filter`:
+ * `experimental_backgroundImage` is dropped silently by react-native-web, and
+ * ten stacked backdrop passes would be far more expensive than the one the
+ * browser can do natively.
+ */
+export function ProgressiveBlur({
+  style,
+  intensity = 5,
+  direction = 'top',
+  ...rest
+}: ProgressiveBlurProps) {
+  const { colors, isDark } = useTheme();
+  const anchor = direction === 'top' ? styles.anchorTop : styles.anchorBottom;
+
+  return (
+    <View {...rest} style={[styles.root, style]}>
+      {LAYER_HEIGHTS.map((height) => (
+        <BlurView
+          key={height}
+          tint={isDark ? 'dark' : 'light'}
+          intensity={intensity}
+          style={[styles.layer, anchor, { height }]}
+        />
+      ))}
+      <View
+        style={[
+          StyleSheet.absoluteFill,
+          { experimental_backgroundImage: buildTailGradient(colors.background, direction) },
+        ]}
+      />
+    </View>
+  );
+}
+
+ProgressiveBlur.displayName = 'ProgressiveBlur';
+
+const styles = StyleSheet.create({
+  root: {
+    // In the style object, not as a prop: RN-Web deprecated the `pointerEvents`
+    // prop and warns on every render when it is used.
+    pointerEvents: 'none',
+  },
+  layer: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+  },
+  anchorTop: {
+    top: 0,
+  },
+  anchorBottom: {
+    bottom: 0,
+  },
+});

package/src/progressive-blur/index.web.tsx

@@ -0,0 +1,65 @@
+/**
+ * Ported from expo-glass-tabs v0.1.1 — src/progressive-blur.tsx
+ * (MIT © 2026 David Mokos). See the top-level NOTICE.
+ */
+import { View, type ViewStyle } from 'react-native';
+
+import { useTheme } from '../theme/use-theme';
+import {
+  buildMaskGradient,
+  buildTailGradient,
+  WEB_BLUR_PER_INTENSITY,
+} from './shared';
+import type { ProgressiveBlurProps } from './types';
+
+export type { ProgressiveBlurProps } from './types';
+
+/**
+ * WEB fork of {@link ProgressiveBlur} — ONE element instead of the native
+ * ten-layer stack.
+ *
+ * Two upstream techniques do not survive a browser, which is the whole reason
+ * this fork exists:
+ *
+ *   - `experimental_backgroundImage` is dropped silently by react-native-web
+ *     (no warning, no gradient), so the tail is painted with real CSS
+ *     `background-image` instead;
+ *   - stacking ten `BlurView`s would mean ten composited backdrop passes over
+ *     the same pixels every frame. A browser can fade a single
+ *     `backdrop-filter` with `mask-image`, which is both correct and an order
+ *     of magnitude cheaper.
+ *
+ * The declarations ride in the STYLE object rather than an injected CSS class:
+ * react-native-web does not forward `className` to the DOM (it is absent from
+ * its `forwardedProps` list, and `createDOMProps` overwrites the attribute with
+ * the atomic class it generates), while unknown style properties ARE passed
+ * through its style compiler — the same route `Dialog.web.tsx` uses for its
+ * `animation` shorthand. Nothing here needs `@keyframes` or a pseudo-class, so
+ * there is no stylesheet to inject and nothing a consumer could forget to wire.
+ */
+export function ProgressiveBlur({
+  style,
+  intensity = 5,
+  direction = 'top',
+  ...rest
+}: ProgressiveBlurProps) {
+  const { colors } = useTheme();
+
+  const filter = `blur(${intensity * WEB_BLUR_PER_INTENSITY}px)`;
+  const mask = buildMaskGradient(direction);
+  // Web-only CSS, unknown to React Native's `ViewStyle`. Both spellings are set
+  // for `backdrop-filter` and `mask-image`: Safari still needs the prefixed
+  // form of each.
+  const webStyle = {
+    pointerEvents: 'none',
+    backdropFilter: filter,
+    WebkitBackdropFilter: filter,
+    maskImage: mask,
+    WebkitMaskImage: mask,
+    backgroundImage: buildTailGradient(colors.background, direction),
+  } as ViewStyle;
+
+  return <View {...rest} style={[webStyle, style]} />;
+}
+
+ProgressiveBlur.displayName = 'ProgressiveBlur';

package/src/progressive-blur/shared.ts

@@ -0,0 +1,81 @@
+/**
+ * Ported from expo-glass-tabs v0.1.1 — src/progressive-blur.tsx
+ * (MIT © 2026 David Mokos). See the top-level NOTICE.
+ *
+ * The falloff math both forks share, so the native stack and the web mask
+ * describe the SAME curve and a bar looks the same on a phone and in a browser.
+ */
+import { withAlpha } from '../theme/color-utils';
+
+/**
+ * Per-layer heights of the native blur stack, as a fraction of the box.
+ *
+ * iOS has no public variable-blur API, so the native fork stacks many thin
+ * `BlurView`s with a tiny per-layer intensity: each layer's edge adds only an
+ * imperceptible step, so the falloff reads as continuous. Coverage at a given
+ * depth is the number of layers still tall enough to reach it — 10 at the
+ * anchored edge, ~5 at the midpoint, 1 at the far edge.
+ */
+export const LAYER_HEIGHTS = [
+  '100%',
+  '88%',
+  '76%',
+  '64%',
+  '54%',
+  '44%',
+  '36%',
+  '28%',
+  '22%',
+  '16%',
+] as const;
+
+/**
+ * px of CSS blur per unit of `intensity` on web.
+ *
+ * The web fork replaces the whole stack with ONE `backdrop-filter`, so the
+ * radius has to stand in for the accumulated effect of ten layers rather than
+ * one: the default `intensity` of 5 lands on a 20px radius, which reads like
+ * the native stack at the anchored edge. Stacking ten real blurs in a browser
+ * would cost ten composited backdrop passes for the same picture.
+ */
+export const WEB_BLUR_PER_INTENSITY = 4;
+
+/** CSS gradient direction keyword for a blur anchored at `direction`. */
+function towards(direction: 'top' | 'bottom'): 'top' | 'bottom' {
+  return direction === 'top' ? 'bottom' : 'top';
+}
+
+/**
+ * The soft tint layered over the blur. It smooths the tail and keeps overlaid
+ * content legible; upstream hardcoded black, which only worked on a dark theme,
+ * so it is derived from the theme's page background here instead.
+ */
+export function buildTailGradient(background: string, direction: 'top' | 'bottom'): string {
+  const to = towards(direction);
+  return (
+    `linear-gradient(to ${to}, ` +
+    `${withAlpha(background, 0.7)} 0%, ` +
+    `${withAlpha(background, 0.32)} 42%, ` +
+    `${withAlpha(background, 0.08)} 68%, ` +
+    `${withAlpha(background, 0)} 88%)`
+  );
+}
+
+/**
+ * Alpha ramp the web fork masks its single blur with — the only way to fade a
+ * `backdrop-filter`. The stops trace the native stack's layer coverage (full at
+ * the anchored edge, ~half at the midpoint) and then close all the way to zero,
+ * which the stack cannot do: its tallest layer spans the whole box, leaving a
+ * faint blur step at the far edge.
+ */
+export function buildMaskGradient(direction: 'top' | 'bottom'): string {
+  const to = towards(direction);
+  return (
+    `linear-gradient(to ${to}, ` +
+    `rgba(0, 0, 0, 1) 0%, ` +
+    `rgba(0, 0, 0, 0.9) 20%, ` +
+    `rgba(0, 0, 0, 0.5) 50%, ` +
+    `rgba(0, 0, 0, 0.2) 80%, ` +
+    `rgba(0, 0, 0, 0) 100%)`
+  );
+}

package/src/progressive-blur/types.ts

@@ -0,0 +1,21 @@
+/**
+ * Ported from expo-glass-tabs v0.1.1 — src/progressive-blur.tsx
+ * (MIT © 2026 David Mokos). See the top-level NOTICE.
+ *
+ * Shared prop contract for both forks. It lives in its own module so the web
+ * fork can declare it without importing the native entry (`./index` resolves to
+ * `index.web.tsx` itself on a web-platform Metro build), and so `TabBarBase`
+ * can type its injected `Blur` component without importing either fork.
+ */
+import type { ViewProps } from 'react-native';
+
+export type ProgressiveBlurProps = ViewProps & {
+  /**
+   * Blur strength at the anchored edge. Follows `expo-blur`'s 0–100 scale and
+   * is applied PER LAYER on native (see the native fork); the web fork maps it
+   * onto the single CSS blur radius that approximates the same stack.
+   */
+  intensity?: number;
+  /** Which edge the blur is anchored to (strongest there, fading away). */
+  direction?: 'top' | 'bottom';
+};