@oxyhq/bloom 0.50.2 → 0.51.0

package/src/tab-bar/expo-router/index.ts

@@ -0,0 +1,13 @@
+/**
+ * Ported from expo-glass-tabs v0.1.1 — src/index.ts
+ * (MIT © 2026 David Mokos). See the top-level NOTICE.
+ *
+ * Entry for `@oxyhq/bloom/tab-bar/expo-router`. The components live in sibling
+ * modules because this file is the published entry path and must stay stable;
+ * the split also keeps the router bindings and the `TabSlot` renderer — which
+ * pull `expo-router` and `react-native-screens` respectively — in separate
+ * modules.
+ */
+export { RouterTabBar, RouterTabBarButton } from './RouterTabBar';
+export type { RouterTabBarProps, RouterTabBarButtonProps } from './RouterTabBar';
+export { renderFadingTabScreen } from './fading-tab-screen';

package/src/tab-bar/glyph.native.tsx

@@ -0,0 +1,46 @@
+/**
+ * Ported from expo-glass-tabs v0.1.1 — src/glass-tab-bar.tsx
+ * (MIT © 2026 David Mokos). See the top-level NOTICE.
+ *
+ * NATIVE variant of a tab glyph. Identical to the neutral variant except that
+ * an item carrying an `sfSymbol` renders as a real SF Symbol on iOS: the system
+ * glyph set, weight-matched to the platform and tinted natively.
+ *
+ * `expo-symbols` is imported STATICALLY and only here — Metro selects `.native`
+ * on iOS/Android, so it never reaches a web bundle or a consumer's type-check
+ * (see the neutral `glyph.tsx` sibling). Android has no SF Symbols, so it falls
+ * through to the item's own icon node, which every item provides.
+ */
+import { SymbolView, type SFSymbol } from 'expo-symbols';
+import { Platform, View } from 'react-native';
+
+import { applyIconColor } from '../frosted-icon-button/shared';
+import type { TabBarGlyphProps } from './shared';
+
+export function TabBarGlyph({ item, tint, size }: TabBarGlyphProps) {
+  if (item.sfSymbol && Platform.OS === 'ios') {
+    // `TabBarItem.sfSymbol` is a plain `string` because `types.ts` may import
+    // from react/react-native only — pulling `expo-symbols`' `SFSymbol` union
+    // into the public type would drag a native-only package into every web
+    // bundle and every consumer's type-check. The narrowing happens here, at
+    // the single boundary where the symbol reaches the native view; an unknown
+    // name renders nothing rather than crashing, which is why no runtime
+    // validation is warranted.
+    return (
+      <SymbolView
+        name={item.sfSymbol as SFSymbol}
+        tintColor={tint}
+        size={size}
+        weight="semibold"
+      />
+    );
+  }
+
+  return (
+    <View style={{ height: size, alignItems: 'center', justifyContent: 'center' }}>
+      {applyIconColor(item.icon, tint)}
+    </View>
+  );
+}
+
+TabBarGlyph.displayName = 'TabBarGlyph';

package/src/tab-bar/glyph.tsx

@@ -0,0 +1,31 @@
+/**
+ * Ported from expo-glass-tabs v0.1.1 — src/glass-tab-bar.tsx
+ * (MIT © 2026 David Mokos). See the top-level NOTICE.
+ *
+ * NEUTRAL default variant of a tab glyph: renders the item's own `icon` node,
+ * tinted for this crossfade layer.
+ *
+ * `item.icon` is the primary icon API for the whole family — a Bloom icon
+ * element, exactly like `TabsTrigger` and `FrostedIconButton` take. `sfSymbol`
+ * is an iOS-only enhancement and is deliberately ignored here: this file is
+ * resolved by web bundlers and by a consumer's `tsc`, where a static
+ * `expo-symbols` import would break resolution. See `glyph.native.tsx` for the
+ * variant that consumes it. Both implement `TabBarGlyphProps` exactly.
+ */
+import { View } from 'react-native';
+
+import { applyIconColor } from '../frosted-icon-button/shared';
+import type { TabBarGlyphProps } from './shared';
+
+export function TabBarGlyph({ item, tint, size }: TabBarGlyphProps) {
+  // The tint is injected as the icon's `fill` FALLBACK — an icon that sets its
+  // own `fill` (a brand mark, say) keeps it, so the crossfade layers simply
+  // render it twice at full opacity and it never flickers.
+  return (
+    <View style={{ height: size, alignItems: 'center', justifyContent: 'center' }}>
+      {applyIconColor(item.icon, tint)}
+    </View>
+  );
+}
+
+TabBarGlyph.displayName = 'TabBarGlyph';

