@comergehq/studio 0.1.22 → 0.1.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comergehq/studio",
-  "version": "0.1.22",
+  "version": "0.1.24",
   "description": "Comerge studio",
   "main": "src/index.ts",
   "module": "dist/index.mjs",

package/src/components/bubble/Bubble.tsx

@@ -26,6 +26,7 @@ import { DEFAULT_EDGE_PADDING, DEFAULT_OFFSET, DEFAULT_SIZE, ENTER_ROTATION_FROM
 import type { BubbleProps } from './types';
 import { useTheme } from '../../theme';
 import { ResettableLiquidGlassView } from '../utils/ResettableLiquidGlassView';
+import { withAlpha } from '../utils/color';
 
 const HIDDEN_OFFSET_X = 20;
 
@@ -59,6 +60,7 @@ export function Bubble({
   disabled = false,
   ariaLabel,
   isLoading = false,
+  loadingBorderTone = 'default',
   visible = true,
   badgeCount = 0,
   offset = DEFAULT_OFFSET,
@@ -84,6 +86,10 @@ export function Bubble({
     if (isDanger) return 'rgba(239, 68, 68, 0.9)';
     return theme.scheme === 'dark' ? 'rgba(0, 0, 0, 0.6)' : 'rgba(255, 255, 255, 0.6)';
   }, [backgroundColor, isDanger, theme.scheme]);
+  const warningRingColors = useMemo(
+    () => [withAlpha(theme.colors.warning, 0.35), withAlpha(theme.colors.warning, 1)] as const,
+    [theme.colors.warning]
+  );
 
   const translateX = useSharedValue(getHiddenTranslateX(size));
   const translateY = useSharedValue(getHiddenTranslateY(height));
@@ -118,11 +124,8 @@ export function Bubble({
       // noop
     }
 
-    animateToHidden({
-      onFinish: () => {
-        onPressRef.current?.();
-      },
-    });
+    onPressRef.current?.();
+    animateToHidden();
   }, [animateToHidden]);
 
   useEffect(() => {
@@ -217,11 +220,14 @@ export function Bubble({
   }));
 
   const borderAnimatedStyle = useAnimatedStyle(() => {
+    const isWarning = loadingBorderTone === 'warning';
     const borderColor = interpolateColor(
       borderPulse.value,
       [0, 1],
       isDanger
         ? ['rgba(239,68,68,0.4)', 'rgba(239,68,68,1)']
+        : isWarning
+          ? warningRingColors
         : theme.scheme === 'dark'
           ? ['rgba(255,255,255,0.2)', 'rgba(255,255,255,0.9)']
           : ['rgba(55,0,179,0.2)', 'rgba(55,0,179,0.9)']

package/src/components/bubble/types.ts

@@ -40,6 +40,8 @@ export type BubbleProps = {
 
   /** When true, renders a pulsing border ring. */
   isLoading?: boolean;
+  /** Visual tone for the pulsing loading ring. */
+  loadingBorderTone?: 'default' | 'warning';
 
   variant?: 'default' | 'danger';
 

package/src/components/chat/ChatComposer.tsx

@@ -9,7 +9,7 @@ import {
   View,
   type ViewStyle,
 } from 'react-native';
-import { isLiquidGlassSupported } from '@callstack/liquid-glass';
+import { isLiquidGlassSupported, LiquidGlassView } from '@callstack/liquid-glass';
 import { Plus } from 'lucide-react-native';
 
 import { useTheme } from '../../theme';
@@ -25,7 +25,6 @@ export type ChatComposerProps = {
   disabled?: boolean;
   sendDisabled?: boolean;
   sending?: boolean;
-  autoFocus?: boolean;
   onSend: (text: string, attachments?: string[]) => void | Promise<void>;
   attachments?: string[];
   onRemoveAttachment?: (index: number) => void;
@@ -95,7 +94,6 @@ export function ChatComposer({
   disabled = false,
   sendDisabled = false,
   sending = false,
-  autoFocus = false,
   onSend,
   attachments = [],
   onRemoveAttachment,
@@ -119,20 +117,6 @@ export function ChatComposer({
   const maxInputHeight = React.useMemo(() => Dimensions.get('window').height * 0.5, []);
   const shakeAnim = React.useRef(new Animated.Value(0)).current;
   const [sendPressed, setSendPressed] = React.useState(false);
-  const inputRef = React.useRef<import('react-native').TextInput | null>(null);
-  const prevAutoFocusRef = React.useRef(false);
-
-  React.useEffect(() => {
-    const shouldFocus = autoFocus && !prevAutoFocusRef.current && !disabled && !sending;
-    prevAutoFocusRef.current = autoFocus;
-    if (!shouldFocus) return;
-
-    // Temporary workaround: Bottom sheets can take a moment to open
-    const t = setTimeout(() => {
-      inputRef.current?.focus();
-    }, 75);
-    return () => clearTimeout(t);
-  }, [autoFocus, disabled, sending]);
 
   const triggerShake = React.useCallback(() => {
     shakeAnim.setValue(0);
@@ -168,7 +152,7 @@ export function ChatComposer({
     >
       <View style={{ flexDirection: 'row', alignItems: 'flex-end', gap: 8 }}>
         <Animated.View style={{ flex: 1, transform: [{ translateX: shakeAnim }] }}>
-          <ResettableLiquidGlassView
+          <LiquidGlassView
             style={[
               // LiquidGlassView doesn't reliably auto-size to children; ensure enough height for the
               // thumbnail strip when attachments are present.
@@ -219,13 +203,12 @@ export function ChatComposer({
             ) : null}
 
             <MultilineTextInput
-              ref={inputRef}
               value={text}
               onChangeText={setText}
               placeholder={placeholder}
               editable={!disabled && !sending}
               useBottomSheetTextInput={useBottomSheetTextInput}
-              autoFocus={autoFocus}
+              autoFocus={false}
               placeholderTextColor={placeholderTextColor}
               scrollEnabled
               style={{
@@ -237,7 +220,7 @@ export function ChatComposer({
                 lineHeight: 20,
               }}
             />
-          </ResettableLiquidGlassView>
+          </LiquidGlassView>
         </Animated.View>
 
         <ResettableLiquidGlassView

package/src/components/chat/ChatMessageBubble.tsx

@@ -1,11 +1,13 @@
 import * as React from 'react';
 import { View, type ViewStyle } from 'react-native';
-import { CheckCheck, GitMerge } from 'lucide-react-native';
+import { CheckCheck, GitMerge, RotateCcw } from 'lucide-react-native';
 
 import type { ChatMessage } from '../models/types';
 import { useTheme } from '../../theme';
+import { Button } from '../primitives/Button';
 import { MarkdownText } from '../primitives/MarkdownText';
 import { Surface } from '../primitives/Surface';
+import { Text } from '../primitives/Text';
 
 export type ChatMessageBubbleProps = {
   message: ChatMessage;
@@ -13,10 +15,13 @@ export type ChatMessageBubbleProps = {
    * Optional custom renderer for message content (e.g. markdown).
    */
   renderContent?: (message: ChatMessage) => React.ReactNode;
+  isLast?: boolean;
+  retrying?: boolean;
+  onRetry?: () => void;
   style?: ViewStyle;
 };
 
-export function ChatMessageBubble({ message, renderContent, style }: ChatMessageBubbleProps) {
+export function ChatMessageBubble({ message, renderContent, isLast, retrying, onRetry, style }: ChatMessageBubbleProps) {
   const theme = useTheme();
   const metaEvent = message.meta?.event ?? null;
   const metaStatus = message.meta?.status ?? null;
@@ -36,6 +41,8 @@ export function ChatMessageBubble({ message, renderContent, style }: ChatMessage
 
   const bodyColor =
     metaStatus === 'success' ? theme.colors.success : metaStatus === 'error' ? theme.colors.danger : undefined;
+  const showRetry = Boolean(onRetry) && isLast && metaStatus === 'error';
+  const retryLabel = retrying ? 'Retrying...' : 'Retry';
 
   return (
     <View style={[align, style]}>
@@ -65,6 +72,30 @@ export function ChatMessageBubble({ message, renderContent, style }: ChatMessage
           </View>
         </View>
       </Surface>
+      {showRetry ? (
+        <View style={{ marginTop: theme.spacing.xs, alignSelf: align.alignSelf }}>
+          <Button
+            variant="ghost"
+            size="sm"
+            onPress={onRetry}
+            disabled={retrying}
+            style={{ borderColor: theme.colors.danger }}
+            accessibilityLabel="Retry send"
+          >
+            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+              {!retrying ? <RotateCcw size={14} color={theme.colors.danger} /> : null}
+              <Text
+                variant="caption"
+                color={theme.colors.danger}
+                style={{ marginLeft: retrying ? 0 : theme.spacing.xs }}
+                numberOfLines={1}
+              >
+                {retryLabel}
+              </Text>
+            </View>
+          </Button>
+        </View>
+      ) : null}
     </View>
   );
 }

package/src/components/chat/ChatMessageList.tsx

@@ -15,6 +15,8 @@ export type ChatMessageListProps = {
   messages: ChatMessage[];
   showTypingIndicator?: boolean;
   renderMessageContent?: ChatMessageBubbleProps['renderContent'];
+  onRetryMessage?: (messageId: string) => void;
+  isRetryingMessage?: (messageId: string) => boolean;
   contentStyle?: ViewStyle;
   bottomInset?: number;
   /**
@@ -33,6 +35,8 @@ export const ChatMessageList = React.forwardRef<ChatMessageListRef, ChatMessageL
       messages,
       showTypingIndicator = false,
       renderMessageContent,
+      onRetryMessage,
+      isRetryingMessage,
       contentStyle,
       bottomInset = 0,
       onNearBottomChange,
@@ -49,6 +53,7 @@ export const ChatMessageList = React.forwardRef<ChatMessageListRef, ChatMessageL
     const data = React.useMemo(() => {
       return [...messages].reverse();
     }, [messages]);
+    const lastMessageId = messages.length > 0 ? messages[messages.length - 1]!.id : null;
 
     const scrollToBottom = React.useCallback((options?: { animated?: boolean }) => {
       const animated = options?.animated ?? true;
@@ -121,7 +126,13 @@ export const ChatMessageList = React.forwardRef<ChatMessageListRef, ChatMessageL
         ]}
         ItemSeparatorComponent={() => <View style={{ height: theme.spacing.sm }} />}
         renderItem={({ item }: { item: ChatMessage }) => (
-          <ChatMessageBubble message={item} renderContent={renderMessageContent} />
+          <ChatMessageBubble
+            message={item}
+            renderContent={renderMessageContent}
+            isLast={Boolean(lastMessageId && item.id === lastMessageId)}
+            retrying={isRetryingMessage?.(item.id) ?? false}
+            onRetry={onRetryMessage ? () => onRetryMessage(item.id) : undefined}
+          />
         )}
         ListHeaderComponent={
           <View>

package/src/components/chat/ChatPage.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Keyboard, Platform, View, type ViewStyle } from 'react-native';
+import { Platform, View, type ViewStyle } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import type { ChatMessage } from '../models/types';
@@ -12,6 +12,8 @@ export type ChatPageProps = {
   messages: ChatMessage[];
   showTypingIndicator?: boolean;
   renderMessageContent?: ChatMessageListProps['renderMessageContent'];
+  onRetryMessage?: ChatMessageListProps['onRetryMessage'];
+  isRetryingMessage?: ChatMessageListProps['isRetryingMessage'];
   topBanner?: React.ReactNode;
   composerTop?: React.ReactNode;
   composer: Omit<ChatComposerProps, 'attachments'> & {
@@ -32,6 +34,8 @@ export function ChatPage({
   messages,
   showTypingIndicator,
   renderMessageContent,
+  onRetryMessage,
+  isRetryingMessage,
   topBanner,
   composerTop,
   composer,
@@ -45,19 +49,7 @@ export function ChatPage({
   const insets = useSafeAreaInsets();
   const [composerHeight, setComposerHeight] = React.useState(0);
   const [composerTopHeight, setComposerTopHeight] = React.useState(0);
-  const [keyboardVisible, setKeyboardVisible] = React.useState(false);
-
-  React.useEffect(() => {
-    if (Platform.OS !== 'ios') return;
-    const show = Keyboard.addListener('keyboardWillShow', () => setKeyboardVisible(true));
-    const hide = Keyboard.addListener('keyboardWillHide', () => setKeyboardVisible(false));
-    return () => {
-      show.remove();
-      hide.remove();
-    };
-  }, []);
-
-  const footerBottomPadding = Platform.OS === 'ios' ? (keyboardVisible ? 0 : insets.bottom) : insets.bottom + 10;
+  const footerBottomPadding = Platform.OS === 'ios' ? insets.bottom : insets.bottom + 10;
   const totalComposerHeight = composerHeight + composerTopHeight;
   const overlayBottom = totalComposerHeight + footerBottomPadding + theme.spacing.lg;
   const bottomInset = totalComposerHeight + footerBottomPadding + theme.spacing.xl;
@@ -92,6 +84,8 @@ export function ChatPage({
             messages={messages}
             showTypingIndicator={showTypingIndicator}
             renderMessageContent={renderMessageContent}
+            onRetryMessage={onRetryMessage}
+            isRetryingMessage={isRetryingMessage}
             onNearBottomChange={onNearBottomChange}
             bottomInset={bottomInset}
           />

package/src/components/merge-requests/ReviewMergeRequestCard.tsx

@@ -109,7 +109,7 @@ export function ReviewMergeRequestCard({
 
             <Text style={{ color: theme.colors.textMuted, fontSize: 12, lineHeight: 16, marginBottom: 12 }}>
               {creator
-                ? `${creator.approvedOpenedMergeRequests} approved merge${creator.approvedOpenedMergeRequests !== 1 ? 's' : ''}`
+                ? `${creator.approvedOrMergedMergeRequests} approved merge${creator.approvedOrMergedMergeRequests !== 1 ? 's' : ''}`
                 : 'Loading stats...'}
             </Text>
 

package/src/components/primitives/MarkdownText.tsx

@@ -1,8 +1,9 @@
-import { Platform, View, type ViewStyle } from 'react-native';
+import { Platform, Pressable, Text, View, type ViewStyle } from 'react-native';
 
 import Markdown from 'react-native-markdown-display';
 
 import { useTheme } from '../../theme';
+import { useEffect, useRef, useState } from 'react';
 
 export type MarkdownTextVariant = 'chat' | 'mergeRequest';
 
@@ -16,9 +17,47 @@ export type MarkdownTextProps = {
   style?: ViewStyle;
 };
 
+function copyMarkdownToClipboard(markdown: string) {
+  if (!markdown) {
+    return;
+  }
+
+  const navigatorClipboard = globalThis?.navigator?.clipboard;
+  if (navigatorClipboard?.writeText) {
+    void navigatorClipboard.writeText(markdown);
+    return;
+  }
+
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    const expoClipboard = require('expo-clipboard');
+    if (expoClipboard?.setStringAsync) {
+      void expoClipboard.setStringAsync(markdown);
+      return;
+    }
+  } catch {
+    // optional dependency; fall through
+  }
+
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    const rnClipboard = require('@react-native-clipboard/clipboard');
+    if (rnClipboard?.setString) {
+      rnClipboard.setString(markdown);
+    }
+  } catch {
+    // optional dependency; nothing else to try
+  }
+}
+
 export function MarkdownText({ markdown, variant = 'chat', bodyColor, style }: MarkdownTextProps) {
   const theme = useTheme();
   const isDark = theme.scheme === 'dark';
+  const [showCopied, setShowCopied] = useState(false);
+  const [tooltipPosition, setTooltipPosition] = useState<{ x: number; y: number } | null>(null);
+  const [tooltipWidth, setTooltipWidth] = useState(0);
+  const hideTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const containerRef = useRef<View>(null);
 
   const baseBodyColor = variant === 'mergeRequest' ? theme.colors.textMuted : theme.colors.text;
   const linkColor =
@@ -31,41 +70,101 @@ export function MarkdownText({ markdown, variant = 'chat', bodyColor, style }: M
   const paragraphBottom = variant === 'mergeRequest' ? 8 : 6;
   const baseLineHeight = variant === 'mergeRequest' ? 22 : 20;
 
+  useEffect(() => {
+    return () => {
+      if (hideTimerRef.current) {
+        clearTimeout(hideTimerRef.current);
+      }
+    };
+  }, []);
+
+  const handleLongPress = (event: {
+    nativeEvent: { locationX: number; locationY: number; pageX: number; pageY: number };
+  }) => {
+    const { locationX, locationY, pageX, pageY } = event.nativeEvent;
+
+    if (containerRef.current?.measureInWindow) {
+      containerRef.current.measureInWindow((x, y) => {
+        setTooltipPosition({ x: pageX - x, y: pageY - y });
+      });
+    } else {
+      setTooltipPosition({ x: locationX, y: locationY });
+    }
+    copyMarkdownToClipboard(markdown);
+    setShowCopied(true);
+
+    if (hideTimerRef.current) {
+      clearTimeout(hideTimerRef.current);
+    }
+
+    hideTimerRef.current = setTimeout(() => {
+      setShowCopied(false);
+    }, 1200);
+  };
+
   return (
-    <View style={style}>
-      <Markdown
-        style={{
-          body: { color: bodyColor ?? baseBodyColor, fontSize: 14, lineHeight: baseLineHeight },
-          paragraph: { marginTop: 0, marginBottom: paragraphBottom },
-          link: { color: linkColor, fontWeight: linkWeight },
-          code_inline: {
-            backgroundColor: codeBgColor,
-            color: codeTextColor,
-            paddingHorizontal: variant === 'mergeRequest' ? 6 : 4,
-            paddingVertical: variant === 'mergeRequest' ? 2 : 0,
-            borderRadius: variant === 'mergeRequest' ? 6 : 4,
-            fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace',
-            fontSize: 13,
-          },
-          code_block: {
-            backgroundColor: codeBgColor,
-            color: codeTextColor,
-            padding: variant === 'mergeRequest' ? 12 : 8,
-            borderRadius: variant === 'mergeRequest' ? 8 : 6,
-            marginVertical: variant === 'mergeRequest' ? 8 : 0,
-          },
-          fence: {
-            backgroundColor: codeBgColor,
-            color: codeTextColor,
-            padding: variant === 'mergeRequest' ? 12 : 8,
-            borderRadius: variant === 'mergeRequest' ? 8 : 6,
-            marginVertical: variant === 'mergeRequest' ? 8 : 0,
-          },
-        }}
-      >
-        {markdown}
-      </Markdown>
-    </View>
+    <Pressable style={style} onLongPress={handleLongPress}>
+      <View ref={containerRef} style={{ position: 'relative' }}>
+        <Markdown
+          style={{
+            body: { color: bodyColor ?? baseBodyColor, fontSize: 14, lineHeight: baseLineHeight },
+            paragraph: { marginTop: 0, marginBottom: paragraphBottom },
+            link: { color: linkColor, fontWeight: linkWeight },
+            code_inline: {
+              backgroundColor: codeBgColor,
+              color: codeTextColor,
+              paddingHorizontal: variant === 'mergeRequest' ? 6 : 4,
+              paddingVertical: variant === 'mergeRequest' ? 2 : 0,
+              borderRadius: variant === 'mergeRequest' ? 6 : 4,
+              fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace',
+              fontSize: 13,
+            },
+            code_block: {
+              backgroundColor: codeBgColor,
+              color: codeTextColor,
+              padding: variant === 'mergeRequest' ? 12 : 8,
+              borderRadius: variant === 'mergeRequest' ? 8 : 6,
+              marginVertical: variant === 'mergeRequest' ? 8 : 0,
+            },
+            fence: {
+              backgroundColor: codeBgColor,
+              color: codeTextColor,
+              padding: variant === 'mergeRequest' ? 12 : 8,
+              borderRadius: variant === 'mergeRequest' ? 8 : 6,
+              marginVertical: variant === 'mergeRequest' ? 8 : 0,
+            },
+          }}
+        >
+          {markdown}
+        </Markdown>
+        {showCopied && tooltipPosition ? (
+          <View
+            pointerEvents="none"
+            style={{
+              position: 'absolute',
+              left: tooltipPosition.x,
+              top: tooltipPosition.y - theme.spacing.lg - 32,
+              backgroundColor: theme.colors.success,
+              borderRadius: theme.radii.pill,
+              paddingHorizontal: theme.spacing.sm,
+              paddingVertical: theme.spacing.xs,
+              transform: [{ translateX: tooltipWidth ? -tooltipWidth / 2 : 0 }],
+            }}
+            onLayout={(event) => setTooltipWidth(event.nativeEvent.layout.width)}
+          >
+            <Text
+              style={{
+                color: theme.colors.onSuccess,
+                fontSize: theme.typography.fontSize.xs,
+                fontWeight: theme.typography.fontWeight.medium,
+              }}
+            >
+              Copied
+            </Text>
+          </View>
+        ) : null}
+      </View>
+    </Pressable>
   );
 }
 

package/src/components/studio-sheet/StudioBottomSheet.tsx

@@ -1,6 +1,10 @@
 import * as React from 'react';
-import { AppState, Keyboard, Platform, View, type AppStateStatus } from 'react-native';
-import BottomSheet, { type BottomSheetBackgroundProps, type BottomSheetProps } from '@gorhom/bottom-sheet';
+import { AppState, Keyboard, View, type AppStateStatus } from 'react-native';
+import {
+  BottomSheetModal,
+  type BottomSheetBackgroundProps,
+  type BottomSheetModalProps,
+} from '@gorhom/bottom-sheet';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { useTheme } from '../../theme';
@@ -20,9 +24,9 @@ export type StudioBottomSheetProps = {
   snapPoints?: StudioSheetSnapPoints;
 
   /**
-   * Optional ref forwarding to control the BottomSheet imperatively.
+   * Optional ref forwarding to control the BottomSheetModal imperatively.
    */
-  sheetRef?: React.RefObject<BottomSheet | null>;
+  sheetRef?: React.RefObject<BottomSheetModal | null>;
 
   /**
    * Provide a custom background renderer (e.g. BlurView).
@@ -35,10 +39,10 @@ export type StudioBottomSheetProps = {
   children: React.ReactNode;
 
   /**
-   * Additional BottomSheet props
+   * Additional BottomSheetModal props
    */
   bottomSheetProps?: Omit<
-    BottomSheetProps,
+    BottomSheetModalProps,
     | 'ref'
     | 'index'
     | 'snapPoints'
@@ -48,6 +52,7 @@ export type StudioBottomSheetProps = {
     | 'bottomInset'
     | 'handleIndicatorStyle'
     | 'onChange'
+    | 'onDismiss'
     | 'children'
   >;
 };
@@ -63,31 +68,21 @@ export function StudioBottomSheet({
 }: StudioBottomSheetProps) {
   const theme = useTheme();
   const insets = useSafeAreaInsets();
-  const internalSheetRef = React.useRef<BottomSheet | null>(null);
+  const internalSheetRef = React.useRef<BottomSheetModal | null>(null);
   const resolvedSheetRef = sheetRef ?? internalSheetRef;
-  const currentIndexRef = React.useRef<number>(open ? snapPoints.length - 1 : -1);
+  const resolvedSnapPoints = React.useMemo<(string | number)[]>(() => [...snapPoints], [snapPoints]);
+  const currentIndexRef = React.useRef<number>(open ? resolvedSnapPoints.length - 1 : -1);
   const lastAppStateRef = React.useRef<AppStateStatus>(AppState.currentState);
 
-  // Workaround: @gorhom/bottom-sheet can occasionally render empty content after app resume.
+  // Workaround: @gorhom/bottom-sheet can occasionally render empty content after app resume if the keyboard is open.
   React.useEffect(() => {
     const sub = AppState.addEventListener('change', (state) => {
-      const prev = lastAppStateRef.current;
       lastAppStateRef.current = state;
 
       if (state === 'background' || state === 'inactive') {
         Keyboard.dismiss();
         return;
       }
-
-      if (state !== 'active') return;
-      const sheet = resolvedSheetRef.current;
-      if (!sheet) return;
-      const idx = currentIndexRef.current;
-      if (open && idx >= 0) {
-        Keyboard.dismiss();
-        requestAnimationFrame(() => sheet.snapToIndex(idx));
-        setTimeout(() => sheet.snapToIndex(idx), 120);
-      }
     });
     return () => sub.remove();
   }, [open, resolvedSheetRef]);
@@ -97,12 +92,11 @@ export function StudioBottomSheet({
     if (!sheet) return;
 
     if (open) {
-      // Open to the highest snap point by default.
-      sheet.snapToIndex(snapPoints.length - 1);
+      sheet.present();
     } else {
-      sheet.close();
+      sheet.dismiss();
     }
-  }, [open, resolvedSheetRef, snapPoints.length]);
+  }, [open, resolvedSheetRef, resolvedSnapPoints.length]);
 
   const handleChange = React.useCallback(
     (index: number) => {
@@ -113,13 +107,15 @@ export function StudioBottomSheet({
   );
 
   return (
-    <BottomSheet
+    <BottomSheetModal
       ref={resolvedSheetRef}
-      index={open ? snapPoints.length - 1 : -1}
-      snapPoints={snapPoints}
+      index={resolvedSnapPoints.length - 1}
+      snapPoints={resolvedSnapPoints}
       enableDynamicSizing={false}
       enablePanDownToClose
       enableContentPanningGesture={false}
+      keyboardBehavior="interactive"
+      keyboardBlurBehavior="restore"
       android_keyboardInputMode="adjustResize"
       backgroundComponent={(props: BottomSheetBackgroundProps) => (
         <StudioSheetBackground {...props} renderBackground={background?.renderBackground} />
@@ -127,11 +123,12 @@ export function StudioBottomSheet({
       topInset={insets.top}
       bottomInset={0}
       handleIndicatorStyle={{ backgroundColor: theme.colors.handleIndicator }}
-      onChange={handleChange}
       {...bottomSheetProps}
+      onChange={handleChange}
+      onDismiss={() => onOpenChange?.(false)}
     >
       <View style={{ flex: 1, overflow: 'hidden' }}>{children}</View>
-    </BottomSheet>
+    </BottomSheetModal>
   );
 }