@oxyhq/bloom 0.88.0 → 1.0.0

package/src/avatar-group/AvatarGroup.stories.tsx

@@ -1,218 +0,0 @@
-import React from 'react';
-import { Text, View } from 'react-native';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { AvatarGroup } from './AvatarGroup';
-import type { AvatarGroupItem } from './types';
-
-const ITEMS: AvatarGroupItem[] = [
-  { id: '1', displayName: 'Ada Lovelace', username: 'ada' },
-  { id: '2', displayName: 'Grace Hopper', username: 'grace' },
-  { id: '3', displayName: 'Alan Turing', username: 'alan' },
-  { id: '4', displayName: 'Linus Torvalds', username: 'linus' },
-  { id: '5', displayName: 'Margaret Hamilton', username: 'margaret' },
-  { id: '6', displayName: 'Katherine Johnson', username: 'katherine' },
-  { id: '7', displayName: 'Dennis Ritchie', username: 'dennis' },
-];
-
-const WITH_PHOTOS: AvatarGroupItem[] = [
-  {
-    id: '1',
-    displayName: 'Nate Isern',
-    username: 'nate',
-    uri: 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=200&h=200&fit=crop',
-  },
-  {
-    id: '2',
-    displayName: 'Jordan Lee',
-    username: 'jordan',
-    uri: 'https://images.unsplash.com/photo-1502685104226-ee32379fefbe?w=200&h=200&fit=crop',
-  },
-  {
-    id: '3',
-    displayName: 'Sam Rivera',
-    username: 'sam',
-    uri: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=200&h=200&fit=crop',
-  },
-  { id: '4', displayName: 'Priya Patel', username: 'priya' },
-  { id: '5', displayName: 'Chris Doe', username: 'chris' },
-];
-
-const meta: Meta<typeof AvatarGroup> = {
-  title: 'Components/AvatarGroup',
-  component: AvatarGroup,
-  argTypes: {
-    size: { control: { type: 'number', min: 16, max: 96, step: 4 } },
-    max: { control: { type: 'number', min: 1, max: 10, step: 1 } },
-    overlap: { control: { type: 'number', min: 0, max: 48, step: 1 } },
-    hoverCard: { control: 'boolean' },
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof AvatarGroup>;
-
-/** Header / starter-pack use-case: purely presentational, no interaction. */
-export const Presentational: Story = {
-  args: { items: ITEMS, size: 32, max: 5 },
-};
-
-export const WithPhotos: Story = {
-  args: { items: WITH_PHOTOS, size: 40, max: 5 },
-  name: 'With photos',
-};
-
-/** Overflow chip showing `+N` derived from `total`. */
-export const WithTotal: Story = {
-  args: { items: ITEMS, size: 36, max: 4, total: 128 },
-  name: 'With explicit total',
-};
-
-/** Each avatar is pressable — the consumer navigates to the profile. */
-export const Pressable: Story = {
-  render: (args) => (
-    <View style={{ gap: 12 }}>
-      <AvatarGroup
-        {...args}
-        items={ITEMS}
-        size={40}
-        max={5}
-        onPressItem={(item) => {
-          // eslint-disable-next-line no-alert
-          if (typeof window !== 'undefined') window.alert(`@${item.username}`);
-        }}
-      />
-      <Text>Tap an avatar to fire onPressItem.</Text>
-    </View>
-  ),
-};
-
-/** Web-only: hovering an avatar reveals the UserHoverCard. */
-export const HoverCard: Story = {
-  render: (args) => (
-    <View style={{ gap: 12, minHeight: 240 }}>
-      <AvatarGroup
-        {...args}
-        items={WITH_PHOTOS}
-        size={44}
-        max={5}
-        hoverCard
-        onPressItem={(item) => {
-          // eslint-disable-next-line no-alert
-          if (typeof window !== 'undefined') window.alert(`@${item.username}`);
-        }}
-        renderItemAction={(item) => (
-          <View
-            style={{
-              paddingHorizontal: 12,
-              paddingVertical: 6,
-              borderRadius: 999,
-              backgroundColor: '#1A73E8',
-            }}
-          >
-            <Text style={{ color: '#fff', fontWeight: '600', fontSize: 13 }}>
-              Follow
-            </Text>
-          </View>
-        )}
-      />
-      <Text>Hover an avatar (web) to see the card with an injected action.</Text>
-    </View>
-  ),
-  name: 'Hover card (web)',
-};
-
-export const Sizes: Story = {
-  render: () => (
-    <View style={{ gap: 16 }}>
-      <AvatarGroup items={ITEMS} size={24} max={5} />
-      <AvatarGroup items={ITEMS} size={32} max={5} />
-      <AvatarGroup items={ITEMS} size={48} max={5} />
-      <AvatarGroup items={ITEMS} size={64} max={5} />
-    </View>
-  ),
-};
-
-/**
- * Row layout: avatars placed adjacent with a positive gap and no separator
- * ring — the "top tokens" / adjacent-icons strip. Still collapses to `+N`.
- */
-export const RowLayout: Story = {
-  render: () => (
-    <View style={{ gap: 16 }}>
-      <AvatarGroup layout="row" items={WITH_PHOTOS} size={28} max={4} />
-      <AvatarGroup layout="row" items={WITH_PHOTOS} size={36} max={5} spacing={10} />
-    </View>
-  ),
-  name: 'Row layout',
-};
-
-// A larger pool of initials-only members to show the cluster densely packed.
-const MANY: AvatarGroupItem[] = Array.from({ length: 25 }, (_, i) => ({
-  id: `c${i}`,
-  displayName: String.fromCharCode(65 + (i % 26)),
-  username: `user${i}`,
-}));
-
-/**
- * Cluster layout: a compact iMessage-style "magnetic bubble cluster" of
- * NEAR-EQUAL-size avatars packed densely into a round box (`size` = box
- * diameter). A modestly larger primary sits in front; the rest are only slightly
- * smaller and nestle against it with a small uniform gap, filling the round box
- * edge-to-edge. `showInitials` renders a colored letter for avatar-less members
- * so the packing reads clearly. Shown at counts 3, 4, 5, 6, 8, 12, and 20.
- */
-export const ClusterLayout: Story = {
-  render: () => (
-    <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 24, alignItems: 'center' }}>
-      {[3, 4, 5, 6, 8, 12, 20].map((count) => (
-        <View key={count} style={{ alignItems: 'center', gap: 8 }}>
-          <AvatarGroup
-            layout="cluster"
-            items={MANY.slice(0, count)}
-            size={120}
-            showInitials
-          />
-          <Text>{count}</Text>
-        </View>
-      ))}
-    </View>
-  ),
-  name: 'Cluster layout',
-};
-
-/**
- * Cluster with photos at the common collaborative-post sizes (2 = "front +
- * behind", then 3 and 4).
- */
-export const ClusterWithPhotos: Story = {
-  render: () => (
-    <View style={{ flexDirection: 'row', gap: 24, alignItems: 'center' }}>
-      {[2, 3, 4].map((count) => (
-        <AvatarGroup
-          key={count}
-          layout="cluster"
-          items={WITH_PHOTOS.slice(0, count)}
-          size={64}
-          showInitials
-        />
-      ))}
-    </View>
-  ),
-  name: 'Cluster with photos',
-};
-
-/**
- * Cluster overflow: 25 members with `max={20}` shows 19 avatars + a trailing
- * "+N" bubble as the last (smallest) cluster member.
- */
-export const ClusterOverflow: Story = {
-  render: () => (
-    <View style={{ flexDirection: 'row', gap: 24, alignItems: 'center' }}>
-      <AvatarGroup layout="cluster" items={MANY} size={140} max={20} showInitials />
-      <Text>25 members, max 20 → cap + &quot;+N&quot;</Text>
-    </View>
-  ),
-  name: 'Cluster overflow',
-};