package/src/tab-bar/index.ts

@@ -0,0 +1,32 @@
+/**
+ * Ported from expo-glass-tabs v0.1.1 — src/index.ts
+ * (MIT © 2026 David Mokos). See the top-level NOTICE.
+ *
+ * DEFAULT entry for `@oxyhq/bloom/tab-bar`.
+ *
+ * The platform pieces are imported by their BARE relative name so Metro's
+ * platform-extension resolution picks `surface.native.tsx` / `glyph.native.tsx`
+ * on iOS and Android, and every other resolver falls back to the neutral
+ * `surface.tsx` / `glyph.tsx`. Both neutral files, and everything else this
+ * module reaches, are free of native-only imports, so a consumer's `tsc` and a
+ * non-Metro bundler resolve this entry cleanly. Web bundlers select
+ * `index.web.tsx` instead, through the package's `browser` export condition.
+ */
+import { ProgressiveBlur } from '../progressive-blur';
+import { createTabBar, createTabBarButton } from './TabBarBase';
+import { TabBarGlyph } from './glyph';
+import { TabBarSurface } from './surface';
+
+export const TabBar = createTabBar(TabBarSurface, ProgressiveBlur);
+export const TabBarButton = createTabBarButton(TabBarGlyph);
+
+export {
+  MINIMIZE_SPRING,
+  setMinimized,
+  TabBarMinimizeProvider,
+  useMinimizeOnScroll,
+  useMinimizeState,
+  useTabBarMinimized,
+} from './minimize-context';
+export type { MinimizeState } from './minimize-context';
+export type { TabBarButtonProps, TabBarItem, TabBarProps, TabBarTheme } from './types';

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

@@ -0,0 +1,34 @@
+/**
+ * Ported from expo-glass-tabs v0.1.1 — src/index.ts
+ * (MIT © 2026 David Mokos). See the top-level NOTICE.
+ *
+ * WEB entry for `@oxyhq/bloom/tab-bar`, selected through the package's
+ * `browser` export condition.
+ *
+ * The web modules are imported by their FULL `.web` name on purpose. Inside the
+ * published `lib/` every file is plain `.js` (`surface.js` next to
+ * `surface.web.js`), and no web bundler resolves a bare `./surface` to the
+ * `.web` sibling by extension — only Metro does that. Writing the fork path
+ * explicitly is the same thing the generated root barrel does
+ * (`src/index.web.ts` → `from './dialog/index.web'`). `./glyph` has no web fork:
+ * the neutral file already renders `item.icon`, which is the correct web
+ * behaviour, and it is what any resolver lands on here.
+ */
+import { ProgressiveBlur } from '../progressive-blur/index.web';
+import { createTabBar, createTabBarButton } from './TabBarBase';
+import { TabBarGlyph } from './glyph';
+import { TabBarSurface } from './surface.web';
+
+export const TabBar = createTabBar(TabBarSurface, ProgressiveBlur);
+export const TabBarButton = createTabBarButton(TabBarGlyph);
+
+export {
+  MINIMIZE_SPRING,
+  setMinimized,
+  TabBarMinimizeProvider,
+  useMinimizeOnScroll,
+  useMinimizeState,
+  useTabBarMinimized,
+} from './minimize-context';
+export type { MinimizeState } from './minimize-context';
+export type { TabBarButtonProps, TabBarItem, TabBarProps, TabBarTheme } from './types';

package/src/tab-bar/minimize-context.tsx

