@oxy.so/bloom 3.5.0 → 4.0.0

package/src/stat-cards/StatCards.tsx

@@ -88,7 +88,7 @@ const DELTA_ICONS = {
 } as const;
 
 /** Delta colours onto Bloom's `Chip` tones. */
-const CHIP_TONES = { lime: 'success', rose: 'error', neutral: 'default' } as const;
+const CHIP_TONES = { lime: 'success', rose: 'danger', neutral: 'neutral' } as const;
 
 let gradientIdCounter = 0;
 
@@ -122,7 +122,7 @@ function DeltaPill({
   delta: string;
   deltaColor: StatCardsDeltaColor;
   surfaces: DashboardSurfaces;
-  /** What the pill sits on — the dark status fill is 60% over it. */
+  /** The containing surface, retained for the shared status-pair call. */
   surface: string;
   testID?: string;
 }) {
@@ -343,9 +343,9 @@ function StatCardComponent({ stat, variant = 'plain', style, testID }: StatCardP
             {stat.value}
           </Text>
           <Chip
-            size="medium"
-            variant="subtle"
-            color={CHIP_TONES[stat.deltaColor]}
+            size="md"
+            appearance="subtle"
+            tone={CHIP_TONES[stat.deltaColor]}
             // `Chip` pins itself to `flex-start`; the row centres it on the value.
             style={styles.chip}
             testID={testID ? `${testID}-delta` : undefined}

package/src/stat-cards/tones.ts

@@ -2,7 +2,6 @@ import {
   ACCENT_TABLE,
   DANGER_TABLE,
   colorRamp,
-  mixColor,
   resolveButtonRamps,
   type Ramp,
 } from '../button/shared';
@@ -116,38 +115,19 @@ export function toneColor(theme: Theme, tone: DashboardTone, stop: ToneStop): st
   return roleRamp(theme, tone)[stop];
 }
 
-/**
- * The `status-lime` / `status-rose` pair over a known surface:
- * light `200` fill with `800` text, dark `950` at 60% with `500` text.
- */
+/** Canonical status pairs; the foreground is authored with its subtle fill. */
 export function statusPair(
   theme: Theme,
   tone: 'lime' | 'rose',
-  surface: string,
+  _surface: string,
 ): { background: string; foreground: string } {
-  const ramp = roleRamp(theme, tone);
-  return theme.isDark
-    ? { background: mixColor(surface, ramp[950], 0.6), foreground: ramp[500] }
-    : { background: ramp[200], foreground: ramp[800] };
+  const c = theme.colors;
+  return tone === 'lime'
+    ? { background: c.successSubtle, foreground: c.successSubtleForeground }
+    : { background: c.errorSubtle, foreground: c.errorSubtleForeground };
 }
 
-/**
- * The surface tokens a dashboard card is built from, on Bloom's ramps:
- *
- *                               light          dark
- *   background-secondary        neutral-100    neutral-900
- *   background-inner            white (card)   neutral-800 @60% over the card
- *   background-primary          white (card)   neutral-800
- *   stat-card-icon-background   white (card)   neutral-800
- *   avatar-neutral-background   neutral-300    neutral-800
- *   border-button-default       neutral-200    neutral-700
- *   text-primary                text           text
- *   text-secondary              neutral-500    neutral-500
- *   foreground-icon-primary     text           text
- *   foreground-icon-secondary   neutral-500    neutral-500
- *   border-focus-ring           accent-500     accent-500
- *   shadow-card                 0 1 1 black/5  0 1 1 black/14
- */
+/** Shared dashboard chrome follows canonical theme roles, independent of data hues. */
 export interface DashboardSurfaces {
   secondary: string;
   inner: string;
@@ -163,20 +143,18 @@ export interface DashboardSurfaces {
 }
 
 export function resolveDashboardSurfaces(theme: Theme): DashboardSurfaces {
-  const { accent, neutral: n } = resolveButtonRamps(theme);
-  const secondary = theme.isDark ? n[900] : n[100];
-  const white = theme.colors.card;
+  const c = theme.colors;
   return {
-    secondary,
-    inner: theme.isDark ? mixColor(secondary, n[800], 0.6) : white,
-    primary: theme.isDark ? n[800] : white,
-    iconTile: theme.isDark ? n[800] : white,
-    avatarNeutral: theme.isDark ? n[800] : n[300],
-    buttonBorder: theme.isDark ? n[700] : n[200],
-    text: theme.colors.text,
-    textSecondary: n[500],
-    iconSecondary: n[500],
-    focusRing: accent[500],
+    secondary: c.card,
+    inner: c.backgroundSecondary,
+    primary: c.card,
+    iconTile: c.backgroundTertiary,
+    avatarNeutral: c.backgroundTertiary,
+    buttonBorder: c.borderLight,
+    text: c.text,
+    textSecondary: c.textSecondary,
+    iconSecondary: c.textSecondary,
+    focusRing: c.primary,
     cardShadow: theme.isDark ? '0 1px 1px 0 rgb(0 0 0 / 0.14)' : '0 1px 1px 0 rgb(0 0 0 / 0.05)',
   };
 }

package/src/stay-filters/EnergyRatingFilter.tsx

@@ -70,7 +70,6 @@ export interface EnergyRatingPaint {
 /** The seven fills, A → G, each with its legible letter colour. Pure. */
 export function resolveEnergyRatingPaint(theme: Theme): Record<EnergyRating, EnergyRatingPaint> {
   const c = theme.colors;
-  const { neutral } = resolveButtonRamps(theme);
   // The theme's status colours are the 500 stops of their ramps.
   const { success, warning, error } = c;
   const fills: string[] = [
@@ -83,7 +82,7 @@ export function resolveEnergyRatingPaint(theme: Theme): Record<EnergyRating, Ene
     error,
   ];
   const light = '#ffffff';
-  const dark = neutral[950];
+  const dark = theme.colors.backgroundTertiary;
   const out = {} as Record<EnergyRating, EnergyRatingPaint>;
   ENERGY_RATINGS.forEach((rating, i) => {
     const fill = fills[i] as string;
@@ -115,10 +114,10 @@ interface PillProps {
 function Pill({ rating, paint, included, checked, disabled, name, onPress, testID }: PillProps) {
   const theme = useTheme();
   const ringOffset = useRingOffsetStyle();
-  const { accent, neutral } = useMemo(() => resolveButtonRamps(theme), [theme]);
+  const { accent } = useMemo(() => resolveButtonRamps(theme), [theme]);
   const hover = useInteractionState();
   const dark = theme.isDark;
-  const border = checked ? theme.colors.text : hover.state && !disabled ? (dark ? neutral[500] : neutral[400]) : 'transparent';
+  const border = checked ? theme.colors.text : hover.state && !disabled ? (theme.colors.border) : 'transparent';
 
   const style: WebCssStyle = {
     height: ENERGY_PILL_HEIGHT,
@@ -129,7 +128,7 @@ function Pill({ rating, paint, included, checked, disabled, name, onPress, testI
     borderRadius: borderRadius.full,
     borderWidth: 2,
     borderColor: border,
-    backgroundColor: included ? paint.fill : dark ? neutral[800] : neutral[100],
+    backgroundColor: included ? paint.fill : theme.colors.backgroundSecondary,
     alignItems: 'center',
     justifyContent: 'center',
     opacity: disabled ? DISABLED_OPACITY : 1,

package/src/stay-filters/FilterFooter.tsx

@@ -31,7 +31,6 @@ function FilterFooterComponent({
   testID,
 }: FilterFooterProps) {
   const theme = useTheme();
-  const { neutral } = useMemo(() => resolveButtonRamps(theme), [theme]);
 
   return (
     <View
@@ -47,7 +46,7 @@ function FilterFooterComponent({
           paddingLeft: 24,
           paddingRight: 24,
           borderTopWidth: 1,
-          borderTopColor: theme.isDark ? neutral[800] : neutral[200],
+          borderTopColor: theme.colors.border,
           backgroundColor: theme.colors.background,
         },
         style,

package/src/stay-filters/FilterSection.tsx

@@ -29,7 +29,6 @@ function FilterSectionComponent({
   testID,
 }: FilterSectionProps) {
   const theme = useTheme();
-  const { neutral } = useMemo(() => resolveButtonRamps(theme), [theme]);
   const name = accessibilityLabel ?? (typeof title === 'string' ? title : undefined);
 
   return (
@@ -42,7 +41,7 @@ function FilterSectionComponent({
           paddingTop: 32,
           paddingBottom: 32,
           borderBottomWidth: divider ? 1 : 0,
-          borderBottomColor: theme.isDark ? neutral[800] : neutral[200],
+          borderBottomColor: theme.colors.border,
         },
         style,
       ]}

package/src/stay-filters/PriceHistogram.tsx

@@ -43,11 +43,10 @@ const MIN_BAR = 2;
 
 function PriceHistogramComponent({ buckets, min, max, value, height = 64, style, testID }: PriceHistogramProps) {
   const theme = useTheme();
-  const { neutral } = useMemo(() => resolveButtonRamps(theme), [theme]);
   const tallest = buckets.reduce((m, n) => Math.max(m, n), 0);
   const selected = histogramSelection(buckets.length, min, max, value);
   const inColor = useMemo(() => chartHueTone(theme, 6).color, [theme]);
-  const outColor = theme.isDark ? neutral[700] : neutral[300];
+  const outColor = theme.colors.textTertiary;
 
   return (
     <View

package/src/stay-filters/PropertyTypeTiles.tsx

@@ -81,12 +81,12 @@ interface TileProps {
 function Tile({ label, icon: Icon, selected, disabled, size, onPress, testID }: TileProps) {
   const theme = useTheme();
   const ringOffset = useRingOffsetStyle();
-  const { accent, neutral } = useMemo(() => resolveButtonRamps(theme), [theme]);
+  const { accent } = useMemo(() => resolveButtonRamps(theme), [theme]);
   const hover = useInteractionState();
   const press = useInteractionState();
   const dark = theme.isDark;
   const text = theme.colors.text;
-  const tint = dark ? neutral[800] : neutral[100];
+  const tint = theme.colors.backgroundTertiary;
   const active = !disabled;
   const border = selected ? 2 : 1;
   const { minHeight, padding } = TILE_GEOMETRY[size];
@@ -98,7 +98,7 @@ function Tile({ label, icon: Icon, selected, disabled, size, onPress, testID }:
     minHeight,
     borderRadius: PROPERTY_TILE_RADIUS,
     borderWidth: border,
-    borderColor: selected || (hover.state && active) ? text : dark ? neutral[700] : neutral[200],
+    borderColor: selected || (hover.state && active) ? text : theme.colors.border,
     backgroundColor: selected || (press.state && active) ? tint : 'transparent',
     paddingTop: inset,
     paddingBottom: inset,

package/src/stay-search/GuestPicker.tsx

@@ -50,7 +50,6 @@ function GuestPickerComponent({
   testID,
 }: GuestPickerProps) {
   const theme = useTheme();
-  const { neutral } = resolveButtonRamps(theme);
   const contextClose = useGuestPickerClose();
   const close = onClose ?? contextClose;
   const counted = COUNTED.reduce((sum, kind) => sum + value[kind], 0);
@@ -88,7 +87,7 @@ function GuestPickerComponent({
       })}
       {note != null ? (
         typeof note === 'string' ? (
-          <Text variant="body-2-regular" style={{ color: neutral[500], paddingTop: 8 }}>
+          <Text variant="body-2-regular" style={{ color: theme.colors.textSecondary, paddingTop: 8 }}>
             {note}
           </Text>
         ) : (

package/src/stay-search/palette.ts

@@ -60,24 +60,23 @@ const PANEL_AMBIENT = {
 
 export function resolveStaySearchPalette(theme: Theme): StaySearchPalette {
   const c = theme.colors;
-  const { neutral: n } = resolveButtonRamps(theme);
   const menu = resolveMenuPalette(theme);
   const mode = theme.isDark ? 'dark' : 'light';
 
   return {
     barSurface: menu.surface,
-    barSurfaceOpen: theme.isDark ? n[900] : n[100],
+    barSurfaceOpen: theme.colors.backgroundSecondary,
     border: menu.border,
     barShadow: STAY_SEARCH_BAR_SHADOW[mode],
     segmentHover: menu.rowHighlight,
-    segmentHoverOpen: theme.isDark ? n[800] : n[200],
-    segmentActive: theme.isDark ? n[700] : c.card,
+    segmentHoverOpen: c.backgroundTertiary,
+    segmentActive: c.card,
     segmentActiveShadow: STAY_SEARCH_SEGMENT_SHADOW[mode],
-    separator: theme.isDark ? n[700] : n[200],
+    separator: theme.colors.border,
     text: c.text,
     textSecondary: c.textSecondary,
     placeholder: c.textSecondary,
-    tile: theme.isDark ? n[700] : n[100],
+    tile: theme.colors.backgroundSecondary,
     rowHighlight: menu.rowHighlight,
     panelSurface: menu.surface,
     panelBorder: menu.border,

package/src/stepper/Stepper.tsx

@@ -2,7 +2,6 @@ import React, { memo, useCallback, useMemo } from 'react';
 import { Platform, View, type AccessibilityActionEvent } from 'react-native';
 
 import { Button } from '../button';
-import { resolveButtonRamps } from '../button/shared';
 import { webDataSet } from '../styles/web-data';
 import { useAccessibleNameWarning } from '../hooks/use-accessible-name-warning';
 import { RiAddLine } from '../icons/remix/RiAddLine';
@@ -96,7 +95,6 @@ function StepperComponent({
   const disabled = field.disabled;
   useAccessibleNameWarning('Stepper', field.accessibilityLabel);
   useInteractiveWebCss(STYLE_ID, BLOOM_STEPPER_CSS);
-  const { accent } = useMemo(() => resolveButtonRamps(theme), [theme]);
   const config = SIZE_CONFIG[size];
 
   const canDecrement = !disabled && value > min;
@@ -164,7 +162,7 @@ function StepperComponent({
     borderRadius: 8,
     alignItems: 'center',
     justifyContent: 'center',
-    '--bloom-stepper-ring': accent[500],
+    '--bloom-stepper-ring': theme.colors.primary,
     ...ringOffset,
   };
 

package/src/stepper/StepperRow.tsx

@@ -1,7 +1,6 @@
 import React, { memo, useMemo } from 'react';
 import { View } from 'react-native';
 
-import { resolveButtonRamps } from '../button/shared';
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
 import { Stepper } from './Stepper';
@@ -24,7 +23,6 @@ function StepperRowComponent({
   ...stepper
 }: StepperRowProps) {
   const theme = useTheme();
-  const { neutral } = useMemo(() => resolveButtonRamps(theme), [theme]);
   const name = accessibilityLabel ?? (typeof title === 'string' ? title : '');
 
   return (
@@ -39,7 +37,7 @@ function StepperRowComponent({
           borderBottomWidth: divider ? 1 : 0,
           // neutral-700 in dark, not 800: 800 is the floating surface (a popover, a
           // sheet) these rows usually sit on, where an 800 hairline disappears.
-          borderBottomColor: theme.isDark ? neutral[700] : neutral[200],
+          borderBottomColor: theme.colors.borderLight,
         },
         style,
       ]}

package/src/styles/panel-chrome.ts

@@ -9,12 +9,10 @@
  *   shadow   0 1px 0 (the seat), 0 1px 12px (the soft body), 0 0 1px (the edge
  *            definition that keeps the hairline from disappearing on a
  *            same-coloured background)
- *   border   the CARD colour in light mode — a panel on a tinted page reads as
- *            a lighter edge, not a grey line — and neutral-800 in dark
+ *   border   the canonical subtle border role in both modes
  */
 import { useContext } from 'react';
 
-import { resolveButtonRamps } from '../button/shared';
 import { BloomThemeContext } from '../theme/BloomThemeProvider';
 import type { Theme } from '../theme/types';
 
@@ -33,11 +31,10 @@ export interface PanelChrome {
 }
 
 export function resolvePanelChrome(theme: Theme): PanelChrome {
-  const { neutral: n } = resolveButtonRamps(theme);
   const dark = theme.isDark;
   return {
-    surface: dark ? n[900] : n[100],
-    border: dark ? n[800] : theme.colors.card,
+    surface: theme.colors.backgroundSecondary,
+    border: theme.colors.borderLight,
     shadow: dark ? PANEL_SHADOW.dark : PANEL_SHADOW.light,
   };
 }

package/src/surfaces/prompts.tsx

@@ -163,7 +163,7 @@ function PromptSurface({
         label={options.inputLabel ?? options.title}
         placeholder={options.placeholder}
         value={value}
-        onChangeText={setValue}
+        onValueChange={setValue}
         autoFocus
         returnKeyType="done"
         onSubmitEditing={onSubmit}

package/src/{chat-list/ChatSwipeRow.tsx → swipe-row/SwipeRow.tsx}

@@ -9,83 +9,101 @@ import Animated, {
   withTiming,
 } from 'react-native-reanimated';
 
+import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
-import { actionPanePaint } from './parts';
 import {
-  CHAT_ROW_RADIUS,
   SWIPE_ACTION_WIDTH,
+  SWIPE_ACTIVATE_OFFSET,
   SWIPE_COMMIT_FRACTION,
+  SWIPE_ROW_RADIUS,
+  SWIPE_SNAP_DURATION,
   SWIPE_TAP_SLOP,
-  type ChatListPaint,
-} from './shared';
-import type { ChatAction, ChatSwipeActions } from './types';
-
-export interface ChatSwipeRowProps {
-  actions: ChatSwipeActions;
-  onAction?: (key: string) => void;
-  /** The row's height, so the panes match it exactly. */
-  height: number;
-  paint: ChatListPaint;
-  /** Names the tap target that closes an open pane. Default `'Close actions'`. */
-  closeLabel?: string;
-  children: React.ReactNode;
-  testID?: string;
-}
+} from './constants';
+import { resolveSwipeRowPaint, swipeActionPaint } from './shared';
+import type { SwipeRowAction, SwipeRowProps } from './types';
 
 /**
- * The drag affordance behind a chat row, on touch.
+ * ONE drag affordance for every list row in this library.
  *
  * Dragging RIGHT uncovers `actions.left` from the left edge, dragging LEFT
  * uncovers `actions.right`. The row travels with the finger up to the pane's
- * full width (`SWIPE_ACTION_WIDTH` per action) and snaps open past
+ * full width (`actionWidth` per action) and snaps open past
  * `SWIPE_COMMIT_FRACTION` of it, closed below — so a half-hearted drag never
  * leaves a row stuck ajar. Anything under `SWIPE_TAP_SLOP` is a tap and the
  * gesture springs straight back.
  *
  * The gesture activates only past a horizontal threshold and FAILS on vertical
- * travel, so a list scroll never turns into a swipe. Panes are laid under the
+ * travel, so a list scroll never turns into a swipe. Panes are laid UNDER the
  * row and grow with it rather than sliding in from outside: the row is what
  * moves, and the action underneath is revealed, not pushed.
  *
- * WEB gets none of this. `ChatListItem` renders the same actions as hover
- * buttons there, because a drag is undiscoverable with a mouse and a
- * `pointerdown`-driven pan fights text selection.
+ * It owns the gesture and almost nothing else. It draws no row and knows no
+ * density; the one colour it insists on is the OPAQUE fill under the
+ * travelling layer, because the panes are behind the row and would otherwise
+ * read straight through it. It resolves no other row colours — the caller passes its children, and either the
+ * pane pairs it already resolved or nothing at all, in which case the panes
+ * come off the theme. That is what lets a chat row and a mail row share one
+ * implementation instead of drifting into two.
+ *
+ * WHO GETS IT is `useSwipeAvailable()`: every touch pointer, on any platform.
+ * A mouse gets whatever hover affordance the calling family draws, because a
+ * drag is undiscoverable with a pointer.
+ *
+ * A SWIPE IS NOT REACHABLE BY KEYBOARD OR BY A SCREEN READER, and this
+ * component does not pretend otherwise: while a pane is closed it is hidden
+ * from assistive technology entirely, rather than leaving invisible buttons in
+ * the tab order for focus to disappear into. The caller owes those actions a
+ * second path — a hover rail, a row menu, or `accessibilityActions` on the row
+ * itself. `mail-list` does the last two; see `docs/swipe-row.mdx`.
  *
  * Reduced motion keeps the panes and drops the SNAP animation — the row jumps
  * to its resting position instead of easing to it.
  */
-export function ChatSwipeRow({
+export function SwipeRow({
   actions,
   onAction,
   height,
   paint,
+  background,
+  radius = SWIPE_ROW_RADIUS,
+  actionWidth = SWIPE_ACTION_WIDTH,
   closeLabel = 'Close actions',
+  onOpenChange,
   children,
   testID,
-}: ChatSwipeRowProps) {
+}: SwipeRowProps) {
+  const theme = useTheme();
   const translateX = useSharedValue(0);
   const reducedMotion = useReducedMotion();
   const [open, setOpen] = useState<'left' | 'right' | null>(null);
 
+  const tones = useMemo(() => paint ?? resolveSwipeRowPaint(theme), [paint, theme]);
+  // The panes sit UNDER the row, so the travelling layer has to be opaque or
+  // they read through it.
+  const rowFill = background ?? theme.colors.background;
   const left = actions.left ?? [];
   const right = actions.right ?? [];
-  const leftWidth = left.length * SWIPE_ACTION_WIDTH;
-  const rightWidth = right.length * SWIPE_ACTION_WIDTH;
+  const leftWidth = left.length * actionWidth;
+  const rightWidth = right.length * actionWidth;
 
-  const settle = useCallback((next: 'left' | 'right' | null) => {
-    setOpen(next);
-  }, []);
+  const settle = useCallback(
+    (next: 'left' | 'right' | null) => {
+      setOpen(next);
+      onOpenChange?.(next);
+    },
+    [onOpenChange],
+  );
 
   const close = useCallback(() => {
-    translateX.value = reducedMotion ? 0 : withTiming(0, { duration: 160 });
-    setOpen(null);
-  }, [reducedMotion, translateX]);
+    translateX.value = reducedMotion ? 0 : withTiming(0, { duration: SWIPE_SNAP_DURATION });
+    settle(null);
+  }, [reducedMotion, settle, translateX]);
 
   const pan = useMemo(
     () =>
       Gesture.Pan()
-        .activeOffsetX([-12, 12])
-        .failOffsetY([-12, 12])
+        .activeOffsetX([-SWIPE_ACTIVATE_OFFSET, SWIPE_ACTIVATE_OFFSET])
+        .failOffsetY([-SWIPE_ACTIVATE_OFFSET, SWIPE_ACTIVATE_OFFSET])
         .onChange((event) => {
           'worklet';
           const next = translateX.value + event.changeX;
@@ -103,7 +121,9 @@ export function ChatSwipeRow({
           const full = opening === 'left' ? leftWidth : rightWidth;
           const commit = travelled >= full * SWIPE_COMMIT_FRACTION && full > 0;
           const target = commit ? (opening === 'left' ? leftWidth : -rightWidth) : 0;
-          translateX.value = reducedMotion ? target : withTiming(target, { duration: 160 });
+          translateX.value = reducedMotion
+            ? target
+            : withTiming(target, { duration: SWIPE_SNAP_DURATION });
           runOnJS(settle)(commit ? opening : null);
         }),
     [leftWidth, reducedMotion, rightWidth, settle, translateX],
@@ -124,7 +144,7 @@ export function ChatSwipeRow({
 
   // The buttons keep their full width and are CLIPPED by the growing pane, so
   // they are revealed in place rather than squashed as the row travels.
-  const pane = (list: readonly ChatAction[], side: 'left' | 'right') => (
+  const pane = (list: readonly SwipeRowAction[], side: 'left' | 'right') => (
     <View
       style={{
         position: 'absolute',
@@ -135,7 +155,7 @@ export function ChatSwipeRow({
       }}
     >
       {list.map((action) => {
-        const tone = actionPanePaint(action, paint);
+        const tone = swipeActionPaint(action, tones);
         const Icon = action.icon;
         return (
           <Pressable
@@ -148,8 +168,8 @@ export function ChatSwipeRow({
               close();
             }}
             style={{
-              width: SWIPE_ACTION_WIDTH,
-              height,
+              width: actionWidth,
+              alignSelf: 'stretch',
               alignItems: 'center',
               justifyContent: 'center',
               gap: 4,
@@ -171,13 +191,27 @@ export function ChatSwipeRow({
     </View>
   );
 
+  // A closed pane is 0 wide and clipped, so anything inside it is a control
+  // nobody can see. Hiding it is the difference between "unreachable" and
+  // "reachable, invisible, and it steals the focus ring".
+  const hiddenWhenClosed = (side: 'left' | 'right') =>
+    open === side
+      ? null
+      : ({ 'aria-hidden': true, importantForAccessibility: 'no-hide-descendants' } as const);
+
   return (
     <View
-      style={{ position: 'relative', height, borderRadius: CHAT_ROW_RADIUS, overflow: 'hidden' }}
+      style={{
+        position: 'relative',
+        ...(height === undefined ? null : { height }),
+        borderRadius: radius,
+        overflow: 'hidden',
+      }}
       testID={testID}
     >
       {leftWidth > 0 ? (
         <Animated.View
+          {...hiddenWhenClosed('left')}
           style={[
             { position: 'absolute', left: 0, top: 0, bottom: 0, overflow: 'hidden' },
             leftPaneStyle,
@@ -188,6 +222,7 @@ export function ChatSwipeRow({
       ) : null}
       {rightWidth > 0 ? (
         <Animated.View
+          {...hiddenWhenClosed('right')}
           style={[
             { position: 'absolute', right: 0, top: 0, bottom: 0, overflow: 'hidden' },
             rightPaneStyle,
@@ -197,11 +232,17 @@ export function ChatSwipeRow({
         </Animated.View>
       ) : null}
       <GestureDetector gesture={pan}>
-        <Animated.View style={[{ height }, rowStyle]}>
+        <Animated.View
+          style={[
+            { backgroundColor: rowFill },
+            height === undefined ? null : { height },
+            rowStyle,
+          ]}
+        >
           {children}
           {open !== null ? (
             // While a pane is open the row itself closes it rather than opening
-            // the conversation — the same rule a tap outside an open menu follows.
+            // what it points at — the same rule a tap outside an open menu follows.
             <Pressable
               role="button"
               accessibilityLabel={closeLabel}

package/src/swipe-row/constants.ts

@@ -0,0 +1,27 @@
+/**
+ * The drag's thresholds and the rail's geometry, in one place because they are
+ * one decision: how far a finger travels before the row is considered to have
+ * been opened rather than nudged.
+ */
+
+/** The widest a pane opens, per action. A 76 target is comfortable for a thumb. */
+export const SWIPE_ACTION_WIDTH = 76;
+
+/**
+ * How far a row must travel, as a fraction of the pane's full width, before the
+ * drag is committed rather than sprung back. Below it the row closes, so a
+ * half-hearted drag never leaves a row stuck ajar.
+ */
+export const SWIPE_COMMIT_FRACTION = 0.4;
+
+/** Below this many pixels the drag reads as a tap and the row springs straight back. */
+export const SWIPE_TAP_SLOP = 10;
+
+/** How long the snap to the resting position takes. Dropped under reduced motion. */
+export const SWIPE_SNAP_DURATION = 160;
+
+/** The corner radius a row's panes are clipped to, unless the caller says otherwise. */
+export const SWIPE_ROW_RADIUS = 12;
+
+/** How far the finger travels horizontally before the pan claims the touch. */
+export const SWIPE_ACTIVATE_OFFSET = 12;

package/src/swipe-row/index.ts

@@ -0,0 +1,18 @@
+export { SwipeRow } from './SwipeRow';
+export {
+  SWIPE_ACTION_WIDTH,
+  SWIPE_ACTIVATE_OFFSET,
+  SWIPE_COMMIT_FRACTION,
+  SWIPE_ROW_RADIUS,
+  SWIPE_SNAP_DURATION,
+  SWIPE_TAP_SLOP,
+} from './constants';
+export { resolveSwipeRowPaint, swipeActionPaint } from './shared';
+export { useSwipeAvailable } from './use-swipe-available';
+export type {
+  SwipeRowAction,
+  SwipeRowActionTone,
+  SwipeRowActions,
+  SwipeRowPaint,
+  SwipeRowProps,
+} from './types';