@oxy.so/bloom 6.1.0 → 6.2.1

package/src/ai-profile-card/AiProfileCard.tsx

@@ -1,15 +1,5 @@
-import React, { memo, useCallback, useEffect, useMemo, useState } from 'react';
-import {
-  Image,
-  ScrollView,
-  StyleSheet,
-  View,
-  useWindowDimensions,
-  type ImageLoadEventData,
-  type ImageSourcePropType,
-  type LayoutChangeEvent,
-  type NativeSyntheticEvent,
-} from 'react-native';
+import React, { memo, useEffect, useMemo, useState } from 'react';
+import { ScrollView, StyleSheet, View, useWindowDimensions } from 'react-native';
 
 import { Avatar } from '../avatar';
 import { Badge } from '../badge';
@@ -19,6 +9,7 @@ import { TABULAR } from '../chart-cards/primitives/ChartHeader';
 import { groupThousands } from '../chart-cards/primitives/format';
 import { useCountUp } from '../chart-cards/use-count-up';
 import { Chip } from '../chip';
+import { CoverHeader } from '../cover-header';
 import { useControllableState } from '../hooks/use-controllable-state';
 import { useMessages } from '../locale/messages';
 import { SegmentedControl, SegmentedControlItem, SegmentedControlItemText } from '../segmented-control';
@@ -37,7 +28,7 @@ import { formatCurrency } from '../locale/format-number';
  *   card      radius 24, 1px borderLight, no
  *             fill, clips its children
  *   cover     absolute over the top 165px, top corners 23, background-tertiary
- *             under the photo, `object-position: 50% 45%`
+ *             under the photo, `object-position: 50% 45%` — a `CoverHeader`
  *   content   column 15 apart, padding 124 top / 16 sides / 16 bottom
  *   avatar    80 disc, background-tertiary, initials 30 / 42.5 medium
  *             text-secondary — overlapping the cover's bottom edge by 41
@@ -59,56 +50,8 @@ import { formatCurrency } from '../locale/format-number';
 
 const COVER_HEIGHT = 165;
 const AVATAR_SIZE = 80;
