@oxyhq/bloom 0.50.2 → 0.51.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxyhq/bloom",
-  "version": "0.50.2",
+  "version": "0.51.0",
   "description": "Bloom UI — Oxy ecosystem component library for React Native + Expo + Web",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -334,11 +334,6 @@
     },
     "./toast": {
       "react-native": "./src/toast/index.tsx",
-      "browser": {
-        "types": "./lib/typescript/module/toast/index.web.d.ts",
-        "import": "./lib/module/toast/index.web.js",
-        "require": "./lib/commonjs/toast/index.web.js"
-      },
       "import": {
         "types": "./lib/typescript/module/toast/index.d.ts",
         "default": "./lib/module/toast/index.js"
@@ -1012,12 +1007,56 @@
         "default": "./lib/commonjs/list/index.js"
       }
     },
+    "./tab-bar": {
+      "react-native": "./src/tab-bar/index.ts",
+      "browser": {
+        "types": "./lib/typescript/module/tab-bar/index.web.d.ts",
+        "import": "./lib/module/tab-bar/index.web.js",
+        "require": "./lib/commonjs/tab-bar/index.web.js"
+      },
+      "import": {
+        "types": "./lib/typescript/module/tab-bar/index.d.ts",
+        "default": "./lib/module/tab-bar/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/tab-bar/index.d.ts",
+        "default": "./lib/commonjs/tab-bar/index.js"
+      }
+    },
+    "./tab-bar/expo-router": {
+      "react-native": "./src/tab-bar/expo-router/index.ts",
+      "import": {
+        "types": "./lib/typescript/module/tab-bar/expo-router/index.d.ts",
+        "default": "./lib/module/tab-bar/expo-router/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/tab-bar/expo-router/index.d.ts",
+        "default": "./lib/commonjs/tab-bar/expo-router/index.js"
+      }
+    },
+    "./progressive-blur": {
+      "react-native": "./src/progressive-blur/index.tsx",
+      "browser": {
+        "types": "./lib/typescript/module/progressive-blur/index.web.d.ts",
+        "import": "./lib/module/progressive-blur/index.web.js",
+        "require": "./lib/commonjs/progressive-blur/index.web.js"
+      },
+      "import": {
+        "types": "./lib/typescript/module/progressive-blur/index.d.ts",
+        "default": "./lib/module/progressive-blur/index.js"
+      },
+      "require": {
+        "types": "./lib/typescript/commonjs/progressive-blur/index.d.ts",
+        "default": "./lib/commonjs/progressive-blur/index.js"
+      }
+    },
     "./design-tokens/theme.css": "./src/design-tokens/theme.css",
     "./package.json": "./package.json"
   },
   "files": [
     "src",
-    "lib"
+    "lib",
+    "NOTICE"
   ],
   "keywords": [
     "react-native",
@@ -1088,8 +1127,8 @@
     "typescript": "tsc --noEmit",
     "pretypescript": "node scripts/generate-font-data.mjs",
     "clean": "rm -rf lib",
-    "prepack": "bun run clean && bunx bob build",
-    "prepare": "bob build || true",
+    "prepack": "bun run clean && bun run build",
+    "prepare": "bun run build || true",
     "release": "rm -rf lib && bun run build && release-it",
     "storybook": "storybook dev -p 6006 --no-open",
     "storybook:build": "storybook build -o storybook-static"
@@ -1121,9 +1160,11 @@
     "@vitejs/plugin-react": "^6.0.2",
     "expo-blur": "~56.0.3",
     "expo-font": "^56.0.5",
+    "expo-glass-effect": "~56.0.4",
     "expo-haptics": "~56.0.3",
     "expo-image": "~56.0.11",
     "expo-router": "^56.0.0",
+    "expo-symbols": "~56.0.6",
     "jest": "^30.3.0",
     "jest-environment-jsdom": "^30.4.1",
     "react": "19.2.0",
@@ -1131,14 +1172,14 @@
     "react-native": "0.83.2",
     "react-native-builder-bob": "^0.40.16",
     "react-native-gesture-handler": "^2.30.0",
-    "react-native-reanimated": "^4.2.2",
+    "react-native-reanimated": "^4.5.0",
     "react-native-safe-area-context": "~5.6.0",
+    "react-native-screens": "^4.25.2",
     "react-native-svg": "^15.15.3",
     "react-native-web": "^0.21.2",
+    "react-native-worklets": "0.10.0",
     "react-test-renderer": "^19.2.0",
     "release-it": "^19.0.6",
-    "sonner": "^2.0.3",
-    "sonner-native": "^0.23.1",
     "storybook": "^10",
     "ts-jest": "^29.4.6",
     "typescript": "~5.9.2",
@@ -1148,18 +1189,19 @@
     "expo": "*",
     "expo-blur": "*",
     "expo-font": "*",
+    "expo-glass-effect": ">=0.1.5",
     "expo-haptics": "*",
     "expo-image": "*",
     "expo-router": ">=3.0.0",
+    "expo-symbols": ">=0.4.5",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
     "react-native": ">=0.73.0",
-    "react-native-gesture-handler": ">=2.0.0",
-    "react-native-reanimated": ">=3.0.0",
+    "react-native-gesture-handler": ">=2.16.1",
+    "react-native-reanimated": ">=3.13.0",
     "react-native-safe-area-context": ">=5.0.0",
+    "react-native-screens": ">=3.16.0",
     "react-native-svg": ">=13.0.0",
-    "sonner": ">=2.0.0",
-    "sonner-native": ">=0.17.0",
     "nativewind": ">=5.0.0"
   },
   "peerDependenciesMeta": {
@@ -1169,22 +1211,19 @@
     "expo-font": {
       "optional": true
     },
-    "expo-haptics": {
-      "optional": true
-    },
-    "expo-router": {
+    "expo-glass-effect": {
       "optional": true
     },
-    "react-dom": {
+    "expo-haptics": {
       "optional": true
     },
-    "react-native-svg": {
+    "expo-router": {
       "optional": true
     },
-    "sonner": {
+    "expo-symbols": {
       "optional": true
     },
-    "sonner-native": {
+    "react-dom": {
       "optional": true
     },
     "nativewind": {
@@ -1218,7 +1257,6 @@
   },
   "dependencies": {
     "@tanstack/react-virtual": "^3.14.3",
-    "nanoid": "^5.1.5",
     "react-native-css": "3.0.7",
     "react-remove-scroll-bar": "^2.3.8"
   },

package/src/__tests__/TabBar.test.tsx

@@ -0,0 +1,342 @@
+import React from 'react';
+import type { ReactTestInstance } from 'react-test-renderer';
+import { fireEvent, render } from '@testing-library/react-native';
+
+import { BloomThemeProvider } from '../theme/BloomThemeProvider';
+import type { ThemeColors } from '../theme/types';
+import { useTheme } from '../theme/use-theme';
+import { TabBar, TabBarButton } from '../tab-bar';
+import { TabBarGlyph as NativeTabBarGlyph } from '../tab-bar/glyph.native';
+import { resolveTabBarTheme } from '../tab-bar/shared';
+import { TabBarSurface as NativeTabBarSurface } from '../tab-bar/surface.native';
+import type { TabBarItem, TabBarTheme } from '../tab-bar/types';
+
+/**
+ * Behaviour tests for the floating tab bar.
+ *
+ * Three properties of the environment shape every assertion here:
+ *
+ *  1. Jest has no platform-extension resolution, so `../tab-bar` binds the
+ *     NEUTRAL `surface.tsx` / `glyph.tsx`. The two `.native` variants are pulled
+ *     in by their full path where they are asserted on directly — which is also
+ *     what makes the `expo-glass-effect` / `expo-symbols` mocks load-bearing
+ *     rather than decorative.
+ *  2. Labels render through `Animated.Text`, a plain host string under the
+ *     reanimated mock, so testing-library's text queries cannot see them.
+ *     `labelFor` walks the tree instead.
+ *  3. The reanimated mock's shared values are plain boxes: writing
+ *     `slideIndex.value` does NOT re-render, and `useAnimatedStyle` runs during
+ *     render. A mapper reading a shared value that an EFFECT wrote therefore
+ *     reflects the write only on the NEXT render — hence `renderSettled`. The
+ *     motion itself is verified in a real browser, not here.
+ */
+
+/**
+ * Stand-in for a Bloom icon element: a host node tagged with the `fill` it was
+ * cloned with, so a test can read back the tint the bar injected through
+ * `applyIconColor`.
+ */
+function BareIcon({ id, fill }: { id: string; fill?: string }) {
+  return React.createElement('bloom-test-icon', { testID: id, fill });
+}
+
+const ITEMS: TabBarItem[] = [
+  { name: 'home', label: 'Home', icon: <BareIcon id="home-icon" /> },
+  { name: 'search', label: 'Search', icon: <BareIcon id="search-icon" /> },
+  { name: 'you', label: 'You', icon: <BareIcon id="you-icon" /> },
+];
+
+/** Captures the live `ThemeColors` so assertions compare against real tokens. */
+function ThemeProbe({ onColors }: { onColors: (colors: ThemeColors) => void }) {
+  onColors(useTheme().colors);
+  return null;
+}
+
+function withTheme(ui: React.ReactElement) {
+  return (
+    <BloomThemeProvider mode="light" colorPreset="teal">
+      {ui}
+    </BloomThemeProvider>
+  );
+}
+
+function renderWithTheme(ui: React.ReactElement) {
+  return render(withTheme(ui));
+}
+
+/**
+ * Render, then re-render an equivalent tree so mappers see the shared-value
+ * writes the mount effects made. See note 3 in the file header.
+ *
+ * Takes a FACTORY, not an element: React bails out of re-rendering a
+ * referentially identical element, which would skip the second pass entirely
+ * and silently leave the assertion reading first-frame values.
+ */
+function renderSettled(ui: () => React.ReactElement) {
+  const utils = renderWithTheme(ui());
+  utils.rerender(withTheme(ui()));
+  return utils;
+}
+
+/** The theme the bar resolves for `mode="light" colorPreset="teal"`. */
+function readTheme(overrides?: Partial<TabBarTheme>): TabBarTheme {
+  let resolved: TabBarTheme | undefined;
+  renderWithTheme(
+    <ThemeProbe
+      onColors={(colors) => {
+        resolved = resolveTabBarTheme(colors, overrides);
+      }}
+    />,
+  );
+  if (!resolved) throw new Error('ThemeProbe never ran');
+  return resolved;
+}
+
+// Flatten a (possibly nested / conditional) RN style prop into one object.
+function flattenStyle(style: unknown): Record<string, unknown> {
+  const out: Record<string, unknown> = {};
+  const visit = (s: unknown): void => {
+    if (Array.isArray(s)) s.forEach(visit);
+    else if (s && typeof s === 'object') Object.assign(out, s);
+  };
+  visit(style);
+  return out;
+}
+
+/**
+ * The host tag a node renders as, or `null` for a composite.
+ *
+ * `ReactTestInstance['type']` is typed as `ElementType`, whose string arm is the
+ * union of KNOWN intrinsic tags — so comparing it directly to a mock host name
+ * like `'Animated.Text'` is a TS2367 "no overlap" error. Widening to `string`
+ * behind this accessor is the honest fix: these really are host tags, they are
+ * just ones the RN/reanimated mocks invent.
+ */
+function hostName(node: ReactTestInstance): string | null {
+  const { type } = node;
+  return typeof type === 'string' ? type : null;
+}
+
+/**
+ * Every tab trigger, in bar order.
+ *
+ * Restricted to HOST nodes: the tree carries both the composite `Pressable` and
+ * the host element it renders, and both hold the same props — counting them all
+ * would double every tab.
+ */
+function triggers(root: ReactTestInstance): ReactTestInstance[] {
+  return root.findAll(
+    (node) => hostName(node) !== null && node.props?.accessibilityRole === 'tab',
+  );
+}
+
+/** The `Animated.Text` label node of the tab whose text is `label`. */
+function labelFor(root: ReactTestInstance, label: string): ReactTestInstance {
+  const found = root.findAll(
+    (node) => hostName(node) === 'Animated.Text' && node.props?.children === label,
+  );
+  const first = found[0];
+  if (!first) throw new Error(`No tab label rendered with text "${label}"`);
+  return first;
+}
+
+/** Every host node rendered as `tag`. */
+function hosts(root: ReactTestInstance, tag: string): ReactTestInstance[] {
+  return root.findAll((node) => hostName(node) === tag);
+}
+
+function selectedFlags(root: ReactTestInstance): boolean[] {
+  return triggers(root).map((node) => node.props.accessibilityState.selected);
+}
+
+function Bar({
+  activeIndex,
+  onIndexChange,
+  theme,
+  focusedIndex,
+}: {
+  activeIndex?: number;
+  onIndexChange?: (index: number) => void;
+  theme?: Partial<TabBarTheme>;
+  /** When set, drives the FOCUS path (`isFocused`) instead of `activeIndex`. */
+  focusedIndex?: number;
+}) {
+  return (
+    <TabBar activeIndex={activeIndex} onIndexChange={onIndexChange} theme={theme}>
+      {ITEMS.map((item, index) => (
+        <TabBarButton
+          key={item.name}
+          item={item}
+          index={index}
+          isFocused={focusedIndex === undefined ? undefined : focusedIndex === index}
+        />
+      ))}
+    </TabBar>
+  );
+}
+
+describe('TabBar', () => {
+  it('renders every item label', () => {
+    const { UNSAFE_root } = renderWithTheme(<Bar activeIndex={0} />);
+    for (const item of ITEMS) expect(labelFor(UNSAFE_root, item.label)).toBeTruthy();
+  });
+
+  it("renders each item's own icon node, on both crossfade layers", () => {
+    const { getAllByTestId } = renderWithTheme(<Bar activeIndex={0} />);
+    // The bar renders the glyph twice per tab: an inactive layer with the
+    // active layer crossfading on top.
+    for (const id of ['home-icon', 'search-icon', 'you-icon']) {
+      expect(getAllByTestId(id)).toHaveLength(2);
+    }
+  });
+
+  it('injects the layer tint as the icon fill, from theme tokens', () => {
+    const theme = readTheme();
+    const { getAllByTestId } = renderWithTheme(<Bar activeIndex={0} />);
+    const fills = getAllByTestId('home-icon').map((node) => node.props.fill);
+    expect(fills).toEqual(expect.arrayContaining([theme.inactiveTint, theme.activeTint]));
+  });
+
+  it('marks the tab at activeIndex as selected for accessibility', () => {
+    const { UNSAFE_root } = renderWithTheme(<Bar activeIndex={1} />);
+    expect(selectedFlags(UNSAFE_root)).toEqual([false, true, false]);
+  });
+
+  it('moves the selection when activeIndex changes', () => {
+    const { UNSAFE_root, rerender } = renderWithTheme(<Bar activeIndex={0} />);
+    rerender(withTheme(<Bar activeIndex={2} />));
+    expect(selectedFlags(UNSAFE_root)).toEqual([false, false, true]);
+  });
+
+  it('tints the label of the tab the highlight sits on', () => {
+    const theme = readTheme();
+    const { UNSAFE_root } = renderSettled(() => <Bar activeIndex={1} />);
+    expect(flattenStyle(labelFor(UNSAFE_root, 'Search').props.style).color).toBe(theme.activeTint);
+    expect(flattenStyle(labelFor(UNSAFE_root, 'Home').props.style).color).toBe(theme.inactiveTint);
+  });
+
+  it('calls onIndexChange with the pressed index', () => {
+    const onIndexChange = jest.fn();
+    const { UNSAFE_root } = renderWithTheme(<Bar activeIndex={0} onIndexChange={onIndexChange} />);
+    fireEvent.press(triggers(UNSAFE_root)[2] as ReactTestInstance);
+    expect(onIndexChange).toHaveBeenCalledTimes(1);
+    expect(onIndexChange).toHaveBeenCalledWith(2);
+  });
+
+  it('does not report the press itself on the focus-driven path', () => {
+    // With `isFocused` supplied the router trigger's own onPress navigates;
+    // reporting through the bar as well would navigate twice.
+    const onIndexChange = jest.fn();
+    const { UNSAFE_root } = renderWithTheme(
+      <Bar focusedIndex={0} onIndexChange={onIndexChange} />,
+    );
+    fireEvent.press(triggers(UNSAFE_root)[1] as ReactTestInstance);
+    expect(onIndexChange).not.toHaveBeenCalled();
+  });
+
+  it('lets isFocused override the bar activeIndex', () => {
+    const { UNSAFE_root } = renderWithTheme(
+      <TabBar activeIndex={0}>
+        {ITEMS.map((item, index) => (
+          <TabBarButton key={item.name} item={item} index={index} isFocused={index === 2} />
+        ))}
+      </TabBar>,
+    );
+    // Index 0 is the bar's activeIndex, but every button carries an explicit
+    // isFocused, so focus comes from the buttons alone.
+    expect(selectedFlags(UNSAFE_root)).toEqual([false, false, true]);
+  });
+
+  it('drives the highlight from isFocused when the bar is uncontrolled', () => {
+    const theme = readTheme();
+    // The router path: `RouterTabBarProps` omits `activeIndex` on purpose, so
+    // the focused BUTTON is the only writer of the highlight. This is what
+    // keeps the pill correct through deep links and back gestures.
+    const { UNSAFE_root } = renderSettled(() => <Bar focusedIndex={2} />);
+    // The label tint follows the sliding highlight, so it reports where the
+    // pill actually is.
+    expect(flattenStyle(labelFor(UNSAFE_root, 'You').props.style).color).toBe(theme.activeTint);
+    expect(flattenStyle(labelFor(UNSAFE_root, 'Home').props.style).color).toBe(theme.inactiveTint);
+  });
+
+  describe('theming', () => {
+    it('resolves its defaults from Bloom tokens, never a hardcoded palette', () => {
+      const theme = readTheme();
+      // Upstream shipped a fixed dark palette; every role must instead come
+      // from the active preset, which resolves to Bloom's `rgb(...)` tokens.
+      for (const [role, value] of Object.entries(theme)) {
+        expect([role, value]).toEqual([role, expect.stringMatching(/^rgba?\(/)]);
+      }
+      expect(theme.activeTint).not.toBe('#FFFFFF');
+      expect(theme.activeTint).not.toBe(theme.inactiveTint);
+    });
+
+    it('paints the highlight with the resolved highlight token', () => {
+      const theme = readTheme();
+      const { UNSAFE_root } = renderWithTheme(<Bar activeIndex={0} />);
+      const painted = UNSAFE_root.findAll(
+        (node) => flattenStyle(node.props?.style).backgroundColor === theme.highlight,
+      );
+      expect(painted.length).toBeGreaterThan(0);
+    });
+
+    it('applies a partial theme override without dropping the other roles', () => {
+      const defaults = readTheme();
+      const overridden = readTheme({ highlight: 'rgb(1 2 3)' });
+      expect(overridden.highlight).toBe('rgb(1 2 3)');
+      expect(overridden.activeTint).toBe(defaults.activeTint);
+      expect(overridden.glassTint).toBe(defaults.glassTint);
+    });
+
+    it('never lets an explicit undefined in a partial punch a hole', () => {
+      const defaults = readTheme();
+      expect(readTheme({ activeTint: undefined }).activeTint).toBe(defaults.activeTint);
+    });
+
+    it('paints the bar with an overridden highlight', () => {
+      const { UNSAFE_root } = renderWithTheme(
+        <Bar activeIndex={0} theme={{ highlight: 'rgb(9 9 9)' }} />,
+      );
+      const painted = UNSAFE_root.findAll(
+        (node) => flattenStyle(node.props?.style).backgroundColor === 'rgb(9 9 9)',
+      );
+      expect(painted.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('native platform variants', () => {
+    it('falls back to the solid theme fill when liquid glass is unavailable', () => {
+      // The `expo-glass-effect` mock reports `isLiquidGlassAvailable() === false`
+      // (see the note in that file), so this is the branch every Android and
+      // pre-iOS-26 device takes.
+      const theme = readTheme();
+      const { UNSAFE_root } = renderWithTheme(
+        <NativeTabBarSurface theme={theme} style={{ borderRadius: 29 }} />,
+      );
+      expect(hosts(UNSAFE_root, 'GlassView')).toHaveLength(0);
+      const surface = hosts(UNSAFE_root, 'Animated.View')[0];
+      expect(flattenStyle(surface?.props.style).backgroundColor).toBe(theme.solidFallback);
+    });
+
+    it('renders an SF Symbol on iOS when the item carries one', () => {
+      const theme = readTheme();
+      const item: TabBarItem = { ...(ITEMS[0] as TabBarItem), sfSymbol: 'house.fill' };
+      const { UNSAFE_root } = renderWithTheme(
+        <NativeTabBarGlyph item={item} tint={theme.activeTint} size={21} />,
+      );
+      const symbol = hosts(UNSAFE_root, 'SymbolView')[0];
+      expect(symbol?.props.name).toBe('house.fill');
+      expect(symbol?.props.tintColor).toBe(theme.activeTint);
+      expect(symbol?.props.size).toBe(21);
+    });
+
+    it('falls back to the item icon when no SF Symbol is given', () => {
+      const theme = readTheme();
+      const { queryByTestId, UNSAFE_root } = renderWithTheme(
+        <NativeTabBarGlyph item={ITEMS[0] as TabBarItem} tint={theme.activeTint} size={21} />,
+      );
+      expect(hosts(UNSAFE_root, 'SymbolView')).toHaveLength(0);
+      expect(queryByTestId('home-icon')).toBeTruthy();
+    });
+  });
+});

package/src/__tests__/TabBarReanimatedDeps.test.ts

@@ -0,0 +1,130 @@
+import { readdirSync, readFileSync, statSync } from 'node:fs';
+import { join, relative } from 'node:path';
+
+/**
+ * Every reanimated mapper in the tab bar must pass a NON-EMPTY dependency array.
+ *
+ * On web WITHOUT the react-native-worklets babel plugin — the production reality
+ * for every Oxy RN-Web app — reanimated cannot auto-detect which shared values a
+ * worklet reads, so it drives the mapper off its deps array instead. A missing or
+ * empty array means the mapper runs ONCE and freezes at the first frame: the
+ * shared values keep animating underneath, the DOM never updates. For this
+ * component that means a bar that never minimizes, a highlight that never moves
+ * and a scroll handler bound to the first render's state — with no error
+ * anywhere. Native (plugin present) auto-tracks and ignores the extra deps, so
+ * listing them is correct on both platforms.
+ *
+ * This is deliberately STRICTER than the repo-wide `animated-style-deps` guard,
+ * which only checks that the values a mapper reads appear in the deps it
+ * declares. Here every mapper must carry a real deps array whether or not the
+ * regex can see a `.value` read inside it, and `useAnimatedScrollHandler` — which
+ * the repo-wide guard does not scan at all — is included, because
+ * `useMinimizeOnScroll` is the single entry point through which every screen
+ * drives the bar.
+ *
+ * Jest cannot catch this class at all: the reanimated mock resolves mappers
+ * synchronously, so a frozen mapper and a working one render identically. Source
+ * analysis is the only automatable check; the real behaviour is verified in a
+ * foregrounded browser tab.
+ */
+
+const SRC = join(__dirname, '..');
+const ROOTS = ['tab-bar', 'progressive-blur'] as const;
+const MAPPERS = [
+  'useAnimatedStyle',
+  'useAnimatedScrollHandler',
+  'useDerivedValue',
+  'useAnimatedProps',
+] as const;
+
+/**
+ * Floors for the self-check, not exact counts — a new mapper or module must not
+ * fail this suite, but a walk that silently stops finding things must.
+ */
+const MIN_FILES = 16;
+const MIN_MAPPERS = 7;
+
+type Offender = { location: string; mapper: string; problem: string };
+
+/** Comments legitimately discuss mappers and show them in examples. */
+function stripComments(source: string): string {
+  return source
+    .replace(/\/\*[\s\S]*?\*\//g, (block) => '\n'.repeat((block.match(/\n/g) ?? []).length))
+    .replace(/^[ \t]*\/\/.*$/gm, '');
+}
+
+function sourceFiles(dir: string): string[] {
+  return readdirSync(dir).flatMap((entry) => {
+    const full = join(dir, entry);
+    if (statSync(full).isDirectory()) {
+      return entry === '__tests__' ? [] : sourceFiles(full);
+    }
+    return /\.tsx?$/.test(entry) ? [full] : [];
+  });
+}
+
+/** Text between the parens of the call starting at `start`, paren-balanced. */
+function callText(source: string, start: number): string {
+  const open = source.indexOf('(', start);
+  let depth = 0;
+  for (let i = open; i < source.length; i++) {
+    if (source[i] === '(') depth += 1;
+    else if (source[i] === ')') {
+      depth -= 1;
+      if (depth === 0) return source.slice(open + 1, i);
+    }
+  }
+  return source.slice(open + 1);
+}
+
+function analyse(): { offenders: Offender[]; files: number; calls: number } {
+  const offenders: Offender[] = [];
+  const scanned = ROOTS.flatMap((root) => sourceFiles(join(SRC, root)));
+  let calls = 0;
+
+  for (const file of scanned) {
+    const source = stripComments(readFileSync(file, 'utf8'));
+
+    for (const mapper of MAPPERS) {
+      // `\b` before the name so `useAnimatedStyleX` can never match.
+      for (const call of source.matchAll(new RegExp(`\\b${mapper}\\s*\\(`, 'g'))) {
+        if (call.index === undefined) continue;
+        calls += 1;
+
+        const text = callText(source, call.index);
+        const line = source.slice(0, call.index).split('\n').length;
+        const location = `${relative(SRC, file)}:${line}`;
+
+        // Trailing comma after the deps array is idiomatic and must parse.
+        const deps = [...text.matchAll(/,\s*(\[[\s\S]*?\])\s*,?\s*$/g)].pop();
+        if (!deps) {
+          offenders.push({ location, mapper, problem: 'no deps array' });
+          continue;
+        }
+        if ((deps[1] ?? '').replace(/\s/g, '') === '[]') {
+          offenders.push({ location, mapper, problem: 'empty deps array' });
+        }
+      }
+    }
+  }
+
+  return { offenders, files: scanned.length, calls };
+}
+
+const { offenders, files, calls } = analyse();
+
+describe('tab-bar reanimated mapper dependency arrays', () => {
+  it('walked a plausible number of source files (guards against a broken walk)', () => {
+    expect(files).toBeGreaterThanOrEqual(MIN_FILES);
+  });
+
+  it('found a plausible number of mapper call sites (guards against a vacuous pass)', () => {
+    // Without this, a broken regex would make the real assertion below pass by
+    // finding nothing at all.
+    expect(calls).toBeGreaterThanOrEqual(MIN_MAPPERS);
+  });
+
+  it('has no mapper with a missing or empty deps array', () => {
+    expect(offenders.map((o) => `${o.location} ${o.mapper} — ${o.problem}`)).toEqual([]);
+  });
+});