@oxyhq/bloom 0.52.0 → 0.52.1

package/src/connection-dots/ConnectionDots.web.tsx

@@ -1,6 +1,7 @@
 import React, { memo, useEffect, useState } from 'react';
 import { View, type ViewStyle } from 'react-native';
 
+import type { WebCssStyle } from '../styles/web-view-style';
 import { useTheme } from '../theme/use-theme';
 import { ConnectionDotsBase } from './ConnectionDotsBase';
 import type { ConnectionDotsProps } from './types';
@@ -88,14 +89,14 @@ const ConnectionDotsComponent: React.FC<ConnectionDotsProps> = ({
       borderRadius: dotSize / 2,
       backgroundColor: color,
     };
-    const animated: ViewStyle = reduce
+    const animated: WebCssStyle = reduce
       ? { opacity: 1 }
-      : ({
+      : {
           // `animation` / `animationDelay` are real CSS props on web;
           // react-native-web passes them through to the DOM node.
           animation: `${WAVE_ANIMATION_NAME} ${WAVE_DURATION_MS}ms linear infinite`,
           animationDelay: `${(i / count) * WAVE_DURATION_MS}ms`,
-        } as ViewStyle);
+        };
     return (
       <View
         key={i}

package/src/design-tokens/shadows.ts

@@ -36,7 +36,11 @@ export const SHADOW_BOX: Record<ShadowRole, string> = {
  * On WEB this returns a `{ boxShadow }` style object (so it can also be applied
  * inline without Tailwind). The `.native.ts` fork returns RN
  * `shadowColor/shadowOffset/shadowOpacity/shadowRadius/elevation`.
+ *
+ * No widening needed: `boxShadow` is a first-class `ViewStyle` key on RN >= 0.76
+ * and takes a CSS string, so this is not one of the web-only properties
+ * `styles/web-view-style.ts` exists for.
  */
 export function bloomShadowStyle(role: ShadowRole): ViewStyle {
-  return { boxShadow: SHADOW_BOX[role] } as ViewStyle;
+  return { boxShadow: SHADOW_BOX[role] };
 }

package/src/dialog/Dialog.tsx

@@ -515,7 +515,7 @@ function SideSheet({
         [side]: anchorInset,
         width: sideWidth,
         borderRadius: PANEL_RADIUS,
-      }) as ViewStyle,
+      }),
     [insetTop, insetBottom, side, anchorInset, sideWidth],
   );
 

package/src/dialog/Dialog.web.tsx

@@ -21,7 +21,7 @@ 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 { WEB_POSITION_FIXED, type WebCssStyle } from '../styles/web-view-style';
 import { bloomShadowStyle } from '../design-tokens/shadows';
 import { useTheme } from '../theme/use-theme';
 import { Context, useDialogContext, useDialogControl } from './context';
