@oxyhq/bloom 0.51.1 → 0.52.1

package/src/__tests__/TabBarLongPress.test.tsx

@@ -0,0 +1,258 @@
+import React from 'react';
+import { act, render } from '@testing-library/react-native';
+
+import { BloomThemeProvider } from '../theme/BloomThemeProvider';
+import { TabBar, TabBarButton } from '../tab-bar';
+import type { TabBarItem } from '../tab-bar/types';
+
+/**
+ * `onIndexLongPress` — the bar's only reachable long press.
+ *
+ * `TabBarButtonProps extends PressableProps`, so a consumer's `onLongPress`
+ * type-checks and silently does nothing: the bar's `GestureDetector` consumes
+ * the touches (that is what makes scrubbing possible), so the inner `Pressable`
+ * only ever fires for assistive technology and keyboard activation. A real held
+ * finger fails the tap gesture at 400ms, never activates the pan, and dies in
+ * `onFinalize`'s early return. The gesture below is the only path in.
+ *
+ * Like `BottomSheetGesture.test.tsx`, this file replaces the shared
+ * gesture-handler mock (which discards every registered callback) with a
+ * RECORDING one, so the gestures the bar builds can be inspected and their
+ * worklets invoked directly. What that CAN prove: which gestures are composed
+ * into the race, the duration windows they are configured with, and that the
+ * long-press worklet resolves the same index from the same x as the tap
+ * worklet. What it cannot prove is gesture-handler's own arbitration — that a
+ * held finger really reaches this handler on a device. The 400ms/500ms split
+ * asserted below is what makes that arbitration decidable rather than a race,
+ * and the behaviour itself is verified on a real build.
+ */
+
+interface MockGestureEvent {
+  x: number;
+}
+
+interface MockGesture {
+  kind: string;
+  /** Values captured from the builder chain. */
+  minDurationMs?: number;
+  maxDurationMs?: number;
+  /** Worklets captured from the builder chain. */
+  start?: (event: MockGestureEvent) => void;
+  update?: (event: MockGestureEvent) => void;
+  end?: (event: MockGestureEvent, success: boolean) => void;
+  /** Members of a composed `Gesture.Race(…)`; empty for a leaf gesture. */
+  members: MockGesture[];
+  /** Builder chain — every method returns the same object. */
+  activeOffsetX: (range: number[]) => MockGesture;
+  failOffsetY: (range: number[]) => MockGesture;
+  maxDistance: (px: number) => MockGesture;
+  maxDuration: (ms: number) => MockGesture;
+  minDuration: (ms: number) => MockGesture;
+  onStart: (worklet: (event: MockGestureEvent) => void) => MockGesture;
+  onUpdate: (worklet: (event: MockGestureEvent) => void) => MockGesture;
+  onEnd: (worklet: (event: MockGestureEvent, success: boolean) => void) => MockGesture;
+  onFinalize: (worklet: () => void) => MockGesture;
+}
+
+// Every gesture built since the last reset. Must be `mock`-prefixed so the
+// hoisted `jest.mock` factory may reference it.
+const mockGestures: MockGesture[] = [];
+
+jest.mock('react-native-gesture-handler', () => {
+  const build = (kind: string): MockGesture => {
+    const gesture: MockGesture = {
+      kind,
+      members: [],
+      activeOffsetX: () => gesture,
+      failOffsetY: () => gesture,
+      maxDistance: () => gesture,
+      maxDuration: (ms) => {
+        gesture.maxDurationMs = ms;
+        return gesture;
+      },
+      minDuration: (ms) => {
+        gesture.minDurationMs = ms;
+        return gesture;
+      },
+      onStart: (worklet) => {
+        gesture.start = worklet;
+        return gesture;
+      },
+      onUpdate: (worklet) => {
+        gesture.update = worklet;
+        return gesture;
+      },
+      onEnd: (worklet) => {
+        gesture.end = worklet;
+        return gesture;
+      },
+      onFinalize: () => gesture,
+    };
+    mockGestures.push(gesture);
+    return gesture;
+  };
+
+  return {
+    Gesture: {
+      Pan: () => build('Pan'),
+      Tap: () => build('Tap'),
+      LongPress: () => build('LongPress'),
+      Race: (...members: MockGesture[]) => {
+        const race = build('Race');
+        race.members.push(...members);
+        return race;
+      },
+    },
+    GestureDetector: ({ children }: { children: React.ReactNode }) => children,
+    GestureHandlerRootView: ({ children }: { children: React.ReactNode }) => children,
+  };
+});
+
+const ITEMS: TabBarItem[] = [
+  { name: 'home', label: 'Home', icon: null },
+  { name: 'search', label: 'Search', icon: null },
+  { name: 'you', label: 'You', icon: null },
+];
+
+/**
+ * Touch x positions inside the bar, in the 375pt window the react-native mock
+ * reports. Named by the tab they land on rather than by the geometry that puts
+ * them there: an edge touch belongs to the first/last tab and a centered one to
+ * the middle tab whatever the exact item width turns out to be.
+ */
+const NEAR_LEFT_EDGE = 8;
+const WINDOW_CENTER = 187;
+const NEAR_RIGHT_EDGE = 340;
+
+function renderBar(props: {
+  onIndexChange?: (index: number) => void;
+  onIndexLongPress?: (index: number) => void;
+}) {
+  return render(
+    <BloomThemeProvider mode="light" colorPreset="teal">
+      <TabBar activeIndex={0} {...props}>
+        {ITEMS.map((item, index) => (
+          <TabBarButton key={item.name} item={item} index={index} />
+        ))}
+      </TabBar>
+    </BloomThemeProvider>,
+  );
+}
+
+const gesturesOfKind = (kind: string) => mockGestures.filter((gesture) => gesture.kind === kind);
+
+/** The gesture the detector was actually given — the last race constructed. */
+function race(): MockGesture {
+  const races = gesturesOfKind('Race');
+  const last = races[races.length - 1];
+  if (!last) throw new Error('The bar composed no gesture race');
+  return last;
+}
+
+function member(kind: string): MockGesture {
+  const found = race().members.find((gesture) => gesture.kind === kind);
+  if (!found) throw new Error(`No ${kind} gesture in the bar's race`);
+  return found;
+}
+
+/** Hold a finger at `x` until the long press activates. */
+function longPressAt(x: number) {
+  act(() => {
+    member('LongPress').start?.({ x });
+  });
+}
+
+/** A tap that succeeded at `x`. */
+function tapAt(x: number) {
+  act(() => {
+    member('Tap').end?.({ x }, true);
+  });
+}
+
+describe('TabBar long press', () => {
+  beforeEach(() => {
+    mockGestures.length = 0;
+  });
+
+  it('composes no long-press gesture when no handler is given', () => {
+    // An always-armed long press would cancel the pan for anyone who rests a
+    // finger before scrubbing — a regression for every existing consumer.
+    renderBar({});
+    expect(gesturesOfKind('LongPress')).toHaveLength(0);
+    expect(race().members.map((gesture) => gesture.kind)).toEqual(['Pan', 'Tap']);
+  });
+
+  it('adds one to the race, alongside the pan and the tap, when a handler is given', () => {
+    renderBar({ onIndexLongPress: jest.fn() });
+    expect(race().members.map((gesture) => gesture.kind)).toEqual(['Pan', 'Tap', 'LongPress']);
+  });
+
+  it('arms it after the tap gesture has already given up', () => {
+    // The two windows must not overlap, or arming a long press would sometimes
+    // cost the bar a tap. The tap gives up at 400ms; the long press activates
+    // at 500ms, so at no instant are both candidates.
+    renderBar({ onIndexLongPress: jest.fn() });
+    expect(member('LongPress').minDurationMs).toBe(500);
+    expect(member('Tap').maxDurationMs).toBe(400);
+    expect(member('Tap').maxDurationMs ?? 0).toBeLessThan(member('LongPress').minDurationMs ?? 0);
+  });
+
+  it('reports the index of the tab under the finger', () => {
+    const onIndexLongPress = jest.fn();
+    renderBar({ onIndexLongPress });
+
+    longPressAt(NEAR_LEFT_EDGE);
+    longPressAt(WINDOW_CENTER);
+    longPressAt(NEAR_RIGHT_EDGE);
+
+    expect(onIndexLongPress.mock.calls).toEqual([[0], [1], [2]]);
+  });
+
+  it('resolves the same index a tap at the same point would', () => {
+    // Long press, tap and scrub all share one `indexAtX` worklet; this is what
+    // keeps a long press from ever acting on a different tab than the one the
+    // finger is visibly on.
+    const onIndexChange = jest.fn();
+    const onIndexLongPress = jest.fn();
+    renderBar({ onIndexChange, onIndexLongPress });
+
+    for (const x of [NEAR_LEFT_EDGE, 100, WINDOW_CENTER, 250, NEAR_RIGHT_EDGE]) {
+      tapAt(x);
+      longPressAt(x);
+    }
+
+    expect(onIndexLongPress.mock.calls).toEqual(onIndexChange.mock.calls);
+  });
+
+  it('does not select the tab it long-presses', () => {
+    // It is a secondary action (an account sheet, say) — navigating as well
+    // would take the user off the screen they opened it from.
+    const onIndexChange = jest.fn();
+    renderBar({ onIndexChange, onIndexLongPress: jest.fn() });
+
+    longPressAt(NEAR_RIGHT_EDGE);
+
+    expect(onIndexChange).not.toHaveBeenCalled();
+  });
+
+  it('still selects on a short tap while the long press is armed', () => {
+    const onIndexChange = jest.fn();
+    const onIndexLongPress = jest.fn();
+    renderBar({ onIndexChange, onIndexLongPress });
+
+    tapAt(NEAR_RIGHT_EDGE);
+
+    expect(onIndexChange).toHaveBeenCalledTimes(1);
+    expect(onIndexChange).toHaveBeenCalledWith(2);
+    expect(onIndexLongPress).not.toHaveBeenCalled();
+  });
+
+  it('keeps the scrub gesture in the race', () => {
+    // The pan is what makes the highlight scrubbable; a long press must not
+    // have displaced it.
+    renderBar({ onIndexLongPress: jest.fn() });
+    // Its scrub worklet, not merely a pan object: this is the handler that
+    // drags the highlight under the finger.
+    expect(typeof member('Pan').update).toBe('function');
+  });
+});

