@comergehq/studio 0.1.5 → 0.1.6

package/dist/index.mjs

@@ -1637,11 +1637,11 @@ function RuntimeRenderer({ appKey, bundlePath, renderToken, style }) {
 
 // src/studio/ui/StudioOverlay.tsx
 import * as React37 from "react";
-import { Keyboard as Keyboard3, View as View44, useWindowDimensions as useWindowDimensions4 } from "react-native";
+import { Keyboard as Keyboard5, Platform as Platform7, View as View44, useWindowDimensions as useWindowDimensions4 } from "react-native";
 
 // src/components/studio-sheet/StudioBottomSheet.tsx
 import * as React8 from "react";
-import { View as View4 } from "react-native";
+import { Keyboard, Platform as Platform2, View as View4 } from "react-native";
 import BottomSheet from "@gorhom/bottom-sheet";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
@@ -1710,6 +1710,16 @@ function StudioBottomSheet({
   const insets = useSafeAreaInsets();
   const internalSheetRef = React8.useRef(null);
   const resolvedSheetRef = sheetRef ?? internalSheetRef;
+  React8.useEffect(() => {
+    if (Platform2.OS !== "ios") return;
+    const sub = Keyboard.addListener("keyboardDidHide", () => {
+      const sheet = resolvedSheetRef.current;
+      if (!sheet || !open) return;
+      const targetIndex = snapPoints.length - 1;
+      setTimeout(() => sheet.snapToIndex(targetIndex), 10);
+    });
+    return () => sub.remove();
+  }, [open, resolvedSheetRef, snapPoints.length]);
   React8.useEffect(() => {
     const sheet = resolvedSheetRef.current;
     if (!sheet) return;
@@ -1732,12 +1742,12 @@ function StudioBottomSheet({
       index: open ? snapPoints.length - 1 : -1,
       snapPoints,
       enablePanDownToClose: true,
-      keyboardBehavior: "extend",
+      keyboardBehavior: Platform2.OS === "ios" ? "interactive" : "extend",
       keyboardBlurBehavior: "restore",
       android_keyboardInputMode: "adjustResize",
       backgroundComponent: (props) => /* @__PURE__ */ jsx5(StudioSheetBackground, { ...props, renderBackground: background == null ? void 0 : background.renderBackground }),
       topInset: insets.top,
-      bottomInset: insets.bottom,
+      bottomInset: 0,
       handleIndicatorStyle: { backgroundColor: theme.colors.handleIndicator },
       onChange: handleChange,
       ...bottomSheetProps,
@@ -2711,7 +2721,7 @@ var styles3 = StyleSheet3.create({
 
 // src/components/comments/AppCommentsSheet.tsx
 import * as React20 from "react";
-import { ActivityIndicator as ActivityIndicator3, Keyboard as Keyboard2, Platform as Platform3, Pressable as Pressable5, View as View14 } from "react-native";
+import { ActivityIndicator as ActivityIndicator3, Keyboard as Keyboard3, Platform as Platform4, Pressable as Pressable5, View as View14 } from "react-native";
 import {
   BottomSheetBackdrop,
   BottomSheetModal,
@@ -3315,13 +3325,13 @@ function useAppDetails(appId) {
 
 // src/components/comments/useIosKeyboardSnapFix.ts
 import * as React19 from "react";
-import { Keyboard, Platform as Platform2 } from "react-native";
+import { Keyboard as Keyboard2, Platform as Platform3 } from "react-native";
 function useIosKeyboardSnapFix(sheetRef) {
   const [keyboardVisible, setKeyboardVisible] = React19.useState(false);
   React19.useEffect(() => {
-    if (Platform2.OS !== "ios") return;
-    const show = Keyboard.addListener("keyboardWillShow", () => setKeyboardVisible(true));
-    const hide = Keyboard.addListener("keyboardWillHide", () => {
+    if (Platform3.OS !== "ios") return;
+    const show = Keyboard2.addListener("keyboardWillShow", () => setKeyboardVisible(true));
+    const hide = Keyboard2.addListener("keyboardWillHide", () => {
       setKeyboardVisible(false);
       setTimeout(() => {
         var _a, _b;
@@ -3387,8 +3397,8 @@ function AppCommentsSheet({ appId, onClose, onCountChange, onPlayApp }) {
       onChange: handleChange,
       backgroundStyle: {
         backgroundColor: theme.scheme === "dark" ? "#0B080F" : "#FFFFFF",
-        borderTopLeftRadius: Platform3.OS === "ios" ? 39 : 16,
-        borderTopRightRadius: Platform3.OS === "ios" ? 39 : 16
+        borderTopLeftRadius: Platform4.OS === "ios" ? 39 : 16,
+        borderTopRightRadius: Platform4.OS === "ios" ? 39 : 16
       },
       handleIndicatorStyle: { backgroundColor: theme.colors.handleIndicator },
       keyboardBehavior: "interactive",
@@ -3495,7 +3505,7 @@ function AppCommentsSheet({ appId, onClose, onCountChange, onPlayApp }) {
               bottom: 0,
               paddingHorizontal: theme.spacing.lg,
               paddingTop: theme.spacing.sm,
-              paddingBottom: Platform3.OS === "ios" ? keyboardVisible ? theme.spacing.lg : insets.bottom : insets.bottom + 10,
+              paddingBottom: Platform4.OS === "ios" ? keyboardVisible ? theme.spacing.lg : insets.bottom : insets.bottom + 10,
               borderTopWidth: 1,
               borderTopColor: withAlpha(theme.colors.border, 0.1),
               backgroundColor: withAlpha(theme.colors.background, 0.8)
@@ -3509,7 +3519,7 @@ function AppCommentsSheet({ appId, onClose, onCountChange, onPlayApp }) {
                 useBottomSheetTextInput: true,
                 onSend: async (text) => {
                   await create(text);
-                  Keyboard2.dismiss();
+                  Keyboard3.dismiss();
                 }
               }
             )
@@ -4394,7 +4404,7 @@ import { Animated as Animated7, Pressable as Pressable9, View as View28 } from "
 import { Ban, Check as Check3, CheckCheck, ChevronDown as ChevronDown2 } from "lucide-react-native";
 
 // src/components/primitives/MarkdownText.tsx
-import { Platform as Platform4, View as View27 } from "react-native";
+import { Platform as Platform5, View as View27 } from "react-native";
 import Markdown from "react-native-markdown-display";
 import { jsx as jsx37 } from "react/jsx-runtime";
 function MarkdownText({ markdown, variant = "chat", bodyColor, style }) {
@@ -4420,7 +4430,7 @@ function MarkdownText({ markdown, variant = "chat", bodyColor, style }) {
           paddingHorizontal: variant === "mergeRequest" ? 6 : 4,
           paddingVertical: variant === "mergeRequest" ? 2 : 0,
           borderRadius: variant === "mergeRequest" ? 6 : 4,
-          fontFamily: Platform4.OS === "ios" ? "Menlo" : "monospace",
+          fontFamily: Platform5.OS === "ios" ? "Menlo" : "monospace",
           fontSize: 13
         },
         code_block: {
@@ -5433,7 +5443,9 @@ import { ActivityIndicator as ActivityIndicator8, View as View41 } from "react-n
 
 // src/components/chat/ChatPage.tsx
 import * as React33 from "react";
-import { View as View37 } from "react-native";
+import { Keyboard as Keyboard4, Platform as Platform6, View as View37 } from "react-native";
+import { useSafeAreaInsets as useSafeAreaInsets4 } from "react-native-safe-area-context";
+import Animated11, { useAnimatedKeyboard, useAnimatedStyle as useAnimatedStyle2 } from "react-native-reanimated";
 
 // src/components/chat/ChatMessageList.tsx
 import * as React32 from "react";
@@ -5625,7 +5637,34 @@ function ChatPage({
   listRef
 }) {
   const theme = useTheme();
+  const insets = useSafeAreaInsets4();
   const [composerHeight, setComposerHeight] = React33.useState(0);
+  const [keyboardVisible, setKeyboardVisible] = React33.useState(false);
+  const animatedKeyboard = useAnimatedKeyboard();
+  React33.useEffect(() => {
+    if (Platform6.OS !== "ios") return;
+    const show = Keyboard4.addListener("keyboardWillShow", () => setKeyboardVisible(true));
+    const hide = Keyboard4.addListener("keyboardWillHide", () => setKeyboardVisible(false));
+    return () => {
+      show.remove();
+      hide.remove();
+    };
+  }, []);
+  const footerBottomPadding = Platform6.OS === "ios" ? keyboardVisible ? 0 : insets.bottom : insets.bottom + 10;
+  const footerAnimatedStyle = useAnimatedStyle2(() => {
+    if (Platform6.OS !== "ios") return { paddingBottom: insets.bottom + 10 };
+    return { paddingBottom: animatedKeyboard.height.value > 0 ? 0 : insets.bottom };
+  });
+  const overlayBottom = composerHeight + footerBottomPadding + theme.spacing.lg;
+  const resolvedOverlay = React33.useMemo(() => {
+    var _a;
+    if (!overlay) return null;
+    if (!React33.isValidElement(overlay)) return overlay;
+    const prevStyle = (_a = overlay.props) == null ? void 0 : _a.style;
+    return React33.cloneElement(overlay, {
+      style: [prevStyle, { bottom: overlayBottom }]
+    });
+  }, [overlay, overlayBottom]);
   return /* @__PURE__ */ jsxs28(View37, { style: [{ flex: 1 }, style], children: [
     header ? /* @__PURE__ */ jsx47(View37, { children: header }) : null,
     topBanner ? /* @__PURE__ */ jsx47(View37, { style: { paddingHorizontal: theme.spacing.lg, paddingTop: theme.spacing.sm }, children: topBanner }) : null,
@@ -5638,26 +5677,42 @@ function ChatPage({
           showTypingIndicator,
           renderMessageContent,
           onNearBottomChange,
-          contentStyle: { paddingBottom: theme.spacing.xl + composerHeight }
+          contentStyle: { paddingBottom: theme.spacing.xl + composerHeight + footerBottomPadding }
         }
       ),
-      overlay
-    ] }),
-    /* @__PURE__ */ jsx47(
-      ChatComposer,
-      {
-        ...composer,
-        attachments: composer.attachments ?? [],
-        onLayout: ({ height }) => setComposerHeight(height)
-      }
-    )
+      resolvedOverlay,
+      /* @__PURE__ */ jsx47(
+        Animated11.View,
+        {
+          style: [
+            {
+              position: "absolute",
+              left: 0,
+              right: 0,
+              bottom: 0,
+              paddingHorizontal: theme.spacing.lg,
+              paddingTop: theme.spacing.sm
+            },
+            footerAnimatedStyle
+          ],
+          children: /* @__PURE__ */ jsx47(
+            ChatComposer,
+            {
+              ...composer,
+              attachments: composer.attachments ?? [],
+              onLayout: ({ height }) => setComposerHeight(height)
+            }
+          )
+        }
+      )
+    ] })
   ] });
 }
 
 // src/components/chat/ScrollToBottomButton.tsx
 import * as React34 from "react";
 import { Pressable as Pressable12, View as View38 } from "react-native";
-import Animated11, { Easing as Easing2, useAnimatedStyle as useAnimatedStyle2, useSharedValue as useSharedValue2, withTiming as withTiming2 } from "react-native-reanimated";
+import Animated12, { Easing as Easing2, useAnimatedStyle as useAnimatedStyle3, useSharedValue as useSharedValue2, withTiming as withTiming2 } from "react-native-reanimated";
 import { jsx as jsx48 } from "react/jsx-runtime";
 function ScrollToBottomButton({ visible, onPress, children, style }) {
   const theme = useTheme();
@@ -5666,14 +5721,14 @@ function ScrollToBottomButton({ visible, onPress, children, style }) {
   React34.useEffect(() => {
     progress.value = withTiming2(visible ? 1 : 0, { duration: 200, easing: Easing2.out(Easing2.ease) });
   }, [progress, visible]);
-  const animStyle = useAnimatedStyle2(() => ({
+  const animStyle = useAnimatedStyle3(() => ({
     opacity: progress.value,
     transform: [{ translateY: (1 - progress.value) * 20 }]
   }));
   const bg = theme.scheme === "dark" ? "rgba(39,39,42,0.9)" : "rgba(244,244,245,0.95)";
   const border = theme.scheme === "dark" ? withAlpha("#FFFFFF", 0.12) : withAlpha("#000000", 0.08);
   return /* @__PURE__ */ jsx48(
-    Animated11.View,
+    Animated12.View,
     {
       pointerEvents: visible ? "auto" : "none",
       style: [
@@ -6154,7 +6209,7 @@ function StudioOverlay({
   );
   const closeSheet = React37.useCallback(() => {
     setSheetOpen(false);
-    Keyboard3.dismiss();
+    Keyboard5.dismiss();
   }, []);
   const openSheet = React37.useCallback(() => setSheetOpen(true), []);
   const goToChat = React37.useCallback(() => {
@@ -6162,8 +6217,22 @@ function StudioOverlay({
     openSheet();
   }, [openSheet]);
   const backToPreview = React37.useCallback(() => {
-    Keyboard3.dismiss();
-    setActivePage("preview");
+    if (Platform7.OS !== "ios") {
+      Keyboard5.dismiss();
+      setActivePage("preview");
+      return;
+    }
+    let done = false;
+    const finalize = () => {
+      if (done) return;
+      done = true;
+      sub.remove();
+      clearTimeout(t);
+      setActivePage("preview");
+    };
+    const sub = Keyboard5.addListener("keyboardDidHide", finalize);
+    const t = setTimeout(finalize, 350);
+    Keyboard5.dismiss();
   }, []);
   const startDraw = React37.useCallback(() => {
     setDrawing(true);