@oxy.so/bloom 4.24.1 → 4.25.0

package/src/ai-chat/AiChatContainer.tsx

@@ -537,6 +537,16 @@ const ScrollThread = forwardRef<AiChatThreadHandle, AiChatThreadProps>(function
   const contentHeight = useRef(0);
   const offset = useRef(0);
   const viewport = useRef(0);
+  /**
+   * A scroll to the end is on its way and has not landed. `offset` is only
+   * what the LAST scroll event said, so two growths between a `scrollToEnd`
+   * and the event it causes measured the reader against the old offset, read
+   * them as far from the bottom and dropped the follow for good (Android,
+   * streaming). While this holds, growth follows whatever `offset` says; it
+   * clears when a scroll event lands at the end or moves UP — only a reader
+   * (or a host) scrolls up, the follow never does.
+   */
+  const following = useRef(false);
   /** An `onStartReached` is out and its page has not landed yet. */
   const pageOut = useRef(false);
   /** The reader has left the top zone, so the next approach may fire again. */
@@ -560,7 +570,10 @@ const ScrollThread = forwardRef<AiChatThreadHandle, AiChatThreadProps>(function
   useImperativeHandle(
     ref,
     (): AiChatThreadHandle => ({
-      scrollToEnd: (options) => scrollRef.current?.scrollToEnd({ animated: options?.animated ?? true }),
+      scrollToEnd: (options) => {
+        following.current = true;
+        scrollRef.current?.scrollToEnd({ animated: options?.animated ?? true });
+      },
       scrollToOffset: ({ offset: y, animated = false }) => scrollRef.current?.scrollTo({ y, animated }),
       getScrollView: () => scrollRef.current,
     }),
@@ -577,9 +590,13 @@ const ScrollThread = forwardRef<AiChatThreadHandle, AiChatThreadProps>(function
   const handleScroll = useCallback(
     (event: NativeSyntheticEvent<NativeScrollEvent>) => {
       const { contentOffset, layoutMeasurement, contentSize } = event.nativeEvent;
+      const movedUp = contentOffset.y < offset.current - 0.5;
       offset.current = contentOffset.y;
       viewport.current = layoutMeasurement.height;
       if (contentSize?.height) contentHeight.current = contentSize.height;
+      if (movedUp || contentHeight.current - contentOffset.y - layoutMeasurement.height <= EDGE_THRESHOLD) {
+        following.current = false;
+      }
       report();
       if (onStartReached) {
         if (contentOffset.y <= onStartReachedThreshold) {
@@ -624,7 +641,8 @@ const ScrollThread = forwardRef<AiChatThreadHandle, AiChatThreadProps>(function
       const chromeShift = shift.top + shift.bottom;
       if (chromeShift !== 0 && Math.abs(height - previous - chromeShift) < 1) {
         const fromBottom = previous - offset.current - viewport.current;
-        if (fromBottom <= EDGE_THRESHOLD) {
+        if (following.current || fromBottom <= EDGE_THRESHOLD) {
+          following.current = true;
           scrollRef.current?.scrollToEnd({ animated: false });
         } else if (offset.current > 0 && shift.top !== 0) {
           scrollRef.current?.scrollTo({ y: offset.current + shift.top, animated: false });
@@ -642,15 +660,23 @@ const ScrollThread = forwardRef<AiChatThreadHandle, AiChatThreadProps>(function
       pageOut.current = false;
 
       if (!autoFollow) return;
-      if (followThreshold !== undefined) {
+      if (followThreshold !== undefined && !following.current) {
         // Measured against the height BEFORE the growth: was the reader near
         // the bottom when this arrived?
         const fromBottom = previous - offset.current - viewport.current;
-        if (fromBottom > followThreshold) return;
+        if (fromBottom > followThreshold) {
+          // Staying put moves no scroll, so a host tracking the distance to
+          // the end from `onScroll` (a jump-to-latest button) would not hear
+          // that the end moved away. Tell it, as `DocumentThread` does on every
+          // growth.
+          onScroll?.(syntheticScroll(offset.current, viewport.current, height));
+          return;
+        }
       }
+      following.current = true;
       scrollRef.current?.scrollToEnd({ animated: followAnimated });
     },
-    [autoFollow, followAnimated, followThreshold, maintainStartPosition],
+    [autoFollow, followAnimated, followThreshold, maintainStartPosition, onScroll],
   );
 
   return (
@@ -682,6 +708,19 @@ const ScrollThread = forwardRef<AiChatThreadHandle, AiChatThreadProps>(function
   );
 });
 
+/** A scroll event for a position that did not change while the content did. */
+function syntheticScroll(offset: number, viewport: number, content: number): NativeSyntheticEvent<NativeScrollEvent> {
+  return {
+    nativeEvent: {
+      contentOffset: { x: 0, y: offset },
+      layoutMeasurement: { width: 0, height: viewport },
+      contentSize: { width: 0, height: content },
+      contentInset: { top: 0, left: 0, bottom: 0, right: 0 },
+      zoomScale: 1,
+    },
+  } as NativeSyntheticEvent<NativeScrollEvent>;
+}
+
 /** The window's scroll position and extent, px. */
 function readWindow() {
   const page = document.scrollingElement ?? document.documentElement;

package/src/ai-chat/use-panel-interaction.ts

@@ -1,5 +1,5 @@
 import { useEffect, useRef } from 'react';
-import { BackHandler, Platform, type View } from 'react-native';
+import { BackHandler, Keyboard, Platform, type View } from 'react-native';
 import { useAccessibilityFocus } from '../hooks/use-accessibility-focus';
 import { listenForEscape, tabbablesWithin, wrapTab } from '../overlay/modal-keyboard';
 import { hasActiveOverlays } from '../overlay/stack';
@@ -10,7 +10,11 @@ import { hasActiveOverlays } from '../overlay/stack';
  *
  *   open    Escape (web) and back (Android) close it
  *   modal   it covers the workspace: focus moves in on open, Tab is kept
- *           inside, and focus goes back to the opener on close
+ *           inside, and focus goes back to the opener on close (web); on
+ *           native the keyboard goes down as it opens — a composer that had
+ *           the focus (say, regained after a sheet closed) otherwise kept the
+ *           keyboard up under the drawer (Android 16). Nothing refocuses the
+ *           composer on close.
  *
  * Any portaled overlay above (a dialog, a menu) takes all of it first.
  */
@@ -22,6 +26,7 @@ export function usePanelInteraction(open: boolean, modal: boolean, close: () =>
   useEffect(() => {
     if (!open) return;
     if (Platform.OS !== 'web') {
+      if (modal) Keyboard?.dismiss?.();
       const subscription = BackHandler?.addEventListener('hardwareBackPress', () => {
         if (hasActiveOverlays()) return false;
         closeRef.current();

package/src/bottom-sheet/BottomSheetBase.tsx

@@ -34,6 +34,7 @@ import { EDGE_GAP, windowEdgeGap } from '../layout/edge';
 import { Backdrop, BACKDROP_DIM_OPACITY } from '../overlay';
 import { ModalKeyboard } from '../overlay/ModalKeyboard';
 import { useTheme } from '../theme/use-theme';
+import { SheetKeyboardProvider } from './context';
 import type { BottomSheetRef, BottomSheetProps, BottomSheetShellProps, BottomSheetBaseProps } from './types';
 
 /** Hook that returns current screen dimensions and updates on rotation/resize. */
@@ -659,7 +660,9 @@ export const BottomSheetBase = forwardRef((props: BottomSheetBaseProps, ref: Rea
     // (`layout/screen-scope.tsx`).
     const surfaceChildren = (
         <SurfaceLevelProvider level={0} fill={colors.background}>
-            <ScreenScope>{children}</ScreenScope>
+            <SheetKeyboardProvider value={keyboardHeight}>
+                <ScreenScope>{children}</ScreenScope>
+            </SheetKeyboardProvider>
         </SurfaceLevelProvider>
     );
 

package/src/bottom-sheet/context.ts

@@ -0,0 +1,23 @@
+import { createContext, useContext } from 'react';
+import { useSharedValue, type SharedValue } from 'react-native-reanimated';
+
+/**
+ * The open keyboard's height under a `BottomSheet`, for content that owns a
+ * bottom inset of its own. Native only: the sheet's shell writes it, web leaves
+ * it at 0 (the browser owns keyboard layout).
+ *
+ * `DialogBottomSheet` reads it to fold its safe-area spacer while the keyboard
+ * is up: the keyboard covers the gesture bar the spacer clears, so keeping it
+ * floated the sheet's buttons a bar's height above the keyboard (Android 16).
+ *
+ * Internal: not in the family barrel.
+ */
+const SheetKeyboardContext = createContext<SharedValue<number> | null>(null);
+
+export const SheetKeyboardProvider = SheetKeyboardContext.Provider;
+
+/** The sheet's keyboard height, or a constant 0 outside a sheet. */
+export function useSheetKeyboardHeight(): SharedValue<number> {
+  const none = useSharedValue(0);
+  return useContext(SheetKeyboardContext) ?? none;
+}

package/src/composer-panel/ComposerPanelBase.tsx

@@ -1,10 +1,10 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
+  Text as RNText,
   TextInput,
   View,
   type LayoutChangeEvent,
   type NativeSyntheticEvent,
-  type TextInputContentSizeChangeEventData,
   type TextInputKeyPressEventData,
 } from 'react-native';
 import Animated, {
@@ -177,7 +177,11 @@ export function ComposerPanelBase({
 
   // The prompt grows with its text, one 20px line at a time, up to 200 before it
   // scrolls. Web measures the textarea, collapsing it only when the draft may
-  // have got shorter (`useTextareaAutosize`); native reads the content size.
+  // have got shorter (`useTextareaAutosize`). Native lays the same text out in
+  // an invisible twin and takes ITS height: the field's own
+  // `onContentSizeChange` does not fire for a value set from outside until the
+  // field is focused (Android 16), so a question loaded to edit showed one line
+  // and a cancelled edit kept four.
   const [height, setHeight] = useState(PROMPT_LINE);
   useTextareaAutosize(fieldRef, text, {
     enabled: IS_WEB,
@@ -185,13 +189,9 @@ export function ComposerPanelBase({
     minHeight: PROMPT_LINE,
     onMeasure: (content) => setHeight(Math.min(PROMPT_MAX_HEIGHT, Math.max(PROMPT_LINE, content))),
   });
-  const onContentSizeChange = useCallback(
-    (event: NativeSyntheticEvent<TextInputContentSizeChangeEventData>) => {
-      if (IS_WEB) return;
-      setHeight(Math.min(PROMPT_MAX_HEIGHT, Math.max(PROMPT_LINE, event.nativeEvent.contentSize.height)));
-    },
-    [],
-  );
+  const onTwinLayout = useCallback((event: LayoutChangeEvent) => {
+    setHeight(Math.min(PROMPT_MAX_HEIGHT, Math.max(PROMPT_LINE, event.nativeEvent.layout.height)));
+  }, []);
 
   const submit = useCallback(() => {
     if (disabled || busy) return;
@@ -253,7 +253,6 @@ export function ComposerPanelBase({
               value={text}
               onChangeText={setText}
               onKeyPress={onKeyPress}
-              onContentSizeChange={onContentSizeChange}
               placeholder={placeholder}
               placeholderTextColor={palette.textTertiary}
               selectionColor={palette.accent500}
@@ -273,10 +272,36 @@ export function ComposerPanelBase({
                 ...(IS_WEB ? { caretColor: palette.accent500 } : null),
               }}
             />
+            {IS_WEB ? null : (
+              <RNText
+                aria-hidden
+                accessibilityElementsHidden
+                importantForAccessibility="no-hide-descendants"
+                pointerEvents="none"
+                testID={testID ? `${testID}-input-twin` : undefined}
+                onLayout={onTwinLayout}
+                style={{
+                  position: 'absolute',
+                  top: 0,
+                  left: 6,
+                  right: 6,
+                  opacity: 0,
+                  ...TYPE_SCALE['body-regular'],
+                  fontFamily: 'Inter',
+                }}>
+                {/* A trailing newline is a line of its own in the field; a
+                    Text drops it unless something follows. */}
+                {text.endsWith('\n') || text === '' ? `${text} ` : text}
+              </RNText>
+            )}
           </View>
 
           <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
-            <View style={{ minWidth: 0, flexShrink: 1, flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+            {/* The actions never give way: + and the permission chip on the
+                left, voice and send on the right keep their size, and the
+                model chip between them is what truncates (a long model name
+                once covered + and pushed voice off the card). */}
+            <View style={{ flexShrink: 0, flexDirection: 'row', alignItems: 'center', gap: 8 }}>
               {addMenu.length > 0 ? (
                 <AddMenu
                   palette={palette}
@@ -299,7 +324,7 @@ export function ComposerPanelBase({
                 />
               ) : null}
             </View>
-            <View style={{ flexShrink: 0, flexDirection: 'row', alignItems: 'center', gap: 16 }}>
+            <View style={{ minWidth: 0, flexShrink: 1, flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-end', gap: 16 }}>
               {providers && providers.length > 0 ? (
                 <ModelPickerBase
                   providers={providers}
@@ -314,7 +339,7 @@ export function ComposerPanelBase({
                   testID={testID ? `${testID}-model` : undefined}
                 />
               ) : null}
-              <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+              <View style={{ flexShrink: 0, flexDirection: 'row', alignItems: 'center', gap: 8 }}>
                 <MicButton
                   listening={isListening}
                   onToggle={() => setListening(!isListening)}

package/src/composer-panel/ComposerPopover.tsx

@@ -7,7 +7,9 @@
  * sheet is not something `BottomSheet` stacks. So each panel is a transparent
  * `Modal` holding a dismiss layer and the panel, placed against the trigger's
  * `measureInWindow` box: on the requested side when it fits, flipped when it
- * does not, clamped 8px inside the window. Nested `Modal`s stack on both
+ * does not, clamped 8px inside the window's SAFE area. The Modal draws edge to
+ * edge, so a clamp to the bare window put the effort panel under Android's
+ * gesture bar (Pixel 8a, Android 16). Nested `Modal`s stack on both
  * platforms, so the effort panel opens above the picker.
  *
  * Motion is the popover entry without the blur (no filter on native):
@@ -30,6 +32,7 @@ import Animated, {
   useSharedValue,
   withTiming,
 } from 'react-native-reanimated';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { TRANSITION_MS } from './shared';
 import type { ComposerPopoverProps } from './types';
@@ -56,6 +59,7 @@ export function ComposerPopover({
   children,
 }: ComposerPopoverProps) {
   const window = useWindowDimensions();
+  const insets = useSafeAreaInsets();
   const reducedMotion = useReducedMotion();
   const [mounted, setMounted] = useState(open);
   const [anchor, setAnchor] = useState<Box | null>(null);
@@ -112,14 +116,18 @@ export function ComposerPopover({
   let left = GUTTER;
   let top = GUTTER;
   if (anchor && size) {
-    left = Math.min(Math.max(anchor.x, GUTTER), window.width - size.width - GUTTER);
+    const minLeft = insets.left + GUTTER;
+    const maxRight = window.width - insets.right - GUTTER;
+    const minTop = insets.top + GUTTER;
+    const maxBottom = window.height - insets.bottom - GUTTER;
+    left = Math.max(minLeft, Math.min(anchor.x, maxRight - size.width));
     const above = anchor.y - sideOffset - size.height;
     const below = anchor.y + anchor.height + sideOffset;
-    const fitsAbove = above >= GUTTER;
-    const fitsBelow = below + size.height <= window.height - GUTTER;
+    const fitsAbove = above >= minTop;
+    const fitsBelow = below + size.height <= maxBottom;
     const preferAbove = side === 'top' ? fitsAbove || !fitsBelow : !fitsBelow && fitsAbove;
     top = preferAbove ? above : below;
-    top = Math.min(Math.max(top, GUTTER), window.height - size.height - GUTTER);
+    top = Math.max(minTop, Math.min(top, maxBottom - size.height));
   }
 
   return (

package/src/composer-panel/ModelPickerBase.tsx

@@ -48,6 +48,8 @@ const RAIL_PADDING = 3;
 const MARK_HEIGHT = 30;
 const MARK_GAP = 6;
 const ROW_HEIGHT = 36;
+/** The model chip's widest: past this a name truncates even with room to spare. */
+const MODEL_TRIGGER_MAX_WIDTH = 240;
 
 const DEFAULT_LABELS: Required<ModelPickerLabels> = {
   models: 'Models',
@@ -546,8 +548,14 @@ export function ModelPickerBase({
   const rows: Match[] = results ?? (activeProvider ? activeProvider.models.map((model) => ({ provider: activeProvider, model })) : []);
 
   const triggerStyle: WebCssStyle = {
-    height: 32,
-    flexShrink: 0,
+    // At least 32, never exactly: at the largest system font the name is taller
+    // than 32 and a fixed height clipped it. It shrinks (with an ellipsis) to
+    // leave the composer's own buttons their room, and stops at a width that
+    // still reads as a chip.
+    minHeight: 32,
+    minWidth: 0,
+    maxWidth: MODEL_TRIGGER_MAX_WIDTH,
+    flexShrink: 1,
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
@@ -590,7 +598,7 @@ export function ModelPickerBase({
         onHoverIn={() => setHovered(true)}
         onHoverOut={() => setHovered(false)}
         style={[triggerStyle, style]}>
-        <Text variant="body-medium" numberOfLines={1} style={{ paddingLeft: 2, paddingRight: 2, color: palette.textSecondary }}>
+        <Text variant="body-medium" numberOfLines={1} ellipsizeMode="tail" style={{ flexShrink: 1, minWidth: 0, paddingLeft: 2, paddingRight: 2, color: palette.textSecondary }}>
           {selected?.model.name ?? ''}
         </Text>
         <TurningChevron degrees={open ? 180 : 0} color={palette.iconSecondary} />

package/src/context-menu/ContextMenu.tsx

@@ -14,6 +14,7 @@ import { MENU_TRIGGER_POPUP } from '../floating/constants';
 import { MenuSurfaceProvider, type MenuSurfaceContextValue } from '../floating/context';
 import { createMenuRows } from '../floating/menu-rows';
 import { createInlineMenuSub } from '../floating/menu-sub-inline';
+import { LongPressArea } from '../floating/LongPressArea';
 import { TriggerSlot } from '../floating/TriggerSlot';
 import { useSheetOpenBridge } from '../floating/use-sheet-open-bridge';
 import { ContextMenuProvider, useContextMenu } from './context';
@@ -57,9 +58,13 @@ export function ContextMenuTrigger({
 }: ContextMenuTriggerProps) {
   const menu = useContextMenu();
 
+  // Without `asChild` the trigger is Bloom's own, and it is a `LongPressArea`
+  // rather than TriggerSlot's `Pressable`: a Pressable holds the touch
+  // responder, which on Android keeps a horizontal ScrollView inside the
+  // trigger (a code block in a chat turn) from ever scrolling.
   return (
     <TriggerSlot
-      asChild={asChild}
+      asChild
       className={className}
       style={style}
       testID={testID}
@@ -76,7 +81,7 @@ export function ContextMenuTrigger({
         'aria-haspopup': MENU_TRIGGER_POPUP,
         'aria-expanded': menu.open,
       }}>
-      {children}
+      {asChild ? children : <LongPressArea>{children}</LongPressArea>}
     </TriggerSlot>
   );
 }

package/src/dialog/DialogBottomSheet.tsx

@@ -12,10 +12,11 @@ import {
   type StyleProp,
   type ViewStyle,
 } from 'react-native';
-import { type AnimatedStyle } from 'react-native-reanimated';
+import Animated, { useAnimatedStyle, type AnimatedStyle } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { BottomSheet, type BottomSheetRef } from '../bottom-sheet';
+import { useSheetKeyboardHeight } from '../bottom-sheet/context';
 import { useTheme } from '../theme/use-theme';
 import { StyledView } from '../styles/styled-primitives';
 import { Context } from './context';
@@ -345,9 +346,7 @@ export function DialogBottomSheet({
               rather than a padding: the content box keeps the caller's
               `padding`/`contentPadding` untouched on both platforms, and the
               morph layer above still measures the content alone. */}
-          {bottomInset > 0 ? (
-            <View testID={SAFE_AREA_SPACER_TESTID} style={{ height: bottomInset }} />
-          ) : null}
+          {bottomInset > 0 ? <SafeAreaSpacer testID={SAFE_AREA_SPACER_TESTID} inset={bottomInset} /> : null}
         </StyledView>
       </Context.Provider>
     </BottomSheet>
@@ -357,6 +356,19 @@ export function DialogBottomSheet({
 /** Test handle for the bottom safe-area spacer. */
 const SAFE_AREA_SPACER_TESTID = 'dialog-sheet-safe-area';
 
+/**
+ * The gesture bar's height under the content — folded while the keyboard is
+ * up, because the keyboard covers the bar: the sheet already rides on top of
+ * the keyboard, and a spacer left standing floated its buttons a bar's height
+ * above it (Pixel 8a, Android 16). A child of the sheet, so it reads the
+ * sheet's own keyboard value.
+ */
+function SafeAreaSpacer({ inset, testID }: { inset: number; testID: string }) {
+  const keyboard = useSheetKeyboardHeight();
+  const style = useAnimatedStyle(() => ({ height: keyboard.value > 0 ? 0 : inset }), [keyboard, inset]);
+  return <Animated.View testID={testID} style={style} />;
+}
+
 /** Passes a bounded height down to a `scrollable={false}` body. */
 const FILL_BOUNDED = { flex: 1, minHeight: 0 } as const;
 

package/src/floating/LongPressArea.tsx

@@ -0,0 +1,114 @@
+/**
+ * A long-press target that never becomes the touch RESPONDER — native only,
+ * the trigger `ContextMenuTrigger` renders around content it does not own.
+ *
+ * ── WHY NOT A `Pressable` ───────────────────────────────────────────────────
+ *
+ * On Android the view holding the JS responder intercepts every later MOVE of
+ * that touch natively (`JSResponderHandler.onInterceptTouchEvent` returns true
+ * for the responder's own id). A `Pressable` claims the responder on touch
+ * start, so a horizontal `ScrollView` INSIDE it never sees the drag: a turn
+ * wrapped in the context menu's trigger could not scroll its code block
+ * sideways (Pixel 8a, Android 16; the same block scrolled without the wrapper).
+ * A vertical scroller ABOVE the trigger kept working, because a parent
+ * intercepts before its child — which is why only the inner one broke.
+ *
+ * So the hold is timed off the RAW touch events, which every ancestor receives
+ * without claiming anything: a scroller that takes the drag cancels the touch,
+ * and a finger that travels past the slop or lifts early cancels the timer.
+ * Taps keep going to whatever the content itself makes pressable.
+ *
+ * Assistive tech reaches the menu through the `longpress` accessibility action
+ * (TalkBack's double-tap-and-hold, VoiceOver's actions rotor).
+ */
+import React, { useCallback, useEffect, useRef } from 'react';
+import {
+  View,
+  type AccessibilityActionEvent,
+  type GestureResponderEvent,
+} from 'react-native';
+
+import type { TriggerHandleProps } from './types';
+
+/** `Pressable`'s own default, so a context menu opens on the platform's usual hold. */
+export const LONG_PRESS_MS = 500;
+/** How far the finger may drift and still be holding, in dp (`Pressability`'s deactivation distance). */
+export const LONG_PRESS_SLOP = 10;
+
+export type LongPressAreaProps = Partial<TriggerHandleProps> & {
+  children?: React.ReactNode;
+};
+
+export function LongPressArea({
+  children,
+  onLongPress,
+  // A press is the content's own business: the area never claims one.
+  onPress: _onPress,
+  disabled,
+  accessibilityLabel,
+  accessibilityRole,
+  ...aria
+}: LongPressAreaProps) {
+  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const origin = useRef<{ x: number; y: number } | null>(null);
+  const onLongPressRef = useRef(onLongPress);
+  onLongPressRef.current = onLongPress;
+
+  const cancel = useCallback(() => {
+    if (timer.current !== null) clearTimeout(timer.current);
+    timer.current = null;
+    origin.current = null;
+  }, []);
+  useEffect(() => cancel, [cancel]);
+
+  const onTouchStart = useCallback(
+    (event: GestureResponderEvent) => {
+      cancel();
+      // A second finger is a pinch or a scroll, not a hold.
+      if (disabled || !onLongPressRef.current || event.nativeEvent.touches?.length > 1) return;
+      origin.current = { x: event.nativeEvent.pageX, y: event.nativeEvent.pageY };
+      timer.current = setTimeout(() => {
+        timer.current = null;
+        origin.current = null;
+        onLongPressRef.current?.(event);
+      }, LONG_PRESS_MS);
+    },
+    [cancel, disabled],
+  );
+  const onTouchMove = useCallback(
+    (event: GestureResponderEvent) => {
+      const start = origin.current;
+      if (!start) return;
+      const dx = event.nativeEvent.pageX - start.x;
+      const dy = event.nativeEvent.pageY - start.y;
+      if (dx * dx + dy * dy > LONG_PRESS_SLOP * LONG_PRESS_SLOP) cancel();
+    },
+    [cancel],
+  );
+  const onAccessibilityAction = useCallback(
+    (event: AccessibilityActionEvent) => {
+      if (event.nativeEvent.actionName === 'longpress' && !disabled) {
+        onLongPressRef.current?.(event as unknown as GestureResponderEvent);
+      }
+    },
+    [disabled],
+  );
+
+  return (
+    <View
+      {...aria}
+      // One node, as the `Pressable` it replaces was: the hold is its action.
+      accessible
+      accessibilityLabel={accessibilityLabel}
+      accessibilityRole={accessibilityRole}
+      accessibilityState={{ disabled: !!disabled }}
+      accessibilityActions={disabled ? undefined : [{ name: 'longpress', label: accessibilityLabel }]}
+      onAccessibilityAction={onAccessibilityAction}
+      onTouchStart={onTouchStart}
+      onTouchMove={onTouchMove}
+      onTouchEnd={cancel}
+      onTouchCancel={cancel}>
+      {children}
+    </View>
+  );
+}

package/src/settings-modal/SettingsModal.tsx

@@ -6,7 +6,7 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { Pressable, StyleSheet, View, useWindowDimensions } from 'react-native';
+import { Pressable, StyleSheet, View, useWindowDimensions, type ScrollView } from 'react-native';
 import Animated, {
   Easing,
   useAnimatedStyle,
@@ -37,6 +37,7 @@ import {
 import { ModalPortal } from './modal-portal';
 import type { SettingsPalette } from './palette';
 import type { SettingsModalProps, SettingsNavGroup, SettingsNavItem } from './types';
+import { useKeyboardReveal } from './use-keyboard-reveal';
 import { IS_WEB, useSettingsWebCss } from './web-css';
 
 /**
@@ -722,9 +723,15 @@ function PageScroller({
   const onScroll = useAnimatedScrollHandler((event) => {
     scrollY.value = Math.max(0, event.contentOffset.y);
   }, [scrollY]);
+  const scrollRef = useRef<ScrollView>(null);
+  // The keyboard slides over an edge-to-edge modal: pad by it, and bring the
+  // focused field up above it.
+  const keyboardHeight = useKeyboardReveal(scrollRef, scrollY, !IS_WEB);
   return (
     <Animated.ScrollView
+      ref={scrollRef}
       style={styles.scroll}
+      keyboardShouldPersistTaps="handled"
       stickyHeaderIndices={IS_WEB ? undefined : [0]}
       onScroll={onScroll}
       scrollEventThrottle={16}
@@ -737,7 +744,7 @@ function PageScroller({
         style={{
           paddingLeft: inset,
           paddingRight: inset,
-          paddingBottom: inset,
+          paddingBottom: inset + keyboardHeight,
           paddingTop: insetTop,
         }}
       >

package/src/settings-modal/use-keyboard-reveal.ts

@@ -0,0 +1,62 @@
+import { useEffect, useRef, useState, type RefObject } from 'react';
+import { Keyboard, Platform, TextInput, type KeyboardEvent, type ScrollView } from 'react-native';
+
+/** Clearance kept between the focused field and the keyboard's top, px. */
+export const KEYBOARD_REVEAL_MARGIN = 16;
+
+type Measurable = { measureInWindow?: (cb: (x: number, y: number, width: number, height: number) => void) => void };
+
+/**
+ * Keep a settings page's focused field above the software keyboard — native
+ * only; on web the browser scrolls a focused field into view itself.
+ *
+ * The settings modal draws edge to edge, so the keyboard slides OVER it rather
+ * than resizing it: a field low on a page (Personalization's last input, a
+ * Pixel 8a at Android 16) stayed behind the keyboard with nothing to scroll it
+ * out. This returns the keyboard's height for the page to pad its content by —
+ * so there is room to scroll — and, when the keyboard shows, scrolls the page
+ * by exactly what the focused field sits below the keyboard's top.
+ *
+ * `offset` is the page's current scroll offset (its scroll handler keeps it).
+ */
+export function useKeyboardReveal(
+  scrollRef: RefObject<ScrollView | null>,
+  offset: { value: number },
+  enabled: boolean,
+): number {
+  const [keyboard, setKeyboard] = useState<{ height: number; overlap: number }>({ height: 0, overlap: 0 });
+  const offsetRef = useRef(offset);
+  offsetRef.current = offset;
+
+  useEffect(() => {
+    if (!enabled || typeof Keyboard?.addListener !== 'function') return;
+    const reveal = (event: KeyboardEvent) => {
+      const { height, screenY } = event.endCoordinates;
+      const field = TextInput.State?.currentlyFocusedInput?.() as Measurable | null | undefined;
+      if (!field || typeof field.measureInWindow !== 'function') {
+        setKeyboard({ height, overlap: 0 });
+        return;
+      }
+      field.measureInWindow((_x, y, _width, fieldHeight) => {
+        setKeyboard({ height, overlap: Math.max(0, y + fieldHeight + KEYBOARD_REVEAL_MARGIN - screenY) });
+      });
+    };
+    // iOS announces the keyboard before it moves; Android only once it is up.
+    const show = Keyboard.addListener(Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow', reveal);
+    const hide = Keyboard.addListener(Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide', () =>
+      setKeyboard({ height: 0, overlap: 0 }),
+    );
+    return () => {
+      show.remove();
+      hide.remove();
+    };
+  }, [enabled]);
+
+  // After the commit that pads the page by the keyboard: before it, the scroll
+  // range ends where the keyboard begins and the scroll would be clamped short.
+  useEffect(() => {
+    if (keyboard.overlap > 0) scrollRef.current?.scrollTo({ y: offsetRef.current.value + keyboard.overlap, animated: true });
+  }, [keyboard, scrollRef]);
+
+  return enabled ? keyboard.height : 0;
+}