package/src/__tests__/TabBarWebFork.test.ts

@@ -49,6 +49,7 @@ const NEUTRAL_AND_WEB_FILES = [
   'tab-bar/shared.ts',
   'tab-bar/TabBarBase.tsx',
   'tab-bar/minimize-context.tsx',
+  '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"

package/src/connection-dots/ConnectionDots.web.tsx

@@ -1,6 +1,7 @@
 import React, { memo, useEffect, useState } from 'react';
 import { View, type ViewStyle } from 'react-native';
 
+import type { WebCssStyle } from '../styles/web-view-style';
 import { useTheme } from '../theme/use-theme';
 import { ConnectionDotsBase } from './ConnectionDotsBase';
 import type { ConnectionDotsProps } from './types';
@@ -88,14 +89,14 @@ const ConnectionDotsComponent: React.FC<ConnectionDotsProps> = ({
       borderRadius: dotSize / 2,
       backgroundColor: color,
     };
-    const animated: ViewStyle = reduce
+    const animated: WebCssStyle = reduce
       ? { opacity: 1 }
-      : ({
+      : {
           // `animation` / `animationDelay` are real CSS props on web;
           // react-native-web passes them through to the DOM node.
           animation: `${WAVE_ANIMATION_NAME} ${WAVE_DURATION_MS}ms linear infinite`,
           animationDelay: `${(i / count) * WAVE_DURATION_MS}ms`,
-        } as ViewStyle);
+        };
     return (
       <View
         key={i}

package/src/design-tokens/shadows.ts

@@ -36,7 +36,11 @@ export const SHADOW_BOX: Record<ShadowRole, string> = {
  * On WEB this returns a `{ boxShadow }` style object (so it can also be applied
  * inline without Tailwind). The `.native.ts` fork returns RN
  * `shadowColor/shadowOffset/shadowOpacity/shadowRadius/elevation`.
+ *
+ * No widening needed: `boxShadow` is a first-class `ViewStyle` key on RN >= 0.76
+ * and takes a CSS string, so this is not one of the web-only properties
+ * `styles/web-view-style.ts` exists for.
  */
 export function bloomShadowStyle(role: ShadowRole): ViewStyle {
-  return { boxShadow: SHADOW_BOX[role] } as ViewStyle;
+  return { boxShadow: SHADOW_BOX[role] };
 }

package/src/dialog/Dialog.tsx

@@ -515,7 +515,7 @@ function SideSheet({
         [side]: anchorInset,
         width: sideWidth,
         borderRadius: PANEL_RADIUS,
-      }) as ViewStyle,
+      }),
     [insetTop, insetBottom, side, anchorInset, sideWidth],
   );