@oxyhq/bloom 0.50.2 → 0.51.1

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-solid.tsx

@@ -0,0 +1,40 @@
+/**
+ * Ported from expo-glass-tabs v0.1.1 — src/glass-tab-bar.tsx
+ * (MIT © 2026 David Mokos). See the top-level NOTICE.
+ *
+ * The tab bar's NON-GLASS capsule surface: a plain animated view filled with the
+ * theme's near-opaque fallback. Android, pre-iOS-26 devices and any build without
+ * a usable `expo-glass-effect` all paint this.
+ *
+ * It lives in its own module because TWO variants render it and one of them
+ * cannot reach the other: Metro resolves a bare `./surface` to
+ * `surface.native.tsx` no matter which file asks, so `surface.native.tsx`
+ * importing its neutral sibling for the fallback would import ITSELF. A name with
+ * no platform variants resolves to this one file everywhere — which is the whole
+ * point, so please do not fold it back into `surface.tsx`.
+ */
+import { StyleSheet } from 'react-native';
+import Animated from 'react-native-reanimated';
+
+import type { TabBarSurfaceProps } from './shared';
+
+export function SolidTabBarSurface({ theme, style }: TabBarSurfaceProps) {
+  return (
+    <Animated.View
+      style={[
+        StyleSheet.absoluteFill,
+        styles.surface,
+        { backgroundColor: theme.solidFallback },
+        style,
+      ]}
+    />
+  );
+}
+
+SolidTabBarSurface.displayName = 'SolidTabBarSurface';
+
+const styles = StyleSheet.create({
+  surface: {
+    borderCurve: 'continuous',
+  },
+});

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

@@ -0,0 +1,122 @@
+/**
+ * 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, degrading
+ * to the solid surface whenever the glass is not actually usable.
+ *
+ * `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. "Installed" is not "usable"
+ * though, and BOTH remaining hazards sit at MODULE scope, which is why neither
+ * can be handled by a branch inside the component:
+ *
+ *  1. THE NATIVE MODULE. On iOS `isLiquidGlassAvailable()` resolves
+ *     `ExpoGlassEffect` through `requireNativeModule`, which THROWS
+ *     `Cannot find native module …` by contract when that module is not in the
+ *     binary. For these apps it is a normal deploy state rather than a
+ *     misconfiguration: an OTA JS update can land on a binary built before the
+ *     package was linked, while the JS side always resolves because expo-router
+ *     depends on it. Unguarded, the throw escapes render and takes down the whole
+ *     screen the bar is on.
+ *  2. THE EXPORTS. `Animated.createAnimatedComponent(GlassView)` runs at IMPORT
+ *     time, so a tree that resolves the specifier to something without
+ *     `GlassView` hands React an `undefined` element type before any render
+ *     happens.
+ *
+ * `isGlassEffectAPIAvailable()` is upstream's own third condition: on some iOS 26
+ * betas `UIGlassEffect` is missing and touching `GlassView` crashes NATIVELY,
+ * below JS (expo/expo#40911). It first shipped in expo-glass-effect 0.1.9, which is
+ * exactly why the peer floor is `>=0.1.9`: this file imports the symbol STATICALLY,
+ * and a floor predating it would be the same incoherence as declaring a
+ * statically-imported package optional. The `typeof` guard below is still not
+ * redundant — a peer range only WARNS, so a consumer can resolve an older copy
+ * anyway. A missing probe therefore means "not applicable", never "unavailable";
+ * reading it the other way would delete the glass look from every working device.
+ *
+ * Everything that fails routes to the SAME solid surface Android already paints —
+ * the intended fallback path, not a new one.
+ */
+import { GlassView, isGlassEffectAPIAvailable, isLiquidGlassAvailable } from 'expo-glass-effect';
+import { StyleSheet } from 'react-native';
+import Animated from 'react-native-reanimated';
+
+import type { TabBarSurfaceProps } from './shared';
+import { SolidTabBarSurface } from './surface-solid';
+
+/**
+ * The animated glass view, or `null` when the package did not deliver the two
+ * exports this file needs. Built once, and guarded HERE rather than in the
+ * component because `createAnimatedComponent` runs on import (hazard 2 above).
+ */
+const AnimatedGlassView =
+  Boolean(GlassView) && typeof isLiquidGlassAvailable === 'function'
+    ? Animated.createAnimatedComponent(GlassView)
+    : null;
+
+/** Memo for {@link glassIsUsable} — the answer cannot change within a session. */
+let glassUsable: boolean | undefined;
+
+/**
+ * Whether this build can really render glass. Probed once: the native lookup
+ * behind it is not free, and on the failing path it throws.
+ *
+ * The `catch` reports rather than swallows. A bar that silently painted itself
+ * opaque on every iOS device would be far more expensive to find than one warning
+ * line, and reaching this branch always means a real, fixable packaging mistake.
+ * Warning exactly once falls out of the memo — the body runs at most one time.
+ */
+function glassIsUsable(): boolean {
+  if (glassUsable !== undefined) return glassUsable;
+
+  try {
+    glassUsable =
+      isLiquidGlassAvailable() &&
+      (typeof isGlassEffectAPIAvailable !== 'function' || isGlassEffectAPIAvailable());
+  } catch (error) {
+    glassUsable = false;
+    // eslint-disable-next-line no-console
+    console.warn(
+      '[Bloom] TabBar: expo-glass-effect could not report liquid-glass availability, ' +
+        'so the bar is painting its solid surface. Install expo-glass-effect and ' +
+        'rebuild the native app to get the glass capsule.',
+      error,
+    );
+  }
+
+  return glassUsable;
+}
+
+export function TabBarSurface({ theme, style }: TabBarSurfaceProps) {
+  if (AnimatedGlassView !== null && glassIsUsable()) {
+    return (
+      <AnimatedGlassView
+        glassEffectStyle="regular"
+        style={[
+          StyleSheet.absoluteFill,
+          styles.surface,
+          { backgroundColor: theme.glassTint },
+          style,
+        ]}
+      />
+    );
+  }
+
+  return <SolidTabBarSurface theme={theme} style={style} />;
+}
+
+TabBarSurface.displayName = 'TabBarSurface';
+
+const styles = StyleSheet.create({
+  surface: {
+    borderCurve: 'continuous',
+  },
+});

package/src/tab-bar/surface.tsx

@@ -0,0 +1,28 @@
+/**
+ * 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: the non-glass one.
+ *
+ * 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 surface itself lives in `surface-solid.tsx`, because `surface.native.tsx`
+ * renders it as its own fallback and cannot import this file to get it — Metro
+ * resolves `./surface` back to `surface.native.tsx`, i.e. to itself. This module's
+ * job is to give that one implementation the name every entry module imports.
+ *
+ * The variants — all three implement `TabBarSurfaceProps` exactly, so the entry
+ * modules can swap them freely:
+ *   - `surface.native.tsx` — iOS/Android (Metro), real `UIGlassEffect` glass, with
+ *     the solid surface as its fallback;
+ *   - `surface.web.tsx`    — web, a CSS `backdrop-filter`;
+ *   - this file            — everywhere else, the opaque fallback alone.
+ */
+export { SolidTabBarSurface as TabBarSurface } from './surface-solid';