package/src/benefit-list/BenefitList.stories.tsx

@@ -1,50 +0,0 @@
-import React from 'react';
-import { View } from 'react-native';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { BenefitList, BenefitRow } from './index';
-import { Person_Stroke2_Corner0_Rounded as PersonIcon } from '../icons/Person';
-import { Lock_Stroke2_Corner0_Rounded as LockIcon } from '../icons/Lock';
-import { Shield_Stroke2_Corner0_Rounded as ShieldIcon } from '../icons/Shield';
-
-const meta: Meta<typeof BenefitList> = {
-  title: 'Components/BenefitList',
-  component: BenefitList,
-};
-
-export default meta;
-
-type Story = StoryObj<typeof BenefitList>;
-
-export const Consent: Story = {
-  render: () => (
-    <View style={{ width: 360, padding: 24 }}>
-      <BenefitList accessibilityLabel="What you're sharing">
-        <BenefitRow
-          icon={<PersonIcon size="sm" />}
-          label="Share your name and profile photo"
-        />
-        <BenefitRow
-          icon={<LockIcon size="sm" />}
-          label="Your password is never shared with this app"
-        />
-        <BenefitRow
-          icon={<ShieldIcon size="sm" />}
-          label="You can revoke access at any time from settings"
-        />
-      </BenefitList>
-    </View>
-  ),
-};
-
-export const SingleRow: Story = {
-  render: () => (
-    <View style={{ width: 360, padding: 24 }}>
-      <BenefitList>
-        <BenefitRow icon={<ShieldIcon size="sm" />}>
-          End-to-end encrypted by default
-        </BenefitRow>
-      </BenefitList>
-    </View>
-  ),
-};

