@oxy.so/bloom 3.6.0 → 4.0.0

package/src/screen/Screen.tsx

@@ -0,0 +1,55 @@
+import React, { useContext, useEffect, useMemo, useState } from 'react';
+import { Keyboard, Platform, View } from 'react-native';
+import { SafeAreaInsetsContext } from 'react-native-safe-area-context';
+import { windowEdgeGap } from '../layout/edge';
+import { useSharedValue } from 'react-native-reanimated';
+import { useTheme } from '../theme/use-theme';
+import { WEB_POSITION_STICKY } from '../styles/web-view-style';
+import { Z_INDEX } from '../styles/z-index';
+import { ScreenContext, ScreenNavigationContext } from './context';
+import type { ScreenProps } from './types';
+
+/** One continuous canvas; chrome overlays it and content reserves its measured footprint. */
+export function Screen({ header, bottomBar, primaryAction, active: requestedActive = true, navigationScope = 'inherit', documentScroll = false, headerHeight, bottomBarHeight, contentClearance = 16, children, style, testID, ...props }: ScreenProps) {
+  const { colors } = useTheme();
+  const parentScreen = useContext(ScreenContext);
+  const active = requestedActive && (navigationScope === 'isolated' ? true : parentScreen?.active ?? true);
+  const scrollY = useSharedValue(0);
+  const localProgress = useSharedValue(0);
+  const localTarget = useSharedValue(0);
+  const localScroller = useSharedValue<string | null>(null);
+  const inheritedNavigation = useContext(ScreenNavigationContext);
+  const navigation = useMemo(() => navigationScope === 'inherit' && inheritedNavigation ? inheritedNavigation : { collapseProgress: localProgress, collapseTarget: localTarget, activeScrollerId: localScroller }, [navigationScope, inheritedNavigation, localProgress, localTarget, localScroller]);
+  const { collapseProgress, collapseTarget, activeScrollerId } = navigation;
+  const insets = useContext(SafeAreaInsetsContext);
+  const [measuredTop, setTop] = useState<number | null>(null);
+  const [measuredBottom, setBottom] = useState<number | null>(null);
+  const top = measuredTop ?? headerHeight ?? (56 + (Platform.OS === 'web' ? 0 : insets?.top ?? 0));
+  const bottom = measuredBottom ?? bottomBarHeight ?? (58 + windowEdgeGap(insets?.bottom ?? 0));
+  const [keyboardVisible, setKeyboardVisible] = useState(false);
+  useEffect(() => {
+    if (Platform.OS === 'web') return;
+    const show = Keyboard.addListener('keyboardDidShow', () => setKeyboardVisible(true));
+    const hide = Keyboard.addListener('keyboardDidHide', () => setKeyboardVisible(false));
+    return () => { show.remove(); hide.remove(); };
+  }, []);
+  const hasBottom = !keyboardVisible && Boolean(bottomBar || primaryAction);
+  const value = useMemo(() => ({ active, scrollY, collapseProgress, collapseTarget, activeScrollerId,
+    topInset: header ? top : 0, bottomInset: hasBottom ? bottom + contentClearance : navigationScope === 'inherit' ? inheritedNavigation?.bottomInset ?? contentClearance : contentClearance,
+  }), [active, scrollY, collapseProgress, collapseTarget, activeScrollerId, header, hasBottom, top, bottom, contentClearance, navigationScope, inheritedNavigation?.bottomInset]);
+  const document = documentScroll && Platform.OS === 'web';
+  const headerNode = header ? <View testID={testID ? `${testID}-header` : undefined} pointerEvents="box-none" onLayout={event => setTop(event.nativeEvent.layout.height)} style={document ? { position: WEB_POSITION_STICKY, top: 0, zIndex: Z_INDEX.floating, marginBottom: -top } : { position: 'absolute', top: 0, left: 0, right: 0 }}>{header}</View> : null;
+  const bottomNode = hasBottom ? <View testID={testID ? `${testID}-bottom` : undefined} pointerEvents="box-none" onLayout={event => setBottom(event.nativeEvent.layout.height)} style={document ? { position: WEB_POSITION_STICKY, bottom: 0, zIndex: Z_INDEX.floating, marginTop: -bottom } : { position: 'absolute', bottom: 0, left: 0, right: 0 }}>{bottomBar ?? <View pointerEvents="box-none" style={{ alignItems: 'flex-end', paddingHorizontal: 16, paddingBottom: windowEdgeGap(insets?.bottom ?? 0), minHeight: bottom }}>{primaryAction}</View>}</View> : null;
+  return (
+    <ScreenNavigationContext.Provider value={navigationScope === 'inherit' ? inheritedNavigation : { ...navigation, bottomInset: value.bottomInset }}>
+    <ScreenContext.Provider value={value}>
+      <View {...props} testID={testID} style={[{ flex: 1, minHeight: 0, position: 'relative', backgroundColor: colors.background }, style]}>
+        {document ? headerNode : null}
+        {children}
+        {document ? null : headerNode}
+        {bottomNode}
+      </View>
+    </ScreenContext.Provider>
+    </ScreenNavigationContext.Provider>
+  );
+}