-
-/** `object-fit: cover` with an `object-position`: the image sized to cover the box, offset by the fractions. */
-function CoverImage({
-  source,
-  position,
-  testID,
-}: {
-  source: string | ImageSourcePropType;
-  position: { x: number; y: number };
-  testID?: string;
-}) {
-  const [box, setBox] = useState<{ width: number; height: number } | null>(null);
-  const [natural, setNatural] = useState<{ width: number; height: number } | null>(null);
-  const resolved: ImageSourcePropType = typeof source === 'string' ? { uri: source } : source;
-
-  const onLayout = useCallback((event: LayoutChangeEvent) => {
-    const { width, height } = event.nativeEvent.layout;
-    setBox((prev) => (prev && prev.width === width && prev.height === height ? prev : { width, height }));
-  }, []);
-  const onLoad = useCallback((event: NativeSyntheticEvent<ImageLoadEventData>) => {
-    const s = event.nativeEvent?.source;
-    if (s && s.width > 0 && s.height > 0) setNatural({ width: s.width, height: s.height });
-  }, []);
-
-  const frame = useMemo(() => {
-    if (!box || !natural) return null;
-    const scale = Math.max(box.width / natural.width, box.height / natural.height);
-    const width = natural.width * scale;
-    const height = natural.height * scale;
-    return { width, height, left: (box.width - width) * position.x, top: (box.height - height) * position.y };
-  }, [box, natural, position.x, position.y]);
-
-  return (
-    <View style={StyleSheet.absoluteFill} onLayout={onLayout} testID={testID ? `${testID}-frame` : undefined}>
-      <Image
-        testID={testID}
-        source={resolved}
-        onLoad={onLoad}
-        accessibilityIgnoresInvertColors
-        aria-hidden
-        resizeMode="cover"
-        style={
-          frame
-            ? { position: 'absolute', left: frame.left, top: frame.top, width: frame.width, height: frame.height }
-            : StyleSheet.absoluteFill
-        }
-      />
-    </View>
-  );
-}
+/** Where the content starts: the avatar overlaps the cover's bottom edge by 41. */
+const CONTENT_TOP = 124;
 
 /**
  * The count-up headline, in its own component: the roll re-renders every frame
@@ -223,12 +166,14 @@ function AiProfileCardComponent({
   );
 
   return (
-    <View
+    <CoverHeader
       testID={testID}
+      coverSource={coverSource}
+      coverPosition={coverPosition}
+      coverHeight={COVER_HEIGHT}
+      overlap={COVER_HEIGHT - CONTENT_TOP}
       style={[
         {
-          position: 'relative',
-          width: '100%',
           minWidth: 0,
           overflow: 'hidden',
           borderRadius: 24,
@@ -236,195 +181,168 @@ function AiProfileCardComponent({
           borderColor: colors.border,
         },
         style,
-      ]}>
-      <View
-        testID={testID ? `${testID}-cover` : undefined}
-        style={{
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          height: COVER_HEIGHT,
-          overflow: 'hidden',
-          borderTopLeftRadius: 23,
-          borderTopRightRadius: 23,
-          backgroundColor: colors.tertiary,
-        }}>
-        {coverSource ? (
-          <CoverImage
-            source={coverSource}
-            position={coverPosition}
-            testID={testID ? `${testID}-cover-image` : undefined}
-          />
-        ) : null}
-      </View>
-
-      <View
-        testID={testID ? `${testID}-content` : undefined}
-        style={{
-          position: 'relative',
-          width: '100%',
-          flexDirection: 'column',
-          gap: 15,
-          paddingTop: 124,
-          paddingBottom: 16,
-          paddingLeft: 16,
-          paddingRight: 16,
-        }}>
-        <Avatar
-          testID={testID ? `${testID}-avatar` : undefined}
-          size={AVATAR_SIZE}
-          source={avatarSource ?? undefined}
-          initials={letters}
-          color="neutral"
-          alt={avatarSource ? name : undefined}
-          placeholderColor={colors.tertiary}
-          placeholderIcon={
-            <Text
-              allowFontScaling={false}
-              numberOfLines={1}
-              style={[styles.initials, { color: colors.textSecondary }]}>
-              {letters}
-            </Text>
-          }
-        />
-
-        <View style={{ position: 'relative', width: '100%', flexDirection: 'row', alignItems: 'flex-start', gap: 15 }}>
-          <View style={{ minWidth: 0, flex: 1, flexDirection: 'column', gap: 4 }}>
-            <Text variant="title-2-medium" numberOfLines={1} style={{ color: colors.text }}>
-              {name}
-            </Text>
-            {handle != null || badge != null ? (
-              <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
-                {handle != null ? (
-                  <Text variant="headline-medium" numberOfLines={1} style={{ color: colors.textSecondary }}>
-                    {handle}
-                  </Text>
-                ) : null}
-                {badge != null ? (
-                  <Badge
-                    testID={testID ? `${testID}-badge` : undefined}
-                    content={badge}
-                    style={{ backgroundColor: colors.tertiary }}
-                    textStyle={{ color: colors.textSecondary }}
-                  />
-                ) : null}
-              </View>
-            ) : null}
-          </View>
-          {actions ? (
-            <View
-              testID={testID ? `${testID}-actions` : undefined}
-              style={{
-                position: 'absolute',
-                top: -34,
-                right: 4,
-                flexDirection: 'row',
-                alignItems: 'center',
-                justifyContent: 'flex-end',
-                gap: 10,
-              }}>
-              {actions}
-            </View>
-          ) : null}
-        </View>
+      ]}
+      coverStyle={{ borderTopLeftRadius: 23, borderTopRightRadius: 23 }}
+      contentStyle={{
+        flexDirection: 'column',
+        gap: 15,
+        paddingBottom: 16,
+        paddingLeft: 16,
+        paddingRight: 16,
+      }}>
+      <Avatar
+        testID={testID ? `${testID}-avatar` : undefined}
+        size={AVATAR_SIZE}
+        source={avatarSource ?? undefined}
+        initials={letters}
+        color="neutral"
+        alt={avatarSource ? name : undefined}
+        placeholderColor={colors.tertiary}
+        placeholderIcon={
+          <Text
+            allowFontScaling={false}
+            numberOfLines={1}
+            style={[styles.initials, { color: colors.textSecondary }]}>
+            {letters}
+          </Text>
+        }
+      />
 
-        <View style={{ width: '100%', flexDirection: 'column', gap: 8 }}>
-          <View style={{ flexDirection: 'column', gap: 2 }}>
-            <Text variant="body-medium" numberOfLines={1} style={{ color: colors.textSecondary }}>
-              {contributionsLabel}
-            </Text>
-            <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
-              <RollingHeadline
-                value={contributions}
-                duration={countUpDuration}
-                format={format}
-                color={colors.text}
-                testID={testID ? `${testID}-headline` : undefined}
-              />
-              {delta != null ? (
-                <Chip
-                  size="md"
-                  testID={testID ? `${testID}-delta` : undefined}
-                  style={{ alignSelf: 'center', backgroundColor: colors.chip.background }}
-                  textStyle={{ color: colors.chip.foreground }}>
-                  {delta}
-                </Chip>
+      <View style={{ position: 'relative', width: '100%', flexDirection: 'row', alignItems: 'flex-start', gap: 15 }}>
+        <View style={{ minWidth: 0, flex: 1, flexDirection: 'column', gap: 4 }}>
+          <Text variant="title-2-medium" numberOfLines={1} style={{ color: colors.text }}>
+            {name}
+          </Text>
+          {handle != null || badge != null ? (
+            <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+              {handle != null ? (
+                <Text variant="headline-medium" numberOfLines={1} style={{ color: colors.textSecondary }}>
+                  {handle}
+                </Text>
+              ) : null}
+              {badge != null ? (
+                <Badge
+                  testID={testID ? `${testID}-badge` : undefined}
+                  content={badge}
+                  style={{ backgroundColor: colors.tertiary }}
+                  textStyle={{ color: colors.textSecondary }}
+                />
               ) : null}
-            </View>
-          </View>
-
-          {stats && stats.length > 0 ? (
-            <View testID={testID ? `${testID}-stats` : undefined} style={{ flexDirection: 'column', gap: 8 }}>
-              {(wide ? [stats.map((_, i) => i)] : pairs(stats.length)).map((row) => (
-                <View key={row[0]} style={{ flexDirection: 'row', alignItems: 'stretch', gap: 8 }}>
-                  {row.map((i) => {
-                    const stat = stats[i]!;
-                    return (
-                      <View
-                        key={`${i}-${stat.label}`}
-                        testID={testID ? `${testID}-stat-${i}` : undefined}
-                        style={[styles.tile, { backgroundColor: colors.secondary }]}>
-                        <Text variant="body-medium" numberOfLines={1} style={{ width: '100%', color: colors.text }}>
-                          {stat.value}
-                        </Text>
-                        <Text
-                          variant="body-2-medium"
-                          numberOfLines={1}
-                          style={{ width: '100%', color: colors.textSecondary }}>
-                          {stat.label}
-                        </Text>
-                      </View>
-                    );
-                  })}
-                  {/* An odd tile keeps its half of the two-column grid. */}
-                  {!wide && row.length === 1 ? <View style={styles.tileSpacer} /> : null}
-                </View>
-              ))}
             </View>
           ) : null}