package/src/benefit-list/index.tsx

@@ -1,133 +0,0 @@
-import React, { memo } from 'react';
-import {
-  View,
-  type StyleProp,
-  type TextStyle,
-  type ViewStyle,
-} from 'react-native';
-
-import { useTheme } from '../theme/use-theme';
-import { atoms as a } from '../styles';
-import { bloomShadowStyle } from '../design-tokens/shadows';
-import { TYPOGRAPHY, RADIUS, SPACING, BORDER_WIDTH } from '../design-tokens/scales';
-import { Text } from '../typography';
-import type { BenefitRowProps, BenefitListProps } from './types';
-
-/** Side of the rounded `fill-secondary` icon square. */
-const ICON_SQUARE_SIZE = 36;
-
-/**
- * `BenefitRow` — an icon in a rounded `fill-secondary` square paired with a
- * `text-secondary` caption (the `caption` type role). The building block of
- * {@link BenefitList} (the "icon + caption row" of the consent reference), but
- * usable standalone.
- *
- * Token roles → runtime theme colors:
- *   - icon square bg → `fill-secondary` (`--muted`) → `theme.colors.backgroundTertiary`
- *   - caption color  → `text-secondary` (`--muted-foreground`) → `theme.colors.textSecondary`
- *   - caption type   → `caption` role (size 11 / line-height 14)
- */
-const BenefitRowComponent: React.FC<BenefitRowProps> = ({
-  icon,
-  label,
-  children,
-  accessibilityLabel,
-  className,
-  style,
-  textStyle,
-}) => {
-  const theme = useTheme();
-  const content = children ?? label;
-  const a11y =
-    accessibilityLabel ?? (typeof content === 'string' ? content : undefined);
-
-  const rowStyle: StyleProp<ViewStyle> = [
-    a.flex_row,
-    a.align_center,
-    { gap: SPACING['space-12'] },
-    style,
-  ];
-
-  const squareStyle: ViewStyle = {
-    width: ICON_SQUARE_SIZE,
-    height: ICON_SQUARE_SIZE,
-    borderRadius: RADIUS['radius-12'],
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: theme.colors.backgroundTertiary,
-  };
-
-  const captionStyle: StyleProp<TextStyle> = [
-    {
-      fontSize: TYPOGRAPHY.caption.size,
-      lineHeight: TYPOGRAPHY.caption.lineHeight,
-      fontWeight: TYPOGRAPHY.caption.weight,
-      color: theme.colors.textSecondary,
-    },
-    a.flex_1,
-    textStyle,
-  ];
-
-  return (
-    <View
-      {...(className ? ({ className } as Record<string, string>) : {})}
-      style={rowStyle}
-      accessibilityLabel={a11y}
-      {...(a11y ? { accessibilityRole: 'text' as const } : {})}>
-      <View style={squareStyle} accessibilityElementsHidden aria-hidden>
-        {icon}
-      </View>
-      <Text style={captionStyle}>{content}</Text>
-    </View>
-  );
-};
-
-export const BenefitRow = memo(BenefitRowComponent);
-BenefitRow.displayName = 'BenefitRow';
-
-/**
- * `BenefitList` — a bordered card that stacks {@link BenefitRow}s with consistent
- * spacing. The "3 icon + caption rows in a card" from the consent reference.
- *
- * Token roles → runtime values:
- *   - card bg     → `fill` role (`--card`) → `theme.colors.card`
- *   - hairline    → `border-image` role (`--border`) → `theme.colors.border` at
- *                   the `border-hairline` (0.5px) width
- *   - radius      → `radius-20`
- *   - elevation   → `shadow-s` (platform-correct via `bloomShadowStyle`)
- */
-const BenefitListComponent: React.FC<BenefitListProps> = ({
-  children,
-  accessibilityLabel,
-  className,
-  style,
-}) => {
-  const theme = useTheme();
-
-  const cardStyle: StyleProp<ViewStyle> = [
-    {
-      backgroundColor: theme.colors.card,
-      borderRadius: RADIUS['radius-20'],
-      borderWidth: BORDER_WIDTH.hairline,
-      borderColor: theme.colors.border,
-      padding: SPACING['space-16'],
-      gap: SPACING['space-16'],
-    },
-    bloomShadowStyle('s'),
-    style,
-  ];
-
-  return (
-    <View
-      {...(className ? ({ className } as Record<string, string>) : {})}
-      style={cardStyle}
-      accessibilityLabel={accessibilityLabel}>
-      {children}
-    </View>
-  );
-};
-
-export const BenefitList = memo(BenefitListComponent);
-BenefitList.displayName = 'BenefitList';
-
-export type { BenefitRowProps, BenefitListProps } from './types';