package/src/screen/ScreenScrollView.tsx

@@ -0,0 +1,11 @@
+import React, { forwardRef } from 'react';
+import { ScrollView, StyleSheet } from 'react-native';
+import Animated from 'react-native-reanimated';
+import { useScreenScroll } from './use-screen-scroll';
+import type { ScreenScrollViewProps } from './types';
+
+export const ScreenScrollView = forwardRef<ScrollView, ScreenScrollViewProps>(function ScreenScrollView({ active, handler, restoration, contentContainerStyle, children, style, ...props }, ref) {
+  const scroll = useScreenScroll({ active, handler, restoration });
+  const contentStyle = StyleSheet.flatten(contentContainerStyle);
+  return <Animated.ScrollView {...props} ref={ref} style={[style, restoration?.restorePending ? { opacity: 0 } : null]} onScroll={scroll.onScroll} scrollEventThrottle={16} contentInsetAdjustmentBehavior="never" automaticallyAdjustContentInsets={false} contentContainerStyle={[contentContainerStyle, { paddingTop: scroll.contentInsets.top + Number(contentStyle?.paddingTop ?? contentStyle?.paddingVertical ?? contentStyle?.padding ?? 0), paddingBottom: scroll.contentInsets.bottom + Number(contentStyle?.paddingBottom ?? contentStyle?.paddingVertical ?? contentStyle?.padding ?? 0) }]}>{children}</Animated.ScrollView>;
+});

package/src/screen/context.ts

@@ -0,0 +1,23 @@
+import { createContext, useContext } from 'react';
+import type { SharedValue } from 'react-native-reanimated';
+
+export interface ScreenContextValue {
+  active: boolean;
+  scrollY: SharedValue<number>;
+  collapseProgress: SharedValue<number>;
+  collapseTarget: SharedValue<number>;
+  activeScrollerId: SharedValue<string | null>;
+  topInset: number;
+  bottomInset: number;
+}
+
+export type ScreenNavigationState = Pick<ScreenContextValue, 'collapseProgress' | 'collapseTarget' | 'activeScrollerId'> & { bottomInset?: number };
+export const ScreenNavigationContext = createContext<ScreenNavigationState | null>(null);
+
+export const ScreenContext = createContext<ScreenContextValue | null>(null);
+export function useScreenContext() { return useContext(ScreenContext); }
+export function useScreen(): ScreenContextValue {
+  const screen = useScreenContext();
+  if (!screen) throw new Error('Screen content must be rendered inside <Screen>.');
+  return screen;
+}

package/src/screen/index.ts

@@ -0,0 +1,6 @@
+export { Screen } from './Screen';
+export { ScreenScrollView } from './ScreenScrollView';
+export { useScreen } from './context';
+export { useScreenScroll } from './use-screen-scroll';
+export type { ScreenProps, ScreenScrollOptions, ScreenScrollViewProps } from './types';
+export { useScreenWindowScroll } from './use-screen-window-scroll';

package/src/screen/types.ts

