@oxy.so/bloom 5.4.0 → 6.0.0

package/src/surface/Surface.web.tsx

@@ -1,16 +1,15 @@
-import { surfaceStyle } from '../shapes/surface-style';
+import { resolveSurfaceGeometry } from './resolve-surface-geometry';
 import { SURFACE_SHAPES } from '../design-tokens/shapes';
 import React, { forwardRef, memo } from 'react';
 import { StyleSheet, type View } from 'react-native';
-import { SurfaceLevelProvider, surfaceFillVars } from '../styles/surface-levels';
-import { useSurfaceLayer } from './use-surface-layer';
+import { SurfaceLevelProvider } from '../styles/surface-levels';
+import { useResolvedSurface } from './use-resolved-surface';
 import { useTheme } from '../theme/use-theme';
-import { parseRgba, withAlpha } from '../theme/color-utils';
 import { borderRadius } from '../styles/tokens';
 import { StyledView } from '../styles/styled-primitives';
 import type { WebCssStyle } from '../styles/web-view-style';
 import { useInteractiveWebCss } from '../styles/interactive-web-css';
-import { resolveSurfaceFill, resolveSurfaceOptics } from './shared';
+import { resolveSurfaceOptics } from './shared';
 import { surfaceMaterialCss } from './web-material';
 import { useSurfaceRefraction } from './web-refraction';
 import type { SurfaceProps } from './types';
@@ -22,43 +21,38 @@ const CSS = `
   box-sizing: border-box;
 }
 .bloom-surface { overflow: hidden; }
-${surfaceMaterialCss('.bloom-surface--solid', 'var(--bloom-surface-fill)')}
-${surfaceMaterialCss('.bloom-surface--glass', 'var(--bloom-surface-fill)', 'none', true)}
+${surfaceMaterialCss('.bloom-surface--material', 'var(--bloom-surface-fill)')}
 `;
 
 const SurfaceComponent = forwardRef<View, SurfaceProps>(function SurfaceComponent({
-  children, material = 'solid', fill, radius = borderRadius.xl, cornerCurve = SURFACE_SHAPES.panel.curve,
+  children, fill, radius, cornerCurve = SURFACE_SHAPES.panel.curve,
   style, className, accessibilityLabel, testID, ...hostProps
 }, ref) {
   const theme = useTheme();
-  const glass = material === 'glass';
-  const layer = useSurfaceLayer();
   const resolvedStyle = StyleSheet.flatten(style);
+  const geometry = resolveSurfaceGeometry(radius, style, borderRadius.xl, cornerCurve);
   useInteractiveWebCss('bloom-surface-web-css', CSS);
-  useSurfaceRefraction(glass);
-  const tint = fill ?? resolvedStyle?.backgroundColor ?? (glass ? withAlpha(layer.fill, 0.25) : layer.fill);
-  const painted = glass || (tint !== 'transparent' && parseRgba(String(tint))?.a !== 0);
-  const color = resolveSurfaceFill(String(tint), glass, layer.parentFill);
-  const publishedFill = painted ? resolveSurfaceFill(color, false, layer.parentFill) : layer.parentFill;
+  const override = fill ?? resolvedStyle?.backgroundColor;
+  const material = useResolvedSurface({ fill: override === undefined ? undefined : String(override) });
+  useSurfaceRefraction(material.painted);
   const optics = resolveSurfaceOptics(theme.isDark);
   const baseStyle: WebCssStyle = {
     '--bloom-surface-rim': optics.rim,
     '--bloom-surface-sheen': optics.sheenCss,
-    borderRadius: radius,
-    ...surfaceStyle({ curve: cornerCurve }),
+    ...geometry.style,
     backgroundColor: 'transparent',
-    '--bloom-surface-fill': color,
+    '--bloom-surface-fill': material.paintFill,
   };
   return (
     <StyledView
       {...hostProps}
       ref={ref}
-      className={['bloom-surface', painted ? glass ? 'bloom-surface--glass' : 'bloom-surface--solid' : '', className].filter(Boolean).join(' ')}
+      className={['bloom-surface', material.painted ? 'bloom-surface--material' : '', className].filter(Boolean).join(' ')}
       accessibilityLabel={accessibilityLabel}
       testID={testID}
-      style={[baseStyle, style, { backgroundColor: 'transparent', ...surfaceFillVars(painted ? publishedFill : undefined) }]}
+      style={[baseStyle, style, { backgroundColor: 'transparent', ...material.vars, ...geometry.style }]}
     >
-      <SurfaceLevelProvider level={painted ? layer.level : layer.parentLevel} fill={publishedFill}>{children}</SurfaceLevelProvider>
+      <SurfaceLevelProvider level={material.level} fill={material.publishedFill}>{children}</SurfaceLevelProvider>
     </StyledView>
   );
 });