package/src/bottom-sheet/BottomSheet.stories.tsx

@@ -1,92 +0,0 @@
-import React, { useRef } from 'react';
-import { Text, View } from 'react-native';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-
-import { Button } from '../button';
-import { BottomSheet, type BottomSheetRef } from './index';
-
-const meta: Meta<typeof BottomSheet> = {
-  title: 'Components/BottomSheet',
-  component: BottomSheet,
-};
-
-export default meta;
-
-type Story = StoryObj<typeof BottomSheet>;
-
-function BasicSheet() {
-  const ref = useRef<BottomSheetRef>(null);
-  return (
-    <>
-      <Button onPress={() => ref.current?.present()}>Open sheet</Button>
-      <BottomSheet ref={ref}>
-        <View style={{ padding: 24, gap: 12 }}>
-          <Text style={{ fontSize: 20, fontWeight: '700' }}>Bottom sheet</Text>
-          <Text>
-            Pan down to close, or tap the backdrop. This is the default sheet
-            (flush, rounded top corners only).
-          </Text>
-        </View>
-      </BottomSheet>
-    </>
-  );
-}
-
-function DetachedSheet() {
-  const ref = useRef<BottomSheetRef>(null);
-  return (
-    <>
-      <Button onPress={() => ref.current?.present()}>Open detached</Button>
-      <BottomSheet ref={ref} detached>
-        <View style={{ padding: 24, gap: 12 }}>
-          <Text style={{ fontSize: 20, fontWeight: '700' }}>Detached</Text>
-          <Text>
-            Floating card with margins and rounded corners on all sides.
-          </Text>
-        </View>
-      </BottomSheet>
-    </>
-  );
-}
-
-function NonScrollableSheet() {
-  const ref = useRef<BottomSheetRef>(null);
-  return (
-    <>
-      <Button onPress={() => ref.current?.present()}>Open non-scrollable</Button>
-      <BottomSheet ref={ref} scrollable={false}>
-        <View style={{ padding: 24, gap: 12 }}>
-          <Text style={{ fontSize: 20, fontWeight: '700' }}>
-            Non-scrollable
-          </Text>
-          <Text>
-            Use when the body owns its own VirtualizedList (FlatList,
-            SectionList, etc.).
-          </Text>
-        </View>
-      </BottomSheet>
-    </>
-  );
-}
-
-export const Basic: Story = {
-  render: () => <BasicSheet />,
-};
-
-export const Detached: Story = {
-  render: () => <DetachedSheet />,
-};
-
-export const NonScrollable: Story = {
-  render: () => <NonScrollableSheet />,
-};
-
-export const Composition: Story = {
-  render: () => (
-    <View style={{ gap: 12, alignItems: 'flex-start' }}>
-      <BasicSheet />
-      <DetachedSheet />
-      <NonScrollableSheet />
-    </View>
-  ),
-};

package/src/bottom-sheet/index.tsx