@@ -0,0 +1,32 @@
+import type { ReactNode } from 'react';
+import type { ScrollViewProps, ViewProps } from 'react-native';
+import type { ScrollRestorationBinding } from '../scroll/types';
+import type { ScrollHandlerProcessed } from 'react-native-reanimated';
+
+export interface ScreenProps extends ViewProps {
+  header?: ReactNode;
+  /** Disable all descendant scroll writers when a navigator retains this screen. */
+  active?: boolean;
+  /** inherit shell navigation motion; shared establishes a shell; isolated resets it for a modal. */
+  navigationScope?: 'inherit' | 'shared' | 'isolated';
+  /** Web document scroller: keep chrome sticky inside this column. */
+  documentScroll?: boolean;
+  bottomBar?: ReactNode;
+  /** Standalone action; with navigation use BottomBar.action instead. */
+  primaryAction?: ReactNode;
+  /** Initial footprint before layout; include any safe area in custom values. */
+  headerHeight?: number;
+  bottomBarHeight?: number;
+  /** Extra visual clearance beyond the measured bottom chrome. */
+  contentClearance?: number;
+}
+
+export interface ScreenScrollOptions {
+  /** Only the focused screen/list may drive chrome. */
+  active?: boolean;
+  /** Existing restoration binding for this same scroll ref. */
+  restoration?: ScrollRestorationBinding;
+  handler?: ScrollHandlerProcessed | null;
+}
+
+export interface ScreenScrollViewProps extends Omit<ScrollViewProps, 'onScroll'>, ScreenScrollOptions {}

package/src/screen/use-screen-scroll.ts

@@ -0,0 +1,38 @@
+import type { NativeScrollEvent, NativeSyntheticEvent } from 'react-native';
+import { useCallback, useEffect, useId } from 'react';
+import { runOnJS, useAnimatedScrollHandler, useComposedEventHandler, useReducedMotion, useSharedValue, withSpring } from 'react-native-reanimated';
+import { useScreen } from './context';
+import type { ScreenScrollOptions } from './types';
+
+/** Bind an animated ScrollView or virtualized list without moving frame work to JS. */
+export function useScreenScroll({ active: requestedActive = true, handler = null, restoration }: ScreenScrollOptions = {}) {
+  const screen = useScreen();
+  const active = requestedActive && screen.active;
+  const restoring = restoration?.restorePending ?? false;
+  const id = useId();
+  const previousY = useSharedValue(0);
+  const reducedMotion = useReducedMotion();
+  useEffect(() => {
+    if (!active) return;
+    screen.activeScrollerId.value = id;
+    return () => { if (screen.activeScrollerId.value === id) screen.activeScrollerId.value = null; };
+  }, [active, id, screen.activeScrollerId]);
+  const record = useCallback((event: NativeScrollEvent) => restoration?.onScroll({ nativeEvent: event } as NativeSyntheticEvent<NativeScrollEvent>), [restoration?.onScroll]);
+  const hasRestoration = restoration != null;
+  const ownHandler = useAnimatedScrollHandler({ onScroll: event => {
+    if (!active || screen.activeScrollerId.value !== id) return;
+    if (hasRestoration) runOnJS(record)(event);
+    const y = Math.min(Math.max(0, event.contentOffset.y), Math.max(0, event.contentSize.height - event.layoutMeasurement.height));
+    const delta = y - previousY.value;
+    previousY.value = y;
+    screen.scrollY.value = y;
+    if (restoring) return;
+    const target = y < 24 ? 0 : delta > 3 ? 1 : delta < -3 ? 0 : screen.collapseTarget.value;
+    if (target !== screen.collapseTarget.value) {
+      screen.collapseTarget.value = target;
+      screen.collapseProgress.value = reducedMotion ? target : withSpring(target, { duration: 380, dampingRatio: 1 });
+    }
+  } }, [screen, active, id, previousY, reducedMotion, hasRestoration, record, restoring]);
+  const onScroll = useComposedEventHandler([ownHandler, handler]);
+  return { onScroll, contentInsets: { top: screen.topInset, bottom: screen.bottomInset }, scrollY: screen.scrollY, collapseProgress: screen.collapseProgress };
+}

package/src/screen/use-screen-window-scroll.ts

