@oxy.so/bloom 4.24.1 → 4.25.1

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;
+}

package/src/sidebar/SidebarItem.tsx

@@ -67,7 +67,11 @@ const SidebarItemComponent: React.FC<SidebarItemProps> = ({
     // Not clipped: the collapsed badge hangs off the square's top-end corner.
     // The content clips itself instead, so the label can't spill mid-morph.
     overflow: 'visible',
-    height: metrics.row.square,
+    // Collapsed it is a square. Expanded it is at LEAST the square: at the
+    // default type scale the label's line fits exactly, and at the largest
+    // system font a fixed height clipped it top and bottom (Android 16).
+    height: collapsed ? metrics.row.square : undefined,
+    minHeight: metrics.row.square,
     paddingLeft: metrics.row.padding,
     paddingRight: metrics.row.padding,
     paddingTop: metrics.row.padding,