@oxy.so/bloom 4.24.0 → 4.25.0

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

package/src/sidebar/Sidebar.tsx

@@ -254,11 +254,15 @@ const SidebarPanel: React.FC<SidebarProps> = ({
     };
   }, [progress, expandedWidth, fluid, collapsedWidth, expandedPadding, collapsedPadding]);
   const [contentHeight, setContentHeight] = useState(0);
+  // A worklet copies what it reads to the UI runtime, and `tree` carries the
+  // app's rows, elements and data — a `Date` among them crashes native on the
+  // copy. The mapper reads only whether there is one (`worklet-captures.test.ts`).
+  const treeShown = Boolean(tree);
   const contentMorph = useAnimatedStyle(() => ({
     height: contentHeight > 0 ? contentHeight * (1 - progress.value) : collapsed ? 0 : undefined,
     opacity: 1 - progress.value,
-    marginTop: tree ? 0 : 24 * (1 - progress.value),
-  }), [contentHeight, collapsed, progress, tree]);
+    marginTop: treeShown ? 0 : 24 * (1 - progress.value),
+  }), [contentHeight, collapsed, progress, treeShown]);
   const contentWidth = useAnimatedStyle(() => ({ width: expandedWidth.value - expandedPadding * 2 }), [expandedWidth, expandedPadding]);
   const navInset = useAnimatedStyle(() => {
     const inset = expandedInset * (1 - progress.value);

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,