@@ -1,108 +0,0 @@
-import type React from 'react';
-import { forwardRef } from 'react';
-import { Modal, Platform, StyleSheet } from 'react-native';
-import { GestureHandlerRootView } from 'react-native-gesture-handler';
-import type { SharedValue } from 'react-native-reanimated';
-import {
-    BottomSheetBase,
-    type BottomSheetProps,
-    type BottomSheetRef,
-    type BottomSheetShellProps,
-} from './BottomSheetBase';
-
-// Keyboard handling — only on native platforms. On web, keyboard events are
-// handled by the browser (and the web build resolves to `index.web.tsx`, which
-// never imports this module). `react-native-keyboard-controller` is an OPTIONAL
-// dependency, loaded below through the shape Metro collects as an optional
-// dependency: a `require()` of a STRING LITERAL as a direct statement of a `try`
-// block — the real module when it is installed, `null` in the dependency map
-// when it is not, so the failure lands in the `catch` and everything no-ops.
-// The specifier used to be bound to a local `const` first, which also worked
-// (Metro evaluates the constant); the literal is simply the form the rule can be
-// checked as. See `connection-status/netinfo.ts` for the full rule, including
-// the specifier shape that does NOT work.
-const noopKeyboardHandler = (_handlers: Record<string, (e: { height: number }) => void>, _deps: unknown[]) => {};
-let useKeyboardHandler: (handlers: Record<string, (e: { height: number }) => void>, deps: unknown[]) => void = noopKeyboardHandler;
-
-// react-native-keyboard-controller's <KeyboardProvider>. We re-establish it
-// INSIDE the sheet's RN <Modal> (see the render below): a <Modal> mounts into
-// its OWN native root, and neither the app-root GestureHandlerRootView nor the
-// app-root KeyboardProvider's native KeyboardControllerView extend across that
-// boundary. Without a provider inside the Modal, keyboard-controller consumers
-// (this sheet's keyboard tracker, plus any TextInputs in `children`) read the
-// default empty KeyboardContext — logging "Couldn't find real values for
-// KeyboardContext ..." — and receive no keyboard insets. When the optional
-// module is absent, or on web (no RN Modal native-window boundary, keyboard is
-// the browser's concern), this resolves to a passthrough that just renders its
-// children, so no provider is introduced where one isn't needed.
-const PassthroughKeyboardProvider = ({ children }: { children: React.ReactNode }) => <>{children}</>;
-let KeyboardProvider: React.ComponentType<{ children: React.ReactNode }> = PassthroughKeyboardProvider;
-
-if (Platform.OS !== 'web' && typeof require !== 'undefined') {
-    try {
-        const keyboardController = require('react-native-keyboard-controller');
-        useKeyboardHandler = keyboardController.useKeyboardHandler ?? noopKeyboardHandler;
-        KeyboardProvider = keyboardController.KeyboardProvider ?? PassthroughKeyboardProvider;
-    } catch {
-        // react-native-keyboard-controller not available — keep the no-op
-        // handler and passthrough provider.
-    }
-}
-
-/**
- * Registers the sheet's keyboard-height tracker. It lives in its own tiny
- * component — rendered INSIDE the Modal, under the re-established
- * <KeyboardProvider> — so `useKeyboardHandler` reads the in-Modal
- * KeyboardContext whose native KeyboardControllerView actually receives the
- * Modal window's keyboard insets (the app-root provider does not cross the
- * Modal's native-window boundary). It writes the live keyboard height into the
- * shared value that drives the sheet's translate/height styles. Renders
- * nothing. No-ops when react-native-keyboard-controller isn't installed / on
- * web (`useKeyboardHandler` is the module-level no-op there).
- */
-function SheetKeyboardSync({ keyboardHeight }: { keyboardHeight: SharedValue<number> }) {
-    useKeyboardHandler({
-        onMove: (e) => {
-            'worklet';
-            keyboardHeight.value = e.height;
-        },
-        onEnd: (e) => {
-            'worklet';
-            keyboardHeight.value = e.height;
-        },
-    }, []);
-    return null;
-}
-
-/**
- * Native shell: RN's `<Modal>` (its own native root window) + the
- * re-established `<KeyboardProvider>` + the sheet's keyboard tracker + a
- * `<GestureHandlerRootView>` (the app-root GHRV does not cross the Modal's
- * native-window boundary, so pan gestures need their own root here).
- */
-function NativeShell({ visible, onRequestClose, keyboardHeight, children }: BottomSheetShellProps) {
-    return (
-        <Modal visible={visible} transparent animationType="none" statusBarTranslucent onRequestClose={onRequestClose}>
-            <KeyboardProvider>
-                <SheetKeyboardSync keyboardHeight={keyboardHeight} />
-                <GestureHandlerRootView style={styles.rootView}>{children}</GestureHandlerRootView>
-            </KeyboardProvider>
-        </Modal>
-    );
-}
-
-const BottomSheet = forwardRef((props: BottomSheetProps, ref: React.ForwardedRef<BottomSheetRef>) => (
-    <BottomSheetBase {...props} ref={ref} Shell={NativeShell} />
-));
-
-BottomSheet.displayName = 'BottomSheet';
-
-const styles = StyleSheet.create({
-    rootView: {
-        flex: 1,
-    },
-});
-
-export type { BottomSheetProps, BottomSheetRef };
-export default BottomSheet;
-export { BottomSheet };