@@ -0,0 +1,34 @@
+import { useEffect } from 'react';
+import { useReducedMotion, withSpring } from 'react-native-reanimated';
+import { useScreen } from './context';
+import { useScreenScroll } from './use-screen-scroll';
+import type { ScreenScrollOptions } from './types';
+
+/** Window-scrolling counterpart for document virtualizers; never creates a nested scroller. */
+export function useScreenWindowScroll(options: ScreenScrollOptions = {}) {
+  const binding = useScreenScroll(options);
+  const screen = useScreen();
+  const reducedMotion = useReducedMotion();
+  useEffect(() => {
+    if (!screen.active || options.active === false || typeof window === 'undefined') return;
+    const owner = screen.activeScrollerId.value;
+    let previous = window.scrollY;
+    const update = () => {
+      if (screen.activeScrollerId.value !== owner) return;
+      const y = Math.max(0, window.scrollY);
+      const delta = y - previous;
+      previous = y;
+      screen.scrollY.value = y;
+      if (options.restoration?.restorePending) return;
+      const target = y < 24 ? 0 : delta > 3 ? 1 : delta < -3 ? 0 : screen.collapseTarget.value;
+      if (target !== screen.collapseTarget.value) {
+        screen.collapseTarget.value = target;
+        screen.collapseProgress.value = reducedMotion ? target : withSpring(target, { duration: 380, dampingRatio: 1 });
+      }
+    };
+    screen.scrollY.value = previous;
+    window.addEventListener('scroll', update, { passive: true });
+    return () => window.removeEventListener('scroll', update);
+  }, [screen, options.active, options.restoration?.restorePending, reducedMotion]);
+  return binding;
+}

package/src/segmented-control/SegmentedControl.tsx

