@oxyhq/bloom 0.52.0 → 0.53.0

package/src/__tests__/TabBarAnimatedShorthand.test.ts

@@ -0,0 +1,135 @@
+import { readdirSync, readFileSync, statSync } from 'node:fs';
+import { join, relative } from 'node:path';
+
+/**
+ * No reanimated mapper may return a React Native style SHORTHAND that
+ * react-native-web does not expand.
+ *
+ * Reanimated's web path hands a mapper's result to RNW's `createReactDOMStyle`
+ * and then assigns each surviving key straight onto the DOM node's `style`. That
+ * function expands a fixed set of shorthands (`marginInline`, `paddingInline`,
+ * `borderWidth`, `borderRadius`, `insetInline`, …) but NOT React Native's own
+ * `marginHorizontal` / `marginVertical` / `paddingHorizontal` / `paddingVertical`
+ * — verified absent from the entire file in RNW 0.21.2. An unexpanded shorthand
+ * becomes `element.style.marginHorizontal = '34px'`, which is not a CSS property,
+ * so the browser drops it WITHOUT any error.
+ *
+ * This shipped once: `barStyle` animated `marginHorizontal` (copied verbatim from
+ * upstream expo-glass-tabs, which only ever ran on native). On web the bar kept
+ * its full width while `highlightStyle` still subtracted `MINIMIZED_INSET` from
+ * `barWidth`, so the sliding highlight sat ~13.6px narrower than the tab beneath
+ * it at five tabs — visible only once the bar minimized.
+ *
+ * STATIC styles are fine and are deliberately not scanned: `StyleSheet.create`
+ * takes RNW's own StyleSheet path, which does handle the shorthand. The trap is
+ * specific to values produced inside a mapper.
+ *
+ * Neither tsc nor jest can see this: the shorthand is a valid RN style key, so it
+ * type-checks, and the reanimated mock never touches the DOM. Source analysis is
+ * the only automatable guard.
+ */
+
+const SRC = join(__dirname, '..');
+const ROOTS = ['tab-bar', 'progressive-blur'] as const;
+const MAPPERS = ['useAnimatedStyle', 'useDerivedValue', 'useAnimatedProps'] as const;
+
+/** RN shorthands with no entry in RNW's `STYLE_SHORT_FORM_EXPANSIONS`. */
+const UNEXPANDED_SHORTHANDS = [
+  'marginHorizontal',
+  'marginVertical',
+  'paddingHorizontal',
+  'paddingVertical',
+] as const;
+
+function sourceFiles(root: string): string[] {
+  const out: string[] = [];
+  const walk = (dir: string) => {
+    for (const entry of readdirSync(dir)) {
+      const full = join(dir, entry);
+      if (statSync(full).isDirectory()) {
+        walk(full);
+        continue;
+      }
+      if (!/\.tsx?$/.test(entry)) continue;
+      if (/\.(test|spec|stories)\.tsx?$/.test(entry)) continue;
+      out.push(full);
+    }
+  };
+  walk(join(SRC, root));
+  return out;
+}
+
+/**
+ * The body of every mapper call in `source`, matched by brace depth from the
+ * mapper's opening paren so nested objects and callbacks are included whole.
+ */
+function mapperBodies(source: string): string[] {
+  const bodies: string[] = [];
+  for (const mapper of MAPPERS) {
+    let from = 0;
+    for (;;) {
+      const start = source.indexOf(`${mapper}(`, from);
+      if (start === -1) break;
+      let depth = 0;
+      let index = source.indexOf('(', start);
+      const open = index;
+      for (; index < source.length; index += 1) {
+        const char = source[index];
+        if (char === '(') depth += 1;
+        else if (char === ')') {
+          depth -= 1;
+          if (depth === 0) break;
+        }
+      }
+      bodies.push(source.slice(open, index));
+      from = index === -1 ? start + mapper.length : index;
+    }
+  }
+  return bodies;
+}
+
+describe('tab-bar animated styles', () => {
+  const files = ROOTS.flatMap(sourceFiles);
+
+  // Self-check: a broken walk must not pass vacuously.
+  it('walks the real sources', () => {
+    expect(files.length).toBeGreaterThanOrEqual(10);
+    const withMappers = files.filter((file) => mapperBodies(readFileSync(file, 'utf8')).length > 0);
+    expect(withMappers.length).toBeGreaterThanOrEqual(2);
+  });
+
+  it('extracts a mapper body that really contains its returned keys', () => {
+    const base = files.find((file) => file.endsWith('TabBarBase.tsx'));
+    expect(base).toBeDefined();
+    const bodies = mapperBodies(readFileSync(base as string, 'utf8'));
+    expect(bodies.length).toBeGreaterThanOrEqual(6);
+    // `highlightStyle` is the mapper that computes the capsule geometry.
+    expect(bodies.some((body) => body.includes('borderRadius'))).toBe(true);
+  });
+
+  it.each(UNEXPANDED_SHORTHANDS)('never returns %s from a mapper', (shorthand) => {
+    const offenders: string[] = [];
+    for (const file of files) {
+      for (const body of mapperBodies(readFileSync(file, 'utf8'))) {
+        // Strip comments so the explanatory notes naming the shorthand do not
+        // trip the guard that exists because of them.
+        const code = body.replace(/\/\*[\s\S]*?\*\//g, '').replace(/\/\/[^\n]*/g, '');
+        if (new RegExp(`\\b${shorthand}\\s*:`).test(code)) {
+          offenders.push(relative(SRC, file));
+        }
+      }
+    }
+    expect(offenders).toEqual([]);
+  });
+
+  it('animates the minimized inset as both long-form margins', () => {
+    const base = readFileSync(
+      files.find((file) => file.endsWith('TabBarBase.tsx')) as string,
+      'utf8',
+    );
+    const barStyle = mapperBodies(base).find((body) => body.includes('MINIMIZED_INSET'));
+    expect(barStyle).toBeDefined();
+    expect(barStyle).toMatch(/marginLeft:/);
+    expect(barStyle).toMatch(/marginRight:/);
+  });
+});

package/src/__tests__/TabBarFootprint.test.tsx

@@ -0,0 +1,172 @@
+import React from 'react';
+import type { ReactTestInstance } from 'react-test-renderer';
+import { render } from '@testing-library/react-native';
+
+import { BloomThemeProvider } from '../theme/BloomThemeProvider';
+import { TabBar, TabBarButton, useTabBarFootprint } from '../tab-bar';
+import type { TabBarItem } from '../tab-bar/types';
+
+/**
+ * `useTabBarFootprint()` — the space the floating bar physically occupies above
+ * the bottom of the window, and nothing more.
+ *
+ * The bar is absolutely positioned, so nothing accounts for it automatically,
+ * and the geometry it is built from (expanded height, bottom gap) is private.
+ * Without the hook a consumer hardcodes both — which drifts silently the first
+ * time the bar changes by a pixel — and, worse, tends to add `insets.bottom` on
+ * top, because that is what laying anything out against the bottom edge
+ * normally requires. The bar already folds the inset into its own gap, so that
+ * double-counts the home indicator.
+ *
+ * It is the RAW footprint: no clearance is folded in, because clearance differs
+ * per call site (a list wants a gap above the pill, a FAB anchored by `bottom`
+ * supplies its own) and only the consumer knows which. That is asserted here
+ * rather than merely documented — a margin quietly added to the hook would move
+ * every consumer's FAB.
+ *
+ * The suite asserts four separate things: the absolute pixel values (so a change
+ * to the constants must be deliberate), that the number is the bar and only the
+ * bar, the inset relationship (so the double-count can never creep back in), and
+ * equality with the bar's own rendered geometry (so it cannot drift from where
+ * the bar actually sits).
+ */
+
+// Mutated per test; must be `mock`-prefixed for the hoisted factory.
+const mockInsets = { top: 0, right: 0, bottom: 0, left: 0 };
+
+jest.mock('react-native-safe-area-context', () => ({
+  ...jest.requireActual('react-native-safe-area-context'),
+  useSafeAreaInsets: () => mockInsets,
+}));
+
+const ITEMS: TabBarItem[] = [
+  { name: 'home', label: 'Home', icon: null },
+  { name: 'search', label: 'Search', icon: null },
+];
+
+/** A device with a home indicator (iPhone-class bottom inset). */
+const HOME_INDICATOR_INSET = 34;
+
+function FootprintProbe({ onValue }: { onValue: (space: number) => void }) {
+  onValue(useTabBarFootprint());
+  return null;
+}
+
+function withTheme(ui: React.ReactElement) {
+  return (
+    <BloomThemeProvider mode="light" colorPreset="teal">
+      {ui}
+    </BloomThemeProvider>
+  );
+}
+
+/** The footprint the hook reports on a device whose bottom inset is `inset`. */
+function footprintFor(inset: number): number {
+  mockInsets.bottom = inset;
+  let space: number | undefined;
+  render(withTheme(<FootprintProbe onValue={(value) => (space = value)} />));
+  if (space === undefined) throw new Error('FootprintProbe never ran');
+  return space;
+}
+
+function flattenStyle(style: unknown): Record<string, unknown> {
+  const out: Record<string, unknown> = {};
+  const visit = (value: unknown): void => {
+    if (Array.isArray(value)) value.forEach(visit);
+    else if (value && typeof value === 'object') Object.assign(out, value);
+  };
+  visit(style);
+  return out;
+}
+
+/**
+ * The flattened style of every styled node in the tree.
+ *
+ * Restricted to HOST nodes: the RN mock renders each component as a composite
+ * wrapping a host element of the same name, and both carry the same `style`, so
+ * counting all of them would double every match.
+ */
+function styledNodes(root: ReactTestInstance): Record<string, unknown>[] {
+  return root
+    .findAll((node) => typeof node.type === 'string' && node.props?.style !== undefined)
+    .map((node) => flattenStyle(node.props.style));
+}
+
+describe('useTabBarFootprint', () => {
+  beforeEach(() => {
+    mockInsets.bottom = 0;
+  });
+
+  it('measures the bar plus its gap where there is no bottom inset', () => {
+    // 58pt bar + the 12pt floor the gap never goes below.
+    expect(footprintFor(0)).toBe(70);
+  });
+
+  it('measures more on a device with a home indicator', () => {
+    expect(footprintFor(HOME_INDICATOR_INSET)).toBe(76);
+  });
+
+  it('adds no clearance of its own — the number is the bar and only the bar', () => {
+    // Clearance belongs to the call site: a list wants a gap above the pill, a
+    // FAB anchored by `bottom` supplies its own. A margin folded in here would
+    // lift every consumer's FAB off its intended position, and would make
+    // "footprint" mean two different things in one file.
+    expect(footprintFor(0)).toBe(58 + 12);
+    expect(footprintFor(HOME_INDICATOR_INSET)).toBe(58 + (HOME_INDICATOR_INSET - 16));
+  });
+
+  it('already includes the inset — adding insets.bottom would double-count it', () => {
+    // The bar absorbs 16pt of the inset into its own gap, so the footprint grows
+    // by the REMAINDER, never by the whole inset. A consumer writing
+    // `footprint + insets.bottom` would account 110pt for a 76pt bar.
+    const grown = footprintFor(HOME_INDICATOR_INSET) - footprintFor(0);
+    expect(grown).toBe(6);
+    expect(grown).toBeLessThan(HOME_INDICATOR_INSET);
+  });
+
+  it('does not shrink below the floor for a small inset', () => {
+    // An inset under what the gap absorbs must not pull the bar down toward the
+    // window edge — the gap is clamped, and the footprint with it.
+    expect(footprintFor(8)).toBe(footprintFor(0));
+  });
+
+  it('equals the space the rendered bar actually occupies', () => {
+    // The invariant that makes the hook worth exporting: its number is the bar's
+    // own geometry (the gap it holds off the window edge plus its expanded
+    // height), not a second copy that can drift.
+    mockInsets.bottom = HOME_INDICATOR_INSET;
+    let footprint: number | undefined;
+    const { UNSAFE_root } = render(
+      withTheme(
+        <>
+          <FootprintProbe onValue={(value) => (footprint = value)} />
+          <TabBar activeIndex={0}>
+            {ITEMS.map((item, index) => (
+              <TabBarButton key={item.name} item={item} index={index} />
+            ))}
+          </TabBar>
+        </>,
+      ),
+    );
+
+    const styles = styledNodes(UNSAFE_root);
+    // The wrapper holding the pill off the bottom edge — the only node with a
+    // bottom margin.
+    const gaps = styles.filter((style) => typeof style.marginBottom === 'number');
+    expect(gaps).toHaveLength(1);
+    // The pill itself: the animated capsule sizes BOTH its height and its
+    // horizontal inset, which nothing else in the bar does. The inset is written
+    // as the two long-form margins — `marginHorizontal` would be dropped
+    // silently on web, since RNW's `createReactDOMStyle` does not expand it (see
+    // `TabBarAnimatedShorthand.test.ts`).
+    const pills = styles.filter(
+      (style) =>
+        typeof style.height === 'number' &&
+        typeof style.marginLeft === 'number' &&
+        typeof style.marginRight === 'number',
+    );
+    expect(pills).toHaveLength(1);
+
+    expect(footprint).toBe(Number(gaps[0]?.marginBottom) + Number(pills[0]?.height));
+  });
+});

package/src/__tests__/TabBarWebFork.test.ts

@@ -49,7 +49,7 @@ const NEUTRAL_AND_WEB_FILES = [
   'tab-bar/shared.ts',
   'tab-bar/TabBarBase.tsx',
   'tab-bar/minimize-context.tsx',
-  'tab-bar/use-reserved-space.ts',
+  'tab-bar/use-footprint.ts',
   'tab-bar/surface.tsx',
   'tab-bar/surface-solid.tsx',
   'tab-bar/surface.web.tsx',

package/src/__tests__/ToastHostWebFork.test.ts

@@ -71,10 +71,14 @@ describe('ToastHost platform split', () => {
     expect(styleModule).toMatch(
       /export const WEB_POSITION_FIXED = 'fixed' as ViewStyle\['position'\]/,
     );
-    // Exactly one cast in the module, and nothing else exported alongside it.
+    // Exactly one cast in the module, and it is the only RUNTIME export.
     // (Counted against code — the doc comment discusses casts in prose.)
+    // The module's other export is the `WebCssStyle` interface, which covers the
+    // other half of the same RN/RNW gap and emits nothing — see
+    // `web-css-style.test.ts`.
     expect(code('styles/web-view-style.ts').match(/ as /g)).toHaveLength(1);
-    expect(styleModule.match(/^export /gm)).toHaveLength(1);
+    expect(styleModule.match(/^export const /gm)).toHaveLength(1);
+    expect(styleModule.match(/^export (?!const |interface )/gm)).toBeNull();
   });
 
   it('no engine file other than the host reaches for a platform overlay', () => {

package/src/__tests__/Toaster.test.tsx

@@ -2,8 +2,12 @@ import React from 'react';
 import { AppState, Text } from 'react-native';
 import { act, fireEvent, render } from '@testing-library/react-native';
 
+import { space } from '../styles/tokens';
 import { BloomThemeProvider } from '../theme/BloomThemeProvider';
-import { ENTERING_ANIMATION_DURATION } from '../toast/constants';
+import {
+  ENTERING_ANIMATION_DURATION,
+  TOAST_MAX_ROW_WIDTH,
+} from '../toast/constants';
 import { toast, ToastOutlet } from '../toast';
 import { toastStore } from '../toast/toast-store';
 import type { ToasterProps, ToastPosition } from '../toast/types';
@@ -137,6 +141,16 @@ const anchorOf = ({ UNSAFE_root }: ReturnType<typeof renderOutlet>) =>
     return style.position === 'absolute' && style.width === '100%';
   })[0];
 
+/**
+ * The capped, centred row box — `ToastSwipeHandler`'s wrapper, the only row view
+ * carrying the `aria-live` announcement.
+ */
+const rowBoxOf = ({ UNSAFE_root }: ReturnType<typeof renderOutlet>) =>
+  UNSAFE_root.find(
+    (node) =>
+      hostName(node) === 'Animated.View' && node.props['aria-live'] !== undefined,
+  );
+
 describe('ToastOutlet', () => {
   beforeEach(() => {
     jest.useFakeTimers();
@@ -382,6 +396,53 @@ describe('ToastOutlet', () => {
     expect(toastStore.getSnapshot().toastHeights[id]).toBeUndefined();
   });
 
+  /**
+   * W12 — the row box is capped so a toast does not span a desktop viewport.
+   * The cap sits on the swipe wrapper rather than on `ToastContent`'s card so it
+   * also covers `toast.custom` JSX and `unstyled` rows, which never render that
+   * card.
+   */
+  describe('row width cap', () => {
+    it('caps and centres the row box', () => {
+      const rendered = renderOutlet();
+      show(() => toast('Not a banner'));
+
+      expect(flattenStyle(rowBoxOf(rendered).props.style)).toEqual(
+        expect.objectContaining({
+          width: '100%',
+          maxWidth: TOAST_MAX_ROW_WIDTH,
+          // Without this the capped row sits against the left edge: a child with
+          // a definite cross size is not stretched by the anchor.
+          alignSelf: 'center',
+        }),
+      );
+    });
+
+    it('caps a custom-jsx row too, not just the default card', () => {
+      const rendered = renderOutlet();
+      show(() => toast.custom(<Text>Fully custom</Text>));
+
+      expect(flattenStyle(rowBoxOf(rendered).props.style).maxWidth).toBe(
+        TOAST_MAX_ROW_WIDTH,
+      );
+    });
+
+    it('leaves the card its gutters inside the cap', () => {
+      // The cap sizes the ROW, which carries the card's two `space.lg` gutters,
+      // so the visible card lands on sonner's 356px reference width.
+      expect(TOAST_MAX_ROW_WIDTH - space.lg * 2).toBe(356);
+    });
+
+    it('lets a consumer widen the cap through toastContainerStyle', () => {
+      const rendered = renderOutlet({
+        toastOptions: { toastContainerStyle: { maxWidth: 600 } },
+      });
+      show(() => toast('Wider please'));
+
+      expect(flattenStyle(rowBoxOf(rendered).props.style).maxWidth).toBe(600);
+    });
+  });
+
   /**
    * The outlet's `toastOptions` style slots and a per-toast `styles` object are
    * folded into ONE styles object (`mergeToastStyles`). Upstream threads all

package/src/__tests__/toast-position-utils.test.ts

@@ -1,6 +1,7 @@
 import {
   ESTIMATED_TOAST_HEIGHT,
   MIN_STACK_SCALE_X,
+  TOAST_MAX_ROW_WIDTH,
 } from '../toast/constants';
 import {
   calculateStackScaleX,
@@ -206,7 +207,7 @@ describe('calculateStackScaleX', () => {
     position = 'bottom-center' as ToastPosition,
     isExpanded = false,
     stackGap = 8,
-    screenWidth = 400,
+    rowWidth = 400,
   }: {
     index: number;
     numberOfToasts?: number;
@@ -214,7 +215,7 @@ describe('calculateStackScaleX', () => {
     position?: ToastPosition;
     isExpanded?: boolean;
     stackGap?: number;
-    screenWidth?: number;
+    rowWidth?: number;
   }) =>
     calculateStackScaleX({
       index,
@@ -223,14 +224,14 @@ describe('calculateStackScaleX', () => {
       position,
       isExpanded,
       stackGap,
-      screenWidth,
+      rowWidth,
     });
 
   it.each([
     ['stacking is off', { index: 0, enableStacking: false }],
     ['there is only one row', { index: 0, numberOfToasts: 1 }],
     ['the stack is expanded', { index: 0, isExpanded: true }],
-    ['the window has not been measured', { index: 0, screenWidth: 0 }],
+    ['the row has not been measured', { index: 0, rowWidth: 0 }],
   ])('does not squeeze when %s', (_label, params) => {
     expect(scaleAt(params)).toBe(1);
   });
@@ -249,11 +250,26 @@ describe('calculateStackScaleX', () => {
 
   it('never squeezes past MIN_STACK_SCALE_X', () => {
     expect(
-      scaleAt({ index: 0, numberOfToasts: 50, stackGap: 40, screenWidth: 200 }),
+      scaleAt({ index: 0, numberOfToasts: 50, stackGap: 40, rowWidth: 200 }),
     ).toBe(MIN_STACK_SCALE_X);
   });
 
-  it('scales the squeeze with the window width', () => {
-    expect(scaleAt({ index: 1, screenWidth: 800 })).toBe(1 - 16 / 800);
+  it('scales the squeeze with the row width', () => {
+    expect(scaleAt({ index: 1, rowWidth: 800 })).toBe(1 - 16 / 800);
+  });
+
+  /**
+   * The squeeze is measured against the ROW, which is capped, not the window.
+   * Feeding it a desktop window width instead is the bug this pins: the buried
+   * row would narrow by 4 visible pixels rather than the intended 16.
+   */
+  it('squeezes a capped row by the same visible amount on a desktop viewport', () => {
+    const desktopWindowWidth = 1280;
+    expect(scaleAt({ index: 1, rowWidth: TOAST_MAX_ROW_WIDTH })).toBe(
+      1 - 16 / TOAST_MAX_ROW_WIDTH,
+    );
+    expect(scaleAt({ index: 1, rowWidth: TOAST_MAX_ROW_WIDTH })).toBeLessThan(
+      scaleAt({ index: 1, rowWidth: desktopWindowWidth }),
+    );
   });
 });

package/src/__tests__/web-css-style.test.ts

@@ -0,0 +1,139 @@
+import { readdirSync, readFileSync, statSync } from 'node:fs';
+import { join } from 'node:path';
+
+/**
+ * Sibling of `web-position-fixed.test.ts`, guarding the OTHER half of the RN/RNW
+ * type gap.
+ *
+ * Eleven sites across seven files carried an inline `{ … } as ViewStyle` to smuggle
+ * web-only CSS (`animation`, `transition*`, `backdrop-filter`, `mask-image`,
+ * `scrollbar-*`, `user-select`) past React Native's `ViewStyle`. That is not a
+ * widening, it is SILENCING: `as` only requires the two types to be COMPARABLE, so
+ * `{ animatoin: '…' } as ViewStyle` compiles and the typo ships as a style key
+ * react-native-web drops on the floor.
+ *
+ * They now annotate with `WebCssStyle`, which restores excess-property checking
+ * AND erases completely — unlike a widening helper function, an annotation emits
+ * nothing, so the compiled output is the same as the cast's. Two of the eleven
+ * needed no widening at all once checked against RN 0.83, which models
+ * `boxShadow` and `cursor` on `ViewStyle` directly.
+ *
+ * This guard stops an inline cast coming back. It pins the FULL remaining set —
+ * per file and per count — rather than an allowlist of filenames, so a new cast
+ * inside an already-listed file fails too.
+ */
+
+const SRC = join(__dirname, '..');
+
+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] : [];
+  });
+}
+
+/** Source with comments stripped — they legitimately discuss the retired spelling. */
+const codeOf = (file: string) =>
+  readFileSync(file, 'utf8')
+    .replace(/\/\*[\s\S]*?\*\//g, '')
+    .replace(/^\s*\/\/.*$/gm, '');
+
+const files = sourceFiles(SRC);
+
+/**
+ * The only `as ViewStyle` occurrences left in `src/`, and why each one is NOT a
+ * web-CSS cast. Anything else is a regression.
+ */
+const ALLOWED: Record<string, { count: number; reason: string }> = {
+  'styles/web-view-style.ts': {
+    count: 1,
+    reason:
+      "`WEB_POSITION_FIXED` — a VALUE-level cast on a key RN does model, just with a narrower union. It is the one documented crossing point and cannot be an annotation, because `position: 'fixed'` has to be writable inside an ordinary style object.",
+  },
+  'skeleton/index.tsx': {
+    count: 1,
+    reason:
+      '`(flattened as ViewStyle)?.width` narrows a `StyleSheet.flatten` result, which is legitimately `ViewStyle | TextStyle | ImageStyle`. Not a web-CSS cast.',
+  },
+};
+
+describe('web-only CSS styles', () => {
+  it('finds source files to scan (guards against a broken walk)', () => {
+    expect(files.length).toBeGreaterThan(100);
+  });
+
+  it('has no inline `as ViewStyle` outside the two documented exceptions', () => {
+    const found: Record<string, number> = {};
+    for (const file of files) {
+      const hits = codeOf(file).match(/\bas ViewStyle\b/g);
+      if (hits) {
+        found[file.replace(`${SRC}/`, '')] = hits.length;
+      }
+    }
+    const expected = Object.fromEntries(
+      Object.entries(ALLOWED).map(([file, { count }]) => [file, count]),
+    );
+    expect(found).toEqual(expected);
+  });
+
+  /**
+   * The properties `WebCssStyle` exists for. If one of these shows up in source
+   * next to a cast again, the test above catches it; this one catches the subtler
+   * regression of re-declaring the same widening locally instead of importing it.
+   */
+  it('declares every web-only property in one place', () => {
+    const module = codeOf(join(SRC, 'styles/web-view-style.ts'));
+    for (const property of [
+      'animation',
+      'animationDelay',
+      'transitionProperty',
+      'transitionDuration',
+      'transitionTimingFunction',
+      'backdropFilter',
+      'WebkitBackdropFilter',
+      'maskImage',
+      'WebkitMaskImage',
+      'backgroundImage',
+      'scrollbarWidth',
+      'scrollbarColor',
+      'userSelect',
+    ]) {
+      expect(module).toContain(`${property}?:`);
+    }
+  });
+
+  it('is a type-only import everywhere it is used, so nothing is emitted', () => {
+    const importers = files.filter(
+      (file) =>
+        file !== join(SRC, 'styles/web-view-style.ts') &&
+        codeOf(file).includes('WebCssStyle'),
+    );
+    // The seven forks the sweep converted.
+    expect(importers.length).toBeGreaterThanOrEqual(7);
+    for (const file of importers) {
+      const source = codeOf(file);
+      // Either `import type { WebCssStyle }` or an inline `type` specifier.
+      expect({
+        file: file.replace(`${SRC}/`, ''),
+        typeOnly:
+          /import type \{[^}]*\bWebCssStyle\b/.test(source) ||
+          /\btype WebCssStyle\b/.test(source),
+      }).toEqual({ file: file.replace(`${SRC}/`, ''), typeOnly: true });
+    }
+  });
+
+  /**
+   * RN 0.83 models these on `ViewStyle` itself, so widening them would be cargo
+   * cult. Pinned because getting it wrong is invisible: the cast compiles either
+   * way and only the reader is misled.
+   */
+  it('does not widen properties React Native already models', () => {
+    const module = codeOf(join(SRC, 'styles/web-view-style.ts'));
+    for (const property of ['cursor', 'boxShadow', 'filter', 'pointerEvents']) {
+      expect(module).not.toContain(`${property}?:`);
+    }
+  });
+});

package/src/bottom-sheet/BottomSheetBase.tsx

@@ -11,6 +11,7 @@ import {
     type StyleProp,
 } from 'react-native';
 import { Gesture, GestureDetector, type GestureType } from 'react-native-gesture-handler';
+import type { WebCssStyle } from '../styles/web-view-style';
 import { Z_INDEX } from '../styles/z-index';
 import Animated, {
     type AnimatedStyle,
@@ -737,19 +738,22 @@ export const BottomSheetBase = forwardRef((props: BottomSheetBaseProps, ref: Rea
         </GestureDetector>
     ) : handleNode;
 
+    // `scrollbar-width` / `scrollbar-color` are web-only CSS RN does not model.
+    const webScrollbarStyle: WebCssStyle | undefined =
+        Platform.OS === 'web'
+            ? {
+                  scrollbarWidth: 'thin',
+                  scrollbarColor: `${colors.border} transparent`,
+              }
+            : undefined;
+
     // Inner content: scrollable wraps in Animated.ScrollView, non-scrollable
     // renders children directly. In legacy mode the scrollview is also
     // wrapped in the `nativeGesture` detector for scroll/pan coordination.
     const scrollViewNode = (
         <Animated.ScrollView
             ref={scrollViewRef}
-            style={[
-                styles.scrollView,
-                Platform.OS === 'web' && ({
-                    scrollbarWidth: 'thin',
-                    scrollbarColor: `${colors.border} transparent`,
-                } as ViewStyle),
-            ]}
+            style={[styles.scrollView, webScrollbarStyle]}
             contentContainerStyle={dynamicStyles.scrollContent}
             showsVerticalScrollIndicator={false}
             keyboardShouldPersistTaps="handled"