@comergehq/studio 0.1.9 → 0.1.11

package/package.json

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

package/src/components/chat/ChatComposer.tsx

@@ -9,12 +9,14 @@ import {
   View,
   type ViewStyle,
 } from 'react-native';
-import { LiquidGlassView, isLiquidGlassSupported } from '@callstack/liquid-glass';
+import { isLiquidGlassSupported } from '@callstack/liquid-glass';
 import { Plus } from 'lucide-react-native';
 
 import { useTheme } from '../../theme';
 import { MultilineTextInput } from './MultilineTextInput';
 import { IconChevronRight, IconClose } from '../icons/StudioIcons';
+import { withAlpha } from '../utils/color';
+import { ResettableLiquidGlassView } from '../utils/ResettableLiquidGlassView';
 
 export type ChatComposerProps = {
   value?: string;
@@ -157,6 +159,7 @@ export function ChatComposer({
 
   const textareaBgColor = theme.scheme === 'dark' ? '#18181B' : '#F6F6F6';
   const placeholderTextColor = theme.scheme === 'dark' ? '#A1A1AA' : '#71717A';
+  const sendBg = withAlpha(theme.colors.primary, isButtonDisabled ? 0.6 : sendPressed ? 0.9 : 1);
 
   return (
     <View
@@ -165,7 +168,7 @@ export function ChatComposer({
     >
       <View style={{ flexDirection: 'row', alignItems: 'flex-end', gap: 8 }}>
         <Animated.View style={{ flex: 1, transform: [{ translateX: shakeAnim }] }}>
-          <LiquidGlassView
+          <ResettableLiquidGlassView
             style={[
               // LiquidGlassView doesn't reliably auto-size to children; ensure enough height for the
               // thumbnail strip when attachments are present.
@@ -234,10 +237,10 @@ export function ChatComposer({
                 lineHeight: 20,
               }}
             />
-          </LiquidGlassView>
+          </ResettableLiquidGlassView>
         </Animated.View>
 
-        <LiquidGlassView
+        <ResettableLiquidGlassView
           style={[{ borderRadius: 100 }, !isLiquidGlassSupported && { backgroundColor: textareaBgColor }]}
           interactive
           effect="clear"
@@ -248,8 +251,7 @@ export function ChatComposer({
               height: 44,
               borderRadius: 22,
               overflow: 'hidden',
-              backgroundColor: theme.colors.primary,
-              opacity: isButtonDisabled ? 0.6 : sendPressed ? 0.9 : 1,
+              backgroundColor: sendBg,
             }}
           >
             <Pressable
@@ -270,7 +272,7 @@ export function ChatComposer({
               )}
             </Pressable>
           </View>
-        </LiquidGlassView>
+        </ResettableLiquidGlassView>
       </View>
     </View>
   );

package/src/components/chat/ChatMessageList.tsx

@@ -46,10 +46,13 @@ export const ChatMessageList = React.forwardRef<ChatMessageListRef, ChatMessageL
     const initialScrollDoneRef = React.useRef(false);
     const lastMessageIdRef = React.useRef<string | null>(null);
 
+    const data = React.useMemo(() => {
+      return [...messages].reverse();
+    }, [messages]);
+
     const scrollToBottom = React.useCallback((options?: { animated?: boolean }) => {
       const animated = options?.animated ?? true;
-      // Scroll to visual bottom (latest messages) in a normal (non-inverted) list.
-      listRef.current?.scrollToEnd({ animated });
+      listRef.current?.scrollToOffset({ offset: 0, animated });
     }, []);
 
     React.useImperativeHandle(ref, () => ({ scrollToBottom }), [scrollToBottom]);
@@ -57,12 +60,7 @@ export const ChatMessageList = React.forwardRef<ChatMessageListRef, ChatMessageL
     const handleScroll = React.useCallback(
       (e: NativeSyntheticEvent<NativeScrollEvent>) => {
         const { contentOffset, contentSize, layoutMeasurement } = e.nativeEvent;
-        // Treat "bottom" as the end of actual messages (excluding the intentional footer spacer),
-        // so "near bottom" still means "near the latest message", not "deep into empty space".
-        const distanceFromBottom = Math.max(
-          contentSize.height - Math.max(bottomInset, 0) - (contentOffset.y + layoutMeasurement.height),
-          0
-        );
+        const distanceFromBottom = Math.max(contentOffset.y - Math.max(bottomInset, 0), 0);
         const isNear = distanceFromBottom <= nearBottomThreshold;
 
         if (nearBottomRef.current !== isNear) {
@@ -73,16 +71,6 @@ export const ChatMessageList = React.forwardRef<ChatMessageListRef, ChatMessageL
       [bottomInset, nearBottomThreshold, onNearBottomChange]
     );
 
-    // On first load, start at the bottom
-    React.useEffect(() => {
-      if (initialScrollDoneRef.current) return;
-      if (messages.length === 0) return;
-
-      initialScrollDoneRef.current = true;
-      lastMessageIdRef.current = messages[messages.length - 1]?.id ?? null;
-      const id = requestAnimationFrame(() => scrollToBottom({ animated: false }));
-      return () => cancelAnimationFrame(id);
-    }, [messages, scrollToBottom]);
 
     // When new messages arrive, keep the user pinned to the bottom only if they already were near it.
     React.useEffect(() => {
@@ -106,38 +94,36 @@ export const ChatMessageList = React.forwardRef<ChatMessageListRef, ChatMessageL
       return undefined;
     }, [showTypingIndicator, scrollToBottom]);
 
-    // When the bottom inset grows/shrinks (e.g. composer height changes), keep pinned users at bottom.
-    React.useEffect(() => {
-      if (!initialScrollDoneRef.current) return;
-      if (!nearBottomRef.current) return;
-      const id = requestAnimationFrame(() => scrollToBottom({ animated: false }));
-      return () => cancelAnimationFrame(id);
-    }, [bottomInset, scrollToBottom]);
-
     return (
       <BottomSheetFlatList
         ref={listRef}
-        data={messages}
+        inverted
+        data={data}
         keyExtractor={(m: ChatMessage) => m.id}
-        keyboardDismissMode={Platform.OS === 'ios' ? 'interactive' : 'on-drag'}
         keyboardShouldPersistTaps="handled"
         onScroll={handleScroll}
         scrollEventThrottle={16}
         showsVerticalScrollIndicator={false}
+        onContentSizeChange={() => {
+          if (initialScrollDoneRef.current) return;
+          initialScrollDoneRef.current = true;
+          lastMessageIdRef.current = messages.length > 0 ? messages[messages.length - 1]!.id : null;
+          nearBottomRef.current = true;
+          onNearBottomChange?.(true);
+          requestAnimationFrame(() => scrollToBottom({ animated: false }));
+        }}
         contentContainerStyle={[
           {
             paddingHorizontal: theme.spacing.lg,
-            paddingTop: theme.spacing.sm,
-            paddingBottom: theme.spacing.sm,
+            paddingVertical: theme.spacing.sm,
           },
           contentStyle,
         ]}
-        renderItem={({ item, index }: { item: ChatMessage; index: number }) => (
-          <View style={{ marginTop: index === 0 ? 0 : theme.spacing.sm }}>
-            <ChatMessageBubble message={item} renderContent={renderMessageContent} />
-          </View>
+        ItemSeparatorComponent={() => <View style={{ height: theme.spacing.sm }} />}
+        renderItem={({ item }: { item: ChatMessage }) => (
+          <ChatMessageBubble message={item} renderContent={renderMessageContent} />
         )}
-        ListFooterComponent={
+        ListHeaderComponent={
           <View>
             {showTypingIndicator ? (
               <View style={{ marginTop: theme.spacing.sm, alignSelf: 'flex-start', paddingHorizontal: theme.spacing.lg }}>

package/src/components/chat/ChatPage.tsx

@@ -21,6 +21,7 @@ export type ChatPageProps = {
    */
   overlay?: React.ReactNode;
   style?: ViewStyle;
+  composerHorizontalPadding?: number;
   onNearBottomChange?: ChatMessageListProps['onNearBottomChange'];
   listRef?: React.RefObject<ChatMessageListRef | null>;
 };
@@ -34,6 +35,7 @@ export function ChatPage({
   composer,
   overlay,
   style,
+  composerHorizontalPadding,
   onNearBottomChange,
   listRef,
 }: ChatPageProps) {
@@ -92,7 +94,7 @@ export function ChatPage({
             left: 0,
             right: 0,
             bottom: 0,
-            paddingHorizontal: theme.spacing.lg,
+            paddingHorizontal: composerHorizontalPadding ?? theme.spacing.md,
             paddingTop: theme.spacing.sm,
             paddingBottom: footerBottomPadding,
           }}

package/src/components/comments/AppCommentsSheet.tsx

@@ -6,7 +6,7 @@ import {
   BottomSheetScrollView,
 } from '@gorhom/bottom-sheet';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { LiquidGlassView, isLiquidGlassSupported } from '@callstack/liquid-glass';
+import { isLiquidGlassSupported } from '@callstack/liquid-glass';
 import { Play } from 'lucide-react-native';
 
 import { useTheme } from '../../theme';
@@ -17,6 +17,7 @@ import { CommentRow } from './CommentRow';
 import { useAppComments } from './useAppComments';
 import { useAppDetails } from './useAppDetails';
 import { useIosKeyboardSnapFix } from './useIosKeyboardSnapFix';
+import { ResettableLiquidGlassView } from '../utils/ResettableLiquidGlassView';
 
 export type AppCommentsSheetProps = {
   appId: string | null;
@@ -117,7 +118,7 @@ export function AppCommentsSheet({ appId, onClose, onCountChange, onPlayApp }: A
             {loadingApp ? 'Loading...' : app?.name || 'Comments'}
           </Text>
 
-          <LiquidGlassView
+          <ResettableLiquidGlassView
             style={[
               { borderRadius: 24 },
               !isLiquidGlassSupported && { backgroundColor: theme.scheme === 'dark' ? '#18181B' : '#F6F6F6' },
@@ -130,10 +131,9 @@ export function AppCommentsSheet({ appId, onClose, onCountChange, onPlayApp }: A
                 width: 32,
                 height: 32,
                 borderRadius: 999,
-                backgroundColor: theme.colors.primary,
+                backgroundColor: withAlpha(theme.colors.primary, appId ? 1 : 0.5),
                 alignItems: 'center',
                 justifyContent: 'center',
-                opacity: appId ? 1 : 0.5,
               }}
             >
               <Pressable
@@ -147,13 +147,13 @@ export function AppCommentsSheet({ appId, onClose, onCountChange, onPlayApp }: A
                     alignItems: 'center',
                     justifyContent: 'center',
                   },
-                  pressed ? { opacity: 0.85 } : null,
+                  pressed ? { transform: [{ scale: 0.96 }] } : null,
                 ]}
               >
                 <Play size={16} color={theme.colors.onPrimary} />
               </Pressable>
             </View>
-          </LiquidGlassView>
+          </ResettableLiquidGlassView>
         </View>
 
         <BottomSheetScrollView

package/src/components/floating-draggable-button/FloatingDraggableButton.tsx

@@ -20,11 +20,12 @@ import Animated, {
   withSpring,
   withTiming,
 } from 'react-native-reanimated';
-import { LiquidGlassView, isLiquidGlassSupported } from '@callstack/liquid-glass';
+import { isLiquidGlassSupported } from '@callstack/liquid-glass';
 
-import { DEFAULT_EDGE_PADDING, DEFAULT_OFFSET, DEFAULT_SIZE, ENTER_ROTATION_FROM_DEG, ENTER_SCALE_FROM, HIDDEN_OPACITY, PULSE_DURATION_MS } from './constants';
+import { DEFAULT_EDGE_PADDING, DEFAULT_OFFSET, DEFAULT_SIZE, ENTER_ROTATION_FROM_DEG, ENTER_SCALE_FROM, PULSE_DURATION_MS } from './constants';
 import type { FloatingDraggableButtonProps } from './types';
 import { useTheme } from '../../theme';
+import { ResettableLiquidGlassView } from '../utils/ResettableLiquidGlassView';
 
 const HIDDEN_OFFSET_X = 20;
 
@@ -35,9 +36,6 @@ const SPRING_ROTATION_IN = { damping: 15, stiffness: 80 } as const;
 const SPRING_ROTATION_GRAB = { damping: 20 } as const;
 const SPRING_SCALE_GRAB = { damping: 15, stiffness: 200 } as const;
 
-const TIMING_OPACITY_IN = { duration: 300, easing: Easing.out(Easing.ease) } as const;
-const TIMING_OPACITY_OUT = { duration: 250, easing: Easing.in(Easing.ease) } as const;
-
 function clamp(value: number, min: number, max: number) {
   'worklet';
   return Math.max(min, Math.min(max, value));
@@ -91,7 +89,6 @@ export function FloatingDraggableButton({
   const translateY = useSharedValue(getHiddenTranslateY(height));
   const scale = useSharedValue(ENTER_SCALE_FROM);
   const rotation = useSharedValue(ENTER_ROTATION_FROM_DEG);
-  const opacity = useSharedValue(1);
   const borderPulse = useSharedValue(0);
   const startPos = useRef({ x: 0, y: 0 });
   const isAnimatingOut = useRef(false);
@@ -99,26 +96,16 @@ export function FloatingDraggableButton({
   const animateToHidden = useCallback(
     (options?: { onFinish?: () => void }) => {
       // Animate back to starting position (reverse of entrance)
-      translateX.value = withSpring(getHiddenTranslateX(size), SPRING_POSITION);
+      const finish = options?.onFinish;
+
+      translateX.value = withSpring(getHiddenTranslateX(size), SPRING_POSITION, (finished?: boolean) => {
+        if (finished && finish) runOnJS(finish)();
+      });
       translateY.value = withSpring(getHiddenTranslateY(height), SPRING_POSITION);
       scale.value = withSpring(ENTER_SCALE_FROM, SPRING_SCALE_IN);
       rotation.value = withSpring(ENTER_ROTATION_FROM_DEG, SPRING_ROTATION_IN);
-
-      const finish = options?.onFinish;
-      if (!finish) {
-        opacity.value = withTiming(HIDDEN_OPACITY, TIMING_OPACITY_OUT);
-        return;
-      }
-
-      opacity.value = withTiming(
-        HIDDEN_OPACITY as unknown as number,
-        TIMING_OPACITY_OUT,
-        (finished?: boolean) => {
-          if (finished) runOnJS(finish)();
-        }
-      );
     },
-    [height, opacity, rotation, scale, size, translateX, translateY]
+    [height, rotation, scale, size, translateX, translateY]
   );
 
   const animateOut = useCallback(() => {
@@ -163,8 +150,7 @@ export function FloatingDraggableButton({
       withSpring(1, SPRING_SCALE_OUT)
     );
     rotation.value = withSpring(0, SPRING_ROTATION_IN);
-    opacity.value = withTiming(1, TIMING_OPACITY_IN);
-  }, [height, offset.bottom, offset.left, opacity, rotation, scale, size, translateX, translateY]);
+  }, [height, offset.bottom, offset.left, rotation, scale, size, translateX, translateY]);
 
   // Initial animation on mount
   useEffect(() => {
@@ -228,7 +214,6 @@ export function FloatingDraggableButton({
       { scale: scale.value },
       { rotate: `${rotation.value}deg` },
     ],
-    opacity: opacity.value,
   }));
 
   const borderAnimatedStyle = useAnimatedStyle(() => {
@@ -257,7 +242,7 @@ export function FloatingDraggableButton({
       accessibilityLabel={ariaLabel}
     >
       <Animated.View style={[{ width: size, height: size, borderRadius: size / 2 }, borderAnimatedStyle]}>
-        <LiquidGlassView
+        <ResettableLiquidGlassView
           style={[{ flex: 1, borderRadius: size / 2 }, !isLiquidGlassSupported && { backgroundColor: fallbackBgColor }]}
           interactive
           effect="clear"
@@ -271,7 +256,7 @@ export function FloatingDraggableButton({
           >
             {children ?? <View />}
           </Pressable>
-        </LiquidGlassView>
+        </ResettableLiquidGlassView>
       </Animated.View>
 
       {badgeCount > 0 && (

package/src/components/preview/StatsBar.tsx

@@ -1,11 +1,12 @@
 import * as React from 'react';
 import { Pressable, View, type ViewStyle } from 'react-native';
-import { LiquidGlassView, isLiquidGlassSupported } from '@callstack/liquid-glass';
+import { isLiquidGlassSupported } from '@callstack/liquid-glass';
 import { Heart, MessageCircle } from 'lucide-react-native';
 
 import { useTheme } from '../../theme';
 import { Text } from '../primitives/Text';
 import { MergeIcon } from '../icons/MergeIcon';
+import { ResettableLiquidGlassView } from '../utils/ResettableLiquidGlassView';
 
 export type StatsBarProps = {
   likeCount: number;
@@ -41,7 +42,7 @@ export function StatsBar({
         style,
       ]}
     >
-      <LiquidGlassView
+      <ResettableLiquidGlassView
         style={[
           { borderRadius: 100, overflow: 'hidden' },
           fixedWidth ? { width: fixedWidth } : undefined,
@@ -101,7 +102,7 @@ export function StatsBar({
             </Text>
           </View>
         </View>
-      </LiquidGlassView>
+      </ResettableLiquidGlassView>
     </View>
   );
 }

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

@@ -55,7 +55,7 @@ export type StudioBottomSheetProps = {
 export function StudioBottomSheet({
   open,
   onOpenChange,
-  snapPoints = ['80%', '100%'],
+  snapPoints = ['100%'],
   sheetRef,
   background,
   children,
@@ -117,9 +117,9 @@ export function StudioBottomSheet({
       ref={resolvedSheetRef}
       index={open ? snapPoints.length - 1 : -1}
       snapPoints={snapPoints}
+      enableDynamicSizing={false}
       enablePanDownToClose
-      keyboardBehavior="interactive"
-      keyboardBlurBehavior="restore"
+      enableContentPanningGesture={false}
       android_keyboardInputMode="adjustResize"
       backgroundComponent={(props: BottomSheetBackgroundProps) => (
         <StudioSheetBackground {...props} renderBackground={background?.renderBackground} />

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

@@ -1,9 +1,10 @@
 import * as React from 'react';
 import { Platform, View, type ViewStyle } from 'react-native';
 import type { BottomSheetBackgroundProps } from '@gorhom/bottom-sheet';
-import { LiquidGlassView, isLiquidGlassSupported } from '@callstack/liquid-glass';
+import { isLiquidGlassSupported } from '@callstack/liquid-glass';
 
 import { useTheme } from '../../theme';
+import { ResettableLiquidGlassView } from '../utils/ResettableLiquidGlassView';
 
 export type StudioSheetBackgroundProps = BottomSheetBackgroundProps & {
   /**
@@ -35,7 +36,7 @@ export function StudioSheetBackground({
 
   return (
     <>
-      <LiquidGlassView
+      <ResettableLiquidGlassView
         style={[containerStyle, !isLiquidGlassSupported && { backgroundColor: fallbackBgColor }]}
         effect="regular"
       />

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

@@ -1,8 +1,10 @@
 import * as React from 'react';
 import { Pressable, View, type ViewStyle } from 'react-native';
-import { LiquidGlassView, isLiquidGlassSupported } from '@callstack/liquid-glass';
+import { isLiquidGlassSupported } from '@callstack/liquid-glass';
 
 import { useTheme } from '../../theme';
+import { withAlpha } from '../utils/color';
+import { ResettableLiquidGlassView } from '../utils/ResettableLiquidGlassView';
 
 export type StudioSheetHeaderIconButtonProps = {
   onPress: () => void;
@@ -38,11 +40,12 @@ export function StudioSheetHeaderIconButton({
   const glassInnerBg = intent === 'danger' ? theme.colors.danger : theme.colors.primary;
 
   const resolvedOpacity = disabled ? 0.6 : pressed ? 0.9 : 1;
+  const glassBg = withAlpha(glassInnerBg, resolvedOpacity);
 
   return (
     <View style={style}>
       {appearance === 'glass' ? (
-        <LiquidGlassView
+        <ResettableLiquidGlassView
           style={[{ borderRadius: 100 }, !isLiquidGlassSupported && { backgroundColor: glassFallbackBg }]}
           interactive
           effect="clear"
@@ -54,8 +57,7 @@ export function StudioSheetHeaderIconButton({
               borderRadius: 100,
               alignItems: 'center',
               justifyContent: 'center',
-              backgroundColor: glassInnerBg,
-              opacity: resolvedOpacity,
+              backgroundColor: glassBg,
             }}
           >
             <Pressable
@@ -73,7 +75,7 @@ export function StudioSheetHeaderIconButton({
               {children}
             </Pressable>
           </View>
-        </LiquidGlassView>
+        </ResettableLiquidGlassView>
       ) : (
         <View
           style={{

package/src/components/utils/ResettableLiquidGlassView.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { LiquidGlassView } from '@callstack/liquid-glass';
+
+import { useLiquidGlassResetToken } from './liquidGlassReset';
+
+export type ResettableLiquidGlassViewProps = React.ComponentProps<typeof LiquidGlassView>;
+
+export function ResettableLiquidGlassView({ children, ...props }: ResettableLiquidGlassViewProps) {
+  const token = useLiquidGlassResetToken();
+  const [layoutBootKey, setLayoutBootKey] = React.useState(0);
+  const sawNonZeroLayoutRef = React.useRef(false);
+
+  const onLayout: NonNullable<ResettableLiquidGlassViewProps['onLayout']> = (e) => {
+    props.onLayout?.(e);
+    const { width, height } = e.nativeEvent.layout;
+    if (width > 0 && height > 0 && !sawNonZeroLayoutRef.current) {
+      sawNonZeroLayoutRef.current = true;
+      setLayoutBootKey((k) => k + 1);
+    }
+  };
+
+  return (
+    <LiquidGlassView key={`liquid-glass-${token}-${layoutBootKey}`} {...props} onLayout={onLayout}>
+      {children}
+    </LiquidGlassView>
+  );
+}
+

package/src/components/utils/liquidGlassReset.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { AppState, type AppStateStatus, Platform } from 'react-native';
+
+const LiquidGlassResetContext = React.createContext(0);
+
+export function LiquidGlassResetProvider({
+  children,
+  resetTriggers = [],
+}: {
+  children: React.ReactNode;
+  resetTriggers?: React.DependencyList;
+}) {
+  const [token, setToken] = React.useState(0);
+
+  React.useEffect(() => {
+    if (Platform.OS !== 'ios') return;
+
+    const onChange = (state: AppStateStatus) => {
+      if (state === 'active') setToken((t) => t + 1);
+    };
+
+    const sub = AppState.addEventListener('change', onChange);
+    return () => sub.remove();
+  }, []);
+
+  React.useEffect(() => {
+    setToken((t) => t + 1);
+  }, resetTriggers);
+
+  return <LiquidGlassResetContext.Provider value={token}>{children}</LiquidGlassResetContext.Provider>;
+}
+
+export function useLiquidGlassResetToken() {
+  return React.useContext(LiquidGlassResetContext);
+}
+

package/src/studio/ComergeStudio.tsx

@@ -13,6 +13,7 @@ import { useStudioActions } from './hooks/useStudioActions';
 import { hasNoOutcomeAfterLastHuman } from './lib/chat';
 import { RuntimeRenderer } from './ui/RuntimeRenderer';
 import { StudioOverlay } from './ui/StudioOverlay';
+import { LiquidGlassResetProvider } from '../components/utils/liquidGlassReset';
 
 export type ComergeStudioProps = {
   appId: string;
@@ -46,20 +47,22 @@ export function ComergeStudio({
     <StudioBootstrap apiKey={apiKey}>
       {({ userId }) => (
         <BottomSheetModalProvider>
-          <ComergeStudioInner
-            userId={userId}
-            activeAppId={activeAppId}
-            setActiveAppId={setActiveAppId}
-            runtimeAppId={runtimeAppId}
-            setRuntimeAppId={setRuntimeAppId}
-            pendingRuntimeTargetAppId={pendingRuntimeTargetAppId}
-            setPendingRuntimeTargetAppId={setPendingRuntimeTargetAppId}
-            appKey={appKey}
-            platform={platform}
-            onNavigateHome={onNavigateHome}
-            captureTargetRef={captureTargetRef}
-            style={style}
-          />
+          <LiquidGlassResetProvider resetTriggers={[appId, activeAppId, runtimeAppId]}>
+            <ComergeStudioInner
+              userId={userId}
+              activeAppId={activeAppId}
+              setActiveAppId={setActiveAppId}
+              runtimeAppId={runtimeAppId}
+              setRuntimeAppId={setRuntimeAppId}
+              pendingRuntimeTargetAppId={pendingRuntimeTargetAppId}
+              setPendingRuntimeTargetAppId={setPendingRuntimeTargetAppId}
+              appKey={appKey}
+              platform={platform}
+              onNavigateHome={onNavigateHome}
+              captureTargetRef={captureTargetRef}
+              style={style}
+            />
+          </LiquidGlassResetProvider>
         </BottomSheetModalProvider>
       )}
     </StudioBootstrap>
@@ -125,6 +128,34 @@ function ComergeStudioInner({
     canRequestLatest: runtimeApp?.status === 'ready',
   });
 
+  const sawEditingOnActiveAppRef = React.useRef(false);
+  const [showPostEditPreparing, setShowPostEditPreparing] = React.useState(false);
+  React.useEffect(() => {
+    sawEditingOnActiveAppRef.current = false;
+    setShowPostEditPreparing(false);
+  }, [activeAppId]);
+
+  React.useEffect(() => {
+    if (!app?.id) return;
+    if (app.status === 'editing') {
+      sawEditingOnActiveAppRef.current = true;
+      setShowPostEditPreparing(false);
+      return;
+    }
+    if (app.status === 'ready' && sawEditingOnActiveAppRef.current) {
+      setShowPostEditPreparing(true);
+      sawEditingOnActiveAppRef.current = false;
+    }
+  }, [app?.id, app?.status]);
+
+  React.useEffect(() => {
+    if (!showPostEditPreparing) return;
+    const stillProcessingBaseBundle = bundle.loading && bundle.loadingMode === 'base' && !bundle.isTesting;
+    if (!stillProcessingBaseBundle) {
+      setShowPostEditPreparing(false);
+    }
+  }, [showPostEditPreparing, bundle.loading, bundle.loadingMode, bundle.isTesting]);
+
   const threadId = app?.threadId ?? '';
   const thread = useThreadMessages(threadId);
 
@@ -173,7 +204,12 @@ function ComergeStudioInner({
   return (
       <View style={[{ flex: 1 }, style]}>
       <View ref={captureTargetRef} style={{ flex: 1 }} collapsable={false}>
-        <RuntimeRenderer appKey={appKey} bundlePath={bundle.bundlePath} renderToken={bundle.renderToken} />
+        <RuntimeRenderer
+          appKey={appKey}
+          bundlePath={bundle.bundlePath}
+          forcePreparing={showPostEditPreparing}
+          renderToken={bundle.renderToken}
+        />
 
         <StudioOverlay
           captureTargetRef={captureTargetRef}