@@ -1,3 +1,5 @@
+import { normalizeBloomSize } from '../appearance/legacy';
+import { useBloomAppearance, type BloomSize } from '../appearance';
 import {
   createContext,
   useCallback,
@@ -8,6 +10,7 @@ import {
   useState,
 } from 'react';
 import {
+  type GestureResponderEvent,
   Platform,
   Pressable,
   type PressableProps,
@@ -16,7 +19,8 @@ import {
   View,
   type ViewStyle,
 } from 'react-native';
-import Animated, { Easing, LinearTransition } from 'react-native-reanimated';
+import Animated, { Easing, ReduceMotion, runOnJS, useAnimatedStyle, useSharedValue, withTiming, type SharedValue } from 'react-native-reanimated';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
@@ -30,8 +34,7 @@ import { mixColor, resolveButtonRamps } from '../button/shared';
 import { useFieldMembership } from '../field/membership';
 
 /**
- * A segmented control. Colours come from Bloom's theme through
- * `button/shared.ts` ramps.
+ * A segmented control using Bloom's canonical surface and text roles.
  *
  *              small    medium   large
  *   segment h  24       28       36
@@ -39,11 +42,11 @@ import { useFieldMembership } from '../field/membership';
  *   text       body-2   body     body     (-medium selected, -regular not)
  *   control h  32       36       44       (4px track padding, 2px gap)
  *
- *   track      neutral-100 (dark: neutral-925)
- *   thumb      surface (dark: neutral-800), shadow-2xs, slides under the
+ *   track      backgroundSecondary
+ *   thumb      card, shadow-2xs, slides under the
  *              selected segment over 200ms `ease`
  *   selected   medium weight, primary text
- *   unselected regular weight, neutral-500; hover → primary text (200ms)
+ *   unselected regular weight, textSecondary; hover → primary text (200ms)
  *   disabled   50% opacity
  *   focus      2px accent ring on the segment
  *
@@ -53,14 +56,15 @@ import { useFieldMembership } from '../field/membership';
  * segment reads through its text weight and colour alone.
  */
 
-type SegmentedControlSize = 'small' | 'medium' | 'large';
+type SegmentedControlSize = BloomSize | 'small' | 'medium' | 'large';
 type SegmentedControlVariant = 'solid' | 'plain';
 
 const GEOMETRY = {
-  small: { height: 24, paddingHorizontal: 8, type: 'body-2' },
-  medium: { height: 28, paddingHorizontal: 10, type: 'body' },
-  large: { height: 36, paddingHorizontal: 12, type: 'body' },
-} as const satisfies Record<SegmentedControlSize, { height: number; paddingHorizontal: number; type: TypeScaleFamily }>;
+  xs: { height: 20, paddingHorizontal: 6, type: 'caption-1' },
+  sm: { height: 24, paddingHorizontal: 8, type: 'body-2' },
+  md: { height: 28, paddingHorizontal: 10, type: 'body' },
+  lg: { height: 36, paddingHorizontal: 12, type: 'body' },
+} as const satisfies Record<BloomSize, { height: number; paddingHorizontal: number; type: TypeScaleFamily }>;
 
 /** Track padding. */
 const TRACK_PADDING = 4;
@@ -81,25 +85,14 @@ interface SegmentedPalette {
 }
 
 function resolveSegmentedPalette(theme: Theme): SegmentedPalette {
-  const { accent, neutral: n } = resolveButtonRamps(theme);
-  return theme.isDark
-    ? {
-        // `neutral-925` (#121212), between the 900 and 950 stops.
-        track: mixColor(n[900], n[950], 0.4),
-        thumb: n[800],
-        thumbShadow: '0 1px 0 0 rgba(0, 0, 0, 0.16)',
-        selectedText: theme.colors.text,
-        text: n[500],
-        ring: accent[500],
-      }
-    : {
-        track: n[100],
-        thumb: theme.colors.card,
-        thumbShadow: '0 1px 0 0 rgba(0, 0, 0, 0.05)',
-        selectedText: theme.colors.text,
-        text: n[500],
-        ring: accent[500],
-      };
+  return {
+    track: theme.colors.backgroundSecondary,
+    thumb: theme.colors.card,
+    thumbShadow: theme.isDark ? '0 1px 0 0 rgba(0, 0, 0, 0.16)' : '0 1px 0 0 rgba(0, 0, 0, 0.05)',
+    selectedText: theme.colors.text,
+    text: theme.colors.textSecondary,
+    ring: theme.colors.primary,
+  };
 }
 
 // ---------------------------------------------------------------------------
@@ -132,9 +125,14 @@ ${SEGMENT}${NOT_DISABLED}:focus-visible {
 }`,
 });
 
+type SegmentPosition = { value: string; x: number; width: number; disabled: boolean };
+
 const InternalContext = createContext<{
+  register: (segment: SegmentPosition) => () => void;
+  suppressPress: () => boolean;
+  allowKeyboardPress: () => void;
   type: 'tabs' | 'radio';
-  size: SegmentedControlSize;
+  size: BloomSize;
   variant: SegmentedControlVariant;
   palette: SegmentedPalette;
   /** The group's disabled state. An item ORs it with its own. */
@@ -153,7 +151,7 @@ const InternalContext = createContext<{
  *
  * @example
  * ```tsx
- * <SegmentedControl label="Example" type="radio" value={value} onChange={setValue}>
+ * <SegmentedControl label="Example" type="radio" value={value} onValueChange={setValue}>
  *   <SegmentedControlItem value="one">
  *     <SegmentedControlItemText>One</SegmentedControlItemText>
  *   </SegmentedControlItem>
@@ -166,9 +164,10 @@ const InternalContext = createContext<{
 export function SegmentedControl<T extends string>({
   label,
   type = 'radio',
-  size = 'medium',
+  size: sizeProp,
   variant = 'solid',
   value,
+  onValueChange: onValueChangeProp,
   onChange,
   children,
   style,
@@ -189,7 +188,8 @@ export function SegmentedControl<T extends string>({
   /** `solid` (default) draws the track and sliding thumb; `plain` draws neither. */
   variant?: SegmentedControlVariant;
   value: T;
-  onChange: (value: T) => void;
+  onValueChange?: (value: T) => void;
+  onChange?: (value: T) => void;
   children: React.ReactNode;
   style?: StyleProp<ViewStyle>;
   /**
@@ -205,7 +205,9 @@ export function SegmentedControl<T extends string>({
   nativeID?: string;
   testID?: string;
 }) {
+  const onValueChange = onValueChangeProp ?? onChange ?? (() => {});
   const theme = useTheme();
+  const {size} = useBloomAppearance({size: normalizeBloomSize(sizeProp)}, {size: 'md', tone: 'neutral'});
   useInteractiveWebCss(STYLE_ID, SEGMENTED_CSS);
   // The group is ONE control made of several segments, so a `Field` names the
   // group and disables all of it. `label` is the group's name rather than
@@ -220,8 +222,79 @@ export function SegmentedControl<T extends string>({
     x: number;
   } | null>(null);
 
+  const segments = useSharedValue<SegmentPosition[]>([]);
+  const dragging = useSharedValue(false);
+  const originEnabled = useSharedValue(false);
+  const thumbX = useSharedValue(0);
+  const thumbWidth = useSharedValue(0);
+  const candidate = useSharedValue('');
+  const suppressUntil = useRef(0);
+  const [release, setRelease] = useState(0);
+  const register = useCallback((segment: SegmentPosition) => {
+    segments.value = [...segments.value.filter(item => item.value !== segment.value), segment].sort((a, b) => a.x - b.x);
+    return () => { segments.value = segments.value.filter(item => item.value !== segment.value); };
+  }, [segments]);
+  useLayoutEffect(() => {
+    if (!selectedPosition || dragging.value) return;
+    const config = { duration: TRANSITION_MS, easing: Easing.bezier(0.25, 0.1, 0.25, 1), reduceMotion: ReduceMotion.System };
+    thumbX.value = withTiming(selectedPosition.x, config);
+    thumbWidth.value = withTiming(selectedPosition.width, config);
+  }, [selectedPosition, release, dragging, thumbX, thumbWidth]);
+  const markDrag = useCallback(() => { suppressUntil.current = Date.now() + 500; }, []);
+  const finishDrag = useCallback((next: string, commit: boolean) => {
+    suppressUntil.current = Date.now() + 250;
+    if (commit && next !== value && segments.value.some(item => item.value === next && !item.disabled)) onValueChange(next as T);
+    // Also settle when a controlled parent rejects the proposed value.
+    setRelease(count => count + 1);
+  }, [onValueChange, segments, value]);
+  const gesture = useMemo(() => Gesture.Pan()
+    .activeOffsetX([-6, 6])
+    .failOffsetY([-14, 14])
+    .onBegin(event => {
+      const origin = segments.value.find(item => event.x >= item.x && event.x <= item.x + item.width);
+      originEnabled.value = !!origin && !origin.disabled;
+    })
+    .onStart(() => {
+      if (!originEnabled.value) return;
+      dragging.value = true;
+      candidate.value = '';
+      runOnJS(markDrag)();
+    })
+    .onUpdate(event => {
+      if (!dragging.value) return;
+      const enabled = segments.value.filter(item => !item.disabled);
+      if (!enabled.length) return;
+      let left = enabled[0]!;
+      let right = enabled[enabled.length - 1]!;
+      for (let index = 0; index < enabled.length; index++) {
+        const item = enabled[index]!;
+        const center = item.x + item.width / 2;
+        if (center <= event.x) left = item;
+        if (center >= event.x) { right = item; break; }
+      }
+      const start = left.x + left.width / 2;
+      const end = right.x + right.width / 2;
+      const progress = end === start ? 0 : Math.max(0, Math.min(1, (event.x - start) / (end - start)));
+      thumbX.value = left.x + (right.x - left.x) * progress;
+      thumbWidth.value = left.width + (right.width - left.width) * progress;
+      candidate.value = progress < 0.5 ? left.value : right.value;
+    })
+    .onEnd((_event, success) => {
+      if (!dragging.value) return;
+      dragging.value = false;
+      runOnJS(finishDrag)(candidate.value, success);
+    })
+    .onFinalize(() => {
+      if (!dragging.value) return;
+      dragging.value = false;
+      runOnJS(finishDrag)('', false);
+    }), [segments, originEnabled, dragging, candidate, thumbX, thumbWidth, markDrag, finishDrag]);
+
   const contextValue = useMemo(() => {
     return {
+      register,
+      suppressPress: () => dragging.value || Date.now() < suppressUntil.current,
+      allowKeyboardPress: () => { suppressUntil.current = 0; },
       type,
       size,
       variant,
@@ -233,8 +306,8 @@ export function SegmentedControl<T extends string>({
         val: string,
         position: { width: number; x: number } | null,
       ) => {
-        onChange(val as T);
-        if (position) setSelectedPosition(position);
+        onValueChange(val as T);
+        // Selection geometry follows the controlled value's item layout effect.
       },
       updatePosition: (position: { width: number; x: number }) => {
         setSelectedPosition(currPos => {
@@ -249,7 +322,7 @@ export function SegmentedControl<T extends string>({
         });
       },
     };
-  }, [value, selectedPosition, setSelectedPosition, onChange, type, size, variant, palette, isDisabled]);
+  }, [value, selectedPosition, setSelectedPosition, onValueChange, type, size, variant, palette, register, dragging, isDisabled]);
 
   const solid = variant === 'solid';
   const padding = solid ? TRACK_PADDING : 0;
@@ -260,6 +333,7 @@ export function SegmentedControl<T extends string>({
   const height = GEOMETRY[size].height + padding * 2;
 
   return (
+    <GestureDetector gesture={gesture} touchAction="pan-y">
     <View
       testID={testID}
       nativeID={field.nativeID}
@@ -287,8 +361,8 @@ export function SegmentedControl<T extends string>({
       role={type === 'tabs' ? 'tablist' : 'radiogroup'}>
       {solid && selectedPosition !== null && (
         <SegmentedThumb
-          x={selectedPosition.x}
-          width={selectedPosition.width}
+          x={thumbX}
+          width={thumbWidth}
           palette={palette}
         />
       )}
@@ -296,6 +370,7 @@ export function SegmentedControl<T extends string>({
         {children}
       </InternalContext.Provider>
     </View>
+    </GestureDetector>
   );
 }
 
@@ -357,16 +432,17 @@ export function SegmentedControlItem({
     }
   }, [needsUpdate]);
 
-  // The group's `disabled` is a constraint, so it is OR-ed with the item's own
-  // — a segment cannot re-enable itself inside a disabled group, and a `Field
-  // disabled` reaches every segment through the group.
   const isDisabled = ctx.disabled || disabled === true;
 
-  const onPress = useCallback(() => {
-    if (isDisabled) return;
+  useLayoutEffect(() => {
+    if (position) return ctx.register({ value, ...position, disabled: isDisabled });
+  }, [ctx.register, value, position, isDisabled]);
+
+  const onPress = useCallback((event?: GestureResponderEvent) => {
+    if (isDisabled || ((event?.nativeEvent as { detail?: number } | undefined)?.detail !== 0 && ctx.suppressPress())) return;
     ctx.onSelectValue(value, position);
     onPressProp?.();
-  }, [isDisabled, ctx, value, position, onPressProp]);
+  }, [ctx, value, position, onPressProp, isDisabled]);
 
   // We render the segment as a flat `Pressable` (not Bloom's `Button`)
   // for two reasons:
@@ -407,12 +483,12 @@ export function SegmentedControlItem({
           width: evt.nativeEvent.layout.width,
         };
         if (!ctx.selectedPosition && active) {
-          ctx.onSelectValue(value, measuredPosition);
+          ctx.updatePosition(measuredPosition);
         }
         setPosition(measuredPosition);
       }}>
       <Pressable
-        {...(IS_WEB ? ({ dataSet: { bloomSegmentedItem: '' } } as Record<string, unknown>) : {})}
+        {...(IS_WEB ? ({ dataSet: { bloomSegmentedItem: '' }, onKeyDown: ctx.allowKeyboardPress } as Record<string, unknown>) : {})}
         onPress={onPress}
         onHoverIn={onHoverIn}
         onHoverOut={onHoverOut}
@@ -485,8 +561,8 @@ function SegmentedThumb({
   width,
   palette,
 }: {
-  x: number;
-  width: number;
+  x: SharedValue<number>;
+  width: SharedValue<number>;
   palette: SegmentedPalette;
 }) {
   const base: ViewStyle = {
@@ -494,28 +570,14 @@ function SegmentedThumb({
     top: TRACK_PADDING,
     bottom: TRACK_PADDING,
     left: 0,
-    width,
     borderRadius: borderRadius.full,
     backgroundColor: palette.thumb,
     boxShadow: palette.thumbShadow,
   };
 
-  if (IS_WEB) {
-    const webStyle: WebCssStyle = {
-      ...base,
-      transform: [{ translateX: x }],
-      transitionProperty: 'transform, width',
-      transitionDuration: `${TRANSITION_MS}ms`,
-      transitionTimingFunction: 'ease',
-    };
-    return <View pointerEvents="none" style={webStyle} />;
-  }
-
-  return (
-    <Animated.View
-      pointerEvents="none"
-      layout={LinearTransition.duration(TRANSITION_MS).easing(Easing.bezier(0.25, 0.1, 0.25, 1))}
-      style={[base, { left: x }]}
-    />
-  );
+  const animatedStyle = useAnimatedStyle(() => ({
+    width: width.value,
+    transform: [{ translateX: x.value }],
+  }), [x, width]);
+  return <Animated.View pointerEvents="none" style={[base, animatedStyle]} />;
 }

package/src/select/Select.tsx

@@ -1,3 +1,4 @@
+import { useBloomAppearance } from '../appearance';
 import React, {
   createContext,
   useCallback,
@@ -88,7 +89,9 @@ function useSelectContext(): SelectContextValue {
 // Select
 // ---------------------------------------------------------------------------
 
-export function Select({ children, value, onValueChange, disabled, size = 'md' }: SelectProps) {
+export function Select({ children, value, onValueChange, disabled, size: sizeProp }: SelectProps) {
+  const {size: inheritedSize} = useBloomAppearance({size: sizeProp}, {size: 'md', tone: 'neutral'});
+  const size = inheritedSize === 'xs' || inheritedSize === 'sm' ? 'sm' : 'md';
   const control = useDialogControl();
   const valueStoreState = useState<unknown>(undefined);
 

package/src/select/Select.web.tsx

@@ -1,3 +1,4 @@
+import { useBloomAppearance } from '../appearance';
 import React, {
   createContext,
   useContext,
@@ -159,7 +160,9 @@ function useSelectContext(): SelectContextValue {
 // Select
 // ---------------------------------------------------------------------------
 
-export function Select({ children, value, onValueChange, disabled, size = 'md' }: SelectProps) {
+export function Select({ children, value, onValueChange, disabled, size: sizeProp }: SelectProps) {
+  const {size: inheritedSize} = useBloomAppearance({size: sizeProp}, {size: 'md', tone: 'neutral'});
+  const size = inheritedSize === 'xs' || inheritedSize === 'sm' ? 'sm' : 'md';
   const [isOpen, setIsOpen] = useState(false);
   const triggerRef = useRef<View | null>(null);
   const valueStoreState = useState<unknown>(undefined);

package/src/settings-modal/SettingsFields.tsx

@@ -59,12 +59,12 @@ export function SettingsTextField({
 
   return (
     <View style={styles.field}>
-      <TextField size="small" disabled={disabled}>
+      <TextField size="sm" disabled={disabled}>
         {icon ? <TextFieldIcon icon={icon} /> : null}
         <TextFieldInput
           label={label}
           value={draft}
-          onChangeText={setDraft}
+          onValueChange={setDraft}
           onSubmitEditing={commit}
           onBlur={commit}
           placeholder={placeholder}

package/src/settings-modal/SettingsStorage.tsx

@@ -488,7 +488,7 @@ export function SettingsStoragePage({
                   label="Search files"
                   placeholder="Search"
                   value={query}
-                  onChangeText={(text) => {
+                  onValueChange={(text) => {
                     setQuery(text);
                     setPage(1);
                   }}
@@ -564,7 +564,7 @@ export function SettingsStoragePage({
                         </Text>
                       </View>
                       <View style={[styles.cell, styles.sizeCol]}>
-                        <Chip size="large" style={{ backgroundColor: palette.secondary }} textStyle={{ color: palette.text }}>
+                        <Chip size="lg" style={{ backgroundColor: palette.secondary }} textStyle={{ color: palette.text }}>
                           {file.sizeLabel ?? formatFileSize(file.size)}
                         </Chip>
                       </View>
@@ -572,14 +572,7 @@ export function SettingsStoragePage({
                   )}
                   <View style={[styles.cell, compact ? null : styles.actionsCol, styles.actions]}>
                     <HoverTooltip label="Delete file">
-                      <Button
-                        variant="secondary"
-                        size="small"
-                        iconOnly
-                        leadingIcon={RiDeleteBin6Line}
-                        accessibilityLabel={`Delete ${file.name}`}
-                        onPress={() => deleteFile(file.id)}
-                      />
+                      <Button size="sm" icon={RiDeleteBin6Line} accessibilityLabel={`Delete ${file.name}`} onPress={() => deleteFile(file.id)} appearance="plain" tone="neutral" />
                     </HoverTooltip>
                     <RowMoreMenu file={file} actions={fileActions} onAction={onFileAction} />
                   </View>