-
+        </View>
+        {actions ? (
           <View
+            testID={testID ? `${testID}-actions` : undefined}
             style={{
-              width: '100%',
+              position: 'absolute',
+              top: -34,
+              right: 4,
               flexDirection: 'row',
               alignItems: 'center',
-              justifyContent: 'space-between',
-              paddingTop: 6,
-              paddingLeft: 2,
+              justifyContent: 'flex-end',
+              gap: 10,
             }}>
-            <Text variant="body-2-medium" style={{ color: colors.textSecondary }}>
-              {activityLabel}
-            </Text>
-            {periods.length > 0 ? (
-              <SegmentedControl
-                label={messages.periodGroup(activityLabel)}
-                type="radio"
-                variant="plain"
-                value={selectedPeriod}
-                onValueChange={setPeriod}>
-                {periods.map((p) => (
-                  <SegmentedControlItem
-                    key={p.id}
-                    value={p.id}
-                    testID={testID ? `${testID}-period-${p.id}` : undefined}>
-                    <SegmentedControlItemText>{p.label}</SegmentedControlItemText>
-                  </SegmentedControlItem>
-                ))}
-              </SegmentedControl>
+            {actions}
+          </View>
+        ) : null}
+      </View>
+
+      <View style={{ width: '100%', flexDirection: 'column', gap: 8 }}>
+        <View style={{ flexDirection: 'column', gap: 2 }}>
+          <Text variant="body-medium" numberOfLines={1} style={{ color: colors.textSecondary }}>
+            {contributionsLabel}
+          </Text>
+          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+            <RollingHeadline
+              value={contributions}
+              duration={countUpDuration}
+              format={format}
+              color={colors.text}
+              testID={testID ? `${testID}-headline` : undefined}
+            />
+            {delta != null ? (
+              <Chip
+                size="md"
+                testID={testID ? `${testID}-delta` : undefined}
+                style={{ alignSelf: 'center', backgroundColor: colors.chip.background }}
+                textStyle={{ color: colors.chip.foreground }}>
+                {delta}
+              </Chip>
             ) : null}
           </View>
+        </View>
 
-          {wide ? (
-            grid
-          ) : (
-            <ScrollView horizontal showsHorizontalScrollIndicator={false} style={{ flexGrow: 0 }}>
-              {grid}
-            </ScrollView>
-          )}
+        {stats && stats.length > 0 ? (
+          <View testID={testID ? `${testID}-stats` : undefined} style={{ flexDirection: 'column', gap: 8 }}>
+            {(wide ? [stats.map((_, i) => i)] : pairs(stats.length)).map((row) => (
+              <View key={row[0]} style={{ flexDirection: 'row', alignItems: 'stretch', gap: 8 }}>
+                {row.map((i) => {
+                  const stat = stats[i]!;
+                  return (
+                    <View
+                      key={`${i}-${stat.label}`}
+                      testID={testID ? `${testID}-stat-${i}` : undefined}
+                      style={[styles.tile, { backgroundColor: colors.secondary }]}>
+                      <Text variant="body-medium" numberOfLines={1} style={{ width: '100%', color: colors.text }}>
+                        {stat.value}
+                      </Text>
+                      <Text
+                        variant="body-2-medium"
+                        numberOfLines={1}
+                        style={{ width: '100%', color: colors.textSecondary }}>
+                        {stat.label}
+                      </Text>
+                    </View>
+                  );
+                })}
+                {/* An odd tile keeps its half of the two-column grid. */}
+                {!wide && row.length === 1 ? <View style={styles.tileSpacer} /> : null}
+              </View>
+            ))}
+          </View>
+        ) : null}
+
+        <View
+          style={{
+            width: '100%',
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            paddingTop: 6,
+            paddingLeft: 2,
+          }}>
+          <Text variant="body-2-medium" style={{ color: colors.textSecondary }}>
+            {activityLabel}
+          </Text>
+          {periods.length > 0 ? (
+            <SegmentedControl
+              label={messages.periodGroup(activityLabel)}
+              type="radio"
+              variant="plain"
+              value={selectedPeriod}
+              onValueChange={setPeriod}>
+              {periods.map((p) => (
+                <SegmentedControlItem
+                  key={p.id}
+                  value={p.id}
+                  testID={testID ? `${testID}-period-${p.id}` : undefined}>
+                  <SegmentedControlItemText>{p.label}</SegmentedControlItemText>
+                </SegmentedControlItem>
+              ))}
+            </SegmentedControl>
+          ) : null}
         </View>
+
+        {wide ? (
+          grid
+        ) : (
+          <ScrollView horizontal showsHorizontalScrollIndicator={false} style={{ flexGrow: 0 }}>
+            {grid}
+          </ScrollView>
+        )}
       </View>
-    </View>
+    </CoverHeader>
   );
 }
 