@@ -0,0 +1,117 @@
+/**
+ * Ported from expo-glass-tabs v0.1.1 — src/minimize-context.tsx
+ * (MIT © 2026 David Mokos). See the top-level NOTICE.
+ *
+ * The shared 0..1 "minimize" progress the tab bar interpolates on, plus the
+ * scroll handler that drives it. Reanimated only — no platform imports.
+ */
+import { createContext, useContext, useMemo, type PropsWithChildren } from 'react';
+import {
+  useAnimatedScrollHandler,
+  useSharedValue,
+  withSpring,
+  type SharedValue,
+} from 'react-native-reanimated';
+
+/**
+ * Spring, not timing: scroll direction flips mid-animation constantly, and a
+ * spring retargets while preserving velocity — a timing curve would restart
+ * 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 };
+
+/** Scroll offset below which the bar is always expanded (px). */
+const TOP_ZONE = 24;
+/** Per-event scroll delta that counts as a deliberate direction change (px). */
+const DIRECTION_THRESHOLD = 3;
+
+export type MinimizeState = {
+  /** 0 = expanded (icons + labels), 1 = minimized (icons only). */
+  progress: SharedValue<number>;
+  /** Last requested target — lets writers avoid restarting the spring. */
+  target: SharedValue<number>;
+};
+
+const MinimizeContext = createContext<MinimizeState | null>(null);
+
+/**
+ * Wrap the tab tree once. Screens then call `useMinimizeOnScroll()` and the bar
+ * reads the same progress, so scrolling any screen minimizes the bar.
+ */
+export function TabBarMinimizeProvider({ children }: PropsWithChildren) {
+  const progress = useSharedValue(0);
+  const target = useSharedValue(0);
+  const state = useMemo(() => ({ progress, target }), [progress, target]);
+  return <MinimizeContext.Provider value={state}>{children}</MinimizeContext.Provider>;
+}
+
+TabBarMinimizeProvider.displayName = 'TabBarMinimizeProvider';
+
+/** Full minimize state — used by the bar, the buttons and the scroll hook. */
+export function useMinimizeState(): MinimizeState {
+  const shared = useContext(MinimizeContext);
+  // Local fallback keeps screens working when rendered outside the provider
+  // (e.g. a web tab layout with no floating bar). Hooks run unconditionally so
+  // the order is stable whether or not a provider is present.
+  const progress = useSharedValue(0);
+  const target = useSharedValue(0);
+  const local = useMemo(() => ({ progress, target }), [progress, target]);
+  return shared ?? local;
+}
+
+/** The animated 0..1 minimize progress (what styles interpolate on). */
+export function useTabBarMinimized(): SharedValue<number> {
+  return useMinimizeState().progress;
+}
+
+/**
+ * Retarget the minimize spring — no-op when already heading to `next`, so
+ * per-frame scroll events never restart (and visibly stutter) the animation.
+ * Callable from both threads.
+ */
+export function setMinimized(state: MinimizeState, next: 0 | 1) {
+  'worklet';
+  if (state.target.value !== next) {
+    state.target.value = next;
+    state.progress.value = withSpring(next, MINIMIZE_SPRING);
+  }
+}
+
+/**
+ * Scroll handler for `Animated.ScrollView`. Scrolling down minimizes the tab
+ * bar, scrolling up (or being near the top) expands it. Offsets are clamped to
+ * the scrollable range so rubber-band overscroll can't flip the direction for a
+ * frame and flicker the bar.
+ */
+export function useMinimizeOnScroll() {
+  const state = useMinimizeState();
+  const previousY = useSharedValue(0);
+
+  // CRITICAL — `state` and `previousY` must stay in the dependency array. On
+  // web WITHOUT the react-native-worklets babel plugin (the production reality
+  // for every Oxy RN-Web app) reanimated cannot auto-detect what a worklet
+  // reads, so it drives the handler off its deps instead; an omitted or empty
+  // array binds the handler once against the first render's values. Native
+  // (plugin present) auto-tracks and ignores the extra deps, so listing them is
+  // correct on both platforms. Same rule as every mapper in `TabBarBase`.
+  return useAnimatedScrollHandler(
+    {
+      onScroll: (event) => {
+        const maxY = Math.max(event.contentSize.height - event.layoutMeasurement.height, 0);
+        const y = Math.min(Math.max(event.contentOffset.y, 0), maxY);
+        const dy = y - previousY.value;
+        previousY.value = y;
+
+        if (y < TOP_ZONE) {
+          setMinimized(state, 0);
+        } else if (dy > DIRECTION_THRESHOLD) {
+          setMinimized(state, 1);
+        } else if (dy < -DIRECTION_THRESHOLD) {
+          setMinimized(state, 0);
+        }
+      },
+    },
+    [state, previousY],
+  );
+}

package/src/tab-bar/shared.ts