@@ -59,6 +59,23 @@ import type {
 
 const FADE_OUT_DURATION = CENTER_FADE_OUT_DURATION;
 
+/**
+ * The four CSS `animation` shorthands driving the centered card and its backdrop.
+ * `animation` has no `ViewStyle` key at all — react-native-web forwards it to the
+ * DOM node — so these are annotated `WebCssStyle` rather than cast. The
+ * `@keyframes` they name are self-injected by `useDialogCss()`.
+ */
+const ZOOM_FADE_IN: WebCssStyle = {
+  animation: 'bloomDialogZoomFadeIn cubic-bezier(0.16, 1, 0.3, 1) 0.3s',
+};
+const ZOOM_FADE_OUT: WebCssStyle = {
+  animation: `bloomDialogZoomFadeOut ease-in ${FADE_OUT_DURATION}ms forwards`,
+};
+const BACKDROP_FADE_IN: WebCssStyle = { animation: 'bloomDialogFadeIn ease-out 0.15s' };
+const BACKDROP_FADE_OUT: WebCssStyle = {
+  animation: `bloomDialogFadeOut ease-in ${FADE_OUT_DURATION}ms forwards`,
+};
+
 const stopPropagation = (e: { stopPropagation: () => void }) => e.stopPropagation();
 
 const ClosingContext = createContext(false);
@@ -475,9 +492,7 @@ function DialogPanel({
           ...bloomShadowStyle('m'),
           zIndex: surfaceZIndex,
         },
-        isClosing
-          ? ({ animation: `bloomDialogZoomFadeOut ease-in ${FADE_OUT_DURATION}ms forwards` } as ViewStyle)
-          : ({ animation: 'bloomDialogZoomFadeIn cubic-bezier(0.16, 1, 0.3, 1) 0.3s' } as ViewStyle),
+        isClosing ? ZOOM_FADE_OUT : ZOOM_FADE_IN,
         // Drives `height` (and `maxWidth`) only while a morph is in flight; at
         // rest it resolves to `height: 'auto'` — the natural sizing above. Placed
         // before `style` so a consumer's explicit size still wins.
@@ -625,23 +640,21 @@ function SheetSurface({
 
   const visible = shown && entered;
 
-  const panelTransition = useMemo<ViewStyle>(
-    () =>
-      ({
-        transitionProperty: 'transform, opacity',
-        transitionDuration: `${ANIMATION_DURATION}ms`,
-        transitionTimingFunction: EASE_OUT,
-      }) as ViewStyle,
+  const panelTransition = useMemo<WebCssStyle>(
+    () => ({
+      transitionProperty: 'transform, opacity',
+      transitionDuration: `${ANIMATION_DURATION}ms`,
+      transitionTimingFunction: EASE_OUT,
+    }),
     [],
   );
 
-  const backdropTransition = useMemo<ViewStyle>(
-    () =>
-      ({
-        transitionProperty: 'opacity',
-        transitionDuration: `${ANIMATION_DURATION}ms`,
-        transitionTimingFunction: EASE_OUT,
-      }) as ViewStyle,
+  const backdropTransition = useMemo<WebCssStyle>(
+    () => ({
+      transitionProperty: 'opacity',
+      transitionDuration: `${ANIMATION_DURATION}ms`,
+      transitionTimingFunction: EASE_OUT,
+    }),
     [],
   );
 
@@ -664,7 +677,7 @@ function SheetSurface({
       borderRadius: PANEL_RADIUS,
       transform: [{ translateX: visible ? 0 : hiddenSign }],
       opacity: visible ? 1 : 0,
-    } as ViewStyle;
+    };
   }, [visible, placement, width, inset, viewportWidth]);
 
   const handleBackdropPress = useCallback(() => {
@@ -798,9 +811,7 @@ function DialogBackdrop({ isClosing }: { isClosing: boolean }) {
       bottom: 0,
       backgroundColor: 'rgba(0,0,0,0.8)',
     },
-    isClosing
-      ? ({ animation: `bloomDialogFadeOut ease-in ${FADE_OUT_DURATION}ms forwards` } as ViewStyle)
-      : ({ animation: 'bloomDialogFadeIn ease-out 0.15s' } as ViewStyle),
+    isClosing ? BACKDROP_FADE_OUT : BACKDROP_FADE_IN,
   ];
 
   return <View style={style} />;
@@ -839,7 +850,11 @@ export function AutoMountedDialog({
   );
 }
 
-const sheetStyles = {
+// Annotated rather than cast: a plain object literal widens `position: 'absolute'`
+// to `string`, which is what the three `as ViewStyle` casts here used to silence.
+// The annotation supplies the contextual type instead, so the literals narrow and
+// a genuine mistake still fails.
+const sheetStyles: Record<'root' | 'backdrop' | 'panel', ViewStyle> = {
   // `zIndex` for the root (backdrop) and panel (surface) is applied inline from
   // the per-layer `createOverlayZIndex(layer)` in `SheetSurface`, so a side
   // dialog stacked on top of another (surface stack) paints above it.
@@ -849,7 +864,7 @@ const sheetStyles = {
     left: 0,
     right: 0,
     bottom: 0,
-  } as ViewStyle,
+  },
   backdrop: {
     position: 'absolute',
     top: 0,
@@ -857,13 +872,13 @@ const sheetStyles = {
     right: 0,
     bottom: 0,
     backgroundColor: '#000',
-  } as ViewStyle,
+  },
   panel: {
     position: 'absolute',
     overflow: 'hidden',
     // Elevation is applied at the usage site via `bloomShadowStyle('m')`
     // (`boxShadow` on web); the deprecated `shadow*` props were removed.
-  } as ViewStyle,
+  },
 };
 
 /**

package/src/index.web.ts

@@ -146,8 +146,8 @@ export { SubtleHover } from './subtle-hover';
 export type { SubtleHoverProps } from './subtle-hover';
 
 // Motion presets (Reanimated enter/exit + directional screen transition)
-export { ScaleAndFadeIn, ScaleAndFadeOut, ShrinkAndPop, ScreenTransition } from './motion';
-export type { ScreenTransitionProps, ScreenTransitionDirection } from './motion';
+export { ScaleAndFadeIn, ScaleAndFadeOut, ShrinkAndPop, ScreenTransition } from './motion/index.web';
+export type { ScreenTransitionProps, ScreenTransitionDirection } from './motion/index.web';
 export { AnimatedCheck } from './animated-check';
 export type { AnimatedCheckProps, AnimatedCheckRef } from './animated-check';
 

package/src/loading/Loading.web.tsx

@@ -1,5 +1,7 @@
 import React, { memo, useMemo } from 'react';
-import { View, Text, StyleSheet, type DimensionValue, type ViewStyle } from 'react-native';
+import { View, Text, StyleSheet, type DimensionValue } from 'react-native';
+
+import type { WebCssStyle } from '../styles/web-view-style';
 
 import { useTheme } from '../theme/use-theme';
 import { animation } from '../styles/tokens';
@@ -87,17 +89,17 @@ const TopLoading: React.FC<TopLoadingProps> = ({
   // reanimated's `Easing.out(Easing.cubic)` used by the native variant.
   const easing = 'cubic-bezier(0.33, 1, 0.68, 1)';
 
-  const containerTransition = {
+  const containerTransition: WebCssStyle = {
     transitionProperty: 'height',
     transitionDuration: `${duration}ms`,
     transitionTimingFunction: easing,
-  } as ViewStyle;
+  };
 
-  const innerTransition = {
+  const innerTransition: WebCssStyle = {
     transitionProperty: 'opacity, transform',
     transitionDuration: `${duration}ms`,
     transitionTimingFunction: easing,
-  } as ViewStyle;
+  };
 
   return (
     <View

package/src/loading/SpinnerIcon.web.tsx

@@ -1,6 +1,8 @@
 import React, { useEffect } from 'react';
 import { StyleSheet, View, type ViewStyle } from 'react-native';
 
+import type { WebCssStyle } from '../styles/web-view-style';
+
 interface SpinnerIconProps {
   size?: number;
   color?: string;
@@ -59,6 +61,15 @@ export const BLOOM_SPINNER_CSS = `
 @keyframes ${SPIN_ANIMATION_NAME} { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
 `;
 
+/**
+ * `animation` is a real CSS prop on web; react-native-web passes it through to
+ * the DOM node. RN's `ViewStyle` has no `animation` key, which is what
+ * `WebCssStyle` covers.
+ */
+const SPIN_STYLE: WebCssStyle = {
+  animation: `${SPIN_ANIMATION_NAME} ${SPIN_DURATION_MS}ms linear infinite`,
+};
+
 function useKeyframes(): void {
   useEffect(() => {
     if (typeof document === 'undefined') return;
@@ -87,15 +98,7 @@ export const SpinnerIcon: React.FC<SpinnerIconProps> = ({
   return (
     <View
       {...(className ? ({ className } as Record<string, string>) : {})}
-      // `animation` is a real CSS prop on web; react-native-web passes it
-      // through to the DOM node. Typed as a cast because RN's ViewStyle has no
-      // `animation` key.
-      style={[
-        styles.container,
-        { width: size, height: size },
-        { animation: `${SPIN_ANIMATION_NAME} ${SPIN_DURATION_MS}ms linear infinite` } as ViewStyle,
-        style,
-      ]}
+      style={[styles.container, { width: size, height: size }, SPIN_STYLE, style]}
     >
       {BLADES.map(({ angle, opacity }) => (
         <View

package/src/motion/index.web.ts

@@ -0,0 +1,8 @@
+/**
+ * Web variant of the `motion` barrel. Only the three layout-animation presets
+ * fork — see `motion.web.ts` for why. `ScreenTransition` is universal: it already
+ * branches on `Platform.OS` internally.
+ */
+export { ScaleAndFadeIn, ScaleAndFadeOut, ShrinkAndPop } from './motion.web';
+export { ScreenTransition } from './ScreenTransition';
+export type { ScreenTransitionProps, ScreenTransitionDirection } from './ScreenTransition';

package/src/motion/motion.ts

@@ -2,17 +2,25 @@ import {
   withDelay,
   withSequence,
   withTiming,
-  type LayoutAnimation,
+  type EntryOrExitLayoutType,
 } from 'react-native-reanimated';
 
 /**
- * Reanimated custom layout-animation presets. Each is a worklet builder
- * compatible with an `Animated.View`'s `entering` / `exiting` prop:
+ * Reanimated layout-animation presets. Each is a value you hand to an
+ * `Animated.View`'s `entering` / `exiting` prop:
  *
  * ```tsx
  * <Animated.View entering={ScaleAndFadeIn} exiting={ScaleAndFadeOut} />
  * ```
  *
+ * THIS IS THE NATIVE FILE. Custom worklet builders animate correctly on native
+ * and do NOTHING on web, where reanimated resolves an animation by preset name —
+ * `motion.web.ts` reimplements all three against the mechanisms web actually
+ * supports and documents why the two platforms cannot share one. The exported
+ * TYPE is deliberately reanimated's own "thing you can pass to entering/exiting"
+ * union rather than the concrete builder shape, so the two files present one
+ * contract and no consumer can depend on the mechanism.
+ *
  * Ported from Bluesky's custom-animation set. The `'worklet'` directive is
  * preserved through Bloom's build; the consuming app's Metro + reanimated Babel
  * plugin transforms it so the animation runs on the UI thread (same path the
@@ -20,7 +28,7 @@ import {
  */
 
 /** Entering: fade in while growing from 70% to full size. */
-export const ScaleAndFadeIn: () => LayoutAnimation = () => {
+export const ScaleAndFadeIn: EntryOrExitLayoutType = () => {
   'worklet';
   return {
     animations: {
@@ -35,7 +43,7 @@ export const ScaleAndFadeIn: () => LayoutAnimation = () => {
 };
 
 /** Exiting counterpart to {@link ScaleAndFadeIn}: fade out while shrinking to 70%. */
-export const ScaleAndFadeOut: () => LayoutAnimation = () => {
+export const ScaleAndFadeOut: EntryOrExitLayoutType = () => {
   'worklet';
   return {
     animations: {
@@ -53,7 +61,7 @@ export const ScaleAndFadeOut: () => LayoutAnimation = () => {
  * Exiting with a brief "pop": the scale dips to 70%, overshoots to 110%, and the
  * element fades out. Good for confirming a tapped or removed item.
  */
-export const ShrinkAndPop: () => LayoutAnimation = () => {
+export const ShrinkAndPop: EntryOrExitLayoutType = () => {
   'worklet';
   return {
     animations: {

package/src/motion/motion.web.ts

@@ -0,0 +1,99 @@
+/**
+ * WEB FORK of `motion.ts`. Same three names, same contract ("a value you hand to
+ * an `Animated.View`'s `entering` / `exiting`"), different mechanism — because on
+ * web the native mechanism does nothing at all and the obvious replacement is
+ * worse than nothing.
+ *
+ * WHY THE DEFAULT FILE CANNOT SERVE WEB. `motion.ts` exports custom
+ * `EntryExitAnimationFunction` worklet builders. Reanimated's web layout-animation
+ * manager resolves an animation by NAME: `tryGetAnimationConfig` reads
+ * `config.presetName` off the function, a custom builder has none, and
+ * `checkUndefinedAnimationFail` then bails to `makeElementVisible(element, 0)`.
+ * Measured in Chrome 5.x/reanimated 4.5.0: the card mounts at `transform: none`,
+ * `opacity: 1` and stays there for every sampled frame of both directions, with
+ * one `[Reanimated] Couldn't load entering/exiting animation` warning per element.
+ * Native is unaffected — it runs the builder directly, with no name lookup.
+ *
+ * WHY THE ENTER AND THE EXITS USE DIFFERENT MECHANISMS. Rebuilding all three as
+ * `Keyframe`s is the obvious fix and is only HALF right, because reanimated's two
+ * web directions differ in one decisive argument:
+ *
+ *   - `exiting` -> `handleExitingAnimation` calls `setElementAnimation` on a
+ *     throwaway clone with `shouldSavePosition` FALSE. The custom keyframe's
+ *     `duration x 5` cleanup only tears that clone down, which is what it is for.
+ *     A `Keyframe` here is safe AND exact: it compiles to a real CSS `@keyframes`
+ *     rule, so the full scale + opacity shape survives.
+ *   - `entering` -> `chooseAction` calls `setElementAnimation` on the REAL element
+ *     with `shouldSavePosition` TRUE, and since a custom keyframe's generated
+ *     `REA-ENTERING-n` name is absent from reanimated's built-in `Animations`
+ *     map, `scheduleAnimationCleanup` fires
+ *     `setElementPosition` at `duration x 5` — `position: absolute`, a frozen
+ *     `top`/`left`/`width`/`height` snapshot, `transform` cleared. The animation
+ *     plays and the element is then pinned, silently, one and a half seconds
+ *     later. That is failure mode (C) in `~/Oxy/AGENTS.md` and it is strictly
+ *     worse than the inert animation it would replace.
+ *
+ * So the enter uses a PREDEFINED builder, whose `presetName` IS in `Animations`
+ * and therefore skips `scheduleAnimationCleanup` entirely. Predefined builders
+ * cannot combine a fade with a scale, so the web enter keeps the fade and drops
+ * the 0.7 -> 1 growth. `ScreenTransition` in this same folder already made that
+ * trade for the same reason ("on web the slide is intentionally dropped").
+ *
+ * The imperative shared-value drive (failure mode (A)'s remedy, and what
+ * `toast/ToastRow.tsx` uses for its own enter) is the third option and is not
+ * available here: these are exported VALUES, not components, so there is no
+ * render to hang a `useSharedValue` off — and it could not express an exit at
+ * all, since keeping an unmounting element alive is exactly what `exiting` is for.
+ *
+ * WEB EASING IS LINEAR. `Keyframe` has no `.easing()` modifier, and a per-stop
+ * easing only survives `convertAnimationObjectToKeyframes` when it resolves to one
+ * of reanimated's seven `WebEasings` names (all of them ease-IN curves), while
+ * `.easing(Easing.bezier(...))` needs the `__closure` the worklets babel plugin
+ * adds — absent in every Oxy web build — and degrades to linear WITH a warning.
+ * `ShrinkAndPop` therefore carries an extra midpoint stop so its piecewise-linear
+ * web curve tracks the native `withTiming` segments closely rather than cutting
+ * the corner.
+ */
+import {
+  FadeIn,
+  Keyframe,
+  type EntryOrExitLayoutType,
+} from 'react-native-reanimated';
+
+/** `withTiming`'s default, which is what the native builders animate over. */
+const DEFAULT_DURATION = 300;
+/** `ShrinkAndPop`: 75ms shrink + 150ms overshoot, with the fade ending with it. */
+const POP_DURATION = 250;
+
+/**
+ * Entering: fade in.
+ *
+ * The scale is dropped on web — see the header. `FadeIn`'s own default duration
+ * is already 300ms, matching the native builder, and the bare class is exported
+ * rather than a `.duration()` instance so nothing shares a mutable builder.
+ */
+export const ScaleAndFadeIn: EntryOrExitLayoutType = FadeIn;
+
+/** Exiting counterpart to {@link ScaleAndFadeIn}: fade out while shrinking to 70%. */
+export const ScaleAndFadeOut: EntryOrExitLayoutType = new Keyframe({
+  from: { opacity: 1, transform: [{ scale: 1 }] },
+  to: { opacity: 0, transform: [{ scale: 0.7 }] },
+}).duration(DEFAULT_DURATION);
+
+/**
+ * Exiting with a brief "pop": the scale dips to 70%, overshoots to 110%, and the
+ * element fades out.
+ *
+ * Stops are the native timeline sampled at its own breakpoints, so every property
+ * is declared at every stop and nothing depends on CSS's cross-stop interpolation:
+ * scale reaches 0.7 at 75ms (30%) and 1.1 at 225ms (90%); opacity holds until
+ * 125ms (50%) and then falls to 0 by 250ms. The 50% stop's 0.8333 scale and the
+ * 90% stop's 0.2 opacity are the native values at those instants.
+ */
+export const ShrinkAndPop: EntryOrExitLayoutType = new Keyframe({
+  0: { opacity: 1, transform: [{ scale: 1 }] },
+  30: { opacity: 1, transform: [{ scale: 0.7 }] },
+  50: { opacity: 1, transform: [{ scale: 0.8333 }] },
+  90: { opacity: 0.2, transform: [{ scale: 1.1 }] },
+  100: { opacity: 0, transform: [{ scale: 1.1 }] },
+}).duration(POP_DURATION);

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

@@ -2,8 +2,9 @@
  * 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 { View } from 'react-native';
 
+import type { WebCssStyle } from '../styles/web-view-style';
 import { useTheme } from '../theme/use-theme';
 import {
   buildMaskGradient,
@@ -50,14 +51,14 @@ export function ProgressiveBlur({
   // 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 = {
+  const webStyle: WebCssStyle = {
     pointerEvents: 'none',
     backdropFilter: filter,
     WebkitBackdropFilter: filter,
     maskImage: mask,
     WebkitMaskImage: mask,
     backgroundImage: buildTailGradient(colors.background, direction),
-  } as ViewStyle;
+  };
 
   return <View {...rest} style={[webStyle, style]} />;
 }

package/src/styles/web-view-style.ts

@@ -19,3 +19,53 @@ import type { ViewStyle } from 'react-native';
  * where Yoga silently ignores it.
  */
 export const WEB_POSITION_FIXED = 'fixed' as ViewStyle['position'];
+
+/**
+ * A `ViewStyle` that may ALSO carry CSS react-native-web forwards straight to the
+ * DOM node but React Native does not model at all.
+ *
+ * This is the OTHER shape of the same RN/RNW type gap `WEB_POSITION_FIXED`
+ * covers, and it needs a different escape hatch because the two are structurally
+ * different: `position` is a key RN DOES model, just with a narrower value union,
+ * so a value-level cast is enough and it can still be written inside an ordinary
+ * style object. The properties below have no key on `ViewStyle` at all, so the
+ * whole OBJECT has to cross the boundary.
+ *
+ * ANNOTATE, DO NOT CAST. Every `.web` fork used to spell this `{ … } as ViewStyle`
+ * inline. That is not a widening, it is SILENCING: `as` only requires the two
+ * types to be COMPARABLE, so `{ animatoin: '…' } as ViewStyle` compiles happily
+ * and the typo ships as a style key react-native-web drops on the floor.
+ * Annotating with this interface restores excess-property checking — a key that
+ * is neither a real RN style nor a listed web-only property is a compile error —
+ * and, unlike a widening helper function, it erases completely, so the emitted
+ * JavaScript is byte-identical to the cast it replaces.
+ *
+ * ```ts
+ * const glass: WebCssStyle = { backdropFilter: 'blur(24px)' };
+ * // …then pass it anywhere a `ViewStyle` is expected.
+ * ```
+ *
+ * Only add a key here once react-native-web is confirmed to pass it through and
+ * RN has no equivalent. Several near-misses do NOT belong: RN 0.83 models
+ * `cursor`, `boxShadow`, `filter` and `pointerEvents` on `ViewStyle` directly, so
+ * those need no widening at all (`userSelect` is the trap — RN declares it on
+ * `TextStyle` only). Prefixed spellings sit alongside the standard ones because
+ * Safari still needs them for `backdrop-filter` and `mask-image`.
+ */
+export interface WebCssStyle extends ViewStyle {
+  /** CSS `animation` shorthand. Bloom's web forks self-inject the `@keyframes`. */
+  animation?: string;
+  animationDelay?: string;
+  transitionProperty?: string;
+  transitionDuration?: string;
+  transitionTimingFunction?: string;
+  backdropFilter?: string;
+  WebkitBackdropFilter?: string;
+  maskImage?: string;
+  WebkitMaskImage?: string;
+  backgroundImage?: string;
+  scrollbarWidth?: 'auto' | 'thin' | 'none';
+  scrollbarColor?: string;
+  /** RN declares this on `TextStyle`, not `ViewStyle`. */
+  userSelect?: 'auto' | 'none' | 'text' | 'contain' | 'all';
+}

package/src/tab-bar/TabBarBase.tsx

@@ -260,16 +260,21 @@ function TabBarBody({
       [EXPANDED_HEIGHT, MINIMIZED_HEIGHT],
       Extrapolation.CLAMP,
     );
-    return {
-      height,
-      // Revolut-style: the pill shrinks in both dimensions.
-      marginHorizontal: interpolate(
-        progress.value,
-        [0, 1],
-        [0, MINIMIZED_INSET],
-        Extrapolation.CLAMP,
-      ),
-    };
+    // Revolut-style: the pill shrinks in both dimensions.
+    //
+    // Written as the two long-form margins, NEVER as `marginHorizontal`.
+    // Reanimated's web path hands a mapper's result to react-native-web's
+    // `createReactDOMStyle`, whose `STYLE_SHORT_FORM_EXPANSIONS` map covers
+    // `marginInline` but NOT React Native's `marginHorizontal` (verified absent
+    // from the whole file in RNW 0.21.2). An unexpanded shorthand is written
+    // straight onto the DOM node as `style.marginHorizontal`, which is not a CSS
+    // property, so the browser drops it silently: the bar keeps its full width
+    // while `highlightStyle` still subtracts `MINIMIZED_INSET` from `barWidth`,
+    // leaving the highlight narrower than the tab it sits under. Static styles
+    // are unaffected — they take RNW's own StyleSheet path, which does handle
+    // the shorthand — so this only bites inside a mapper.
+    const inset = interpolate(progress.value, [0, 1], [0, MINIMIZED_INSET], Extrapolation.CLAMP);
+    return { height, marginLeft: inset, marginRight: inset };
   }, [progress]);
 
   // The capsule shape lives on the surface itself: iOS 26 glass renders its own
@@ -317,8 +322,8 @@ function TabBarBody({
     };
   }, [progress, slideIndex, windowWidth, tabCount]);
 
-  // Shared with `useTabBarReservedSpace`, so a consumer reserving layout space
-  // for the bar can never drift from where the bar actually sits.
+  // Shared with `useTabBarFootprint`, so a consumer accounting for the bar in
+  // its own layout can never drift from where the bar actually sits.
   const bottomOffset = tabBarBottomGap(insets.bottom);
   const barContext = useMemo(
     () => ({ slideIndex, isDragging, theme, activeIndex, selectIndex }),

package/src/tab-bar/index.ts

@@ -29,5 +29,5 @@ export {
   useTabBarMinimized,
 } from './minimize-context';
 export type { MinimizeState } from './minimize-context';
-export { useTabBarReservedSpace } from './use-reserved-space';
+export { useTabBarFootprint } from './use-footprint';
 export type { TabBarButtonProps, TabBarItem, TabBarProps, TabBarTheme } from './types';

package/src/tab-bar/index.web.tsx

@@ -31,5 +31,5 @@ export {
   useTabBarMinimized,
 } from './minimize-context';
 export type { MinimizeState } from './minimize-context';
-export { useTabBarReservedSpace } from './use-reserved-space';
+export { useTabBarFootprint } from './use-footprint';
 export type { TabBarButtonProps, TabBarItem, TabBarProps, TabBarTheme } from './types';

package/src/tab-bar/shared.ts

@@ -63,9 +63,9 @@ const MIN_BOTTOM_GAP = 12;
 /**
  * Vertical gap between the bottom of the pill and the bottom of the window.
  *
- * The safe-area inset is folded in HERE, which is why anything reserving layout
- * space for the bar must go through `useTabBarReservedSpace` (which derives its
- * number from this same function) rather than adding `insets.bottom` to a
+ * The safe-area inset is folded in HERE, which is why anything accounting for
+ * the bar in its own layout must go through `useTabBarFootprint` (which derives
+ * its number from this same function) rather than adding `insets.bottom` to a
  * hardcoded height — that double-counts the inset.
  */
 export function tabBarBottomGap(bottomInset: number): number {

package/src/tab-bar/surface.web.tsx

@@ -19,9 +19,10 @@
  * Browsers without `backdrop-filter` simply skip it and are left with the
  * translucent tint — a graceful degradation that needs no `@supports` rule.
  */
-import { StyleSheet, type ViewStyle } from 'react-native';
+import { StyleSheet } from 'react-native';
 import Animated from 'react-native-reanimated';
 
+import type { WebCssStyle } from '../styles/web-view-style';
 import type { TabBarSurfaceProps } from './shared';
 
 /**
@@ -35,10 +36,10 @@ const GLASS_FILTER = `blur(${GLASS_BLUR_PX}px) saturate(180%)`;
 
 // Web-only CSS, unknown to React Native's `ViewStyle`. Both spellings are set:
 // Safari still needs the prefixed property for `backdrop-filter`.
-const glassFilterStyle = {
+const glassFilterStyle: WebCssStyle = {
   backdropFilter: GLASS_FILTER,
   WebkitBackdropFilter: GLASS_FILTER,
-} as ViewStyle;
+};
 
 export function TabBarSurface({ theme, style }: TabBarSurfaceProps) {
   return (