package/src/surface/SurfacePaint.tsx

@@ -10,12 +10,11 @@ import type { WebCssStyle } from '../styles/web-view-style';
 import { surfaceMaterialCss } from './web-material';
 import { useSurfaceRefraction } from './web-refraction';
 import { useTheme } from '../theme/use-theme';
-import { resolveSurfaceFill, resolveSurfaceOptics, surfaceSvgStop } from './shared';
+import { resolveSurfaceTint, resolveSurfaceOptics, surfaceSvgStop } from './shared';
 
 const WEB_PAINT_CSS = `
 .bloom-surface-paint { isolation: isolate; overflow: hidden; }
-${surfaceMaterialCss('.bloom-surface-paint--solid', 'var(--bloom-surface-paint-fill)')}
-${surfaceMaterialCss('.bloom-surface-paint--glass', 'var(--bloom-surface-paint-fill)', 'none', true)}
+${surfaceMaterialCss('.bloom-surface-paint', 'var(--bloom-surface-paint-fill)')}
 .bloom-surface-paint--no-sheen::after { background-image: none; }
 `;
 
@@ -27,21 +26,16 @@ ${surfaceMaterialCss('.bloom-surface-paint--glass', 'var(--bloom-surface-paint-f
  */
 export const SurfacePaint = memo(function SurfacePaint({
   fill,
-  backdrop,
   radius,
   shape,
   direction = 'ltr',
-  glass = false,
   sheen = true,
   testID,
 }: {
-  glass?: boolean;
   sheen?: boolean;
   testID?: string;
   /** Omit for sheen/rim only on a host that already owns its fill. */
   fill?: string;
-  /** Actual parent fill when compositing a solid material. */
-  backdrop?: string;
   radius?: NonNullable<ViewStyle['borderRadius']>;
   /** Same policy as the host; radius can remain owned by an animated host. */
   shape?: SurfaceShape;
@@ -50,10 +44,10 @@ export const SurfacePaint = memo(function SurfacePaint({
   const geometry = { ...(radius === undefined ? {} : { borderRadius: radius }), ...surfaceStyle(shape ?? { curve: 'round' }, direction) };
   const theme = useTheme();
   const optics = resolveSurfaceOptics(theme.isDark);
-  const resolvedFill = fill === undefined ? 'transparent' : resolveSurfaceFill(fill, glass, backdrop ?? theme.colors.card);
+  const resolvedFill = resolveSurfaceTint(fill ?? 'transparent');
   const id = useSvgIdPrefix('bloom-surface');
   const isWeb = Platform.OS === 'web';
-  useSurfaceRefraction(isWeb && glass);
+  useSurfaceRefraction(isWeb);
   useEffect(() => {
     if (isWeb) adoptStyleSheet('bloom-surface-paint-web-css', WEB_PAINT_CSS);
   }, [isWeb]);
@@ -67,7 +61,7 @@ export const SurfacePaint = memo(function SurfacePaint({
       '--bloom-surface-rim': optics.rim,
       '--bloom-surface-sheen': optics.sheenCss,
     };
-    return <StyledView testID={testID} pointerEvents="none" className={`${glass ? 'bloom-surface-paint bloom-surface-paint--glass' : 'bloom-surface-paint bloom-surface-paint--solid'}${sheen ? '' : ' bloom-surface-paint--no-sheen'}`} style={paintStyle} />;
+    return <StyledView testID={testID} pointerEvents="none" className={`bloom-surface-paint${sheen ? '' : ' bloom-surface-paint--no-sheen'}`} style={paintStyle} />;
   }
   const base = surfaceSvgStop(resolvedFill);
   return (
@@ -89,4 +83,3 @@ export const SurfacePaint = memo(function SurfacePaint({
     </View>
   );
 });
-

package/src/surface/resolve-surface-geometry.ts

@@ -0,0 +1,18 @@
+import { StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
+import { surfaceStyle } from '../shapes/surface-style';
+import type { CornerCurve, SurfaceShape } from '../shapes/corner-types';
+
+/** Explicit axis > resolved caller style/class > family default, on both paint and host. */
+export function resolveSurfaceGeometry(
+  radius: ViewStyle['borderRadius'] | undefined,
+  style: StyleProp<ViewStyle> | undefined,
+  fallback: number,
+  curve: CornerCurve,
+) {
+  const effectiveRadius = radius ?? StyleSheet.flatten(style)?.borderRadius ?? fallback;
+  const shape: SurfaceShape = {
+    ...(typeof effectiveRadius === 'number' ? { radius: effectiveRadius } : {}),
+    curve: effectiveRadius === 9999 ? 'round' : curve,
+  };
+  return { radius: effectiveRadius, shape, style: { ...surfaceStyle(shape), borderRadius: effectiveRadius } };
+}

package/src/surface/resolve-surface-material.ts

@@ -0,0 +1,28 @@
+import { parseRgba } from '../theme/color-utils';
+import { surfaceFillVars, type SurfaceLevel } from '../styles/surface-levels';
+import { resolveSurfaceFill, resolveSurfaceTint } from './shared';
+
+export interface SurfaceMaterialInput {
+  fill: string;
+  parentFill: string;
+  parentLevel?: SurfaceLevel;
+  /** False for plain/backing hosts: publish their fill without material or a depth step. */
+  paint?: boolean;
+  /** Explicit depth origin for portals, rather than inheriting the triggering card. */
+  level?: SurfaceLevel;
+}
+
+/** One decision for the pixels, descendant backing, depth and CSS aliases. */
+export function resolveSurfaceMaterial({ fill, parentFill, parentLevel = 0, paint = true, level }: SurfaceMaterialInput) {
+  const visible = fill.trim().toLowerCase() !== 'transparent' && parseRgba(fill)?.a !== 0;
+  const painted = paint && visible;
+  const paintFill = painted ? resolveSurfaceTint(fill) : fill;
+  const publishedFill = resolveSurfaceFill(paintFill, parentFill);
+  return {
+    painted,
+    paintFill,
+    publishedFill,
+    level: level ?? (painted ? Math.min(parentLevel + 1, 3) as SurfaceLevel : parentLevel),
+    vars: surfaceFillVars(visible ? publishedFill : undefined),
+  };
+}

package/src/surface/shared.ts

@@ -36,9 +36,14 @@ export function surfaceSvgStop(color: string): { color: string; opacity: number
 }
 
 
-/** Solid material flattens a translucent tint onto its resolved backing. */
-export function resolveSurfaceFill(fill: string, glass: boolean, backdrop: string): string {
-  if (glass) return fill;
+/** One subtle material: retain explicit alpha; opaque fills transmit ten percent. */
+export function resolveSurfaceTint(fill: string): string {
+  const parsed = parseRgba(fill);
+  return parsed?.a === 1 ? withAlpha(fill, 0.9) : fill;
+}
+
+/** Estimate the backing descendants see by compositing tint onto its parent. */
+export function resolveSurfaceFill(fill: string, backdrop: string): string {
   if (fill.trim().toLowerCase() === 'transparent') return backdrop;
   const tint = parseRgba(fill);
   const base = parseRgba(backdrop);

package/src/surface/types.ts

@@ -4,11 +4,9 @@ import type { StyleProp, ViewStyle, ViewProps } from 'react-native';
 
 export interface SurfaceProps extends Omit<ViewProps, 'style' | 'children'> {
   children?: ReactNode;
-  /** Solid (default) keeps the gradient and rim on an opaque fill; glass adds transparency and web refraction. */
-  material?: 'glass' | 'solid';
-  /** Explicit tint. Defaults to a surface above the actual parent. Solid composites alpha onto that parent; glass preserves it. */
+  /** Tint source. Opaque colours use 90% opacity; supplied alpha is preserved. */
   fill?: string;
-  /** Radius shared by the layout box and its clipped paint. Defaults to 20. */
+  /** Radius shared by host and paint. Explicit prop wins over style.borderRadius, then default 20. */
   radius?: number;
   /** Platform-adaptive corners shared by the host and material. */
   cornerCurve?: CornerCurve;

package/src/surface/use-resolved-surface.ts

@@ -0,0 +1,8 @@
+import { useSurfaceLayer } from './use-surface-layer';
+import { resolveSurfaceMaterial, type SurfaceMaterialInput } from './resolve-surface-material';
+
+/** Passive surface defaults come from the actual nearest backing. */
+export function useResolvedSurface(options: Partial<SurfaceMaterialInput> = {}) {
+  const parent = useSurfaceLayer();
+  return resolveSurfaceMaterial({ ...options, fill: options.fill ?? parent.fill, parentFill: options.parentFill ?? parent.parentFill, parentLevel: options.parentLevel ?? parent.parentLevel });
+}

package/src/surface/use-surface-backing.ts

@@ -1,14 +1,12 @@
 import { StyleSheet, type ColorValue, type StyleProp, type ViewStyle } from 'react-native';
-import { useSurfaceFill, useSurfaceLevelValue, surfaceFillVars } from '../styles/surface-levels';
-import { parseRgba } from '../theme/color-utils';
-import { resolveSurfaceFill } from './shared';
+import { useSurfaceFill, useSurfaceLevelValue } from '../styles/surface-levels';
+import { resolveSurfaceMaterial } from './resolve-surface-material';
 
 /** Docked chrome publishes its backing without adding depth or material. */
 export function useSurfaceBacking(defaultFill: ColorValue | undefined, style?: StyleProp<ViewStyle>, known = true) {
   const parentFill = useSurfaceFill();
   const level = useSurfaceLevelValue();
   const background = known ? StyleSheet.flatten(style)?.backgroundColor ?? defaultFill : undefined;
-  const painted = typeof background === 'string' && background !== 'transparent' && parseRgba(background)?.a !== 0;
-  const fill = painted ? resolveSurfaceFill(background, false, parentFill) : parentFill;
-  return { fill, level, vars: surfaceFillVars(painted ? fill : undefined) };
+  const material = resolveSurfaceMaterial({ fill: typeof background === 'string' ? background : 'transparent', parentFill, parentLevel: level, paint: false });
+  return { fill: material.publishedFill, level: material.level, vars: material.vars };
 }

package/src/surface/use-surface-material.web.ts

@@ -1,18 +1,22 @@
+import { useSurfaceRefraction } from './web-refraction';
 import { useContext, useMemo } from 'react';
 import { BloomThemeContext } from '../theme/BloomThemeProvider';
 import { useInteractiveWebCss } from '../styles/interactive-web-css';
 import type { WebCssStyle } from '../styles/web-view-style';
-import { resolveSurfaceOptics } from './shared';
+import { resolveSurfaceOptics, resolveSurfaceTint } from './shared';
 import { surfaceMaterialCss } from './web-material';
 
-/** Decorate an existing web host; preserve its fill, radius, layout and shadow. */
-export function useSurfaceMaterial(selector: string, id: string): WebCssStyle {
-  const css = useMemo(() => `${selector} { isolation: isolate; }\n${surfaceMaterialCss(selector, 'transparent')}`, [selector]);
+/** Move a web host fill into the shared body and edge paint; preserve layout and shadow. */
+export function useSurfaceMaterial(selector: string, id: string, fill: string): WebCssStyle {
+  useSurfaceRefraction(true);
+  const css = useMemo(() => `${selector} { isolation: isolate; }\n${surfaceMaterialCss(selector, 'var(--bloom-surface-fill)')}`, [selector]);
   useInteractiveWebCss(id, css);
   const theme = useContext(BloomThemeContext)?.theme;
   const optics = resolveSurfaceOptics(theme?.isDark ?? false);
   return useMemo(() => ({
+    backgroundColor: 'transparent',
+    '--bloom-surface-fill': resolveSurfaceTint(fill),
     '--bloom-surface-rim': optics.rim,
     '--bloom-surface-sheen': optics.sheenCss,
-  }), [optics]);
+  }), [optics, fill]);
 }

package/src/surface/web-material.ts

@@ -6,7 +6,7 @@ import { SURFACE_REFRACTION_ID } from './web-refraction';
  * Root must be positioned/isolated and transparent, with rounded clipping.
  * Both Surface and Button use these exact layers; state changes only their tint.
  */
-export function surfaceMaterialCss(selector: string, fill: string, transition = 'none', glass = false): string {
+export function surfaceMaterialCss(selector: string, fill: string, transition = 'none'): string {
   return `
 ${selector}::after {
   content: "";
@@ -16,20 +16,20 @@ ${selector}::after {
   corner-shape: inherit;
   pointer-events: none;
 }
-${glass ? `${selector}::before {
+${selector}::before {
   content: "";
   position: absolute;
   border-radius: inherit;
   corner-shape: inherit;
   pointer-events: none;
   z-index: -2;
-  /* Larger panes collect nearby backdrop pixels before the rounded crop. */
-  inset: -8px;
+  /* Match the pane bounds: expanded filtered layers escape rounded clipping
+     in Chromium. Backdrop blur still supplies lateral samples to displacement. */
+  inset: 0;
   backdrop-filter: blur(3px);
   -webkit-backdrop-filter: blur(3px);
   filter: url(#${SURFACE_REFRACTION_ID});
 }
-` : ""}
 ${selector}::after {
   z-index: -1;
   background-color: ${fill};

package/src/switch/Switch.tsx

@@ -1,4 +1,6 @@
-import { normalizeBloomSize } from '../appearance/legacy';
+import { useReducedMotion } from 'react-native-reanimated';
+import { MOTION_RECIPES } from '../motion/recipes';
+import { useControllableState } from '../hooks/use-controllable-state';
 import { useBloomAppearance } from '../appearance';
 import { resolveBloomColors } from '../appearance/colors';
 import React, { memo, useCallback, useRef } from 'react';
@@ -17,11 +19,12 @@ const PADDING = 2;
 const SQUEEZE_RATIO = 0.75; // thumb height shrinks to 75% when pressed
 
 const SwitchComponent = React.forwardRef<React.ElementRef<typeof Pressable>, SwitchProps>(
-  ({ checked: checkedProp, value, onCheckedChange: onCheckedChangeProp, onValueChange, disabled, style, size: sizeProp, tone: toneProp, accessibilityLabel, nativeID, testID }, ref) => {
-    const checked = checkedProp ?? value ?? false;
-    const onCheckedChange = onCheckedChangeProp ?? onValueChange;
+  (props, ref) => {
+    const { checked: checkedProp, defaultChecked = false, onCheckedChange, disabled, style, size: sizeProp, tone: toneProp, accessibilityLabel, nativeID, testID } = props;
+    const [checked, setChecked] = useControllableState({ value: checkedProp ?? false, controlled: Object.prototype.hasOwnProperty.call(props, 'checked'), defaultValue: defaultChecked, onChange: onCheckedChange });
     const theme = useTheme();
-    const {size, tone} = useBloomAppearance({size: normalizeBloomSize(sizeProp), tone: toneProp}, {size: 'md', tone: 'accent'});
+    const reducedMotion = useReducedMotion();
+    const {size, tone} = useBloomAppearance({size: sizeProp, tone: toneProp}, {size: 'md', tone: 'accent'});
     const paint = resolveBloomColors(theme.colors, tone, 'solid');
     const field = useFieldMembership({ accessibilityLabel, disabled, nativeID });
     const isDisabled = field.disabled;
@@ -34,7 +37,10 @@ const SwitchComponent = React.forwardRef<React.ElementRef<typeof Pressable>, Swi
     const prevValueRef = useRef(checked);
     if (prevValueRef.current !== checked) {
       prevValueRef.current = checked;
-      Animated.spring(anim, {
+      if (reducedMotion) {
+        anim.stopAnimation();
+        anim.setValue(checked ? 1 : 0);
+      } else Animated.spring(anim, {
         toValue: checked ? 1 : 0,
         useNativeDriver: false,
         ...animation.spring.gentle,
@@ -43,25 +49,25 @@ const SwitchComponent = React.forwardRef<React.ElementRef<typeof Pressable>, Swi
 
     const handlePress = useCallback(() => {
       if (isDisabled) return;
-      onCheckedChange?.(!checked);
-    }, [isDisabled, checked, onCheckedChange]);
+      setChecked(!checked);
+    }, [isDisabled, checked, setChecked]);
 
     const onPressIn = useCallback(() => {
       if (isDisabled) return;
-      Animated.spring(pressAnim, {
+      Animated.timing(pressAnim, {
         toValue: 1,
         useNativeDriver: false,
-        ...animation.spring.snappy,
+        duration: reducedMotion ? 0 : MOTION_RECIPES.press.duration,
       }).start();
-    }, [isDisabled, pressAnim]);
+    }, [isDisabled, pressAnim, reducedMotion]);
 
     const onPressOut = useCallback(() => {
-      Animated.spring(pressAnim, {
+      Animated.timing(pressAnim, {
         toValue: 0,
         useNativeDriver: false,
-        ...animation.spring.gentle,
+        duration: reducedMotion ? 0 : MOTION_RECIPES.press.duration,
       }).start();
-    }, [pressAnim]);
+    }, [pressAnim, reducedMotion]);
 
     const track = TRACK[size];
     const thumb = THUMB[size];

package/src/switch/types.ts

@@ -4,16 +4,16 @@ import type { StyleProp, ViewStyle } from 'react-native';
 export interface SwitchProps {
   /** Current on/off state */
   checked?: boolean;
-  value?: boolean;
+  /** Initial state for an uncontrolled switch. */
+  defaultChecked?: boolean;
   /** Called when the user toggles the switch */
   onCheckedChange?: (checked: boolean) => void;
-  onValueChange?: (value: boolean) => void;
   /** Whether the switch is disabled */
   disabled?: boolean;
   /** Container style */
   style?: StyleProp<ViewStyle>;
   /** Size variant */
-  size?: BloomSize | 'small' | 'medium' | 'large' | 'default';
+  size?: BloomSize;
   tone?: BloomTone;
   /**
    * The switch's accessible NAME, and the only way to give it one.

package/src/tab-bar/TabBarBase.tsx

@@ -1,3 +1,4 @@
+import { resolveSurfaceMaterial } from '../surface/resolve-surface-material';
 import { surfaceStyle } from '../shapes/surface-style';
 import { SURFACE_SHAPES } from '../design-tokens/shapes';
 /**
@@ -44,28 +45,24 @@ import Animated, {
   useAnimatedReaction,
   useAnimatedStyle,
   useSharedValue,
-  withSpring,
-  withTiming,
   type SharedValue,
 } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
+import { moveSelection } from '../motion/selection-motion';
 import { useHaptics } from '../hooks/use-haptics';
 import { useDirectionProps, useIsRtl } from '../hooks/use-is-rtl';
 import { useClaimBottomEdge } from '../layout/bottom-edge';
 import { windowEdgeGap } from '../layout/edge';
 import type { ProgressiveBlurProps } from '../progressive-blur/types';
 import { useSurfaceLayer } from '../surface/use-surface-layer';
-import { resolveSurfaceFill } from '../surface/shared';
 import { SurfaceLevelProvider, surfaceFillVars } from '../styles/surface-levels';
-import { SolidTabBarSurface } from './surface-solid';
 import { setMinimized, useMinimizeState } from './context';
 import {
   BAR_MARGIN,
   BLUR_BLEED,
   EXPANDED_HEIGHT,
   HIGHLIGHT_EXPANDED,
-  HIGHLIGHT_FADE,
   HIGHLIGHT_MINIMIZED,
   MAX_EXPANDED_ITEM_WIDTH,
   ICON_SIZE,
@@ -76,7 +73,6 @@ import {
   MINIMIZED_HEIGHT,
   MINIMIZED_INSET,
   ROW_PAD_H,
-  SLIDE_SPRING,
   useTabBarTheme,
   type TabBarGlyphProps,
   type TabBarSurfaceComponent,
@@ -167,7 +163,6 @@ function TabBarBody({
   maxWidth,
   embedded = false,
   scrollable = false,
-  material = 'translucent',
   minimizeProgress,
   onLayout,
   style,
@@ -214,10 +209,9 @@ function TabBarBody({
   // mirrors to; react-native-web reads that from a `dir` prop, not `<html>`.
   const dirProps = useDirectionProps();
   const layer = useSurfaceLayer();
-  const solidFill = resolveSurfaceFill(themeOverrides?.solidFallback ?? layer.fill, false, layer.parentFill);
-  const theme = useTabBarTheme({ ...themeOverrides, solidFallback: solidFill });
-  const ResolvedSurface = material === 'solid' ? SolidTabBarSurface : Surface;
-  const publishedFill = resolveSurfaceFill(ResolvedSurface.resolveFill?.(theme) ?? theme.glassTint, false, layer.parentFill);
+  const theme = useTabBarTheme(themeOverrides);
+  const ResolvedSurface = Surface;
+  const publishedFill = resolveSurfaceMaterial({ fill: ResolvedSurface.resolveFill?.(theme) ?? theme.glassTint, parentFill: layer.parentFill }).publishedFill;
   const impact = useHaptics();
 
   // The pill's OUTER width (the box the animated minimize inset is applied
@@ -300,7 +294,7 @@ function TabBarBody({
       // the bar on its way out, dragging the active tint over every tab it
       // passed. Visibility is the thing that changed, so visibility is the only
       // thing that animates.
-      highlightOpacity.value = withTiming(0, HIGHLIGHT_FADE);
+      moveSelection(slideIndex, highlightOpacity, null);
       return;
     }
     // Coming back from fully hidden the capsule APPEARS at the new tab instead
@@ -314,11 +308,7 @@ function TabBarBody({
     // position: the driver is already writing `slideIndex` every frame, and a
     // spring started here would drag the capsule across the bar between two of
     // its writes.
-    if (!driven) {
-      slideIndex.value =
-        highlightOpacity.value === 0 ? activeIndex : withSpring(activeIndex, SLIDE_SPRING);
-    }
-    highlightOpacity.value = withTiming(1, HIGHLIGHT_FADE);
+    moveSelection(slideIndex, highlightOpacity, activeIndex, driven);
   }, [activeIndex, hasSelection, driven, slideIndex, highlightOpacity, isDragging]);
 
   // Scrubbing: the highlight tracks the finger 1:1 while dragging (no spring —
@@ -369,7 +359,7 @@ function TabBarBody({
         if (highlightOpacity.value === 0) {
           slideIndex.value = indexAtX(event.x, progress.value);
         }
-        highlightOpacity.value = withTiming(1, HIGHLIGHT_FADE);
+        moveSelection(slideIndex, highlightOpacity, slideIndex.value, true);
         lastTicked.value = Math.round(slideIndex.value);
         // Scrubbing is a deliberate bar interaction — surface the labels.
         setMinimized(minimized, 0);
@@ -391,7 +381,7 @@ function TabBarBody({
           return;
         }
         const rounded = Math.round(slideIndex.value);
-        slideIndex.value = withSpring(rounded, SLIDE_SPRING);
+        moveSelection(slideIndex, highlightOpacity, rounded);
         runOnJS(selectIndex)(rounded);
         isDragging.value = false;
       });
@@ -413,11 +403,7 @@ function TabBarBody({
         // the others and the driver carries the highlight to the tapped tab.
         // The scrub is the one gesture that does not: a finger dragging the
         // pill is manipulating the bar itself, not asking for a page.
-        if (!driven) {
-          slideIndex.value =
-            highlightOpacity.value === 0 ? index : withSpring(index, SLIDE_SPRING);
-        }
-        highlightOpacity.value = withTiming(1, HIGHLIGHT_FADE);
+        moveSelection(slideIndex, highlightOpacity, index, driven);
         setMinimized(minimized, 0);
         runOnJS(selectIndex)(index);
       });
@@ -656,7 +642,7 @@ function TabBarButtonBody({
     // already tracking this same focus change; springing from here as well would
     // be a second writer on one shared value.
     if (bar.driven) return;
-    bar.slideIndex.value = withSpring(index, SLIDE_SPRING);
+    moveSelection(bar.slideIndex, bar.highlightOpacity, index);
   }, [isFocused, index, bar]);
 
   // Tint follows the sliding highlight, not navigation focus: whatever the pill
@@ -735,11 +721,7 @@ function TabBarButtonBody({
           // rule the tap gesture and the controlled path follow. Skipped on the
           // driven path, where the position belongs to the driver and this
           // press will reach it as an ordinary selection.
-          if (!bar.driven) {
-            bar.slideIndex.value =
-              bar.highlightOpacity.value === 0 ? index : withSpring(index, SLIDE_SPRING);
-          }
-          bar.highlightOpacity.value = withTiming(1, HIGHLIGHT_FADE);
+          moveSelection(bar.slideIndex, bar.highlightOpacity, index, bar.driven);
         }
         setMinimized(minimized, 0);
         // A tap the bar's gesture already reported is not reported again

package/src/tab-bar/context.tsx

@@ -1,3 +1,4 @@
+import { MOTION_RECIPES } from '../motion/recipes';
 /**
  * Ported from expo-glass-tabs v0.1.1 — src/minimize-context.tsx
  * (MIT © 2026 David Mokos).
@@ -21,7 +22,7 @@ import {
  * from zero and feel mechanical. Critically damped (ratio 1): no overshoot and
  * no long settling tail, which matters because the bar animates layout.
  */
-export const MINIMIZE_SPRING = { duration: 380, dampingRatio: 1 };
+export const MINIMIZE_SPRING = MOTION_RECIPES.expand;
 
 /** Scroll offset below which the bar is always expanded (px). */
 const TOP_ZONE = 24;

package/src/tab-bar/expo-router/fading-tab-screen.tsx

@@ -1,3 +1,4 @@
+import { MOTION_RECIPES } from '../../motion/recipes';
 /**
  * Ported from expo-glass-tabs v0.1.1 — src/fading-tab-slot.tsx
  * (MIT © 2026 David Mokos).
@@ -9,6 +10,7 @@ import Animated, {
   interpolate,
   useAnimatedStyle,
   useSharedValue,
+  useReducedMotion,
   withTiming,
 } from 'react-native-reanimated';
 import { Screen } from 'react-native-screens';
@@ -16,12 +18,13 @@ import type { TabsDescriptor, TabsSlotRenderOptions } from 'expo-router/ui';
 
 /** Strong ease-out — entering content should feel instant, then settle. */
 const EASE_OUT = Easing.bezier(0.23, 1, 0.32, 1);
-const ENTER_DURATION = 220;
+const ENTER_DURATION = MOTION_RECIPES.present.duration;
 /** Never enter from nothing: a whisper of depth, no zoom. */
 const ENTER_SCALE = 0.985;
 
 function FadeIn({ focused, children }: PropsWithChildren<{ focused: boolean }>) {
   const progress = useSharedValue(1);
+  const reducedMotion = useReducedMotion();
   const isFirstRender = useRef(true);
 
   useEffect(() => {
@@ -30,14 +33,16 @@ function FadeIn({ focused, children }: PropsWithChildren<{ focused: boolean }>)
       isFirstRender.current = false;
       return;
     }
-    if (focused) {
+    if (reducedMotion) {
+      progress.value = focused ? 1 : 0;
+    } else if (focused) {
       progress.value = 0;
-      progress.value = withTiming(1, { duration: ENTER_DURATION, easing: EASE_OUT });
+      progress.value = withTiming(1, { ...MOTION_RECIPES.present, duration: ENTER_DURATION, easing: EASE_OUT });
     } else {
       // Outgoing screen hides instantly (display: none) — only entries animate.
       progress.value = 0;
     }
-  }, [focused, progress]);
+  }, [focused, progress, reducedMotion]);
 
   // `progress` must stay in the deps array — see the CRITICAL note in
   // `TabBarBase`: without the worklets babel plugin (web) an omitted array