@@ -0,0 +1,159 @@
+/**
+ * Ported from expo-glass-tabs v0.1.1 — src/glass-tab-bar.tsx
+ * (MIT © 2026 David Mokos). See the top-level NOTICE.
+ *
+ * Geometry, motion constants, theme resolution and the contracts for the two
+ * injected platform components. Everything here is platform-neutral — no
+ * expo-glass-effect, expo-symbols, expo-router or react-native-screens — because
+ * this module is pulled into the native bundle, the web bundle and a consumer's
+ * `tsc` alike.
+ */
+import { useMemo } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { AnimatedStyle } from 'react-native-reanimated';
+
+import { withAlpha } from '../theme/color-utils';
+import type { ThemeColors } from '../theme/types';
+import { useTheme } from '../theme/use-theme';
+import type { TabBarItem, TabBarTheme } from './types';
+
+// ---------------------------------------------------------------------------
+//  Geometry
+//
+//  Every dimension the bar animates is a constant here rather than a measured
+//  layout: the highlight's position, the item box height and the capsule radius
+//  are all derived from these on the UI thread each frame. Measuring instead
+//  would put a layout round-trip between the finger and the pixels.
+// ---------------------------------------------------------------------------
+
+export const EXPANDED_HEIGHT = 58;
+export const MINIMIZED_HEIGHT = 44;
+/** Extra horizontal inset applied to the pill when minimized (per side). */
+export const MINIMIZED_INSET = 34;
+/** Outer margin between the pill and the screen edges (per side). */
+export const BAR_MARGIN = 12;
+/** Inner inset between the capsule wall and the tab items. */
+export const ROW_PAD_H = 4;
+export const LABEL_HEIGHT = 13;
+export const ICON_SIZE = 21;
+/**
+ * Space between icon and label — folded into the label's animated height so it
+ * fully disappears when minimized (keeps the icon perfectly centered).
+ */
+export const ITEM_GAP = 2;
+export const LABEL_BLOCK = LABEL_HEIGHT + ITEM_GAP;
+export const ITEM_PAD_V = 7;
+/** Highlight content heights — radius must track h/2 for a true capsule. */
+export const HIGHLIGHT_EXPANDED = ICON_SIZE + LABEL_BLOCK + ITEM_PAD_V * 2;
+export const HIGHLIGHT_MINIMIZED = ICON_SIZE + ITEM_PAD_V * 2;
+/** How far the bottom progressive blur bleeds above the pill. */
+export const BLUR_BLEED = 44;
+/** Label type size. Small by design — the icon carries the meaning. */
+export const LABEL_FONT_SIZE = 9.5;
+
+/**
+ * Slide spring: interruptible by design — rapid tab-hopping retargets with
+ * preserved velocity. Slight under-damping gives the pill a tiny settle, safe
+ * here because it's transform-only (no layout involved).
+ */
+export const SLIDE_SPRING = { duration: 420, dampingRatio: 0.82 };
+
+// ---------------------------------------------------------------------------
+//  Theme
+// ---------------------------------------------------------------------------
+
+/**
+ * Resolve the bar's five colors from Bloom's theme tokens, with an optional
+ * partial override on top.
+ *
+ * Upstream hardcoded a dark palette (`#FFFFFF` / `rgba(10,10,12,0.55)` / …),
+ * which would ignore the active preset and read as a black bar in a light
+ * theme. Each role maps onto the token that already carries that meaning, so
+ * the bar follows `BloomThemeProvider` for free:
+ *
+ *   - the two tints are the standard foreground pair;
+ *   - the highlight is `contrast50`, the token meant for a subtle raised fill;
+ *   - the glass tint is a 55%-alpha page background, so the liquid-glass
+ *     material behind it still refracts content;
+ *   - the solid fallback is a 94%-alpha `backgroundSecondary` — near-opaque, so
+ *     the bar reads as a distinct surface where there is no glass to lens.
+ *
+ * Overrides are coalesced key by key (not spread) so an explicit `undefined` in
+ * a partial can never punch a hole in the resolved theme.
+ */
+export function resolveTabBarTheme(
+  colors: ThemeColors,
+  overrides?: Partial<TabBarTheme>,
+): TabBarTheme {
+  return {
+    activeTint: overrides?.activeTint ?? colors.text,
+    inactiveTint: overrides?.inactiveTint ?? colors.textSecondary,
+    highlight: overrides?.highlight ?? colors.contrast50,
+    glassTint: overrides?.glassTint ?? withAlpha(colors.background, 0.55),
+    solidFallback: overrides?.solidFallback ?? withAlpha(colors.backgroundSecondary, 0.94),
+  };
+}
+
+/**
+ * Hook form of {@link resolveTabBarTheme}.
+ *
+ * Memoized on the individual override VALUES rather than on the `overrides`
+ * object: callers pass an inline literal (`theme={{ highlight: '#…' }}`), whose
+ * identity changes every render. The resolved theme feeds a React context and a
+ * reanimated dependency array, so a fresh identity per render would re-render
+ * every button and rebuild the label mapper for nothing.
+ */
+export function useTabBarTheme(overrides?: Partial<TabBarTheme>): TabBarTheme {
+  const { colors } = useTheme();
+  const { activeTint, inactiveTint, highlight, glassTint, solidFallback } = overrides ?? {};
+
+  return useMemo(
+    () =>
+      resolveTabBarTheme(colors, {
+        activeTint,
+        inactiveTint,
+        highlight,
+        glassTint,
+        solidFallback,
+      }),
+    [colors, activeTint, inactiveTint, highlight, glassTint, solidFallback],
+  );
+}
+
+// ---------------------------------------------------------------------------
+//  Injected platform components
+//
+//  `TabBarBase` is platform-agnostic and receives its two platform-specific
+//  pieces as component props (the same shape as `BottomSheetBase`'s `Shell`).
+//  The three surface variants and the two glyph variants implement these exact
+//  signatures, which is what makes the resolution paths interchangeable:
+//  Metro picks `*.native.tsx`, the `browser` export condition picks the entry
+//  that imports `*.web.tsx`, everything else gets the neutral file.
+// ---------------------------------------------------------------------------
+
+export interface TabBarSurfaceProps {
+  /** Resolved theme — the surface picks `glassTint` or `solidFallback`. */
+  theme: TabBarTheme;
+  /**
+   * Animated capsule shape (a `borderRadius` tracking the animated height).
+   * It rides on the surface itself rather than on a clipping parent: iOS 26
+   * glass renders its own native corner configuration (true squircle + rim
+   * lighting), which an RN mask would flatten.
+   *
+   * Typed through `AnimatedStyle` because this always receives a
+   * `useAnimatedStyle` result, which reanimated 4.5 returns as an opaque
+   * `AnimatedStyleHandle` rather than the plain style object 4.2 handed back.
+   * Same reason `BottomSheetProps.style` is typed this way. Every variant
+   * forwards it into an `Animated.View` (or an animated `GlassView`), so the
+   * wider type is what they genuinely accept.
+   */
+  style: StyleProp<AnimatedStyle<ViewStyle>>;
+}
+
+export interface TabBarGlyphProps {
+  item: TabBarItem;
+  /** Color for THIS layer — the bar renders one glyph per crossfade layer. */
+  tint: string;
+  /** Rendered icon size in px ({@link ICON_SIZE}). */
+  size: number;
+}

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