package/src/bottom-sheet/index.web.tsx

@@ -1,77 +0,0 @@
-import type React from 'react';
-import { forwardRef } from 'react';
-import { StyleSheet } from 'react-native';
-import { GestureHandlerRootView } from 'react-native-gesture-handler';
-import { OverlayRoot } from '../overlay';
-import { Portal } from '../portal/index.web';
-import { WEB_POSITION_FIXED } from '../styles/web-view-style';
-import {
-    BottomSheetBase,
-    type BottomSheetProps,
-    type BottomSheetRef,
-    type BottomSheetShellProps,
-} from './BottomSheetBase';
-
-/**
- * Web shell: bloom's stable DOM `<Portal>` (a single, reused
- * `#bloom-portal-root` in `document.body`, created in a layout effect and never
- * torn down) + a fixed, full-viewport `<GestureHandlerRootView>`.
- *
- * Why NOT RN-Web's `<Modal>` (which native uses): RN-Web's `Modal` mounts
- * through `ModalPortal`, which appends its host `<div>` DURING RENDER and
- * removes it in an unmount effect that also nulls its ref. Under React 19
- * concurrent rendering / StrictMode, that host node is orphaned — the sheet
- * mounts but its DOM lands in a detached node and never paints. Bloom's Portal
- * has no render-phase side effect and a stable host, so the sheet paints
- * reliably. This is the SAME portal the `Dialog` `center`/side paths already
- * use on web.
- *
- * `keyboardHeight` / `onRequestClose` are native-shell concerns (the browser
- * owns keyboard layout and back-button semantics) and are intentionally unused
- * here.
- */
-function WebShell({ children }: BottomSheetShellProps) {
-    return (
-        <Portal>
-            {/* `OverlayRoot` owns the portal-root pointer-events opt-in (see
-                `src/overlay`). It used to ride in the style array below as an
-                RN-only box-none value, which never reached the DOM — the whole
-                sheet, backdrop included, was click-through on web. */}
-            <OverlayRoot style={webStyles.rootView}>
-                <GestureHandlerRootView style={StyleSheet.absoluteFill}>
-                    {children}
-                </GestureHandlerRootView>
-            </OverlayRoot>
-        </Portal>
-    );
-}
-
-const BottomSheet = forwardRef((props: BottomSheetProps, ref: React.ForwardedRef<BottomSheetRef>) => (
-    <BottomSheetBase {...props} ref={ref} Shell={WebShell} />
-));
-
-BottomSheet.displayName = 'BottomSheet';
-
-const webStyles = StyleSheet.create({
-    // Fixed, full-viewport box the sheet's `StyleSheet.absoluteFill` body
-    // anchors to. The pointer-events opt-in and the STACKING both live in
-    // `OverlayRoot`.
-    //
-    // This used to also pin `zIndex: Z_INDEX.portalRoot` (999999) here. Inside
-    // the portal root that number does not mean "the portal layer" — it means
-    // "above every other portaled surface", which is how a confirm dialog
-    // opened from inside an open sheet ended up rendering underneath it,
-    // unreachable, no matter which one opened last. Stacking is the overlay
-    // stack's job now (`src/overlay/stack.ts`); do not reintroduce a constant.
-    rootView: {
-        position: WEB_POSITION_FIXED,
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-    },
-});
-
-export type { BottomSheetProps, BottomSheetRef };
-export default BottomSheet;
-export { BottomSheet };