@oxy.so/bloom 7.1.0 → 7.1.2

package/src/agent-avatar/context.ts

@@ -14,7 +14,11 @@ export type CharacterCapabilities = {
 /** The application hosts the optional renderer assets at this module URL. */
 export const CharacterRuntimeContext = createContext<{
   runtimeUrl?: string;
+  reportCapabilities?: (value: CharacterCapabilities) => void;
+}>({});
+
+/** Only editors subscribe to catalog updates; renderer input stays stable. */
+export const CharacterCapabilitiesContext = createContext<{
   capabilities?: CharacterCapabilities;
   capabilitiesByKey?: ReadonlyMap<string, CharacterCapabilities>;
-  reportCapabilities?: (value: CharacterCapabilities) => void;
 }>({});

package/src/agent-creator/AgentCreatorBase.tsx

@@ -1,8 +1,11 @@
-import { useContext, useState } from 'react';
+import { useContext, useMemo, useState } from 'react';
 import { Platform } from 'react-native';
 import { AgentAvatar, type AvatarConfig } from '../agent-avatar';
 import type { AvatarCharacterCategory } from '../agent-avatar/config-character';
-import { CharacterRuntimeContext } from '../agent-avatar/context';
+import {
+  CharacterRuntimeContext,
+  CharacterCapabilitiesContext,
+} from '../agent-avatar/context';
 import {
   legacyCharacterRecipe,
   legacyNativeShape,
@@ -46,13 +49,18 @@ export function AgentCreatorBase(props: AgentCreatorProps) {
   const [reactionKey, setReactionKey] = useState(0);
   const [workingKey, setWorkingKey] = useState(0);
   const runtime = useContext(CharacterRuntimeContext);
+  const catalog = useContext(CharacterCapabilitiesContext);
+  const previewConfig = useMemo(
+    () => ({ ...c, lookAt: 'wander' as const }),
+    [c],
+  );
   const { runtimeUrl } = runtime;
   const beta = Boolean(c.character && c.character.preset !== 'bloom');
   const nativeShape = legacyNativeShape(c);
   const key = JSON.stringify(beta ? c.character : legacyCharacterRecipe(c));
   const capabilities =
-    runtime.capabilitiesByKey?.get(key) ??
-    (runtime.capabilities?.key === key ? runtime.capabilities : undefined);
+    catalog.capabilitiesByKey?.get(key) ??
+    (catalog.capabilities?.key === key ? catalog.capabilities : undefined);
   const betaColor =
     capabilities?.selected.color ?? c.character?.selections?.color;
   const customColorValue = beta
@@ -315,7 +323,7 @@ export function AgentCreatorBase(props: AgentCreatorProps) {
               }}
             >
               <AgentAvatar
-                config={{ ...c, lookAt: 'wander' }}
+                config={previewConfig}
                 size={162}
                 interactive={Boolean(runtimeUrl)}
                 reactionKey={reactionKey}

package/src/agent-creator/CharacterControls.tsx

@@ -1,5 +1,8 @@
 import { useContext } from 'react';
-import { CharacterRuntimeContext } from '../agent-avatar/context';
+import {
+  CharacterRuntimeContext,
+  CharacterCapabilitiesContext,
+} from '../agent-avatar/context';
 import type {
   AvatarCharacterCategory,
   AvatarCharacterConfig,
@@ -20,8 +23,9 @@ export function CharacterControls({
   onChange: (character: AvatarCharacterConfig | undefined) => void;
 }) {
   const messages = useAgentCreatorMessages();
-  const { runtimeUrl, capabilities, capabilitiesByKey } = useContext(
-    CharacterRuntimeContext,
+  const { runtimeUrl } = useContext(CharacterRuntimeContext);
+  const { capabilities, capabilitiesByKey } = useContext(
+    CharacterCapabilitiesContext,
   );
   const {
     Select,

package/src/agent-creator/__tests__/support/character-runtime-fixture.tsx

@@ -0,0 +1,26 @@
+import type { ContextType, ReactNode } from 'react';
+import {
+  CharacterCapabilitiesContext,
+  CharacterRuntimeContext,
+} from '../../../agent-avatar/context';
+
+/** Supply both internal channels without starting the browser engine in UI tests. */
+export function CharacterRuntimeFixture({
+  value,
+  children,
+}: {
+  value: ContextType<typeof CharacterRuntimeContext> &
+    ContextType<typeof CharacterCapabilitiesContext>;
+  children: ReactNode;
+}) {
+  const { runtimeUrl, reportCapabilities, ...catalog } = value;
+  return (
+    <CharacterRuntimeContext.Provider
+      value={{ runtimeUrl, reportCapabilities }}
+    >
+      <CharacterCapabilitiesContext.Provider value={catalog}>
+        {children}
+      </CharacterCapabilitiesContext.Provider>
+    </CharacterRuntimeContext.Provider>
+  );
+}

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/dialog/DialogBottomSheet.tsx

@@ -197,7 +197,7 @@ export function DialogBottomSheet({
     const maxHeightPercent: `${number}%` = `${Math.round(maxHeightRatio * 100)}%`;
     return [
       {
-        backgroundColor: 'transparent',
+        backgroundColor: theme.colors.background,
         ...surfaceStyle(SURFACE_SHAPES.sheet),
         maxHeight: maxHeightPercent,
       },

package/src/surface/SurfacePaint.tsx

@@ -1,7 +1,7 @@
 import { surfaceStyle } from '../shapes/surface-style';
 import type { SurfaceShape } from '../shapes/corner-types';
-import React, { memo, useEffect } from 'react';
-import { Platform, StyleSheet, View, type ViewStyle } from 'react-native';
+import React, { memo, useCallback, useEffect, useState } from 'react';
+import { Platform, StyleSheet, View, type LayoutChangeEvent, type ViewStyle } from 'react-native';
 import Svg, { Defs, LinearGradient, Rect, Stop } from 'react-native-svg';
 import { useSvgIdPrefix } from '../styles/svg-id';
 import { StyledView } from '../styles/styled-primitives';
@@ -47,6 +47,13 @@ export const SurfacePaint = memo(function SurfacePaint({
   const resolvedFill = resolveSurfaceTint(fill ?? 'transparent');
   const id = useSvgIdPrefix('bloom-surface');
   const isWeb = Platform.OS === 'web';
+  const [nativeSize, setNativeSize] = useState<{ width: number; height: number } | null>(null);
+  const onNativeLayout = useCallback((event: LayoutChangeEvent) => {
+    const { width, height } = event.nativeEvent.layout;
+    if (!Number.isFinite(width) || !Number.isFinite(height) || width <= 0 || height <= 0) return;
+    setNativeSize(previous => previous?.width === width && previous.height === height
+      ? previous : { width, height });
+  }, []);
   useSurfaceRefraction(isWeb);
   useEffect(() => {
     if (isWeb) adoptStyleSheet('bloom-surface-paint-web-css', WEB_PAINT_CSS);
@@ -67,17 +74,20 @@ export const SurfacePaint = memo(function SurfacePaint({
   return (
     <View
       testID={testID}
+      onLayout={onNativeLayout}
       pointerEvents="none"
       style={[StyleSheet.absoluteFill, geometry, { overflow: 'hidden' }]}
     >
+      {/* Android SVG percentage paths cache canvas dimensions after first paint.
+          Update the actual Rect geometry when this backing View changes size. */}
       <Svg width="100%" height="100%" style={StyleSheet.absoluteFill}>
         <Defs>
           {sheen ? <LinearGradient id={`${id}-sheen`} x1="0" y1="0" x2="0" y2="1">
             {optics.sheen.map(stop => <Stop key={stop.offset} offset={String(stop.offset)} stopColor={stop.color} stopOpacity={stop.opacity} />)}
           </LinearGradient> : null}
         </Defs>
-        {fill !== undefined ? <Rect x="0" y="0" width="100%" height="100%" fill={base.color} fillOpacity={base.opacity} /> : null}
-        {sheen ? <Rect x="0" y="0" width="100%" height="100%" fill={`url(#${id}-sheen)`} /> : null}
+        {fill !== undefined ? <Rect x="0" y="0" width={nativeSize?.width ?? '100%'} height={nativeSize?.height ?? '100%'} fill={base.color} fillOpacity={base.opacity} /> : null}
+        {sheen ? <Rect x="0" y="0" width={nativeSize?.width ?? '100%'} height={nativeSize?.height ?? '100%'} fill={`url(#${id}-sheen)`} /> : null}
       </Svg>
       <View pointerEvents="none" style={[StyleSheet.absoluteFill, geometry, { boxShadow: optics.rim }]} />
     </View>