@@ -0,0 +1,60 @@
+/**
+ * Ported from expo-glass-tabs v0.1.1 — src/glass-tab-bar.tsx
+ * (MIT © 2026 David Mokos). See the top-level NOTICE.
+ *
+ * NATIVE variant of the tab bar's capsule surface — real liquid glass.
+ *
+ * `expo-glass-effect` is imported STATICALLY and this file is the only place it
+ * appears: Metro selects `.native` on iOS/Android, so the import never reaches
+ * a web bundle or a consumer's type-check (that is what the neutral
+ * `surface.tsx` sibling is for). A peer dependency plus a static import plus a
+ * runtime capability check is the deliberate shape here — not a lazy
+ * `require()`, which Metro cannot bundle from published `lib/` when the module
+ * name is dynamic and which would also hide the dependency from consumers.
+ *
+ * `isLiquidGlassAvailable()` is false on Android and pre-iOS-26, where the
+ * package's `GlassView` has no material to render; those platforms get the same
+ * opaque fallback the neutral variant paints.
+ */
+import { GlassView, isLiquidGlassAvailable } from 'expo-glass-effect';
+import { StyleSheet } from 'react-native';
+import Animated from 'react-native-reanimated';
+
+import type { TabBarSurfaceProps } from './shared';
+
+const AnimatedGlassView = Animated.createAnimatedComponent(GlassView);
+
+export function TabBarSurface({ theme, style }: TabBarSurfaceProps) {
+  if (isLiquidGlassAvailable()) {
+    return (
+      <AnimatedGlassView
+        glassEffectStyle="regular"
+        style={[
+          StyleSheet.absoluteFill,
+          styles.surface,
+          { backgroundColor: theme.glassTint },
+          style,
+        ]}
+      />
+    );
+  }
+
+  return (
+    <Animated.View
+      style={[
+        StyleSheet.absoluteFill,
+        styles.surface,
+        { backgroundColor: theme.solidFallback },
+        style,
+      ]}
+    />
+  );
+}
+
+TabBarSurface.displayName = 'TabBarSurface';
+
+const styles = StyleSheet.create({
+  surface: {
+    borderCurve: 'continuous',
+  },
+});