package/src/bottom-sheet/BottomSheetBase.tsx

@@ -133,14 +133,11 @@ export const BottomSheetBase = forwardRef((props: BottomSheetBaseProps, ref: Rea
     const bodyPanRef = useRef<GestureType | undefined>(undefined);
     const handlePanRef = useRef<GestureType | undefined>(undefined);
 
-    // Dismiss callbacks
+    // Completion is not a user request: once closed, every owner must hear it.
+    // Vetoes are checked before a user-triggered close starts, never after it.
     const safeClose = useCallback(() => {
-        if (onDismissAttempt?.()) {
-            onDismiss?.();
-        } else if (!onDismissAttempt) {
-            onDismiss?.();
-        }
-    }, [onDismissAttempt, onDismiss]);
+        onDismiss?.();
+    }, [onDismiss]);
 
     // Mirror `safeClose` and `rendered` into refs so the unmount cleanup can
     // fire the latest dismiss callback when needed, without re-binding the
@@ -251,6 +248,20 @@ export const BottomSheetBase = forwardRef((props: BottomSheetBaseProps, ref: Rea
         };
     }, [colors.border]);
 
+    // Gesture callbacks cross to JS before consulting the consumer's veto.
+    // A refused drag springs back; it never hides the Modal or strands its owner.
+    const requestPanDismiss = useCallback((generation: number, velocity: number) => {
+        if (closeGenerationRef.current !== generation || hasClosedRef.current) return;
+        if (onDismissAttempt && !onDismissAttempt()) {
+            translateY.value = withSpring(0, { ...SPRING_CONFIG, velocity });
+            return;
+        }
+        translateY.value = withSpring(screenHeightSV.value, { ...SPRING_CONFIG, velocity });
+        opacity.value = withTiming(0, { ...MOTION_RECIPES.dismiss, duration: 250 }, (finished) => {
+            if (finished) runOnJS(finishClose)(generation);
+        });
+    }, [onDismissAttempt, translateY, screenHeightSV, opacity, finishClose]);
+
     const present = useCallback(() => {
         setRendered(true);
         setVisible(true);
@@ -336,15 +347,7 @@ export const BottomSheetBase = forwardRef((props: BottomSheetBaseProps, ref: Rea
                         (distance > closeThreshold && velocity > -300);
 
                     if (shouldClose) {
-                        // Snapshot the generation on the UI thread at the
-                        // moment the close gesture commits. The completion
-                        // callback only fires `finishClose` if no reopen
-                        // bumped the generation in between.
-                        const generation = closeGeneration.value;
-                        translateY.value = withSpring(screenHeightSV.value, { ...SPRING_CONFIG, velocity });
-                        opacity.value = withTiming(0, { ...MOTION_RECIPES.dismiss, duration: 250 }, (finished) => {
-                            if (finished) runOnJS(finishClose)(generation);
-                        });
+                        runOnJS(requestPanDismiss)(closeGeneration.value, velocity);
                     } else {
                         translateY.value = withSpring(0, { ...SPRING_CONFIG, velocity });
                     }
@@ -396,16 +399,7 @@ export const BottomSheetBase = forwardRef((props: BottomSheetBaseProps, ref: Rea
                     (distance > closeThreshold && velocity > -300);
 
                 if (shouldClose) {
-                    const generation = closeGeneration.value;
-                    translateY.value = withSpring(screenHeightSV.value, {
-                        ...SPRING_CONFIG,
-                        velocity: velocity,
-                    });
-                    opacity.value = withTiming(0, { ...MOTION_RECIPES.dismiss, duration: 250 }, (finished) => {
-                        if (finished) {
-                            runOnJS(finishClose)(generation);
-                        }
-                    });
+                    runOnJS(requestPanDismiss)(closeGeneration.value, velocity);
                 } else {
                     translateY.value = withSpring(0, {
                         ...SPRING_CONFIG,
@@ -417,7 +411,7 @@ export const BottomSheetBase = forwardRef((props: BottomSheetBaseProps, ref: Rea
         // values that change the gesture's behavior. `finishClose` is stable
         // (useCallback with stable deps).
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [enablePanDownToClose, detached, manualActivation, nativeGesture, finishClose]);
+    }, [enablePanDownToClose, detached, manualActivation, nativeGesture, requestPanDismiss]);
 
     // Dedicated handle pan — only built in `manualActivation` mode. Always
     // active so users can drag the handle even while content is mid-scroll.
@@ -456,17 +450,13 @@ export const BottomSheetBase = forwardRef((props: BottomSheetBaseProps, ref: Rea
                     (distance > closeThreshold && velocity > -300);
 
                 if (shouldClose) {
-                    const generation = closeGeneration.value;
-                    translateY.value = withSpring(screenHeightSV.value, { ...SPRING_CONFIG, velocity });
-                    opacity.value = withTiming(0, { ...MOTION_RECIPES.dismiss, duration: 250 }, (finished) => {
-                        if (finished) runOnJS(finishClose)(generation);
-                    });
+                    runOnJS(requestPanDismiss)(closeGeneration.value, velocity);
                 } else {
                     translateY.value = withSpring(0, { ...SPRING_CONFIG, velocity });
                 }
             });
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [manualActivation, enablePanDownToClose, enableHandlePanningGesture, detached, finishClose]);
+    }, [manualActivation, enablePanDownToClose, enableHandlePanningGesture, detached, requestPanDismiss]);
 
     // CRITICAL — the shared values each `useAnimatedStyle` READS (translateY,
     // opacity, screenHeightSV, keyboardHeight) MUST be listed in its dependency
@@ -698,7 +688,7 @@ export const BottomSheetBase = forwardRef((props: BottomSheetBaseProps, ref: Rea
         : <View style={[styles.nonScrollableContent, surfaceCorners, { overflow: 'hidden' }]}>{surfaceChildren}</View>;
 
     return (
-        <Shell visible={rendered} onRequestClose={dismiss} keyboardHeight={keyboardHeight}>
+        <Shell visible={rendered} onRequestClose={handleBackdropPress} keyboardHeight={keyboardHeight}>
             {/* Web keyboard and focus: in on open, back on close, Tab kept in
                 the sheet, Escape a USER dismissal — through `onDismissAttempt`,
                 exactly like the backdrop. The sheet had no keyboard path at

package/src/bottom-sheet/types.ts

@@ -38,6 +38,7 @@ export interface BottomSheetProps {
      */
     style?: StyleProp<AnimatedStyle<ViewStyle>>;
     enableHandlePanningGesture?: boolean;
+    /** Veto user Back/backdrop/Escape/pan requests before closing; imperative dismiss bypasses it. */
     onDismissAttempt?: () => boolean;
     detached?: boolean; // If true, shows with margins and rounded corners. If false, full width with rounded top only.
     /**

package/src/chat-composer/SuggestionList.tsx

@@ -1,4 +1,5 @@
 import { Surface } from '../surface';
+import { Loading } from '../loading';
 import { createSuggestionList } from './create-suggestion-list';
 
-export const SuggestionList = createSuggestionList({ Surface });
+export const SuggestionList = createSuggestionList({ Surface, Loading });

package/src/chat-composer/SuggestionList.web.tsx

@@ -1,4 +1,5 @@
 import { Surface } from '../surface/index.web';
+import { Loading } from '../loading/index.web';
 import { createSuggestionList } from './create-suggestion-list';
 
-export const SuggestionList = createSuggestionList({ Surface });
+export const SuggestionList = createSuggestionList({ Surface, Loading });