@comergehq/studio 0.1.10 → 0.1.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comergehq/studio",
-  "version": "0.1.10",
+  "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/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/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>