package/src/tab-bar/surface.tsx

@@ -0,0 +1,47 @@
+/**
+ * Ported from expo-glass-tabs v0.1.1 — src/glass-tab-bar.tsx
+ * (MIT © 2026 David Mokos). See the top-level NOTICE.
+ *
+ * NEUTRAL default variant of the tab bar's capsule surface: a plain animated
+ * view filled with the theme's solid fallback.
+ *
+ * This is the file resolved by everything that does NOT do React Native's
+ * platform-extension resolution — a consumer's `tsc` (which follows Bloom's
+ * `"react-native"` source export condition) and any non-Metro bundler reading
+ * the published `lib/`. It therefore imports NOTHING platform-specific:
+ * `expo-glass-effect` is native-only, and a static import of it from a file a
+ * web bundler or a consumer's type-checker resolves would break module
+ * resolution outright. Same three-way split, for the same reason, as
+ * `theme/native-root-vars{,.native,.web}.ts`.
+ *
+ * The variants — all three implement `TabBarSurfaceProps` exactly, so the entry
+ * modules can swap them freely:
+ *   - `surface.native.tsx` — iOS/Android (Metro), real `UIGlassEffect` glass;
+ *   - `surface.web.tsx`    — web, a CSS `backdrop-filter`;
+ *   - this file            — everywhere else, the opaque fallback.
+ */
+import { StyleSheet } from 'react-native';
+import Animated from 'react-native-reanimated';
+
+import type { TabBarSurfaceProps } from './shared';
+
+export function TabBarSurface({ theme, style }: TabBarSurfaceProps) {
+  return (
+    <Animated.View
+      style={[
+        StyleSheet.absoluteFill,
+        styles.surface,
+        { backgroundColor: theme.solidFallback },
+        style,
+      ]}
+    />
+  );
+}
+
+TabBarSurface.displayName = 'TabBarSurface';
+
+const styles = StyleSheet.create({
+  surface: {
+    borderCurve: 'continuous',
+  },
+});

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

@@ -0,0 +1,56 @@
+/**
+ * Ported from expo-glass-tabs v0.1.1 — src/glass-tab-bar.tsx
+ * (MIT © 2026 David Mokos). See the top-level NOTICE.
+ *
+ * WEB variant of the tab bar's capsule surface: the browser's own frosted
+ * material, `backdrop-filter`, under the theme's translucent glass tint.
+ *
+ * The element stays a react-native-web `Animated.View` because the capsule
+ * radius is animated by reanimated on every minimize frame. The two web-only
+ * declarations ride in the STYLE object rather than a CSS class: react-native-
+ * web does not forward `className` to the DOM (its `forwardedProps` list has no
+ * `className`, and `createDOMProps` overwrites the attribute with the atomic
+ * class it generates), whereas unknown style properties ARE passed straight
+ * through its style compiler. That is the same route `Dialog.web.tsx` uses for
+ * its `animation` shorthand. No stylesheet needs injecting here: there is no
+ * `@keyframes` or pseudo-class involved, so nothing that an inline declaration
+ * cannot express.
+ *
+ * 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 Animated from 'react-native-reanimated';
+
+import type { TabBarSurfaceProps } from './shared';
+
+/**
+ * Blur radius of the web glass, in px. Tuned to read like the iOS 26 `regular`
+ * glass under the same 55%-alpha tint: enough to dissolve text scrolling
+ * underneath without smearing large shapes into mush. The saturation boost is
+ * what keeps colors behind the bar from going flat and grey.
+ */
+const GLASS_BLUR_PX = 24;
+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 = {
+  backdropFilter: GLASS_FILTER,
+  WebkitBackdropFilter: GLASS_FILTER,
+} as ViewStyle;
+
+export function TabBarSurface({ theme, style }: TabBarSurfaceProps) {
+  return (
+    <Animated.View
+      style={[
+        StyleSheet.absoluteFill,
+        glassFilterStyle,
+        { backgroundColor: theme.glassTint },
+        style,
+      ]}
+    />
+  );
+}
+
+TabBarSurface.displayName = 'TabBarSurface';