@bbearai/react-native 0.8.4 → 0.9.0

package/dist/index.js

@@ -12935,7 +12935,7 @@ var BugBearClient = class {
   async updateAssignmentStatus(assignmentId, status, options) {
     try {
       await this.ensureReady();
-      const { data: currentAssignment, error: fetchError } = await this.supabase.from("test_assignments").select("status, started_at").eq("id", assignmentId).single();
+      const { data: currentAssignment, error: fetchError } = await this.supabase.from("test_assignments").select("status, started_at, tester_id, project_id").eq("id", assignmentId).single();
       if (fetchError || !currentAssignment) {
         console.error("BugBear: Assignment not found", {
           message: fetchError?.message,
@@ -12956,6 +12956,19 @@ var BugBearClient = class {
           const completedAt = /* @__PURE__ */ new Date();
           durationSeconds = Math.round((completedAt.getTime() - startedAt.getTime()) / 1e3);
           updateData.duration_seconds = durationSeconds;
+          if (currentAssignment.tester_id && currentAssignment.project_id) {
+            try {
+              const { data: activeTime } = await this.supabase.rpc("compute_assignment_active_time", {
+                p_tester_id: currentAssignment.tester_id,
+                p_project_id: currentAssignment.project_id,
+                p_started_at: currentAssignment.started_at,
+                p_completed_at: updateData.completed_at
+              });
+              updateData.active_seconds = typeof activeTime === "number" ? activeTime : Math.min(durationSeconds, 1800);
+            } catch {
+              updateData.active_seconds = Math.min(durationSeconds, 1800);
+            }
+          }
         }
       }
       if (options?.notes) {
@@ -13034,6 +13047,7 @@ var BugBearClient = class {
         started_at: (/* @__PURE__ */ new Date()).toISOString(),
         completed_at: null,
         duration_seconds: null,
+        active_seconds: null,
         skip_reason: null
       }).eq("id", assignmentId).eq("status", current.status);
       if (error) {
@@ -19115,14 +19129,31 @@ function BugBearButton({
 }) {
   const { shouldShowWidget, testerInfo, isLoading, unreadCount, assignments, widgetMode, widgetColorScheme } = useBugBear();
   const { currentScreen, canGoBack, push, pop, replace, reset } = useNavigation();
-  const [modalVisible, setModalVisible] = (0, import_react23.useState)(false);
+  const [panelVisible, setPanelVisible] = (0, import_react23.useState)(false);
+  const panelAnim = (0, import_react23.useRef)(new import_react_native22.Animated.Value(0)).current;
   const styles5 = (0, import_react23.useMemo)(() => createStyles16(), [widgetColorScheme]);
   const screenCaptureRef = (0, import_react23.useRef)(null);
-  const openModal = () => {
+  const openPanel = () => {
     captureAppScreen().then((uri) => {
       screenCaptureRef.current = uri;
     });
-    setModalVisible(true);
+    setPanelVisible(true);
+    import_react_native22.Animated.spring(panelAnim, {
+      toValue: 1,
+      useNativeDriver: true,
+      friction: 8,
+      tension: 65
+    }).start();
+  };
+  const closePanel = () => {
+    import_react_native22.Keyboard.dismiss();
+    import_react_native22.Animated.timing(panelAnim, {
+      toValue: 0,
+      duration: 250,
+      useNativeDriver: true
+    }).start(() => {
+      setPanelVisible(false);
+    });
   };
   const getInitialPosition = () => {
     const buttonSize = 56;
@@ -19173,7 +19204,7 @@ function BugBearButton({
           tension: 40
         }).start();
         if (!isDragging.current && Math.abs(gs.dx) < 5 && Math.abs(gs.dy) < 5) {
-          openModal();
+          openPanel();
         }
         isDragging.current = false;
       }
@@ -19181,6 +19212,19 @@ function BugBearButton({
   ).current;
   const pendingTests = widgetMode === "qa" ? assignments.filter((a) => a.status === "pending" || a.status === "in_progress").length : 0;
   const badgeCount = pendingTests + unreadCount;
+  (0, import_react23.useEffect)(() => {
+    if (!panelVisible || import_react_native22.Platform.OS !== "android") return;
+    const handler = import_react_native22.BackHandler.addEventListener("hardwareBackPress", () => {
+      if (canGoBack) {
+        import_react_native22.Keyboard.dismiss();
+        pop();
+      } else {
+        closePanel();
+      }
+      return true;
+    });
+    return () => handler.remove();
+  }, [panelVisible, canGoBack]);
   if (!shouldShowWidget) return null;
   const getHeaderTitle = () => {
     switch (currentScreen.name) {
@@ -19219,8 +19263,7 @@ function BugBearButton({
     }
   };
   const handleClose = () => {
-    import_react_native22.Keyboard.dismiss();
-    setModalVisible(false);
+    closePanel();
   };
   const nav = {
     push: (screen) => {
@@ -19292,7 +19335,7 @@ function BugBearButton({
         return /* @__PURE__ */ import_react23.default.createElement(HomeScreen, { nav });
     }
   };
-  return /* @__PURE__ */ import_react23.default.createElement(import_react23.default.Fragment, null, /* @__PURE__ */ import_react23.default.createElement(
+  return /* @__PURE__ */ import_react23.default.createElement(import_react23.default.Fragment, null, !panelVisible && /* @__PURE__ */ import_react23.default.createElement(
     import_react_native22.Animated.View,
     {
       style: [styles5.fabContainer, { transform: pan.getTranslateTransform() }, buttonStyle],
@@ -19302,27 +19345,37 @@ function BugBearButton({
       import_react_native22.TouchableOpacity,
       {
         style: styles5.fab,
-        onPress: openModal,
+        onPress: openPanel,
         activeOpacity: draggable ? 1 : 0.7
       },
       /* @__PURE__ */ import_react23.default.createElement(import_react_native22.Image, { source: { uri: BUGBEAR_LOGO_BASE64 }, style: styles5.fabIcon }),
       badgeCount > 0 && /* @__PURE__ */ import_react23.default.createElement(import_react_native22.View, { style: styles5.badge }, /* @__PURE__ */ import_react23.default.createElement(import_react_native22.Text, { style: styles5.badgeText }, badgeCount > 9 ? "9+" : badgeCount))
     )
-  ), /* @__PURE__ */ import_react23.default.createElement(
-    import_react_native22.Modal,
+  ), panelVisible && /* @__PURE__ */ import_react23.default.createElement(import_react_native22.View, { style: styles5.panelWrapper, pointerEvents: "box-none" }, /* @__PURE__ */ import_react23.default.createElement(
+    import_react_native22.KeyboardAvoidingView,
     {
-      visible: modalVisible,
-      animationType: "slide",
-      transparent: true,
-      onRequestClose: handleClose
+      behavior: import_react_native22.Platform.OS === "ios" ? "padding" : "height",
+      style: styles5.panelKeyboardAvoid,
+      pointerEvents: "box-none"
     },
     /* @__PURE__ */ import_react23.default.createElement(
-      import_react_native22.KeyboardAvoidingView,
+      import_react_native22.Animated.View,
       {
-        behavior: import_react_native22.Platform.OS === "ios" ? "padding" : "height",
-        style: styles5.modalOverlay
+        style: [
+          styles5.panelContainer,
+          {
+            transform: [{
+              translateY: panelAnim.interpolate({
+                inputRange: [0, 1],
+                outputRange: [screenHeight, 0]
+              })
+            }]
+          }
+        ]
       },
-      /* @__PURE__ */ import_react23.default.createElement(import_react_native22.View, { style: styles5.modalContainer }, /* @__PURE__ */ import_react23.default.createElement(import_react_native22.View, { style: styles5.header }, /* @__PURE__ */ import_react23.default.createElement(import_react_native22.View, { style: styles5.headerLeft }, canGoBack ? /* @__PURE__ */ import_react23.default.createElement(import_react_native22.TouchableOpacity, { onPress: () => nav.pop(), style: styles5.backButton }, /* @__PURE__ */ import_react23.default.createElement(import_react_native22.Text, { style: styles5.backText }, "\u2190 Back")) : /* @__PURE__ */ import_react23.default.createElement(import_react_native22.View, { style: styles5.headerTitleRow }, /* @__PURE__ */ import_react23.default.createElement(import_react_native22.Text, { style: styles5.headerTitle }, "BugBear"), testerInfo && /* @__PURE__ */ import_react23.default.createElement(import_react_native22.TouchableOpacity, { onPress: () => push({ name: "PROFILE" }) }, /* @__PURE__ */ import_react23.default.createElement(import_react_native22.Text, { style: styles5.headerName }, testerInfo.name, " \u270E")))), getHeaderTitle() ? /* @__PURE__ */ import_react23.default.createElement(import_react_native22.Text, { style: styles5.headerScreenTitle, numberOfLines: 1 }, getHeaderTitle()) : null, /* @__PURE__ */ import_react23.default.createElement(import_react_native22.View, { style: styles5.headerActions }, currentScreen.name !== "HOME" && /* @__PURE__ */ import_react23.default.createElement(import_react_native22.TouchableOpacity, { onPress: () => nav.reset(), style: styles5.homeButton }, /* @__PURE__ */ import_react23.default.createElement(import_react_native22.Text, { style: styles5.homeIcon }, "\u2302")), /* @__PURE__ */ import_react23.default.createElement(import_react_native22.TouchableOpacity, { onPress: handleClose, style: styles5.closeButton }, /* @__PURE__ */ import_react23.default.createElement(import_react_native22.Text, { style: styles5.closeText }, "\u2715")))), /* @__PURE__ */ import_react23.default.createElement(
+      /* @__PURE__ */ import_react23.default.createElement(import_react_native22.View, { style: styles5.panelHandle }, /* @__PURE__ */ import_react23.default.createElement(import_react_native22.View, { style: styles5.panelHandleBar })),
+      /* @__PURE__ */ import_react23.default.createElement(import_react_native22.View, { style: styles5.header }, /* @__PURE__ */ import_react23.default.createElement(import_react_native22.View, { style: styles5.headerLeft }, canGoBack ? /* @__PURE__ */ import_react23.default.createElement(import_react_native22.TouchableOpacity, { onPress: () => nav.pop(), style: styles5.backButton }, /* @__PURE__ */ import_react23.default.createElement(import_react_native22.Text, { style: styles5.backText }, "\u2190 Back")) : /* @__PURE__ */ import_react23.default.createElement(import_react_native22.View, { style: styles5.headerTitleRow }, /* @__PURE__ */ import_react23.default.createElement(import_react_native22.Text, { style: styles5.headerTitle }, "BugBear"), testerInfo && /* @__PURE__ */ import_react23.default.createElement(import_react_native22.TouchableOpacity, { onPress: () => push({ name: "PROFILE" }) }, /* @__PURE__ */ import_react23.default.createElement(import_react_native22.Text, { style: styles5.headerName }, testerInfo.name, " \u270E")))), getHeaderTitle() ? /* @__PURE__ */ import_react23.default.createElement(import_react_native22.Text, { style: styles5.headerScreenTitle, numberOfLines: 1 }, getHeaderTitle()) : null, /* @__PURE__ */ import_react23.default.createElement(import_react_native22.View, { style: styles5.headerActions }, currentScreen.name !== "HOME" && /* @__PURE__ */ import_react23.default.createElement(import_react_native22.TouchableOpacity, { onPress: () => nav.reset(), style: styles5.homeButton }, /* @__PURE__ */ import_react23.default.createElement(import_react_native22.Text, { style: styles5.homeIcon }, "\u2302")), /* @__PURE__ */ import_react23.default.createElement(import_react_native22.TouchableOpacity, { onPress: handleClose, style: styles5.closeButton }, /* @__PURE__ */ import_react23.default.createElement(import_react_native22.Text, { style: styles5.closeText }, "\u2715")))),
+      /* @__PURE__ */ import_react23.default.createElement(
         import_react_native22.ScrollView,
         {
           style: styles5.content,
@@ -19331,9 +19384,9 @@ function BugBearButton({
           showsVerticalScrollIndicator: false
         },
         isLoading ? /* @__PURE__ */ import_react23.default.createElement(import_react_native22.View, { style: styles5.loadingContainer }, /* @__PURE__ */ import_react23.default.createElement(import_react_native22.ActivityIndicator, { size: "large", color: colors.blue }), /* @__PURE__ */ import_react23.default.createElement(import_react_native22.Text, { style: styles5.loadingText }, "Loading...")) : renderScreen()
-      ))
+      )
     )
-  ));
+  )));
 }
 function createStyles16() {
   return import_react_native22.StyleSheet.create({
@@ -19377,18 +19430,42 @@ function createStyles16() {
       fontSize: 11,
       fontWeight: "700"
     },
-    // Modal
-    modalOverlay: {
+    // Panel (replaces Modal — no backdrop, app stays interactive)
+    panelWrapper: {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      zIndex: 9998,
+      justifyContent: "flex-end"
+    },
+    panelKeyboardAvoid: {
       flex: 1,
-      justifyContent: "flex-end",
-      backgroundColor: "rgba(0,0,0,0.5)"
+      justifyContent: "flex-end"
     },
-    modalContainer: {
+    panelContainer: {
       backgroundColor: colors.bg,
       borderTopLeftRadius: 20,
       borderTopRightRadius: 20,
-      maxHeight: "85%",
-      minHeight: "50%"
+      maxHeight: "70%",
+      minHeight: "40%",
+      shadowColor: colors.onBright,
+      shadowOffset: { width: 0, height: -4 },
+      shadowOpacity: 0.25,
+      shadowRadius: 12,
+      elevation: 16
+    },
+    panelHandle: {
+      alignItems: "center",
+      paddingTop: 8,
+      paddingBottom: 4
+    },
+    panelHandleBar: {
+      width: 36,
+      height: 4,
+      borderRadius: 2,
+      backgroundColor: colors.border
     },
     // Header
     header: {
@@ -19471,7 +19548,7 @@ function createStyles16() {
     },
     contentContainer: {
       padding: 16,
-      paddingBottom: 32
+      paddingBottom: import_react_native22.Platform.OS === "ios" ? 50 : 28
     },
     // Loading
     loadingContainer: {

package/dist/index.mjs

@@ -12902,7 +12902,7 @@ var BugBearClient = class {
   async updateAssignmentStatus(assignmentId, status, options) {
     try {
       await this.ensureReady();
-      const { data: currentAssignment, error: fetchError } = await this.supabase.from("test_assignments").select("status, started_at").eq("id", assignmentId).single();
+      const { data: currentAssignment, error: fetchError } = await this.supabase.from("test_assignments").select("status, started_at, tester_id, project_id").eq("id", assignmentId).single();
       if (fetchError || !currentAssignment) {
         console.error("BugBear: Assignment not found", {
           message: fetchError?.message,
@@ -12923,6 +12923,19 @@ var BugBearClient = class {
           const completedAt = /* @__PURE__ */ new Date();
           durationSeconds = Math.round((completedAt.getTime() - startedAt.getTime()) / 1e3);
           updateData.duration_seconds = durationSeconds;
+          if (currentAssignment.tester_id && currentAssignment.project_id) {
+            try {
+              const { data: activeTime } = await this.supabase.rpc("compute_assignment_active_time", {
+                p_tester_id: currentAssignment.tester_id,
+                p_project_id: currentAssignment.project_id,
+                p_started_at: currentAssignment.started_at,
+                p_completed_at: updateData.completed_at
+              });
+              updateData.active_seconds = typeof activeTime === "number" ? activeTime : Math.min(durationSeconds, 1800);
+            } catch {
+              updateData.active_seconds = Math.min(durationSeconds, 1800);
+            }
+          }
         }
       }
       if (options?.notes) {
@@ -13001,6 +13014,7 @@ var BugBearClient = class {
         started_at: (/* @__PURE__ */ new Date()).toISOString(),
         completed_at: null,
         duration_seconds: null,
+        active_seconds: null,
         skip_reason: null
       }).eq("id", assignmentId).eq("status", current.status);
       if (error) {
@@ -15133,13 +15147,12 @@ function BugBearProvider({ config, children, appVersion, enabled = true }) {
 }
 
 // src/BugBearButton.tsx
-import React21, { useState as useState18, useRef as useRef6, useMemo as useMemo16 } from "react";
+import React21, { useState as useState18, useRef as useRef6, useEffect as useEffect12, useMemo as useMemo16 } from "react";
 import {
   View as View21,
   Text as Text19,
   Image as Image4,
   TouchableOpacity as TouchableOpacity18,
-  Modal as Modal3,
   ScrollView as ScrollView4,
   StyleSheet as StyleSheet21,
   Dimensions as Dimensions2,
@@ -15148,7 +15161,8 @@ import {
   PanResponder,
   Animated as Animated2,
   ActivityIndicator as ActivityIndicator3,
-  Keyboard as Keyboard4
+  Keyboard as Keyboard4,
+  BackHandler
 } from "react-native";
 
 // src/widget/logo.ts
@@ -19097,14 +19111,31 @@ function BugBearButton({
 }) {
   const { shouldShowWidget, testerInfo, isLoading, unreadCount, assignments, widgetMode, widgetColorScheme } = useBugBear();
   const { currentScreen, canGoBack, push, pop, replace, reset } = useNavigation();
-  const [modalVisible, setModalVisible] = useState18(false);
+  const [panelVisible, setPanelVisible] = useState18(false);
+  const panelAnim = useRef6(new Animated2.Value(0)).current;
   const styles5 = useMemo16(() => createStyles16(), [widgetColorScheme]);
   const screenCaptureRef = useRef6(null);
-  const openModal = () => {
+  const openPanel = () => {
     captureAppScreen().then((uri) => {
       screenCaptureRef.current = uri;
     });
-    setModalVisible(true);
+    setPanelVisible(true);
+    Animated2.spring(panelAnim, {
+      toValue: 1,
+      useNativeDriver: true,
+      friction: 8,
+      tension: 65
+    }).start();
+  };
+  const closePanel = () => {
+    Keyboard4.dismiss();
+    Animated2.timing(panelAnim, {
+      toValue: 0,
+      duration: 250,
+      useNativeDriver: true
+    }).start(() => {
+      setPanelVisible(false);
+    });
   };
   const getInitialPosition = () => {
     const buttonSize = 56;
@@ -19155,7 +19186,7 @@ function BugBearButton({
           tension: 40
         }).start();
         if (!isDragging.current && Math.abs(gs.dx) < 5 && Math.abs(gs.dy) < 5) {
-          openModal();
+          openPanel();
         }
         isDragging.current = false;
       }
@@ -19163,6 +19194,19 @@ function BugBearButton({
   ).current;
   const pendingTests = widgetMode === "qa" ? assignments.filter((a) => a.status === "pending" || a.status === "in_progress").length : 0;
   const badgeCount = pendingTests + unreadCount;
+  useEffect12(() => {
+    if (!panelVisible || Platform5.OS !== "android") return;
+    const handler = BackHandler.addEventListener("hardwareBackPress", () => {
+      if (canGoBack) {
+        Keyboard4.dismiss();
+        pop();
+      } else {
+        closePanel();
+      }
+      return true;
+    });
+    return () => handler.remove();
+  }, [panelVisible, canGoBack]);
   if (!shouldShowWidget) return null;
   const getHeaderTitle = () => {
     switch (currentScreen.name) {
@@ -19201,8 +19245,7 @@ function BugBearButton({
     }
   };
   const handleClose = () => {
-    Keyboard4.dismiss();
-    setModalVisible(false);
+    closePanel();
   };
   const nav = {
     push: (screen) => {
@@ -19274,7 +19317,7 @@ function BugBearButton({
         return /* @__PURE__ */ React21.createElement(HomeScreen, { nav });
     }
   };
-  return /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement(
+  return /* @__PURE__ */ React21.createElement(React21.Fragment, null, !panelVisible && /* @__PURE__ */ React21.createElement(
     Animated2.View,
     {
       style: [styles5.fabContainer, { transform: pan.getTranslateTransform() }, buttonStyle],
@@ -19284,27 +19327,37 @@ function BugBearButton({
       TouchableOpacity18,
       {
         style: styles5.fab,
-        onPress: openModal,
+        onPress: openPanel,
         activeOpacity: draggable ? 1 : 0.7
       },
       /* @__PURE__ */ React21.createElement(Image4, { source: { uri: BUGBEAR_LOGO_BASE64 }, style: styles5.fabIcon }),
       badgeCount > 0 && /* @__PURE__ */ React21.createElement(View21, { style: styles5.badge }, /* @__PURE__ */ React21.createElement(Text19, { style: styles5.badgeText }, badgeCount > 9 ? "9+" : badgeCount))
     )
-  ), /* @__PURE__ */ React21.createElement(
-    Modal3,
+  ), panelVisible && /* @__PURE__ */ React21.createElement(View21, { style: styles5.panelWrapper, pointerEvents: "box-none" }, /* @__PURE__ */ React21.createElement(
+    KeyboardAvoidingView,
     {
-      visible: modalVisible,
-      animationType: "slide",
-      transparent: true,
-      onRequestClose: handleClose
+      behavior: Platform5.OS === "ios" ? "padding" : "height",
+      style: styles5.panelKeyboardAvoid,
+      pointerEvents: "box-none"
     },
     /* @__PURE__ */ React21.createElement(
-      KeyboardAvoidingView,
+      Animated2.View,
       {
-        behavior: Platform5.OS === "ios" ? "padding" : "height",
-        style: styles5.modalOverlay
+        style: [
+          styles5.panelContainer,
+          {
+            transform: [{
+              translateY: panelAnim.interpolate({
+                inputRange: [0, 1],
+                outputRange: [screenHeight, 0]
+              })
+            }]
+          }
+        ]
       },
-      /* @__PURE__ */ React21.createElement(View21, { style: styles5.modalContainer }, /* @__PURE__ */ React21.createElement(View21, { style: styles5.header }, /* @__PURE__ */ React21.createElement(View21, { style: styles5.headerLeft }, canGoBack ? /* @__PURE__ */ React21.createElement(TouchableOpacity18, { onPress: () => nav.pop(), style: styles5.backButton }, /* @__PURE__ */ React21.createElement(Text19, { style: styles5.backText }, "\u2190 Back")) : /* @__PURE__ */ React21.createElement(View21, { style: styles5.headerTitleRow }, /* @__PURE__ */ React21.createElement(Text19, { style: styles5.headerTitle }, "BugBear"), testerInfo && /* @__PURE__ */ React21.createElement(TouchableOpacity18, { onPress: () => push({ name: "PROFILE" }) }, /* @__PURE__ */ React21.createElement(Text19, { style: styles5.headerName }, testerInfo.name, " \u270E")))), getHeaderTitle() ? /* @__PURE__ */ React21.createElement(Text19, { style: styles5.headerScreenTitle, numberOfLines: 1 }, getHeaderTitle()) : null, /* @__PURE__ */ React21.createElement(View21, { style: styles5.headerActions }, currentScreen.name !== "HOME" && /* @__PURE__ */ React21.createElement(TouchableOpacity18, { onPress: () => nav.reset(), style: styles5.homeButton }, /* @__PURE__ */ React21.createElement(Text19, { style: styles5.homeIcon }, "\u2302")), /* @__PURE__ */ React21.createElement(TouchableOpacity18, { onPress: handleClose, style: styles5.closeButton }, /* @__PURE__ */ React21.createElement(Text19, { style: styles5.closeText }, "\u2715")))), /* @__PURE__ */ React21.createElement(
+      /* @__PURE__ */ React21.createElement(View21, { style: styles5.panelHandle }, /* @__PURE__ */ React21.createElement(View21, { style: styles5.panelHandleBar })),
+      /* @__PURE__ */ React21.createElement(View21, { style: styles5.header }, /* @__PURE__ */ React21.createElement(View21, { style: styles5.headerLeft }, canGoBack ? /* @__PURE__ */ React21.createElement(TouchableOpacity18, { onPress: () => nav.pop(), style: styles5.backButton }, /* @__PURE__ */ React21.createElement(Text19, { style: styles5.backText }, "\u2190 Back")) : /* @__PURE__ */ React21.createElement(View21, { style: styles5.headerTitleRow }, /* @__PURE__ */ React21.createElement(Text19, { style: styles5.headerTitle }, "BugBear"), testerInfo && /* @__PURE__ */ React21.createElement(TouchableOpacity18, { onPress: () => push({ name: "PROFILE" }) }, /* @__PURE__ */ React21.createElement(Text19, { style: styles5.headerName }, testerInfo.name, " \u270E")))), getHeaderTitle() ? /* @__PURE__ */ React21.createElement(Text19, { style: styles5.headerScreenTitle, numberOfLines: 1 }, getHeaderTitle()) : null, /* @__PURE__ */ React21.createElement(View21, { style: styles5.headerActions }, currentScreen.name !== "HOME" && /* @__PURE__ */ React21.createElement(TouchableOpacity18, { onPress: () => nav.reset(), style: styles5.homeButton }, /* @__PURE__ */ React21.createElement(Text19, { style: styles5.homeIcon }, "\u2302")), /* @__PURE__ */ React21.createElement(TouchableOpacity18, { onPress: handleClose, style: styles5.closeButton }, /* @__PURE__ */ React21.createElement(Text19, { style: styles5.closeText }, "\u2715")))),
+      /* @__PURE__ */ React21.createElement(
         ScrollView4,
         {
           style: styles5.content,
@@ -19313,9 +19366,9 @@ function BugBearButton({
           showsVerticalScrollIndicator: false
         },
         isLoading ? /* @__PURE__ */ React21.createElement(View21, { style: styles5.loadingContainer }, /* @__PURE__ */ React21.createElement(ActivityIndicator3, { size: "large", color: colors.blue }), /* @__PURE__ */ React21.createElement(Text19, { style: styles5.loadingText }, "Loading...")) : renderScreen()
-      ))
+      )
     )
-  ));
+  )));
 }
 function createStyles16() {
   return StyleSheet21.create({
@@ -19359,18 +19412,42 @@ function createStyles16() {
       fontSize: 11,
       fontWeight: "700"
     },
-    // Modal
-    modalOverlay: {
+    // Panel (replaces Modal — no backdrop, app stays interactive)
+    panelWrapper: {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      zIndex: 9998,
+      justifyContent: "flex-end"
+    },
+    panelKeyboardAvoid: {
       flex: 1,
-      justifyContent: "flex-end",
-      backgroundColor: "rgba(0,0,0,0.5)"
+      justifyContent: "flex-end"
     },
-    modalContainer: {
+    panelContainer: {
       backgroundColor: colors.bg,
       borderTopLeftRadius: 20,
       borderTopRightRadius: 20,
-      maxHeight: "85%",
-      minHeight: "50%"
+      maxHeight: "70%",
+      minHeight: "40%",
+      shadowColor: colors.onBright,
+      shadowOffset: { width: 0, height: -4 },
+      shadowOpacity: 0.25,
+      shadowRadius: 12,
+      elevation: 16
+    },
+    panelHandle: {
+      alignItems: "center",
+      paddingTop: 8,
+      paddingBottom: 4
+    },
+    panelHandleBar: {
+      width: 36,
+      height: 4,
+      borderRadius: 2,
+      backgroundColor: colors.border
     },
     // Header
     header: {
@@ -19453,7 +19530,7 @@ function createStyles16() {
     },
     contentContainer: {
       padding: 16,
-      paddingBottom: 32
+      paddingBottom: Platform5.OS === "ios" ? 50 : 28
     },
     // Loading
     loadingContainer: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbearai/react-native",
-  "version": "0.8.4",
+  "version": "0.9.0",
   "description": "BugBear React Native components for mobile apps",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",